Your SlideShare is downloading. ×
Das mobile Web kommt - nun aber wirklich
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Das mobile Web kommt - nun aber wirklich

1,183
views

Published on

Die Zukunft des Internets mittels HTML5 und CSS3 schon jetzt auf iPhone, Android & Co

Die Zukunft des Internets mittels HTML5 und CSS3 schon jetzt auf iPhone, Android & Co

Published in: Technology

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,183
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
20
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 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) (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 Montag, 25. Januar 2010
  • 2. ÜBER TYPOFAKTUM • Münchner Fullservice-Agentur für Unternehmenskommunikation http://www.typofaktum.de • Inhabergeführt: Patrick Lobacher / Christoph Laruelle • Spezialisiertauf 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 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 2 Montag, 25. Januar 2010
  • 3. Ü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) (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 3 Montag, 25. Januar 2010
  • 4. DAS „MOBILE WEB“ Quo vadis (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 4 Montag, 25. Januar 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 Montag, 25. Januar 2010
  • 6. Das mobile Internet steht mit „made for mobile“ kurz vor dem endgültigen Durchbruch. 16. Oktober 2008 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 5 Montag, 25. Januar 2010
  • 7. MOBILE WEB? • Mobile Web = Mobile Internet ? • Fünf Innovations-Säulen des mobilen Webs • Mobilfunk / Netze • Mobilgeräte • Tarife • Betriebsystem / Software • Internet-Technologie (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 6 Montag, 25. Januar 2010
  • 8. 01 | MOBILFUNK / NETZE • Erfunden 1926 • Start 1983 • Motorola DynaTAC 8000X • Anfangs primär Sprache • 300.000 verkaufte Geräte (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 7 Montag, 25. Januar 2010
  • 9. 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 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 8 Montag, 25. Januar 2010
  • 10. 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 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 9 Montag, 25. Januar 2010
  • 11. 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) (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 10 Montag, 25. Januar 2010
  • 12. 02 | MOBILFUNKGERÄTE (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 11 Montag, 25. Januar 2010
  • 13. 02 | MOBILFUNKGERÄTE 1996 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 11 Montag, 25. Januar 2010
  • 14. 02 | MOBILFUNKGERÄTE 1996 1999 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 11 Montag, 25. Januar 2010
  • 15. 02 | MOBILFUNKGERÄTE 1996 1999 2002 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 11 Montag, 25. Januar 2010
  • 16. 02 | MOBILFUNKGERÄTE (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 12 Montag, 25. Januar 2010
  • 17. 02 | MOBILFUNKGERÄTE 2002 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 12 Montag, 25. Januar 2010
  • 18. 02 | MOBILFUNKGERÄTE 2002 2004 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 12 Montag, 25. Januar 2010
  • 19. 02 | MOBILFUNKGERÄTE 2002 2004 2007 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 12 Montag, 25. Januar 2010
  • 20. 02 | MOBILFUNKGERÄTE • Großes, hochwertiges Display • Hohe Rechenleistung • Kapazitives Display • Intuitive Bedienung • Ergonomische Software • „Designed for Web“ (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 13 Montag, 25. Januar 2010
  • 21. 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) (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 14 Montag, 25. Januar 2010
  • 22. 03 | DATEN-TARIFE/- NUTZUNG • seit Mitte 2007 weltweit mehr Daten- als Sprach- Pakete • Grund? • iPhone • Flatrate • OneWeb (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 15 Montag, 25. Januar 2010
  • 23. 04 | BETRIEBSSYSTEM (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 16 Montag, 25. Januar 2010
  • 24. 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 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 17 Montag, 25. Januar 2010
  • 25. 05 | INTERNET-TECHNOLOGIE (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 18 Montag, 25. Januar 2010
  • 26. 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 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 19 Montag, 25. Januar 2010
  • 27. 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) (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 20 Montag, 25. Januar 2010
  • 28. 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, ... (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 21 Montag, 25. Januar 2010
  • 29. 05 | HTML5 • Entstanden aus Ideen und Entwürfen zu: • XHTML 2.0 (W3C) • Web Applications 1.0 (WHATWG) • Besteht aus • HTML5 • XHTML5 • DOM 5 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 22 Montag, 25. Januar 2010
  • 30. 05 | HTML5 • Fünf Innovations-Säulen des mobilen Internet • Mobilfunk / Netze ✔ • Mobilgeräte ✔ • Tarife ✔ • Betriebsystem / Software ✔ • Internet-Technologie ✔ (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 23 Montag, 25. Januar 2010
  • 31. RIA - MOBILE WEB • Welche RIA-Technologie soll das Mobile Web bestimmen? (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 24 Montag, 25. Januar 2010
  • 32. BROWSER / SAFARI / WEBKIT (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 25 Montag, 25. Januar 2010
  • 33. BROWSER / SAFARI / WEBKIT Mac OS X (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 25 Montag, 25. Januar 2010
  • 34. BROWSER / SAFARI / WEBKIT Mac OS X Windows (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 25 Montag, 25. Januar 2010
  • 35. BROWSER / SAFARI / WEBKIT Mac OS X Windows iPhone OS (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 25 Montag, 25. Januar 2010
  • 36. BROWSER / SAFARI / WEBKIT Mac OSOS Windows iPhone X WebKit (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 25 Montag, 25. Januar 2010
  • 37. 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 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 26 Montag, 25. Januar 2010
  • 38. 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 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 27 Montag, 25. Januar 2010
  • 39. 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 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 28 Montag, 25. Januar 2010
  • 40. WEBKIT VERGLEICH (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 29 Montag, 25. Januar 2010
  • 41. CSS3 Das neue „Flash“ (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 30 Montag, 25. Januar 2010
  • 42. CSS3 • CSS-Transforms (Transformation) • CSS-Transitions (Übergänge) • CSS-Animations (Animationen) (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 31 Montag, 25. Januar 2010
  • 43. 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/ (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 32 Montag, 25. Januar 2010
  • 44. CSS-TRANSFORMS (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 33 Montag, 25. Januar 2010
  • 45. CSS-TRANSFORMS: TRANSLATE(100PX,50PX) (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 34 Montag, 25. Januar 2010
  • 46. CSS-TRANSFORMS: SCALE(0.25) (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 35 Montag, 25. Januar 2010
  • 47. CSS-TRANSFORMS: SCALE(-0,70) (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 36 Montag, 25. Januar 2010
  • 48. CSS-TRANSFORMS: ROTATE(-30DEG) (c) 2009 - typofaktum unternehmenskommunikation | HTML5 & CSS3 | Patrick Lobacher | 02.12.2009 37 Montag, 25. Januar 2010
  • 49. CSS-TRANSFORMS: SKEW (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 38 Montag, 25. Januar 2010
  • 50. 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" /> (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 39 Montag, 25. Januar 2010
  • 51. 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/ (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 40 Montag, 25. Januar 2010
  • 52. 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/ (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 40 Montag, 25. Januar 2010
  • 53. CSS-TRANSFORMS http://webkit.org/blog-files/3d-transforms/poster-circle.html (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 41 Montag, 25. Januar 2010
  • 54. CSS-TRANSFORMS 3D http://blog.ryanparman.com/2009/07/14/webkit-3d-css-transforms/ (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 42 Montag, 25. Januar 2010
  • 55. CSS-TRANSFORMS 3D http://blog.ryanparman.com/2009/07/14/webkit-3d-css-transforms/ (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 43 Montag, 25. Januar 2010
  • 56. 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 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 44 Montag, 25. Januar 2010
  • 57. CSS-TRANSITIONS • Tappen ändert vier CSS-Werte: • Breite • Höhe • Hintergrundfarbe • Abstand von oben (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 45 Montag, 25. Januar 2010
  • 58. 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'"> (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 46 Montag, 25. Januar 2010
  • 59. CSS-ANIMATIONS • Hardware beschleunigte Animationen • Keyframe (Schlüsselbild) Animationen (@rule) • Kontrolle möglich über: • Dauer • Anzahl und Art der Wiederholung • Timing-Funktion • Anfangsverzögerung (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 47 Montag, 25. Januar 2010
  • 60. CSS-ANIMATIONS • Tappen startet die Animation (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 48 Montag, 25. Januar 2010
  • 61. CANVAS HTML5 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 49 Montag, 25. Januar 2010
  • 62. 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 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 50 Montag, 25. Januar 2010
  • 63. HTML5: CANVAS DEMO (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 51 Montag, 25. Januar 2010
  • 64. HTML5: CANVAS DEMO (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 52 Montag, 25. Januar 2010
  • 65. 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(); (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 53 Montag, 25. Januar 2010
  • 66. OFFLINE WEBAPPS HTML5 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 54 Montag, 25. Januar 2010
  • 67. HTML5: OFFLINE WEBAPPS • Local und Session Storage • HTML5 Database Storage • HTML Application Cache (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 55 Montag, 25. Januar 2010
  • 68. 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 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 56 Montag, 25. Januar 2010
  • 69. 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. (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 57 Montag, 25. Januar 2010
  • 70. WEBKIT + LOCAL DB DEMO (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 58 Montag, 25. Januar 2010
  • 71. HTML5: APPLICATION CACHE • 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 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 59 Montag, 25. Januar 2010
  • 72. AUDIO & VIDEO HTML5 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 60 Montag, 25. Januar 2010
  • 73. HTML5: VIDEO & AUDIO • Einbetten von Medien mittels HTML5 <audio> und <video> Tags • Media-Events • Abspiel-UI beliebig anpassbar • http://www.youtube.com/html5 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 61 Montag, 25. Januar 2010
  • 74. HTML5: VIDEO & AUDIO (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 62 Montag, 25. Januar 2010
  • 75. 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 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 63 Montag, 25. Januar 2010
  • 76. GEO LOCATION API HTML5 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 64 Montag, 25. Januar 2010
  • 77. HTML5: GEOLOCATION API • Kapselung der Positionsermittlung • GPS, WLAN, Bluetooth, o.ä. • Ermittlung der aktuellen Position • Nachfrage im Browser • Tracking möglich • Objekt: navigator.geolocation (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 65 Montag, 25. Januar 2010
  • 78. 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 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 66 Montag, 25. Januar 2010
  • 79. DAS BUCH ZUM VORTRAG • Patrick Lobacher und Alexander Ebner Broschiert: 324 Seiten Verlag: Open Source Press; Au age: 1 (Juni 2009) • ISBN-10: 3937514864 ISBN-13: 978-3937514864 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 67 Montag, 25. Januar 2010
  • 80. DAS BUCH ZUM VORTRAG ACHTUNG! Unverschämte • Patrick Lobacher Eigenwerbung :-) und Alexander Ebner Broschiert: 324 Seiten Verlag: Open Source Press; Au age: 1 (Juni 2009) • ISBN-10: 3937514864 ISBN-13: 978-3937514864 (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 67 Montag, 25. Januar 2010
  • 81. DIE ZUKUNFT DES INTERNETS (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 68 Montag, 25. Januar 2010
  • 82. DIE ZUKUNFT DES INTERNETS (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 68 Montag, 25. Januar 2010
  • 83. NOCH FRAGEN? gerne auch per Mail: patrick.lobacher@typofaktum.de (c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010 69 Montag, 25. Januar 2010