640x480.de

Beiträge aus dem Was-mit-Medien-Alltag

Die 640x480-Headerillustration

SVG im dekorativen Einsatz.

Für den Kopf unserer neuen Seite wollte ich SVG mal als Deko-Element anstatt eines Fotos einsetzen. Als erste Idee geisterte mir der Schriftzug aufgelöst in vereinfachte transparente, sich überlagernde Flächen durch den Kopf. 

Skizzen zur 640x480 Headerillustration
Skizzen zur 640x480 Headerillustration

Ein paar Stunden, mehrere Skizzen und Skripte später und mit Arthurs Hilfe verdichtete sich die Idee zu einem Raster von Dreiecken, die mit Zufallsfarben gefüllt werden. Es ging um den Bezug zu den Pixeln, die ja Grundlage der Auflösung 640x480 sind.

Das spannendste war der Prozess: angefangen haben wir mit dem händischen zeichnen erster Dreiecke (also Eintippen des SVG-Quelltextes Zeile für Zeiel). Da die Grafik aus immer der gleichen Form in vier unterschiedlichen Drehungen besteht haben wir dann die Dreiecke als Symbole definiert, die wir dann im Koordinatensystem der Fläche platzieren konnten. Auch das konnten wir weiter automatisieren, so dass zum Schluss nur noch ein array aus Koordinaten, Dreieckstyp und Farbe übrig blieb. Die Farbe wird mit einer Funktion für jedes Dreieck zufällig ermittelt. Dabei kann eine Farbstimmung (red, green, blue, cyan, magenta, yellow, mono) angegeben werden, die wir nach mehreren Experimenten der Reihe nach auf die einzelnen Zeichen des Schriftzuges verteilt haben. Mit jedem Seitenaufruf entsteht so eine neu eingefärbte Grafik.

Die Grafik im Einsatz als Banner:

Banner auf kohlhaas-kohlhaas.de, Farbschema grau
Banner auf kohlhaas-kohlhaas.de, Farbschema grau
Banner auf atelier-virtual.de, Farbschema gelb
Banner auf atelier-virtual.de, Farbschema gelb
Banner auf netz-meister.de, Farbschema rot
Banner auf netz-meister.de, Farbschema rot

Letztendlich musste die Grafik noch im Layout eingepasst werden und zwar so, dass sie sich im flexiblen Layout anpasst. Das Ergebnis gefällt uns schon sehr gut und lässt viel Raum für weitere Spielereien. So lassen sich zum Beispiel die Symbole der Dreiecke nun einfach durch Kreise austauschen und die Grafik sieht vollkommen anders aus.

Variante der Kopfgrafik mit Punkten statt Dreiecken als Symbol
Variante der Kopfgrafik mit Punkten statt Dreiecken als Symbol

In der nächsten Stufe wollen wir die Interaktivität noch erhöhen und noch eine spielerische Komponente einbauen – dazu später mehr.

11.09.2012 | Noch keine Kommentare

Mehr Infografik

Je mehr ich mich mit SVG-Grafiken beschäftige, desto mehr Spaß macht es und es kommen mir immer neue Ideen für weitere Einsatzzwecke. Heute: SVG-Diagramm statt Tabelle.

Für die Analyse der Auslastung von Datenbanktabellen bzw. der Übersicht über das Vorhandensein der Tabellen in unterschiedlichen Installationen hatten wir vor einiger Zeit ein Skript geschrieben, welches diese Informationen live einsammelt und als Tabelle ausgibt.

Datentabelle Akira-Datenbanken, Tabellen, Inhalte
Datentabelle Akira-Datenbanken, Tabellen, Inhalte

Dieser Tabelle mangelte es erheblich an Charme und Übersichtlichkeit. Nach den letzten Spielereien mit SVG im Zusammenhang mit der Staffellaufauswertung habe ich nun diese Tabelle durch ein Diagramm ersetzt, welches die gleichen Informationen garstellt, nun aber in viel eingängigerer Form.

SVG-Diagramm: Akira-Datenbanken, Tabellen, Inhalte
SVG-Diagramm: Akira-Datenbanken, Tabellen, Inhalte

Ich habe jetzt keine Anstrengungen in eine Neu-Interpretation des strukturellen Aufbaus gesteckt. Andere Diagrammformen wären eventuell platzsparender oder noch übersichtlicher. Insofern lässt sich meine Vorgehensweise mit dem CSS-Syling der Tabelle vergleichen. Würde man die Tabelle richtig schick stylen und z.B. den Wertefeldern je nach Inhaltsmenge noch unterschiedliche Farbschattierungen geben, dann würde man eine schicke Tabelle gegen ein schickes Diagramm vergleichen, was weniger unfair wäre. Ein möglicher Vorteil der der SVG-Lösung: Wird die Grafik, Auswertung, das Diagramm auch für andere Zwecke benötigt, so lässt sich die SVG auch im Illustrator oder Inkscape öffnen und in Drucksachen weiterverarbeiten. Das ist bei der schicken Tabelle nur über das Bildschirmfoto und dann mit den Nachteilen des Pixelbildes möglich.

30.08.2012 | 2 Kommentare

3D-Twitter auf tablets/smartphones

Etwa im Juni 2011 startete ich mit Überlegungen zur 3D-Visualisierung von twitter timelines. Als typisches side project liefen diese Gedanken mal mehr mal weniger intensiv im Hintergrund.

2 Bilder. Klicken Sie auf ein Bild um die Diaschau zu starten.

3D twitter Ausschnitt aus Projektskizze Martin @ University of Otago, Dezember 2011

