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 ........................................................................................................................... 7
HTML 5 ................................................................................................................... 7
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
Generování HTML5 pomocí XSLT .............................................................................. 10
Další zdroje informací ............................................................................................... 10
CSS ................................................................................................................................ 10
CSS ........................................................................................................................ 10
Syntaxe CSS ............................................................................................................ 11
Syntaxe CSS pokračování ........................................................................................... 11
CSS - vlastnosti ........................................................................................................ 12
Propojeni dokumentu a CSS ....................................................................................... 12
Zdroje ..................................................................................................................... 13
Přístupnost ....................................................................................................................... 13
Co je to přístupnost ................................................................................................... 13
Legislativa a standardy .............................................................................................. 14
WCAG .................................................................................................................... 14
Základní doporučení tvorby přístupného webu ............................................................... 14
WAI - ARIA ............................................................................................................ 15
Další doporučení WAI ............................................................................................... 15
Odkazy ................................................................................................................... 15
XHTML
XHTML
• Vznikl přepisem HTML pomocí pravidel XML
• XHTML dokument je dobře utvořeným XML dokumentem.
Moderní webové standardy
2
• Měl by mít XML prolog.
• 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
Moderní webové standardy
3
"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
• 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.
Moderní webové standardy
4
• SVG - vkládání grafiky
• chybí podpora v prohlížečích
• jednodušší vkládání pomocí elementu img
• 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ů:
Moderní webové standardy
5
• <dl compact="compact"> vs. <dl compact>
• Prázdné elementy musí být ukončeny:
• nelze např. použít <br>, musí se zapisovat <br/>
• 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
Moderní webové standardy
6
• 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í.
• 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.
• ...
Moderní webové standardy
7
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
• 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ů.
Moderní webové standardy
8
• mimetype text/html-sandboxed
• XML
• kompatibilní s XHTML 1
• nutno definovat jmenný prostor http://www.w3.org/1999/xhtml
• 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>
Moderní webové standardy
9
<figcaption>Ukázkové video</figcaption>
</figure>
• multimédia
• video, audio.
• nové typy vstupů ve formulářích (hodnoty atributu type u elementu input)
• 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
Moderní webové standardy
10
• 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
• pro Drag&Drop v kombinaci s atributem draggable
• ...
Generování HTML5 pomocí XSLT
• Deklarace typu dokumentu u HTML 5 neobsahuje odkazy na DTD.
• Deklarace typu dokumentu slouží pouze k přepnutí prohlížeče do režimu pro HTML5.
• Řešení:
• Možno generovat deklaraci typu dokumentu:
<!DOCTYPE html SYSTEM 'about:legacy-compat'>
• Nemělo by se používat, pokud lze generovat stručnou verzi.
Další zdroje informací
• Specifikace HTML5 [http://dev.w3.org/html5/spec/Overview.html]
• 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].
• On-line nástroj [html5test.com] pro testování podpory HTML5 v prohlížečích.
• ...
CSS
CSS
• jazyk pro popis prezentace XML/SGML dat.
Moderní webové standardy
11
• 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
• 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{
Moderní webové standardy
12
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í
• 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>
Moderní webové standardy
13
<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/]
• 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.
Moderní webové standardy
14
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:
• 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.
Moderní webové standardy
15
• 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/]
Další doporučení WAI
• Authoring Tools Accessibility Guidelines ATAG 1.0 [http://www.w3.org/TR/ATAG10/] - přístupnost
aplikací pro tvorbu webových stránek/prezentací
• User Ageng Accessibility Guidelines UAAG 1.0 [http://www.w3.org/TR/UAAG10/] - přístupnost
prohlížečů a přehrávačů médi a jejich vztah k assistivním technologiím.
• Web Accessibility and Older People WAI older users [http://www.w3.org/WAI/older-users/] přístupnost
webu pro starší uživatele
• vyvinuto za podpory EU (6. rámcový program)
• Web Contente Accessibility and Mobile Web [http://www.w3.org/WAI/mobile/] - přístupnost webu pro
uživatele mobilních zařízení.
• ...
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]