No Future

Weblog přesunut na atd.havrlant.net

Nový web o sémantice

23 prosinec 2005, 21:36
rubrika XHTML-semantika

Tak a je to tady, vlastní doména byla pořízena, takže teď už můžu s radostí odkázat na svůj nový web o sémantice – semantika.name.

Už prošla kritikou na Diskusi, možná ji zkusím protlačit ještě někam jinam, uvidíme, jak se to vyvine. Pokud si stránku přečtete, budu rád, pokud na ni odkážete, budu šťastný, pokud vám stránka něco dá a vy začnete psát sémantické weby, budu úplně nejšťastnější.

Tak veselé Vánoce a šťastný nový (i Nový) rok!

Komentáře [3]

Káže vodu, nezná standardy

16 prosinec 2005, 20:05
rubrika XHTML-semantika

Nedávno jsem se chvílemi trochu nudil a tak jsem zabrousil na diskusi na webzdarma. Otevřu sekci HTML a co to mé oči nevidí? Téma s názvem XHTML a HTML. Nemohl jsem odolat a téma jsem poctil svou návštěvou. A nestačil jsem se divit.

XHTML nebo HTML?

Řešila se zde poměrně klasická otázka. Autor píše v HTML a rád by přešel na XHTML, ale ještě předtím by rád znal výhody nového jazyka. Většina příspěvků byla v rámci mezí, až na jeden, klasicky demagogický. Jedná se o příspěvek od Donnyho (první delší, nejde na něj odkázat). V tu chvíli jsem si uvědomil, jak moc zažrané musí být předsudky vůči XHTML. Autor příspěvku alespoň z poloviny lže a ostatní jen přikyvují, nikdo se neozve. Jak smutné, že se k propagaci XHTML musí používat přetvářka (nebo neznalost) a stejně tak je smutné, že největší propagátoři XHTML patrně mnohdy ani nečetli specifikaci…

Donny zmiňuje zcela klasické výmysly, že XHTML zrušilo značky jako <center> nebo , což samozřejmě není pravda (kdo prošel mými testy, ten to již musí vědět). Pověra, že XHTML ruší nějaké značky je hodně zažraná (podle mě nejvíce ze všech pověr, které ohledně xhtml kolují), ale přitom to není pravda. Až XHTML 1.1 ruší první atribut name. Zajímalo by mě, kdo to kdy jako první vyslovil, že XHTML zrušilo některé formátovací prvky (jako  nebo ). Stejně tak tento zápis je proti pravidlům jak XHTML, tak i HTML: text. Mimojiné je zajímavé, že Donny uvádí v příkladu na křížení tagů značky, které jsou podle něj v rozporu se specifikací. Je ale zajímavé sledovat reakce, když se propagátoři XHTML doví, že i zde se může používat značka  nebo <center>.

Druhá věc, která je v souvislosti s tímto tématem často předhazována, je, že XHTML dokument musí mít bezpodmínečně oddělený obsah od formy. To znamená styly v externím souboru, přímý zápis nebo zápis mezi <style> podle nich není možný. Setkal jsem se s tím nedávno i na interforu. Jestli někdo ví, kde je ve specifikaci XHTML psáno, že dokument musí mít nutně obsah oddělený od formy, že je zakázán přímý zápis stylů apod., nechť to prosím najde a hodí do komentářů odkaz. Podle mého skromného názoru může stránka psaná v XHTML používat klidně tabulkový layout a bude validní a podle specifikace.

Vyháníme mýty ohledně XHTML

Takže vzhledem k tomu, že test XHTML nedopadl zrovna pěkně (předchozí test dopadl o mnoho lépe, ale zase musím přiznat, že test byl opravdu hodně těžký), rozhodl jsem se udělat takovou stručnou rekapitulaci a pokusím se vyvrátit některé mýty, které v tomto oboru panují.

