Kategorien
Webdesign

Generatoren für AJAX-Ladegrafiken

Ein stilprägendes Element von AJAX-Anwendungen sind die bekannten Ladegrafiken. Doch nicht jeder, der etwas vom Standard abweichen möchte, will gleich einen komplett eigenen Entwurf mit einem Grafikprogramm anfertigen. Mit Hilfe von zwei Online-Generatoren lassen sich im Handumdrehen neue Varianten erzeugen.

ajaxload.info

Schon etwas länger im Rennen ist Ajaxload. Bei diesem Generator kann man eine Grundgrafik auswählen und dann die Vorder- und Hintergrundfarbe bestimmen. Auch transparente Hintergründe sind möglich. Die fertige Ladegrafik kann dann als GIF heruntergeladen werden.

preloaders.net

Über diese Grundfunktionalität hinaus geht Preloaders. Ebenso wie „ajaxload.info“ basiert dieser Generator auf Grundgrafiken, hat davon aber eine größere Auswahl. Sie sind in die Kategorien 3D, Rectangular, Circular und Horizontal aufgeteilt.

Neben Vorder- und Hintergrundfarben kann auch die Größe der Ladegrafik bestimmt werden. Der Generator beherrscht Kantenlängen zwischen 5 und 220 Pixeln. Allerdings leiden die größeren Formate unter sehr deutlichen Pixel-Artefakten.

Sehr schön ist die Möglichkeit, die Animationsgeschwindigkeit zu beeinflussen. Hier stehen 9 Stufen von -4 bis +4 zur Verfügung. Auch hier gibt es aber wieder eine Einschränkung, denn bei stark verlangsamter Animation werden nicht feinere Schritte generiert, sondern die vorhandenen Frames langsamer abgespielt. Bei genauer Betrachtung kann man also ein leichtes Ruckeln wahrnehmen.

(tm)

Kategorien
Webdesign

Screentoaster: Eine Screencasting-Plattform

Zur Bildschirmaufzeichnung gibt es eine ganze Palette an Desktop-Anwendungen. Screentoaster macht sich daran, diese Anwendungsart zu einer Webplattform mit angeschlossener Community auszubauen. Der Kern von Screentoaster ist ein Java-Applet, das die Aufzeichnung der Bildschirmaktivität übernimmt.

Neben dem Bildschirminhalt können Ton (System + Mikro) sowie das Bild einer angeschlossenen Webcam aufgezeichnet werden. Nach der Aufnahme kann das Video bei Bedarf noch mit Untertiteln versehen.

Was das System wirklich von vergleichbaren Desktop-Anwendungen abgrenzt, ist jedoch die Plattform selbst. Die aufgezeichneten Videos können – mit Titel, Beschreibung und Tags versehen – auf Screentoaster hochgeladen werden, um sie dort im Stil gängiger Video-Plattformen zu veröffentlichen. Mit Einschränkungen kann man das Video auch direkt zu YouTube hochladen. Wenig überraschend kann man die auf Screentoaster veröffentlichten Aufzeichnungen auch in andere Webseiten einbinden. Hier als Beispiel die offizielle Screentoaster-Einführung:

Wie sehr das System auf die Veröffentlichung getrimmt ist, merkt man, wenn man die Videos lokal speichern will. Bisher gibt es dazu nämlich nur eine als experimentell gekennzeichnete Download-Funktion, die weder Ton, noch Untertitel, noch die eingebundenen Webcam unterstützt.

Ebenso dürftig ist die Funktionalität, Videos hochzuladen, ohne sie zu veröffentlichen. Man kann einzelne Aufzeichnungen zwar als privat kennzeichnen, aber das bewirkt lediglich, dass sie nicht im Screentoaster-Index erscheinen. Jeder, der die URL kennt, kann weiterhin darauf zugreifen. Auch wenn das Video auf Webseiten eingebunden wurde, funktioniert dies weiterhin. Ein Passwortschutz oder die Freigabe nur für einzelne registrierte Nutzer stehen nicht zur Verfügung.

Auf der Plattform selbst kann man anhand der Tags und einiger Kategorien durch die Masse der Videos stöbern. Screentoaster gibt es bislang nur auf Englisch, dementsprechend englischlastig ist auch das Angebot an Aufzeichnungen. Überwiegend handelt es dabei um tutorial-ähnliche Videos, aber auch andere Gebiete wie beispielsweise Mitschnitte von Spielen oder Zeichnungen finden sich.

Ganz untypisch für ein Startup bezeichnet sich Screentoaster nicht als „Beta“. Dennoch sieht man, dass an vielen Stellen noch geschraubt wird. Beispielsweise ist es nicht möglich, in den aufgezeichneten Videos vor- oder zurückzunavigieren. Außerdem zeigte sich auf dem Testrechner (Windows XP, 1,6GHz Celeron, 1920×1200) ein noch gravierenderes Problem, das System wurde während der Aufzeichnung dermaßen stark ausgelastet, dass es kaum noch reagierte. Selbst der Tastaturbefehl zum Stoppen der Aufzeichnung zeigte keine Wirkung. Letztendlich musste der Prozess im Taskmanager manuell abgeschossen werden – und selbst das gelang nur mit Mühe. In einem zweiten Versuch half auch das nicht mehr und der Rechner musste neu gestartet werden.

