html5 für entwickler: part 1 und 2, 2013
Post on 20-Jan-2015
2.033 Views
Preview:
DESCRIPTION
TRANSCRIPT
Kochan & PartnerBrandDesignDevelopment
HTML5 für Entwickler
Markus Greve
Für den Abendkurs der Typographischen
Gesellschaft München, 2013
markup, noun. A markup language is a modern
system for annotating a document in a way that is
syntactically distinguishable from the text. The idea
and terminology evolved from the »marking up« of
manuscripts
—Wikipedia
Kochan & Partner Brand Design Development2
Demos, Links, Ressourcen http://www.kochan.de/html5Slides http://de.slideshare.net/markusgreve/
Markus Greve KOCHAN & PARTNER BRAND DESIGN DEVELOPMENT
T +49 89 17860–150 E markus.greve@kochan.de @mrmontezuma
Kochan & Partner Brand Design Development
Organisatorisches
3
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!
Kochan & Partner Brand Design Development4
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
Was ist HTML5?
6
HTML 4.01
XHTML 1
W3C, WHATGC
Nicht-Standard wird Standard
Kochan & Partner Brand Design Development
Was ist HTML5?
7
Semantic
Quelle: http://www.w3.org/html/logo/
Offline & Storage
Device Connectivity
Multimedia3D, Graphics
& EffectsPerformance &
IntegrationCSS3
Kochan & Partner Brand Design Development
Unterstützung
8
Kochan & Partner Brand Design Development
Can I Use?
9
Suche
Volle/teilweise Unterstützung
Detaillierte Versionsinfo
Weiterführende Informationen, Referenz
Quelle: http://caniuse.com
Kochan & Partner Brand Design Development
HTML5 & CSS3, findmebyIP
10
CSS3 Properties
CSS3 Selectors
Web Applications
Graphics & embedded Content
Audio codecs
Video codecs
WebForms 2.0
Quelle: http://www.findmebyip.com/litmus/
Kochan & Partner Brand Design Development
Strategie
11
Graceful degredation
Progressive enhancement
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 used by Twitter Bootstrap, HTML5 Boilerplate and many more.
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 Development19
»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/javascript“
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
WYSIWYG und Rechtschreibhilfe
27
<div id="myEditor" contenteditable="true" spellcheck="false">...</div>
element.isContentEditabledocument.designMode = 'on';
Beispiele
Mögliche Werte für contenteditable und spellcheck:
true, false, inherit
Kochan & Partner Brand Design Development
Standardisierung getElementsByClassName()
28
document.getElementsByClassName()element.getElementsByClassName()
API
var allMyActiveDivs = document.getElementsByClassName('active');
var myOtherLis = myUl.getElementsByClassName('inactive');
Beispiele
Kochan & Partner Brand Design Development
HTML-Manipulation
29
element.innerHTMLelement.outerHTMLelement.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
30
element.classList.length .add() .contains() .item() .remove() .toggle()
API
myDiv.classList.add('active'); // 'active' is addedmyDiv.classList.remove('active'); // 'active' is removedmyDiv.classList.toggle('active'); // add or remove
if (myDiv.classList.contains('active')) alert('Aktiv!')
Beispiele
Kochan & Partner Brand Design Development
Query-Selector API
31
document.querySelector(<CSS Selector>); // first matchdocument.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
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" writingalert(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
WYSIWYG und Rechtschreibhilfe
Brand Design Development
Kochan & Partner Brand Design Development
Zusammenfassung: Javascript
35
HTML-Manipulation mittels innerHTML, outerHTML, insertAdjacentHTML
Standardisierung getElementsByClassName()
ClassList API
Query Selector API
Frei definierbare Attribute mit data-*
History API
Brand Design Development
Kochan & Partner Brand Design Development36
Part 1Markup
Kochan & Partner Brand Design Development37
SemantikFormulareVideo & AudioApplication Cache
Kochan & Partner Brand Design Development38
SemantikFormulareVideo & AudioApplication 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> © 2013 <a href="imprint.html" rel="author">Huber GmbH</a> <a href="license.html" rel="license">Nutzungsbedingungen</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>...<a href="imprint.html">Impressum</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 Development59
AR IA
Kochan & Partner Brand Design Development60
AccesibleRich InternetApplication
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 itemscopeitempropitemref
API document.getItems()element.propertieselement.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 Development68
SemantikFormulareVideo & AudioApplication 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 patternz.B. pattern="[0-9]{5}"
Kochan & Partner Brand Design Development
Validation API
80
MemberMember
Bool'scher Wert element.willValidate
Lokalisierte Fehlermeldung element.validationMessage
Datenstruktur zur Fehleranalyse element.validity .valid .valueMissing .typeMismatch .patternMismatch .tooLong .rangeUnderflow .rangeOverflow .stepMismatch .customError
MethodenMethoden
Validierung auslösen element.checkValidity()
Eigene Regel setzen element.setCustomValidity()
Kochan & Partner Brand Design Development81
BrowserUnterstützung?
Kochan & Partner Brand Design Development82
Mac OS X
Kochan & Partner Brand Design Development83
Windows 8
Kochan & Partner Brand Design Development84
iOS (1)
Kochan & Partner Brand Design Development85
iOS (2)
Kochan & Partner Brand Design Development86
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 Development88
SemantikFormulareVideo & AudioApplication 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
MemberMember
(Bereits) Durchsuchbarer Zeitraum element.seekable
Abgespielter Zeitraum element.played
Vorgelden (gepufferter) Zeitraum element.buffered
[TimeRangeObject][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.errorelement.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.networkStateelement.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.readyStateelement.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 — ü ü — — ü
MP3 — ü ü — — ü
WAV ü ü ü ü — —
WebM ü 4+ — ü ü 10.6+ — —
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 Development102
SemantikFormulareVideo & AudioApplication 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 theseindex.htmlimg/assets/band.jpgimg/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 theseindex.htmlimg/assets/band.jpgimg/assets/instruments.jpg
NETWORKonly-online.htmlimg/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 theseindex.htmlimg/assets/band.jpgimg/assets/instruments.jpg
NETWORKonly-online.htmlimg/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 & Partner Brand Design Development110
Part 2CSS
Kochan & Partner Brand Design Development111
SelektorenTextflussTransformationenTransitionen, Animationen
Kochan & Partner Brand Design Development
Selektoren CSS2.1
112
Pseudo-KlassenPseudo-Klassen
:first-child Genau das erste Kind
:last-child Genau das letzte Kind
Attribut-spezifische SelektionAttribut-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"...
Kochan & Partner Brand Design Development
Selektoren CSS2.1: Demo
113
Kochan & Partner Brand Design Development
Selektoren CSS3 (1)
114
Pseudo-KlassenPseudo-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
Kochan & Partner Brand Design Development
Selektoren CSS3 (2)
115
Pseudo-ElementePseudo-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 SelektionAttribut-spezifische Selektion
div[lang^="de"] Attributwert beginnt mit "de"
div[lang$="de"] Attributwert endet mit "de"
div[lang*="de"] Attributwert beinhaltet "de"
NegationNegation
:not(<CSS 3 Selector>) Invertierung von Selektionsbedingungen
Kochan & Partner Brand Design Development
Selektoren CSS3: Demo
116
Kochan & Partner Brand Design Development
Selektoren für WebForms 2.0
117
Pseudo-ElementePseudo-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
Kochan & Partner Brand Design Development
Selektoren für WebForms 2.0: Demo
118
Kochan & Partner Brand Design Development119
SelektorenTextflussTransformationenTransitionen, Animationen
Kochan & Partner Brand Design Development
Textfluss
120
Eingebundene Block-Darstellung display: inline-block
Mehrspaltiger Textfluss column-count, column-rule, column-gap
Textkürzung text-overflow: ellipsisTipp: white-space: nowrap nicht vergessen
Kochan & Partner Brand Design Development
Textfluss: Demo
121
Kochan & Partner Brand Design Development122
SelektorenTextflussTransformationenTransitionen, Animationen
Kochan & Partner Brand Design Development
Transformationen
123
Koordinatensystem & Perspektive
Hardware-Beschleunigung
Kombinierbare Transformationen
• Rotation• Skalierung • Translation • Neigung• Ursprung• Matrizen-Manipulation
Kochan & Partner Brand Design Development
Transformationen: Demo (1)
124
Kochan & Partner Brand Design Development
Transformationen: Demo (2)
125
Kochan & Partner Brand Design Development
Transformationen: Demo 2D
126
Kochan & Partner Brand Design Development127
SelektorenTextflussTransformationenTransitionen, Animationen
Kochan & Partner Brand Design Development
Transitions: Übergänge zwischen Property-Werten
128
Properties all, none, <properties>
Dauer
Timing-Funktion linear, ease*, cubic-bezier
Start-Verzögerung
Kochan & Partner Brand Design Development
Transitions: Beispiele
129
transition-property: width;transition-duration: 2s;transition-timing-function: linear;transition-delay: .5s;
Vollständige Notation
transition: width 2s linear, height 1s ease-in, left .5s ease-in-out;
Kurzschreibweise und multiple Übergänge
Kochan & Partner Brand Design Development
Transitions: Demo
130
Kochan & Partner Brand Design Development
Animationen
131
Keyframe-Defintionen Start/Ende from, to oder Prozentwert 0 – 100%
Animations-Property
• Dauer
• Anzahl Wiederholungen
• Timing-Funktion
• Richtung
Kochan & Partner Brand Design Development
Animationen: Demo
132
Kochan & Partner Brand Design Development
Zusammenfassung: CSS
133
Selektoren CSS 2.1, CSS 3
Textfluss: Blocks, Mehrspaltigkeit, Textkürzung
Transformationen 2D, 3D
Übergänge mit Transitions
Keyframe Animationen
Brand Design Development
Kochan & Partner Brand Design Development134
to be continued...
Kochan & PartnerBrandDesignDevelopment
Vielen Dank!
© 2013 – Alle Rechte vorbehalten.
Kochan & Partner GmbHHirschgartenallee 2580639 MünchenTelefon +49 89 178 49 78Fax +49 89 178 1235kontakt@kochan.dewww.kochan.de
top related