SlideShare ist ein Scribd-Unternehmen logo
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

Kochan & Partner Brand Design Development
4

Kochan & Partner Brand Design Development
Was ist HTML5 und was nicht

...
Quelle: Peter Kröner, http://html5-buch.de

Creative Commons Namensnennung 3.0 Deutschland-Lizenz

5

Kochan & Partner Brand Design Development
Update

Quelle: Peter Kröner, http://commons.wikipedia.org

Creative Commons Namensnennung 3.0 Deutschland-Lizenz

6

Kochan & Partner Brand Design Development
Was ist HTML5?

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

7

Kochan & Partner Brand Design Development
Was ist HTML5?

Semantic

Offline &
Storage

Multimedia

3D, Graphics
& Effects

Device

Performance &
Integration

Realtime &
Communication

CSS3

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

8

Kochan & Partner Brand Design Development
Unterstützung

9

Kochan & Partner Brand Design Development
Strategie

Graceful degredation
Progressive enhancement

10

Kochan & Partner Brand Design Development
Can I Use?

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

Quelle: http://caniuse.com

11

Kochan & Partner Brand Design Development
Hilfsmittel

Polyfills

12

Kochan & Partner Brand Design Development
IE–Quickfix (1)

window.document.createElement('section');

13

Kochan & Partner Brand Design Development
IE–Quickfix (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

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
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-Polyfills

17

Kochan & Partner Brand Design Development
–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

Kochan & Partner Brand Design Development
»Hidden Gems«

19

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
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

Beeinflussung Browser-Verhalten

sidebar, prefetch, 

nofollow, noreferrer

Typisierend

23

icon, stylesheet

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
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>
...

Kochan & Partner Brand Design Development
Einbindung svg und MathML (2)

Screenshots: Safari 6/Mac OS X

26

Kochan & Partner Brand Design Development
Standardisierung getElementsByClassName()
API
document.getElementsByClassName()
element.getElementsByClassName()

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

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

27

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
Frei definierbare 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

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
Zusammenfassung: Javascript

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

35

Kochan & Partner Brand Design Development
Part 1
Markup
36

Kochan & Partner Brand Design Development
Semantik
Formulare
Video & Audio
Application Cache
37

Kochan & Partner Brand Design Development
Semantik
Formulare
Video & Audio
Application Cache
38

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
DOCTYPE
<!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>

40

Kochan & Partner Brand Design Development
Auslassung
<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8“/>
<title>Hello world</title>
</head>
<!-- -->
<h1>Hello world</h1>
<p>Starting with HTML5</p>
<!-- -->
</html>

41

Kochan & Partner Brand Design Development
Well-formed oder nicht? Egal!
<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8“ >
<title>Hello world</title>
</head>
<body>
<h1>Hello world</h1>
<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

Kochan & Partner Brand Design Development
Neue Elemente
Kopf- und Fußbereiche

header, footer

Seitenabschnitte

section

Artikel

article

Navigationsbereiche

nav

Begleitende Informationen

aside

Abbildungen

figure, figcaption

Markierung

mark

43

Kochan & Partner Brand Design Development
Neue Elemente (2)
Uhrzeit

time

Menü

menu

Button/Checkbox/Radiobox

command

Fortschrittsanzeige

progress

Skala

meter

Detailansicht

details

Zusammenfassung einer Detailansicht

summary

44

Kochan & Partner Brand Design Development
Kopf- und Fußbereich: header, footer
Kopfbereich z.B. für Logo, Navigationsbereich
Beide Elemente pro Seite und pro Sektion definierbar
<header>
<a href="index.html" rel="index">Huber GmbH</a>
<nav>...</nav>
</header>

!
...

!
<footer>
&copy; 2014
<a href="imprint.html" rel="author">Impressum</a>
<a href="license.html" rel=“license”>Nutzung…</a>
</footer>

45

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
Fortschrittsanzeige: progress
Darstellung Betriebssystem-spezifisch
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

Kochan & Partner Brand Design Development
Skala: meter
Darstellung Betriebssystem-spezifisch
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

Kochan & Partner Brand Design Development
Outline-Algorithmus (1)

Beibehaltung des 6-stufiges Überschriften-Modell h1 bis h6
Hierarchie jedoch pro Sektion
Sektionen definiert durch section, nav, aside und article

55

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
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 definiert, wie diese nicht spezifizierten Elemente dargestellt werden sollen... :-)

