Themen

Browser-Kompatibilität von CSS3-Schriftarten

Wed, 13 Jul 2011 02:20:18 +0200

Um auf der Webseite CSS3-Schrifarten verwenden zu können, muss jede zu verwendende Schriftart im CSS definiert werden. Um die korrekte Schriftart jedoch in möglichst vielen Browsern korrekt darzustellen, müssen einige Dinge beachtet werden. Im Folgenden wird die Kompatibilität und Verwendung erklärt.<h2>Browser-Kompatibilität</h2>@font-faceDie Definition @font-face wird von folgenden Browsern unterstützt:<ul><li>Internet Explorer 4+</li>
<li>Mozilla Firefox 3.5+</li>
<li>Google Chrome 4+</li>
<li>Safari 3.1+</li>
<li>Opera 10+</li>
</ul>Damit sind alle aktuell verwendeten Browser abgedeckt.Bei den Schriftarten-Dateien ist es mit der Kompatibilität etwas komplizierter:WOFF-Schriftarten<ul><li>Internet Explorer 9+</li>
<li>Mozilla Firefox 3.6+</li>
<li>Google Chrome 6+</li>
<li>Opera 11.1+</li>
</ul>OpenType-Schriftarten<ul><li>Mozilla Firefox 3.5+</li>
<li>Google Chrome 4+</li>
<li>Safari 3.1+</li>
<li>Opera 10+</li>
<li>iOS Mobile Safari 4.2+</li>
</ul>TrueType-Schriftarten <ul><li>Internet Explorer 9+</li>
<li>Mozilla Firefox 3.5+</li>
<li>Google Chrome 4+</li>
<li>Safari 3.1+</li>
<li>Opera 10+</li>
<li>iOS Mobile Safari 4.2+</li>
</ul>EOT-Schriftarten <ul><li>Internet Explorer 4+</li>
</ul>SVG-Schriftarten <ul><li>Google Chrome 4+</li>
<li>Safari 3.1+</li>
<li>Opera 10+</li>
<li>iOS Mobile Safari 3.2+</li>
</ul>Das heisst, dass man in der Praxis WOFF, TrueType (oder OpenType), EOT und SVG Schriftarten verwenden sollte um möglichst viele Browser abzudecken.Folgende Browser werden jedoch gar nicht unterstützt:<ul><li>Firefox < 3.5 (herausgegeben am 30.06.2009, heute verfügbar: 5.0)</li>
<li>Chrome < 4.0 (herausgegeben am 25.01.2010, heute verfügbar: 12.0)</li>
<li>Safari < 3.1 (herausgegeben am 18.03.2008, heute verfügbar: 5.0)</li>
<li>Opera < 10 (herausgegeben am 01.09.2009, heute verfügbar: 11.5)</li>
</ul>Je nachdem welche Schriftarten vorhanden sind oder man aus rechtlichen Gründen verwenden darf, wird die Unterstützung recht schwiereig. Wenn beispielsweise nur die Formate WOFF und EOT vorhanden sind, werden folgende Browser nicht unterstützt:<ul><li>Opera < 11.1 (herausgegeben am 12.04.2011)</li>
<li>Safari alle Versionen inkl. iOS mobile Safari</li>
<li>Chrome < 6.0 (herausgegeben am 02.09.2010)</li>
<li>Firefox < 3.6 (herausgegeben am 21.01.2010)</li>
</ul><h2>Definition</h2>Jede Schriftart wird doppelt mit verschiedenen Schriftarten-Dateien definiert, um die Schriftart in allen Browsern korrekt anzeigen zu können.Nachfolgend eine Beispiels-Definition einer Schriftart „TestSchriftRegular“:<pre>@font-face { /* Diese Deklaration spricht den Internet Explorer an */ font-family: "TestSchriftRegular"; src: url("TestSchrift-Regular.eot"); } @font-face { /* Diese Deklaration spricht alle anderen Browser an */ font-family: "TestSchriftRegular"; src: url(//:) format("no404"), url("TestSchrift-Regular.woff") format("woff"), url("TestSchrift-Regular.ttf") format("truetype"), url("TestSchrift-Regular.svg#TestSchriftRegular") format("svg"); font-weight: normal; font-style: normal; }</pre><h2>Verwendung</h2>Nachdem die obige Definition eingefügt wurde, kann im CSS die definierte Schriftart ganz normal verwendet werden:<pre>h1 { font-family: TestSchriftRegular, Arial, sans-serif; }</pre><h2>Konfiguration</h2>Die Mime-Typen für die Schriftarten-Dateien müssen im Webserver konfiguriert werden.Folgende Mime-Typen müssen konfiguriert werden:<pre>.woff application/x-font-woff .eot application/vnd.ms-fontobject .ttf application/x-font-ttf .otf application/x-font-opentype .svg image/svg+xml</pre>

Silverstripe: RSS-Feed auf allen Seiten anzeigen

Tue, 22 Feb 2011 11:40:42 +0100

In der <a href="http://doc.silverstripe.org/sapphire/en/reference/rssfeed" target="_blank">Silverstripe-Dokumentation </a>wird beschrieben, wie man das Link-Tag für einen RSS-Feed auf einer Seite ausgibt. Um dieses Tag aber auf allen Seiten eines Auftritts auszugeben, braucht es ein paar Anpassungen.Als Beispiel nehme ich hier ein News-Modul, das für die Übersichtsseite den Seitentyp NewsOverview und für die einzelnen Einträge NewsPage verwendet.Um das Link-Tag für den RSS-Feed auf allen Seiten ausgeben zu können, muss die in der Dokumentation beschriebene Methode init() generalisiert und auf alle Seiten erweitert werden. Dazu wird eine Extension für den Page_Controller implementiert, der für jede Instanz des Seitentyps NewsOverview ein Link-Tag generiert:<pre>class NewsRssExtension extends Extension{ function onBeforeInit(){ $aOverviewPages = DataObject::get("NewsOverview"); foreach($aOverviewPages as $page) { RSSFeed::linkToFeed($page->Link("rss"), $page->Title." as RSS feed"); } } }</pre>Diese Extension wird in der Datei _config.php dem Page_Controller angehängt:<pre>Object::add_extension('Page_Controller','NewsRssExtension');</pre>In der Klasse NewsOverview_Controller wird (wie in der Silverstripe-Dokumentation beschrieben) die rss-Methode integriert, welche die Newseinträge ausgibt:<pre>class NewsOverview_Controller extends Page_Controller { function rss() { $rss = new RSSFeed($this->NewsItems(10), $this->Link(), $this->Title, null, "Title", "Content", "", "LastEdited"); $rss->outputToBrowser(); } function NewsItems($limit = 0) { $curChildren = $this->AllChildren(); if ($curChildren) { $curChildren->sort('Date', 'DESC'); if ($limit > 0) { $curChildren = $curChildren->getRange(0,$limit); } } return $curChildren; } }</pre>Mit dieser kleinen Anpassung können nun alle Feeds des Auftritts auf allen Seiten abonniert werden.

Silverstripe: lokalisierte Datums-Ausgabe

Wed, 08 Dec 2010 15:08:32 +0100

Silverstripe und die meinsten Module verwenden die Methode Nice() der Klassen Date und Datetime zur Ausgabe des Datums. Das Problem mit diesen Funktionen ist, dass sie das Datum jeweils im Neuseeländischen Format ‘d/m/Y’ respektive ‘d/m/Y g:ia’ ausgeben, anstatt das in der Konfiguration hinterlegte Datumsformat zu verwenden.In der Konfiguration (/mysite/_config.php) können das Zeit- und Datums-Format folgendermassen definiert werden:<pre>// Set the site locale i18n::set_locale('de_DE'); i18n::set_date_format('dd.MM.YYYY'); i18n::set_time_format('HH:mm');</pre>Um nun diese Formate bei der Ausgabe zu verwenden, habe ich folgende Klassen geschrieben:/mysite/code/LocaleDate.php:<pre>class LocalDate extends Date { function Nice() { require_once 'Zend/Date.php'; if($this->value) { $sDate = new Zend_Date($this->value); return $sDate->toString(i18n::get_date_format()); } else { return ""; } } } </pre>/mysite/code/LocaleDatetime.php:<pre>class LocalDatetime extends SS_Datetime { function Nice() { require_once 'Zend/Date.php'; if($this->value) { $sDate = new Zend_Date($this->value); return $sDate->toString(i18n::get_date_format()." ".i18n::get_time_format()); } else { return ""; } } } </pre>Um diese Klassen zu verwenden, müssen sie in der Konfiguration entsprechend eingetragen werden:<pre>// use custom class for date display Object::useCustomClass('Date', 'LocalDate', true); Object::useCustomClass('SS_Datetime', 'LocalDatetime', true); </pre>Dies bewirkt, dass meine Klassen bevorzugt verwendet werden und das Datum bei der Ausgabe im entsprechenden lokalisierten Format ausgegeben wird.Falls jemand eine schönere Lösung dieses Problem kennt, würde ich mich über Kommentare freuen.

WCMS-Review: Silverstripe

Tue, 30 Nov 2010 14:59:44 +0100

Nach langem Suchen habe ich endlich das CMS meiner Wahl gefunden: <a href="http://www.silverstripe.org/" target="_blank">Silverstripe</a>. Gebaut für PHP5 und MySQL basiert Silverstripe auf einem gelungenen MVC-Framework, das dem Entwickler sehr viele Freiheiten lässt und ihn optimal in seinen alltäglichen Arbeiten unterstützt.Mit der Veröffentlichung der Version 2.0 in Februar 2007 beschloss das Entwicklerteam, Silverstripe 2.0 nicht mehr kommerziell anzubieten, sondern unter die liberale BSD-Lizenz zu stellen. Daraufhin wurde Silverstripe ein GSOC-(Google Summer of Code)-Projekt des Jahres, was dem Programm sehr gut bekommen ist.Noch ist die Entwicklergemeinde nicht so gross wie bei anderen, bekannteren Systemen, doch gewinnt Silverstripe immer mehr an Beliebtheit.<h2>CMS für Entwickler</h2>Silverstripe unterscheidet sich in vielen Ansätzen von anderen Systemen. Das gesamte Framework ist komplett objektorientiert aufgebaut. Nicht so bewanderte Anwender dürfte dies abschrecken, doch für uns Entwickler ist das der Himmel auf Erden. Wann immer man etwas anders haben will als es der Standard bietet, schreibt man seine eigene Kind-Klasse und überschreibt die entsprechende Methode oder man schreibt eine Extension, welche einer Klasse zusätzliche Funktionalität verleiht.Das Template-System ist relativ einfach gehalten – und das im besten Sinne. Es gibt nicht unübersichtich viel Logik in den Templates oder gar eine eigene Template-Skript-Sprache, sondern <a href="http://doc.silverstripe.org/built-in-page-controls" target="_blank">einige wenige Kontroll-Strukturen</a>, mit welchen sich die Logik der dahinter liegenden Klassen problemlos abbilden lässt.Die Rechtevergabe erfolgt sehr praxisnah über Rollen und Gruppen. Die Berechtigungen lassen sich sehr einfach und sehr detailliert in der Backend-Oberfläche vergeben.<h2>CMS für Autoren</h2>Auf den ersten Blick könnte man meinen, Silverstripe sei etwas simpel gehalten, denn die Benutzeroberfläche ist sehr übersichtlich und einfach aufgebaut. Doch die Administrationoberfläche ist sehr mächtig und wird durch die verschiedenen Module und Erweiterungen noch mächtiger. Der Autor sieht immer nur diejenigen Teile, auf welche er Berechtigung hat und kann die textuellen Inhalte mithilfe des WYSIWYG-Editors <a href="http://tinymce.moxiecode.com/" target="_blank">TinyMCE </a>bearbeiten. Meiner Meinung nach sollte sich jeder einigermassen Computer-Freundliche Autor in der Silverstripe-Administration zurechtfinden.<h2>Erweiterungen</h2>Um eine einfache Webseite mit reinen Textseiten zu implementieren braucht man eigentlich nicht mehr als das was im Standard-Installationspackage daherkommt. Wenn man aber etwas mehr Funktionalität braucht, kommen Erweiterungen ins Spiel. Noch ist die Anzahl der verfügbaren Module nicht sehr gross, doch das durchdachte MVC-Framework erlaubt es relativ einfach eigene Erweiterungen zu schreiben. Einige Erweiterungen sind aber meiner Meinung nach sehr empfehlenswert:<ul><li><a href="http://www.silverstripe.org/user-forms-module/" target="_blank">UserForms</a>: Modul mit welchem sich ein Autor ein Email-Formular zusammenklicken kann</li>
<li><a href="http://www.silverstripe.org/dataobjectmanager-module/" target="_blank">DataObjectManager</a>: Erweiterung der standardmässig vorhandenen Controls zur Bearbeitung von Datenobjekten</li>
<li><a href="http://www.silverstripe.org/uploadify-module/" target="_blank">Uploadify</a>: Flash-Upload-Felder für den DataObjectManager</li>
<li><a href="http://www.silverstripe.org/spam-protection-module/" target="_blank">SpamProtection</a>: Basis-Modul für Captchas, das sich automatisch in alle Formularen einklinkt</li>
<li><a href="http://www.silverstripe.org/mollom-module/" target="_blank">Mollom</a>: Captcha-Modul das den Mollom-Service implementiert</li>
</ul>Ausserdem habe ich noch das <a href="http://www.silverstripe.org/newsletter-module/" target="_blank">Newsletter-Modul</a> verwendet, allerdings musste ich da sehr viele Änderungen vornehmen, da die veröffentliche Version v0.4.0-rc1 in vielen Belangen hinter dem Entwicklungsstand von Silverstripe hinterherhinkt.<h2>SEO-Optimierung</h2>Die SEO-Eigenschaften von Silverstripe sind solide und gut umgesetzt. So ist beispielsweise die Verwaltung selbstsprechender URLs und nützlicher Metadaten bereits ab Werk eingebaut. Valider XHTML-Code stellt einen der Grundpfeiler professioneller SEO-Optimierung dar und bei Silverstripe gehört die XHTML-Validierung bereits zum Konzept. Silverstripe macht den Autor auf nicht-standardkonformen XHTML-Code aufmerksam. Eine XML-Sitemap gehört zum Standard und ist bereits in der Standard-Installation enthalten.<h2>MVC-Framework</h2>Gemäß MVC-Paradigma unterscheidet Silverstripe zwischen drei logischen Schichten: Model, View und Controller. Unter Model versteht man die komplette Datenverwaltung der in der CMS-Datenbank abgelegten Inhalte. Ergebnisse lassen sich an die Controller-Schicht weiterreichen. Die Controller-Schicht bezeichnet die Engine, welche die Abläufe steuert. Sie kann sowohl Daten von der Model-Schicht entgegennehmen als auch anfordern. Und außerdem kann die Controller-Schicht auch Daten von der View-Schicht entgegennehmen und daraufhin maßgeschneiderte Inhalte als Reaktion ausgeben. Insgesamt ist die Controller-Schicht also ein Vermittler zwischen der View- und der Model-Schicht. Die View-Schicht beinhaltet die Layout-Vorlagen (Templates) und sorgt sowohl für die Ausgabe der Daten als auch für die Präsentation im Webbrowser.Die saubere Trennung der Logik und der Inhalte bei MVC-Entwurfsmustern resultiert in kürzerem und leichter lesbaren Code, der sich einfacher wiederverwenden lässt. Das wiederum senkt die Wartungskosten.<h2>Fazit</h2>Ich bin begeistert von Silverstripe und kann es nur wärmstens empfehlen. Der saubere Aufbau, die verschiedenen<a href="http://silverstripe.org/awards/" target="_blank"> gewonnenen Preise</a> und die Tatsache, dass Google das Projekt unterstützt, sprechen dafür, dass Silverstripe eine grosse Zukunft hat.

gelöst: mod_eventlist_wide und JoomFish

Mon, 08 Nov 2010 00:00:00 +0100

Ich hatte das Problem, dass das EventList-Modul mod_eventlist_wide in der Version 1.0.1 nicht mit JoomFish funktionierte. Die Events wurden einfach nicht übersetzt.Nach langem Suchen hab ich den Fehler endlich gefunden. Gemäss <a href="http://www.joomfish.net/de/dokumentation/entwickler-doku/64-compatible-query-construction" target="_blank">Dokumentation </a>müssen im SQL-Query alle IDs der zu übersetzenden Tabellen mit geladen werden, auch wenn diese zur Anzeige nicht verwendet werden.Ich hab also den Code durchstöbert und in der Datei /modules/mod_eventlist_wide/helper.php die Zeile 108 durch folgenden Code ersetzt:<pre>$query = 'SELECT a.id as key1, a.title, a.dates, a.enddates, a.times, a.datimage, l.id as key2, l.venue, l.state, l.locimage, l.city, c.id as key3, c.catname,'</pre>Und siehe da, es funktioniert.