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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie HTML5 in TYPO3 4.7

Ähnlich wie HTML5 in TYPO3 4.7 (20)

HTML5 in TYPO3 4.7