Warning: mysql_real_escape_string(): Access denied for user ''@'localhost' (using password: NO) in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1191

Warning: mysql_real_escape_string(): A link to the server could not be established in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1191

Warning: mysql_real_escape_string(): Access denied for user ''@'localhost' (using password: NO) in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1194

Warning: mysql_real_escape_string(): A link to the server could not be established in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1194

Warning: mysql_real_escape_string(): Access denied for user ''@'localhost' (using password: NO) in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1197

Warning: mysql_real_escape_string(): A link to the server could not be established in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1197
2009 Juni | Ajaxschmiede.de


Jun 15 2009

Interaktives Datendarstellungsprojekt InfoVis 1.1 erschienen

Tag: JavascriptPatrick @ 9:00 pm

Das Visualisierungprojekt InfoVis bietet wirklich großartige Möglichkeiten um Daten im Internet darzustellen. Vor wenigen Tagen präsentierten die InfoVis-Entwickler die Hauptversion 1.1 ihres Tools.

InfoVis ermöglicht das Darstellen interaktiver, dynamischer Graphen und Baumdiagramme. Das hört sich genial an und sieht in der Praxis noch viel besser aus.

In der nun vorliegenden Version 1.1. wurde die Bibliothek in einzelne Module unterteilt um die Wiederverwendbarkeit des Quellcodes zu erhöhen.

Zudem kann man nun mehrfache Instanzen einer jeden Animation erzeugen. Dadurch können nun die Darstellungsformen kombiniert und hintereinander ausgeführt werden.

InfoVis arbeitet mit jeder Javascript-Bibliothek zusammen, egal ob jQuery, Prototype, YUI, MooTools usw, InfoVis lässt sich zusammen mit allen nutzen.

Vorhandere Klasse können leicht verändert und erweiteret werden, außerdem lassen sich eigene Animation erstellen. Die Möglichkeiten sind grenzenlos.

Eine erstklassige Dokumentation und viele Beispiele sind auf der Entwickler-Seite für jedermann zugänglich.

infovis


Jun 04 2009

Adobe BrowserLab macht Microsoft SuperPreview Konkurrenz

Tag: ToolsPatrick @ 2:20 pm

Im März berichtete ich bereits über ein Microsoft-Programm namens SuperPreview, dass sich derzeit in der Entwicklung befindet und Web-Designern und -Entwicklern beim Erstellen von Homepages Darstellungsunterschiede der einzelnen Browser aufzeigen soll.

Am gestrigen Mittwoch stellte Adobe mit dem eigenen BrowserLab ein von der Funktionalität her ähnliches Tool zur Verfügung, das ebenso die Website-Gestaltung in bezug auf Browserprobleme vereinfachen soll.

Im Gegensatz zu Microsofts Anwendung wird Adobe BrowserLab als Online-Dienst angeboten. Vorerst wird dieser sogar kostenlos verfügbar sein. Adobe möchte sein Tool jedoch später zu einem kostenpflichtigen Dienst umstellen. Wann dies geschehen soll, ist noch offen.

Im BrowserLab ist es zum einen möglich eine Homepage auf zwei verschiedenen Browsern oder sogar Betriebssystem nebeneinander oder überlagend darzustellen, wodurch es recht einfach ist, Unterschiede der einzelnen Renderer auszumachen.

Bisher werden folgende Browser unterstützt (weitere folgen):

  • Internet Explorer 6 (Windows XP)
  • Internet Explorer 7 (Windows XP)
  • Firefox 2 (Windows XP)
  • Firefox 3 (Windows XP)
  • Firefox 2 OS X
  • Firefox 3 OS X
  • Safari 3 OS X

Jun 03 2009

Regelmäßige Vielecke mit Canvas

Tag: CanvasPatrick @ 11:00 pm

In letzter Zeit habe ich mich verstärkt wieder mal mit Canvas beschäftigt. Dabei ging es mir vor allem um regelmäßige Vielecke (englisch: regular polygons).

Von Haus bietet Canvas in keiner Implementierung eine Funktion zum schnellen und einfachen Erzeugen von regelmäßigen Vielecken. Daher setzte ich mich hin und programmierte angeregt durch canvas.quaese.de zwei entsprechenende canvas-Objekterweiterungen.

Außerdem wollte ich gern gezackte Figuren wie Sterne und Sonnen mit einem Funktionsaufruf erzeugen können. Also nahm ich meinen bisherigen Code her und überarbeitete ihn.

Das Ergebnis all des Codens kann sich meines Erachtens sehen lassen. Vor allem bei Mehrfachaufrufen ergeben sich sehr schicke Muster.

Die Methoden selbst sind nach einem simplen Prinzip aufgebaut. Man gibt die Position des Vieleckmittelpunktes, die Anzahl der Ecken, den Radius (Mittelpunkt->Ecke) und Anfangswinkel (meist 0) an.

Den Quelltext der Objekterweitungen kann ich nachfolgend sehen:

canvas.drawPoly = function(x,y,n,r,phi) {
this.translate(x,y);
this.rotate(phi);
this.beginPath();
this.moveTo(0,r);

for( var i=0; i<=n; i++){
this.save();
this.rotate(2*i*Math.PI/n);
this.lineTo(0,r);
this.restore();
}
this.stroke();
this.rotate(-phi);
this.translate(-x,-y);
}

canvas.fillPoly = function(x,y,n,r,phi) {
this.translate(x,y);
this.rotate(phi);
this.beginPath();
this.moveTo(0,r);

for( var i=0; i<=n; i++){
this.save();
this.rotate(2*i*Math.PI/n);
this.lineTo(0,r);
this.restore();
}
this.fill();
this.rotate(-phi);
this.translate(-x,-y);
}

canvas.drawZickzack = function(x,y,n,r1,r2,phi) {
this.translate(x,y);
this.rotate(phi);
this.beginPath();
this.moveTo(0,r1);

for( var i=0; i<=n; i++){
this.save();
this.rotate(2*i*Math.PI/n);
this.lineTo(0,r1);
this.restore();
this.save();
this.rotate(2*i*Math.PI/n+(2*Math.PI/n)/2);
this.lineTo(0,r2);
this.restore();
}

this.stroke();
this.rotate(-phi);
this.translate(-x,-y);
}

canvas.fillZickzack = function(x,y,n,r1,r2,phi) {
this.translate(x,y);
this.rotate(phi);
this.beginPath();
this.moveTo(0,r1);

for( var i=0; i<=n; i++){
this.save();
this.rotate(2*i*Math.PI/n);
this.lineTo(0,r1);
this.restore();
this.save();
this.rotate(2*i*Math.PI/n+(2*Math.PI/n)/2);
this.lineTo(0,r2);
this.restore();
}

this.fill();
this.rotate(-phi);
this.translate(-x,-y);
}

// Anwendungsbeispiel:
canvas.fillStyle = "#009";
canvas.strokeStyle = "rgb(0,0,0)";
canvas.lineWidth = 2;
// Sechseck
canvas.drawPoly(60,60,6,40,0);

Im Grundlagenbeitrag zu Canvas kann man sich genauere Informationen zum Einbau holen. Auch ein Blick in den Quellcode meiner angefertigen Demo hilft sich dem ein oder anderen und zeigt die Möglichkeiten der Methoden auf.

Vielecke und gezackte Muster mit Canvas