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

(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 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)


DAS BUCH ZUM VORTRAG
ACHTUNG!
Unverschämte
• Patrick Lobacher Eigenwerbung :-)
und Alexander Ebner

Broschiert: 324 Seiten
Verlag: Open Source Press;
Au age: 1 (Juni 2009)

• ISBN-10: 3937514864
ISBN-13: 978-3937514864


ÜBER TYPOFAKTUM
• Adresse:

typofaktum unternehmenskommunikation

belfortstr. 8
81667 münchen

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

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

WEBAPPS
Quo vadis


WO IST DAS SDK?

• iPhone seit
29. Juni 2007

• „Web-SDK“ am 11. Juni 2007

• SDK seit
06. März 2008


WO IST DAS SDK


WEBAPPS

• >4200 WebApps

• www.apple.com/webapps/


WEBSPRACHEN


WEBKIT

Mac OS X Windows
WebKit iPhone OS


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


CSS3
Das neue „Flash“


CSS3

• CSS-Transforms (Transformation)
• CSS-Transitions (Übergänge)
• CSS-Animations (Animationen)


CSS-TRANSFORMS

• Hardware beschleunigte Transformationen
• Translate (Bewegen)
• Scale (Skalieren)
• Rotate (Drehen)
• Skew (Verzerren)
• W3C-Workingdraft
http://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

0
X-Achse

Y-Achse


CSS-TRANSFORMS

• Setzt den Ausgangspunkt neu
-webkit-transform-origin: posx

-webkit-transform-origin: posx posy
• 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


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>

<body>
! <img src="button_flyer.gif" />
</body>
</html>


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 type="text/css" media="screen">
! !
body { background-color:#000 }

img {
-webkit-transform: translate(100px,50px) scale(0.25);
}

</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
45°


CSS-TRANSFORMS: ROTATE

! !
body { background-color:#000 }

img {
-webkit-transform: translate(100px,50px) rotate(-30deg);
}

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



img#bild1 {
position:absolute;top:0; left:0;
-webkit-transform: translate(100px,50px) skewY(15deg);
}
img#bild2 {
}
img#bild3 {
}
</style>

<img src="button_flyer.gif" id="bild1" />


CSS-TRANSFORMS 3D


CSS-TRANSFORMS

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

CSS-TRANSFORMS 3D

• Erweiterung der
2D-Transformation

• Beispiel:

Cover ow
Quelle: Flickr-Feed
CSS-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 ändert
vier CSS-Werte:
• Breite

• Höhe

• Hintergrundfarbe

• Abstand von oben


CSS-TRANSITIONS
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

• -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
! 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

• 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


CANVAS
HTML5


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


HTML5: CANVAS DEMO

<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 WEBAPPS
HTML5


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 Storage
sessionStorage.setItem("key", value);
localStorage.setItem("key", value);

// Ermitteln des Wertes zum Schlüssel key
var value = sessionStorage.getItem("key");

// Und nun wird der Wert wieder gelöscht
sessionStorge.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.


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";
"UPDATE zeiten SET stunden=? where projekt=?;",
[prokjekt,stunden], dataHandler, errorHandler);



function createTables(db) {
db.transaction(
'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(
'INSERT INTO zeiten (projekte, stunden)
VALUES
("iPhoneDevCon", "3.00");',
[], dataHandler, errorHandler);

}
);
}



db.transaction(
"SELECT * from zeiten",
[], // Werte-Array für ?-Platzhalter
dataHandler, errorHandler);
}
)

function dataHandler(transaction, results) {
var ausgabe = "Zeiten:nn";
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

Ergebnis der Spalte 'name' der i-ten
results.rows.item(i)['name']
Ergebniszeile
Anzahl der Zeilen die bei einem DELETE oder
results.rowAﬀected
UPDATE Befehl betroﬀen waren
Eindeutige ID der letzten Einfüge-Aktion durch
results.insertId
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



• BeispielhafterInhalt
Datei mit Namen “demo.manifest“
CACHE MANIFEST

css/style.css
js/script.js
img/bild1.png
kontakt.html
http://www.iphonedevcon.de/images/header.gif

• Referenzierung im HTML
<html manifest=“demo.manifest“>



• 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 & VIDEO
HTML5


HTML5: VIDEO & AUDIO
• Einbettenvon 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


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



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



media.paused
media.ended
media.defaultPlaybackRate [ = value ]
media.played
media.play()
media.pause()
media.duration
media.currentTime [ = value ]
media.startTime
media.currentSrc
media.error

loadstart, progress, suspendload, error, networkState, play, pause,
loadedmetadata, readyState, loadeddata, waiting, playing, canplay,
canplaythrough, seeking, seeked, ended! ratechange, volumechange
,


• 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 API
HTML5


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 - W3C
http://dev.w3.org/html5/spec/Overview.html

• W3C - CSS Working Group (WG)
http://www.w3.org/Style/CSS/current-work

• WebKit Specs
http://www.webkit.org/specs/

• Apple Developer Connection
http://developer.apple.com


NOCH FRAGEN?
gerne auch per Mail:
patrick.lobacher@typofaktum.de


Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (11)

Ähnlich wie Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone

Ähnlich wie Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone (20)

Mehr von die.agilen GmbH

Mehr von die.agilen GmbH (20)

Webapplikationen der Zukunft - HTML5 und CSS3 auf dem iPhone