SlideShare ist ein Scribd-Unternehmen logo
1 von 38
Downloaden Sie, um offline zu lesen
Webstandards –
die Basis für ein modernes Web
                Jens Grochtdreis, SinnerSchrader




Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
2



Kurze Vorstellung (1)
• Ich bin Senior Frontend Engineer bei
  SinnerSchrader in Frankfurt
• SinnerSchrader betreut das E-Business
  großer Marken und internationaler
  Unternehmen seit 1996
• Kunden: Otto, Dow Jones, Deutsche Bank,
  Tchibo, comdirect, simyo, Arena ...
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
3



Kurze Vorstellung (2)
• Die Initiative „Webkrauts“ gründete sich
  auf Grund eines Eintrages in meinem Blog
  im August 2005
• Wir unterstützen Webdesigner und
  -entwickler dabei, Standards einzusetzen
  und so ihre Arbeit zu verbessern.


Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
4



Was haben wir hinter uns?
•   Das WWW existiert seit Anfang der 90er
•   Für wissenschaftliche Kommunikation
•   Sehr schnell kommerzielle Nutzung
•   Layout und Effekte vor Inhalten
•   Tunnelseiten, Preloader, „optimiert für“
•   Eingleisiges Lese-Medium

Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
5



Wo stehen wir?
•   Browser sind besser geworden
•   Browser sind noch immer nicht gut
•   Browser sind nur noch EIN Gerät fürs WWW
•   Das WWW wird mobil
•   Barrierefreiheit hat Gesetzesstatus
•   Javascript „wird gut“

Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
6



Wo stehen wir?
• „Mitmach-Web“, vulgo: Web 2.0
• Andere „arbeiten lassen“, selber kassieren
• Offener Austausch
   • Mashups
   • APIs (Schnittstellen!)
• Professionalisierung

Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
7



Wo stehen wir?
• Professionalisierung
• Häufiger korrekte Nutzung der Standards
• Immernoch hohe Ignoranz gegenüber
  Standards




Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
8



Wo gehen wir hin?
Das Internet
• wird noch mobiler,
• wird multimedialer,
• wird mehr mit TV veschmelzen,
• es wird noch mehr Anzeigeoptionen geben!


Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
9



Was bedeutet Web 2.0?
• Das „Mitmach-Web“ läßt sich auf einen
  Nenner bringen:

   Kontrollverlust


Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
10



Kontrollverlust - inhaltlich
• Webseiten werden zu Applikationen, der
  User kann selber agieren, schafft Inhalte.
• Der Anbieter stellt nur noch eine Plattform
  zur Verfügung, die der Anwender nutzt.
• Inhalte können nur bedingt kontrolliert
  werden.

Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
11



Kontrollverlust - formal
Wie können wir heute ins Internet gehen?
• PC, Notebook
   • viele Betriebssyteme, Browser, Monitore
• Handy, PDA
• Spielkonsole
• TV

Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
12



Flexibilität ist wichtig
• Wir können nicht mehr sicher vorhersagen,
  wie jemand unsere Seite sieht/liest.
• Deshalb: einen für möglichst viele
  gangbaren Weg beschreiten
• Erst der Inhalt, dann das Layout!
• Der Inhalt ist das Wichtigste!

Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
13



Trennung von Inhalt und Layout
• Der Inhalt soll in den unterschiedlichsten
  Anzeigeformen wiedergegeben werden
  können.
• Das geht nur einfach und gut, wenn man
  Inhalt und Layout trennt.



Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
14



Die Ebenen einer Webseite
            Dynamik                       Javascript, DOM


             Layout                        CSS


             Struktur                      (X)HTML


              Inhalt                       MySQL, XML


        Business-Logik                     PHP, ASP, JAVA




Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
15



Die Realität?
• Viele Webseiten sind noch mit
  Layouttabellen aufgebaut. Layout und
  Struktur sind damit eins.
• Diese Seiten sind unflexibel, nicht
  zukunftssicher.



Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
16



Der Ausweg?
• Nutzt die Standards so, wie sie gedacht
  waren.
• Geht defensiv vor: möglichst wenig
  Hindernisse für die Zugänglichkeit des
  Inhalts



Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
17



