Articles by Denis Potschien

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

Bilder & Vektorgrafiken bearbeiten

Flexibel: Vivus-Framework animiert SVG mit JavaScript

22. Mai 2015
von
vivus

Dass mit dem SVG-Format in Kombination mit JavaScript anspruchsvolle und schicke Animationen möglich sind, beweisen die vielen Frameworks, die solche Animationen realisieren. Vivus reiht sich ein in diese Liste. Statt mit umwerfenden 3D-Effekten zu punkten, geht Vivus einen anderen Weg: Das Framework sorgt dafür, dass mehr oder weniger einfache Strichgrafiken per Animation gezeichnet werden. Dank einiger Einstellungsmöglichkeiten wird so aus einer ziemlich simplen Grafik ein sehr...

Design

Platzsparende Webfonts mit WOFF 2.0

20. Mai 2015
von
Webfonts mit WOFF 2.0

Während man in den Anfängen der Webfonts noch mehrere Dateiformate zur Verfügung stellen musste, hat sich das WOFF-Format mittlerweile zum Standard entwickelt, der von allen modernen Browsern unterstützt wird. Ältere Formate wie das EOT-Format braucht man nur noch, wenn man den Internet Explorer vor Version 9 unterstützen möchte. Nachdem das WOFF-Format im Jahr 2012 offizieller Standard wurde, gibt es mittlerweile mit WOFF 2.0 eine Weiterentwicklung,...

JavaScript & jQuery

JavaScript: echte Typografie im Web mit Type.js

15. Mai 2015
von
Type.js

Schöne und korrekte Typografie ist zuweilen ein schwieriges und aufwändiges Unterfangen. Alle typografischen Regeln und Gepflogenheiten zu berücksichtigen, ist nicht immer einfach und im Webdesign nicht immer machbar. Zwar gibt es dank CSS viele Möglichkeiten, Texte typografisch eindrucksvoll zu gestalten. Allerdings ist man trotz der stets wachsenden Möglichkeiten immer noch weit von den Typografiewerkzeugen entfernt, die zum Beispiel Layoutprogamme wie InDesign bereitstellen. Mit der JavaScript-Bibliothek...

JavaScript & jQuery

JavaScript: mit nativen Promises auf Callback-Verschachtelungen verzichten

8. Mai 2015
von
JavaScript Promises

Viele JavaScript-Frameworks wie jQuery und AngularJS kennen sogenannte Promises. Sie ermöglichen es, das Ergebnis asynchroner Aufrufe festzustellen und auf jenes Ergebnis zuzugreifen. Dabei lassen sich mehrere asynchrone Aufrufe „in Reihe schalten“. So wird erreicht, dass ein Aufruf erst gestartet wird, wenn ein anderer Aufruf bereits erfolgreich abgeschlossen wurde. Mittlerweile gibt es Promises auch als natives JavaScript-Objekt. So kann es ohne zusätzliche Frameworks und Bibliotheken eingesetzt werden. Wozu braucht man Promises?...

JavaScript & jQuery

Textures.js: SVG-Texturen für jede Oberfläche

26. April 2015
von
TEXTURE.JS

Das SVG-Format stellt eine Vielzahl an Möglichkeiten bereit, um komplexe grafische Inhalte umzusetzen. Auch Texturen lassen sich mit dem „<pattern>“-Element erstellen und auf Formen anwenden. Aber gerade bei einfachen und gängigen Texturen ist der Aufwand, diese selbst per SVG auszuzeichnen, im Verhältnis zum Ergebnis recht hoch. Daher stellt die JavaScript-Bibliothek „Texture.js“ solche Texturen, die weitestgehend nur aus Linien und Punkten bestehen, für SVG-Elemente zur Verfügung....

HTML/CSS

Was bedeutet Googles neuer Ranking-Faktor mobile-friendly?

21. April 2015
von
Ranking-Faktor mobile-friendly

Immer wieder schraubt Google an seinem Suchalgorithmus, um bessere Ergebnisse liefern zu können. So spielen eine Reihe von Faktoren wie Schlüsselwörter, Linkaufbau und Ladegeschwindigkeit eine entscheidende Rolle dabei, wie stark eine Website von Google bei den Suchergebnissen berücksichtigt wird. Ab dem 21. April, also ab dem heutigen Tage, kommt ein weitere Ranking-Faktor dazu: die Mobilfreundlichkeit einer Seite. Was bedeutet das für Seitenbetreiber und was bedeutet...

JavaScript & jQuery

Awesomplete: Schnelles Autocomplete-Widget, individuell gestaltbar

16. April 2015
von
Awesomplete: Schnelles Autocomplete-Widget, individuell gestaltbar

Dass einem bei einer Sucheingabe per Dropdown eine Liste mit Autocomplete-Vorschlägen angezeigt wird, ist keine Seltenheit. Dank des HTML5-Datalist-Elements lassen sich sehr einfach und ohne JavaScript solche Autocomplete-Listen erstellen. Die Möglichkeiten, diese Listen zu konfigurieren, sind jedoch beschränkt. So lässt sich mit dem Element beispielsweise nicht definieren, ab wie vielen Eingabezeichen die Liste mit den Vorschlägen dargestellt werden soll. Auch gibt es keine Möglichkeit, Vorschläge aus anderen...

Sonstige Programme

WebAnimator Plus: Anspruchsvolle Animationen für moderne Browser erstellen

13. April 2015
von
WebAnimator Plus: Anspruchsvolle Animationen für moderne Browser erstellen

Bis vor einigen Jahren war Flash fester Bestandteil des Webs – vor allem, wenn es darum ging, Animationen zu erstellen und diese auf einer Website bereitzustellen. Abgesehen davon, dass Flash damals fast die einzige Möglichkeit war, um Bewegung in eine Website zu bringen, trug sicher auch die grafische Oberfläche zum Erfolg bei. Animationen ließen sich ohne Programmierkenntnisse erstellen. Mit HTML5 und CSS3 hat sich die...

Apps

UX Companion: Fachbegriffe einfach erklärt per App

11. April 2015
von
UX Companion: Fachbegriffe einfach erklärt per App

Als Webdesigner und -entwickler hat man es häufig mit Fachbegriffen zu tun. Viele dieser Begriffe sind einem so in Fleisch und Blut übergegangen, dass man sich zuweilen schwer tut, diese zu erklären oder zu umschreiben. Bei anderen Begrifflichkeiten weiß man möglicherweise nur grob, was sie bedeuten. Da ist es nicht schlecht, wenn man den ein oder anderen Fachbegriff einmal nachschlägt. „UX Companion“ ist eine Nachschlage-App für...

HTML/CSS

Gut ankommen: Responsives CSS-Dropdown-Menü ohne JavaScript

7. April 2015
von
Gut ankommen: Responsives CSS-Dropdown-Menü ohne JavaScript

Wohin mit der Navigation? Diese Frage muss bei eigentlich jedem Webprojekt beantwortet werden. Gerade bei umfangreichen Websites ist es nicht immer einfach, die richtige Antwort darauf zu finden. Besteht eine Webpräsenz aus vielen Seiten und Unterseiten, bietet sich häufig ein Dropdown-Menü an. Dank CSS lassen sich Dropdown-Menüs ganz ohne Einsatz von JavaScript anlegen und mit Hilfe von Media Queries responsiv gestalten. Das macht die Menüs auch auf mobilen...