MOBILE WEB APPS Foto César Poyatos (http://www.flickr.com/photos/cpoyatos/5791320785 )
Dec 10, 2014
MOBILE WEB APPSFoto César Poyatos (http://www.flickr.com/photos/cpoyatos/5791320785)
AGENDA
• Einführung
•Web Apps „handgemacht“
• Frameworks
• Tools
HOLGER RÜPRICH
APPS?
APPS?
„Der Begriff App (von der englischen Kurzform für application, das grammatische Geschlecht ist im Sprachgebrauch variabel) bezeichnet im Allgemeinen jede Form von Anwendungsprogrammen. Im Sprachgebrauch sind damit mittlerweile jedoch meist Anwendungen für moderne Smartphones und Tablet-Computer gemeint, die über einen in das Betriebssystem integrierten Onlineshop bezogen und so direkt auf dem Smartphone installiert werden können“Wikipedia
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 MobiltelefonQuelle BITKOM, 04.09.2011 http://www.bitkom.org/de/markt_statistik/64022_69195.aspx
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
EINE FRAGE DER PLATTFORM1 %2 %2 %
12 %
22 %
18 %
43 %
Quelle Gartner, 11.08.2011 http://www.gartner.com/it/page.jsp?id=1764714
Android iOS Symbian BlackBerry BadaMicrosoft Andere
Java
Objective-C
C++
J2ME
WebKit
WebKit
WebKit
WebKit
Android
iOS
Symbian
RIM
OK ...„There is no WebKit on Mobile“
Paul Peter Koch - http://www.quirksmode.org/webkit.html
ABER ZUMINDEST ...bleibt es bei einer Skriptsprache (JavaScript), einer Markup-
Sprache (HTML) und einem Style System (CSS)
NATIV VS. WEB
• Native Apps
• Direkter Zugriff auf Geräte APIs
• Geeignet für rechenintensive Apps wie z.B. Spiele
• Einfache Installation über Appstores
• Vermitteln höhere Wertigkeit
• Web Apps
• Gleiche App für mehre Plattformen
• Unabhängigkeit von Zulassungsprozessen und Einschränkungen von App Stores
• Updates und Erweiterungen lassen sich schneller verbreiten
• Leichter Einstieg für Web-Entwickler
KLINGT SPITZE!Her mit meiner App
HTML5, CSS3 & JAVASCRIPTApps handgemacht
WEBSITE ALS WEB APP
• Eine Web App wird initial im Browser aufgerufen und zum Home Screen hinzugefügt
HOME SCREEN ICON
• Unterschiedliche Größen mittels sizes Attribut
• 57x57 / default IPhone 3
• 72x72 IPad
• 114x114 IPhone 4
• Graphische Effekte
• apple-touch-icon
• apple-touch-icon-precomposed
<link rel="apple-touch-icon" href="homescreen.png">
FULLSCREEN
•Das Meta Element apple-mobile-web-app-capable sorgt dafür, dass die App anschließend Fullscreen geöffnet wird
<meta name="apple-mobile-web-app-capable"
content="yes">
STARTUP IMAGE
• 320x460 IPhone
• 1004x768 IPad
• Unterschiedliche Bilder je Auflösung oder Orientierung nur mittels Media Queries oder JavaScript
<link rel="apple-touch-startup-image" href="star
tup.png">
STATUSBAR STYLE
<meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="apple-mobile-web-app-status-bar-style" content="default">
• Drei Styles stehen zur Auswahl
• default
• black
• black-translucent
SKALIERUNG
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=no">
LAYOUTS MIT CSS3
• Mobile Browser bieten eine gute CSS3 Unterstützung
• Somit steht eine Reihe nützlicher Features zur Verfügung wie z.B:
• CSS3 Selektoren
• Multiple Hintergrundbilder
• Deckkraft
• Alpha-Transparenz
• Abgerundete Kanten
• Text-Schattierung
• Box-Schattierung
• Nachladen von Schriften mit @font-face
• Verläufe
• Mehrspaltige Layouts
• Animationen
• Übergänge
IPHONE STYLES MIT CSS3
• Schriftfont-family: Helvetica, sans-serif;
• Skalieren der Textgröße verhindern text-size-adjust: none;
• Verläufebackground-image: -webkit-gradient(...)
html { text-size-adjust: none; -webkit-text-size-adjust: none;}
body { margin: 0; font-family: Helvetica, sans-serif; background-color: #c5ccd3; background-image: -webkit-gradient(linear, left top, right top,
color-stop(.75, transparent), color-stop(.75, rgba(255,255,255,.1))
); background-size: 7px; -webkit-background-size: 7px;}
HEADER
<header> <h1>WSD Monitor</h1> <button id="refresh" onclick="refreshAll();"> <span>Refresh</span> </button></header>
header { height: 44px; font-weight: bold; text-shadow: rgba(0,0,0,.7) 0 -1px 0; border-top: solid 1px rgba(255,255,255,.6); border-bottom: solid 1px rgba(0,0,0,.6); color: #fff; background-color: #8195af; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.4)), to(rgba(255,255,255,.05)) ), -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0,0,64,.1)) ); background-repeat: no-repeat; background-position: top left, bottom left; background-size: 100% 21px, 100% 22px; -webkit-background-size: 100% 21px, 100% 22px; box-sizing: border-box; -webkit-box-sizing: border-box;}
INHALT
<div class="group-wrapper"> <h2>DSL</h2> <ul> <li><a href="...">DSL NK</a></li> <li><a href="...">DSL BK</a></li> <li><a href="...">DSL Wechsler Formular</a></li>
</ul></div>
.group-wrapper h2 { ... text-shadow: #fff 0 1px 0;}
.group-wrapper ul { background-color: #fff; border: solid 1px #a9abae; border-radius: 10px; -webkit-border-radius: 10px; ...}
.group-wrapper ul li:not(:last-child) { border-bottom: inherit;}
PAGE TRANSITIONS<div id="content"> <div id="page-slider"> <section id="overview"> <div class="group-wrapper"> <h2>DSL</h2> <ul> <li><a href="...">DSL NK</a></li> <li><a href="...">DSL BK</a></li> <li><a href="...">DSL Wechsler Formular</a></li> </ul> </div> ... </div> <section id="details"> <h2></h2> <pre></pre> </section> </div></div>
#content { overflow-x: hidden; width: 100%;}
#content section { width: 50%; float: left; padding: 0; margin: 0;}
#page-slider { -webkit-transition: all 0.5s ease-in-out; width: 200%;}
#content.details #page-slider { -webkit-transform: translate3d(-50%, 0, 0);}
#content.overview #page-slider { -webkit-transform: translate3d(0, 0, 0); }
... UND DANN WAR DAS NETZ WEG ...
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
CACHE MANIFEST
• CACHE
• enthält jede zu cachende Ressource
• NETWORK
• enthält Ressourcen die nicht gecached werden können
• FALLBACK
• enthält alternative offline Ressourcen
CACHE MANIFEST
# Version 1.0
CACHE:css/main.cssjs/jquery.min.1.6.4.jsjs/app.jsjs/spinner.jsimages/wsdmonitor.pngimages/startup.png
NETWORK:proxy.php
FALLBACK:/ /offline.html
APPLICATION CACHE
• Application Cache aktivieren
•Das Cache Manifest muss mit dem MIME-Type text/cache-manifest ausgeliefert werden
•Wird der Apache als Web Server verwendet, kann dies z.B. über den folgenden Eintrag in einer .htaccess Datei aktiviert werden
<!DOCTYPE html><html manifest="wsdmonitor.appcache">
AddType text/cache-manifest .appcache
CACHE AKTUALISIEREN
•Wurde eine App gecached, werden die Resourcen nicht neu geladen außer
• der Speicher des Browsers wird vom Nutzer geleert
• das Cache 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
SOWEIT SO EINFACH ...aber muss ich das alles selbst machen?
FRAMEWORKS
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
JAVASCRIPT BASIEREND
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
SENCHA TOUCH
• Version 2 des Frameworks wurde angekündigt
•Neben deutlichen Performance-Optimierungen soll die neue Version das Packaging nativer Apps ermöglichen
ETLICHE BEISPIEL-APPS
• Auf der Website von Sencha gibt es etliche Beispiele von Web Apps die mittels Sencha Touch realisiert wurden
•Die O'Reilly Conferences App hat weniger als 800 Zeilen Code
KITCHEN SINK
SENCHA TOUCH IN ACTION
<!DOCTYPE html><html> <head> <title>WSD Monitor</title> <script src="lib/touch/sencha-touch.js" type="text/javascript"><
/script>
<link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"> ... </script> </head> <body></body></html>
wsd = new Ext.Application({ launch: function() {
this.viewport = new Ext.Panel({ fullscreen: true, dockedItems: [{ xtype:'toolbar', title:'WSD Monitor' }], layout: 'fit', styleHtmlContent: true, html: '<h2>DSL</h2>' });
} });
MEHRERE SEITEN
Toolbar Toolbar
InhaltGruppe
Gruppe
overviewCard detailCard
wsd.viewport
wsd = new Ext.Application({ launch: function() { this.toolbar = new Ext.Toolbar({ dock: 'top', title: 'WSD Monitor' }); this.overviewCard = new Ext.Panel({ dockedItems: [this.toolbar], html: 'Overview' }); this.detailCard = new Ext.Panel({ dockedItems: [this.toolbar], html: 'Details' }); this.viewport = new Ext.Panel({ layout: 'card', fullscreen: true, cardSwitchAnimation: 'slide', items: [this.overviewCard, this.detailCard] }); }});
MARKUP BASIEREND
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
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>
MICRO FRAMEWORKS
NATIVE WRAPPER
PHONEGAP
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
ZUGRIFF AUF NATIVE APIS
ZUGRIFF AUF NATIVE APIS
navigator.device.capture.captureImage( CaptureCB captureSuccess, CaptureErrorCB captureError, [CaptureImageOptions options]);
navigator.contacts.find(
contactFields, contactSuccess, contactError, contactFindOptions);
• PhoneGap hängt Methoden für den Zugriff auf native APIs unterhalb von navigator ein
• Referenz Dokuhttp://docs.phonegap.com
PHONEGAP BUILD
• Zur Erstellung 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
TOOLS
TESTS
• ACID3
• Testet die Einhaltung von Web Standards besonders EcmaScript & DOM Level 2http://acid3.acidtests.org/
• The HTML5 Test
• Testet die HTML5 Konformitäthttp://html5test.com
• When can I use ...
• Browser Unterstützung für HTML5 & CSS3http://caniuse.com/
• Modernizr
• Ermittelt welche HTML5 & CSS3 Features unterstützt werdenhttp://www.modernizr.com/
IOS SIMULATOREN
• iOS SDK Simulator
•Nur für Mac in Verbindung mit dem iOS SDKhttp://developer.apple.com/ios/
• testiphone.com / ipadpeek.com
• User-Agent im Safari anpassen und online testen
•MobiOne
• Kostenpflichtige Entwicklungsumgebung mit integriertem Simulator
• Für Windows - Mac & Linux Unterstützung ist geplanthttp://www.genuitec.com/mobile/
SIMULATOREN
• Android SDK Emulator
• Plattform unabhängiger Simulator
http://developer.android.com/guide/developing/devices/
emulator.html
• BlackBerry Simulatoren
• Geräte, Version & Netzbetreiber wählbar
• Registrierung erforderlich
http://de.blackberry.com/developers/resources/simulators.jsp
• Symbian Simulator
• In Verbindung mit dem Qt SDK
http://www.developer.nokia.com/Develop/Qt/Tools/
REMOTE DEBUGGING
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/
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
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
DANKEfür die Aufmerksamkeit
[email protected]@holgerrueprich