KA Mediendesign Blog - Seite 9 von 10 - TYPO3, iOS & Web-Development

Facebook Meta-Tags in validem XHTML 1.1

Um die Nutzung der Social Plugins von Facebook zu verbessern, kann man selber bestimmen, welches Bild Facebook als Miniaturbild nutzen soll. Dies geschieht über die Angabe von bestimmten Meta-Tags.

Diese sind nicht XHTML 1.1 valide. Dort kann aber nachgebessert werden, sodass der W3C-Validator nicht meckert.

Zusätzliche Meta-Angaben für Facebook, wie auf der Seite des Social Plugins „Like-Button“ zu sehen, zeigen Facebook beispielsweise welches Bild als Miniaturbild genutzt werden soll. Außerdem ist es möglich einen zusätzlichen Titel für die Seite anzugeben, den Facebook anstatt dem <title>-Tag nutzen soll.

Die folgenden, dort gezeigten Meta-Tags sind nicht XHTML valide.

<meta property="og:title" content="The title of your page" />
<meta property="og:site_name" content="The name of your web site" />
<meta property="og:image" content="The URL of the best picture for this page" />

Das Problem wird umgangen, indem wir diese Meta-Tags nur dann anzeigen lassen, wenn Facebook die Seite durchsucht. Dazu benötigen wir den Browser-Agent von Facebook.

Facebook Markup Language (FBML) in validem XHTML 1.1

Ihr habt Social-Plugins von Facebook, wie den Teilen, Gefällt mir, und Empfehlen Button, per FBML in eure Website eingebunden? Und nun stellt ihr fest, dass diese Elemente nicht XHTML 1.1 valide sind?

Wir haben diese ebenfalls eingebunden und dennoch ist unsere Website komplett XHTML 1.1 valide. Heute zeigen wir euch wie das funktioniert.

Update

Es ist eine neue Version mit verbesserter Technik, geringerer Dateigröße und vereinfachter Integration verfügbar. Nutze diesen Artikel und somit die neue Technik: Facebook XFBML in validem XHTML 1.1 – Version 4.0.

Da wir davon ausgehen, dass ihr die Social-Plugins von Facebook schon erfolgreich eingerichtet habt, gehen wir darauf nicht näher ein. Weitere Informationen dazu findet ihr hier: Facebook Developers Soziale Plug-ins.

Zunächst sei gesagt, diese Anleitung zur Validierung bezieht sich auf die Social-Plugins die per FBML (Facebook Markup Language) eingebunden und mittels des JavaScript SDK gerendert werden.

Zum Verständnis was verändert wird

Wir binden jedes Social-Plugin in ein HTML-Element (z.B. ein <p>) ein. Dieses HTML Element wird mit dem CSS-Befehl display:none; gekennzeichnet, damit es nicht angezeigt wird. Das darin befindliche Social-Plugin wird auskommentiert, wodurch nichts mehr angezeigt und somit vom W3C-Validator auch nichts mehr bemängelt wird.

Da unsere Plugins sowieso nur bei aktiviertem JavaScript funktionieren (per JavaScript SDK gerendert), nutzen wir nun JavaScript zum Entfernen des Kommentares und des CSS-Befehles display:none;.

Somit wird der Button nachträgich sichtbar und vom JavaScript SDK gerendert. Das Ergebnis bleibt gleich, nur ohne meckeren des W3C-Validators.

TemplaVoila! Vorschau Informationen der Datenstruktur deaktivieren

Ihr nutzt die TYPO3 Extension TemplaVoila! und möchtet gerne in eurer Vorschau der Seite diese lästigen, Layout zerstörenden mouseOver-Informationen ausblenden?

Eine kleine Änderung im TypoScript Template sowie eine weitere Änderung an der Extension selber machen es möglich.

An die Arbeit!

Als erstes deaktivieren wir das erste Info-Feld von TemplaVoila! mittels einer einfachen TypoScript Anweisung (disableExplosivePreview), welche wie folgt in unser bestehendes, TypoScript Template eingefügt wird (die ersten beiden Zeilen sollten schon vorhanden sein):

page.10 = USER
page.10.userFunc = tx_templavoila_pi1->main_page
page.10.disableExplosivePreview = 1

Nun haben wir schon den ersten Info-Block ausgeblendet.

CSS !important – So deklarierst du Befehle als wichtig

Wenn ihr vor dem Problem steht, dass eure CSS-Befehle nicht mehr greifen. Zum Beispiel wenn ihr ID-Elemente mit Klassen überschreiben möchtet, dann versucht es mal hiermit.

Diesmal gibt es keine Scripte zum Einbinden oder generell großen Erklärungsbedarf. Es geht um eine einfache Regel für CSS (Cascading-Style-Sheets): !important. Ihr habt vorgefertigte Web-Software wie eCommerce Shops oder einfach Content-Management- und Blog-Systeme? Darin befindet sich schon ein Template, welches ihr noch etwas tunen wollt?

