Jens GrochtdreisModularisierung vonWebseiten
‣ Frontendentwickler‣ seit 1999 Arbeit im und fürs Web‣ seit 2009 selbständig   ‣ Frontendentwicklung   ‣ Schulung   ‣ Ber...
Seite ist eine Ansammlung       von Modulen
Platzierung sollte egal sein
Module entwickeln,nicht ganze Seiten!
Layout entseht separat -mit eingefügten Modulen
Layout: Seitengrundgerüst
Module tragenDesigninformationen
Umfangreiche Modulliste
http://structurae.de
Jedes dieser Moduleist eine eigene Datei
Inhalte differieren zwischen    Layout und Realität
‣ Bei deutschsprachigen Seiten auch deutschen                     Blindtext nutzen.                ‣ Möglichst früh mit re...
http://www.blindtextgenerator.de/
http://bueltge.de/html-ipsum/
Dummybilderhttp://dummyimage.com/                 http://lorempixel.com/
Dummybilderhttp://placekitten.com/
Module richtig entwickeln
Das Modul ist sein eigenes      Universum!
Trennung zwischenLayout und Design
Semantisch = HTML   Design = CSS
http://jsfiddle.net/Flocke/psAwV/
Richtiger Umgang   mit Klassen
https://github.com/stubbornella/oocss/wiki
https://smacss.com/
http://bem.github.com/bem-method/pages/beginning/beginning.en.html
Semantische Klassen?
Nein! Pflegbare!
CSS = OptikSemantik = HTML
Nach Farben benannte Klassensind dann okay, wenn klar ist, dass  diese Farben Konstanten sind.
Grundsätzlich sollten Klassennamen  nicht zu nahe am Objekt sein.     Abstraktion ist wichtig.         Und Pflegbarkeit.
Alles hat seine Vor- und       Nachteile
Sparsam Klassen vergeben
‣ Bei OOCSS und SMACSS vergibt man an möglichst alles Klassen. Das ist ungünstig.‣ Wollen/können wir Redakteuren in WYSIWY...
IDs sind böse?Nein, aber sie sind meist        unnötig!
‣ IDs benötigen wir, um Labels mit  Formularelementen zu kombinieren.‣ IDs sind dann sinnvoll, wenn ich einmalige  Seitenb...
Allgemeine undspezielle Klassen
Schnipsel im CSS dank   Präprozessoren
CSS ist manchmalnervtötend unflexibel.
zentrales Stylesheetimportiert Module und generiert ein CSS-File
Variablen
Positiver Nebeneffekt
‣ Geschwindigkeit in der Entwicklung‣ Rapid Prototyping mit dem Designer  zusammen möglich‣ Photoshop ist für Webdesign nu...
http://www.flickr.com/photos/artrock2006/4177475479/
UI-Sammlungen
http://foundation.zurb.com/
http://twitter.github.com/bootstrap/
http://foundation.zurb.com/grid.php
http://twitter.github.com/bootstrap/components.html
http://foundation.zurb.com/docs/navigation.php
http://chriscoyier.github.com/SurveyMonkey-Design-Patterns/   https://github.com/chriscoyier/SurveyMonkey-Design-Patterns
http://bootsnipp.com/
Jens Grochtdreis                                                      http://grochtdreis.de/                              ...
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.409 Aufrufe

Veröffentlicht am

