Html5 workshop Peter Voringer

© 2010 Mayflower GmbH
HTML5 Workshop
Peter Voringer I 19. November 2010

HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 2
Rocket Science

I WebWorkers
I Storage
I WebSockets
I File API
I Canvas
I Geolocation
Übersicht

WebWorkers

- Laufen im Hintergrund
- Mehrere Threads, Vorteile bei Multicore CPU
- Keine Warnmeldung bei langlaufenden Skripts
- Erhöhte Responsivität der Webanwendung
HTML5 Web Workers - Vorteile

- 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

Thread Thread
I Kommunikation über Nachrichten und Callbacks
HTML5 Web Workers - Funktionsweise
Applikation Worker

HTML5 Web Workers - Lebenszyklus
if (typeof(Worker) !== „undefined“) {
}
var worker = new Worker(„worker.js“);
worker.terminate();

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 Web Workers - Worker
function messageHandler(message) {
}
addEventListener("message", messageHandler, true);
postMessage(message);

HTML5 Web Workers - Worker
var subWorker = new Worker(“subworker.js“);
importScripts(“helper.js”, “util.js”)

FRAGEN ?

Hands-On

HTML5 Web Workers – Hands-On
math.html math.js
Erstellt Worker
Schickt jede Primzahl
zum Anzeigen zurück

Demo

Storage

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

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

Storage - Support
if (window.sessionStorage) {
var storage = window.sessionStorage;
…
}
if (window.localStorage) {
var storage = window.localStorage;
…
}

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);

Storage - Event
function storageListener(event) {
var key = event.key; // Key
var oldValue = event.oldValue; // Alter Wert im Storage
var newValue = event.newValue; // Neuer Wert im Storage
var url = event.url; // Origin Url
var storageArea = event.storageArea; // Storage Objekt
}
window.addEventListener(“storage“, storageListener, true);

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

FRAGEN ?

Hands-On

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

Demo

WebSockets

I TCP basiertes Protokoll
I Weniger Traffic / Overhead
I Geringere Latenz
I Full-Duplex Kommunikation
I ws:// bzw. wss:// Prefix
WebSockets

WebSockets – Protokoll - Request
GET /demo HTTP/1.1
Host: example.com
Connection: Upgrade
Sec-WebSocket-Key2: 12998 5 Y3 1 .P00
Sec-WebSocket-Protocol: sample
Upgrade: WebSocket
Sec-WebSocket-Key1: 4 @1 46546xW%0l 1 5
Origin: http://example.com
^n:ds[4U

WebSockets – Protokoll - Response
HTTP/1.1 101 WebSocket Protocol Handshake
Upgrade: WebSocket
Connection: Upgrade
Sec-WebSocket-Origin: http://example.com
Sec-WebSocket-Location: ws://example.com/demo
Sec-WebSocket-Protocol: sample
8jKS'y:G*Co,Wxa-

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

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

WebSockets - API
if (window.WebSocket) {
…
}
var socket = new WebSocket(“ws://www.test.de/echo“);
socket.close();

WebSockets - API
socket.onopen = function() {}
socket.onclose = function() {}
socket.onmessage = function(message) {
}
socket.send(“Some Text“);

FRAGEN ?

Hands-On

WebSockets – Hands-On
I Chat Client
• Aufbauen von 3 Connections zum Server
• Input Feld und 3 Buttons zum Absenden
• Anzeigen von empfangenen Nachrichten

Demo

File API

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) {
…
}

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);
}

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

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

File API - FileReader
data:[<mediatype>][;base64],<data>
data:,Hello%2C%20World!
Einfacher Text
data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D
base64 kodierter Text (von oben)
data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E
HTML Dokument mit <h1>Hello, World</h1>
data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBT
UEAALGP……….

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

Hands-On

File API – Hands-On
I Auswählen von mehreren Bilddateien
I Darstellen als Thumbnail

Demo

Canvas

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‘);

Canvas – 2D – Einfaches Beispiel
var context = canvas.getContext(‘2d‘);
context.fillStyle = ‚rgb(255, 0, 0)‘;
context.fillRect(20, 40, 240, 160);
X-Achse
Y-Achse
(0,0)
(20,40)
(240,160)

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

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‘;

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)

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)

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++]; // Rot
newData[i] = 255 – oldData.data[i++]; // Grün
newData[i] = 255 – oldData.data[i++]; // Blau
newData[i] = oldData.data[i++]; // Alpha
}
oldData.data = newData;
context.putImageData(oldData, 500, 500);

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;

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);
TranslationDrehung
Skalierung

Und WebGL?

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

FRAGEN ?

Hands-On

HTML5 Geolocation – Hands-On
I Smiley
• Gelbes Gesicht
• Rote Nase
• Schwarze Augen
• Grüner Mund (Halbkreis reicht)

Demo

Geolocation

I IP Adresse
I GPS
I Wi-Fi
I Handy
I Benutzerdefiniert
Geolocation - Sources

PRIVACY

Geolocation
navigator.geolocation.getCurrentPosition(
successCallback,
errorCallback,
options
);
var id = navigator.geolocation.watchPosition(
successCallback,
errorCallback,
options
);
navigator.geolocation.clearWatch(id);
if (navigator.geolocation) {
}

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 (*)

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

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
};

FRAGEN ?

Hands-On

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

Demo

Und was gibt‘s
da sonst noch ?

FRAGEN ?

© 2010 Mayflower GmbH
Peter Voringer
peter.voringer@mayflower.de
+49 931 35965 1122
Mayflower GmbH
Pleichertorstr. 2
97070 Würzburg
Vielen Dank für Ihre Aufmerksamkeit!
Kontakt

Html5 workshop Peter Voringer

Recommended

Recommended

More Related Content

Similar to Html5 workshop Peter Voringer

Similar to Html5 workshop Peter Voringer (20)

More from Mayflower GmbH

More from Mayflower GmbH (20)

Html5 workshop Peter Voringer