HTML5 für Entwickler: Part 1, 2 und 3, 2013

markup, noun. A markup language is a modern
system for annotating a document in a way that is
syntactically distinguishable from the text. The idea
and terminology evolved from the »marking up« of
manuscripts
—Wikipedia

HTML5 für Entwickler Kochan & Partner
Brand
Design
Markus Greve Development
Für den Abendkurs der Typographischen
Gesellschaft München, 2013

Markus Greve
KOCHAN & PARTNER
BRAND DESIGN DEVELOPMENT

T +49 89 17860–150
E markus.greve@kochan.de
 @mrmontezuma

Demos, Links, Ressourcen  http://www.kochan.de/html5
Slides  http://de.slideshare.net/markusgreve/

2 Kochan & Partner Brand Design Development

Organisatorisches

28.02. Einführung
Hidden Gems
Part 1: Markup

07.03. Part 2: CSS

14.03. Part 3: Javascript

21.03. Hack-a-thon: Thema offen!


Hack-A-Thon

Themenvorstellung, Gruppenbildung ca. 15min

Gruppen von 2 – 3 Personen, d.h. 4 – 5 Gruppen

Hacking ca. 120min

Standup 5min pro Gruppe: Vorstellung


Was ist HTML5 und was nicht

...
Quelle: Peter Kröner, http://html5-buch.de
Creative Commons Namensnennung 3.0 Deutschland-Lizenz


Was ist HTML5?

HTML 4.01

XHTML 1

W3C, WHATGC

Nicht-Standard wird Standard


Was ist HTML5?

Ofﬂine & Realtime &
Semantic Device Communication
Storage

3D, Graphics Performance &
Multimedia CSS3
& Effects Integration

Quelle: http://www.w3.org/html/logo/


Unterstützung


Can I Use?

Suche

Volle/teilweise
Unterstützung

Detaillierte
Versionsinfo

Weiterführende
Informationen,
Referenz

Quelle: http://caniuse.com


HTML5 & CSS3, ﬁndmebyIP

CSS3 Properties

CSS3 Selectors

Web Applications

Graphics &
embedded Content

Audio codecs

Video codecs

WebForms 2.0

Quelle: http://www.ﬁndmebyip.com/litmus/


Strategie

Graceful degredation

Progressive enhancement


Hilfsmittel

Polyﬁlls


IE–Quickﬁx (1)

window.document.createElement('section');


IE–Quickﬁx (2)

'abbr article aside audio bdi canvas data datalist details
figcaption figure footer header hgroup menu mark meter nav
output progress section summary time video'.replace(/w+/
g,function(n){window.document.createElement(n)});

Sinngemäße Quelle:: http://code.google.com/p/html5shiv/


Standard Stylesheet Hack

command, datalist, source
{ display: none; }

article, aside, figcaption, figure, footer, header,
hgroup, menu, nav, section, summary
{ display: block; }

