Artikel von Denis Potschien

Google Profile: http://plus.google.com/+DenisPotschien

CSS

HTML5: zeitgemäße Rasterlayouts mit CSS-Grids

18. Juli 2014
von
HTML5: zeitgemäße Rasterlayouts mit CSS-Grids

Als es noch kein CSS und keine Trennung zwischen Inhalt und Gestaltung einer Website gab, war es üblich, Weblayouts als Tabelle zu gestalten. Mit der steigenden Bedeutung einer semantischen HTML-Auszeichnung waren Tabellen fortan nur noch für die Auszeichnung von Inhalten gedacht, die auch tatsächlich tabellarisch dargestellt werden sollen. Die einfache Einteilung eines Weblayouts in Zeilen und Spalten war mit CSS nicht mehr möglich. Mit...

Weiterlesen »

Formulare

MagicSuggest für jQuery: Schicke Eingabefelder mit Mehrfachauswahl auf Basis von Bootstrap 3

16. Juli 2014
von
MagicSuggest für jQuery: Schicke Eingabefelder mit Mehrfachauswahl auf Basis von Bootstrap 3

Mit dem „<select>“-Element ist es ein Leichtes, Eingabefelder auszuzeichnen, bei denen mehrere Einträge ausgewählt werden können. Allerdings funktioniert das nur mit einigen Einschränkungen und sieht bei weitem nicht so ansprechend aus wie bei MagicSuggest. Statt Auswahllisten lassen sich mit dem jQuery-Plugin schicke Eingabefelder erstellen, die eine Mehrfachauswahl an freien und vorgegebenen Einträgen ermöglicht. Einfache Einbindung Da MagicSuggest jQuery voraussetzt, müssen Plug-in und jQuery gemeinsam...

Weiterlesen »

Audio

HTML5-Sprechstunde: Texte vorlesen lassen mit der Speech-Synthesis-API

10. Juli 2014
von
HTML5-Sprechstunde: Texte vorlesen lassen mit der Speech-Synthesis-API

Was Navigationsgeräte schon lange können, lernen jetzt auch die Browser: Sprachsynthese. Die neue Speech-Synthesis-API erlaubt es, Texte mit einer menschlichen Sprechstimme auszugeben. Dabei stehen Stimmen für mehrere Sprachen zur Verfügung – teilweise auch mehrere Stimmen pro Sprache. Per Knopfdruck können sich Ihre Besucher den Text eines HTML-Dokumentes einfach vorlesen lassen. Sprachen- und Stimmenvielfalt Die Anzahl der zur Verfügung stehenden Sprachen und Stimmen ist abhängig...

Weiterlesen »

Javascript

Responsives Webdesign: Per JavaScript auf die Veränderung der Fenstergröße reagieren

3. Juli 2014
von
Responsives Webdesign: Per JavaScript auf die Veränderung der Fenstergröße reagieren

Mit Media Queries ist es möglich, dynamisch auf Änderungen von Breite und Höhe des Anzeigebereichs des Browsers zu reagieren. Wird bei Desktopgeräten das Browserfenster verändert oder bei Mobilgeräten zwischen Portrait- und Landscape-Modus gewechselt, können per CSS und Media Queries direkt passende Stylesheets angewendet werden. Mit dem JavaScript-Tool Simple State Manager lässt sich das Verhalten der Media Queries auch per JavaScript regeln. Denn hin und...

Weiterlesen »

HTML

HTML5-Imports: HTML-Dateien in HTML-Dateien importieren

27. Juni 2014
von
HTML5-Imports: HTML-Dateien in HTML-Dateien importieren

Das „<link>“-Element ist ein Segen. Es ermöglicht das Einbinden von Stylesheet- und JavaScript-Dateien, die in mehreren Dokumenten benötigt werden. Allerdings war es bisher nicht möglich, darüber auch HTML-Dateien in ein Dokument zu laden. Wollte man diese einbinden, ging das bislang nur per „<iframes>“-Element oder über die JavaScript-Methode „XMLHttpRequest()“. Dank der neuen HTML5-Imports ist es jetzt auch möglich, HTML-Dateien per „<link>“ in ein anderes Dokument...

