SlideShare ist ein Scribd-Unternehmen logo
1 von 61
Downloaden Sie, um offline zu lesen
MOBILE WEB APPS
Foto César Poyatos (http://www.flickr.com/photos/cpoyatos/5791320785)
AGENDA


• Einführung

• Web Apps     „handgemacht“

• Frameworks

• Tools
HOLGER RÜPRICH
APPS?
APPS?

„Der Begriff App (von der englischen Kurzform für application,
das grammatische Geschlecht ist im Sprachgebrauch variabel)
bezeichnet im Allgemeinen jede Form von
Anwendungsprogrammen. Im Sprachgebrauch sind damit
mittlerweile jedoch meist Anwendungen für moderne
Smartphones und Tablet-Computer gemeint, die über einen in
das Betriebssystem integrierten Onlineshop bezogen und so
direkt auf dem Smartphone installiert werden können“
Wikipedia
ES GIBT FÜR ALLES EINE APP
•   Wenn du ... willst, gibt es eine App dafür

     •    Allein im Apple App Store gibt es über 500.000 Apps

     •    Täglich 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 Mobiltelefon
    Quelle BITKOM, 04.09.2011 http://www.bitkom.org/de/markt_statistik/64022_69195.aspx
NATIV VS. WEB

• Ein   Großteil der Apps wird heute nativ entwickelt

  • Individuell   für jede Plattform

• Web Apps     werden unabhängig von der Plattform entwickelt

  • Web Apps      basieren auf Web Standards wie HTML5, CSS3 &
   JavaScript
EINE FRAGE DER PLATTFORM
                                         1 %
                                  2 % 2 %


                12 %




                         WebKit
                          J2ME
                           RIM

                                                                                       43 %
                                                              Android
                                                              WebKit
                                                               Java

                 Symbian
                 WebKit
                  C++
     22 %




                                  Objective-C
                                   WebKit
                                     iOS




                                      18 %


             Android          iOS            Symbian        BlackBerry         Bada
             Microsoft        Andere

            Quelle Gartner, 11.08.2011 http://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                             •   Web Apps

    •   Direkter Zugriff auf Geräte APIs        •   Gleiche App für mehre
                                                    Plattformen
    •   Geeignet für rechenintensive Apps
        wie z.B. Spiele                         •   Unabhängigkeit von
                                                    Zulassungsprozessen und
    •   Einfache Installation über                  Einschränkungen von App Stores
        Appstores
                                                •   Updates und Erweiterungen lassen
    •   Vermitteln höhere Wertigkeit                sich schneller verbreiten

                                                •   Leichter Einstieg für Web-
                                                    Entwickler
KLINGT SPITZE!
  Her mit meiner App
HTML5, CSS3 & JAVASCRIPT
       Apps handgemacht
WEBSITE ALS WEB APP



• Eine Web App wird initial im
 Browser aufgerufen und zum
 Home Screen hinzugefügt
HOME SCREEN ICON
•   Unterschiedliche Größen mittels
    sizes Attribut

    •   57x57 / default IPhone 3

    •   72x72 IPad

    •   114x114 IPhone 4

•   Graphische Effekte
                                   <link rel="apple-touch-icon" href="
                                                                       homescreen.png">

    •   apple-touch-icon

    •   apple-touch-icon-precomposed
FULLSCREEN

• Das Meta Element apple-
 mobile-web-app-capable sorgt
 dafür, dass die App
 anschließend Fullscreen
 geöffnet wird

                            web-app-   capable"
 <meta name ="apple-mobile-
       content="yes">
STARTUP IMAGE

   • 320x460           IPhone

   • 1004x768            IPad

   • Unterschiedliche              Bilder je
     Auflösung oder
     Orientierung nur mittels
     Media Queries oder
     JavaScript
                                              ef="startup.pn   g ">
                 -   touch-s tartup-image" hr
<link rel="apple
STATUSBAR STYLE
•   Drei Styles stehen zur Auswahl

    •   default

    •   black

    •   black-translucent


                       <meta name="apple-mobile-web-app-status
                                                               -bar-style" content="black">
                                                                                    default">
SKALIERUNG




<meta name="viewport" content="initial-scale=1.0; maxi
                                                       mum-scale=1.0; user-scalable=no">
LAYOUTS MIT CSS3
•   Mobile Browser bieten eine gute CSS3   •   Text-Schattierung
    Unterstützung
                                           •   Box-Schattierung
•   Somit steht eine Reihe nützlicher
    Features zur Verfügung wie z.B:        •   Nachladen von Schriften mit @font-
                                               face
    •   CSS3 Selektoren
                                           •   Verläufe
    •   Multiple Hintergrundbilder
                                           •   Mehrspaltige Layouts
    •   Deckkraft
                                           •   Animationen
    •   Alpha-Transparenz
                                           •   Übergänge
    •   Abgerundete Kanten
IPHONE STYLES MIT CSS3

• Schrift
 font-family: Helvetica,
              sans-serif;


• Skalieren
          der Textgröße       html {
                                text-size-adjust: none;

 verhindern                   }
                                -webkit-text-size-adjust: none;


 text-size-adjust: none;      body {
                                margin: 0;
                                                                  f;
                                font-family: Helvetica, sans-seri
                                background-color: #c5ccd3;
• Verläufe                      background-image:
                                  -webkit-gradient(linear, left top
                                                                     , right top,
                                     color-stop(.75, transparent),
 background-image: -webkit-          color-stop(.75, rgba(255,255,255,.
                                                                        1))

 gradient(...)                      );
                                  background-size: 7px;
                                  -webkit-background-size: 7px;
                              }
HEADER
                                                         header {
                                                            height: 44
                                                                             px;
                                                           font-weigh
                                                                             t: b o l d;
                                                           text-shado
                                                                             w: r g b a (0 ,
                                                           border-top                        0,0,.7) 0
                                                                            : solid 1p                  -1px 0;
                                                          border-bot                         x rgba(255
                                                                            t o m: s o l i d            ,255,255,.
                                                                                                                   6);
<header>                                                  color: #ff
                                                                           f;
                                                                                              1px rgba(0
                                                                                                         ,0,0,.6);
  <h1>WSD Monitor</h1>                                    background
                                                                           - c o l o r: # 8
                                             ;">                                            195af;
  <button id="refresh" onclick="refreshAll()
                                                         background
                                                                           - i m a g e:
                                                            -webkit-gr
    <span>Refresh</span>                                      from(rgba(
                                                                              adient(lin
                                                                                              ear, left
                                                                                                         top, left
                                                                                  255,255,25                        bottom,
  </button>                                                   t o ( r g b a (2 5
                                                                                 5,255,255,
                                                                                                5,.4)),
                                                           ),                                   .05))
</header>
                                                          -webkit-gr
                                                                            adient(lin
                                                            f r o m (t r a n s                 ear, left
                                                                                p a r e n t) ,           top, left
                                                                                                                    bottom,
                                                            t o ( r g b a (0 ,
                                                                               0,64,.1))
                                                         );
                                                      background
                                                                       - r e p e a t: n
                                                      background                          o-repeat;
                                                                      - p o s i t i o n:
                                                      background                           top left,
                                                                      -size: 100                       bottom lef
                                                     -webkit-ba                           % 21px, 10              t;
                                                                      ckground-s                      0% 22px;
                                                     box-sizing                          ize: 100%
                                                                     : border-b                       21px, 100%
                                                     -webkit-bo                          ox;                     22px;
                                                                     x-sizing:
                                                   }                                    border-box
                                                                                                     ;
INHALT
<div class="group-wrapper">
  <h2>DSL</h2>
  <ul>
    <li><a href="...">DSL NK</a></li>
    <li><a href="...">DSL BK</a></li>
            .group-w ">DSL h2 {                  </li>
    <li><a href="...rapper Wechsler Formular</a>
               ...
  </ul>
              text-shadow: #fff 0
</div>                            1px 0;
            }

            .group-wrapper ul {
              background-color: #f
                                    ff;
              border: solid 1px #a
                                    9abae;
              border-radius: 10px
                                  ;
              -webkit-border-radiu
                                   s: 10px;
              ...
           }

           .group-wrapper ul li
                                :not(:last-child) {
             border-bottom: inhe
                                 rit;
           }
