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 »

HTML5 und CSS3

Auf dieser Seite sammel ich alle meine Artikel zu HTML5 und CSS3, damit ihr eine brauchbare Übersicht und damit auch ein kleines Nachschlagewerk an die Hand bekommt.

HTML5

• HTML5-Dokumente des W3C – Spezifikationen des neuen Standards und Unterschiede zu HTML4
• Web Storage (Local und Session Storage) – Daten clientseitig speichern

CSS3

• color (Farben) mit Farbtabellen – RGB, HSL und Alphatransparenz
• border-radius (abgerundete Ecken) – Ecken eines Rahmens abrunden
• box-shadow (Schatten) – Schatteneffekte ergänzend zum Rahmen
• transform (Lineare Transformationen) – Objekte skalieren, rotieren, verschieben und scheren

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 »

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 »

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

Mal kurz rundgeschaut… #23

• 40 Useful jQuery Techniques and Plugins – Brauchbares im Smashing Mag.
• Snazzy Hover Effects Using CSS – Todschick mit Six Revisions.
• VI (Linux Terminal) Help Sheet – Volle Kontrolle dank Liquidicity.
• Touch Gesture Reference Guide – Fühlbare Übersicht dank LukeW.
• Automatically replace content in PRE tags by HTML Entities – Erleichterung auf Rezept von WPRecipes.com.

Mal kurz rundgeschaut… #19

• A Short Guide To Open-Source And Similar Licenses – Lizenzinfos im Smashing Magazine.
• The Opposite of Fitts’ Law – Gruseliges bei Coding Horror.
• 10 Online-Werkzeuge zur CSS-Komprimierung – Komprimiert bei Dr. Web.
• How to Make an HTML5 iPhone App – Gewusst wie bei Six Revisions.
• Getting Started with OOP & PHP5 – Klasse(n) bei Carsonified.

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 »

Mal kurz rundgeschaut… #9

• Flash Game Creation Tutorial – Eine mehrteilige Anleitung von Emanuele Feronato.
• Google Maps API Tutorial – Ein umfangreiches Tutorial von Mike Williams.
• Ajax RSS reader – Eine Kurzanleitung von Jack Herrington (IBM).
• 42 Recent AJAX Tutorials – Eine Sammlung von Max Kiesler.
• Building Web Pages With HTML 5 – Noch eine Serie, diesmal beim Webmonkey.