html5 workshop peter voringer
TRANSCRIPT
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 2
Rocket Science
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 4
I WebWorkers
I Storage
I WebSockets
I File API
I Canvas
I Geolocation
Übersicht
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 6
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 7
- Laufen im Hintergrund
- Mehrere Threads, Vorteile bei Multicore CPU
- Keine Warnmeldung bei langlaufenden Skripts
- Erhöhte Responsivität der Webanwendung
HTML5 Web Workers - Vorteile
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 8
- Keine Unterstützung im IE
- Kein direkter Zugriff auf die Website und die DOM API (window, window.document, alert(), …)
- Etwas schwieriger zu debuggen
- Same Origin (scheme, host, port)
- Manches funktioniert noch nicht so, wie man es erwartet
HTML5 Web Workers - Nachteile
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 9
Thread Thread
I Kommunikation über Nachrichten und Callbacks
HTML5 Web Workers - Funktionsweise
Applikation Worker
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 10
HTML5 Web Workers - Lebenszyklus
if (typeof(Worker) !== „undefined“) {}
var worker = new Worker(„worker.js“);
worker.terminate();
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 11
HTML5 Web Workers - Client
function messageHandler(message) {var data = message.data;
}
worker.addEventListener("message", messageHandler, true);
function errorHandler(e) {…
}
worker.addEventListener(„error", errorHandler, true);
worker.postMessage(message);
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 12
HTML5 Web Workers - Worker
function messageHandler(message) {var data = message.data;
}
addEventListener("message", messageHandler, true);
postMessage(message);
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 13
HTML5 Web Workers - Worker
var subWorker = new Worker(“subworker.js“);
importScripts(“helper.js”, “util.js”)
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 15
Hands-On
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 16
HTML5 Web Workers – Hands-On
math.html math.js
Erstellt Worker
Schickt jede Primzahlzum Anzeigen zurück
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 17
Demo
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 18
Storage
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 19
I Werte existieren nur solange das Fenster/Tab geöffnet ist
I Werte nur aus dem Fenster / Tab zugreifbar, in dem sie erstellt wurden
Storage – SessionStorage
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 20
I Werte existieren auch nachdem der Browser / Tab geschlossen wurde weiter
I Werte können aus dem Fenster / Tab zugreifbar, in dem sie erstellt wurden
Storage – LocalStorage
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 21
Storage - Support
if (window.sessionStorage) {var storage = window.sessionStorage;…
}
if (window.localStorage) {var storage = window.localStorage;…
}
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 22
Storage - API
getItem(key) Gibt das Element zum key oder null zurück
setItem(key, value) Speichert einen Wert im Storage
removeItem(key) Entfernt einen Wert im Storage
length Elemente im Storage
key(index) Gibt den x-ten Key zurück
clear() Löscht den Storage Inhalt
storage.key = value;
alert(storage.key);
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 23
Storage - Event
function storageListener(event) {var key = event.key; // Keyvar oldValue = event.oldValue; // Alter Wert im Storagevar newValue = event.newValue; // Neuer Wert im Storagevar url = event.url; // Origin Urlvar storageArea = event.storageArea; // Storage Objekt
}
window.addEventListener(“storage“, storageListener, true);
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 24
I WebSQL DB in Safari, Chrome und Opera implementiert, wird allerdings nicht in Firefox implementiert werden, da die Spezifikation an der Stelle „stalled“ ist (IE Support ganz zu schweigen)
I Indexed Database (früher WebSimpleDB) ist eine neuere Spezifikation, allerdings noch in keinem Browser implementiert
Storage - Database
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 27
Storage – Hands-On
I Formular zum Abspeichern von Key-Value Paaren
I Funktion zum Auslesen des kompletten Storage
I Funktion zum Löschen des kompletten Storage
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 28
Demo
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 29
WebSockets
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 30
I TCP basiertes Protokoll
I Weniger Traffic / Overhead
I Geringere Latenz
I Full-Duplex Kommunikation
I ws:// bzw. wss:// Prefix
WebSockets
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 31
WebSockets – Protokoll - Request
GET /demo HTTP/1.1Host: example.comConnection: UpgradeSec-WebSocket-Key2: 12998 5 Y3 1 .P00Sec-WebSocket-Protocol: sampleUpgrade: WebSocketSec-WebSocket-Key1: 4 @1 46546xW%0l 1 5Origin: http://example.com
^n:ds[4U
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 32
WebSockets – Protokoll - Response
HTTP/1.1 101 WebSocket Protocol HandshakeUpgrade: WebSocketConnection: UpgradeSec-WebSocket-Origin: http://example.comSec-WebSocket-Location: ws://example.com/demoSec-WebSocket-Protocol: sample
8jKS'y:G*Co,Wxa-
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 33
I Jetty / Netty (Java)
I Glassfish (Java)
I jWebSocket (Java)
I xLightweb (Java)
I Mojolicious (Perl)
I PyWebsocket (Python)
I phpwebsockets (PHP Daemon)
WebSockets - Implementierungen
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 34
I Nur zwei Byte pro Frame• 0x00 und 0xFF
I Keine Binärdaten in Frames unterstützt• Terminator vs. Längenprefix
I UTF-8 Daten im Frame
WebSockets - Protokoll
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 35
WebSockets - API
if (window.WebSocket) {…
}
var socket = new WebSocket(“ws://www.test.de/echo“);
socket.close();
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 36
WebSockets - API
socket.onopen = function() {}
socket.onclose = function() {}
socket.onmessage = function(message) {var data = message.data;
}
socket.send(“Some Text“);
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 39
WebSockets – Hands-On
I Chat Client
• Aufbauen von 3 Connections zum Server
• Input Feld und 3 Buttons zum Absenden
• Anzeigen von empfangenen Nachrichten
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 40
Demo
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 41
File API
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 42
File API
<form><input type="file" id="fileElem" multiple=„true“ accept="image/*"
style="display:none" onchange="handleFiles(this.files)"></form>
<a href="javascript:doClick()">Select some files</a>
function doClick() { var el = document.getElementById("fileElem"); if (el) { el.click(); }
}
function handleFiles(fileList) { …
}
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 43
File API - FileList
var fileInput = document.getElementById(„fileElem");
var files = fileInput.files;var file = null;
for (var i = 0; i < files.length; i++) {
file = files.item(i);file = files[i];
alert(file.name);}
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 44
File API - File
name Name der Datei
lastModifiedDate Änderungsdatum der Datei
size Anzahl Bytes
type MIME-Type
slice(start, length, contentType) Teil der Daten zurückgeben
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 45
File API - FileReader
var reader = new FileReader();reader.onload = function (e) {
showImage(e.target.result); };reader.readAsDataURL(file);
readAsArrayBuffer(blob) Einlesen als ArrayBuffer
readAsBinaryString(blob) Einlesen als Binär Daten
readAsText(blob, encoding) Einlesen als Text
readAsDataURL(blob) Einlesen als DataURL
abort() Abbrechen des Lesevorgangs
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 46
File API - FileReader
data:[<mediatype>][;base64],<data>
data:,Hello%2C%20World!Einfacher Text
data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3Dbase64 kodierter Text (von oben)
data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3EHTML Dokument mit <h1>Hello, World</h1>
data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP……….
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 47
File API - FileReaderSync
NOT_FOUND_ERR 1
SECURITY_ERR 2
ABORT_ERR 3
NOT_READABLE_ERR 4
ENCODING_ERR 5
var reader = new FileReaderSync();image.src = reader.readAsDataURL(file);
FileException
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 49
File API – Hands-On
I Auswählen von mehreren Bilddateien
I Darstellen als Thumbnail
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 50
Demo
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 51
Canvas
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 52
Canvas
<canvas id=“canvas“ width=“500“ height=“500“>Alternativer Text
</canvas>
var canvas = document.getElementById(“canvas““);if (canvas.getContext) {
…}
var context = canvas.getContext(‘2d‘);
var context = canvas.getContext(‘webgl‘);
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 53
Canvas – 2D – Einfaches Beispiel
var context = canvas.getContext(‘2d‘);context.fillStyle = ‚rgb(255, 0, 0)‘;context.fillRect(20, 40, 240, 160);
X-Achse
Y-A
chse
(0,0)
(20,40)
(240,160)
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 54
Canvas – API Überblick – Rechtecke und Pfade
clearRect(x1, y1, x2, y2) Löscht den Inhalt eines Rechtecks
strokeRect(x1, y1, x2, y2) Rahmen eines Rechtecks
fillRect(x1, y1, x2, y2) Füllt ein Rechteck
beginPath() Begin eines Pfades
moveTo(x, y) Sprung zum Punkt
lineTo(x, y) Linie vom aktuellen zum nächsten Punkt
arc(x, y, r, sw, ew, d) Kreis (Startpunkt, Radius, Start/Endwinkel, Drehung)
closePath() Beendet den Pfad
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 55
Canvas – API Überblick - Styling
strokeStyle Linieneigenschaften
fillStyle Fülleigenschaften
lineWidth Linienstärke
lineCap butt (standard), round, square
lineJoin miter (standard), bevel, round
stroke() Zeichnet den Umriss des Objekts
fill() Füllt das Objekt
context.fillStyle = ‚#FFF‘;context.fillStyle = ‚rgba(r, g, b, a)‘;context.lineWidth = ‚3.0‘;
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 56
Canvas – API Überblick - Text
fillText(text, x, y) Füllt einen Text aus
strokeText(text, x, y) Zeichnet Umriss des Textes
font Identisch zu CSS3 Eigenschaften
textAlign Horizontale Orientierung
baseline Vertikalte Einordnung
context.fillText(‘Bazinga‘, 50, 50)
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 57
Canvas – API Überblick - Bilder
var image = new Image();img.src = ‘picture.png‘;
img.onload = function() {context.drawImage(img, 20, 100);
}
drawImage(object, x, y, width, height, x1, y1, x2, y2)
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 58
Canvas – API Überblick - Manipulation
getImageData(x1, y1, x2, y2) Array mit Bilddaten
putImageData(data, x, y) Malt Bilddaten an eine Position
toDataUrl() base64 kodiertes Bild
var oldData = context.getImageData(0, 0, 100, 100); // var newData = [];for (var i=0; oldData.data.length;) {
newData[i] = 255 – oldData.data[i++]; // RotnewData[i] = 255 – oldData.data[i++]; // GrünnewData[i] = 255 – oldData.data[i++]; // BlaunewData[i] = oldData.data[i++]; // Alpha
}oldData.data = newData;context.putImageData(oldData, 500, 500);
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 59
Canvas – Context Stack
context.save();context.restore();
fillStyle (Grün)
save
fillStyle (Rot)
fillRect (Rot)
fillStyle (Gelb)
save
fillRect (Gelb)
restore
fillStyle (Grün)
save
fillStyle (Rot)
fillRect (Rot)
fillStyle (Gelb)
fillRect (Gelb)
restore
fillStyle (Grün)
fillRect (Grün)
context.canvas.height = context.canvas.height;
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 60
Canvas - Transformationen
context.translate(x, y);
context.rotate(angle); // als Radiant (Winkel*PI)/180
context.scale(x, y);
context.transform(m11, m12, m21, m22, dx, dy);
TranslationDrehungSkalierung
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 62
I Hardwarebeschleunigt
I OpenGL ES 2.0
I Vertex- und Pixel-Shader
I Texturen
I BufferObjects
I Workshop nächstes Jahr
Canvas – WebGL in einer Folie
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 65
HTML5 Geolocation – Hands-On
I Smiley
• Gelbes Gesicht• Rote Nase• Schwarze Augen• Grüner Mund (Halbkreis reicht)
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 66
Demo
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 68
I IP Adresse
I GPS
I Wi-Fi
I Handy
I Benutzerdefiniert
Geolocation - Sources
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 69
PRIVACY
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 70
Geolocation
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options
);
var id = navigator.geolocation.watchPosition(successCallback, errorCallback, options
);
navigator.geolocation.clearWatch(id);
if (navigator.geolocation) {}
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 71
Geolocation - SuccessHandler
function successHandler(position) {}
position.coords.latitude Breitengrad
position.coords.longitude Längengrad
position.coords.accuracy Genauigkeit in Metern
position.timestamp Zeitstempel der Koordinaten
position.coords.altitude Höhe in Metern (*)
position.coords.altitudeAccuracy Genauigkeit in Metern (*)
position.coords.heading Richtung relativ zum Geografischen Nordpol (*)
position.coords.speed Geschwindigkeit in m/s (*)
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 72
Geolocation - ErrorHandler
function errorHandler(error) {switch(error.code) { … }
}
UNKNOWN_ERROR 0 Ein anderer Fehler
PERMISSION_DENIED 1 Erlaubnis vom User verweigert
POSITION_UNAVAILABLE 2 Position konnte nicht bestimmt werden
TIMEOUT 3 Zeitlimit überschritten
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 73
Geolocation - Options
enableHighAccuracy Sofern unterstützt wird eine besserer Positions- erkennungstechnik verwendet (true / false, Standard: false)
timeout Wie lange darf die Berechnung der Position in Millisekunden dauern (Standard: Infinity)
maximumAge Wie alt darf die Position maximal sein in Millisekunden (Standard: 0)
var options = {enableHighAccuracy: true, timeout: 10000,maximumAge: 1000000
};
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 76
HTML5 Geolocation – Hands-On
I One-Shot Position Request
I Weiterleiten auf
http://maps.google.de/maps?f=q&source=s_q&hl=de&geocode=&q=[latitude],[longitude]&ie=UTF8&z=9
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 77
Demo
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 78
Und was gibt‘s da sonst noch ?
HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 79
FRAGEN ?
© 2010 Mayflower GmbH
Peter [email protected]+49 931 35965 1122
Mayflower GmbHPleichertorstr. 297070 Würzburg
Vielen Dank für Ihre Aufmerksamkeit!
Kontakt