Ich finde das Thema spannend und wichtig, kann aber mangels Betroffenheit nicht mitreden.

Nachtrag: ich habe mich von Alexander überreden lassen, seine Implementierung zu nutzen. Sie hatte den eindeutigen Vorteil, daß sie eine Tastaturbedienung des Effektes ermöglichte, was mein ursprünglicher click-Event leider nicht tat.

Marco Zehe hat in seinem Blog freundlicherweise beschrieben, welche Elemente welche Attribute bekommen müssen. Diese Technik ist nur sinnvoll und notwendig beim Einsatz von Javascript. Ich möchte im Folgenden beschreiben, welche Änderungen ich vorgenommen habe, um das Ziel zu erreichen.

Die Klapplisten haben drei zu beachtende Aspekte:

1. Die Listencontainer sollen zusammengeklappt sein, wenn die Seite läd. Dies soll aber nur dann passieren, wenn Javascript aktiv ist, denn schließlich benötige ich Javascript zum Öffnen der Container.
2. Die Container sollen separat auf- und zuklappbar sein. Es soll keine gegenseitige Abhängigkeit herrschen.
3. Das Auf- und Zuklappen der Listen soll sich dem Screenreader mitteilen.

Es versteht sich von selbst, daß der Code einfach, semantisch und logisch sein soll.

Wenn die Seite läd, lasse ich mittels Javascript eine Klasse js an das HTML-Element hängen:

<script type="text/javascript"> document.documentElement.className += "js"; </script> 

Danach sorge ich mittels CSS dafür, daß die betreffenden Listen ausgeblendet sind. Durch die Kaskade über die Klasse js sorge ich dafür, daß die Listen nur im Falle der Existenz von Javascript ausgeblendet werden. Denn nur dann haben sie eine Chance, wieder eingeblendet zu werden.

<style type="text/css" media="screen">
	.js .toggle > ul { display: none;}
</style>

Die Container mit den Listen sind wie gewünscht einfach und logisch aufgebaut, was angesichts des einfach strukturierten Inhalts auch kein Wunder ist. Ein DIV-Container umfaßt eine Überschrift und eine Liste. Der Container wird benötigt, um den Kontext für das Javascript zu schaffen und für den Rahmen, der den Inhalt optisch zusammenhält. Die Überschrift ist zusätzlich noch der Auslöser für die Klappfunktion. Der eigentliche Inhalt wird in einer Liste transportiert. Das ist allerdings kein Muss.

Ich nutze jQuery für die Klappfunktion. In seiner ursprünglichen Form – ohne die WAI-ARIA-Erweiterungen – sah das Skript folgendermaßen aus:

$('.toggle h3').click(function(){
	$(this).siblings('ul').slideToggle();
	$(this).toggleClass('zuklappen');
})

Der Code sollte einfach zu verstehen sein. Bei jedem Klick auf eine Überschrift, die sich unter einem Element mit der Klasse toggle befindet, wird das direkt folgende Geschwisterelement, das eine ungeordnete Liste sein muss, auf- oder zugeklappt, je nachdem, in welchem Status es sich befindet. Zusätzlich wird an der Überschrift die Klasse zuklappen hinzugefügt oder entfernt. Die toggle-Funktionen bei jQuery sind einfach und elegant benutzbar. Wegen der WAI-ARIA-Erweiterung mußte ich den Code ein wenig umschreiben und erweitern. Herausgekommen ist folgender Code:

$('.toggle h3').each(function() {
	var thingy = $(this);
	var sibid = thingy.next().attr('id');
	thingy.attr({
                'aria-expanded': 'false',
                'aria-controls': sibid
            })
	thingy.click(function() {
		$(this).siblings().slideToggle('fast', function(){
			if(!(thingy.attr('aria-expanded') == 'true')) {
				thingy.attr('aria-expanded', 'true');
			} else {
				thingy.attr('aria-expanded', 'false');
			}
		});
	});
});

Die oben genutzte kurze Version reichte nicht mehr, da sie nur auf Klick Dinge tut. Mittels jQuery sollten aber auch unabhängig von der konkreten Aktion Attribute zu speziellen Elementen hinzugefügt werden. Also gehe ich erst mit der Funktion each() alle Überschriften in den Klappboxen durch. Bei diesem Durchgang werden den Überschriften zwei Attribute mit passenden Parametern hinzugefügt. Ein Parameter ist der Inhalt der ID der folgenden Liste. Diese ID wird in einer Variable gespeichert und dann zugewiesen. Bei Klick auf eine Überschrift prüfe und ändere ich dann den Inhalt des Attributes aria-expanded.

Die so gefundene Lösung ist zwar eindeutig komplexer, als die ursprüngliche Lösung. Sie ist aber noch immer kein Hexenwerk. Mit ein bischen mehr Mühe habe ich so eine weitere kleine Barriere meiner Webseite entfernt. Sicherlich werde ich noch ein paar weitere kleine Details finden, die ich u.a. mit WAI-ARIA verbessern kann. Ich denke, daß diese Lösung auch bei Deinem nächsten Projekt nützlich sein kann.

Kurz nach meinem Relaunch bekam ich mit, daß die Schrifteinbettung sehr oft nicht funktionierte. In den letzten Wochen kam ich selten dazu, an meine Webseite zu denken, geschweige denn sie weiterzuentwickeln und kleinere Bugs auszumerzen. Heute widmete ich mich des Schriftenbugs. Seltsamerweise stellten IE6 und IE7 die seite wie gewünscht dar, IE8 und Firefox 3.5 hingegen nicht. Ich bin zwar hinter das Problem gekommen, doch leider öffnete sich ein neues.

Ich nutze für die Erstellung des Layouts das Framework YAML meines Freundes Dirk Jesse. Die Inhalte der CSS-Dateien werden bei YAML oft in media-Regeln gepackt. Offenbar haben die oben genannten Browser ein Problem damit, eine “@-Regel” in eine weitere “@-Regel” zu packen. Also habe ich die Schriftenregeln an den Anfang des Stylesheets gepackt und alles war wieder gut. Es sind oft die kleinen Dinge, über die wir stolpern.

Doch leider freute ich mich zu früh. Denn die genannten Änderungen führten zwar auf meiner lokalen Testumgebung zum Erfolg, auf dem Livesystem versagten aber nun alle Browser. Auch eine Auslagerung der Schriftregeln in eine separate Datei und die anschließende Löschung aller Kommentare brachte nichts. Ich habe die Schriften ein wenig geändert und muss leider akzeptieren, daß derzeit kein Browser meine gewünschte Schrift anzeigen will. Wenn ich wieder Zeit habe, werde ich mich des Problems wieder annehmen. Derzeit geht es nicht. Das ist bedauerlich, aber der Inhalt der Seite wird durch die andere Schrift schließlich nicht verfälscht. Und nur darauf kommt es an.

Ergänzung: Ich habe schon seit einigen Wochen immer wieder Probleme mit meinem Webspace. Ich kann derzeit nicht ausschließen, daß es irgendeine Kleinigkeit bei meinem Provider ist, die diese seltsamen Probleme hervorruft.

Ergänzung 2: Ich habe das Problem gelöst, bin aber sehr unzufrieden mit dem Ergebnis. Siehe meinen Kommentar weiter unten.

Die Einrichtung eines SVN-Servers scheint nach allem, was ich so gelesen habe, keine Kleinigkeit zu sein und auch nicht für jede Art Webserver-Paket. Selbst die Installation des Bugtrackers Mantis wollte bei mir nicht klappen. Da ich mittlerweile keine Lust mehr habe, über Gebühr Zeit und Energie in die Erledigung fachfremder Tätigkeiten zu stecken, habe ich ein wenig nach Dienstleistern im Bereich Versionierung recherchiert.

Während der Entwicklung meiner neuen Webseite habe ich alle Codeänderungen auf meinen kostenlosen Springloops-Account committet. Dieser Account ermöglicht mir die Verwaltung von drei Projekten. Für neun Dollar im Monat könnte ich auf zehn Projekte aufstocken. Der Preis ist übersichtlich und fair. Allerdings gibt es kein Ticketsystem. Das mag man nicht immer brauchen, aber hin und wieder kann es ganz nützlich sein. Da eine Installation eines eigenen Systems scheiterte, suchte ich nach einer gehosteten Lösung. Nach einer recht intensiven Suche habe ich folgende Möglichkeiten identifiziert:

• xp-dev.com

  Hier bekomme ich neben Subervsion auch noch Git geboten, ebenso Trac. Für 1 GB Storage und unlimitierte User und Projekte zahlt man 48 Dollar Jahresbetrag oder 5 Dollar monatlich. 48 Dollar sind gute 35 Doppelmark Euro. Dieses Angebot finde ich sehr interessant.

• SourceRepo

  Auch hier werden mit Subversion und Git geboten, zusätzlich sogar Mercurial. Neben Trac werden auch Redmine-Projekte geboten. Das macht das Angebot für 6,95 Dollar interessant. Aber brauche ich eine Projektverwaltung wie Redmine?

• freepository

  Dieses Angebot ist zwar mit 39 Dollar günstig, bietet aber eine Nutzerbeschränkung bis 25 Nutzer. Das muss nicht schlecht sein, aber die anderen beiden Angebote machen mir erst gar keine Kopfschmerzen in dieser Hinsicht. Dafür hätte ich 3GB Plattenplatz. Leider ist die gesamte Webseite spärlich und schwer zu lesen. Ein Ticketsystem wird zwar angeboten, weitere Infos gibt es aber nicht. So weiß ich nicht, ob es sich um ein selbstgebautes handelt oder um Trac, Mantis oder gar Bugzilla.

• ProjectLocker

  Dieses Angebot finde ich nur als kostenloses Angebot interessant. Ich finde es bedauerlich, daß zuviele Anbieter die Zahl der möglichen Nutzer einschränken. Selbst bei Bazahldiensten werden sie teilweise eingeschränkt. Bei Projectlocker bietet erst der teuerste Plan mit 30 Dollar im Monat mit 30 Nutzern eine Nutzerzahl, die erste Kopfschmerzen beseitigt. Der kostenlose Dienst hingegen ist sehr interessant. Selbst interessanter, als der von Springloops.

Vielleicht kommen ja noch in den Kommentaren interessante Alternativen. Derzeit schwanke ich zwischen SoureceRepo (wegen der Redmine-Projekte) und XP-Dev (wegen des sehr guetn Preis-Leistungs-Verhältnisses).

Was sind Eure Erfahrungen mit SVN-Dienstleistern (oder Git)?

Alle Vorträge wurden aufgezeichnet und sollen mit den Vorträgen der vielen anderen Ignites dieser Woche im Netz erreichbar sein. Deshalb fühlten sich die ersten Vortragenden bemüßigt, auf Englisch vorzutragen. Dadurch ging der Sprachwitz flöten und auch die Sicherheit der Vortragenden litt stellenweise, weil sie nach einem Wort oder einer Phrase kramen mussten.

Die Vorträge waren in zwei Blöcke geteilt, sodaß wir für uns untypisch eine Pause hatten. Im Nachinein war dies ein Glücksfall. Denn leider lief die Veranstaltung zeitlich zu sehr aus dem Ruder.

Die Idee von O’Reilly ist klasse und ich hoffe, wir wiederholen dieses Format. Allerdings erhoffe ich mir für das nächste Mal mehr Disziplin auf Seiten der Vortragenden wie der Organisatoren. Der Plan ist ja simpel und schön: 13 Vorträge à 5 Minuten sind 65 Minuten. Dazu ein paar Fragen und kurze Übergangszeit sollte die gesamte Veranstaltung noch weit unter zwei Stunden halten. In einem solche Falle wäre eine Pause unnötig.

Leider ist das nur die Theorie. Die Veranstaltung begann erst eine knappe halbe Stunde später als geplant und ging dann mit Pause knappe drei Stunden. Es war nicht klar, ob sich die einzelnen Vortragenden tatsächlich an die fünf-Minuten-Regel gehalten hatten. Bei einigen wenigen hatte ich den Eindruck, daß dem nicht so war.

Leider waren nicht alle Vorträge gesammelt auf einem Rechner, sodaß wir Umbaupausen hatten. Eine Präsentation konnte unerklärlicherweise nicht geöffnet werden. Und die meisten Vortragenden hatten kein automatisches Weiterblättern eingestellt, sondern blätterten manuell weiter. Das ist nicht im Sinne des Erfinders. Die Ignite-Vorträge sind für Zuschauer wie für Vortragende eine Herausforderung. Die Zuschauer müssen sich alle paar Minuten auf ein neues Thema einstellen und müssen versuchen, den Inhalt schnell zu erfassen. Die Vortragenden müssen sich endlich mal richtig kurz fassen und sich vor allem einem strikten Zeitdiktat beugen. Schade, daß die meisten dies nicht taten.

Bei der nächsten Ignite sollten alle Vorträge auf einem Rechner gesammelt vorliegen und “Auto-Forwarding” sollte eingestellt sein. Dann bekommen wir auch alle Redner in einer erträglichen Zeit durch. Ich bin sehr gerne bei Webmontagen, weil ich oft in kurzen Häppchen neue Gedanken und Informationen präsentiert bekommen. Ich gehe aber auch dorthin, um nachher alte Bekannte zu treffen und eventuell neue Bekanntschaften zu machen. Das “Socializing” ist durchaus ein wichtiger Teil des Webmontags. Als dieser gegen 23 Uhr endete strömten allerdings leider alle nachhause. Es war ihnen nicht zu verdenken. Doch mir fehlte leider ein Teil des Spasses. Aber ich denke, mit ein wenig mehr Disziplin und vor allem Vorbereitung kann man das in den Griff bekommen. Die Premiere ist nicht gescheitert, sie zeigte aber Verbesserungspotential auf.

Fotos des Webmontags findet ihr bei Sandra Kallmeyer und bei Patrick Lenz. Ich freue mich auf den nächsten Webmontag-Ignite.

Doch der Fehler lag diesmal nicht bei YQL, sondern in meiner Fehlerbehandlung. Vielen Dank an Dirk Ginader, für das Debugging. Sorry, liebes YQL-Team, für die erste Aufregung. Die zeitweise Fehlfunktion in der Vergangenheit hatte mich unkritisch gemacht. Ich werde mich wohl in der nahen Zukunft damit auseinandersetzen, wie ich die Seiten cachen kann, um eventuelle Ausfälle bei YQL auszugleichen.

Ich habe Chris Heilmann in vielen Vorträgen von den unzweifelhaften Vorzügen von YQL erzählen hören. Seine eigene Seite ist ein Zeugnis für die Funktionsfähigkeit dieses Systems. Ja, die gesamte Yahoo-Website funktioniert damit, wenn ich es richtig verstanden habe.

Seit meinen ersten Schritten mit meinem neuen Layout traten allerdings immer wieder Probleme mit YQL auf. Heute scheinen die Problem extrem zu kulminieren. Mittlerweile bekommt meine Website seit über sechs Stunden keine Informationen mehr von Yahoo. YQL ist für Grochtdreis.de leider tot. Ich habe deshalb einen Hinweistext implementiert, der auf dieses Problem hinweist. Eine gute Lösung ist das nicht, aber derzeit für mich alternativlos.

Dieses Problem addiert sich für mich zu den Performanceproblemen meines Providers. Seit Wochen vergeht kaum ein Tag, an dem nicht mehrfach minutenlang mein Server ausfällt. Diese Ausfälle sind wie die Ausfälle von YQL leider ausserhalb meines Einflussbereichs. Ich kann nur hoffen, daß beides sich demnächst bessert. Den Provider kann ich wechseln, ohne Garantie auf bessere Performance. Aber auf YQL möchte ich ungerne verzichten. Das System ist einfach praktisch.

Das Problem tritt auf, ohne Feedback für den Nutzer

Der Nutzer bekommt nun Feedback über den Fehler

Ich bin gespannt, ob ich irgendwann den wahren Grund der YQL-Probleme erfahren werde. Meine Implementierung kann nicht fehlerhaft sein, weil die Site grundsätzlich funktionierte.

Mich macht die Fehlfunktion sehr nachdenklich, denn ein System wie YQL finde ich wichtig und zukunftsweisend. Wir verbreiten unsere Informationen überall im Web. Profis wie ich sind in vielen Ecken des Web aktiv, hinterlassen überall Spuren. Es ist deshalb interessant, diese Spuren teilweise einzusammeln. Zudem gibt es spezialisierte Dienste, deren Spezialisierung uns das digitale Leben erst spannend und einfach macht. Bei Slideshare muss ich meine Vorträge nur hochladen und sie werden in ein handliches Format konvertiert, das jedermann auf seiner Webseite einbinden kann. Delicious bietet mir nicht nur die Datenhaltung meiner vielen Bookmarks, es ermöglicht mir auch die Vernetzung mit anderen Nutzern. Ich profitiere davon und kann die Links aus meinem Account via YQL sehr einfach in meine Webseite einbinden.

Es wäre schade, wenn wir in Zukunft nicht mehr so einfach die Informationen unterschiedlicher Dienste mischen und neue Informationsangebote damit schaffen könnten. Chris Heilmann zeigt immer wieder, welche tollen Applikationen man mit YQL bauen kann. Das sollte so bleiben. Ich hoffe, es handelte sich um einen kurzen, aber ärgerlichen Schluckauf.

Im Laufe der Zeit werde ich sicherlich noch ein paar Verbesserungen und Optimierungen vornehmen. WAI-ARIA fällt mir als Optimierung noch ein. Aber da ich eine Webseite nicht als ein statisches Gebilde verstehe, das ab seiner Veröffentlichung in Stein gemeißelt ist, nehme ich mir die Freiheit, die Optimierungen in der Zukunft vorzunehmen.

Das Layout ist nicht in Stein gemeißelt. Kommen mir neue Ideen, gefallen mir bestehende Details nicht, wird das Layout angepaßt. Genauso flexibel gehe ich bei der Unterstützung der Browser vor. Es ist nicht die Frage, ob man die Seite in einem IE anschauen kann, sondern wie. Die Basis des Ganzen bildet das CSS-Framework YAML. Es ist robust und ausgefuchst genug, um selbst in antike IE-Regionen vorzustoßen. Doch all die Details, die ein IE nicht anzeigen kann, weil selbst der aktuelle Microsoft-Browser noch immer nicht auf der Höhe der Zeit ist, wird ihm auch nicht mit einer Hilfskonstruktion beigebracht. Die allseits beliebten runden Ecken, gegen die ich früher immer lästerte und die jetzt ein Teil meines Designs sind, wurden mit CSS3 realisiert. Der IE zeigt die Ecken eckig an. Das sieht nicht so schön aus, tut dem Inhalt aber keinen Abbruch. Einzige Ausnahme ist ein kleines Javascript, das auch den IE6 in die Lage versetzt, eine Mindest- und eine Maximalbreite zu verstehen.

Die Inhalte der Startseite werden zum Großteil mittels YQL gesammelt. Sehr hilfreich war dafür ein Artikel von Chris Heilmann im Adventskalender 2009 der Webkrauts. Bei der Bearbeitung des PHP-Codes half mir netterweise David Maciejewski auf die Sprünge.

Ein Blick in die ursprünglichen Layouts

Bei einem erneuten Blick bin ich überrascht, wie weit das Endprodukt sich von den ursprünglichen Layouts entfernt hat. Wichtige Grundzüge sind aber erhalten. Das Logo entstand in einer zweiten oder dritten Schleife und hat mich sofort gepackt.

Kommentar?

Ich bin auf Eure Kommentare und Anregungen gespannt.

In den 15 Minuten des Vortrags – in Hannover gewährt man gar nur acht bis zehn – kann man selten tiefe Gedanken anstellen, zu komplex sind die Themen. Aber man kann Denkanstösse und Einblicke in vielleicht unbekannte Arbeitsbereiche geben. Ich finde gerade die mir fremden Themen spannend. Die Vorträge dieses sehr interessanten Abends gibt es auf Vimeo zum Anschauen. Interessante Betrachtungen des Abends geben Nicole Männl, Thomas Klose und Johannes Schwichtenberg, der vor allem auch alle Vorträge kurz zusammenfaßt. Einen Eindruck von der Veranstaltung gibt auch der Twitter-Hashtag #wmfra.

Ich freue mich auf den nächsten Webmontag, der am 1. März wieder in der Brotfabrik stattfinden wird. Wir werden dann eine Neuerung haben, indem wir bei O’Reillys Aktion Ignite mitmachen werden. Dabei sollen die Vorträge nur 5 Minuten kurz sein und aus 20 Slides bestehen, die alle 15 Sekunden automatisch weiterblenden. Ich bin sehr gespannt, wer da mitmacht und welche Themen wir bekommen.