PAGE TRANSITIONS
<div id="content">
  <div id="page-slider">                          #content {
    <section id="overview">                          o v e r f l o w - x: h
                                                                            idden;
       <div class="group-wrapper">                   width: 100%;
         <h2>DSL</h2>                             }
         <ul>
                                                 #content sect
           <li><a href="...">DSL NK</a></li>                             ion {
                                                    width: 50%;
           <li><a href="...">DSL BK</a></li>        float: left;
           <li><a href="...">DSL Wechsler Formular</a></li>
                                                    padding: 0;
         </ul>                                      margin: 0;
       </div>                                   }
       ...
                                                #page-slider
    </div>                                                             {
                                                  -webkit-trans
    <section id="details">                                                ition: all 0.
                                                  width: 200%;                          5s ease-in-ou
                                                                                                              t;
       <h2></h2>                               }
       <pre></pre>
    </section>                                 #content.deta
                                                                      ils #page-sli
                                                 -webkit-trans                      der {
  </div>                                                                 form: transla
                                              }                                        t e3 d ( - 5 0 % , 0 ,
</div>                                                                                                        0);

                                                            #content.over
                                                                          view #page-sl
                                                              -webkit-trans             ider {
                                                                            form: transla
                                                            }                             t e3 d ( 0 , 0 , 0 )
                                                                                                               ;
... UND DANN WAR DAS
      NETZ WEG ...
OFFLINE WEB APPS

• HTML5   bietet mit dem
 Application Cache die
 Möglichkeit Web Seiten auch
 offline zu nutzen

• Gesteuert wird dies über
 eine simple Textdatei, dem
 Cache Manifest
CACHE MANIFEST
•   CACHE                              CACHE MANIFEST

    •   enthält jede zu cachende       # Version 1.0

        Ressource                      CACHE:
                                       css/main.css
                                       js/jquery.min.1.6.4.js
•   NETWORK                            js/app.js
                                       js/spinner.js
    •   enthält Ressourcen die nicht   images/wsdmonitor.png
                                       images/startup.png
        gecached werden können
                                       NETWORK:
                                       proxy.php
•   FALLBACK
                                       FALLBACK:
                                       / /offline.html
    •   enthält alternative offline
        Ressourcen
APPLICATION CACHE

• Application   Cache aktivieren             <!DOCTYPE html>
                                             <html manifest="wsdmonitor.appcache">



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


  • Wirdder 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 außer

 • der   Speicher des Browsers wird vom Nutzer geleert

 • dasCache Manifest ändert sich - eine Änderung an einer
  gespeicherten Resource (z.B. einer CSS-Datei) führt nicht
  zur Aktualisierung des Caches

 • der Application   Cache wird programatisch aktualisiert
SOWEIT SO EINFACH ...
  aber muss ich das alles selbst machen?
FRAMEWORKS
KLASSEN VON FRAMEWORKS
•   JavaScript basierende Frameworks

    •   Anwendungen werden mittels JavaScript entwickelt und mit Hilfe von CSS gestyled

•   Markup basierende Frameworks

    •   Anwendungen werden in HTML ausgezeichnet und mit CSS & JavaScript erweitert

•   Micro Frameworks

    •   Leichtgewichtige Frameworks die kleine Helfer-Methoden liefern
        z.B. $() anstatt document.getElementById()

•   Native Wrapper

    •   Frameworks die es ermöglichen Web Apps als native Apps zu verpacken
