SlideShare ist ein Scribd-Unternehmen logo
1 von 83
Downloaden Sie, um offline zu lesen
DAS „MOBILE WEB“ KOMMT
         – NUN ABER WIRKLICH!


                          Die Zukunft des Internets schon jetzt mit
                                 iPhone, Android & Co.
                                23.01.2010 | web.in.bewegung | München, Gasteig
                                        Patrick Lobacher (GF typofaktum)


   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
Montag, 25. Januar 2010
ÜBER TYPOFAKTUM
    • Münchner   Fullservice-Agentur für Unternehmenskommunikation
        http://www.typofaktum.de

    • Inhabergeführt:         Patrick Lobacher / Christoph Laruelle

    • Spezialisiertauf Webapplikations-Entwicklung,
        vorwiegend mit Hilfe von TYPO3

    • Gründung  vor 16 Jahren (net-o-graphic / Agentur Laruelle)
        Zusammenschluss und Umbenennung am 02.01.2009

    • Über          800 realisierte Projekte

    • Kunden:  Vodafone, Finanzscout 24, AGIP, Contraco, Arbeitsamt
        München, Langenscheidt, Motorola, Seifert, Integralis, u.v.a.m

   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   2
Montag, 25. Januar 2010
ÜBER TYPOFAKTUM
    •   GF Patrick Lobacher hat zahlreiche Publikationen über alle Aspekte der iPhone
        Webapplikationsentwicklung geschrieben:




    •   Geschäftsbereiche
        • TYPO3 Konzeption, Entwicklung, Programmierung, Integration
          (inkl. Extbase / Fluid / FLOW3)
        • Webapplikationsentwicklung (PHP, iPhone, ...)
        • Consulting, Projektmanagement & Coaching
        • Schulung (inkl. komplettes TYPO3-Curriculum von Anfänger bis Fortgeschrittene
          und Spezialschulungen sowie Firmen- und Individualschulungen)


   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   3
Montag, 25. Januar 2010
DAS „MOBILE WEB“
                                                 Quo vadis


   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   4
Montag, 25. Januar 2010
Das mobile Internet steht mit „made for
                mobile“ kurz vor dem endgültigen
                Durchbruch.




   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   5
Montag, 25. Januar 2010
Das mobile Internet steht mit „made for
                mobile“ kurz vor dem endgültigen
                Durchbruch.


                                      16. Oktober 2008




   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   5
Montag, 25. Januar 2010
MOBILE WEB?
    • Mobile              Web = Mobile Internet ?

    • Fünf          Innovations-Säulen des mobilen Webs

         • Mobilfunk        / Netze

         • Mobilgeräte

         • Tarife

         • Betriebsystem       / Software

         • Internet-Technologie


   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   6
Montag, 25. Januar 2010
01 | MOBILFUNK / NETZE

    • Erfunden            1926

    • Start          1983

    • Motorola
        DynaTAC 8000X

    • Anfangs             primär Sprache

    • 300.000              verkaufte
        Geräte

   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   7
Montag, 25. Januar 2010
01 | MOBILFUNK / NETZE
    • A-Netz              (1958 - 1977)

    • B-Netz              (1972 - 1995)

    • C-Netz              (1986 - 2000)

    • GSM
         • D-Netz         (1992-heute)

         • E-Netz         (1993-heute)

    • UMTS


   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   8
Montag, 25. Januar 2010
01 | MOBILFUNK / NETZE
    • GSM                 = Global System for Mobile Communication

    • 2G

    • seit        1992

    • Übertragungsgeschwindigkeit:
        9,6 kBit/s - 1,2 kB/s

    • Erweitert             durch GPRS (5 kB/s) und EDGE (27kB/s)

    • Geburtsstunde              der SMS

   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   9
Montag, 25. Januar 2010
01 | MOBILFUNK / NETZE

    • UMTS    = Universal Mobile
        Telecommunications System

    • 3G           / 3.5 G

    • Lizenzen            2000 / Nutzung 2004

    • Übertragungsgeschwindigkeit:                            max 45 kB/s

    • Erweitert           durch HSDPA (110 kB/S)


   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   10
Montag, 25. Januar 2010
02 | MOBILFUNKGERÄTE




   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   11
Montag, 25. Januar 2010
02 | MOBILFUNKGERÄTE




                   1996

   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   11
Montag, 25. Januar 2010
02 | MOBILFUNKGERÄTE




                   1996                           1999

   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   11
Montag, 25. Januar 2010
02 | MOBILFUNKGERÄTE




                   1996                           1999                                        2002

   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010      11
Montag, 25. Januar 2010
02 | MOBILFUNKGERÄTE




   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   12
Montag, 25. Januar 2010
02 | MOBILFUNKGERÄTE




               2002

   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   12
Montag, 25. Januar 2010
02 | MOBILFUNKGERÄTE




               2002                            2004

   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   12
Montag, 25. Januar 2010
02 | MOBILFUNKGERÄTE




               2002                            2004                                        2007

   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   12
Montag, 25. Januar 2010
02 | MOBILFUNKGERÄTE

    • Großes,               hochwertiges Display

    • Hohe                Rechenleistung

    • Kapazitives              Display

    • Intuitive            Bedienung

    • Ergonomische                Software

    • „Designed               for Web“


   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   13
Montag, 25. Januar 2010
03 | DATEN-TARIFE/- NUTZUNG

    • 2000                - ca. 10 EUR pro 1 MB Daten

    • 2001                - ca. 8 EUR pro 1 MB Daten

    • 2004                - ca. 5 EUR pro 1 MB Daten

    • 2007                - ca. 1 EUR pro 1 MB Daten

    • 2009                - ca. 0,25 EUR pro 1 MB Daten

    • ab         2007 - Flatrate (bei 200 MB ca. 0,1 EUR/MB)


   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   14
Montag, 25. Januar 2010
03 | DATEN-TARIFE/- NUTZUNG
    • seit  Mitte 2007
        weltweit mehr
        Daten- als Sprach-
        Pakete


    • Grund?

         • iPhone

         • Flatrate

         • OneWeb


   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   15
Montag, 25. Januar 2010
04 | BETRIEBSSYSTEM




   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   16
Montag, 25. Januar 2010
04 | BETRIEBSSYSTEM
    • Intuitive           Bedienung (Usability)
    • Leichtes Finden von Inhalten (Portale, Integration des
        Browsers in das OS)
    • Email-Client               (Push oder Pull)
    • Hochentwickelter                Browser
         •(     Internet Explorer Mobile )

         • Opera          Mini

         • WebKit


   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   17
Montag, 25. Januar 2010
05 | INTERNET-TECHNOLOGIE




   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   18
Montag, 25. Januar 2010
05 | I-MODE
    • Portaldienst             für Mobiltelefone
    • Start          1999 in Japan
    • proprietär             (NTT DoCoMo)
    • i-mode              Handys notwendig
    • sehr  erfolgreich (in Japan), da Content-Anbieter mitbeteiligt
        wurden
    • Basiert             auf cHTML / iHTML (nicht XML)
    • 2008                in Deutschland eingestellt
   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   19
