ek

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

Aufgrund einer Schlafrhythmusverschiebung, die mittelbar etwas damit zu tun hatte, dass irgendwo mäßige Musik lief, ich trotzdem hingegangen, und wider Erwarten ziemlich lange geblieben bin, hat es mich letzten Sonntag gegen Mitternacht nach draußen auf eine kleine Fototour getrieben. Und weil ich keine Lust hatte das schwere Stativ zu schleppen, habe ich mal geguckt, was man aus dem Restlicht da draußen machen kann.

Dafür musste natürlich das 50mm/f1.4 auf die Knipse. Im manuellen Modus habe ich die Belichtungszeit auf 1/60 Sekunde festgezurrt, die Blende voll aufgerissen und die ISO-Zahl auf die maximal möglichen 1600 gestellt. Außerdem habe ich die Bilder im Raw-Format gemacht, um sie hinterher am Rechner noch ordentlich aufhellen zu können. Denn die Unterbelichtung ist trotz f1.4-Blende ein ständiger Begleiter nachts da draußen.

Übrigens habe ich die Bilder schwarz-weiß gemacht, da das Bildrauschen sonst nicht zu ertragen wäre. In s/w kommen sie allerdings ganz gut. Und hier sind einige Resultate (für Großansicht draufklicken):

Fahrräder und Mini Cooper in Hannover-Linden

Fußgängerüberweg in Hannover-Linden

Stopschild an Kreuzung in Hannover-Linden

Wikinger-Statue an Häuserwand

Zick-Zack-Linie auf Asphalt

Briefkästen vor der Lindener Post

Müll auf der Falkenstraße in Hannover-Linden

Motorroller vor der Kneipe Falkeneck in Hannover-Linden

So sieht das aus. Das nächste mal bewaffne ich mich aber auf jeden Fall mit dem Stativ, da die Beleuchtungsverhältnisse förmlich nach Farbfotos schreien.

designenlassen.de

Auf dem Fontblog wurde heute ein offener Brief von Stefan Maas an den Online-Dienst DesignenLassen.de veröffentlicht. (Link zu DesignenLassen.de)

Es geht darum, dass das Geschäftsmodell die Preise kaputt mache und den Stand der Designer generell schädige. In den Kommentaren fallen Begriffe wie "Ausbeutung" und "moderne Sklaverei", und wenn man sich das Konzept von DesignenLassen.de anguckt, hat man das Gefühl, dass das gar nicht so weit hergeholt ist.

Trotzdem finde ich, dass bei der Debatte oft zu kurz und zu emotional gedacht wird. Ich wollte deshalb einen Kommetar dort zurücklassen, der relativ schnell Ausmaße erreichte, die problemlos einen Blogpost hergeben. Deshalb veröffentliche ich ihn nun auch hier:

Generell gilt, wer mit Peanuts zahlt, bekommt Affen. Von daher werden in den meisten Fällen nur Unternehmen auf den Service von DesignenLassen.de zurückgreifen, die entweder nicht das nötige Geld für einen Designer haben oder es nicht ausgeben wollen. Diese Unternehmen würden alternativ wahrscheinlich gar kein "Design" kaufen.

DesignenLassen.de schöpft also die kleinen Beträge ab, wo unter normalen Umständen gar kein Geld fließen würde. Das wiederum würde ich grundsätzlich nicht als verkehrt bezeichnen.

Auf der anderen Seite bieten auf DesignenLassen.de doch nur Designer ihren Dienste an, für die diese Preise in Ordnung sind. Auf Leute, die professionell in diesem Bereich arbeiten, wird das grob geschätzt einfach nicht zutreffen. Vielmehr betätigen sich dort Menschen, die den Design-Kram nur hobby-mäßig nebenbei machen und nun die Möglichkeit haben, auch ein paar Euros damit zu verdienen, oder junge Designer, die noch einen Fuß in die Tür kriegen müssen.

Für letztere ist DesignenLassen.de sicherlich besser, als ein Jahr unbezahltes Praktikum in einer pseudo-hippen Werbeagentur. Und wenn man wirklich was von seinem Handwerk versteht, wird sich die Liste an Kontakten und Referenzen schnell füllen, so dass man früher oder später richtige Aufträge machen kann, von Auftraggebern, die ein wirklich individuelles Design wollen und bereit sind, den entsprechenden Preis zu zahlen.

Natürlich besteht die Gefahr, dass Leute angesichts des Angebotes von DesignenLassen.de auf den Trichter kommen, ein gutes Design wäre günstig zu haben, aber auch die werden merken, dass Qualität ihren Preis hat. Und alle anderen geben dann halt mal 100 Euro aus, anstatt das neue Firmen-Logo für umme vom Neffen machen zu lassen, weil der gut mit MS Paint um kann.

