money.js ist eine kleine (<1kb) JavaScript-Bibliothek zur Währungsumrechnung. Gedacht ist die Zusammenarbeit mit der stündlich aktualisierten Open Source Exchange Rates API. Es können jedoch auch eigene Wechselkurse angegeben werden.

Beispiele

Hier ein paar der offiziellen Beispiele:

1
2
3
4
5
6
7
8
9
10

// From any currency, to any currency:
fx.convert(12.99, {from: "GBP", to: "HKD"});
 
// Chaining sugar:
fx(1000).from("USD").to("GBP");
fx(1000).to("AED");
 
// With simple settings and defaults, making this possible:
fx.convert(5318008);
fx(5318008).to("AED");

Weiterführende Links

• Offizielle Website
• Demo Playground
• Dokumentation
• GitHub Repository
• Open Source Exchange Rates API

Kategorie: Webentwicklung » JavaScript | Tags: Bibliothek, money.js, Open Source Exchange Rates API, Währungsumrechnung, Wechselkurs

zum Artikel | 3 Kommentare

Mittlerweile gibt es unzählige Möglichkeiten die Dropbox produktiv zu nutzen. Eine davon ist, den Public-Ordner als Download-Server zu verwenden. Wie das mit der eigenen Domain funktioniert, werde ich euch in diesem Artikel beschreiben.

Schritt 1: Die persönliche ID

Zunächst benötigen wir die persönliche ID des eigenen Public-Ordners. Den Link zu einer Datei in eurem Public-Ordner erhaltet ihr über das Kontextmenü. Dieser entspricht folgendem Schema:

http://dl.dropbox.com/u/123456/ordner/datei.abc

Der rot markierte Teil ist die ID.

Schritt 2: (Sub-)Domain anlegen

Nun legt ihr die Domain oder eine Subdomain an. Für mein Beispiel nutze ich folgende Subdomain:

download.pehbehbeh.de

Schritt 3: .htaccess-Datei erstellen

Damit die erstellte Domain jetzt zu unserem Public-Ordner weiterleitet, ist eine .htaccess-Datei im Root-Verzeichnis der Domain mit folgendem Inhalt nötig:

1
2
3
4

<IfModule mod_rewrite.c>
    RewriteEngine on
    RewriteRule ^(.*)$ http://dl.dropbox.com/u/839455/$1 [L,QSA]
</IfModule>

Nicht vergessen die eigene ID einzutragen!

Beispiele

Folgende Anfragen…

download.pehbehbeh.de/beispiel.txt
download.pehbehbeh.de/test/mit/ordner/123.txt
download.pehbehbeh.de/mein_riesiges_archiv.zip

…landen jetzt hier:

dl.dropbox.com/u/839455/beispiel.txt
dl.dropbox.com/u/839455/test/mit/ordner/123.txt
dl.dropbox.com/u/839455/mein_riesiges_archiv.zip

Kategorie: Webentwicklung | Tags: .htaccess, Datei, Domain, Download, Dropbox, ID, Ordner, Public, Subdomain, Verzeichnis

zum Artikel | 3 Kommentare

Lang ist’s her: Im April letzten Jahres schrieb ich den ersten Artikel zur Serie WebSockets mit JavaScript und PHP. Da ich es verpennt habe, die Serie fortzusetzen und es mittlerweile ein paar sehr gute Tutorials da draußen gibt, möchte ich die Reihe mit diesem Artikel und ein paar WebSocket-Linktipps abschließen.

Entwicklung

„Damals” steckte das Thema noch in den Kinderschuhen – doch mittlerweile sind WebSockets neben Chrome auch in den neuesten Versionen von Safari implementiert. Für den Firefox war zwar die Version 3.7 angepeilt – doch wegen einer Sicherheitslücke im Protokolldesign, werden es die WebSockets nicht einmal in die finale Version von Firefox 4.0 schaffen. (Quelle) In Opera sind sie deshalb seit Version 11 standardmäßig deaktiviert und lassen sich nur über einen Eintrag in der Config wieder aktivieren. (Quelle)

Linktipps

Wikipedia: Websockets

• allgemeiner Überblick

Websocket.org

• kurze Zusammenfassung
• Beispiele mit Testserver
• genauere Betrachtung & Vorteile von WebSockets

Comet Daily: State of Websocket Support

• Welche Browser unterstützen WebSockets?

Nettuts+: Start Using HTML5 WebSockets Today

