Zum Inhalt wechseln

M.Bohlen

M.Bohlen

Registriert seit 25 Jun 2012
Offline Zuletzt aktiv: Aug 25 2012 09:31
-----

[Artikel] Kostenlose CMS im Vergleich: Wordpress, Drupal, Joomla oder Typo3?

21 Februar 2013 - 05:20

Ein Internetauftritt ohne ein Content Management System (CMS) ist heute kaum noch denkbar. Selbst kleine Firmenwebseiten oder private Homepages können komfortabel mit CMS umgesetzt und mit wenig Aufwand verwaltet werden. Neue Seiten werden mit CMS schnell angelegt und bestehende Seiten lassen sich auch ohne HTML Know-how ändern. Mit Wordpress, Drupal, Joomla und Typo3 gibt es unterschiedliche CMS, die sogar kostenlos sind. Doch wer die Wahl hat, hat auch die Qual. Wir verraten, was diese CMS können und wo die Vor- und Nachteile der einzelnen Systeme liegen.Die CMS- und Blogsoftware Wordpress
Wordpress kennen viele als Webapplikation für Blogs, doch Wordpress ist längst mehr. Es handelt sich um ein echtes CMS, das sich gut eignet, um neben Webtagebüchern auch noch private Homepages, kleine Firmenwebseiten oder übersichtliche Webportale zu realisieren. Wordpress hat eine große Community und es werden zahlreiche kostenlose und kostenpflichtige Themes angeboten. Auch ein wahres Meer an Plugins ist für Wordpress verfügbar. Ein Wordpress CMS für SEO, insbesondere für die Onpage Optimierung fit zu machen, ist so nicht schwer.

Vorteile von Wordpress:
  • Schnelle und einfache Installation, die auch ohne Vorkenntnisse leicht zu meistern ist
  • Suchmaschinenfreundliche URLs leicht konfigurierbar
  • Viele Themes und Plugins
Nachteile von Wordpress:
  • Features, die für größere Seiten ein Must-Have sind, müssen per Plugin nachgerüstet werden (zum Beispiel Multilanguage Support, Autorenverwaltung mit Rollen und Rechten im Standardsystem nur rudimentär möglich)
  • Plugin-Auswahl unübersichtlich: Teilweise sogar mehrere Plugins für eine Aufgabe verfügbar
Das modulare Drupal CMS
Drupal ist als Community-Portal entwickelt worden und wird in diesem Umfeld auch gerne eingesetzt. Neben einer Community gibt es im deutschsprachigen Raum auch unterschiedliche Unternehmen, die Entwicklung und Support für das modular aufgebaute CMS anbieten. Drupal besteht aus einem Core und zahlreichen Modulen zur Erweiterung. Das macht es möglich, mit dem CMS komplexe Lösungen zu bauen. In ein Portal lassen sich zum Beispiel durch entsprechende Module auch ein Online Shop und ein Webblog integrieren. Neben einem Themes Support verfügt Drupal über ein rollenbasiertes Rechtesystem und die Inhalte werden versioniert.

Vorteile von Drupal:
  • Modularer Aufbau macht es möglich, die Installation an die eigenen Bedürfnisse anzupassen
  • Rollenbasiertes Rechtesystem für Nutzer bereits inklusive
  • Multisite-fähig: Mit einer Installation können mehrere voneinander getrennte Webseiten betrieben werden
Nachteile von Drupal:
  • Komplexe Installation insbesondere dann, wenn mehrere Zusatzmodule genutzt werden
  • Es gibt teilweise Modulabhängigkeiten, die gegebenenfalls auch Updates erschweren können
Joomla: durch saubere Trennung von Content und Code gut erweiterbar
Joomla ist ein Content Management System, das in ganz unterschiedlichen Bereichen eingesetzt wird. In Deutschland wird das CMS auch regelmäßig für Firmenwebseiten verwendet. Mit der Version 1.6 wurde ein auf Access Control List basierendes Rechtesystem für Nutzer eingeführt. Von Hause aus ist bei Joomla die Authentifizierung der Nutzer per LDAP, OpenID und Gmail möglich.