mark
{ background: #FF0; color: #000; }

Sinngemäße Quelle:: http://code.google.com/p/html5shiv/


normalize.css

A modern, HTML5-ready alternative to CSS resets
used by Twitter Bootstrap, HTML5 Boilerplate and
many more.

Quelle: http://necolas.github.com/normalize.css/


Modernizr

The All-In-One Entirely-Not-Alphabetical No-Bullshit
Guide to HTML5 Fallbacks
—Modernizr

SVG Accessiblity / ARIA

Canvas Web Sockets

Web Storage Geo Location

Video & Audio Application Cache

IndexedDB, WebSQL Browser State Management

WebForms ....

Quelle: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyﬁlls


–prefix–free

–prefix–free lets you use only unprefixed CSS
properties everywhere. It works behind the scenes,
adding the current browser’s prefix to any CSS
code, only when it’s needed.
—Lea Verou

Quelle: http://leaverou.github.com/prefixfree/


»Hidden Gems«


Standard-Typen für script und style

Standard-Wert für das script-Tag

type=“text/javascript“ language=“javascript“

Standard-Wert für das style-Tag

type=“text/javascript“


Skript-Ausführungsverhalten mit defer, async

Beispiel

<script defer>
// code that runs after DOM finished loading
// ...
</script>

<script async>
// code that runs in the background
// not blocking other scripts
// ...
</script>


a, area und link (1)

Vereinheitlichung von a, area und link

Umschließung

Wiederbelebung target, optionales href-Attribut

Typisierung mittels rel

Beispiel

<a target=“_blank“>Link ohne Ziel und Verstand</a>

<a href=“http://www.google.de“ rel=“prefetch“>
Descriptiver Rel-Einsatz
</a>


a, area und link (2)

Umfangreiches Set an Schlüsselworten für rel:

Navigation, Strukturierung index, first, last,
prev, next, up
Inhaltlich author, alternate, archives,
bookmark, external, help,
license, pingback, search,
tag
Beeinﬂussung Browser-Verhalten sidebar, prefetch,
nofollow, noreferrer

Typisierend icon, stylesheet


Fokus

Auto-Fokus erlaubt für input, select, textarea und button

Standardisierung der Fokus-Ermittlung

Auto-Fokus

<input type="text" name="search" autofocus />

Fokus-Ermittlung
if (document.hasFocus())
{
var element = document.activeElement();
}


Einbindung svg und MathML (1)

<!DOCTYPE html> <!DOCTYPE html>
... ...
<body> <body>
<svg width="300" height="150"> <math>
<rect <mrow>
width="120" height="120" <mi>x</mi>
fill="green" <mo>=</mo>
stroke="red" <mfrac>
stroke-width="10" /> <mrow>
<circle <mo form="prefix">
cx="120" cy="65" r="40" &PlusMinus;</mo>
fill="red" <mi>b</mi>
stroke="green" <mo>&PlusMinus;</mo>
stroke-width="5" /> <msqrt>
</svg> <msup>
</body> <mi>b</mi>
... <mn>2</mn>
</msup>
<mo>-</mo>
<mn>4</mn>
...


Einbindung svg und MathML (2)

Screenshots: Safari 6/Mac OS X


WYSIWYG und Rechtschreibhilfe

Mögliche Werte für contenteditable und spellcheck:
true, false, inherit

Beispiele

<div id="myEditor" contenteditable="true"
spellcheck="false">...</div>

element.isContentEditable
document.designMode = 'on';


Standardisierung getElementsByClassName()

API

document.getElementsByClassName()
element.getElementsByClassName()

Beispiele

var allMyActiveDivs
= document.getElementsByClassName('active');

var myOtherLis
= myUl.getElementsByClassName('inactive');


HTML-Manipulation
API

element.innerHTML
element.outerHTML
element.insertAdjacentHTML(<position>, <html>)
<position> := 'beforebegin'
'afterbegin'
'beforeend'
'afterend'

Beispiele

myUl.innerHTML = '<li>New Bullet</li>';
myUl.outerHTML = '<ul><li>New Bullet</li></ul>';

myLi.insertAdjacentHTML('beforebegin', '<li>Vorgänger</li>');


Class List API
API

element.classList.length
.add()
.contains()
.item()
.remove()
.toggle()

Beispiele

myDiv.classList.add('active'); // 'active' is added
myDiv.classList.remove('active'); // 'active' is removed
myDiv.classList.toggle('active'); // add or remove

if (myDiv.classList.contains('active')) alert('Aktiv!')


Query-Selector API

API

document.querySelector(<CSS Selector>); // first match
document.querySelectorAll(<CSS Selector>); // all matches

Beispiel

var oddRows
= document.querySelectorAll('#table > tr:nth-child(odd)');

Randnotiz: w3C Standard seit vergangenem Freitag, 22. Februar 2013


Frei deﬁnierbare Attribute: data-*

Attribute data-*

API element.dataset

Beispiel

<a data-file-type="pdf" data-file-size="73" href="...">
Preisliste und Kundenheft
</a>

// data-* will become dataset-Members, notice "Camel" writing
alert(element.dataset.fileType) // alerts "pdf"
alert(element.dataset.fileSize) // alerts "73"


History API

API

history.length
.back()
.forward()
.go(<delta>)
.state
.pushState(<stateObj>, <title>, <url>)
.replaceState()

window.onpopstate = function(e) {
// code to be executed after browser-back button
// ...
};


Zusammenfassung: Markup

Standard-Type für script und style

Skript-Ausführungsverhalten mit defer, async

Fokus-Behandlung mit autofocus, hasFocus() und activeElement()

a, area und link: Vereinheitlichung, Umschließung, Typisierung mit rel

SVG und MathML

WYSIWYG und Rechtschreibhilfe


Zusammenfassung: Javascript

HTML-Manipulation mittels innerHTML, outerHTML, insertAdjacentHTML

Standardisierung getElementsByClassName()

ClassList API

Query Selector API

Frei deﬁnierbare Attribute mit data-*

History API


Part 1
Markup


Semantik
Formulare
Video & Audio
Application Cache


Grundgerüst

<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8“/>
<title>Hello world</title>
</head>
<body>
<h1>Hello world</h1>
<p>Starting with HTML5</p>
</body>
</html>


DOCTYPE

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>


Auslassung

<!DOCTYPE html>
<html>
<head>
</head>


</html>

Well-formed oder nicht? Egal!

<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8“ >
</head>
<body>
<p>Starting with HTML5
<p>
...
<a href=index.html>No quotation marks!</a>
<STRONG>You don't have to like this</STRONG>
<eM>I don't</Em>
</body>
<html>


Neue Elemente

Kopf- und Fußbereiche header, footer

Seitenabschnitte section

Artikel article

Navigationsbereiche nav

Begleitende Informationen aside

Abbildungen figure, figcaption

Markierung mark


Neue Elemente (2)

Uhrzeit time

Menü menu

Button/Checkbox/Radiobox command

Fortschrittsanzeige progress

Skala meter

Detailansicht details

Zusammenfassung einer Detailansicht summary


Kopf- und Fußbereich: header, footer

Kopfbereich z.B. für Logo, Navigationsbereich

Beide Elemente pro Seite und pro Sektion deﬁnierbar

<header>
<a href="index.html" rel="index">Huber GmbH</a>
<nav>...</nav>
</header>

...

<footer>
© 2013
<a href="imprint.html" rel="author">Huber GmbH</a>
<a href="license.html" rel="license">Nutzungsbedingungen</a>
</footer>


Artikel und Sinnabschnitte: article und section

<body>

<article>
...

<article>
Zusammenfassung inhaltlich
<section class="intro"> abgeschlossener Bereiche durch
article

Inhaltliche Strukturierung der Seite
<section class="copy"> bzw. des Artikels durch section

<article>
...


Navigationsbereiche: nav

Kennzeichnung der Hauptnavigationsbereiche als nav

Nebennavigationen außerhalb, z.B. Meta-Navigation im footer

...
<nav>
<ul>
<li><a href="news.html">News</a></li>
<li><a href="about.html">Über uns</a></li>
<li>...</li>
</ul>
</nav>
...
<a href="imprint.html">Impressum</a>


Begleitende Informationen: aside

<body>

<article> <aside>
Verwandte
<section> Themen

Ganz Innerhalb eines articles:
andere
sekundärer Inhalt in Bezug
Themen
<section> auf den Artikel
...
</aside> Außerhalb eines articles:
sekundärer Inhalt in Bezug
<aside> auf die Website als Ganzes
Mehr zu
diesem
Thema
</aside>


Abbildungen: figure und figcaption

<body>

<article>

Semantische Einheit für eine <section>
Abbildung figure, z.B. ein Bild, eine
Tabelle oder ein Diagramm, mit
optionaleer Abbildungsbeschriftung <figure>
figcaption. <img src=""... />
<svg... />
Reihenfolge der Darstellung kann <figcaption>
ohne Verständnisverlust verändert Quelle: BMW AG.
werden. </figcaption>
</figure>

<section>


Zeitangaben: time

Maschinenlesbare Kodierung von Zeitangaben des proleptischen
Gregorianischen Kalenders

Datumsangabe, Uhrzeit oder eine Kombination aus Datum und Uhrzeit

optional: Kennzeichnung als Veröffentlichungszeitangabe

Beispiele

Das <time datetime="2013-02-28">heutige</time> Seminar...

Jeden Tag um <time datetime="12:00">12</time> Uhr...

<time datetime="2013-03-01T17:00Z">Morgen um fünf</time>...

Veröffentlicht am: <time datetime="2013-02-26" pubdate>
26.02.13</time>


Markierung: mark

Hervorhebung von Text ohne inhaltliche Betonung

Nutzbar insbesondere (ausschließlich?) für Suchergebnisse (SERP)

Beispiel

<h1>Ihre Suche nach <em>entertain</em>:</h1>
<ul>
<li>Let me <mark>entertain</mark> you: Queen, Jazz, 1978</li>
<li>That's <mark>Entertain</mark>ment: Band Waggon, 1953</li>
</ul>

Ihre Suche nach entertain:
• Let me entertain you: Queen, Jazz, 1978
• That's Entertainment: Band Waggon, 1953


Fortschrittsanzeige: progress

Darstellung Betriebssystem-speziﬁsch

Maximum (max) und aktueller Status (value) optional via numerischem Wert

Aktueller Fortschriftt via element.position (0.0 – 1.0, –1 bei unbekannt)

Safari 6/Mac OS X

Internet Explorer/Windows Phone 8

Firefox 10 /Windows Non-Aqua


Skala: meter

Darstellung Betriebssystem-speziﬁsch

Grenzen (min, max) und aktuellem Wert (value) optional via numerischem Wert

Einfärbung bei Erreichen von Schwellwerten (low, high, optimum) möglich

Safari 6/Mac OS X


Outline-Algorithmus (1)

Beibehaltung des 6-stuﬁges Überschriften-Modell h1 bis h6

Hierarchie jedoch pro Sektion

Sektionen deﬁniert durch section, nav, aside und article


Outline-Algorithmus (2)

Beispiel
<h1>Agenda</h1> 1. Agenda
<section> 1.1 Begrüßung
<h1>Begrüßung</h1>
1.1.1 Schirmherr
<h2>Schirmherr</h2>
<h2>Sponsorenvertreter</h2> 1.1.2 Sponsorenvertreter
<h1>Top 1: Gruppen</h1> 1.2 Top 1: Gruppen
<h1>Top 2: Plenung</h1>
1.3 Top 2: Plenum
</section>
<h1>Anlagen</h1> 2. Anlagen


Umdeutung/Änderung bestehender Elemente

Hervorhebung em, strong

Abkürzung und Akronym abbr

Quellcode code

Adresse address

Gleichwertige Abhebung, Fachbegriffe b, i

Inhaltlicher Bruch hr

»Kleingedrucktes« small


Entfernte Elemente

Frames frameset, frame, noframes

dir, basefont, big, center,
Präsentationselemente
font, s, strike, tt, u

Akronyme acronym

Applets applet

Einzeiliges Eingabefeld (?) isindex

Randnotiz: HTML5 deﬁniert, wie diese nicht speziﬁzierten Elemente dargestellt werden sollen... :-)


