Braekling.de

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. Weiterlesen »

CSS3: transform (Lineare Transformationen)

Eine hochinteressante, neue Eigenschaft in CSS3 ist transform. Sie ermöglicht lineare Transformationen beliebiger Seitenelemente, d.h. wir können sie verschieben, rotieren, skalieren und scheren. Auf den ersten Blick wirkt das Konzept recht kompliziert und mag so manchen abschrecken, der von Vektoren und Matrizen Ausschlag bekommt. In Wirklichkeit ist es aber gar nicht so kompliziert, zumal es gesonderte Funktionen gibt, die sich intuitiv nutzen lassen, und die die Matrix vor den Augen des Designers verbergen. Auch diese neue Eigenschaft wird von allen modernen Browsern, abgesehen vom IE, bereits unterstützt. Weiterlesen »

CSS3: border-radius (abgerundete Ecken)

Neben den neuen Schatteneffekten liefert CSS3 mit der Eigenschaft border-radius eine weitere Gestaltungsmöglichkeit, die zuvor nur mit Trickserei und Grafiken umzusetzen war. Endlich lassen sich so mit den Bordmitteln des Browsers abgerundete Ecken erzeugen, was z.B. in geschickter Kombination mit Schatten für anspruchsvolle, plastische Layouts verwendet werden kann. Auch border-radius wird mittlerweile von allen modernen Browsern, abgesehen vom IE, unterstützt. Weiterlesen »

CSS3: color (Farben) mit Farbtabellen

Mit CSS3 bekommen Webdesigner neue Möglichkeiten, um Farben zu definieren. Dadurch gibt es natürlich nicht schlagartig mehr Farben, aber sie können je nach Einsatzgebiet einfacher verwendet werden. Hinzu kommt Alphatransparenz, die ansprechende Transparenzeffekte ohne den Einsatz von Grafiken ermöglicht. Dieser Beitrag erklärt die neuen Farbnotationen und liefert einige Beispiele und Farbtabellen. Weiterlesen »

CSS3: box-shadow (Schatten)

Dank CSS3 erhalten Webdesigner endlich die Möglichkeit, ansehliche Schatteneffekte ohne Grafiken zu verwirklichen. Somit können Webseiten optisch geschickt aufgewertet werden, ohne den Quelltext unnötig kompliziert zu gestalten und ohne zusätzlichen Datenballast zu erzeugen. Die dazu notwendige Eigenschaft box-shadow wird mittlerweile abgesehen vom IE8 von allen modernen Browsern unterstützt. Weiterlesen »

HTML/CSS-Balkendiagramm – barrierefrei

Nach meinem gestrigen Artikel Balkendiagramme mit CSS machte mich Thomas darauf aufmerksam, dass die DIV-Sammlung, die hinter dem Diagramm steckt, z.B. für Suchmaschinen oder auch für Screenreader, nicht lesbar sei. Zunächst erwiderte ich, dass dies auch auf Flash- oder JavaScript-Diagramme zutreffen würde, jedoch ergänzte Thomas vollkommen richtig, dass diese aber keinen Kauderwelsch im HTML erzeugen. Also habe ich mich nochmal in Ruhe mit der Sache beschäftigt, um den gestern vorgestellten Code dementsprechend zu optimieren. Weiterlesen »

Balkendiagramme mit CSS

Hinweis: 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. Weiterlesen »

Neue HTML5-Dokumente des W3C

Obwohl HTML5 teilweise schon in Testläufen eingesetzt wird, z.B. bei YouTube, wird noch fleißig an der Spezifikation gearbeitet. Nun wurden seitens des World Wide Web Consortium (W3C) neue bzw. überarbeitete Dokumente veröffentlicht, die den derzeitigen Stand der Entwürfe beschreiben. Weiterlesen »

5 hier verwendete Icon-Sets

Sie sind unheimlich praktisch, aber auch sehr schwer zu erstellen: Icons. Auf möglichst kleinem Raum teilen sie dem Betrachter mit, was ihn dahinter erwarten soll. Hier liegt auch die Schwierigkeit: Wie kann ich etwas sozusagen “kurz und knackig” als Grafik beschreiben? Und zusätzlich soll es ja auch noch gut aussehen. Icon-Sets gibt es wie Sand am Meer und auch Sammlungen solcher Sets gibt es eigentlich zu genüge. Mit diesem Beitrag möchte ich deshalb auch nicht das Rad neu erfinden, sondern einfach den von mir verwendeten Sets eine besondere Erwähnung gönnen. Vielleicht findet ihr so ja auch noch die ein oder andere Anregung. Weiterlesen »

CSS-Sprites: HTTP-Requests einsparen

Die Ladezeiten einer Webseite sind, wie ich z.B. im Artikel über das Kurzzeitgedächtnis und WebDesign beschrieben habe, enorm wichtig. Neben dem Problem, dass ein Nutzer bei einem lange nicht beachteten Tab vergessen kann, wozu er die Seite besucht hat, neigen viele Surfer dazu möglichst viele Suchergebnisse o.ä. in Tabs zu öffnen. Sie schauen sich dann diejenigen Resultate an, die schnell fertig geladen haben, und können den Rest gleich wieder schließen, wenn sie die gewünschte Information bereits gefunden oder gar das gesuchte Produkt bestellt haben. Weiterlesen »