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