SlideShare ist ein Scribd-Unternehmen logo
Webseiten sind keine Gemälde

Webstandards für ein besseres Web




        Webstandards für ein besseres Web
Webkrauts


Die Initiative für die Webkrauts ging von einem
Blogeintrag im August 2005 aus.
Nach dem Aufruf fanden sich innerhalb von etwa drei
Tagen über 60 Interessierte zusammen.
Die Webkrauts sind weder eine Organisation, noch ein
Verein. Wir sind eine Initiative.




                 Webstandards für ein besseres Web
Webkrauts


    Die Webkrauts setzen sich dafür ein, die Vorteile
●


    der Webstandards auch im deutschsprachigen
    Raum stärker zur Geltung zu bringen.
    Webstandards bieten viele Vorteile für alle, die das
    Internet benutzen.
    Webdesigner und -entwickler unterstützen wir
●


    dabei, Standards einzusetzen und so ihre Arbeit zu
    verbessern.
    Wir leisten Aufklärungsarbeit durch
●


    Veröffentlichungen im Netz und in anderen Medien.


                   Webstandards für ein besseres Web
Webseiten sind keine Gemälde


    WWW als Oberfläche für den Austausch
●


    wissenschaftlicher Informationen entwickelt
        textorientiert
    –

        wenige Elemente
    –

        Content is King
    –

    Kommerzialisierung ging schnell und ungeplant
●



    Tabellenlayout: der erste Hack im Web
●



        Analogie zu Altbekanntem
    –




                         Webstandards für ein besseres Web
Am Anfang war ...


    Die Aufbruchstimmung
●



        Jeder wollte mitmischen, alles mußte schnell gehen
    –

        Browser“krieg“ um Vorherrschaft im Web
    –




                      Webstandards für ein besseres Web
Webseiten sind keine Gemälde


    Eine Webseite ist ein Dokument
●



    Es gibt
●



        Absätze, Listen, Überschriften ...
    –

    Es gibt keine
●



        Fussnoten, Anmerkungen, Subheadlines, Werbung ...
    –

        HTML ist leider semantisch schwach.
    –




                       Webstandards für ein besseres Web
Webseiten sind keine Gemälde


    Vom Inhalt, nicht von der Gestaltung her denken!
●



    Webseiten sind Dokumente!
●




                  Webstandards für ein besseres Web
Was wissen wir über den Surfer?


    Nur daß er die Seite anschaut. Sonst nicht viel!
●



Wichtige Fragen für die Entwicklung einer Webseite:
    Ist der Browser komplett geöffnet?
●



    Ist der Rechner auf Invertierung geschaltet?
●



    Wie schnell ist die Internetverbindung?
●



    Sind Plugins installiert und Javascript an?
●



    Wie ist Grundschriftgröße seines Systems?
●



    Welche Schriften sind installiert?
●



u.v.m.
                   Webstandards für ein besseres Web
Standards?

                    XML             HTML
       SVG
W3C                      CSS                WCAG
      MathML
                 WCAG (Web Content Accessibility Guidelines)


     SWF
                                              XMLHttpRequest
             ECMA-Script                    innerHTML




               Webstandards für ein besseres Web
Was sollen Standards?


    Sie können helfen, daß ich früher nachhause gehe.
●



    Alle Browser haben eine gemeinsame Basis, die sie
●


    interpretieren und die ich kenne.
    Keine Sonderbehandlung notwendig.
●



    Es wird eine Seite entwickelt, nicht verschiedene
●


    Varianten.
    Standards sind zur Qualitätssicherung da.
●




                   Webstandards für ein besseres Web
Gegenfrage: was soll DAS?




Besser wäre es so:




                     Webstandards für ein besseres Web
Ebenen einer Webseite



        Dynamik              Javascript, DOM


         Layout              CSS


         Struktur            (X)HTML


          Inhalt             MySQL, XML


      Business-Logik         PHP, ASP, JAVA




              Webstandards für ein besseres Web
Semantik


    Die Inhalte einer Webseite werden danach
●


    ausgezeichnet was sie sind, nicht wie sie aussehen
    sollen.
    Eine Überschrift wird mit <h1> bis <h6> umfaßt.
