Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Facebook Statusupdates twittern

Montag, 24. Februar 2014

Facebook hat eine Funktion eingebaut, um deine Statusupdates automatisch auch auf Twitter zu veröffentlichen.

Vorab eine Warnung:

Wenn deine Freunde sowohl Facebook als auch Twitter verwenden, dann kann dieses Doppelposting schnell als Belästigung aufgefasst werden. Vor allem, wenn du auf Facebook nur kuze Meldungen a la „Guten Morgen bla bla …“ einstellst. Ich selbst habe deswegen schon den Einen oder Anderen entfolgt.
Allenfalls angebracht ist diese Vorgehensweise, wenn du auf Facebook längere Artikel einstellst, die dann auf Twitter angeteasert werden sollen. Facebook ist dann für Twitter so etwas wie die verschiedenen Twitloger-Dienste.

Die Technik

ist in diesem Artikel beschrieben.

Links in Statusupdates

Umfangreiche Facebook Statusupdates werden häufig auch Links enthalten. Facebook wandelt URLs in Statusupdates automatisch in eine Vorschau mit einem Bild und einem Teasertext um.

Screenshot
Die eingegebene URL (hier: http://webdesign.weisshart.de) wird von Facebook in eine Vorschau umgewandelt.

Ein Fallstrick

Kurze Facebook-Statusupdates werden einschließlich etwaiger enthaltener Links an Twitter übergeben.
Längere Texte jedoch werden wegen der Twitter-eigenen Beschränkung auf 140 Zeichen beschnitten. Ein Link im Tweet verweist auf den Facebook-Statusupdate.
Wenn jedoch der Statusupdate einen Link enthält, dann wird dieser Link in den Tweet eingefügt, und nur dieser Link. Der Tweet enthält dann nur die ersten 100 oder so Zeichen des Facebook-Statusupdates, und den dort eingefügten Link. Ein Verweis auf den kompletten Text des Facebook-Statusupdates fehlt.
Dies kann nicht der Sinn der Verknüpfung Facebook zu Twitter sein.

Abhilfe

Die Vorschau im Facebook-Statusupdate muss vor dem Posten gelöscht werden (das kleine x rechts oben in der Vorschau). Nur die URL darf stehen bleiben.


Ctrl-Alt-Del auf dem Mac

Sonntag, 23. Februar 2014

Crtl + Alt + Del, oder Strg + Alt + Entf, vulgo Affengriff. Es gibt wohl keinen Windows-Nutzer, der diese wichtige Tastenkombination nicht kennt, um hängende Programme zu beenden, oder ein eingefrorenes System neu zu starten.

Auf dem Mac OS X braucht man so etwas nicht.
Wohl deshalb gibt es keine Entfernen (Del/Entf)-Taste auf dem Mac. (Gibt es natürlich auch: Fn + Zurück-Taste.)

Spaß beiseite:
Auch auf dem Mac gibt es eine Tastenkombination, die ein sofortiges Beenden von Programmen ermöglicht: cmd + alt + esc (Apfeltaste + Wahltaste + esc).

Screenshot des Dialogfensters
Das Dialogfenster zeigt alle laufenden Programme. Das Programm, aus dem heraus cmd + alt + esc gedrückt wurde, ist fokussiert (in diesem Fall Firefox).

Schöner lesen auf dem iPhone - die Dritte

Samstag, 22. Februar 2014

Webseiten lesen auf dem iPhone - immer noch Glücks- und/oder Geduldssache, weil viele Seiten eben noch nicht responsive sind, also nicht für den kleinen Monitor optimiert. Klar, man kann die Bildschirmanzeige mit verschiedenen Techniken vergrößern, und dann so lange Hin- und Herzoomen, bis einem das zu blöd wird.
Ich greife in solchen Fällen gerne auf Readability zurück (Readability fürs iPhone). Leider führt Readability ein Neuladen der Seite durch. Und das erfordert gerade bei großen, überladenen Seiten einige Geduld, und eine schnelle Anbindung ans Web.

Eine Alternative bietet der iCab Browser (iTunes Link 1,79 Euro). Dort ist Readability „eingebaut“, und wesentlich schneller, und auch stabiler.

Screenshot 1
spiegel.de nach dem Aufruf im iPhone Browser. Ein „Mäusekino“.

Anm.: Klar, Spiegel bietet auch eine App, die speziell für Smartphones optimiert ist. Die Seite dient hier nur als Beispiel, um die Leistungsfähigkeit von Readability zu demonstrieren.

Screenshot 2
Nach dem Tipp auf das Brillensymbol rechts oben öffnet sich ein Auswahlmenü mit den Optionen „Später lesen“, „Jetzt lesen“ und „Leseliste“
Screenshot 3
Nach der Auswahl „Jetzt lesen“ zeigt sich die Seite aufgeräumt, und bereit zum komfortablen Lesen.

Barrierefreiheit:

iCab ist mit VoiceOver bedienbar. Auch die Readability-Funktionalität. Das genannte Brillensymbol wird von VoiceOver als „Leseliste“ gelesen.


Desktop vs. Mobile

Freitag, 21. Februar 2014

Vor einem Jahr prognostiziert, heute Realität: Tablets und Smartphones auf breiter Front im Vormarsch.

2 Tortendiagramme
Links: 2014
Desktop (blau) 75,3%, Tablet (gün) 17,4%, Smartphone (rot) 7,3%

Rechts: 2013
Desktop 89,4%, Tablet 7,1%, Smartphone 3,5%

Der Anteil mobiler Geräte beim Surfen im Web ist innerhalb eines Jahres von 10% auf 25% angestiegen. Bei diesen Zahlen handelt es sich keineswegs um meine eigene Site, sondern um eine Site, deren Besucher bestimmt nicht besonders technikaffin sind: Urlaub auf dem Bauernhof.
Was das für Webworker, aber auch für Kunden bedeutet, muss ich wohl nicht besonders hervorheben. Und wie ich das umsetze, kann man z. B. auf dieser Site sehen. (Bitte auch mit dem Smartphone anschauen.)


PDFs unterschreiben

Mittwoch, 19. Februar 2014

Bitte drucken Sie das anhängende PDF aus, unterschreiben Sie es, scannen Sie es ein und schicken Sie es per E-Mail zurück.

Wie bitte? Geht‘s noch? Web 1.0 lässt grüßen.

Eleganter geht das mit dem Adobe Reader.

Screenshot 1
Rechts oben die Option „Signieren“ anklicken. Dann auswählen zwischen: „Text hinzufügen“, „Häkchen hinzufügen“ oder „Unterschrift platzieren“

Hinter der Option „Signieren“ steckt also mehr. Damit kann man jedes PDF ausfüllen, auch wenn dies vom Ersteller nicht vorgesehen war.
Der Wermutstropfen: Da sich dies alles auf einer rein grafischen Oberfläche abspielt, sind Benutzer von Screen Readern und Tastaturnutzer leider außen vor.

Screenshot 2
In dem Fenster, das sich öffnet, wählt man „Bild verwenden“, um eine vorher eingescannte Unterschrift zu verwenden.

Nach dem Bestätigen und Einfügen kann die Unterschrift / das Bild in der Größe skaliert und positioniert werden, wie in einem Textbearbeitungsprogramm.
Das fertige PDF speichern, und als E-Mail-Anhang schicken. Nix ausdrucken oder so.


Ein barrierefreier Audio-Player - Version 3.0

Dienstag, 18. Februar 2014

Am 01. Dezember 2010 habe ich den AAP-Player vorgestellt, den (damals) besten barrierefreien Audio-Player.
Inzwischen ist einiges passiert: Der Yahoo! Media Player, der als Fallback erforderlich war für Browser, die das HTML5 audio-Tag nicht unterstützen, wurde eingestellt. Damit wäre der AAP-Player „eigentlich“ unbrauchbar. Wenn, ja wenn nicht inzwischen die Unterstützung des HTML5 audio-Tags fast allgemein als gegeben zu bezeichnen wäre. Wenn man bereit ist, den IE 8 und älter, und den Opera nicht (mehr) zu unterstützen, dann kann man inzwischen auf das Fallback verzichten. Und dafür Smartphones und Tablets bedienen.

Da der Entwickler des AAP-Players Terill Thomson diesen Schritt (noch) nicht gegangen ist, habe ich mal ein wenig mit der letzten veröffentlichten Version 3.0 gespielt.

Im Einzelnen:

  • Ich habe die - nicht mehr funktionierende - Fallback Lösung Yahoo! Mediaplayer entfernt
  • Dafür teste ich mittels Modernizr, ob das audio-Tag und .mp3 Dateien unterstützt werden. Falls nein, gebe ich lediglich einen entsprechenden Hinweis aus.
  • Um die kleinen Smartphone-Monitore zu unterstützen, habe ich ein wenig am CSS geschraubt. Und vor allem das entsprechende, für ordentliche Darstellung auf Smartphones unentbehrliche Metatag ins HTML eingefügt:
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />

Das Ergebnis ist in dieser Demo zu sehen bzw. zu hören.
Und das Hören bezieht sich auch auf Screen Reader und auf Tastaturnutzer ohne Maus. Der Player ist nämlich nach wie vor ein Vorbild an Barrierefreiheit.


Archiv:

Kategorien:

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