Technologie současného webdesignu

XHTML/CSS/JavaScript je magické zaklínadlo dnešního webdesignu. Jestliže se kolem webdesignu chvíli motáte, už jste na něj asi narazili. Naopak, pokud ještě nevíte, o co jde, právě jste na začátku článku, který by vám mohl poskytnout základní přehled.

Zejména XHTML je často bráno jako symbol „nového“ přístupu k webdesignu. Je to pro mnoho začátečníků zavádějící. Než se pustíme do samotných technologií, pojďme si tedy z předchozích dílů připomenout, že dnešní webdesign není jen XHTML. Moderní webdesignér totiž:

  • vychází z technologií, dodržuje jejich specifikace a doporučení standardizačních organizací
  • při návrhu webu ovšem používá prostředky – myslí na přístupnost, vyhledávače, informační architekturu, použitelnost
  • technologie a prostředky mu ale jen slouží k tomu, aby web co nejvíce plnil svůj účel, a především se zaměřuje na uživatele webu

XHTML

Značkovací jazyk pro popis struktury obsahu hypertextového dokumentu. Jeho prostředky rozlišujeme význam jednotlivých prvků dokumentu. XHTML není nic složitého – vlastně jen přiřazujete textu jeho význam (například nadpis první úrovně, odstavec, seznam) stejně jako v jakémkoliv textovém editoru.

XHTML v jednoduchém příkladu:

Pro nadpis první úrovně například slouží značka <h1>. V XHTML jsou značky párové, proto také musíme označit, kde nadpis první úrovně končí -- </h1>. Je to úplně jednoduché:

<h1>Technologie současného webdesignu</h1>

XHTML (eXtensible HyperText Markup Language) se vyvinul z jazyka HTML. Stejně jako HTML je definován standardem, který stanovuje mezinárodní organizace W3C. Výrobci prohlížečů k základnímu HTML přidali mnoho různě užitečných rozšíření, nicméně standardní množina by měla fungovat všude a za všech okolností.

Poznámka: Dodržování standardů ještě stále bohužel nepatří mezi běžnou praxi. Až se budete učit XHTML, čiňte tak podle standardů. Když si na XHTML budete někoho najímat, vyžadujte, aby standardy dodržoval. Například proto, že hypertextovým dokumentem, který se jimi řídí, uděláte první krok k dobré přístupnosti a nalezitelnosti ve vyhledavačích.

Odkazy:

CSS

CSS (Cascading Style Sheets) nebo také kaskádové styly slouží pro popis vzhledu hypertextového dokumentu. Asi tak, jako když ve Wordu měníte formát stylu pro nadpis. Změníte barvu, font, jeho velikost nebo jej necháte vypsat kurzívou.

Vzhled celého webu tak můžete ovládat tím, že ke všem dokumentům připojíte jediný CSS soubor.

CSS v našem příkladu:

Chceme vypsat nadpis první úrovně červenou barvou, jinak ponecháme jeho vzhled tak, jak je přednastavený v prohlížeči:

h1 {
color: red;
}

Poznámka: Nezapomeňte, že k popisu vzhledu XHTML dokumentu slouží právě CSS. Předchůdci technologie XHTML umožňovali popis vzhledu speciálními značkami a vlastnostmi značek. Dnešní prohlížeče jsou zpětně kompatibilní, a proto podporují i tyto lotroviny. Jste-li webdesignéři, vyhněte se jim obloukem.

Odkazy:

JavaScript, další klientské skriptovací jazyky a DOM

Už víme, jak označkovat obsah dokumentu. Víme také, že dokumentu můžeme předepsat i vzhled. Klientské skriptovací jazyky ovlivňují chování prvků dokumentu a dodávají dokumentu interaktivitu. Nejčastěji se používají pro ošetřování formulářů – validaci formulářových políček, označení vadného vstupu atd.

DOM (Document Object Model) umožňuje klientským skriptovacím jazykům přístup ke konkrétním prvkům dokumentu.

