Ankündigung

Einklappen
Keine Ankündigung bisher.

21: Drangeschraubt und glattgefeilt

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • 21: Drangeschraubt und glattgefeilt

    21:
    ~ Die perfekte Webanwendung ~

    Wer ist nicht auf der Suche danach? In den letzten Jahren ist viel passiert, Webanbieter haben angefangen, Ihre Services zu öffnen, über APIs wohldefinierte Schnittstellen anzubieten und Mashups zu erlauben. Gleichzeitig orientieren sich immer mehr Anwendungen an Schichtmodellen und Prinzipien wie „Progressive Enhancement“ — CSS, HTML, Javascript und Javascript Bibiotheken, alle Elemente spielen ihre zugeteilte Rolle in der Applikation — mächtig aber zurückhaltend.
    Saubere Webanwendungen geben wiederum den Browserherstellern die Möglichkeit, auch ihrerseits den Nutzer weiter zu unterstützen. Was mit Änderung von Schriftgrößen, Farbkontrasten oder Userstylesheets anfing, spiegelt sich heute darin wieder, dass über Plugins ganze Seiten oder sogar der Browser selbst umgeschrieben werden können.

    In diesem Türchen wollen wir uns der Firefox-Erweiterung Greasemonkey zuwenden.
    Als Versuchskarnickel soll Delicious herhalten, einer der ältesten Bookmarkingdienste, der — ganz Yahoo — mit einem sauberen GUI und einer super Schnittstelle aufwartet. Gerade das User Interface ist so gut durchdacht und mit hilfreichen Kleinigkeiten durchzogen, dass es schwer wird, da noch Kritikpunkte zu finden. Nichts desto trotz, wir wollen noch etwas dran schrauben.

    Vorbereitung

    Wir machen uns das Leben nicht unnötig schwer und benutzen jQuery als Scriptbibliothek. In Greasemonkey legen wir für unsere spezifische Delicious-Domain ein Script an und binden jQuery ganz frech von der Originaldomain ein:

    PHP-Code:
    // <script src="..."> in den Header einbinden
    var GM_JQ document.createElement('script');
    GM_JQ.src 'http://jquery.com/src/jquery-latest.js';
    GM_JQ.type 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(GM_JQ);

    // jQuery bereits geladen?
    function GM_wait() {
      if(
    typeof unsafeWindow.jQuery == 'undefined') { 
        
    window.setTimeout(GM_wait,100); 
      }
      else { 
        $ = 
    unsafeWindow.jQuery
        
    letsJQuery(); 
      }
    }

    GM_wait();

    // Hier hinein kommt unser Code
    function letsJQuery() {

    „letsJQuery“ ist jetzt unser Container für jeglichen Javascript-Code. Ready to takeoff!

    Pimp da Tag

    Delicious' Kernprinzip ist das Tagging. Dazu wird eine Liste von Schlüsselwörtern vergeben, die, durch Leerzeichen getrennt, eine flexible Linkkategorisierung gewährleisten sollen. Wie bei jeder Tagging-Engine liegt der Nachteil im Trennzeichen selbst. Space trennt ja die einzelnen Tags voneinander, kann also nicht Teil des Begriffs sein. Gerade bei Eigennamen ist das eher doof, wie man immer wieder schön bei Taggings wie diesen sehen kann: Monty Python Die Ritter der Kokosnuss Brücke des Todes (Youtube). Taggings wie diese sind nichts wert, weil Artikel oder gebeugte Substantive keine sinnvollen Schlüsselwörter darstellen. Unser Ziel soll sein: Monty·Python Die·Ritter·der·Kokosnuss Brücke·des·Todes.
    Weil das in der Anzeige nicht so dolle aussieht, wollen wir nun Greasemonkey anwerfen und die Middots (Mittelpunkte) bei der Anzeige wieder in Spaces verwandeln. Relevant sind drei Stellen:

    - die Tagliste unter der jeweiligen Bookmark
    - die Tags in der Sidebar
    - die Brotkrümelleiste, bei auf Tags eingeschränkter Ansicht

    Über Firebug bekommen wir schnell aussagekräftige DOM-Knoten heraus, JQuery bietet darüber dann einfachen Zugriff. Über einen regulären Ausdruck ersetzen wir den Middot in ein geschütztes Leerzeichen (aus diesem Grund müssen wir auch Textknoten als HTML zuordnen):

    PHP-Code:
    // Sidebar-Tags
    $('#sidebar a span').each(function () {
      $(
    this).html($(this).html().replace(/·/'&nbsp;'));
      $(
    this).attr('title' , $(this).attr('title').replace(/·/' '));
    });

    // Brotkrümeltags
    $('#tagscopenav a.onlytag').each(function () {
      $(
    this).html($(this).text().replace(/·/'&nbsp;'));
    });

    // Tagliste der Bookmarks
    $('.tag-chain-item-span').each(function () {
      $(
    this).html($(this).text().replace(/·/'&nbsp;'));
    }); 
    Die Sidebar benutzt in ihren Tag-Links auch noch das title-Attribut. Dessen Wert ersetzen wir gleich mit. Hier darf natürlich keine Entity hinein, wir benutzen einfach ein stinknormales Leerzeichen.

    Pimp da Erfassungsmaske

    So wahnsinnig praktisch ist das ja noch nicht. Wir können jetzt Leerzeichen in Tags darstellen, aber dafür wird die Eingabe verkompliziert. Die wenigsten wissen wohl aus dem FF den Tastaturcode für den Middot (übrigens Alt + 0183 unter Windows). Darum kümmern wir uns jetzt.
    Bei der Erfassung von Bookmarks gibt es ein Text-Feld zur Eingabe von Tags. Delicious benutzt hier ein ausgeklügeltes Javascript-gestütztes Prinzip, um die Eingabe auch durch Auswahl aus einer Liste bereits vorhandener Tags zu ermöglichen (und gleichzeitig dort auch ein visuelles Feedback zu den bereits genutzten Tags zu erzeugen).
    Wir wollen uns hier möglichst wenig einmischen, denn das Prinzip funktioniert gut. Stattdessen wollen wir unsere Tags mit Leerzeichen erfassen, indem wir sie in Hochkommata einschließen ("Monty Python" "Die Ritter der Kokosnuss" "Brücke des Todes"). „onBlur“ also beim Verlassen des Eingabefeldes wird dann mit einem regulären Ausdruck die Ersetzung geklammerter Leerzeichen in Middots vorgenommen:

    PHP-Code:
    $('.yui-ac-input').blur(function () {
      
    // Vorhandensein von geklammerten Begriffen suchen
      
    Ergebnis = $(this).val().match(/\"([^"]+)\"/g);
      // Bei Erfolg Ersetzen allen Weißraumes durch das Middot-Zeichen
      if (Ergebnis) {
        for (i = 0; i < Ergebnis.length; ++i) {
          var newValue = Ergebnis[i].replace(/\s/g , '·');
          newValue = newValue.replace(/"
    /' ');
          $(
    this).val($(this).val().replace(Ergebnis[i] , newValue));
        }
      }
    }); 
    Die Klasse „yui-ac-input“ bezeichnet das Taggingfeld.
    Wer mag, kann das Ganze auch on-the-fly veranstalten. Hierzu müßte man die Menge aller gematchten Hochkommata im Tagfeld auswerten und bei jeder geraden Anzahl die Ersetzung vornehmen. Vorteil: Die visuelle Rückmeldung klappt dann auch für unsere Spezialtags.

    Der dritte Streich

    Zu jeder Bookmark erlaubt Delicious die Eingabe einer Kurzbeschreibung, welche in einer Textarea erfolgt. Bei der Ansicht eingegebener Bookmarks sind aber leider alle Zeilenumbrüche verschwunden. Warum das so ist, verschweigt der Dienst. Ein Blick in den Browserquelltext zeigt jedenfalls, dass unsere Texte zwischen <div class="description"></div> stehen und auch in der Bookmarkansicht durchaus noch Zeilenumbrüche besitzten! Nur eben keine Break-Tags!
    Warum sollten wir das eigentlich nicht ändern? Auftritt von Freund Greasemonkey:

    PHP-Code:
    $('.description').each(function () {
      $(
    this).html($(this).text().replace(/(.+?)(\n)/'$1<br>'));
    }); 
    Ausblick

    Die Möglichkeiten sind in wohlstrukturieren Webapplikationen wie der vorgestellten*) fast grenzenlos, gerade wenn sie gute DOM-Knoten zum Ansprechen der benötigten Elemente bieten.
    Natürlich setzt die Performance bei aufwendigen Operationen eine Grenze, niemand möchte ja auf die Website unnötig warten müssen. In manchen Fällen wird uns besser die API weiterhelfen. So kann man bspw. zur Erfassung komplexer oder im Aufbau standardisierter Bookmarksammlungen ein eigenes Form als Erfassungsmaske mit Greasemonkey per Iframe einbinden und mit dessen Ausgabe die API ansprechen oder Felder der originalen Bookmark-Eingabe vorbelegen. Über jQuery lassen sich Ajaxaufrufe „fahren“, zusätzliche Navigationselemente einbauen und vieles weitere mehr. Davon abgesehen kann das gesamte Styling der Seite selbstredend angepasst werden.
    Wer über genug Spieltrieb verfügt, kann also weit mehr „pimpen“, als es dieses Türchen zeigen konnte. Vielleicht findet der eine oder die andere über die Feiertage ja mal etwas Zeit zum Basteln.

    Viel Spaß, Euer Nikolaus.


    *) vBulletin gehört leider nicht zu dieser Kategorie. Trotzdem findet der geneigte Leser mit etwas Suchen auch hier im Board ein paar Greasemonkey-Scripte zum Erweitern des User Interface.

Lädt...
X