Abschlussprüfung Mediengestalter Winter 2014/2015, Medienproduktion, Alle Fachrichtungen: U5: HTML5

Im folgenden findet ihr eine Zusammenfassung aller relevanten Informationen für die Abschlussprüfung der Mediengestalter Winter 2014/2015 im Fach Medienproduktion für alle Fachrichtungen zum Thema HTML5.

Ich werde dabei auch versuchen, mögliche Prüfungsfragen einzugrenzen.

HTML5 ist die fünfte Fassung der Hypertext Markup Language (engl. für Hypertext-Auszeichnungssprache), einer Computersprache zur Auszeichnung und Vernetzung von Texten und anderen Inhalten elektronischer Dokumente, vorwiegend im World Wide Web. Sie soll als Nachfolger von HTML 4 die Kernsprache („core language“) des Internets werden. Die Sprache ersetzt die Beschreibungsstandards HTML 4.01, XHTML 1.0 und DOM HTML Level 2. Sie bietet neue Funktionen wie unter anderem Video, Audio, lokalen Speicher und dynamische 2D- und 3D-Grafiken, die von HTML 4 nicht direkt unterstützt werden und sich ohne HTML5 nur mit zusätzlichen Plugins (wie zum Beispiel Adobe Flash) umsetzen lassen.

[Quelle: Wikipedia, Stand Oktober 2014]

Die Entwicklung von HTML5

XHTML (HTML mit den Regeln von XML) galt vor HTML5 seit Januar 2000 als Empfehlung des W3C (World Wide Web Consortium). Seit nunmehr 14 Jahren gibt es also keine Weiterentwicklung des offiziellen Webstandards zur Formulierung von Webdokumenten. Doch mit der Einführung neuer Geräte (Smartphones, Tablets, Smart TVs etc.) sowie der Anforderung der (besseren) Maschinenlesbarkeit verschiedener Geräte und Programme und zahlreichen damit einhergehenden neuen Anforderungen besteht ein dringender Bedarf an einer Erweiterung dieser Sprache.

Während das W3C an einer XML-konformen Weiterentwicklung ( XHTML1.1 / XHTML 2.0 ) weiterarbeitete, der nicht mehr viel mit HTML zu tun hat und schwieriger zu erlernen ist, stellte sich die WHATWG (Web Hypertext Application Technology Working Group) als Vertretung verschiedener Browserhersteller auf, um seit 2004 an einer Erweiterung des HTML-Standards zu arbeiten. Erst seit 2009 ziehen beide Gruppen (fast) an einem Strang, um eine neue Version von HTML unter dem Namen HTML5 zu veröffentlichen.

Dennoch gibt es einen kleinen, aber feinen Unterschied in den Bestrebungen beider Gruppen. Während der W3C versucht, den Standard als HTML5 zu einem offiziellen Releasetermin „in 2014“ zu veröffentlichen (sehr unwahrscheinlich), bezeichnet die WHATWG HTML5 als „Living Standard“ der modular angelegt ist und deshalb auch modulbasiert erweitert und aktualisiert werden kann. Die WHATWG spricht deshalb lediglich von HTML und schließt somit HTML6 aus. Dies kann man auch an der stark verkürzten Deklaration des Doctype für HTML5 im Vergleich zu den Vorgängerversionen wie XHTML und HTML 4.01 gut sehen.

Fazit zur Entwicklung und Verwendung von HTML5

Das W3C ist ein Konsortium für die Standardisierung von (u.a.) Websprachen, veröffentlicht aber keine Browser. Seit Oktober 2014 gilt aber auch dort HTML5 als Empfehlung.

Andererseits sind viele Mitglieder der WHATWG gleichzeitig Browserhersteller und haben somit bereits weite Teile der HTML(5) Spezifikation in ihre Browser integriert. HTML5 kann somit mit Stand Herbst 2014 durchaus als „offizieller Standard“ bezeichnet und in produktiven Umgebungen verwendet werden. Einige Teile werden aber zukünftig erweitert bzw. erst zukünftig in die Browser integriert.

