SlideShare uma empresa Scribd logo
1 de 21
Baixar para ler offline
Captions & Co.
               Accessible Video




http://www.flickr.com/photos/span112/2885030475/
Über
mich

       ★ Jo Spelbrink
       ★ Multimedia Design / Film / Accessibility
       ★ Gründungsmitglied
                              zugang für alle

       ★ Mitglied Freak-Verein zur Förderung
         behinderter Menschen in den Medien
Standards
WCAG 2.0
   ★ Vier Prinzipien:
     ★ wahrnehmbar
     ★ bedienbar
     ★ verständlich
     ★ robust
   ★ www.w3.org/Translations/WCAG20-de/
Multimedia
        =
Text, Bild, Ton und Video
Barrierefreies Web
            =
Barrierefreies Multimedia
            =
Interdisziplinärer Workflow
Gestaltung




                     ik
                     hn
In
   h




                    c
  alt




                 Te
Inhalt
Barrierefreie Videos


★ Video
★ Untertiteltexte
★ ÖGS-Videos (AAA)
Gestaltung
Untertitel
★ Schrift (sans serif - Kerning/Letterspace)
★ Kontur/Hintergrund
★ Position (Offset)


★ Player-Skin
★ verständliche Bedienungselemente
Technik
Multimedia Workflow
★ Player
  ★   JW Player (www.longtailvideo.com)
  ★   Flow Player (www.flowplayer.org)

★ Untertiteldatei (zB SMIL, Timed Text, SRT, DXFP)
★ Javascript API
★ zugängliche Bedienung (HTML-Bedienelemente
  via JS-API)
Gestaltung




                     ik
                     hn
In
   h




                    c
  alt




                 Te
Untertitel (UT)
Formen & Anforderungen
★ Offene UT (Open Captions)
★ Geschlossene UT (Closed Captions)


★ synchron
★ äquivalent
★ zugänglich
Untertitel (UT)
Datei-Formate
★ Timed Text (W3C) - DFXP (Distribution
  Format Exchange Profile) >> zB Flash
★ SMIL (Synchronized Multimedia
  Integration Language)/QTtext >>
  Quicktime
★ ASX/ASAMI >> Windows Media Player
★ SRT (SubRip) >> DVD
Untertitel (UT)
Editoren
★ Online

★ www.subtitle-horse.org

★ Offline

★ Magpie2 (Win/Mac)
  http://ncam.wgbh.org/

★ Jubler (Win/Mac/Linux - JRE)
  http://www.jubler.org

★ SubBits subtitler (Win/Mac) mit Support für
  Schnittprogramme (Avid/Final Cut Pro)
   http://www.videotoolshed.com/product/12/subbits-subtitler
Untertitel (UT)
WCAG 2.0

★ Richtlinie 1.2
  Zeitbasierte Medien:
  Stellen Sie Alternativen für zeitbasierte
  Medien zur Verfügung.

  http://www.w3.org/Translations/WCAG20-de/#media-equiv
Untertitel (UT)
WCAG 2.0

★ Medienalternative für Text:
  (SEO für Video/Audioinhalte)
★ Transkription (äquivalent)
  ★ trankskribieren
  ★ überarbeiten (zeitaufwändigster
    Schritt)
Untertitel (UT)
Erfahrungen
  ★ Workflow (Arbeitsschritte) gut überlegen und
    nachhaltig anlegen (Qualitätssicherung)
  ★ „Nicht verkürzen!“ ( = nicht synchron und nicht
    äquivalent)
  ★ UT im Video schlecht positioniert
    (Überlagerungen)
  ★ Erste Zeile der UT soll immer gleich bleiben
    (bessere Lesbarkeit)
Untertitel (UT)
Erfahrungen

  ★ Hinweise von inhaltlich signifikanten
    Tönen und Geräuschen in Klammer
  ★ Schrift, Konstrast und Kerning
    (Letterspace) >> Lesbarkeit!
  ★ Checklistensyndrom (WCAG 2.0)
    >> unkreativ und innovationsfeindlich!
Gestaltung




                     ik
                     hn
In
   h




                    c
  alt




                 Te
Workflow
„Klassische“ Herangehensweise

  ★ BF-Szene bisher sehr technisch
  ★ Wenig inhaltliche Kreativität
  ★ Checklistensyndrom!
  ★ Barrierefreie Websites mit Videos
    wirken oft wie „Flickenteppiche“
Workflow
Morgen? :)
  ★ Innovative Ansätze aus der BF-Szene
  ★ Inhaltliche, gestalterische und
    technische Kreativität
  ★ Kooperativer und ganzheitlicher
    Workflow
  ★ Alles greift ineinander und funktioniert
    nachhaltig sowie multidimensional!
