Advitum.de auf Google+

Events im Diagramm – Interaktive SVG-Diagramme im Web

Events im Diagramm – Interaktive SVG-Diagramme im Web
Von am
Kategorien: JavaScript, Programmieren, Tutorials

Nachdem wir im letzten Artikel der Artikelserie ein Linien-Diagramm erstellt haben, kümmern wir uns in diesem Artikel darum, das Diagramm für den Nutzer interaktiv zu gestalten. Hier punktet ein SVG-Diagramm gegenüber einem Canvas oder gar einer Bilddatei: Wir können dem Nutzer recht einfach die Möglichkeit geben, mit dem Diagramm zu interagieren, um zum Beispiel genaue Werte abzulesen oder in eine tiefere Detail-Ansicht zu gelangen.

Im Folgenden gehe ich die Änderungen Schritt für Schritt durch. Artikel weiterlesen

Das Linien-Diagramm – Interaktive SVG-Diagramme im Web

Das Linien-Diagramm – Interaktive SVG-Diagramme im Web
Von am
Kategorien: JavaScript, Programmieren, Tutorials

Diagramme sind ein wichtiges Werkzeug, um Daten zu visualisieren. Sie können komplexe Zusammenhänge sichtbar machen. Auch im Web bietet sich der Einsatz von Diagrammen an – zum Beispiel zur Visualisierung von Nutzer- oder Verkaufszahlen, in wissenschaftlichen Artikeln etc.

Es gibt bereits einige Tools und Bibliotheken, die uns bei der Nutzung von Diagrammen unterstützen können. Wer neugierig ist, gerne selbst experimentiert oder einfach nicht die passende Bibliothek findet, kann trotzdem mit JavaScript und SVG sehr einfach eigene Diagramme erstellen. In diesem Artikel erfährst Du, wie Du Linien-Diagramme aus Deinen Daten generieren kannst. Artikel weiterlesen

Regelmäßigkeit im Chaos – ein Canvas-Effekt mit Faszinations-Garantie

Regelmäßigkeit im Chaos – ein Canvas-Effekt mit Faszinations-Garantie
Von am
Kategorien: Design, Inspiration, JavaScript, Programmieren, Tutorials

In meinem letzten Artikel habe ich beschrieben, wie man mit ein wenig Physik, JavaScript und dem Canvas einen interaktiven Effekt erstellen kann. In diesem Artikel möchte ich einen neuen Effekt vorstellen, der diesmal zwar nicht interaktiv, aber nicht weniger interessant ist. Artikel weiterlesen

Interaktiver Canvas-Effekt: Schwingungen und Gravitation

Interaktiver Canvas-Effekt: Schwingungen und Gravitation
Von am
Kategorien: JavaScript, Programmieren, Tutorials

Achtung: Physik und Mathematik voraus! In diesem Artikel zeige ich Dir, wie man mit Physik und ein wenig JavaScript einem Canvas Leben einhauchen kann. Der entstandene Effekt kann, in abgewandelter Form, sehr schön in eine Webseite eingebunden werden. Artikel weiterlesen

Ani.js – schlanke Animationsbiliothek aus JavaScript und Canvas

Ani.js – schlanke Animationsbiliothek aus JavaScript und Canvas
Von am
Kategorien: JavaScript, Programmieren, Tutorials

Letzte Woche gab es hier aus Zeitmangel nur einen kleinen animierten Ninja als Demo meiner Animationsbibliothek ani.js zu sehen. Diese Woche will ich nun ein kleines Tutorial nachliefern, mit dem du selbst die Animationsbibliothek ani.js nutzen kannst.

Als erstes solltest du jQuery und Ani.js downloaden und die beiden Dateien in deine HTML-Datei einbinden.

In deinem HTML-Dokument brauchst du nur ein (Div-)Element anlegen, in welchem sich die Animation befinden soll.

Nun kannst du mit der Animation beginnen! Lege dazu eine neue JS-Datei an und binde sie nach jQuery und Ani.js ein! In dieser Datei wird später der Code für die Animation stehen. Artikel weiterlesen

Kleiner animierter Ninja – JavaScript Demo

Kleiner animierter Ninja – JavaScript Demo
Von am
Kategorien: JavaScript, Programmieren

Heute gibt es statt eines »normalen« Artikels mal etwas zum Spielen, nämlich einen kleinen animierten Ninja, den ich mit JavaScript gecodet habe. Ich habe nämlich übers Wochenende eine kleine, simple Animations-Bibliothek geschrieben, die ich anhand dieses Ninjas ausproberen wollte. Ich hoffe, ich finde bald die Zeit, eine detaillierte Beschreibung der Bibliothek zu schreiben, denn dann könnt ihr sie nach belieben nutzen. Artikel weiterlesen