• Was sind WebSockets?
• Was ersetzen WebSockets?
• Implementierung von Websockets
  (Server, URLs & Ports, Client, Events, etc…)

David Walsh: WebSocket und Socket.IO

• Was ist die WebSocket API?
• Verwendung der WebSocket API
• WebSockets mit Socket.IO
• dojox.Socket und Socket.IO

Solltet ihr noch weitere gute Linktipps haben, schreibt sie einfach in die Kommentare. Ich werde die Liste dann ergänzen.

Kategorie: Webentwicklung » JavaScript | Tags: API, Artikel, Browser, Comet Daily, David Walsh, Entwicklung, Firefox, Firefox 3.7, Firefox 4.0, Google Chrome, JavaScript, Kompatibilität, Linktipps, Nettuts+, Opera, PHP, Protokoll, Safari, Serie, Sicherheitslücke, Socket.IO, Tutorial, Version, WebSocket API, Websocket.org, WebSockets, Wikipedia

zum Artikel | ein Kommentar

Etwas überraschend wurde das offizielle HTML5-Logo veröffentlicht. Ich finde es persönlich sehr gelungen und wenn es dazu beträgt, HTML5 stärker zu verbreiten – warum nicht? Doch ich will euch nicht länger auf die Folter spannen…

So sieht es aus:

Auf der offiziellen Seite gibt es das Logo in sämtlichen Variationen und Größen zum Download als PNG- oder SVG-Datei. Zudem sind noch sogenannte Technology Classes verfügbar, mit denen Technologien dargestellt werden können, die zum Einsatz kommen:

3D Effects	Connectivity	Device Access	Multimedia
Offline Storage	Performance	Semanticss	Styling

Neben den verschiedenen Logos und Technology Icons gibt es noch den Badge Builder, mit dem man kinderleicht ein Badge für die eigenen Website erstellen kann. Beispiel: Folgendes Badge enthält Performance, Semantics und Styling:

Zu guter Letzt können noch T-Shirts und kostenlose Sticker bestellt werden…

Kategorie: Webentwicklung » HTML & CSS | Tags: 3D Effects, Badge, Badge Builder, Connectivity, Device Access, Download, HTML5, HTML5 Logo, Logo, Multimedia, Offline Storage, Performance, PNG, Semantics, Sticker, Styling, SVG, T-Shirt, Technologie, Technology Classes, Website

zum Artikel | keine Kommentare

In sozialen Netzwerken wie Facebook und Twitter ist es üblich nicht den Zeitstempel eines Postings anzuzeigen, sondern die verstrichene Zeitspanne seit der Erstellung. In WordPress ist dies mit der Funktion human_time_diff() möglich, die sich schon seit Version 1.5 im Core befindet – doch was steckt eigentlich hinter dieser Funktion?

Die Funktion in WordPress

Der Funktion human_time_diff() besitzt einen Pflichtparameter ($from) und einen optionalen Parameter ($to). Zwischen diesen beiden Zeitstempeln wird die Differenz berechnet und in einem lesbaren Format zurückgegeben. Sollte kein zweiter Wert angegeben werden wird immer der aktuelle Zeitstempel verwendet, was in den meisten Fällen ausreichen sollte.

Beispiel 1: Artikel

1

<?php echo human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago'; ?>

Beispiel 2: Kommentare

1

<?php echo human_time_diff(get_the_time('U'), current_time('timestamp')) . ' ago'; ?>

Die eigene Funktion

Möchte man dieses Feature in die eigene (nicht-WordPress) Seite integrieren, muss man entweder selbst Hand anlegen oder in die wp-includes/formatting.php schauen. Dort findet man den Schnipsel der Funktion, der sich natürlich noch an die eigenen Bedürfnisse (z.B. die deutsche Sprache) anpassen lässt.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

function human_time_diff( $from, $to = '' ) {
        if ( empty($to) )
                $to = time();
        $diff = (int) abs($to - $from);
        if ($diff <= 3600) {
                $mins = round($diff / 60);
                if ($mins <= 1) {
                        $mins = 1;
                }
                /* translators: min=minute */
                $since = sprintf(_n('%s min', '%s mins', $mins), $mins);
        } else if (($diff <= 86400) && ($diff > 3600)) {
                $hours = round($diff / 3600);
                if ($hours <= 1) {
                        $hours = 1;
                }
                $since = sprintf(_n('%s hour', '%s hours', $hours), $hours);
        } elseif ($diff >= 86400) {
                $days = round($diff / 86400);
                if ($days <= 1) {
                        $days = 1;
                }
                $since = sprintf(_n('%s day', '%s days', $days), $days);
        }
        return $since;
}

