Domů > Odborné články > Gymnaziální vzdělávání > Elektronická příprava dokumentů pro web
Odborný článek

Elektronická příprava dokumentů pro web

23. 4. 2012 Gymnaziální vzdělávání
Autor
Zuzana Černá
Spoluautor
RNDr. Michal Černý Ph.D.

Anotace

Elektronická příprava dokumentů pro web představuje dosti komplexní a rozsáhlou problematiku, která začíná u HTML, postupuje přes CSS až po sémantický web a typografická pravidla. Navíc jde o oblast, která se rychle a dynamicky mění.

V předchozích dílech seriálu o elektronické přípravě dokumentů jsme se věnovali především zpracování textu, který bude uložený v PDF či vytištěn. V dnešním díle se zaměříme především na oblast čistě webovou, tedy to, jakým způsobem je možné nejlépe vytvořit dokument, který bude moci uživatel číst přímo z webového prohlížeče.

SEO, design a klíčová slova

Pakliže tvoříme dokument (či celé stránky), které jsou určené pro web, je třeba respektovat daleko více pravidel než v případě tištěného dokumentu. U něj byla důležitá jazyková a typografická úroveň, případně takové grafické zpracování, které by mohlo upoutat čtenáře. Marketing představoval činnost, která nás v této oblasti příliš nezajímala. Situace na webu je ale dramaticky odlišná. Cílem není jen vytvořit dokument, který bude mít vhodný vzhled. Musí být také jednoduše dostupný pro konzumenta obsahu. Měl by proto mít takovou strukturu, která umožní, aby byl snadno zpracovatelný vyhledávacími stroji.

SEO (Search Engine Optimization) je metodika, která se snaží říci, jakým způsobem webové stránky optimalizovat, aby byly co nejlépe přístupné vyhledávačům a umísťovaly se na co nejlepších pozicích. Pokud bychom měli na tomto místě nabídnout některé základní principy (etické a neproblematické), tak by bylo možné uvést především následující: 

  1. Kvalitní, unikátní a často aktualizovaný obsah. Je jistě otázkou, do jaké míry je možné tohoto dosáhnout u jednoho dokumentu, ale u webových stránek by to neměl být problém.
  2. Správné používání XHML je druhým požadavkem. Nemusí jít jen o validitu, ale především o to, aby se značky používaly tak, jak mají. Nadpis má být označen pomocí značky h1 až h6, nikoli jen větším písmem. Zdůrazněné pasáže pomocí em či strong, nikoli jen tučně či kurzivou.
  3. Je vhodné užívat popisky všude tam, kde je to možné – u odkazů, obrázků atp. Nejen že se tím zlepší přístupnost webu pro nevidomé či slabozraké uživatele, ale bude se s nimi také lépe pracovat vyhledávačům.
  4. Je vhodné pracovat s krátkými, neměnnými a smysluplnými URL adresami.
  5. Každý dokument musí mít popisek, titulek a klíčová slova. Především titulek patří k nejvýznamnějším místům, která vyhledávače posuzují.
  6. Budování zpětných odkazů. Čím více vede odkazů na váš web (a z čím významnějších serverů), tím vyšší bude pozice ve vyhledávačích. Je jistě užitečné budovat zpětné odkazy také v rámci vlastního webu či většího množství spřízněných stránek. 

Řada odborníků ale SEO jako takové kritizuje. Web by měl být tvořen pro uživatele a ne pro vyhledávací stroje. Jak ale bylo uvedeno výše, většina pravidel se pro obě skupiny shoduje. Na druhou stranu je možné identifikovat relativně velkou snahu řady webů o to, aby se v textech objevovalo co největší množství klíčových slov, aniž by trpěla slohová úroveň a čitelnost obsahu. Také to je možné se žáky velice snadno trénovat a procvičovat. Jde ale paradoxně o tendenci jdoucí proti běžným slohovým zásadám o rozmanitosti slovní zásoby.

Pozornost by měla být věnována také designu. V dnešní době hraje prim řešení pomocí tabulek či CSS3 s tím, že tagy jako frame a iframe ustupují do pozadí. Za sebe si však nejsem nejsem jist, zda zmíněné dva tagy vůbec žákům uvádět. Pokud jde o písmo, tak se doporučuje kombinace černého písma na bílém pozadí. Barevně bývají odlišeny jen nadpisy, odkazy nebo různé informační boxy. Osobně se domnívám, že by celý web měl být laděn do maximálně tří barev.

Pokud jde o písma, dříve se silně preferovala patková kvůli lepší čitelnosti. U dnešních nových fontů je to ale vcelku lhostejné – je možné volit patková i bezpatková písma, v případě uvádění zdrojového kódu či jiného mimořádného textu neproporcionální font. Rozhodně je třeba se vyvarovat ozdobných písem či kurzivních fontů. U webu platí, že podržené jsou zásadně jen odkazy. O tom, jak zvýrazňovat text, jsme již psali výše. Z důležitých věcí je třeba žákům neustále vštěpovat, že není možné psát odkazy do slov „tady“ či „zde.“ Odkaz vždy náleží nějaké konkrétní informaci a s tou má být spojen. 

Jistou pozornost by se měli žáci naučit věnovat také různým prohlížečům. Je třeba pamatovat na to, že stránka může v prohlížečích vypadat rozdílně, a s ohledem na to také stránky optimalizovat. Otázkou je, zda v dnešní době nevytvářet již automaticky varianty pro mobilní telefony a jejich prohlížeče.

Sémantický web

