WEBAPPSMEDIEN ZWISCHEN TECHNOLOGIE UND GESELLSCHAFTPROF. DR. MANFRED THALLERJONAS SCHOPHAUS | UNI KÖLN | WS 2012
AGENDA1. Native versus webbasierte Apps2. HTML5 & CSS3
1. Media Queries2. Geolocation3. Offline Data Storage4. WebKit Animations
3. jQuery Mobile4. WebApps nativ
ALTERNATIVE?
WEBAPPS VS. NATIVE APPS
DARUM WEBAPPSKeine Installation.Keine Updates.Ein Produkt, alle Plattformen!
TECHNOLOGIENWEBBASIERTE APP
HTML5CSS3JavaScript
NATIVE APP
Objective C Java Visual C++...
...
TECHNOLOGIENWEBBASIERTE APP
Eine Codebase bedient97% aller mobilen Endgeräte.
NATIVE APP
(WebKit)
Mehrere Codebases, geringerer Gesamtanteil.
Quelle: Franke/Ippen: Apps mit HTML5 und CSS3. Bonn 2012.
NACHTEILE GEGENÜBER NATIVEN APPSEingeschränkter Zugriff auf Hardware.Schlechtere Performance.Keine OS-integrierten Funktionen: Ausführen im Hintergrund, Notifications etc.Möglicherweise schwerer zu vermarkten als Apps in zentralisierten AppStores.
CHECKLISTE Zugriff auf geschütze
Hardwarekomponenten? Kamera, Mikrofon...
Geschwindigkeit/Performance? Grafik, Hardwarebeschleunigung
Offline-Funktionalitäten? Target Devices? Kenntnisse in relevanten
Programmiersprachen? Monetarisierung
HTML5 & CSS3
WEB(APP) TECHNOLOGIES
RESPONSIVE WEBDESIGNStyling angepasst an Ausgabegerät.
RESPONSIVE WEBDESIGN
Unterschiedliche Stylesheets für unterschiedliche Bildschirmgrößen.
CSS3: MEDIA QUERIES
Unterschiedliche Stylesheets für unterschiedliche Bildschirmausrichtungen.
CSS3: MEDIA QUERIES
Media Queries sind auch im Link-Tag in HTML möglich.
CSS3: MEDIA QUERIES
CSS3: MEDIA QUERIESweitere Medienmerkmale:• aspect-ratio
• color (Farbtiefe in Bit)
• monochrome (Graustufen in Bit)
• resolution (dpi)
GEOLOCATION MIT HTML5navigator.geolocation ermöglicht Positionsbestimmung über JavaScript.
GEOLOCATION MIT HTML5Bewegungen tracken mit geolocation.watchPosition.
GEOLOCATION MIT HTML5Eigenschaften des position-Objekts:• position.coords.accuracy (Radius in Metern)
• position.coords.altitude (Meter über NN)
• position.coords.altitudeAccuracy
• position.coords.heading (Winkel zu N)
• position.coords.speed
WEBKIT TRANSITIONSBestimmen Länge und Art und Weise der Änderung von Elementeigenschaften.
WEBKIT TRANSITIONTransition Styles:ease-in: Animation startet langsamease-out: Animation wird am Ende abgebremstease-in-out: Kombinationlinear: Animation verläuft gleichmäßig
Änderung der Eigenschaft (durch DOM-Manipulation) löst Animation aus.
WEBKIT ANIMATIONErweiterung von webkit transition, mit der Möglichkeit Keyframes zu setzen.
WEBKIT ANIMATION
OFFLINE, UND JETZT? Das Cache-Manifest: • Liste mit Dateien, die offline vorgehalten werden sollen.• Max. 5 MB.
Das localStorage-Objekt:• Persistente Speicherung von Key:Value-Paaren auf dem
Gerät.
HTML5: DAS CACHE-MANIFESTSichert Offline-Funktionalität.
Weitere Vorteile:• Geschwindigkeit.• Server-Auslastung minimieren.
Struktur:• CACHE: nach dem ersten Laden• NETWORK: unter allen Umständen vom Server• FALLBACK: wenn Ressource nicht verfügbar ist
Beispielmanifest.
HTML5: DAS CACHE-MANIFEST
HTML5: DAS CACHE-MANIFESTEinbindung in HTML-Dokument:
AppCache-Objekt: window.applicationCache
HTML5: LOCAL STORAGEPersistente Speicherung auf dem Gerät.Alternative zu Datenbank auf Webserver (MySQL & Co).Key:Value-Paare.
localStorage.setItem(key, value);localStorage.getItem(key);localStorage.removeItem(key);localStorage.clear();
Analog dazu: sessionStorage.
JQUERY MOBILE
WEBAPP FRAMEWORKS
JQUERYFramework/Klassenbibliothek für JavaScript.
Erhebliche Erleichterung von:• Elementselektion (ähnlich CSS)• DOM-Manipulation• Realisation von Effekten und Animationen• AJAX Requests
Download: http://code.jquery.com/jquery-latest.min.js
JQUERY SYNTAX
Codebeispiel: An alle h1-Elemente einen Button anhängen. Wie von CSS gewohnt funktionieren auch:
JQUERY EVENTSEventHandler hinzufügen mit ‚on‘:
Unterstützte Events:dblclick, hover, mousemove, mousedown, mouseup etc.
HTML-ELEMENTE MANIPULIERENEin- und Ausblenden von Elementen:.hide().show().toggle()
Animiertes Ein- und Ausblenden:.slideToggle() .fadeIn().slideUp() .fadeOut().slideDown() .fadeToggle()
HTML-ELEMENTE MANIPULIERENAttribut-Funktionen:.attr({name,wert}).addClass(name).removeClass(name).toggleClass(name)
DOM-Maniupulation:.prepend(code) - HTML am Anfang des Tags einfügen.append(code) - HTML am Ende des Tags einfügen
AJAX REQUESTSDaten von Webservern im JSON-Format laden:
JQUERY MOBILEInterface Framework.Passend zu sämtlichen nativen UIs und Gerätegrößen.Handling von Navigation und Animation.
Einbindung von Stylesheet und jQMobile-Library:
JQUERY MOBILEDefinition von App-Views als Div-Container mittels data-role-Attribut:
Div-Block für eine einzelne Seite.
JQUERY MOBILE
Beispiel einer mit jQuery mobile erstellten App
JQUERY MOBILE: INTERFACE ELEMENTEHeader & Footer:
Navbar im Footer:
jQm-Standard-Icons
JQUERY MOBILE: INTERFACE ELEMENTE
JQUERY MOBILE: INTERFACE ELEMENTE
Header mit Back-Button:Button mit href="index.html"
Liste:
PHONE GAP
WEBAPPS IM APPSTORE?
PHONE GAPOpen-Source-Framework.Wandelt HTML+JavaScript-basierte Webapp in native App um (verschiedene Plattformen).Ermöglicht einfachen Zugriff auf Kamera und Mikrofon.
PHONE GAP: NATIVE BUILD• PhoneGap.js einbinden• PhoneGap Paket für die jeweilige Entwicklungsumgebung
installieren • Alternativ: Phone Gap Build
PHONE GAP: KAMERAZugriff auf Kamera über navigator.camera-Objekt:
APPLE HOMESCREEN OPTIMIERUNG<meta name="apple-mobile-web-app-capable" content="yes"/>im head ermöglicht das Verknüpfen der Website mit einem Home-Screen Icon auf iOS-Geräten.
Setzen des Icons:<link rel=„apple-touch-icon“ href=„img/iphone-icon.png“/>
APPLE HOMESCREEN OPTIMIERUNGWeitere Optionen:
StatusBar:<meta name=„apple-mobile-web-app-status-bar-style“ content=„black“>, möglich sind: default, black, translucent
Splash-Screen:<link rel=„apple-touch-startup-image href=„img.png“>
Top Related