Kategorie: Webentwicklung » PHP | Tags:

zum Artikel | keine Kommentare

Wenn wir uns im Netz bewegen bestehen alle Websites irgendwie aus Kästen. Alles ist in irgendeiner Art und Weise irgendwie rechteckig. Zwar geben uns neue CSS3-Techniken die Möglichkeit unsere Elemente abzurunden, aber dennoch: Sie sind Kästen. Wen man eine schöne (nicht rechteckige) Grafik anklickbar machen möchte – und zwar nicht den gesamten Kasten, in dem sie sich befindet, muss man zum Beispiel auf arbeitsintensive Image Maps oder Flash zurückgreifen.

In diesem Artikel möchte ich euch zeigen, dass es mit Hilfe des Canvas-Elements aus HTML5 auch anders funktioniert. Das Element wird dabei nur als Hilfsmittel genutzt und nicht dazu, die Grafik einzubinden.

Die Idee

Die Idee stammt zugegebenermaßen nicht von mir selbst – die Umsetzung in diesem Artikel jedoch schon. Ich schaute letztens eine interessantes Video über die Erstellung einer Game Engine in JavaScript. Im Video wurde darüber gesprochen Canvas als ein Tool zu benutzen um Pixeldaten aus einem Bild auszulesen – genauer gesagt aus einer PNG-Datei, die Transparenz beinhaltet.

So lässt sich ein zweidimensionales Array aus Nullen und Einsen erstellen, mit Hilfe dessen man leicht entscheiden kann, ob die Maus sich auf oder neben dem Objekt befindet. Dabei ist man noch nicht einmal beschränkt auf Klick-Events. Nette Hover-Effekte lassen sich genauso gut erstellen.

Demonstration

Obwohl es in allen modernen Browsern funktionieren sollte, habe ich die Demo kurz im Firefox abgefilmt, sodass auch wirklich jeder in den Genuss kommen kann. Im Video ist ein Hover-Effekt zu sehen, der die Deckkraft der Bilder verändert.

Link zur Live-Demo »

Setup

HTML

Wie ich anfangs bereits erwähnte, können Bilder ganz normal in die Seite eingebunden werden, wie man es gewohnt ist. In meinem Beispiel habe ich Divs erstellt, die ein Hintergund-Bild besitzen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<div id="main" class="container">
    <div class="clickable arrow"></div>
    <div class="clickable build"></div>
    <div class="clickable building"></div>
    <div class="clickable folder"></div>
    <hr />
    <div class="clickable home"></div>
    <div class="clickable interact"></div>
    <div class="clickable paint"></div>
    <div class="clickable pathing"></div>
    <hr />
    <div class="clickable pen"></div>
    <div class="clickable people"></div>
    <div class="clickable phonebook"></div>
    <div class="clickable plus"></div>
    <hr />
    <div class="clickable printer"></div>
    <div class="clickable school"></div>
    <div class="clickable vault"></div>
    <div class="clickable world"></div>
    <hr />
</div>

CSS

Die CSS-Regeln sind ebenfalls überschaubar. Die Deckkraft wird bei allen Bildern etwas verringert. Im Internet Explorer funktioniert der Effekt eh nicht, deswegen müssen wir uns auch auch nur um die Deckkraft bei den anderen Browsern kümmern.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

hr {
    clear: left;
}
 
.clickable {
    float: left;
    width: 128px;
    height: 128px;
    margin-right: 30px;
    -moz-opacity: 0.5;
    opacity: 0.5;
}
 
.hover {
    -khtml-opacity: 1.0;
    -moz-opacity: 1.0;
    opacity: 1.0;
}
 
.arrow    { background: url('../img/arrow.png');      }
.build    { background: url('../img/build.png');      }
.building { background: url('../img/building.png');   }
.folder   { background: url('../img/folder.png');     }
 
.home      { background: url('../img/home.png');      }
.interact  { background: url('../img/interact.png');  }
.paint     { background: url('../img/paint.png');     }
.pathing   { background: url('../img/pathing.png');   }
 
.pen       { background: url('../img/pen.png');       }
.people    { background: url('../img/people.png');    }
.phonebook { background: url('../img/phonebook.png'); }
.plus      { background: url('../img/plus.png');      }
 