Vortrag auf der Webtech 2012. Eine Webseite besteht aus vielen einzelnen Modulen, die alle als eigenes Universum betrachtet werden können. CSS-Präprozessoren helfen bei der effektiven Behandlung der Module. Prototyping im Browser und ein neuer Workflow werden dadurch einfacher.

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.409
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4
Aktionen
Geteilt
0
Downloads
7
Kommentare
0
Gefällt mir
3
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Modularisierung von Webseiten

  1. 1. Jens GrochtdreisModularisierung vonWebseiten
  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. Platzierung sollte egal sein
  5. 5. Module entwickeln,nicht ganze Seiten!
  6. 6. Layout entseht separat -mit eingefügten Modulen
  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. Inhalte differieren zwischen Layout und Realität
  13. 13. ‣ Bei deutschsprachigen Seiten auch deutschen Blindtext nutzen. ‣ Möglichst früh mit realen Inhalten arbeiten. ‣ Möglichst früh mit realen Navigationsnamen arbeiten - auch wenn diese sich noch ändert.http://grochtdreis.de/weblog/2009/10/18/schoener-navigationstitel/
  14. 14. http://www.blindtextgenerator.de/
  15. 15. http://bueltge.de/html-ipsum/
  16. 16. Dummybilderhttp://dummyimage.com/ http://lorempixel.com/
  17. 17. Dummybilderhttp://placekitten.com/
  18. 18. Module richtig entwickeln
  19. 19. Das Modul ist sein eigenes Universum!
  20. 20. Trennung zwischenLayout und Design
  21. 21. Semantisch = HTML Design = CSS
  22. 22. http://jsfiddle.net/Flocke/psAwV/
  23. 23. Richtiger Umgang mit Klassen
  24. 24. https://github.com/stubbornella/oocss/wiki
  25. 25. https://smacss.com/
  26. 26. http://bem.github.com/bem-method/pages/beginning/beginning.en.html
  27. 27. Semantische Klassen?
  28. 28. Nein! Pflegbare!
  29. 29. CSS = OptikSemantik = HTML
  30. 30. Nach Farben benannte Klassensind dann okay, wenn klar ist, dass diese Farben Konstanten sind.
  31. 31. Grundsätzlich sollten Klassennamen nicht zu nahe am Objekt sein. Abstraktion ist wichtig. Und Pflegbarkeit.
  32. 32. Alles hat seine Vor- und Nachteile
  33. 33. Sparsam Klassen vergeben
  34. 34. ‣ Bei OOCSS und SMACSS vergibt man an möglichst alles Klassen. Das ist ungünstig.‣ Wollen/können wir Redakteuren in WYSIWYG-Editoren die Vergabe von Klassen an Listen und Absätze aufbürden?
  35. 35. IDs sind böse?Nein, aber sie sind meist unnötig!
  36. 36. ‣ IDs benötigen wir, um Labels mit Formularelementen zu kombinieren.‣ IDs sind dann sinnvoll, wenn ich einmalige Seitenbereiche auszeichne und diese auch im CSS lesbar/erkennbar haben will: ‣ #header ‣ #footer ‣ #wrapper‣ Manche CMSe vergeben von sich aus IDs.
  37. 37. Allgemeine undspezielle Klassen
  38. 38. Schnipsel im CSS dank Präprozessoren
  39. 39. CSS ist manchmalnervtötend unflexibel.
  40. 40. zentrales Stylesheetimportiert Module und generiert ein CSS-File
  41. 41. Variablen
  42. 42. Positiver Nebeneffekt
  43. 43. ‣ Geschwindigkeit in der Entwicklung‣ Rapid Prototyping mit dem Designer zusammen möglich‣ Photoshop ist für Webdesign nur sehr bedingt geeignet.‣ Der Browser sollte das Designwerkzeug sein!‣ Es heißt http:// nicht psd://
  44. 44. http://www.flickr.com/photos/artrock2006/4177475479/
  45. 45. UI-Sammlungen
  46. 46. http://foundation.zurb.com/
  47. 47. http://twitter.github.com/bootstrap/
  48. 48. http://foundation.zurb.com/grid.php
  49. 49. http://twitter.github.com/bootstrap/components.html
  50. 50. http://foundation.zurb.com/docs/navigation.php
  51. 51. http://chriscoyier.github.com/SurveyMonkey-Design-Patterns/ https://github.com/chriscoyier/SurveyMonkey-Design-Patterns
  52. 52. http://bootsnipp.com/
  53. 53. Jens Grochtdreis http://grochtdreis.de/ http://twitter.com/Flocke http://webkrauts.de http://grochtdreis.de/+Diese Präsentation steht unterder Creative Commons Lizenz„Attribution-ShareAlike 2.0“http://creativecommons.org/licenses/by-sa/2.0/de/

×