Finally, with an update we rolled out last week, (almost) all tooltips on Camping.Info look and behave similar, differing mostly in positioning and size, but not in the general look and feel. We chose the jQuery Tools Tooltip as the base for our own solution and it got us pretty far, but there were some pitfalls and scenarios that we needed to handle ourselves. This post is about what limitations we experienced and how we dealt with them. The original As you can read in the jQuery Tools Tooltip documentation, the tooltip plugin is highly configurable. It can take different elements as the tooltip for any given trigger: the value of title attribute of the trigger element the html element immediately following the trigger the html element immediately following the first parent of the trigger an arbitrary html element on the page. You can also position the tooltip pretty much wherever you want relatively to the trigger: Our adaptations Another way to chose the tooltip We found one more useful way to define the tooltip for a trigger element: if the trigger is e.g. a table cell in an html table and you don’t want to specify a static tooltip for some or all table cells but a different one for each cell or at least a number of cells, it makes sense to define the tooltip element inside the trigger (the table cell). Since this effect was not achievable extending the jQuery Tools Tooltip plugin we started changing their source: Breaking the tooltip out of some parent container We also faced some problem properly showing tooltips that needed to “break out” of some bounding box, inside which they were defined (i.e. their html markup). This problem e.g. occurred inside elements with style position: relative, which we have a few of on Camping.Info. Our first attempt was to clone the tooltip element and show the clone instead of the original. This worked in almost all cases – until we tried to attach some more behavior to elements inside the tooltip. The behavior, e.g. some click event handler that we expected to fire when clicking on some element inside the tooltip, wouldn’t execute, since we were working with the clone! So we decided to simply move the tooltip up in the DOM tree for the time it is being shown, more precisely just beneath the form tag that we have on all our pages. We create a placeholder at the place where we removed the tooltip to reinsert it again once it’s being hidden. The code we added to the show() method looks like this: … and here’s the counterpart in hide(): Now, this works quite well everywhere, independent of the position of the tooltip in the DOM tree. Global tooltip configuration Using inline static configuration One feature we quickly missed was some kind of static tooltip configuration without calling  $(...).tooltip({ settings: ... }) for every single tooltip we wanted to create or hook up, respectively. What we came up with is to use the HTML5 data attributes to define any specific configuration statically inside the trigger element’s html markup. Thus, we need to call the tooltip initialization code only once for the whole page. The configuration now looks like this: We use specific prefixes with the data attributes to make them easier to understand, e.g. data-tt-position for an attribute that is used for tooltips and jq-tt-trigger for a class that is used by some jQuery code for tooltips. To process this kind of static configuration we need some custom code that will, at some point, call the original (well, modified by now) plugin code. Unfortunately, the jQuery Tools Tooltip plugin was not designed to allow runtime configuration of the tooltip to show, but we found a way using the onBeforeShow and onHide event handlers. The basic idea is to change the global Tooltip configuration during the first method so that the tooltip we will be showing will be configured correctly, and to reset the global configuration once the tooltip has been hidden again. To achieve this, we iterate over all configuration properties that the jQuery Tools Tooltip plugin supports and search for the respective data attributes on the currently processes trigger element. One example would be the position property: to replace the default value provided by the plugin we look for an attribute that’s called data-tt-position and use its value to temporarily overwrite the default value during the onBeforeShow event handler. Using global profiles Once we had the static configuration working and started to replace all of those clumsy and overly complicated AjaxControlToolkit HoverMenuExtenders, it quickly turned out that we were copy’n’pasting the same configuration in a thousand places. This was not only ugly and violated the DRY principle, it also lead to some unnecessarily bloated html. As a solution to this maintenance nightmare we came up with profiles that comprise a set of configuration options that would else be repeated over and over again: Now, they lead to some really clean html markup: The only change from using the inline static configuration is to use the profile’s properties – everything else stays the same! Conclusion The jQuery Tools Tooltip plugin is a nice, small and highly configurable tool for easy tooltip creation and usage. In a larger web application there a few shortcomings that we’ve addressed here and which we’ve provided working solutions for. We hope to release those changes soon in its own project on our GitHub account. Happy coding!

