aspekte moderner frontendentwicklung

Jens Grochtdreis – Aspekte moderner Frontendentwicklung

Jens GrochtdreisWebkrauts

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


Das sollten wir nicht vergessen!

_ Das Internet ist ein neues Medium!

_ junges Medium

_ rasante Entwicklung

_ spannend

_ atemberaubend

_ umwälzend

_ in ständigem Wandel begriffen

4Jens 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


Kontrollverlust - formal

_ Wie können wir heute ins Internet gehen?

_ PC, Notebook

_ viele Betriebssysteme, Browser, Monitore

_ Handy, PDA

_ Spielkonsole

_ TV


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!


Flexibilität ist wichtig

Screenshot von einem EeePC, 800x480px


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.


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


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>


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.


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.


Eine ungestylte Seite in zwei Browsern


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.


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 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;}


Ü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]


Ü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.


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!


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;}


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]


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.


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]


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.


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.


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


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 */


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;

}


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;

}


Testen mit dem IE-Tester

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


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/

http://blog.grochtdreis.de/

aspekte moderner frontendentwicklung

Technology