Man sollte sich also vor einem Test besser vergewissern, dass alle offenen Dateien gespeichert wurden. Eine kurze Recherche hat allerdings keine Berichte von anderen Nutzern ergeben, die das gleiche Problem haben. Das Phänomen scheint also zumindest sehr selten zu sein. Auch auf dem Testsystem funktionierte die Aufzeichnung schließlich, nachdem sie auf einen Ausschnitt des Gesamtbildschirms beschränkt wurde.

Ursache für die starke Auslastung war übrigens nicht das Java-Applet, sondern eine VNC-Software, die im Hintergrund gestartet wurde. Anscheinend nutzt Screentoaster VNC für die eigentliche Aufzeichnung. Das dürfte auch der Grund sein, warum sich das System nicht als plattformunabhängig bezeichnet, sondern „lediglich“ kompatibel zu Windows, Mac OS X und Linux. ™

Kategorien
Webdesign

Google Chart API – Schnelle Diagrammgenerierung per URL-Parameter

Ein relativ einfacher Weg, Diagramme für Webseiten zu erzeugen, ist Googles Charts API. Dieser Dienst wird durch eine URL mit Parametern aufgerufen und liefert das generierte Diagramm direkt als PNG-Grafik zurück. Flash oder Javascript sind nicht erforderlich, die Datenübergabe erfolgt allein mit Hilfe der URL-Parameter.

Demo-Grafik

Obige Grafik wird beispielsweise über die URL http://chart.apis.google.com/chart?cht=p3&chd=t:40,20,40&chs=450×200&chl=Magazin|Dr.|Web&chco=427BB5 generiert.

Die Google Chart API bietet eine breite Palette an Diagramm-Typen. Neben den üblichen Torten- und Balken- und Linien-Diagrammen können auch Mengendiagramme, Punktewolken, Netzdiagramme, Weltkarten und QR Codes erzeugt werden.

Die Anpassungsmöglichkeiten umfassen Farben, Beschriftungen und teilweise auch komplexere Stilelemente. Hier ein Beispiel aus der Google-Dokumentation, das ein Liniendiagramm erweitert um diverse Marker zeigt:

Beispiel für erweitertes Liniendiagramm

Die Datenübergabe per URL-Parameter ermöglicht zwar einen sehr schnellen Start, kann aber bei detailreicheren Diagrammen auch recht komplex werden. Das sieht man bereits an der URL für obiges Liniendiagramm: http://chart.apis.google.com/chart?cht=lc&chd=s:2gounjqLaCf&chco=008000&chls=2.0,4.0,1.0&chs=450×200&chxt=x&chxl=0:||c|d|a|o|s|v|V|x||& amp;chm=a,990066,0,3.0,9.0|c,FF0000,0,1.0,20.0|d,80C65A,0,2.0,20.0|o,FF9900,0,4.0,12.0| s,3399CC,0,5.0,11.0|v,BBCCED,0,6.0,1.0|V,3399CC,0,7.0,1.0|x,FFCC33,0,8.0,20.0|h,000000,0,0.30,0.5& chma=0,0,30,0 [Vorsicht, URL manuell umgebrochen]

Darin liegt auch die Begrenzung der Diagramme. Kein Diagramm kann mehr Daten enthalten, als sich in einer URL kodieren lassen. Die maximale URL-Länge hängt wiederum vom Browser des Benutzers und von der Server-Software ab. Als kleinster gemeinsamer Nenner kann hier (mal wieder) der Internet Explorer mit ca. 2000 Zeichen angenommen werden (siehe auch What is the maximum length of a URL?).

In der zugehörigen Google Group findet sich ein Wegweiser zu diversen Bibliotheken und Dokumenten, die den Umgang mit Google Chart API erleichtern sollen. Für deutschsprachige Nutzer bietet sich auch der Google Chart API Generator an, mithilfe dessen man die verschiedenen Diagrammtypen relativ einfach durchtesten kann.

Die API ist kostenlos. Google bittet aber darum, sich zu melden, falls man mehr als 250’000 Aufrufe pro Tag erwartet.

Eines sollte man sich beim Einsatz bewusst sein: Da die Diagramme auf Googles Servern generiert werden, bekommt Google natürlich auch alle Daten. Laut eigener Aussage werden übermittelte Daten höchstens zwei Wochen und nur für „interne Test- und Debugging-Zwecke“ gespeichert. Außerdem können bei öffentlich zugänglichen Webseiten natürlich auch Crawler die Bild-URLs auslesen, über die die Daten übermittelt werden.

Siehe auch: Weitere Möglichkeiten zur Diagramm-Generierung bietet der Dr. Web-Artikel Scripts für Online Diagramme von Sven Lennartz.

Kategorien
Essentials Freebies, Tools und Templates

15 Muster-Generatoren

Muster gibt es nicht nur als fertige Vorlagen. Im Netz findet sich eine ganze Palette an Generatoren, mit denen man sich seine eigenen Muster und Hintergründe erzeugen kann. Schauen wir, was es so gibt. In einigen Fällen ist Flash erforderlich.

BgPatterns

Screenshot

BgPatterns generiert Hintergrundmuster aus auswählbaren Farben, Strukturmustern und Ornamenten. Dieser Generator wurde bereits zuvor bei Dr. Web ausführlicher besprochen.

Tartan Maker

Screenshot

Tartan Maker generiert klassische karierte Schottenmuster.