●



    Eine Liste wird mit <ul> oder <ol> und <li>
●


    gemacht, nicht einfach Absätze untereinander oder
    Zeilenumbrüche
    Das Aussehen kommt durch CSS.
●




                  Webstandards für ein besseres Web
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




                   Webstandards für ein besseres Web
Jeder Browser hat sein Stylesheet




            Webstandards für ein besseres Web
Ein bischen CSS-Magic




            Webstandards für ein besseres Web
Ein HTML, viele CSS: CSSZengarden




           Webstandards für ein besseres Web
Das gleiche HTML, anderes CSS




            Webstandards für ein besseres Web
Das gleiche HTML, anderes CSS




            Webstandards für ein besseres Web
Das gleiche HTML, anderes CSS




            Webstandards für ein besseres Web
Empfehlenswerte Bücher (1)




http://www.amazon.de/dp/3898428370/



                                      Webstandards für ein besseres Web
Empfehlenswerte Bücher (2)
     http://www.amazon.de/dp/3898428370/
                                           http://www.amazon.de/dp/3827323797/




                                           http://www.amazon.de/dp/382724224X/
     http://www.amazon.de/dp/8790785754/




     http://www.amazon.de/dp/3827324777/
                                           http://www.amazon.de/dp/3815825989/




                                           http://www.amazon.de/dp/3827323436/




                        Webstandards für ein besseres Web
Am Ende


                                                http://webkrauts.de




                                          http://blog.grochtdreis.de
                    Jens Grochtdreis




 Diese Präsentation steht unter der Creative Commons Lizenz
 „Attribution-ShareAlike 2.0“
 http://creativecommons.org/licenses/by-sa/2.0/de/




                         Webstandards für ein besseres Web

Weitere ähnliche Inhalte

Andere mochten auch

Mobile: Karten werden digital by TWT
Mobile: Karten werden digital by TWT Mobile: Karten werden digital by TWT
Mobile: Karten werden digital by TWT TWT
 
SUSTAINABILITY - Wege zum nachhaltigen Markenerfolg
SUSTAINABILITY - Wege zum nachhaltigen MarkenerfolgSUSTAINABILITY - Wege zum nachhaltigen Markenerfolg
SUSTAINABILITY - Wege zum nachhaltigen MarkenerfolgFranziska Thiele
 
The Digital Value Cake
The Digital Value CakeThe Digital Value Cake
The Digital Value CakeTHE MAIN
 
Service design for business innovation
Service design for business innovationService design for business innovation
Service design for business innovationYves Pigneur
 
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
 
Sistema respiratorio i
Sistema respiratorio iSistema respiratorio i
Sistema respiratorio imarygilreyes
 
eStrategy Magazin Ausgabe 04/2014
eStrategy Magazin Ausgabe 04/2014eStrategy Magazin Ausgabe 04/2014
eStrategy Magazin Ausgabe 04/2014TechDivision GmbH
 
Trabajo de triangulo terminado 1
Trabajo de triangulo terminado 1Trabajo de triangulo terminado 1
Trabajo de triangulo terminado 1mariaeugenia2012
 
Presentacion proyecto publicaciones digitales
Presentacion proyecto publicaciones digitalesPresentacion proyecto publicaciones digitales
Presentacion proyecto publicaciones digitalespublicacionesdigitales
 
Facebook für Unternehmen :: Teil 3/3
Facebook für Unternehmen :: Teil 3/3Facebook für Unternehmen :: Teil 3/3
Facebook für Unternehmen :: Teil 3/3Doris Schuppe
 
eStrategy-Ausgabe-01-2015-Leseprobe
eStrategy-Ausgabe-01-2015-LeseprobeeStrategy-Ausgabe-01-2015-Leseprobe
eStrategy-Ausgabe-01-2015-LeseprobeTechDivision GmbH
 
E strategy ausgabe4-01-10-10-leseprobe
E strategy ausgabe4-01-10-10-leseprobeE strategy ausgabe4-01-10-10-leseprobe
E strategy ausgabe4-01-10-10-leseprobeTechDivision GmbH
 
Filosofia computacion corregido
Filosofia computacion corregidoFilosofia computacion corregido
Filosofia computacion corregidoSantivi11
 
Coworking im Ferienparadies #cowork2015
Coworking im Ferienparadies #cowork2015Coworking im Ferienparadies #cowork2015
Coworking im Ferienparadies #cowork2015Doris Schuppe
 
Los buscadores
Los buscadoresLos buscadores
Los buscadoresFRANYGEMMA
 
Webseiten sind keine Gemälde
Webseiten sind keine GemäldeWebseiten sind keine Gemälde
Webseiten sind keine GemäldeJens Grochtdreis
 
Karnevalparty Naujas
Karnevalparty NaujasKarnevalparty Naujas
Karnevalparty Naujasguest18d8c4
 

Andere mochten auch (20)

Mobile: Karten werden digital by TWT
Mobile: Karten werden digital by TWT Mobile: Karten werden digital by TWT
Mobile: Karten werden digital by TWT
 
SUSTAINABILITY - Wege zum nachhaltigen Markenerfolg
SUSTAINABILITY - Wege zum nachhaltigen MarkenerfolgSUSTAINABILITY - Wege zum nachhaltigen Markenerfolg
SUSTAINABILITY - Wege zum nachhaltigen Markenerfolg
 
The Digital Value Cake
The Digital Value CakeThe Digital Value Cake
The Digital Value Cake
 
Service design for business innovation
Service design for business innovationService design for business innovation
Service design for business innovation
 
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
 
Sistema respiratorio i
Sistema respiratorio iSistema respiratorio i
Sistema respiratorio i
 
eStrategy Magazin Ausgabe 04/2014
eStrategy Magazin Ausgabe 04/2014eStrategy Magazin Ausgabe 04/2014
eStrategy Magazin Ausgabe 04/2014
 
Trabajo de triangulo terminado 1
Trabajo de triangulo terminado 1Trabajo de triangulo terminado 1
Trabajo de triangulo terminado 1
 
Presentacion proyecto publicaciones digitales
Presentacion proyecto publicaciones digitalesPresentacion proyecto publicaciones digitales
Presentacion proyecto publicaciones digitales
 
Facebook für Unternehmen :: Teil 3/3
Facebook für Unternehmen :: Teil 3/3Facebook für Unternehmen :: Teil 3/3
Facebook für Unternehmen :: Teil 3/3
 
Präsi HR Innovation Day 2013
Präsi HR Innovation Day 2013Präsi HR Innovation Day 2013
Präsi HR Innovation Day 2013
 
eStrategy-Ausgabe-01-2015-Leseprobe
eStrategy-Ausgabe-01-2015-LeseprobeeStrategy-Ausgabe-01-2015-Leseprobe
eStrategy-Ausgabe-01-2015-Leseprobe
 
E strategy ausgabe4-01-10-10-leseprobe
E strategy ausgabe4-01-10-10-leseprobeE strategy ausgabe4-01-10-10-leseprobe
E strategy ausgabe4-01-10-10-leseprobe
 
Filosofia computacion corregido
Filosofia computacion corregidoFilosofia computacion corregido
Filosofia computacion corregido
 
Coworking im Ferienparadies #cowork2015
Coworking im Ferienparadies #cowork2015Coworking im Ferienparadies #cowork2015
Coworking im Ferienparadies #cowork2015
 
Los buscadores
Los buscadoresLos buscadores
Los buscadores
 
Médico: Inicie con la activación de su cuenta
Médico: Inicie con la activación de su cuentaMédico: Inicie con la activación de su cuenta
Médico: Inicie con la activación de su cuenta
 
Crearunblog 120529193925-phpapp02
Crearunblog 120529193925-phpapp02Crearunblog 120529193925-phpapp02
Crearunblog 120529193925-phpapp02
 
Webseiten sind keine Gemälde
Webseiten sind keine GemäldeWebseiten sind keine Gemälde
Webseiten sind keine Gemälde
 
Karnevalparty Naujas
Karnevalparty NaujasKarnevalparty Naujas
Karnevalparty Naujas
 

Ähnlich wie Webseiten sind keine Gemaelde

