conBLOG

Rok se s rokem sešel a já opět procházím výsledky krajského kola soutěže Zlatý erb. Protože jsme za poslední rok zapracovali na vzhledu i obsahu našeho obecního webu, tak jsme si logicky v jednotlivých podkategoriích relativně polepšili i pohoršili.

Abych měl nějaký fárplán (chcete-li roudmapu), tak si musím sepsat náměty na vylepšení stávajícího webu. A rovnou je fiknu sem. Jednak ten papír, ze kterého to budu opisovat, někam založím a příště už nenajdu. Jednak by byla škoda se nepodělit se svými zjištěními. V každé hodnotící podkategorii jsem navštívil dva/tři nejlépe hodnocené weby a podíval se na příslušné vlastnosti, kterými se liší od toho "mého" webu.

Následují hlavní postřehy, které bych měl zapracovat do obecního webu, aby uspěl v příštím ročníku Zlatého erbu:

Když navigace, tak pořádná!

Mapa webu patří na každou stránku obecního webu. Úplná sada odkazů musí být v levém i pravém sloupci trojsloupcového layoutu. Hodně textu = bohatý obsah.

Plnotučné texty odkazů v navigaci

Položky menu musí být výstižné (=dlouhé). Z toho plynoucím příznivým efektem jsou několikařádkové položky menu, na kterých libě spočine zrak návštěvníka. Větší plocha odkazu přitáhne oko. Porotce vidí pořádný obsah.

Živé fotografie

V záhlaví stránky oficiálního webu každé obce, by vedle příslušného objemu textu (stručná historie obce se obzvlášť cení) by neměla chybět panoramatická fotografie obce. Zbytek prostoru by měly vyplnit pohyblivé nebo aspoň měnící se fotografie z obce. Hlavička se příjemně oživí. Pohyb zaujme.

Ikonky na weby

V navigačních sloupcích nesmí chybět barevně i velikostí nesladěné ikony na státní weby, krajské weby, regionální agentury, místní klub, zde propíranou soutěž a "hýbací" reklama.

Plnohodnotná titulka

Úvodní stránka webu musí obsahovat všechny opravdu důležité informace. Důležitá je přitom většina webu. Uvést odkazy na hlavní sekce, aktuální informace nebo stručně vystihnout účel webu nestačí.

Místo očistného závěru přiznávám, že jsem smazal pozitivní i negativní verzi závěru. Byly ještě pitomější, než výše uvedený ironický text. Takže nejste o nic ochuzeni. A já jsem si oba opravdu užitečné tipy na vylepšení webu poznamenal.

trvalý odkaz | komentáře (2)

Jednou z prvních věcí, které dělám po nové instalaci aplikací, je pořádek na nástrojových lištách. Schovám nepoužívané nástrojové lišty. Vyčistím je od zbytečných ikon, přidám skryté ikony. Takto třeba vypadal můj FrontPage (teď se chystám zrušit dalších pět ikon).

Mnoho aplikací pod MS Windows umožňuje přizpůsobení nástrojové lišty. Upravit obsah nástrojových lišt uměl i FrontPage i jeho následovník Microsoft Expression Web (MSEW). Abych byl přesný, uměl do verze 2. Zkouším novou verzi Microsoft Expression Web 3 a nestačím se divit. Vývojáři tuto užitečnou funkci jaksi nenaprogramovali.

Temná nezměnitelná podoba GUI Microsoft Expression Web 3

Vypadá to, že možnost úpravy obsahu nástrojových lišt padla za oběť úžasnému novému bububu vzhledu MSEW3 (skinování nejde vypnout). Respektive to asi vývojáři při degradačním sjednocování vzhledu MSEW se zbytkem "expresního" balíku nestihli naprogramovat. Zatím slibují, že se funkcionalita vrátí v některém z opravných balíčků.

Na každý pád zapomeňte, že byste mohli měnit obsah nástrojové lišty v Microsoft Expression Web 3. Jenom doufám, že do MSEW nechystají ribbon.

trvalý odkaz | komentáře (3)

Zhruba po roce vydal Microsoft novou verzi svého nástroje pro tvorbu webových stránek Microsoft Expression Web 3. Spolu s MSEW byla vydána celá® rodina® dalších "Expression" programů.

Když jsem loni na MDŽ psal o tom, že vyšel MS Expression Web 2 Beta, tak jsem byl ke druhé verzi dost kritický. Abych se letos neopakoval, tak budu jen kritický. Chybu by ale udělal ten, kdo by na základě mé kritiky usoudil, že je Expression Web 3 špatný program na tvorbu webů. Jenom není dokonalý a mnohé novinky mi přijdou tak trochu "z nucu".

Z mnoha zásadních změn musím na prvním místě uvést opět nový splash screen, který je orientován na výšku(!) a má zaoblené rožky. To zaoblení je zásadní, protože je na něm vidět, že vývojáři v Microsoftu nespí a reagují na moderní trendy. A taky jenom nekloužou po povrchu, protože zaoblení je vidět na každém kroku. Posuďte sami: zaobleno je menu, rozbalovací seznamy, panely nástrojů, ouška záložek a dokonce i stavový řádek. Prostě kůl.

GUI první a třetí verze (vpravo) MSEW

Na obrázku vidíte módně tmavé křiklavé uživatelské rozhraní (nepodařilo se mi najít, kde jej vypnout). Potěší především horší čitelnost textů rozbalovacího seznamu (snížením kontrastu textu a pozadí a špatným vykreslením některých znaků), zbytnění některých prvků GUI (ubírá pracovní prostor) a divně zelené vyznačení bloků textu a vybraných položek menu. Naštěstí nebyli vývojáři důslední a tak jsou třeba dialogová okna vykreslována standardně.

Co je nového

Vedle výše zmíněných zásadních novinek web Microsoftu píše o těchto věcech:

• SuperPreview zobrazuje webovou stránku tak, jak ji vykreslí různé prohlížeče (na mém PC nabízí FF3, FF3.5, IE6, IE8 a IE8 degradovaný na IE7).
• Snapshot Preview zobrazuje stránku tak, jak bude vykreslena (užitečné např. pro ASP nebo PHP stránky). Zatím jsem neměl čas otestovat.
• Vylepšené FTP umí paralelní přenos i na více serverů a to i v režimu FTPS a SFTP.
• Podpora Silverlight.
• Podpora IE8.

Za kolik a pro koho

Plná verze MS Expression Web 3 stojí 149 USD (upgrade je za 79 doláčů). Na počítači (min. 1 GHz procesor, 1 GB RAM, HDD 1,5 GB) musíte mít WinXP SP2, Visty nebo Win7.

Zkušební 60denní verze je ke stažení na stránkách Microsoftu a má necelých 123 MB.

Vyplatí se upgrade?

Pro mě se upgradovat z první verze MSEW jistě nevyplatí. To by musel Microsoft dovolit zrušit skinování a konečně opravit chybu, kdy nelze vybrat blok textu mezi textovým kurzorem a pozicí ukazatele myši (když stisknu Shift, tak se ukazatel myši změní na kříž a tím jsem dovybíral).

Naštěstí si už po instalaci Expression Web neuzurpuje asociace php souborů a zdá se mi, že v režimu Design vykresluje obsah stránky lépe.

trvalý odkaz | komentáře (3)

ColorBox je dalším z mnoha klonů Lightboxu, zobrazovače obrázků (občas používám úspornější Slimbox). Vedle obrázků umí ColorBox (via Plaváček) zobrazovat mj. inline a iframe obsah. Vzhled ColorBoxu je dobře nastavitelný pomocí CSS. Chování pak lze ovlivnit mnoha dalšími parametry.

trvalý odkaz | komentáře (6)

Chris Coyier zveřejnil další screencast tentokrát na téma vytvoření tiskového stylopisu. Podívejte se na video v článku Building a Print Stylesheet. Krok po kroku se seznámíte s připojením CSS souboru, uvidíte rozdíl mezi tiskem s a bez tiskového stylopisu. Chris píše soubor print.css řádek po řádku, ladí ve Firebugu, po každém kroku ukazuje náhledy v PDF. Postupně z tiskového výstupu "vyškrtává" (via display: none) nepotřebné části (menu, formuláře, zbytečné obrázky atp.). Dovíte se, jak vynutit odstránkování nebo skrývat prvky bez zadané třídy nebo identifikátoru na základě textu.

Pokud umíte aspoň trochu anglicky a chcete se přiučit tvorbě tiskového stylopisu, tak se na video určitě podívejte.

trvalý odkaz | komentáře (3)

Včera jsem na jeden web vkládal několik státních vlajek. Zjistil jsem, že se barvy vlajek z různých zdrojů liší. Tak jsem začal pátrat.

Čas od času vkládám do webových stránek státní vlajky. Na webu existuje spousta stránek, které obsahují státní vlajky. Stačí si jen vybrat. Jsou ale státní vlajky nabízené na webu nebo ty, které si sami nakreslíte, správné? Pomíjím skutečnost, že vlajka neodpovídá danému státu nebo má špatnou konstrukci. Jedná se mi o barvy vlajek.

Česká vlajka

Víte, že modrý klín na české vlajce zasahuje do poloviny její délky a vlajka má poměr stran 3:2?

Popis české státní vlajky je uveden v zákoně 3/1993 Sb. Barvy české vlajky jsou dané přílohou 3. Nějak se mi ale nezdají odstíny červené a modré barvy. Ve zdroji, ze kterého jsem čerpal, je barevné provedení tuze pejntbraší a vlajka je vyvedena velmi amatérsky. Celkově to na mě působí dost nevěrohodně. V zákoně jsem nikde nenašel prostou definici jednotlivých barev české státní vlajky. I když mě to vlastně ani nepřekvapuje.

Dobrý zdroj informací

Jako docela dobrý zdroj informací o vlajkách se mi jeví web Flags of the World. Na něm jsem třeba narazil na některé níže uvedené definice barev státních vlajek.

Barvy vybraných státních vlajek

Stát	Barva	RGB	HTML
ČR	červená	215, 20, 26	#D7141A
	modrá	17, 69, 126	#11457E
Francie	červená	242, 24, 48	#F21830
	modrá	0, 38, 128	#002680
Německo	červená	199, 23, 18	#C71712
	zlatá	255, 140, 26	#FF8C1A
Slovensko	červená	206, 17, 38	#CE1126
	modrá	0, 56, 168	#0038A8
Velká Británie	červená	240, 22, 58	#F0163A
	modrá	0, 58, 208	#003AD0

Pár poznámek k obsahu tabulky:

• Převody barev jsou přibližné. Popisy barev vlajek jsou často uváděny v "newebových" formátech (PANTONE, RAL atp.), převodní software vrací přibližné hodnoty (často to není možné z podstaty) atp.
• V tabulce neuvádím černou a bílou barvu.
• Union Jack má poměr stran 2:1 a německá vlajka 5:3.

Proč píšu o barvách vlajek

Cílem tohoto povídání není zveřejnění vyčerpávajícího seznamu barev všech státních vlajek. Také si nemyslím, že jsem neomylný a výše uvedené hodnoty mohou obsahovat nepřesnosti. Proto uvítám případné připomínky.

Chci především upozornit na skutečnost, že barvy státních vlajek jsou definovány různým způsobem a stejně pojmenované barvy na různých státních vlajkách mohou být odlišné (a často také jsou). No a možná toto povídání o barvách vlajek bude někomu k užitku.

Taky by mě zajímalo, jestli při používání nebo kreslení státních vlajek na svých webech berete v potaz rozdílnost barev, případně odkud vlajky získáváte?

trvalý odkaz | komentáře (20)

Internet Explorer 8 přichází s novou funkčností nazvanou Web Slice. Pomocí Web Slice můžete kontrolovat změny na webových stránkách bez toho, abyste na dané stránky v prohlížeči šli. Stačí, abyste měli IE8 nebo nainstalovaný doplněk do svého prohlížeče a stránka musí být pro Web Slice připravena.

Podrobnější informace najdete v článku Subscribing to Content with Web Slices.

Co je Web Slice

Autor stránky vyznačí oblast, která může být webovým prohlížečem automaticky kontrolována. Abyste zjistili, jestli se tato část stránky změnila, nemusíte na stránku přejít. Stačí, když v prohlížeči použijete nástroj, který si vyznačenou část stránky přečte a zobrazí náhled na tento obsah. IE8 zobrazuje Web Slice v panelu Oblíbené položky.

Oficiální ikona Web Slice

Web Slice na conBLOGu

Minulý týden jsem nasadil Web Slice tady na conBLOG. Na titulní stránce conBLOGu je vyznačen nejnovější spot. Pokud máte IE8 nebo Firefox s příslušným rozšířením (viz dále) můžete zkusit najet myší na nejnovější spot. Připomínám, že musíte být na titulní stránce conBLOGu.

Jak vyrobit Web Slice?

Když se podíváte do zdrojového kódu titulní stránky conBLOGu, uvidíte, že nejnovější (první) spot na stránce má mírně rozšířený kód:

1. Spot je obalen do značky div s třídou hslice a id="cb".
2. Nadpis spotu má přidělenou třídu entry-title.
3. Obsah spotu má třídu entry-content.

Na podrobný popis Web Slice se můžete podívat třeba na stránku Web Slice Format Specification - Version 0.9.

Web Slice a Firefox

Web Slice je poměrně jednoduchá specifikace. Proto by neměl být problém ji zavést do dalších webových prohlížečů nebo aplikací. Ve Firefoxu můžete vyzkoušet rozšíření WebChunks (právě teď ve verzi 0.20).

Já jsem WebChunks nainstaloval do svého Firefoxu. Když najedu myší na Web Slice na stránce, oblast se spořádaně orámuje a ukáže se ikona. Když na ikonu klepnu myší, zobrazí se dialog pro "předplacení" zdroje. Zdroj se zobrazí v liště WebChunks toolbar. Až potud je vše OK. Když ale otevřu na liště příslušný zdroj, zobrazí se symbol pro načítání a pak se mi zobrazí jenom prázdné okénko v případě conBLOGu rozsypaná čeština. Zkoušel jsem taky Web Slice ze Živě.cz, ale výsledkem je stejný prázdné okénko rozšíření. Uvidím, jak se pochlapí další verze WebChunks.

Prázdné Pomatené okénko WebChunks

Protože nemám nainstalovaný IE8 tak nevím, jestli se můj Web Slice chová tak, jak by měl. Jestli máte možnost ověřit funkčnost Web Slice na conBLOGu, dejte mi vědět do komentářů.

trvalý odkaz | komentáře (10)

V posledních dvou "nelinkových" spotech jsem Vás žádal o pomoc jiným. Proto ani potřetí nemůžu udělat výjimku. Honza Korbel pod spotem o průzkumu A List Apart požádal o vyplnění podobné tuzemské ankety Průzkum webového trhu v České republice 2008. Jestli máte pár minut času, vyplňte 22 jednoduchých otázek a přidejte pár luxů autorům, kteří si chtějí posvítit na základní parametry webového průmyslu v České republice.

A když už budete v laufu, pomozte dobré věci (trdla ať na na předchozí odkaz radši neklikají).

trvalý odkaz | komentář (1)

Známý web A List Apart vyhlašuje velký průzkum pro tvůrce webů. Přidejte se také.

Loni se k průzkumu připojilo téměř 33 tisíc respondentů. Pokud jenom trochu umíte anglicky, tak pomozte překonat toto úctyhodné číslo a odpovězte na 44 otázek.

trvalý odkaz | komentáře (2)

Jistě znáte z různých registračních formulářů na webu zdvojené pole pro zadání e-mailu, hesla nebo jiných důležitých údajů. Toto potvrzování má jeden háček - kopírování přes schránku. Pokud špatně zapíšete daný údaj, tak okopírováním špatné zadání potvrdíte a registrace může přijít vniveč. Do nového účtu se špatně zadaným heslem nedostanete (to je ta lepší varianta). Horší je, když potvrzovací e-mail s citlivými údaji odejde do cizí poštovní schránky. Zvlášť nemilé to je, když používáte univerzální heslo.

Možností, jak zabránit přenesení nesprávných údajů, je zakázat použití klávesové zkratky pro vkládání dat ze schránky. Takto to mají vyřešeno třeba na webu Box.net (via Martin Malý - Dropbox - online úložiště). Samozřejmě to přináší některé nepříjemnosti. Nemohl jsem například použít klávesovou zkratku pro zadání zavináče na české klávesnici. I přes to je dobré se zamyslet, jestli ve webových nebo desktopových aplikacích nebránit ve vkládání některých údajů do vybraných polí ze schránky.

trvalý odkaz | komentáře (10)

Navrcholu.cz změnilo vzhled. Při úpravě stránek byl kladen důraz především na lepší přehlednost webu, snadnou orientaci mezi velkým množstvím informací, které máte k dispozici, a v neposlední řadě také na komplexní uživatelsky přátelské prostředí. Tohle říká včerejší PR zpráva.

Já musím napsat, že nechybí barevné gradienty, usměvavá slečna v nabobtnalé hlavičce titulky, patička vycpaná reklamou, dvě vyhledávací pole a nestandardní tlačítka (jedno přitom pozornosti přemalovávače uniklo). Co mi ale opravdu vadí, tak to je až příliš široký layout. Tedy vadilo by mi to, kdybych Navrcholu navštěvoval. A to už nějakou dobu nedělám.

Abych jenom nehaněl. Docela osvěžující jsou velká písmena v URI. Toto jsem na webu vyrobeném za peníze už dlouho neviděl. Konec sarkasmu. Když se to udělá pořádně, tak to přece vůbec nevadí.

trvalý odkaz | komentáře (6)

Wilson Miner v článku Accessible Data Visualization with Web Standards prakticky ukazuje, jak vizualizovat data pomocí HTML a CSS (samozřejmě pěkně standardizovaně). Podívejte se na příklad vodorovného sloupcového grafu s popisem a hodnotami a příklad časové řady.

Autor vystačí se seznamy, trochou CSS, a jedním inline stylem. A ještě jsem zapomněl na třetí příklad.

trvalý odkaz | komentáře (5)

Krátké povídání o Microsoft Expression Web 2 Beta mělo být původně povídáním dlouhým. Budu ale stručný. Nerad bych totiž s popisem tohoto nástroje pro tvorbu webů skončil dřív, než bych začal. Ještě teď mi leží na disku rozepsaná několikadílná recenze předchozí verze MS Expression Web.

Microsoft na nás v těchto dnech vychrlil hned několik testovacích verzí svých produktů určených pro web (mimo zmiňovaný MSEW2 třeba ještě Internet Explorer 8 Beta 1 a Silverlight 2). Stahovat nový MSEW 2 Beta můžete na stránce Expression Web 2 Beta Download (195 MB). Před tím byste ale měli mít nainstalovaný MS .NET Framework 3.5 na MS Windows XP SP2 nebo Windows Vista (viz požadavky na systém).

Jedna důležitá věc na úvod. Expirace této plně funkční veze Microsoft Expression Web 2 Beta je nastavena na 1. 7. 2008.

Instalace

Instalace je docela hladká. Instalátor se neptá skoro na nic (ani kam se bude instalovat) a za pár minut je Expression Web 2 nainstalován. Už si nevzpomínám na instalaci předchozí verze MSEW, ale myslím, že Microsoft změnil dvě zásadní věci: vzhled tlačítek a ukazatelů průběhu a po ukončení nějaké akce rozpohyboval obrázek v levém horním rohu okna instalátoru:

Program se mi nainstaloval do složky, kde byl před tím instalován MSEW (1). Instalace zabrala nějakých 110 MB přímo v této složce (co jinde, nevím).

První spuštění MSEW 2

Po prvním spuštění jsou patrné dvě viditelné novinky oproti předchozí verzi aplikace Expression Web: temné uživatelské rozhraní (znáte třeba z Lightrooomu a TV reklamy) a nová ikona:

Rozhraní Expression Web a Expression Web 2

Hlavní položky menu jsou u obou verzí MSEW stejné. Uživatelské rozhraní první verze MS Expression Web mám hodně přestavené, takže další změny nemůžu posoudit.

V editoru kódu jsou podtrženy adresy odkazů a názvy tříd a id stylů. Pokud na odkaz klepnete levým tlačítkem myši za držení klávesy Ctrl, otevře se cílová stránka nebo CSS soubor s vyznačeným kódem.

V betaverzi jsem narazil na jednu nepříjemnost a to když jsem při otevírání stránek na jednom z mých webu v okně Desing neviděl text. Ten se ukázal až po klepnutí myši do oblasti s textem. Chyba se vyskytuje náhodně.

Z předchozí verze přetrvává chyba, kdy se na některých stránkách v panelu Design layout roztáhne za okraj po klepnutí myší na danou stránku (stává se to u jednoho webu s tabulkovým designem nastaveným na 100% šířku). Polovina stránky pak není vidět (FrontPage tímto neduhem netrpěl). Naštěstí jsem nenarazil na chybu první verze MSEW, kdy se pozicované prvky na stránce při psaní a přesunech kurzoru různě poskakovaly uvnitř nadřazeného prvku. Dost to rušilo. Z předchozí verze MSEW se také táhne divné řazení souborů v panelu Folder List - položky defaultně nejsou řazeny abecedně, ale některé naposledy otevřené soubory jsou na začátku seznamu. Já to řeším tak, že zavřu a otevřu kořenovou složku webu.

Další nepříjemností je, že Microsoft přistoupil k asociování typů souborů po svém. Prostě si uzurpoval přípony, které uznal za vhodné. Napadá mě pár způsobů, jak to pojmout lépe.

Novinky v Expression Web 2

Na závěr přidám některé z novinek Microsoft Expression Web 2 Beta:

• Podpora PHP (konečně).
• Silverlight 1.0.
• Zlepšená práce s Flash a Windows Media.
• Podpora souborů Photoshopu - import .psd souborů, výběr vrstev atp.
• ASP.NET AJAX.
• Vylepšení FTP.
• Vylepšení podpory CSS.
• Podpora IE7.

Komentáře na téma který editor je nejlepší a kdo je či není opravdový profík prosím nepište.

trvalý odkaz | komentáře (10)

Chystaný test Acid3 se především zaměřuje na schopnost webových prohlížečů poradit si s DOM2, ECMAScript, CSS2 a CSS3 (viz Acid3 browser test). V tomto článku je pár zmenšených screenshotů pořízených v moderních prohlížečích.

Test Acid3 je skoro dokončen. V několika moderních prohlížečích jsem se podíval na stránku Acid3 testu. Tady jsou zmenšené screenshoty výsledků testu Acid3:

Takto má vypadat správný výsledek

Microsoft Internet Explorer 6

Microsoft Internet Explorer 7

Mozilla Firefox 2.0.0.11

Opera 9.25

Safari 3.0.4 pro Windows

Výsledek testu Acid3 je vyjádřen číslem, které by v ideálním případě mělo být 100. Nižší hodnoty naznačují problém prohlížeče se s testem vypořádat:

• Microsoft Internet Explorer 6: 11 bodů
• Microsoft Internet Explorer 7: 12
• Mozilla Firefox 2.0.0.11: 50
• Opera 9.25: 46
• Safari 3.0.4 pro Windows: 39

Na závěr musím napsat, že stejně jako jiné podobné testy, je i Acid3 jen umělý test (navíc ještě nehotový). Jinak sestavený test by dal jiná čísla. Přesto výsledky leccos naznačují o schopnostech prohlížečů vypořádat se s částí testovaných specifikací.

trvalý odkaz | komentáře (15)

Ale tak horké to zase nebude. Přesto:

• Internet Explorer 8 and Acid2: A Milestone - IE Builder
• 8 + 2 = :-) - Dave Shea
• IE8 Passes Acid2 Test, Web Standards Project Dies of Shock - Kevin Yank
• IE8 passes Acid2 test - Bruce Lawson
• Internet Explorer 8 projde Acid 2 testem! Co na to Opera? - Vlastimil Waic

A co na to Jan Tleskač?

trvalý odkaz | komentáře (9)

Kolik HTML 4 elementů vyjmenujete během pěti minut?

trvalý odkaz | komentáře (35)

Netrap se těmi, kteří kradou tvé návrhy. Boj se dne, kdy přestanou.

Jeffrey Zeldman

trvalý odkaz | komentáře (8)

Dlouhou dobu se zaobírám myšlenkou napsat pár článků o firemních intranetech. Nebo spíš o tom našem intranetu a k tomu bych přihodil trochu Nielsena a spol. Nejsem si ale jistý, jestli téma firemních intranetů vůbec někoho zajímá. Jestli jsou vůbec intranety používané a tvořené. Jestli bych vás povídáním o neveřejných firemních webech neunudil k smrti.

Takže se ptám. Zajímalo by vás téma firemních intranetů? Máte ve firmě firemní intranet a naplňuje vaše očekávání? Prostě do komentářů napište vše, co vás při vyslovení pojmu firemní intranet napadne.

trvalý odkaz | komentáře (28)

Podpora webových standardů v e-mailových klientech není nijak slavná. Poslat někomu bohatě stylovaný HTML e-mail je hazard. Email Standards Project si proto klade za cíl zlepšit podporu webových standardů v současných a připravovaných e-mailových klientech.

Na stránce Email Standards Project si můžete prohlédnout, jak je vzorový HTML+CSS e-mail vykreslen ve 14 pošťácích. V seznamu testovaných poštovních klientů najdete např. Apple Mail, Mozilla Thunderbird, Gmail, Lotus Notes 8, MS Outlook 2007 a další. Přitom poslední tři dopadly velmi špatně.

U každého klienta najdete screenshot testovací zprávy a stupeň podpory jednotlivých CSS vlastností.

trvalý odkaz | komentáře (9)

Papír a tužka je při vývoji webu stále nástroj k nezaplacení. Jak by mohl a měl takový vývoj za pomoci papírového prototypu a interaktivního designu vypadat, je dobře vidět na videu Ciao PDA application / interaction design (via Example of a paper prototype envisionment). Mnohé způsoby řešení vymyšlené od zeleného stolu totiž v praxi fatálně selhávají.

trvalý odkaz | komentáře (2)

Jsou chvíle, kdy člověk přestane věřit, že co zná a dělá, je správné. Když narazíte na hlupáka, který dělá jeden kopanec za druhým, tak si to ještě nějak vysvětlíte. Ale když se do podobné situace dostanete i s lidmi rozumnými a téměř nechybujícími, zakolísáte. Pár příkladů z posledních dvou dnů.

Struktura, výstižné nadpisy a odrážky

Než začnu tvořit web nebo jakoukoli skupinu dokumentů, tak se zamyslím nad strukturou celku. Jednotlivé dokumenty nebo kapitoly na stránce se snažím rozdělit podle nějakého jednotného pravidla. Stejně tak se snažím tvořit krátké a výstižné nadpisy. Pokud je to vhodně, tak používám seznamy.

A pak v dokumentu bez jednotné struktury narazím na nadpisy pomalu delší než text pod nimi. V pracovním postupu jsou tři věty za sebou. Sjednocením struktury, zkrácením nadpisů a textů a převodem pracovního postupu do odrážek v rozkazovacím způsobu docílím toho, že je dokument podle zákazníka horší než byl. Snažím se argumentovat, ale asi špatně.

Nenuťte uživatele přemýšlet?

Zítra mě čeká jednání s klientem, který chce mít jiné a lepší stránky, ale pořád dělá vše pro to, aby byly přesně takové, jako ty jsou ty původní. Duplicitní obsah je jen začátek. Pak tu máme odlišné texty sousedících odkazů směřujících na stejnou stránku. Dvoj i trojnásobně delší texty odkazů v navigaci oproti navrženým. Opakující se popisy různých pojmů v definičním seznamu atd.

Po několikáté budu vysvětlovat vysvětlené. Nechám si schválit dříve schválené. Pomyslím na to, že mi někdo v komentářích poradí takového klienta zapudit.

Chybí disciplína?

Probíral jsem se starší poštou jednoho zákazníka. Firma má platný vzor automatického podpisu. Podpis začíná oddělovačem (dva znaky mínus a mezera), na dalším řádku je titul jméno a příjmení následované pomlčkou a jménem funkce a názvem firmy atd. Podpis pokračuje dalšími přesně definovanými položkami. V manuálu je vše přesně popsáno a zdůvodněno.

Když jsem si procházel e-maily různých lidí z oné firmy, tak jsem nenarazil na dva podpisy, které by měly stejnou strukturu. Jen jeden člověk měl podpis přesně podle šablony. Přitom v elektronické verzi manuálu je napsáno, že stačí okopírovat vzorový podpis a změnit potřebné údaje.

No a?

Depresivní počasí za oknem podle všeho stojí za tímto poraženeckým článkem. Za pár dní mě špatná nálada opustí a všechno se vrátí do starých kolejí. Dál budu prosazovat to, co jsem prosazoval doposud. Protože si myslím, že je to správný způsob uvažování. Protože výše uvedené příklady nejsou důvodem nedodržovat standardy a doporučení. Je to totiž důvod proč je používat.

Smířil jsem se s tím, že jen málokdy dojde člověk uznání (navíc, když je dobrá myšlenka špatně provedena). Vím, že lidé jsou různí. Dokonce je každý jiný. A nikdo není bez chyby. A pro mě to platí dvojnásob.

trvalý odkaz | komentáře (13)

Dan Cederholm vyhlásil spotem 404 Hunt hon na zajímavou stránku 404. V komentářích se už sešlo pár úlovků zábavných, dobře navržených a použitelných chybových stránek 404. Nechte se inspirovat. Třeba se vám některá stránka 404 bude hodit.

trvalý odkaz | komentáře (16)

TopStyle, špičkový (nejen) CSS editor, dospěl do verze 3.5. V článku TopStyle 3.5 Final Release o tom informoval jeho autor Nick Bradbury.

Upgrade je pro registrované uživatele TopStyle verze 3.x zdarma (jinak upgrade stojí téměř 25 $). Sám autor považuje TopStyle 3.5 za natolik významnou verzi, že by se klidně mohla označit verzí 4.0. Tady jsou hlavní novinky:

• Box Spy zobrazuje v náhledu při najetí myší okraje boxů.
• Live Preview umí zobrazit vzhled zadané URL podle právě editovaného stylu.
• Nahrazování v souborech.
• Definice vykreslování stylů pro další webové prohlížeče a Outlook 2007 atd.

Sám TopStyle ke své plné spokojenosti používám a verzi 3.5 mám nainstalovanou. Věřím, že se osvědčí stejně, jako verze předchozí.

trvalý odkaz | komentáře (6)

Na přelomu dubna a května 2007 prováděl magazín A List Apart velký průzkum mezi tvůrci webů. Předevčírem byly zveřejněny výsledky tohoto průzkumu, kterého se zúčastnilo 32 831 respondentů. V článku Findings From the Web Design Survey najdete odkaz na stažení PDF s výsledky. Ve stručnosti uvedu co mě zaujalo.

Věk respondentů se nejčastěji pohyboval mezi 25-32 lety (44 %). Téměř 80 % mělo věk 21-38 let. Mužů odpovědělo 83 % a bělochů je mezi tvůrci webů 85 %. Většina tvůrců webu má vysokoškolské vzdělání (80 %) a působí v USA (48 %) nebo v EU (31 %). Za 30-50 hodin práce týdně (65 %) získají 20-80 tisíc dolarů ročně (58 %) a skoro polovina se pyšní titulem Developer nebo Web Designer.

Svůj vlastní blog provozuje více než 70 % respondentů. Přitom výše platu neovlivňuje chuť blogovat. Téměř 80 % se zajímá o dění v oboru (95 % čtením webů, blogů a časopisů, 78 % metodou pokus/omyl a 76 % čte odborné knihy).

Takže si to shrňme. Průměrný tvůrce webu je bílý dobře placený blogující třicátník vysokoškolák z USA nebo Evropy. Aspoň to tedy tvrdí Findings From the Web Design Survey.

trvalý odkaz | komentáře (5)

Od Marka Boultona (CSS Eleven) jsem se dověděl o založení mezinárodní skupiny CSS Eleven. Skupina si klade za cíl pomoci W3C CSS pracovní skupině k lepšímu dodání nástrojů potřebných pro web zítřka. Ve skupině jsou známí webdesignéři a vývojáři (např. Mark Boulton, Dan Cederholm, Andy Clarke, Jeff Croft a další).

Výstupem skupiny CSS Eleven mohou být např.:

• Nové impulzy autorům webových standardů. Skupina uznávaných odborníků může přinést svůj seznam priorit dalšího vývoje.
• Revize případně přeformulování stávajících norem (doporučení).
• Srozumitelné příklady využívající stávající a nové normy.
• Nové návrhy layoutů využívající možnosti stávajících i připravovaných norem.
• Zvýšení tlaku na tvůrce webových prohlížečů směrem ke zlepšení podpory standardů.

No uvidíme. Práce to nebude jednoduchá.

Souvislosti

• Blue Flavor and the CSS Eleven - Jeff Croft
• The CSS Eleven: Style or substance? - Peter Gasston
• CSS Eleven - Andy Clarke

trvalý odkaz | komentáře (6)

Lightbox 2 je určen k efektnímu zobrazování obrázků. Lightbox pracuje tak, že po klepnutí na náhledový obrázek se obrázek otevře ve větším rozlišení (viz příklady). Funkce Lightboxu závisí na JavaScriptu. V tomto článku najdete návod, jak uvést Lightbox 2 na webové stránce do provozu. Článek je určen začátečníkům bez znalosti angličtiny a čerpá z mé zkušenosti s instalací Lightboxu a podrobného návodu na stránkách autora. Smyslem článku není rozpoutat diskusi o smysluplnosti používání, přístupnosti nebo použitelnosti Lightboxu. Také je mi jasné, že o Lightboxu psali jiní, jinde, dříve a lépe.

Autor Ligtboxu Lokesh Dhakar nabízí zdarma ke stažení zazipovaný Lightbox 2 (ten stáhněte na počítač a rozbalte na vhodné místo). V archivu je vše potřebné pro uvedení Lightboxu do chodu. Postup je následující:

1. Do hlavičky webové stránky (mezi tagy <head> </head>) vložte kód:

   <script type="text/javascript" src="js/prototype.js"></script>
   <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
   <script type="text/javascript" src="js/lightbox.js"></script>

2. Do hlavičky vložte odkaz na stylopis (kód ze souboru lightbox.css můžete přidat do vašeho stylopisu):

   <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

3. Do složky images nakopírujte obrázky ze stejnojmenné složky v zipu. Podobně musíte do stejnojmenných složek uložit skripty a css soubor.
4. Do kódu odkazu (nebo obrázku apod.) vložte atribut rel="lightbox". Např. <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Pokud kopírujete obrázky nebo další soubory z instalace Lightboxu, dejte si pozor, abyste nepřepsali existující soubory. Obecné pojmenování některých souborů je jedna z nevýhod Lightboxu. Jména souborů a cestu k nim samozřejmě můžete změnit. Ale nesmíte to zapomenout udělat důsledně na všech správných místech.

Protože je Lightbox 2 psaný pro anglicky mluvící, doporučuji ve vhodném grafickém editoru počeštit obrázky obsahující anglické texty (closelabel.gif případně také nextlabel.gif a prevlabel.gif).

A jedna rada na závěr. Pokud nemusíte, tak Lightbox radši nepoužívejte.

trvalý odkaz | komentáře (56)

Jaká je podpora CSS v současných e-mailových klientech? Na tuto otázku dostanete odpověď po přečtení článku A Guide to CSS Support in Email: 2007 Edition. David Greiner se zaměřil na čtyři webové e-mailové aplikace, pět e-mailových klientů pro MS Windows a čtyři klienty pro Mac OS.

Zastávám názor, že e-mail by měl mít prostou textovou podobu. Takto byl koncipován a takto je nejlépe přenositelný i zobrazitelný. Realita je ale trochu jiná. Většina e-mailových klientů podporuje HTML formát e-mailových zpráv. Spousta uživatelů vyžaduje HTML e-maily bez ohledu na zřejmá rizika. Ale e-mailoví klienti kombinaci HTML a CSS nezvládají.

Hodně špatně jsou na tom s podporou CSS on-line e-mailoví klienti. Kraluje stará verze mailu od Yahoo!. Desktopové aplikace pro práci s e-maily na tom překvapivě nejsou lépe. Snad s výjimkou perfektního Thunderbirdu a Mac Mailu. Úplně propadla Eudora a Lotus Notes.

A Guide to CSS Support in Email: 2007 Edition je dobrým zdrojem pro všechny, kteří se vydají na tenký led tvorby šablon HTML e-mailů. Přehledné tabulky se seznamem podpory CSS selektorů a vlastností stojí za pozornost.

trvalý odkaz | komentáře (8)

Dříve nebo později to muselo přijít. Tenisový loket se mi zatím vyhýbá (ač jsem hrál tenis a celé dny prosedím u počítače), oči mi ještě slouží (ač jsem mnoho let proseděl a proležel nad knihami a celé dny prosedím u počítače) a záda bolí jen občas (ač jsem hrál tenis, studoval a celé dny proseděl u počítače). Neminul mě ale zánět šlach na mé lepší, byť levé, ruce. Stačilo pár hodin s nožem v ruce nad hromadou polystyrénových desek a další dny ze mě byl jednoruký invalida.

Je třeba se dobře namazat

Za ty dva týdny jsem zažil drobná příkoří i vítězství (žena mi navléká ponožky, tchýně mi zavazuje boty), ale hlavně bolestně bezbolestné odloučení od počítače. Bolestně proto, že ruka bolela. Bezbolestné proto, že mi počítač skoro vůbec nechyběl (protože se chci vyhnout klišé, ukončím odstavec a poslední myšlenku nechám ležet).

Počítače jen pro vyvolené

Ale abych se dostal k věci. Na vlastní kůži jsem mohl zažít pocity osoby zdravotně znevýhodněné (tak se prý teď správně a korektně říká invalidům), které používá počítač a navštěvuje webové stránky. A věru to není žádná sláva. V mém jednorukém případě jsem zjistil, že není ani tak problém s brouzdáním po webu, jako s ovládání počítače jako takového. Coby pokročilý uživatel využívám různé dvoj- a trojhmaty, které s jednou rukou prostě nevykouzlím. Pokud nemám do série zapojenou druhou klávesnici, po které šmejdím nohama (jako že nešmejdím páč ji nemám).

