Mit SIIR jede beliebige Schrift auf seiner Webseite einsetzen
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
ein. Um das Script zu starten, muss im HTML- oder PHP-Dokument vor den abschließenden </body> und </html> Tags folgendes geschrieben werden:
Nun kann man ganz normal Überschriften einsetzen, etwa so:
Eine Beispieldatei würde nun wie folgt aussehen:
In der external.js muss der absolute Pfad zum siir-Ordner angegeben werden. Man muss dazu im Script die Zeile
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:
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:
Also einfach diese fünf Zeilen anpassen und als .htaccess im siir-Ordner speichern. Dann wäre SIIR fertig konfiguriert.
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.
10:59
.
Blog abonnieren
Social Bookmarks
Lesezeichen
Blogroll
Statistiken