JAVASCRIPT BASIEREND
SENCHA TOUCH
•   Sencha Touch ist ein Framework zur
    Entwicklung von Web Apps die
    aussehen und sich anfühlen wie native
    Apps auf IPhone, Android und
    BlackBerry Geräten

•   Kompatibel zu Apple iOS 3+, Android
    2.1+ und BlackBerry 6+ Geräten

•   Einige der Features

    •   Komponenten, Theming, Forms,
        Scrolling, Touch Events, Data Access
        & MVC, Charts
SENCHA TOUCH

• Version
        2 des Frameworks
 wurde angekündigt

 • Neben  deutlichen
   Performance-
   Optimierungen soll die
   neue Version das
   Packaging nativer Apps
   ermöglichen
ETLICHE BEISPIEL-APPS

• Auf der Website von Sencha
 gibt es etliche Beispiele von
 Web Apps die mittels
 Sencha Touch realisiert
 wurden

• DieO'Reilly Conferences
 App hat weniger als 800
 Zeilen Code
KITCHEN SINK
SENCHA TOUCH IN ACTION

                                                                       wsd = new Ext.Applicat
                                                                                              ion({

                                                                            launch: function() {
<!DOCTYPE html>
<html>                                                                     this.viewport = new Ex
                                                                                                  t.Panel({
  <head>                                                                     fullscreen: true,
    <title>WSD Monitor</title>                                               dockedItems: [{
                                                              cript"></script>
    <script src= "lib/touch/sencha-touch.js" type="text/javas                  xtype:'toolbar />
                                                           rel="stylesheet" type="text/css" ',
    <link href ="lib/touch/resources/css/sencha-touch.css"                     title:'WSD Monitor'
    <script type="text/javas cript">                                         }],
      ...                                                                      layout: 'fit',
    </script>                                                                  styleHtmlContent: true
                                                                                                      ,
  </head>                                                                      html: '<h2>DSL</h2>'
  <body></body>                                                              });
</html>
                                                                        }

                                                                     });
MEHRERE SEITEN
wsd = new Ext.Application({
    launch: function() {

      this.toolbar = new Ext.Toolbar({
        dock: 'top',
                         Toolbar                       Toolbar
        title: 'WSD Monitor'
      });


                         Gruppe
      this.overviewCard = new Ext.Panel({
        dockedItems: [this.toolbar],
        html: 'Overview'                                Inhalt
      });


                         Gruppe
      this.detailCard = new Ext.Panel({
        dockedItems: [this.toolbar],
        html: 'Details'
      });
                      overviewCard                    detailCard
      this.viewport = new Ext.Panel({
        layout: 'card',
        fullscreen: true,          wsd.viewport
        cardSwitchAnimation: 'slide',
        items: [this.overviewCard, this.detailCard]
      });
  }
});
MARKUP BASIEREND
JQUERY MOBILE
•   jQuery Mobile ist bietet ein User Interface
    System über alle populären Plattformen
    für Mobile Endgeräte hinweg

•   Es basiert auf jQuery und jQuery UI

•   Es ist leichtgewichtig (ca. 30 KB inkl CSS
    plus weitere 30 KB für jQuery) und setzt
    auf progressive enhancement sowie auf
    responsive design

•   Unterstützt werden folgende Plattformen

    •   iOS, Android, BlackBerry, Bada,
        Windows Phone, palm webOS,
        Symbian & MeeGo
JQUERY MOBILE IN ACTION
<!DOCTYPE html>
<html>
  <head>
    <title>WSD Monitor</title>
    <meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default"
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
  </head>
  <body>
    <div id="overview" data-role="page">
       <div data-role="header">
         <h1>WSD Monitor</h1>
         <a href="#">Refresh</a>
       </div>
       <div data-role="content">
         <h2>DSL</h2>
         <ul>
           <li><a href="#details" data-transition="slide">DSL NK</a></li>
           <li><a href="#details" data-transition="slideup">DSL BK</a></li>
           <li><a href="#details" data-transition="pop">DSL Wechsler Formular</a></li>
         </ul>
       </div>
    </div>
MICRO FRAMEWORKS
NATIVE WRAPPER
PHONEGAP
PHONEGAP

•   PhoneGap ist eine HTML5 App Plattform, die es ermöglicht Web Apps
    als native Apps zu vertreiben und Zugriff auf Geräte APIs zu bekommen

•   Unterstützt werden die folgenden Plattformen:

    •   iOS, Android, BlackBerry, palm webOS, Symbian & Bada

•   Entwickelt wird PhoneGap von Nitobi die gerade von Adobe aufgekauft
    wurden

•   Es ist geplant PhoneGap an die Apache Software Foundation zu
    übergeben
ZUGRIFF AUF NATIVE APIS
ZUGRIFF AUF NATIVE APIS


• PhoneGap  hängt Methoden      navigator.device.capture.captureImage(
                                   CaptureCB captureSuccess,

 für den Zugriff auf native        CaptureErrorCB captureError,
                                   [CaptureImageOptions options]
 APIs unterhalb von navigator   );


 ein
                                                   .find(
                                navigator.contacts
• Referenz     Doku               contactFields,
                                  contactSuccess,
 http://docs.phonegap.com         contactError,
                                  contactFindOptions
                                );
PHONEGAP BUILD

• ZurErstellung einer nativen
 App muss aktuell das
 jeweilige SDK installiert sein

• Mit
    PhoneGap Build wird ein
 Cloud Service zur
 Kompilierung von nativen
 Apps geboten
 http://build.phonegap.com
TOOLS
TESTS
•   ACID3                               •   When can I use ...

    •   Testet die Einhaltung von Web       •   Browser Unterstützung für
        Standards besonders                     HTML5 & CSS3
        EcmaScript & DOM Level 2                http://caniuse.com/
        http://acid3.acidtests.org/
                                        •   Modernizr