Weiterlesen »

Barrierefreiheit

SmartMenus für jQuery erstellt responsive und barrierefreie Menüs im Handumdrehen

24. Juni 2014
von
SmartMenus für jQuery erstellt responsive und barrierefreie Menüs im Handumdrehen

In Zeiten responsiver Websites ist die Gestaltung von Menüs eine besondere Herausforderung. Gerade bei umfangreichen und verschachtelten Menüs muss gewährleistet sein, dass sie auf Mobilgeräten übersichtlich und platzsparend dargestellt werden können. SmartMenus ist ein jQuery-Plugin für die Erstellung von responsiven und barrierefreien Menüs auf der Basis einer oder mehrerer Listen. So bauen Sie Menüs mit SmartMenus für jQuery Die HTML-Auszeichnung von Navigationsmenüs erfolgt in der...

Weiterlesen »

HTML

HTML5: Videos untertiteln mit dem neuen Track-Element

22. Juni 2014
von
HTML5: Videos untertiteln mit dem neuen Track-Element

Mit der Einführung der HTML5-Videos ist das Abspielen von Videos ganz ohne Plug-ins möglich. Doch HTML5-Videos bieten weit mehr, als Videos nativ im Browser darzustellen. Mit der Track-Funktion lassen sich auch Untertitel innerhalb von Videos einblenden. Diese werden in seiner separaten Textdatei abgelegt und können per Knopfdruck im Video ausgegeben werden. So machen Sie Videos für Hörgeschädigte und alle, die gerade keine Lautsprecher zur...

Weiterlesen »

Responsive Design

CSS-Framework Cute Grids: Flexibles Rastersystem für responsive Layouts

13. Juni 2014
von
CSS-Framework Cute Grids: Flexibles Rastersystem für responsive Layouts

Zeitgemäße Websites müssen auch für mobile Endgeräte optimiert sein und kommen daher um ein responsives Layout kaum noch herum. „Cute Grids“ ist ein sehr flexibles CSS-Framework, welches auf der Basis eines zwölfspaltigen Rasters unterschiedliche, responsive Layouts ermöglicht. Dabei kümmert sich „Cute Grids“ ausschließlich um die Anordnung von Spalten – und zwar in Abhängigkeit der Breite des Browserfensters. Schlankes Framework Da auf weitere Gestaltungselemente verzichtet wird,...

Weiterlesen »

Animationen

Demnächst auf Ihrem Bildschirm: CSS3-Animations mit der neuen JavaScript-Methode animate()

9. Juni 2014
von
Demnächst auf Ihrem Bildschirm: CSS3-Animations mit der neuen JavaScript-Methode animate()

Seit CSS3 sind Animationen in HTML-Dokumenten kein Problem mehr. Mit der „@keyframes“-Regel werden verschiedene Eigenschaften wie Position oder Größe eines HTML-Elementes definiert. Die dazugehörige „animation“-Eigenschaft sorgt dafür, dass die in den Keyframes festgelegten Eigenschaften in Bewegung geraten. Ganz ohne JavaScript und Plug-ins erstellen Sie so auch durchaus komplexe Animationen, die in allen modernen Browsern problemlos laufen. Problematisch wird es, wenn JavaScript ins Spiel kommen...

Weiterlesen »

CSS

CSS3: Viewport Units – Neue Einheiten für responsive Designs

3. Juni 2014
von
CSS3: Viewport Units – Neue Einheiten für responsive Designs

Dank prozentualer Angaben ist es ein Leichtes, Webdesigns zu entwickeln, die sich der Breite und bei Bedarf auch der Höhe des Browserfensters anpassen. Gerade wenn es darum geht, eine Website für verschiedene Medien wie Tablets und Smartphones zu entwickeln, ist dies eine gängige Praxis. Textblöcke, Bilder und andere Elemente passen sich so automatisch jeder Größe an. Doch Angaben in Prozent sind nicht immer angebracht,...

Weiterlesen »