Jedním z velkých problémů současného webu je problém obsahu. Vyhledávače jsou stroje, které nedokáží porozumět textu, ale pracují jen s lexikálními jednotkami, které jim dá autor textu. Sémantický web se v tomto směru snaží o to, aby dal webu nejen obsah, ale také význam. Pomocí ustálených značek z rodiny XML jsou mimo uživateli viditelné informace uložena také data, která říkají jaký je obsah textu, s čím souvisí a na co odkazuje. Tím, že sémantický desktop užívá zažitých značek a formálního jazyka, je možné tento popis realizovat relativně snadno. Otázkou je, zda to má smysl. Osobně si myslím, že na úrovni gymnázia by mělo stačit informativní seznámení s konceptem sémantického webu a desktopu.

Naopak rozdělení HTML značek na logické (body, a, meta, title ,...) a formální (i, b, em, strong, ...) považuji za zásadní především pro pochopení toho, jak je celý web vystavěn – na jedné straně je zde popis vzhledu dokumentu, ale také řada dalších informací, které mají velký význam proto, aby stránky mohly fungovat.

Obrázky a vzorce

Zajímavou oblastí přípravy dokumentů pro web je také práce s obrázky. Situace je dnes možná složitější než kdykoli předtím. Relativně jednoduchá je práce s rastrovými obrázky. Zde se obvykle doporučuje zobrazovat snímek v původní velikosti (tedy mu neměnit rozměry) a v případě, že chceme, aby se načetla po kliknutí jeho větší varianta, nahrajeme na web obrázky dva. Pokud jde o formát, tak zcela dominantní je jpg, kterému postupně sekunduje png. Pro pohybující se grafické prvky se dříve užíval gif, který je dnes stále více vytlačován banery tvořenými ve Flash.

Poněkud problematický je formát svg – pro vektorovou grafiku. Na jednu stranu tento formát nabízí velice transparentní zpracování až na straně prohlížeče, takže se nepřenášejí žádné velké objemy dat (svg je v podstatě XML dokument popisující vzhled grafického schématu), a je v zásadě tím nejlepším, co si pro web lze představit. Vyhledávače mohou snadno zjistit, co je na obrázku atp. Na druhou stranu řada prohlížečů si s svg neporadí a problémem může být i ono přenesení výkonu na počítač – v době rozšířenosti tabletů, čteček a mobilních telefonů nejde o optimální řešení z hlediska rychlosti. Někdo bude doporučovat převod svg na bitmap, jiný propagovat přímo svg. Zde skutečně záleží jen na preferencích tvůrce stránek. 

Je dobré vést žáky k co možná nejstřízlivějšímu užívání grafických prvků – obrázky na pozadí již dnes dávno nejsou in a stejně tak nikoho nepotěší velké množství pohyblivé grafiky. V tomto ohledu je třeba apelovat na dobrý vkus každého jednotlivce. Obrázky se doporučuje vkládat s relativní adresou, pokud je to možné.

Ještě složitější je otázka zpracování vzorců a rovnic. Existuje standardizovaný jazyk MatML, který by si s touto problematikou měl poradit, ale prohlížeče jej většinou nepodporují, nebo alespoň špatně interpretují. Asi nejlepší variantou je užít nějakou Wiki, která provádí převod LaTeX kódu vzorce na obrázek. Pokud tuto možnost nemáte, je třeba si obrázky vzorců zajistit nějak ručně. Osobně se domnívám, že absence podpory MatML u prohlížečů je jednou z největších bolestí současného webu.

CSS

Důležitým prvkem návrhu současného webu je implementace kaskádových stylů (CSS), které definují, jak mají jednotlivé prvky vypadat. Právě proto je třeba vést žáky k tomu, aby všech prvků využívali korektně, neboť bez nich není možné kaskádových stylů efektivně využít. V současné době existují dvě varianty jejich implementace – buď přímo v dokumentu nebo formou externího souboru. První varianta má určité opodstatnění snad jen v případě, pokud má být na dokumentu něco specifického a odlišného od zbytku webu nebo pokud pracujeme jen s jedním dokumentem. Jinak bych zcela zřetelně doporučoval umístit CSS do externího souboru, ke kterému mohou přistupovat všechny dokumenty. 

Z důležitých návyků jde především o to, aby se žáci naučili psát do složených závorek popisujících užité fonty jejich co nejširší výběr. Prohlížeč vybírá podle pořadí, a ač na většině počítačů budou standardní fonty nainstalovány, je dobré dát uživateli dostatečnou alternativu. Pokud jde o samotnou výuku kaskádových stylů, myslím, že dobrou cestou je vzít nějaký hotový soubor a žáky jej nechat jen mírně upravovat a stručně jim říci, co která položka vlastně znamená. Podrobnosti se budou muset stejně naučit sami a na vlastní kůži si je odzkoušet.

Licence

Všechny články jsou publikovány pod licencí Creative Commons BY-NC-ND.

Hodnocení od recenzenta

Tým RVP.CZ
23. 4. 2012
Pěkný, prakticky zaměřený článek. Informace v něm vypsané jsou zkušenějším tvůrcům webových stránek jistě známé. Jsou však doplněné osobními zkušenostmi z výuky daného tématu a to je vždy mnohem cennější, než jen stručné a z učebnic vypsané obecné údaje.

Hodnocení od uživatelů

Článek nebyl prozatím komentován.

Váš komentář

Pro vložení komentáře je nutné se nejprve přihlásit.

Článek pro obor:

Informatika a informační a komunikační technologie