WEBAPPLIKATIONEN DER
              ZUKUNFT
                        HTML5 und CSS3 auf dem iPhone

                        ...
ÜBER TYPOFAKTUM
• Münchner         Fullservice-Agentur für Unternehmenskommunikation

• Inhabergeführt:          Patrick L...
ÜBER TYPOFAKTUM
•   GF Patrick Lobacher hat zahlreiche Publikationen über alle Aspekte der iPhone
    Webapplikationsentwi...
DAS BUCH ZUM VORTRAG
                                            ACHTUNG!
                                          Unvers...
ÜBER TYPOFAKTUM
• Adresse:


   typofaktum unternehmenskommunikation

   belfortstr. 8
   81667 münchen

   tel          0...
WEBAPPS
                                              Quo vadis


(c) 2009 - typofaktum unternehmenskommunikation | HTML5 ...
WO IST DAS SDK?



• iPhone  seit
   29. Juni 2007

• „Web-SDK“              am 11. Juni 2007

• SDK  seit
   06. März 200...
WO IST DAS SDK




(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009   7
WEBAPPS




• >4200        WebApps

• www.apple.com/webapps/




(c) 2009 - typofaktum unternehmenskommunikation | HTML5 &...
WEBSPRACHEN




(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009   9
WEBKIT




       Mac OS X                              Windows
                                             WebKit       ...
WEBKIT

• freie   HTML-Rendering-Bibliothek
• entwickelt       von Apple aus KHTML und KJS
• Der    Browser Safari basiert...
WEBKIT
• WebKit     wird (dank OpenSource-Lizenz) in weiteren Anwendungen
   integriert:
      • Google        Chrome
    ...
WEBKIT FEATURES
•   HTML 4.01 / XHTML 1.0 & 1.1 / HTML5
      •   HTML 5 Of ine Webapps
      •   HTML 5 Audio und Video E...
WEBKIT VERGLEICH




(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009   14
CSS3
                                        Das neue „Flash“


(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & ...
CSS3




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

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




(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009   18
CSS-TRANSFORMS
• Jedes      HTML-Element kann ein Objekt sein

• Ausgangspunkt                ist die Mitte des Objekts

 ...
CSS-TRANSFORMS

• Setzt     den Ausgangspunkt neu
    -webkit-transform-origin: posx

    -webkit-transform-origin: posx p...
CSS-TRANSFORMS: TRANSLATE

• Bewegt          das Objekt

• Angabe           in Pixel oder Prozent

• Prozentangaben       ...
CSS-TRANSFORMS: TRANSLATE

         <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/T...
CSS-TRANSFORMS: TRANSLATE(100PX,50PX)




(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobache...
CSS-TRANSFORMS: SCALE
• Wenn   der Absolut-Wert größer als 1 ist, wird das Objekt
   vergrößert
• Wenn     der Absolut-Wer...
CSS-TRANSFORMS: SCALE


       <style type="text/css" media="screen">
       !   !
          body { background-color:#000 ...
CSS-TRANSFORMS: SCALE(0.25)




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




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

• Dreht      das Objekt um den Ausgangspunkt

• Werte        können als Grad oder Rad angegeben we...
CSS-TRANSFORMS: ROTATE


         <style type="text/css" media="screen">
         !   !
            body { background-colo...
CSS-TRANSFORMS: ROTATE(-30DEG)




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

• Verzerrt       das Objekt um einen angegebenen Winkel

• Werte        können als Grad oder Rad ang...
CSS-TRANSFORMS: SKEW

      <style type="text/css" media="screen">
         img#bild1 {
            position:absolute;top:...
CSS-TRANSFORMS: SKEW




(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009   ...
CSS-TRANSFORMS 3D




(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009   34
CSS-TRANSFORMS




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

• Erweiterung der
  2D-Transformation

• Beispiel:

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


• -webkit-transform:

     • translate3d(x,         y, z)
     • translateZ(length

     • rotateZ(ang...
CSS-TRANSFORMS 3D
• -webkit-transform-style:

     •    at / preserve-3d




• -webkit-perspective:                <tiefe>...
CSS-TRANSITIONS



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


• Tappen  ändert
  vier CSS-Werte:
     • Breite

     • Höhe

     • Hintergrundfarbe

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

• -webkit-transition-property

     • CSS-Eigenschaft

• -webkit-transition-duration

     • Dauer       ...
CSS-TRANSITIONS


• cubic-bezier       (P1x, P1y, P2x, P2y)
• ease    (0.25, 0.1, 0.25, 1.0)
• linear   (0.0, 0.0, 1.0, 1....
CSS-ANIMATIONS

• Hardware            beschleunigte Animationen
• Keyframe          (Schlüsselbild) Animationen (@rule)
• ...
CSS-ANIMATIONS
• De     nition einer @rule
   @-webkit-keyframes 'slidedown' {
     0% {
       top: 10px;
     }
     30%...
CSS-ANIMATIONS
• Ansprechen            der Animation
   <style type="text/css" media="screen">
   !    body {background-co...
CSS-ANIMATIONS




• Tappen        startet die Animation




(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS...
CSS-ANIMATIONS
• -webkit-animation-name

     • Name    der Animation,
        dafür muss eine @rule de niert sein
• -webk...
CSS-ANIMATIONS

• -webkit-animation-direction

     • Richtung  der Animation („normal“ für normale Richtung, „alternate“
...
CANVAS
                                                 HTML5


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

• „Virtuelle     Zeichen äche“

• Erstellung      von Vektorgra ...
HTML5: CANVAS DEMO




(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009   52
HTML5: CANVAS DEMO




(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009   53
HTML5: CANVAS DEMO

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



       // Referenz auf Canvas

      ...
OFFLINE WEBAPPS
                                                 HTML5


(c) 2009 - typofaktum unternehmenskommunikation |...
HTML5: OFFLINE WEBAPPS



• Local      und Session Storage

• HTML5          Database Storage

• HTML        Application C...
LOCAL / SESSION STORAGE
• Cookies          haben einige Nachteile
      • Nicht      an ein Browserfenster gebunden sonder...
LOCAL / SESSION STORAGE

    // Speichern des Wertepaares key => value im Session Storage
    sessionStorage.setItem("key"...
HTML5: DATABASE STORAGE
• SQLite       - Relationale Datenbank auf Dateibasis
• Asynchroner   und Callback-Zugriff (per Qu...
HTML5: DATABASE STORAGE
          try {
             if (!window.openDatabase) {
                 alert('Kein HTML5 Databa...
HTML5: DATABASE STORAGE

               db.transaction(
                  function (transaction) {
                      t...
HTML5: DATABASE STORAGE

          function createTables(db) {
             db.transaction(
                function (tran...
HTML5: DATABASE STORAGE

          function insertData(db) {
             db.transaction(
                function (transa...
HTML5: DATABASE STORAGE

          db.transaction(
             function (transaction) {
                transaction.execu...
HTML5: DATABASE STORAGE

          function errorHandler(transaction, error) {
             // error.message ist eine
    ...
HTML5: DATABASE STORAGE


         Eigenschaft                                    Beschreibung

         error.code       ...
HTML5: APPLICATION CACHE


• Resource          Manifest
      • Textdatei       mit Liste der URLs aller benötigten Assets...
HTML5: APPLICATION CACHE


      • BeispielhafterInhalt
         Datei mit Namen “demo.manifest“
          CACHE MANIFEST
...
HTML5: APPLICATION CACHE

      • Der Application Cache updated sich nur
         wenn sich der Inhalt des Cache Manifest ...
AUDIO & VIDEO
                                                 HTML5


(c) 2009 - typofaktum unternehmenskommunikation | H...
HTML5: VIDEO & AUDIO
• Einbettenvon Medien mittels HTML5
   <audio> und <video> Tags
• Media-Events

• Abspiel-UI         ...
HTML5: VIDEO & AUDIO




(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009   ...
HTML5: VIDEO & AUDIO
        <video src=“sample.mov“ autoplay=“true“></video>

        <script>
        function playPause...
HTML5: VIDEO & AUDIO


         <video
             src=“sample.mov“
             autoplay=“true“
             auobuffer=“...
HTML5: VIDEO & AUDIO


         media.paused
         media.ended
         media.defaultPlaybackRate [ = value ]
         ...
HTML5: VIDEO & AUDIO
•   H.264 Simple baseline pro le video (main and extended video compatible) level 3 and Low-Complexit...
GEO LOCATION API
                                                 HTML5


(c) 2009 - typofaktum unternehmenskommunikation ...
HTML5: GEOLOCATION API

• Kapselung            der Positionsermittlung

• GPS,       WLAN, Bluetooth, o.ä.

• Ermittlung  ...
HTML5: GEOLOCATION API

          navigator.geolocation.getCurrentPosition(showMap);

          function showMap(position)...
HTML5: GEOLOCATION API

        var watchId = navigator.geolocation.watchPosition(scrollMap, handleError);

        functi...
QUELLEN

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

• W3C     - CSS Working Group (WG)
   http://www.w...
NOCH FRAGEN?
                                gerne auch per Mail:
                          patrick.lobacher@typofaktum.de...
Nächste SlideShare
Wird geladen in …5
×

Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

3.245 Aufrufe

Veröffentlicht am

Mit der auf dem iPhone verwendeten Rendering-Engine WebKit steht der vielleicht leistungsfähigste Browser nun auch auf einem mobilen Gerät zur Verfügung. Gerade seine umfangreiche Unterstützung von HTML5 und CSS3 eignet sich perfekt um hochklassige und leistungsfähige Web-Applikationen zu entwickeln, die den nativen Applikationen oftmals um nichts nachstehen. Wir beleuchten sämtliche verfügbare Techniken an Hand zahlreicher Beispiele und wagen einen Ausblick auf die Zukunft von WebKit, die längst nicht beim iPhone aufhört, sondern bereits viele andere Hersteller wie Nokia, Palm, Google und Blackberry infiziert hat.

Veröffentlicht in: Technologie, Design
0 Kommentare
3 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
3.245
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
6
Aktionen
Geteilt
0
Downloads
47
Kommentare
0
Gefällt mir
3
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

  1. 1. WEBAPPLIKATIONEN DER ZUKUNFT HTML5 und CSS3 auf dem iPhone 02.12.2009 | iPhone developer conference | Köln, Wasserturm Patrick Lobacher (GF typofaktum) (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
  2. 2. ÜBER TYPOFAKTUM • Münchner Fullservice-Agentur für Unternehmenskommunikation • Inhabergeführt: Patrick Lobacher / Christoph Laruelle • Spezialisiert auf 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: Finanzscout 24, AGIP, Contraco, Arbeitsamt München, Langenscheidt, Motorola, Seifert, Integralis, u.v.a.m (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 2
  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äger bis Fortgeschrittene und Spezialschulungen sowie Firmen- und Individualschulungen) (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 3
  4. 4. 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) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 4
  5. 5. ÜBER TYPOFAKTUM • Adresse: typofaktum unternehmenskommunikation belfortstr. 8 81667 münchen tel 089 46 13 38 67 fax 089 46 13 38 68 email info@typofaktum.de web http://www.typofaktum.de (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 X
  6. 6. WEBAPPS Quo vadis (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 5
  7. 7. WO IST DAS SDK? • iPhone seit 29. Juni 2007 • „Web-SDK“ am 11. Juni 2007 • SDK seit 06. März 2008 (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 6
  8. 8. WO IST DAS SDK (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 7
  9. 9. WEBAPPS • >4200 WebApps • www.apple.com/webapps/ (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 8
  10. 10. WEBSPRACHEN (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 9
  11. 11. WEBKIT Mac OS X Windows WebKit iPhone OS (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 10
  12. 12. WEBKIT • freie HTML-Rendering-Bibliothek • 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) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 11
  13. 13. WEBKIT • WebKit wird (dank OpenSource-Lizenz) in weiteren Anwendungen integriert: • Google Chrome • Nokia Symbian OS (S60) • Adobe AIR • Google ANDROID • PalmOS, Blackerry OS, Open Moko, ... • iPhone OS enthält neueste WebKit Version • Quelle: http://www.webkit.org (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 12
  14. 14. 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) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 13
  15. 15. WEBKIT VERGLEICH (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 14
  16. 16. CSS3 Das neue „Flash“ (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 15
  17. 17. CSS3 • CSS-Transforms (Transformation) • CSS-Transitions (Übergänge) • CSS-Animations (Animationen) (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 16
  18. 18. 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) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 17
  19. 19. CSS-TRANSFORMS (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 18
  20. 20. CSS-TRANSFORMS • Jedes HTML-Element kann ein Objekt sein • Ausgangspunkt ist die Mitte des Objekts 0 X-Achse Y-Achse (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 19
  21. 21. CSS-TRANSFORMS • Setzt den Ausgangspunkt neu -webkit-transform-origin: posx -webkit-transform-origin: posx posy • Werte, prozentuale Angaben oder Konstanten • Konstanten posx: left, center, right • Konstanten posy: top, center, bottom • Default ist: 50% 50% • -webkit-transform-origin-x: posx -webkit-transform-origin-y: posy (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 20
  22. 22. CSS-TRANSFORMS: TRANSLATE • Bewegt das Objekt • Angabe in Pixel oder Prozent • Prozentangaben sind relativ zur Objekt-Box • translate, translateX, translateY (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 21
  23. 23. CSS-TRANSFORMS: TRANSLATE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ! <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0;user-scalable=0;"> ! <title>CSS-Transformation: Translate</title> ! <style type="text/css" media="screen"> ! ! body { background-color:#000 } ! ! img { ! ! ! -webkit-transform: translate(100px,50px); ! ! } ! </style> </head> <body> ! <img src="button_flyer.gif" /> </body> </html> (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 22
  24. 24. CSS-TRANSFORMS: TRANSLATE(100PX,50PX) (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 23
  25. 25. CSS-TRANSFORMS: SCALE • Wenn der Absolut-Wert größer als 1 ist, wird das Objekt vergrößert • Wenn der Absolut-Wert kleiner als 1 ist, wird das Objekt verkleinert • Negative Werte spiegeln das Objekt • scale, scaleX, scaleY (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 24
  26. 26. CSS-TRANSFORMS: SCALE <style type="text/css" media="screen"> ! ! body { background-color:#000 } img { -webkit-transform: translate(100px,50px) scale(0.25); } </style> (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 25
  27. 27. CSS-TRANSFORMS: SCALE(0.25) (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 26
  28. 28. CSS-TRANSFORMS: SCALE(-0,70) (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 27
  29. 29. CSS-TRANSFORMS: ROTATE • Dreht das Objekt um den Ausgangspunkt • Werte können als Grad oder Rad angegeben werden • rotate 45° (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 28
  30. 30. CSS-TRANSFORMS: ROTATE <style type="text/css" media="screen"> ! ! body { background-color:#000 } img { -webkit-transform: translate(100px,50px) rotate(-30deg); } </style> (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 29
  31. 31. CSS-TRANSFORMS: ROTATE(-30DEG) (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 30
  32. 32. CSS-TRANSFORMS: SKEW • Verzerrt das Objekt um einen angegebenen Winkel • Werte können als Grad oder Rad angegeben werden • skew, skewX, skewY (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 31
  33. 33. 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) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 32
  34. 34. CSS-TRANSFORMS: SKEW (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 33
  35. 35. CSS-TRANSFORMS 3D (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 34
  36. 36. CSS-TRANSFORMS http://webkit.org/blog-files/3d-transforms/poster-circle.html (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 35
  37. 37. 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) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 36
  38. 38. CSS-TRANSFORMS 3D • -webkit-transform: • translate3d(x, y, z) • translateZ(length • rotateZ(angle) • rotate3d(x, y, z, angle) (Rotation um den Vektor) • matrix3d(m11, m12, …, m44) (4x4 Matrix) (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 37
  39. 39. CSS-TRANSFORMS 3D • -webkit-transform-style: • at / preserve-3d • -webkit-perspective: <tiefe> • Der Wert „tiefe“ gibt den Abstand des Betrachters zur Z-Ebene (z=0) an (Default: tiefe = 0) (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 38
  40. 40. 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) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 39
  41. 41. CSS-TRANSITIONS • Tappen ändert vier CSS-Werte: • Breite • Höhe • Hintergrundfarbe • Abstand von oben (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 40
  42. 42. 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) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 41
  43. 43. CSS-TRANSITIONS • -webkit-transition-property • CSS-Eigenschaft • -webkit-transition-duration • Dauer (default 0 Sekunden) • -webkit-transition-timing-function • Geschwindigkeitskurve (Default „ease“) • -webkit-transition-delay • Verzögerung am Anfang (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 42
  44. 44. CSS-TRANSITIONS • cubic-bezier (P1x, P1y, P2x, P2y) • ease (0.25, 0.1, 0.25, 1.0) • linear (0.0, 0.0, 1.0, 1.0) • ease-in (0.42, 0.0, 1.0, 1.0) • ease-out (0.0, 0.0, 0.58, 1.0) • ease-in-out (0.42, 0.0, 0.58, 1.0) (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 43
  45. 45. 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) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 44
  46. 46. CSS-ANIMATIONS • De nition einer @rule @-webkit-keyframes 'slidedown' { 0% { top: 10px; } 30% { top: 150px; } 50% { top: 100px; } 80% { top: 200px; } 100% { top: 10px; } } (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 45
  47. 47. CSS-ANIMATIONS • Ansprechen der Animation <style type="text/css" media="screen"> ! body {background-color: #000;} ! div { ! position: absolute; ! } ! ! .testanimation { ! -webkit-animation-name: 'slidedown'; ! -webkit-animation-duration: 5s; ! } ! ! @-webkit-keyframes 'slidedown' { ... } </style> ... <div onclick="this.className='testanimation'"><img src="button_flyer.gif"></div> (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 46
  48. 48. CSS-ANIMATIONS • Tappen startet die Animation (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 47
  49. 49. CSS-ANIMATIONS • -webkit-animation-name • Name der Animation, dafür muss eine @rule de niert sein • -webkit-animation-duration • Dauer (Default 0 Sekunden) • -webkit-animation-timing-function • Geschwindigkeitskurve (Default „ease“) • -webkit-animation-iteration-count • Anzahl der Animationen (Default 1) (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 48
  50. 50. CSS-ANIMATIONS • -webkit-animation-direction • Richtung der Animation („normal“ für normale Richtung, „alternate“ für normale Richtung bei ungeraden Durchläufen und umgekehrte Richtung bei geraden Durchläufen) • -webkit-animation-play-state • Zustand der Animation („running“ wenn die Animation läuft und „paused“ wenn diese pausiert - Default „running“) • -webkit-animation-delay • Verzögerung am Anfang (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 49
  51. 51. CANVAS HTML5 (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 50
  52. 52. 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) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 51
  53. 53. HTML5: CANVAS DEMO (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 52
  54. 54. HTML5: CANVAS DEMO (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 53
  55. 55. 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) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 54
  56. 56. OFFLINE WEBAPPS HTML5 (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 55
  57. 57. HTML5: OFFLINE WEBAPPS • Local und Session Storage • HTML5 Database Storage • HTML Application Cache (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 56
  58. 58. 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) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 57
  59. 59. LOCAL / SESSION STORAGE // Speichern des Wertepaares key => value im Session Storage sessionStorage.setItem("key", value); localStorage.setItem("key", value); // Ermitteln des Wertes zum Schlüssel key var value = sessionStorage.getItem("key"); // Und nun wird der Wert wieder gelöscht sessionStorge.removeItem("key"); try { sessionStorage.setItem("shirt_size", myShirtSize); } catch (e) { if (e == QUOTA_EXCEEDED_ERR) { alert('Quota exceeded.'); } } (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 58
  60. 60. 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) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 59
  61. 61. HTML5: DATABASE STORAGE try { if (!window.openDatabase) { alert('Kein HTML5 Database Storage möglich!'); } else { var shortName = 'zeiterfassung'; var version = '1.0'; var displayName = 'Meine Zeiterfassung'; var expectedSize = 65536; // Angabe in Bytes var mydb = openDatabase(shortName, version, displayName, expectedSize); } } catch(e) { if (e == INVALID_STATE_ERR) { alert("Falsche Version!"); } else { alert("Unbekannter Fehler "+e+"."); } return; } (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 60
  62. 62. HTML5: DATABASE STORAGE db.transaction( function (transaction) { transaction.executeSql( SQL, [Werte-Array, die statt ‚?‘ ersetzt werden], dataHandler, errorHandler ); }, transactionError, transactionSuccess ); var projekt = "iPhoneDevCon"; var stunden = "3.50"; transaction.executeSql( "UPDATE zeiten SET stunden=? where projekt=?;", [prokjekt,stunden], dataHandler, errorHandler); (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 61
  63. 63. HTML5: DATABASE STORAGE function createTables(db) { db.transaction( function (transaction) { transaction.executeSql( 'CREATE TABLE zeiten( id INTEGER PRIMARY KEY AUTOINCREMENT, projekt TEXT NOT NULL, stunden REAL NOT NULL);', [], dataHandler, errorHandler); } ); } WICHTIG! SQL-Statement in eine Zeile!! transaction.executeSql("DROP TABLE IF EXISTS zeiten", [],dataHandler,errorHandler); (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 62
  64. 64. HTML5: DATABASE STORAGE function insertData(db) { db.transaction( function (transaction) { transaction.executeSql( 'INSERT INTO zeiten (projekte, stunden) VALUES ("iPhoneDevCon", "3.00");', [], dataHandler, errorHandler); } ); } (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 63
  65. 65. HTML5: DATABASE STORAGE db.transaction( function (transaction) { transaction.executeSql( "SELECT * from zeiten", [], // Werte-Array für ?-Platzhalter dataHandler, errorHandler); } ) function dataHandler(transaction, results) { var ausgabe = "Zeiten:nn"; for (var i=0; i < results.rows.length; i++) { var zeit = results.rows.item(i); ausgabe += „Projekt: „ + zeit['projekt'] + 'n'; ausgabe += „Stunden: „ + zeit['stunden'] + 'n'; } } (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 64
  66. 66. HTML5: DATABASE STORAGE function errorHandler(transaction, error) { // error.message ist eine // ausführliche Fehlerbeschreibung // error.code ist der interne Fehlercode alert('Fehler ist ' + error.message + ' (Code ' + error.code + ')'); // Fatal Error - ja oder nein? (Rollback bei true) fatalError = true; return fatalError; } (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 65
  67. 67. HTML5: DATABASE STORAGE Eigenschaft Beschreibung error.code interner Fehlercode error.message ausführliche Fehlerbeschreibung results.rows.length Anzahl der Ergebniszeilen Ergebnis der Spalte 'name' der i-ten results.rows.item(i)['name'] Ergebniszeile Anzahl der Zeilen die bei einem DELETE oder results.rowAffected UPDATE Befehl betroffen waren Eindeutige ID der letzten Einfüge-Aktion durch results.insertId INSERT (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 66
  68. 68. HTML5: APPLICATION CACHE • Resource Manifest • Textdatei mit Liste der URLs aller benötigten Assets • Addressierung relativ oder absolut • MimeType: text/cache-manifest • Erste Zeile muss enthalten: CACHE MANIFEST • Die HTML-Datei, in der das Cache Manifest referenziert wird, muss nicht angegeben werden (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 67
  69. 69. HTML5: APPLICATION CACHE • BeispielhafterInhalt Datei mit Namen “demo.manifest“ CACHE MANIFEST css/style.css js/script.js img/bild1.png kontakt.html http://www.iphonedevcon.de/images/header.gif • Referenzierung im HTML <html manifest=“demo.manifest“> (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 68
  70. 70. HTML5: APPLICATION CACHE • Der Application Cache updated sich nur wenn sich der Inhalt des Cache Manifest ändert • Update via JavaScript möglich • Objekt: window.applicationCache window.applicationCache.status /* UNCACHED = 0; IDLE = 1; CHECKING = 2; DOWNLOADING = 3; UPDATEREADY = 4; OBSOLETE = 5; */ window.applicationCache.update() window.applicationCache.swapCache() (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 69
  71. 71. AUDIO & VIDEO HTML5 (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 70
  72. 72. HTML5: VIDEO & AUDIO • Einbettenvon Medien mittels HTML5 <audio> und <video> Tags • Media-Events • Abspiel-UI beliebig anpassbar • Fallback wenn HTML5 nicht verfügbar • Flash • Java (Ogg, ...) • http://www.youtube.com/html5 (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 71
  73. 73. HTML5: VIDEO & AUDIO (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 72
  74. 74. HTML5: VIDEO & AUDIO <video src=“sample.mov“ autoplay=“true“></video> <script> function playPause() { var myVideo = document.getElementsByTagName('video')[0]; if (myVideo.paused) myVideo.play(); else myVideo.pause(); } </script> <input type=button onclick=”playPause()” value=”Play/Pause”> myVideo.addEventListener('ended', function () { alert('video playback finished') } ); var audio = new Audio("song.mp3"); audio.play(); (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 73
  75. 75. HTML5: VIDEO & AUDIO <video src=“sample.mov“ autoplay=“true“ auobuffer=“true“ width=“200“ height=“300“ poster=“vorschau.png“ loop=“true“ controls=“true“ > ... Fallback ... </video> (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 74
  76. 76. HTML5: VIDEO & AUDIO media.paused media.ended media.defaultPlaybackRate [ = value ] media.played media.play() media.pause() media.duration media.currentTime [ = value ] media.startTime media.currentSrc media.error loadstart, progress, suspendload, error, networkState, play, pause, loadedmetadata, readyState, loadeddata, waiting, playing, canplay, canplaythrough, seeking, seeked, ended! ratechange, volumechange , (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 75
  77. 77. 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) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 76
  78. 78. GEO LOCATION API HTML5 (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 77
  79. 79. HTML5: GEOLOCATION API • Kapselung der Positionsermittlung • GPS, WLAN, Bluetooth, o.ä. • Ermittlung der aktuellen Position • Nachfrage im Browser • Tracking möglich • Objekt: navigator.geolocation (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 78
  80. 80. HTML5: GEOLOCATION API navigator.geolocation.getCurrentPosition(showMap); function showMap(position) { latitude = position.coords.latitude; longitude = position.coords.longitude; } var trackId = navigator.geolocation.watchPosition(trackMap); function trackMap(position) { latitude = position.coords.latitude; longitude = position.coords.longitude; } navigator.geolocation.clearWatch(trackId); (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 79
  81. 81. HTML5: GEOLOCATION API var watchId = navigator.geolocation.watchPosition(scrollMap, handleError); function handleError(error) { // Ausgabe einer Fehlermeldung } interface Coordinates { readonly attribute double latitude; readonly attribute double longitude; readonly attribute double altitude; readonly attribute double accuracy; readonly attribute double altitudeAccuracy; readonly attribute double heading; readonly attribute double speed; }; (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 80
  82. 82. QUELLEN • 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) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 81
  83. 83. NOCH FRAGEN? gerne auch per Mail: patrick.lobacher@typofaktum.de (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 82

×