Die üblichen 10 Ergebnisse auf Ergebnisseiten sind für mich meist unbefriedigend. Ich möchte mehr :-) Bei google lässt sich zum Beispiel unter Settings die Default Ergebnissmenge auf 100 setzen: Auch sehr schön: [aus: Simple Spark] Wobei bei mehr als 500 Ergebnissen, ist das sicher nicht mehr optimal. In diesem Fall wäre ein schnelle Auswahl sehr schön: Zeige 100 Ergebnisse Zeige 100 Ergebnisse nach (Kriterium, zum Beispiel: Bewertung) Zeige [DropDownList] Ergebnisse Wenn weniger als 250, [Zeige alle Ergebnisse] Es wäre praktisch, wenn sich diese Einstellung auf allen Seiten schnell finden lassen würde.

Das bitte als Touchscreen in den Tisch eingelassen, links und rechts von der Tastatur :-) Auch sehr schön mit einem Tablet PC. - http://bumptop.com/ Vielleicht kommt BumpTop ja noch in diesem Jahr? Die ersten sinnvollenTablet PCs gibt es ab €800 :-) [via mooo blo, via Hammet]

Das Kontext Menu in Web-Applikationen ist noch rar. Zwar gibt es vereinzelte Vertreter. Auf Songza ist nun ein besonderer zu bestaunen: Das sogenannte „Pie-Menü“ öffnet sich bei Klick auf einen Suchtreffer. Die gesamte Interaktion geschieht auf einer Seite. Ein gutes Beispiel dafür, dass trotz oder gerade wegen der Limitierungen im Web, außerordentlich effiziente und benutzerfreundliche Oberflächen sich immer weiter verbreiten.

Serchilo kann in der Grundfunktion das was Opera schon seit Jahren beherscht. Mithilfe eines vorgestellten Buchstabens läst sich eine Suche auf einer bestimmten Seite durchführen. Zum Beispiel "g hübsches kind": g steht hier für google und bedeutet, das für den Suchbegriff "hübsches kind", eine Suche direkt auf google.com durchgeführt wird. Spannend ist die Autovervollständigung die sich zeigt wenn der erste Buchstabe eingegeben wird. Hervorragend ist die Breite Liste von möglichen Suchseiten.   Serchilo bietet die Möglichkeit eigene Suchseiten zu definieren, ohne sich anzumelden. Dank an Georg Jähnig, den Potsdamer Studenten, der das Suchwerkzeug entwickelt hat :-) Achso natürlich lässt sich Serchilo natürlich mit dem Besten Browser der Welt verwenden: Opera - und zwar so. Opera öffnen mit CTR T Speed Dial anzeigen entweder mit der Maus, oder mit STRG 1 zu Serchilo navigieren Obiges sollte weniger als 1sec in Anspruch nehmen :-) Unten noch ein Screenshoot von Operas SpeedDial, das wirklich einfach zu verwenden ist. [serchilo, via basic thinking]

In seinem heute auf useit.com veröffentlichten Artikel schreibt usability-Guru Jakob Nielson, ob es sinnvoll sei, Web Designer und Developern auch usability-Tasks zu übertragen. Der Begriff "Usability" ist seit einiger Zeit ein Schlagwort der Web-Welot geworden, hat aber leider kein treffendes Äquivalent im Deutschen und bezieht sich im Wesentlichen auf Benutzerfreundllichkeit einer Web-Seite. Pros Als Hauptargumente für die Zusammenlegung der Arbeitsbereiche führt Nielson an, dass zum einen Arbeitskraft eingespart werden könne und andererseits die Glaubwürdigkeit erhöht würde, da derjenige der das Design/die Applikation erstellt auch gleichzeitig sich um deren usability kümmert. Cons Dagegen hält er, dass Spezialisten stets bessere Ergebnisse liefern und auf der anderen Seite die Objektivität im Einschätzen der eigenen Tätigkeit zu wünschen übrig. Da sich die Design/Developer-Vrogaben gegenüber den Usability-Vorgaben durchsetzen können. Fazit Es ist von massivem Vorteil, wenn man sich als Developer und Web Designer mit zumindest den Grundlagen von Usability auseinandersetzt, da man konzeptionell Dinge anders anpackt und durchdenkt. Zwar ist ein finales Überprüfen durch einen Spezialisten sicherlich eine gute Investition, jedoch denke ich gilt auch hier die 80/20-Regel. Der Spezialist wird im Fine-Tuning das ein oder andere Detail anpassen können, wenn jedoch die Applikation oder Web Seite von Grund auf nicht funktioniert, wird er dies nicht mehr richten können. Weiterführendes zu Usability (auf Englisch homepage von Jakob NielsonUsability-Forum hallwaytesting.com Leitfäden zu Usability und Accessebility "Dont' Make me Think" (link zu Amazon.de) - sehr lesenswertes Buch von Steven Krug

Da Robert und ich auch längere Zeit darüber nachgedacht hatten, einen Katalog für Web Applikationen zu bauen, freue ich mich eine Lösung zu sehen, die zwar nicht ganz dem entspricht, was wir im Hinterkopf hatten, jedoch eine durchaus funktionale und solide Lösung darstellt: Die englisch-sprachige Seite zum Suchen und Finden von web-basierten Applikationen: simplespark.com. Features Das wohl bestechendste feature ist der unglaublich Umfang der Datenbank von Web Applikationen, die Simple Spark als Grundlage hat. So findet man für den Suchbegriff "collaboration" unglaubliche 143 Einträge. Dabei sind Klassiker wie basecamp, wikis wie Wetpaint oder eher grafisch-orientierte Tools wie thinkature oder conceptshare, stets mit screenshots. Darüber hinaus werden die verschiedenen Applikationen nach Kategorien sortiert, die im Moment noch ein wenig willkürlich erscheinen. Man kann Web Applikationen in einem persönlichen Ordner speichern und bewerten und sogar eigene Vorschläge hinzufügen. Finden von Web Applikationen Zentral für den Erfolg der Seite ist jedoch die Frage, ob Nutzer, die sich kostenfrei anmelden können, zu den verschiedenen Web Applikationen Berichte schreiben und Bewertungen abgeben werden (derzeit noch. Denn ohne Einschätzungen anderer Nutzer oder von Redakteuren sind 143 Suchergebnisse schlicht und ergreifend eine unüberschaubare Menge und die richtige Applikation auszuwählen wird schier unmöglich. Zumal derzeit auch noch keine Sortierfunktion eingebaut ist. Fazit Insgesamt sehr ansprechend gestaltete Seite, grafisch und usability technisch. Ob sie sich durchsetzen kann, liegt an der Beteiligung der User. Ich habe meine erste Bewertung schon geschrieben ;) andrej

Fast nie löst Werbung bei mir den, “das will ich haben Reflex” aus. Die neue iPhone Werbung erreicht genau das. Erstaunliche dabei ist, das einzige was sie dafür tun muß ist das Produkt zu zeigen.  In Amerika soll das iPhone schon ab Ende Juni verfügbar sein. (robert)

Seit ein paar Wochen verwenden wir Trac als Collaboration Tool bzw. Ticket-System und Issue-Tracker. Nach dem ich schon Erfahrungen mit Gemini, Basecamp und Jira sammeln durfte - bin ich von Trac eher mäßig begeistert. Zumal wir eines der Hauptfeatures - die Subversion Integration - nicht verwenden. Auch das Trac-Wiki ist nicht in Gebrauch - da wir ja unser eigenes haben. Wirklich positiv ist das kostenlose Hosting - das von Assembla.com angeboten wird. Mal schauen vielleicht brauche ich einfach noch ein wenig "Gewöhnungszeit". Derweil bleibt mein persönlicher Favorit immer noch Jira, welches aber mit $1200 Einstiegspreis allerdings ein wenig zu teuer für unseren Geldbeutel ist. Beispiele für Jira im echten Einsatz sind bei Jetbrains(Reshaper) und NHibernate zu bewundern. Achso für Open Source Entwicklungen ist Jira kostenfrei :-) (robert)