Sprung zum Inhalt [/]

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zur Liste der Kategorien | zum Archiv

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.


Accesskeys - eine Technik, die sich überholt hat

Sonntag, 11. Januar 2015

Accesskeys, die den Zugriff per Tastatur auf bestimmte Seiten und Inhalte einer Website erleichtern sollten, waren lange Zeit ein fester Bestandteil von barrierefreien Webseiten.
Auch auf meinen Seiten wurde diese Technik eingesetzt.
Ich habe mich entschieden, die Accesskeys nach vielen Jahren von meinen Seiten zu entfernen.

Begründung:

  • Es gab nie einen Standard. Das hatte zur Folge, dass jede Site ihre eigenen Accesskeys definierte. Seitenbesucher mussten also erst einmal herausfinden, welche Accesskeys auf einer bestimmten Site gelten, und sich diese — für jede Site unterschiedlichen — Keys merken.
  • Accesskeys können zu Konflikten mit Tastaturkombis führen, die im Betriebsystem oder im Browser des Benutzers wirksam sind. Dies können sogar vom Benutzer individuell konfigurierte Tastaturkombis sein. Es gibt also keine Tastenkombination, die sicher konfliktfrei arbeitet.
  • Nutzer von Screen Readern wurden gerne als Zielgruppe genannt. Gerade diese Personengruppe hat bessere, universell verwendbare Techniken, um auf Webseiten zu schnell navigieren.

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.


Das HTML5 audio Element - wieder einmal

Samstag, 27. Dezember 2014

Die Unterstützung von HTML5 im Allgemeinen, und des audio-Elements im Besonderen, durch Browser ist ständig im Fluss — zum Besseren!
Inzwischen unterstützt auch der aktuelle Opera-Browser im audio-Element das .mp3-Format. Das erleichtert den Einsatz des audio-Elements erheblich. Die Bereitstellung der Audiodateien im alternativen .ogg-Format, die bisher erforderlich war, um auch Opera-Browser zu bedienen, kann damit endgültig unterbleiben.

Eine nette Anwendung, die davon profitiert: Mein Audioplayer. Barrierefrei, funktioniert in allen aktuellen Browsern (auch iOS), und leicht individuell konfigurierbar.

Diesen Player stelle ich kostenlos zur Verfügung. Download auf dieser Seite: audio_tag.php.


Entspannt Lesen

Donnerstag, 18. Dezember 2014

Eva Papst führt, mit viel Liebe zum Detail, seit Jahren ihre Website aus-meiner-feder.at. Heute würden viele diese Website wohl als Blog bezeichnen; was die Sache nur zum Teil trifft.

Eva Papst, selbst blind, legt großen Wert darauf, dass ihre Leserschaft, keineswegs ausschließlich blinde oder sehbehinderte Menschen, auch optisch ansprechende und vor allem leicht zu lesende Seiten vorgesetzt bekommen. Seit einiger Zeit hat sie mir die Verantwortung für das Design ihrer Site übertragen, eine Aufgabe, die sie selbst aus nachvollziehbaren Gründen nicht erledigen kann.
Absolute Priorität hat dabei, dem Leser entspanntes Lesen zu ermöglichen, damit er sich auf die Inhalte konzentrieren kann. Im Zuge dieser Prioritätensetzung kam vor einiger Zeit neben dem Stil “dunkel", mit dem die Website ursprünglich online gegangen war, ein zweiter Seitenstil “hell” hinzu. Der dunkle Stil setzte helle Schrift auf dunklen Hintergrund, eine Darstellung, die zwar von manchen (auch sehbehinderten) Menschen als leichter lesbar empfunden wird, von anderen aber, vor allem bei längerem Lesen, als ermüdend.

Screenshot 1
Der Styleswitcher, das Auswahlmenü für den Seitenstil, auf der Desktop-Ansicht von “Aus meiner Feder”

