Webdesign mittels HTML5 und CSS(3)

  div {
    transform: scale(0.5);
  }

• rotate Eine Rotation der Elemente wird mit dem Befehl rotate ermöglicht. Der Grad der Rotation wird in der Einheit degree (deg) gemessen. Dieses Beispiel würde
  -Elemente um 270° drehen.

  div {
    transform: rotate(270deg);
  }

• skew Um Objekte zu neigen bzw. zu krümmen, kann skew eingesetzt werden. Auch hier wird mit deg als Maß gearbeitet. Eine Neigung von 30° wird durch das nächste Beispiel erreicht.

  div {
    transform: skew(30 deg);
  }

• matrix Alle bisher vorgestellten Transformationen können auch in Kombination eingestetzt werden. Eine anderer Option ist es die Veränderung in einer Matrix anzugeben. Dazu werden der Matrix 6 Werte

angehängt. Die Reihenfolge ist dabei wie folgt scaleY,skewX,skewY,scaleX,translateX,translateY.^[19]

6.3 Browserunterstützung

Die Hersteller der unterschiedlichen Browser, sind sehr daran interessiert, dass die neue HTML & CSS Technik in ihren Browser unterstützt wird. Dies zeigt vorallem der Aspekt, dass einige wichtige Hersteller sich zur WHATWG zusammen geschlossen haben und um einen neuen Standart zu entwickeln. Dieser Umstand begründete sich zwar darauf, dass die Hersteller nicht mit der Entwicklung des HTML zu xHTML einverstanden waren. Durch den Schritt der W3C zu HTML5 ziehen beide Organisationen größtenteils wieder an einem Strang und verfolgen beide die Weiterentwicklung von HTML5. Wie sieht jedoch die Umsetzung der zur Zeit in Bearbeitung befindlichen HTML 5 Spezifikation aus?

Um darüber eine Aussage zu treffen, wurde ein Test auf der Internetseite http://html5test.com/ mit dem aktuell verwendeten Browser durchgeführt. Dieser Test bewertet die Umsetzung der aktuellen HTML 5 Spezifikationen und vergibt für alle erfolgreich umgesetzten Features Punkte. Die Maximal erreichbare Punktzahl liegt bei 300 Punkten. In den unten stehenden Tabelle sind die Ergebnisse Stand Januar 2011 zu sehen.

Als klarer Sieger geht aus diesem Test der aktuelle Chrome Browser mit 231 von 300 Punkten hervor. Abgeschlagen mit 27 von 300 Punkten liegt der Internet Explorer (IE)8 auf dem letzten Platz. Damit ist zu sehen, dass der Chrome Browser bereits jetzt viele Funktionen von HTML5 anbieten. Um jedoch bessere Aussagen über die HTML5 Fähigkeit der Browser zu treffen, wurde ein weiterer Test auf der Seite http://findmebyip.com/ durchgeführt. Bei diesem Test werden keine Punkte vergeben, jedoch kann genau erkannt werden, welches Feature bereits integriert ist. Folgende Übersicht zeigt welche Features von welchem Browser unterstützt werden.

Abbildung 7 : Test FindMeByIp^[24]

Auch bei diesen Test ist zu erkennen, dass der Chrome Browser bereits viele Features von HTML5 und CSS3 unterstützt. Anders als bei dem test auf HTML5-test.com wurde bei diesen Test bereits eine Beta des IE9 verwendet. Selbst in dieser Version kann der IE nicht so viele Unterstützungen bieten wie die restlichen Browser.

7 HTML5 in der Praxis

In den vorigen Kapiteln wurden die Grundlagen zum Thema HTML5 und CSS3 geschaffen. Dieses Kapitel geht auf den praktischen Teil mittels HTML5 und CSS3 ein und zeigt anschaulich, wie eine Webseite mit HTML5 aufgebaut werden kann. Am Ende dieses Kapitels wird ein einfaches Praxisbeispiel gezeigt, dass den Einsatz von HTML5 und CSS3 verdeutlichen soll.

7.1 Voraussetzungen

Im Vorfeld der Gestaltung einer Webseite sind einige Vorüberlegungen nötig. Das wichtigste bei einer Webseite ist, dass die Webseite der breiten Masse zugänglich ist. Um dies erreichen zu können, ist es wichtig, dass die Webseite von den gängigsten Browsern unterstützt wird und wenige Barrieren vorhanden sind. Die Barrierefreiheit ist ein wichtiges Element bei der Webseitengestaltung, das gerne aus den Augen verloren wird. Barrierefreiheit, auch Web Accessibility genannt, beschreibt dabei den Ansatz, Webseiten so zu gestalten, dass jeder sie lesen und nutzen kann. Dazu gehören auch Menschen mit körperlichen Beeinträchtigungen.

7.1.1 Standard-Konformität

Die Notwendigkeit von Standards wird immer wichtiger. Die Seiten im Internet werden von vielen verschiedenen Personen aufgerufen, die verschiedene Browser, Betriebssysteme und Geräte verwenden. Damit all diese Komponenten die Webseiten in adäquater Qualität verarbeiten können, wurden vom World Wide Web Consortium (W3C) einheitliche Webstandards entwickelt, die sowohl für Browserhersteller als auch für Webentwickler gelten sollen. Diese unabhängige Organisation besteht aus vielen verschiedenen Mitgliedern, die einen großen Einfluss auf die Entwicklung dieser Standards haben.

Die ersten Versionen der Browser implementierten nur die Funktionalitäten, die im Standard beschrieben wurden. Doch schnell entwickelte sich ein Krieg zwischen Netscape und Microsoft, sodass diese Funktionalitäten implementieren, die nicht Teil des Standards waren, wie z.B. die Unterstützung von JavaScript und Frames ^[25]. Auch wenn zusätzliche Funktionalitäten die Arbeit des Entwicklers erleichtern und das Aussehen einer Webseite verschönert, stellt dies immer das Risiko dar, dass diese Webseite von anderen Benutzern nicht richtig aufgerufen werden kann.

