iPhone WebApp Entwicklung von A - Z

iPhone WebApps und optimierte Seiten (mit TYPO3) 11.10.2009 / München / TYPO3camp Patrick Lobacher / Alexander Ebner net-o-graphic | typofaktum / FTI

Alexander Ebner Web-Developer FTI Frosch Touristik GmbH (www.fti.de) Schwerpunkte: TYPO3 und iPhone-Entwicklung Autor (www.ebner-lobacher.de) Organisator TYPO3camp Munich https://www.xing.com/pro le/Alexander_Ebner Mobile Webdesign: RIA's für iPhone, Android & Co. 2

Danke Patrick! Diese Session umfasst 171 Slides Der größte Teil der Slides stammt von Patrick Lobacher Wir haben die Session in vier Teilen bereits auf der iPhoneDevCon und der RIA-World gehalten Patrick ist schuld :-) An allem! Danke Pat Mobile Webdesign: RIA's für iPhone, Android & Co. 3

Patrick Lobacher und Alexander Ebner Broschiert: 324 Seiten Verlag: Open Source Press; Auﬂage: 1 (Juni 2009) Sprache: Deutsch ISBN-10: 3937514864 ISBN-13: 978-3937514864 Mobile Webdesign: RIA's für iPhone, Android & Co. 4

ACHTUNG! Unverschämte Eigenwerbung :-) Patrick Lobacher und Alexander Ebner Broschiert: 324 Seiten Verlag: Open Source Press; Auﬂage: 1 (Juni 2009) Sprache: Deutsch ISBN-10: 3937514864 ISBN-13: 978-3937514864 Mobile Webdesign: RIA's für iPhone, Android & Co. 4

Agenda Mobile Webdesign: RIA's für iPhone, Android & Co. 5

Agenda Das Userinterface Mobile Webdesign: RIA's für iPhone, Android & Co. 5

Agenda Das Userinterface Übersicht über die Webkit Engine Mobile Webdesign: RIA's für iPhone, Android & Co. 5

Warum iPhone Erstes Mobil-Telefon mit „richtigem“ Browser Genügend Erfahrungswerte WebKit-Engine wird auch auf anderen Handys eingesetzt Das Gerät ist nicht so wichtig - die Paradigmen lassen sich genauso bei allen anderen anwenden Verbreitung des iPhone Uns gefällts ;-) Mobile Webdesign: RIA's für iPhone, Android & Co. 6

Mock Ups bauen Am Anfang steht das Mock Up bzw. der Klickdummy Testen Sie ausführlich: Sind die Bedienelemente groß genug Ist die Navigation intuitiv und nachvollziehbar Wird die maximale Breite nicht überschritten Ist die Struktur programmiertechnisch abzubilden Mobile Webdesign: RIA's für iPhone, Android & Co. 7

Wie bastel ich mir ein Mock Up? Photoshop http://www.teehanlax.com/blog/?p=447 http://www.smashingmagazine.com/2008/11/26/iphone-psd-vector-kit/ Mobile Webdesign: RIA's für iPhone, Android & Co. 8

Handarbeit mit Zeichenstift http://www.designcommission.com/shop/iphone-stencil-kit/ Mobile Webdesign: RIA's für iPhone, Android & Co. 9

Warum Webseiten optimieren? Der Mobile Safari ist ein vollwertiger Browser Selbe Rendering-Engine wie beim Desktop- Browser (mehr dazu in Vortrag 3) Ansprechen der integrierten Funktionen (Telefon, Maps, Mail) Optimale Darstellung beim Aufruf der Seite Mobile Webdesign: RIA's für iPhone, Android & Co. 10

Optimierung vs. Dedizierung Optimieren der bestehenden Seite Eine dedizierte Seite für das iPhone / iPod touch Mobile Webdesign: RIA's für iPhone, Android & Co. 11

Vorteile einer optimierten Seite Bestehender Content kann übernommen werden. Wartung einfacher, da nur einmal nötig. Besucher haben immer die selbe Seite vor sich. Weniger Programmier- aufwand Mobile Webdesign: RIA's für iPhone, Android & Co. 12

Vorteile einer dedizierten Seite Es muss nur für einen Browser programmiert werden. Bedenkenloser Einsatz von CSS3, Canvas etc. Look & Feel von nativen iPhone-Anwendungen möglich. Leichtere Navigation Mobile Webdesign: RIA's für iPhone, Android & Co. 13

Optimierung WebApp Aufwand Content Darstellung Usability Look & Feel Mobile Webdesign: RIA's für iPhone, Android & Co. 14

Mobile Webdesign: RIA's für iPhone, Android & Co. 15

Optimierung bestehender Seiten Mobile Webdesign: RIA's für iPhone, Android & Co. 15

Der Viewport Im Gegensatz zu einem Desktop Browser ist der physikalische Viewport beim Mobile Safari fest vorgegeben. Mobile Webdesign: RIA's für iPhone, Android & Co. 16

Der Default-Viewport beträgt 980 Pixel. Die Default-Skalierung beträgt 1.0. Beide Werte können über ein Metatag beeinﬂusst werden. Mobile Webdesign: RIA's für iPhone, Android & Co. 17

980px Mobile Webdesign: RIA's für iPhone, Android & Co. 18

980px 630px Mobile Webdesign: RIA's für iPhone, Android & Co. 18

Viewport Metatag Optionen (Default; Min - Max) Initiale Skalierung: initial-scale (1.0; 0.01 - 10) Skalierung durch User möglich: user-scale (yes; no yes) Minimale Skalierung: minimal-scale (0.25; 0.01 - 10) Maximale Skalierung: maximal-scale (1.6; 0.01 - 10) Mobile Webdesign: RIA's für iPhone, Android & Co. 20

iPhone Applikationen ansprechen Telefon, Maps, Mail 22

Telefon Ohne Umwege von der Kontaktseite zum Telefongespräch Mobile Webdesign: RIA's für iPhone, Android & Co. 23

Telefonnummern werden automatisch erkannt Die Automatik kann mit <meta name=“format-detection“ content=“telephone-no“> deaktiviert werden Mobile Webdesign: RIA's für iPhone, Android & Co. 24

<a href=“tel://08912345677“>Ruf mich an</a> Mobile Webdesign: RIA's für iPhone, Android & Co. 25

Google Maps Adressen visualisieren Mobile Webdesign: RIA's für iPhone, Android & Co. 26

Sie können: Zu einer Adresse verlinken Zu einer Route verlinken Links zu Google Maps werden automatisch mit der Maps-Applikation geöffnet Mobile Webdesign: RIA's für iPhone, Android & Co. 27

Beispiele <a href="http://maps.google.com/maps?q=berlin"> Berlin </a> <a href="http://maps.google.com/maps?q=torstrasse+7+10178+berlin"> Torstrasse 7, 10178 Berlin </a> <a href="http://maps.google.com/maps?daddr=Berlin&saddr=Wien"> Von Berlin nach Wien </a> Mobile Webdesign: RIA's für iPhone, Android & Co. 28

E-Mail Schneller Kontakt Mobile Webdesign: RIA's für iPhone, Android & Co. 29

mailto:// Links funktionieren wie bei einem Desktop-System und starten die Mail-Anwendung <a href=“mailto:aebner@ebner-lobacher.de“>A.Ebner</a> Mobile Webdesign: RIA's für iPhone, Android & Co. 30

<a href="mailto:foo@example.com? cc=bar@example.com& bcc=bot@example.com& subject=Hallo& body=Guten Tag!">E-Mail schicken</a> Mobile Webdesign: RIA's für iPhone, Android & Co. 31

Fullscreen Mode Von einer Applikation nicht zu unterscheiden (ausser von der Ladezeit...) 32

