ek

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

Der Tagesspiegel hat einen interessanten Artikel zum Thema Urheberrecht veröffentlicht, der große Resonanz in der Blogosphäre hervorgerufen hat. Dabei geht es um die Frage, welche Zukunft Urheber- und Verwertungsrechte in den Zeiten der Digitalisierung noch haben.

Natürlich wird auf die Unterhaltungsindustrie und jene Nutzer, die Musik, Filme, etc. illegal aus dem Internet herunterladen, eingegangen, aber am Rande tauchen auch die Künstler auf. Und um die geht es im Endeffekt. Zwar ist es schön, dass sowohl Industrie, als auch Konsumenten sich für das Wohl der Künstler einsetzen. Dass erste allerdings hauptsächlich ans Sichern ihrer Pfründe und letztere an eine Legitimation für ihr — noch? — illegales Verhalten denken, ist nicht sehr unwahrscheinlich.

Ohne die Künstler jedoch ist die ganze Diskussion um Urheberrechte und Verwertung überflüssig. Diese müssten sich also geschlossen entscheiden, welchen Weg sie gehen wollen: Den althergebrachten, anachronistischen, oder einen neuen, der dem Wandel Rechnung trägt. Das ist allerdings illusorisch, da es noch genug Profiteure des alten Systems gibt. Deshalb wird auch hier der Wandel langsam vonstatten gehen. Alte Spieler werden auf der Strecke bleiben und/oder das zeitliche segnen und neue das Ruder übernehmen.

Wo das hinführen wird, lässt sich schwer sagen. An das Verschwinden der Unterhaltungs- und Verwertungsindustrie glaube ich allerdings nicht. Auch nicht daran, dass die Künstler irgendwann die Hauptprofiteure ihrer Kunst werden. Denn eines ändert sich garantiert nicht: Künstler machen Kunst, weil sie Kunst machen wollen. Die Unterhaltungsindustrie bzw. ihre Akteure machen Geld, weil sie Geld machen wollen. Das klingt zwar ziemlich abgedroschen, aber mehr ist es im Endeffekt nicht.

Und ich glaube, dass sie gemeinsam das machen können, was machen wollen. Aber nicht mit dem bestehenden Urheber- und Verwertungsrechten, sowie dem darauf aufbauenden Geschäftsmodell. Um mit einem Wandel des Geschäftsmodells meine ich einen wirklichen Paradigmenwechsel und keine Verzweifelungstaten, wie das stetige Anheben der Ticketpreise auf Konzerten.

Wie Spiegel Online heute berichtet, wurde zum Schutz des durch die Taliban in Afghanistan entführten NY Times-Reporters David Rohde ein umfassendes Zensur-Programm in die Wege geleitet. So wurden u.a. alle großen Büros der NY Times angewiesen, nicht über diesen Vorfall zu berichten.

Ebenfalls änderten Kollegen von David Rohde dessen Wikipedia-Eintrag, stutzten Informationen über Christentum-bezogenens Engagement und hoben Islam-bezogenes Engagement hervor. Alles um ihn in einem guten Licht dastehen zu lassen und seinen Marktwert nicht unnötig zu erhöhen. Natürlich regte das den Ärger der Wikipedia-Community, doch Wikipedia-Gründer Jimmy Wales höchstselbst griff ein, um die Maskerade bis zur Befreiung des entführten Reporters aufrecht zu erhalten.

SpOn kommt daraufhin in dem Artikel zu dem Schluss, dass die Selbstkontrolle ein Segen der "alten" Medien ist, da es ihnen viel leichter gefallen ist, die Informationen vorzuenthalten, als bspw. Wikipedia, wo viele Menschen unabhängig voneinander gemäß dem Wiki-Prinzip an einem Artikel arbeiten und eine Manipulation viel schwerer bzw. nicht zu koordinieren ist. Weiterhin könnten die "alten" Medien Informationen vorenthalten, um Menschen zu schützen, sei es zum Beispiel im Falle eines in Not geratenen Prominenten.

Mir kommen die Tränen. Was SpOn — möglicherweise zu unserem(?) Schutz — vorenthält, ist die Tatsache, dass diese Medaille wie jede andere zwei Seiten hat. Die Veröffentlichung von Informationen unterliegt in den meisten Fällen dem Kalkül, und so wundert es nicht, dass besonders in Wahlkampfzeiten plötzlich wie aus dem Nichts kompromittierende Informationen über Politiker auftauchen, die ansich schon Jahre alt sind, z.B. Informationen über frühere Arbeitgeber oder sexuelle Orientierungen.