Jaké jsou další skriptovací jazyky?

VBScript, JScript (oba prosazuje Microsoft), ECMA Script (doporučený standard, který sjednocuje rozdíly mezi JavaScriptem a JScriptem).

Proč klientské?

Neprovádějí se na straně serveru, pro změnu stavu na stránce tedy není nutné nové natažení dokumentu ze serveru.

Proč skriptovací?

Jsou to zjednodušené “dospělé” programovací jazyky – JavaScript vychází z C/Javy, VBScript zase z VisualBasicu.

Odkazy:

V jakém pořadí se technologie učit?

Ve stejném, jak je uvádí tento článek:

  • XHTML – To byste měli jako webdesignéři mít v malíčku. Pokud provozujete vlastní web, tak byste měli znát alespoň základní značky. Pokud vám XHTML píše někdo jiný, vlastně nepotřebujete ani to, ale znát základy se vždy vyplatí.
  • CSS – Až se budete rozhodovat, zda se o CSS více učit nebo ne, položte si otázku: Chci se webdesignu věnovat profesionálně? Odpověď na ni je stejná jako na otázku, zda se na tuto technologii vrhnout. Platíte-li webdesignéry, váš web bude o krok dál, budete-li po nich vyžadovat kombinaci XHTML/CSS.
  • JavaScript – Stejně jako u CSS spíše pro profesionály. V tomto případě neuškodí dřívější znalost jiného programovacího jazyka.

V dalším článku se podíváme na nástroje pro webdesignéry a webmastery. Kromě jiného i na editory, které vám při psaní XHTML, CSS a skriptů pomohou.

Diskuze (53) Další článek: Nová verze ovladačů pro grafické karty ATI

Témata článku: Technika, Software, Programování, Dnešní prohlížeč, Doporučené pořadí, HTML Editor, První krok, Dnešní standard, Vzhled, Zjednodušený příklad, Stejný prvek, Technolog


Určitě si přečtěte

13 praktických tipů a triků pro Mapy.cz, které možná neznáte

13 praktických tipů a triků pro Mapy.cz, které možná neznáte

** Mapy.cz neslouží jen k zobrazení podkladů a plánování tras ** Nabízejí celou řadu dalších praktických funkcí a možností ** Vybrali jsme třináct tipů a triků, o kterých možná nevíte

Karel Kilián | 36

Chyba roku 2038 způsobí problémy, počítače dnes totiž stárnou příliš pomalu

Chyba roku 2038 způsobí problémy, počítače dnes totiž stárnou příliš pomalu

** Loni ajťáky vystrašilo přetečení GPS čítače týdnů ** Nemělo se stát vůbec nic, ale svět opět nebyl připravený ** Za 18 let nás ale čeká ještě něco mnohem většího

Jakub Čížek | 62

Biblická potopa Česka: Jak bychom dopadli, kdyby nás zatopil oceán

Biblická potopa Česka: Jak bychom dopadli, kdyby nás zatopil oceán

** Představte si biblickou potopu ** Nejprve zaniknou Děčín a Břeclav, pak i Brno a Praha ** Hlavním městem se stane Jihlava a zbytky Čechů přežijí na Kvildě

Jakub Čížek | 93

Dnes nastal konec Windows 7. Ale nepropadejte panice, počítač vám nastartuje i zítra

Dnes nastal konec Windows 7. Ale nepropadejte panice, počítač vám nastartuje i zítra

** Dnes končí podpora Windows 7 a systém formálně umírá ** Co to ale znamená v praxi a bude mi PC fungovat i zítra? ** A mohu i v lednu 2020 zdarma přejít na Windows 10?

Jakub Čížek | 121



Aktuální číslo časopisu Computer

Test 9 bezdrátových reproduktorů

Jak ovládnout Instagram

Test levných 27" herních monitorů

Jak se zbavit nepotřebných věcí na internetu