http://www.flickr.com/photos/markjsebastian/2948985814/




   Danke! :)

                                Kontakt:

             js@jooli.at
www.twitter.com/joville

Mais conteúdo relacionado

Semelhante a Vortrag accessible media Stammtisch "UT"

Dnug 112014 modernization_openn_ntf_ersatzsession
Dnug 112014 modernization_openn_ntf_ersatzsessionDnug 112014 modernization_openn_ntf_ersatzsession
Dnug 112014 modernization_openn_ntf_ersatzsessionOliver Busse
 
Hypervideo, HTML5, Popcorn: Wie Videos Web-Bürger erster Klasse werden
Hypervideo, HTML5, Popcorn: Wie Videos Web-Bürger erster Klasse werdenHypervideo, HTML5, Popcorn: Wie Videos Web-Bürger erster Klasse werden
Hypervideo, HTML5, Popcorn: Wie Videos Web-Bürger erster Klasse werdenJulius Tröger
 
Webinare in der Erwachsenenbildung
Webinare in der ErwachsenenbildungWebinare in der Erwachsenenbildung
Webinare in der Erwachsenenbildungdavidroethler
 
Einsatzgebiete und Vorgehensweise mit Flash Catalyst
Einsatzgebiete und Vorgehensweise mit Flash CatalystEinsatzgebiete und Vorgehensweise mit Flash Catalyst
Einsatzgebiete und Vorgehensweise mit Flash CatalystDigicomp Academy AG
 
Wo steht HTML5: Überblick, Möglichkeiten, Zukunft
Wo steht HTML5: Überblick, Möglichkeiten, ZukunftWo steht HTML5: Überblick, Möglichkeiten, Zukunft
Wo steht HTML5: Überblick, Möglichkeiten, ZukunftDigicomp Academy AG
 
Präsentation Screencasts 2.11.11
Präsentation Screencasts 2.11.11Präsentation Screencasts 2.11.11
Präsentation Screencasts 2.11.11primaErma
 
How-to Video heute: im Web, mobile und überhaupt
How-to Video heute: im Web, mobile und überhauptHow-to Video heute: im Web, mobile und überhaupt
How-to Video heute: im Web, mobile und überhauptBokowsky + Laymann GmbH
 
Microsoft und die Open Source Community - Leaving the death star behind
Microsoft und die Open Source Community - Leaving the death star behindMicrosoft und die Open Source Community - Leaving the death star behind
Microsoft und die Open Source Community - Leaving the death star behindChristian Heilmann
 
Webseiten sind keine Gemälde
Webseiten sind keine GemäldeWebseiten sind keine Gemälde
Webseiten sind keine GemäldeJens Grochtdreis
 
Am Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag EditionAm Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag EditionJens Grochtdreis
 
DNUG ak-anwendungsentwicklung.18042011
DNUG ak-anwendungsentwicklung.18042011DNUG ak-anwendungsentwicklung.18042011
DNUG ak-anwendungsentwicklung.18042011Ulrich Krause
 
The Dirac Video CoDec
The Dirac Video CoDecThe Dirac Video CoDec
The Dirac Video CoDecMarc Seeger
 
Tipps & Tricks für Erweiterungsentwickler - JoomlaDay Deutschland 2014 - Köln
Tipps & Tricks für Erweiterungsentwickler - JoomlaDay Deutschland 2014 - KölnTipps & Tricks für Erweiterungsentwickler - JoomlaDay Deutschland 2014 - Köln
Tipps & Tricks für Erweiterungsentwickler - JoomlaDay Deutschland 2014 - KölnViktor Vogel
 
HTML5 Video vs. Flash Video [paper]
HTML5 Video vs. Flash Video [paper]HTML5 Video vs. Flash Video [paper]
HTML5 Video vs. Flash Video [paper]Jakob
 
Screencasts/Videotutorials erstellen 2019
Screencasts/Videotutorials erstellen 2019Screencasts/Videotutorials erstellen 2019
Screencasts/Videotutorials erstellen 2019Wolfgang Wagner
 
WordPress sprachfähig machen - Lokalisierung Kür oder Krampf? - WordCamp Deut...
WordPress sprachfähig machen - Lokalisierung Kür oder Krampf? - WordCamp Deut...WordPress sprachfähig machen - Lokalisierung Kür oder Krampf? - WordCamp Deut...
WordPress sprachfähig machen - Lokalisierung Kür oder Krampf? - WordCamp Deut...David Decker
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Noël Bossart
 
Online-Events organisieren und durchführen am Beispiel Adobe Connect
Online-Events organisieren und durchführen am Beispiel Adobe ConnectOnline-Events organisieren und durchführen am Beispiel Adobe Connect
Online-Events organisieren und durchführen am Beispiel Adobe Connecte-teaching.org
 

