Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
Upcoming SlideShare
Loading in...5
×
 

Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

on

  • 3,713 views

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 ...

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.

Statistics

Views

Total Views
3,713
Views on SlideShare
3,709
Embed Views
4

Actions

Likes
3
Downloads
42
Comments
0

1 Embed 4

http://www.slideshare.net 4

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone Presentation Transcript

    • 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
    • Ü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
    • Ü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
    • 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
    • Ü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
    • WEBAPPS Quo vadis (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 5
    • 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
    • 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 & CSS3 | Patrick Lobacher | 02.12.2009 8
    • WEBSPRACHEN (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 9
    • WEBKIT Mac OS X Windows WebKit iPhone OS (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 10
    • 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
    • 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
    • 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
    • WEBKIT VERGLEICH (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 14
    • CSS3 Das neue „Flash“ (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 15
    • CSS3 • CSS-Transforms (Transformation) • CSS-Transitions (Übergänge) • CSS-Animations (Animationen) (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 16
    • 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
    • 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 0 X-Achse Y-Achse (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 19
    • 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
    • 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
    • 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
    • CSS-TRANSFORMS: TRANSLATE(100PX,50PX) (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 23
    • 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
    • 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
    • CSS-TRANSFORMS: SCALE(0.25) (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 26
    • CSS-TRANSFORMS: SCALE(-0,70) (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 27
    • 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
    • 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
    • CSS-TRANSFORMS: ROTATE(-30DEG) (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 30
    • 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
    • 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
    • CSS-TRANSFORMS: SKEW (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 33
    • 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 unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 35
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • CSS-ANIMATIONS • Tappen startet die Animation (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 47
    • 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
    • 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
    • CANVAS HTML5 (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 50
    • 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
    • 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 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
    • OFFLINE WEBAPPS HTML5 (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 55
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • AUDIO & VIDEO HTML5 (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 70
    • 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
    • HTML5: VIDEO & AUDIO (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 72
    • 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
    • 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
    • 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
    • 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
    • GEO LOCATION API HTML5 (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 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) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 78
    • 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
    • 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
    • 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
    • NOCH FRAGEN? gerne auch per Mail: patrick.lobacher@typofaktum.de (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 82