webapplikationen der zukunft - html5 und css3 auf dem iphone

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

Upload: patrick-lobacher

Post on 19-May-2015

2.799 views

Category:

Technology


0 download

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.

TRANSCRIPT

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

Page 2: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(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

Page 3: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(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

Page 4: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

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

Page 5: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(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

Page 6: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009

WEBAPPSQuo vadis

5

Page 7: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(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

Page 8: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009

WO IST DAS SDK

7

Page 9: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009

WEBAPPS

• >4200 WebApps

• www.apple.com/webapps/

8

Page 10: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009

WEBSPRACHEN

9

Page 11: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009

WEBKIT

10

WindowsMac OS X iPhone OSWebKit

Page 12: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(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

Page 13: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(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

Page 14: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(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

Page 15: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009

WEBKIT VERGLEICH

14

Page 16: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009

CSS3Das neue „Flash“

15

Page 17: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009

CSS3

•CSS-Transforms (Transformation)

•CSS-Transitions (Übergänge)

•CSS-Animations (Animationen)

16

Page 18: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(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

Page 19: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009

CSS-TRANSFORMS

18

Page 20: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(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

Page 21: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(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

Page 22: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(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

Page 23: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

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

Page 24: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009

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

23

Page 25: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(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

Page 26: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

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

Page 27: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009

CSS-TRANSFORMS: SCALE(0.25)

26

Page 28: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009

CSS-TRANSFORMS: SCALE(-0,70)

27

Page 29: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

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

Page 30: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

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

Page 31: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009

CSS-TRANSFORMS: ROTATE(-30DEG)

30

Page 32: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(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

Page 33: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

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

Page 34: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009

CSS-TRANSFORMS: SKEW

33

Page 35: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009

CSS-TRANSFORMS 3D

34

Page 36: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009

CSS-TRANSFORMS

35

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

Page 37: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

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

Page 38: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

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

Page 39: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

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

Page 40: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(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

Page 41: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(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

Page 42: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

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

Page 43: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(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

Page 44: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

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

Page 45: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(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

Page 46: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

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

}

Page 47: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

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

Page 48: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009

CSS-ANIMATIONS

47

•Tappen startet die Animation

Page 49: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

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

Page 50: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(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

Page 51: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009

CANVASHTML5

50

Page 52: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(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

Page 53: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009

HTML5: CANVAS DEMO

52

Page 54: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009

HTML5: CANVAS DEMO

53

Page 55: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

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

Page 56: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009

OFFLINE WEBAPPSHTML5

55

Page 57: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(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

Page 58: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(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

Page 59: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

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

Page 60: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(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

Page 61: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

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

Page 62: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

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

Page 63: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

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

Page 64: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

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

} ); }

Page 65: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

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

Page 66: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

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

Page 67: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(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

Page 68: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(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

Page 69: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

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

Page 70: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

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

Page 71: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009

AUDIO & VIDEOHTML5

70

Page 72: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(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

Page 73: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009

HTML5: VIDEO & AUDIO

72

Page 74: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

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

Page 75: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

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

Page 76: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(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

Page 77: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(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

Page 78: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009

GEO LOCATION APIHTML5

77

Page 79: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(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

Page 80: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

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

Page 81: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

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

Page 82: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(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

Page 83: Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009

NOCH FRAGEN?gerne auch per Mail:

[email protected]

82