• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mobile Webentwicklung mit HTML5
 

Mobile Webentwicklung mit HTML5

on

  • 3,551 views

Vortrag über die mobile Webentwicklung mit HTML5

Vortrag über die mobile Webentwicklung mit HTML5

Statistics

Views

Total Views
3,551
Views on SlideShare
3,543
Embed Views
8

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 8

http://www.hpnw.de 8

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Mobile Webentwicklung mit HTML5 Mobile Webentwicklung mit HTML5 Presentation Transcript

    • MobileWebapplikations- Entwicklung Kai Kramhöft
    • Agenda:1. Einführung2. Herausforderung Entwicklung mobile Geräte3. HTML54. Javascript Frameworks (JQuery Mobile)5. Phonegap6. Demo
    • 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 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)
    • 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• Graphics / Multimedia• CSS3 Styling
    • Semantics & Markup• Elementtypen zur Strukturierung der Webseite• Microdata• Microformats
    • 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>
    • 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 DateienCACHE MANIFEST# version 1.0.0CACHE:/html5/src/logic.js/html5/src/style.css/html5/src/background.pngNETWORK:*
    • 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);
    • Web SQLvar db =window.openDatabase("DBName", "1.0", "description", 5*1024*1024); //5MBdb.transaction(function(tx) { tx.executeSql("SELECT * FROMtest", [], successCallback, errorCallback);});
    • Online und Offline Events document.body.addEventListener(„offline“, function () { ... }, false); document.body.addEventListener(„online“, function () { ... }, false);
    • 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();
    • 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 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);}
    • 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);}
    • 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);
    • 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); }
    • 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, Android, Blackberry, ...
    • 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
    • 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
    • Phonegap: Unterstütze Plattformen• iOS• Android*• Blackberry• webOS!• Symbian*• MeeGo*• Windows Mobile• Windows Phone• Samsung Bada
    • 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
    • Demo
    • 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/
    • Danke!