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.

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.

Die Idee ist nicht ganz neu: Lesen im Web verschönern, durch Ausblenden aller unnötigen, ablenkenden Komponenten wie Werbung, Navigation usw. Bereits Adblock Plus hilft bereits etwas dabei. Bekannt dürfte auch Readability sein, das meines Wissens erstmals aus »verstyltem« Seitendesign schön lesbare Seiten gemacht hat.
Der bisher gelungenste Ansatz ist allerdings Cleary von Evernote. Clearly auf der Seite des Herstellers.




Das Schönste: »Entrümpeln« mittels Clearly mittels frei konfigurierbarem Tastaturkürzel. Und zurück mit Esc.
Das müsste doch auch was sein für Screen Reader Nutzer.

Viele interessante Inhalte werden heute im Web als Podcast angeboten. Dabei gibt es, mehr noch als beim geschriebenen Wort, große Unterschiede bezüglich der Informationsdichte. Oder, um es direkter auszudrücken: Beim Podcasten ist die “Schwafelngefahr” noch größer als beim geschriebenen Wort. Und so kommt es, dass häufig 5 Minuten wertvoller Inhalt, Inhalt, der mich speziell interessiert, irgendwo in 1 Stunde Podcast “versteckt” ist.
Anders als bei Geschriebenem gibt es aber beim Podcast nicht die Möglichkeit des Querlesens, des Scannens. Zum Hören eines Podcast kann ich bestenfalls, je nach verwendetem Programm, die Geschwindigkeit der Wiedergabe erhöhen. Aber selbst dann muss ich für den einstündigen Podcast 30 Minuten Zeit aufbringen, ohne Sicherheit, gesuchte Inhalte vorzufinden.
Nun zu meinem Wunsch: Ein Inhaltsverzeichnis, das es mir ermöglicht, über die Zeitanzeige direkt bestimmte Bereiche anzusteuern. So etwas gibt es. Nur leider viel zu selten. Daher zeige ich im Folgenden ein mustergültiges Beispiel:
Working Draft, ein wöchentlicher News-Podcast für Webdesigner und -entwickler

Das Inhaltsverzeichnis wird in mehreren Formen angeboten:
Einmal auf der Webseite:


Zum anderen im Podcasting-Programm. Hier z. B. auf dem iPhone mit Instacast:



oder auf dem iPhone mit dem in die Musik-App integrierten Podcast-Reader:



Instacast liefert das Inhaltsverzeichnis mit Hyperlinks. Das heißt, man kann direkt aus dem Inhaltsverzeichnis zur verlinkten Stelle im Podcast springen. Und das alles in einer Form, die auch von Screen Readern erkannt wird.

Download des Hörbeispiels (mp3 - 337 kB)

So wünsche ich mir Podcast-Hören. Und von Seiten der Ersteller erfordert dies nur wenig zusätzlichen Aufwand.

Das Problem scheint nicht ungewöhnlich zu sein. Zahlreiche Treffer bei Google belegen das. Auch ich hatte immer wieder einmal mit diesem ungebührlichen Betragen meines MacBook zu kämpfen. Zufällige bin ich jetzt auf eine mögliche Ursache gestoßen: Parallels bzw. Windows in einer virtuellen Maschine waren aktiv. Und Windows hat wohl den Zugriff auf das optischen Laufwerk gekapert. Windows in den Standby Modus geschickt, und das CD-Laufwerk war wieder unter der Kontrolle des MacBooks, die CD konnte anstandslos ausgeworfen werden.

Lesezeichen zwischen Mac und iPhone synchron halten - dazu war bisher eine (manuelle) Synchronisation über iTunes erforderlich. Seit iOS5 sorgt iCloud für eine automatische Synchronisation zwischen Safari/Mac und Safari/iPhone. Voraussetzung, dass auf beiden Geräten unter Systemeinstellungen bzw. Einstellungen – iCoud Lesezeichen angewählt ist.

So die Theorie. In der Praxis funktioniert das häufig nicht, wie in verschiedenen Foren zu lesen ist.

Aber es gibt Abhilfe:
(Ⅰ - römisch Eins) Silke Sandkötter bloggt:

1. Auf dem Mac in Safari Ablage/Lesezeichen exportieren auf einen beliebigen Platz auf Deiner HD
2. Auf dem Mac in Safari alle Lesezeichen löschen
3. Auf allen zu synchronisierenden iOS-Geräten im mobilen Safari alle Lesezeichen löschen
4. Auf dem Mac in Safari Ablage/Lesezeichen importieren – die Datei auswählen aus Schritt 1

Ich habe festgestellt, dass dies nicht genügt.
(Ⅱ - römisch Zwei) Meine Lösung:

1. Mac – Systemeinstellungen – iCloud Lesezeichen deaktivieren
2. iOS5-Device – Einstellungen – iCoud Lesezeichen deaktivieren, und “Lesezeichen vom iPhone löschen” bestätigen
3. Anschließend beide wieder aktivieren

Und jetzt funktioniert auch die Synchronisierung via iCloud in beiden Richtungen. Beim ersten Aufruf von Safari auf dem iPhone zeigt der animierte Throbber, dass neu synchronisiert wird.

NB.: Ich synchronisiere übrigens zwischen Firefox auf dem Mac und Safari auf dem iPhone. Wie das geht? Nur mit einem Zwischenschritt (der natürlich ohne Eingriff automatisch im Hintergrund stattfindet). Ich lasse die Lesezeichen zwischen Firefox/Mac und Safari/Mac mittels Xmarks synchronisieren. Und für den Rest, nämlich die Synchronisation zwischen Safari/Mac und Safari/iPhone ist dann iCloud zuständig.

Nachtrag 30.10.2011

Die Synchronisierung vom iPhone zum Mac funktioniert recht zuverlässig. In der anderen Richtung, also Mac zum iPhone, leider nicht immer. Ich muss dann die Schritte (Ⅱ - römisch Zwei) 1 bis 3, also iCloud auf beiden Seiten de- und wieder aktiveren, erneut durchführen. Nicht schön, aber immerhin eine Möglichkeit, die Synchronisierung ohne großen Aufwand zu erzwingen. Es wird Zeit, dass Apple ein iOS 5.01 oder dergleichen nachschiebt.

Nachtrag 13.11.2011

iOS 5.01 ist inzwischen raus. Leider hat Apple das Problem “Lesezeichen Synchronisieren” offenbar nicht behoben. Die iCloud Supportseite behandelt das Thema zwar, gibt aber leider nur Allerweltstipps wie iOS-Neustart.
Auch mehrfach im Web beschrieben: Löschen von Lesezeichen auf dem Mac löscht offenbar nicht die entsprechenden Lesezeichen in der Cloud. Auf dem iPhone müssen die Lesezeichen separat gelöscht werden. Sieht aus wie ein Cache-Problem.

In einschlägigen Foren liest man über das neueste mobile Apple-Betriebssystem iOS5, dass pinch to zoom nicht mehr funktioniert. Ich hab’ erst mal mit Unverständnis reagiert. Wenn ich meine eigenen mobilen Seiten auf dem iPhone aufrufe, dann funktioniert das sehr wohl. Beispiel: webdesign.weisshart.de und zimmer-chiemsee.de
Aber auf google.de funktioniert das tatsächlich nicht (mehr).
Ein kurzer Blick in den Quelltext genügt: Nicht Apple und iOS5 sind daran schuld, sondern Google & Co. Um das zu verstehen, muss man nicht einmal HTML können. Etwas Englisch genügt:

<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

Was soll wohl das user-scalable=no bedeuten? Und was hat Google sich dabei gedacht?

Warum nicht einfach richtig:

<meta name="viewport" content="width=device-width, user-scalable=yes" />


Safari HTML Reference

(Gastbeitrag)

Ob es um die Webseite für ein Unternehmen oder den Internetauftritt für einen Verein geht: Eine professionelle Internetpräsenz ist heute für jede größere Organisation unverzichtbar. Mit TYPO3, einem so genannten Content Management System, können Redakteure sich um die ständige Aktualisierung einer Seite kümmern, ohne dazu eigene Programmierkenntnisse zu haben. Dazu muss die Seite einmalig von einer TYPO3 Agentur erstellt werden, danach fallen keine Lizenzkosten oder andere Gebühren an, da TYPO3 ein Open Source-System ist.

Bei der Erstellung einer Webseite kommt es nicht nur auf ein hochwertiges Design an, darüber hinaus gibt es noch eine ganze Reihe weiterer Punkte, die eine Rolle spielen. Eine gute TYPO3 Agentur sollte darauf bereits bei der Konzeption achten. So ist es zum Beispiel wichtig, dass die Inhalte der Seite regelmäßig gepflegt werden – diese Aufgabe können Redakteure nach einer kurzen TYPO3 Schulung selbst übernehmen.

Ein weiterer wichtiger Punkt ist die Programmierung der Seite, die darauf ausgelegt sein muss, dass diese von Suchmaschinen gefunden werden kann – andernfalls bleibt man im Internet fast unsichtbar, schließlich kommt eine große Zahl der Besucher einer Seite über die Ergebnisse in großen Suchmaschinen auf die Webseite.

