Bessere Semantik: Eigene Tags nutzen mit HTML5 Custom Elements

Semantik hat mir bei HTML schon immer gefallen,
<div>-Suppen vermeide ich wann immer möglich und schöpfe gerne die Markup-Möglichkeiten aus. Dementsprechend hab ich mich auch größtenteils über die neuen Elemente von HTML5 gefreut. Noch im Fluss, aber schon weit gediegen, sind die Custom Elements der Web Components – also die Nutzung von eigens definierten Tags, ähnlich wie man es von XML-Dokumenten kennt. Eine Ausrede à la „es gab kein passendes Tag“ ist damit also passé.
Bessere Semantik: Eigene Tags nutzen mit HTML5 Custom Elements weiterlesen

HTML5 template-Tag

Template-Technologien für’s Backend gibt es zuhauf (Smarty, Template-Toolkit,…), aber seit dem im Frontend immer mehr dynamisch an Code erstellt wird hat sich auch dort die Notwendigkeit für Template-Techniken ergeben. Da die Frontend-Script-Sprache Nummer 1 nun mal JavaScript ist lag es nahe, dass auch die Templates in JavaScript verwaltet werden, so entstanden beispielsweise Template-Systeme wie „mustache.js„.
Als Frontend-Entwickler möchte man allerdings eigentlich nicht Scripts und Markup vermischen. Haben wir es die letzten Jahre nun endlich hinbekommen, dass Markup, Scripts und Layout sauber getrennt sind würden Frontend-Templates in JavaScript das ganze wieder zunichte machen. Doch das Allzweck-Buzzword HTML5 hat da etwas in der Pipeline: das <template>-Tag. HTML5 template-Tag weiterlesen

Shadow DOM Grundlagen

Das Shadow DOM ist eine versteckte Hierarchie innerhalb des DOMs der Hauptseite. Den Shadow DOM kennen wir eigentlich schon länger. Am offensichtlichsten zeigt er sich beim <iframe>, denn jedem ist klar, dass sich innerhalb dieses Tags das DOM der eingebeteten Seite befindet. Etwas weniger offensichtlich zeigt er sich beim <video>-Tag. man baut nur das <video>-Tag ein, jedoch gibt es automatisch auch Elemente für die Navigation, die ja auch Objekte sein müssen. Diese Tags sind alle vordefiniert und können nur verwendet werden, jedoch lässt sich ein Shadow DOM mit Hilfe von JavaScript auch selbst erzeugen und nutzen. (Prefixes derzeit noch nötig) Shadow DOM Grundlagen weiterlesen

HTML5 Offline-Reader Web-App mit LocalStorage und Appcache

Dieses Projekt liegt jetzt schon bestimmt 4-5 Monate fast fertig bei mir rum, heute Abend hab ichs dann mal finalisiert. Es geht darum mittels HTML5 Elementen eine Web-App zu schreiben, die das offline lesen von Artikeln ermöglicht. Verwendete Techniken sind der LocalStorage des Browsers und der Appcache, also die Möglichkeit mittels Manifest-Dateien mehrere Dateien anzugeben, die der Browser offline zwischenspeichern soll. HTML5 Offline-Reader Web-App mit LocalStorage und Appcache weiterlesen

HTML5 LocalStorage einfach nutzen mit jStorage

jStorage ist ein schönes kleines JavaScript (2Kb), das Framework-Unabhängig aufgebaut ist und so mit jQuery, Prototype und MooTools zusammen arbeitet. Es bietet eine einfache Möglichkeit, den LocalStorage des Browsers zu nutzen. Auf der Website gibt es außerdem eine übersichtliche Tabelle über den Browser-Support. Ich möchte einmal kurz die wichtigsten Funktionen vorstellen. HTML5 LocalStorage einfach nutzen mit jStorage weiterlesen

Tabellen scrollbar machen

Eine Tabelle ist gerade in Layouts, die in der Breite begrenzt sind, manchmal problematisch. Leicht zerschießt einem diese mal das Layout, weil sie breiter als der Content-Bereich ist. Hat diese Tabelle dann auch noch in der Vertikalen Kopfbereiche, bringt meist ein umgebendes div-Element, das mit overflow: auto; ausgezeichnet ist, nichts. Doch es gibt eine Lösung dafür. Tabellen scrollbar machen weiterlesen