• Like
  • Save
Layout Frameworks im professionellen Webdesign
Upcoming SlideShare
Loading in...5
×
 

Layout Frameworks im professionellen Webdesign

on

  • 7,845 views

 

Statistics

Views

Total Views
7,845
Views on SlideShare
6,556
Embed Views
1,289

Actions

Likes
4
Downloads
91
Comments
1

10 Embeds 1,289

http://www.highresolution.info 904
http://kratce.vzhurudolu.cz 347
http://www.slideshare.net 19
http://23d.cz 9
http://static.slidesharecdn.com 3
http://flavors.me 2
http://translate.googleusercontent.com 2
http://webcache.googleusercontent.com 1
http://www.inoreader.com 1
http://www.thewebhatesme.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Layout Frameworks im professionellen Webdesign Layout Frameworks im professionellen Webdesign Presentation Transcript

    • LAYOUT-FRAMEWORKS im professionellen Webdesign Dirk Jesse, Highresolution.info Webtech Conference 2009, Karlsruhe
    • Zur Person Dirk Jesse • Bauingenieur aus Dresden • Freiberuflicher Softwareentwickler: – CSS Framework „Yet Another Multicolumn Layout“ (YAML) – JavaScript-Applikationen – CSSDOC • Autor – T3N Magazin, Webstandards Magazin – Fachbuch „CSS-Layouts, Praxislösungen mit YAML 3.0“ • Redaktion Webkrauts
    • Frameworks “… a set of tools, libraries, conventions and best practices that attempt to abstract routine tasks into generic modules that can be reused.” Jeff Croft, Frameworks for Designers http://www.alistapart.com/articles/frameworksfordesigners/
    • Layout Frameworks Generisch Funktionalität ist unabhängig von visueller Gestaltung Wiederverwendbar Kombinierbare, nach Funktionen getrennte, standardisierte Bausteine Robust Aufrechterhaltung der Funktion unter wechselnden Anwendungszenarien
    • Layout-Frameworks im Web SHOWCASE
    • Blueprint CSS
    • YAML
    • YAML
    • YUI Library
    • Fragen Welche Framework-Typen gibt es? Was tun Layout-Frameworks? Wie finde ich das Richtige? Wie sieht die Zukunft aus?
    • Gleiche Ausgangsbedingungen für Alle! CSS RESET
    • Eric Meyer – CSS Reset Reloaded http://meyerweb.com/eric/tools/css/reset/
    • Yahoo – YUI 2: Reset CSS http://developer.yahoo.com/yui/reset/
    • YUI Reset Demo
    • Browser-Reset Eric Meyer‘s Reset-CSS YUI Reset-CSS Pro Pro • Abstände werden zurückgesetzt • Abstände werden zurückgesetzt • Schriftgrößen unberührt • lässt :focus unberührt Contra Contra • ol, ul { list-style: none; } • H1...H6 erhalten font-size: 100% • <strong> ist nicht bold • ol, ul { list-style: none; } • <em> ist nicht italics • Unnötiges Zurücksetzen von Standardformatierungen für strong, em, ins, del, sub, sup Barriere per Default • :focus { outline: 0; }
    • Offene Diskussionen “The problem I've had with these resets is that I then find myself declaring much more than I ever needed to just to get browsers back to rendering things the way I want. As it turns out, I'm perfectly happy with how a number of elements render by default. I like lists to have bullets and strong elements to have bolded text. ” Jonathan Snook, No CSS Reset http://snook.ca/archives/html_and_css/no_css_reset/
    • Offene Diskussionen “I don’t want to take style effects for granted. […] It makes me think just that little bit harder about the semantics of my document. With the reset in place, I don’t pick strong because the design calls for boldfacing. Instead, I pick the right element – whether it’s strong or em or b or h3 or whatever – and then style it as needed.” Eric Meyer, Reset Reasoning http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/
    • Der verlängerte Arm des Printdesigns? GRID FRAMEWORKS
    • Blueprint CSS 24 Spalten Grid (960 px) Erstveröffentlichung: August 2007
    • 960 Grid System 12/16 Spalten Grid (960 px) Erstveröffentlichung: März 2008
    • Grid Raster 30px 10px 24 * 40px – 10px = 950px Blueprint CSS 24 Spalten 10px 40px 10px 16 * 60px = 960px 960 Grid System 16 Spalten 10px 60px 10px 12 * 80px = 960px 960 Grid System 12 Spalten
    • Blueprint CSS 950px 720px 230px header class="span-24" teaserA teaserB class="span-9" class="span-9 last" sidebar content block class="span-18 last" content class="span-18" class="span-6 last" footerA footerB footerC class="span-6" class="span-6" class="span-6 last"
    • 960 Grid System 960px 720px 240px header class="grid_16" teaserA teaserB class="grid_6 alpha" class="grid_6 omega" Sidebar content block class="grid_12 alpha omega" content class="grid_12" class="grid_4" footerA footerB footerC class="grid_4 alpha" class="grid_4" class="grid_4 omega"
    • YUI Grids CSS 6 Basislayouts (2 Spalten) mit variabler Breite (750/950/974px, 100%, custom) Schachtelbare Grid-Bausteine (1/2, 1/3, 1/4) Erstveröffentlichung: Februar 2006
    • YUI Grids Builder
    • YUI Grids Builder <div id="doc2" class="yui-t5"> <div id="hd"> <!-- header --> </div> <div id="bd"> <div id="yui-main"> <div class="yui-b"> <div class="yui-g"> <div class="yui-u first"> <!– teaserA --> </div> <div class="yui-u"> <!-- teaserB --> </div> </div> <div class="yui-g"> <!– content box --> </div> <div class="yui-gb"> <div class="yui-u first"> <!-- footerA --> </div> <div class="yui-u"> <!-- footerB --> </div> <div class="yui-u"> <!-- footerC --> </div> </div> </div> </div> <div class="yui-b"> <!-- sidebar --> </div> </div> </div>
    • Moderne Baukästen zur Layoutgestaltung CSS FRAMEWORKS
    • Mike Stenhouse, A CSS Framework Proof of Concept Veröffentlichung: Mai 2005 http://www.contentwithstyle.co.uk/content/a-css-framework
    • YAML (Yet Another Multicolumn Layout) Flexible Spalten- und Gridbausteine (px/em/%) Erstveröffentlichung: Oktober 2005
    • YAML Builder
    • <div class="page_margins"> <div id="header"> <!-- header --> </div> YAML Builder <div id="main"> <div id="col1"> <div id="col1_content" class="clearfix"> <div class="subcolumns"> <div class="c50l"> <div class="subcl"> <!-- teaserA --> </div> </div> <div class="c50r"> <div class="subcr"> <!-- teaserB --> </div> </div> @charset "UTF-8"; </div> /** <div> * "Yet Another Multicolumn Layout" - (X)HTML/CSS framework <!-- contentbox --> </div> * (en) stylesheet for screen layout * (de) Stylesheet für das Bildschirm-Layout <div class="subcolumns"> * <div class="c33l"> */ <div class="subcl"> <!-- footerA --> @media screen, projection </div> { </div> .page_margins { <div class="c33l"> margin: 0 auto; <div class="subc"> width: 960px; <!-- footerB --> background: #fff; </div> </div> } <div class="c33r"> #col1 { float: left; width: 75%} <div class="subcr"> #col2 { width: auto; margin: 0 0 0 75%} <!-- footerC --> } </div> </div> </div> </div> </div> <div id="col2"> <div id="col2_content" class="clearfix"> <!-- sidebar --> </div> </div> </div> </div>
    • Lorem ipsum dolor sit amet, consectetur, sadipisci velit … INHALT UND TYPOGRAFIE
    • Vertical Rhythm Heading Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam Subheading Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
    • Vertical Rhythm Blueprint CSS Baseline CSS
    • Vertical Rhythm Blueprint CSS Baseline CSS
    • OOCSS (Object Orientated CSS) An YUI angelehntes Grid-Konzept Objektorientiertes Modulkonzept zur Gestaltung von Inhaltselementen Erstveröffentlichung: Frühjahr 2009
    • Back to the root … SERVERSEITIGE WERKZEUGKÄSTEN
    • SASS “Sass makes CSS fun again. Sass is CSS, plus nested rules, variables, mixins, and more, all in a concise, readable syntax.” // Sass /* CSS */ h1 h1 { height: 118px height: 118px; margin-top: 1em margin-top: 1em; } .tagline font-size: 26px .tagline { text-align: right font-size: 26px; text-align: right; }
    • SASS Mixins Generiertes CSS // Sass /* CSS */ =table-scaffolding #data { th float: left; text-align: center margin-left: 10px; font-weight: bold } td, th padding: 2px #data th { text-align: center; =left(!dist) font-weight: bold; float: left } margin-left = !dist #data td, #data th { #data padding: 2px; +left(10px) } +table-scaffolding
    • HAML “Haml is a markup language that’s used to cleanly and simply describe the HTML …” • Markup should be beautiful • Markup should be DRY • Markup should be well-intended • HTML structure should be clear
    • Compass CSS Ruby // Sass Meta-Framework mit Portierungen für Blueprint, 960.gs, YUI
    • Scaffold – Rapid CSS Development Framework PHP Zahlreiche CSS3-basierte Bausteine Layout-Plugin (CSS 3 Multicolumn Module)
    • Wo liegen die Vorteile des Framework-Einsatzes? SPIELZEUG ODER ECHTE HILFE?
    • Layout-Frameworks Abstrahieren Standardaufgaben Implementieren Best-Practice-Lösungen Mehr Zeit für Ihre Kreativität
    • Wo ist der heilige Gral? DIE QUAL DER WAHL
    • Ausblick in die Zukunft der Webentwicklung WHERE NO MAN HAS GONE BEFORE…
    • „If I can see further than anyone else, it is only because I am standing on the shoulders of giants.” Sir Isaac Newton