Artikel von Denis Potschien

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

Apps

WebApp-Manifest: So starten Sie Websites auf Mobilgeräten wie native Apps

19. Dezember 2014
von
WebApp-Manifest: So starten Sie Websites auf Mobilgeräten wie native Apps

Native Apps für Smartphones und Tablets sind nach wie vor beliebt, aber nicht immer notwendig. Vieles lässt sich als Webapplikation mit HTML5, CSS3 und JavaScript realisieren. Dank entsprechender JavaScript-APIs hat man beispielsweise Zugriff auf den Orientierungssensor und kann auch Gesten erkennen und entsprechend darauf reagieren. Mit dem WebApp-Manifest ist es zudem möglich, weitere klassische App-Eigenschaften für Webapplikationen zu übernehmen. Dazu gehört unter anderem das Bereitstellen spezieller...

JavaScript & jQuery

Dynatable für jQuery: Interaktives Tabellen-Plugin sorgt für flexible Datenpräsentation

12. Dezember 2014
von
Dynatable für jQuery: Interaktives Tabellen-Plugin sorgt für flexible Datenpräsentation

Tabellen sind immer dann hilfreich, wenn sie umfangreiche Informationen übersichtlich darstellen sollen. Im Web haben Tabellen zudem den Vorteil, dass sie nicht statisch sein müssen. Sie können unterschiedlich sortiert, gefiltert und durchsucht werden. Das jQuery-Plugin „Dynatable“ hilft dabei, Tabellen dynamisch zu machen und sie um die genannten Funktionen zu erweitern. Außerdem ist es mit dem Plugin möglich, große Tabellen zu paginieren und somit kompakter darzustellen....

Design

HTML5-APIs im Einsatz: Geschwindigkeiten messen mit User Timing und Navigation Timing

5. Dezember 2014
von
HTML5-APIs im Einsatz: Geschwindigkeiten messen mit User Timing und Navigation Timing

Gerade komplexe Webanwendungen setzen der Rechenleistung des Clients häufig zu. Vor allem auf mobilen Geräten ist es daher wichtig, besondere Vorsorge dafür zu treffen, dass alles flott läuft. Mit der neuen User-Timing-API können Ladezeiten einfach und vor allem präzise per JavaScript getestet werden. Denn die Messwerte beziehen ihre Werte der High-Resolution-Time-API, welche Zeiten auf die Mikrosekunde genau messen kann. Mit der Navigation-Timing-API ist es...

HTML/CSS

HTML5-Canvas: Mit „Path2D()“ Zeichenobjekte zusammenfassen und zwischenspeichern

28. November 2014
von
HTML5-Canvas: Mit „Path2D()“ Zeichenobjekte zusammenfassen und zwischenspeichern

Will man per Canvas eine Form mehrmals einsetzen, blieb einem bisher nichts anderes übrig, als diese immer wieder neu zu zeichnen. Das neue „Path2D()“-Objekt ermöglicht es, komplexe Formen zusammenzufassen und zwischenzuspeichern. So ist es möglich, immer wieder auf diese Formen zuzugreifen. Das spart Arbeit und schont die Ressourcen – vor allem auf mobilen Geräten. HTML5-Canvas: Objekt erstellen und Formen zeichnen Zunächst einmal wird ein neues...

Fortbildung

HTML5 und die Selection-API: Textauswahl und -bearbeitung mit JavaScript

22. Oktober 2014
von
HTML5 und die Selection-API: Textauswahl und -bearbeitung mit JavaScript

Per JavaScript die Textauswahl abzufragen, ist mit der Methode „getSelection()“ schon länger möglich. Die neue Selection-API erweitert diese Möglichkeit jedoch um einige neue Methoden und Eigenschaften, mit denen die Textauswahl bearbeitet und manipuliert werden kann. Es ist sogar machbar, mehr als einen Bereich eines Dokumentes auszuwählen – was ohne JavaScript nicht funktionieren würde. Auswahl erweitern und Cursor verschieben Eine Funktion der Selection-API ist, eine...

Fortbildung

HTML5 und die Web-Audio-API, Teil 2: Wir erstellen ein visuelles Audiospektrum per Canvas

