Artikel von Denis Potschien

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

Javascript

Adobes Snap.svg: Animationen mit HTML 5 und ohne Flash

2. April 2014
von
Adobes Snap.svg: Animationen mit HTML 5 und ohne Flash

Flash war lange Zeit der Standard für vektorbasierte Animationen im Web. Mit dem Aufkommen mobiler Endgeräte wurde Flash immer mehr von HTML5 und CSS3 verdrängt. Dank des SVG-Formates, welches mittlerweile von allen modernen Browsern unterstützt wird, können vektorbasierte Grafiken ohne Plug-in im Browser dargestellt werden. Mit der JavaScript-Bibliothek Snap.svg aus dem Hause Adobe ist es zudem möglich, Animationen mit SVG-Grafiken zu erstellen. Bestehende SVG-Grafiken...

Weiterlesen »

Javascript

SVG und JavaScript: Was ist möglich, was muss beachtet werden?

21. Januar 2014
von
SVG und JavaScript: Was ist möglich, was muss beachtet werden?

Das SVG-Format gibt es zwar schon länger, war mangels flächendeckender Browserunterstützung jedoch nur bedingt einsatzfähig. Da mittlerweile alle aktuellen Browser das Format unterstützen und Flash immer mehr verdrängt wird, ist SVG noch interessanter geworden. Wie Flash ist auch das SVG-Format vektorbasiert und kann Animationen enthalten. Aber es hat noch eine Gemeinsamkeit zu Flash: Per Scriptsprache sind Programmierungen innerhalb des Formates möglich. Per JavaScript auf...

Weiterlesen »

PHP

HTML 5 und SVG: Per PHP und ImageMagick generiertes PNG-Fallback für ältere Browser

15. Januar 2014
von
HTML 5 und SVG: Per PHP und ImageMagick generiertes PNG-Fallback für ältere Browser

Das SVG-Format hat zahlreiche Vorteile: Vor allem, dass es vektorbasiert ist, macht es zu einer Besonderheit unter den gängigen Bildformaten für Browser. Auch wenn alle modernen Browser das Format mittlerweile unterstützen, gibt es gerade beim Internet Explorer noch Probleme. Denn dieser unterstützt SVG erst ab Version 9. Da auch ältere Versionen noch stark verbreitet sind, bietet sich ein Fallback an. Mit PHP und ImageMagick...

Weiterlesen »

CSS

HTML 5: Per JavaScript auf aktive CSS-Eigenschaften von Stylesheets zugreifen

2. Januar 2014
von
HTML 5: Per JavaScript auf aktive CSS-Eigenschaften von Stylesheets zugreifen

Per JavaScript auf CSS-Eigenschaften zuzugreifen, die innerhalb eines Elementes per STYLE-Attribut – sogenannte Inline-Styles – ausgezeichnet sind, ist keine große Sache. Dafür gibt es die entsprechende JavaScript-Eigenschaft „style“. CSS-Eigenschaften, die über interne oder externe Stylesheets – beispielsweise über Klassen oder IDs – zugewiesen sind, lassen sich mit dieser Eigenschaft jedoch nicht abfragen. Hierfür gibt es die relativ neue Methode „getComputedStyle()“. Alle aktiven CSS-Eigenschaften eines...

Weiterlesen »

CSS

SVG und CSS: Möglichkeiten und Grenzen der Gestaltung per Stylesheet

30. Dezember 2013
von
SVG und CSS: Möglichkeiten und Grenzen der Gestaltung per Stylesheet

SVG hat sich als Format für Vektorgrafiken im Browser etabliert. Grafikprogramme wie Adobes Illustrator unterstützen das Speichern in diesem Format und moderne Browser können sie problemlos darstellen. Da SVG-Grafiken wie auch HTML-Dokumente über eine Auszeichnungssprache erstellt werden, ist die Erstellung und Bearbeitung per Texteditor möglich. Für die Gestaltung von SVG-Grafiken kann man zudem auf Stylesheets zurückgreifen. Was den Einsatz von CSS betrifft, gibt es...