Von daher ist das Wiki-Prinzip schon sympathischer, wo Manipulationen theoretisch von der Community identifiziert werden und der Zeitpunkt der Veröffentlichung von Informationen nicht zwingend dem Kalkül einzelner unterliegt.

Dies soll natürlich nicht heißen, dass ich professionelle, redaktionelle Inhalte nicht zu schätzen wüsste. Auch bin ich nicht sicher, ob es sinnvoll ist, den hohen Idealen des Wiki-Prinzips einen Menschen zu opfern. Die Welt ist eben nicht schwarz-weiß, man muss ständig abwägen. Aber wie SpOn die gute, alte Presse beweihräuchert, geht dann doch zu weit. Zum Glück gibt es ein Korrektiv in Form von Blogs und Wikis.

Weiterführende Links:

Ein Freund kam neulich auf mich zu fragte mich, wie er die Beiträge seines Blogs optisch trennen kann, je nachdem, welcher Autor den Beitrag geschrieben hat. Ich sagte, das sei ganz einfach und nahm — optmistisch, wie ich bin — an, die WordPress-Funktion post_class() würde u.a. auch den Namen des Autors als Klasse ausgeben. Dem ist jedoch nicht so.

Man kann den Namen des Autors aber ganz schnell mit folgendem PHP-Code hinzufügen:

PHP/HTML
<?php $curauth = get_userdata(intval($post->post_author)); ?>

<div <?php post_class($curauth->user_login) ?>>

Nun erscheint der Autorenname in der Klasse des Beitrags-div und man kann die einzelnen Posts ganz bequem per CSS optisch anpassen.

(via the english guy web design)

(direktBeat | via Nerdcore 1, 2)

Man geht zum Abschluss des Abends nichts ahnend auf Twitter, kriegt die Meldung, dass die Seite überlastet ist, und erfährt fast nebenbei, dass einer der größten Musiker aller Zeiten verstorben ist. Laut L.A. Times, CNN und Spiegel Online ist Michael Jackson heute mit Herzstillstand in eine Klinik in Los Angeles eingeliefert worden, wo er nicht mehr gerettet werden konnte. Er wurde 50 Jahre alt.

google analytics-Screenshot

Gerade gucke ich meine Statistiken auf Google Analytics an und muss mit Erschrecken feststellen, dass jedes mal, wenn ich beim Schreiben eines neuen Artikels diesen in der Vorschau betrachtet habe, das ganze als Page Impression festgehalten wurde. Was für ein Blödsinn, ich gucke den ganzen Tag pausenlos bei meinem Blog vorbei, und verfälsche mir damit die Statistik.

Unangenehmer wird das ganze noch, wenn man einen Blog mit mehreren Autoren betreibt. Schön, wenn die regelmäßig vorbei gucken und was schreiben, aber in der Besucherstatistik haben die nicht wirklich was verloren. Deshalb bietet es sich an, einfach alle eingeloggten User aus der Besucherzählung rauszunehmen. Und dafür fragen wir den Status ab:

PHP
<?php if (!is_user_logged_in()) : ?>
   <!-- Hier den Statistik-Code-Schnippel einfügen -->
<?php endif; ?>

Ist der Nutzer eingeloggt, wird der Zählcode nicht angezeigt. Für alle anderen, nicht eingeloggten Besucher schon. Nun muss die erste Amtshandlung beim Besuchen seiner Seite nur noch das Einloggen sein, und schon ist man raus und die Statistik zählt nur noch "echte", externe Besucher der Seite.

grimme online award 2009 - design tagebuch

Der Grimme Online Award 2009 in der Kategorie "Wissen & Bildung" geht nach Hannover, genauer gesagt an das Design Tagebuch von Achim Schaffrinna. Herzlichen Glückwunsch dazu von meiner Seite.

Wer das Design Tagebuch noch nicht kennt: Achim stellt dort regelmäßig überarbeitete Logos, Websites und CDs vor. Sei es nun von Unternehmen, Städten oder Universitäten. Alles sehr schön und fachkundig kommentiert. Dabei stellt sich mir regelmäßig die Frage: Wo nimmt der Mann nur immer die Informationen her?!

Weiterführende Links:

The Icelandic Phallological Museum

