Etherpad Light auf einem Ubuntu Server installieren

Nachdem gestern Etherpad Light vorgestellt wurde, dachte ich mir das man das ja ruhig mal ausprobieren kann. Bei Etherpad Light handelt es sich um eine Portierung und Neuausrichtung von Etherpad welches nun unter node.js läuft und somit von Java losgelöst ist.

Um es auf einem Ubuntu Server zu installieren müssen erst einmal ein paar Pakete installiert werden:

apt-get install gzip git-core curl python libssl-dev

Anschließend muss node.js heruntergeladen werden, compiliert und installiert werden:

wget http://nodejs.org/dist/node-v0.4.11.tar.gz
tar xf node-v0.4*
cd node-v0.4*
./configure && make && make install

Jetzt fehlt nur noch der Paketmanager für Node:

curl http://npmjs.org/install.sh | sh

Nun legen wir auf dem System einen Nutzer pad an und loggen uns mit ihm ein:

adduser pad
su pad
cd /home/pad/

Im nächsten Schritt wird das Git Repository von Etherpad Light geklont.

git clone 'git://github.com/Pita/etherpad-lite.git'

Nun müssen nur noch ein paar Abhängigkeiten installiert werden:

cd etherpad-lite/bin/
 ./installDeps.sh

Nach der Konfiguration (settings.json) kann man das ganze auch schon starten:

screen ./run.sh

Sollte bei der Benutzung von Screen folgende Meldung (oder ähnlich) erscheinen:

Cannot open your terminal '/dev/pts/5' - please check.

so hilft es diesem (Pseudo)Terminal weitere Rechte zu geben:

chmod 777 /dev/pts/5

und es danach nochmal zu versuchen.

Weitere Informationen gibt es unter:
http://pitapoison.de/
http://www.golem.de/1108/86036.html
http://pitapoison.de/wie-etherpad-lite-entstand
https://github.com/Pita/etherpad-lite/blob/7e4bba0e31d600a5d1d3833211252b1472f07f2c/README.md

innerHTML in jQuery

Gegeben sei folgender Quelltext:

<div class="divbox">Wert: 42</div>

In diesem Quelltext sollte der Wert je nach Position eines Sliders anpasst werden. Im ersten Moment versuchte ich es mit der jQuery Funktion replaceWith:

$(".divbox").replaceWith("Wert " + value);

Leider führt diese Methode dazu das der gesamte div Tag ersetzt wird was natürlich nicht erwünscht ist. Zum Glück gibt es in jQuery eine Entsprechung für das innerHTML, diese Funktion hört auf den Namen html:

$(".divbox").html("Wert " + value);

Damit wird nur der Text zwischen den div Tags geändert. Wichtig ist es dabei darauf zu achten das jQuery hier nur die innerHTML Eigenschaft des Browsers durchreicht und dies z.B. dazu führen kann das beim Internet Explorer Attribute in Anführungszeichen zurückgegeben werden.

Weitere Informationen gibt es unter:
http://api.jquery.com/html/
http://api.jquery.com/replaceWith/

Selektoren in jQuery

Gestern habe ich mich ein wenig mit jQuery beschäftigt. Dazu erst einmal ein kleineres Beispiel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script src="jquery.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){    
            $("a#hide").click(function(){
                $("#valuesInit").animate({ height: 'hide', opacity: 'hide' }, 'slow');
            })
    });
    </script>

  <title>jQuery Test</title>
</head>
<body>
  <div id="valuesInit" style="background-color:#ADADAD">
  <p><b>Initialwerte</b></p>
  Lorem Ipsum dolor sit amet...
  </div>

  <p><a href="#" id="hide">Verstecken</a></p>
</body>
</html>

In diesem Beispiel wird eine div Box mit der ID valuesInit und der Klasse divbox angelegt. Oben wird für den Link mit der ID hide eine Klickfunktion definiert. Diese Klickfunktion sucht dabei das Element mit der ID valuesInit und lässt es verschwinden. Nun gibt es verschiedene Möglichkeiten etwa zu selektieren:

  • nach Element
$("div").animate({ height: 'hide', opacity: 'hide' }, 'slow');
  • nach ID
$("#valuesInit").animate({ height: 'hide', opacity: 'hide' }, 'slow');
  • nach Klasse
$(".divbox").animate({ height: 'hide', opacity: 'hide' }, 'slow');

Weitere Informationen gibt es unter:
http://docs.jquery.com/Main_Page
http://www.very-clever.com/jquery-tutorial.php
http://www.andreas-schlapsi.at/2008/10/10/jquery-dom-elemente-auswahlen/

PhoneGap in Version 1.0 erschienen

Bei der mobilen Anwendungsentwicklung steht man vor dem Problem das man für jedes System meist eine andere Sprache sowie andere Klassenbibliotheken benutzen muss. In diese Lücke springt PhoneGap, welches vor kurzem in der Version 1.0 erschienen ist. Dabei handelt es sich um ein quelloffendes Framework mit welchem Anwendungen in JavaScript, HTML und CSS geschrieben werden können welche dann mit dem nativen Elementen der jeweiligen Plattform auf dem Gerät laufen.

Dabei ist es mit PhoneGap möglich Anwendungen für Android, iOS, webOS, Microsoft Windows Mobile, Nokia Symbian OS und RIM BlackBerry zu schreiben. Bezogen werden kann das Framework dabei unter http://www.phonegap.com/.

Weitere Informationen gibt es unter:
http://en.wikipedia.org/wiki/PhoneGap
http://www.pro-linux.de/news/1/17341/phonegap-10-veroeffentlicht.html

Probleme mit textContent und dem Internet Explorer 8

Der Internet Explorer 8 hat mit der Javascript Eigenschaft textContent so seine Probleme. Es kommt ein undefined heraus wenn man diese Eigenschaft im Internet Explorer 8 abfragt. Eli Grey hat für dieses Problem eine schöne Lösung gefunden:

if (Object.defineProperty && Object.getOwnPropertyDescriptor && !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get)
 (function() {
     var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText");
     Object.defineProperty(Element.prototype, "textContent",
     { // It won't work if you just drop in innerText.get
       // and innerText.set or the whole descriptor.
       get : function() {
         return innerText.get.call(this)
       },
       set : function(x) {
         return innerText.set.call(this, x)
       }
     }
  );
 })();

Diese Funktion fügt man dabei in eine extra Javascript Datei ein und bindet sich dann per Browserweiche ein:

<!--[if gte IE 8]><script type="text/javascript" src="textContent.js"></script><![endif]-->

Anschließend kann man die textContent Eigenschaft normal benutzen.

Weitere Informationen gibt es unter:
http://eligrey.com/blog/post/textcontent-in-ie8