Milan Kryl

Kryl Blog - RSS

Směrem k webovým standardům

30. 04. 2004 - 21:40

Nedávno jsem vyzýval všechny čtenáře mého blogu, ať reagují svými příspěvky a přispějí informací začátečníkům, jak začínali a jak jim doporučují začít.

Zatím jsem na žádnou reakci nenarazil ani na blogu co denně čtu, ani v příspěvcích, které se objevují na weblogy.cz. Pokud jste již něco přispěli a já na to nenarazil, tak mi dejte klidně vědět i mailem, až vás přihodím dolů pod příspěvek.

První "reakce" se objevuje kupodivu v zahraničí.:-) Ne, že by autor mezzoblue četl můj blog - takový optimista nejsem. Ale ve svém příspěvku A Roadmap to Standards se věnuje podobné otázce. Jakým směrem se má ve studiu ubírat čtenář, který má ještě "starou školu"?

Na začátku jste varováni:

  • bude to trvat nějakou dobu - novým systémem nezačnete tvořit přes noc. Chce to změnit myšlení, dívat se na problémy trošku z jiné strany (aspoň pokud jste ještě tabulkově zaměření)
  • budete znechuceni - nečekejte, že to půjde jednoduše a lehce, bude se vám často chtít se vším praštit a vrátit se ke starým dobrým tabulkám.
  • připravte se, že získáte mírné antipatie k jednomu majoritnímu prohlížeči (který jste měli možná až do nynějška rádi)

Ale nezoufejte, investujete do budoucnosti a pokud vytrváte, tak se vám to určitě časem vrátí. Ať to bude pohodlnější práce s kódem, rychlejší změny designu, lepší umístění ve vyhledávačích, díky strukturovanému kódu,...

Tak jestli vás to ještě neodradilo - můžete začít. Pokud mát blízko k angličtině můžete sáhnout po knížce velmi známého tvůrce stránek a propagátora standardů: Designing With Web Standards - Jeffrey Zeldman. Případně online Roger Johansson - Developing with web standards. To ale pro české čtenáře nebude možná až tak dostupné a nebo čtivé, ale k tomu se taky dostaneme.

Tvorba stránky začíná výběrem jazyka (gramatiky), kterým bude psána. V HTML to znamená, že je třeba definovat DOCTYPE (A list apart - DOCTYPE, Petr Staníček - DOCTYPE a módy prohlížečů), pokud má být kód validní a podle některého ze standardů.

Vybereme XHTML a můžeme pokračovat dál. Pro tvorbu XHTML dokumentu je třeba dodržovat několik málo pravidel, které postačí k téměř kompletní validitě celé vytvářené stránky.

  • jednoduché elementy musí na konci obsahovat lomítko - např. odřádkování <br> se napíše <br /> (mezera je dobrá pro snadnější kompatibilitu ve starších prohlížečích, které ji budou ignorovat)
  • všechny párové elementy uzavírat! - a je třeba dodržovat zanoření (uzavírat v opačném pořadí než byly otevírány. <div><span> </span></div> NE naopak!
  • nepoužívat elementů <b> <i> - jsou nahrazeny sémantickými elementy <strong> a <em>
  • nepoužívat atribut target - u odkazů je zakázaný (a otvírání do nového okna není příjemné), když už není nazbyt, lze toho dosáhnout javascriptem.
  • jednoduché atributy jsou zdvojeny - např. checked u elementu input se zapisuje checked="checked"
  • veškerý kód piště malými písmeny - XML, od kterého je XHTML odvozeno, je totiž case sensitive (odlišuje velká a malá písmena).
  • výsledky své tvorby validujte - online validator vám odhalí přehlédnuté chyby a může vám pomoci, když něco nehraje (a např. i při ladění CSS stylů a problémy).

Až začnete pronikat hlouběji do tajů XHTML, může se vám hodit některý z přehledných cheatsheetů nebo přímo XHTML specifikace.

Další věcí, na kterou si dávejte pozor je oddělení obsahu od vzhledu. Obsah je veškerý text, který stránka obsahuje. Nepatří tam žádné nastavení barev písma, zarovnání textu na nějakou stranu, nastavování pozadí. To vše je z hlediska obsahu nedůležité a jde udělat vně dokumentu (určitě jste již slyšeli magickou zkratku CSS). Ano Cascading Style Sheets vám umožní oddělit vzhled od obsahu.

Myslím, že pro začátek se můžete začíst do úvodu CSS na webu jakpsatweb.cz. Dozvíte se jak a proč styly tvořit. Pokud je třeba některých podrobností, můžete sáhnout po specifikaci CSS a když budete muset obcházet nestandardní chování prohlížečů - je tu seznam CSS hacků.

A samozřejmě je mnoho dalších souvisejících informací, které je třeba vědět, při tvorbě kvalitních stránek. Ty se můžete dozvědět například v prvním díle seriálu na živě.cz - Prostředky současného webdesignu. Počítejte s tím, že běžný uživatel je strašný lenoch, takže jej nenuťte přemýšlet!

 

Tip: Krátké zprávy a zajímavosti (rychlý přístup https://kryl.info/kratce)