58

Kochan & Partner Brand Design Development
A
R
I
A
59

Kochan & Partner Brand Design Development
Accesible
Rich
Internet
Application
60

Kochan & Partner Brand Design Development
WAI-ARIA

Implizite Rollen
Definierte Überschreibbarkeit
Explizite Attribute: Rollen, Beschriftungen, Zustände, ...

61

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
Microdata

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

Attribute

itemscope
itemprop
itemref

API

document.getItems()
element.properties
element.itemValue

64

Kochan & Partner Brand Design Development
Microdata: Google Rich Snippets

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

65

Kochan & Partner Brand Design Development
Microdata: Google Rich Snippets (2)

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

66

Kochan & Partner Brand Design Development
Zusammenfassung: Semantik

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

67

Kochan & Partner Brand Design Development
Semantik
Formulare
Video & Audio
Application Cache
68

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
Typ search
Eingabefeld für Suchen
Darstellung nach Art des Betriebssystems

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

Safari 6/Mac OS X

72

Kochan & Partner Brand Design Development
Typ Farbwahl / Colorpicker color
Leider noch kaum implementiert
Beispiel
<input type="color" />

Chrome 25/Mac OS X

Opera 12/Mac OS X

73

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
Neue Elemente
Erzeugung von Schlüsseln

keygen

Objekt

object

Ausgabebereich

output

Auto-Vervollständigung

datalist

75

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
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
Kochan & Partner Brand Design Development
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
Beeinflussung durch Attribute novalidate, required und pattern

z.B. pattern="[0-9]{5}"

79

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
Browser


Unterstützung?

81

Kochan & Partner Brand Design Development
Mac OS X

82

Kochan & Partner Brand Design Development
Windows 8

83

Kochan & Partner Brand Design Development
iOS (1)

84

Kochan & Partner Brand Design Development
iOS (2)

85

Kochan & Partner Brand Design Development
Windows Phone 8

86

Kochan & Partner Brand Design Development
Zusammenfassung: Formulare

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

87

Kochan & Partner Brand Design Development
Semantik
Formulare
Video & Audio
Application Cache
88

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
Multiple Quellen: Devices

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

93

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
Audio- und Video API: TimeRanges

Member
(Bereits) Durchsuchbarer Zeitraum

element.seekable

Abgespielter Zeitraum

element.played

Vorgelden (gepufferter) Zeitraum

element.buffered

[TimeRangeObject]

Anzahl der definierten Zeiträume

timerange.length

Startzeitpunkt von Zeitraum n

timerange.start(n)

Endzeitpunkt von Zeitraum n

timerange.end(n)

95

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
Semantik
Formulare
Video & Audio
Application Cache
102

Kochan & Partner Brand Design Development
Überblick Offline-Techniken

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

103

Kochan & Partner Brand Design Development
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

Kochan & Partner Brand Design Development
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
Auflistung jeder zu cachender Datei
Mehrere unterschiedliche 

Sektionen pro Cache-Datei möglich

!
!
!

105

Kochan & Partner Brand Design Development
Aufbau Cache Manifest (2)
cache.manifest
CACHE MANIFEST
# Comment your lines with "#"

!
# Cache these
index.html
img/assets/band.jpg
img/assets/instruments.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

Kochan & Partner Brand Design Development
Aufbau Cache Manifest (3)
cache.manifest
CACHE MANIFEST
# Comment your lines with "#"

