Pixelfans

Webfonts mit @font-face

geschrieben von Pawel

Nach jahrelangen Ankündigungen scheint es jetzt wirklich wahr zu werden, dass man im Seitenlayout für das Web nicht auf verbreitete Schriften angewiesen ist oder für Überschriften diverese Imagereplacementtechniken nutzen muss (auch wenn da clevere Varianten entwickelt worden sind).

Die naheliegende Idee Browser auch Schriftarten anzeigen zu lassen, die nicht auf dem Zielrechner installiert, hört sich sehr naheliegend an. Während des Browserkrieges setzten Netscape und Microsoft (natürlich) auf unterschiedliche Techniken, die aber beide verhindern sollten, dass die Schrift auch ohne erworbene Rechte auf anderen Websites eingesetzt werden konnten.

Microsoft stellt immer noch ein kostenloses Tool zur Verfügung des True Types in sogenannte Embedded Open Types konvertiert. Damit wird die Schriftart komprimiert und gezielt für eine Website erzeugt. Mit einem Editor sieht man gut, was gemeint ist. Das schützt die Urheberrechte nicht besonders und für die Erstellung braucht man ein Microsoft-Betriebsssystem, auch wenn es eine kleine Onlinelösung gibt. Der Vorteil ist, das vom IE4 bis zum IE7 IE8 (ab Beta2) diese Fonts verwendbar sind.

Wahrscheinlich ist der Acid3-Test daran “schuld”, das die CSS3-Empfehlung @font-face in Opera 10 Alpha, Firefox 3.1 beta 2 und im Safari umgesetzt sind. Leider funktioniert diese mit Open Type Fonts nicht in jedem Fall. Wenn man sich den Acid3-Test näher ansieht, sieht man folgende Anweisung:

@font-face { font-family: "AcidAhemTest"; src: url(font.ttf); }

True Types funktionieren also in jedem Fall, auf allen Browsern, die den Acid3 bestehen.

Wir haben uns bei Pxelfans für die schöne Schriftart Delicious für den Fließtext entschiedem und sind zumindest auf den oben beschriebenen Browsern zu ähnlichen Ergebnissen kommen.
Dazu haben wir mittels FontForge und einem kleinen Script, welches wir im Netz gefunden haben,

#!/usr/local/bin/fontforge
# Quick and dirty hack: converts a font to truetype (.ttf)
# type fontforge -script otf2ttf.sh FONTNAME.otf 
Print(“Opening “+$1);
Open($1);
Print(“Saving “+$1:r+“.ttf”);
Generate($1:r+“.ttf”);
Quit(0); 

die entsprechenden Dateien in True Types konvertiert. Das war für die Erstellung von *.eot’s ohnehin nötig. So sieht jetzt diese Seite mit Safari aus:

Hier noch ein paar nützliche Links, die uns geholfen haben:

• @font-face in IE: Making Web Fonts Work
• Fonts available for @font-face embedding
• Web Fonts - @font-face im Einsatz

Spannend für die mögliche zukünftige Entwicklung ist sicher auch dieser Text.
Insgesamt kann man die neuen Möglichkeiten gut verwenden, wenn man einige passende Alternativschriften in der font-family definiert.
Um ähnliche Schriften zu finden, kann IdentityFont gute Anhaltspunkte bieten.

Nachtrag:

Es gibt auch einen Onlinekonverter für Schriften.

Kategorie: CSS | Kommentare (1) | Permalink

Flickr mit PHP in eigener Website verwenden (Teil 2)

geschrieben von Pawel

Es gibt wenige Webseiten, die nicht in der einen oder anderen Weise Googlemaps verwenden. Kann man auf Satellitenaufnahmen verzichten, so können Open Street Maps durchaus ein Alternative sein.

Als gelegentlicher ix-Leser habe ich mir Anfang 2007 ein Sammelheft über das Web2.0 gekauft, der auch einen Artikel von Ramon Wartala über Flickr-Googlemaps-Masup enthielt. Der Artikel ist noch immer kostenpflichtig. Ähnlichen Beispielcode enthält aber auch ein Text der FH Wedel.