Semelhante a Vortrag accessible media Stammtisch "UT" (20)

Dnug 112014 modernization_openn_ntf_ersatzsession
Dnug 112014 modernization_openn_ntf_ersatzsessionDnug 112014 modernization_openn_ntf_ersatzsession
Dnug 112014 modernization_openn_ntf_ersatzsession
 
Hypervideo, HTML5, Popcorn: Wie Videos Web-Bürger erster Klasse werden
Hypervideo, HTML5, Popcorn: Wie Videos Web-Bürger erster Klasse werdenHypervideo, HTML5, Popcorn: Wie Videos Web-Bürger erster Klasse werden
Hypervideo, HTML5, Popcorn: Wie Videos Web-Bürger erster Klasse werden
 
Webinare in der Erwachsenenbildung
Webinare in der ErwachsenenbildungWebinare in der Erwachsenenbildung
Webinare in der Erwachsenenbildung
 
Einsatzgebiete und Vorgehensweise mit Flash Catalyst
Einsatzgebiete und Vorgehensweise mit Flash CatalystEinsatzgebiete und Vorgehensweise mit Flash Catalyst
Einsatzgebiete und Vorgehensweise mit Flash Catalyst
 
Wo steht HTML5: Überblick, Möglichkeiten, Zukunft
Wo steht HTML5: Überblick, Möglichkeiten, ZukunftWo steht HTML5: Überblick, Möglichkeiten, Zukunft
Wo steht HTML5: Überblick, Möglichkeiten, Zukunft
 
Frontend Best Practices
Frontend Best PracticesFrontend Best Practices
Frontend Best Practices
 
Präsentation Screencasts 2.11.11
Präsentation Screencasts 2.11.11Präsentation Screencasts 2.11.11
Präsentation Screencasts 2.11.11
 
How-to Video heute: im Web, mobile und überhaupt
How-to Video heute: im Web, mobile und überhauptHow-to Video heute: im Web, mobile und überhaupt
How-to Video heute: im Web, mobile und überhaupt
 
Microsoft und die Open Source Community - Leaving the death star behind
Microsoft und die Open Source Community - Leaving the death star behindMicrosoft und die Open Source Community - Leaving the death star behind
Microsoft und die Open Source Community - Leaving the death star behind
 
Webseiten sind keine Gemälde
Webseiten sind keine GemäldeWebseiten sind keine Gemälde
Webseiten sind keine Gemälde
 
Am Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag EditionAm Ende ist doch alles HTML - 2012 - Webmontag Edition
Am Ende ist doch alles HTML - 2012 - Webmontag Edition
 
Lexikon Der Videoformate
Lexikon Der VideoformateLexikon Der Videoformate
Lexikon Der Videoformate
 
DNUG ak-anwendungsentwicklung.18042011
DNUG ak-anwendungsentwicklung.18042011DNUG ak-anwendungsentwicklung.18042011
DNUG ak-anwendungsentwicklung.18042011
 
The Dirac Video CoDec
The Dirac Video CoDecThe Dirac Video CoDec
The Dirac Video CoDec
 
Tipps & Tricks für Erweiterungsentwickler - JoomlaDay Deutschland 2014 - Köln
Tipps & Tricks für Erweiterungsentwickler - JoomlaDay Deutschland 2014 - KölnTipps & Tricks für Erweiterungsentwickler - JoomlaDay Deutschland 2014 - Köln
Tipps & Tricks für Erweiterungsentwickler - JoomlaDay Deutschland 2014 - Köln
 
HTML5 Video vs. Flash Video [paper]
HTML5 Video vs. Flash Video [paper]HTML5 Video vs. Flash Video [paper]
HTML5 Video vs. Flash Video [paper]
 
Screencasts/Videotutorials erstellen 2019
Screencasts/Videotutorials erstellen 2019Screencasts/Videotutorials erstellen 2019
Screencasts/Videotutorials erstellen 2019
 
WordPress sprachfähig machen - Lokalisierung Kür oder Krampf? - WordCamp Deut...
WordPress sprachfähig machen - Lokalisierung Kür oder Krampf? - WordCamp Deut...WordPress sprachfähig machen - Lokalisierung Kür oder Krampf? - WordCamp Deut...
WordPress sprachfähig machen - Lokalisierung Kür oder Krampf? - WordCamp Deut...
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
 
Online-Events organisieren und durchführen am Beispiel Adobe Connect
Online-Events organisieren und durchführen am Beispiel Adobe ConnectOnline-Events organisieren und durchführen am Beispiel Adobe Connect
Online-Events organisieren und durchführen am Beispiel Adobe Connect
 

Vortrag accessible media Stammtisch "UT"

  • 1. Captions & Co. Accessible Video http://www.flickr.com/photos/span112/2885030475/
  • 2. Über mich ★ Jo Spelbrink ★ Multimedia Design / Film / Accessibility ★ Gründungsmitglied zugang für alle ★ Mitglied Freak-Verein zur Förderung behinderter Menschen in den Medien
  • 3. Standards WCAG 2.0 ★ Vier Prinzipien: ★ wahrnehmbar ★ bedienbar ★ verständlich ★ robust ★ www.w3.org/Translations/WCAG20-de/
  • 4. Multimedia = Text, Bild, Ton und Video
  • 5. Barrierefreies Web = Barrierefreies Multimedia = Interdisziplinärer Workflow
  • 6. Gestaltung ik hn In h c alt Te
  • 7. Inhalt Barrierefreie Videos ★ Video ★ Untertiteltexte ★ ÖGS-Videos (AAA)
  • 8. Gestaltung Untertitel ★ Schrift (sans serif - Kerning/Letterspace) ★ Kontur/Hintergrund ★ Position (Offset) ★ Player-Skin ★ verständliche Bedienungselemente
  • 9. Technik Multimedia Workflow ★ Player ★ JW Player (www.longtailvideo.com) ★ Flow Player (www.flowplayer.org) ★ Untertiteldatei (zB SMIL, Timed Text, SRT, DXFP) ★ Javascript API ★ zugängliche Bedienung (HTML-Bedienelemente via JS-API)
  • 10. Gestaltung ik hn In h c alt Te
  • 11. Untertitel (UT) Formen & Anforderungen ★ Offene UT (Open Captions) ★ Geschlossene UT (Closed Captions) ★ synchron ★ äquivalent ★ zugänglich
  • 12. Untertitel (UT) Datei-Formate ★ Timed Text (W3C) - DFXP (Distribution Format Exchange Profile) >> zB Flash ★ SMIL (Synchronized Multimedia Integration Language)/QTtext >> Quicktime ★ ASX/ASAMI >> Windows Media Player ★ SRT (SubRip) >> DVD
  • 13. Untertitel (UT) Editoren ★ Online ★ www.subtitle-horse.org ★ Offline ★ Magpie2 (Win/Mac) http://ncam.wgbh.org/ ★ Jubler (Win/Mac/Linux - JRE) http://www.jubler.org ★ SubBits subtitler (Win/Mac) mit Support für Schnittprogramme (Avid/Final Cut Pro) http://www.videotoolshed.com/product/12/subbits-subtitler
  • 14. Untertitel (UT) WCAG 2.0 ★ Richtlinie 1.2 Zeitbasierte Medien: Stellen Sie Alternativen für zeitbasierte Medien zur Verfügung. http://www.w3.org/Translations/WCAG20-de/#media-equiv
  • 15. Untertitel (UT) WCAG 2.0 ★ Medienalternative für Text: (SEO für Video/Audioinhalte) ★ Transkription (äquivalent) ★ trankskribieren ★ überarbeiten (zeitaufwändigster Schritt)
  • 16. Untertitel (UT) Erfahrungen ★ Workflow (Arbeitsschritte) gut überlegen und nachhaltig anlegen (Qualitätssicherung) ★ „Nicht verkürzen!“ ( = nicht synchron und nicht äquivalent) ★ UT im Video schlecht positioniert (Überlagerungen) ★ Erste Zeile der UT soll immer gleich bleiben (bessere Lesbarkeit)
  • 17. Untertitel (UT) Erfahrungen ★ Hinweise von inhaltlich signifikanten Tönen und Geräuschen in Klammer ★ Schrift, Konstrast und Kerning (Letterspace) >> Lesbarkeit! ★ Checklistensyndrom (WCAG 2.0) >> unkreativ und innovationsfeindlich!
  • 18. Gestaltung ik hn In h c alt Te
  • 19. Workflow „Klassische“ Herangehensweise ★ BF-Szene bisher sehr technisch ★ Wenig inhaltliche Kreativität ★ Checklistensyndrom! ★ Barrierefreie Websites mit Videos wirken oft wie „Flickenteppiche“
  • 20. Workflow Morgen? :) ★ Innovative Ansätze aus der BF-Szene ★ Inhaltliche, gestalterische und technische Kreativität ★ Kooperativer und ganzheitlicher Workflow ★ Alles greift ineinander und funktioniert nachhaltig sowie multidimensional!
  • 21. http://www.flickr.com/photos/markjsebastian/2948985814/ Danke! :) Kontakt: js@jooli.at www.twitter.com/joville