Monat: Oktober 2008

Kategorien
Allgemein

Brightkite-Einladung zu vergeben – Sorry, Folks, alle verbraten

Alle Einladungen sind schon raus. Wer Brightkite-Nutzer werden möchte, kann eine meiner zwei noch vorhandenen Einladungen nutzen. Dazu einfach kurz kommentieren und die E-Mail-Adresse hinterlassen, Einladung kommt dann im Laufe des Tages.

Wer schon drin ist, kann mich auch gerne in seine Kontaktliste hinzufügen: Michels Brightkite-Profil

Brightkite-Logo Brightkite is a location-based social network. In real time you can see where your friends are and what they’re up to. Depending on your privacy settings you can also meet others nearby.

Kategorien
Frontend: HTML5, CSS3, jQuery Webstandards

Bilder zentrieren mit CSS und jQuery

Ich saß heute am neuen Layout und wollte die Bilder, die in den Artikeln auftauchen, mittig ausrichten. Ausnahmen sind Bilder mit den Klassen .alignleft und .alignright.

Gut, dachte ich mir, versuchste es mal mit text-align: center; aber Pustekuchen. Nach ein wenig Recherche schien mir die einzig brauchbare Möglichkeit zu sein, den entsprechenden Bildern ein neues Elternelement zu verpassen, beispielsweise ein <div> oder ein <span> und dessen Inhalt (also auch das Bild) zentriert darzustellen. Da ich 1.) nicht in den Textpattern-Dateien rumwuseln wollte und 2.) das Extra-Markup nicht ins HTML gehört, hab ich mich für die JavaScript-Methode entschieden und dabei jQuery ausprobiert.

Meine Erfahrungen mit JavaScript (oder ECMAScript) sind seit jeher gering, da ich es bisher nicht gebraucht habe und ich immer an Icons die den Mauszeiger verfolgen und sonstige Spielereien denken musste, die ich schon immer fragwürdig hielt.

Der jQuery-Code, den ich dafür nutze, sieht folgendermaßen aus:

$(document).ready(function(){
$(".entry-content img[class!=alignleft][class!=alignright]").wrap("<span class=\"imgbox\"></span>");
});

Es macht nichts anderes als nach dem Laden des Dokuments allen Bildern, die in einem Element mit der Klasse .entry-content enthalten sind, ein <span>-Element mit der Klasse .imgbox drumherum zu verpassen. Eine Ausnahme bilden wie schon gesagt Bilder mit den den Klassen .alignright/left, die bekommen kein <span>.
(.entry-content stammt übrigens aus dem hAtom-Mikroformat, über das ich schon mal geschrieben habe.)