Als ich die Beispiele Mitte 2008 ausprobieren wollte, funktionierten sie nicht. Man muss im Web 2.0 immer mit Änderungen rechnen. Zum Erstellungszeitpunkt der Artikel wurden die Geokoordinaten noch direkt in den Tags gespeichert. Jetzt werden diese nicht nur in der Datenbank direkt gespeichert, sondern können auch komfortabel hinzugefügt werden. Das erleichtert sogar die Anwendung. Ein paar Sitzungen mit dem Flickrexplorer waren aber schon noch nötig.

Google bietet eine API für Googlemaps an, die auf Javascript beruht. Erforderlich ist ein kostenloser Key, der immer für eine Domain gültig ist. Es lohnt sich auf jeden Fall, direkt in Javascript zu programmieren, zumal die API auch gut dokumentiert ist. Es gibt aber auch PHP-Klassenbibliotheken, die einem die Arbeit ein wenig erleichtern. Da in den oben genannten Beispielen phoogle verwendet wurde, nutzen wir die GoogleMapAPI. Diese verwendet auch die API 2.

<?php 
// phpFlickr einbinden
require_once(“includes/phpFlickr.php”);
// GoogleMapsAPI einbinden
require_once (“includes/GoogleMapAPI.class.php”);
// neue Instanz der flickr-API erzeugen
$f = new phpFlickr(“pawelisindahouse”);
$f->enableCache(“fs”, “cache”);
// neue Instanz der Google Maps erzeugen
$map = new GoogleMapAPI(‘map’);
$map->setAPIKey(“pixelfanssindklasse”);
$map->setWidth(‘100%‘);
$map->setHeight(‘600px’);
$map->setMapType(‘satellite’);
$map->disableSidebar();
$map->disableDirections();
$map->setMarkerIcon(‘/images/blue.png’,‘/images/shadow.png’,0,0,10,10);

Der Anfang ist schnell erklärt, die Klassen werden eingebunden und instanziert. Höhe und Breite kann man mitsetzen und auch wie die Karte angezeigt wird. Standardmäßig wird eine Sidebar verwendet, die wir aber ebensowenig wie die Richtungssuche benötigen. Wir verwenden ein eigenes Icon.

// welcher Nutzer?
$username = “pawelfritsch”;
$user = $f->people_findByUsername($username);
$nsid = $user[‘nsid’];
// Hole alle Fotos des Nutzers mit Tags Halle-Neustadt und Koordinaten
$geo_photos = $f->photos_search(array(“tags”=>“Halle-Neustadt”,“user_id”=>$nsid, “has_geo”=>“1”));

Jetzt wird der Nutzername ermittelt. Wer seinen eigenen Namen verwendet, kann auch gleich die Nutzer-Id verewenden.Mit der Methode photo_search werden nun alle Bilder die mit Halle-Neustadt getagged, Geokoordinaten enthalten und von mir sind gesucht (und gefunden).

foreach ($geo_photos[‘photo’] as $photo) 
{
$something = $f->photos_geo_getLocation($photo[id]);
$location = $something['location'];
// Erzeuge eine Pin-Notiz mit Bild und dem Titel des Fotos
$note = $photo[title]."<br /><img border='0' alt='$photo[title]' src=". $f->buildPhotoURL($photo, "Square") . " />";
$lat = $location['latitude'];
$lon = $location['longitude'];
// Erzeuge einen geografischen Pin 
$map->addMarkerByCoords($lon,$lat,$photo[title],$note,"Klicken, um das Bild anzuzeigen");
}
?>

Die Methode photos_geo_getLocation gab es 2006 noch nicht. Damit stehen die Koordinaten jetzt ganz bequem zur Verfügung.Nun folgt noch ein bißchen HTML.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” 
 “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<?php $map->printHeaderJS(); ?>
