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

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

Leider hat sich Microsoft nicht dazu hinreißen lassen, seine neusten Browser auch für Mac OS X zu veröffentlichen, so dass man auf andere Wege und Mittel zurückgreifen muss.

Dual Boot mit BootCamp oder Virtual Machine?

Sicher, Apple bietet uns über BootCamp an, ein anderes Betriebsystem wie Windows XP auf einer zweiten Partition zu installieren. Hat man dies getan, kann man natürlich auch den Internet Explorer unter Windows verwenden.

Allerdings haben wir dadurch auch einige Nachteile, die natürlich nicht verschwiegen werden können. Zum einen müssen wir extra Festplattenplatz für die zweite Partition bereitstellen - Windows ist hier natürlich nicht besonders sparsam -, zum anderen können wir so immer nur ein Betriebssystem gleichzeitig laufen lassen. Was natürlich unpraktisch ist, wenn unsere Entwicklungsumgebung auf Mac OS X läuft.

Bleibt als weitere Möglichkeit noch, Windows in einer virtuellen Maschine zu installieren. Mit Parallels oder VMWare Fusion gibt es hier sehr gute Programme, die es uns sehr leicht machen, ein oder mehrere Betriebssysteme zu installieren und gleichzeitig mit Mac OS X laufen zu lassen.

Doch auch diese Möglichkeit fällt ins Wasser, wenn wir gar keine eigene (offizielle) Installations CD von Windows besitzen und uns auch nicht extra eine zulegen wollen, nur um etwas im Internet Explorer zu testen. Doch was bleibt uns nun noch übrig?

ies4osx - Der Internet Explorer für OS X

Ich weiß, ich weiß. Warum bin habe ich nicht gleich am Anfang erwähnt, das es doch einen Internet Explorer für Mac OS X gibt? Aber ich liebe es, ein wenig Spannung aufzubauen - und seien wir doch mal ehrlich, die Ungeduldigen unter euch haben die vorhergehenden Abschnitte sowieso übersprungen. (Was? Das stimmt wirklich? Dann schnell zurück und noch einmal von vorne lesen!)

Mike Kronenberg schien sich mal die gleichen Fragen gestellt zu haben. Warum kann ich keine Windows Anwendungen unter OS X laufen lassen? Also hat er sich hingesetzt und das Linux Wine Projekt - mit dem viele Windows Anwendungen unter Linux laufen können - auf Mac OS X portiert und als Darwine zur Verfügung gestellt. Dann ist er anscheinend auf das ies4linux Projekt gestoßen, mit dem es möglich war den Internet Explorer 6 mit Hilfe von Wine auf Linux zum Laufen zu bekommen. Dies hat er ebenfalls portiert und herausgekommen ist ies4osx! <tröte>TATAAA!</tröte>

Die Installation von ies4osx ist wirklich sehr einfach. Zuerst die aktuellen Versionen von Darwine und ies4osx herunterladen, Darwine in den Applications Ordner von OS X verschieben, den Installer von ies4osx ausführen und fertig. Der Installer lädt sich die benötigten Dateien herunter und legt eine lauffähige Version vom "Internet Explorer 6" auf dem Desktop ab.

Es ist sogar möglich, Flash, Java und den Mediaplayer 6.4 von Microsoft auf diesem IE 6 zu installieren.

Mein Fazit

Seit ich vom ies4osx Projekt erfahren habe, habe ich immer einen Internet Explorer bei mir auf meinem MacBook laufen und kann so jederzeit meine Seiten auch dort überprüfen. Sicherlich, der Internet Explorer für Mac OS X reagiert oft etwas träge und vor allem wenn Flash im Spiel ist, wird es richtig langsam, aber für den Zweck, meine Seiten im IE 6 zu testen, ist dies vollkommen ausreichend.

Leider gibt es momentan noch keine Version vom IE 7 oder IE 8 für Mac OS X, aber schauen wir mal, was die Zukunft so bringt.

Wie läuft es bei euch? Entwickelt ihr auch unter Mac OS X? Wenn ja, welche Lösungen habt ihr gefunden, um eure Seiten auch auf dem Internet Explorer zu testen?

• Ein rabenschwarzer Tag
• Google Chrome Frame – Ein Plugin für den Internet Explorer
• Unsicher Objekte unter SSL in IE
• webmatze.de und IE7
• Wozu noch Windows

