Pixelfans

Workflow für SVG

geschrieben von Pawel

Nachdem ich jetzt schon mehrere Vektorgrafiken für das Web optimiert habe, möchte ich meine Herangehensweise einmal kurz vorstellen. Auf den künstlerischen Prozess werde ich hier nicht eingehen, da es dafür gute Tutorials gibt.

Es beginnt mit einer Bildvorlage. Das kann ein Scribble sein aber auch ein Foto, wenn es ein (abstrahiertes) Portrait werden soll. Das Bild wird in Inkscape geladen und die Ebene als Hintergrund angelegt und entsprechend umbenannt. Eine weitere Ebene wird angelegt und die Transparenz auf 30% gesetzt. Nur auf dieser wird nun die Vorlage umgesetzt. Bei komplexen Grafiken ist es unbedingt erforderlich, die Elemente zu benennen, da sonst eine Postproduktion kaum möglich ist.

Grafik: SVG für das Web
Ab der Version 0.47 bietet Inkscape die Möglichkeit die Grafik als optimierte SVG abzuspeichern. Diese ist schon recht kompakt, kann aber noch weiter reduziert werden. Auf jeden Fall muss der background entfernt werden.

Es hat sich bei mir bewährt, in einem Fenster einen Editor offen zu haben und im anderen mit dem Firefox die Grafik ständig zu kontrollieren. Inkscape ist mit seinem Gleitkommazahlen für meinen Geschmack etwas zu genau. Meist reicht bei den Pfaden eine ganze Zahl und bei den Transformationen genügen zwei Ziffern nach dem Komma.

Folgendes kleine Zenityscript leistet mir unter Gnome/ Linux gute Dienste:

#!/bin/bash
zenity --info --text "With this tool, you can convert the float number in a SVG file in a integer numbers. This will important reduce the size of the file.The convertetd file will save in the same directory like this script."
input=`zenity --title="Select a file" --file-selection --text="name of the file"`
awk '{
line=$0
output=""
# for every float on the line
while (match(line,/[0-9]+[.]?[0-9]*/)) {
# extract the float from the line
number=substr(line,RSTART,RLENGTH)
# insert it into the output line
output=output substr(line,1,RSTART-1) int(number+0.5)
# save the rest of the line for further processing
line=substr(line,RSTART+RLENGTH)
}
output=output line
print output
}
' "$input" > output.svg
zenity --info --text 'finished '

Es rundet alle(!) Zahlen auf Ganzzahlen. Das Ergebnis ist deshalb nicht 1:1 zu verwenden, für die Pfade allerdings sehr nützlich.

Zuletzt bleibt nur, das Ergebnis in anderen Browsern zu vergleichen.

Kategorie: Ideen , Layout , SVG | Trackbacks (0) | Permalink

Twitter, YQL und jquery

geschrieben von Pawel

Über die API von Twitter ist in diesem Blog schon viel geschrieben worden. Sie ist gut dokumentiert und einfach zu nutzen. Zu den Schattenseiten gehört der gelegentliche, regelmäßige Ausfall und die Aufrufbeschränkung. Um Tweets in eine Website einzubinden, muss man immer über einen Cache nachdenken. Für die Tweets, die auf pixelfans.de von Carsten und mir eingebettet werden sollten, hatte ich folgende Vorstellungen:

• es sollte jeweils nur der letzte Tweet von beiden sichtbar sein
• es sollte Javascript genutzt und
• keine Passwörter verwendet werden

Die Verwendung von Javascript entspricht dem "flüchtigen" Charakter am Besten. Es wird keine Rechenzeit auf dem Server verschwendet. Wenn Javascript nicht aktiviert ist, werden die Tweets eben nicht angezeigt. Sie gehören nicht zur Grundfunktionalität der Seite.

In der c't wurde eine Lösung beschrieben, die direkt die Twitterfunktionen nutzt und mittels Proxy auch viele andere Probleme löst. Meine Lösung nutzt YQL, da es dadurch kinderleicht wird, die Tweets miteinander zu mixen und es einen Webcache mitbringt. Eine gutes Tutorial zu YQL hat Christian Heilmann im letzten Jahr im Webkrauts-Adventskalender veröffentlicht.

In seinem Beispiel wird query.multi genutzt, um mehrere Abfragen miteinander zu verbinden. Die Abfragen werden am Besten in der Konsole ausprobiert. Um sie zu verwenden, müssen unter dem Menüpunkt Data Tables die Community Tables angezeigt werden. Der Treeview ist eine geniale Sache, da sofort erkennbar ist, wo sich die gewünschte Information befindet.

