Moderní webové standardy

Obsah

XHTML
XHTML
Co je XHTML
Struktura XHTML dokumentu
Typy XHTML 1.0 Dokumentů
XHTML a jmenné prostory
Použití XHTML s jinými jmennými prostory
Ukázka použití XHTML s jinými jemnnými prostory
Rozdíly oproti HTML 4
Rozdíly oproti HTML 4 (pokračování)
Rozdíly oproti HTML 4 (pokračování)
Otázky kompatibility
Další zdroje informací
HTML 5
HTML 5
Různé syntaxe HTML 5
Deklarace typu dokumentu
Novinky v HTML 5
Změny v jazyce
Změny v jazyce (pokračování)
Změny v jazyce - API
Další zdroje informací
CSS
CSS
Syntaxe CSS
Syntaxe CSS pokračování
CSS - vlastnosti
Propojeni dokumentu a CSS
Zdroje
Přístupnost
Co je to přístupnost
Legislativa a standardy
WCAG
Základní doporučení tvorby přístupného webu
WAI - ARIA
Odkazy

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.

      • 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

      • 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

    • 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/>

  • 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

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í.

  • 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.

Další zdroje informací

  • Specifikace HTML 4.

  • Specifikace XHTML 1.0.

  • Tutoriál na w3schools.

  • XHTML Reference na zvon.org.

  • Ř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

    • 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

    • 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)

    • vynechány některé elementy (frame, frameset, noframes, ...)

    • vynechány některé atributy

    • více viz specifikace a popis rozdílů oproti HTML4

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

    • pro Drag&Drop v kombinaci s atributem draggable

    • ...

Další zdroje informací

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

    • 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í

    • 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

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

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.

  • 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