SlideShare ist ein Scribd-Unternehmen logo
1 von 23
Downloaden Sie, um offline zu lesen
Web-Anwendungen für mobile
Endgeräte mit HTML5 und Co
René Peinl                   26.06.2012
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

Mobile Web-Entwicklung                            2                           © 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

Mobile Web-Entwicklung                              3                    © 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?




Mobile Web-Entwicklung                              4                          © 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"

Mobile Web-Entwicklung                              5                           © 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




Mobile Web-Entwicklung                             6                           © 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



Mobile Web-Entwicklung                            7                   © 2012 Prof. Dr. René Peinl
Vergleich Bildschirmgröße und Punktdichte


                                                                              xhdpi / Retina

                                                          hdpi


                                                                                                     small < 3.5 Zoll
                                                                                                     normal 3.5 - 4.5 Zoll
                                                                                                     large 4.7 - 7.0 Zoll
                                                                                   mdpi              xlarge > 7.0 Zoll


                                                                                                     ldpi < 130 dpi
                                                                                                     mdpi 130 - 180 dpi
                                                                                                     hdpi 220 - 270 dpi
                                                                                                     xhdpi > 300 dpi




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

Mobile Web-Entwicklung                                                 8                       © 2012 Prof. Dr. René Peinl
HTML5 + CSS3 + JavaScript = Mobile Web-App




Mobile Web-Entwicklung               9               © 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



Mobile Web-Entwicklung                                        10                © 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)


Mobile Web-Entwicklung                              11                     © 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
                            Android 2.3.3: 189 Punkte, Safari 5.1.5 Win: 319 Punkte      Stand: 14.6.2012

Mobile Web-Entwicklung                                     12                         © 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


Mobile Web-Entwicklung                                         13                                  © 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
                                                                   Jo

     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



Mobile Web-Entwicklung                            14                     © 2012 Prof. Dr. René Peinl
Cross-Platform Tool Mindshare Index 2012




Mobile Web-Entwicklung        15               © 2012 Prof. Dr. René Peinl
Was wird ausprobiert, was wieder gelassen




Mobile Web-Entwicklung        16                © 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



Mobile Web-Entwicklung                             17                           © 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) { ... }                                                      Demo
       - 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)


 http://www.heise.de/ix/artikel/Allen-recht-1058764.html                       https://developer.mozilla.org/En/CSS/Media_queries
 http://www.heise.de/newsticker/meldung/CSS3-Media-Queries-freigegeben-1622054.html      http://www.w3.org/TR/css3-mediaqueries/

Mobile Web-Entwicklung                                          18                                    © 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; }

   http://www.yourhtmlsource.com/stylesheets/advancedselectors.html
   http://www.larskasper.de/webdesign/temp/initial.html


    CSS3 Transform & Transitions
     transform: rotate(15deg) scale(1.1);                             (-moz, -webkit, -o Prefix)
     transition: all 1.5s ease-in;

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



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




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


Mobile Web-Entwicklung        20                      © 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

Mobile Web-Entwicklung                               21                                  © 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

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


     G.R. Frederick, R. Lal (2009): Beginning Smartphone Web Development
     Brian Fling (2009): Mobile Design and Development




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

Weitere ähnliche Inhalte

Andere mochten auch

Aviso convocatoria urbanismo palmeras del abibe
Aviso convocatoria urbanismo palmeras del abibeAviso convocatoria urbanismo palmeras del abibe
Aviso convocatoria urbanismo palmeras del abibe
mcriverah
 
Final upb proyectos multimedia
Final upb proyectos multimediaFinal upb proyectos multimedia
Final upb proyectos multimedia
Enrique Delgado
 
Htmlrdf wrapper
Htmlrdf wrapperHtmlrdf wrapper
Htmlrdf wrapper
Imanirani
 
SANSÃO, UM FORTE HOMEM DE DEUS
SANSÃO, UM FORTE HOMEM DE DEUSSANSÃO, UM FORTE HOMEM DE DEUS
SANSÃO, UM FORTE HOMEM DE DEUS
Antonio Marcos
 
Wienerumweltanshaft
WienerumweltanshaftWienerumweltanshaft
Wienerumweltanshaft
Ahmad Eid
 
Sra. Naldy Febre, Conferencia Capital Humano Salud Primera Parte
Sra. Naldy Febre, Conferencia Capital Humano Salud Primera ParteSra. Naldy Febre, Conferencia Capital Humano Salud Primera Parte
Sra. Naldy Febre, Conferencia Capital Humano Salud Primera Parte
INACAP
 

Andere mochten auch (20)

Verben - Konjunktiv I
Verben - Konjunktiv IVerben - Konjunktiv I
Verben - Konjunktiv I
 
Aviso convocatoria urbanismo palmeras del abibe
Aviso convocatoria urbanismo palmeras del abibeAviso convocatoria urbanismo palmeras del abibe
Aviso convocatoria urbanismo palmeras del abibe
 
Redesus24octubre
Redesus24octubreRedesus24octubre
Redesus24octubre
 
Final upb proyectos multimedia
Final upb proyectos multimediaFinal upb proyectos multimedia
Final upb proyectos multimedia
 
