Your SlideShare is downloading. ×
0
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 in TYPO3 4.7

16,945

Published on

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

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.

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
16,945
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5 in TYPO3 v4HTML5 in TYPO3 4.7 3/31/2012 1
  • 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. 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. 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. 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.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. 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 DoktypeHTML5 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-StylesIntroduction Package 4.5 vs. 4.7• Header-Element:• Text m. Bild: HTML5 in TYPO3 4.7 3/31/2012 10
  • 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. 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. 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. 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. CSS Styled Content Bilder & Text mit BildHTML5 in TYPO3 4.7 3/31/2012 15
  • 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. CSS Styled Content CE Menü / SitemapHTML5 in TYPO3 4.7 3/31/2012 17
  • 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. 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. <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 HTML5HTML5 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 FlexformHTML5 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

×