Modularisierung von Webseiten

855
-1

Published on

Webseiten sind keine Gesamtkunstwerke, sondern Zusammenstellungen einzelner Module. Dieser Vortrag von der Jax 2013 ergründet, wie man vorgeht, um sinnvolle und pflegbare M;odule zu erschaffen. Dabei wird vor allem Wert auf das CSS gelegt. Das CSS wird dank Sass ebenso modular, wie das HTML.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
855
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Modularisierung von Webseiten

  1. 1. Webseiten modular entwickeln Jens Grochtdreis
  2. 2. ‣ Frontendentwickler‣ seit 1999 Arbeit im und fürs Web‣ seit 2009 selbständig ‣ Frontendentwicklung ‣ Schulung ‣ Beratung‣ twitter.com/Flocke
  3. 3. Seite ist eine Ansammlung von Modulen
  4. 4. ‣ Jede Box hat eine obere Linie.‣ Die Inhalte differieren, sind aber prinzipiell Listen.‣ Eine Box kann eine Überschrift enthalten.
  5. 5. Platzierung sollte egal sein
  6. 6. Module entwickeln,nicht ganze Seiten!
  7. 7. Layout: Seitengrundgerüst
  8. 8. Module tragenDesigninformationen
  9. 9. Umfangreiche Modulliste
  10. 10. http://structurae.de
  11. 11. Jedes dieser Moduleist eine eigene Datei
  12. 12. Module richtig entwickeln
  13. 13. Das Modul ist sein eigenes Universum!
  14. 14. Trennung zwischenLayout und Design
  15. 15. Semantisch = HTML Design = CSS
  16. 16. http://jsfiddle.net/Flocke/psAwV/
  17. 17. Schnipsel im CSS dank Präprozessoren
  18. 18. CSS ist manchmalnervtötend unflexibel.
  19. 19. Einfacher wird es, wenn man CSS „programmiert“!
  20. 20. zentrales Stylesheetimportiert Module und generiert ein CSS-File
  21. 21. Variablen
  22. 22. Module in Sass‣ Ein Unterstrich vor der Dateiendung verhindert das rendern als einzelne Datei. Es entsteht ein „partial“. So kann man diese in eine zentrale Datei importieren und nachher gesammelt rendern lassen.
  23. 23. Richtiger Umgang mit Klassen
  24. 24. https://github.com/stubbornella/oocss/wiki
  25. 25. Styling über Klassen
  26. 26. Das media-Elementhttp://jsbin.com/ipupew/2/
  27. 27. http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
  28. 28. https://smacss.com/
  29. 29. Die einzelnen Bestandteile 1. Base 2. Layout 3. Module 4. State (Zustand) 5. Theme
  30. 30. BEMhttp://bem.info/method/
  31. 31. Block, Element, Modifier
  32. 32. Namenskonventionen
  33. 33. Klassen sind manchmal sinnvoller, als Kontextselektoren
  34. 34. Semantische Klassen?
  35. 35. Nein! Pflegbare!
  36. 36. CSS = OptikSemantik = HTML
  37. 37. Farben über Klassen zuweisen
  38. 38. CSS
  39. 39. SCSS
  40. 40. Variablen in Sass
  41. 41. ‣ IDs wenn überhaupt dann nur für grundlegende Elemente des Layouts nutzen. ‣ #header, #main, #sidebar, #footer‣ Und natürlich für Formularelemente!‣ Optik von Modulen über separate Klassen modifizieren.
  42. 42. ‣ Weitere Trennung sinnvoll: ‣ Klassen nur für Layout ‣ Klassen nur für Design ‣ Grundaufbau ‣ Theme ‣ Zustand ‣ Klassen nur für Zugriff mittels JavaScript
  43. 43. Realistische Dummy-Inhalte
  44. 44. http://www.mangrove.com/blog/1079/death-to-lorem-ipsum
  45. 45. Navigation
  46. 46. http://www.blindtextgenerator.de/
  47. 47. http://bueltge.de/html-ipsum/
  48. 48. Vorsicht bei horizontaler Navigationhttp://grochtdreis.de/weblog/2009/10/18/schoener-navigationstitel/
  49. 49. Dummybilderhttp://dummyimage.com/ http://lorempixel.com/
  50. 50. Dummybilderhttp://placekitten.com/
  51. 51. Jens Grochtdreishttp://grochtdreis.dehttp://twitter.com/Flockehttps://github.com/jensgrohttp://webkrauts.dehttp://slideshare.net/Flocke669https://speakerdeck.com/flocke
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×