Striped Backgrounds

Screenshot

Der Name ist Programm: Striped Backgrounds generiert gestreifte Hintergründe. Verschiedene vordefinierte Formate, von Standard-Monitor-Auflösungen über HDTV bis zu iPhone und Avatar, stehen zur Auswahl. Die Farben kann man selbst bestimmen oder zufällig auswählen lassen.

Stripe Generator 2.0

Screenshot

Ebenfalls auf Streifen spezialisiert ist der Stripe Generator 2.0.

Stripemania

Screenshot

Es besteht definitiv kein Mangel an Streifengeneratoren. Dieser heißt Stripemania.

Stripe Designer

Screenshot

Mit dem Stripe Designer kann man selbst anhand eines Kästchen-Eingabefeldes ein Streifenmuster definieren, das dann über einen von sechs vorgefertigten Hintergründen gelegt wird. Leider kann man weder selbst Hintergründe hinzufügen, noch die standardmäßig schwarze Farbe der Streifen ändern.

Background Dotter

Screenshot

Auf Punkte spezialisiert ist der Background Dotter. Bei diesem Generator muss man die generierten Hintergründe und zugehörige Hintergrundfarbe allerdings manuell kopieren.

bgMaker

Screenshot

Der bgMaker erinnert ein wenig an einen Icon-Editor. Man kann in einem Raster einzelne Pixel einfärben, die dann gleich im Hintergrund des Generators gekachelt angezeigt werden.

Tile Machine 1.0

Screenshot

Als Shockwave-Anwendung kommt Tile Machine 1.0 daher. Ähnlich wie bgMaker erinnert das Funktionsprinzip an einen Icon-Editor. Tile Machine bietet neben der direkten Manipulation einzelner Pixel auch noch Hilfswerkzeuge für Kreise, Linien, Rechtecke, etc.

Background Image Maker

Screenshot

Streifen, Punkte und Gradienten gibt es beim Background Image Maker – wobei die Punkte-Funktion im Test nicht zuverlässig funktionierte. Die Besonderheit: Es wird auch eine URL generiert, hinter der sich das gewünschte Hintergrundbild verbirgt. So könnte man es direkt testweise einbinden, ohne jede Variante erst speichern und hochladen zu müssen – wobei sich das nicht für das endgültige Werk empfiehlt.

Gradient Image Maker

Screenshot

Ein schlichter Gradienten-Generator: Gradient Image Maker.

Online Gradient Image Maker (OGIM)

Screenshot

OGIM ist ein komplexerer Gradienten-Generator mit zahlreichen Optionen (unter anderem zusätzliche Streifen und Rahmen) – dafür aber leider auch extrem unübersichtlich.

Web 2.0 Background Generator

Screenshot

Der Web 2.0 Background Generator erzeugt gradientenbasierte Hintergründe im typischen Web2.0-Stil. Auch Schriftzüge können eingebaut werden.

Flash Random Background Generator

Screenshot

Der Flash Random Background Generator stattet Flash-Anwendungen mit zufällig generierten Hintergründen aus. Ein Export der Hintergründe ist nicht vorgesehen. Vorsicht: Dieser Generator ist kostenpflichtig. Er kostet 5 Dollar.

Barcode Plantage

Screenshot

Barcode Plantage ist mehr Kunstprojekt als Hintergrundgenerator, generiert aber sehr schöne Hintergründe anhand von Barcodes. Inwiefern diese kommerziell nutzbar sind, geht aus der Webseite leider nicht hervor. PDFs/BMPs in Druckauflösung können für 5 Euro bestellt werden. Der Generator basiert auf einem Java-Applet und war im Test leider ziemlich instabil.

Kategorien
Design HTML/CSS

Vier CSS-Resets: CSS-Standardwerte der verschiedenen Webbrowser auf den gleichen Stand bringen

Viele Webentwickler beginnen ein neues Projekt mit dem Einbinden eines sogenannten CSS Resets. Darunter versteht man ein Stylesheet, was alle Browser-Layout-Standardeinstellungen auf einen gemeinsamen Nenner bringt. Viele basteln sich ihre eigenen Resets zusammen, aber diese Arbeit kann man sich auch sparen. Inzwischen existieren diverse vorgefertigte Resets, die man verwenden kann.

Das Grundproblem besteht darin, dass die verbreiteten Browser alle ein wenig unterschiedliche Vorstellungen davon haben, wie ein Element denn aussehen soll, solange es vom Entwickler nicht explizit per CSS beschrieben wurde. So können beispielsweise Listeneinrückungen oder Überschriften-Abstände von Browser zu Browser variieren. Da kann es leicht passieren, dass eine Webseite in einem anderen Browser plötzlich anders aussieht, weil man sich auf eine inkonsistente Standardeinstellung verlassen hat, ohne sie nochmals explizit festzulegen. CSS-Resets sollen einem diesen Abgleich von Inkonsistenzen ersparen, indem die Standardwerte der Browser mit einem neuen, meist sehr einfachen, Standardwert überschrieben werden. Auf dieser Grundlage aufbauend kann man dann seine eigene Gestaltung aufbauen und hat dabei dann hoffentlich weniger mit Inkonsistenzen zu kämpfen.

Der „Klassiker“ unter den CSS-Resets ist folgendes schlichtes Stylesheet, das sämtliche Außen- und Innenabstände auf Null setzt:

