Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

EU Cookie Richtlinie

Donnerstag, 22. Oktober 2015

Der Hinweis auf den Einsatz von Cookies — kürzlich von mir noch als Cookie Warnung Irrsinn bezeichnet — wird anscheinend über kurz oder lang zwingend.
Siehe diesen Artikel im I LAW iT-Blog
Weil ich keine Lust habe, mich mit einer Abmahnung herumzuärgern, hab' ich in den sauren Apfel gebissen, und meine Website mit so einem Monstrum "verziert".

Screenshot vom iPhone
Die mobile Startseite von webdesign.weisshart.de mit dem Cookie-Hinweis am Seitenfuß

Folgende Bedingungen stellte ich mir selbst:

  • Kein Opt-in, sondern ein Hinweis auf die Datenschutzerklärung, wo die Opt-out-Möglichkeiten beschrieben werden.
  • Seitenaufbau darf nicht verlangsamt werden.
  • Keine fremde Ressource, d. h. kein zusätzlicher HTTP-Request.
  • Möglichst wenig Belästigung für den Besucher.

Die Lösung:

Ein einziger Codeschnipsel, den ich nach der Seitenüberschrift eingefügt habe:

<?php
if (!isset($_COOKIE['eu-cookie-irrsinn'])) {
$ablauf = (time() + (365 * 24 * 60 * 60)) * 1000;
echo '
<div id="eu-cookie-irrsinn" style="hier CSS für das div">
<p style="hier CSS für den Text">
Hier der angezeigte Text <a href="datenschutz.php">Weitere Infos</a>
</p>
<button style="hier CSS für den OK-Button"
onclick="document.cookie=\'eu-cookie-irrsinn=accepted; expires=\'+(new Date('.$ablauf.')).toGMTString();this.parentNode.parentNode.removeChild(this.parentNode);">
OK<dfn> &mdash; hier klicken um diese Anzeige dauerhaft zu verbergen.</dfn></button>
</div>
';
}
?>

Meine CSS-Angaben für das div:

style="background-color:#f1f1f1; opacity: .9; font-size: .9em; width:100%; position:fixed; bottom:0; left:0; z-index:100; border-top: 1px solid #aaa"

Damit wird der Hinweis am Seitenende fixiert. Wichtig insbesondere für die mobile Ansicht, um wenigstens den Seitenkopf nicht zu verstecken.
Warum Inline-CSS? Um sicherzustellen, dass der Hinweis nicht aufgrund einer race condition ungestylt angezeigt wird.

PageSpeed Insights zeigt, dass ich die Vorgabe "Seite darf nicht langsamer werden" einhalten konnte.

Nachtrag 24.01.2016

Wer sich, wie ich, nicht über diesen Irrsinn ärgern will: Es gibt ein Browser-Addon dagegen: I don't care about cookies — und Ruhe ist.


Apple Music und Sonos

Samstag, 4. Juli 2015

Natürlich muss ich Apple Music auch testen. Allerdings unter erschwerten Bedingungen. Doch der Reihe nach:

Mein Streaming-Dienst ist Spotify. Und weil ich zuhause natürlich nicht mit den quäkenden Notebook-/Tablet-/Smartphone-Lautsprechern zufrieden bin, wird Musik auf meinem Sonos-System abgespielt. Sonos und Spotify arbeiten ja nahtlos zusammen. (Noch) nicht aber Sonos und Apple Music.
Auf einem Umweg geht aber auch das: SonoAir heißt die App, die es ermöglicht.

Screenshot
Das Programmfenster von Sonoair. Dort gibt es eigentlich nach dem Programmstart nichts zu tun.

SonoAir macht Sonos AirPlay-fähig. Also Apple Music z. B. in iTunes starten, SonoAir starten, als Ausgabegerät den gewünschten (Sonos-)Raum wählen, und schon läuft's.

Leider ist SonoAir ein wenig tricky zu bedienen, und eine richtige Doku scheint es auch nicht zu geben. Ich musste mir die Infos im Web zusammensuchen, z. B. mit einer Google-Suche nach "Sonos iTunes".
Der Knackpunkt auf dem Mac ist die Aktivierung. Man darf nicht den AirPlay-Button in iTunes drücken, sondern muss mit alt-Klick auf das Lautsprecher-Icon in der Menüleiste den Raum wählen:

Screenshot
Hier wählt man das Ziel für AirPlay, den Sonos-Raum.

Test Codecheck - der beste Barcode Scanner für das iPhone? auch mit VoiceOver?

Donnerstag, 9. Februar 2012

Barcode checken auf dem iPhone war bisher die Domäne von barcoo. Und die Benutzung für blinde und sehbehinderte Menschen nicht immer frustfrei.

Die kostenlose iPhone App Codecheck verspricht Besserung. Codecheck ist sehr schnell. Sobald ein Barcode im Blickfeld der Kamera ist, wird fast verzögerungsfrei ausgelöst. Und ganz schnell ist auch das Produkt in der Datenbank gefunden - Verbindung zum Internet vorausgesetzt.

Screenshot
Screenshot
b

Für blinde und sehbehinderte Benutzer wird per In-App-Kauf die Erweiterung ScanGuide zum Preis von Euro 24,99 angeboten. ScanGuide gibt akustische Hilfestellung bei der Suche nach einem Barcode. In Kombination mit der schnellen Erkennung des Barcodes verbessert sich damit die praktische Benutzbarkeit für blinde und sehbehinderte Menschen erheblich. ScanGuide kann 5 mal kostenlos getestet werden.

Nachtrag 10.02.2012

Interessant ist, dass Codecheck auf die Nutzung des Blitzes verzichtet. Und dennoch - oder gerade deshalb? - vorhandene Barcodes so schnell erkennt, auch wenn die Beleuchtung kaum ausreicht, um das Objekt visuell auf dem Monitor zu erkennen. Das folgende Foto wurde unter exakt den gleichen Bedingungen aufgenommen, die Codecheck zur Erkennung genügen. Auch diesbezüglich hat Codecheck gegenüber z. B. barcoo deutlich die Nase vorn.
Screenshot


Prizmo - beste Scan-/OCR App für das iPhone - auch mit VoiceOver

Sonntag, 24. Juli 2011

Prizmo

Die beste Scan-/OCR App bisher. Allerdings mit 7,99 € auch die teuerste. Jedoch, wie sich zeigen wird, jeden Cent Preis-wert.

Bisher getestete Scan-/OCR Apps:

  • SayText
  • DocScanner
  • OCRTOOL

Prism0 bietet beim Start neben Texterkennung auch die Verarbeitung von Visitenkarten, Rechnungen u.a. an. Ich werde mich auf die Kernfunktion Texterkennung beschränken.

Nachdem ein Foto aufgenommen, oder aus dem Album ausgewählt wurde, gibt es in der Fußzeile folgendes Menü:

  • Links (drehen)
  • Rechts (drehen)
  • Freistellen
  • Perspektive
  • Weiß(abgleich)
  • Widerrufen

Links und rechts drehen ist eigentlich überflüssig. Texte werden erkannt, auch wenn das Foto nicht richtig ausgerichtet ist. Ja, sogar zwei gleichzeitig eingescannte Buchseiten werden richtig erkannt. Ein Feature, das man nur bei "großen" OCR Programmen kennt.

Freistellen und Perspektive helfen, wenn bei der Aufnahme die Kamera nicht exakt ausgerichtet war. Blinden Benutzern hilft dies wenig. Aber für diesen Fall gibt es ein geniales Hilfsmittel: den i-Fix Stand.

Foto iFix Stand

Podcast: http://www.apfel-fleger.de/Podcasts/index.php?id=8
Doku zum i-Fix Stand vom Hersteller: https://public.me.com/i5b/de/ dort: T-117 i-FIX-stand.pdf

Weißabgleich kann eigentlich nie schaden, und man sollte ihn buchstäblich "blind" durchführen.

Das aufgenommene Foto unserer Buchvorlage - vor und nach dem Weißabgleich:

Screenshot'vorher
Screenshot nachher

Die Buttons rechts von Weiß(abgleich) sind mit VoiceOver nur mit temporärer Standardgeste erreichbar.

Siehe iPhone-Benutzerhandbuch:

