Kategorien
Boilerplates & andere Tools Developer-News JavaScript & jQuery Programmierung

Libraries.io: Neue Suchmaschine für Open-Source-Projekte

Libraries.io ist ein neues Projekt für Webdesigner und Entwickler. Es hilft dir dabei, Bibliotheken, Module und Frameworks aus dem Open-Source-Ozean zu fischen.

Kategorien
JavaScript & jQuery Programmierung

Grade.js: Farbverlaufsrahmen für deine Bilder mit JavaScript

Was ein sperriger Titel. Grade.js ist eine JavaScript-Bibliothek, die du nutzt, um deine Bilder automatisch rahmen zu lassen. Das Interessante daran ist, dass der Rahmen aus einem Farbverlauf der beiden dominantesten Farben aus der tatsächlichen Farbpalette des jeweiligen Bildes erstellt wird. Aber schreib das mal in eine Überschrift…

Grade.js: einfach zu verwenden, schicke Ergebnisse

Grade.js ist das neueste Projekt aus der Werkstatt des Entwicklers Ben Howdle aus dem Vereinigten Königreich. Ben verteilt die JavaScript-Bibliothek kostenfrei unter der MIT-Lizenz über Github. Die Funktionsweise kannst du dir auf dieser Demo-Seite anschauen.

Für die Einbindung in dein Projekt bestehen verschiedene Möglichkeiten. Du kannst zum einen das, unkomprimiert runde 104kb große Script runter- und wieder auf dein Projekt hochladen. Zum anderen kannst du es per npm installieren oder du nutzt den angegebenen CDN-Link.

Die Verwendung ist sehr einfach. Zunächst bindest du das Script ein und initialisierst es. Das geht zum Beispiel so:

 

 

Dann legst du einen Div-Container um das zu rahmende Bild. Dieser Container wird mit der Klasse "gradient-wrap" ausgezeichnet.

So kann das aussehen:

 

Das ist alles. Fortan werden alle auf der Seite vorhandenen Bilder, die in einem Container der Klasse "gradient-wrap" liegen, mit einem solchen Rahmen versehen:

gradejs-demo

Das JavaScript ermittelt hierzu die beiden dominantesten Farben aus der Farbpalette des jeweiligen Bildes und baut einen dazu passenden Farbverlauf. Logisch, dass du alle Bilder in jeweils einen eigenen Container legen musst, oder?

Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung

Neue Tools: Bewegung auf der Website mit und ohne Javascript

Die beiden Animationswerkzeuge, die ich dir heute vorstellen möchte, sind keine von der 0815-Sorte. Es handelt sich nicht um Animations-Generalisten, sondern Spezialisten für kleine Anwendungsfelder. Das Javascript Granim.js erlaubt es dir, Animationen mit Farbverläufen zu kreiieren, während sich Radiobox.css ausschließlich um das Aussehen deiner Radiobuttons kümmert.

Granim.js: Einfache Verlaufsanimationen mit großer Wirkung

Granim.js ist ein frisches Javascript aus der Feder des Pariser Entwicklers Benjamin Blonde. Mit der Hilfe dieses sehr kleinen Scripts animierst du Verläufe in, auf und um alles herum, was sich in einem Canvas-Element darstellen lässt.

Granim.js animiert Farbverläufe auf verschiedenste Art und Weise. (Screenshot: Dr. Web)
Granim.js animiert Farbverläufe auf verschiedenste Art und Weise. (Screenshot: Dr. Web)

Die Verwendung ist einfach:


Nachdem das Javascript nur knappe 10kb auf die Waage bringt, ist der Overhead wohl zu vernachlässigen. Es rechtfertigt sich damit auch ein Einsatz kleinsten Umfangs, etwa um das eigene Seitenlogo mit einem Farbverlauf zu animieren, so wie du es auf der Demoseite zum Projekt anschauen kannst. Achte auf den Schriftzug Granim.js oben links.

Wobei dir dieses Beispiel auch gleich zeigt, dass das Javascript nicht bloß einfache Verläufe anlegen kann, sondern ebenso in der Lage ist, mit Bildmasken zu arbeiten. Verläufe lassen sich per Klick oder generell per Event anstoßen, was insbesondere diese Seite eindrücklich zeigt. Beweg die Maus einfach mal über die Ghost-Buttons und du wirst sicherlich schnell Spaß an Granim.js finden.

Das Script steht auf Github zum freien Download zur Verfügung. Es ist mit der sehr liberalen MIT-Lizenz versehen, so dass du es auch in kommerziellen Projekten, also auf Kundenwebsites, zum Einsatz bringen kannst.

Radiobox.css: Animierte Optionsauswahl

Aus dem Hause 720kb stammt eine kleine Sammlung von CSS-Animationen, die deine Radiobuttons von Langeweile befreien sollen. Insgesamt 12 Variationen stehen bereit. Der Effekt tritt jeweils in Kraft, wenn der entsprechende Radiobutton geklickt wird. Je nach Effekt fängt der Button dann an zu hüpfen, dreht sich, wird größer und so weiter.

Radiobox.css ist eine Sammlung 12 kleiner Stylesheets für den Radiobutton-Einsatz. (Screenshot: Dr. Web)
Radiobox.css ist eine Sammlung 12 kleiner Stylesheets für den Radiobutton-Einsatz. (Screenshot: Dr. Web)

Probier es einfach mal aus. Radiobox.css bietet auf jeden Fall interessante Effekte für eine Schaltfläche, die ansonsten eher unbeachtet bleibt. Radiobox.css kommt allein mit CSS3 aus, benötigt aber natürlich einen modernen Browser, um zu funktionieren.

Die Verwendung ist sehr einfach. Du fügst deinem Radiobutton einfach diejenige Klasse zu, die dem gewünschten Effekt entspricht, z.B.:

<input type="radio" class="radiobox-boing"/>

Radiobox.css kommt, wie das bereits vorgestellte Granim.js, unter der MIT-Lizenz ins Haus und kann dementsprechend auch kommerziell genutzt werden. Lade es über Github runter.

Kategorien
JavaScript & jQuery Programmierung

Quill 1.0: Dieser Rich-Text-Editor für Web-Apps ist anders

Rich-Text-Editoren kennst du. Das sind diese Dinger, die aus einfachen Textfeldern eine Art Textverarbeitung zaubern. Jeder WordPress-Blogger verwendet einen, nämlich den TinyMCE, der immer noch Standard im beliebtesten CMS der Welt ist. Quill ist eine modernere Variante der gleichen Spezies.

Quill Projekt-Website. (Screenshot: Dr. Web)
Quills Projekt-Website. (Screenshot: Dr. Web)

Quill 1.0: Open Source und unabhängig

Quill hat es nach rund zwei Jahren als Open-Source-Projekt endlich geschafft, eine stabile Version 1.0 zu erreichen. Als positives Ergebnis dieser langen Entwicklungszeit mag gelten, dass die Dokumentation wirklich exzellent ist. Da können kleinere und jüngere Projekte kaum mithalten. Dabei ist eine gute Dokumentatioon gerade im Open-Source-Bereich von besonderer Bedeutung, denn es kommt häufig genug vor, dass vormals hochengagierte Kontributoren im Handumdrehen die Lust am Projekt verlieren und sich spontan abwenden.

Quill ist eine JavaScript-Lösung ohne weitere Abhängigkeiten, dafür mit eigener API. Alles, was du benötigst, um mit Quill produktiv arbeiten zu können, befindet sich in dem JavaScript-File, welches du schlicht wie gewohnt in deine Dokumente einbaust.

So fügst du Quill deiner Web-App hinzu

Um ein Element mit den Fähigkeiten von Quill auszustatten, fügst du in deinem HTML etwa folgendes ein:

Danach lässt du das Script auf das Element los. Das kann so aussehen:

var quill = new Quill('#editor-container', {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow' // or 'bubble'
});

Wenn nun jemand das Element verwendet, kommt zum Beispiel das dabei heraus:

Quill: Das bisschen Code links, erlaubt das Ergebnis rechts (und noch viel mehr). (Screenshot: Dr. Web)
Das bisschen Code links, erlaubt das Ergebnis rechts (und noch viel mehr). (Screenshot: Dr. Web)

Wie du schon im JavaScript-Quellcode sehen kannst, lässt sich Quill modular so auf das enthaltende Element anpassen, wie du es als Entwickler für richtig erachtest. Die einzelnen Funktionsmodule werden mit sprechenden Namen in die UI integriert. So erhalten deine Benutzer die Möglichkeit, Text fett zu formatieren, nur, wenn du bold zum Funktionsumfang zugefügt hast.

Quill: Flexibel dank eigener API

Die eigene API erlaubt es dir, weitere Funktionsmodule nach deinen Bedürfnissen zu erstellen und nahtlos in die UI von Quill einzufügen. Vielleicht muss deine Web-App CAD-Zeichnungen aufnehmen können, oder was weiß ich. Generell musst du Quill nicht konfigurieren. Es funktioniert out-of-the-box für die meisten Anwendungsfälle vollkommen zufriedenstellend.

Neben Erweiterungsmodulen für Features, die Quill nicht bietet, kannst du mit eigenen Funktionen auch solche ersetzen, die Quill bereits selber hat, wenn dir selbige nicht hinreichend sind. Alle Module solltest du als separate JavaScript-Dateien anlegen, kannst sie aber auch direkt zu Quill hinzufügen, was allerdings unter dem Gesichtspunkt einfacher Updates nicht sonderlich sinnvoll sein wird.

Die Möglichkeit, den Leistungsumfang des Editors zu erweitern oder zu verändern, verdankt Quill seinem größten Alleinstellungsmerkmale, der DOM-Abstraktionsebene Parchment. Im Quill-Blog findest du eine ausführliche Präsentation der Fähigkeiten von Parchment.  Du erfährst nämlich, wie du die UI der bekannten Publikations-Plattform Medium damit nachbauen könntest.

Ein gutes Gefühl für die Flexibilität des modernen Tools kannst du gewinnen, wenn du dich ein bisschen im interaktiven Playground auf der Projektseite umsiehst oder Codepen nutzt.

Die Entwickler legen besonderen Wert auf die Feststellung, dass Quill quer über alle Plattformen konsistent in gleicher Art und Weise funktioniert und sogar auf Tablets und Smartphones vollumfänglich nutzbar ist, sowie ausschließlich standardkonformes HTML erzeugt. Der gesamte In-, wie auch Output läuft über JSON.

Quill: Verfügbarkeit und Lizenz

Quill ist für den Einbau in die eigene Website via Download verfügbar, kann aber auch über ein CDN, getrieben von Amazon Cloudfront, in deine Dokumente eingebettet werden. Der Sourcecode ist auf Github zu erhalten. Da es sich um ein Open-Source-Projekt handelt, unterliegt die Nutzung keinen Beschränkungen. Du kannst Quill unter der BSD-Lizenz also auch in kommerziellen Projekten einsetzen.

Kategorien
JavaScript & jQuery Programmierung Webdesign

Cookies & Co.: Speichermöglichkeiten im Browser

Lange Zeit waren Cookies die einzige Möglichkeit, Informationen lokal im Browser zu speichern. Noch heute werden sie vor allem in Kombination mit serverseitigen Sessions verwendet. Doch dank HTML5 haben wir weitere Option, Daten lokal im Browser abzulegen. So gibt es den „Application Cache“ sowie „Web Storage“ und IndexedDB. Wofür aber gibt es die unterschiedlichen Speichermöglichkeiten und was können sie?

hunger-413685_1280

Mit Cookies Einstellungen und Sitzungen speichern

Cookies gab es schon zu Netscape-Zeiten. Sie werden bis heute eingesetzt, um Einstellungen für Websites und Webdienste zu speichern oder Sitzungen – sogenannte Sessions – zu verwalten. Dabei ist ein Cookie eine Textdatei, in der bis zu 4 Kilobyte an Text abgelegt werden kann. Du kannst Cookies per JavaScript anlegen und auslegen oder aber auch serverseitig beispielsweise per PHP.

Vor allem in Kombination mit Sessions spielen sie eine große Rolle. Sei es die Anmeldung in sozialen Netzwerken oder bei Online-Shops: Ein nach der Anmeldung gesetzter Cookie sorgt dafür, dass dich eine Website als Nutzer wiedererkennt.

Das Besondere an Cookies ist, dass sie mit einem Verfallsdatum versehen werden können. So haben Cookies in der Regel eine begrenzte Lebensdauer. Wird keine Lebensdauer festgelegt, verfällt ein Cookie mit dem Schließen des Browsers.

Grundsätzlich lassen sich Cookies nur von der Domain auslesen, über die sie auch gesetzt wurden. Es ist aber weitergehend möglich, einen Cookie auf bestimmte Subdomains oder Verzeichnisse zu beschränken.

Speichern per „Web Storage“

Mit der Einführung von HTML5 sind zwei weitere Speichermöglichkeiten etabliert worden: der „Web Storage“ bestehend aus „localStorage“ und „sessionStorage“. Beide Varianten erlauben es, ausschließlich per JavaScript Variablen und Werte im Browser zu speichern.

localStorage.setItem("name", "Manfred");
sessionStorage.setItem("name", "Manfred");

Während per „localStorage“ hinterlegte Daten dauerhaft im Browser verfügbar sind, bleiben per „sessionStorage“ gespeicherte Daten nur bis zum Beenden des Browsers gespeichert.

Im Gegensatz zu Cookies, welche eine einfache Textdatei darstellen, lassen sich hierbei beliebig viele Variablen vergeben und somit unterschiedliche Daten speichern und abrufen.

localStorage.getItem("name");

Während Cookies häufig in Kombination mit serverseitig gespeicherten Session-Variablen arbeiten, gibt es mit „localStorage“ und „sessionStorage“ eine ausschließlich lokale Speichermöglichkeit.

Komplette Websites offline speichern mit „Application Cache“

Mit HTML5 wurde mehr Fokus auf Mobilgeräte wie Smartphones und Tablets gelegt. So hast du mit dem „Application Cache“ die Möglichkeit, eine komplette Website offline verfügbar zu machen. Dabei kannst du über eine sogenannte Manifest-Datei festlegen, welche Ressourcen einer Website auf einem Gerät gespeichert und verfügbar gemacht werden sollen.

CACHE MANIFEST
index.html
stylesheet.css
logo.png

Diese per „CACHE MANIFEST“ eingeleitete Datei enthält alle Dateien für den Offline-Betrieb. Einmal heruntergeladen, ist dann keine Internetverbindung mehr notwendig, um die Seite aufzurufen. Im Gegensatz zum Browser-Cache bleiben die Dateien dauerhaft lokal gespeichert – ähnlich wie es auch bei nativen mobilen Apps der Fall ist.

Die Manifest-Datei muss im „<html>“-Element der Seite referenziert werden.

<html manifest="http://www.example.com/manifest.mf">

IndexedDB: Datenbank im Browser

Mit IndexedDB und WebSQL gab es zwei Ansätze, lokal im Browser angelegte Datenbanken zu etablieren. Durchgesetzt hat sich schlussendlich IndexedDB. Im Gegensatz zum „Web Storage“, der lediglich das Speichern von einfachen Variablen und textbasierten Inhalten ermöglicht, sind per IndexedDB deutlich komplexere Speichermöglichkeiten vorhanden.

Mit IndexedDB kannst du eine vollwertige Datenbank im Browser erstellen, in der du nicht nur Zeichenketten, sondern auch Zahlen und Objekte unterbringst.

var request = indexedDB.open("beispiel", 1);

Im Beispiel wird eine Datenbank angelegt. Anschließend erstellst du sogenannte „Stores“, in welche du einzelne Datensätze ablegst.

request.onupgradeneeded = function() {
  var db = request.result;
  var store = db.createObjectStore("artikel", {keyPath: "id"});
  var titel_index = store.createIndex("nach_titel", "titel", {unique: true});
  var autor_index = store.createIndex("nach_autor", "autor");
  store.put({title: "HTML5 und CSS3", author: "Denis", id: 123456});
  store.put({title: "Mobile Apps", author: "Dieter", id: 234567});
};

request.onsuccess = function() {
  db = request.result;
};

Hier wird ein „Store“ mit Artikeln angelegt. Anschließend werden zwei Indizes definiert, welche Datensätze unterschiedlich sortieren. Per „put()“ werden zum Schluss die Datensätze in die Datenbank geschrieben.

Fazit und Entwicklerwerkzeuge

Entwicklerwerkzeuge im Chrome
Entwicklerwerkzeuge im Chrome

Wer zeitgemäße Webanwendungen mit HTML5 entwickelt möchte, hat mit „Application Cache“, „Web Storage“ und IndexedDB drei Möglichkeiten, Daten auf unterschiedliche Weise lokal im Browser zu speichern und offline verfügbar zu machen. Gerade bei mobilen Webanwendungen ist dies ein wichtiger Aspekt. Serverbasierte Lösungen sind nicht nötig.

Die Entwicklerwerkzeuge aktueller Browser geben dir zudem die Möglichkeiten, die gespeicherten Inhalte darzustellen und Bedarf auch wieder zu löschen.

(dpe)

Kategorien
JavaScript & jQuery Programmierung

ZingTouch: Umfangreiche Gestenerkennung per JavaScript

Die Wahrscheinlichkeit, dass deine Website über ein Smartphone oder Tablet angesteuert wird, wächst beständig. Die mobile Internetnutzung nimmt nach wie vor zu und es wird daher zunehmend wichtig, dass eine Website die besondere Bedienung per Touchdisplay berücksichtigt. Neben einfachen Taps haben sich zahlreiche Gesten etabliert, mit denen Mobilgeräte gesteuert werden. Mit ZingTouch steht dir eine umfangreiche JavaScript-Bibliothek zur Verfügung, die dir die Bedienung deiner Website über Gesten ermöglicht.

Tap-Gesten

Standardgesten auch für mehrere Finger

Grundsätzlich stellt dir JavaScript alle Möglichkeiten zur Verfügung, verschiedene Gesten zu interpretieren. Mit den Touch-Events fragst du zum Beispiel Berührungen auf dem Display ab und zeichnest Bewegungen auf. Dabei ist es möglich, mehrere Finger, die sich gleichzeitig auf dem Display befinden, nachzuhalten.

Um die verschiedenen gängigen Gesten interpretieren zu können, gibt es ZingTouch. Die JavaScript-Bibliothek kann sowohl einfache Taps als auch Taps mit mehreren Fingern interpretieren und unterschiedlich darauf reagieren.

Drehungen auf dem Display oder das Auseinander- und Zusammenziehen von Fingern erkennt ZingTouch ebenfals und ermöglicht so, auf unterschiedliche Gesten reagieren zu können.

Beispiele auf CodePen
Beispiele auf CodePen

ZingTouch einbinden und Gesten abfragen

Um ZingTouch nutzen zu können, muss die Bibliothek zunächst in dein HTML-Dokument eingebunden werden. Anschließend erstellst du eine sogenannte Region, die auf eine bestimmte Geste reagieren soll. Eine solche Region ist ein beliebiges HTML-Element.

var region = ZingTouch.Region(document.getElementById("container"));

Im Beispiel wird der Variablen „region“ per „ZingTouch.Region()“ das HTML-Element mit der ID „container“ zugewiesen. Im nächsten Schritt wird eine Geste definiert, auf die reagiert werden soll.

var geste = new ZingTouch.Tap({
  numInputs: 2,
  maxDelay: 1000
});

Im Beispiel wird per „ZingTouch.Tap()“ ein Tap definiert. Diesem kannst du verschiedene Parameter übergeben. Hier werden per „numInputs“ die Anzahl der Berührungspunkte angegeben, die auf die Region erfolgen müssen. Außerdem wird per „maxDelay“ in Millisekunden angegeben, wie lange der Tap maximal dauern darf.

Im konkreten Fall müssen also zwei Finger für maximal eine Sekunde auf der Region platziert sein. Im letzten Schritt wird die Geste per „bind()“ an die Region gebunden und eine Funktion angegeben, die bei erfolgreich ausgeführter Geste gestartet werden soll.

region.bind(document.getElementById("container"), geste, function(e) {
  console.log("Tapped.");
});

