6.3 Integration von Prospector in Carrot 2
6.3.2 Anpassung der Web-Oberfl¨ ache
Bei der Integration des Algorithmus wurde dieIdentit¨at des Benutzers zun¨achst noch nicht ber¨ucksichtigt, da sie f¨ur die grundlegende Implementierung keine Rolle spielt. Auf der Ebene der Web-Oberfl¨ache kann diese jedoch festgestellt und zur Parametrisierung der Ergebnis-verarbeitung herangezogen werden. Ebenfalls relevant ist hier die Anzeige der zus¨atzlichen Informationen (z. B. Relevanzen, Cluster), die Prospector f¨ur jedes Ergebnis liefert. F¨ur die Modellierung der Benutzerinteressen musste in der Oberfl¨ache ein Weg geschaffen werden, R¨uckmeldungen zu den Ergebnissen zu geben, die Affinit¨aten der Benutzer zu den Gruppen-modellen einzustellen und das Modell zu betrachten und zu ver¨andern. Auch das Umreihen der Ergebnisse nach einem bestimmten Gruppenmodell wurde in der Web-Oberfl¨ache imple-mentiert.
Die Entwickler von Carrot2hatten bereits einige Elemente dynamischer Web-Programmierung integriert, beispielsweise f¨ur die Anzeige und Bedienung der Cluster-Hierarchie. Auch bei der Integration von Prospector sollte auf aktuelle Technologien gesetzt werden, um eine funk-tionell und optisch ansprechende Benutzeroberfl¨ache zu schaffen. Zu diesem Zweck wurde insbesondere JavaScript verwendet, um im Browser Code auszuf¨uhren und nicht immer mit HTTP-Anfragen auf Server-Ressourcen zur¨uckgreifen zu m¨ussen.
JavaScript-Bibliothek
Mit zwei Problemen haben JavaScript-Entwickler immer wieder zu k¨ampfen: Inkompatibi-lit¨aten zwischen Browsern und sehr allgemeine, auf niedriger Ebene angesiedelte Program-mierschnittstellen. Das erste Problem l¨asst sich mit den Unterschieden bei der Unterst¨utzung von Hyper-Text Markup Language (HTML) und Cascading Style Sheets (CSS) vergleichen.
In beiden F¨allen sind f¨ur die einzelnen Browser(versionen) und Betriebssysteme Fallunter-scheidungen n¨otig, die den Code schlechter lesbar machen und die Wartbarkeit herabsetzen.
Bei Funktionalit¨aten, die in allen Browsern funktionieren, handelt es sich oft um den kleins-ten gemeinsamen Nenner, und es tritt Problem zwei auf: derartige Funktionen erledigen nur sehr grundlegende und feingranulare Aufgaben. Umfangreichere Operationen im Document Object Model (DOM) sind meist nur in bestimmten Browsern verf¨ugbar oder m¨ussen selbst programmiert werden.
Abhilfe k¨onnen hier JavaScript-Bibliotheken bzw. Toolkits wie Yahoo! User Interface Library (YUI)3, jQuery4 und dojo5 schaffen. Sie bieten eine große Zahl von h¨aufig ben¨otigten aber auch exotischen Funktionalit¨aten. Außerdem kapseln sie die Unterschiede zwischen den Brow-sern und bieten so eine einheitliche Schnittstelle. Eine weite Verbreitung stellt sicher, dass sie in den unterschiedlichsten Konfigurationen und Umgebungen getestet werden. Bei selbst entwickelten Bibliotheken k¨onnte man hier nur schwer mithalten und h¨atte einen Qualit¨ ats-nachteil.
F¨ur die Entwicklung an Prospector wurde die freie BibliothekjQuery eingesetzt [jQu08]. Sie ist sehr schlank gehalten (nur ca. 15 KB groß), man kann aber neue Funktionalit¨aten durch Erweiterungen hinzuf¨ugen. Nichtsdestotrotz bietet auch schon die Basisversion umfangreiche M¨oglichkeiten in den Bereichen:
• Selektoren: Elemente der Seite k¨onnen mit CSS3-Selektoren und grundlegenden XPath-Ausdr¨ucken ausgew¨ahlt werden.
• Attribute: Zugriff auf und Ver¨anderung von HTML-Attributen, CSS-Klassen, innerem HTML-Code, Text und Wert von Elementen.
• DOM-Baum durchlaufen: Suchen (Kinder, Eltern, Geschwister, Nachkommen, . . . ) und Filtern (Index, Untermenge, Komplement, . . . ) von Elementen.
3http://developer.yahoo.com/yui
4http://www.jquery.com
5http://www.dojotoolkit.org
0-12% 13-25% 26-38% 39-50% 51-63% 64-76% 77-89% 90-100%
Abbildung 6.6:Darstellung der Relevanz-Prozentzahl mit leeren und gef¨ullten Balken
• DOM-Baum ver¨andern: Einf¨ugen (innerhalb/außerhalb, vorher/nachher, Umschließen, Ersetzen), Entfernen und Kopieren von Elementen.
• CSS: Zugriff auf und ¨Anderung von CSS-Eigenschaften.
• Ereignisse: (De-)Registrieren von Funktionen zur Ereignisbehandlung.
• Effekte: Anzeigen/Verstecken, Ein-/Ausrollen, Ein-/Ausblenden von Elementen und be-nutzerdefinierte Animation von Eigenschaften.
• Asynchronous JavaScript and XML (AJAX): HTML-Code, Scripts und JavaScript Ob-ject Notation (JSON)-Dokumente asynchron laden bzw. Daten senden.
jQuery unterst¨utzt mit Internet Explorer ab Version 6, Mozilla Firefox ab Version 2, Apple Safari ab Version 2 und Opera ab Version 9 alle g¨angigen Browser. Ausschlaggebend war auch, dass sich mit dieser Bibliothek im Gegensatz zu anderen (z. B. Yahoo! User Interface Library (YUI)) sehr kompakter Code schreiben l¨asst, der durch diese K¨urze aber nicht an Lesbarkeit verliert, sondern im Gegenteil intuitiver und mehr wie nat¨urlichsprachliche S¨atze zu lesen ist.
Relevanzanzeige
Um dem Benutzer ein Gef¨uhl zu geben, wie hoch die von Prospector berechnete Relevanz eines Ergebnisses ist, wurde bisher immer die genaue Prozentzahl neben dem Ergebnis angezeigt.
Es stellte sich jedoch die Frage, ob diese von den Benutzern verstanden w¨urde. Ohne das Wissen, dass 50% Indifferenz, alles dar¨uber mehr und darunter weniger Interesse bedeutet, ist die Prozentzahl nicht intuitiv zu interpretieren.
Aus diesem Grund wurde beschlossen, die Relevanz durch eine Reihe leerer bzw. gef¨ullter Balken aufsteigender Gr¨oße darzustellen, ¨ahnlich der Anzeige der Signalst¨arke bei Mobiltele-fonen. Um eine ausreichend feine Abstufung zu erhalten, wurde die Zahl der Balken mit sieben festgelegt. In Abbildung 6.6 sind alle acht m¨oglichen Zust¨ande und die Relevanz-Bereiche, in denen sie auftreten, dargestellt.
Bei der Implementierung gab es noch zwei weitereAnforderungen. Als erstes sollten die Balken, die nicht gef¨ullt sind, trotzdem sichtbar sein, um f¨ur die gef¨ullten einen Referenzpunkt zu bilden. Durch die Verwendung eines hellen Grautons wurde dies erreicht. Als zweites sollte sichergestellt werden, dass ab einer gerundeten Relevanz von 51% vier der sieben Balken gef¨ullt sind. Damit soll eine klare und f¨ur den Benutzer sichtbare Unterscheidung zwischen den nicht klassifizierten oder nicht durch Bewertungen betroffenen Ergebnissen, die alle die
Abbildung 6.7:Anzeige eines Ergebnisses mit Anpassungen f¨ur Prospector
neutrale Relevanz 50% erhalten, und jenen, die bereits eine kleine positive Relevanz besitzen, getroffen werden. Dividiert man die gerundete Relevanz-Prozentzahl durch den experimentell ermittelten Wert 12,75, so ergibt sich die korrekte Zahl der gef¨ullten Balken.
Implementiert ist die Anzeige der Relevanz in FancyDocumentSerializer, jener Serialisie-rungskomponente, die f¨ur die Erzeugung des HTML-Codes zur Pr¨asentation der Ergebnisliste verantwortlich ist. F¨ur jedes Ergebnis wird zuerst aus demRawDocument-Objekt mit getSco-re() die Relevanz extrahiert. Diese wird in eine ganzzahlige Prozentzahl umgewandelt und damit die Anzahl der gef¨ullten Balken berechnet. Die Balken werden als HTML-Bildverweise (img-Element) im Code eingebunden, wobei f¨ur jede Balkengr¨oße je eine gef¨ullte und eine ungef¨ullte Version zur Verf¨ugung steht. ¨Uber das title-Attribut der HTML-Elemente wird die Relevanz in Form einer Prozentzahl als Tooltip definiert und so beim Verweilen mit der Maus ¨uber den Balken angezeigt. Ein Beispiel daf¨ur, wie die Relevanzanzeige schlussendlich in der Ergebnisliste dargestellt wird, ist in Abbildung 6.7 zu sehen.
Themenklassifizierungen
Durch die Komponente zum Clustern (siehe 6.3.1) werden die Klassifizierungen der Ergebnis-se in einer Hierarchie zusammengefasst und durch die Web-Anwendung von Carrot2 automa-tisch links neben der Ergebnisliste als Baum angezeigt. Dennoch waren f¨ur Prospector einige Anpassungen in der Oberfl¨ache n¨otig.
Befindet sich in Carrot2 der Mauszeiger ¨uber dem Titel eines Ergebnisses, so werden in der Cluster-Hierarchie die Namen all jener Cluster gelb hinterlegt, in denen das Ergebnis einge-ordnet ist. Durch Bet¨atigen eines Symbols rechts neben dem Titel kann diese Hervorhebung dauerhaft gemacht werden. Sie bleibt dann f¨ur ein Ergebnis sichtbar, auch wenn der Mauszei-ger nicht mehr ¨uber dessen Titel positioniert ist.
Auch f¨ur Prospector erschien diese Funktionalit¨at n¨utzlich, um dem Benutzer in der Menge der Klassifizierungen zu zeigen, wo ein Ergebnis eingeordnet ist. Allerdings bedurfte es einiger Anderungen und Erweiterungen. Schon bisher wurde beim Ergebnis der Pfad zu jenem Thema,¨ in dem ein Ergebnis klassifiziert war, angezeigt. Diese Anzeige, die fr¨uher bei einigen Suchma-schinen ebenfalls in der Ergebnisliste zu finden war, wurde auch in der Carrot2-Weboberfl¨ache eingebaut. Die einzelnen Teile des Pfades sind durch
”>“-Symbole getrennt, um die Ordnung der Themen im Pfad hervorzuheben (siehe Abbildung 6.7).
Anstatt wie bisher beim Titel werden die Themen, in die das jeweilige Ergebnis klassifiziert ist, in der Cluster-Anzeige gelb hinterlegt, wenn sich der Mauszeiger ¨uber dem Klassifizierungs-pfad befindet. Das Symbol neben dem Titel zum dauerhaften Hervorheben wurde entfernt.
Stattdessen wird diese Funktion aktiviert bzw. deaktiviert, wenn man auf den Pfad klickt.
Gleichzeitig wird dieser Pfad in der Klassifikationshierarchie vollst¨andig ge¨offnet. Realisiert ist dies durch eine rekursive JavaScript-Funktion. Diese startet beim untersten Knoten des Pfades und arbeitet sich bis zur Wurzel hoch. Auf jeder Ebene
”klappt“ sie den Zweig aus und macht so die Kindknoten sichtbar. Ein nochmaliges Klicken des Pfads bei einem Ergebnis bewirkt das Gegenteil und schließt die ausgeklappten Zweige des Baums.
Die Klassifizierungen im ODP sind oft sehr feingranular, und daher sind die Pfade meist sehr lang. Dabei kommt es vor, dass ab einer gewissen Ebene in der Klassifizierungshierarchie keine Verzweigungen mehr auftreten. Um dem Benutzer in diesem Fall zu ersparen, jede Ebene einzeln auszuklappen, wurde folgender Mechanismus implementiert: beim Ausklappen einer Ebene wird so lange weiter in die Tiefe der Hierarchie ausgeklappt, solange der Kindknoten die selbe Zahl an Dokumenten enth¨alt. F¨ur jedes Thema in der Hierarchie ist die kumulierte Zahl der Dokumente, die in ihm oder einem untergeordneten Thema klassifiziert sind, bekannt. Mit der zuvor genannten Heuristik lassen sich so Verzweigungen ebenso erkennen wie auch, wenn die Menge der verbleibenden Dokumente auf unterschiedlichen Ebenen klassifiziert ist.
Benutzer ber¨ucksichtigen
Die bisher beschriebenen Anpassungen und Erweiterungen ber¨ucksichtigten die Identit¨at des Benutzers noch nicht. Um die Ergebnisse personalisieren zu k¨onnen, muss diese jedoch in allen Phasen der Interaktion bekannt sein. Zu diesem Zweck wurde, wie von Gauch et al.
[GSCM07] vorgeschlagen und auch in den vergangenen Versionen von Prospector verwendet, auf eine Kombination aus expliziter Anmeldung und Nachverfolgung durch Cookies gesetzt.
Registrieren Die Erstanmeldung erfolgt ¨uber einen Registrierungs-Dialog, in dem der Benut-zer seinen BenutBenut-zernamen und ein Passwort w¨ahlen kann. Um den Benutzern gr¨oßtm¨ogliche Anonymit¨at zu bieten, werden noch im Browser mit JavaScript die Message-Digest algorithm 5 (MD5)-Hashwerte dieser beiden Angaben gebildet und nur diese zum RegisterServlet
¨ubertragen. Dort wird der Benutzer mittels schon vorhandenem Code aus vergangenen Ver-sionen von Prospector registriert, sofern er nicht schon existiert. Ein leeres Benutzermodell wird angelegt und seine Affinit¨aten zu den Gruppen werden mit 0 festgelegt. Wichtige Neue-rung: durch das Hashen kann nicht einfach auf einen leeren Benutzernamen oder ein leeres Passwort ¨uberpr¨uft werden. In beiden F¨allen muss zur Validierung der Benutzereingaben mitd41d8cd98f00b204e9800998ecf8427e, dem MD5-Hashwert der leeren Zeichenkette ver-glichen werden.
Einloggen Das Anmelden l¨auft ¨ahnlich ab, nur dass hier das LoginServlet die Korrekt-heit des angegeben Passworts pr¨uft. In beiden F¨allen wird anschließend ein Cookie mit dem
Hashwert des Benutzernamens als Identifikation zur¨uckgegeben. Mit diesem kann sich der Benutzer bei der weiteren Interaktion automatisch authentifizieren. Selbstverst¨andlich han-delt es sich hierbei um keine hundertprozentig sichere L¨osung, die vor dem ¨Ubernehmen eines fremden Benutzerprofils sch¨utzt. Durch das Erzeugen eines Cookies mit dem Hashwert des Benutzernamens der Zielperson k¨onnte dies schnell bewerkstelligt werden. Sollte das Pass-wort (auch als Hashwert) nicht im Cookie gespeichert werden, so w¨urde Abhilfe schaffen, einen eindeutigen Zufallswert als Authentifizierungsmerkmal am Server zu generieren und im Cookie zur¨uckzugeben. Diese Information m¨usste f¨ur jeden Benutzer gespeichert und beim Ubermitteln des Cookies gepr¨¨ uft werden. Da es sich bei Prospector um ein Forschungssystem handelt, hatte dies jedoch nicht Priorit¨at, m¨usste aber vor einer Ver¨offentlichung entsprechend implementiert werden.
Ausloggen Beim Abmelden vom System wird vomLogoutServletdas Cookie vom Rechner des Benutzers entfernt und eine automatische Weiterleitung auf die Index-Seite von Prospector gemacht. Sowohl zum Registrieren und Anmelden als auch f¨ur die Best¨atigungsr¨uckfrage beim Abmelden werden modale, mit JavaScript erzeugte Dialoge verwendet. jQuery bietet hier entsprechende Bibliotheksfunktionen und erlaubt auch ein Ver¨andern des Aussehens dieser Dialoge mit CSS.
Dialoge Der Einsatz von derartigen Dialogen wurde beschlossen, weil sie im Gegensatz zu HTML-Seiten keine neue Seite laden und beim Schließen den bisherigen Seiteninhalt ohne Ver-z¨ogerung wieder sichtbar machen. Dies ist insbesondere dann interessant, wenn der Benutzer versehentlich den Dialog ge¨offnet hat, oder nach einer erfolglosen Anmeldung wieder zur¨uck zu bereits angezeigten Ergebnissen will. Voraussetzung, dass dies alles funktioniert, ist eine asynchrone Kommunikation mit den Servlets, wie sie AJAX bietet. Sowohl beim Registrieren als auch beim Anmelden werden die Daten durch eine JavaScript-Funktion im Hintergrund
¨ubermittelt und erst bei der R¨uckmeldung des Servlets der Inhalt der Seite ver¨andert. So ist es auch m¨oglich, Fehlermeldungen direkt und ohne Verz¨ogerungen im Dialog anzuzeigen.
Personalisierung Beim eigentlichen Suchvorgang m¨ussen die in den Modellen gespeicherten Interessen des angemeldeten Benutzers nun ber¨ucksichtigt werden. Zu diesem Zweck wird bei einer Anfrage f¨ur die Ergebnisliste (und nicht bei einer f¨ur die Klassifikationshierarchie) im QueryProcessorServlet zu Beginn die Information im Login-Cookie abgefragt. Wurde ein entsprechender Benutzer gefunden, werden seine Daten (Modell, Affinit¨aten) geladen. Diese werden unter einem festgelegten Namen als einer jener Parameter gespeichert, die dem Con-troller der Verarbeitungskette ¨ubergeben werden. Diese Parameter k¨onnen von jeder Kompo-nente gelesen werden, und somit hat auch dieProspectorLocalFilterComponentdie n¨otigen Informationen zum Benutzer.
Ergebnisanzeige Auch bei der Anzeige der Ergebnisse muss ber¨ucksichtigt werden, ob ein Benutzer angemeldet ist oder nicht. Die Relevanzen werden nur bei angemeldeten Benutzern
angezeigt, ebenso wie die Bedienelemente zum Bewerten. Gesteuert wird dies im FancyDocu-mentSerializer, der Serialisierungskomponente f¨ur die Ergebnisliste. Der Zugriff (Betrachten und Ver¨andern) auf das Benutzermodell sowie die Einstellungen mit den Affinit¨aten zu den Gruppen ist auch nur f¨ur angemeldete Benutzer m¨oglich und sinnvoll. Die Unterscheidung wird hier bei der Transformation des serialisierten Extensible Markup Language (XML)-Codes zum HTML-Code der gesamten Such- und Ergebnisseite von Carrot2 getroffen. Abh¨angig da-von, ob anhand der Authentifizierungsinformation (d. h. im Cookie) in der HTTP-Anfrage ein angemeldeter Benutzer festgestellt werden konnte, wird dessen Name in der XML-Definition dieser Seiten gespeichert. Ist ein solcher Name definiert, so wird bei der Transformation an-derer Code (z. B. Link
”Ausloggen“) erzeugt als bei einem anonymen Benutzer (z. B. Link
”Einloggen“).
Bewerten
Bisher war das Bewerten eines Ergebnisses in Prospector nur w¨ahrend des Betrachtens der entsprechenden Seite im dar¨uber angezeigten Bewertungsbereich m¨oglich. Die Evaluierung in den Niederlanden hat jedoch gezeigt, dass diese M¨oglichkeit nur unzureichend gen¨utzt wird.
Mehr Zuspruch fand das negative Bewerten durch Bet¨atigen der
”Unsuitable“-Schaltfl¨ache ne-ben dem jeweiligen Ergebnis (siehe 5.2.2). Aus diesem Grund wurde entschieden, Bewertungen nur mehr ¨uber die Ergebnisliste zu erm¨oglichen und dort auch positive R¨uckmeldungen zu registrieren.
Als Symbole f¨ur die Schaltfl¨achen zum Bewerten wurden eine gr¨une, mit dem ausgestreckten Daumen nach oben zeigende geballte Hand f¨ur positive und eine rote Hand mit dem Dau-men nach unten f¨ur negative Bewertungen des Ergebnisses gew¨ahlt (siehe Abbildung 6.7 auf Seite 93). Entsprechende Tooltips, die beim Verweilen mit dem Mauszeiger ¨uber den Symbo-len erscheinen, erkl¨aren die Bedeutung n¨aher:
”Mehr Ergebnisse wie dieses“ f¨ur positive und
”Passt nicht auf meine Suche“ f¨ur negative Bewertung. Ist das Ergebnis nicht klassifiziert, so kann es auch nicht bewertet werden. In diesem Fall sind die Symbole inaktiv, werden grau dargestellt und der Tooltip weist darauf hin, dass eine Bewertung nicht m¨oglich ist, weil das Ergebnis in keiner Themenkategorie ist.
Anand und Mobasher [AM05] nennen ein Problem, das auch in Studien gezeigt wurde: ohne greifbaren Nutzen f¨ur die Benutzer betrachten diese mehr Ergebnisse als sie schlussendlich bewerten. Da die Adaption in Prospector von den Bewertungen lebt, sollte sichergestellt werden, dass die Benutzer auch wirklich bewerten. Aus diesem Grund
”pulsieren“ die Daumen-Symbole leicht, wenn der Benutzer vom Betrachten eines Ergebnisses zur Liste zur¨uckkehrt und das Ergebnis noch nicht bewertet hat. Dies geschieht auch beim Verwenden der Seiten-Vorschau. Diese Funktion war bereits in Carrot2eingebaut und wird durch das Lupen-Symbol rechts neben dem Titel aktiviert bzw. deaktiviert (siehe Abbildung 6.7 auf Seite 93). Die Seite des entsprechenden Ergebnisses wird dabei in einem IFRAME, das unterhalb des Snippets positioniert ist, geladen und erlaubt so eine Vorschau auf den Inhalt des Ergebnisses.
Realisiert wurde das Pulsieren der Daumen-Symbole mithilfe der Animations-Funktionen von jQuery. Vier mal werden diese von 100% Deckkraft auf 30% umgeblendet und wieder zur¨uck.
Dieser Effekt erschien hinreichend unaufdringlich, kann den Fokus aber trotzdem auf die Schaltfl¨achen zum Bewerten lenken. Ausgel¨ost wird das Pulsieren nach dem Betrachten eines Ergebnisses. Dies kann auf vier verschiedene Arten geschehen:
• Ergebnis in neuem Fenster ge¨offnet: Carrot2 verf¨ugte bereits ¨uber ein Symbol mit einem Pfeil nach rechts oben, gleich neben dem Titel, welches beim Bet¨atigen die Ergebnisseite in einem neuen Fenster ¨offnet (siehe Abbildung 6.7 auf Seite 93). In JavaScript wurde f¨ur diesen Klick eine Ereignisbehandlungsfunktion registriert. Sie registriert ihrerseits eine Funktion, die genau einmal ausgef¨uhrt wird, wenn das aktuelle Fenster wieder den Fokus erh¨alt, und dann die Daumen-Symbole nach 500ms alle 400ms pulsieren l¨asst.
Schließt der Benutzer nach dem Betrachten der Ergebnisseite deren Fenster, so wird dieses Fokus-Ereignis ausgel¨ost.
$ (" . lnw ") . c l i c k ( f u n c t i o n ( e ) {
$ ( w i n d o w ) . one (" f o c u s ", f u n c t i o n () { f l a s h R a t i n g B o x ( e . target , 500 , 40 0) ; r e t u r n f a l s e;
}) ; }) ;
• Ergebnis im Hintergrund ge¨offnet: viele Browser unterst¨utzen das ¨Offnen eines Links im Hintergrund, beispielsweise in einem neuen Tab, ohne den aktuellen zu verlassen.
Zur Erkennung einer derartigen Operation, die teilweise durch einen Klick mit dem Mausrad aktiviert wird, muss man am Link eine Ereignisbehandlungsfunktion f¨ur das Bet¨atigen der Maustaste (mousedown) registrieren, da hier kein herk¨ommliches Klick-Ereignis erzeugt wird.
$ (" . lsw ") . m o u s e d o w n ( f u n c t i o n ( e ) {
$ . c o o k i e (" c l i c k e d ", g e t R e s u l t I D (thi s) ) ;
$ ( w i n d o w ) . one (" blu r ", f u n c t i o n () {
$ ( w i n d o w . top ) . one (" f o c u s ", f u n c t i o n () { f l a s h R a t i n g B o x ( e . target , 100 , 40 0) ; r e t u r n f a l s e;
}) ;
r e t u r n f a l s e; }) ;
r e t u r n tru e; }) ;
Wichtig ist, dass erst beim Verlassen des aktuellen Fensters/Tabs (blur) ¨ahnlicher Co-de wie im vorangegangenen CoCo-de-Beispiel ausgef¨uhrt wird. Wenn der Benutzer n¨amlich mehrere Links im Hintergrund ¨offnet, w¨urden die Daumen-Symbole ansonsten schon
fr¨uhzeitig pulsieren. Tests haben gezeigt, dass das Pulsieren bei der R¨uckkehr von im Hintergrund ge¨offneten Ergebnissen nicht hundertprozentig funktioniert. Die Erkennung des Aktivierens des Fensters/Tabs mit der Ergebnisliste ist nicht zuverl¨assig und auch vom Browser abh¨angig. Da es sich aber um keine grobe Beeintr¨achtigung der Kernfunk-tionalit¨at handelt, wurde diesem Mangel nicht viel Relevanz beigemessen.
• Ergebnis im selben Fenster ge¨offnet: bet¨atigt der Benutzer den Link einfach mit der Maustaste, so wird die Ausf¨uhrung von JavaScript gestoppt und alle Ereignisbehand-lungsroutinen gehen verloren. Ein Ansatz wie in den vorangegangenen beiden Beispielen ist also nicht m¨oglich. Die L¨osung ist, ein Cookie mit der Identifikation des angew¨ahlten Ergebnisses zu speichern und dieses bei der R¨uckkehr zur Ergebnisliste wieder auszule-sen.
Das Speichern erfolgt im vorigen Code-Beispiel unter dem Cookie-Namen clicked.
Kehrt der Benutzer zur Ergebnisliste zur¨uck, so wird deren JavaScript-Code erneut ausgef¨uhrt. In dem Teil zur Initialisierung der Seite wird dabei das Cookie ausgelesen und ¨uberpr¨uft, ob es Daten enth¨alt (siehe n¨achstes Code-Beispiel). Ist dies der Fall, wird es zur¨uckgesetzt, in der Ergebnisliste an die Position des betrachteten Ergebnisses gescrollt und das Pulsieren aktiviert.
var c l i c k e d R e s u l t = j Q u e r y . c o o k i e (" c l i c k e d ") ; if ( c l i c k e d R e s u l t ) {
j Q u e r y . c o o k i e (" c l i c k e d ", nu ll) ;
j Q u e r y . s c r o l l T o (" # d " + c l i c k e d R e s u l t , { o f f s e t : -90 , o n A f t e r : f u n c t i o n () {
f l a s h R a t i n g B o x ( $ (" # r a t i n g _ b o x " + c l i c k e d R e s u l t ) , 500 , 400 ) ; }
}) ; }
• Vorschau ge¨offnet/geschlossen: sowohl beim ¨Offnen als auch beim Schließen der Seit-nvorschau pulsieren die Daumen-Symbole, um den Benutzer darauf hinzuweisen, die soeben gesehene Seite zu bewerten.
Das eigentliche Bewerten beim Bet¨atigen eines der Daumen-Symbole erfolgt asynchron. An das RateServlet werden dabei der Index des Ergebnisses in der Liste und die Bewertung
Das eigentliche Bewerten beim Bet¨atigen eines der Daumen-Symbole erfolgt asynchron. An das RateServlet werden dabei der Index des Ergebnisses in der Liste und die Bewertung