SlideShare ist ein Scribd-Unternehmen logo
1 von 69
Downloaden Sie, um offline zu lesen
Webseiten modular
   entwickeln
     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
‣ Jede Box hat eine obere Linie.
‣ Die Inhalte differieren, sind aber prinzipiell
  Listen.
‣ Eine Box kann eine Überschrift enthalten.
Platzierung sollte egal sein
Module entwickeln,
nicht ganze Seiten!
Layout: Seitengrundgerüst
Module tragen
Designinformationen
Umfangreiche Modulliste
http://structurae.de
Jedes dieser Module
ist eine eigene Datei
Module richtig entwickeln
Das Modul ist sein eigenes
      Universum!
Trennung zwischen
Layout und Design
Semantisch = HTML
   Design = CSS
http://jsfiddle.net/Flocke/psAwV/
Schnipsel im CSS dank
   Präprozessoren
CSS ist manchmal
nervtötend unflexibel.
Einfacher wird es, wenn man
    CSS „programmiert“!
zentrales Stylesheet
importiert Module und
 generiert ein CSS-File
Variablen
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.
Richtiger Umgang
   mit Klassen
https://github.com/stubbornella/oocss/wiki
Styling über Klassen
Das media-Element




http://jsbin.com/ipupew/2/
http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
https://smacss.com/
Die einzelnen Bestandteile
 1. Base
 2. Layout
 3. Module
 4. State (Zustand)
 5. Theme
BEM




http://bem.info/method/
Block, Element, Modifier
Namenskonventionen
Klassen sind manchmal
     sinnvoller, als
  Kontextselektoren
Semantische Klassen?
Nein! Pflegbare!
CSS = Optik
Semantik = HTML
Farben über Klassen
     zuweisen
CSS
SCSS
Variablen in Sass
‣ 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.
‣ Weitere Trennung sinnvoll:
 ‣ Klassen nur für Layout
 ‣ Klassen nur für Design
  ‣ Grundaufbau
  ‣ Theme
  ‣ Zustand
 ‣ Klassen nur für Zugriff mittels JavaScript
Realistische Dummy-Inhalte
http://www.mangrove.com/blog/1079/death-to-lorem-ipsum
Navigation
http://www.blindtextgenerator.de/
http://bueltge.de/html-ipsum/
Vorsicht bei horizontaler
                    Navigation




http://grochtdreis.de/weblog/2009/10/18/schoener-navigationstitel/
Dummybilder




http://dummyimage.com/                 http://lorempixel.com/
Dummybilder




http://placekitten.com/
Jens Grochtdreis

http://grochtdreis.de
http://twitter.com/Flocke
https://github.com/jensgro
http://webkrauts.de
http://slideshare.net/Flocke669
https://speakerdeck.com/flocke

Weitere ähnliche Inhalte

Was ist angesagt?

Accessible Javascript mit Frameworks - Best of Accessibility 2008
Accessible Javascript mit Frameworks - Best of Accessibility 2008Accessible Javascript mit Frameworks - Best of Accessibility 2008
Accessible Javascript mit Frameworks - Best of Accessibility 2008
Dirk Ginader
 

Was ist angesagt? (19)

Kleiner Blick auf CSS3
Kleiner Blick auf CSS3Kleiner Blick auf CSS3
Kleiner Blick auf CSS3
 
Gutenberg Blöcke
Gutenberg BlöckeGutenberg Blöcke
Gutenberg Blöcke
 
Einführung in YAML4
Einführung in YAML4Einführung in YAML4
Einführung in YAML4
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
 
Objektorientiertes CSS
Objektorientiertes CSSObjektorientiertes CSS
Objektorientiertes CSS
 
Modernes Webdesign
Modernes WebdesignModernes Webdesign
Modernes Webdesign
 
Programmieren für das Web - Vorlesung 13
Programmieren für das Web - Vorlesung 13Programmieren für das Web - Vorlesung 13
Programmieren für das Web - Vorlesung 13
 
HTML5-Features
HTML5-FeaturesHTML5-Features
HTML5-Features
 
Mobile Web Presentation @ Multimedia Treff Köln
Mobile Web Presentation @ Multimedia Treff KölnMobile Web Presentation @ Multimedia Treff Köln
Mobile Web Presentation @ Multimedia Treff Köln
 
Frontend Best Practices
Frontend Best PracticesFrontend Best Practices
Frontend Best Practices
 
10 Tricks für Entwickler
10 Tricks für Entwickler10 Tricks für Entwickler
10 Tricks für Entwickler
 