•   The HTML5 Test
                                            •   Ermittelt welche HTML5 &
    •   Testet die HTML5                        CSS3 Features unterstützt
        Konformität                             werden
        http://html5test.com                    http://www.modernizr.com/
IOS SIMULATOREN

• iOS   SDK Simulator                • MobiOne

 • Nur  für Mac in Verbindung         • Kostenpflichtige
   mit dem iOS SDK                     Entwicklungsumgebung mit
   http://developer.apple.com/ios/
                                       integriertem Simulator
• testiphone.com         /            • Für Windows - Mac &
 ipadpeek.com                          Linux Unterstützung ist
                                       geplant
 • User-Agent im Safari                http://www.genuitec.com/mobile/
   anpassen und online testen
SIMULATOREN
•   Android SDK Emulator                •   BlackBerry Simulatoren          •   Symbian Simulator

    •   Plattform                           •   Geräte, Version &               •   In Verbindung mit
        unabhängiger                            Netzbetreiber                       dem Qt SDK
        Simulator                               wählbar
                                                                                    http://www.developer.nokia.com/
                                                                                    Develop/Qt/Tools/
        http://developer.android.com/       •   Registrierung
        guide/developing/devices/
        emulator.html
                                                erforderlich
                                                http://de.blackberry.com/
                                                developers/resources/
                                                simulators.jsp
REMOTE DEBUGGING
WEINRE
•   Web Inspector Remote
    verwendet das Safari Web
    Inspector Interface

•   Öffentlichen weinre Server nutzen
    oder eigenen starten

•   Aktivierung über ein JavaScript,
    dass vom Server bereit gestellt
    wird

•   Mehr Infos unter:
    http://phonegap.github.com/weinre/
JSCONSOLE.COM

•   Einfaches JavaScript Kommandozeilen
    Tool

•   Kein lokaler Server - Zugriff erfolgt
    direkt über jsconsole.com

    •   Über das :listen Kommando wird eine
        neue Session erzeugt

    •   Damit die Anwendung mit jsconsole
        kommunizieren kann wird ein
        JavaScript geladen

    •   Die Session Id wird als Parameter
        übergeben
SOCKETBUG

•   Remote Debugging Tool basierend auf
    Node.js & Socket.IO

•   Verwendet einen lokalen Server

•   Ermöglicht das

    •   anzeigen des Quelltextes

    •   anzeigen von Debugging
        Informationen

    •   ausführen von JavaScript

    •   fangen von JavaScript Fehlern
DANKE
für die Aufmerksamkeit


 holger@rueprich.de
  @holgerrueprich

Weitere ähnliche Inhalte

Andere mochten auch

Hibernate Envers - Historisierung mit Hibernate
Hibernate Envers - Historisierung mit HibernateHibernate Envers - Historisierung mit Hibernate
Hibernate Envers - Historisierung mit HibernateJohannes Degler
 
Haft wegen Homeschooling. Der Bericht eines Vaters.
Haft wegen Homeschooling. Der Bericht eines Vaters.Haft wegen Homeschooling. Der Bericht eines Vaters.
Haft wegen Homeschooling. Der Bericht eines Vaters.Ingo Breuer
 
Manifest des freien Urchristentums an das deutsche Volk
Manifest des freien Urchristentums an das deutsche VolkManifest des freien Urchristentums an das deutsche Volk
Manifest des freien Urchristentums an das deutsche VolkIngo Breuer
 
Erfolgreiches Lizenzmanagement in Virtual-Desktop-Umgebungen und BYOD-Modellen
Erfolgreiches Lizenzmanagement in Virtual-Desktop-Umgebungen und BYOD-ModellenErfolgreiches Lizenzmanagement in Virtual-Desktop-Umgebungen und BYOD-Modellen
Erfolgreiches Lizenzmanagement in Virtual-Desktop-Umgebungen und BYOD-ModellenFlexera
 
Von der Pfütze zum Paradies?
Von der Pfütze zum Paradies?Von der Pfütze zum Paradies?
Von der Pfütze zum Paradies?Ingo Breuer
 
Die klügsten Städte Deutschlands
Die klügsten Städte DeutschlandsDie klügsten Städte Deutschlands
Die klügsten Städte DeutschlandsLecturio GmbH
 
Die 20 fiesen Fragen der Personaler
Die 20 fiesen Fragen der PersonalerDie 20 fiesen Fragen der Personaler
Die 20 fiesen Fragen der PersonalerLecturio GmbH
 
Simon Meggle - Open Source End2End Monitoring with Sakuli and Nagios
Simon Meggle - Open Source End2End Monitoring with Sakuli and Nagios Simon Meggle - Open Source End2End Monitoring with Sakuli and Nagios
Simon Meggle - Open Source End2End Monitoring with Sakuli and Nagios simmerl121
 
Flexera Software App Portal Datasheet
Flexera Software App Portal DatasheetFlexera Software App Portal Datasheet
Flexera Software App Portal DatasheetFlexera
 
Wach Auf, du deutsches Land
Wach Auf, du deutsches LandWach Auf, du deutsches Land
Wach Auf, du deutsches LandIngo Breuer
 
AdminStudio Mobile Pack Datasheet
AdminStudio Mobile Pack DatasheetAdminStudio Mobile Pack Datasheet
AdminStudio Mobile Pack DatasheetFlexera
 
Untersuchungsergebnisse
UntersuchungsergebnisseUntersuchungsergebnisse
Untersuchungsergebnissekgohr
 

Andere mochten auch (17)

Hibernate Envers - Historisierung mit Hibernate
Hibernate Envers - Historisierung mit HibernateHibernate Envers - Historisierung mit Hibernate
Hibernate Envers - Historisierung mit Hibernate
 
