html5 workshop peter voringer

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

Upload: mayflower-gmbh

Post on 13-Jul-2015

920 views

Category:

Technology


1 download

TRANSCRIPT

© 2010 Mayflower GmbH

HTML5 Workshop

Peter Voringer I 19. November 2010

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

Rocket Science

Vorführender
Präsentationsnotizen
HTML aus SGML 1999 HTML 4.01 des W3C W3C arbeitete an XHTML 2.0 WHATWG Web Hypertext Application Technology Working Group (Apple, Mozilla, Opera), 2004, Plugin Free as goal 2006 W3C -> HTML5 First Draft in 2008 XHTML 2 Gestoppt 2009 2012 candidate recommendation 2022 proposed recommendation (Zwei Browser mit vollständiger Specimplementierung, gibt‘s nicht mal für HTML4) Internet Engineering Task Force (IETF) – Protocols, WebSocket API

HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 3

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 5

WebWorkers

HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 6

Vorführender
Präsentationsnotizen
3 von vielen Gründen, wieso Web Workers sinnvoll sind

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

Vorführender
Präsentationsnotizen
Kein IE Allerdings Zugriff auf die JS Timing API Nicht unbedingt ein Nachteil

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

Vorführender
Präsentationsnotizen
Aynchron lose Kopplung Blackbox Serialisieren der Nachricht Nicht alles kann serialisiert werden (manche Browser Elemente, Objekte mit zyklischen Referenzen)

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

Vorführender
Präsentationsnotizen
Überprüfung, ob Workers unterstützt werden Erzeugen eines neuen Workers Zerstören eines Workers

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

Vorführender
Präsentationsnotizen
Wie bekommt die Anwendung die Daten vom Worker? Callback für normale Nachricht Callback für Error Meldungen (capturing oder bubbling phase) Senden einer Nachricht an den Worker

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

Vorführender
Präsentationsnotizen
Es können im Worker selbst wieder Worker erstellt werden (sollte man nicht rekursiv machen), funktioniert derzeit nicht wirklich Synchrones einbinden von JavaScript Files

HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 14

FRAGEN ?

HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 15

Hands-On

Vorführender
Präsentationsnotizen
math.html erstellt Worker Worker gibt jede Primzahl zurück

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

Vorführender
Präsentationsnotizen
2 Buttons, zum starten und stoppen Ein Button startet den Worker Ein Button terminiert den Worker Es gewinnt, wer mir als erstes eine 6-stellige Primzahl über den Jabber Team-Chat schickt (100003) Ich will den Code dann auch sehen :)

HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 17

Demo

Vorführender
Präsentationsnotizen
http://localhost/webworkers/

HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 18

Storage

Vorführender
Präsentationsnotizen
Die alternative zu Cookies Können mehr Daten speichern Und hey, wir von allen Browsern unterstützt (IE >= 8) Key-Value Store Kann genutzt werden, um zwischen Fenstern mit der gleichen Origin zu Kommunizieren

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

Vorführender
Präsentationsnotizen
QUOTA_EXCEEDED_ERR Default 5MB pro Origin

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 25

FRAGEN ?

HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 26

Hands-On

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

Vorführender
Präsentationsnotizen
http://localhost/storage/

HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 29

WebSockets

Vorführender
Präsentationsnotizen
Keine Unterstützung von IE, FF erst ab 4, Opera erst ab 10.70, Safari ab 5

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

Vorführender
Präsentationsnotizen
Keine Details zum Protokoll, da es sich noch ändern und sicherlich eh niemand einen Server implementieren will

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

Vorführender
Präsentationsnotizen
Solange ein Socket geöffnet ist kann fleißig gesendet werden

HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 37

FRAGEN ?

HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 38

Hands-On

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

Vorführender
Präsentationsnotizen
http://localhost/websockets/ http://localhost/websockets/WebSocketServer.php

HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 41

File API

Vorführender
Präsentationsnotizen
Keine Unterstützung von IE, FF erst ab 4, Opera erst ab 10.70, Safari ab 5 Zugriff auf Dateien bereits im Browser Interessant, um sie gleich direkt weiterzuverarbeiten (Bilder) oder im Hintergrund zu übermitteln

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

Vorführender
Präsentationsnotizen
files ist ein FileList Objekt Kann verwendet werden wie ein array length Attribute, item() Methode und [] Zugriffsoperator

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

Vorführender
Präsentationsnotizen
Vorsicht: Viele falsche Infos im Umlauf bzw. auf deprecated und non-standard achten name und lastModifiedDate nur bei Dateien, nicht nach slice Verfügbar So, und wie komm ich jetzt an die Daten??

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

Vorführender
Präsentationsnotizen
Schmeisst eine FileException mit einem Code

HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 48

Hands-On

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

Vorführender
Präsentationsnotizen
http://localhost/fileapi/

HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 51

Canvas

Vorführender
Präsentationsnotizen
Wird zur Abwechslung mal von Microsoft unterstützt, für IE < 9 gibt es excanvas.js, als Wrapper, der Context Operationen auf VML umbiegt

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

