12-mal heruntergeladen
Hochgeladen vonJens Grochtdreis
Modularisierung von Webseiten
Das Dokument behandelt die modulare Entwicklung von Webseiten und die Trennung von Layout und Design, wobei verschiedene Ansätze wie BEM und die Verwendung von CSS-Präprozessoren wie Sass erläutert werden. Es wird betont, dass Module eigenständige Einheiten sind und dass Semantik bei HTML und CSS wichtig ist, um Pflegeleichtigkeit zu gewährleisten. Für modernes Webdesign wird empfohlen, umfangreiche Modullisten und modulare Ansätze zu verwenden, um die Flexibilität und Wartbarkeit von Websites zu erhöhen.
Weitere ähnliche Inhalte
Ähnlich wie Modularisierung von Webseiten
Modularisierung von Webseiten
- 1. Webseiten modular entwickeln Jens Grochtdreis
- 2. ‣ Frontendentwickler ‣ seit1999 Arbeit im und fürs Web ‣ seit 2009 selbständig ‣ Frontendentwicklung ‣ Schulung ‣ Beratung ‣ twitter.com/Flocke
- 3. Seite ist eineAnsammlung von Modulen
- 6. ‣ Jede Boxhat eine obere Linie. ‣ Die Inhalte differieren, sind aber prinzipiell Listen. ‣ Eine Box kann eine Überschrift enthalten.
- 7.
- 9.
- 10.
- 11.
- 12.
- 13.
- 19. Jedes dieser Module isteine eigene Datei
- 23.
- 24. Das Modul istsein eigenes Universum!
- 25.
- 26. Semantisch = HTML Design = CSS
- 27.
- 28. Schnipsel im CSSdank Präprozessoren
- 29. CSS ist manchmal nervtötendunflexibel.
- 30. Einfacher wird es,wenn man CSS „programmiert“!
- 32. zentrales Stylesheet importiert Moduleund generiert ein CSS-File
- 35.
- 38. 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.
- 39. Richtiger Umgang mit Klassen
- 41.
- 42.
- 43.
- 44.
- 45.
- 46. Die einzelnen Bestandteile 1. Base 2. Layout 3. Module 4. State (Zustand) 5. Theme
- 47.
- 48.
- 49.
- 50. Klassen sind manchmal sinnvoller, als Kontextselektoren
- 52.
- 53.
- 54. CSS = Optik Semantik= HTML
- 55. Farben über Klassen zuweisen
- 56.
- 57.
- 58.
- 59. ‣ 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.
- 60. ‣ Weitere Trennungsinnvoll: ‣ Klassen nur für Layout ‣ Klassen nur für Design ‣ Grundaufbau ‣ Theme ‣ Zustand ‣ Klassen nur für Zugriff mittels JavaScript
- 61.
- 62.
- 63.
- 64.
- 65.
- 66. Vorsicht bei horizontaler Navigation http://grochtdreis.de/weblog/2009/10/18/schoener-navigationstitel/
- 67. Dummybilder http://dummyimage.com/ http://lorempixel.com/
- 68.
- 69.