Your SlideShare is downloading. ×
Mobile Webentwicklung mit HTML5
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

Mobile Webentwicklung mit HTML5

3,051

Published on

Vortrag über die mobile Webentwicklung mit HTML5

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,051
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
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. MobileWebapplikations- Entwicklung Kai Kramhöft
  • 2. Agenda:1. Einführung2. Herausforderung Entwicklung mobile Geräte3. HTML54. Javascript Frameworks (JQuery Mobile)5. Phonegap6. Demo
  • 3. App-Downloads(iOS, Android) zu Weihnachten1,2 MilliardenZahl täglicher AndroidAktivierungen:700.000
  • 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. Lösung:
  • 6. Unterstützung HTML5 in mobilen Browsern:www.caniuse.com
  • 7. Was gehört zuHTML5?
  • 8. HTML5 ~= HTML + CSS(3) + Javascript
  • 9. HTML5 Features:• Semantics & Markups• Offline Storage• File / Hardware Access• Realtime / Communication• Graphics / Multimedia• CSS3 Styling
  • 10. Semantics & Markup• Elementtypen zur Strukturierung der Webseite• Microdata• Microformats
  • 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. Microformats
  • 13. Offline Storage• Application Cache• Local Storage• Web SQL• Online / Offline Events
  • 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. 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. Web SQLvar db =window.openDatabase("DBName", "1.0", "description", 5*1024*1024); //5MBdb.transaction(function(tx) { tx.executeSql("SELECT * FROMtest", [], successCallback, errorCallback);});
  • 17. Online und Offline Events document.body.addEventListener(„offline“, function () { ... }, false); document.body.addEventListener(„online“, function () { ... }, false);
  • 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. Device Access• Geolocation• Camera• Contacts
  • 20. Geo Location (1/3)
  • 21. Geo Location (2/3)
  • 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. 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. 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. 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. 3D, Graphics & Effects• Canvas• CSS3 3D Features• WebGL• SVG
  • 27. Javascript Frameworks• JQuery Mobile• Sencha Touch• Jo• jQTouch• Xui• Lawnchair• EmbedJS
  • 28. JQuery Mobile• Touch-optimiertes Web Framework für Smartphones und Tablets• Auf JQuery aufgesetzt• Unterstützt iOS, Android, Blackberry, ...
  • 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. 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. Phonegap: Unterstütze Plattformen• iOS• Android*• Blackberry• webOS!• Symbian*• MeeGo*• Windows Mobile• Windows Phone• Samsung Bada
  • 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. Demo
  • 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. Danke!

×