Artikel von Denis Potschien

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

Canvas

HTML5-Canvas: Einfacher zeichnen mit „Fabric.js“

26. August 2014
von
HTML5-Canvas: Einfacher zeichnen mit „Fabric.js“

Die Zeichenfunktionen von Canvas sind durchaus umfangreich und erlauben das Erstellen komplexer Formen und Animationen. Allerdings ist eine Kombination mehrerer Methoden notwendig, um beispielsweise eine Form zu erstellen, zu drehen und mit einer Farbe zu füllen. Die JavaScript-Bibliothek „Fabric.js“ vereinfacht die Möglichkeiten von Canvas und stellt Funktionen bereit, die gerade für komplexe Form- und Animationserstellungen Arbeitserleichterungen bringen. Außerdem sind Animationen und Interaktionen schnell eingerichtet...

Weiterlesen »

HTML

HTML5: mehr Flexibilität bei Formularen

21. August 2014
von
HTML5: mehr Flexibilität bei Formularen

Für Formulare hat HTML5 einige neue Möglichkeiten geschaffen. Eingabefelder für E-Mail-Adressen und Datumsangaben sind ebenso machbar wie Pflichtfelder und Eingabevorgaben – um nur einige zu nennen. Doch dank HTML5 lassen sich Formulare noch flexibler gestalten. So sind Formulare mit mehr als einem Submit-Button möglich. Außerdem können Eingabe- und Auswahlelemente auch außerhalb des eigentlichen Formulares ausgezeichnet werden. Mehrere Submit-Buttons für Formulare Bisher war für jedes...

Weiterlesen »

CSS

CSS3-Background-Blends: Überblendungseffekte wie mit Photoshop, aber in purem CSS3

19. August 2014
von
CSS3-Background-Blends: Überblendungseffekte wie mit Photoshop, aber in purem CSS3

Seit CSS3 ist es möglich, mehrere Hintergründe auf ein Element anzuwenden. Dabei werden diese Hintergrundgrafiken oder -farben einfach übereinander gelegt. Sind Transparenzen innerhalb der Hintergründe vorhanden, sorgen sie dafür, dass der darunter liegende Hintergrund hindurchscheint. Mit den neuen CSS3-Überblendungseffekten gibt es nun weitere Möglichkeiten, mehrere Hintergründe miteinander zu kombinieren. Hintergründe anlegen und Effekt auswählen Zunächst einmal müssen mehrere Hintergründe per „background“-Eigenschaft angelegt werden. Sollen...

Weiterlesen »

CSS

HTML5: Native Dialogfenster mit dem neuen Dialog-Element

14. August 2014
von
HTML5: Native Dialogfenster mit dem neuen Dialog-Element

Die neuen HTML5-Elemente und JavaScript-APIs ermöglichen es, komplexe Anwendungen für den Browser zu entwickeln. Dazu gehören ganz häufig auch Dialogfenster, über die Nutzer das Ausführen von bestimmten Handlungen bestätigen müssen oder die einfach eine Meldung ausgeben. Mit dem neuen „<dialog>“-Element lassen sich solche Dialogfenster zukünftig nativ per HTML5 auszeichnen. Einfache Auszeichnung ohne Stylesheets möglich Das „<dialog>“-Element kann an beliebiger Stelle im HTML-Body platziert werden....

Weiterlesen »

Javascript

Besser als pures CSS3: realistische, komplexe Schatten mit Shine.js

8. August 2014
von
Besser als pures CSS3: realistische, komplexe Schatten mit Shine.js

Dank CSS3 verfügen wir inzwischen über zahlreiche Möglichkeiten, Elemente mit Schatten zu versehen. So gibt es neben Text- und Elementschatten auch einen Schattenfilter. Allerdings erzeugen alle CSS3-Schatten lediglich einfache Schlagschatten, bei denen neben der Farbe bloß noch die Unschärfe, der Versatz und die Ausbreitung definiert werden können. Die JavaScript-Bibliothek „shine.js“ hingegen ermöglicht weitaus komplexere und realistischere Schatteneffekte. Schatten erzeugen shine.js von Benjamin Bojko und Naim...

Weiterlesen »

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 »