WordPress 2.7

Design und Funktionen des neuen Wordpress 2.7:

datum Friday, December 12. 2008       zeit 11:16       ordner Webdesign       ordner       ordner 0       ordner 0

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 OrdnerstrukturDie 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.
datum Monday, March 17. 2008       zeit 10:59       ordner Webdesign       ordner Defined tags for this entry: , ,       ordner 1       ordner 0

IE 6.0 png-Fix

IE 6.0 PNG FixWer 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.
datum Friday, February 29. 2008       zeit 16:06       ordner Webdesign       ordner Defined tags for this entry: ,       ordner 2       ordner 0

ActionScript: Sounds in ein Flash-Projekt einbinden

Library
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!
datum Monday, January 28. 2008       zeit 16:35       ordner Webdesign       ordner Defined tags for this entry: ,       ordner 0       ordner 0

Papervision3D: 3D-Objekte in Flash importieren

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:



datum Friday, January 4. 2008       zeit 14:43       ordner Webdesign       ordner Defined tags for this entry: ,       ordner 2       ordner 0

Adobe AIR: Download, Installation, Dokumentation

datum Thursday, December 20. 2007       zeit 17:19       ordner Webdesign       ordner Defined tags for this entry:       ordner 0       ordner 0

Adobe AIR: Beschreibung, Features, Beispiele

Was ist AIR?
kleiner Auszug aus WikipediaAdobe AIR
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
datum Thursday, December 20. 2007       zeit 17:16       ordner Webdesign       ordner Defined tags for this entry:       ordner 0       ordner 0

ActionScript 2: Steuerung über Pfeiltasten

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.
datum Thursday, November 22. 2007       zeit 15:02       ordner Webdesign       ordner Defined tags for this entry:       ordner 0       ordner 0
(Page 1 of 3, totaling 22 entries) » next page