HTML5 für Entwickler: Part 1, 2014

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
1. Teil
!
Markus Greve
Für den Abendkurs der Typographischen
Gesellschaft München, 2014

Kochan & Partner
Brand
Design
Development

!
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

30.01. Einführung
Hidden Gems 
Part 1: Markup
!
06.02. Part 2: CSS 
13.02. Part 3: Javascript 
20.02. Hack-a-thon: Thema offen!

Hack-a-tho
n 2013

3


4


Was ist HTML5 und was nicht

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

5


Update

Quelle: Peter Kröner, http://commons.wikipedia.org 
Creative Commons Namensnennung 3.0 Deutschland-Lizenz

6


Was ist HTML5?

HTML 4.01
XHTML 1
W3C, WHATWG
Nicht-Standard wird Standard

7


Was ist HTML5?

Semantic

Ofﬂine &
Storage

Multimedia

3D, Graphics
& Effects

Device

Performance &
Integration

Realtime &
Communication

CSS3

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

8


Unterstützung

9


Strategie

Graceful degredation
Progressive enhancement

10


Can I Use?

Suche
Volle/teilweise
Unterstützung
Detaillierte
Versionsinfo
Weiterführende
Informationen,
Referenz

Quelle: http://caniuse.com

11


Hilfsmittel

Polyﬁlls

12


IE–Quickﬁx (1)

window.document.createElement('section');

13


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/

14


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/

15


normalize.css
A modern, HTML5-ready alternative to CSS resets 
… as used by Twitter, TweetDeck, GitHub, Soundcloud,
Rdio, Bootstrap, HTML5 Boilerplate, YUI 3, …

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


Modernizr
The All-In-One Entirely-Not-Alphabetical NoBullshit 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

17


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

18


»Hidden Gems«

19


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/css“

20


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>

21


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>

22


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

23

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();
}

24


Einbindung svg und MathML (1)
<!DOCTYPE html>
...
<body>
<svg width="300" height="150">
<rect
width="120" height="120"
fill="green"
stroke="red"
stroke-width="10" />
<circle
cx="120" cy="65" r="40"
fill="red"
stroke="green"
stroke-width="5" />
</svg>
</body>
...

!
!
!
!

25

<!DOCTYPE html>
...
<body>
<math>
<mrow>
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mo form="prefix">
&PlusMinus;</mo>
<mi>b</mi>
<mo>&PlusMinus;</mo>
<msqrt>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>-</mo>
<mn>4</mn>
...


Einbindung svg und MathML (2)

Screenshots: Safari 6/Mac OS X

26


Standardisierung getElementsByClassName()
API
document.getElementsByClassName()
element.getElementsByClassName()

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

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

27


querySelector API

API
document.querySelector(<CSS Selector>);
document.querySelectorAll(<CSS Selector>);

// first match
// all matches

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

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

28


matchMedia API

API
// true, when media query matches
window.matchMedia(<CSS Media Query>).matches;

Beispiel: Plattform-unabhängige Ermittlung der Orientierung
if (window.matchMedia('(orientation: portrait)').matches)
alert('Hochkant!');

Beispiel: http://lab.kochan.de/mg/device/

29


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>');

30


Class List API
API
element.classList.length
.add()
.contains()
.item()
.remove()
.toggle()

Beispiele
myDiv.classList.add('active');
myDiv.classList.remove('active');
myDiv.classList.toggle('active');

// 'active' is added
// 'active' is removed
// add or remove

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

31


Frei deﬁnierbare Attribute: data-*

Attribute
API

data-*
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"

32


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
// ...
};

33


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

34


Zusammenfassung: Javascript

HTML-Manipulation mittels innerHTML, outerHTML, insertAdjacentHTML
Standardisierung getElementsByClassName()
querySelector API: querySelector(), querySelectorAll()
matchMedia API: matchMedia().matches
ClassList API
Frei deﬁnierbare Attribute mit data-*
History API

35


Part 1
Markup
36


Semantik
Formulare
Video & Audio
Application Cache
37


Semantik
Formulare
Video & Audio
Application Cache
38


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>

39


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

40


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


</html>

41

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>

42


Neue Elemente
Kopf- und Fußbereiche

header, footer

Seitenabschnitte

section

Artikel

article

Navigationsbereiche

nav

Begleitende Informationen

aside

Abbildungen

figure, figcaption

Markierung

mark

43


Neue Elemente (2)
Uhrzeit

time

Menü

menu

Button/Checkbox/Radiobox

command

Fortschrittsanzeige

progress

Skala

meter

Detailansicht

details