!
# Cache these
index.html
img/assets/band.jpg
img/assets/instruments.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

Kochan & Partner Brand Design Development
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 befinden sich im Cache

updateready

Alle Dateien wurden aktualisiert und befinden 

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

Kochan & Partner Brand Design Development
Zusammenfassung: Application Cache

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

109

Kochan & Partner Brand Design Development
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

!

Weitere ähnliche Inhalte

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

SharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftSharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
David Schneider
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
Jürg Stuker
 
Microsoft und die Open Source Community - Leaving the death star behind
Microsoft und die Open Source Community - Leaving the death star behindMicrosoft und die Open Source Community - Leaving the death star behind
Microsoft und die Open Source Community - Leaving the death star behind
Christian Heilmann
 
My application as webdesigner and front-end developer
My application as webdesigner and front-end developerMy application as webdesigner and front-end developer
My application as webdesigner and front-end developer
christianschweinhardt
 
Responsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapResponsive Webdesign mit Bootstrap
Responsive Webdesign mit Bootstrap
Gregor Biswanger
 
Artikel im Swiss IT Magazine: Marktuebersicht Web-Agenturen
Artikel im Swiss IT Magazine: Marktuebersicht Web-AgenturenArtikel im Swiss IT Magazine: Marktuebersicht Web-Agenturen
Artikel im Swiss IT Magazine: Marktuebersicht Web-Agenturen
xeit AG
 
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
Stephan Hamberger
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Gregor Biswanger
 
Entwicklung mit Volt MX und Co. | Teil 1
Entwicklung mit Volt MX und Co. | Teil 1Entwicklung mit Volt MX und Co. | Teil 1
Entwicklung mit Volt MX und Co. | Teil 1
DNUG e.V.
 
Augmented Reality Workshop
Augmented Reality WorkshopAugmented Reality Workshop
Augmented Reality Workshop
argency
 
Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
Gewinnung von OPEN SOURCE Techniken für junge UnternehmenGewinnung von OPEN SOURCE Techniken für junge Unternehmen
Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
Bjoern Reinhold
 
Sharepoint Entwicklung
Sharepoint EntwicklungSharepoint Entwicklung
Sharepoint Entwicklung
heliossolutionsde
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
Conny Stier
 
elemente websolutions - Zusammenfassung T3DD09
elemente websolutions - Zusammenfassung T3DD09elemente websolutions - Zusammenfassung T3DD09
elemente websolutions - Zusammenfassung T3DD09
elemente websolutions
 
Software-Engineering in der Luft- und Raumfahrt mit Open-Source-Tools
Software-Engineering in der Luft- und Raumfahrt mit Open-Source-ToolsSoftware-Engineering in der Luft- und Raumfahrt mit Open-Source-Tools
Software-Engineering in der Luft- und Raumfahrt mit Open-Source-Tools
Andreas Schreiber
 
FMK2015: The Power of JavaScript by Marcel Moré
FMK2015: The Power of JavaScript by Marcel MoréFMK2015: The Power of JavaScript by Marcel Moré
FMK2015: The Power of JavaScript by Marcel Moré
Verein FM Konferenz
 
JAMstack / Static Site Generators
JAMstack / Static Site GeneratorsJAMstack / Static Site Generators
JAMstack / Static Site Generators
DietrichRordorf
 
Software Metrics and Continuous Integration
Software Metrics and Continuous IntegrationSoftware Metrics and Continuous Integration
Software Metrics and Continuous Integration
Milena Reichel
 
Shift Left fängt ganz links an
Shift Left fängt ganz links anShift Left fängt ganz links an
Shift Left fängt ganz links an
BATbern
 
Cloud Native Computing & DevOps
Cloud Native Computing & DevOpsCloud Native Computing & DevOps
Cloud Native Computing & DevOps
Aarno Aukia
 

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

SharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftSharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
 
Top 10 Internet Trends 2006
Top 10 Internet Trends 2006Top 10 Internet Trends 2006
Top 10 Internet Trends 2006
 