* {
margin: 0;
padding: 0;
}

Doch auch komplexere Varianten werden verwendet. Die Yahoo! Interface Library (YUI) bietet ein Reset-Stylesheet, das wesentlich weiter geht. Überschriften und Text erhalten die gleiche Größe und Schriftstärke. Nicht einmal strong-Elemente werden noch hervorgehoben. Auf einer Beispielseite kann man das vereinheitlichte Ergebnis bewundern. Als Entwickler wird man so gezwungen wirklich jedes Element bewusst zu gestalten, hat dafür aber eine konsistente Erscheinung über die verschiedenen Browser-Familien hinweg.

Ebenfalls verbreitet und ähnlich radikal ist das Reset CSS von Eric Meyer. Dieses ist nicht zum blinden übernehmen gedacht, sondern soll vom anwendenden Entwickler noch um Feinheiten wie die bevorzugte Hintergrundfarbe oder Ähnliches ergänzt werden. Dazu sind im Stylesheet diverse Kommentare platziert, die den Entwickler an die Anpassung erinnern sollen. In einer Variante wurde dieses Stylesheet auch schon zuvor bei Dr. Web ausführlich besprochen (siehe „CSS Neustart“ von Andreas Zwinkau).

Eine Art Zwischenstufe zwischen den extremeren Ansätzen und dem eingangs zitierten simplen Stylesheet bietet eine Variante von Ed Eliot, die nach eigener Aussage nur die Elemente betrifft, die er selbst am häufigsten zurücksetzen muss. Auch hier gibt es eine Beispielseite.

Wer die erwähnten Stylesheets nicht erst herunterladen bzw. kopieren möchte um sie auszuprobieren, kann sie auch direkt über css-reset.com einbinden. Diese Webseite hostet alle oben beschriebenen Stylesheets über Googles App Engine und verspricht dadurch hohe Verfügbarkeit und schnelle Zugriffszeiten:

Eric Meyers Stylesheet in 648 Bytes:
<link href="http://www.css-reset.com/css/meyer.css" media="screen, projection" rel="stylesheet" type="text/css" />
YUI Reset CSS in 483 Bytes:
<link href="http://www.css-reset.com/css/yui.css" media="screen, projection" rel="stylesheet" type="text/css" />
Ed Eliots Variante in 380 Bytes:
<link href="http://www.css-reset.com/css/ejeliot.css" media="screen, projection" rel="stylesheet" type="text/css" />
Das schlichte *-Reset in 23 Bytes:
<link href="http://www.css-reset.com/css/everything.css" media="screen, projection" rel="stylesheet" type="text/css" />

Yahoos YUI Reset CSS kann man auch direkt von den Yahoo Servern beziehen:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css">.

Bei fertigen Projekten empfiehlt es sich allerdings, die Stylesheets selbst zu hosten. Jede von extern eingebundene Ressource stellt schließlich ein Ausfallrisiko dar, vor allem langfristig gesehen. Googles App Engine ist – Überraschung – ein Beta-Produkt. Auch ob css-reset.com überhaupt dauerhaft dort residieren wird, lässt sich nicht mit Sicherheit voraussagen. YUI ist schon etablierter, aber auch dort scheinen die Vorteile einer externen Einbindung nicht wirklich das Risiko zu rechtfertigen. Im Vergleich zu den zahllosen anderen Daten, die der eigene Webserver zuverlässig liefern muss, fällt eine weitere kleine CSS-Datei nun wirklich nicht ins Gewicht.

Kategorien
Webdesign

JavaScript Information Visualization Toolkit (JIT) – Alternative Visualisierungsformen mit JavaScript

Das JavaScript Information Visualization Toolkit (JIT) ist ein JavaScript-Framework für etwas ausgefallenere Präsentationsformen abseits von Torten- und Balkendiagrammen. Derzeit stehen vier verschiedene Visualisierungen zur Verfügung: RGraph, Treemap, Hyperbolic Tree und ST.

RGraph

Bei RGraphen wird eine Baumstruktur auf konzentrische Kreise gelegt. Der Stammknoten befindet sich in der Mitte, seine Kindknoten auf dem innersten Kreis, deren Kindknoten auf dem zweitinnersten, und so weiter. Durch einen Klick auf einen Knoten wird dieser zum Stammknoten und die Visualisierung ordnet sich in einer kurzen Animation neu.

Der Autor von JIT zeigt dazu einige Beispiele zum Ausprobieren: Bands in Zusammenhang zu Pearl Jam, Linux Paketabhängigkeiten, K6 graph.

Treemap

Treemaps bilden hierarchische Beziehungen als Behältnisse ab. Die Kindknoten eines Knotens werden also innerhalb dieses Knotens abgebildet.

Als Beispiel existieren dazu die Top50-Alben des JIT-Autors bei last.fm, sowie verschiedene zufallsgenerierte Treemaps.

Hyperbolic Trees

Ebenfalls sehr hübsch sind Hyperbolic Trees. Diese erlauben eine Navigation in Bäumen mit einer Art Vergrößerungsglas-Effekt. Oder, wie der Autor es etwas wissenschaftlicher ausdrückt:

„Der HT-Algorithmus zeichnet einen Baum in was als Poincaré-Scheiben-Modell der hyperbolischen Geometrie, einer Art der nicht-euklidischen Geometrie, bekannt ist. Im Zuge dessen wendet der HT-Algorithmus eine Möbius-Transformation auf den Baum an, um ihn mit einem Vergrößerungsglas-Effekt darzustellen.“

Als Beispiel gibt es Nine Inch Nails, Metallica (mit dynamisch nachladenden Beziehungen) und einen K6 Hypergraph.

ST

Der Spacetree-Algorithmus erzeugt ein relativ normales Baum-Layout, zeigt dabei aber nur die „kontextrelevanten“ Knoten. Vom Wurzelknoten bis zum selektierten Knoten werden also nur die Knoten auf demselben Pfad und ihre Geschwister, nicht aber die Kindknoten der Geschwisterknoten gezeigt. Auch bei dieser Darstellungsform kann per Klick ein neuer Knoten ausgewählt und die Darstellung dadurch dynamisch geändert werden. Als Beispiel gibt es in diesem Fall lediglich einen Baum mit Zufallszahlen.

Technisches

Alle Visualisierungsmodule können mit JSON-Baumdaten gefüttert werden. RGraph und Hypertree akzeptieren zusätzlich auch JSON-Graphen.

Das JavaScript Information Visualization Toolkit funktioniert mit IE6+, Opera 9.5+, Firefox 2.0+, Safari und Chrome. Im Internet Explorer scheint es jedoch Probleme mit der Geschwindigkeit zu geben. Googles Chrome hat noch Probleme mit den Kanten des Hypertrees, die mit der nächsten Version behoben sein sollen.

Verfügbarkeit

JIT steht unter einer BSD-Lizenz und kann kostenlos von der Projekt-Webseite bezogen werden.

Kategorien
Webdesign

Blogoscoop – Neue Plattform zum Blogstöbern

Blogoscoop ist eine neue Plattform, die sich rund um das Ranking von Blogs dreht. Benutzer können sich Ranglisten anzeigen lassen sowie Blogs bewerten und kommentieren.

Die Funktionalität geht über eine simple Top-X-Liste weit hinaus. Blogoscoop ermöglicht es, Rankings nach diversen Faktoren zu erstellen. Jedes Blog wird vom Autor mit mehreren Tags beschrieben. Benutzer können sich dann für jedes Tag oder eine Kombination aus mehreren Tags ein Ranking anzeigen lassen. Die Reihenfolge in den darin wird wiederum über Faktoren bestimmt, die man als Benutzer auswählen kann:

  • nach Seitenaufrufen (heute / gestern / 7 Tage / 14 Tage / 30 Tage)
  • nach Bewertung von Benutzern
  • neueste Blogs auf Blogoscoop
  • nach Google PageRank
  • nach Rank bei Technorati
  • nach Links bei Technorati
  • nach Alter
  • nach Anzahl Artikel in den letzten 7 oder 14 Tagen
  • nach Anzahl der Kommentare in den letzten 7 oder 30 Tagen


Blogoscoops Ranglisten-Generator

Derzeit ist die Rangliste nach Bewertung noch etwas wackelig, da es keine Mindestanzahl an Stimmen gibt. So sind die meisten Bewertungs-Ranglisten auf den oberen Plätzen von Blogs dominiert, die genau eine Stimme mit der Höchstwertung innehaben. Auch die Sortierung nach Alter ist leicht manipulierbar, wie man anhand von 100 Jahre alten Blogs sehen kann.

Zur Blogoscoop-Blogosphäre im Allgemeinen gibt es ebenfalls eine Reihe interessanter Statistiken. Neben der Anzahl der insgesamt registrierten Blogs gibt es auch Informationen über die Geschlechter- und Altersverteilung der teilnehmenden Blogger, die verwendeten Blogsysteme, sowie Seitenaufrufe oder Kommentare summiert für alle erfassten Blogs oder als Durchschnitt pro Blog. Auch eine Kartenansicht kann dank erfasster Geodaten durchstöbert werden.

Durchschnittliche Anzahl der Artikel pro Blog auf Blogoscoop

Blog-Autoren können ein oder mehrere Blogs registrieren und mit zahlreichen Informationen versehen. Neben Kurz- und Langbeschreibung fragt Blogoscoop nach dem Zeitpunkt des ersten Beitrages, den geographischen Koordinaten (inklusive Werkzeug zur leichten Ermittlung der Koordinaten nach Adresse), Feed-, Kommentarfeed- und Favicon-URL, Blogsystem, Sprache und bis zu fünf beschreibenden Tags. Für die Erfassung der Seitenaufrufe muss in gewohnter Weise ein kleiner HTML-Fetzen mit Zählgrafik (wahlweise sichtbar oder unsichtbar) in das Blog eingebaut werden.

Große Besuchermassen durch Blogoscoop sind derzeit nicht zu erwarten, was aber primär an der begrenzten Alpha-Phase liegen dürfte. Die Beta-Version scheint zwar bald zu folgen, doch bisher kann man sich lediglich als Alpha-Tester bewerben – was aber zumindest in diesem Fall mit keiner nennenswerten Wartezeit verbunden war.

Generell ist das Spannende an Blogoscoop nicht die Möglichkeit, sich mit anderen zu messen, sondern das Stöbern und Entdecken neuer Blogs. Die Menge der erfassten Blogs ist zwar noch begrenzt, aber trotz Alpha-Status nehmen bereits über 400 Blogs teil – Tendenz stark steigend.