17. Oktober 2014
von
HTML5 und die Web-Audio-API, Teil 2: Wir erstellen ein visuelles Audiospektrum per Canvas

Die neue Web-Audio-API mit ihren verschiedenen Möglichkeiten der Audiowiedergabe und -manipulation wurde hier bereits vorgestellt. Dabei haben wir einige der interessantesten Funktionen bereits vorgestellt. Ein recht komplexes Feld haben wir aber einem eigenem Artikel, nämlich diesem hier, vorbehalten. Denn, zusammen mit den Canvas-Zeichenfunktionen von JavaScript lässt sich damit auch ein visuelles Audiospektrum einer Wiedergabe realisieren. HTML-Elemente und „AudioContext“ bereitstellen Zunächst einmal werden ein Audioelement...

Fortbildung

HTML5 und die Web-Audio-API: Audiodateien abspielen, manipulieren und Klänge erzeugen

10. Oktober 2014
von
HTML5 und die Web-Audio-API: Audiodateien abspielen, manipulieren und Klänge erzeugen

Mit HTML5 und dem „<audio>“-Element ist es möglich, Audiodateien ganz ohne Plug-in im Browser abzuspielen. Mit der neuen Web-Audio-API kann man nun Audiodateien direkt per JavaScript laden oder eigene Klänge erzeugen. Außerdem kann die API die Wiedergabe von Audiodateien manipulieren, indem zum Beispiel Frequenzbereiche verändert werden. Wir werfen einen genaueren Blick auf die musikalische Schnittstelle. Anwendungsfall 1: Wiedergabe einer Audiodatei Zunächst einmal muss festgelegt...

Boilerplates & andere Tools

3D im Browser: Seen.js erstellt komplexe Grafiken und Animationen für Canvas und SVG

2. Oktober 2014
von
3D im Browser: Seen.js erstellt komplexe Grafiken und Animationen für Canvas und SVG

HTML5 und JavaScript bieten alle Funktionen, um komplexe Grafiken und Animationen im Browser zu realisieren. Die JavaScript-Bibliothek „seen.js“ bietet hierfür eine umfangreiche Auswahl an Möglichkeiten, um aufwändige 3D-Welten im Browser entstehen zu lassen. „seen.js“ ist unabhängig von jQuery oder anderen Bibliotheken und erstellt eindrucksvolle 3D-Objekte und Szenerien auf der Basis von HTML5-Canvas und SVG. 3D im Browser, ganz ohne Plugin… So entwickeln Sie mit...

Fortbildung

HTML5: So blenden Sie mit der Pointer-Lock-API den Mauszeiger bei Bedarf einfach aus

30. September 2014
von
HTML5: So blenden Sie mit der Pointer-Lock-API den Mauszeiger bei Bedarf einfach aus

Der Browser wird mehr und mehr zum Ort für Spiele. Dank HTML5 und den neuen JavaScript-APIs lassen sich komplexe und anspruchsvolle Anwendungen realisieren. Dabei ist der Mauszeiger nicht immer der richtige Begleiter. Vor allem, wenn die Steuerung per Tastatur erfolgt, stört der Mauszeiger in der Regel. Daher sorgt die neue Pointer-Lock-API dafür, dass er bei Bedarf einfach ausgeblendet werden kann. Pointer-Lock-API: Einfaches Aus- und...

Design

Sequence.js: Responsiver Content-Slider mit CSS3-Transitions und Gestensteuerung

18. September 2014
von
Sequence.js: Responsiver Content-Slider mit CSS3-Transitions und Gestensteuerung

Plug-ins für Content-Slider findet man wie Sand am Meer. Viele dieser Slider unterstützen auch CSS3-Transitions für Animationen und sind zum Teil responsiv gestaltet. Sequence.js ist dennoch eine Besonderheit unter den Content-Slidern. Denn dieses JavaScript ermöglicht nicht nur einen animierten Wechsel der einzelnen Slides. Auch die einzelnen Inhalte der Slides – Überschriften, Bilder etc. – können beim Wechsel animiert eingeblendet werden. Und wie es sich...