Dieses einfache Beispiel sorgt dafür, dass per Zwei-Finger-Tap auf das Element mit der ID „container“ in der Konsole „Tapped.“ geschrieben wird.

Sechs Gesten individuell konfigurierbar

Rotate-Geste
Rotate-Geste

Neben recht einfachen Tap-Gesten sind noch fünf weitere Gesten möglich. So kannst du Drehungen per Rotate-Geste, Auseinander- und Zusammenschieben per Expand- und Pinch-Geste, Umkreisen per Pan-Geste und klassisches Wischen per Swipe-Geste realisieren.

Für jede Geste stehen dir unterschiedliche Konfigurationsmöglichkeiten zur Verfügung. So gibst du bei der Swipe-Geste beispielsweise die Geschwindigkeit an, mit der die Geste ausgeführt werden muss.

new ZingTouch.Swipe({
  escapeVelocity: 0.25,
});

Für jede Geste gibt es auch Rückgabewerten, die ausgelesen und ausgewertet werden können. So gibt die Swipe-Geste zum Beispiel einen Winkel wieder, der die Richtung der Wischgeste darstellt.

region.bind(document.getElementById("container"), "swipe", function(e) {
  console.log(e.detail.data[0].currentDirection";
});

Im Beispiel wird die Geste ohne zusätzliche Parameter einfach an die „bind()“-Methode übergeben. Bei erfolgreicher Durchführung der Geste wird der Richtungswinkel „currentDirection“ in die Konsole geschrieben.

Umfangreiche Dokumentation

Umfangreiche und anschauliche Dokumentation
Umfangreiche und anschauliche Dokumentation

ZingTouch ist ein umfangreiches Werkzeug, mit dem du alle gängigen Gesten abdeckst und diese ohne großen Aufwand in deine eigenen mobilen Webprojekte implementierst. Es gibt eine umfangreiche Dokumentation mit zahlreichen Beispielen auf CodePen.

Die Bibliothek steht unter der freien MIT-Lizenz. Du kannst ZingTouch also auch kommerziell einsetzen.

Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung Webdesign

HTML5 und JavaScript: So erstellst du mobile Web-Apps

Mobile Web-Apps müssen nicht immer nativ programmiert werden. Auch mit HTML5 und den damit eingeführten JavaScript-APIs entwickelst du mobile Web-Apps, die bezüglich der Funktionalität den nativ programmierten Apps in (fast) nichts nachstehen. Dazu kommt, dass native Anwendungen auch ihre Nachteile haben, die du mit HTML5 nicht hast.

mobile Web-Apps

Kein Store-Zwang, keine unterschiedlichen Plattformen

Apps sind auf Smartphones und Tablets zu einem unverzichtbaren Bestandteil geworden. Wer jedoch selbst mobile Apps anbieten möchte, wird schnell feststellen, dass dies mit einigen Hürden und nicht wenig Aufwand verbunden ist. Zunächst einmal müssen native Apps für jede Plattform – unter anderem iOS und Android – eigenständig entwickelt werden. Die sogenannten Hybrid-Apps, die auf mehreren Plattformen laufen, stellen hingegen nur eine Art Container dar, der in HTML und JavaScript programmierte Webanwendungen enthält.

Googles Play Store
Googles Play Store

Ein weiterer Nachteil nativer Apps ist, dass diese nur über den jeweiligen App-Store installiert werden können. Das führt im Play Store von Google zu einmaligen Registrierungskosten und bei Apple zu regelmäßigen Kosten. Zwar ist es auf Androidgeräten möglich, Apps auch ohne Store zu installieren. Dazu müssen jedoch in den Geräteeinstellungen explizit App-Installationen aus „unbekannten“ Quellen zugelassen werden.

Bei Webanwendungen bestehen all diese Probleme nicht. Sie werden in HTML5 und JavaScript programmiert und sind somit unabhängig von Betriebssystemen und Stores.

Geräteorientierung und Standortbestimmung

Viele Apps nutzen die speziellen Gerätefunktionen, mit denen Smartphones und Tablets ausgestattet sind. Dazu gehört das Gyroskop, welches die Drehung eines Gerätes um die eigene Achse erkennt und so beispielsweise feststellt, ob ein Gerät im Portrait- oder Landscape-Modus gehalten wird. Das geht auch mit JavaScript.

window.addEventListener("deviceorientation", function() {
 console.log(e.alpha);
 console.log(e.beta);
 console.log(e.gamma);
}, true);

Im Beispiel werden über das Ereignis „deviceorientation“ drei Winkel ausgegeben, welche die aktuelle Drehung des Gerätes darstellen.

Ebenfalls häufig verwendet ist die Standortbestimmung per GPS. Neben Navigationsanwendungen sind es vor allem Apps sozialer Netzwerke, die gerne auf den jeweiligen Standort des Nutzers zugreifen. Auch dies ist per JavaScript möglich.

navigator.geolocation.getCurrentPosition(function(position) {
 console.log(position.coords.latitude, position.coords.longitude);
});

Im Beispiel werden per „geolocation“ die Koordinaten des Längen- und Breitengrades ausgegeben. So lässt sich die jeweilige GPS-Position ermitteln.

Offline-Speichern per Application Cache

Native Apps haben gerade auf mobilen Geräten den Vorteil, dass sie einmal heruntergeladen werden und dann auch ohne Internetverbindung zur Verfügung stehen. Aber auch dies ist kein Grund, zwingend auf eine native App zu setzen. Denn der Application Cache von HTML5 erlaubt es ebenfalls, Dateien einer Webanwendung dauerhaft auf einem Gerät zu speichern.

Dazu wird im HTML-Element eine sogenannte Manifest-Datei referenziert, über die definiert ist, welche Dateien beim erstmaligen Laden der Seite auf dem Gerät gespeichert werden sollen.

<html manifest="example.appcache">

Die Manifest-Datei enthält dann aufgelistet alle Dateien der Website, die offline verfügbar gemacht werden.

CACHE MANIFEST
index.html
stylesheet.css
logo.png

Im Beispiel werden drei Dateien heruntergeladen und anschließend immer aus dem Application Cache geladen statt aus dem Internet.

Gestensteuerung

Während auf Desktopgeräten die Maus regiert, sind es auf Smartphones und Tablets die Finger. Neben einfachen Taps, die weitestgehend den Mausklick ersetzen, sind mit den Fingern auch sogenannte Gesten möglich. Am bekanntesten dürfte die Wischgeste stein, mit der beispielsweise Menüs ein- und ausgeblendet werden oder durch eine Bildergalerie geblättert wird.

Auch diese Funktionalität lässt sich per JavaScript realisieren. Hierzu gibt es verschiedene „touch“-Ereignisse, welche ähnlich funktionieren wie die „mouse“-Ereignisse. So stehen dir „touchstart“, „touchmove“ und „touchend“ zur Verfügung, mit denen die Position eines Fingers auf dem Display wiedergegeben wird. Dabei können mit den „touch“-Ereignissen auch mehrere gleichzeitig platzierte Finger registriert werden.

document.getElementsByTagName("body")[0].addEventListener("touchmove", function(e) {
  console.log(e.changedTouches[0].pageX);
  console.log(e.changedTouches[0].pageY);
}, false);

Über „changedTouches“ werden alle Berührungen auf dem Display als Array gespeichert. Im Beispiel werden die Koordinaten der jeweils ersten Berührung wiedergegeben.

Kamerazugriff

Noch relativ neu ist die Möglichkeit, auf Kameras per „getUserMedia()“ zuzugreifen. Hierzu wird zunächst ein leeres „<video>“-Element mit eingeschaltetem Autoplay platziert.

<video autoplay="autoplay"></video>

Anschließend wird per „getUserMedia()“ das Kamerabild dort hinein platziert.

navigator.getUserMedia ({
  audio: true,
  video: true
}, function (stream) {
  document.getElementsByTagName("video")[0].src = window.URL.createObjectURL(stream);
}, function() {
  console.log("Fehler");
});

„getUserMedia()“ erwartet drei Parameter. Zunächst definierst du, ob Video- und Audioinhalt übertragen werden sollen. Anschließend wird eine Funktion erwartet, die den Stream verarbeitet und im Beispiel dem „<video>“-Element übergibt. Als letztes muss noch eine Callback-Funktion her, die im Falle eines Fehlers aufgerufen wird.

Derzeit muss „getUserMedia()“ noch mit Vendor-Prefix – zum Beispiel „webkitGetUserMedia()“ – ausgezeichnet werden.

Web-Apps mit dem Web-Application-Manifest auf dem Startbildschirm platzieren

Im mobilen Chrome gibt es die Funktion „Zum Startbildschirm hinzufügen“. Hierbei wird ein Lesezeichen nicht im Browser, sondern auf dem Startbildschirm platziert. Über eine Manifest-Datei hast du die Möglichkeit, einen vom Seitentitel abweichenden Namen und ein eigenes Icon definieren.

Chrome und die Funktion „Zum Startbildschirm hinzufügen“
Chrome und die Funktion „Zum Startbildschirm hinzufügen“

Dazu muss die Manifest-Datei zunächst im HTML-Kopf definiert sein.

<link rel="manifest" href="manifest.json">

Anschließend wird in dieser Datei im JSON-Format festgelegt, wie das Lesezeichen auf dem Startbildschirm dargestellt werden soll.

{
  "name": "Demo",
  "icons": [{
    "src": "icon_36x36.png",
    "sizes": "36x36",
    "type": "image/png",
    "density": 1
  }]
}

Im Beispiel werden per „name“ die Bezeichnung des Lesezeichens und per „icons“ eine Reihe von Dateien definiert, die Icons in unterschiedlichen Auflösungen und Pixeldichten referenzieren.

Auch das Verhalten der Anwendung, wenn sie über den Startbildschirm geöffnet wird, lässt sich festlegen.

"display": "standalone",
"orientation": "portrait"

Per „display“ wird eine Website zu einer Standalone-Anwendung. Hierbei werden Adressleiste und Menü des Browser ausgeblendet und die Website im Vollbild dargestellt. Per „orientation“ kannst du Portrait- oder Landscape-Modus vorgeben.

Fazit

Dank des Web-Application-Manifestes unterscheiden sich einmal auf dem Startbildschirm abgelegte, mobile Web-Apps kaum noch von nativen Apps. Mit Hilfe der zahlreichen JavaScript-APIs ist es zudem möglich, nahezu alle Features von Smartphones und Tablets zu nutzen, die auch native Apps nutzen können.

(dpe)

Kategorien
JavaScript & jQuery Programmierung

Mit Anime.js animierst du CSS, SVG und mehr ganz einfach

Zu den zahlreichen Frameworks für Animationen gesellt sich mit anime.js ein weiteres. Im Gegensatz zu den vielen anderen Frameworks erlaubt anime.js nicht nur die Animation per CSS-Eigenschaften. Du kannst damit auch SVG- und HTML-Eigenschaften per Animation verändern. Gerade im modernen Webdesign ist das SVG-Format kaum wegzudenken. Das Framework kommt jedenfalls zur rechten Zeit.

Einfache CSS-Animationen

Hast du die JavaScript-Datei von anime.js eingebunden, erstellst du auf CSS-Eigenschaften basierende Animationen recht einfach. Über den Aufruf von „anime()“ übergibst du eines oder mehrere Ziele – also Elemente, die animiert werden sollen. Anschließend definierst du die CSS-Eigenschaften, die per Animation verändert werden sollen.

anime({
  targets: [document.getElementsByTagName("div")[0]],
  translateX: "300px",
  rotate: 180,
  duration: 2000,
  direction: "alternate",
  loop: true,
  elasticity: 600,
  easing: "easeOutElastic"
});

Im Beispiel wird per „targets“ ein „<div>“-Element übergeben. Du kannst auch einfach eine ID angeben. Es folgen zwei CSS-Eigenschaften – „translateX“ und „rotate“ –, die animiert werden sollen. Anschließend wird per „duration“ die Dauer und per „direction“ die Richtung der Animation festgelegt. Die Animation dauert hier also zwei Sekunden. Anschließend wird die Animation rückwärts ausgeführt. Per „loop“ legst du noch fest, dass sich die Animation in einer Schleife wiederholt.

Während einer Animation

Grundsätzlich ist dieses einfache Beispiel auch ohne JavaScript möglich, indem man die „@keyframes“-Regel zusammen mit „animation“ einsetzt. Bei anime.js kommt jedoch noch die besondere Eigenschaft „elasticity“ hinzu, die es erlaubt, einer Animation eine Elastizität mitzugeben. Je höher der Wert ist, desto elastischer wird animiert. Das heißt, am Ende der Animation bleibt diese nicht sofort stehen, sondern pendelt sich aus. Hiermit lassen sich sehr natürliche Bewegungen realisieren.

30 Easingeffekte

Wie bei klassischen CSS3-Animationen hast du mit anime.js die Möglichkeit, einer Animation ein Easing hinzuzufügen. Insgesamt stehen dir 30 verschiedene Easingeffekte zur Verfügung – also deutlich mehr als bei CSS3.

Gibst du „anime.easings“ über die Browser-Konsole aus, erhältst du eine Liste aller Effekte. Zusammen mit „elasticity“ ergeben sich jenseits des sonst üblichen sehr interessante Effekte.

SVG-Pfadanimationen

Wie bereits erwähnt sind Animationen mit SVG-Eigenschaften wie beispielsweise der „d“-Eigenschaft eines Pfades möglich. So realisierst du sehr einfach etwa eine Animation entlang eines Pfades.

Dazu definierst du per SVG zunächst ein „<path>“-Element sowie ein weiteres Elements – zum Beispiel ein „<div>“-Container –, welches sich entlang des Pfades bewegen soll.

anime({
  targets: [document.getElementsByTagName("div")[0]],
  translateX: anime.path(document.getElementsByTagName("path")[0]),
  translateY: anime.path(document.getElementsByTagName("path")[0]),
  rotate: anime.path(document.getElementsByTagName("path")[0]),
  duration: 5000,
  loop: true,
  easing: "linear"
});

Per „targets“ wird wieder das zu animierende Element referenziert. Über „translateX“, „translateY“ und „rotate“ wird per „anime.path()“ der SVG-Pfad angegeben, an dem entlang das „<div>“-Element animiert werden soll.

SVG-Morphing

Mit dem von Google eingeläuteten Ende von SMIL sind animierte Formänderungen von SVG-Elementen nicht mehr möglich – zumindest in zukünftigen Versionen des Browsers. Mit anime.js realisierst du jedoch weiterhin ganz einfach solche Animationen.

Dazu definierst du zunächst einen SVG-Pfad, den du später ganz einfach in eine andere Form morphen lassen kannst.

anime({
  targets: [document.getElementsByTagName("path")[0]],
  d: "M140,51.75A51.75,51.75,0,0,0,99.2,35.27a83,83,0,1,0,65.13,65.67A51.76,51.76,0,0,0,140,51.75Z",
  duration: 1000,
  loop: true,
  direction: "alternate",
  easing: "linear"
});

Im Beispiel wird als „targets“ ein SVG-Pfad referenziert. Über „d“ gibst du einen Zielpfad an, der die Form definiert, in welche das „<path>“-Element morphen soll. Wichtig ist, dass die Anzahl der Punkte im Quell- und Zielpfad identisch sind. Sonst gibt es unschöne Effekte statt eines schönen Morphings.

Interaktive Animationen

Zu guter Letzt ermöglicht dir anime.js auch noch, interaktive Animationen zu erstellen. So gibt es mit „play()“, „pause()“ und „restart()“ Methoden, mit denen du das Abspielen steuerst. Mit „seek()“ springst du zudem an eine bestimmte Position innerhalb der Animation. Dazu übergibst du entweder eine Zeit oder einen prozentualen Wert.

Außerdem stehen die Eigenschaften „begin“, „update“ und „complete“ zur Verfügung, denen du eine Funktion übergeben kannst. Diese Funktion wird dann entsprechend beim Beginn, bei Veränderungen während der Animation oder am Ende der Animation ausgeführt.

Fazit

Beispiel auf CodePen
Beispiel auf CodePen

anime.js hat alles, was du für einfache und komplexe CSS- und SVG-Animationen brauchst. Es gibt eine übersichtliche API-Referenz mit einigen Beispielen. Zudem läuft das Framework unter allen gängigen Browsern einschließlich des Internet Explorers ab Version 10.

Die hier vorgestellten Code-Beispiele findest du auf CodePen:

(dpe)

Kategorien
Boilerplates & andere Tools JavaScript & jQuery Programmierung Webdesign

Mit Adobe Animate und Snap.SVG animierte SVGs erstellen

Mit Animate CC hat auch Adobe das Ende von Flash eingeläutet. Zwar unterstützt das umbenannte Animationsprogramm nach wie vor Flash, aber der Schwerpunkt liegt auf HTML5 und WebGL. So entscheidest du vor jedem neuen Projekt, ob du eine Animation per HTML5-Canvas oder per WebGL erstellen möchtest. Animierte SVGs waren mit Animate CC bislang allerdings nicht möglich. Die Erweiterung „Snap.SVG Animator“ erweitert den Funktionsumfang von Animate CC genau um diese Möglichkeit.

snapsvg_framework
Das Framework Snap.SVG

Snap.SVG sorgt für vektorbasierte SVG-Animationen

Das Besondere an Flash war immer, dass es vektorbasierte Grafiken und Animationen in den Browser brachte. Das war in Zeiten vor SVG nicht möglich. Abgesehen von Schriften kamen nur pixelbasierte Formate wie JPEG und GIF zum Einsatz. Mit der Einführung von HTML5 wurde auch das XML-basierte SVG-Format beliebter, welches ähnlich wie Flash vektorbasiert und animierbar ist.

Damit hat das SVG-Format einen entscheidenden Vorteil zu HTML5-Canvas, welches Animationen nur pixelbasiert ermöglicht. Gerade beim Heranzoomen wird der Nachteil dieses Formates zu SVG deutlich. Da Animate CC grundsätzlich vektorbasiert ist, bietet es sich freilich an, vektorbasierte Ausgabeformate bereitzustellen.

Da SVG-Animationen jenseits der CSS3-Eigenschaften „transition“ und „animation“ per JavaScript realisiert werden, gibt es zahlreiche Frameworks, die dich dabei unterstützen, komplexe animierte SVGs zu erstellen. Eines der bekanntesten Frameworks ist Snap.SVG. Dieses stellt dir zahlreiche Methoden zur Verfügung, mit denen du Formen erstellst und diese auf unterschiedliche Art und Weise animierst.

Dabei erlaubt dir Snap.SVG eben auch interaktive Animationen, die per Klick oder Tap ausgelöst werden. Wer einen Blick in die Dokumentation von Snap.SVG wirft, stellt schnell fest, wie umfangreich das Framework ist. Mit der Animate-Erweiterung „Snap.SVG Animator“ wird die einfache Handhabung von Adobe Animate CC mit der komplexen Vielfalt von Snap.SVG kombiniert.

Kostenlose Erweiterung installieren und loslegen

Zunächst einmal musst du die kostenlos verfügbare Erweiterung „Snap.SVG Animator“ installieren. Du findest diese auf der Website der Adobe Add-ons. Die Erweiterung ist sowohl für die Windows- als auch für die Mac-Version von Adobe Animate CC verfügbar. Du installierst die Erweiterung entweder manuell oder direkt über die Creative Cloud.

snapsvg_assons
Erweiterung für Animate CC

Sobald „Snap.SVG Animator“ installiert ist, findest du in Animate CC den neuen Dokumenttyp „SnapSVGAnimator“. Du wählst also nicht nur zwischen HTML5, WebGL und ActionScript aus, sondern erhältst nun auch die Möglichkeit, ein SVG-Dokument anzulegen. Wie bei den anderen Dokumenttypen ist ein nachträglicher Wechsel nicht möglich.

snapsvg_dokumenttyp
Neuer Dokumenttyp in Animate CC nach Installation der Erweiterung

Du musst dich also zu Beginn eines neuen Projektes entscheiden, in welchem Format du entwickeln und gestalten möchtest. Anschließend arbeitest du ganz wie gewohnt mit Animate CC. Das heißt, du legst Formen an, konvertierst sie in Symbole und erstellst Animationen.

Aktionen erstellen per JavaScript

Dabei besteht die Möglichkeit, mit „Snap.SVG Animator“ interaktive SVG-Animationen zu erstellen. Während dir bei HTML-Canvas und WebGL Codefragmente zur Verfügung stehen, die du relativ einfach in dein Aktionen-Fenster ziehst, gibt es solche Fragmente beim Typ „SnapSVGAnimator“ nicht. Allerdings steht eine übersichtliche API mit den wichtigsten Methoden bereit.

So definierst du eine Klick-Aktion für eine Symbolinstanz sehr einfach.

this.beispiel.click(function() {
  this.beispiel.play();
});

Im Beispiel wird beim Klick auf die Instanz „beispiel“ diese abgespielt.

SVG-Dokument veröffentlichen

Das Veröffentlichen deines SVG-Dokumentes ist ebenfalls einfach und unkompliziert. Du gibst eine Ausgabedatei an und hast die Möglichkeit, über die erweiterten Einstellungen die Komprimierung der auszugebenen Dateien zu beeinflussen.

Die Ausgabe enthält neben einer HTML- und einer JSON-Datei zwei JavaScript-Dateien. Diese beinhalten das Snap.SVG-Framework, sodass alle notwendigen Dateien von Animate CC beziehungsweise der Erweiterung generiert werden und zur Verfügung stehen.

(dpe)

Kategorien
Developer-News JavaScript & jQuery Programmierung

Co.cycles, die Suchmaschine für Open-Source-Code

Mensch, wie war das noch mit der Datumsvalidation in JavaScript? Weißt du noch, wie man checkt, ob ein Objekt leer ist? Klingt ziemlich speziell, oder? Und das ist gut so, denn genau diese sehr speziellen Fragestellungen sind es, die im Alltag eines Webdevelopers wesentlich öfter vorkommen als die Frage, welches Framework generell besser ist als jenes. Die neue Suchmaschine Co.cycles ist eine sehr interessante Hilfe für diese Alltagsfragen.

Co.cycles, die Suchmaschine für Open Source-Code

Foren: Entwicklerhilfen ganz klassisch

Ich bin Mitglied in diversen Foren, die sich mit Fragen der Frontend-Entwicklung beschäftigen und ich bin großer Verfechter der Verwendung der Forensuchfunktionen ;-) Auf der Basis des Helfens und Geholfenwerdens habe ich zahllose Probleme, die ich im Rahmen meiner täglichen Arbeit sonst nicht oder nur mit unverhältnismäßig hohem Aufwand hätte lösen können, vom Tisch bekommen. Generell kann man indes sagen, dass es auch in Foren umso schwieriger wird, schnell Hilfe zu bekommen, je konkreter oder spezieller die Fragestellung wird. Auch über die Suchfunktionen gefundene Hilfen müssen teils uminterpretiert werden, um auf den eigenen Problemfall zu passen.

