Das Setup – Wer nutzt welches Equipment
Der Admartinator hat ein interessantes neues Projekt gestartet: Das Setup.
Dies ist eine an the setup angelehnte Interview-Reihe, in der Nerds und Nerdesses erzählen, was sie machen, welches Equipment und welche Software sie dafür benutzen, und wie ihr Traum-Setup aussieht. Ein schöner Blick über den Tellerrand, da jeder seinen eigenen Stil beim Einrichten und Organisieren des Desktops hat - ob nun real oder virtuell.
Und weil ich die Idee so gut finde, habe ich mich auch gleich selbst den Fragen gestellt. Das einzige was in der noch jungen Liste allerdings fehlt sind die weiblichen Vertreter der Geek-Zunft. Entweder gibt es sie nicht oder - was ich für wahrscheinlicher halte - ihnen fehlt der nötige Selbstdarstellungsdrang. Aber gut, noch ist ja nicht aller Tage abend.
Auf jeden Fall empfehle ich dort mal vorbei zu gucken. Die Sammlung an Interviews wächst stetig.
Lost – Was passierte nach der Bombenexplosion?
Spoiler-Gefahr!
Letzte Woche lief ja die sechste und finale Staffel von Lost an und ich hatte das Vergnügen, die erste Doppelfolge sehen zu können. Zur Erinnerung: Am Ende der 5. Staffel zündet Juliette die Bombe im Bohrschacht der zukünftige Schwanen-Station mit ein paar beherzten Steinschlägen. Daraufhin präsentiert sich dem geneigten Zuschauer in Season 6 eine Parallelwelt, in der der Oceanic-Flug 8-15 nicht abgestürzt ist und die Protagonisten alle munter nach L.A. fliegen.
Außerdem gibt es die bisherige Welt, in der Juliette, Sawyer, Hurley, Sayid, Jack, Kate, Jin und Miles nach der Detonation der Bombe im Jahr 2007 aufwachen - mit einem leichten Fiepen auf den Ohren, zurück aus der Vergangenheit. Und das ist der Punkt, der mir nicht einleuchten will.
Wenn ich das richtig verstehe, sind sie an der gleichen Stelle in der gleichen Welt - nur 30 Jahren später. Die Detonation hat also stattgefunden. Daher auch das Fiepen auf den Ohren. Nur müsste dann anstatt des Bohrschachts und des ganzen Stahlgerümpels, welches kurz vor der Explosion vom magnetischen Gestein im Schacht angezogen wurde, nicht ein Bombenkrater dort sein?
Die Bombe, die die Protagonisten dort hingebracht haben, war der Zünder einer Wasserstoffbombe - ergo eine Atombombe. Das wiederum bedeutet, dass direkt neben Juliettes Gesicht zum Zeitpunkt der Detonation für einen kurzen Augenblick Temperaturen von mehreren Millionen Grad geherrscht haben. Nun wurde sie zwar durch die Zeit gebeamt, aber alles andere dort in dem Schacht hätte verdunstet sein müssen.
Letztendlich stellt sich die Frage: Handelt es sich um einen logischen Fehler oder einfach ein weiteres Rätsel? Gibt es vielleicht drei Parallelwelten und in einer sind die Protagonisten in der Atombombenexplosion umgekommen??
Hover- und Spotlight-Effekt in Bildergalerie mit jQuery
Jede Bildergalerie gewinnt, wenn das Thumbnail-Bild unter dem Cursor durch einen Hover-Effekt hervorgehoben wird und der Nutzer weiß, was gerade Sache ist. Wenn die umliegenden Thumbnails dann auch noch durch einen Spotlight-Effekt abgedunkelt werden, ist es noch leichter für den Nutzer, sich auf das aktuelle Bild zu konzentrieren. Wie man das mit jQuery realisiert, zeige ich jetzt.
Als erstes der HTML-Teil:
HTML
<body class="js">
<div class="wrap">
<a href="path/to/image.html" class="image">
<img src="path/to/image.jpg" alt="" />
</a>
<a href="path/to/image.html" class="image">
<img src="path/to/image.jpg" alt="" />
</a>
<a href="path/to/image.html" class="image">
<img src="path/to/image.jpg" alt="" />
</a>
</div>
</body>
Als nächstes der CSS-Teil:
CSS
.wrap {
width: 321px;
height: 321px;
padding: 20px 0 0 20px;
margin: 30px auto;
clear: left;
}
.image {
width: 77px;
height: 77px;
padding: 5px;
margin: 0 20px 20px 0;
float: left;
display: inline;
position: relative;
z-index: 10;
background-color: #CCC;
}
.js .image:hover {
background-color: #36F;
}
.image img {
position: relative;
z-index: 30;
border-width: 1px;
border-style: solid;
border-color: #666 #999 #999 #666;
}
.layer1, .layer2 {
display: block;
position: absolute;
}
.layer1 {
width: 87px;
height: 87px;
top: 0;
left: 0;
z-index: 20;
background-color: #36F;
}
.layer2 {
width: 77px;
height: 77px;
top: 5px;
left: 5px;
z-index: 40;
background-color: #000;
}
Kleine Anmerkung dazu: Wenn JavaScript im Browser aktiviert ist, wird die Klasse js vom body-Tag entfernt. Geschieht dies nicht, bekommt das a-Tag um die Thumbnails einen :hover-Effekt.
Schlussendlich der jQuery-Teil:
JavaScript
jQuery(document).ready(function($) {
$('body').removeClass('js');
var image = $('a.image');
var html = '<span class=\"layer1\"></span><span class=\"layer2\"></span>';
image.append(html).find('span').css('opacity', '0');
image.each( function() {
$(this).hover( function() {
$('span.layer1', this).stop().fadeTo(800, 1);
$(this).siblings().find('span.layer2').stop().fadeTo(800, 0.5);
}, function() {
$('span.layer1', this).stop().fadeTo(800, 0);
$(this).siblings().find('span.layer2').stop().fadeTo(800, 0);
});
});
});
Als erstes wird die Klasse js vom body-Tag entfernt. Danach werden die beiden span-Tags eingefügt, die für den Hover- und den Spotlight-Effekt zuständig sind. Danach wird in einer each()-Schleife festgelegt, dass bei einem Hover die span-Tags erscheinen und entsprechend wieder verschwinden.
Das war es auch schon. Falls es Fragen oder Probleme gibt, möchte ich euch wie immer die Kommentar-Funktion nahe legen. Ansonsten freue ich mich natürlich, wenn ihr den Artikel bookmark't oder auf twitter verbreitet.
WordPress-Statistik-Smiley verbergen
Das Statistik-PlugIn WordPress.com Stats ist sicherlich praktisch. Vom Umfang her eher rudimentär, doch um schnell mal im Backend zu checken, was die Besucherzahl sagt, genau richtig.
Das einzige was störend sein kann, ist das kleine Smiley, das im Blog erscheint, wenn das PlugIn aktiv ist. Doch das wird man mit vier Zeilen CSS ganz schnell los:
CSS
#wpstats {
height: 0;
visibility: hidden;
}
Nun ist das Bild verschwunden, wie es sich für einen "Zähl-Pixel" gehört, verrichtet jedoch weiter seinen Dienst.
Lightbox in Aperture-Bildergalerie einbauen mit jQuery
Aperture ist eine Photo-Editing-Software von Apple™, welche die Möglichkeit bietet, Galerien zu erstellen und im HTML-Format zu exportieren. Diese Funktion kann ich aufgrund des generierten Quelltextes nicht empfehlen, nichtsdestominder ist sie sehr praktisch für Leute, die schnell eine Galerie veröffentlichen wollen, jedoch kein HTML können.
Ein weiteres Manko ist der Umstand, dass jedes Foto eine eigene Unterseite bekommt und man sich an diesen entlang hangelt. Heutzutage allerdings - möchte ich behaupten - ist eine Lightbox Standard, wenn es um das Betrachten von Fotos im Browser geht. Deshalb möchte ich zeigen, wie man mithilfe von jQuery und einem PlugIn diese Funktionalität relativ schnell nachrüsten kann.
Als erstes benötigen wir das PlugIn jQuery lightBox. Wir entpacken das Zip-File und legen den js-Ordner, den css-Ordner und den images-Ordner aus dem jquery-lightbox-0.5-Ordner in dem aus Aperture exportierten Galerie-Ordner ab.
Nun muss das PlugIn eingebunden werden und zwar innerhalb der <head>-Tags der index.html der Galerie. Als erstes die beiden JavaScript-Dateien und das Stylesheet:
HTML
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.pack.js"></script>
Mit folgendem JavaScript-Code aktivieren wir die Lightbox:
JavaScript
$(document).ready( function() {
$('dd.imagecell a').lightBox();
});
Nun ergibt sich allerdings das Problem, dass das Lightbox-PlugIn darauf angewiesen ist, dass die Links um die Thumbnails der Fotos auf die große Version der selben verweisen. Dies tun sie in der Aperture-Galerie allerdings nicht. Vielmehr verweist der Link auf die Unterseite, auf der die große Version des Fotos eingebunden ist. Die Links müssen also erst noch manipuliert werden, bevor die Lightbox funktioniert:
JavaScript
$(document).ready( function() {
var link = $('dd.imagecell a');
link.each( function(i) {
i += 1;
$(this).attr('href', 'pictures/picture-' + i + '.jpg');
});
});
Mit diesem JavaScript-Code werden die Verweise auf den Thumbnails auf die großen Versionen der jeweiligen Fotos umgelenkt. Alles in allem muss man also folgendes in den <head>-Bereich der index.html schreiben:
HTML/JavaScript
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.pack.js"></script>
<script type="text/javascript">
$(document).ready( function() {
var link = $('dd.imagecell a');
link.each( function(i) {
i += 1;
$(this).attr('href', 'pictures/picture-' + i + '.jpg');
});
link.lightBox();
});
</script>
Schon habt ihr mit etwas jQuery eine moderne Lightbox in eure Aperture-Galerie eingebaut.
Noch ein Hinweis am Rande: Die Pfade zum Warte-Bild, den Pfeilen und dem Close-Button sind in der lightbox.js festgelegt. Wenn ihr den images-Ordner also nicht im Galerie-Ordner ablegt, sondern bspw. darunter, müsst ihr diese Pfad-Angaben ändern, sonst wird die Lightbox nicht richtig angezeigt.
Ansonsten gilt wie immer: Wenn es Fragen gibt, nutzt die Kommentar-Funktion!
Weiterführende Links:
Kommunikationsschwierigkeiten
Ich: 'Tschuldigung, weißt du, wann es hier Essen gibt?
Konfirmand: Drüben, in dem anderen Gebäude, wenn du rauskommst links und dann hinten im Erdgeschoss.
Ich: Nee, ich meine wann??
Konfirmand: Ach so, Erbsensuppe!
Ich: Nein, wann???
Konfirmand: Ach so! Ich glaube um halb eins.
Ich: Danke!
Das Mortadella-Buch von Christoph Hänsli
Gerade noch war ich bei Da Giorgio und habe mir eine schmackhafte Mortadella-Bemme geschossen, schon läuft mir das Mortadella-Buch von Christoph Hänsli über den Weg. Das ist ein Zeichen - ich soll darüber bloggen. Und das tue ich hiermit auch.
Für sein Mortadella-Buch hat Christoph Hänsli eine Mortadella-Wurst der Länge nach in 332 Scheiben aufgeschnitten und jede einzelne gemalt. Das ganze ergibt laut Amazon-Produktbeschreibung ein hypnotisches Universum zwischen meditativen Mortadella Mandalas und sich langsam verändernden, zartrosa Sternbildern. Dem ist wohl nichts mehr hinzuzufügen.
Hier gibts das Buch: Mortadella-Buch
Gefunden bei den Blog-Rebellen
Weiterführende Wurstlinks:
- Das Wurstplakat von Christoph Hänsli
- Wurst-Wallpaper auf Phase 5
- Die Plüschwürste von aufschnitt.net
- Der Dauerbrenner: Wurstteppich
Schnee in Hannover
Der Winter lässt sich dieses Jahr nicht lumpen und beschert Hannover eine Schneedecke, die es in der Dicke wohl noch nicht gegeben hat, seit ich das Wort Schnee buchstabieren kann. Alles Grau verschwindet unter einem Weiß und der Lärm der Stadt wird zumindest eine Zeit lang durch den fluffigen Belag gedämpft.
Die perfekte Gelegenheit meine neue Kamera zu testen und die Schneemengen fotografisch festzuhalten. Sonst glaubt uns das doch später keiner. Nachfolgend ein paar Bilder, die ich einerseits tagsüber und andererseits nachts gemacht habe, und die allesamt entsättigt und hart im Kontrast angezogen sind.
Die Ortsfeuerwehr Hannover-Linden bei Nacht und im Schnee.
Das Kestner-Museum Hannover im Schnee.
Verschneite Stadtvilla in Hannover-Linden.
Schnee auf den Dächern des Neuen Rathauses von Hannover.
Schneebedeckte Straße in Hannover-Linden bei Nacht.
Wie immer aktiviert ihr die Lightbox, wenn ihr auf die Fotos klickt, und könnt diese so in voller Auflösung betrachten. Es sei denn, ihr sitzt am Feedreader, dann ist Essig mit Lightbox.
Frohe Weihnachten
Frohe Weihnachten und einen guten Rutsch allerseits!
Aus gegebenem Anlass hier nochmal eins der besten Weihnachtslieder überhaupt. Ich habe mich dabei für die Top-of-the-Pops-Version entschieden, weil ich es äußerst charmant finde, wie sich die beiden da auf der Bühne zu Voll-Playback einen abbrechen, ihre Augenringe hinter Riesen-Sonnenbrillen verstecken und an den Nachwehen der vergangenen Silvester-Nacht laborieren. 
In diesem Sinne ein besinnliches Fest und ich verspreche, dass hier im neuen Jahr mal wieder etwas mehr los ist.
Die musikalische Aufarbeitung des Nikon vs. Canon-Konflikts
Abgesehen von ein paar verirrten Seelen, die Pentax- oder Sony-Kameras haben, einigen Neureichen, die zu Leica greifen, und einer Schar Exoten, die mit Lomos, Holgas und kruden analogen Spezialformaten rumexperimentieren, haben die meisten Leute entweder eine Nikon oder eine Canon. Dies sind die beiden großen Player auf dem Markt und die Frage, zu welcher Marke man greift, will wohl bedacht sein, denn man legt sich auf ein Lager fest.
Ich selbst bin überzeugter Nikon-Nutzer, habe jedoch Leute im Freundeskreis, die Canon bevorzugen. Das kann schonmal problematisch sein. Denn eigentlich sind diese Leute menschlich voll okay, bloß wenn es um die alte "Nikon vs. Canon"-Frage geht, kochen die Gemüter hoch. Und Hand aufs Herz: Wer Canon nutzt, muss irgendwas falsch verstanden haben. Da bin ich mir sicher.
Zum Glück gibt es jetzt einen Song, der diesen Konflikt anhand einer Romeo & Julia-Story thematisiert und es vielleicht schafft, für etwas Verständnis bei den verfeindeten Lagern zu sorgen.
- Den RSS-Feed abonnieren
- Zum Xing-Profil von Emanuel Kluge
- Zum Twitter-Profil von Emanuel Kluge
- Zum Flickr-Stream von Emanuel Kluge
Über den Autor
Mein Name ist Emanuel Kluge, ich studiere Wirtschaftswissenschaften an der Leibniz Universität Hannover und nebenbei arbeite ich als selbständiger Web-Designer.
Auf diesem Blog schreibe ich rund um die Themen, die mich interessieren, wie Web-Design-Gedöns, Fotografie, Musik und all die Kuriositäten, die das Netz tagtäglich für einen bereithält.
Wenn Dir meine Beiträge gefallen, abonnier doch den RSS-Feed. Bei Fragen, schreib einen Kommentar oder nutze das Kontaktformular.
Ansonsten wünsche ich Dir viel Spaß beim Lesen.
Kurzmeldungen
- RT @Falafel_Schah: so, der shop ist online. ab jetzt könnt ihr euch eigene falafel-schah-shirts kaufen: http://klg.bz/p #
- jemand ist über die suchanfrage "wo koks berlin" auf meinen blog gekommen. er wird enttäuscht gewesen sein... :·) #
- hatte leider nur samstag zeit für das #sca10, aber es war trotzdem gut. vielen dank für die veranstaltung - gerne wieder! #AAA :-) #