Doch genug der Vorrede. Hier eine Schritt für Schritt Anleitung zur Verwendung von Twurl.

1. Installation

Unter Mac OS X ist die Installation von Twurl recht einfach und geschieht über das bereits vorinstallierte gems mit dem Befehl:

sudo gem install twurl

Danach sollte Twurl auch bereits einsatzfähig innerhalb des Terminals sein.
Nun ist es noch erforderlich eine entsprechende Twitter-Applikation mit dem ganzen zu verknüpfen.

2. Authenzifizierung

Dazu erstellt man bei Twitter eine neue OAuth Applikation. Dies erfolgt – nachdem man eingeloggt ist – unter der folgenden URL: http://dev.twitter.com/apps/new

Die Eingaben unter Name, Description und Website kann man frei wählen. Hier geht es vor allem darum die Applikation später leichter wiederzufinden – wenn man vorhat das ganze auch anderen später zur Verfügung zu stellen, empfiehlt es sich aber bei den Einträgen schon etwas weitsichtiger vorzugehen.
Nach Fertigstellung liegen unter Details ein Consumer Key und ein Consumer Secret vor, der für die Authentifizierung im Terminal mittels Twurl notwendig ist. Unter dem Reiter “Settings” auf der Twitter-Webseite für die Applikation kann man den Zugriff festlegen. Hier setzt man den Zugriff auf Read and Write, um auch das Posten von Tweets vom Terminal aus zuzulassen.

Nun führt man im Terminal folgenden Befehl aus:

twurl authorize --consumer-key the_key --consumer-secret the_secret

wobei the_key durch den bei der Twitter Applikation hinterlegten Consumer key ersetzt und the_secret durch den Consumer secret.
Anschließend spukt twurl eine URL auf, die man kopiert und im Browser aufruft. Dort erhält man von Twitter eine PIN, die man im Terminal einfügt, wo Twurl die Eingabe dieser bereits erwartet.
Abschließend sollte die Meldung “Authorization successful” erscheinen. Dann ist die Authenifizierung abgeschlossen.

Jetzt kann man Tweets senden:

3. Tweets vom Terminal senden

Das ganze läuft innerhalb twurls über einen POST Request.
Um einen Tweet zu senden, gibt man im Terminal folgenden Befehl ein:

twurl -d 'status=Testing twurl' /1/statuses/update.xml

Wobei man den status-Text natürlich entsprechend seinen Wünschen anpassen kann.

Wem dieser Befehl zu umständlich ist, der kann sich in seinem Bash-Profil auch einen verkürzten “Alias” für das ganze anlegen.
Dazu fügt man in seinem persönlichen Bash-Profil (z.B. die Datei .bash_profile im eigenen Home-Verzeichnis) z.B. folgendes hinzu:

tweet() {
         twurl -d "status=$1" /1/statuses/update.xml
        }

Kurze Erläuterung:
Wir haben hier eine Funktion namens tweet erstellt, die man nach abspeichern nun in der eigenen Shell aufrufen kann. $1 ist ein Platzhalter für das 1. Argument, das beim Aufruf mit übergeben wird. Da in der Bash bei normalen aliases keine solchen Variablen möglich sind, wurde hier der Weg über eine Funktion gewählt.

Einen neuen Tweet sendet man nun ganz bequem mittels:

tweet "Mein Tweet via twurl"

Ausgehend vom aktuellen Pfad erweitert folgendes Skript den Import-Pfad auf ein Unterverzeichnis “python”, in dem weitere Skripte liegen. Diese können dann im Anschluss ebenfalls importiert und verwendet werden.

 
# import system packages
import os
import sys
 
# import local path
exec_path=os.getcwd()                                # aktuelles arbeitsverzeichnis
import_local_path=exec_path+'/python/'               # unterverzeichnis, in dem weitere skripte liegen
sys.path.append(import_local_path)                   # erweitere system-variable der import-pfade,
                                                     # nach denen gesucht wird
print 'import local path: '+import_local_path        # 
 
# import script                                      # hier jetzt skripte aus lokalen verzeichnis
                                                     # einbinden (import)

Das Skript importiert also zunächst die beiden Module os und sys, die für die Pfad-Erweiterung benötigt werden. Anschließend wird damit das aktuelle Arbeitsverzeichnis gewonnen. Ausgehend davon wird der neue Pfad festgelegt. Somit sind relativ einfach relative Pfade möglich ohne das aktuelle Arbeitsverzeichnis hardcoden zu müssen. Natürlich wäre letzteres aber auch möglich.
Anschließend wird dann die System-Variable path um den neuen Pfad erweitert. Nun kann man auch alle Module aus diesem Pfad importieren.

An der inhaltlichen Ausrichtung des Blogs soll sich im wesentlichen nichts ändern. Ich möchte an dieser Stelle weiterhin über Themen mit dem Schwerpunkt Webentwicklung schreiben. Das ganze ist ja ein doch sehr lebendiger Bereich, bei dem es auch für mich immer wieder neues zu entdecken gibt. Und so möchte ich hier gerne meine persönlichen Erfahrungen und immer wieder Tipps und Tricks veröffentlichen. Dazwischen soll es aber auch immer wieder Interessantes aus der Blogosphäre geben. Vor der Pause hatte ich ja wöchentlich Link-Tipps veröffentlicht. Das soll es auch weiterhin geben, wenn auch wohl nicht mehr im Wochenrhythmus, sondern vorerst etwas unregelmäßiger. Mal schauen – vielleicht klappt das mit dem Wochenrhythmus ja auf längere Sicht irgendwann wieder.
Ziel ist, etwa 2 Artikel pro Woche zu bringen. Auch wenn ich durchaus gerne mehr machen würde, so ist das zeitlich einfach recht schwierig. Wer aber Lust und Laune hat einen Gastartikel hier zu platzieren, der ist jederzeit willkommen.