A
R
I
A

Accesible
Rich
Internet
Application

WAI-ARIA

Implizite Rollen

Deﬁnierte Überschreibbarkeit

Explizite Attribute: Rollen, Beschriftungen, Zustände, ...


Implizite Rollen und Überschreibung

Element Default role Überschreibbar mit
article article document, application, main

aside note complementary, search

header keine banner

li listitem treeitem

ol list tree, directory

output status Alle
section region document, application, log,
contentinfo, search, alert, main,
dialog, alertdialog, status, log
table grid treegrid

ul list tree, directory

body document application


Explizite Rollenzuweisung

<ul role="tree"
aria-labelledby="Credits">

<li role="treeitem" aria-expanded="false">
John Deacon: Bass guitar
</li>
<li role="group">
Freddie Mercury:
<ul>
<li role="treeitem">Vocals</li>
<li role="treeitem">Piano</li>
</ul>
</li>
...
</ul>

Details: http://w3.org/TR/wai-aria/


Microdata

RDFa

microformats.org

HTML5-Microdata: vCard, vEvent, work

Attribute itemscope
itemprop
itemref
API document.getItems()
element.properties
element.itemValue


Microdata: Google Rich Snippets

Quelle: http://support.google.com/webmasters/bin/answer.py?hl=de&answer=99170


Microdata: Google Rich Snippets (2)

Quelle: http://www.google.com/webmasters/tools/richsnippet


Zusammenfassung: Semantik

Syntax: doctype, well formed, Auslassung

Neue Elemente

Umdeutung/Änderung bestehender Elemente

Entfernte Elemente

Outline-Algorithmus

WAI-ARIA

Microdata


Semantik
Formulare
Video & Audio
Application Cache


Neue Typen für input (1)

Textfeld text

Suchfeld search

Telefonnummer telephone

URL* url

E-Mail-Adresse* email

Numerischer Wert* number

Bereich* range

Farbwahl / Color picker color

* Eingebaute Validierung


Neue Typen für input (2)

Datum- und Zeit-Angaben datetime

Datum date

Monat month

Woche week

Zeit time

Datum- und Zeit in lokaler Notation datetime-local


Typ number, range

Eingabefeld oder Regler für Fließkomma-Zahlen

optional: Grenzen (min, max) und Schrittweite (step)

Beispiele

<input type="number" min="-10" max="87" step="1" />
<input type="range" min="-10" max="87" step="1" />

Safari 6/Mac OS X

