Das Dokument behandelt die Flexibilität des Internets und die Herausforderungen bei der Entwicklung von Webseiten, betont die Bedeutung von Inhalten über Layout und die Notwendigkeit, Barrierefreiheit zu integrieren. Es werden Probleme mit Browser-Kompatibilität, die Rolle von Frontendentwicklern und die Notwendigkeit einer klaren Kommunikation zwischen den Projektbeteiligten angesprochen. Zudem wird auf die Wichtigkeit von semantisch korrektem HTML und CSS hingewiesen, um zugängliche und benutzerfreundliche Webseiten zu erstellen.

1. Die Flexibilität des Internet im Spiegel des Frontend Webseiten sind keine Gemälde Jens Grochtdreis – Webseiten sind keine Gemälde

2. Jens Grochtdreis Frontendentwickler 10 Jahre Agenturerfahrung Gründer der Webkrauts Blogger Autor des PHPMagazins, Webstandards-Magazins, T3N Fachliche Buchbetreuung bei Galileo, O'Reilly, MuT

3. http://failblog.files.wordpress.com/2009/10/epic-fail-quality-hotel-fail.jpg

4. http://failblog.files.wordpress.com/2009/09/epic-fail-power-line-fail.jpg

5. Das sollten wir nicht vergessen! Das Internet ist ein neues Medium! junges Medium rasante Entwicklung spannend atemberaubend umwälzend in ständigem Wandel begriffen

6. Das sollten wir nicht vergessen! Das Internet bietet viele unterschiedliche Zugänge zu Informationen Am Monitor lesen Ausdrucken Vorlesen lassen Formate sind anpassbar Inhalte lassen sich leicht rudimentär übersetzen Wir wissen nichts Definitives über das Zielsystem

7. Kontrollverlust - formal Wie können wir heute ins Internet gehen? PC, Notebook viele Betriebssysteme, Browser, Monitore Handy, PDA Spielkonsole TV Assistive Technologien

8. Unsicherheiten Betriebssysteme Browser Browserversionen Individuelle Einrichtungen des Browsers Monitorauflösungen Umgebungslicht Mobiler Zugriff Zugriffsgeschwindigkeit Plugins Javascript

9. Flexibilität ist Stärke Die Flexibilität des Internet ist seine Stärke. Akzeptiert es! Macht Euch locker! Bild: http://snipurl.com/2c1yl

10. Flexibilität ist wichtig Wir können nicht mehr sicher vorhersagen, wie jemand unsere Seite sieht/liest. Deshalb: einen für möglichst viele gangbaren Weg beschreiten Erst der Inhalt, dann das Layout! Der Inhalt ist das Wichtigste!

11. Screenshot von einem EeePC, 800x480px

12. Wir stehen am Anfang Wir stehen noch immer am Anfang. HTML in der jetzigen Form genügt nicht! Webseiten sind immer seltener Dokumente. HTML5 ist ein wichtiger und erster Schritt.

17. Problemfeld: Browser Der IE in allen Versionen kann einfach weniger als alle anderen Browser Der IE6 ist nicht tot zu kriegen Fortschritt richtet sich nach dem Langsamsten (IE) wegen der Verbreitung Nur Entwickler interessieren sich für Browser

18. http://www.flickr.com/photos/fmg2001/679774853/sizes/o/

19. Graded Browser Support http://developer.yahoo.com/yui/articles/gbs/

20. http://snurl.com/t58bi

21. „Schweizer Messer“ für den IE6 position: relative zoom: 1 height: 1% bei Floats: display: inline

22. http://snurl.com/t58ch

23. Problemfeld: Entwickler Die Opera-MAMA-Studie hat erschreckende Codedefizite zu Tage gefördert: 58,5% Webseiten ohne Überschriften-Elemente 7,9% mit mehreren <h1> 16,1% beginnen Überschriften-Struktur mit <h2>, <h3> 7,1% mit Überschriften ohne logische Reihenfolge 24,9% mit Bildern ohne alt-Attribute 4,13% der Testseiten validierten Quelle: http://www.einfach-fuer-alle.de/blog/id/2505/

24. Das Internet ist komplex Wir nutzen sehr viele verschiedene Standards und Technologien, um eine Website zu betreiben. (X)HTML, CSS, Javascript, DOM 1-3 Flash, Flex, SWF PHP, ASP, Perl, Java MySQL, PostgreSQL XML, XSLT ...

25. Kommunikation ist alles! Unterschiedliche Erwartungen und Wissensstände führen immer wieder zu Kommunikationsproblemen. Kunde, Kundenberater, Designer, Konzepter, Entwickler sollten möglichst die gleiche Sprache sprechen. Zumindest sollten sie einander verstehen. Immer den Endnutzer im Blick haben, wenn es der Kunde schon nicht macht.

