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)

(c) 2010 - typofaktum unternehmenskommunikation | Mobile Web | Patrick Lobacher | 23.01.2010
Montag, 25. Januar 2010

Ü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

Ü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


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


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 verkaufte
Geräte


• 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



1996



1996 1999



1996 1999 2002



2002



2002 2004



2002 2004 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 2007
weltweit mehr
Daten- 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 und
Entwü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



Mac OS X



Mac OS X Windows



Mac OS X Windows iPhone OS



Mac OSOS
Windows
iPhone X
WebKit


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


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


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


CSS-TRANSFORMS


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

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

CSS-TRANSFORMS: SCALE(0.25)


CSS-TRANSFORMS: SCALE(-0,70)


CSS-TRANSFORMS: ROTATE(-30DEG)


CSS-TRANSFORMS: SKEW


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 {
}
img#bild3 {
}
</style>

<img src="button_flyer.gif" id="bild1" />


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/


CSS-TRANSFORMS

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

CSS-TRANSFORMS 3D

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


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


CSS-TRANSITIONS

• Tappen ändert
vier CSS-Werte:
• Breite

• Höhe

• Hintergrundfarbe

• Abstand von oben


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


CSS-ANIMATIONS

• Hardware beschleunigte Animationen
• Keyframe (Schlüsselbild) Animationen (@rule)
• Kontrolle möglich über:
• Dauer

• Anzahl und Art der Wiederholung
• Timing-Funktion

• Anfangsverzögerung


CSS-ANIMATIONS

• Tappen startet die Animation


CANVAS
HTML5


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

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


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

• 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 & VIDEO
HTML5


HTML5: VIDEO & AUDIO

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

• Abspiel-UI beliebig anpassbar
• http://www.youtube.com/html5


• 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 API
HTML5


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


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


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


DIE ZUKUNFT DES INTERNETS


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


Das mobile Web kommt - nun aber wirklich

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Das mobile Web kommt - nun aber wirklich

Ähnlich wie Das mobile Web kommt - nun aber wirklich (20)

Mehr von die.agilen GmbH

Mehr von die.agilen GmbH (20)

Das mobile Web kommt - nun aber wirklich