Archiv ‘Web’

Sonntag, 4. Januar 2015

Remember The Milk lädt nicht mehr

Frisch zurück aus den Ferien kämpfte ich mit dem Zugriff auf meine Taskliste, welche ich mit der SaaS-Anwendung Remember The Milk verwalte. Wenn ich diese Seite in Safari aufrief, erschien einzig der blaue Hintergrund des Teasers, ohne dass aber die Lade-Animation erschien. In Firefox konnte ich mich problemlos in die Anwendung einloggen.

Ein Blick auf die Web Developer-Konsole in Safari gab mir einen ersten Hinweis, wo das Problem lag:

Safari Web Developer Console

Safari akzeptierte das SSL-Zertifikat für die Server s1.rtmcdn.net und s4.rtmcdn.net nicht (mehr). Offenbar hatte Firefox gleichzeitig kein Problem damit, die Server anzusprechen und Ressourcen von dort zu laden. Rückblickend vermute ich, dass Firefox eine eigene Liste vertrauenswürdiger CA Root-Zertifikate mitbringt und nicht auf die OS X-Zertifikate abstellt.

Nach etwas herumpröbeln entschied ich mich, Remember The Milk in Chrome zu öffnen. Der Google-Browser, welcher auch auf WebKit aufsetzt, lud die Applikation ebenfalls nicht, gab aber wenigstens eine deutlich klarere Fehlermeldung von sich:

Google Chrome SSL Error

… server presented a certificate that is not yet valid.

Hä? Irgendetwas war also definitiv mit dem Zertifikat nicht in Ordnung, welches von RTM eingesetzt wird. Ein Klick auf den durchgestrichenen https: zeigte mir Details zur Zertifikatskette an. Ich folgte der Kette bis zum Ursprung des Fehlers und sah folgende Fehlermeldung:

DigiCert High Assurance EV Root CA: This certificate has expired

Das Zertifikat ist seit dem 26. Juli 2014 nicht mehr gültig? Wieso ich in all dieser Zeit keine Probleme mit dem Zugriff auf RTM hatte, ist mir schleierhaft — evtl. haben die Entwickler erst kürzlich auf dieses Zertifikat gewechselt.

Das war die gesuchte Information. Mittels einer Google-Suche stiess ich äusserst rasch auf einen Blog-Artikel von DigiCert, der genau dieses Problem beschrieb und eine einfache Lösung anbot:

Fix for an Expired Intermediate SSL Certificate Chain

In meiner OS X Keychain war wie in den Screenshots von DigiCert beschrieben ein (abgelaufenes) DigiCert High Assurance EV Root CA abgelegt, welches problemlos gelöscht werden konnte. Keychain schliessen, Safari schliessen und neu öffnen — und ich konnte mich wieder in Remember The Milk einloggen.

Tags: , , , , , , , ,
Labels: Web

Keine Kommentare | neuen Kommentar verfassen

Montag, 15. Dezember 2014

Wenn man das SWISS-Osterei partout nicht im Adventskalender 2014 finden kann …

… ja dann hilft nur die gute, alte Web-Entwickler-Konsole:

Swiss Adventskalender 2014

Tags: , , , , , , , ,
Labels: Web

Keine Kommentare | neuen Kommentar verfassen

Montag, 15. Dezember 2014

Wieder einmal: Wie ich Video-Streams von News-Sendungen herunterlade

Mittels eines Cron-Scripts lade ich jede Stunde alle YouTube-Links in meinen Remember The Milk-Taskliste auf mein NAS, damit ich diese dann zu Hause mit Air Video auf meinen Apple TV (und somit 55″ Plasma) streamen kann.

Manchmal komme ich aber auch an News-Beiträgen von Fernsehanstalten vorbei, welche nicht auf YouTube angeboten werden und mit youtube-dl nicht heruntergeladen werden können.

Um dieser Videos trotzdem habhaft zu werden ist (leider) noch einiges an Handarbeit nötig. In der Regel streamen Fernsehanstalten solche Inhalte als f4f („F4F is Adobe’s fragmented MP4 or FLV file format for HTTP Dynamic Streaming“).