IE 10/WIndows 8


Typ search

Eingabefeld für Suchen

Darstellung nach Art des Betriebssystems

Beispiel

<input type="search" placeholder="Suche" />

Safari 6/Mac OS X


Typ Farbwahl / Colorpicker color

Leider noch kaum implementiert
Beispiel

<input type="color" />

Chrome 25/Mac OS X

Opera 12/Mac OS X


Typ für Datum- und Zeitangaben

Validierung, optional mit Beschränkung min und max
Beispiele

<input type="datetime" />
<input type="date" />
<input type="month" />
<input type="week" />
<input type="time" />
<input type="datetime-local" />

Chrome 25/Mac OS X


Neue Elemente

Erzeugung von Schlüsseln keygen

Objekt object

Ausgabebereich output

Auto-Vervollständigung datalist


Auto-Vervollständigung: datalist

Beispiel

<input list="albums" />

<datalist id="albums">
<option value="Queen" /> Chrome 25/Mac OS X
<option value="Queen II" />
<option value="Sheer Heart...
<option value="A Night At ...
<option value="A Day At Th...
<option value="The Game" ...
<option value="The Works" />
<option value="A kind of m...
<option value="The Miracle"
<option value="Innuendo" />
...


Neue Attribute

Referenz auf zugehöriges Formular form

Steuerung Auto-Vervollständigung autocomplete

Referenz auf Vorschlagsliste list

Mehrfach-Feld (z.B. bei Datei-Upload) multiple

Platzhalter / Eingabehilfe placeholder

Checkbox mit unbekanntem Zustand indeterminate

Steuerung Button-Verhalten formaction, formenctype,
formmethod, formnovalidate


Steuerung Button-Verhalten

Beispiel

<form action="standard.php" method="post">
<button type="submit">Absenden</button>
<button type="submit" formaction="alternate.php">
Anderswohin
</button>
<button type="submit" formnovalidate>Ohne Prüfung</button>
</form>

Absenden Anderswohin Ohne Prüfung

Validierung Validierung keine Validierung
Post Post Post

standard.php alternate.php standard.php


Validierung

Validierung auf Ebene Element, Feldgruppe oder Formular

Keine Validierung für hidden, submit, image, reset und object

CSS Pseudo-Selektoren für Styling :in-range, :default, :required

Fehlermeldung bei Absenden des Formulars oder manuell via Javascript API

Beeinﬂussung durch Attribute novalidate, required und pattern
z.B. pattern="[0-9]{5}"


Validation API
Member

Bool'scher Wert element.willValidate

Lokalisierte Fehlermeldung element.validationMessage
Datenstruktur zur Fehleranalyse element.validity
.valid
.valueMissing
.typeMismatch
.patternMismatch
.tooLong
.rangeUnderflow
.rangeOverflow
.stepMismatch
.customError

Methoden
Validierung auslösen element.checkValidity()

Eigene Regel setzen element.setCustomValidity()


Browser
Unterstützung?


Mac OS X


Windows 8


iOS (1)


iOS (2)


Windows Phone 8


Zusammenfassung: Formulare

Neue Typen für input

Neue Elemente und Attribute

Validierung und Validation API

Browser-Unterstützung


Semantik
Formulare
Video & Audio
Application Cache


Audio- und Video-Einbindung

Steuerelemente an/abschaltbar mit controls (»Headless«)

Alternativer Inhalt innerhalb des Elements

Umfangreiche Javascript API zur Steuerung

Beispiel

<audio src="queen-a-day-at-the-races.ogg" controls>
Leider unterstützt ihr Browser das audio-Element nicht.
Klicken Sie hier, um die <a href="queen-a-day-at-the-
races.ogg">Datei herunterzuladen</a>.
</audio>


Audio-Attribute

Beispiel

Quellenangabe: src,
<audio
hier mit Framestart und -ende #t=
src="audio.ogg#t=10,20"
controls Steuerelemente: controls
autoplay
preload="auto" Automatisches abspielen: autoplay
loop
> Preload-Verhalten:
... none, metadata, auto
</audio>
Wiederholte Wiedergabe: loop


Video-Attribute

Beispiel
Quellenangabe: src
<video
src="video.ogg" Steuerelemente: controls
controls
autoplay Automatisches abspielen: autoplay
preload="auto"
Preload-Verhalten:
loop
none, metadata, auto
width="640" height="480"
audio="muted"
Wiederholte Wiedergabe: loop
poster="videoframe.jpg"
> Dimensionen: width und height
...
</video> Audio-Steuerung: audio="muted"

Thumbnail: poster


Multiple Quellen: Codecs

Implizite Ermittlung via Mime-Type
<video>
<source src="video.ogg" />
<source src="video.mp4" />
</video>

Explizite Vorgabe

<video>
<source src="video.ogg" type="video/ogg; codecs='theora, vorbis'" />
<source src="video.mp4" type="video/mp4" />
</video>


Multiple Quellen: Devices

Media-speziﬁsch
<video>
<source src="small.ogg" media="handheld" />
<source src="high-res.ogg" media="all" />
</video>


Audio- und Video API: Member

Lautstärke (0 – 1) element.volume

Pausiert (true, false) element.paused

Ton ausgeblendet (true, false) element.muted

Position auslesen und setzen element.currentTime

Aktuelle Mediendatei element.currentSrc

Abspieldauer (Streams: 'infinity') element.duration

Startzeitpunkt element.startTime

Normale Abspielgeschwindigkeit (0 – 1) member.defaultPlaybackRate

Abspielgeschwindigkeit (0 – 1) member.playbackRate


Audio- und Video API: TimeRanges

Member

(Bereits) Durchsuchbarer Zeitraum element.seekable

Abgespielter Zeitraum element.played

Vorgelden (gepufferter) Zeitraum element.buffered

[TimeRangeObject]

Anzahl der deﬁnierten Zeiträume timerange.length