Um seine Webseite auf Konformität überprüfen zu können, stehen im Internet Validatoren zur Verfügung, die eine Webseite auf ihren im Doctype angegeben Standard überprüfen. Vor allem das W3C stellt solch einen Validator zur Verfügung ^[26].

7.1.2 Barrierefreiheit

Das Internet hat sich rasant entwickelt. Früher dienten Webseiten ausschließlich der reinen Informationsdarstellung. HTML war anfangs dafür gedacht, Informationen bereitstellen zu können. Als einzige Dynamik waren damals die Hyperlinks vorgesehen, durch die der Nutzer durch die Webseite navigieren oder auf eine externe Webseite verwiesen werden konnte. Heute sind Webseiten viel mehr Anwendungen, wo Benutzer miteinander kommunizieren, selbst Inhalte darstellen, Geschäfte abwickeln usw. Doch all diese Dinge erfordern weitere Technologien, die über HTML als Auszeichnungsprache, hinausgehen. Doch zusätzliche Technologien erhöhen das Risiko, dass nicht jeder die Webseite korrekt aufrufen kann, seien es fehlende Browserunterstützung oder nicht installierte Plugins, die für die Darstellung der Seite notwendig sind.

Zusätzlich wird bei der Erstellung der Webseiten auf das Datenvolumen nicht mehr so viel Rücksicht genommen, da immer mehr Haushalte mit DSL ausgestattet sind. Jedoch existieren immer noch Nutzer, die solch eine schnelle Bandbreite nicht zur Verfügung haben, sodass das Laden einer Webseite viel Zeit in Anspruch nehmen kann. Hinzu kommt, dass Webseiten nicht mehr nur über den Browser auf dem PC aufgerufen werden, sondern auch über Handys, die einen sehr kleinen Bildschirm besitzen und z.B. nicht mit einer Maus ausgestatten sind, die das navigieren erleichtert.

Ein weiterer Aspekt sind Nutzer, die unter einer Behinderung leiden. Menschen mit Sehbehinderung nutzen Screen-Reader um sich Webseiten darzustellen. Im Jahre 1999 wurde vom W3C die so genannten "Web Content Accessibility Guidelines" entworfen, die folgende zwei Ziele verfolgen ^[27]:

• Den Seiteninhalt verständlich und navigierbar zu machen
• Die Sicherstellung von eleganter Transformation

Eine klare inhaltliche Darstellung bezüglich der Sprache reicht für diesen Zweck nicht raus. Dazu ist es wichtig, dass eine einfache und verständliche Möglichkeit besteht, zwischen Seiten innerhalb einer Webseite zu navigieren. Zu diesem Zweck sind Navigationswerkzeuge und Orientierungshelfen unabdingbar. Orientierungshilfen helfen dem Nutzer zu erkennen, wo genau auf der Seite er sich gerade befindet, um den Überblick nicht zu verlieren.

Bezüglich der Transformation lässt sich sagen, dass eine Webseite ohne Probleme an die verschiedenen Gegebenheiten anzupassen sein muss. Dafür gelten folgende Grundsätze^[28].

• Strikte Trennung von Inhalt und Präsentation

Dies wird durch das auslagern eines Style-Sheet realisiert. Dadurch lässt sich für jede Gegebenheit das nötige Style-Sheet laden (z.B. für Druckausgabe). Außerdem verkürzt sich die Downloadzeit, da Informationen nicht doppelt vorkommen und die Sytle-Sheet vom Browser zwischen gespeichert werden können^[28].

• Multimediale Elemente müssen ein textliches Äquivalent besitzen

Benutzer, die auf einer Seite keine eingebetteten Bilder sehen, z.B. Sehbehinderte, die sich die Seite von einem Screenreader vorlesen lassen, können den Inhalt einer Webseite nur verstehen, wenn für diese Bilder ein Textäquivalent vorhanden ist, welches das Bild erklärt^[28].

• Dokumente müssen auch für blinde und taube Nutzer zugänglich sein

Ein Screenreader sollte genauso berücksichtigt werden wie die Darstellung in schwarz-weiß. Seite muss Hardware/Software unabhängig sein Es ist wichtig, dass jede Seite auch über Tastatur steuerbar und auf sehr kleinen Bildschirmen oder Bildschirmen mit geringer Auflösung erkennbar ist^[28].

HTML5-Webseiten mittels Screenreader vorlesen zu lassen stellt bis dato ein Problem dar. Screenreader erfassen zwingend die echte Struktur einer Seite, damit sie damit etwas sinnvolles anstellen können. Da jedoch HTML5 noch nicht W3C-Standard ist, kann man nicht kritisieren, dass die Screenreader HTML5 noch nicht implementiert haben. Jedoch implementiert HTML5 WAI-ARIA.

Barrierefreiheit mittels WAI-ARI
HTML5 wird der erste HTML-Standard sein, der Konzepte und Mittel für barrierefreies Webdesign fest integriert. Die WAI-ARIA-Spezifikationen beschreiben Möglichkeiten, mittels zusätzlichen HTML-Attributen, den Screenreadern mitzuteilen, wenn sie auf einen Bereich treffen, der logisch zusammen gehört. Dies kann ein Screenreader zuvor nicht wissen. Das Erstellen von Menüs, Buttons oder Schieberegler kann z.B. durch HTML, CSS und JavaScript in Kombination realisiert werden. Das Problem hierbei ist, dass Screenreader solche Konstruktionen selbst nicht erkennen.

Eine Fortschrittsanzeige lässt sich wie folgt darstellen:

  <div id="fortschritt">
      <div id="anzeige">50%</div>
      <div style="width:50%;" id ="abgespielt">/<div>
   </div>