… temporäre Standardgeste: Auf aktivem Element Doppeltippen und (1 Sekunde lang) halten + Standardgeste: Standardgeste verwenden. Durch das Doppeltippen und kurzzeitige Halten wird das iPhone dazu veranlasst, die nachfolgende Geste als Standardgeste zu interpretieren. Sie können zum Beispiel die Stellung eines Schalters ändern, indem Sie doppeltippen und nach kurzem Halten und ohne Abheben des Fingers Ihren Finger bewegen.

Die Taste "weiter" startet die OCR. Und jetzt zeigt Prizmo seine stärkste Seite.
Die Texterkennung ist sehr schnell, wesentlich schneller als alle oben zitierten Alternativ-Apps. Und sehr gut. Original der erkannten Seite ohne Nachbearbeitung:

DER WATZMANN Eine alte Sage erzählt, daß einst im Berchtesgadener Land ein König gewalttätig über sein Volk herrschte. Er verachtete das Gute, liebte nur die Jagd, und seine Untertanen zitterten, wenn sie den Lärm der Hörner, das Gebell der Hunde und das Stampfen der Rosse hörten. Bei Tag und Nacht brauste die wilde Jagd durch Wälder und Klüfte, verfolgte das Wild und vernichtete die Saat.
Eines Tages erschien der König mit seinem Troß auf einer Waldtrift, wo eine Herde weidete. Vor der Hütte saß die Hirtin, ihr schlafendes Kind im Arm. Neben ihr lag der Wachhtmd.
Da warfen sich des Königs Rüden auf den Hirtenhund und rissen gleichzeitig die schreckensstarre Frau zu Boden. Der König kam heran und lachte. Als der herbeigeeilte Hirt auf die jaulende Meute einschlug, hetzte der König rasend vor Wut Knechte und Hunde auf den Hirten, der wie sein Weib und sein Kind von der Meute zerissen wurde. Da erhob sich ein dumpfes Brausen, und jetzt würgten die Hunde den König und seine Familie, deren Leiber schließlich zu marmorkaitem Fels erstarrten.
Dieser Stoff wurde zu einer der bekanntesten Sagen des deutschen Sprachraumes, als Ludwig Ganghofer in seinem populär gewordenen Roman "Die Martinsldause" die erste Besiedelung der Berchtesgadener Urwälder schilderte.
Der Watzmann gehört zu den wenigen Bergen, die so unverkennbar einmalig sind, daß sie zum Symbol und Wahrzeichen eines Ortes werden. Mögen sie auch von anderen Seiten vielen anderen Gipfeln ähnlich sehen, eine Seite ist jedoch so charakteristisch und ohne Parallele, daß sie sich tief und unvergeßlich dem Beschauer einprägt. Was wäre Zermatt ohne die schlanke Pyramide des Matterhoms, Chamonix ohne die Eiskulisse der MontblancGruppe, Heiligenblut ohne die Nadelspitze des Groß loc~ 13

Wie bei allen Scan-/OCR-Apps gilt natürlich: Das Ergebnis kann nur so gut sein, wie die Aufnahme: Ausschnitt - Beleuchtung - Ausrichtung - Verwacklungsunschärfe usw. Für blinde Benutzer gilt hier wieder: den iFix Stand benutzen.

Interessantes Detail am Rande: Bei Serifen-Schriften ist die Erkennung um Klassen besser als bei Sans-Serif-Schriften.

Sobald die Texterkennung abgeschlossen ist, wird ein Bearbeiten Seite angezeigt. An dieser Stelle kann man den Text lesen / von VoiceOver vorlesen lassen, oder sofort auf "Weiter" tippen.

Die Fußleiste auf der dann folgenden Seite beinhaltet folgende Buttons:

  • Vorlesen: Die zusätzlich zu kaufenden Sprachen sind für VoiceOver Nutzer erst mal überflüssig. Es sei denn, man will die eigebaute Übersetzungsfunktion nutzen.
  • Kopieren (in die Zwischenablage)
  • Album (Original oder bearbeitets Foto im Album speichern)
  • E-Mail

