Your SlideShare is downloading. ×
Html5 workshop   Peter Voringer
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html5 workshop Peter Voringer

866
views

Published on

Html 5 Hands On Workshop Script with notes

Html 5 Hands On Workshop Script with notes

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
866
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. © 2010 Mayflower GmbH HTML5 Workshop Peter Voringer I 19. November 2010
  • 2. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 2 Rocket Science
  • 3. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 3
  • 4. 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
  • 5. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 5 WebWorkers
  • 6. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 6
  • 7. 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
  • 8. 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
  • 9. 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
  • 10. 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();
  • 11. 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);
  • 12. 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);
  • 13. 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”)
  • 14. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 14 FRAGEN ?
  • 15. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 15 Hands-On
  • 16. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 16 HTML5 Web Workers – Hands-On math.html math.js Erstellt Worker Schickt jede Primzahl zum Anzeigen zurück
  • 17. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 17 Demo
  • 18. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 18 Storage
  • 19. 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
  • 20. 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
  • 21. 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; … }
  • 22. 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);
  • 23. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 23 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);
  • 24. 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
  • 25. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 25 FRAGEN ?
  • 26. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 26 Hands-On
  • 27. 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
  • 28. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 28 Demo
  • 29. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 29 WebSockets
  • 30. 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
  • 31. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 31 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
  • 32. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 32 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-
  • 33. 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
  • 34. 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
  • 35. 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();
  • 36. 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“);
  • 37. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 37 FRAGEN ?
  • 38. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 38 Hands-On
  • 39. 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
  • 40. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 40 Demo
  • 41. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 41 File API
  • 42. 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) { … }
  • 43. 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); }
  • 44. 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
  • 45. 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
  • 46. 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%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……….
  • 47. 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
  • 48. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 48 Hands-On
  • 49. 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
  • 50. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 50 Demo
  • 51. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 51 Canvas
  • 52. 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‘);
  • 53. 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-Achse (0,0) (20,40) (240,160)
  • 54. 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
  • 55. 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‘;
  • 56. 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)
  • 57. 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)
  • 58. 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++]; // 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);
  • 59. 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;
  • 60. 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); TranslationDrehung Skalierung
  • 61. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 61 Und WebGL?
  • 62. 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
  • 63. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 63 FRAGEN ?
  • 64. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 64 Hands-On
  • 65. 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)
  • 66. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 66 Demo
  • 67. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 67 Geolocation
  • 68. 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
  • 69. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 69 PRIVACY
  • 70. 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) { }
  • 71. 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 (*)
  • 72. 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
  • 73. 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 };
  • 74. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 74 FRAGEN ?
  • 75. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 75 Hands-On
  • 76. 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
  • 77. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 77 Demo
  • 78. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 78 Und was gibt‘s da sonst noch ?
  • 79. HTML5 Workshop I Mayflower GmbH I 19. November 2010 I 79 FRAGEN ?
  • 80. © 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

×