In HTML übersetzt (vereinfacht:

<img src="bildname.jpg" />

wird zu

<span class="imgbox"><img src="bildname.jpg" /></a>

Das CSS sieht so aus:

.imgbox {
text-align: center;
display: block;
}

.entry-content img {
border: 1px solid #CACACA;
background: #FFF;
padding: 5px 5px 5px 5px;
text-align: center;
}

Das <span>-Element wird zu einem Block-Element und bekommt dadurch die komplette Breite des .entry-content. Mittels text-align: center; wird jeglicher Inhalt in dieser Box zentriert, so auch das enthaltende Bild. Dieses besitzt noch die ganzen anderen Standard-Formatierungen erhält wie einen Rahmen, Hintergrundfarbe und einen Innenabstand. Und so sieht das dann aus:

Screenshot eines mittels jQuery-Hilfe zentrierten Bildes

Kategorien
Allgemein

Michel renoviert - Bestandsaufnahme

Wie schon ankündigt, werde ich das Layout dieser Website neu ausrichten, ver(schlimm)bessern und den ganzen Prozess auch noch dokumentieren. Zu Anfang eine kurze Bestandsaufnahme.

Das jetzige Layout hat einen großen Makel: Es ist kein wirkliches Layout. Gut ok, ein wenig schon: Überschriften sind erkennbar, Absätze sind voneinander getrennt, die Zeilen sind nicht ellenlang und auch die einzelnen Beiträge kann man unterscheiden. Es mag alles gut lesbar sein, aber Stimmung oder gar große Gestaltungskunst sucht man vergebens. Alles wirkt lieblos aneinandergewürfelt, ohne roten Faden und ohne (positiven) Wiedererkennungswert. Aber schauen wir uns das mal im Detail an:

Die Startseite

Auf der Startseite findet sich folgendes: Ein Hinweis, dass hier gerade rumgeschraubt wird, nicht-ausgeblendete Skip-Links, der (nichtverlinkte) Website-Titel, Hauptnavigation und Suchformular sowie eine kurze Begrüßung und persönliche Vorstellung ohne Foto. Danach folgen die neuesten 5 Beiträge im Weblog, letzte Kommentare und nochmal eine Beschreibung über den Autor, Lizenz-Informationen und schließlich ein Werbeblock.

Das sind immerhin schon mal die relavantesten Informationen um einen Einstieg zu bekommen. Okay, man könnte noch kurz anreißen, worum es hier eigentlich geht, aus der Vorstellung wird man ja nicht gerade schlau. Mit 11 kb(Kilobyte) ist sie aber immerhinn flott geladen.

Über mich

Der Text ist eine absolute Katastrophe und auch nicht mehr aktuell. Außerdem fehlt ein oder mehrere Fotos, auch ein Link auf die Kontaktseite fehlt.

Screenshot der Kontaktseite

Kontakt

Die relevanten Infos sind da aber nicht besonders aufbereitet. Immerhin gibts Links zu meinen Profilen im Netz, um die Kontaktaufnahme zu vereinfachen. Das Kontaktformular kann allerdings raus, da mir dort niemand außer ein paar russischen Spammern schreibt.

Screenshot der Kontaktseite

Weblog/Sideblog

Die letzten x Beiträge, schön hintereinander. Sieht aus wie die Startseite. Langweilig.

Archiv

Ellenlang. Keine Kategorien. Keine Tags. Keine Sprunglinks zu den Monaten. Deren Überschriften sind ja nicht mal erkennbar. Eine einzige Textwüste.

Screenshot des Archivs

Der Quelltext

Der Quelltext

Jippie, die Startseite validiert, die Unterseiten soweit auch. Allerdings lässt die Gliederung der Überschriften zu wünschen übrig. Ansonsten ist der Quelltext soweit aber in Ordnung, semantisch und mit Mikroformaten gespickt.

Überschriften-Gliederung

Fazit

Man sieht, es muss sich einiges tun. Ein Layout will entwickelt werden, Texte überarbeitet und korrigiert und der Quelltext kann auch ein paar Änderungen erfahren.

Kategorien
Allgemein

Technik in 140 Zeichen

Wer kann in 140 Zeichen (Twitter ist überall) möglichst viele technische Abkürzungen unterbringen? Ab in die Kommentare damit!

Kategorien
Browser Frontend: HTML5, CSS3, jQuery Webstandards

Mein IE6, die absolut positionierten Listenelemente mit Links und ich

Der IE6 hat ein Problem mit display: block;-Links in absolut positionierten (Listen-)Elementen. Wenn man dem Link keinen Hintergrund zuweist, ist der Link zwar da, kann aber nicht per Drüberfahren erkannt und demnach auch nicht angeklickt werden. Tabbt man sich durchs Dokument, landet man auch beim Link, aber anvisieren mit dem Mauszeiger? No go.

Auch eine Höhen- und Breitenangabe half nicht, einzig und allein ein background: url(leer.gif); half, um den Dämon auszutreiben.

Wieso man Links überhaupt mal absolut positioniert? Nun ja, damit kann man ganz nett eine Imagemap zusammenschustern, das @map@-Element mochte ich noch nie, auch wenn es in XHTML 1 noch existiert.

Kategorien
Allgemein

BarCampRuhr 2

Nachdem das BarCampRuhr dieses Jahr im März ein voller Erfolg war, wird es nächstes Jahr wiederholt und zwar als BarCampRuhr2. Auch diesmal wieder im März, allerdings am Ende des Monats, genauer gesagt vom 28.–29. März 2009. Der Ort des Geschehens bleibt das Unperfekthaus in Essen am Limbecker Platz.

Die Tagging-Freunde unter uns haben Glück, denn getaggt werden soll mit bcruhr2.

Ich weiß nicht wie es mit den Sponsoren aussieht, aber ich denke es wird noch gesucht und getan. Letztes Jahr hat das ja auch gut geklappt, soweit ich das mitbekommen habe. Bei der gestrigen pl0gbar in Bochumer Café Konkret wurde über ein neues Logo beratschlagt, ich bin gespannt was dabei rauskommt.

via

Kategorien
Allgemein

Alljährliches

Boh glaubse, schon wieder ‘n Jahr um. Zur Feier des Tages ein echter Partyknüller mit einem famosen* Video dazu:

* (hear the Ironieglocke)