Bendulum. Benjamin Haßler BSc.

Im Illustrator erzeugte SVG Pfade mit Raphaël JS zeichnen

Ben — Fri, 09 Sep 2011 00:55:51 +0000

In den letzten Tagen habe ich meine Webseite ein wenig überarbeitet und dabei diverse .png Bilder durch .svg Grafiken ausgetauscht. Dabei verwende ich die prakitsche JavaScript Library RaphaelJS.

Das Problem: Beim Exportieren der Grafiken mit Illustrator erhält man eine unschön formatiere Ausgabe wie im Bild unten zu sehen ist.

Mit Illustrator erzeugte .svg Datei

Zum Zeichnen eines Pfades mit Raphael benötigt man den “pathstring” in einem sauberen Format, ohne unnötige Leerzeichen, Umbrüche oder Tabulatoren.

Also habe ich mir in 5 Minuten schnell ein JQuery Script geschrieben, welches alle “d” Attribute (=pathstring) der Pfade ausliest und in einen String speichert. Damit lässt sich nun die Grafik mit einer einzigen Zeile JavaScript zeichnen.

var c = paper.path(pathstring);

Die Lösung: Das Tool kann man hier ausprobieren. Einfach gesamten Inhalt der .svg Dateien eins Eingabefeld kopieren und auf “convert” klicken!

Alternativ kann man hier eine offline Version herunterladen und für eigene Zwecke anpassen:

Download

51 mal geladen

Viel Spaß damit!

Im Firefox 4 die alte Ansicht wiederherstellen

Ben — Mon, 23 May 2011 17:31:41 +0000

Eines der Standard-Features die Firefox zu einem einzigartigen und nützlichen Browser machen, hat man im Firefox 4 leider in einer versteckten Menüleiste begraben.

bendulum.com mit deaktivierten Stylesheets

Die Rede ist vom unspektakulären aber praktischen Menüpunkt
“Ansicht > Webseiten-Stil > Kein Stil“.
Dies ist ein praktisches Werkzeug um die Struktur einer Webseite zu überprüfen, da es HTML-Tags wie z.B. < h1 > oder < hr /> in der Standardformatierung anzeigt.

Um die alte Firefox Ansicht wieder herzustellen geht man auf

“Menü > Einstellungen > Menüleiste” um die Menüleiste wieder einzublenden.
“Ansicht > Symbolleisten > Tabs oben” um die Tabs wieder unten zu positionieren.

Firefox4 überrascht generell durch eine schlechte Handhabung was die Menüstuktur anbelangt. Die Startzeit von Firefox4 liegt auch weit über der von z.B. Chrome.

In Anbetracht der Tatsache, dass Chrome mit seinen eingebauten Entwicklertools brav aufgeholt hat, sollten sich die Jungs von Mozilla langsam Sorgen machen.

Die Developer Tools von Internet Explorer 9 – Profiler

An dieser Stelle verdient auch der Internet Explorer 9 (bzw. auch 8 ) erwähnt zu werden. Die praktischen “Developer Tools” generieren z.B. beim debuggen von JavaScript eine genaue Auflistung aller aufgerufenen Funktionen, deren Dauer und die Anzahl der Aufrufe. Zu finden ist dies unter “Profiler”. Hier lassen sich auch mehrere “Reports” anlegen.

Ein weiteres nützliches Feature unter “Profiler” ist die Ansicht “Call Tree”, welche wie der Name vorschlägt die Aufrufe von JavaScript Methoden in einer Baumstruktur anzeigt.

-Anderen Browsern um das gewisse Etwas überlegen!

Nicht besonders aufregende News, aber egal.

Bendulum3 Theme so gut wie fertig!

Ben — Sat, 07 May 2011 20:51:50 +0000

Die Slideshow für die Portfolio Seiten ist noch nicht ganz komplettiert, aber die restlichen Sektionen sind so gut wie abgeschlossen!

Die Seite validiert als XHTML 1.0 Transitional und ich habe ein paar S.E.O. und Performance Verbesserungen vorgenommen. Ich habe das neue Theme sehr minimalistisch gehalten, mit möglichst wenig Geschwindigkeitseinbußen was die Ladezeit betrifft. Außerdem wird die Seite in den gängigsten Browsern konform angezeigt.

Endlich habe ich auch eine passende Schriftart für den Fließtext gefunden, die wirklich schöne Font “Droid Sans“. Eingebunden wird das ganze über Typekit.