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

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

  • Upload
    djesse

  • View
    5.319

  • Download
    0

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: 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

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

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

Page 3: Für Wen, Wie Und Warum - Webstandards im Projektalltag
Page 4: Für Wen, Wie Und Warum - Webstandards im Projektalltag
Page 5: Für Wen, Wie Und Warum - Webstandards im Projektalltag
Page 6: Für Wen, Wie Und Warum - Webstandards im Projektalltag

DAS INTERNET

Was ist eigentlich …

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

Aus Anwendersicht

grenzenlose Freiheit,

junges, spannendes Medium,

ständig in Bewegung

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

Zugangsformen

Desktop-Rechner

Note-/Netbooks

TV-Geräte

Handy/PDA

Drucker

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

Assistive Technologien

Tastatursteuerung

Screen Reader

Zoom Software

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

Aus Entwicklersicht

Kontrollverlust

Der Nutzer entscheidet über

das Wie, Wo und Womit.

Focus auf Inhalte legen!

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

Falsche Götter…

Chefs

Auftraggeber

Designer

Suchmaschinen

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

Design for our future selves!Bereits heute sind über 30 Millionen (ca. 37%)

der Bundesbürger über 50 Jahre alt.

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

WEB STANDARDS

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

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

„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 Projecthttp://www.webstandards.org

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

Oger sind wie Zwiebeln

Schichten

1. Inhalt (MySQL, XML)

2. Struktur (HTML)

3. Präsentation (CSS)

4. Verhalten (JavaScript)

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

„Logik ist der Anfang aller Weisheit,

Lieutenant Valeris, nicht das Ende.“

Mr. Spock, Das Unentdeckte Land

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

Der Termin wurde gelöscht!

Der Termin wurde gelöscht!

Der Termin wurde gelöscht!

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

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>

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

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>

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

Beispiel

Newsletteranmeldung

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

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>

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

Beispiel

Newsletteranmeldung Verbesserungsvorschlag

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

Beispiel

Newsletteranmeldung Verbesserungsvorschlag<h1 class="documentFirstHeading"> Studierenden-Newsletter </h1><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>

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

Erwarte das Unerwartete

kein CSS

kein JavaScript

keine Bilder

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

Nutze die Vielfalt …

Progressive Enhancement Graceful Degradation

Browserfähigkeiten

Nu

tze

rerl

eb

nis

gering hoch entwickelt

BrowseralterN

utz

ere

rle

bn

isjung alt

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

Webstandards

Bessere Wartbarkeit

Bessere Performance

Bessere Zugänglichkeit

Mediengerechtes Arbeiten

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

Neugierig geworden?

Mehr zu Thema …

Lesen & Nachdenken:

Hören & Sehen:

Mehr von mir …

Homepage:

Twitter:

Webkrauts

Einführung in XHTML, CSS und Webdesign

Einfach für Alle

WCAG 2.0 (deutsch)

Technikwürze - der Webstandards Podcast

Highresolution.info

@djesse

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

Danke.

Fragen?