Dieser Fortschrittsbalken kann mit Hilfe von wenig CSS, wie in Abbildung 5 dargestellt, so aussehen. Wer jedoch einen Screenreader nutzt, kann damit nicht viel anfangen, da man nicht wissen kann, dass die drei <div> zusammen ein wichtiges Konstrukt repräsentieren. Dies stellt in Zukunft jedoch kein Problem dank ARIA dar:

  <div id="fortschritt"
      role="progressbar"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="50">

      <div id="anzeige">50%</div>
      <div style="width:50%;" id="abgespielt"></div>
  </div>

Abbildung 8: Fortschrittsbalken^[29]

Durch das Attribut role wird die <DIV> als Fortschrittsanzeige erkennbar gemacht. Des Weiteren geben die aira-*-Attribute sowohl den Minimal- und Maximalwert als auch den aktuellen Wert an. HTML5 unterstützt die Attribute role und aria-*, so wie sie in der Spezifikation vorgesehen sind.

Die HTML5-Spezifikation sieht außerdem eine „Implizite ARIA-Semantik“ vor. Das bedeutet, dass bestimmten Elementen die aria-*-Attribute nicht manuell hinzugefügt werden müssen, da die HTML5-Spezifikation diese automatisch vorsieht. Die folgende Tabelle zeigt die Attribute, die solch eine implizite ARIA-Semantik besitzen:

7.2 Grundaufbau mit HTML5

Der Grundaufbau einer HTML5-Datei unterscheidet sich nur geringfügig von dem Aufbau einer HTML 4.01 Datei. Eine Vereinfachung stellt der neue Doctype dar:

  <!DOCTYPE html>

anstatt

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Da HTML5 so gut wie vollständig abwärtskompatibel ist, besteht eine hohe Wahrscheinlichkeit, dass eine in HTML 4.01 erstellte Webseite nach ersetzen des neuen Doctypes weiterhin funktioniert^[30].

Es gibt drei Möglichkeiten den Zeichensatz für ein HTML5-Dokument festzulegen. Über das setzen einer Unicode Byte Order, durch die Definition des content-types im HTTP-Header oder durch die alt bekannte Angabe des Zeichensatzes im <meta>-Tag. Letzteres sollte innerhalb der ersten 512 Bytes des Dokuments erfolgen^[30]. Für UTF-8 wäre die Angabe im Meta-Element folgende:

  <meta charset="utf-8">

anstatt des umgangreicheren

  <meta http-equiv="content-type" content="text/html; charset=utf-8">

Ein HTML5-Dokument könnte so aussehen:

  <!DOCTYPE html>
   <HEAD>
      <META CHARSET="UTF-8">
      <TITLE> HTML5 </TITLE>
   <HEAD>
   <H1> Ich bin ein HTML5-Dokument </H1>
   <p class=beispiel>
      Hallo!
   <P>
      Ich bin ein HTML5-Dokument!

Das o.g. Beispiel ist gültiges HTML5, obwohl End-Tags fehlen und sogar wie beim <body> das Start-Tag ausgelassen wurde. Der HTML-Validator des W3C kann bereits gut mit HTML5 umgehen und würde das Beispiel als konform validieren. Es fallen auch die fehlenden Anführungszeichen für Attribute und die wechselnde Groß- und Kleinschreibung auf. Aber all das ist bei HTML5 erlaubt. Somit erleichtert es dem Programmierer die Arbeit. Der Parser selbst überprüft beim Einlesen des Dokuments, ob Tags fehlen und fügt diese automatisch ein^[30].

Die nachfolgende Tabelle zeigt eine Auflistung der aus HTML 4.01 bekannten Elementen:

Somit sieht der grundlegende Aufbau eines HTML5-Dokuments wie folgt aus:

1. Byte Order Mark (optional)
2. Leerzeichen und Kommentare (optional)
3. Doctype
4. Leerzeichen und Kommentare (optional)
5. <html> mit dem Inhalt des Dokuments
6. Leerzeichen und Kommentare (optional)^[30]

Wenn die Übermittlung des Zeichensatzes per HTTP-Header oder BOM erfolgt, lautet das kleinstmögliche gültige HTML-Dokument:

  <!DOCTYPE html>

Der HTML-Parsers des Browsers erstellt daraus das folgende DOM:

  <html>
     <head />
     <body />
  </html>

7.2.1 Frame

Ganz zu Anfang wurde das Layout mithilfe von Frames realisiert. Mittels eines <frameset> ist es möglich, mehrere einzelne Seiten als Ganzes darzustellen. Jedoch wurde im Laufe der Zeit immer mehr Kritik an Frames geübt. Die komplette Webseite kann nicht gedruckt werden, da immer nur die aktuelle Seite gedruckt werden kann. Auch das Hinzufügen der Webseite zu den Lesezeichen des Webbrowsers ist nicht möglich, da nur der Verweis der aktuellen Seite gespeichert wird. Außerdem sind Webseiten die mit Hilfe des <frameset> erstellt worden sind nur schwierig durch eine Suchmaschine indizierbar, da diese nur den Inhalt einzelner Seiten durchsuchen kann und nicht das Gerüst drum herum. Aufgrund dieser vielen Nachteile hat sich im Laufe der Zeit das Erstellen eines Layouts mit Frames als nicht brauchbar erwiesen.

In HTML5 wurden Frames ersatzlos gestrichen. Nur das IFrame ist weiterhin Bestandteil.

7.2.2 Tabelle

Die Tabelle ist zum Präsentieren von Daten in Tabellenform geeignet. Also für Daten, die in einer Beziehung zueinander stehen. Zu Anfang, als noch wenig Möglichkeiten bestanden mittels CSS ein vernünftiges Layout zu realisieren, „zweckentfremdete“ man <table> zu diesem Zweck. Das erste Layout ist mithilfe einer Tabelle schnell realisiert. Jedoch hat dies viele Nachteile. Zum einen ist ein einmal erstelltes Layout schwierig zu ändern. Der Quellcode wird unübersichtlich und der Screenreader versucht den Inhalt einer Tabelle in seiner Struktur vorzulesen. Der Screenreader kann nicht wissen, dass durch die Tabelle zur Struktur der Webseite genutzt wurde. Somit lässt sich festhalten, dass die Elemente einer Spezifikation für ihren Zweck verwendet werden sollten. Ein vernünftiges Layout lässt sich mit Hilfe von Containern-Elementen und CSS weitaus flexibler und strukturierter realisieren.

