DAS MOBILE WEB KOMMT NUN ABER WIRKLICH!

DAS MOBILE WEB KOMMT NUN ABER WIRKLICH! Die Zukunft des Internets schon jetzt mit iphone, Android & Co. 23.01.2010 web.in.bewegung München, Gasteig Patrick Lobacher (GF typofaktum)

ÜBER TYPOFAKTUM Münchner Fullservice-Agentur für Unternehmenskommunikation http://www.typofaktum.de 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: Vodafone, Finanzscout 24, AGIP, Contraco, Arbeitsamt München, Langenscheidt, Motorola, Seifert, Integralis, u.v.a.m 2

ÜBER TYPOFAKTUM GF Patrick Lobacher hat zahlreiche Publikationen über alle Aspekte der iphone Webapplikationsentwicklung geschrieben: Geschäftsbereiche TYPO3 Konzeption, Entwicklung, Programmierung, Integration (inkl. Extbase / Fluid / FLOW3) Webapplikationsentwicklung (PHP, iphone,...) Consulting, Projektmanagement & Coaching Schulung (inkl. komplettes TYPO3-Curriculum von Anfänger bis Fortgeschrittene und Spezialschulungen sowie Firmen- und Individualschulungen) 3

DAS MOBILE WEB Quo vadis 4

Das mobile Internet steht mit made for mobile kurz vor dem endgültigen Durchbruch. 5

Das mobile Internet steht mit made for mobile kurz vor dem endgültigen Durchbruch. 16. Oktober 2008 5

MOBILE WEB? Mobile Web = Mobile Internet? Fünf Innovations-Säulen des mobilen Webs Mobilfunk / Netze Mobilgeräte Tarife Betriebsystem / Software Internet-Technologie 6

01 MOBILFUNK / NETZE Erfunden 1926 Start 1983 Motorola DynaTAC 8000X Anfangs primär Sprache 300.000 verkaufte Geräte 7

01 MOBILFUNK / NETZE A-Netz (1958-1977) B-Netz (1972-1995) C-Netz (1986-2000) GSM D-Netz (1992-heute) E-Netz (1993-heute) UMTS 8

01 MOBILFUNK / NETZE GSM = Global System for Mobile Communication 2G seit 1992 Übertragungsgeschwindigkeit: 9,6 kbit/s - 1,2 kb/s Erweitert durch GPRS (5 kb/s) und EDGE (27kB/s) Geburtsstunde der SMS 9

01 MOBILFUNK / NETZE UMTS = Universal Mobile Telecommunications System 3G / 3.5 G Lizenzen 2000 / Nutzung 2004 Übertragungsgeschwindigkeit: max 45 kb/s Erweitert durch HSDPA (110 kb/s) 10

02 MOBILFUNKGERÄTE 11

02 MOBILFUNKGERÄTE 1996 11

02 MOBILFUNKGERÄTE 1996 1999 11

02 MOBILFUNKGERÄTE 1996 1999 2002 11

02 MOBILFUNKGERÄTE 12

02 MOBILFUNKGERÄTE 2002 12

02 MOBILFUNKGERÄTE 2002 2004 12

02 MOBILFUNKGERÄTE 2002 2004 2007 12

02 MOBILFUNKGERÄTE Großes, hochwertiges Display Hohe Rechenleistung Kapazitives Display Intuitive Bedienung Ergonomische Software Designed for Web 13

03 DATEN-TARIFE/- NUTZUNG 2000 - ca. 10 EUR pro 1 MB Daten 2001 - ca. 8 EUR pro 1 MB Daten 2004 - ca. 5 EUR pro 1 MB Daten 2007 - ca. 1 EUR pro 1 MB Daten 2009 - ca. 0,25 EUR pro 1 MB Daten ab 2007 - Flatrate (bei 200 MB ca. 0,1 EUR/MB) 14

03 DATEN-TARIFE/- NUTZUNG seit Mitte 2007 weltweit mehr Daten- als Sprach- Pakete Grund? iphone Flatrate OneWeb 15

04 BETRIEBSSYSTEM 16

04 BETRIEBSSYSTEM Intuitive Bedienung (Usability) Leichtes Finden von Inhalten (Portale, Integration des Browsers in das OS) Email-Client (Push oder Pull) Hochentwickelter Browser ( Internet Explorer Mobile ) Opera Mini WebKit 17

05 INTERNET-TECHNOLOGIE 18

05 I-MODE Portaldienst für Mobiltelefone Start 1999 in Japan proprietär (NTT DoCoMo) i-mode Handys notwendig sehr erfolgreich (in Japan), da Content-Anbieter mitbeteiligt wurden Basiert auf chtml / ihtml (nicht XML) 2008 in Deutschland eingestellt 19

05 WAP / WML Wireless Application Protocol + Wireless Markup-Language (W3C) Seit 1999 (WAP 1.1) verfügbar Internet-Inhalte für die langsamere Übertragungsrate und die längeren Antwortzeiten im Mobilfunk sowie für die kleinen Displays der Mobiltelefone verfügbar machen Wait & Pay (WAP) stark reduzierte HTML-Version + JavaScript (WMLScript) 20

05 XHTML XHTML Basic (W3C) 1.0 (2000) 1.1 (2007) Unterstützt von Samsung, Sony,... XHTML Mobile Profile (Open Mobile Alliance) Teilmenge von XHTML 1.1 / basiert auf XHTML Basic Wireless CSS / ECMA-Script Mobile Profile Unterstützt von Nokia, RIM,... 21

