CSS Frameworks (09/2008)
-
Upload
djesse -
Category
Technology
-
view
5.625 -
download
0
Transcript of CSS Frameworks (09/2008)
DIRK JESSE | WEBKONGRESS ERLANGEN 2008, 04. September 2008
CSS FRAMEWORKSErwartungen, Mythen & reale Vorteile
Die Webkrauts …http://www.webkrauts.de/
Initiative für die Verbreitung von Webstandards
Aufklärungsarbeit und Veröffentlichungen in unterschiedlichen Medien
Aktuelle Layouttrends
Ausgangspunkt
Webentwickler ... Individuelle Arbeitsweise
Individuelle CSS-Kenntnisse
Individuelle Ansprüche an Code-Qualität
Browser ... Unterschiedliche Default-Stylesheets
Versionsabhängige CSS-Fähigkeiten
Individuelle CSS- und Parser-Bugs
Unterstützung für mind. 2 Generationen
Layout-Frameworks
Definition
Arbeitswerkzeug zur Layouterstellung
Universelles Layoutkonzept Vielfältige Variationsmöglichkeiten
Unabhängig von Inhalten
Trennung von Framework- und Nutzerbereich
Weitere Aufgabenbereiche Unterstützung bei Contentgestaltung
Bug-Prävention
Debugging
Ziel: Produktivitätssteigerung
Frameworks
GRID-FRAMEWORKSAnwendungsorientierte Baukästen
Arbeitsweise Vordefinierte Gridklassen
Layouterstellung mit HTML
Vorteile Sehr flache Lernkurve
Kein CSS-Knowhow nötig
Schnelle Ergebnisse
CSS-FRAMEWORKSEntwicklerorientierte Baukästen
Arbeitsweise Vordefinierter Markup
Layouterstellung mit CSS
Vorteile Größere Gestaltungsfreiheit
Trennung Struktur & Layout
Schnelle Ergebnisse
Beispiele für Frameworks
GRID-FRAMEWORKSAnwendungsorientierte Baukästen
Blueprint CSS & Clones
960 GS & Clones
YUI Grids
CSS-FRAMEWORKSEntwicklerorientierte Baukästen
YAML
A CSS FrameworkMike Stenhouse | Content with Style
Blueprint CSShttp://code.google.com/p/blueprintcss/
Überblick
Erstveröffentlichung 08/2007Inspiriert durch A List Apart Artikel
Grid-Framework
Code-Basis Reset-CSS (Eric Meyer)
Fixe Grids (Pixel-basiert)
Typographie (Vertical Rhythm)
GPL Lizenz
Blueprint CSShttp://code.google.com/p/blueprintcss/
Details
Funktionsumfang Layoutbreite fixiert auf 950 Pixel
24 Spalten Raster (30 Pixel + 10 Pixel)
Vorlagen für Typographie & Print
Generator für alternative Grids
Tutorials, Tools & Generatoren
960 Grid Systemhttp://960.gs/
Überblick
Erstveröffentlichung 03/2008
Grid-Framework
Code-Basis Reset-CSS (Eric Meyer)
Fixe Grids (Pixel-basiert)
Typographie (minimal)
GPL/MIT Lizenz
960 Grid Systemhttp://960.gs/
Details
Abgespecktes Blueprint CSS
Funktionsumfang Layoutbreite fixiert auf 960 Pixel
12- und 16-Spalten Raster
Grafische Entwurfvorlagen Photoshop
Fireworks
Visio
Yahoo! User Interface Libraryhttp://developer.yahoo.com/yui/
Überblick
Erstveröffentlichung 02/2006
Grid-Framework
Kleiner CSS-Teil: YUI Grids Dokumentation: Cheat-Sheet
Abgestimmt auf Anforderungen an Yahoo! Webseiten
Abgestufter Browser-Support
BSD Lizenz
Yahoo! User Interface Libraryhttp://developer.yahoo.com/yui/
Details
Grid-Framework
Spalten & Grid-Layouts
Funktionsumfang Layoutbreite: 750, 950, 974 px, 100%, Custom
Templates: 6 zweipaltige Varianten (Source Oder)
Weitere Gliederung: 1/2, 1/3, 1/4 Grid-Elemente
Zahlreiche Codebeispiele
YUI Grid-Builder (WYSIWYG)
YAML – (X)HTML/CSS Frameworkhttp://www.yaml.de/
Überblick
Erstveröffentlichung 10/2005
CSS-Framework
Dokumentation Online- & PDF-Dokumentation
Buch „CSS-Layouts“
Zahlreiche CMS-Anpassungen
Creative Commons Lizenz
YAML – (X)HTML/CSS Frameworkhttp://www.yaml.de/
Details
Schwerpunkt: Flexible Layouts
Browsersupport ab IE 5.0/Win
Funktionsumfang Flexibles Spaltenkonzept (Source Order)
Flexibles Gridkonzept
Keine Einheitenbindung (PX, EM, Prozent)
IE-Bug-Prävention
Top-Down-Prinzip mit Fallbacklösung
YAML Builder (WYSIWYG)
A CSS FrameworkMike Stenhouse (http://www.contentwithstyle.co.uk/Articles/17/)
Überblick
Erstveröffentlichung 04/2005
CSS-Framework
Dokumentation: Blogbeitrag
Proof-of-Concept Charakter
BSD Lizenz
A CSS FrameworkMike Stenhouse (http://www.contentwithstyle.co.uk/Articles/17/)
Details
Fixe Spaltenlayouts
Funktionsumfang Universelles Markup
7 mitgelieferte Screenlayouts (1-3 Spalten)
CSS-Vorlagen für Typographie und Formulare
Top-Down-Prinzip
Nachteilig Kein CSS-Reset
Vermischung Framework-Logik & Layout
Keine Gridelemente zur Gliederung der Spalten
Weitere Projekte
GRID-FRAMEWORKS
Blueprint-Clones BlueTripCSS
Typogridphy
Emastic
960 GS-Clones Fluid 960 Grid System
GridEasy
LogiCSS
CSS-FRAMEWORKS
WYMStyle
Tripoli
Layout-/Projektvorlagen
Elements
Schema
Boilerplate
ESWAT
Allgemeiner Funktionsumfang
Layouterstellung Reset-CSS
Mehrspaltige Layouts
Gridelemente
Projektentwicklung Modulare CSS-Bausteine
Verzeichnisstruktur
Contentgestaltung Typographische Vorgaben
Standard-CSS für Druck
Standard-CSS für Formulare
HTML & CSS Bugfreier Rohbau
Valides Markup
Konzeptionelle Grenzen
Allgemeines
Vergleich zu PHP- & JavaScript-Frameworks Keine echte Software sondern statische Filesammlung
Keine 100%ige Trennung von Framework-/Entwicklercode
Modularisierung Modulares CSS für Entwicklungsprozess vorteilhaft
Gegensätzliche Anforderungen im Produktiveinsatz(HTTP-Requests)
Konzeptionelle Grenzen
GRID-FRAMEWORKS
Künstliche Vielfalt Vielfalt entsteht durch Fallvorgaben (CSS-Klassen)
Fallvorgaben führen zu CSS-Overhead
Abhängigkeiten innerhalb der Grid-Klassen
Codequalität Aufhebung der Trennung von Struktur & Layout
Individueller statt universeller Markup
Konzeptionelle Grenzen
CSS-FRAMEWORKS
Begrenzte Freiheit Erreichbare Vielfalt über Markupstruktur bestimmt
Variabilität und Unabhängigkeit von Inhaltenbedingt Markup-Overhead
Anwendung Höherer Einarbeitungsaufwand
Mehr Freiheit führt zu mehr Eigenverantwortung
Praktische Grenzen
Frameworks sind keine Garantie für ... Barrierefreiheit
Gute Usability
Gute Positionierung in Suchmaschinen
Sinnvoller Frameworkeinsatz bedingt ... Verständnis für das jeweilige Konzept
Ausreichende HTML/CSS-Kenntnisse (kein Fertiglayout)
Zusammenfassung: Vorteile
Hohe Arbeitsgeschwindigkeit Stark verkürzte Entwicklungszeit KILLER FEATURE!
Automatisierte Layouterstellung (Builder)
Rapid Prototyping
Robuste Codebasis Hohe Code-Qualität durch große Nutzerbasis
Verbesserter Workflow bei Team-Arbeit
Verbesserte Wartbarkeit von Projekten
Steigerung der Produktivität
Zusammenfassung: Konzepte
GRID-FRAMEWORKS
Sinn und Zweck von Grid-Frameworks sind schnelle Ergebnisse in der Anwendung.
CSS-FRAMEWORKS
Sinn und Zweck eines CSS-Frameworks ist eine leistungsfähige Entwicklungsumgebung
Blick in die Kristallkugel
Layouterstellung in ... 5 Jahren
Wachsende Bedeutung von CSS-Frameworks
Automatisierte Erstellung von CSS-Layouts
JS-Bibliotheken für komplexe User Interfaces
Handcodierte Layouts
Individualdesign (Kunst & Kultur)
Private Webseiten
Dirk JesseHomepage: http://www.highresolution.info
Email: [email protected]
YAML (X)HTML/CSS FrameworkDownload & Dokumentation: http://www.yaml.de
YAML Builder: http://builder.yaml.de
Support Forum: http://forum.yaml.de
CSS Layouts – Praxislösungen mit YAML 3.o2. erweiterte und überarbeite Auflage, Dezember 2007
Galileo Press: http://www.galileocomputing.de/1669