Da ist es gut, dass sich jetzt zu der weiterhin unschätzbaren Hilfe, die über Foreninteraktion zu erhalten ist, eine neue Suchmaschine für frei verfügbaren Code hinzugesellt. Co.cycles heißt die, optisch Google nicht unähnliche, Suchmaschine, die sich anschickt, ein unverzichtbarer Begleiter der Webdeveloper unserer Tage zu werden.

Co.cycles, die Suchmaschine für Open Source-Code

Co.cycles: Entwicklerhilfe auf Steroiden

Co.cycles kann zum jetzigen Zeitpunkt allein bei Fragestellungen zu JavaScript helfen. Dabei sucht sie sowohl generell nach zur Suchanfrage passenden Projekten, wie auch speziell nach passenden Codeschnipseln, Funktionen und so weiter. In Arbeit befinden sich Erweiterungen von Co.cycles für Sprachen wie PHP und Ruby.

Die Verwendung von Co.cycles ist einfach. Sie funktioniert ausschließlich auf der Basis von Freitext-Suchanfragen, ebenso wie das große Vorbild aus Kalifornien. Um den Einstieg zu erleichtern, findest du beim Aufruf von Co.cycles direkt Vorschläge gültiger Suchphrasenformulierungen neben dem Suchschlitz.

