<ul><li>Der  grüne   Haken </li></ul>
<ul><li>HTML, XHTML, XML, EMMA, XML Schema, XSL, XSLT, CSS, PNG, SVG, SMIL, MathML, RDF, RSS, SOAP, WSDL, WS-Addressing, W...
<ul><li>HTML , XHTML,  XML , EMMA, XML Schema, XSL, XSLT,  CSS , PNG, SVG, SMIL, MathML, RDF, RSS, SOAP, WSDL, WS-Addressi...
<ul><li>Strukturorientierte Sprachen (Inhalt) </li></ul><ul><ul><li>HTML, XHTML, XML, XForms </li></ul></ul><ul><li>Präsen...
<ul><li>Was sind die Ziele all dieser Standards? </li></ul><ul><ul><li>Größtmöglicher Nutzen für eine größtmögliche Anzahl...
<ul><li>Wie werden die Standards angewendet? </li></ul><ul><ul><li>Einhaltung von standardbasierten „Best Practices“ beim ...
<ul><li>Semantik und Zugänglichkeit </li></ul>Webstandards
<ul><li>Semantische Dokumente finden für die Bedeutung ihrer Daten die bestmögliche Entsprechung in HTML-Elementen </li></...
<ul><li>HTML Code oft kompakter </li></ul><ul><ul><li>schnellere Ladezeit </li></ul></ul><ul><ul><li>optimal für Styling m...
<ul><li>Hilfestellung durch Firefox Extension „Web Developer Toolbar“ </li></ul>Webstandards - Semantik
<ul><li>HTML sieht in der aktuellen Spezifikation nur wenige, unzureichende Auszeichnungen vor </li></ul><ul><li>Dies soll...
<ul><li>Kein Standard - als Quasi-Standard trotzdem einsetzbar </li></ul><ul><li>Auszeichnung über im Code eingebettete cl...
<ul><li><div> </li></ul><ul><li><div>Max Mustermann</div> </li></ul><ul><li><div>Musterfirma</div> </li></ul><ul><li><div>...
Webstandards - Microformate
<ul><li>Semantik als zentrales Element der Zugänglichkeit </li></ul><ul><li>Regelung durch Web Content Accessibility Guide...
<ul><li>Alternativen zu auditivem und visuellem Content </li></ul><ul><li>Trennung von Inhalt und Layout </li></ul><ul><li...
<ul><li>Hilfestellung durch Firefox Accessibility Extension </li></ul>Webstandards - Zugänglichkeit
<ul><li>Zugänglichkeit sichert die Auslieferung der Inhalte einer Website für eine größtmögliche Anzahl von Zugangsgeräten...
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)
<ul><li>Und was ist mit …? </li></ul>Webstandards - Zugänglichkeit
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?
<ul><li>Bildschirmauflösung von </li></ul><ul><li>240 x 320 </li></ul>Webstandards - Zugänglichkeit
<ul><li>bis </li></ul><ul><li>3200 x 1200 </li></ul>Webstandards - Zugänglichkeit
Webstandards - Zugänglichkeit
<ul><li>Android, BlackBerry Browser, Blazer, Danger, Embider, Internet Explorer Mobile (Microsoft), jB5 Mobile Browser, MO...
<ul><li>Validierung </li></ul>Webstandards
<ul><li>Ein Dokument, welches die Vorgaben durch einen formalen Standard einhält und eine entsprechende Prüfung besteht wi...
<ul><li>Korrekter Doctype (Standard-Modus) </li></ul><ul><li>Einhaltung der durch den Doctype vorgegebenen Regeln </li></u...
<ul><li>W3C hostet Validatoren für HTML und CSS </li></ul><ul><li>Firefox Addon Html Validator für „On the fly“ Validierun...
<ul><li>Trennung von </li></ul><ul><li>Inhalt und Layout </li></ul>Webstandards
<ul><li>Extrahieren aller Layout-Informationen aus dem HTML-Code </li></ul><ul><li>Nutzung von CSS für das Layout der Seit...
Webstandards – Trennung von Inhalt und Layout
<ul><li>Fazit </li></ul>Webstandards - Fazit
<ul><li>Konsistentes Layout durch Anwendung von CSS </li></ul><ul><li>Kleinere Dokumente und schnellere Ladezeiten </li></...
<ul><li>Quellen </li></ul><ul><li>http://www.w3.org/ </li></ul><ul><li>http://en.wikipedia.org/wiki/Web_standards </li></u...
Nächste SlideShare
Wird geladen in …5
×

