vortrag html5, css3, phonegap

23
Web-Anwendungen für mobile Endgeräte mit HTML5 und Co René Peinl 26.06.2012

Upload: renepeinl

Post on 18-Dec-2014

2.905 views

Category:

Devices & Hardware


1 download

DESCRIPTION

Vortrag für die Open Web User Group - Web-Entwicklung für mobile Endgeräte mit HTML5, CSS3 und PhoneGap

TRANSCRIPT

Page 1: Vortrag  HTML5, CSS3, PhoneGap

Web-Anwendungen für mobile Endgeräte mit HTML5 und Co

René Peinl

26.06.2012

Page 2: Vortrag  HTML5, CSS3, PhoneGap

Mobile Web-Entwicklung 2 © 2012 Prof. Dr. René Peinl

Anpassen von Web-Anwendungen für mobil

Alternative 1: Nichts anpassen

Website von vornherein möglichst universell zugreifbar gestalten (z.B. keine Optimierung

auf bestimmte Auflösung, Standardkonformität, kein Flash o.ä., JavaScript nur sparsam)

Alternative 2: Bilder und Styling für Mobilvariante entfernen

Keine Bilder und minimales CSS Styling durch Einsatz eines Proxies

Alternative 3: Handheld CSS einsetzen

CSS Eigenschaft media="handheld" (alt) bzw. media queries einsetzen

Alternative 4: Für Mobilgeräte optimierte Variante entwickeln

Konsequent die Vorteile von Mobilgeräten in die Entwicklung der Webanwendung

einbeziehen

Moll 2007, S.32ff

Page 3: Vortrag  HTML5, CSS3, PhoneGap

Mobile Web-Entwicklung 3 © 2012 Prof. Dr. René Peinl

Mobilstrategie

1. Forget what you think you know - Das Glas muss erst leer werden, bevor man es neu füllen kann

2. Believe what you see, not what you read - Glaube keiner Statistik, die Du nicht selbst gefälscht hast

3. Constraints never come first - Nichts ist unmöglich

4. Focus on context, goals and needs - Was will der Benutzer tun? Lass es die App herausfinden!

5. You can‘t support everything - Nicht die verbreitetsten, sondern die Geräte der Zielgruppe

6. Don‘t convert, create - Kein schlechter Abklatsch, sondern eine geniale Neuerfindung

7. Keep it simple - Kein Platz für komplexe Apps auf kleinen Geräten

vgl. Fling 2009, S.59ff

Page 4: Vortrag  HTML5, CSS3, PhoneGap

Mobile Web-Entwicklung 4 © 2012 Prof. Dr. René Peinl

Informationsdesign

Welche Informationen sollen präsentiert werden?

z.B. nur die wichtigsten 20% der Information von der normalen Website

Um welche Art von Inhalten handelt es sich?

- Sollen neben den Texten auch Grafiken oder Videos präsentiert werden?

- Wie groß müssen die Grafiken angezeigt werden, damit das wesentliche noch zu

erkennen ist?

Wie viele verschiedene Arten von Informationen sind das?

Ist das für den mobilen Benutzer sinnvoll?

Page 5: Vortrag  HTML5, CSS3, PhoneGap

Mobile Web-Entwicklung 5 © 2012 Prof. Dr. René Peinl

Best Practices Bilder & CSS

Bandbreite sparen

Benutzen der sinnvollsten Bildformate: gif, jpg, png / 8, 24, 32 Bit

Vermeiden vieler Roundtrips

- Verschiedene Bilder in eine Datei packen und nur Teile davon darstellen => CSS Sprite

Schrift

- font-family: nur allgemein serif, sans-serif und monospace

- font-size: relative Werte statt absoluter angeben

- Webfonts aber unterstützt seit iOS 4.2 / Android 4

Media Selector vs. Screen Size Selelctor

- media= "handheld"

- media= "screen and min-resolution: 140dpi"

Page 6: Vortrag  HTML5, CSS3, PhoneGap

Mobile Web-Entwicklung 6 © 2012 Prof. Dr. René Peinl

Was will ich anpassen?

Mobilgeräte generell

- Einzelne Seite um ältere, kleinere, nicht unterstützte Geräte zu informieren

- Größe der Bilder an Größe des Bildschirms anpassen

(220, 300, 440 Pixel)

- Länge der textuellen Inhalte anpassen (500, 750, 1000 Zeichen)

- AJAX einsetzen, wenn möglich um dynamischere Inhalte zu erlauben

Smartphones speziell

- WebKit CSS Erweiterungen einsetzen

- Größe von Links für Touch-Bedienung anpassen (20px Abstand)

- Zwei Stylesheets für Portrait- und Landscape-Modus

Page 7: Vortrag  HTML5, CSS3, PhoneGap

Mobile Web-Entwicklung 7 © 2012 Prof. Dr. René Peinl

Geräteklassen bilden

Geräteidentifizierung über UserAgent String

Device Databases

- deviceatlas.com

- wurfl.sourceforge.net | wurflpro.com

Geräte in Klassen einteilen

- screen size < 320x480

- screen size = 320x480

- screen size > 320x480 && < 1024x600 && resolution > 140dpi

- screen size > 1023

- AJAX enabled | not

Page 8: Vortrag  HTML5, CSS3, PhoneGap

Mobile Web-Entwicklung 8 © 2012 Prof. Dr. René Peinl

Vergleich Bildschirmgröße und Punktdichte

siehe auch http://developer.android.com/resources/dashboard/screens.html http://opensignalmaps.com/reports/fragmentation.php

xhdpi / Retina

hdpi

mdpi

small < 3.5 Zoll

normal 3.5 - 4.5 Zoll

large 4.7 - 7.0 Zoll

xlarge > 7.0 Zoll

ldpi < 130 dpi

mdpi 130 - 180 dpi

hdpi 220 - 270 dpi

xhdpi > 300 dpi

Page 9: Vortrag  HTML5, CSS3, PhoneGap

Mobile Web-Entwicklung 9 © 2012 Prof. Dr. René Peinl

HTML5 + CSS3 + JavaScript = Mobile Web-App

Page 10: Vortrag  HTML5, CSS3, PhoneGap

Mobile Web-Entwicklung 10 © 2012 Prof. Dr. René Peinl

Ausgangsbasis: sauberes XHTML/HTML5

DIV-basierte Layouts, keine Layout-Tabellen

Einsatz semantisch korrekter Container-Elemente (z.B. ul, li, p, h1)

Vermeiden "physischer" HTML Formatierungen (z.B. font, b, i, u)

statt dessen Verwenden der logischen Auszeichnungen

em, strong, cite, code, samp, kbd, dfn, abbr, acronym

Validatoren einsetzen, um syntaktisch korrekten Code sicherzustellen

CSS Formatierungen einsetzen

- Nicht auf Browser-Defaults verlassen, sondern selbst alle Werte explizit setzen

- Balance zwischen Anzahl notwendiger Klassen und Komplexität der CSS Selektoren

Neue HTML5 Elemente verwenden

- header, footer, nav, article, section, aside, summary, figure, progress, meter

siehe auch http://joshduck.com/periodic-table.html

Page 11: Vortrag  HTML5, CSS3, PhoneGap

Mobile Web-Entwicklung 11 © 2012 Prof. Dr. René Peinl

HTML5 Übersicht

Mit HTML5 werden einige Programmiermöglichkeiten zur Verfügung gestellt, die

Browserprogramme näher an die Möglichkeiten von Desktop-Apps rücken.

- Offline Lauffähigkeit (offline Web applications)

- Multi-threading mit WebWorkers

- Effiziente Kommunikation mit WebSockets

- Persistente Datenspeicherung

In Datenbanken (Indexed DB, SQL DB)

oder Dateien (local storage, FileReader)

- Zugriff auf lokale Geräte (getUserMedia(), z.B. Kamera, Webcam)

- Geolokalisierung (GPS)

- 3D Fähigkeiten (WebGL)

- Direkte Video und Audio-Ausgabe (video und audio tag)

- Zeichnen von 2D Bitmaps/Sprites (canvas)

Page 12: Vortrag  HTML5, CSS3, PhoneGap

Mobile Web-Entwicklung 12 © 2012 Prof. Dr. René Peinl

HTML5 Unterstützung im Detail

IE9 IE10 Android 4 iOS5 Firefox 13 Chrome 19 Maximum

Parsing Rules 1 11 11+2 11+2 11+2 11+2 11

Canvas 20 20 20 20 20 20 20

Video 21+2 31 21 21+4 21+4 21+6 31

Audio 20+2 20 20+1 20+3 20+3 20+5 20

Elements 15 15 24 23 21 25 30

Forms 7 56 65 85 56 74 108

User Interaction 17 35 18 18 35 37 37

Microdata+History 0 5 5 5 5 5 20

Web applications 1 16 15 15 20 18 20

Security 0 5 5 5 0 5 15

Geolocation + D.O. 15 15 20 15 20 20 20

Web GL 0 10 9 9 24 25 25

Communications 5 27 13 33 37 37 37

Files 0 10 10 0 10 20 20

Storage 10 20 15 (SQL) 15 (SQL) 20 20 20

Workers 0 10 0 15 10 15 15

Other 6 11 11 14 11 21 43

Gesamt 138 319 280 324 345 402 500

Stand: 14.6.2012 Android 2.3.3: 189 Punkte, Safari 5.1.5 Win: 319 Punkte

Page 13: Vortrag  HTML5, CSS3, PhoneGap

Mobile Web-Entwicklung 13 © 2012 Prof. Dr. René Peinl

Was hilft mir PhoneGap dabei?

PhoneGap ist ein JS-Framework für lokal installierte WebApps auf mobilen Endgeräten

Cross-plattform: iOS 3+, Android, WP7 voll, Blackberry, WebOS, Symbian, Bada großteils

Features

- Zugriff auf Sensoren: Accelerometer, Kompass

- System notifications: alert, sound, vibration

- Bilder mit der Kamera machen und weiterverarbeiten

- Zugriff auf Dateien und local storage

- Zugriff auf Gerätemedien (Bilder, MP3s, Videos, …)

- Zugriff auf Kontakte

PhoneGap bietet kein Framework für UI-Elemente, Touch-Events und ähnliches

PhoneGap => Apache Cordova und wird von Adobe/Nitobe unterstützt

http://www.adobe.com/devnet/html5/articles/extending-phonegap-with-native-plugins-for-android.html

Page 14: Vortrag  HTML5, CSS3, PhoneGap

Mobile Web-Entwicklung 14 © 2012 Prof. Dr. René Peinl

Mobile JavaScript Frameworks for UI

jQuery Mobile (http://jquerymobile.com, v1.1 vom 13.04.12)

- Einige UI Elemente, Touch-Events, Animationen, Theming,

arbeitet mit jQuery core zusammen

Wink (winktoolkit.org, v1.4.1 vom 01.02.12)

- Eher für grafische Spielereien und Effekte,

aber zusammen mit DojoX Mobile und Embed JS ein gutes Team

JO (joapp.com, v0.4.1 vom 23.02.11)

- UI Widgets, wirbt explizit mit PhoneGap Bundle

Sencha Touch 2 (www.sencha.com/products/touch, v2.0.1 vom 06.03.12)

- Umfangreiche User Controls, Animationen, Touch Events, mit SDK auch deploybar

Jo

Page 15: Vortrag  HTML5, CSS3, PhoneGap

Mobile Web-Entwicklung 15 © 2012 Prof. Dr. René Peinl

Cross-Platform Tool Mindshare Index 2012

Page 16: Vortrag  HTML5, CSS3, PhoneGap

Mobile Web-Entwicklung 16 © 2012 Prof. Dr. René Peinl

Was wird ausprobiert, was wieder gelassen

Page 17: Vortrag  HTML5, CSS3, PhoneGap

Mobile Web-Entwicklung 17 © 2012 Prof. Dr. René Peinl

Werkzeugunterstützung

Derzeit größtes Manko für HTML5-Entwickler

Eclipse, Xcode und Flash Professional / Builder bieten hervorragende Unterstützung bei

der Erstellung von Anwendungen für mobile Endgeräte und Desktop

Für JavaScript, HTML5 und CSS3 gibt es derzeit kein umfassendes Tool

Erste Ansätze

- Sencha Animator (v.1.2 vom März 2012)

Grafisches Erstellen von Animationen

- Adobe Edge (mehrere Previews, derzeit P6 vom 11.05.12)

Orientiert sich an Flash Professional, bietet aber viel weniger Funktionen

Timeline wird arrangiert und über JavaScript pausiert, abgespielt, wiederholt, etc.

Übergänge und Animationen sind CSS3-basiert, nicht Canvas

Page 18: Vortrag  HTML5, CSS3, PhoneGap

Mobile Web-Entwicklung 18 © 2012 Prof. Dr. René Peinl

CSS Media Queries

19.06.12: das W3C gibt die Media Queries als Recommendation frei.

Eigenschaften die abgeprüft werden können

- color | min-color | max-color:15

z.B. @media all and (color) { ... }

- monochrome | min- | max-:8

- orientation:portrait | landscape

- resolution | min-resolution | max-resolution: 100dpi

- width | min-width | max-width: 320px (auch mit device- Prefix)

- height | min-height | max-height: 480px (auch mit device- Prefix)

- aspect-ratio | min- | max- (auch mit device- Prefix)

z.B. @media screen and (device-aspect-ratio: 16/9)

https://developer.mozilla.org/En/CSS/Media_queries

http://www.w3.org/TR/css3-mediaqueries/

http://www.heise.de/ix/artikel/Allen-recht-1058764.html

http://www.heise.de/newsticker/meldung/CSS3-Media-Queries-freigegeben-1622054.html

Demo

Page 19: Vortrag  HTML5, CSS3, PhoneGap

Mobile Web-Entwicklung 19 © 2012 Prof. Dr. René Peinl

CSS2 und CSS3 Selektoren

Pseudo classes

1. table tr:nth-child(2n+1) td {background: silver; }

(statt 2n+1 auch odd oder alternativ even für 2n)

Pseudo elements

2. div#content p:first-child::first-line {text-transform: uppercase; }

3. p::first-letter {font-size: 200%; padding: 3px; }

CSS3 Transform & Transitions

transform: rotate(15deg) scale(1.1); (-moz, -webkit, -o Prefix)

transition: all 1.5s ease-in;

http://www.yourhtmlsource.com/stylesheets/advancedselectors.html

http://www.larskasper.de/webdesign/temp/initial.html

http://media.24ways.org/2009/14/5/index.html

Page 20: Vortrag  HTML5, CSS3, PhoneGap

Mobile Web-Entwicklung 20 © 2012 Prof. Dr. René Peinl

CSS kontinuierliche Weiterentwicklung

http://html.adobe.com/webstandards/

Page 21: Vortrag  HTML5, CSS3, PhoneGap

Mobile Web-Entwicklung 21 © 2012 Prof. Dr. René Peinl

Viewport

iPhone bis 3GS

- 320 x 356 Pixel (Landscape) und 480 x 208 Pixel (Portrait).

- <link rel="stylesheet" href="iphone.css" type="text/css"

media="only screen and (max-device-width: 480px)" />

- <meta name="viewport" content="width=320, initial-scale=1.0,

maximum-scale=1.0, user-scalable=yes" />

Generell

- <meta name="viewport" content="width=device-width, initial-scale=1.0,

maximum-scale=4.0, user-scalable=yes" />

http://learnthemobileweb.com/2009/07/mobile-meta-tags/

http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

Page 22: Vortrag  HTML5, CSS3, PhoneGap

Mobile Web-Entwicklung 22 © 2012 Prof. Dr. René Peinl

Orientation Change

/* Portrait */

@media screen and (orientation:portrait)

{ body { width:320px; }}

/* Landscape */

@media screen and (orientation:landscape)

{ body {width:480px; -webkit-transition: width 1s ease; }}

javascript:onresize()

javascript:onorientationchange()

http://matthewjamestaylor.com/demos/ipad-css-layout/index.html

http://www.1stwebdesigner.com/tutorials/how-to-use-css3-orientation-media-queries/

http://www.thecssninja.com/demo/css_chameleon/

http://ie.microsoft.com/testdrive/HTML5/85CSS3_MediaQueries

Page 23: Vortrag  HTML5, CSS3, PhoneGap

Mobile Web-Entwicklung 23 © 2012 Prof. Dr. René Peinl

Literatur

G.R. Frederick, R. Lal (2009): Beginning Smartphone Web Development

Brian Fling (2009): Mobile Design and Development