Im Herbst 2011 wurde dann daraus ein Projekt am Department of Information Science der University of Otago in Dunedin, Neuseeland bei Prof. Holger Regenbrecht. Im Dezember 2011 konnte ich dann vor Ort erste Prototypen anschauen. Dieser Artikel dient dazu, laufende Entwicklungen an einem Ort zu sammeln.

Kurzbeschreibung: Über das Display eines tablets bzw. smartphones schaut man in einern virtuellen Würfel/raum hinein. Per Bewegung des Gerätes (Gyrosensor) kann ich die verschiedenen Seiten/Wände betrachten. Meine tweets (auch Übertragbar auf E-Mails, RSS-Feeds, etc.) sind an diesen Wänden und im Raum organisiert (geografisch, zeitlich, nach Absender, etc.). Die räumliche Strukturierung ermöglicht mir einen besseren Überblick über Themen und Entwicklungen als die 2D-Listen, so meine These.

Link-Ergänzungen

3D twitter: Organisation des Informationswürfels (pdf / 640 Kb)

3D twitter: räumliche Organisation der Informationen (pdf / 381 Kb)

03.08.2012 | Noch keine Kommentare

Blog-Navigation

Im Rahmen der Neugestaltung eines Blogs stellte sich bei uns die Frage nach der Blättern-Funktionalität im News-Stream. Eine Blitz-Recherche auf von mir häufig gelesenen Blogs erbrachte hier kein einheitliches Bild. Es gibt bei diesem Thema also entweder unterschiedliche Ansätze oder – was ich für wahrscheinlicher halte – das entsprechende Backend stellt eine bestimmte Art der Navigation bereit, die vom Frontend-Entwickler nicht geändert werden konnte, wollte, wurde.

7 Bilder. Klicken Sie auf ein Bild um die Diaschau zu starten.

Blog-Navigation: fontblog.de Blog-Navigation: daily-ivy.de Blog-Navigation: indiskretionehrensache.de

Einheitlich und damit als gemeinsamer Nenner annehmbar ist die Tatsache, dass die Beiträge/Meldungen von neu nach alt sortiert sind.

Und ab da beginnen die Interpretationsmöglichkeiten:

  1. Die Metapher für die Organisation der Meldungen ist ein Zeitstrahl. Dieser beginnt in der Vergangenheit links und erstreckt sich in die Zukunft nach rechts. Die neueste Meldung hat ihren Platz damit ganz rechts auf dem Zeitstrahl. Will ich also zu älteren Beiträgen zurück, dann muss ich folgerichtig „nach links“ blättern. (z.B. www.fontblog.de, www.daily-ivy.de, www.indiskretionehrensache.de)
  2. Wie in einem Schnellhefter befinden sich alle Meldungen auf Seiten aufgeteilt, wobei die neuesten Meldungen (= aktuelle Seite) immer davor geheftet werden (Ein System, was mir übrigens schon in der Schule immer gegen den Strich ging. Logischer finde ich die Variante die neuesten Aufzeichnungen hinten an den Block anzuheften.) In diesem Fall blättere ich also „nach rechts“, um zu den älteren Meldungen zu gelangen. (z.B: www.praegnanz.de, www.designtagebuch.de, www.bildblog.de)
  3. Die Meldungen werden von oben nach unten sortiert, die Metapher ist also ein Stapel, auf den immer oben eine neue Meldung drauf kommt. In dem Fall blättere ich „nach unten“, um zu früheren Meldungen zu kommen. Da im Blog auf der ersten Seite ja üblicherweise schon mehrere Meldungen von neu nach alt von oben nach unten organisiert sind, hat diese Variante auch eine gewisse Logik. (z.B. http://www.fscklog.com/)

Gibt es weitere?

31.05.2012 | Noch keine Kommentare

Schnelle Bugfixes für unterwegs

Ab und an komme ich in die Verlegenheit, unterwegs mal schnell an einen Quelltext zu müssen. Neuerdings lasse ich den Laptop allerdings immer öfter im Büro und habe statt dessen nur das iPad dabei. Nach einer ganzen Weile des Suchens habe ich jetzt ein Set an Programmen zusammen, mit denen ich einigermaßen zurechtkomme, auch wenn das noch keine optimale Arbeitsumgebung ist.

Was nutze ich also:

  1. „1Password“ für die ganzen Zugangsdaten, gesynct mit dem Laptop (nicht via Dropbox, sondern nur lokal)
  2. „Code - Source Code Viewer“ um sich den Quelltext der problematischen Website anzeigen zu lassen. Finde ich persönlich echt umständlich und mir ist nicht klar, warum man eine solche Funktion nicht auch in den normalen Browser einbauen kann. Aber es tut seinen Dienst, auch wenn ich auf diese extra App gerne verzichten würde.
  3. „Gusto“ für die eigentliche Bearbeitung der Website/Skripte. Das Programm hat FTP/SFTP direkt integriert. Man kann Projekte anlegen, damit alle Files sauber sortiert bleiben. Dateien können auf dem Server umbenannt werden, Rechte geändert, was man eben so braucht. Nicht schlecht. Der Editor bringt eine sinnvolle Tastatur mit und hat als einzige Schwäche zu wenig Platz zum schreiben. Die Entwickler arbeiten allerdings nach Nachfrage per E-Mail an einem Vollbildmodus beim Bearbeiten, dann wird es noch besser. Gut finde ich auch, dass das Programm mit einer extra PIN geschützt ist.

Mit dieser Kombi lässt es sich beruhigt auch mal ein paar Tage ohne Rechner auskommen und ich bin trotzdem in der Lage mal einen Fehler von unterwegs zu beseitigen.

23.11.2011 | Noch keine Kommentare