Dienstag, 29. März 2011

Mit HTML5 beliebige Fonts verwenden

Die meisten Webdesigner kennen das Problem: Man möchte in seinem Webdesign andere Schriftarten als Arial, Verdana und Times New Roman einsetzen, doch konnte dies bislang nicht kompromisslos tun. Voraussetzung dafür war, dass der Besucher der Webseite die verwendete Schriftart auf seinem Rechner installiert hatte. In der Regel behalf man sich mit JavaScript-Lösungen wie Cufon und nahm dabei in Kauf, dass die Texte mit der individuellen Schriftart als Bilder generiert wurden.

Das Ganze geht dank CSS3 aber auch viel einfacher. Mittels @font-face lassen sich neue Schriftarten definieren und an der gewünschten Stelle dann mit font-family verwenden. Normalerweise würde ich jetzt den Quellcode posten und genau erklären, wie man eigene Schriftarten mit CSS3 einbinden kann. Dazu habe ich jedoch ein sehr schönes Tool gefunden, den so genannten Font-Face Generator, der Font-Dateien in viele andere Font-Formate konvertiert und einem auch gleich einen Beispielcode zum einbinden des Font generiert.



Der Font-Face Generator
Der Font-Face Generator macht einem das Leben hier wesentlich leichter. Man sucht sich einfach die gewünschte Font-Datei (z.B. im Internet, bitte auf die Lizenzbestimmungen achten!), lädt diese im Font-Face Generator hoch und lässt sich dann das @font-face Kit generieren. Darin enthalten ist das Font in verschiedenen Formaten (TTF, EOT, WOFF, SVG, SVGZ) und Beispiel-CSS und HTML-Code. Dank der verschiedenen Font-Formate erreicht man eine hohe Cross-Browser Funktionalität. Die so eingebundenen Fonts funktionieren in allen einigermaßen aktuellen Browsern (IE, Firefox, Chrome, Opera, Safari) und die Schriften werden nicht als Bilder, sondern wie jeder andere Text auch dargestellt. Man kann ihn sich also vorlesen lassen oder auch markieren und kopieren, was beides bei JavaScript-Lösungen wie Cufon nicht möglich ist.

Montag, 28. März 2011

TYPO3-Extension Datenbankzugriff

Um in einer TYPO3-Erweiterung auf die Datenbank zuzugreifen, sollte man das TYPO3_DB-Objekt benutzen. Das Objekt ist erreichbar über $GLOBALS['TYPO3_DB'] und man erhält darüber Zugriff auf viele verschiedene Funktionen für den MySQL-Datenbankzugriff. Auf der TYPO3-Seite findet man hierzu eine Klassenreferenz.

Um den Einstieg etwas zu erleichtern hier ein einfaches Beispiel für eine Datenbankabfrage in einer TYPO3-Extension:

$fields = "vorname, nachname";
$table = "tx_spenden";
$where = "spenderliste=1";
$spender = $GLOBALS['TYPO3_DB']->exec_SELECTgetRows($fields,$table,$where);

In dem Array sind dann die entsprechenden Daten enthalten und können z.B. in einer Liste wie folgt ausgegeben werden:

if(is_array($spender)) {
  foreach($spender AS $s) {
    echo '<p>'.$s['vorname'].' '.$s['nachname'].'</p>';
  }
}

Es gibt natürlich auch zahlreiche andere Datenbankzugriffs-Funktionen neben exec_SELECTgetRows, wie z.B. exec_INSERTquery, execUPDATEquery, execDELETEquery, usw. Für die Spezifikation dieser Funktionen genügt ein Blick in die entsprechende Klassenreferenz.

TYPO3-Extension Caching deaktivieren

Bei der Entwicklung eigener TYPO3-Extensions kann es sehr lästig sein, nach jeder Änderung den Cache zu leeren. Das Caching der Extension lässt sich zum Glück sehr schnell deaktivieren. Hierzu muss nur in der Datei ext_localconf.php im Hauptverzeichnis der TYPO3-Erweiterung bei dem Funktionsaufruf

t3lib_extMgm::addPItoST43($_EXTKEY, 'pi1/class.tx_beispielext_pi1.php', '_pi1', 'list_type', 1)

der letzte Parameter von "1" auf "0" geändert werden:

t3lib_extMgm::addPItoST43($_EXTKEY, 'pi1/class.tx_beispielext_pi1.php', '_pi1', 'list_type', 0)

Nach dieser Änderung muss man noch einmal den Cache leeren, damit sie auch wirksam wird. Danach werden alle Änderungen in der Extension sofort im Frontend sichtbar, ohne vorher den Cache leeren zu müssen.

Donnerstag, 24. März 2011

TYPO3: sprechende URLs mit realurl

Für die Suchmaschinenoptimierung sind so genannte "sprechende URLs" von großer Bedeutung. Für TYPO3 gibt es hierfür die Erweiterung realurl, die URLs wie "index.php?id=4" z.B. in "kontakt.html" umwandelt.

Bildlich gesprochen bedeutet das:
wird zu

Ich möchte hier zeigen, wie man diese Erweiterung in einem TYPO3-System einsetzen kann.

Mittwoch, 23. März 2011

TYPO3 Lightwindow: Ganze Seiten oder Inhaltselemente in Lightbox anzeigen

Die TYPO3 Erweiterung wt_lightwindow bietet die Möglichkeit, beliebige Inhaltselemente oder ganze Seiten in einer Lightbox darzustellen. Die verschiedenen Lightbox-Erweiterungen stellen diese Funktionalität ja meist nur für Grafiken zur Verfügung. Ich werde hier zeigen, wie sich wt_lightwindow in Verbindung mit powermail verwenden lässt. Damit lassen sich Kontaktformulare in einer Lightbox anzeigen, wie auf folgendem Screenshot dargestellt:


Kontaktformular in Lightbox anzeigen mit lightwindow und powermail
Kontaktformular in Lightbox mit Lightwindow und Powermail