Darstellungen der Änderungen im PageRenderer, TypoScript und CSS Styled Content Ausgabe im Zuge der Anpassungen für ein besseres und barrierefreieres Rendering von Standard-Inhalten in TYPO3 4.7.
Ab TYPO3 version 4.7 gibt CSS Styled Content im Falle von HTML5 als Frontend-Doktype spezielle HTML5 Ausgabe aus, die in Hinblick auf einen barrierearmen Quellcode optimiert wurde. Die Details zu den Änderungen werden im einzelnen vorgestellt.
5. HTML5 in TYPO3
Historie und Stand bis 4.7
• Page-Renderer Unterstützung seit Mai 2010
o Keine optimale Unterstützung
o Fehler bei der Doktype-Generierung oder Verlust von Funktionalität
• HTML5 Backend Standard Doktype seit Oktober 2010
• Kleinere Kompabilitäts-Probleme beim Content Rendering in
2011behoben
• HTML5 Video-Player als Extension verfügbar
• HTML5 im Frontend Möglich: Aber Arbeit!
HTML5 in TYPO3 4.7 3/31/2012 5
6. HTML5 in TYPO3
Doktype konfigurieren
vor TYPO3 4.7 ab TYPO3 4.7
config { config {
doctype = html5 doctype = html5
xmlprologue = none xmlprologue = none
htmlTag_setParams = none }
xhtml_cleaning = none
}
• <html>-Tag immer mit xmlns!
• xmlprologue != none
• htmlTag_lang ohne Effekt XHTML5 Rendering (valid)
• htmlTag_dir ohne Effekt
HTML5 in TYPO3 4.7 3/31/2012 6
7. HTML5 in TYPO3
Kompatibilität mit alten Browsern
• Alle bekannten Browser stellen Inhalte in HTML5 dar
• Im Zweifel Fallback auf „altes Verhalten“
o <nav>, <section> …: <div>
o Neue Form-Elemente: Normale Textfelder
• CSS Styles werden nicht immer akzeptiert:
o Lösung: Tag VOR dem Rendern der Seite dem Browser bekannt machen
o page.includeJSlibs {
html5shiv = http://html5shiv.googlecode.com/svn/trunk/html5.js
html5shiv {
allWrap = <!--[if lt IE 9]>|<![endif]-->
external = 1
excludeFromConcatenation = 1
disableCompression = 1
}
}
HTML5 in TYPO3 4.7 3/31/2012 7
8. CSS Styled Content
Angepasstes Rendering bei HTML5 Doktype
HTML5 in TYPO3 4.7 3/31/2012 8
9. CSS Styled Content
• Grundlegende Überarbeitung
• Schwerpunkt: Barrierefreiheit
• Für alle Doc-Types:
o Inline-CSS entfernt (margins, images)
• CSS erzeugt
• Hash erzeugt, Hash als Klassenname
• Klassenname an Element
• CSS-Klasse in den Page-Renderer
o Ungültige Attribute (bgColor) im Rendering entfernt
o Target Attribute nur wenn explizit gesetzt
o File-Link Icons konfigurierbar
o Tags wie <br> und <img> Doctype abhängig
HTML5 in TYPO3 4.7 3/31/2012 9
10. CSS Styled Content
Keine Inline-Styles
Introduction Package 4.5 vs. 4.7
• Header-Element:
• Text m. Bild:
HTML5 in TYPO3 4.7 3/31/2012 10
11. CSS Styled Content
Überschriften
Neue Struktur-Elemente in HTML5
• <header> - Kopf-Information für folgenden Content
o Einführende Information
o Navigations Hilfen
o Datum, Autor usw…
• <hgroup> - Gruppiert mehrere h1-h6
o Jede Überschrift-Typ nur einmal
o Benutzt für Titel und Untertitel
o <hgroup> kann in <header> vorkommen
HTML5 in TYPO3 4.7 3/31/2012 11
12. CSS Styled Content
Überschriften
Umsetzung in TYPO3
• <header> - Anstatt <div>
• <hgroup> - Wenn Untertitel ausgefüllt
• Untertitel als <hX> – nicht mehr <p>
• Datum <time datetime=„Y-m-d“>|</time>
<header class="csc-header csc-header-n1">
<hgroup>
<h1 class="csc-firstHeader">Test-Überschrift</h1>
<h2>Test-Untertitel</h2>
</hgroup>
<p class="csc-header-date"><time datetime="2012-03-14">March 14,
2012</time></p>
</header>
HTML5 in TYPO3 4.7 3/31/2012 12
13. CSS Styled Content
Bilder & Text mit Bild
Neue Elemente in HTML5
• <figure> -- Gruppierungselement –
o <aside> für Grafiken und Bilder, Illustrationen
o wenn nötig für Text-Verständnis
o auch <blockquote>, Code oder ähnliches
• <figcaption> - Untertitel/Erklärung/Beschreibung
o Meist: Bilduntertitel
o Nur einmal pro <figure>
o Erstes oder letztes Element der <figure>
• Londesc Attribut entfernt
• Einschränkungen
o <figure> nur neben normalem Inhalt
o <figure> nur wenn eigenstehendes “Element”
o Inline Bilder keine <figure>
HTML5 in TYPO3 4.7 3/31/2012 13
14. CSS Styled Content
Bilder & Text mit Bild
Umsetzung in TYPO3
• Keine automatische Erkennung <figure> / <aside> / nichts
• alle Grafik-Elemente in „Bild“ / „Text m. Bild“ <figure>
• RTE Bilder ohne <figure>
• longdescURL
o <figcaption> verlinkt
o <img>-Attribut: aria-describedby=„url“
• Mehrere Bilder = mehrere <figure>
• Anordnung (Reihen, Spalten, …): weiterhin <div>
HTML5 in TYPO3 4.7 3/31/2012 14
15. CSS Styled Content
Bilder & Text mit Bild
HTML5 in TYPO3 4.7 3/31/2012 15
16. CSS Styled Content
CE Menü / Sitemap
Neue Elemente in HTML5
• <nav> -- Container-Element
Markiert eine Menge von zentralen Nav.-punkten
Accessibility Anforderungen:
• Skip-Link
• WCAG 2.0 H50: <map title=„Navigation Title“>|</map>
Umsetzung in TYPO3
• <nav> „immer“
• Skip-Link optional
HTML5 in TYPO3 4.7 3/31/2012 16
18. CSS Styled Content
Tabellen
Elemente in HTML5
• Summary Attribut ist entfernt
• Cell-Padding // -Spacing Attribute entfernt
• Border-Attribut Semantik-Änderung:
HTML4: Rahmenbreite,
HTML5: Layout-Tabelle ja/nen
Umsetzung in TYPO3
• Summary-Attribut ohne Alternative entfernt
• Optik über CSS
HTML5 in TYPO3 4.7 3/31/2012 18
19. CSS Styled Content
Datei-Links
Elemente in HTML5
---
Accessibility-Probleme
• Tabelle
• fehlende Alt und Title-Attribute
• kein Target einstellbar
HTML5 in TYPO3 4.7 3/31/2012 19
20. <section> / <article>
Wichtige Struktur-Elemente
• <section> -- für z.B. Spalten, anstatt <div>
• <article> -- Logische Einheiten in einer Section
• Nicht automatisch!
• <article>: 1-x C-Elements
• Aufgabe des Integrators!
• Gov-Package: jedes C-Element <article>
HTML5 in TYPO3 4.7 3/31/2012 20
21. Media-Element
<audio> und <video> in HTML5
HTML5 in TYPO3 4.7 3/31/2012 21
22. Media-Element
Audio und Video
• Neue Elemente in HTML5
• Medien ohne Browserplugin
• Attribute zur Player-Steuerung
• Unterstützung: nur neue Browser
• Konzipiert mit “Accessibility in mind”
• Medienformate: individuell je Browser
• unterschiedliche Quellformate möglich
• Fallback Inhalte
JavaScript nötig für X-Browser Support
HTML5 in TYPO3 4.7 3/31/2012 22
23. Media-Element
Hilfestellung: VideoJS
• VideoJS: Open Source Software
• Erkennt Browser-Möglichkeiten
• Besonders: Element-Events
• Ermöglicht Fallthrough durch verschieden Techniken
HTML5 in TYPO3 4.7 3/31/2012 23
24. Media-Element
Hilfestellung: FlowPlayer
• Flash-basiert Video-Player
• JS Wrapper
• implementiert HTML5 Events
• In VideoJS integrierbar
• Aktuell: Probleme mit Youtube-Videos/ externen
Videos im Media Element
HTML5 in TYPO3 4.7 3/31/2012 24
25. Media Element
erweiterte Flexform
HTML5 in TYPO3 4.7 3/31/2012 25
26. FORM-Element
• Natives Form-Element: keine Veränderungen
• FORM-Extension
o Feldvorbelegungen in HTML: placeholder-Attribut
• Accessibility:
o Form-Elemente geordnet
o Form-Elemente als <ul>
o Anforderungen: <ol>
o Nur in Gov-Package (eine Zeile TS)
HTML5 in TYPO3 4.7 3/31/2012 26
27. Weitere Sys-Extensions
felogin, indexed_search
• felogin
o Keine gesonderte Anpassungen
• Indexed_search
o Klassisches Plugin
• Keine Anpassungen
o Neues Plugin
• Exbase/Fluid
• Template mit HTML5 und nach Accessibility Guidelines
!!! Kein JavaScript im PageBrowser !!!
HTML5 in TYPO3 4.7 3/31/2012 27