Archiv für den Monat: November 2012

Navigieren mit Javascript/Ajax

Auf einer herkömmlichen Webseite navigiert man mit Links, im speziellen mit HTML <a> Tags. Diese werden in der Adressleiste des Browsers angezeigt und beim Springen zu einer anderen Seite aktualisiert. Basiert die Webseite jedoch auf Ajax bzw. setzt diese die Navigation mit Javascript um, wird aufgrund des fehlenden Seiten Refreshs die Adresszeile nicht aktualisiert. Es ist somit weder möglich, den Zurück Button des Browsers zu nutzen noch den Seitenlink zu versenden sodass der Empfänger die gleiche Seite angezeigt bekommt wie der Sender.

Die Lösung des Problems: Navigation mit Hashtag und der HTML5 History sowie die hashchange HTML4 Funktion.

Durch HTML5 wird es möglich, die Browser History zu verändern. Damit dies nicht bei jedem vergebenen <a> Tag einer Webseite getriggert werden muss, gibt es Bibliotheken die dem Webentwickler unter die Arme greifen. Somit wird es möglich, einfach ein <a href=“#neueSeite“> zu tippen, welches dann automatisch auf die richtige Stelle verweist. Unter HTML4 kann dies mit der hashchange Funktion vollzogen werden. Die genaue Verwendung hängt von der verwendeten Bibliothek ab, mir sind derzeit folgende Möglichkeiten bekannt:

sowie

Ich persönlich habe mangels Kenntnis von history.js bis jetzt mit jQuery bbq gearbeitet. Dieses funktionierte in meinem Fall sehr zuverlässig und war einfach zu implementieren. Es scheint jedoch, dass history.js einige Vorteile bietet. Da die HTML4 Hashchange Funktion deprecated ist, sollte wohl History.js verwendet werden.

Beachten sollte man dabei jedoch, dass Crawler wie der Google Bot oder Tools für den barrierefreien Zugriff derzeit kein Javascript interpretieren. Im Zuge der Suchmaschinenoptimierung und der Barrierefreiheit sollte man seine Webseite also auch immer auf volle Navigierbarkeit ohne Javascript prüfen.

Tipp: Sollte man nur eine sehr simple Seite erstellen wollen, auf der der statische Content nach und nach angezeigt wird, kann man ebenso die angesprochenen Libraries zur Navigation verwenden. Bei kleinen Projekten wie z.b. Visitenkarten muss es nicht immer Ajax sein! 😉

Diese Funktion habe ich bei der Erstellung einer Einladungswebseite für ein Jahrgangstreffen verwendet, eine Demo findet sich hier.

Consumer Clouds – IT aus der Steckdose für alle?

Meine Seminararbeit beschäftigt sich mit der Frage „Welche Cloud-Dienste nutzen Privatanwender?“. Welche Software im klassischem Sinne wurde mittlerweile durch Cloud-Services abgelöst? Die Zielgruppe: IT-Abteilungen, die sich mit einer zunehmenden Durchdringung von Consumer-IT im Unternehmen konfrontiert sehen sowie Software Anbieter, die sich fragen, ob die nächste Version ihres Produktes als Cloud-Service realisiert werden sollte.

Die Arbeit steht zier zum Download bereit: Seminararbeit Consumer Clouds