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)

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.

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.

Wer Googlemail benutzt, kennt sicherlich die Buttons mit dem Grauverlauf und den abgerundeten Ecken, die jedoch ohne eine Grafik auskommen. So etwas kann man relativ schnell selber machen, man muss nur genug HTML-Tags "in den Topf werfen". In diesem Tutorial zeige ich euch, wie ihr das mithilfe von jQuery bewerkstelligen könnt. jQuery deshalb, weil man einfach HTML-Tags hinzufügen kann und der eigentliche Quelltext schön sauber bleibt.

navigation im googlemail-style

Und wenn wir schon beim Thema sind, fangen wir am besten mit dem Quelltext an. Dieser sieht so aus:

HTML
<ul class="navigation">
   <li><a href="index.html">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Tutorials</a></li>
   <li><a href="#">Contact</a></li>
</ul>

Eine schlanke, ungeordnete Liste, wie es sich gehört. Allerdings brauchen wir nun ein Element, um die abgerundeten Ecken darzustellen, zwei weitere Elemente um den Grauverlauf zu bilden, und nochmal zwei Elemente um die geprägte Schrift auf den Buttons hinzubekommen.

Summa sumarum müssen also 5 Tags hinzugefügt werden, um den grafischen Effekt hinzubekommen. Deshalb auch die Javascript-Lösung, da bspw. Suchmaschinen-Bots oder Menschen an Screen-Readern nichts mit dieser Fülle an HTML-Elementen anfangen können.

Hier nun die benötigten Javascript-Angaben:

Javascript
$(document).ready(function() {				
   var start = "<span class=\"layer_1\"><span class=\"layer_2\"></span><span class=\"layer_3\"></span><span class=\"layer_4\">";
   var middle = "</span><span class=\"layer_5\">";
   var end = "</span></span>";
				
   var item = new Array();
   $('.navigation li a').each( function() {
      item.push(this.innerHTML);
      for ( i = 0; i < item.length; i++ ) {
         $(this).html(start + item[i] + middle + item[i] + end);
      }					
   });
});

Als erstes werden die benötigten Elemente — in diesem Fall <span>-Tags — in Variablen gespeichert. Danach werden die jeweiligen Beschriftungen der Listen-Elemente in einem Array gespeichert. Zum Schluss wird alles zusammengefügt. Nun fehlen nur noch die entsprechenden Styles, um die Buttons fertig zu machen. Diese gestalten sich wie folgt:

CSS
body {
	padding: 100px;
	font: normal 12px Helvetica;
	font-weight: bold;
	background-color: #FFF;
}

.navigation {
	height: 20px;
	padding: 1px 0;
	clear: left;
	list-style: none;
}

.navigation li {
	position: relative;
	width: 82px;
	height: 20px;
	margin: 0 10px 0 0;
	float: left;
	display: inline;
}

a, span {
	display: block;
	text-decoration: none;
}

a:focus {
	outline: none;
}

a:link, a:visited {
	width: 82px;
	height: 20px;
	position: relative;
	background-color: #DDD;
	text-align: center;
	line-height: 20px;
	color: #333;
	z-index: 100;
	overflow: visible;
}

a:hover {
	background-color: #999;
	color: #000;
	
}

.layer_1 {
	width: 80px;
	height: 20px;
	position: absolute;
	top: -1px;
	left: 1px;
	border: 0;
	border: 1px solid #DDD;
	border-left: 0;
	border-right: 0;
	background-color: #F9F9F9;
	overflow: hidden;
	z-index: 200;
}

a:hover .layer_1 {
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
}

.layer_2 {
	width: 80px;
	height: 2px;
	position: absolute;
	top: 10px;
	left: 0;
	background-color: #EEE;
	z-index: 300;
}

a:active .layer_2 {
	top: 8px;
	left: 0;
}

.layer_3 {
	width: 80px;
	height: 8px;
	position: absolute;
	top: 12px;
	left: 0;
	background-color: #E3E3E3;
	z-index: 300;
}

a:active .layer_3 {
	top: 0;
	left: 0;
}

.layer_4 {
	width: 80px;
	height: 12px;
	position: absolute;
	top: 5px;
	left: 0;
	line-height: 12px;
	color: #FFF;
	text-align: center;
	z-index: 400;
}

.layer_5 {
	width: 80px;
	height: 12px;
	position: absolute;
	top: 4px;
	left: 0;
	line-height: 12px;
	color: #777;
	text-align: center;
	z-index: 500;
}

a:hover .layer_5 {
	color: #333;
}

Zugegeben, das ist ein ganz schöner Rattenschwanz an CSS-Angaben, aber es lohnt sich. layer_1 ist höher als das <a>-Tag und ragt oben und unten darüber hinaus. Dadurch bekommen wir die abgerundeten Ecken. layer_2 und layer_3 sind leer und erzeugen den Grauverlauf. layer_4 und layer_5 beinhalten die Beschriftung des Buttons und erzeugen den Eindruck geprägter Buchstaben, indem das untere Layer weiße Schrift und einen Offset von einem Pixel in der y-Achse hat.

Das ganze funktioniert im Internet Explorer 6-8, im Firefox, in Opera und in Safari. Andere Browser habe ich nicht getestet, allerdings sollte es mit keinem modernen Browser Probleme geben.

