Download - 1. Technologie-Tag - Webstandards
![Page 1: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/1.jpg)
Der grüne Haken
![Page 2: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/2.jpg)
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, …
![Page 3: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/3.jpg)
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, …
![Page 4: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/4.jpg)
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)
![Page 5: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/5.jpg)
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
![Page 6: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/6.jpg)
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
![Page 7: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/7.jpg)
Webstandards
Semantik und Zugänglichkeit
![Page 8: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/8.jpg)
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>
![Page 9: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/9.jpg)
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
![Page 10: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/10.jpg)
Webstandards - Semantik
• Hilfestellung durch Firefox Extension „Web Developer Toolbar“
![Page 11: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/11.jpg)
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
![Page 12: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/12.jpg)
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/
![Page 13: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/13.jpg)
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
![Page 14: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/14.jpg)
Webstandards - Microformate
![Page 15: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/15.jpg)
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
![Page 16: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/16.jpg)
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
![Page 17: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/17.jpg)
Webstandards - Zugänglichkeit
• Hilfestellung durch Firefox Accessibility Extension
![Page 18: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/18.jpg)
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?
![Page 19: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/19.jpg)
Webstandards - Zugänglichkeit
Mit Bilder Ohne Bilder
und
![Page 20: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/20.jpg)
Webstandards - Zugänglichkeit
Mit Flash Ohne Flash
und
![Page 21: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/21.jpg)
Webstandards - Zugänglichkeit
![Page 22: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/22.jpg)
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)
![Page 23: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/23.jpg)
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)
![Page 24: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/24.jpg)
Webstandards - Zugänglichkeit
Und was ist mit …?
![Page 25: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/25.jpg)
Webstandards - Zugänglichkeit
iPhone
![Page 26: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/26.jpg)
Webstandards - Zugänglichkeit
Wii
![Page 27: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/27.jpg)
Webstandards - Zugänglichkeit
Playstation
![Page 28: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/28.jpg)
Webstandards - Zugänglichkeit
… auf einem Plasma-Bildschirm
![Page 29: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/29.jpg)
Webstandards - Zugänglichkeit
Playstation Portable
![Page 30: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/30.jpg)
Webstandards - Zugänglichkeit
Pocket Web
![Page 31: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/31.jpg)
Webstandards - Zugänglichkeit
Blackberry
![Page 32: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/32.jpg)
Webstandards - Zugänglichkeit
Und, und, und…
![Page 33: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/33.jpg)
Webstandards - Zugänglichkeit
Und mein Kühlschrank?
![Page 34: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/34.jpg)
Webstandards - Zugänglichkeit
Bildschirmauflösung von
240 x 320
![Page 35: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/35.jpg)
Webstandards - Zugänglichkeit
bis
3200 x 1200
![Page 36: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/36.jpg)
Webstandards - Zugänglichkeit
![Page 37: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/37.jpg)
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
![Page 38: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/38.jpg)
Webstandards
Validierung
![Page 39: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/39.jpg)
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
![Page 40: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/40.jpg)
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
![Page 41: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/41.jpg)
Webstandards - Validierung
• W3C hostet Validatoren für HTML und CSS• Firefox Addon Html Validator für „On the fly“
Validierung
![Page 42: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/42.jpg)
Webstandards
Trennung vonInhalt und Layout
![Page 43: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/43.jpg)
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
![Page 44: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/44.jpg)
Webstandards – Trennung von Inhalt und Layout
![Page 45: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/45.jpg)
Webstandards - Fazit
Fazit
![Page 46: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/46.jpg)
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
![Page 47: 1. Technologie-Tag - Webstandards](https://reader033.vdocuments.site/reader033/viewer/2022061113/545c516bb0af9fa92c8b470b/html5/thumbnails/47.jpg)
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/