Installation

Mint wird, im Gegensatz zu Google Analytics, auf dem eigenen Server installiert. Als Plattform braucht es nur eine typische XAMP-Installation. D.h. es müssen nur ein Apache Webserver mit PHP und eine MySQL Datenbank vorhanden sein. Bevor man das Tool installiert muss man erst eine Lizenz für seine Website erwerben. Diese kostet aktuell einmalig $30 und ist es allemal wert. Zumal man damit einen kleinen Indipendent-Programmierer unterstützen kann und reich wird er damit sicherlich nicht.
Um aber sein Geld nicht unnötig ausgeben zu müssen, falls das persönliche Webhosting doch nicht kompatibel ist, kann man vorher die Mint Server Compatibility Suite herunterladen und auf sein Web schieben. Hiermit hat man dann einen kleinen Wizard zu Hand, der über mehrere Stufen alle nötigen Komponenten testet und am Ende die Tauglichkeit für Mint bescheinigt.
Die eigentliche Installation geht dann genauso einfach. Nach dem man das Mint-Archiv heruntergeladen und entpackt hat, passt man nur noch die /mint/config/db.php an seine Datenbank an und lädt das ganze zu seiner Webseite hoch. Nun ruft man das Mint-Verzeichnis auf und gibt den erhaltenen Aktivierungsschlüssel ein. Der letzte Arbeitsschritt betrifft dann die eigene Website. Dort fügt man in den Head-Bereich folgende Zeile ein:

<script language="javascript" src="/mint/?js" type="text/javascript"></script>

Dadurch wird ab jetzt bei jedem Seitenaufruf ein Javascript ausgeführt, was den Zugriff und dessen Merkmale in die Datenbank schreibt und damit auswertbar macht.

Funktionen

Mint ist von der Grundstruktur her modulbasierend. Die Kernkomponente zeichnet eigentlich nur den eigentlichen Zugriff auf. Alle anderen Funktionen werden über Module, soggenannte Pepper, nachinstalliert. Das hat den Vorteil, dass jeder die Statistikseite nach seinen Vorlieben anpassen kann. Damit man nicht am Anfang ganz mit leeren Händen da steht, ist im Installationspaket schon das Default Pepper enthalten. Mit diesem werden grundlegende Sachen angezeigt. Zum Beispiel die Anzahl der allgemeinen Seitenzugriffe und von eindeutigen Besuchern (Pageviews, Unique visitors), von welcher Seite aus kahm der Besucher (Referrers) oder mit welchem Suchbegriff ist er auf Seite gelandet (Search terms).

Zusätzlich kann ich aber noch folgende Peppers empfehlen um seine Website Statistik zu komplettieren:

User Agent 007

Mit diesem Pepper erhält man zusätzliche Auswertungsmöglichkeiten über welche Plattform (Windows, Mac OS X, …)und  welchen Browser (Firefox, Safari, Chrome, …) inkl. Versionierung der Besucher verfügt. Außerdem erstellt es eine Statistik über die benutzte Bildschirmauflösung und die vorhandene Flash-Version.

Local Searches

Zwar hat man schon eine Statistik installiert über die Suchbegriffe mit welchen die Besucher auf die Seite gestoßen. Mit Local Searches sieht man nun auch welche Begriffe in die Suchmaschine der eigenen Website eingegeben wurden.

Locations

Locations erstellt einfach eine Übersicht über die geografischen Standorte der Gäste basierend auf deren IP Adresse.

Durations

Das Durations Pepper Modul zeigt, wie der Name auch schon verrät, einfach eine Statistik an wie lange der Zeitraum war in dem sich der Besucher auf der eigenen Website aufgehalten hat.

Secret Crush

Das ist eigentlich das spannendste Pepper für Mint. Secret Crush fasst im Prinzip alle vorher beschriebenen Informationen zusammen. Und zwar so das sie wieder einem konkreten Benutzer zugeordnet werden können. Man kann also komplett erkennen, was eine Person z.B. für Seiten besucht hat und welche Softwarebasis sie dafür benutzt wurde. Außerdem zieht Secret Crush noch zusätzliche Informationen aus den Cookies von typisch benutzten Plattformen wie Wordpress, Movable Type oder Textpattern.

iPhone Pepper