Montag, 25. Januar 2010
05 | WAP / WML
    • Wireless   Application Protocol +
        Wireless Markup-Language (W3C)
    • Seit         1999 (WAP 1.1) verfügbar
    • Internet-Inhalte  für die langsamere
        Übertragungsrate und die längeren
        Antwortzeiten im Mobilfunk sowie
        für die kleinen Displays der
        Mobiltelefone verfügbar machen
    • „Wait               & Pay“ (WAP)
    • stark           reduzierte HTML-Version + JavaScript (WMLScript)
   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   20
Montag, 25. Januar 2010
05 | XHTML

    • XHTML                 Basic (W3C)
         • 1.0            (2000)
         • 1.1            (2007)
         • Unterstützt         von Samsung, Sony,...
    • XHTML                 Mobile Pro le (Open Mobile Alliance)
         • Teilmenge           von XHTML 1.1 / basiert auf XHTML Basic
         • Wireless           CSS / ECMA-Script Mobile Pro le
         • Unterstützt         von Nokia, RIM, ...


   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   21
Montag, 25. Januar 2010
05 | HTML5

    • Entstanden   aus Ideen und
        Entwürfen zu:
         • XHTML           2.0 (W3C)
         • Web            Applications 1.0 (WHATWG)
    • Besteht             aus
         • HTML5

         • XHTML5

         • DOM            5


   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   22
Montag, 25. Januar 2010
05 | HTML5

    • Fünf  Innovations-Säulen des
        mobilen Internet
         • Mobilfunk          / Netze ✔

         • Mobilgeräte         ✔

         • Tarife         ✔

         • Betriebsystem        / Software ✔

         • Internet-Technologie         ✔


   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   23
Montag, 25. Januar 2010
RIA - MOBILE WEB

    • Welche   RIA-Technologie soll
        das Mobile Web bestimmen?




   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   24
Montag, 25. Januar 2010
BROWSER / SAFARI / WEBKIT




   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   25
Montag, 25. Januar 2010
BROWSER / SAFARI / WEBKIT




               Mac OS X



   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   25
Montag, 25. Januar 2010
BROWSER / SAFARI / WEBKIT




               Mac OS X                         Windows



   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   25
Montag, 25. Januar 2010
BROWSER / SAFARI / WEBKIT




               Mac OS X                         Windows                          iPhone OS



   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   25
Montag, 25. Januar 2010
BROWSER / SAFARI / WEBKIT




                                               Mac OSOS
                                               Windows
                                               iPhone X
                                                 WebKit



   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   25
Montag, 25. Januar 2010
WEBKIT

    • freie        HTML-Rendering-Bibliothek (Open Source)
    • entwickelt              von Apple aus KHTML und KJS
    • Der         Browser Safari basiert auf WebKit
    • Safari              ist für die folgenden Plattformen erhältlich
              • Mac          OS X
              • Windows

              • iPhone         OS (iPhone & iPod)

    • WebKit               bietet die beste Unterstützung an Web-Standards

   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   26
Montag, 25. Januar 2010
WEBKIT
    • WebKit              wird (dank OpenSource-Lizenz) in weiteren Anwendungen
        integriert:
             •   KDE, Google Chrome, Adobe AIR, ...
             •   Nokia Symbian OS (S60)
             •   Google ANDROID
             •   PalmOS
             •   Blackberry OS
             •   Open Moko, Inof ziell in Windows Mobile durch „Iris Browser“, ...
    • iPhone              OS enthält bei Release die neueste WebKit Version
    • Quelle:             http://www.webkit.org

   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   27
Montag, 25. Januar 2010
WEBKIT FEATURES
    •   HTML 4.01 / XHTML 1.0 & 1.1 / HTML5
             •   HTML 5 Of ine Webapps
             •   HTML 5 Audio und Video Element
             •   HTML 5 Geolocation API
    •   CSS 2.1 vollständig und CSS 3 teilweise
    •   JavaScript 1.4 (inkl. kompletter DOM-Unterstützung)
    •   JavaScript Multitouch & Gesture API
    •   Canvas
    •   AJAX (XMLHTTP-Request) / Web 2.0
    •   SVG

   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   28
Montag, 25. Januar 2010
WEBKIT VERGLEICH




   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   29
Montag, 25. Januar 2010
CSS3
                                           Das neue „Flash“


   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   30
Montag, 25. Januar 2010
CSS3




    • CSS-Transforms               (Transformation)
    • CSS-Transitions             (Übergänge)
    • CSS-Animations                (Animationen)




   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   31
Montag, 25. Januar 2010
CSS-TRANSFORMS

    • Hardware                 beschleunigte Transformationen
    • Translate              (Bewegen)
    • Scale               (Skalieren)
    • Rotate              (Drehen)
    • Skew                (Verzerren)
    • W3C-Workingdraft
        http://www.w3.org/TR/css3-2d-transforms/
        http://www.w3.org/TR/css3-3d-transforms/

   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   32
Montag, 25. Januar 2010
CSS-TRANSFORMS




   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   33
