Weblog - Michael Jendryschik » onion.net

Blick unter die Haube: Funktionsweise meiner Glossareinbindung

Michael Jendryschik — Tue, 17 Aug 2010 20:42:36 +0000

Ein bis zwei Mal im Monat erhalte ich eine E-Mail mit der Frage, wie ich die kleinen Tooltipps umgesetzt habe, die erscheinen, wenn man einen Glossareintrag mit der Maus überfährt, beispielsweise den Begriff CSS. Erst vergangene Woche wurde ich wieder gefragt:

»Ihre Begriffserklärungen kleben sozusagen am Mauszeiger fest. Wenn dieser sich bewegt, dann bewegen sich die Fenster mit. Zudem öffnen sie sich am Rand des Fensters stets nach innen, sodass immer der komplette Inhalt sichtbar ist. Geht das ausschließlich mit XHTML und CSS oder benötige ich dafür JavaScript?«

Dieser Artikel wirft einen kurzen Blick unter die Haube dieser Website und bietet eine Schritt-für-Schritt-Anleitung zum Nachmachen. Zum Einsatz kommen XHTML, das jQuery-Skript jquery.glossary.js und ein wenig CSS.

Zum Seitenanfang

Die Idee

Im Rahmen der Arbeit an meiner Einführung in XHTML, CSS und Webdesign entstand ein umfangreiches Glossar, also eine Liste von Wörtern mit sprachlichen Erläuterungen. Ein technisches Glossar wie meines erläutert die Terminologie eines technischen Sachgebietes mit sachlichen Definitionen, die den richtigen Gebrauch dieser Fachausdrücke und deren eindeutiges Verständnis sichern sollen. Das Glossar beinhaltet eine Vielzahl von Begriffen, die in der weitgefassten Themenwelt der Webentwicklung beheimatet sind.

Ich bin seit jeher der Ansicht, dass man Dinge und Sachverhalte nur verstehen kann, wenn man ihren Namen und die Namen ihrer Bestandteile kennt. Aus diesem Grund lege ich so viel Wert auf die richtige Anwendung von Fachterminologie und versuche Fachbegriffe zu erklären, wenn ich sie erstmalig verwende.

Dazu bieten sich Hyperlinks an: Das erste Auftreten eines Glossarbegriffs wird zum Hyperlink, und wenn Sie diesem folgen, dann gelangen Sie zur Erklärung des Begriffs. Diese muss nicht lang sein – vielleicht handelt es sich nur um ein oder zwei Sätze. Ich habe mich bemüht, kurze und prägnante Definitionen zu finden. Daher auch die Idee mit dem Tooltipp: Wenn Sie den verlinkten Glossarbegriff mit dem Mauszeiger berühren, erscheint am Mauszeiger ein kleines Fenster mit der Erklärung – ist sie zu lang, wird sie abgeschnitten. Das Fenster orientiert sich an der Position des Mauszeigers und erscheint abhängig von der Position zum Fensterrand mal auf der einen, mal auf der anderen Seite des Mauszeigers.

Eine Spezialbehandlung ist erforderlich, wenn es sich bei Glossarbegriffen um Abkürzungen oder Akronyme handelt: In diesem Fall steht nicht der Glossarbegriff selbst, sondern dessen ausgeschriebene Bedeutung im Titel des Tooltipps, also beispielsweise nicht »CSS«, sondern »Cascading Style Sheets« – siehe den ersten Absatz dieses Artikels.

Zum Seitenanfang

Glossarbegriffe auszeichnen

Glossarbegriffe sind Links, die zwei Eigenschaften erfüllen: Sie haben die Klasse glossary-term und ein title-Attribut, das die vollständige Begriffserklärung enthält.

WordPress ist seit einigen Jahren das Weblog- und Content-Management-System für Blogs sowie kleine und mittlere Websites, vor allem in Deutschland.

Der zweite Glossarbegriff im folgenden Beispiel zeigt die Auszeichnung eines Akronyms als Glossarbegriff: Der Anker umschließt das Akronym einfach. Die Auszeichnung von Abkürzungen (abbr) verläuft analog.

Jede Webseite ist über mindestens einen URI adressierbar.