Abych to tedy shrnul. Po celé dva jednoruké týdny jsem nenarazil na jediný zásadní problém při používání webových stránek, ale narazil jsem na problémy s ovládáním počítače a webového prohlížeče. Pokud máte jen jednu funkční ruku, ve které držíte myš, tak zapomeňte na otvírání stránek do nových oken (pokud nemáte třeba Maxthon, který umí drag and drop odkazu) a jiné kejkle. U webových stránek jsem se svou nešikovnou pravačkou měl problém snad jen se strefováním se do odkazů na webech, které mají malé písmo a malé řádkování a na pohyb v rozbalovacích menu.

Ovládání hlasem

Po několika dnech e-celibátu se mi do mysli vloudila myšlenka, jak by to bylo krásné, kdyby měly dnešní počítače ovládání hlasem. Znáte takové to startrekovské počítači… Hned jsem ale ten nesmysl zapudil. Dnešní vývojáři nejsou schopni navrhnout ergonomické ovládání pomocí myši a klávesnice. Natož, aby zvládli ovládání hlasem. Uživatelé nejsou často schopni klikat natož aby dali dohromady smysluplnou větu.

Schválně si někdy vyzkoušejte hlasem navádět kolegu nebo příbuzného. A než začněte, tak si strčte ruce hluboko do kapes těch nejtěsnějších kalhot. Vím o čem mluvím, často naviguji uživatele po telefonu, radím na školeních atp. Ten, kdo mluví, se vyjadřuje nepřesně. Ten, kdo poslouchá, si vyslechnuté přeloží a zábava začíná.

A ještě jeden argument proti hlasovému ovládání. Nechtěl bych pracovat v kanceláři, ve které osazenstvo huláká do mikrofonu zmatené pokyny.

Co jsem napsal o hlasovém ovládání neznamená, že bych se nechtěl dožít doby, kdy to bude báječně fungovat. Doby, kdy tiše požádám svůj počítač o wordovský soubor ze včerejška. Vlastně ne ze včerejška, ale z předvčerejška. Ne o tento, ale ten druhý. Vlastně ani o ten ne. Pro jistotu mi ukaž všechny wordovské dokumenty za poslední týden. Jejda, on to není doc, ale xls. Že jsem žádnou tabulku neotvíral? To přece není možné! Co to plácáš!!!

trvalý odkaz | komentáře (17)

Čas od času se na mě obrátí autor webu, abych mu ohodnotil jeho dílo. Pokud má e-mail hlavu a patu (diskuzí se neúčastním), týká se nekomerčního webu a mám zrovna čas, tak se snažím pomoci. Přiznám se, že to nedělám rád, ale ješitnost a falešný pocit, že dělám něco užitečného, obvykle převáží.

Zásadně přímo nekomentuji vzhled webu. Jednak je to subjektivní záležitost a pak jsou amatérské weby zhusta dílem autora, který není grafik a jeho web se mu líbí. Snažím se zaměřit na přístupnost a použitelnost daného webu. Upozorním jen na ty základní chyby. Chci, aby má odpověď nevyzněla jako kritika, ale souhrn doporučení se stručným vysvětlením, proč je lepší to udělat tak, jak navrhuji. Vycházím z toho, že když se někdo odhodlá napsat e-mail a požádá o kritiku, tak ji snese (i když není psaná v kritickém duchu). Samozřejmě, že se přesvědčím o tom, že žiji v bludu.

Následují dvě reakce. Poděkování nebo rázné odmítnutí. Odporovač snese důvody, proč to má zrovna tak, jak to má a ne tak, jak to navrhuji. Tak proč se ptá? Jakoby mi to nebylo jedno.

trvalý odkaz | komentáře (10)

David Špinar informoval, že byla zveřejněna nová verze českých pravidel přístupnosti. Jedná se o revizi platných pravidel přístupnosti, která by měla vstoupit v platnost příští rok.

Pokud je Davidův výčet úplný, tak oproti platné verzi přibylo 7 pravidel, ubylo 12 pravidel a 11 pravidel bylo upraveno. Změny by měly odrážet skutečné potřeby handicapovaných uživatelů, zmírnit velkou přísnost stávajících pravidel, upřesnit je a také nová pravidla přiblížit metodice WCAG2.0.

Vždycky, když podobná pravidla čtu, tak ocením, když jsou pravidla stručná pokud možno bez cizích slov, když obsahují lidský výklad a příklady. Když čtu pravidla tvorby přístupného webu, tak zažívám podobné pocity, jaké jsem měl při své účasti v soutěži AZ kvíz. Pokud tuto televizní soutěž neznáte, tak vězte, že část otázek je postavena na popisu prostých věcí přesnou definicí. Třeba jako toto pravidlo:

Informace sdělované vizuální podobou webových stránek, tvary jednotlivých prvků, jejich velikostí, pořadím nebo umístěním jsou dostupné i v případě, že uživatel nemůže tyto aspekty vnímat.

Já si to přebral tak, že co je vidět, musí jít taky přečíst. Nekritizuji autory pravidel za dokonalé definice. Jenom bych požádal o větší čtivost. Toto je ale problém většiny úředních spisků. A kritizovat nová pravidla přístupnosti právě v tomto ohledu asi není dobré, protože patří k tomu lepšímu co stát vydává.

Spíš bych se přimlouval za hlubší výklad pravidel s příklady, jak prakticky dané pravidlo naplnit (třeba i za pomoci odkazů na jiné weby).

Jestli spolupráce tří řešitelů byla úspěšná ukáže až čas. Osobně věřím v prospěšnost podobného snažení. Na každý pád je třeba, aby měl o základních pravidlech přístupnosti ponětí každý tvůrce webu.

trvalý odkaz | komentáře (3)

Apple zveřejnil beta verzi chystaného webového prohlížeče Safari 3 také pro uživatele Windows XP a Windows Vista. Pro mě osobně je to jedna z největších událostí letošního roku na poli webdesignu. Volám hurá.

Chci zdůraznit, že tento spot vznikl na základě necelé hodiny přerušovaného testování.

Download prohlížeče Safari

Ke stažení je beta verze pro Windows XP a Vista (vč. varianty s QuickTime) a Mac OS X v10.4.9 a vyšší. Já stáhnul verzi pro Windows bez QuickTimu, která má velikost necelých 8 MB.

Instalace

Po stažení jsem nelenil a na svých českých Vistách jsem spustil SafariSetup.exe:

Úvodní obrazovka průvodce instalací Safari 3

V průvodci instalačního programu jsem zakázal službu Bonjour (zjišťuje sdílená zařízení v lokální síti) i Apple Software Update. Instalace proběhla hladce a na Ploše a v nabídce Programy přibyla ikona Safari:

Ikona Safari 3 na Ploše Windows Vista

Instalace Safari 3 je hladká a bezproblémová.

První spuštění

První spuštění proběhlo hladce:

Safari 3 po prvním spuštění

Po prvním startu Safari otevřelo stránku na webu Apple. Přiznám, že pro mě bylo trochu nezvyklé, že jsem nemohl měnit velikost okna prohlížeče tažením myši za libovolný okraj okna. Pro změnu velikosti okna Safari je použitelný jen pravý dolní roh. A pokud je vypnutý stavový řádek (výchozí stav), tak se na něm navíc ani nezmění tvar kurzoru myši.

Podle zvyku jsem okamžitě zabrousil do nastavení aplikace. Trochu nezvyklé bylo, že dialog pro nastavení nemá žádná tlačítka.

Začal jsem brousit po různých webech. Na svém conVERTERu jsem se lehce zděsil, protože texty některých odkazů a zvýrazněné texty zmizely. Začal jsem horečně pátrat i na jiných webech a trochu jsem se uklidnil. Stejnou chybu jsem našel i na jiných webech, třeba na Seznamu:

Chybějící texty odkazů na Seznam.cz

Protože chci Safari používat jako další testovací prohlížeč doufám, že vývojáři tuto chybu opraví.

Padavka

Pak jsem zabrousil na Google. Tady se velmi rychle projevilo to, o čem jsem četl v diskuzi na Živě u článku Třetí verze prohlížeče Safari bude dostupná i pro Windows. Velká nestabilita betaverze Safari 3. Stačilo zadat pár znaků do vyhledávacího pole na Google a Safari šlo do kytek. Nepomohl nový start Safari ani restart počítače. Na to, že testuji beta verzi, je to špatná vizitka pro vývojáře.

Na každý pád jsem nadšený, že Apple poskytne webový prohlížeč Safari 3 také uživatelům Windows. Je to velmi dobrá zpráva hlavně pro vývojáře webových stránek. A možná si Safari najde cestu i k běžným uživatelům.

Souvislosti

• Apple Safari nyní na Windows - Petr Stříbný
• Safari pre Windows - Robert Madaj
• Safari na Windows - diskuze na Jak psát web
• Safari 3 Public Beta for Mac and Windows - Kimberly Blessing

trvalý odkaz | komentáře (20)

Když už si na něco uživatelé na něco zvyknou, tak se jen velmi těžce smíří s novým, byť lepším, řešením.

Dnes ráno jsem se ocitl v křížové palbě dvou kolegů, kteří dva dny používali novou sestavu, kterou jsem (bohužel) nad rámec jejich požadavků upravil. A že jsem se snažil. Veškerý svůj typografický a informačně architektonický um jsem napřímil směrem k lepší sestavě. Velikost fontů jsem sjednotil, co patřilo k sobě jsem k sobě dal, vzhled jsem odlehčil odstraněním nadbytečných prvků, texty zarovnal do sloupců atd. Musel jsem sám sebe po ramenou poplácat, ba i uznale nad svým dílem hlavou pokývat. Tahle samolibost mi ale vydržela jen do chvíle, než mi na stole přistála zmíněná sestava opatřená několika korektorskými poznámkami.

Obul jsem tedy vycházkovou obuv a vyrazil na dílnu. Dál se nebudu ani moc rozepisovat. Lidé si zvykli, že osobní číslo je vpravo nahoře a související jméno je vlevo dole a další údaj uprostřed. Proti síle zvyku byl každý argument velmi chabý. Poslední zoufalý přípodotek, že si rychle zvyknou na novou sestavu a ještě budou rádi, se taky nesetkal se všeobecným pochopením. Srazil jsem paty, vyběhl zpátky do kutlochu a sestavy jsem zase odroloval zpět.

A jaké z toho plyne poučení? Ptejte se uživatelů. Testujte každou změnu. A úplně nejlepší bude, když vše navrhnete tak dobře, aby se do toho už vůbec nemuselo vrtat.

trvalý odkaz | komentáře (20)

Je to už měsíc, co magazín Interval.cz vyhlásil čtvrtý ročník soutěže pro webdesignéry z České a Slovenské republiky - Interzen 2007. A já o tom ani nenapsal. Ale proč bych nepomohl dobré věci. Pokud splníte podmínky pro účastníky soutěže Interzen 2007, tak neváhejte a přihlašte se na Interzen. Máte ještě čas do 5. května 2007.

trvalý odkaz | komentáře (2)

Server A List Apart pořádá průzkum mezi lidmi, kteří se motají kolem tvorby webu. Pokud umíte aspoň trochu anglicky, máte deset minut času nebo chcete vyhrát 30GB video iPod, triko apod., tak si spusťte dotazník The Web Design Survey, 2007.

trvalý odkaz | komentáře (3)

Jedna z pouček týkající se tvorby webu říká, že by měl web poskytovat rychle dostupné kontaktní údaje. Mezi ně samozřejmě patří také e-mailová adresa. Na některých webech ale e-mailovou adresu nenajdete, ani kdybyste se rozkrájeli.

Minulý týden jsem připravoval data pro migraci do CRM systému. Data byla místy děravá jak noty na buben a tak mi nezbylo nic jiného, než chybějící informace hledat na firemních webech (jednalo se především o odběratele a dodavatele společnosti zpracovávající plasty).

Postup byl jednoduchý. Spustil jsem domovskou stránku dané firmy. Očima jsem oskenoval titulní stránku a hledal e-mail. Pak jsem použil vyhledávání v použitém webovém prohlížeči. Tady je na místě dobré připomenout, že na titulní stránce webu nemusí nutně být adresa firmy (vč. e-mailu) uvedena. V každém případě ale nesmí chybět viditelný odkaz na stránku s kontakty.

Když jsem na titulce s hledáním e-mailu neuspěl, začal jsem brouzdat po daném firemním webu. Postupoval jsem (snad) jako běžný uživatel a proklikával odkazy, které mohly skrývat stránku s kontaktními informacemi. Nehledal jsem déle, než mě to přestalo bavit (to je asi 2-5 minut).

Celkem jsem prošel jsem 34 firemních webů. A tady je výsledek:

Kde byl nalezen kontaktní e-mail

Ke cti autorům mnou prohledávaných webů slouží, že sedm webů z deseti má kontaktní e-mail (24 % přímo na titulní stránce a 47 % dohledatelných na zbytku webu). Pořád ale zůstává téměř třetina webů (29 %), která nepovažuje za nutné uvádět e-mailový kontakt. Část z nich sice nabízí kontaktní formulář, ale ne každý jej chce využít.

trvalý odkaz | komentáře (13)

Vždycky jsem si říkal, jestli je to náhoda, když konkurenční televize dávají ve stejný čas stejný žánr filmu (někdy i se stejným hercem v hlavní roli). Asi se ti kucíí nějak domlouvají, nebo co.

Podobné myšlenky mi vytanuly na mysli, když čtu zprávy o redesignech Aktuálně.cz, iDnes a iHned. Že by náhoda, dlouho připravovaná akce nebo prostě jenom průmyslová špionáž? Co myslíte?

trvalý odkaz | komentáře (16)

Vilém Málek v článku na Intervalu informuje o tom, že W3C zakládá nové pracovní skupiny. A že je nejvyšší čas.

HTML Working Group by měla rozhýbat zatuchlost, která ve vývoji značkovacích jazyků pro tvorbu webových stránek panuje už dlouhou řádku let (HTML 4 je deset let staré). Přece jenom se za dobu od konce devadesátých let vývoj webu o něco posunul. Je nanejvýš vhodné, aby zainteresovaní přiložili ruku k dílu a posunuli kupředu letité HTML.

Na druhou stranu je možné říct, že nová verze není potřeba. Že si vystačíme se čtverkovou verzí HTML nebo s XHTML 1.x. Možná ano. Ale takové HTML 5 může inspirovat.

Kdy bude nové HTML

První drafty nového HTML by mohly být zveřejněny v polovině tohoto roku. Konečná verze je plánována na rok 2010. Uvidíme, jestli se to podaří. Na každý pád bude ze všeho nejdůležitější, jestli budou nové HTML podporovat webové prohlížeče.

Souvislosti

• HTML Working Group
• XHTML 2 Working Group
• Forms Working Group
• Akta X: HTML 5 jako alternativa ke XHTML - Petr Cimprich
• HTML - vracíme se ke kořenům - Martin Hassman
• Have Your Say about the Future of HTML - Molly E. Holzschlag

trvalý odkaz | komentáře (11)

K nadpisu musím doplnit, že jsem pyšný nakrknutý nosorožec. Abych to vysvětlil. Dnes vyšel na Lupě článek Soumrak nad moderním X od Chamurappiho. Udělalo mi radost, že jsem byl citován i odkázán v kapitole, která začíná tímto odstavcem:

Při každém veřejném sporu o XHTML se ozve nemálo "nakrknutých" nosorožců. Plamenné debaty by nejraději rychle zadupali, aby negativní pohled na XHTML náhodou nenakazil budoucí generaci webmasterů. Nosorožce nezajímá jádro pudla, v jejich očích jsou pudlové podřadná zvířátka. K panice jim bohatě stačí představa, že si nahlas vyjádřený nesouhlas přečte nebohý začátečník a na XHTML se "vybodne". Zvláštní jev.

Je docela možné, že se díky tomu dostanu ve vyhledávačích na čelní místa na výraz nosorožec a na sousloví nakrknutý nosorožec nepoznám vážnou konkurenci.

trvalý odkaz | komentáře (46)

Doporučení CSS3 je ve vývoji poměrně drahnou dobu. Stávající prohlížeče podporují CSS3 velmi málo (pokud vůbec). Co se chystá v souvislosti s CSS3 v prohlížeči Opera se dozvíte v článku Upcoming CSS3 support in Opera.

Další informace o CSS3 pak můžete najít třeba na Intervalu v seriálu CSS3 - kaskádové styly třetí generace.

trvalý odkaz | komentáře (18)

Jedním z cílů autora webových stránek by měl být co nejmenší datový objem výsledného díla. Že se to ne vždy daří je zřejmé. Někteří grafici (ani se mi je tak nechce nazývat) se často neobtěžují použít správný souborový formát, nastavit vhodné rozlišení nebo upravit barevnou paletu snížením počtu barev.

O tom, že se často musí brát ohled na detaily, je článek FavIcon.ico can be a bandwidth hog. Scott Hanselman probe(a)ndil pár giga jenom kvůli zbytnělé ikoně webu.

trvalý odkaz | komentáře (18)

Už dlouho jsem nereagoval na spoty na jiných blozích. Ale když sis o to SuE řekla, tak doplním jeden odkaz k pár odkazům na webové čtení pro deštivé dny.

Nick Bradbury, autor špičkového (nejen) CSS editoru TopStyle, pro něj přidal definici stylů pro Outlook 2007. Pomocí něj můžete validovat kaskádové styly pro novou verzi Outlooku, která nepodporuje CSS zrovna moc dobře (jemně řečeno). Podrobné informace najdete v článku Outlook 2007 CSS Definition for TopStyle (BETA).

trvalý odkaz | komentáře (3)

Pro dnešek zase jeden konzultační spot. Tentokrát na téma pořadí položek v kontaktních informacích. Konkrétně se mi jedná o položky z nadpisu. Pořadí jméno firmy, ulice a č. p. a PSČ a obec, je více méně jasné. Jak ale naložit s dalšími komunikačními kanály?

Kde můžu, tam volím následující pořadí, které považuji za ustálené:

1. telefon,
2. fax,
3. e-mail.

Zrovna nedávno jeden klient začal vyžadovat pořadí odlišné. Zatím se ho snažím přesvědčit o mé pravdě, ale rád si nechám poradit nejen od něj, ale i od Vás. Zatím jediný důvod, který mě napadá, je výrazné upřednostnění jednoho typu komunikace. V tom případě bych ale spíš uvedl jediný upřednostňovaný komunikační kanál a ostatní bych dal na samostatnou stránku. Co Vy na to?

trvalý odkaz | komentáře (16)

Nick Bradbury, autor skvělých programů HomeSite, TopStyle nebo třeba FeedDemon, na svém blogu od neděle zveřejňuje seriál Simplicity Ain't So Simple. Články jsou věnovány programování desktopových aplikací, ale jdou zobecnit i na tvorbu webových stránek. Zatím vyšly tyto díly:

Decide What to Hide

80 % uživatelů používá pouze 20 % funkcí aplikace. Problém je, že těch 20 % není pokaždé stejných. Přesto je žádoucí, aby uživatelské rozhraní nebylo přeplácané nabídkou všech funkcí.

Stop Showing Off

Není potřeba se chlubit složitým rozhraním jenom proto, že je daný problém složité vyřešit.

Don't Add Features You Can't Support

Nabídněte jen ty funkce, ke kterým můžete (chcete) poskytovat podporu.

The Blessed Curse of Power Users

Pokročilí uživatelé jsou poklad, pokud jejich náměty umíte správně zužitkovat.

Combine Features

Někdy můžete několik jednoúčelových prvků spojit do jediného. Třeba takové pole pro zadání adresy a pole pro vyhledávání.

Simple = Secure

Bezpečnost je základ. Neměla by to být funkce navíc, která se potom dodělá.

trvalý odkaz | komentář (1)

Vybrat ty správné názvy pro položky hlavní navigace bývá docela složité. Pravidel, kterých je dobré se držet, je víc a nikdy neplatí všechna beze zbytku. Pěkným příkladem může být odkaz O nás.

Jedno z pravidel, jak psát pro web je, aby byl text srozumitelný pro cílovou skupinu. U navigace to pak platí dvojnásob, protože text odkazu musí být obvykle krátký (místa v navigaci není nikdy dost). Když tvořím webové stránky, tak se snažím, aby byl text co nejvíc český. Proto se vyhýbám cizím slovům nebo módním novočeským výrazům. A taky zkracuji.

Při tvorbě firemních stránek je jednou z položek odkaz na sekci s informacemi o oné společnosti. Jsou tam ukryty kontaktní informace, kde společnost najít, tiskové zprávy atp. (mimochodem moc nemusím weby, které mají většinu položek menu věnovaných firmě a menšinu tvoří odkazy na informace určené mmě jako zákazníkovi). Po dlouhém bádání jsem začal pro zmíněnou sekci používat výraz O nás. Výraz je dostatečně český, krátký a snad i srozumitelný. A O nás používám tak často, že si začínám připadat jako ten Řek Onásis. Šak ho znáte, ne?

Včera mě dostal kolega, kterému jsem posílal návrh navigační struktury jednoho chystaného firemního webu. První, co mi vytkl, byla právě položka O nás. Prý ji nesnáší. Vždycky totiž hledá Kontakt. Protože jsem (občas) docela hloubavý, tak od včerejšího večera hloubám. Hloubám o tom, jestli jsem ve své úvaze někde neudělal chybu. Jestli je ono O nás to pravé ořechové. Co vy na to?

Souvislosti

• Hřídelová těsnění nebo gufera?
• Desatero psaní pro web - Gerry McGovern, překlad Marek Prokop
• Píšeme pro web - Marek Prokop

trvalý odkaz | komentáře (33)

Jednou z možností, jak pro web vybrat dobré barvy, je vzít typickou oborovou fotografii a vzít barvy z ní. Třeba pro zemědělský web to chce fotografii širých lánů s modrou oblohou. Fotka se upraví (vhodným způsobem se zmenší počet barev) a z obrazu se vydolují barvy. Barvy se pak přizpůsobí prostředí webu.

Narazil jsem na online nástroj Instant Color Schemes, který barvy z fotografií vydoluje za vás. Instant Color Schemes vyhledá na Yahoo Image Search podle zadaného výrazu pět fotografií a z každé získá šest hlavních barev. Uživatel tak dostane šest sloupců s pěti barvami. Pokud si nechcete lámat hlavu s barevností vašeho webu, neváhejte. Pozor ale, instantní řešení jsou občas dobrá, ale nebývají nejlepší.

trvalý odkaz | komentáře (18)

Google, Yahoo a Microsoft se dohodly na standardu pro sitemaps (viz sitemaps.org). Více v SEO konferenci: Unifikovaný standard pro sitemaps.

Souvislosti

Doplněno večer.

• sitemaps.org - tady jsou sitemaps doma
• Google Sitemaps - já na Intervalu
• Google Sitemaps mohou být užitečné - Dušan Janovský
• Google Sitemaps - conBLOG
• Nástroje pro Google Sitemaps - conBLOG
• Google Sitemaps Offline Generator - Peter Šlosar

trvalý odkaz | komentář

iCapture je webová služba, která zobrazí zadanou webovou stránku tak, jak ji vidí uživatel v prohlížeči Safari RSS (Apple). Služba iCapture už funguje docela dlouho a sám ji čas od času používám, ale ještě jsem o ní nic nenapsal.

Právě teď iCapture zobrazuje screenshoty ve formátu PNG pomocí OS X 10.4.4 a prohlížeče Safari verze 2.0.3. Stačí zadat adresu webové stránky a opsat kód z captcha. Aplikace iCapture po chvíli nabídne odkaz na PNG obrázek dané stránky.

Pokud nemáte přístup k Mac počítačům, tak může být iCapture nástroj přesně pro Vás.

Souvislosti

• Optimalizováno pro… - Jan Řezáč
• iCapture :: Váš web pod Mac OS X :: Safari - Radek Hulán
• Okem macintoshe - Petr Václavek

trvalý odkaz | komentáře (17)

Basecamp od 37signals je webová aplikace určená k podpoře týmové spolupráce. Pokud potřebujete řídit nějaký projekt, spolupracovat na jeho řešení a třeba si vyměňovat dokumenty, je Basecamp to pravé pro Vás. Najdete v něm třeba seznam úkolů, možnost sdílení dokumentů, sledování průběhu projektu atp. Basecamp je taková webová kancelář.

Pokud vím, tak je Basecamp hostovaná aplikace a pro více spravovaných projektů je potřeba zaplatit. Můžete využít i bezplatnou variantu, která je omezená na jediný projekt bez možnosti sdílení souborů. Podle všeho je Basecamp nutno hostovat (což nemusí být na závadu).

Teď se dostávám k tomu, na co se chci zeptat. Hledám volně dostupný webový software, který umí dělat podobné věci jako Basecamp a je možné jej provozovat na vlastním webu. Jestli takový software znáte, piště do komentářů (klidně přidejte své zkušenosti s tímto softem). Budu také rád, když napíšete také své zkušenosti s Basecamp.

trvalý odkaz | komentáře (22)

Nick Bradbury přidal do (nejen) CSS editoru TopStyle podporu pro Internet Explorer 7. Ve spotu Speaking of IE7 and TopStyle… najdete odkaz na soubor Internet Explorer 7.def, který je potřeba nakopírovat do složky \CSSDefs, která je ve složce s instalací TopStyle.

trvalý odkaz | komentáře (3)

Aaron Wall mi mluví z duše, když v článku How Hard is it to Write Clearly? radí, jak psát:

1. Nikdy nepoužívejte metafory, přirovnání a řečnické obrazy používané v tisku.
2. Nikdy neužívejte dlouhá slova tam, kde lze zvolit krátké slovo.
3. Když to jde, vynechejte slovo; vynechejte je.
4. Nikdy nepoužívejte trpný rod, když můžete použít rod činný.
5. Nikdy neužívejte cizí výrazy, vědecká slova, nebo hantýrku, když existují běžně užívané výrazy rodného jazyka.
6. Porušte jakékoliv z těchto pravidel dřív, než řeknete něco naprosto barbarského.

Stručně řečeno: vyjadřujte se srozumitelně.

trvalý odkaz | komentáře (27)

Diskuze o tom v čem kódujete webové stránky je nekonečná. Opravdoví borci™ kódují výhradně v komunitou schválených aplikacích. Amatéři používají FrontPage. Teda aspoň podle opravdových borců™.

Já jsem profesionál (protože jsem za tvorbu webů částečně placen) i amatér (protože tvorbu webů neovládám tak, jak bych chtěl). Používám Microsoft FrontPage (a taky Poznámkový blok, TopStyle a HomeSite). A nemyslím si, že se profík pozná podle nástroje. Spíš se pozná podle toho, jak se s tím nástrojem umí ohánět.

Na téma FrontPage bych si dovolil dát k dobru screenshot mého FrontPage:

Můj customizovaný FrontPage

Možná ten obrázek odpoví na otázku, jak s FrontPage (a podobnými nástroji) pracovat. A možná taky ne. Jak totiž napsal Plaváček ve výše zmíněné diskuzi: Hlavou kóduju, rukama zpracovávám. Ale tenhle soft je blbě k mání.

Souvislosti a reference

• Frontpejdžové souznění
• Balada o náhradě tří mezer
• PLASTIKA a.s.
• conBLOG
• Restaurace Cukrovar
• Seplast, s.r.o.

trvalý odkaz | komentáře (22)

Derek Powazek v článku Where Am I? nastoluje otázky, které napadají návštěvníky snad každé webové stránky:

• Kde jsem? (Současnost)
• Kam můžu jít? (Budoucnost)
• Kde jsem byl? (Minulost)

Na tyto tři otázky musí správně navržená navigace dát odpověď. Říkáte si, že je to samozřejmost? Já si myslím, že není. Stačí si otevřít nějakou libovolnou stránku (ne homepage). Derek dává návod, jak navrhnout dobrou navigaci:

1. Nikdy neodkazujte stránku samu na sebe.
2. Ukažte, kde se nacházíte.
3. Uvažujte, než odkážete.

Podrobnější vysvětlení včetně příkladu najdete v článku Where Am I?.

trvalý odkaz | komentáře (29)

Předevčírem byla vydána další betaverze prohlížeče Internet Explorer 7 beta 3 (via IE7 beta3, webdesign glossary a jeden článek). Nová verze IE7 přináší:

• několik drobnějších změn ve vzhledu prohlížeče Internet Explorer (upravené ikony oblíbených položek, stop, refresh apod.),
• byly přidány některé ovládací funkce (přetahování záložek myší, nové/upravené klávesové zkratky) a
• bylo odstraněno několik chyb v chování prohlížeče (netýká se vykreslování stránek).

Chcete-li, stahujte IE7b3.

Souvislosti

• Beta 3 UX Improvements - Max Stevens
• Keyboard Changes in Beta 3 - Kelly Ford
• Uninstalling IE7 Beta Releases - John Hrvatin

trvalý odkaz | komentáře (19)

Dost často vybírám nejrůznější hardware do firmy, kde pracuji. Navigace na některých webech mi ale příliš nepomáhá v mém konání. Typicky váhám, jestli požadovaný kus hardware patří do kategorie pro firmy nebo pro domácnosti.

Z vlastní zkušenosti vím, že se autor webu nezavděčí všem návštěvníkům. Vždycky je potřeba uspokojit co největší počet potenciálních zákazníků (nejen ve smyslu nakupování). Jednou z často používaných možností je navigace, která neklade důraz na technické znalosti návštěvníka, ale počítá s tím, že u prohlížeče sedí laik. Takovou navigaci můžete vidět třeba na stránkách Hewlett-Packard např. v sekci tiskáren. Je to ono známé dělení typu firma/domácnost, začátečník/pokročilý, amatér/profesionál apod.

Nikdy si nejsem jistý, jestli se mám zařadit do škatulky firma nebo domácnost a domácí kancelář. Obvykle kliknu na firmu (přece sedím ve firmě a možná jsem i známá firma), ale často nepochodím. Hardware, který hledám, totiž svými parametry patří domů. A tak se proklikávám historií zpět. Jindy na to jdu rafinovaně a klikám na opačnou volbu, než mi velí logika. Samozřejmě se zase spletu.

Proto mám rád, když je k dispozici dobře navržený a naprogramovaný konfigurátor, který na základě zadaných parametrů vybere vhodné výrobky. Pak už si umím vybrat sám.

Myslím si, že ne vždy je dělení produktů podle fyzického místa, kde bude výrobek stát (doma/ve firmě), jak zkušený je uživatel (začátečníci/pokročilí), nebo jestli se pomocí něj bude živit (amatér/profesionál) nejvhodnější. Často takové dělení mate. Nevystihuje totiž obvykle klíčové vlastnosti, podle kterých návštěvníci hledají. Mnohdy taky toto dělení odráží zahleděnost firmy sama do sebe (máme oddělení koncových uživatelů a korporátních klientů). Univerzální návod na dokonalou navigaci Vám ale neprozradím. Ani to nejde. Každý web je totiž jiný a tvůrci se musí vždycky hodně zamyslet.

trvalý odkaz | komentáře (7)

Stránka Websites as Graphs je takové zajímavé udělátko, které zobrazí zadanou webovou stránku ve formě stromového grafu složeného z různobarevných kruhů spojených čarami, které znázorňují hierarchii objektů stránky (via Website Graphs). Jednotlivé barvy vyjadřují např. odkazy, tabulky, obrázky, elementy div a html apod. Po načtení dat se objektový strom hezkou animací rozvine do konečné podoby. Koneckonců se podívejte sami jak vypadá třeba graf Google nebo graf conBLOGu. Další obrázky a popis najdete v článku Websites as graphs.

trvalý odkaz | komentáře (8)

Ač se člověk snaží, jak chce, tak se překlepům neubrání. Když se k nepozornosti přidá podvědomí, tak je o zábavu postaráno. Třeba na stránce Thomas Alva Edison jsem vyrobil tento skoro freudovský překlep: Za prodej práv na patent na vylepšení telegrafu získal Thomas Alva Editor 40 000 dolarů. Překlep s Tomášem Editorem jsem už opravil, ale možná bude ještě chvilku dostupný skrze Google (když teď Google začal rychleji reagovat na změny obsahu stránek).

Ještě že mám pozorné čtenáře, kteří jsou ochotní upozornit na šotka. Díky Lefane.

trvalý odkaz | komentáře (18)

Při sledování seriálu Bratrstvo neohrožených jsem si znovu připomenul stav lehkého zmatení, který občas zažívám u válečných filmů. U sovětských válečných eposů jsem tím pravda netrpěl. Stovky tanků a tisíce vojáků valících se na fašisty (ono to byli spíš nacisti, ale s tím si nikdo hlavu nelámal, zní asi to líp) mi k tomu nezavdaly příčinu. U filmů amerických ten problém ale mám. Problém s rozlišením hrdinů. Všichni jsou navlečení do stejného mundůru. Důstojníci i vojáci. Výsadkáři pro jistotu ještě pomalovaní v obličeji. Postav a postaviček jsou desítky. Černoši až do Vietnamu nikde.

Podobně zmatený možná je také uživatel, který prochází oborové weby. Často se mi zdá, jako by je tvořil jeden návrhář. Podobné barvy, podobný layout, skoro stejné menu. Je pravda, že podobné prostředí vede k podobným formám. Špatné je, když jsou tyto formy jako vystřižené z příručky jak nedělat web. A majitelé webů zhusta opisují od konkurence. Dílem z lenosti, dílem ze strachu, aby nebyli jiní než konkurence. Aby dokonce snad nebyli lepší než konkurence.

Na strach z toho být lepší jsem narazil na semináři s klíčovými uživateli právě předávaného webu. Lavinu spustil představitel úseku, kterému zmizel odkaz na jeho oblast z hlavního menu. Přidali se někteří další. Já, já, můj, náš. To znělo nejčastěji. A korunu tomu nasadil argument, že všichni to mají stejně. A já opáčil, že stejně špatně (někdy je dobré být razantní). Znovu jsem trpělivě vysvětlil, že zákazníka nezajímají naše problémy. Že je nezajímá struktura firmy a co o firmě kdo kdy napsal. Zákazníka zajímá, jak ukojíme jeho potřeby. Jestli dostane své zboží. Jestli mu poskytneme jeho službu.

Web je především pro návštěvníky. Poskytněme návštěvníkovi co chce a on to od nás třeba i koupí.

trvalý odkaz | komentáře (20)

Google Related Links je nová služba, která vkládá pomocí Javascriptu do stránek odkazy na podobné stránky.

Javascriptový kód vygenerujete na této stránce. Právě teď můžete zvolit:

• velikost (4 velikosti),
• typ odkazů (2 záložky z hledání, novinky a webové stránky),
• barevné schéma (7 schémat).

Kód je průběžně generován a stačí jej zkopírovat.

Jaké jsou výhody Google Related Links? Asi tou hlavní výhodou je, že nabízíte svým návštěvníkům další obsah, podobný Vaší stránce. Zobrazované odkazy by měly být aktuální. Služba je zdarma.

Samozřejmě jsou tu i nevýhody. Na stránky přidáváte další kód, který může zpomalit načítání stránek. Někomu může vadit, že za zobrazení nedostává od Google žádné peníze (i takoví se najdou). Pokud vím, tak Google Related Links nejsou v češtině. A když už jsem u té češtiny, tak je tady problém s relevancí vrácených výsledků. Nejlepší bude asi malá ukázka:

trvalý odkaz | komentáře (5)

Dobrý tiskový výstup z webové stránky může vylepšit celkový dojem z vašeho webu. Spousta uživatelů považuje informace zobrazené na webových stránkách za velmi nestálé, podléhající změnám a náhlým kolapsům. Z tohoto důvodů si uživatelé stránky rádi tisknou. Webdesignéři ale bohužel často tvorbu tiskových výstupů podceňují nebo, co je horší, vůbec neřeší. Raději testují web v několika prohlížečích, než by stránku jednou vytiskli. Tiskové výstupy webových stránek jsou často nepoužitelné.

Mark Boulton v článku Five Simple Steps to Typesetting on the web: Printing the web přináší velmi praktický návod, jak vytvořit kvalitní tiskový výstup webové stránky. Jako příklad použil stránky britského listu The Guardian. Mark Boulton mj. radí:

Využijte možnosti CSS

Nevytvářejte duplicitní tiskové varianty webu. Použijte externí tiskový stylopis.

Dodržte vzhled

Tiskový výstup by měl být podobný webu nebo třeba i tištěné verzi elektronického média.

Kreslete

Než začnete psát CSS soubor, vezměte do ruky tužku a papír a kreslete. Získáte představu, jak má budoucí tiskový výstup vypadat. Ušetříte si spoustu času. Načrtněte malé náhledy a potom nakreslete stránku ve skutečné velikosti.

Modelujte

Pokud můžete, vezměte si na pomoc nějaký "kreslící" program. Namodelujte stránku a testujte barvy. Zkoušejte fonty.

Tiskněte

Nesmíte zapomenout stránku vytisknout. Náhled před tiskem nestačí.

A co říct na závěr? Při tvorbě webových stránek myslete na uživatele, kteří si webové stránky tisknou. Připravte pro ně tiskový styl.

Souvislosti

• Print media browser conformance - Philip Shaw o tom, jak prohlížeče podporují tiskové styly.
• Odlišné formátování tisku - Dušan Janovský
• CSS Design: Going to Print - Eric Meyer
• Tisk WWW stránek pomocí CSS - Marek Prokop

trvalý odkaz | komentáře (15)

David Špinar mně pozval na svůj Kurz tvorby přístupného webu, pořádaný firmou H1.cz. Neváhal jsem a 28. března vyrazil do Prahy, do Nuslí, do učebny, do…

Hned na začátku musím napsat, že přístupné webové stránky jsou dobré pro všechny uživatele. Nejenom pro ty opravdu postižené. Každý z nás totiž bude, je nebo byl uživatelem se specifickými potřebami. Nemusíte nutně být nevidomý nebo ochrnutý, abyste měl problémy s používáním webových stránek. Stačí být bohatý a pro surfování používat PDA. Nebo mít v myši vybité baterky.

Každý majitel webu by měl vědět, že přístupný web znamená lepší viditelnost jeho webu a víc obchodních příležitostí. A to může přinést peníze.

Ale zpět ke kurzu. Jednodenní kurz je určen hlavně tvůrcům webů (tzn. webmasterům, webdesignérům a informačním architektům). V průběhu kurzu zjistíte proč je důležité mít přístupný web, ale také jak toho dosáhnout. Seznámíte se ze základními pravidly tvorby přístupného webu. Mj. je docela podrobně probrána česká metodika přístupnosti pro účely zákona o ISVS (365/2000 Sb.) a také metodika WCAG 1.0. Celý výklad (jako kostra slouží promítaná prezentace) je proložen komentovanými ukázkami skutečných webů a odkazy na knihu Davida Špinara Tvoříme přístupné webové stránky (tu obdrží každý účastník kurzu).

David Špinar problematice přístupnosti webových stránek rozumí (asi znáte jeho weblog Přístupnost). Výklad je zajímavý, má logickou strukturu, nenudí. Je zasazen do širších souvislostí třeba s použitelností webu nebo s optimalizací stránek pro vyhledávače.

Ale abych jenom nechválil. Chyběla mi snad jen jediná věc. Možnost "hodit do placu" vlastní stránky (pravda, řeč se občas točila kolem jednoho známého webu tvořeného přítomnými webdesignéry). Ale ukázat (třeba zkrácené) testování podle vybrané metodiky by jistě bylo zajímavé (emoce tvůrce by jistě sehrály svou roli).

Délku kurzu jsem už zmínil. Šest až osm hodin se může zdát málo. Na základní seznámení s problematikou je to dostatečná doba. Na "naučení se" to samozřejmě nestačí. Kurz na více dnů může odradit frekventanty. Jiní by ale za větší prostor byli vděční.

A jak mám zhodnotit kurz tvorby přístupného webu? Z mého pohledu to byl užitečný den. To co jsem jenom četl jsem teď také slyšel na vlastní uši a viděl na vlastní oči. Osobně jsem se setkal s Davidem Špinarem nebo třeba s Jaroslavem "Dero" Polakovičem a Honzou Rozehnalem. V restauraci na Folimance jsem si pochutnal na dobrém obědě. Jenom ta cesta po dálnici nestála za nic. Ale nic není dokonalé.

Ještě jedna poznámka na závěr. V první větě píšu, že jsem byl na kurz tvorby přístupného webu pozván. To mj. znamená, že jsem nemusel platit cenu kurzu, která je 2 950 Kč. David za to nic nechtěl, i když asi předpokládal, co udělám.

Souvislosti

• Kurz: Tvorba použitelných stránek - Jiří Bureš
• Další kurzy H1.cz
• Přístupnost - web Davida Špinara

trvalý odkaz | komentáře (5)

Liší se od sebe korektor profesionál a korektor amatér? Zcela jistě ano.

Už je to pár týdnů, co jsem ve firmě, kde pracuji, spustil redesignovaný web. Jestli Vás zajímá průmyslové zpracování plastů, podívejte se. Web má také dvě cizojazyčné verze. Obě verze překládali našinci a obě verze prošly korekturou nejméně jedním rodilým mluvčím.

Protože se navíc jedná o oborový web (kdo z Vás zná terminologii horké ražby?), je důležité, aby korektor rozuměl danému oboru.

Snahou každého majitele webu, který má cizojazyčnou mutaci mutaci, by měla být její bezchybnost. Amatérský překlad snižuje důvěryhodnost webu. Pojmem amatérský myslím nekvalitní. Přesvědčil jsem se, že profesionální překladatelské firmy často překládají veskrze amatérsky. Odpustil bych jim neznalost oborové terminologie, ale chyby gramatické jsou na pováženou. Ale zpátky k tématu.

Protože je naší snahou pokud možno dokonalý překlad, tak často využíváme služby více rodilých mluvčích, kteří navíc pracovali v našem oboru. A tady je skrytý možný problém. Oprava chyb gramatických nebo věcných může sklouznout k opravám stylu já bych to napsal jinak. Korektor profesionál asi umí odlišit hranici, kdy začne měnit styl. A za tuto hranici nejde. Výstupem činnosti deseti amatérských korektorů nad gramaticky i věcně správným textem může být deset různých textů.

Jaké máte zkušenosti s překlady webu do cizích jazyků? Jaká je úroveň domácích překladatelských firem? A jak spolupracujete s rodilými korektory?

trvalý odkaz | komentáře (15)

Atomz mj. nabízí interní vyhledávání na webových stránkách zdarma. Atomz můžu jenom doporučit. Před necelým půl rokem jsem psal, že firma WebSideStory koupila Atomz.

Začleňování Atomz do WebSideStory pokračuje. Vedle starších změn (banner Atomz Is Now Part Of WebSideStory, změna vzhledu webu Atomz, výměna loga atp.) byla uživatelům vyhledávání Atomz e-mailem rozeslána informace o změně přihlašovací stránky. Nyní se tedy do systému hlaste na adrese http://www.websidestory.com/login/.

trvalý odkaz | komentáře (4)

Abych trochu vyvážil informační hodnotu dnešních spotů, přidám odkaz na velmi pěkně napsaný návod Použitelné a přístupné webové formuláře od Plaváčka. Najdete zde přehledný popis, jak vytvářet přístupné a použitelné webové formuláře.

trvalý odkaz | komentáře (4)

Konvergence je blbost píše Ivo Lukačovič a dodává: Budoucnost patří divergenci. Připravme se na nástup nových jednoúčelových hraček.

Jednoúčelovosti, která často přináší snadné použití, věřím. S Ivem souhlasím. Jendoúčelovosti bez zbytečných funkcí by mohli začít věřit také autoři webových stránek. Mohli by jí začít věřit třeba také majitelé stránek. Nebo i spolumajitelé vyhledávačů. I to je důvod, proč Google všechny převálcoval. Srovnejte toto a tamto.

Omluva: Autor se bez vnějšího nátlaku přiznává, že poslední dva odkazy obsahují špatně sestavený text odkazu, který odporuje zásadám použitelnosti. Autor jej použil výhradně pro účely pseudohumorného vyznění druhého odstavce tohoto spotu. Tímto se autor omlouvá všem, kterých se snad nějakým způsobem dotkl.

trvalý odkaz | komentáře (18)

Jakob Nielsen ve svém Alertboxu Avoid Within-Page Links (21. 2. 2006) vysvětluje důvody, proč je špatné používat linkování uvnitř jediné webové stránky. Proč je používání kotev nevhodné?

Odkazování uvnitř jedné stránky (tj. odkaz s odskokem na jiné místo právě otevřené stránky) mate uživatele. Uživatelé si za léta brouzdání na internetu zvykli na následující model chování:

1. Odkaz mě přesune na novou stránku.
2. Stará stránka zmizí.
3. Nová stránka nahradí starou.
4. Vidím horní okraj stránky.
5. Tlačítko Zpět mě vrátí tam, odkud jsem přišel.

Takto skutečně funguje většina stránek. Odkazy uvnitř stránky hned několikrát narušují výše uvedené zvyklosti uživatelů:

• Stránka pouze odskroluje. Uživatel není na nové stránce.
• Stará stránka nezmizí, i když to uživatel očekává.
• Místo přistání na vrcholku nové stránky je uživatel vhozen doprostřed obsahu. Nikde nevidí navigaci, záhlaví okna apod.
• Tlačítko Zpět vrací uživatele jinam než čeká nebo nedělá nic (a uživatel na něj kliká a kliká).

Není všechno špatně

Někdy je obtížné se vnitřnímu prolinkování jedné stránky vyhnout. Zmatení uživatelů je možné zmenšit. Je potřeba dát najevo, že se odkaz chová jinak než obvykle. Uživatelé jsou na to konec konců zvyklí. Typickým příkladem je odkaz typu mailto:. Uživatel ví, že místo nového dokumentu naskočí okno e-mailového klienta.

Pokud je opravdu nezbytné na stránce použít vnitřní odkazy, je dobré doplnit vhodnou informaci, že odkaz směřuje dovnitř právě otevřené stránky. Je možné použít nadpis Na této stránce apod. Vždycky by měl autor zvážit, jestli nebude lepší stránku rozdělit na více samostatných stránek.

Kotvy do jiných stránek

Myšlenka odkazovat na kotvy uvnitř jiných stránek je z mnoha důvodů lákavá. Uživatele to ale mate podobně, jako linkování uvnitř jediné stránky. Sice to mate méně, ale mate to. Správně namítnete, že to mám na blogu podobně, ale naštěstí mám taky odkaz na komentáře a třeba vyhledávače nabízí odskok na samostatnou stránku blogu (tady za mně pracuje SEO).

trvalý odkaz | komentáře (18)

Vzpomínám si, jak jsem v listopadu 2003 zjišťoval výskyt tagů ve zdrojovém kódu webových stránek. Měl jsem tehdy k dispozici jedenáct set stránek z cache 22 uživatelů.

Pokud Vás zajímá, jak podobná statistika vychází, když se vezme v potaz taková miliarda stránek, tak se podívejte na Web Authoring Statistics od Google. V patnácti kapitolách se mj. dozvíte:

• Ve webových stránkách se nejčastěji vyskytují elementy head, html, title, body, a, img, meta, br, table, td, tr, p, script, div, b, font, link, form, input.
• Nejčastěji se používají třídy (class) footer, menu, title, small, text.

Víc už psát ani nebudu. Raději si přečtěte samotný rozbor.

Souvislosti

• Výskyt tagů
• Výskyt tagů 3

trvalý odkaz | komentáře (10)

Jaroslav "Dero" Polakovič se ve spotu W3C, jdi mi s XHTML 2.0 k šípku… bojí, že nám W3C zruší element a.

V připravované specifikaci XHTML 2.0 se chystá doplnění atributu href do dalších elementů. Kodér by pak ušetřil pár znaků, když by třeba chtěl odkazovat přímo z nadpisu:

<h2 href="http://www.example.com/">Nadpis</h2>

Proč by ne. Mohlo by to být užitečné. Samozřejmě jen pod podmínkou, když se to podaří rychle implementovat do prohlížečů. Protože je ale doba, než vyšumí staré prohlížeče dost dlouhá, tak tlak na vývojáře nemusí být dostatečný. A dostatečně velký bude asi taky pud sebezáchovy vývojářů, kteří s pochopitelných důvodů nebudou chtít nový postup používat.

Dero se na základě textu this element (myšlen element a) remains for explicit markup of links, though is otherwise identical in semantics to the span element bojí o samotnou existenci elementu a. Text naštěstí neříká nic o tom, že je a zrušené, i když je závěr citované věty hodně nešťastný - element a rozhodně není element bez významu, kterým je span.

Element a nejde zrušit třeba jenom proto, že je odkazů vložených v jiných elementech poměrně málo. Podívejte se na běžnou webovou stránku a srovnejte počet normálních odkazů s odkazy v nadpisech, celých odstavcích nebo řádcích položky seznamu. Áčko prostě do kódu patří.

