Your SlideShare is downloading. ×
  • Like
Mobile Web Apps
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply
Published

Die Folien meines Vortrags zur Einführung in die Entwicklung von Mobile Web Apps auf der Web DevCon 2011 in Hamburg.

Die Folien meines Vortrags zur Einführung in die Entwicklung von Mobile Web Apps auf der Web DevCon 2011 in Hamburg.

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
4,749
On SlideShare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
30
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. MOBILE WEB APPSFoto César Poyatos (http://www.flickr.com/photos/cpoyatos/5791320785)
  • 2. AGENDA• Einführung• Web Apps „handgemacht“• Frameworks• Tools
  • 3. HOLGER RÜPRICH
  • 4. APPS?
  • 5. APPS?„Der Begriff App (von der englischen Kurzform für application,das grammatische Geschlecht ist im Sprachgebrauch variabel)bezeichnet im Allgemeinen jede Form vonAnwendungsprogrammen. Im Sprachgebrauch sind damitmittlerweile jedoch meist Anwendungen für moderneSmartphones und Tablet-Computer gemeint, die über einen indas Betriebssystem integrierten Onlineshop bezogen und sodirekt auf dem Smartphone installiert werden können“Wikipedia
  • 6. ES GIBT FÜR ALLES EINE APP• Wenn du ... willst, gibt es eine App dafür • Allein im Apple App Store gibt es über 500.000 Apps • Täglich Millionen von Downloads• BITKOM - App Boom geht weiter • Mehr als 15 Millionen Deutsche nutzen Apps auf ihren Handys • 2010 waren es noch 10 Millionen • Durchschnittlich 17 Apps je Mobiltelefon Quelle BITKOM, 04.09.2011 http://www.bitkom.org/de/markt_statistik/64022_69195.aspx
  • 7. NATIV VS. WEB• Ein Großteil der Apps wird heute nativ entwickelt • Individuell für jede Plattform• Web Apps werden unabhängig von der Plattform entwickelt • Web Apps basieren auf Web Standards wie HTML5, CSS3 & JavaScript
  • 8. EINE FRAGE DER PLATTFORM 1 % 2 % 2 % 12 % WebKit J2ME RIM 43 % Android WebKit Java Symbian WebKit C++ 22 % Objective-C WebKit iOS 18 % Android iOS Symbian BlackBerry Bada Microsoft Andere Quelle Gartner, 11.08.2011 http://www.gartner.com/it/page.jsp?id=1764714
  • 9. OK ...„There is no WebKit on Mobile“ Paul Peter Koch - http://www.quirksmode.org/webkit.html
  • 10. ABER ZUMINDEST ...bleibt es bei einer Skriptsprache (JavaScript), einer Markup- Sprache (HTML) und einem Style System (CSS)
  • 11. NATIV VS. WEB• Native Apps • Web Apps • Direkter Zugriff auf Geräte APIs • Gleiche App für mehre Plattformen • Geeignet für rechenintensive Apps wie z.B. Spiele • Unabhängigkeit von Zulassungsprozessen und • Einfache Installation über Einschränkungen von App Stores Appstores • Updates und Erweiterungen lassen • Vermitteln höhere Wertigkeit sich schneller verbreiten • Leichter Einstieg für Web- Entwickler
  • 12. KLINGT SPITZE! Her mit meiner App
  • 13. HTML5, CSS3 & JAVASCRIPT Apps handgemacht
  • 14. WEBSITE ALS WEB APP• Eine Web App wird initial im Browser aufgerufen und zum Home Screen hinzugefügt
  • 15. HOME SCREEN ICON• Unterschiedliche Größen mittels sizes Attribut • 57x57 / default IPhone 3 • 72x72 IPad • 114x114 IPhone 4• Graphische Effekte <link rel="apple-touch-icon" href=" homescreen.png"> • apple-touch-icon • apple-touch-icon-precomposed
  • 16. FULLSCREEN• Das Meta Element apple- mobile-web-app-capable sorgt dafür, dass die App anschließend Fullscreen geöffnet wird web-app- capable" <meta name ="apple-mobile- content="yes">
  • 17. STARTUP IMAGE • 320x460 IPhone • 1004x768 IPad • Unterschiedliche Bilder je Auflösung oder Orientierung nur mittels Media Queries oder JavaScript ef="startup.pn g "> - touch-s tartup-image" hr<link rel="apple
  • 18. STATUSBAR STYLE• Drei Styles stehen zur Auswahl • default • black • black-translucent <meta name="apple-mobile-web-app-status -bar-style" content="black"> default">
  • 19. SKALIERUNG<meta name="viewport" content="initial-scale=1.0; maxi mum-scale=1.0; user-scalable=no">
  • 20. LAYOUTS MIT CSS3• Mobile Browser bieten eine gute CSS3 • Text-Schattierung Unterstützung • Box-Schattierung• Somit steht eine Reihe nützlicher Features zur Verfügung wie z.B: • Nachladen von Schriften mit @font- face • CSS3 Selektoren • Verläufe • Multiple Hintergrundbilder • Mehrspaltige Layouts • Deckkraft • Animationen • Alpha-Transparenz • Übergänge • Abgerundete Kanten
  • 21. IPHONE STYLES MIT CSS3• Schrift font-family: Helvetica, sans-serif;• Skalieren der Textgröße html { text-size-adjust: none; verhindern } -webkit-text-size-adjust: none; text-size-adjust: none; body { margin: 0; f; font-family: Helvetica, sans-seri background-color: #c5ccd3;• Verläufe background-image: -webkit-gradient(linear, left top , right top, color-stop(.75, transparent), background-image: -webkit- color-stop(.75, rgba(255,255,255,. 1)) gradient(...) ); background-size: 7px; -webkit-background-size: 7px; }
  • 22. HEADER header { height: 44 px; font-weigh t: b o l d; text-shado w: r g b a (0 , border-top 0,0,.7) 0 : solid 1p -1px 0; border-bot x rgba(255 t o m: s o l i d ,255,255,. 6);<header> color: #ff f; 1px rgba(0 ,0,0,.6); <h1>WSD Monitor</h1> background - c o l o r: # 8 ;"> 195af; <button id="refresh" onclick="refreshAll() background - i m a g e: -webkit-gr <span>Refresh</span> from(rgba( adient(lin ear, left top, left 255,255,25 bottom, </button> t o ( r g b a (2 5 5,255,255, 5,.4)), ), .05))</header> -webkit-gr adient(lin f r o m (t r a n s ear, left p a r e n t) , top, left bottom, t o ( r g b a (0 , 0,64,.1)) ); background - r e p e a t: n background o-repeat; - p o s i t i o n: background top left, -size: 100 bottom lef -webkit-ba % 21px, 10 t; ckground-s 0% 22px; box-sizing ize: 100% : border-b 21px, 100% -webkit-bo ox; 22px; x-sizing: } border-box ;
  • 23. INHALT<div class="group-wrapper"> <h2>DSL</h2> <ul> <li><a href="...">DSL NK</a></li> <li><a href="...">DSL BK</a></li> .group-w ">DSL h2 { </li> <li><a href="...rapper Wechsler Formular</a> ... </ul> text-shadow: #fff 0</div> 1px 0; } .group-wrapper ul { background-color: #f ff; border: solid 1px #a 9abae; border-radius: 10px ; -webkit-border-radiu s: 10px; ... } .group-wrapper ul li :not(:last-child) { border-bottom: inhe rit; }
  • 24. PAGE TRANSITIONS<div id="content"> <div id="page-slider"> #content { <section id="overview"> o v e r f l o w - x: h idden; <div class="group-wrapper"> width: 100%; <h2>DSL</h2> } <ul> #content sect <li><a href="...">DSL NK</a></li> ion { width: 50%; <li><a href="...">DSL BK</a></li> float: left; <li><a href="...">DSL Wechsler Formular</a></li> padding: 0; </ul> margin: 0; </div> } ... #page-slider </div> { -webkit-trans <section id="details"> ition: all 0. width: 200%; 5s ease-in-ou t; <h2></h2> } <pre></pre> </section> #content.deta ils #page-sli -webkit-trans der { </div> form: transla } t e3 d ( - 5 0 % , 0 ,</div> 0); #content.over view #page-sl -webkit-trans ider { form: transla } t e3 d ( 0 , 0 , 0 ) ;
  • 25. ... UND DANN WAR DAS NETZ WEG ...
  • 26. OFFLINE WEB APPS• HTML5 bietet mit dem Application Cache die Möglichkeit Web Seiten auch offline zu nutzen• Gesteuert wird dies über eine simple Textdatei, dem Cache Manifest
  • 27. CACHE MANIFEST• CACHE CACHE MANIFEST • enthält jede zu cachende # Version 1.0 Ressource CACHE: css/main.css js/jquery.min.1.6.4.js• NETWORK js/app.js js/spinner.js • enthält Ressourcen die nicht images/wsdmonitor.png images/startup.png gecached werden können NETWORK: proxy.php• FALLBACK FALLBACK: / /offline.html • enthält alternative offline Ressourcen
  • 28. APPLICATION CACHE• Application Cache aktivieren <!DOCTYPE html> <html manifest="wsdmonitor.appcache">• Das Cache Manifest muss mit dem MIME-Type text/cache- manifest ausgeliefert werden • Wirdder Apache als Web Server verwendet, kann dies z.B. über den folgenden Eintrag in einer .htaccess Datei aktiviert werden AddType text/cache-manifest .appcache
  • 29. CACHE AKTUALISIEREN• Wurde eine App gecached, werden die Resourcen nicht neu geladen außer • der Speicher des Browsers wird vom Nutzer geleert • dasCache Manifest ändert sich - eine Änderung an einer gespeicherten Resource (z.B. einer CSS-Datei) führt nicht zur Aktualisierung des Caches • der Application Cache wird programatisch aktualisiert
  • 30. SOWEIT SO EINFACH ... aber muss ich das alles selbst machen?
  • 31. FRAMEWORKS
  • 32. KLASSEN VON FRAMEWORKS• JavaScript basierende Frameworks • Anwendungen werden mittels JavaScript entwickelt und mit Hilfe von CSS gestyled• Markup basierende Frameworks • Anwendungen werden in HTML ausgezeichnet und mit CSS & JavaScript erweitert• Micro Frameworks • Leichtgewichtige Frameworks die kleine Helfer-Methoden liefern z.B. $() anstatt document.getElementById()• Native Wrapper • Frameworks die es ermöglichen Web Apps als native Apps zu verpacken
  • 33. JAVASCRIPT BASIEREND
  • 34. SENCHA TOUCH• Sencha Touch ist ein Framework zur Entwicklung von Web Apps die aussehen und sich anfühlen wie native Apps auf IPhone, Android und BlackBerry Geräten• Kompatibel zu Apple iOS 3+, Android 2.1+ und BlackBerry 6+ Geräten• Einige der Features • Komponenten, Theming, Forms, Scrolling, Touch Events, Data Access & MVC, Charts
  • 35. SENCHA TOUCH• Version 2 des Frameworks wurde angekündigt • Neben deutlichen Performance- Optimierungen soll die neue Version das Packaging nativer Apps ermöglichen
  • 36. ETLICHE BEISPIEL-APPS• Auf der Website von Sencha gibt es etliche Beispiele von Web Apps die mittels Sencha Touch realisiert wurden• DieOReilly Conferences App hat weniger als 800 Zeilen Code
  • 37. KITCHEN SINK
  • 38. SENCHA TOUCH IN ACTION wsd = new Ext.Applicat ion({ launch: function() {<!DOCTYPE html><html> this.viewport = new Ex t.Panel({ <head> fullscreen: true, <title>WSD Monitor</title> dockedItems: [{ cript"></script> <script src= "lib/touch/sencha-touch.js" type="text/javas xtype:toolbar /> rel="stylesheet" type="text/css" , <link href ="lib/touch/resources/css/sencha-touch.css" title:WSD Monitor <script type="text/javas cript"> }], ... layout: fit, </script> styleHtmlContent: true , </head> html: <h2>DSL</h2> <body></body> });</html> } });
  • 39. MEHRERE SEITENwsd = new Ext.Application({ launch: function() { this.toolbar = new Ext.Toolbar({ dock: top, Toolbar Toolbar title: WSD Monitor }); Gruppe this.overviewCard = new Ext.Panel({ dockedItems: [this.toolbar], html: Overview Inhalt }); Gruppe this.detailCard = new Ext.Panel({ dockedItems: [this.toolbar], html: Details }); overviewCard detailCard this.viewport = new Ext.Panel({ layout: card, fullscreen: true, wsd.viewport cardSwitchAnimation: slide, items: [this.overviewCard, this.detailCard] }); }});
  • 40. MARKUP BASIEREND
  • 41. JQUERY MOBILE• jQuery Mobile ist bietet ein User Interface System über alle populären Plattformen für Mobile Endgeräte hinweg• Es basiert auf jQuery und jQuery UI• Es ist leichtgewichtig (ca. 30 KB inkl CSS plus weitere 30 KB für jQuery) und setzt auf progressive enhancement sowie auf responsive design• Unterstützt werden folgende Plattformen • iOS, Android, BlackBerry, Bada, Windows Phone, palm webOS, Symbian & MeeGo
  • 42. JQUERY MOBILE IN ACTION<!DOCTYPE html><html> <head> <title>WSD Monitor</title> <meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="default" <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script> </head> <body> <div id="overview" data-role="page"> <div data-role="header"> <h1>WSD Monitor</h1> <a href="#">Refresh</a> </div> <div data-role="content"> <h2>DSL</h2> <ul> <li><a href="#details" data-transition="slide">DSL NK</a></li> <li><a href="#details" data-transition="slideup">DSL BK</a></li> <li><a href="#details" data-transition="pop">DSL Wechsler Formular</a></li> </ul> </div> </div>
  • 43. MICRO FRAMEWORKS
  • 44. NATIVE WRAPPER
  • 45. PHONEGAP
  • 46. PHONEGAP• PhoneGap ist eine HTML5 App Plattform, die es ermöglicht Web Apps als native Apps zu vertreiben und Zugriff auf Geräte APIs zu bekommen• Unterstützt werden die folgenden Plattformen: • iOS, Android, BlackBerry, palm webOS, Symbian & Bada• Entwickelt wird PhoneGap von Nitobi die gerade von Adobe aufgekauft wurden• Es ist geplant PhoneGap an die Apache Software Foundation zu übergeben
  • 47. ZUGRIFF AUF NATIVE APIS
  • 48. ZUGRIFF AUF NATIVE APIS• PhoneGap hängt Methoden navigator.device.capture.captureImage( CaptureCB captureSuccess, für den Zugriff auf native CaptureErrorCB captureError, [CaptureImageOptions options] APIs unterhalb von navigator ); ein .find( navigator.contacts• Referenz Doku contactFields, contactSuccess, http://docs.phonegap.com contactError, contactFindOptions );
  • 49. PHONEGAP BUILD• ZurErstellung einer nativen App muss aktuell das jeweilige SDK installiert sein• Mit PhoneGap Build wird ein Cloud Service zur Kompilierung von nativen Apps geboten http://build.phonegap.com
  • 50. TOOLS
  • 51. TESTS• ACID3 • When can I use ... • Testet die Einhaltung von Web • Browser Unterstützung für Standards besonders HTML5 & CSS3 EcmaScript & DOM Level 2 http://caniuse.com/ http://acid3.acidtests.org/ • Modernizr• The HTML5 Test • Ermittelt welche HTML5 & • Testet die HTML5 CSS3 Features unterstützt Konformität werden http://html5test.com http://www.modernizr.com/
  • 52. IOS SIMULATOREN• iOS SDK Simulator • MobiOne • Nur für Mac in Verbindung • Kostenpflichtige mit dem iOS SDK Entwicklungsumgebung mit http://developer.apple.com/ios/ integriertem Simulator• testiphone.com / • Für Windows - Mac & ipadpeek.com Linux Unterstützung ist geplant • User-Agent im Safari http://www.genuitec.com/mobile/ anpassen und online testen
  • 53. SIMULATOREN• Android SDK Emulator • BlackBerry Simulatoren • Symbian Simulator • Plattform • Geräte, Version & • In Verbindung mit unabhängiger Netzbetreiber dem Qt SDK Simulator wählbar http://www.developer.nokia.com/ Develop/Qt/Tools/ http://developer.android.com/ • Registrierung guide/developing/devices/ emulator.html erforderlich http://de.blackberry.com/ developers/resources/ simulators.jsp
  • 54. REMOTE DEBUGGING
  • 55. WEINRE• Web Inspector Remote verwendet das Safari Web Inspector Interface• Öffentlichen weinre Server nutzen oder eigenen starten• Aktivierung über ein JavaScript, dass vom Server bereit gestellt wird• Mehr Infos unter: http://phonegap.github.com/weinre/
  • 56. JSCONSOLE.COM• Einfaches JavaScript Kommandozeilen Tool• Kein lokaler Server - Zugriff erfolgt direkt über jsconsole.com • Über das :listen Kommando wird eine neue Session erzeugt • Damit die Anwendung mit jsconsole kommunizieren kann wird ein JavaScript geladen • Die Session Id wird als Parameter übergeben
  • 57. SOCKETBUG• Remote Debugging Tool basierend auf Node.js & Socket.IO• Verwendet einen lokalen Server• Ermöglicht das • anzeigen des Quelltextes • anzeigen von Debugging Informationen • ausführen von JavaScript • fangen von JavaScript Fehlern
  • 58. DANKEfür die Aufmerksamkeit holger@rueprich.de @holgerrueprich