7.2.3 Div

Auch in HTML5 sind <div>-Elemente die einzig wahren Elemente, mit denen sich das Layout einer Webseite realisieren lässt. Mittels <div>-Elementen und CSS ist man in der Lage, dass gewünschte Layout für eine Webseite zu implementieren. Da sich jedoch in Bezug auf HTML5 nichts geändert hat, sei auf die Webseiten verwiesen, die sich mit dem Layout von Webseiten mittels <div>- und weiteren Elementen mit Hilfe von CSS auseinander setzen. Nachfolgend ein einfaches Beispiel, welches das Layout mittels <div> und CSS verdeutlichen soll:

  body {
     padding: 0px;
     margin: 0px;
     background-color: #0080c0;
  }
  #inhalt {
     width: auto;
     margin: 20px 170px;
     background-color: #ffffc6;
 }
 #links {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 130px;
    height: 300px;
    background-color: #ffcc00;
 }
 #rechts {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 130px;
    height: 300px;
    background-color: #ffcc00;
 } 
  <div id="inhalt">Mitte</div>
   <div id="links">Links</div>
  <div id="rechts">Rechts</div>

Abbildung 9: klassisches 3-Spalten-Design^[31]

7.2.4 Semantische Gliederung

Zu Anfang trug HTML5 den Namen "Webappplications 1.0", denn Webanwendungen statt Webseiten sind der Fokus vieler Neuentwicklungen. Aus diesem Grund findet sich der Großteil der Änderungen im JavaScript-API-Bereich wieder. Nichtsdestotrotz steht im Bereich HTML, mit dem man reine Webseiten erstellt, eine Reihe von Änderungen und Neuerungen bereit. HTML5 stellt nicht nur neue Elemente bereit, sondern erweckt alte Präsentationselemente, die durch die Strict-Varianten von HTML4 verboten waren, wieder zum Leben. Somit besitzt HTML5 bessere Ausdrucksmöglichkeiten für semantisches HTML^[32].

Struktur innerhalb Dokumente
Ein mehrspaltiges Layout war früher die Ausnahme, heute stellt es die Regel dar. Die Struktur von Webseiten wird immer komplexer, in den Fußzeilen (engl. "Footer") finden sich viele Inhalte wieder und der Inhalt besteht aus mehr als nur Überschriften und Absätzen. Um diese Struktur zu realisieren, wird eine Menge von <div>-Elementen benötigt, die als semantisch leere Hülle zwar ein Design ermöglichen, die verschiedenen Bereiche einer Webseite jedoch nicht sinnvoll voneinander abgrenzen. HTML5 schafft die Möglichkeit, wirklich semantisches HTML zu realisieren, in dem es Elemente zur Verfügung stellt, die eine Webseite semantisch strukturieren lassen. Wenn Webseiten zu komplex werden, reichen die Elemente für Überschriften <h1> bis <h6> nicht mehr aus. Das Logo benötigt <h1>, die Ressort-Überschrift <h2>, <h3> und <h4> werden für den Artikel und dessen Unterüberschrift selbst benötigt und <h5> und <h6> bleiben für den Kommentarabschnitt und die Kommentare selbst übrig. Diese Probleme werden durch die neuen strukturierenden Elemente in HTML5 gelöst. Nur mit <h1> und den neuen Elementen ist man in der Lage, unendlich tief verschachtelte Dokumente zu schreiben^[32].

Neue strukturierende Elemente

• <section>
  Das einfachste neue Element um ein Dokument zu strukturieren ist <section>, welches ein Dokument in Sinnabschnitte unterteilt. Dieses Dokument ist wirklich nur für die inhaltliche Gliederung gedacht, z.B. für die Unterteilung in Kapitel. Benötigt man Elemente zum Design, ist das alt bewährte <div> die richtige Wahl.

  <section>
      <h1>Kapitel 1</h1>
      <p> Hier steht Text von Kapitel 1 </p>
   </section>
   <section>
      <h1>Kapitel 2</h1>
      <p>Hier steht Text von Kapitel 2</p>
   </section>
   <section>
      <h1>Kapitel 3></h1>
      <p1>Hier steht Text von Kapitel 3</p>
  </section>

Meistens enthält ein <section>-Element mindestens eine Überschrift oder ein <hgroup>-Element. Möglicherweise auch <header>-und <footer>-Elemente^[32].

• <header> und <footer>
  

Ein <header> repräsentiert den Kopf-Bereich, also einführende Inhalte, einer Webseite. Dies können z.B. Überschriften und Navigationen sein. Dabei kann das <header>-Element nicht nur als Kopfbereich der gesamten Seite, sondern auch als Kopfbereich anderer Elemente angesehen werden. Das <footer>-Element stellt das Pendant für den Fußbereich von Webseiten, Dokumenten oder Abschnitten dar^[32].

  <section>
      <header>
         <h1>Die Überschrift</h1>
      </header>
      <p>
         Inhalt und noch mehr Inhalt
      </p>
      <footer>
         <p> Dies ist z.B. ein rechtlicher Hinweis </p>
      </footer>
   </section>

• <nav>
  

Das <nav>-Element wurde zur Auszeichnung von Navigationselementen eingeführt. Es beinhaltet also Verweise auf andere Unterseiten innerhalb der Webseite.

  <header>
      <h1> Beispiel einer Navigation </h1>
      <p>
         <a href="sitemap.html">Sitemap</a>
         <a href="impressum.html">Impressum</a>
      </p>
      <nav>
         <ul>
            <li><a href="home.html">Startseite</a></li>
            <li><a href="ueber.html">Über uns</a></li>
            <li><a href="home.html">Produkte</a></li>
            <li><a href="home.html">Kontakt</a></li>
         </ul>
      <nav>
   </header>

