Embed Size (px)
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
![Kapitel WT:III (Fortsetzung)...Cascading Stylesheets CSS [W3C status, reports, css home] Historie 1996 CSS Level 1. Recommendation. 2011 CSS Level 2 R1. Recommendation. 2016 CSS Level](https://img.pdfslide.org/doc/110x75/5fc4c0e6cd2700396b14acce/kapitel-wtiii-fortsetzung-cascading-stylesheets-css-w3c-status-reports.jpg)
![[Guide] CSS (+ CSS 3!) Inhaltsverzeichnis · Links formatieren & Pseudoklassen/Elemente CSS 3 Download Schlusswort Vorwort CSS (oder lang: "Cascading Style Sheets") geben deiner (HTML](https://img.pdfslide.org/doc/110x75/5f16244122e1e162b77f14cc/guide-css-css-3-inhaltsverzeichnis-links-formatieren-pseudoklassenelemente.jpg)