Die zunehmende Nutzung mobiler Geräte macht natürlich auch vor Eva Papsts “Blog” nicht halt. Prinzipiell waren die Seiten zwar immer schon auch mit Smartphones zugänglich. Korrekte Technik — valides HTML und CSS — sorgten dafür. Aber eben nur prinzipiell. Das für Desktop-Monitore gestaltete Layout führte dazu, dass die Texte auf Smartphones nur mit Zoomen und ständigem Links-/Rechts-Scrollen lesbar waren.
Ein interessanter Aspekt in diesem Zusammenhang: Für Eva Papst selbst und ihre blinden Leser, die ein iPhone und den Screen Reader Voice Over benutzen, waren die Seiten auch auf dem iPhone ohne Einschränkungen lesbar und bedienbar. Dem Screen Reader ist es nämlich egal, wie winzig die Schrift auf dem Monitor dargestellt wird.

Nach dieser Vorrede: Ein mobiles Design musste her. Und es ist gut geworden, darf ich nicht ohne einen gewissen Stolz sagen.

Nachtrag: Eva Papst bloggt über die “Nachrüst-Aktion”.

Screenshot 2
Die Startseite von Aus meiner Feder auf dem iPhone. Links oben der “Hamburger Button” zum Auf- und Zuklappen des Navigationsmenüs

Das Konzept des mobilen Layouts von “Aus meiner Feder” — für Interessierte

weiterlesen…


Chance verpasst?

Freitag, 28. November 2014

Ein spannendes Experiment: Krautreporter

Zitat:

Krautreporter ist eine Community, die Journalismus im Netz ermöglichen möchte. Dafür nehmen wir uns Zeit — zum Recherchieren, Experimentieren, Diskutieren und natürlich zum Lesen.

Krautreporter hat per Crowdfunding über 1 Mio € Startkapital gesammelt. 90.000 € davon wurden für die Website (Software und Design) aufgewendet. Ein stolzes Budget.

Ja, die Website macht tatsächlich etwas her. Wenn, ja wenn man nicht

  • mobil bei geringer verfügbarer Bandbreite lesen will, oder
  • wegen einer Sehbehinderung auf einen Screen Reader angewiesen ist.

Was ist da schief gelaufen?

  • RWD (Responsive Web Design) ist heutzutage ein Muss für jede Agentur, die ein Projekt als zeitgemäß verkaufen will.
    Leider haben die Macher zwar berücksichtigt, dass Smartphones und Tablets über kleine Monitore verfügen. Aber auch an Smartphones Seiten mit bis zu 6 MB Gewicht auszuliefern, wovon lediglich 15 kB auf Text, also auf den Inhalt, entfallen? Smartphones werden nicht ausschließlich im WLAN oder mit LTE eingesetzt!
    Dabei wäre es mit etwas gutem Willen durchaus möglich, die Inhalte mobil-friendy anzubieten. Ich habe erst kürzlich einen Artikel zu diesem Thema verfasst.
  • Ganz schlechte Karten haben blinde und sehbehinderte Menschen, die Krautreporter mit Hilfe eines Screen Readers lesen wollen. Ohne auf Details einzugehen, darf ich hier stellvertretend 2 Fehler erwähnen, die es Screen Readern schwer machen, die Seiten korrekt wiederzugeben, und blinden und sehbehinderten Lesern, sich auf den Seiten zu orientieren:
    1. Die Seiten sind mit technischen Fehlern gespickt, und
    2. semantisch nicht bzw. sehr mangelhaft strukturiert (z. B. h2 für das Artikeldatum, aber keinerlei Gliederung der Artikel selbst durch Zwischenüberschriften).

Die Probleme lassen sich natürlich beheben. Leichter, und vor allem kostengünsiger wäre es allerdings gewesen, bereits in der Konzeptions- und Umsetzungsphase sowohl die Barrierefreiheit, als auch die mobile Nutzung entsprechend zu berücksichtigen.


Eine gemeinsame Zwischenablage für alle Geräte

Dienstag, 25. November 2014

Unter dem Titel “Pastebot kaputt? Command-C springt ein” habe ich vor einiger Zeit die App Command-C vorgestellt.
Ich denke, ich sollte auch noch beschreiben, warum die App für mich inzwischen zu einem täglich genutzten Handwerkszeug wurde.
Ich teste häufig nicht nur die Barrierefreiheit von Websites, sondern auch die Qualität von Websites auf mobilen Geräten. (Stichwort: AWD.) In diesem Zusammenhang ist es extrem hilfreich, wenn ich die Eingabe von (manchmal ellenlangen) URLs nicht auf dem iPhone vornehmen muss.