Takže předně si je důležité uvědomit, že HTML 4.01 a XHTML 1.0 jsou jazykově totožné. To znamená, že obsahují identické značky a atributy. Respektive tagy, které můžete použít v HTML transitional, můžete také použít v XHTML transitional. A značky, které nemůžete použít v XHTML strict, nemůžete použít ani v HTML strict.
Specifikace XHTML nikde nezakazuje používání tabulkového layoutu, stejně tak značky jako  nebo  jsou plně validní a nejsou ani zavržené, na to pozor (takže je můžete použít i ve striktní verzi).
Validátor XHTML mi přijde jako všeobecně hloupější, protože povoluje některé perverzní výrazy, jako třeba odkaz v odkaze (specifikace to však zakazuje). Kdo nevěří, nechť si v xhtml dokumentu zvaliduje tento zápis: <a href="#">jsem <a href="#">validní</a> stránka</a>.
V HTML jsou značky <html>, <head>a <body> nepovinné. V XHTML jsou povinné všechny a <html> musí být kořenovým elementem (to znamená, že musí obalovat celou stránku).
Teď se možná budu mýlit, nejsem si tím úplně jistý, ale snad nebudu daleko od pravdy. Někteří webdesigneři se domnívají, že neuzavírání nepárových tagů (jako třeba <li>) je hyenismus největšího kalibru. Ovšem když se nad tím člověk zamyslí, dojde k takřka šokujícímu zjištění. Pokud se totiž na konci odrážky nevyskytuje ukončovací tag </li>, ale další odrážka <li>, jak bude uvažovat prohlížeč? Aha, tohle bude asi začátek další odrážky, tak to bych měl tu předešlou ukončit a domyslí si ukončovací značku </li>. Takže ať tam tu značku člověk napíše nebo ne, v konečném důsledku tam vždy bude.
Pokud určujete jazyk elementu, má se správně používat jak atribut lang, tak atribut xml:lang, přičemž ten druhý má přednost. Aby nedošlo k omylu – přednost má vždycky xml:lang, ne ten, který je druhý v pořadí :-)
Poslední dobou také čítám mýtus, že stránka v XHTML je přístupnější a poradí si s ní i takové kravinky jako PDA nebo mobily. Sám žádné PDA nevlastním, takže nemohu moc soudit, ale doporučuji přečíst si tuto diskusi. Můj osobní názor je ten, že na webu je naprostá většina stránek stále psaná v HTML a tímto směrem se tedy budou snažit ubírat i PDA apod. Tudíž podpora HTML by měla všude, bez toho se nikdo neobejde, takže může váznout jedině podpora XHTML. Každopádně přístupnost závisí na tisícech jiných věcech než na použitém jazyku.
Správný XHTML dokument by měl posílat MIME-type application/xhtml+xml, avšak w3c dovoluje posílat i staré text/html, takže není chyba, pokud XHTML dokument budete posílat s tímto MIME-typem. Akorát pak vlastně píšete XHTML, které se vykresluje jako HTML, jestli vám to nevadí ;-).
Na začátku stránky (ještě před DOCTYPEm) by měla být xml deklarace, která obsahuje použité kódování, avšak není to nutnost, specifikace to nenařizuje. Pokud pak používáte UTF kódování, nemusí tam být tím tuplem.

Takže co tedy použít?

Já používám HTML, na XHTML přejdu, až to bude pro mě výhodné. Zatím to pro mě nemá jedinou praktickou výhodu. Věřím, že třeba takový Pacholliny ví, proč používá právě XHTML a ví, jaké to pro něj má výhody. Já to nevím. Netuším, čemu nebo komu bych pomohl, kdybych třeba tento svůj web přepsal do XHTML. I podle slov w3c, pokud nepoužíváte žádné další značkovací jazyky, prakticky žádný rozdíl nerozpoznáme. To znamená, že na většinu jednoduchých či středně složitých webů je zbytečné používat XHTML. Na ty složitější to již nejsem schopný posoudit.

