Webstandards auf dem Weg zu Standards im Mobilen Bereich

1,735 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,735
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×