6. 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
7. 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
8. 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
9. 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
10. OK ...
„There is no WebKit on Mobile“
Paul Peter Koch - http://www.quirksmode.org/webkit.html
11. ABER ZUMINDEST ...
bleibt es bei einer Skriptsprache (JavaScript), einer Markup-
Sprache (HTML) und einem Style System (CSS)
12. 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
18. 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">
19. 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
20. STATUSBAR STYLE
• Drei Styles stehen zur Auswahl
• default
• black
• black-translucent
<meta name="apple-mobile-web-app-status
-bar-style" content="black">
default">
22. 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
23. 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;
}
24. 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
;
29. 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
30. 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
31. 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
32. 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
35. 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
37. 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
38. SENCHA TOUCH
• Version
2 des Frameworks
wurde angekündigt
• Neben deutlichen
Performance-
Optimierungen soll die
neue Version das
Packaging nativer Apps
ermöglichen
39. ETLICHE BEISPIEL-APPS
• Auf der Website von Sencha
gibt es etliche Beispiele von
Web Apps die mittels
Sencha Touch realisiert
wurden
• DieO'Reilly Conferences
App hat weniger als 800
Zeilen Code
44. 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
49. 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
51. 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
);
52. 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
54. 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/
55. 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
56. 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
58. 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/
59. 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
60. 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
