31
Jens Grochtdreis – Aspekte moderner Frontendentwicklung Jens Grochtdreis Webkrauts Aspekte moderner Frontendentwicklung

Aspekte Moderner Frontendentwicklung

Embed Size (px)

DESCRIPTION

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.

Citation preview

Page 1: Aspekte Moderner Frontendentwicklung

Jens Grochtdreis – Aspekte moderner Frontendentwicklung

Jens GrochtdreisWebkrauts

Aspekte moderner Frontendentwicklung

Page 2: Aspekte Moderner Frontendentwicklung

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

Page 3: Aspekte Moderner Frontendentwicklung

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

Page 4: Aspekte Moderner Frontendentwicklung

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

Page 5: Aspekte Moderner Frontendentwicklung

5Jens Grochtdreis – Aspekte moderner Frontendentwicklung

Kontrollverlust - formal

_ Wie können wir heute ins Internet gehen?

_ PC, Notebook

_ viele Betriebssysteme, Browser, Monitore

_ Handy, PDA

_ Spielkonsole

_ TV

Page 6: Aspekte Moderner Frontendentwicklung

6Jens 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!

Page 7: Aspekte Moderner Frontendentwicklung

7Jens Grochtdreis – Aspekte moderner Frontendentwicklung

Flexibilität ist wichtig

Screenshot von einem EeePC, 800x480px

Page 8: Aspekte Moderner Frontendentwicklung

8Jens 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.

Page 9: Aspekte Moderner Frontendentwicklung

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

Page 10: Aspekte Moderner Frontendentwicklung

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

Page 11: Aspekte Moderner Frontendentwicklung

11Jens 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.

Page 12: Aspekte Moderner Frontendentwicklung

12Jens 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.

Page 13: Aspekte Moderner Frontendentwicklung

13Jens Grochtdreis – Aspekte moderner Frontendentwicklung

Eine ungestylte Seite in zwei Browsern

Page 14: Aspekte Moderner Frontendentwicklung

14Jens 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.

Page 15: Aspekte Moderner Frontendentwicklung

15Jens Grochtdreis – Aspekte moderner Frontendentwicklung

Basis-Stylesheet von Eric Meyer

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

Page 16: Aspekte Moderner Frontendentwicklung

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

Page 17: Aspekte Moderner Frontendentwicklung

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]

Page 18: Aspekte Moderner Frontendentwicklung

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.

Page 19: Aspekte Moderner Frontendentwicklung

19Jens 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!

Page 20: Aspekte Moderner Frontendentwicklung

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

Page 21: Aspekte Moderner Frontendentwicklung

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]

Page 22: Aspekte Moderner Frontendentwicklung

22Jens 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.

Page 23: Aspekte Moderner Frontendentwicklung

23Jens 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]

Page 24: Aspekte Moderner Frontendentwicklung

24Jens 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.

Page 25: Aspekte Moderner Frontendentwicklung

25Jens 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.

Page 26: Aspekte Moderner Frontendentwicklung

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

Page 27: Aspekte Moderner Frontendentwicklung

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

Page 28: Aspekte Moderner Frontendentwicklung

28Jens 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;

}

Page 29: Aspekte Moderner Frontendentwicklung

29Jens 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;

}

Page 30: Aspekte Moderner Frontendentwicklung

30Jens Grochtdreis – Aspekte moderner Frontendentwicklung

Testen mit dem IE-Tester

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

Page 31: Aspekte Moderner Frontendentwicklung

31Jens 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/