Modularisierung von Webseiten
Modularisierung von WebseitenModularisierung von Webseiten
Modularisierung von Webseiten
 
Joomla! Overrides - Die zu wenig genutzte Vielfalt
Joomla! Overrides - Die zu wenig genutzte VielfaltJoomla! Overrides - Die zu wenig genutzte Vielfalt
Joomla! Overrides - Die zu wenig genutzte Vielfalt
 
Findability
FindabilityFindability
Findability
 
Accessible Javascript mit Frameworks - Best of Accessibility 2008
Accessible Javascript mit Frameworks - Best of Accessibility 2008Accessible Javascript mit Frameworks - Best of Accessibility 2008
Accessible Javascript mit Frameworks - Best of Accessibility 2008
 
Wir brauchen einen neuen Workflow
Wir brauchen einen neuen WorkflowWir brauchen einen neuen Workflow
Wir brauchen einen neuen Workflow
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 
Actions und Hooks im Theme. Super, total falsch, notwendiges Übel...
Actions und Hooks im Theme. Super, total falsch, notwendiges Übel...Actions und Hooks im Theme. Super, total falsch, notwendiges Übel...
Actions und Hooks im Theme. Super, total falsch, notwendiges Übel...
 
Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007
 

Andere mochten auch

Andere mochten auch (11)

Moderne Webentwicklung
Moderne WebentwicklungModerne Webentwicklung
Moderne Webentwicklung
 
Datenqualität (DQ) - Voraussetzung für ein funktionierendes Qualitäts Managem...
Datenqualität (DQ) - Voraussetzung für ein funktionierendes Qualitäts Managem...Datenqualität (DQ) - Voraussetzung für ein funktionierendes Qualitäts Managem...
Datenqualität (DQ) - Voraussetzung für ein funktionierendes Qualitäts Managem...
 
Sicher bloggen mit WordPresse - CMS absichern
Sicher bloggen mit WordPresse - CMS absichernSicher bloggen mit WordPresse - CMS absichern
Sicher bloggen mit WordPresse - CMS absichern
 
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake OilCSS3 Media Queries: Mobile Elixir or CSS Snake Oil
CSS3 Media Queries: Mobile Elixir or CSS Snake Oil
 
What Would da Vinci Do?
What Would da Vinci Do?What Would da Vinci Do?
What Would da Vinci Do?
 
WordPress Professional II
WordPress Professional IIWordPress Professional II
WordPress Professional II
 
Open Source Creativity
Open Source CreativityOpen Source Creativity
Open Source Creativity
 
17 Ways to Design a Presentation People Want to View
17 Ways to Design a Presentation People Want to View17 Ways to Design a Presentation People Want to View
17 Ways to Design a Presentation People Want to View
 
Visual Design with Data
Visual Design with DataVisual Design with Data
Visual Design with Data
 
TEDx Manchester: AI & The Future of Work
TEDx Manchester: AI & The Future of WorkTEDx Manchester: AI & The Future of Work
TEDx Manchester: AI & The Future of Work
 
You Suck At PowerPoint!
You Suck At PowerPoint!You Suck At PowerPoint!
You Suck At PowerPoint!
 

Ähnlich wie Modularisierung von Webseiten

CSS Seminar
CSS SeminarCSS Seminar
CSS Seminar
tutego
 
Fortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische GrundlagenFortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische Grundlagen
Andreas Kalt
 
OOCSS Session Barcamp Mainz 2009
OOCSS Session Barcamp Mainz 2009OOCSS Session Barcamp Mainz 2009
OOCSS Session Barcamp Mainz 2009
ogleba
 

Ähnlich wie Modularisierung von Webseiten (20)

Contao und CSS
Contao und CSS Contao und CSS
Contao und CSS
 
Baustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-phpBaustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-php
 
Gutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemachtGutenberg Theme Entwicklung leicht gemacht
Gutenberg Theme Entwicklung leicht gemacht
 
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
 
XHTML
XHTMLXHTML
XHTML
 
WordPress Themes – ein Rundumschlag
WordPress Themes – ein RundumschlagWordPress Themes – ein Rundumschlag
WordPress Themes – ein Rundumschlag
 
SASS und SCSS - CSS effektiv schreiben
SASS und SCSS - CSS effektiv schreibenSASS und SCSS - CSS effektiv schreiben
SASS und SCSS - CSS effektiv schreiben
 
Der Schmetterlingseffekt - CSS in größeren Projekten
Der Schmetterlingseffekt - CSS in größeren ProjektenDer Schmetterlingseffekt - CSS in größeren Projekten
Der Schmetterlingseffekt - CSS in größeren Projekten
 