Kreuzworträtsel selbst erstellen mit XWords

Kreuzworträtsel selbst erstellen mit XWords
Von am
Kategorien: Arbeit, Inspiration, JavaScript, jQuery, Programmieren

Den heutigen Artikel möchte ich gerne Nutzen, um euch mein neuestes Projekt, den Kreuzworträtsel-Generator XWords vorzustellen. Damit könnt ihr direkt im Browser eigene Kreuzworträtsel erstellen.

Momentan befindet sich XWords noch in einer frühen Alpha-Version, leider sind noch nicht alle geplanten Funktionen, wie zum Beispiel das Teilen von Kreuzworträtseln auf Facebook oder das Lösen des Rätsels direkt im Browser, umgesetzt. Ich habe mich aber trotzdem dafür entschieden, euch das Zwischenergebnis schon einmal zu präsentieren. Artikel weiterlesen

Ajax-OnePage – Inhalt richtig per Ajax nachladen

Ajax-OnePage – Inhalt richtig per Ajax nachladen
Von am
Kategorien: JavaScript, jQuery, PHP, Programmieren, Tutorials

Immer wieder stolpere ich im Netz über Ajax-OnePages, also Seiten, bei denen, sobald man auf einen internen Link klickt, der gewünschte Inhalt per Ajax nachgeladen wird. Dadurch werden oft interessante Animationen, wie zum Beispiel Diashow-Übergänge oder Ähnliches möglich. Leider führt das Nachladen von Inhalten per Ajax, wenn man es nicht richtig macht, zu einer riesigen Katastrophe: keine Suchmaschine indiziert den nachgeladenen Inhalt und ohne JavaScript wird die Seite gänzlich unbrauchbar für den Nutzer.

In diesem Artikel will ich deshalb zeigen, wie man eine Ajax-OnePage richtig umsetzt und die zahlreichen Stolpersteine umgeht.

Der Schlüssel zum Erfolg liegt im Progressive Enhancement. Ohne JavaScript und Ajax funktioniert die Seite ganz normal, erst mit dem JavaScript kommen Animationen und OnePage-Charakteristika hinzu. So ist die Seite für jeden nutzbar und auch Suchmaschinen können den gesamten Inhalt indizieren. Artikel weiterlesen

Tagcloud mit PHP und JavaScript erstellen – Word Cloud d3

Tagcloud mit PHP und JavaScript erstellen – Word Cloud d3
Von am
Kategorien: CSS, JavaScript, PHP, Programmieren, Tutorials

Seit einigen Monaten quälte mich ein Problem. Ich hatte angefangen, Wordles in Javscript zu implementieren, um diese dann auf einer Seite dynamisch einzubinden. Doch leider scheiterte ich an der Performance. Doch endlich habe ich eine Lösung gefunden, denn Jason Davies hat es geschafft, Word Clouds mit JavaScript zu rendern.

Das ist wunderbar, denn diese sind mit ein paar JavaScript-Kenntnissen sehr flexibel in eine Seite einbindbar. Doch gibt es dabei einiges zu beachten. Damit der Einstieg auch gut gelingt, schreibe ich hier ein kleines Tutorial, wie man einfach mit Word Cloud d3 eine Tagcloud erstellt. Artikel weiterlesen

Google-Map richtig auf der eigenen Internetseite einfügen

Google-Map richtig auf der eigenen Internetseite einfügen
Von am
Kategorien: Arbeit, CSS, Design, JavaScript, Programmieren, Tutorials

Es gibt ein paar Seitenelemente, die meine Kunden eigentlich immer auf ihrer Internetseite haben wollen—ein Beispiel hierfür ist eine Karte. Dank Google ist das Einbetten von Karten in Internetseite fast lächerlich einfach: Google-Maps öffnen, Position wählen und Code kopieren, so einfach kann das Leben sein—zumindest, wenn man keine besonderen Anforderungen hat.

Das Problem ist aber, das der durchschnittliche Kunde immer irgendwelche Extrawünsche hat—das fängt schon beim eigenen Firmenlogo als Marker-Icon an. Hier stößt das Kopieren und Einfügen des Embed-Codes von Google an seine Grenzen und nach einer kurzen Recherche ist klar: Wir müssen das mit der Google-Maps-API machen, das kann ja nicht so schwer sein—ist es aber doch.

Ich weiß nicht, ob es nur mir so geht, aber meiner Meinung nach ist das Referenzhandbuch der Google-Maps-API v3 extrem unübersichtlich. Ich musste stundenlang rumsuchen und rumprobieren, bis alles so war, wie ich es wollte. Deshalb will ich in diesem Artikel anhand eines Beispiels zeigen, was ich gefunden habe. Artikel weiterlesen

  1. 1
  2. 2