Vorführender
Präsentationsnotizen
Canvas ist ein HTML Tag Sofern es eine getContext Eigenschaft hat, wird es vom Browser unterstützt Über das Context Objekt wird die API zur Verfügung gestellt Es gibt 2D zum zeichnen mit Linien, Pfade, … WebGL Context basiert auf OpelGL ES 2.0 (iPhone), arbeitet mit Shadern (wir werden hier nur oberflächlich drauf eingehen) Sowohl 2D, als auch 3D __Hauptsächlich__ Konzepte, KEINE MATHEMATISCHE Einführung! Wen es interessiert soll sich http://www.amazon.de/Computer-Graphics-Principles-Addison-Wesley-Programming/dp/0201848406 bzw. http://www.amazon.de/OpenGL-Shading-Language-Randi-Rost/dp/0321637631/ref=sr_1_3?ie=UTF8&s=books-intl-de&qid=1289963624&sr=1-3 und http://www.amazon.de/OpenGL-Programming-Guide-Official-Learning/dp/0321552628/ref=pd_bxgy_eb_img_b besorgen

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)

Vorführender
Präsentationsnotizen
Koordinaten sind keine Pixel-Koordinaten, sondern Punkte auf dem Raster Lösung: 0.5 Einheiten für Pixelgenaues zeichnen daraufaddieren (20.5, 40.5)

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

Vorführender
Präsentationsnotizen
quadrativCurveTo bezierCurveTo acrTo

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

Vorführender
Präsentationsnotizen
- Farbangaben wie in CSS3

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)

Vorführender
Präsentationsnotizen
Das Bild kann erst gezeichnet werden, wenn es geladen wurde Image Quelle, Position Breite und Höhe (optional) Ausschnitt (optional) Objekt kann auch ein anderes Canvas oder sogar ein Video sein

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

Vorführender
Präsentationsnotizen
Was gibt‘s noch: Schatten Gradienten Patterns Clipping

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;

Vorführender
Präsentationsnotizen
Man speichert den aktuellen Zustand Das ist nicht nur unbedingt die Füllfarbe, sondern können auch andere Eigenschaften sein, z.B. sehr relevant bei Transformationen (Drehungen, Translation, Skalierung) Bietet sich an, das Ganze bereits ganz am Anfang zu machen Der Komplett Reset, wenn man den Kontext nicht mehr braucht, löscht Kontext-State und Inhalt des Canvas

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

Vorführender
Präsentationsnotizen
Translation – Verschiebung in x und y Richtung Rotation – Rotieren um einen Punkt, Vorsicht bei der Reichenfolge Skalierung – Faktor für x und y Transformationsmatrix – Wer seine grauen Zellen etwas in Schwung bringen will, eher am Rande erwähnt (Transformation der Eigenvektoren, die den Raum aufspannen)

HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 61

Und WebGL?

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

Vorführender
Präsentationsnotizen
Open GL for Embedded Systems Shader ist Programmcode, der auf der Grafikkarte ausgeführt wird, geschrieben in GLSL OpenGL und GLSL Wissen vorausgesetzt

HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 63

FRAGEN ?

HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 64

Hands-On

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

Vorführender
Präsentationsnotizen
http://localhost/canvas/

HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 67

Geolocation

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

Vorführender
Präsentationsnotizen
Spec gibt nicht an, welche Technologie benutzt werden kann/soll Unterschiede in Genauigkeit und Verfügbarkeit

HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 69

PRIVACY

Vorführender
Präsentationsnotizen
User muss nutzen der Geolocation Daten explizit erlauben

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

Vorführender
Präsentationsnotizen
Wird die API Unterstützt? One-Shot Position Request Repeated Position Updates

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

Vorführender
Präsentationsnotizen
(*) -> Nicht unbedingt unterstützt, aber null, wenn nicht

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

};

Vorführender
Präsentationsnotizen
Alle Optionen optional Timeout endet im errorHandler Bessere Positionserkennungstechnik braucht evtl. mehr Strom/CPU/… MaximumAge von 0 heißt, es wird auf alle Fälle neu berechnet

HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 74

FRAGEN ?

HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 75

Hands-On

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

Vorführender
Präsentationsnotizen
http://localhost/geolocation/

HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 78

Und was gibt‘s da sonst noch ?

Vorführender
Präsentationsnotizen
Communication API: PostMessage, XMLHttpRequest Level 2 Audio / Video Tag Forms Offline Webapplications Drag&Drop Würde aber den Rahmen komplett sprengen hier alles zu behandeln http://www.chromeexperiments.com/ http://code.google.com/p/webglsamples/ http://html5demos.com/ http://www.phpguru.org/html5-examples http://html5tutorial.net/ http://www.findmebyip.com/litmus#html5-web-applications http://caniuse.com/

HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 79

FRAGEN ?

Vorführender
Präsentationsnotizen
- Frage an euch: Denkt ihr, dass Ihr das einsetzen werdet? Wenn ja, wann und in welcher Form?

© 2010 Mayflower GmbH

Peter [email protected]+49 931 35965 1122

Mayflower GmbHPleichertorstr. 297070 Würzburg

Vielen Dank für Ihre Aufmerksamkeit!

Kontakt