Shirley E. Kaiser nabízí ve spotu Abbreviations, Acronyms, and Shortened Words několik zajímavých odkazu, které se týkají značek a . Malá technická poznámka:

abbr

abbr se používá pro označování/vysvětlení zkratek (např. HTML) – pokud máté WinIE, tak si 2 předchozí abbr moc neužijete.

acronym

acronym se používá pro označování/vysvětlení zkratkových slov – vyslovují se jako jediné slovo (např. Narpa).

Při téhle příležitosti mě napadá, že každý pořádný HTML editor by měl mít funkci, která při vložení obou prvků doplní title s vysvětlujícím textem. Ne každý to ale umí.

I když je všeobecně známo, jaký formát souboru zvolit na webové stránce pro daný účel, tak se pořád při užití obrázků opakují stejné chyby:

• Nadbytečné užití obrázků – grafika se vkládá tam, kde stačí text (např. nadpisy), nebo kde je obrázek zbytečný (formátovací vycpávky apod.).
• Velké obrázky – obrázek velkého rozměru. Líní autoři místo zmenšení obrázku raději nastaví width a height.
• Špatná volba formátu – schémata v JPEG, fotografie v GIF. Výsledkem je větší soubor a nižší kvalita obrázku.
• Neoptimalizované obrázky s velkou barevnou hloubkou nebo nízkým stupněm komprese. Nejsou vyjímkou obrázkové 2-barevné odrážky v TrueColor. Většinu obrázků je nutné před použitím na webu optimalizovat.

V souhrnu dojde k neúměrnému zvětšení velikosti stahovaných dat – stránka se pomalu natahuje. Výsledkem je nespokojený uživatel. Autor by si měl dobře rozmyslet, jestli je vůbec nutné do dokumentu nějaký obrázek vkládat.

Pro ty, kteří si myslí, že planě teoretizuji, posloužím touto zkušeností. Z cache jsem si dnes vyzvedl 10 obrázků (5× GIF, 4× JPEG a 1 PNG, velikost 121 kB). Během chvilky jsem je optimalizoval. A výsledek? Soubory po optimalizaci mají 64 kB při totožné kvalitě. Nemyslete si, že jsem vybral nějaké amatérské weby – stačí si zoptimalizovat aktuální logo Google se sněhuláky.

Základní bitmapové formáty pro web

GIF

Graphics Interchange Format od CompuServe Inc. je patentovaný grafický formát využívající bezztrátovou LZW kompesi. Max. 256 barev (1 – 8bitové) s použitím barevné palety. Podporuje průhlednost a animace (sada jednotlivých obrazů). Vhodný pro obrazy bez šumu (grafy, schémata apod. – větší plochy 1 barvy).

JPEG

[džej-peg] od sdružení Joint Photographic Experts Group využívá ztrátovou kompresi založenou na algoritmu diskrétní kosinové transformace. Je standardizován (ISO). Může zobrazit 24b barvy (True Color, tj. 16 777 216 barev) s definovanou úrovní komprese (tzv. Q faktor). Byl vytvořen pro zobrazení reálného světa (typicky fotografie). Pro odstranění známých problémů (vady zobrazení na hranách) byl vytvořen formát JPEG2000, který ale není výrazně podporován.

PNG

[ping]. Portable Network Graphics je nejmladší z uvedených formátů. Využívá bezztrátovou kompresi. Nepatentovaná náhrada a vylepšení formátu GIF: podpora alfa kanálu (poloprůhlednost), gama korekce (meziplatformní řízení jasu), vylepšení komprese atd. Podporuje až 64b barvy.

Podpora grafických formátů

Moderní prohlížeče (IE6 a mladší) podporují výše zmíněné webové grafické formáty (IE Win má problémy s PNG – alfa kanál). Jak je to ale s dalšími používanými grafickými formáty?

Další grafické formáty prohlížeče nezobrazují (testován EPS, IFF, PCX, RAW, TIFF) – viz testovací stránka. Množství podporovaných formátů zobrazených v IE samozřejmě neznamená výhodu pro IE – formáty nejsou určeny pro web. Je škoda, že současné prohlížeče nepodporují JPEG2000, který v mnoha ohledech vylepšuje starý JPEG.

Souvislosti

• Graphics on the Web – W3C
• PNG (Portable Network Graphics)
• Browsers with PNG Support – Greg Roelofs
• PNG W3C Recommendation – W3C
• Portable Network Graphics – domovská stránka PNG
• Full PNG Image Support Tests – Peter K. Sheerin
• JPEG JFIF – W3C
• Image File Formats – Ross Shannon