Die Verwendung von jquery,YQL und Twitter wird in diesem Live-Example umfangreich erklärt. Hier unser vollständiger Code:

$(document).ready(queryYQL);
function queryYQL(){
var yqlUrl = "https://query.yahooapis.com/v1/public/yql";
var query = "select * from query.multi where queries=\"select * from twitter.user.status where id='pawelf';select * from twitter.user.status where id='carstenbach'\"";
var queryUrl = yqlUrl + "?q=" + escape(query) + "&format=json&callback=?" + "&env=" + escape("store://datatables.org/alltableswithkeys");
$.getJSON(queryUrl, function (yqlObject) {
var ptwitterText = yqlObject.query.results.results[0].meta[1].content;
var ctwitterText = yqlObject.query.results.results[1].meta[1].content;
$("#caba").text(ctwitterText);
$("#pawel").text(ptwitterText);
$("#caba,#pawel").fadeTo(900,1);
 } );
 }

Die beiden DIV's die die Tweets enthalten werden nur eingeblendet, wenn Javascript verfügbar ist.

Update: 04.09.2010

Die Datatables haben sich geändert. Die status-Abfrage gehört jetzt zu twitter.user. Die query muss angepasst werden:

var query = "select * from query.multi where queries=\"select * from twitter.user where id='pawelf';select * from twitter.user where id='carstenbach'\"";

Das hat dann auch andere Rückgabewerte zur Folge, die dann angepasst werden müssen:

yqlObject.query.results.results[0].user.status.text

Da wir den aktuellen Code hier im Blog verwenden, kann dieser leicht eingesehen und übernommen werden.

Kategorie: Ideen , JS | Trackbacks (0) | Permalink

Workshopaussichten an der Saale

geschrieben von carsten

In diesem Frühjahr gibt es ein paar nette HTML-Workshops an der Medienanstalt. Klingt vielversprechend, wird hier kurz vorgestellt und kommt für mich leider trotzdem drei Jahre zu spät.

Schaut man sich den aktuellen Seminarkalender des Medienkompetenzzentrums in der Rubrik “Multimedia & Internet” genauer an, fallen drei interessante Einsteigerseminare für Webfrickler auf.

Barrierefreiheit von HTML-Seiten

18.03.2010 bis 19.03.2010

Übersicht der BITV (Barrierefreie Informationstechnologie-Verordnung) und existierender internationaler Web-Standards. Vergleich von Standardkonformität und Barrierefreiheit. Anforderungen an den Aufbau von HTML und die Inhalte der Seiten. Prüfmethoden, Checklisten und Werkzeuge werden erläutert.

Erstellen von Webseiten mit XHTML

29.03.2010 bis 31.03.2010

Einführung in XHTML und Entwicklung standardkonformer Webseiten. Neueinsteiger/-innen erlernen mit XHTML gleich zu Beginn die neue Reformulierung von HTML auf Basis von XML. Umsteiger/-innen von HTML können in die zukunftsweisende XML-Welt einsteigen, wobei sie sich auf die Kompatibilität ihrer Inhalte verlassen können.

Webseitengestaltung mit HTML für Fortgeschrittene

07.06.2010 bis 09.06.2010

Vertiefung des Grundkurses. Erstellen von Tabellen und Formularen. Einbinden von Grafiken, Bildern, Sound und Videoclips. Verknüpfungen und arbeiten mit Frames. Internetseiten veröffentlichen.

Auch wenn die Frage der Aktualität gerade bei dem Workshop zur Barrierefreiheit etwas hinter dem eigentlichen Bildungszuwachs zurück bleibt, kann jeder Interessierte hier sicher ein paar basics mitnehmen, die ein Praxisworkshop immer noch besser zu vermitteln mag als ein Buch. Wobei auch das fraglich bleibt.

Ein bisschen nachteilig empfinde ich, dass ich auf der Webseite des MKZ keine Möglichkeit habe mich näher über die Referenten zu informieren. Da besteht ein wenig Nachholebedarf, ähnlich wie an mehreren anderen Stellen des gesamten Auftritts, aber das ist ein anderes Blatt, vielleicht auch ein anderer Beitrag.

Kategorie: | Trackbacks (0) | Permalink