Zum Seitenanfang

Glossar-Tooltipps erzeugen

Die Tooltipps mit den Erklärungen der Glossarbegriffe erzeugt ein jQuery-Skript, das Lars Corneliussen entwickelt hat und bei bitbucket.org hostet. Das Skript tut folgendes:

Es leert die title-Attribute der Glossaranker sowie eventuell darin enthaltener acronym- oder abbr-Elemente, damit die Standard-Browsertooltipps unsere Glossar-Tooltipps nicht überlagern.
Es erzeugt die Glossar-Tooltipps als div-Elemente mit der Klasse glossary-description und fügt sie über $('body').append($div); am Ende des body-Elements vor dem schließenden ein. Die hide()-Funktion sorgt dafür, dass die Tooltipps zunächst nicht sichtbar sind.
Die Glossar-Tooltipps enthalten eine Überschrift und die Beschreibung. Das Skript befüllt die Überschrift entweder mit dem Glossarbegriff selbst oder, wenn es sich um ein Akronym oder eine Abkürzung handelt, mit dem Inhalt des title-Attributs des acronym- bzw. abbr-Elements, sofern dieses vorhanden ist. Das ist sinnvoll, da das title-Attribut die ausgeschriebene Fassung des Akronyms bzw. der Abkürzung enthält.
Wird der Glossarbegriff mit dem Mauszeiger berührt, blendet das Skript den dazu gehörigen Tooltipp ein und kümmert sich um dessen Positionierung unter Berücksichtigung der Mauszeigerposition und dem Abstand zum Browserfenster.

;(function($) {
var _settings = {
  descriptionClass:"glossary-description"
}
$.fn.glossify = function (settings)
{
  settings = _settings;
  // pregenerate
  for( var i = 0; i < this.length; i++)
  {
    var g = this[i];
    var $g = $(g);
    g.glossTitle = g.title;
    g.title = "";
    var $subElement = $g.find('acronym, abbr');
    if ($subElement.length) {
      caption = $subElement[0].title;
      $subElement[0].title = "";
    }
    else
      caption = $g.text();
    g.$glossElement = makeGloss(settings, caption, g.glossTitle);
  }
  this.mouseover(function glossover(ev){
    this.$glossElement.show();
    followTheMouse(ev, this.$glossElement);
  });
  this.mouseout(function() {this.$glossElement.hide();});
  this.mousemove(followTheMouse);
}
function makeGloss(settings, caption, text)
{
  var $div = $('
')
    .css('position', 'absolute')
    .addClass(settings.descriptionClass)
    .hide();
  $div.find('strong').text(caption);
  $div.find('span').text(text);
  $('body').append($div);
  return $div;
}
function followTheMouse(ev, $el)
{
  var $el = $el ? $el : this.$glossElement
  // relative mouse position
  var rx = ev.clientX;
  var ry = ev.clientY;
  // absolute mouse position
  var x = ev.pageX;
  var y = ev.pageY;
  var xOffset = 10;
  var yOffset = 10;
  // ip if not enough space
  if ( (rx + $el.width() + xOffset) > $(window).width() )
  {
    x -= $el.width();
    xOffset *= -1;
  }
  if ( (ry + $el.height() + yOffset) > $(window).height() )
  {
    y -= $el.height();
    yOffset *= -1;
  }
  $el.css("left", x + xOffset);
  $el.css("top", y + yOffset);
}
})(jQuery);

Eingebunden wird das Skript über:

$(function(){ $('a.glossary-term').glossify(); });

Die Änderungen am Document Object Model müssen wir berücksichtigen, wenn es um das Styling der Glossarbegriffe und vor allem der Glossar-Tooltipps geht. Daher sollten wir uns einmal anschauen, wie das Skript das Beispiel aus Listing 2 verändert:

Jede Webseite ist über mindestens einen URI adressierbar.

Webseite Dokument, das mit einem Benutzeragenten von einem Webserver abgerufen werden kann. Bestandteil einer Website. Besteht zumeist aus strukturiertem Text und Multimediaelementen.

Uniform Resource Identifier Zeichenfolge, die zur Identifizierung einer abstrakten oder physikalischen Ressource dient. Wurde mit RFC 1630 im Juni 1992 von Tim Berners-Lee im Rahmen seines Projekts World Wide Web am CERN eingeführt. Aktuell ist RFC 3986 vom Januar 2005. Ein URI ist entweder ein URL, ein URN oder beides.

Zum Seitenanfang

Tooltipps in Form bringen

Wir haben jetzt das Markup, wir haben die Funktionalität, fehlt noch das Styling. Nur wenige CSS-Regeln sorgen für die richtige Darstellung der Glossarbegriffe und der Tooltipps.

Glossarbegriffe erscheinen, anders als normale Hyperlinks, in Schriftfarbe, einem sehr dunklen Grau. Der Unterstrich fällt weg, dafür spendieren wir den Links unten einen gepunkteten Rahmen. Die zweite Regel sorgt für die Darstellung eines Ost-Pfeils vor den Glossarbegriffen. Die weiteren Regeln kümmern sich um die Breite, Farben, Rahmen und weitere Eigenschaften des Tooltipps.

a.glossary-term { color: #444; background-color: transparent; text-decoration: none; border-bottom: 1px dotted; } a.glossary-term:before { content: "\2192\00A0"; font-size: 1.1em; } /* Glossar-Tooltipp */ .glossary-description { width: 300px; color: inherit; background-color: white; border: 2px solid #806554; font-size: 1em; line-height: 1.5; z-index: 2; } .glossary-description strong, .glossary-description span { display: block; padding: 4px 8px; } .glossary-description strong { color: white; background: #806554; }

Zum Seitenanfang

Umständlich und unpraktisch?

Vielleicht fragen Sie sich: Nette Funktion, aber wer macht sich denn die Mühe, auf seiner gesamten Website Glossarbegriffe auszeichnen und aktuell zu halten? Die Frage ist berechtigt, wahrscheinlich macht das niemand – ich auch nicht.

Glossarverwaltung im onion.net-Editor

Mein Weblog betreibe ich mit WordPress, den Großteil der Website hingegen mit onion.net, also alles, was nicht unterhalb von jendryschik.de/weblog liegt. onion.net verfügt über eine großartige Glossar-Erweiterung, die vor der Auslieferung der Website alle Texte parst und die Glossar-Auszeichnungen automatisch ergänzt. Ich schreibe nur die Texte, onion.net kümmert sich um den Rest. Performance-Einbußen gibt es durch das Parsing keine, denn sobald ich einen Text ändere, werden alle Fragmente invalidiert, die diesen Text verwenden, und neu im Cache abgelegt. Das bedeutet in diesem Fall konkret:

Ändere ich einen Artikel, wird dieser und die Webseite, auf der er verwendet wird, invalidiert. Dabei schaut onion.net, ob ich (neue) Glossarbegriffe verwende und berücksichtigt diese entsprechend, wenn der Text neu geparst und die Webseite neu zusammengesetzt und gecacht wird.

Ändere ich einen Glossarbegriff, invalidiert onion.net alle Texte, aktualisert sie und alle Webseiten, die die Texte verwenden, und baut den Cache entsprechend neu auf.

Das ist auch der Grund, weshalb im Blog nahezu keine Glossarbegriffe ausgezeichnet sind, auch in diesem Artikel nicht, denn für WordPress habe ich keine entsprechende Funktion implementiert und ich müsste alle Glossarbegriffe redundant per Hand auszeichnen.

Bei der Website der itemis AG haben wir die Funktion noch um eine weitere Komponente ergänzt. Ich kann nicht davon ausgehen, dass alle Online-Redakteure stets daran denken, Akronyme und Abkürzungen als solche zu markieren – ich tue es ja selbst nicht konsequent. Also pflegen wir über den onion.net-Editor, die Redaktionsoberfläche, nicht nur Glossarbegriffe, sondern auch Akronyme und Abkürzungen. onion.net verteilt die passenden abbr-Tags (auf acronym verzichten wir) automatisch. Eine super Sache, die ich für meine Website eigentlich mal übernehmen sollte. ;-)

Zum Seitenanfang

Kommentare? Anmerkungen?

Ich mag die Integration meines umfangreichen Glossars und finde die Glossar-Tooltipps nützlich, informativ und hübsch. Ich werde häufig darauf angesprochen, viele wollen eine ähnliche Funktion auf ihren Webseiten haben.

Wie gefällt Ihnen die Glossarfunktion? Verweilen Sie mit dem Mauszeiger auf den Links und lesen Sie die Erklärungen?

Hier lesen ja auch Experten verschiedener Disziplinen der Webentwicklung mit, unter anderem Experten für Barrierefreiheit und Skripting bzw. speziell jQuery. Ist die Lösung technisch robust? Wie sieht es mit der Barrierefreiheit aus? Die Erklärungen sind per Klick auf den Glossar-Link erreichbar, es werden also keine unnötigen Barrieren aufgebaut, oder doch? Ist die Entfernung der title-Attribute ein Problem? Wir haben weder beim Markup, noch beim Skript explizit auf Barrierefreiheit geachtet. Könnte WAI-ARIA die Zugänglichkeit der Glossarfunktion entscheidend verbessern?

Ich freue mich auf Ihre Anmerkungen, Hinweise und Tipps und lade dazu ein, die Lösung weiterzuverwenden.

Einführung in onion.net: Screencasts bei YouTube

Michael Jendryschik — Tue, 08 Dec 2009 15:54:11 +0000

Vor meiner derzeitigen Anstellung bei der itemis AG war ich bei der GETIT GmbH in Dortmund beschäftigt, einem E-Business-Dienstleister und Hersteller des Content-Management-Systems onion.net. Ich habe selbst an der Entwicklung von onion.net mitgewirkt und zahlreiche Projekte mit dem System realisiert.

Als ich das Unternehmen verlassen habe, war onion.net nicht viel mehr als ein internes »Dienstleistungstool«, aber mittlerweile hat es sich zu einem eigenständigen Produkt entwickelt. Vor kurzem hat Bernd Burkert, Produktmanager bei GETIT, einige Screencasts bei YouTube eingestellt, die onion.net und die Arbeit mit diesem System zeigen. Allerdings ist YouTube etwas unübersichtlich und die richtige Reihenfolge der Screencasts nicht so ganz offensichtlich. Ich habe mir daher die Mühe gemacht, das Material ein wenig sortiert und kommentiert.

Zum Seitenanfang

Einführung in die Arbeit mit onion.net

Im diesem dreiteiligen Tutorial zeigt Bernd Burkert in wenigen Schritten den Aufbau einer kleinen Zitatsammlung, gibt einen Einblick, wie erfasste Daten über XSL-Transformationen in HTML »übersetzt« werden und wie die Oberfläche des onion.net-Editors und der Erfassungsmasken individualisiert werden kann.

Folge 1: Zitatsammlung erstellen, Informationsmodell festlegen (Teil 1 und Teil 2)

Die erste Folge des Tutorials zeigt den Aufbau einer Zitatsammlung in einem neu installierten onion.net-System. Zunächst werden in der Schemaverwaltung des onion.net-Editors Objekttypen für Zitate und Zitatsammlungen erstellt. Daraus generiert der onion.net-Editor automatisch die Pflegemasken, über die der Redakteur die Zitate erfasst und über Zitatsammlungen zusammenstellt.

An dieser Stelle ist die Einführung in den Richtext-Editor interessant, die einige Möglichkeiten der Inhaltserfassung zeigt. Mir gefällt übrigens nicht, dass Tabellenkopfzellen fett und kursiv markiert und nicht als th ausgezeichnet werden. Möglich ist dies aber, wie man an der Schaltfläche unten rechts erkennen kann.

Folge 2: Zitatsammlung erstellen, Transformationen entwickeln (Teil 1 und Teil 2)

Die zweite Folge führt in XSL-Transformationen mit onion.net ein und zeigt, wie schnell und unkompliziert Entwickler die erfassten Daten als HTML ausgeben können. Dabei wird eine Transformation immer einem Objekttyp zugeordnet. Sie versteht sich als objektorientierte Methode, die Entwickler wie in der Programmierung üblich durch Ableitungen erweitern und Methodensignaturen parametrisieren können.

Folge 3: Zitatsammlung erstellen, Editor individualisieren (Teil 1 und Teil 2)

Die dritte Folge zeigt, wie Administratoren oder Entwickler die Pflege im onion.net-Editor mit wenigen Handgriffen durch lokalisierte Bezeichner, zusätzliche sortierbare Listenansichten und übersichtliche Icons verbessern können. Dieser Schritt erhöht den Komfort bei der Arbeit mit dem onion.net-Editor für Redakteure enorm. Wie Sie den onion.net-Editor in beliebigen weiteren Sprachen lokalisieren können, sehen Sie im Screencast Lokalisierung der Pflegemasken in weiteren Sprachen.

Ein weiterer Screencast zeigt, wie Sie den Richtext-Editor anpassen können.

Zum Seitenanfang

Screencasts für Informationsarchitekten

Neben dem dreiteiligen Tutorial für Webentwickler stellt Burkert zahlreiche weitere Screencasts zur Verfügung. Darunter sind folgende für Informationsarchitekten interessant, die sich tiefer über die Datenmodellierung mit onion.net informieren möchten.

Objektorientierte Erweiterung der Datentypen

Dieser Screencast zeigt, wie Entwickler die in den ersten drei Folgen aufgebaute Zitatsammlung erweitern können. Ein Objekttyp Filmzitat wird hinzugefügt und die Transformationen sowie der Editor angepasst.

Erweiterung des Datenmodells

In diesem Screencast werden Zitate um ein Element für die Erfassung der Zitatquelle erweitert. Die Aktualisierung der Bestandsdaten lässt sich übrigens automatisieren, sodass es bei einer Menge von einigen Hundert Zitaten nicht unbedingt notwendig ist, alle auszuleihen, zu ändern und wieder zurückzugeben.

Der Screencast Datenkonsistenz zeigt darüber hinaus, dass es nicht möglich ist, Objektdefinitionen so zu verändern, dass Bestandsdaten ungültig werden.

Einschränkung simpler Datentypen

Am Beispiel der Zitatverwaltung zeigt dieser Screencast, wie ein Entwickler simple Datentypen einschränkt. Das ist eher eine kurze Einführung in die Möglichkeiten von XML Schema, aber dennoch oder gerade deswegen interessant zu sehen.

Strukturelle Integrität und Kindschemata

Dieser Screencast räumt alle Zweifel beiseite, falls Ihnen noch nicht klar geworden ist, dass onion.net über die Definition von Kindschemata für Ordnung sorgt und der Informationsarchitekt bestimmen kann, welche Objekte unterhalb welcher Objekte liegen können.

Module erstellen und verteilen

Objekttypen, angelegte Daten, Transformationen und Konfigurationen können in ein Modul zusammengefasst, als ZIP-Archiv exportiert und in ein anderes onion.net-Projekt importiert werden. Der Screencast Zukunftsfähigkeit durch XML zeigt ergänzend, wie das Archiv aufgebaut ist und wie Entwickler über diesen Weg onion.net-Daten in andere Systeme importieren können.

Zum Seitenanfang

Screencasts für Redakteure

Die folgenden Screencasts zeigen, wie einfach sich Inhalte über den onion.net-Editor einstellen und bearbeiten lassen. Das einzige Manko hierbei ist der Editor an sich: Er läuft derzeit nur im Internet Explorer! Dass das ein Unding ist, ist den onion.net-Entwicklern schon seit Jahren bewusst. Leider ist noch keine Alternative in Sicht.

Paralleles Arbeiten in mehreren Fenstern

Die Arbeit mit dem onion.net-Editor ist nicht auf ein Fenster beschränkt. Stattdessen können Redakteure beliebig viele Fenster öffnen, parallel arbeiten und Inhalte von einem Fenster ins andere kopieren und verschieben.

Exklusive Bearbeitungssperren

Wenn ein Redakteur Inhalte im onion.net-Editor bearbeiten möchte, muss er das Objekt ausleihen. Dadurch ist es für die Bearbeitung durch andere Redakteure gesperrt, sodass parallele Änderungen sich nicht gegenseitig stören können und nicht derjenige Redakteur »gewinnt«, der zuletzt speichert.

Referenzielle Integrität

Interessant für Redakteure und Informationsarchitekten: onion.net stellt zu jeder Zeit sicher, dass alle Referenzen innerhalb des Systems konsistent sind. Das bedeutet, dass es keine internen toten Links auf einer mit onion.net erstellten Website geben kann, und darüber hinaus, dass Webentwickler sich darauf verlassen können, dass Objekte, auf die sie sich in ihren Transformationsmethoden beziehen, auch tatsächlich vorhanden sind.

Volltext- und Metadatensuche

onion.net unterstützt Redakteure durch eine leistungsfähige Suche, die sie unter anderem auf Pfade (wo soll gesucht werden), Objekttypen (was soll gesucht werden), Status, Bearbeiter, Ersteller und Zeiträume einschränken können.

Metadaten und Versionierung

Jede Änderung an einem Objekt wird in der Versionshistorie archiviert und kann von dort wieder hergestellt werden. Darüber hinaus werden strukturelle Änderungen protokolliert.

Papierkorb

Der Papierkorb des onion.net-Editors ist ein durchsuchbares Archiv, in dem Löschvorgänge aller Redakteure protokolliert werden. Gelöschte Objekte können wiederhergestellt werden.

Zum Seitenanfang

Weitere Screencasts

Die übrigens Screencasts geben einen Überblick über die Benutzer- und Rechtverwaltung, den Imageserver und die SharePoint-Einbindung, mit der ich allerdings noch nicht gearbeitet habe.

Benutzer- und Rechtverwaltung

Das onion.net-Rechtemanagement ist gruppenbasiert. Der Benutzerverwalter definiert Gruppen, die typische Aufgabenstellungen des Systems widerspiegeln. Die Rechte legt er für die Gruppen fest. Anschließend weißt er Benutzern eine oder mehrere Gruppen zu. Welche Objekte ein Benutzer sehen, anlegen, bearbeiten oder löschen darf, ist abhängig von den Rechten, die er aufgrund seiner Gruppenzugehörigkeit besitzt.

Bilder mit dem onion.net-Imageserver vereinheitlichen

Es ist ein typisches Problem auf den meisten Webseiten, Bildgrößen und -formate konsistent zu halten. onion.net bietet mit dem Imageserver ein optionales Modul, mit dem Entwickler Bilder skalieren, bearbeiten und manipulieren können.

Integration von Microsoft SharePoint: CMS Inhalte in Web Parts anbieten und SharePoint-Inhalte im CMS verwenden

SharePoint ist ein Webportal mit Microsoft Office SharePoint Server als Portal und Windows SharePoint Services als Informationsspeicher bzw. Repository. Diese Screencasts zeigen, wie onion.net-Inhalte für die Nutzung in Microsoft SharePoint als Web Parts bereitgestellt werden und wie Inhalte aus SharePoint mit onion.net verwendet werden können.

Auf der onion.net-Website gibt es übrigens noch weitere Videos, die zum Teil wirklich beeindruckend sind. Das Video zu InSite Editing gehört in diese Kategorie: Es zeigt, wie das Farbschema einer Website aus den Farben des Logos abgeleitet werden kann, und darüber hinaus weitere Funktionen des ImageServers. Das ist sehenswert!

Zum Seitenanfang

Hinweis in eigener Sache

Wenn Sie sich die Screencasts angeschaut haben und onion.net für Ihre eigene Website interessant finden, dann gestatten Sie mir bitte einen Hinweis: Seit einiger Zeit wenden wir bei der itemis AG unsere Vorgehensmodelle auch auf die Entwicklung von webbasierten Portalen an. onion.net kann dabei Teil der Werkzeugkette sein. Oder wir setzen Websites komplett mit onion.net um wie beispielsweise unser eigenes Corporate Portal. Wir bieten Ihnen einen Einsteiger-Workshop für modellbasierte Portale an und geben Ihnen die Möglichkeit, die Vorteile in der Praxis zu testen. Wenn Sie mehr erfahren möchten, dann nehmen Sie Kontakt zu mir auf.