• andrewnacin.com
• bugs.webkit.org
• core.trac.wordpress.org
• developer.palm.com
• evalotta.net
• fileformat.info
• github.com
• hakre.wordpress.com
• ip-lookup.net
• joindiaspora.com
• kaliban.de
• labjs.com
• meta.stackexchange.com
• neuralmesh.com
• opera-info.de
• php.net
• quirksmode.org
• research.swtch.com
• stackoverflow.com
• typolexikon.de
• unwrongest.com
• validator.nu
• wpdocs.labs.thedextrousweb.com
• xhtmlforum.de
• yoast.com
• zomigi.com

Wer spielt mit?

Wir finden ihn im Reiter Utilities in Dragonfly, das wir bei ausgeblendeter Menuleiste am leichtesten erreichen, wenn wir irgendwo im Dokument das Kontextmenu aufrufen und dort ›Element untersuchen‹ auswählen (im Englischen ›Inspect Element‹).

Fahren wir jetzt mit der Maus über die Seite, so wird in einem Vorschaufenster die Fläche unter der Maus stark vergrößert dargestellt.

Ganz links können wir festlegen, wie groß die jeweilige Auswahl sein soll, die von der Maus erfaßt wird, und wie stark die Vergrößerung ist.

Das finde ich noch nicht sehr verständlich, und mit Scale 1 fährt sich der Auswahlmodus auch manchmal fest. Mit einem einem kleinen Trick gießen wir Öl ins Getriebe: Kurz den Reiter wechseln; dann läuft es wieder. Langfristig hilft wie bei jedem technischen Problem natürlich nur mehr RAM.

Auf der linken Fläche finden wir noch ein anderes Feature: Gespeicherte Farben. Hier können wir einmal ausgewählte Farben dauerhaft merken. Der Button ›Manage stored colors‹ bietet derzeit nur das Löschen an. Ich wünsche mir noch das Benennen und eine Sortierung nach Schlagworten oder Verzeichnissen. Ansonsten ist das schon sehr praktisch.

Rechts des Vorschaufensters können wir innerhalb der Auswahl noch einmal wählen: Wir können ein Quadrat festlegen, das wir mit der Maus auf dem Vorschaufeld plazieren. Der durchschnittliche Farbwert des Quadrates wird dann in drei Notationen ausgegeben: als RGB, als HSL und als Hexwert. Und speichern können wir die Farbe natürlich auch.
Die Maximalgröße des Quadrates beträgt 9×9 Pixel – das finde ich für einige Verläufe und Fotos etwas zu klein. Die Minimalgröße beträgt 1×1 Pixel. Klein genug. Subpixel sieht man ohnehin nicht.

Die Funktionsweise mal Schritt für Schritt zum Mitmachen:

1. Eine Seite öffnen, beispielsweise diese hier.
2. Rechtsklick auf ein Element (das Auge) und im Kontextmenu ›Element untersuchen‹ auswählen.
3. Jetzt öffent sich Dragonfly unten im Browserfenster mit dem Reiter ›DOM‹
4. Zum Reiter ›Utilities‹ wechseln und mit der Maus über das Auge fahren.
5. Über einer besonders schönen Stelle einmal links klicken, damit das Vorschaubild die Auswahl festhält.
6. In Color Select eine Größe wählen (7×7) und im Vorschaubild auf die Stelle klicken, deren durschnittlichen Farbwert man gerne haben möchte.
7. Wenn der richtige gefunden wurde, auf ›Store color‹ klicken.
8. Fertig.

Brauchen wir später eine gespeicherte Farbe, so klicken wir einfach darauf. Der Wert steht dann im rechten Feld.

Fazit: Die Oberfläche kann durchaus klarer werden, und ein paar Features fehlen mir noch: ein Export und Variieren der Farben beispielsweise. Aber im Ganzen ist das schon eine schöne Demonstration der Möglichkeiten, die die neue API Dragonflys bietet. Dragonfly ist übrigens Open Source, seit heute unter einer Apache-2.0-Lizenz. Es muß nicht extra installiert werden, womit eine Last wegfällt, die man mit externen Werkzeugen ja meistens hat.

Quelle: CollegeHumor.