Kategorien
Webdesign

Open Flash Chart – Dynamische Diagramme auf Flash-Basis

Open Flash Chart ist ein freies Framework um flashbasierte Diagramme zu erzeugen. Es beherrscht eine Vielzahl verschiedener Stile und ist weitgehend konfigurierbar.

Sketch-Diagramm

Grundsätzlich besteht jedes Diagramm aus einem Flash-Objekt, das den Stil und Inhalt des Diagramms aus einer separaten Datendatei bezieht. Diese Datendatei könnte man per Hand schreiben, aber natürlich auch dynamisch generieren – was in den meisten Fällen den eigentlichen Reiz ausmachen dürfte.

Um die Daten leichter in das entsprechende Format zu bringen, kommt Open Flash Chart mit einer ganzen Palette an Helfer-Klassen. Diese sind primär in PHP geschrieben und dokumentiert, aber es gibt auch Varianten für Perl, Java, Ruby on Rails, Python und .NET.

Kreisdiagramm

Aktuell ist Version 1.9.7, aber Version 2 ist bereits in den Startlöchern und derzeit in der Alpha-Phase. v2 wird unter anderem JSON als Datenformat nutzen.

Kerzen-Diagramm

Open Flash Chart selbst ist unter der GPL veröffentlicht und die PHP-Klassen unter der LGPL. Beides kann also sehr frei genutzt werden.

Kategorien
Webdesign

Launchy – Programme und Dokumente unter Windows schneller aufrufen

Im Laufe der Zeit sammelt sich auf den meisten Systemen eine beträchtliche Menge an Programmen an. Der Platz in der Schnellstartleiste ist begrenzt und auch ein sauber strukturiertes Startmenü benötigt meist zumindest eine Hierarchiestufe. Eine alternative Methode zum schnellen Starten nennt sich Launchy.

Dieses kostenlose und quelloffene Hilfsprogramm für Windows ist ein praktischer Helfer um über die Tastatur Programme zu starten und Dokumente zu öffnen. Die Tastenkombination Alt+Tab Alt+Leertaste ruft ein schlichtes Eingabefeld auf, in dem man den Namen des gesuchten Programms eingeben und per Eingabetaste aufrufen kann. Launchy passt sich intelligent an, sodass man meistens nur einen Bruchteil des gewünschten Programms eintippen muss. Selbst Tippfehler versucht es auszugleichen. Bei oft genutzten Programmen reicht meist schon der erste Buchstabe.

Ein Screenshot von Launchy

Besonders wenn man seine Hände sowieso gerade auf der Tastatur hat ist Launchy deutlich schneller als der Griff zur Maus. Falls das gesuchte Programm nicht in der Schnellstartleiste oder in der ersten Startmenü-Ebene liegt lohnt es sich auch meist von Maus zu Tastatur zu wechseln.

„Ich liebe dieses Tool und kann mir überhaupt nicht mehr vorstellen, wie ich ohne damit arbeiten konnte.“ (Monika Lischke)

Noch praktischer wird es, wenn man auch Dokumente über Launchy öffnet. Standardmäßig werden nur Programm-Verknüpfungen im Startmenü und auf dem Desktop indiziert. Man kann das Programm so konfigurieren, dass es jedes beliebige Verzeichnis in den Index aufnimmt. Für jedes Verzeichnis kann man auch bestimmen, welche Dateitypen und wie viele Unterverzeichnisse erfasst werden sollen. Auch die persönlichen Bookmarks können aufgenommen werden.

„Ich habe Launchy mittlerweile auf der Liste meiner unverzichtbaren Programme – vielleicht könnt ihr es auch gebrauchen =)“ (Carsten Knobloch)

Über Plugins lassen sich weitere Funktionen ergänzen. Eines der drei mitgelieferten Plugins übernimmt die Funktion eines Taschenrechners. Mal schnell etwas auszurechnen geht dadurch ungeheuer schnell – allerdings muss man Kommazahlen mit einem Punkt statt Komma schreiben, was etwas gewöhnungsbedürftig ist. Andere Plugins erlauben es beispielsweise Kommandozeilenbefehle auszuführen, oder Einträge zu einem Google Calendar hinzuzufügen.

Die Taschenrechner-Funktion in Launchy

Einziger Nachteil ist, dass man mit Launchy ein weiteres Programm im Hintergrund laufen hat, das Speicher und manchmal (bei Index-Aktualisierungen) Prozessorzeit beansprucht. Je nach Indexgröße sind 20MB oder mehr schnell verbraucht. Den meisten Systeme dürfte das nicht viel ausmachen, aber wer nur sehr knapp mit Speicher ausgestattet ist, sollte das bedenken.

„Alles in allem ein praktischer Helfer, auch wenn man sich kurz umgewöhnen muss – danach geht aber alles fixer von der Hand. Mit knapp 15MB Speicherbelegung geht auch der Verbrauch in Ordnung. Klare Empfehlung meinerseits.“ (Robert Neumann)

Dieses Launchy ist übrigens nicht zu verwechseln mit der Firefox-Extension gleichen Namens, mit der man Webinhalte aus Firefox heraus an andere Programme übergeben kann.

Kategorien
Webdesign

Wortwolken mit Wordle