Na druhou stranu je použití elementu a v HTML dost nešťastné. Klasicky se používá pro odkaz na jiný dokument nebo na jiné místo aktuálního dokumentu. K tomu přibývá a jako označení místa v dokumentu (cíl odkazu za #) - mimochodem není tohle původní význam značky a? To jsou dvě (možná i tři) různé věci, které se W3C snaží postupně osekávat (např. možností odkazovat na id). Snad nevylijí s vaničkou i dítě.

trvalý odkaz | komentáře (5)

Dušan Janovský právě přesunul informace o Google PageRank na samostatnou stránku webu Jak psát web.

Pro šťouraly, kterým tento spot nic nového nepřináší: užitečná stránka si zaslouží zpětný odkaz a tím pádem i vyšší Google PageRank.

trvalý odkaz | komentáře (8)

Jak řadit položky navigace stejné úrovně? Podle abecedy nebo podle významu?

Při tvorbě webů často narážím na problém, jak řadit navigaci. Nabízí se dva přístupy k řazení položek navigace:

• Abecední řazení.
• Významové řazení podle důležitosti odkazů a podle ustálených zvyklostí.

Velmi často volím abecední řazení. Prostě jsem zvyklý v nejrůznějších seznamech rychle hledat podle abecedy. Vždycky mi dost silně vadí, když musím přeskakovat. Nevím ale, jestli netrpím nějakou deformací nebo jestli nejsem až příliš zběhlý v používání abecedního řezení. Taky bych řekl, že abecední řazení je lepší pro návštěvníky, kteří ještě dokonale neznají daný web a jeho strukturu a obsah.

Naproti tomu řazení podle důležitosti odkazů uživateli říká, na kterou část webu zaměřit pozornost. Naznačuje strukturu webu. To samozřejmě může být jen sebeklam autora (provozovatele) webu. Uživatelé mohou mít názor zcela jiný.

Horizontální navigace

U horizontální navigace, která je zároveň navigací globální, vnitřní rozpor při řazení jednotlivých položek nemám (aspoň si to myslím). Tam vždycky řadím podle významu nebo podle ustáleného pořadí.

Celý problém kolem řazení navigace může být jenom pseudoproblémem. Použitý způsob řazení samozřejmě vždycky závisí na konkrétní situaci. Jak to vidíte vy?

trvalý odkaz | komentáře (23)

Pro firemní intranet hledám jednoduchý anketní systém, který by běžel na ASP. Je možné využít MS SQL. Podělíte se o své zkušenosti?

Pár let se chystám, že náš firemní intranet rozšířím o ankety a další interaktivní prvky. Tento týden za mnou přišel uživatel, který by ankety na intranetu rád měl. Proč ne?

Před nějakou dobou jsme spustili nové servery s Microsoft Windows Server 2003 a SQL Server 2000. Postupně na ně převádíme také náš firemní intranet (macek už má přes patnáct set stránek). Co by měl anketní systém umět a jaké by měl mít vlastnosti:

• Napsaný v ASP.
• Data by měl ukládat do MS SQL nebo do textových souborů.
• Měl by být instantní (snadno instalovatelný a spravovatelný).
• Neměl by umožnit opakované hlasování.
• Najednou může být spuštěno více anket.
• Zamykání uzavřených anket (není podmínkou).
• Výsledky hlasování by se měly zobrazit až po odhlasování (není podmínkou).
• Anketní systém by neměl být součástí jiného systému, abych jej nemusel kuchat.
• Mělo by se jednat o volně dostupný anketní systém.

Jak už jsem psal, tak jsem už provedl nějaké googlování a testy, ale rád bych se dozvěděl nějaké zkušenosti od Vás.

trvalý odkaz | komentáře (8)

Na stránce Focus Slide Navigation se můžete podívat na ukázku dynamického zvýraznění položky menu po najetí myši. Vše je řešeno Javascriptem v kombinaci s čistým (X)HTML a CSS.

Abych se přiznal, tak nejsem příznivcem podobných efektů. Jednak jejich užití může přinést problémy (mně to nefunguje v prohlížečích Firefox 1.5 a Opera 8.5) a potom to není můj styl. Ale třeba se vám to bude hodit.

trvalý odkaz | komentáře (22)

CSS Menu Generator je webová aplikace, která podle Vašich požadavků vygeneruje CSS a HTML kód menu do webové stránky.

V současné době CSS Menu Generator nabízí 4 typy svisle orientovaného menu s hover efektem. V prvním kroku si vyberete typ menu. Ve druhém pak zadáte šířku menu v pixelech, zadáte barvy menu (k mání je paletka pro výběr barvy), typ písma a texty položek menu a jim náležející URL. V posledním kroku na Vás čeká funkční příklad Vašeho menu a zdrojové CSS a HTML kódy menu.

Aplikace není samozřejmě dokonalá. Počet variant menu je omezený a generátor samozřejmě neposkytuje všechny možnosti, které zná zkušený webdesigner. Výsledný kód taky nemusí každému vyhovovat. Je sice stručný, ale purista by na něm nějaký ten chlup našel. Pro začátečníka může být ale CSS Menu Generator užitečnou pomůckou.

Souvislosti

• List-O-Matic - velmi dobrý nástroj na generování menu.
• Jak-na-menu? List-o-matic!

trvalý odkaz | komentáře (3)

V článku Microsoft - The Only Ones Following Web Standards! najdete seznam webových stránek počítačových firem a chyb, které na nich našel W3C Markup Validation Service. Pro někoho překvapením může být, že z hlediska validity uspěly na výbornou stránky firmy Microsoft.

Validita po česku

A abych jenom neodkazoval, tak se podívám na některé domácí stránky tak, jak mi příjdou pod klávesnici (opravdu v tom nehledejte nějaký úmysl):

• Seznam.cz - 7 chyb
• Centrum.cz - 6 chyb
• Jyxo - 0 chyb
• Interval.cz - 1 chyba
• Lupa.cz - 0 chyb
• Živě.cz - 53 chyb
• Root.cz - 0 chyb
• Grisoft - 20 chyb
• Alwil Software - 1 chyba
• H1 - 0 chyb
• Dobrý web - 0 chyb
• Microsoft CZ - 9 chyb
• CZilla - 0 chyb
• Bloguje.cz - 0 chyb
• Blog.cz - 0 chyb

Výsledky odpovídají času, kdy byl test prováděn (dnes kolem 20. hodiny).

Abych se přiznal, tak mě výsledky minitestu příjemně překvapily. Oproti minulosti (kdo ještě pamatuje validační války?) se situace výrazně zlepšila (aspoň co se týká testovaného typu webů).

Něco o validitě, abychom si rozumněli

Validní webové stránky jsou takové, které plně odpovídají danému standardu (doporučení). Validita se obvykle ověřuje validátorem. Validátor je nejčastěji webová aplikace, která po zadání adresy dané stránky ověří její validitu. Validátor samozřejmě není neomylný - je to jenom program. Stránka, které je označena jako validní, může obsahovat chyby. To, že je stránka validní neznamená, že je také kvalitní (přesto to o něčem vypovídá).

trvalý odkaz | komentáře (11)

CSS Working Group vydala 15.12. 2005 další 4 pracovní návrhy (tzv. working draft) připravovaného CSS3:

• CSS3 Advanced Layout Module
• CSS3 module: Cascading and inheritance
• CSS3 module: Multi-column layout
• Selectors

trvalý odkaz | komentáře (2)

Když jsem pře pár minutami psal, že web Českého Telecomu je pomalý jak ludra, nevěděl jsem, že nám doma připraví ještě jednu kratochvíli. Tou je stránka Nápověda, kterou doporučuji jako vzor pro školení jak napálit návštěvníka nepoužitelným webem. Stránka nepřekvapila titulkem Český Telecom - domácí stránky. Opravdu skvělým nápadem je mix nápovědného textu a zdánlivě funkčních formulářových polí známých ze stránky Registrace. Uživatel okamžitě nabyde dojmu, že se jedná o skutečně funkční registrační formulář, který je rozšířený o podrobnou nápovědu (i samotné texty k registraci vybízí).

Autor (asi aby si ušetřil štrapáci s típáním obrázků registračního formuláře) použil přímo kód registračního formulář. Uživatel vidí formulář a tak do něj klikne. A ono to funguje. Při zadání prvního znaku prohlížeč nabídne dříve zadaný výraz. Hurá! Když jsem neuspěl na registračním formuláři, tak to tady všechno pěkně zadám znovu. Navíc mě vede nápověda, takže to už teď nezmastím, myslí si ten nebožák. Chyba lávky. Po poctivém znovuvyplnění všech údajů a kliknutí na tlačítko Registrovat se pochopitelně nic nestane. Tedy skoro nic. Ozve se jenom tiché cvaknutí. To jak sklapla past.

trvalý odkaz | komentáře (7)

V článku CSS Technique: Worn Type najdete návod blogera žijícího v Kambodži, jak pomocí kaskádových stylů a jednoho obrázku vyrobit zajímavý textový efekt (via Worn type with CSS). Například odřený text nebo nějaký jinak vylepšený. Jednoduše řečeno, nahrazovat jde i částečně průhledným obrázkem.

Má to ale jeden háček. Použitý postup znesnadňuje výběr textu (aspoň v prohlížečích IE a Firefox).

trvalý odkaz | komentáře (7)

Lupa.cz dnes změnila vzhled a já dodávám, že k lepšímu. Lupa je výrazně odlehčená a přehlednější. Nad ohybem jsou vidět jen dva sloupce, ke kterým se dole přidává ještě sloupec třetí. Škoda jenom, že ještě není všechno úplně dotaženo (třeba opticky velmi hutná tlačítka pod seznamem názorů a taky mě v komentářích trochu ruší modrý pruh u komentářů s textem Odpovědět).

Lupa zjednodušila strukturu a přidala nové funkce. Tou nejvýraznější novinkou jsou asi čtenářské blogy na Lupě (ještě pořád Vám blogování připadá jako móda s jepičím životem?). Za pozornost také stojí změna redakčního systému, která mj. přinesla pěkná URI.

Souvislosti

• Lupa v novém hávu - David Grudl
• Pseudoblogy na Lupě - Jiří Macich ml.

trvalý odkaz | komentáře (7)

Centrum.cz plánuje 1. prosince 2005 spustit interní vyhledávání na webových stránkách. Podobnou službu nabízí třeba Google nebo skvělý Atomz.

V těchto dnech Centrum spouští testovací program svého nového interního vyhledávání. Zájemci si tak budou moci na své stránky vložit vyhledávací formulář a Centrum.cz na oplátku nabídne třeba:

• každodení aktualizace,
• přehledné statistiky,
• vlastní vzhled výsledků vyhledávání.

Vyhledávání by mělo být v základní verzi Partner pro nekomerční využití zcela zdarma a pro neomezený počet stránek (standardně je nastaveno omezení na 1000 stránek, které lze na požádání navýšit).

Placenou variantou pak bude program Business. Tato varianta navíc nabídne třeba indexování dalších typů souborů (např. txt, pdf, doc, xls) nebo XML export výsledků vyhledávání.

Nové interní vyhledávání na webových stránkách od Centrum.cz by mohlo trochu rozčeřit stojaté vody domácích vyhledávačů v oblasti interního vyhledávání. Velmi užitečné by mohly být statistiky hledání, přizpůsobení vzhledu výsledků vyhledávání podle vzhledu webu, na kterém bude vyhledávání nasazeno a především široká podpora češtiny.

trvalý odkaz | komentáře (5)

Pokud používáte filtrování prohlížečů pomocí CSS, bude se vám možná hodit přehledná tabulka Will the browser apply the rule(s)? (via CSS Filters). Najdete v ní matici, která obsahuje jednotlivé CSS filtry, nejrozšířenější prohlížeče (nyní 33) a to, jak se s CSS filtry prohlížeče vypořádají.

trvalý odkaz | komentáře (4)

Jestli rigidní pohled na pravidla spíše přístupnosti škodí je otázkou do diskuze. V každém případě to tvrdí David Špinar v reakci na Jakoba Nielsena a jeho další Alertbox sloupek Accessibility Is Not Enough.

Nielsen o dva dny předběhl další pracovní návrhy WCAG 2.0, ve kterých jsou uvedeny právě ony techniky, které mají zajistit přístupnost webových stránek. Ale jedna věc je použitá technika a odškrtnutí pravidla v checklistu a druhá věc je, jak konkrétně je dané pravidlo naplněno. Nielsen to ilustruje na příkladu naplnění atributu alt u prvku img. To, že je atribut alt přítomen a nějak naplněn neznamená, že je obrázek tím pádem dobře přístupný. Důležitá je především kvalita, s jakou je dané pravidlo použito.

Nielsen připomíná nezastupitelnost uživatelského testování. Shora dolů odfajfkovaný checklist přístupnosti stránky totiž autora webu svádí k pocitu, že je stránka přístupná. První uživatelské testování často ukáže pravý opak.

trvalý odkaz | komentáře (5)

Web Content Accessibility Guidelines Working Group (WCAGWG) včera vydala dva nové dokumenty (pracovní návrhy):

• Web Content Accessibility Guidelines 2.0
• HTML Techniques for WCAG 2.0

Hlavně druhý uvedený dokument je pro autory webů hodně zajímavý a užitečný. Obsahuje totiž praktické postupy, pomocí kterých budete tvořit opravdu přístupné webové stránky.

trvalý odkaz | komentář

Oficiálním vítězem Acid2 testu se stal prohlížeč Safari RSS verze 2.0.2/416.12. Tvrdí to aspoň Dori Smith v článku We love to see you smile.

Prohlížeč Safari RSS je tak prvním (ne beta/public preview/apod.) prohlížečem, který prošel testem Acid2. Tento test si klade za cíl ukázat schopnosti prohlížečů správně vykreslit webové stránky vytvořené podle standardů.

trvalý odkaz | komentáře (8)

Málokdo chce, aby jeho stránky byly neúspěšné. Málokdo chce mít nepoužitelné stránky. Málokdo ale umí použitelné stránky vytvořit a ne každý ví, jak využít obchodního potenciálu svých webových stránek. Pokud si je autor webu vědom nedostatků stránek, které tvoří, může se mnoha způsoby zlepšovat. Může třeba navštívit školení.

Já se na jedno takové školení chystal a před jeho začátkem jsem napsal:

Pokud máte zájem, aby váš web byl (nejen) obchodně úspěšný, může být kurz tvorby použitelných a obchodně úspěšných stránek určen právě vám.

Po absolvování kurzu tvorby použitelných a obchodně úspěšných stránek můžu prohlásit, že kdo koupí, neprohloupí. Marek Prokop totiž použitelnosti webových stránek rozumí. Jeho výklad je srozumitelný, příklady názorné a odpovědi fundované. Účastník kurzu doslova na vlastní kůži pozná, jak se provádí uživatelské testování a to jak v pozici testovaného, tak i testujícího. Odvážní jedinci přitom mohou do arény předhodit své vlastní webové stránky.

A co říct na závěr? Po absolvování úterního kurzu mohu prohlásit, že pokud máte zájem, aby váš web byl (nejen) obchodně úspěšný, je kurz tvorby použitelných a obchodně úspěšných stránek určen právě vám.

trvalý odkaz | komentáře (8)

Přiznám se bez mučení. Nikdy jsem neabsolvoval žádné školení na tvorbu webových stránek. A teď jsem byl na stará profesní kolena pozván do Prahy na úterní kurs tvorby použitelných a obchodně úspěšných stránek, který pořádá Marek Prokop.

Jsem spíš analytický typ. Mám rád logická pravidla a těch, které vstřebám, jsem schopný se držet. Jsem schopný vytvořit do značné míry použitelné stránky nebo poradit s jejich tvorbou. Zvládám velkou část SEO a další techniky pro vytvoření přístupného webu. Co ale není můj šálek čaje, tak to je svět obchodu. Přiznávám, že mi dělá problémy proniknout do amorfního světa obchodu. Do světa ovládaného pocity, vztahy a vrtkavými náladami. Je pravděpodobné, že o spojení webu a obchodu vím víc, než nejeden marketingový manažer, ale věřím, že se od živého lektora dozvím ještě víc.

Z vlastní zkušenosti vím, že při tvorbě firemních webových stránek není hlavní problém v grafickém návrhu, v napsání kódu nebo jiných technických aspektech. Největší problém je v lidech. Každá firma je jiná. Ne každá firma ví, co může na internetu dobrým webem získat a co naopak nepovedená webová (pouze) prezentace firmě ubírá. Setkal jsem se s firmami, kde byla stanovena rozumná webová strategie (často bez velkých zkušeností s komercí na webu). Setkal jsem se s firmami, ve kterých o webu rozhodovali lidé s různými pohledy na web a jejichž příkazy (ne)vykonávali ti, kteří by nejraději neměli s webem nic společného.

Pokud máte zájem, aby váš web byl (nejen) obchodně úspěšný, může být kurs tvorby použitelných a obchodně úspěšných stránek určen právě vám.

trvalý odkaz | komentáře (3)

Odkaz na článek Jakoba Nielsena Top Ten Web Design Mistakes of 2005 jsem sušil od pondělka. A sušil jsem ho tak dlouho, až jsem ho úplně přesušil. Respektive jiní nesušili a psali. Abych nelitoval, že jsem zaváhal, tak přidám aspoň pár odkazů:

Nielsen: Top ten chýb webdizajnu v roku 2005

Ľuboš Kmeťko

Stručný překlad a shrnutí Nielsena.

10 největších chyb webdesignu za rok 2005

Petr Václavek

Rozsáhlejší shrnutí.

Opravdu 10 největších chyb webdesignu?

Jan Brašna

Jan polemizuje na téma: je těch deset největších chyb webdesignu opravdu těch deset největších?

Nielsenových desať najväčších chýb webdesignu v roku 2005

Robert Madaj přidává svůj pohled na deset chyb webdesignu podle Nielsena.

Určitě nebudu sám, kterému se zdá, že se každý rok ty chyby pořád opakují. Je to proto, že jsou webdesignéři tak špatní? Nebo je snad malá osvěta? Nebo to, nedej bože, návštěvníci takto chtějí? Možná jenom lidé jdou nejsnazší cestou. Abych vysvětlil pojem nejsnažší cesta - myslím tím první nalezený použitelný způsob práce, který v konečném důsledku není nejlepší.

Na závěr bych rád, aby nechyběla explicitní pointa. Mé odpovědi na řečnické otázky z předchozího odstavce jsou:

• Někteří, nevím, někteří, asi ano - pokud jsem v normální náladě.
• Ano, ne, ne, ano - když mám rezolutní náladu.
• A není to jedno (po láhvi dobrého Merlotu)?

trvalý odkaz | komentáře (3)

Už pár dní je u Microsoftu dostupná beta verze Internet Explorer Developer Toolbar (via Developer Toolbar for IE). Takže teď můžete ve svém Internet Exploreru procházet DOM zobrazené stránky, měnit některá nastavení IE, prohlížet vybrané elementy stránky a jejich nastavení, spouštět validaci a mnoho dalšího.

trvalý odkaz | komentáře (5)

Jak komentovat části kódu v (X)HTML ví snad každý webdesigner. Jestli to ale dělá každý bez chyb, je otázkou. I sebejednodušší činnosti mohou způsobit problémy. A právě remování mě nachytalo na hruškách nedávno.

Doporučení HTML 4.01 říká o komentářích zhruba toto: Mezi znaky <! a znaky -- nesmí být žádné whitespace znaky (mj. žádné mezery), ale tyto whitespace znaky jsou povoleny mezi ukončovacími znaky -- a ukončovacím znakem >. Častou chybou je vložení dvou a více znaků - uvnitř komentáře.

Prohlížeče

Můj obvyklý způsob zapisování kódu zahrnuje i poměrně časté psaní poznámek (viz testovací stránka). Věřte mi, je to užitečné. Často mám poznámku na začátku i konci poznámkou označeného bloku. A tady začíná můj problém, který mě potkal tento týden. Firefox mi na jedné stránce odkryl komentářem skrytou část stránky včetně části komentáře. Asi je Vám jasné, kde byl zakopaný pes.

Abych si ušetřil práci (zrovna jsem machroval a ukazoval, jak rychle můžu skrýt část stránky), tak jsem na konci úvodního komentáře smazal ony dvě pomlčky. Editor poslušně přebarvil blok do zelena a Internet Explorer 6 zamýšlenou část stránky skryl. Vymalováno. Ovšem jen do doby, než jsem si stránku prohlédl ve Firefoxu. Firefox se snaží ctít doporučení a zobrazí text, který následuje za uvodními znaky poznámky - tj. za <! a to včetně textu poznámky.

Opera se chová stejně jako IE - nebere v úvahu špatně napsanou poznámku a vše skryje.

Editory

Zajímavé taky je, jak se ke špatně zapsanému kódu poznámky staví editory:

Adobe GoLive 6

Kód označí jako celý zaremovaný. Chová se tak, jak IE zobrazuje.

Macromedia Dreamweaver

Kód označí jako celý zaremovaný. Chová se tak, jak IE zobrazuje.

Macromedia Homesite 5

Text označí jako zaremovaný až do výskytu ukončovacího sekvence -->. V uvedeném příkladu to bylo až do konce HTML dokumentu.

Microsoft FrontPage 2003

Kód označí jako celý zaremovaný. Chová se tak, jak IE zobrazuje.

NVU 0.3

Celkem pochopitelně zobrazuje jako Firefox a do zdrojového kódu doplní(!) za začátek první poznámky dvě pomlčky (znaky mínus).

Vyzkoušel jsem ještě další editory. A všechny se chovaly tak, jak IE a Opera zobrazovaly a stejně jako FrontPage a spol. zobrazovaly. Testem prošel ještě editor 1st Page 2000, PSPad a TopStyle Pro 3.10.

trvalý odkaz | komentáře (19)

Když jsem včera odkazoval na stránku věnovanou stylování tabulek pomocí CSS, tak proč bych dnes v nakousnutém tématu nepokračoval? Znalci v seznamu asi nenajdou nic nového, ale jako stručný sumář pro zbytek čtenářů by tento spot mohl být užitečný.

A ještě na vysvětlenou. CSS galerie jsou stránky, na kterých jsou prezentovány ty nejlepší stránky vytvářené pomocí kaskádových stylů. Autoři většinou dodržují moderní postupy tvorby webu a také jejich výtvory je možné označit za moderní díla (bez urážky).

Známé CSS galerie

• CSS Beauty
• CSS Drive
• CSS Vault
• css Zen Garden
• Unmatched Style
• Moderní web
• Stylegala

trvalý odkaz | komentáře (13)

Příkladů není nikdy dost a příklady táhnou. Tak tahle dvě ustálená slovní spojení mě napadla při procházení stránky CSS Table Gallery (via WaSP).

Princip podobných CSS galerií je prostý. Jedna standardní stránka, ke které se připojují různé CSS soubory měnící vzhled stránky k nepoznání. Nechejte se insipovat metamorfujícími tabulkami také.

trvalý odkaz | komentáře (4)

Lupa vybrala svůj nový vzhled. A můžete si taky postěžovat, jaký je to hnus, jak vitezny navrh ani zdaleka nerespektuje zadani. Prostě se odreagujte.

trvalý odkaz | komentáře (6)

Zúčastníte se hlasování o novém designu Lupa.cz? A jak se Vám návrhy líbí?

Souvislosti

• Hlasujte o nový design Lupy!
• Designerská soutěž: navrhněte novou Lupu

trvalý odkaz | komentáře (26)

Právě teď ve firmě, kde pracuji, implementujeme nový informační systém. Přál bych Vám poslouchat ty debaty nad nepodstatnými náměty (přeloženo: připomínkujte si co chcete, bude to tak, jak to je, a basta) o uživatelském rozhraní nebo logických lapsech návrhu. Nedělám to často, ale uvedu rozsáhlejší citaci Petra Staníčka (Vogonská akvizice), protože něco podobného se snažím říkat taky:

…je vidět, že nikdo z velkých provozovatelů portálů apod. nezná skutečné BFU. Pro ty profíky, co ty weby připravují, jsou takoví lidé zcela nepředstavitelní. Kdyby své BFU znali, všechno - registrací počínaje, reklamami konče - by na těch portálech vypadalo úplně jinak.

Každý vývojář webů pro širokou veřejnost by si měl povinně projít čtrnáctidenní praxí, kdy by musel obcházet chaloupky na českém venkově a místní babičky a Pepiky učit používat nějaký český portál. A jestli by po těch 14 dnech neměl nutkavou potřebu udělat půlku věcí úplně jinak, měl by to rovnou zapíchnout.

To, co napsal Petr, platí pro vývojáře obecně. A nejen pro ně. Stačí si přečíst třeba nějaký zákon nebo ministerskou vyhlášku.

trvalý odkaz | komentáře (17)

Joshua David McClurg-Genevese vydal na DWM zajímavý článek The Principles of Design, který je vhodný pro všechny, kteří se chtějí seznámit se zásadami a prvky designu.

trvalý odkaz | komentář

Tak mě napadlo, když jsem si četl komentáře pod spotem Co mělo býti řečeno u Vaška Štrupla, jestli vůbec návštěvníci webů přikládají valnou pozornost místům na stránce mimo hlavní oblast. Myslím tím různá menu, patičky, seznamy aktuálních odkazů a podobně. Návštěvníka přece zajímá hlavní obsah. Až potom, co se rozkouká, hledá dál. Pokud ale dřív neklikne na tlačítko zpět.

Ve zmíněném komentáři upozorňuje halogan na zajímavý blog Jana Brašny HereBeDragons a zvlášť na aktuální odkazy na spoty z jiných blogů. Vašek reaguje: Díky za tip, Honzův blog sleduji, ale těhle odkazů jsem si nevšiml. A já vlastně taky.

trvalý odkaz | komentáře (9)

Nechcete se zúčastnit designerské soutěže na novou Lupu?

trvalý odkaz | komentáře (9)

Derek Featherstone na svém blogu Box of chocolates nabídl zajímavý způsob práce s komentáři. Formulář komentářů javascriptem dokuje vedle textu spotu (viz Dockable Comments: Intelligent DOM Scripting).

Pokud si pod výše uvedeným popisem nedokážete představit nic konkrétního, tak to funguje asi takto. Ve formuláři komentářů (ty bývají většinou dole pod textem spotu) je odkaz pro zaparkování (zadokování) formuláře. Po klepnutí na tento odkaz se formulář přesune vedle textu, který komentujete. Nemusíte rolovat nahoru a dolů, abyste si znovu přečetli, co vlastně komentujete. Formulář je možné samozřejmě vrátit na jeho původní místo, klepnutím na odkaz pro zrušení dokování.

trvalý odkaz | komentáře (4)

Denně jezdím do práce autem. Denně projíždím 4krát kolem stavby nového dálničního obchvatu Kroměříže. Denně vidím značku informující o výjezdu vozidel ze stavby, zákaz předjíždění, sedmdesátku a padesátku. Denně mě předjede tolik aut, kolik mě v tom úseku stačí dojet. Jsou jenom kvůli tomu pravidla a zákony cárem papíru, na který není potřeba se ohlížet? Dodržování pravidel je přece tak těžké a brání pořádnému rozletu. Denně lituji ty chlápky s lopatami, kteří čistí silnici od hlíny z nákladních aut. A čekám, kdy bude některý z nich sestřelen magorem, který nedodržuje předpisy (to samozřejmě neznamená, že je nemůže střelit někdo jedoucí předpisovou rychlostí).

Minulý týden se zase mluvilo o validitě webových stránek a webových aplikací. Respektive o tom, jak to (někdy) nejde. Myslím si, že většině případů je to výmluva. Nebo jinak. Většina nevalidit totiž není daná nemožností kód napsat validně, ale neschopností, nechutí a nevím čím ještě.

Validita je v tomto případě prostá shoda s nějakou existující normou nebo standardem. Dodržení základních pravidel. Validita je prostředek, ne cíl. Podle mě je velká škoda, že (především starší) prohlížeče si domýšlejí, co chtěl autor webu svým kódem říct. Jistě. Napadne Vás, že pokud by se prohlížeče chovaly důsledně, tak by bylo málo webových stránek a v konečném důsledku by internet zhynul na úbytě. Já si to nemyslím.

Jistě by ubylo pokusů měsíčních webdeveloperů. Ubylo by nevkusných stránek přeplácaných fíčurami, které jsem někde zahlédl a tak je chci. Kdo by chtěl publikovat, tak by publikoval. Jenom by se holt musel nejdřív naučit deset značek, které pro vytvoření webových stránek stačí. Nebo by třeba autoři WYSIWYG HTML editorů museli své výtvory naučit vytvářet validní kód. A pokud by tomu tak bylo, tak je vlastně tato debata zbytečná, protože by se masy dostaly k navýsost demokratickému nástroji (slovy dramatika) vulgo by se výrobní prostředky dostaly do rukou pracujících (slovy marxisty).

trvalý odkaz | komentáře (16)

Na Whitespace jsem našel odkaz na on-line CSS kompresor. Osobně tyhle nástroje nepoužívám. Úspora místa u mých CSS souborů bývá kolem 10-20 %. Nechci si přidělávat práci a držet 2 verze souborů (jednu čitelnou a druhou na web). Nevadí mi, když je stylopis na webu v čitelné formě (ať si lidi počtou). Taky se mi už párkrát stalo, že jsem soubor na webu použil jako zálohu pro omylem starší verzí přepsaný soubor. A dělat do zálohy nové odstavce a odsazení? To se mi nechce.

Víc než optimalizátor, který odmazává mezery a tabulátory a maže konce řádků, by se mi líbil analyzátor, který pozná nadbytečný kód. I když se snažím seskupovat stejné definice do jednoho předpisu, tak přece jen mi může něco uniknout. Tady by se analyzátor hodil (ony by se mi po pravdě hodily v CSS proměnné, ale to už je opravdu trochu mimo).

trvalý odkaz | komentáře (13)

Web můžete tvořit různě. Můžete pracovat sami. Spousta skvělých webů je dílem jediného člověka. Pokud se ale do hry dostávají peníze, tak se obvykle kolem nich začne točit lidí víc. Někdy je to proto, že se přirozeně kolem medu začínají slétat vosy. Když si ale tento fakt odmyslíme, tak je často opravdu nutné do práce zapojit víc lidí.

Jak velký by měl být webový tým? Kolik by měl mít lidí? A jaké profese mají být zastoupeny? Odpovědi na tyto otázky nejsou jednoznačné. Záleží na typu projektu. Na jeho rozsahu a obsahu. Záleží taky na zpracovateli projektu. Na jeho zvyklostech a možnostech. Mnoho rolí se ale opakuje na mnoha projektech (pozor ale: role nerovná se konkrétní osoba). Potřebujete grafika, kodéra, copywritera, programátora, SEO experta, účetní a svačináře, obchodníka a někoho, kdo tomu bude velet. A určitě bych si vzpomněl na někoho dalšího.

Webový tým by ale neměl být příliš rozsáhlý, protože pak se stane neschopným jakékoliv činnosti. Pět lidí je tak akorát snesitelný počet. Víc lidí se obtížně řídí. Ve větší skupině se snáze zašívá. Nikdo není za nic zodpovědný.

Jaký je váš názor na webové týmy? Jak to řešíte coby dodavatelé? A jak se na celou věc díváte jako zákazníci?

Souvislosti

• The Ideal Web Team - Andy Budd
• The Ideal Web Team (part 1) - Peter Paul Koch
• The Ideal Web Team (part 2) - Peter Paul Koch

trvalý odkaz | komentáře (4)

Mark Boulton pokračuje v seriálu o základech typografive. Zatím vydal 3 díly:

Five simple steps to better typography

Jednotky používané v typografii, proložení písma atd.

Five simple steps to better typography - Part 2

Odrážky a uvozovky.

Five simple steps to better typography - Part 3

O ligaturách.

trvalý odkaz | komentáře (2)

Tak takou rychlost jsem nečekal. Prohlížeč Safari splnil Acid2 - test na kompatibilitu s CSS2 (via Jirka Chomát). Více píše Dave Hyatt v Surfin' Safari. Jen houšť a větší kapky!

Souvislosti

• Kyselina na druhou - Petr Staníček
• Acid2 test

trvalý odkaz | komentář

Jak já tuhle vlastnost novějších verzí aplikace FrontPage nenáviděl. A konečně jsem tomu přišel na kloub. Pomohla mi k tomu diskuse <span lang="en-us"> NECHCI !!!.

O čem to vlastně píšu? Když ve FrontPage v okně Design (WYSIWYG režim) zapisujete některé znaky, tak FrontPage předpokládá, že jste se přepnuli do jiného jazyka. Např. pro zápis nedělitelné mezery se ve FrontPage používá klávesová zkratka Ctrl + Shift + mezera. Když se ale podíváte do zdrojového kódu, uvidíte třeba tento zápis:

jedu k<span lang="en-us">&nbsp;lesu</span>

Místo, kde je ukončovací značka elementu span se liší podle verze FrontPage. Tuším, že verze XP ukončovala ihned za entitou pro nedělitelnou mezeru. Verze 2003 ji mrskne za poslední napsané slovo.

Řešení

Řešení je prosté. Stačí vědět, kde kliknout. V případě FrontPage 2003 jděte do menu Tools > Site Settings… a pak na kartě Language zatrhněte volbu Ignore the keyboard when deciding the encoding of new pages. Pro daný web se pak FrontPage chová, jak bych očekával.

Poznámka: Jiné verze FrontPage mohou mít výše uvedené volby pojmenovány odlišně.

Samotný Microsoft o tom píše:

If you do not want FrontPage to verify the default page encoding against your keyboard, select the Ignore the keyboard when deciding the encoding of new pages check box.

trvalý odkaz | komentáře (5)

COLOURlovers je web, na kterém najdete barvy. Pak tam najdete barvy a dokonce tam najdete i barvy.

Na webu COLOURlovers najde webdesigner barvy a barevná schémata. Uživatelé mohou posílat své oblíbené barvy a barevná schémata, hodnotit je. Nechejte se inspirovat.

trvalý odkaz | komentáře (2)

Acid2 Test je určen pro zjištění podpory standardů v internetových prohlížečích. Včera byl konečně publikován. Více na stránce The Acid2 browser test (via The official Acid2 test is there!). Přistoupí Microsoft na výzvu a připraví IE7 tak, aby testem prošel? A projde jím vůbec nějaký současný moderní prohlížeč?

trvalý odkaz | komentáře (6)

Anatoly Papirovsky publikoval další postup na náhradu textu obrázkem. Více v článku na jeho novém blogu Fecklessmind Definitive Solution to Image Replacement.

trvalý odkaz | komentář

Ministerstvo financí spustilo nový web za bratru 7,63 milionu korun. Jak tvrdí nedílnou součástí je i zabezpečení bezbariérového přístupu postiženým občanům k informacím. Jářku není.

Na nezměněné adrese www.mfcr.cz., která návštěvníka přešoupne na www.mfcr.cz/cps/rde/xchg/ se nachází polopřístupný web. Nechci se pouštět do detailní kritiky, ale stačí se podívat na barevný kontrast, na obrázky na pozadí, na nutnost rolovat zleva doprava, na bleší písmo a každý ví, kolik uhodilo.

Ale abych jenom nekřivdil. XHTML transitional web je beztabulkový a formátovaný pomocí CSS (to samozřejmě s přístupností zase tak moc společného nemá). I když občas ujede sémantika kódu, tak i tady je vše skoro v pořádku. Kus práce bylo uděláno. Jenom nevím, jestli je sklenice z poloviny plná nebo z poloviny prázdná.

trvalý odkaz | komentáře (12)

Microsoft chystá od roku 2006 do svých operačních systémů dodávat nové (další) fonty (via Digital Web Magazine). Tyto fonty mají podle Microsoftu vylepšit čitelnost textu na obrazovce monitorů. Podrobnosti najdete v článku The Next Big Thing in Online Type.

V článku také najdete screenshoty, jak budou nové fonty vypadat. Jedná se o fonty nazvané Calibri, Cambria, Candara, Consolas, Constantia a Corbel (patří do MS ClearType Collection)

trvalý odkaz | komentáře (3)

Nechci tenhle odkaz nechávat na páteční linky. Takže doporučuji k přečtení spot Konec W3C prostřednictvím psa II.. Takže přátelé, když se bavíme o validitě, tak každý jeden z nás může mluvit o něčem úplně jiném.

trvalý odkaz | komentáře (2)

Přemíra grafiky na webových stránkách většinou škodí. Nejen co do počtu a rozsahu použitých obrázků, ale taky co se týká velikosti grafických souborů. Jak české vyhledávače optimalizují velikost souborů svého loga?

Někdy mám pocit, že domácí vyhledávače místo na uživatele hledí na prvoplánové zájmy inzerentů. Že to není nejlepší strategie dokazuje celosvětový úspěch Google, který se snaží jít na ruku především hledajícím. A tím vlastně nahrává inzerentům.

Naproti tomu je většina domácích portálů a vyhledávačů infikována virem náš inzerent náš jediný pán. A tato politika navléká vývojářům na oči klapky. Jak jinak si vysvětlit to, co vidíme na jejich stránkách?

Jan Nehasil se v článku Jak rychle se načítají stránky vyhledávačů? na Lupě podíval na objem dat stahovaný z některých vyhledávačů používaných v ČR. Ze souboje vyšlo vítězně subtilní Jyxo.

V komentářích pod článkem jsem zveřejnil výsledek svého rychlého pokusu se zmenšením barevné hloubky obrázků použitých na titulce Seznamu. Z 22 kB jsem se během asi 2 minut optimalizace dostal na 12 kB (55 %). To mě inspirovalo k tomuto spotu.

Loga vyhledávačů

Jak je to s optimalizací grafických souborů loga našich významných vyhledávačů? Z titulky daného vyhledávače jsem stáhnul logo. Zjistil jsem šířku a výšku obrázku, nastavenou barevnou hloubku a počet použitých barev. Obrázky jsem prohnal přes Ulead SmartSaver Pro. Nedělal jsem žádnou brutální optimalizaci za každou cenu. Změna vzhledu obrázku měla být neznatelná. Připomínám, že takto optimalizované obrázky jde ještě dále zmenšit opravou drobných chyb, které při snižování barevné hloubky nastávají.

Tady jsou parametry původních obrázků loga (velikost souborů je v bytech):

Po lehké (rychlé) optimalizaci se velikost souborů změní znatelně k lepšímu:

Jyxo má logo optimalizované tak, že rychlá optimalizace na velikosti souboru přidala. Redbox, Tiscali a Volný si zaslouží také pochvalu. Centrum, Google a Morfeo by mohli trochu přitlačit na pilu a svá loga odtučnit. Černý Petr zůstal v ruce Seznamu a Atlasu. To mě ale vůbec nepřekvapuje. Přitom by stačila asi minuta práce a po síti by proteklo za rok o pár gigabytů méně dat.

Nevím, co si mám o výsledcích myslet, ale zdá se mi, že čím je (domácí) vyhledávač úspěšnější, tak tím víc kašle na běžného uživatele. V tomto případě se jedná o kašlání na objem dat, která si musí uživatel na svůj počítač stahovat. Jako by úspěch zamlžil uvažování v celé firmě. Úsilí se upíná k uspokojení inzerenta a na ostatní věci není čas. Nebo čas je, a protože některé činnosti nikdo nekontroluje (nevyžaduje), tak se prostě nedělají. A přitom zase tolik energie nestojí. Škoda.

trvalý odkaz | komentáře (9)

Delší dobu se zájmem sleduji seriál Hříchy pro šíleného korektora, který pro Interval.cz píše Dalibor Behún. Díl Hříchy pro šíleného korektora - člověk versus psaní číslovek bych použil jako odrazový můstek pro tento spot.

Na internetu poměrně snadno můžete najít správný způsob zápisu času tak, jak je daný pravidly českého pravopisu:

9.57

Oddělení hodin a minut tečkou. Uvedený přiklad znamená čas 9 hodin a 57 minut.

4:50,25

Mezi minuty a sekundy se píše dvojtečka. Setiny (desetiny, tisíciny) se oddělují desetinnou čárkou. Příklad tedy znamená 4 minuty, 50 sekund a 25 setin sekundy.

Poučky uvádí příklady právě tak, jak uvádím výše já. Je zajímavé, že jsem zatím nenarazil na syntézu těchto pravidel. Jak tedy zapsat čas v hodinách, minutách a sekundách? Z výše uvedených pravidel mi vychází tento zápis:

5.45:25

Nějak mi to připadá hodně kostrbaté. Ale asi je uvedený zápis pro čas 5 hodin, 45 minut a 25 sekund správný. Prostě to bude nezvyk. Co si o tom myslíte? Je mnou uvedený zápis korektní?

A ještě jedna poznámka na závěr. Časové intervaly (např. ve sportu) se zapisují z využitím dvojteček (5:45:25).

trvalý odkaz | komentáře (14)

David Špinar publikoval tiskovou zprávu Dobrého webu Portál veřejné správy auditem přístupnosti neprošel. Nadpis je to více než výmluvný.

David v závěru říká: Osobně mě závěr našeho auditu mrzí. Očekával jsem lepší výsledek. Přesto jsem však optimista. Já jsem na Intervalu onehdy napsal: Je patrné, že je Portál veřejné správy ve zkušebním provozu. Zbývá odstranit řadu chyb a nedostatků především v přístupnosti a použitelnosti (Portál veřejné správy České republiky). S odstupem času můžu klidně o obou výrocích říct, že se jedná takové milé eufemismy.

Do projektu jsou napumpovány těžké prachy a další se do té bezedné studny určitě ještě naházejí. A recenzenti si mohou říkat co chtějí. Auditoři mohou auditovat až se z toho poauditují. Psi štěkají a karavana jde dál. Ale třeba to někdo bonzne nějakému televiznímu redaktorovi a bude z toho ještě pár reportáží. Uvidíme.

trvalý odkaz | komentář (1)

Seznamům je možné, stejně jako jiným prvkům, přidělit vlastnost float. Plovoucí prvky je pak možné zobrazit "vedle sebe". Jak na to se můžete dočíst v novém vydání A List Apart: Bulleted Lists: Multi-Layered Fudge.

K řešení bych měl jediný přípodotek týkající se sémantiky. Vedle sebe by se měly umísťovat dva nezávislé seznamy (hrušky/jabka). Článek uvádí rozdělení jednoho seznamu do dvou - položky, které spolu souvisí jsou pak odděleny. Vznikají dva seznamy, i když logicky se jedná o jediný seznam.

trvalý odkaz | komentáře (4)

Jaká je vlastně současná móda webových stránek. Existují nějaké společné znaky, které je možné vypozorovat na tzv. moderních webech?

Jeden kamarád provozuje docela zajímavý web. O web se stará, snaží se, aby byl úspěšný. Už si ho všimli i blogy. Kamaráda zamrzelo, že se někteří blogeři obuli do nemoderního vzhledu jeho webu. Co poradit? Jak vlastně vypadá moderní web?

Pár stránek jsem už viděl a tak si dovolím shrnout pár vizuálních znaků, které jsou společné pro mnoho webů, které chtějí být in.

Jemné barvy

Barvy jsou voleny jemné, tlumené (někdo by řekl vyblité, pardon).

Barevné přechody

Na stránkách se často vyskytují nejrůznější barevné přechody (monochromatický gradient).

Malý počet barev

Na stránce je použito několik málo základních barev. Velmi často pouze 2. Barvy mohou být v několika odstínech. Často je použita šedá (nebo našedlá) barva ve spojení s výraznější barvou (např. oranžová, sametově modrá).

Oddělovací čáry

Oddělovací čáry jsou spíš nevýrazné (barva zapadá do zvoleného barevného schématu). Často tečkované.

Výrazný obrázek

V záhlaví stránky je často použit velký stylový obrázek na pozadí. Pruh horizontálního menu je často na tomto pozadí odlišen změnou jasu pozadí.

Položky menu jako box

Jednotlivé položky menu jsou tvořeny boxem (display: block), který reaguje na a:hover.

Obrázkové nadpisy

Nadpisy jsou často nahrazovány textem ve formě obrázků. Je na kodérovi, aby byl nadpis přístupný.

Nepodtrhávám odkazy

Tohle samozřejmě nedoporučuji! Na mnoha stránkách se tvůrci bojí, že zničí design stránky tím, že budou podtrhávat odkazy.

Nikdy neuškodí, když je webová stránka přiměřeně moderní. Taková stránka může u některých uživatelů výrazně zvyšovat důvěru v daný web. Vždycky ale platí, že forma by měla být podřízena obsahu. A taky platí, že nic se nemá přehánět.

Webdesign může být uměním. Hodnocení vzhledu je do značné míry individuální záležitostí. A co je hlavní, platí skutečnost, že moderní a krásný web nemusí splňovat ani jeden z bodů, které uvádím v tomto spotu.

Jaký je váš pohled na současné trendy ve webdesignu? Co by nemělo, z hlediska vzhledu, chybět modernímu webu?

Souvislosti

• CSS Vault
• css Zen Garden

trvalý odkaz | komentáře (12)

Kolem 90 % pravidel použitelnosti z roku 1986 je stále platných píše Jacob Nielsen v článku Durability of Usability Guidelines.

V letech 1984-1986 sestavovalo letectvo USA pravidla závazná pro návrháře uživatelského rozhraní. Těchto 944 pravidel, až na malé výjimky, platí pořád. Důvod je prostý: lidé se prostě nemění. A pravidla sepsaná před 20 lety běžné lidské chování jenom odráží.

Stará pravidla použitelnosti ztrácí opodstatnění hlavně v případech, kdy jsou silně vázaná na použití konkrétní technologie. Proto je při tvorbě webových stránek nutné myslet na to, že psaní pro web, je psaní pro věčnost.

trvalý odkaz | komentář

Web Link condom si klade za cíl zesměšnit aktuální snahu snížit vliv komentářových spamerů použitím atributu rel="nofollow" (via Search Engine Roundtable).

trvalý odkaz | komentář

Spot Preventing comment spam přináší informaci o podpoře atributu rel="nofollow" u odkazů v Google (via Annes Weblog).

Podpora atributu rel="nofollow" v odkazech si klade za cíl zamezit komentářovým a refererovým spamerům zvyšovat svůj PageRank a tím i své pozice ve výsledcích vyhledávání. Stačí vkládat rel="nofollow" do odkazů v komentářích a Google nebude brát odkaz v potaz. Upravit třeba blogovaci CMS by nemělo být složité. Výrobci už začali reagovat a své aplikace aktualizují.

Vedle Google prý atribut začalo podporovat také Yahoo! a MSN. Důsledky mohou být závažné, jak píše Marek Prokop:

Ještě zajímavější ovšem budou důsledky. Mohou být nepatrné, ale mohou být také mnohem větší, než jaké měl zatím jakýkoli Google dance. Trochu mne děsí jednoduchost, s jakou jde tento atribut v CMS aplikovat na všechny odchozí odkazy a složitost, s jakou ho lze aplikovat správně, tj. jen na odkazy nedoporučené, resp. z neověřených zdrojů.

Dovedete si představit, co by se stalo, kdyby tento atribut plošně použily velké katalogy a zpravodajské weby?

No uvidíme. Otázkou je, jestli tento způsob obrany zabrání spamerům v jejich činnosti. Spíš tomu nevěřím.

Souvislosti

• Kladivo na komentářový spam - Marek Prokop
• Refererový spam - Jiří Bureš

trvalý odkaz | komentáře (12)

Další vydání A List Apart přináší zajímavý článek Big, Stark & Chunky.

Pokud se mluví o poruchách zraku ve spojení s tvorbou webových stránek, tak se lidem často vybaví hlasové čtečky. Ale ne všichni zrakově postižení jsou (naštěstí) nevidomí. Je zde i velká skupina slabozrakých uživatelů, kteří jsou schopni poměrně dobře vidět. Jak jim pomoci při práci s webem můžete najít v článku Big, Stark & Chunky.

trvalý odkaz | komentáře (7)

Jak se postavit ke globálním statistikám zastoupení prohlížečů? Má význam tyto globální statistiky brát v potaz při návrhu vlastního webu?

Přelom roku přináší množství statistik. Mezi nimi jsou také statistiky globálního zastoupení jednotlivých prohlížečů. Nechci se teď zabývat tím, do jaké míry tyto statistiky odráží skutečný stav. Každá statistika totiž vychází jen z omezeného vzorku. Postihnout skutečnost by totiž nejpřesněji postihlo pouze sledování všech webových stránek. A to není v možnostech žádného měření. A koneckonců to ani není účelné.

Ještě bych rád vysvětlil, co myslím v kontextu tohoto článku globálností a lokálností statistik:

Globální statistika

statistika postihující velký rozsah různých stránek, např. statistiky OneStat.com, nebo statistiky domácích statistických serverů jako je TOPLlist nebo Navrcholu.

Lokální statistika

Statistika jednoho webu nebo skupiny několika málo webů.

Články o globálních statistikách často vyvolávají bouřlivé diskuse především příznivců statistikou dotčených prohlížečů. Někteří hloubaví tvůrci webů se zase trápí otázkou vztahu těchto globálních statistik k jejich webu. Dokud budou existovat statistiky, dotud budou trvat tyto stavy.

Jediný způsob, jak může tvůrce rozptýlit své obavy, je pohled do logu vlastního webu. Každý web je totiž jedinečný. Neznám web, který by měl statistiky stejné jako jsou ty globální. Pokud budete na svém webu řešit, jaké prohlížeče podporovat, berte v potaz nejen globální statistiky, ale hlavně správně interpretujte statistiky vlastního webu.

Tady je namístě malá vsuvka. Osobně prosazuji názor, že obsah každé webové stránky by měl být interpretovatelný na co největším počtu reálných zařízení. To samozřejmě neznamená, že musí být na všech zařízeních zobrazen úplně stejně (ne všechna zařízení totiž zobrazují). Otázkou, na kterou je třeba si odpovědět, je, které prohlížeče mají danou stránku zobrazovat (skoro) stejně. Tady ale není zcela na místě opírat se pouze o globální statistiky. Ty mohou mást. Stejně tak mohou mást lokální statistiky jiných webů.

Pozor ale na správnou interpretaci statistik vlastního webu. Ve statistikách je totiž pouze odraz stávajícího stavu. Jsou tam jenom ti návštěvníci, kteří na web přišli. Ne ti, kteří by na něj třeba mohli nebo chtěli přijít. To, co jsem napsal o co největším počtu zařízeních, na kterých je daný dokument zobrazitelný do značné míry volbu usnadňuje. Splněním podmínky totiž rozšiřujete okruh možných návštěvníků.

To, že ve statistikách máte jen půl procenta přístupů třeba z Firefoxu neznamená, že je Firefox tak málo užívaným prohlížečem. Totéž platí i o uživatelích starých prohlížečů. Třeba rozšíření podpory o prohlížeč s číslem verze o jedno nižší, než je aktuální, zvýší návštěvnost dvojnásobně (a zisky ještě víc). Ale pozor. Jako ve všem je totiž i ve statistikách, jejich výkladu a následných krocích, potřeba najít tu správnou míru.

Pokud čekáte statistiku webu converter.cz roku 2004, tak je tady:

1. IE 6 - 45 %
2. RSS čtečky a spol. - 24 %
3. Mozilla - 6 %
4. Opera - 6 %
5. IE 5.0 - 5 %
6. Firefox - 5 %
7. IE 5.5 - 5 %
8. Netscape - 2 %

Vše je zaokrouhleno na celá čísla. Ostatní zařízení mají méně než 0,2 %.

trvalý odkaz | komentáře (10)

Různí uživatelé nahlíží na prohlížeč různým způsobem. Ne každý uživatel se chová, jak by autor stránek očekával.

Před pár týdny jsem vedl zajímavý rozhovor s klientem, pro kterého chystám redesign webu. Je to poměrně pokročilý uživatel internetu. Mluvili jsme jsme mj. o možnostech, jaké přináší použití CSS. Překlikl jsem na alternativní vzhled a ukázal jsem, jak bude vypadat tiskový výstup. Klient pokyvoval hlavou a pak mi položil otázku, které jsem chvíli rozuměl jinak než tazatel. Klient se zeptal, kde na stránce zamýšlím umístit odkaz Verze pro tisk. Znovu jsem pohovořil o výhodách CSS. O nižších nákladech na jedinou verzi kódu, který je použitelný pro více zařízení. Z výrazu klienta mi došlo, že otázka směřovala k jinému cíli. Klient, ač mladý pragmatik, který dobře řídí úspěšnou firmu, nepoužívá při tisku webových stránek možnosti prohlížeče. Nemá rád stránky, které (podle něj) neumožňují tisk. Když tiskne, hledá (jen) na stránce odkaz, pomocí kterého stránku vytiskne.

Myslím, že uživatelů, kteří vidí hlavně/jen obsah, je určitě víc. Mnoho z nich vůbec neví, že je něco jako prohlížeč. Oni vidí jen ten internet. To samozřejmě není špatně. Je to prostě tak. Oni vlastně prohlížeč nepotřebují. Přirovnal bych prohlížeč k oknu. Člověk nevěnuje pozornost oknu, ale tomu, co vidí za oknem.

Tahle paralela vysvětluje nejrůznější "nepochopitelné" chování uživatelů. Třeba zadávání odkazu do vyhledávacího pole vyhledávače místo do adresního řádku prohlížeče. Někdy se mi zdá, že by výrobci prohlížečů mohli místo prázdné stránky nabídnout stránku, která by obsahovala vycentrované textové pole a tlačítko Go. Prostě takový adresní řádek přes celé okno prohlížeče.

Možná je podobenství prohlížeče jako okna odpovědí na žabomyší války příznivců toho či onoho prohlížeče. Běžným uživatelům je to většinou fuk. Když jim některá stránka nefunguje kvůli prohlížeči, tak chybu zhusta nehledají v prohlížeči, ale jinde. Je to jako debata architektů o tom, který tvar okna je nejlepší. Běžnému člověku se jedná hlavně o to, co vidí z okna. Samozřejmě chce něco vůbec vidět. Špatného architekta zajímá jen to okno. Dobrý architekt ale vidí nejen okno, ale hlavně to, co je za tím oknem. Vidí celý dům, bere v potaz jeho okolí, počítá s obyvateli domu. A podle toho navrhuje.

trvalý odkaz | komentáře (14)

Pomocí pseudo-elementů :before a :after je možné vkládat textový obsah definovaný ve vlastnosti content před nebo za element, pro který je pseudo-element definován. Pomocí escape sekvence \A respektive \00000a by mělo být možné text zalamovat. Jaká je ale podpora této vlastnosti v současných prohlížečích?

Pro web conVERTER jsem před pár dny připravil stylopis pro tiskový výstup. Do tisku jsem chtěl pod hlavní nadpis vložit text copyrightu. Nakonec jsem neuspěl, jak jsem očekával. Použil jsem následující kód CSS:

#titulek h1:after {

font-size: 180%; font-style: normal;

content: "Copyright (C) 2004 Jiří Bureš"; font-size: 10pt; font-weight: normal;}

Pokud prohlížeč dobře podporuje pseudo-element :after ve spojení se zalomením pomocí escape sekvence \A měl být pod nadpisem text copyrightu napsaný menším písmem. Jak se s touto konstrukcí vypořádali nejnovější Windows prohlížeče?

Internet Explorer 6.0

Tady není o čem psát. IE generování obsahu pomocí :before a :after nepodporuje.

Mozilla Firefox 1.0

Firefox obsah generovaný pomocí :before a :after zobrazí. Nereaguje ale na escape sekvenci \A. Firefox neodřádkuje.

Opera 7.51

Opera jako jediná z testovaných prohlížečů obstála.

Jak je na tom Váš prohlížeč ukáže testovací stránka pseudo-elementu :after. Testoval jsem jenom 3 prohlížeče pod Windows. Budu rád, když do komentářů přidáte výsledky testování ve Vašem prohlížeči.

trvalý odkaz | komentáře (20)

Element link zná snad každý tvůrce webových stránek. Ne každý ale zná všechny možnosti, které link autorovi nabízí. Na začátek jenom zopakuji, že link patří do hlavičky stránky, tj. do elementu head.

Styl stránky

Asi nejčastější využití elementu link je právě připojení externího souboru stylů:

<link rel="stylesheet" type="text/css" media="screen" href="layout.css">

Uvedený příklad připojuje ke stránce soubor kaskádových stylů layout.css, který bude použit pro zobrazení na obrazovce.

Navigace

Element link je možné využít pro rozšíření navigačních možností webu.

<link rel="Start" href="/sekce/">

Úvodní stránka sekce.

<link rel="Prev" href="/sekce/stranka-1.htm">

Předchozí stránka otevřené stránky.

<link rel="Next" href="/sekce/stranka-3.htm">

Následující stránka.

<link rel="Contents" href="/sekce/obsah.htm">

Odkaz na obsah sekce (webu).

<link rel="Help" href="/napoveda.htm">

Stránka s nápovědou.

V atributu rel je dále možno použít hodnoty Index (rejstřík), Glossary (slovníček), Copyright (autorská práva), Chapter (kapitola), Section (sekce), Subsection (podsekce), Appendix (dodatek, přílohy), Bookmark (záložka).

Musím říct, že ne každý prohlížeč umí navigační potenciál elementu link využít. Třeba Opera nabídne uživateli položky ve menu Navigace > Webová navigace.

Autor webu

Návštěvníkům lze nabídnout adresu autora webu:

<link href="mailto:autor@example.com" rev="made">

RSS, RDF

Do stránky lze vložit informaci o souboru RSS:

<link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.example.com/rss.xml">

Jazyková verze

<link rel="alternate" href="/sekce/page-2.htm" hreflang="en" title="English version">

Výše uvedený zápis nabídne uživateli anglickou verzi otevřené stránky.

Místo závěru

Jak už jsem napsal, ne všechny prohlížeče podporují element link. A ani ty nejmodernější jej nepodporují úplně. Jaké máte Vy zkušenosti s elementem link? Používáte jej na svých stránkách? Využíváte jeho možnosti, když brouzdáte webem?

trvalý odkaz | komentáře (11)

Uživatelé nemilují reklamu. Zvlášť některé postupy používané v reklamě na webu přímo nenávidí. Jacob Nielsen v článku The Most Hated Advertising Techniques shrnuje ty nejzavrženíhodnější z nich.

Co tedy nejvíc uživatelům na reklamě vadí? Podle více než 600 respondentů výzkumu z roku 2004 to je:

• Vyskakující (pop-up) okna - 95 %
• Zpomalení načítání stránky - 94 %
• Fíglem nutí kliknout na reklamu - 94 %
• Chybějící tlačítko pro zavření - 93 %
• Překrytí obsahu stránky - 93 %
• Není patrné, na co daná reklama je - 92 %
• Odsouvání obsahu - 92 %
• Reklama zabírá většinu stránky - 90 %
• Blikání - 87 %
• Létání reklamy po stránce - 79 %
• Samovolné přehrávání zvuků - 79 %

Je zajímavé, že podobně dopadly podobné výzkumy z předchozích dvou let. Uživatelé tyto techniky přirozeně nenávidí, protože jim brání v tom, kvůli čemu na stránky přišli. A uživatelé se brání. Třeba tím, že blokují vyskakující okna. V dubnu 2003 používalo 26 % uživatelů software blokující pop-up okna nebo reklamu. V září 2004 to už bylo 69 % (tady by mě zajímalo, kde ta čísla Nielsen vzal - podle mě to bude míň lidí, ale to není tak podstatné). Lidé, kteří na svém webu umísťují by si měli uvědomit, že uživatelé přenáší svou zlobu ze špatné reklamy na inzerenty a na weby, na kterých špatná reklama je. Měli by si rozmyslet, do jaké míry obětují krátkodobé cíle dlouhodobým.

Reklama je pro mnoho webů životně důležitá. Přináší peníze, které je následně možné investovat do webu. Takové snažení by ale nemělo být kontraproduktivní. Aspoň trochu je možné zlobu návštěvníků otupit, pokud bude reklama jasně:

• oznamovat co se stane po kliknutí na reklamu,
• souviset s tím, co uživatel právě dělá,
• říkat já jsem reklama,
• oznamovat o čem je,
• nabídnout zřetelnou možnost opustit stránku.

Inzerenti by měli začít tlačit na reklamní agentury, aby se vyhýbali postupům, které sice přináší vyšší míru prokliku, ale pravděpodobně nepřivádí zákazníky, ale zmatené nezkušené uživatele (třeba bez koruny v kapse).

Nenávist ke špatné reklamě by měla být poučná i pro autory webů. Co nemají rádi uživatelé na reklamě, nemají rádi i na normálních stránkách. Takže by se autoři měli vyvarovat vyskakujících oken, obrovských (pomalých) stránek, lákavých odkazů na "duté" stránky atd.

trvalý odkaz | komentáře (10)

V novém A List Apart 190 najdete návod, jak vytvořit blok (může obsahovat třeba obrázek) z obou stran obtékaný dvěma sloupci textu. Podívejte se na článek Cross-Column Pull-Outs, který napsal Daniel M. Frommelt.

trvalý odkaz | komentáře (3)

David Špinar napsal velmi užitečný spot Přístupné PDF.

Některé věci, které jsem dosud dělal při tvorbě PDF, jsem asi nedělal úplně správně. PDF sice dělám nástrojem PDF Maker, ale kvůli zmenšení velikosti je proženu přes PDF Distiller. Tenhle krok sice výrazně zmenší většinu PDF dokumentů, ale s velkou pravděpodobností zruší veškeré prvky, které zlepšují přístupnost PDF dokumentů. Tak teď nevím. Vsadit na velikost (tj. rychlost stahování) nebo na přístupnost?

Souvislosti

• SEO pro PDF - Jiří Bureš
• K čemu PDF - Jiří Bureš
• Jákobova brána - Jiří Bureš

trvalý odkaz | komentáře (4)

Není to nic nového, ale je to rozhodně poučná ukázka využití kaskádových stylů. Koneckonců posuďte sami na Remote control CSS. Russ Weakley přidává podrobné vysvětlení.

Souvislosti

• Listamatic
• Seznamy od Listamatic
• Selectutorial

trvalý odkaz | komentáře (7)

Při úpravě stránky s formulářem (hlášení chyb) jsem narazil na rozdílný způsob reakce prohlížečů na kliknutí na popisek u rozbalovacího seznamu.

Pravděpodobně znáte tento zápis kódu pro rozbalovací seznam a jeho popisek:

<label for="Version">Kterou verzi používáte?</label><br>

<select id="Version">

<option>1.25</option>

<option>1.30</option>

<option selected>1.40</option>

</select>

Prohlížeč by měl po klepnutí na popisek přejít do rozbalovacího seznamu. Prohlížeče se ale chovají různě.

MS IE6/Maxthon

Ze všech moderních prohlížečů se zachová nejhůř. Seznam sice označí očekávaným způsobem (předá focus a položku podbarví), ale nereaguje na nastavení vybrané položky (selected) a zvolí první položku rozbalovacího seznamu.

Firefox 1

Firefox taky není bez poskvrny. Správně označí seznam a ponechá výběr na vybrané položce. Položku ale nepodbarví. Podobně se choval Firebird 0.7 a některé další testované prohlížeče na jádře Gecko.

Opera 7.51

Opera v této verzi pracuje bez problémů standardním způsobem. Stejně se chovala Opera 7.

Opera 6

Tato verze Opery je na tom nejhůř. Vůbec nereagovala na klepnutí na label.

Rozbalovací seznam po klepnutí na popisku v moderních prohlížečích.

Popsané chování u nejnovějších verzí prohlížečů není nijak fatální. Programátoři alternativních prohlížečů si s touto funkcionalitou poradili celkem dobře. Na druhou stranu si troufám tvrdit, že většina uživatelů vůbec netuší, že se dá kliknutím na popisku vybrat formulářový prvek. Autoři webů jim v tom taky nijak zvlášť nevychází vstříc. Málokdo z nich totiž label používá.

Souvislosti

• Lepší formuláře
• Forms in HTML documents

trvalý odkaz | komentáře (8)

Je tady nový A List Apart 189: Invasion of the Body Switchers. Podívejte se, jak pomocí JavaScriptu a CSS přepínat styly (mj. pro zlepšení přístupnosti a změnu vzhledu tiskového výstupu).

trvalý odkaz | komentář

Na stránce TTW WYSIWYG Editors najdete rozsáhlý seznam WYSIWYG HTML editorů, které se spouští ve webovém prohlížeči (via Webapper Blog). Seznam komerčních i nekomerčních aplikací je doplněn základními charakteristikami každého projektu.

trvalý odkaz | komentář

Vetsina pocitacu je dnes bezne vybavena mysi. To neni prekvapujici zjisteni. Prekvapujici zkusenost muze byt, pokud na pocitaci mys neni, nebo kdyz mys neni funkcni. Pohyb po mnoha webovych strankach se pak stava opravdovym mucenim. A to i pro zkuseneho uzivatele.

Na tomto miste bych chtel omluvit nepouzivani nabodenicek v tomto spotu. Stojim totiz na chodbe Slovenskej poľnohospodárskej univerzity v Nitre, kde ma zena prave sklada zkousku. Divili byste se, ale na slovenske klavesnici chyby nektere ceske znaky (ahoj Rony). A ja se zase divim, jak se vylepsil pristup k pocitacum od dob mych studii.

