Pixelfans

SVG mit Inkscape erstellen (Teil 1)

geschrieben von Pawel

Was ist Inkscape ?

Inkscape ist ein quellcodeoffenes Vektorzeichenprogramm, welches spezialisiert ist, um SVG's zu erstellen. Es ist für alle Betriebsystem vorhanden. Der Schwerpunkt des Programms besteht aber weniger ein den Vektorfähigkeiten, sondern in der möglichst umfassenden Unterstützung des Zielformats. Deshalb ist es auch meine erste Wahl bei der Erstellung von Vektografiken für das Web. Für den Printbereich ist der Illustrator viel leistungsfähiger, was aber teilweise durch die Formatspezifikation bedingt ist..

Scalable Vector Graphics

SVG 1.1 kennt beispielsweise keine nichtlinearen Verläufe und hat einige andere Einschränkungen zum Illustratorformat. Dafür ist es aber ein XML-Format, das man mit jedem Editor bearbeiten und auch mit Javascript undd PHP gut manipulieren kann. Einfache SVG's kann man also gut auch per Editor schreiben. Eine einfache Einführung gibt es bei Wikipedia.

Unsere Grafik, die für den Container mit runden Ecken für Opera herhalten muss, haben wir am schnellsten in einem Editor geschrieben:

<svg xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
</style>
<mask id="m1">
<rect width="100%" height="100%" rx="10" ry="10" fill="white" stroke="#CCC" />
</mask>
<rect stroke="navy" fill="white" fill-opacity="0.8" mask="url(#m1)" width="100%" height="100%" rx="10" ry="10" />
</svg>

Inkscape ist aber trotzdem Klasse - wenn man das Grundprinzip vektorbasierenden Arbeitens erst einmal verstanden hat.
Im Zieldokument wird aber machmal ein unnötiger Overhead mitgeführt, wo nur die gezielte Löschung mit einem Texteditor hilft, die Grafik wesentlich zu verkleinern.

Browserunterstützung

Das die Browser aus Redmond SVG nicht unterstützen, braucht niemanden mehr abzuschrecken, wie wir hier erläutert haben. Safari und Opera unterstützen jetzt die Einbindung per CSS, die beste Darstellung der mit Inkscape erzeugten Grafiken liefert aber m.E. der Firefox. Unverständlicherweise unterstützen sämtliche Browser die auf Webkit basieren (Chrome, Konqueror und auch Safari) den Blureffekt (Verwischen) nicht.

Ein Iphonebutton in SVG

Ich habe kein Iphone. Trotzdem muss man neidlos anerkennen, dass Apple hier wieder einmal Maßstäbe gesetzt hat. Da darf natürlich ein eigener Pixelfan-Iphonebutton in SVG nicht fehlen. Durch den fehlenden Blureffekt sieht er in den Webkitbrowsern nicht ganz optimal aus.

Bei meinen ersten Versuchen mit Inkscape nutzte ich zunächst eine Pixelgrafik und die großartigen Tracefunktionen. Nacharbeiten mit dem Knotenwerkzeug sind aber immer nötig, auch wenn Strg-L der Freund des Designers ist.

Das Design des Buttons gelingt mit der Vektorfunktionen besser. Der Button besteht aus einigen, variierten Grundformen:

• einem Schatten
• einem roten Rechteck mit runden Ecken
• einem Teilrechteck mit ovaler Begrenzung mit Farbverlauf
• (optional) ein Initial in der Schriftart KalenderBlatt Groteske

Die Schriftart sollte in einen Pfad umgewandelt werden. Der Button ist erfreulich klein. Zusätzlich bietet uns Inkscape noch die Möglichkeit eine Bitmap zu erzeugen, die als Alternativbild für den Internetexplorer verwendet werden kann.

