für wen, wie und warum - webstandards im projektalltag
DESCRIPTION
Kleine Einführung in die Arbeit mit Webstandards im Rahmen des World Usability Days 2009 in Dresden.TRANSCRIPT
![Page 1: Für Wen, Wie Und Warum - Webstandards im Projektalltag](https://reader033.vdocuments.site/reader033/viewer/2022051609/545c51eeaf7959c3098b472d/html5/thumbnails/1.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051609/545c51eeaf7959c3098b472d/html5/thumbnails/2.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051609/545c51eeaf7959c3098b472d/html5/thumbnails/3.jpg)
![Page 4: Für Wen, Wie Und Warum - Webstandards im Projektalltag](https://reader033.vdocuments.site/reader033/viewer/2022051609/545c51eeaf7959c3098b472d/html5/thumbnails/4.jpg)
![Page 5: Für Wen, Wie Und Warum - Webstandards im Projektalltag](https://reader033.vdocuments.site/reader033/viewer/2022051609/545c51eeaf7959c3098b472d/html5/thumbnails/5.jpg)
![Page 6: Für Wen, Wie Und Warum - Webstandards im Projektalltag](https://reader033.vdocuments.site/reader033/viewer/2022051609/545c51eeaf7959c3098b472d/html5/thumbnails/6.jpg)
DAS INTERNET
Was ist eigentlich …
![Page 7: Für Wen, Wie Und Warum - Webstandards im Projektalltag](https://reader033.vdocuments.site/reader033/viewer/2022051609/545c51eeaf7959c3098b472d/html5/thumbnails/7.jpg)
Aus Anwendersicht
grenzenlose Freiheit,
junges, spannendes Medium,
ständig in Bewegung
![Page 8: Für Wen, Wie Und Warum - Webstandards im Projektalltag](https://reader033.vdocuments.site/reader033/viewer/2022051609/545c51eeaf7959c3098b472d/html5/thumbnails/8.jpg)
Zugangsformen
Desktop-Rechner
Note-/Netbooks
TV-Geräte
Handy/PDA
Drucker
![Page 9: Für Wen, Wie Und Warum - Webstandards im Projektalltag](https://reader033.vdocuments.site/reader033/viewer/2022051609/545c51eeaf7959c3098b472d/html5/thumbnails/9.jpg)
Assistive Technologien
Tastatursteuerung
Screen Reader
Zoom Software
…
![Page 10: Für Wen, Wie Und Warum - Webstandards im Projektalltag](https://reader033.vdocuments.site/reader033/viewer/2022051609/545c51eeaf7959c3098b472d/html5/thumbnails/10.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051609/545c51eeaf7959c3098b472d/html5/thumbnails/11.jpg)
Falsche Götter…
Chefs
Auftraggeber
Designer
Suchmaschinen
![Page 12: Für Wen, Wie Und Warum - Webstandards im Projektalltag](https://reader033.vdocuments.site/reader033/viewer/2022051609/545c51eeaf7959c3098b472d/html5/thumbnails/12.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051609/545c51eeaf7959c3098b472d/html5/thumbnails/13.jpg)
WEB STANDARDS
Das Gute an Standards ist, dass es so viele davon gibt!
![Page 14: Für Wen, Wie Und Warum - Webstandards im Projektalltag](https://reader033.vdocuments.site/reader033/viewer/2022051609/545c51eeaf7959c3098b472d/html5/thumbnails/14.jpg)
„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](https://reader033.vdocuments.site/reader033/viewer/2022051609/545c51eeaf7959c3098b472d/html5/thumbnails/15.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051609/545c51eeaf7959c3098b472d/html5/thumbnails/16.jpg)
„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](https://reader033.vdocuments.site/reader033/viewer/2022051609/545c51eeaf7959c3098b472d/html5/thumbnails/17.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051609/545c51eeaf7959c3098b472d/html5/thumbnails/18.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051609/545c51eeaf7959c3098b472d/html5/thumbnails/19.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051609/545c51eeaf7959c3098b472d/html5/thumbnails/20.jpg)
Beispiel
Newsletteranmeldung
![Page 21: Für Wen, Wie Und Warum - Webstandards im Projektalltag](https://reader033.vdocuments.site/reader033/viewer/2022051609/545c51eeaf7959c3098b472d/html5/thumbnails/21.jpg)
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>
![Page 22: Für Wen, Wie Und Warum - Webstandards im Projektalltag](https://reader033.vdocuments.site/reader033/viewer/2022051609/545c51eeaf7959c3098b472d/html5/thumbnails/22.jpg)
Beispiel
Newsletteranmeldung Verbesserungsvorschlag
![Page 23: Für Wen, Wie Und Warum - Webstandards im Projektalltag](https://reader033.vdocuments.site/reader033/viewer/2022051609/545c51eeaf7959c3098b472d/html5/thumbnails/23.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051609/545c51eeaf7959c3098b472d/html5/thumbnails/24.jpg)
Erwarte das Unerwartete
kein CSS
kein JavaScript
keine Bilder
![Page 25: Für Wen, Wie Und Warum - Webstandards im Projektalltag](https://reader033.vdocuments.site/reader033/viewer/2022051609/545c51eeaf7959c3098b472d/html5/thumbnails/25.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051609/545c51eeaf7959c3098b472d/html5/thumbnails/26.jpg)
Webstandards
Bessere Wartbarkeit
Bessere Performance
Bessere Zugänglichkeit
Mediengerechtes Arbeiten
![Page 27: Für Wen, Wie Und Warum - Webstandards im Projektalltag](https://reader033.vdocuments.site/reader033/viewer/2022051609/545c51eeaf7959c3098b472d/html5/thumbnails/27.jpg)
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](https://reader033.vdocuments.site/reader033/viewer/2022051609/545c51eeaf7959c3098b472d/html5/thumbnails/28.jpg)
Danke.
Fragen?