Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

Ü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

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

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 • 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: 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: 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: 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 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 <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 • -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

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

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.rowAﬀected UPDATE Befehl betroﬀen 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

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

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

Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

by Patrick Lobacher

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 4

Statistics