Für wen, wie und warum?
            Webstandards im Projektalltag




Dirk Jesse, Highresolution.info   World Usability Da...
Zur Person
Dirk Jesse
•   Bauingenieur aus Dresden

•   Freiberuflicher Softwareentwickler:
    –   CSS Framework „Yet Ano...
Was ist eigentlich …

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




TV-Geräte
                                                       Drucker


        Note-/Netbooks       ...
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 a...
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 Ko...
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/sp...
Der Termin wurde gelöscht!
<p class="success">Der Termin wurde gelöscht!</p>




Der Termin wurde gelöscht!
<p class="erro...
Beispiel
Newsletteranmeldung
Beispiel
Newsletteranmeldung                    Verbesserungsvorschlag
             <h1 class="documentFirstHeading">Studi...
Beispiel
Newsletteranmeldung   Verbesserungsvorschlag
Beispiel
<h1 class="documentFirstHeading"> Studierenden-Newsletter </h1>

   Newsletteranmeldung                          ...
Erwarte das Unerwartete


         kein CSS
   kein JavaScript
     keine Bilder
Nutze die Vielfalt …
Progressive Enhancement                             Graceful Degradation
Nutzererlebnis




         ...
Webstandards

Bessere Wartbarkeit

Bessere Performance

Bessere Zugänglichkeit

Mediengerechtes Arbeiten
Neugierig geworden?
Mehr zu Thema …
Lesen & Nachdenken:   Webkrauts
                      Einführung in XHTML, CSS und Web...
Danke.
Fragen?
Für Wen, Wie Und Warum - Webstandards im Projektalltag
Für Wen, Wie Und Warum - Webstandards im Projektalltag
Für Wen, Wie Und Warum - Webstandards im Projektalltag
Nächste SlideShare
Wird geladen in …5
×

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

4.533 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Bildung, Technologie, Design
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
4.533
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
412
Aktionen
Geteilt
0
Downloads
13
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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

  1. 1. Für wen, wie und warum? Webstandards im Projektalltag Dirk Jesse, Highresolution.info World Usability Day 2009, Dresden
  2. 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
  3. 3. Was ist eigentlich … DAS INTERNET
  4. 4. Aus Anwendersicht grenzenlose Freiheit, junges, spannendes Medium, ständig in Bewegung
  5. 5. Zugangsformen TV-Geräte Drucker Note-/Netbooks Handy/PDA Desktop-Rechner
  6. 6. Assistive Technologien Tastatursteuerung Screen Reader Zoom Software …
  7. 7. Aus Entwicklersicht Kontrollverlust Der Nutzer entscheidet über das Wie, Wo und Womit. Focus auf Inhalte legen!
  8. 8. Falsche Götter… Chefs Auftraggeber Designer Suchmaschinen
  9. 9. Design for our future selves! Bereits heute sind über 30 Millionen (ca. 37%) der Bundesbürger über 50 Jahre alt.
  10. 10. Das Gute an Standards ist, dass es so viele davon gibt! WEB STANDARDS
  11. 11. „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
  12. 12. Oger sind wie Zwiebeln Schichten 1. Inhalt (MySQL, XML) 2. Struktur (HTML) 3. Präsentation (CSS) 4. Verhalten (JavaScript)
  13. 13. „Logik ist der Anfang aller Weisheit, Lieutenant Valeris, nicht das Ende.“ Mr. Spock, Das Unentdeckte Land
  14. 14. Der Termin wurde gelöscht! Der Termin wurde gelöscht! Der Termin wurde gelöscht!
  15. 15. 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>
  16. 16. 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>
  17. 17. Beispiel Newsletteranmeldung
  18. 18. 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>
  19. 19. Beispiel Newsletteranmeldung Verbesserungsvorschlag
  20. 20. 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>
  21. 21. Erwarte das Unerwartete kein CSS kein JavaScript keine Bilder
  22. 22. Nutze die Vielfalt … Progressive Enhancement Graceful Degradation Nutzererlebnis Nutzererlebnis gering hoch entwickelt jung alt Browserfähigkeiten Browseralter
  23. 23. Webstandards Bessere Wartbarkeit Bessere Performance Bessere Zugänglichkeit Mediengerechtes Arbeiten
  24. 24. 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
  25. 25. Danke. Fragen?

×