Mir ist aufgefallen, dass ich ziemlich häufig auf instant-thinking selbst, verschiedene Wikipedia-Artikel oder auf Flickr-Bilder verlinke.

In Doku-Wikis¹ werden interne und externe Links mit unterschiedlichen Icons markiert und da dachte ich mir, dass es eine gute Idee wäre so etwas auch für dieses Blog einzuführen. Auf diese Art und Weise können Leser die bestimmte Begriffe schon kennen, es sich sparen den Link anzuklicken. Sie erhalten die Information “Das ist ein Wikipedia-Artikel”, durch ein kleines “W” direkt neben dem Link, ohne extra über den Link hovern zu müssen. Durch die gleiche Technik, etwa ein Flickr-F, sind auch andere Arten von Links sofort zu erkennen und machen das Lesen der Posts leichter.

Bei der Gelegenheit fiel mir auch auf, dass instant-thinking noch gar kein Favicon besitzt, welches man schön als Indikator für interne Links verwenden könnte. Also musste das auch noch rasch hergestellt werden.

Also ist folgende, durchaus übersichtliche, ToDo zu bearbeiten:

1. Favicon entwerfen und einbinden
2. Link-Icons implementieren

Wie schwierig kann das schon sein?

Vorab: Ich bin kein Design-Mensch und es gibt aller Wahrscheinlichkeit nach deutlich bessere und elegantere Lösungen als meine hier vorgestellte. YMMV.

Favicon

Ein Favicon ist eine kleine Grafik, die Browser als grafische Mini-Referenz für Webseiten anzeigen. Etwa in der Adresszeile oder in den Favoriten. Ich kann nicht gut malen, und daher hatte ich die simple Idee², die Anfangsbuchstaben der Domain zu nehmen. Dass der Themenkomplex IT in diesem Blog einen großen Raum einnimmt, ergibt sofortige ExtraBrowniePoints.

Aber wie gestaltet man nun so ein Teil?

Ich habe zunächst die Schriftart meines Titels herausgefunden, indem ich mit Skitch einen Screenshot davon gemacht habe. Diesen Screenshot habe ich dann zu WhatTheFont hochgeladen³. Eine sehr freundliche Website, die mir verriet, dass es sich bei der verwendeten Schriftart wohl um American Typewriter handelt.

Sehr schön. Als nächstes habe ich mit dem DigitalColor-Farbmesser⁴ die RGB-Werte der Farbe des roten Strichs unter dem Titel rausgesucht.

Mit diesen Informationen habe ich dann mein Favicon-Design mit Text, wait for it, Edit erstellt. Genau, TextEdit, das kleine, aber sehr feine Schreibprogramm das jedem OS X beiliegt. Einfach die beiden Buchstaben eintippen, American Typewriter als Schriftart wählen und das ganze unterstreichen. Dann noch den Hintergrund schwarz, die Textfarbe weiß und den Unterstrich in RGB 167,0,0 einfärben und die Skalierung hochdrehen. Das Ergebnis schaut aus wie auf dem Bildchen da rechts.

IMHO recht hübsch. Aber der Unterstrich ist noch viel zu dünn. Also rasch einen neuen, relativ quadratischen Screenshot erstellt und das resultierende png in Vorschau öffnen. In Vorschau dann reinzoomen bis der Unterstrich komfortabel mit der Rechteckauswahl zu treffen ist, den Ausschnitt kopieren und die Schwarze Fläche unter dem Strich per Einfügen mit roter Farbe füllen.

So schaut das Werk dann in fertig aus:

Um das ganze jetzt in das Favicon-Format zu bekommen, habe ich den Online-Dienst Favicon-Generator bemüht. Bild hochladen, Favicon bekommen. Sehr einfach, gar nicht schwierig.

Die Einbindung des Favicons in ein Wordpres-Theme⁵ ist hier sehr gut beschrieben. Die Kurzfassung ist, dass das favicon.ico auf den Webspace hochgeladen wird und in der Datei your_path/wp-content/themes/your_theme/header.php die folgende Zeile eingefügt wird:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

Speichern und Fertig. Nach dem nächsten Reload des Browsers ist das nagelneue Favicon zu bewundern.

Link-Icons

Nun also zu den kleinen Icons neben den Links. Ein wenig googlen und schon ist das Link Indication Plugin gefunden. Das ist ja das schöne daran, wenn man ein so weit verbreitetes System benutzt: Die meisten Probleme haben andere Leute schon gehabt und, zumindest sehr häufig, gelöst.

Von der oben gefundenen Seite habe ich mir dann noch das dort verlinkte Icon-Pack heruntergeladen. Noch mehr Icons sind etwa hier zu finden.

Nach der problemlosen Installation des Plugins habe ich in den Einstellungen noch die Benutzung der link-indication_style.css Datei aus dem Plugin-Verzeichnis veranlasst und Flickr & Delicious⁶ zu den Linktypen hinzugefügt. Das schaut dann so aus:

Dazu muss man die vorhin erwähnte link-indication_style.css noch um die eigenen Definitionen ergänzen. Diese schaut bei mir also jetzt so aus:

/* For Link Indication plugin */
a.liinternal { padding-right: 12px; background: url(images/link-icon_instant-thinking.png) no-repeat right; }
a.liexternal { padding-right: 12px; background: url(images/link-icon_external_18.png) no-repeat right; }
a.liwikipedia { padding-right: 13px; background: url(images/link-icon_wikipedia.gif) no-repeat right; }
a.liflickr { padding-right: 13px; background: url(images/link-icon_flickr.png) no-repeat right; }
a.lidelicious { padding-right: 8px; background: url(images/link-icon_delicious.png) no-repeat right; }
a.liwp { padding-right: 16px; background: url(images/link-icon_wordpress.png) no-repeat right; }
a.liftp { padding-right: 13px; background: url(images/link-icon_ftp.png) no-repeat right; }
a.limailto { padding-right: 18px; background: url(images/link-icon_mail.gif) no-repeat right; }
a.lipdf { padding-right: 12px; background: url(images/link-icon_pdf.png) no-repeat right;  }
a.lizip { padding-right: 12px; background: url(images/link-icon_zip.png) no-repeat right;  }

Die vier oberen Definitionen habe ich hinzugefügt, beziehungsweise mit anderen Icons versehen.

Zu diesem Zweck habe ich alle Icons aus dem heruntergeladenen Icon-Pack in das Unterverzeichnis images des Plugin-Ordners hoch geladen. Für die internen Links habe ich die bereits erstellte Favicon PNG-Datei einfach mit der Vorschau auf 7×12 Pixel runter skaliert.

Es war dann letztlich, wie so häufig, eben doch etwas mehr Arbeit als gedacht. Aber es ist schon erstaunlich, was man mit einer Idee, einer Google-Suche, den Mac OS X Bordmitteln und ein paar Screenshots so hin bekommt.

1. BTW ein sehr praktisches Wiki-System ohne Datenbankabhängigkeiten
2. die schon viele vor mir hatten
3. Ich bin mir sicher, viele von euch hätten das mit ihren Augen gekonnt. Oder ins CSS geguckt…
4. Ein wundervolles Programm, dass im Dienstprogramme-Ordner jeder OS X Install
5. Oder sonst eine Website…
6. Twitter und Amazon wären auch noch so eine Idee…

• Picturesque – is a simple app with a simple goal: to make images more beautiful. Whether you are in web or print, your images can benefit from a touch of Picturesque magic. $34,95.
• Five Tools to Increase the RSS Subscribers for your WordPress Blog –
• Clyppan – is a free and Open Source clipboard history application for Mac OS X that’s always at your fingertips.
• Querious – is a new MySQL database management application written from the ground up exclusively for Mac OS X Leopard. Shareware, 25$…
• myWeblog – is a small, simple and nice weblog editor with some nifty features and designed to be really easy to use.
• Mit dem Handy in die Wolke –
• Open Source Monitoring 4.0 – ICINGA – Fork of the popular Nagios monitoring solution and maybe the new standard…
• If you want to be found via Google, here’s how — even if you have a common name – Some hints for the google profile pages…