Über einen Freund ist die Kunde zu mir gelangt, dass es auf Island ein Phallologisches Museum gibt — auf deutsch: Ein Penis-Museum. Dort hängen die Peniden diverser Säugetiere, u.a. auch von Buckel- und Killerwalen.

Das wollte ich hier nur mal erwähnt haben. Vielleicht fährt ja demnächst mal der eine oder die andere nach Island und kann Fotos machen.

Gutes Essen braucht keine Gentechnik

Dieses Statement vom "Informationsdienst Gentechnik" ist wirklich seit langer, langer, langer Zeit das dämlichste, was mir unter gekommen ist. Ein paar Wohlstandskinder, die sich mit populistischen Mitteln gegen Gentechnik einsetzen, weil die Supermärkte ja auch ohne gut gefüllt sind. Jedenfalls in unseren Breiten, und das ist ja erstmal das wichtigste.

Also: Menschen entwickeln Nutzpflanzen seit Jahrhunderten durch Auslese, Kreuzung und Veredelung weiter und passen sie so den umwelttechnischen Gegebenheiten an. Nur so ist sichergestellt, dass der jährliche Ernteertrag die Ernährung ermöglicht. Gentechnik macht nichts anderes auf einer neuen Ebene.

Natürlich ist es fraglich, ob das so ein Segen ist, wie es manche Gentechnik-Befürworter darstellen. Inwiefern gentechnik-veränderte Pflanzen für Mensch und Tier gesundheitsschädlich sind, muss erst noch abschließend erforscht werden. Ebenfalls sind die so genannten Terminator Seeds zu verurteilen, deren Früchte nicht als neues Saatgut verwandt werden können, wodurch die Farmer in die Abhängigkeit großer Saatgut-Konzerne getrieben werden.

Es ist wichtig, dass diesbezüglich ein transparenter Diskurs stattfindet, frei von Populismus und Ideologien. Scheißhausparolen wie "Keiner wills, keiner brauchts (Gentechnik; Anm. d. Autors)", kann sich der entsprechende Verfasser direkt ans Knie nageln. So ein dummes und erbärmliches Geschwätz ist wenig zielführend und sorgt — sicher nicht nur bei mir — für hohen Blutdruck. Und dass das auf lange Sicht nicht gesund ist, steht wohl außer Frage.

Zum Schluss noch ein paar Worte zur obigen Abbildung: Es handelt sich dabei um eine Postkarte, welche man an den Handelskonzern Rewe schicken soll. Es wird gefordert, dass Lebensmittel gekennzeichnet werden, wenn sie gentechnisch veränderte Pflanzen beinhalten. Sicherlich eine sinnvolle Sache, allerdings würde es mir als Verantwortlichen bei Rewe schwer fallen, das Gesuch ernst zu nehmen, angesichts des an Ignoranz nicht zu übertreffenden Slogans auf der Vorderseite der Karte.

Weiterführende Links:

Geschrieben am von
Kategorien: Off-Topic
Kommentare: Kommentare deaktiviert

Das hier ist zwar eher im Bereich "Spielerei" anzusiedeln, aber dennoch recht nützlich. Schließlich sieht es einfach eleganter aus, wenn die Bilder eingeblendet werden, wenn sie fertig geladen sind. Außerdem sehen die Besucher nicht den alternativen Text des Bildes, sondern das kleine, sich drehende Rädchen, bei dem heutzutage (fast) jeder weiß, dass gerade etwas in Arbeit ist.

Bilder mit jQuery einblenden, wenn sie fertig geladen sind


Update (21.9.2013):


Ich habe den Code überarbeitet. Dieser war vier Jahre alt und nicht mehr auf Höhe der Zeit. Grundsätzlich hat sich nicht viel geändert. Außer das Einblenden der Bilder, welches nun über CSS-Transitions realisiert wird. Außerdem habe ich den vollständigen Code auf GitHub veröffentlicht.

Los geht es mit dem HTML-Teil:

HTML
<div class="wrap">
   <a href="http://www.flickr.com/photos/herschel_r/3226358452/" class="image-frame">
      <img src="http://farm4.static.flickr.com/3474/3226358452_14572d5570.jpg" width="240" height="160" class="image loading" alt="" />
   </a>
   <a href="…" class="image-frame">
      …
   </a>
   …
</div>

