ek

Beiträge zum Thema JS, HTML, CSS & anderem Kram

Da das Wetter heute ganz passabel war, habe ich die Gelegenheit genutzt und bin mit der Kamera durchs herbstliche Hannover spaziert. Immerhin hängt das bunte Laub nicht ewig an den Bäumen. Und bevor es auf den Straßen vermodert und zur tödlichen Gefahr für Rentner und Besoffene wird, die darauf ausgleiten, wollte ich es auf jeden Fall nochmal fotografiert haben.

Die Ergebnisse werde ich euch natürlich nicht vorenthalten:

Platanen im Sonnenlicht

Begrenzungsschilder an einer Baustelle

Gingkobaum vor Häuserwand

Parkbank im Laub

Wiese voller Laub

Kette über Laub

Baum vor Häuserwand mit Fenstern

Wie immer öffnet sich die Lightbox, wenn ihr auf die Fotos klickt, und offenbart die Fotos in größerer Auflösung.

"Last Suppers" ist eine Foto-Serie von James Reynolds, welche die Henkersmahlzeiten von Todeskandidaten dokumentiert.

Last Supper - Chicken Wings mit Pommes-Frites

Last Supper - Häagen-Dasz

Last Supper - Olive

Last Supper - Zigaretten

Skurrile Sammlung. Nun weiß man zwar nicht, wie James Reynolds die Auswahl getroffen hat, es fällt jedoch auf, dass opulente Mahlzeiten, wie man es sich beim Stichwort Henkersmahlzeit immer in Gedanken ausmalt, nicht dabei sind.

Gefunden bei TheJunction

Social Icon-Bar mit jQuery

Um meine Besucher auf meine diversen Profile in Social Communities aufmerksam zu machen, habe ich rechts in der Sidebar eine Social Icon Bar installiert, deren Icons bspw. auf Flickr und Xing verweisen. Und damit das nicht so langweilig ist, habe ich den Spaß noch ein wenig mit jQuery befeuert.

Jetzt möchte ich kurz erläutern, wie das geht. Als erstes brauchen wir ein passendes Icon-Set. Ich habe für dieses Tutorial auf die Matte Black Social Media Icons zurückgegriffen, da diese Sammlung u.a. auch ein Xing-Icon beinhaltet. Die Icons bringen wir nun in einem Grafik-Programm mithilfe des Crop-Tools auf die gewünschte Größe, in meinem Fall 40x40 Pixel.

Icon mit dem Crop-Tool auf die richtige Groesse bringen

Das machen wir mit allen Icons, die wir benötigen. Danach widmen wir uns dem HTML-Teil:

HTML
<ul id="iconbar">
	<li>
		<span class="s1"></span>
		<span class="s2"></span>
		<span class="s3"></span>
		<span class="s4"></span>
		<a href="http://name.tld/feed/" title="Den RSS-Feed abonnieren">
			<img src="images/rss.png" alt="Den RSS-Feed abonnieren" width="40" height="40" title="Den RSS-Feed abonnieren" />
		</a>
	</li>
</ul>

Basis ist eine ungeordnete Liste. Der Übersichtlichkeit halber habe ich nur einen Listenpunkt angegeben. Die Liste kann natürlich beliebig erweitert werden. Innerhalb der Listenelemente sind vier span-Elemente. Diese bilden die Abdeckungen des jweiligen Icons, welche ähnlich einer Blende zu allen Seiten wegfahren, wenn man mit dem Cursor drüber geht.

Als nächstes kommt der jQuery-Teil:

JavaScript
jQuery(function ($) {
	$('body').addClass('js_active');
	$('#iconbar li').each(function(i) {
		$(this).hover(function() {
			$('span.s1', this).stop().animate({'left' : '-20px'}, {queue:false,duration:500});
			$('span.s2', this).stop().animate({'top' : '-20px'}, {queue:false,duration:500});
			$('span.s3', this).stop().animate({'right' : '-20px'}, {queue:false,duration:500});
			$('span.s4', this).stop().animate({'bottom' : '-20px'}, {queue:false,duration:500});
		}, function() {
			$('span.s1', this).animate({'left' : '0'}, {queue:false,duration:500});
			$('span.s2', this).animate({'top' : '0'}, {queue:false,duration:500});
			$('span.s3', this).animate({'right' : '0'}, {queue:false,duration:500});
			$('span.s4', this).animate({'bottom' : '0'}, {queue:false,duration:500});
		});
	});
});

