Aspekte moderner
             Frontendentwicklung
                   Jens Grochtdreis
                      Webkrauts




...
Jens Grochtdreis

  _ Frontend Entwickler
  _ Gründer der Webkrauts
  _ Blogger
  _ Autor des PHPMagazins, Webstandards-Ma...
Das sollten wir nicht vergessen!

  _ Das Internet ist ein neues Medium!
     _ junges Medium
     _ rasante Entwicklung
 ...
Das Internet ist komplex

  _ Wir nutzen sehr viele verschiedene Standards und
    Technologien, um eine Website zu betrei...
Kontrollverlust - formal

  _ Wie können wir heute ins Internet gehen?
     _ PC, Notebook
     _ viele Betriebssysteme, B...
Flexibilität ist wichtig

  _ Wir können nicht mehr sicher vorhersagen, wie jemand
    unsere Seite sieht/liest.
  _ Desha...
Flexibilität ist wichtig




 Screenshot von einem EeePC, 800x480px
                                                      ...
Semantik

  _ Webseiten sind Dokumente.
     _ Genau wie diese haben sie eine Struktur und die
       einzelnen Elemente e...
Semantik

  _ Webseiten sind heute mehr als nur Dokumente.
     _ Die Dokumentenanalogie ist alt
     _ Es sollten wissens...
Semantik

  _ Erst über eine Webseite nachdenken, dann die
    Struktur erfassen und aufschreiben.
     _ Eine Überschrift...
Semantik

  _ "Semantik" hört sich hochtrabender an, als es ist.
     _ Eine semantisch ausgezeichnete Seite bedeutet nur,...
Eingebaute und individuelle
Stylesheets
  _ Auch Browser nutzen Stylesheets, um HTML
    anzuzeigen. Diese Standardeinstel...
Eine ungestylte Seite in zwei
Browsern




                                                      13
Jens Grochtdreis – Asp...
Basis-Stylesheet

  _ Die Kurzform hat ihre Nachteile, insbesondere bei der
    Formatierung von Formularelementen.
  _ De...
Basis-Stylesheet von Eric Meyer




  http://meyerweb.com/eric/tools/css/reset/
                                          ...
Überschriften

  _ Google weist <h1> wenig Bedeutung zu, da dort meist
    ein Logo und der Firmenname drin sind.
  _ Wenn...
Überschriften

  _ Überschriften sind eine Navigationsmöglichkeit für
    Screenreader.
  _ Wikis generieren aus den Textü...
Überschriftenreihenfolge

  _ Im Quellcode sollten die Überschriftenhierarchien
    logisch aufeinander folgen.
     _ Nic...
Block- und Inlineelemente

  _ Blockelemente erzeugen einen Absatz nach sich.
  _ Nicht alle Elemente können ineinander ge...
Absolut verboten!

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


  _ Kein span und d...
Gleiche Höhe von Boxen

  _ Nebeneinander stehende Boxen wissen nichts
    voneinander.
  _ Der Vorteil von Tabellen sind ...
Floating

  _ Wird ein Element gefloatet, so wird es aus dem
    Dokumentenfluss herausgezogen.
  _ Alle nachfolgenden Ele...
Floating

  _ Das Clearing von Floats ist ein Problem, wenn man
    nicht leere Elemente in den Code schreiben kann oder
 ...
Doubled-Margin-Bug

  _ Der IE 6 verdoppelt eine Margin in Float-Richtung.
     _ #bsp { float: left; margin-left: 10px;}
...
Clearing

  _ Ein Float wird aus dem normalen Dokumentenfluss
    herausgehoben.
  _ Deshalb bekommt er es nicht mit, wenn...
Clearing

  _ Traditionell und sicher: Vor dem schließenden Tag des
    Elternelementes ein DIV oder einen Absatz einfügen...
Clearfix

  .clearfix:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: h...
Runde Ecken – CSS3




   /* ====== runde Ecken ==== */
        .rc {
               border: 2px solid #ff8001;
          ...
Runde Ecken mit Schatten – CSS3




           .rbs {
                border: 1px solid #aaaaaa;
                border-ra...
Testen mit dem IE-Tester




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



                                      ...
Am Ende

                                  Jens Grochtdreis
                                  http://blog.grochtdreis.de
 ...
Nächste SlideShare
Wird geladen in …5
×

Aspekte Moderner Frontendentwicklung

3.703 Aufrufe

Veröffentlicht am

Vortrag auf dem Barcamp Stuttgart 2. Ich spreche ein paar Themen an, die für Frontendentwickler in der täglichen Arbeit wichtig sind, also Basics.

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
3.703
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
1.084
Aktionen
Geteilt
0
Downloads
29
Kommentare
0
Gefällt mir
7
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Aspekte Moderner Frontendentwicklung

  1. 1. Aspekte moderner Frontendentwicklung Jens Grochtdreis Webkrauts Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  2. 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. 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. 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. 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. 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. 7. Flexibilität ist wichtig Screenshot von einem EeePC, 800x480px 7 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  8. 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. 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. 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. 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. 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. 13. Eine ungestylte Seite in zwei Browsern 13 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  14. 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. 15. Basis-Stylesheet von Eric Meyer http://meyerweb.com/eric/tools/css/reset/ 15 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  16. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 30. Testen mit dem IE-Tester http://www.my-debugbar.com/wiki/IETester/HomePage 30 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  31. 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

×