Als Beispiel nehmen wir ABC’s David Muir Exclusive Backstage Interview With Apple CEO Tim Cook.

Nachdem man die Web-Site im Browser der Wahl geöffnet hat, startet man die Web Developer-Konsole, schaltet auf die Ansicht der HTTP-Requests und startet anschliessend das Video. Im Chaos der aufgerufenen Assets suchen wir das sogenannte f4m-Manifest — eine XML-Datei, die dem Videoplayer sagt, wo er die Fragmente des Video-Streams findet.

Obwowhl ich Firefox längst totgeschrieben habe — ich habe die Erfahrung gemacht, dass dieser Browser die Netzwerkrequests am intuitivsten aufbereitet, um am schnellsten zum Ziel zu kommen. Nicht zuletzt, weil es eine Spalte mit dem Typ des Requests gibt, die es äusserst einfach macht, nach dem Typ f4m Ausschau zu halten.

Hier die Datei für obiges Video vom September 2014:

/tmp/temp_textmate.DgGpNM:2: warning: variable $KCODE is no longer effective; ignored
<?xml version="1.0" encoding="UTF-8"?>
<manifest xmlns="http://ns.adobe.com/f4m/1.0" xmlns:akamai="uri:akamai.com/f4m/1.0">
  <akamai:version>2.0</akamai:version>
  <akamai:bw>5000</akamai:bw>
  <id>/abcnews/2014/09/140909_wn_muir7_1837_,500,700,900,1200,1600,2000,2500,.mp4.csmil_0</id>
  <streamType>recorded</streamType>
  <akamai:streamType>vod</akamai:streamType>
  <duration>200.968</duration>
  <streamBaseTime>0.000</streamBaseTime>
  <bootstrapInfo profile="named" id="bootstrap_0">AAAAi2Fic3QAAAAAAAAAAQAAAAPoAAAAAAADEQgAAAAAAAAAAAAAAAAAAQAAABlhc3J0AAAAAAAAAAABAAAAAQAAACEBAAAARmFmcnQAAAAAAAAD6AAAAAADAAAAAQAAAAAAAAAAAAAXcAAAACEAAAAAAALuAAAAIwgAAAAAAAAAAAAAAAAAAAAAAA==</bootstrapInfo>
  <bootstrapInfo profile="named" id="bootstrap_1">AAAAi2Fic3QAAAAAAAAAAQAAAAPoAAAAAAADEQgAAAAAAAAAAAAAAAAAAQAAABlhc3J0AAAAAAAAAAABAAAAAQAAACEBAAAARmFmcnQAAAAAAAAD6AAAAAADAAAAAQAAAAAAAAAAAAAXcAAAACEAAAAAAALuAAAAIwgAAAAAAAAAAAAAAAAAAAAAAA==</bootstrapInfo>
  <bootstrapInfo profile="named" id="bootstrap_2">AAAAi2Fic3QAAAAAAAAAAQAAAAPoAAAAAAADEQgAAAAAAAAAAAAAAAAAAQAAABlhc3J0AAAAAAAAAAABAAAAAQAAACEBAAAARmFmcnQAAAAAAAAD6AAAAAADAAAAAQAAAAAAAAAAAAAXcAAAACEAAAAAAALuAAAAIwgAAAAAAAAAAAAAAAAAAAAAAA==</bootstrapInfo>
  <bootstrapInfo profile="named" id="bootstrap_3">AAAAi2Fic3QAAAAAAAAAAQAAAAPoAAAAAAADEQgAAAAAAAAAAAAAAAAAAQAAABlhc3J0AAAAAAAAAAABAAAAAQAAACEBAAAARmFmcnQAAAAAAAAD6AAAAAADAAAAAQAAAAAAAAAAAAAXcAAAACEAAAAAAALuAAAAIwgAAAAAAAAAAAAAAAAAAAAAAA==</bootstrapInfo>
  <bootstrapInfo profile="named" id="bootstrap_4">AAAAi2Fic3QAAAAAAAAAAQAAAAPoAAAAAAADEQgAAAAAAAAAAAAAAAAAAQAAABlhc3J0AAAAAAAAAAABAAAAAQAAACEBAAAARmFmcnQAAAAAAAAD6AAAAAADAAAAAQAAAAAAAAAAAAAXcAAAACEAAAAAAALuAAAAIwgAAAAAAAAAAAAAAAAAAAAAAA==</bootstrapInfo>
  <bootstrapInfo profile="named" id="bootstrap_5">AAAAi2Fic3QAAAAAAAAAAQAAAAPoAAAAAAADEQgAAAAAAAAAAAAAAAAAAQAAABlhc3J0AAAAAAAAAAABAAAAAQAAACEBAAAARmFmcnQAAAAAAAAD6AAAAAADAAAAAQAAAAAAAAAAAAAXcAAAACEAAAAAAALuAAAAIwgAAAAAAAAAAAAAAAAAAAAAAA==</bootstrapInfo>
  <bootstrapInfo profile="named" id="bootstrap_6">AAAAi2Fic3QAAAAAAAAAAQAAAAPoAAAAAAADEQgAAAAAAAAAAAAAAAAAAQAAABlhc3J0AAAAAAAAAAABAAAAAQAAACEBAAAARmFmcnQAAAAAAAAD6AAAAAADAAAAAQAAAAAAAAAAAAAXcAAAACEAAAAAAALuAAAAIwgAAAAAAAAAAAAAAAAAAAAAAA==</bootstrapInfo>
  <media bitrate="495" url="0_a3ed2f8d8e5b9694_" bootstrapInfoId="bootstrap_0">
    <metadata>AgAKb25NZXRhRGF0YQgAAAAMAAhkdXJhdGlvbgBAaR752yLQ5QAFd2lkdGgAQIAAAAAAAAAABmhlaWdodABAcgAAAAAAAAANdmlkZW9kYXRhcmF0ZQBAeSO4tL3p2AAJZnJhbWVyYXRlAEA99wg+h62+AAx2aWRlb2NvZGVjaWQAQBwAAAAAAAAADWF1ZGlvZGF0YXJhdGUAQFdnYcJYreUAD2F1ZGlvc2FtcGxlcmF0ZQBA5YiAAAAAAAAPYXVkaW9zYW1wbGVzaXplAEAwAAAAAAAAAAZzdGVyZW8BAQAMYXVkaW9jb2RlY2lkAEAkAAAAAAAAAAhmaWxlc2l6ZQBBZ8IggAAAAAAACQ==</metadata>
  </media>
  <media bitrate="694" url="1_a3ed2f8d8e5b9694_" bootstrapInfoId="bootstrap_1">
    <metadata>AgAKb25NZXRhRGF0YQgAAAAMAAhkdXJhdGlvbgBAaR752yLQ5QAFd2lkdGgAQIQAAAAAAAAABmhlaWdodABAdoAAAAAAAAANdmlkZW9kYXRhcmF0ZQBAgs/By82odgAJZnJhbWVyYXRlAEA99wg+h62+AAx2aWRlb2NvZGVjaWQAQBwAAAAAAAAADWF1ZGlvZGF0YXJhdGUAQFdnYcJYreUAD2F1ZGlvc2FtcGxlcmF0ZQBA5YiAAAAAAAAPYXVkaW9zYW1wbGVzaXplAEAwAAAAAAAAAAZzdGVyZW8BAQAMYXVkaW9jb2RlY2lkAEAkAAAAAAAAAAhmaWxlc2l6ZQBBcKoP4AAAAAAACQ==</metadata>
  </media>
  <media bitrate="894" url="2_a3ed2f8d8e5b9694_" bootstrapInfoId="bootstrap_2">
    <metadata>AgAKb25NZXRhRGF0YQgAAAAMAAhkdXJhdGlvbgBAaR752yLQ5QAFd2lkdGgAQIQAAAAAAAAABmhlaWdodABAdoAAAAAAAAANdmlkZW9kYXRhcmF0ZQBAiQ24xGUM/gAJZnJhbWVyYXRlAEA99wg+h62+AAx2aWRlb2NvZGVjaWQAQBwAAAAAAAAADWF1ZGlvZGF0YXJhdGUAQFdnYcJYreUAD2F1ZGlvc2FtcGxlcmF0ZQBA5YiAAAAAAAAPYXVkaW9zYW1wbGVzaXplAEAwAAAAAAAAAAZzdGVyZW8BAQAMYXVkaW9jb2RlY2lkAEAkAAAAAAAAAAhmaWxlc2l6ZQBBdXMc8AAAAAAACQ==</metadata>
  </media>
  <media bitrate="1194" url="3_a3ed2f8d8e5b9694_" bootstrapInfoId="bootstrap_3">
    <metadata>AgAKb25NZXRhRGF0YQgAAAAMAAhkdXJhdGlvbgBAaR752yLQ5QAFd2lkdGgAQIQAAAAAAAAABmhlaWdodABAdoAAAAAAAAANdmlkZW9kYXRhcmF0ZQBAkTU4pmS0SwAJZnJhbWVyYXRlAEA99wg+h62+AAx2aWRlb2NvZGVjaWQAQBwAAAAAAAAADWF1ZGlvZGF0YXJhdGUAQFdnYcJYreUAD2F1ZGlvc2FtcGxlcmF0ZQBA5YiAAAAAAAAPYXVkaW9zYW1wbGVzaXplAEAwAAAAAAAAAAZzdGVyZW8BAQAMYXVkaW9jb2RlY2lkAEAkAAAAAAAAAAhmaWxlc2l6ZQBBfKCEIAAAAAAACQ==</metadata>
  </media>
  <media bitrate="1593" url="4_a3ed2f8d8e5b9694_" bootstrapInfoId="bootstrap_4">
    <metadata>AgAKb25NZXRhRGF0YQgAAAAMAAhkdXJhdGlvbgBAaR752yLQ5QAFd2lkdGgAQIQAAAAAAAAABmhlaWdodABAdoAAAAAAAAANdmlkZW9kYXRhcmF0ZQBAl3KVnpj2SgAJZnJhbWVyYXRlAEA99wg+h62+AAx2aWRlb2NvZGVjaWQAQBwAAAAAAAAADWF1ZGlvZGF0YXJhdGUAQFdnYcJYreUAD2F1ZGlvc2FtcGxlcmF0ZQBA5YiAAAAAAAAPYXVkaW9zYW1wbGVzaXplAEAwAAAAAAAAAAZzdGVyZW8BAQAMYXVkaW9jb2RlY2lkAEAkAAAAAAAAAAhmaWxlc2l6ZQBBgxjZEAAAAAAACQ==</metadata>
  </media>
  <media bitrate="1993" url="5_a3ed2f8d8e5b9694_" bootstrapInfoId="bootstrap_5">
    <metadata>AgAKb25NZXRhRGF0YQgAAAAMAAhkdXJhdGlvbgBAaR752yLQ5QAFd2lkdGgAQJAAAAAAAAAABmhlaWdodABAggAAAAAAAAANdmlkZW9kYXRhcmF0ZQBAnbA4DHkwAgAJZnJhbWVyYXRlAEA99wg+h62+AAx2aWRlb2NvZGVjaWQAQBwAAAAAAAAADWF1ZGlvZGF0YXJhdGUAQFdnYcJYreUAD2F1ZGlvc2FtcGxlcmF0ZQBA5YiAAAAAAAAPYXVkaW9zYW1wbGVzaXplAEAwAAAAAAAAAAZzdGVyZW8BAQAMYXVkaW9jb2RlY2lkAEAkAAAAAAAAAAhmaWxlc2l6ZQBBh+GlUAAAAAAACQ==</metadata>
  </media>
  <media bitrate="2491" url="6_a3ed2f8d8e5b9694_" bootstrapInfoId="bootstrap_6">
    <metadata>AgAKb25NZXRhRGF0YQgAAAAMAAhkdXJhdGlvbgBAaR752yLQ5QAFd2lkdGgAQJQAAAAAAAAABmhlaWdodABAhoAAAAAAAAANdmlkZW9kYXRhcmF0ZQBAor16mqIiOAAJZnJhbWVyYXRlAEA99wg+h62+AAx2aWRlb2NvZGVjaWQAQBwAAAAAAAAADWF1ZGlvZGF0YXJhdGUAQFdnYcJYreUAD2F1ZGlvc2FtcGxlcmF0ZQBA5YiAAAAAAAAPYXVkaW9zYW1wbGVzaXplAEAwAAAAAAAAAAZzdGVyZW8BAQAMYXVkaW9jb2RlY2lkAEAkAAAAAAAAAAhmaWxlc2l6ZQBBjdrgaAAAAAAACQ==</metadata>
  </media>
