1. Technologie-Tag - Webstandards

Der grüne Haken

Webstandards

HTML, XHTML, XML, EMMA, XML Schema, XSL, XSLT, CSS, PNG, SVG, SMIL, MathML, RDF, RSS, SOAP, WSDL, WS-Addressing, WS-Policy, DOM, WCAG, OWL, XPath, XForms, XLink, XPointer, XQuery, VoiceXML, …

Webstandards

HTML, XHTML, XML, EMMA, XML Schema, XSL, XSLT, CSS, PNG, SVG, SMIL, MathML, RDF, RSS, SOAP, WSDL, WS-Addressing, WS-Policy, DOM, WCAG, ECMAScript, OWL, XPath, XForms, XLink, XPointer, XQuery, VoiceXML, …

Webstandards

• Strukturorientierte Sprachen (Inhalt)– HTML, XHTML, XML, XForms

• Präsentationsorientierte Sprachen (Darstellung)– CSS (Level 1, 2, 3), SVG, MathML

• Objekt-Modell– DOM (Document Object Model)

• Scriptsprachen (Logik)– ECMAScript (JavaScript)

Webstandards

• Was sind die Ziele all dieser Standards?1. Größtmöglicher Nutzen für eine größtmögliche

Anzahl von Usern2. Möglichst große Lebensdauer für Webdokumente3. Vereinfachungen und Einsparungen währen der

Produktion von Webseiten4. Zugänglichkeit der Inhalte für eine größtmögliche

Anzahl von Nutzern und Endgeräten5. Zukunftssichere Webseiten gegenüber neuen

Browserentwicklungen und neuen Zugangsgeräten

Webstandards

• Wie werden die Standards angewendet?– Einhaltung von standardbasierten „Best Practices“

beim Design und der Implementierung von Webseiten

1.Semantische und zugängliche Inhalte2.Valides HTML, CSS und JavaScript3.Trennung von Inhalt und Layout

Webstandards

Semantik und Zugänglichkeit

Webstandards - Semantik

• Semantische Dokumente finden für die Bedeutung ihrer Daten die bestmögliche Entsprechung in HTML-Elementen

• HTML ist semantisch schwach

<strong> <ul> <ol> <dl> <table> <em> <blockquote> <address> <h1-6> <code> <samp> <kbd> <var> <cite> <dfn> <abbr> <acronym>

Webstandards - Semantik

• HTML Code oft kompakter– schnellere Ladezeit– optimal für Styling mit CSS

• Bessere Position in den SERPS– Bessere programmatische Erfassung der Inhalte

durch Google & Co.

• Abdeckung einer größtmöglichen Anzahl von Zugangsgeräten und Browsern

Webstandards - Semantik

• Hilfestellung durch Firefox Extension „Web Developer Toolbar“

Webstandards - Semantik

• HTML sieht in der aktuellen Spezifikation nur wenige, unzureichende Auszeichnungen vor

• Dies soll sich mit HTML 5 in Zukunft ändern• Die Lösung heute: Microformate

Webstandards - Microformate

• Kein Standard - als Quasi-Standard trotzdem einsetzbar

• Auszeichnung über im Code eingebettete class- und rel-Attribute

• hCard, hCalendar, hReview, rel-license, rel-tag, …

• http://microformats.org/

Webstandards - Microformate

<div> <div>Max Mustermann</div>

<div>Musterfirma</div><div>01234/56789</div> <a href="http://example.com/">http://example.com/</a>

</div>

<div class="vcard"> <div class="fn">Max Mustermann</div>

<div class="org">Musterfirma</div> <div class="tel">01234/56789</div> <a class="url" href="http://example.com/">http://example.com/</a>

</div>

Quelle: Wikipedia

Webstandards - Microformate

Webstandards - Zugänglichkeit

• Semantik als zentrales Element der Zugänglichkeit

• Regelung durch Web Content Accessibility Guidelines (WCAG 1.0) und Section 508

• Ausrichtung auf „klassische“ Websites• WCAG 2.0 für moderne Webanwendungen

Webstandards - Zugänglichkeit

• Alternativen zu auditivem und visuellem Content

• Trennung von Inhalt und Layout• Korrekte Verwendung von Tabellen• Geräteunabhängiges Design• Klare Navigations-Konzepte• Verwendung von standardbasierten

Techniken

Webstandards - Zugänglichkeit

• Hilfestellung durch Firefox Accessibility Extension

Webstandards - Zugänglichkeit

Zugänglichkeit sichert die Auslieferung der Inhalte einer Website für eine größtmögliche Anzahl von Zugangsgeräten und Browsern.

Warum ist das wichtig?