Sobald du einen Suchbegriff eingegeben und abgeschickt hast, endet die Ähnlichkeit mit Google abrupt. Die Suchergebnisseite ist weitaus sprechender als man das ansonsten gewohnt ist. Linksseitig angeordnet findest du Projekte, die sich mit deinem Suchbegriff befassen, mittig siehst du genau die gesuchte Funktion in einem kompletten Sourcecode-Beispiel und rechts wird dann erklärt, was, wozu und wie.

Co.cycles, die Suchmaschine für Open Source-Code

Auf diese Weise kommst du schnell in die Gänge, was deinen Workflow bei passgenauen Ergebnissen enorm beschleunigen dürfte. Versuche doch mal diese Suchen:

Sicherlich ist das derzeitige Fehlen von PHP noch ein größeres Manko. Das wird sich jedoch in Kürze ändern, so dass Co.cycles nochmal deutlich an Nutzwert gewinnen wird.

Welches Tool benutzt du bei solchen Fragestellungen?

Kategorien
Design Editoren HTML/CSS JavaScript & jQuery Programmierung Sonstige Programme Webdesign

Adobe: Flash ist tot, es lebe Animate CC

Ende letzten Jahres wurde angekündigt, dass Anfang 2016 Schluss sein soll mit Adobe Flash. Zumindest der Name sollte aus der ehemals beliebten Anwendung verschwinden, die damit auch ihren Schwerpunkt auf andere, offene und zeitgemäße Formate verschieben soll. Jetzt hat Adobe Ernst gemacht und das Nachfolgeprodukt namens Animate CC an den Start gebracht. Wir haben es uns genauer angeschaut. Um es vorwegzunehmen: Flash ist nicht so richtig tot, es spielt nur keine große Rolle mehr.

Adobe: Flash ist tot, es lebe Animate CC

HTML5 Canvas und WebGL

Wer Flash CC tatsächlich noch installiert hatte, bei dem wird es sich mit einem Update automatisch verabschieden. Denn das alte Flash CC wird durch das neue Animate CC ersetzt. Aber um allzu große Veränderungen muss sich niemand Sorgen machen. Beim Öffnen von Animate CC stellst du schnell fest, dass das Allermeiste doch beim Alten geblieben ist: Die Bühne und Zeitleiste sind ebenso geblieben, wie die restlichen Arbeitsbereiche.

animate-cc_buehne-zeitleiste
Gewohnte Bereiche: Bühne und Zeitleiste

Auch die Dateiendung „.fla“ ist geblieben, um Projekte zu speichern. Die erste große Neuerung entdeckst du, wenn du ein neues Dokument anlegst. Beim Dokumenttyp werden dir noch vor verschiedenen ActionScript- und AIR-Dokumenten die beiden Formate HTML5 Canvas und WebGL vorgeschlagen – beides zeitgemäße Formate, die von allen modernen Browsern unterstützt werden.

animate-cc_neu
HTML5 Canvas und WebGL stehen nun im Mittelpunkt

Hast du dich für eines der Formate entschieden, legst du wie gewohnt los. Das Schöne am neuen Animate CC ist, dass (ehemalige) Flash-Entwickler sich schnell zurechtfinden, da sich ansonsten wenig geändert hat. Du kannst Grafiken und Texte auf der Bühne platzieren, Movieclips und Schaltflächen erstellen, Instanzen anlegen und Animationen auf die Zeitleiste bringen.

Auswahl der richtigen Scriptsprache: ActionScript oder JavaScript

Das Besondere an Flash war immer die eigene Programmiersprache ActionScript, mit der du Animationen steuern und Funktionen ausführen konntest. ActionScript steht dir weiterhin zur Verfügung. Aber mit den neuen Formaten HTML5 Canvas und WebGL ist vor allem JavaScript gefragt. Über das Aktionenfenster kümmerst du dich weiterhin um deine Programmierung – sei es in mit ActionScript oder JavaScript.

animate-cc_aktionen
ActionScript oder JavaScript für HTML5 Canvas und WebGL

Für viele oft genutzte Funktionen stellt dir Animate CC eine ganze Reihe von Codefragmenten zur Verfügung. Diese sind nun gegliedert in ActionScript, HTML5 Canvas und WebGL. Zu den Codefragmenten gehören Aktionen zum Öffnen von Websites, sowie zur Steuerung von Animationen. Du wählst einfach ein Fragment aus, welches in der Zeitleiste oder auf ein Objekt angewendet wird.

Außerdem steht dir für HTML5-Canvas-Projekte das Framework CreateJS zur Verfügung. Hiermit erstellst du komplexe Formen und Animationen direkt per JavaScript.

Veröffentlichen von Animate-Projekten

Wie schon bei Flash muss beim neuen Animate CC dein fertiges Projekt veröffentlicht werden. Hierzu generiert Animate CC ein HTML-Dokument und die dazugehörigen Dateien. Hast du HTML5 Canvas gewählt, wird neben dem HTML-Dokument, welches das Canvas-Element enthält, eine JavaScript-Datei mit der Programmierung erstellt.

Bei WebGL werden mehrere Dateien angelegt. Neben dem HTML-Dokument ist eine WebGL-Bibliothek erforderlich, die durch Animate CC erstellt wird, sowie verschiedene JSON-Objekte und Grafikdateien.

animate-cc_veroeffentlichen
Veröffentlichungseinstellungen für HTML5 Canvas

Wenn du zunächst erst einmal die beiden neuen Formate HTML5 Canvas und WebGL kennen lernen möchtest, findest du einige Vorlagen, die du zum Erstellen neuer Dokumente verwenden kannst.

Animate CC jetzt mit Typekit und Adobe Stock

Zu den weiteren Neuerungen von Animate CC gehört, dass die beiden Adobe-Dienste Typekit und Adobe Stock ein fester Bestandteil von Animate CC geworden sind. Wurden bei Flash Schriften einfach eingebettet, müssen bei den neuen Formaten Webschriften her. Hier bietet es sich natürlich an, dass Adobe seinen eigenen Schriftendienst Typekit integriert.

Zu seiner Nutzung musst du einfach die URL der Website angeben, auf der das Projekt zu finden ist. Animate CC bindet dann automatisch die aus Typekit gewählten Schriften ein. Die Verwendung von Adobe Stock funktioniert ähnlich wie in anderen CC-Anwendungen. Du wählst direkt aus der Anwendung heraus ein Bild aus Adobe Stock und platzierst es in deinem Dokument.

Und Flash gibt es auch noch

Zu guter Letzt sei noch erwähnt, dass du natürlich weiterhin ganz klassisch Flash-Inhalte entwickeln kannst. Auch wenn das Flash-Format keine große Rolle mehr spielt, ist es noch nicht tot. Zumindest im Bereich der Spiele-Entwicklung hat es derzeit noch einen gewissen Stellenwert. So sind ein Großteil der Facebook-Spiele beispielsweise noch mit Flash realisiert.

Aber es ist nur eine Frage der Zeit, bis Flash gänzlich verschwindet. Einen Schritt dorthin ist Adobe mit seinem neuen Animate CC gegangen.

Hast du es dir schon angeschaut? Was hälst du persönlich davon?

(dpe)

Kategorien
Developer-News JavaScript & jQuery Programmierung

Loud Links: JavaScript bringt deine Website zum Klingen

Das kleine JavaScript Loud Links bringt deine Website zum Klingen, indem es per HTML5-Audioelement Links und andere Elemente entweder bei Klick oder on Hover hörbar macht. Dazu benötigst du lediglich MP3 und OGG. Die Lösung funktioniert in allen gängigen Browsern.

Loud Links: JavaScript bringt deine Website zum Klingen

Sound auf der Website: Geschmackssache

Natürlich, natürlich. Du brauchst es nicht zu sagen. Sound auf der Website ist ja sowas von Neunziger und schon da nervte es. Ich kenne diese Meinung und sie hat ja auch ihre Berechtigung. Dennoch gibt es durchaus ebenso berechtigte Anwendungsfälle für klingende Websites. Hier bei Dr. Web haben wir uns erst kürzlich ganz grundsätzlich mit der Thematik befasst.

Loud Links ist ein kleines JavaScript aus der digitalen Feder des Rotterdamer Designers und UX-Developers Mahdi Al-Farra. Mahdi begeht regelmäßig etwas, das er Weekend Projects nennt, und Loud Links ist einer dieser durchaus interessanten Schnellschüsse, die dabei entstehen.

Loud Links: JavaScript bringt deine Website zum Klingen

Um es gleich vorweg zu sagen, Loud Links will nicht deine UI vertonen, sondern ist lediglich dazu geschaffen worden, Sounds für Interaktionen zu setzen. Genau genommen kann Loud Links nur zwei verschiedene Zustände vertonen. Du kannst Loud Links zwar grundsätzlich jedem Element auf deiner Website zuordnen, klingen werden die so behandelten Elemente aber nur entweder beim Klicken oder on Hover, also beim Darüberfahren mit der Maus.

Loud Links: JavaScript bringt deine Website zum Klingen

Die JavaScript-Bibliothek erstellt für das jeweils ausgezeichnete Element ein HTML5-Audio und verwendet MP3/Ogg-Dateien, um einen entsprechenden Sound abzuspielen. Die Verwendung ist absolut einfach, wenn man über entsprechende Soundschnipsel verfügt. Diese allerdings finden sich in den Weiten des Netzes in rauen Mengen.

Loud Links: So gehts

Um Loud Links zu verwenden legst du im Stammverzeichnis deiner Website einen Ordner an, den du sounds nennst. Innerhalb dieses Ordners erstellst du zwei weitere Ordner namens mp3 und ogg.

Nachdem du das JavaScript auf gewohnte Weise in dein HTML-Dokument integriert hast, zeichnest du diejenigen Links oder andere Elemente, die du vertonen möchtest, entweder mit der Klasse loud-link-hover oder loud-link-click aus. Über das HTML5-Data-Attribut fügst du noch den konkreten Sound hinzu, wobei du dessen Dateierweiterung nicht angibst. Also statt klang.mp3 gibst du lediglich klang ein.

Ich gebe dir zwei Beispiele:

oder

Das war es schon. Von nun an gibt deine Website bei von dir gewählten Interaktionen hörbare Rückmeldungen.

Loud Links steht auf Github zum kostenlosen Download bereit. Leider hat Mahdi bislang keine konkrete Lizenz angegeben, so dass ich nicht mit Sicherheit sagen kann, ob du Loud Links auch kommerziell verwenden darfst. Es würde mich indes überraschen, wenn es tatsächlich nicht so wäre. Sicherheitshalber frag einfach Mahdi im konkreten Fall danach.

Kategorien
JavaScript & jQuery Webdesign

A-Frame macht virtuelle Realitäten lebendig

Virtuelle Realität spielt eine immer größere Rolle im World Wide Web. JavaScript und moderne Browser machen es mittlerweile grundsätzlich möglich, dreidimensionale Welten zu erschaffen, in denen man sich bewegen kann. Mit dem JavaScript-Framework A-Frame baust du dir auf der Grundlage einer eigenen Auszeichnungssprache schnell solche virtuelle Realitäten.

A-Frame macht virtuelle Realitäten lebendig

A-Frame: JavaScript einbinden und erste 3D-Welt bauen

Zunächst einmal musst du die JavaScript-Datei von A-Frame in deinem HTML-Head einbinden. Die komprimierte Datei ist knapp 700 Kilobyte groß und beinhaltet alles, was du benötigst. Andere Bibliotheken, wie beispielsweise jQuery, sind nicht notwendig.

Anschließend beginnst du innerhalb deines HTML-Bodys eine Szenerie zu erschaffen. Da A-Frame seine eigene Auszeichnungssprache – ähnlich wie HTML – mitbringt, ist das Erstellen deiner ersten 3D-Welt spielend einfach. Zunächst einmal zeichnest du eine neue Szenerie mit dem Element „<a-scene>“ aus. Darin platzierst du beliebige 3D-Objekte wie Quader („<a-cube>“), Kugeln („<a-sphere>“) oder Zylinder („<a-cylinder>“).

<a-scene>
  <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cube position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-cube>
  <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
</a-scene>

Im Beispiel werden in einer Szenerie eine Kugel, ein Quader sowie ein Zylinder platziert. Über Attribute definierst du die Größe, Farbe, Position und Drehung des Objektes. Der Wert für „position“ erwartet drei Werte, um ein Objekt auf der X-, Y-, und Z-Achse im Raum platzieren zu können. „rotation“ erwartet ebenfalls drei Werte, welche die Winkel der Drehung auf den drei Achsen definieren.

aframe_beispiel_einfach
Einfaches Beispiel mit Kugel, Quader und Zylinder

Für die Größe eines Objektes stehen dir je nach Typ unterschiedliche Attribute zur Verfügung. Bei „<a-sphere>“ muss lediglich ein Radius („radius“) angegeben werden. „<a-cube>“ erwartet Angaben für die drei Kantenlängen („width“, „height“ und „depth“). Beim Zylinder gibst du einen Radius, sowie eine Höhe an („radius“ und „height“).

VR mit Smartphone, Tablet und Google Cardboard erleben

Damit der Browser die virtuelle Realität auch darstellen kann, setzt A-Frame seine spezielle Auszeichnungssprache per HTML5-Canvas um. Aus dem A-Frame-Quelltext im Beispiel wird also eine Zeichenfläche, in der das Framework mit den JavaScript-Zeichenmethoden die Szenerie ausgibt.

Wie es sich für eine echte virtuelle Welt gehört, ist die Dreidimensionalität von A-Frame nicht statisch, sondern dynamisch. Auf einem Desktop-Rechner kannst du per Maus die Perspektive der Szenerie verändern. Wirklich interessant wird es allerdings, wenn du dir deine Szenerie mit deinem Smartphone oder Tablet anschaust. Denn A-Frame interpretiert die Orientierung deines Mobilgerätes und verändert analog dazu die Perspektive der Szenerie.

aframe_beispiel_vr_cardboard
Darstellung für Google Cardboard auf einem Smartphone

Für echten 3D-Genuss kannst du auch den VR-Modus in Kombination mit Google-Cardboard nutzen. Schaust du dir eine mit A-Frame erstellte Szenerie mit einem Mobilgerät an, wechselt du über ein Icon in Form einer Brille in den VR-Modus. Dann stellt A-Frame die Szenerie auf einem geteilten Display dar. Du siehst links und rechts zweimal dieselbe Szenerie aus leicht unterschiedlichen Blickwinkeln. Setzt du dein Smartphone in Google Cardboard ein, erlebst du eine echte virtuelle Realität.

Auch mit Oculus Rift funktioniert A-Frame. Hierzu müssen derzeit aber noch experimentelle Versionen von Firefox oder Chrome installiert sein, da die derzeitigen Browser die notwendige Unterstützung von WebVR noch nicht mitliefern. In jedem Fall muss dein Browser WebGL unterstützen, um A-Frame darstellen zu können.

Animationen hinzufügen

Per „<a-animation>“ fügst du einem Objekt auf einfache Weise eine Animation hinzu. Dazu wird „<a-animation>“ als Kindelement jenes Objektes ausgezeichnet, welches animiert werden soll.

<a-cube position="-1 0.5 1" rotation="0 0 0" width="1" height="1" depth="4" color="#4CC3D9">
  <a-animation attribute="rotation" to="0 360 0" dur="10000" fill="forwards" repeat="indefinite"></a-animation>
</a-cube>

Im Beispiel dreht sich ein Quader um 360 Grad auf der Y-Achse. Dazu wird per „attribute“ die Art der Animation definiert und per „to“ das Ziel der Animation. „dur“ gibt die Länge an und „fill“ legt fest, was am Ende der Animation geschehen soll. Der Wert „forwards“ sorgt dafür, dass die Animation nicht wieder auf den Anfang zurückgesetzt wird. Per „repeat“ stellst du die Wiederholungen ein.

Eigene Kameras, Licht, Interaktivität und Materialien

A-Frame kann noch sehr viel mehr, als ich hier vorstelle. Auf Wunsch fügst du zum Beispiel auch eine eigene Kamera und eigenes Licht hinzu. Du hast die Möglichkeit, interaktive Elemente zu erstellen und Materialien hinzuzufügen. Leider ist die Dokumentation von A-Frame noch nicht vollständig. Einige der Möglichkeiten finden sich dort noch nicht wieder.

