Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

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 Postillon 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 noch 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.

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

Hier noch der Vollständigkeit halber eine Demo ohne picturefill.js

Nur Chrome (ab Version 38, also derzeit Canary) unterstützt dies bisher. Siehe caniuse.com

Nachtrag 11.09.14

Erhöhte Vorsicht ist angesagt bei der Kombination von mehreren Bildmanipulations-Werkzeugen.
So führt beispielsweise die Kombination von Adaptive Images mit jQuery backstretch.js, oder mit fancybox.js zu unerwünschten Ergebnissen.
Und das picture-Element wird meines Wissens noch von keiner Technik zur Bildmanipulation wie Lightbox o. ä. unterstützt.


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…


Entfernungen messen mit Google Maps

Mittwoch, 9. Juli 2014

Ein Feature, das im "alten" Google Maps leicht erreichbar war, im "neuen" Google Maps aber gut versteckt ist: Entfernungen messen. Nicht Staßenkilometer, sondern Luftlinie.

Dabei ist es ganz ganz einfach:

  1. Google Maps öffnen
  2. Klick mit der rechten Maustaste auf den Startpunkt
  3. "Entfernung messen" auswählen
  4. Klick an eine beliebige Stelle auf der Karte, um die zu messende Strecke zu markieren. Mit weiteren Klicks bei Bedarf zusätzliche Messpunkte hinzufügen.
  5. [Optional] Einen Punkt ziehen, um ihn zu verschieben, oder auf einen Punkt klicken, um ihn zu entfernen.
Screenshot 1
Google Maps mit dem Popup nach dem Rechtsklick. Dort die Option: "Entfernung messen" auswählen.
Screenshot 2
Nach dem Anklicken des Zielpunkts wird ein Lineal mit der Entfernung eingeblendet.

Archiv:

Kategorien:

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