Kategorie: HTML5 & CSS

HTML5: Einführung in Server-Sent Events

Ein Schattendasein hinter der HTML5 WebSocket-Technologie führt die auch im Rahmen von HTML5 spezifizierte Server-Sent Events (SSEs)-Technik.

Dabei handelt es sich um eine reine Server-Push-Technik bei der der Webbrowser eine unidirektionale HTTP-Verbindung zum Server offen hält.

Über die offene Verbindung kann der Server jederzeit Nachrichten an den Client schicken, ohne dass die Verbindung wie z. B. beim Long-Polling zwischendurch getrennt und wieder neu hergetellt werden muss. Wobei hier angemerkt werden muss, dass auch klassisches Polling hiermit durchaus möglich ist.

In diesem Beitrag möchte ich euch nun zeigen, wie ihr HTML5 Server-Sent Events einsetzen bzw. implementieren könnt.

Weiterlesen

Responsive Webdesign: Responsive Tabellen erstellen

Beim Erstellen eines Blog-Statistik-Beitrags für meinen ehemaligen Blog ist mir aufgefallen, dass die Statistik-Tabellen bei kleinen Bildschirmauflösungen sich nur bis zu einem gewissen Grad skalieren lassen.

Das liegt daran, dass Tabellen durch ihren jeweiligen Inhalt eine bestimmte minimale Breite haben und diese größer sein kann, als die verwendete Bildschirmauflösung. Das ist generell ein Problem beim Einsatz von Datentabellen innerhalb eines Responsive Webdesigns, weshalb ich euch in diesem Beitrag eine Technik zum Erstellen von Responsive Tabellen, also Tabellen die sich auch an kleine Bildschirmauflösungen anpassen, vorstellen möchte.

Weiterlesen

HTML5: Dateien mit Web Storage API & File API speichern

In einem anderen Beitrag hatte ich euch bereits eine kurze Einführung in die HTML5 Web Storage API gegeben. Dabei wurde deutlich, dass als Datentyp für einen zu speichernden Wert nur DOMString unterstützt wird.

Trotzdem ist es möglich auch andere Datentypen, wie z.B. Arrays, Objekte oder aber sogar Dateien mittels der Web Storage API zu speichern. Dazu müssen wir einfach die Datentypen vor dem Speichern in einen String umwandeln.

Wie ihr mithilfe der File API Dateien in einen String umwandelt und via Web Storage API speichert, erfahrt ihr in diesem Beitrag.

Weiterlesen

HTML5: Einführung in die Web Storage API - LocalStorage & SessionStorage

Die HTML5 Web Storage API, teilweise auch als DOM Storage bezeichnet, dient der clientseitigen Speicherung von Daten in Form von Schlüssel-Wert-Paaren. Man kann auch vereinfacht sagen, die Daten werden lokal im Webbrowser gespeichert.

Grundsätzlich ist die Web Storage API in die zwei verschiedenen Speicherarten namens LocalStorage und SessionStorage unterteilt.

In diesem Beitrag stelle ich euch nun die HTML5 Web Storage API vor.

Weiterlesen

CSS-Sprites mit SVG-Grafiken & SVG Fragment Identifiers

Bei Verwendung von CSS-Sprites müssen die einzelnen Grafiken innerhalb einer Sprite-Grafik normalerweise für die entsprechenden HTML-Elemente mit background-position positioniert werden. Das gilt für SVG-Sprite- als auch für PNG-/JPEG-Sprite-Grafiken.

Für SVG-Sprites besteht aber auch alternativ die Möglichkeit sogenannte SVG Fragment Identifiers zu verwenden.

Weiterlesen