Zusammenfassung einer Detailansicht

summary

44


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>
© 2014
<a href="imprint.html" rel="author">Impressum</a>
<a href="license.html" rel=“license”>Nutzung…</a>
</footer>

45


Artikel und Sinnabschnitte: article und section
<body>
<article>
...
<article>
<section class="intro">

Zusammenfassung inhaltlich
abgeschlossener Bereiche durch
article

<section class="copy">

Inhaltliche Strukturierung der Seite
bzw. des Artikels durch section

<article>
...
46


Artikel und Sinnabschnitte: article und section
<body>
<article>
...
<article>
<section class="intro">

Zusammenfassung inhaltlich
abgeschlossener Bereiche durch
article

<section class="copy">

Inhaltliche Strukturierung der Seite
bzw. des Artikels durch section

<article>
...
47


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>
…
<footer>
<nav>
<a href="imprint.html" rel="author">Impressum</a>
<a href="license.html" rel=“license”>Nutzung…</a>

48


Begleitende Informationen: aside
<body>
<article>
<section>

<section>

<aside>

!

!

Verwandte
Themen
Ganz
andere
Themen
...

</aside>
<aside>

Innerhalb eines articles:  
sekundärer Inhalt in Bezug  
auf den Artikel
Außerhalb eines articles:  
sekundärer Inhalt in Bezug  
auf die Website als Ganzes

Mehr zu
diesem
Thema

</aside>

49


Abbildungen: figure und figcaption
<body>
<article>

Semantische Einheit für eine
Abbildung figure, z.B. ein Bild, eine
Tabelle oder ein Diagramm, mit
optionaleer Abbildungsbeschriftung
figcaption.
Reihenfolge der Darstellung kann
ohne Verständnisverlust verändert
werden.

<section>
<figure>
<img src=""... />
<svg... />
<figcaption>
Quelle: BMW AG.
</figcaption>
</figure>
<section>

50


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>

51


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
52


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

53


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

54


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

55


Outline-Algorithmus (2)
Beispiel
<h1>Agenda</h1>
<section>
<h1>Begrüßung</h1>
<h2>Schirmherr</h2>
<h2>Sponsorenvertreter</h2>
<h1>Top 1: Gruppen</h1>
<h1>Top 2: Plenung</h1>
</section>
<h1>Anlagen</h1>

56

1. Agenda
1.1 Begrüßung
1.1.1 Schirmherr
1.1.2 Sponsorenvertreter
1.2 Top 1: Gruppen
1.3 Top 2: Plenum
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

57


Entfernte Elemente
Frames

frameset, frame, noframes

Präsentationselemente

dir, basefont, big, center,
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... :-)

58


A
R
I
A
59


Accesible
Rich
Internet
Application
60


WAI-ARIA

Implizite Rollen
Deﬁnierte Überschreibbarkeit
Explizite Attribute: Rollen, Beschriftungen, Zustände, ...

61


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

!

62


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/

63


Microdata

RDFa
microformats.org
HTML5-Microdata: vCard, vEvent, work

Attribute

itemscope
itemprop
itemref

API

document.getItems()
element.properties
element.itemValue

64


Microdata: Google Rich Snippets

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

65


Microdata: Google Rich Snippets (2)

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

66


Zusammenfassung: Semantik

Syntax: doctype, well formed, Auslassung
Neue Elemente
Umdeutung/Änderung bestehender Elemente
Entfernte Elemente
Outline-Algorithmus
WAI-ARIA
Microdata

67


Semantik
Formulare
Video & Audio
Application Cache
68


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

69


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

70


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

71


Typ search
Eingabefeld für Suchen
Darstellung nach Art des Betriebssystems

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

Safari 6/Mac OS X

72


Typ Farbwahl / Colorpicker color
Leider noch kaum implementiert
Beispiel
<input type="color" />

Chrome 25/Mac OS X

Opera 12/Mac OS X

73


Typ für Datum- und Zeitangaben
Validierung, optional mit Beschränkung min und max
Beispiele
<input
<input
<input
<input
<input
<input

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

Chrome 25/Mac OS X
74


Neue Elemente
Erzeugung von Schlüsseln

keygen

Objekt

object

Ausgabebereich

output

Auto-Vervollständigung

datalist

75


Auto-Vervollständigung: datalist

Beispiel
<input list="albums" />

!
<datalist
<option
<option
<option
<option
<option
<option
<option
<option
<option
<option
...

76

id="albums">
value="Queen" />
value="Queen II" />
value="Sheer Heart...
value="A Night At ...
value="A Day At Th...
value="The Game" ...
value="The Works" />
value="A kind of m...
value="The Miracle"
value="Innuendo" />