Vorteile von Joomla:
  • Gutes Rechtesystem: „Werksseitige“ Unterstützung unterschiedlicher Authentifizierungsverfahren
  • Einfache Template-Erstellung
  • Durch strikte Trennung von Inhalten und Programmcode gut durch Entwickler anpass- und erweiterbar
  • Leichte bis mittelschwere Installation
Nachteile von Joomla:
  • Objektbasierte Verwaltung für Einsteiger gewöhnungsbedürftig
  • Aufteilung von Erweiterungen in Plugins, Komponenten und Module führt schnell zu Verwirrung
Das Enterprise-Content-Management-System Typo3
Typo3 wird zu Recht als Enterprise-Content-Management-System bezeichnet. Mit diesem CMS lassen sich auch komplexe Seitenstrukturen abbilden. Zudem bringt das Typo3 Multidomain- und multilinguale Unterstützung von Hause aus mit. Ebenso wie ein ausgefeiltes Rechtesystem zur Nutzerverwaltung. Die systemeigene Konfigurationssprache Typoscript ermöglicht vielfältige Möglichkeiten bei der Erweiterung.

Vorteile von Typo3:
  • Die umfangreiche und in der Grundversion integrierte Rechteverwaltung
  • Multidomain-Support
  • Multilanguage Support
  • Anbindung an ERP- oder CRM-Lösungen möglich
Nachteile von Typo3:
  • Fehlerfreie Installation, Konfiguration und Administration fast nicht ohne Fachwissen möglich
  • Hohe Einarbeitungszeiten für Entwickler, Administratoren und Redakteure

Click here to view the Artikel

[Artikel] Das neue jQuery 1.8 - Features und Blick in die Zukunft

16 Februar 2013 - 10:23

Die jQuery Beta 1.8 ist fertig – Zeit, sich die neue Version des JavaScript Frameworks genauer anzusehen. Und das lohnt, die Entwickler haben im Code aufgeräumt und auch beim Speed, beim Cross-Site-Scripting Schutz, bei Animationen und bei den Herstellerpräfixen hat sich einiges getan. Zudem wird jQuery auch noch modular. Für die Versionen 1.9 und 2.0 stehen auch noch Änderungen auf dem Plan, wir verraten euch in diesem Artikel welche.Oft wächst mit neuen Versionen auch die Zahl der Features. Bei jQuery 1.8 wurde jedoch erstmal aufgeräumt. Dabei sind einige Features entfernt worden, zum Beispiel die Methode $Browser oder die Methode $.Sub. Das Fehlen der ersten Methode kann dabei in der Praxis leicht durch den User-Agent-String kompensiert werden. Die zweite Methode gliedern die Entwickler aus Kompatibilitätsgründen in ein Kompatibilitäts-Plugin für jQuery 1.9 aus.

Neue Features bei jQuery
Ein paar neue Features sind am Ende natürlich doch noch herausgekommen. Künftig soll insbesondere der Umgang mit Herstellerpräfixen leichter werden. Diese kommen bei nicht standardisierten CSS-Funktionen zum Einsatz. Mit der neuen Methode $.parseHTML soll der Cross-Site-Stripting (XSS) Schutz verbessert werden. Diese Funktion ermöglicht es, Strings in HTML und DOM Objekte zu verwandeln.

An Sizzle, die CSS Selector Engine, haben die Programmierer von jQuery ebenfalls Hand angelegt und die Performance verbessert. Insgesamt 12 Einträge erfasst das Changelog für die Selector Engine. Das hat sich gelohnt. Jetzt lassen sich auch unterschiedliche Selektoren (~ > +) besser kombinieren und es wurden noch einige Bugs beseitigt.

Das System für Animationen und Effekte ist in den letzten Jahren umfangreicher geworden. Dabei ist ein regelrechtes Chaos im Code entstanden. In dieses Durcheinander haben die Entwickler mit der 1.8er Version Ordnung gebracht. Dabei wurden auch gleich noch ein paar Erweiterungen eingefügt. Animationen zu ergänzen oder zu modifizieren, soll so leichter möglich sein.