</manifest>

Hat man die URL dieses Manifests ergattert (in diesem Fall ist es abcvod.abcnews.com/z/abcnews/2014/09/140909_wn_muir7_1837_,500,700,900,1200,1600,2000,2500,.mp4.csmil/manifest.f4m?g=SFHWHPOOGNQB&hdcore=3.5.0&plugin=aasp-3.5.0.151.81), verwendet man AdobeHDS.php, um die Stream-Fragmente automatisiert auf den lokalen Rechner herunterzuladen und danach zu einer MP4 oder FLV-Datei zusammenzuschustern:

$ php AdobeHDS.php --manifest "http://abcvod.abcnews.com/z/abcnews/2014/09/140909_wn_muir7_1837_,500,700,900,1200,1600,2000,2500,.mp4.csmil/manifest.f4m?g=SFHWHPOOGNQB&hdcore=3.5.0&plugin=aasp-3.5.0.151.81"

Tags: , , , , , , , ,
Labels: Web

1 Kommentar | neuen Kommentar verfassen

Sonntag, 14. Dezember 2014

MySQL-Query auf Dev blitzschnell, in Prod extrem langsam

Am Freitag habe ich mich entschieden, eine bisher nur auf meinem lokalen Mac mini in einem Vagrant-Container laufende Web-Applikation auf meinen „produktiven“ Web-Server bei der Cyon GmbH zu verschieben.

