Für Wen, Wie Und Warum - Webstandards im Projektalltag

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

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

Was ist eigentlich … DAS INTERNET

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

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

Assistive Technologien Tastatursteuerung Screen Reader Zoom Software …

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

Falsche Götter… Chefs Auftraggeber Designer Suchmaschinen

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

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

„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

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

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

Der Termin wurde gelöscht! Der Termin wurde gelöscht! Der Termin wurde gelöscht!

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>

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>

Beispiel Newsletteranmeldung

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ö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>

Beispiel Newsletteranmeldung Verbesserungsvorschlag

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>

Erwarte das Unerwartete kein CSS kein JavaScript keine Bilder

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

Webstandards Bessere Wartbarkeit Bessere Performance Bessere Zugänglichkeit Mediengerechtes Arbeiten

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

Danke. Fragen?

Für Wen, Wie Und Warum - Webstandards im Projektalltag

by djesse on Nov 12, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 360

Statistics

Für Wen, Wie Und Warum - Webstandards im Projektalltag — Presentation Transcript

http://www.highresolution.info	356
http://www.slideshare.net	4