Auf dem MacBook

  • Ich habe die zu testende Webseite auf dem MacBook geöffnet.
  • cmd + L fokussiert das Eingabefeld für den URL
  • cmd + C kopiert den URL in die Zwischenablage
  • Shift + cmd + X öffnet den Command-C-Dialog
    Screenshot Command-C-Dialog
    Beim Anklicken des Command-C Icons in der Menüleiste öffnet sich der Dialog mit den installierten Geräten zur Auswahl.
  • Dann wähle ich mit den Pfeiltasten das Gerät, auf dessen Zwischenablage ich den Inhalt der MacBook-Zwischenablage kopieren will.
  • Enter schließt die Aktion ab, ein Hinweisfenster bestätigt den Erfolg.
    Screenshot Hinweisfenster
    Die Meldung: Clipboard shared successfully.
  • Falls ein Fehler auftritt, wird der im gleichen Hinweisfenster gemeldet.

Auf dem Gerät (iPhone, iPad)

wird die erfolgreiche Übermittlung angezeigt. Je nach Einstellung entweder auf dem Lock Screen, und / oder, wenn das Gerät entsperrt ist, als Banner oder Hinweis.

Screenshot Einstellungen auf dem iPhone
Auf dem Gerät gibt es unter Einstellungen umfangreiche Konfigurationsmöglichkeiten.
Screenshot Banner auf dem iPhone
Hier ist die Meldung als Banner dargestellt. Ein Tipp auf die Meldung öffnet den Browser mit dem übermittelten URL.

Falls der Inhalt der übermittelten Zwischenablage ein URL ist, wird beim Entsperren des Geräts, oder fallweise durch Antippen des angezeigten Bannners / Hinweises, der Browser mit der übermittelten URL gestartet.
Alle übermittelten Zwischenablage-Inhalte werden auch in der App selbst noch einmal aufgelistet. Die App dient so als eine Art History für die Zwischenablage. Selbstverständlich kann aus dieser Liste ein URL erneut aufgerufen werden.

Damit ist aber der Leistungsumfang von Command-C noch nicht vollumfänglich beschrieben. Alles, was die Zwischenablage aufnimmt, kann übertragen werden. Auch Bilder und beliebige Texte. Und ja, die Übertragung kann in jede beliebige Richtung erfolgen, also auf vom iPhone zum MacBook, oder vom iPhone zum iPad.
Damit ist Command-C beispielsweise die schnellste Möglichkeit, Fotos vom iPad auf MacBook oder iPad zu übertragen.

Das klingt alles komplizierter, als es in der Praxis ist.

Barrierefreiheit — Benutzung mit VoiceOver

  • Auf dem MacBook: Leider reichen meine VoiceOver-Kenntnisse nicht aus, um zu beurteilen, ob das Dialogfeld zur Auswahl des Zielgerätes bedienbar ist.
  • Auf dem iOS-Gerät: Die App ist grundsätzlich mit VoiceOver bedienbar. Da das Bedienungskonzept sich jedoch nicht ohne weiteres selbst erschließt, ist vermutlich eine Einweisung durch einen erfahrenen Nutzer erforderlich.

Wie finde ich den passenden Webhoster für mein Projekt?

Donnerstag, 20. November 2014

Aus gegebenem Anlass — so sagt man wohl — und weil immer wieder danach gefragt wird, darf ich die Frage hier (wieder einmal) beantworten. Nein, nicht mit der Nennung eines bestimmten Webhosters, sondern mit einer Beschreibung über die richtige Herangehensweise.

Einen Webhoster wählt man nicht alle Tage aus. Die Zusammenarbeit soll schließlich über viele Jahre halten. Daher ist eine systematische Vorgehensweise nötig.

