html5 für entwickler: part 1, 2014
DESCRIPTION
Die für 2014 leicht aktualisierte Präsentation vom ersten Tag des diesjährigen HTML5 Seminars der tgm mit den Themen: – Hidden Gems – Semantik – Formulare – Audio & Video – Application cacheTRANSCRIPT
Kochan & PartnerBrandDesignDevelopment
HTML5 für Entwickler 1. Teil !Markus Greve Für den Abendkurs der Typographischen
Gesellschaft München, 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
Kochan & Partner Brand Design Development 2
Demos, Links, Ressourcen http://www.kochan.de/html5 Slides http://de.slideshare.net/markusgreve/
! Markus Greve KOCHAN & PARTNER BRAND DESIGN DEVELOPMENT ! T +49 89 17860–150 E [email protected] @mrmontezuma
Kochan & Partner Brand Design Development
Organisatorisches
3
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-thon 2013
Kochan & Partner Brand Design Development 4
Kochan & Partner Brand Design Development
Was ist HTML5 und was nicht
5
...Quelle: Peter Kröner, http://html5-buch.deCreative Commons Namensnennung 3.0 Deutschland-Lizenz
Kochan & Partner Brand Design Development 6
Quelle: Peter Kröner, http://commons.wikipedia.orgCreative Commons Namensnennung 3.0 Deutschland-Lizenz
Update
Kochan & Partner Brand Design Development
Was ist HTML5?
7
HTML 4.01
XHTML 1
W3C, WHATWG
Nicht-Standard wird Standard
Kochan & Partner Brand Design Development
Was ist HTML5?
8
Semantic
Quelle: http://www.w3.org/html/logo/
Offline & Storage Device
Realtime & Communication
Multimedia3D, Graphics
& EffectsPerformance &
Integration CSS3
Kochan & Partner Brand Design Development
Unterstützung
9
Kochan & Partner Brand Design Development
Strategie
10
Graceful degredation
Progressive enhancement
Kochan & Partner Brand Design Development
Can I Use?
11
Suche
Volle/teilweise Unterstützung
Detaillierte Versionsinfo
Weiterführende Informationen, Referenz
Quelle: http://caniuse.com
Kochan & Partner Brand Design Development
Hilfsmittel
12
Polyfills
Kochan & Partner Brand Design Development
IE–Quickfix (1)
13
window.document.createElement('section');
Kochan & Partner Brand Design Development
IE–Quickfix (2)
14
Sinngemäße Quelle: http://code.google.com/p/html5shiv/
'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)});
Kochan & Partner Brand Design Development
Standard Stylesheet Hack
15
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/
Kochan & Partner Brand Design Development
normalize.css
16
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/
Kochan & Partner Brand Design Development
Modernizr
17
The All-In-One Entirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks
—Modernizr
Quelle: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
SVG
Canvas
Web Storage
Video & Audio
IndexedDB, WebSQL
WebForms
Accessiblity / ARIA
Web Sockets
Geo Location
Application Cache
Browser State Management
....
Kochan & Partner Brand Design Development
–prefix–free
18
–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/
Kochan & Partner Brand Design Development 19
»Hidden Gems«
Kochan & Partner Brand Design Development
Standard-Typen für script und style
20
type=“text/javascript“ language=“javascript“
Standard-Wert für das script-Tag
type=“text/css“
Standard-Wert für das style-Tag
Kochan & Partner Brand Design Development
Skript-Ausführungsverhalten mit defer, async
21
Beispiel
<script defer> // code that runs after DOM finished loading // ... </script> !<script async> // code that runs in the background // not blocking other scripts // ... </script>
Kochan & Partner Brand Design Development
a, area und link (1)
22
<a target=“_blank“>Link ohne Ziel und Verstand</a> !<a href=“http://www.google.de“ rel=“prefetch“> Descriptiver Rel-Einsatz
</a>
Vereinheitlichung von a, area und link
Umschließung
Wiederbelebung target, optionales href-Attribut
Typisierung mittels rel
Beispiel
Kochan & Partner Brand Design Development
a, area und link (2)
23
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 icon, stylesheet
Kochan & Partner Brand Design Development
Fokus
24
<input type="text" name="search" autofocus />
Auto-Fokus erlaubt für input, select, textarea und button
Standardisierung der Fokus-Ermittlung
Auto-Fokus
if (document.hasFocus()) {
var element = document.activeElement(); }
Fokus-Ermittlung
Kochan & Partner Brand Design Development
Einbindung svg und MathML (1)
25
<!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>
... !!!!
<!DOCTYPE html> ...
<body> <math>
<mrow> <mi>x</mi> <mo>=</mo> <mfrac>
<mrow> <mo form="prefix">
±</mo> <mi>b</mi> <mo>±</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)
26
Screenshots: Safari 6/Mac OS X
Kochan & Partner Brand Design Development
Standardisierung getElementsByClassName()
27
document.getElementsByClassName() element.getElementsByClassName()
API
var allMyActiveDivs = document.getElementsByClassName('active'); !var myOtherLis = myUl.getElementsByClassName('inactive');
Beispiele
Kochan & Partner Brand Design Development
querySelector API
28
document.querySelector(<CSS Selector>); // first match document.querySelectorAll(<CSS Selector>); // all matches
var oddRows = document.querySelectorAll('#table > tr:nth-child(odd)');
Randnotiz: w3C Standard seit vergangenem Freitag, 22. Februar 2013
Beispiel
API
Kochan & Partner Brand Design Development
matchMedia API
29
// true, when media query matches window.matchMedia(<CSS Media Query>).matches;
if (window.matchMedia('(orientation: portrait)').matches) alert('Hochkant!');
Beispiel: http://lab.kochan.de/mg/device/
Beispiel: Plattform-unabhängige Ermittlung der Orientierung
API
Kochan & Partner Brand Design Development
HTML-Manipulation
30
element.innerHTML element.outerHTML element.insertAdjacentHTML(<position>, <html>) <position> := 'beforebegin' 'afterbegin' 'beforeend' 'afterend'
API
myUl.innerHTML = '<li>New Bullet</li>'; myUl.outerHTML = '<ul><li>New Bullet</li></ul>'; !myLi.insertAdjacentHTML('beforebegin', '<li>Vorgänger</li>');
Beispiele
Kochan & Partner Brand Design Development
Class List API
31
element.classList.length .add() .contains() .item() .remove() .toggle()
API
myDiv.classList.add('active'); // 'active' is added myDiv.classList.remove('active'); // 'active' is removed myDiv.classList.toggle('active'); // add or remove !if (myDiv.classList.contains('active')) alert('Aktiv!')
Beispiele
Kochan & Partner Brand Design Development
Frei definierbare Attribute: data-*
32
Attribute data-*
API element.dataset
<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"
Beispiel
Kochan & Partner Brand Design Development
History API
33
history.length .back() .forward() .go(<delta>) .state .pushState(<stateObj>, <title>, <url>) .replaceState() !window.onpopstate = function(e) { // code to be executed after browser-back button // ... };
API
Kochan & Partner Brand Design Development
Zusammenfassung: Markup
34
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
Brand Design Development
Kochan & Partner Brand Design Development
Zusammenfassung: Javascript
35
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
Brand Design Development
Kochan & Partner Brand Design Development 36
Part 1 Markup
Kochan & Partner Brand Design Development 37
Semantik Formulare Video & Audio Application Cache
Kochan & Partner Brand Design Development 38
Semantik Formulare Video & Audio Application Cache
Kochan & Partner Brand Design Development
Grundgerüst
39
<!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>
Kochan & Partner Brand Design Development
DOCTYPE
40
<!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>
Kochan & Partner Brand Design Development
Auslassung
41
<!DOCTYPE html> <html>
<head> <meta charset=“utf-8“/> <title>Hello world</title>
</head> <!-- -->
<h1>Hello world</h1> <p>Starting with HTML5</p>
<!-- --> </html>
Kochan & Partner Brand Design Development
Well-formed oder nicht? Egal!
42
<!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>
Kochan & Partner Brand Design Development
Neue Elemente
43
Kopf- und Fußbereiche header, footer
Seitenabschnitte section
Artikel article
Navigationsbereiche nav
Begleitende Informationen aside
Abbildungen figure, figcaption
Markierung mark
Kochan & Partner Brand Design Development
Neue Elemente (2)
44
Uhrzeit time
Menü menu
Button/Checkbox/Radiobox command
Fortschrittsanzeige progress
Skala meter
Detailansicht details
Zusammenfassung einer Detailansicht summary
Kochan & Partner Brand Design Development
Kopf- und Fußbereich: header, footer
45
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> © 2014 <a href="imprint.html" rel="author">Impressum</a> <a href="license.html" rel=“license”>Nutzung…</a> </footer>
Kochan & Partner Brand Design Development
Artikel und Sinnabschnitte: article und section
46
Zusammenfassung inhaltlich abgeschlossener Bereiche durch article
Inhaltliche Strukturierung der Seite bzw. des Artikels durch section
<body>
<article>
<article> ...
<article> ...
<section class="intro">
<section class="copy">
Kochan & Partner Brand Design Development
Artikel und Sinnabschnitte: article und section
47
Zusammenfassung inhaltlich abgeschlossener Bereiche durch article
Inhaltliche Strukturierung der Seite bzw. des Artikels durch section
<body>
<article>
<article> ...
<article> ...
<section class="intro">
<section class="copy">
Kochan & Partner Brand Design Development
Navigationsbereiche: nav
48
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>
Kochan & Partner Brand Design Development
Begleitende Informationen: aside
49
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
<body>
<article>
<section>
<aside> Verwandte Themen ! Ganz andere Themen ! ...
</aside>
<section>
<aside> Mehr zu diesem Thema
</aside>
Kochan & Partner Brand Design Development
Abbildungen: figure und figcaption
50
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.
<body>
<article>
<section>
<figure> <img src=""... /> <svg... /> <figcaption> Quelle: BMW AG. </figcaption> </figure>
<section>
Kochan & Partner Brand Design Development
Zeitangaben: time
51
Maschinenlesbare Kodierung von Zeitangaben des proleptischen Gregorianischen Kalenders
Datumsangabe, Uhrzeit oder eine Kombination aus Datum und Uhrzeit
optional: Kennzeichnung als Veröffentlichungszeitangabe
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>
Beispiele
Kochan & Partner Brand Design Development
Markierung: mark
52
Hervorhebung von Text ohne inhaltliche Betonung
Nutzbar insbesondere (ausschließlich?) für Suchergebnisse (SERP)
<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>
Beispiel
Ihre Suche nach entertain:
• Let me entertain you: Queen, Jazz, 1978
• That's Entertainment: Band Waggon, 1953
Kochan & Partner Brand Design Development
Fortschrittsanzeige: progress
53
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
Firefox 10 /Windows Non-Aqua
Internet Explorer/Windows Phone 8
Kochan & Partner Brand Design Development
Skala: meter
54
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
Kochan & Partner Brand Design Development
Outline-Algorithmus (1)
55
Beibehaltung des 6-stufiges Überschriften-Modell h1 bis h6
Hierarchie jedoch pro Sektion
Sektionen definiert durch section, nav, aside und article
Kochan & Partner Brand Design Development
Outline-Algorithmus (2)
56
<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>
Beispiel
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
57
Hervorhebung em, strong
Abkürzung und Akronym abbr
Quellcode code
Adresse address
Gleichwertige Abhebung, Fachbegriffe b, i
Inhaltlicher Bruch hr
»Kleingedrucktes« small
Kochan & Partner Brand Design Development
Entfernte Elemente
58
Frames frameset, frame, noframes
Präsentationselementedir, 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... :-)
Kochan & Partner Brand Design Development 59
A R I A
Kochan & Partner Brand Design Development 60
Accesible Rich Internet Application
Kochan & Partner Brand Design Development
WAI-ARIA
61
Implizite Rollen
Definierte Überschreibbarkeit
Explizite Attribute: Rollen, Beschriftungen, Zustände, ...
Kochan & Partner Brand Design Development
Implizite Rollen und Überschreibung
62
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
Kochan & Partner Brand Design Development
Explizite Rollenzuweisung
63
<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/
Kochan & Partner Brand Design Development
Microdata
64
RDFa
microformats.org
HTML5-Microdata: vCard, vEvent, work
Attribute itemscope itemprop itemref
API document.getItems() element.properties element.itemValue
Kochan & Partner Brand Design Development
Microdata: Google Rich Snippets
65
Quelle: http://support.google.com/webmasters/bin/answer.py?hl=de&answer=99170
Kochan & Partner Brand Design Development
Microdata: Google Rich Snippets (2)
66
Quelle: http://www.google.com/webmasters/tools/richsnippet
Kochan & Partner Brand Design Development
Zusammenfassung: Semantik
67
Syntax: doctype, well formed, Auslassung
Neue Elemente
Umdeutung/Änderung bestehender Elemente
Entfernte Elemente
Outline-Algorithmus
WAI-ARIA
Microdata
Brand Design Development
Kochan & Partner Brand Design Development 68
Semantik Formulare Video & Audio Application Cache
Kochan & Partner Brand Design Development
Neue Typen für input (1)
69
Textfeld text
Suchfeld search
Telefonnummer telephone
URL* url
E-Mail-Adresse* email
Numerischer Wert* number
Bereich* range
Farbwahl / Color picker color
* Eingebaute Validierung
Kochan & Partner Brand Design Development
Neue Typen für input (2)
70
Datum- und Zeit-Angaben datetime
Datum date
Monat month
Woche week
Zeit time
Datum- und Zeit in lokaler Notation datetime-local
Kochan & Partner Brand Design Development
Typ number, range
71
Eingabefeld oder Regler für Fließkomma-Zahlen
optional: Grenzen (min, max) und Schrittweite (step)
<input type="number" min="-10" max="87" step="1" /> <input type="range" min="-10" max="87" step="1" />
Beispiele
Safari 6/Mac OS X
IE 10/WIndows 8
Kochan & Partner Brand Design Development
Typ search
72
Eingabefeld für Suchen
Darstellung nach Art des Betriebssystems
<input type="search" placeholder="Suche" />
Beispiel
Safari 6/Mac OS X
Kochan & Partner Brand Design Development
Typ Farbwahl / Colorpicker color
73
Leider noch kaum implementiert
<input type="color" />
Beispiel
Chrome 25/Mac OS X
Opera 12/Mac OS X
Kochan & Partner Brand Design Development
Typ für Datum- und Zeitangaben
74
Validierung, optional mit Beschränkung min und max
<input type="datetime" /> <input type="date" /> <input type="month" /> <input type="week" /> <input type="time" /> <input type="datetime-local" />
Beispiele
Chrome 25/Mac OS X
Kochan & Partner Brand Design Development
Neue Elemente
75
Erzeugung von Schlüsseln keygen
Objekt object
Ausgabebereich output
Auto-Vervollständigung datalist
Kochan & Partner Brand Design Development
Auto-Vervollständigung: datalist
76
<input list="albums" /> !<datalist id="albums"> <option value="Queen" /> <option value="Queen II" /> <option value="Sheer Heart... <option value="A Night At ... <option value="A Day At Th... <option value="The Game" ... <option value="The Works" /> <option value="A kind of m... <option value="The Miracle" <option value="Innuendo" /> ...
Beispiel
Chrome 25/Mac OS X
Kochan & Partner Brand Design Development
Neue Attribute
77
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
Kochan & Partner Brand Design Development
Steuerung Button-Verhalten
78
<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>
Beispiel
Absenden Anderswohin Ohne Prüfung
standard.php alternate.php standard.php
ValidierungPost
ValidierungPost
keine ValidierungPost
Kochan & Partner Brand Design Development
Validierung
79
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}"
Kochan & Partner Brand Design Development
Validation API
80
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()
Kochan & Partner Brand Design Development 81
BrowserUnterstützung?
Kochan & Partner Brand Design Development 82
Mac OS X
Kochan & Partner Brand Design Development 83
Windows 8
Kochan & Partner Brand Design Development 84
iOS (1)
Kochan & Partner Brand Design Development 85
iOS (2)
Kochan & Partner Brand Design Development 86
Windows Phone 8
Kochan & Partner Brand Design Development
Zusammenfassung: Formulare
87
Neue Typen für input
Neue Elemente und Attribute
Validierung und Validation API
Browser-Unterstützung
Brand Design Development
Kochan & Partner Brand Design Development 88
Semantik Formulare Video & Audio Application Cache
Kochan & Partner Brand Design Development
Audio- und Video-Einbindung
89
Steuerelemente an/abschaltbar mit controls (»Headless«)
Alternativer Inhalt innerhalb des Elements
Umfangreiche Javascript API zur Steuerung
<audio src="queen-a-day-at-the-races.ogg" controls> Leider unterstützt ihr Browser das audio-Element nicht. Klicken Sie hier, um die <a href="queen-a-day-at-the- races.ogg">Datei herunterzuladen</a>. </audio>
Beispiel
Kochan & Partner Brand Design Development
Audio-Attribute
90
<audio src="audio.ogg#t=10,20" controls autoplay preload="auto" loop > ... </audio>
Beispiel
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
91
<video src="video.ogg" controls autoplay preload="auto" loop width="640" height="480" audio="muted" poster="videoframe.jpg" > ... </video>
Beispiel
Quellenangabe: src
Steuerelemente: controls
Automatisches abspielen: autoplay
Preload-Verhalten: none, metadata, auto
Wiederholte Wiedergabe: loop
Dimensionen: width und height
Audio-Steuerung: audio="muted"
Thumbnail: poster
Kochan & Partner Brand Design Development
Multiple Quellen: Codecs
92
<video> <source src="video.ogg" /> <source src="video.mp4" /> </video>
Implizite Ermittlung via Mime-Type
<video> <source src="video.ogg" type="video/ogg; codecs='theora, vorbis'" /> <source src="video.mp4" type="video/mp4" /> </video>
Explizite Vorgabe
Kochan & Partner Brand Design Development
Multiple Quellen: Devices
93
<video> <source src="small.ogg" media="handheld" /> <source src="high-res.ogg" media="all" /> </video>
Media-spezifisch
Kochan & Partner Brand Design Development
Audio- und Video API: Member
94
Lautstärke (0 – 1) element.volume
Pausiert (true, false) element.paused
Ton ausgeblendet (true, false) element.muted
Position auslesen und setzen element.currentTime
Aktuelle Mediendatei element.currentSrc
Abspieldauer (Streams: 'infinity') element.duration
Startzeitpunkt element.startTime
Normale Abspielgeschwindigkeit (0 – 1) member.defaultPlaybackRate
Abspielgeschwindigkeit (0 – 1) member.playbackRate
Kochan & Partner Brand Design Development
Audio- und Video API: TimeRanges
95
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)
Kochan & Partner Brand Design Development
Audio- und Video API: Methoden
96
Abspielen element.play()
Pausieren element.pause()
Mediendatei laden element.load(<url>)
Codec-Unterstützung abfragen element.canPlayType(<type>)
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; }
Beispiel
Kochan & Partner Brand Design Development
Events
97
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
document.getElementById('player').addEventListener('ended', function() { alert('Ende, aufwachen!'); });
Beispiel
Kochan & Partner Brand Design Development
Fehlerbehandlung (1)
98
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
Kochan & Partner Brand Design Development
Fehlerbehandlung (2)
99
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_DATADaten für aktuelle Position und die nächstenSekunden liegen vor, abspielen kann starten
4 HAVE_ENOUGH_DATAEntweder komplett geladen oder Abschätzung aufgrund aktueller Netzwerkperformance ok
Kochan & Partner Brand Design Development
And The Oscar Goes To...
100
Firefox 3.5+
Safari 4+
Chrome 3+
Opera 10.5+
IE6–8
IE9
Theora/Vorbis ü — ü ü — —
H.264/AAC ü 21* ü ü — — ü
MP3 — ü ü — — ü
WAV ü ü ü ü — —
WebM ü 4+ — ü ü 10.6+ — —
* Nur Windows, Linux teilweise, Mac OS X nicht
Kochan & Partner Brand Design Development
Zusammenfassung: Audio- und Video
101
Einbindung
Audio- und Video-Attribute
Multiple Quellen
Audio- und Video API: Member, Methoden und Events
Fehlerbehandlung: error, networkState, readyState
Codecs
Brand Design Development
Kochan & Partner Brand Design Development 102
Semantik Formulare Video & Audio Application Cache
Kochan & Partner Brand Design Development
Überblick Offline-Techniken
103
Application Cache
DOM Storage
Web SQL
IndexedDB
User Data
On-/Offline-Events und -Status-Abfrage
Kochan & Partner Brand Design Development
HTML-Einbindung
104
<html manifest="cache.manifest"> <head> <title>The Works offline... </head> ... </html>
index.html
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)
105
CACHE MANIFEST # Comment your lines with "#" !# Cache these index.html img/assets/band.jpg img/assets/instruments.jpg !!!
cache.manifest
Einleitung der zu cachenden Dateien mit CACHE MANIFEST
Auflistung jeder zu cachender Datei
Mehrere unterschiedliche Sektionen pro Cache-Datei möglich
Kochan & Partner Brand Design Development
Aufbau Cache Manifest (2)
106
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 !
cache.manifest
!
!
Festlegung von Inhalten, die nur über eine Netzwerkverbindung bezogen werden dürfen (= no cache)
Kochan & Partner Brand Design Development
Aufbau Cache Manifest (3)
107
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
cache.manifest
Alternativ-Inhalte zur Ausgabe bei nicht erreichbaren Ressourcen des NETWORK-Abschnitts
Kochan & Partner Brand Design Development
Events
108
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
Kochan & Partner Brand Design Development
Zusammenfassung: Application Cache
109
HTML-Einbindung, Mime-Type
Aufbau Cache Manifest: CACHE MANIFEST, NETWORK, FALLBACK
Javascript Events zur Cache Überwachung
Brand Design Development
Kochan & PartnerBrandDesignDevelopment
Vielen Dank!
© 2014 – Alle Rechte vorbehalten. !Kochan & Partner GmbHHirschgartenallee 2580639 München Telefon +49 89 178 49 78Fax +49 89 178 [email protected] www.kochan.de !