HTML 5

Was ist HTML5?
Ziele
Neue Features
- Neue Tags
- Audio/Video
- Canvas
- CSS3
APIs, Frameworks und Bibliotheken
Wohin geht die Reise?

Was ist HTML5?

Sammelbegriff für neue Techniken und Standards
Einfacher <!DOCTYPE html>
Semantischeres Markup <header> <footer> <section> <article> <aside> <nav> ...
Native inline medien <video> <audio> <canvas>
Client-Seitige Formular Validierung <input type="date" /> <input type="email" />

Native Javascript APIs für Client Side Rich-Media und Responsive Websites <script> Drag & Drop anything, Websockets, Microformats, RDF, Data-Attribute, Local Storage, Web SQL, Web Workers, Online/Offline, History API, Editable Content, Geolocation, File API, ... </script>
CSS3 <style> border-radius: ...; box-shadow: ...; background-image: linear-gradient ...; </style>

Ziele

Vereinfachung

Vereinheitlichung/Standardisierung

Anpassen des HTML Standards an heutige und zukünftige Anforderungen des WWW

Kompatibilität (zu HTML4)

Sicherheit

Barrierefreiheit

Neue Features

Neue Tags

<header>

Kopfbereich einer Seite oder eines Abschnitts
Enthält: Kopfdaten (z.B. Überschrift, Datum, Autor) oder auch <hgroup>

<hgroup>

Enthält Gruppe von h1 - h6 Elementen

<footer>

Fußbereich einer Seite oder eines Abschnitts
Enthält: Meta-Daten (z.B. Datum, Autor, Copyright) , More-Links, Related-Links, Kommentare, Social-Links

<section>

logischer Abschnitt einer Seite (z.B. Hauptspalte, Marginalspalte)

<nav>

Navigation/Menü auf der Seite

<article>

selbständiger Artikel auf einer Seite (z.B. News, Event, Forum-Post)

<aside>

Innerhalb von <article>: Sekundärer Inhalt in Bezug auf den Artikel
Innerhalb der Seite: z.B. "Sidebar" (Marginalspalte)

<address>

Nicht wirklich neu (seit HTML3) aber neu definiert: Kontaktinformation zu Abschnitt, Seite oder Artikel
Enthält keine Postadresse! (Stattdessen Microformate nutzen)

<time>

Enthält eine feste Zeit/ein festes Datum nach dem Gregorianischen Kalender
Kann optionales Attribut "datetime" mit Timestring ("2009-11-13", "2009-11-13T20:00" oder "2009-11-13T20:00+00:00") enthalten
Kann optionales Attribut "pubdate" enthalten: Markiert die Zeit als Publizierungsdatum

<mark>

Markierung innerhalb von Texten: z.B. bei Suchergebnissen

<figure> <figcaption>

<figure>: Eigenständiges Selbsterklärendes Element: z.B. Bild, Diagramm oder Quelltextblock
<figcaption>: Beschreibung innerhalb der <figure>

<details> <summary>

<details>: Natives Akkordion, optionales Attribut "open" öffnet es gleich, sonst ist es geschlossen
<summary>: Zusammenfassung/Überschrift innerhalb von <details>. Klickbar, öffnet/schließt das <details> Element

Audio / Video

<video>

<video controls preload="none" width="778" height="264"  
poster="video/oceans-clip.png"  
<source src="video/oceans-clip.mp4" type='video/mp4' />
<source src="video/oceans-clip.webm" type='video/webm' />...
</video>

Einfach

Kein Flash-Plugin notwendig, dadurch mobile Support
Steuerung des Videos per Javascript, dadurch skinning per HTML/CSS
Video + Canvas = Magic

Kompliziert

(Bisher) kein einheitliches Videoformat. WEBM soll es allerdings werden.
Jeder Browser hat anderes Standardverhalten und sehr unterschiedliches Styling.
Geringe Garantie das ein <video> ohne JS-Bibliothek wie etwas video-js wirklich läuft.
Viele Fallback-Varianten notwendig

<audio>

<audio controls preload="none">
    <source src="audio/[...].mp3">
</audio>

Einfach

Kein Flash-Plugin notwendig, dadurch mobile Support
MP3 ist Standardformat
Steuerung per Javascript, damit skinning per HTML/CSS
Javascript hat (unfertige) Audio API

Kompliziert

Jeder Browser hat anderes Standardverhalten und Styling.

Canvas, Kann was

HTML5 Canvas

Was denn? weiter Pause

Canvas Drawing APIs

