pixelfans.de

Realistische Vektorgrafiken für das Web

Pawel — 2012-02-03T09:51:30+01:00

Im Internet finden sich beeindruckende Zeugnisse digitaler Grafik. Einige sind mit Photoshop entstanden und nahezu folgerichtig in einem Pixelformat abgespeichert. Es gibt aber auch unzählige Grafiken, denen man anmerkt, dass sie als Vektorgrafik entstanden sind. Dafür, dass alle modernen Browser Scalable Vector Graphics interpretieren, finden sich noch wenige Seiten, die auf die direkte Integration setzen.

Gründe

Im professionellen Umfeld spielt die Verbreitung des Internet Explorers eine wichtige Rolle. Da dieser erst ab Version 9 die Darstellung ohne Plugin erlauben und zudem nicht mehr auf Windows XP laufen, sind hier Workarounds nötig. Texte für Webseiten werden typischerweise mit einem Content Management System erstellt, die zudem auf einer Javascript Wysiwyg-Editor setzen. Wenn überhaupt, lässt sich ein SVG-Bild meist nur in der Quelltextansicht einfügen. Die besten Grafikdesigner wissen wenig über das Format und erstellen ihre Grafiken in Vektorgrafikprogramme. Im professionellen Umfeld wird dabei besonders auf Illustrator gesetzt, der in Adobes Creative Suite enthalten ist und Farbpaletten unterstützt. Da die meisten Aufträge anhaltend für den Druck entstehen, ist das besonders wichtig. Meist wird zusätzlich ein Grafiktablett verwendet. Im Ergebnis entstehen Vektorgrafiken, die 2 Mbyte groß sind – und sich so im Web nicht verwenden lassen.

Veröffentlicht in: Ideen, SVG

Eine Seite für alle Fälle

Pawel — 2011-12-20T12:25:45+01:00

Es gab Zeiten, da durften Ärzte nicht für sich werben. Heute hat sogar mein Zahnarzt eine Website. Er hat mir versichert, dass ihn darüber zunehmend auch neue Patienten finden. Es gibt also anhaltend Anwendungsfälle mit relativ konstanten Inhalt. Dazu habe ich ja auch schon mal im Blog geschrieben. Hier reicht eine Seite (Onepager), die aber mit Javascript in Kleinteile "zersägt" wird, um die Inhalte ein bisschen abzusetzen und die gesamte Seite lesbarer zu gestalten.

Wenn ich die (momentane) HTML5-Spezifikation nicht völlig falsch verstanden habe, kann man jeden Inhaltszusammenhang in eine section packen. Da Javascript dafür sorgt, dass jeweils nur ein Bereich angezeigt wird, mutet es wie eine mehrseitige Präsenz an. Damit werden Ressourcen gespart, da insgesamt weniger Daten übertragen werden. Es gibt keine zusätzlichen Requests, da das CSS und Javscript im head des Dokuments stehen. Bei kleinen Dateien lohnt die Auslagerung in seperate Dateien nicht.

Diese Vorteile kommen noch mehr zur Geltung, wenn die Seite mit einem Smartphone genutzt wird. Das coole an Smartphones ist, dass sie spätestens alle 2 Jahre erneuert werden und Javascript immer läuft.

Desktoprechner werden steuerlich in 4-5 Jahren abgeschrieben und noch länger genutzt. Daher finden sich dort noch ein paar Uraltbrowser, deren Zeit aber abläuft. Netscape 4.6 ist ja auch verschwunden.

Auf mobilen Geräten kann man CSS @media-queries voraussetzen. Selbst wer unbedingt Windows Mobile benutzt und nicht reflexartig Opera Mobile installiert hat, findet nach dem Mango-Update jetzt den IE9 vor, der dies auch versteht. Für mich sind damit handheld-Angaben obsolet.

Für meinen konkreten Anwendungsfall ist es wichtiger auf den Fall zu reagieren, wann die Navigation nicht mehr ins portrait-Format passt. Seltsamerweise gibt es im Netz nicht viele Tipps, die sich mit der Navigation auf kleinen Screens auseinandersetzen. Ich habe nur ein Tutorial auf CSS-Tricks gefunden, das mir aber nicht gefiel. Ich wollte ein Menü, das ich auch noch treffe, nachdem ich meiner Mutter den Garten umgegraben habe.

Veröffentlicht in: CSS, Ideen, JS, Layout

SVG in the eyes of a webdesigner

Pawel — 2011-09-05T19:16:47+01:00

Introduction

With all the hype about brand-new XML formats in 2001, like the newborn SVG, it progressively became quiet. Sure, Adobe had published their plug-in, but the Flash plug-in was also on the rise. These days however,a decade later, no modern Desktop browser needs a plug-in to display SVG anymore. It’s time to use SVG in web-design.

Preparations

There are a lot of well-known programs in the design business. But most of these products were originally made for printing purposes, even though they were later improved to support the writing of SVG-files. In my opinion a file of 150 to 200kbyte is no issue if you want to print it, but it’s way too big for the web. In conclusion to that and because of the existing idea of the semantic web, I advise to specifically consider creating an SVG for the use in web-design. My tool of choice is Inkscape.

Inkscape

Inkscape is made for creating SVG. It’s the native format and it may seem like it might not be completely ready yet. Don’t let yourself be fooled by the version number. A number like 0.48 is the understatement by GPL, but there are some limitations you should know and work around that.

Veröffentlicht in: CSS, Ideen, SVG

DropBox und PHP

Pawel — 2011-06-30T19:30:10+01:00

Als ich eine Einladung für die DropBox bekommen hatte, fand ich das zunächst nicht spektakulär. Unter Linux bin ich es gewohnt, nahezu jedes Laufwerk mounten zu können. Komfortable Programme für Mobiles und jedes Betriebssytem und das automatische und schnelle Synchronisieren haben mich überzeugt. Daten in die DropBox zu schieben ist so einfach, dass es jeder kann, der sich mit einem Smartphone oder Computer ein wenig auskennt.

Seit Mai 2010 steht auch eine API zur Verfügung, die aber Wünsche offen lässt. Es gibt nur eine Handvoll Methoden. Irritierend ist dabei auch die Begrifflichkeit. Natürlich ist der Zugriff nicht nur vom Smartphone möglich.

Die für mich naheliegende Anwendung per PHP Daten aus der DropBox in das CMS seiner Wahl zu kopieren, scheint niemand bisher realisiert zu haben. PHP scheint von den Entwicklern ohnehin nicht Sprache der Wahl zu sein, obwohl es eine Klasse bei Google Code gibt, die aber sehr viele Abhängigkeiten mitbringt.

Glücklicherweise hat sich Tijs Verkoyen dieses Problem angenommen und eine kompakte Klasse entwickelt, die sich auch der OAuth-Problematik annimmt. Damit lassen sich alle Methoden der API aufrufen. Tijs hat eine Dokumentation zur Verfügung gestellt.

Veröffentlicht in: Ideen, PHP

Box Reflection mit CSS für Webkit und Fox

Pawel — 2011-06-08T17:09:10+01:00

Im letzten Blogbeitrag habe ich eine einfache Möglichkeit für die Simulation einer Textreflektion gezeigt. Bisher gelingt aber die Spiegelung eines gesamten Containers nur mit -webkit-box-reflect, wie es im Webstandardblog für die Webkitbrowser beschrieben ist.

Da mein Lieblingsbrowser der Firefox bleibt, habe ich nach einer Möglichkeit gesucht, diesen Effekt auch dort nur mit CSS verfügbar zu machen. Firefox unterstützt zwar die o.g. Eigenschaft nicht, bringt aber mit dem -moz-element eine eigene Eigenschaft mit, jedes beliebige HTML-Element als CSS-Hintergrund verwenden zu können. Erwartet wird lediglich eine id eines Elements.

Ich habe das Beispiel dahingehend verändert, dass es einen zusätzlichen Container enthält, der die Reflektion für den Firefox anzeigt. Der Container vcard wird nun statt mit einer Klasse mit einer id gekennzeichnet.

Die eigentliche Arbeit wird durch folgende CSS-Anweisung geleistet:

Veröffentlicht in: CSS

Generated Content

