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

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)

3


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


Ü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

mailto:[email protected]



WEBAPPSQuo vadis

5


WO IST DAS SDK?

• iPhone seit29. Juni 2007

•„Web-SDK“ am 11. Juni 2007

•SDK seit06. März 2008

6


WO IST DAS SDK

7


WEBAPPS

• >4200 WebApps

• www.apple.com/webapps/

8

http://www.apple.com/webapps/

http://www.apple.com/webapps/


WEBSPRACHEN

9


WEBKIT

10

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

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

12

http://www.webkit.org

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

13


WEBKIT VERGLEICH

14


CSS3Das neue „Flash“

15


CSS3

•CSS-Transforms (Transformation)

•CSS-Transitions (Übergänge)

•CSS-Animations (Animationen)

16


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

http://www.w3.org/TR/css3-3d-transforms/

http://www.w3.org/TR/css3-3d-transforms/


CSS-TRANSFORMS

18


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

•Ausgangspunkt ist die Mitte des Objekts

19

X-Achse

Y-Achse

0


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


CSS-TRANSFORMS: TRANSLATE

•Bewegt das Objekt

•Angabe in Pixel oder Prozent

•Prozentangaben sind relativ zur Objekt-Box

• translate, translateX, translateY

21


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>

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

http://www.w3.org/1999/xhtml

http://www.w3.org/1999/xhtml


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

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

24


CSS-TRANSFORMS: SCALE

25

<style type="text/css" media="screen">! ! body { background-color:#000 } img { -webkit-transform: translate(100px,50px) scale(0.25); }

</style>


CSS-TRANSFORMS: SCALE(0.25)

26


CSS-TRANSFORMS: SCALE(-0,70)

27


CSS-TRANSFORMS: ROTATE

•Dreht das Objekt um den Ausgangspunkt

•Werte können als Grad oder Rad angegeben werden

• rotate

28

45°


CSS-TRANSFORMS: ROTATE

29

<style type="text/css" media="screen">! ! body { background-color:#000 } img { -webkit-transform: translate(100px,50px) rotate(-30deg); }

</style>


CSS-TRANSFORMS: ROTATE(-30DEG)

30


CSS-TRANSFORMS: SKEW

•Verzerrt das Objekt um einen angegebenen Winkel

•Werte können als Grad oder Rad angegeben werden

•skew, skewX, skewY

31



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



33


CSS-TRANSFORMS 3D

34


CSS-TRANSFORMS

35

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




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/

http://www.satine.org

http://www.satine.org


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)


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)


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


CSS-TRANSITIONS

40

•Tappen ändertvier CSS-Werte:

• Breite

• Höhe

• Hintergrundfarbe

• Abstand von oben


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


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


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)


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


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

}


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>


CSS-ANIMATIONS

47

•Tappen startet die Animation


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)


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


CANVASHTML5

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

51


HTML5: CANVAS DEMO

52


HTML5: CANVAS DEMO

53


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


OFFLINE WEBAPPSHTML5

55


HTML5: OFFLINE WEBAPPS

•Local und Session Storage

•HTML5 Database Storage

•HTML Application Cache

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

57


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


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


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



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



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



63

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

} ); }



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



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



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


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



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

http://www.iphonedevcon.de/images/header.gif

http://www.iphonedevcon.de/images/header.gif



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


AUDIO & VIDEOHTML5

70


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

http://www.youtube.com/html5

http://www.youtube.com/html5



72



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



74

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



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


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


GEO LOCATION APIHTML5

77


HTML5: GEOLOCATION API

•Kapselung der Positionsermittlung

•GPS, WLAN, Bluetooth, o.ä.

•Ermittlung der aktuellen Position

•Nachfrage im Browser

•Tracking möglich

•Objekt: navigator.geolocation

78



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



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


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

http://dev.w3.org/html5/spec/Overview.html

http://dev.w3.org/html5/spec/Overview.html

http://webkit.org/blog/126/webkit-does-html5-client-side-database-storage/

http://webkit.org/blog/126/webkit-does-html5-client-side-database-storage/

http://www.webkit.org/specs/




http://developer.apple.com

http://developer.apple.com


NOCH FRAGEN?gerne auch per Mail:

[email protected]

82



Download - Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

Top Related