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 Front...
HTML5• Working Draft RC• Nachfolger XHTML 1.1 + HTML4• Nicht mehr XML basiert• Fördert Semantik• Bessere User-Interfaces• ...
HTML5 Doctype               Standard                        XML basiert<!doctype html>                     <?xml version="...
HTML5 in TYPO3             Historie und Stand bis 4.7• Page-Renderer Unterstützung seit Mai 2010    o   Keine optimale Unt...
HTML5 in TYPO3                    Doktype konfigurieren              vor TYPO3 4.7                        ab TYPO3 4.7conf...
HTML5 in TYPO3 Kompatibilität mit alten Browsern• Alle bekannten Browser stellen Inhalte in HTML5 dar• Im Zweifel Fallback...
CSS Styled Content                Angepasstes Rendering bei HTML5 DoktypeHTML5 in TYPO3 4.7                               ...
CSS Styled Content• Grundlegende Überarbeitung• Schwerpunkt: Barrierefreiheit• Für alle Doc-Types:    o Inline-CSS entfern...
CSS Styled Content                      Keine Inline-StylesIntroduction Package 4.5 vs. 4.7• Header-Element:• Text m. Bild...
CSS Styled Content                       ÜberschriftenNeue Struktur-Elemente in HTML5• <header> - Kopf-Information für fol...
CSS Styled Content                         ÜberschriftenUmsetzung in TYPO3•     <header> - Anstatt <div>•     <hgroup> - W...
CSS Styled Content                      Bilder & Text mit BildNeue Elemente in HTML5• <figure> -- Gruppierungselement –   ...
CSS Styled Content                         Bilder & Text mit BildUmsetzung in TYPO3•     Keine automatische Erkennung <fig...
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...
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 // -Spaci...
CSS Styled Content                      Datei-LinksElemente in HTML5     ---Accessibility-Probleme• Tabelle• fehlende Alt ...
<section> / <article>          Wichtige Struktur-Elemente• <section> -- für z.B. Spalten, anstatt <div>• <article> -- Logi...
Media-Element                     <audio> und <video> in HTML5HTML5 in TYPO3 4.7                                  3/31/201...
Media-Element                          Audio und Video•     Neue Elemente in HTML5•     Medien ohne Browserplugin•     Att...
Media-Element                      Hilfestellung: VideoJS• VideoJS: Open Source Software• Erkennt Browser-Möglichkeiten• B...
Media-Element                Hilfestellung: FlowPlayer•     Flash-basiert Video-Player•     JS Wrapper•     implementiert ...
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-Attrib...
Weitere Sys-Extensions                felogin, indexed_search• felogin    o Keine gesonderte Anpassungen• Indexed_search  ...
Nächste SlideShare
Wird geladen in …5
×

HTML5 in TYPO3 4.7

17.980 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie
0 Kommentare
6 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
17.980
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
52
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
6
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

HTML5 in TYPO3 4.7

  1. 1. HTML5 in TYPO3 v4HTML5 in TYPO3 4.7 3/31/2012 1
  2. 2. 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
  3. 3. 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
  4. 4. 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
  5. 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. 6. 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
  7. 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. 8. CSS Styled Content Angepasstes Rendering bei HTML5 DoktypeHTML5 in TYPO3 4.7 3/31/2012 8
  9. 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. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. CSS Styled Content Bilder & Text mit BildHTML5 in TYPO3 4.7 3/31/2012 15
  16. 16. 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
  17. 17. CSS Styled Content CE Menü / SitemapHTML5 in TYPO3 4.7 3/31/2012 17
  18. 18. 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
  19. 19. 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
  20. 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. 21. Media-Element <audio> und <video> in HTML5HTML5 in TYPO3 4.7 3/31/2012 21
  22. 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. 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. 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. 25. Media Element erweiterte FlexformHTML5 in TYPO3 4.7 3/31/2012 25
  26. 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. 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

×