Upload
patrick-lobacher
View
2.799
Download
0
Embed Size (px)
DESCRIPTION
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.
Citation preview
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
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
2
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
Ü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)
3
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
DAS BUCH ZUM VORTRAG
•Patrick Lobacher und Alexander Ebner
Broschiert: 324 SeitenVerlag: Open Source Press; Au!age: 1 (Juni 2009)
• ISBN-10: 3937514864ISBN-13: 978-3937514864
4
ACHTUNG!Unverschämte Eigenwerbung :-)
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
ÜBER TYPOFAKTUM
•Adresse:
typofaktum unternehmenskommunikation
belfortstr. 881667 münchen
tel 089 46 13 38 67fax 089 46 13 38 68email [email protected] http://www.typofaktum.de
X
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
WEBAPPSQuo vadis
5
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
WO IST DAS SDK?
• iPhone seit29. Juni 2007
•„Web-SDK“ am 11. Juni 2007
•SDK seit06. März 2008
6
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
WO IST DAS SDK
7
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
WEBAPPS
• >4200 WebApps
• www.apple.com/webapps/
8
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
WEBSPRACHEN
9
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
WEBKIT
10
WindowsMac OS X iPhone OSWebKit
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
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
11
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
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
12
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
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
13
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
WEBKIT VERGLEICH
14
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
CSS3Das neue „Flash“
15
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
CSS3
•CSS-Transforms (Transformation)
•CSS-Transitions (Übergänge)
•CSS-Animations (Animationen)
16
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
CSS-TRANSFORMS
•Hardware beschleunigte Transformationen
•Translate (Bewegen)
•Scale (Skalieren)
•Rotate (Drehen)
•Skew (Verzerren)
•W3C-Workingdrafthttp://www.w3.org/TR/css3-2d-transforms/http://www.w3.org/TR/css3-3d-transforms/
17
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
CSS-TRANSFORMS
18
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
CSS-TRANSFORMS• Jedes HTML-Element kann ein Objekt sein
•Ausgangspunkt ist die Mitte des Objekts
19
X-Achse
Y-Achse
0
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
CSS-TRANSFORMS
•Setzt den Ausgangspunkt neu
• 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
20
-webkit-transform-origin: posx
-webkit-transform-origin: posx posy
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
CSS-TRANSFORMS: TRANSLATE
•Bewegt das Objekt
•Angabe in Pixel oder Prozent
•Prozentangaben sind relativ zur Objekt-Box
• translate, translateX, translateY
21
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
CSS-TRANSFORMS: TRANSLATE
22
<!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
CSS-TRANSFORMS: TRANSLATE(100PX,50PX)
23
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
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
24
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
CSS-TRANSFORMS: SCALE
25
<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
CSS-TRANSFORMS: SCALE(0.25)
26
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
CSS-TRANSFORMS: SCALE(-0,70)
27
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
CSS-TRANSFORMS: ROTATE
•Dreht das Objekt um den Ausgangspunkt
•Werte können als Grad oder Rad angegeben werden
• rotate
28
45°
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
CSS-TRANSFORMS: ROTATE
29
<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
CSS-TRANSFORMS: ROTATE(-30DEG)
30
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
CSS-TRANSFORMS: SKEW
•Verzerrt das Objekt um einen angegebenen Winkel
•Werte können als Grad oder Rad angegeben werden
•skew, skewX, skewY
31
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
CSS-TRANSFORMS: SKEW
32
<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
CSS-TRANSFORMS: SKEW
33
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
CSS-TRANSFORMS 3D
34
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
CSS-TRANSFORMS
35
http://webkit.org/blog-files/3d-transforms/poster-circle.html
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
CSS-TRANSFORMS 3D
36
•Erweiterung der 2D-Transformation
•Beispiel:
Cover!owQuelle: Flickr-FeedCSS-Animation,CSS-Transformation (2D,3D)Spiegelung mittels Canvas
•http://www.satine.org/
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
CSS-TRANSFORMS 3D
37
• -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
CSS-TRANSFORMS 3D
38
• -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
CSS-TRANSITIONS
39
•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
CSS-TRANSITIONS
40
•Tappen ändertvier CSS-Werte:
• Breite
• Höhe
• Hintergrundfarbe
• Abstand von oben
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
CSS-TRANSITIONS
41
<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
CSS-TRANSITIONS
42
• -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
CSS-TRANSITIONS
43
• 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
CSS-ANIMATIONS
44
•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
CSS-ANIMATIONS
45
•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
CSS-ANIMATIONS
46
•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
CSS-ANIMATIONS
47
•Tappen startet die Animation
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
CSS-ANIMATIONS
48
• -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
CSS-ANIMATIONS
49
• -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
CANVASHTML5
50
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
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
51
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
HTML5: CANVAS DEMO
52
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
HTML5: CANVAS DEMO
53
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
HTML5: CANVAS DEMO
54
<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
OFFLINE WEBAPPSHTML5
55
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
HTML5: OFFLINE WEBAPPS
•Local und Session Storage
•HTML5 Database Storage
•HTML Application Cache
56
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
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
57
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
LOCAL / SESSION STORAGE
58
// Speichern des Wertepaares key => value im Session StoragesessionStorage.setItem("key", value);localStorage.setItem("key", value);
// Ermitteln des Wertes zum Schlüssel keyvar value = sessionStorage.getItem("key");
// Und nun wird der Wert wieder gelöschtsessionStorge.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
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.
59
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
HTML5: DATABASE STORAGE
60
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
HTML5: DATABASE STORAGE
61
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
HTML5: DATABASE STORAGE
62
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
HTML5: DATABASE STORAGE
63
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
HTML5: DATABASE STORAGE
64
db.transaction( function (transaction) { transaction.executeSql( "SELECT * from zeiten", [], // Werte-Array für ?-Platzhalter dataHandler, errorHandler); }) function dataHandler(transaction, results) { var ausgabe = "Zeiten:\n\n"; 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
HTML5: DATABASE STORAGE
65
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
HTML5: DATABASE STORAGE
66
Eigenschaft Beschreibung
error.code interner Fehlercode
error.message ausführliche Fehlerbeschreibung
results.rows.length Anzahl der Ergebniszeilen
results.rows.item(i)['name'] Ergebnis der Spalte 'name' der i-ten Ergebniszeile
results.rowAffected Anzahl der Zeilen die bei einem DELETE oder UPDATE Befehl betroffen waren
results.insertId Eindeutige ID der letzten Einfüge-Aktion durch INSERT
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
HTML5: APPLICATION CACHE
67
•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
HTML5: APPLICATION CACHE
68
• Beispielhafter Inhalt Datei mit Namen “demo.manifest“
• Referenzierung im HTML
CACHE MANIFEST
css/style.cssjs/script.jsimg/bild1.pngkontakt.htmlhttp://www.iphonedevcon.de/images/header.gif
<html manifest=“demo.manifest“>
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
HTML5: APPLICATION CACHE
69
• 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
AUDIO & VIDEOHTML5
70
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
HTML5: VIDEO & AUDIO
•Einbetten von 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
71
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
HTML5: VIDEO & AUDIO
72
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
HTML5: VIDEO & AUDIO
73
<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
HTML5: VIDEO & AUDIO
74
<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
HTML5: VIDEO & AUDIO
75
media.pausedmedia.endedmedia.defaultPlaybackRate [ = value ]media.playedmedia.play()media.pause()media.durationmedia.currentTime [ = value ]media.startTimemedia.currentSrcmedia.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
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
76
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
GEO LOCATION APIHTML5
77
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
HTML5: GEOLOCATION API
•Kapselung der Positionsermittlung
•GPS, WLAN, Bluetooth, o.ä.
•Ermittlung der aktuellen Position
•Nachfrage im Browser
•Tracking möglich
•Objekt: navigator.geolocation
78
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
HTML5: GEOLOCATION API
79
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
HTML5: GEOLOCATION API
80
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
QUELLEN
•HTML5 - W3Chttp://dev.w3.org/html5/spec/Overview.html
•W3C - CSS Working Group (WG)http://www.w3.org/Style/CSS/current-work
•WebKit Specshttp://www.webkit.org/specs/
•Apple Developer Connectionhttp://developer.apple.com
81
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
NOCH FRAGEN?gerne auch per Mail:
82