Wordle ist eine Online-Anwendung, die beliebige Texte zu Wortwolken – genannt wordles -, umformt. Ähnlich wie bei den bekannten Tagwolken werden häufiger vorkommende Wörter größer dargestellt. Das Ergebnis ist grafisch allerdings wesentlich attraktiver als eine gewöhnliche Tagwolke.

Eine Wortwolke mit dem Text dieses Artikels

Als Quelle kann man entweder beliebigen Text in ein Formular einfügen, oder eine URL zu einem Text angeben. Typische Standard-Wörter wie der/die/das werden automatisch heraus-gefiltert. Alternativ akzeptiert Wordle auch Benutzernamen des Social-Bookmarking-Dienstes del.icio.us und generiert daraus eine hübsche, aber nicht klickbare Tagwolke.

Das Design der Wortwolke lässt sich über verschiedene Parameter beeinflussen. Die Wörter können horizontal, vertikal, verschiedene Stufen dazwischen, oder wie-auch-immer-es-passt angeordnet werden. Ein Haufen verschiedener Schriftarten steht zur Auswahl und man kann die Farben bestimmen oder aus Vorgaben auswählen.

Alternatives Layout der gleichen Wortwolke

Die dabei entstehenden Bilder fallen unter eine Creative-Commons-Namensnennungs-Lizenz, man kann sie also fast beliebig verwenden – auch kommerziell:

„Sie dürfen ein Wordle nehmen, es auf Ihr Buch drucken, Ihr T-Shirt, Ihr Werbeplakat, oder sonstwo. Sie dürfen davon reich werden. Sagen Sie den Leuten nur, wie Sie das Bild erstellt haben, oder, falls Sie eines aus der Galerie nutzen, woher Sie es haben.“ (Übersetzt aus der Wordle-FAQ)

Auch technisch sind die Bilder vielseitig einsetzbar, falls man über einen PDF-Drucker oder ähnliches verfügt. Die Anwendung verfügt über eine Druckfunktion, über die man die Bilder ausdrucken kann. Druckt man in einen PDF-Drucker hat man danach ein PDF mit der Wortwolke, das beliebig skalierbar ist. Der einzig andere Weg ein Wordle weiterzuverarbeiten führt über Screenshots, da die Anwendung keine Pixelgrafiken speichern kann.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Photoshop

Mißlungene Fotos retten

Schöne Bilder werten eine Webseite deutlich auf. Designer planen bei der Gestaltung einer Webseite daher nicht selten Bereiche ein, die später mit Bildmaterial des Kunden aufgefüllt werden sollen. Doch, wenn dann das Bildmaterial eintrifft, ist das Entsetzen oft groß: Die Bilder sind schlecht. Sie leiden unter schlechtem Licht, schlechter Perspektive und schlechter Komposition. Unverändert würden sie das liebevoll ausgetüftelte Design mehr oder weniger zerstören.

Helfer in der Not sind hier Bildbearbeitungsprogramme. Mit Photoshop oder seinen Verwandten kann man versuchen, zu retten, was noch zu retten ist.

Wie sehr man ein Bild verbessern kann, hängt von der ursprünglichen Qualität ab. Ein Bild, das schon gut fotografiert wurde, wird immer besser wirken, als ein nachträglich ausgebessertes Bild. Ebenso ist man durch eventuelle inhaltliche Bedingungen eingeschränkt. Sollen beispielsweise dokumentarische Inhalte vermittelt werden, darf man das ursprüngliche Foto nur wenig verändern.

Schritt 1: Die Schere zücken

Ein bescheidenes Foto
Ein bescheidenes Foto

Viele schlechte Bilder leiden unter einer suboptimalen Wahl des Bildausschnittes. Die Perspektive kann man nachträglich nicht mehr ändern, aber man kann den Ausschnitt innerhalb des Bildes wählen. Durch mutiges Wegschneiden kann fast jedes schlechte Bild verbessert werden.

Je größer die Auflösung des ursprünglichen Bildes ist, desto mehr kann weggeschnitten werden. Meist kommt es einem zugute, dass Bilder im Internet nur eine sehr geringe Auflösung haben müssen, man also sehr viel vom ursprünglichen Bild weglassen kann. Diese Möglichkeit sollte man auch nutzen. Bei Bildern für gedruckte Publikationen hat man weniger Freiheit.

Tendenziell ist bei Fotos weniger meist mehr. Je mehr in einem Bild zu sehen ist, desto schwieriger wird es, dieses auch gut aussehen zu lassen. Viele unprofessionelle Bilder leiden darunter, dass zu viel zu sehen ist. Statt des eigentlichen Bildmotivs finden sich dann noch die angrenzende Straße, Autos, Mülleimer oder andere ablenkende Objekte im Bild. Diese gilt es radikal zu beseitigen.

Das Unwichtige weggeschnitten
Das Unwichtige weggeschnitten

Wer die Muße dazu hat, kann auch beginnen, störende Objekte weg zu retuschieren. Solange das Bild aber nicht wirklich wichtig ist (weil es beispielsweise in einer Header-Grafik verwendet werden soll), dürfte sich dieser Aufwand kaum lohnen.

Starkes Querformat
Ein starkes Querformat

Bei der Wahl des Formates bietet es sich an, ein wenig zu experimentieren – zumindest, wenn es das Layout, in dem das Foto zum Einsatz kommen soll, überhaupt zulässt. Starke Querformate wirken meist interessanter, als die gewohnten Standard-Formate 3:2 bzw. 4:3.

