Sprung zum Inhalt [/] Tastaturkürzel / Accesskeys [0]

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zur Liste der Kategorien | zum Archiv

Social Plugins - Facebook, Twitter und Google

Mittwoch, 20. August 2014

Nicht mehr ganz neu: Datenschützer mögen die Art nicht, wie die sozialen Dienste Facebook, Twitter und Google+ das Nutzerverhalten ausspionieren, wenn und sobald auf einer Seite die bekannten “Like"- und “Teilen"-Buttons eingebaut sind. (Ich mag das übrigens auch nicht.)
perun.net hat dazu gebloggt. Und auch gleich noch eine elegante Lösung publiziert: Statische Social Buttons. Elegant, schlanker Code, und vor allem: ich konnte den Code lesen, und verstehen, was dort passiert, bzw. nicht passiert. Klar, das ich die Lösung übernommen habe.

Leider funktioniert diese Lösung seit einiger Zeit nicht mehr. Facebook hat mal wieder was kaputtgeändert. Die sharer.php funktioniert nicht mehr. Und ich habe keine Lust, die aufwändige, auf stackoverflow beschriebene Lösung einzubauen. Weil ich mir ausrechnen kann, wann Facebook die API wieder kaputtändert.

Also zurück zur 2-Klick Lösung von heise.de.
jQuery Plug-In socialshareprivacy — Dokumentation

Egal, wie der aktuelle Stand bzgl. Datenschutz ist: Mir ist damit wohler, als mit den Standardbuttons. Ich will nicht, dass die Besucher meiner Seiten ausgeschnüffelt werden.

Ein Bild kann ich mir ersparen. Der geneigte Leser sieht es in diesem Artikel. Natürlich nur, wenn er den Artikel selbst aufruft, und nicht eine Übersichtsseite, Kategorie o. Ä.


Die Zwischenablage gemeinsam auf Mac, iPhone und iPad nutzen

Samstag, 16. August 2014

Schnell mal einen Link, ein Textschnipsel, oder ein Foto vom Mac auf das iPhone, vom iPhone auf das iPad oder oder … schieben. In jede Richtung.
Üblicherweise wird zu diesem Zweck E-Mail missbraucht.

Wesentlich eleganter geht es allerdings mit der iOS App
Pastebot [iTunes Link], derzeit 3,59 €

Funktion

Pastebot stellt gewissermaßen eine gemeinsam genutzte Zwischenablage dar. Was auf einem der Geräte kopiert wird, landet gleichzeitig auf allen Geräten, auf denen Pastebot läuft, und kann dort weiter verwendet werden, z. B. um einen Hyperlink im Browser zu öffnen, oder ein Bild in eine beliebige Anwendung einzufügen. Einzige Voraussetzung: gemeinsam genutztes WLAN.

Pastebot dient daneben auch als Archiv für die Zwischenablage. Die letzten 200 dorthin kopierten Schnipsel sind verfügbar.

Screenshot der iPhone App
Die in Pastebot abgelegten Schnipsel - Fotos, Text, eben alles, was durch den Copy-Befehl in die Zwischenablage gelegt wurde - stehen in Pastebot zur Verfügung. Zur Bearbeitung, oder zum Versenden auf andere Geräte.

Hinweis: Die iPhone App läuft auch auf dem iPad. Auf dem Mac ist zusätzlich die kostenlose App Pastebot Syn erforderlich.

Barrierefreiheit

Pastebot ist mit VoiceOver nicht bedienbar. :-(


NoteBox - die Sammel- und Versandzentrale

Freitag, 15. August 2014

NoteBox [iTunes Appstore Link] 4,49 €, bezeichnet sich selbst als GTD (Get Things Done) App. Ich würde die App als Sammel- und Versandzentrale für iOS bezeichnen.

Features

Die Oberfläche ist bewusst schlicht gehalten. Beim Öffnen der App wird ein Editorfenster geöffnet, in das man sofort eine Notiz, eine Idee oder was auch immer eingeben kann. Natürlich auch mit Siri.

Konfiguration

In den Einstellungen verbergen sich die Stärken und Besonderheiten der App.
Was das im Detail ist, kann man

(Anmerkung: Eine ordentliche Doku wär’ mir lieber. Kommt hoffentlich noch.)

Anwendung

Irgendwo in einer der oben genannten Quellen wird dann auch noch beschrieben, wie man aus einer Notiz-App eine GTD-App macht. Die App selbst hilft dabei nicht. Aber das ist meine persönliche Meinung. Vielleicht brauche ich so etwas ja gar nicht.

Was die App aber kann, und zwar gut, ist Sammeln und Verteilen von Informationsschnipseln. Fast alles, was man auf dem iPhone / iPad markiert und kopiert, wandert nach Installation von NoteBox nicht nur in die Zwischenablage, sondern gleichzeitig in eine neue, oder wahlweise in eine geöffnete Notiz. Und zwar dort in die Inbox.

Die in der Inbox gesammelten Notizen kann man dann:

  • Editieren (klar),
  • Verschieben. Wahlweise nach “Keep” (eine Art Read Later Ordner), oder Erledigt.
  • Oder an fast alles verschicken, was es in der iOS-Welt an denkbaren Adressaten gibt (soweit auf dem Gerät installiert):
    • Mail
    • (i)Message
    • Whatsapp
    • Facebook
    • Twitter
    • Dropbox
    • Evernote
    • Simplenote
    • Kalender

Bei der Fülle der Möglichkeiten fällt auf, dass Drucken (an Airprint) nicht möglich ist. Ich werde das mit dem Entwickler besprechen.

Screenshot
Der Screenshot zeigt nur einige der möglichen Sendeoptionen.

Sync zwischen mehreren Geräten

Das Synchronisieren zwischen mehreren Geräten, z. B. via WLAN, funktioniert reibungslos und ohne Zutun.

Anwendung

Ich schildere mal eines von vielen denkbaren Szenarien, das für mich Sinn macht:
Im Safari-Browser einen URL kopieren: NoteBox notiert, wenn es entsprechend konfiguriert ist, den Title der Seite und den URL.
In einer Notiz auf diesem Weg mehrere Webseiten zu einem bestimmten Thema sammeln.
Anschließend die Notiz in Evernote / Dropbox speichern, oder per Email weitergeben.

Barrierefreiheit

Die App ist durchgängig mit VoiceOver bedienbar.

Nachtrag 20.08.2014

Die aktuelle Version 1.0.2 unterstützt jetzt Airprint.
Nein, ich druckt jetzt nicht alle meine Notizen aus. Aber da ich die Airprint-Emulation Printopia einsetze (Beschreibung hier), kann ich ganz schnell ein PDF einer Notiz vom iPhone auf den Mac “zaubern".

Unglaublich: Nachdem ich den Artikel veröffentlicht hatte, habe ich dem Entwickler den “Airprint-Vorschlag” gemacht. Und heute, gerade mal 5 Tage später, ist das Update da. :-)


GPS Navigation

Sonntag, 10. August 2014

Aus Scobbler wurde Navi 2 wurde GPS Navigation by Scout
Navi 2 hatte ich vor längerer Zeit auf Barrierefreiheit, d. h. Benutzbarkeit mit VoiceOver, getestet. Und dem Entwickler mit zahlreichen Hinweisen geholfen, die schlimmsten Barrieren auszumerzen.

Seit einiger Zeit wird Navi 2 zusammen mit Scout und Telenav weiter entwickelt und vertrieben.
Die Neugier trieb mich, den Stand der Barrierefreiheit erneut anzutesten. Mit dem schon fast erwarteten Ergebnis: Die App wurde “aufgehübscht", und bei dieser Gelegenheit mal schnell für VoiceOver Nutzer unbrauchbar gemacht. Details erspare ich mir. Es hat keinen Sinn.

Immer mehr Apps, die nicht speziell für die Zielgruppe “VoiceOver-Nutzer” entwickelt werden, werden mit optischen Gimmicks aufgepeppt, und dabei leider für blinde Nutzer unbedienbar. Kein schöner Trend.


top: - 9000 ist böse

Samstag, 2. August 2014

Elemente nur für Screen Reader sichtbar machen. Ein Standardverfahren auf barrierefreien Seiten.
Tl;dr - if you’re not interested in accessibility
weiterlesen…


Audio- und Videoplayer barrierefrei

Das Thema barrierefreie Audio- und Videoplayer beschäftigt mich seit langer Zeit. Ich habe zu diesem Thema im Laufe von Jahren eine Vielzahl von Artikeln und Demos verfasst.

Es sieht fast so aus, als ob die Suche ein Ende hätte. HTML5 und Terrill Thomsons Able Player sei Dank.
Auf obiger Übersichtsseite werden eine Reihe von Demos verlinkt, mit allen denkbaren Optionen. Ich möchte folgende zwei Beispiele hervorheben:

Terrill Thomsons Able Player stellt alles in den Schatten, was ich gerne als „der beste bisher“ bezeichnet habe. Der Player ist Open Source und steht unter der freien MIT-Lizenz.
Able Player bei GitHub

Kollegen: Verwenden! Nicht nur blinde, seh- oder hörbehinderte Menschen werden es euch danken.


Neue App Dechiffr löst automatisch komplizierte Captchas

Donnerstag, 31. Juli 2014

Die Empörung über den CAPTCHA-Unfug hat die breite Öffentlichkeit erreicht. Nicht nur sehbehinderte Menschen ärgern sich über CAPTCHAs, die den Zugang zu vielen Seiten, Online-Shops, Kommentarfunktionen usw. für sie erschweren. Auch Der Postillion findet, dass das Thema wohl eine Satire wert ist, und meldet die Verfügbarkeit eines Programms, das CAPTCHAs automatisch knackt. Das Programm lautet angeblich auf den Namen Dechiffr.

Der Postillion weiß vermutlich nicht, dass es ein solches Programm tatsächlich längst gibt: Rumola
Und vermutlich ist sich Der Postillion nicht einmal der Tatsache bewusst, dass für viele Menschen ein solches Programm keineswegs ins Reich der Satire gehört, sondern bittere Notwendigkeit ist.

Ich benutze übrigens das Programm, obwohl ich nicht sehbehindert bin. Aus reiner Bequemlichkeit. Und auch, weil ich die Entwickler damit finanziell unterstütze. Der Dienst kostet nämlich ein paar Cents. Z. B. 0,79 € pro 50 gelöste CAPTCHAs.
Hier nocht ein Blogpost zu Rumola.


Speed - die Zweite

Donnerstag, 24. Juli 2014

Wie in meinem Blogpost Speed angekündigt, beschreibe ich heute kurz die Verwendung des picture-Elements in Verbindung mit picturefill.js, eine Alternative zu Adaptive Images
Eine der beiden Methoden (gibt es weitere?) sind im Zeitalter der mobilen Internetnutzung unverzichtbar. Es sei denn, man will die Mobilfunkanbieter auf Kosten der Nutzer bereichern, durch Generierung von unnötigem / unsinnigem Traffic.

Zuerst eine kurze Gegenüberstellung der beiden Methoden

Adaptive Images

Das picture-Element in Verbindung mit picturefill.js

  • Das picture-Element ist zukünfiger Bestandteil von HTML 5.1, und wird natürlich heute noch von keinem Browser unterstützt.
    Dennoch kann man es bereits verwenden. picturefill.js does the trick.
  • Es müssen mehrere Größen des jeweiligen Bildes erzeugt und auf den Server geladen werden. Dies bedeutet zwar zusätzlichen Aufwand, aber es ermöglicht auch eine weitgehende Optimierung der jeweiligen Alternativbilder.
  • Browser, die weder das picture-Element, noch picturefill.js verstehen, erhalten ein Alternativbild, das individuell festgelegt werden kann.
    Ich verwende als Alternativbild ein relativ kleines Bild, da ich davon ausgehe, dass ich es in diesem Fall mit einem alten, schwachbrüstigen System zu tun habe.

Und hier eine Demo

Um die Funktion zu testen, einfach die Fenstergröße des Browsers verkleinern / vergrößern.

PS: Beide Methoden funktionieren in allen modernen Browsern. Alte IE-Versionen zu unterstützen habe ich zunehmend weniger Lust.


Adblock Plus der Speicherfresser

Dienstag, 22. Juli 2014

Adblock Plus war für mich lange Zeit eines der wichtigsten Firefox Add-ons. Weil viele Werbetreibende es einfach übertreiben. Da hüpft und springt auf jeder zweiten Site irgend ein Banner. Entspanntes Lesen, den Inhalt der Seiten aufnehmen, wird zur Konzentrationsübung.
Adblock Plus macht damit ganz einfach Schluss.
Aber es macht Firefox kaputt. Zumindest den aktuellen Firefox Version 30. Der Speicherbedarf springt beim Aktivieren von Adblock Plus erst einmal um mindestens 100 MB nach oben. Schlimmer noch: Jede geöffnete Seite erhöht den Speicherbedarf weiter, und der Speicher wird auch beim Schließen der Seiten / Tabs nicht wieder freigegeben. Nach einiger Zeit belegt Firefox über 1 GB, und irgendwann wird Firefox unbenutzbar.
Anmerkung.: Ich verwende Firefox 64bit auf Mac OS X

