Was ich aus den durchweg spannenden und meist auch unterhaltsam präsentierten Vorträgen mitnehmen konnte:

• HTML5 ist je nach Verständnis etwas Verschiedenes. Durch seine Entstehungsgeschichte und Interpretation ist es ein Bündel an Spezifikationen und Techniken, die im Browser angewendet werden (Peter Kröner hat das in mehreren Kreisen dargestellt).
• HTML5 ersetzt nicht HTML 4.01. Es ermöglicht aber den Schritt von der Website als Dokument zur Webapplikation. 
• HTML5-Anwendungen sind aufregend und verbreiten Desktop-Gefühl. Was mich noch mehr beeindruckt: Jenseits von Canvas-Spielereien sind Localstorage und die neuen Formularfelder sehr praktisch – wenn sie denn einmal auf allen Browsern funktionieren.
• HTML5 kann Flash bei der Spieleprogrammierung und für Videos (wahrscheinlich) nicht ersetzen.
• HTML5 ist nicht fertig und wird dauernd aktualisiert.

Mehr Benutzbarkeit durch HTML5

Formulare und Responsive Design sind für mich die Themen, bei denen HTML5 (in seiner weitesten Definition) am meisten punkten kann. Die Vorführung eines Formulars mit HTML5, WAI-ARIA und einem Hauch Javascript durch Marco Zehe zeigte eindrucksvoll, wie viel besser benutzbar im Gegensatz zu konventionellen Formularen ist, wenn man assistive Technologien nutzt. Informationen ber den geforderten Inhalt (z.B. eine E-Mail-Adresse) werden vor der Texteingabe bekannt gegeben, Fehler bei der Eingabe sofort erkannt.

Benutze ich zur Auszeichnung der Formularfelder HTML5-Input-Typen, präsentiert mir der mobile Browser die auf den Feldinhalt optimierte Tastatur (also z.B. mit einem leicht erreichbaren @, wenn eine E-Mail-Adresse eingegeben werden soll).

CSS3 – was kann man schon benutzen?

Sven Wolfermann führte in einer praxisnahen, themenbedingt grenzwertig bunten Präsentation vor, welche CSS3-Eigenschaften heute wirklich schon (auch ohne Vendor-Prefix) verwendet werden können. Leider reichte die Zeit nicht mehr, um CSS-Erweiterungen und Frameworks wie SASS und Compass näher vorzustellen.

Frameworks und Bibliotheken spielten in einigen der Vorträge eine Rolle. Es lohnt sich, hier viele zu testen und das für einen selbst und die Anwendung, die man gerade erstellt, geeignete Bündel zusammenzustellen.

Und Javascript?

Was man gerne vergißt, wenn man mehr auf Serverseite entwickelt: Ohne Javascript geht nichts mehr und muss es auch nicht. Javascript ist auch für barrierefreie Websites nicht mehr der böse Feind. Mathias Schäfer führte vor, wie die Schwächen von Javascript (keine Objektorientierung, in der ersten Planung unorganisiert) durch strukturierte Programmierung ausgeglichen und die Scriptsprache selbst für komplexe Anwendungen jenseits von jQuery genutzt werden kann.

Eine Überraschung bot der Vortrag von Sebastian Golasch: Er stellte Node.js, einen Javascript-Server vor. Der Vorteil von Node.js soll die gute Skalierbarkeit und hohe Geschwindigkeit sein, da die Kommunikation asynchron erfolgt.

Fazit: Rundum war der 28. Multimediatreff anregend und gelungen (incl. obligatorische Pizzaschlacht). Nächstes Jahr soll es wegen der regen Nachfrage eine Neuauflage  mit denselben Themen, aber anderen Vorträgen geben.

Links zur Tagung:

• 28. Multimediatreff – Das Programm
• Patrick H. Laucke, Schöne neue Welt von HTML5
• Sven Wolfermann, CSS3 & Responsive Web
• Matthias Schäfer, Javascript: Von einfachen Scripten zu komplexen Anwendungen
• Marco Zehe, HTML5 und WAI-ARIA, richtig modern barrierefrei entwickeln

1. <link href=“extended.css” rel=“stylesheet” type=“text/css” media=“screen, projection” title=“ambranet Lieblings-Stylesheet” />
2. <link href=“basis.css” rel=“alternate stylesheet” type=“text/css” media=“screen, projection” title=“Linearisierte Darstellung” />
3. <link href=“print.css” rel=“stylesheet” type=“text/css” media=“print” title=”Druckstylesheet” />

Die beiden ersten Stylesheets lassen dem Anwender die Wahl. Im Firefox kann er sich das Standard-Styling oder die einfachere Alternative auswählen. Beide sind durch das title-Attribut griffig beschrieben. Auch das Druck-Stylesheet hat einen title. Soll ja auch nicht arm dastehen.

Dann kommt die Überraschung: Die Druckvorschau erscheint vollständig ohne Styling. Der Validator sagt nichts dazu, die Seite ist also valide. Die Lösung des Problems:

1. <link href=“print.css” rel=“stylesheet” type=“text/css” media=“print” />

Das Print-Stylesheet darf keinen title haben und sollte auch an letzter Stelle stehen, da in einigen Fällen nachfolgende alternative Stylesheets für die Bildschirmausgabe auch nicht dargestellt werden. Der Bug ist zwar bekannt, aber auch in Firefox 2.0 noch nicht behoben.

Besser:

1. ul {list-style-type: none;}
2. li {padding-left: 20px;background-image:url(pics/punkt.gif); background-repeat:no-repeat; background-position: 5px 5px;}

Die Liste wird ohne Punkte angezeigt, die Spiegelstriche als Grafik in das Padding des einzelnen Listenelements verlagert und nach Wunsch positioniert.

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.

/*Farben
dunkelgrau: #3E4850
beige: #BAAE95
hellbraun: #A38F60
apricot: #FCF0E2
apricot-dunkel: #F3CE9F
gruen: #60A46E
hellblau: #8796BA
orange: #E89C40
*/

So kann man schnell mal mit copy-paste eine Farbe übertragen und riskiert keine Tippfehler.

plugin.tx_indexedsearch.templateFile = fileadmin/templates/search.html

Einzige Voraussetzung: TYPO3 3.8 und indexed_search mindestens ab 2.1.3