Obsah byl lehce revidován
v září 2012, aby byl méně vtipný a více nápomocný lidem hledajícím
dodavatele webdesignových služeb.
Webaři, pořád se člověk dočte o hrozných klientech, tak schválně…
Chci vytvořit web a chci najít správnou firmu. Jak by nejlépe měla vypadat
poptávka, když si chci vybírat z nabídek (včetně grafického
návrhu)?
To máme hned několik námětů k zamyšlení:
Co dělá hrozného klienta hrozným a v čem se liší od dobrého?
Jak najít správnou firmu, co mi udělá web? Jak rozpoznat
nesprávnou firmu?
Jak by měla vypadat poptávka webového projektu?
Jak mám vybírat z nabídek?
To jsou všechno moc moc složité otázky, takže na ně nebudu odpovídat.
Místo toho odpovím na jiné.
Koukal jsem na přednášku Google I/O 2011: Chrome Dev Tools
Reloaded a koukám že Chrome umí aktuálně pár věcí, co Safari (můj
výchozí) zatím neumí.
23. srpna – již chvíli je venku Safari 5.1, který skoro všechny zmíněné vlastnosti již
obsahuje.
Tohle mě zaujalo:
Network záložka
Network je nová záložka, co bere něco z Resources (z pohledu uživatele
Safari), něco přidává, něco dělá jinak. Resources navíc pojmulo sekci
Storage.
Úprava CSS a JS za běhu
Na přidání nebo upravení pár jednoduchých CSS vlastností postačí
sekce Elements. Ale na cokoli složitějšího, anebo javascript je lepší jít
přes Resources. (Tohle [úpravy JS] je vůbec pozoruhodné, jak dobře to
funguje. Bez reloadu stránky, atd.)
Revize úprav
To navazuje na výše. Když si uložíte úpravy přes ⌘-S
(na Win asi CTRL-S), vytvoří se nová revize souboru – ke které je možné
se vrátit. To vskutku otvírá nové možnosti!
Novinky v breakpointech (debugování JS)
Breakpoint může být umístěn automaticky na všechny výskyty použití
vybrané události (z těch několika běžných).
Za druhé, a to se mi vážně líbí, byť si teď (opět) nejsem jist
skutečnou praktičností funkce… no vizte obrázek:
Timeline
Paul Irish ji myslím v přednášce použil na „zjištění, co se
vlastně při uživatelské akci děje“ (jaké události jsou spouštěny, co
na ně reaguje, jak dlouho to trvá, atp.). Nevěděl jsem, že dá časové
rozmezí takle snadno omezit, ale to možná protože na tuto záložku prostě
nelezu.
Dekomprese skriptíků
Tohle šikovné tlačíto rozdělí kód na více řádků a odsadí ho, ale
jestli se tím kód stane čitelným, to věru nevím :-).
Klávesové zkraty
Nápověda se vyvolá otazníkem. Ale funguje mi to jen v nočním buildu
WebKitu.
Trochu mě mrzí že přednáška neuvádí realističtější use-casy. Tím
pádem je objevování toho, co je nejen zajímavé, ale i praktické spíše
na nás :-).
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.
Sympatický krok – snad v souvislosti s nadcházejícím zveřejněním
9. verze Internet Exploreru – podnikl sám Microsoft a spustil projekt pro
podporu vymýcení IE verze 6. Na webu ie6 countdown.com nabízí kromě
průběžného zpravodajství o stavu vyhlazování i ne moc pěkný banner
pro vaše-naše stránky s výzvou k upgradu (dnes stále ještě na IE 8).
Pozoruhodné je, že poskytnutý kód, potažmo hláška je určena nejen pro IE
6, ale i IE 7.
Tentýž proužek, ovšem zpracovaný graficky o 6 tříd lépe naleznete
mimo jiné i na ie6 update.com. Konkrétně
ie6 update.com poskytuje hlášku nepovedenou tentokrát technicky, takže jsem
si vyhrnul rukávy a napsal to po svém.
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.
Orgány
Hlavní navigační pruh
ztěží postřehnutelné CSS3 gradienty na pravém a levém okraji
samotná tlačítka jsou (spritovaným)
obrázkem. Nejsem si jist, jestli bych to nezkusil řešit pomocí CSS
gradientů a stínů. Kvůli iPodům a iPhonům bude mít apple.com
nezanedbatelnou část návštěvníků prohlížejících v Internet
Exploreru. Takže asi ne. U jemných gradientů je samozřejmě
situace jiná.
vizte příčky mezi tlačítky: border-image – opravdu
malinký obrázek vložený přímo do CSS souboru (jako
url(data:image/png;base64,etc))
a samozřejmě CSS transitions. A zdá se, že vyjmenovali
všechny dostupné vendor-prefixy! :-)
ú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é.
pokud bychom byli důslední a HTML5 bychom na apple.com
nehledali v CSS a JQ souborech, nevím, kolik bychom ho našli. Nevidím dál,
než za doctype, konstrukce typu 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 :-)
nejzajímavější ze všeho mi přijde… tramtarará:
načítání. Myslím, že postupné načítání
stránky, načítání s vizuálními efekty pohybu a přechodu jsou
zajímavá neprobádaná oblast – hlavně mám na mysli vliv takových
efektů na vnímání stránky. Rád bych si s tím v blízké budoucnosti
pohrál. (Zároveň se trochu obávám, že nebudu sám a čeká nás druhá
vlna nevkusných, nesmyslných animací.)
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.
V Safari
Ve FireFoxu 4
Doplnění 28. ledna
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.
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.
