Webstandards auf dem Weg zu Standards im Mobilen Bereich
-
Upload
peter-rozek -
Category
Technology
-
view
1.693 -
download
0
description
Transcript of Webstandards auf dem Weg zu Standards im Mobilen Bereich
![Page 1: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/1.jpg)
mobileWeb
WebstandardsAuf dem Weg zu
Standards im mobilen Web
Peter Rozek, 12.10.2010
![Page 2: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/2.jpg)
mobileWeb
Peter Rozek...
![Page 3: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/3.jpg)
... seit 2010 bei der ecomplexx GmbH als Frontend-Developer für die barrierefreie und gebrauchtsaugliche Entwicklung von Websites.
...Usability Professional im AK Barrierefreiheit
... mit think green - neue Medien im Einkaufsführer Barrierefreies Internet aufgenommen und Unterstützer im Aktionsbündnis für barrierefreie Informationstechnik.
mobileWeb
![Page 4: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/4.jpg)
Das mobile Web ist ein
Wachstumsmarkt...
![Page 5: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/5.jpg)
... 1.8 Billionen Internet-Anschlüsse
http://www.internetworldstats.com
![Page 6: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/6.jpg)
... 6.8 Billionen Menschen aktuell auf dem Erdball
![Page 7: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/7.jpg)
... 3.4 Billionen Menschen mit einem Mobiltelefon
![Page 8: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/8.jpg)
Rückblick...
![Page 9: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/9.jpg)
Mobile Steinzeit:
WAP...Wat ?
![Page 10: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/10.jpg)
WAP was ist DAT ?Wireles Access Protocol1997/98
![Page 11: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/11.jpg)
WAPEigenes Markup (WML)
![Page 12: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/12.jpg)
WAPReduziert und kein Design
![Page 13: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/13.jpg)
WAP = Langweilig
![Page 14: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/14.jpg)
WAP 2.0...ein wenig besser
![Page 15: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/15.jpg)
...kein eigenes Markup, stattdessen HTTP und XHTML
![Page 16: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/16.jpg)
...ein wenig mehr Design
![Page 17: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/17.jpg)
...aber nicht wirklich interessant...
![Page 18: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/18.jpg)
Status QuoVielzahl an Browsern und Endgeräten ...
![Page 19: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/19.jpg)
2500 Modelle
![Page 20: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/20.jpg)
50 unterschiedliche Betriebssysteme
![Page 21: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/21.jpg)
‣ Symbian S60 (Nokia, Samsung‣ Windows Mobile (Samsung, HTC)‣ Blackberry (RIM)‣ Android (HTC, Samsung, usw.)‣ iPhone (Apple)‣ Symbian UIQ (Sony Ericsson)‣ BREW (Motorola, LG)‣ webOS (Palm)‣ usw. usw. usw.
Betriebssysteme:
![Page 22: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/22.jpg)
25 Browser
![Page 23: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/23.jpg)
‣ Android Webkit‣ Opera Mobile‣ NetFront‣ Safari‣ Opera Mini‣ Blackberry‣ S60 Webkit‣ IE Mobile
Mobile Browser:‣ Iris‣ Bolt‣ Skyfire‣ Obigo‣ OpenWeb‣ Nokia S40‣ Palm Blazer‣ Fennec‣ Teashark‣ Ozone
![Page 24: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/24.jpg)
14 unterschiedliche Screengrössen
![Page 25: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/25.jpg)
... HTML/CSS support ist oft inkonsistent.
![Page 26: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/26.jpg)
Die Zukunft ist
Heute
![Page 27: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/27.jpg)
Die Zukunft liegt in Webstandards
![Page 28: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/28.jpg)
Webstandards...
![Page 29: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/29.jpg)
CSS Basierte Layouts vs. Tabellen LayoutTabellen sind complexer zu rendern.
![Page 30: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/30.jpg)
Trennung von Struktur und Inhalt(HTML), Design (CSS), und Interaktion (JavaScript)
![Page 31: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/31.jpg)
SemantikBedeutungsrelevantes HTML schreiben.
![Page 32: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/32.jpg)
Valides HTML... fehlerfreies HTML schreiben
![Page 33: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/33.jpg)
Performanceoptimieren !!
![Page 34: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/34.jpg)
Optimierung:HTMLCSSJavaScriptGrafiken
![Page 35: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/35.jpg)
Minifyminify JavaScripthttp://www.ventio.se/tools/minify-js/
minify CSShttp://www.ventio.se/tools/minify-css/
![Page 36: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/36.jpg)
JavaScript am Ende der Seite einbinden.
![Page 37: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/37.jpg)
CSS im <Head> einbinden
![Page 38: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/38.jpg)
YSLOW Firebug Pluginhttp://developer.yahoo.com/yslow/
![Page 39: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/39.jpg)
Safari Web Inspector
![Page 40: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/40.jpg)
‣ Seiten können schneller geladen werden
‣ Server requests werden verringert
Vorteil:
![Page 41: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/41.jpg)
mobileOKhttp://www.w3.org/TR/mobile-bp
![Page 42: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/42.jpg)
![Page 43: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/43.jpg)
![Page 44: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/44.jpg)
![Page 45: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/45.jpg)
Wie geht es weiter...
![Page 46: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/46.jpg)
CSS 3Präsentation
http://www.w3.org/TR/css3-roadmap/
![Page 48: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/48.jpg)
Moderne Browserverstehen Webstandards
![Page 49: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/49.jpg)
• open Source
• gute Webstandards Unterstützung(XHTML, HTML5, CSS3 ...)
• Bei vielen Marktführern(Apple, Nokia, Samsung, Google, Palm ...)
• wird in vielen Betriebssystemen eingesetzt(iOS, Android, webOS ...)
Webkit
![Page 50: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/50.jpg)
• Frei verfügbar
• gute Webstandards Unterstützung‚
• Für unterschiedliche Platformen erhältlich(iPhone, Andriod, Windows Mobile ...)
• für ältere Devices erhältlich
OperaMini
![Page 51: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/51.jpg)
CSS 3... coole Sache
![Page 52: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/52.jpg)
Media Queries...moderne Browser verstehen CSS 3
http://www.w3.org/TR/css3-mediaqueries/
![Page 53: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/53.jpg)
Media Queriesgezieltes ansprechen
![Page 54: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/54.jpg)
<link rel=“stylesheet“ ... media=“screen and (max-width: 480px)“ href=“...“>
@import url (“...“) screen and (max-width: 480px);
@media screen and (max-width: 480px) {
CSS regeln...
}
![Page 55: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/55.jpg)
HTML5
![Page 56: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/56.jpg)
Audio, Video und Canvas Element ...
![Page 57: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/57.jpg)
... kein Java, Flash, Silverlight
![Page 58: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/58.jpg)
...CSS 3 und HTML 5 rockt...
![Page 59: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/59.jpg)
... ein Beispiel
Hicksdesignhttp://hicksdesign.co.uk
![Page 60: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/60.jpg)
schicke Website...
![Page 61: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/61.jpg)
flexibles Layout
![Page 62: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/62.jpg)
flexibles Layout
![Page 63: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/63.jpg)
... und Mobile
![Page 64: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/64.jpg)
desktop Website...+ media queries
![Page 65: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/65.jpg)
desktop Website...+ media queries= mobile Website
![Page 66: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/66.jpg)
...Einzelfall, keineswegs!
dConstructhttp://2010.dconstruct.org/
![Page 67: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/67.jpg)
schicke Website...
![Page 68: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/68.jpg)
...Mobile
![Page 70: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/70.jpg)
schicke Website...
![Page 71: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/71.jpg)
flexibles Layout
![Page 72: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/72.jpg)
... und Mobile
![Page 73: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/73.jpg)
Metaangaben zumViewport...
![Page 74: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/74.jpg)
viewport meta...sichtbares Browserfenster
![Page 75: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/75.jpg)
<meta name=“vieport“ content=“width=device-width“>
<meta name=“vieport“ content=“width=device-width, initial-scale=1“>
![Page 76: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/76.jpg)
Problem Internet Explorer ...
![Page 77: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/77.jpg)
HTML5 und CSS3 Unterstützung erst mit dem Internet Explorer 9
![Page 78: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/78.jpg)
... was tun ?
![Page 79: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/79.jpg)
... seperate mobile Site?
![Page 80: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/80.jpg)
mobileWeb
Vielen Dank für Ihre
Aufmerksamkeit
Peter Rozek, 12.10.2010
![Page 81: Webstandards auf dem Weg zu Standards im Mobilen Bereich](https://reader033.fdocuments.net/reader033/viewer/2022051411/545c51eab0af9fa42c8b47b0/html5/thumbnails/81.jpg)
?Fragen
Peter Rozek, 12.10.2010