Hochformat
Hochformat

Auch starke Hochformate können sehr interessant wirken. Es ist allerdings häufig schwierig, alle wichtigen Bildinformationen in einem solchen Format unterzubringen. Wenn es gelingt, dann hat man ein Format, welches noch ungewöhnlicher ist als ein starkes Querformat.

Schräge Perspektive
Schräge Perspektive

Bildausschnitte müssen auch nicht genau horizontal oder vertikal ausgerichtet sein. Gekippte Bilder wirken dynamisch und weniger gewöhnlich. Viele an sich langweilige Bilder wirken plötzlich spannend, wenn man sie einfach um 45° kippt. Der Effekt ist so simpel und wirkungsvoll, dass ich häufig davor zurückschrecke, solche Fotos überhaupt zu machen, weil es sich ein wenig geschummelt anfühlt.

Schritt 2: Kontrast erhöhen


Ein weiteres bescheidenes Foto

Neben der Komposition können auch die Farbwerte in Bildern ziemlich unterdurchschnittlich sein. Schlechte Fotos wirken häufig recht „matschig“ oder flach. Dies passiert leicht, wenn die Bilder zum Beispiel im Schatten oder bei trübem Wetter entstanden sind. Ein verstärkter Kontrast kann über die schlechte Lichtqualität hinwegtäuschen.

In Photoshop kann man den Kontrast über eine Einstellungsebene beeinflussen. Das ist immens praktisch, da man die Einstellungen so auch im Nachhinein noch verändern kann. Tendenziell macht es Sinn, nicht nur den Kontrast zu erhöhen, sondern gleichzeitig auch die Helligkeit zu verringern. Dadurch wirken die hellen Bildbereiche nicht so schnell „ausgefressen“. In den dunklen Bildbereichen fallen Fehler weniger auf.


Erhöhter Kontrast

Häufig ist der Spielraum für Kontrasterhöhungen dennoch sehr begrenzt. Besonders wenn in einem Bild auch Himmel zu sehen ist, verwandelt sich dieser leicht in eine weiße Fläche. Wenn man die Zeit dazu hat kann man den Himmel ausmaskieren und separat behandeln.

Sollte der Übergang zwischen Himmel und Nicht-Himmel linear sein, zum Beispiel in Form eines Horizonts, kann man die Maskierung recht schnell und effektiv mit einer Verlaufsmaske erledigen. Dazu wählt man einfach die Einstellungsebene aus, und zeichnet mit dem Verlaufswerkzeug (Tastaturkürzel ‚G‘) einen Schwarz-Weiß-Verlauf auf der Höhe des Horizontes. Bei unregelmäßigen Übergängen, wenn zum Beispiel Häuser im Bild sind, geht das leider nicht so leicht.

Wenn der Aufwand, kritische Bereiche einzeln zu bearbeiten, nicht vertretbar ist, neige ich persönlich dazu, die „Zerstörung“ dieser Bildbereiche in Kauf zu nehmen. Man kann häufig mehr retten, indem man einzelne Bereiche vernachlässigt und den Gesamtkontrast dafür stärker macht. Das ist allerdings jedes mal eine Einzelfallabwägung.


Gradationskurven als Einstellungsebene

Neben dem normalen Kontrast-Regler kann man auch Gradationskurven sehr gut einsetzen. Auch diese gibt es als praktische Einstellungsebene. Ein einfacher Trick beim Einsatz dieses Filters ist, eine s-förmige Kurve anzuwenden. Dann entspricht der Helligkeitsverlauf im Bild eher dem von analogem Filmmaterial und das wirkt meistens besser.


S-förmige Gradationskurve

Schritt 3: Sättigung anpassen

Zu guter Letzt kann man noch ein wenig an der Sättigung (Einstellungsebene: Farbton/Sättigung) herumspielen. Je nach Motiv kann man versuchen, sie ein wenig zu überziehen, oder zurückzudrehen.


Hohe Sättigung

Durch Kontrastanhebungen hat man oft bereits recht stark gesättigte Farben. Besonders in Motiven, in denen bereits deutliche Farben vorhanden sind, zum Beispiel in Form von Gras, können leuchtende Farben über das schlechte Licht hinwegtäuschen.

Auch eine unnatürlich geringe Sättigung hat ihren ganz eigenen Reiz. Dadurch verhindert man, dass das Foto nur wie ein (schlechtes) Abbild der Wirklichkeit rüberkommt. Man kann auch so weit gehen, dass man das Foto komplett entsättigt und dadurch ein Schwarz-/Weiß-Bild erhält.


Geringe Sättigung

Generell sollte man sich bei der Nachbearbeitung nicht zu sehr an der Wirklichkeit festklammern – es sei denn, man will dokumentarisch arbeiten. Die Wirklichkeit korrekt und fesselnd abzubilden, fällt selbst Profi-Fotografen schwer. Bei der Rettung schlechter Fotos sollte man sich mehr darauf konzentrieren, wie hübsch das Ergebnis wirkt. Und mit ein wenig Herumprobieren kann man die meisten Bilder zumindest soweit reparieren, dass ungeschulte Augen die schlechte Vorlage nicht mehr bemerken. ™


Die einzelnen Varianten im Vergleich

Erstveröffentlichung 11.04.2007