Nicht flexibel
Was soll das?
                                                Text!




Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
18



Flexibel
Besser!




Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
19



Keine Tabellen? Doch!
• Tabellen sind für tabellarische Daten da!
• Für Layoutzwecke gibt es CSS!
• Die Unterstützung durch moderne Browser
  ist gut.
• Selbst der IE5 kann mit CSS umgehen.


Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
20



Semantik
• Inhalte werden danach ausgezeichnet was
  sie sind, nicht wie sie aussehen sollen.
• Überschrift:<h1> bis <h6>
• Liste: <ul> oder <ol> und <li>, nicht
  einfach Absätze untereinander
• Das Aussehen kommt erst durch CSS.

Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
21



Semantik und Layout
• Erst bestimmen, was es ist, dann das
  Aussehen bestimmen.
• Wenn die Überschrift die gleiche
  Schriftgröße wie der Absatz hat, kann man
  trotzdem nicht auf die Überschrift
  verzichten


Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
22



Browsereigene Stylesheets




Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
23

Webstandards sind nichts
Neues!
• Es gibt sie, seitdem es das Web gibt. Wir
  nannten sie nur nicht so.
• Grundverständnis: eine Internetseite ist
  ein Dokument, das sinnvoll strukturiert
  und ausgezeichnet werden muss. Erst in
  einem zweiten Schritt kommt das Layout.


Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
24



Was sollen Standards?
• Alle Browser haben eine gemeinsame
  Basis, die sie interpretieren und die ich
  kenne.
• Keine Sonderbehandlung notwendig.
• Es wird eine Seite entwickelt, nicht
  verschiedene Varianten.
• Qualitätssicherung
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
25



Die Realität?
• Sonderbehandlung dank Microsoft
• Aber auch die anderen
  Browser sind nicht
  fehlerfrei
• Mobile Browser
  unterstützen das
  media-Attribut nicht!
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
26



Standards?
                                                            W3C
                       XML              (X)HTML
       SVG

                            CSS                  WCAG
     MathML
                    WCAG (Web Content Accessibility Guidelines)

                                                     XMLHttpRequest
    SWF ECMA-Script                             innerHTML



Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
27



Reichen diese Standards?




                       NEIN
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
28



Weiterentwicklung
• Neue Ideen können neue Standards
  benötigen
• Wir benötigen viele kleine Würfe
• Das W3C will immer den großen Wurf
• Die Browserhersteller werden wichtiger
• Mikroformate als Beispiel

Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
29



Mikroformate
• Auf Basis bestehender Standards werden
  neue Wege der Informationsvermittlung
  beschritten.




Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
30



Alle müssen mitmachen
•   Schnelle Standardisierungsverfahren
•   Schnelle Implementierung in Browser
•   Entwickler müssen lernen
•   Anwender müssen Updatezyklen
    mitmachen


Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
31



Webseiten sind nicht aus Papier
• Webseiten unterliegen ganz anderen
  Gesetzen als Printprodukte. Das vergessen
  viele Designer und Kunden.
• Warum also sollten wir Webseiten wie
  Printprodukte gestalten?



Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
32



Webseiten sind nicht aus Papier
• Webseiten passen sich der Größe des
  Browsers an.
• Man kann die Schriftarten vergrößern und
  verändern.
• Man kann die Kontraste ändern.



Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
33



Webseiten sind nicht aus Papier
• Man kann Bilder ausblenden
• Webseiten können mit dem User
  interagieren.

Versuchen Sie das mal mit einer Zeitung,
einem Plakat, einem Buch!


Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
34



Eine andere Sicht der Dinge
• Webstandards, das Design mit CSS
  erfordern eine andere Sicht der Dinge, als
  sie traditionell „normal“ ist.
• Traditionelles Webdesign denkt in Spalten
  und setzt diese mit einer Layouttabelle
  um. Mehr oder minder tief verschachtelt.


Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
35

Anderes Medium – andere
Denkweise
• Ein anderes Medium erfordert ein anderes
  Vorgehen, eine andere Denkweise.
• Die Idee des pixelgenauen Layouts, das auf
  allen Browsern gleich aussieht, ist nicht
  nur falsch, sondern auch schädlich.



Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
36

Anderes Medium – andere
Denkweise
• Layout und Inhalt sind getrennt. Diese
  Trennung hat ihre Vorteile, denn so kann
  man den Inhalt auf vielen Plattformen
  erreichen.
• Die Inhalte werden in der Nutzung flexibel



Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
37



Mitmachen!
Bauen Sie an einem modernen Web mit,
  nutzen Sie Webstandards mit Verstand!




                http://webkrauts.de
Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web
38




 Diese Präsentation steht unter der Creative Commons Lizenz
 „Attribution-ShareAlike 2.0“

 http://creativecommons.org/licenses/by-sa/2.0/de/




Jens Grochtdreis - SinnerSchrader
Webstandards – die Basis für ein modernes Web

Weitere ähnliche Inhalte

Andere mochten auch

Música e imágenes con derecho de reproducción
Música e imágenes con derecho de reproducciónMúsica e imágenes con derecho de reproducción
Música e imágenes con derecho de reproducciónKatty Torres
 
Trabajo de triangulo terminado 1
Trabajo de triangulo terminado 1Trabajo de triangulo terminado 1
Trabajo de triangulo terminado 1mariaeugenia2012
 
Victlusiones opticas
Victlusiones opticasVictlusiones opticas
Victlusiones opticasmijv96
 
Filosofia computacion
Filosofia computacionFilosofia computacion
Filosofia computacionSantivi11
 
Gobierno en linea PEP
Gobierno en linea PEPGobierno en linea PEP
Gobierno en linea PEPpetunia77
 
Gobierno en linea PEP
Gobierno en linea PEPGobierno en linea PEP
Gobierno en linea PEPpetunia77
 
Th3 cr3 w magazin3
Th3 cr3 w  magazin3 Th3 cr3 w  magazin3
Th3 cr3 w magazin3 ASOCOLDRO
 
La educacion en linea
La educacion en lineaLa educacion en linea
La educacion en lineaFRANYGEMMA
 
Mi autotecnobiografía
Mi autotecnobiografíaMi autotecnobiografía
Mi autotecnobiografíaAnuchuAR
 
Stewar sandoval
Stewar sandovalStewar sandoval
Stewar sandovalstewarr
 
Zeigt her Eure Apps - Barcamp Regensburg
Zeigt her Eure Apps - Barcamp RegensburgZeigt her Eure Apps - Barcamp Regensburg
Zeigt her Eure Apps - Barcamp RegensburgDoris Schuppe
 

Andere mochten auch (20)

las tic
las ticlas tic
las tic
 
Música e imágenes con derecho de reproducción
Música e imágenes con derecho de reproducciónMúsica e imágenes con derecho de reproducción
Música e imágenes con derecho de reproducción
 
Trabajo de triangulo terminado 1
Trabajo de triangulo terminado 1Trabajo de triangulo terminado 1
Trabajo de triangulo terminado 1
 
Menu de Pueblos Blancos
Menu de Pueblos BlancosMenu de Pueblos Blancos
Menu de Pueblos Blancos
 
Victlusiones opticas
Victlusiones opticasVictlusiones opticas
Victlusiones opticas
 
Filosofia computacion
Filosofia computacionFilosofia computacion
Filosofia computacion
 
Norman Neu
Norman NeuNorman Neu
Norman Neu
 
Gobierno en linea PEP
Gobierno en linea PEPGobierno en linea PEP
Gobierno en linea PEP
 
Social Media ist...
Social Media ist...Social Media ist...
Social Media ist...
 
Salud comp
Salud compSalud comp
Salud comp
 
Gobierno en linea PEP
Gobierno en linea PEPGobierno en linea PEP
Gobierno en linea PEP
 
Th3 cr3 w magazin3
Th3 cr3 w  magazin3 Th3 cr3 w  magazin3
Th3 cr3 w magazin3
 
Filosofia
FilosofiaFilosofia
Filosofia
 
TYPO3 Neos in der Praxis
TYPO3 Neos in der PraxisTYPO3 Neos in der Praxis
TYPO3 Neos in der Praxis
 
Sus inicios
Sus iniciosSus inicios
Sus inicios
 
La educacion en linea
La educacion en lineaLa educacion en linea
La educacion en linea
 
Mi autotecnobiografía
Mi autotecnobiografíaMi autotecnobiografía
Mi autotecnobiografía
 
Stewar sandoval
Stewar sandovalStewar sandoval
Stewar sandoval
 
Trabajo ricardo
Trabajo ricardoTrabajo ricardo
Trabajo ricardo
 
Zeigt her Eure Apps - Barcamp Regensburg
Zeigt her Eure Apps - Barcamp RegensburgZeigt her Eure Apps - Barcamp Regensburg
Zeigt her Eure Apps - Barcamp Regensburg
 

Ähnlich wie Webstandards für ein modernes Web

Webseiten sind keine Gemaelde
Webseiten sind keine GemaeldeWebseiten sind keine Gemaelde
Webseiten sind keine GemaeldeJens Grochtdreis
 
Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)Eric Eggert
 
Vortrag WKE 2008, Erlangen
Vortrag WKE 2008, ErlangenVortrag WKE 2008, Erlangen
Vortrag WKE 2008, ErlangenNils Pooker
 
A Tag 2009 - Aspekte Moderne Webentwicklung
A Tag 2009 -  Aspekte Moderne WebentwicklungA Tag 2009 -  Aspekte Moderne Webentwicklung
A Tag 2009 - Aspekte Moderne WebentwicklungJens Grochtdreis
 
Browserstrategien und Progressive Enhancement
Browserstrategien und Progressive EnhancementBrowserstrategien und Progressive Enhancement
Browserstrategien und Progressive EnhancementAperto Nachname
 
Css Frameworks - Ein Überblick (04/2008)
Css Frameworks - Ein Überblick (04/2008)Css Frameworks - Ein Überblick (04/2008)
Css Frameworks - Ein Überblick (04/2008)djesse
 
Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3CKnockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3CJens Grochtdreis
 
Einführung Barrierefreiheit Berufsschule
Einführung Barrierefreiheit BerufsschuleEinführung Barrierefreiheit Berufsschule
Einführung Barrierefreiheit Berufsschulehalfman.halfpixel
 
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickResponsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickAmazee Labs
 
There and back again - Responsive Webdesign mit WordPress
There and back again - Responsive Webdesign mit WordPress There and back again - Responsive Webdesign mit WordPress
There and back again - Responsive Webdesign mit WordPress Michael Oeser
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine TricksJens Grochtdreis
 
SEO für Online-Shops - 7 Tipps aus der Praxis
SEO für Online-Shops - 7 Tipps aus der PraxisSEO für Online-Shops - 7 Tipps aus der Praxis
SEO für Online-Shops - 7 Tipps aus der Praxissemrush_webinars
 
Firmenvorstellung Conit
Firmenvorstellung ConitFirmenvorstellung Conit
Firmenvorstellung ConitCode Runners
 
CSS Frameworks (09/2008)
CSS Frameworks (09/2008)CSS Frameworks (09/2008)
CSS Frameworks (09/2008)djesse
 
Crawl-Budget-Booster für eine bessere Search Engine Experience
Crawl-Budget-Booster für eine bessere Search Engine ExperienceCrawl-Budget-Booster für eine bessere Search Engine Experience
Crawl-Budget-Booster für eine bessere Search Engine ExperienceAndré Goldmann
 
Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal Acquia
 
Barrierefreies Webdesign
Barrierefreies WebdesignBarrierefreies Webdesign
Barrierefreies WebdesignuxHH
 
C4 Lotusday2008 Distance Leading
C4 Lotusday2008 Distance LeadingC4 Lotusday2008 Distance Leading
C4 Lotusday2008 Distance LeadingAndreas Schulte
 

Ähnlich wie Webstandards für ein modernes Web (20)

Webseiten sind keine Gemaelde
Webseiten sind keine GemaeldeWebseiten sind keine Gemaelde
Webseiten sind keine Gemaelde
 
Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)
 
