Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Der wdwjs-Audio-Player auf dem Galaxy S3

Donnerstag, 2. Februar 2017

Ein Screencast meines aktuellsten Audio-Players auf einem Samsung Galaxy S3.
Mehr gibt es dazu eigentlich nicht zu sagen.
Doch: Hier ist die Projektseite: wdwjs_player_of.php


Noch mehr Komfort beim Copy & Paste

Samstag, 3. September 2016

Eine weitere Komfortsteigerung nach dem 1-Klick-Markieren hat Opera im Köcher (derzeit nur in der Developer Branch V. 41 zu bewundern Version 40+):

Screencast: Opera zeigt sofort nach dem Markieren einen Button zum Kopieren (und Suchen).

Sehr pfiffig!

(PS: Der Suchen-Button öffnet übrigens eine Suche nach dem markierten Text mit der Standardsuchmaschine.)


Das Vertical Video Syndrom - und das Rezept dagegen

Mittwoch, 25. Mai 2016

Schnell mal ein Video mit dem Smartphone gedreht. Und weil man Smartphones für gewöhnlich hochkant hält, wird das Video eben auch Hochformat. So lange man das Filmchen nur auf dem Smartphone schaut, ist alles in Ordnung.

Ein typisches Smartphone-Video — hochkant gefilmt.

Was aber, wenn der Film zuhause auf dem Computer, oder gar auf dem Fernseher / Beamer gezeigt werden soll?
weiterlesen…


VPN gegen Geoblocking

Dienstag, 10. Mai 2016

Die Nutzung eines VPN (Virtual Private Network) beim Surfen dient zur Verschleierung der eigenen Identität, indem es einem Server einen anderen als den eigenen Standort vorgaukelt. Eine sinnvolle Nutzung ist das Umgehen von Geoblocking. Geoblocking, das sind nicht nur die unsäglichen, wegen des unendlichen Streits mit der GEMA gesperrten YouTube-Videos. Geoblocking verhindert häufig auch die Nutzung von Streaming-TV am Urlaubsort. Ich bezahle für einen Streaming-Dienst wie Zattoo, MagineTV oder auch SkyGo, und genau dann, wenn ich nicht zuhause vor der Glotze sitze, sondern am Urlaubsort im Ausland mir eine Sendung auf dem Tablet anschauen will, wird der Dienst blockiert.

Ein VPN schafft Abhilfe.
weiterlesen…


Fullscreen Videos auf iPhone automatisch schließen

Sonntag, 3. April 2016

Von YouTube lernen. Ja, das ist möglich.
Doch der Reihe nach:
Das HTML5 <video> Element erzeugt Videos, die auf der Webseite eingebettet sind. Nach dem Betätigen des Startbuttons laufen die Videos innerhalb der Seite.
Nicht so auf dem iPhone. Dort werden alle Videos automatisch und zwangsweise als Vollbild dargestellt. Auf den relativ kleinen Bildschirmen macht das Sinn.
Unschön ist allerdings, dass nach dem Beenden des Videos das Vollbild mit den Bedienungselementen geöffnet bleibt. Man muss also manuell auf den Link "Fertig" oder das Symbol zum Verkleinern rechts unten tippen, um zur aufrufenden Webseite zurückzukehren.
Das ist nervig, und kann irritierend sein. Ein Zustand, der vom Betriebssystem automatisch hergestellt wird, sollte auch automatisch beendet werden, wenn die Voraussetzung nicht mehr gegeben ist.

Dass es auch besser geht, zeigt YouTube. Eingebettete YouTube-Videos werden natürlich auf iPhones ebenfalls als Vollbild dargestellt; aber nach dem Beenden schließt sich das Vollbild automatisch, und die aufrufende Seite wird wieder angezeigt.

Ich hab' mal ein paar Zeilen JavaScript geschrieben, um das meines Erachtens korrekte Verhalten auch bei HTML5 <video> Elementen zu erreichen. Die folgende Funktion bewirkt das automatische Beenden des Vollbildmodus' am Ende des Videos.

function CloseVideo() {
if (navigator.platform.match(/iPhone|iPod|Android/)) {
var e = document.getElementsByTagName('video').length;
for (var i = 0; i <= e; i++) {
document.getElementsByTagName('video')[i].webkitExitFullscreen();
}
}
}

Aufruf der Funktion im <video> Element mit onended=CloseVideo() im <video> Element, also z. B.:
<video controls onended=CloseVideo() ...

Demo z. B. auf der Seite webdesign.weisshart.de/homelink.php


Codesnippets auf Smartphone präsentieren

Sonntag, 27. März 2016

Die korrekte Darstellung von Codesnippets auf dem Desktop muss einigen Forderungen gerecht werden:

  • Zur besseren Lesbarkeit des Codes sollten Einrückungen wie im Editor dargestellt werden.
  • Der Code sollte zur Darstellung nicht umgebrochen werden.
  • Aus diesen beiden Forderungen ergibt sich häufig eine Breite, die über den verfügbaren Raum hinausläuft.
  • Mögliche Lösung: Eine Box, die unabhängig vom restlichen Seiteninhalt gescrollt werden kann.

Erstaunlicherweise funktioniert so eine Lösung sogar auf dem Smartphones, wie folgender Screencast vom iPhone zeigt:

Ab 0:20 wird gezeigt, wie der Kasten mit dem Code mit dem Finger gescrollt werden kann.

Der Code:

Das Codesnippet wird in ein <code> Tag gepackt.
Dazu folgendes CSS:

code {
white-space: pre;
overflow:auto;
display:block;
border:1px dashed;
}


RWD und Lightbox & Co.

Montag, 22. Februar 2016

Präsentationstechniken für Fotos wie Lightbox & Co. sind im Web allgegenwärtig. Diese Lightbox-Skripte haben Responsive Web Design (RWD) quasi eingebaut; das vergrößerte Bild wird nie größer als das Browserfenster. Selbst auf Smartphones nicht.

Alles bestens, sollte man meinen.

02.08.2016: Dieser Artikel trifft für dieses Blog nicht mehr zu. Ich habe Fancybox durch PhotoSwipe ersetzt.

Beileibe nicht: Das Vorschaubild wird auf Smartphones in der Regel die ganze Monitorbreite einnehmen. Das macht Sinn, um den Bildinhalt auf dem kleinen Bildschirm überhaupt zu erkennen. Wenn nun beim Antippen des Vorschaubildes, analog zum Anklicken auf dem Desktop-Monitor, sich ein "Großbild" öffnet, das nicht größer oder gar etwas kleiner als das Vorschaubild ist? Dann ist das Prinzip Lightbox ad absurdum geführt, und der einzige Nutznießer der Mobilfunk-Provider, der — nutzloses — Datenvolumen abrechnen kann.
Das Großbild ist natürlich nicht wirklich kleiner als das Vorschaubild. Es wird lediglich vom Browser verkleinert dargestellt. Das herunter geladene Datenvolumen ist aber unabhängig der angezeigten Größe, und bewegt sich üblicherweise in der Größenordnung mehrere 100 kB bis zu mehreren MB.

Der Screencast vom iPhone zeigt, wie das Vorschaubild sich beim Antippen verkleinert, statt vergrößert.

Abhilfe?

Lightbox und viele Clones, so auch das von mir favorisierte Fancybox, benutzen als HTML-Syntax, um das Vorschaubild mit einem klickbaren Link zum Großbild zu versehen, einen Hyperlink.
Der HTML-Code sieht also prinzipiell so aus:
<a class="box" href="Pfad_zum_Großbild"><img src="Adresse_Vorschaubild" /></a>