CSS Seminar
CSS SeminarCSS Seminar
CSS Seminar
 
Fortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische GrundlagenFortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische Grundlagen
 
Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal
 
Joomla
JoomlaJoomla
Joomla
 
HTML+CSS für Einsteiger - Vom Doctype zum Style
HTML+CSS für Einsteiger - Vom Doctype zum StyleHTML+CSS für Einsteiger - Vom Doctype zum Style
HTML+CSS für Einsteiger - Vom Doctype zum Style
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
 
APEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkursAPEX 5.1 Ui design crashkurs
APEX 5.1 Ui design crashkurs
 
WordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisierenWordPress.com-Blogs individualisieren
WordPress.com-Blogs individualisieren
 
Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)
 
OOCSS Session Barcamp Mainz 2009
OOCSS Session Barcamp Mainz 2009OOCSS Session Barcamp Mainz 2009
OOCSS Session Barcamp Mainz 2009
 
JSN Dome Anpassungshandbuch
JSN Dome AnpassungshandbuchJSN Dome Anpassungshandbuch
JSN Dome Anpassungshandbuch
 
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
 

Mehr von Jens Grochtdreis

Die Zukunft Des Web (Sep 2008)
Die Zukunft Des Web (Sep 2008)Die Zukunft Des Web (Sep 2008)
Die Zukunft Des Web (Sep 2008)
Jens Grochtdreis
 

Mehr von Jens Grochtdreis (18)

A Period of Transition
A Period of TransitionA Period of Transition
A Period of Transition
 
Real solutions, no tricks
Real solutions, no tricksReal solutions, no tricks
Real solutions, no tricks
 
Von Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und WespenVon Dinosauriern, Bienen und Wespen
Von Dinosauriern, Bienen und Wespen
 
Einfuehrung in YAML (2010)
Einfuehrung in YAML (2010)Einfuehrung in YAML (2010)
Einfuehrung in YAML (2010)
 
Komplexe Sites sauber aufbauen
Komplexe Sites sauber aufbauenKomplexe Sites sauber aufbauen
Komplexe Sites sauber aufbauen
 
Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3CKnockin' on heaven's door - Die Praxis zu Besuch beim W3C
Knockin' on heaven's door - Die Praxis zu Besuch beim W3C
 
Die Pest - philosophische Betrachtungen zur Webentwicklung
Die Pest - philosophische Betrachtungen zur WebentwicklungDie Pest - philosophische Betrachtungen zur Webentwicklung
Die Pest - philosophische Betrachtungen zur Webentwicklung
 
Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)
 
Webseiten sind keine Gemälde
Webseiten sind keine GemäldeWebseiten sind keine Gemälde
Webseiten sind keine Gemälde
 
A Tag 2009 - Aspekte Moderne Webentwicklung
A Tag 2009 -  Aspekte Moderne WebentwicklungA Tag 2009 -  Aspekte Moderne Webentwicklung
A Tag 2009 - Aspekte Moderne Webentwicklung
 
Aspekte Moderner Frontendentwicklung
Aspekte Moderner FrontendentwicklungAspekte Moderner Frontendentwicklung
Aspekte Moderner Frontendentwicklung
 
Gute Seiten, Schlechte Seiten - Webmontag Edition
Gute Seiten, Schlechte Seiten -  Webmontag EditionGute Seiten, Schlechte Seiten -  Webmontag Edition
Gute Seiten, Schlechte Seiten - Webmontag Edition
 
Gute Seiten, schlechte Seiten
Gute Seiten, schlechte SeitenGute Seiten, schlechte Seiten
Gute Seiten, schlechte Seiten
 
Webstandards für ein modernes Web
Webstandards für ein modernes WebWebstandards für ein modernes Web
Webstandards für ein modernes Web
 
Die Zukunft Des Web (Sep 2008)
Die Zukunft Des Web (Sep 2008)Die Zukunft Des Web (Sep 2008)
Die Zukunft Des Web (Sep 2008)
 
Lightningtalk Erlangen
Lightningtalk ErlangenLightningtalk Erlangen
Lightningtalk Erlangen
 
Webseiten sind keine Gemaelde
Webseiten sind keine GemaeldeWebseiten sind keine Gemaelde
Webseiten sind keine Gemaelde
 
Die Zukunft des Web
Die Zukunft des WebDie Zukunft des Web
Die Zukunft des Web
 

Modularisierung von Webseiten