In den Tagen des Social Webs gehört es unter anderem zu den häufigen Aufgaben eines Entwicklers, XML Dokumente zu generieren, oder APIs auf Basis von XML bereitzustellen. News wollen in Form von RSS oder Atom abonniert werden, Inhalte aus anderen Webangeboten über XML in die eigenen Seiten integriert werden.

XML ist also ziemlich wichtig und daher sollte das Erstellen und die Verarbeitung von XML mit einem Framework wie Ruby on Rails auch so einfach und unkompliziert wie möglich erfolgen.

Was ist Google Sitemaps?

Wie dies funktioniert und welche Schritte dafür notwendig sind, werde ich am Beispiel einer Google Sitemap für ein Blog zeigen. Google stellt mit Google Sitemaps eine Methode zur Verfügung, um neue Inhalte aus dynamischen Webseiten noch schneller in den Google Suchindex aufnehmen zu lassen. Dazu können Webseiten eine sitemap.xml Datei zur Verfügung stellen, welche in Form von XML Daten wie URL, Erstell- bzw. Updatedatum und eine Indizierungspriorität zu allen verfügbaren Seiten - in unserem Fall sind dies die Blogeinträge - enthalten kann.

Rails Generator hilft uns

Bei großen dynamischen Seiten ist es natürlich aufwendig, diese XML Datei immer von Hand zu pflegen, darum wollen wir diese mit den Mitteln von Ruby on Rails automatisch generieren lassen.
Überlegen wir doch erstmal, was wir alles für die geforderte Aufgabe benötigen. Wir brauchen einen Sitemap Controller mit einer index Action, welche wir aufrufen können und die dann schließlich das XML generiert. Also sollten wir zuerst diesen neuen Controller generieren lassen. Dies ist in Ruby on Rails mehr als einfach:

ruby script/generate controller Sitemap index

Dieser Komandozeilenaufruf nimmt uns diese Aufgabe ab. Der Rails Generator legt daraufhin mehrere Dateien an. Unter anderem den Controller sitemap_controller.rb mit der Action index und den View index.html.erb.

     exists  app/controllers/
exists  app/helpers/
create  app/views/sitemap
exists  test/functional/
create  app/controllers/sitemap_controller.rb
create  test/functional/sitemap_controller_test.rb
create  app/helpers/sitemap_helper.rb
create  app/views/sitemap/index.html.erb

Der Controller

Im nächsten Schritt holen wir uns in der bereits für uns angelegten index Action eine Liste mit allen vorhandenen Blogeinträgen und sagen Rails, dass das Ergebnis als XML gerendert werden soll.

class SitemapController < ApplicationController
 
def index
@articles = BlogArticle.find(:all, :order => 'created_on DESC, updated_on DESC')
respond_to do |format|
format.xml { }
end
end
 
end

Wie man sehen kann, sortieren wir die gefundenen Blogeinträge absteigend nach Erstellungs- und Bearbeitungsdatum. So ist sichergestellt, dass die aktuellsten Einträge in der XML Datei später immer am Anfang stehen.

Mit Rails XMLBuilder ist XML so einfach wie noch nie

Wie im ersten Schritt zu sehen, hat Rails für uns mit der index.hmtl.erb auch schon die Viewdatei für die index Action erstellt. Da wir jedoch kein HTML sondern XML ausgeben wollen, benennen wir diese Datei in index.xml.builder um.

Diese Umbenennung hat zwei Effekte. Rails wird auf diese Datei automatisch zurückgreifen, wenn XML gerendert werden soll und die Endung .builder teilt Rails mit, dass der Inhalt dieser Datei Anweisungen für den Rails eigenen XML Builder enthält. Mit diesem Builder lassen sich schnell komplexe XML Dateien erstellen, wie wir am folgenden Beispiel sehen werden.

xml.instruct!
 
xml.urlset "xmlns" => "http://www.google.com/schemas/sitemap/0.84" do
xml.url do
xml.loc         "http://www.name-der-seite.de/"
xml.lastmod     w3c_date(Time.now)
xml.changefreq  "always"
end
 
@articles.each do |article|
xml.url do
xml.loc         url_for(:only_path => false, :controller => 'blog', :action => 'show', :id => article)
xml.lastmod     w3c_date(article.created_on)
xml.changefreq  "weekly"
xml.priority    0.8
end
end
 
end

Dieser Code ist so ziemlich selbsterklärend. Es wird über verschiedene xml Anweisungen die Struktur der sitemap.xml erzeugt und über alle BlogArticles iteriert.

Eine Hilfe für das Datumsformat

Zur Ausgabe des Datums im richtigen Format haben wir die Methode w3c_date() im sitemap_helper.rb definiert.

module SitemapHelper
 
def w3c_date(date)
date.utc.strftime("%Y-%m-%dT%H:%M:%S+00:00")
end
 
end

Fast fertig

Damit wir diese Action nun auch über die URL http://www.name-der-seite.de/sitemap.xml aufrufen können, werden wir in der Datei routes.rb noch ein entsprechendes Mapping anlegen.

map.connect "sitemap.xml", :controller => "sitemap", :action => "index"

Nun steht dem Aufruf durch Google und der anschließenden erfolgreichen Indizierung unserer gesamten Blogbeiträge nichts mehr im Weg.

Abschließend kann man sagen, dass XML mit Ruby on Rails wirklich nicht schwer ist. Wenn man den gesamten Aufwand betrachtet, so konnten wir die geforderte Funktionalität in 5 bis 10 Minuten umsetzen. Wenn das nicht effektiv ist, was denn dann? :o)

• Google Sitemaps
• Ruby on Rails auf Ubuntu 11.10 installieren
• Eigene Fehlerseiten erstellen
• Google Notebook
• Was ist robots.txt?

Wofür steht irrelevant?

Das Attribut irrelevant darf die Werte "true" oder "false" enthalten und gibt an, ob ein so ausgezeichnetes HTML Element im aktuellen Kontext noch nicht oder nicht mehr relevant ist. So gekennzeichnete Elemente werden vom Browser weder gerendert, noch angezeigt. Das heißt, man kann damit beliebige Elemente ein- und ausblenden.

Bisher konnte man diese Funktionalität nur durch das Setzen der CSS Eigenschaft display auf display: none erreichen. Damit werden die entsprechenden Elemente ebenfalls nicht gerendert und angezeigt.

Der Nachteil hier wäre allerdings, dass ein Gerät oder Browser, welcher keine Stylesheets versteht, solche Elemente dann trotzdem darstellen würde. Bei Verwendung von irrelevant würde der entsprechende Teil auch in diesem Fall nicht angezeigt werden. (Vorausgesetzt das Gerät versteht HTML5.)

irrelevant schon heute verwenden

Damit man das neue Attribut in HTML Seiten verwenden kann, müsste man darauf warten, dass die aktuellen Browser HTML 5 unterstützen. Doch bis es soweit ist, kann es noch eine Weile dauern, zumal die Spezifikation noch nicht in der finalen Version vorliegt.

Um das Warten aber ein wenig zu verkürzen, kann man die entsprechende Funktionalität in allen aktuellen Browsern auch auf anderem Weg erreichen. Dazu muss man nur zwei einfache CSS Definitionen in das HTML Dokument einbinden, und schon wird das Attribut irrelevant richtig ausgewertet.

 
<style type="text/css">
  *[irrelevant] {
    display: none;
  }
  *[irrelevant="false"] {
    display: inherit;
  }
</style>
 

(Man sollte jedoch versuchen möglichst nicht irrelevant="false" zu verwenden, sondern statt dessen das Attribut ganz entfernen, da es unter Umständen bei einigen HTML Elementen zu Problemen in der Darstellung kommen kann.)

So kann man nun beliebige Elemente ausblenden lassen:

 
<p>Laut HTML 5  können nicht relevante Elemente
 ausgeblendet werden, indem ihnen das Attribut irrelevant
 zugewiesen wird. <span irrelevant="true">HTML 5 wird noch
 nicht von allen aktuellen Browsern unterstützt.</span>
 Irrelevante Elemente sind solche, die noch nicht, oder nicht
 mehr relevant sind. Das Attribut sollte auf solche Abschnitte
 angewendet werden, die im aktuellen Kontext nicht relevant
 sind, es aber später durchaus wieder werden können.</p>
 

Wenn man dies mit einem aktuellen Browser wie Firefox 3, Safari 3 oder IE 8 betrachtet, sollte der zweite Satz nicht mehr angezeigt werden:

Elemente per DOM ein- und ausblenden

Jetzt, da wir mit irrelevant gekennzeichnete Elemente vom Browser ausblenden lassen können, fehlt nur noch der entsprechende JavaScript Code, um dies auch dynamisch per Mausklick durchführen zu können:

 
function hide(elementId) {
  var el = document.getElementById(elementId);
  el.setAttribute('irrelevant',true);
}
function show(elementId) {
  var el = document.getElementById(elementId);
  el.removeAttribute('irrelevant');
}
 

Fazit

Wie man sieht, kann man schon heute bestimmte HTML5 Features verwenden und so die eigenen Seiten für die Zukunft vorbereiten. Ob man das auch tun sollte, sei jedem selbst überlassen. Da ältere Browser möglicherweise mit den hier gezeigten Beispielen nicht zurecht kommen, ist dies nicht unter allen Umständen die beste Wahl. Aber da in den entsprechenden Browsern in dem Fall die zu versteckenden Inhalte einfach angezeigt werden würden, wäre auch kein größerer Schaden entstanden.

• CSS Formular Design – Textfelder
• Die Sprache eines Links kennzeichnen
• Wirklich einfache JavaScript Tooltips
• CSS Auswahlliste mit Checkboxen
• Schatten mit CSS Pseudo-Elementen hinzufügen

Auf meiner Suche bin ich auf einige mehr oder weniger gute Player gestoßen, aber keiner konnte es mir wirklich recht machen. Vor allem hat mich an den meisten Playern gestört, dass sich diese vom Design her nicht anpassen ließen - aber so war ich es vom guten, alten Winamp Player gewohnt.

Also begann ich damit, mir einen eigenen MP3 Player in Macromedia Adobe Flash zu programmieren.

Der WMPlayer war geboren

Das Design ließ sich beliebig über eine XML Konfiguration definieren und mit eigenen Grafiken anpassen. Das Ganze ließ sich dann als Skin verwenden. Man konnte durchaus verschiedene Skins erstellen und je nach Anlass verwenden.

Hier sind zwei Beispiele für den Player mit Skin zu sehen:

Zusätzlich konnte der Player auch über eine JavaScript API gesteuert werden. Dies war vor allem dann von Vorteil, wenn man den Player unsichtbar in die Seite integrieren wollte.

Nachdem ich den Player auf der alten Version von webmatze.de veröffentlicht hatte, ist er sehr schnell von vielen Besuchern heruntergeladen und auf den verschiedensten Seiten integriert worden. Natürlich gab es auch noch einige Bugs, auf die ich hingewiesen wurde. Mit der Zeit wurden außerdem immer mehr Wünsche für neue Funktionen zusammengetragen, welche ich auch teilweise umgesetzt habe.

Zanmantou tritt die Nachfolge an

Leider hat mir dann zuletzt immer mehr die Zeit gefehlt, um mich mit der Weiterentwicklung des Players zu beschäftigen. Also habe ich den Code veröffentlicht und mich nach Programmierern umgesehen, welche das Projekt weiterführen wollten. Zum Glück konnte ich mit Andi Dittrich, auch bekannt als XAOS aus Webmatze's Webmaster Forum, einen begabten Flash-Programmierer finden, der mir einen Großteil der Supportanfragen abnahm und schließlich auch die Weiterentwicklung des Players übernahm.

Herausgekommen ist dabei eine komplett überarbeitete Version des MP3 Flash Players, welcher von da an auf den Namen Xanmantou getauft wurde. In der aktuellen Version kann dieser sogar Videos abspielen und lässt sich ebenfalls über eine umfangreiche JavaScript API steuern.

Und da aus dem MP3 Player, welchen ich nur als kleines Spielzeug entwickelt hatte, ein richtig eigenständiges Programm geworden war, musste auch eine eigene Seite für den Player her. Seit März 2007 ist der Player unter http://zanmantou.voodoon.com/ http://zanmantou.a3non.org/zu finden.

Die Seite - ebenfalls von Andi erstellt - bietet alle Informationen und Tutorials zum Zanmantou Player und informiert ständig über neue Versionen und Updates.

Wenn Ihr also auf der Suche nach einem richtig guten Flash MP3 und Video Player für eure eigenen Seiten und Projekte seit, dann schaut einfach mal beim Zanmantou Player vorbei!

• Neue Flashplayerversion mit Skinfunktionalität
• Prey von Recoil powered by Zanmantou
• Flash MP3 Player
• Die Liebe für Flash
• Download Macromedia Flash Player 8!