1. Technologie-Tag - Webstandards

1.551 Aufrufe

Veröffentlicht am

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.551
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
34
Aktionen
Geteilt
0
Downloads
8
Kommentare
0
Gefällt mir
3
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

1. Technologie-Tag - Webstandards

  1. 1. <ul><li>Der grüne Haken </li></ul>
  2. 2. <ul><li>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, … </li></ul>Webstandards
  3. 3. <ul><li>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, … </li></ul>Webstandards
  4. 4. <ul><li>Strukturorientierte Sprachen (Inhalt) </li></ul><ul><ul><li>HTML, XHTML, XML, XForms </li></ul></ul><ul><li>Präsentationsorientierte Sprachen (Darstellung) </li></ul><ul><ul><li>CSS (Level 1, 2, 3), SVG, MathML </li></ul></ul><ul><li>Objekt-Modell </li></ul><ul><ul><li>DOM (Document Object Model) </li></ul></ul><ul><li>Scriptsprachen (Logik) </li></ul><ul><ul><li>ECMAScript (JavaScript) </li></ul></ul>Webstandards
  5. 5. <ul><li>Was sind die Ziele all dieser Standards? </li></ul><ul><ul><li>Größtmöglicher Nutzen für eine größtmögliche Anzahl von Usern </li></ul></ul><ul><ul><li>Möglichst große Lebensdauer für Webdokumente </li></ul></ul><ul><ul><li>Vereinfachungen und Einsparungen währen der Produktion von Webseiten </li></ul></ul><ul><ul><li>Zugänglichkeit der Inhalte für eine größtmögliche Anzahl von Nutzern und Endgeräten </li></ul></ul><ul><ul><li>Zukunftssichere Webseiten gegenüber neuen Browserentwicklungen und neuen Zugangsgeräten </li></ul></ul>Webstandards
  6. 6. <ul><li>Wie werden die Standards angewendet? </li></ul><ul><ul><li>Einhaltung von standardbasierten „Best Practices“ beim Design und der Implementierung von Webseiten </li></ul></ul><ul><ul><li>Semantische und zugängliche Inhalte </li></ul></ul><ul><ul><li>Valides HTML, CSS und JavaScript </li></ul></ul><ul><ul><li>Trennung von Inhalt und Layout </li></ul></ul>Webstandards
  7. 7. <ul><li>Semantik und Zugänglichkeit </li></ul>Webstandards
  8. 8. <ul><li>Semantische Dokumente finden für die Bedeutung ihrer Daten die bestmögliche Entsprechung in HTML-Elementen </li></ul><ul><li>HTML ist semantisch schwach </li></ul><ul><ul><li><strong> <ul> <ol> <dl> <table> <em> </li></ul></ul><ul><ul><li><blockquote> <address> <h1-6> <code> <samp> <kbd> <var> <cite> <dfn> <abbr> <acronym> </li></ul></ul>Webstandards - Semantik
  9. 9. <ul><li>HTML Code oft kompakter </li></ul><ul><ul><li>schnellere Ladezeit </li></ul></ul><ul><ul><li>optimal für Styling mit CSS </li></ul></ul><ul><li>Bessere Position in den SERPS </li></ul><ul><ul><li>Bessere programmatische Erfassung der Inhalte durch Google & Co. </li></ul></ul><ul><li>Abdeckung einer größtmöglichen Anzahl von Zugangsgeräten und Browsern </li></ul>Webstandards - Semantik
  10. 10. <ul><li>Hilfestellung durch Firefox Extension „Web Developer Toolbar“ </li></ul>Webstandards - Semantik
  11. 11. <ul><li>HTML sieht in der aktuellen Spezifikation nur wenige, unzureichende Auszeichnungen vor </li></ul><ul><li>Dies soll sich mit HTML 5 in Zukunft ändern </li></ul><ul><li>Die Lösung heute: Microformate </li></ul>Webstandards - Semantik
  12. 12. <ul><li>Kein Standard - als Quasi-Standard trotzdem einsetzbar </li></ul><ul><li>Auszeichnung über im Code eingebettete class- und rel-Attribute </li></ul><ul><li>hCard, hCalendar, hReview, rel-license, rel-tag, … </li></ul><ul><li>http://microformats.org/ </li></ul>Webstandards - Microformate
  13. 13. <ul><li><div> </li></ul><ul><li><div>Max Mustermann</div> </li></ul><ul><li><div>Musterfirma</div> </li></ul><ul><li><div>01234/56789</div> </li></ul><ul><li><a href=&quot;http://example.com/&quot;>http://example.com/</a> </li></ul><ul><li></div> </li></ul><ul><li><div class=&quot;vcard&quot;> </li></ul><ul><li><div class=&quot;fn&quot;>Max Mustermann</div> </li></ul><ul><li><div class=&quot;org&quot;>Musterfirma</div> </li></ul><ul><li><div class=&quot;tel&quot;>01234/56789</div> </li></ul><ul><li><a class=&quot;url&quot; href=&quot;http://example.com/&quot;>http://example.com/</a> </li></ul><ul><li></div> </li></ul><ul><li>Quelle: Wikipedia </li></ul>Webstandards - Microformate
  14. 14. Webstandards - Microformate
  15. 15. <ul><li>Semantik als zentrales Element der Zugänglichkeit </li></ul><ul><li>Regelung durch Web Content Accessibility Guidelines (WCAG 1.0) und Section 508 </li></ul><ul><li>Ausrichtung auf „klassische“ Websites </li></ul><ul><li>WCAG 2.0 für moderne Webanwendungen </li></ul>Webstandards - Zugänglichkeit
  16. 16. <ul><li>Alternativen zu auditivem und visuellem Content </li></ul><ul><li>Trennung von Inhalt und Layout </li></ul><ul><li>Korrekte Verwendung von Tabellen </li></ul><ul><li>Geräteunabhängiges Design </li></ul><ul><li>Klare Navigations-Konzepte </li></ul><ul><li>Verwendung von standardbasierten Techniken </li></ul>Webstandards - Zugänglichkeit
  17. 17. <ul><li>Hilfestellung durch Firefox Accessibility Extension </li></ul>Webstandards - Zugänglichkeit
  18. 18. <ul><li>Zugänglichkeit sichert die Auslieferung der Inhalte einer Website für eine größtmögliche Anzahl von Zugangsgeräten und Browsern. </li></ul><ul><li>Warum ist das wichtig? </li></ul>Webstandards - Zugänglichkeit
  19. 19. Webstandards - Zugänglichkeit Mit Bilder Ohne Bilder und
  20. 20. Webstandards - Zugänglichkeit Mit Flash Ohne Flash und
  21. 21. Webstandards - Zugänglichkeit
  22. 22. 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)
  23. 23. 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)
  24. 24. <ul><li>Und was ist mit …? </li></ul>Webstandards - Zugänglichkeit
  25. 25. Webstandards - Zugänglichkeit iPhone
  26. 26. Webstandards - Zugänglichkeit Wii
  27. 27. Webstandards - Zugänglichkeit Playstation
  28. 28. Webstandards - Zugänglichkeit … auf einem Plasma-Bildschirm
  29. 29. Webstandards - Zugänglichkeit Playstation Portable
  30. 30. Webstandards - Zugänglichkeit Pocket Web
  31. 31. Webstandards - Zugänglichkeit Blackberry
  32. 32. Webstandards - Zugänglichkeit Und, und, und…
  33. 33. Webstandards - Zugänglichkeit Und mein Kühlschrank?
  34. 34. <ul><li>Bildschirmauflösung von </li></ul><ul><li>240 x 320 </li></ul>Webstandards - Zugänglichkeit
  35. 35. <ul><li>bis </li></ul><ul><li>3200 x 1200 </li></ul>Webstandards - Zugänglichkeit
  36. 36. Webstandards - Zugänglichkeit
  37. 37. <ul><li>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 </li></ul><ul><li>http://en.wikipedia.org/wiki/Microbrowser </li></ul>Webstandards - Zugänglichkeit
  38. 38. <ul><li>Validierung </li></ul>Webstandards
  39. 39. <ul><li>Ein Dokument, welches die Vorgaben durch einen formalen Standard einhält und eine entsprechende Prüfung besteht wird als valide bezeichnet. </li></ul><ul><li>Keine Interpretation und Korrektur von ungültigem HTML nötig </li></ul><ul><ul><li>Schnellere Wiedergabe (Rendering) </li></ul></ul><ul><ul><li>Bessere Wiedergabe </li></ul></ul><ul><li>Browser werden immer standard-konformer </li></ul>Webstandards - Validierung
  40. 40. <ul><li>Korrekter Doctype (Standard-Modus) </li></ul><ul><li>Einhaltung der durch den Doctype vorgegebenen Regeln </li></ul><ul><li>Vermeidung von Hacks </li></ul><ul><li>Regelmäßige Benutzung eines Validators als Teil des normalen Arbeitsprozesses und der Qualitätssicherung </li></ul><ul><li>Ideal: Kein Onlinegang ohne Validierung </li></ul>Webstandards - Validierung
  41. 41. <ul><li>W3C hostet Validatoren für HTML und CSS </li></ul><ul><li>Firefox Addon Html Validator für „On the fly“ Validierung </li></ul>Webstandards - Validierung
  42. 42. <ul><li>Trennung von </li></ul><ul><li>Inhalt und Layout </li></ul>Webstandards
  43. 43. <ul><li>Extrahieren aller Layout-Informationen aus dem HTML-Code </li></ul><ul><li>Nutzung von CSS für das Layout der Seite </li></ul><ul><ul><li>Bessere Zugänglichkeit </li></ul></ul><ul><ul><li>Leichte Änderung der kompletten Website </li></ul></ul><ul><ul><li>Weniger Code </li></ul></ul><ul><ul><li>Style-Switcher (Drucker) </li></ul></ul><ul><ul><li>Größere Kontrolle über den Code </li></ul></ul>Webstandards – Trennung von Inhalt und Layout
  44. 44. Webstandards – Trennung von Inhalt und Layout
  45. 45. <ul><li>Fazit </li></ul>Webstandards - Fazit
  46. 46. <ul><li>Konsistentes Layout durch Anwendung von CSS </li></ul><ul><li>Kleinere Dokumente und schnellere Ladezeiten </li></ul><ul><li>Bessere Suchmaschinenplatzierung ohne zusätzliche Investitionen </li></ul><ul><li>Unterstützung einer Vielzahl von Browsern und Endgeräten </li></ul><ul><li>Vereinfachung und qualitative Verbesserung während der Produktion </li></ul><ul><li>Eliminierung unerwünschter zukünftiger Kosten </li></ul><ul><li>Erweiterbarkeit durch Zusammenspiel verschiedener Standards </li></ul><ul><li>Kostenreduzierung durch valides HTML </li></ul><ul><li>Webstandards als Basis für effizientes Team-Work </li></ul>Webstandards – Fazit
  47. 47. <ul><li>Quellen </li></ul><ul><li>http://www.w3.org/ </li></ul><ul><li>http://en.wikipedia.org/wiki/Web_standards </li></ul><ul><li>http://de.wikipedia.org/wiki/Webstandard </li></ul><ul><li>http://developer.mozilla.org/en/Web_Standards </li></ul><ul><li>http://www.opera.com/wsc/ </li></ul><ul><li>http://www.hessendscher.de/benefits/ </li></ul><ul><li>http://www.hessendscher.de/workshop/ </li></ul>Webstandards

×