Es handelt sich um eine Applikation, mit welcher Fragen einer Zertifizierungsprüfung mittels Multiple Choice beantwortet werden können. Eine Unterseite der Applikation berechnet aus dem Log der bisher getätigten Antworten Statistiken.

Nach einigen Minuten lief die Web-Applikation und der aktuellste MySQL-Dump war ebenfalls auf dem Server eingespielt. Doch dann kam das böse Erwachen: Beim Aufruf einer neuen Frage wartete ich unzählige Sekunden auf eine Antwort des Servers, bis die Ausführung des PHP-Scripts dann mit einem Timeout abbrach.

Was zum Teufel? Rasch war klar, dass ein SQL-Query zur Berechnung von Statistiken der Übeltäter war.

Auf Dev lief das MySQL-Query folgendermassen rasch durch:

[12-Dec-2014 13:22:18 Europe/Zurich] I - mysql->query() took 0.1694 secs in /var/www/apps/%APP%/inc/%APP%.class.php:343 for URI (Referer: unknown) from IP 192.168.1.1 with User Agent "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/600.1.17 (KHTML, like Gecko) Version/7.1 Safari/537.85.10"

Auf Prod hingegen loggte ich diesen Zeitwert:

[12-Dec-2014 12:40:18 Europe/Zurich] I - mysql->query() took 47.8917 secs in %PATH%%APP%.class.php:343 for URI <%URI%> (Referer: %REFERER%) from IP %IP% with User Agent "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/600.1.17 (KHTML, like Gecko) Version/7.1 Safari/537.85.10"

Eine Verlangsamung von mehr als dem 200-fachen!

Als erstes prüfte ich die Versionen der Datenbank-Software:

Dev

-- Server version	5.6.21-1~dotdeb.1

Prod

-- Server version	5.5.40-cll

Ich verwendete also eine Zehntelsversion bessere Datenbank.

Anschliessend liess ich mir das Query sowohl in Dev als auch in der Produktion „erklären“ (EXPLAIN):

Dev

EXPLAIN-localhost

Prod

EXPLAIN-cyon

Der Unterschied: Auf Prod führte MySQL ein „Dependent Subquery“ aus, auf Dev „nur“ (?) ein „Subquery“. War das das Problem?

Da mir EXPLAIN hier nun wirklich nicht weiterhalf, wendete ich mich Google zu. Folgende zwei Stackexchange-Artikel erheischten meine Aufmerksamkeit:

Beim Lesen der Antworten kam mir plötzlich die Idee: Vielleicht sind INDEXe deine Freunde? Ich wählte die Spalte Questions-id (`Questions-id` varchar(64) NOT NULL, CLSIDs enthaltend) aus und versah sie mit einem Index.

Und siehe da, beim nächstem Aufruf der Web-Seite wurde folgender Zeitwert registriert:

[12-Dec-2014 23:33:09 Europe/Zurich] I - mysql->query() took 0.0412 secs in %PATH%%APP%.class.php:343 for URI <%URI%> (Referer: %REFERER%) from IP %IP% with User Agent "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/600.1.17 (KHTML, like Gecko) Version/7.1 Safari/537.85.10"

Der zusätzliche Index auf einer Spalte auf hat mein Performance-Problem zu meiner vollsten Zufriedenheit gelöst. Wieso der Index aber in Version 5.6 von MySQL nicht mehr benötigt wird, ist mir derzeit noch ein Rätsel. Wahrscheinlich haben die Entwickler die Subquery-Performance in dieser Version stark verbessert?

Tags: , , , , , , , , , , ,
Labels: Web

Keine Kommentare | neuen Kommentar verfassen

Sonntag, 14. Dezember 2014

Welche Adobe Flash-Version verwende ich?

In den letzten Wochen haben sich die Sicherheits-Updates für Adobes Flash-Frickelware wieder gehäuft. Ob ich das neuste Plugin auf einem Rechner installieren muss, sagt mir folgende Web-Site:

What is my Flash Player version? Is it up-to-date?

Die Web-Site Flash Tester liefert zusätzlich eine Chronologie aller Updates und verlinkt zudem auf eine offizielle, von Adobe gehostete Seite, welche die Version des aktuell installierten Flash-Plugins anzeigt, an Hand derer der Benutzer in einer Tabelle selber nachschauen muss, ob er schon Up-to-date ist:

Adobe — Flash Player Version Information

Meine Besucher entscheiden bitte selber, welche der beiden Web-Seiten nun benutzerfreundlicher ist … ich persönlich habe meine Meinung gebildet, und sie bekräftigt meinen Eindruck des Bloatware-Herstellers Adobe.

Tags: , , , , ,
Labels: Web

Keine Kommentare | neuen Kommentar verfassen

Donnerstag, 13. November 2014

Google Maps in eigene Web-Site integrieren

Damit man Google Maps-Karten in die eigene Web-Site integrieren kann, benötigt man ein Google-Konto und Zugriff auf die Google Developers Console.

Dort findet man im Menupunkt APIs & Auth in der Unterrubrik APIs die „Google Maps Embed API“, welche man dort auch gleich für die Verwendung aktiviert.

Um Missbrauch zu verhindern, sollte man zudem im Menupunkt Credentials unter Public API Access einen API Key für die Google Maps Embed API erstellen und bei Referers dann die Domainnamen erfassen, von welchen die Requests für Kartendaten kommen dürfen (Referer lassen sich selbstverständlich fälschen, aber ich gehe davon aus, dass Google Gegenmassnahmen in seinen serverseitigen Embed-Code eingebaut hat).

Auf der eigenen Web-Site fügt man dann das iFrame beispielsweise folgendermassen ein:

<iframe
  width="850"
  height="550"
  frameborder="0"
  style="border:0"
  class="map"
  src="https://www.google.com/maps/embed/v1/place?key=%ApiKey%&q=Bern+Switzerland&zoom=10">
</iframe>

Quelle: Google Maps Embed API

Tags: , , , , , ,
Labels: Web

Keine Kommentare | neuen Kommentar verfassen

Donnerstag, 10. Juli 2014

Öffnungszeiten Credit Suisse Bern-Bundesplatz

Da das Standortverzeichnis meiner Hausbank seit Jahr und Tag ein Usability-Nightmare ist, lege ich hier den Link ab, der mich direkt zu den Öffnungszeiten der Credit Suisse Bern-Bundesplatz führt:

Credit Suisse AG, Bern, Bundesplatz 2, Schweiz – Privatkunden

Falls ein Webmaster der Grossbank bei diesem Artikel vorbeischauen sollte, hier einige Anregungen:

  • Bitte das Standortverzeichnis mit — aus eurer Sicht — exotischen Browsern wie Apple Safari testen.
  • Bei diesen Tests solltet ihr am Besten auf den Google Maps fokussieren: Habe ich mich mit Safari auf Bern reingezoomt und klicke Bern–Bundesplatz an, springt die Karte wieder auf die Weltansicht und das Zoomen kann von vorne beginnen …
  • Die Verzögerung von 1-2 Sekunden nach der Auswahl eines Drop-Down-Elements ist Web 0.1, nicht Web 2.0 (ich glaube ich muss einen unfocus-Event generieren)
  • Wieso muss ich mich überhaupt wie ein Idiot durch vier Drop-Downs durchhangeln? Ist das State of the Art-Usability von 2014?
  • Wieso gibt es kein Suchfeld mit Autovervollständigung, in welches ich bspw. „Bundesplatz“ eingeben kann?
  • Wieso wird die URL nicht aktualisiert und wird eindeutig, wenn ich mich durch die Drop-Downs durchgekämpft habe und eine Filiale ausgewählt habe? Eine URL, welche ich als Lesezeichen ablegen kann und welche mich beim nächsten Aufruf direkt zu dem gewünschten Standort bringt?

Stattdessen übermittelt ihr in der URL solches URL-encodiertes JSON-Gefrickel:

https://www.credit-suisse.com/who_we_are/de/office_locator.jsp#%7B%22fs%22%3A%7B%22cid%22%3Anull%2C%22prid%22%3Anull%2C%22plid%22%3Anull%2C%22sid%22%3Anull%2C%22d%22%3A%5B0%2C0%2C0%2C0%2C0%2C0%2C0%2C0%2C0%2C0%5D%7D%2C%22ms%22%3A%7B%22c%22%3A%7B%22lat%22%3A46.94739121310314%2C%22lng%22%3A7.44410902261734%7D%2C%22z%22%3A18%7D%2C%22mk%22%3A%7B%22id%22%3A4451%7D%2C%22is%22%3A%7B%22id%22%3A%22mapPanel%22%2C%22ps%22%3A%7B%22id%22%3A4451%2C%22sid%22%3A11613%2C%22segid%22%3Anull%2C%22d%22%3A%5B0%2C0%2C0%2C0%2C0%2C0%2C0%2C0%2C0%2C0%5D%7D%7D%7D

… was auf Gut Deutsch lautet:

{
    "fs": {
        "cid": null,
        "d": [
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0
        ],
        "plid": null,
        "prid": null,
        "sid": null
    },
    "is": {
        "id": "mapPanel",
        "ps": {
            "d": [
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0
            ],
            "id": 4451,
            "segid": null,
            "sid": 11613
        }
    },
    "mk": {
        "id": 4451
    },
    "ms": {
        "c": {
            "lat": 46.94739121310314,
            "lng": 7.44410902261734
        },
        "z": 18
    }
}

Bravo, ihr habt gerade JSON-over-URL JoU erfunden!

Tags: , , , , , , , , , ,
Labels: Web

Keine Kommentare | neuen Kommentar verfassen

Freitag, 27. Juni 2014

Spam-Mails mit imapfilter in einen Unterordner verschieben

Der falsche Weg, wie ich ihn bis heute angewendet hatte:

...
-- SPAM
messages = mbox.INBOX:contain_subject('[SPAM]')
messages:move_messages(mbox['Spam'])
...

Das führte in diesem einen speziellen Fall dazu, dass ein legitimes E-Mail eines Kollegen mit „[SPAM]“ im Subject gekennzeichnet wurde. Da das elektronische Gespräch hin- und herging, landeten alle Antworten des Empfängers immer wieder in meinem Spam-Ordner.

Der richtige Weg — jedenfalls für Mail-Accounts, die bei Cyon GmbH gehostet werden — ist:

...
-- SPAM
messages = mbox.INBOX:contain_field('X-Spam-Status','Yes')
messages:move_messages(mbox['Spam'])
...

Tags: , , , ,
Labels: Web

Keine Kommentare | neuen Kommentar verfassen

Freitag, 27. Juni 2014

.ch-Domains zu cyon transferieren

Heute schreckte mich Blogging Tom auf Facebook mit der Meldung auf, dass SWITCH/nic.ch per 1. Januar 2015 keine .ch-Domains mehr verwaltet. Bis spätestens zu diesem Stichdatum müssen .ch-Domains zu privaten schweizerischen Anbietern gezügelt werden.

Ich besitze ein halbes Dutzend .ch-Domains und lasse diese bereits alle auf meinen Shared Server bei der Cyon GmbH in Basel zeigen. Zum Glück hat der dortige Support in seiner Knowledgebase bereits eine bebilderte und „dubelisichere“ Anleitung aufgeschaltet, an Hand derer ich den Transfer innert 5 Minuten hingekriegt habe:

Wie kann ich meine Domain von SWITCH zu cyon transferieren?

ACHTUNG: Die ursprüngliche Google-Suche leitete mich auf folgenden Artikel, welcher diesen Spezialfall leider nicht behandelt:

Wie kann ich meine Domains transferieren?

Tags: , , , , , ,
Labels: Web

Keine Kommentare | neuen Kommentar verfassen

Dienstag, 20. Mai 2014

Die Tagesanzeiger-Paywall (eher: das Lehmmäuerchen) umgehen

In den letzten Monaten haben sich die Paywalls der traditionellen Zeitungen im Internet gehäuft: Die New York Times macht, die NZZ auch – und seit kurzem auch der Tagesanzeiger. Aus meiner Sicht war es auch wirklich an der Zeit, dass die Medienhäuser den von ihnen generierten Mehrwert entsprechend schützen und von den Konsumenten vergüten lassen. So wie man das seit Jahrhunderten in der Printpresse auch macht (wobei man anmerken muss, dass bei der Printpresse die Mehrheit der Einnahmen aus der Printwerbung stammen).

Doch wenn man eine Internet-Paywall aufbaut, welche angeblich drei Millionen Schweizer Franken gekostet haben soll, sollte sie dann aber auch der Chinesischen Mauer entsprechen, und nicht einem Lehmmäuerchen oder einem morschen Lattenzaun.

Nachdem man nämlich die maximale Zahl an kostenlosen Tagi-Artikeln gelesen hat, kriegt man die Artikelseiten weiterhin mit dem kompletten Inhalt ausgeliefert. Nach kurzer (oder längerer Ladezeit) wird mit CSS ein halbtransparenter Overlay eingeblendet, welcher den Internetbenutzer auffordert, ein Abonnement abzuschliessen.

Diese „CSS-Wall“ umgeht man unter Google Chrome folgendermassen:

  1. Stylebot herunterladen und installieren
  2. Rechtsklick auf CSS-Icon
  3. Optionen
  4. Stylebot Options
  5. Styles
  6. Edit Global Stylesheet

Dort gibt man ein:

div#overlay_wrap {
	display: none;
}

Abspeichern, Browser neu starten – et voilà!

Sollte diese Massnahme aus irgendeinem Grund nicht klappen, kann man Stylebot immer noch mittels Druck auf Alt+M aktivieren, auf die dunkle Overlay-Fläche klicken (#overlay_wrap) und im Abschnitt „Layout & Visibility“ den Wert „Visibilty“ auf „Hide“ setzen.

Tags: , , , , , ,
Labels: Web

18 Kommentare | neuen Kommentar verfassen