Strašně mě totiž fascinují ti zarytí příznivci XHTML, kterých když se zeptáte, proč píší právě v XHTML tak vám řeknou buď jeden z mýtusů, které jsem nahoře vyjmenoval, nebo řeknou, že je to moderní a že je to budoucnost internetu. XHTML moderní možná je (i když už je také na světě nějaký ten pátek), ale to není přece jednoznačný a určující důvod k tomu, aby bylo tak hojně používáno a že je budoucností internetu? O tom se mi polemizovat nechce, nejsem věštec. Co vy víte, třeba za půl roku vznikne CHTML (Cool HyperText markup language), který XHTML úplně převálcuje ;-).

Komentáře [8]

Nenechte uživatele čekat

17 listopad 2005, 14:03
rubrika XHTML-semantika

Co je horší než nelogicky uspořádaná stránka, nepodtržené a špatně výrazné odkazy, nesprávně formátovaný text nebo přemnoho animovaných gifů na každé stránce? Odpověď je jednoduchá – stránka, která se načítá déle, než si průměrný uživatel stačí uvařit kávu.

Není snad nic horšího, než když kliknete na odkaz a ještě dlouho vidíte, že se prakticky nic neděje. Támhle je načtený nějaký obrázek, počítadlo ukazuje kolikátý jste návštěvník, nahoře bliká relkamní banner, ale samotný obsah stránky nikde. To je pochopitelně špatně.

Z tohoto příkladu plyne jedno jednoduché ponaučení. Obsah stránky by měl být ve zdrojovém kódu pokud možno co nejvíce vepředu. Nemělo by před ním být velké množství obrázků – pokud možno žádný (i logo se může vkládat jako pozadí nějakého divu nebo až na konec stránky s tím, že se potom napozicuje nahoru). Stejně tak není dobré mít před obsahem spoustu externích skriptů jako vkládání reklamních bannerů nebo počítadel. Ve chvíli, kdy bude načtený obsah, uživatel si již může číst a mohou tak být vesele načítány další a další obrázky.

Dále si je nutné uvědomit, že pro každý externí objekt (obrázek, flash, css soubor atp.) musí být vyslán http požadavek, což znamená další zdržování načítání. Neboli jeden obrázek o velikosti sto kilobajtů se načte rychleji než sto obrázků každý o velikosti jeden kilobajt.

Poslední věc, kterou může webdesigner lehce ovlivnit, aby se stránka načítala co nejrychleji, je pochopitelně velikost stahovaného souboru. Což znamená upravit html kód (nebo css) tak, aby byl co nejmenší. Musíte si uvědomit, že každý zbytečný bajt může nepříjemně navýšit výslednou velikost souboru, tudíž je nutné, se takovýchto zbytečných bajtů zbavit. K tomu se moc nehodí novodobý a postmoderní jazyk xhtml, kde žádné z následujících úprav zdaleka nejsou validní, takže se hodí spíše na obyčejné a zastaralé html. Ale už jen tím, že se odhodlám psát v html namísto xhtml ušetřím několik bajtů, protože nemusím psát všude lomítka, nemusím psát namísto hodnota – hodnota="hodnota" apod.

Úpravy v html kódu