Webstandards für ein modernes Web
Webstandards für ein modernes WebWebstandards für ein modernes Web
Webstandards für ein modernes WebJens Grochtdreis
 
1. Technologie-Tag - Webstandards
1. Technologie-Tag - Webstandards1. Technologie-Tag - Webstandards
1. Technologie-Tag - WebstandardsNico Steiner
 
SEO für Magento Commerce - SEOkomm 2011
SEO für Magento Commerce - SEOkomm 2011SEO für Magento Commerce - SEOkomm 2011
SEO für Magento Commerce - SEOkomm 2011formaremedia
 
1&1 Frontend Workshop
1&1 Frontend Workshop1&1 Frontend Workshop
1&1 Frontend WorkshopNico Steiner
 
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Bastian Grimm
 
Seo Campixx 2015 - Technical SEO for Beginners
Seo Campixx 2015 - Technical SEO for BeginnersSeo Campixx 2015 - Technical SEO for Beginners
Seo Campixx 2015 - Technical SEO for BeginnersJan Berens
 
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
 
HTML+CSS für Einsteiger - Vom Doctype zum Style
HTML+CSS für Einsteiger - Vom Doctype zum StyleHTML+CSS für Einsteiger - Vom Doctype zum Style
HTML+CSS für Einsteiger - Vom Doctype zum StyleGino Cremer
 
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur QualitätssicherungFrontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur QualitätssicherungMichael Kühnel
 
SEO: OnPage Optimierungen erfolgreicher Webseiten, Gastvortrag Uni Bayreuth 2013
SEO: OnPage Optimierungen erfolgreicher Webseiten, Gastvortrag Uni Bayreuth 2013SEO: OnPage Optimierungen erfolgreicher Webseiten, Gastvortrag Uni Bayreuth 2013
SEO: OnPage Optimierungen erfolgreicher Webseiten, Gastvortrag Uni Bayreuth 2013Jan Hendrik Merlin Jacob
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeNico Steiner
 
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
 
Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)Eric Eggert
 
Was kommt nach den SPAs
Was kommt nach den SPAsWas kommt nach den SPAs
Was kommt nach den SPAsQAware GmbH
 
HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017Bastian Grimm
 
SEOkomm 2019 - André Goldmann - User-Experience-Optimierung für SEOs - Wie du...
SEOkomm 2019 - André Goldmann - User-Experience-Optimierung für SEOs - Wie du...SEOkomm 2019 - André Goldmann - User-Experience-Optimierung für SEOs - Wie du...
SEOkomm 2019 - André Goldmann - User-Experience-Optimierung für SEOs - Wie du...André Goldmann
 
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
 
Frontend Performance
Frontend PerformanceFrontend Performance
Frontend PerformanceNico Steiner
 

Ähnlich wie Webseiten sind keine Gemaelde (20)

Webstandards für ein modernes Web
Webstandards für ein modernes WebWebstandards für ein modernes Web
Webstandards für ein modernes Web
 
1. Technologie-Tag - Webstandards
1. Technologie-Tag - Webstandards1. Technologie-Tag - Webstandards
1. Technologie-Tag - Webstandards
 
SEO für Magento Commerce - SEOkomm 2011
SEO für Magento Commerce - SEOkomm 2011SEO für Magento Commerce - SEOkomm 2011
SEO für Magento Commerce - SEOkomm 2011
 
1&1 Frontend Workshop
1&1 Frontend Workshop1&1 Frontend Workshop
1&1 Frontend Workshop
 
Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014
 
Seo Campixx 2015 - Technical SEO for Beginners
Seo Campixx 2015 - Technical SEO for BeginnersSeo Campixx 2015 - Technical SEO for Beginners
Seo Campixx 2015 - Technical SEO for Beginners
 
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
 
HTML+CSS für Einsteiger - Vom Doctype zum Style
HTML+CSS für Einsteiger - Vom Doctype zum StyleHTML+CSS für Einsteiger - Vom Doctype zum Style
HTML+CSS für Einsteiger - Vom Doctype zum Style
 
Zecplus de 2020_07_27
Zecplus de 2020_07_27Zecplus de 2020_07_27
Zecplus de 2020_07_27
 
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur QualitätssicherungFrontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
Frontend Coding Guidelines - Ein Baustein zur Qualitätssicherung
 
SEO: OnPage Optimierungen erfolgreicher Webseiten, Gastvortrag Uni Bayreuth 2013
SEO: OnPage Optimierungen erfolgreicher Webseiten, Gastvortrag Uni Bayreuth 2013SEO: OnPage Optimierungen erfolgreicher Webseiten, Gastvortrag Uni Bayreuth 2013
SEO: OnPage Optimierungen erfolgreicher Webseiten, Gastvortrag Uni Bayreuth 2013
 
Frontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 BestellsystemeFrontend-Architektur der 1&1 Bestellsysteme
Frontend-Architektur der 1&1 Bestellsysteme
 
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
 
Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)
 
Was kommt nach den SPAs
Was kommt nach den SPAsWas kommt nach den SPAs
Was kommt nach den SPAs
 
HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017HTTPs Migration How To - SMX München 2017
HTTPs Migration How To - SMX München 2017
 
SEOkomm 2019 - André Goldmann - User-Experience-Optimierung für SEOs - Wie du...
SEOkomm 2019 - André Goldmann - User-Experience-Optimierung für SEOs - Wie du...SEOkomm 2019 - André Goldmann - User-Experience-Optimierung für SEOs - Wie du...
SEOkomm 2019 - André Goldmann - User-Experience-Optimierung für SEOs - Wie du...
 
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)
 
WordPress Grundlagen Kurs
WordPress Grundlagen KursWordPress Grundlagen Kurs
WordPress Grundlagen Kurs
 
Frontend Performance
Frontend PerformanceFrontend Performance
Frontend Performance
 

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
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine TricksJens 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 (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
 
A Tag 2009 - Aspekte Moderne Webentwicklung
A Tag 2009 -  Aspekte Moderne WebentwicklungA Tag 2009 -  Aspekte Moderne Webentwicklung
A Tag 2009 - Aspekte Moderne WebentwicklungJens Grochtdreis
 
Aspekte Moderner Frontendentwicklung
Aspekte Moderner FrontendentwicklungAspekte Moderner Frontendentwicklung
Aspekte Moderner FrontendentwicklungJens 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
 
Echte Lösungen, keine Tricks
Echte Lösungen, keine TricksEchte Lösungen, keine Tricks
Echte Lösungen, keine 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 (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)
 
A Tag 2009 - Aspekte Moderne Webentwicklung
A Tag 2009 -  Aspekte Moderne WebentwicklungA Tag 2009 -  Aspekte Moderne Webentwicklung
A Tag 2009 - Aspekte Moderne Webentwicklung
 
Aspekte Moderner Frontendentwicklung
Aspekte Moderner FrontendentwicklungAspekte Moderner Frontendentwicklung
Aspekte Moderner Frontendentwicklung
 

Webseiten sind keine Gemaelde

  • 1. Webseiten sind keine Gemälde Webstandards für ein besseres Web Webstandards für ein besseres Web
  • 2. Webkrauts Die Initiative für die Webkrauts ging von einem Blogeintrag im August 2005 aus. Nach dem Aufruf fanden sich innerhalb von etwa drei Tagen über 60 Interessierte zusammen. Die Webkrauts sind weder eine Organisation, noch ein Verein. Wir sind eine Initiative. Webstandards für ein besseres Web
  • 3. Webkrauts Die Webkrauts setzen sich dafür ein, die Vorteile ● der Webstandards auch im deutschsprachigen Raum stärker zur Geltung zu bringen. Webstandards bieten viele Vorteile für alle, die das Internet benutzen. Webdesigner und -entwickler unterstützen wir ● dabei, Standards einzusetzen und so ihre Arbeit zu verbessern. Wir leisten Aufklärungsarbeit durch ● Veröffentlichungen im Netz und in anderen Medien. Webstandards für ein besseres Web
  • 4. Webseiten sind keine Gemälde WWW als Oberfläche für den Austausch ● wissenschaftlicher Informationen entwickelt textorientiert – wenige Elemente – Content is King – Kommerzialisierung ging schnell und ungeplant ● Tabellenlayout: der erste Hack im Web ● Analogie zu Altbekanntem – Webstandards für ein besseres Web
  • 5. Am Anfang war ... Die Aufbruchstimmung ● Jeder wollte mitmischen, alles mußte schnell gehen – Browser“krieg“ um Vorherrschaft im Web – Webstandards für ein besseres Web
  • 6. Webseiten sind keine Gemälde Eine Webseite ist ein Dokument ● Es gibt ● Absätze, Listen, Überschriften ... – Es gibt keine ● Fussnoten, Anmerkungen, Subheadlines, Werbung ... – HTML ist leider semantisch schwach. – Webstandards für ein besseres Web
  • 7. Webseiten sind keine Gemälde Vom Inhalt, nicht von der Gestaltung her denken! ● Webseiten sind Dokumente! ● Webstandards für ein besseres Web
  • 8. Was wissen wir über den Surfer? Nur daß er die Seite anschaut. Sonst nicht viel! ● Wichtige Fragen für die Entwicklung einer Webseite: Ist der Browser komplett geöffnet? ● Ist der Rechner auf Invertierung geschaltet? ● Wie schnell ist die Internetverbindung? ● Sind Plugins installiert und Javascript an? ● Wie ist Grundschriftgröße seines Systems? ● Welche Schriften sind installiert? ● u.v.m. Webstandards für ein besseres Web
  • 9. Standards? XML HTML SVG W3C CSS WCAG MathML WCAG (Web Content Accessibility Guidelines) SWF XMLHttpRequest ECMA-Script innerHTML Webstandards für ein besseres Web
  • 10. Was sollen Standards? Sie können helfen, daß ich früher nachhause gehe. ● Alle Browser haben eine gemeinsame Basis, die sie ● interpretieren und die ich kenne. Keine Sonderbehandlung notwendig. ● Es wird eine Seite entwickelt, nicht verschiedene ● Varianten. Standards sind zur Qualitätssicherung da. ● Webstandards für ein besseres Web
  • 11. Gegenfrage: was soll DAS? Besser wäre es so: Webstandards für ein besseres Web
  • 12. Ebenen einer Webseite Dynamik Javascript, DOM Layout CSS Struktur (X)HTML Inhalt MySQL, XML Business-Logik PHP, ASP, JAVA Webstandards für ein besseres Web
  • 13. Semantik Die Inhalte einer Webseite werden danach ● ausgezeichnet was sie sind, nicht wie sie aussehen sollen. Eine Überschrift wird mit <h1> bis <h6> umfaßt. ● Eine Liste wird mit <ul> oder <ol> und <li> ● gemacht, nicht einfach Absätze untereinander oder Zeilenumbrüche Das Aussehen kommt durch CSS. ● Webstandards für ein besseres Web
  • 14. 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 Webstandards für ein besseres Web
  • 15. Jeder Browser hat sein Stylesheet Webstandards für ein besseres Web
  • 16. Ein bischen CSS-Magic Webstandards für ein besseres Web
  • 17. Ein HTML, viele CSS: CSSZengarden Webstandards für ein besseres Web
  • 18. Das gleiche HTML, anderes CSS Webstandards für ein besseres Web
  • 19. Das gleiche HTML, anderes CSS Webstandards für ein besseres Web
  • 20. Das gleiche HTML, anderes CSS Webstandards für ein besseres Web
  • 22. Empfehlenswerte Bücher (2) http://www.amazon.de/dp/3898428370/ http://www.amazon.de/dp/3827323797/ http://www.amazon.de/dp/382724224X/ http://www.amazon.de/dp/8790785754/ http://www.amazon.de/dp/3827324777/ http://www.amazon.de/dp/3815825989/ http://www.amazon.de/dp/3827323436/ Webstandards für ein besseres Web
  • 23. Am Ende http://webkrauts.de http://blog.grochtdreis.de Jens Grochtdreis Diese Präsentation steht unter der Creative Commons Lizenz „Attribution-ShareAlike 2.0“ http://creativecommons.org/licenses/by-sa/2.0/de/ Webstandards für ein besseres Web