Kategorien
Allgemein

Laptop-/Umhängetasche gesucht – Platz fürs MacBook und Schreibkram

Aktuell möchte ich ein wenig vom Rucksack wegkommen und suche daher eine Umhängetasche, in die unter anderem auch mein MacBook passt. Größtenteils werde ich ich sie auf dem Weg zur Arbeit und zur Berufsschule mitnehmen. Neben dem MacBook sollte auch noch Platz für Blöcke und Stife und eventuell noch ein Handyfach vorhanden sein, letzteres ist aber eher optional.

Vielleicht kennt ja jemand von euch einen guten Online-Store oder Läden in Essen und Umgebung (Bochum, Mülheim, Oberhausen, Gelsenkirchen), mal von Crumpler abgesehen, von denen ich übrigens den Gimp besitze.

Preislich bin ich mir noch nicht sicher, das 10-€-Teil von Irgendwo sollte es aber auch nicht sein. Immer her mit den Links und Empfehlungen!

Kategorien
Allgemein

Kommentare bis auf weiteres moderiert

Musste die Kommentare mal eben auf moderiert umstellen, irgendjemand hat es geschafft, Textpattern auszutricksen. Ars…!

Kategorien
Film & Fernsehen

Ein Quantum Ratlosigkeit

Einen bleibenden Eindruck hat Ein Quantum Trost bei mir nicht hinterlassen, ich weiß nach zwei Tagen schon nicht mehr, worum es genau ging. Vielleicht sollte ich auch mal mein Hirn checken lassen oder im wachen Zustand ins Kino gehen, aber das nur nebenbei.

Ich weiß noch, dass ich ein paar gute „Boah!“ und Lacher rausgeschossen hab, so schlecht kann er also gar nicht gewesen sein. Auch dem Design Tagebuch muss ich zustimmen, die visuelle Gestaltung des Intros war großartig (meine Lieblingsvokabel zur Zeit) und die typographischen Lösungen um die Stadtnamen einzublenden war sehr schön gemacht.

Wirklich innovativ war Ein Quantum Trost nicht, das hatte Casino Royale ja schon erledigt, der die Story von James Bond vor jegliche Bond-Filme legte und einen kaputten und gebrochenen Bond zeigte. Natürlich gibts wieder Verfolgungsjagden, Schießereien und schöne Frauen. Wirkliche Highlights habe ich nicht feststellen können. Trotzdem kann man ihn sich angucken und wird bestens unterhalten.

Bestenfalls werde ich ihn mir nochmal anschauen um mir eine Meinung zu bilden.

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.