Microsoft und die Open Source Community - Leaving the death star behind
Microsoft und die Open Source Community - Leaving the death star behindMicrosoft und die Open Source Community - Leaving the death star behind
Microsoft und die Open Source Community - Leaving the death star behind
 
My application as webdesigner and front-end developer
My application as webdesigner and front-end developerMy application as webdesigner and front-end developer
My application as webdesigner and front-end developer
 
Responsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapResponsive Webdesign mit Bootstrap
Responsive Webdesign mit Bootstrap
 
Artikel im Swiss IT Magazine: Marktuebersicht Web-Agenturen
Artikel im Swiss IT Magazine: Marktuebersicht Web-AgenturenArtikel im Swiss IT Magazine: Marktuebersicht Web-Agenturen
Artikel im Swiss IT Magazine: Marktuebersicht Web-Agenturen
 
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
 
Entwicklung mit Volt MX und Co. | Teil 1
Entwicklung mit Volt MX und Co. | Teil 1Entwicklung mit Volt MX und Co. | Teil 1
Entwicklung mit Volt MX und Co. | Teil 1
 
Augmented Reality Workshop
Augmented Reality WorkshopAugmented Reality Workshop
Augmented Reality Workshop
 
Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
Gewinnung von OPEN SOURCE Techniken für junge UnternehmenGewinnung von OPEN SOURCE Techniken für junge Unternehmen
Gewinnung von OPEN SOURCE Techniken für junge Unternehmen
 
Sharepoint Entwicklung
Sharepoint EntwicklungSharepoint Entwicklung
Sharepoint Entwicklung
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
 
elemente websolutions - Zusammenfassung T3DD09
elemente websolutions - Zusammenfassung T3DD09elemente websolutions - Zusammenfassung T3DD09
elemente websolutions - Zusammenfassung T3DD09
 
Software-Engineering in der Luft- und Raumfahrt mit Open-Source-Tools
Software-Engineering in der Luft- und Raumfahrt mit Open-Source-ToolsSoftware-Engineering in der Luft- und Raumfahrt mit Open-Source-Tools
Software-Engineering in der Luft- und Raumfahrt mit Open-Source-Tools
 
FMK2015: The Power of JavaScript by Marcel Moré
FMK2015: The Power of JavaScript by Marcel MoréFMK2015: The Power of JavaScript by Marcel Moré
FMK2015: The Power of JavaScript by Marcel Moré
 
JAMstack / Static Site Generators
JAMstack / Static Site GeneratorsJAMstack / Static Site Generators
JAMstack / Static Site Generators
 
Software Metrics and Continuous Integration
Software Metrics and Continuous IntegrationSoftware Metrics and Continuous Integration
Software Metrics and Continuous Integration
 
Shift Left fängt ganz links an
Shift Left fängt ganz links anShift Left fängt ganz links an
Shift Left fängt ganz links an
 
Cloud Native Computing & DevOps
Cloud Native Computing & DevOpsCloud Native Computing & DevOps
Cloud Native Computing & DevOps
 