Startzeitpunkt von Zeitraum n timerange.start(n)

Endzeitpunkt von Zeitraum n timerange.end(n)


Audio- und Video API: Methoden

Abspielen element.play()

Pausieren element.pause()

Mediendatei laden element.load(<url>)

Codec-Unterstützung abfragen element.canPlayType(<type>)

Beispiel

var p = document.getElementById('player');
var s = p.canPlayType("video/ogg; codecs='theora'");
switch(s)
{
case '': alert('Sorry, no way'); break;
case 'maybe': if (confirm('Own risk?')) p.play(); break;
case 'probably': p.play(); break;
}


Events
loadstart Der Ladevorgang wurde begonnen

loadedmetadata Die Meta-Daten der Datei wurden geladen

canplay Abspielen nun möglich

canplaythrough Abspielen nun ohne weiteres Buffering möglich

play Abspielen wurde gestartet

ended Das Medienelement hat sein Ende erreicht

Beispiel

document.getElementById('player').addEventListener('ended',
function() { alert('Ende, aufwachen!'); });


Fehlerbehandlung (1)
element.error
null Kein Fehler
1 MEDIA_ERR_ABORTED Abbruch durch den Benutzer
2 MEDIA_ERR_NETWORK Netzwerkfehler
3 MEDIA_ERR_DECODE Fehler beim Dekodieren
4 MEDIA_ERR_SRC_NOT_SUPPORTED Dateiformat/Codec nicht unterstützt

element.networkState
0 NETWORK_EMPTY Ladevorgang noch nicht begonnen
1 NETWORK_IDLE Kein Element zu laden
2 NETWORK_LOADING Ladevorgang
3 NETWORK_LOADED Ladevorgang abgeschlossen
4 NETWORK_NO_SOURCE Keine Mediendatei vorhanden


Fehlerbehandlung (2)

element.readyState
0 HAVE_NOTHING Noch keine Daten vorhanden
1 HAVE_METADATA Metadaten vorhanden (duration, ...)

2 HAVE_CURRENT_DATA Erste Daten liegen vor, jedoch noch
nicht ausreichend, um abzuspielen

Daten für aktuelle Position und die
3 HAVE_FUTURE_DATA nächstenSekunden liegen vor,
abspielen kann starten
Entweder komplett geladen oder
4 HAVE_ENOUGH_DATA Abschätzung aufgrund aktueller
Netzwerkperformance ok


And The Oscar Goes To...

Firefox Safari Chrome Opera IE IE
3.5+ 4+ 3+ 10.5+ 6–8 9

Theora/Vorbis ü — ü ü — —

H.264/AAC — ü ü — — ü
MP3 — ü ü — — ü
WAV ü ü ü ü — —

WebM ü 4+ — ü ü 10.6+ — —


Zusammenfassung: Audio- und Video

Einbindung

Audio- und Video-Attribute

Multiple Quellen

Audio- und Video API: Member, Methoden und Events

Fehlerbehandlung: error, networkState, readyState

Codecs


Semantik
Formulare
Video & Audio
Application Cache


Überblick Ofﬂine-Techniken

Application Cache

DOM Storage

Web SQL

IndexedDB

User Data

On-/Ofﬂine-Events und -Status-Abfrage


HTML-Einbindung

index.html

<html
manifest="cache.manifest"> Referenzierung der Manifest-
<head> Datei im HTML-Element
<title>The Works offline...
</head> Auslieferung der Datei mit dem
... Mime-Type: text/cache-manifest
</html>


Aufbau Cache Manifest (1)

cache.manifest

CACHE MANIFEST Einleitung der zu cachenden Dateien
# Comment your lines with "#" mit CACHE MANIFEST

Auﬂistung jeder zu cachender Datei
# Cache these
index.html Mehrere unterschiedliche
img/assets/band.jpg Sektionen pro Cache-Datei möglich
img/assets/instruments.jpg



cache.manifest

CACHE MANIFEST
# Comment your lines with "#"

# Cache these
index.html
img/assets/band.jpg

Festlegung von Inhalten, die nur
NETWORK
über eine Netzwerkverbindung
only-online.html
bezogen werden dürfen (= no cache)
img/really-current-status.gif



cache.manifest

CACHE MANIFEST
# Comment your lines with "#"

# Cache these
index.html
img/assets/band.jpg

NETWORK
only-online.html
img/really-current-status.gif

FALLBACK Alternativ-Inhalte zur Ausgabe bei
/ sorry-you-are-offline.html nicht erreichbaren Ressourcen
des NETWORK-Abschnitts


Events
checking Manifest wird erstmalig geladen

noupdate Keine Veränderung des Manifests

downloading Manifest und Dateien werden initial heruntergeladen

progress Dateien werden heruntergeladen

cached Alle Dateien beﬁnden sich im Cache

updateready Alle Dateien wurden aktualisiert und beﬁnden
sich nun im Cache

obsolete Cache ist ungültig (z.B. 404) und wird gelöscht

error Fehler oder Änderung während des Downloads


Zusammenfassung: Application Cache

HTML-Einbindung, Mime-Type

Aufbau Cache Manifest: CACHE MANIFEST, NETWORK, FALLBACK

Javascript Events zur Cache Überwachung


Part 2
CSS


Selektoren
Textﬂuss
Transformationen
Transitionen, Animationen


Selektoren CSS2.1

Pseudo-Klassen
:first-child Genau das erste Kind
:last-child Genau das letzte Kind

Attribut-speziﬁsche Selektion
element[attribute] element mit Attribut attribute
a[target="_blank"] Anchor mit Attribut target und Attributwert
exakt "_blank"
div[class~="copytext"] Division mit einer mindestens der Klasse
copytext (= div.copytext)
div[lang|="de"] Division mit Attribut lang matcht alle Werte, die
von links mit de beginnen, z.B.
lang="de", lang="de-de, de-at"...


Selektoren CSS2.1: Demo