Montag, 25. Januar 2010
CSS-TRANSFORMS: TRANSLATE(100PX,50PX)




   (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009   34
Montag, 25. Januar 2010
CSS-TRANSFORMS: SCALE(0.25)




   (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009   35
Montag, 25. Januar 2010
CSS-TRANSFORMS: SCALE(-0,70)




   (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009   36
Montag, 25. Januar 2010
CSS-TRANSFORMS: ROTATE(-30DEG)




   (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009   37
Montag, 25. Januar 2010
CSS-TRANSFORMS: SKEW




   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   38
Montag, 25. Januar 2010
CSS-TRANSFORMS: SKEW

             <style type="text/css" media="screen">
                img#bild1 {
                   position:absolute;top:0; left:0;
                   -webkit-transform: translate(100px,50px) skewY(15deg);
                }
                img#bild2 {
                   position:absolute;top:0; left:0;
                   -webkit-transform: translate(60px,50px) skewY(15deg);
                }
                img#bild3 {
                   position:absolute;top:0; left:0;
                   -webkit-transform: translate(20px,50px) skewY(15deg);
                }
             </style>


             <img src="button_flyer.gif" id="bild1" />
             <img src="button_flyer.gif" id="bild2" />
             <img src="button_flyer.gif" id="bild3" />




   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   39
Montag, 25. Januar 2010
CSS-TRANSFORMS 3D

  • Erweiterung   der
      2D-Transformation

  • Beispiel:

      Cover ow
      Quelle: Flickr-Feed
      CSS-Animation,
      CSS-Transformation (2D,3D)
      Spiegelung mittels Canvas

  • http://www.satine.org/


   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   40
Montag, 25. Januar 2010
CSS-TRANSFORMS 3D

  • Erweiterung   der
      2D-Transformation

  • Beispiel:

      Cover ow
      Quelle: Flickr-Feed
      CSS-Animation,
      CSS-Transformation (2D,3D)
      Spiegelung mittels Canvas

  • http://www.satine.org/


   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   40
Montag, 25. Januar 2010
CSS-TRANSFORMS




   http://webkit.org/blog-files/3d-transforms/poster-circle.html
   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   41
Montag, 25. Januar 2010
CSS-TRANSFORMS 3D




          http://blog.ryanparman.com/2009/07/14/webkit-3d-css-transforms/

   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   42
Montag, 25. Januar 2010
CSS-TRANSFORMS 3D




          http://blog.ryanparman.com/2009/07/14/webkit-3d-css-transforms/

   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   43
Montag, 25. Januar 2010
CSS-TRANSITIONS



  • Hardware              beschleunigte Übergänge
  • Animation   von einem alten Zustand in einen
      neuen innerhalb einer gewissen Zeit
  • Wird   eine CSS-Eigenschaft geändert, für die ein
      Übergang de niert ist, so wird dieser ausgeführt




   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   44
Montag, 25. Januar 2010
CSS-TRANSITIONS


  • Tappen    ändert
      vier CSS-Werte:
            • Breite

            • Höhe

            • Hintergrundfarbe

            • Abstand     von oben




   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   45
Montag, 25. Januar 2010
CSS-TRANSITIONS
     <style type="text/css" media="screen">
         body { background-color: #000;}
         img {
             background-color: yellow;
     !       border: 1px solid black;
     !       width: 147px; height: 200px;
     !       padding:10px;
     !       margin:20px;
     !       -webkit-transition-property:
                 background-color width height margin-top;
     !       -webkit-transition-duration: 3s;
         }
         .changeBackground {
             background-color:red;
     !       width:240px;
     !       height:120px;
     !       margin-top:200px;
     !    }
     </style>
     ...
           <img src="button_flyer.gif"
     onclick="this.className='changeBackground'">


   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   46
Montag, 25. Januar 2010
CSS-ANIMATIONS

  • Hardware               beschleunigte Animationen
  • Keyframe              (Schlüsselbild) Animationen (@rule)
  • Kontrolle             möglich über:
            • Dauer

            • Anzahl      und Art der Wiederholung
            • Timing-Funktion

            • Anfangsverzögerung



   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   47
Montag, 25. Januar 2010
CSS-ANIMATIONS




  • Tappen                startet die Animation




   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   48
Montag, 25. Januar 2010
CANVAS
                                                    HTML5


   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   49
Montag, 25. Januar 2010
HTML5: CANVAS
    • Inkludiert          in die HTML5 Spezi kation

    • „Virtuelle          Zeichen äche“

    • Erstellung          von Vektorgra ken und Animationen

    • <canvas>-Element

    • Zeichnen,            Bilder, Verläufe, Spiegelungen, Transparenzen, Muster

    • Transformationen,           Kompositionen

    • JavaScript           API

   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   50
Montag, 25. Januar 2010
HTML5: CANVAS DEMO




   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   51
Montag, 25. Januar 2010
HTML5: CANVAS DEMO




   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   52
Montag, 25. Januar 2010
HTML5: CANVAS DEMO

               <canvas id="canvas" width="300" height="300"></canvas>



               // Referenz auf Canvas

               var ctx = $('#canvas')[0].getContext("2d");


               // Einen farbigen Kreis zeichnen

               ctx.fillStyle = "#00A308";
               ctx.beginPath();
               ctx.arc(75, 75, 10, 0, Math.PI*2, true);
               ctx.closePath();
               ctx.fill();




   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   53
Montag, 25. Januar 2010
OFFLINE WEBAPPS
                                                    HTML5


   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   54
Montag, 25. Januar 2010
HTML5: OFFLINE WEBAPPS



    • Local               und Session Storage

    • HTML5                 Database Storage

    • HTML                Application Cache




   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   55
Montag, 25. Januar 2010
LOCAL / SESSION STORAGE
    • Cookies               haben einige Nachteile
             • Nicht        an ein Browserfenster gebunden sondern an die Session
             • Cookie-Daten        müssen bei jedem Request im Header übertragen
                 werden
    • Zwei                neue Speicher-Objekte:
             • localStorage
                 (längere Vorhaltung der Daten über Browserfenster hinweg)
             • sessionStorage
                 (kurze Vorhaltung der Daten - bis Schließen des Fensters)
    • HTML                5 client-side storage speci cation
   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   56
Montag, 25. Januar 2010
HTML5: DATABASE STORAGE
    • SQLite              - Relationale Datenbank auf Dateibasis
    • Asynchroner    und Callback-Zugriff (per Query und per
        Transaction) möglich
    • Sicherheitsmodell:              Same Origin Policy
    • Features

             • Indexes

             • Triggers

             • Transactions

             • u.v.a.m.


   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   57
Montag, 25. Januar 2010
WEBKIT + LOCAL DB DEMO




   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   58
Montag, 25. Januar 2010
HTML5: APPLICATION CACHE

    • Lokale              Kopie einer Website
    • Enthält             alle benötigten Ressourcen wie
        • Bilder,         HTML, JavaScript, CSS, ...
    • Komplett              of ine
    • Realisierung              durch „Cache Manifest“
    • Web-Applikation                 - Alternative zu nativer App



   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   59
Montag, 25. Januar 2010
AUDIO & VIDEO
                                                    HTML5


   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   60
Montag, 25. Januar 2010
HTML5: VIDEO & AUDIO



    • Einbetten von Medien mittels HTML5
        <audio> und <video> Tags
    • Media-Events

    • Abspiel-UI          beliebig anpassbar
    • http://www.youtube.com/html5




   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   61
Montag, 25. Januar 2010
HTML5: VIDEO & AUDIO




   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   62
Montag, 25. Januar 2010
HTML5: VIDEO & AUDIO
    •   H.264 Simple baseline pro le video (main and extended video compatible) level 3 and Low-Complexity AAC audio in MP4
        container
    •   H.264 Extended pro le video (baseline-compatible) level 3 and Low-Complexity AAC audio in MP4 container
    •   H.264 Main pro le video level 3 and Low-Complexity AAC audio in MP4 container
    •   H.264 "High" pro le video (incompatible with main, baseline, or extended pro les) level 3 and Low-Complexity AAC audio
        in MP4 container
    •   MPEG-4 Visual Simple Pro le Level 0 video and Low-Complexity AAC audio in MP4 container
    •   MPEG-4 Advanced Simple Pro le Level 0 video and Low-Complexity AAC audio in MP4 container
    •   MPEG-4 Visual Simple Pro le Level 0 video and AMR audio in 3GPP container
    •   Theora video and Vorbis audio in Ogg container
    •   Theora video and Speex audio in Ogg container
    •   Vorbis audio alone in Ogg container
    •   Speex audio alone in Ogg container
    •   FLAC audio alone in Ogg container
    •   Dirac video and Vorbis audio in Ogg container
    •   Theora video and Vorbis audio in Matroska container



   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010                                  63
Montag, 25. Januar 2010
GEO LOCATION API
                                                    HTML5


   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   64
Montag, 25. Januar 2010
HTML5: GEOLOCATION API

    • Kapselung               der Positionsermittlung

    • GPS,                WLAN, Bluetooth, o.ä.

    • Ermittlung             der aktuellen Position

    • Nachfrage                im Browser

    • Tracking              möglich

    • Objekt:               navigator.geolocation

   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   65
Montag, 25. Januar 2010
QUELLEN
    • Statistikenüber die Nutzung und Verbreitung des Mobilfunks
        http://metrics.admob.com/wp-content/uploads/2010/01/AdMob-
        Mobile-Metrics-Dec-09.pdf

    • HTML5    - W3C
        http://dev.w3.org/html5/spec/Overview.html

    • W3C      - CSS Working Group (WG)
        http://www.w3.org/Style/CSS/current-work

    • WebKit    Specs
        http://www.webkit.org/specs/

    • Apple    Developer Connection
        http://developer.apple.com

   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   66
Montag, 25. Januar 2010
DAS BUCH ZUM VORTRAG

    • Patrick             Lobacher
        und Alexander Ebner


        Broschiert: 324 Seiten
        Verlag: Open Source Press;
        Au age: 1 (Juni 2009)

    • ISBN-10:   3937514864
        ISBN-13: 978-3937514864


   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   67
Montag, 25. Januar 2010
DAS BUCH ZUM VORTRAG
                                                ACHTUNG!
                                              Unverschämte
    • Patrick             Lobacher            Eigenwerbung :-)
        und Alexander Ebner


        Broschiert: 324 Seiten
        Verlag: Open Source Press;
        Au age: 1 (Juni 2009)

    • ISBN-10:   3937514864
        ISBN-13: 978-3937514864


   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   67
Montag, 25. Januar 2010
DIE ZUKUNFT DES INTERNETS




   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   68
Montag, 25. Januar 2010
DIE ZUKUNFT DES INTERNETS




   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   68
Montag, 25. Januar 2010
NOCH FRAGEN?
                                   gerne auch per Mail:
                             patrick.lobacher@typofaktum.de

   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   69
Montag, 25. Januar 2010

Weitere ähnliche Inhalte

Ähnlich wie Das mobile Web kommt - nun aber wirklich

In German: Open-Source VoLTE - held at CeBIT 2015
In German: Open-Source VoLTE - held at CeBIT 2015In German: Open-Source VoLTE - held at CeBIT 2015
In German: Open-Source VoLTE - held at CeBIT 2015Carsten Bock
 
Maschinen Visualisierung | TechComm GO MOBILE (#tekom15 #tcworld15)
Maschinen Visualisierung | TechComm GO MOBILE (#tekom15 #tcworld15)Maschinen Visualisierung | TechComm GO MOBILE (#tekom15 #tcworld15)
Maschinen Visualisierung | TechComm GO MOBILE (#tekom15 #tcworld15)Georg Eck
 
Mobilität und mehr...im Kontext
Mobilität und mehr...im KontextMobilität und mehr...im Kontext
Mobilität und mehr...im KontextIBM Lotus
 
7 Top Internet-Trends
7 Top Internet-Trends7 Top Internet-Trends
7 Top Internet-TrendsMarkus Tressl
 
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
 
SeEF 2013 | Sichere und effiziente Anbindung von iPhones und iPads (Melkon To...
SeEF 2013 | Sichere und effiziente Anbindung von iPhones und iPads (Melkon To...SeEF 2013 | Sichere und effiziente Anbindung von iPhones und iPads (Melkon To...
SeEF 2013 | Sichere und effiziente Anbindung von iPhones und iPads (Melkon To...Swiss eEconomy Forum
 
Josef Weissinger (Soroban), Mag. Markus Popolari (BM.I - Zentrales Melderegis...
Josef Weissinger (Soroban), Mag. Markus Popolari (BM.I - Zentrales Melderegis...Josef Weissinger (Soroban), Mag. Markus Popolari (BM.I - Zentrales Melderegis...
Josef Weissinger (Soroban), Mag. Markus Popolari (BM.I - Zentrales Melderegis...Praxistage
 
Vodafone App-Initiative M Days
Vodafone App-Initiative M DaysVodafone App-Initiative M Days
Vodafone App-Initiative M DaysVodafone Germany
 
Digitalisierung an Kölner Schulen – Der Weg zu einer zentral verwalteten IT-I...
Digitalisierung an Kölner Schulen – Der Weg zu einer zentral verwalteten IT-I...Digitalisierung an Kölner Schulen – Der Weg zu einer zentral verwalteten IT-I...
Digitalisierung an Kölner Schulen – Der Weg zu einer zentral verwalteten IT-I...Univention GmbH
 
Digitale Krise? Wie die Digitalisierung Geschäftsmodelle und -prozesse veränd...
Digitale Krise? Wie die Digitalisierung Geschäftsmodelle und -prozesse veränd...Digitale Krise? Wie die Digitalisierung Geschäftsmodelle und -prozesse veränd...
Digitale Krise? Wie die Digitalisierung Geschäftsmodelle und -prozesse veränd...Johannes Moskaliuk
 
Extbase & Fluid Einführung - MTUG - Patrick Lobacher
Extbase & Fluid Einführung - MTUG - Patrick LobacherExtbase & Fluid Einführung - MTUG - Patrick Lobacher
Extbase & Fluid Einführung - MTUG - Patrick Lobacherdie.agilen GmbH
 
Content Management Systeme
Content Management SystemeContent Management Systeme
Content Management Systemesluckow
 
WORKSHOP Autorensysteme 4.0
WORKSHOP Autorensysteme 4.0WORKSHOP Autorensysteme 4.0
WORKSHOP Autorensysteme 4.0Georg Eck
 
OpenTuesday: Internet der Dinge (IoT) für Integratoren
OpenTuesday: Internet der Dinge (IoT) für IntegratorenOpenTuesday: Internet der Dinge (IoT) für Integratoren
OpenTuesday: Internet der Dinge (IoT) für IntegratorenDigicomp Academy AG
 
Die Europäische Cloud-Computing-Strategie
Die Europäische Cloud-Computing-StrategieDie Europäische Cloud-Computing-Strategie
Die Europäische Cloud-Computing-StrategieCarl-Christian Buhr
 
The new Mobility with Unified Communications
The new Mobility with Unified CommunicationsThe new Mobility with Unified Communications
The new Mobility with Unified CommunicationsA. Baggenstos & Co. AG
 
20120428 erstellung-video-content-grundlagen
20120428 erstellung-video-content-grundlagen20120428 erstellung-video-content-grundlagen
20120428 erstellung-video-content-grundlagenReto Kuhn
 

Ähnlich wie Das mobile Web kommt - nun aber wirklich (20)

Was folgt auf Web 2.0?
Was folgt auf Web 2.0?Was folgt auf Web 2.0?
Was folgt auf Web 2.0?
 
In German: Open-Source VoLTE - held at CeBIT 2015
In German: Open-Source VoLTE - held at CeBIT 2015In German: Open-Source VoLTE - held at CeBIT 2015
In German: Open-Source VoLTE - held at CeBIT 2015
 
EinsUndEins
EinsUndEinsEinsUndEins
EinsUndEins
 
Maschinen Visualisierung | TechComm GO MOBILE (#tekom15 #tcworld15)
Maschinen Visualisierung | TechComm GO MOBILE (#tekom15 #tcworld15)Maschinen Visualisierung | TechComm GO MOBILE (#tekom15 #tcworld15)
Maschinen Visualisierung | TechComm GO MOBILE (#tekom15 #tcworld15)
 
Mobilität und mehr...im Kontext
Mobilität und mehr...im KontextMobilität und mehr...im Kontext
Mobilität und mehr...im Kontext
 
7 Top Internet-Trends
7 Top Internet-Trends7 Top Internet-Trends
7 Top Internet-Trends
 
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)
 
SeEF 2013 | Sichere und effiziente Anbindung von iPhones und iPads (Melkon To...
SeEF 2013 | Sichere und effiziente Anbindung von iPhones und iPads (Melkon To...SeEF 2013 | Sichere und effiziente Anbindung von iPhones und iPads (Melkon To...
SeEF 2013 | Sichere und effiziente Anbindung von iPhones und iPads (Melkon To...
 
Josef Weissinger (Soroban), Mag. Markus Popolari (BM.I - Zentrales Melderegis...
Josef Weissinger (Soroban), Mag. Markus Popolari (BM.I - Zentrales Melderegis...Josef Weissinger (Soroban), Mag. Markus Popolari (BM.I - Zentrales Melderegis...
Josef Weissinger (Soroban), Mag. Markus Popolari (BM.I - Zentrales Melderegis...
 
Vodafone App-Initiative M Days
Vodafone App-Initiative M DaysVodafone App-Initiative M Days
Vodafone App-Initiative M Days
 
Digitalisierung an Kölner Schulen – Der Weg zu einer zentral verwalteten IT-I...
Digitalisierung an Kölner Schulen – Der Weg zu einer zentral verwalteten IT-I...Digitalisierung an Kölner Schulen – Der Weg zu einer zentral verwalteten IT-I...
Digitalisierung an Kölner Schulen – Der Weg zu einer zentral verwalteten IT-I...
 
Digitale Krise? Wie die Digitalisierung Geschäftsmodelle und -prozesse veränd...
Digitale Krise? Wie die Digitalisierung Geschäftsmodelle und -prozesse veränd...Digitale Krise? Wie die Digitalisierung Geschäftsmodelle und -prozesse veränd...
Digitale Krise? Wie die Digitalisierung Geschäftsmodelle und -prozesse veränd...
 
Extbase & Fluid Einführung - MTUG - Patrick Lobacher
Extbase & Fluid Einführung - MTUG - Patrick LobacherExtbase & Fluid Einführung - MTUG - Patrick Lobacher
Extbase & Fluid Einführung - MTUG - Patrick Lobacher
 
Content Management Systeme
Content Management SystemeContent Management Systeme
Content Management Systeme
 
WORKSHOP Autorensysteme 4.0
WORKSHOP Autorensysteme 4.0WORKSHOP Autorensysteme 4.0
WORKSHOP Autorensysteme 4.0
 
Html5 - Traum oder Wirklichkeit
Html5 - Traum oder WirklichkeitHtml5 - Traum oder Wirklichkeit
Html5 - Traum oder Wirklichkeit
 
OpenTuesday: Internet der Dinge (IoT) für Integratoren
OpenTuesday: Internet der Dinge (IoT) für IntegratorenOpenTuesday: Internet der Dinge (IoT) für Integratoren
OpenTuesday: Internet der Dinge (IoT) für Integratoren
 
Die Europäische Cloud-Computing-Strategie
Die Europäische Cloud-Computing-StrategieDie Europäische Cloud-Computing-Strategie
Die Europäische Cloud-Computing-Strategie
 
The new Mobility with Unified Communications
The new Mobility with Unified CommunicationsThe new Mobility with Unified Communications
The new Mobility with Unified Communications
 
20120428 erstellung-video-content-grundlagen
20120428 erstellung-video-content-grundlagen20120428 erstellung-video-content-grundlagen
20120428 erstellung-video-content-grundlagen
 

Mehr von die.agilen GmbH

LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)
LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)
LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)die.agilen GmbH
 
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...die.agilen GmbH
 
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...die.agilen GmbH
 
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017die.agilen GmbH
 
Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...
Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...
Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...die.agilen GmbH
 
Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...
Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...
Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...die.agilen GmbH
 
Roman Rackwitz - Gamification und OKR
Roman Rackwitz - Gamification und OKRRoman Rackwitz - Gamification und OKR
Roman Rackwitz - Gamification und OKRdie.agilen GmbH
 
Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...
Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...
Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...die.agilen GmbH
 
TYPO3 CMS 8.4 - Die Neuerungen - pluswerk
TYPO3 CMS 8.4 - Die Neuerungen - pluswerkTYPO3 CMS 8.4 - Die Neuerungen - pluswerk
TYPO3 CMS 8.4 - Die Neuerungen - pluswerkdie.agilen GmbH
 
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / BerlinAgile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlindie.agilen GmbH
 
The agile enterprise - Digital Transformation as a practical application
The agile enterprise - Digital Transformation as a practical applicationThe agile enterprise - Digital Transformation as a practical application
The agile enterprise - Digital Transformation as a practical applicationdie.agilen GmbH
 
How leadership of employees via Objectives and Key Results (OKR) speeds up th...
How leadership of employees via Objectives and Key Results (OKR) speeds up th...How leadership of employees via Objectives and Key Results (OKR) speeds up th...
How leadership of employees via Objectives and Key Results (OKR) speeds up th...die.agilen GmbH
 
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...die.agilen GmbH
 
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - PluswerkDWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerkdie.agilen GmbH
 
Innovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - PluswerkInnovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - Pluswerkdie.agilen GmbH
 
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...die.agilen GmbH
 
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...die.agilen GmbH
 
Innovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerkInnovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerkdie.agilen GmbH
 
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...die.agilen GmbH
 
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerkTYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerkdie.agilen GmbH
 

Mehr von die.agilen GmbH (20)

LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)
LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)
LEGO SERIOUS PLAY für Manager (Management 3.0 Gathering 2018)
 
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
 
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
Agiles Zielmanagement und modernes Leadership mit Objectives und Key Results ...
 
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
Innovationsmotoren Design Thinking, Lean Startup, Sprint & Co. - IT Tage 2017
 
Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...
Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...
Agile Leadership and Goal Management with Objectives & Key Results (OKRs) | A...
 
Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...
Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...
Die Entwicklung von Objectives und Key Results in Europa | 16.08.2017 | OKR F...
 
Roman Rackwitz - Gamification und OKR
Roman Rackwitz - Gamification und OKRRoman Rackwitz - Gamification und OKR
Roman Rackwitz - Gamification und OKR
 
Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...
Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...
Die Entwicklung von Objectives und Key Results (OKR) in Europa | OKR Meetup M...
 
TYPO3 CMS 8.4 - Die Neuerungen - pluswerk
TYPO3 CMS 8.4 - Die Neuerungen - pluswerkTYPO3 CMS 8.4 - Die Neuerungen - pluswerk
TYPO3 CMS 8.4 - Die Neuerungen - pluswerk
 
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / BerlinAgile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
Agile Mitarbeiterführung mit OKRs / Manage Agile 2017 / Berlin
 
The agile enterprise - Digital Transformation as a practical application
The agile enterprise - Digital Transformation as a practical applicationThe agile enterprise - Digital Transformation as a practical application
The agile enterprise - Digital Transformation as a practical application
 
How leadership of employees via Objectives and Key Results (OKR) speeds up th...
How leadership of employees via Objectives and Key Results (OKR) speeds up th...How leadership of employees via Objectives and Key Results (OKR) speeds up th...
How leadership of employees via Objectives and Key Results (OKR) speeds up th...
 
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
4DX - Die 4 Disziplinen der Umsetzung: Strategien sicher umsetzen und Ziele e...
 
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - PluswerkDWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
DWX 2016 - Atomic Design – Frontend und Design im RWD-Zeitalter - Pluswerk
 
Innovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - PluswerkInnovationsmotoren für IoT - DWX 2016 - Pluswerk
Innovationsmotoren für IoT - DWX 2016 - Pluswerk
 
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
OKR und BVB - Warum OKR der bessere Cristiano Ronaldo ist oder warum Scrum ni...
 
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...30 Jahre Scrum - alles agil, alles gut?  Auf dem Weg zum digitalen Unternehme...
30 Jahre Scrum - alles agil, alles gut? Auf dem Weg zum digitalen Unternehme...
 
Innovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerkInnovationsmotor Design Thinking - pluswerk
Innovationsmotor Design Thinking - pluswerk
 
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
Atomic Design – Die Einheit von Frontend und Design im RWD-Zeitalter - webina...
 
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerkTYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
 

Das mobile Web kommt - nun aber wirklich

  • 1. DAS „MOBILE WEB“ KOMMT – NUN ABER WIRKLICH! Die Zukunft des Internets schon jetzt mit iPhone, Android & Co. 23.01.2010 | web.in.bewegung | München, Gasteig Patrick Lobacher (GF typofaktum) (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 Montag, 25. Januar 2010
  • 2. ÜBER TYPOFAKTUM • Münchner Fullservice-Agentur für Unternehmenskommunikation http://www.typofaktum.de • Inhabergeführt: Patrick Lobacher / Christoph Laruelle • Spezialisiertauf Webapplikations-Entwicklung, vorwiegend mit Hilfe von TYPO3 • Gründung vor 16 Jahren (net-o-graphic / Agentur Laruelle) Zusammenschluss und Umbenennung am 02.01.2009 • Über 800 realisierte Projekte • Kunden: Vodafone, Finanzscout 24, AGIP, Contraco, Arbeitsamt München, Langenscheidt, Motorola, Seifert, Integralis, u.v.a.m (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 2 Montag, 25. Januar 2010
  • 3. ÜBER TYPOFAKTUM • GF Patrick Lobacher hat zahlreiche Publikationen über alle Aspekte der iPhone Webapplikationsentwicklung geschrieben: • Geschäftsbereiche • TYPO3 Konzeption, Entwicklung, Programmierung, Integration (inkl. Extbase / Fluid / FLOW3) • Webapplikationsentwicklung (PHP, iPhone, ...) • Consulting, Projektmanagement & Coaching • Schulung (inkl. komplettes TYPO3-Curriculum von Anfänger bis Fortgeschrittene und Spezialschulungen sowie Firmen- und Individualschulungen) (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 3 Montag, 25. Januar 2010
  • 4. DAS „MOBILE WEB“ Quo vadis (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 4 Montag, 25. Januar 2010
  • 5. Das mobile Internet steht mit „made for mobile“ kurz vor dem endgültigen Durchbruch. (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 5 Montag, 25. Januar 2010
  • 6. Das mobile Internet steht mit „made for mobile“ kurz vor dem endgültigen Durchbruch. 16. Oktober 2008 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 5 Montag, 25. Januar 2010
  • 7. MOBILE WEB? • Mobile Web = Mobile Internet ? • Fünf Innovations-Säulen des mobilen Webs • Mobilfunk / Netze • Mobilgeräte • Tarife • Betriebsystem / Software • Internet-Technologie (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 6 Montag, 25. Januar 2010
  • 8. 01 | MOBILFUNK / NETZE • Erfunden 1926 • Start 1983 • Motorola DynaTAC 8000X • Anfangs primär Sprache • 300.000 verkaufte Geräte (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 7 Montag, 25. Januar 2010
  • 9. 01 | MOBILFUNK / NETZE • A-Netz (1958 - 1977) • B-Netz (1972 - 1995) • C-Netz (1986 - 2000) • GSM • D-Netz (1992-heute) • E-Netz (1993-heute) • UMTS (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 8 Montag, 25. Januar 2010
  • 10. 01 | MOBILFUNK / NETZE • GSM = Global System for Mobile Communication • 2G • seit 1992 • Übertragungsgeschwindigkeit: 9,6 kBit/s - 1,2 kB/s • Erweitert durch GPRS (5 kB/s) und EDGE (27kB/s) • Geburtsstunde der SMS (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 9 Montag, 25. Januar 2010
  • 11. 01 | MOBILFUNK / NETZE • UMTS = Universal Mobile Telecommunications System • 3G / 3.5 G • Lizenzen 2000 / Nutzung 2004 • Übertragungsgeschwindigkeit: max 45 kB/s • Erweitert durch HSDPA (110 kB/S) (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 10 Montag, 25. Januar 2010
  • 12. 02 | MOBILFUNKGERÄTE (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 11 Montag, 25. Januar 2010
  • 13. 02 | MOBILFUNKGERÄTE 1996 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 11 Montag, 25. Januar 2010
  • 14. 02 | MOBILFUNKGERÄTE 1996 1999 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 11 Montag, 25. Januar 2010
  • 15. 02 | MOBILFUNKGERÄTE 1996 1999 2002 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 11 Montag, 25. Januar 2010
  • 16. 02 | MOBILFUNKGERÄTE (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 12 Montag, 25. Januar 2010
  • 17. 02 | MOBILFUNKGERÄTE 2002 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 12 Montag, 25. Januar 2010
  • 18. 02 | MOBILFUNKGERÄTE 2002 2004 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 12 Montag, 25. Januar 2010
  • 19. 02 | MOBILFUNKGERÄTE 2002 2004 2007 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 12 Montag, 25. Januar 2010
  • 20. 02 | MOBILFUNKGERÄTE • Großes, hochwertiges Display • Hohe Rechenleistung • Kapazitives Display • Intuitive Bedienung • Ergonomische Software • „Designed for Web“ (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 13 Montag, 25. Januar 2010
  • 21. 03 | DATEN-TARIFE/- NUTZUNG • 2000 - ca. 10 EUR pro 1 MB Daten • 2001 - ca. 8 EUR pro 1 MB Daten • 2004 - ca. 5 EUR pro 1 MB Daten • 2007 - ca. 1 EUR pro 1 MB Daten • 2009 - ca. 0,25 EUR pro 1 MB Daten • ab 2007 - Flatrate (bei 200 MB ca. 0,1 EUR/MB) (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 14 Montag, 25. Januar 2010
  • 22. 03 | DATEN-TARIFE/- NUTZUNG • seit Mitte 2007 weltweit mehr Daten- als Sprach- Pakete • Grund? • iPhone • Flatrate • OneWeb (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 15 Montag, 25. Januar 2010
  • 23. 04 | BETRIEBSSYSTEM (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 16 Montag, 25. Januar 2010
  • 24. 04 | BETRIEBSSYSTEM • Intuitive Bedienung (Usability) • Leichtes Finden von Inhalten (Portale, Integration des Browsers in das OS) • Email-Client (Push oder Pull) • Hochentwickelter Browser •( Internet Explorer Mobile ) • Opera Mini • WebKit (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 17 Montag, 25. Januar 2010
  • 25. 05 | INTERNET-TECHNOLOGIE (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 18 Montag, 25. Januar 2010
  • 26. 05 | I-MODE • Portaldienst für Mobiltelefone • Start 1999 in Japan • proprietär (NTT DoCoMo) • i-mode Handys notwendig • sehr erfolgreich (in Japan), da Content-Anbieter mitbeteiligt wurden • Basiert auf cHTML / iHTML (nicht XML) • 2008 in Deutschland eingestellt (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 19 Montag, 25. Januar 2010
  • 27. 05 | WAP / WML • Wireless Application Protocol + Wireless Markup-Language (W3C) • Seit 1999 (WAP 1.1) verfügbar • Internet-Inhalte für die langsamere Übertragungsrate und die längeren Antwortzeiten im Mobilfunk sowie für die kleinen Displays der Mobiltelefone verfügbar machen • „Wait & Pay“ (WAP) • stark reduzierte HTML-Version + JavaScript (WMLScript) (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 20 Montag, 25. Januar 2010
  • 28. 05 | XHTML • XHTML Basic (W3C) • 1.0 (2000) • 1.1 (2007) • Unterstützt von Samsung, Sony,... • XHTML Mobile Pro le (Open Mobile Alliance) • Teilmenge von XHTML 1.1 / basiert auf XHTML Basic • Wireless CSS / ECMA-Script Mobile Pro le • Unterstützt von Nokia, RIM, ... (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 21 Montag, 25. Januar 2010
  • 29. 05 | HTML5 • Entstanden aus Ideen und Entwürfen zu: • XHTML 2.0 (W3C) • Web Applications 1.0 (WHATWG) • Besteht aus • HTML5 • XHTML5 • DOM 5 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 22 Montag, 25. Januar 2010
  • 30. 05 | HTML5 • Fünf Innovations-Säulen des mobilen Internet • Mobilfunk / Netze ✔ • Mobilgeräte ✔ • Tarife ✔ • Betriebsystem / Software ✔ • Internet-Technologie ✔ (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 23 Montag, 25. Januar 2010
  • 31. RIA - MOBILE WEB • Welche RIA-Technologie soll das Mobile Web bestimmen? (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 24 Montag, 25. Januar 2010
  • 32. BROWSER / SAFARI / WEBKIT (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 25 Montag, 25. Januar 2010
  • 33. BROWSER / SAFARI / WEBKIT Mac OS X (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 25 Montag, 25. Januar 2010
  • 34. BROWSER / SAFARI / WEBKIT Mac OS X Windows (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 25 Montag, 25. Januar 2010
  • 35. BROWSER / SAFARI / WEBKIT Mac OS X Windows iPhone OS (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 25 Montag, 25. Januar 2010
  • 36. BROWSER / SAFARI / WEBKIT Mac OSOS Windows iPhone X WebKit (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 25 Montag, 25. Januar 2010
  • 37. WEBKIT • freie HTML-Rendering-Bibliothek (Open Source) • entwickelt von Apple aus KHTML und KJS • Der Browser Safari basiert auf WebKit • Safari ist für die folgenden Plattformen erhältlich • Mac OS X • Windows • iPhone OS (iPhone & iPod) • WebKit bietet die beste Unterstützung an Web-Standards (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 26 Montag, 25. Januar 2010
  • 38. WEBKIT • WebKit wird (dank OpenSource-Lizenz) in weiteren Anwendungen integriert: • KDE, Google Chrome, Adobe AIR, ... • Nokia Symbian OS (S60) • Google ANDROID • PalmOS • Blackberry OS • Open Moko, Inof ziell in Windows Mobile durch „Iris Browser“, ... • iPhone OS enthält bei Release die neueste WebKit Version • Quelle: http://www.webkit.org (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 27 Montag, 25. Januar 2010
  • 39. WEBKIT FEATURES • HTML 4.01 / XHTML 1.0 & 1.1 / HTML5 • HTML 5 Of ine Webapps • HTML 5 Audio und Video Element • HTML 5 Geolocation API • CSS 2.1 vollständig und CSS 3 teilweise • JavaScript 1.4 (inkl. kompletter DOM-Unterstützung) • JavaScript Multitouch & Gesture API • Canvas • AJAX (XMLHTTP-Request) / Web 2.0 • SVG (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 28 Montag, 25. Januar 2010
  • 40. WEBKIT VERGLEICH (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 29 Montag, 25. Januar 2010
  • 41. CSS3 Das neue „Flash“ (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 30 Montag, 25. Januar 2010
  • 42. CSS3 • CSS-Transforms (Transformation) • CSS-Transitions (Übergänge) • CSS-Animations (Animationen) (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 31 Montag, 25. Januar 2010
  • 43. CSS-TRANSFORMS • Hardware beschleunigte Transformationen • Translate (Bewegen) • Scale (Skalieren) • Rotate (Drehen) • Skew (Verzerren) • W3C-Workingdraft http://www.w3.org/TR/css3-2d-transforms/ http://www.w3.org/TR/css3-3d-transforms/ (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 32 Montag, 25. Januar 2010
  • 44. CSS-TRANSFORMS (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 33 Montag, 25. Januar 2010
  • 45. CSS-TRANSFORMS: TRANSLATE(100PX,50PX) (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 34 Montag, 25. Januar 2010
  • 46. CSS-TRANSFORMS: SCALE(0.25) (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 35 Montag, 25. Januar 2010
  • 47. CSS-TRANSFORMS: SCALE(-0,70) (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 36 Montag, 25. Januar 2010
  • 48. CSS-TRANSFORMS: ROTATE(-30DEG) (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 37 Montag, 25. Januar 2010
  • 49. CSS-TRANSFORMS: SKEW (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 38 Montag, 25. Januar 2010
  • 50. CSS-TRANSFORMS: SKEW <style type="text/css" media="screen"> img#bild1 { position:absolute;top:0; left:0; -webkit-transform: translate(100px,50px) skewY(15deg); } img#bild2 { position:absolute;top:0; left:0; -webkit-transform: translate(60px,50px) skewY(15deg); } img#bild3 { position:absolute;top:0; left:0; -webkit-transform: translate(20px,50px) skewY(15deg); } </style> <img src="button_flyer.gif" id="bild1" /> <img src="button_flyer.gif" id="bild2" /> <img src="button_flyer.gif" id="bild3" /> (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 39 Montag, 25. Januar 2010
  • 51. CSS-TRANSFORMS 3D • Erweiterung der 2D-Transformation • Beispiel: Cover ow Quelle: Flickr-Feed CSS-Animation, CSS-Transformation (2D,3D) Spiegelung mittels Canvas • http://www.satine.org/ (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 40 Montag, 25. Januar 2010
  • 52. CSS-TRANSFORMS 3D • Erweiterung der 2D-Transformation • Beispiel: Cover ow Quelle: Flickr-Feed CSS-Animation, CSS-Transformation (2D,3D) Spiegelung mittels Canvas • http://www.satine.org/ (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 40 Montag, 25. Januar 2010
  • 53. CSS-TRANSFORMS http://webkit.org/blog-files/3d-transforms/poster-circle.html (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 41 Montag, 25. Januar 2010
  • 54. CSS-TRANSFORMS 3D http://blog.ryanparman.com/2009/07/14/webkit-3d-css-transforms/ (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 42 Montag, 25. Januar 2010
  • 55. CSS-TRANSFORMS 3D http://blog.ryanparman.com/2009/07/14/webkit-3d-css-transforms/ (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 43 Montag, 25. Januar 2010
  • 56. CSS-TRANSITIONS • Hardware beschleunigte Übergänge • Animation von einem alten Zustand in einen neuen innerhalb einer gewissen Zeit • Wird eine CSS-Eigenschaft geändert, für die ein Übergang de niert ist, so wird dieser ausgeführt (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 44 Montag, 25. Januar 2010
  • 57. CSS-TRANSITIONS • Tappen ändert vier CSS-Werte: • Breite • Höhe • Hintergrundfarbe • Abstand von oben (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 45 Montag, 25. Januar 2010
  • 58. CSS-TRANSITIONS <style type="text/css" media="screen"> body { background-color: #000;} img { background-color: yellow; ! border: 1px solid black; ! width: 147px; height: 200px; ! padding:10px; ! margin:20px; ! -webkit-transition-property: background-color width height margin-top; ! -webkit-transition-duration: 3s; } .changeBackground { background-color:red; ! width:240px; ! height:120px; ! margin-top:200px; ! } </style> ... <img src="button_flyer.gif" onclick="this.className='changeBackground'"> (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 46 Montag, 25. Januar 2010
  • 59. CSS-ANIMATIONS • Hardware beschleunigte Animationen • Keyframe (Schlüsselbild) Animationen (@rule) • Kontrolle möglich über: • Dauer • Anzahl und Art der Wiederholung • Timing-Funktion • Anfangsverzögerung (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 47 Montag, 25. Januar 2010
  • 60. CSS-ANIMATIONS • Tappen startet die Animation (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 48 Montag, 25. Januar 2010
  • 61. CANVAS HTML5 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 49 Montag, 25. Januar 2010
  • 62. HTML5: CANVAS • Inkludiert in die HTML5 Spezi kation • „Virtuelle Zeichen äche“ • Erstellung von Vektorgra ken und Animationen • <canvas>-Element • Zeichnen, Bilder, Verläufe, Spiegelungen, Transparenzen, Muster • Transformationen, Kompositionen • JavaScript API (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 50 Montag, 25. Januar 2010
  • 63. HTML5: CANVAS DEMO (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 51 Montag, 25. Januar 2010
  • 64. HTML5: CANVAS DEMO (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 52 Montag, 25. Januar 2010
  • 65. HTML5: CANVAS DEMO <canvas id="canvas" width="300" height="300"></canvas> // Referenz auf Canvas var ctx = $('#canvas')[0].getContext("2d"); // Einen farbigen Kreis zeichnen ctx.fillStyle = "#00A308"; ctx.beginPath(); ctx.arc(75, 75, 10, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 53 Montag, 25. Januar 2010
  • 66. OFFLINE WEBAPPS HTML5 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 54 Montag, 25. Januar 2010
  • 67. HTML5: OFFLINE WEBAPPS • Local und Session Storage • HTML5 Database Storage • HTML Application Cache (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 55 Montag, 25. Januar 2010
  • 68. LOCAL / SESSION STORAGE • Cookies haben einige Nachteile • Nicht an ein Browserfenster gebunden sondern an die Session • Cookie-Daten müssen bei jedem Request im Header übertragen werden • Zwei neue Speicher-Objekte: • localStorage (längere Vorhaltung der Daten über Browserfenster hinweg) • sessionStorage (kurze Vorhaltung der Daten - bis Schließen des Fensters) • HTML 5 client-side storage speci cation (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 56 Montag, 25. Januar 2010
  • 69. HTML5: DATABASE STORAGE • SQLite - Relationale Datenbank auf Dateibasis • Asynchroner und Callback-Zugriff (per Query und per Transaction) möglich • Sicherheitsmodell: Same Origin Policy • Features • Indexes • Triggers • Transactions • u.v.a.m. (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 57 Montag, 25. Januar 2010
  • 70. WEBKIT + LOCAL DB DEMO (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 58 Montag, 25. Januar 2010
  • 71. HTML5: APPLICATION CACHE • Lokale Kopie einer Website • Enthält alle benötigten Ressourcen wie • Bilder, HTML, JavaScript, CSS, ... • Komplett of ine • Realisierung durch „Cache Manifest“ • Web-Applikation - Alternative zu nativer App (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 59 Montag, 25. Januar 2010
  • 72. AUDIO & VIDEO HTML5 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 60 Montag, 25. Januar 2010
  • 73. HTML5: VIDEO & AUDIO • Einbetten von Medien mittels HTML5 <audio> und <video> Tags • Media-Events • Abspiel-UI beliebig anpassbar • http://www.youtube.com/html5 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 61 Montag, 25. Januar 2010
  • 74. HTML5: VIDEO & AUDIO (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 62 Montag, 25. Januar 2010
  • 75. HTML5: VIDEO & AUDIO • H.264 Simple baseline pro le video (main and extended video compatible) level 3 and Low-Complexity AAC audio in MP4 container • H.264 Extended pro le video (baseline-compatible) level 3 and Low-Complexity AAC audio in MP4 container • H.264 Main pro le video level 3 and Low-Complexity AAC audio in MP4 container • H.264 "High" pro le video (incompatible with main, baseline, or extended pro les) level 3 and Low-Complexity AAC audio in MP4 container • MPEG-4 Visual Simple Pro le Level 0 video and Low-Complexity AAC audio in MP4 container • MPEG-4 Advanced Simple Pro le Level 0 video and Low-Complexity AAC audio in MP4 container • MPEG-4 Visual Simple Pro le Level 0 video and AMR audio in 3GPP container • Theora video and Vorbis audio in Ogg container • Theora video and Speex audio in Ogg container • Vorbis audio alone in Ogg container • Speex audio alone in Ogg container • FLAC audio alone in Ogg container • Dirac video and Vorbis audio in Ogg container • Theora video and Vorbis audio in Matroska container (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 63 Montag, 25. Januar 2010
  • 76. GEO LOCATION API HTML5 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 64 Montag, 25. Januar 2010
  • 77. HTML5: GEOLOCATION API • Kapselung der Positionsermittlung • GPS, WLAN, Bluetooth, o.ä. • Ermittlung der aktuellen Position • Nachfrage im Browser • Tracking möglich • Objekt: navigator.geolocation (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 65 Montag, 25. Januar 2010
  • 78. QUELLEN • Statistikenüber die Nutzung und Verbreitung des Mobilfunks http://metrics.admob.com/wp-content/uploads/2010/01/AdMob- Mobile-Metrics-Dec-09.pdf • HTML5 - W3C http://dev.w3.org/html5/spec/Overview.html • W3C - CSS Working Group (WG) http://www.w3.org/Style/CSS/current-work • WebKit Specs http://www.webkit.org/specs/ • Apple Developer Connection http://developer.apple.com (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 66 Montag, 25. Januar 2010
  • 79. DAS BUCH ZUM VORTRAG • Patrick Lobacher und Alexander Ebner Broschiert: 324 Seiten Verlag: Open Source Press; Au age: 1 (Juni 2009) • ISBN-10: 3937514864 ISBN-13: 978-3937514864 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 67 Montag, 25. Januar 2010
  • 80. DAS BUCH ZUM VORTRAG ACHTUNG! Unverschämte • Patrick Lobacher Eigenwerbung :-) und Alexander Ebner Broschiert: 324 Seiten Verlag: Open Source Press; Au age: 1 (Juni 2009) • ISBN-10: 3937514864 ISBN-13: 978-3937514864 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 67 Montag, 25. Januar 2010
  • 81. DIE ZUKUNFT DES INTERNETS (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 68 Montag, 25. Januar 2010
  • 82. DIE ZUKUNFT DES INTERNETS (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 68 Montag, 25. Januar 2010
  • 83. NOCH FRAGEN? gerne auch per Mail: patrick.lobacher@typofaktum.de (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 69 Montag, 25. Januar 2010