Der Übersichtlichkeit halber habe ich hier nur ein Bild eingebunden, und nicht sechs, wie in der Demo. Man kann allerdings so viele Bilder einbinden, wie man möchte. Der Aufbau ist ziemlich simpel: Ein <div>-Tag zum Aufspannen des Inhaltsbereiches und jeweils ein <a>-Tag pro Bild.

Im <head>-Bereich der Demo ist außerdem folgender, spannender Schnipsel zu finden:

HTML

<script>(function(e,c){e[c]=e[c]+' js'})(document.documentElement,'className')</script>

Auf diese Weise ist gewährleistet, dass, wenn wir im Stylesheet die Klasse .js vor eine Angabe hängen, diese nur greift, wen JavaScript im Browser aktiviert ist. Das gleiche erreicht man übrigens, wenn man statt dieses Code-Schnipsels Modernizr einbindet, was grundsätzlich zu empfehlen ist.

Kommen wir nun zum JavaScript-/jQuery-Teil:

Javascript

(function (win, $, spinner) {

/*
 * Anmelden der Variable fuer spaetere Nutzung.
**/
var $elems;

/*
 * Ladegrafik 'spinner' an die '.image-frame'-Elemente
 * haengen und 'load'-Event am window-Objekt abgreifen.
 * Als Callback wird die 'showImages'-Funktion
 * uebergeben.
**/
function init() {
    $elems = $('.image-frame').append(spinner);
    $(win).load(showImages);
}

/*
 * Ueber die '.image-frame'-Elemente iterieren und sowohl
 * die Ladegrafik als auch die '.loading'-Klasse von den
 * '.image'-Elementen entfernen.
 *
 * Das geschmeidige Einblenden der Bilder wird mit einer
 * CSS-Transition geregelt.
**/
function showImages() {
    $elems.each(function () {

        var $this = $(this);

        $this.find('.spinner').remove();
        $this.find('.image').removeClass('loading');

    });
}

/*
 * Die 'init'-Funktion wird auf DOMReady ausgefuehrt.
**/
$(init);

})(window, jQuery, '<img src="assets/images/load.gif" class="spinner" alt="Lädt…" />');

Die Ladegrafik spinner wird innerhalb der init-Funktion in alle .image-frame-Elemente eingefügt. Die Bilder sind — wenn JavaScript im Browser aktiviert ist — alle unsichtbar durch die CSS-Angabe opacity: 0;. Wenn der load-Event auf das window-Objekt ge-triggert wird, wird sowohl die Ladegrafik als auch die .loading-Klasse von den Bildern entfernt. Das Einblenden geschieht dann mithilfe von CSS-Transitions.

In Browsern, die keine CSS-Transitions unterstützen, erscheinen die Bilder ohne den weichen Übergang. Das ist jedoch nicht weiter tragisch, die grundsätzliche Funktionalität ist gewährleistet.

Zum Schluss brauchen wir noch eine Portion CSS, damit das ganze auch so aussieht wie in der Demo:

CSS

.wrap {
    max-width: 556px;
    margin: 2em auto;
    clear: left;
    }

.image-frame {
    position: relative;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 44.604317%;
    margin: .9375em 2.697842%;
    float: left;
    border: 1px solid #EEE;
    }

.image {
    width: 100%;
    height: auto;
    min-height: 100px;
    display: block;
    padding: 1px;
    border: 2px solid #EEE;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    transition: all .3s linear;
    }
a:hover .image,
a:focus .image {
    border-color: #AAA;
    }

/*
 * Zero opacity for the images if JS is enabled.
**/
.js .loading {
    opacity: 0;
    }

.spinner {
    position: absolute;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    top: 50%;
    left: 50%;
    background-color: #FFF;
    }

Das ganze kann man ganz nach seinen Bedürfnissen anpassen. Wichtig ist nur, dass die Angabe position: relative bei der Klasse .image-frame stehen bleibt, damit sich das Ladebildchen innerhalb des dazu gehörenden <a>-Tags absolut positionieren lässt. Und falls euch das Ladebildchen nicht so zusagt, findet ihr auf Ajaxload.info Alternativen.

Die Angabe backface-visibility: hidden; bei den .image-Elementen sorgt dafür, dass es beim Einblenden durch Transitions keine unschönen Nebeneffekte gibt, bspw. dass sich die Größe der Bilder kurzzeitig leicht ändert und dadurch das ganze Layout "zittert".

Ansonsten bitte ich wie immer, bei Fragen oder Anregungen die Kommentarfunktion zu nutzen.