An Smartphones sollte nun idealerweise der Link zum Großbild nicht ausgeliefert werden, sondern nur das "nackte" img-Tag:
<img src="Adresse_Vorschaubild" />

Meine Lösung:

Folgendes jQuery-Snippet (nur) an Smartphones ausliefern:
$('a[class="box"]').contents().unwrap();

Dieses Snippet entfernt alle Links der Klasse "box", der Linktext wird zu Text ohne Verlinkung.

Demo:

fritz-weisshart.de/meg_men/
Um den Unterschied zu sehen, die Demoseite auf dem Desktop und mit dem Smartphone aufrufen.

Ja, unwrap() erfordert jQuery. jQuery muss also auf der mobilen Version der Website verfügbar sein.
Und ja, um das Snippet ausschließlich an Smartphones auszuliefern, muss eine Technik zur Erkennung des User Agents installiert sein. Ich verwende http://detectmobilebrowsers.com/


RWD und YouTube einbetten

Montag, 23. November 2015

YouTube Videos einbetten ist nicht schwer. YouTube selbst stellt ja den Code dafür unter "Teilen" - "Einbetten" bereit:
<iframe width="560" height="315" src="https://www.youtube.com/embed/xxx" frameborder="0" allowfullscreen></iframe>
Das Problem dabei: Die hart codierten Abmessungen verbieten sich in einem Responsive Design (RWD). Die maximale Breite ließe sich mit CSS iframe {max-width:100%;} responsive machen. Aber die Höhe? Das für Bilder gebräuchliche height:auto; funktioniert leider nicht.

Die Lösung:

Das iframe wird in ein zusätzliches Div gepackt:

<div class="yt">
<iframe width="560" height="315" src="https://www.youtube.com/embed/xxx" allowfullscreen></iframe>
</div>

und ins CSS:

.yt {
position: relative;
padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
height: 0;
overflow: hidden;
}
 
.yt iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border:none;
}

Danke an A List Apart

Demo:

Nachtrag 24.11.2015

Nein, CSS-Tricks hat sicher nicht bei mir abgeschrieben. Sondern die Sache mit der proportionalen Skalierung von beliebigen Inhalten noch weiter gefasst. (Englisch)


Gebärdensprache - Barrierefreiheit auch für gehörlose Menschen

Freitag, 6. November 2015

Barrierefreie Webseiten — bei diesem Begriff denken die meisten wohl zuerst an Webseiten für blinde Menschen. Aber gehörlose Menschen? Die können doch sehen, und lesen. Für diesen Personenkreis braucht es doch keine speziell barrierefreien Seiten.
Falsch!
Die Muttersprache gehörloser Menschen ist die Gebärdensprache.
Gebärdensprache weist eine eigene Grammatik auf, die sich oft wesentlich von der Grammatik der jeweiligen Schriftsprache unterscheidet.
Schriftsprachen sind für gehörlose Menschen wie Fremdsprachen, die sie erst mühsam erlernen müssen.
Vielen gehörlosen Nutzern fällt es schwer, Schrifttexte im Internet zu verstehen oder zu nutzen, wenn deren Inhalte nicht in Gebärdensprachvideos übersetzt sind.

Leider ist die Übersetzung in Gebärdensprache, sowie die Erstellung eines Gebärdensprachevideos recht aufwendig, und folglich teuer. 1.000,- € für eine Seite mit 300 Wörtern entsprechend ca. 4 Minuten Video sind durchaus üblich.

Das ServiceCenter ÖGS.barrierefrei, ein gemeinnütziger Verein, erstellt Gebärdensprachvideos zu einem Bruchteil der üblichen Kosten. Die Umsetzung ist technisch perfekt.

Ein Demovideo zeigt die Umsetzung mit einem Klick auf das folgende Logo. Das Video beinhaltet ein Kurzportrait von webdesign weisshart. Logo Gebärdensprache

Das Video wird bei ServiceCenter ÖGS.barrierefrei gehostet, die Einbindung in die eigene Website erfolgt ganz einfach durch einen Link.
Alternativ kann das Video aber auch selbst gehostet werden. Das sieht dann so aus.

Die finanzielle und technische Hürde, die ein barrierefreies Angebot auch für gehörlose Menschen häufig verhindert, wurde von ServiceCenter ÖGS.barrierefrei deutlich niedriger gelegt.


Bewegte Bilder

Sonntag, 25. Oktober 2015

Ein Bild sagt mehr als 1000 Worte. Von bewegten Bildern geht darüber hinaus eine starke Faszination aus, sie sind Eye Catcher. In den sozialen Medien — Twitter, Facebook, Vine, Whatsapp & Co — sind kurze Bewegtbildsequenzen — als animated GIF oder Video — seit einiger Zeit trending; und leider häufig auch nervend.
Zur Erstellung dieser Clips gibt und gab es zahllose Werkzeuge. Eines dieser Tools war — Cliplets, hier vorgestellt. Inzwischen wieder verschwunden, wie viele andere ähnliche Lösungen.

Dass das interesse für kurze Clips ungebrochen ist beweist Apple mit Live Fotos, der Möglichkeit, bei der Aufnahme eines Fotos (nicht Videos) direkt einen Mini-Clip zu erstellen. Verfügbar mit der neuesten iPhone Generation 6s und 6s Plus. Und leider auch nur auf diesen Geräten zu betrachten. In der Praxis bedeutet dies, dass man diese Live Fotos nicht veröffentlichen kann. Es sei denn, man benutzt ein zusätzliches Tool. Zum Beispiel Lively (Kostenlos für 3 Exporte, 1,99 € In-App-Kauf für unlimited Exporte). Mit dieser App lassen sich die proprietären Live Fotos als Video oder animated GIF exportieren und versenden / sharen.

Damit das Web wieder ein wenig nerviger wird.

Demo GIF

5,6 MB! — Achtung im Mobilfunknetz mit Datentarif!


Mobiles Design aufgehübscht

Mittwoch, 9. September 2015

Mobile Seiten müssen schlank sein. Aber sie dürfen natürlich gerne auch hübsch sein.
Ich hab' mir vorgenommen, beides gleichzeitig zu realisieren; und zu diesem Zweck eine Slideshow mit Schmuckbildern auf der (mobilen) Startseite eingefügt. Zu sehen, wenn meine Site mit einem Smartphone aufgerufen wird, oder im folgenden Video.

(Bitte jetzt keine Kommentare zur "Schönheit" der Site. Schönheit liegt bekanntlich im Auge des Betrachters.)

Realisiert ist diese Slideshow mit CSS3, also ohne JavaScript. Der CSS-Code ist leider nicht ganz trivial. Hier ein Tutorial.
Aber der Verzicht auf JavaScript, in Verbindung mit optimierten Bildern, macht die Angelegenheit natürlich schlank. Die Startseite kommt immer noch mit ca. 80 kB aus.

PS:
Falls es interessiert, wie das Video, der Screencast vom iPhone, entstanden ist:
Auf dem Mac geht das ohne spezielle Apps, einfach mit dem ohnehin installierten Quick Time Player.

PPS:
Einige der Fotos kommen von unsplash.com. Free (do whatever you want) high-resolution photos.


Abgebrannt

Donnerstag, 27. August 2015

Nein, ich bin nicht abgebrannt. Weder im wörtlichen, noch im übertragenen Sinn.
Aber was nicht ist, kann ja noch werden.
Spaß beiseite: Was passiert eigentlich, wenn wirklich mal das Haus abbrennt.
Natürlich geht es in so einem Fall erst einmal um eine Unterkunft, um das sprichwörtliche Dach über dem Kopf. Aber ganz schnell taucht die Frage auf:

Habe ich alle Informationen verfügbar, die ich zum "Weiterleben" brauche?

Komme ich beispielsweise an Geld? Habe ich alle Daten zum Zugriff auf mein(e) Bankkonto/en im Kopf? Nein? Die sind doch auf dem Rechner gespeichert. Aber der ist natürlich auch verbrannt. Und das Smartphone, das Tablet und die Backup-Festplatte natürlich auch.

Eine ähnliche Situation kann nicht nur im Brandfall eintreten, sondern auch im Falle einer — natürlich unberechtigten, auf einer Verwechslung basierenden, aber das macht keinen Unterschied — Hausdurchsuchung mit Beschlagnahme aller Rechner und Datenspeicher. Oder nach einem Einbruch, oder, oder …

Klar, man kann die Gedanken an solcherart Unglücke verdrängen. Ob's im Ernstfall hilft?

Ich hab' jedenfalls einmal in Gedanken durchgespielt, welche Daten ich im Fall der Fälle brauche, und vor allem, ob und wie ich diese Daten rekonstruieren könnte.

Ergebnis dieses Gedankenexperiments:

Da ich keine Zweitwohnung (mehr) habe, wo ich ein Sicherungsmedium hinterlegen könnte (im Falle der Hausdurchsuchung wäre das natürlich auch nichts wert), führt kein Weg an einer Sicherung in der Cloud vorbei. Trotz aller Bedenken bezüglich Datenschutz. Dass die Daten vor der Übertragung auf den Cloud-Speicher verschlüsselt werden, ist selbstverständlich. Und dass das Passwort für den Zugriff auf den Cloud-Speicher nicht gerade 123456 oder so ähnlich lautet, sollte auch selbstverständlich sein.
Einwurf: Wie sicher ist mein Passwort? Hier Passwortstärke testen.

Die Auswahl eines geeigneten und vertrauenswürdigen Cloud-Speicher-Dienstes überlasse ich dem geneigten Leser. Im Idealfall ist der Dienst nicht nur sicher und vertrauenswürdig, sondern auch noch komfortabel in der Benutzung. Als Komfort bezeichne vor allem ich ein automatisches Synchronisieren im Hintergrund. Damit man das Synchronisieren nicht vergisst, und im Ernstfall dann nur veraltete Backups hat.

Was habe ich in der Cloud hinterlegt?

  • Alle meine Zugangsdaten und Passwörter. Nein, das ist kein Joke! Ich vertraue darauf, dass mein Passwort-Manager sicher ist. Ich verwende 1Password.
  • Unterlagen für die Steuer.
  • Weitere wichtige, vertrauliche Dokumente

Fotos und Videos:

Braucht man zwar nicht zum "Weiterleben". Aber Verzichten möchte man wohl auch im schlimmsten Fall nicht darauf. Hier bietet sich für einen Mac-User als bequemste Lösung iCloud an.


Facebook ohne Flash - die Letzte

Mittwoch, 12. August 2015

Im Februar des Jahres musste ich noch einen Artikel schreiben, wie man auch ohne oder mit deaktiviertem Flash Videos auf Facebook anschauen kann. Der Artikel schaffte es bei Google sogar auf Platz 1
Seit heute kann ich den Artikel wohl zu den Akten legen. Facebook hat anscheinend auf HTML5 umgestellt. Zumindest bei den meisten Videos. [Screencast ohne Ton]

Die Liste wird erfreulicherweise ständig länger:

  • Youtube
  • Facebook
  • Twitter
  • diverse Mediatheken (ARD, ZDF …)
  • FAZ

Auch Slideshare läuft — vormutlich schon längere Zeit — ohne Flash. Ich konnte ohnehin nie verstehen, wieso man für Präsentationen Flash braucht.

Ein Sonderfall: Der TV-Streamingdienst Magine TV setzt auf Microsofts Silverlight. OMG, das ist ja noch schlimmer als Flash. Allerdings: Im Chrome-Browser, und nur dort, gibt es HTML5. Irgendwelche Lizenzeinschränkungen.


Nochmal: Kein Flash

Sonntag, 19. Juli 2015

Zufällig habe ich in den Tiefen meiner Site noch ein kleines Flash-Filmchen entdeckt, das meiner Aktion "Kein Flash" bis heute entkommen ist:
Das 14-Sekunden-Filmchen zeigt den animierten Link zur Startseite im Logo meiner Seiten.

Natürlich habe ich den Lapsus korrigiert, und den Flash-Film durch HTML5 video ersetzt.
Ganze 3 Zeilen Code sind dafür nötig, wie hier beschrieben.

Webworker können sich ja mal das Code-Ungeheuer anschauen, das nötig war, um den Flash-Film barrierefrei einzubinden:
weiterlesen…


Facebook (und andere Sites) ohne Flash

Mittwoch, 15. April 2015

Ich geb's ja zu: Ich mache schon den einen oder anderen Klimmzug, um Flash von meinem MacBook zu verbannen. Siehe diese diversen Artikel über flashloses Leben.
Wir schreiben das Jahr 2015, und HTML5 Video ist bereits erfunden. Dennoch gibt es immer noch Spezialisten, die Flash anscheinend für unentbehrlich halten. Facebook gehört dazu, aber auch die Süddeutsche Zeitung. Beide stellen Ihre Videos zwar auch im HTML5-Format zur Verfügung, aber eben nur für Smartphones und Tablets. Klar, man will ja schließlich auch auf diesen Geräten verfügbar sein.
Aber ein Desktop oder Notebook ohne Flash? Das gibt es doch gar nicht?
Doch. Gibt es!
Nun könnten die Entwickler der o.g. Seiten ja einfach prüfen, ob Flash auf einem System verfügbar ist, und bei negativer Abfrage das entprechende HTML5-Video anbieten. (Was machen diese Leute eigentlich beruflich?)

Gut, dann muss ich eben selbst Hand anlegen.

1. Schritt:

Ich gaukle den betreffenden Sites einfach vor, ein iPad zu sein. Das geht, indem man der Site einen entsprechenden User Agent vorgaukelt. Das Firefox Addon User Agent Switcher erledigt das. Vielleicht muss man ein wenig mit verschiedenen User Agents experimentieren. Smartphone-User Agents eignen sich eher weniger, weil sie häufig auch noch ein für kleine Monitore optimiertes Design erzwingen.
Wenn man einen passenden User Agent gefunden hat, dann muss man eben jedesmal, wenn eine Site partout Flash-Videos an Stelle von HTML5-Videos ausliefern will, den User Agent wechseln.

Weil das auf Dauer eher lästig ist, taucht über kurz oder lang die Frage auf, ob man den Wechsel des User Agents nicht automatisch "per site" erledigen kann.
Man kann!

2. Schritt:

Die Lösung findet sich auf superuser.com: Die beiden Firefox Addons User-Agent JS Fixer und User Agent Site Switcher machen es möglich. Ja, man braucht beide. Aber nur letzterer taucht als Icon im Browser auf. Wenn die Site, die mit dem "passenden" User Agent versehen werden soll, im Browser offen ist, den User Agent Site Switcher aufrufen, und dort nur noch den passenden User Agent eintragen.
Und woher weiß ich, was der passende User Agent ist? Genau dazu ist Schritt 1 erforderlich. In diesem Addon die Edit-Funktion aufrufen, und den dort eingetragenen User Agent kopieren.

Klingt etwas kompliziert, aber die Mühe lohnt sich. Zumindest für so merkwürdige Zeitgenossen wie mich, die partout kein Flash auf dem Macbook wollen.


Bitte nicht antworten

Samstag, 4. April 2015

Immer wieder erhalte ich E-Mails mit der Bemerkung "Bitte nicht antworten!"

Nein, so steht das natürlich nicht in den Mails. Die Schreiber sind da viel einfühlsamer. Ein paar Beispiele gefällig?

  • Hallo (ohne Anrede) - Text - keine Grußformel, kein Absender. Und das Ganze natürlich mit einer gmx- oder hotmail-Adresse
  • Was kostet es, dass meine Webseite bei Google auf Seite 1 kommt. Wenn mir der Preis zusagt, dann nenne ich Ihnen auch meine Webseite.
  • Ich hätte gerne eine einfache Homepage. So was wie …, und dann möchte ich noch einen kleinen Shop, so ähnlich wie amazon. Und Videos sollen auch drauf, so wie YouTube. Und dass die User das alles selbst einstellen können …
  • Können Sie für meinen Verein eine Homepage machen. Wir sind gemeinnützig, und haben nur ein kleines Budget. Eigentlich wollten wir gar kein Geld ausgeben. Sie dürfen dafür aber mit einem Banner auf unserer neuen Hompage werben. Dadurch kommen neue Kunden zu Ihnen, weil wir 80 Mitglieder haben.

Facebook ohne Flash

Mittwoch, 4. Februar 2015

Ich habe mich ja vor einiger Zeit von Flash verabschiedet. Aus Gründen.
"Ordentliche" Websites werden auch ohne Flash ordentlich dargestellt. Auch, wenn sie praktisch nur aus Videos bestehen.
YouTube — kein Problem.
Twitter — kein Problem.
Nur Facebook ist anscheinend mit Adobe "verbandelt". In Facebook gepostete Videos werden auf meinem Macbook nicht angezeigt.

Fehlermeldung bei Facebook
Beim Aufruf eines Videos zeigt Facebook diese Fehlermeldung:
"Du musst die neueste Version von Adobe Flashplayer herunterladen und installieren.

Du musst … Nein! Muss ich nicht. Und werde ich auch nicht.
Facebook will mich nur vera***en. Auf den Servern von Facebook liegt nämlich das Video nicht nur in einem Flash-kompatiblen Format, sondern sehr wohl auch in einem Format (mp4 H.264), das vom nativen HTML5-Player verstanden wird. Klar: nur so schafft es Facebook, Videos auch auf iOS (iPhone, iPad) und Androiden (Smartphones, Tablets) darzustellen.

Was also tun, um Facebook-Videos auch ohne Flash auf dem Desktop / Notebook zu spielen?
Nichts einfacher als das.
Im Adressfeld des Browsers die angezeigte Adresse ändern von https://www.facebook.com/… in https://m.facebook.com/…

Das Adressfeld des Browsers.
Das Adressfeld des Browsers nach dem Aufruf eines Videos auf dem Desktop / Notebook
Das Adressfeld des Browsers
Das Adressfeld des Browsers nach dem ändern auf http://m.facebook.com/…

(Achtung! Nach dem ändern der Adresse die Seite nicht reloaden (mit F5 o. ä.), sondern die geänderte Adresse mit Enter aufrufen!)

Et voila - Das Video rennt. Das "m" gaukelt Facebook vor, dass ich die Seite mit einem mobilen Gerät besuche.
(Dass Facebook zu doof ist, direkt die Verfügbarkeit von Flash abzufragen, möchte ich lieber nicht unterstellen.)

Das Video
An der Adresse https://fbcdn-video-b-a.akamaihd.net/… erkennt man, dass das (H.264) Video auf dem Facebook-Server liegt.

Videos im Web - eine schöne Anwendung

Donnerstag, 15. Januar 2015

Für einen Kameramann, der sich auf professionelle Zeitrafferaufnahmen von Natur (Pflanzen, Insekten usw.) spezialisiert hat, durfte ich die Website neu erstellen.

Die Herausforderung dabei: Im Laufe der Zeit sollen bis zu 1000 Video-Clips präsentiert werden. Das Hochladen dieser Datenmenge muss natürlich der Inhaber der Website selbst erledigen. Ich habe daher ein Script erstellt, das aus den Dateien auf dem Server die entsprechenden Vorschauseiten erstellt, und auch die Präsentation der Videos selbst ohne manuelles Zutun erledigt.

Die Videos werden selbstverständlich ohne Flash, mit dem zeitgemäßen <video>-Element von HTML5 dargestellt. Die Dateien werden im MPEG-4/H.264 Video Format bereitgestellt, ein Format, das inzwischen von fast allen Browsern unterstützt wird, sowie zusätzlich im WebM Format. Letzteres wird lediglich noch für Firefox Versionen vor 35.0 und älter auf OSX und Linux-Systemen benötigt, und ist wohl bald verzichtbar.

Der Internet Explorer Version 8, der noch kein HTML5 kann, erhält als Fallback einen Link zum Download, bzw. zum Abspielen des Videos auf einem installierten Player.

Alle aktuellen Tablets und Smartphones mit iOS oder Android Betriebssystem können die "HTML5"-Videos abspielen.
Eine Besonderheit gibt es unter iOS und Android: Weder Autostart, noch das Vorladen der Videos werden unterstützt. Mit der nachvollziehbaren Begründung, das Datenvolumen von mobilen Nutzern erst dann zu belasten, wenn eine manuelle Eingabe erfolgt. Dies führt leider unvermeidbar dazu, dass der Start der Videos auf diesen Systemen deutlich verzögert wird.
Um auf Tablets während der Wartezeit nicht nur eine schwarzes Bild zu zeigen, wird daher zu jedem Clip ein Standbild gezeigt, das aus dem ersten Frame des Clips erzeugt wurde. (Das canvas-Attribut des video-Elements ist hierfür zuständig.)

Eine weitere Herausforderung:
Die Videos sollten an Hand von Stichwörtern durchsuchbar sein.
Die Lösung:
Zu jedem Video-Clip wird eine Textdatei mit entsprechenden Stichwörtern hinterlegt. Meine Suchfunktion wurde entsprechend angepasst: Durchsucht werden die Textdateien, zur Anzeige kommt aber nicht der gefundene Text, sondern das jeweilige Vorschaubild mit zusätzlichen Angaben —Name, Clip-Nummer usw. Das Ergebnis einer Suche ist im Design identisch mit der Anzeige der nach Kategorien unterteilten Clip-Archive.

Um die Seiten so schlank wie möglich zu halten, werden die Vorschaubilder auf dem Server auf kleinstmögliche Dateigröße umgerechnet. Das "Gewicht" der Seiten kann also nicht durch (versehentlich) zu große hochgeladene Bilder ungünstig beeinflusst werden. Bei dieser Gelegenheit werden die Vorschaubilder auch gleich noch mit dem Lupensymbol, das die Möglichkeit der Vergrößerung symbolisiert, versehen.
Ergebnis: Ein Clip-Archiv mit beispielsweise 28 Clips kommt mit ca. 400 kB aus. Erfrischend in Zeiten von 3 MB+ Monsterseiten.

Nachtrag 18.01.2015:
Auf einem Smartphone (Android One) wiegt die gleiche Seite sogar nur 174 kB. RESS macht's möglich.

Für die "Vergrößerung" und die Präsentation der Videos sorgt (auf Desktop und Tablets) Fancybox, eine Lightbox-Variante, die ich bevorzuge, u. a. auch weil sie Screen Reader-Nutzer am wenigsten stört.
Ja, ich weiß, blinde Menschen sind nicht die Zielgruppe dieser Site, aber das ist für mich kein Argument, auf Barrierefreiheit a priori zu verzichten. Daher war es nur naheliegend, auch hier wieder "mein" barrierefreies responsives Dropdown-Menü einzusetzen.


Das HTML5 audio Element - wo Apple falsch denkt

Samstag, 3. Januar 2015

Die HTML5 Elemente audio und video kennen unter anderem die Attribute autoplay und preload. Beide Attribute werden von iOS (und auch Android ab Version 4.2.2) nicht erkannt. Unter iOS muss ein Audio bzw. Video durch eine Nutzereingabe gestartet werden. Das — scheinbar logische — Argument: Benutzer, die im Mobilfunknetz surfen, sollen vor unerwartetem Datenverbrauch geschützt werden.

Ich halte dies für eine unsinnige Bevormundung des Users, und einen Usabilty-Fail.

Beispiele:

  1. Gerade Tablets werden häufig im WLAN genutzt, und nicht automatisch im Mobilfunknetz.
  2. audio autoplay ist nützlich, um bei bestimmten Events Sounds auszugeben. Nicht nur Games nutzen Sounds, auch z. B. mein Chat.
  3. Eine Liste, aus der verschiedene Videos ausgewählt werden können. Nachdem der User ein Video gewählt hat (also bereits einmal eine Nutzereingabe getätigt hat) muss mit einem weiteren Tipp das Video selbst gestartet werden. Eine Zumutung.

Wozu braucht der Mensch Flash - Statusupdate

Montag, 29. Dezember 2014

Vor knapp 2 Monaten hab' ich Flash im Firefox deaktiviert, um zu sehen, ob das Leben ohne Flash — und ohne hochdrehenden Lüfter — lebenswert ist.
Damals habe ich auch 3 Baustellen benannt, die ich selbst "flashfrei" machen müsste, um glaubhaft zu sein:

  1. Videos auf Kundenseiten
  2. Der Yahoo! - Player, den ich u. a. in meinem Blog als Audio-Player verwende(te).
  3. Das in meinem Chat eingebundene Radio

Diese veröffentlichte Aufstellung hat wohl meinen Ehrgeiz geweckt.

Alles erledigt:

Screenshot
Der HTML5 audio-Player mit einigen Stationen, im Chat eingebettet.
  1. Kundenvideos werden in HTML5 mit dem video-Element erstellt. Mit einigen Buttons aufgepeppt, um die Steuerung des Videos auch mit der Tastatur zu ermöglichen.
  2. Im Blog und auf anderen eigenen Seiten wird das HTML5 audio-Element verwendet.
  3. Im Chat gibt es anstelle des eingebundenen Flash-Players von radio.de jetzt alternativ meine eigene Entwicklung. Erstaunlicherweise lassen sich mit dem HTML5 audio-Element nämlich auch Streams abspielen.

Erreicht habe ich nicht nur die Befriedigung meines Ehrgeizes, sondern auch ein ganz klein wenig mehr Barrierefreiheit im Web. Ich muss gestehen, dass ich "nicht unstolz" bin.

Nachtrag 31.01.2015

Es gab noch 2 Baustellen, die es galt, "flashfrei" zu machen:

  1. Der mp3-Player. Der Player ist zwar nach wie vor verfügbar. Aber ich gebe dem HTML5 Audio- und Radio-Player die Präferenz.
  2. Ein Uralt-Tool: Hintergrundmusik wird jetzt ebenfalls "flashfrei" angeboten.

Wozu braucht der Mensch Flash - ein Versuch

Dienstag, 4. November 2014

Flash — das waren doch die coolen Webseiten, wo sich was bewegte. Und Filme im Internet.
Apples Steve Job hat Flash zu Recht vor langer Zeit bereits auf den Index gesetzt. Auf meinen iPhones und -Pads gibt es kein Flash. Und ich hab's dort bisher noch nicht vermisst. Auf dem MacBook aber ist Flash natürlich noch installiert. Unüberhörbar, wenn der Lüfter hochdreht, und "unüberfühlbar", wenn die Oberschenkel langsam aufgeheizt werden.

Dabei gibt es doch längst HTML5 und das video-Tag.

Was spricht eigentlich dagegen, einmal zu testen, ob die Welt ohne Flash lebenswert ist?

Mein Arbeitspferd für das Web ist Firefox. Dort kann man unter Extras — Add-ons — Plugins Flash ganz einfach deaktivieren. Ich verwende im ersten Schritt die Option "Nachfragen, ob aktiviert werden soll". Ich will (noch) wissen, was mir alles entgeht.

Screenshot
"Adobe Flash aktivieren" wird angezeigt, wenn ein Flash Video aufgerufen wird, aber Flash deaktiviert ist.

Und jetzt?

  • YouTube?
    Kein Problem. Youtube kann HTML5. Unter Umständen ist es einmalig erforderlich, den HTML5-Videoplayer zu aktivieren.
  • Facebook?
    Eingebettete Videos laufen nicht mehr. Vermutlich ist das eher eine Wohltat als ein Problem.
    Jedoch: Facebook weiß sehr wohl, dass man Videos auch ohne Flash schauen kann. Die iOS-App beweist es. Also warum nicht auch auf dem Desktop?
  • Twitter?
    ditto!

Jetzt kommt's aber dicker:

Ob ich wohl die Konsequenz aufbringe, alle diese Flash-Anwendungen zu eliminieren?
Man wird sehen.


Hochformat-Videos sind böse

Dienstag, 30. September 2014

Hat schon mal wer eine Kinoleinwand im Hochformat gesehen? Oder ein Hochformat-Fernsehgerät? Oder jemanden, der den Camcorder so hält, dass ein Hochformat-Video entsteht.
Na also!
Warum gibt es dann so viele Hochformat-Videos auf YouTube — wo sie übrigens richtig Scheiße aussehen, nach Mäusekino.
Richtig: Weil Smartphones diesen Blödsinn erlauben. Nicht nur erlauben, sondern sogar indirekt unterstützen, weil man halt ein Smartphone natürlicherweise so hält, dass Fotos und Videos im Hochformat aufgenommen werden.

Diesen Unfug sollten Smartphone-Hersteller unterbinden!

Bis dahin kann ich eine App empfehlen, die immer ordentliches Querformat erstellt, selbst wenn man das iPhone krumm und schief hält: Horizon

Screenshot
Der iPhone Monitor von Horizon zeigt den Ausschnitt an, der als Video aufgezeichnet wird. Im gezeigten Beispiel wird das iPhone hochformatig, aber stark schräg gehalten.

Fotos für Webseiten

Dienstag, 17. Juni 2014

Nein, heute soll das Thema einmal nicht die Verwendung von Bildern sein, die man „im Internet gefunden“ hat. Dass diese Vorgehensweise ganz schnell ganz teuer werden kann, sollte inzwischen hinreichend bekannt sein.
Selbst die Verwendung von Bildern aus Stockarchiven kann problematisch sein, wie dieses Urteil zeigt.
Heute geht es mir um die Qualität. Nicht die in Megapixeln gemessene Qualität. Sondern um die — sichtbare — Qualität, die das geschulte Auge eines Profis erzeugt.
Wenn Sie die Homepage eines Kaninchenzüchtervereins pflegen, dann spricht nichts gegen die Verwendung von Fotos aus dem Smartphone. Womit ich nichts gegen Kaninchenzüchter gesagt haben will.
Wenn Sie aber einen professionellen Webauftritt betreiben, dann sollten die dort verwendeten Fotos vom Profi stammen, z. B. diesem Fotostudio in Berlin. Egal, ob es sich dabei um Außenaufnahmen oder Innenräume handelt, oder auch Fotos von Mitarbeitern.

Im Beitrag Webworking: Full Service versus Spezialisierung
habe ich dieses Thema schon einmal behandelt:

Fotos und Videos in einer fürs Web passenden Qualität lassen sich in vielen Fällen auch mit relativ einfacher Ausrüstung erstellen, also auch „aus meiner Hand“. Nur bei sehr hohen Ansprüchen und speziellen Anforderungen muss man auf die Ausrüstung und das Know-how des Spezialisten zurück greifen.

Ich weiß, Fotografen haben ihren Preis. Und die Kosten für professionelle Fotos können schnell einen erheblichen Anteil an den Kosten Ihres Webauftritts ausmachen. Aber sie machen auch einen ganz wesentlichen Teil des — hoffentlich guten — wichtigen ersten Eindrucks aus, der Besucher auf Ihrer Website fesselt, oder sie wegklicken lässt.


Videos auf Webseiten - HTML5 video vs. Flash

Sonntag, 6. April 2014

Das HTML5 video-Tag wird von allen Browsern unterstützt. Außer vom IE8. (Den Opera mini bezeichne ich mal nicht als Browser.)
Klar, der IE8 ist leider immer noch auf Windows XP Systemen die modernste verfügbare IE-Version. Und obwohl Windows XP Nutzer sehr wohl auch richtige Browser installieren können - sie surfen weiterhin mit dem IE8. Nach meiner eigenen Statistik sind das zwischen 2% und 10%, je nach Techniklastigkeit der untersuchten Sites.

Diese 2 bis 10% können also Videos, die mittels video-Tag ausgeliefert werden, nicht sehen?
Doch, können sie. Wenn innerhalb des video-Tags als Fallback eine mp4-Datei zum Download bzw. zum Abspielen in einem lokal installierten Player, z. B. der Windows Media Player, angeboten wird.

Es gibt also kein Argument mehr für den Einsatz von Flash zur Video-Wiedergabe auf Webseiten. Aber ein gutes Argument dagegen:

15% bis 25% der Surfer sind mit iOS-Geräten (iPad, iPhone) unterwegs. Tendenz stark steigend. Und diese 15% bis 25% sind bei Flash außen vor. Weil Apple - richtigerweise! - kein Flash unterstützt.

Also: Anstelle von Flash-Playern wie JW Player ein paar einfache Zeilen HTML5:
<video>
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<a href="video.mp4">Video in installiertem Player öffnen, oder Herunterladen</a>
</video>

Zum komfortablen Erstellen der passenden .mp4 und .webm Dateien empfehle ich den Miro Video Converter.

Feddisch.


Webworking: Full Service versus Spezialisierung

Montag, 18. November 2013

Als Einzelkämpfer ist das für mich keine Frage: Alles rund um den Webauftritt aus einer Hand. Aus meiner Hand eben.

Ich werde versuchen, kurz zu skizzieren, was ich mir darunter vorstelle:

  • Alleinstellungsmerkmal des Angebots herausarbeiten und klar definieren
  • Erstellung des Pflichtenhefts in enger Zusammenarbeit mit dem Kunden
  • Vorab-Festlegungen zur SEO: Domain-Name, Keywords u. s. w.
  • Design-Vorgaben bzw. -Vorlieben. Corporate Design vorhanden?

Darauf aufbauend entwickle ich direkt in HTML und CSS einen Design-Dummy. Also ohne Umweg über Photoshop o. Ä. Diese Vorgehensweise mag aufwändig erscheinen, führt aber im Ergebnis zu einfachen Dateistrukturen, und vermeidet „CSS-Klimmzüge“, die bei der Umsetzung einer Photoshop-Vorlage häufig nötig sind.

Texte so zu schreiben, dass sie den Webseitenbesucher ansprechen, und gleichzeitig SEO-Erfordernisse erfüllen, sollte in der Regel auch ohne Textprofis machbar sein.

Fotos und Videos in einer fürs Web passenden Qualität lassen sich in vielen Fällen auch mit relativ einfacher Ausrüstung erstellen, also auch „aus meiner Hand“. Nur bei sehr hohen Ansprüchen und speziellen Anforderungen muss man auf die Ausrüstung und das Know-how des Spezialisten zurück greifen.

Interaktive Bereiche, Formulare, vom Kunden zu editierende Bereiche u. s. w. werden fallweise in JavaScript und/oder PHP erstellt. Eigene Programmierung erlaubt es, exakt auf spezifische Kundenbedürfnisse einzugehen.

Die beschriebene Vorgehensweise halte ich für sinnvoll für kleine und mittelgroße Webauftritte, für meine typischen Kunden eben. Und für den Kunden bedeutet diese schlanke Arbeitsweise: Eine absolut individuelle Lösung zum bestmöglichen Preis.

Größere Webauftritte erfordern dann aber die Arbeit einer Agentur mit mehr man power. Die Arbeitsweise der beauftragten Agentur sollte dann aber „Smart-Interactive“ sein. Also wenn schon nicht aus einer Hand, dann wenigstens alles unter einem Dach; um Schnittstellenverluste möglichst zu minimieren.

Von einer strikten Arbeitsteilung - Design vom Grafiker - Texte vom Texter - HTML vom Front-End-Entwickler - Serverseitiges Scripting vom Back-End-Programmierer - SEO vom Suchmaschinenoptimierer - würde ich nach Möglichkeit absehen. Die erforderliche Koordination verschlingt einfach zu viele Ressourcen, die besser dem Projekt selbst zugute kommen sollten.


Chat mit dem iPhone

Montag, 8. Juli 2013

Weil immer wieder mal gefragt wird:
Ja, meinen Chat kann man auch mit dem iPhone nutzen. Folgendes Video zeigt das (nicht für Internet Explorer 8 und älter):

Hinweis: Achte auf dein Datenvolumen, wenn du im Mobilfunknetz chattest.
(Das Video wurde mit Reflector erstellt.)


GEMA versus YouTube - und Unblocker

Freitag, 7. Juni 2013

YouTube scheint (jetzt) auch gegen Barrierefreiheit zu kämpfen.
YouTubes Kampf mit der GEMA - oder sollte ich sagen: GEMA gegen YouTube geht in die nächste Runde.
Anscheinend hat YouTube es jetzt geschafft, einen (von vielen) Unblocker(n) zu blocken:

Screenshot eines Youtube Unblockers
YouTube Unblocker: There are corrently some problems due YouTube changes. We are working on an update. Please be patient.

Nun? Gut gemacht YouTube?
Mitnichten.
YouTube hat mit dieser Änderung auch Unschuldige getroffen. So z. B. Chris Heilmanns Easy YouTube Player. Ein Player, der YouTube Videos so weit wie nur möglich barrierefrei zugänglich macht. Das Video, das in obigem Beispiel eingebunden ist, hat nichts mit der GEMA zu tun, und wird von YouTube nicht geblockt. Aber Chris Heilmanns Player ist kaputt. Kollateralschaden?
Danke GEMA.


GEMA versus YouTube

Montag, 18. März 2013

GEMA und YouTube können oder wollen sich nicht einigen. Und tragen diesen Streit seit Jahren auf dem Rücken der User aus. Das Ergebnis ist das allseits bekannte

Screenshot
"Leider ist dieses Video in Deutschland nicht verfügbar, da es Musik enthalten könnte, für die die GEMA die erforderlichen Musikrechte nicht eingeräumt hat.

Das tut uns leid.

Wenn es sich dabei nur um einige wenige Fälle handeln würde…
Leider sind in Deutschland über 60% der weltweiten Top 1000 Videos betroffen, wie folgende schöne interaktive Applikation zeigt:


Unterstützt durch MyVideo. Realisiert von OpenDataCity. Anwendung steht unter CC-BY 3.0.

Die Gegenwehr des Konsumenten: YouTube Unblocker. Z. B. www.unblocker.yt oder proxmate.dave.cx
Noch scheint diese Notwehrmaßnahme nicht strafbar zu sein. Zumindest in Deutschland (noch) nicht. (Achtung! Meine persönliche Meinung, keine Rechtsauskunft!). In den USA hingegen würde man sich damit nach dem Digital Millennium Copyright Act (DMCA) strafbar machen.


MPEG-4 Videos trimmen, ohne neu zu encodieren

Montag, 23. Januar 2012

Das Problem existiert seit den Zeiten von VHS-Video-Recordern. Und es hat sich nichts daran geändert; Auch mit modernen Festplatten-TV-Receivern, sowie mit Online-Tools wie onlinetvrecorder.com oder bong.tv erstellte Aufnahmen von TV-Sendungen schleppen als Ballast einen mehr oder weniger langen Vor- und/oder Nachlauf mit. Ganz unschön, wenn man Sendungen archivieren will. Und echt ein Ärgernis, wenn man, wie ich, TV-Sendungen aufs iPhone schaufelt, um sie sich unterwegs, im Wartezimmer oder bei sonstigem Leerlauf anzuschauen.

Nun hab' ich ja einige Programme hier auf der Festplatte, um Filme zu trimmen. Aber alle diese Programme encodieren nach dem Beschneiden den Film neu. Das dauert! - und schlimmer, das Ergebnis ist qualitativ häufig schlechter als das Original, und/oder belegt sogar mehr Speicher trotz kürzerer Laufzeit.

Ein Programm müsste her, das, ohne neu zu encodieren, einfach trimmt und sonst nichts.

Ich wurde fündig: MP4Box ist ein Kommandozeilen-Tool, das genau das tut, was ich will. Es kann MPEG-4 Filme trimmen. Und oben genannte Online-Tools erzeugen MPEG-4 Dateien (.mp4 oder .m4a).

Weil die Kommandozeile nicht so mein Ding ist (in einer VM auf dem Mac ist allein die Suche nach dem richtigen DOS-Pfad unzumutbar), habe ich mir die grafische Oberfläche für die MP4Box namens My MP4Box GUI installiert.
Screenshot My MP4Box GUI
Die für meinen Zweck relevanten Einstellungen (alle anderen Features brauche ich nicht):

  • Tab "Split"
  • Auswahlschalter "Extract by Duration"
  • Eingabefelder Zeit von hh:mm:ss bis hh:mm:ss

MP4Box bzw. My MP4Box GUI beinhalten keine Vorschau. Die Start- und Endezeit muss also mit einem anderen Video-Player vorher ermittelt werden. Auch wenn dies als Nachteil erscheint: In Summe geht das Trimmen mit MP4Box immer noch viel schneller als mit jedem anderen Tool.

Der getrimmte Film wird im gleichen Verzeichnis abgespeichert, in dem das Original liegt. Start und Ende des Ausschnitts werden im Dateinamen in Form von _start_ende ergänzt, wobei Start und Ende in Sekunden angegeben werden.

Positiv: My MP4Box kann anscheinend mit Screen Reader bedient werden. Auch wenn es mir mit meinem NVDA nicht gelang, den Auswahlschalter "Extract by Duration" zu aktivieren. Und obwohl die Zuordnung der Auswahlschalter zu den jeweiligen Eingabefeldern unklar ist.

Hinweis: My MP4Box GUI wird als .7z Archiv zum Download angeboten. Weil nicht jeder dieses Format entpacken kann, habe ich den Inhalt - Setup.exe Version 0.5.6.0 (December 19, 2011) - als .zip Format zum Download bereitgestellt.
Nachtrag 20.07.2013: hier die aktuelle Version 0.6.0.6 als .zip


Test ZDFmediathek iPhone App mit VoiceOver

Montag, 5. September 2011

Das ZDF hat heute die kostenlose iPhone App ZDFmediathek veröffentlicht. Die App tut im Prinzip, was sie verspricht: Zugriff auf archivierte ZDF-Sendungen auch auf dem iPhone. Das User Interface ist hässlich,

Screenshot 1


aber wenn man "seine" Sendung gefunden hat - dazu gibt es auch eine Suchfunktion - funktioniert das Abspielen der Sendungen im iPhone eigenen Player zufriedenstellend.

Screenshot 2


Leider zeigt auch diese App wieder einmal die altbekannten Barrieren: Wichtige Schaltflächen sind für VoiceOver nicht beschriftet. VoiceOver spricht nur "Hyperlink". Dies gilt beispielsweise für den wichtigen Button zur Suche (rechts oben neben dem Button Menü).

Hinweis für VoiceOver Nutzer, die es dennoch versuchen wollen: Der Button zum Start des Videos ist auf der Seite, die nach Auswahl einer Sendung geöffnet wird, und belegt etwa das obere Drittel des Bildschirms. Beschriftet ist der Button (un)sinnigerweise mit "Leerzeichen". Darunter die Beschreibung des Films. Die Position des Buttons ist also relativ leicht zu "erraten".

Screenshot 3


Liebes ZDF: Die fehlende Beschriftung nachzurüsten ist technisch eine Kleinigkeit, und muss nur einmal gemacht werden, um Ihr Angebot für alle Zeiten auch für blinde Benutzer zugänglich zu machen. Nur Wollen müssen Sie schon mögen.

Ein Hinweis an die Entwickler

Ich empfehle folgende Lektüre:

iOS Accessibility sowie Making Your iPhone App Accessible

Nachtrag 07.05.2012

Weil das ZDF sich um Barrierefreiheit anscheinend nicht bemüht, hier noch ein paar Hinweise für blinde User nachgereicht, um die Suchfunktion mit VoiceOver zu nutzen:

  • App killen und neu starten, weil der Home-Link nicht immer zuverlässig auf die Startseite führt.
  • Der Suchen Button (beschriftet mit Hyperlink) ist rechts oben neben dem Button "Menü".
  • Das Suchfeld kann man nicht antabben, sondern nur erraten. Es befindet sich mittig unter der Überschrift "ZDFmediathek", und unter einer ebenfalls nicht fokussierbaren Überschrift "Suche". Also ca 2 cm nach unten fummeln, Ansage: "Suche - Suchbegriff - Textfeld". Die Tastatur schließt sich nicht nach dem Abschicken des Suchbegriffs per Suchen-Taste auf der Tastatur, sondern nur, wenn man von Suchfeld aus mit rechts wischen zum Absendebutton geht. (Beschriftung: "Suche 30.png")

Videos im Web - Stand 2010

Dienstag, 6. April 2010

Gerrit van Aaken hat in seinem Blog einen guten Artikel über den aktuellen Stand von Videos im Web geschrieben.
Das Ergebnis unter Einsatz von HTML5 und einem Fallback unter Verwendung des Open Source Flash Video Players Flowplayer überzeugt erst einmal durch wunderschön schlanken Code.
Um die vorgestellte Technik selbst zu erproben, habe ich hier eine eigene Demo erstellt.
Und ich muss leider feststellen, dass der aktuelle Stand zwar technisch hochinteressant, aber eben doch noch nicht ganz reif ist für die freie Wildbahn.
Meine Beobachtungen:

  • Unter Windows kann nur der Google Chrome Browser das HTML5 <video> im H.264 Format abspielen.
  • Alle anderen Browser verwenden das - zugegebenermaßen elegante - JavaScript, das auf das Flowplayer-Fallback umschaltet.
  • Opera/Win in der aktuellen Version 10.51 kann das Video im Flowplayer gar nicht abspielen
  • Safari/Win in der aktuellen Version 4.0.5 spielt das Video erst, nachdem es komplett heruntergeladen ist. Je nach Größe des Videos und Qualität der Internetverbindung kann das unakzeptabel lange dauern.
  • Und das gewichtigste "Aber": Für Nutzer eines Screen Readers oder für Besucher ohne Maus ist sowohl der vom HTML5 <video> Tag erzeugte Player, als auch der Flowplayer vollkommen unbenutzbar. In beiden Fällen wäre eine zusätzliche Steuerung per JavaScript nachzurüsten, wie ich es z. B. in diesem Artikelvorstelle. Und damit ist der Charme des schlanken Codes wieder hinfällig.
    Accessibility-Features wie Untertitel oder Audio-Descriptions: Leider auch Fehlanzeige.

Es heißt also weiter warten auf den "heiligen Gral", den Gerrit van Aaken etwas vollmundig versprochen hat.


MP3 von YouTube & Co. - noch viel schneller

Montag, 23. November 2009

Vor einigen Tagen habe ich eine Technik vorgestellt, um auf die Schnelle MP3 Dateien von YouTube Videos zu erstellen.

Es geht noch um vieles schneller und komfortabler.
Der kostenlose online YouTube zu MP3 Konverter macht's möglich.

  1. Gib die URL des Videos ein, das du in MP3 konvertieren willst. (z.B. http://www.youtube.com/watch?v=dfDIaN9KMbE)
  2. Sobald die Konvertierung fertig ist, öffnet sich das Dialogfenster zum Speichern auf der eigenen Festplatte.
  3. Fertig.

Nochmal komfortabler geht es mit einer Firefox Erweiterung namens Youtube to MP3.
Diese Erweiterung nimmt dir den Schritt 1, das Eingeben der Video URL, ab, und startet sofort die Konvertierung.
Dazu werden in alle YouTube Seiten zwei Link eingefügt:
Convert & Download as MP3
Convert & Download as MP3 (HQ)

Position der beiden Convert-Links auf der YouTube Seite


MP3 auf die Schnelle

Samstag, 14. November 2009

Musik, auch urheberrechtlich geschützte Musik, darf zur eigenen Verwendung kopiert werden.
(Ob die Quelle, von der ich kopiere, eine Urheberrechtsverletzung begeht, steht auf einem anderen Blatt.)

You Tube und ähnliche Video Portale sind voll mit Musikvideos, und nach dem de facto Ende der Musiktauschbörsen eine ergiebige Quelle. Und Google & Co. helfen bei der Suche nach fast jedem Titel.

Da ich nur den Ton vom Video will, ist die Sache mit dem Speichern ganz einfach. Ich nehme einfach auf, was mein PC abspielt.

Ein pfiffiges Programm, das direkt im mp3-Format aufnimmt, ist CDex. CDex ist frei (GPL Lizenz), und Download Quellen im Internet schnell ergoogelt. Hier ein Beispiel Download Link.

Beschreibung

CDex ist ein CD-Ripper, der alle wichtigen Funktionen zum Erstellen von MP3s mitbringt. Das Programm ist sehr übersichtlich. Auch Einsteiger finden sich schnell zurecht.

Mit dem CD-Ripper und dem integrierten Lame Encoder lassen sich ohne weiteres Zubehör qualitativ gute MP3s aus Audio CDs erstellen. Neben den bereits enthaltenen Lame, Ogg Vorbis und FLAC Codecs werden auch WMA und ACM-Codecs unterstützt.
Mit CDex können nicht nur Audio CDs konvertiert werden, sondern auch WAV Dateien. CDex dient hier als Benutzeroberfläche für die vorhandenen Encoder. Das Umkodieren (mp3->mp3, mp3->wav, ogg->wav, …) ist ebenfalls kein Problem.

CDex bietet außerdem eine Normalisierungsfunktion (Lautstärkeangleichung), freedb-Unterstützung (um die Titel/Dateien per Internet automatisch zu benennen), einen internen Audioplayer und einen einfachen Line-In Recorder.


Firefox 3.5 und das video Tag

Mittwoch, 1. Juli 2009

Player Demo

Ein erster Versuch mit dem <video> Tag.
Der Firefox 3.5 spielt damit Videos im .ogg Format ohne Flash ab. Ein interessanter Ansatz.
Leider scheint der Player noch ein wenig buggy zu sein; hin und wieder wird der Film nicht bis zum Ende abgespielt, dann hängt der Player, und es hilft nur noch ein reload der Seite. Aber ein interessanter Ansatz ist es allemal.

Das Video ist auf einer eigenen Testseite zu sehen. Diese Testseite ist auch gleich in HTML 5 geschrieben. Das <video> Tag gibt es nur in HTML 5.

Nachtrag:
Mozilla scheint auch hinsichtlich Barrierefreiheit auf einem guten Weg zu sein. Das Video kann mit der Tastatur gestartet und gestoppt werden. Mit Tab den Fokus auf das Video legen, und dann mit der Leertaste starten und stoppen. Mit den Pfeiltasten rechts und links kann vor- und zurückgespult werden.

Nachtrag 2:
Mit ein wenig Javascript lassen sich die Buttons zur Steuerung erstellen. Die Bedienung mit der Tastatur (und mit Screen Readern) ist damit abgehakt - immer vorausgesetzt, der Firefox 3.5 ist installiert.


Flash XHTML valide einbinden

Freitag, 4. Mai 2007

Ich bin kein Freund von Flash. Suchmaschinen können damit nichts anfangen, und mit der Barrierefreiheit ist es auch so eine Sache. Darüber hinaus wird Flash häufig auch nur für sinnlose Spielereien eingesetzt - von den vollkommen überflüssigen Intros ganz zu schweigen.

Aber es gibt Ausnahmen:

unpluggedEine davon ist die Präsentation von kleinen Filmen.
Der Vorteil gegenüber anderen Formaten: Das Flash-Plugin ist sehr weit verbreitet, sowohl in der Windows Welt, als auch auf dem Mac. Bei allen anderen Video Formaten werden häufig Benutzer ausgesperrt, die das passende Plugin nicht installiert haben.
Dass man Flash XHTML valide einbinden kann, habe ich schon hier gezeigt.

Um Filme ins Flash Format zu konvertieren, braucht es ein entsprechendes Programm. Das muss nicht unbedingt ein Schwergewicht wie Flash von Adobe sein. Es gibt kleine Einzweckprogramme. Ich hab' mal einige getestet. Am besten gefallen hat mir bisher Flash Video Studio 2.0
Der erste Versuch ist hier zu bewundern.
Übrigens: Die schlechte Tonqualität ist nicht auf das Tool zurückzuführen - das hat im Original auch nicht besser geklungen.


Archiv:

Kategorien:

Creative Commons Lizenzvertrag
Alle Texte (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE