Modularisierung von Webseiten
3 gefällt mir1,735 aufrufe
Jens Grochtdreis diskutiert die Modularisierung von Webseiten, bei der Module entwickelt werden, anstatt vollständige Seiten zu erstellen. Es wird betont, dass eine klare Trennung zwischen Layout (HTML) und Design (CSS) wichtig ist, und es werden verschiedene Tools und Techniken zur effizienten Entwicklung von Webseiten präsentiert. Außerdem wird die Bedeutung von semantischen und pflegbaren Klassen sowie die Rolle des Browsers als primäres Designwerkzeug hervorgehoben.
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/