.printer   { background: url('../img/printer.png');   }
.school    { background: url('../img/school.png');    }
.vault     { background: url('../img/vault.png');     }
.world     { background: url('../img/world.png');     }

JavaScript

Ich folgenden JavaScript-Teil werde ich jQuery-Funktionen nutzen, die mir das Leben hier und da etwas einfacher machen. Die Funktionen sind aber keinesfalls für die Umsetzung notwendig.

Insgesamt ist der oben gezeigt Hover-Effekt in drei Teile aufgeteilt:

1. Die Maus betritt den Div (mouseenter)
2. Die Maus bewegt sich im Div (mousemove)
3. Die Maus verlässt den Div (mouseleave)
   

Natürlich muss jeder selbst wissen, wie man es letzendlich implementiert. Ich möchte lediglich die Grundidee mit diesem Beispiel veranschaulichen.

1. Event: mouseenter

Wenn die Maus den Div betritt, muss das Array erzeugt werden, das die Bild-Daten enthält. Dazu wird ein Canvas-Element erstellt, in dem das Hintergrundbild des Divs gezeichnet wird. Danach können die Pixel ausgelesen werden. Anhand des Alpha-Wertes (jeder vierte Wert) wird die Transparenz abgefragt und eine Clickmap erzeugt (0=nichts, 1=Objekt).

Zum Schluss wird die Clickmap gespeichert, damit wir sie im nächsten Schritt abfragen können.

Mit den jQuery-Funktionen ist alles recht simpel und schick gelöst. Nur mit der Abfrage des Hintergrundbildes bin ich noch nicht ganz zufrieden. Genaueres dazu hatte ich bereits letztens in einem anderen Artikel geäußert.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