Blu-ray, DVD- und CD-Neuheiten August 2013 Nr. 2 (Im Vertrieb der NAXOS Deuts...
Blu-ray, DVD- und CD-Neuheiten August 2013 Nr. 2 (Im Vertrieb der NAXOS Deuts...Blu-ray, DVD- und CD-Neuheiten August 2013 Nr. 2 (Im Vertrieb der NAXOS Deuts...
Blu-ray, DVD- und CD-Neuheiten August 2013 Nr. 2 (Im Vertrieb der NAXOS Deuts...
 
Homero y trin
Homero y trinHomero y trin
Homero y trin
 
Htmlrdf wrapper
Htmlrdf wrapperHtmlrdf wrapper
Htmlrdf wrapper
 
Blu-ray, DVD- und CD-Neuheiten Mai 2012 Nr. 1 (Im Vertrieb der NAXOS Deutschl...
Blu-ray, DVD- und CD-Neuheiten Mai 2012 Nr. 1 (Im Vertrieb der NAXOS Deutschl...Blu-ray, DVD- und CD-Neuheiten Mai 2012 Nr. 1 (Im Vertrieb der NAXOS Deutschl...
Blu-ray, DVD- und CD-Neuheiten Mai 2012 Nr. 1 (Im Vertrieb der NAXOS Deutschl...
 
Preposizioni luoghi dat-akk
Preposizioni luoghi dat-akkPreposizioni luoghi dat-akk
Preposizioni luoghi dat-akk
 
SANSÃO, UM FORTE HOMEM DE DEUS
SANSÃO, UM FORTE HOMEM DE DEUSSANSÃO, UM FORTE HOMEM DE DEUS
SANSÃO, UM FORTE HOMEM DE DEUS
 
WS1112 EET AI Master
WS1112 EET AI MasterWS1112 EET AI Master
WS1112 EET AI Master
 
Weerth: Herbsttagung der Außenwirtschaftsrunde 2009: Zollrecht im Wandel - v...
Weerth: Herbsttagung der Außenwirtschaftsrunde 2009: Zollrecht im Wandel - v...Weerth: Herbsttagung der Außenwirtschaftsrunde 2009: Zollrecht im Wandel - v...
Weerth: Herbsttagung der Außenwirtschaftsrunde 2009: Zollrecht im Wandel - v...
 
Wienerumweltanshaft
WienerumweltanshaftWienerumweltanshaft
Wienerumweltanshaft
 
Blu-ray, DVD- und CD-Neuheiten Juli 2013 Nr. 1 (Im Vertrieb der NAXOS Deutsch...
Blu-ray, DVD- und CD-Neuheiten Juli 2013 Nr. 1 (Im Vertrieb der NAXOS Deutsch...Blu-ray, DVD- und CD-Neuheiten Juli 2013 Nr. 1 (Im Vertrieb der NAXOS Deutsch...
Blu-ray, DVD- und CD-Neuheiten Juli 2013 Nr. 1 (Im Vertrieb der NAXOS Deutsch...
 
Präsentation Energieagentur Berghamer & Penzkofer
Präsentation Energieagentur Berghamer & PenzkoferPräsentation Energieagentur Berghamer & Penzkofer
Präsentation Energieagentur Berghamer & Penzkofer
 
DrKPI-SEO-Strategie
DrKPI-SEO-StrategieDrKPI-SEO-Strategie
DrKPI-SEO-Strategie
 
Sra. Naldy Febre, Conferencia Capital Humano Salud Primera Parte
Sra. Naldy Febre, Conferencia Capital Humano Salud Primera ParteSra. Naldy Febre, Conferencia Capital Humano Salud Primera Parte
Sra. Naldy Febre, Conferencia Capital Humano Salud Primera Parte
 
twitter im Mittelstand
twitter im Mittelstandtwitter im Mittelstand
twitter im Mittelstand
 
Unidad3
Unidad3Unidad3
Unidad3
 
Clase6septiembre2013
Clase6septiembre2013Clase6septiembre2013
Clase6septiembre2013
 

Ähnlich wie Vortrag HTML5, CSS3, PhoneGap

SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
fabianmoritz
 
Relicamp12 Responsive Webdesign und Webapps
Relicamp12 Responsive Webdesign und WebappsRelicamp12 Responsive Webdesign und Webapps
Relicamp12 Responsive Webdesign und Webapps
Maria Herrmann
 
Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011
Dominik Helleberg
 

Ähnlich wie Vortrag HTML5, CSS3, PhoneGap (20)

Responsive Images
Responsive ImagesResponsive Images
Responsive Images
 
Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.Cross-Apps-Entwicklung für iPhone, Android und Co.
Cross-Apps-Entwicklung für iPhone, Android und Co.
 
Responsive Images
Responsive ImagesResponsive Images
Responsive Images
 
Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der HaubeResponsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haube
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
 
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
 
Html5 - Traum oder Wirklichkeit
Html5 - Traum oder WirklichkeitHtml5 - Traum oder Wirklichkeit
Html5 - Traum oder Wirklichkeit
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
 
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
SharePoint Responsive - Mobile Webseiten mit SharePoint 2013 und SharePoint O...
 
HTML5-Legacy-Anwendungen
HTML5-Legacy-AnwendungenHTML5-Legacy-Anwendungen
HTML5-Legacy-Anwendungen
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
 
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
 
Relicamp12 Responsive Webdesign und Webapps
Relicamp12 Responsive Webdesign und WebappsRelicamp12 Responsive Webdesign und Webapps
Relicamp12 Responsive Webdesign und Webapps
 
Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011
 
Top 10 Internet Trends 2004
Top 10 Internet Trends 2004Top 10 Internet Trends 2004
Top 10 Internet Trends 2004
 
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine WebseiteWebdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite
 
Responsive Design by Peter Grosskopf
Responsive Design by Peter GrosskopfResponsive Design by Peter Grosskopf
Responsive Design by Peter Grosskopf
 

Vortrag HTML5, CSS3, PhoneGap

  • 1. Web-Anwendungen für mobile Endgeräte mit HTML5 und Co René Peinl 26.06.2012
  • 2. 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 Mobile Web-Entwicklung 2 © 2012 Prof. Dr. René Peinl
  • 3. 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 Mobile Web-Entwicklung 3 © 2012 Prof. Dr. René Peinl
  • 4. 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? Mobile Web-Entwicklung 4 © 2012 Prof. Dr. René Peinl
  • 5. 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" Mobile Web-Entwicklung 5 © 2012 Prof. Dr. René Peinl
  • 6. 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 Mobile Web-Entwicklung 6 © 2012 Prof. Dr. René Peinl
  • 7. 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 Mobile Web-Entwicklung 7 © 2012 Prof. Dr. René Peinl
  • 8. Vergleich Bildschirmgröße und Punktdichte xhdpi / Retina hdpi small < 3.5 Zoll normal 3.5 - 4.5 Zoll large 4.7 - 7.0 Zoll mdpi xlarge > 7.0 Zoll ldpi < 130 dpi mdpi 130 - 180 dpi hdpi 220 - 270 dpi xhdpi > 300 dpi siehe auch http://developer.android.com/resources/dashboard/screens.html http://opensignalmaps.com/reports/fragmentation.php Mobile Web-Entwicklung 8 © 2012 Prof. Dr. René Peinl
  • 9. HTML5 + CSS3 + JavaScript = Mobile Web-App Mobile Web-Entwicklung 9 © 2012 Prof. Dr. René Peinl
  • 10. 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 Mobile Web-Entwicklung 10 © 2012 Prof. Dr. René Peinl
  • 11. 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) Mobile Web-Entwicklung 11 © 2012 Prof. Dr. René Peinl
  • 12. 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 Android 2.3.3: 189 Punkte, Safari 5.1.5 Win: 319 Punkte Stand: 14.6.2012 Mobile Web-Entwicklung 12 © 2012 Prof. Dr. René Peinl
  • 13. 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 Mobile Web-Entwicklung 13 © 2012 Prof. Dr. René Peinl
  • 14. 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 Jo  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 Mobile Web-Entwicklung 14 © 2012 Prof. Dr. René Peinl
  • 15. Cross-Platform Tool Mindshare Index 2012 Mobile Web-Entwicklung 15 © 2012 Prof. Dr. René Peinl
  • 16. Was wird ausprobiert, was wieder gelassen Mobile Web-Entwicklung 16 © 2012 Prof. Dr. René Peinl
  • 17. 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 Mobile Web-Entwicklung 17 © 2012 Prof. Dr. René Peinl
  • 18. 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) { ... } Demo - 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) http://www.heise.de/ix/artikel/Allen-recht-1058764.html https://developer.mozilla.org/En/CSS/Media_queries http://www.heise.de/newsticker/meldung/CSS3-Media-Queries-freigegeben-1622054.html http://www.w3.org/TR/css3-mediaqueries/ Mobile Web-Entwicklung 18 © 2012 Prof. Dr. René Peinl
  • 19. 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; } http://www.yourhtmlsource.com/stylesheets/advancedselectors.html http://www.larskasper.de/webdesign/temp/initial.html CSS3 Transform & Transitions  transform: rotate(15deg) scale(1.1); (-moz, -webkit, -o Prefix)  transition: all 1.5s ease-in; http://media.24ways.org/2009/14/5/index.html Mobile Web-Entwicklung 19 © 2012 Prof. Dr. René Peinl
  • 20. CSS kontinuierliche Weiterentwicklung http://html.adobe.com/webstandards/ Mobile Web-Entwicklung 20 © 2012 Prof. Dr. René Peinl
  • 21. 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 Mobile Web-Entwicklung 21 © 2012 Prof. Dr. René Peinl
  • 22. 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 Mobile Web-Entwicklung 22 © 2012 Prof. Dr. René Peinl
  • 23. Literatur  G.R. Frederick, R. Lal (2009): Beginning Smartphone Web Development  Brian Fling (2009): Mobile Design and Development Mobile Web-Entwicklung 23 © 2012 Prof. Dr. René Peinl