msites.net: Magazin

Ein neues Konzept

Tue, 15 Dec 2009 18:44:11 +0100

Redesign vollendet

Heute kommt auch die weite Öffentlichkeit in den Genuss des Redesigns von msites.net.
Mit dem neuen Aussehen kommt auch ein neues Konzept.

In der nahen Vergangenheit erschienen in meinem Blog immer weniger Artikel; irgendwie war das regelmässige, mehr oder wenig belanglose Schreiben nicht so mein Ding.

Dafür erhielten meine grösseren und kleineren Projekte eigene Internetauftritte, welche alle ohne Bezug zueinander standen.

Bald wünschte ich mir eine Lösung, wo ich alle Auftritte unter einem Hut präsentieren konnte, jedoch nicht an das starre Bloggerüst mehr gefesselt war.

Verschiedene Unterseiten

Der Blog ging im neuen Magazin auf. Hier wird nicht mehr regelmässig berichtet und geschrieben, dafür gibt es grössere Artikel zu einem Thema, welche eine bestimmte Problemlösung oder Ähnliches bieten.
Mein neustes Projekt aus meinem Studium, AudioTagger, als auch mein Freizeitunternehmen LRC erhalten ebenfalls ihren Raum als vollausgewachsene Wikis.

Bei meinen Fotos ist eigentlich alles beim Alten geblieben, nur dass flickr jetzt noch besser in msites.net eingebunden wurde.

Und schon das Konzept gebrochen

Mit diesem kurzen Artikel habe ich eigentlich schon mit der Definition des Magazins oben einen Bruch begangen.

Darum werde ich jetzt auch nicht mehr weiter ausschweifen und freue mich auf interessierte Besucher auf meiner neu gestalteten Internetseite.

Manuel Alabor

Eigene Symbole für externe Geräte

Thu, 07 May 2009 15:58:00 +0200

Individualisierung ist alles

Seit ich stolzer Besitzer eines Mac Book Pro's bin, habe ich natürlich verschiedene Dinge auf dem, für mich mehr oder weniger, neuen Betriebssystem ausprobiert.

Unter Anderem auch das Zuweisen eines speziellen Laufwerkssymbol für meine Spiegelreflexkamera oder meinen USB-Stick. Über die normale Kopiermethode im Informationen-Dialog klappt das nämlich nicht. Zufällig bin ich aber auf einen Artikel von AppStorm gestossen, und fand da eine Lösung.
Das Tool Set Icon kann auch bei blockierten Laufwerken Symbole setzen.

Symbolbeschaffung

Gleich kam dann aber auch die Frage, woher ich passende Symbole für meine Geräte bekommen könnte.

Für meine Olympus war das noch relativ einfach. Ein Bild von der Herstellerhomepage entsprechend mit Photoshop bearbeitet & verkleinert: Voilà.
Für meinen 16GB USB-Stick von Pretec gestaltete sich das Ganze aber schon komplizierter.

Nach erfolgloser Suche entschied ich mich dafür, das ganze selber in die Hand zu nehmen.
Den Stick einmal auf neutralem Hintergrund abgelichtet, kann das Foto mit Adobes Photoshop zurechtgemacht werden:

Hintergrund entfernen
auf 512x512 Pixel verkleinern
Schlagschatten erstellen
als PNG speichern

Set Icon wiederum kann die gespeicherte PNG-Datei problemlos dem Stick zuweisen.

Symbolfabrik

Mit ca. 15 Minuten Aufwand kann man also relativ einfach Symbole für die eigenen Geräte erstellen.

Für interessierte Leser gibt es zum Abschluss die Symboldatei für den direkten Einsatz auf dem eigene Mac. Viel Spass :-)

Symbol für Pretec i-Disk Secure 16GB USB-Stick herunterladen.

Online-Notizbuch

Wed, 03 Dec 2008 13:12:12 +0100

Notizen sammeln

