Details zum Update – Quellcode

Details zum Update – Quellcode

Ich habe gerade wieder einen kurze Dokumentation zum einem Redesign einer sehr ansehnlichen Seite gelesen. Beim Anschauen des Quelltextes dort, stellen sich mir aber die Nackenhaare auf und ich bin mir sicher, hier in diesem Bereich den richtigen Weg zu gehen. Das Thema Quellcode soll an dieser Stelle zwei Bereiche betreffen: HTML und CSS. Javascript und PHPs sind (noch) nicht mein Thema.

Das HTML hier soll langfristig voll valides HTML5 sein, denn dort passiert momentan mehr als bei anderen Formaten, insofern ist HTML5 langfristig eine sichere Bank. Einige Grundlagen sind dafür schon gelegt. Solche Strukturen endlich nutzen zu können, ist zu gut, um es zu ignorieren.

<a href="https://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öglich war und sinnvoll erschien, sind DIV-Tags auch Listen gewichen. Zwei Stellen seien hier zu erwähnen. Zum einen besteht das Modul für die Blogspalte auf der Startseite nun aus einer mehrstufigen Liste, die vorher mit DIVs aufgebaut 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 meinen Geschmack grenzwertig, was die Verschachtelung einer Liste betrifft. Sicher geht viel mehr, aber sinnvoller wird es dabei nicht. Ich überlege immer noch, ob an dieser Stelle nicht eine Definitionsliste viel effektiver wäre – kurze und richtige Antwort: ja. Bleibt ein Punkt auf der To-Do-Liste, denn das CSS für dieses Modul ist ein ziemlicher Krampf. Bin erstmal froh, dass es so funktioniert.

im Dschungel der CSS-Klassen

Für Version 6 nie erschienen wird jetzt notwendig, was ich schon immer mal haben wollte. Eine Referenzseite, die alle möglichen CSS-Klassen für Inhaltselemente eines Artikels enthält. Im Laufe der Zeit ist es komplexer geworden, als ich wollte und ich muss immer mal schauen, wie die CSS-Klasse heißt, die ich benötige. Trotzdem bin ich sehr zufrieden mit dem allgemeinen Klassen-System.

Grundsätzlich unterscheide ich zwischen 3 Gattungen: Typografie, Bilder und Daten (Tabellen, Diagramme). Bei allen gibt es ein logisches System der Klassennamen. Immer wenn ich eine CSS-Bild-Klasse sehe die .span-12 heißt, möchte ich den Entwickler drauf, hinweisen, das Menschen neue Inhalte erstellen und keine Maschinen. Ein normaler Autor muss nicht verstehen was span-12 für ein Bild ist. Mein Klassensystem für Bilder ist relativ einfach, wobei demnächst wohl neue Klassen dazukommen. Es gibt:

Das ist die Basis. Zusätzlich gibt es Sonderklassen, die Bilder gezielt im Float positionieren oder ihre Erscheinung leicht verändern. Ein Beispiel aus diesem Artikel. Die Illustration am Ende des Textes hat gleich 2 Klassen .smlimg-r und .illustration. Die erstere steht für die Position. .smlimg-r sagt mir es ist ein 346 Pixel großes Bild an der rechten Kante des Grundrasters ausgerichtet. .illustration dagegen hebt die Grundregel für eine Kante auf. Diese Bilder sollen im Fluß des Textes untergehen und dürfen somit keine Kante haben, die sonst Standardregel für Bilder ist. Nach exakt gleichem Muster sind Bildunterschriften angelegt. Es braucht zwei CSS-Klassen, eine allgemeine und eine für die jweilige Bildgröße. Eine Bildunterschrift für ein 834 Pixel großes Bild lautet .caption und .lrg.

Nach diesem Prinzip sind alle restlichen Klassen für Artikelformate angelegt. Nur die Referenzseite fehlt noch und wird kommen, wenn ich alle neuen zusätzlichen Formate angelegt habe. Der neue Platz hat auch neue Möglichkeiten gebracht. Beispielsweise brauche ich nun zwei Formate für Randbemerkungen, weil nun genug Platz vorhanden ist.

Noch bin ich mit diesem System sehr zufrieden. Langfristig muss man schauen, wie schnell sich neue Formate ergeben. Für die nächsten Jahre aber, habe ich genug Spielraum um dieses System sinnvoll und verständlich zu erweitern und in kryptische Klassennamen zu verfallen.