Bei diesem Beispiel fällt auf, dass die zwei Links innerhalb des ersten <p>-Elements nicht innerhalb <nav> stehen. Dies liegt daran, dass das <nav>-Element nur für die Hauptnavigation gedacht ist. Es ist zwar erlaubt mehrere <nav>-Elemente innerhalb einer Webseite zu besitzen, jedoch sollte damit maßvoll umgegangen werden^[32].

• <aside>

Inhalte, die eine Ergänzung zum umgebenden Element darstellen, stehen innerhalb des <aside>-Elements. Der Inhalt vom <aside>-Element sollte eine Beziehung zum umliegenden Inhalt besitzen^[33].

  <p> Meine Familie und ich waren diesen Sommer im Movie Park. </p>
   <aside>
      <h4>Movie Park</h4>
      Movie Park ist der größte Film- und Entertainmentpark in Deutschland
  </aside>

• <article>

Abgeschlossene Inhalte werden mittels <article> ausgezeichnet. Es ist geeignet für Forenartikel, Blogeinträge, Nutzerkommentare und Newsmeldungen^[34].

  <article>
      <h1>Mein erster Blogeintrag </h1>
      <p> Heute ist wieder was tolles passiert ... </p>
  </article>

7.2.5 Formulare

Das heutige Web fordert immer komplexere Dateneingaben. Anstatt überschaubarerer Kontaktformulare, werden heute Eingaben wie Farben, Datumseingaben oder Zahlenbereich benötigt. Zusätzlich wünscht der User, dass seine Eingaben auf Richtigkeit vor Absenden überprüft werden. Um dies zu bewerkstelligen war ein Entwickler gezwungen, uneinheitliche und komplizierte JavaScript-Konstruktionen einzusetzen. Aus diesem Grund stellt HTML5 viele neue Input-Typen und viele neue Funktionen für alle Formular-Elemente bereit. Nachfolgend werden die wichtigsten Neuerungen gezeigt.

Neue Input-Typen

• search

Stellt eine Ergänzung von <input type=“text“> dar. Es ist lediglich für Plattformen gedacht, wo Suchformulare ein spezielles Aussehen besitzen. Dementsprechend werden alle Style-Angaben bei diesem Typ ignoriert^[35].

  <input type="search">

• telefone, url und email

Diese Typen sind für die Eingabe von Telefonnummern, URLs und E-Mail-Adressen gedacht. Wird die Formular-Validierungs-API benutzt, werden bei URLS und E-Maildressen der Inhalt auf Richtigkeit überprüft. Außerdem werden bei Smartphones die zur Verfügung gestellte Tastatur entsprechend dem Typ angepasst.

  <input type="telephone"> 
  <input type="url">
  <input type="email">

• number

Der Typ number stellt ein Feld für die Eingabe von Zahlen bereit. Die Zahl kann per Tastatur eingegeben oder man nutzt die vorhandenen Kontrollelemente. Die Attribute min, max und step geben dabei den Minimalwert, Maximalwert und die Schrittweite an^[35].

  <input type="number" min="0" max="3" step="1">

Abbildung 10: Beispiel Input-Typ number^[36]

• Datums- und Zeitangaben

Zur Eingabe von Datums- und Zeitangeben stehen mehrere Typen zur Verfügung. Es existieren die Typen date für die Auswahl des Datums, time für die Auswahl der Uhrzeit und Datetime als Kombination aus beiden. Des Weiteren existieren die Typen month und week, die für die Auswahl des Monats und einer Kalenderwoche vorhanden sind. Interessant dabei ist, dass Formularwidgets in Form von Datumspickern und Zeitauswahlfeldern, zur Verfügung stehen^[35].

• range

Der Typ range wird in den meisten Browsern als Schieberegler dargestellt, der für die Auswahl einer Zahl innerhalb von Grenzwerten ermöglicht. Der Grenzwert werden durch die Attribute min und max festgelegt^[35].

  <input type="range" min="0" max="0" step"1">

Abbildung 11: Beispiel Input-Typ range^[37]

Integrierte Formularvalidierung
Mittels HTML5 lassen sich Formulareingaben direkt im Browser validieren. Die Input-Typen email und url lassen z.B. nur formale korrekte E-Mail-Adressen und URLs zu, Eingabefelder können als Pflichtfelder deklariert werden und es ist sogar möglich, für jedes Feld einen regulären Ausdruck zu definieren. Dabei lassen sich Elemente einzeln oder ganze Formulare und Fieldsets validieren. All dies geschieht über die eingebaute Validierungs-API. Dazu ist nur eine einzige Zeile JavaScript nötig.

Die folgenden Elemente sind von einer Prüfung ausgeschlossen:

• hidden
• submit
• image
• reset
• object

Alle anderen Elemente können auf folgendes geprüft werden:

• Pflichtfelder
• Eingebaute Syntaxregel wie bei email und url
• Einhaltung der Feldattribute, z.B. min und max
• Beliebige Syntaxregeln von regulären Ausdrücken

7.3 Praxisbeispiel

Die nun erworbenen Kenntnisse sollen nun in einem Praxisbeispiel eingesetzt werden. Als Praxisbeispiel dient ein Blog, da sich dort die vielen neuen semantischen Elemente gut einsetzen lassen. Außerdem benötigt ein Blog ein Formular, bei dem neue Funktionalitäten gut gezeigt werden können.
Grundstruktur
Abbildung 12 zeigt die Grundstruktur des zu erstellenden Blogs.

Abbildung 12: Grundstruktur Praxisbeispiel^[38]

Grundstruktur als Quelltext:

  <!doctype html>
   <html>
     <head>
       <title>Praxisbeispiel Blog</title>
     </head>
     <body>
       <header></header>
       <nav></nav>
       <section>
         <article class="blogPost"></article>
       </section>
       <section id="comments">
         <article></article>
         <article></article>
       </section>
       <form></form>
       <aside>
         <section></section>
         <section></section>
       </aside>
       <footer></footer>
     </body>
  </html>