Solche Besucher kommen zu einem großen Teil über Anzeigen, die in Suchmaschinen geschaltet werden. Eine TYPO 3 Agentur München kann dieses so genannte Performance Marketing übernehmen, damit mit diesen Anzeigen tatsächlich die Zielgruppe angesprochen wird, die man erreichen möchte. Der große Vorteil für den Kunden: Die Resultate sind sofort nachvollziehbar, anders als bei der klassischen Print-Werbung kann man beim Online-Marketing anhand von Klickzahlen oder anderen Werten sehen, wie hoch die Kosten pro Besucher auf der Seite sind.

Immer wichtiger wird auch das Social Media Marketing. Darunter versteht man im allgemeinen die Einbindung bestimmter Social Media-Funktionen in die eigene Seite, zum Beispiel den Link zur eigenen Facebook-Seite oder zum Twitter-Konto. Diese Medien sollten natürlich ebenfalls regelmäßig mit Inhalten gefüllt werden. Nutzer profitieren davon, da sie auf verschiedenen Medien mit dem Betreiber der Webseite in Kontakt kommen können. Außerdem können in sozialen Netzwerken wie Facebook spezielle Angebote oder Gewinnspiele veranstaltet werden, die wiederum mehr Besucher auf die Webseite locken.

__________________

© 2011 webdesign weisshart
Dieser Artikel ist urheberrechtlich geschützt.

Die Aufgabenstellung ist einfach, und für einen Webworker alltäglich:
Suche alle .php-Dateien im Ordner xy, die den String “abc” enthalten. Selbst unter Windows ist diese Aufgabe mit dem Dateiexplorer lösbar, wenn auch quälend langsam. Nun das gleiche unter Mac OS X Lion. Die Qualität der Suchfunktion des Mac ist doch sprichwörtlich. Weil ich jedoch tagelang brauchte, um das hinzubekommen - weder Google noch der telefonische Apple-Support konnten mir wirklich helfen - beschreibe ich mal die nötigen Schritte:

1. Im Finder den gewünschten Ordner öffnen. Im Finder-Suchfeld .php eingeben. In der Auswahlliste, die dann aufklappt, wähle ich “Arten: PHP Skript” aus. Es werden nun alle .php-Dateien in diesem Verzeichnis aufgelistet.
   
2. Jetzt kommt der entscheidende Schritt. Rechts oben den Button + klicken. Daraufhin wird ein weiteres Suchfeld angezeigt. Vor dem Suchfeld gibt es ein Dropdown-Menü. Dort wähle ich “Inhalt". Logisch; ich will ja den Inhalt der Dateien durchsuchen.
   
3. Nun in das Suchfeld den gesuchten Begriff eingeben. Fertig!
   

Und warum hat das bei mir nicht auf Anhieb geklappt? Die Inhalte wurden einfach nicht durchsucht! Aus welchem Grund auch immer, war auf meinem Mac kein Index angelegt. Wie man den Index neu anlegt hab ich dann bei Knallisworld gefunden. Und jetzt kann ich bestätigen: die Suchfunktion des Mac ist fantastisch, und funktioniert on the fly.

Wer barrierefreie Websites erstellen muss (oder will), kommt in letzter Instanz nicht umhin, sich mit der WCAG 2.0 zu beschäftigen. Leider sind diese Richtlinien ein Monster, und alleine der schiere Umfang der Dokumentation kann abschreckend wirken, insbesondere auf Neulinge auf dem Gebiet Barrierefreiheit.
Yahoo! hat jetzt einen Katalog mit nur 10 Punkten aufgestellt, der bei der Beurteilung der Frage helfen soll, ob eine Site barrierefrei ist. Der 10-Punkte Katalog
Natürlich kann man die WCAG 2.0 nicht verlustlos auf lediglich 10 Fragen komprimieren. Aber mir gefällt der Ansatz von Yahoo! - besser ein Einstieg mit niedrigen Hürden, als überhaupt kein Einstieg wegen scheinbar zu hoher Einstiegshürden.
Ich darf Punkt 1 des Yahoo-Katalogs zitieren:

1. Did the people who built your site consider individuals with disabilities when they designed it?
A “yes” answer means that you are already halfway to making your site accessible.

Volltreffer! Das Problembewusstsein, die Absicht, ist schon die halbe Miete. Das Gros der Barrieren im Web ist darauf zurückzuführen, dass die Entwickler sich gar nicht der Tatsache bewusst sind, dass man Webseiten mit relativ einfachen Mitteln für Menschen mit Behinderungen zugänglich machen kann.

Eine Kritik an der Yahoo-Liste sei mir allerdings gestattet: Es fehlt der Hinweis, dass eine saubere Semantik, eine logische Strukturierung der Seiten mit Überschriften und Absätzen, Listen usw. in jedem Fall für eine Verbesserung der Zugänglichkeit für alle Besucher sorgt. Eine Validierung des HTML-Codes kann dabei helfen.

Pretty much the only forms of Western literature that don’t use hyphenation are children’s books and websites.

schreibt das FONTDECK Blog.
Warum Websites keine Silbentrennung einsetzen, ist schnell erklärt: Weil die Laufweite der Zeilen, anders als im Print, nicht bekannt ist. Sie hängt nämlich von den Benutzereinstellungen ab.
HTML bietet in diesem Fall eine Art Automatik - den bedingten Trennstrich “soft hyphens” - an: ­ - inzwischen unterstützen alle modernen Browser das.
Das manuelle Setzen von soft hyphens rechtferigt den Aufwand aber nur in wenigen, speziellen Fällen. Deshalb gibt es Techniken, das Setzen von soft hyphens automatisch von JavaScript erledigen zu lassen. Am bekanntesten dürfte Hyphenator.js sein.

Wann macht automatische Silbentrennung Sinn?

1. Wenn Blocksatz eingesetzt wird.
2. Bei extrem kurzen Zeilenweite, z. B. wenn Text Bilder umfließt.

Die Ergebnisse mit Hyphenator.js sind ordentlich. Mit einer gravierenden Einschränkung: Screen Reader (nicht alle, aber die meisten) “verschlucken sich” an den soft hyphens. Das Ergebnis ist unverständlich bis unzumutbar. Wer Wert darauf legt, dass seine Seiten für Screen Reader zugänglich sind, muss auf automatische Silbentrennung mittels Hyphenator.js verzichten.

Ein erster Schritt in die richtige Richtung

Puristen hätten längst eingewendet:
Silbentrennung hat nichts im Markup zu suchen (Markup ist Inhalt), und auch nichts im JavaScript (JavaScript ist zuständig für das Verhalten einer Webseite). Silbentrennung ist Darstellung, und gehört ins CSS! Und dort hat es jetzt, mit der CSS3-Deklaration “hyphens:auto” auch Einzug gefunden. Bisher unterstützen diese Deklaration der brandneue Firefox 6, und Safari 5.1 bzw. Safari / iOS. Und beide Browser auch nur mit Vendor-Prefix. Der CSS Code muss also lauten:

.hyphen {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

Damit ist der Safari bedient.
Für den Firefox ist zusätzlich lang="en” für das entsprechende Element (oder ein Elternelement) nötig. Jawohl: “en", auch wenn die Sprache des Dokument eine andere ist. Also

<div class="hyphen" lang="en" >

Das funktioniert. Zumindest auf dem Monitor. Aber es ist natürlich ein absolutes No-Go - nicht nur wegen des Kauderwelsch’, das Screen Reader dann ausgeben.

Was bleibt? - Fazit

Also alles noch Spielerei, nicht in der Praxis einsetzbar?
DOCH!
Es gibt einen Anwendungsfall, der geradezu nach “hyphens:auto” schreit: Das iPhone! Dort sind die Zeilen kurz, und das iPhone versteht die Deklaration.
Also ran ans CSS:

body {
    -webkit-hyphens: auto;
}

Das versteht nur der Safari, und es erfordert kein Verbiegen der Dokumentensprache. Und, weil die Silbentrennung jetzt dort ist, wo sie hingehört, nämlich im CSS, “verschluckt” sich auch der Screeen Reader (VoiceOver) nicht. Wer das Ergebnis sehen will, hier ein Testcase.
Hinweis: Die Testseite ist mit < body lang="en” > ausgezeichnet. Die Anzeige funktioniert also auch im Firefox 6. Wer sich die Seite mit VoiceOver im Safari anhört, weiß, warum das ein No-Go ist.

Nachtrag 08.11.2011

Firefox in der Version 8 versteht jetzt -moz-hyphens:auto, auch ohne die Vergewaltigung mittels lang="en". Und ältere Versione ignorieren diese Auszeichnung einfach. Weil das niemandem schadet, habe ich es sofort in meine Seiten eingebaut.

Nachtrag 19.11.2011

Und auch Safari/Mac in der aktuellen Version 5.1.1 kann jetzt Hyphenation. Ohne Die oben genannten VoiceOver-Probleme.

Kuriositäten im Firefox

Nobody is perfect. “Merkwürdige” Trennungen im Firefox, die mir so untergekommen sind.

• iPho-ne
• VoiceO-ver
• vi-elleicht
• App-le
• Seitende-sign