POSH ist eine Aktion mit einer Wiki-Plattform, die uns Plain Old Semantic HTML ans Herz legt. Das Wiki ist eine wahre Fundgrube: Wer sich hier durcharbeitet und die (garnicht so neuen) Erkenntnisse bei seinen Websites umsetzt, ist auf dem besten Weg ins Web 3.0. Wenn das nicht POSH ist?

(Gefunden bei R. Johansson, 456 Berea Street)

Anders als beim Original wird das exanto-Skript in einen eigenen Ordner gepackt. Finde ich ja nicht schlecht, bei mir war dann nur leider im Backend die Seite mit den Optionen nicht mehr da.
Abhilfe brachte eine kleine Änderung in intouch.php:

• Im Abschnitt // display options tab in wp-admin steht an 4. Stelle nur intouch-options.php.
• Mit intouch/intouch-options.php war dann auch das Admin-Panel für die Formular-Konfiguration wieder da.

• Einen eigenen (kostenlosen) Account z.B. bei YouTube kreieren
• Einloggen und ein selbstgedrehtes Video hochladen
• Den unter Embed gelisteten Code kopieren und im eigenen Blog in einen Artikel einfügen

Veröffentlichen und fertig? Noch nicht, denn so ist der hereinkopierte Code leider nicht XHTML-valide:

<object width=”xxx” height=”xxx”><param name=”movie” value=”http://…”></param><embed src=”http://…” type=”application/x-shockwave-flash” width=”xxx” height=”xxx”></embed></object>
muss geändert werden.

• Das schliessende Tag </param> muss gelöscht und stattdessen das Tag direkt geschlossen werden: <param … />
• Das Tag <embed> gibt es laut W3C nicht mehr, die Daten gehören stattdessen ins Tag
  <object …>, die Source-Angabe als data=”…”, type=”…” kann komplett kopiert werden, width und height dagegen können wegfallen, weil sie bereits im Tag <object …> definiert sind

Der Code sieht also am Ende so aus:
<object width=”xxx” height=”xxx” data=”http://…” type=”application/x-shockwave-flash”><param name=”movie” value=”http://…” /></object>

Jetzt ist fertig.

Beispiel:
Die Typoscript-Anweisung ACT.wrap = <strong>|</strong> erzeugt für den aktiven Link in einem TMENU diesen Link: <strong><a xxx>Link</a></strong>. Normalerweise müsste die Verschachtelung aber so aussehen: <a xxx><strong>Link</strong></a>.

Obwohl <strong> den eingeschlossenen Text auch ohne spezielle CSS-Formatierung von selbst fettet, bleibt hier die Wirkung aus. Sie wird von der vorhandenen Formatierung für den normalen Link überschrieben.
Effekt: Der Link ist nicht fett und die Kennzeichnung des Aktivstatus bleibt aus. Das gleiche gilt auch für ein umschließendes <span> dem z.B. eine Klasse .bold zugeordnet wird.

Was hilft dagegen?
Da die o.g. Links in Typo3 dynamisch von System generiert werden, lässt sich die Formatierung nicht an die richtige Stelle schreiben. Also kann man das nur mit CSS ausbügeln. Für das Strong-Beispiel ginge das beispielsweise so:

CSS-Code:
strong a {
font-weight: bold;
}

Der Fettdruck von “strong” wird durch das nachfolgende “a” mit dem Normalformat überschrieben. Um das aufzuheben, benötigt der Link “a” innerhalb von “strong” eine neue, eigene Formatierung. Gleiches gilt für andere Element-Verschachtelungen wie “span” oder “p”.

Fazit:
Auch ohne eine explizite Klassenzuweisung, lassen sich verschachtelte Elemente allein per CSS stylen. Das ist insbesondere bei mehrfach verschachtelten Linklisten innerhalb von Textmenüs interessant und verschlankt den Quellcode enorm. Das Stichwort hier heisst “Kontext sensitiv”.

Funktioniert eigentlich ganz gut, bis auf die 5er Internet Explorer. Hier bleibt das Hover-Bild leider stehen, wenn es einmal mit der Maus berührt wurde. Stuart Robertson zeigt dazu einen Workaround (:hover bekommt ein border:none). Bei mir hat es allerdings nicht geholfen.