Navigation
Die Navigation wird in Form einer Liste genau wie in HTML 4 oder XHTML erstellt. Der einzige unterschied ist, dass die Liste innerhalb eines <nav>-Elements platziert wird.

  <nav>
     <ul>
       <li class="selected"><a href="#">Startseite</a></li>
       <li><a href="#">Über</a></li>
       <li><a href="#">Archive</a></li>
       <li><a href="#">Kontakt</a></li>
       <li class="subscribe"><a href="#">Abonnieren</a></li>
     </ul>
  </nav>

Hauptteil
Im Hauptinhalt werden Blogeintrag, Kommentare und das Formular zum Abschicken eines Kommentars zusammengefasst. Dabei besteht jeder Bereich aus einer <section>.

• Blogeintrag

Die <section> Blogeintrag besteht aus <article>, <header>, und <p>. Das <article>-Element repräsentiert einen unabhängigen Blogeintrag. Genau für solch einen Zweck wurde das <article>-Element geschaffen. Innerhalb des <article>-Elements befindet sich ein <header>-Element, welches die Überschrift des Blogeintrags repräsentiert. Außerhalb des <header>-Elements wird der wirkliche Eintrag innerhalb eines <p>-Elements dargestellt.

  <section>
     <article class="blogPost">
       <header>
         <h2>Ein Blogeintrag</h2>
       </header>
       <p>Inhalt des Eintrags</p>
     </article>
  </section>

• Kommentare

Die Kommentare werden ähnlich wie der Blogeintrag aufgebaut, ohne großen Änderungen oder Neuerungen. Ein Unterschied ist, dass unter <section> mehrere <article>-Elemente vorhanden sind, die die verschiedenen Kommentare repräsentieren.

  <section id="comments">
     <h3>Kommentare</h3>
     <article>
       <header>
         <a href="#">Meier</a> am <time datetime="2011-02-02T13:00+02:00">02. Februar 2011</time> 
       </header>
       <p>Inhalt von Kommentar 1</p>
     </article>
     <article>
       <header>
         <a href="#">Schulz</a> am <time datetime="2011-02-03T14:00+02:00">03. Februar 2011</time>
       </header>
       <p>Inhalt von Kommentar 2</p>
     </article>
  </section>

• Kommentarformular

Für das Kommentarformular werden die neuen Input-Typen email und url verwendet. Außerdem werden die Pflichtfelder für die neue Validierung in HTML5 mittels required markiert.

  <form action="#" method="post">
     <h3>Kommentar schreiben</h3>
     <p>
       <label for="name">Name</label>
       <input name="name" class="inputs" type="text" required />
     </p>
     <p>
       <label for="email">E-mail</label>
       <input name="email" id="email" class="inputs" type="email" required />
     </p>
     <p>
       <label for="website">Website</label>
       <input name="website" id="website" class="inputs" type="url" />
     </p>
     <p>
       <label for="comment">Comment</label>
       <textarea name="comment" id="comment" class="inputs" required></textarea>
     </p>
     <p>
       <input type="submit" id="button" value="Kommentar eintragen" />
     </p>
  </form>

Fußzeile und Sidebar
Der <footer> und die Sidebar <aside> enthalten nichts neues und sind simpel Aufgebaut. Es entspricht den vorhergegangen Teilen.

  <aside>
     <section>
       <header>
         <h3>Kategorien</h3>
       </header>
       <ul>
         <li><a href="#">Lorem ipsum dolor</a></li>
         <li><a href="#">Sit amet consectetur</a></li>
         <li><a href="#">Adipisicing elit sed</a></li>
         <li><a href="#">Do eiusmod tempor</a></li>
         <li><a href="#">Incididunt ut labore</a></li>
       </ul>
     </section>
     <section>
       <header>
         <h3>Archive</h3>
       </header>
       <ul>
         <li><a href="#">Dezember 2010</a></li>
         <li><a href="#">November 2010</a></li>
         <li><a href="#">Oktober 2010</a></li>
       </ul>
     </section>
   </aside>
	
   <footer>
     <section id="footer">
       <p>Inhalt der Fußzeile</p>
     </section>
   </footer>

Ergebnis
Das Ergebnis ohne CSS ist nicht berauschend, wie man in Abbildung 13 sehen kann. Angereichert mit CSS jedoch, ist es ein Blog, wie man ihn gewöhnlich kennt, siehe Abbildung 14. Der Quelltext der Webseite (blog.html) und des CSS-Codes (blog.css) ist im Anhang zu finden.

Abbildung 13: Blog ohne CSS^[39]

Abbildung 14: Blog mit CSS^[40]

8 Fazit

Die durch die W3C und die WHATWG vorangetriebene Entwicklung von HTML5 und CSS3 bietet bereits jetzt dem WWW unglaubliche Möglichkeiten. Den größten Schritt bieten wohl die Elemente rund um die Funktionen des Multimedia. Damit können Inhalte dargestellt werden, die bisher nur durch Plugins integriert werden konnten. Gerade das neue canvas Element, welches komplett neu in HTML5 auftaucht zeigt völlig neue und auf ungeahnte Weise, einen neuen Weg Webseiten zu designen. Hier ist als herausragendes Beispiel, das Computerspiel Quake zu nennen, welches ohne zusätzliche Software in einem HTML5 fähigen Browser gespielt werden kann. Weitere Inhalte wie Audio und Video Formate direkt in ein HTML Dokument einzubetten, wurde wohl von vielen Webseiten-Programmierer lange erwartet. Neue Wege können auch mit den Drag&Drop und Geolocation Features beschritten werden. Die bisher genannten Entwicklungen sind sehr offensichtlich und fallen den Benutzer direkt ins Auge, es sind aber auch Elemente entstanden, die eine semantische Strukturierung innerhalb des Codes schaffen. Dies bietet nicht nur den Entwicklern enorme Vorteile Webseiten dynamisch anzupassen, sondern auch für Suchmaschinen und Menschen mit einer Behinderung. Ein weiterer Fortschritt ist auch in der Gestaltung und Prüfung von Formularen gelungen. Endlich ist es ein leichtes Eingaben der Benutzer direkt nach vorgegebenen Pattern-Attribute auf Richtigkeit zu prüfen. Auch das Entwerfen und Gestalten dieser ist mit HTML Kenntnissen vereinfacht worden.