Stuart Langridge (kryogenix.org) v článku sorttable: Make all your tables sortable popisuje způsob, jak třídít HTML tabulky podle jejich obsahu kliknutím na záhlaví. Vše je řešeno pomocí DOM a JavaScriptu a samozřejmě ber reloadování. Řešení může být vhodné třeba pro nejrůznější intranetové aplikace.

Dušan Janovský měřil pomocí JavaScriptu chování uživatelů při rolování na několika stránkách webu Jak psát web. Říjnový obsáhlý rozbor chování uživatelů IE6 na 13 stránkách ukazuje, že 3/4 alespoň jednou scrolovalo. 55 % rolujících uživatelů pak rolovalo kolečkem na myši.

Bylo by zajímavé zjistit, kolik procent uživatelů IE6 má myš s kolečkem. Co vím, tak ne všichni uživatelé ví, že nějaké kolečko na myši vůbec mají. Ale stačí na ně trochu zatlačít a mnoho z nich si rychle na jeho používání zvykne.

Marek Prokop na Živě pokračuje ve svém seriálu o kultivaci návštěvnosti dílem Analyzujeme klíčová slova. Doporučuji přečíst.

Mě osobně zaujal odkaz na GoRank a oprášil jsem si vzpomínku na Google AdWords Keyword Suggestions.

Petr Bříza vás v článku Znakové sady v praxi uvede do problematiky používání znakových sad. Dozvíte se co je to znaková sada, kódování znaků a pár informací, jak se rozhodnout při volbě znakové sady.

Souvislosti

• O znakové sadě x-mac-ce – Petr Staníček
• Znakové sady – Petr Weida
• RSS čtečky a čeština
• Čeština v b2

Při vývoji webových stránek by autor neměl zapomínat na pravidlo 3 kliků, které říká, že by se návštěvník měl k požadované informaci dostat na nejvýše 3 kliknutí. V opačném případě může propadnout frustraci z práce na daném webu.

Josh Porter v článku Testing the Three-Click Rule informuje o testu provedeném na 44 uživatelích, kteří pro splnění 620 úkolů klikli více než 8000×. Jedním z cílů bylo ověřit, jestli uživatel po oněch 3 kliknutích znechuceně opouští web, protože nenašel co hledal (via Nick Bradbury).

Výsledky výzkumu bourají pravidlo 3 kliků. Uživatel nepočítá kliknutí. Spíš mu vadí velká doba hledání, bloudění a neúspěch.

Our analysis showed that there wasn\’t any more likelihood of a user quitting after three clicks than after 12 clicks. When we compared the successful tasks to the unsuccessful ones, we found no differences in the distributions of tasks lengths. Hardly anybody gave up after three clicks.

To ale neznamená, že není nutné vést uživatele k cíli. Že ho necháme dlouho bloudit v chaosu odkazů. Na druhou stranu se ale ukazuje, že pokud je uživatel motivován k dosažení cíle, je ochoten leccos překousnout. Moc bych na to ale nespoléhal.

Selectutorial je další užitečnost z dílny Max Design. Selectutorial vás krok za krokem provede úskalími práce s CSS selektory.

Nástroje od Maxdesign

• Listamatic
• Listamatic 2
• Listutorial
• Floatutorial
• Selectutorial

Jak někteří poznali, tak jsem nadpis převzal ze spotu Stylování formulářových prvků. Ehm. – Petr Staníček. Petr uvádí dobré důvody proč nestylovat formulářové prvky. Zjistíte, proč nepoužít návod Sylish Buttons, který sepsal M. C. Matti.

Formulářové prvky (tlačítka, textová pole, seznamy a spol.) jsou totiž vykreslovány různě. Kombinuje se přebírání vzhledu z operačního systému, použití pravidel prohlížeče atd. Autor nikdy nemůže vědět, na jakém prohlížeči a přístroji bude stránka zobrazena.

Na conBLOGu taky přestylovávám formuláře (koneckonců mě k tomu Pixy popostrčil). Zajímalo by mě, jestli máte s mými formuláři nějaké problémy. Potnámka: o chybě rozhozených labelů v komentářích vím.

Petr Staníček updatoval své rychlé rollovery bez preloadu. Marek Blaha totiž navrhl vylepšení, které odstraňuje nepříjenmé poblikávání v IE pro Windows. Podívejte se na příklad upravy. Více čtěte v CSS: Rollovery bez preloadu, aktualizace.