FancyDesign Blog - Entries tagged as PHP

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.

SIIR Ordnerstruktur

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.

Monday, March 17. 2008 zeit

10:59

Webdesign

Defined tags for this entry: JavaScript, PHP, SIIR ordner

1

0

PHP: 3 Möglichkeiten, einen PHP-Include in HTML einzubinden

Im Folgenden stelle ich drei Möglichkeiten vor, wie man Includes in seine Webseite einbinden kann. Dazu verwende ich zum einen die Datei navigation.inc.php, die die Daten, die includiert werden sollen enthält, und die index.php, in die der Include erscheinen soll. Die zwei Dateien stellen jeweils natürlich nur Beispiele dar.

1. Möglichkeit

navigation.inc.php

<?php



function testfunktion(){

return '<div class="test"><a href="test1.php">Teststeite 1</a></div>

<div class="test2"><a href="../test2.htm">Teststeite 2</a></div>

<div class="test3"><a href="../../test3.htm ">Teststeite 3</a></div>';

}



?>

index.php

<?php



require ('navigation.inc.php');



?>



<!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>

    <title>3 Möglichkeiten, einen PHP-Include in HTML einzubinden</title>

    <link href="css/style.css" rel="stylesheet" type="text/css"/>

</head>

<body>

<div>



<?php include navigation.inc.php"); ?>



</div>

</body>

</html>

2. Möglichkeit

navigation.inc.php

<div class="test"><a href="test1.php">Teststeite 1</a></div>

<div class="test2"><a href="../test2.htm">Teststeite 2</a></div>

<div class="test3"><a href="../../test3.htm ">Teststeite 3</a></div>

index.php

<!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>

<title>3 Möglichkeiten, einen PHP-Include in HTML einzubinden</title>

<link href="css/style.css" rel="stylesheet" type="text/css"/>

</head>

<body>

<div>



<?php



include("navigation.inc.php");



?>



</div>

</body>

</html>

3. Möglichkeit

navigation.inc.php

<?php



$test1 = 'Text zum';

$test2 = 'testen';



?>

index.php

<!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>

<title>3 Möglichkeiten, einen PHP-Include in HTML einzubinden</title>

<link href="css/style.css" rel="stylesheet" type="text/css"/>

</head>

<body>

<div>



<?php



echo "Dies ist ein $test1 $test2";

include 'navigation.inc.php';



?>



</div>

</body>

</html>

Monday, October 8. 2007 zeit

22:25

Webdesign

Defined tags for this entry: HTML, PHP ordner

0

Auskommentieren - wo wie?

Hier ist eine kleine Übersicht, wie man richtig auskommentiert:

CSS
/* Kommentare Ein- oder Mehrzeilig */

HTML, XML


PHP, Javascript, ActionScript
// Einzeiliger Kommentar
/* Mehrzeiliger Kommentar */

Thursday, October 4. 2007 zeit

23:02

Webdesign

Defined tags for this entry: ActionScript, CSS, HTML, JavaScript, PHP, XML ordner

0