Dem allen steht gegenüber, dass die eingesetzten Features erstmal von den Browser unterstützt werden müssen. Die durchgeführten Test zeigten je nach Browser unterschiedliche Ergebnisse. Auszeichnen konnte sich vor allem der Chrome Browser, einen Großteil dieses guten Ergebnis kann auf die Häufigkeit von neuen Releases zurückgeführt werden. Alleine 12 Versionen (incl. Beta und Developer) dieses Jahr^[41]. Der IE bildete das Schlusslicht in den durchgeführten Test, es ist doch zu beachten, dass ein Ausblick auf die neue IE Version 9 eine enorme Verbesserung gegenüber der aktuellen Version zeigt. Der Willen Microsoft den Internet Explorer auf HTML5 und CSS3 auszurichten, zeigt der eigene vorgestellte Test auf http://samples.msdn.microsoft.com/ietestcenter/. Bei diesem schneidet der IE9 außergewöhnlich gut ab, aber wie sagt man: "Trau keiner Statistik, die du nicht selber gefälscht hast." Der Test kann nicht als wirklich Objektiv betrachtet werden, da eine Selektion der Features stattgefunden hat^[42].

Wird der Fortschritt weiter getrieben und können sich die W3C und die Browser Hersteller mit der WHATWG weiterhin auf einen Weg einigen, werden die neuen Techniken mit HTML5 und CSS3 das Internet revolutionieren.

9 Fußnoten

1. ↑ Vgl. Bachan
2. ↑ Vgl. Optinet24.de
3. ↑ Vgl. Bloß
4. ↑ Quelle: Appleinsider
5. ↑ Vgl. W3C Standards
6. ↑ ^{6,0 6,1} Vgl. SELFHTML
7. ↑ Vgl. SELFHTML
8. ↑ Vgl. WHATWG
9. ↑ Quelle: Academic
10. ↑ Vgl. SELFHTML
11. ↑ Vgl. SELFHTML
12. ↑ Vgl. W3C DOM
13. ↑ Vgl. Szestakow
14. ↑ ^{14,0 14,1 14,2 14,3 14,4 14,5 14,6 14,7 14,8} Vgl. CSS3.info
15. ↑ W3C HTML5 Logo
16. ↑ Berners-Lee
17. ↑ Vgl. html-lernen
18. ↑ Vgl. HEISE
19. ↑ ^{19,0 19,1 19,2 19,3 19,4 19,5} Vgl. CSS3-HTML5
20. ↑ HTML5-CSS3-Logo
21. ↑ Vgl. W3C Selectors
22. ↑ Developer-Mozilla @font-face
23. ↑ Vgl. Developer-Mozilla WOFF
24. ↑ Quelle: findmebyip
25. ↑ Vgl.Beck (2006)
26. ↑ W3C Validator
27. ↑ Vgl. Chisholm / Vanderheiden / Jacobs (1999)
28. ↑ ^{28,0 28,1 28,2 28,3} Vgl. WCAG, Abschnitt: Transform gracefully
29. ↑ Quelle: Fortschrittsbalken
30. ↑ ^{30,0 30,1 30,2 30,3} Vgl. Kröner (2010), S. 42ff
31. ↑ Quelle: CSS Layout
32. ↑ ^{32,0 32,1 32,2 32,3 32,4} Vgl. Kröner (2010), S. 71ff
33. ↑ Vgl. W3Schools Aside
34. ↑ Vgl. W3Schools Article
35. ↑ ^{35,0 35,1 35,2 35,3} Vgl. W3Schools W3C HTML5 Draft, 4.10.7.1 States of the type attribute
36. ↑ Quelle: Eigene Darstellung
37. ↑ Quelle: Eigene Darstellung
38. ↑ Quelle: Eigene Darstellung
39. ↑ Quelle: Eigene Darstellung
40. ↑ Quelle: Eigene Darstellung
41. ↑ Vgl. OLDAPPS
42. ↑ Vgl. derstandard.at

10 Literatur- und Quellenverzeichnis

11 Anhang