Seit längerer Zeit habe ich mich an verschiedenen Webanwendungen zur Notizverwaltung versucht.
Begonnen hatte alles mit einem Notiz-Widget für Netvibes.
Organisatorisch nicht viel besser als ein Original-PostIt bin ich dann auf Google Notes umgestiegen.

Die Bedienung war für einfache, kurze Notizen zwar etwas fummelig, aber ganz in Ordnung. Es kam wie es kommen musste, und mein Arbeitgeber setzte die URL von Google Notes auf die Blacklist, womit für mich der Nutzen von Googles Notizbuch erlosch.

Als nächstes testete ich Evernotes an. Die iPhone-Anbindung war ganz lustig, aber alles in allem bot mir der Service zu viele Features welche ich einfach nicht benötigte.

Ich begab mich (wiedereinmal) auf die Suche nach einem guten, einfachen und schlanken Opensource-Wiki. Und wurde dieses Mal sogar fündig.

Lösung aus Frankreich

Nach längeren Suchmaschinen- und SourceForge-Recherchen bin ich auf das französische WiKiss gestossen.
WiKiss läuft auf einem mit PHP ausgestatteten Webserver und benötigt keine Datenbank im Hintergrund. Alle Wiki-Artikel werden in handelsüblichen Textdateien auf dem Server gespeichert.

Im Vordergrund präsentiert sich schon die jungfräuliche Version in einem schlichten und komfortablen Design, wobei dieses per CSS einfach angepasst werden kann.

Modifizieren empfiehlt sich in den meisten Fällen: Das WiKiss-Team bietet die Benutzeroberfläche nur in französischer Sprache.
Wer nicht selber Hand anlegen will, kann auch einfach mein Deutsch-Paket für WiKiss verwenden. Die ZIP-Datei herunterladen, anschliessend ins WiKiss-Verzeichnis entpacken. Die Start- und Hilfeseiten sowie das Interface präsentieren sich von nun an in Deutsch.

Sicherheit?

WiKiss lässt sich so konfigurieren, dass Artikel nur mit einem Passwort angepasst werden können. Einen grundsätzlichen Leseschutz gibt es wikitypisch nicht.
Abhilfe schafft hier (vorausgesetzt, der Webserver unterstützt dies) das sichern via .htaccess-Datei, welche ins WiKiss-Verzeichnis abgelegt wird.

AuthName        "Mein WiKiss"
AuthType        Basic
AuthUserFile    /kompletter/server/pfad/zur/passwort/datei/.htpasswd
Require         valid-user

In der zusätzlichen Datei .htpasswd werden nun noch die Benutzername/Passwort-Paare eingetragen, welche auf die Wiki zugreifen dürfen.

Genauere Informationen zur Sicherung via .htaccess finden Sie bei Apache.

Fazit

Seit etwa einem Monat nutze ich nun die oben vorgestellte Lösung mit WiKiss.
Zum ersten Mal bin ich komplett zufrieden. Das Markup zur Textformatierung ist schnell antrainiert und das Aussehen des Interfaces lies sich mit wenigen Handgriffen ein wenig aufpolieren.

Die Datenablage in Textdateien bietet mir in zweierlei Hinsicht Vorteile:
Bei einer Datenmigration können die Notizen mit minimalem Aufwand gezügelt werde. Aber auch eine Offline-Nutzung meiner Notizen fällt so im einiges leichter.

Lesezeichen von Delicious mit jQuery auslesen

Tue, 26 Aug 2008 12:46:00 +0200

Lesezeichen organisieren

Delicious bietet eine sehr komfortable Lösung wenn es darum geht, seine ~~Favoriten~~ ~~Lesezeichen~~ Bookmarks computer- und browserunabhängig zu speichern.

Mit einigen einfachen Zeilen JavaScript Code können die abgelegten Bookmarks sogar in den eigene Blog oder jeden anderen Internetauftritt eingebunden werden. Besonders schnell funktioniert dies, wie das folgende Beispiel zeigt, mit der jQuery-Bibliothek.