Dann mal los! Die Hierarchie von CSS:

1. Element-Style
<div style=“…“>…

2. ID-Selektoren
<div id=“beispiel_id“>…

3. Klassen
<div class=“beispiel_klasse“>…

Der Text des folgenden Absatzes (<p>) würde laut Hierachie also nun 26 Pixel groß sein, da das ID-Attribut klaren Vorrang gegenüber dem Class-Attribut hat.

<p id="gross" class="klein">
	Testtext
</p>

#gross {
    font-size:26px;
}
     
.klein {
    font-size:10px;
}

Schneller PNG Fix für den IE6

Dass der IE6 keine PNG-Dateien mit Alpha-Transparenz unterstützt ist uns allen bewusst. Dafür gibt es jedoch ein paar mehr oder weniger gute Fixes.

Zuvor nutzten wir selber ein Fix bei dem eine transparente GIF-Datei hinterlegt werden muss. Dadurch wurden die transparenten PNGs zwar im IE6 auch transparent angezeigt, jedoch mit verspätung. Außerdem ist diese Lösung wahrscheinlich nicht die optimale für den IE6, da dieser sehr langsam wurde.

Jetzt gibt es eine sehr gute Alternative.

Der neue Fix für den IE6 und seinen PNG-Problemen benötigt weder ein transparentes GIF noch irgendwelche angaben von unvaliden Funktionen (behavior) in den CSS-Dateien.

Das Script ist zunächst hier zu finden:
DD_belatedPNG_0.0.8a-min.js von Drew Diller

Ist die Datei heruntergeladen, wird diese in unser Projekt kopiert und wie folgt in unser Dokument eingebunden.

<!--[if IE 6]>
<script src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script>
	DD_belatedPNG.fix('');
</script>
<![endif]-->

Browseroptimierung per CSS leicht gemacht

Ihr kennt das auch? 5 verschiedene CSS-Dateien für alle möglichen Browser? Am besten noch unterteilt zwischen Betriebssystemen? Wie auch immer. Das Grauen und euer Leid haben ein Ende. Wir zeigen euch, wie ihr in einer CSS-Datei für alle möglichen Browser und Systeme optimieren könnt. Bei uns ist dieses Script selbst seit einiger Zeit im Einsatz. Mit diesem JavaScript Einzeiler ist es euch möglich das Betriebssystem sowie die unterschiedlichen Browser direkt per CSS-Klasse anzusprechen und entsprechende CSS Befehle und Anweisungen nur für dieses Element zu hinterlegen.

css_browser_selector.js von Rafael Lima

Die Einbindung in unseren Head-Bereich erfolgt wie gewohnt:

<script type="text/javascript" src="js/css_browser_selector.js"></script>

Ihr müsst natürlich gegenfalls den Pfad zur JavaScript Datei nochmals überprüfen und anpassen – aber wie ich euch kenne, ist euch das ja klar.

TYPO3 Ext: sk_codebox in validem XHTML 1.1

Die TYPO3 Extension sk_codebox Version 2.0.1 (wie hier im Blog für Code-Schnipsel genutzt) ist standardmäßig leider nicht XHTML 1.1 valide sobald man die Zeilennummern der Extension einblendet.

Für Webdesigner, welche XHTML 1.1 validen Code erhalten möchten gibt es nur zwei Möglichkeiten: Entweder wird das Problem mit der Extension und dem Validierungsfehler behoben oder die Extension muss weichen.

Da wir diese Extension soweit ganz gut finden, haben wir uns natürlich mit der ersten Möglichkeit – das Problem wird behoben – beschäftigt. Folgende Änderungen müsst ihr in der geshi.php durchführen (Ordner: typo3conf/ext/sk_codebox/) damit ihr validen Code erhaltet.

Bugfreie Effekt-Navigation mit script.aculo.us

Hier zeigen wir euch, wie ihr ein schönes, bugfreies Effekt-Menü mit Hilfe von script.aculo.us zaubern könnt.

Der Nachteil solcher effektvollen Navigationen ist, dass sich diese – ohne spezielle Sicherheitschecks – von selber „kaputt-effekten“. In unserem Script sind einige solcher Sicherheitschecks für ein (fast) reibungsloses Effekt-Menü – wie oben zu sehen.

Das hier zur Verfügung gestellte Script lässt ein Menü via script.aculo.us nach unten und oben blenden. Die „Unternavigation“ steht dabei unter dem eigentlichen Menüpunkt. Falls ihr einen anderen script.aculo.us Effekt wünscht, müsst ihr lediglich die Effekte in diesem Script wechseln und gegenfalls etwas Feintuning betreiben.

Lasst uns beginnen. An sich ist es sehr einfach diese Script in eine Website einzubinden. Zunächst benötigen wir jedoch die Navigation, auf welcher wir den Effekt anwenden möchten.

TYPO3, iOS & Web-Development Blog

Update

Zum Verständnis was verändert wird