In diesem Artikel wird das Problem genau beschrieben.

Nein, so geht das nicht. Adblock Plus deaktiviert.

Und jetzt? Was ist die Adblock-Alternative?

Mit etwas Handarbeit kann man auf häufig besuchten Seiten die schlimmsten Auswüchse auch ohne Adblock eliminieren. Mit dem Stylish-Add-on, und am besten einigen CSS-Kenntnissen. Zwei Beispiele habe ich in meinem Blog beschrieben. Auch die Twitter-Webseite habe ich mit Stylish entrümpelt. “Who to follow” und “Trends” ausgeblendet, und auch sonst einige Details nach meiner Vorstellung aufgehübscht.

Hier mein Stylish Stylesheet für Twitter:

@namespace url(http://www.w3.org/1999/xhtml);
 @-moz-document domain("twitter.com") {
 body {overflow-x:hidden; max-width:70em;}
 #page-outer {margin-left: 200px;}
 .roaming-module,
.WhoToFollow,
#trends-dialog,
.promo,
.trends-inner,
.user-rec-component,
.component-spacer,
.user-rec-dropdown.profile-actions,
.js-wtf-module,
.trends
    {display:none !important;}
 p {font-size:1em !important;
    line-height:1.4em !important;}
}

Speed

Samstag, 19. Juli 2014

Ich bin ein Speed-Freak. So lange ich „Web“ denken kann.
Aus den Zeiten von 56 kB Modems stammt mein Streben, zumindest die Startseite jeden Webauftritts so klein wie möglich zu gestalten. Ursprünglich war meine Zielmarke 50 kB.
Aus dieser Zeit stammt auch die Aussage

Wenn sich eine Seite nicht in 8 Sekunden aufbaut, klicken 30% der Besucher wieder weg.

Aus dieser Zeit stammt auch mein eigener Webauftritt. Mit gerade mal 64 kB für die Startseite. Ich gebe ja zu: Die Seite wirkt nicht sehr „modern“. Aber sie lädt verdammt schnell. In ca. 0,5 Sekunden.
Damit bin ich recht nahe am Ideal.

Wie nimmt ein User die Geschwindigkeit wahr
Quelle: radware
Legende:
0 - 100 ms Sofort
100 - 300 ms: Kurze, gerade eben wahrnehmbare Verzögerung
300 - 1000 ms: Die Maschine arbeitet
1000+ ms Die Gedanken (des Besuchers) wandern anderswohin.
10.000+ ms Die Aufgabe wird abgebrochen.

Es hat sich also nichts geändert. 8 bzw. 10 Sekunden Ladezeit werden vom User nicht akzeptiert. Anzustreben ist weniger als 1 (eine!) Sekunde.

Sehr wohl geändert haben sich aber die durchschnittlichen Seitengrößen:

Durchschnittliche Seitengrößen von 1995 bis 2014
Quelle: websiteoptimization.com
2003: 93 kB - 2014: 1,6 MB

Nein, ich rede nicht der Technik von 2003 das Wort. Moderne Seiten machen richtig Spaß. Aber nicht, wenn Sie 2 oder 3 MB schwer sind, und ich sie unterwegs im Mobilfunknetz aufrufe. Dabei sind viele Seiten Ihre MB gar nicht wert. Häufig ist es einfach Schlamperei (oder fehlendes Können?) der Seitenschreiberlinge. Man kann nämlich sehr gut grafisch ansprechende, ja sogar interaktive Seiten mit weniger als 1 MB erstellen. Und es gibt sie tatsächlich: Seiten, die in weniger als 1 Sekunde laden.

Selbstverständlich sollte heutzutage sein, dass Vorsorge getroffen wird für mobile Geräte und Menschen „on the road“.

So, genug des Grundsatzgeschwafels. Fakten her!

weiterlesen…


Ältere Beitäge:

Kategorien:

Tastaturkürzel

zum Seitenanfang