Abych dokoncil uvodni myslenku. Mnoho zkusenych uzivatelu internetu vi, ze se po odkazech na webove strance da pohybovat pomoci klavesy Tab respektive Shift+Tab (pohyb tak rikajic v protismeru). Vetsina uzivatelu to podle me ale urcite nevi. A ti jsou bez mysi browse-invalidni. Hodne uzivatelu taky treba pracuje na notebooku a ten je bez externi mysi taky dost spatne pouzitelny - ne kazdy je zvykly na ty ruzne simraci tabulky a ty male postevacky uprostred klavesnice.

Mnoho webovych stranek ale neni na bezmysi ovladani pripraveno. Temer zadna (kdyz tak me opravte) neni na ovladani z klavesnice testovana.

Nez se uzivatel bez mysi dostane na pozadovany odkaz trva to casto i nekolik desitek klepnuti na klavesu Tab. A to je dost otravne.

Hodne pomuze, kdyz je stranka optimalizovana, tak rikajic, mimochodem. Vhodnou strukturou kodu (tady pomaha pouziti beztabulkoveho CSS layoutu) nebo ocesanim stranky o zbytecny balast (nadbytecna nebo slozita navigace apod.).

A jedna poznamka na zaver. Vyzkousejte si pouziti vlastnich stranek s mysi v zasuvce. Mozna vas tato tortura primeje si priznat pravdu (treba o prebujele navigaci). Pekny pozdrav ze Slovenska.

trvalý odkaz | komentáře (12)

Pohádka o zlaté rybce vypráví příběh o starém rybáři, který ulovil zlatou rybku. Za navrácení svobody postupně plnila zlatá rybka rybáři tři přání. Chamtivá rybářova žena použila první dvě přání tak špatně, že posledním přáním vrátila škodolibá zlatá rybka věci do původního stavu. Tolik pohádka o zlaté rybce.

Tvorba webu je někdy jako rybolov. Autor postupně tvoří stránky, na které chce ulovit návštěvníky. Jeho sítí jsou vyhledávače. Každá nová stránka zvětšuje velikost sítě. S každou stránkou přichází o něco víc návštěvníků (počet návštěvníků je daný taky počtem rybek v moři). Čas od času se podaří ulovit zlatou rybku.

Bingo!

Zlatá rybka je stránka, která po zveřejnění začne přivádět najednou velký počet návštěvníků. Poznáte to zčista jasna na návštěvnosti. Návštěvníci víc reagují a posílají více emailů. V nejlepším případě se návštěvníci změní v solventní zákazníky, věrné čtenáře nebo obdivovatele.

Zlatou rybku můžete chytnout nejen do sítě, ale někdy stačí prut, na který napíchnete vhodnou návnadu. Před pár dny byl používán červ rodu Esterus Ladus. Rybáři totiž často ví jakou návnadu použít. Ví co rybkám chutná, po čem doslova šílí. Někdy ale uvízne zlatá rybka v docela obyčejné síti. Prostě na web přidáváte novou stránku a najednou začnou chodit emaily na jediné téma. Na téma dané stránky. Čert ví, která stránka je ta pravá.

Nedělejte plastiky nosu

Autor by si měl uvědomit, že není dobré se zlatou rybkou příliš laškovat. Návštěvníci nejsou rádi, když je někdo tahá za nos. Chtějí získat takové informace, aby byli spokojení. Očekávají, že když pošlou email, tak rychle dostanou uspokojivou odpověď. A to si vyžaduje autorovu zodpovědnost.

Když napíšu stránku, na které slibuji holky a místo toho nabídnu vdolky, nemusím se setkat s uznáním. Zlatá rybka se mi může pomstít.

trvalý odkaz | komentáře (3)

Čísla v nadpisu stručně charakterizují mou webdesignerskou cestu. Vztahují se k počtu sloupců layoutu stránek tak, jak jsem je preferoval. A myslím, že docela dobře vystihují i můj názor, že v jednoduchosti je síla. A platí to i pro tvorbu webových stránek.

Nejsem demagog

Samozřejmě že nejsem zaslepený demagog, který by teď chtěl začít hlásat, že pro všechny webové stránky stačí jeden sloupec. Layout je nejen věcí skutečných potřeb, ale v reálném světě především záležitost identifikace s dalšími podobně zaměřenými weby. Málokomu se totiž při návrhu webu podaří překročit vlastní stín (natož aby překročil evoluční stín ostatních webdesignérů).

Dovolím si ale tvrdit, že je možné každou stránku zjednodušit. Ořezat zbytečnosti, ubrat na grafice a tím bez zdůrazňování zdůraznit hlavní obsah.

Tři sloupce a více

Když jsem začínal s tvorbou stránek, tak jsem podvědomě toužil dostat na stránku co nejvíc informací. Chtěl jsem, aby každá informace byla vidět bez nutnosti rolovat stránkou dolů. Vědomí mi pak velelo, abych přidával další odkazy na byť jen okrajově související stránky. Logicky mi pak vyšla stránka se třemi sloupci (někdy i více). Taková klasika. Vlevo navigace, uprostřed obsah (nejlépe s několika obtékanými rámečky uvnitř) a vpravo pak další sloupec např. pro související odkazy. Výsledkem byl silný informační šum. Informační smog dusící uživatele.

Dva sloupce stačí

Když jsem připustil, že uživatel po příchodu na stránku (většinou přes vyhledávače) hledá obsah, který co nejvíc odpovídá zadanému dotazu (případně textu odkazu), tak mi bylo jasné, že ten obsah musí především vidět. Souvislosti (navigace, související odkazy apod.) jej začnou zajímat až potom, co rychle rozpozná cíl svého pátrání. Pak teprve na stránce zůstane. Pak si přečte její obsah a až potom bude hledat souvislosti.

Z tohoto poznání mi vyšlo, že jeden sloupec můžu klidně oželet. Jeho obsah můžu vhodně rozmístit po zbytku stránky (souvislosti z vlastního webu třeba do kontextového menu doleva, externí odkazy na konec hlavního obsahu nebo do textu stránky atd.).

Jedna a půl nebo i méně

Docela dobře je často možné ušetřit místo na stránce i nervy uživatelů zmenšením plochy kontextové navigace. Místo sloupce s několika málo položkami poslouží obtékaný navigační box. Pokud je dostatečně odlišený od okolního textu (nejen barvou, ale třeba i orámováním a vhodným okrajem), ušetří se místo, které by jinak zůstalo pod kontextovou navigací prázdné.

Z toho všeho mi vychází jednosloupcová stránka s globální navigací nahoře, s obsahem přes celou šířku jediného sloupce. Stránka s obtékanou kontextovou navigací a se souvisejícími odkazy v textu stránky nebo (a) na konci obsahu. Dole je místo pro servisní odkazy (kontakt na autora, copyright, mapa webu, prohlášení o přístupnosti apod.).

Není typických uživatelů

Tohle všechno co jsem psal, nikomu nenutím. Jenom se svěřuji. Každý na to může mít svůj názor. Lidé nejsou stejní. A neexistuje žádný typický uživatel. Neexistuje žádný pan Průměrný, žádná slečna Běžná nebo paní Obyčejná. Hodně lidí má ale jedno společné. Jsou líní. Nechtějí hledat jehly v kupkách sena.

Čím víc se ale internet dostává mezi lidi, tak tím se víc snižuje zastoupení mladých lidí, kteří jsou schopní vstřebat informační šoky linoucí se z prohlížečů. Zjednodušme jim život.

trvalý odkaz | komentáře (19)

Víťa Dlouhý včera zveřejnil odkaz na (jak sám píše volný) překlad článku Webové standardy – více než jen beztabulkový web (autor Russ Weakley). Spolu s ním se na překladu podíleli Lukáš Mačí a David Špinar.

Článek je důležitý pro všechny, kteří chtějí mít svůj web co nejvíce odpovídající standardům. Anglický originál Web standards – more than just 'table-free sites' přece jen byl pro mnohé domácí autory těžce stravitelný. Proto je namístě poděkovat autorům českého překladu.

trvalý odkaz | komentář (1)

Stačí být pár hodin unplugged (Invex 2004) a už se něco semele. Jiří Kosek napsal pro Interval kontroverzní úvahu Proč nepoužívám XHTML.

Takovou komentářovou smršť (někdo říká sociologickou studii) na Intervalu hned tak neuvidíte. Není se čemu divit. Když někdo jako J. Kosek napíše, že používá HTML místo XHTML, tak to spoustu lidí nadzvedne - v této souvislosti mě napadá rčení poturčenec horší Turka.

Nechci rozebírat svou stranickou příslušnost (tzn. jestli s článkem souhlasím nebo jsem proti). Jenom chci poukázat na jednu věc. Když se podíváte na biblické desatero, nebo když si přeříkáte pár přísloví, tak vždycky na nich (co by znalci dané problematiky) najdete nějaké výjimky. Detaily, které tyto obecné pravdy popírají. Myslím si, že vznikaly tak, aby měl prostý člověk (kterých je většina) snadné vodítko a nemusel nad každou situací hodiny dumat. Lepší bylo šestinedělce říct, že nemá chodit dojit krávy, než ji složitě vysvětlovat, co by všechno musela udělat, aby neublížila krávě nebo sobě.

V každém oboru lidské činnosti jsou lidé, kteří nové věci zavádí a lidé, kteří je praktikují. Praktik většinou nemá čas se věnovat vymýšlení. Je pro něj výhodnější ověřené postupy užívat (tím neříkám, že jsou jedni lepší a druzí horší).

V článku J. Koska vidím jedno nebezpečí. V běžných lidech vyvolá pocit, že HTML je to jediné správné a XHTML je na nic. A to kvůli nynějším okrajovým nedostatkům v implementaci XHTML, které jde řešit mj. za cenu ustoupení od normativního purismu. Takový pocit totiž běžný čtenář, neznalý všech detailů získá. Jak běžnému zmatenému tvůrci vkládá do úst Petr Staníček:

Kosek taky říká, že to XHTML je blbost a sám taky používá HTML a tabulkovej layout, na tom něco bude, že jo mámo…

Je vhodné správně používat platné normy. Která norma je ale v dané situaci nejvýhodnější? Možná bych se taky zamyslel, jestli je lepší udělat krok stranou nebo krok zpět.

Souvislosti

• Proč nepoužívám výtah - Petr Staníček
• XHTML a HTML - Dušan Janovský
• Bohové jsou šílení: Jiří Kosek nerad XHTML - David Grudl
• Jiří Kosek popraven revolučním XHTML výborem - Marek Prokop
• Jirka Kosek o XHTML - Jan Bien
• Xmeni versus hatmatílci - Robert Madaj
• HTML nebo XHTML, toť otázka - Miloslav Lešetický
• Hlavně pište čitelně - Tomáš Hodboď
• XHTML místo HTML - Petr Weida
• XHTML v HTML - Jan Řezáč
• Webdesignerské mozky divo bijú - Honza Hučín

PS

Poradíte mi, kde na W3C najdu kompletní specifikaci XHTML 1.0 (ne ten spíš rozdílový dokument XHTML 1.0 The Extensible HyperText Markup Language)?

trvalý odkaz | komentáře (2)

Ke komentáři Pavla Kouta u Pixyho spotu Můj první příspěvek do Zenové zahrádky bych měl malý přípodotek.

Každý kdo vytváří webové stránky by měl vědět, že prakticky nemůže ovlivnit, na jakém zařízení bude stránka prohlížena. Veškeré texty stylu optimalizováno pro IE 6 a rozlišení 1600 × 1200 jsou k ničemu. Pavel Kout správně připomíná, že Windows XP mají širší posuvníky než starší Windows. A já dodávám, že uživatel může mít třeba nastavený jiný motiv (schéma) a nebo si může nastavit svou vlastní velikost posuvníku. Spoléhat se na to, že něco je obvyklé se nemusí obejít bez následků.

Protože předpokládám, že čtenáři tohoto blogu ví, že stránky se navrhují tak, aby byly bez (zásadních) problémů čitelné v libovolném prohlížeči webových stránek, tak se omlouvám za nošení sov do Atén a dříví do lesa.

trvalý odkaz | komentáře (4)

D. Keith Robinson v článku Guidelines for Linking přináší svůj názor na správný způsob zápisu odkazů. Vybírám tato pravidla:

Podtrhávat odkazy v obsahu dokumentu

Podtržené odkazy jsou jedním z hlavních standardů, na které jsou návštěvníci zvyklí. Nepodtržený odkaz = neviditelný odkaz.

Odkazy musí vypadat jako odkazy

A opět: nerozpoznaný odkaz jako by ani nebyl. Pokud uživatel pozná, že text je odkazem, má tendenci na odkaz kliknout.

Navigace by měla být vidět

Navigace by měla být vhodným způsobem odlišena od zbytku stránky. Může se stát, že uživatel neodliší, co je obsah a co je navigace, klikne a nestačí se divit, kam se dostal.

Odkazy by měly mít náležitý text

Text odkazu by měl odpovídat odkazované stránce. Vicezdemie se zakazuje.

Používejte atribut title

V mnoha případech je vhodné použít atribut title, který může pomoci uživateli v rozhodování, zda na odkaz klepnout či nikoli.

Odlišujte navštívené odkazy

Odlišení navštívených odkazů změnou vzhledu pomáhá uživatelům v orientaci.

trvalý odkaz | komentáře (4)

Mastery

mistrovské ovládání, suverénní znalost.

Mystery

tajemství, záhada, zvláštnost, tajemnost.

Misery

utrpení, trápení, mizérie.

Jacob Nielsen vydal před pár dny další Alertbox. Tentokrát se v článku Mastery, Mystery, and Misery: The Ideologies of Web Design věnuje třem přístupům (chcete-li ideologiím) k tvorbě webu. Rozhodování o umístění navigace jsou totiž z pohledu použitelnosti podružná. Hlavní roli totiž hraje ideologie použitá při tvorbě.

Mastery

Zrod myšlenky hypertextu sahá nejméně do poloviny minulého století. Hypertext dává uživateli do rukou nadvládu nad obsahem. Použitelnost a jednoduchost je cestou ke zvýšení moci uživatele. Dodržování standardů a zvyklostí upevňuje v uživateli tento pocit. Jednoduché a zřetelné uživatelské rozhraní dovoluje uživateli, aby se zaměřil na splnění svého úkolu.

Typickými představiteli webů mastery ideologie jsou weby mnohých vyhledávačů nebo třeba významné e-shopy.

Mystery

Hodně webdesignerů dává přednost vzrušení ze vzhledu vlastních webů. Nadávají na nudný vzhled mastery-webů. Jejich weby jsou ale často spíš hezké než užitečné. Zapomínají, že sami tráví se svým webem dlouhé dny a zvykají si tak na jejich vzhled. Naproti tomu uživatel na jejich webu zůstává jen několik minut a pak odchází. Není vůbec odvázaný z toho, že se má učit zase něco nového.

Mnohé testy použitelnosti (např. Flash and Web-Based Applications) jasně ukazují chybné uvažování milovníků mystery-webů. Existují ale samozřejmě případy, kdy je použití prostředků mystery-ideologie na místě (např. dětské weby).

Misery

Takle ideologie se nese ve znamení útisku. Vyskakující okna, titulní vstupte-stránky, stránky, které maximalizují prohlížeč a vypnou menu a nástrojovou lištu. Autoři dělají z návštěvníků nesvéprávné jedince. A věřte, že nikdo se sebe nechce dělal blbce.

A vítězem je

Podle Nielsena (a já s ním souhlasím) samozřejmě mastery. Nechme dělat uživatele to co chce, protože on sám ví nejlépe, co chce udělat. Uživatel vidí ve webu především nástroj (ne prostředí).

trvalý odkaz | komentáře (3)

Dnes jsem zachytil informace o zajímavé studii What We Saw When We Looked Through Their Eyes (via Digital Web Magazine a Web Standards Project).

Článek se zabývá tím, jak se pohybují oči po webové stránce. Zjištění mohou být zajímavá pro všechny tvůrce webových stránek, kteří si lámou hlavu kam umístí navigaci, kam hlavní obsah nebo reklamy. Vše je doplněno názornými obrázky. Doporučuji k přečtení.

trvalý odkaz | komentáře (5)

ALA 187 přináší v článku Pocket-Sized Design: Taking Your Website to the Small Screen spoustu námětů, jak tvořit stránky (také) pro malé obrazovky kapesních počítačů.

Mimochodem jsem si včera chvilku hrál s Google na mobilu (skrze WAP). Byla to rozhodně zajímavá zkušenost. Zajímavou zkušeností pro mnohé webdesignéry by bylo, kdyby se na své výtvory podívali na nějakém tom kapesním počítači. A opravdu silným zážitkem by bylo, kdyby za nimi stál zadavatel.

trvalý odkaz | komentáře (7)

Honza Hučín popisuje ve spotu WYSIWYG? Často stačí Word zajímavý způsob, kterým využívá Word k psaní (předpokládám že) validního HTML. Ve Wordu normálně píše a formátuje. Na závěr spustí makro, které formátování převede do HTML kódu. Zdrojový kód je k mání.

Při čtení článku mě napadla taková myšlenka. Word je rozšířený skoro všude. Spousta lidí jej jakž takž ovládá. Všichni znalí často žehrají, jaké hrůzy z Wordu lezou. Co takhle vyrobit pro Word makro, které mnoho problémů vyřeší. Představte si:

1. Vytvořit nástrojovou lištu. Říkejme jí třeba i-publikování.
2. Na liště tlačítko pro nový i-dokument.
3. Na liště by byla jen povolená formátovací tlačítka.
4. Po klepnutí na tlačítko nový i-dokument by se ostatní lišty a menu skryly/znepřístupnily (až po uložení by se stala tlačítka dostupná). BFU by nemohl tak snadno provádět různá formátovací zvěrstva.
5. Před vytvořením dokumentu by aplikace otázala (formulářem) na nadpis, sekci, klíčová slova, popis atd.
6. Uživatel by vesele psal a formátoval ve známém prostředí.
7. Pak by dal uložit intranet-dokument. Na pozadí by proběhly veškeré transformace zapsaného textu.

