Tag: software

Harmony: Prozedurales Zeichnen mit JavaScript

Erst kürzlich berichtete ich über die experimentelle Zeichen-Anwendung Flame, mit der sich abstrakte Flammen im Browser erstellen lassen. Ein etwas anderes Kreativ-Werkzeug stellt Harmony von Richardo Cabello dar. Die JavaScript-Anwendung, welche die canvas-Fähigkeiten nutzt, ermöglicht prozedurales Zeichnen (generative Gestaltung) — dadurch entstehen Bilder, die durch wiederholende Algorithmen erzeugt werden.

Das Programm bietet verschiedene Pinsel (Brushes) zur Auswahl, mit denen sich Graustufen-Bilder gestalten lassen. Dazu zählen etwa Kreise, Vernetzungen, Linien oder Rechtecke. Die Anwendung regt zum Experimentieren an und erlaubt es, erstellte Kunstwerke als PNG-Grafik zu speichern.
Sehr interessant ist vor allem die Website des Entwicklers, auf der auch seine anderen HTML5- und ActionScript-Experimente zu sehen sind. Darunter finden sich beeindruckende Physik-Simulationen und unter Anderem die "Ball Pool-Animation", die zu den frühen Chrome-Experimenten zählt.

Flame: Zeichenprogramm für digitale Leuchteffekte

Die Ära der kreativen Zeichenprogramme erfreut sich ständiger Bereicherung. Mit Flash, Java oder JavaScript werden Anwendungen geschaffen, die durch innovative Konzepte beeindrucken. LiveBrush, SketchPad oder Fractal 4D zählen zu den Vorreitern dieses Metiers.
Peter Blaškovič hat als Experiment eine Online-Anwendung für das Erstellen von digitalen Flammen entwickelt: Bei Flame können Benutzer kreativ werden und durch einfache Bewegungen aufwendige Effekte erzeugen. Mit einem animierten Zeichenstift lassen sich dadurch fraktale Gebilde erschaffen, die durch weiche Übergänge und Transparenzeffekte aufgewertet werden.

Der digitale Pinsel kann durch verschiedene Einstellungen (Farbe, Opazität, Verlauf, Überblendung, Weichzeichner, Form, usw.) angepasst und verfeinert werden. Die Java-Anwendung, die auf Processing basiert, bietet zudem eine "Undo"-Funktion an. Per Knopfdruck lassen sich die Werke als JPG-Grafik in einer Auflösung von 1680 × 1050 speichern.
Wer ausprobieren möchte, wie es sich mit Flüssigkeit malen lässt, sollte den Fluid Painter des Entwicklers ausprobieren.

SQLiteSpy: Verwaltung von SQLite-Datenbanken

Für bestimmte Webprojekte kann es erforderlich sein, dateibasierte Datenbanken zu verwenden. Bei kleineren Projekten kann es sich daher lohnen, auf das relationale Datenbanksystem SQLite zurückzugreifen. Die PHP-Erweiterung ist ab PHP 5.0 integriert und kann daher direkt genutzt werden.
Für die grafische Verwaltung und Bearbeitung von SQLite-Datenbanken bieten sich verschiedene Programme an: SQLiteSpy stellt seine sehr schöne Lösung dar, mit der sich derartige Datensammlungen editieren lassen.

Die Windows-Anwendung stellt die Relationen der Datenbank in entsprechenden Spalten dar und bietet bequeme Bearbeitungsmöglichkeiten für Tabellendaten. Wer unter Mac OS X oder Linux arbeitet, kann den "SQLite Database Browser" in Erwägung ziehen, da dieses Programm plattformunabhängig entwickelt wurde.
Seit Version 3 wird auch in Mozillas Firefox SQLite verwendet (z.B. für Lesezeichen). Dementsprechend gibt es auch für Firefox eine sehr komfortable Erweiterung, mit der sich SQLite-Datenbanken editieren lassen. Mit dem "SQLite Manager" können so auch die SQLite-Datenbanken des Firefox-Browsers angesehen werden.
Ein Pendant für die Administration von MySQL-Datenbanken steht beispielsweise mit HeidiSQL zur Verfügung.

Replace CSS Colors: Farben in Stylesheets ersetzen

Manchmal kann es der Fall sein, dass das Farbschema einer Website geändert werden soll. Neben Grafiken müssen vor allem die CSS-Farbwerte angepasst werden. Die Suche nach den entsprechenden Codes kann aufwendig werden, wenn es sich um komplexe Stylesheets handelt. Für diesen Zweck steht mit "Replace CSS Colors" eine schöne Lösung zur Verfügung, mit der sich die Farbwerte einer CSS-Datei per Klick ändern lassen. Die gewünschte Datei kann per Formular hochgeladen und anschließend editiert werden.

Zum Einsatz kommt der Farbwähler (Color Picker) von COLOURlovers, so dass die neuen Farben exakt bestimmt werden können. Hat man die neue Farbwelt erstellt, wird vom Skript eine aktualisierte CSS-Datei erstellt und kann schließlich heruntergeladen werden.
Die Webanwendung eignet sich natürlich nicht nur zum Ändern von Farbwerten — gerade bei Änderungen an Stylesheets kann es sehr nützlich sein, die unterschiedlichen Farben einer Website aufgelistet zu haben.

Sypex Dumper: Große MySQL-Datenbanken sichern

MySQL-Backups stellen einen wichtigen Aspekt dar, der auf verschiedene Wege angegangen werden kann. In erster Linie bietet phpMyAdmin eine integrierte Backup-Funktion, die für die meisten Zwecke ausreichen dürfte. Geht es darum, größere Datenbanken zu sichern, kann es zu Problemen bei phpMyAdmin kommen: Nach einer bestimmten Laufzeit wird das Skript aufgrund der Größe der Sicherungsdatei abgebrochen. Abhilfe schafft hier beispielsweise ein Tool wie Sypex Dumper, das nun in Version 2 erhältlich ist.

Die Backup-Lösung kommt mit diversen Features und kann auch Datenbanken mit einer Größe von 1 GB problemlos sichern. Das Skript überzeugt mit einer modernen Benutzeroberfläche und arbeitet zuverlässig. Mit einer Größe von 148 KB ist Sypex Dumper schnell auf den Webserver hochgeladen. Anschließend muss noch eine Konfigurationsdatei angepasst werden, woraufhin Datenbanken bequem per Webbrowser gesichert werden können.
Ein alternatives Skript, das zudem in deutscher Sprache erhältlich ist, stellt MySQLDumper dar — auch diese Backup-Lösung arbeitet zuverlässig und bietet zudem noch erweiterte Möglichkeiten an.

Wireframing: Sammlung mit Werkzeugen und Tipps

Bei der Konzeption von Webprojekten spielt die Erstellung von groben Layouts (Mock-Ups oder Wireframes) eine wichtige Rolle. So lässt sich unter Anderem mit dem Kunden sehr früh abstimmen, wie Elemente platziert werden sollen. Die detaillierte Ausgestaltung des grafischen Entwurfs erfolgt im zweiten Schritt, so dass in der Wireframing-Phase Entscheidungen über den Aufbau und das Inhaltskonzept getroffen werden können.
Bei W3Avenue wurde kürzlich ein ausführlicher Artikel über Techniken und Werkzeuge für den Wireframing-Prozess veröffentlicht.

In der Liste finden sich neben Offline-Anwendungen auch viele Webdienste, die das Erstellen von Mock-Ups erlauben — MockFlow und iPlotz zählen sicherlich zu den bekanntesten Wireframing-Tools. Die altbekannte Firefox-Erweiterung Pencil wurde kürzlich aktualisiert und kann zudem auch als Standalone-Version heruntergeladen werden. Mit den Design Stencils von Yahoo! oder Konigi stehen fertige Schablonen zur Verfügung.
Schließlich sollte man im Hinterkopf behalten, dass Wireframes einfache Strichzeichnungen darstellen, die auch auf dem Papier erstellt werden können. Bei "A List Apart" findet sich zu diesem Thema ein schöner Beitrag.

SVG-Edit: Vektorgrafiken im Browser zeichnen

Browserbasierende Grafikanwendungen gibt es mittlerweile mehr als genug. Aviary arbeitet schon seit geraumer Zeit an weiteren Editoren, um ihre Programmsammlung für Kreative zu vervollständigen. Mit Aviary Raven steht ein leistungsfähiger Vektoreditor zur Verfügung, mit dem sich auch komplexere Illustrationen erstellen lassen.
Einen Vektoreditor, der in JavaScript entwickelt wurde und sich somit auf jeder Website einbetten lässt, findet man mit SVG-Edit. Die Demo zeigt, was mit der SVG-Anwendung möglich ist. Der Editor funktioniert in der Demonstration in allen modernen Browsern, ausschließlich unter Internet Explorer.

Die Werkzeugpalette von SVG-Edit beinhaltet neben Zeichenfunktionen und geometrischen Grundfiguren auch ein Textwerkzeug und die Möglichkeit, Bilder zu platzieren. Sehr schön finde ich das Freihand-Tool, mit dem sich gezeichnete Selektionen in Rechtecke oder Kreise umwandeln lassen. Der SVG-Code lässt sich einsehen und verschiedene Bildeigenschaften (Hintergrundfarbe, Größe, etc.) können ebenfalls festgelegt werden. Weiterhin lassen sich Ebenen erstellen und verschiedene Linienstile für Objekte festlegen.
Der Editor steht derzeit in 9 Sprachen zur Verfügung und kann zudem auch als Firefox-Erweiterung heruntergeladen werden. Fertige Zeichnungen können einfach per Klick als SVG-Grafik offline gespeichert und weiter bearbeitet werden.

Dia: Einfache Diagramme und Mock-Ups erstellen