jQuery Build nach Maß
Performance stand bei jQuery 1.8 ganz oben auf der todo-Liste. Das Framework ist jetzt modular und so wird es optional möglich, ein angepasstes jQuery-Build zu erzeugen. Bis auf 21 KB lässt sich die Größe des Systems schrumpfen, sofern man bereit ist, auf die Module ajax, css, dimensions, effects und offset zu verzichten. Der Servertraffic und die Ladezeit von Webseiten lassen sich so optimieren. Basis für das Build System bildet grunt.

Was noch alles neu ist und was sich alles bei jQuery 1.8 geändert hat, lässt sich auf dem jQuery-Blog nachlesen.

Die Zukunft
Für 2013 ist das Release der Version 1.9 geplant. Mit dieser Version sollen die Aufräumarbeiten, die in der kommenden Version begonnen wurden, fortgesetzt werden. Für Programmierer und Webmaster bedeutet dies insbesondere den Code zu checken. Viele in 1.8 veraltete Funktionen werden nämlich mit jQuery 1.9 aus dem Code verschwinden. Alte Anwendungen drohen dann schlimmstenfalls nicht mehr zu funktionieren.

Für jQuery 1.9 ist die Unterstützung der Versionen 6, 7 und 8 des Internet Explorers noch eingeplant. Mit jQuery 2.0 ändert sich das. Die Unterstützung für die Internet Explorer mit den Versionsnummern 6, 7 und 8 entfällt dann. Kleiner Trost: Für jQuery 1.9 ist parallel zu jQuery 2.0 ein längerer Produktzyklus eingeplant.

Click here to view the Artikel

[Artikel] jQuery Basics - Webseiten mit jQuery gestalten

16 Februar 2013 - 10:22

Das JavaScript Framework jQuery ist heute ohne Frage eine der beliebtesten Lösungen für AJAX, DOM und vielfältige Webdesign-Effekte. Unzählige Plugins machen es ohne umfangreiche Programmierkentnisse möglich, Features wie Fotogalerien, Slider und ähnliches zu nutzen. Nichtsdestotrotz ist es sinnvoll die Basics von jQuery zu kennen. Mit dieser kleinen Einführung verstehen jQuery Anfänger das Framework schnell, erfahren wie jQuery auf den Webseiten eingebunden wird und wo jQuery Plugins im Web zu finden sind.jQuery einbinden
John Resig hat die JavaScript Bibliothek entwickelt und 2006 auf dem Barcamp in New York vorgestellt. Seitdem hat sich jQuery im Webdesign durchgesetzt. Zahlreiche Webapplikationen nutzen die JavaScript-Klassenbibliothek. Der Suchmaschinenbetreiber Google hostet die Bibliothek in den Google Libraries API. Das ist praktisch, so kann jQuery auf den eigenen Webseiten unkompliziert eingebunden werden. Es reicht somit zwischen den HTML-Tags „<head>“ und „</head>“ folgendes Codefragment einzubinden, um die jQuery auf den eigenen Seiten nutzen zu können.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Alternativ kann die Bibliothek von der Projekt-Webseite heruntergeladen und auf dem eigenen Server abgelegt werden. Der SRC-Pfad ist dann natürlich entsprechend zu ändern.

Der Funktionsumfang von jQuery ist sehr mächtig. Durch die Bibliothek können so genannte Events verwendet werden. Das Drehen des Mausrades, Tastatureingaben oder Klicks auf Links werden registriert und lassen sich als Auslöser für Änderungen am aktuellen HTML-Dokument nutzen. Per XML ist es möglich, Daten von einem Server nachzuladen.

Elemente selektieren und Funktionen nutzen
Die Funktionsweise von jQuery ist im Grunde ganz simpel. Nachdem das HTML-Dokument vom Browser geladen wurde, wird jQuery aktiv und kann automatisch oder bei Interaktionen des Nutzers reagieren. So lassen sich zum Beispiel Slider und Tabs auf Webseiten unkompliziert realisieren. Der Selector „$“ ist wohl in dieser Hinsicht am charakteristischsten für jQuery. Mit diesem kann auf die DOM Objekte eines HTML Dokumentes zugegriffen werden. Es handelt sich dabei um CSS Selektoren wie CSS-Klassen oder IDs und um HTML Elemente (p,div, li,...).

