webapplikationen der zukunft - html5 und css3 auf dem iphone

WEBAPPLIKATIONEN DER ZUKUNFT

HTML5 und CSS3 auf dem iPhone

02.12.2009 | iPhone developer conference | Köln, Wasserturm

Patrick Lobacher (GF typofaktum)

Ü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

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

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

ACHTUNG!Unverschämte Eigenwerbung :-)

ÜBER TYPOFAKTUM

•Adresse:

typofaktum unternehmenskommunikation

belfortstr. 881667 münchen

tel 089 46 13 38 67fax 089 46 13 38 68email info@typofaktum.deweb http://www.typofaktum.de

WEBAPPSQuo vadis

WO IST DAS SDK?

• iPhone seit29. Juni 2007

•„Web-SDK“ am 11. Juni 2007

•SDK seit06. März 2008

WO IST DAS SDK

WEBAPPS

• >4200 WebApps

• www.apple.com/webapps/

WEBSPRACHEN

WEBKIT

WindowsMac OS X iPhone OSWebKit

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

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

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

WEBKIT VERGLEICH

CSS3Das neue „Flash“

•CSS-Transforms (Transformation)

•CSS-Transitions (Übergänge)

•CSS-Animations (Animationen)

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/

CSS-TRANSFORMS

CSS-TRANSFORMS• Jedes HTML-Element kann ein Objekt sein

•Ausgangspunkt ist die Mitte des Objekts

X-Achse

Y-Achse

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

-webkit-transform-origin: posx

-webkit-transform-origin: posx posy

CSS-TRANSFORMS: TRANSLATE

•Bewegt das Objekt

•Angabe in Pixel oder Prozent

•Prozentangaben sind relativ zur Objekt-Box

• translate, translateX, translateY

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>

CSS-TRANSFORMS: TRANSLATE(100PX,50PX)

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

CSS-TRANSFORMS: SCALE

</style>

CSS-TRANSFORMS: SCALE(0.25)

CSS-TRANSFORMS: SCALE(-0,70)

CSS-TRANSFORMS: ROTATE

•Dreht das Objekt um den Ausgangspunkt

•Werte können als Grad oder Rad angegeben werden

• rotate

CSS-TRANSFORMS: ROTATE

</style>

CSS-TRANSFORMS: ROTATE(-30DEG)

CSS-TRANSFORMS: SKEW

•Verzerrt das Objekt um einen angegebenen Winkel

•Werte können als Grad oder Rad angegeben werden

•skew, skewX, skewY

CSS-TRANSFORMS 3D

CSS-TRANSFORMS

http://webkit.org/blog-files/3d-transforms/poster-circle.html

CSS-TRANSFORMS 3D

•Erweiterung der 2D-Transformation

•Beispiel:

Cover!owQuelle: Flickr-FeedCSS-Animation,CSS-Transformation (2D,3D)Spiegelung mittels Canvas

•http://www.satine.org/

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)

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)

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

CSS-TRANSITIONS

•Tappen ändertvier CSS-Werte:

• Breite

• Höhe

• Hintergrundfarbe

• Abstand von oben

CSS-TRANSITIONS

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

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)

CSS-ANIMATIONS

•Hardware beschleunigte Animationen

•Keyframe (Schlüsselbild) Animationen (@rule)

•Kontrolle möglich über:• Dauer

• Anzahl und Art der Wiederholung

• Timing-Funktion

• Anfangsverzögerung

CSS-ANIMATIONS

•De"nition einer @rule@-webkit-keyframes 'slidedown' {

0% {top: 10px;

}30% {

top: 150px;}50% {

top: 100px;}80% {

top: 200px;}100% {

top: 10px;}

CSS-ANIMATIONS

•Ansprechen der Animation

CSS-ANIMATIONS

•Tappen startet die Animation

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)

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

CANVASHTML5

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

HTML5: CANVAS DEMO

// 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();

OFFLINE WEBAPPSHTML5

HTML5: OFFLINE WEBAPPS

•Local und Session Storage

•HTML5 Database Storage

•HTML Application Cache

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

LOCAL / SESSION STORAGE

// 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.'); }}

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.

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

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

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

function insertData(db) { db.transaction( function (transaction) { transaction.executeSql( 'INSERT INTO zeiten (projekte, stunden) VALUES ("iPhoneDevCon", "3.00");', [], dataHandler, errorHandler);

} ); }

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'; } }

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

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

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

• 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

• 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()

AUDIO & VIDEOHTML5

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

myVideo.addEventListener('ended', function () { alert('video playback finished')} );

var audio = new Audio("song.mp3");audio.play();

<video src=“sample.mov“ autoplay=“true“ auobuffer=“true“ width=“200“ height=“300“ poster=“vorschau.png“ loop=“true“ controls=“true“>...Fallback...</video>

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

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

GEO LOCATION APIHTML5

HTML5: GEOLOCATION API

•Kapselung der Positionsermittlung

•GPS, WLAN, Bluetooth, o.ä.

•Ermittlung der aktuellen Position

•Nachfrage im Browser

•Tracking möglich

•Objekt: navigator.geolocation

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

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

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

NOCH FRAGEN?gerne auch per Mail:

patrick.lobacher@typofaktum.de

webapplikationen der zukunft - html5 und css3 auf dem iphone

Technology

html5 i css3

découverte html5/css3

html5 and-css3

html5 e css3

oficina html5 + css3

curso css3 - programacion en html5 css3

html5 css3

html5 n css3

html5 + css3 + javascript

html5+css3 01

html5 & css3 : jeux

html5 and css3

formation html5/css3

html5 &&& css3

html5/css3 @ baidu

html5 & css3

html5? · html5 und css3 sind keine abgeschlossenen...

html5 css3 websocket

html5 css3 javascript

html5 y css3