Damit erhält Mint ein zusätzliches Theme für den iPhone Safari. Die Darstellung ist z.B. dann nur noch einspaltig und man kann bestimmte Bereiche auf- bzw. zuklappen. Auch ein Web Clip Bookmark Icon ist integriert oder kann durch ein eigenes ersetzt werden.

Und letzteres nutzen wir nun um vom Dashboard aus Growl aufrufen zu können. Die Lösung besteht insgesamt aus drei Teilen:

• ein Shellscript um das Vorhandensein von Growl zu prüfen
• etwas Javascript um ersteres und den Mitteilungsbefehl auszuführen
• und das Applescript um die Mitteilung zu erstellen und abzuschicken

Als erstes das Javascript:

widget.system('growlExists.sh', function (obj) {
   var cmd;
   if (+obj.outputString > 0) {
      cmd = '/usr/bin/osascript senToGrowl.scpt ' +
         '"Name" "Widget" "Dashboard" ' +
         '"Titel" "Beschreibung"';
      widget.system(cmd, function (obj) {});
   }
});

Das Script macht einen widget.system Aufruf, in dem es growlExists.sh aufruft. Nach dem das Script geantwortet hat, wird deren Wert in eine anonyme CallBack-Funktion übergegeben.
Das Shellscript ist unheimlich einfach. Es ruft den Kommandozeilen-Befehl osascript auf und startet damit ein einfaches Applescript welches die Systemprozesse zählt, die den Namen “GrowlHelperApp” besitzen. Wenn Growl gestartet ist, gibt das Script “1″ zurück, bzw. wenn nicht eine “0″.

#!/bin/sh
osascript<<END
tell application "System Events"
   return count of (every process whose name is "GrowlHelperApp")
end tell
END

Wenn Growl erkannt wurde, setzt das Javascript den Befehl für die Notification zusammen und führt diesen aus. Der Befehl der von osascript aus geführt wird, enthält folgende Parameter:

senToGrowl.scpt

Der Pfad zum Growl Applescript

"Name"

Der Mitteilungsname

"Widget"

Der Name des Programmes welches die Mitteilung wirft

"Dashboard"

Der Name des Programms von welchem das Icon angezeigt wird

"Titel"

Der Titel der Notification

"Beschreibung"

Der Beschreibungstext in der Growl Mitteilung

osascript führt senToGrowl.scpt aus und fügt die Parameter ein. Das Applescript erstellt dann so die Growl Notification:

on run argv
   tell application "GrowlHelperApp"
      set the allNotificationsList to {item 1 of argv}
      set the enabledNotificationsList to {item 1 of argv}
      register as application ¬
         item 2 of argv all notifications allNotificationsList ¬
         default notifications enabledNotificationsList ¬
         icon of application item 3 of argv
      notify with name ¬
         item 1 of argv title item 4 of argv ¬
         description ¬
         item 5 of argv application name item 2 of argv
   end tell
end run

Dieses Script ist ziemlich selbsterklärend und besteht hauptsächlich aus Informationen der Growl Dokumentation. Mehr gibts eigentlich auch nicht zu erkären. Also wünsch ich viel Spaß beim growlen.

Was sind CSS Sprites?

Ein Sprite (engl. für ein Geistwesen, Kobold u. a.) ist ursprünglich ein Grafikobjekt, das von der Grafikhardware über das Hintergrundbild bzw. den restlichen Inhalt der Bildschirmanzeige eingeblendet wird. Durch das Videospiele immer komplexer wurden, mussten gewisse Techniken benutzt werden um den Spielablauf flüssig zu halten. Eine von diesen Entwicklungen war das benutzen von einer Mastergrafik, auf der alle Sprites abgelegt wurden. Später wenn diese gebraucht wurden, wurde per Code wieder das einzelne Objekt herausgelöst und auf dem Spielfeld positioniert.