aframe_beispiel_panorama
360-Grad-Panorama als VR

Auch Bilder und Videos kannst du einbinden. So erstellst du beispielsweise ein 360-Grad-Panorama als virtuelle Realität.

Fazit

A-Frame ist ein interessantes Framework für einfache, aber auch durchaus komplere VR-Welten. Die Unterstützung von Mobilgeräten sowie Oculus Rift oder Google Cardboard ermöglicht erlebbare 3D-Szenerien. Dazu ist die Handhabe von A-Frame denkbar einfach. Während du bei anderen 3D-Frameworks per JavaScript programmieren musst, läuft hier alles sehr einfach über eine eigene Auszeichnungssprache.

Außerdem gibt es zahlreiche einfache und komplexe Beispiele, die dir die Möglichkeiten von A-Frame sehr anschaulich darstellen. A-Frame steht unter der bekannten MIT-Lizenz. Eine private sowie kommerzielle Nutzung ist somit möglich.

(dpe)

Kategorien
JavaScript & jQuery Webdesign

fullPage.js: Schnell und einfach „mehrseitige“ One-Pager erstellen

Gerade bei kleinen Webprojekten sind One-Pager sehr beliebt. Anspruchsvoll und großzügig gestaltet, sorgen sie oft für maximale Aufmerksamkeit. Mit dem jQuery-Plugin fullPage.js erstellst du auf einfache Weise „mehrseitige“ One-Pager. Das Plugin sorgt dafür, dass einzelne Bereiche eines HTML-Dokumentes seitenfüllend dargestellt und per Navigation oder auch per Scrolling animiert gewechselt werden.

fullPage.js: Schnell und einfach „mehrseitige“ One-Pager erstellen

Plugin einbinden und Seiten auszeichnen

fullPage.js besteht aus je einer JavaScript- und Stylesheet-Datei, die jeweils zusammen mit jQuery eingebunden werden muss. Für zusätzliche Animationseffekte bei den Übergängen zwischen den Seiten kann optional das Easings-Plugin von jQuery UI integriert werden.

fullpagejs1

Anschließend zeichnest du ein HTML-Dokument mit deinen Seiten aus. Dazu benötigt fullPage.js einen Container mit einer ID – zum Beispiel „fullpage“. Darin definierst du für jede Seite einen Container mit der Klasse „section“. Das Plugin stellt alle Container seitenfüllend untereinander dar. Die erste Seite ist dabei standardmäßig beim Seitenaufruf sichtbar.

<div id="fullpage">
  <div class="section">Seite 1</div>
  <div class="section">Seite 2</div>
  <div class="section">Seite 3</div>
</div>

Anschließend muss per JavaScript das Plugin gestartet und die ID übergeben werden.

$(document).ready(function() {
  $("#fullpage").fullpage();
});

Standardmäßig wird beim Scrollen nach unten die erste Seite über eine einfache Slide-Animation nach oben aus- und die nächste Seite von unten eingeblendet.

Aussehen und Funktionalität steuern

fullpagejs2
Animierter Übergang zur nächsten Seite

Das Plugin stellt eine Vielzahl von Optionen zur Verfügung, mit denen du das Aussehen und die Funktionalität des Plugins anpasst. So hast du die Möglichkeit, Hintergrundfarben der einzelnen Seiten, sowie den Abstand zum Seitenrand über das Plugin anzugeben.

$(document).ready(function() {
  $("#fullpage").fullpage({
    sectionsColor: ["#ccc", "#fff", "#333"],
    paddingTop: "10px",
    paddingBottom: "20px"
  });
});

Mit der Option „sectionsColor“ definierst du über ein Objektliteral die Hintergrundfarbe für alle Abschnitte beziehungsweise Seiten. Mit „paddingTop“ und „paddingBottom“ legst du Abstände oben und unten fest.

Navigation steuern

Willst du eine andere als die erste Seite beim Aufruf der Seite anzeigen lassen, kannst du über die zusätzliche Klasse „active“ einen beliebigen Bereich so auszeichnen. Dieser Bereich wird dann immer dargestellt, wenn du die Seite lädst. Von dort kannst du dann wie gewohnt die anderen Seiten ansteuern.

<div id="fullpage">
  <div class="section">Seite 1</div>
  <div class="section active">Seite 2</div>
  <div class="section">Seite 3</div>
</div>

Außerdem hast du die Möglichkeit, eine Navigation zu erstellen, mit der du jede Seite direkt erreichst. Die Navigation erstellst du manuell innerhalb eines eigenen Containers. Jedem Menüpunkt, der auf einen Bereich verweisen soll, muss das Attribut „data-menuanchor“ mit je einem eindeutigen Wert zugewiesen werden. Der eigentliche Link enthält ebenfalls den Ankernamen als seiteninternen Verweis.

<div id="menu">
  <ul>
  <li data-menuanchor="seite1"><a href="#seite1">Seite 1</a></li>
  </il>
</div>

Innerhalb der Optionen des Plugins vergibst du über den Parameter „anchors“ ebenfalls die Ankerbezeichnungen. Außerdem gibst du über den Parameter „menu“ die ID des Menüs an.

