DAS MOBILE WEB KOMMT NUN ABER WIRKLICH!

Transkript

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

2 ÜBER TYPOFAKTUM Münchner Fullservice-Agentur für Unternehmenskommunikation 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 Über 800 realisierte Projekte Kunden: Vodafone, Finanzscout 24, AGIP, Contraco, Arbeitsamt München, Langenscheidt, Motorola, Seifert, Integralis, u.v.a.m 2

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

4 DAS MOBILE WEB Quo vadis 4

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

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

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

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

9 01 MOBILFUNK / NETZE A-Netz ( ) B-Netz ( ) C-Netz ( ) GSM D-Netz (1992-heute) E-Netz (1993-heute) UMTS 8

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 9

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

12 02 MOBILFUNKGERÄTE 11

13 02 MOBILFUNKGERÄTE

14 02 MOBILFUNKGERÄTE

15 02 MOBILFUNKGERÄTE

16 02 MOBILFUNKGERÄTE 12

17 02 MOBILFUNKGERÄTE

18 02 MOBILFUNKGERÄTE

19 02 MOBILFUNKGERÄTE

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

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

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

23 04 BETRIEBSSYSTEM 16

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

25 05 INTERNET-TECHNOLOGIE 18

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 19

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

28 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

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 22

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

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

32 BROWSER / SAFARI / WEBKIT 25

33 BROWSER / SAFARI / WEBKIT Mac OS X 25

34 BROWSER / SAFARI / WEBKIT Mac OS X Windows 25

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

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

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 26

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, Inoffiziell in Windows Mobile durch Iris Browser,... iphone OS enthält bei Release die neueste WebKit Version Quelle: 27

39 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

40 WEBKIT VERGLEICH 29

41 CSS3 Das neue Flash 30

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

43 CSS-TRANSFORMS Hardware beschleunigte Transformationen Translate (Bewegen) Scale (Skalieren) Rotate (Drehen) Skew (Verzerren) W3C-Workingdraft

44 CSS-TRANSFORMS 33

45 CSS-TRANSFORMS: TRANSLATE(100PX,50PX) (c) typofaktum unternehmenskommunikation HTML5 & CSS3 Patrick Lobacher

46 CSS-TRANSFORMS: SCALE(0.25) (c) typofaktum unternehmenskommunikation HTML5 & CSS3 Patrick Lobacher

47 CSS-TRANSFORMS: SCALE(-0,70) (c) typofaktum unternehmenskommunikation HTML5 & CSS3 Patrick Lobacher

48 CSS-TRANSFORMS: ROTATE(-30DEG) (c) typofaktum unternehmenskommunikation HTML5 & CSS3 Patrick Lobacher

49 CSS-TRANSFORMS: SKEW 38

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

51 CSS-TRANSFORMS 3D Erweiterung der 2D-Transformation Beispiel: Coverflow Quelle: Flickr-Feed CSS-Animation, CSS-Transformation (2D,3D) Spiegelung mittels Canvas 40

52 CSS-TRANSFORMS 3D Erweiterung der 2D-Transformation Beispiel: Coverflow Quelle: Flickr-Feed CSS-Animation, CSS-Transformation (2D,3D) Spiegelung mittels Canvas 40

53 CSS-TRANSFORMS 41

54 CSS-TRANSFORMS 3D 42

55 CSS-TRANSFORMS 3D 43

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

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

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

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

60 CSS-ANIMATIONS Tappen startet die Animation 48

61 CANVAS HTML5 49

62 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

63 HTML5: CANVAS DEMO 51

64 HTML5: CANVAS DEMO 52

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

66 OFFLINE WEBAPPS HTML5 54

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

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

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

70 WEBKIT + LOCAL DB DEMO 58

71 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

72 AUDIO & VIDEO HTML5 60

73 HTML5: VIDEO & AUDIO Einbetten von Medien mittels HTML5 <audio> und <video> Tags Media-Events Abspiel-UI beliebig anpassbar 61

74 HTML5: VIDEO & AUDIO 62

75 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

76 GEO LOCATION API HTML5 64

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

78 QUELLEN Statistiken über die Nutzung und Verbreitung des Mobilfunks Mobile-Metrics-Dec-09.pdf HTML5 - W3C W3C - CSS Working Group (WG) WebKit Specs Apple Developer Connection 66

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

80 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: ISBN-13:

81 DIE ZUKUNFT DES INTERNETS 68

82 DIE ZUKUNFT DES INTERNETS 68

83 NOCH FRAGEN? gerne auch per Mail: 69