Circa um 2000 suchte man im Webdevelopment nach Alternativen für die damals schon üblichen JavaScript basierenden RollOver-Menüs. Und mit CSS und einer sehr einfachen Implementierung der alten Sprites-Idee, war auch diese gefunden. Wobei diese auch viel einfacher und sauberer war, als der JavaScript Vorgänger.
Diese Technik wurde dann noch weiter ausgebaut, in dem man im Prinzip nun die komplette Spritebearbeitung den Videospielen entlieh. Das heißt, eine Vielzahl von Bilddateien einer Website werden in eine große “Master”-Bilddatei kombiniert. Um auf der Website dann wieder ein einzelnes Bild dar zustellen, benutzt man die “background-position”-Eigenschaft in CSS, welches die genaue Position des besagten Bildes definiert. Auch alle möglichen Hover-, Active- oder Focus-Effekte können so direkt realisiert werden.
Bei dem Laden der Website, wird nun nicht jede einzelne Bilddatei mehr geladen (bzw. eine Hover-Datei per Request), sondern ein großes Masterbild mit einem Mal. Das klingt zwar nach keiner großen Sache, aber der Hauptnachteil von JavaScript basierenden MouseOver-Effekten ist, dass sie zwei HTTP Request pro Bild benötigen. Und da diese alle etwas Zeit benötigen, kommt es zu unschönen “Flicker” während des ersten Abrufens. Aber auch allgemein besteht ein Großteil der Gesamtladezeit für eine Seite aus zusätzlichen HTML Requests für alle enthaltenen Elemente. Und diese lassen sich durch diese Technik erheblich reduzieren.
Zusammenfassend kann man also sagen, dass CSS Sprites die Anzahl der HTTP Requests verringern und damit das Laden der Seiten beschleunigen. Aus diesem Grund werden CSS Sprites besondern gern auf stark frequentierten Websites genutzt. Und hauptsächlich für Teile der Navigation (inkl. deren Hover-Effekten), für Icons und natürlich Buttons. Also alles Elemente die sich selten verändern.

Ein einfaches Anwendungsmuster

Ok, fangen wir mit einer kleinen Navigation an, wie sie standardmäßig aufgebaut wäre:

#menu li a {background:none no-repeat left center}
#menu li a.elemnt1 {background-image:url('img/elemnt1.gif')}
#menu li a:hover.elemnt1 {background-image:url('img/elemnt1_over.gif')}
#menu li a.elemnt2 {background-image:url('img/elemnt2.gif')}
#menu li a:hover.elemnt2 {background-image:url('img/elemnt2_over.gif')}

Mit der CSS Sprites können wir dieses Beispiel erheblich beschleunigen. Anstatt 10 einzelne Bilder für die Buttons (5 Default, 5 MouseOver), kombinieren wir diese in eine einzelne Datei. Dieser Arbeitsschritt sollte nicht wirklich schwierig sein. Einfach eine neue Bilddatei öffnen und alle Icons darin von Links Oben beginnend einfügen.
Und nun der angepasste CSS Code. Wie du siehst ist das Hintergrundbild einmalig im Anker-Element definiert. Und in den einzelnen Klassen wird nur noch die Hintergrundposition auf der Y-Achse verschoben.

#menu li a {background-image:url('img/image_menu.gif')}
#menu li a.elemnt1 {background-position:0px 0px}
#menu li a:hover.elemnt1 {background-position:0px -72px}
#menu li a.elemnt {background-position:0px -143px;}
#menu li a:hover.elemnt2 {background-position:0px -215px;}

Durch diese kleine Sachen haben wir HTTP Request um 9 Stück verringert und auch die gesamten Datengröße ist durch weniger Overhead etwas verkleinert worden.
Für wen das zu viel ist, dem sei dieser Webservice an Herz gelegt: http://spritegen.website-performance.org/
Dort genügt es, einfach alle noch einzelnen Bilder in eine ZIP Datei zu packen und hochzuladen. Der Generator erstellt damit dann automatisch das Masterbild und den nötigen CSS Code dazu. Einfacher kann man es wirklich nicht mehr haben.

Zum Abschluss noch ein paar reale Beispiele

Amazon

Sehr kompakt gestaltetes Master-Image

Apple

Apple benutzt CSS Sprites für die verschiedenen Status seiner Hauptnavigation

YouTube

Youtube hat nahezu seine komplette grafische Gestaltung in ein Master-Bild gequetscht, so dass es 2800 Pixel hoch ist.