Als erstes fügen wir dem body-Element die Klasse "js_active" hinzu. Dadurch werden die span-Elemente sichtbar. So ist dafür gesorgt, dass die Social Icon Bar auch ohne Effekt funktioniert, wenn der Besucher JavaScript deaktiviert hat. Als nächtes wird mit der each()-Funktion auf die einzelnen Elemente der ungeordneten Liste zugegriffen. Fährt der Besucher mit dem Cursor über eines der Listen-Elemente, fahren die span-Elemente ausgelöst durch die animate()-Funktion von jQuery in die jeweils vorgegebene Richtung. Der Wert 500 gibt an, dass dieser Vorgang eine halbe Sekunde dauern soll. Bewegt man den Cursor vom Listen-Element weg, gehen die span-Elemente wieder in ihre Ausgangsposition.

Zum Schluss muss das ganze natürlich noch ansprechend mithilfe von CSS ausgerichtet werden:

CSS
#iconbar {
	clear: left;
	overflow: hidden;
	list-style: none;
}

#iconbar li {
	width: 40px;
	height: 40px;
	margin-right: 10px;
	float: left;
	position: relative;
	overflow: hidden;
	border: 1px solid #999;
	-moz-border-radius: 2px;
	-khtml-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}

#iconbar li span {
	display: none;
}

body.js_active #iconbar li span {
	display: block;
	width: 20px;
	height: 20px;
	position: absolute;
	background-color: #FFF;
	opacity: 0.7;
	cursor: pointer;
}

.s1 {
	left: 0;
	top: 0;
}

.s2 {
	top: 0;
	right: 0;
}

.s3 {
	right: 0;
	bottom: 0;
}

.s4 {
	bottom: 0;
	left: 0;
}

Die Listen-Elemente sind 40 Pixel breit und hoch, und werden nach links gefloated. Wichtig beim Listen-Element sind die Angaben position: relative;, damit die darin liegenden span-Elemente absolut positioniert werden können, und overflow: hidden;, damit die span-Elemente beim Mouseover auch wirklich verschwinden. Zusätzlich geben wir den Listen-Elementen noch eine leichte Eckenrundung mit.

Die span-Elemente sind durch die CSS-Angabe display: none; eigentlich unsichtbar. Ist JavaScript allerdings im Browser des Besuchers aktiviert, bekommt das body-Element die Klasse "js_active" hinzugefügt und es greift die darunter liegende Stylesheet-Angabe. Die span-Elemente sind nun 20x20 Pixel groß und absolut positioniert. Durch die Angabe opacity: 0.7; werden sie außerdem leicht durchsichtig und geben einen Blick auf das dahinter liegende Icon frei. Durch die Angabe cursor: pointer; wird der Cursor schon beim Überfahren der span-Elemente zur - für Links charakteristischen - Hand. Das erhöht die User Experience.

Zum Schluss werden die einzelnen span-Elemente noch positioniert und schon ist die Social Icon Bar fertig. Ihr könnt sie wie ich in die Sidebar integrieren oder unter jeden Blog-Eintrag für die Bookmark-Links. Möglichkeiten gibt es wie immer viele.

Solltet ihr noch Fragen haben oder Probleme auftreten, nutzt die Kommentar-Funktion und scheut euch nicht, mir Fragen zu stellen. Ansonsten danke ich für eure Aufmerksamkeit und - falls euch der Artikel gefallen hat - würde mich freuen, wenn ihr ihn einschlägigen Bookmark-Diensten zuführt.

(direktTattoo)

Ich hätte ja nie gedacht, dass ich in meinem Leben noch ein Flickr-Video einbinden würde, doch jetzt ist es tatsächlich passiert. Und zwar lässt sich Dabe Alan eine Vintage-Kamera auf den Unterarm tätowieren und gleichzeitig im Stop/Motion-Verfahren filmen. Das sieht sehr beeindruckend aus und ich frage mich, wie er den Tattoo-Master davon überzeugen konnte, alle 30 Sekunden(?) die Nadel wegzunehmen und Platz für die Kamera zu machen?

Kann mir aber auch egal sein. Das Video ist fein und der Tattoo-Reigen soll am 8. November weitergehen. Es lohnt sich also, danach mal wieder bei Dabe Alan vorbeizuschauen, ob die Fortsetzung schon hochgeladen ist.

Gefunden bei Kraftfuttermischwerk

