View
1.691
Download
0
Category
Preview:
DESCRIPTION
Citation preview
mobileWeb
WebstandardsAuf dem Weg zu
Standards im mobilen Web
Peter Rozek, 12.10.2010
mobileWeb
Peter Rozek...
... 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
Das mobile Web ist ein
Wachstumsmarkt...
... 1.8 Billionen Internet-Anschlüsse
http://www.internetworldstats.com
... 6.8 Billionen Menschen aktuell auf dem Erdball
... 3.4 Billionen Menschen mit einem Mobiltelefon
Rückblick...
Mobile Steinzeit:
WAP...Wat ?
WAP was ist DAT ?Wireles Access Protocol1997/98
WAPEigenes Markup (WML)
WAPReduziert und kein Design
WAP = Langweilig
WAP 2.0...ein wenig besser
...kein eigenes Markup, stattdessen HTTP und XHTML
...ein wenig mehr Design
...aber nicht wirklich interessant...
Status QuoVielzahl an Browsern und Endgeräten ...
2500 Modelle
50 unterschiedliche Betriebssysteme
‣ 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:
25 Browser
‣ 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
14 unterschiedliche Screengrössen
... HTML/CSS support ist oft inkonsistent.
Die Zukunft ist
Heute
Die Zukunft liegt in Webstandards
Webstandards...
CSS Basierte Layouts vs. Tabellen LayoutTabellen sind complexer zu rendern.
Trennung von Struktur und Inhalt(HTML), Design (CSS), und Interaktion (JavaScript)
SemantikBedeutungsrelevantes HTML schreiben.
Valides HTML... fehlerfreies HTML schreiben
Performanceoptimieren !!
Optimierung:HTMLCSSJavaScriptGrafiken
Minifyminify JavaScripthttp://www.ventio.se/tools/minify-js/
minify CSShttp://www.ventio.se/tools/minify-css/
JavaScript am Ende der Seite einbinden.
CSS im <Head> einbinden
YSLOW Firebug Pluginhttp://developer.yahoo.com/yslow/
Safari Web Inspector
‣ Seiten können schneller geladen werden
‣ Server requests werden verringert
Vorteil:
mobileOKhttp://www.w3.org/TR/mobile-bp
Wie geht es weiter...
CSS 3Präsentation
http://www.w3.org/TR/css3-roadmap/
Moderne Browserverstehen Webstandards
• 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
• Frei verfügbar
• gute Webstandards Unterstützung‚
• Für unterschiedliche Platformen erhältlich(iPhone, Andriod, Windows Mobile ...)
• für ältere Devices erhältlich
OperaMini
CSS 3... coole Sache
Media Queries...moderne Browser verstehen CSS 3
http://www.w3.org/TR/css3-mediaqueries/
Media Queriesgezieltes ansprechen
<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...
}
HTML5
Audio, Video und Canvas Element ...
... kein Java, Flash, Silverlight
...CSS 3 und HTML 5 rockt...
... ein Beispiel
Hicksdesignhttp://hicksdesign.co.uk
schicke Website...
flexibles Layout
flexibles Layout
... und Mobile
desktop Website...+ media queries
desktop Website...+ media queries= mobile Website
...Einzelfall, keineswegs!
dConstructhttp://2010.dconstruct.org/
schicke Website...
...Mobile
schicke Website...
flexibles Layout
... und Mobile
Metaangaben zumViewport...
viewport meta...sichtbares Browserfenster
<meta name=“vieport“ content=“width=device-width“>
<meta name=“vieport“ content=“width=device-width, initial-scale=1“>
Problem Internet Explorer ...
HTML5 und CSS3 Unterstützung erst mit dem Internet Explorer 9
... was tun ?
... seperate mobile Site?
mobileWeb
Vielen Dank für Ihre
Aufmerksamkeit
Peter Rozek, 12.10.2010
?Fragen
Peter Rozek, 12.10.2010
?E-Mail: peter.rozek@complexx.comE-Mail: rozek.p@think-green.deTwitter: Webinterface
Peter Rozek, 12.10.2010
Recommended