26. Der Projektalltag

27. Der Projektalltag

28. Der Projektalltag

29. Der Projektalltag http://www.projectcartoon.com/cartoon/27

30. Agenturalltag http://vikiworks.com/2007/08/27/flat-panel-monitor-icon/

31. Selber denken macht schlau!

32. Der Frontendentwickler ist ein Übersetzer!

33. Frontendentwickler als Übersetzer Das Frontend ist das Einzige, das der Nutzer sieht. Ein CMS oder die weitere Technik hinter der Seite interessiert den Nutzer nicht. Entscheidungen aller anderen „Gewerke“ fliessen in das Frontend ein. Also sollte der Frontendentwickler mitsprechen. Verständigung zwischen Grafik, Beratung und Backend herstellen, denn der Frontendentwickler sollte sie alle verstehen!

34. Informationen sammeln http://snurl.com/t58dc

35. http://dev.opera.com/articles/wsc/

36. http://webkrauts.de

37. http://jendryschik.de/wsdev/einfuehrung/

38. http://little-boxes.de/little-boxes-teil1-online.html

39. http://ajaxian.com/

40. http://developer.yahoo.com/yui/

41. http://developer.yahoo.com/yui/theater/

42. http://yuiblog.com/

43. http://developer.yahoo.com/ypatterns/

44. http://icant.co.uk/

45. http://www.webkrauts.de/krautcosmos/

46. http://www.einfach-fuer-alle.de/

47. http://planet.jquery.com/

48. http://net.tutsplus.com/

49. http://www.smashingmagazine.com/

50. http://sixrevisions.com/

51. Gute Bücher

55. Beliebte Problemfälle

56. Gleich hohe Boxen

57. Gleich hohe Boxen http://www.yaml.de/de/dokumentation/anwendung/subtemplates.html

58. Gleich hohe Boxen http://www.positioniseverything.net/articles/onetruelayout/equalheight moderne Browser IE6 und 7

59. Reiter

60. Reiter http://github.com/ginader/Accessible-Tabs

61. Runde Ecken

62. Runde Ecken http://www.cssjuice.com/25-rounded-corners-techniques-with-css/

63. Runde Ecken - The ThrashBox http://www.vertexwerks.com/tests/sidebox/

64. Runde Ecken für moderne Browser

65. Runde Ecken für moderne Browser

66. Infoseite zu CSS3 http://www.css3.info /

67. Massenweise Requests

68. Massenweise Requests - CSS-Sprites http://www.alistapart.com/articles/sprites/

69. Massenweise Requests - CSS-Sprites

70. Performance http://developer.yahoo.com/performance/rules.html

71. Performance

72. Performance http://www.stevesouders.com /

73. http://snurl.com/t58fj

74. Semantik Mit der Bedeutung der Inhalte beschäftigen Die Struktur erfassen und aufschreiben Eine Überschrift wird mit beispielsweise <h2>Überschrift</h2> ausgezeichnet, nicht mit <div class=&quot;headline&quot;>Überschrift</div> Eine semantisch ausgezeichnete Seite zeigt, daß man sich Gedanken über seine Arbeit gemacht hat.

75. Semantik Webseiten sind heute mehr als nur Dokumente. Die Dokumentenanalogie ist alt Es sollten wissenschaftliche Texte erfaßt werden HTML5 ist der Versuch, der Realität gerecht zu werden Es gibt immer mehr Applikationen Viele notwendige Seitenelemente gibt es nicht in HTML, diese müssen wir per CSS und Javascript simulieren

76. Überschriften Webseiten sind immer seltener Dokumente Kann ein Dokument mehrere h1 vertragen? Nur eine h1? Warum? Wir vermeiden sonst Analogien zur Printwelt. Warum nicht auch hier? Struktur für Sehende und Blinde anders? Reichen sechs Überschriften? Was machen Browser mit Sektionsüberschriften in HTML5 und machen sie das einheitlich?

77. Überschriften Überschriften sind eine Navigationsmöglichkeit für Screenreader. Wikis generieren aus den Textüberschriften eine seiteninterne Navigation, ein Inhaltsverzeichnis.

78. Kenne Dein (X)HTML Wie sehen ungeordnete Listen aus? Wie sehen geordnete Listen aus? Wie sieht eine Überschrift zweiter Ordnung aus?

81. Simples Browser-Reset

82. Safari4 (Mac) Firefox 3.5 (Mac)

83. Safari4 (Mac) Firefox 3.5 (Mac)

