Pixelfans

Generated Content

geschrieben von Pawel

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.

Es gibt Wikipediaseiten, die einen guten Einstieg ermöglichen. Ein bisschen Vorsicht ist bei der Entwicklung für mobile Seiten geboten. Einige Androidfonts unterstützen den Briefumschlag nicht.

Die Unicode-Symbole haben gegenüber den Bildern nicht nur den Vorteil, dass kein Request nötig ist, sondern das sie auch bei der Skalierung der Seiten ihre Wirkung nicht verlieren.

Viel Spass, bei eigenen Experimenten. Wie wäre es z.B. mit U+2263 in Verbindung mit einer border?

Eine gewisse Dynamik beim eingefügten Content ermöglicht die Nutzung von Attributen.

h1:after{content: ""attr(title)"";}

In diesem Fall wird davon ausgegangen, dass das h1-Element einen title hat. In HTML5 könnte man auch data-text als Attribute verwenden. Was damit möglich ist, zeigt folgendes Beispiel einer

Textreflexion nur mit CSS

Kategorie: CSS | Trackbacks (0) | Permalink

SVG in VML konvertieren

geschrieben von Pawel

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.

Innerhalb von Inkscape sollten alle Farbverläufe durch gut abgrenzbare Vollfarben ersetzt werden.

Die Grafik wird dann im odg-Format gespeichert, welches OpenOffice versteht. Dieses Format ist so armselig, da es keine Farbverläufe anzeigtt. Die Grafik kann jetzt mit OO Draw geöffnet und per Kopieren und Einfügen in eine OpenOffice Textdokument kopiert werden, um es als doc (Word)-Datei abzuspeichern.

Wenn diese Datei jetzt mit dem Microsoftprodukt geöffnet wird, ist die Vektorkonvertierung bereits geschehen. Ab Word 2007 kann sogar die Grafik editiert werden und bestimmte Farbverläufe wieder hinzugefügt werden.

Ich empfehle die zu erstellende html-Datei als iframe in einen switch einzubinden, wie ich es im Blog schon erläutert habe. Nur Klugscheißer optimieren die niemals valide Datei per Hand weiter.

Wie das aussieht, kann man sich bei den Alternativgrafiken von meiner Batik-Seite abschauen.

Kategorie: Ideen , Layout , SVG | Trackbacks (0) | Permalink

Wordpress Datenbankfehler abfangen

geschrieben von carsten

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.

Eben dieses zweite Szenario hat mich gestern den ganzen Tag über auf christianrach.de beschäftigt. Nachdem diese Sendung bei RTL lief, ging der Server schon am Ausstrahlungsabend zeitweise in die Knie und kriegte sich auch am Folgetag gestern nicht wieder ein.

Meine erste Aktion war es, eine index.html im DocumentRoot zu hinterlegen, die alle ankommenden Nutzer über die aktuelle Überlastung und unser Engagement, etwas dagegen zu tun, informiert. Die Aktion war nötig, brachte mich aber auch in die verzwicklte Lage immer wieder nachsehen zu müssen, ob der Server schon wieder so stabil läuft, dass es Sinn machen würde die Datei wieder zu entfernen.

Viel klüger ist es da, wordpress selber entscheiden zu lassen, wann es keine Puste mehr hat und entsprechend meine Abfang-Datei auszuliefern.

Wie das funktioniert, ist im Codex erklärt und brachte mich dazu einfach den gesamten Inhalt meiner index.html in eine neu anzulegende Datei namens db-error.php zu packen, die im Verzeichnis /wp-content hinterlegt wird.

Jetzt kann ich mich getrost zurücklegen und abwarten, bis der Server das nächste Mal in die Knie geht. Schön, dass es jetzt mindestens so aussieht als sei noch alles in Ordnung.

Kategorie: PHP | Trackbacks (0) | Permalink