$(document).ready(function() {
  $("#fullpage").fullpage({
    menu: "#menu",
    anchor: ["seite1", "seite2", "seite3"]
  );
});

Anschließend navigierst du nicht nur per Scrolling, sondern ganz bequem auch über eine „normale“ Navigation durch die Seiten. Die animierten Übergänge bleiben natürlich erhalten.

Zusätzliche horizontale Seitenebene hinzufügen

fullpagejs3
Zweite Ebene für zusätzliche Inhalte

Wenn dir die einfache Seitenstruktur nicht ausreicht, kannst du einfach eine zweite Ebene mit Inhalten hinzufügen. Während die erste Ebene vertikal aufgebaut ist, ist die zweite Ebene horizontal angeordnet – als sogenannte Slides. Du scrollst also nach unten, um durch die Seiten erster Ebene zu steuern und nach rechts für die untergliederten Seiten beziehungsweise Slides. Im Quelltext zeichnest du solche zusätzlichen Seiten mit einem eigenen Container und der Klasse „slide“ aus.

<div id="fullpage">
  <div class="section">Seite 1</div>
  <div class="section">
    <div class="slide">Seite 2.1</div>
    <div class="slide">Seite 2.2</div>
  </div>
  <div class="section">Seite 3</div>
</div>

Im Beispiel scrollst du also von Seite 1 nach unten auf Seite 2.1. Hier stellt dir das Plugin Steuerungspfeile zur Verfügung, mit denen du nach rechts auf Seite 2.2 und wieder nach links auf Seite 2.1 wechseln kannst.

Fazit

fullPage.js ist ein sehr einfaches und dennoch eindrucksvolles Tool, um Inhalte eines One-Pagers seitenfüllend darzustellen und strukturieren zu können. Dank der zusätzlichen zweiten Ebene bringst du auch durchaus komplexe Inhalte ansprechend unter. Das Plugin eignet sich somit auch prima, um Präsentationen im Browser halten zu können.

Die Einstellungsmöglichkeiten sind sehr vielfältig. Eine umfangreiche Dokumentation verrät dir sehr anschaulich, was alles möglich ist. Die Animationen basieren zeitgemäß auf CSS3. fullPage.js läuft in allen modernen Browsern und sogar im Internet Explorer ab Version 8. Außerdem ist es auch für Mobilgeräte wie Tablets geeignet.

Das ganze Plugin steht unter der MIT-Lizenz, welche dir vielfältige – auch kommerzielle – Einsätze gestattet. Das Downloadpaket beinhaltet zudem mehrere Beispiele, an denen du dich direkt versuchen kannst.

(dpe)

Kategorien
JavaScript & jQuery Programmierung

mo.js: JavaScript-Framework für komplexe Animationen

Dank CSS3 und JavaScript sind die Grundlagen für native und anspruchsvolle Animationen im Browser gesetzt. Doch die CSS-Eigenschaften und JavaScript-Methoden erlauben nur grundsätzliche Bewegungen. Das Framework mo.js hingegen ermöglicht wesentlich komplexere Animationen – vor allem mit Hilfe sehr individueller und einfach zu erstellender Easing-Funktionen.

mo.js: JavaScript-Framework für komplexe Animationen

Schneller Einstieg, aber noch keine Dokumentation

Da mo.js ohne jQuery oder andere Bibliotheken auskommt, muss lediglich die JavaScript-Datei des Frameworks eingebunden werden. Im Download-Paket ist ein Demo-HTML-Dokument vorhanden, indem die JavaScript-Datei sowie ein „<div>“-Element bereits ausgezeichnet sind. Du kannst damit also direkt starten und dich mit den Möglichkeiten von mo.js auseinandersetzen.

Auf der Website gibt es einige Tutorials, die anhand von Code-Beispielen samt Demo erläutern, was mo.js kann und wie man es anwendet. Leider gibt es derzeit nur Tutorials zu den Easing-Möglichkeiten. Von den verschiedenen Modulen und den Tweening-Funktionen sind derzeit noch keine Tutorials vorrätig. Außerdem fehlt noch eine Dokumentation. Doch alleine das individuelle Erstellen komplexer Easing-Funktionen macht mo.js bereits zu einem äußerst interessanten Animationswerkzeug.

mojs_tutorials
Tutorial-Seite

Einfache Syntax für einfache Animationen

Die Verwendung von mo.js ist sehr einfach. Mit „mojs.Tween()“ kannst du eine neue Animation erstellen und einem beliebigen Element zuweisen. Die Anzahl der Wiederholungen und Dauer der Animation werden über Parameter übergeben. Per Event-Handler steuerst du du eigentliche Animation.

new mojs.Tween({
  repeat: 2,
  duration: 3000,
  delay: 1000,
  onUpdate: function (progress) {
    document.getElementsByTagName("div")[0].style.transform = "translateY(" + 200 * progress + "px)";
 }
}).run();

Im Beispiel wird eine Animation mit drei Sekunden Dauer erstellt, die nach einer Sekunde startet und sich zweimal wiederholt. Über „onUpdate()“ rufen wir eine Funktion auf, welche für die eigentliche Animation zuständig ist. Per „progress“ wird der Fortschritt der Animation übergeben. Hierbei handelt es sich um einen Wert, der im Laufe der Animation von 0 zu 1 hochzählt.

Dieser Wert dient im Beispiel dazu, die Animation zu berechnen. Dazu wird „progress“ mit dem Zielwert der Animation – im Beispiel 200 – multipliziert. Das „<div>“-Element bewegt sich also per „translateY()“ auf der Y-Achse um 200 Pixel.

Easing mit Pfaden erstellen

Mit CSS3 sind eine Reihe von Easing-Funktionen für Animationen eingeführt worden. Insgesamt stehen einem nur fünf verschiedene, einfach gehaltene Möglichkeiten zur Verfügung: „linear“, „ease“, „ease-in“, „ease-out“ und „ease-in-out“. Mit „cubic-bezier()“ hast zu zudem noch die Möglichkeit, ein individuelles Easing anhand einer Bézierkurve zu erstellen.

mojs_easing
Pfad als Grundlage fürs Easing

Mit mo.js kannst du jedoch ein komplett individuelles Easing mit beliebig vielen Beschleunigungen und Abbremsungen entwickeln. Diese werden anhand eines Pfades auf der Basis des SVG-Elementes „<path>“ definiert. Du zeicnest also beispielsweise in Illustrator einen Pfad und speicherst ihn im SVG-Format. Die Werte des Pfades, die in der „d“-Eigenschaft ausgezeichnet sind, nutzt du anschließend, um die als Grundlage für dein Easing zu verwenden.

var bouncyEasing = mojs.easing.path("M0,100 C6.50461245,96.8525391 …");

Im Beispiel wird per „mojs.easing.path()“ ein SVG-Pfad als Easing-Pfad übergeben. Diesen übergeben wir dann einer Funktion, die das Easing eines Elementes per CSS-Eigenschaft „transform“ umsetzt.

new mojs.Tween({
  onUpdate: function (progress) {
    var bounceProgress = bouncyEasing(progress);
    document.getElementsByTagName("div")[0].style.transform = "translateY(" + 200 * bounceProgress + "px)";
  }
}).run();

Im Beispiel wird ein „<div>“-Element mit dem individuellen Easing auf der Y-Achse dank „translateY()“ animiert. Statt einer linearen Animation wie im ersten Beispiel kannst du beliebig viele Abbremsungen und Beschleunigungen sowie Federungen einbauen. So lässt sich mit einem entsprechend gezeichneten Pfad also auch die Richtung der Bewegung umkehren. Bei den klassischen CSS3-Easing-Funktionen klappt eine Animation immer nur in eine Richtung.

Im Übrigen kannst du mit mo.js ein Element nicht nur bewegen, sondern auch die Form verändern. Per „scaleX()“ oder „scaleY()“ erreichst du zum Beispiel, dass ein Element seine Größe ändert, während es animiert wird.

Umfangreiche Animationsmöglichkeiten

Einige Beispiele auf der Website von mo.js zeigen, welche umfangreichen Animationsmöglichkeiten mo.js besitzt. Es bleibt zu hoffen, dass die Dokumentation zügig erscheint und weitere Tutorials veröffentlicht werden. Derzeit ist mo.js nur eingeschränkt nutzbar. Wer möchte, kann sich anhand der Beispiele natürlich selbst in das Framework einarbeiten.

mojs_beispiel
Komplexe Animation mit mo.js

Auch wenn derzeit noch nicht alle Funktionen dokumentiert sind, lohnt es sich, mo.js im Auge zu behalten. Das Framework steht unter der liberalen MIT-Lizenz für private und kommerzielle Zwecke zur freien Nutzung bereit.

(dpe)

Kategorien
JavaScript & jQuery Netzkultur und -politik Programmierung

So blockst du AdBlocker mit Adi.JS

Viele Versuche, kostenpflichtige Webangebote zu etablieren, sind in den letzten Jahren gescheitert. Vor allem bei Informationsangeboten wie den großen Nachrichtenportalen, aber auch hier beim vergleichsweise kleinen Dr. Web wird ganz selbstverständlich vorausgesetzt, dass alle diese Informationen kostenlos zu haben sind. Dass solche Angebote dann über Werbung finanziert werden müssen, versteht sich eigentlich von selbst. Dank diversen Adblockern kann sich aber jeder dieser Werbung ganz bequem entledigen. Das hat Folgen nicht nur für Seitenbetreiber, sondern mittlerweile auch für den Seitenbesucher.

So blockst du AdBlocker mit Adi.JS

Der schlechte Ruf der Online-Werbung

Werbung hat sich in den letzten Jahrzehnten einen durchweg schlechten Ruf erarbeitet. In Zeitungen und Magazinen ist sie meist weniger störend. Im Fernsehen und als immer umfangreicher werdende Postwurfsendung wird sie aber meist negativ wahrgenommen. Dass vor allem die Online-Werbung einen besonders schlechten Ruf hat, liegt an ihren Anfängen in den 90er Jahren, die auch das Konzept der Popup-Fenster in Verruf gebracht hat.

Schnell konnten sich Adblocker in ihrer Funktion als Popup-Blocker als Plugin im Browser etablieren.  Für viele war und ist deren Einsatz seither eine Selbstverständlichkeit. Die Beliebtheit der Adblocker hat schließlich dazu geführt, dass Werbeeinnahmen weggebrochen sind und vor allem Betreiber von Nachrichtenseiten reagieren mussten. Schließlich sind laut Angaben der Seitenbetreiber mittlerweile bis zu 25 Prozent aller Besucher mit Adblockern unterwegs sein.

adblock-plus
Weit verbreitet: Adblock Plus

Aufruf gegen Adblocker

So haben namhafte Portale wie Spiegel, Zeit und Süddeutsche im Jahr 2013 dazu aufgerufen, Adblocker zumindest für die genannten Seiten auszuschalten. Der Aufruf, der einige Wochen aufrecht gehalten wurde, schien erfolgreich gewesen zu sein. Laut Angaben der Betreiber sind die Werbeeinnahmen gestiegen.

Die Kampagne gegen die Adblocker stieß allerdings auch auf viel Kritik. Schließlich sei Online-Werbung teils sehr penetrant und zudem ein potenzielles Sicherheitsrisiko. Als Risiko dieser Art wurden komprimittierte Ad-Server sowie der Einsatz von Flash genannt. Flash als Standard für Online-Werbung wurde mittlerweile durch HTML5 abgelöst.

Adblock-Nutzer blockieren

bild-adblocker
Kein(e) Bild für Nutzer von Adblockern

Einen deutlichen Schritt weiter als die Kampagne aus dem Jahr 2013 ist der Springer-Verlag in diesem Jahr mit Bild.de gegangen. Hier werden Nutzer von Adblockern einfach komplett aus dem Angebot gesperrt. Die Website erkennt, wenn du mit einem Adblocker unterwegs bist und gibt einen wenig dezenten Hinweis, dass du deinen Adblocker für die Seite deaktivieren sollst.

Angeblich überlegen auch andere Anbieter wie Spiegel Online, ob sie ähnliche Techniken wie Bild.de einsetzen, um den Einsatz von Adblockern auf der Website verhindern zu können.

Mit Adi.js Adblocker blockieren

Wer selbst eine werbefinanzierte Website betreibt, kann mit dem kleinen Plugin Adi.js seinen eigenen Adblock-Blockierer integrieren. Das auf jQuery basierende Plugin platzierst du einfach zusammen mit der Datei „advertisement.js“ in deinem HTML-Dokument und rufst es auf.

adijs
Hinweis von Adi.js

Sobald ein Adblocker erkannt wird, erscheint ein Fenster, welches darüber informiert, dass ein Adblocker gefunden wurde. Text und Aussehen des Fensters kannst du über verschiedene Optionen individuell einstellen.

Die Datei „advertisment.js“ wird bei eingeschaltetem Adblocker nicht aufgerufen. Du kannst darin also JavaScript platzieren, welches nur dann ausgeführt werden soll, wenn Adblocker nicht aktiviert sind.

Natürlich ist Adi.js kein adäquater Ersatz für die bei Bild.de verwendete Technik. Schließlich setzt Adi.js JavaScript voraus, welches jeder halbwegs kundige Nutzer ausschalten kann.

Der richtige Umgang mit Werbung und Adblockern

Dass die Kampagne von Spiegel, Zeit und Süddeutsche seinerzeit durchaus kritisiert wurde und dass auch der radikale Weg von Bild.de viel Kritik einstecken muss, liegt am nach wie vor schlechten Image, welches Werbung hat. Zwar weiß jeder um die Bedeutung von Werbung für Seitenbetreiber. Aber es ist schon teils verständlich, dass Werbung nach wie vor sehr häufig als sehr penetrant empfunden wird.

Werbung, die sich über Inhalte legt, während man sie liest, ist kein besonders nutzerfreundlicher Weg, eine Nachrichtenseite zu finanzieren. Hier fallen vor allem die Werbevideos aus jüngerer Zeit auf, die sich nach dem Laden einer Seite über das komplette Browserfenster vergrößern und erst wieder verkleinert werden müssen.

Statt auf Radikallösungen zu setzen, sollte hier versucht werden, Werbung so einzusetzen, dass sie zwar auffällt – ohne geht es nicht –, dabei aber den Leser nicht beeinträchtigt.

Der Einsatz von Videos und Animationen ist legitim. Sobald man als Besucher diese Dinge erst wegklicken muss, um auf den Inhalt einer Website zugreifen zu können, wird es schwierig werden, Nutzer davon zu überzeugen, auf Adblocker zu verzichten. Und Mechanismen, die auf Zwang setzen, wie bei Bild.de, sind nie eine gute Lösung.

Der Einsatz von Adi.js sollte daher nur als Hinweis und freundliche Bitte verstanden werden. Das ist ebenso legitim, denn der AdBlocker, einmal eingesetzt, unterscheidet nicht zwischen nervigen, womöglich noch von selbst startenden Videos und dem „normalen“ Banner von Websites wie unserem guten alten Dr. Web. Den Schaden haben dann auch die, die auf derlei nervige Werbeformen verzichten gleichermaßen.