smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

Kategorie: CSS & (X)HTML5

Einführung in die HTML5 Application Cache API

22. September 2013
Stephan
Einführung in die HTML5 Application Cache API

Eine Möglichkeit statische Ressourcen, wie z.B. HTML-, CSS-, JavaScript-, & Grafikdateien, im Webbrowser zu Cachen, ist das bekannte Browser-Caching.

Insbesondere für Webapplikationen bietet HTML5 hierfür aber auch eine Alternative an und zwar in Form der Application Cache API und dem dazugehörigen Application Cache des Webbrowsers.

Wie ihr die HTML5 Application Cache API einsetzt und welche Vor- und Nachteile die API hat, erfahrt ihr in diesem Artikel.

Weiterlesen

Kategorie: CSS & (X)HTML5

Einführung in die HTML5 Web Worker API

15. September 2013
Stephan
Einführung in die HTML5 Web Worker API

Eine HTML5 Technologie, die ich als Webentwickler absolut genial finde, ist die HTML5 Web Worker API.

Bisher war es so, dass JavaScript im Webbrowser immer nur in einem Thread, dem sogenannten Haupthread bzw. UI-Thread, ausgeführt werden konnte. Das hat den Nachteil, dass rechenintensive und zeitaufwendige Aufgaben die Benutzeroberfläche des Webbrowsers blockieren können und Nutzer ggf. auf die fertige Abarbeitung warten müssen.

Mit der HTML5 Web Worker API besteht nun die Möglichkeit weitere Threads zu erzeugen und solche Aufgaben in Hintergrundprozesse auszulagern. Dadurch ist natives Multithreading im Webbrowser möglich, wodurch wir die Bearbeitung von Aufgaben nicht nur auslagern sondern auch parallelisieren können.

Wenn ihr mehr über die HTML5 Web Worker API erfahren wollt, dann empfehle ich euch diesen Artikel durchzulesen.

Weiterlesen

Kategorie: CSS & (X)HTML5

HTML5: Datei-Informationen via File API auslesen

7. August 2013
Stephan
Datei-Informationen mittels der HTML5 File API auslesen

Im Rahmen der clientseitigen Verarbeitung von Dateien kann es manchmal hilfreich sein einige (Meta-)Informationen einer Datei auszulesen. Beispielsweise habe für den stückweisen AJAX-Upload von Dateien den Namen sowie die Größe der hochzuladenen Datei benötigt.

In diesem Artikel zeige ich euch wie ihr Dateien auswählt und mithilfe der HTML5 File API die Namen, Größen und die entsprechenden MIME-Typs der einzelnen Dateien ermitteln könnt.

Weiterlesen

AJAX: Dateien mit HTML5 File API in Chunks uploaden

24. Juni 2013
Stephan
AJAX: Dateien mit HTML5 File API stückweise in Chunks uploaden

Mithilfe der HTML5 File API ist es nicht nur möglich Dateien im Ganzen zum Server hochzuladen bzw. zu uploaden, sondern das geht auch stückweise. Dabei wird eine Datei in mehrere Teile, in sogenannte Chunks aufgeteilt und diese dann einzeln zum Server gesendet. Der Server selbst setzt die einzelnen Chunks dann wieder zu einer Datei zusammen.

Für kleine Dateien macht das natürlich wenig Sinn, aber für den Upload von großen Dateien ergeben sich so einige interessante Vorteile.

In diesem Artikel zeige ich euch, wie ihr per AJAX und mittels der HTML5 File API größere Dateien stückweise zum Server uploaden könnt.

Weiterlesen

HTML5 IndexedDB: Index erstellen und Daten suchen & filtern

10. Juni 2013
Stephan
HTML5 IndexedDB API: Index zum Suchen und Filtern von Daten nutzen

Wie in meinem Einführungsartikel zur HTML5 IndexedDB API beschrieben, handelt es sich bei der IndexedDB um keine relationale Datenbank. Somit können wir auch nicht einfach mittels einer SQL-Anfrage Datensätze, die bestimmte Bedingungen erfüllen sollen, auswählen und aus der Datenbank holen.

Stattdessen müssen wir umdenken und im Kontext der indexbasierten Datenbank Indizes in Verbindung mit Cursor verwenden, um gezielt Datensätze in einem Objektspeicher zu suchen und zu filtern.

Der folgende Artikel zeigt euch nun, wie ihr einen Index erstellen und nutzen könnt.

Weiterlesen