Modularisierung von Webseiten
•
3 gefällt mir•1,732 views
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.
Melden
Teilen
Modularisierung von Webseiten
- 2. ‣ Frontendentwickler ‣ seit 1999 Arbeit im und fürs Web ‣ seit 2009 selbständig ‣ Frontendentwicklung ‣ Schulung ‣ Beratung ‣ twitter.com/Flocke
- 3. Seite ist eine Ansammlung von Modulen
- 5. Platzierung sollte egal sein
- 6. Module entwickeln, nicht ganze Seiten!
- 7. Layout entseht separat - mit eingefügten Modulen
- 17. Jedes dieser Module ist eine eigene Datei
- 21. Inhalte differieren zwischen Layout und Realität
- 23. ‣ 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/
- 26. Dummybilder http://dummyimage.com/ http://lorempixel.com/
- 29. Das Modul ist sein eigenes Universum!
- 30. Trennung zwischen Layout und Design
- 31. Semantisch = HTML Design = CSS
- 33. Richtiger Umgang mit Klassen
- 38. Nein! Pflegbare!
- 39. CSS = Optik Semantik = HTML
- 40. Nach Farben benannte Klassen sind dann okay, wenn klar ist, dass diese Farben Konstanten sind.
- 41. Grundsätzlich sollten Klassennamen nicht zu nahe am Objekt sein. Abstraktion ist wichtig. Und Pflegbarkeit.
- 42. Alles hat seine Vor- und Nachteile
- 44. ‣ 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?
- 45. IDs sind böse? Nein, aber sie sind meist unnötig!
- 46. ‣ 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.
- 49. Schnipsel im CSS dank Präprozessoren
- 50. CSS ist manchmal nervtötend unflexibel.
- 52. zentrales Stylesheet importiert Module und generiert ein CSS-File
- 55. Variablen
- 58. ‣ 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://
- 60. UI-Sammlungen
- 66. http://chriscoyier.github.com/SurveyMonkey-Design-Patterns/ https://github.com/chriscoyier/SurveyMonkey-Design-Patterns
- 69. Jens Grochtdreis http://grochtdreis.de/ http://twitter.com/Flocke http://webkrauts.de http://grochtdreis.de/+ Diese Präsentation steht unter der Creative Commons Lizenz „Attribution-ShareAlike 2.0“ http://creativecommons.org/licenses/by-sa/2.0/de/