Deshalb mein Fazit: Ruhig bleiben und keine voreiligen Schlüsse ziehen und den Weltuntergang antizipieren. Wenn man mal nicht direkt den Teufel an die Wand malt, stellt sich DesignenLassen.de eher als Chance für Amateure, denn als Gefahr für Profis heraus.

Meine zwei Cents, vielen Dank.

Wie man SpOn heute entnehmen kann, fordert unsere Lieblingsfamilienministerin Frau von der Leyen Benimm-Regeln für das Internet.

Ziel es sei, gemeinsam mit den Verantwortlichen sowie jugendlichen Nutzern einen Verhaltenskodex zu entwickeln. Außerdem müssten minderjährige Internet-Surfer über die Gefahren des Netzes aufgeklärt werden - zum Beispiel darüber, "dass sich Erwachsene mit üblen Absichten in ihre Chats einschleichen können".

Nun ist es ja so, dass sogenannte "Nettiketten", die das höfliche und respektvolle Miteinander im Internet definieren, schon seit Jahren an allen Ecken und Enden des virtuellen Raums zu finden sind. Zusätzlich kann jeder auf seine eigene Sozialisation bezüglich Höflichkeit und Respekt bauen. Es ist also nicht so, dass die Leute den Browser anmachen und plötzlich zivilisatorisch auf einer Stufe mit den Neandertalern stehen (nichts gegen Neandertaler!).

Auch die nicht zu vernachlässigende Gefahr für Kinder und Jugendliche in Chats ist nichts vollkommen neues, sondern in gewisser Weise das virtuelle Pendant zum "zu Fremden ins Auto steigen". Und irgendwie scheinen die meisten Eltern ihren Kindern beibringen zu können, dass man das nicht tut, auch ohne überengagierte Familienministerinnen, die im Eifer des Wahlkampfs irgendwelche Verhaltenskodizes aufstellen müssen.

Trotzdem lässt es sich nicht verleugnen, dass im Internet häufig mal Leute über die Stränge schlagen und sich nach wie vor äußerst unkoschere Personen in den Chat-Räumen aufhalten. Doch wo liegt dann das Problem?

Könnte es vielleicht sein, dass Kinder allein gelassen bezüglich Internet? Dass Eltern ihnen zwar alles mitgeben, beim Aufwachsen in der realen Welt, sie aber beim Erfahren der virtuellen Welt sich selbst überlassen, da sie selbst keine Ahnung davon haben? Und wenn dem so ist, was bringt ein Wahlkampfgeschrei nach Benimm-Regeln im Internet, wenn die Generation, die dafür zuständig ist, die Werte der Gesellschaft an die nächste Generation zu vermitteln, auf einem riesigen Feld schlichtweg versagt?

Wir können alle möglichen Verhaltenskodizes unters Volk streuen, ändern wird sich allerdings erst etwas, wenn junge Menschen nicht mehr alleine in die virtuelle Welt stolpern, sondern wenn sie dabei an die Hand genommen werden von Menschen, die schon länger in dieser Welt zu hause sind und ihr Wissen und ihre Werte weitervermitteln können. Genauso, wie es seit Jahrtausenden in der realen Welt Standard ist.

Trotzdem danke, Frau von der Leyen, für ihr hohles "Ich nehme die Herausforderung Internet ernst"-Wahlkampf-Gebrabbel.

Weiterführende Links:

vodafone-blog

Die ganze #Vodafail/Twittermom-Geschichte ist eine Verkettung von Fehlern:

  • Ute Hamelmann schreibt einen platten PR-Text und verhökert damit ihre Glaubwürdigkeit.
  • Die PR-Verantwortlichen bei Vodafone freuen sich über einen Beitrag von jemandem mit Authentizität, denken aber nicht darüber nach, wie der Text bei der Zielgruppe aufgenommen werden könnte und ob die Authentizität der Verfasserin auch im Beitrag transportiert wird.
  • Ein wütender Mob fällt in den Kommentaren über den Beitrag her, selbstgerecht/-gefällig bis zur Unerträglichkeit und so unsachlich wie möglich.

Übrig bleibt ein neues Kunstwort - #Vodafail - und ein Paradebeispiel misslungener PR für die Lehrbücher. Keine schlechte Bilanz für einen Blog-Beitrag. Und da man davon ausgehen kann, dass Vodafone die Kampagne nicht einfach einstellen wird, darf man gespannt sein, was noch so kommt.

weezer - 8-bit-album

Von Pterodactyl Squad gibt es jetzt ein Weezer-8-Bit-Album zum kostenlosen Download.

