1 / 46

webapps

webapps. Medien zwischen technologie und gesellschaft Prof. Dr. manfred Thaller Jonas Schophaus | Uni Köln | WS 2012. Agenda. Native versus webbasierte Apps HTML5 & CSS3 Media Queries Geolocation Offline Data Storage WebKit Animations jQuery Mobile WebApps nativ.

whitby
Download Presentation

webapps

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. webapps Medien zwischen technologie und gesellschaft Prof. Dr. manfred Thaller Jonas Schophaus | Uni Köln | WS 2012

  2. Agenda • Native versus webbasierte Apps • HTML5 & CSS3 • Media Queries • Geolocation • Offline Data Storage • WebKitAnimations • jQuery Mobile • WebApps nativ

  3. Webapps vs. Native apps AlternatiVE?

  4. Darum webapps • Keine Installation. • Keine Updates. • Ein Produkt, alle Plattformen!

  5. Technologien Webbasierte App Native App Objective C Java Visual C++ ... • HTML5 • CSS3 • JavaScript ...

  6. Technologien Webbasierte App Native App (WebKit) Eine Codebase bedient 97% aller mobilen Endgeräte. Mehrere Codebases, geringerer Gesamtanteil. Quelle: Franke/Ippen: Apps mit HTML5 und CSS3. Bonn 2012.

  7. Nachteile gegenüber nativen Apps • Eingeschrä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.

  8. Checkliste • Zugriff auf geschütze Hardwarekomponenten? Kamera, Mikrofon... • Geschwindigkeit/Performance? Grafik, Hardwarebeschleunigung • Offline-Funktionalitäten? • Target Devices? • Kenntnisse in relevanten Programmiersprachen? • Monetarisierung

  9. Web(App) Technologies HTML5 & CSS3

  10. Responsive Webdesign • Styling angepasst an Ausgabegerät.

  11. Responsive Webdesign

  12. CSS3: Media Queries Unterschiedliche Stylesheets für unterschiedliche Bildschirmgrößen.

  13. CSS3: Media Queries Unterschiedliche Stylesheets für unterschiedliche Bildschirmausrichtungen.

  14. CSS3: Media Queries Media Queries sind auch im Link-Tag in HTML möglich.

  15. CSS3: MEDIA QUERIES • weitere Medienmerkmale: • aspect-ratio • color(Farbtiefe in Bit) • monochrome (Graustufen in Bit) • resolution (dpi)

  16. Geolocation mit html5 • navigator.geolocationermöglicht Positionsbestimmung über JavaScript.

  17. Geolocation mit Html5 • Bewegungen tracken mit geolocation.watchPosition.

  18. Geolocation mit Html5 • Eigenschaften 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

  19. WebkitTransitions • Bestimmen Länge und Art und Weise der Änderung von Elementeigenschaften.

  20. Webkit Transition • Transition Styles: • ease-in: Animation startet langsam • ease-out: Animation wird am Ende abgebremst • ease-in-out: Kombination • linear: Animation verläuft gleichmäßig • Änderung der Eigenschaft (durch DOM-Manipulation) löst Animation aus.

  21. Webkit Animation • Erweiterung von webkittransition, mit der Möglichkeit Keyframes zu setzen.

  22. Webkit Animation

  23. 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.

  24. HTML5: Das Cache-Manifest • Sichert 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

  25. HTML5: Das Cache-Manifest Beispielmanifest.

  26. HTML5: Das Cache-Manifest • Einbindung in HTML-Dokument: • AppCache-Objekt: • window.applicationCache

  27. html5: localstorage • Persistente 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.

  28. Webapp Frameworks jQuery Mobile

  29. jQuery • Framework/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

  30. jQuery Syntax • Codebeispiel: An alle h1-Elemente einen Button anhängen. • Wie von CSS gewohnt funktionieren auch:

  31. Jquery Events • EventHandler hinzufügen mit ‚on‘: • Unterstützte Events: • dblclick, hover, mousemove, mousedown, mouseupetc.

  32. HTML-Elemente manipulieren • Ein- und Ausblenden von Elementen: • .hide() • .show() • .toggle() • Animiertes Ein- und Ausblenden: • .slideToggle() .fadeIn() • .slideUp() .fadeOut() • .slideDown() .fadeToggle()

  33. HTML-Elemente manipulieren • Attribut-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

  34. AJAX Requests • Daten von Webservern im JSON-Format laden:

  35. jQuery Mobile • Interface Framework. • Passend zu sämtlichen nativen UIs und Gerätegrößen. • Handling von Navigation und Animation. • Einbindung von Stylesheet und jQMobile-Library:

  36. Jquery Mobile • Definition von App-Views als Div-Container mittels data-role-Attribut: • Div-Block für eine einzelne Seite.

  37. Jquery Mobile Beispiel einer mit jQuery mobile erstellten App

  38. Jquery Mobile: Interface Elemente • Header & Footer: • Navbar im Footer:

  39. Jquery Mobile: Interface Elemente jQm-Standard-Icons

  40. Jquery Mobile: Interface Elemente • Header mit Back-Button: • Button mit href="index.html" • Liste:

  41. WebApps im Appstore? Phone gap

  42. Phone Gap • Open-Source-Framework. • Wandelt HTML+JavaScript-basierteWebapp in native App um (verschiedene Plattformen). • Ermöglicht einfachen Zugriff auf Kamera und Mikrofon.

  43. Phone Gap: Native BuilD • PhoneGap.js einbinden • PhoneGap Paket für die jeweilige Entwicklungsumgebung installieren • Alternativ: Phone Gap Build

  44. Phone Gap: kamera • Zugriff auf Kamera über navigator.camera-Objekt:

  45. Apple Homescreen Optimierung • <metaname="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“/>

  46. Apple Homescreen Optimierung • Weitere Optionen: • StatusBar: • <metaname=„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“>

More Related