Tricks im Web

Die offene Alternative zu Flash

(msc) Google Web Designer ist ein Editor für HTML-Seiten, der vom Suchmaschinengiganten kostenlos für Windows und Mac angeboten wird.

Der Name impliziert, dass es sich um einen vollwertigen HTML-Editor handelt, vergleichbar mit Dream­weaver von Adobe, mit dem sich klassische Text-Bild-Layouts erstellen lassen. Dem ist aber nicht so. Web Designer ist eigentlich ein Werkzeug für Webanimationen. Web Designer ist somit eine kostenlose Alternative zu Flash, die obendrein nicht auf ein proprietäres Datenformat setzt, sondern auf den offenen HTML5-Standard. Die Animationen laufen daher auch auf den Mobilgeräten, auf denen Flash nicht verfügbar ist.

Dieser Webstandard befähigt die modernen Browser, animierte, interaktive Anwendungen ohne Extra-Plug-in auszuführen. Die Animationen werden mittels CSS, JavaScript und den neuen HTML-Tags im WYSIWYG-Modus gestaltet – für erfahrene Webentwickler ist auch eine Code-Ansicht verfügbar. Auf der Zeichenfläche erstellt man seine Grafik- oder Textobjekte, die über die Zeitleiste am unteren Rand animiert werden. Um ein Objekt in Bewegung zu versetzen, fügt man über das Plus-Symbol ein Schlüsselbild (Englisch Keyframe) hinzu. Um beispielsweise ein Objekt von rechts nach links wandern zu lassen, platziert man es auf dem ersten Schlüsselbild an der Anfangsposition und beim zweiten Schlüsselbild am Ziel. Die Zwischenpositionen werden von der Software selbständig erzeugt.

Nicht nur Positionsänderungen, sondern auch Drehungen oder sogar Bewegungen im dreidimensionalen Raum sind mit Web Designer möglich. Das Programm beherrscht zwei Animationsmodi, nämlich Quick und Advanced. Beim ersten Modus werden alle Objekte über die gleichen Schlüsselbilder gesteuert. Beim Advanced-Modus können Objekte separat animiert werden.

Es ist nicht der reine Altruismus, der Google zur Bereitstellung dieses Werkzeugs bewegt: Mit Web Designer lassen sich hervorragend animierte Banner für Googles Adsense-Werbenetz erstellen – die gängigen Banner-Formate stehen beim Erstellen eines neuen Dokuments zur Auswahl. Die Botschaft ist klar: Auch wer kein Flash beherrscht, soll bei Google «Rich Media»-Anzeigen schalten können.

Solche Hintergedanken des Herstellers bedeuten allerdings nicht, dass das Programm nicht hervorragend für kleinere Animationsprojekte geeignet wäre.

Wie man sich mit Stockbildern blamiert

(msc) Das deutsche Technikmagazin «t3n» prangert im Artikel «Stockfotografie zum Fremdschämen» den lieblosen Umgang mit Agenturbildern an. Das Problem liegt auf der Hand: Die abstrakten Themen aus den Bereichen Wirtschaft oder Politik, vor allem aber auch bei der Technik lassen sich nur schwer bebildern.

Nun werden in solchen Fällen sehr oft die offensichtlichen – und sehr abgegriffenen Motive bemüht. Geht es um E-Commerce, wird eine Tastatur abgebildet, bei der eine Taste entsprechend mit «Cash» beschriftet ist. Cyberkriminalität oder Hacker werden mit dem immergleichen Mann bebildert, der mit Skimaske vor dem Computer hockt – «t3n» zitiert denn auch süffisant einen Artikel von der Satire-Site «Postillon», die schon 2012 schrieb: «Umfrage: 98 Prozent aller Hacker tragen keine Skimaske am Rechner».

Weitere Dauerbrenner sind fröhliche Damen mit Headset, der omnipräsente Facebook-Daumen, um einen Laptop versammelte Geschäftsleute, 3D-Schriftzüge und Flipcharts.

Autor Lars Budde entlarvt mit sei­nem Artikel die schlimmsten Klischees. Eine Aufforderung an die Bildredaktoren, auch einmal etwas weiterzudenken und nicht gleich das erstbeste Stockfoto zu verwenden.

bit.ly/sfschaemen

Das Auge für Schrifttypen schärfen

(msc) Mit einem Blick eine Schrift identifizieren können – das macht Eindruck auf Kollegen und Kunden. Diese Fähigkeit lässt sich mit der App The Font Game HD von Justin Stahl schulen. Die App lässt einen ein Schrift-Quiz spielen: Sie zeigt ein Schrift-Sample mit vier möglichen Schriftnamen zur Auswahl, bei der man die richtige Lösung antippen muss. Nach einer Runde gibt es eine Auswertung mit der Punktzahl und der Möglichkeit, sich in eine globale Rangliste einzutragen.

Im Flip-Spielmodus werden einem vier Schriftmuster präsentiert, in dem man die angegebene Schrift auswählen sollte.

Hochnotpeinliche Layoutpannen

(msc) Die selbst nicht gerade durch ihr besonders geschmackvolles Layout bekannte Website Buzzfeed hat eine Zusammenstellung von 28 hochnotpeinlichen Layoutpannen veröffentlicht. Dabei geht es nicht nur um stilistische Entgleisungen in Zeitungen und Zeitschriften. Die Seite präsentiert veritable Fehlleistungen bei der Produktion: Stehsatz, der auch beim gedruckten Erzeugnis nicht durch den richtigen Text ersetzt wurde. Ein unmotiviertes «Fuck» inmitten eines Artikels. Oder missratene Übernahmen aus Webseiten, bei dem die Aufforderung «Bitte hier klicken, um Autos zu vergleichen» im Printprodukt gelandet ist.

Nebst den offensichtlichen Fehlern gibt es auch viele Platzierungssünden. Da schreibt der «Belfast Telegraph» beispielsweise «Gewinnen Sie Traumferien!» als Teaser für eine Verlosung im Blatt – und gross darunter findet sich ein Foto der gekenterten Costa Concordia. Ein Freistellungsmalheur leistet sich das Reisemagazin «Where»: Das freigestellte Covergirl (mehrfach) so über den Kopf gelegt, dass das Eabgedeckt wurde: Statt «Where» könnte man auch «Whore» lesen – was die abgebildete Frau als «Hure» beschimpft.

Die Layoutpannen befriedigen einerseits die Schadenfreude – was darüber hinwegtröstet, dass uns allen schon kleinere oder grössere Fehler unterlaufen sind. Andererseits weisen die Pannen darauf hin, wie wichtig die Sorgfalt auch bei der Arbeit unter Zeitdruck ist.

bit.ly/laydisasters

Halbton-Effekt für Vektor-Porträts

(msc) Eine der besten Illustrator-Anleitungen des Jahres kommt (laut der Übersicht unter bit.ly/vtop2013) von Cristiano Siqueira: Er erläutert in 26 Schritten, wie aus einem fotografischen Porträt eine faszinierende Strichzeichnung wird, bei der Verläufe durch eine Abfolge paralleler Linien zunehmender Stärke umgesetzt werden. Das Resultat ist eine Art Halbton-Umsetzung, bei der die Linien den Kurven des Motivs folgen. Die Konturen werden mit dem Zeichenstift grob nachgezeichnet, worauf sie mit dem Überblenden-Werkzeug Tiefe erhalten.

bit.ly/tpblend