Für Graphen und einfache Zeichnungen sind moderne Grafikprogramme in der Regel überdimensioniert. Schematische Darstellungen, Fluss- und Ablaufdiagramme, Datenbankabfragen oder grobe Layouts (Mock-Ups) lassen sich am besten in Anwendungen erstellen, die dafür konzipiert wurden und ein anderes Ziel verfolgen: Hierbei spielen weniger die grafischen Effekte als der eigentliche Aufbau und die Platzierung von Elementen eine Rolle.
Als sehr schöne Software für diese Zwecke erweist sich so zum Beispiel Dia. Die Linux-Anwendung gibt es mittlerweile auch für Windows und bietet gute Funktionalitäten. Neben geometrischen Grundfiguren und Linien finden sich in dem Open Source-Programm etliche Objektbibliotheken, die auch Cliparts für Datenbanken, Netzwerke oder isometrische Karten enthalten. Die Raster-Funktion (Grid) ermöglicht das exakte Erstellen von Layouts und Übersichten. Linien und Pfeile können automatisch als Verbindungselemente eingestellt werden. Strichstärke und -typ sowie Farben oder Texte der Elemente können nach Belieben angepasst werden.

Interessant sind die Zeichenfähigkeiten der Anwendung: Geschwungene Linien und Bezierkurven lassen sich erstaunlich gut editieren und die erstellten Grafiken können sowohl in Pixelformaten (PNG, JPG, etc.) als auch in Vektorformaten wie EPS oder PDF abgespeichert werden.
Grafisch hochwertige Diagramme lassen sich wie gehabt mit yEd realisieren. Einen Online-Dienst für diesen Einsatzzweck gibt es mit Gliffy.

Multicolr Search Lab: Bilder durch Farben finden

Für die Suche nach gutem Bildmaterial oder inspirierenden Photos gibt es mittlerweile sehr nützliche und innovative Technologien — als Suchmuster dienen neben Motiven oder Schlagworten häufig auch Farben. Auf das Suchen und Finden von Bildern anhand von verschiedenen Kriterien hat sich Idée Inc. spezialisiert. Sie bieten mit ihrer Piximilar-Technologie ein Verfahren für das Aufspüren von Photos an, das in vielen Anwendungen getestet werden kann. Eine dieser Anwendungen stellt das Multicolr Search Lab dar, bei dem sich Flickr-Photos durch definierte Farben (maximal 10) finden und durchstöbern lassen.

Die Seite funktioniert außerordentlich gut und bietet schöne Ergebnisse. Eine Variante der Webanwendung präsentiert die renommierte Firma aus Kanada mit dem Visual Search Lab, bei dem auf der Basis eines Bildes weitere Photos bei Flickr ausgesucht werden. Auch diese Suchfunktion arbeitet sehr gut.

Richtig interessant dürfte schließlich die Bilder-Suchmaschine TinEye sein, die ebenfalls aus dem Hause Idée Inc. stammt. Die "Reverse Image Search Engine" durchsucht eine Datenbank nach einem Bild, welches der Benutzer per Upload oder Direkt-Link an die Seite übermittelt hat. Als Resultat erhält man bei Erfolg Links zu den Seiten, auf denen dieses Bild ebenfalls verwendet wurde (die Bildgröße kann hierbei variieren). Nach mehreren Durchläufen und Tests erweist sich auch TinEye als ein zukunftsweisendes Werkzeug, das sicherlich einen hohen Bekanntheitsgrad erreichen und für etliche Zwecke eingesetzt werden wird.

ComparePSD: Photoshop-Dateien vergleichen

Versionsmanagement ist nicht nur bei Entwicklern ein wichtiges Thema — auch Designer sollten bei der Arbeit mit Photoshop Sicherheitskopien oder Versionen anlegen, um auf ältere Elemente Zugriff zu haben. Neben dem manuellen Kopieren von Dateien gibt es automatisierte Lösungen. So bietet beispielsweise PixelNovel mit Timeline ein derartiges Versionierungssystem für Designer an, das für 60 USD zu haben ist.
Das Unternehmen hat nun auch eine kostenlose Anwendung zur Verfügung gestellt, mit der sich die Ebenen von zwei Photoshop-Dateien vergleichen lassen. Die Software nennt sich ComparePSD und ist derzeit für Windows erhältlich (eine Mac OS X-Version befindet sich in Arbeit).

Das Programm arbeitet zuverlässig und erfüllt genau seinen Zweck: Die veränderten Ebenen der ausgewählten Photoshop-Dateien werden farblich markiert und können so gut verglichen werden. Die Ansicht kann so eingestellt werden, dass lediglich die Unterschiede der Ebenen angezeigt werden. Eine Suchfunktion für Ebenen ist ebenfalls integriert, die allerdings nur teilweise funktioniert.
ComparePSD kann sich vor allem bei älteren Photoshop-Dateien als hilfreich erweisen, da die Änderungen oft nur schwer nachvollziehbar sind.