Kleine Einführung in die Arbeit mit Webstandards im Rahmen des World Usability Days 2009 in Dresden.

1. Für wen, wie und warum?
Webstandards im Projektalltag
Dirk Jesse, Highresolution.info World Usability Day 2009, Dresden

2. Zur Person
Dirk Jesse
• Bauingenieur aus Dresden
• Freiberuflicher Softwareentwickler:
– CSS Framework „Yet Another Multicolumn Layout“ (YAML)
– JavaScript-Applikationen
– CSSDOC
• Autor
– T3N Magazin, Webstandards Magazin
– Fachbuch „CSS-Layouts, Praxislösungen mit YAML 3.0“
• Redaktion Webkrauts

6. Was ist eigentlich …
DAS INTERNET

7. Aus Anwendersicht
grenzenlose Freiheit,
junges, spannendes Medium,
ständig in Bewegung

8. Zugangsformen
TV-Geräte
Drucker
Note-/Netbooks Handy/PDA
Desktop-Rechner

9. Assistive Technologien
Tastatursteuerung
Screen Reader
Zoom Software
…

10. Aus Entwicklersicht
Kontrollverlust
Der Nutzer entscheidet über
das Wie, Wo und Womit.
Focus auf Inhalte legen!

11. Falsche Götter…
Chefs
Auftraggeber
Designer
Suchmaschinen

12. Design for our future selves!
Bereits heute sind über 30 Millionen (ca. 37%)
der Bundesbürger über 50 Jahre alt.

13. Das Gute an Standards ist, dass es so viele davon gibt!
WEB STANDARDS

14. „Wer sich beim Entwerfen und Erstellen von Websites
an diese Standards hält, vereinfacht die Produktion und
senkt die Kosten, während gleichzeitig Websites
entstehen, die für mehr Menschen und mehr
webfähige Endgeräte zugänglich sind.“
The Webstandards Project
http://www.webstandards.org

15. Oger sind wie Zwiebeln
Schichten
1. Inhalt (MySQL, XML)
2. Struktur (HTML)
3. Präsentation (CSS)
4. Verhalten (JavaScript)

16. „Logik ist der Anfang aller Weisheit,
Lieutenant Valeris, nicht das Ende.“
Mr. Spock, Das Unentdeckte Land

17. Der Termin wurde gelöscht!
Der Termin wurde gelöscht!
Der Termin wurde gelöscht!

18. Der Termin wurde gelöscht!
<p><img src="/images/icons/img014.png" width="30"
height="30" alt=""><img src="/images/icons/spacer.gif"
width="20" alt=""><font color="#008800">Der Termin wurde
gelöscht!</font></p>
Der Termin wurde gelöscht!
<p><img src="/images/icons/img035.png" width="30"
height="30" alt=""><img src="/images/icons/spacer.gif"
width="20" alt=""><font color="#c00000">Der Termin wurde
gelöscht!</font></p>
Der Termin wurde gelöscht!
<p><img src="/images/icons/img008.png" width="30"
height="30" alt=""><img src="/images/icons/spacer.gif"
width="20" alt=""><font color="#ffffff">Der Termin wurde
gelöscht!</font></p>

19. Der Termin wurde gelöscht!
<p class="success">Der Termin wurde gelöscht!</p>
Der Termin wurde gelöscht!
<p class="error">Der Termin wurde gelöscht!</p>
Der Termin wurde gelöscht!
<p class="message">Der Termin wurde gelöscht!</p>

20. Beispiel
Newsletteranmeldung

21. Beispiel
Newsletteranmeldung Verbesserungsvorschlag
<h1 class="documentFirstHeading">Studierenden-Newsletter</h1>
<div id="bodyContent" class="plain">
<div id="include_before" class="plain">
<p><strong style="margin-right:100px;"><a href="?par=1">Zum aktuellen
Newsletter</a></strong><a href="?par=2">Zum Newsletter-Archiv</a></p>
<br class="foatclearer">
<p>Hier k&ouml;nnen Sie sich beim Studierenden-Newsletter an- und abmelden.</p>
<form action="" method="post" name="form">
<p style="margin-bottom:0;"> <span style="padding:0 10px 0 0;" >E-Mail
Adresse:</span>
<input type="Text" name="email" value="" size="42">
<input type="Submit" name="send" value="OK" class="ok">
</p>
<p style="padding-left:100px;">
<input type="Radio" name="status" value="1">
anmelden
<input type="Radio" name="status" value="2" style="margin-left:30px;" >
abmelden </p>
</form>
</div>
</div>

22. Beispiel
Newsletteranmeldung Verbesserungsvorschlag

23. Beispiel
<h1 class="documentFirstHeading"> Studierenden-Newsletter </h1>
Newsletteranmeldung Verbesserungsvorschlag
<div id="include_before" class="plain">
<ul>
<li><a href="?par=1">Den aktuellen Newsletter online lesen</a></li>
<li><a href="?par=2">Zum Newsletter-Archiv</a></li>
</ul>
<p>Nutzen Sie das folgende Formular, um sich beim Studierenden-Newsletter an- oder
abzumelden.</p>
<form action="" method="post" name="form" class="yform columnar" id="form">
<fieldset>
<legend>Newsletter An- und Abmeldung</legend>
<div class="type-text">
<label for="email">Ihre E-Mail Adresse:</label>
<input id="email" name="email" size="42" type="text" />
</div>
<div class="type-check">
<input checked="checked" name="status" id="add" value="1" type="radio" />
<label for="add">anmelden</label>
</div>
<div class="type-check">
<input name="status" value="2" id="remove" type="radio" />
<label for="remove">abmelden</label>
</div>
<div class="type-button">
<input class="context" name="send" value="Absenden" type="submit" />
</div>
</fieldset>
</form>
</div>
</div>

24. Erwarte das Unerwartete
kein CSS
kein JavaScript
keine Bilder

25. Nutze die Vielfalt …
Progressive Enhancement Graceful Degradation
Nutzererlebnis
Nutzererlebnis
gering hoch entwickelt jung alt
Browserfähigkeiten Browseralter

26. Webstandards
Bessere Wartbarkeit
Bessere Performance
Bessere Zugänglichkeit
Mediengerechtes Arbeiten

27. Neugierig geworden?
Mehr zu Thema …
Lesen & Nachdenken: Webkrauts
Einführung in XHTML, CSS und Webdesign
Einfach für Alle
WCAG 2.0 (deutsch)
Hören & Sehen: Technikwürze - der Webstandards Podcast
Mehr von mir …
Homepage: Highresolution.info
Twitter: @djesse

28. Danke.
Fragen?