Was mir auffiel: Die meisten meiner Buttons funktionieren auch im IE5 problemlos. Sie sind aber im Gegensatz zum Tutorial von Robertson nicht im Basisbild integriert. Ich habe wie bei einem Mouseover jeweils eine On- und Off-Ansicht, also auch im “a:link” ein Hintergrundbild definiert. Nur ein Button tanzt aus der Reihe, er hat nur den On-Status, also genauso wie in o.g. Vorbild. Das brachte mich auf eine alternative Lösung: Ich habe jenem Button ebenfalls ein Off-Bild spendiert – allerdings nur ein 1-Pixel-Transparent-Gif. Dieser eine Pixel genügt, um den Effekt im IE5 auszuschalten.

Heureka.

Double-Click-Shutdown erzeugen:

• irgendwo auf dem Desktop mit der rechten Maustaste das Kontextmenü aufrufen und unter “Neu” die “Verknüpfung” auswählen
• als “Speicherort des Elementes” die shutdown.exe suchen, welche mit hoher Wahrscheinlichkeit unter C:\Windows\System32 zu finden sein sollte
• noch ein Leerzeichen und folgendes anfügen: -s -t 00
• “weiter” klicken, einen Namen für die Verknüpfung vergeben und mit “ok” quittieren
• über das Kontextmenü zu dieser Verknüpfung (rechte Maustaste) lässt sich unter dem Reiter “Verknüpfung” ein “anderes Symbol” aufrufen; die Meldung mit “ok” quittieren, ein hübsches Symbol per Doppelklick auswählen und ebenfalls mit “ok” quittieren

Double-Click-Reboot erzeugen:

• irgendwo auf dem Desktop mit der rechten Maustaste das Kontextmenü aufrufen und unter “Neu” die “Verknüpfung” auswählen
• als “Speicherort des Elementes” die shutdown.exe suchen, welche mit hoher Wahrscheinlichkeit unter C:\Windows\System32 zu finden sein sollte
• noch ein Leerzeichen und folgendes anfügen: -r -t 00
• “weiter” klicken, einen Namen für die Verknüpfung vergeben und mit “ok” quittieren
• über das Kontextmenü zu dieser Verknüpfung (rechte Maustaste) lässt sich unter dem Reiter “Verknüpfung” ein “anderes Symbol” aufrufen; die Meldung mit “ok” quittieren, ein hübsches Symbol per Doppelklick auswählen und ebenfalls mit “ok” quittieren

Ab sofort fährt der Rechner runter oder startet neu, wenn diese Verknüpfungen doppelgeklickt wurden. Probiert es aus.

1. temp.bild = IMAGE
2. temp.bild {
3. file.import.field = media
4. file.import = uploads/media/
5. file.import.listNum = 0
6. file.width = 170
7. file.height = 400
8. alttext = TEXT
9. alttext.field = subtitle//title
10. }

1. Wird ein Bildobjekt angelegt, 3. dessen Daten aus dem Feld “media” der aktuellen Seite entnommen werden. 4. Die Datei selber wird im Verzeichnis /uploads/media vorgehalten. 5. Das Bild soll das erste im Feld “media” verzeichnete Bild sein. 6.-7. Es können feste Maße für die Bilddatei vorgegeben werden. 8.-9. Der Inhalt des alt-Tags (der ebenfalls für das title-Tag verwendet wird, wenn wir nichts anderes vorgeben, und umgekehrt) wird dem Feld “subtitle” der aktuellen Seite entnommen; wenn dies nichts enthält, wird “title” verwendet.

Jetzt wird das temporär definierte IMAGE-Objekt  noch in einen Platzhalter des Templates kopiert:

1. marks.MEINBILD < temp.bild

Voraussetzung für die Verwendung des Bildes ist, dass die Seiten, denen dieses Template zu Grunde liegt, vom Typ “erweitert” sind. Dann legt man das gewünschte Bild auf jeder Seite mit Seitentitel bearbeiten >> Dateien an (per Upload oder Auswahl aus vorhandenen Bildern) und achtet darauf, dass es die erste hier verzeichnete Datei ist.