›Do not use PHP references‹, empfiehlt Johannes Schlüter, denn Referenzen kosten Tempo, Übersicht und Flexibilität. Ob seiner klaren und verständlichen Darstellung dieses kniffligen Themas möchte ich den Artikel jetzt schon in die Liste der zehn besten dieses Jahres rücken.

Nicholas C. Zakas: History of the user-agent string. Warum die UA-Strings heute oft so sonderbar aussehen. Die neue Kennung des IE 9 lautet:

Mozilla/5.0 (compatible, MSIE 9.0; Windows NT 6.1; Trident/5.0)

Anhängsel irgendwelcher Zusatzsoftware werden nicht mehr eingebaut; damit schrumpft die Liste der möglichen Kennungen gewaltig – was es Proxys erheblich erleichtert, gespeicherte Versionen einer Webseite auszuliefern. Das erklärt Billy Hoffman gut in: ›The Big Performance Improvement in IE9 No One is Talking About‹. Er rät auch dazu, die gzip-komprimierte Version nur noch anhand des Accept-Headers zu versenden und den User-Agent zu ignorieren, damit beispielsweise ein Safari-Nutzer die Version bekommt, die der Firefox-Nutzer zuvor in den Proxy gehievt hat.

Man kann dezimale Zeichenreferenzen mit beliebig vielen führenden Nullen versehen. So läßt sich das A als A schreiben oder als &#000000000000000000000000000000065;
›hakre‹ hat mal ausprobiert, wie weit man damit gehen kann: ›HTML Entity Boundaries – Zero Padding‹.
Ein Experiment, dessen praktischer Nutzen sicher weit unter seinem Unterhaltungswert liegt. Doch zeigt es, wie weit die Entwickler vorausdenken und wo sie die Grenze ziehen zwischen ›das versuche ich noch‹ und ›das wird zu langsam‹. Wenig überraschend frißt Firefox die meisten Nullen – bis zum Erstickungstod.

Anne van Kesteren hat auch ein Experiment mit gewaltigem Geekpotential hingestellt: Live style sheet editing!
Und da muß ich einfach mal den Quelltext zitieren:

<!doctype html>
<html>
 <head>
  <title>Live style sheet editing!</title>
  <style style="white-space:pre /* hack for Opera */" contenteditable="">
html {
margin:.2em;
font-size:2em;
color:lime;
background:purple
}
head, title, style
{
display:block
}
body {
display:none
}
  </style>
 </head>
 <body><!-- nothing is needed here --></body>
</html>

Zum Schluß noch ein Link für die Freunde der Maus: Harmony, ein Zeichenprogramm in Javascript und Canvas. Das macht wirklich Freude.

Tatort war ein Palm Pre WebOS, Tatwerkzeug der eingebaute Browser auf WebKit-Basis.

Um das überhaupt nachzuvollziehen, habe ich den MobiOne Emulator für Palm Pre installiert. Das ging verdächtig leicht, und das Ergebnis half mir überhaupt nicht. Es war nämlich in Ordnung:

Dieser Emulator ist im Wesentlichen ein zurechtgestutztes Eclipse; seine Abhängigkeit vom Gastsystem erkennt man schon daran, daß er dessen Schriften benutzt. Unbrauchbar.

Dann habe ich das Palm webOS SDK installiert, das in einer virtuellen Maschine läuft – und das Problem ganz genau wiedergibt. Das scheint also ein recht realistisch arbeitendes Werkzeug zu sein. Etwas umständlich finde ich nur das englische Tastaturlayout, das ich nicht umstellen konnte.

Nach allerlei Tests habe ich endlich die Ursache gefunden: Ich hatte im Stylesheet eine Deklaration stehen, von der ich annahm, sie werde nur von Gecko interpretiert.

p,
address,
li
    {
        text-rendering:optimizeLegibility;
    }

Diese Eigenschaft stammt aus SVG, wie man leicht an der dämlichen Binnenmajuskel erkennt. Sie sollte Firefox dazu anregen, auch bei kleineren Schriftgraden als 20px das Kerning zu respektieren.
Was genau der Palm Browser hier versucht, vermag ich nicht zu sagen. Vielleicht hängt es mit der Schriftgröße zusammen, denn Überschriften, die mindestens 20px groß sind, werden noch gezeigt.

Ich habe die ganze Regel jetzt weggeworfen und einen Bugreport geschrieben.