Fußleisten-Buttons rechts von E-Mail sind bei aktivem VoiceOver wieder mit temporärer Standardgeste erreichbar,

  • Mobile Me
  • Dropbox - exportiert in einen voreingestellten Ordner Prizmo Exports. (aber von dort kann man es ja mit DropFiler verschieben)
  • Evernote
  • CloudApp - keine Ahnung, was das ist.

Fazit:

Eine Scan-/OCR App, die wirklich brauchbare Ergebnisse liefert, die, optimale Bedingungen vorausgesetzt, kaum noch einer Nachbearbeitung bedürfen.


Eine Seite soll nicht auf sich selbst verlinken.

Sonntag, 6. Juni 2010

Eine berechtigte Forderung, wenn es um Usability im Allgemeinen, oder um Barrierefreiheit im Besonderen geht:

Eine Seite soll nicht auf sich selbst verweisen.

Es leuchtet ohne nähere Erklärung ein, dass das folgende Beispiel irritieren kann:

Du bist hier: Startseite - zur Startseite wechseln

Screenshot der Startseite mit Link zur StartseiteDieses Beispiel findet sich auf einer ansonsten technisch absolut sauber umgesetzten Seite. Der Seitenbetreiber mag mir nachsehen, dass ich ausgerechnet sein Projekt als negatives Beispiel zitiere. Im günstigsten Fall ist er mir für den Hinweis dankbar. Übrigens: Toscho nannte das Problem beim Namen: Deppenlink



Mehr als irritierend kann so etwas für Menschen sein, die nicht den Überblick über den ganzen Bildschirm haben. Zum Beispiel Benutzer von Screen Readern. Idealerweise sollte man die jeweils aktuelle Seite in einer Navigation nicht nur nicht verlinken, sondern auch mit einem Hinweis ausstatten, z. B.: "Standort:". Wie dies gedacht ist, zeigt folgender Screenshot aus der Navigation auf meiner Startseite, mit abgeschaltetem CSS (wie auch Screen Reader die Seite vorlesen):
Screenshot der Seitennavigation


Aber jetzt mein Rezept gegen den "Deppenlink"

Das Problem: Die Navigation wird per PHP in alle Seiten eingebunden. Immer die gleiche Navigation. Nun muss natürlich PHP entscheiden, welches die jeweils aktuelle Datei ist, und den Link auf sich selbst durch einen unverlinkten Text ersetzen.

Zuerst den Dateinamen der aktuellen Seite in eine Variable:
<?php $a = $_SERVER['PHP_SELF']; ?>

Und dann eine if-else Abfrage, hier am Beispiel eines Links, der zur Seite /index.php führt:

<?php
if ($a!="/index.php") {
echo '<a href="/">MStartseite</a>';
} else {
echo '<span class="cur"><dfn>Standort: </dfn>Startseite</span>';
}
?>

Anmerkung:
In der Praxis schreibe ich diese if-else Abfrage in Kurzform. Hier jedoch zugunsten der einfacheren Lesbarkeit die ausgeschriebene Form.

Wozu nun der span class="cur"? Nun, dieser Span kann jetzt individuell per CSS so gestylt werden, dass er zum Design der Seite passt.

Und was hat es mit /lt;dfn>Standort: </dfn> auf sich?
Der Hinweis "Standort:" soll nur von Screen Readern vorgelesen werden.
Eine einfache CSS-Regel erledigt dies:

dfn {
position:absolute;
left:-9000px;
width:0;
height:0;
overflow:hidden;
display:inline;
}


Anfrage wegen Webdesign

Samstag, 24. Januar 2009

Auf genau diese Anfrage habe ich gewartet:

Sehr geehrter Herr Weisshart,

Ich möchte meine Webseite neu gestalten.
Folgende Dinge sollen umgesetzt werden:

1) kreatives Design
2) Barrierefreiheit
3) Benutzerfreundlichkeit
4) geschützte Mail (Kontakt) Formulare
5) Management-System zur Selbstverwaltung von Inhalten.

… sowie weitere 16 Punkte, u. a. Forum, Besucherzähler, Bezahlsystem, Suchfunktion usw.