Napadají mě další fíčury. Otevírání uložených dokumentů, odeslání e-mailem k publikování atd. Možná by to všechno dobře fungovalo. Na druhou stranu je touha psavců, aby jejich dokument na internetu vypadal přesně tak, jak jej oni geniálně vytvořili, nebetyčná. Škoda, že Word nemá nějaký přepínač (třeba -bfu, který by skryl 95 % možností a nabídl jen těch pár opravdu užitečných.

trvalý odkaz | komentáře (6)

Jak je to dlouho, co jste naposledy byli na stránkách firmy Microsoft? Já se tam dneska podíval po přečtení článku Microsoft Advances. Microsoft si opravdu hrábl na dno, když přistoupil ke změnám:

• Poměrně výrazná změna vzhledu webu - ne vše zařezává jak by mělo, ale došlo k výraznému zjednodušení vzhledu.
• Zmenšení počtu tabulek použitých pro rozložení obsahu - z původních asi 40 tabulek (ty jsou ještě na české verzi webu) najdete v kódu pouhých 7.
• Zrušení některých webdesignérských prasárniček (roztahovací gify, zrušení proprietálních atributů apod.) - nevím ale proč některé zůstaly (např. nepoužívání seznamů pro seznamy).
• Zmenšení velikosti kódu - mj. důsledek předchozích opatření a komprimace kódu.
• Obrázky mají dokonce alt - a světe div se, je jich jenom 13.

Web Microsoftu samozřejmě pořád není možné považovat za vzor všech webdesignerských ctností a ukázku správných postupů. Pořád ještě není bez chyb (validátor odhalil půl stovky chyb). Je ale patrný krok správným směrem a věci se pomalu dávají do pohybu.

trvalý odkaz | komentáře (15)

Roger Johansson vyjmenoval v článku Web development mistakes (via Digital Web Magazine) 18 největších chyb, se kterými se potkává na webu:

DOCTYPE zmatek

Chybějící, špatně zapsaný nebo umístěný na špatném místě.

<span> mánie

Obecný způsob stylování čehokoli pomocí CSS je obalit to do <span> elementu s class atributem. Nehledí se na sémantiku, na kaskádu, dědění atd.

Příliš vizuální myšlení

Nahlížení na web skrze WYSIWYG. Vývoj začíná vzhledem místo toho, aby se začalo u struktury a obsahu.

Nedostatek sémantiky

Kód postrádá sémantiku (význam). Autoři vychází z toho, jak je daná značka výchozím způsobem vykreslována místo toho, aby se zamysleli nad významem značek a správně je použili.

Mišmaš v kódování

Použití jednoho kódování v HTTP hlavičce a dalšího v dokumentu. Některé prohlížeče pak nemusí dobře zobrazit některé znaky.

Špatné atributy alt

Chybějící nebo zbytečné. Element <img> musí mít alt atribut. Myslete na smysluplný text v hodnotě atributu.

Neplatné id a class atributy

Opakované použití stejné hodnoty id atributu v jednom dokumentu. Neplatné znaky v jejich názvech atd.

Kádrování prohlížečů

Zjišťování, jaký prohlížeč návštěvník používá a posílání upraveného kódu pro daný prohlížeč. Když odhlédnu od skutečnosti, že je možné napsat univerzální kód, tak bych připomenul problémy s novými prohlížeči nebo prohlížeči, které se maskují za jiné.

Chybějící jednotky v CSS

Délkové jednotky musí mít zadanou jednotku (vyjma nulové hodnoty). CSS není HTML.

Proprietální CSS.

Používání nestandardních vlastností některých prohlížečů (stylování posuvné lišty v IE, filtry apod.).

Závislost na JavaScriptu

Někteří lidé mohou mít vypnutý JavaScript. Nebo používají zařízení, které JavaScript nepodporuje. Podobně pracují také roboti vyhledávačů.

Zavislost na Flash

Ne každý má Flash instalovaný. Vyhledávací roboti si s Flashem také neporadí.

Obrázky místo textu

Tohle není příliš přístupné. Podívejte se na svůj web s vypnutými obrázky. Zvětšujte písmo. Myslete na vyhledávače.

Špatné formuláře

Nepřístupné, špatně použitelné formuláře. Říká Vám něco <label>, <fieldset> a <legend>.

Stará škola HTML

Opakovaně vnořené tabulky, neviditelné GIFy k vytvoření mezer, značky <font> atd.

Nic než IE

Nejdřív navrhovat pro IE/Win a až pak napravovat pro ostatní není to pravé ořechové.

Neplatné HTML atributy

Používání zavržených atributů nebo nestandardních atributů.

Nekódovaný znak &

Problém při odkazování. Mnoho URI obsahuje znak &, který musí být v kódu zapsaný jako &.

Na závěr se zeptám stejně jako autor: Vynechal jsem nějaký Váš oblíbený omyl? Přidejte jej do komentářů.

Souvislosti

• Cascading Style Sheets home page - W3C
• HyperText Markup Language (HTML) Home Page - W3C
• Dogma W4 - Petr Staníček a kol.
• HTML: Používáte label? - Jiří Bureš
• Lepší formuláře - Jiří Bureš
• Weblogy CZ: DTD - Jiří Bureš

trvalý odkaz | komentáře (20)

Už je to pár měsíců, co jsem nakreslil svou poslední ikonu. Osobně sice dávám přednost dvoubarevným ikonám, ale doba pokročila a tak desítky a stovky barev na pidiobrázku 32×32 pixelů není nic zvláštního.

Pokud máte zájem zjistit, jak dobře nakreslit ikonu, podívejte se na článek The Anatomy of an Icon. Dan Cederholm na příkladu jedné konkrétní ikony podrobně rozebírá celý proces tvorby.

Souvislosti

• What is Favicon.ico? Personalise Your Site's Bookmark - Christopher Heng
• Ikona stránky nazývaná též favicon.ico - Dušan Janovský
• SHORTCUT ICON
• An easy addition for any site: favicon.ico - isaac

trvalý odkaz | komentáře (5)

Abych nebyl dneska jenom jedovatý, tak připojím potěšitelnou informaci: Víťa Dlouhý, Lukáš Mačí a Michal Tuláček spustili web Dlouhý Webdesign.

Kluci (jak píše Víťa mladí lidé) se zaměřují na takové věci, jako je tvorba webových stránek, SEO, copywriting apod. Více ostatně najdete ve spotu Dlouhý Webdesign startuje! Hodně úspěchů, pánové.

Ještě si neodpustím malou poznámku. Je zajímavé, jak si autoři stránek podobného zaměření libují ve čtvercových ikonkách se zakulacenými rohy (nic proti, mně se líbí). Ještě že všichni nepoužívají oranžovou.

trvalý odkaz | komentáře (22)

David Špinar dnes zveřejnil kompletní znění pravidel přístupnosti v HTML. Oproti HTML patvaru zveřejněném na webu MI je to ukázka, jak by to mělo správně vypadat.

K dispozici je:

• kompletní verze pravidel (lze odkazovat i na jednotlivá pravidla),
• základní verze (bez vysvětlení).

trvalý odkaz | komentář (1)

Hosana! Ministerstvo informatiky ČR vydalo očekávaná Pravidla pro tvorbu přístupného webu. Na titulní stránce dokumentu, který je (pokud vím) dostupný jen jako PDF(!) (Best practice - Pravidla pro tvorbu přístupného webu), najdete podtitul (nebo spíš nadtitul) Best practice. Dokument je tak opravdu chápán, protože po určité překlenovací období bude sloužit jen jako vodítko pro autory a správce státních webů, aby si ve svých věcech udělali pořádek (recenzenti státních webů pak dostanou do ruky pořádný klacek). Doufám, že to překlenování nebude na věčné časy.

Obsah a úroveň dokumentu je na velmi dobré úrovni (chybí mi snad jen jednostránkový hodnotící checklist pro webmastery). Není se čemu divit, když se uváží, kdo všechno na dokumentu spolupracoval. V dokumentu najdete 37 poměrně jasně formulovaných pravidel. V této souvislosti mě napadá, že by byl zajímavý rozbor státních webů (třeba jen ministerských), jak dodržují ona pravidla. A jaký posun nastane, až se stane dokument závazný (tj. až vstoupí v platnost novela zákona 365/2000) a následně po pár letech.

Jak už jsem psal, tak je nyní dokument jen v podobě PDF. Webu prospěšnější by bylo určitě zpracování do klasické HTML podoby. Dovedu si představit web, který vedle samotného textu "pravidel" nabídne stránky věnované dobrým i špatným příkladům, odkazům na validátory, diskusnímu fóru atd. Úroveň lidí, kteří spravují státní weby je značně rozkolísaná. To by ale chtělo zapálený tým, který se o to vše bude starat a věc potlačí kupředu. Nechme se překvapit.

Souvislosti

• Pravidla pro tvorbu přístupného webu - Petr Staníček
• MIČR připravilo pravidla pro tvorbu přístupného webu - Daniel Dočekal
• Budou pravidla přístupného webu veřejné správy dodržována? - Tomáš Hodboď
• Jak budou vypadat pravidla přístupného webu pro veřejnou správu? - David Špinar
• MIČR zveřejnilo zásady přístupného webu - David Špinar

trvalý odkaz | komentáře (5)

Po delší době je tady zase jedna opakovaná evangelizační vlna na téma přestaňte používat pro layout webu tabulky a přejděte na beztabulkový CSS layout. Tentokrát ji vyvolal Doug Bowman článkem Throwing Tables Out the Window.

Bowman popisuje obsah své přednášky Již žádné tabulky, Techniky CSS layoutu na konferenci Digital Design World. Bowman ukazuje na příkladu malé lokální firmy z okolí Seattle (ano hádáte správně, je jí Microsoft) možnosti, které přináší přechod od tabulek k CSS. Microsoft (ač stál u zrodu CSS a může se ohánět patenty) je totiž typický příklad (patří k většině, layout je standardní, nabízí více verzí stránek podle prohlížeče atd.).

Nechci se opakovat, ani nechci přidávat žádné nové převratné poznatky na téma beztabulkových CSS layoutů. Snad jen jedno číslo ze zmíněného článku. Bowman předěláním microsoftích stránek do CSS ušetřil 62 % velikosti stránky. Ale protože se to některým může zdát málo, tak teda ještě trochu přihodím. Podle Microsoftem zveřejněných údajů by pak úspora na trafficu přes 300 terabytů za rok. To už je docela pěkná porce.

Souvislosti

• Only defenestrate - Jeffrey Zeldman
• The New Samaritans - Jeffrey Zeldman
• No more tables for presentation - Tantek Çelik
• Changing the Face of Web Surfing - Robert Andrews

trvalý odkaz | komentáře (6)

Pokud žehráte na nepřístupnost domácích webových stránek a myslíte si, jací že to jsou domácí webdesignéři nekňubové, zadržte. Nepřístupnost webových stránek je totiž, jak se zdá, úplně normální jev. Vyplývá to alespoň z těchto dvou zpráv (via Brainstorms and Raves):

• A comparative assessment of Web accessibility and technical standards conformance in four EU states - Carmen Marincu, Barry McMullin
• Assessing the accessibility of fifty United States government Web pages: Using Bobby to check on Uncle Sam - Jim Ellison

Slovy klasika: tolik hrůzy, jako je v těchto dokumentech, nebylo ani ve smolných knihách středověku.

A comparative assessment…

První průzkum se zaměřil na evropské weby. Autoři vybrali z Open Directory Project několik britských, irských, německých a francouzských webů. Ty podrobily testu na způsobilost podle WCAG 1.0. Žádný (slovy žádný) testovaný web neuspěl v nejpřísnějším testu WCAG–AAA. Na stupni WCAG-AA pak pohořely všechny irské, německé a francouzské weby. Abych nebyl tak příkrý k hodnoceným webům, budu citovat:

94.0 percent of the Irish sites, 94.5 percent of the U.K. sites, 95.6 percent of the German sites and 98.6 percent of the French sites failed Bobby at the minimal accessibility level (WCAG–A).

Dobré, že? Největší problémy dělalo pravidlo o povinnosti uvádět alternativní texty ke všem obrázkům a problémy se zápisem rámců.

Výzkum se zaměřil také na validitu HTML dokumentů zkoumaných webů. Opět nechám promluvit, mými překladatelskými ústy, autory průzkumu:

Pouze 4 britské weby (méně než 0,2 %) a 6 německých webů (méně než 0,4 %) měly zcela validní HTML. Žádný irský ani francouzský web neměl zcela validní kód.

Dlužno podotknout, že většina webů pohořela na nepřítomnosti DTD. Ale nezůstalo jenom u toho. Chyby, které se vyskytovaly na více než polovině webů:

• nedefinovaný atribut,
• nepovolený element pro daný typ dokumentu,
• ukončení neotevřeného elementu,
• chybějící povinný atribut a
• neukončený element.

Autoři průzkumu se domnívají, že za neutěšený stav může především neinformovanost tvůrců a špatné chápání významu přístupnosti. Lidově řečeno na to všichni prdí (pardon, nějak mi to ujelo - to bude tím horkem). Pravidlo napiš jednou, přečti kdekoli prostě ještě neplatí.

Assessing the accessibility of fifty US government Web pages

Druhý výzkum se zaměřil na americké vládní weby. Proč ne. Když někdo vyžaduje dodržování nějakých zásad, tak by je měl přece dodržovat nejprve sám (toliko naivní má úvaha). Jenom pro dokreslení:

• 1 z 10 Američanů trpí nějakým těžkým postižením.
• A bude to ještě horší: 1 z 8 dětí ve věku 6 - 14 let je na tom stejně.
• Každý druhý Američan starší 65 let je těžce postižen.

Možná to jsou dobré argumenty pro tvorbu přístupných stránek. A jak dopadly US vládní a federální stránky. Taky nijak zvlášť slavně. Jen necelá čtvrtina získala 508 Approved v testu (přesto na nich bylo co zlepšovat). Jak říká autor průzkumu: zbývá udělat hromadu práce, aby se sen stal skutečností. Ani se neodvažuji myslet na to, jak by podobný test dopadl u nás. Zdravím, pane Mlynáři.

trvalý odkaz | komentáře (6)

Ben Hammersley nabízí XHTML validaci stránek pomocí RSS (via Dan Cederholm). Do RSS čtečky stačí vložit nový kanál s adresou http://www.benhammersley.com/tools/validate.cgi?url= nasledovanou adresou stránky a výsledky validace dostanete do čtečky. Co chyba, to jedna položka ve čtečce. Vtipné a jednoduché.

Validujete při každé aktualizaci RSS kanálu validátoru. Pokud validátor nenajde chyby (a to vám ze srdce přeju), neuvidíte ve čtečce žádné nové řádky.

K dispozici je také zdrojový kód (Perl).

Souvislosti

• XHTML validation via RSS - Simon Willison
• Subscribable Validation - Dan Cederholm
• Validátor XHTML v RSS čtečce - Petr Weida

trvalý odkaz | komentáře (2)

Když je přeplněná poštovní schránka příjemce a e-mail není doručen, tak se musí sáhnout k jiných prostředkům (třeba k blogu).

Na závěr jedné delší e-mailové konverzace se mě zeptal jeden začínající bloger:

> ale nevim co vytknout znacce <b>?

Značky tohoto typu vyjadřují vzhled ne význam (sémantiku). <b> se typicky (ale špatně) používá pro vyznačení zdůraznění. Podobně <i> je užíváno pro slabší zdůraznění. Obě značky ale vyjadřují vzhled (b = bold/tučný, i = italics/kurzíva). Pro zdůraznění se správně používají značky <strong> a <em> (emphasis). V CSS jde samozřejmě sémantické značky (jako každé jiné) formátovat.

Souvislosti

• Např. HTML 4.01 doporučení, kapitoly: 9.2.1, 9.2.2, 9.4 a 15.2
• Obsah/forma - Dušan Janovský
• Bezproblémový přechod na XHTML - Vít Dlouhý
• XHTML — buďte striktní - Marek Prokop

trvalý odkaz | komentáře (18)

Tak jsem konečně dokončil redesign webu firmy SEPLAST, s. r. o.. Takže pokud se zajímáte o průmyslové plastové ventilátory, máte možnost posoudit nabídku.

trvalý odkaz | komentáře (8)

Web Page Analyzer je dostupný ve verzi 0.90 (via Digital Web Magazine). Mezi hlavní vylepšení oproti předchozím verzím patří:

• Vylepšená detekce obrázků na pozadí vkládaných skrze CSS.
• Detekce Flashe.
• Detekce komprese.
• Vylepšená přesnost a výkon atd.

trvalý odkaz | komentář

Představte si editor. Třeba HTML editor. A teď si představte, že chcete na určitém místě zdrojového kódu nahradit jeden text za druhý. Nevím jak vy, ale já označím text (třeba Ctrl+Shift+šipka vlevo/vpravo) a začnu psát nový text. Někdy samozřejmě nejprve mažu (klávesa delete nebo backspace - příjde na to) a pak píšu, ale pro náš příběh je důležité právě to označení bloku.

A teď si představte, že v takovém editoru chcete třeba zaměnit tři mezery za tabulátor. Já takhle občas opravuji své starší HTML zdrojáky (šetřit se holt musí). Takže označíte tři mezery na začátku řádku a klepnete na tabulátor. Naivně očekáváte úsporu dvou znaků. Chyba lávky. Místo toho, aby se mezery nahradily za znak tabulátoru, dostanete tabulátor a tři mezery. Že je to hloupost? Není. Bohužel není. Je to nová vlastnost aplikace Microsoft FrontPage 2003. No nekupte to.

trvalý odkaz | komentáře (17)

V probíhající anketě na conBLOGu se ptám, jaký název byste zvolili pro odkaz na domovskou stránku (viz Úvodní domovská homepage). Možností je mnoho. V pátek 18. 6. byl stav hlasování tento:

1. Úvodní strana - 35 %
2. Hlavní stránka - 19 %
3. Úvod - 14 %
4. Domů - 9 %
5. Home - 8 %
6. Jiný text - 5 %
7. Název webu - 4 %
8. Homepage - 4 %
9. Domovská stránka - 2 %

Výsledky ankety hovoří docela jasně. Přiznávám, že mě trochu zklamal propad možnosti použít jméno webu jako odkazu pro skok na titulku webu. Ale vox populi, vox dei.

Jak to řeší nejlepší

Jedna věc je, co si čtenáři odborného blogu myslí o pojmenování titulky. Druhá věc je, jak k problému přistupují tvůrci nejnavštěvovanějších webů. V pátek jsem prošel žebříčky TOPlistu. Z každé hlavní kategorie jsem prošel pětici nejnavštěvovanějších webů. K nim jsem přidal nejnavštěvovanější stránku podkategorií. Pro analýzu jsem tak mohl použít 74 nejnavštěvovanějších webů z různých oborů.

Pojmenování titulky nejnavštěvovanějších webů

1. Název webu v logu - 35 %
2. Úvodní strana (stránka) - 12 %
3. Název webu textově - 8 %
4. Home - 7 %
5. Titulní strana (stránka) - 7 %
6. Domů - 5 %
7. Hlavní strana (stránka) - 5 %
8. Nijak se neodkazuje - 4 %
9. Homepage - 3 %
10. Start - 3 %
11. Úvod - 3 %
12. Nenašel jsem - 3 %
13. Jinak - 3 %
14. Jen logo - 1 %
15. Vítejte - 1 %

Více než třetina webů odkazuje na titulku pouze logem, ve kterém je název webu (firmy apod.). V textové navigaci v tomto případě vůbec odkaz na titulku není.

Z textových verzí navigace vedou pojmy Úvodní strana (stránka), název webu a Titulní strana (stránka) a Home.

Weby, které jsou v položce Jinak, jsou webové aplikace, které používají jiný způsob navigace - neodkazují na sekce webu, ale odkazují na jednotlivé funkce webové aplikace.

Anketa a realita

Zajímavé je srovnání ankety a reálného stavu nejnavštěvovanějších domácích webů. Z rozboru jsem vyřadil loga webu. Realita se ve většina případů liší od názoru hlasujících.

Srovnání ankety na conBLOGu s reálným stavem

Jak na to

Průzkum ukázal a anketa to částečně potvrdila, že je vhodné do navigace použít název webu nebo texty Úvodní/Titulní/Hlavní strana (stránka). Výskyt textu strana a zdrobnělého stránka je přibližně vyrovnaný. Přesto ve výzkumu převažoval nezdrobnělý tvar strana (11:7) - je kratší.

Souvislosti

• Úvodní domovská homepage - Jiří Bureš
• Jsou webdesigneři odtrženi od reality? - Miloslav Lešetický - diskuse pod spotem
• Základní navigaci uživatelé ignorují - Martin Kopta

trvalý odkaz | komentáře (2)

Možná znáte open source multiplatforpomní HTML editor Nvu [en vju:] vyvíjený za podpory firmy Lindows Inc.. Nedávno vyšla další verze Nvu 0.30 postavená na jádře Mozilla (via Czilla). Stáhl jsem si tento WYSIWYG HTML editor a začal zkoušet.

Důležité je připomenout číslo verze Nvu - je to 0.30. Editor je v ranném vývojovém stádiu a proto se tady může vyskytnout pár chyb a míst, která doznají změnu. Vývoj probíhá poměrně rychle. V únoru 2004 byla dostupná verze 0.1, v březnu 0.2. Následující odrážky proto berte jako neuspořádané postřehy, které zapsal člověk se zkušeností s tvorbou (X)HTML především ve FrontPage, HomeSite, Notepad, TopStyle a spol.

• Nvu si dobře rozumí s CSS layoutem. Editoval jsem několik stránek pozicovaných výhradně CSS a editační okno nabídlo stránku přesně tak, jak měla vypadat.
• Nvu se spouští celkem svižně. Ne ale nějak závratně rychle. Na mém PC zhruba stejně rychle jako FronPage 2000.
• Podle obsahu title elementu Nvu nabídne název souboru. Mezery nahradí za podtržítka (pomlčky by asi byly lepší). Vznikají tak názvy typu Žluťoučký_kůň.html.
• Nvu Site Manager bohužel funguje jen pro web (ne pro soubory na lokále) - všichni nemají neomezené připojení. Předpokládám, že jde o obdobu Folder List z FronPage.
• Zajímavé je, že lze editovat i v záložce Preview.
• Tučnění a spol. se zapisuje jako <span style="font-weight:bold;">text</span>
• Entery v editačním okně se do kódu převádí jako <br>. Značka <p> by byla lepší. Zdá se, že autor našel ve značce <br> zalíbení. Dává ji kam může, třeba mezi značky pro buňky v nově vložené tabulce, za vložené obrázky atd.
• Nvu umí kódovat v utf-8 a iso-8858-1. Podpora dalších kódování není zatím zahrnuta. Pokud píšete české znaky, tak se některé převádí na znakové entity (např. á na á). Další znaky nemající entity zůstávají.
• Nvu má integrovanou podporu CSS. Vyhývám se pojmu CSS editor. Uživatel má k dispozici jakési propracované dialogové okno se seznamem připojených CSS souborů a interních definicí, ve kterém nastavuje jednotlivá pravidla. Je to dost neintuitivní.
• Nvu občas rozhazuje (kazí) zdrojový kód! Ve WYSIWIG editaci napíšete text stránky. Přejdete do zdrojáku (ten není zrovna dvakrát dobře naformátovaný). Poctivě přeformátujete zdroják podle svého zvyku. Skočíte do náhledu (nebo do WYSIWIG) a vrátíte se zpět do zdrojáku. A bác ho. Všechno je zase jinak formátované. Na stránce, kterou jsem vytvořil dřív se Nvu už takto podivně nechová. Nevím ale, čím to je.
• Ve zdrojáku je řádek s DTD nepřístupný (nenašel jsem cestu, jak jej přestavit)
• Nvu kontextově znepřístupňuje položky menu. To je v pořádku. Někdy to ale dělá až příliš důsledně. Např. Markup cleaner nejde spustit v okně zdrojového kódu.
• Další chybku jsem našel v dialogu Insert character. Rozbalovací seznamy znaků Letter a Character jsou zdánlivě prázdné. Znaky nejsou zobrazeny. Jde ale znaky vybírat - bohužel metodou pokus omyl.
• Rozbalovací seznamy se obecně chovají divně. Některé při rozbalení narostou dost výrazně do šířky.
• Chybí mi má oblíbená klávesová zkratka pro nedělitelnou mezeru (nevím, jestli tam ta zkratka vůbec je).
• Pokud máte otevřeno více dokumentů, tak po přepnutí na záložku Source zmizí záložky pro přepínání mezi dokumenty.
• Při přepnutí mezi záložkou Normal a Source kurzor skočí na začátek kódu (ne na místo, které bylo editováno).

Možná se zdá, že jsem příliš kritický, ale i tak je Nvu nadějný projekt, kterému přeji úspěch.

Souvislosti

• Nvu 0.30 Released - MozillaZine
• Nvu ke stažení
• Nvu Bug Report - hlášení chyb a námětů
• Glazblog - Daniel Glazman - autor Nvu
• A Look at the N|vu WYSIWYG Editor - Metin Amiroff

trvalý odkaz | komentáře (11)

Misha vyvolal na Yuhůůově weblogu diskuzi o účelnosti nadměrného používání atributu title. Co říká teorie?

Atribut title a (X)HTML

HTML 4.01 o atributu title říká zhruba toto:

Atribut title nabízí doplňující informace a elementu, pro který je zadaný.

Na rozdíl od elementu TITLE, který dává informace o celém dokumentu a může se v dokumentu vyskytnout jen jednou, atribut title může vysvětlovat libovolný počet elementů.

Atribut title se zapisuje jako jiné atributy. Přiklad zápisu title v odkazu:

<a href="http://www.example.com" title="Pouhý příklad">Příklad</a>

Kde používat title?

Čistě technicky vzato, je možné title použít tam, kde je to normou povoleno - ne každý atribut může mít atribut title, překvapivě mnoho jich ale title může mít. Jiná věc je, kde je takové použití vhodné. Já osobně používám atribut title v těchto případech:

• vysvětlení zkratek a zkratkových slov (značky abbr a acronym) uvnitř textu (pokud nedám přednost definici dl),
• vysvětlení pojmů - až potud asi není o čem diskutovat,
• v odkazech na tomto blogu (uvádím zdroj, čas vydání, název dokumentu - dávám přednost tomu, aby byl v textu odkazu, autor - upřednostňuji autora uvádět v textu s využitím značky cite)
• upřesnění možných nejasností:
  • upřesnění odkazů (např. v navigaci nebo v případě, že by odkaz byl velmi dlouhý),
  • (vysvětlení výrazu může narušit rytmus textu, v žádném případě nesmí být text bez zobrazeného title nesrozumitelný),
• různé humorné poznámky (které si prostě nemůžu občas odpustit).

Než se do mě pustíte, tak musím upozornit, že jsem měl včera na titulce jen 3 podtečkované (takto mám nastavený styl pro title-vysvětlivky). Nejsem tedy hlasatel tečkovaného náboženství.

Vždycky je důležité, aby dokument zůstal čitelný i bez zobrazeného atributu title! V title by neměla být ukryta žádná podstatná informace. Při používání title by měl autor brát zřetel na cílovou čtenářskou skupinu.

Co lidem vadí

Špatné použití title může mnoha lidem vadit:

• Nevidomým, kterým jejich čtečka špatně interpretuje normu.
• Lidem, kteří vytisknou špatně napsaný dokument a obsah atributu title nevidí.
• Bez myši nebo podobného zařízení se na title asi nedostanete -jako autoři na to myslete.
• Někteří návštěvníci se při čtení zadrhávají (tohle ale hrozí i při přezávorkování, při zbytečně rozvitých a převsuvkovaných větách).

Atribut title je potřeba, jako ostatně vše, používat z rozmyslem a rozvahou. Je potřeba vědět, pro jakou cílovou skupinu dokument tvoříte, pro jaký účel stránka slouží. Určitě neexistuje žádné dogma a žádný jednoznačný návod, jak atribut title správně použít.

Souvislosti

• Day 14: Adding titles to links - Mark Pilgrim
• Misha o používání title - Dušan Janovský

trvalý odkaz | komentáře (5)

S generátory vycpávkového textu Lorem Ipsum se roztrhl pytel. V úterý jsem informoval, že je tady další Lorem ipsum česky (od Petra Staníčka) a dnes mě Dave Shea přivedl ke generátoru Ye Olde Lorem Ipsum Generator.

Ye Olde Lorem Ipsum Generator umí oproti známému lipsum.com pár dalších věcí, mj. umí generovat výstup v téměř dvacítce jazyků a kódů.

Když se na to tak dívám, tak stejně asi zůstanu u starého dobrého lipsum.com. A asi u něj zůstane i většina jeho stávajících uživatelů. Ale co kdyby ne?

trvalý odkaz | komentář (1)

The Web Standards Project zveřejnila dotazník pro všechny webdesignéry WaSP Survey. Pokud máte zájem a pár minut času, vyplňte anglický dotazník s 10 otázkami.

trvalý odkaz | komentář

Když se věci dělají s nadhledem a pochopením věci, je možné si leccos dovolit. Víťa Dlouhý říká: 3 stejně vysoké sloupce? Tabulky jsou vhodnější.

Proč ne. CSS beztabulkový layout není zlaté prase. Ten kdo navrhne čistý tabulkový layout s plným využitím CSS a zásad přístupnosti, použitelnosti apod. není prase určitě. Lecjaký kód stránky udělaný v CSS beztabulkovém layoutu vypadá jako pěkná divočina. Mnohé tabulkové layouty mohou klidně dokonale oddělit obsah od formy. Vždycky to chce najít správnou míru a zvolit přiměřené prostředky.

Dodatek

Aby nedošlo k mýlce. Nekonvertoval jsem k tabulkářům. Pořád si stojím za svým. Podle normy se tabulky používají pro tabulková data, ne pro layout (rozvržení vzhledu stránky). Zmíněný článek je velmi vhodným návodem, jak napsat tabulkový layout čistě (a hlavně čisté tabulky obecně) a jak odstranit některé jeho nevýhody. To může být užitečné např. pro autory, kteří se z různých důvodů neodhodlali přejít k čistému CSS.

Souvislosti

• Tabulkový layout nezrychlíte - Dušan Janovský
• Tabulky pro třísloupcový layout - Petr Weida dokonce věnoval obrázek mému překlepu Weida/Dlouhý
• Tabulke né - Robert Madaj

trvalý odkaz | komentáře (10)

Petr Staníček zveřejnil Pseudo-Czech Dummy Text - píše o tom ve spotu Generátor "dummy" textu. Pro ty, kterým nestačí latinské Lorem ipsum je tady, vedle Cold Blooded Turkey, další nástroj.

Souvislosti

• Co to je Lorem ipsum - Petr Staníček
• Lorem ipsum - Jiří Bureš
• asdasd - Jiří Bureš

trvalý odkaz | komentáře (3)

Nedělitelná mezera

Pro zápis nedělitelné mezery se používá v (X)HTML znaková entita   (nonbreakable space, no-break space, non-breaking space apod.). Nedělitelná mezera (tvrdá mezera, pevná mezera, nezlomitelná mezera) zabrání rozdělení slov např. na konci řádku. V češtině se takto spojují nejčastěji:

• jednopísmenné předložky (k, o, s, u, v) s následným slovem (v lese),
• verzálka A s následujícím slovem,
• iniciála s příjmením (J. Novák),
• titul a jméno (Ing. Kraus)
• hodnota veličiny a její jednotka (5 V - pět voltů),
• číslo a symbol procenta, měny apod. (100 % - sto procent),
• mezi čísla v kalendářních datech (7. 6. 2004),
• ve zkratkách (s. r. o. - zkracuje různá slova) atd.

Přestože používání nedělitelné mezery je dáno typografickými pravidly a učí se už na základní škole, je používání nedělitelné mezery při tvorbě webových stránek velmi řídký jev. Podle mě jsou hlavními příčinami neznalost a lenost (jak je to u vás?). Přitom mnoho HTML editorů používání nedělitelné mezery usnadňuje. Nepsaným standardem je klávesová zkratka Ctrl+Shift+mezera.

Nedělitelná mezera a editory

HTML editory se k existenci nedělitelné mezery staví různě. Některé editory vůbec nemají klávesovou zkratku vkládající nedělitelnou mezeru. Jaká je tedy situace na poli nejrozšířenějších HTML editorů?

1st Page 2000 2.0

Nedělitelná mezera se vyvolá klávesovou zkratkou Ctrl+mezera. Je možné editovat vlastní zkratky, ale nepodařilo se mi přesvědčit dialogové okno, aby akceptovalo mezerník.

Adobe GoLive 6

V okně Layout se pro nedělitelnou mezeru používá klávesová zkratka Shift+mezera.

FrontPage 2000

Zkratka Ctrl+Shift+mezera v editačním okně správně vloží nedělitelnou mezeru do HTML kódu. V HTML editoru už ale zkratka nefunguje (co vím, tak se tak chovají i novější verze FrontPage).

FrontPage 2002

Tak tady se zase Microsoftu povedla prasárna. Po zmáčknutí Ctrl+Shift+mezera se v HTML kódu objeví tento podivný kód: v<span lang="en">&nbsp;</span>lese. Po vytvoření stránky pak nezbývá, než nahrazovat.

FrontPage 2003

Nová verze a prasárna na entou. Tajně jsem doufal, že MS napraví kiks z XP verze, ale chyba lávky. Tentokrát vám nahrazování moc nepomůže, protože FrontPage 2003 generuje pro změnu tento kód: v<span lang="en">&nbsp;lese</span>. Nevíte někdo, jak přinutit FrontPage, aby to nedělal?

HomeSite 5

Ctrl+Shift+mezera funguje na výbornou.

Macromedia Dreamweaver

Tady nemůžu sloužit. Napište do komentářů, jak nedělitelná mezera funguje v tomto editoru. Dremweaver používá standardní zkratku ve Windows Ctrl+Shift+mezera.

Mozilla Editor (Composer)

Ať jsem hledal, jak jsem hledal, tak jsem klávesovou zkratku pro nedělitelnou mezeru nenašel.

PSPad

Tento český freeware editor nemá s vkládáním nedělitelné mezery žádný problém. Ctrl+Shift+mezera funguje bez problému.

Není tvrdá jako tvrdá

Typografie je umění. Znalec ví, že není jenom jediná mezera. Pro některé nedělitelné mezery se používá zúžená mezera, která se v HTML zapisuje  . Podpora zúžené mezery je ale v IE veškerá žádná. Takže nezbývá, než zůstat u  .

Souvislosti

• Webdesignerovy poznámky z typografie - Martin Víta
• Typografie na webu v kostce - Petr Staníček
• Základní pravidla hladké sazby - Jiří Anderle
• Typografie na Internetu - Typo.cz
• Pevná mezera v HTML - Miroslav Vejlupek
• Typografie na webu - Jan Bien

trvalý odkaz | komentáře (30)

Skrýt či neskrýt? O to tu běží. Teda vlastně neběží. David Špinar ve spotu Zneviditelnění obsahu v CSS a problém hlasových čteček odkazuje na množství článků, které popisují způsob skrývání textu v grafických prohlížečích pomocí CSS a to, jak tyto skryté texty interpretují hlasové čtečky. Použití display: none nebo visibility:hidden nemusí být to pravé ořechové.

Jak tedy správně schovávat obsah? Tak na tuto otázku najdete ve zmíněném spotu odpověď taky. David nabízí dvě možnosti:

• Metoda pomocí vlastnosti text-indent se zápornou hodnotou.
• Metoda absolutně pozicovaného prvku vysunutého mimo obrazovku.

trvalý odkaz | komentáře (8)

Mí Pražané mi rozumějí, prohlásil prý Wolfgang Amadeus Mozart. Měl k tomu jistě dobrý důvod. Hudba je univerzální vyjadřovací prostředek a Mozart byl génius. Autor webu to má určitě těžší. Přinejmenším totiž není žádný génius.

Každý autor by měl znát cílovou skupinu, pro kterou tvoří. Té musí přizpůsobit formu a hlavně obsah sdělení. Jinak nemůže očekávat úspěch. Na webu navíc těžko zajistíte, aby na vaše stránky přišel člověk, který nepatří do cílové skupiny, pro kterou jste stránky vytvořili. V tomhle to měl Mozart jednodušší. Do Stavovského asi nešel kdejaký hej nebo počkej.

Příklady táhnou

Jako příklad uvedu stránku, ze které uživatelé stahují komprimované instalace jedné aplikace. Na poměrně jednoduché stránce se nachází tento text:

Nejprve musíte stáhnout soubor s instalačním balíkem. Po stažení souboru archívu přejděte do složky na Vašem počítači, kam jste soubor uložili a rozbalte jej.

• Spusťte instalační program, který Vás provede zbytkem instalace.
• Pokud se jedná o upgrade, postupujte podle pokynů v přiložených textových souborech.

Aktuální verze

conVERTER 1.41

Download upgrade

conVERTER 1.40

Download instalace

Zkušený tvůrce webu najde v uvedeném textu hned několik chyb:

• Neznámé pojmy - co je instalační balík, co je soubor archivu a co je download a upgrade?
• Nejednotná terminologie - text odkazů v ukázce by měl odpovídat ostatním termínům na dané stránce a celém webu.
• Chybějící informace - ne každý ví, že ve stavovém řádku je u odkazů zobrazován cíl odkazu, podle kterého lze poznat typ souboru. K odkazům je nanejvýš vhodné doplnit typ stahovaných souborů a jejich velikost.

Možná namítnete, že každý uživatel PC ví, co zmíněné pojmy znamenají. Ale nenechejte se mýlit. Zrovna včera jsem dostal e-mail, kde mě nešťastný uživatel žádá o pomoc (ptá ce střeba co mám stáhnout dříve: instalační balík nebo soubor archívu). A já se mu nedivím a ani si o něm nic špatného nemyslím. Nepatřím k těm, kteří by ze svých nedostatků vinili neznalé uživatele.

Trnitá je cesta k porozumění

Myslete především na ty, kteří na vaše stránky chodí. Nejedná se totiž jenom o členy cílové skupiny. Na stránky přichází i lidé, kteří nejsou znalostně na úrovni daných stránek. Pomozte jim třeba tak, že stránky budou:

• Jednoduché - vyhýbejte se dlouhým a složitým větám. Jděte přímo k jádru věci.
• Přehledné - volte přiměřený design stránek, text dělte do odstavců, používejte nadpisy.
• Jednoznačné - používejte jednotné pojmy, podtrhávejte odkazy, nepodtrhávejte texty, které odkazy nejsou.
• Srozumitelné - piště česky (kde je možné užít českého slova nepoužívejte slova cizí).

A je toho samozřejmě víc. Ale odměnou může být vědomí, že mí návštěvníci mi rozumějí.

trvalý odkaz | komentáře (4)

Brian Williams v novém A List Apart 182 publikoval další článek na téma stínování: Onion Skinned Drop Shadows. Přidává také malou galerii stínů.

Derek Featherstone v článku Print It Your Way přidává návod, jak vytvořit tiskovou verzi webu pomocí CSS. Pro znalce stará vesta. Ti, kteří pořád tvoří samostatné tiskové stránky, by si měli článek určitě přečíst.

trvalý odkaz | komentář

David Špinar dnes na Lupě zveřejnil zajímavý článek Jak budou vypadat pravidla přístupného webu pro veřejnou správu? Článek je zajímavý. Poodkrývá i zákulisí vzniku ptováděcího předpisu. Obsah se mi líbí a se vším, co je v návrhu napsané, v podstatě souhlasím. Úředníci třeste se, autoři oprašte znalosti norem, občané jásejte! Nebo to zase bude jinak?

trvalý odkaz | komentáře (2)

Už jsem kdysi kdesi psal o tom, že věci obvykle přichází ve vlnách. Petr Weida předělal web korfbalového klubu (Korfbal Prostějov má nový design). Já se chystám zítra vypít trochu čaje s autorkou webu Čajírna u Pythona a probrat s ní pár mých připomínek a námětů na možná vylepšení. Jenom si přeji, abych z té diskuze neodcházel jako starý urýpaný blb, protože si vážím všech zapálených neplacených tvůrců.

Nechci tady teď hodnotit samotné stránky čajovny. Chci Vás požádat, jestli byste nemohli ve svých prohlížečích otestovat mou verzi layoutu zmíněných stránek. Podívejte se na dokument Čajírna u Pythona Holešov - testovací verze. Především mě zajímá:

• Jak se stránka zobrazuje ve Vašem prohlížeči - není layout rozpadlý, neleze něco kam nemá?
• Jak se Vám stránka jeví z hlediska vzhledu, přehlednosti, designu apod. (nechtěl jsem měnit vzhled původní stránky)?
• Budu rád, když se podíváte a budete připomínkovat také originál - třeba jsem něco přehlédl.

Korfbal Prostějov

Ještě ke kritice korfbalových stránek. Dvakrát jsem se pokusil odeslat svůj komentář, ale prohlížeč mi usnul na stránce add.php?id=323. Protože vím, že se sem Petře občas díváš, tak tady jsou mé připomínky:

• Barvy se mi zdají dost depresivní.
• Hover efekt u hlavní navigace by mohlo měnit/zvýrazňovat barvu pozadí (ne do barvy pozadí).
• Hlavní navigace: chybí tomu pár odkazů doleva dolů. Je to tam takové ukousnuté.
• Domovské stránce chybí víc textu (výloha je prázdná).
• Chtělo by to předělat některé texty (vím, že data nejsou aktuální): třeba na stránce Co je korfbal není zřejmé co to ten korfbal vlastně je (jaký je cíl hry apod.). Je to sice na dalších stránkách, ale přece jenom…

trvalý odkaz | komentáře (21)

W3C upgradovalo svůj (X)HTML validátor. Nová verze Markup Validation Service v 0.6.5 je k dispozici od včerejška. Více ve zprávě W3C Markup Validator Upgraded.

Na první pohled zaujme nový zjednodušený vzhled validátoru. Nová je dokumentace. Do nové verze byly zapracovány změny provedené v předchozích beta verzích 0.6.5. Důležité ale samozřejmě bude, jak si validátor poradí se samotnou validací. To ukáže čas.

trvalý odkaz | komentář (1)

A List Apart 179 přináší 2 celkem zajímavé články. Dan Cederholm zveřejnil další variantu na téma kulaté rohy. Trenton Moss shrnuje argumenty ve prospěch přístupnosti webových stránek.

Kulaté rohy a vrchol hory

Dan Cederholm v článku Mountaintop Corners ukazuje, jak vytvořit v definičním seznamu kulaté rohy a efekt siluety hory. U definičního seznamu pevné šířky používá obrázky s definovanou průhledností. Zvlášť je definováno pozadí pro značku dl (spodní kulaté rohy a silueta hory) a pozadí pro dt (horní část rámečku).

Co je přístupnost webu

Trenton Moss článkem What Is Web Accessibility? uvádí čtenáře do problematiky přístupného webu. Nepřímo se snaží ukázat užitek přístupnosti. Píše o lidech, kteří přístupnost především potřebují. Nezůstává pouze u postižených, ale zaměřuje se také na uživatele nejmodernějších technologií.

Vy, co víte o tématu hodně (téma je hojně diskutováno i na odborných blozích), asi nic nového neobjevíte, ale článek na jednom místě shrnuje mnohé podstatné argumenty.

trvalý odkaz | komentář

David Špinar se ptá: Je dobře přístupný web zároveň lépe použitelný? Na pomoc si bere studii Access and Inclusion for Disabled People (Disability Rights Commision).

David se ve spotu zaměřil na srovnání dvou skupin uživatelů (nevidomí a tzv. normální uživatelé), kteří měli splnit sadu úkolů na 3 přístupných a 3 nepřístupných webech. Studie hodnotila mj. čas splnění úkolu. Výsledky hovoří jasně. Obě skupiny potřebovaly pro splnění cíle na nepřístupných stránkách zhruba o polovinu více času.

Málokdo z kritiků přístupnosti si asi uvědomuje, jak ten čas letí, když jsme vystaveni stresové situaci.

Souvislosti

• Přístupnost očima skutečně hendikepovaných - David Špinar
• Hendikepovaní uživatelé testovali přístupnost - Petr Weida

trvalý odkaz | komentář

Víťa Dlouhý vyzývá tvůrce webů: Nestylujte formuláře! A já se k němu přidávám, protože není třeba návštěvníka mást ještě víc, než jak je zmaten, když na váš web přijde. Návštěvník očekává, že některé prvky budou mít takový vzhled, na který je zvyklý (třeba ze svého OS). Vím, že tento názor může být pro příznivce Webů X šokující, ale co nadělám.

Požadavek na nestylování formulářů neberu jako dogma. Vím, že jsou weby, které stylovat formuláře potřebují. Jsou to právě Weby X. Ale většině webů to ubírá na výkonu. A nad tím je třeba se zamyslet.

Mimochodem, Martin Michálek na Živě.cz boří v článku Mýty současného webdesignu některé zažité představy o tom, jak má vypadat webová stránka:

Stejně jako každý rodící se obor je i webdesign zamlžen mnoha mýty. Pojďme se některým z nich podívat na chrup. Třeba společně zjistíme, že jsou zbytečné a můžeme na ně vzít zubařské kleště.

Souvislosti

• Stylování formulářových prvků. Ehm. - Petr Staníček
• Barvy formulářů a problém s funkcí Vysoký kontrast - David Špinar
• Nemalujte formuláře - Jiří Bureš
• Veselá barevná ejchuchu - Jiří Bureš

trvalý odkaz | komentáře (4)

Dušan Janovský reinkarnoval spotem Pišme o software 1/3 můj prosincový spot Mých Top 10 SW 2003. Dušan apeluje na blogery:

Znám málo dobrých programů na tvorbu webu. Kamarádi bloggeři, rozepište se prosím o těch svých!

Spot se setkal s velkou odezvou. V tuto chvíli je pod spotem 13 odkazů. Pokud Vás zajímá, jaké nástroje pro tvorbu webu používají zkušení tvůrci webových stránek, čtěte. Spot má v nadpisu 1/3. Už se těším na další pokračování.

trvalý odkaz | komentář

Jaký používat název pro homepage v navigaci? Pro en-píšící tvůrce to zase takové dilema není. Stačí použít Home/Homepage případně název webu. Co si má ale počít našinec?

Na Plaváčkové blábolníku jsem rozpoutal na téma užití Home diskusi pod spotem Jsou webdesigneři odtrženi od reality?. Hned na začátku musím říct, že použití cizojazyčných pojmů není šťastné řešení. Uživatel je zbytečně maten mixem jazyků a mnozí vůbec neví, co nějaké hómepáge znamená. Některá slovní spojení jsou příliš dlouhá i když mohou být výstižná. Jiná vyvolávají nejrůznější asociace - třeba takové Domů. Zatím každé řešení, které jsem použil, má své mouchy. Shoda na českém internetu rozhodně nepanuje. Stačí si projít pár webů.

Google na dotaz s operátory allinanchor:/allintitle: právě teď vrací:

• domovská stránka: 3500/9030
• hlavní stránka: 16 900/8290
• úvodní stránka: 5970/9000

Uvedená čísla je třeba brát s rezervou, protože je do výsledků zanesen určitý šum. Přesto jsou výsledky zajímavé. Třeba takový rozpor mezi názvem stránky a použitým textem odkazu. Zdá se ale, že v souboji 3 dlouhých vítězí hlavní stránka.

Jak to vidíte vy? Komentujte a hlasujte v nové anketě.

Souvislosti

• Jak se uživatelé vracejí na úvodní stránku webu - Marek Prokop
• 6 základních stylů navigace - Marek Prokop
• Vždyť tisknout je tak snadné! Nebo ne? - Plaváček
• Odkazy na sebe sama - Jan Bien

trvalý odkaz | komentáře (20)

Oddělení formy a obsahu při tvorbě webu je zřetelný a pochopitelný trend. Používání značek k tomu účelu, ke kterému jsou určeny, by mělo být samozřejmostí (správné používání nadpisů, seznamů, tabulek pro tabulková data atd.). Formátování patří do CSS. Dalším úhlem pohledu na stejnou věc je také oddělení chování webové stránky od obsahu.

Peter-Paul Koch včera zveřejnil velmi zajímavý článek Separating behavior and structure. Shodou okolností mě zaujala myšlenka ze spotu Petra Staníčka Změna stylu bez Javascriptu, která s tím úzce souvisí:

WWW stránku tvoří text a hypertexové odkazy. Všechny ostatní prvky jsou jen volitelná nadstavba a stránka musí být připravena fungovat bez nich.

Koch píše o rizicích, která jsou spojena s nevhodným použitím JavaScriptu na webových stránkách. Popisuje špatné následky pro použitelnost, přístupnost apod. Zaměřuje se především na to, jak by měl uvažovat tvůrce webu, který chce používat JavaScript správně. Mimo jiné zmiňuje:

• Jak uzpůsobit strukturu dokumentu.
• Jak šetřit JavaScriptem - raději použít HTML/CSS.
• Jak využívat správné značky pro daný účel.

trvalý odkaz | komentáře (5)

Vstupní stránky. Každý je zná. Skoro prázdná stránka s nápisem (v lepším případě) Vstupte nebo Enter (na české stránce obzvlášť vhodné) pořád přežívá.

Jennifer Kyrnin se v článku Splash Pages: Pros and Cons zamýšlí nad výhodami a zápory vstupních stránek (via Asterisk). Uvedené klady jsou v reálu samozřejmě převálcovány zápory. A já doplním ještě jeden významný zápor. Lidé na web nepřichází většinou přes titulní (vstupní) stránku, ale skočí rovnýma nohama přímo doprostřed webu. Na stránku, kterou jim nabídne vyhledávač. Takže si klidně ušetřete práci s vytvářením vstupní stránky.

Souvislosti

• Na web oknem přes záchod - Marek Prokop
• How did you get here? - Jeff Lash
• Dodatečná navigace od gorily - Jiří Bureš

trvalý odkaz | komentáře (8)

Debaty ohledně validity jsou nekonečné. Zapojují se do ní fanatičtí pragmatici absolutní validity, umírnění realisté, kterým nevadí plně použitelné nevalidní stránky, i frikulíni stavějící zábavu nad zpátečnictví standardů. Validita stránky je také snadno dostupným prostředkem pro kritiku webu. Sám vím, jaký ohlas vzbudí třeba informace o Google v novém kabátě nebo kritika VZP na Interval.cz.

Drtivé většině uživatelů internetu je nějaká samoúčelná validita šumafuk - vyžadují zábavu a informace, chtějí splnit svůj cíl. Pokud jim nestandardně napsaný kód nebrání v používání stránky, jsou klidní. A i když je stránka sprzněná, většinou nedávají vinu nevalidnímu kódu.

Něco málo o standardech potažmo o validitě by měli vědět webdesignéři. Mnozí z Vás čtenářů conBLOGu pracuje jako webdesignéři. Najdou se určitě i tací, kteří se zúčastnili výběrových řízení. Možná je mezi čtenáři také někdo, kdo je odpovědný za výběr profesionálních webdesignerů do firem. Rád bych zjistil, jaké jsou požadavky kladené na profesionálního webdesignéra? Podělte se o své zkušenosti z výběrových řízení.

Nezajímají mě názory, jak by to mělo vypadat - o tom koneckonců píšu pořád dokola. Zajímá mě realita. Vyžadují zaměstnavatelé u webdesignéra dobrou znalost standardů? Naladění na vlnu sémantiky, přístupnosti a použitelnosti? Jak doopravdy vypadá takový přijímací pohovor?

trvalý odkaz | komentáře (21)

Heidi Pollock v obsáhlém článku The End-All Guide to Small-Screen Web-Dev seznamuje tvůrce webů se správnými postupy vytváření stránek pro webová zařízení s malou obrazovkou (např. PDA, mobilní telefony apod). Via Digital Web Magazine.

Související

• Weblogy CZ: Weblogy na PDA - Jiří Bureš
• Má mít web textovou verzi? Ne! - Marek Prokop
• CSS pro mobilní zařízení - Lukáš Oborský

trvalý odkaz | komentáře (4)

Dnes zveřejnil Interval.cz mou recenzi Všeobecná zdravotní pojišťovna. Není to veselé čtení, ale jako obraz stavu je to dostatečně výstižné.

trvalý odkaz | komentáře (2)

David Špinar upozorňuje na problém s funkcí Vysoký kontrast při zobrazení formulářů ve webových stránkách. Pokud nadefinujete styl formuláře jiný než výchozí, riskujete, že bude nepřístupný. David testoval 4 různá nastavení vzhledu formulářů a na různých prohlížečích ověřoval, co se stane, když zapne ve Windows funkci Vysoký kontrast. A jaký je závěr:

Jak tedy optimálně definovat barvy u formulářových prvků? Podle mého názoru ideálně nijak. Je-li to možné, měl by tvůrce nechat na systému, jakou barvu přidělí pozadí a písmu ve formulářovém poli. Tato varianta je přístupná jak v MSIE tak v Mozille/Firefoxu.

Stylování formuláře se možná projeví tak, jak očekáváte. Je ale pravděpodobné, že cílové zařízení přeformátuje některé a nebo všechny prvky podle svého uvážení. A tak se může stát, že návštěvník uvidí místo vyplněného textového pole černý obdélník. A tady končí zábava.

Souvislosti

• Stylování formulářových prvků. Ehm. - Petr Staníček
• Veselá barevná ejchuchu - conBLOG

trvalý odkaz | komentáře (3)

Bylo by krásné, kdyby všechny prohlížeče pracovaly s CSS tak, jak říká norma. Ale realita je pro mnohé tvůrce webů až příliš krutá. Dave Shea přináší 7 tipů jak řešit problémy s návrhem CSS:

• Rozsviťte okraje (např. border: #F00) a uvidíte přesně, co se děje. Je chyba v margin nebo padding? Dobrou službu také udělá dobře nastavená barva pozadí - background-color
• Zkontrolujte selektory - kaskáda a dědění nemusí fungovat tak, jak si myslíte. Vhodně nastavte vlastnosti selektoru (udělejte z něj šeredu) a pokud se vlastnost neprojeví kde má, máte svého pachatele.
• Nastavte hodnoty - je velikost písma dobrá v mozille ale už ne v IE? Zvětšení velikost někdy udělá divy. Změna z 0.9em na 0.91em může způsobit úplné zázraky.
• Skryjte vybrané prvky - zrušte okolní prvky, odstraňte rodiče. Problém je potřeba zjednodušit. Používejte komentáře, nemažte. Ušetříte si práci.
• Zbavte se nepotřebného CSS - jednoduchým kódem nic nepokazíte.
• Nastavte okraje na 0 - prohlížeče někdy používají jiné defaultní hodnoty než by se zdálo.
• Validujte - někdy můžete hledat chyby jinde, než jsou. Takový neuzavřený div udělá se stránkou úplné divy.

Já dodám ještě, že je dobré, když máte hezky napsaný kód. Odsazujte zdrojový kód pomocí tabulátorů. Ze struktury kódu by mělo být patrné zanoření značek. Pořádek a jasná struktura by měla být i v CSS souboru. Podobné vlastnosti patří k sobě a dodržování pořadí vlastností taky nezaškodí. Ale toto by už bylo na samostatný spot.

trvalý odkaz | komentáře (4)

Živě před nějakou dobou spustilo nešťastný seriál o tvorbě webových stránek, který záhy po bouřlivé reakci lidí znalých mj. metamorfoval do seriálu o tvorbě XHTML. Včera na mě z RSS čtečky jukl titulek Začínáme s XHTML - Základní elementy a lákavá upoutávka:

V dnešním článku se budeme věnovat textovým elementům a entitám. Textové elementy jsou sémantické, udávají význam textu. Všechny elementy o kterých se zmíním musí být uzavřeny v elementu body.

Toto mě naladilo a tak jsem si článek otevřel a začal číst. Pak ale následoval pád mého systému a tak jsem si odnesl jen 2 informace:

• prý existují (pouze) elementy řádkové a blokové (sic!)
• strong se vykreslí tučně a em jako kurzíva (sic!)

Po restartu PC už ale odkaz není funkční - vždycky mě to vykopne na (ne)titulku Živě. A teď nevím, jestli byl článek stažen, jestli je chyba na mém přijímači, jestli hapruje vysílač, nebo za to mohou američtí imperialisté.

Souvislosti

• Živě učí HTML - conBLOG
• ŽIVĚ.CZ : Jak nedělat webové stránky - Daniel Dočekal
• Tak jo, i já se vyjádřím ke kurzu tvorby webových stránek na Živě - Petr Staníček
• Živě přeřadilo na XHTML - conBLOG

trvalý odkaz | komentáře (3)

Když jsem dneska navštívil web CZilla, opět jsem si uvědomil, že návštěvníci nejsou stejní. Zdá se vám to jasné? Říkáte si, že nemám co psát a tak přidávám další nic neříkající spot?

Na CZilla je spuštěná anketa Používáte RSS čtečky? Odhlasoval jsem, abych se dostal k průběžným výsledkům. V anketě v tom okamžiku odhlasovalo 539 lidí. Slušný vzorek. Takové jsou výsledky:

• Ano: 16 %
• Jen integrované: 9 %
• Ne: 25 %
• Co je to RSS: 50 %

Já jsem se tady na conBLOGu ptal dvakrát na věci související s RSS a mj. jsem zjistil, že:

• 7 % v letošním únoru odpovědělo Co je RSS?
• 13 % respondentů v létě 2003 nepoužívalo RSS.

Výsledky se velmi liší. A přitom by se dalo předpokládat, že lidé používající Mozilla prohlížeče patří mezi ty i-zdatnějí. Přesto ale neví vše. RSS je pro ně ne zcela běžný pojem.

Co z toho plyne? Tvůrce webu by si měl dát velký pozor, jaký obsah a v jaké formě svým uživatelům nabídne. Co je tvůrci nebo zadavateli nad slunce jasnější, to může návštěvníka dokonale zmást. Naše představy o návštěvnících se mohou zásadně rozcházet se skutečností. Proto platí, že nestačí jen předpokládat, je třeba také prověřovat.

Související

• Obcházení pastí - Dušan Janovský
• Přístupnost a webdevelopeři - David Špinar (a já dodávám obecnou zásadu: nepředpokládejme ale prověřujme).

trvalý odkaz | komentáře (4)

Vzpomenu jeden starší článek ze Stopdesign. Popisuje několik možností, jak by mohla vypadat náhrada textu obrázkem pomocí background-image v CSS a HTML: Using Background-Image to Replace Text - Douglas Bowman.

Douvisející

• Články D. Bowmana na Stopdesign

trvalý odkaz | komentář

ALA 172 přináší článek o stínech a o kulatých rozích:

• CSS Drop Shadows - Sergio Villarreal ukazuje jak k obrázkům nebo třeba nadpisům vykouzlit pomocí CSS stíny.
• CSS Design: Creating Custom Corners & Borders Part II - Søren Madsen radí, jak vytvořit pomocí CSS kulaté rohy u boxů, které jsou umístěny na pozadí tvořeném barevným gradientem.

trvalý odkaz | komentáře (5)

Po ne zcela povedeném prvním díle seriálu o výuce HTML přichází Šimon Grimmich s pokračováním. Poučil se z některých připomínek a skočil rovnou na XHTML: Začínáme s XHTML. To nezní špatně.

Nechci se vrtat v nedotažených větách, které sem tam postrádají přesný význam. Nechci se pídit po chybách (míchání pojmu element a tag apod.) a mlžení. Dneska si chci užívat slunečný den.

Aktualizace: Petr Staníček do komentářů mj. uvedl: …Pro autora bylo zajisté zlatým věkem HTML plné [FONT]ů, [B], [BR] a tabulek. V tom je určitě skvělý - bylo to patrné z prvního dílu, z této části to přímo čiší. Fajn, proč ne. Ale v XHTML fakt tápe…

trvalý odkaz | komentář

Některé prohlížeče mají velmi užitečnou funkci - filtrování obsahu. Vedle přístupnosti a použitelnosti je u webových stránek důležitý uživatelský prožitek (user experience). Ten v sobě přístupnost a použitelnost zahrnuje. A k tomu přidává ještě další faktory. Třeba to, jak je návštěvník schopen splnit cíl, pro který se na web vydal.

Jako pokusného králíka jsem zvolil TOPlist, který dost často používám, a který dobře poslouží dalšímu výkladu.

Pryč s reklamou

Filtrování se většinou používá pro odstranění reklam z webových stránek.

Obr. 1 - Stránka včetně reklam

Reklamy agresivním způsobem ničí dojem ze stránky. Přehlušují vlastní obsah, ruší a zpomalují práci. Po odfiltrování reklam se prožitek výrazně zlepší:

Obr. 2 - Stránka bez reklam

O krok dál

Autor nemůže nikdy dopředu přesně určit, jak budou se stránkou návštěvníci pracovat. Někdy zvolí pro zobrazení nevhodné nebo přehnané prostředky.

Na obr. 2 až příliš výrazně vystupují do popředí červené šipky znázorňující pokles návštěvnosti. Mimo to se v oblasti zobrazují i modré a zelené šipky. Všechny informace jsou smíchány dohromady a obtížně se v nich orientuje. Proto jsem odfiltroval červené šipky (obr. 3). Informace se neztratila (vím, že nic znamená pokles - zajímají mě pouze vzestupy).

Z hlediska práce se stránkou nepoužívám vpravo se opakující symboly grafů. Pro můj úkol je to nadbytečný prvek, který mě informačně zahlcuje. Proto je také odfiltrován:

Obr. 3 - Odfitrované červené šipky

Závěr

Tento spot nemá za cíl kritizovat TOPlist. Chci ukázat, že na stránkách, které často navštěvuji, mohu díky filtrování obsahu zakázat prvky, které nepoužívám, nebo ty, které mi brání ve snadnému přístupu k informacím.

Také autoři webových stránek by měli pečlivě zvážit, k jakému účelu jejich stránky návštěvníci užívají. Tomuto účelu pak musí podřídit formu.

trvalý odkaz | komentáře (18)

Kaskádové styly jdou použít nejen pro formátování v prohlížeči, ale velmi snadno také pro jiná média. Je velmi snadné vytvoři samostatný předpis například pro tiskové výstupy a připojit jej do dokumentu.:

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

Vzhled definovaný pomocí CSS neznamená jenom, že "to" bude nějak vidět, ale také jestli "to" bude vůbec vidět. Joshua Porter v článku Designing for Context with CSS (A List Apart 171) zdůrazňuje, že různá média nabízí různé příležitosti, jak vyjít uživateli vstříc.

Tisknete?

Vyzkoušeli jste si někdy vytisknout některé své webové stránky? Pokud ne, tak je nejvyšší čas. Nevím jak vy, ale já si občas nějaký zajímavý článek vytisknu, abych si jej mohl v klidu přečíst. Někdy je tiskový výstup tristní (odřezaný text je další dobrý argument proti špatně provedenému tabulkovému layoutu). Znám dokonce pár lidí, kteří nebrouzdají a čtou výhradně vytištěné webové dokumenty (nejsou to žádné nevýznamné nuly, ale i lidé, kteří rozhodují o milionech). Joshua Porter se ptá:

Co se stane, když někdo, kdo nenavštívil váš web čte tiskový výstup jednoho z vašich článků? Jaké sdělení můžete té osobě dát, když si vytiskne článek a nemůže si jej přečíst online?

Stačí špetka CSS

V CSS souboru stačí použít display: none. Věci, které nemají v tiskovém výstupu lze skrýt (např. navigaci apod.). Naopak lze některé věci nabídnout jen v tiskové verzi:

• Jméno uživatele - v určitých situacích to zvýší vaši šanci na úspěch.
• Speciální nabídky - člověk, který si stránku vytiskl se dost odlišuje od náhodného návštěvníka.

Mimochodem na tiskové verzi ALA mi dost vadí, jak plýtvají papírem. Obří nadpisy, velké písmo a mezery mezi řádky a odstavci podle mého názoru zvyklostem tiskových médií moc neodpovídají.

trvalý odkaz | komentáře (4)

V aktuálním A List Apart 171 najdete mj. užitečný článek Helping Your Visitors: a State of Mind. Jeho autor Nick Usborne v něm rozvíjí imperativ tvorby webových stránek: pomáhat každému návštěvníkovi dosáhnout jeho cíl. A to není jednoduché.

Co si musí každý tvůrce webu uvědomit:

1. Navigace po webech je náročná. Každý autor ví, že se na webu, který navštíví, musí nějakou dobu učit jak to funguje. Žádné dva weby nejsou úplně stejné a to návštěvníky brzdí v rozletu.
2. Co lidé hledají? Pomozte jim to najít.
3. Návštěvníci prolétnou nadpisy a odkazy a to tak, že rychle. Záplava informací jim rozhodně nepomůže. Tvořte přehledné a srozumitelné stránky. Struktura webu musí vést návštěvníka k jeho cíli.
4. Přesnost ve výrazech je nutná. Odpusťte si firemní žargon. Proberte se logy, abyste zjistili jaké výrazy použili lidé, kteří přišli na váš web přes vyhledávač.

Na závěr autor shrnuje: pomáhejme návštěvníkům (chraňte je); hovořme jasně jejich jazykem; význam každé stránky musí být jasný. Ptejte se sami sebe co můžu udělat, aby tato stránka byla užitečnější pro mé návštěvníky.

trvalý odkaz | komentář

Petr Staníček ve spotu Web X a Web Y napsal větu, kterou by si měl každý autor čehokoli zarámovat a pověsit nad psací stůl:

Pro autory je nadmíru důležité se správně rozhodnout, co, pro koho a za jakým účelem svůj web tvoří.

Petrovi to prostě nedá a zas a znovu se vrhá do nikdy nekončícího boje zastánců formy a zastánců obsahu. Dlužno podotknout, že obsaháři (ó jak jsme nudní) většinou chápou, že je třeba zvolit vhodnou formu a obsah pro konkrétní účel. Nečiní jim problém použít Flash, když je třeba. Nebo naopak podřídit formu obsahu tak, že se kůlerům udělá zle od žaludku. Druhá strana naopak vyznává své heslo já mám Flash, kdo je víc.

trvalý odkaz | komentáře (3)

Šimon Grimmich se na Živě.cz pustil do seriálu Jak dělat webové stránky. Pokud se Vám na spojení Živě a výuka HTML něco nezdá, podívejte se na 1. díl a suďte podle článku - ne podle tohoto spotu.

Na prvním díle mě především zaujalo několik neotřelých slovních spojení, zavádějících informací a osvícenských příkladů typu <b>Tučný text<b> (to uzavírací lomítko tam opravdu není).

trvalý odkaz | komentáře (9)

Ve čtvrtek jsem se zapojil spotem Je k něčenu accesskey do diskuze o přínosu atributu accesskey pro přístupnost a použitelnost stránek. Ve spotu jsem poukázal na vznik nových bariér, které vznikají používáním písmen v accesskey. Nepřišel jsem na to samozřejmě sám (Jukka Korpela). Mark Pilgrim ve známé knize Dive Into Accessibility uvádí následující zkratky (a další užívá na svých webech):

Ale pozor. Neexistuje jednotný předpis, který by řekl, jaká čísla jsou přiřazena pro dané akce. To je další bariéra.

Souvislosti

• Zvyšuje accesskey přístupnost stránek? Ano! - Víťa Dlouhý
• Accesskey - použít či nepoužít - Lukáš Mačí
• Improving accessibility with accesskey in HTML forms and links - Jukka Korpela
• Proč u mě accesskey zhoršuje přístupnost stránek - Petr Staníček
• Accesskey? Ano, opět accesskey! - Tomáš Hodboď

trvalý odkaz | komentář

O HTML atributu accesskey jsem chtěl napsat v době, kdy jsem prožíval jedno ze svých puristicko-evangelizačních období. Nakonec jsem to neudělal především ze dvou důvodů:

1. Nechtěl jsem odradit ty, kteří chtějí na svých stránkách zlepšit použitelnost.
2. Nechtěl jsem popudit propagátory použitelnosti.

Tento spot je vlastně reakcí na Zvyšuje accesskey použitelnost stránek? Dušan Janovský ve spotu popisuje, kdy a jak použít accesskey a uvádí důvody, proč accesskey naopak použitelnost u většiny uživatelů zhoršuje:

• Prohlížeče mají různé zkratky pro stejné funkce (a naopak) - to je dobrý důvod.
• Uživatel používá zkratky pro nějakou funkci prohlížeče - accesskey tuto funkci blokuje pro sebe - toto je fatální důvod, proč accesskey nepoužívat.
• Uživatelé obvykle horkou klapku neočekávají - to zas tak nevadí (proč ji pak mačkají?).

Proč používat accesskey

Atribut accesskey by měl přinést užitek pro hendikepované uživatele. Ti by měli jeho pomocí vyrovnat svou nevýhodu. Dost dobře si ale neumím představit, jak takový postižený člověk vstřebá množství klávesových zkratek, které se nota bene mohou web od webu podstatně odlišovat. Ulehčit by jim to měl tzv. Accessibility statement, kde by se měl mj. nacházet popis použitých klávesových zkratek. Ty by měly být pro celý web použity jednotně. V uvedeném příkladu je vidět, že klávesové zkratky mohou být přiřazeny kombinaci Alt+číslo - tam Dušanovy argumenty ztrácejí na síle.

A co autoři

Používají autoři webů accesskey? Na webech, kde se pohybuji občas na tuto funkci narazím (má cache skrývala kolem 5 % webů s výskytem accesskey). Ale co běžní uživatelé běžných webů? Z cache několika uživatelů různého stylu práce a zájmů jsem vzal 675 souborů .htm(l) a hledal v nich text accesskey. A výsledek? Pro mě osobně dost zdrcující. Pouze 0,15 % stránek použilo accesskey! Jedna jediná stránka. To je hluboce pod úrovní statistické chyby. Autoři z různých důvodu accesskey ignorují. Proč?

Je to k něčemu dobré?

Zajímaly by mě názory lidí, kteří jsou odkázání na použití accesskey. Znají tuto možnost? Využívají ji? Jaké mají s tímto zkušenosti (já jsem právě zjistil, že accesskey používá b2 při editaci spotů)?

Místo závěru

Dušan mj. píše …Říkáte si možná, že to alt + D je nějaká moje úchylka… a já mu vzkazuji: není to úchylka, já to tak dělám taky (i když to vlastně neznamená, že to úchylka není).

trvalý odkaz | komentáře (16)

David Bureš dnes na Interval.cz článek Optimalizace pro weblogy podruhé. Na třech praktických příkladech ukazuje sílu blogů pro zviditelnění daného internetového dokumentu. A nejlepší cesta podle Davida je zaujmi nebo provokuj!

Souvislosti

• Dvakrát z Intervalu - conBLOG
• Optimalizace pro weblogy - David Bureš

trvalý odkaz | komentáře (7)

Včera Marek Prokop odkazoval ve spotu Design zápatí v příkladech na 2 články, které zdůrazňují význam zápatí na stránce a je tady další vydání A List Apart 170. Zápatí se týká článek Exploring Footers - Bobby van der Sluis.

Dozvíte se více o možnostech pozicování zápatí, o řešení problémů v IE5.x/Win, o použití DOM atd. V článku najdete také množství příkladů.

trvalý odkaz | komentáře (8)

Russ Weakley podrobně vysvětluje, jak používat definice. Víte třeba, že lze vícenásobně použít <dt> nebo <dd> namísto brkání nebo nepřípustného užívání blokového tagu p?

Russ připojuje také několik příkladů formátování definičních seznamů. Za pozornost stojí třeba:

• Kalendář událostí
• Obrázková galerie
• Pseudotabulka

trvalý odkaz | komentáře (9)

Typografická pravidla hovoří jasně: formátování musí být přeneseno na interpunkční znaménko, které bezprostředně následuje za formátovaným textem:

1. příklad: - správně
2. příklad: - špatně

Co se týká sémantiky, tak je tady menší rozpor. Význam má většinou pouze daný výraz. Je třeba typograficky vyznačovat také interpunkční znaménko? Nebude narušena sémantika? Má přednost typografie před sémantikou?

Vyhledávače s pravděpodobností, která hraničí s jistotou, neberou interpunkční znaménka v potaz - nespojují je s daným slovem. Proto není nutné porušovat pravidla typografie z obavy, že by formátováním interpunkčního znaménka došlo k porušení sémantiky.

trvalý odkaz | komentáře (10)

Trh jsem ji přiznal Otakar Švankmajer ve hře Járy Cimrmana Přetržené nítě. Já jsem zase roztrhal tabulku.

Častým argumentem pro vytváření layoutů webové stránky pomocí CSS je možnost je měnit centrálně - a to tabulkové layouty neumožňují. A co když ano. Taková tabulka jde totiž docela dobře přeházet.

Ukázku berte jako (ve většině případů) samoúčelnou víkendovou ukázku možností CSS. Protože proč něco dělat jak je v ukázce, když to jde pomocí div? Navíc spousta tabulkových layoutů hojně využívá třeba pro nadpisy obraty typu:

<center><big><font color="#FF3333">Nadpis</center></big>

Ukázka, kterou jsem převzal z jednoho webu, mluví sama za sebe. Tady je pak všechno marné. Přitom se stačí naučit tak 10, 15 značek a vědět, jak je použít. Ale ono to asi není zas tak jednoduché.

trvalý odkaz | komentáře (15)

Simon Willison publikoval článek Simple Tricks for More Usable Forms - SitePoint. V článku najdete mj. rady jak:

1. Po zobrazení formuláře umístit kurzor do výchozího prvku - ušetříte uživateli jedno kliknutí.
2. Používat klikatelné popisky (label for="jmeno_prvku") - po klepnutí na popisek se focus nastaví na asociovaný prvek.
3. Měnit styl vybraného prvku - tady mám velké výhrady. Vzhled standardních (formulářových) prvků by se neměl měnit - matení uživatele.
4. Při události onfocus vybrat celý text - uživatele nemusí defaultní text mazat.
5. Při psaní do hlavního pole měnit titulek dokumentu - tohle si dovedu představit jen u zvláštních případů.
6. Validovat vstupy od uživatele.

Celé řešení můžete vyzkoušet na příkladu.

Souvislosti

• Simple tricks for more usable forms - Simon Willison
• Elegantní formulář - Petr Weida

trvalý odkaz | komentáře (3)

Petr Staníček reaguje ve spotu CSS versus tabulkový layout na Dušanův Skutečné výhody CSS layoutu. Argumentace je střízlivá a mě nezbývá, než souhlasit.

Například Dušanova informace o 10% - 20% zmenšení CSS pozicovaných a stylovaných stránek mi z vlastní zkušenosti připadala nízká. Sám jsem u zdrojových HTML kódů webu dospěl k číslům začínajícím na 30 %.

Petr na rozdíl od Dušana víc tlačí na pilu. Jeho racionální odpor k používání tabulek pro layout je všeobecně známý. Jsem zvědavý, jak se bude vyvíjet diskuze.

trvalý odkaz | komentář

Tyhle odkazy si musím poznamenat (via mezzoblue). Možná zaujmou i vás.

• CSS Hacks and Filters - Chris Nott.
• CSS-only Filters Summary - jak odřezat prohlížeče od CSS.
• Common XHTML Validation Errors - nejčastější chyby v XHTML kódech.

trvalý odkaz | komentář

Dušan Janovský se v posledních 2 spotech vrhl na CSS:

• Skutečné výhody CSS layoutu - Dušan jako hlavní výhodu vidí snížení doby nutné pro zobrazení stránky a demistifikuje ostatní často proklamované výhody.
• Medvědí služba CSS stylům - pokud nemáte rádi samoúčelné (zne)užívání technologií, dáte Dušanovi za pravdu.

Je škoda, že Dušan nemá na blogu komentáře. Určitě by to bylo zajímavé čtení.

trvalý odkaz | komentář

A List Apart přináší další užitečný článek The Perfect 404 - Ian Lloyd:

Welcome to the world of the Error 404 page. You’ve requested a page — either by typing a URL directly into the address bar or clicking on an out-of-date link and you’ve found yourself in the middle of cyberspace nowhere. A user-friendly website will give you a helping hand while many others will simply do nothing, relying on the browser’s built-in ability to explain what the problem is. We can do better than that, can’t we?

Pokud je to možné, tak by měl každý web poskytnout návštěvníkovi, který se pokusil otevřít neexistující dokument, stránku 404 (conBLOG ji stále nemá). Obsahem článku The Perfect 404 je, jak takovou stránku vytvořit a přizpůsobit konkrétnímu případu.

trvalý odkaz | komentář

Petr Staníček ve spotu Co to je Lorem ipsum připomíná užitečnost vycpávkového textu Lorem ipsum dolor sit amet, consectetuer adipiscing elit… Text se využívá od středověku např. v typografii, kde nahrazuje konkrétní text a slouží jako neutrální vycpávka volného prostoru. Vzniká poměrně dokonalá představa o vzhledu stránky. Text Lorem ipsum odpovídá vzhledově normálnímu textu - zachovává délku slov, vět a odstavců, střídání písmen ve slovech, v textu nevznikají typografické kiksy: (např. řeky).

Jedinou nevýhodou Lorem ipsum je to, že neobsahuje české háčkované a čáskované znaky. V diskuzi pod Pixyho článkem je odkaz na stránku Cold Blooded Turkey, kde je možné generovat pseudočeský text.

Při té příležitosti jsem si vzpomněl na můj starší program na generování pseudočeštiny, která ale nebyla moc dokonalá. Asi jej opráším.

Souvislosti

• www.lipsum.com - mj. generátor Lorem ipsum
• Cold Blooded Turkey - generátor pseudotextů

trvalý odkaz | komentáře (10)

Máme tady ALA 167, které tentokrát odpovídá na jednu z nejčastěji se opakujících otázek tvorby beztabulkových layoutů a natahuje snad vše, co na stránce lze:

• Faux Columns - Dan Cederholm popisuje, jak natáhnout pozadí pravého sloupce až úplně dolů.
• Elastic Design - Patrick Griffiths - je obtížné přejít z fixního návrhu na pružný? Jak přejít od px k em a %.

trvalý odkaz | komentáře (2)

Anne van Kesteren nabízí své řešení problému, který má IE s p:hover. Ukázku Javascriptového řešení najdete na stránce MSIE Supports p:hover :).

Vás čtenáře conBLOGu bych ještě požádal, abyste do komentářů napsali nějaká rozumná využití selektoru hover nad odstavci. Nechci působit jako notorický bručoun, ale jak to Anne předvádí, mi nepříjde zrovna šťastné - myslím tím, že se odkazy podtrhnou (a vůbec zvýrazní) až po najetí na odstavec. Třeba Pixy to má rozhodně uděláno líp.

trvalý odkaz | komentáře (7)

Mark Pilgrim se pustil do vysvětlení relativního adresování v HTML. Na pomoc si bere:

• RFC 1808 - definuje, jak pracovat s relativními adresami a base URI.
• RFC 2396 - doplňje předchozí RFC.

trvalý odkaz | komentář

Shirley E. Kaiser nabízí ve spotu Abbreviations, Acronyms, and Shortened Words několik zajímavých odkazu, které se týkají značek <abbr> a <acronym>. 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í.

trvalý odkaz | komentáře (5)

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

trvalý odkaz | komentáře (4)

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.

trvalý odkaz | komentáře (6)

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.

trvalý odkaz | komentáře (5)

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.

trvalý odkaz | komentář

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

trvalý odkaz | komentář

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.

trvalý odkaz | komentáře (2)

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

trvalý odkaz | komentář

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.

trvalý odkaz | komentář

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.

trvalý odkaz | komentář

K předchozím spotům o výskytu tagů přidali své komentáře mj. také Marek Prokop a Dušan Janovský. Marek zdůrazňuje vysoký výskyt značek table a img a z toho odvozuje přetrvávající zlozvyky webdesignerů při tvorbě kódu. Slabina mého rozboru je v tom, že u některých značek z jejich výskytu nejde přímo usuzovat na jejich (ne)správné použití (viz dále).

Dušan správně poznal, že vysoký výskyt rodiny tagů table nemusí ukazovat na vládu tabulkového layoutu (i když to tak fakticky je). Vždycky závisí na typu webu. Můj web conVERTER měl v prvním rozboru výskyt tagů td a tr 22,1 %! Je to proto, že významnou část webu tvoří právě tabulková data.

Správně použitá tabulka totiž většinou obsahuje více tagů patřících do něčeho, co jsem označil výrazem rodina tagů. Desetiřádková tabulka třeba 10 různých značek v počtu 19. Obdobná situace nastává u tagu font. Rodiny značek jsem použil, aby se zdůraznilo používání určitých typů konstrukcí. Na rozpoznání, jestli je použit tabulkový nebo beztabulkový layout, jestli jsou značky použity sémanticky správně apod., by bylo třeba vyšší logiky.

Aby bylo objektivnosti učiněno za dost, dávám odkazy na podklady:

• 031121.csv (1168 B) - výstup z mé aplikace TagCounter použité pro rozbor.
• 031121.zip (8619 B) - zapakovaný excelovský soubor s vyhodnocením.

Související

• Hitparáda HTML značek - Marek Prokop
• Jiný výklad výskytu tagů - Dušan Janovský
• Výskyt tagů - Jiří Bureš
• Výskyt tagů 2 - Jiří Bureš

trvalý odkaz | komentář

Richard Rutter ve spotu Colour tool odkazuje na své oblíbené nástroje pro práci s barvami:

• Color Blend - Eric Meyer - výpočet barevného přechodu mezi 2 barvami.
• Color Schemer
• Color Scheme - Pixy - tohle zná snad každý.
• EasyRGB
• ColorMatch Remix

Pokud potřebujete vytvořit kvalitní barevná schémata pro svů web, můžete využít třeba právě tyto on-line nástroje.

trvalý odkaz | komentář (1)

První spot Výskyt tagů zaznamenal solidní ohlas. Co se týká metodiky, tak jsem použil málý vzorek: svůj web conVERTER a aktuální obsah cache mého počítače. V tomto pokračování bych nabídl objektivnější obrázek:

• 22 uživatelů různé úrovně a různých zájmů (obsah části cache prohlížeče IE)
• 1100 souborů (celková velikost 15 445 kB))
• 208 443 tagů
• Obsah cache z 21. 11. 2003