84. Eingebaute und individuelle Stylesheets HTML sieht nicht aus, sondern transportiert Bedeutung! Auch Browser nutzen Stylesheets, um HTML anzuzeigen. Jeder Browser hat sein eigenes Stylesheet. Nutzerstylesheets sind möglich. Letztendliche Sicherheit über die Darstellung einer Seite gibt es nicht. Man kann aber dafür sorgen, daß ein Layout nicht allzu schnell &quot;zerstört&quot; wird. Für ein Userstylesheet ist die Notation !important wichtig, damit alle vorherigen Definitionen überschrieben werden. Also bspw.: p { color: black !important;}

85. Reset-Stylesheet von Yahoo!

86. Reset-CSS von Eric Meyer

87. Keine Tabellen? Doch! Tabellen sind für tabellarische Daten da! Für Layoutzwecke gibt es CSS! ABER: eine Tabelle ist auch im Code eine komplexe Sache. Es gibt mehr als nur <table>, <tr> und <td>. Man unterschiedliche Bereiche in Head, Foot und Body unterteilen: <thead>...</thead>, <tfoot>...</tfoot>, <tbody>...</tbody> Man kann Spalten zu Komplexen zusammenfassen: <colgroup>...</colgroup>, <col />

88. http://www.flickr.com/photos/webseeings/239301576

89. http://burgenlandfeuerwehr.de /

90. Barrierefreiheit laut Gesetz „Barrierefrei sind [..,] technische Gebrauchsgegenstände, Systeme der Informationsverarbeitung, akustische und visuelle Informationsquellen und Kommunikationseinrichtungen [...], wenn sie für behinderte Menschen in der allgemein üblichen Weise, ohne besondere Erschwernis und grundsätzlich ohne fremde Hilfe zugänglich und nutzbar sind.“

92. Für wen? Körperbehinderung Motorische Behinderungen Contergan Sinnesbehinderungen Farbfehlsichtigkeit Blindheit Gehörlosigkeit Taubblindheit Lernbehinderung Legasthenie Dyslexie Geistige Behinderung Down-Syndrom

93. Für wen?

94. Zielgruppen

95. http://snurl.com/t58c8

96. Kampfbegriff? Der Begriff „Barrierefreiheit“ beinhaltet ein sehr weitgehendes Versprechen. Im Englischen: Accessibility (= Zugänglichkeit) In der deutschen Diskussion einseitig auf Behinderte und vor allem auf Blinde konzentriert. Bei Barrierefreiheit geht es um Anwender, für die eine Seite nur eingeschränkt nutzbar ist.

97. http://snurl.com/t58gj

98. Was Barrierefreiheit NICHT ist

99. Barrierefreie Seiten müssen nicht hässlich sein!

102. http://www.ble.de/

103. http://www.hauptbahnhof-wien.at/

104. http://www.darmkrebs.at/

105. 4 Grundprinzipien der WCAG2.0 POUR Inhalte müssen wahrnehmbar sein (Perceivable) Benutzerschnittstellen im Inhalt müssen bedienbar sein (Operable) Inhalte und Bedienelemente müssen verständlich sein (Understandable) Inhalte sollten robust genug sein, um mit aktuellen und zukünftigen Benutzeragenten zu arbeiten (inklusive assistiver Hilfsmittel) (Robust)

106. Grundregeln Valides und semantisch korrektes (X)HTML und valides CSS Inhalte müssen textlich transportiert werden. Kein Verstecken von Texten in Grafiken. Ausreichende Farbkontraste Abkürzungen, Akronyme und Sprachwechsel müssen markiert/erklärt werden. Für Medien müssen Alternativen vorliegen. Bilder bekommen ein Alt- Attribut , es sei denn, sie sind rein dekorativ

107. Barrierefreiheit leben Barrierefreiheit ist weniger ein technisches Problem, als das einer vernünftigen Planung. Zudem endet Barrierefreiheit nicht mit dem Launch. Sie muss täglich gelebt werden. Ein technisches Produkt wie ein CMS kann Barrierefreiheit nur unterstützen, wichtiger sind allerdings die Redakteure, die sich an Regeln halten müssen.

108. Automatisierte Tests Eine fehlerfreies Abschneiden in einem automatisierten Test sagt aber nur, daß die Seite dieses Tool „übersteht“. Mehr nicht! Barrierefreiheit ist für Menschen da, deshalb sollten auch Menschen sie testen.

109. Am Ende Jens Grochtdreis http://blog.grochtdreis.de http://webkrauts.de Diese Präsentation steht unter der Creative Commons Lizenz „Attribution-ShareAlike 2.0“ http://creativecommons.org/licenses/by-sa/2.0/de/