Und hier der dritte und abschließende Teil zum Thema Javascript mit Demos zu den API: Canvas, Geolocation, Device Orientation, Notifications, WebSockets, Worker, Storage, Web SQL, Indexed DB und File API.
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. Hack-A-Thon
Themenvorstellung, Gruppenbildung ca. 15min
Gruppen von 2 – 3 Personen, d.h. 4 – 5 Gruppen
Hacking ca. 120min
Standup 5min pro Gruppe: Vorstellung
4 Kochan & Partner Brand Design Development
6. Was ist HTML5 und was nicht
...
Quelle: Peter Kröner, http://html5-buch.de
Creative Commons Namensnennung 3.0 Deutschland-Lizenz
6 Kochan & Partner Brand Design Development
7. Was ist HTML5?
HTML 4.01
XHTML 1
W3C, WHATGC
Nicht-Standard wird Standard
7 Kochan & Partner Brand Design Development
8. Was ist HTML5?
Offline & Realtime &
Semantic Device Communication
Storage
3D, Graphics Performance &
Multimedia CSS3
& Effects Integration
Quelle: http://www.w3.org/html/logo/
8 Kochan & Partner Brand Design Development
17. 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/
17 Kochan & Partner Brand Design Development
18. 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
18 Kochan & Partner Brand Design Development
19. –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/
19 Kochan & Partner Brand Design Development
21. 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“
21 Kochan & Partner Brand Design Development
22. 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>
22 Kochan & Partner Brand Design Development
23. 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>
23 Kochan & Partner Brand Design Development
24. 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
24 Kochan & Partner Brand Design Development
25. 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();
}
25 Kochan & Partner Brand Design Development
31. 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!')
31 Kochan & Partner Brand Design Development
32. 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
32 Kochan & Partner Brand Design Development
33. 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"
33 Kochan & Partner Brand Design Development
34. 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
// ...
};
34 Kochan & Partner Brand Design Development
35. 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
35 Kochan & Partner Brand Design Development
36. Zusammenfassung: Javascript
HTML-Manipulation mittels innerHTML, outerHTML, insertAdjacentHTML
Standardisierung getElementsByClassName()
ClassList API
Query Selector API
Frei definierbare Attribute mit data-*
History API
36 Kochan & Partner Brand Design Development
37. Part 1
Markup
37 Kochan & Partner Brand Design Development
43. 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>
43 Kochan & Partner Brand Design Development
44. Neue Elemente
Kopf- und Fußbereiche header, footer
Seitenabschnitte section
Artikel article
Navigationsbereiche nav
Begleitende Informationen aside
Abbildungen figure, figcaption
Markierung mark
44 Kochan & Partner Brand Design Development
45. Neue Elemente (2)
Uhrzeit time
Menü menu
Button/Checkbox/Radiobox command
Fortschrittsanzeige progress
Skala meter
Detailansicht details
Zusammenfassung einer Detailansicht summary
45 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. 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>
...
48 Kochan & Partner Brand Design Development
49. 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>
49 Kochan & Partner Brand Design Development
50. 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>
50 Kochan & Partner Brand Design Development
51. 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>
51 Kochan & Partner Brand Design Development
52. 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>
52 Kochan & Partner Brand Design Development
53. 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
53 Kochan & Partner Brand Design Development
54. Fortschrittsanzeige: progress
Darstellung Betriebssystem-spezifisch
Maximum (max) und aktueller Status (value) optional via numerischem Wert
Aktueller Fortschriftt via element.position (0.0 – 1.0, –1 bei unbekannt)
Safari 6/Mac OS X
Internet Explorer/Windows Phone 8
Firefox 10 /Windows Non-Aqua
54 Kochan & Partner Brand Design Development
55. Skala: meter
Darstellung Betriebssystem-spezifisch
Grenzen (min, max) und aktuellem Wert (value) optional via numerischem Wert
Einfärbung bei Erreichen von Schwellwerten (low, high, optimum) möglich
Safari 6/Mac OS X
55 Kochan & Partner Brand Design Development
56. Outline-Algorithmus (1)
Beibehaltung des 6-stufiges Überschriften-Modell h1 bis h6
Hierarchie jedoch pro Sektion
Sektionen definiert durch section, nav, aside und article
56 Kochan & Partner Brand Design Development
57. 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
57 Kochan & Partner Brand Design Development
58. Umdeutung/Änderung bestehender Elemente
Hervorhebung em, strong
Abkürzung und Akronym abbr
Quellcode code
Adresse address
Gleichwertige Abhebung, Fachbegriffe b, i
Inhaltlicher Bruch hr
»Kleingedrucktes« small
58 Kochan & Partner Brand Design Development
59. 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... :-)
59 Kochan & Partner Brand Design Development
60. A
R
I
A
60 Kochan & Partner Brand Design Development
61. Accesible
Rich
Internet
Application
61 Kochan & Partner Brand Design Development
63. 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
63 Kochan & Partner Brand Design Development
66. Microdata: Google Rich Snippets
Quelle: http://support.google.com/webmasters/bin/answer.py?hl=de&answer=99170
66 Kochan & Partner Brand Design Development
67. Microdata: Google Rich Snippets (2)
Quelle: http://www.google.com/webmasters/tools/richsnippet
67 Kochan & Partner Brand Design Development
68. Zusammenfassung: Semantik
Syntax: doctype, well formed, Auslassung
Neue Elemente
Umdeutung/Änderung bestehender Elemente
Entfernte Elemente
Outline-Algorithmus
WAI-ARIA
Microdata
68 Kochan & Partner Brand Design Development
70. 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
70 Kochan & Partner Brand Design Development
71. 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
71 Kochan & Partner Brand Design Development
72. 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
72 Kochan & Partner Brand Design Development
73. Typ search
Eingabefeld für Suchen
Darstellung nach Art des Betriebssystems
Beispiel
<input type="search" placeholder="Suche" />
Safari 6/Mac OS X
73 Kochan & Partner Brand Design Development
74. Typ Farbwahl / Colorpicker color
Leider noch kaum implementiert
Beispiel
<input type="color" />
Chrome 25/Mac OS X
Opera 12/Mac OS X
74 Kochan & Partner Brand Design Development
75. 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
75 Kochan & Partner Brand Design Development
76. Neue Elemente
Erzeugung von Schlüsseln keygen
Objekt object
Ausgabebereich output
Auto-Vervollständigung datalist
76 Kochan & Partner Brand Design Development
77. 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" />
...
77 Kochan & Partner Brand Design Development
78. 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
78 Kochan & Partner Brand Design Development
79. 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
79 Kochan & Partner Brand Design Development
80. 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}"
80 Kochan & Partner Brand Design Development
81. 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()
81 Kochan & Partner Brand Design Development
82. Browser
Unterstützung?
82 Kochan & Partner Brand Design Development
83. Mac OS X
83 Kochan & Partner Brand Design Development
84. Windows 8
84 Kochan & Partner Brand Design Development
85. iOS (1)
85 Kochan & Partner Brand Design Development
86. iOS (2)
86 Kochan & Partner Brand Design Development
88. Zusammenfassung: Formulare
Neue Typen für input
Neue Elemente und Attribute
Validierung und Validation API
Browser-Unterstützung
88 Kochan & Partner Brand Design Development
90. 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>
90 Kochan & Partner Brand Design Development
91. 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
91 Kochan & Partner Brand Design Development
95. 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
95 Kochan & Partner Brand Design Development
96. 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)
96 Kochan & Partner Brand Design Development
97. 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;
}
97 Kochan & Partner Brand Design Development
98. 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!'); });
98 Kochan & Partner Brand Design Development
99. 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
99 Kochan & Partner Brand Design Development
100. 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
100 Kochan & Partner Brand Design Development
102. Zusammenfassung: Audio- und Video
Einbindung
Audio- und Video-Attribute
Multiple Quellen
Audio- und Video API: Member, Methoden und Events
Fehlerbehandlung: error, networkState, readyState
Codecs
102 Kochan & Partner Brand Design Development
105. 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>
105 Kochan & Partner Brand Design Development
106. 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
106 Kochan & Partner Brand Design Development
107. 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
107 Kochan & Partner Brand Design Development
108. 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
108 Kochan & Partner Brand Design Development
109. 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
109 Kochan & Partner Brand Design Development
113. 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"...
113 Kochan & Partner Brand Design Development
115. 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
115 Kochan & Partner Brand Design Development
116. 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
116 Kochan & Partner Brand Design Development
118. 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
118 Kochan & Partner Brand Design Development
152. Geolocation
Abfrage der geografischen Position
Erlaubnis durch den Benutzer
Einmal-Abfrage oder kontinuierliche Überwachung
Quelle je nach Endgerät: GPS, GSM-Interpolation, WLAN...
Neben Koordination
• Höhe über Normalnull
• Richtung
• Geschwindigkeit
152 Kochan & Partner Brand Design Development
153. API
navigator.geolocation
getCurrentPosition(
Position abfragen <callback>, <error>, <options>)
Position überwachen watchPosition(<dito>)
Überwachung beenden clearWatch(<watchId>)
[Geoposition]
Genauigkeit coords.accuracy
Breitengrad, Längengrad coords.latitude, .longitude
Richtung coords.heading
Geschwindigkeit coords.speed
Genauigkeit Höhe coords.altitudeAccuracy
Höhe coords.altitude
Ermittlungszeitpunkt timestamp
153 Kochan & Partner Brand Design Development
154. Optionen
[PositionOptions]
Hohe Genauigkeit einschalten enableHighAccuracy true / false
Maximale Laufzeit für Ermittlung timeout
Maximales Alter maximumAge
Beispiel
var threadId;
if (navigator.geolocation)
{
threadId = navigator.geolocation.watchPosition(
update, // function callback
error, // error callback
{enableHighAccuracy: true} // options as JSON object
);
}
function update(pos) { alert(pos.coords.latitude); }
function errorCallback(error) { alert(error.message);}
154 Kochan & Partner Brand Design Development
155. Fehlerbehandlung
error.code
0 Kein Fehler
1 PERMISSION_DENIED Zugriff nicht gestattet
2 POSITION_UNAVAILABLE Position nicht verfügbar
3 TIMEOUT Ermittlung abgelaufen
error.message
Lokalisierte Fehlermeldung zur Ausgabe
155 Kochan & Partner Brand Design Development
156. Demo
156 Kochan & Partner Brand Design Development
158. Device Orientation
Abfrage der Orientierung im dreidimensionalen Raum
Konkurrierende Spezifikationen: DeviceOrientation oder MozOrientation
Quelle je nach Endgerät: Beschleunigungssensor
158 Kochan & Partner Brand Design Development
159. Z
Y
X
159 Kochan & Partner Brand Design Development
160. Z
Y
α
X
160 Kochan & Partner Brand Design Development
161. Z
Y
β
X
161 Kochan & Partner Brand Design Development
162. Z
Y
γ
X
162 Kochan & Partner Brand Design Development
167. Notifications
(Visuelle) Benachrichtigung des Users außerhalb des Browserfensters
Ausprägungen: Notification oder HtmlNotification
Darstellung Systemabhängig, z.B. Mac OS X Mountain Lion: Mitteilungszentrale
Leider derzeit exklusiv in Webkit implementiert
167 Kochan & Partner Brand Design Development
168. API
window.webkitNotifications
Berechtigung überprüfen checkPermission()
Berechtigung einholen requestPermission(<callback>)
Benachrichtigung erzeugen createNotification()
Beispiel
if (window.webkitNotification.checkPermission() == 0)
{
var n = window.webkitNotification.createNotification(
'', // icon, unused
'Hammer to fall', // title
'Here I stand or...' // body
);
n.show();
}
168 Kochan & Partner Brand Design Development
169. Demo
169 Kochan & Partner Brand Design Development
171. WebSocket
Bidirektionale Kommunikation
Reduktion des HTTP-Overheads
Technische Basis: HTTP Upgradesystem, ggf. Probleme bei Proxy-Verbindungen
URL-Schema: ws:// bzw. wss://
Format derzeit Text, binäre Daten in Vorbereitung
171 Kochan & Partner Brand Design Development
172. Server-Implementierung
Standard LAMP tendenziell ungeeignet, da anderes Nutzungsmuster:
• kein starrer Anfrage/Antwort-Zyklus
• große Anzahl an offenen Verbindungen
Vielfältige Serverseitige Implementierungen verfügbar
u.a. für Node.js, Java, Ruby, Python
172 Kochan & Partner Brand Design Development
173. API
Konstruktor new WebSocket(<url>)
Nachricht vom Client senden send(<message>)
Verbindung beenden close()
Events
onopen Verbindung aufgebaut
onerror Fehler
onmessage Eingehende Nachricht des Servers
173 Kochan & Partner Brand Design Development
174. Demo
174 Kochan & Partner Brand Design Development
177. Web Worker
Asynchrone Berechnung
Ausgelagert in eigene Threads
Parallele Ausführung weiterer Skripte (»non blocking«)
Kein Zugriff auf DOM-Elemente: window, document, parent
177 Kochan & Partner Brand Design Development
178. API
[Worker]
Konstruktor new Worker(<js-file)
Nachricht senden postMessage(<text>)
Worker beenden terminate()
178 Kochan & Partner Brand Design Development
179. Genereller Ablauf
index.html worker.js
w = new worker('worker.js');
w.postMessage(cmd); self.addEventListener(
// ... 'message',
// do more stuff, script is function(e)
// not blocked {
// ... // do the real heavy
// calc stuff
// ...
var result = /* ... */;
w.onmessage = function(e) postMessage(result)
{ }, false
alert(e.data); );
w.terminate();
}
179 Kochan & Partner Brand Design Development
183. Web Storage
Bezeichnet auch als DOM Storage
Session (sessionStorage) oder Sessionübergreifend (localStorage)
Key/Value-Paare
Zugriffsbeschränkung auf »same origin«, d.h. Protokoll/Domain/Port
Speicherplatz abhängig von Browser und Benutzereinstellung
Defaults pro origin: Webkit 2,5MB, Firefox 5MB, IE 10MB
Event-Überwachung
183 Kochan & Partner Brand Design Development
184. API
window.localStorage | window.sessionStorage
Key/Value-Paar setzen setItem(<key>, <value>)
Value zu Key ermitteln getItem(<key>)
Key/Value-Paar löschen removeItem(<key>)
Speicher leeren clear()
Anzahl Key/Value-Paare length
Key des n-ten Paares key(<index>)
184 Kochan & Partner Brand Design Development
185. Event storage
event.key Key des auslösenden Speicherzugriffs
event.oldValue Bisheriger Wert
event.newValue Neuer Wert
event.url / event.uri Adresse des verändernden Dokuments
event.storageArea localStorage oder sessionStorage
Hinweis! Der Event wird nicht in dem Dokument ausgelöst, in dem
der Schreibzugriff erfolgt ist, sondern nur in allen anderen...!
185 Kochan & Partner Brand Design Development
192. Indexed DB
Experimentell!
Verbreitung: Chrome, Firefox, IE10, kein Mobil-Browser
Vollständiger Name: Indexed Database API
NoSQL Datenbank
Keine starre Tabellenstruktur sondern Key/Value-Paare mit Objekten
Funktioniert nicht in dem Privacy-Modus (»privates Surfen« ö.ä.)
Schemagröße pro Origin variabel, mindestens 50MB
192 Kochan & Partner Brand Design Development
193. Genereller Ablauf, Terminologie
(1) Datenbank öffnen
(2) Wenn nicht vorhanden: Speicherbereich objectStore (≈ Tabellen in
SQL-Datenbanken) anlegen oder auf neue Version des Schemas updaten
(3) Datenbank-Operation
(1) Transaktion erzeugen, Typ festlegen: readonly, readwrite
(2) objectStore festlegen
(3) Anfrage ausführen: add(), delete(), openCursor()
(4) Den Abschluss der Operation mit Hilfe des richtigen Events
(onsuccess) überwachen
(5) Ergebnisse verarbeiten
193 Kochan & Partner Brand Design Development
194. Erläuterung zum Demo
var db;
function storeDB() {}
function deleteDB(what) {}
function retrieveDB() {}
window.onload = function()
{
/* ... */
request = window.indexedDB.open();
request.onerror = function(event) { /* ... */ }
request.onsuccess = function(event) { db = request.result; }
request.onupgradeneed = function(event) { /* setupDB */ }
}
194 Kochan & Partner Brand Design Development
195. Demo
195 Kochan & Partner Brand Design Development