HTML5 für Entwickler: Part 1, 2014

  • 1. 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
  • 2. ! 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
  • 3. 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 Kochan & Partner Brand Design Development
  • 4. 4 Kochan & Partner Brand Design Development
  • 5. Was ist HTML5 und was nicht ... Quelle: Peter Kröner, http://html5-buch.de
 Creative Commons Namensnennung 3.0 Deutschland-Lizenz 5 Kochan & Partner Brand Design Development
  • 6. Update Quelle: Peter Kröner, http://commons.wikipedia.org
 Creative Commons Namensnennung 3.0 Deutschland-Lizenz 6 Kochan & Partner Brand Design Development
  • 7. Was ist HTML5? HTML 4.01 XHTML 1 W3C, WHATWG Nicht-Standard wird Standard 7 Kochan & Partner Brand Design Development
  • 8. Was ist HTML5? Semantic Offline & Storage Multimedia 3D, Graphics & Effects Device Performance & Integration Realtime & Communication CSS3 Quelle: http://www.w3.org/html/logo/ 8 Kochan & Partner Brand Design Development
  • 9. Unterstützung 9 Kochan & Partner Brand Design Development
  • 12. Hilfsmittel Polyfills 12 Kochan & Partner Brand Design Development
  • 14. IE–Quickfix (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 Kochan & Partner Brand Design Development
  • 15. 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 Kochan & Partner Brand Design Development
  • 16. 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 Kochan & Partner Brand Design Development
  • 17. 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-Polyfills 17 Kochan & Partner Brand Design Development
  • 18. –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 Kochan & Partner Brand Design Development
  • 19. »Hidden Gems« 19 Kochan & Partner Brand Design Development
  • 20. 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 Kochan & Partner Brand Design Development
  • 21. 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 Kochan & Partner Brand Design Development
  • 22. 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 Kochan & Partner Brand Design Development
  • 23. 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 Beeinflussung Browser-Verhalten sidebar, prefetch, 
 nofollow, noreferrer Typisierend 23 icon, stylesheet Kochan & Partner Brand Design Development
  • 24. 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 Kochan & Partner Brand Design Development
  • 25. 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> ... Kochan & Partner Brand Design Development
  • 26. Einbindung svg und MathML (2) Screenshots: Safari 6/Mac OS X 26 Kochan & Partner Brand Design Development
  • 27. Standardisierung getElementsByClassName() API document.getElementsByClassName() element.getElementsByClassName() Beispiele var allMyActiveDivs = document.getElementsByClassName('active'); ! var myOtherLis = myUl.getElementsByClassName('inactive'); 27 Kochan & Partner Brand Design Development
  • 28. 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 Kochan & Partner Brand Design Development
  • 29. 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 Kochan & Partner Brand Design Development
  • 30. 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 Kochan & Partner Brand Design Development
  • 31. 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 Kochan & Partner Brand Design Development
  • 32. Frei definierbare 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 Kochan & Partner Brand Design Development
  • 33. 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 Kochan & Partner Brand Design Development
  • 34. 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 Kochan & Partner Brand Design Development
  • 35. Zusammenfassung: Javascript HTML-Manipulation mittels innerHTML, outerHTML, insertAdjacentHTML Standardisierung getElementsByClassName() querySelector API: querySelector(), querySelectorAll() matchMedia API: matchMedia().matches ClassList API Frei definierbare Attribute mit data-* History API 35 Kochan & Partner Brand Design Development
  • 36. Part 1 Markup 36 Kochan & Partner Brand Design Development
  • 37. Semantik Formulare Video & Audio Application Cache 37 Kochan & Partner Brand Design Development
  • 38. Semantik Formulare Video & Audio Application Cache 38 Kochan & Partner Brand Design Development
  • 39. 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 Kochan & Partner Brand Design Development
  • 40. DOCTYPE <!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> 40 Kochan & Partner Brand Design Development
  • 41. Auslassung <!DOCTYPE html> <html> <head> <meta charset=“utf-8“/> <title>Hello world</title> </head> <!-- --> <h1>Hello world</h1> <p>Starting with HTML5</p> <!-- --> </html> 41 Kochan & Partner Brand Design Development
  • 42. Well-formed oder nicht? Egal! <!DOCTYPE html> <html> <head> <meta charset=“utf-8“ > <title>Hello world</title> </head> <body> <h1>Hello world</h1> <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 Kochan & Partner Brand Design Development
  • 43. Neue Elemente Kopf- und Fußbereiche header, footer Seitenabschnitte section Artikel article Navigationsbereiche nav Begleitende Informationen aside Abbildungen figure, figcaption Markierung mark 43 Kochan & Partner Brand Design Development
  • 45. Kopf- und Fußbereich: header, footer Kopfbereich z.B. für Logo, Navigationsbereich Beide Elemente pro Seite und pro Sektion definierbar <header> <a href="index.html" rel="index">Huber GmbH</a> <nav>...</nav> </header> ! ... ! <footer> &copy; 2014 <a href="imprint.html" rel="author">Impressum</a> <a href="license.html" rel=“license”>Nutzung…</a> </footer> 45 Kochan & Partner Brand Design Development
  • 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> ... 46 Kochan & Partner Brand Design Development
  • 47. 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 Kochan & Partner Brand Design Development
  • 48. 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 Kochan & Partner Brand Design Development
  • 49. 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 Kochan & Partner Brand Design Development
  • 50. 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 Kochan & Partner Brand Design Development
  • 51. 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 Kochan & Partner Brand Design Development
  • 52. 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 Kochan & Partner Brand Design Development
  • 53. Fortschrittsanzeige: progress Darstellung Betriebssystem-spezifisch 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 Kochan & Partner Brand Design Development
  • 54. Skala: meter Darstellung Betriebssystem-spezifisch 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 Kochan & Partner Brand Design Development
  • 55. Outline-Algorithmus (1) Beibehaltung des 6-stufiges Überschriften-Modell h1 bis h6 Hierarchie jedoch pro Sektion Sektionen definiert durch section, nav, aside und article 55 Kochan & Partner Brand Design Development
  • 56. 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 Kochan & Partner Brand Design Development
  • 57. 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 Kochan & Partner Brand Design Development
  • 58. 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 definiert, wie diese nicht spezifizierten Elemente dargestellt werden sollen... :-) 58 Kochan & Partner Brand Design Development
  • 59. A R I A 59 Kochan & Partner Brand Design Development
  • 61. WAI-ARIA Implizite Rollen Definierte Überschreibbarkeit Explizite Attribute: Rollen, Beschriftungen, Zustände, ... 61 Kochan & Partner Brand Design Development
  • 62. 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 Kochan & Partner Brand Design Development
  • 63. 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 Kochan & Partner Brand Design Development
  • 64. Microdata RDFa microformats.org HTML5-Microdata: vCard, vEvent, work Attribute itemscope itemprop itemref API document.getItems() element.properties element.itemValue 64 Kochan & Partner Brand Design Development
  • 65. Microdata: Google Rich Snippets Quelle: http://support.google.com/webmasters/bin/answer.py?hl=de&answer=99170 65 Kochan & Partner Brand Design Development
  • 66. Microdata: Google Rich Snippets (2) Quelle: http://www.google.com/webmasters/tools/richsnippet 66 Kochan & Partner Brand Design Development
  • 67. Zusammenfassung: Semantik Syntax: doctype, well formed, Auslassung Neue Elemente Umdeutung/Änderung bestehender Elemente Entfernte Elemente Outline-Algorithmus WAI-ARIA Microdata 67 Kochan & Partner Brand Design Development
  • 68. Semantik Formulare Video & Audio Application Cache 68 Kochan & Partner Brand Design Development
  • 69. 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 Kochan & Partner Brand Design Development
  • 70. 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 Kochan & Partner Brand Design Development
  • 71. 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 Kochan & Partner Brand Design Development
  • 72. Typ search Eingabefeld für Suchen Darstellung nach Art des Betriebssystems Beispiel <input type="search" placeholder="Suche" /> Safari 6/Mac OS X 72 Kochan & Partner Brand Design Development
  • 73. Typ Farbwahl / Colorpicker color Leider noch kaum implementiert Beispiel <input type="color" /> Chrome 25/Mac OS X Opera 12/Mac OS X 73 Kochan & Partner Brand Design Development
  • 74. 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 Kochan & Partner Brand Design Development
  • 75. Neue Elemente Erzeugung von Schlüsseln keygen Objekt object Ausgabebereich output Auto-Vervollständigung datalist 75 Kochan & Partner Brand Design Development
  • 76. 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 Kochan & Partner Brand Design Development
  • 77. 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 Kochan & Partner Brand Design Development
  • 78. 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 Kochan & Partner Brand Design Development
  • 79. 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 Beeinflussung durch Attribute novalidate, required und pattern
 z.B. pattern="[0-9]{5}" 79 Kochan & Partner Brand Design Development
  • 80. 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 Kochan & Partner Brand Design Development
  • 82. Mac OS X 82 Kochan & Partner Brand Design Development
  • 83. Windows 8 83 Kochan & Partner Brand Design Development
  • 84. iOS (1) 84 Kochan & Partner Brand Design Development
  • 85. iOS (2) 85 Kochan & Partner Brand Design Development
  • 86. Windows Phone 8 86 Kochan & Partner Brand Design Development
  • 87. Zusammenfassung: Formulare Neue Typen für input Neue Elemente und Attribute Validierung und Validation API Browser-Unterstützung 87 Kochan & Partner Brand Design Development
  • 88. Semantik Formulare Video & Audio Application Cache 88 Kochan & Partner Brand Design Development
  • 89. 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 Kochan & Partner Brand Design Development
  • 90. 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 Kochan & Partner Brand Design Development
  • 91. 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 Kochan & Partner Brand Design Development
  • 92. 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 Kochan & Partner Brand Design Development
  • 93. Multiple Quellen: Devices Media-spezifisch <video> <source src="small.ogg" media="handheld" /> <source src="high-res.ogg" media="all" /> </video> 93 Kochan & Partner Brand Design Development
  • 94. 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 Kochan & Partner Brand Design Development
  • 95. Audio- und Video API: TimeRanges Member (Bereits) Durchsuchbarer Zeitraum element.seekable Abgespielter Zeitraum element.played Vorgelden (gepufferter) Zeitraum element.buffered [TimeRangeObject] Anzahl der definierten Zeiträume timerange.length Startzeitpunkt von Zeitraum n timerange.start(n) Endzeitpunkt von Zeitraum n timerange.end(n) 95 Kochan & Partner Brand Design Development
  • 96. 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 Kochan & Partner Brand Design Development
  • 97. 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 Kochan & Partner Brand Design Development
  • 98. 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 Kochan & Partner Brand Design Development
  • 99. 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 Kochan & Partner Brand Design Development
  • 100. 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 Kochan & Partner Brand Design Development
  • 101. 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 Kochan & Partner Brand Design Development
  • 102. Semantik Formulare Video & Audio Application Cache 102 Kochan & Partner Brand Design Development
  • 103. Überblick Offline-Techniken Application Cache DOM Storage Web SQL IndexedDB User Data On-/Offline-Events und -Status-Abfrage 103 Kochan & Partner Brand Design Development
  • 104. 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 Kochan & Partner Brand Design Development
  • 105. 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 Auflistung jeder zu cachender Datei Mehrere unterschiedliche 
 Sektionen pro Cache-Datei möglich ! ! ! 105 Kochan & Partner Brand Design Development
  • 106. Aufbau Cache Manifest (2) cache.manifest CACHE MANIFEST # Comment your lines with "#" ! # Cache these index.html img/assets/band.jpg img/assets/instruments.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 Kochan & Partner Brand Design Development
  • 107. Aufbau Cache Manifest (3) cache.manifest CACHE MANIFEST # Comment your lines with "#" ! # Cache these index.html img/assets/band.jpg img/assets/instruments.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 Kochan & Partner Brand Design Development
  • 108. 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 befinden sich im Cache updateready Alle Dateien wurden aktualisiert und befinden 
 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 Kochan & Partner Brand Design Development
  • 109. Zusammenfassung: Application Cache HTML-Einbindung, Mime-Type Aufbau Cache Manifest: CACHE MANIFEST, NETWORK, FALLBACK Javascript Events zur Cache Überwachung 109 Kochan & Partner Brand Design Development
  • 110. 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 !