1
Moderní webové standardy
Obsah
XHTML ............................................................................................................................ 1
XHTML .................................................................................................................... 1
Co je XHTML ........................................................................................................... 2
Struktura XHTML dokumentu ...................................................................................... 2
Typy XHTML 1.0 Dokumentů ...................................................................................... 2
XHTML a jmenné prostory .......................................................................................... 3
Použití XHTML s jinými jmennými prostory ................................................................... 3
Ukázka použití XHTML s jinými jemnnými prostory ........................................................ 4
Rozdíly oproti HTML 4 .............................................................................................. 4
Rozdíly oproti HTML 4 (pokračování) ........................................................................... 5
Rozdíly oproti HTML 4 (pokračování) ........................................................................... 5
Otázky kompatibility ................................................................................................... 5
Další zdroje informací ................................................................................................. 6
HTML 5 ........................................................................................................................... 6
HTML 5 ................................................................................................................... 6
Různé syntaxe HTML 5 .............................................................................................. 7
Deklarace typu dokumentu ........................................................................................... 8
Novinky v HTML 5 .................................................................................................... 8
Změny v jazyce ......................................................................................................... 8
Změny v jazyce (pokračování) ...................................................................................... 9
Změny v jazyce - API ................................................................................................. 9
Další zdroje informací ............................................................................................... 10
CSS ................................................................................................................................ 10
CSS ........................................................................................................................ 10
Syntaxe CSS ............................................................................................................ 10
Syntaxe CSS pokračování ........................................................................................... 11
CSS - vlastnosti ........................................................................................................ 11
Propojeni dokumentu a CSS ....................................................................................... 12
Zdroje ..................................................................................................................... 12
Přístupnost ....................................................................................................................... 13
Co je to přístupnost ................................................................................................... 13
Legislativa a standardy .............................................................................................. 13
WCAG .................................................................................................................... 13
Základní doporučení tvorby přístupného webu ............................................................... 14
WAI - ARIA ............................................................................................................ 14
Odkazy ................................................................................................................... 14
XHTML
XHTML
* Vznikl přepisem HTML pomocí pravidel XML
* XHTML dokument je dobře utvořeným XML dokumentem.
* Měl by mít XML prolog.
Moderní webové standardy
2
* Hodnoty atributů musí být ohraničeny pomocí ", resp. '.
* Každý element musí mít počateční a koncovou značku.
* Elementy se nesmí křížit.
* Aktuální 1.1
* Používaná verze 1.0
Co je XHTML
* rodina současných a budoucích typů dokumentů, které reprodukují a rozšiřují HTML 4.
* Tyto typy dokumentů jsou založeny na XML a jsou navrženy tak, aby byly zpracovatelné pomocí
uživatelských agentů (prohlížečů, ...) založených na XML.
* XHTML 1.0 je přeformulováním tří HTML4 typů dokumentů jako aplikací standardu XML 1.0.
* XHTML dokumenty splňují standard XML..
* Měly by být zpracovatelné stejně dobře, pokud ne lépe v existujících uživatelských agentech
podporujících HTML 4 i XHTML 1.0.
* Při dodržení jednoduchých doporučení je zpracovatelný i pomocí uživatelských agentů podporujících
HTML 4.0
Struktura XHTML dokumentu
XHTML 1.0 dokument musí:
* splňovat jedno ze tří DTD.
* Kořenový element musí být element html.
* Kořenový elementu musí:
* obsahovat deklaraci jmenného prostoru.
* Jmenný prostor musí být http://www.w3.org/1999/xhtml.
* Kořenovému elementu musí předcházet deklarace typu dokumentu.
* Ukázka kořenového elementu:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Typy XHTML 1.0 Dokumentů
* XHTML Strict
* <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
* Striktně odděluje strukturní značkování od vzhledu dokumentu.
* vzhled je nutno řešit pomocí CSS
Moderní webové standardy
3
* nedefinuje vizuální značky a atributy (např. <b/>, ...)
* XHTML Transitional
* <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
* Umožňuje kombinovat strukturní a vizuální značkování
* XHTML Frameset
* <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
* Určeno k vytváření stránek pomocí rámců
XHTML a jmenné prostory
* XHTML podporuje jmenné prostory
* Jmenný prostor pro XHTML:
* http://www.w3.org/1999/xhtml
* Ukázka XHTML 1.0 dokumentu
<?xml version="1.0" encoding="UTF-8">
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Naše první XHTML 1.0 Stránka</title>
</head>
<body>
<h1>První odstavec</h1>
<p>
Kdo najde aspoň 5 rozdílů oproti HTML 4?
</p>
</body>
</html>
Použití XHTML s jinými jmennými prostory
* Pomocí jmenných prostorů lze XHTML kombinovat s jinými druhy značkování
* RDF - doplnění sémantiky.
* SVG - vkládání grafiky
* chybí podpora v prohlížečích
* jednodušší vkládání pomocí elementu img
Moderní webové standardy
4
* Voice + XHTML profile - možnost vyplňování formulářů pomocí hlasu
* nutnost nainstalovat rozšíření
* funkční pouze v některých prohlížečích
* lze použít pouze v některých jazycích
Ukázka použití XHTML s jinými jemnnými prostory
* Vkládání jiných značkování do XHTML
<?xml version="1.0" encoding="utf-8">
<html
xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
<title>Kombinování MathML a XHTML</title>
</head>
<body>
<p>Následuje ukázka v MathML</p>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<apply> <log/>
<logbase>
<cn> 3</cn>
</logbase>
<ci> x </ci>
</apply>
</math>
</body>
</html>
Rozdíly oproti HTML 4
* Documenty musí být správně utvořené:
* ačkoliv například křížení elementů je v SGML zakázáno, tak je v prohlížečích často tolerováno.
<p>Ukázka <em>křížení elementů.</p></em>
* Elementy a jména atributů musí být malými písmeny.
* XML je case-sensitive takže, <p> a <P> jsou různé značky.
* Neprázdné elementy musí mít koncovou značku.
* Hodnoty atributů musí být uzavřeny v úvozovkách nebo apostrofech.
* XML (XHTML) nepodporuje minimalizaci atributů:
* <dl compact="compact"> vs. <dl compact>
* Prázdné elementy musí být ukončeny:
* nelze např. použít <br>, musí se zapisovat <br/>
Moderní webové standardy
5
* Zpracování bílých znaků v atributech:
* odstraňují se bílé znaky na začátku a konci hodnoty atributu
* sekvence bílých znaků se převádí na jednu mezislovní mezeru.
Rozdíly oproti HTML 4 (pokračování)
* Skripty a elementy se specifikací stylu
* musí být označena jako CDATA sekce:
<script type="text/javascript>
<![CDATA[
... vlastní kód v javascriptu ...
]]>
</script>
* SGML vyloučení
* SGML narozdíl od XML umožňuje v DTD zakázat určitý druh obsahu elementu
* např. vnořené odkazy (elementy <a>)
* Elementy s atributy id a name
* HTML 4 umožňovalo u některých elementů použít jako identifikátory fragmentů jak atribut name,
tak id (a, applet, form, ...)
* XHTML dokumenty musí používat atribut id.
Rozdíly oproti HTML 4 (pokračování)
* Atributy s předdefinovanými hodnotami
* XHTML je case sensitive, takže např. hodnoty TEXT a text jsou různé (element input).
* Odkazování entit pomocí hexadecimálních hodnot:
* HTML umožňovalo oba zápisy &#xnn; i &#Xnn; v XHTML musí být &#xnn;
* Podrobnosti viz specifikace [http://www.w3.org/TR/2002/REC-xhtml1-20020801/]
Otázky kompatibility
* Může být vhodné udržovat zpětnou kompatibilitu s HTML 4
* Ne všechny prohlížeče korektně zpracovávají XHTML.
* Je možné použít typ obsahu text/html místo application/xml+html, pokud se dodrží následující
doporučení.
Moderní webové standardy
6
* Sada doporučení pro zpětnou kompatibilitu:
* Pozor na to, že instrukce pro zpracování mohlou být některými prohlížeči zobrazeny.:
* Vkládejte mezeru před / a >
* <br />, <hr />, <img src="..." /
* Nepoužívejte minimalizovanou formu elementů:
* místo <p /> používejte <p> ... </p>
* ...
* Vyvarujte se konců řádků v hodnotách atributů.
* Používejte oba atributy lang a xml:lang pro specifikaci jazyku elementu.
* Pozor na identifikátory fragmentů.
* Specifikace kódování
* používejte také element meta
* Boolovské atributy
* některé prohlížeče nejsou schopny zpracovat plnou formu boolovských atributů.
* Další viz specifikace [http://www.w3.org/TR/2002/REC-xhtml1-20020801/].
Další zdroje informací
* Specifikace HTML 4. [http://www.w3.org/TR/1999/REC-html401-19991224]
* Specifikace XHTML 1.0 [http://www.w3.org/TR/2002/REC-xhtml1-20020801/].
* Tutoriál na w3schools [http://www.w3schools.com/xhtml/].
* XHTML Reference na zvon.org [http://www.zvon.org/xxl/xhtmlReference/Output/index.html].
* Řada knih:
* S. M. Schafer: HTML, XHTML a CSS: bible
* E. Castro: HTML, XHTML a CSS: Názorný průvodce tvorbou WWW stránek
* P. Druska: CSS a XHTML: tvorba dokonalých webových stránek krok za krokem.
* ...
HTML 5
HTML 5
* Stále se jedná o draft - nejedná se o standard (doporučení - recomendation).
* stále se vyvíjí, může ještě doznat určité změny
Moderní webové standardy
7
* otevřená témata:
* de facto semantická definice některých elementů, určených původně k prezentaci
* detaily přístupnosti a nezávislosti na médiích jako jsou atributy alt a summary.
* Definuje jazyk HTML 5, který může být aplikací SGML (HTML) i aplikací XML (XHTML).
* obě syntaxe jsou přípustné.
* Definuje detailní model zpracování podporující interoperabilní implementace.
* Vylepšuje značkování dokumentů.
* Uvádí značkování a API pro např. Webové aplikace.
* Cíle:
* HTML 4 a starší - příliš volná struktura
* XHTML 1.x - příliš pevná struktura
* Vytvořit standard, který bude využívat to dobré z obou specifikací.
Různé syntaxe HTML 5
* HTML
* zpětně kompatibilní s HTML 4 a XHTML 1
* není plně kompatibilní s SGML specifikací HTML 4:
* nepodporuje instrukce pro zpracování
* a zkrácený zápis značek
* prázdnou počáteční značku (<>)
* prázdnou koncovou značku (</>)
* ...
* mimetype text/html
* HTML sandboxed
* Syntaxe je shodná se syntaxí HTML.
* Vhodné pro použití se stránkami z nedůvěryhodných zdrojů.
* mimetype text/html-sandboxed
* XML
* kompatibilní s XHTML 1
* nutno definovat jmenný prostor http://www.w3.org/1999/xhtml
Moderní webové standardy
8
* mimetype application/xhtml+xml nebo application/xml
Deklarace typu dokumentu
* Slouží pouze k tomu, aby prohlížeče správně zvolili způsob zobrazování stránky.
* Nemá žádný jiný účel.
* Pro XML syntaxi je volitelná.
* DOCTYPE:
<!DOCTYPE html>
* Při použití HTML syntaxe není case-sensitive.
* Jelikož se používá pouze pro zvolení správného režimu zobrazení prohlížeče, neobsahuje odkazy na
DTD.
Novinky v HTML 5
* Možnost přímo vkládat značkování SVG a MathML
* Ukázkový dokument s vloženým SVG obrázkem:
<!DOCTYPE html>
<title>SVG v text/html</title>
<body>
<p>
Modrá elipsa
<svg>
<ellipse cx="100" cy="100" rx="90" ry="30" fill="blue"/>
</svg>
</p>
</body>
Změny v jazyce
* Přidána řada nových elementů
* popis struktury
* section, article, aside, header, footer, figure, ...
<figure>
<video src="sample.mp4"></video>
<figcaption>Ukázkové video</figcaption>
</figure>
* multimédia
* video, audio.
* nové typy vstupů ve formulářích (hodnoty atributu type u elementu input)
Moderní webové standardy
9
* vynechány některé elementy (frame, frameset, noframes, ...)
* vynechány některé atributy
* více viz specifikace [http://www.w3.org/TR/2010/WD-html5-20100304/] a popis rozdílů oproti
HTML4 [http://www.w3.org/TR/2010/WD-html5-diff-20100304/]
Změny v jazyce (pokračování)
* Přidány nové atributy:
* media u elementu a a area
* globální atribut contenteditable
* draggable
* změna hodnot atributy type u elementu input
* ...
* Vynechány některé elementy
* frame, frameset, noframes - nelze používat rámce pro zobrazení stránek - snižují přístupnost.
* font
* applet
* .
* Vynechány některé atributy
* rev, charset (link, a)
* longdesc (img, iframe)
* target (link)
* align
* background
* bgcolor
Změny v jazyce - API
* Přidána nová API
* pro přehrávání multimedií (videa/audia)
* pro offline práci s webovými aplikacemi
* umožňující webové aplikaci registrovat se pro zpracování určitého typu obsahu
* pro editaci obsahu ve spolupráci s atributem contenteditable
Moderní webové standardy
10
* pro Drag&Drop v kombinaci s atributem draggable
* ...
Další zdroje informací
* Specifikace HTML5 [http://www.w3.org/TR/2010/WD-html5-20100304/]
* Rozdíly mezi XHTML 1.0, HTML 4 a HTML5 [http://www.w3.org/TR/2010/WD-html5-
diff-20100304/]
* Stránky věnované HTML5
* html5tutorial [http://html5tutorial.net/]
* Canvas tutorial [https://developer.mozilla.org/en/Canvas_tutorial]
* HTML 5 tag reference na w3schools [https://developer.mozilla.org/en/Canvas_tutorial]
* Prezentace z brněnského setkání GUG vytvořená pomocí HTML5 [http://apirocks.com/html5/
html5_draft_slides.html] - plně funkční v Google Chrome [http://www.google.com/chrome/] a Safari
[http://www.apple.com/safari/download/], projít si ji je možné v Opeře [http://www.opera.com].
* ...
CSS
CSS
* jazyk pro popis prezentace XML/SGML dat.
* Umožňuje:
* nastavení vzhledu stránky (barvy, fonty, rozložení částí textu, zarovnání, okraje, ...)
* oddělit obsah od vzhledu
* přizpůsobení vzhledu různým zařízením (klasický počítač, mobilní prohlížeč, tiskárny, ...)
* změnu vzhledu stránky/prezentace pouhou změnou stylu bez nutnosti modifikace dat v prezentaci.
* W3C standard
* Aktuální verze 2.0 - ve stádiu draftu verze 2.1.
* pracuje se na verzi 3.0 - ve stádiu working draft.
* Nemá XML syntaxi
Syntaxe CSS
* skládá se z deklarací stylů pro:
* daný typ elementu - pro daný element
Moderní webové standardy
11
* danou třídu elementu - pro daný element s odpovídající hodnotou atributu class
* jeden daný element - pro daný element s odpovídající hodnotou atributu id
* Formát deklarace:
selector {
deklarace stylu;
}
* Selector
* daný typ elementu - <název elementu>
h1{
deklarace stylu;
}
Syntaxe CSS pokračování
* Selector
* daná třída elementu - <název_element>.<třída_elementu>
h1.menu{
deklarace stylu;
}
<h1 class="menu">Nadpis pro menu</h1>
* element s daným id - [<název_elementu>]#<id_elementu>
div#menu{
deklarace stylu;
}
resp.
#menu{
deklarace stylu;
}
<div id="menu">
obsah elementu
</div>
* deklarace stylu - <název atributu>: <hodnota>;
h1{
backgound:blue;
}
CSS - vlastnosti
* stylování
Moderní webové standardy
12
* pozadí - background-color, background-image, ...
* text - color, text-align, text-shadow, ...
* písmo - font-family, font-style, font-size, ...
* odkazy - a:link, a:visited, a:hover, a:active
* seznamy - list-style-type, list-style-image, list-style-position, list-style-type
* okraje
* border-style
* border-width
* border-color
* lze nastavovat i jednotlivé okraje (left, top, right, bottom)
* margin
* padding
* pozicování.
* ...
Propojeni dokumentu a CSS
* interní styl:
<html>
<head>
<style type="text/css">
h1{
background:#00ccff;
}
</style>
<title> ...</title>
</head>
<body>
...
</body>
</html>
* externí styl:
<head>
<link rel="stylesheet" type="text/css" href="mujstyl.css"/>
...
</head>
Zdroje
* Specifikace CSS level 2 [http://www.w3.org/TR/2008/REC-CSS2-20080411/]
Moderní webové standardy
13
* Learning CSS [http://www.w3.org/Style/CSS/learning] na W3C
* Tutorial [http://www.w3schools.com/css/default.asp] na W3Schools
Přístupnost
Co je to přístupnost
* Možnost používat služby pro libovolného člověka s přístupem k Internetu resp. příslušnému intranetu.
* Možná omezení uživatelů při komunikaci s počítačem:
* zdravotní postižení
* pohybový aparát - zejména ruce a horní polovina těla
* zrak
* sluch
* věk
* snížená kvalita zraku
* zhoršená motorika
* schopnost porozumět uživatelskému rozhraní
* některá duševní postižení
* Pro nás - návrh rozhraní tak, aby neomezovalo pokud možno žádnou z uvedených skupin.
Legislativa a standardy
* Požadavek na přístupnost některých portálů je dán i legislativně
* EU - směrnice z 13.9. 2005 - eAccessibility [http://europa.eu/legislation_summaries/
information_society/l24226h_en.htm]
* Podobný zákon existuje i v USA (Americans with Disabilities Act [http://www.ada.gov/]).
* Související standardy:
* W3C WAI [???]
* Blind-friendly web [http://www.blindfriendly.cz/]
WCAG
* Doporučení W3C
* Sada doporučení, jak psát přístupné webové stránky
* Aktuální verze 2.0
* Několik vrstev:
Moderní webové standardy
14
* principy
* doporučení
* kritéria úspěšnosti
* postačující a doporučené techniky
Základní doporučení tvorby přístupného webu
* Poskytnout textovou alternativu pro netextová média (obrázky videa, ...)
* Poskytnout alternativu ke zvukovým a obrazovým záznamům.
* Vytvářet obsah prezentovatelný různými způsoby.
* Usnadněte uživatelům poslech a prohlížení obsahu dostatečným oddělením popředí od pozadí.
* Zpřístupněte veškerou funkcionalitu pomocí klávesnice.
* Poskytněte uživateli dostatek času k přečtení obsahu.
* Vyvarujte se takového návrhu vzhledu, který by mohl způsobit různé záchvaty.
* Poskytněte uživateli pohodlnou a snadnou navigaci v obsahu a snadné zjištění pozice.
* Vytvářejte čitelný a srozumitelný obsah.
* Vytvářejte stránky tak, aby se zobrazovaly a chovaly předvídatelným způsobem.
* Pomozte uživatelům se vyvarovat a opravit případné chyby.
* Maximalizujte kompatibilitu se současnými i budoucími uživatelskými agenty včetně podpůrných
technologií.
WAI - ARIA
* Definuje způsob jak učinit Web a webové aplikace přístupnější
* např. zpřístupnění aplikací založených na technologii AJAX.
* Standard W3C
* Více viz W3C [http://www.w3.org/TR/wai-aria/]
Odkazy
* eAccessibility [???]
* ADA [http://www.ada.gov/]
* WAI [http://www.w3.org/WAI]
* WCAG 2.0 [http://www.w3.org/TR/WCAG20/]
* Blind Friendly Web [www.bliendfriendly.cz]