Für Anmerkungen nutzt bitte die Kommentarfunktion, ich freue mich immer über Anregungen und konstruktive Kritik. Solltet ihr noch keine Erfahrungen mit jQuery gemacht haben, empfehle ich euch das Einsteiger-Tutorial in den "Weiterführenden Links".

Weiterführende Links:

Normalerweise baut man die Navigation in WordPress mit der Funktion wp_list_pages() (mehr auf WordPress Codex), so dass man im Backend Seiten anlegen kann und diese dynamisch im Frontend erscheinen. Dadurch ist es für Nutzer möglich, jedes beliebige Theme zu laden und trotzdem eine vollständige Navigation zu haben, ohne dass sie im Quelltext rumwerkeln müssen.

Allerdings sind damit eine Menge Abfragen verbunden, die die Ladezeit der Seite erhöhen. Baut man sich ein eigenes Theme und weiß, welche Seiten man anlegen möchte, sollte man ernsthaft darüber nachdenken, auf wp_list_pages() zu verzichten und die Navigation selbst in statischem HTML mithilfe einer ungeordneten Liste zu bauen.

Blöderweise muss man dabei auf das von wp_list_pages() zur Verfügung gestellte Navigation Highlighting verzichten. Dabei wird dem li-Tag des Navigationspunktes der Seite, auf der man sich gerade befindet, die Klasse current_page_item hinzugefügt, so dass man die Möglichkeit hat, diesen Punkt per CSS hervorzuheben.

Hier kommt jedoch die neue WordPress-Funktion body_class() ins Spiel. Diese fügt dem body-Tag u.a. den Name der aktuellen Seite als Klasse hinzu. Der HTML-Teil einer Navigation kann dann bspw. so aussehen:

PHP/HTML
<body <?php body_class() ?>>
  …
  <ul class="navigation">
    <li class="home_nav"><a href="#">Home</a></li>
    <li class="leistungen_nav"><a href="#">Leistungen</a></li>
    <li class="referenzen_nav"><a href="#">Referenzen</a></li>
  </ul>
  …
</body>

Den Pfad zur Seite müsst ihr natürlich ins href-Attribut des a-Tags eintragen. Ansonsten trifft hier der Titel der Seite in der body-Klasse auf die Klasse des zur Seite gehörenden li-Tags. Das kann man sich zunutze machen und zwar mit folgenden CSS-Angaben:

CSS
.home li.home_nav a:link,
.home li.home_nav a:visited,
.leistungen li.leistungen_nav a:link,
.leistungen li.leistungen_nav a:visited,
.referenzen li.referenzen_nav a:link,
.referenzen li.referenzen_nav a:visited {
  color: #FFF;
  background-color: #369;
  text-decoration: underline;
}

.home li.home_nav a:hover,
.leistungen li.leistungen_nav a:hover,
.referenzen li.referenzen_nav a:hover {
  color: #FFF;
  background-color: #666;
  text-decoration: underline;
}

Natürlich muss man noch den Normalzustand der Navigation definieren, aber ansonsten ist das Navigation Highlighting fertig. Alles mit einer(!) dymischen Komponente — der body_class()-Funktion —, also schön schlank.

Weiterführende Links:

(direktBrowser)

Bei all dem Engagement bezüglich der Netzsperren und der zunehmenden Politisierung des Internets in den letzten Wochen, darf man eines nicht vergessen: Wir befinden uns in einem Mikrokosmos. Wer einen Blick auf seine Twitter-Timeline wirft oder durch die Blogosphäre streift, für den ist das Thema "Netzsperren" hochpräsent und allgegenwärtig. Für die restliche Bevölkerung, die das ganze von außen betrachtet - so sie denn überhaupt etwas davon mitbekommt -, ergibt sich jedoch ein anderes Bild.

Diese Menschen, die sicherlich die Mehrheit stellen, nehmen das Internet ganz anders wahr. Sie wissen vielleicht nicht, was ein Browser ist und es ist ihnen egal. Wenn sie nach einer Suchanfrage auf einem Blog landen, wissen sie nicht, dass sie sich gerade nicht auf einer herkömmlichen, statischen Website befinden, sondern eben auf einem Blog. Und es ist vollkommen irrelevant für sie. Erscheinen nun im Netz Stopp-Schilder an Stelle der eigentlichen Inhalte, dürfte sie das wenig kümmern. Möglicherweise freuen sie sich sogar darüber, dass der Zugriff auf Kinderpornografie erschwert wird. Erscheint oberflächlich betrachtet ja auch sinnvoll.

Für diesen Teil der Bevölkerung hat das Internet einen ganz anderen Stellenwert, als z.B. für die über 134.000 Unterzeichner der Online-Petition gegen das Gesetz zur Zugangserschwerung zu Kinderpornografie im Internet. Sie werden Artikel zu diesem Thema überblättern/wegklicken, weil es nicht ihr Interessengebiet ist. Das ist bei einem allgegenwärtigen Medium wie dem Internet natürlich höchst bedenklich, aber andererseits auch verständlich: Jede/r hat nun einmal unterschiedliche Interessengebiete.

Diese Menschen trotzdem zu erreichen und Themen wie Zensur auf einer verständlichen Ebene abseits des Nerd- und Geektums zu kommunizieren, wird die große Herausforderung, der sich bspw. die Piraten stellen müssen.

(Vielen Dank an Christoph für den Hinweis auf das Video.)