HTML Title-Tag / Browser-Tab Notifications (the Facebook way)

Euch sind bestimmt schon einmal auf Facebook die Notifications aufgefallen, die Facebook euch über euren Browser Tab im Title mitteilt (in Form der Zahl an Notifications, die ihr momentan habt). Das sieht dann ungefähr so aus:

Bild Notification Title Tag Facebook

Die Manipulation des Titles im Browser-Tab könnt ihr ganz leicht mit jQuery nachbilden und euer eigenes Mini-Notification-Center bauen.

In meinem Beispiel habe ich die Notification rechts neben den Titel der Website gepackt. Ich persönlich finde, dass das schöner aussieht. Ist aber Geschmackssache, wie so ziemlich alles 😉

Nun gut, dann fangen wir einmal an. Zuerst erstellen wir eine simple HTML-Grundstruktur:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>upsession</title>
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="jquery-method.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>some text <br />
<a href="#" class="increase">increase notification</a>
<br />
<a href="#" class="decrease">decrease notification</a>
</body></html>

Was wir gleich machen, ist die jQuery-Library und unsere .js-Datei für unsere jQuery-Methode einbinden. Bitte beachtet, dass ich hier eine veraltete jQuery-Library eingebunden habe, alles aus Bequemlichkeit weil ich das so in meiner Vorlage hatte und diese Funktion keine neuere Library benötigt 😉 Just laziness 😉 jQuery liegt stand heute, 28.01.2012 in Version 1.7.1 vor, also nutzt am besten gleich die neue Version.
So, was haben wir nun. Wir haben eine HTML-Seite, die es uns ermöglichen soll die Notifications im Title der Seite per Click zu inkrementieren (erhöhen) oder zu dekrementieren (herabsetzen).

Nun brauchen wir das passende jQuery-Script dazu. Das könnte zum Beispiel so aussehen:

$(document).ready(function(){
	var n = 0;
	
	$(".increase").click(function(){
		n++;
		$("title").text("upsession ("+n+")");
	});
	
	$(".decrease").click(function(){
		n--;
		$("title").text("upsession ("+n+")");
		if (n < 1) {
			n = 0;
			$("title").text("upsession");
		}
	});
});

Damit wir keine negativen Notifications erhalten können, schließen wir das in Zeile 12 – 15 durch eine einfache if-Abfrage aus.
Ansonsten ist das Script relativ selbsterklärend. Sobald auf einen Link geklickt wird (achtet auf die Klassennamen) wird die Notification entweder inkrementiert oder dekrementiert und damit das Title-Tag abgeändert.

Das komplette Projekt könnt ihr euch hier downloaden: HTML Notifications Project Zip

Mac OS: Zip Ordner mit Passwort versehen

Falls ihr ein Zip-Archiv erstellen wollt und dieses mit einem Passwort ausstatten wollt, dann öffnet zunächst einmal euer Terminal.

Im Terminal gebt ihr dann folgendes ein: zip -e -r gewuenschterArchivname.zip pfadZuEuremOrdner

Nun müsst ihr ein Passwort eingeben, mit Enter bestätigen und noch einmal zur Verifizierung eingeben. Falls Ihr alles richtig gemacht habt, wir euer Zip-Archiv anschließend erstellt.

Das Zip-Archiv findet ihr hinterher in eurem User Root, sprich auf dem Mac vornamenachname$

Anbei noch ein Screenshot, wie es aussieht wenn ihr alles richtig macht:

Toggled Box mit HTML5 (aufklappbare Box)

Mit HTML5 werden zwei neue Tags eingeführt, mit denen Ihr eine Box mit toggle-Effekt erstellen könnt. Es handelt sich dabei um Inhalt, der erst angezeigt wird sobald ihr auf eine Überschrift oder (wie es bisher in Google Chrome realisiert ist) auf einen kleinen Pfeil klickt.


<details>
<summary>Here is some more text!</summary>
<p>Some more text for you to show. blablablablablabla....</p>
</details>

Wie gesagt, stand heute (19.01.2012) unterstützen das nur die wenigsten Browser. Ich habe es mit Chrome und Safari getestet. Chrome besitzt für <details></details> bereits eine Implementierung, Safari noch nicht.

Poly ML auf dem Mac installieren

Falls ihr euch auch in einem Informatikstudium oder Ähnlichem befindet und ihr mit Standard ML in Poly ML programmieren wollt, dann zeige ich euch kurz, wie ihr die Umgebung am einfachsten auf eurem Mac zum laufen bekommt.

Step 1:
Zuerst solltet ihr euch (falls noch nicht passiert) Mac Ports installieren (Lion Version | Snow Leopard Version).

Step 2:
Anschließend nach erfolgreicher Installation Terminal öffnen. Gebt dann folgendes ein:
sudo port install polyml 

Poly ML wird nun installiert.

Step 3 (nicht zwingend nötig aber empfehlenswert):
Gebt im Terminal folgendes ein um in Poly ML mit den Pfeiltasten navigieren zu können und um eure Eingabe-History verwenden zu können:
sudo port install rlwrap

Wenn ihr Poly ML nun im Terminal mit rlwrap poly startet anstatt nur mit poly, dann könnt ihr genau auf die besagte History- und Navigationsfunktion zurückgreifen.