Besucherstatistik

Okay, genug der Vorrede, schauen wir uns die Statistik vom Oktober an. Die Zahlen sind von Google Analytics ermittelt.

Im Monat Oktober gab es immerhin rund 512 Besuche zu verzeichnen. Die meisten Leute sind dabei von Google gekommen. Ein Rückblick auch auf die vergangenen Monate zeigt, dass hierbei vor allem die sehr gute Platzierung einiger früher Artikel hier im Blog verantwortlich ist. So ist das auch aktuell die Haupttraffic-Quelle.
Die wichtigsten Keywords sind dabei css border radius und xampp ubuntu.

Alles in allem bin ich mit den Zahlen angesichts der langen Pause nicht unzufrieden. Es ist aber auch klar, dass ich natürlich auch daran interessiert bin, die Seite noch bekannter zu machen. Dazu dürfte es vor allem wichtig sein, andere Trafficquellen jenseits von Google zu erschließen. Dabei spielen gute Inhalte zweifellos die Schlüsselrolle, aber Networking dürfte ebenfalls wichtig sein. Diesbezüglich möchte ich mich demnächst vor allem auf Twitter und die Link-Tipps hier im Blog konzentrieren.

Ziele:

An verschiedenen Punkten sind die Ziele ja bereits angeklungen. Um es übersichtlicher zu halten, möchte ich diese hier einfach nochmals zusammenfassen.
- etwas stärker um weitere Trafficquellen bemühen
- ca. 2 Artikel pro Woche
- darunter auch Linktipps zu interessanten Artikeln anderer Blogger (Vorschläge gerne per Twitter @blogexperiment3)
- ob es für den November bereits klappt, bleibt abzuwarten, aber für Dezember sollten 1000 Besuche pro Monat machbar sein

Hier möchte ich euch kurz beschreiben, wie ihr dieses auf eure Webseite einbinden könnt:

1. Plugin herunterladen

Zunächst müsst ihr das Plugin herunterladen und in ein Verzeichnis eurer Wahl packen.
Download von slimScroll

2. JQuery und Plugin einbinden

An beliebiger Stelle (am besten jedoch im Header- oder Footerbereich) bindet ihr zunächst folgendes ein:

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script> 
<script type="text/javascript" src="http://www.euredomain.de/verzeichniseurerwahl/slimScroll.js">
</script>
<script type="text/javascript" src="http://www.euredomain.de/verzeichniseurerwahl/main.js"></script>

In den ersten beiden Zeilen wird JQuery und JQuery UI direkt von jquery.com eingebunden. Natürlich könnt ihr die beiden JS-Dateien auch auf eurem eigenen Host hinterlegen und die Pfade entsprechend ändern.
In der dritten Zeile wird schließlich das Plugin eingebunden, welches ihr auf eurer Webpräsenz in einem Verzeichnis eurer Wahl hinterlegt habt.

3. Plugin anwenden

Nun wollen wir das Plugin auf ein beliebiges Element auf eurer Webseite anwenden und diesem die Scroll-Funktionalität zufügen.

Nehmen wir an, es handelt sich um folgendes DIV-Tag mit der Klasse scrollable:

<div class='scrollable'>
  Hier Inhalt der Box einfügen.
</div>

Diese sprechen wir nun mittels JQuery an (wer mit JQuery noch nicht so vertraut ist, findet auf jquery.com einige schöne Einführungen). Folgenden Code fügen wir nun in die main.js ein:

$(document).ready(function(){
 
	$(".scrollable").slimScroll({
		height: '150px'
	});
 
});

Die Klasse scrollable wird hier also mit der slimScroll-Funktion versehen. Hier wird genau ein Parameter verwendet, nämlich die Höhe der Box auf 150px festgesetzt. An dieser Stelle können selbstverständlich Werte eurer Wahl stehen.

Ferner gibt es folgende weiteren Einstellmöglichkeiten:

• width: Breite der Box. Falls nicht gesetzt, wird dies auf den Wert des Elternelements gesetzt.
• size: Größe der Scrollbar.
• position: left/right.
• color: Farbe der Scrollbar

Anwendungsbeispiele für verschiedene Einstellungen gibt es auf der Seite des Pluginentwicklers.

 
$(document).ready(function(){
 
  $('#link').click( function(e) {
 
    e.preventDefault();
    $('html,body').animate({
       scrollTop: $("#element").offset().top
    }, 1000 );
 
  });
 
}); // document.ready

Was passiert hier?

Zunächst wird mittels

$(document).ready(function(){
}); // document.ready

gewartet bis das HTML-Dokument vollständig geladen ist. Erst anschließend wird der Code innerhalb dieses Blocks ausgeführt.

$('#link').click( function(e) {
 e.preventDefault();
});

Hierbei wird dem Link mit der ID link der Eventhandler click zugefügt. Das heißt im Klartext, dass der Codeblock nur ausgeführt wird, wenn auf den Link mit dieser ID geklickt wird. Ist das der Fall wird an dieser Stelle verhindert, dass die standardmäßig mit dem Klick verknüpfte Aktion ausgeführt wird. Hier also der Sprung zum verlinkten Element. Hier wollen wir ja stattdessen unsere ScrollTo-Aktion ansetzen. Das geschieht im folgenden:

$('html,body').animate({
}, 1000 );

Nun fügen wir dem HTML und BODY-Tag eine Animationsfunktion zu, die uns von JQuery zur Verfügung gestellt wird. Da nicht alle Browser den HTML-Tag hier richtig erkennen, bedarf es hier zusätzlich des Body-Tags. Die Animation soll hier 1000ms andauern. Hier lassen sich natürlich auch andere Werte einstellen.

scrollTop: $("#element").offset().top

Nun scrollen wir zum Tag mit der zugewiesenen ID element. Die Funktion offset() gibt uns dabei die Position des Elements an. Dabei werden sowohl die Position relativ zum Dokument von oben (top), als auch die von links (left) zurückgegeben. Hier interessiert uns jedoch nur die top-Position.

Allerdings muss man natürlich erst mal herausfinden, wie das ganze funktioniert. Bei meiner Suche bin ich auf eine Google-Hilfeseite gestoßen, die allerdings in Englisch verfasst ist. Daher möchte ich hier kurz die einzelnen Schritte auch auf deutsch darlegen:

1. Dictionary in deutscher Sprache herunterladen

TeXworks kann mit den frei verfügbaren Dictionaries von OpenOffice arbeiten. Diese stehen in zahlreichen Sprachen zum freien Download zur Verfügung.
Erster Schritt ist also das gewünschte Paket auf http://wiki.services.openoffice.org/wiki/Dictionaries herunterzuladen. Dabei handelt es sich um .oxt-Dateien. Diese sind gepackt und enthalten die eigentlich interessanten Dateien.

2. Sprachdateien entpacken

Am einfachsten lassen sich die Sprachdateien über einen kleinen Trick entpacken. Dazu ergänzt man einfach die Dateiendung .zip und entpackt dieses dann mit einem Programm der Wahl. Anschließend sollte man einen entpackten Ordner vorfinden, der im Ordner de_DE_frami als Beispiel für das deutsche Sprachpaket die beiden interessanten Dateien de_DE_frami.aff und de_DE_frami.dic enthält.

3. Dictionary-Ordner von TeXworks finden

Unter Mac OS X lässt sich der Ordner am simpelsten mit Spotlight und einer Suchabfrage wie etwa “dictionaries art:ordner” finden. Das Verzeichnis liegt normalerweise im eigenen Homeverzeichnis unter ~/Library/TeXworks/dictionaries.

4. Kopieren der beiden Dateien

Nun kopiert man die beiden Dateien de_DE_frami.aff und de_DE_frami.dic in das dictionaries-Verzeichnis von TeXworks. Anschließend muss man TeXworks neu startet.
Unter dem Menüpunkt Bearbeiten -> Rechtschreibung sollte dann das deutsche Rechtschreibpaket auswählbar sein.
Das wars

Durch einen Artikel bei T3n bin ich letztens auf Twimbow aufmerksam geworden. Dabei handelt es sich um keinen eigenständigen Client, sondern um ein Webangebot, das sich wie Twitter in jedem beliebigen Browser nutzen lässt. Die Oberfläche ähnelt dabei der von TweetDeck, jedoch setzt man hier durch die Hervorhebung durch Farben. Und gerade das ist auf jeden Fall eine spannende Sache, da sich so definitiv eine bessere und vor allem schnellere Übersichtlichkeit erreichen lässt.

Funktionalität

Zu den wichtigsten Funktionen zählen:

• Mehrere Accounts gleichzeitig verwalten
• Markierung durch Farben zur besseren Übersicht
• Medien-Vorschau
• 3 spaltiges Layout für (a) Alle Tweets, RT über dich, (b) den Twitterstream und (c) Überwachung bestimmter Suchwörter
• wahlweise eigenen Reader für externe Webseiten verwenden
• Tweets zeitgesteuert absenden

Erfahrungsbericht

Die Anmeldung klappt schnell und problemlos. Auch das Hinzufügen von Accounts ist denkbar einfach. Danach gehts dann auch schon aktiv los.
Die Bedienoberfläche ist im Grunde recht intuitiv und schnell durchschaut. Es gibt verschiedene Einstellmöglichkeiten, die recht rasch durchgeglickt sind. Verfeinerungen (z.B. hinsichtlich der farbigen Einordnung habe ich erst bei der aktiven Verwendung mit der Zeit vorgenommen.)
Schön ist auf jeden Fall, dass man alle Interaktionen, die einen persönlich betreffen direkt in der linken Leiste dargestellt findet. Hierbei lässt sich dann auch einstellen, was alles angezeigt werden soll. Also z.B. nur Direktnachrichten, nur @Mentions oder diverse Kombinationen.
Ein sehr schönes Feature ist auch das zeitgesteuerte Absenden von Tweets.
Was mir aktuell noch sehr fehlt, ist die Vorschau der Originallinks, wenn man mit der Maus über die Kurzlinks fährt, wie es bei Twitter selbst implementiert ist. Eine wie ich finde sehr nützliche Sache, um zu wissen, ob man den Link vielleicht schon mal geglickt hat oder einfach nur herauszufinden, wohin einen die nächste Reise in etwa führen wird.

Das Layout

Einen Screenshot aus meinem Account mit Hervorhebung der wichtigsten Features habe ich hier f”ur euch bereitgestellt:

Twimbow Funktionen

Fazit

Insgesamt gefällt mir dieses Angebot recht gut und ich werde es testweise auf jeden Fall weiterhin verwenden.
Gibt es sonst noch jemanden, der den Dienst ebenfalls schon mal ausprobiert hat? Oder habt ihr andere Empfehlungen?