Sicher ließe sich das auch hinter einem proprietären Selektor für Mozilla verstecken, aber davon will ich eigentlich weg. Und wenn ich damit leben kann, daß Mozilla-Nutzer noch keine abgerundeten Ecken sehen, dann darf ich genauso gut unterstellen, daß sie sich an schlampiges Kerning gewöhnt haben. Also nehmt es mir nicht übel, ja?

Ach ja, das aktuelle Ergebnis:

Da der Browser jetzt nur die Systemschriften des Palm OS verwendet, setzt er keine Kursivschnitte für serifenlose Schriften mehr um, und eine Monospace-Schrift findet oder nutzt er auch nicht. Das ist nicht schlimm, aber man kann es unter »Aha. Mist!« ablegen.

Viele Beobachter geben sich jetzt enttäuscht. So ein Wirbel um ein so langweiliges Spielzeug? Mich hat das nicht überrascht oder gar enttäuscht. Ich mache mit Apple ohnehin keine Geschäfte.
Aber für den Markt freue ich mich: Die Geräteklasse wird durch Apple eingeführt und bekannt gemacht, und jeder Konkurrent kann den Pionier leicht ausstechen. Es genügt ein USB-Anschluß und die Option, daß der Kunde im Gegensatz zum iPad seine Akkus selber wechseln kann, wenn er möchte. Packt man noch ein richtiges, mattes Display drauf und eine UMTS-Verbindung, dann kommt sogar ein mobiles Gerät dabei heraus.

Als Designer freue ich mich auch: Die Bildschirmbreite von maximal 1024 Pixeln wird all jenen auf die Füße fallen, die bisher Festbreiten gemeißelt und damit das Web verschmutzt haben. Real werden die Benutzer dieses Spielzeugs lieber hochkant lesen, also nur 768 Pixel bereitstellen. Gute Layouts passen sich dem an, schlechte werden einfach nicht mehr benutzt.

Wer jetzt erst auf ein modernes Layout umstellt, mag dies bedenken:

• Auf einem Touchscreen sollten Links nicht zu dicht beieinander liegen. Finger treffen schlechter als eine Maus. Peter-Paul Koch hat dazu gerade ein bißchen geforscht: The touch action.
  Das interessante Problem hierbei: Wer mit solchen Bildschirmmaßen kommt und doch eine Maus benutzt, der möchte keinen Platz für zusätzlichen Leeraum vergeuden. Vielleicht wird sich der iPad-Safari ja per Javascript zu erkennen geben, damit man den gezielt ansprechen kann.
  Die Pseudo-Klasse :hover oder onmouse*-Events werden nicht angesprochen.
• Eine horizontale Navigation sollte am Seitenrand umbrechen, sonst verschwinden vielleicht wichtige Elemente rechts hinter dem Bildschirmrand.
• Bei Tageslicht liefert ein Spiegeldisplay schlechte Kontraste. Orangefarbene Links auf weißem Hintergrund beispielsweise dürften kaum noch zu erkennen sein.
  Sehr lange Texte möchte sicher niemand auf weißem Hintergrund lesen. Hier kann man einen Styleswitcher anbieten, wenn das iPad keinen eigenen Regler mitbringt.

• Safari, der Webbrowser auf dem iPad, unterstützt Media Queries ein bißchen. Das kann man so ansprechen:

  @media screen and (max-device-width: 1024px)
  {
      /* Horizontal */
  }
  @media screen and (max-device-width: 768px)
  {
      /* Vertikal */
  }
  @media screen and (max-device-width: 480px)
  {
      /* iPhone. Findet @media handheld nicht. */
  }

  Opera und Firefox verstehen das natürlich auch, im Gegensatz zu Safari sogar nach einer IE-Expression.

  * html textarea
      {
          border:             expression(
              this.onfocus = function()
                  {
                      this.style.borderColor = '#27b';
                  },
              this.onblur = function()
                  {
                      this.style.borderColor = '#888';
                  }
              );
      }
  
  @media screen and (max-device-width: 768px)
  {
      /* Das liest Safari nicht. */
  }

• Auf dem iPad gibt es kein Flash. Dafür sollte normalerweise schon längst eine Alternative bereitstehen, aber oft sieht die eher peinlich aus. Safari versteht Javascript und Canvas; wer das nutzt, kann auf Flash oft verzichten.
• Wenn der Safari als Mobilvariante installiert ist, dann kann er vielleicht kein position:fixed.

