Details zum Update - Quellcode

• Di, 09. Juni 2009,
• 1011 Wörter,
• 0 Kommentare,
• Tags:
• CSS,
• Sieben,
• Website

Ich habe gerade wie­der einen kurze Doku­men­ta­tion zum einem Rede­sign einer sehr ansehn­li­chen Seite gele­sen. Beim Anschauen des Quell­tex­tes dort, stel­len sich mir aber die Nacken­haare auf und ich bin mir sicher, hier in die­sem Bereich den rich­ti­gen Weg zu gehen. Das Thema Quell­code soll an die­ser Stelle zwei Berei­che betref­fen: HTML und CSS. Java­script und PHPs sind (noch) nicht mein Thema.

Das HTML hier soll lang­fris­tig voll vali­des HTML5 sein, denn dort pas­siert momen­tan mehr als bei ande­ren For­ma­ten, inso­fern ist HTML5 lang­fris­tig eine sichere Bank. Einige Grund­la­gen sind dafür schon gelegt. Sol­che Struk­tu­ren end­lich nut­zen zu kön­nen, ist zu gut, um es zu igno­rie­ren.

<a href="http://www.coldheat.de/archiv/2009/01/popcorerevolution.php" rel="bookmark" title="Permalink - Popcore Revolution">
    <h2><em>Popcore Revolution</em></h2>
    <p><b>Das Medium Videospiel verändert sich. Vom Popsong zur Oper.</b></p>
</a>

Wo es mir mög­lich war und sinn­voll erschien, sind DIV-Tags auch Lis­ten gewi­chen. Zwei Stel­len seien hier zu erwäh­nen. Zum einen besteht das Modul für die Blog­spalte auf der Start­seite nun aus einer mehr­stu­fi­gen Liste, die vor­her mit DIVs auf­ge­baut war.

<ul>
        
            <li>
                <ul class="entry">
                    <li><a href="http://..." rel="bookmark" title="Permalink ..."><img src="http://..." class="entrythumb" alt="Details zum Update - Raster und Kopf" /></a></li>
                    <li>
                            <ul class="entry-meta">
                                <li class="date">08/06</li>
                                <li class="category">CSS / Webdesign / </li>
                                <li class="com-link"><a href="http://..." title="2 Kommentare">2</a></li>
                                <li><h2><a href="http://..." rel="bookmark" title="Permalink - Details zum Update - Raster und Kopf">Details zum Update - Raster und Kopf</a></h2></li>
                            </ul><!--close .entry-meta-->
                    </li>         
                </ul><!--close .entry-->
            </li>
        
            <li>...</li>
            <li>...</li>
        
</ul>

Das ist für mei­nen Geschmack grenz­wer­tig, was die Ver­schach­te­lung einer Liste betrifft. Sicher geht viel mehr, aber sinn­vol­ler wird es dabei nicht. Ich über­lege immer noch, ob an die­ser Stelle nicht eine Defi­ni­ti­ons­liste viel effek­ti­ver wäre - kurze und rich­tige Ant­wort: ja. Bleibt ein Punkt auf der To-Do-Liste, denn das CSS für die­ses Modul ist ein ziem­li­cher Krampf. Bin erst­mal froh, dass es so funk­tio­niert.

im Dschun­gel der CSS-Klassen

Für Ver­sion 6 nie erschie­nen wird jetzt not­wen­dig, was ich schon immer mal haben wollte. Eine Refe­renz­seite, die alle mög­li­chen CSS-Klassen für Inhalts­ele­mente eines Arti­kels ent­hält. Im Laufe der Zeit ist es kom­ple­xer gewor­den, als ich wollte und ich muss immer mal schauen, wie die CSS-Klasse heißt, die ich benö­tige. Trotz­dem bin ich sehr zufrie­den mit dem all­ge­mei­nen Klassen-System.

Grund­sätz­lich unter­scheide ich zwi­schen 3 Gat­tun­gen: Typo­gra­fie, Bil­der und Daten (Tabel­len, Dia­gramme). Bei allen gibt es ein logi­sches Sys­tem der Klas­sen­na­men. Immer wenn ich eine CSS-Bild-Klasse sehe die .span-12 heißt, möchte ich den Ent­wick­ler drauf, hin­wei­sen, das Men­schen neue Inhalte erstel­len und keine Maschi­nen. Ein nor­ma­ler Autor muss nicht ver­ste­hen was span-12 für ein Bild ist. Mein Klas­sen­sys­tem für Bil­der ist rela­tiv ein­fach, wobei dem­nächst wohl neue Klas­sen dazu­kom­men. Es gibt:

• .xsm­limg (346 Pixel breit)
• .smlimg (468 Pixel breit)
• .stdimg (590 Pixel breit)
• .lrgimg (712 Pixel breit)
• .xlrgimg (834 Pixel breit)
• .maximg (956 Pixel breit)

Das ist die Basis. Zusätz­lich gibt es Son­der­klas­sen, die Bil­der gezielt im Float posi­tio­nie­ren oder ihre Erschei­nung leicht ver­än­dern. Ein Bei­spiel aus die­sem Arti­kel. Die Illus­tra­tion am Ende des Tex­tes hat gleich 2 Klas­sen .smlimg-r und .illus­tra­tion. Die ers­tere steht für die Posi­tion. .smlimg-r sagt mir es ist ein 346 Pixel gro­ßes Bild an der rech­ten Kante des Grund­ras­ters aus­ge­rich­tet. .illus­tra­tion dage­gen hebt die Grund­re­gel für eine Kante auf. Diese Bil­der sol­len im Fluß des Tex­tes unter­ge­hen und dür­fen somit keine Kante haben, die sonst Stan­dard­re­gel für Bil­der ist. Nach exakt glei­chem Mus­ter sind Bild­un­ter­schrif­ten ange­legt. Es braucht zwei CSS-Klassen, eine all­ge­meine und eine für die jwei­lige Bild­größe. Eine Bild­un­ter­schrift für ein 834 Pixel gro­ßes Bild lau­tet .cap­tion und .lrg.

Nach die­sem Prin­zip sind alle rest­li­chen Klas­sen für Arti­kel­for­mate ange­legt. Nur die Refe­renz­seite fehlt noch und wird kom­men, wenn ich alle neuen zusätz­li­chen For­mate ange­legt habe. Der neue Platz hat auch neue Mög­lich­kei­ten gebracht. Bei­spiels­weise brau­che ich nun zwei For­mate für Rand­be­mer­kun­gen, weil nun genug Platz vor­han­den ist.

Noch bin ich mit die­sem Sys­tem sehr zufrie­den. Lang­fris­tig muss man schauen, wie schnell sich neue For­mate erge­ben. Für die nächs­ten Jahre aber, habe ich genug Spiel­raum um die­ses Sys­tem sinn­voll und ver­ständ­lich zu erwei­tern und in kryp­ti­sche Klas­sen­na­men zu ver­fal­len.

Zum gleichen Thema

• Was geht?Fundstücke

• PionierarbeitFundstücke

• das Update zum UpdateWeb Design

• Frühjahrsputz bei coldheat.deFundstücke

• Suchmaschinen-OptimierungFundstücke

• CSS Dressed Day, MMO Zeugs und Social CrapworksFundstücke

• jQuery - Flash of Unstyled ContentCSS