Ich habe vor einiger Zeit schon einmal einen Artikel zu diesem Thema geschrieben, und darf die wesentlichen Kriterien bei der Wahl hier noch einmal beispielhaft aufführen:

  • Features
    • Verfügbarer Speicher
    • Traffic
    • Anzahl möglicher E-Mail-Accounts
    • Welche tdl (Top Level Domains) sind verfügbar?
    • FTP-Zugänge
    • Installierte Software
    • Cronjobs
    • SSL-Proxy
    • SSH-Zugriff
    • DNS Einstellungen
    • Viren/Spamfilter
    • … usw. usf.
  • Server-Verfügbarkeit (Historie)
  • Backup: Werden die Daten auf dem Server gesichert, für den Fall eines Hard- oder Softwareschadens?
  • Hotline / Service
    • Telefonisch - 7 Tage / 24 Stunden?
    • per E-Mail - Bearbeitungsdauer?
    • Brauche ich eventuell Support für eigene Scripte? Falls ja: Preis?
    • Wie schnell wird auf Probleme reagiert? Sind Techniker 24/7 verfügbar?

Zum Glück gibt es Portale, die einen objektiven und neutralen Vergleich von Webhostern ermöglichen. Beispielhaft möchte ich hier webhostingvergleich24.com nennen. (Dort gibt es übrigens auch einen umfangreichen Fragenkatalog, der wesentlich mehr Kriterien als die oben genannten umfasst.)
Das Wichtigste jedoch sind detaillierte Tests und Erfahrungsberichte über die einzelnen Hoster.

Verschaffe dir also einen Überblick über den Markt, über die unterschiedlichen angebotenen Leistungen, lese Tests und Kundenbeurteilungen, und suche den für dich passenden Anbieter aus.
Falsch wäre es meines Erachtens, nur ein einziges Kriterium zur Entscheidung heranzuziehen, etwa die im Supportforum gestellte Frage, ob der Betrieb eines Chat erlaubt ist. Deine Anforderungen werden möglicherweise im Laufe der Zeit umfangreicher. Vielleicht kommt später einmal ein Blog dazu, oder sogar eine ausgewachsene Webpräsenz. Auch dann soll dein Webhoster noch zu dir passen.

Zuletzt darf ich mich noch selbst aus meinem Supportforum zitieren:

Wenn du eine Vorauswahl getroffen hast, dann kontaktiere den Hoster deiner Wahl und stelle eine konkrete Frage. Aus der Reaktion auf deine Frage kannst du möglicherweise schon erkennen, ob dieser Hoster für eine langjährige Zusammenarbeit in Frage kommt, ob die “Wellenlänge” stimmt. Kam als Antwort nur eine halbautomatisch aus Textbausteinen zusammengestellte E-Mail? Oder wurde speziell auf dein Anliegen eingegangen?


Microsoft Office kostenlos: Word, Excel, Powerpoint für iPhone & iPad!

Donnerstag, 6. November 2014

Die Microsoft Office Programme gibt es jetzt kostenlos für iOS. Zur Nutzung ist lediglich ein kostenloser Microsoft Account erforderlich.

App Icon Winword Microsoft Word [iTunes Link]

App Icon Excel Microsoft Excel [iTunes Link]


App Icon Powerpoint Microsoft Powerpoint [iTunes Link]



Auf dem iPad fühlen sich Word und Excel richtig gut an. Und auf dem kleinen iPhone Monitor? Microsoft hat sich richtig Mühe gegeben, auch auf der eigentlich viel zu kleinen Arbeitsfläche alles Nötige unterzubringen. Aber mehr als ein Notbehelf kann das nicht sein.

Für mich das Highlight: Die Dropbox-Synchronisation, und damit die Möglichkeit, Dokumente auf verschiedenen Geräten zu bearbeiten.

Die VoiceOver Unterstützung ist perfekt. Eine Einschränkung muss ich machen: Das Editieren von Dokumenten unter iOS / VoiceOver ist generell, um es vorsichtig auszudrücken, schwierig. Nicht anders ist das natürlich mit Word-Dokumenten. Aber um das abschließend zu beurteilen, sind meine Kenntnisse mit VoiceOver nicht ausreichend.


Ältere Beitäge:

Kategorien:

Creative Commons Lizenzvertrag
Alle Artikel des Blogs Creative Commons CC BY-NC-SA 3.0 DE