Webseiten modular   entwickeln     Jens Grochtdreis
‣ Frontendentwickler‣ seit 1999 Arbeit im und fürs Web‣ seit 2009 selbständig   ‣ Frontendentwicklung   ‣ Schulung   ‣ Ber...
Seite ist eine Ansammlung       von Modulen
‣ Jede Box hat eine obere Linie.‣ Die Inhalte differieren, sind aber prinzipiell  Listen.‣ Eine Box kann eine Überschrift ...
Platzierung sollte egal sein
Module entwickeln,nicht ganze Seiten!
Layout: Seitengrundgerüst
Module tragenDesigninformationen
Umfangreiche Modulliste
http://structurae.de
Jedes dieser Moduleist eine eigene Datei
Module richtig entwickeln
Das Modul ist sein eigenes      Universum!
Trennung zwischenLayout und Design
Semantisch = HTML   Design = CSS
http://jsfiddle.net/Flocke/psAwV/
Schnipsel im CSS dank   Präprozessoren
CSS ist manchmalnervtötend unflexibel.
Einfacher wird es, wenn man    CSS „programmiert“!
zentrales Stylesheetimportiert Module und generiert ein CSS-File
Variablen
Module in Sass‣ Ein Unterstrich vor der  Dateiendung verhindert  das rendern als einzelne  Datei. Es entsteht ein  „partia...
Richtiger Umgang   mit Klassen
https://github.com/stubbornella/oocss/wiki
Styling über Klassen
Das media-Elementhttp://jsbin.com/ipupew/2/
http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
https://smacss.com/
Die einzelnen Bestandteile 1. Base 2. Layout 3. Module 4. State (Zustand) 5. Theme
BEMhttp://bem.info/method/
Block, Element, Modifier
Namenskonventionen
Klassen sind manchmal     sinnvoller, als  Kontextselektoren
Semantische Klassen?
Nein! Pflegbare!
CSS = OptikSemantik = HTML
Farben über Klassen     zuweisen
CSS
SCSS
Variablen in Sass
‣ IDs wenn überhaupt dann nur für  grundlegende Elemente des Layouts nutzen. ‣ #header, #main, #sidebar, #footer‣ Und natü...
‣ Weitere Trennung sinnvoll: ‣ Klassen nur für Layout ‣ Klassen nur für Design  ‣ Grundaufbau  ‣ Theme  ‣ Zustand ‣ Klasse...
Realistische Dummy-Inhalte
http://www.mangrove.com/blog/1079/death-to-lorem-ipsum
Navigation
http://www.blindtextgenerator.de/
http://bueltge.de/html-ipsum/
Vorsicht bei horizontaler                    Navigationhttp://grochtdreis.de/weblog/2009/10/18/schoener-navigationstitel/
Dummybilderhttp://dummyimage.com/                 http://lorempixel.com/
Dummybilderhttp://placekitten.com/
Jens Grochtdreishttp://grochtdreis.dehttp://twitter.com/Flockehttps://github.com/jensgrohttp://webkrauts.dehttp://slidesha...
Modularisierung von Webseiten
Modularisierung von Webseiten
Modularisierung von Webseiten
Modularisierung von Webseiten
Modularisierung von Webseiten
Modularisierung von Webseiten
Modularisierung von Webseiten
Modularisierung von Webseiten
Modularisierung von Webseiten
Modularisierung von Webseiten
Modularisierung von Webseiten
Modularisierung von Webseiten
Modularisierung von Webseiten
Modularisierung von Webseiten
Modularisierung von Webseiten
Modularisierung von Webseiten
Modularisierung von Webseiten
Modularisierung von Webseiten
Nächste SlideShare
Wird geladen in …5
×

Modularisierung von Webseiten

1.210 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.210
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
14
Aktionen
Geteilt
0
Downloads
9
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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

×