Das mobile Web kommt - nun aber wirklich

(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010

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, GasteigPatrick Lobacher (GF typofaktum)

Montag, 25. Januar 2010

http://www.web-in-bewegung.de/vortrag_7.html





Ü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

2Montag, 25. Januar 2010


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



DAS „MOBILE WEB“Quo vadis


(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 5

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


(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 5

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

16. Oktober 2008



MOBILE WEB?

•Mobile Web = Mobile Internet ?

•Fünf Innovations-Säulen des mobilen Webs

• Mobilfunk / Netze

• Mobilgeräte

• Tarife

• Betriebsystem / Software

• Internet-Technologie



01 | MOBILFUNK / NETZE

•Erfunden 1926

•Start 1983

•Motorola DynaTAC 8000X

•Anfangs primär Sprache

•300.000 verkaufteGeräte



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




•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




•UMTS = Universal Mobile Telecommunications System

•3G / 3.5 G

• Lizenzen 2000 / Nutzung 2004

•Übertragungsgeschwindigkeit: max 45 kB/s

•Erweitert durch HSDPA (110 kB/S)



02 | MOBILFUNKGERÄTE




11

1996




11

19991996




11

1999 20021996




12

2002




12

20042002




12

20042002 2007




•Großes, hochwertiges Display

•Hohe Rechenleistung

•Kapazitives Display

• Intuitive Bedienung

•Ergonomische Software

• „Designed for Web“



03 | DATEN-TARIFE/- NUTZUNG

•2000 - ca. 10 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)



03 | DATEN-TARIFE/- NUTZUNG

• seit Mitte 2007weltweit mehrDaten- als Sprach-Pakete

•Grund?

• iPhone

• Flatrate

• OneWeb



04 | BETRIEBSSYSTEM



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



05 | INTERNET-TECHNOLOGIE



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



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)



05 | XHTML

•XHTML Basic (W3C)• 1.0 (2000)

• 1.1 (2007)

• Unterstützt von Samsung, Sony,...

•XHTML Mobile Pro!le (Open Mobile Alliance)• Teilmenge von XHTML 1.1 / basiert auf XHTML Basic

• Wireless CSS / ECMA-Script Mobile Pro!le

• Unterstützt von Nokia, RIM, ...



05 | HTML5

•Entstanden aus Ideen undEntwürfen zu:

• XHTML 2.0 (W3C)

• Web Applications 1.0 (WHATWG)

•Besteht aus• HTML5

• XHTML5

• DOM 5



05 | HTML5

•Fünf Innovations-Säulen des mobilen Internet

• Mobilfunk / Netze ✔

• Mobilgeräte ✔

• Tarife ✔

• Betriebsystem / Software ✔

• Internet-Technologie ✔



RIA - MOBILE WEB

•Welche RIA-Technologie soll das Mobile Web bestimmen?



BROWSER / SAFARI / WEBKIT




25

Mac OS X




25

WindowsMac OS X




25

WindowsMac OS X iPhone OS




25

WindowsMac OS XiPhone OSWebKit



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



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, Inof!ziell in Windows Mobile durch „Iris Browser“, ...

• iPhone OS enthält bei Release die neueste WebKit Version

• Quelle: http://www.webkit.org


http://www.webkit.org

http://www.webkit.org


WEBKIT FEATURES• HTML 4.01 / XHTML 1.0 & 1.1 / HTML5

• HTML 5 Of"ine Webapps

• HTML 5 Audio und Video Element

• HTML 5 Geolocation API

• CSS 2.1 vollständig und CSS 3 teilweise

• JavaScript 1.4 (inkl. kompletter DOM-Unterstützung)

• JavaScript Multitouch & Gesture API

• Canvas

• AJAX (XMLHTTP-Request) / Web 2.0

• SVG



WEBKIT VERGLEICH



CSS3Das 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-Workingdrafthttp://www.w3.org/TR/css3-2d-transforms/http://www.w3.org/TR/css3-3d-transforms/


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

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


CSS-TRANSFORMS


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

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



CSS-TRANSFORMS: SCALE(0.25)



CSS-TRANSFORMS: SCALE(-0,70)



CSS-TRANSFORMS: ROTATE(-30DEG)



CSS-TRANSFORMS: SKEW



CSS-TRANSFORMS: SKEW

39

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



CSS-TRANSFORMS 3D

40

•Erweiterung der 2D-Transformation

•Beispiel:

Cover"owQuelle: Flickr-FeedCSS-Animation,CSS-Transformation (2D,3D)Spiegelung mittels Canvas

•http://www.satine.org/


http://www.satine.org

http://www.satine.org


CSS-TRANSFORMS

41

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





CSS-TRANSFORMS 3D

42

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





CSS-TRANSFORMS 3D

43

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





CSS-TRANSITIONS

44

•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

45

•Tappen ändertvier CSS-Werte:

• Breite

• Höhe

• Hintergrundfarbe

• Abstand von oben



CSS-TRANSITIONS

46

<style type="text/css" media="screen"> body { background-color: #000;} img { background-color: yellow;! border: 1px solid black;! width: 147px; height: 200px;! padding:10px;! margin:20px;! -webkit-transition-property: background-color width height margin-top;! -webkit-transition-duration: 3s; } .changeBackground { background-color:red;! width:240px;! height:120px;! margin-top:200px;! }</style>... <img src="button_flyer.gif" onclick="this.className='changeBackground'">



CSS-ANIMATIONS

47

•Hardware beschleunigte Animationen

•Keyframe (Schlüsselbild) Animationen (@rule)

•Kontrolle möglich über:• Dauer

• Anzahl und Art der Wiederholung

• Timing-Funktion

• Anfangsverzögerung



CSS-ANIMATIONS

48

•Tappen startet die Animation



CANVASHTML5



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

53

<canvas id="canvas" width="300" height="300"></canvas>

// Referenz auf Canvas

var ctx = $('#canvas')[0].getContext("2d");

// Einen farbigen Kreis zeichnen

ctx.fillStyle = "#00A308";ctx.beginPath();ctx.arc(75, 75, 10, 0, Math.PI*2, true); ctx.closePath();ctx.fill();



OFFLINE WEBAPPSHTML5



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



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.



WEBKIT + LOCAL DB DEMO



HTML5: APPLICATION CACHE

59

• Lokale Kopie einer Website

•Enthält alle benötigten Ressourcen wie• Bilder, HTML, JavaScript, CSS, ...

•Komplett of"ine

•Realisierung durch „Cache Manifest“

•Web-Applikation - Alternative zu nativer App



AUDIO & VIDEOHTML5



HTML5: VIDEO & AUDIO

•Einbetten von Medien mittels HTML5 <audio> und <video> Tags

•Media-Events

•Abspiel-UI beliebig anpassbar

•http://www.youtube.com/html5


http://www.youtube.com/html5

http://www.youtube.com/html5


HTML5: VIDEO & AUDIO



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



GEO LOCATION APIHTML5



HTML5: GEOLOCATION API

•Kapselung der Positionsermittlung

•GPS, WLAN, Bluetooth, o.ä.

•Ermittlung der aktuellen Position

•Nachfrage im Browser

•Tracking möglich

•Objekt: navigator.geolocation



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


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

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

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

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

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




http://developer.apple.com

http://developer.apple.com


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



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

67

ACHTUNG!Unverschämte Eigenwerbung :-)



DIE ZUKUNFT DES INTERNETS



NOCH FRAGEN?gerne auch per Mail:

[email protected]


mailto:[email protected]

mailto:[email protected]

Das mobile Web kommt - nun aber wirklich

Technology

Transcript of Das mobile Web kommt - nun aber wirklich