Canvas hat verschiedene Kontexte: derzeit "2d" und "webgl"
Ein Kontext entspricht einer Drawing API
Canvas ist ein dynamisches Bitmap: kein DOM innerhalb des Canvas
Bei Animationen wird das Canvas mit jedem Bild neu befüllt

Was kann es noch?

Mit canvasContext.drawImage() kann ein <video> oder <img> auf das Canvas gemalt werden.

Mit canvasContext.getImageData() und canvasContext.putImageData() können Pixel in Echtzeit manipuliert werden.

Mit canvas.toBlob() kann der Inhalt des Canvas als PNG/JPEG ausgegeben werden.

Ein paar Beispiele

3D Earth Canvas + Audio Agent8 Ball

CSS3

Neue Eigenschaften

border-radius
box-shadow
border-image
background-image: xxx-gradient
Mehrere: background-image, text-shadow, box-shadow, border, ...
color: hsl/hsla
background-size
columns & column-xxx
media-queries
transform (2d & 3d)
transition
animation-xxx
@font-face reloaded!

Neue Selectors

E + F: z.B. h1 + p Ein <p>, das direkt nach einem <h1> kommt.
E ~ F: z.B. h1 ~ p Ein <p>, das direkt vor einem <h1> kommt.
E[foo~="bar"]: Element bei dem in foo "bar" als ganzes Wort vorkommt.
E[foo^="bar"]: Element bei dem foo mit "bar" beginnt.
E[foo$="bar"]: Element bei dem foo mit "bar" endet.
E[foo*="bar"]: Element bei dem foo "bar" enthält.
E[foo|="bar"]: Element bei dem in foo "bar" in einer List von durch "|" getrennten Werten enthalten ist.
E:nth-child(n): das n-te Element
E:nth-last-child(n): das n-te Element von hinten
E:nth-of-type(n): das n-te Element des Elementtyps
E:nth-last-of-type(n): das n-te Element des Elementtyps von hinten
E:first-child E:last-child E:first-of-type E:last-of-type
E:only-child: Element, wenn es das einzige Kind ist
E:only-of-type: Element, wenn es das einzige seines Typs ist
E:empty: Element, wenn es leer ist
E:lang(fr): Element, wenn es in der Sprache "fr" ist
E:checked E:enabled E:disable: Eingabeelement, wenn es ausgewählt, aktiviert, deaktiviert ist
E:first-line: Erste Zeile innerhalb eines Elements
E:first-letter: Erster Buchstabe innerhalb eines Elements
E:not(s): Ein Element das nicht dem einfachen Selektor s zuzuordnen ist

APIs, Frameworks und Bibliotheken

Native Javascript APIs

Web Storage: Lokale Ablage, ähnlich Cookies nur für größere Datenmengen
Web SQL Storage: Lokale SQL Datenbank mit Größen bis zu mehreren MB
XDomain communication: Nachrichten zwischen Fenstern auf gleicher oder verschiedenen Domains senden
File API: Lokale Dateien einlesen, verarbeiten, erstellen und hochladen
Geolocation API: Geographische Position des Users ermitteln
Web Workers: Multithreaded Prozesse in Javascript für Anspruchsvolle Berechnungen im Hintergrund
Native Drag and Drop
Websockets: Permanente Echtzeit Sockets von Client zu Server
Notifications: Server zu Client Nachrichten ohne vorherigen Request vom Client
Web Audio: Audio direkt mit Javascript abspielen

Externe APIs/Frameworks

Canvas

Three.js, Processing.js, Canto.js, ...

CSS3

HTML5 Boilerplate, gridless, ...

Und viele mehr ...

Wohin geht die Reise?

Ca. 50% der Features sind noch nicht vollständig vom W3C ausgearbeitet

Explosionsartige Entwicklung von Javascript APIs und CSS3 Frameworks

Bisher noch unterschiedliche Unterstützung und Performance bei modernen Browsern

Es kann nur besser werden!

HTML 5

Was ist HTML5?

Ziele

Neue Features

Neue Tags

<header>

<hgroup>

<footer>

<section>

<nav>

<article>

<aside>

<address>

<time>

<mark>

<figure> <figcaption>

<details> <summary>

Audio / Video

<video>

Einfach

Kompliziert

<audio>

Einfach

Kompliziert

Canvas, Kann was

Canvas Drawing APIs

Was kann es noch?

Ein paar Beispiele

CSS3

Neue Eigenschaften

Neue Selectors

APIs, Frameworks und Bibliotheken

Native Javascript APIs

Externe APIs/Frameworks

Canvas

CSS3

Wohin geht die Reise?

Quellen