Service Coding Crash Course

Transkript

1 Service Coding Crash Course Willkommen! noch 2 wilde Tage! Bisher: Aufbau von Models, scaffolding, Formulare Formatierung, Assets einbinden, Layout, Navigation Ziel heute: Mobile Browser, JavaScript APIs für native Funktionalität mobile Nutzung, Online/Offline, Caching Frameworks für mobiles GUI, Struktur, Animation

2 Zeit und Inhalt Wochenende: eigene Arbeitstage, Recherche, ausprobieren, üben gedankliche Transformation der erworbenen Kenntnisse auf die eigene Projektproblemstellung

3 Erweiterungen in der Applikation Seit letztem Mal einige Erweiterungen schönere Formatierung Funktionsumfang erweitern (Wegstrecke) Zuschnitt Anwendungszweck (auf Mensch einschränken) Schritte mit Screenshots dokumentiert Wesentliche Erweiterungen kurz vorstellen Neue Version der App auf dem ServiceDesign Blog

4 E#1 Mensch: Anmeldung als Startseite config/routes.rb

5 E#2 Mensch: Detail mit einblendbarem Foto views/menschen/show.html.erb assets/javascripts/menschen.js.coffee

6 E#3 Mensch: Liste mit selektiven Aktionen

7 stylesheets/gemeinsam.css.scss E#3 Mensch: Liste mit selektiven Aktionen

8 stylesheets/gemeinsam.css.scss E#3 Mensch: Liste mit selektiven Aktionen views/menschen/index.html.erb

9 E#4 Mensch: Detail mit selektiven Daten

10 E#4 Mensch: Detail mit selektiven Daten views/menschen/show.html.erb helpers/menschen_helper.rb

11 E#5 Positionen: Liste nur mit eignen Daten

12 E#5 Positionen: Liste nur mit eignen Daten controllers/positionen_controller.rb

13 E#6 Positionen: Form mit unsichtbarem Feld

14 E#6 Positionen: Form mit unsichtbarem Feld controllers/positionen_controller.rb views/positionen/_form.html.erb

15 Mobile Browser Mobile Browser als neueste Entwicklung in Internet- Technologie moderne, abgespeckte Browser reduzierter Resourcen-Verbrauch (Speicher, Prozessor) optimierte Geschwindigkeit (Netzwerk) Mechanismen für Umgang mit kleinem Bildschirm The web is 1024 by 768 neuer Auftrieb für alte These durch mobile Geräten (ipad, Retina Displays)

16 Anpassung von Websites Verschiedene Richtlinien für Anpassung von Websites für mobile Browser Arbeite standardgerecht, folge etablierten Erfolgsmustern Verwende Sicherheitsmerkmale (HTTPS, SSL, RSA) Keine Framesets, dafür Spalten und Blöcke Verwende das Select Element (ios: Wert-Rollen)

17 Anpassung von Websites Verschiedene Richtlinien für Anpassung von Websites für mobile Browser Arbeite standardgerecht, folge etablierten Erfolgsmustern Verwende Sicherheitsmerkmale (HTTPS, SSL, RSA) Keine Framesets, dafür Spalten und Blöcke Verwende das Select Element (ios: Wert-Rollen)

18 Anpassung von Websites Verschiedene Richtlinien für Anpassung von Websites für mobile Browser Arbeite standardgerecht, folge etablierten Erfolgsmustern Verwende Sicherheitsmerkmale (HTTPS, SSL, RSA) Keine Framesets, dafür Spalten und Blöcke Verwende das Select Element (ios: Wert-Rollen) Verwende unterstützte JS Fenster und Dialoge Verwende unterstützte Medientypen (Audio, Video, MPEG) Verwende das Canvas Element (SVG geht auch) Verwende zusätzliche Annotation für ios Spezialitäten

19 Viewport Fensterrand definiert nicht Website-Breite im mobilen Browser Inhalt abhängig von erwarteter Grösse (Standard 980px)

20 Viewport Fensterrand definiert nicht Website-Breite im mobilen Browser Inhalt abhängig von erwarteter Grösse (Standard 980px)

21 Viewport Fensterrand definiert nicht Website-Breite im mobilen Browser Inhalt abhängig von erwarteter Grösse (Standard 980px)

22 Bedingte Stylesheets Bedingte Stylesheets existieren schon länger screen, print, all, handheld,... IOS Browser interpretiert nun Kombinationen

23 Spezielle CSS Attribute Spezifische Steuerung von ios Optimierungsannahmen proprietär! aber wirksam... -webkit-text-size-adjust: 150%; -webkit-tap-highlight-color: blue; autocorrect = on (Attribut in <input> ) autocapitalize = words (Attribut in <input> ) und einige mehr...

24 Modifizierte Event-Behandlung Kein Rollover! Erster Touch löst :hover aus Tap und Swipe Gesten werden speziell behandelt

25 Spezifizierung von Zusatzoptionen Icons für installierte WebApps Startbildschirm für WebApp Ausblenden der Browser-Werkzeugleiste

26 Separate Unterstützung mobiler Layouts Eine mögliche Lösung in Rails Definition eines separaten Formats user agent detection und Formatschalter Eigenes Layout, eigene Views für neues Format

27 GPS Lokalisierung Ziel für heute GPS Lokalisierung via JavaScript Einsenden Position an Server via AJAX POST Request Sichern in DB Rückmeldung an mobilen Nutzer

28 Aufgabe Tabellen Nachvollziehen der Beispiele in eurem Experiment-Projekt separates iphone Layout erzeugen und einsetzen Aktionen in Controllern und Views ggf. anpassen Welche Funktionalität wird noch gebraucht? Welche Aktionen bieten die Entitäten eures Projekts an? Welche Aktionen kann man im Backend durchführen? Welche Aktionen haben keine Relevanz?