• qlcolorcode – A Quick Look plugin for source code with syntax highlighting
• Checkfilenames – a little perl script to find file names that are longer than a certain number of characters. Very handy…
• Wissenswerkstatt | Ist die Wikipedia zitierfähig? » Der Umgang mit wissenschaftlichen Quellen –
• corkscrew – Corkscrew is a tool for tunneling SSH through HTTP proxies.
• WinMerge – is an Open Source (GPL) visual text file differencing and merging tool for Windows. It is highly useful for determining what has changed between project versions, and then merging changes between versions.
• Small Basic – is a project that's aimed at bringing "fun" back to programming. By providing a small and easy to learn programming language in a friendly and inviting development environment, Small Basic makes programming a breeze. Ideal for kids and adults alike, Small Basic helps beginners take the first step into the wonderful world of programming.
• Helvetica and Alternatives to Helvetica –
• SQLite Tutorial – This article explores the power and simplicity of sqlite3, starting with common commands and triggers.
• JuicePhone – is a Mac application that extracts your iTunes iPhone/iPod touch backups and puts the extracted backup into a chosen folder, which represents the device’s home folder.
• Google SketchUp – Mit Google SketchUp können Sie 3D-Modelle erstellen, ändern und mit anderen gemeinsam verwenden. Und das Programm ist einfacher zu erlernen, als andere 3D Modellierprogramme
• Communote – Hosted Twitter-Clone, targeted at professional users… Maybe worth a look…
• Introducing Prologue – Turning WordPress into some kind of internal Twitter with comments. Interesting…
• MacRuby – is a version of Ruby 1.9, ported to run directly on top of Mac OS X core technologies such as the Objective-C common runtime and garbage collector, and the CoreFoundation framework.
• macam – is a driver for USB webcams on Mac OS X. It allows hundreds of USB webcams to be used by many Mac OS X video-aware applications.
• How to make a presentation with Latex – Using the Beamer package for presentations
• seam-carving-gui – A GUI for Content Aware Image Resizing (Retargeting, Seam Carving). Binaries available for OS X and Windows.
• Kuchen 2.0 oder "5 Minuten Schoko-Kuchen" –
• ISS Now – Utterly amazing live tracking of the ISS in orbit…

• A tour of git: the basics –
• BackupPC – is a high-performance, enterprise-grade system for backing up Linux, WinXX and MacOSX PCs and laptops to a server’s disk.
• DoBeDo – is a freeware Dashboard Widget for Mac OS X. The widget allows you to view, add, edit and delete todo items.
• How-To: Sex mit Männern – Lesenswerte Anleitung für die interessierte Weiblichkeit…
• So you want to be a consultant…? –
• DESKTOPOGRAPHY –
• PhoneFinger – transforms your Macs mouse cursor into a realistic simulated human finger for testing and demoing iPhone applications and websites.
• 218 HD Resolution Desktop Wallpapers for Nerds –
• Design Stencils – Yahoo! Design Pattern Library – is available for OmniGraffle, Visio (XML), Adobe Illustrator (PDF), and Adobe Photoshop (PNG), and covers a hell lot of topics…

• Timeline of the Debian project – a partial timeline of the Debian project using the SIMILE Project’s DHTML timeline component.
• Photozone – Loads of Lense Reviews for all Brands.
• vanilla.rb – Reimplementation of the Vanilla-Bliki in Ruby…
• 17 Ways to visualize the Twitter Universe –
• Pixelpost – is an open-source, standards-compliant, multi-lingual, fully extensible photoblog application for the web.
• Glest – is a free 3D real time strategy game, available for several operating systems
• Skyhook Wireless – Submit your Wireless Access Point – Add your own WLAN-Access Point to the Skyhook Wireless Service to improve the Wi-Fi Positioning System for iPhone and iPod touch
• 33 awesome body enhancement photoshop tutorials –

• Managing the Mac OS X Keychain –
• How to install Mail.app on the iPod touch –
• macvim – is a port of the text editor Vim to Mac OS X that is meant to look better and integrate more seamlessly with the Mac than the existing Carbon port of Vim.
• MarcoPolo – brings context-aware computing to your portable Mac computer
• Fahrplan Widget – displays departures or arrivals for any train station, bus or tram stop within Germany.
• Rember – is a front-end GUI to the ‘memtest’ command line memory testing program. This application will allow the user to select the number of test loops, as well as the amount of memory to test.
• Photoshop Button Maker – Clever, by the time I get my hands on photoshop I´ll try this one…
• Python for system administrators –
• Amazon Widgets – From Product Cloud to Wishlist…
• The Top Twenty Starship Captains –