Das tolle bei Mashable ist, dass diese mit dem Inhalt mitscrollt. Man hat also immer die entsprechenden Teilen-Buttons direkt zur Verfügung. Das erhöht die Chance, dass diese auch genutzt werden, sicherlich ein gutes Stück weit. Denn bekanntlich will man es als Leser so bequem wie möglich haben und nicht endlos scrollen und suchen müssen, bis man die entsprechenden Buttons findet. Mag zwar sein, dass der ein oder andere sogar noch Links per Hand kopiert (mache ich selbst teilweise auch noch so), aber die Chance dürfte doch unweit geringer sein.
Insofern ist eine Implementierung der Teilen-Buttons in einer immer sichtbaren Box am linken Contentrand gewiss eine tolle Lösung.

In diesem Artikel möchte ich vorstellen, wie man eine solche umsetzen kann.

Als Inspirationsquelle dient dabei folgender englischsprachige Artikel: http://www.simplebloggertutorials.com/2010/07/add-floating-share-buttons-like.html

Vorabinformationen

Als Ausgangslage dient ein HTML-Gerüst der folgenden Art: Ein Layout mit Header, 960px weitem und zentriertem Hauptteil sowie einem Footer, der sich über die gesamte Seitenbreite erstreckt. Ich nehme hier nur minimale optische Anpassungen vor, damit der Code übersichtlich bleibt.

Das HTML-Gerüst

< !DOCTYPE html>
<html>
<head>
 
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
 
	<title></title>
 
	<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	< ![endif]-->
 
    <link rel="stylesheet" href="style.css" type="text/css" media="screen"></link>
 
</head>
 
<body>
 
	<header>
	</header>
 
	<div id="site_wrap">
 
		<!-- hier kommt spaeter die sharebox hin -->
 
		<section>
		</section>
	</div> <!-- end site_wrap -->
 
	<footer>
	</footer>
 
        <!-- hier kann man z.b. spaeter die javascript-dateien verlinken -->
 
</body>
 
</html>

Die dazugehörige CSS-Definitionen: style.css

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,  
pre, form, fieldset, table, th, td, input, textarea { margin: 0; padding: 0; }  
 
 
body {
	font-size: 100.1%;
	margin:0px;
	padding:0px;
	background-color:#fff;
}
 
 
header {
	background-color:#000;
}
 
 
#site_wrap {
	margin:0px auto;
	width:960px;
	font-size:0.8em;
	background-color:#e1e1e1;
}
 
 
footer {
	background-color:#000;
}

HTML-Code

Nun kommen wir zum Einbau der eigentlichen Sharebox. Dazu fügen wir den nachfolgenden Code nach … ein.

<!-- fixed scrolling sharebox -->
<div id="sharebox">
 
<div class="share"> <p align="center"><a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="blogexperiment3">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script> </p></div>
<div class="share"> <p align="center"> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"> {lang: 'de'} </script> <g:plusone size="tall"></g:plusone> </p></div>
<div class="share"> <p align="center"><iframe src="//www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;send=false&amp;layout=box_count&amp;width=90&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:90px; height:80px;" allowTransparency="true"></iframe></p> </div>
 
</div> <!-- end sharebox -->

Hier sind nun die Buttons von Twitter, Facebook und Google+ eingebunden. Den Code für die Buttons findet sich auch auf den jeweiligen Seiten. Wer obigen Code kopiert, sollte beachten, dass dort bei Twitter-via zum Beispiel der Twitteraccount dieses Blogs eingetragen ist. Für die URL, die für den Facebook-Button benötigt wird, kommt ein kurzer PHP-Code zum Einsatz, der jedoch nur für WordPress-Themes funktioniert.

CSS-Code

Im Folgenden nehmen wir nun die Ausrichtung mittels CSS-Definitionen vor.

 
/* Sharebox */
 
#sharebox {
float: left;
margin-left: -115px;
width:100px;
position: absolute;
padding:2px;
background:#e1e1e1;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
}
 
#sharebox .share {
padding: 4px;
}

Die Box wird also mehr oder weniger einfach nach links weg aus dem Contentbereich verschoben.
Diese Sharebox wird sich allerdings noch nicht mitbewegen. Diesen Effekt könnte man recht einfach dadurch erreichen, dass man position:absolute einfach durch position:fixed austauscht. Problem ist aber, dass die Sharebox dann auch in den Footerbereich hineinläuft, was wir aber nicht wollen. Also geht es im folgenden nun an eine Umsetzung mithilfe von JQuery.

JQuery-Code: sharebox.js

$(document).ready(function() {
 
/* Sharebox */
 
  var $sharebox   = $("#sharebox"),
  $window    = $(window),
  offset     = $sharebox.offset(),
  bottomPos =  $sharebox.parent().height(),
  topPadding = 15;
 
  $window.scroll(function() {
     if ($window.scrollTop() > offset.top && $window.scrollTop() < bottomPos) {
	$sharebox.stop().animate({
		 marginTop: $window.scrollTop() - offset.top + topPadding
	});
     } else {
	$sharebox.stop().animate({
		 marginTop: 0
	});
    }
  });
 
}); // document ready

Hier wird nun jeweils die aktuelle Fensterposition mit der Position der Box verglichen und diese entsprechend verschoben. Allerdings nur so lange, bis das Ende des Elternelements (parent) erreicht ist, welches hier dem div mit der id=”site_wrap” entspricht.

Dieses Skript muss nun natürlich noch in die HTML-Datei verlinkt werden, damit der Code auch ausgeführt werden kann. Beispielsweise nach dem Footer:

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<script type="text/javascript" src="sharebox.js"></script>

Fertig!

Ein solches Bildverarbeitungsprogramm, welches innerhalb der Konsole läuft, ist ImageMagick. ImageMagick bringt eine verdammt große Vielfalt an Funktionen mit sich, die ich bislang selbst noch längst nicht alle austesten konnte. Ich möchte an dieser Stelle aber einfach mal ein paar Beispiele für die Nützlichkeit von ImageMagick bei Bildbearbeitung geben.

Dazu sollen folgende Fallbeispiele dienen.

1. 1. Bildformat umwandeln
2. 2. Bild verkleinern und zuschneiden
3. 3. Massenverarbeitung von Bildern
4. 4. Bilder zusammenfügen
5. 5. Animationen erstellen

Installation

Zunächst muss ImageMagick installiert werden. Im folgenden möchte ich kurz die Installation auf Basis der SourceCode-Version vorstellen.

1. Download

Die aktuelle Source-Code-Version von ImageMagick gibt es unter http://www.imagemagick.org/script/download.php

2. Entpacken

Je nachdem für welche Archivversion (also z.B. zip oder tar.gz) ihr euch entschieden habt, fällt das Entpacken unterschiedlich aus.
Hier möchte ich nur kurz auf die .tar.gz Variante eingehen. Diese lässt sich über Kommandozeile mit folgenden Befehlen entpacken:

cd /verzeichnis/des/archivs/
gunzip archivname.tar.gz
tar -xvf archivname.tar

3. Konfiguration & Kompilieren

Jetzt sollte ImageMagick als Quellcode in einem eigenen Ordner vorliegen. Hier nehmen wir nun die Konfiguration vor, um das ganze anschließend mit den zur Verfügung stehenden Routinen zu kompilieren:

./configure
make

Das meiste sollte hier eigentlich ziemlich automatisch ablaufen. Wer sich ein wenig besser mit Installationen unter Unix auskennt, kann hier natürlich auch entsprechende Änderungen der Konfiguration vornehmen. Zahlreiche Informationen zu verschiedenen Optionen gibt es in den beigelegten Installationshilfdateien (in Englisch).

4. Testen und Installieren

Im Prinzip sollte sich ImageMagick hier bereits verwenden lassen. Allerdings nur innerhalb dieses Ordners. Um es auch systemweit verfügbar zu machen, müssen wir es in ein entsprechendes Systemverzeichnis kopieren. Hierbei verwenden wir folgenden einfachen Befehl:

sudo make install

Dabei wird das innerhalb der Konfiguration gewählte Verzeichnis verwendet.
Nun können wir noch testen, ob alle Bestandteile auch richtig funktionieren oder ob etwas bei der Kompilierung schief gelaufen ist:

sudo make check

Beispiele

1. Bildformat umwandeln

Zunächst wechseln wir innerhalb des Terminals in das Verzeichnis, in dem die zu bearbeitende Bilddatei liegt:

cd /directory/path/

Anschließend wandeln wir das Bild image.jpg zu transfer.png um.

convert image.jpg transfer.png

Man sieht, dass wir hier die Routine convert aus dem ImageMagick-Paket mit zwei Parametern aufrufen. Der erste gibt die zu bearbeitende Datei an, der zweite den Output. Dies könnte beispielsweise auch ein Fenster des X-Servers sein:

convert image.jpg X:

Hier findet natürlich keine Umwandlung sondern lediglich die Anzeige des Bildes statt.

2. Bild verkleinern und zuschneiden

Jetzt wollen wir das Bild image.jpg um 50% verkleinern. Auch das ist schnell gemacht:

convert image.jpg -resize 50% resized.jpg

Neu hier ist der Parameter -resize 50%. Statt 50% kann man auch eine fixe Größe eingeben. z.B. 200×200 (px).

Ein Bild zuzuschneiden funktioniert mithilfe der Option -crop. Dort gibt man zunächst an, welche Größe man ausschneiden möchte und anschließend, von welcher Stelle aus dies geschehen soll. Um dies zu verdeutlichen habe ich folgende Grafik erstellt, die euch das untenstehende Beispiel einmal verdeutlicht:

Im folgenden Beispiel schneiden wir ab der Position +10 nach rechts und +10 nach unten eine Fläche von 200×200 Pixel aus unserem Bild aus. Die Ausgabe erfolgt hier über den X-Server.

convert image.jpg -crop 200x200+10+10 +repage X:

Eine solche Aufgabe, wie die zuletzt vorgestellte, wird man vermutlich aber eher mit einem Grafikprogramm bewerkstelligen wollen, das einem auch direkt anzeigt, was man da ausschneidet. Hier lohnt sich der Einsatz von ImageMagick wirklich nur dann, wenn man mehr als eine gleichartige Bilddatei nach demselben Muster bearbeiten möchte. Genau das möchte ich auch im nächsten Beispiel vorstellen:

3. Massenbearbeitung von Bildern

Zunächst benötigen wir den Shell-Befehl, mit dem wir Dateien massenweise verarbeiten können. Dies geschieht innerhalb einer Schleife, in die wir anschließend unseren ImageMagick-Befehl einbetten, der dann für alle Dateien immer wieder durchlaufen wird, ohne dass wir noch weiter groß etwas tun müssen.

Shell-Befehl:

for file in *.jpg; do echo $file; done

Innerhalb der Schleife, die hier über alle jpg-Dateien innerhalb des Verzeichnissen läuft, geben wir mithilfe von echo den Dateinamen aus, der hier in der Variable $file gespeichert ist.
An dessen Stelle setzen wir nun den gewünschten ImageMagick-Befehl:

for file in *.jpg; do convert $file -resize 20% $file; done

4. Bilder zusammenfügen

Bilder lassen sich in ImageMagick sehr schnell und bequem entweder horizontal oder vertikal zusammenfügen.

Horizontal:

convert -append 01.jpg 02.jpg out.jpg

Vertikal:

convert +append 01.jpg 02.jpg out.jpg

5. Animationen erstellen

convert 001.jpg 002.jpg 003.jpg -delay 50 ani.gif

Die drei nummerierten Dateien werden hier zu einem animierten GIF zusammengefügt. Zwischen den einzelnen Bildern wird mittels delay noch ein zeitlicher Abstand eingeführt.

Fazit

Gerade weil es wirklich sehr einfach zu bedienen ist, wenn man sich einmal an die Funktionsweise gewöhnt hat, verwende ich ImageMagick für verschiedene Aufgaben immer wieder recht gerne. Man kann es auch recht schön in Skripte integrieren. Und da die meisten Webhoster auf Unix-Basis arbeiten, sollte ImageMagick dort ebenfalls funktionieren. Wie man ImageMagick speziell für den Webbereich einsetzen kann, werde ich evtl. später in einem extra Artikel vorstellen.

Caching verwenden

Viele Webseiten bestehen heute nicht mehr unbedingt aus statischen HTML-Seiten, sondern aus PHP-Skripten mit entsprechend mehr oder weniger vielen Datenbankabfragen, die dafür sorgen können, dass sich die Reaktionszeit verringert.
Hier setzt das System des Cachings an. Das ganze funktioniert nach folgendem Prinzip. Statt die PHP-Dateien mit den Datenbankabfragen auszuliefern, erstellt man im Vorfeld statische Dateien, die ausgeliefert werden. Nun wird sich der ein oder andere natürlich fragen, wie das ganze denn sinnvoll umzusetzen ist, wenn man interaktive Webseiten anbietet, bei denen sich Inhalte schnell und oft ändern. Darunter könnte man beispielsweise auch Blogs zählen. Für WordPress gibt es verschiedene Cache-Systeme (z.B. WP Super Cache), die sich genau darauf spezialisiert haben und diese Schwierigkeiten zu handhaben versuchen.
Ob man wirklich auf Caching setzt, muss man jedoch von Fall zu Fall abwägen.
Ich würde Caching nur einsetzen, wenn es wirklich um Seiten handelt, die sich nicht allzu oft verändern oder stark auf interaktive Funktionen setzen (z.B. Loginfunktionalität). Bei solchen würde man möglicherweise durch das Caching gar eher mehr verlieren als gewinnen.
Auf diesem Blog habe ich derzeit kein Caching-System im Einsatz. Werde ein solches aber evtl. demnächst einmal testen und dann die Erfahrungen in Form eines eigenen Posts beschreiben.

CSS optimieren

Verzicht auf @import

Bei der Einbindung von CSS gibt es mehrere Möglichkeiten. Recht bequem ist die Methode über @import, allerdings auch langsamer als die andere, da Stylesheets so nicht parallel geladen werden können. Besonders dann wenn man die @import in mehreren CSS-Dateien verschachtelt. Deshalb sollte man nach Möglichkeit einen Code der folgenden Art

<style type="text/css" media="screen">
@import url( style.css );
</style>

ersetzen durch

<link rel="stylesheet" href="style.css" type="text/css" media="screen">
</link>

Code säubern

Manchmal sammelt sich bei der Entwicklung doch mancher Müll innerhalb des Codes an, auf dem man in der finalen Version eigentlich verzichten könnte. Daher empfiehlt es sich vor der Anwendung der nächsten Schritte erst einmal selbst zu schauen, ob die eigenen CSS-Dateien auch alle sauber aufgebaut sind.
Einige Tipps für sauberes CSS findet ihr beispielsweise auf DrWeb.de. Das Thema ist vom Umfang her sicherlich auch nochmals für einige Blog-Artikel gut.

Minimieren

Bei der Entwicklung ist es übersichtlicher den Quellcode sauber zu strukturieren. Dadurch wächst natürlich auch die Dateigröße durch eigentlich unnötige Leerzeichen und Leerzeilen mit an. Das mag im ersten Moment gering und unbedeutend erscheinen, kann sich aber gerade bei großen Seiten doch stark auswirken. Wenn 1KB mehr geladen müssen und das bei 1000 Besuchern macht das allein schon 1MB mehr an Traffic aus. Hat man zudem noch eine Begrenzung des monatlichen Traffics kann es sich sehr wohl auszahlen hier einzusparen.
Natürlich wäre es absolut unnötige Arbeit per Hand alle unnötigen Zeichen zu entfernen. Am einfachsten ist es, wenn man Tools wie Minify oder den YUI Compressor verwendet.
Damit man dennoch auch später noch bequem weiterentwickeln kann, empfiehlt es sich sowohl die normale als auch die minimierte Variante beizubehalten und einfach nur die minimierte in die eigene Webseite einzubinden.

Ich habe mich mal für den YUI Compresser entschieden, da dieser aufgrund dessen, dass es sich um eine JAVA-Anwendung handelt, auch über die Kommandozeile angesprochen werden kann und so auch bequem in Shell-Skripte eingebunden werden kann.

Der YUI Compresser kann als ZIP-Archiv hier heruntergeladen werden.
Nach dem Entpacken ist dieser auch schon einsatzbereit. Nachdem man innerhalb des Terminals in das Verzeichnis gewechselt hat, indem die ausführbare Java-Datei liegt, kann man den Minimierer sowohl für CSS als auch für JavaScript-Dateien anwenden.
Hier mal ein entsprechendes Beispiel. Wie immer gilt: auch hier auf die Pfade achten, in denen sich die Dateien befinden.

java -jar yuicompressor-2.4.6.jar style.css -o style_min.css

Weitere Informationen dazu auch in der offiziellen Anleitung.

Kombinieren

Um die Zahl der Requests zwischen Client und Server zu verringern, empfiehlt es sich so wenig verschiedene Dateien wie möglich einzubinden.
Es macht also Sinn, die minimierten CSS-Dateien anschließend noch zu einer einzigen CSS-Datei oder auch zu Dateien zu kombinieren, wobei die erste nur den minimal notwendigen Code für eine saubere Seitenstrukturdarstellung enthält. Auch hier sollte man natürlich die Original-Dateien weiterhin behalten und daraus dann nach Änderungen jeweils neue minimierte und daraus die kombinierte CSS-Datei erstellen, die schließlich eingebunden wird.
Im folgenden eine Möglichkeit unter Einsatz eines kleinen Shell-Skripts verschiedene Dateien zu einer einzigen zusammenzufügen. Damit erspart man sich das lästige ineinander kopieren und kann diesen Prozess auch später schnell und bequem wiederholen:

#!bin/sh
 
WORKDIR="localhost/"
CSS_COMBINED_FILE=$WORKDIR"css/style_all.css"
 
# put css files together
cd $WORKDIR
touch $CSS_COMBINED_FILE
cat $WORKDIR"css/style.css" >> $CSS_COMBINED_FILE
cat $WORKDIR"css/style2.css" >> $CSS_COMBINED_FILE

Die Pfade und Dateinamen müssen in obigem Skript noch entsprechend der eigenen Bedürfnisse angepasst werden.

Javascript optimieren

Fast die gleichen Prinzipien, die für CSS gelten, lassen sich auch für JavaScript-Dateien ansetzen. Daher will ich die einzelnen Punkte hier etwas knapper abhandeln.

Aussortieren

Je länger ein Webprojekt existent ist, umso mehr Müll sammelt sich meiner Erfahrung nach im Code an. Daher ist es manchmal einfach sinnvoll, mal zu schauen, was man vielleicht gar nicht mehr benötigt oder für welche Aufgaben es vielleicht schon längst schlankere und besser ausgereifte Methoden gibt. Oder man ersetzt selbst geschriebene Skripte durch den Einsatz einer Bibliothek wie JQuery, was einem garantiert, dass dieses auf zahlreichen Plattformen flüssig läuft und vermutlich auch in vielerlei Hinsicht besser performt als selbst geschriebener Code.

Dateigröße minimieren

Auch hier gilt wie bei CSS: Dateien zusammenfügen und zu minimieren kann wertvolle Ladezeit sparen und zudem die Zahl der Requests senken.

An dieser Stelle nochmals als Beispiel der Einsatz des YUI Compressors für eine JavaScript-Datei mit folgendem Inhalt:

Vorher:

function test(){
    var a = "a" +
    "b" +
    "c";
}

Nachher:

function test(){var b="abc"};

Man sieht, dass man nicht nur bei Leerzeichen spart, sondern dass der Code auch in anderen Punkten optimiert wird (optimiert hier vor allem in Hinblick auf Ladezeit. Bei der Entwicklung legt man ja dahingehend bisweilen erst einmal andere Schwerpunkte).

Asynchron laden

Die Reihenfolge beim Laden der einzelnen Elemente spielt durchaus eine Rolle – vor allem bei der gefühlten – Schnelligkeit des Ladevorgangs. So sollte man Dinge, die für die Darstellung der Hauptkomponenten der Seite nicht direkt vonnöten sind, möglichst spät laden. Beispielsweise Google Analytics erst im Footer einbinden.
Google bietet zudem inzwischen auch die asynchron ladende Variante seines Analytics Code an. Ein solches Vorgehen hat den Vorteil, dass der Webbrowser nicht warten muss, bis das ganze Skript geladen ist, bevor er weitermachen kann, sondern dieses dann lädt, wenn entsprechende Ressourcen frei werden.

Auch wenn es unter HTML5 die Möglichkeit gibt, das script-Tag durch das Attribut async zu ergänzen

<script src="yourscript.js" async>
</script>

so schlägt Google folgende Vorgehensweise vor, da obige Variante nicht von allen Webbrowsern unterstützt wird.

<script>
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'yourscript.js';
</script>

Mehr zum Thema Asynchrones Javascript im Blog von Molily.

Externe Quellen nutzen

Wenn man beispielsweise Bibliotheken wie JQuery einsetzt, dann sollte man zunächst natürlich die minimierte Version einsetzen, zum zweiten kann es sich aber auch empfehlen, die Datei nicht auf dem eigenen Webserver zu lagern, sondern diese aus externen Quellen zu beziehen. So kann man diese beispielsweise direkt von JQuery oder auch von Google einbinden. Vorteil dabei ist, dass die Wahrscheinlichkeit hoch ist, dass die Bibliothek bereits schon auf anderen Seiten geladen wurde und so nicht mehr neu für die eigene Seite vom eigenen Server bezogen werden muss und diesen folglich auch nicht belastet.

Von Google beziehen:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

Von JQuery.com beziehen:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

Nachteil ist natürlich, dass man auf externe Server angewiesen ist. Sollten diese mal nicht verfügbar sein (was jedoch bei diesen beiden Kandidaten wohl unwahrscheinlicher sein dürfte als der Ausfall der eigenen Seite), guckt man natürlich in die Röhre.

HTML optimieren

Sauberes HTML

Auch für HTML gilt selbstverständlich die Regel, dass der Code so sauber wie möglich gehalten sein sollte. Wichtig ist hierbei inbesondere die klare Trennung von Seitenstruktur und den einzelnen Formatierungen, die man besser in eigenen CSS-Dateien vornimmt. Dieses Vorgehen sorgt für schlanken Code, der auch wesentlich leichter zu warten ist.
Und natürlich lässt sich auch bei HTML durch Einsparen von Leerzeichen, Tabulatoren oder Leerzeilen ein wenig etwas an Bytes einsparen.

Bilder optimieren

Viel an übertragenen KB lässt sich erfahrungsgemäß auch bei Bildern einsparen. Früher war dieses Thema sicherlich noch ein deutlich heikleres als heutzutage, aber ganz bedeutungslos ist es dennoch nicht.

Ist der Einsatz eines Bildes wirklich sinnvoll?

Manchmal lohnt es sich die Frage zu stellen, ob der Einsatz eines Bildes wirklich immer sinnvoll ist. Nein, damit meine ich jetzt nicht, das man völlig auf Bilder verzichten soll. Vielmehr geht es mir um kleine Grafiken, mit denen bestimmte Effekte erziehlt werden sollen, die heute vielleicht schon viel einfacher mittels CSS3 und HTML5 erreicht werden können. Abgerundete Ecken wurden früher beispielsweise mittels Tricks durch Grafiken erzeugt – heute würde ich auf ein solches Vorgehen komplett verzichten, selbst wenn man in alten Browsern damit vielleicht nicht die gewünschte Darstellung erreicht. Ein lohnendes Risiko – imho.

Skalieren

Wenn man Bilder an irgendeiner Stelle einbindet, sollte man auf jeden Fall das Bild auch in der Größe einzubinden, in der es wirklich benötigt wird und nicht einfach ein viel größeres Bild durch Angaben von width und height-Angaben zu verkleinern. Ansonsten produziert man einen großen Überschuss an unnötig geladenen KBs.

Dateigröße minimieren

Geschickte Komprimierungsverfahren sind heute in der Lage Bilddateien ohne sichtbaren Qualitätsverlust mit einer deutlich kleineren Dateigröße zu speichern. Auch hier ist es am Ende vor allem wieder die Menge, die den Unterschied macht.

Für PNG lässt sich beispielsweise das Tool OptiPNG einsetzen. Damit kann man auch GIFs in optimale PNGs umwandeln.
Nach dem Download muss das Tool nach dem Entpacken unter Unix (z.B. Ubuntu, aber auch Mac OS X) zunächst vom Quellcode kompiliert werden.

Dazu die Kommandos

./configure && make

ausführen. Wenn alles geklappt habt, sollte das Tool im entsprechenden Ordner, in den ihr die Dateien entpackt habt, danach einsatzbereit sein.
Dann könnt ihr das Tool in der Kommandozeile wie folgt benutzen:

./optipng /imagepath/filename.png -out /imagepath/outfilename.png

Dabei wird eine neue Datei erzeugt. Lässt man die Option -out weg, wird die Datei überschrieben.
Weitere Information zur Verwendung gibt es, wenn man im Terminal das Programm mittels der -help-Option aufruft:

./optipng --help

Wahl des richtigen Dateiformats

Die gängigen Bild-Dateiformate in der Websitegestaltung sind nach wie vor JPG, GIF und PNG. Formate wie BMP oder TIFF sollte man auf jeden Fall nicht verwenden.
JPG empfiehlt sich vor allem für Photos oder sonstige größere Bilder (CD-Cover, Filmplakate, etc.). Kleine Grafiken sind oftmals als PNG am besten aufgehoben. Alternativ auch als GIF, welches sich insbesondere für Animationen empfiehlt. Viele Animationen sind heute aber auch schon mittels CSS3 und HTML5 zu bewerkstelligen.

Sprites

… sind vor allem dann nützlich, wenn man bei Bildern mit dem Hover-Effekt arbeiten will und dabei nervige Verzögerungen beim Nachladen der zweiten Grafik vermeiden möchte.
Das Prinzip ist sehr einfach. Statt zwei extra Grafiken erstellt man eine einzige, die beide Bildvarianten enthält. Diese werden dann mittels der CSS-Eigenschaften background-position so positioniert, dass jeweils nur der interessante Teilbereich zu sehen ist. Ein Vorteil dieser Variante ist wiederum, dass auch nur eine Datei geladen werden muss und somit ein HTTP-Request entfällt.
Auch hier gilt es aber von Fall zu Fall abzuwägen, ob sich der Einsatz von Sprites wirklich lohnt. Es macht wenig Sinn möglichst viele Grafiken in einer zu vereinen, wenn davon jedoch auf der Seite nur ein paar wenige benötigt werden.

Pagespeed testen

Es empfiehlt sich die eigene Webseite einmal hinsichtlich der Ladezeit zu testen. Google bietet dazu einen Bewertungsservice an, bei dem es außerdem noch viele Tipps mit Erläuterungen gibt, wie man die Ladegeschwindigkeit seiner Seite verbessern kann:
http://pagespeed.googlelabs.com/