Trvalo mi několik let pozvolného kódování, než jsem viděl, že ideje vštěpené mi kodérskou elitou jsou silně kontraproduktivní.
…jsem napsal. Myslel jsem to takto:
Se stále se zvětšujícími přestávkami už plus-mínus pět let píšu HTML/CSS kód. V podstatě od začátku do dnes mám pocit, že to nedělám dost dobře, že musí existovat přístup, který jasně popíše, jak vypadá dobrý kód (jak se tvoří a jak se kvalita hodnotí).
Pokračování první kapitoly, ve které jsem se podělil o základy. Teď něco z šuplíku pro pokročilé. Jak z Windows virtualizovaných ve VirtualBoxu přistoupit k lokálnímu serveru?
Budete potřeboval nějaký software pro virtualizaci Windows. Jsou i komerční, ale používám bezplatný Virtual Box a nevidím důvod proč přecházet na Parallels Desktop nebo jiný placený software (přestože asi (typicky) nabízejí trochu komfortu navíc).
Mám jednu virtuální mašinu s Windows XP s Internet Explorerem 6, 7 a 8. (Nainstalované s pomocí Utilu IE Collection). A pak ještě jednu s IE9. Dobré vědět, že kvůli IE9 si nemusíte kupovat licenci Vist nebo Sedmiček, jak jsem to udělal já. Nedávno jsem narazil na řešení, které je zdarma, relativně pohodlné a bezplatné. A protože stažený systém (Windows 7) je stále v trial stavu, řekl bych, že i legální. (Po uplynutí trial lhůty se dá systém vyresetovat do původního stavu a 30 dní běží znovu, jestli jsem to dobře pochopil.)
Samozřejmě spustit si další operační systém je na prostředky docela drahá legrace, ale to by vás už nemělo trápit, protože 8 GB pamětí je dnes legrace překvapivě levná.
Pokračování příště.
Víte, přechody (transitions) vkládají do prezentace časovou dimenzi. To znamená, že ovlivňují vnímání stránky. Jeden příklad jsem uváděl nedávno při rozebírání Apple webu, na kterém je animace (přechodu) použito přínosným způsobem, snad jako pomůcka při vysvětlování rozhraní. V dnešním konkrétním případě je přechodu užito – dovolím si říct – kontraproduktivně.
Snad je dobré zdůraznit, že od webových aplikací se očekává chování poněkud jiné, než od webových prezentací, totiž více funkcionalistické, více pragmatické. Zvlášť, pokud jde o analytickou aplikaci :-). Očekává se mimo jiné maximální rychlost reakce. Nechci říct, že vložení půl-sekundového přechodu do události myš je nad klikatelnou položkou menu ⇒ změnit její barvu je nějak zvlášť opovržení-hodným prohřeškem – ne – avšak o kontraproduktivní eye-candy zajisté jde. (Kontraprodukcí tady myslím nežádoucí zpomalení zpětné vazby.)
Zároveň i v Google Analytics existují situace, v niž má přechod praktické uplatnění. Kromě těch, kdy chceme zmírnit „mouse-over“ efekt (protože reakce na událost není úplně relevatní) (např. zobrazení doplňkových informací) jde o situace ty, kdy potřebujeme čas. A co si budeme povídat, GA jsou občas pekelně pomalý nástroj a myslím že právě přechody a animace (ať už implementované kteroukoli technologií) by mohly tento dojem trochu korigovat. Umím si představit, že než se půl-až-sekundová animace dokončí, na pozadí jsou staženy další data. A ty mohou být zobrazeny opět přechodově, aby nenarušily případně běžící myšlenkový tok.
Apple.com redesignovalo přesně tak, jak dnes redesignuje každý. Po malých kouscích. Jo, nic moc se nezměnilo – kromě mírné proměny grafického stylu (viz hlavní navigace) přibylo pár fancy efektů – zkrátka a dobře v součtu považuji apple(.com) za praktickou ilustraci toho, jak by se měly věci dělat. A proto bych chtěl apple.com reverzně zinženýrovat a vyjmuté orgány nechat kolovat posluchárnou. A poté si o nich popovídat.
Kromě toho, doufám, že mi s tím pitváním pomůžete.
border-image – opravdu
malinký obrázek vložený přímo do CSS souboru (jako
url(data:image/png;base64,etc))
úvodka má 750 KB a na iPhonu se zobrazí zrovna tak, jako
v desktopovém prohlížeči. Neumím si dost dobře vysvětlit neexistenci
mobilní verze anebo alespoň mobilního layoutu pomocí CSS media-queries a
spíše mi to připadá jako zanedbávání určitého segmentu. Protože už
kvůli datové velikosti bude UX při mobilním prohlížení… no,
problematické.a > h4 + p a použití web
storage. Vlastní atributy si vymýšlí, ale nevím proč je neprefixují s
data-. V iTunes sekci naleznete známky WAI-ARIA.border-radius a box-shadow jsou dnes klasika,
zítra skoro retro :-)Neméně mě u řízeného vykreslování zajímá technické provedení. Bohužel, i tyto neutříděné myšlenky zapisuji s vtíravou představou na klienta, který čeká na slíbený návrh, takže tady bych doufal, že v kolaboračním duchu budete pokračovat v rozboru vy v komentářích.
Načítání mě tak zaujalo, že jsem si ho nahrál a pustím si ho ve smyčce před spaním. Enjoy.
Screenshot stránky v IE 6 a v Safari 5. Navzdory technologické nesrovnatelnosti obou prohlížečů, výsledek je téměř totožný. Všimněte si zakulacených rohů a vnitřních stínů v Safari a také použití šumu (součástí obrázku na pozadí). Na obrázcích není vidět rozdíl v :hover stavu u čtveřice boxů (ani v IE 8 tento efekt není vidět, protože změněné pozadí je definováno CSS gradientem).
Detail stránky v 300% zvětšení, zleva: Safari a IE 6.
Plná velikost (PNG, 700 KB): Safari a IE 6
Vážně, teď prosím vy. Co se vám zdá inspirativní nebo alespoň pozoruhodné? Ať už z pohledu grafiky, UX nebo HTML5 (klidně v tom lidovém slovasmyslu :-). Doplňujte, rozšiřujte, opravujte, kritizujte, dovoleno je vše.
