Rubrik: Entwicklung

Benutzerdefinierte Variablen in Piwik

by

Das Open Source Web Analyse Tool Piwik ist eine tolle Alternative zu Google Analytics und anderen kommerziellen Anbietern von Tracking Tools. Besonders für Leute/Firmen die die Kontrolle über die erhobenen Daten gerne selbst in der Hand haben, ist Piwik das Mittel der Wahl, da es auf dem eigenen Server betrieben wird.

Standardmäßig bietet Piwik schon eine Menge Analysemöglichkeiten, von besuchten Seiten über die Herkunft der Besucher bis zu Kampagnen. Besonders praktisch ist auch die Möglichkeit mehrere Webseiten mit einer Piwik Instanz zu überwachen. Allerdings sind die Funktionen von Piwik natürlich nicht so umfangreich wie das Angebot von kommerziellen Anbietern wie eTracker oder Econda.

Custom Variables

Wem die Standard-Analysewerte nicht reichen, der kann auch noch sogenannte “Benutzerdefinierte Variablen” (Custom Variables) einrichten. Mit diesen kann man bspw. eine Kategorie (Sport, Politik, …), oder einen Status (eingeloggt, nicht eingeloggt) mittracken. Die benutzerdefinierten Variablen werden ganz einfach dem JavaScript Tracking Code hinzugefügt.

Dabei gibt es zwei Unterscheidungsmöglichkeiten: Der Gültigkeitsbereich (scope) kann entweder auf “visit” (Zählung pro Besuch) oder auf “page” (Zählung pro Seitenaufruf) gesetzt werden.

Die Funktion zum Aufruf der benutzerdefinierten Variablen heißt setCustomVariable() und muss vor dem Standardaufruf trackPageView() ausgeführt werden.

piwikTracker.setCustomVariable(
1, // Index unter welchem die Variable gespeichert wird. Bis zu 5 Variablen sind möglich
"Kategorie", // Name der Variable
"Sport", // Wert der Variable
"page" // Gültigkeitsbereich. Hier pro Seitenaufruf
);
piwikTracker.trackPageView();

Die Namen und Werte der Custom Variables sind auf maximal 200 Zeichen Länge begrenzt.

In der Piwik Administrationsoberfläche findet man die Custom Variables unter Besucher->Benutzerdefinierte Variablen.

Hier die Links zur offiziellen Dokumentation:

Mehrsprachigkeit in Joomla! aktivieren

by

Mehrsprachigkeit

Das beliebte Content Management System Joomla! ist standardmäßig fähig, eine mehrsprachige Website zu realisieren. Richtig komfortabel ist diese Funktion zwar nicht, aber es geht – im Gegensatz zu anderen CMS wie WordPress, sogar ohne Erweiterungen.

Mehrsprachigkeit bedeutet, das CMS erlaubt einen einfachen Sprachwechsel, doch Übersetzen müssen immer Sie! Die Mehrsprachigkeit von Joomla! ist etwas nervig, da alles für jede Sprache neu angelegt werden muss: Beiträge, Kategorien, Menüs, Module, etc.

Hier finden Sie eine gute Anleitung, wie man die Mehrsprachigkeit in Joomla! umsetzt:

Mehrsprachigkeit aktivieren

  1. Sprachpakete für die jeweilige Sprache installieren (Erweiterungen/Erweiterungen)
  2. Einstellungen der Sprachen überprüfen (Erweiterungen/Sprachen/Inhalt)
  3. Plugin “System – Sprachenfilter” aktivieren (Erweiterungen/Plugins)
  4. Einstellungen des Plugins überprüfen
  5. Administrator Modul “Multilanguage status” aktivieren (Erweiterungen/Module/Filter Site -> Administrator)
  6. Beiträge in der jeweiligen Sprache anlegen (Titel, Inhalt und Sprache auswählen)
  7. Kategorien & Menüs müssen ebenfalls übersetzt/dupliziert werden

Mehrsprachigkeit auf der Startseite

  1. Neues (Hilfs-) Menü “default” anlegen
  2. Im neuen Menü einen neuen Menüeintrag “default” anlegen (Hauptbeiträge, Sprachen -> alle, Stern für Startseite)
  3. Neues Menü “Main Menu EN” für Englisch anlegen
  4. Neuen Menüeintrag “Home” für englische Startseite anlegen (Hauptbeiträge, Sprachen -> Englisch, Stern für Startseite)
  5. Main Menu umbenennen in Main Menu DE
  6. In Main Menu DE bei Menüeintrag “Home” Sprache Deutsch auswählen
  7. Aufpassen, dass bei allen drei Menüeinträgen der Stern für die Startseite gesetzt wurde!
  8. Das Modul “Main menu” umbenennen in “Main menu DE”
  9. Neues Modul “Main Menu EN” anlegen (Erweiterungen/Module/Neu, gleiche Position wählen wie “Main Menu DE”, Menü “Main Menu EN” auswählen )

Relaunch mit HTML5, CSS3 und responsive Layout

by