Vortrag WKE 2008, Erlangen
Vortrag WKE 2008, ErlangenVortrag WKE 2008, Erlangen
Vortrag WKE 2008, Erlangen
 
A Tag 2009 - Aspekte Moderne Webentwicklung
A Tag 2009 -  Aspekte Moderne WebentwicklungA Tag 2009 -  Aspekte Moderne Webentwicklung
A Tag 2009 - Aspekte Moderne Webentwicklung
 
Browserstrategien und Progressive Enhancement
Browserstrategien und Progressive EnhancementBrowserstrategien und Progressive Enhancement
Browserstrategien und Progressive Enhancement
 
Css Frameworks - Ein Überblick (04/2008)
Css Frameworks - Ein Überblick (04/2008)Css Frameworks - Ein Überblick (04/2008)
Css Frameworks - Ein Überblick (04/2008)
 
Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3CKnockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
 
Einführung Barrierefreiheit Berufsschule
Einführung Barrierefreiheit BerufsschuleEinführung Barrierefreiheit Berufsschule
Einführung Barrierefreiheit Berufsschule
 
Responsive Web Design - Ein Überblick
Responsive Web Design - Ein ÜberblickResponsive Web Design - Ein Überblick
Responsive Web Design - Ein Überblick
 
There and back again - Responsive Webdesign mit WordPress
There and back again - Responsive Webdesign mit WordPress There and back again - Responsive Webdesign mit WordPress
There and back again - Responsive Webdesign mit WordPress
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine Tricks
 
SEO für Online-Shops - 7 Tipps aus der Praxis
SEO für Online-Shops - 7 Tipps aus der PraxisSEO für Online-Shops - 7 Tipps aus der Praxis
SEO für Online-Shops - 7 Tipps aus der Praxis
 
Firmenvorstellung Conit
Firmenvorstellung ConitFirmenvorstellung Conit
Firmenvorstellung Conit
 
CSS Frameworks (09/2008)
CSS Frameworks (09/2008)CSS Frameworks (09/2008)
CSS Frameworks (09/2008)
 
Crawl-Budget-Booster für eine bessere Search Engine Experience
Crawl-Budget-Booster für eine bessere Search Engine ExperienceCrawl-Budget-Booster für eine bessere Search Engine Experience
Crawl-Budget-Booster für eine bessere Search Engine Experience
 
Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal
 
Vorstellung von Ember.js
Vorstellung von Ember.jsVorstellung von Ember.js
Vorstellung von Ember.js
 
Barrierefreies Webdesign
Barrierefreies WebdesignBarrierefreies Webdesign
Barrierefreies Webdesign
 
C4 Lotusday2008 Distance Leading
C4 Lotusday2008 Distance LeadingC4 Lotusday2008 Distance Leading
C4 Lotusday2008 Distance Leading
 
Web3.0 Internet Briefing
Web3.0 Internet BriefingWeb3.0 Internet Briefing
Web3.0 Internet Briefing
 

Mehr von Jens Grochtdreis

Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von WebseitenJens Grochtdreis
 
Wir brauchen einen neuen Workflow
Wir brauchen einen neuen WorkflowWir brauchen einen neuen Workflow
Wir brauchen einen neuen WorkflowJens Grochtdreis
 
Rapid Prototyping mit YAML4
Rapid Prototyping mit YAML4Rapid Prototyping mit YAML4
Rapid Prototyping mit YAML4Jens Grochtdreis
 
Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von WebseitenJens Grochtdreis
 
Am Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag EditionAm Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag EditionJens Grochtdreis
 
Best practices im Frontend -Barcamp Mainz 2011
Best practices im Frontend -Barcamp Mainz 2011Best practices im Frontend -Barcamp Mainz 2011
Best practices im Frontend -Barcamp Mainz 2011Jens Grochtdreis
 
Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenJens Grochtdreis
 
Praktikum in Frontendentwicklung - Session1
Praktikum in Frontendentwicklung - Session1Praktikum in Frontendentwicklung - Session1
Praktikum in Frontendentwicklung - Session1Jens Grochtdreis
 
