Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
-
Upload
patrick-lobacher -
Category
Technology
-
view
2.799 -
download
0
description
Transcript of Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone
(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