Aspekte Moderner Frontendentwicklung

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    5 Favorites

    Aspekte Moderner Frontendentwicklung - Presentation Transcript

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

    + Jens GrochtdreisJens Grochtdreis Nominate

    custom

    1005 views, 5 favs, 7 embeds more stats

    Vortrag auf dem Barcamp Stuttgart 2. Ich spreche ei more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 1005
      • 348 on SlideShare
      • 657 from embeds
    • Comments 0
    • Favorites 5
    • Downloads 18
    Most viewed embeds
    • 477 views on http://technikwuerze.de
    • 174 views on http://grochtdreis.de
    • 2 views on http://blog.grochtdreis.de
    • 1 views on http://static.slidesharecdn.com
    • 1 views on http://127.0.0.1:8795

    more

    All embeds
    • 477 views on http://technikwuerze.de
    • 174 views on http://grochtdreis.de
    • 2 views on http://blog.grochtdreis.de
    • 1 views on http://static.slidesharecdn.com
    • 1 views on http://127.0.0.1:8795
    • 1 views on http://209.85.129.132
    • 1 views on file://

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories