1. technologie-tag - webstandards
DESCRIPTION
TRANSCRIPT
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/