HTML5 für Entwickler: Part 1 und 2, 2013
- 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 Kochan & Partner
Brand
Design
Markus Greve Development
Für den Abendkurs der Typographischen
Gesellschaft München, 2013
- 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
28.02. Einführung
Hidden Gems
Part 1: Markup
07.03. Part 2: CSS
14.03. Part 3: Javascript
21.03. Hack-a-thon: Thema offen!
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. Was ist HTML5?
HTML 4.01
XHTML 1
W3C, WHATGC
Nicht-Standard wird Standard
6 Kochan & Partner Brand Design Development
- 7. Was ist HTML5?
Offline &
Semantic Device Connectivity
Storage
3D, Graphics Performance &
Multimedia CSS3
& Effects Integration
Quelle: http://www.w3.org/html/logo/
7 Kochan & Partner Brand Design Development
- 9. Can I Use?
Suche
Volle/teilweise
Unterstützung
Detaillierte
Versionsinfo
Weiterführende
Informationen,
Referenz
Quelle: http://caniuse.com
9 Kochan & Partner Brand Design Development
- 10. HTML5 & CSS3, findmebyIP
CSS3 Properties
CSS3 Selectors
Web Applications
Graphics &
embedded Content
Audio codecs
Video codecs
WebForms 2.0
Quelle: http://www.findmebyip.com/litmus/
10 Kochan & Partner Brand Design Development
- 11. Strategie
Graceful degredation
Progressive enhancement
11 Kochan & Partner Brand Design Development
- 12. Hilfsmittel
Polyfills
12 Kochan & Partner Brand Design Development
- 13. IE–Quickfix (1)
window.document.createElement('section');
13 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
used by Twitter Bootstrap, HTML5 Boilerplate and
many more.
Quelle: http://necolas.github.com/normalize.css/
16 Kochan & Partner Brand Design Development
- 17. Modernizr
The All-In-One Entirely-Not-Alphabetical No-Bullshit
Guide to HTML5 Fallbacks
—Modernizr
SVG Accessiblity / ARIA
Canvas Web Sockets
Web Storage Geo Location
Video & Audio Application Cache
IndexedDB, WebSQL Browser State Management
WebForms ....
Quelle: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-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
- 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/javascript“
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 icon, stylesheet
23 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> <!DOCTYPE html>
... ...
<body> <body>
<svg width="300" height="150"> <math>
<rect <mrow>
width="120" height="120" <mi>x</mi>
fill="green" <mo>=</mo>
stroke="red" <mfrac>
stroke-width="10" /> <mrow>
<circle <mo form="prefix">
cx="120" cy="65" r="40" ±</mo>
fill="red" <mi>b</mi>
stroke="green" <mo>±</mo>
stroke-width="5" /> <msqrt>
</svg> <msup>
</body> <mi>b</mi>
... <mn>2</mn>
</msup>
<mo>-</mo>
<mn>4</mn>
...
25 Kochan & Partner Brand Design Development
- 26. Einbindung svg und MathML (2)
Screenshots: Safari 6/Mac OS X
26 Kochan & Partner Brand Design Development
- 27. WYSIWYG und Rechtschreibhilfe
Mögliche Werte für contenteditable und spellcheck:
true, false, inherit
Beispiele
<div id="myEditor" contenteditable="true"
spellcheck="false">...</div>
element.isContentEditable
document.designMode = 'on';
27 Kochan & Partner Brand Design Development
- 28. Standardisierung getElementsByClassName()
API
document.getElementsByClassName()
element.getElementsByClassName()
Beispiele
var allMyActiveDivs
= document.getElementsByClassName('active');
var myOtherLis
= myUl.getElementsByClassName('inactive');
28 Kochan & Partner Brand Design Development
- 29. HTML-Manipulation
API
element.innerHTML
element.outerHTML
element.insertAdjacentHTML(<position>, <html>)
<position> := 'beforebegin'
'afterbegin'
'beforeend'
'afterend'
Beispiele
myUl.innerHTML = '<li>New Bullet</li>';
myUl.outerHTML = '<ul><li>New Bullet</li></ul>';
myLi.insertAdjacentHTML('beforebegin', '<li>Vorgänger</li>');
29 Kochan & Partner Brand Design Development
- 30. Class List API
API
element.classList.length
.add()
.contains()
.item()
.remove()
.toggle()
Beispiele
myDiv.classList.add('active'); // 'active' is added
myDiv.classList.remove('active'); // 'active' is removed
myDiv.classList.toggle('active'); // add or remove
if (myDiv.classList.contains('active')) alert('Aktiv!')
30 Kochan & Partner Brand Design Development
- 31. Query-Selector API
API
document.querySelector(<CSS Selector>); // first match
document.querySelectorAll(<CSS Selector>); // all matches
Beispiel
var oddRows
= document.querySelectorAll('#table > tr:nth-child(odd)');
Randnotiz: w3C Standard seit vergangenem Freitag, 22. Februar 2013
31 Kochan & Partner Brand Design Development
- 32. Frei definierbare Attribute: data-*
Attribute data-*
API element.dataset
Beispiel
<a data-file-type="pdf" data-file-size="73" href="...">
Preisliste und Kundenheft
</a>
// data-* will become dataset-Members, notice "Camel" writing
alert(element.dataset.fileType) // alerts "pdf"
alert(element.dataset.fileSize) // alerts "73"
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
WYSIWYG und Rechtschreibhilfe
34 Kochan & Partner Brand Design Development
- 35. Zusammenfassung: Javascript
HTML-Manipulation mittels innerHTML, outerHTML, insertAdjacentHTML
Standardisierung getElementsByClassName()
ClassList API
Query Selector API
Frei definierbare Attribute mit data-*
History API
35 Kochan & Partner Brand Design Development
- 36. Part 1
Markup
36 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
- 44. 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
- 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>
© 2013
<a href="imprint.html" rel="author">Huber GmbH</a>
<a href="license.html" rel="license">Nutzungsbedingungen</a>
</footer>
45 Kochan & Partner Brand Design Development
- 46. Artikel und Sinnabschnitte: article und section
<body>
<article>
...
<article>
Zusammenfassung inhaltlich
<section class="intro"> abgeschlossener Bereiche durch
article
Inhaltliche Strukturierung der Seite
<section class="copy"> bzw. des Artikels durch section
<article>
...
46 Kochan & Partner Brand Design Development
- 47. Artikel und Sinnabschnitte: article und section
<body>
<article>
...
<article>
Zusammenfassung inhaltlich
<section class="intro"> abgeschlossener Bereiche durch
article
Inhaltliche Strukturierung der Seite
<section class="copy"> bzw. des Artikels durch section
<article>
...
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>
...
<a href="imprint.html">Impressum</a>
48 Kochan & Partner Brand Design Development
- 49. Begleitende Informationen: aside
<body>
<article> <aside>
Verwandte
<section> Themen
Ganz Innerhalb eines articles:
andere
sekundärer Inhalt in Bezug
Themen
<section> auf den Artikel
...
</aside> Außerhalb eines articles:
sekundärer Inhalt in Bezug
<aside> auf die Website als Ganzes
Mehr zu
diesem
Thema
</aside>
49 Kochan & Partner Brand Design Development
- 50. Abbildungen: figure und figcaption
<body>
<article>
Semantische Einheit für eine <section>
Abbildung figure, z.B. ein Bild, eine
Tabelle oder ein Diagramm, mit
optionaleer Abbildungsbeschriftung <figure>
figcaption. <img src=""... />
<svg... />
Reihenfolge der Darstellung kann <figcaption>
ohne Verständnisverlust verändert Quelle: BMW AG.
werden. </figcaption>
</figure>
<section>
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
- 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> 1. Agenda
<section> 1.1 Begrüßung
<h1>Begrüßung</h1>
1.1.1 Schirmherr
<h2>Schirmherr</h2>
<h2>Sponsorenvertreter</h2> 1.1.2 Sponsorenvertreter
<h1>Top 1: Gruppen</h1> 1.2 Top 1: Gruppen
<h1>Top 2: Plenung</h1>
1.3 Top 2: Plenum
</section>
<h1>Anlagen</h1> 2. Anlagen
56 Kochan & Partner Brand Design Development
- 58. Entfernte Elemente
Frames frameset, frame, noframes
dir, basefont, big, center,
Präsentationselemente
font, s, strike, tt, u
Akronyme acronym
Applets applet
Einzeiliges Eingabefeld (?) isindex
Randnotiz: HTML5 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
- 60. Accesible
Rich
Internet
Application
60 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
- 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
- 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 type="datetime" />
<input type="date" />
<input type="month" />
<input type="week" />
<input type="time" />
<input 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 id="albums">
<option value="Queen" /> Chrome 25/Mac OS X
<option value="Queen II" />
<option value="Sheer Heart...
<option value="A Night At ...
<option value="A Day At Th...
<option value="The Game" ...
<option value="The Works" />
<option value="A kind of m...
<option value="The Miracle"
<option value="Innuendo" />
...
76 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 Anderswohin Ohne Prüfung
Validierung Validierung keine Validierung
Post Post Post
standard.php alternate.php standard.php
78 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
- 81. Browser
Unterstützung?
81 Kochan & Partner Brand Design Development
- 82. Mac OS X
82 Kochan & Partner Brand Design Development
- 84. iOS (1)
84 Kochan & Partner Brand Design Development
- 85. iOS (2)
85 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-the-
races.ogg">Datei herunterzuladen</a>.
</audio>
89 Kochan & Partner Brand Design Development
- 90. Audio-Attribute
Beispiel
Quellenangabe: src,
<audio
hier mit Framestart und -ende #t=
src="audio.ogg#t=10,20"
controls Steuerelemente: controls
autoplay
preload="auto" Automatisches abspielen: autoplay
loop
> Preload-Verhalten:
... none, metadata, auto
</audio>
Wiederholte Wiedergabe: loop
90 Kochan & Partner Brand Design Development
- 91. Video-Attribute
Beispiel
Quellenangabe: src
<video
src="video.ogg" Steuerelemente: controls
controls
autoplay Automatisches abspielen: autoplay
preload="auto"
Preload-Verhalten:
loop
none, metadata, auto
width="640" height="480"
audio="muted"
Wiederholte Wiedergabe: loop
poster="videoframe.jpg"
> Dimensionen: width und height
...
</video> Audio-Steuerung: audio="muted"
Thumbnail: poster
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
- 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) member.playbackRate
94 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
Daten für aktuelle Position und die
3 HAVE_FUTURE_DATA nächstenSekunden liegen vor,
abspielen kann starten
Entweder komplett geladen oder
4 HAVE_ENOUGH_DATA Abschätzung aufgrund aktueller
Netzwerkperformance ok
99 Kochan & Partner Brand Design Development
- 100. And The Oscar Goes To...
Firefox Safari Chrome Opera IE IE
3.5+ 4+ 3+ 10.5+ 6–8 9
Theora/Vorbis ü — ü ü — —
H.264/AAC — ü ü — — ü
MP3 — ü ü — — ü
WAV ü ü ü ü — —
WebM ü 4+ — ü ü 10.6+ — —
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
- 104. HTML-Einbindung
index.html
<html
manifest="cache.manifest"> Referenzierung der Manifest-
<head> Datei im HTML-Element
<title>The Works offline...
</head> Auslieferung der Datei mit dem
... Mime-Type: text/cache-manifest
</html>
104 Kochan & Partner Brand Design Development
- 105. Aufbau Cache Manifest (1)
cache.manifest
CACHE MANIFEST Einleitung der zu cachenden Dateien
# Comment your lines with "#" mit CACHE MANIFEST
Auflistung jeder zu cachender Datei
# Cache these
index.html Mehrere unterschiedliche
img/assets/band.jpg Sektionen pro Cache-Datei möglich
img/assets/instruments.jpg
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
Festlegung von Inhalten, die nur
NETWORK
über eine Netzwerkverbindung
only-online.html
bezogen werden dürfen (= no cache)
img/really-current-status.gif
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 Alternativ-Inhalte zur Ausgabe bei
/ sorry-you-are-offline.html nicht erreichbaren Ressourcen
des NETWORK-Abschnitts
107 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
- 110. Part 2
CSS
110 Kochan & Partner Brand Design Development
- 112. Selektoren CSS2.1
Pseudo-Klassen
:first-child Genau das erste Kind
:last-child Genau das letzte Kind
Attribut-spezifische Selektion
element[attribute] element mit Attribut attribute
a[target="_blank"] Anchor mit Attribut target und Attributwert
exakt "_blank"
div[class~="copytext"] Division mit einer mindestens der Klasse
copytext (= div.copytext)
div[lang|="de"] Division mit Attribut lang matcht alle Werte, die
von links mit de beginnen, z.B.
lang="de", lang="de-de, de-at"...
112 Kochan & Partner Brand Design Development
- 114. Selektoren CSS3 (1)
Pseudo-Klassen
:root Das root-Element des Dokuments, body
:nth-child(n) Das n-te Kind, z.B. nth-child(7),
nth-child(odd)oder nth-child(even)
:nth-last-child(n) dito, umgekehrte Zählung
:first-of-type
:last-of-type
:nth-of-type(n)
:nth-last-of-type(n)
:only-child Ein Einzelkind
:empty Ein leeres Element
:enabled, :disabled Ein- oder ausgeschaltetes Element, z.B. Button
:checked Markiertes Element, z.B. Checkbox oder Radiobox
114 Kochan & Partner Brand Design Development
- 115. Selektoren CSS3 (2)
Pseudo-Elemente
:first-line Die erste Zeile des Textes
:first-letter Der erste Buchstabe des Textes
:before Generierter Inhalt vor dem Element
:after Generierter Inhalt nach dem Element
Attribut-spezifische Selektion
div[lang^="de"] Attributwert beginnt mit "de"
div[lang$="de"] Attributwert endet mit "de"
div[lang*="de"] Attributwert beinhaltet "de"
Negation
:not(<CSS 3 Selector>) Invertierung von Selektionsbedingungen
115 Kochan & Partner Brand Design Development
- 117. Selektoren für WebForms 2.0
Pseudo-Elemente
:default Default-submit Button des Formulars
:indeterminate Unbestimmte Check- und Radioboxen
:valid Gültiger Wert
:invalid Ungültiger Wert
:in-range Innerhalb des Wertebereichs
:out-of-range Außerhalb des Wertebereichs
:required Pflichtfeld
:optional Elemente ohne required und ohne Validierung
:read-only Schreibgeschützte Elemente
:read-write Elemente ohne Schreibschutz
117 Kochan & Partner Brand Design Development
- 120. Textfluss
Eingebundene Block-Darstellung display: inline-block
Mehrspaltiger Textfluss column-count, column-rule, column-gap
Textkürzung text-overflow: ellipsis
Tipp: white-space: nowrap nicht vergessen
120 Kochan & Partner Brand Design Development
- 128. Transitions: Übergänge zwischen Property-Werten
Properties all, none, <properties>
Dauer
Timing-Funktion linear, ease*, cubic-bezier
Start-Verzögerung
128 Kochan & Partner Brand Design Development
- 129. Transitions: Beispiele
Vollständige Notation
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: .5s;
Kurzschreibweise und multiple Übergänge
transition: width 2s linear,
height 1s ease-in,
left .5s ease-in-out;
129 Kochan & Partner Brand Design Development
- 133. Zusammenfassung: CSS
Selektoren CSS 2.1, CSS 3
Textfluss: Blocks, Mehrspaltigkeit, Textkürzung
Transformationen 2D, 3D
Übergänge mit Transitions
Keyframe Animationen
133 Kochan & Partner Brand Design Development
- 135. Vielen Dank! Kochan & Partner
Brand
Design
Development
© 2013 – Alle Rechte vorbehalten.
Kochan & Partner GmbH
Hirschgartenallee 25
80639 München
Telefon +49 89 178 49 78
Fax +49 89 178 1235
kontakt@kochan.de
www.kochan.de