Custom Cursors mit Css

Wieder was gelernt… aber mit einigen Umwegen. Die Aufgabe: bestimmte Navigationselemente einer Seite sollen einen custom Cursor erhalten. Die 3 gesammelten Erkenntnisse hierzu:

Cursor für IE, Firefox und andere

Alles nicht so einfach, wie man sich so oft wünschen würde, schreibt Adrian Ber:

cursor: url(cursor.cur),url(cursor/cursor.cur),default;

So everytime you want to define a crossbrowser CSS cursor you should define it as a list containing the url relative to the source element, the url relative to the style sheet and the default value.

Wie erstelle ich .cur Files?

Nach etwas Herumsuchen fand ich Artcursors (Windows). Mehr brauchte ich für den Moment nicht.

Warum zickt der IE immer noch? 

In Gecko (Firefox) the limit of the cursor size is 128×128px. Larger cursor images are ignored. However, you should limit yourself to the size 32×32 for maximum compatibility with operating systems and platforms.

Das war denn auch des Rätsels Lösung: mein Cursor war größer als 32x32px.
Danke für die Info, Mozilla!

Ein guter Vergleich zum Scrollen

Ein schöner Vergleich, der mir wohl mehrfach als Argumentationshilfe geholfen hätte… hätte hätte.

There is nothing wrong with scrolling. Nothing at all. Just as there is nothing wrong with flipping pages in books.

Niveaulos: Steve Jobs als Kompressions-Beispiel

Gestern war auf der Startseite von Google unter dem Suchfeld nur “Steve Jobs, 1955 – 2011″  zu lesen. Vor dem Hintergrund der gespannten Beziehungen zu Apple liest sich das, als hätte man den Smiley hinter dem Sterbejahr vergessen. Was jedoch wirklich niveaulos anmutet, ist die Verwendung des Portraitbildes von Steve Jobs als Dummy-Foto bei JPEGmini.

Schade genug, daß es anscheinend nur dies eine Bild von Jobs gibt, es ziert ja auch seine Biografie… trotzdem hätte jedes andere Bild auch für den Beweis der überragenden Komprimirungstechnik gereicht.

CloudApp – einfacher gehts kaum

Eben habe ich erlebt, wie einfach sowohl die Idee, die Benutzung und Registrierung bei einer On/Offline Applikation sein können. CloudApp bietet auf einfachste Art Bildupload. Nachdem man sich das kleine Client Programm installiert hat, kann man Bilder auf das Symbol in der Menubar ziehen, die dann automatisch auf den CloudApp Server hochgeladen werden. Die URL zum jeweiligen Bild landet parallel im Zwischenspeicher. Genial einfach!

Kein Css, kein Javascript, oder eines fehlt… was tun?

Auch im Rahmen dieses Projektes habe ich mich gefragt, wie man eine Fehlermeldung bauen kann, die sowohl erscheint, wenn der Benutzer Javascript ausgeschaltet hat, als auch, wenn sein Browser kein Css kennt, als auch, wenn beides der Fall ist. Meine Lösung mit jQuery setzt sich aus drei Teilen zusammen.

Hinter dem Body-Tag:

<div id="nocssnojs">
    Der dirty Hinweis, daß gerade nix geht...
</div>
<script type="text/javascript">
    $('div#nocssnojs').addClass('nocssnojs');
</script>

Und irgendwo im Stylesheet:

.nocssnojs { display: none; }

WordPress aufgebohrt – runmyaccounts.com online

Das letzte Projekt, an dem ich mit gearbeitet habe, ist nun schon seit einigen Wochen online – runmyaccounts.com, die Präsentation einer OpenSource-Buchhaltungs-Software. Die Umsetzung des WordPress-Themes habe zum größten Teil ich übernommen.

Wieviele User haben Javascript ausgeschaltet?

Diese Frage war für mich eben interessant, da an einem gerade fertig werdenden Projekt nichts graceful degraded, und auch nichts progressive enhanced, sondern einfach nur un-accessible vor sich hin-jqueried. Da kam mir diese Statistik nur recht – ein Prozent aller User haben durchschnittlich kein Javascript zur Verfügung, na wenn man die nicht ignorieren darf! Danke, Yahoo.

Der angegebene Dateiname ist ungültig oder zu lang

Tatsächlich hilft es immer mal wieder, Fehlermeldungen zu googeln. Letztens gab es im Büro ein mysteriöses Problem: mehrere .indd Dateien waren nach c&p des Ordners nicht mehr zu öffnen. Ratlosigkeit auf allen Seiten, eine kurze Suche nach “Der angegebene Dateiname ist ungültig oder zu lang” förderte zutage, daß die maximal verwaltete Pfadlänge überschritten war:

Ursache 4: Dateien in Pfaden, deren Tiefe MAX_PATH überschreitet
Sie können eine Datei eventuell nicht öffnen, bearbeiten oder löschen, wenn es Probleme mit dem Dateipfad gibt.

Man muß aber auch zugeben, daß der Pfad ziemlich lang war…

Gute Bilder, schlechte Bilder

Jakob Nielsen schon wieder… aber wenn er doch recht hat? Anhand mehrerer Eye-Tracking-Studien zeigt der Alertbox-Artikel, wie und wann Bilder auf Webseiten wahrgenommen werden. Was uns schon dunkel schwante, ist endlich auch (usability)päpstlich abgesegnet: auch hier ist Dekoration Schnickschnack und Content King. Fotos, die inhaltsbezogen relevante Informationen transportieren, werden nach Nielsens Studien signifikant öfner und ausgiebiger fixiert als pure Dekorationsfotos oder Stockbilder.

Warum wir dann immer wieder tief in die Stockbilder-Wühlkiste greifen? Liegt es am Kundenwunsch? An unserem schlechten Gefühl, wenn dem Benutzer nichts als trockene Inhalte angeboten werden? An den vielen unguten Vorbildern? Wahrscheinlich ist der Spruch schuld: Ein Bild sagt mehr als tausend Worte…

Funktion zum Maskieren von E-Mail-Adressen

Nachdem ich nach 30 Minuten googeln nichts Vernünftiges fand, habe ich mich mal wieder lernend mit Php beschäftigt und diese kleine Funktion gebaut:

function mailreplace($str) {
    return preg_replace_callback ('^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})^',
        create_function (
            '$str',
            'for ($i = 0; $i &lt; strlen($str[0]); $i++) {
                $result .= "&amp;#" . ord(substr($str[0], $i, 1)) . ";";
            };
            return $result;'
        ), 
    $str);
}

Wie man sieht, sucht die Funktion in einem String nach E-Mail-Adressen und ersetzt deren Zeichen durch ihre ASCII-Entsprechungen. Einzige Unklarheit war, daß der Suchtreffer der temporären Funktion als Array übergeben wird, dessen erstes Element die Mail-Adresse beinhaltet. Warum der Treffer nicht als String übergeben wird – keine Ahnung.

Next entries » ^ Zum Seitenanfang

Neueste Bookmarks (Delicious)