In der Praxis sieht das für die ID „aBeispiel“ so aus:
$("#aBeispiel")

Für CSS Klasse „bBeispiel“ so:
$(".bBeispiel")

Und für das HTML-Element div so:
$("div")

Auf einem selektierten Element können dann Funktionen ausgeführt werden, zum Beispiel kann die CSS Definition geändert werden:
$("#aBeispiel").css({ "color": "green", "font-size": "10px" });

Mit diesem Codebeispiel wird die CSS Definition für Elemente mit der ID „aBeispiel“ auf eine grüne (Schrift-)Farbe und eine Fontgröße von 10px festgelegt. Folgendes Beispiel entfernt hingegen die Css-Klasse „todelete“ von div Elementen:
$("div").removeClass("todelete");

Durch das so genannte Chaining – ein Verketten - lassen sich jQuery Funktionsaufrufe kombinieren. Diese verketteten Funktionsaufrufe werden hintereinander ausgeführt.
$("div").removeClass("todelete").css({ "color": "green", "font-size": "10px" })

Dieser Code entfernt von div Elementen die Klasse „todelete“ und weist den Containern die CSS Eigenschaften aus dem obigen Beispiel zu. In der Praxis kann dies auch mit einem Event verbunden werden.
$(document).ready(function(){   $("a").click(function(event){     $("div").removeClass("todelete").css({ "color": "green", "font-size": "10px" })   }); });

Mit dem Klick auf einen Link wird in diesem Beispiel der div-Container verändert.

Mehr zu jQuery
Das Schöne bei jQuery ist, dass Webmaster nicht gleich das Programmieren erlernen müssen. Viele Plugins können leicht installiert werden und lassen sich mit rudimentären HTML-Kenntnissen nutzen. Eine umfangreiche Auswahl an jQuery Plugins findet sich auf jQuerylist.com. Ein jQuery Tutorial hier und eine Sandbox zum Experimentieren mit jQuery im Browserfenster findet sich auf JSBin.

Click here to view the Artikel

[Artikel] Modernizr und Polyfills: HTML5 Webseiten für alte und neue Browser

12 Juli 2012 - 01:33

HTML5 ist der aktuelle Webdesigntrend. Auch wenn der Standard offiziell noch nicht verabschiedet ist, unterstützen aktuelle Browser bereits HTML5 Funktionen. Durch sogenannte Polyfills müssen alte Browser bei HTML5 Webseiten nicht außen vor bleiben. Bei der Umsetzung von Polyfills hilft Modernizr, das auf Basis von JavaScript in der Lage ist, die Unterstützung von HTML5 Features browserübergreifend zu prüfen. Was Polyfills sind und wie Modernizr hilft, professionelle HTML5 Webseiten zu erstellen, erklärt dieser Artikel.Keine einheitliche HTML5 Unterstützung bei Browsern
HTML5 löst HTML 4, XHTML 1.0 sowie den Standard DOM HTML Level 2 ab und schafft tolle Möglichkeiten beim Entwurf von Webseiten. Viele Features, die bei HTML 4.01 noch per Plugins oder externen JavaScript-Bibliotheken ergänzt werden müssen, sind bei HTML5 bereits integriert. Verabschiedet ist der neue HTML Standard offiziell noch nicht, nach dem Zeitplan des W3C soll dies 2014 erfolgen. Viele Browserhersteller und Webseitenbetreiber sind schneller und nutzen HTML5 schon heute. Allerdings unterstützen nicht alle Browser sämtliche Features. Webseiten, die HTML5 einsetzen, müssen deshalb vorsorgen wenn die Seiten browserübergreifend wunschgemäß funktionieren sollen. Das gilt insbesondere für alte Browser, die kein HTML5 unterstützen. Dabei werden HTML5 Polyfills eingesetzt, welche nicht unterstützte HTML5 Features einfach durch gängige Browser-Plugins (zum Beispiel Flash-Plugin) oder mittels Javascript nachbauen.

HTML5 Features erkennen
Was sich vielleicht erstmal gar nicht so kompliziert anhört, bedarf jedoch etwas Aufwand. Die Programmierung der Webseite muss nämlich erkennen, welche Features der Browser des aktuellen Besuchers unterstützt. Eine Liste mit unterstützten Funktionen kann von dem Browser in der Praxis nicht angefordert werden. Diese Aufgabe löst die Javascript Bibliothek Modernizr. Das Tool kann unter http://modernizr.com/download/ heruntergeladen werden. Dabei ist es ratsam, die Downloaddatei individuell zu konfigurieren und nur die benötigten Funktionen der Downloaddatei hinzuzufügen. So werden die Datenmenge der Webseite und der Traffic des eigenen Servers nicht unnötig vergrößert und die Performance der Webpage optimiert. Auf der Webseite ist die Konfiguration des Downloadpaketes über einfache Checkboxen möglich. Anschließend muss diese Datei noch auf den Webserver übertragen werden.

Modernizr einbinden
Die Downloaddatei wird dann per


<script src="modernizr-2.5.min.js"></script>



vor dem schließenden Head-Tag </head> in die Webseite eingebunden. Dabei ist darauf zu achten, dass der Dateiname – im Codebeispiel „modernizr-2.5.min.js“ mit dem Dateinamen und dem Pfad der auf den eigenen Server aufgespielten Version übereinstimmt.

Das HTML-Tag muss dann noch so aussehen:

<html class="no-js">


Wenn Modernizr dann aktiv ist, wird ein Java-Script Objekt erzeugt und die Klasse no-js im HTML-Tag durch die Klasse js ersetzt. Der HTML-Tag kann dann zum Beispiel so aussehen:


<html class="js canvas canvastext no-geolocation rgba hsla multiplebgs borderimage borderradius boxshadow cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d video audio localstorage sessionstorage applicationcache fontface">


Diese erzeugte Klasse liefert nun die Informationen, dass der Browser zum Beispiel canvas, canvastext, rgba und hsla unterstützt. Durch no-geolocation ist jetzt auch bekannt, das Geolocation nicht unterstützt wird.

Damit diese Informationen in den Webseiten eingesetzt werden können, bietet Modernizr Funktionen zum Abfragen der Features an. Über einen yepnope.js (yepnopejs.com) basierenden Scriptloader werden entsprechende Skripte ausgeführt.

Eine Abfrage kann dann so implementiert werden:


Modernizr.load({

test:Modernizr.geolocation,

yep:'../js/UseHTML5Geolocation.js',

nope:'../js/geolocationFallback.js'

});

Unterstützt der Browser geolocation, dann wird ein Javascript-File mit dem Namen UseHTML5Geolocation.js geladen. Wird das Feature nicht unterstützt, so wird der Polyfiller – in diesem Beispiel die Datei geolocationFallback.js – geladen.

Polyfills implementieren
Die passende Implementierung liefert Modernizr selbst allerdings nicht mit. Diese muss jeder Webentwickler selbst implementieren. Es gibt aber umfangreiche Polyfiller Lösungen, wie zum Beispiel Webshims Lib, durch die viel Arbeit entfallen kann.

Click here to view the Artikel

[Artikel] Google Analytics für Einsteiger - Einbindung, Datenschutz und API

02 Juli 2012 - 01:23

Google Analytics ist eine der mächtigsten und beliebtesten Webtracking-Lösungen am Markt. Doch erst wenn die Analytics API richtig genutzt wird, lässt sich Google Analytics (nach aktuellem Stand) datenschutzkonform nutzen und das Potenzial der Software auskosten. Die Verwendung der API ist dabei nicht nur etwas für Programmierer und Internet-Profis.Google Analytics Code-Snippet integrieren
Googles neuer asynchroner Analytics Code wartet gegenüber der alten Version mit einer kürzeren Seitenladezeit auf und erfasst die Klicks der Webseitenbesucher zuverlässiger. Auch das Tracking für Rich Media-Seiten und für Webpages, die umfangreich Scripts eingebunden haben, ist verbessert worden. Damit das Tracking funktioniert, reicht die Anmeldung bei Google Analytics allein nicht aus. Auf den Webseiten muss aktuell das folgende Code-Snippet integriert werden:



<script type="text/javascript">

var _gaq = _gaq || [];

_gaq.push(['_setAccount', 'UA-XXXXX-X']);

_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>


(Quelle: Google)

In diesem Code muss bei
gaq.push(['_setAccount', 'UA-XXXXX-X']);
der Analytics ID Platzhalter UA-XXXXX-X gegen die eigene Google Analytics ID ausgetauscht werden.


Trackingerfolg von Position des Snippets abhängig
Für ein zuverlässiges Tracking ist die Position des Java-Script Codes wichtig. Dieser muss vor dem schließenden HEAD-Tag '</head>' in den HTML-Code integriert werden. Das ist notwendig, damit der Code geladen wird, bevor der Nutzer auf Links oder andere Seitenelemente klicken kann. Befindet sich der Code beispielsweise am Ende der Seite, hat der Besucher womöglich schon weitergeklickt, bevor der Tracking-Code geladen und der Klick getrackt werden konnte.


Einsatz von API-Funktionen am Beispiel _anonymizeIp()
Nach der Zeile mit der Google Analytics ID kann der Aufruf _gaq.push (['_gat._anonymizeIp']); integriert werden. Dies ist der von Google empfohlene Weg die API-Funktion _anonymizeIp() zu nutzen. Dieser Code hat die Aufgabe die IP-Adressen gekürzt zu speichern und ist die Basis für eine datenschutzkonforme Nutzung der Webtracking-Lösung. Der Anfang des Snippet zum Analytics Tracking sieht dann so aus:



var _gaq = _gaq || [];

_gaq.push (['_setAccount', 'UA-XXXXXXX-YY']);

_gaq.push (['_gat._anonymizeIp']);

_gaq.push (['_trackPageview']);


Event Tracking am Beispiel von externen Links
Das Event Tracking ermöglicht ausgehende Links mit Analytics zu tracken. Den Links wird dafür ein Tracking-Code hinzugefügt. Dies ist leicht machbar und kann wertvolle Aufschlüsse über das Nutzerverhalten liefern. Google hat für das Link-Tracking bereits den passenden Code parat:


<script type="text/javascript">

function recordOutboundLink(link, category, action) {

_gat._getTrackerByName()._trackEvent(category, action);

setTimeout('document.location = "' + link.href + '"', 100);

}

</script>



Dieses Code-Snippet wird ebenfalls vor dem schließenden HEAD-Tag </head> positioniert.
Den gewünschten Links muss lediglich noch die JavaScript onClick-Funktion hinzugefügt werden.

Ein Code-Beispiel für einen Link:

<a href="http://www.neandertaler.net/" onClick="recordOutboundLink(this, 'Outbound Links', 'neandertaler.net');return false;">


Das return false; sorgt beim Code dafür, dass der Browser dem Link erst folgt, nachdem die Funktion ausgeführt wurde.

Übrigens: Bei vielen Content Management Systemen gibt es auch Erweiterungen für Google Analytics. Für Wordpress gibt es beispielsweise das kostenlose „Google Analytics for WordPress“ Plugin.

Analytics API Funktionen für das Reporting
Die API von Google kann mehr als nur Tracken. Mit der Core Reporting API lassen sich individuelle Dashboards und Analysen programmieren. Google unterstützt dabei die Programmiersprachen Python, JavaScript, Java und PHP.

Google Analytics und der Datenschutz
Deutschen Datenschützern ist die Lösung in der Out-of-the-Box Installation ein Dorn im Auge. Selbst privaten Homepagebetreibern wird geraten Google Analytics - wenn überhaupt - datenschutzkonform zu nutzen. Die Funktion _anonymizeIp() einzubinden reicht nicht. Homepagebetreiber sollen einen Vertrag mit Google schließen, eine Datenschutzerklärung bereithalten und den Webseitenbesucher über das Deaktivierungs-Add-On von Google informieren. Wie dies aussehen kann, ist auf ZDNet zu lesen.

Click here to view the Artikel