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.

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