Endlich habe ich es geschafft meinem Blog ein neues Design zu verpassen! Natürlich sollten bei diesem Relaunch die modernsten Techniken zum Einsatz kommen. Das Ganze muss ja schließlich auch auf den diversen mobilen Geräten ordentlich aussehen!

Unter der Haube hat sich einiges getan, so basiert mein neues Theme zwar auf dem Wodpress Standard Theme “Twentyeleven“, allerdings in stark abgewandelter Form. Der Vorteil von Twenty Eleven ist, dass dieses schon von Haus aus massiv auf HTML5 setzt, was man an den vielen neuen, semantischen Tags erkennen kann. Außerdem bietet Twentyeleven ein responive Layout, also ein Layout das sich an die Bildschirmauflösung des Betrachters anpasst, damit auch Leute die die Website mit mobilen Geräten wie Smartphones oder Tablets ansurfen ein optimiertes Design erhalten. Optimiert heißt in diesem Fall, dass Elemente wie z.B. die Randspalte (Sidebar) eine komplett andere Position einnehmen.

Ich habe mir erlaubt das Theme fast ausschließlich mit CSS3 zu stylen. Das hat den Vorteil, dass ich so gut wie keine Grafiken einsetzen musste. Farbverläufe, runde Ecken, Schatten, Transparenz, eingebettete Schriften, und sogar das Muster im Hintergrund  lassen sich ganz ohne lästiges Zusammenschnipseln von zig Grafiken realisieren. Dadurch nimmt natürlich auch die Performance der Website enorm zu. Der Browser muss schließlich wesentlich weniger Requests ausführen, sprich weniger Dateien laden.

Natürlich hat das Ganze auch Nachteile, so wird ein Großteil der CSS3 Funktionen nicht von älteren Internet Explorer Versionen unterstützt und mit älter meine ich IE7 und IE8! Allerdings bin ich der Meinung, dass es völlig in Ordnung ist, wenn die Website in diesen Browsern halt ein bisschen anders aussieht. So lange keine ernsthaften Darstellungsfehler auftreten ist es doch völlig ok, wenn gewisse Elemente halt dann keine runden Ecken haben, oder Ähnliches.

Eine konzeptionelle Änderung meines neuen Layouts ist der Austausch der Kategorienavigation durch die Tagcloud als  zentrale Hauptnavigation. Ich denke, so gelangen meine Besucher schneller und intuitiver zu den Artikeln, die sie interessieren.

Desweiteren habe ich neue Plugins installiert, wie z.B. die “ähnlichen Artikel”. Dieses Plugin bietet dem Leser anhand der vergebenen Tags am Ende des Artikels eine Auswahl von Links zu Artikeln aus dem selben Themengebiet an.

Natürlich mussten auch sämtliche sozialen Netzwerke wieder mit eingebunden werden. Deshalb ist alles total connected mit Google +, Facebook, Twitter und diversen anderen Social Media Plattformen wie Tumblr oder Delicious.

Also, ich hoffe mein neues Design gefällt euch! So long and thanks for all the shoes!

jQuery Problem mit anderen JavaScript Bibliotheken

by

JavaScript Bibliotheken sind eine praktische Sache und erfreuen sich großer Beliebtheit. Besonders hervorgetan aus dem Wust von Libraries à la Prototype, Scriptaculous, Dojo, Mootools, etc. hat sich jQuery. jQuery ermöglicht einem ohne großen Aufwand zahlreiche Problemstellungen wie bspw. nette Effekte sehr schnell zu lösen. Die Bibliothek ist leicht in die eigene Website eingebunden und es kann losgehen. jQuery

Doch beim Einsatz in Content Management Systemen (CMS) kann es plötzlich zu Problemen kommen und die gewünschten Effekte treten nicht ein, oder manch andere Plugins funktionieren nicht mehr. Woran liegt das?

Nun jQuery arbeitet mit der Dollar-Syntax $(…) um DOM-Elemente anzusprechen. Leider verwenden andere JavaScript Bibliotheken auch diese Syntax. Deshalb kann es hier schnell zu Konflikten kommen. Joomla! ist z.B. so ein Kandidat. Joomla! verwendet intern Mootools, weshalb auch viele Joomla! Plugins mit Mootools arbeiten. Wenn Sie also zusätzlich noch jQuery in Ihre Website, bzw. Ihr Template eingebaut haben, dann kann schon mal was schief gehen.

Wie löst man nun diese Konflikte? Glücklicherweise gibt es in jQuery den sogenannten Kompatibilitätsmodus (compatibility mode), welcher einem den Einsatz neben anderen JavaScript Bibliotheken ermöglicht. Das sieht dann so aus:


<script>
jQuery.noConflict();

// Sprich jQuery mit jQuery(...) an statt mit $(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});

// Hier kannst du die anderen JavaScripts mit $ nutzen $(...), etc.
$('someid').hide();
</script>

Das Ganze funktioniert so: erst ruft man die Funktion noConflict() auf, dann folgt der ganz normale jQuery Code, jedoch wird jQuery hier immer mit jQuery(…) angesprochen, statt wie üblich mit dem Dollar Zeichen $(…). Darunter kann man dann seine anderen Bibliotheken mit dem $ ansprechen. Hier die offizielle Dokumentation von jQuery.