Zwar kann man in den Kommentaren auf Nerdcore nachlesen, dass es Menschen gibt, die 8-Bit-Musik anstrengend finden, aber ich möchte jetzt hier noch einmal darauf hinweisen:

"8Bit" bedeutet nicht automatisch Lo-Fi und über den musikalischen Gehalt sagt das Attribut auch nichts aus. Weezer-8-Bit geht auf jeden Fall steil. Ich habe es durchgehört und werde es zeitnah wieder tun. Das gleiche kann ich euch empfehlen.

Zum Download

(via Nerdcore)

Southpark kostenlos online gucken

Jeder kennt sicherlich die Zeichentrick-Serie South Park, mit den vier juvenilen Protagonisten Eric Cartman, Kenny McCormick, Kyle Broflovski und Stan Marsh, die nicht nur unter physischen Gesichtspunkten betrachtet ein ziemlich großes Maul haben. Deren Abenteuer kann man ab jetzt kostenlos und in deutscher Sprache online unter www.southpark.de gucken. Das bedeutet 12 Staffeln spannender Abenteuer und derber Pöbeleien.

Weiterführende Links:

Nachtrag:

Die andere Seite der Medaille ist, dass man nicht mehr wie bisher die englischen Folgen unter www.southparkstudios.com gucken kann, due to copyright and other legal reasons. Das ist nervig und ärgerlich. Aber immer noch besser, als den Zugriff zu den englischen Folgen zu unterbinden, ohne eine Alternative zu bieten.

SyntaxHighlighter

Wer schon ein paar meiner Tutorials gelesen hat, wird sich sicherlich gefragt haben, warum meine Code-Schnippel so trostlos und schlicht aussehen. Das ist eine gute Frage, die ich mir auch schon des öfteren gestellt habe und bezüglich derer ich mich nun um eine Antwort bemüht habe:

Ich benutze den falschen Code Highlighter!

Schlicht und ergreifend. Bisher habe ich CodeSnippet benutzt, welches sicherlich gar nicht so vekehrt ist. Aber an die Zeilennummerierung und die alternierende Zeilenhintergrundfarbe des SyntaxHighlighters kommt es einfach nicht ran. Überhaupt wirkt der SyntaxHighlighter viel frischer und ist wohl auch deswegen verbreiteter.

Deswegen kommt er ab jetzt hier zum Einsatz. Ach ja, sollte ich die Toolbar bei den Code-Boxen aktivieren…?

Animierte Navigation mit jQuery

Dies ist eine Reiter-Navigation, bei der der aktive Reiter am Inhaltsbereich andockt und die inaktiven Reiter darüber schweben. Sozusagen ein Wink mit dem Zaunpfahl für den User. Damit die Benutzung noch ein bißchen geschmeidiger ist, docken die inaktiven Reiter am Inhaltsbereich an, wenn man mit dem Cursor über sie fährt. Für den Effekt nutze ich das JavaScript-Framework jQuery.

Als erstes wie gewohnt der HTML-Teil:

HTML
<ul>
   <li class="active"><a href="index.html">Home</a></li>
   <li><a href="about.html">About</a></li>
   <li><a href="contact.html">Contact</a></li>
</ul>

Eine schlichte, ungeordnete Liste. Wichtig ist jedoch, dass der aktive Reiter die Klasse active bekommt.

Als nächstes der CSS-Teil:

CSS
ul {
	width: 800px;
	height: 51px;
	padding: 0 0 0 10px;
	clear: left;
	list-style: none;
	background: url('pixel.gif') left bottom repeat-x;
}

li {
	width: auto;
	_width: 97px;
	height: 40px;
	float: left;
	display: inline;
	margin-right: 10px;
	text-align: center;
}

a {
	display: block;
	width: auto;
	height: 38px;
	padding: 0 10px;
	margin-bottom: 0;
	line-height: 38px;
	border: 1px solid #333;
	text-decoration: none;
}

a:link,
a:visited {
	color: #333;
	background-color: #EEE;
}

a:hover {
	color: #333;
	background-color: #FFF;
}

a:active {
	color: #666;
	background-color: #FFF;
}

.active a:link,
.active a:visited {
	margin-top: 11px;
	border-bottom-color: #FFF;
	background-color: #FFF;
}

.active a:hover{
	color: #666;
}

.active a:active {
	color: #999;
}

Da der Internet Explorer Höhen- und Breitenangaben flexibel handhabt, können wir das a-Element nicht einfach mit dem entsprechenden margin-Wert über das ul-Element hinaus schieben. Deshalb habe ich den unteren Rand des ul-Elements nicht mit einer CSS-border, sondern mit einer ein Pixel großen Grafik realisiert.

