FancyDesign Blog

WordPress 2.7

nospam@example.com (Christian Pfeiffer) — Fri, 12 Dec 2008 11:16:34 +0100

Design und Funktionen des neuen Wordpress 2.7:

Mit SIIR jede beliebige Schrift auf seiner Webseite einsetzen

nospam@example.com (Christian Pfeiffer) — Mon, 17 Mar 2008 10:59:11 +0100

Gestalter sind beim Webdesign gegenüber den Printmedien bei der Auswahl einer Schrift recht eingeschränkt. Es gibt nur ein etwa ein Dutzend Schriften, die standardmäßig sowohl auf PC als auch auf dem Mac installiert sind und somit im Browser anzeigbar sind. Darunter fallen etwa die Verdana, Tahoma, Times New Roman. Zwar kann man exotische Schriften auf gut Glück einsetzen und hoffen, dass die Schrift auf dem Computer des Seitenbesuchers installiert ist, oder jeden Textabschnitt als statisches Bild einbetten, doch gibt es mittlerweile bessere und flexiblere Möglichkeiten. Im folgendem Abschnitt möchte ich die sogenannte Scalable Inline Image Replacement Methode vorstellen.

SIIR ist eine 2004 von Ryan Petrellos entwickelte Bildersatztechnik, basierend auf PHP und JavaScript. Bei dieser Technik werden Überschriften durch generierte Images mit eigenen Fonts ersetzt. Sind JavaScript und die Anzeige von Bildern deaktiviert, wir ein ALT-Text des Bildes angezeigt. Da SIIR die bereits generierten Bilder in einem seperaten Ordner cached, entstehen keine langen Ladezeiten.

Die Installation von SIIR sieht folgendermaßen aus:
Als erstes lädt man sich die siir_files.zip herunter und enpackt sie in den Ordner /siir. In diesem Ordner wiederum muss nun der Ordner "cache" erstellt und mit den CHMOD Besitzerberechtigungen "Lesen Schreiben Ausführen" (Wert 700) freigegeben werden. Im cache-Verzeichnis werden später über das PHP-Script die Bilddateien erstellt und gespeichert. Im /siir-Ordner müssen nun auch die Font-Dateien, die man verwenden möchte, im .ttf-Format abgelegt werden. Um die eigene HTML- oder PHP-Seite zu konfigurieren, fügt man im <head> die Zeilen

<script language="JavaScript" type="text/javascript" src="siir/external.js"></script>

ein. Um das Script zu starten, muss im HTML- oder PHP-Dokument vor den abschließenden </body> und </html> Tags folgendes geschrieben werden:

<script type="text/javascript">

SIIR_init();

</script>

Nun kann man ganz normal Überschriften einsetzen, etwa so:

<h1>Testüberschrift</h1>

Eine Beispieldatei würde nun wie folgt aussehen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

	<html xmlns="http://www.w3.org/1999/xhtml">

	<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>SIIR Test</title>

<script language="JavaScript" type="text/javascript" src=siir/external.js"></script>

</head>

<body>

<h1>Testüberschrift</h1>

<script type="text/javascript">

	SIIR_init();

</script>

</body>

</html>

In der external.js muss der absolute Pfad zum siir-Ordner angegeben werden. Man muss dazu im Script die Zeile

var path = "http://www.path.to/siir/";

suchen und den Pfad durch den entsprechenden ersetzen.

Um das Aussehen, also Schriftgröße, Schriftfarbe, Antialiasing, Schatten Transparenz etc. der einzelnen <h1> bis <h4> Tags zu definieren, muss man jeweils die Zeilen:

settings["h1"]["padding"] = 1; // Abstand 

settings["h1"]["bgcolor"] = "FFFFFF"; // Hintergrundfarbe einstellen

settings["h1"]["transparentbg"] = 0; // Transparenter Hintergrund? (1=Ja, 0=Nein)

settings["h1"]["font_color"] = "000000"; // Schriftfarbe

settings["h1"]["shadow_color"] = "E2E2E2"; // Farbe des Schriftschattens

settings["h1"]["font_file"] = "FFFGALAX.TTF"; // Name der Schrift

settings["h1"]["font_size"] = 44; // Schriftgröße

settings["h1"]["antialias"] = 1; // Antialiasing? (1=Ja, 0=Nein)

suchen und anpassen.

In der Dokumentation von SIIR wird empfohlen, den cache-Ordner über .htaccess zu schützen. Dadurch soll verhindert werden, dass die Bandbreite des eigenen Servers ausgenutzt wird, um Bilder für eine fremde Webseite zu generieren. Der Inhalt dieser .htaccess sollte gemäß der Dokumentation folgendermaßen aussehen:

IndexIgnore *

RewriteEngine on

RewriteCond %{HTTP_REFERER} ^$ [OR]

RewriteCond %{HTTP_REFERER} !^http://(www\.)?yourwebsite\.de.*$ [NC]

RewriteRule .* http://yourwebsite.de/dontStealMyBandwidthJerk.html [R,L]

Also einfach diese fünf Zeilen anpassen und als .htaccess im siir-Ordner speichern. Dann wäre SIIR fertig konfiguriert.

IE 6.0 png-Fix

nospam@example.com (Christian Pfeiffer) — Fri, 29 Feb 2008 16:06:47 +0100

Wer nicht nur jpg's und gif's in seine Homepage einbinden will, sondern auch auf png's mit Transparenzen zurückgreifen möchte, steht vor der Miserie, dass zwar aktuelle Browser wie Safari, Firefox und der Internet Explorer 7 die Bilder unterstützen, der etwas ältere IE 6 jedoch – standardmäßig – nicht. Das Problem sollte nicht unterschätzt werden, denn laut einer Browser Statistik von Prima Web Tools nutzen immer noch 31.4% den Internet Explorer 6.0 (Stand Januar 2008). Wie kann man sich also Abhilfe schaffen?

Während meiner Recherche im Web nach einer Lösung bin ich auf eine einige Workarounds gestoßen, von denen entäuschender Weise viele nicht funktioniert haben oder png's nur als Image, nicht aber als background-image unterstützten. Abhilfe schaffte da erst der IE PNG Fix v1.0 RC4 von Angus Turnbull. Die Anwendung des png-Fix ist so einfach wie effektiv:

Als erstes lädt man sich die 15kb kleine Zip-Datei herunter. In dem Archiv sind 6 Dateien enthalten, von Relevanz ist jedoch nur die iepngfix.htc. Diese kopiert man sich in sein Projekt-Verzeichnis. Alles, was man jetzt noch tun muss ist per CSS auf die .htc zu absolut zu verweisen, beispielsweise über einzelne ID's oder Klassen. Ich bevorzuge den Universalselektor "*":