Jack Wolfskin-Logo entfernen

Seit ein paar Tagen versucht mal wieder eine Firma ihre Marke zu schützen und reitet sich damit nach allen Regeln der Kunst in die Scheiße. Wer das mediale Echo verfolgt hat oder sich nicht zu schade war, den Titel dieses Beitrags zu lesen, weiß um welche Firma es geht: Jack Wolfskin. Dieses Unternehmen produziert Lifestyle-Outdoor-Klamotten größtenteils für Leute, die mit Wetter in Berührung kommen, wenn die Tiefgarage voll ist und sie vor dem Haus parken müssen.

Aber darum geht es nicht, sondern darum, dass Menschen abgemahnt werden, die bei Dawanda Produkte verkaufen, auf die bspw. eine Pfote gestickt ist, die der Jack-Wolfskin-Pfote ähnelt. Das ganze geht natürlich mit Gebühren von knapp unter 1000 Euro einher. Nun hat Jack Wolfskin eine Stellungnahme veröffentlicht.

Deren Kernaussagen lassen sich wie folgt zusammenfassen:

  • Natürlich bedauert Jack Wolfskin den Vorfall. An deren Stellen würde ich nach den Wellen, die diese Sache geschlagen hat, auch im Selbstmitleid versinken.
  • Die Aktion war reine Selbstverteidigung. Zwar kann man die Anzahl der Leute, die jene Produkte mit der "geklauten" Jack-Wolfskin-Tatze darauf kaufen, wahrscheinlich an zwei Händen abzählen, aber trotzdem wiegt der Image-Schaden schwer. Nicht zu vergessen die unzähligen Nachahmer, die sich durch Stick- und Häkelware ermutigt sehen.
  • Trotzdem darf jeder Pfoten-Symbole benutzen, wenn diese nur nicht der Jack-Wolfskin-Tatze zu ähnlich sehen. Mir kommen die Tränen. Diese Geste ist an Generösität nicht zu überbieten. Vielen Dank, Jack Wolfskin!

Dazu fällt mir ein, dass ich einmal Post von der Rechtsabteilung von Nivea bekam. Ich hatte eine Domain registriert, auf die sie gemäß Markenschutzrecht Anspruch hatten. Es entstand ein kurzer, höflicher Briefwechsel, ich habe die Domain überschrieben - und das wars. Ohne Rechnung für entstandene Kosten. Man kann das also auch anders regeln. Höflich, indem man mit Menschen redet und so auftritt, dass man die - ach so schützenswerte Marke - nicht innerhalb von drei Tagen komplett in den Dreck zieht.

Mehr zum Thema:

Foto: Removing Jack Wolfskin Logo unter Creative Commons-Lizenz


Update 29. März 2013:

Auf dem letzten ConventionCamp (2013) erzählte ein Verantwortlicher von Jack Wolfskin bezüglich obigen Falles noch, dass seinerzeit eine Verkettung ungünstiger Faktoren stattgefunden hätte und die Angelegenheit dadurch eine negative Dynamik bekommen hätte. Man sei intern selbst nicht glücklich mit dem Fall gewesen und wolle es zukünftig besser machen.

Scheinbar wurden die Strukturen bei Jack Wolfskin jedoch nicht vollständig durchbrochen, wie die neuerliche Abmahnung gegen die Macher des "Fünf Freunde"-Films zeigt. Zwar muss man zugestehen, dass dieses mal eine Konfrontation auf ungefährer Augenhöhe stattfindet und nicht blindlings Privatpersonen abgemahnt werden. Doch wie der Marketing-Blog so treffend feststellt, drängt sich einem der Eindruck auf, Juristen wären bei Jack Wolfskin mit der Markenführung betraut. Und das mit zweifelhaftem Erfolg.

Sicherlich ist es nicht von der Hand zu weisen, dass man als Unternehmen beim Schutz seiner Marke eine gewisse Konsequenz an den Tag legen muss, um die Ansprüche an die Marke nicht zu verlieren. Aber im Falle von Jack Wolfskin hat sich das meines Erachtens zu einer unendlichen Geschichte voller Missverständnisse entwickelt. Um ehrlich zu sein, habe ich das Gefühl, dass hier ein Re-Branding angebracht wäre. Und zwar mit einer weniger generischen Bildmarke.

Das wäre zwar mit erheblichen Kosten verbunden, aber letztlich ist das der Schutz der bisherigen Bildmarke auch.

Abschreckende LEGO-Werbung

Wenn man an LEGO denkt, denkt man automatisch an die sympathischen kleinen Plastik-Figuren mit den klobigen Köpfen, an bunte Steine und an ein Spielzeug, welches nicht nur Jung und Alt fasziniert, sondern das auch über einen langen Zeitraum Spaß macht und einfach nicht langweilig wird. Auf dieses bunte, fröhliche Image baut LEGO auf und wohl u.a. deshalb, standen sie noch 2007 auf Platz 1 der Liste der am meisten respektierten Unternehmen der Welt (Link zum PDF der Studie).

Doch scheinbar konnte die von LEGO beauftragte Agentur nichts mit dem Saubermann-Image anfangen und setzte stattdessen auf Abschreckung und Schockierung. Man sollte seine Kinder also nicht Fernseh gucken lassen, sonst enden sie als Junkies. Und was sollen dann die Nachbarn denken! Dann doch lieber LEGO, damit aus dem Nachwuchs wertvolle Mitglieder unserer Gesellschaft werden.

Was für ein plumpe Milchmädchenrechnung. Wie kann man seine Marke nur so von einer Agentur verheizen lassen und dafür auch noch bezahlen? Ich kann ja verstehen, wenn man die ausgetretenen Pfade mal verlassen möchte. Trotzdem darf man nicht aus den Augen verlieren, worum es geht: Um Spielzeug. Und kein Therapiemittel für chronisch vernachlässigte Kinder und Jugendliche. Auch wenn es das hier und dort sicherlich ist.

Mehr Bilder gibt es übrigens bei meetinx.

Gefunden bei Design Tagebuch

(direkt Stylophones)

Zugegeben, der Titel ist ziemlich bräsig. Aber das sind die beiden Typen von BrettDomino auf ihre Weise auch. Das soll allerdings nicht abwertend gemeint sein, da ihre Performance wirklich Charme hat.

Die Teile, auf denen sie rumtippen, heißen Stylophones und wurden in den 60ern als Heimorgel für jedermann erfunden. Wie der Kollege am Mic aber anmerkt, hat er ein Programm entwickelt um die Sounds editieren zu können. Es ist also Essig mit Orgel-Sounds und stattdessen gibt es knallharte Beats.

Auf jeden Fall ist das ganze eine feine Sache und ich bin drauf und dran, mir selbst so ein Stylophone zu kaufen. Einfach nur, um mich an der Anwesenheit dieses exotischen Instruments zu erfreuen und es dann im irgend einem Schrank verstauben zu lassen.

Contaflex - Kamera

Das ist definitiv die Nachricht des Tages! Genau genommen sogar der Woche. Eigentlich des Monats, doch der Oktober ist noch jung, weshalb ich mich hier jetzt nicht aus dem Fenster lehnen möchte. Aber kommen wir zur eigentlichen Neuigkeit:

Auf OrphanCameras.com kann man die Handbücher für 3500 Kameras jedweder Marke kostenlos runterladen. Sogar für meine alte Contaflex (siehe oben), welche ich mal aus einer Laune heraus bei eBay geschossen habe, gibt es eine Anleitung.

Vielen Dank an den Stilpir.at für diese Info.

Punch-Camera

Matty Martin, ein Design-Student aus San Francisco, hatte die Idee zur Punch-Camera, der Polaroid des neuen Jahrtausend nur mit weniger Chemie. Und zwar funktioniert diese folgendermaßen:

Punch-Camera - Anleitung

Man macht ein Foto, steckt ein Blatt Papier oder dünne Pappe zwischen die Punch-Camera, haut ordentlich drauf und schon ist das geschossene Foto als gerastertes Bild in das Papier gestanzt. Außerdem werden auch die Meta-Daten mit gedruckt, so dass man das Bild mit der Suchmaschine seiner Wahl im Internet suche kann, so es denn jemand hochgeladen hat.

Diese Kamera ist genial. Die Sache mit den Meta-Daten kann man sich meiner Meinung nach in die Haaren schmieren, aber mal eben "on-the-fly" ein gerade geschossenes Foto in gerasterter Form in alles entfernt papier-ähnliche stanzen zu können, ist ein Traum. Es gibt viel Spielzeug und Blödsinn da draußen, den man gerne hätte und nicht brauch - aber diese Kamera würde ich mir wirklich kaufen. Hoffentlich geht die in Serie.

(Gefunden bei diskursdisko)