Selektoren CSS3 (1)

Pseudo-Klassen
:root Das root-Element des Dokuments, body
:nth-child(n) Das n-te Kind, z.B. nth-child(7),
nth-child(odd)oder nth-child(even)
:nth-last-child(n) dito, umgekehrte Zählung
:first-of-type

:last-of-type

:nth-of-type(n)

:nth-last-of-type(n)

:only-child Ein Einzelkind
:empty Ein leeres Element
:enabled, :disabled Ein- oder ausgeschaltetes Element, z.B. Button
:checked Markiertes Element, z.B. Checkbox oder Radiobox


Selektoren CSS3 (2)

Pseudo-Elemente
:first-line Die erste Zeile des Textes
:first-letter Der erste Buchstabe des Textes
:before Generierter Inhalt vor dem Element
:after Generierter Inhalt nach dem Element

Attribut-speziﬁsche Selektion
div[lang^="de"] Attributwert beginnt mit "de"
div[lang$="de"] Attributwert endet mit "de"
div[lang*="de"] Attributwert beinhaltet "de"

Negation
:not(<CSS 3 Selector>) Invertierung von Selektionsbedingungen


Selektoren CSS3: Demo


Selektoren für WebForms 2.0

Pseudo-Elemente
:default Default-submit Button des Formulars
:indeterminate Unbestimmte Check- und Radioboxen
:valid Gültiger Wert
:invalid Ungültiger Wert
:in-range Innerhalb des Wertebereichs
:out-of-range Außerhalb des Wertebereichs
:required Pﬂichtfeld
:optional Elemente ohne required und ohne Validierung
:read-only Schreibgeschützte Elemente
:read-write Elemente ohne Schreibschutz


Selektoren für WebForms 2.0: Demo


Selektoren
Textﬂuss
Transformationen


Textﬂuss

Eingebundene Block-Darstellung display: inline-block

Mehrspaltiger Textﬂuss column-count, column-rule, column-gap

Textkürzung text-overflow: ellipsis
Hinweis! white-space: nowrap nicht vergessen


Textﬂuss: Demo


Selektoren
Textﬂuss
Transformationen


Transformationen

Koordinatensystem & Perspektive

Hardware-Beschleunigung

Kombinierbare Transformationen

• Rotation
• Skalierung
• Translation
• Neigung
• Ursprung
• Matrizen-Manipulation


Transformationen: Demo (1)


Transformationen: Demo (2)


Transformationen: Demo 2D


Selektoren
Textﬂuss
Transformationen


Transitions: Übergänge zwischen Property-Werten

Properties all, none, <properties>

Dauer

Timing-Funktion linear, ease*, cubic-bezier

Start-Verzögerung


Transitions: Beispiele

Vollständige Notation
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: .5s;

Kurzschreibweise und multiple Übergänge
transition: width 2s linear,
height 1s ease-in,
left .5s ease-in-out;


Transitions: Demo


Animationen

Keyframe-Deﬁntionen Start/Ende from, to oder Prozentwert 0 – 100%

Animations-Property

• Dauer
• Anzahl Wiederholungen
• Timing-Funktion
• Richtung


Animationen: Demo


Zusammenfassung: CSS

Selektoren CSS 2.1, CSS 3

Textﬂuss: Blocks, Mehrspaltigkeit, Textkürzung

Transformationen 2D, 3D

Übergänge mit Transitions

Keyframe Animationen


Part 3
Javascript


Was ist HTML5?

Storage

Multimedia CSS3



Canvas
Geolocation
Device Orientation
Notiﬁcations
WebSocket
WebWorker
Web Storage
Web SQL
Indexed DB
File API


3D, Graphics and Effects

Canvas
Geolocation
Device Orientation
Notiﬁcations
WebSocket
WebWorker
Web Storage
Web SQL
Indexed DB
File API


Canvas

Umfangreiche Browser-Unterstützung (IE ab 9)

Markup mit Fallback

<canvas id="c" width="600" height="220">Fallback</canvas>

Breiten- und Höhen-Angabe: HTML, CSS

Context: 2D, 3D: WebGL

Transformationen: translate, rotate, scale, transform


Koordinatensystem & Raster

Quelle: https://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial/Applying_styles_and_colors


API: Setup und Zeichnen

// Basic setup
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');

// rectangles
ctx.strokeRect(x, y, width, height);
ctx.fillRect(x, y, width, height);
ctx.clearRect(x, y, width, height);

// path
ctx.beginPath();
...
ctx.stroke(); // or/and
ctx.fill();


API: Setup und Zeichnen (2)

ctx.lineTo(x, y);

ctx.moveTo(x, y);

ctx.arc(x, y, radius, startAngle, endAngle, antiClockWiseBool);

ctx.quadraticCurveTo(cX, cY, x, y);
ctx.bezierCurveTo(c1x, c1y, c2x, c2y, x, y);

x,y
c x,y

c1 x,y

x,y

Ausgangspunkt Ausgangspunkt c2 x,y

Quelle: http://commons.wikimedia.org/wiki/File:Bezier_grad123.svg


API: Graﬁken

ctx.drawImage(HTMLimageObject, x, y);

ctx.drawImage(HTMLimageObject, x, y, width, height);

ctx.drawImage(HTMLimageObject,
sourceX, sourceY, sourceWidth, sourceHeight,
destX, destY, destWidth, destHeight
);


API: Füllung und Linien

// Füllangaben für Objektfüllung und -outline
ctx.fillStyle = <Füllangabe>;
ctx.strokeStyle = <Füllangabe>;

// Beispiele für Füllangaben
ctx.fillStyle = 'red';
ctx.fillStyle = '#ff00ff';
ctx.fillStyle = 'rgb(255, 127, 0)';
ctx.fillStyle = 'rgba(255, 127, 0, 0.5)';