V tabulce zobrazená první patnáctka v podstatě potvrzuje stesky kritiků některých současných (a minulých i budoucích) praktik webdesignerů:

• používání tabulek pro rozvržení dokumentu
• nadměrné používání obrázků
• značka br pro vytváření seznamů, menu a odstavců
• používání zakázaných/nedoporučených značek pro formátování - např. font a b
• výskyt neexistujících nebo chybně zapsaných značek (v tabulce v položce nespec.).

trvalý odkaz | komentáře (3)

Dave Shea (mezzoblue) vydal dva po sobě jdoucí spoty o tom, jak nejlépe vytvářet CSS soubory:

• CSS Best Practices
• CSS Crib Sheet?

Z obou spotů, které odráží především Davovy praktické zkušenosti, bych zdůraznil hlavně tyto body:

• Nejprve validujte a potom hledejte chyby.
• Testujte nejprve na nejpokročilejším prohlížeči, teprve pak na ostatních.
• Ověřte, co udělá změna velikosti písma v prohlížeči.
• Jména přidělujte podle funkce ne podle vzhledu.
• Uvádějte jednotky u nenulových hodnot.
• Udržujte v CSS souboru pořádek.

trvalý odkaz | komentář (1)

Napadlo Vás někdy, jaký je výskyt jednotlivých značek (tagů) na webových stránkách? Když někoho učím HTML, tak na úvod povzbuzuji nováčka, že pro začátek vystačí s konstrukcemi do počtu prstů na rukou. Které to ale jsou?

Není nad to vše pěkně spočítat. Takto vypadá první desítka značek na mém webu conVERTER:

1. a - 27,6 %
2. td - 16,6 %
3. div - 12,6 %
4. tr - 5,5 %
5. meta - 4,4 %
6. br - 3,8 %
7. !-- - 3,6 %
8. h2 - 2,6 %
9. em - 2,2 %
10. li - 2,1 %

Zajímavé možná bude zjištění, jak jsou na tom ostatní - přece jenom nejsem reprzentativní vzorek. Pro následující žebříček posloužil obsah cache mého počítače:

1. a - 16,8 %
2. td - 14,5 %
3. br - 12,8 %
4. img - 8,2 %
5. tr - 7,2 %
6. font - 4,1 %
7. option - 4,0 %
8. p - 3,8 %
9. div - 3,1 %
10. table - 3,0 %
11. b - 2,7 %
12. input - 2,5 %
13. span - 1,9 %
14. !-- - 1,7 %
15. li - 1,5 %

Pokud výsledky z cache zredukuji na rodiny značek (např. tabulka obsahuje několik určitých značek), dostanu tento žebříček:

1. table - 24,8 %
2. a - 16,8 %
3. br - 15,5 %
4. img - 8,5 %
5. form - 7,7 %
6. font - 4,1 %
7. p - 3,8 %
8. div - 3,1 %
9. span - 1,9 %
10. ul/ol - 1,8 %

Za pozornost stojí snad až příliš vysoký výskyt tabulek a značky font. Mě osobně překvapilo vítězství br nad p.

trvalý odkaz | komentáře (12)

O tom, že je použitelnost důležitá, bylo napsáno mnoho. Jak dobré použitelnosti dosáhnout je také pro mnoho webdesignérů stará vesta. A jako (skoro) všecho lze také použitelnost měřit. Pokud chcete znát jednu z metod, jak provádět benchmarking použitelnosti, přečtěte si článek The art of usability benchmarking - Scott Berkun (via Digital Web Magazine).

trvalý odkaz | komentář

Marek Prokop v dnešním článku Přidaná hodnota optimalizace pro vyhledavače na Živě klade argumenty proti zpochybňování SEO přínosů. Protože příklady táhnou, tak si nenechte ujít poslední kapitolu ze života. Možná se někteří z vás přestanou SEO bát.

trvalý odkaz | komentář

Jacob Nielsen ve včerejším Alertbox The Ten Most Violated Homepage Design Guidelines ukazuje 10 chyb použitelnosti na domovských stránkách. Zdravý selský rozum někdy dokáže víc než hromada peněz vydaná na vylepšení firemního webu (via Sova v síti).

trvalý odkaz | komentář

Petr Staníček zveřejnil své řešení přepínání kaskádových stylů na Pixylophone. Vedle zdrojových kódů ve spotu najdete odkazy na další řešení:

• Build a PHP Switcher - Chris Clark
• Changing the layout, colour and text size… - Jim Byrne

trvalý odkaz | komentář

Na diskuzních fórech se čas od času objeví otázka, jak používat více instalací prohlížeče Internet Explorer najednou. Normálně to totiž nejde. IE je taková netolerantní mrška. Odpověď, jak nainstalovat 3 verze IE, je ale známá. Pokud máte Windows XP/2000 můžete vyzkoušet návod, který dal k dispozici Joe Maddalone (bez záruky).

Souvislosti

• Multiple installations of Windows Internet Explorer? Ethan Marcotte
• IE x 3! Dave Shea

trvalý odkaz | komentáře (13)

Marek Prokop - Jak zlepšovat návštěvnost webových stránek je dnes publikovaný první díl seriálu o internetovém marketingu.

Marek předpokládá aktivní přístup čtenářů a chce reagovat na konkrétní podněty z diskuze pod článkem (via Sova v síti, protože Živě nemá RSS).

trvalý odkaz | komentáře (2)

Jedna ze základních pouček použitelnosti říká, že by uživatel neměl být nikdy zmaten z ovládání webu.

Na začátek jeden test. Co myslíte, že znamená následující navigační řádek:

Domovská stránka > Weblog > Osobní

Asi většina z vás odpověděla, že je to tzv. drobečková navigace (bread crumb) - tj. řádková navigace, která zleva doprava zobrazuje zanořování do navigační struktury webu. Úplně vlevo stojí domovská stránka, jsme zanořeni do weblogu a nacházíme se pravděpodobně v osobním weblogu.

Chyba lávky! Výše uvedený příklad nezobrazuje drobečkovou navigaci, ale znak > byl použit pro oddělení položek na podobné úrovni hierarchie. Tvůrce měl asi na mysli toto:

Domovská stránka | Weblog | Osobní

Vysvětlení je prosté. Uživatel ve znaku > vidí šipku, která jej vede z jednoho místa na druhé. Naproti tomu znak | odděluje. Výsledkem je pak úplné zmatení. A to vše kvůli jedinému znaku.

Souvislosti

• Má drobečková navigace opodstatnění? - Jan Bien
• 6 základních stylů navigace - Marek Prokop

trvalý odkaz | komentáře (7)

Peter-Paul Koch, známý nizozemský webový vývojář, zprovoznil stránky QuirksMode.org. Na QuirksMode.org najdete velké množství informací o CSS a JavaScriptu (vyzkoušejte klepnout myší na jeden ze sloupců) se zaměřením na vzájemnou (ne)kompatibilitu mezi různými prohlížeči. (via Sova v síti).

trvalý odkaz | komentář

Petr Staníček obsáhle rozebírá použití komentářů a diskuzí. Doporučuji k přečtení všem, kteří chtějí takový způsob kontaktu se čtenáři, nebo něco podobného už na svém webu mají.

Já bych zdůraznil tři myšlenky:

• Komentáře řadit chronologicky od nejstarších - proč někteří blogeři (snad) bez rozmyslu dávají komentářům stejné řazení jako spotům ve weblogu? Vždycky mě nadrvedně, že té diskuzi nějak hůř rozumím. Že se mi zdá, jako by myšlenka postupně retardovala. Bodejť, když je vše vzhůru nohama.
• Zadání komentářů musí být snadné - takže (skoro) žádné povinné údaje. O co vám jde? Chcete přece názor čtenářů. Tak proč jim házet klacky pod nohy.
• Nechci nadpisy - proč musí komentující vymýšlet nějaké nadpisy?

Já bych snad doplnil ještě:

• Uvést datum a čas komentáře.
• Zobrazovat text komentovaného spotu (článku) - někdy mi připadá, že komentující glosuje úplně něco jiného.

trvalý odkaz | komentáře (5)

Dan Cederholm zveřejnil pěkný návod, jak pomocí kaskádových stylů měnit vzhled vnořených seznamů. Spot Styling Nested Lists na příkladu mapy webu nabízí definici CSS pro netříděný seznam tří úrovní.

Autor využívá definici následníků (kráceno):

#sitemap li { list-style: none; }

#sitemap li ul { font-size: 90%; }

#sitemap li ul li ul li { padding-left: 16px; }

trvalý odkaz | komentáře (2)

Petr Staníček prosí: Nesměrujte odkazy do nových oken. Co dodat? Třeba tohle:

• Do nového okna? - Mraveniště
• Novookenní mytologie - Sova v síti
• Nová okna od gorily - conBLOG
• Popup okna s hvězdičkou - conBLOG

Když to mám shrnout tak jsem proti neohlášenému otvírání odkazů do nových oken. Uživatele to zmate (už jsem to viděl tolikrát) a navíc pokud se někdo na náš web nevrátí, je to proto, že se tam vrátit nechce.

Petr Staníček vzápětí přidal spot K čemu je Lynx? Užitečné čtení pro zastánce trtdlování a další tip pro testování použitelnosti.

trvalý odkaz | komentář

Russ Weakley, autor Listamatic, Listamatic 2 a Listutorial, vydal Floatutorial. Pokud se chcete nechat vést krok za krokem směrem k dokonalým seznamům s využitím CSS, sáhněte po některém ze jmenovaných nástrojů.

Floatutorial v jednotlivých krocích pomáhá autorovi tvořit plovoucí prvky (obrázky, tlačítka, řádkové seznamy atd.). Každý krok obsahuje popis úkonu, příklad, CSS kód a HTML kód. Nové části kódu jsou odlišeny barvou a tloušťkou písma. Na závěr následuje stránka s popisem všech kroků pěkně pohromadě. Velmi názorné.

trvalý odkaz | komentář

Na světě je další ze série D. Keith Robinson's Gorilla Web Tips. Tip číslo 11 je věnován dodatečné navigaci.

Každý tvůrce webu by měl mít na paměti, že návštěvník nepřichází tak, jak by autor webu chtěl a potřeboval. Návštěvník obrazně řečeno přijde oknem od záchoda a ne přes halu. Proto je důležité mu nabídnout vhodnou navigaci.

Článek o dodatečné navigaci uvádí tyto možnosti dodatečné navigace:

• mapa webu,
• zkratkové menu,
• drobečková navigace.

Při návrhu navigace mějte na mysli:

trvalý odkaz | komentář

Značky blockquote a q se používají pro označení citací (nikoli pro pouhé formátování):

blockquote

Bloková citace delší než 10 slov.

q

Řádková krátká citace do 10 slov.

Asi se pozastavíte nad tou 10. Toto alespoň uvádí Technique 3.7.2 [priority 2] Verify that Q and BLOCKQUOTE are used properly:

Requirement:

• Inline quotes (marked with Q) have at least one word in front of, or behind, the quote text and are less than 10 words
• Long quotes (marked with BLOCKQUOTE) are greater than 10 words.

Nevím sice co dělat v případě, že má citace právě 10 slov, ale nějak si už poradím.

trvalý odkaz | komentáře (9)

Na konci týdne a při práci nad článkem (už to bude Vildo) dávám k dobru tři odkazy, které mě koncem týdne zaujaly:

• Vyvracejte obavy dřiv než vzniknou - Sova v síti 10. 10. 2003
• Jak psát na internetu - Internetový oříšek 8. 10. 2003
• Firebird URL shortcut tips - Simon Willison's Weblog 10. 10. 2003

trvalý odkaz | komentář

Tantek Celik radí, jak dostat CSS pravidla pouze pro IE5Win v článku Mid Pass Filter.

trvalý odkaz | komentář

Mnoho webdesignérů pravděpodobně zná značky uvedené v nadpise. Už méně lidí je používá a ještě méně je používá správně. Částečně je na vině špatná podpora značky abbr v dominantním prohlížeči. Pokud Vás zajímá jak na to, je spot Abbreviations, Acronyms, Initialisms. Dost podrobné, přehledné a plné odkazů. Via Příručka.

Doplněno: Lars Holst svůj spot doplnil o More on Abbreviations, kde odkazuje na <abbr>, <acronym>, Accessibility & Automation.

trvalý odkaz | komentář

Dave Shea (mezzoblue) se poslední dobou zabývá problémy ve vnímání barev:

• Colour Bland: Value - o vnímání barev.
• Colour Bland: Contrast - o barevném kontrastu.

Všem tvůrcům webu pak můžu z vlastní zkušenosti doporučit zobrazení jejich stránek na různých typech monitorů (zvlášť některá pasivní LCD překvapí) a v různých barevných hloubkách.

Mějte také na mysli co říká WCAG o barvách: Nespoléhejte se pouze na barvy. Pokud vyjádřítě nějakou informaci pouze barvou (např. odkaz, zdůraznění, rozlišení stavů), musíte počítat, že ne všichni lidé jsou schopni tento stav rozpoznat. Mohou být barvoslepí, používají zařízení s malým počtem barev, používají zařízení, které nezobrazuje.

trvalý odkaz | komentář

Máme tady další z řady D. Keith Robinson's Gorilla Web Tips. Tip číslo 10 je věnován otevírání popup oken.

Otevírání nových oken po klepnutí na odkaz není z hlediska použitelnosti webových stránek zrovna dvakrát šťastné řešení. Uživatel je otevřením nového okna zmaten a někdy ho nové okno dokáže pěkně naštvat. Uživatelé mají často zapnuté blokování popup oken. Mnoho lidí má vypnuté skriptování, takže autor stránky neuspěje ani s JavaScriptem.

I tak je ale někdy užitečné se pokusit otevřít nové okno:

• otevírání ne-HTML dokumentů (PDF, Word apod.),
• otevírání web-aplikací (kalendáře, kalkulátory),
• některé druhy obrázků.

trvalý odkaz | komentář

Lukáš Mačí dává na svém weblogu k dobru dva příklady, jak stínovat boxy v CSS.

trvalý odkaz | komentář

Gerry McGovern ve svém aktuálním článku zdůražňuje, že webové stránky musí mít flexibilní návrh. Mnoho zadavatelů a potažmo i tvůrců totiž stále nahlíží na tvorbu webu jako na přípravu tiskovin. A to opravdu většinou nebývá příliš šťastné.

trvalý odkaz | komentář