Haft wegen Homeschooling. Der Bericht eines Vaters.
Haft wegen Homeschooling. Der Bericht eines Vaters.Haft wegen Homeschooling. Der Bericht eines Vaters.
Haft wegen Homeschooling. Der Bericht eines Vaters.
 
Manifest des freien Urchristentums an das deutsche Volk
Manifest des freien Urchristentums an das deutsche VolkManifest des freien Urchristentums an das deutsche Volk
Manifest des freien Urchristentums an das deutsche Volk
 
Präsentation wpr lang2012
Präsentation wpr lang2012Präsentation wpr lang2012
Präsentation wpr lang2012
 
Erfolgreiches Lizenzmanagement in Virtual-Desktop-Umgebungen und BYOD-Modellen
Erfolgreiches Lizenzmanagement in Virtual-Desktop-Umgebungen und BYOD-ModellenErfolgreiches Lizenzmanagement in Virtual-Desktop-Umgebungen und BYOD-Modellen
Erfolgreiches Lizenzmanagement in Virtual-Desktop-Umgebungen und BYOD-Modellen
 
Von der Pfütze zum Paradies?
Von der Pfütze zum Paradies?Von der Pfütze zum Paradies?
Von der Pfütze zum Paradies?
 
Die klügsten Städte Deutschlands
Die klügsten Städte DeutschlandsDie klügsten Städte Deutschlands
Die klügsten Städte Deutschlands
 
Die 20 fiesen Fragen der Personaler
Die 20 fiesen Fragen der PersonalerDie 20 fiesen Fragen der Personaler
Die 20 fiesen Fragen der Personaler
 
Simon Meggle - Open Source End2End Monitoring with Sakuli and Nagios
Simon Meggle - Open Source End2End Monitoring with Sakuli and Nagios Simon Meggle - Open Source End2End Monitoring with Sakuli and Nagios
Simon Meggle - Open Source End2End Monitoring with Sakuli and Nagios
 
Flexera Software App Portal Datasheet
Flexera Software App Portal DatasheetFlexera Software App Portal Datasheet
Flexera Software App Portal Datasheet
 
Presentasjon1
Presentasjon1Presentasjon1
Presentasjon1
 
Wach Auf, du deutsches Land
Wach Auf, du deutsches LandWach Auf, du deutsches Land
Wach Auf, du deutsches Land
 
P kfgos
P kfgosP kfgos
P kfgos
 
AdminStudio Mobile Pack Datasheet
AdminStudio Mobile Pack DatasheetAdminStudio Mobile Pack Datasheet
AdminStudio Mobile Pack Datasheet
 
Untersuchungsergebnisse
UntersuchungsergebnisseUntersuchungsergebnisse
Untersuchungsergebnisse
 
eLect Slideshow
eLect SlideshoweLect Slideshow
eLect Slideshow
 
Future music camp2010
Future music camp2010Future music camp2010
Future music camp2010
 

Ähnlich wie Mobile Web Apps

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.GFU Cyrus AG
 
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.Peter Hecker
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGapIndiginox
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGapStefan Kolb
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft AG
 
Ansätze mobiler App Entwicklung mit Vor- und Nachteilen
Ansätze mobiler App Entwicklung mit Vor- und NachteilenAnsätze mobiler App Entwicklung mit Vor- und Nachteilen
Ansätze mobiler App Entwicklung mit Vor- und NachteilenCrowdArchitects GmbH
 
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickResponsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickAmazee Labs
 
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)Jens Küsters
 
Frontend Development für Backend Developer
Frontend Development für Backend DeveloperFrontend Development für Backend Developer
Frontend Development für Backend DeveloperChristoph Hautzinger
 
Icons im Web: Roundtrip for a better web experience
Icons im Web: Roundtrip for a better web experienceIcons im Web: Roundtrip for a better web experience
Icons im Web: Roundtrip for a better web experienceMarkus Greve
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsUlrich Schmidt
 
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...We4IT Group
 
JavaScript-Erweiterungen für UI und UX
JavaScript-Erweiterungen für UI und UXJavaScript-Erweiterungen für UI und UX
JavaScript-Erweiterungen für UI und UXKai Donato
 
Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Dominik Helleberg
 
Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)Koombea
 
Android Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickelnAndroid Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickelnAndré Krämer
 
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)die.agilen GmbH
 
Marketing mit Smart TV Apps
Marketing mit Smart TV AppsMarketing mit Smart TV Apps
Marketing mit Smart TV Appsjoergviola
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsGregor Biswanger
 

Ähnlich wie Mobile Web Apps (20)

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.
 
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.
 
Sencha Touch und PhoneGap
Sencha Touch und PhoneGapSencha Touch und PhoneGap
Sencha Touch und PhoneGap
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
 
Hdc2012 cordova-präsi
Hdc2012 cordova-präsiHdc2012 cordova-präsi
Hdc2012 cordova-präsi
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
 
Ansätze mobiler App Entwicklung mit Vor- und Nachteilen
Ansätze mobiler App Entwicklung mit Vor- und NachteilenAnsätze mobiler App Entwicklung mit Vor- und Nachteilen
Ansätze mobiler App Entwicklung mit Vor- und Nachteilen
 
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickResponsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
 
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
Automatisierte Generierung hybrider Apps für Mobile Devices (Kolloquium)
 
Frontend Development für Backend Developer
Frontend Development für Backend DeveloperFrontend Development für Backend Developer
Frontend Development für Backend Developer
 
Icons im Web: Roundtrip for a better web experience
Icons im Web: Roundtrip for a better web experienceIcons im Web: Roundtrip for a better web experience
Icons im Web: Roundtrip for a better web experience
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
 
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
We4IT LCTY 2013 - captain mobility - delivering your existing ibm domino appl...
 