Einfuehrung in YAML (2010)
Einfuehrung in YAML (2010)Einfuehrung in YAML (2010)
Einfuehrung in YAML (2010)Jens Grochtdreis
 
Komplexe Sites sauber aufbauen
Komplexe Sites sauber aufbauenKomplexe Sites sauber aufbauen
Komplexe Sites sauber aufbauenJens Grochtdreis
 
Die Pest - philosophische Betrachtungen zur Webentwicklung
Die Pest - philosophische Betrachtungen zur WebentwicklungDie Pest - philosophische Betrachtungen zur Webentwicklung
Die Pest - philosophische Betrachtungen zur WebentwicklungJens Grochtdreis
 
Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)Jens Grochtdreis
 
Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)Jens Grochtdreis
 
Webseiten sind keine Gemälde
Webseiten sind keine GemäldeWebseiten sind keine Gemälde
Webseiten sind keine GemäldeJens Grochtdreis
 
Gute Seiten, Schlechte Seiten - Webmontag Edition
Gute Seiten, Schlechte Seiten -  Webmontag EditionGute Seiten, Schlechte Seiten -  Webmontag Edition
Gute Seiten, Schlechte Seiten - Webmontag EditionJens Grochtdreis
 

Mehr von Jens Grochtdreis (20)

Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von Webseiten
 
Wir brauchen einen neuen Workflow
Wir brauchen einen neuen WorkflowWir brauchen einen neuen Workflow
Wir brauchen einen neuen Workflow
 
Rapid Prototyping mit YAML4
Rapid Prototyping mit YAML4Rapid Prototyping mit YAML4
Rapid Prototyping mit YAML4
 
Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von Webseiten
 
Am Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag EditionAm Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag Edition
 
A Period of Transition
A Period of TransitionA Period of Transition
A Period of Transition
 
Kleiner Blick auf CSS3
Kleiner Blick auf CSS3Kleiner Blick auf CSS3
Kleiner Blick auf CSS3
 
Best practices im Frontend -Barcamp Mainz 2011
Best practices im Frontend -Barcamp Mainz 2011Best practices im Frontend -Barcamp Mainz 2011
Best practices im Frontend -Barcamp Mainz 2011
 
Real solutions, no tricks
Real solutions, no tricksReal solutions, no tricks
Real solutions, no tricks
 
Einführung in YAML4
Einführung in YAML4Einführung in YAML4
Einführung in YAML4
 
Frontend Best Practices
Frontend Best PracticesFrontend Best Practices
Frontend Best Practices
 
Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und Wespen
 
Praktikum in Frontendentwicklung - Session1
Praktikum in Frontendentwicklung - Session1Praktikum in Frontendentwicklung - Session1
Praktikum in Frontendentwicklung - Session1
 
Einfuehrung in YAML (2010)
Einfuehrung in YAML (2010)Einfuehrung in YAML (2010)
Einfuehrung in YAML (2010)
 
Komplexe Sites sauber aufbauen
Komplexe Sites sauber aufbauenKomplexe Sites sauber aufbauen
Komplexe Sites sauber aufbauen
 
Die Pest - philosophische Betrachtungen zur Webentwicklung
Die Pest - philosophische Betrachtungen zur WebentwicklungDie Pest - philosophische Betrachtungen zur Webentwicklung
Die Pest - philosophische Betrachtungen zur Webentwicklung
 
Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)
 
Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)
 
Webseiten sind keine Gemälde
Webseiten sind keine GemäldeWebseiten sind keine Gemälde
Webseiten sind keine Gemälde
 
Gute Seiten, Schlechte Seiten - Webmontag Edition
Gute Seiten, Schlechte Seiten -  Webmontag EditionGute Seiten, Schlechte Seiten -  Webmontag Edition
Gute Seiten, Schlechte Seiten - Webmontag Edition
 

Webstandards für ein modernes Web

  • 1. Webstandards – die Basis für ein modernes Web Jens Grochtdreis, SinnerSchrader Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  • 2. 2 Kurze Vorstellung (1) • Ich bin Senior Frontend Engineer bei SinnerSchrader in Frankfurt • SinnerSchrader betreut das E-Business großer Marken und internationaler Unternehmen seit 1996 • Kunden: Otto, Dow Jones, Deutsche Bank, Tchibo, comdirect, simyo, Arena ... Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  • 3. 3 Kurze Vorstellung (2) • Die Initiative „Webkrauts“ gründete sich auf Grund eines Eintrages in meinem Blog im August 2005 • Wir unterstützen Webdesigner und -entwickler dabei, Standards einzusetzen und so ihre Arbeit zu verbessern. Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  • 4. 4 Was haben wir hinter uns? • Das WWW existiert seit Anfang der 90er • Für wissenschaftliche Kommunikation • Sehr schnell kommerzielle Nutzung • Layout und Effekte vor Inhalten • Tunnelseiten, Preloader, „optimiert für“ • Eingleisiges Lese-Medium Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  • 5. 5 Wo stehen wir? • Browser sind besser geworden • Browser sind noch immer nicht gut • Browser sind nur noch EIN Gerät fürs WWW • Das WWW wird mobil • Barrierefreiheit hat Gesetzesstatus • Javascript „wird gut“ Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  • 6. 6 Wo stehen wir? • „Mitmach-Web“, vulgo: Web 2.0 • Andere „arbeiten lassen“, selber kassieren • Offener Austausch • Mashups • APIs (Schnittstellen!) • Professionalisierung Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  • 7. 7 Wo stehen wir? • Professionalisierung • Häufiger korrekte Nutzung der Standards • Immernoch hohe Ignoranz gegenüber Standards Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  • 8. 8 Wo gehen wir hin? Das Internet • wird noch mobiler, • wird multimedialer, • wird mehr mit TV veschmelzen, • es wird noch mehr Anzeigeoptionen geben! Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  • 9. 9 Was bedeutet Web 2.0? • Das „Mitmach-Web“ läßt sich auf einen Nenner bringen: Kontrollverlust Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  • 10. 10 Kontrollverlust - inhaltlich • Webseiten werden zu Applikationen, der User kann selber agieren, schafft Inhalte. • Der Anbieter stellt nur noch eine Plattform zur Verfügung, die der Anwender nutzt. • Inhalte können nur bedingt kontrolliert werden. Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  • 11. 11 Kontrollverlust - formal Wie können wir heute ins Internet gehen? • PC, Notebook • viele Betriebssyteme, Browser, Monitore • Handy, PDA • Spielkonsole • TV Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  • 12. 12 Flexibilität ist wichtig • Wir können nicht mehr sicher vorhersagen, wie jemand unsere Seite sieht/liest. • Deshalb: einen für möglichst viele gangbaren Weg beschreiten • Erst der Inhalt, dann das Layout! • Der Inhalt ist das Wichtigste! Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  • 13. 13 Trennung von Inhalt und Layout • Der Inhalt soll in den unterschiedlichsten Anzeigeformen wiedergegeben werden können. • Das geht nur einfach und gut, wenn man Inhalt und Layout trennt. Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  • 14. 14 Die Ebenen einer Webseite Dynamik Javascript, DOM Layout CSS Struktur (X)HTML Inhalt MySQL, XML Business-Logik PHP, ASP, JAVA Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  • 15. 15 Die Realität? • Viele Webseiten sind noch mit Layouttabellen aufgebaut. Layout und Struktur sind damit eins. • Diese Seiten sind unflexibel, nicht zukunftssicher. Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  • 16. 16 Der Ausweg? • Nutzt die Standards so, wie sie gedacht waren. • Geht defensiv vor: möglichst wenig Hindernisse für die Zugänglichkeit des Inhalts Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  • 17. 17 Nicht flexibel Was soll das? Text! Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  • 18. 18 Flexibel Besser! Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  • 19. 19 Keine Tabellen? Doch! • Tabellen sind für tabellarische Daten da! • Für Layoutzwecke gibt es CSS! • Die Unterstützung durch moderne Browser ist gut. • Selbst der IE5 kann mit CSS umgehen. Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  • 20. 20 Semantik • Inhalte werden danach ausgezeichnet was sie sind, nicht wie sie aussehen sollen. • Überschrift:<h1> bis <h6> • Liste: <ul> oder <ol> und <li>, nicht einfach Absätze untereinander • Das Aussehen kommt erst durch CSS. Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  • 21. 21 Semantik und Layout • Erst bestimmen, was es ist, dann das Aussehen bestimmen. • Wenn die Überschrift die gleiche Schriftgröße wie der Absatz hat, kann man trotzdem nicht auf die Überschrift verzichten Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  • 22. 22 Browsereigene Stylesheets Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  • 23. 23 Webstandards sind nichts Neues! • Es gibt sie, seitdem es das Web gibt. Wir nannten sie nur nicht so. • Grundverständnis: eine Internetseite ist ein Dokument, das sinnvoll strukturiert und ausgezeichnet werden muss. Erst in einem zweiten Schritt kommt das Layout. Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  • 24. 24 Was sollen Standards? • Alle Browser haben eine gemeinsame Basis, die sie interpretieren und die ich kenne. • Keine Sonderbehandlung notwendig. • Es wird eine Seite entwickelt, nicht verschiedene Varianten. • Qualitätssicherung Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  • 25. 25 Die Realität? • Sonderbehandlung dank Microsoft • Aber auch die anderen Browser sind nicht fehlerfrei • Mobile Browser unterstützen das media-Attribut nicht! Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  • 26. 26 Standards? W3C XML (X)HTML SVG CSS WCAG MathML WCAG (Web Content Accessibility Guidelines) XMLHttpRequest SWF ECMA-Script innerHTML Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  • 27. 27 Reichen diese Standards? NEIN Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  • 28. 28 Weiterentwicklung • Neue Ideen können neue Standards benötigen • Wir benötigen viele kleine Würfe • Das W3C will immer den großen Wurf • Die Browserhersteller werden wichtiger • Mikroformate als Beispiel Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  • 29. 29 Mikroformate • Auf Basis bestehender Standards werden neue Wege der Informationsvermittlung beschritten. Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  • 30. 30 Alle müssen mitmachen • Schnelle Standardisierungsverfahren • Schnelle Implementierung in Browser • Entwickler müssen lernen • Anwender müssen Updatezyklen mitmachen Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  • 31. 31 Webseiten sind nicht aus Papier • Webseiten unterliegen ganz anderen Gesetzen als Printprodukte. Das vergessen viele Designer und Kunden. • Warum also sollten wir Webseiten wie Printprodukte gestalten? Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  • 32. 32 Webseiten sind nicht aus Papier • Webseiten passen sich der Größe des Browsers an. • Man kann die Schriftarten vergrößern und verändern. • Man kann die Kontraste ändern. Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  • 33. 33 Webseiten sind nicht aus Papier • Man kann Bilder ausblenden • Webseiten können mit dem User interagieren. Versuchen Sie das mal mit einer Zeitung, einem Plakat, einem Buch! Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  • 34. 34 Eine andere Sicht der Dinge • Webstandards, das Design mit CSS erfordern eine andere Sicht der Dinge, als sie traditionell „normal“ ist. • Traditionelles Webdesign denkt in Spalten und setzt diese mit einer Layouttabelle um. Mehr oder minder tief verschachtelt. Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  • 35. 35 Anderes Medium – andere Denkweise • Ein anderes Medium erfordert ein anderes Vorgehen, eine andere Denkweise. • Die Idee des pixelgenauen Layouts, das auf allen Browsern gleich aussieht, ist nicht nur falsch, sondern auch schädlich. Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  • 36. 36 Anderes Medium – andere Denkweise • Layout und Inhalt sind getrennt. Diese Trennung hat ihre Vorteile, denn so kann man den Inhalt auf vielen Plattformen erreichen. • Die Inhalte werden in der Nutzung flexibel Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  • 37. 37 Mitmachen! Bauen Sie an einem modernen Web mit, nutzen Sie Webstandards mit Verstand! http://webkrauts.de Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web
  • 38. 38 Diese Präsentation steht unter der Creative Commons Lizenz „Attribution-ShareAlike 2.0“ http://creativecommons.org/licenses/by-sa/2.0/de/ Jens Grochtdreis - SinnerSchrader Webstandards – die Basis für ein modernes Web