Weiterlesen »

Javascript

FileSystem-API: Dateien erstellen und lokal speichern mit JavaScript und Webkit

13. Dezember 2013
von
FileSystem-API: Dateien erstellen und lokal speichern mit JavaScript und Webkit

Mit der FileSystem-API ist es möglich, per JavaScript Dateien und Verzeichnisse zu erstellen und diese lokal auf dem Rechner des Nutzers zu speichern. Es kann sich dabei um einfache Text-, aber zum Beispiel auch um Bilddateien handeln. Moderne Webkit-Browser, die HTML5 unterstützen, können mittlerweile auch mit der FileSystem-API umgehen. Zugriff auf lokales Dateisystem Um Verzeichnisse und Dateien lokal speichern zu können, bedarf es freilich...

Weiterlesen »

Javascript

Codeblock.js: JavaScript direkt im Browser editieren und ausführen

11. Dezember 2013
von
Codeblock.js: JavaScript direkt im Browser editieren und ausführen

Wenn es um die Vorstellung von JavaScript-Frameworks und -Bibliotheken geht, ist es immer sinnvoll, den Nutzern mit konkreten Beispielen zu erklären, wie das Framework oder die Bibliothek funktioniert, wie sie eingesetzt wird und welche Einstellungsmöglichkeiten vorhanden sind. Statt nur Quelltext-Schnipsel zu veröffentlichen, ist es natürlich wünschenswert, wenn Besucher sich selbst am Quelltext versuchen können, ohne erst selbst JavaScript- und Demo-Dateien herunterladen zu müssen. Das...

Weiterlesen »

Webdesign

Wenn es im Browser schneit: Weihnachtliches für die Website

6. Dezember 2013
von
Wenn es im Browser schneit: Weihnachtliches für die Website

In der Vorweihnachtszeit werden nicht nur Häuser, Wohnzimmer und Straßen dekoriert und beleuchtet. Auch viele Websites werden weihnachtlich geschmückt und mehr oder weniger dezent in Weihnachtsstimmung versetzt. Wer selbst noch auf der Suche nach kleinen Gimmicks für die eigene Website ist, wird hier vielleicht fündig. „Snow3D“ Schnee im Browser Schnee ist gerade zur Weihnachtszeit als Dekoration besonders beliebt. Daher gibt es auch zahlreichen JavaScript-Schnee,...

Weiterlesen »

3D

CSS3: Komplexe Beschneidungspfade mit der Eigenschaft Clip-Path

17. Juni 2013
von
CSS3: Komplexe Beschneidungspfade mit der Eigenschaft Clip-Path

Bisher war es mit CSS nicht möglich, Elemente jenseits rechteckiger Begrenzungen darzustellen. Die mittlerweile etablierte Eigenschaft „border-radius“ erlaubt zwar abgerundete Ecken, die somit auch eine runde Grundform erlauben; komplexere Beschneidungen sind damit aber nicht zu erstellen. Die CSS3-Eigenschaft „clip-path“ bringt jedoch komplexe Beschneidungspfade zur Anwendung, die auch per SVG-Grafik definiert werden können. Maskierung in CSS nicht neu, aber… Die Möglichkeit, Elemente per CSS zu...

Weiterlesen »

CSS

HTML5up: 13 kostenlose und moderne Templates auf Basis von HTML5

12. Juni 2013
von
HTML5up: 13 kostenlose und moderne Templates auf Basis von HTML5

Wer nach fertigen Templates für Webprojekte sucht, wird bei Google schnell fündig. Aber nicht immer entsprechen die Vorlagen hinsichtlich Qualität von Quelltext und Gestaltung den eigenen Ansprüchen. Der Dienst HTML5up bietet hingegen einige optisch ansprechende und dank HTML5 und CSS3 auch zeitgemäß umgesetzte Templates für moderne Webprojekte. Und kostenlos sind diese obendrein. Übersicht aller Templates Templates für unterschiedliche Inhalte Die meisten kostenlos erhältlichen Templates...

Weiterlesen »