Des weiter befindet sich beim Teil für das li-Element die Angabe "_width: 97px". Das ist für den IE6, da dieser das li-Element bei der Angabe "width: auto" über die komplette Breite des Inhaltsbereich zieht.

Als nächstes kommen wir zum JavaScript-Teil:

JavaScript
if ( navigator.appName != 'Microsoft Internet Explorer' ) {
   $(function () {
      $('li').filter('[class=]').hover(function() {
         $('a', this).animate({ marginTop: '11px', color: '#CFF' }, 200).animate({ borderBottom: '1px solid #FFF' }, 1);
      }, function() {
         $('a', this).animate({ borderBottom: '1px solid #333' }, 1).animate({ marginTop: '0', color: '#EEE' }, 200);
      });
   });
}

Direkt am Anfang kommt eine Abfrage, ob es sich beim Browser des Nutzers um den Internet Explorer handelt. Dieser spuckt beim vorliegenden JavaScript-Code einen Script Error aus, was meinen Recherchen zufolge an der jQuery-Funktion animate() liegt. Leider konnte ich keine Lösung des Fehlers finden, weshalb die Navigation im Internet Explorer ohne jQuery mit reinem CSS auskommen muss.

Ansonsten ist der jQuery-Code-Schnippel schnell erklärt. Fährt man mit dem Cursor über ein in nichtaktives li-Element, wird das darin liegende a-Element animiert, fährt runter und bekommt einen weißen unteren Rand. Beim Verlassen des li-Elements mit dem Cursor, wiederholt sich das Spiel in umgekehrter Reigenfolge.

Zum Schluss bauen wir noch die entsprechenden Style-Angaben ein, um die Navigation für den Internet Explorer und Browser mit deaktiviertem JavaScript fit zu machen:

HTML/CSS
<!--[if IE]>
   <style type="text/css">
      a:hover {
         margin-top: 11px;
         border-bottom: 1px solid #FFF;
      }
   </style>
<![endif]-->
<noscript>
   <style type="text/css">
      a:hover {
         margin-top: 11px;
         border-bottom: 1px solid #FFF;
      }
   </style>
</noscript>

Fertig ist die animierte Navigation mit jQuery. Oben findet ihr den Link zu den Dateien. Bei Fragen oder Anregungen freue ich mich wie immer über einen Kommentar.

WordPress

Soeben hat WordPress die Version 2.8.1 seiner Blog-Software veröffentlicht. Neben ein paar Bugs wurde eine gravierende Sicherheitslücke geschlossen, die es Nutzern ermöglichte, auf die Einstellungen mancher PlugIns zuzugreifen, obwohl sie nicht die erforderlichen Rechte dafür besitzen.

Ein zügiges Upgrade wird also empfohlen.

Alle scheinen sich derzeitig über die neue Vodafone-Kamapgne aufzuregen. Das liegt zum einen sicher am Mitwirken von Sascha Lobo und zum anderen an Aussagen, wie diesen:

Die „Generation Upload“ ist Herr über ihre Zeit. Sie nutzt moderne Kommunikationstechnologien nicht als Selbstzweck, sondern vielmehr als Werkzeug zur Selbstverwirklichung. Es sind normale Menschen wie Du und ich. Und doch oder gerade deswegen sind sie die Helden von heute.

Ich selbst gehöre nicht zu den Sascha Lobo-Jüngern. Ich möchte sogar anzweifeln, dass er es schafft, die sogenannte "Generation Upload" am besten zu repräsentieren. Andererseits passt seine Frisur zur Corporate Identitiy von Vodafone und wenn sich nicht jeder, der den Werbespot sieht, mit ihm identifizieren kann, ist das sicherlich auch nicht tragisch.

Und was das Zitat anbelangt: Ich selbst habe vorhin in einem Kommentar auf Stylespion geschrieben, dass derartig anbiederndes Werbegeseier bei mir nicht die erwünschte Hoffnung entfalten wird. Allerdings ist das Zitat vom Vodafone-Blog und bestes PR-Deutsch. Sowas gehört zwar nicht unbedingt auf einen Corporate Blog, aber im Eifer des Gefechts passiert das schon mal. Schön blöd, aber kein Grund, die ganze Kampagne zu verurteilen.

Deshalb meine Meinung: Die Kampagne ist die ganze Aufregung nicht wert. Es gibt hippe Musik, hippe Leute, viele Farben und sogar eine Repräsentantin der Silversurfer. Das Rad wird nicht neu erfunden, es wird niemandem auf den Schlips getreten und von der Aufmachung unterscheidet sie sich nicht groß von früheren Kampagnen.

Warum also so ein Wind?!

Weiterführende Links: