okNotify - kleine Nachrichtenfenster mit jQuery

1. Stop des Timeouts bei MouseOver
2. X austauschbar gestalten
3. Klick auf Meldung macht sie zu
4. Links

Nachdem ein Kollege auf der Arbeit ein Projekt mit "pNotify" veredelt hatte, war ich auch für Yogalehrer-Online an solch einer schicken Möglichkeit der Nachrichtenübermittlung an den User interessiert.

Ein "Notifier" ersetzt im Prinzip die Standard Javascript alert()-Funktion. Der Alert ist unglaublich praktisch zu programmieren (ein klassischer Einzeiler), sieht hässlich aus und man muss ihn erst anklicken, bevor man weitermachen kann. Er stört. Außerdem sieht er je nach Browser anders aus, ein Grauen für Webdesigner.

Deshalb hatte ich bei Yogalehrer-Online bisher die Meldungen als Extra-Div an der Stelle, an der sie auftraten, in die Seite geschrieben. Das hat den Vorteil, dass niemand warten oder irgendwo draufklicken muss. Es hat den Nachteil, dass die Seite für immer mit der Nachricht verhunzt ist. Na ja, ich hatte eine jQuery-onclick-Funktion draufgelegt, aber wer kommt schon auf die Idee, so eine Meldung wegzuklickern? Außerdem wurde aufgrund der manchmal recht langen Seiten die Meldung ganz oben ausgegeben, aber nach dem Neu-Laden der Seite (z.B. nach dem Speichern) wurde per #hash ganz nach unten gesprungen - die Meldung wurde gar nicht bemerkt.

Die diversen Benachrichtigungs-PlugIns für jQuery beheben das Problem in gefälliger Weise:

• Sie lassen unterschiedlich gestylte Nachrichten zu. (einige)
  
• Die Nachrichten gehen nach einer einstellbaren Zeit von selber weg.
  
• Die Nachrichten stören den Bildaufbau der Seite nicht. (meistens)
• Sie holen den User da ab, wo er steht, erscheinen also im Sichtbereich des Fensters.
  

Der pNotify schied gleich von vorneherein aus, weil mein Kollege mir nach einem Monat gesagt hatte, dass das Überwachungsprogramm im Internet-Explorer beim Dauerbetrieb mit ständig aufpoppenden Nachrichten nach zwei Tagen einen Speicherüberlauf des IE verursachte. Mit Hängen und Absturz. Im Firefox trat das Problem nicht auf.

Also machte ich mich auf die Suche und fand ein kleines, schickes Teil: Den Notifier. Nach der Anpassung des Javascripts auf Yogalehrer-Online (lila Basismeldung und ein paar andere Sachen) war ich sehr zufrieden. Ich stellte alles online und war zwei Tage lang von mir begeistert. Bis ich die Seite im IE aufrief: Kein Notifier. Nichts. Nur das kleine, gelbe Warndreieck unten links in der Ecke: Javascript kaputt. Der Versuch der Reparatur klappte soweit, dass irgendwann das Warndreieck weg war und im IE einer von drei erwarteten Notifys oben links (anstatt oben rechts) in der Ecke angezeigt wurde. Er wurde allerdings nur halb angezeigt, horizontal in der Mitte war er abgeschnitten. Das reichte.

Mir war klar, dass der Fehler bei mir lag: Ich hatte alles mit dem Firefox getestet und entwickelt. Der Firefox ist aber absolut ungeeignet für Entwicklung: Mit dem Firefox klappt meistens alles. Und es gibt tolle Plugins, die die Webentwicklung unterstützen. Anscheinend sind die Entwickler diverser jQuery-Plugins ebenfalls dieser Meinung. Denn mittlerweile scheint es vielen Programmierern wurscht zu sein, ob die Sachen auch im IE laufen. Viele Plugins laufen entweder nur mit dem IE oder nur mit dem FF. Wenn man aber will, dass alles in beiden Browsern funktioniert, muss man eine ganze Weile suchen. Im Falle des Notifiers wäre das Desaster von Anfang an verhindert worden, hätte ich die Webseite des Herstellers mit dem IE besucht. Denn auch auf der Homepage vom Notifier funktioniert es auch nur mit dem FF. Und im IE kommt nach ein paarmal Klicken unten links ein gelbes Warndreieck, aber kein Notify...

So machte ich mich also erneut auf die Suche nach einem schicken Meldungs-Plugin. Diesmal wurde zur Ermittlung eines würdigen Kandidaten nur mit dem IE gesurft. Heute morgen um 04:30 Uhr war der Probant ermittelt:

OkNotify von OkBreathe.

Er war der einzige, der unter IE und FF lief und dabei den eigenwilligen Seitenaufbau von YO nicht störte. Außerdem waren nicht alle Meldungen schwarz, man konnte sie auf einfache Weise bunt gestalten (Fehler rot, Erfolg grün usw.). Viele Pluginentwickler finden "schwarz" toll, weil es auf dem Mac einen "Growl"-Notifier gibt. Den muss man als Mac-User natürlich fürs Web nachbauen. Aber Schwarz macht mich irgendwie müde, ich will es bunt haben.

Was mich am OkNotify störte:

• Kein Stop der Ablaufzeit beim Überfahren der Meldung mit der Maus.
  
• Häßliches Text-"X" als Schließknopf.
  
• Das "X" musste genau getroffen werden, um die Meldung zu schließen, ich wollte aber per Klick auf die Meldung selbst die Nachricht weghauen können.

Und es gibt optische Unterschiede zwischen IE und FF:

• Der FF macht "runde Ecken" (gaaaaaanz wichtig! Das neue CSS3 scheint sich hauptsächlich mit runden Ecken und Rahmengestaltung zu befassen.)
  
• Der FF macht einen Schatten unter die Meldung.
  
• Der IE macht beides nicht. Er hat eckige Ecken und keinen Schatten.
  

Aber die Sache mit den Ecken und den Schatten sind verschmerzbar, wichtig ist, dass die Sache browserübergreifend funktioniert und leicht konfigurierbar ist. Die Entscheidung fiel für den okNotifier.

Also mussten 3 Dinge noch getan werden, um den okNotify YO-tauglich zu machen:

1. Stop des Timeouts bei MouseOver
2. X austauschbar gestalten
3. Klick auf Meldung macht sie zu

1. Stop des Timeouts bei MouseOver

Hier wird im Prinzip der Timer gelöscht und beim Verlassen des Objekts wieder neu gestartet. Damit man einen Timer zum Löschen hat, muss man sich das von setTimeout zurückgelieferte Handle merken. Ich kam zum Schluss, mir das Handle im "opts-Array" zu merken.
Es gibt also eine neue Option: timeoutid.

An einer Stelle im Quelltext des Plugins wird überprüft, ob opts.stay "false" ist. Mit "stay" wird festgelegt, ob die Meldung nach einer gewissen Zeit von alleine wieder verschwindet. Ist "stay" gleich "true" dann bleibt die Meldung sowieso stehen. In den bereits vorhandenen IF-Zweig, der "stay" auf "not true" überprüft (!opts.stay) baue ich die Änderungen ein.

Änderungen im Zweig "if(!opts.stay)" (s. Bild):

1. Entgegennahme des Timeout-Handles in opts.timeoutid
   
2. Einbau der Hoverfunktion, die mit clearTimeout das Handle löscht und nach dem Mouseout ein neues Handle zurückschreibt.

2. X austauschbar gestalten

Als erstes wird wieder das opts-Array um einen Konfigurationswert erweitert: Diesmal heißt er "closetext". Als Vorgabe wird ein großes "X" eingetragen. (s. Bild 2, hier wird "closetext" mit dem Wert "timeoutid" zusammen eingekringelt).

Mit der Zeile

$('.ui-notification-close', $notice).html(opts.closetext);

wird im Link mit der Klasse "ui-notification-close" der Notiz der bereits vorhandene Text "X" durch den Inhalt aus "opts.closetext" ersetzt. Eigentlich könnte man anstelle der jQuery-Funktion "html()" auch "text()" verwenden, aber wenn man ein Bild einbauen möchte, dann ist das kein Text, sondern eine HTML-Anweisung.


3. Klick auf Meldung macht sie zu
Obwohl diese Aufgabe eine der einfacheren scheint, ist es mir nicht gelungen, den Klick auch für den IE zu realisieren. IE-Nutzer müssen im Moment noch genau zielen, um die Notizen vorm Timeout abzuschießen. Vermutlich liegt der Hund in der Benutzung der Variable $notice begraben. Wie auch immer, die Änderung funktioniert im FF problemlos.


Nachdem die Änderungen vorläufig abgeschlossen waren, musste nur noch das CSS angepasst werden. Leider funktionieren die okNotifys "out-of-the-box" nur dann, wenn beide CSS-Dateien, die im Paket mitgeliefert werden, eingebunden sind. Die Datei "screen.css" ist notwendig und zerhaut erstmal gründlich all das, was man selbst als "Design" der Webseite angerichtet hat. Deshalb habe ich die wenigen, notwendigen Teile von screen.css in der Datei jquery.okNotify.css integriert.

Links:

Originalversion von okBreathe:

Webseite des Herstellers okBreathe
Demo
Download tar.gz - Paket vom Hersteller

Version von Yogalehrer-Online:

jquery.okNotify.css (enthält Teile von screen.css)
jquery.okNotify.js (ungepackte Version zum Entwickeln, Ändern)
jquery.okNotify.min.js (gepackte Version für den Betrieb)

Disclaimer:

okNotify ist nicht von Peter Klauer entwickelt. Es wird empfohlen, das Plugin nur von der Webseite des Herstellers zu beziehen. Der Artikel bezieht sich auf den Entwicklungsstand des Plugins zum 5. März 2011. Je älter dieser Artikel wird, um so wahrscheinlicher ist es, dass die hier vorgeschlagenen Änderungen in der gleichen oder besserer Weise im Original-Plugin realisiert wurden.

RSS Feed - Schööön!

Es ist Sonntag und ich habe ein dummes Gefühl wegen den RSS-Feeds. Sie funktionieren, sicher. Aber sie sehen nicht gut aus. Es hatte lange gedauert, bis ich mich wieder an diese Baustelle erinnerte. Schließlich war es nicht einfach, sie zu machen. Und wir werben damit, dass wir die Kurse und Termine der Yogalehrer automatisch ver-RSS-en. Nach einem Jahr häufen sich die Zugriffe auf die RSS-Feeds, das sagen meine Logs. Ich habe die Angewohnheit, im Log die am häufigsten aufgerufenen Dateien nachzuklickern. Die RSS-Dateien gehören jetzt auch dazu. Und deshalb das dumme Gefühl.

Was mir nicht gefällt:

• Überschriften und Termindatum sind in der selben Zeile
• Bei Kursen ist die Bezeichnung vorne und das Datum hinten.
• Bei Terminen ist die Bezeichnung hinten und das Datum vorne.
• Am schlimmsten ist die Reihenfolge: Alles ist durcheinander. Ein Kurs am 20.10. um 20:00 Uhr wird gefolgt von einem Kurs am 18.10. um 16:00 Uhr. Danach der 21.10. usw.

Wir speichern im Prinzip nur drei Datums-bezogene Daten über einen Kurs:
Den Kursanfang, den Wiederholungsabstand und die Anzahl der Wiederholungen.

Was mir gefällt:

• Durch beharrliche Addition der Tagessekunden (86400) * Wochenabstand nähern wir uns dem letzten Kursdatum eines Kurses, dass noch nicht vorbei ist. Und schwupps, wird ein Item für den RSS-Feed daraus gemacht. Immerhin, unsere Yogalehrer haben keine inaktuellen RSS-Feeds. Meiner Meinung nach ist der hässlichste RSS-Feed der, der abgelaufene Daten beinhaltet.

Diese Annhäherung ist aber auch das Problem: Die Sortierung der Kurse stimmt beim Auslesen nicht mehr.

Als erstes habe ich mich hingesetzt und das Einfache gemacht:

Ordnung in die Überschriften gebracht und das Datum jeweils unter den Title gesetzt.

Blöd aber, dass sehr viele Yogis ungültige Links in der Kursbeschreibung angeben. Ich will aber, dass der erste Klick ins Feed auch funktioniert. Also muss ein verlässliches Linkziel her, damit der Feed nicht das Vertrauen des Abonnenten verliert. Außerdem profitiert Yogalehrer-Online.de davon, wenn die Klicks zu uns kommen.

Die Zieldatei kurs_termin.php zu basteln war relativ einfach, alle Einzelteile dazu sind schon da. Jetzt hatte ich ein verlässliches Linkziel, eine schöne RSS-Liste und immer noch ein Riesendurcheinander. Und die Bereitschaft, über das Durcheinander nachzudenken.

Die Lösung kam nach ein paar Minuten:

Assoziative Arrays.

Genau. Eigentlich reicht eines.

Ich musste nur ein paar Zeilen hinzufügen:

$kursitems = array();

und dann einfach das gesamte, fertige Item mit dem ISO-Datum als Key ins Array werfen ($c ist der addierte Sekundenhaufen aus Anfangsdatum plus ein paarmal 86400):

$kursitems[ date('Y-m-d H:i',$c ) ] =

'<item>
<title><![CDATA[Kurs: '. $k['caption'].']]></title>
<link>'.$www.'?kurs='.$k['id_kurs'].'</link>
<description xml:space="preserve"><![CDATA[
'.
$gd->date('D., d.m.y H:i', $c ).' '.

' Uhr bis '.$k['endezeit'].' Uhr: '.
$br.$br.

nl2br( ( $k['description'])).
$br.$br.($i + 1).'. Kurseinheit von '.$kanzahl.
$br.'Ort: '.$k['ortname'].$br.$br.$br.
']]></description>
<pubDate>'.$gmc.'</pubDate>
</item>
';

Das gleiche mit den Terminen, ein bischen anders aufgebaut aber zack - in das selbe Array $kursitems damit! Das ist der Witz an der Sache: Unterschiedliche Items, aber ein immer gleich aufgebauter Key: Ein leicht sortierbares ISO-Datum im Format "JJJJ-MM-TT HH:mm".

Und am Schluß nach dem Schlüssel mit ksort() sortieren:

ksort( $kursitems );

und danach der Reihe nach alles ausgeben:

foreach( $kursitems as $item )
{
echo $item;
}

Schöööön! Wunderbar sortierte RSS-Feeds.

Naja, das Vor- und Nachbereiten des Feeds habe ich mal außen vor gelassen, aber die Hauptsache war ja das Sortieren.

Jetzt haben unsere Yogis nicht nur aktuelle RSS-Feeds, sondern auch schöne und ordentlich sortierte.

Das dumme Gefühl ist weg, die Freude über das Ergebnis hält an.

Warum habe ich es nicht gleich so gemacht?

Wahrscheinlich, weil ich damals so viel mit dem RSS an sich und dem mod_rewrite des Apache zu tun hatte, um die PHP-Datei als RSS-Feed auszugeben. Als erstes muss bei mir alles funktionieren. Später irgendwann darf es dann auch gut aussehen.

Danke an die PHP-Jungs, die an assoziative Arrays gedacht haben.


Bis demnächst,

Peter

Yogalehrer bei yogalehrer-online.de

Auf der Internetseite http://www.yogalehrer-online.de können sich Yogalehrer kostenlos mit einer Visitenkarte oder kostenpflichtig mit einer eigenen Webseite präsentieren.
Yogalehrer sind eingeladen sich in die kostenlose, offene Yoga Liste einzutragen. Im Internet wird wird man über das Portal yogalehrer-online.de optimal gefunden.

Die eigene Webseite trägt der Yogalehrer als Link ein und/oder auch Kurse und Termine, die seine Teilnehmer als RSS-Feed abonnieren können. Nach der Anmeldung erhält er einen eigenen Zugriff auf seine Informationen. Er ist dann jederzeit in der Lage seine Daten zu aktualisieren.

Platz zur Selbstdarstellung (5000 Zeichen) ist in dieser kostenlosen Visitenkarte ebenfalls vorhanden.