Vynechte zbytečné ukončovací tagy jako například </td>, </tr>, </li>, </dt>, </dd>, , </option>. Tyto tagy jsou vesměs zbytečné, prohlížeč si bez problémů domyslí, že dva  za sebou asi neznamenají, že jeden odstavec by byl vnořený do druhého, protože to je prostě nesmysl. Stejně tak deset <li> také nebude zanořovat stále do sebe, ale vykreslí to jako úplně normální seznam.
Nepoužívejte komentáře, každý webdesigner by se měl ve svém kódu vyznat a každý komentář pouze zbytečně zvyšuje velikost výsledného souboru. Uživatel z komentáře nic nemá a pokud uživatel z nějaké části kódu, která není nezbytná, nic nemá, nemá tam ten kód co dělat. Daleko rozumější je dávat například divům srozumitelný identifikátor.
Nepoužívejte uvozovky, když nemusíte u každého atributu, v jehož hodnotě se nevyskytuje nějaký zvláštní znak (procento apod.) uvozovky používat nemusíte. Stejně tak se tam nesmí objevit mezera, tudíž u jednoslovného altu uvozovky nejsou potřeba. Takže můžete napsat toto: <img src=vedeni.jpg width=50 height=50 alt=asdad.dsaf> ale už ne tohle <img src=http://weblog.oflashi.net/vedeni.jpg width=50% height=50% alt=asdad dsaf>. Prohlížeče to sice nějak přelousknou, ale neriskoval bych. Každopádně když je hodnota altu rozdělená mezerou a není to celé v uvozovkách, prohlížeč přečte pouze první slovo.
Vyhněte se entitám, pokud je to ve vašich silách. Občas vídám na některých jednoduchých a statických stránkách místo normálních znaků „ř“ entity. Není jednodušší zapsat správné kódování? Další poměrně častá entita je pevná mezera  , která se někdy používá jako odsazení (zbytečně, k tomu slouží padding nebo margin) nebo se vkládá mezi jednopísmennou spojku (či předložku) a následující slovo, aby se nikdy ono jedno písmenko nezobrazilo na konci řádku. Podle mě je to zbytečné (Derovi se teď patrně otevírá nůž v kapse;-). Pochopím to v tištěné verzi, ale na internetu je zbytečná zhýralost. Já si toho stejně nikdy nevšimnu, že je poslední písmenko na konci řádku a i když nějakou náhodou ano, tak mě to nijak nepohorší. Příčina možná bude v tom, že polovina národa ani neví, že se to takto má zapisovat. Navíc text na webu bývá obvykle zarovnán doleva a vpravo tak vznikají nepříjemné nerovnosti textu, kde se „a“ na konci rozhodně ztratí. Vzhledem k tomu, že správně zapsaná pevná mezera má celkem šest znaků, může ve větším množství pořádně zavařit.
Používejte kratší zápis barev – dlouho jsem nevěděl, že například tento zápis #fff je pouze zkráceně #ffffff. Neboli pokud za mřížkou uvedete pouze tři hodnoty, počítá se, jako by každé písmenko bylo za dvě. Neboli #fad je ve skutečnosti #ffaadd.
Vynechte zbytečné meta tagy jako například author, copyright, date apod. Běžný uživatel tyto hodnoty stejně nikdy neuvidí, tudíž tento úsek kódu je tam zbytečně. Rozhodně deklarujte znakovou sadu a description, nad keywords bych se ještě zamyslel, většina vyhledávačů klíčová slova stejně nebere v potaz.
Vymažte bílá místa mezera je znak jako každý jiný, tudíž zabírá místo. Ale tyto mezery opět uživatel neuvidí, takže tam nemají co dělat. Naprosto ideální je na konci zformátovat html kód do jednoho řádku, tím opět ušetříte docela dost místa.
Používejte tagy  namísto , má to stejný efekt, i co se týče vyhledáváčů (alespoň jsem o tom byl přesvědčem v této diskusi). Každopádně uživatel neuvidí rozdíl mezi  a  tak nevidím důvod, proč  nepoužívat. Stejně tak je jednodušší  namísto  – zde ale ten rozdíl není až tak důležitý, neboť  je kratší pouze o jedno písmenko.
Pokud chcete barevně zdůraznit nějaký text, opět k tomu použijte nebo , je to tak správné. Pokud chcete mít nějaký text barvně odlišný od ostatních, patrně to děláte z toho důvodu, abyste byl text důraznější. To znamená opět použijte , které pouze nastylujte. Připadá mi, že mnoho lidí neví, že i tyto značky jdou nastylovat. Tento zápis je naprosto v pořádku a prohlížeč zobrazí tučné zelené písmo: b {color:green}. Stejně tak můžete nastylovat ostatní tagy. Pokud byste ovšem chtěli mít na stránce tučné písmo i tučné zelené písmo, máte v zásadě dvě možnosti (nepočítám-li použítí nějaké třídy, což opět zvětší výsledný soubor). Buď použít  a , z nichž jedno přestylujete na zeleno nebo přestylujete tag . Sémantika by měla zůstat bez újmy, příkaz  bude stále označovat důležitý text, jenom nebude vypsán kurzívou. Teoreticky můžete i přestylovat  ale to už je jenom pro odvážné. I když i tento tag by měl v zásadě vyznačovat důležitý text.
K formátování dokumentu používejte css. K tomu asi není co dodávat, prostě namísto tisíců značek  použijte třeba jednu deklaraci v css. Ale i css se dá jednoduše zmenšit:

Úpravy v css

Opět vymažte bílá místa a vymažte komentáře. Obě tyto věci tam jsou prostě k ničemu. Pokud máte vhodně zvolené identifikátory, nejsou komentáře potřeba. Zároveň se ale snažte dávat identifikátory a třídy co nejkratší, využívejte logických zkratek.
Využívejte dědičnosti, nemusíte pro každý odstavec, který se nachází v jiném bloku deklarovat pořád a to samé písmo, když můžete druh fontu zapsat již pro body a měnit písma pouze tam, kde je to nutné.
Stejné vlastnosti pro vícero selektorů deklarujte zároveň. Takže pokud chcete, ať je každý nadpis zelený, podtržený, psaný kurzívou, ať má stejný margin a padding a jen se liší velikostí písma, je nejjednodušší zápis tento – je to daleko jednodušší, než psát každý nadpis zvlášť.

h1, h2, h3, h4 {color:green; text-decoration:underline;font-style:italic;padding:5px;margin:10px;font-size:2em}

h2{font-size:1.8em}
h3{font-size:1.6em}
h4{font-size:1.4em}

Využívejte zkrácených zápisů například pro font, margin apod. Zkrácený zápis tedy vypadá asi takto: font: style variant weight size/line-height family. Kupříkladu margin se dá zapsat buď jako margin-left:10px, margin-right:15px atd. Nebo se dají napsat všechny strany do jednoho zápisu: margin:nahoře vpravo dole vlevo. Stejně tak i padding. Pokud napíšete pouze dvě hodnoty, tak první značí nahoře a dole a druhá pak vlevo a vpravo – asi takto: margin: nahoře-dole vlevo-vpravo. Stejně tak padding. Obdobně se dají zapisovat vlastnosti jako border nebo background.
Nepoužívejte zbytečně třídy a identifikátory snažte se najít jiné řešení, pokud chcete odlišit třeba dva odstavce. Kupříkladu kdybyste chtěli, aby odstavec v patičce měl jinou barvu než ve zbytku stránky, stačí použít něco takového: #patka p {color#999} Všechny odstavce kromě toho v patičce budou mít barvu, kterou jste deklarovali někde výše – třeba v body – a nemusíte tak používat pro každý takovýto odstavec třídu.
Nepoužívejte středníky, když to není nutné, což znamená, nepiště středníky na konci deklarace nějakého prvku (tzn. před uzavírací závorkou). Například tady je středník zbytečný: h1{color:#0b0;}.
Nepodlehněte validátoru, pokud vám bude házet nějaké warningy. Ve Většině případů to je chybějící vlastnost background, pokud máte u něčeho deklarovanou vlastnost color. Je to nesmyslná chyba, kterou nemá cenu opravovat.

Poznámka na konec: Tento článek je silně inspirovaný knihou Zrychlete své www stránky, kdo ji četl, patrně to již poznal. Chtěl jsem napsat takovýto článek již dlouho a na pomoc jsem si právě koupil tuto knihu, leč nic převratného v ní nebylo. Většinou potvrdila mé domněnky. Takže tento článek by se dal brát za krátký a stručný výcuc z oné knihy (plus několik mých postřehů, které v knize nebyly).

Nemá cenu optimalizovat pouze nějakou část kódu. Buď provedu optimalizaci všeho (nebo alespoň většiny) nebo vůbec. Nemá smysl si říct, no dobře, tak já vymažu všechny </li> a bude to. To nemá prakticky žádný význam. Já jsem se zde zabýval pouze html+css, protože javascript nebo třeba php neumím prakticky vůbec. Můžete také optimalizovat obrázky, tam se většinou projeví změna nejvíce.

Související:
Na co stránka při vykreslování čeká
Co ovlivňuje rychlost stránek