$('.clickable').mouseenter(function(e) {
    var obj = $(this);
 
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
 
    var img = new Image();
    img.onload = function() {
        // Bild nachzeichnen & ImageData auslesen
        canvas.width  = img.width;
        canvas.height = img.height;
        context.drawImage(img, 0, 0);
 
        var imageData = context.getImageData(0, 0, img.width, img.height);
 
        // Clickmap erstellen
        var clickMap = [];
        for (var i=0, n=imageData.data.length; i<n; i+=4) {
            var row = Math.floor((i/4)/img.width);
            var col = (i/4) - (row * img.width);
 
            if (!clickMap[row]) clickMap[row] = [];
            clickMap[row][col] = (imageData.data[i+3] == 0) ? 0 : 1;
        }
 
        // Clickmap speichern
        obj.data('clickMap', clickMap);
    }
 
    // Bild-Quelle angeben und onload-Event auslösen
    img.src = obj.css('backgroundImage').replace(/\"/g, '').slice(4, -1);
});

2. Event: mousemove

Wenn wir die Maus über dem Div bewegen wird abgefragt ob wir uns auf einem sichtbaren Pixel befinden. Wenn dies der Fall ist, wird dem Div eine CSS-Klasse hinzugefügt bzw. wieder entfernt, wenn der Cursor sich auf einem transparenten Pixel befindet. In diesem Beispiel ändert die CSS-Klasse die Deckkraft.

Bei der Berechnung der Cursor-Position werden Seitenabstand und Scrollweite berücksichtigt. Die Offset-Werte müssen gerundet werden, da es im Firefox zu Dezimalwerten kommen kann.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$('.clickable').mousemove(function(e) {
    var obj = $(this);
 
    if ("undefined" === typeof(obj.data('clickMap'))) {
        return;
    }
 
    var offset = obj.offset();
    var xPos = e.clientX - Math.round(offset.left) + $(window).scrollLeft();
    var yPos = e.clientY - Math.round(offset.top)  + $(window).scrollTop();
 
    if (obj.data('clickMap')[yPos][xPos]) {
        obj.addClass('hover');
    } else {
        obj.removeClass('hover');
    }
});

3. Event: mouseleave

Da der Fall auftreten könnte, das jemand die Maus besonders Schnell aus dem Div zieht oder das Bild am Rande des Divs einen sichtbaren Pixel besitzt sollte die CSS-Klasse auf jeden Fall entfernt werden, sobald man den Div verlässt.

1
2
3

$('.clickable').mouseleave(function(e) {
    $(this).removeClass('hover');
});

Fazit

Das war’s. Hat mich zwar einige Zeit gekostet diesen Effekt zu basteln, aber wenn man es jetzt so sieht, steckt nicht wirklich viel dahinter. Ich hoffe, dass ich euch damit weiterhelfen oder zumindest inspirieren konnte. Ich finde es zunmindest erstaunlich, wie neue Web-Technologien uns die Arbeit erleichtern können.

Kategorie: Webentwicklung » JavaScript | Tags: Alpha-Wert, Artikel, Browser, Canvas, Clickmap, CSS-Klasse, CSS3, Cursor, Deckkraft, Demo, Demonstration, Div, Effekt, Element, Event, Firefox, Flash, Funktion, Game Engine, Grafik, Hilfsmittel, Hover, HTML5, IE, Image Map, jQuery, mouseenter, mouseleave, mousemove, Offset, Pixel, Seitenabstand, Tool, Transparenz, Video

zum Artikel | 8 Kommentare

Heute stand ich mal wieder vor einem kleinen Problem und bin mir bis jetzt nicht sicher, ob ich es optimal gelöst habe. Ich hoffe auf Verbesserungsvorschläge oder Zustimmung von euch. Mein Problem: Die Hintergrundbild-URL eines Divs muss ausgelesen werden…

Das Problem

An sich ist es kein Problem auf bestimmte Style-Werte von Elementen zuzugreifen. Wenn man jedoch die URL eines Hintergrundbildes (style.backgroundImage) abfragt, erhält man – je nach Browser-Engine – unterschiedliche Rückgabewerte:

Gecko (z.B. Firefox)

url("http://pfad.de/zum/bild.png")

Webkit (z.B. Chrome & Safari)

url(http://pfad.de/zum/bild.png)

Das haben zumindest meine Tests mit den neusten Versionen der jeweiligen Browser ergeben. Bei Chrome und Safari wird die URL nicht in Anführungszeichen gesetzt. Wenn man sich jetzt als Ziel gesetzt hat, nur die URL des Hintergrundbildes abzufragen, muss man beide Engines beachten.

Die Lösung

Meine Lösung besteht darin, dass ich zunächst die Anführungszeichen aus der Zeichenkette entferne und danach alle Zeichen – bis auf die ersten Vier sowie das Letzte – mittels slice() extrahiere:

1

var url = document.getElementById('foo').style.backgroundImage.replace(/\"/g, '').slice(4, -1);

Der Internet Explorer 8 verhält sich in diesem Fall wie der Firefox. Andere Versionen habe ich nicht getestet. Was haltet ihr von dieser Lösung? Gibt es eine bessere oder einfachere Umsetzung?

Kategorie: Webentwicklung » JavaScript | Tags: backgroundImage, Element, Engine, Firefox, Gecko, Google Chrome, Hintergrundbild, IE8, Lösung, Problem, Safari, Style, URL, Webkit

zum Artikel | 2 Kommentare

Es ist mal wieder Zeit für einen neuen Part der Artikelserie “Exotische PHP-Funktionen“. Heute stelle ich euch eine Funktion vor, mit der eindeutige IDs generiert werden.

Die Funktion

Die Rede ist von uniqid(). Die offizielle Beschreibung der Funktion lautet: “Erzeugt eine eindeutige ID”. So einfach ist das. Der Rückgabewert ist ein 13 Zeichen langer String. Natürlich lässt sich hier, wie bei fast jeder Funktion, noch Einiges über Parameter anpassen.

Parameter

• prefix – fügt der generierten ID einen Präfix hinzu.
  Das kann in dem Falle hilfreich sein, wenn auf einem Server zur gleichen Mikrosekunde mehrere IDs erstellt werden. Diese würden sich andernfalls gleichen, da die Funktion zeitabhängig ist.
• more_entropy – erhöht die Eindeutigkeit der ID, falls auf true gesetzt.
  Die ID verlängert sich von 13 Zeichen auf 23 Zeichen.

Beispiele

1
2
3
4
5
6
7
8
9
10
11

echo uniqid(); // 4c5bdd5b6909c
echo uniqid();  // 4c5bdd5b690a4
 
echo uniqid('foo_'); // foo_4c5bdd5b690bc
echo uniqid('foo_'); // foo_4c5bdd5b690c0
 
echo uniqid(null, true); // 4c5bdd5b690ab7.28264218
echo uniqid(null, true); // 4c5bdd5b690b58.23513105
 
echo uniqid('foo_', true); // foo_4c5bdd5b690c56.41912889
echo uniqid('foo_', true); // foo_4c5bdd5b690cb0.45755308

Hinweise

Solltet ihr noch auf PHP 4 fahren, ist der Parameter prefix noch nicht optional.

Kategorie: Webentwicklung » PHP | Tags: Beispiel, eindeutig, Funktion, ID, Parameter, PHP 4, Präfix, Rückgabewert, String, uniqid

zum Artikel | keine Kommentare

Nach dieser Überschrift sehe ich schon das große Fragezeichen in den Gesichtern der Leser. Dabei ist das Problem, um das ich mich in diesem Artikel kümmern möchte, recht trivial. Auf manchen Websites werden wertvolle Votes, Hypes, Diggs, Likes, oder Wasweißichs verschenkt, weil der Button falsch eingebaut wird.

Beispiel: t3n Social News

Ich möchte die Situation am Beispiel der Social News von t3n verdeutlichen, da es mir selbst so ergangen ist.

Um den t3n Social News Button einzubauen, hat man genau zwei Möglichkeiten:

1. ohne Angabe der URL

1

<script type="text/javascript" src="http://t3n.de/socialnews/ebutton/"></script>

2. mit Angabe der URL

1

<script type="text/javascript" src="http://t3n.de/socialnews/ebutton/http%253A%252F%252Fwww.yeebase.com%252Fblog%252F"></script>

Das Counting-Problem

Bei Variante 1 wird die URL also automatisch ausgelesen. Das würde bedeuten, dass beispielsweise Besucher von Feedburner für eine andere URL Voten, als Besucher, die direkt auf die “echte” URL gegangen sind, da Feedburner ein paar Parameter an die URL hängt:

http://example.org/

gegen:

http://example.org/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+XYZBlog+(XYZBlog)&utm_content=Google+Reader

Außerdem werden die Votes, die man bereits für die Orginal-URL bekommen hat, gar nicht erst angezeigt.

Aufruf: Immer URL übermitteln

Deshalb meine logische Schlussfolgerung: Man sollte immer, wenn es möglich ist, die gewünschte URL der Seite übermitteln, da man es sonst – übertrieben gesagt – dem Zufall überlässt, wo die ersehnten Votes landen.

t3n Social News Button für WordPress

Zum Schluss gibt es noch einen kleinen Code-Schnipsel. So könnt ihr den t3n Social News Button in euer WordPress-Theme integrieren:

1

<script type="text/javascript" src="http://t3n.de/socialnews/ebutton/<?php echo urlencode(urlencode(get_permalink())); ?>"></script>

Ein Plugin wäre hier mehr als überflüssig.

Kategorie: Webentwicklung » JavaScript | Tags: Button, Code-Schnipsel, Digg, Feedburner, get_permalink, Hype, Like, Parameter, Plugin, Social News, t3n, Theme, URL, urlencode, Vote, WordPress

zum Artikel | keine Kommentare

1. Plugin für Besucher

Zum einen kann ab sofort ein offizielles Deaktivierungs-AddOn für alle gängigen Browser (außer Safari) heruntergeladen werden. Es sorgt ganz einfach dafür, dass keine Daten vom Besucher zu Google Analytics gelangen. Damit besteht zwar nicht die Möglichkeit, den Dienst legaler zu machen, trotzdem haben Benutzer jetzt die Chance, Aufzeichnungen ihres Surf-Verhaltens zu blockieren.

2. Code für Webmaster

Auf der anderen Seite können Webmaster ihren Google Analytics Code um eine weitere Zeile ergänzen. Ich beschrieb bereits im Januar, wie man Google Analytics asynchron laden kann. Diesen Code verändern wir nun wie folgt:

1
2
3
4
5
6
7
8
9
10
11
12

<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['anonymizeIp']);
_gaq.push(['_trackPageview']);
 
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

Es wurde eigentlich nur eine Zeile hinzugefügt.

4

_gaq.push(['anonymizeIp']);

Sie bewirkt, dass die letzte Achtergruppe der IP-Adresse vernachlässigt wird. Somit werden zwar die geographischen Angaben in den Statistiken etwas ungenauer, sollten jedoch immer noch ausreichend sein, um einen Überblick zu bekommen. Zudem ist man auf der sicheren Seite, was den Datenschutz anbelangt.

Kategorie: Webentwicklung » JavaScript | Tags: AddOn, anonym, asynchron, Datenschutz, Google Analytics, IP-Adresse, legal, Plugin

zum Artikel | keine Kommentare