JavaScript-Erweiterungen für UI und UX
JavaScript-Erweiterungen für UI und UXJavaScript-Erweiterungen für UI und UX
JavaScript-Erweiterungen für UI und UX
 
Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011Android Ice Cream Sandwich WJAX 2011
Android Ice Cream Sandwich WJAX 2011
 
Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)
 
Android Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickelnAndroid Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickeln
 
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)
 
Marketing mit Smart TV Apps
Marketing mit Smart TV AppsMarketing mit Smart TV Apps
Marketing mit Smart TV Apps
 
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-AppsAber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
Aber schnell! Top HTML5 Performance Tipps für Hybrid- und Web-Apps
 

Mobile Web Apps

  • 1. MOBILE WEB APPS Foto César Poyatos (http://www.flickr.com/photos/cpoyatos/5791320785)
  • 2. AGENDA • Einführung • Web Apps „handgemacht“ • Frameworks • Tools
  • 5.
  • 6. APPS? „Der Begriff App (von der englischen Kurzform für application, das grammatische Geschlecht ist im Sprachgebrauch variabel) bezeichnet im Allgemeinen jede Form von Anwendungsprogrammen. Im Sprachgebrauch sind damit mittlerweile jedoch meist Anwendungen für moderne Smartphones und Tablet-Computer gemeint, die über einen in das Betriebssystem integrierten Onlineshop bezogen und so direkt auf dem Smartphone installiert werden können“ Wikipedia
  • 7. ES GIBT FÜR ALLES EINE APP • Wenn du ... willst, gibt es eine App dafür • Allein im Apple App Store gibt es über 500.000 Apps • Täglich 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 Mobiltelefon Quelle BITKOM, 04.09.2011 http://www.bitkom.org/de/markt_statistik/64022_69195.aspx
  • 8. NATIV VS. WEB • Ein Großteil der Apps wird heute nativ entwickelt • Individuell für jede Plattform • Web Apps werden unabhängig von der Plattform entwickelt • Web Apps basieren auf Web Standards wie HTML5, CSS3 & JavaScript
  • 9. EINE FRAGE DER PLATTFORM 1 % 2 % 2 % 12 % WebKit J2ME RIM 43 % Android WebKit Java Symbian WebKit C++ 22 % Objective-C WebKit iOS 18 % Android iOS Symbian BlackBerry Bada Microsoft Andere Quelle Gartner, 11.08.2011 http://www.gartner.com/it/page.jsp?id=1764714
  • 10. OK ... „There is no WebKit on Mobile“ Paul Peter Koch - http://www.quirksmode.org/webkit.html
  • 11. ABER ZUMINDEST ... bleibt es bei einer Skriptsprache (JavaScript), einer Markup- Sprache (HTML) und einem Style System (CSS)
  • 12. NATIV VS. WEB • Native Apps • Web Apps • Direkter Zugriff auf Geräte APIs • Gleiche App für mehre Plattformen • Geeignet für rechenintensive Apps wie z.B. Spiele • Unabhängigkeit von Zulassungsprozessen und • Einfache Installation über Einschränkungen von App Stores Appstores • Updates und Erweiterungen lassen • Vermitteln höhere Wertigkeit sich schneller verbreiten • Leichter Einstieg für Web- Entwickler
  • 13. KLINGT SPITZE! Her mit meiner App
  • 14. HTML5, CSS3 & JAVASCRIPT Apps handgemacht
  • 15.
  • 16. WEBSITE ALS WEB APP • Eine Web App wird initial im Browser aufgerufen und zum Home Screen hinzugefügt
  • 17. HOME SCREEN ICON • Unterschiedliche Größen mittels sizes Attribut • 57x57 / default IPhone 3 • 72x72 IPad • 114x114 IPhone 4 • Graphische Effekte <link rel="apple-touch-icon" href=" homescreen.png"> • apple-touch-icon • apple-touch-icon-precomposed
  • 18. FULLSCREEN • Das Meta Element apple- mobile-web-app-capable sorgt dafür, dass die App anschließend Fullscreen geöffnet wird web-app- capable" <meta name ="apple-mobile- content="yes">
  • 19. STARTUP IMAGE • 320x460 IPhone • 1004x768 IPad • Unterschiedliche Bilder je Auflösung oder Orientierung nur mittels Media Queries oder JavaScript ef="startup.pn g "> - touch-s tartup-image" hr <link rel="apple
  • 20. STATUSBAR STYLE • Drei Styles stehen zur Auswahl • default • black • black-translucent <meta name="apple-mobile-web-app-status -bar-style" content="black"> default">
  • 21. SKALIERUNG <meta name="viewport" content="initial-scale=1.0; maxi mum-scale=1.0; user-scalable=no">
  • 22. LAYOUTS MIT CSS3 • Mobile Browser bieten eine gute CSS3 • Text-Schattierung Unterstützung • Box-Schattierung • Somit steht eine Reihe nützlicher Features zur Verfügung wie z.B: • Nachladen von Schriften mit @font- face • CSS3 Selektoren • Verläufe • Multiple Hintergrundbilder • Mehrspaltige Layouts • Deckkraft • Animationen • Alpha-Transparenz • Übergänge • Abgerundete Kanten
  • 23. IPHONE STYLES MIT CSS3 • Schrift font-family: Helvetica, sans-serif; • Skalieren der Textgröße html { text-size-adjust: none; verhindern } -webkit-text-size-adjust: none; text-size-adjust: none; body { margin: 0; f; font-family: Helvetica, sans-seri background-color: #c5ccd3; • Verläufe background-image: -webkit-gradient(linear, left top , right top, color-stop(.75, transparent), background-image: -webkit- color-stop(.75, rgba(255,255,255,. 1)) gradient(...) ); background-size: 7px; -webkit-background-size: 7px; }
  • 24. HEADER header { height: 44 px; font-weigh t: b o l d; text-shado w: r g b a (0 , border-top 0,0,.7) 0 : solid 1p -1px 0; border-bot x rgba(255 t o m: s o l i d ,255,255,. 6); <header> color: #ff f; 1px rgba(0 ,0,0,.6); <h1>WSD Monitor</h1> background - c o l o r: # 8 ;"> 195af; <button id="refresh" onclick="refreshAll() background - i m a g e: -webkit-gr <span>Refresh</span> from(rgba( adient(lin ear, left top, left 255,255,25 bottom, </button> t o ( r g b a (2 5 5,255,255, 5,.4)), ), .05)) </header> -webkit-gr adient(lin f r o m (t r a n s ear, left p a r e n t) , top, left bottom, t o ( r g b a (0 , 0,64,.1)) ); background - r e p e a t: n background o-repeat; - p o s i t i o n: background top left, -size: 100 bottom lef -webkit-ba % 21px, 10 t; ckground-s 0% 22px; box-sizing ize: 100% : border-b 21px, 100% -webkit-bo ox; 22px; x-sizing: } border-box ;
  • 25. INHALT <div class="group-wrapper"> <h2>DSL</h2> <ul> <li><a href="...">DSL NK</a></li> <li><a href="...">DSL BK</a></li> .group-w ">DSL h2 { </li> <li><a href="...rapper Wechsler Formular</a> ... </ul> text-shadow: #fff 0 </div> 1px 0; } .group-wrapper ul { background-color: #f ff; border: solid 1px #a 9abae; border-radius: 10px ; -webkit-border-radiu s: 10px; ... } .group-wrapper ul li :not(:last-child) { border-bottom: inhe rit; }
  • 26. PAGE TRANSITIONS <div id="content"> <div id="page-slider"> #content { <section id="overview"> o v e r f l o w - x: h idden; <div class="group-wrapper"> width: 100%; <h2>DSL</h2> } <ul> #content sect <li><a href="...">DSL NK</a></li> ion { width: 50%; <li><a href="...">DSL BK</a></li> float: left; <li><a href="...">DSL Wechsler Formular</a></li> padding: 0; </ul> margin: 0; </div> } ... #page-slider </div> { -webkit-trans <section id="details"> ition: all 0. width: 200%; 5s ease-in-ou t; <h2></h2> } <pre></pre> </section> #content.deta ils #page-sli -webkit-trans der { </div> form: transla } t e3 d ( - 5 0 % , 0 , </div> 0); #content.over view #page-sl -webkit-trans ider { form: transla } t e3 d ( 0 , 0 , 0 ) ;
  • 27.
  • 28. ... UND DANN WAR DAS NETZ WEG ...
  • 29. OFFLINE WEB APPS • HTML5 bietet mit dem Application Cache die Möglichkeit Web Seiten auch offline zu nutzen • Gesteuert wird dies über eine simple Textdatei, dem Cache Manifest
  • 30. CACHE MANIFEST • CACHE CACHE MANIFEST • enthält jede zu cachende # Version 1.0 Ressource CACHE: css/main.css js/jquery.min.1.6.4.js • NETWORK js/app.js js/spinner.js • enthält Ressourcen die nicht images/wsdmonitor.png images/startup.png gecached werden können NETWORK: proxy.php • FALLBACK FALLBACK: / /offline.html • enthält alternative offline Ressourcen
  • 31. APPLICATION CACHE • Application Cache aktivieren <!DOCTYPE html> <html manifest="wsdmonitor.appcache"> • Das Cache Manifest muss mit dem MIME-Type text/cache- manifest ausgeliefert werden • Wirdder Apache als Web Server verwendet, kann dies z.B. über den folgenden Eintrag in einer .htaccess Datei aktiviert werden AddType text/cache-manifest .appcache
  • 32. CACHE AKTUALISIEREN • Wurde eine App gecached, werden die Resourcen nicht neu geladen außer • der Speicher des Browsers wird vom Nutzer geleert • dasCache Manifest ändert sich - eine Änderung an einer gespeicherten Resource (z.B. einer CSS-Datei) führt nicht zur Aktualisierung des Caches • der Application Cache wird programatisch aktualisiert
  • 33. SOWEIT SO EINFACH ... aber muss ich das alles selbst machen?
  • 35. KLASSEN VON FRAMEWORKS • JavaScript basierende Frameworks • Anwendungen werden mittels JavaScript entwickelt und mit Hilfe von CSS gestyled • Markup basierende Frameworks • Anwendungen werden in HTML ausgezeichnet und mit CSS & JavaScript erweitert • Micro Frameworks • Leichtgewichtige Frameworks die kleine Helfer-Methoden liefern z.B. $() anstatt document.getElementById() • Native Wrapper • Frameworks die es ermöglichen Web Apps als native Apps zu verpacken
  • 37. SENCHA TOUCH • Sencha Touch ist ein Framework zur Entwicklung von Web Apps die aussehen und sich anfühlen wie native Apps auf IPhone, Android und BlackBerry Geräten • Kompatibel zu Apple iOS 3+, Android 2.1+ und BlackBerry 6+ Geräten • Einige der Features • Komponenten, Theming, Forms, Scrolling, Touch Events, Data Access & MVC, Charts
  • 38. SENCHA TOUCH • Version 2 des Frameworks wurde angekündigt • Neben deutlichen Performance- Optimierungen soll die neue Version das Packaging nativer Apps ermöglichen
  • 39. ETLICHE BEISPIEL-APPS • Auf der Website von Sencha gibt es etliche Beispiele von Web Apps die mittels Sencha Touch realisiert wurden • DieO'Reilly Conferences App hat weniger als 800 Zeilen Code
  • 41. SENCHA TOUCH IN ACTION wsd = new Ext.Applicat ion({ launch: function() { <!DOCTYPE html> <html> this.viewport = new Ex t.Panel({ <head> fullscreen: true, <title>WSD Monitor</title> dockedItems: [{ cript"></script> <script src= "lib/touch/sencha-touch.js" type="text/javas xtype:'toolbar /> rel="stylesheet" type="text/css" ', <link href ="lib/touch/resources/css/sencha-touch.css" title:'WSD Monitor' <script type="text/javas cript"> }], ... layout: 'fit', </script> styleHtmlContent: true , </head> html: '<h2>DSL</h2>' <body></body> }); </html> } });
  • 42. MEHRERE SEITEN wsd = new Ext.Application({ launch: function() { this.toolbar = new Ext.Toolbar({ dock: 'top', Toolbar Toolbar title: 'WSD Monitor' }); Gruppe this.overviewCard = new Ext.Panel({ dockedItems: [this.toolbar], html: 'Overview' Inhalt }); Gruppe this.detailCard = new Ext.Panel({ dockedItems: [this.toolbar], html: 'Details' }); overviewCard detailCard this.viewport = new Ext.Panel({ layout: 'card', fullscreen: true, wsd.viewport cardSwitchAnimation: 'slide', items: [this.overviewCard, this.detailCard] }); } });
  • 44. JQUERY MOBILE • jQuery Mobile ist bietet ein User Interface System über alle populären Plattformen für Mobile Endgeräte hinweg • Es basiert auf jQuery und jQuery UI • Es ist leichtgewichtig (ca. 30 KB inkl CSS plus weitere 30 KB für jQuery) und setzt auf progressive enhancement sowie auf responsive design • Unterstützt werden folgende Plattformen • iOS, Android, BlackBerry, Bada, Windows Phone, palm webOS, Symbian & MeeGo
  • 45. JQUERY MOBILE IN ACTION <!DOCTYPE html> <html> <head> <title>WSD Monitor</title> <meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="default" <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script> </head> <body> <div id="overview" data-role="page"> <div data-role="header"> <h1>WSD Monitor</h1> <a href="#">Refresh</a> </div> <div data-role="content"> <h2>DSL</h2> <ul> <li><a href="#details" data-transition="slide">DSL NK</a></li> <li><a href="#details" data-transition="slideup">DSL BK</a></li> <li><a href="#details" data-transition="pop">DSL Wechsler Formular</a></li> </ul> </div> </div>
  • 49. PHONEGAP • PhoneGap ist eine HTML5 App Plattform, die es ermöglicht Web Apps als native Apps zu vertreiben und Zugriff auf Geräte APIs zu bekommen • Unterstützt werden die folgenden Plattformen: • iOS, Android, BlackBerry, palm webOS, Symbian & Bada • Entwickelt wird PhoneGap von Nitobi die gerade von Adobe aufgekauft wurden • Es ist geplant PhoneGap an die Apache Software Foundation zu übergeben
  • 51. ZUGRIFF AUF NATIVE APIS • PhoneGap hängt Methoden navigator.device.capture.captureImage( CaptureCB captureSuccess, für den Zugriff auf native CaptureErrorCB captureError, [CaptureImageOptions options] APIs unterhalb von navigator ); ein .find( navigator.contacts • Referenz Doku contactFields, contactSuccess, http://docs.phonegap.com contactError, contactFindOptions );
  • 52. PHONEGAP BUILD • ZurErstellung einer nativen App muss aktuell das jeweilige SDK installiert sein • Mit PhoneGap Build wird ein Cloud Service zur Kompilierung von nativen Apps geboten http://build.phonegap.com
  • 53. TOOLS
  • 54. TESTS • ACID3 • When can I use ... • Testet die Einhaltung von Web • Browser Unterstützung für Standards besonders HTML5 & CSS3 EcmaScript & DOM Level 2 http://caniuse.com/ http://acid3.acidtests.org/ • Modernizr • The HTML5 Test • Ermittelt welche HTML5 & • Testet die HTML5 CSS3 Features unterstützt Konformität werden http://html5test.com http://www.modernizr.com/
  • 55. IOS SIMULATOREN • iOS SDK Simulator • MobiOne • Nur für Mac in Verbindung • Kostenpflichtige mit dem iOS SDK Entwicklungsumgebung mit http://developer.apple.com/ios/ integriertem Simulator • testiphone.com / • Für Windows - Mac & ipadpeek.com Linux Unterstützung ist geplant • User-Agent im Safari http://www.genuitec.com/mobile/ anpassen und online testen
  • 56. SIMULATOREN • Android SDK Emulator • BlackBerry Simulatoren • Symbian Simulator • Plattform • Geräte, Version & • In Verbindung mit unabhängiger Netzbetreiber dem Qt SDK Simulator wählbar http://www.developer.nokia.com/ Develop/Qt/Tools/ http://developer.android.com/ • Registrierung guide/developing/devices/ emulator.html erforderlich http://de.blackberry.com/ developers/resources/ simulators.jsp
  • 58. WEINRE • Web Inspector Remote verwendet das Safari Web Inspector Interface • Öffentlichen weinre Server nutzen oder eigenen starten • Aktivierung über ein JavaScript, dass vom Server bereit gestellt wird • Mehr Infos unter: http://phonegap.github.com/weinre/
  • 59. JSCONSOLE.COM • Einfaches JavaScript Kommandozeilen Tool • Kein lokaler Server - Zugriff erfolgt direkt über jsconsole.com • Über das :listen Kommando wird eine neue Session erzeugt • Damit die Anwendung mit jsconsole kommunizieren kann wird ein JavaScript geladen • Die Session Id wird als Parameter übergeben
  • 60. SOCKETBUG • Remote Debugging Tool basierend auf Node.js & Socket.IO • Verwendet einen lokalen Server • Ermöglicht das • anzeigen des Quelltextes • anzeigen von Debugging Informationen • ausführen von JavaScript • fangen von JavaScript Fehlern
  • 61. DANKE für die Aufmerksamkeit holger@rueprich.de @holgerrueprich