* {
_behavior: url(http://www.beispiel.de/iepngfix.htc);
}

Der Hack _behavior bewirkt, dass nur der Internet Explorer 6.0 die Eigenschaft "behavior: url();" interpretiert, alle anderen Browser werden die Eigenschaft ignorieren.

Was jetzt noch fehlt ist die blank.gif, die aus der Zip-Datei in den images-Ordner kopiert werden muss.

Wer mit dem Workaround arbeiten will, muss jedoch kleine Einschränkungen in Kauf nehmen, die aber meiner Meinung nach nicht tragisch und teilweise auch umgehbar sind. Angus Turnbull schreibt dazu folgendes:

Can't help IE versions prior to 5.5.
Users can't right-click-save processed PNG images, they'll save the blank GIF file if they try that.
The script detects the ".png" extension in image URLs. So if you have a CGI script that generates a PNG image, you may have to rewrite parts of the script, or just cache them as PNG files somewhere.
It's most reliable on elements with non-'auto' dimensions set. So, give images and other elements width/height values; '100%', '10em' and '200px' and so on are all OK.
Background PNG images can't be tiled. This is a limitation of the IE filter.
Similarly, padding and borders don't indent the PNG image. An easy fix for this is wrapping your PNG images in container DIVs or similar.
There may be about a short time as soon as the image loads when images are not transparent, before the IE filter kicks in.

Trotz dieser "Known Issues" ist der IE PNG Fix von Angus Turnbull meiner Meinung nach die beste Lösung, um beim IE 6.0 in den Genuss von png-Bildern zu kommen.

ActionScript: Sounds in ein Flash-Projekt einbinden

nospam@example.com (Christian Pfeiffer) — Mon, 28 Jan 2008 16:35:29 +0100

Wie bindet man Sounds in Flash per ActionScript ein? Im Grunde ist es ziemlich einfach. Erst einmal benötigt man natürlich eine Sound-Datei, die man in sein Projekt einbinden will. Diese importiert man zunächst in seine Bibliothek und müsste nun im Fenster "Library" zu finden sein. Mit einem Rechtsklick auf die Audio-Datei wählt man nun "Linkage" aus. Unter Linkage müssen folgende Eigenschaften aktiviert werden: "Export for ActionScript" und "Export in first Frame". Nachdem man beide Häkchen gesetzt hat kann man den Identifier bestimmen. Ich gebe ihm den Namen "test".

Kommen wir nun zum ActionScript. In der Konsole muss zunächst eine Variable für die Sound-Datei erstellt werden:

var my_sound:Sound = new Sound();

Der Variable my_sound weist man nun den importierten Sound zu:

my_sound.attachSound("test");

Dieser kann nun an beliebiger Stelle über den folgenden Code aufgerufen werden:

my_sound.start();

Und das war es auch schon!

Papervision3D: 3D-Objekte in Flash importieren

nospam@example.com (Christian Pfeiffer) — Fri, 04 Jan 2008 14:43:41 +0100

Papervision3D ist eine Open-Source 3D-Engine, die auf Flash basiert. Mit der Engine ist es möglich, .dae-Files und somit 3D-Objekte in Flash zu importieren und daraus 3D-Animationen oder Applikationen wie 3D-Spiele zu entwickeln.

Was mit Papervision möglich ist, zeigt beispielsweise diese Demo auf http://papervision3d.org. Das vielversprechende Flash-Plugin kann man hier als öffentliche Beta-Version downloaden.

John Grden beschäftigt sich in seinem RockOnFlash-Blog im Artikel "New Papervision3D Components!" mit den ersten Schritten und zeigt in dem folgendem Video Schritt für Schritt, wie man ein erstes 3D-Objekt in Flash importiert:

iFrame-Fehler

Adobe AIR: Download, Installation, Dokumentation

nospam@example.com (Christian Pfeiffer) — Thu, 20 Dec 2007 17:19:48 +0100

Download

AIR-Runtime Beta 3
AIR 1.0

Entwicklung & Installation

AIR-Plugin für Flash CS3
AIR Beta 3 Englisch
AIR Beta 3 Deutsch

Wichtig! Flash CS3 MUSS ZUERST auf die Version 9.0.2 GEPATCHT werden, sonst funktioniert die Installation des Plugins nicht:

Patch 9.0.2 Englisch
Patch 9.0.2 Deutsch

Dokumentation für die Installation des Flash-Plugins
Dokumentation für die Entwicklung mit dem Flash-Plugin
Getting Started für die Entwicklung mit dem Flash-Plugin

AIR-Plugin für Dreamweaver CS3
Download des AIR-Plugins für Dreamweaver CS3

Dokumentation für die Installation des Dreamweaver-Plugins
Dokumentation für die Entwicklung mit dem Dreamweaver-Plugin

Adobe AIR: Beschreibung, Features, Beispiele

nospam@example.com (Christian Pfeiffer) — Thu, 20 Dec 2007 17:16:39 +0100

Was ist AIR?

kleiner Auszug aus Wikipedia
AIR (Adobe Integrated Runtime) ist eine Betriebssystem-übergreifende Laufzeitumgebung für RIA's (Rich Internet Applications) von Adobe Systems. Das Projekt entstand unter dem Entwicklungsnamen Apollo. Das Ziel von AIR ist es, Web- und Desktop-Applikationen zu verschmelzen, um die jeweiligen Vorteile zu nutzen. So können die Applikationen direkt aus dem Web aufgerufen werden [...], aber auch selbstständig auf dem Desktop ohne einen Browser laufen.

Features

PDF-Unterstützung
plattformunabhängig
Applikationen, die auf HTML, AJAX, JavaScript oder Flash basieren können ohne Browser benutzt werden (Cross-Operating System)
lokale XML-Datenbanken können eingebettet werden
Integration von Desktop- und System-Tastenkürzel
transparente HTML-Fenster
Drag & Drop-Unterstützung
Zugang zu AIR- und Flash-API's (z.B. Google-Maps, eBay)
Effekte wie z.b. Faden sind möglich
System-Tray-Icon
Icon-Symbol
Unterstützung von Doppelklicken und dem Mausrad

Beispiele

labs.adobe.com
apollohunter.com

ActionScript 2: Steuerung über Pfeiltasten

nospam@example.com (Christian Pfeiffer) — Thu, 22 Nov 2007 15:02:45 +0100

In diesem Tutorial möchte ich zeigen, wie schnell man eine Pfeiltasten-Steuerung für Flash in AS3 realisieren kann.

Man benötigt zuerst eine Grafik, die man in einen Button konvertiert. Auch wenn man in seinen Flash-Projekt keinen verwenden will, muss ein Button auf der Bühne erstellt werden, man kann ihn aber am Ende etwa unsichtbar machen. Auf diesen Button wird nun folgendes Script gelegt:

on(keyPress "<Up>"){
// Hier kommt ein Befehl rein
trace("Hoch");
}
on(keyPress "<Down>"){
// Hier kommt ein Befehl rein
trace("Runter");
}
on(keyPress "<Left>"){
// Hier kommt ein Befehl rein
trace("Links");
}
on(keyPress "<Right>"){
// Hier kommt ein Befehl rein
trace("Rechts");
}

Wenn man nun das Projekt testet, wird bei jedem Betätigen einer Pfeiltaste die entsprechende Trace-Meldung im Output-Fenster angezeigt. Den Trace-Befehl und den Kommentar können Sie nun durch Ihre eigenen Befehlszeilen ersetzten. Damit wäre die Pfeiltasten-Steuerung schon fertig.

HTML: 404 Not Found - The requested URL was not found on this server.

nospam@example.com (Christian Pfeiffer) — Thu, 08 Nov 2007 10:42:36 +0100

Wer ist dieser Meldung nicht schon einmal im World Wide Web begegnet? Für die Surfer meist ärgerlich, für den Webdesigner eher peinlich, sollte es sich beispielsweise um einen internen toten Link halten, der den Fehler hervorruft. Als Webdesigner sollte man vom Schlimmsten ausgehen und in weiser Voraussicht eine eigene 404 error-site erstellen. Beispielsweise könnte man eine Umleitung auf die Startseite einbinden oder die Meldung einfach nur in eine eigene, neue Seite integrieren. Wie einfach das funktioniert stelle ich Ihnen nun vor:

1. Schritt
Den Ordner /error auf dem eigenen Webserver anlegen und in diesem Ordner eine eigene error-site mit dem Namen error.htm platzieren.

2. Schritt
Nun die .htaccess-Datei im root-Ordner ausfindig machen und herunterladen oder, wenn noch nicht vorhanden, erstellen.

3. Schritt
Die .htaccess beispielsweise mit einem Texteditor öffnen und folgendes hinzufügen:
ErrorDocument 404 /error/error.htm

4. Schritt
Die neue oder aktualisierte .htaccess auf den Webserver hochladen.

Nun wird jeder Besucher, der einen toten Link aufruft, in den Ordner /error, ausgegangen vom root-Ordner, auf die error.htm weitergeleitet. Es bietet sich an dieser Stelle an, auch für andere Server-Fehler Weiterleitungen zu erstellen. Eine kleine Auflistung möglicher Fehler-Seiten:

400 - Bad request
Fehlerhafte Anfrage

401 - Unauthorized
Zugriffsberechtigung ist erforderlich

403 - Forbidden
Passwortgeschützte Datei

404 - Not Found
Die Datei ist nicht vorhanden

500 - Bad script request
Fehlerhafte Script-Anfrage

Dem entsprechend muss man nur den Error-Code und die gewünschte Error-Site der .htaccess hinzufügen, beispielsweise für 400 - Bad request:
ErrorDocument 400 /index.php

Eine detaillierte Beschreibung aller Server-Errors finden Sie auf wikipedia.de und w3.org.

seitwert: Online-Tool für Webseiten-Analyse

nospam@example.com (Christian Pfeiffer) — Fri, 26 Oct 2007 15:19:57 +0200

Ich habe gerade ein sehr gutes Analyse-Tool für die Bewertung von Webseiten gefunden. Es nennt sich seitwert und ist unter der URL http://www.seitwert.de zu finden. Nach Angabe der zu prüfenden Webseite ermittelt das kostenlose Onlinetool einen Seitwert und einen Ranking-Wert aus folgenden sechs Faktoren:

1. Gewichtung bei Google
2. Zugriffszahlen (Alexa)
3. Social Bookmarks
4. Technische Details
5. Gweichtung bei Yahoo
6. Sonstige Faktoren

Seitwert spuckt dann unter anderem den Google-Pagerank, den Alexa-Rang und die Anzahl der Einträge in Social Bookmark Diensten wie Mister Wong oder del.icio.us aus. Sogar Backlinks, Validierungs-Fehler, Domainalter und Meta-Angaben werden analysiert und falls nötig Verbesserungsmöglichkeiten vorgeschlagen.

Ohne Registrierung sind zwei Bewertungen pro Tag möglich, registrieren Sie sich erhöht sich die Zahl auf 15.

Meiner Meinung nach ist seitwert Pflicht für alle Webmaster, denen ein SEO wichtig ist.