Ein bisschen Nacharbeit ist nötig, wenn man die Dateigröße reduzieren will. Dabei bearbeite ich die Datei in einem Texteditor und sehe mir die SVG-Datei in mehreren Browsern an. Metadaten und Kommentare können bedenkenlos entfernt werden. Muster (Pattern), Textobjekte u.a. was man gar nicht verwendet und ähnliches, sollte auch gelöscht werden. Inskape scheint Muster in der SVG-Datei auch dann zu speichern, wenn das Objekt gelöscht wurde.

Ein kleiner Screencast

Wenn ein Bild schon mehr sagt, als 1000 Worte, was muss dann erst ein Screencast erreichen?

Es wird die Erstellung des Buttons gezeigt und ziemlich intensiv die rechte Maustaste genutzt. Um den Verwischeffekt zu vermeiden, bin ich auf einen Farbverlauf ausgewichen.

Ich habe festgestellt, dass man durch die von mir gewählte Art des Schattens geringere Dateigrößen hat.

Kategorie: SVG | Trackbacks (0) | Permalink

Sefrengo Suchplugin für Firefox

geschrieben von carsten

Webseiten zu entwickeln mach ich klassischerweise mit Sefrengo und im Firefox.

Da auftretende Fragen zur Umsetzung mit Sefrengo oder zur Auswahl von Modulen und Plugins am ehesten das hilfreiche Sefrengo Forum bietet, habe ich eben kurzerhand ein Suchplugin für den Fox geschrieben. Damit verkürzt sich der Weg zum befriedigenden Ergebnis um 3 Arbeitsschritte, was sich bei geschätzten 400 Suchabfragen pro Entwicklungstag dann schon positiv auf das Arbeitszeitkonto auswirkt.

Ein solches Suchplugin zu schreiben ist gar nicht schwer, den erklärenden Artikel dazu fand ich in der netzwelt. Ich bin nur ein wenig skeptisch, ob mein Ergebnis aktuellen Ansprüchen gerecht wird, weil der Beitrag von 2006 ist und die xml-Daten in meinem Firefox searchplugins Verzeichnis doch etwas anders aussehen.

Nichts für ungut, das ist der Code.

<search 
version=“7.1” 
name=“SefrengoForum” 
description=“Suche direkt im Sefrengo Forum” 
action=“http://forum.sefrengo.org/index.php” 
searchForm=“http://forum.sefrengo.org” 
method=“GET” 
> 
<input name=“sourceid” value=“Mozilla-search”> 
<input name=“act=Search&CODE=show&searchid=39b3af46ba5b23f301124399a4f71f22&search_in=posts&result_type=topics&highlite=%2B” user=“”> 
</search>

Das gesamte Plugin gibt’s natürlich auch zum mitnehmen.

Download Sefrengo Suchplugin für Firefox (685 Byte, RAR-Archiv)

Viel Vergnügen.

Nachtrag:(pawel)

Hier mal ein Direktlink, um die Suchmaschine sofort hinzuzufügen.

Kategorie: News | Trackbacks (0) | Permalink

Webstandardsmagazin - eines für alle(s)?

geschrieben von Pawel

Ich gebe zu, die Idee klingt verlockend.Das Webstandards Magazin möchte eine Zeitschrift sein, die die Belange von Design, Programmierung, Usability und vieles mehr für die Webworker abdeckt. Webworker sind typischerweise Allrounder und weniger auf die Teilbereiche spezialisisert. Wenn sie, wie wir auch noch das gedruckte Wort schätzen, lesen sie deshalb Design- und Programmiererzeitschriften.

In meinem Fall sind das, das PHP-Magazin, die Page und (natürlich) die c't. Alle Zeitschriften decken (in ihrem Bereich) ein riesiges Spektrum ab. Das t in c't hat durchaus seine Berechtigung und mein Verständnis der komplexen Zusammenhänge endet spätestens bei Platinen und Lötkolben.

Durch Twitter bin ich auf das Webstandards Magazin aufmerksam geworden. Eher weniger, weil mir plötzlich das @webstandmag folgte, sondern mehr durch die Tweets von @yatil u.a. . Da selbst Carsten schon mal einen Artikel unter der Überschrift "Webstandards für die Straßenbahn" begonnen hatte, mußte da also irgend etwas "dran" sein. Meine Frau kam, bedingt durch eine Fernreise vor einer Woche ohnehin am Bahnhof vorbei. Ich bat sie, mir das aktuelle Heft mitzubringen.

