Mobile Web Apps

  • Published on
    10-Dec-2014

  • View
    4.961

  • Download
    2

Embed Size (px)

DESCRIPTION

Die Folien meines Vortrags zur Einfhrung in die Entwicklung von Mobile Web Apps auf der Web DevCon 2011 in Hamburg.

Transcript

  • MOBILE WEB APPSFoto Csar Poyatos (http://www.flickr.com/photos/cpoyatos/5791320785)

    http://www.flickr.com/photos/cpoyatos/5791320785http://www.flickr.com/photos/cpoyatos/5791320785
  • AGENDA

    Einfhrung

    Web Apps handgemacht

    Frameworks

    Tools

  • HOLGER RPRICH

  • APPS?

  • APPS?

    Der Begriff App (von der englischen Kurzform fr application, das grammatische Geschlecht ist im Sprachgebrauch variabel) bezeichnet im Allgemeinen jede Form von Anwendungsprogrammen. Im Sprachgebrauch sind damit mittlerweile jedoch meist Anwendungen fr moderne Smartphones und Tablet-Computer gemeint, die ber einen in das Betriebssystem integrierten Onlineshop bezogen und so direkt auf dem Smartphone installiert werden knnenWikipedia

    http://de.wikipedia.org/wiki/Englische_Sprachehttp://de.wikipedia.org/wiki/Englische_Sprachehttp://de.wikipedia.org/wiki/Genushttp://de.wikipedia.org/wiki/Genushttp://de.wikipedia.org/wiki/Genushttp://de.wikipedia.org/wiki/Genushttp://de.wikipedia.org/wiki/Genushttp://de.wikipedia.org/wiki/Genushttp://de.wikipedia.org/wiki/Genushttp://de.wikipedia.org/wiki/Genushttp://de.wikipedia.org/wiki/Genushttp://de.wikipedia.org/wiki/Genushttp://de.wikipedia.org/wiki/Genushttp://de.wikipedia.org/wiki/Genushttp://de.wikipedia.org/wiki/Genushttp://de.wikipedia.org/wiki/Genushttp://de.wikipedia.org/wiki/Anwendungsprogrammhttp://de.wikipedia.org/wiki/Anwendungsprogrammhttp://de.wikipedia.org/wiki/Anwendungsprogrammhttp://de.wikipedia.org/wiki/Smartphonehttp://de.wikipedia.org/wiki/Smartphonehttp://de.wikipedia.org/wiki/Tablet-PChttp://de.wikipedia.org/wiki/Tablet-PChttp://de.wikipedia.org/wiki/Tablet-PChttp://de.wikipedia.org/wiki/Tablet-PChttp://de.wikipedia.org/wiki/Tablet-PChttp://de.wikipedia.org/wiki/Tablet-PChttp://de.wikipedia.org/wiki/Tablet-PChttp://de.wikipedia.org/wiki/Tablet-PChttp://de.wikipedia.org/wiki/Tablet-PChttp://de.wikipedia.org/wiki/Tablet-PChttp://de.wikipedia.org/wiki/Tablet-PChttp://de.wikipedia.org/wiki/Tablet-PChttp://de.wikipedia.org/wiki/Betriebssystemhttp://de.wikipedia.org/wiki/Betriebssystemhttp://de.wikipedia.org/wiki/Betriebssystemhttp://de.wikipedia.org/wiki/Betriebssystemhttp://de.wikipedia.org/wiki/Betriebssystemhttp://de.wikipedia.org/wiki/Betriebssystemhttp://de.wikipedia.org/wiki/Betriebssystemhttp://de.wikipedia.org/wiki/Betriebssystemhttp://de.wikipedia.org/wiki/Betriebssystemhttp://de.wikipedia.org/wiki/Betriebssystemhttp://de.wikipedia.org/wiki/Betriebssystemhttp://de.wikipedia.org/wiki/Betriebssystemhttp://de.wikipedia.org/wiki/Betriebssystemhttp://de.wikipedia.org/wiki/Betriebssystemhttp://de.wikipedia.org/wiki/Onlineshophttp://de.wikipedia.org/wiki/Onlineshophttp://de.wikipedia.org/wiki/Onlineshophttp://de.wikipedia.org/wiki/Onlineshophttp://de.wikipedia.org/wiki/Onlineshophttp://de.wikipedia.org/wiki/Onlineshop
  • ES GIBT FR ALLES EINE APP

    Wenn du ... willst, gibt es eine App dafr

    Allein im Apple App Store gibt es ber 500.000 Apps

    Tglich Millionen von Downloads

    BITKOM - App Boom geht weiter

    Mehr als 15 Millionen Deutsche nutzen Apps auf ihren Handys

    2010 waren es noch 10 Millionen

    Durchschnittlich 17 Apps je MobiltelefonQuelle BITKOM, 04.09.2011 http://www.bitkom.org/de/markt_statistik/64022_69195.aspx

    http://www.gartner.com/it/page.jsp?id=1764714http://www.gartner.com/it/page.jsp?id=1764714
  • NATIV VS. WEB

    Ein Groteil der Apps wird heute nativ entwickelt

    Individuell fr jede Plattform

    Web Apps werden unabhngig von der Plattform entwickelt

    Web Apps basieren auf Web Standards wie HTML5, CSS3 & JavaScript

  • EINE FRAGE DER PLATTFORM1%2%2%

    12%

    22%

    18%

    43%

    Quelle Gartner, 11.08.2011 http://www.gartner.com/it/page.jsp?id=1764714

    Android iOS Symbian BlackBerry BadaMicrosoft Andere

    Java

    Objective-C

    C++

    J2ME

    WebKit

    WebKit

    WebKit

    WebKit

    Android

    iOS

    Symbian

    RIM

    http://www.gartner.com/it/page.jsp?id=1764714http://www.gartner.com/it/page.jsp?id=1764714
  • OK ...There is no WebKit on Mobile

    Paul Peter Koch - http://www.quirksmode.org/webkit.html

  • ABER ZUMINDEST ...bleibt es bei einer Skriptsprache (JavaScript), einer Markup-

    Sprache (HTML) und einem Style System (CSS)

  • NATIV VS. WEB

    Native Apps

    Direkter Zugriff auf Gerte APIs

    Geeignet fr rechenintensive Apps wie z.B. Spiele

    Einfache Installation ber Appstores

    Vermitteln hhere Wertigkeit

    Web Apps

    Gleiche App fr mehre Plattformen

    Unabhngigkeit von Zulassungsprozessen und Einschrnkungen von App Stores

    Updates und Erweiterungen lassen sich schneller verbreiten

    Leichter Einstieg fr Web-Entwickler

  • KLINGT SPITZE!Her mit meiner App

  • HTML5, CSS3 & JAVASCRIPTApps handgemacht

  • WEBSITE ALS WEB APP

    Eine Web App wird initial im Browser aufgerufen und zum Home Screen hinzugefgt

  • HOME SCREEN ICON

    Unterschiedliche Gren mittels sizes Attribut

    57x57 / default IPhone 3

    72x72 IPad

    114x114 IPhone 4

    Graphische Effekte

    apple-touch-icon

    apple-touch-icon-precomposed

  • FULLSCREEN

    Das Meta Element apple-mobile-web-app-capable sorgt dafr, dass die App anschlieend Fullscreen geffnet wird

  • STARTUP IMAGE

    320x460 IPhone

    1004x768 IPad

    Unterschiedliche Bilder je Auflsung oder Orientierung nur mittels Media Queries oder JavaScript

  • STATUSBAR STYLE

    Drei Styles stehen zur Auswahl

    default

    black

    black-translucent

  • SKALIERUNG

  • LAYOUTS MIT CSS3

    Mobile Browser bieten eine gute CSS3 Untersttzung

    Somit steht eine Reihe ntzlicher Features zur Verfgung wie z.B:

    CSS3 Selektoren

    Multiple Hintergrundbilder

    Deckkraft

    Alpha-Transparenz

    Abgerundete Kanten

    Text-Schattierung

    Box-Schattierung

    Nachladen von Schriften mit @font-face

    Verlufe

    Mehrspaltige Layouts

    Animationen

    bergnge

  • IPHONE STYLES MIT CSS3

    Schriftfont-family: Helvetica, sans-serif;

    Skalieren der Textgre verhindern text-size-adjust: none;

    Verlufebackground-image: -webkit-gradient(...)

    html { text-size-adjust: none; -webkit-text-size-adjust: none;}

    body { margin: 0; font-family: Helvetica, sans-serif; background-color: #c5ccd3; background-image: -webkit-gradient(linear, left top, right top,

    color-stop(.75, transparent), color-stop(.75, rgba(255,255,255,.1))

    ); background-size: 7px; -webkit-background-size: 7px;}

  • HEADER

    WSD Monitor Refresh

    header { height: 44px; font-weight: bold; text-shadow: rgba(0,0,0,.7) 0 -1px 0; border-top: solid 1px rgba(255,255,255,.6); border-bottom: solid 1px rgba(0,0,0,.6); color: #fff; background-color: #8195af; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.4)), to(rgba(255,255,255,.05)) ), -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0,0,64,.1)) ); background-repeat: no-repeat; background-position: top left, bottom left; background-size: 100% 21px, 100% 22px; -webkit-background-size: 100% 21px, 100% 22px; box-sizing: border-box; -webkit-box-sizing: border-box;}

  • INHALT

    DSL DSL NK DSL BK DSL Wechsler Formular

    .group-wrapper h2 { ... text-shadow: #fff 0 1px 0;}

    .group-wrapper ul { background-color: #fff; border: solid 1px #a9abae; border-radius: 10px; -webkit-border-radius: 10px; ...}

    .group-wrapper ul li:not(:last-child) { border-bottom: inherit;}

    http://dsl.1und1.de/xml/monitorhttp://dsl.1und1.de/xml/monitorhttp://dsl.1und1.de/xml/monitorhttp://dsl.1und1.de/xml/monitorhttp://dsl.1und1.de/xml/monitorhttp://kundenshop.1und1.de/xml/monitor
  • PAGE TRANSITIONS DSL DSL NK DSL BK DSL Wechsler Formular ...

    #content { overflow-x: hidden; width: 100%;}

    #content section { width: 50%; float: left; padding: 0; margin: 0;}

    #page-slider { -webkit-transition: all 0.5s ease-in-out; width: 200%;}

    #content.details #page-slider { -webkit-transform: translate3d(-50%, 0, 0);}

    #content.overview #page-slider { -webkit-transform: translate3d(0, 0, 0); }

    http://kundenshop.1und1.de/xml/monitorhttp://kundenshop.1und1.de/xml/monitorhttp://wechsler.1und1.de/xml/monitorhttp://wechsler.1und1.de/xml/monitor
  • ... UND DANN WAR DAS NETZ WEG ...

  • OFFLINE WEB APPS

    HTML5 bietet mit dem Application Cache die Mglichkeit Web Seiten auch offline zu nutzen

    Gesteuert wird dies ber eine simple Textdatei, dem Cache Manifest

  • CACHE MANIFEST

    CACHE

    enthlt jede zu cachende Ressource

    NETWORK

    enthlt Ressourcen die nicht gecached werden knnen

    FALLBACK

    enthlt alternative offline Ressourcen

    CACHE MANIFEST

    # Version 1.0

    CACHE:css/main.cssjs/jquery.min.1.6.4.jsjs/app.jsjs/spinner.jsimages/wsdmonitor.pngimages/startup.png

    NETWORK:proxy.php

    FALLBACK:/ /offline.html

  • APPLICATION CACHE

    Application Cache aktivieren

    Das Cache Manifest muss mit dem MIME-Type text/cache-manifest ausgeliefert werden

    Wird der Apache als Web Server verwendet, kann dies z.B. ber den folgenden Eintrag in einer .htaccess Datei aktiviert werden

    AddType text/cache-manifest .appcache

  • CACHE AKTUALISIEREN

    Wurde eine App gecached, werden die Resourcen nicht neu geladen auer

    der Speicher des Browse