View
2.586
Download
1
Category
Tags:
Preview:
DESCRIPTION
Citation preview
Eric EggertBarcamp Cologne 2
Bausteine und Formatvorlagen
XHTML und CSSBausteine und Formatvorlagen
Barcamp Cologne 2 Eric Eggert
Bausteine und Formatvorlagen
Microformats
Barcamp Cologne 2 Eric Eggert
Bausteine und Formatvorlagen
Externe Vorlagen für Inhalte
Barcamp Cologne 2 Eric Eggert
Bausteine und Formatvorlagen
Seitenunabhängig
Barcamp Cologne 2 Eric Eggert
Bausteine und Formatvorlagen
Angebotsunabhängig
Barcamp Cologne 2 Eric Eggert
Bausteine und Formatvorlagen
Inhaltsabhängig
Barcamp Cologne 2 Eric Eggert
Bausteine und Formatvorlagen
Kompatibilität zu anderen Angeboten
Eric EggertBarcamp Cologne 2
Bausteine und Formatvorlagen
Beispiele • Visitenkarten• Termine• Reviews• Einträge• Lizenzen• Tags• XFN
Barcamp Cologne 2 Eric Eggert
Bausteine und Formatvorlagen
Bausteine
Barcamp Cologne 2 Eric Eggert
Bausteine und Formatvorlagen
Design Patterns
Eric EggertBarcamp Cologne 2
Bausteine und Formatvorlagen
You can think of a personal markup pattern as a sort of
microformat that solves a problem unique to your situation.
Garrett Dimon, Coding for Content
Barcamp Cologne 2 Eric Eggert
Bausteine und Formatvorlagen
Lokale Vorlagen für Inhalte
Barcamp Cologne 2 Eric Eggert
Bausteine und Formatvorlagen
Seitenabhängig
Barcamp Cologne 2 Eric Eggert
Bausteine und Formatvorlagen
Angebotsabhängig
Barcamp Cologne 2 Eric Eggert
Bausteine und Formatvorlagen
Inhaltsabhängig
Barcamp Cologne 2 Eric Eggert
Bausteine und Formatvorlagen
Keine Kompatibilität zu anderen Angeboten
Eric EggertBarcamp Cologne 2
Bausteine und Formatvorlagen
Beispiele • Teaser auf der eigenen Seite• Angebotspräsentationen• Werbung• Kommentarbereiche
Barcamp Cologne 2 Eric Eggert
Bausteine und Formatvorlagen
HTML-Vorlagen
Barcamp Cologne 2 Eric Eggert
Bausteine und Formatvorlagen
Gestaltung frei wählbar
Barcamp Cologne 2 Eric Eggert
Bausteine und Formatvorlagen
Seitenvorlagen
Eric EggertBarcamp Cologne 2
Bausteine und Formatvorlagen
YUI Grids+Fonts +Reset
Eric EggertBarcamp Cologne 2
<body><div class="yui-gb"> <div class="yui-u first"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.</p> </div> <div class="yui-u"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.</p> </div> <div class="yui-u"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.</p> </div></div></body>
Eric EggertBarcamp Cologne 2
Eric EggertBarcamp Cologne 2
Bausteine und Formatvorlagen
YAMLYet Another Multicolumn Layout
Eric EggertBarcamp Cologne 2
1 <div id="page_margins"> 2 <div id="page"> 3 <div id="header"> ... </div> 4 <div id="nav"> ...</div> 5 6 <!-- begin: main content area #main --> 7 <div id="main"> 8 9 <!-- begin: #col1 - first float column --> 10 <div id="col1"> 11 <div id="col1_content" class="clearfix">...</div> 12 </div> 13 14 <!-- begin: #col2 - second float column --> 15 <div id="col2"> 16 <div id="col2_content" class="clearfix">...</div> 17 </div> 18 19 <!-- begin: #col3 static column --> 20 <div id="col3"> 21 <div id="col3_content" class="clearfix">...</div> 22 <!-- IE Column Clearing --> 23 <div id="ie_clearing"> </div> 24 </div> 25 26 <!-- end: #main --> 27 </div> 28 29 <!-- begin: #footer --> 30 <div id="footer"> ... </div> 31 </div> 32 </div>
Eric EggertBarcamp Cologne 2
Bausteine und Formatvorlagen
Blueprint
Eric EggertBarcamp Cologne 2
<body><div class="container"> <div class="column span-4 first">...</div>
<div class="column span-6">...</div>
<div class="column span-4 last">...</div></div></body>
Eric EggertBarcamp Cologne 2
Bausteine und Formatvorlagen
Mischung aus HTML-Vorschriften
Eric EggertBarcamp Cologne 2
Bausteine und Formatvorlagen
und vorgefertigtem CSS
Recommended