Pawel — 2011-03-31T19:52:10+01:00

Eine der Highlights der CSS-Spezifikation ist für mich generated content. Damit wird es möglich Text aber auch Bilder hinzuzufügen, die eher Design, der Lesbarkeit u.ä. dienen, aber keinen inhaltlichen Charakter haben und daher auch nicht ins Markup gehören. Alle modernen Browser beherrschen diesen Standard, der Internet Explorer seit der Version 8.

Natürlich lassen sich darüber auch die beliebten Liststyle-Symbole einfügen, kleine Grafiken, häufig auch via Sprites. Wenig bekannt und genutzt sind Unicode-Charakter. So fügt

a.email:before{position:absolute; top:0; left:-25px; content:"\002709 \0000A0"}

einen ✉ (envelope) vor die E-Mail-Adresse ein. Das Unicodezeichen 2709 (Suchtipp: U+2709) ist der Umschlag, das Zeichen danach ein Leerzeichen.

Veröffentlicht in: CSS

SVG in VML konvertieren

Pawel — 2011-02-24T20:26:10+01:00

Thomas Magnum würde sagen:

Ich weiss was Sie jetzt denken und Sie haben recht.

VML ist das diese steinzeitliche, proprietäre Vektorsprache von Microsoft, die von den Browsern nur der Internet Explorer interpretiert?

Im Gegensatz dazu ist SVG doch leistungsfähiger und wird auch vom kommenden IE9 nativ unterstützt. Zudem kann das Format direkt aus gängigen Vektorprogrammen erzeugt werden.

Wenn SVG heute auf einer großen Seite verwendet wird, dann meist mit der Javascriptbibliothek Raphaël, um für die IE eine VML-Grafik zu erzeugen. Das ist solange nötig, bis die IE-Familie sich völlig erneuert hat, was noch 2-3 Jahre dauern wird.

Jede Lösung bleibt begrenzt, da das Format Filter, Animation u.v.m. nicht unterstützt. Statische Grafiken können aber auch ohne Javascript recht einfach halbautomatisch konvertiert werden.

Veröffentlicht in: Ideen, Layout, SVG

Wordpress Datenbankfehler abfangen

carsten — 2011-02-23T09:12:10+01:00

Wer wordpress betreibt wird u.U. schon einmal die Meldung “Error establishing a database connection” gelesen haben. Diese Meldung kommt immer dann, wenn man entweder die Datenbankanbindung falsch konfiguriert hat oder der hostende Server gerade soviele Anfragen zu bearbeiten hat, dass die Zeit überschritten wird, die das System standardmäßig abwartet bis die Antwort des MySQL Servers kommt.

Im Falle einer falschen Konfiguration ist das Problem sicher schnell behoben. Leidet aber die Maschine kurzzeitig oder dauerhaft an einer Überlastung müssen die Nutzer immer wieder mit dieser Meldung Vorlieb nehmen, was nun wahrlich unschön ist.

Veröffentlicht in: PHP

@media in SVG

Pawel — 2011-02-20T09:01:10+01:00

Immer mehr Seiten nutzen SVG zur Darstellung von Diagrammen. Das hat einen großen Vorteil, lassen sich doch SVG's direkt aus Datenbanken erzeugen. Das ist zwar nach meiner Meinung bisher nur ein Bruchteil, was damit machbar ist, aber ein typisches Problem wird jetzt schon deutlich: Die Ausgabe der Grafik an verschiedene Ausgabegeräte.

Hier zeigt sich ein weiterer Vorteil des Formates - @media-Regeln werden interpretiert.

Veröffentlicht in: CSS, SVG

CreativeCommons Icon mit CSS

carsten — 2011-02-16T07:12:10+01:00

Noch ein Icon, das auf Bilder verzichtet und stattdessen CSS benutzt. Eines für CreativeCommons Lizenzen.

Weil mir sowohl beim Ideengeber Nicolas Gallagher als auch bei Pawels Experimenten mit den puren CSS Icons bisher ein Symbol zur Auszeichnung von CreativeCommons Lizenzen gefehlt hat, habe ich heute noch eines nachgeschoben.

Veröffentlicht in: