Ruby on Rails hingegen ist derzeit eines der populärsten und produktivsten OpenSource Frameworks, mit dem sich sehr schnell umfangreiche Webanwendungen erstellen lassen. Wer schon damit gearbeitet hat, weiß wieviel Spaß es machen kann.

Ruby selbst ist eine Scriptsprache, wie z.B. auch PHP eine Scriptsprache ist. Ruby wurde jedoch von Grund auf mit dem Ziel entwickelt, leicht verständlich zu sein und eine schnelle Entwicklung damit zu ermöglichen.

Ubuntu für Rails vorbereiten

Damit wir das Rails Framework unter Ubuntu 11.10 verwenden können, müssen wir zuerst Ruby installieren. Von Haus aus ist Ubuntu noch nicht mit Ruby ausgestattet, jedoch läßt sich dieses (und auch andere Programmiersprachen) sehr leicht nachträglich installieren.

Hierzu muss man wissen, dass es verschiedene Versionen von Ruby gibt. Ältere Versionen von Ruby on Rails haben hauptsächlich auf die Ruby Version 1.8.7 gesetzt. Die neusten Ruby on Rails Versionen ab 3.0 verwenden jedoch bevorzugt Ruby Version 1.9.2. Um unser System also für die Zukunft vorzubereiten, werden wir auf den Ruby Versions Manager (RVM) setzen, mit dem es möglich ist jede beliebige Ruby Version zu installieren und auch bequem zwischen diesen zu wechseln.

Damit wir RVM installieren können, müssen wir zuerst ein paar Abhängigkeiten installieren:

sudo apt-get install git
sudo apt-get install curl

Git benötigen wir, weil die meisten Ruby on Rails Projekte und Erweiterungen ihre Sourcen mit Git verwalten. Und curl brauchen wir, um mit dem folgenden Befehl RVM zu installieren:

bash < <(curl -s https://rvm.beginrescueend.com/install/rvm)

Nachdem dies ausgeführt wurde, bekommen wir noch ein paar Hinweise vom RVM Entwickler, wie wir damit umgehen können. Unter anderem wird auch noch darauf hingewiesen, dass folgende Abhängigkeiten installiert werden sollten, bevor man damit beginnen kann, ein oder mehrere Ruby Versionen zu installieren:

sudo apt-get install build-essential openssl libreadline6 libreadline6-dev curl git-core zlib1g zlib1g-dev libssl-dev libyaml-dev libsqlite3-0 libsqlite3-dev sqlite3 libxml2-dev libxslt-dev autoconf libc6-dev ncurses-dev automake libtool bison subversion

Nun sollte man das Terminal einmal schließen und wieder ein neues Terminal öffnen und mit folgenden Befehl überprüfen, ob RVM richtig installiert wurde:

type rvm | head -1

Wird hier jetzt 'rvm is a function' zurückgegeben, ist alles in Ordnung und wir können damit beginnen, unsere benötigte Ruby Version zu installieren.

Ruby 1.9.2 auf Ubuntu installieren

Abhängig davon, welche Ruby on Rails Version wir nutzen wollen, können wir nun die entsprechende Ruby Version installieren. Dies ist mit dem RVM Befehlt mehr als einfach. Gehen wir davon aus, dass wir Ruby on Rails 3.1 (also die aktuelle Version) installieren wollen, können wir so Ruby 1.9.2 installieren:

rvm install 1.9.2

Nach ein paar Minuten ist dann Ruby installieret. Beachten sollte man hierbei jedoch unbedingt, dass alles was man mit RVM macht ohne den sudo Befehlt ausgefürt werden muss! Warum dies so ist und weitere wichtige Nutzungshinweise erhaltet ihr in der RVM Dokumentation.

Um nun die installierte Ruby Version nutzen zu können, muss man sie mit dem folgenden Befehl aktivieren:

rvm use 1.9.2

Jetzt kann man überprüfen, welche Ruby Version installiert ist:

ruby -v

Ruby on Rails auf Ubuntu installieren

Nachdem nun alle notwendigen Vorbereitungen abgeschlossen sind, können wir damit beginnen die aktuelle Rails Version zu installieren. Rails und andere benötigte Packete werden mit dem RubyGems Package Manager installiert. Dieser wurde zum Glück auch schon automatisch von RVM mit installiert. Wir brauchen also nur noch folgendes auszuführen:

gem install rails

und schon wurde Ruby on Rails erfolgreich installiert. Auch hier ist wieder zu beachten, dass alle RubyGems ohne den sudo Befehl installiert werden.

JavaScript Runtime installieren

In der aktuellen Rails Version 3.1.1 gibt es noch eine weitere Abhängigkeit, welche man beachten muss. Rails benötigt hier nämlich eine im System installierte JavaScript Runtime um bestimmte Funktionen ausführen zu können. Am einfachsten und problemlosesten konnte ich dieses Problem bei mir beheben, indem ich Node.js installiert habe:

sudo apt-get install nodejs

Ruby on Rails testen

Jetzt wo alles installiert ist, können wir schnell noch ein Testprojekt mit Rails erstellen:

rails new test_app
cd test_app
rails server

und uns dies im Browser aufrufen:

http://localhost:3000

Fertig ist unsere Ruby on Rails installation auf Ubuntu.

Die hier genannten Installationsschritte mögen sich mit denen auf anderen Ubuntu Versionen oder anderen Linux System unterscheiden.

• IE 6 für Mac OS X
• Google Sitemaps mit Ruby on Rails erstellen
• Firefox 1.5 Beta Review
• Firefox Download Day
• Ein rabenschwarzer Tag

Auf genau diese Weise ist auch dieses Bookmarklet entstanden. Es wandelt einfach alle per IMG HTML-Tag eingebundene Bilder einer Seite in Bilder mit niedlichen kleinen Katzen um. Um zu sehen, was es macht, einfach den folgenden Link in die Bookmark-Leiste eures Browsers ziehen und auf einer beliebigen Seite mit Bildern ausprobieren!

Wer es gleich hier auf dieser Seite testen möchte, kann auch einfach nur den Link anklicken.

Hier sind ein paar zufällige Bilder zum Testen.

Wer wissen möchte, wie das Kittyfier Bookmarklet funktioniert, kann sich den kompletten Code hier ansehen. Eigentlich nichts besonderes:

var images = document.images;
var icount = 0;
for(var i = 0; i < images.length; i++) {
var img = images.item(i);
if (img.width > 20 && img.height > 20) {
img.src = "http://placekitten.com/"+img.width+"/"+img.height+"?image="+icount;
icount++;if(icount > 16){icount=0;}
}
}

Wie man sehen kann, verwende ich den Placekitten Service, welcher es einem erlaubt durch Angabe von Höhe und Breite beliebig große Katzenbilder zu generieren um diese als Platzhalter in die eigenen Entwürfe einzubauen. Dies ist vor allem dann praktisch, wenn man nur mal schnell ein HTML Layout testen möchte, aber noch keine passenden Bilder hat.

Ich hoffe ihr habt Spaß an diesem kleinen Script und ich freue mich über eure Kommentare.

• CSS Button Tricks
• Schatten mit CSS Pseudo-Elementen hinzufügen
• Mein Flickr Foto Stream
• Hierarchische Menüs mit CSS erstellen
• Die Sprache eines Links kennzeichnen

That thing became a little famous and was shown on many other websites as an example to what can be done with CSS3 and a modern browser.

Now, a year later, I updated this script so it works now in many other modern browsers such as Firefox, Chrome, Opera and Internet Explorer.

Just browse to the example page and see it for yourself.

And if you have an older browser you can watch this little screen capture:

I hope you like it and I am eager to see what you can come up with using those CSS3 transitions and transforms.

• CSS 3: Rotating Image Gallery
• Opera Browser kostenlos freischalten
• Browser Statistiken
• Opera ist nun kostenlos!
• Google Chrome Frame – Ein Plugin für den Internet Explorer

JSFIDDLE - JavaScript direkt im Browser entwickeln

Dieses Tool ist noch relativ jung, hat sich aber für mich bereits jetzt zu einem der wichtigsten Tools beim Entwickeln und Testen von JavaScript Scripten entwickelt. Das Besondere an JSFIDDLE ist, dass man vier verschiedene Felder zur Verfügung gestellt bekommt. Im Ersten schreibt man seinen HTML Code, im Zweiten den benötigten CSS Code und im Dritten schließlich das JavaScript.

Wenn man möchte lassen sich externe JavaScript Bibliotheken wie Prototype, jQuery, Mootools und viele weitere per Klick einbinden.

Ein Klick auf 'Run' und das fertige Script wird ausgeführt und das Ergebnis im vierten Feld angezeigt. Diese so geschriebenen Scripte können gespeichert werden und sind über eine feste URL jederzeit wieder aufrufbar. Bei jedem Speichern bleibt übrigens die vorherige Version erhalten und kann über die alte URL aufgerufen werden.

Die mit JSFIDDLE erstellten Scripte lassen sich übrigens über eine 'Share' Funktion in jede beliebige Seite einbinden. Das könnte dann z.B. wie folgt aussehen:

Wie ich finde ein wirklich geniales und nützliches Tool.

http://jsfiddle.net

JavaScript Obfuscator - Den Code unkenntlich machen

Ein Problem mit dem man bei der Entwicklung von JavaScript leben muss ist, dass sich der Code jederzeit im Browser betrachten lässt. Häufig stecken in dem Code jedoch viele Stunden Arbeit und geistige Schaffenskraft, wo man natürlich nicht möchte, dass sich jeder gleich an der eigenen Arbeit bedienen kann, indem er den Code einfach kopiert.

Hier springt der Free Javascript Obfuscator in die Presche, denn mit diesem Tool lässt sich der Code auf einfache Weise unleserlich machen, indem es den Code unkenntlich macht und es so fast unmöglich wird, den so bearbeiteten Code zu analysieren. Dabei bleibt das Script natürlich weiterhin funktionsfähig.

http://javascriptobfuscator.com/

Packer - Große Scripte verkleinern und Bandbreite sparen

Wer komplette JavaScript Bibliotheken wie Prototype kennt der weiß, dass diese schon mal ziemlich groß werden können. Doch im Web kommt es oft auf schnelle Ladezeiten und damit auf geringe Dateigrößen an. Jedes Kilobyte kann dabei entscheidend sein. Und genau hier kommt Packer von Dean Edwards in Spiel.

Mit diesem Tool lassen sich große Script schnell auf kleinere Größen schrumpfen, indem überflüssige Zeichen entfernt und Variablennamen gegen Kürzere ausgetauscht werden. Außerdem lässt sich alles noch per Base62 kodieren, was den so entstandenen Code gleichzeitig unleserlich macht.

http://dean.edwards.name/packer/

Bananascript - Effizientes JavaScript Koprimierungstool

Wem Packer noch nicht ausreicht, oder wer damit Probleme hat - Packer benötigt 100% richtig geschriebenen Code - der sollte sich zusätzlich auch Bananascript ansehen. Dieses Komprimierungstool verspricht noch bessere Kompressionsraten und funktioniert auch mit Bibliotheken wie Prototype.

Einfach die entsprechende JavaScript Datei auswählen, hochladen und schon bekommt man die komprimierte Version zum Download angeboten. Die Komprimierung tendiert dabei meistens bei 73%, kann aber auch mal 99% erreichen, wenn man den Statistiken von Bananascript trauen darf.

http://www.bananascript.com/

JSBeautifier - JavaScript Code verschönern

Als letztes Tool möchte ich euch den JavaScript Beautifier vorstellen. Mit diesem Tool lassen sich gleich zwei Fliegen mit einer Klappe schlagen. Zum einen kann man damit den eigenen JavaScript Code verschönern lassen, indem dieser richtig eingerückt und umgebrochen wird. Bei JavaScript ist es eigentlich egal, ob das komplette Script in einer Zeile geschrieben wird, aber es lässt sich nun mal viel besser lesen, wenn es ordentlich eingerückt und über mehrere Zeilen geschrieben wird.

Aber der JSBeautifier bietet noch mehr, denn damit lassen sich außerdem z.B. mit Packer oder JavaScript Obfuscator gepackte und unkenntlich gemachte Scripte wieder lesbar machen. Zwar lassen sich Variablennamen nicht immer wieder herstellen, aber der verschönerte und entpackte Code lässt sich auf jeden Fall wieder besser lesen und analysieren. (Aber pssst nicht weitersagen!!!!)

http://jsbeautifier.org/

Fazit

Wie ihr sehen könnt, gibt es einige Tools, die einem die Arbeit mit JavaScript erleichtern können. Viele von den oben genannten verwende ich selbst auch regelmäßig und möchte sie heute nicht mehr missen. Ich hoffe auch für euch war etwas Interessantes dabei, aber vielleicht kennt ihr ja selbst auch noch ein paar nützliche Tools. Wenn ja, dann berichtet doch einfach in den Kommentaren davon.

• FireBug 0.4 – Der ultimative Web Debugger
• Sortiertbare Listen mit Javascript per Drag and Drop
• Wirklich einfache JavaScript Tooltips
• Unsicher Objekte unter SSL in IE
• Kittyfier Bookmarklet – Süße Kätzchen überall

Leider führte dies auch dazu, dass das alte Tooltip Script nun leider nicht mehr in allen wichtigen Browsern funktioniert. Aber auch in den Browsern, wo es funktionierte, ist es unter Umständen zu Fehlern gekommen.

Dies will ich nun zum Anlass nehmen und euch ein komplett neues Tooltip Script zur Verfügung stellen.

XBT - Der Cross-Browser Tooltip

Okay, über Namen lässt sich bestimmt streiten, aber irgendwie muss das Kind ja heißen. Das neue Script basiert auf ein paar Zeilen JavaScript und ist nur geringfügig größer als das alte Script. Dafür ist es jedoch viel flexibler zu konfigurieren, kollidiert nicht mit anderen Scripten und lässt sich leicht über CSS beliebig anpassen. Und wer möchte, kann das Script auch ohne Probleme um neue Funktionen erweitern.

Hier könnt ihr den Code sehen:

<script type="text/javascript">
  (function(window, document, undefined){
    var XBTooltip = function( element, userConf, tooltip) {
      var config = {
        id: userConf.id|| undefined,
        className: userConf.className || undefined,
        x: userConf.x || 20,
        y: userConf.y || 20,
        text: userConf.text || undefined
      };
      var over = function(event) {
        tooltip.style.display = "block";
      },
      out = function(event) {
        tooltip.style.display = "none";
      },
      move = function(event) {
        event = event ? event : window.event;
        if ( event.pageX == null && event.clientX != null ) {
          var doc = document.documentElement, body = document.body;
          event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
          event.pageY = event.clientY + (doc && doc.scrollTop  || body && body.scrollTop  || 0) - (doc && doc.clientTop  || body && body.clientTop  || 0);
        }
        tooltip.style.top = (event.pageY+config.y) + "px";
        tooltip.style.left = (event.pageX+config.x) + "px";
      }
      if (tooltip === undefined && config.id) {
        tooltip = document.getElementById(config.id);
        if (tooltip) tooltip = tooltip.parentNode.removeChild(tooltip)
      }
      if (tooltip === undefined && config.text) {
        tooltip = document.createElement("div");
        if (config.id) tooltip.id= config.id;
        tooltip.innerHTML = config.text;
      }
      if (config.className) tooltip.className = config.className;
      tooltip = document.body.appendChild(tooltip);
      tooltip.style.position = "absolute";
      element.onmouseover = over;
      element.onmouseout = out;
      element.onmousemove = move;
      over();
    };
    window.XBTooltip = window.XBT = XBTooltip;
  })(this, this.document);
  </script>

Das einzig wirklich benötigte CSS für den Tooltip sieht so aus:

 
<style type="text/css" media="screen">
    .xbtooltip {
      display: none;
      position: absolute;
      background-color: #fff;
    }
</style>
 

Dieser kann aber für jeden einzelnen Tooltip noch einmal separat überschrieben werden. Doch dazu später mehr.

Tooltip Beispiele

Kommen wir also zu ein paar einfachen Beispielen, wie man das XBT Tooltip Script einsetzen kann.

Einfacher Tooltip

Der einfachste mögliche Tooltip benötigt einen Link und ein DIV Element mit dem anzuzeigenden Inhalt für den Tooltip.

<a href="http://webmatze.de" onmouseover="XBT(this, {id:'tt1'})">Ein normaler Tooltip...</a>
<div id="tt1" class="xbtooltip">
    ...mit bereits vorhandenem Inhalt.
</div>
 

Dem Tooltip Script wird also über eine Konfiguration welche in geschweiften Klammern steht, die id des Elementes übergeben, welches den Inhalt für den Tooltip enthält. Mehr ist hier nicht notwendig.

Das entsprechende CSS dazu kann z.B. so aussehen:

#tt1 {
      background-color: #00FFFF;
      color: green;
      padding: 3px;
      width: 120px;
    }
 

Und so sieht dann der Link mit dem Tooltip aus:

Ein normaler Tooltip...

Inhalt als Konfiguration übergeben

Wer nicht extra für jeden Tooltip ein extra DIV Element erstellen möchte, kann den gewünschten Inhalt für den Tooltip auch gleich als text übergeben. Das kann dann z.B. so aussehen:

<a href="http://webmatze.de"
    onmouseover="XBT(this, {text: '...indem man ihn &lt;strong&gt;als Text&lt;/strong&gt; übergibt', className: 'xbtooltip'})">
Man kann den Inhalt des Tooltips auch dynamisch erstellen lassen...
</a>

Als Konfiguration wird also nicht mehr eine id übergeben, sondern ein beliebiger Text, der auch HTML Elemente enthalten kann. Über den Parameter className kann man dem Tooltip dann einen beliebigen Style zuordnen.

Und so sieht das Ganze dann aus:

Man kann den Inhalt des Tooltips auch dynamisch erstellen lassen...

Den Abstand des Tooltips anpassen

Wenn man möchte, dass der Tooltip nicht direkt neben dem Mauszeiger, sondern weiter entfernt angezeigt wird, kann man dies über die Konfiguration anpassen. Dazu gibt es die beiden Parameter x und y.

<a href="http://webmatze.de" onmouseover="XBT(this, {id: 'tt4', x: 50, y: 50})">Man kann den Abstand des Tooltips anpassen...</a>
<div id="tt4" class="xbtooltip">
...indem man eine Konfiguration übergibt.
</div>
 

Somit wird der Tooltip nun jeweils 50 Pixel nach rechts und unten verschoben angezeigt.

Man kann den Abstand des Tooltips anpassen...

Funktioniert nicht nur bei Links

Natürlich kann man den Tooltip auch an andere HTML Elemente hängen. Es muss nicht immer ein Link sein.

 
<div style="position: relative; top: 0px; left: 150px; width: 100px; height: 100px; background-color: #e4e4e4;" onmouseover="XBT(this, {id:'tt2'})">
    Das funktioniert auch mit DIVs statt mit Links...
<div id="tt2" class="xbtooltip">
      ...soweit der Browser onmouseover auf DIV Elementen unterstützt!
    </div>
</div>
 

Dies würde dann so aussehen:

In absolut positionierten Elementen funktioniert es auch

Mit dem alten Tooltip Script gab es immer Probleme mit Tooltips, die sich in anderen absolut prositionierten Elementen befanden. Hier wurden die Tooltips immer an einer falschen Position angezeigt.

Mit dem neuen Script ist dies nun auch kein Problem mehr:

 
<div style="position: absolute; top: 0px; left: 300px ;width: 100px; height: 100px; background-color: #e4e4e4;">
    <a href="http://eventicus.de" onmouseover="XBT(this, {id:'tt3'})">Genauso auch mit Tooltips...</a>
<div id="tt3" class="xbtooltip">
      ...die sich in absolut positionierten Elementen befinden.
    </div>
</div>
 

Und so sieht's dann aus:

Fazit

Ich hoffe ihr könnt mit diesem neuen Script etwas anfangen und wünsche euch viel Spaß damit. Sollten euch doch noch Probleme auffallen, oder sollte es in einem Browser nicht richtig funktionieren, so könnt ihr mir dies wie immer in den Kommentaren mitteilen.

Ich denke auch das neue Script ist immer noch sehr kompakt und einfach zu verwenden. Vielleicht werde ich in Zukunft noch ein paar Funktionen nachrüsten, sofern ihr noch Wünsche habt, die unbedingt enthalten sein sollten.

• Wirklich einfache JavaScript Tooltips
• Die Sprache eines Links kennzeichnen
• Schatten mit CSS Pseudo-Elementen hinzufügen
• Die Desktop-Farben nutzen
• Der kleine Pfeil mal anders

In diesem Review stell ich die neue LED Taschenlampe M7 von LED LENSER vor. Dabei handelt es sich um eine Microcontroller gesteuerte Taschenlampe mit drei unterschiedlichen Lichtprogrammen (Professional, Easy, Defence) mit jeweils bis zu 6 verschiedenen Lichtfunktionen (Boost, Power, Low Power, Dim, S.O.S, Defence Strobe) - alles über einen einzigen Tastschalter gesteuert.

Lang ist es her seit meinem letzten Post hier auf webmatze.de. Obwohl einige Beiträge in Planung sind und auch schon halb fertig vor mir liegen, fehlte mir zuletzt leider die Zeit. Aber wir haben ja auch gerade Sommer und da geht man lieber raus und unternimmt etwas in der Natur.

Das ist auch ein Stichwort für diesen neuen Beitrag, denn vor einigen Tagen habe ich eine Kanutour durch die Mecklenburger Seenplatte unternommen und mit dabei hatte ich eine Taschenlampe, welche ich euch heute gerne einmal vorstellen möchte.

Die neue LED LENSER M7 - eine innovative LED Taschenlampe

Auf dieser Kanutour sind wir nicht nur am Tage, sondern auch mitten in der Nacht auf den Seen unterwegs gewesen und jeder kann sich vorstellen, dass es dann so gut wie kein Licht gibt, an dem man sich orientieren kann. Besonders wenn man eine passende Anlegestelle am Ufer finden möchte, dann braucht man eine gute und helle Taschenlampe. Und genau hier kam die M7 von LED LENSER zum Einsatz und hat sich wirklich außerordentlich gut bewährt.

Die M7 ist nicht nur eine besonders helle Taschenlampe, mit ihren 220 Lumen kann man die Nacht fast zum Tage machen, sie enthält sogar mehrere über einen Microcontroller gesteuerte Lichtprogramme, die sich in den verschiedensten Situationen als besonders hilfreich erweisen können.

Wie die Taschenlampe aussieht und was man damit alles machen kann, habe ich mal versucht in dem folgenden Video genauer zu zeigen. Das eigentliche Reviewvideo ist über 30 Minuten lang geworden, so dass ich es doch noch stark kürzen musste. Aber ich denke die Wichtigsten Informationen sind enthalten. Ich sollte mir für das nächste Mal doch vornehmen, etwas schneller zu sprechen. ;o)

LED LENSER M7 Trigami Review from Mathias Karstädt on Vimeo.

Wir ihr sehen konntet, ist die M7 eine wirklich interessante Taschenlampe mit einer unglaublichen Lichtleistung. Sie wird auch in Zukunft bestimmt mein täglicher Begleiter sein. Neben der M7 wurde mir von LED LENSER auch noch die kleinere P2 zur Verfügung gestellt. Diese werde ich euch demnächst noch in einem weiteren Video vorstellen. Sie passt problemlos z.B. an ein Schlüsselbund, ist aber fast so hell wie die M7. Da können die meisten anderen Taschenlampen nicht mithalten.

Ich freue mich über eure Kommentare und Anregungen. Gefallen euch solche Video Reviews, oder sollte ich es lieber sein lassen? Und ja ich weiß, Tagesschausprecher werde ich sicherlich nicht werden. :o)

Wenn ihr mehr über die LED LENSER M7 erfahren wollt, dann könnt ihr dies direkt auf den Seiten von LED LENSER machen.

Jetzt zum Produkt

• LED Lenser Taschenlampe von Zweibrüder – Review
• LED LENSER M7R – Neuer Testbericht
• RubyOnRails – Framework auf Schienen
• Meine Top Einnahmequellen als Blogger
• Das Dilemma

Was sind URL Shortener?

Der Sinn und Zweck dieser Angebote ist es schlicht und einfach, eine lange URL - die so nicht oder kaum in das 140 Zeichen Limit von Twitter passen würde - in eine sehr kurze Form umzuwandeln. So kann man z.B. mit dem URL Shortener Urgestein tinyurl.com folgende zugegebenermaßen lange URL http://webmatze.de/wie-manche-url-shortener-daran-scheitern-urls-zu-kurzen/ in diese kurze URL http://tinyurl.com/yep6crr umwandeln. So wurden in diesem Fall 49 der ehemals 75 Zeichen eingespart werden, was einer Ersparnis von über 65% entspricht. Diese neue kürzere URL lässt sich nun auch problemlos in einem Tweet auf Twitter verwenden.

Es geht noch kürzer

Eine Ersparnis von 65% hört sich natürlich sehr gut an und viele neuere URL Shortener würden hier sogar noch mehr Zeichen einsparen können. Da die Beschränkung auf 140 Zeichen bei Twitter nicht viel Spielraum für Inhalt und Links auf andere Seiten lässt, sind viele neuere URL-Kürzer dazu übergegangen auch schon bei der eigenen URL Zeichen einzusparen. So besteht die URL von http://bit.ly/ selbst nur noch aus 14 Zeichen. Das sind immerhin 5 Zeichen weniger als bei http://tinyurl.com/. Und andere Anbieter wie http://ow.ly/ oder http://tr.im/ können hier sogar noch 1 weiteres Zeichen weniger vorweisen.

Woran viele URL Shortener scheitern

Aber bei meinen Recherchen zu den verschiedenen URL Shortener Services ist mir bei allen ein kleines Problem aufgefallen. Sie alle scheitern daran bereits kurze URLs noch weiter zu kürzen. Das mag komisch oder auch sinnlos klingen, aber wenn man den URL Shortenern eine kurze URL wie http://sl.im/ übergibt - hierbei handelt es sich selbst auch um einen URL Shortener - dann bekommt man statt einer noch kürzeren URL eine viel längere heraus!

So gibt mir tinyurl.com hier http://tinyurl.com/ya67oww zurück. Das sind ganze 13 Zeichen mehr als die original URL und somit doppelt so groß! Auch bit.ly verlängert diese URL immerhin auf 19 Zeichen: http://bit.ly/lQUoh. Und ich könnt immer so weiter machen. http://tr.im/ACGS, http://is.gd/3WriH oder http://ow.ly/sCb3 sind alle deutlich länger als das Original!

Hallo? Das sind doch keine URL Shortener, sondern URL Longener! Aber Spaß beiseite. Ich denke die Entwickler dieser Services sollten in solchen Fällen einfach die Original URL zurückgeben. Wo es nichts zu kürzen gibt, muss auch nicht weiter gekürzt werden. Aber abgesehen von diesem kleinem Problem, funktionieren die meisten URL Shortener wirklich super und bieten teilweise weitere Funktionen wie Statistiken zu den einzelnen gekürzten URLs an. Dadurch lässt sich sehr gut nachvollziehen, wie oft, wann und von von wo eine URL aufgerufen wurde. Dieses Feature hat sich für mich auf jeden Fall als sehr praktisch erwiesen.

Vielleicht kann ich deshalb auch ab und zu mit einer im Endeffekt längeren URL leben.

• Meta-Description: Wie wichtig ist sie wirklich?
• Eigene Fehlerseiten erstellen
• Was ist robots.txt?
• Helft mit das Forum zu retten
• 5 extrem nützliche Tools für JavaScript Entwickler

Fall eines Browsers

Noch vor wenigen Jahren galt der Internet Explorer als einer der fortschrittlichsten und besten Browser auf diesem Planeten. Damals schimpften alle noch auf den Netscape Navigator und dessen Unfähigkeit, die Webseiten so darzustellen, wie es der Internet Explorer auf unnachahmliche Weise schaffte. Doch diese Stellung in den Köpfen der Menschen hat er sehr schnell verspielt und in das komplette Gegenteil gekehrt.

Der Internet Explorer hat die Zeichen der Zeit nicht erkannt und es verschlafen, die wichtigsten aktuellen Web-Standards umzusetzen. Heute kämpfen Browser wie Firefox, Safari oder Google Chrome um die Krone am Browserhimmel und der Internet Explorer kämpft immer noch damit, die Standards von Vorgestern richtig umzusetzen. Er hinkt nicht nur einen Schritt hinterher, sondern Kilometer!

Leider wird der Internet Explorer durch die geballte Marktmacht von Microsoft und deren Betriebssystem Windows immer noch von sehr vielen Nutzern verwendet, auch wenn hier die anderen Browser schon sehr stark aufholen konnten.

Aber sehen wir der Realität ins Auge, wir - die Web-Entwickler - werden auch in Zukunft nicht um den Internet Explorer herumkommen.

Der Knackpunkt

Mit dieser unumstößlichen Wahrheit sahen sich auch die Entwickler von Google's neustem Projekt Google Wave konfrontiert. Google Wave befindet sich momentan noch in der Entwicklungsphase und wird in den nächsten Wochen der breiten Öffentlichkeit vorgestellt werden. Wie die Google Wave Hompage verrät, soll es sich dabei um eine Plattform zur Kommunikation und Zusammenarbeit im Web handeln. Echtzeit (Real-time) ist hier das vorherrschende Thema und um diese zu erreichen, setzt Google bei der Entwicklung auch auf die neusten Web-Technologien und -Standards. Und gerade hier befindet sich der Knackpunkt.

Wenn Google mit Google Wave erfolgreich werden möchte, dann muss Google Wave auch im Internet Explorer richtig funktionieren. Nachdem die Entwickler sich aber vergebens daran versucht haben, die gewünschten Funktionen im Internet Explorer zum Laufen zu bekommen, haben sie nun einen komplett neuen Weg eingeschlagen. Und hier wird es jetzt richtig spannend!

Sie haben sich einfach folgende Frage gestellt: "Wenn der Internet Explorer uns nicht die Möglichkeiten bietet, um unsere Vorstellungen umzusetzen, was können wir dann statt dessen tun?"

Und die Antwort darauf ist so einfach wie genial ausgefallen: "Wir bringen dem Internet Explorer einfach die Web-Standards selber bei!" Dabei herausgekommen ist ein neues Projekt: Google Chrome Frame.

Was ist Google Chrome Frame?

Bei Google Chrome Frame handelt es sich um ein Open Source Browser Plugin für den Internet Explorer in den Versionen 6, 7 und 8. Einmal im Internet Explorer installiert, bringt das Google Chrome Frame Plugin dem hinkenden Browser die neusten Web-Technologien bei, inklusive der schnellen Google Chrome JavaScript Engine. Um es kurz zu sagen - aus dem Internet Explorer wird so auf einfache Weise ein vollwertiger Browser.

Doch damit der so gepimpte Internet Explorer die aufgerufenen Webseiten auch über das neue Plugin darstellen kann, müssen diese ein neues Meta Tag einbinden. Mit folgender Zeile ist dies jedoch schnell erledigt:

<meta http-equiv="X-UA-Compatible" content="chrome=1">

Fehlt dieses Tag, wird die Seite weiterhin auf die gute alte Art und Weise vom Internet Explorer zerhackt und durcheinander gewürfelt werden. ;o)

Wenn man nun als Web-Entwickler eine neue Seite erstellt und sicher ist, dass diese im Google Chrome Browser richtig angezeigt wird, dann kann man den Internet Explorer nun auch dazu bringen, die Seite exakt genauso darzustellen. Allerdings ist man dabei darauf angewiesen, dass der Nutzer schon das Google Chrome Frame Plugin installiert hat. Doch auch hierzu haben sich die Entwickler bei Google Gedanken gemacht. Mit einem kleinen Script kann man den Nutzer beim Aufruf der Seite dazu bringen, das neue Plugin zu installieren.

Eine schöne neue Welt?

Jetzt wäre eigentlich der Punkt gekommen, wo wir alle aufspringen müssten um zu jubeln. Endlich stellt der Internet Explorer unsere Seiten so dar wie wir es wollen. Vergangen sind die Zeiten, wo wir unsere Vorstellungen mühsam auch auf diesem Browser zum Leben erwecken mussten. Aber wird es wirklich so kommen? Gehören diese ganzen Probleme nun wirklich der Vergangenheit an?

Dazu gibt es noch einige Hürden zu nehmen. Als erstes müssen wir natürlich in alle unsere Seiten das oben beschriebene Tag einbinden. Und um die Internet Explorer Nutzer dazu zu bringen, dass Plugin zu installieren, zusätzlich auch noch ein Script. Das bedeutet natürlich mehr HTML Code auf unseren Seiten. Code, der eigentlich nicht notwendig wäre.

Dann steht da noch die Frage, ob Microsoft es sich gefallen lassen wird, wenn Google so den Internet Explorer kanibalisiert. Das wäre ja gerade so, als wenn Apple ein Mac OS X Plugin für Windows anbieten würde. Microsoft hat auf jeden Fall die Möglichkeiten, um Google einen Strich durch die Rechnung zu machen, indem es das Google Chrome Frame Plugin einfach ausschließt.

Aber wie immer wird auch in diesem Fall erst die Zukunft zeigen, ob wirklich eine neue Zeitrechnung für uns als Web-Entwickler angebrochen ist.

Was haltet Ihr von Google's neustem Coup? Werdet Ihr das neue Meta Tag in eure eigenen Seiten einbinden? Ich freue mich auf eure Kommentare.

• Google Chrome – Der neue Browser
• A small update to my CSS3 Rotating Image Gallery
• Mozilla überzeugt mich
• Unsicher Objekte unter SSL in IE
• IE 6 für Mac OS X

Doch wie genau funktioniert das? Und welche Tools brauche ich dafür? Genau diesen Fragen möchte ich in diesem und in kommenden Artikeln auf den Grund gehen.

Was brauche ich für meine eigene Webseite?

Um zu starten braucht es eigentlich nicht viel. Die wenigen Dinge, die man wirklich benötigt, habe ich hier mal in einer Liste näher beschrieben.

• Etwas Zeit
  Eine gute Homepage lässt sich nicht einfach in wenigen Minuten erstellen, darum sollte man sich auch die entsprechende Zeit nehmen.
• Einen Plan
  Man kann keine eigene Webseite erstellen, ohne vorher zu wissen, welches Ziel man eigentlich mit dieser Seite verfolgen will. Möchte man ein Tagebuch schreiben? Will man Informationen zu einem bestimmten Thema zusammentragen und aufbereiten? Will man sich selbst und die eigenen Projekte vorstellen? Oder möchte man eine Plattform für sich und seine Freunde schaffen? Die Möglichkeiten sind grenzenlos, aber man sollte zumindest grob das Thema der Webseite festlegen.
• Kenntnisse im Umgang mit HTML, CSS und JavaScript
  Man kann keine Homepage erstellen, ohne nicht zumindest die grundlegendsten Bausteine einer Webseite zu kennen. Mit HTML legt man die Struktur und den Inhalt einer Webseite fest. Mit CSS kann man das Aussehen der einzelnen Elemente einer Webseite kontrollieren und mit JavaScript kann man die Funktionalität der eigenen Seite erweitern. Aber erst die Kombination aus allen Zutaten ergibt eine gute Webseite.
• Eine eigene Internetadresse
  Ohne eine eigene Domain kann niemand auf die liebevoll erstellten Inhalte zugreifen. Der Domainname ist die Adresse einer Seite im Internet. Daher sollte man sich einen sprechenden Namen für die eigene Homepage ausdenken. Ob nun www.willies-kochrezepte.de oder www.webmatze.de - solange der Name noch nicht vergeben ist, kann man fast jeden Domainnamen registrieren lassen.
• Webspeicherplatz
  Damit man die erstellen HTML Seiten auch für Jeden zugänglich im Internet ablegen kann, benötigt man etwas Speicherplatz. Diesen Webspeicherplatz oder auch Webspace genannt, wird man sich meistens bei professionellen Webhostern anmieten. Die Kosten dafür sind überwiegend sehr niedrig. Es ist auch möglich, eigene Webserver zu verwenden, doch für eine kleine Homepage reicht meistens weniger aus.

Das waren auch schon die wichtigsten Zutaten für die eigene Homepage. Wie man sehen kann, braucht es nicht wirklich viel, um eine eigenen Webseite zu erstellen. Doch für jemanden, der bisher noch nie eine Homepage erstellt hat, können einige der Punkte trotzdem eine Hürde darstellen.

Schritt für Schritt zur eigenen Webseite

Gerade für diese Anfänger - und dass meine ich nicht abwertend, denn jeder hat einmal an diesem Punkt begonnen - werde ich in den nächsten Tagen und Wochen in verschiedenen Beiträgen auf die einzelnen oben angesprochenen Punkte näher eingehen. Am Ende wird dann jeder eine Schritt für Schritt Anleitung für die erste eigene Homepage zur freien Verfügung haben.

Auf folgende Punkte werde ich dabei detaillierter eingeben:

• Wie man das richtige Thema für die eigene Homepage wählt
• HTML, CSS und JavaScript - Das Grundgerüst einer Webseite beherrschen
• So findet man den passenden Domainnamen für die eigene Webseite
• Wie wähle ich den richtigen Webhoster für meine Homepage aus?
• Wie bekomme ich mehr Besucher für meine eigenen Webseite?

Ich freue mich schon darauf und hoffe, dass der Eine oder Andere von Euch mit Hilfe dieser Anleitungen seine erste eigene Homepage erstellen können wird.

• Schritt für Schritt zum eigenen Blog
• Surfino bietet Exklusiv-Paket
• Genial
• Google Gadgets auf der eigenen Homepage
• Fallstudie: Von 0 auf 100 Euro in 12 Monaten

Wer kann sich denn heute noch ein Internet vorstellen, wo es nicht möglich war die Musik der Lieblingsband direkt auf deren Homepage hören zu können? Viele Bands stellen für ihre neuen Alben Ausschnitte aus den einzelnen Songs über einen MP3 Player online. Die dafür verwendete Technik basiert meistens auf dem Adobe Flash Player (ehemals Macromedia) und passende Flash MP3 Player kann man sich zumeist kostenlos herunterladen und auf der eigenen Webseite installieren.

Heute möchte ich euch eine kleine Auswahl der besten Flash MP3 Player für den freien Gebrauch vorstellen.

MP3 Player

Dieser 'namenlose' OpenSource Player wird in fünf verschiedenen Versionen angeboten. Die Mini, Normal, Max, Multi und JS Versionen unterscheiden sich dabei in der Größe und Funktionalität. MP3 Dateien lassen sich direkt über den HTML Code an den Player übergeben. In der Multiversion wird zusätzlich eine Playlist angezeigt.

Download: MP3 Player

XSPF Web Music Player

Dieser Player ist sicherlich einer der bekanntesten und ältesten Flash MP3 Player. Leider scheint die Entwicklung eingestellt zu sein. Da der Player jedoch einen hohen Funktionsumfang hat, möchte ich ihn hier trotzdem vorstellen. Der XSPF Web Music Player verwendet das "XML Shareable Playlist Format" kurz auch XSPF genannt. Dieses auf XML basierende Format ist ein offener Standard, um Playlisten zu definieren und zu verteilen. Player, die dieses Format verstehen, können diese Playlisten ohne Anpassungen importieren und abspielen. Der XSPF Web Music Player besitzt eine kurze Dokumentation und wird auf etlichen Webseiten verwendet.

Download: XSPF Web Music Player

Flash MP3 Player für WordPress

Ebenfalls sehr interessant für WordPress Nutzer ist dieses Plugin. Einmal in WordPress installiert, lässt sich über eine einfach zu bedienende Oberfläche ein frei konfigurierbarer MP3 Player in das eigenen Blog integrieren. Über eine XML Konfiguration kann man den Player den eigenen Wünschen entsprechend designen. So kann man z.B. ein eigenes Hintergrundbild auswählen und zwischen verschiedenen Farbschemata wählen. Während der Player einen Song abspielt, wird das aktuelle Albumcover angezeigt.

Download: Flash MP3 Player für WordPress

Zanmantou

Wer schon länger auf webmatze.de vorbeigeschaut hat, wird diesen sehr flexibel konfigurierbaren Flash MP3 Player schon kennengelernt haben. Gestartet als kleines Projekt, um die Fähigkeiten von Flash auszutesten, ist der Player zu einem wirklich konkurrenzfähigen Tool herangewachsen. Das Benutzerinterface des Players lässt sich über eine XML Datei beliebig anpassen und mit eigenen Grafiken schmücken. Der Player kann sich somit nahtlos in das Design jeder Webseite einpassen. Über eine JavaScript Schnittstelle kann der Player sogar unsichtbar integriert und z.B. über ganz normale Links gesteuert werden. Das Projekt wird derzeit von Andi Dittrich weiterentwickelt und kann mittlerweile auch Videos abspielen. Für mich immer noch einer der einfachsten und trotzdem flexibelsten Flash MP3 Player.

Download: Zanmantou

Dies ist sicherlich nur eine kleine Auswahl an kostenlosen Flash MP3 Playern zur Integration in die eigenen Webseiten, aber mit den hier vorgestellten Programmen besitzt man bereits ein hohes Maß an Flexibilität. Jeder dieser Player lässt sich den eigenen Wünschen entsprechend anpassen und fügt sich somit perfekt in jedes Design ein.

Kennt Ihr vielleicht noch weitere Flash MP3 Player? Dann stellt mir diese doch einfach in den Kommentaren vor.

• Download Macromedia Flash Player 8!
• Zanmantou – Der neue Flash MP3 Player
• Die Liebe für Flash
• WordPress 125×125 Pixel Banner Plugin
• Prey von Recoil powered by Zanmantou