Wave 3.0 je nástroj, pro který je kontrola přístupnosti webových stránek hračkou. Wave zobrazí kontrolovanou stránku, kterou doplní o orámování boxů a své ikony - zobrazují se chyby, varování, vlastnosti stránky podporující přístupnost a také strukturální a významové prvky.

Na stránce wave.webaim.org najdete vedle klasických možností zadání adresy stránky a uploadu souboru i nástrojovou lištu (toolbar) pro prohlížeče Internet Explorer, Netscape a Mozilla. K mání je bookmarklet pro kontrolu aktuální stránky.

trvalý odkaz | komentář

CSS layout pomocí boxů pěkně na jednom místě najdete na stránce Little Boxes. Můžete si vybrat ze 16 různých layoutů.

trvalý odkaz | komentáře (2)

Seznamy od Listamatic byly v poslední době hojně zmiňovány. Nyní přichází List-o-matic, nástroj pro generování menu (brrr, to je věta jak z teleshopingu).

List-o-matic je průvodce, který vás ve 3 krocích dovede až k hotovému menu (CSS a HTML kód). Postupně vyberete počet položek, zadáte texty, popisky a odkazy a zvolíte jeden z 10 stylů. K dispozici jsou horizontální i vertikální menu. List-o-matic je šikovný nástroj pro začínající.

trvalý odkaz | komentář

Keyword Density Analyzer je prima volně dostupný on-line analyzátor hustoty klíčových slov ve webové stránce. Keyword Density Analyzer mj. určí:

• celkový počet slov,
• unikátní výskyt slov,
• informace z META,
• dvou, tří a čtyřslovné fráze atd.

Na stránkách je toho samozřejmě mnohem více. Rozhodně doporučuji vyzkoučet. Možná budete překvapeni, na co jsou vaše stránky vlastně optimalizovány (via Sova v síti).

trvalý odkaz | komentář

Petr Staníček radí, jak obrázky s popiskami v CSS. Pokud nevíte, jak pomocí kaskádových stylů udržet pohromadě nadpis obrázku, samotný obrázek a jeho popisek je návod pro vás jako dělaný.

trvalý odkaz | komentář

Vždycky mě přepadne zvláštní ale příjemná nostalgie, když vidím, jak různí lidé dělají stejné chyby, které jsem dělal já sám. Pokud můžu, tak se snažím pomáhat a věřím, že má pomoc nevyzní školometsky, povýšeně, nevhodně. Podobný případ nastal u Honzy Biena.

Dělit či nedělit, to je oč tu běží. Rozdělování spotů (nejen) podle mě není dobré řešení. Čtenáře neustále překlikávání většinou ruší. Weblog má obsahovat krátké nedělené příspěvky. Když je třeba větší prostor proč nezvolit jiný formát. Nic nebrání vyhradit velkému tématu samostatnou stránku nebo stránek víc.

Podobná věčná otázka je Pro koho mají psát bloggeři? Filip Rožánek se pozastavuje nad neschopností popsat složité věci jednoduše. Mě to zase tak složité nepřipadalo, ale většina národa by se mnou asi nesouhlasila. Nemyslím si, že by weblogy měli jít na ruku masovosti (z té, kterou jsem zažil, mi běhá mráz po zádech ještě dnes). Každý má totiž právo si najít svou cílovou skupinu a té vyjít vstříc. To ale neznamená, že bych měl úmyslně psát složitě, abych vypadal moudře. Obdivuji autory, kteří umí složité vysvětlit jednoduše.

Na druhou stranu je nevhodné omlouvat vlastní lenost tím, že píšu svůj weblog a tak si můžu dělat co chci. Jistě, volba tématu, forma apod. je právo autora. Gramatické chyby, vulgarita, porušování zákona sem ale nepatří.

trvalý odkaz | komentáře (2)

W3C včera publikovalo CSS3 Paged Media Working Draft. V návrhu najdete mj. definice stránkování, okrajů, záhlaví a zápatí atd.

Další informace hledete na stránkách Cascading Style Sheets home page (via W3C News).

trvalý odkaz | komentář

Vývoj Bloxxy byl ze strany Petra Staníčka ukončen v květnu 2003. Od 7. 9. 2003 přešel vývoj Bloxxy pod Mraveniště. Bloxxy nyní najdete na adrese www.mraveniste.org/bloxxy/

A když už jsme u hmyzu, tak musím doporučit weblog Mraveniště, který je zaměřený na webdesign. Weblog Mraveniště vydává Jan Bien.

trvalý odkaz | komentář (1)

Téměř vše, co lze dělat se seznamy pěkně na jednom místě, najdete na Listamatic. K dispozici jsou horizontální i vertikální seznamy - nyní 11 a 7 druhů (via Simon Willison).

trvalý odkaz | komentář

Asterisk* rozjel diskuzi o používání vyskakujících oken. Ve spotu What's Your Take on Launching New Windows? se ptá, jaký je názor čtenářů na popup okna:

1. Otvírat nová okna při odkazování mimo web?
2. Pokud ano, jakou metodu použít?
3. Proč (ne)používat popup okna?
4. Jsou případy, kdy používáte popup okna a kdy ne?

Já jsem proti používání popup oken (i když jsem s touto myšlenkou občas pohrával - jsou zde některé plusy). Může to působit jenom problémy - osobně mám popup okna zakázaná. Jak Vy byste dali Asterisku* odpověď?

trvalý odkaz | komentáře (5)

Že přístupná stránka nemusí být ošklivá, je pro mnohé webdesignéry známá věc. Ještě se najde mnoho takových, kteří v přístupnosti vidí vadu. Přístupnost je pro ně omezení v (pseudo)designérském rozletu. Že jsou to mýty, ukazuje také článek Attractive, Accessible Web Sites (AKA disproving the myth of ugly).

V článku najdete základní kroky k dosažení lepší přístupnosti stránek. Autor přidává také několik příkladů skutečných stránek.

trvalý odkaz | komentář

Web Page Analyzer je volně dostupný on-line nástroj, který mj. určí velikost stránky, objekty na ní umístěné a délky stahování. Nová verze 0.80 byla vydána 29. 8. 2003 a zaslouží si umístit do oblíbených položek. Vyzkoušejte!

trvalý odkaz | komentáře (3)

Dan Cederholm pokračuje druhým dílem svého kvízu: Unordered Lists. Líbí se mi neotřelý nápad místo často suchopárného mentorování nabídnout kvíz. Hrozná, špatná, lepší a správná odpověď pěkně vedle sebe.

trvalý odkaz | komentář

Několik zajímavých odkazů především o standardech:

• Containing Floats - jak řešit plovoucí obrázky.
• Old Coding Habits Die Hard - je těžké naučit starého psa novým kouskům.
• Web Standards FAQ - pár otázek a odpovědí o webových standardech.
• SimpleQuiz > Headings > Conclusion - co prozradil první kvíz o titulcích.
• Hledá se to pravé, standardní… - souboj titánů o standardech vydestilovaný Markem Prokopem.

trvalý odkaz | komentář

Dan Cederholm (SimpleBits) odstartoval sérii jednoduchých testů SimpleQuiz prvním dílem: Headings. Ptá se poměrně jednoduchou otázkou na to, jak má vypadat správný zápis nadpisu. A přidává tři možnosti - cé rozhodně není správně :-).

trvalý odkaz | komentář

A písnička pokračuje …three little Indians. O téhle anglické odrhovačce Roman 'Dagi' Pichlík nepíše, ale ve spotu UTF-8 : Problém malého a velkého indiána vysvětluje problémy s UTF-8. Zmíní také pojmy big endian a little endian.

Mimochodem, všímáte si, jak se pokles teplot projevuje na autorské potenci blogerů a aktivitě čtenářů?

trvalý odkaz | komentář

Petr 'Pixy' Staníček píše ve spotu O šířce prvku, Exploreru, Mozille a matrjošce o tom, jak se v prohlížečích počítá šířka prvků. Pro zájemce přidává svůj Mатрёшка hack.

trvalý odkaz | komentář

Jacob Nielsen ve svém včerejším Alertboxu Usability 101 vysvětluje co, proč, jak, kdy a kde. Tedy co je použitelnost. Jak, kdy a kde ji vylepšit a proč byste o ni měli pečovat. A jak píše sám Nielsen, je to takové rychlé čtení třeba pro Vašeho šéfa. Takže pokud se chcete seznámit, zadejte se.

trvalý odkaz | komentář

Weblog SimpleBits zveřejnil CSS Photo Zoom. Jedná se o velmi zdařilou variaci na Pixyho Fast rollovers - podívejte se na příklad zvětšení obrázku po najetí myši.

Autor testoval na některých Mac prohlížečích. Já jsem úspěšně poškádlil prohlížeče IE6, Opera 7 a Firebird. V komentářích najdete také další testované prohlížeče.

trvalý odkaz | komentáře (2)

Nick Bradbury zveřejnil na svém weblogu hlavní klávesové zkratky pro TopStyle.

trvalý odkaz | komentáře (4)

Po redesignu conBLOGu jsem zjistil zajímavou věc. Spíš problém. Pokud stránku v IE6 refreshuji přes F5, tak se dole odřeže levý sloupec na úrovni navigačního pravého sloupce - stránka je kratší. Pokud stejnou stránku znovu načtu odkazem (např. nahoře v řádkové navigaci), stránka se načte celá. Poradíte mi pánové a dámy?

trvalý odkaz | komentáře (8)

Ve 4. letošním vydání e-zinu Sova v síti vyšel český překlad článku Desatero psaní pro web (Gerry McGovern, česky Janovský, Kopta, Prokop). Kdo text ještě nečetl v anglickém originále, měl by tak učinit právě teď. Je to totiž povinné čtení pro každého autora webového obsahu.

trvalý odkaz | komentář (1)

Na Intervalu dnes vyšly mj. tyto dva články:

• SEO – Search Engine Optimization - Petr Weida v něm poměrně obsáhle shrnuje základní pravidla optimalizace webových stránek. Dobré čtení pro každého, kdo se chce začít věnovat optimalizaci webových stránek.
• Optimalizace pro weblogy - David Bureš se zabývá otázkou proč a jak na weblogy přilákat čtenáře.

trvalý odkaz | komentáře (2)

Dnešní Alertbox mi promluvil z duše. Jacob Nielsen hovoří o zahlcení zbytečnými informacemi. Studie prokázaly, že odstraněním poloviny slov na stránkách se zdvojnásobí počet informací, které uživatel získá. Zbytečně detailní informace totiž výrazně zhoršují schopnost rozlišit co je a co není podstatné. Je to jako zaplnit les papírovými králíky: znechucení vlci půjdou lovit jinam. A stejně tak půjdou jinam bezcenými informacemi zahlcení návštěvníci.

Varování: Nesušte kočky v mikrovlnce a používejte sekačku na sekání trávy a ne nohou!

trvalý odkaz | komentáře (3)

Každý správný vývojář by si měl svou práci alespoň vnitřně označit cedulkou Testováno na lidech. Při tzv. usability testech můžete udělat spoustu chyb. Na ty nejčastější, kterým se nevyhnou ani zkušení testovači, upozozorňuje článek Common Mistakes (via WebWord).

Mimochodem, testovali jste někdy vlastní produkt a popadal Vás amok nad chováním uživatele? Je pravděpodobné, že chyba není v uživateli, ale právě ve Vašem díle.

trvalý odkaz | komentář (1)

Posledních pár dní všichni píší o odkazech. V pátek přidala svou trošku do mlýna také Shirley Kaiser v obsáhlém spotu Friendly, Lasting URLs. Najdete zde mj. velkou spoustu užitečných souvisejících odkazů.

trvalý odkaz | komentář

Marek Prokop dnes na Lupě publikoval článek Trendy moderního webdesignu. Marek se nestaví do pozice orákula, takže nečekejte žádné výčty co nás čeká za x let. Autor zdůrazňuje 3 pilíře moderního webu:

• důraz na uživatelský prožitek,
• důraz na přístupnost,
• důraz na ekonomickou návratnost a efektivitu.

Většina textu rozebírá právě ony pilíře a celkem pochopitelně se vyhýbá předpovídání vývoje technologií. Podle mého názoru lidé nejsou schopni využívat ani stávající technologie. A úspěch technologií není závislý ani tak na jejich vyspělosti, jako spíš na ochotě je příjmout a smysluplně využít.

trvalý odkaz | komentář

Petr Staníček začal na pokračování zveřejňovat knihu 123 kroků ke špatnému webu: Jak prodělávat na Internetu. Zatím zveřejnil předmluvu a první 4 kapitoly. Píše o tom v dnešním spotu na Pixylophone.

trvalý odkaz | komentář

Internetový oříšek si všiml změny barev odkazů na mém weblogu. Změna se Tomášovi nelíbí. A nelíbí se také dvěma diskutujícím.

S odkazy je to těžké. Stačí se podívat po internetu a každý pozná, že neexistuje zásadní shoda. Pokud vezmu v potaz dva extrémní názory, tak na jedné straně stojí podtržené modro/fialové odkazy a na druhé je vše dovoleno. Osobně zastávám názor, že je třeba barevně odlišit navštívené odkazy od nenavštívených a obojí samozřejmě od základního textu. Dále je více než užitečné v textu zvýraznit odkazy podtržením. Úmyslně říkám v textu, protože třeba navigaci někdy není nutné zvýrazňovat - ta může být sama o sobě zvýrazněna jinak (svým stálým umístěním, rámečkem, odrážkou apod.). Barevné odlišení odkazů by mělo být v rámci daného webu konzistentní.

Při poslední změně vzhledu conBLOGu jsem mj. podtrhl odkazy ve spotech a změnil barvu navštívených odkazů. Podle mě jsou odkazy od sebe vzájemně odlišitelné (testoval jsem na barvoslepost) a jsou také odlišeny od normálního textu. Modrá barva nenavštívených odkazů odpovídá zažitému stavu a oranžovohnědá má k fialové celkem blízko.

Co je standard

Pokud není definováno jinak (např. v CSS), jsou nenavštívené odkazy modré a navštívené fialové. Ale je to pravda? Prohlížeče využívají svá nastavení a definice jejich barev se liší (není-li uvedeno jinak, jedná se o verzi pro Windows):

• IE: #0000FF/#800080 (nenavštívené/navštívené)
• Firebird, NN4.7: #0000EE/#551A8B
• Opera 7: #0000CC/#800080
• NN7: #6666CC/#993399
• KFM (Linux): červená/sv. fialová (odstíny jsem nezkoumal)

Nakupujte u odborníků

Jak řeší barvy odkazů odborníci? Odpovím si sám. Různě. Abych nesázel jen na své dojmy, sáhl jsem po sově, tedy po Sově. Do ringu jsem přizval samotnou Sovu a k ní ze soví navigace první tři české a tři zahraniční blogy. A tady je výsledek:

• Sova v síti: #CC0000/#990000 - pouze změna odstínu
• Pixyho blogy: #112233/#224466 - pouze změna odstínu
• Letem světem: #FF3300/#FF3300 - bez odlišení navštívené/nenavštívené
• Pooh: #000000/#800080 - nenavštívené odkazy mají barvu normálního textu (matoucí)
• Zeldman: #BE540B/#BE540B - odkazy dokonce nejsou podtrženy
• Pilgrim: #CC3300/#000066 - prohození standardní barevné kombinace modrá/fialová
• Saila: #3366CC/#330066

Jak to vidíte

Jaký je Váš názor na barevné odlišování nenavštívených a navštívených odkazů? Je to pro Vás důležité? Jak se Vám jeví z tohoto pohledu odkazy na conBLOGu? A co na to Jan Tleskač?

trvalý odkaz | komentáře (13)

Petr Staníček se dnes na Lupě v článku Statisíce ve vzduchu: zastaralý vs. moderní návrh webu zamýšlí nad výhodami CSS layoutu oproti používání layoutu tabulkového spatlaného s tagy font a spol.

trvalý odkaz | komentář

Jacob Nielsen navrhuje místo přímých odkazů na PDF soubory používání samostatné HTML stránky, na které vedle příslušného odkazu na PDF soubor má být mj. také návod, jak se souborem naložit (via Sova v síti).

Nielsen píše, že je potřeba ušetřit uživatele utrpení, když jsou bez varování vyklopeni do PDF souboru. Uživatelé si za to ale v mnoha případech mohou sami. Z vlastní zkušenosti vím, jak jsou běžní uživatelé přímo posedlí potřebou kliknout na každý odkaz, který uvidí. Zkušený uživatel rozpozná cíl odkazu, ale většina ostatních to neumí. Pokud se jedná jen o načítání několikamegového pédéefka, tak to skončí maximálně tvrdoresetem PC (cholerik si myslí, že PC zatuhlo). Horší je to v případě, že spustí e-mailový virus.

I přes evangelizační snahy poučených, které sem tam přináší své ovoce, je daný stav faktem, se kterým se musí autoři webů vyrovnat.

Nabízí se samozřejmě několik řešení. Některá z nich posuďte sami:

1. …pro další informace klikněte…
   Zavrženíhodný případ Vicezdemie, o kterém netřeba diskutovat.
2. Výroční zpráva
   Klasický odkaz bez doplňujících údajů (informace o cíli musí uživatel najít např. na stavovém řádku prohlížeče).
3. Výroční zpráva
   Informace o cíli odkazu jsou v title.
4. Výroční zpráva (soubor PDF, 275 kB)
   Informace o cíli odkazu jsou uvedeny v za textem odkazu.
5. Výroční zpráva (soubor PDF, 275 kB)
   Informace o cíli odkazu jsou uvedeny v za textem odkazu a v title je uveden návod, jak s odkazem naložit.

Poznámka: V seznamu není uvedeno Nielsenem zmíněné řešení. Odkazy nesměřují na konkrétní cíle.

Trochu deprese na mě padá při vědomí, kolik je uživatelů, kterým jsou nějaké typy souborů šumafuk. Že většina uživatelů nemá pojem o vztahu mezi velikostí souboru a délkou stahování (to nemluvím o převodech všech těch kilo, mega a giga bitů/bytů). Proto jsem taky trochu pesimistický nad účelností vstupních stránek pro stahování souborů: zkušeného uživatele zdrží, nezkušenému jsou mnohé informace na nich uvedené k ničemu - nerozumí jim. Líbí se mi třeba Nielsenova myšlenka s rozdělováním velkých souborů na menší části spolu s uvedením stručného obsahu dané části.

Na každý pád si ale myslím, že je Nielsenovo řešení jedním z nejlepších dostupných do doby, než třeba prohlížeče budou lépe reagovat na druh odkazů, na které uživatel klepl nebo na které najel myší.

trvalý odkaz | komentáře (6)

O tom, že font Times New Roman není pro web mrtvý, se nás snaží přesvědčit Dave Shea v článku It’s time we take back Times New Roman on the web. Zajímavá ukázka využití CSS pro práci s textem (via Simon Willison).

trvalý odkaz | komentář

Na českých weblozích se objevily informace o systému Echo (RSS je mrtvé, ať žije nEcho?, Syndikační formát Echo). Co se tedy skrývá za oním tajemným názvem?

Nejlépe bude asi začít na začátku, tedy na domovské stránce celého projektu Atom Wiki, který si klade za cíl vybudovat nový blogovací formát - Echo, který by měl být nezávislý na platformě, snadno použivatelný a rozšiřitelný. Celý projekt je teprve na začátku. Je třeba definovat pojmy, syntaxi, API, syndikační a archivní formát atd.

Snahou autorů je mj. vydat jasnou specifikaci a zabudovat podporu pro Echo do oblíbených blogovacích nástrojů (podrobné vysvětlení). V současné době se vede rozsáhlá diskuze o tom, jak by se měl celý projekt jmenovat. Původně se počítalo s názvem Atom, ale tento název narazil u právníků. Ve hře jsou např. názvy Axon, Elbo, Loki apod.

Otazka je, proč je třeba nový blogovací formát? Autoři chtějí postihnout nejrůznější zdroje informací. Nejenom tedy kvalitně strukturované informace na weblozích. Chtějí dát autorům weblogů jednotný prostředek. Pro své potřeby chtějí využít XML 1.0 (návrh syntaxe).

Sam Ruby: NECHO 0.1 - současná verze Echo.

trvalý odkaz | komentář

Minulý týden jsem zaznamenal problémy s RSS kanálem na conBLOGu. RSS čtečky přestaly načítat některé spoty. Následkem toho mj. klesla návštěvnost. Proto jsem začal pátrat. Chybu jsem udělal samozřejmě já, ale prohlížeče mi rozhodně v jejím řešení nepomohly. Jsou totiž až moc chytré.

Na vině je příliš inteligentní zobrazování chybně zapsaných znakových entit v prohlížečích. Znakové entity slouží třeba k zápisu speciálních znaků (např. & < > ©). Znaková entita se zapisuje ve formátu &KOD;. Důležitý je onen středník na konci. Oznamuje konec kódové sekvence (může se jednat např o anglický akronym znaku nebo o numerický kód znaku). Prohlížeče napravují chyby tvůrců stránek a středník si domyslí.

Domyšlený středník není problém pro prohlížeč, ale je to problém pro RSS čtečku, která v lepším případě ignoruje položky v RSS kanále. Mnohé RSS kanály jsou generovány automaticky z textu dokumentu nebo jsou při ručním vytváření RSS kopírovány autorem. Při validování spotů používám pochopitelně používám náhled v prohlížeči, který zobrazí i chybně zapsané entity.

Moje chyba byla způsobena chybějícím středníkem v entitě pro nedělitelnou mezeru (&nbsp;). Např. zápis v&nbsplese prohlížeč interpretuje jako v lese. Pro RSS čtečku může být přítomnost chybně zadané entity fatální.

Testoval jsem na prohlížečích IE 5.5, IE 6, Opera 6, Mozilla 1.0 a Firebird. Všechny prohlížeče chybně interpretovaly bez povinného koncového středníku zapsané zankové entity - zobrazily je, jako by tam středník byl.

trvalý odkaz | komentáře (6)

Včera jsem zmínil článek ze serveru Scribbling.net a dnes (jaké překvapení) nabízím odkaz další. Jestli vás zajímá co můžete udělat pro vylepšení svého webu, pak čtěte Nine things you can do to make your web site better (via Simon Willison, 3.7.2003).

A co nám Gina Trapani radí?

1. Uvědomit si, že jste na webu a ne v tiskárně.
2. Validujte.
3. Vyvarujte se rámů a uvítacích stránek.
4. Zmenšete velikost stránek.
5. Používejte statické stránky v jasné struktuře adresářů (anebo zařiďte, aby se tak tvářily).
6. Vyvarujte se JavaScriptových odkazů a netextových informací.
7. Pomozte indexovacím robotům.
8. Nabídněte přátelská chybová hlášení.
9. Používejte srozumitelné odkazy (vyvarujte se vicezdemie).

trvalý odkaz | komentáře (2)

Určitě jste se s tím setkali také. Chcete odeslat třeba příspěvek do diskuze nebo informace kontaktním formulářem. Vyplníte co považujete za podstatné, vyprecizujete text a dáte odeslat. Bum! Objeví se zpráva o tom, že nebyly vyplněny povinné údaje a následuje prázný formulář. Vaše snažení přišlo vniveč. Budete zadávat znova? Já tedy (většinou) ne!

Častá chyba autorů formulářu je, že se snaží přinutit návštěvníka, aby o sobě sděloval informace, které není třeba sdělovat (to že jsou, si myslí pouze autor nebo příjemce zprávy). Zapomínají, proč návštěvník formulář vyplňuje. Zapomínají, že návštěvníka nic nenutí k tomu, aby psal víc, než uzná za vhodné. Často se tento nešvar vyskytuje třeba v komentářích a diskuzích, kde je hlavní obsah samotné sdělení. Jméno, e-mail, web nejsou podstatné údaje, takže je není nutné vyžadovat.

Pokud opravdu potřebujete znát některé informace, vysvětlete srozumitelně návštěvníkovi proč. Zdůrazněte především co návštěvník zadáním těchto údajů získá. Nabídněte zadání údajů přeskočit nebo vypnout kontrolu zadání (třeba zatrhávacím polem). Získáte víc informací a víc spokojených návštěvníků.

Příspěvek je inspirován spotem Best practice: Edmunds.com zip-code prompt (Adrian Holovaty 2.6.2003)

trvalý odkaz | komentáře (6)

Dušan Janovský chválí použití obrázkových kurzorů, které našel na IVTlogu. Myšlenka to není špatná, ale všechno má své ale. Co se mi konkrétně moc nelíbí?

• Kurzor má jen jednu formu - např. nereaguje změnou vzhledu na najetí na odkaz.
• Kurzor je málo kontrastní vůči pozadí.
• Tvar kurzoru může mást, protože jsou zvyklí na standardní kurzory - někteří uživatelé jsou méně zkušení, jiní zase konzervativní; tyto skupiny mohou mít ze stránek "špatný dojem".
• Prohlížeče se slabší nebo žádnou podporou CSS kurzory nezobrazí (to ale nemusí být naškodu).

Snad jen na doplnění. Norma CSS2 říká, že v definici tvaru kurzoru může být za sebou uvedeno více odkazů na soubory:

P { cursor : url("mything.cur"), url("second.csr"), text; }

Pokud není zařízení schopno zpracovat první kurzor, přejde k druhému atd. Na konci zápisu by pak měl být uveden standardní kurzor.

trvalý odkaz | komentáře (4)

K věčným rozpravám jaká je vlastně správná podoba weblogu přispěl Sam Ruby (via Mark Pilgrim 16.6.2003). Mark přidává požadavek na uvádění MIME typu.

trvalý odkaz | komentář

Víťa Dlouhý oprávněně zapochyboval o opodstatnění tzv. vstupní stránky (Příručka 14.6.2003). Já bych přidal ještě jeden důvod, proč vstupní stránku nepoužívat.

kterých autorů umístit na defaultní stránku velké logo, fotku fabriky, třepotající se vlajky nebo text Enter here jsou sice na ústupu, ale kostlivce ze skříní začínají vytahovat pseudomarketingoví guru. Nic mě na dialupu nepotěší víc než pěkný megový flašík (snad jen plovoucí reklama přes 2/3 obrazovky).

trvalý odkaz | komentář

Yuhů po delší odmlce podruhé šťouchá do Sovy v síti. Tentokrát se podíval na (ne)zvětšování písma na Sově.

Jsem rád, že Yuhů do Sovy šťouchá, je to velmi poučné. Jak by bylo na internetu krásně, kdyby lidé uměli komunikovat (mluvit i naslouchat). Jsem zvědavý, jak Marek zareaguje.

trvalý odkaz | komentář

Petr Staníček inspirovaný Sovou v síti zveřejnil velmi pěkný spot o tzv. zlatém řezu. Pixy obšírně vysvětluje co to vlastně zlatý řez je. Škoda, že docela málo prostoru vybylo na praktické využití ve webdesignu.

trvalý odkaz | komentář

Petr Staníček včera zveřejnil hezký spot CSS a výška prvků. Velmi užitečné vysvětlení, leč pro mě stále neuspokojivé provádění v prohlížečích. Pořád mi není jasné, proč jde nastavovat šířku a ne výšku.

trvalý odkaz | komentáře (2)

Možná si vzpomenete, že skoro na každé stránce bylo aktuální datum. Opravdoví čímani přidali i název dne. Jako by každý po probuzení okamžitě běžel spustit počítač a třesoucí se rukou vyklepal adresu Vaší osobní stránky, aby zjistil, kolikátého že je. Také jsem občas zatoužil po takové fíčuře, leč nestalo se. Trochu mě to trápilo. Přece každá stránka překypovala tolika možnostmi! Zaklínadlem doby byly portály. Autoři na ně plácali další a další funkce. A pak jako blesk z čistého nebe udeřil Google a analytici měli co rozebírát.

Zvítězila jednoduchost. Uživatel nechce slídit po stránce. Nepotřebuje mít vše naskládané na jednom místě. Uživatel potřebuje rychle a jednoduše splnit svůj ůkol. Rychle najít informaci a šupem pryč.

Občas je dobré se podívat na své stránky cizíma očima. Přiznat si, že ne každý prvek na stránce je nutný. Přinutit se nejméně jeden prvek bez milosti hodit přes palubu. A tohle párkrát zopakovat. Návštěvník to jistě ocení.

trvalý odkaz | komentář (1)

To, že používat na webu hezoučká písma instalovaná jen na počítači autora je šílenství, ví téměř každý. Že náhodným generováním pořadí různých fontů si tvůrce zadělává na problém vím i já. O Petrovi Staníčkovi vím, že kudy chodí a sedí propaguje přístupnost webových stránek a prostředkem je mu jednoduchost, je stará vesta. Co se fontů týká je jeho recept font-family: sans-serif.

Petr Staníček zveřejnil první výsledky hledání ideální stylové definicé písma pro naše prostředí. K dispozici dal podrobné výsledky testu (téměř 900 provedených testů).

A jak to dopadlo? Z použitých písem byla nečitelná max. 3 % - asi se projevilo, že vzorky sestavoval odborník, zajímavé by bylo vědět, jak by dopadly jinde používané definice písma. Petr konstatuje, že je nutné nechat volbu písma na uživateli a až pokud je třeba definovat písmo přesněji. Petr nabízí tyto kombinace:

• typ Arial/Helvetica: sans-serif
• typ Times (New Roman): serif
• typ Courier (New): monospace
• typ Verdana 1: Verdana,sans-serif
• typ Verdana 2: Verdana,"Geneva CE",sans-serif
• typ Verdana 3: Verdana,"Geneva CE",lucida,sans-serif
• typ Georgia 1: Georgia,serif
• typ Georgia 2: Georgia,"New York CE",serif
• typ Georgia 3: Georgia,"New York CE",charter,serif

A co jsem si odnesl já? Nepoužívat Windows CE písma. CE macovská písma dávat za Windows definice. Na závěr předpisu uvést sans-serif/serif/monospace (nebo nedávat nic jiného). Mimochodem, nemáte nějaké problémy s čitelností conBLOGu?

trvalý odkaz | komentáře (4)

Simon Willison docela pěkně styluje prvek blockquote. Vše pomocí jednoho divu a dvou obrázků navíc. Docela pěkné.

trvalý odkaz | komentáře (4)

Martin Kopta mi připoměl (Vicezdemie) svůj starší spot na Sově. Součástí je tabulka, kterou chci aktualizovat a doplnit:

Pro zjištění počtu stránek, které obsahují odkaz s daným výrazem, jsem použil vyhledávací dotaz allinanchor:Výraz link:Výraz.

Mimochodem všimli jste si, že autoři jsou spíše formální a návštěvníkům vykají?

trvalý odkaz | komentáře (2)

Martin Michálek dává k dobru pár praktických rad, jak řešit problémy s laděním CSS. A co nám Martin radí? Pracujme se správnými a validními soubory (pozor na definici DTD). Prvky orámujme, soubory zeštíhleme. A když to všechno uděláme, pak zjistíme, že je chyba v prohlížeči.

trvalý odkaz | komentáře (3)

Občas mě napadne, jak vlastně lidé na internetu hledají? Jakým způsobem používají vyhledávač? Opakovaně jsem byl u toho, když uživatel zadal na Seznamu nebo Google do pole pro vyhledávání adresu webu. Odklepl a čekal na výsledek hledání. Pak klidně klepl na první nalezený odkaz a většinou přešel na stránku, jejíž adresu mohl, jak velí zdravý rozum, zadat do adresního řádku.

Zdá se Vám to absurdní? Je to ale pravda. Uživatelé nedělají to, co si vy zrovna umanete, že by dělat měli. Chovají se, jak jsou zvyklí a snaží se jít k cíli. Nemusí to být cesta nejkratší, ale je dobře prošlapaná. Návyky se mění těžko a tak je dobré je znát.

Chování uživatelů je často (pro Vás) nevypočitatelné a někdy překvapivé. Proto také existují standardy a různá doporučení, jak se věci mají dělat. Až se zase jednou pustíte do diskuze, že vy to přece víte nejlíp, tak se zamyslete. Většinou je pravda někde mezi.

trvalý odkaz | komentáře (2)

Vicezdemie je choroba, která naštěstí není fatální. U webu ale může způsobovat chronickou ztrátu návštěvníků. Projevuje se zvýšeným výskytem odkazů typu více zde, které se na stránkách objevují ve více formách (pokračování zde, zde apod.). Zvláště rafinovaná forma byla pojmenována podle svého původce propokračováníkliknětezdemisus.

Léčba je přitom poměrně jednoduchá. Web stačí očkovat českým sérem W4D - 7. Léčit lze i po vypuknutí choroby. Někdy se ovšem vyskytuje spolu se syndromem dejtemipokojpíšusicochciajakchci. Pak obvykle léčba nezabírá.

Nejznámější pacienti napadení vícezdemií (dokonce se vyskytly případy nákazy mezi blogy, které jsou jinak proti mnoha chorobám poměrně dobře odolné).

trvalý odkaz | komentáře (5)

Gerry McGovern dokončil 2. částí článek Writing for the Web (via Sova v síti).

Jak psát podle Gerryho? Jednoduše, stručně a strukturovaně oslovte čtenáře, které musíte dobře znát. Dobré nadpisy a často vyhledávaný text vhodně rozdělujte do vět a odstavců, kde nechybí odkazy. A nezapomeňte si svou práci zkontrolovat.

trvalý odkaz | komentář

Na Webgaphics odkazují na ukázky záložkové navigace. Můžete se nechat inspirovat také odkazy v diskuzi.

trvalý odkaz | komentář

Na každé stránce by měl být na první pohled viditelně umístěn vždy jen jeden formulář s textovým polem pro vyhledávání.

Dnes jsem si opět připoměl vlastní spot o vyhledávání na českých weblozích. Julie Albertson před nedávnem publikovala 4 základní pravidla pro užití vyhledávání na stránkách:

1. Formulář musí být vidět (nesmí být zaskrolovaný někde dole).
2. Formulář by měl být na každé stránce a to na stejném místě.
3. Mělo by být použito textové pole (ne pouhý odkaz na stránku s formulářem).
4. Jediný vyhledávací formulář na stránce.

Via Marek Prokop.

trvalý odkaz | komentáře (13)

Dušan Janovský připoměl chybu zobrazení poznámek v IE. Microsoft se asi příliš "poučil" ze zápisu příkladu kódu, který je uveden ve specifikaci a moc nečetl text za příkladem.

Nezbývá než připomenout, že mezi začátkem deklarace (<!) a počátečním oddělovačem poznámky (ony dvě pomlčky/mínusy) nesmí být mezera. Tato mezera ale může být mezi koncovým oddělovačem poznámky a zavíracím ">". Autoři by se měli vyhnout zapisování dvou a více pomlček uvnitř komentářů.

trvalý odkaz | komentář

Jsem rád, že nejsem jediný, kdo má takový názor na FrontPage :-) FrontPage je prostě mohutný nástroj, který je třeba mít pod kontrolou. A kdo to neumí, ať neprská.

trvalý odkaz | komentáře (2)

Pokud nerozumíte nadpisu tak nevadí. Jste na tom tak trochu jako ti, kteří neví, jak se správně píší číslovky. Naposledy jsem se s psaním patvarů jako je 6ti, 9-té atd. setkal při přípravě dalšího dílu seriálu Weblogy CZ. Je zajímavé, že nikoho nenapadne napsat datum tak, jak je uvedeno v titulku. Ale 4tý, 5ti a 6-tá někteří solí jedna báseň. Jak to tedy je?

• Řadové číslovky se zapisují s tečkou za číslicí následovanou jednou mezerou. Např. 5. = pátý.
• Ostatní číslovky se píší bez tečky a samozřejmě bez všech ocásků. Čtenář si vše vyskloňuje sám. Pokud nedůvěřujete jeho schopnostem, pište čísla slovy.

Jak uvádí Jazyková poradna ÚJČ: Mezi číslicí a následující slovní částí nepíšeme spojovník ani nevpisujeme koncovky číslovek. Není logického důvodu psát například x50tikilometrová rychlost, pro děti do x14-ti let nebo 5tidenní či x8midenní dovolená (ani x5-ti-denní, x5ti-denní, x8-mi-denní, x8mi-denní), neboť slabiky -ti- a -mi- jsou už obsaženy v tvaru číslovky: přesvědčíme se o tom snadno, přečteme-li takový složený výraz nahlas.

Jestli to myslíte s psaním webu jenom trochu vážně, podívejte se třeba na Pixyho článek Typografie na webu v kostce.

trvalý odkaz | komentář

Adrian Holovaty zveřejnil zajímavou ukázku navigace pomocí CSS a malého kousku JavaScriptu jako reakci na jednoho navigačního bumbrlíčka (via Accessify.com).

trvalý odkaz | komentáře (2)

Poslední aktualizace: 4. 4. 2003.

Před 4 dny Marigold rezignoval na validní kód. Následně si Yuhů také nechtěl kazit radost ze života. Naopak Marek Prokop ukázal, jak je to jednoduché. Jednoduché snad, ale určitě jenom pro někoho!

trvalý odkaz | komentáře (3)

Marek Prokop na Sově dal k dispozici přeložený velmi užitečný nástroj Cynthia Says pro kontrolu přístupnosti obsahu stránek.

trvalý odkaz | komentář

Dnes jsem se opět vrátil k rok starému článku Write a better weblog (D. A. Mahoney). O zásadách správného blogování všichni mluví, ale ne všichni je dodržují. Úžasně psát se nenaučíte, ale hrubých chyb se můžete vyvarovat. A k čemu Mahoney nabádá?

• Piště stručně, jděte k jádru věci - čtenář chce mít jasno.
• Nabídněte něco nového.
• Bavte své čtenáře.
• Mějte hroší kůži (vždy se najdou štouralové), nenechejte se kritikou paralyzovat.
• Važte si kritiky.
• Nebojte se odkazovat.
• Vaším cílem je spokojený čtenář - začněte tím, že budete se svým weblogem spokojení sami.

A jaká je moje metoda? Vše najednou nemůže zvládnout nikdo. První krok je přiznat si, že jsem člověk chybující, který nesnědl všechnu moudrost světa. Pak si vezmu jedno pravidlo a důsledně je aplikuji. A potom vezmu další pravidlo a další…

trvalý odkaz | komentáře (2)