Für bestimmte Webseiten stecke ich mir noch Spezialvorlagen aus einem privaten Framework zusammen. Das Gestalten von Formularen und Scrollbars im Browser habe ich abgeschaltet, und der Adblocker arbeitet zuverlässig. Das aktuelle Userstylesheet sieht deshalb sehr schlank aus:

*
    {
        letter-spacing:     normal      !important;
    }
body
    {
        line-height:        1.4;
        font-family:        "Minion Web Pro";
        margin:             10px;
    }
@media print
    {
        body
            {
                margin:     0 10%;
            }
    }
p, li, blockquote, dd, dt, div
    {
        font-size:          16px;
        line-height:        1.4;
    }
#content p, #content li, #content blockquote
    {
        font-size:          16px        !important;
        line-height:        1.4         !important;
    }
body,
div,
p,
li,
dl, dt, dd,
td
    {
        cursor:             text        !important;
    }
textarea,
pre, pre *,
code,
.code,
samp,
var,
.dp-highlighter,
.dp-highlighter * /* oft benutztes Highlightscript */
    {
    /* Die Lucida Sans Unicode hilft beim Finden exotischer Zeichen. */
        font:               1em/1.2 Consolas, Lucida Sans Unicode,
                            monospace   !important;
        background-image:   none        !important;
        cursor:             text        !important;
    }
textarea:focus
    {
        color:              #000        !important;
        background:         #fff        !important;
    }
pre *,
code *,
.code *,
samp *,
var *
    {
        font-size:          1em         !important;
    }
pre,
pre *
    {
        line-height:        1.3         !important;
        white-space:        pre-wrap    !important;
    }
[align="justify"]
    {   /* Andere Blocksatzsünder findet man leider nicht so leicht. */
        text-align:         left        !important;
    }
table,
td,
th
    {
        border-collapse:    collapse;
        vertical-align:     top         !important;
    }
a:hover
    {
        text-decoration:    none;
    }
[href],
[onclick]
    {
        cursor:             pointer     !important;
    }
iframe[width="0"], iframe[height="0"],
iframe[width="1"], iframe[height="1"],
img[width="0"], img[height="0"],
img[width="1"], img[height="1"]
    {
        display:            none        !important;
    }
[alt]
    {
        white-space:        normal      !important;
    }
h1[id]:hover:after,
h2[id]:hover:after,
h3[id]:hover:after,
h4[id]:hover:after,
h5[id]:hover:after,
h6[id]:hover:after
    { /* Findet interne Links, falls ich mal auf
       einen Abschnitt in einer Seite linken will. */
        content:            " #" attr(id);
        font:               bold 14px/1 Consolas;
    }
button,
[type="submit"]
    {
        color:              #000        !important;
    }

Siehe auch:

• Userscript und Userstyle für Spiegel Online
• Licht aus! Das dunkle Userstylesheet
• Der Stil des Stylesheets

Eure Vorschläge?

Gzip (GNU zip) komprimiert Textdateien sehr effizient. Das Format wird nicht durch Patente belastet, und die meisten Browser und Crawler können damit umgehen. Die meisten, nicht alle.

Wir können die komprimierte Variante einer Ressource nicht auf gut Glück verschicken, sondern nur, wenn der Empfänger dies bekannt gibt:

Request-Header:

Accept-Encoding: deflate, gzip, x-gzip, identity, *;q=0

Das heißt: Wir müssen Content-Negotiation betreiben, über den Inhalt also mit dem Empfänger verhandeln – und eine unkomprimierte Variante vorhalten.

Spannend finde ich die Erkenntnisse, die Arvind Jain und Jason Glasgow zusammengefaßt haben: Anti-Virus-Software, Browser-Bugs, Webproxys und fehlkonfigurierte Webserver verhindern oft die Kompression.

Nehmen wir einmal an, Browser 1 verstehe gzip, Browser 2 nicht. Beide erreichen unsere Website über den selben Proxyserver. Browser 1 holt sich die gzip-Variante, der Proxy speichert diese und schickt sie später Browser 2. Obwohl der mit gzip nichts anzufangen weiß. Nicht so gut.

Also senden wir das Dokument mit einem Response-Header zurück, der den Proxy darüber informiert, wann er die Seite an einen anderen Browser ausliefern darf: Wenn der das gleiche Accept-Encoding vorlegt.