In diesem Artikel geht es darum wie man die Geolocation mit Hilfe von Javascript ausliest. Aber natürlich fragt man sich zu Recht, ob die Umsetzung überhaupt Sinn macht, wenn es aktuell nur von Firefox ab Version 3.5 unterstützt wird. Aber zum einen gibt es einen eigenen Working Draft der Geolocation API von der W3C. So das es mit ziemlicher Sicherheit in naher Zukunft von allen anderen großen Browsern auch unterstützt wird.
Außerdem kann Geolocation mit allen Browsern genutzt werden in den Google Gears installiert ist. Gears ist verfügbar für Windows, Windows Mobile (IE Mobile, Opera Mobile), Mac OS X (Firefox, Safari), Linux und Android. Darüber hinaus funktioniert es auch mit Firefox 3.0 wenn das Geode Plugin installiert ist.

Als erstes aber nur zu Geolocation auf Firefox 3.5. Die Geolocation API befindet sich in einem geolocation Kindobjekt innerhalb des navigator Objektes. Und darauf bezogen können wir nun testen ob eine Geolocation-Unterstützung vorhanden ist, indem wir folgenden Code benutzen:

if (navigator.geolocation) {
   /* Geolocation ist verfuegbar */
 else {
    alert("Der Browser unterstuetzt keinen Geolocation Dienst.");
}

Dieses Verfahren ist einem einfachen Browsercheck vorzuziehen, um auch für zukünftige Entwicklungen gerüstet zu sein.

Aktuelles Standort im Firefox abfragen

Um den Standort des Benutzers zu bekommen, ruft man die getCurrentPosition() Methode auf. Diese startet eine asynchronen Abfrage auf die aktuelle Position. Wenn diese bestimmt wurde, ruft es damit den Callback mit dem Ergebnis auf:

navigator.geolocation.getCurrentPosition(function(position) {
  do_something(position.coords.latitude, position.coords.longitude);
});

Und mit dieser Information können wir nun einfach weiter in unserer Anwendung arbeiten:

function getLocation(){
	navigator.geolocation.getCurrentPosition(gotLocation, noLocation);
}
function gotLocation(position){
	var lat = position.coords.latitude;
	var long = position.coords.longitude;
	alert('Der Standort lautet ' + lat + ', ' + long);
}
function noLocation(){
	alert('Standortbestimmung nicht erfolgreich.');
}
getLocation();

Mit Google Gears den Standort bestimmen

Und nun die selbe Prozedur mit Hilfe von Google Gears. Also nicht vergessen Gears zu installieren und eine passende gears_init Datei einfügen.

<script type="text/javascript" src="http://code.google.com/apis/gears/gears_init.js"></script>
<script type="text/javascript">
function getLocation(){
	var location = google.gears.factory.create('beta.geolocation');
	location.getCurrentPosition(gotLocation, noLocation);
}
function gotLocation(position){
	var lat = position.latitude;
	var long = position.longitude;
	alert('Der Standort lautet ' + lat + ', ' + long);
}
function noLocation(){
	alert('Standortbestimmung nicht erfolgreich.');
}
getLocation();
</script>

Wie man sieht, gibt es nicht viele Unterschiede zwischen den beiden Methoden. Durch die gears_ini Datei bekommen wir Funktionen um mit der Gears-Engine auf dem Benutzerrechner zu kommunizieren. Danach initialisiert man Gears und erstellt eine neue Variable, welche mit den Gears-Funktionen benutzt wird. Danach muss man nur noch getCurrentPosition aufrufen und der Rest ist wieder der selbe.

Beide Wegen zusammenführen

Durch diese starke Ähnlichkeit lassen sich beide Codes auch einfach in einen Aufruf kombinieren. Und damit funktioniert es dann bequem mit beiden Technologien:

<script type="text/javascript" src="http://code.google.com/apis/gears/gears_init.js"></script>
<script type="text/javascript">
function getLocation(){
	var location = null;
	if (navigator.geolocation){
		location = navigator.geolocation;
		var geoAPI = 1;
	}else{
		location = google.gears.factory.create('beta.geolocation');
		var geoAPI = 0;
	}
	if(location){
		location.getCurrentPosition(gotLocation, noLocation);
	}else{
		alert("Der Browser unterstuetzt keinen Geolocation Dienst.");
	}
}
function gotLocation(position){
	if (geoAPI == 1){
		var lat = position.coords.latitude;
		var long = position.coords.longitude;
	}else{
		var lat = position.latitude;
		var long = position.longitude;
	}
	alert('Der Standort lautet ' + lat + ', ' + long);
}
function noLocation(){
	alert('Standortbestimmung nicht erfolgreich.');
}
getLocation();
</script>