TomK32

Da hat sich Google mit dem Gears Plugin ja was geniales ausgedacht. Google Gears ermöglicht es Daten von einer Website lokal zu nutzen und als erstes Anwendungsobjekt gibt es den Offline-Modus im Google Reader. Wenn man Google Gears installiert hat und im Google Reader in den Offline-Modus wechselt werden erstmal 2000 Blogposts runtergeladen, geht recht fix mit DSL. Nur die Texte aber für mich reicht das ja. Im Offline-Modus hat man jetzt den Vorteil dass man kein Internet braucht um die geladenen Blogposts zu lesen, man kann auch die anderen Funktionen wie Sharing und Starring verwenden. Sobald man dann wieder Internet hat und in den Online-Modus wechselt synchronisiert sich der Google Reader wieder und die Änderungen die man offline gemacht werden gehen auch online. Ich denke der Google Reader ist nur die erste Applikation dieser Art. Es eigent sich prinzipiell für alle Daten die nur einer oder wenige User verändern. Wenn die Daten nur gesammlt werden, also unabhängig voneinander sind, eignet sich Google Gears ebenfalls. Auf einem Wiki mit wenig Editor sollte es noch funktionieren, in der Wikipedia nicht mehr. Für ein Forum würde es sich besser eignen, auch wenn sich dann manche Antwort als etwas spät erweist (nix mehr mit First Post ;-). Ein Beispiel für (fast) unabhängige Daten wäre der Vertreter der die Bestellungen des Kunden über die ganz normale Shop-Website aufnimmt und dann später mit dem Webserver synchronisiert. Man kann über ein und das selbe (ok, erweitern muss man es schon) System arbeiten wie wenn man online wäre. Der verrückte Haufen Event- und Reiseblogger könnte unterwegs schon mal im gewohnten Blog die Beiträge schreiben, synchronisiert und veröffentlicht wird sobald mal wieder WLAN in der Nähe ist. Man arbeitet in der gewohnten Umgebung die vor ein paar Jahren noch ganz offline war, sich inzwischen ins Nezt verlagert hat und jetzt wieder den Schritt zurück ins Offline macht. Wunderbar.

Gestern hab ich bei der Recherche für eine neue Zeitschrift eine sehr schöne Spielerei mit Javascript gefunden auf der brasilianischen Inkscape-Seite (deren Quellcode extrem kacka ist). Man muss einfach im ersten Absatz über die Links streifen, also über W3C oder SVG. Zusammen mit dem Link steht nämlich auch noch versteckter Text drinnen der dann angezeigt wird wenn man drüberfährt. Die Umsetzung ist jetzt nicht so ideal, ich hätt's lieber als title-Attribut mitgegeben, dann würden die Suchmaschienen das auch nicht als Trickserei ansehen. Die andere Spielerei die ich gesehn hab war bei Deviantart. Hier hat man in einer recht niedrigen Zeile eine Box die etwas zu hoch ist. Im inaktiven Modus wird der vertikale Überstand nicht angezeigt und sogar sehr hübsch gefaded in die Transparenz. Aber sobald man über die Box fährt wird auch der Rest angezeigt. Sehr hübsch um auch noch Details anzuzeigen die visuell eher weniger Platz einnehmen sollen.

Heute bin ich auf den extrem coolen Dynamic Day Planer in SVG gestoßen. Ich bin ja schon länger am überlegen was ich denn mit SVG und Javascript so machen könnte aber auf sowas wär ich wohl nicht gekommen. Jetzt muss ich nur noch überlegen was ich selber machen könnt, vielleicht irgendein Spiel.

Ich arbeite ja in letzter Zeit recht viel mit JQuery und wie viele andere debugge ich meine scripts mit der guten alten alert-Function. Aber es gibt ein paar Alternativen die ich aufzeigen will bevor ich dann meine eigene quick'n'dirty Variante zeige. Der umtriebige Ralf Engelschall (Ich weiß noch dass ich 2000 meine Website mit WML gemacht hab) hat ein jQuery Debugging Plugin geschrieben das die Nachrichten an die Javascript debugging console schickt. Meistens wird das also Firebug sein. Das Plugin von Glyphix schickt die Nachrichten entweder an die Konsole oder macht einen Container auf. Je nachdem ob Firebug vorhanden ist. Wie gesagt wollt ich nur mal zwei ordentliche Varianten zeigen, jetzt aber zu meiner sehr schnellen, einfachen und dreckigen Methode, die aber völlig ausreicht wenn man nur mal schnell ein paar Interna wissen muss. function debug(msg) { if ($('#debug').length == 0) $('body').prepend('<div id="debug"></div>'); $('#debug').append("<br />" + msg); } Falls noch kein Container #debug vorhanden ist wird einer am Anfang des body erschaffen. Man muss dafür die length weil jQuery einem in jedem Fall ein Objekt zurückgibt und daher eine if-Abfrage auf den Query immer wahr ist. Man kann dann mit debug($('#content').width()); zum Beispiel die Breite des #content anzeigen lassen.

