Vektorgrafik mit Javascript

geschrieben von Pawel

Webdesign zwingt immer wieder zu Kompromissen. Die überwiegende Mehrheit der Nutzer ist immer noch mit irgendeinen Internet Explorer unterwegs. Auch wenn Ende des Jahres der IE9 mit der nativen Unterstützung für SVG kommt, sind seine älteren Geschwister noch eine Weile im Netz aktiv und zwingen zu Kompromissen, wenn Vektorgrafiken genutzt werden sollen.

Dabei kann Javascript zum Einsatz kommen. Nun ist Javascript nicht unbedingt ideal. Abgesehen davon, dass es aktiviert sein muss, müssen zusätzliche Bibliotheken geladen werden und der Vorteil der Zugänglichkeits des Vektormarkups ist auch nicht mehr (unbedingt) gegeben. Auf der anderen Seite gibt es so viele Webseiten, die aktiviertes Javascript voraussetzen, das es überwiegend genutzt wird. Wenn Vektorgrafiken mit Scripten agieren sollen, ist es sowieso nötig.

Drei unterschiedliche Lösungen konkurrieren hier miteinander.

Raphaël

Raphaël besteht aus einer 55,3 KB großen Datei und bringt eine SVG-nahe Syntax mit, die aber erst erlernt werden muss. Zwar entsprechen die Grundformen und Pfaddefinitionen dem von SVG, Animationen, Gradienten und ähnliches müssen aber spezifisch beschrieben werden. Das Framework nutzt bei der Ausgabe der Vektoren VML für den Internet Explorer und sonst SVG. Es gibt leider keinen Konverter für dieses Framework. Perspektivisch deutet sich eine Lösung an.

Die Beispiele sind recht beeindruckend und können leicht modifiziert werden. Wenn man sich bei seiner Arbeit in Inkscape auf Pade beschränkt können diese direkt aus dem XML-Editor exportiert und als Variable eingefügt werden. Eine Stärke von Raphaël besteht deshalb in der Darstellung von einfacheren Formen in Kombination mit Interaktionen, wie zum Beispiel bei dieser Karte der BRD oder Charts.

SVGWeb

Das Googleprojekt SVGWeb übersetzt für die Internet Explorer SVG in Flash und deckt dabei einen beeindruckenden Sprachumfang ab. Die einzubindende Javscriptdatei ist aber stattliche 121kb schwer. Die Einbindung ist allerdings sehr simpel und erfolgt über einen <script>-Tag, der dann auch direkt SVG-Markup ohne Änderungen aufnehmen kann

AmpleSDK

Relativ wenig bekannt, aber sehr mächtig ist AmpleSDK. Das Framework beschränkt sich nicht auf SVG sondern möchte auch andere GUI-Elemente für alle Browser nutzbar machen. Neben einer runtime.js, die ca. 100kb groß ist, müssen die genutzten Module eingebunden werden. Für den Internet Explorer wird die Vektorgrafik in VML übersetzt. Die Sprachunterstützung von SVG ist geringer als beim Googleprojekt, die Einbindung gelingt aber ebenso leicht. AmpleSDK gestattet 3 verschiedene Einbindungen über einen <script>-Tag, die empfehlenswerteste haben wir in dieser Grafik, die Jens Grochtdreis darstellen soll, angewendet. Etwas komplizierte ist sie, bei der Verwendung der Animationssprache SMIL. Dieses Beispiel einer Fortschrittsanzeige läuft dann aber auch im Firefox 3.6, der diese noch nicht nativ beherrscht.

Fazit

Die praktikabelste Lösung ist für mich AmpleSDK, da sie auf Javascript und DOM-Manipulation beschränkt bleibt und kein Plugin auf dem Zielrechner benötigt. Die Grafiken können einfach in Inkscape erstellt werden. Natürlich gibt es Grenzen, die sich durch die Grenzen von VML ergeben. Wenn die Einbindung der Javascriptdateien und der <script>-Tag zudem noch durch Conditional Comments geklammert werden, hat man eine sehr flexible Lösung, bis nur noch Browser existieren, die diesen Kompromiss nicht mehr brauchen.

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

Alles in einer Seite

geschrieben von Pawel

Ich bin ein Fan von PHP. Vor kurzem habe ich jedoch einen Blogbeitrag gelesen, dem ich an dieser Stelle widersprechen muss. Der Autor zeigt in seinem Beispiel, die Wiederwendung des Dokumentenkopfes und -fusses per include, welche mich früher auch überzeugt hat.

Heute bin ich aber der Meinung, dass man PHP nur benutzen sollte, wenn

• eine hohe Frequenz in der Veröffentlichung hat (z.B. bei einem Blog)
• dynamische Inhalte benötigt werden
• eine serverseitige Prüfung wünschenswert ist (z.B bei einem Formular)

Für Portfolios, Visitenkarten im Web, die im Wesentlichen nur Angebot, Öffnungszeiten u.ä. anbieten, genügen statischen Seiten oder eine statische Seite. Wenn die Fleischerei Müller nicht Wurstwaren über das Internet verkaufen will, ist der Inhalt der Webpräsenz überschaubar. Typischerweise würden Ladengeschäft sowie das Wurstangebot beschrieben und wie Herr Müller erreichbar ist.

Gerade dafür scheint doch der Blogbeitrag geradezu geschaffen zu sein.Er ist aber nur dann, wenn der Kopf und Fussbereich des Dokuments wirklich mehrfach gebraucht wird.

Spätestens seit Eric Meyer's sein Präsentationssystem S5 vorgestellt hat, ist es klar, dass man auch alle Inhalte in eine Seite packen und mit Javascript den Eindruck mehrerer Seiten erzeugen kann.

Als Beispiel, mag der Relaunch meiner kleinen Portfolioseite dienen. Eigentlich komme ich selten dazu, nebenberuflich etwas von meiner Zeit anbieten zu können. Es ist mehr eine Referenz von meinem (momentanen) Können und nie richtig fertig. Der Inhalt der Seiten hat länger Bestand. Ich hatte die Seite zuletzt vor 2 Jahren geringfügig verbessert. Insgesamt war das Design schon etwas angestaubt. Zudem wollte ich auch mein Wissen über SVG integrieren.

Die Struktur der Seite ist sehr einfach (HTML):

...
<ul id="nav">
<li><a href="#webdesign" title="Was gehört dazu?">Webdesign</a></li>
<li><a href="#grafik" title="Vektorgrafik heute nutzen!">Grafik</a></li>
<li><a href="#contact" title="Fragen und Impulse direkt an mich schicken!">Kontakt</a></li>
</ul>
...
<div id="webdesign">...</div>
<div id="grafik">...</div>
<div id="contact">...</div>
...

Mit ein bisschen CSS lassen sich die drei Inhaltsbereiche und die Navigation so stylen, dass auch ohne Javascript eine ansehnliche Webseite entsteht. Bei verfügbaren Javascript werden die einzelnen Contentberecihe, wie eigenständige Seiten präsentiert und der optische Eindruck einer mehrseitigen Präsenz entsteht.

Es gibt dort verschiedene Plugins für jquery, die mir alle ein wenig überdimensioniert erschienen. Hier der relevante Code (Javascript/ jquery):

//Alle Contentbereiche
var alldivs = '#grafik, #contact,#webdesign';
//Alle Inhaltsbereiche unsichtbar
$(alldivs).css('display', 'none');
//erster Inhaltsbereich sichtbar
$('#webdesign').css('display','block');
//erstes Navielement um Klasse erweitert
$('#nav a:first').addClass('active');
//für alle Link Klickfunktion
$('#nav a').click(function(){
//auslesen des Sprungziels
var active = $(this).attr("href");
//Entfernen der Klasse
$('#nav a').removeClass('active');
//dem aktuellen Link Klasse hinzufügen
$(this).addClass('active');
$(alldivs).css('display', 'none');
//Ausgewählter Content sichtbar
$(active).css('display','block');
//Focus vom Link nehmen
this.blur();
//Ausführen des Links verhindern
return false;
});

Möglicherweise geht es kompakter. Unter Umständen gibt es ein kurzes Aufblitzen der Gesamtseite.

Kategorie: CSS , Ideen , JS , Layout | 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