// Linienstärke, -abschluss, -verbindung, -gehrungsbegrenzung
ctx.lineWidth = <Zahlwert>;
ctx.lineCap = <Abschluss: 'butt', 'round', 'square'>;
ctx.lineJoin = <Verbindung: 'round', 'bevel', 'miter' = Gehrung>;
ctx.miterLimit = <Zahlwert>;

// globale Transparenz
ctx.globalAlpha = 0.3;


API: Verläufe und Muster

var linGradient = ctx.createLinearGradient(x1, y1, x2, y2);
linGradient.addColorStop(pos, color); // pos: 0.0 ... 1.0
...

var radGradient = ctx.createRadialGradient(x1, y1, r1, x2, y2, r2);
...

ctx.createPattern(HTMLimageObject, type)
// type: 'repeat'
// 'repeat-x'
// 'repeat-y'
// 'no-repeat'


Demo


Device

Canvas
Geolocation
Device Orientation
Notiﬁcations
WebSocket
WebWorker
Web Storage
Web SQL
Indexed DB
File API


Geolocation

Abfrage der geograﬁschen Position

Erlaubnis durch den Benutzer

Einmal-Abfrage oder kontinuierliche Überwachung

Quelle je nach Endgerät: GPS, GSM-Interpolation, WLAN...

Neben Koordination

• Höhe über Normalnull
• Richtung
• Geschwindigkeit


API
navigator.geolocation

getCurrentPosition(
Position abfragen <callback>, <error>, <options>)

Position überwachen watchPosition(<dito>)

Überwachung beenden clearWatch(<watchId>)
[Geoposition]

Genauigkeit coords.accuracy

Breitengrad, Längengrad coords.latitude, .longitude

Richtung coords.heading

Geschwindigkeit coords.speed

Genauigkeit Höhe coords.altitudeAccuracy

Höhe coords.altitude

Ermittlungszeitpunkt timestamp


Optionen
[PositionOptions]

Hohe Genauigkeit einschalten enableHighAccuracy true / false

Maximale Laufzeit für Ermittlung timeout

Maximales Alter maximumAge

Beispiel
var threadId;
if (navigator.geolocation)
{
threadId = navigator.geolocation.watchPosition(
update, // function callback
error, // error callback
{enableHighAccuracy: true} // options as JSON object
);
}

function update(pos) { alert(pos.coords.latitude); }
function errorCallback(error) { alert(error.message);}


Fehlerbehandlung

error.code
0 Kein Fehler
1 PERMISSION_DENIED Zugriff nicht gestattet
2 POSITION_UNAVAILABLE Position nicht verfügbar
3 TIMEOUT Ermittlung abgelaufen
error.message

Lokalisierte Fehlermeldung zur Ausgabe


Demo


Canvas
Geolocation
Device Orientation
Notiﬁcations
WebSocket
WebWorker
Web Storage
Web SQL
Indexed DB
File API


Device Orientation

Abfrage der Orientierung im dreidimensionalen Raum

Konkurrierende Speziﬁkationen: DeviceOrientation oder MozOrientation

Quelle je nach Endgerät: Beschleunigungssensor


Z

Y

X


Z

Y

α

X


Z

Y

β

X


Z

Y

γ

X


API

window.DeviceOrientationEvent

Neigung Links/Rechts –90° ... +90° deviceorientation.gamma

Neigung Vorne/Hinten –90° ... +90° deviceorientation.beta

Himmelsrichtung 0° ... 360° deviceorientation.alpha
window.OrientationEvent

Neigung Links/Rechts –1 ... +1 mozorientation.x

Neigung Vorne/Hinten –1 ... +1 mozorientation.y

Vertikale Beschleunigung mozorientation.z


Demo


Realtime & Communication

Canvas
Geolocation
Device Orientation
Notiﬁcations
WebSocket
WebWorker
Web Storage
Web SQL
Indexed DB
File API


Notiﬁcations

(Visuelle) Benachrichtigung des Users außerhalb des Browserfensters

Ausprägungen: Notification oder HtmlNotification

Darstellung Systemabhängig, z.B. Mac OS X Mountain Lion: Mitteilungszentrale

Leider derzeit exklusiv in Webkit implementiert


API

window.webkitNotifications

Berechtigung überprüfen checkPermission()

Berechtigung einholen requestPermission(<callback>)

Benachrichtigung erzeugen createNotification()

Beispiel

if (window.webkitNotification.checkPermission() == 0)
{
var n = window.webkitNotification.createNotification(
'', // icon, unused
'Hammer to fall', // title
'Here I stand or...' // body
);
n.show();
}


Demo


Canvas
Geolocation
Device Orientation
Notiﬁcations
WebSocket
WebWorker
Web Storage
Web SQL
Indexed DB
File API


WebSocket

Bidirektionale Kommunikation

Reduktion des HTTP-Overheads

Technische Basis: HTTP Upgradesystem, ggf. Probleme bei Proxy-Verbindungen

URL-Schema: ws:// bzw. wss://

Format derzeit Text, binäre Daten in Vorbereitung


Server-Implementierung

Standard LAMP tendenziell ungeeignet, da anderes Nutzungsmuster:

• kein starrer Anfrage/Antwort-Zyklus
• große Anzahl an offenen Verbindungen

Vielfältige Serverseitige Implementierungen verfügbar
u.a. für Node.js, Java, Ruby, Python


API

Konstruktor new WebSocket(<url>)

Nachricht vom Client senden send(<message>)

Verbindung beenden close()

Events
onopen Verbindung aufgebaut
onerror Fehler
onmessage Eingehende Nachricht des Servers


Demo


Performance & Integration

Canvas
Geolocation
Device Orientation
Notiﬁcations
WebSocket
WebWorker
Web Storage
Web SQL
Indexed DB
File API


Web Worker

Asynchrone Berechnung

Ausgelagert in eigene Threads

Parallele Ausführung weiterer Skripte (»non blocking«)

Kein Zugriff auf DOM-Elemente: window, document, parent


