HTML5 in TYPO3 4.7

HTML5
in TYPO3 v4

HTML5 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.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

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 Doktype

HTML5 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-Styles
Introduction Package 4.5 vs. 4.7
• Header-Element:

• Text m. Bild:

HTML5 in TYPO3 4.7 3/31/2012 10

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

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

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

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

CSS Styled Content

HTML5 in TYPO3 4.7 3/31/2012 15

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

CSS Styled Content
CE Menü / Sitemap

HTML5 in TYPO3 4.7 3/31/2012 17

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

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

<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 HTML5

HTML5 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 Flexform

HTML5 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

Weitere ähnliche Inhalte

Andere mochten auch

Ähnlich wie HTML5 in TYPO3 4.7

Mehr von Steffen Ritter

HTML5 in TYPO3 4.7