HTML5: Web Storage (Local und Session Storage)

Mit den DOM-Objekten localStorage und sessionStorage serviert HTML5 uns eine wunderbare Alternative zu den bisherigen Cookies. Zunächst werden die Daten dadurch nicht mehr bei jedem Request vollständig mitgesendet, was so manche Kopfschmerzen bei der Performance-Optimierung von Webseiten ersparen sollte. Außerdem werden die Begrenzungen von Cookies aufgehoben, denn via Web Storage können abhängig vom Limit des Browsers mehrere Megabyte Daten gespeichert werden. In diesem Artikel stelle ich die neuen Möglichkeiten vor, die übrigens von allen modernen Browsern inkl. dem Internet Explorer 8 unterstützt werden, vor. Continue reading

Balkendiagramme mit CSS

Balkendiagramme mit CSSHinweis: Eine optimierte (da einfacher, kompakter und barrierefrei) Variante mit TABLE findet sich in diesem Artikel.

Möchte man auf einer Webseite Statistiken angemessen aufbereiten, dann kommt man kaum an entsprechenden Grafiken vorbei. Bei einmaligen, statischen Werten können Diagramme natürlich mit einer beliebigen Software erstellt und als Grafiken eingebunden werden. Aber wie geht man mit dynamischen Werten um? Für nur wenige Graphen lohnt es sich meist nicht, eine umfangreiche Bibliothek zur dynamischen Erzeugung einzurichten und sich darin einzuarbeiten. Externe Lösungen, wie z.B die Google Chart API, bergen hingegen eine gewisse Abhängigkeit von einem Drittanbieter. In diesem Tutorial möchte ich deshalb erläutern, wie sich einfache Balkendiagramme problemlos mit CSS umsetzen lassen. Es geht dabei lediglich um die Gestaltung, in einem weiteren Beitrag werde ich dann die dynamische Erzeugung via PHP behandeln. Continue reading

Code-Snippet: XMLHttpRequest

Eine moderne Web-Anwendung kommt heutzutage kaum noch ohne die Möglichkeit aus, Inhalte dynamisch nachzuladen. Die bekannten JavaScript-Frameworks berücksichtigen dies natürlich, aber für eine nachzuladene Kleinigkeit sind solche umfangreiche Lösungen natürlich wie die sprichwörtlichen Kanonen, um auf Spatzen zu schießen. Mittels XMLHttpRequest ist eine dynamische Abfrage aus JavaScript heraus keine Zauberei. Im folgenden Code-Snippet ist eine ganz einfache Beispielanwendung zu sehen. Continue reading

Webseiten-Performance erhöhen

Dwain Chambers 100m semisSeit ein paar Wochen versuche ich nach und nach die Performance dieses Blogs zu verbessern. Dabei achte ich insbesondere auf die Leistungsanzeige bei den Google Webmaster Tools, weil diese nicht nur meinen Mittelwert anzeigen, sondern auch den 20%-Quantil aller Webseiten. Sicherlich ist das keine repräsentative Anzeige, aber immerhin eine brauchbare Vergleichsgröße. Momentan pendelt mein dortiger Wert grob zwischen 2 und 5 Sekunden, mein Ziel sind möglichst konstante Werte um 2 Sekunden. Bei der Optimierung greife ich auf die Erweiterungen Google Page Speed und Yahoo! YSlow für Firefox mit Firebug zurück, die mich mit vielen Detailinformationen über meine Seite unterstützen. Continue reading