Chrome 25/Mac OS X


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

77


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

Validierung 
Post

standard.php
78

Anderswohin

Validierung 
Post

alternate.php

Ohne Prüfung

keine Validierung 
Post

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}"

79


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

80


Browser 

Unterstützung?

81


Mac OS X

82


Windows 8

83


iOS (1)

84


iOS (2)

85


Windows Phone 8

86


Zusammenfassung: Formulare

Neue Typen für input
Neue Elemente und Attribute
Validierung und Validation API
Browser-Unterstützung

87


Semantik
Formulare
Video & Audio
Application Cache
88


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-theraces.ogg">Datei herunterzuladen</a>.
</audio>

89


Audio-Attribute
Beispiel

<audio
src="audio.ogg#t=10,20"
controls
autoplay
preload="auto"
loop
>
...
</audio>

90

Quellenangabe: src,  
hier mit Framestart und -ende #t=
Steuerelemente: controls
Automatisches abspielen: autoplay
Preload-Verhalten:  
none, metadata, auto
Wiederholte Wiedergabe: loop


Video-Attribute
Beispiel
Quellenangabe: src
<video
src="video.ogg"
controls
autoplay
preload="auto"
loop
width="640" height="480"
audio="muted"
poster="videoframe.jpg"
>
...
</video>

Steuerelemente: controls
Automatisches abspielen: autoplay
Preload-Verhalten:  
none, metadata, auto
Wiederholte Wiedergabe: loop
Dimensionen: width und height
Audio-Steuerung: audio="muted"
Thumbnail: poster

91


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>

92


Multiple Quellen: Devices

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

93


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)

94

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)

95


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;
}

96


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!'); });

97


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

98


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

3 HAVE_FUTURE_DATA

Daten für aktuelle Position und die
nächstenSekunden liegen vor,
abspielen kann starten

4 HAVE_ENOUGH_DATA

Entweder komplett geladen oder
Abschätzung aufgrund aktueller
Netzwerkperformance ok

99


And The Oscar Goes To...

Firefox  
3.5+

Safari  
4+

Chrome  
3+

Opera  
10.5+

IE 
6–8

IE 
9

ü

—

ü

ü

—

—

ü 21*

ü

ü

—

—

ü

MP3

—

ü

ü

—

—

ü

WAV

ü

ü

ü

ü

—

—

ü 4+

—

ü

ü 10.6+

—

—

Theora/Vorbis
H.264/AAC

WebM

* Nur Windows, Linux teilweise, Mac OS X nicht

100


Zusammenfassung: Audio- und Video

Einbindung
Audio- und Video-Attribute
Multiple Quellen
Audio- und Video API: Member, Methoden und Events
Fehlerbehandlung: error, networkState, readyState
Codecs

101


Semantik
Formulare
Video & Audio
Application Cache
102


Überblick Ofﬂine-Techniken

Application Cache
DOM Storage
Web SQL
IndexedDB
User Data
On-/Ofﬂine-Events und -Status-Abfrage

103


HTML-Einbindung
index.html

<html  
manifest="cache.manifest">
<head>
<title>The Works offline...
</head>
...
</html>

104

Referenzierung der Manifest- 
Datei im HTML-Element
Auslieferung der Datei mit dem
Mime-Type: text/cache-manifest


Aufbau Cache Manifest (1)
cache.manifest
CACHE MANIFEST
# Comment your lines with "#"

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

Einleitung der zu cachenden Dateien
mit CACHE MANIFEST
Auﬂistung jeder zu cachender Datei
Mehrere unterschiedliche  
Sektionen pro Cache-Datei möglich

!
!
!

105


cache.manifest
CACHE MANIFEST

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

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

!
!
Festlegung von Inhalten, die nur  
über eine Netzwerkverbindung
bezogen werden dürfen (= no cache)

!

106


cache.manifest
CACHE MANIFEST

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

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

!
FALLBACK
/ sorry-you-are-offline.html

107

Alternativ-Inhalte zur Ausgabe bei
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

108


Zusammenfassung: Application Cache

HTML-Einbindung, Mime-Type
Aufbau Cache Manifest: CACHE MANIFEST, NETWORK, FALLBACK
Javascript Events zur Cache Überwachung

109


Vielen Dank!

Kochan & Partner
Brand
Design
Development

© 2014 – 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, 2014

Weitere ähnliche Inhalte

Ähnlich wie HTML5 für Entwickler: Part 1, 2014 (20)

HTML5 für Entwickler: Part 1, 2014