Eine regelmäßig aktuelle Übersicht über alle tatsächlich verwendbaren neuen Tags und deren Unterstützung in den verschiedenen Browsern liefert zum Beispiel die Website „CanIUse.com„. Im Falle der CSS3-Implementierung muss dabei allerdings häufig mit (lästigen) „Vendor Prefixes“ gearbeitet werden.

Die Ansprüche, Module und API´s von HTML5

HTML(5) ist nach Vorgaben der WHATWG modular angelegt und in einzelne API´s (auf die mittels Javascript bzw. Geräten zugegriffen werden kann) aufgeteilt. Anbei seien die wichtigsten (ohne Anspruch auf Vollständigkeit) genannt.

Ansprüche und Vorteile von HTML5

  1. Kompatibilität / Fallbackfähigkeit von HTML5
    Gemeint ist, dass HTML5 auch von alten Browsern unterstützt werden soll (auch wenn sie mit den neuen Tags selbst nichts anfangen können) oder es eine Möglichkeit geben soll, dass die Inhalte auch von ihnen korrekt dargestellt werden können.
  2. Verwendbarkeit
    Neue Elemente sollen „echte“ Probleme lösen, bestehende Funktionen und Elemente sollen nicht ersetzt oder fallen gelassen werden.
  3. Sicherheit
    In Zukunft ist mehr auf die Sicherheit neuer Funktionen zu achten.
    (Beispiel: Bei der Geolocation-Api und dem Zugriff auf Webcam und Mikrophon erfolgt zunächst eine Sichrheitsabfrage)
  4. Konsistenz
    Auch HTML 4.01-Elemente können weiterhin Verwendung finden, selbst wenn sie bislang herstellerabhängig waren (Fallback-Fähigkeit).
    Außerdem ist es möglich, HTML5 auch in gültiger XML-Syntax zu schreiben, um die Informationen zum Beispiel auch druckbar (z.b. via Adobe InDesign) bzw. Crossmedia-kompatibel machen zu können. Man sprich bei letzterem von „Polyglottem Markup„.
  5. Vereinfachung
  6. Universalität
    HTML5 soll gleichermaßen auf Desktops wie auf mobilen Endgeräten als auch bislang noch unbekannten Geräten in der Zukunft unterstützt werden. Dabei sollen möglichst auch Erleichterungen in der Nutzung der Website auf den jeweiligen Endgeräten geboten werden. (Siehe Punkt 2: Verwendbarkeit)
  7. Barrierefreiheit
    Inhalt und Funktionen sollen komplett barrierefrei nutzbar sein – auch Maschinen wie z.B. Screenreader und Braille-Schrift-Geräte aber auch Suchmaschinen sollen den Inhalt voll umfänglich, einfach und sinnvoll erschließen können. Das ist zwar im Prinzip nichts neues, aber mit HTML5 werden neue Elemente eingeführt, die die „Accessibility“ weiterhin verbessern sollen.

Mögliche Fragen zum Thema

Nennen Sie (x) Vorteile von HTML5 gegenüber vorangegangenen HTML-Versionen

Mögliche Antworten:

  1. Verbesserte Semantik, dadurch bessere Maschinenlesbarkeit und Barrierefreiheit
  2. Vollständige Fallbackfähigkeit zu alten Browsern, die HTML5 nicht vollständig unterstützen
  3. Verbesserte Nutzbarkeit von HTML-Elementen wie zum Beispiel bei Formularen

Nennen Sie die Nachteile des <audio>/<video>-Tags in HTML5

Auch wenn der Vorteil ist, dass Videos und Audio nun direkt Inline im Browser ohne Plugin abgespielt werden kann, ist es aufgrund einer bislang nicht einheitlichen Lösung seitens der Browserhersteller notwendig, „das Video“/“das Audio“ in einer Vielzahl von Codecs abzulegen und zusätzlich auch noch eine Fallback-Lösung mittels z.B. Adobe Flash für alte Browser, die HTML5 nicht unterstützen, einzuplanen. (Siehe: Rich Media Technologie)

Beschreiben/Erklären Sie das vorliegende <audio>/<video>-Tag

Diese Frage kam in ähnlicher Form bereits mehrfach vor. Da es bei den Themen „Keying“ und „Videodatenberechnung“ ebenfalls um Video geht, liegt die Vermutung also wiederum nah. Sie sollten diese Tags also én detail erklären können! Siehe: Rich Media Technologie .

