DAS „MOBILE WEB“ KOMMT
         – NUN ABER WIRKLICH!


                          Die Zukunft des Internets schon jetzt mit...
ÜBER TYPOFAKTUM
    • Münchner   Fullservice-Agentur für Unternehmenskommunikation
        http://www.typofaktum.de

    •...
ÜBER TYPOFAKTUM
    •   GF Patrick Lobacher hat zahlreiche Publikationen über alle Aspekte der iPhone
        Webapplikati...
DAS „MOBILE WEB“
                                                 Quo vadis


   (c) 2010 - typofaktum unternehmenskommuni...
Das mobile Internet steht mit „made for
                mobile“ kurz vor dem endgültigen
                Durchbruch.




 ...
Das mobile Internet steht mit „made for
                mobile“ kurz vor dem endgültigen
                Durchbruch.


   ...
MOBILE WEB?
    • Mobile              Web = Mobile Internet ?

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

  ...
01 | MOBILFUNK / NETZE

    • Erfunden            1926

    • Start          1983

    • Motorola
        DynaTAC 8000X

 ...
01 | MOBILFUNK / NETZE
    • A-Netz              (1958 - 1977)

    • B-Netz              (1972 - 1995)

    • C-Netz     ...
01 | MOBILFUNK / NETZE
    • GSM                 = Global System for Mobile Communication

    • 2G

    • seit        199...
01 | MOBILFUNK / NETZE

    • UMTS    = Universal Mobile
        Telecommunications System

    • 3G           / 3.5 G

  ...
02 | MOBILFUNKGERÄTE




   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010  ...
02 | MOBILFUNKGERÄTE




                   1996

   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patric...
02 | MOBILFUNKGERÄTE




                   1996                           1999

   (c) 2010 - typofaktum unternehmenskomm...
02 | MOBILFUNKGERÄTE




                   1996                           1999                                        200...
02 | MOBILFUNKGERÄTE




   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010  ...
02 | MOBILFUNKGERÄTE




               2002

   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lo...
02 | MOBILFUNKGERÄTE




               2002                            2004

   (c) 2010 - typofaktum unternehmenskommuni...
02 | MOBILFUNKGERÄTE




               2002                            2004                                        2007

...
02 | MOBILFUNKGERÄTE

    • Großes,               hochwertiges Display

    • Hohe                Rechenleistung

    • Ka...
03 | DATEN-TARIFE/- NUTZUNG

    • 2000                - ca. 10 EUR pro 1 MB Daten

    • 2001                - ca. 8 EUR ...
03 | DATEN-TARIFE/- NUTZUNG
    • seit  Mitte 2007
        weltweit mehr
        Daten- als Sprach-
        Pakete


    •...
04 | BETRIEBSSYSTEM




   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   ...
04 | BETRIEBSSYSTEM
    • Intuitive           Bedienung (Usability)
    • Leichtes Finden von Inhalten (Portale, Integrati...
05 | INTERNET-TECHNOLOGIE




   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2...
05 | I-MODE
    • Portaldienst             für Mobiltelefone
    • Start          1999 in Japan
    • proprietär          ...
05 | WAP / WML
    • Wireless   Application Protocol +
        Wireless Markup-Language (W3C)
    • Seit         1999 (WAP...
05 | XHTML

    • XHTML                 Basic (W3C)
         • 1.0            (2000)
         • 1.1            (2007)
    ...
05 | HTML5

    • Entstanden   aus Ideen und
        Entwürfen zu:
         • XHTML           2.0 (W3C)
         • Web    ...
05 | HTML5

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

         ...
RIA - MOBILE WEB

    • Welche   RIA-Technologie soll
        das Mobile Web bestimmen?




   (c) 2010 - typofaktum unter...
BROWSER / SAFARI / WEBKIT




   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2...
BROWSER / SAFARI / WEBKIT




               Mac OS X



   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web |...
BROWSER / SAFARI / WEBKIT




               Mac OS X                         Windows



   (c) 2010 - typofaktum unterneh...
BROWSER / SAFARI / WEBKIT




               Mac OS X                         Windows                          iPhone OS

...
BROWSER / SAFARI / WEBKIT




                                               Mac OSOS
                                    ...
WEBKIT

    • freie        HTML-Rendering-Bibliothek (Open Source)
    • entwickelt              von Apple aus KHTML und K...
WEBKIT
    • WebKit              wird (dank OpenSource-Lizenz) in weiteren Anwendungen
        integriert:
             • ...
WEBKIT FEATURES
    •   HTML 4.01 / XHTML 1.0 & 1.1 / HTML5
             •   HTML 5 Of ine Webapps
             •   HTML 5...
WEBKIT VERGLEICH




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


   (c) 2010 - typofaktum unternehmenskommunikation | Mo...
CSS3




    • CSS-Transforms               (Transformation)
    • CSS-Transitions             (Übergänge)
    • CSS-Anima...
CSS-TRANSFORMS

    • Hardware                 beschleunigte Transformationen
    • Translate              (Bewegen)
    •...
CSS-TRANSFORMS




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




   (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Loba...
CSS-TRANSFORMS: SCALE(0.25)




   (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02....
CSS-TRANSFORMS: SCALE(-0,70)




   (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02...
CSS-TRANSFORMS: ROTATE(-30DEG)




   (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | ...
CSS-TRANSFORMS: SKEW




   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010  ...
CSS-TRANSFORMS: SKEW

             <style type="text/css" media="screen">
                img#bild1 {
                   p...
CSS-TRANSFORMS 3D

  • Erweiterung   der
      2D-Transformation

  • Beispiel:

      Cover ow
      Quelle: Flickr-Feed
...
CSS-TRANSFORMS 3D

  • Erweiterung   der
      2D-Transformation

  • Beispiel:

      Cover ow
      Quelle: Flickr-Feed
...
CSS-TRANSFORMS




   http://webkit.org/blog-files/3d-transforms/poster-circle.html
   (c) 2010 - typofaktum unternehmensko...
CSS-TRANSFORMS 3D




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

   (c) 2010 - typofaktum ...
CSS-TRANSFORMS 3D




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

   (c) 2010 - typofaktum ...
CSS-TRANSITIONS



  • Hardware              beschleunigte Übergänge
  • Animation   von einem alten Zustand in einen
    ...
CSS-TRANSITIONS


  • Tappen    ändert
      vier CSS-Werte:
            • Breite

            • Höhe

            • Hinte...
CSS-TRANSITIONS
     <style type="text/css" media="screen">
         body { background-color: #000;}
         img {
      ...
CSS-ANIMATIONS

  • Hardware               beschleunigte Animationen
  • Keyframe              (Schlüsselbild) Animationen...
CSS-ANIMATIONS




  • Tappen                startet die Animation




   (c) 2010 - typofaktum unternehmenskommunikation ...
CANVAS
                                                    HTML5


   (c) 2010 - typofaktum unternehmenskommunikation | Mo...
HTML5: CANVAS
    • Inkludiert          in die HTML5 Spezi kation

    • „Virtuelle          Zeichen äche“

    • Erstellu...
HTML5: CANVAS DEMO




   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   5...
HTML5: CANVAS DEMO




   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010   5...
HTML5: CANVAS DEMO

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



               // Referenz au...
OFFLINE WEBAPPS
                                                    HTML5


   (c) 2010 - typofaktum unternehmenskommunika...
HTML5: OFFLINE WEBAPPS



    • Local               und Session Storage

    • HTML5                 Database Storage

   ...
LOCAL / SESSION STORAGE
    • Cookies               haben einige Nachteile
             • Nicht        an ein Browserfenst...
HTML5: DATABASE STORAGE
    • SQLite              - Relationale Datenbank auf Dateibasis
    • Asynchroner    und Callback...
WEBKIT + LOCAL DB DEMO




   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010...
HTML5: APPLICATION CACHE

    • Lokale              Kopie einer Website
    • Enthält             alle benötigten Ressourc...
AUDIO & VIDEO
                                                    HTML5


   (c) 2010 - typofaktum unternehmenskommunikati...
HTML5: VIDEO & AUDIO



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

    ...
HTML5: VIDEO & AUDIO




   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010  ...
HTML5: VIDEO & AUDIO
    •   H.264 Simple baseline pro le video (main and extended video compatible) level 3 and Low-Compl...
GEO LOCATION API
                                                    HTML5


   (c) 2010 - typofaktum unternehmenskommunik...
HTML5: GEOLOCATION API

    • Kapselung               der Positionsermittlung

    • GPS,                WLAN, Bluetooth, ...
QUELLEN
    • Statistikenüber die Nutzung und Verbreitung des Mobilfunks
        http://metrics.admob.com/wp-content/uploa...
DAS BUCH ZUM VORTRAG

    • Patrick             Lobacher
        und Alexander Ebner


        Broschiert: 324 Seiten
    ...
DAS BUCH ZUM VORTRAG
                                                ACHTUNG!
                                            ...
DIE ZUKUNFT DES INTERNETS




   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2...
DIE ZUKUNFT DES INTERNETS




   (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2...
NOCH FRAGEN?
                                   gerne auch per Mail:
                             patrick.lobacher@typofak...
Upcoming SlideShare
Loading in...5
×

Das mobile Web kommt - nun aber wirklich

1,263

Published on

Die Zukunft des Internets mittels HTML5 und CSS3 schon jetzt auf iPhone, Android & Co

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,263
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
21
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Das mobile Web kommt - nun aber wirklich

  1. 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. 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. 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. 4. DAS „MOBILE WEB“ Quo vadis (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 4 Montag, 25. Januar 2010
  5. 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. 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. 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. 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. 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. 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. 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. 12. 02 | MOBILFUNKGERÄTE (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 11 Montag, 25. Januar 2010
  13. 13. 02 | MOBILFUNKGERÄTE 1996 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 11 Montag, 25. Januar 2010
  14. 14. 02 | MOBILFUNKGERÄTE 1996 1999 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 11 Montag, 25. Januar 2010
  15. 15. 02 | MOBILFUNKGERÄTE 1996 1999 2002 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 11 Montag, 25. Januar 2010
  16. 16. 02 | MOBILFUNKGERÄTE (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 12 Montag, 25. Januar 2010
  17. 17. 02 | MOBILFUNKGERÄTE 2002 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 12 Montag, 25. Januar 2010
  18. 18. 02 | MOBILFUNKGERÄTE 2002 2004 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 12 Montag, 25. Januar 2010
  19. 19. 02 | MOBILFUNKGERÄTE 2002 2004 2007 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 12 Montag, 25. Januar 2010
  20. 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. 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. 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. 23. 04 | BETRIEBSSYSTEM (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 16 Montag, 25. Januar 2010
  24. 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. 25. 05 | INTERNET-TECHNOLOGIE (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 18 Montag, 25. Januar 2010
  26. 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. 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. 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. 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. 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. 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. 32. BROWSER / SAFARI / WEBKIT (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 25 Montag, 25. Januar 2010
  33. 33. BROWSER / SAFARI / WEBKIT Mac OS X (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 25 Montag, 25. Januar 2010
  34. 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. 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. 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. 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. 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. 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. 40. WEBKIT VERGLEICH (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 29 Montag, 25. Januar 2010
  41. 41. CSS3 Das neue „Flash“ (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 30 Montag, 25. Januar 2010
  42. 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. 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. 44. CSS-TRANSFORMS (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 33 Montag, 25. Januar 2010
  45. 45. CSS-TRANSFORMS: TRANSLATE(100PX,50PX) (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 34 Montag, 25. Januar 2010
  46. 46. CSS-TRANSFORMS: SCALE(0.25) (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 35 Montag, 25. Januar 2010
  47. 47. CSS-TRANSFORMS: SCALE(-0,70) (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 36 Montag, 25. Januar 2010
  48. 48. CSS-TRANSFORMS: ROTATE(-30DEG) (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 37 Montag, 25. Januar 2010
  49. 49. CSS-TRANSFORMS: SKEW (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 38 Montag, 25. Januar 2010
  50. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 60. CSS-ANIMATIONS • Tappen startet die Animation (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 48 Montag, 25. Januar 2010
  61. 61. CANVAS HTML5 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 49 Montag, 25. Januar 2010
  62. 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. 63. HTML5: CANVAS DEMO (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 51 Montag, 25. Januar 2010
  64. 64. HTML5: CANVAS DEMO (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 52 Montag, 25. Januar 2010
  65. 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. 66. OFFLINE WEBAPPS HTML5 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 54 Montag, 25. Januar 2010
  67. 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. 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. 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. 70. WEBKIT + LOCAL DB DEMO (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 58 Montag, 25. Januar 2010
  71. 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. 72. AUDIO & VIDEO HTML5 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 60 Montag, 25. Januar 2010
  73. 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. 74. HTML5: VIDEO & AUDIO (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 62 Montag, 25. Januar 2010
  75. 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. 76. GEO LOCATION API HTML5 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 64 Montag, 25. Januar 2010
  77. 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. 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. 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. 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. 81. DIE ZUKUNFT DES INTERNETS (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 68 Montag, 25. Januar 2010
  82. 82. DIE ZUKUNFT DES INTERNETS (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 68 Montag, 25. Januar 2010
  83. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×