Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Oliver Sonnauer Mobile Web-Apps.

Ähnliche Präsentationen


Präsentation zum Thema: "Oliver Sonnauer Mobile Web-Apps."—  Präsentation transkript:

1 Oliver Sonnauer Mobile Web-Apps

2 Besonderheiten mobiler Anwendungen Netzwerk Mobilgerät Internet auf mobilen Geräten Wireless Application Protokoll (WAP) Funktionsprinzip von 1.1 – 1.2 WAP 2.0 Praktische Verfahrensweisen Design mehrerer Anwendungsvarianten Bedachter Gebrauch von Ressourcen Design für verschiedene Interaktionsmethoden Anwendungsdaten Grafiken Zusammenfassung 2

3 Besonderheiten mobiler Anwendungen Netzwerk Unterschiedliche Bandbreiten und Latenzzeiten beeinträchtigen die Performance einer Webanwendung Verlässlichkeit des Netzwerkes kann die sichere Datenübertragung beeinflussen Verfügbarkeit des Netzes variiert sehr stark 3 StandardUplinkDownlink GPRS53,6 kbit/s EDGE110 kbit/s220 kbit/s HSUPA / HSDPA1450 kbit/s7200 kbit/s

4 Besonderheiten mobiler Anwendungen Mobilgerät Generell viele verschiedene Geräte und Plattformen Auswahl von 5 aktuellen Plattformen 4 HerstellerPlattform Nokia (Symbian)Symbian OS GoogleAndroid AppleiPhone OS MicrosoftWindows Mobile PalmPalm webOS

5 Besonderheiten mobiler Anwendungen Mobilgerät Einschränkungen die Geräte mit sich bringen kleine Displays (z.B.: 240x320) langsame CPU (z.B.: ARM 32bit RISC CPU ~370 MHz) Wenig Arbeits- und Festspeicher Batterieverbrauch beachten (häufiges lesen/schreiben auf Festspeicher, CPU intensive Berechnungen) Eingabemöglichkeiten (Tastatur, Touchscreen, Sprache) 5

6 Internet auf mobilen Geräten Aufgrund der genannten Einschränkungen, gibt es seit 1997 eine Sammlung von Techniken und Protokollen, zur Darstellung von Internetinhalten auf mobile Geräten Wireless Application Protokoll (WAP) Version 1.0 war unausgereift, keine Browsersoftware und keine WAP fähigen Endgeräte Version 1.1 übernahm XHTML Konventionen. Nicht kompatibel zu 1.0. Konnte sich durchsetzen. Jedes Mobiltelefon wurde WAP fähig. WML als Berscheibungssprache für Websites (zuvor HDML) Idee war, Lesbarkeit der Beschreibungssprache und Reduktion der zu übertragenden Daten. Widersprüchliche Anforderung Daher Kodierung des Quelltextes in eine binär Form zur Übertragung Keine direkte Kommunikation mit dem Web-Server 6

7 Funktionsprinzip von WAP 1.1 – Mobile Device binäre Anfrage an Gateway WAP-Gateway (proxy) Umwandeln in WML Quelltext http request an Server WEB-Server Empfängt request mit WML Dokument Bereitet response für Mobile Device vor Mobile Device Empfängt WMLC und stellt es dar WAP-Gateway (proxy) Codierung in binär Form (WMLC) Senden an Mobile Device WEB-Server Sendet response mit WML Dokument

8 Internet auf mobilen Geräten WAP 2.0 Kodierung verworfen bzw. darf umgangen werden. Somit wurde eine direkte Kommunikation mit Web-Servern möglich. Moderne Geräte können auch HTML Dokumente direkt anzeigen. Sind nicht mehr auf WML angewiesen. Hat sich kaum durchgesetzt da verhältnismäßig teuer gegenüber den gesunkenen Internetgebühren für Mobilgeräte und spärliches Angebot an Content Konkurrenz zu WAP ist i-mode. Erfolgreichster mobile Datendienst der Welt i-mode in Deutschland 2002 eingeführt und 2008 eingestellt 8

9 Internet auf mobilen Geräten WML praktisch bedeutungslos. Für die Praxis genügt Optimierung der Websites auf Mobile Device spezifische Einschränkungen W3C schlägt „best practices“ vor, um Web Content auf Mobile Devices zu bringen Oktober

10 Praktische Verfahrensweisen

11 Design mehrerer Anwendungsvarianten Eine Anwendung, die versucht alles abzudecken, ist zu aufwändig und kann unübersichtlich werden Sehr viele Abfragen auf diverse Geräteeigenschaften Einteilung der Zielgeräte in Klassen Klasse A XHTML Basic 1.1 CSS JPEG und GIF 89a Eingeschränkter Scriptsupport Klasse B: AJAX fähig Klasse C: spezielle API Funktionen stehen zusätzlich zur Verfügung. (z.B. Zugriff auf GPS System)

12 Bedachter Gebrauch von Ressourcen Wichtige Aspekte: Energieverbrauch senken, Batterielebenszeit beachten Netzwerkzugriffe und Netzwerkbelastung minimieren Datenkomprimierung HTTP 1.1 kennt gzip und DEFLATE Algorithmen. Der Browser muss dies Unterstützen. Web Server muss dafür konfiguriert werden. Z.B. für Apache WebServer in.htaccess Datei Browser request GET /index.html HTTP/1.1 Accept-encoding: gzip 1 KB 2. Web Server findet Datei Durchsucht Komprimierungsfilterregeln auf angefragten Dateityp oder mime- Typ (z.B. text/html) Komprimiert Datei 3. Web Server response HTTP/ OK Content-encoding: gzip 10 KB 4. Browser empfängt Dekomprimierung Anzeige

13 Bedachter Gebrauch von Ressourcen Datenkomprimierung Lohnt sich nur für größere Daten, die sich gut komprimieren lassen (z.B. sehr große Textdateien) Nicht zu empfehlen bei komprimierten Bildern (JPG) oder sehr kleinen Textdateien Auch Komprimierung kostet Energie. Daher sinnvoll einsetzen. 13

14 Bedachter Gebrauch von Ressourcen HTTP 1.1 Cache Möglichkeiten Nutzen Die hohe Latenz und niedrige Bandbreite des Netzes beeinträchtigt die useability von Websites Es lohnt sich, Bilder, Stylesheets und Sites zu cachen Kann auch dazu dienen, Wiederverwendung von speziell auf ein Gerät angepassete Sites, für andere Geräte zu vermeiden. Cache-Control public Daten im Cache können von anderen Zwischenstellen, vom Server zum Client, gespeichert werden. Z.B. bei Proxy Servern private Daten unterscheiden sich für jeden Client. Nur der Browser des anfragenden Clients kann die Daten für sich in den Cache legen nocache Nicht zum cachen bestimmt. Z.B. nützlich für Ergebnisse von Suchanfragen 14

15 Bedachter Gebrauch von Ressourcen Minimierung der Größe der Anwendung Bei HTML, CSS und JavaScript Kommentare und WhiteSpace entfernen. Ersetzung von Variablen und Methodennamen durch kurze Bezeichnungen Nicht von Hand erledigen. Es gibt dafür Programme. Nur für die Programmversion, die ausgeliefert werden soll. 15

16 Design für verschiedene Interaktionsmethoden Navigieren durch die Anwendung mittels selektierbaren Elementen Fokus Basiert Elemente können weit auseinander platziert sein Browserfokus springt von Link zu Link Aktuelle Position ist erkennbar durch hervorgehobenen Link Zeiger Basiert Durch Tasten lässt sich ein Zeiger beliebig auf der sichtbaren Fläche bewegen SE die logisch zusammengehören, müssen nahe zusammen sein, da Zeigerbewegung oft sehr langsam SE müssen groß genug sein, da Zeiger sich auf einem Pixelraster bewegt. Grafische Anzeige sobald Zeiger den aktivierbaren Bereich eines SE betritt bzw. verlässt. 16

17 Design für verschiedene Interaktionsmethoden Touchscreen Basiert Ereignisse treten direkt an der Stelle auf, wo der Bildschirm berührt wird Große SE (mind. 30 pixel in der Höhe) und weiter auseinander, damit Selektion bequem möglich ist. Keine Elemente sind fokussiert bevor sie ausgewählt wurden. Z.B. „rollover“ Effekt bei Links funktioniert nicht 17

18 Anwendungsdaten Anwendungen müssen oft Daten lokal und persistent Ablegen. Cookies Sparsam Verwenden, werden bei jedem Request mit gesendet Könnten abgeschaltet sein durch Einstellung am Gerät oder sogar durch das Mobilnetz Anwendung sollte auch ohne Cookies funktional bleiben 18

19 Anwendungsdaten Client-side Storage API APIs zum Abspeichern von evtl. auch größeren Datenbeständen auf dem Mobilgerät. (BONDI, HTML5,...) Reichen von simplen key=value Modellen bis zu SQL Datenbanken Beispiel für HTML5 window.openDatabase( DB-Name, DB-Version, Anzeigename, geschätzte Größe in Bytes) transaction.executeSQL( SQL-Statement, SQL- Parameter, Resultset-Callback, Error-Callback ) 19

20 Anwendungsdaten Client-side Storage API 20 function initDb(){ if(window.openDatabase) { db = window.openDatabase("testDb","","DB Test", ); } else { alert("DB nicht unterstützt") } function insertDb(key, value) { db.transaction(function(tx) { tx.executeSql("INSERT INTO TestTable VALUES(?, ?)", [ key, value ], function(tx, rs) { // … }, function(tx, error) { // … }); } function selectDb() { db.transaction(function(tx) { tx.executeSql("CREATE TABLE IF NOT EXISTS TestTable(key TEXT, value TEXT)", [], function(tx, rs){}, function(tx, error){}); tx.executeSql("SELECT * FROM TestTable", [], function(tx, rs) { for(var i = 0; i < rs.rows.length; i++) { // … } }, function(tx, error) {}); }); }

21 Anwendungsdaten Client-side Storage API Cache-manifest zum expliziten lokalen Speichern von essentiellen Web-App Dateien. Somit kann der Benutzer die Web-App auch offline noch nutzen. 21 Clock The time is: CACHE MANIFEST clock.html clock.css clock.js

22 Grafiken JavaScript basiertes Zeichnen von Bitmaps mit -Tag in HTML5 Schneller und Speichereffizienter als ein Bild zu laden Rendering übernimmt Browser Komplexe Formen zeichnen Fotokompositionen Animationen (auch mit Benutzerinteraktion möglich) 22

23 Grafiken Simple Formen Quellcode 23 function draw() { var canvas = document.getElementById("canvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); }

24 Grafiken Komplexere Formen Quellcode (Auszug) 24 function drawShape(){ var canvas = document.getElementById('tutorial'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); // Draw shapes roundedRect(ctx,12,12,150,150,15); roundedRect(ctx,19,19,150,150,9); roundedRect(ctx,53,53,49,33,10); roundedRect(ctx,53,119,49,16,6); roundedRect(ctx,135,53,49,33,10); roundedRect(ctx,135,119,25,49,10); // Character 1 ctx.beginPath(); ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false); ctx.lineTo(34,37); ctx.fill(); // blocks for(i=0;i<8;i++){ ctx.fillRect(51+i*16,35,4,4); } for(i=0;i<6;i++){ ctx.fillRect(115,51+i*16,4,4); } for(i=0;i<8;i++){ ctx.fillRect(51+i*16,99,4,4); } ….

25 Grafiken Benutzen von skalierbaren Vektorgrafiken (SVG) XML Sprache zum definieren von Vektorgrafiken Beliebig skalierbar und daher Auflösungsunabhängig Da XML Format, Knoten und Elemente in DOM Objekt abgelegt Kann daher per JavaScript verändert werden 25

26 Grafiken SVG Grafik Quellcode 26 dummy ein SVG Smilie text {font-family:Verdana,sans-serif; font-size:60px; font-weight:bold; fill:black; stroke:black; stroke-width:4px;} ein Symbol-Smilie S V G

27 Zusammenfassung Darstellung von Web-Apps auf Mobile Devices ist einfacher geworden, da moderne Geräte die entsprechende Browsersoftware mitliefern Dennoch gilt es, für die Web-Apps und auch Websites allgemein, noch Optimierungen durchzuführen. Vor allem im Bereich Displaygröße und dynamischen Inhalten Der Problemfokus liegt nicht mehr darin, wie man den Content am schnellsten auf das Mobilgerät bringt, sondern dass eine gutes Look and Feel geschaffen wird Die Web-App sollte so erscheinen, als wäre es eine lokale Anwendung Der Aktuelle Stand der Technik bietet noch weitaus mehr. Z.B. Stichwort Widgets 27

28 End Of Document


Herunterladen ppt "Oliver Sonnauer Mobile Web-Apps."

Ähnliche Präsentationen


Google-Anzeigen