Aspekte Moderner Frontendentwicklung
-
Upload
jens-grochtdreis -
Category
Technology
-
view
3.444 -
download
3
description
Transcript of Aspekte Moderner Frontendentwicklung
Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Jens GrochtdreisWebkrauts
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
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
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
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
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!
7Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Flexibilität ist wichtig
Screenshot von einem EeePC, 800x480px
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.
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
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>
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.
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.
13Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Eine ungestylte Seite in zwei Browsern
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.
15Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Basis-Stylesheet von Eric Meyer
http://meyerweb.com/eric/tools/css/reset/
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;}
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.
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!
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;}
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]
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.
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]
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.
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.
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
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 */
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;
}
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;
}
30Jens Grochtdreis – Aspekte moderner Frontendentwicklung
Testen mit dem IE-Tester
http://www.my-debugbar.com/wiki/IETester/HomePage
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/