Wie man auf der Startseite und den Archivseiten meines Blogs sehen kann werden lange Beiträge nach dem zweiten Absatz (bzw. um genau zu sein nach dem zweiten Element, kann auch eine Tabelle oder Liste sein) abgeschnitten und nur noch ein Link zum Anzeigen des Rests gezeigt. Für die Umsetzung muss erstmal JQuery eingebunden werden und auch am HTML wahrscheinlich ein paar kleine Änderungen gemacht werden. Ich hab mal als Beispiel folgendes HTML:

<div class="multiple">
	<div class="post">
		<h2>Beitragstitel 1</h2>
		<div class="entrytext">
			<p>Erster Absatz</p>
			<ul>
				<li>Listenpunkt 1</li>
				<li>Listenpunkt 2</li>
			</ul>
			<p>Dritter Absatz</p>
			<p>Vierter Absatz</p>
		</div>
	</div>
	<div class="post">
		<h2>Beitragstitel 2</h2>
		<div class="entrytext">
			<p>Erster Absatz</p>
			<ul>
				<li>Listenpunkt 1</li>
				<li>Listenpunkt 2</li>
			</ul>
		</div>
	</div>
</div>

Und jetzt noch das JavaScript (am besten in eine eigene Datei, eh klar):

$(document).ready(
	function() {
	// es muss jeder Beitrag separat verarbeitet werden
	$('.multiple .entrytext').each(function(i) {
		// hier kann man natürlich 3, 4 oder mehr anzeigen, unten ist dann aber auch
		// eine Änderung nötig.
		// Überlegenswert wäre ein each() zu verwenden um flexibler zu sein
		if ($(this).children().length > 2) {
		// als letztes Element im .entrytext wird der Link im aufgeklappten Zustand
		// ganz unten dargestellt. Sieht einfach viel besser aus.
		$(this).append('<div class="more"><a href="javascript:;">ganzen Beitrag anzeigen</a></div>');
		// die ersten zwei Absätze werden weiter angezeigt.
		$(this).children(":first").addClass('show');
		$(this).children(":first").next().addClass('show');
		// ebenso der Link zum aufklappen
		$(this).children('.more').addClass('show');
		// und alle anderen werden versteckt. 
		$(this).children().not(".show").hide();
		} // fi
	}); // each

	// der eingefügte Link zum Aufklappen braucht noch Funktionalität
	// es ist hier möglich mehrere Beiträge komplett anzuzeigen
	$(".multiple .entrytext .more a").click(function() {
		if ($(this).parent().is('.show')) {
			$(this).parent().siblings().show("slow");
			$(this).text('Beitrag wieder zuklappen');
		} else {
			$(this).parent().siblings().not('.show').hide("slow");
			$(this).text('ganzen Beitrag anzeigen');
		}
		$(this).parent().toggleClass('show');
	});
});

Eine Variante gibt es noch, und zwar nur einen einzelnen Beitrag auszuklappen während der zuletzt aufgeklappte wieder eingeklappt wird, einfach nur oben das click() austauschen:

	$(".multiple .entrytext .more a").click(function() {
		// alle Beiträge müssen zugeklappt werden
		$(".multiple .entrytext").each(function(i) {
			if ($(this).children().length > 2) {
				$(this).children().not(".show").hide("slow");
			}
		});
		// dann auch noch den richtigen Text für den Ausklapp-Link
		$(".multiple .entrytext .more a").text('ganzen Beitrag anzeigen');

		// falls der Beitrag wieder zugeklappt wird müssen wird das auch wissen
		$(this).toggleClass("extend");
		// und tun dann entsprechend nichts
		if ($(this).is('.extend')) {
			$(this).parent().siblings().show("slow");
			$(this).text('Beitrag wieder zuklappen');
		}
	});

Die zweite Variante läuft bei mir auf der Startseite unter „ältere Beiträge“ und der Vorschau-Link verschwindet ganz wenn man drauf klickt. Aus irgendwelchen Gründen will Firefox den Link als block darstellen wenn er in einem span verschachtelt ist und daher verwende ich dort nur den Link alleine. Den Quellcode kann man sich in der green.js anschauen. Bevor noch jemand frägt „warum?“: Ganz einfach, technorati zum Beispiel holt sich gern die Startseite eines Blogs anstatt die einzelnen Blogseiten und daher ist es im Allgemeinen von Vorteil möglichst viele Beiträge auf der Startseite zu haben und nicht nur einen wie's zum Beispiel Frank Helmschrott macht (gut, er bietet noch eine alternative dazu an). Es gibt sicher noch ein paar SEO-Gründe, aber das andere ist mir eigentlich wichtiger. Es gibt sogar Wordpress-Themes die den Beitrag nicht ganz anzeigen und damit schlecht für technorati sind.

Harald Kirschner hat ein extrem schönes und cooles Beispiel dafür hergestellt was man mit den mootools (werd ich mir in der nächstesn Zeit mal genauer anschaun) alles anstellen kann. Ich muss sagen ein riesiges Hintergrundbild zu nehmen und sich dann mit JS durch die Gegend fahren zu lassen hat schon Stil.

Also manchmal überrascht es mich schon was mit JavaScript alles machen kann. Tetris in 3D: Torus