11.1 Blog.html vom Praxisbeispiel

  <!doctype html>
   <html>
     <head>
       <title>Praxisbeispiel Blog</title>
       <link rel="stylesheet" href="blog.css" type="text/css" media="screen" />
     </head>
     <body>
       <header>
         <h1>Praxisbeispiel Blog</h1>
       </header>
       <nav>
         <ul>
           <li class="selected"><a href="#">Startseite</a></li>
           <li><a href="#">Über</a></li>
           <li><a href="#">Archive</a></li>
           <li><a href="#">Kontakt</a></li>
           <li class="subscribe"><a href="#">Abonnieren</a></li>
         </ul>
       </nav>
       <div id="content">
         <div id="mainContent">
           <section>
             <article class="blogPost">
               <header>
                 <h2>Ein Blogeintrag</h2>
               </header>
               <div>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec  rutrum lacus blandit.Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio. Curabitur in odio augue. Morbi congue auctor interdum. Phasellus sit amet metus justo. Phasellus vitae tellus orci, at elementum ipsum. In in quam eget diam adipiscing condimentum. Maecenas gravida diam vitae nisi convallis vulputate quis sit amet nibh. Nullam ut velit tortor. Curabitur ut elit id nisl volutpat cons    ectetur ac ac lorem. Quisque non elit et elit lacinia lobortis nec a velit. Sed ac nisl sed enim consequat porttitor.
                 </p>
               </div>
             </article>
           </section>
           <section id="comments">
             <h3>Kommentare</h3>
             <article>
               <header>
                 <a href="#">Meier</a> am <time datetime="2011-02-02T13:00+02:00">02. Februar 2011   </time> 
               </header>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.
               </p>
             </article>
             <article>
               <header>
                 <a href="#">Schulz</a> am <time datetime="2011-02-03T14:00+02:00">03. Februar     2011</time>
               </header>
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor inci        didunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.
               </p>
             </article>
           </section>
           <form action="#" method="post">
             <h3>Kommentar schreiben</h3>
             <p>
               <label for="name">Name</label>
               <input name="name" id="name" class="inputs" type="text" required />
             </p>
             <p>
               <label for="email">E-mail</label>
               <input name="email" id="email" class="inputs" type="email" required />
             </p>
             <p>
               <label for="website">Website</label>
               <input name="website" id="website" class="inputs" type="url" />
             </p>
             <p>
               <label for="comment">Comment</label>
               <textarea name="comment" id="comment" class="inputs" required></textarea>
             </p>
             <p><input type="submit" id="button" value="Kommentar eintragen" /></p>
           </form>
         </div> 
         <aside>
           <section>
             <header>
               <h3>Kategorien</h3>
             </header>
             <ul>
               <li><a href="#">Lorem ipsum dolor</a></li>
               <li><a href="#">Sit amet consectetur</a></li>
               <li><a href="#">Adipisicing elit sed</a></li>
               <li><a href="#">Do eiusmod tempor</a></li>
               <li><a href="#">Incididunt ut labore</a></li>
             </ul>
           </section>
           <section>
             <header>
               <h3>Archive</h3>
             </header>
             <ul>
               <li><a href="#">Dezember 2010</a></li>
               <li><a href="#">November 2010</a></li>
                <li><a href="#">Oktober 2010</a></li>
             </ul>
           </section>
         </aside>
       </div>
       <footer>
         <div>
           <section id="footer">
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut     labore et dolore magna aliqua. Ut enim ad minim veniam, quis. 
             </p>
           </section>
         </div>
       </footer>
     </body>
   </html>

11.2 Blog.css vom Praxisbeispiel

   * {
   	margin: 0;
   	padding: 0;
   }
   header, footer, section, aside, nav, article {
   	display: block;
   }
   body {
   	margin: 0 auto;
   	padding: 22px 0;
   	width: 940px;
   	font: 13px/22px Helvetica, Arial, sans-serif;
   	background: #F0F0F0;
   }
   h1 {
   	font-size: 28px;
   	line-height: 10px;
   	padding: 11px 0;
   }
   h2 {
   	font-size: 28Px;
   	line-height: 44px;
   	padding: 22px 0;
   }
   h3 {
   	font-size: 18px;
   	line-height: 22px;
   	padding: 11px 0;
   }
   p {
   	padding-bottom: 22px;
   }
   nav {
   	position: absolute;
   	left: 0;
   	width: 100%;
   	background: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5));
       }
   nav ul {
   	margin: 0 auto;
   	width: 940px;
   	list-style: none;
   }
   nav ul li {
   	float: left;
   }
   nav ul li a {
   	display: block;
   	margin-right: 20px;
   	width: 140px;
   	font-size: 14px;
   	line-height: 44px;
   	text-align: center;
   	text-decoration: none;
   	color: #111111;
   }
   nav ul li a:hover {
   	color: #fff;
   }
   nav ul li.selected a {
   	color: #fff;
   }
   nav ul li.subscribe a {
   	margin-left: 22px;
   	padding-left: 33px;
   	text-align: left;
   }
   #content {
   	display: table;
   }
   #mainContent {
   	display: table-cell;
   	width: 620px;
   	padding-right: 22px;
   	padding-top: 44px;
   }
   aside {
   	display: table-cell;
   	width: 300px;
   }
   .blogPost header p, .blogPost header p a {
   	font-size: 14px;
   	font-style: italic;
   	color: #777;
   }
   .blogPost header p a:hover {
   	text-decoration: none;
   	color: #000;
   }
   #comments {
   	border-top: 1px solid #d7d7d7;
   }
   #comments article {
   	display: table;
   	padding: 11px;
   }
   #comments article:nth-child(odd) {
   	padding: 11px;
   	background: #E3E3E3;
   	border: 1px solid #d7d7d7;
   }
   #comments article header {
   	display: table-cell;
   	width: 220px;
   	padding-right: 22px;
   }
   #comments article header a {
   	display: block;
   	font-weight: bold;
   	color: #000;
   }
   #comments article header a:hover {
   	text-decoration: none;
   }
   #comments article p {
   	padding: 0;
   }
   form {
   	margin-top: 18px;
   	border-top: 1px solid #d7d7d7;
   }
   form p {
   	display: table;
   	margin-bottom: 11px;
   	padding: 0 22px;
   }
   form label {
   	display: table-cell;
   	width: 140px;
   	padding-right: 20px;
   	text-align: right;
   	font-weight: bold;
   	vertical-align: top;
   }
   .inputs {
   	display: table-cell;
   	width: 300px;
   	height: 20px;
   	border: 1px solid #d7d7d7;
   }
   form textarea {
   	width: 300px;
   	height: 100px;
   	border: 1px solid #d7d7d7;
   }
   #button {
     -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
   	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
   	border-bottom: 1px solid rgba(0,0,0,0.25);
   	background-color: #999999;
   	margin-left: 162px;
   }
   aside section {
   	margin: 22pX 0 0 22px;
   	padding: 11px 22px;
   	background: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.5));
   	-moz-border-radius: 11px;
   
   }
   aside section ul {
   	margin: 0 0 0 22px;
   	list-style: none;
   }
   aside section ul li a {
   	display: block;
   	text-decoration: none;
   	color: #000;
   }
   aside section ul li a:hover {
   	text-decoration: underline;
   }
   footer {
   	position: absolute;
   	left: 0;
   	bottom: 0;
   	width: 100%;
   	background: #222;
   }
   footer div { display: table; margin: 0 auto; padding-top: 11px; width: 940px; color: #777; }
   footer div section {
   	display: table-cell;
   	width: 300px;