mobile  Webstandards
       Auf dem Weg zu
        Standards im

 Web    mobilen Web

 Peter Rozek, 12.10.2010
mobile
 Peter Rozek
      ...

 Web
mobile
... seit 2010 bei der ecomplexx GmbH als Frontend-
Developer für die barrierefreie und
gebrauchtsaugliche Entwicklu...
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 Protocol
1997/98
WAP
Eigenes Markup (WML)
WAP
Reduziert 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 Quo
Vielzahl an Browsern und
Endgeräten ...
2500 Modelle
50 unterschiedliche
Betriebssysteme
Betriebssysteme:
‣ Symbian S60 (Nokia, Samsung
‣ Windows Mobile (Samsung, HTC)
‣ Blackberry (RIM)
‣ Android (HTC, Samsung,...
25 Browser
Mobile Browser:
‣ Android Webkit   ‣ Iris
‣ Opera Mobile     ‣ Bolt
‣ NetFront         ‣ Skyfire
‣ Safari           ‣ Obig...
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 Layout
Tabellen sind complexer
zu rendern.
Trennung von Struktur
und Inhalt(HTML), Design
(CSS), und Interaktion
(JavaScript)
Semantik
Bedeutungsrelevantes
HTML schreiben.
Valides HTML
... fehlerfreies HTML
schreiben
Performance
  optimieren !!
Optimierung:
HTML
CSS
JavaScript
Grafiken
Minify
minify JavaScript
http://www.ventio.se/tools/minify-js/

minify CSS
http://www.ventio.se/tools/minify-css/
JavaScript am Ende
der Seite einbinden.
CSS im <Head>
einbinden
YSLOW Firebug
Plugin
http://developer.yahoo.com/yslow/
Safari
Web Inspector
Vorteil:
‣ Seiten können schneller
  geladen werden
‣ Server requests werden
  verringert
mobileOK
http://www.w3.org/TR/mobile-bp
Wie geht es weiter...
CSS 3
           Präsentation


http://www.w3.org/TR/css3-roadmap/
HTML5
           Inhalt


http://www.w3.org/TR/html5/
Moderne Browser
verstehen Webstandards
Webkit
• open Source
• gute Webstandards Unterstützung
  (XHTML, HTML5, CSS3 ...)
• Bei vielen Marktführern
  (Apple, Noki...
OperaMini
• Frei verfügbar
• gute Webstandards Unterstützung‚
• Für unterschiedliche Platformen
  erhältlich
  (iPhone, An...
CSS 3
... coole Sache
Media Queries
...moderne Browser
verstehen CSS 3
http://www.w3.org/TR/css3-mediaqueries/
Media Queries
gezieltes ansprechen
<link rel=“stylesheet“ ...
media=“screen and (max-width: 480px)“
href=“...“>

@import url (“...“) screen and (max-width: 4...
HTML5
Audio, Video und Canvas
Element ...
... kein Java, Flash,
Silverlight
...CSS 3 und HTML 5
rockt...
... ein Beispiel

Hicksdesign
http://hicksdesign.co.uk
schicke Website...
flexibles Layout
flexibles Layout
... und Mobile
+ media queries
desktop Website...
= mobile Website
+ media queries
desktop Website...
...Einzelfall, keineswegs!

dConstruct
http://2010.dconstruct.org/
schicke Website...
...Mobile
Simon Collison
http://2010.dconstruct.org/
schicke Website...
flexibles Layout
... und Mobile
Metaangaben zum
Viewport
...
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?
mobile Vielen Dank für
             Ihre

 Web  Aufmerksamkeit

 Peter Rozek, 12.10.2010
Fragen


Peter Rozek, 12.10.2010
E-Mail: peter.rozek@complexx.com
E-Mail: rozek.p@think-green.de
Twitter: Webinterface




Peter Rozek, 12.10.2010
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Nächste SlideShare
Wird geladen in …5
×

Webstandards auf dem Weg zu Standards im Mobilen Bereich

1.711 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.711
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2
Aktionen
Geteilt
0
Downloads
13
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Webstandards auf dem Weg zu Standards im Mobilen Bereich

  1. 1. mobile Webstandards Auf dem Weg zu Standards im Web mobilen Web Peter Rozek, 12.10.2010
  2. 2. mobile Peter Rozek ... Web
  3. 3. mobile ... seit 2010 bei der ecomplexx GmbH als Frontend- Developer für die barrierefreie und gebrauchtsaugliche Entwicklung von Websites. ...Usability Professional im AK Barrierefreiheit Web ... mit think green - neue Medien im Einkaufsführer Barrierefreies Internet aufgenommen und Unterstützer im Aktionsbündnis für barrierefreie Informationstechnik.
  4. 4. Das mobile Web ist ein Wachstumsmarkt ...
  5. 5. ... 1.8 Billionen Internet-Anschlüsse http://www.internetworldstats.com
  6. 6. ... 6.8 Billionen Menschen aktuell auf dem Erdball
  7. 7. ... 3.4 Billionen Menschen mit einem Mobiltelefon
  8. 8. Rückblick ...
  9. 9. Mobile Steinzeit: WAP ...Wat ?
  10. 10. WAP was ist DAT ? Wireles Access Protocol 1997/98
  11. 11. WAP Eigenes Markup (WML)
  12. 12. WAP Reduziert und kein Design
  13. 13. WAP = Langweilig
  14. 14. WAP 2.0 ...ein wenig besser
  15. 15. ...kein eigenes Markup, stattdessen HTTP und XHTML
  16. 16. ...ein wenig mehr Design
  17. 17. ...aber nicht wirklich interessant...
  18. 18. Status Quo Vielzahl an Browsern und Endgeräten ...
  19. 19. 2500 Modelle
  20. 20. 50 unterschiedliche Betriebssysteme
  21. 21. 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.
  22. 22. 25 Browser
  23. 23. Mobile Browser: ‣ Android Webkit ‣ Iris ‣ Opera Mobile ‣ Bolt ‣ NetFront ‣ Skyfire ‣ Safari ‣ Obigo ‣ Opera Mini ‣ OpenWeb ‣ Blackberry ‣ Nokia S40 ‣ S60 Webkit ‣ Palm Blazer ‣ IE Mobile ‣ Fennec ‣ Teashark ‣ Ozone
  24. 24. 14 unterschiedliche Screengrössen
  25. 25. ... HTML/CSS support ist oft inkonsistent.
  26. 26. Die Zukunft ist Heute
  27. 27. Die Zukunft liegt in Webstandards
  28. 28. Webstandards ...
  29. 29. CSS Basierte Layouts vs. Tabellen Layout Tabellen sind complexer zu rendern.
  30. 30. Trennung von Struktur und Inhalt(HTML), Design (CSS), und Interaktion (JavaScript)
  31. 31. Semantik Bedeutungsrelevantes HTML schreiben.
  32. 32. Valides HTML ... fehlerfreies HTML schreiben
  33. 33. Performance optimieren !!
  34. 34. Optimierung: HTML CSS JavaScript Grafiken
  35. 35. Minify minify JavaScript http://www.ventio.se/tools/minify-js/ minify CSS http://www.ventio.se/tools/minify-css/
  36. 36. JavaScript am Ende der Seite einbinden.
  37. 37. CSS im <Head> einbinden
  38. 38. YSLOW Firebug Plugin http://developer.yahoo.com/yslow/
  39. 39. Safari Web Inspector
  40. 40. Vorteil: ‣ Seiten können schneller geladen werden ‣ Server requests werden verringert
  41. 41. mobileOK http://www.w3.org/TR/mobile-bp
  42. 42. Wie geht es weiter...
  43. 43. CSS 3 Präsentation http://www.w3.org/TR/css3-roadmap/
  44. 44. HTML5 Inhalt http://www.w3.org/TR/html5/
  45. 45. Moderne Browser verstehen Webstandards
  46. 46. Webkit • 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 ...)
  47. 47. OperaMini • Frei verfügbar • gute Webstandards Unterstützung‚ • Für unterschiedliche Platformen erhältlich (iPhone, Andriod, Windows Mobile ...) • für ältere Devices erhältlich
  48. 48. CSS 3 ... coole Sache
  49. 49. Media Queries ...moderne Browser verstehen CSS 3 http://www.w3.org/TR/css3-mediaqueries/
  50. 50. Media Queries gezieltes ansprechen
  51. 51. <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... }
  52. 52. HTML5
  53. 53. Audio, Video und Canvas Element ...
  54. 54. ... kein Java, Flash, Silverlight
  55. 55. ...CSS 3 und HTML 5 rockt...
  56. 56. ... ein Beispiel Hicksdesign http://hicksdesign.co.uk
  57. 57. schicke Website...
  58. 58. flexibles Layout
  59. 59. flexibles Layout
  60. 60. ... und Mobile
  61. 61. + media queries desktop Website...
  62. 62. = mobile Website + media queries desktop Website...
  63. 63. ...Einzelfall, keineswegs! dConstruct http://2010.dconstruct.org/
  64. 64. schicke Website...
  65. 65. ...Mobile
  66. 66. Simon Collison http://2010.dconstruct.org/
  67. 67. schicke Website...
  68. 68. flexibles Layout
  69. 69. ... und Mobile
  70. 70. Metaangaben zum Viewport ...
  71. 71. viewport meta ...sichtbares Browserfenster
  72. 72. <meta name=“vieport“ content=“width=device-width“> <meta name=“vieport“ content=“width=device-width, initial-scale=1“>
  73. 73. Problem Internet Explorer ...
  74. 74. HTML5 und CSS3 Unterstützung erst mit dem Internet Explorer 9
  75. 75. ... was tun ?
  76. 76. ... seperate mobile Site?
  77. 77. mobile Vielen Dank für Ihre Web Aufmerksamkeit Peter Rozek, 12.10.2010
  78. 78. Fragen Peter Rozek, 12.10.2010
  79. 79. E-Mail: peter.rozek@complexx.com E-Mail: rozek.p@think-green.de Twitter: Webinterface Peter Rozek, 12.10.2010

×