MobileWebapplikations-  Entwicklung     Kai Kramhöft
Agenda:1. Einführung2. Herausforderung Entwicklung mobile Geräte3. HTML54. Javascript Frameworks (JQuery Mobile)5. Phonega...
App-Downloads(iOS, Android) zu Weihnachten1,2 MilliardenZahl täglicher AndroidAktivierungen:700.000
Herausforderungen mobiler WebseitenHerausforderung:• Wie schaffe ich es, eine  Vielzahl von Geräten mit  unterschiedlichen...
Lösung:
Unterstützung HTML5 in mobilen Browsern:www.caniuse.com
Was gehört zuHTML5?
HTML5 ~= HTML +         CSS(3) +         Javascript
HTML5 Features:•   Semantics & Markups•   Offline Storage•   File / Hardware Access•   Realtime / Communication•   Graphic...
Semantics & Markup• Elementtypen zur Strukturierung der  Webseite• Microdata• Microformats
Neue Tags•   <body>     <header>                   <aside>      <hgroup>       <h1>Page title</h1>       Top links...     ...
Microformats
Offline Storage•   Application Cache•   Local Storage•   Web SQL•   Online / Offline Events
Application Cache• Spezifieren des Cache:<html manifest=“meinCache.appcache">...</html>• Auflistung zu cachender DateienCA...
Application Cache// use localStorage for persistent storage// use sessionStorage for per tab storagesaveButton.addEventLis...
Web SQLvar db =window.openDatabase("DBName", "1.0", "description", 5*1024*1024); //5MBdb.transaction(function(tx) { tx.exe...
Online und Offline Events document.body.addEventListener(„offline“, function () { ... }, false); document.body.addEventLis...
Audio + Video• Unterstützte Formate: Ogg Theora, H.264, WebM• Browserabhängig• Beispiel:   <audio id="audio" src="sound.mp...
Device Access• Geolocation• Camera• Contacts
Geo Location (1/3)
Geo Location (2/3)
Geo Location (3/3)if (navigator.geolocation) {  navigator.geolocation.getCurrentPosition(function(position) {    var latLn...
Camera API (Phonegap)navigator.camera.getPicture(onSuccess, onFail, { quality: 50,  destinationType: Camera.DestinationTyp...
Contact API (Phonegap)function onSuccess(contacts) {   alert(Found  + contacts.length +  contacts.);};function onError(con...
Connectivity: Web Socketsvar socket = newWebSocket(ws://html5rocks.websocket.org/echo);socket.onopen = function(event) { s...
3D, Graphics & Effects•   Canvas•   CSS3 3D Features•   WebGL•   SVG
Javascript Frameworks•   JQuery Mobile•   Sencha Touch•   Jo•   jQTouch•   Xui•   Lawnchair•   EmbedJS
JQuery Mobile• Touch-optimiertes Web Framework für Smartphones und  Tablets• Auf JQuery aufgesetzt• Unterstützt iOS, Andro...
Was ist Phonegap? (1/2)•   Werkzeug, um mobile Applikationen mit Webtechnologien zu    bauen•   HTML5 für das Layout•   Ja...
Was ist Phonegap? (2/2)• Eine Sammlung von Tools und eine konsistente geräte-  übergreifende API• Die gleichen Javascript ...
Phonegap: Unterstütze Plattformen•   iOS•   Android*•   Blackberry•   webOS!•   Symbian*•   MeeGo*•   Windows Mobile•   Wi...
Architektur einer Phonegap App• Javascript ruft via XHR Daten beim Server in Form von JSON  Daten ab• HTML/JS/CSS + Grafik...
Demo
QuellenHTML5:Dive into HTML5: http://diveintohtml5.info/HTML5 im Überblick: http://www.peterkroener.de/artikel/html5-im-ue...
Danke!
Mobile Webentwicklung mit HTML5
Upcoming SlideShare
Loading in...5
×

Mobile Webentwicklung mit HTML5

3,104

Published on

Vortrag über die mobile Webentwicklung mit HTML5

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,104
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Mobile Webentwicklung mit HTML5"

  1. 1. MobileWebapplikations- Entwicklung Kai Kramhöft
  2. 2. Agenda:1. Einführung2. Herausforderung Entwicklung mobile Geräte3. HTML54. Javascript Frameworks (JQuery Mobile)5. Phonegap6. Demo
  3. 3. App-Downloads(iOS, Android) zu Weihnachten1,2 MilliardenZahl täglicher AndroidAktivierungen:700.000
  4. 4. Herausforderungen mobiler WebseitenHerausforderung:• Wie schaffe ich es, eine Vielzahl von Geräten mit unterschiedlichen Betriebssystemen unterstützen, und diese nicht native zu programmieren und sorge dabei für eine korrekte Darstellung und Funktionsweise von Applikation auf Geräten mit unterschiedlichen Möglichkeiten (beispielsweise Displaygröße)
  5. 5. Lösung:
  6. 6. Unterstützung HTML5 in mobilen Browsern:www.caniuse.com
  7. 7. Was gehört zuHTML5?
  8. 8. HTML5 ~= HTML + CSS(3) + Javascript
  9. 9. HTML5 Features:• Semantics & Markups• Offline Storage• File / Hardware Access• Realtime / Communication• Graphics / Multimedia• CSS3 Styling
  10. 10. Semantics & Markup• Elementtypen zur Strukturierung der Webseite• Microdata• Microformats
  11. 11. Neue Tags• <body> <header> <aside> <hgroup> <h1>Page title</h1> Top links... <h2>Page subtitle</h2> </aside> </hgroup> </header> <figure> <nav> <img src="..."/> <ul> <figcaption>Chart 1.1</figcaption> Navigation... </figure> </ul> </nav> <section> <footer> <article> Copyright © <header> <time datetime="2010-11-08">2010</time>. <h1>Title</h1> </footer> </header> <section> </body> Content... </section> </article> <article>
  12. 12. Microformats
  13. 13. Offline Storage• Application Cache• Local Storage• Web SQL• Online / Offline Events
  14. 14. Application Cache• Spezifieren des Cache:<html manifest=“meinCache.appcache">...</html>• Auflistung zu cachender DateienCACHE MANIFEST# version 1.0.0CACHE:/html5/src/logic.js/html5/src/style.css/html5/src/background.pngNETWORK:*
  15. 15. Application Cache// use localStorage for persistent storage// use sessionStorage for per tab storagesaveButton.addEventListener(click, function () { window.localStorage.setItem(value, area.value); window.localStorage.setItem(timestamp, (newDate()).getTime());}, false);textarea.value = window.localStorage.getItem(value);
  16. 16. Web SQLvar db =window.openDatabase("DBName", "1.0", "description", 5*1024*1024); //5MBdb.transaction(function(tx) { tx.executeSql("SELECT * FROMtest", [], successCallback, errorCallback);});
  17. 17. Online und Offline Events document.body.addEventListener(„offline“, function () { ... }, false); document.body.addEventListener(„online“, function () { ... }, false);
  18. 18. Audio + Video• Unterstützte Formate: Ogg Theora, H.264, WebM• Browserabhängig• Beispiel: <audio id="audio" src="sound.mp3" controls> </audio> document.getElementById("audio").muted = false; <video id="video" src="movie.webm" autoplay controls></ video> document.getElementById("video").play();
  19. 19. Device Access• Geolocation• Camera• Contacts
  20. 20. Geo Location (1/3)
  21. 21. Geo Location (2/3)
  22. 22. Geo Location (3/3)if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var latLng = new google.maps.LatLng( position.coords.latitude, position.coords.longitude); var marker = new google.maps.Marker({position: latLng, map:map}); map.setCenter(latLng); }, errorHandler);}
  23. 23. Camera API (Phonegap)navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.FILE_URI });function onSuccess(imageURI) { var image = document.getElementById(myImage); image.src = imageURI;}function onFail(message) { alert(Failed because: + message);}
  24. 24. Contact API (Phonegap)function onSuccess(contacts) { alert(Found + contacts.length + contacts.);};function onError(contactError) { alert(onError!);};// find all contacts with Bob in any name fieldvar options = new ContactFindOptions();options.filter="Bob";var fields = ["displayName", "name"];navigator.contacts.find(fields, onSuccess, onError, options);
  25. 25. Connectivity: Web Socketsvar socket = newWebSocket(ws://html5rocks.websocket.org/echo);socket.onopen = function(event) { socket.send(Hello, WebSocket);};socket.onmessage = function(event) { alert(event.data); }socket.onclose = function(event) { alert(closed); }
  26. 26. 3D, Graphics & Effects• Canvas• CSS3 3D Features• WebGL• SVG
  27. 27. Javascript Frameworks• JQuery Mobile• Sencha Touch• Jo• jQTouch• Xui• Lawnchair• EmbedJS
  28. 28. JQuery Mobile• Touch-optimiertes Web Framework für Smartphones und Tablets• Auf JQuery aufgesetzt• Unterstützt iOS, Android, Blackberry, ...
  29. 29. Was ist Phonegap? (1/2)• Werkzeug, um mobile Applikationen mit Webtechnologien zu bauen• HTML5 für das Layout• Javascript für den Zugriff auf Geräte-Funktionalitäten• CSS3 für das Design
  30. 30. Was ist Phonegap? (2/2)• Eine Sammlung von Tools und eine konsistente geräte- übergreifende API• Die gleichen Javascript Aufrufe um Geräte Funktionen aufzurufen.• Beispiel: navigator.notification.vibrate();• Funktioniert mit JQuery Mobile zusammen
  31. 31. Phonegap: Unterstütze Plattformen• iOS• Android*• Blackberry• webOS!• Symbian*• MeeGo*• Windows Mobile• Windows Phone• Samsung Bada
  32. 32. Architektur einer Phonegap App• Javascript ruft via XHR Daten beim Server in Form von JSON Daten ab• HTML/JS/CSS + Grafiken sind auf dem Device , zusammengepackt beim Build Process.• JavaScript kann abgerufene Daten in einer SQLite Datenbank im Browser zur Offline-Bearbeitung speichern• JavaScript kann auch Bilder cachen
  33. 33. Demo
  34. 34. QuellenHTML5:Dive into HTML5: http://diveintohtml5.info/HTML5 im Überblick: http://www.peterkroener.de/artikel/html5-im-ueberblick/HTML5 rocks: http://www.html5rocks.com/en/JQuery Mobile:Homepage: http://jquerymobile.com/Phonegap mit JQuery Mobile: http://jquerymobile.com/test/docs/pages/phonegap.htmlPhonegap:Homepage: http://phonegap.com/Präsentationen zu Phonegap: http://phonegap.com/presentations/
  35. 35. Danke!

×