View
809
Download
0
Category
Preview:
DESCRIPTION
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.
Citation preview
Modularisierung von Webseiten
Jens Grochtdreis
‣Frontendentwickler
‣seit 1999 Arbeit im und fürs Web
‣seit 2009 selbständig
‣Frontendentwicklung
‣Schulung
‣Beratung
‣twitter.com/Flocke
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 tragen Designinformationen
Umfangreiche Modulliste
Jedes dieser Module ist eine eigene Datei
Inhalte differieren zwischen Layout und Realität
‣ 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/
http://www.blindtextgenerator.de/
Dummybilder
http://dummyimage.com/ http://lorempixel.com/
Module richtig entwickeln
Das Modul ist sein eigenes Universum!
Trennung zwischen Layout und Design
Semantisch = HTML Design = CSS
http://jsfiddle.net/Flocke/psAwV/
Richtiger Umgang mit Klassen
https://github.com/stubbornella/oocss/wiki
http://bem.github.com/bem-method/pages/beginning/beginning.en.html
Semantische Klassen?
Nein! Pflegbare!
CSS = OptikSemantik = HTML
Nach Farben benannte Klassen sind 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 WYSIWYG-Editoren die Vergabe von Klassen an Listen und Absätze aufbürden?
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 Seitenbereiche auszeichne und diese auch im CSS lesbar/erkennbar haben will:
‣ #header
‣ #footer
‣ #wrapper
‣ Manche CMSe vergeben von sich aus IDs.
Allgemeine und spezielle Klassen
Schnipsel im CSS dank Präprozessoren
CSS ist manchmal nervtötend unflexibel.
zentrales Stylesheet importiert 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 nur sehr bedingt geeignet.
‣ Der Browser sollte das Designwerkzeug sein!
‣ Es heißt http:// nicht psd://
http://www.flickr.com/photos/artrock2006/4177475479/
UI-Sammlungen
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
Jens Grochtdreishttp://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/
Recommended