Module und API´s von HTML5

  1. Audio und Video
    A/V-Medien sollen mit HTML5 direkt „inline“ im Browser (also ohne zusätzliche Plugins wie Flash) wieder gegeben werden können. Damit soll z.B. ressourcenschonender mit der CPU des Clientsystems (Smartphone, Tablet, Smart TV etc.) umgegangen werden können.
    Wie dies im einzelnen geht, habe ich bereits in einem Artikel mit Beispielen zur Abschlussprüfung Winter 2013/2014 der Mediengestalter zum Thema „Rich Media Technologie“ hinlänglich dargestellt.
  2. Canvas 2D API
    Das neue <canvas>-Element bietet eine durch Javascript „bemalbare“ Fläche.  Hierüber können zum Beispiel interaktive Animationen erstellt werden – und das ganz ohne Verwendung von Adobe Flash. Zum canvas-Element gibt es auch schöne Beispiele und Demos im Web. Mittels Erweiterungen wie WebGL lassen sich damit herausragende Effekte erzielen.
  3. Neue semantische Tags und Attribute für verbesserte Barrierefreiheit und Maschinenlesbarkeit
    Mit HTML5 rückt Semantik glücklicherweise immer mehr in den Vordergrund der Web-Programmierung.
    Im semantischen Web gilt es Inhalte korrekt zu beschreiben, statt inhaltsleere und/oder rein visuelle Tags zu verwenden. So wäre es theoretisch möglich, auch Adressen und Telefonnummern mittels Smartphone direkt auslesen und verwenden zu können,  wenn z.B. Mikroformate genutzt werden, Suchmaschinen können auf einer Übersichtsseite Artikel klar voneinander abgrenzen, Navigationen werden durch Sehbehinderte leichter nutzbar und so weiter.
  4. Web-Storage und Offline-Apps
    Webseiten können nun wichtige Teile für die Funktionalität offline speichern und bleiben somit auch dann funktional, selbst wenn der Client keine Verbindung mehr zum Internet besitzt. Viele werden schon einmal eine Mail im Webmailer oder einen Artikel im Content-Management-System geschrieben haben, während der Rechner/das Smartphone unbemerkt offline ging. Bei Absenden der Informationen führte dies zu einer Fehlermeldung und die Inhalte waren im Nirvana des Web verschwunden.
    Durch Speichern relevanter Daten bleiben diese Informationen nun bestehen, die just geschriebene Mail wird also erst einmal offline gespeichert und erst bei erneuter Verbindung zum Internet gespeichert.
  5. Geo-Location API
    Websites können nun herausfinden, wo sich der Nutzer befindet. Damit werden vom Client entweder GPS-Daten oder Alternativen (Geo-Location via WIFI etc.) an die Website gesendet. Für einen web-basierten Routenplaner oder lokalisierte Angebote im Web ist dies sicher vorteilhaft und kann den Nutzer schneller zum Ziel führen, wenn man z.B. das nächste Kino sucht und gleichzeitig Karten für den Besuch erwerben möchte. Der Zugriff auf die API muss durch den Nutzer von Fall zu Fall erneut genehmigt werden.
  6. Device APIs
    Mittels der Device API kann Zugriff auf verschiedene Geräte bzw. spezielle Funktionen des jeweiligen Client-Geräts gewährt werden. Beispiele hierfür wären das Mikrophon, die Webcam/der Photoapparat, das Adressbuch uvm. Auch Zugriffe auf die Device-API müssen von Fall zu Fall genehmigt werden.
  7. Microdata / Microformats
    Mikroformate machen Inhalte sinnvoll und semantisch korrekt für Maschinen lesbar. So gibt es zwar ein <adress>-Tag, was davon aber Firmenname, Adresse, Telefonnummer etc. sind, ist für die Maschine nicht verständlich. Eine gute Übersicht zu dem Thema gibt es auf microformate.de .
  8. Forms
    Formulare werden im Web durchweg intensiv genutzt: Kommentare werden über Formulare versendet, Einkäufe werden über Formulare getätigt und Kontaktformulare sprechen für sich selbst.
    Mit HTML5 kommen neue Formularelemente hinzu, die die Auswertung der übermittelten Informationen eindeutiger und die Nutzung vereinfachen sollen. Viele dieser Formularelemente werden dabei gleichzeitig vom Client vor Versand validiert so dass eine Überprüfung via Javascript in weiten Teilen in Zukunft unnötig wird.
  9. Drag and Drop API
    Hier mit können Inhalte entweder innerhalb eines Dokuments oder auch von außerhalb des Browsers neu positioniert oder hereingezogen werden. Eines der transparentesten Beispiele dürfte dabei die Google Bildersuche sein.
    Probiert es doch einfach einmal selbst – statt im Eingabefeld zu suchen, zieht einfach ein Bild aus den Windows-Beispielbildern (oder ein beliebiges anderes) per Drag and Drop in die Suchbox. Google findet daraufhin „ähnliche“ Bilder. Sicherlich ein großer Fortschritt in Hinsicht auf die (einfache und intuitive) „Usability“ von Webanwendungen.
  10. Weitere
    Es gibt mit HTML5 zahlreiche weitere APIs wie z.B. das Inline-Editing, RDF, SVG uvm. Eine umfassende Übersicht der APIs und Module von HTML5 findet sich z.B. in der Darstellung im englischen Wikipedia-Artikel zu HTML5.
    Interessante Beispiele finden sich zusätzlich im Artikel „10 HTML5 APIs worth looking into“ sowie „The developer’s guide to the HTML5 APIs
    Die oben genannten sollten für die Beantwortung einer Frage zur Abschlussprüfung Winter 2014/2015 für Mediengestalter allerdings mehr als ausreichen.

 Mögliche Fragen zum Thema

Nennen Sie (x) neue Features, die HTML5 bietet

  1. Zugriff auf verschiedene Geräte wie z.B. Kamera-/Video-/Mikrophon-Aufnahme sowie Positionsdaten des Nutzers (nach Zustimmung durch den Anwender)
  2. Interaktionsmöglichkeiten über das mittels Javascript adressierbare <canvas>-Element und natives Abspielen von Rich Media-Formaten wie Audio und Video im Browser unter Verzicht auf zusätzliche Plugins. Dabei volle Fallbackfähigkeit für alte Browser, die die entsprechenden Tags nicht unterstützen.
  3. Verbesserte Semantik auch für strukturelle/segmentierende Tags wie zum Beispiel <header>, <nav>,<article>, <section>, <aside>, <footer>

Auf der nächsten Seite geht es weiter mit neuen strukturellen und semantischen Tags, sowie dem Grundgerüst einer HTML5-Datei.

Thomas A. Reinert
Freelancer, MediaDesign, CEO TARThemes.com bei TAR MediaDesign
Thomas ist (hauptsächlich) Frontend-Entwickler auf Basis von HTML5, CSS3 und jQuery. Nach insgesamt 35 Jahren Programmiererfahrung, 20 davon als Webentwickler und knapp 10 Jahren Wordpress hat er einen guten Einblick in das Backend, die Theme- sowie Plugin-Programmierung und individuelle Anpassungen an die jeweiligen Projektvoraussetzungen. Zusätzlich unterrichtet er als freier Dozent in der Berufsbildung und ist seit 2013 im Prüfungsausschuss der IHK Köln für "Mediengestalter Digital und Print, Fachrichtung Digital" tätig.

Seiten:

5 Kommentare zu “Abschlussprüfung Mediengestalter Winter 2014/2015, Medienproduktion, Alle Fachrichtungen: U5: HTML5

    1. phanthomas72 sagt:

      Hallo J,
      habs zwei mal gegen gelesen, Fehler sind mir trotzdem nicht aufgefallen.. Sind aber nun korrigiert. Deshalb ein dickes „Danke“ für die Korrekturhinweise.

      Zur Frage: Ja, bis auf das < main > Tag darf jedes der neuen semantischen, wie auch semantisch-strukturellen Tags mehrfach vorkommen, solang es sinnvoll eingesetzt wird.

Schreibe eine Antwort

Deine E-Mailadresse wird nicht veröffentlicht Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>