Webstandards - Zugänglichkeit

Mit Bilder Ohne Bilder

und

Webstandards - Zugänglichkeit

Mit Flash Ohne Flash

und

Webstandards - Zugänglichkeit

Webstandards - Zugänglichkeit

1.5 / 2.0 / 3.0 6.0 / 7.0 / 8.0 9.1 / 9.2 / 9.5 3.1 0.2 (beta)

Webstandards - Zugänglichkeit

+1.5 / 2.0 / 3.0 6.0 / 7.0 / 8.0 9.1 / 9.2 / 9.5 3.1 0.2 (beta)

Webstandards - Zugänglichkeit

Und was ist mit …?

Webstandards - Zugänglichkeit

iPhone

Webstandards - Zugänglichkeit

Wii

Webstandards - Zugänglichkeit

Playstation

Webstandards - Zugänglichkeit

… auf einem Plasma-Bildschirm

Webstandards - Zugänglichkeit

Playstation Portable

Webstandards - Zugänglichkeit

Pocket Web

Webstandards - Zugänglichkeit

Blackberry

Webstandards - Zugänglichkeit

Und, und, und…

Webstandards - Zugänglichkeit

Und mein Kühlschrank?

Webstandards - Zugänglichkeit

Bildschirmauflösung von

240 x 320

Webstandards - Zugänglichkeit

bis

3200 x 1200

Webstandards - Zugänglichkeit

Webstandards - Zugänglichkeit

Android, BlackBerry Browser, Blazer, Danger, Embider, Internet Explorer Mobile (Microsoft), jB5 Mobile Browser, MOTOMAGX (Motorola), NetFront, Nokia Series 40 Browser (Nokia), Novarra nWeb, Obigo Browser, Openwave Mobile Browser, Opera Mobile, PicselBrowser, Playstation Portable web browser, Safari, Iris Browser, Wapaka Browser Java, Web Browser for S60 (Nokia), SkyFire, Bluelark, Deepfish, Doris, iPanel, JOCA, Minimo, Opera Mini, Opera Mobile, Pixo, PocketWeb, RocketBrowser, SAS, Stanford Power Browser, TeaShark, ThunderHawk, UCWEB, Universe, Webby Mobile, WebViewer, WinWAP

http://en.wikipedia.org/wiki/Microbrowser

Webstandards

Validierung

Webstandards - Validierung

• Ein Dokument, welches die Vorgaben durch einen formalen Standard einhält und eine entsprechende Prüfung besteht wird als valide bezeichnet.

• Keine Interpretation und Korrektur von ungültigem HTML nötig– Schnellere Wiedergabe (Rendering)– Bessere Wiedergabe

• Browser werden immer standard-konformer

Webstandards - Validierung

• Korrekter Doctype (Standard-Modus)• Einhaltung der durch den Doctype

vorgegebenen Regeln• Vermeidung von Hacks• Regelmäßige Benutzung eines Validators als

Teil des normalen Arbeitsprozesses und der Qualitätssicherung

• Ideal: Kein Onlinegang ohne Validierung

Webstandards - Validierung

• W3C hostet Validatoren für HTML und CSS• Firefox Addon Html Validator für „On the fly“

Validierung

Webstandards

Trennung vonInhalt und Layout

Webstandards – Trennung von Inhalt und Layout

• Extrahieren aller Layout-Informationen aus dem HTML-Code

• Nutzung von CSS für das Layout der Seite– Bessere Zugänglichkeit– Leichte Änderung der kompletten Website– Weniger Code– Style-Switcher (Drucker)– Größere Kontrolle über den Code

Webstandards – Trennung von Inhalt und Layout

Webstandards - Fazit

Fazit

Webstandards – Fazit

1. Konsistentes Layout durch Anwendung von CSS2. Kleinere Dokumente und schnellere Ladezeiten3. Bessere Suchmaschinenplatzierung ohne zusätzliche Investitionen4. Unterstützung einer Vielzahl von Browsern und Endgeräten5. Vereinfachung und qualitative Verbesserung während der

Produktion6. Eliminierung unerwünschter zukünftiger Kosten7. Erweiterbarkeit durch Zusammenspiel verschiedener Standards8. Kostenreduzierung durch valides HTML9. Webstandards als Basis für effizientes Team-Work

Webstandards

Quellen

http://www.w3.org/http://en.wikipedia.org/wiki/Web_standardshttp://de.wikipedia.org/wiki/Webstandardhttp://developer.mozilla.org/en/Web_Standardshttp://www.opera.com/wsc/http://www.hessendscher.de/benefits/http://www.hessendscher.de/workshop/