Fullscreen Metatag einbauen Bookmark auf Homescreen erstellen Mobile Webdesign: RIA's für iPhone, Android & Co. 33

Eigenes Stylesheet für das iPhone Wie erkenne ich das iPhone? 35

Conditional CSS Überprüfung auf: Nur Screen-Ausgabe maximale Bildschirmgröße von 480 Pixel <link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet"> <link media="screen and (min-device-width: 481px)" href="not-small-device.css" type="text/css" rel="stylesheet"> Mobile Webdesign: RIA's für iPhone, Android & Co. 36

Innerhalb einer CSS Datei sind ebenfalls Conditions möglich. @media screen and (min-device-width: 481px) { .content {width: 800px;} } Mobile Webdesign: RIA's für iPhone, Android & Co. 37

Browser Erkennung mit User-Agent Mozilla/5.0 (iPhone; U; CPU like Mac OS X; de-de) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3 Mobile Webdesign: RIA's für iPhone, Android & Co. 38

Der User-Agent setzt sich aus folgenden Informationen zusammen: (iPhone; U; CPU like Mac OS X; de-de) Die System-Plattform und Sprache. AppleWebKit/420.1 Die Web Kit engine build Nummer. Version/3.0 Die Safari Version. Mobile/4A93 Die Mobile Versionsnummer. Safari/419.3 Die Safari build Nummer. Mobile Webdesign: RIA's für iPhone, Android & Co. 39