Einfaches Beispiel

Das Delicious-API kann über eine JSON-Anfrage angesprochen werden. Die gelieferten Daten können anschliessend für eine Anzeige aufbereitet und ausgegeben werden.

$.getJSON("http://feeds.delicious.com/v2/json/swissManu?jasoncallback=?&callback=?",
  function(data) {
    $.each(data, function(i,item) {
      var url = item.u;
      var title = item.d;
      var notes = item.n;
      var tags = item.t; // Array with all tags
      var date = item.dt;
      var link = $("").attr("href",url).attr("title",title).html(title);
 
      $("ul#bookmarks").append($("").append(link));
    });
  });

Diese Zeilen holen per JSON die neusten Bookmarks auf meinem Account und geben diese verpackt in der Aufzählungsliste mit der ID bookmarks aus.

Komplexer gehts auch

Hier gibt es ein komplexeres Beispiel welches unter anderem das Eingeben eines Benutzernamens erlaubt und des weiteren eine Gruppierung nach Datum beinhaltet.

Unter Das Web finden Sie zudem die Implementierung des Beispiels in meinem Blog.

API Dokumentation

Delicious bietet aber noch mehr. Unteranderem können Tags ausgelesen, Bookmarks hinzugefügt und gelöscht werden.
Nähere Informationen hierzu gibt es in der offiziellen API-Dokumentation (leider nur in Englisch) bei Delicious.

Mehrere Onload-Ereignisse nutzen

Fri, 25 Jul 2008 09:30:00 +0200

Internetseite initialisieren

JavaScript, resp. jQuery mit dem entsprechenden Wrapper, ermöglicht ein komfortables Reagieren auf ein fertig geladenes Dokument/DOM.
Ist der komplette Inhalt einer Internetseite geladen, wird das Onload-Ereigniss getriggert und es können diverse Modifikationen am DOM vorgenommen werden.

// Pures JavaScript:
window.onload = function() { /*...*/ };
 
// jQuery-Style:
$(document).ready(function() { /*...*/ });

Nun sah ich mich während der Implementierung der neusten Version meines Blogs einmal mehr mit dem Problem konfrontiert, dass ich an mehreren Stellen meines Codes (insbesondere in verschiedenen .js-Dateien) auf das Onload-Ereigniss reagieren können musste.

Überschreiber

Benutzt man einfach wieder eines der oben erwähnten Code-Snippets, wird die vorher definierte Callback-Methode mit der neuen überschrieben und somit nicht mehr ausgeführt.

$(document).ready(function() {
  alert("Erste call-back-methode";
});
 
$(document).ready(function() {
  alert("Zweite call-back-methode: Ha! Ich hab' die erste überschrieben!";
});

Die Idee

Die zugrundeliegende Idee wie dieses Problem umgangen werden kann ist eigentlich recht simpel:

Alle Callback-Methoden, welche nach dem Laden des Dokuments ausgeführt werden sollen, werden in einem Array abgelegt. Diese werden nun als Onload-Handler bezeichnet.
Dem onload-Ereigniss wird eine neue Callback-Methode zugewiesen. Diese durchläuft das Array mit allen Onload-Handlern und ruft diese einen nach dem anderen auf.

Kompliziert? Überhaupt nicht. Folgender Absatz zeigt eine Beispielimplementierung.

Framework-Code

Mit wenigen Zeile Code kann ein kleines Framework zum verwalten mehrerer Onload-Handler implementiert werden.

var onloadHandlers = new Array();
 
/**
 * Fügt einen neuen onloadHandler am Ende der aktuellen
 * Handler-Liste hinzu.
 *
 * @param onloadHandler
 * @author Manuel Alabor, http://www.msites.net/
 */
function appendOnloadHandler(onloadHandler) {
  onloadHandlers.push(onloadHandler);
}
 
/**
 * Fügt einen neuen onloadHandler am Anfang der aktuellen
 * Handler-Liste hinzu.
 *
 * @param onloadHandler
 * @author Manuel Alabor, http://www.msites.net/
 */
function prependOnloadHandler(onloadHandler) {
  onloadHandlers.unshift(onloadHandler);
}
 
/**
 * Sobald das aktuelle Dokumenten-DOM bereit ist, werden alle
 * vorhandenen onloadHandlers der Reihe nach ausgeführt.
 *
 * @author Manuel Alabor, http://www.msites.net/
 */
$(document).ready(function() {
  for(var i = 0, l = onloadHandlers.length; i < l; i++) {
    onloadHandlers[i]();
  }
});

Beispiel eines Handlers

Um den praktischen Nutzen zu demonstrieren möchte ich hier gleich auch einen einfachen Onload-Handler vorstellen.
Seine Funktion: Führt das href-Attribut eines beliebigen Links auf eine externe Seite resp. beginnt nicht mit http://www.msites.net, wird das target-Attribut auf _blank gesetzt um das Ziel in einem neuen Fenster zu öffnen.
Abschliessend wird er Onload-Handler per appendOnloadHandler() aktiviert.

/**
 * Verändert alle externen Links so, dass sie in einem neuen
 * Fenster geöffnet werden (target = _blank)
 *
 * @author Manuel Alabor, http://www.msites.net/
 */
function externalLinksInBlank() {
  /* Allgemeine Links anpassen: */
  $("a").each(function() {
    // Extern -> Neues Fenster
    var href = $(this).attr("href");
    if(href != undefined) {
      if(href.substring(0,21) != "http://www.msites.net")
        $(this).attr("target", "_blank");
    }
  });
}
 
appendOnloadHandler(externalLinksInBlank);  // onloadHandler hinzufügen

Um zusätzliche Onload-Handler auszuführen werden diese genau gleich wie hier im Beispiel als Methode implementiert und anschliessend per appendOnloadHandler() resp. prependOnloadHandler() dem Framework hinzugefügt.
Simpel, oder?

Nur mit jQuery?

Der oben vorgestellte Code benutzt die freie Library jQuery.
Das Framework (nicht der Beispiel-Handler!) kann jedoch mit einer kleinen Anpassung auch komplett ohne die Bibliothek verwendet werden.

/**
 * Sobald das aktuelle Dokumenten-DOM bereit ist, werden alle
 * vorhandenen onloadHandlers der Reihe nach ausgeführt.
 * -> jQuery-freie Version
 *
 * @author Manuel Alabor, http://www.msites.net/
 */
window.onload = function() {
  for(var i = 0, l = onloadHandlers.length; i < l; i++) {
    onloadHandlers[i]();
  }
};

Pimp my Wohnzimmer

Sun, 06 Jul 2008 10:08:43 +0200

Multimedia für den Alltag

Seit mehr als drei Jahren habe ich meine liebgewonnene uralt Xbox als Mediacenter verwendet. Zu diesem Zweck erhielt sie damals einen Modchip eingelötet (das war eine Geschichte! Zitterige Hände und flatternde Nerven ob jetzt wohl das ganze Gerät kaputt sei) sowie eine 320GB-starke neue Festplatte. Zusammen mit der Software XBMC ergab sich so ein sehr kostengünstiges Abspielgerät für allerlei Medien.

Ein wenig Geschichte

Doch die Kombo hatte auch ihre Schattenseiten. Zum einen konnten diverse DVD's nicht wiedergeben werden. Warum? Keine Ahnung. Evtl. war das Original-DVD-Laufwerk veraltet oder aber der Player von XBMC kam mit einigen Formaten einfach nicht zurecht.

Zusätzlich konnte ich die Xbox nur umständlich über einen per OpenSource-Firmware zur Bridge umkonfigurierten Linksys-Router ins heimische W-LAN einbinden (Danke an meinen Mitbewohner für das zur Verfügung stellen der Hardware ;-) ). Dies resultierte schlussendlich darin, dass die Xbox nur per FTP "one-way" befüllt werden konnte. Vom Gerät aus kam man so gut wie nie ins eigentliche Subnetz mit den restlichen Rechnern. (Ob hier nun meine Unfähigkeit während der Konfiguration oder die undurchsichtige Admin-Oberfläche der Alchemy-Firmware Schuld war, sei dahin gestellt)

Eine neue Lösung musste früher oder später her. Als ich dann kürzlich meinen alten Netgear ADSL-WLAN-Router mit einem Airport Extreme ersetzt habe und damit eine einfache Variante erhielt, USB-Festplatten ins Netz einzubinden, entschied ich mich nach kurzer Überlegung einen mac mini als Ersatz für die Xbox anzuschaffen.

Update: Dank einer gegrillten Festplatte serviert jetzt ein QNAP TS-209 die Daten im LAN.

Hardware

Anschluss findet der Kleine per DVI- und Stereo-Cinch-Kabel.
Qualitativ reicht beides vollends momentan. Möglicherweise kommt in
Zukunft für das Audio-Signal ein Toslink-Kabel in Frage. Jedoch erst wenn auch entsprechende Boxen neben dem TV stehen.

Problematisch gestaltet sich jedoch die Bildausgabe auf meinem "HD-Ready" Philipps Flatscreen. Zwar kann ich den mini problemlos zur Ausgabe von 720p überreden, doch scheint der Fernseher grundsätzlich das Bild entweder zu klein (ohne Overscan) oder zu gross (mit Overscan) anzuzeigen.
Hier könnte das Tool DisplayConfigX weiterhelfen. Doch warte ich momentan noch auf die gekaufte Registrierungsnummer (Testversion kann nur mit Auflösungen knapp unter HDTV arbeiten).

Software

Während den letzten Tagen habe ich das Internet nach einem passenden Nachfolger für das komfortable XBMC durchforstet. Unteranderem bin ich auf MediaCentral, iTheater, aber natürlich auch das bereits mitgelieferte FrontRow gestossen. Jedoch keines der Programme vermochte mich wirklich zu überzeugen.

Umso glücklicher war ich als ich auf eine Mac OS X-Version von XBMC gestossen bin! Auf osxbmc.com gibt es eine fertig kompilierte Version als DMG-Image. Natürlich sah dann die "normale" XBMC-Oberfläche im Vergleich zum OS X-Interface ein wenig trostlos aus. Hier kann ich aber den Skin AEON empfehlen. Sehr hübsch anzusehen und optimiert für HDTV-Auflösungen (1080 & 720).

Fazit & Stöckchen

Bis anhin bin ich sehr zufrieden mit meiner Entscheidung einen mac mini fürs Wohnzimmer gekauft zu haben. Neben der Hauptfunktion, Musik- und Vidoestation, empfinde ich es als sehr angenehm auch einmal kurz etwas im Internet suchen zu können, ohne den Laptop im Büro holen zu müssen.

Preis/Leistung ist in Ordnung. Denn: Die meisten Geräte in ähnlicher Grösse (z.B. Shuttels mini X 200MD für CHF 1550.-) kosten doch deutlich mehr.

Nun würde mich aber auch interessieren wie meine Leser ihr Wohnzimmer ausgestattet haben. Ganz oldschool mit TV/DVD-Kombo oder komplette Homecinemas mit Mediacenter-Rechner?

Dem König seinen Thron

Fri, 13 Jun 2008 09:36:00 +0200

Apple liefert zu seinem iPhone
ein kleines Dock mit.
Dieses ist zwar zweckmässig, erlaubt für meinen Geschmack aber keinen wirklich guten Zugriff auf die Funktionen des Gerätes.

Berührt man den Touchscreen ohne das komplette Dock festzuhalten, rutscht das komplette Teil weg.

Desweiteren muss das Telefon zwangsmässig immer in der vertikalen Position bleiben. Videopodcasts während der Arbeit schauen ist so nicht wirklich ein Genuss.

Momentan gibt es auf dem Markt eigentlich nur ein Produkt, welches diese beiden Kritikpunkte verbessert: Das PED3 von thoughtout.

Die um 360° drehbare iPhone-Halterung wird in zwei möglichen Positionen auf einem stabilen Ständer fixiert. Das USB-Kabel zum Aufladen und Synchronisieren wird komfortabel von hinten durch die Kabelführung eingelegt und kann jederzeit an den frei bleibenden Dock-Anschluss des Gerätes angeschlossen werden.

Ease of use

Die Konstruktion des PED3's lässt das iPhone einige Zentimeter in der Luft schweben. Durch das Gewicht des Fusses kann das Multitouch-Interface problemlos bedient werden (kein Verrutschen mehr; ausser man hämmert auf das Display ein ;-) ).

Ganz leicht lässt sich das iPhone dann auch in die Horizontale (oder jede andere durch Drehung erreichbare Position) bringen. Das Drehen fällt ohne grossen Widerstand angenehm aus, wobei das Gerät dann aber auch wieder fix in seiner Position verbleibt.

Sowohl Kopfhöreranschluss, Standby-Taste als auch (wie erwähnt) der Dock-Anschluss bleiben jederzeit frei zugänglich. Damit ist es weiterhin möglich Musik & Videos zu hören/schauen, ohne seine Arbeitskollegen zu stören.

Durch den frei zugänglichen Dock-Anschluss entsteht aber auch ein Hauptproblem des PED3:
Die eingebauten Lautsprecher des iPhones sind fast komplett verdeckt.
Dadurch sind Signaltöne bei eingehenden SMS usw. fast nicht mehr hörbar.

Fazit

Für 39.99 US-Dollar ist das PED3 bei thoughtout erhältlich. Für den stolzen Preis erhält der Kunde jedoch ein sehr gut verarbeitetes Produkt, welches auch noch zackig geliefert wird (mein PED3 war nach 4 Arbeitstagen im Briefkasten).

Wer für seinen Bürotisch eine praktikable Aufbewahrungs- (und Präsentations- ;-) ) Lösung sucht und die verdeckten Lautsprecher verschmerzen kann, ist beim PED3 an der richtigen Adresse.

Fotogallerie

Toolbox: GUIImageManager

Fri, 16 Feb 2007 12:30:00 +0100

I've created a lot of small helpers as also complete swing components for developing gui's with java in the past. This is the first episode of the Toolbox series I want to start here. I'll present you classes out of my GUILibrary in the future. So say Hello to the GUIImageManager.

What is it?

If you create gui's today, you usually use images to create a better experience for the user. As you may have noticed, there is a flickering when you display an image on the gui (of course not if you use the mediatracker... Everytime).
Also it isn't very satisfying to reload an image everitme from its file.

Here takes the GUIImageManager place. He's a cache for all your gui images.
Just tell the manager which image you want and he will deliver it to you and takes care about caching in the background. If you need the image again, the manager loads it directly from the cache.

How to use?

GUIImageManager is implemented as a singleton. To make the use of the manager as easy as possible, you have to initialize the manager on the application start to tell him where your gui images are placed (I usually use a package like /net/msites/xy/gui/res/).

GUIImageManager.loadImageManager("/net/msites/myapp/gui/res/");

After this, you're ready to use the manager. Just use following code to get an image:

BufferedImage image = GUIImageManager.getInstance().getImage("myimage.png");

Have a look into the sourcecode for more information about the available getImage() methods.

License & Download

It is free for use, but please mention me in your credits if you use the class. Thanks :-)
If you have any additions or feedback, please feel free to leave a comment.