Download - 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
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
Ü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
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.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)
3Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
DAS „MOBILE WEB“Quo vadis
4Montag, 25. Januar 2010
(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.
Montag, 25. Januar 2010
(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
Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
MOBILE WEB?
•Mobile Web = Mobile Internet ?
•Fünf Innovations-Säulen des mobilen Webs
• Mobilfunk / Netze
• Mobilgeräte
• Tarife
• Betriebsystem / Software
• Internet-Technologie
6Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
01 | MOBILFUNK / NETZE
•Erfunden 1926
•Start 1983
•Motorola DynaTAC 8000X
•Anfangs primär Sprache
•300.000 verkaufteGeräte
7Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
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
8Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
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
9Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
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)
10Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
02 | MOBILFUNKGERÄTE
11Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
02 | MOBILFUNKGERÄTE
11
1996
Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
02 | MOBILFUNKGERÄTE
11
19991996
Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
02 | MOBILFUNKGERÄTE
11
1999 20021996
Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
02 | MOBILFUNKGERÄTE
12Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
02 | MOBILFUNKGERÄTE
12
2002
Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
02 | MOBILFUNKGERÄTE
12
20042002
Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
02 | MOBILFUNKGERÄTE
12
20042002 2007
Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
02 | MOBILFUNKGERÄTE
•Großes, hochwertiges Display
•Hohe Rechenleistung
•Kapazitives Display
• Intuitive Bedienung
•Ergonomische Software
• „Designed for Web“
13Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
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)
14Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
03 | DATEN-TARIFE/- NUTZUNG
• seit Mitte 2007weltweit mehrDaten- als Sprach-Pakete
•Grund?
• iPhone
• Flatrate
• OneWeb
15Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
04 | BETRIEBSSYSTEM
16Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
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
17Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
05 | INTERNET-TECHNOLOGIE
18Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
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
19Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
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)
20Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
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, ...
21Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
05 | HTML5
•Entstanden aus Ideen undEntwürfen zu:
• XHTML 2.0 (W3C)
• Web Applications 1.0 (WHATWG)
•Besteht aus• HTML5
• XHTML5
• DOM 5
22Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
05 | HTML5
•Fünf Innovations-Säulen des mobilen Internet
• Mobilfunk / Netze ✔
• Mobilgeräte ✔
• Tarife ✔
• Betriebsystem / Software ✔
• Internet-Technologie ✔
23Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
RIA - MOBILE WEB
•Welche RIA-Technologie soll das Mobile Web bestimmen?
24Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
BROWSER / SAFARI / WEBKIT
25Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
BROWSER / SAFARI / WEBKIT
25
Mac OS X
Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
BROWSER / SAFARI / WEBKIT
25
WindowsMac OS X
Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
BROWSER / SAFARI / WEBKIT
25
WindowsMac OS X iPhone OS
Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
BROWSER / SAFARI / WEBKIT
25
WindowsMac OS XiPhone OSWebKit
Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
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
26Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
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
27Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
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
28Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
WEBKIT VERGLEICH
29Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
CSS3Das neue „Flash“
30Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
CSS3
•CSS-Transforms (Transformation)
•CSS-Transitions (Übergänge)
•CSS-Animations (Animationen)
31Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
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/
32Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
CSS-TRANSFORMS
33Montag, 25. Januar 2010
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
CSS-TRANSFORMS: TRANSLATE(100PX,50PX)
34Montag, 25. Januar 2010
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
CSS-TRANSFORMS: SCALE(0.25)
35Montag, 25. Januar 2010
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
CSS-TRANSFORMS: SCALE(-0,70)
36Montag, 25. Januar 2010
(c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009
CSS-TRANSFORMS: ROTATE(-30DEG)
37Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
CSS-TRANSFORMS: SKEW
38Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
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" />
Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
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/
Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
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/
Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
CSS-TRANSFORMS
41
http://webkit.org/blog-files/3d-transforms/poster-circle.html
Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
CSS-TRANSFORMS 3D
42
http://blog.ryanparman.com/2009/07/14/webkit-3d-css-transforms/
Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
CSS-TRANSFORMS 3D
43
http://blog.ryanparman.com/2009/07/14/webkit-3d-css-transforms/
Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
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
Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
CSS-TRANSITIONS
45
•Tappen ändertvier CSS-Werte:
• Breite
• Höhe
• Hintergrundfarbe
• Abstand von oben
Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
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'">
Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
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
Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
CSS-ANIMATIONS
48
•Tappen startet die Animation
Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
CANVASHTML5
49Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
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
50Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
HTML5: CANVAS DEMO
51Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
HTML5: CANVAS DEMO
52Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
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();
Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
OFFLINE WEBAPPSHTML5
54Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
HTML5: OFFLINE WEBAPPS
• Local und Session Storage
•HTML5 Database Storage
•HTML Application Cache
55Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
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
56Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
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.
57Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
WEBKIT + LOCAL DB DEMO
58Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
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
Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
AUDIO & VIDEOHTML5
60Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
HTML5: VIDEO & AUDIO
•Einbetten von Medien mittels HTML5 <audio> und <video> Tags
•Media-Events
•Abspiel-UI beliebig anpassbar
•http://www.youtube.com/html5
61Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
HTML5: VIDEO & AUDIO
62Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
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
63Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
GEO LOCATION APIHTML5
64Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
HTML5: GEOLOCATION API
•Kapselung der Positionsermittlung
•GPS, WLAN, Bluetooth, o.ä.
•Ermittlung der aktuellen Position
•Nachfrage im Browser
•Tracking möglich
•Objekt: navigator.geolocation
65Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
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
66Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
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
67Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
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 :-)
Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
DIE ZUKUNFT DES INTERNETS
68Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
DIE ZUKUNFT DES INTERNETS
68Montag, 25. Januar 2010
(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
NOCH FRAGEN?gerne auch per Mail:
69Montag, 25. Januar 2010