Ein Beispiel: Erkennung des Browsers mit PHP: <?php $ua = $_SERVER['HTTP_USER_AGENT']; if((strstr($ua, 'iPhone') || (strstr($ua, 'iPod')) { echo "Das ist ein iphone oder ein iPod Touch"; } else { echo "Das ist etwas anderes"; } ?> Mobile Webdesign: RIA's für iPhone, Android & Co. 40

iPhone Webapplikation Mobile Webdesign: RIA's für iPhone, Android & Co. 41

Zielsetzung Intuitive Bedienung Look & Feel einer nativen iPhone Applikation Moderate Ladezeiten Mobile Webdesign: RIA's für iPhone, Android & Co. 42

Die iPhone-Ober äche - Listview Mobile Webdesign: RIA's für iPhone, Android & Co. 43

Nutzen Sie Frameworks Mobile Webdesign: RIA's für iPhone, Android & Co. 44

Nutzen Sie Frameworks Größe Geschwind Dokument Erweiterbar Produkt Lizenz Features Experience Code in kB igkeit ation keit Dashcode Apple 156 +- ++ ++ ++ +- - iUI BSD 16 ++ + ++ ++ + ++ CiUI MIT 16 +++ - + - +- + GPL UiUIKit 24 +- + - - +- ++ v3 WebApp.Net BSD 36 - +++ + +++ - + jQTouch MIT 12 + 57 ++ +++ ++ ++ ++ ++ Mobile Webdesign: RIA's für iPhone, Android & Co. 44

iUI - iPhone User Interface Entwickelt von Joe Hewitt Erstellt Navigationsmenus mit Hilfe von JSON (JavaScript Object Notation) Erzeugung vieler Teile des Interfaces mit Canvas Event-Behandlung des Bewegungssensors (Lageerkennung für Landscape-Modus) Look & Feel des iPhone Betriebssystems http://code.google.com/p/iui/ Mobile Webdesign: RIA's für iPhone, Android & Co. 45

Einbinden von iUI iUI besteht aus: CSS-Datei (iui.css bzw. iuix.css) JavaScript-Datei (iui.js bzw. iuix.js) 16 Gra ken Die iuix.* Dateien sind die komprimierten Versionen. Um iUI einzubinden, müssen nur eine CSS- und eine JavaScript-Datei im Header der Webseite eingebunden werden. Mobile Webdesign: RIA's für iPhone, Android & Co. 46

Das Grundgerüst <!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> <title>iPhoneDevCon</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="viewport" content="width=320; initial-scale=1.0; maximum- scale=1.0; user-scalable=0;"/> <style type="text/css" media="screen">@import "lib/iUI/iui.css";</style> <script type="application/x-javascript" src="lib/iUI/iui.js"></script> </head> <body style="overﬂow:hidden;"> </body> </html> style="overﬂow:hidden;" sorgt dafür, das zu breite Inhalte einfach abgeschnitten werden. Mobile Webdesign: RIA's für iPhone, Android & Co. 47

Titel-Leiste <div class="toolbar"> <h1 id="pageTitle">Test</h1> <a id="backButton" class="button" href="#"></a> <a class="button" href="#searchForm">Suche</a> </div> Mobile Webdesign: RIA's für iPhone, Android & Co. 48

Listennavigation hinzufügen <ul id="home" title="iPhoneDevCon" selected="true"> <li><a href="#zielgruppe">Zielgruppe</a></li> <li><a href="#referenten">Referenten</a></li> <li><a href="#programm">Programm</a></li> <li><a href="#veranstaltungsort"> Veranstaltungsort</a></li> </ul> Mobile Webdesign: RIA's für iPhone, Android & Co. 49

Weitere Ebenen in der Navigation <ul id="home" title="iPhoneDevCon" selected="true"> <li><a href="#zielgruppe">Zielgruppe</a></li> <li><a href="#referenten">Referenten</a></li> <li><a href="#programm">Programm</a></li> <li><a href="#veranstaltungsort"> Veranstaltungsort</a></li> </ul> <ul id="programm" title="Programm"> <li><a href="#keynote">Keynote</a></li> <li><a href="#mobileusability">mobile Usability</a></li> <li><a href="#casestudy1">Case Study 1</a></li> <li><a href="#casestudy2">Case Study 2</a></li> ... </ul> Um Listenelemente zu gruppieren, fügen Sie ein Element mit der Klasse „group“ ein. <li class=“group“>Gruppentitel</li> Mobile Webdesign: RIA's für iPhone, Android & Co. 50

Verlinkung Lädt einen Abschnitt Interner Link der im selben <a href=“#abschnitt“> Dokument deﬁniert ist Lädt einen Abschnitt AJAX URL aus einem externen <a href=“abschnitt.html“> Dokument via AJAX Lädt einen Abschnitt AJAX URL aus einem externen Dokument via AJAX <a href=“abschnitt.html“ target=“_replace“> Replace und ersetzt den aufrufenden Teil Lädt eine externe URL Externe URL anstelle des bisherigen <a href=“abschnitt.html“ target=“_self“> Inhalts Mobile Webdesign: RIA's für iPhone, Android & Co. 52

Zielseiten, die mit AJAX URL und AJAX URL Replace aufgerufen werden, enthalten nur den Inhalt, der hinzugefügt wird. Mobile Webdesign: RIA's für iPhone, Android & Co. 53

Lange Navigation nachladen Inhalt menu2.html <ul id="home" title="iPhoneDevCon" <li><a href="#infos">Infos anfordern</a></li> selected="true"> <li><a href="#downloads">Downloads</a></li> <li><a href="#zielgruppe">Zielgruppe</a></li> <li><a href="#presse">Presse</a></li> <li><a href="#referenten">Referenten</a></li> <li><a href="#programm">Programm</a></li> <li><a href="#veranstaltungsort"> Veranstaltungsort </a></li> <li><a href="menu2.html" target="_replace"> Mehr... </a></li> </ul> Mobile Webdesign: RIA's für iPhone, Android & Co. 54

Panels Inhaltsseiten bzw. Zeilseiten werden als Panels bezeichnet. Sie bestehen aus einem DIV-Container mit der Klasse „panel“ Mobile Webdesign: RIA's für iPhone, Android & Co. 56

Darstellungsarten der Panels Mobile Webdesign: RIA's für iPhone, Android & Co. 57

Darstellungsarten der Panels <div id="veranstaltungsort" class="panel" title="Veranstaltungsort"> <h2>Veranstaltungsort</h2> <p>Das Hotel verfügt über 500 [...]</p> </div> Mobile Webdesign: RIA's für iPhone, Android & Co. 57

Darstellungsarten der Panels <div id="zielgruppe" class="panel" title="Zielgruppe"> <h2>Zielgruppe</h2> <ﬁeldset> <p class="ptext">Die diesjährige iPhone developer conference vom [...]</p> </ﬁeldset> </div> Mobile Webdesign: RIA's für iPhone, Android & Co. 58

Verwendung von Fieldsets in Panels .panel p.ptext { text-align: left; padding: 0 10px 0 10px; } .panel > h2 { margin: 3px 0 10px 10px; } Mobile Webdesign: RIA's für iPhone, Android & Co. 59

Zusätzliche Stylesheets immer in eine eigene Datei! Mobile Webdesign: RIA's für iPhone, Android & Co. 60

Verwendung von Reihen <div id="referenten" class="panel"title="Referenten"> <h2>Referenten</h2> <ﬁeldset> <div class="row"> <p class="ptext"> <b>Patrick Lobacher</b><br /> net-o-graphic @ new media solution </p> </div> <div class="row"> <p class="ptext"> <b>Alexander Ebner</b><br /> CoCo new media GmbH</p> </div> [...] </ﬁeldset> </div> Mobile Webdesign: RIA's für iPhone, Android & Co. 61

Formulare und Dialoge <div id="infos" class="panel" title="Infos anfordern"> <form id="infos1" title="Infos" class="panel" selected="true"> <h2>Infos anfordern</h2> <fieldset> <div class="row"> <label>Per Mail</label> <div class="toggle" onclick=""><span class="thumb"></span> <span class="toggleOn">AN</span><span class="toggleOff">AUS</span></div> </div> <div class="row"> <label>E-Mail:</label><input type="text" name="email" value="aebner@ebner-lobacher.de"/> </div> </fieldset> <fieldset> <div class="row"> <label>Per SMS</label> <div class="toggle" onclick="" toggled="true"><span class="thumb"></span> <span class="toggleOn">AN</span><span class="toggleOff">AUS</span></div> </div> <div class="row"> <label>Telefon:</label><input type="text" name="telefon" value="01721234567"/> </div> </fieldset> <a class="whiteButton" type="submit" href="#">Einstellungen ändern</a> </form> </div> Mobile Webdesign: RIA's für iPhone, Android & Co. 62

Formulare und Dialoge Mobile Webdesign: RIA's für iPhone, Android & Co. 63

Suchdialog <form id="searchForm" class="dialog" action="search.php"> <ﬁeldset> <h1>Suchformular</h1> <a class="button leftButton" type="cancel">Abbrechen</a> <a class="button blueButton" type="submit">Suche</a> <label class="dlabel">Suchbegriff</label> <input class="dinput" type="text" name="search"> <select name="Suche auf:" size="1"> <option value="">iPhoneDevCon</option> <option value="google">Google</option> <option value="apple">Apple</option> </select> </ﬁeldset> </form> Mobile Webdesign: RIA's für iPhone, Android & Co. 64

Select-Box select { box-sizing: border-box; -webkit-box-sizing: border:box; width: 100%; margin: 15px 0 0 0; padding: 6px 6px 6px 144px; font-size: 16px; font-weight: normal; } Mobile Webdesign: RIA's für iPhone, Android & Co. 66

Webkit Mobile Webdesign: RIA's für iPhone, Android & Co. 67

Safari und WebKit Die Macht der WebKit-Engine 68

Safari und WebKit Mac OS X Die Macht der WebKit-Engine 68

Safari und WebKit Mac OS X Windows Die Macht der WebKit-Engine 68

Safari und WebKit Mac OS X Windows iPhone OS Die Macht der WebKit-Engine 68

Safari und WebKit Mac OS OS Windows iPhone X WebKit Die Macht der WebKit-Engine 68

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 unterstützt die meisten Web-Standards Die Macht der WebKit-Engine 69

WebKit WebKit wird (dank OpenSource-Lizenz) in weiteren Anwendungen integriert: Google Chrome Nokia Symbian OS (S60) Adobe AIR Google ANDROID PalmOS, Blackerry OS, ... iPhone OS enthält neueste WebKit Version Quelle: http://www.webkit.org Die Macht der WebKit-Engine 70

Technischer Aufbau WebKit Die Macht der WebKit-Engine 71

Technischer Aufbau WebKit Safari-Webbrowser Die Macht der WebKit-Engine 71

Technischer Aufbau WebKit Safari-Webbrowser Webkit Die Macht der WebKit-Engine 71

Technischer Aufbau WebKit Safari-Webbrowser Webkit Drosera (JavaScript Debugger) Die Macht der WebKit-Engine 71

Technischer Aufbau WebKit Safari-Webbrowser Webkit Drosera (JavaScript Debugger) SunSpider (Benchmark Suite) Die Macht der WebKit-Engine 71

Technischer Aufbau WebKit Safari-Webbrowser Webkit Drosera (JavaScript Debugger) WebCore SunSpider (Benchmark Suite) Die Macht der WebKit-Engine 71

Technischer Aufbau WebKit Safari-Webbrowser Webkit Drosera (JavaScript Debugger) WebCore JavaScriptCore SunSpider (SquirrelFish) (Benchmark Suite) Die Macht der WebKit-Engine 71

WebKit - Features Mobile Webdesign: RIA's für iPhone, Android & Co. 72

WebKit - Features HTML 4.01 / teilweise HTML 5 Mobile Webdesign: RIA's für iPhone, Android & Co. 72

WebKit - Features HTML 4.01 / teilweise HTML 5 XHTML 1.0 / 1.1 Mobile Webdesign: RIA's für iPhone, Android & Co. 72

WebKit - Features HTML 4.01 / teilweise HTML 5 XHTML 1.0 / 1.1 CSS 2.1 vollständig und CSS 3 teilweise Mobile Webdesign: RIA's für iPhone, Android & Co. 72

WebKit - Features HTML 4.01 / teilweise HTML 5 XHTML 1.0 / 1.1 CSS 2.1 vollständig und CSS 3 teilweise JavaScript 1.4 (inkl. kompletter DOM-Unterstützung) Mobile Webdesign: RIA's für iPhone, Android & Co. 72

WebKit - Features HTML 4.01 / teilweise HTML 5 XHTML 1.0 / 1.1 CSS 2.1 vollständig und CSS 3 teilweise JavaScript 1.4 (inkl. kompletter DOM-Unterstützung) Canvas Mobile Webdesign: RIA's für iPhone, Android & Co. 72

WebKit - Features HTML 4.01 / teilweise HTML 5 XHTML 1.0 / 1.1 CSS 2.1 vollständig und CSS 3 teilweise JavaScript 1.4 (inkl. kompletter DOM-Unterstützung) Canvas AJAX (XMLHTTP-Request) / Web 2.0 Mobile Webdesign: RIA's für iPhone, Android & Co. 72

WebKit - Features HTML 4.01 / teilweise HTML 5 XHTML 1.0 / 1.1 CSS 2.1 vollständig und CSS 3 teilweise JavaScript 1.4 (inkl. kompletter DOM-Unterstützung) Canvas AJAX (XMLHTTP-Request) / Web 2.0 SVG Mobile Webdesign: RIA's für iPhone, Android & Co. 72

WebKit - Features HTML 4.01 / teilweise HTML 5 XHTML 1.0 / 1.1 CSS 2.1 vollständig und CSS 3 teilweise JavaScript 1.4 (inkl. kompletter DOM-Unterstützung) Canvas AJAX (XMLHTTP-Request) / Web 2.0 SVG HTLM 5 Oﬄine Data Storage Mobile Webdesign: RIA's für iPhone, Android & Co. 72

WebKit - Features HTML 4.01 / teilweise HTML 5 XHTML 1.0 / 1.1 CSS 2.1 vollständig und CSS 3 teilweise JavaScript 1.4 (inkl. kompletter DOM-Unterstützung) Canvas AJAX (XMLHTTP-Request) / Web 2.0 SVG HTLM 5 Oﬄine Data Storage HTML 5 Audio und Video Element Mobile Webdesign: RIA's für iPhone, Android & Co. 72

WebKit - Features HTML 4.01 / teilweise HTML 5 XHTML 1.0 / 1.1 CSS 2.1 vollständig und CSS 3 teilweise JavaScript 1.4 (inkl. kompletter DOM-Unterstützung) Canvas AJAX (XMLHTTP-Request) / Web 2.0 SVG HTLM 5 Oﬄine Data Storage HTML 5 Audio und Video Element HTML 5 Geolocation API Mobile Webdesign: RIA's für iPhone, Android & Co. 72

WebKit | CSS 3 Mobile Webdesign: RIA's für iPhone, Android & Co. 73

WebKit | CSS 3 CSS - Animations hardware beschleunigt Key-Frame-Animationen Mobile Webdesign: RIA's für iPhone, Android & Co. 73

WebKit | CSS 3 CSS - Animations hardware beschleunigt Key-Frame-Animationen CSS-Transformations skalieren, rotieren, verzerren, versetzen, Transformations- Matrix 2D und 3D Mobile Webdesign: RIA's für iPhone, Android & Co. 73

WebKit | CSS 3 CSS - Animations hardware beschleunigt Key-Frame-Animationen CSS-Transformations skalieren, rotieren, verzerren, versetzen, Transformations- Matrix 2D und 3D CSS-Transitions Übergänge zwischen CSS-Eigenschaften Mobile Webdesign: RIA's für iPhone, Android & Co. 73

RIA | WebKit | CSS Demo Mobile Webdesign: RIA's für iPhone, Android & Co. 74

WebKit | JavaScript - Events Mobile Webdesign: RIA's für iPhone, Android & Co. 75

WebKit | JavaScript - Events Multi-Touch-Events Erkennung der Finger Mobile Webdesign: RIA's für iPhone, Android & Co. 75

WebKit | JavaScript - Events Multi-Touch-Events Erkennung der Finger Gestures-Events Erkennung der Finger Unterscheidung der Finger Für beliebige Zeile de nierbar Mobile Webdesign: RIA's für iPhone, Android & Co. 75

WebKit | JavaScript - Events Multi-Touch-Events Erkennung der Finger Gestures-Events Erkennung der Finger Unterscheidung der Finger Für beliebige Zeile de nierbar Damit beliebige UI-Gesten möglich Drag&Drop, Vergrößern, Bewegen, Slide, ... Mobile Webdesign: RIA's für iPhone, Android & Co. 75

RIA | WebKit | Touch-Events & CSS Demo Mobile Webdesign: RIA's für iPhone, Android & Co. 76

WebKit | HTML 5 Audio und Video 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 Mobile Webdesign: RIA's für iPhone, Android & Co. 77

WebKit | Audio/Video/CSS-Demo Mobile Webdesign: RIA's für iPhone, Android & Co. 78

WebKit | HTML 5 Datenbank HTML5 Client-side Database Storage vollständige, transaktionale SQLite Datenbank auf dem Client Asychrones Datenbank-Handling API per JavaScript ansprechbar Update mit Online-Datenbank möglich Mobile Webdesign: RIA's für iPhone, Android & Co. 79

WebKit | HTML 5 Application Cache Cache Manifest Oﬄine Speicherung der kompletten Applikation HTML-Dateien (lokal oder remote) Bilder JavaScript CSS JavaScript API für Updates Mobile Webdesign: RIA's für iPhone, Android & Co. 80

WebKit | HTML 5 Geolocation API JavaScript-API Zugriﬀ auf Geodaten GPS-Daten Triangulation Longitude, Latitude, Genauigkeit Nachfrage im Browser Tracking möglich Mobile Webdesign: RIA's für iPhone, Android & Co. 81

WebKit | SVG Scalable Vector Graphics W3C-Standard De nition von Vektorgra ken mittels XML Animationen mittels SMIL Mobile Webdesign: RIA's für iPhone, Android & Co. 82

WebKit | HTML 5 Canvas Standardisiert von der WHATWG (W3C) „Virtuelle Zeichen äche“ Erstellung von Vektorgra ken und Animationen <canvas>-Element Zeichnen, Bilder, Verläufe, Spiegelungen, Transparenzen, Muster Transformationen, Kompositionen JavaScript API Mobile Webdesign: RIA's für iPhone, Android & Co. 83

Open Standards - One Web Alle hier vorgestellten Eigenschaften und APIs sind W3C - Standards bzw. als DRAFT eingereicht: http://www.webkit.org/specs/ WORKING DRAFT (Entwurf ) - daher Pre x -webkit bei CSS-Eigenschaften Ziel: Recommendations Mobile Webdesign: RIA's für iPhone, Android & Co. 84

CSS-Transforms Die Macht der WebKit-Engine 85

CSS-Transforms Hardware beschleunigte Transformationen Die Macht der WebKit-Engine 85

CSS-Transforms Hardware beschleunigte Transformationen Translate (Bewegen) Die Macht der WebKit-Engine 85

CSS-Transforms Hardware beschleunigte Transformationen Translate (Bewegen) Scale (Skalieren) Die Macht der WebKit-Engine 85

CSS-Transforms Hardware beschleunigte Transformationen Translate (Bewegen) Scale (Skalieren) Rotate (Drehen) Die Macht der WebKit-Engine 85

CSS-Transforms Hardware beschleunigte Transformationen Translate (Bewegen) Scale (Skalieren) Rotate (Drehen) Skew (Verzerren) Die Macht der WebKit-Engine 85

CSS-Transform: Koordinatensystem Jedes Objekt hat sein eigenes Koordinatensystem 0 X-Achse Y-Achse Die Macht der WebKit-Engine 86

CSS-Transform: Ausgangspunkt (Origin) Jedes HTML-Element kann ein Objekt sein Ausgangspunkt ist die Mitte des Objekts Die Macht der WebKit-Engine 87

CSS-Transform: Ausgangspunkt (Origin) 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 Die Macht der WebKit-Engine 88

CSS-Transforms: Translate Bewegt das Objekt Angabe in Pixel oder Prozent Prozentangaben sind relativ zur Objekt-Box translate, translateX, translateY Die Macht der WebKit-Engine 89

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> Die Macht der WebKit-Engine 90

CSS-Transforms: translate(100px,50px) Die Macht der WebKit-Engine 91

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 Die Macht der WebKit-Engine 92

CSS-Transforms: Scale <style type="text/css" media="screen"> body { background-color:#000 } img { -webkit-transform: translate(100px,50px) scale(0.25); } </style> Die Macht der WebKit-Engine 93

CSS-Transforms: scale(0.25) Die Macht der WebKit-Engine 94

CSS-Transforms: scaleX(-0.70) Die Macht der WebKit-Engine 95

CSS-Transforms: Rotate Dreht das Objekt um den Ausgangspunkt Werte können als Grad oder Rad angegeben werden rotate 45° Die Macht der WebKit-Engine 96

CSS-Transforms: Rotate <style type="text/css" media="screen"> body { background-color:#000 } img { -webkit-transform: translate(100px,50px) rotate(-30deg); } </style> Die Macht der WebKit-Engine 97

CSS-Transforms: rotate(-30deg) Die Macht der WebKit-Engine 98

CSS-Transforms: Skew Verzerrt das Objekt um einen angegebenen Winkel Werte können als Grad oder Rad angegeben werden skew, skewX, skewY Die Macht der WebKit-Engine 99

CSS-Transforms: Skew <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" /> Die Macht der WebKit-Engine 100

CSS-Transforms: Skew Die Macht der WebKit-Engine 101

CSS-Transforms: 3D Die Macht der WebKit-Engine 102

CSS-Transforms: 3D Erweiterung der 2D-Transformation Die Macht der WebKit-Engine 102

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/ Die Macht der WebKit-Engine 102

CSS-Transform: 3D-Koordinatensystem Jedes Objekt hat sein eigenes Koordinatensystem 0 X-Achse Z-Achse Y-Achse Die Macht der WebKit-Engine 103

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) Die Macht der WebKit-Engine 104

CSS-Transforms: 3D -webkit-transform-style: at preserve-3d Die Macht der WebKit-Engine 105

CSS-Transforms: 3D -webkit-perspective: <tiefe> bringt Tiefe in die Szene, indem Elemente kleiner dargestellt werden, die weiter weg vom Betrachter sind Der Wert „tiefe“ gibt den Abstand des Betrachters zur Z-Ebene (z=0) an (Default: tiefe = 0) 100 500 Die Macht der WebKit-Engine 106

CSS-Transforms: 3D -webkit-transform-origin-z Positions des Ausgangspunktes auf der Z-Achse -webkit-backface-visibility: „visible“ (Default) oder „hidden“ Gibt an, ob die Rückseite eines Elements sichtbar sein soll Wenn „hidden“, dann ist das Element auch für Events nicht zugänglich Die Macht der WebKit-Engine 107

Agenda Safari und WebKit CSS-Transforms CSS-Transitions CSS-Animations Touch-Events, Gesture-Events Geolocation API HTML5 Audio und Video Die Macht der WebKit-Engine 108

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 Die Macht der WebKit-Engine 109

CSS-Transitions Tappen ändert vier CSS-Werte: Breite Höhe Hintergrundfarbe Abstand von oben Die Macht der WebKit-Engine 110

CSS-Transitions: Code <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'"> Die Macht der WebKit-Engine 111

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 Die Macht der WebKit-Engine 112

CSS-Transitions: Timing Function Die Macht der WebKit-Engine 113

CSS-Transitions: Timing Function cubic-bezier (P1x, P1y, P2x, P2y) Die Macht der WebKit-Engine 113

CSS-Transitions: Timing Function cubic-bezier (P1x, P1y, P2x, P2y) ease (0.25, 0.1, 0.25, 1.0) Die Macht der WebKit-Engine 113

CSS-Transitions: Timing Function cubic-bezier (P1x, P1y, P2x, P2y) ease (0.25, 0.1, 0.25, 1.0) linear (0.0, 0.0, 1.0, 1.0) Die Macht der WebKit-Engine 113

CSS-Transitions: Timing Function 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) Die Macht der WebKit-Engine 113

CSS-Transitions: Timing Function 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) Die Macht der WebKit-Engine 113

CSS-Transitions: Timing Function 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) Die Macht der WebKit-Engine 113

CSS-Animation Hardware beschleunigte Animationen Keyframe (Schlüsselbild) Animationen (@rule) Kontrolle möglich über: Dauer Anzahl und Art der Wiederholung Timing-Funktion Anfangsverzögerung Die Macht der WebKit-Engine 115

CSS-Animation: Schlüsselbilder Verwendung der @rule (CSS 2.0): @-webkit-keyframes 'slidedown' { 0% { top: 10px; } 30% { top: 150px; } 50% { top: 100px; } 80% { top: 200px; } 100% { top: 10px; } } Die Macht der WebKit-Engine 116

CSS-Animation: Code 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> Die Macht der WebKit-Engine 117

CSS-Animation Tappen startet die Animation Die Macht der WebKit-Engine 118

CSS-Animation -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) Die Macht der WebKit-Engine 119

CSS-Animation -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 Die Macht der WebKit-Engine 120

Touch-Events Für jeden einzelnen Finger: Die Macht der WebKit-Engine 122

Touch-Events Für jeden einzelnen Finger: touchstart Die Macht der WebKit-Engine 122

Touch-Events Für jeden einzelnen Finger: touchstart touchmove Die Macht der WebKit-Engine 122

Touch-Events Für jeden einzelnen Finger: touchstart touchmove touchend Die Macht der WebKit-Engine 122

Touch-Events Für jeden einzelnen Finger: touchstart touchmove touchend touchcancel Die Macht der WebKit-Engine 122

Touch-Events Regstrierung der Eventhandler im HTML: <div ontouchstart="touchStart(event);" ontouchmove="touchMove(event);" ontouchend="touchEnd(event);" ontouchcancel="touchCancel(event);" ></div> Regstrierung der Eventhandler im Javascript: element.addEventListener("touchstart", touchStart, false); element.addEventListener("touchmove", touchMove, false); element.addEventListener("touchend" touchEnd, false); element.addEventListener("touchcancel" touchCancel, false); Die Macht der WebKit-Engine 123

Touch-Events Beispiel für eine Handler-Funktion: function touchStart(event) { // Array mit allen Touches ermitteln - Zugriff mit .touches[i] var allTouches = event.touches; // Anzahl der Touches (Finger) var countTouches = event.touches.length; // Alle Touches für dieses Target (Element) var targetTouches = event.targetTouches; // Alle neuen Touches für dieses Event var changedTouches = event.changedTouches } Die Macht der WebKit-Engine 124

Touch-Events Alle drei Arrays (touches, targetTouches und changedTouches) haben zusätzliche Eigenschaften, die ausgewertet werden können: clientX, clientY (X- und Y-Koordinate der Berührung - relativ zum Viewport) screenX, screenY (X- und Y-Koordinate der Berührung - relativ zum Bildschirm) pageX, pageY (X- und Y-Koordinate der Berührung - relativ zur Seite) target (Ursprung der ersten Berührung) identi er (Eindeutige ID der Berührung) Die Macht der WebKit-Engine 125

Touch-Events: Beispiele Zwei-Finger-Tap: touchstart - 2 targetTouches kein touchmove touchend Swipe: touchstart touchmove (vorwiegend in X-Richtung) touchend Abbruch bei > 1 Finger oder Bewegung in Y-Richtung Die Macht der WebKit-Engine 126

Gesture-Events Bei zwei oder mehr Fingern: Die Macht der WebKit-Engine 127

Gesture-Events Bei zwei oder mehr Fingern: gesturestart Die Macht der WebKit-Engine 127

Gesture-Events Bei zwei oder mehr Fingern: gesturestart gesturechange Die Macht der WebKit-Engine 127

Gesture-Events Bei zwei oder mehr Fingern: gesturestart gesturechange gestureend Die Macht der WebKit-Engine 127

Gesture-Events Regstrierung der Eventhandler im HTML: <div ongesturestart="gestureStart(event);" ongesturechange="gestureChange(event);" ongestureend="gestureEnd(event);" ></div> Regstrierung der Eventhandler im Javascript: element.addEventListener("gesturestart", gestureStart, false); element.addEventListener("gesturechange", gestureChange, false); element.addEventListener("gestureend" gestureEnd, false); Die Macht der WebKit-Engine 128

Gesture-Events Beispiel für eine Handler-Funktion: function gestureStart(event) { // Ermittlung der Rotation seit Beginn des Gesture-Events // Einheit: Grad (im Uhrzeigersinn) var angle = event.rotation; // Abstand der Finger seit Beginn des Gesture-Events // < 1.0 enger zusammen, > 1.0 weiter auseinander var scale = event.scale; } Die Macht der WebKit-Engine 129

Default-Verhalten des Browsers Verwendung von preventDefault() um Default- Browserverhalten abzuschalten: function touchMove(event) { // Scrollen abschalten event.preventDefault(); } function gestureChange(event) { // Zoom abschalten event.preventDefault(); } Die Macht der WebKit-Engine 130

Beispiel http://www.n-o-g.de/i/rotate/ Die Macht der WebKit-Engine 131

Beispiel Die Macht der WebKit-Engine 132

HTML 5 Geolocation API Kapselung der Positionsermittlung GPS, WLAN, Bluetooth, o.ä. Ermittlung der aktuellen Position Nachfrage im Browser Tracking möglich Objekt: navigator.geolocation Die Macht der WebKit-Engine 134

HTML5 Geolocation API 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); Die Macht der WebKit-Engine 135

HTML5 Geolocation API 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; }; Die Macht der WebKit-Engine 136

HTML5 Audio und Video <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(); Die Macht der WebKit-Engine 138

HTML5 Audio und Video <video src=“sample.mov“ autoplay=“true“ auobuffer=“true“ width=“200“ height=“300“ poster=“vorschau.png“ loop=“true“ controls=“true“ > ... Fallback ... </video> Die Macht der WebKit-Engine 139

HTML5 Audio und 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 , Die Macht der WebKit-Engine 140

Unterstützte Video-Formate 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 Die Macht der WebKit-Engine 141

Data Storage Mobile Webdesign: RIA's für iPhone, Android & Co. 142

Agenda Daten Online Datenbanken SQL Vorgehensweise Rückgabe-Daten in HTML und JSON Oﬄine Datenbanken HTML5 Database storage HTML5 Application Cache Applikationen mit Online- und Ofﬂine-Datenbanken 143

Wo werden die Daten gespeichert? Applikationen mit Online- und Ofﬂine-Datenbanken 144

Wo werden die Daten gespeichert? Online ➡ Datenbank-Server aktuelle Daten allgemeine und öﬀentliche Daten private Daten (Benutzerdaten) Applikationen mit Online- und Ofﬂine-Datenbanken 144

Wo werden die Daten gespeichert? Online ➡ Datenbank-Server aktuelle Daten allgemeine und öffentliche Daten private Daten (Benutzerdaten) Offline ➡ iPhone Einstellungen Kon gurationen private Daten (Benutzerdaten) Cache Applikationen mit Online- und Offline-Datenbanken 144

Verschiedene Webapplikationstypen Applikationen mit Online- und Ofﬂine-Datenbanken 145

Verschiedene Webapplikationstypen Immer Online Keine Daten benötigt Daten müssen online vorliegen Applikationen mit Online- und Ofﬂine-Datenbanken 145

Verschiedene Webapplikationstypen Immer Online Keine Daten benötigt Daten müssen online vorliegen Immer Oﬄine Sensible private Daten zeitkritisch oder Einwegdaten Applikationen mit Online- und Ofﬂine-Datenbanken 145

Verschiedene Webapplikationstypen Immer Online Keine Daten benötigt Daten müssen online vorliegen Immer Offline Sensible private Daten zeitkritisch oder Einwegdaten Hybrid Einstellungen + Kon gurationen private und öffentliche Daten Update wenn online Applikationen mit Online- und Offline-Datenbanken 145

Online Datenverwaltung (Datenbank) Applikationen mit Online- und Ofﬂine-Datenbanken 147

Online Datenverwaltung (Datenbank) Speicherung von gleichartigen Daten Applikationen mit Online- und Ofﬂine-Datenbanken 147

Online Datenverwaltung (Datenbank) Speicherung von gleichartigen Daten Schneller und einfacher Zugriﬀ auf diese Daten Applikationen mit Online- und Ofﬂine-Datenbanken 147

Online Datenverwaltung (Datenbank) Speicherung von gleichartigen Daten Schneller und einfacher Zugriﬀ auf diese Daten Gute Möglichkeiten zur Selektion - generell gutes Handling Applikationen mit Online- und Ofﬂine-Datenbanken 147

Online Datenverwaltung (Datenbank) Speicherung von gleichartigen Daten Schneller und einfacher Zugriﬀ auf diese Daten Gute Möglichkeiten zur Selektion - generell gutes Handling Vielzahl an Produkten erhältlich (Kommerzielle, Open Source) Applikationen mit Online- und Ofﬂine-Datenbanken 147

Online Datenverwaltung (Datenbank) Speicherung von gleichartigen Daten Schneller und einfacher Zugriff auf diese Daten Gute Möglichkeiten zur Selektion - generell gutes Handling Vielzahl an Produkten erhältlich (Kommerzielle, Open Source) Direkter Zugriff von JavaScript ist nicht möglich! Applikationen mit Online- und Offline-Datenbanken 147

Online Datenverwaltung (Datenbank) Speicherung von gleichartigen Daten Schneller und einfacher Zugriff auf diese Daten Gute Möglichkeiten zur Selektion - generell gutes Handling Vielzahl an Produkten erhältlich (Kommerzielle, Open Source) Direkter Zugriff von JavaScript ist nicht möglich! Zugriff mittels Middleware und SQL Applikationen mit Online- und Offline-Datenbanken 147

Middleware Einsatz von Middleware (Serverseitige Scriptsprache) Möglich sind: PHP, Perl, ASP, ColdFusion, JSP, ... Unsere Beispiele: PHP (im Zusammenspiel mit MySQL) PHP kommuniziert mit der Datenbank mit SQL Applikationen mit Online- und Ofﬂine-Datenbanken 148

Ablauf der Datenbank-Kommunikation Applikationen mit Online- und Ofﬂine-Datenbanken 149

Ablauf der Datenbank-Kommunikation Remote-Server 1 Applikationen mit Online- und Ofﬂine-Datenbanken 149

Ablauf der Datenbank-Kommunikation Remote-Server 1 PHP (Middleware) Applikationen mit Online- und Ofﬂine-Datenbanken 149

Ablauf der Datenbank-Kommunikation Remote-Server 1 PHP (Middleware) 2 MySQL Datenbank Applikationen mit Online- und Ofﬂine-Datenbanken 149

Ablauf der Datenbank-Kommunikation Remote-Server 1 PHP (Middleware) 2 3 MySQL Datenbank Applikationen mit Online- und Ofﬂine-Datenbanken 149

Ablauf der Datenbank-Kommunikation Remote-Server 1 PHP (Middleware) 4 2 3 MySQL Datenbank Applikationen mit Online- und Ofﬂine-Datenbanken 149

SQL - Structured Query Language Applikationen mit Online- und Ofﬂine-Datenbanken 150

SQL - Structured Query Language Standardisierte Datenbanksprache Applikationen mit Online- und Ofﬂine-Datenbanken 150

SQL - Structured Query Language Standardisierte Datenbanksprache Nahezu alle Datenbank-Systeme verstehen SQL Applikationen mit Online- und Ofﬂine-Datenbanken 150

SQL - Structured Query Language Standardisierte Datenbanksprache Nahezu alle Datenbank-Systeme verstehen SQL Wichtigste Befehle: Applikationen mit Online- und Ofﬂine-Datenbanken 150

SQL - Structured Query Language Standardisierte Datenbanksprache Nahezu alle Datenbank-Systeme verstehen SQL Wichtigste Befehle: Anlegen von Tabellen (CREATE TABLE) Applikationen mit Online- und Ofﬂine-Datenbanken 150

SQL - Structured Query Language Standardisierte Datenbanksprache Nahezu alle Datenbank-Systeme verstehen SQL Wichtigste Befehle: Anlegen von Tabellen (CREATE TABLE) Löschen von Tabellen (DROP TABLE) Applikationen mit Online- und Ofﬂine-Datenbanken 150

SQL - Structured Query Language Standardisierte Datenbanksprache Nahezu alle Datenbank-Systeme verstehen SQL Wichtigste Befehle: Anlegen von Tabellen (CREATE TABLE) Löschen von Tabellen (DROP TABLE) Einfügen von Datensätzen (INSERT) Applikationen mit Online- und Ofﬂine-Datenbanken 150

SQL - Structured Query Language Standardisierte Datenbanksprache Nahezu alle Datenbank-Systeme verstehen SQL Wichtigste Befehle: Anlegen von Tabellen (CREATE TABLE) Löschen von Tabellen (DROP TABLE) Einfügen von Datensätzen (INSERT) Löschen von Datensätzen (DELETE) Applikationen mit Online- und Ofﬂine-Datenbanken 150

SQL - Structured Query Language Standardisierte Datenbanksprache Nahezu alle Datenbank-Systeme verstehen SQL Wichtigste Befehle: Anlegen von Tabellen (CREATE TABLE) Löschen von Tabellen (DROP TABLE) Einfügen von Datensätzen (INSERT) Löschen von Datensätzen (DELETE) Aktualisieren von Datensätzen (UPDATE) Applikationen mit Online- und Ofﬂine-Datenbanken 150

SQL - Structured Query Language Standardisierte Datenbanksprache Nahezu alle Datenbank-Systeme verstehen SQL Wichtigste Befehle: Anlegen von Tabellen (CREATE TABLE) Löschen von Tabellen (DROP TABLE) Einfügen von Datensätzen (INSERT) Löschen von Datensätzen (DELETE) Aktualisieren von Datensätzen (UPDATE) Abfrage von Datensätze (SELECT) Applikationen mit Online- und Ofﬂine-Datenbanken 150

Vorgehensweise: Beispiel-Datenbank Einfache Datenbank einer Zeiterfassung id projekt stunden 1 iPhoneDevCon 3.00 2 ... ... 3 ... ... Applikationen mit Online- und Ofﬂine-Datenbanken 151

Vorgehensweise: Initialisierung Verbindung zum Datenbankserver, Erstellen der Datenbank und Auswahl der Datenbank <?php // Verbindung zum Datenbankserver $res = mysql_connect('localhost', 'mysql_user', 'mysql_password'); // Anlegen der Datenbank mysql_query('CREATE DATABASE zeiterfassung', $res); // Auswahl der Datenbank $db = mysql_select_db('zeiterfassung', $res); ?> Applikationen mit Online- und Ofﬂine-Datenbanken 152

Vorgehensweise: Daten speichern Anlegen der Tabelle(n) und befüllen mit Daten <?php // Verbindung zum Datenbankserver $res = mysql_connect(...); // Anlegen der Tabelle mysql_query('CREATE TABLE zeiten (id INT, projekt VARCHAR(100), stunden FLOAT)'); // Befüllen der Tabelle mit Daten mysql_query('INSERT INTO zeiten (projekt, stunden) VALUES („iPhoneDevCon“, 3.00)'); ?> Applikationen mit Online- und Ofﬂine-Datenbanken 153

Vorgehensweise: Daten auslesen Auslesen der Daten und Rückgabe als HTML <?php // Verbindung zum Datenbankserver $res = mysql_connect(...); // Abfrage der Datenbank $zeiten = mysql_query('SELECT * FROM zeiten'); // Befüllen der Tabelle mit Daten while ($zeit = mysql_fetch_array($zeiten)) { echo „Projekt: „ . $zeit['projekt'] . „<br />“; echo „Aufwand: „ . $zeit['stunden'] . „Stunden <br />“; } ?> Applikationen mit Online- und Ofﬂine-Datenbanken 154

Vorgehensweise: Ergebnis HTML kann von der iPhone Web-Applikation direkt angezeigt werden: Projekt: iPhoneDevCon Aufwand: 3.00 Stunden Applikationen mit Online- und Ofﬂine-Datenbanken 155

Vorgehensweise: Ergebnis HTML kann von der iPhone Web-Applikation direkt angezeigt werden: Projekt: iPhoneDevCon Aufwand: 3.00 Stunden Nachteile: Applikationen mit Online- und Ofﬂine-Datenbanken 155

Vorgehensweise: Ergebnis HTML kann von der iPhone Web-Applikation direkt angezeigt werden: Projekt: iPhoneDevCon Aufwand: 3.00 Stunden Nachteile: Umformatierung schlecht möglich Applikationen mit Online- und Ofﬂine-Datenbanken 155

Vorgehensweise: Ergebnis HTML kann von der iPhone Web-Applikation direkt angezeigt werden: Projekt: iPhoneDevCon Aufwand: 3.00 Stunden Nachteile: Umformatierung schlecht möglich Weiterverarbeitung ebenfalls schwierig Applikationen mit Online- und Ofﬂine-Datenbanken 155

Vorgehensweise: Ergebnis HTML kann von der iPhone Web-Applikation direkt angezeigt werden: Projekt: iPhoneDevCon Aufwand: 3.00 Stunden Nachteile: Umformatierung schlecht möglich Weiterverarbeitung ebenfalls schwierig Darstellung und Logik vermischt Applikationen mit Online- und Ofﬂine-Datenbanken 155

Vorgehensweise: Ergebnis Applikationen mit Online- und Ofﬂine-Datenbanken 156

Vorgehensweise: Ergebnis Besser ist die Rückgabe eines Datenformats Applikationen mit Online- und Ofﬂine-Datenbanken 156

Vorgehensweise: Ergebnis Besser ist die Rückgabe eines Datenformats XML Universell Grosser Overhead Dadurch langsamer Applikationen mit Online- und Ofﬂine-Datenbanken 156

Vorgehensweise: Ergebnis Besser ist die Rückgabe eines Datenformats XML Universell Grosser Overhead Dadurch langsamer JSON Ebenso universell und exibel Kleiner Overhead Applikationen mit Online- und Ofﬂine-Datenbanken 156

JSON - JavaScript Object Notation Applikationen mit Online- und Ofﬂine-Datenbanken 157

JSON - JavaScript Object Notation Kompaktes Plainttext-Format zum Datenaustausch Applikationen mit Online- und Ofﬂine-Datenbanken 157

JSON - JavaScript Object Notation Kompaktes Plainttext-Format zum Datenaustausch Lesbar durch Mensch- und Maschine Applikationen mit Online- und Ofﬂine-Datenbanken 157

JSON - JavaScript Object Notation Kompaktes Plainttext-Format zum Datenaustausch Lesbar durch Mensch- und Maschine Nicht auf JavaScript beschränkt Applikationen mit Online- und Ofﬂine-Datenbanken 157

JSON - JavaScript Object Notation Kompaktes Plainttext-Format zum Datenaustausch Lesbar durch Mensch- und Maschine Nicht auf JavaScript beschränkt Implementierungen für die meisten Sprachen Applikationen mit Online- und Ofﬂine-Datenbanken 157

JSON - JavaScript Object Notation Kompaktes Plainttext-Format zum Datenaustausch Lesbar durch Mensch- und Maschine Nicht auf JavaScript beschränkt Implementierungen für die meisten Sprachen Sehr ressourceschonend Applikationen mit Online- und Ofﬂine-Datenbanken 157

JSON - JavaScript Object Notation Kompaktes Plainttext-Format zum Datenaustausch Lesbar durch Mensch- und Maschine Nicht auf JavaScript beschränkt Implementierungen für die meisten Sprachen Sehr ressourceschonend Leichte Weiterverarbeitung durch JavaScript Applikationen mit Online- und Ofﬂine-Datenbanken 157

Vergleich: XML - JSON XML (115 Zeichen) <?xml version=“1.0“?> <zeiten> <zeit> <id>1</id> <projekt>iPhoneDevCon</projekt> <stunden>3.00</stunden> </zeit> </zeiten> JSON (48 Zeichen = 41%) [{id:'1',projekt:'iphoneDevCon',stunden:'3.00'}] Applikationen mit Online- und Ofﬂine-Datenbanken 158

Erzeugung von JSON MySQL SELECT CONCAT("[", GROUP_CONCAT( CONCAT("{id:'",ID,"'"), CONCAT(",projekt:'",projekt,"'"), CONCAT(",stunden:'",stunden,"'}")),"]") AS json FROM zeiten; PHP $data[] = array('id'=>$zeit['id'], 'projekt'=>$zeit['projekt'], 'stunden'=>$zeit['stunden'], echo json_encode($data); Applikationen mit Online- und Ofﬂine-Datenbanken 159

Verarbeitung von JSON in JavaScript JavaScript (via AJAX-Call) loadJSON('http://www.example.com/json.php'); function loadJSON(url) { req = new XMLHttpRequest(); req.onreadystatechange = processReqChange; req.open('GET', url, true); req.send(); } function processReqChange(url) { if (req.readyState = 4 && req.status == 200) { var zeiten = eval(req.responseText); for (var i = 0; i < zeiten.length; i++) { // zeiten[i].projekt zeiten[i].stunden } } } Applikationen mit Online- und Ofﬂine-Datenbanken 160

HTML5 Database Storage Applikationen mit Online- und Ofﬂine-Datenbanken 162

HTML5 Database Storage SQLite - Relationale Datenbank auf Dateibasis Applikationen mit Online- und Ofﬂine-Datenbanken 162

HTML5 Database Storage SQLite - Relationale Datenbank auf Dateibasis Asynchroner und Callback-Zugriﬀ (per Query und per Transaction) möglich Applikationen mit Online- und Ofﬂine-Datenbanken 162

HTML5 Database Storage SQLite - Relationale Datenbank auf Dateibasis Asynchroner und Callback-Zugriﬀ (per Query und per Transaction) möglich Sicherheitsmodell: Same Origin Policy Applikationen mit Online- und Ofﬂine-Datenbanken 162

HTML5 Database Storage SQLite - Relationale Datenbank auf Dateibasis Asynchroner und Callback-Zugriﬀ (per Query und per Transaction) möglich Sicherheitsmodell: Same Origin Policy Features Indexes Triggers Transactions .... Applikationen mit Online- und Ofﬂine-Datenbanken 162

HTML5 Database Storage - Vorteile Applikationen mit Online- und Ofﬂine-Datenbanken 163

HTML5 Database Storage - Vorteile Schnell Applikationen mit Online- und Ofﬂine-Datenbanken 163

HTML5 Database Storage - Vorteile Schnell unkomplizierter Zugriﬀ Applikationen mit Online- und Ofﬂine-Datenbanken 163

HTML5 Database Storage - Vorteile Schnell unkomplizierter Zugriﬀ umfangreiche und mächtige Funktionen Applikationen mit Online- und Ofﬂine-Datenbanken 163

HTML5 Database Storage - Vorteile Schnell unkomplizierter Zugriff umfangreiche und mächtige Funktionen funktioniert Offline Applikationen mit Online- und Offline-Datenbanken 163

HTML5 Database Storage - Vorteile Schnell unkomplizierter Zugriff umfangreiche und mächtige Funktionen funktioniert Offline SQLite wird auch eingesetzt von Adobe Air, Mozilla Prism, Google Gears, Android, iPhone SDK (durch Core Data API), Symbian, ... Applikationen mit Online- und Offline-Datenbanken 163

Datenbank öﬀnen 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; } Applikationen mit Online- und Ofﬂine-Datenbanken 164

Allgemeiner Zugriﬀ db.transaction( function (transaction) { transaction.executeSql( SQL, [Werte-Array, die statt ‚?‘ ersetzt werden], dataHandler, errorHandler ); }, transactionError, transactionSuccess ); Applikationen mit Online- und Ofﬂine-Datenbanken 165

Allgemeiner Zugriﬀ 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); Applikationen mit Online- und Ofﬂine-Datenbanken 165

Tabelle anlegen function createTables(db) { db.transaction( function (transaction) { transaction.executeSql( SQL-Statement, [], dataHandler, errorHandler); } ); } WICHTIG! SQL-Statement in eine Zeile!! Applikationen mit Online- und Ofﬂine-Datenbanken 166

Tabelle anlegen function createTables(db) { db.transaction( function (transaction) { transaction.executeSql( 'CREATE TABLE zeiten( SQL-Statement, [], dataHandler, errorHandler); id INTEGER PRIMARY KEY AUTOINCREMENT, } projekt TEXT NOT NULL, ); stunden REAL NOT NULL);', } [], dataHandler, errorHandler); } ); } WICHTIG! SQL-Statement in eine Zeile!! Applikationen mit Online- und Ofﬂine-Datenbanken 166

Tabelle anlegen function createTables(db) { db.transaction( function (transaction) { transaction.executeSql( 'CREATE TABLE zeiten( SQL-Statement, [], dataHandler, errorHandler); 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); Applikationen mit Online- und Ofﬂine-Datenbanken 166

Tabelle mit Daten befüllen function insertData(db) { db.transaction( function (transaction) { transaction.executeSql( SQL-Statement, [], dataHandler, errorHandler); } ); } Applikationen mit Online- und Ofﬂine-Datenbanken 167

Tabelle mit Daten befüllen function insertData(db) { db.transaction( function (transaction) { transaction.executeSql( 'INSERT INTO zeiten (projekte, stunden) SQL-Statement, [], dataHandler, errorHandler); VALUES } ("iPhoneDevCon", "3.00");', ); [], dataHandler, errorHandler); } } ); } Applikationen mit Online- und Ofﬂine-Datenbanken 167

Daten abfragen db.transaction( function (transaction) { transaction.executeSql( "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'; } } Applikationen mit Online- und Ofﬂine-Datenbanken 168

Fehlerbehandlung 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; } Applikationen mit Online- und Ofﬂine-Datenbanken 169

Zur Verfügung stehende Eigenschaften 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.rowAffected UPDATE Befehl betroffen waren Eindeutige ID der letzten Einfüge-Aktion durch results.insertId INSERT Applikationen mit Online- und Offline-Datenbanken 170

Weitere Informationen: WebKit Specs http://www.webkit.org/specs/ W3C - CSS Working Group (WG) http://www.w3.org/Style/CSS/current-work Apple Developer Connection http://developer.apple.com http://html ve.appspot.com/ http://www.whatwg.org/specs/web-apps/ current-work/multipage/video.html Die Macht der WebKit-Engine 171

Vielen Dank für die Aufmerksamkeit! Mobile Webdesign: RIA's für iPhone, Android & Co. 172

http://www.planetshaker.de	2676
http://www.thefox.ch	64
http://www.slideshare.net	5
http://glass-tower.de	2
http://www.melaniemeyer.de	1
http://webcache.googleusercontent.com	1
http://translate.googleusercontent.com	1

iPhone WebApp Entwicklung von A - Z

by Alexander Ebner on Dec 09, 2009

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 2,750

Statistics

iPhone WebApp Entwicklung von A - Z Presentation Transcript