Als Gegenleistung kann ich anbieten:
… eine Linkpartnerschaft ist selbstverständlich und darüber hinaus würde ich Sie gesondert als Webdesigner in meiner Webseite aufführen. Wenn Sie möchten, können wir auch einem kleinen Banner von Ihnen einbauen. Da dies ein Thema der Zukunft ist, können Sie u. U. zur Erweiterung des Projektes immer wieder Tätig werden. Selbstverständlich dürfen Sie, sofern wir uns einig werden, dieses Projekt als Referenz in Ihrer Webseite führen.

Jetzt hoffe ich nur, dass mir diesen Auftrag kein Kollege vor der Nase wegschnappt. Zu diesen Bedingungen möchte ich nämlich unbedingt "immer wieder tätig werden".


Big Brother Google Analytics

Montag, 13. Oktober 2008

Gemäß einem Bericht von futurezone.ORF.at haben über 80% aller gut besuchten Webseiten in Österreich und in Deutschland Google Analytics eingebaut.
Google analysiert diese Nutzungsdaten und … hat Kenntnis aller Analytics-basierten Webseiten, die der Nutzer besucht hat. Google kann die so erlangten Nutzungsdaten für weitere eigene Auswertungen verwenden.

Eine Zusammenführung dieser Nutzungsdaten mit denen anderer Google-Dienste ist möglich und wird generell von Google bestätigt. Dadurch hat Google die Möglichkeit, über Surfer im Internet detaillierte Nutzungs- und Interessenprofile zu erstellen und diese vor allem für Werbezwecke zu verwenden. All dies erfolgt regelmäßig ohne das Wissen der Betroffenen.

Quelle: https://www.datenschutzzentrum.de/presse/20080807-google-analytics.htm

Ein Indiz dafür, dass und in welchem Umfang Google Daten über das Nutzerverhalten speichert und auswertet, findet sich auch in den Nutzungsbedingungen für Google Analytics unter dem Punkt 8.1. Datenschutz.

Wie schon erwähnt hat der Besucher in aller Regel beim Besuch einer beliebigen Webseite keinerlei Kenntnis von all dem.

Aber es gibt Abhilfe:
Counterpixel, eine Erweiterung für den Firefox, zeigt in der Statusleiste, ob Analytics auf einer besuchten Seite installiert ist.
Aber Achtung: Counterpixel zeigt nur an, ob auf einer Seite Google Analytics installiert ist, verhindert aber nicht das Auslesen, Speichern und Weiterverarbeiten von Nutzungsdaten.

Wie kann man nun verhindert, dass unerwünscht Daten von Analytics gelesen und übermittelt werden?

Ich setze zu diesem Zweck Adblock Plus für Firefox mit einer entsprechenden Filterregel ein.

Eine ausführliche Anleitung zu diesem Thema findet sich bei https://www.datenschutzzentrum.de/tracking/schutz-vor-tracking.html


Das Kleingedruckte

Freitag, 16. Mai 2008

Die Fa. tomtom. ein namhafter Hersteller von Navigationssystemen, hat den Begriff "Das Kleingedruckte" offensichtlich sehr wörtlich genommen.
Die Lizenzbedingungen für Kartenmaterial sind in einer Schriftgröße von ca. 1mm gedruckt.
Hier der Versuch, das Kunstwerk als eingescanntes Bild wiederzugeben. Es ist im Original ca. 9 × 9 cm groß, und umfasst ca. 65 Zeilen.
Lizenzbedingungen tomtom Kartenmaterial


Screenreader - wie Blinde surfen

Samstag, 18. Dezember 2004

Zu den wichtigsten Elementen auf einer Webseite zählt die Navigation. Wenn eine Seite wirklich für Alle zugänglich sein soll, dann muß auch und vor allem die Navigation unter allen denkbaren Bedingungen funktionieren.
Daß meine Seite auch unter Extrembedingungen zugänglich ist, dafür steht das folgende Beispiel:
Die Navigation, wie sie von Vorlesesoftware (sogenannten Screenreadern) "gesehen" wird,
hier zum Anhören als Flash Live Stream,
und hier zum download im mp3 Format (87 kB)

Dank an Eva Papst für die Audio Datei.


Archiv:

Kategorien:

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