• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
1. Technologie-Tag - Webstandards
 

1. Technologie-Tag - Webstandards

on

  • 2,198 views

 

Statistics

Views

Total Views
2,198
Views on SlideShare
2,176
Embed Views
22

Actions

Likes
3
Downloads
7
Comments
0

5 Embeds 22

http://www.nicosteiner.de 8
http://nicosteiner.com 5
http://nicosteiner.de 4
http://www.slideshare.net 4
http://feeds.feedburner.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    1. Technologie-Tag - Webstandards 1. Technologie-Tag - Webstandards Presentation Transcript

      • Der grüne Haken
      • 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?
        • Größtmöglicher Nutzen für eine größtmögliche Anzahl von Usern
        • Möglichst große Lebensdauer für Webdokumente
        • Vereinfachungen und Einsparungen währen der Produktion von Webseiten
        • Zugänglichkeit der Inhalte für eine größtmögliche Anzahl von Nutzern und Endgeräten
        • 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
        • Semantische und zugängliche Inhalte
        • Valides HTML, CSS und JavaScript
        • Trennung von Inhalt und Layout
      Webstandards
      • Semantik und Zugänglichkeit
      Webstandards
      • 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 - Semantik
      • 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=&quot;http://example.com/&quot;>http://example.com/</a>
      • </div>
      • <div class=&quot;vcard&quot;>
      • <div class=&quot;fn&quot;>Max Mustermann</div>
      • <div class=&quot;org&quot;>Musterfirma</div>
      • <div class=&quot;tel&quot;>01234/56789</div>
      • <a class=&quot;url&quot; href=&quot;http://example.com/&quot;>http://example.com/</a>
      • </div>
      • Quelle: Wikipedia
      Webstandards - Microformate
    • Webstandards - Microformate
      • 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
    • 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)
      • Und was ist mit …?
      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?
      • 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 - Zugänglichkeit
      • Validierung
      Webstandards
      • 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 - Validierung
      • Trennung von
      • Inhalt und Layout
      Webstandards
      • 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 – Trennung von Inhalt und Layout
      • Fazit
      Webstandards - Fazit
      • Konsistentes Layout durch Anwendung von CSS
      • Kleinere Dokumente und schnellere Ladezeiten
      • Bessere Suchmaschinenplatzierung ohne zusätzliche Investitionen
      • Unterstützung einer Vielzahl von Browsern und Endgeräten
      • Vereinfachung und qualitative Verbesserung während der Produktion
      • Eliminierung unerwünschter zukünftiger Kosten
      • Erweiterbarkeit durch Zusammenspiel verschiedener Standards
      • Kostenreduzierung durch valides HTML
      • Webstandards als Basis für effizientes Team-Work
      Webstandards – Fazit
      • Quellen
      • http://www.w3.org/
      • http://en.wikipedia.org/wiki/Web_standards
      • http://de.wikipedia.org/wiki/Webstandard
      • http://developer.mozilla.org/en/Web_Standards
      • http://www.opera.com/wsc/
      • http://www.hessendscher.de/benefits/
      • http://www.hessendscher.de/workshop/
      Webstandards