HTML5 in TYPO3 4.7

HTML5 in TYPO3 v4HTML5 in TYPO3 4.7 3/31/2012 1

HTML 5 in TYPO3 v4 Agenda• HTML5 Einführung• HTML5 in TYPO3 v4 – Historie• HTML5 Doktype im Frontend• CSS Styled Content mit Doktype HTML5• <section> / <article>• Media-Element (<video>/<audio>)• Form-Element• System-Extensions HTML5 in TYPO3 4.7 3/31/2012 2

HTML5• Working Draft RC• Nachfolger XHTML 1.1 + HTML4• Nicht mehr XML basiert• Fördert Semantik• Bessere User-Interfaces• Verwandte Standards WAI-ARIA• breite Browser-Unterstützung HTML5 in TYPO3 4.7 3/31/2012 3

HTML5 Doctype Standard XML basiert<!doctype html> <?xml version="1.0" encoding="UTF-8"?><html> <html xmlns="http://…/xhtml"><head> <head> <meta charset="UTF-8"> <title>Example</title> <title>Example</title></head> </head><body> <body> <p>Example paragraph</p> <p>Example paragraph</p></body> </body></html> </html> Explizit nicht empfohlen! HTML5 in TYPO3 4.7 3/31/2012 4

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

HTML5 in TYPO3 Doktype konfigurieren vor TYPO3 4.7 ab TYPO3 4.7config { 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

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 =  external = 1 excludeFromConcatenation = 1 disableCompression = 1 } } HTML5 in TYPO3 4.7 3/31/2012 7

CSS Styled Content Angepasstes Rendering bei HTML5 DoktypeHTML5 in TYPO3 4.7 3/31/2012 8

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

CSS Styled Content Keine Inline-StylesIntroduction Package 4.5 vs. 4.7• Header-Element:• Text m. Bild: HTML5 in TYPO3 4.7 3/31/2012 10

CSS Styled Content ÜberschriftenNeue 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

CSS Styled Content ÜberschriftenUmsetzung 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

CSS Styled Content Bilder & Text mit BildNeue 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

CSS Styled Content Bilder & Text mit BildUmsetzung 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

CSS Styled Content Bilder & Text mit BildHTML5 in TYPO3 4.7 3/31/2012 15

CSS Styled Content CE Menü / SitemapNeue Elemente in HTML5• <nav> -- Container-Element Markiert eine Menge von zentralen Nav.-punktenAccessibility 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

CSS Styled Content CE Menü / SitemapHTML5 in TYPO3 4.7 3/31/2012 17

CSS Styled Content TabellenElemente in HTML5• Summary Attribut ist entfernt• Cell-Padding // -Spacing Attribute entfernt• Border-Attribut Semantik-Änderung: HTML4: Rahmenbreite, HTML5: Layout-Tabelle ja/nenUmsetzung in TYPO3• Summary-Attribut ohne Alternative entfernt• Optik über CSS HTML5 in TYPO3 4.7 3/31/2012 18

CSS Styled Content Datei-LinksElemente in HTML5 ---Accessibility-Probleme• Tabelle• fehlende Alt und Title-Attribute• kein Target einstellbar HTML5 in TYPO3 4.7 3/31/2012 19

<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

Media-Element <audio> und <video> in HTML5HTML5 in TYPO3 4.7 3/31/2012 21

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

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

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

Media Element erweiterte FlexformHTML5 in TYPO3 4.7 3/31/2012 25

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

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

HTML5 in TYPO3 4.7

by Steffen Ritter

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 41

Statistics

HTML5 in TYPO3 4.7 Presentation Transcript

http://raumschmiere.de	33
http://stefansajok.de	8