Response-Header:

Vary: Accept-Encoding

Der Vary-Header wurde erst in HTTP/1.1 eingeführt – also bekommen alle Anfragen, die per HTTP/1.0 einschlagen, immer die unkomprimierte Variante.

Jetzt kann der Internet Explorer (zumindest bis Version 6) die unkomprimierte Ressource überhaupt nicht mehr im Cache behalten, und die komprimierte landet auf jeden Fall darin. »Abhilfe« schafft ein weiterer

Response-Header:

Cache-Control: private

Und jetzt kann der Proxy die Ressource nicht mehr speichern.

Um das Thema »Internet Explorer« schnell hinter uns zu bringen, seien noch zwei Bugs erwähnt:

• Wenn ein XHTML-Dokument komprimiert und mit XML-Deklaration verschickt wird und überdies sehr lange oder viele Response-Header (Cookies beispielsweise) vorausgehen, dann versucht der Internet Explorer 6 in einigen Versionen, den MIME-Typen zu erraten. Er kommt dann zu dem Schluß, er habe XML vor der Nase – und scheitert kläglich.
• Wenn ein komprimiertes Dokument per SSL (HTTPS) angeboten wird, kann es auch passieren, daß der Leser gar nichts sieht.

Inzwischen hat sich die Situation jedoch gebessert.

Zu den Problemen beim Transfer und beim Caching stellt sich noch die Frage: Lohnt es sich?
Das Ein- und Auspacken kostet ja auch Zeit. Gerade bei Dokumenten, die erst bei Abruf komprimiert werden, müssen wir Faktoren berücksichtigen, die eventuell den Zeitgewinn ausstechen: die Serverlast und die Verarbeitungsdauer auf dem Server und beim Client.
Ein 3-kB-Dokument zu komprimieren, bringt überhaupt nichts. Bei 5 kB wird es langsam interessant, und ab 10 kB spürt der Leser den Unterschied.

Wir sollten beide Varianten statisch vorhalten, damit der Server nicht immer wieder dieselbe Arbeit erledigen muß. Hier fällt natürlich noch ein gewisser Koordinationsaufwand an.

Wann also komprimieren?

• Wenn die Ressource nicht unbedingt im Cache landen soll und/oder
• 5 kB überschreitet und
• der Server genug Kapazität dafür übrig hat oder beide Varianten fertig vorliegen.

Und wann nicht?

• Wenn die Ressource unbedingt in den Cache gelangen soll (Stylesheets in einem Webforum) und noch viele IE-6-Nutzer daherkommen oder
• der Server unter hoher Last steht oder
• das generierende Skript schon lange genug arbeitet.

Diese Hinweise bitte ich als grobe Richtlinien zu verstehen. Je nach Kontext können sie auch sehr danebenliegen. Per @font-face eingebettete Schriften will man ganz gewiß komprimieren – aber nur einmal verschicken. Hier lohnt sich ein Blick ins Logfile: Welche Browser benutzen meine Leser? Und dann trifft man eine informierte Entscheidung.

Im April 2009 habe ich gezeigt, wie man in WordPress mit Bordmitteln kurze URLs für Seiten und Artikel erzeugt: Blog-Adresse plus »?p=« plus Post-Id. Das funktioniert einfach und schnell. Nicht.

Formatkrieg

Meine Grundidee war: Ich habe nur einen Ort für die Logik des Verfahrens – die functions.php. Das stellte sich als zu naiv heraus, als die ersten kaputten Crawler aufschlugen, die das Fragezeichen mit einem urlencode() vorbehandelten. Requests auf /%3F=762 sind eben etwas anderes als auf /?=762.

Jetzt mußte ich doch einen zweiten Ort anfassen: die .htaccess.

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} ^/\%3fp\=(\d+)$
RewriteRule ^.* /?p=%1 [L,R=301]

Dann versagte auch die URL-Erkennung bei Twitter: Verlinkt wurde nur der Teil bis zum Fragezeichen, alles dahinter fiel weg.
Also habe ich die Kurz-URLs auf das Format /p762 umgestellt und die .htaccess angepaßt:

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} ^/\%3fp\=(\d+)$ [OR]
RewriteCond %{REQUEST_URI} ^/p\=?(\d+)$
RewriteRule ^.* /?p=%1 [L,R=301]