API

[Worker]

Konstruktor new Worker(<js-file)

Nachricht senden postMessage(<text>)

Worker beenden terminate()


Genereller Ablauf

index.html worker.js
w = new worker('worker.js');
w.postMessage(cmd); self.addEventListener(
// ... 'message',
// do more stuff, script is function(e)
// not blocked {
// ... // do the real heavy
// calc stuff
// ...
var result = /* ... */;

w.onmessage = function(e) postMessage(result)
{ }, false
alert(e.data); );
w.terminate();
}


Demo

5 Millionen-maliges Aufsummieren einer Zufallszahl, die mit 100,1 multipliziert wurde.


Ofﬂine & Storage

Canvas
Geolocation
Device Orientation
Notiﬁcations
WebSocket
WebWorker
Web Storage
Web SQL
Indexed DB
File API


Web Storage

Bezeichnet auch als DOM Storage

Session (sessionStorage) oder Sessionübergreifend (localStorage)

Key/Value-Paare

Zugriffsbeschränkung auf »same origin«, d.h. Protokoll/Domain/Port

Speicherplatz abhängig von Browser und Benutzereinstellung
Defaults pro origin: Webkit 2,5MB, Firefox 5MB, IE 10MB

Event-Überwachung


API

window.localStorage | window.sessionStorage

Key/Value-Paar setzen setItem(<key>, <value>)

Value zu Key ermitteln getItem(<key>)

Key/Value-Paar löschen removeItem(<key>)

Speicher leeren clear()

Anzahl Key/Value-Paare length

Key des n-ten Paares key(<index>)


Event storage

event.key Key des auslösenden Speicherzugriffs
event.oldValue Bisheriger Wert
event.newValue Neuer Wert
event.url / event.uri Adresse des verändernden Dokuments
event.storageArea localStorage oder sessionStorage

Hinweis! Der Event wird nicht in dem Dokument ausgelöst, in dem
der Schreibzugriff erfolgt ist, sondern nur in allen anderen...!


Demo

Zweites Fenster


Canvas
Geolocation
Device Orientation
Notiﬁcations
WebSocket
WebWorker
Web Storage
Web SQL
Indexed DB
File API


Web SQL

Eingestellt zugunsten von Indexed DB!

Verbreitung: Chrome, Safari, Opera, Mobile Safari, Android

Relationale Datenbank

Einfaches, direktes API


Erläuterung zum Demo

var db;

function storeDB() {}
function deleteDB(what) {}
function retrieveDB() {}
function setupDB() {}

window.onload = function()
{
db = openDatabase( /* ... */ );
db.transaction(function(tx) {
tx.executeSql(
<SQL>,
[<Array of parameters>],
successCallback(tx, result),
errorCallback(tx, result)
);
});
}


Demo


Canvas
Geolocation
Device Orientation
Notiﬁcations
WebSocket
WebWorker
Web Storage
Web SQL
Indexed DB
File API


Indexed DB

Experimentell!

Verbreitung: Chrome, Firefox, IE10, kein Mobil-Browser

Vollständiger Name: Indexed Database API

NoSQL Datenbank

Keine starre Tabellenstruktur sondern Key/Value-Paare mit Objekten

Funktioniert nicht in dem Privacy-Modus (»privates Surfen« ö.ä.)

Schemagröße pro Origin variabel, mindestens 50MB


Genereller Ablauf, Terminologie

(1) Datenbank öffnen

(2) Wenn nicht vorhanden: Speicherbereich objectStore (≈ Tabellen in
SQL-Datenbanken) anlegen oder auf neue Version des Schemas updaten

(3) Datenbank-Operation

(1) Transaktion erzeugen, Typ festlegen: readonly, readwrite

(2) objectStore festlegen

(3) Anfrage ausführen: add(), delete(), openCursor()

(4) Den Abschluss der Operation mit Hilfe des richtigen Events
(onsuccess) überwachen

(5) Ergebnisse verarbeiten


Erläuterung zum Demo

var db;

function storeDB() {}
function deleteDB(what) {}
function retrieveDB() {}

window.onload = function()
{
/* ... */
request = window.indexedDB.open();
request.onerror = function(event) { /* ... */ }
request.onsuccess = function(event) { db = request.result; }
request.onupgradeneed = function(event) { /* setupDB */ }
}


Demo


Canvas
Geolocation
Device Orientation
Notiﬁcations
WebSocket
WebWorker
Web Storage
Web SQL
Indexed DB
File API


File API

window.ﬁle

window.FileReader

window.FileList

window.Blob

window.requestFileSystem derzeit nur Chrome

window.ﬁleEntry


File Reader API

Konstruktor new FileReader()

Abbruch des Ladevorgangs abort()

Datei laden readAsArrayBuffer(<file>)

readAsBinaryString(<file>)

readAsDataURL(<file>)

readAsText(<file>, <encoding>)

Events
onload Datei fertig geladen
onloadend Abschluss des Ladevorgangs
onloadstart Ladevorgang begonnen
onprogress Fortschritt erzielt
onabort, onerrer Abbruch oder Fehler


Demo: FileList


Demo: FileReader


Geschafft.

Canvas

Geolocation

Device Orientation

Notiﬁcations

WebSocket

WebWorker

Web Storage

Web SQL

Indexed DB

File API


Vielen Dank! Kochan & Partner
Brand
Design
Development

© 2013 – Alle Rechte vorbehalten.

Kochan & Partner GmbH
Hirschgartenallee 25
80639 München
Telefon +49 89 178 49 78
Fax +49 89 178 1235
kontakt@kochan.de
www.kochan.de

HTML5 für Entwickler: Part 1, 2 und 3, 2013

Weitere ähnliche Inhalte

Andere mochten auch

Ähnlich wie HTML5 für Entwickler: Part 1, 2 und 3, 2013

HTML5 für Entwickler: Part 1, 2 und 3, 2013