SlideShare ist ein Scribd-Unternehmen logo
Aspekte moderner
             Frontendentwicklung
                   Jens Grochtdreis
                      Webkrauts




Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Jens Grochtdreis

  _ Frontend Entwickler
  _ Gründer der Webkrauts
  _ Blogger
  _ Autor des PHPMagazins, Webstandards-Magazins, T3N
  _ Fachliche Buchbetreuung bei Galileo, O'Reilly, MuT




Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Das sollten wir nicht vergessen!

  _ Das Internet ist ein neues Medium!
     _ junges Medium
     _ rasante Entwicklung
     _ spannend
     _ atemberaubend
     _ umwälzend
     _ in ständigem Wandel begriffen




Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Das Internet ist komplex

  _ Wir nutzen sehr viele verschiedene Standards und
    Technologien, um eine Website zu betreiben.
     _ (X)HTML, CSS, Javascript, DOM 1-3
     _ Flash, Flex, SWF
     _ PHP, ASP, Perl, Java
     _ MySQL, PostgreSQL
     _ XML, XSLT




                                                          4
Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Kontrollverlust - formal

  _ Wie können wir heute ins Internet gehen?
     _ PC, Notebook
     _ viele Betriebssysteme, Browser, Monitore
     _ Handy, PDA
     _ Spielkonsole
     _ TV




                                                          5
Jens Grochtdreis – Aspekte moderner Frontendentwicklung
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!




                                                          6
Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Flexibilität ist wichtig




 Screenshot von einem EeePC, 800x480px
                                                          7
Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Semantik

  _ Webseiten sind Dokumente.
     _ Genau wie diese haben sie eine Struktur und die
       einzelnen Elemente eine Bedeutung.
     _ Diese Bedeutung wird durch die Elemente in HTML
       widergespiegelt.
     _ Wir schreiben diese Elemente dann mittels Tags in eine
       Seite.




                                                                8
Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Semantik

  _ Webseiten sind heute mehr als nur Dokumente.
     _ Die Dokumentenanalogie ist alt
     _ Es sollten wissenschaftliche Texte erfaßt werden
     _ HTML5 ist der Versuch, der Realität gerecht zu werden
     _ Es gibt immer mehr Applikationen
     _ Viele notwendige Seitenelemente gibt es nicht in HTML,
       diese müssen wir per CSS und Javascript simulieren




                                                                9
Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Semantik

  _ Erst über eine Webseite nachdenken, dann die
    Struktur erfassen und aufschreiben.
     _ Eine Überschrift wird mit beispielsweise
       <h2>Überschrift</h2> ausgezeichnet, nicht mit
       <div class="headline">Überschrift</div>




                                                       10
Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Semantik

  _ "Semantik" hört sich hochtrabender an, als es ist.
     _ Eine semantisch ausgezeichnete Seite bedeutet nur, daß
       man sich Gedanken über seine Arbeit gemacht hat.
     _ Erst bestimmen, was es ist, dann das Aussehen
       bestimmen.




                                                            11
Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Eingebaute und individuelle
Stylesheets
  _ Auch Browser nutzen Stylesheets, um HTML
    anzuzeigen. Diese Standardeinstellungen
    unterscheiden sich leider zwischen den Browsern.
  _ Auch ein Nutzer kann ein eigenes Stylesheet dem
    Browser zur Interpretation der Seite mitgeben.
  _ Letztendliche Sicherheit über die Darstellung einer
    Seite gibt es nicht.




                                                          12
Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Eine ungestylte Seite in zwei
Browsern




                                                      13
Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Basis-Stylesheet

  _ Die Kurzform hat ihre Nachteile, insbesondere bei der
    Formatierung von Formularelementen.
  _ Deshalb rät Eric Meyer zu einem komplexeren Basis-
    Stylesheet.
  _ Zur Not geht aber auch die Kurzform.




                                                            14
Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Basis-Stylesheet von Eric Meyer




  http://meyerweb.com/eric/tools/css/reset/
                                                      15
Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Überschriften

  _ Google weist <h1> wenig Bedeutung zu, da dort meist
    ein Logo und der Firmenname drin sind.
  _ Wenn die Überschrift die gleiche Schriftgröße wie der
    Absatz hat, kann man trotzdem nicht auf die
    Überschrift verzichten
     _ Trennung von Sinn und Optik!
        h1 { font-size: 12px;}
        p { font-size: 12px;}




                                                            16
Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Überschriften

  _ Überschriften sind eine Navigationsmöglichkeit für
    Screenreader.
  _ Wikis generieren aus den Textüberschriften eine
    seiteninterne Navigation, ein Inhaltsverzeichnis.
     _ Dafür gibt es auch ein jQuery-Plugin:
       jqPlanize [http://snipurl.com/2v4wm]




Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Überschriftenreihenfolge

  _ Im Quellcode sollten die Überschriftenhierarchien
    logisch aufeinander folgen.
     _ Nicht <h4> auf <h2> folgen lassen.
  _ Es gibt keine Meta-Überschriften, wie in den
    traditionellen Printmedien.
  _ Semantik der Überschriften ist unterentwickelt und
    sehr strikt.
     _ Man erkennt die Herkunft von HTML aus der
       Wissenschaft.




Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Block- und Inlineelemente

  _ Blockelemente erzeugen einen Absatz nach sich.
  _ Nicht alle Elemente können ineinander geschachtelt
    werden.
  _ Bei Inlineelementen gibt es keine vertikalen Margins.
  _ Niemals Block- in Inlineelemente verschachteln!




                                                            19
Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Absolut verboten!

  _ Keine klickbaren Boxen:
     <a href=“#”><div class=“teaser”> .... </div></a>


  _ Kein span und div als Allzweckwaffe:
     <span><p>....</p></span>
     span { display: block;}




                                                        20
Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Gleiche Höhe von Boxen

  _ Nebeneinander stehende Boxen wissen nichts
    voneinander.
  _ Der Vorteil von Tabellen sind die mitwachsenden Zellen
    in einer Zeile.
  _ Unter bestimmten Umständen kann man die Optik
    simulieren.
     _ Faux Columns [http://snipurl.com/2v58l]
  _ Mit Javascript nachhelfen
     _ bspw. mit jQuery [http://snipurl.com/2v5ag]



Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Floating

  _ Wird ein Element gefloatet, so wird es aus dem
    Dokumentenfluss herausgezogen.
  _ Alle nachfolgenden Elemente rutschen nach.
  _ Floats werden gerne zum Aufbau eines Layouts
    genutzt, vor allem weil sie sehr flexibel gehandhabt
    werden können.
  _ Insbesondere der IE hat heftige Bugs im
    Zusammenhang mit Floats.




                                                           22
Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Floating

  _ Das Clearing von Floats ist ein Problem, wenn man
    nicht leere Elemente in den Code schreiben kann oder
    will.
  _ Floats: Eine Einführung [http://snipurl.com/2ul2s]
  _ Einschließen von Floats ohne zusätzliches Markup
    [http://snipurl.com/2ul35]




                                                           23
Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Doubled-Margin-Bug

  _ Der IE 6 verdoppelt eine Margin in Float-Richtung.
     _ #bsp { float: left; margin-left: 10px;}
     _ Der IE 6 macht daraus 20px!
  _ Behebung ist einfach und unlogisch, ohne Nebenwirkungen
     _ #bsp { float: left; display: inline; margin-left: 10px; }
  _ Ein Float ist so lange ein Blockelement, bis es nicht mehr
    floatet. Daran ändert auch die Display-Eigenschaft nichts.
  _ Aber der Trick wirkt und hat keine Nachteile.
  _ Am besten immer „im Duett“ schreiben.


                                                                   24
Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Clearing

  _ Ein Float wird aus dem normalen Dokumentenfluss
    herausgehoben.
  _ Deshalb bekommt er es nicht mit, wenn das
    Elternelement aufhört und ein neues beginnt.
  _ Ist der Inhalt des Elternelementes kleiner, als das
    floatende Kindelement, dann lappt dieses über.
  _ Um dies zu umgehen, müssen Floats gecleart werden.
    Die CSS-Eigenschaft heißt clearing.
  _ Der IE cleart automatisch, alle anderen nicht.


                                                          25
Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Clearing

  _ Traditionell und sicher: Vor dem schließenden Tag des
    Elternelementes ein DIV oder einen Absatz einfügen.
     <div class=„klaerchen“></div>
     .klaerchen { clear: both; height: 0; font-size: 0;}
  _ Modern: „clearfix“ über eine Klasse




                                                           26
Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Clearfix

  .clearfix:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
  }

  /* Hides from IE-mac */
  * html .clearfix {height: 1%;}
  /* End hide from IE-mac */



Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Runde Ecken – CSS3




   /* ====== runde Ecken ==== */
        .rc {
               border: 2px solid #ff8001;
               border-radius: 15px;
              -moz-border-radius: 15px;
              -webkit-border-radius: 15px;
            color: #000;
            background-color: #fff;
             padding: 1em;
            }
                                                      28
Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Runde Ecken mit Schatten – CSS3




           .rbs {
                border: 1px solid #aaaaaa;
                border-radius: 15px;
                -moz-border-radius: 15px;
                -webkit-border-radius: 15px;
                box-shadow: 5px 5px 15px #ccc;
                -moz-box-shadow: 5px 5px 15px #ccc;
                -webkit-box-shadow: 5px 5px 15px #ccc;
       }



                                                         29
Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Testen mit dem IE-Tester




  http://www.my-debugbar.com/wiki/IETester/HomePage



                                                      30
Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Am Ende

                                  Jens Grochtdreis
                                  http://blog.grochtdreis.de
                                  http://webkrauts.de




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




                                                                                       31
Jens Grochtdreis – Aspekte moderner Frontendentwicklung

Weitere ähnliche Inhalte

Andere mochten auch

09 GMW Workshop E Assessment
09 GMW Workshop E Assessment09 GMW Workshop E Assessment
09 GMW Workshop E Assessment
Cornelia Ruedel
 
Virus diana
Virus dianaVirus diana
Virus diana
Gissela Soler
 
Intervención fisura labiopalatinas
Intervención fisura labiopalatinasIntervención fisura labiopalatinas
Intervención fisura labiopalatinas
Sol Gonzalez
 
Informatica
InformaticaInformatica
Informatica
andreaangarita
 
Derly diapositivas
Derly diapositivasDerly diapositivas
Derly diapositivas
derlyinfo
 
HR Innovation Day 2104 - Recruiting by the numbers uta sommer (go hiring)
HR Innovation Day 2104 - Recruiting by the numbers   uta sommer (go hiring)HR Innovation Day 2104 - Recruiting by the numbers   uta sommer (go hiring)
HR Innovation Day 2104 - Recruiting by the numbers uta sommer (go hiring)
HRM - HTWK Leipzig
 
La innovación técnica y el desarrollo sustentable en
La innovación técnica y el desarrollo sustentable enLa innovación técnica y el desarrollo sustentable en
La innovación técnica y el desarrollo sustentable en
33300991
 
Foros en línea
Foros en líneaForos en línea
Foros en línea
FRANYGEMMA
 
Cuestionario adultos dislexia
Cuestionario adultos dislexiaCuestionario adultos dislexia
Cuestionario adultos dislexia
Sol Gonzalez
 
Weibliche Formulierungen
Weibliche FormulierungenWeibliche Formulierungen
Weibliche Formulierungen
undergroundjam
 
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
TechDivision GmbH
 
10 juegos divertidos para aprender a leer
10 juegos divertidos para aprender a leer10 juegos divertidos para aprender a leer
10 juegos divertidos para aprender a leer
Sol Gonzalez
 
903
903903
Social Media ist...
Social Media ist...Social Media ist...
Social Media ist...
Doris Schuppe
 
HISTORY Flash 2A1
HISTORY Flash 2A1HISTORY Flash 2A1
HISTORY Flash 2A1
Karlos Sánchez Santana
 
Presentación del protocolo
Presentación del protocoloPresentación del protocolo
Presentación del protocolo
flautincruz
 
Uso del email en la educacion
Uso del email en la educacionUso del email en la educacion
Uso del email en la educacion
Universidad Autónoma de Cd. Juarez
 
Flap
FlapFlap
eStrategy Magazin Ausgabe 04/2014
eStrategy Magazin Ausgabe 04/2014eStrategy Magazin Ausgabe 04/2014
eStrategy Magazin Ausgabe 04/2014
TechDivision GmbH
 
Investigacion
InvestigacionInvestigacion

Andere mochten auch (20)

09 GMW Workshop E Assessment
09 GMW Workshop E Assessment09 GMW Workshop E Assessment
09 GMW Workshop E Assessment
 
Virus diana
Virus dianaVirus diana
Virus diana
 
Intervención fisura labiopalatinas
Intervención fisura labiopalatinasIntervención fisura labiopalatinas
Intervención fisura labiopalatinas
 
Informatica
InformaticaInformatica
Informatica
 
Derly diapositivas
Derly diapositivasDerly diapositivas
Derly diapositivas
 
HR Innovation Day 2104 - Recruiting by the numbers uta sommer (go hiring)
HR Innovation Day 2104 - Recruiting by the numbers   uta sommer (go hiring)HR Innovation Day 2104 - Recruiting by the numbers   uta sommer (go hiring)
HR Innovation Day 2104 - Recruiting by the numbers uta sommer (go hiring)
 
La innovación técnica y el desarrollo sustentable en
La innovación técnica y el desarrollo sustentable enLa innovación técnica y el desarrollo sustentable en
La innovación técnica y el desarrollo sustentable en
 
Foros en línea
Foros en líneaForos en línea
Foros en línea
 
Cuestionario adultos dislexia
Cuestionario adultos dislexiaCuestionario adultos dislexia
Cuestionario adultos dislexia
 
Weibliche Formulierungen
Weibliche FormulierungenWeibliche Formulierungen
Weibliche Formulierungen
 
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
 
10 juegos divertidos para aprender a leer
10 juegos divertidos para aprender a leer10 juegos divertidos para aprender a leer
10 juegos divertidos para aprender a leer
 
903
903903
903
 
Social Media ist...
Social Media ist...Social Media ist...
Social Media ist...
 
HISTORY Flash 2A1
HISTORY Flash 2A1HISTORY Flash 2A1
HISTORY Flash 2A1
 
Presentación del protocolo
Presentación del protocoloPresentación del protocolo
Presentación del protocolo
 
Uso del email en la educacion
Uso del email en la educacionUso del email en la educacion
Uso del email en la educacion
 
Flap
FlapFlap
Flap
 
eStrategy Magazin Ausgabe 04/2014
eStrategy Magazin Ausgabe 04/2014eStrategy Magazin Ausgabe 04/2014
eStrategy Magazin Ausgabe 04/2014
 
Investigacion
InvestigacionInvestigacion
Investigacion
 

Ähnlich wie Aspekte Moderner Frontendentwicklung

Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine WebseiteWebdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite
chrisign gmbh
 
Webseiten sind keine Gemälde
Webseiten sind keine GemäldeWebseiten sind keine Gemälde
Webseiten sind keine Gemälde
Jens Grochtdreis
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
Sven Wolfermann
 
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
Jens Grochtdreis
 
Webstandards für ein modernes Web
Webstandards für ein modernes WebWebstandards für ein modernes Web
Webstandards für ein modernes Web
Jens Grochtdreis
 
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
denkwerk GmbH
 
Responsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapResponsive Webdesign mit Bootstrap
Responsive Webdesign mit Bootstrap
Gregor Biswanger
 
Creasoft c-Day 2009 - Webtechnologien der Zukunft
Creasoft c-Day 2009 - Webtechnologien der ZukunftCreasoft c-Day 2009 - Webtechnologien der Zukunft
Creasoft c-Day 2009 - Webtechnologien der Zukunft
Creasoft AG
 
3D - Spiel mit der Technik, Tekom 2016
3D - Spiel mit der Technik, Tekom 20163D - Spiel mit der Technik, Tekom 2016
3D - Spiel mit der Technik, Tekom 2016
Robert Siegel
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
Noël Bossart
 
design
designdesign
Web Design Trends 2011
Web Design Trends 2011Web Design Trends 2011
Web Design Trends 2011
Vitaly Friedman
 
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & WordpressWP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
KirstenSchelper
 
Vortrag HTML5, CSS3, PhoneGap
Vortrag  HTML5, CSS3, PhoneGapVortrag  HTML5, CSS3, PhoneGap
Vortrag HTML5, CSS3, PhoneGap
rene_peinl
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
Conny Stier
 
Praktikum in Frontendentwicklung - Session1
Praktikum in Frontendentwicklung - Session1Praktikum in Frontendentwicklung - Session1
Praktikum in Frontendentwicklung - Session1
Jens Grochtdreis
 
Responsive design
Responsive designResponsive design
Responsive design
Thomas Bähr
 
Die neuen Bewertungskriterien von Google ab 05 / 2021
Die neuen Bewertungskriterien von Google ab 05 / 2021Die neuen Bewertungskriterien von Google ab 05 / 2021
Die neuen Bewertungskriterien von Google ab 05 / 2021
Phil Marx
 
Entwicklercamp responive web design
Entwicklercamp   responive web designEntwicklercamp   responive web design
Entwicklercamp responive web design
Henning Schmidt
 
My application as webdesigner and front-end developer
My application as webdesigner and front-end developerMy application as webdesigner and front-end developer
My application as webdesigner and front-end developer
christianschweinhardt
 

Ähnlich wie Aspekte Moderner Frontendentwicklung (20)

Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine WebseiteWebdesign Trends Teil 02 - Wie gestaltet man eine Webseite
Webdesign Trends Teil 02 - Wie gestaltet man eine Webseite
 
Webseiten sind keine Gemälde
Webseiten sind keine GemäldeWebseiten sind keine Gemälde
Webseiten sind keine Gemälde
 
Responsive Webdesign Process
Responsive Webdesign ProcessResponsive Webdesign Process
Responsive Webdesign Process
 
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
 
Webstandards für ein modernes Web
Webstandards für ein modernes WebWebstandards für ein modernes Web
Webstandards für ein modernes Web
 
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
Size Matters. Responsive-Design-Lösungen mit denkwerk (2013)
 
Responsive Webdesign mit Bootstrap
Responsive Webdesign mit BootstrapResponsive Webdesign mit Bootstrap
Responsive Webdesign mit Bootstrap
 
Creasoft c-Day 2009 - Webtechnologien der Zukunft
Creasoft c-Day 2009 - Webtechnologien der ZukunftCreasoft c-Day 2009 - Webtechnologien der Zukunft
Creasoft c-Day 2009 - Webtechnologien der Zukunft
 
3D - Spiel mit der Technik, Tekom 2016
3D - Spiel mit der Technik, Tekom 20163D - Spiel mit der Technik, Tekom 2016
3D - Spiel mit der Technik, Tekom 2016
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
 
design
designdesign
design
 
Web Design Trends 2011
Web Design Trends 2011Web Design Trends 2011
Web Design Trends 2011
 
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & WordpressWP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
 
Vortrag HTML5, CSS3, PhoneGap
Vortrag  HTML5, CSS3, PhoneGapVortrag  HTML5, CSS3, PhoneGap
Vortrag HTML5, CSS3, PhoneGap
 
SEO Produktspezifikation für RWD
SEO Produktspezifikation für RWDSEO Produktspezifikation für RWD
SEO Produktspezifikation für RWD
 
Praktikum in Frontendentwicklung - Session1
Praktikum in Frontendentwicklung - Session1Praktikum in Frontendentwicklung - Session1
Praktikum in Frontendentwicklung - Session1
 
Responsive design
Responsive designResponsive design
Responsive design
 
Die neuen Bewertungskriterien von Google ab 05 / 2021
Die neuen Bewertungskriterien von Google ab 05 / 2021Die neuen Bewertungskriterien von Google ab 05 / 2021
Die neuen Bewertungskriterien von Google ab 05 / 2021
 
Entwicklercamp responive web design
Entwicklercamp   responive web designEntwicklercamp   responive web design
Entwicklercamp responive web design
 
My application as webdesigner and front-end developer
My application as webdesigner and front-end developerMy application as webdesigner and front-end developer
My application as webdesigner and front-end developer
 

Mehr von Jens Grochtdreis

Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von Webseiten
Jens Grochtdreis
 
Rapid Prototyping mit YAML4
Rapid Prototyping mit YAML4Rapid Prototyping mit YAML4
Rapid Prototyping mit YAML4
Jens Grochtdreis
 
A Period of Transition
A Period of TransitionA Period of Transition
A Period of Transition
Jens 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 2011
Jens Grochtdreis
 
Real solutions, no tricks
Real solutions, no tricksReal solutions, no tricks
Real solutions, no tricks
Jens Grochtdreis
 
Einführung in YAML4
Einführung in YAML4Einführung in YAML4
Einführung in YAML4
Jens Grochtdreis
 
Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und Wespen
Jens 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 aufbauen
Jens Grochtdreis
 
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
Jens 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
 
Gute Seiten, Schlechte Seiten - Webmontag Edition
Gute Seiten, Schlechte Seiten -  Webmontag EditionGute Seiten, Schlechte Seiten -  Webmontag Edition
Gute Seiten, Schlechte Seiten - Webmontag Edition
Jens Grochtdreis
 
Gute Seiten, schlechte Seiten
Gute Seiten, schlechte SeitenGute Seiten, schlechte Seiten
Gute Seiten, schlechte Seiten
Jens Grochtdreis
 
Die Zukunft Des Web (Sep 2008)
Die Zukunft Des Web (Sep 2008)Die Zukunft Des Web (Sep 2008)
Die Zukunft Des Web (Sep 2008)
Jens Grochtdreis
 
Webseiten sind keine Gemaelde
Webseiten sind keine GemaeldeWebseiten sind keine Gemaelde
Webseiten sind keine Gemaelde
Jens Grochtdreis
 
Die Zukunft des Web
Die Zukunft des WebDie Zukunft des Web
Die Zukunft des Web
Jens Grochtdreis
 

Mehr von Jens Grochtdreis (18)

Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von Webseiten
 
Rapid Prototyping mit YAML4
Rapid Prototyping mit YAML4Rapid Prototyping mit YAML4
Rapid Prototyping mit YAML4
 
A Period of Transition
A Period of TransitionA Period of Transition
A Period of Transition
 
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
 
Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und Wespen
 
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
 
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
 
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)
 
Gute Seiten, Schlechte Seiten - Webmontag Edition
Gute Seiten, Schlechte Seiten -  Webmontag EditionGute Seiten, Schlechte Seiten -  Webmontag Edition
Gute Seiten, Schlechte Seiten - Webmontag Edition
 
Gute Seiten, schlechte Seiten
Gute Seiten, schlechte SeitenGute Seiten, schlechte Seiten
Gute Seiten, schlechte Seiten
 
Die Zukunft Des Web (Sep 2008)
Die Zukunft Des Web (Sep 2008)Die Zukunft Des Web (Sep 2008)
Die Zukunft Des Web (Sep 2008)
 
Lightningtalk Erlangen
Lightningtalk ErlangenLightningtalk Erlangen
Lightningtalk Erlangen
 
Webseiten sind keine Gemaelde
Webseiten sind keine GemaeldeWebseiten sind keine Gemaelde
Webseiten sind keine Gemaelde
 
Die Zukunft des Web
Die Zukunft des WebDie Zukunft des Web
Die Zukunft des Web
 

Aspekte Moderner Frontendentwicklung

  • 1. Aspekte moderner Frontendentwicklung Jens Grochtdreis Webkrauts Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  • 2. Jens Grochtdreis _ Frontend Entwickler _ Gründer der Webkrauts _ Blogger _ Autor des PHPMagazins, Webstandards-Magazins, T3N _ Fachliche Buchbetreuung bei Galileo, O'Reilly, MuT Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  • 3. Das sollten wir nicht vergessen! _ Das Internet ist ein neues Medium! _ junges Medium _ rasante Entwicklung _ spannend _ atemberaubend _ umwälzend _ in ständigem Wandel begriffen Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  • 4. Das Internet ist komplex _ Wir nutzen sehr viele verschiedene Standards und Technologien, um eine Website zu betreiben. _ (X)HTML, CSS, Javascript, DOM 1-3 _ Flash, Flex, SWF _ PHP, ASP, Perl, Java _ MySQL, PostgreSQL _ XML, XSLT 4 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  • 5. Kontrollverlust - formal _ Wie können wir heute ins Internet gehen? _ PC, Notebook _ viele Betriebssysteme, Browser, Monitore _ Handy, PDA _ Spielkonsole _ TV 5 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  • 6. 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! 6 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  • 7. Flexibilität ist wichtig Screenshot von einem EeePC, 800x480px 7 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  • 8. Semantik _ Webseiten sind Dokumente. _ Genau wie diese haben sie eine Struktur und die einzelnen Elemente eine Bedeutung. _ Diese Bedeutung wird durch die Elemente in HTML widergespiegelt. _ Wir schreiben diese Elemente dann mittels Tags in eine Seite. 8 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  • 9. Semantik _ Webseiten sind heute mehr als nur Dokumente. _ Die Dokumentenanalogie ist alt _ Es sollten wissenschaftliche Texte erfaßt werden _ HTML5 ist der Versuch, der Realität gerecht zu werden _ Es gibt immer mehr Applikationen _ Viele notwendige Seitenelemente gibt es nicht in HTML, diese müssen wir per CSS und Javascript simulieren 9 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  • 10. Semantik _ Erst über eine Webseite nachdenken, dann die Struktur erfassen und aufschreiben. _ Eine Überschrift wird mit beispielsweise <h2>Überschrift</h2> ausgezeichnet, nicht mit <div class="headline">Überschrift</div> 10 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  • 11. Semantik _ "Semantik" hört sich hochtrabender an, als es ist. _ Eine semantisch ausgezeichnete Seite bedeutet nur, daß man sich Gedanken über seine Arbeit gemacht hat. _ Erst bestimmen, was es ist, dann das Aussehen bestimmen. 11 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  • 12. Eingebaute und individuelle Stylesheets _ Auch Browser nutzen Stylesheets, um HTML anzuzeigen. Diese Standardeinstellungen unterscheiden sich leider zwischen den Browsern. _ Auch ein Nutzer kann ein eigenes Stylesheet dem Browser zur Interpretation der Seite mitgeben. _ Letztendliche Sicherheit über die Darstellung einer Seite gibt es nicht. 12 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  • 13. Eine ungestylte Seite in zwei Browsern 13 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  • 14. Basis-Stylesheet _ Die Kurzform hat ihre Nachteile, insbesondere bei der Formatierung von Formularelementen. _ Deshalb rät Eric Meyer zu einem komplexeren Basis- Stylesheet. _ Zur Not geht aber auch die Kurzform. 14 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  • 15. Basis-Stylesheet von Eric Meyer http://meyerweb.com/eric/tools/css/reset/ 15 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  • 16. Überschriften _ Google weist <h1> wenig Bedeutung zu, da dort meist ein Logo und der Firmenname drin sind. _ Wenn die Überschrift die gleiche Schriftgröße wie der Absatz hat, kann man trotzdem nicht auf die Überschrift verzichten _ Trennung von Sinn und Optik! h1 { font-size: 12px;} p { font-size: 12px;} 16 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  • 17. Überschriften _ Überschriften sind eine Navigationsmöglichkeit für Screenreader. _ Wikis generieren aus den Textüberschriften eine seiteninterne Navigation, ein Inhaltsverzeichnis. _ Dafür gibt es auch ein jQuery-Plugin: jqPlanize [http://snipurl.com/2v4wm] Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  • 18. Überschriftenreihenfolge _ Im Quellcode sollten die Überschriftenhierarchien logisch aufeinander folgen. _ Nicht <h4> auf <h2> folgen lassen. _ Es gibt keine Meta-Überschriften, wie in den traditionellen Printmedien. _ Semantik der Überschriften ist unterentwickelt und sehr strikt. _ Man erkennt die Herkunft von HTML aus der Wissenschaft. Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  • 19. Block- und Inlineelemente _ Blockelemente erzeugen einen Absatz nach sich. _ Nicht alle Elemente können ineinander geschachtelt werden. _ Bei Inlineelementen gibt es keine vertikalen Margins. _ Niemals Block- in Inlineelemente verschachteln! 19 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  • 20. Absolut verboten! _ Keine klickbaren Boxen: <a href=“#”><div class=“teaser”> .... </div></a> _ Kein span und div als Allzweckwaffe: <span><p>....</p></span> span { display: block;} 20 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  • 21. Gleiche Höhe von Boxen _ Nebeneinander stehende Boxen wissen nichts voneinander. _ Der Vorteil von Tabellen sind die mitwachsenden Zellen in einer Zeile. _ Unter bestimmten Umständen kann man die Optik simulieren. _ Faux Columns [http://snipurl.com/2v58l] _ Mit Javascript nachhelfen _ bspw. mit jQuery [http://snipurl.com/2v5ag] Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  • 22. Floating _ Wird ein Element gefloatet, so wird es aus dem Dokumentenfluss herausgezogen. _ Alle nachfolgenden Elemente rutschen nach. _ Floats werden gerne zum Aufbau eines Layouts genutzt, vor allem weil sie sehr flexibel gehandhabt werden können. _ Insbesondere der IE hat heftige Bugs im Zusammenhang mit Floats. 22 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  • 23. Floating _ Das Clearing von Floats ist ein Problem, wenn man nicht leere Elemente in den Code schreiben kann oder will. _ Floats: Eine Einführung [http://snipurl.com/2ul2s] _ Einschließen von Floats ohne zusätzliches Markup [http://snipurl.com/2ul35] 23 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  • 24. Doubled-Margin-Bug _ Der IE 6 verdoppelt eine Margin in Float-Richtung. _ #bsp { float: left; margin-left: 10px;} _ Der IE 6 macht daraus 20px! _ Behebung ist einfach und unlogisch, ohne Nebenwirkungen _ #bsp { float: left; display: inline; margin-left: 10px; } _ Ein Float ist so lange ein Blockelement, bis es nicht mehr floatet. Daran ändert auch die Display-Eigenschaft nichts. _ Aber der Trick wirkt und hat keine Nachteile. _ Am besten immer „im Duett“ schreiben. 24 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  • 25. Clearing _ Ein Float wird aus dem normalen Dokumentenfluss herausgehoben. _ Deshalb bekommt er es nicht mit, wenn das Elternelement aufhört und ein neues beginnt. _ Ist der Inhalt des Elternelementes kleiner, als das floatende Kindelement, dann lappt dieses über. _ Um dies zu umgehen, müssen Floats gecleart werden. Die CSS-Eigenschaft heißt clearing. _ Der IE cleart automatisch, alle anderen nicht. 25 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  • 26. Clearing _ Traditionell und sicher: Vor dem schließenden Tag des Elternelementes ein DIV oder einen Absatz einfügen. <div class=„klaerchen“></div> .klaerchen { clear: both; height: 0; font-size: 0;} _ Modern: „clearfix“ über eine Klasse 26 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  • 27. Clearfix .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* Hides from IE-mac */ * html .clearfix {height: 1%;} /* End hide from IE-mac */ Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  • 28. Runde Ecken – CSS3 /* ====== runde Ecken ==== */ .rc { border: 2px solid #ff8001; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; color: #000; background-color: #fff; padding: 1em; } 28 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  • 29. Runde Ecken mit Schatten – CSS3 .rbs { border: 1px solid #aaaaaa; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; box-shadow: 5px 5px 15px #ccc; -moz-box-shadow: 5px 5px 15px #ccc; -webkit-box-shadow: 5px 5px 15px #ccc; } 29 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  • 30. Testen mit dem IE-Tester http://www.my-debugbar.com/wiki/IETester/HomePage 30 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  • 31. Am Ende Jens Grochtdreis http://blog.grochtdreis.de http://webkrauts.de Diese Präsentation steht unter der Creative Commons Lizenz „Attribution-ShareAlike 2.0“ http://creativecommons.org/licenses/by-sa/2.0/de/ 31 Jens Grochtdreis – Aspekte moderner Frontendentwicklung