Sie rief mich vor dem Kauf sicherheitshalber noch einmal an und fragte, ob es wirklich dieses farblich eher unscheinbare Heft sein solle. Der Verkäufer freute sich auch über den Verkauf des ersten Heftes am hallischen Hauptbahnhof. Das "schreit" nach einer differenzierten Begutachtung, die dann natürlich nicht in einen Tweet passt.

Gesamteindruck

Ein durchaus ambitioniertes Projekt der kleinen Agentur anatom5, die 2004 durch eine Biene für ihre Internetseite "Barrierekompass" bekannt geworden ist. Der Schwerpunkt des Heftes ist E-Buisness und eine ausgewogene Berichtserstattung ist gelungen. Der Schwerpunkt Accessibility und Usability ist für meinen Geschmack etwas zu großund erklärt sich sicher durch den Hintergrund der Macher. Eine frische Idee ist der enge Zusammenhang mit dem Web durch das Twittermarketing im Web und dem Twitterticker im Heft.

Inhalt

Die Auswahl der Autoren Gerrit van Aaken, Jens Grochtdreis, Dirk Ginader u.v.a.. zeugen für eine gute Qualität. Die Inhalte der Artikel sind in ihren Blogs zwar auch schon besprochen worden, die Autoren haben jedoch die Chance genutzt auf Papier etwas ausführlicher beschreiben zu können. Somit haben auch Leser etwas davon, die die Feeds abonniert haben. Am Lesenswertesten sind jedoch die Artikel der Redakteure. Ansgar Hein gelingt ein guter Überblick über das E-Payment und auch Jörg Morsbachs Artikel über gutes Shop-Design gefällt. Meine Highlights waren darüber hinau, der Artikel zum Freistellen (mehr davon), RDFa und Semantic Surfing.

Gestaltung

Hier sehe ich noch Ressourcen. Zwar gefällt der gewählte Font, der großzügige Weissraum und der intelligente Hinweis auf zusätzliche Links durch Fußnoten. Warum aber der Lieblingsmonitor der Redaktion für viele Screenshots herhalten muss, erschließt sich mir nicht. Das der Presto Demo-Shop modern aussieht, kann man dadurch gar nicht richtig wahrnehmen.Die Darstellung von CSS-Quelltext im silver XP-Style gefällt mir nicht und "schreit" neben den Autorenkästchen (z.B. auf Seite 41). Eine geordnete Liste, wie auf Seite 32 ließe sich ebenso aufhübschen, wie die Word-Schraffur-Optik bei Übersichtstabellen und Hinweisen. Auf den ersten Blick ist auch das Zitat auf Seite 64 nicht als solches zu erkennen. An einigen Stellen bin ich mir unsicher, ob der Designprozess in einer Hand lag.Ich freue mich ja durchaus Dirk Ginaders Twitterbild zu sehen, in einem gedruckten Werk erwarte ich da aber etwas mehr, vielleicht auch umfangreicheren Hintergrund zu den Autoren.

Proof

Das Magazin ist noch jung. Perspektivisch sollten kleinere Fehler, wie auf Seite 47 (das ] hinter den Links) oder auf Seite 63 (das überflüssige "Als Webadresse bitte") aber ausbleiben.

Fazit:

Der Newcomer wird durchaus gebraucht. Ich wünsche dem Magazin viele Abonennten. Die oben genannten Zeitschriften kann es für mich im Moment noch nicht ersetzen. Es bringt aber einige frische Ideen mit, die noch ausbaufähig sind. Mögliche Themen wären für mich:

• Webgrafik mit SVG
• Multimedia
• Mashups

Ich bin gespannt und grundsätzlich kaufbereit.

Kategorie: News | Trackbacks (0) | Permalink