<?php $map->printMapJS(); ?>
</head>
<body onload=“onLoad()“>
<h2>Beispiel Mashup mit <a
href=“http://phpinsider.com/php/code/GoogleMapAPI/“>GoogleMapApi</a>
und <a href=“http://www.phpflickr.com/“>phpFlickr</a></h2>
<?php $map->printMap();?>
</body>
</html>

Das generierte Javascript wird an den entsprechenden Stellen im <head> und <body> ausgegeben und fertig ist das Mashup.

Studenten der Universität Jena haben das natürlich noch ein bisschen eindrucksvoller hinbekommen.

Kategorie: PHP | Kommentare (0) | Permalink

SVG in Website skalierbar einbetten

geschrieben von Pawel

Der Artikeltitel ist ein Homage an den Artikel von Gerrit van Aaken, der mich zu eigenen Experimenten inspiriert hat.

Mit einer Testseite und browsershots.org kann man recht schnell feststellen, dass SVG auf allen Browsern bereits gut unterstützt wird. Auf allen Browsern? Nein, ein Hersteller aus Redmond hat es bis zur Version 8 seines Browsers nicht geschaft, dies nativ zu implementieren, gelobt aber sich etwas einfallen zu lassen, da die Adobe den SVG-Viewer nicht länger bereitsstellen will.

Es gibt verschiedene Einbettungsmöglichkeiten von SVG in die Website, direkt im Dokument (inline), als externe Datei mittels <object> oder als Hintergrund mittels CSS. Letzteres beherrscht bisher leider nur Opera.Für die Website halle-neustadt.info habe ich mich für die zweite Variante entschieden.

Wenn die Grafik noch nicht zur Verfügung steht, muss man diese erzeugen. Meine Wahl war auf das Logo der früher eigenständigen Stadt Halle-Neustadt gefallen. Die verlinkte Grafik ist natürlich in einer sehr schlechten Qualität. Ich habe mich entschieden, diese nicht neu zu zeichnen (was aber durchaus eine Alternative sein kann). Dazu habe ich das Vektorprogramm Inksacape genutzt. Dieses steht für alle Plattformen kostenlos zur Verfügung und verwendet generell SVG zu Speicherung von Vektorgrafiken und kann auch ein Bitmap vektorisieren. Das Original kann man dann löschen. Das Ergebnis kann sich durchaus sehen lassen.

Die Dateigröße war in meinem Beispiel zunächst einmal sehr enttäuschend und es war eine umfangreichen Nacharbeit nötig. Durch die schlechte Qualität des Originals benutzt Inkscape viel zu viele Objekte und Knoten. Letztere kann man mit Strg-L reduzieren. Eine Erläuterung von Inkscape würde hier den Rahmen sprengen, deshalb sei nur kurz auf die Dokumentation verwiesen.

Am Ende beträgt die Grafik jetzt 14,1kb und ist klein genug. Die Einbettung ist einfach:

<object type="image/svg+xml" data="templates/neustadt3/img/Wappen_Halle-Neustadt_1.svg">
Sie ben&ouml;tigen einen SVG-f&auml;higen Browser!</object>

Statt des Textes ist auch die Angabe eines Alternativbildes für den IE möglich. Das wäre bei einem Firmenlogo sicher auch notwendig. Da es sich um einen privaten Blog handelt, sehen die IE-Nutzer eben etwas weniger. Ich habe mich dafür entschieden das object per CSS Eigenschaften zuzuweisen. Alternativ wäre das auch im svg selbst möglich gewesen. Die Darstellung im Konqueror sieht merkwürdig aus, da er aber eine eher geringe Verbreitung hat, habe ich das vernachlässigt.

Fazit: SVG ist gut verwendbar. Mit den Möglichkeiten stehen wir sicher noch am Anfang. Ein Blick auf die MDC-Seite zeigt interessante Beispiele, die einen Eindruck vermiteln, was durch die direkte Manipulation der Bilder möglich wird. Für CSS-Designs wird es dann spannend, wenn alle modernen Browser auch die Einbettung per url(background.svg) gestatten.

Kategorie: SVG | Kommentare (0) | Permalink