05 HTML5 Entstanden aus Ideen und Entwürfen zu: XHTML 2.0 (W3C) Web Applications 1.0 (WHATWG) Besteht aus HTML5 XHTML5 DOM 5 22

05 HTML5 Fünf Innovations-Säulen des mobilen Internet Mobilfunk / Netze Mobilgeräte Tarife Betriebsystem / Software Internet-Technologie 23

RIA - MOBILE WEB Welche RIA-Technologie soll das Mobile Web bestimmen? 24

BROWSER / SAFARI / WEBKIT 25

BROWSER / SAFARI / WEBKIT Mac OS X 25

BROWSER / SAFARI / WEBKIT Mac OS X Windows 25

BROWSER / SAFARI / WEBKIT Mac OS X Windows iphone OS 25

BROWSER / SAFARI / WEBKIT Mac Windows iphone WebKit OSOS X 25

WEBKIT freie HTML-Rendering-Bibliothek (Open Source) 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 26

WEBKIT WebKit wird (dank OpenSource-Lizenz) in weiteren Anwendungen integriert: KDE, Google Chrome, Adobe AIR,... Nokia Symbian OS (S60) Google ANDROID PalmOS Blackberry OS Open Moko, Inoffiziell in Windows Mobile durch Iris Browser,... iphone OS enthält bei Release die neueste WebKit Version Quelle: http://www.webkit.org 27

WEBKIT FEATURES HTML 4.01 / XHTML 1.0 & 1.1 / HTML5 HTML 5 Offline 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 28

WEBKIT VERGLEICH 29

CSS3 Das neue Flash 30

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

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

CSS-TRANSFORMS 33

CSS-TRANSFORMS: SKEW 38

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

CSS-TRANSFORMS 3D Erweiterung der 2D-Transformation Beispiel: Coverflow Quelle: Flickr-Feed CSS-Animation, CSS-Transformation (2D,3D) Spiegelung mittels Canvas http://www.satine.org/ 40

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

CSS-TRANSFORMS 3D http://blog.ryanparman.com/2009/07/14/webkit-3d-css-transforms/ 42

CSS-TRANSFORMS 3D http://blog.ryanparman.com/2009/07/14/webkit-3d-css-transforms/ 43

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 definiert ist, so wird dieser ausgeführt 44

CSS-TRANSITIONS Tappen ändert vier CSS-Werte: Breite Höhe Hintergrundfarbe Abstand von oben 45

CSS-TRANSITIONS <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'"> 46

CSS-ANIMATIONS Hardware beschleunigte Animationen Keyframe (Schlüsselbild) Animationen (@rule) Kontrolle möglich über: Dauer Anzahl und Art der Wiederholung Timing-Funktion Anfangsverzögerung 47

CSS-ANIMATIONS Tappen startet die Animation 48

CANVAS HTML5 49

HTML5: CANVAS Inkludiert in die HTML5 Spezifikation Virtuelle Zeichenfläche Erstellung von Vektorgrafiken und Animationen <canvas>-element Zeichnen, Bilder, Verläufe, Spiegelungen, Transparenzen, Muster Transformationen, Kompositionen JavaScript API 50

HTML5: CANVAS DEMO 51

HTML5: CANVAS DEMO 52

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

OFFLINE WEBAPPS HTML5 54

HTML5: OFFLINE WEBAPPS Local und Session Storage HTML5 Database Storage HTML Application Cache 55

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 specification 56

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. 57

WEBKIT + LOCAL DB DEMO 58

HTML5: APPLICATION CACHE Lokale Kopie einer Website Enthält alle benötigten Ressourcen wie Bilder, HTML, JavaScript, CSS,... Komplett offline Realisierung durch Cache Manifest Web-Applikation - Alternative zu nativer App 59

AUDIO & VIDEO HTML5 60

HTML5: VIDEO & AUDIO Einbetten von Medien mittels HTML5 <audio> und <video> Tags Media-Events Abspiel-UI beliebig anpassbar http://www.youtube.com/html5 61

HTML5: VIDEO & AUDIO 62

HTML5: VIDEO & AUDIO H.264 Simple baseline profile video (main and extended video compatible) level 3 and Low-Complexity AAC audio in MP4 container H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity AAC audio in MP4 container H.264 Main profile video level 3 and Low-Complexity AAC audio in MP4 container H.264 "High" profile video (incompatible with main, baseline, or extended profiles) level 3 and Low-Complexity AAC audio in MP4 container MPEG-4 Visual Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container MPEG-4 Advanced Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container MPEG-4 Visual Simple Profile 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 63

GEO LOCATION API HTML5 64

HTML5: GEOLOCATION API Kapselung der Positionsermittlung GPS, WLAN, Bluetooth, o.ä. Ermittlung der aktuellen Position Nachfrage im Browser Tracking möglich Objekt: navigator.geolocation 65

QUELLEN Statistiken über die Nutzung und Verbreitung des Mobilfunks http://metrics.admob.com/wp-content/uploads/2010/01/admob- Mobile-Metrics-Dec-09.pdf 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 66

DAS BUCH ZUM VORTRAG Patrick Lobacher und Alexander Ebner Broschiert: 324 Seiten Verlag: Open Source Press; Auflage: 1 (Juni 2009) ISBN-10: 3937514864 ISBN-13: 978-3937514864 67

DAS BUCH ZUM VORTRAG Patrick Lobacher und Alexander Ebner ACHTUNG! Unverschämte Eigenwerbung :-) Broschiert: 324 Seiten Verlag: Open Source Press; Auflage: 1 (Juni 2009) ISBN-10: 3937514864 ISBN-13: 978-3937514864 67

DIE ZUKUNFT DES INTERNETS 68

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