Auftritt Rivva-Bot: Der hat das neue Format um einen Slash / ergänzt, die Fehlerseite bestaunt – und dann blieb er weg. Kein Problem:

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} ^/\%3fp\=(\d+)$ [OR]
RewriteCond %{REQUEST_URI} ^/p\=?(\d+)/?$
RewriteRule ^.* /?p=%1 [L,R=301]

Markup

In einem sehr fruchtbaren Ideen-Pingpong (vulgo: Dialog) mit Bernhard Häussner haben wir die perfekte Notation für die Bekanntgabe des Shortlinks gefunden: Ein separater HTTP-Header samt meta-Element:

<meta http-equiv="X-Short-URI" content="http://toscho.de/?p=762">

Interessiert kein Schwein. Am 14. August schuf WordPress.com Tatsachen und verstetigte die sehr schlechte Lösung rel="shortlink" (Referenz). Schade.

Jetzt könnte die URL also so angegeben werden:

<link rel="shortlink" href="http://toscho.de/?p=762">

Opera: Shortlink im Infopanel

PHP-Code

Ich habe den Code zur Ausgabe in WordPress in eine kleine Klasse mit statischen Methoden gegossen – des armen Mannes Namensraum. Verzeiht mir.

<?php
/**
 * Class Short_URI: Short-URIs erzeugen und ausgeben.
 * @author Thomas Scholz <http://toscho.de>
 * @see http://microformats.org/wiki/rel-shortlink
 * @license GPL 3 <http://www.gnu.org/licenses/gpl.html>
 * @version 1.3
 *
 */
class Short_URI {

    /**
     * Kurz-URI
     * @var string
     */
    protected static $short_uri      = NULL;

    /**
     * Sendet einen Link-HTTP-Header
     * @param bool $headonly Nur bei HEAD-Requests senden?
     * @return void
     */
    public static function send_header($headonly = TRUE)
    {
        if ($headonly and ('HEAD' != $_SERVER['REQUEST_METHOD']) )
        {
            return;
        }
        if ( ! self::prepare() )
        {
            return;
        }
        header('Link: <' . self::$short_uri . '>; rel="shortlink"');
        return;
    }

    public static function link_elem($echo = TRUE)
    {
        if ( ! self::prepare() )
        {
            return;
        }
        $link = '<link rel="alternate shortlink" title="Shortlink"'
                . ' href="' . self::$short_uri . '" />';

        if ( ! $echo)
        {
            return $link;
        }

        echo $link;
        return;

    }

    /**
     * Erzeugt einen Link zum Twittern der aktuellen Seite.
     * @param string|array $args
     * @return string
     */
    static function tweet_link($args = NULL)
    {
        $message_template = 'Lese gerade: %TITLE %URL von @toscho';
        $link_text        = 'Artikel twittern';
        $title_length     = 80;
        $class            = 'twitterlink';
        // Zum Ändern echo=0 übergeben.
        $echo             = TRUE;

        if ( ! is_null($args) )
        {
            if ( is_array($args) )
            {
                extract($args);
            }
            elseif ( is_string($args) )
            {
                parse_str($args);
            }
            else
            {
                trigger_error(
                    '$args muss ein Array oder ein String sein.',
                    E_USER_ERROR
                );
            }
        }
        global $post;

        $title       = trim($post->post_title);

        if ( isset ( $title[$title_length+2] ) )
        {// Verkürzen bei Bedarf
            $title = self::end_on_word(substr($title, 0, $title_length)) . ' …';
        }

        $message = str_replace(
            array('%TITLE', '%URL'),
            array($title, self::$short_uri ),
            $message_template
        );

        $link = '<a class="' . $class
            . '" href="http://twitter.com/home?status=' . urlencode($message)
            . '" title="' . $message . '">'
            . $link_text . '</a>';

        if ($echo)
        {
            echo $link;
            return;
        }

        return $link;
    }

    /**
     * Prüft, ob eine Short-URI erstellt werden soll
     * @return bool
     */
    public static function prepare()
    {
        if ( is_front_page() )
        {
            return FALSE;
        }
        if ( is_page() or is_single() or is_attachment() )
        {
            global $post;

            if ( is_null( self::$short_uri ) )
            {
                self::$short_uri =
                    rtrim(get_option('home'), '/') . '/p' . $post->ID;
            }
            return TRUE;
        }
        // Archive
        return FALSE;
    }

    /**
     * Entfernt unvollständige Worte am Ende eines Strings.
     * @see http://toscho.de/2009/php-funktion-end_on_word/
     * @param $str Zeichenkette
     * @return string
     */
    static function end_on_word($str)
    {
        $str = trim($str);

        // Nur ein Wort, wird also nicht gekürzt.
        if ( FALSE === strpos($str, ' ') )
        {
            return $str;
        }

        // Jedes Wort ein Eintrag im Array …
        $arr   = explode(' ', $str);
        // … letztes Stück wegwerfen …
        array_pop($arr);
        // … den String wieder herstellen und Kommas trimmen.
        return rtrim( implode(' ', $arr), ',;');
    }
}

Wer bis hierhin durchgehalten hat, darf sich das auch als …

WordPress-Plugin Short-URI herunterladen.

Den Tweetlink baut ihr innerhalb des Loops mit diesem Code ein:

do_action('tweet_link');

Oder so:

do_action('tweet_link', 'parameter=wert');

Die darin enthaltene Klasse könnt ihr natürlich auch einfach in die functions.php einbinden, um den Code direkt zu verwenden.

Ich habe ihn unter die GPL 3 gestellt (hallo Helmut!), damit ihr damit machen könnt, was immer ihr wollt. Er ist mir länger geraten, als ich erhofft hatte; das heißt: Er hat sicher auch mehr Fehler. Findet sie!

Bernhard Häussner hat ein sehr gute Alternative genannt: Einen besonderen HTTP-Header. Nun, genau dafür eignen sich Cookies gut.

Das könnte so aussehen: Man legt sich irgendwo eine Datei hin, die das spezielle Cookie erzeugt und fragt dieses später ab, wenn man den Tracking-Code einbaut.

<?php
/**
 * Setzt ein Cookie, das den Benutzer identifiziert.
 */
header('Content-Type: text/html;charset=utf-8');
// Wenn man auch Subdomains erfassen will, schreibe man ».example.com«
$domain     = $_SERVER['HTTP_HOST'];

// Passwort-Hash (md5). Bitte ändern!
$password   = '5319bef941e8a2099c98011b799c56c1'; // krafutzel

// Höchstmöglicher Wert des UNIX timestamps = 19. 01. 2038, 03:14:07
$expires = 2147483647;

// Wie soll das Cookie heißen?
$cookiename = 'excludeme';

$buttontext = array('Cookie setzen', 'Cookie löschen');

$now_button = $buttontext[(isset ($_COOKIE[$cookiename]) ? 1 : 0)];

$info = FALSE;

if ( 'POST' == $_SERVER['REQUEST_METHOD'] )
{
    if ( !isset ( $_POST['pass'] ) or ( md5($_POST['pass']) != $password ) )
    {
        $info = '<p>Gib das richtige Passwort an.';
    }

    if ( !isset ( $_POST['action'] ) )
    {
        $info = '<p>Drück den Button!';
    }

    // Cookie löschen
    if ( $buttontext[1] == $_POST['action'] )
    {
        $expires = time() - 3600;
        $info = '<p>Cookie wurde gelöscht.';
    }
    // Cookie anlegen
    elseif ( $buttontext[0] == $_POST['action'] )
    {
        $info = '<p>Cookie wurde angelegt.';
        $now_button = $buttontext[1];
    }

    setcookie($cookiename, 1, $expires, '/', $domain, FALSE, TRUE);
}
?>
<!Doctype html>
<title>Keksdose</title>
<?php
// Feedback
$info and print $info;
?>
<form method="POST" action="<?php print $_SERVER['REQUEST_URI']; ?>">
  <label for="pass">Passwort:</label>
    <input required name="pass" id="pass" type="password" size="20" autofocus>
  <input type="submit" name="action" value="<?php echo $now_button; ?>">
</form>
<?php
if ( isset ( $_COOKIE[$cookiename] ) )
{
    print '<h2>All deine Cookies für diese Seite:</h2><pre>'
        . var_export($_COOKIE, TRUE) . '</pre>';
}

Download homecookie.zip

Jetzt bindet man den Tracking-Code nur dann ein, wenn das Cookie fehlt – deshalb empfehle ich, den Cookienamen anzupassen.