Aspekte Moderner Frontendentwicklung

3,565
-1

Published on

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.

Published in: Technology, Business
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,565
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
29
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Aspekte Moderner Frontendentwicklung

  1. 1. Aspekte moderner Frontendentwicklung Jens Grochtdreis Webkrauts Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  2. 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. 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. 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. 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. 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. 7. Flexibilität ist wichtig Screenshot von einem EeePC, 800x480px 7 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  8. 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. 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. 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. 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. 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. 13. Eine ungestylte Seite in zwei Browsern 13 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  14. 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. 15. Basis-Stylesheet von Eric Meyer http://meyerweb.com/eric/tools/css/reset/ 15 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  16. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 30. Testen mit dem IE-Tester http://www.my-debugbar.com/wiki/IETester/HomePage 30 Jens Grochtdreis – Aspekte moderner Frontendentwicklung
  31. 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

×