Tag: tricks
FloraJS: Simulation von natürlichen Systemen
Intelligente Comptersimulationen sind nicht zwingend an komplexe Programmiersprachen genküpft, sondern lassen sich durchaus auch im Webbrowser darstellen. Das Simulieren von künstlichen Verhaltensweisen innerhalb eines Ökosystems ist ein umfangreiches Themengebiet, zu dem es unterschiedliche Quellen gibt. Eine grafische Umsetzung in JavaScript, die mit der Entwicklung eines Frameworks verbunden war, wäre FloraJS. Der Entwickler Vince Allen zeigt auf seiner Seite Umsetzungen von verschiedenen natürlichen Systemen, die auf Ideen eines Buches basieren.
Grundsätzlich geht es um grafische Objekte, die an unterschiedliche Verhaltensweisen geknüpft sind und sogenannte "Vehikel" repräsentieren. Ein Vehikel bewegt sich also innerhalb einer simulierten Umgebung und erkundet diese auf eine eigene Weise.
Bei FloraJS selbst handelt es sich um ein kleines JavaScript-Framework, mit dem solche natürlichen Systeme umgesetzt werden können. Auf dieser Seite finden sich diverse Beispiele, welche den Einsatz der Bibliothek sehr gut veranschaulichen. Die eigentliche Darstellung und Animation wird über HTML5/Canvas erreicht.
Crumble: Interaktive Feature-Tour für Websites
Komplexere Websites oder Webanwendungen sind nicht immer auf den ersten Blick verständlich oder sind so ausgelegt, dass der Benutzer zu Beginn eine kurze Einführung erhält. Eine solche Einführung kann auf verschiedene Wege umgesetzt werden. Wer eine Lösung in Form von Sprechblasen sucht, die an den entsprechenden Stellen auf der Seite eingeblendet werden, kann einen Blick auf das jQuery-Plugin Crumble werfen.
Mit dem Skript können beliebig viele Texte angezeigt werden, die dem Benutzer Hinweise zur Benutzung geben. Mit einem Klick auf die angezeigte Sprechblase wird die nächste Information eingeblendet und die Seite wird eventuell zur Position gescrollt. Die Texte werden als geordnete Liste (<ol>) angelegt, in der verschiedene data-Attribute gesetzt werden können, die beispielsweise den Winkel oder den Abstand der Sprachblase zum Text definieren. Eine Dokumentation findet sich auf GitHub. Der einzige Nachteil besteht darin, dass für die Sprechblasen Grafiken und kein CSS3-Code verwendet wird.
The Nature of Code: eBook über Physik und Processing
Die Programmierung von grafischen Anwendungen und interaktiven Animationen erfordert ein gewisses Verständnis für die Grundlagen der Mathematik bzw. Physik. Diese lassen sich in diversen Tutorials aneignen und ausprobieren, wobei die Umsetzung natürlich nicht unbedingt einfacher wird. Wer sich für diese Thematik im Zusammenhang mit der Entwicklungsumgebung Processing interessiert, kann sich das online verfügbare eBook "The Nature of Code" ansehen.
In dem umfangreichen Werk von Daniel Shiffman werden Themen wie Vektoren, Kräfte, Schwingungen, Partikelsysteme, Physik-Bibliotheken, Fraktale oder neurale Netzwerke behandelt und anhand von ausführlichen Texten, Zeichnungen und Code-Beispielen unterstützt. Der Autor beginnt auf einer einfachen Ebene und beleuchtet die unterschiedlichen Bereiche sehr gewissenhaft, so dass die Materie gut verständlich ist. Das eBook ist auch für Entwickler interessant, die nicht mit Processing arbeiten möchten, da sich das Wissen auch auf andere Sprachen anwenden lässt, wenn ein paar Anpassungen vorgenommen werden.
CrossOver: Windows-Anwendungen unter Mac OS X
Wer unter Mac OS X arbeitet, wird in der Regel für alle Zwecke ein entsprechendes Programm finden. In bestimmten Fällen besteht allerdings dennoch die Notwendigkeit für Windows-Anwendungen: Hier bieten sich verschiedene Möglichkeiten an, wie etwa ein Dual-Boot mit Bootcamp oder die Verwendung einer virtuellen Maschine durch Parallels. Die dritte Möglichkeit besteht in der nativen Ausführung von Windows-Programmen durch einen Emulator wie Wine. Hierbei wird unter Anderem die Win32-API simuliert, ohne dass dabei das ein installiertes Betriebssystem erforderlich ist. Eine etwas optimierte und benutzerfreundliche Variante von Wine stellt die Anwendung CrossOver dar, welche die einfache Verwendung von Windows-Anwendungen unter Mac OS X ermöglicht.
CrossOver ist im Gegensatz zu Wine eine kommerzielle Software, die für etwa 50 EUR zu haben ist. Die Unterschiede zu Wine finden sich untere Anderem hier. Bis zum Ende dieses Tages (31. Oktober) steht CrossOver im Rahmen einer Aktion noch kostenlos zum Download bereit. Auf dieser Seite müssen lediglich Name und E-Mail-Adresse eingetragen werden, um anschließend den Download-Link für die Anwendung zu erhalten.
Jster: Über 800 JavaScript-Libraries in einer Sammlung
Für JavaScript gibt es neben den größeren JavaScript-Bibliotheken wie jQuery, MooTools oder Sencha inzwischen auch eine Reihe von anderen Libraries, die für unterschiedliche Zwecke eingesetzt werden können: MVC, Canvas, WebGL, Audio-/Video-Player oder Testing wären nur einige Bereiche, für die es mittlerweile interessante Lösungen in Form von Libraries gibt.
Inzwischen gibt es eine umfangreiche Seite, die eine Sammlung mit allen denkbaren Bibliotheken enthält: Bei Jster finden sich aktuell 866 aufgelistete Libraries, die in unterschiedliche Kategorien eingeteilt sind.
Jede Bibliothek in der Liste ist mit einer Detail-Ansicht verknüpft, in der sich eine kurze Beschreibung, Tags sowie die dazugehörigen Links (auch GitHub-Links) finden. Sehr schön ist zudem der "Similar to"-Bereich, in dem (wie bei AlternativeTo) ähnliche Libraries aufgezeigt werden.
JSPro: Neuer SitePoint-Blog für JavaScript-Entwickler
Das auf Webentwicklung spezialisierte Portal SitePoint hat vor einigen Wochen einen weiteren Ableger die Welt gerufen, der sich mit der Entwicklung von JavaScript beschäftigt und aktuelle Themen rund um die Skriptsprache beleuchtet. Das Portal JSPro weist inzwischen einige Blog-Einträge auf, die von Spieleentwicklung über CoffeeScript bis zu Node.js reichen.
Neben Beiträgen über weitere Themen wie Modernizr, Authentifizierung, Cookies oder JSLint finden sich auch Artikel über nützliche Erweiterungen von JavaScript wie beispielsweise dieser Beitrag. Momentan lässt die Häufigkeit der Blog-Einträge nicht zu wünschen übrig. Man darf gespannt sein, ob JSPro sein Tempo beibehält und sich zukünftig zu einer weiteren interessanten Quelle für JavaScript-Entwickler mausert.
Deployd: Plattform für schnelle Webentwicklung
Die Entwicklung von Backends ist in der Regel mit einer gewissen Komplexität verbunden, je nachdem, wie die Anforderungen des Projekts aussehen und welche Technologien zum Einsatz kommen. Hier bieten sich unterschiedliche Webserver und damit verbundene Sprachen wie PHP, Ruby, Java, Python oder ASP.NET an. Wer einen etwas abstrakteren Ansatz sucht und sich weniger auf die Entwicklung des Backends konzentrieren möchte, könnte sich diesbezüglich das Projekt Deployd ansehen. Dabei handelt es sich im Prinzip um einen Node.js-Server, der lokal (Windows, Mac OS X) installiert wird und anschließend eine kompakte Web-Oberfläche zum Anlegen und Verwalten von Datenstrukturen bietet (ähnliche wie Django).
So können tabellenähnliche Konstrukte erzeugt werden, die unterschiedliche Datentypen und dazugehörige Datensätze beinhalten können. Deployd stellt die Daten dabei per JSON (REST) zur Verfügung, wodurch Datensätze schnell und unkompliziert abgefragt werden können. Auch das nachträgliche Ändern von Datentypen funktioniert einfach über das Deployd-Backend. Später soll es durch "deklarative Queries" möglich sein, verknüpfte Abfragen zu erzeugen: So wird sich etwa ein Blog-Post samt den dazugehörigen Kommentaren abrufen und direkt sortieren und einschränken lassen.
Der Ansatz von Deployd ist ungewohnt, bietet aber interessante Möglichkeiten. In der Dokumentation finden sich weitere Informationen und Details zum Umgang mit der Anwendung.
Typeset: Verbesserter Blocksatz mit JavaScript
Im Printbereich gehört das Setzen und Gestalten von Text innerhalb eines Layouts zum Alltag: Laufweite, Zeilenabstand, Grundlinienversatz und Einzüge können hier manuell und sehr genau in DTP-Anwendungen wie InDesign oder QuarkXPress eingestellt werden. Im Web bestehen durch CSS grundsätzlich auch diese Möglichkeiten, allerdings gibt es hier durch die Browser-Engines Grenzen und Unterschiede. So lässt sich durchaus mit der CSS-Deklaration "text-align:justify;" ein Blocksatz erzeugen, doch Einfluss auf die entstehenden Lücken zwischen Wörtern hat man als Webdesigner nicht.
Wenn es wirklich auf einen guten Blocksatz und womöglich auch noch auf Silbentrennung im Web ankommt, lohnt sich ein Blick auf das JavaScript-Projekt Typeset, das den Knuth-Plass-Algorithmus zur Erzeugung von Zeilenumbrüchen nutzt.
Auf der Seite des Projekts finden sich verschiedene Anwendungsbeispiele, die unter Anderem auch das Verhältnis von Zeichen zu entstehenden Leeräumen zeigen. Im Gegensatz zur CSS-Variante können durch den Einsatz von Typeset wesentlich bessere Ergebnisse erzielt werden. Eine Demonstration findet sich beispielsweise auf dieser Seite. Zudem ermöglicht das Skript auch das Erzeugen von abstrakten Text-Layouts, wodurch die Zeilen entlang einer geometrischen Form ausgerichtet werden können. Details zur Implementierung finden sich wieder bei GitHub.