Heute gibt es nicht nur was auf die Ohren sondern auch was auf die Augen. In einem kurzen Tutorial versuche ich zu erklären was Subversion ist und wie man es unter MacOS und Windows einsetzt. Dazu laufen MacOS und Windows parallel. Falls das zu verwirrend ist – ich nehme es fast an – werde ich es bei den nächsten Screencasts anders lösen (und nur noch die MacOS-Version zeigen :p).

Ich selbst bin auch kein Subversion-Experte und ein Assembla-Experte bin ich auch nicht. Nach dem Film, also in etwa 600 Pixeln, gibt’s Links zu allen Informationen zum Thema (die mir eingefallen sind).

Ach ja, das Hintergrundbild findet man bei den Happy Webbies.

Gerade bei 43folders (in den Feedreader damit) vom Plain-Text-Wiki-Bundle für TextMate (bester Texteditor ever!) gelesen.

Gleich ausprobiert und aus leidiger Erfahrung WikiWörter in CamelCase inklusive deutschen Umlauten ausprobiert… Natürlich hat’s nicht hingehauen.

Eine schnelle und wahrscheinlich dreckige Lösung ist folgende:

Bundle-Editor öffnen (Strg+Alt+Apfel+B), dort unter „Plain Text Wiki“ „Wiki“ auswählen. Im Fenster rechts steht unter anderem diese Codezeile:

match = '[A-Z][a-z]+([A-Z][a-z]*)+';

Diese Zeile einfach durch folgende ersetzen:

match = '[A-ZÄÖÜ][a-zäöüß]+([A-ZÄÖÜ][a-zäöüß]*)+';

Da ich kein Experte für reguläre Ausdrücke bin, weiß ich nicht, ob das irgend welche Nachteile hat.

Einen Fehler gibt es auf jeden Fall, die Datei wird nicht in einem neuen Tab im Projekt geöffnet sondern in einem neuen Fenster…

Zuerst einmal ein ganz großes Lob an die Veranstalter. Der Ort des Events war mit dem Millennium Tower sehr gut gewählt, der Raum „Kirk“ war von der Größe her optimal, nämlich gerade groß genug.

Für Essen und Getränke war ebenfalls gesorgt, als es um 10 Uhr losging. Die Veranstalter Wolfgang Zeglovits und Helge Fahrnberger erklärten allen, die noch nie bei einem Barcamp waren, wie der Tag ablaufen sollte.

Die erste Präsentation war direkt ein Big Player im Web-2.0-Markt. IBM zeigte in Form von Anton Fricko ihre Mashup-Lösung QEDWiki. An meinem Twitter-Kommentar „too complicated for John and Jane Doe…“ halte ich fest. Technisch interessant, scheint mir das Tool in seiner jetzigen Form für den Markt absolut unausgegoren.

Danach ergriff Wolfgang Fasching das Wort: In seiner Session „Web 2.0 Hype – Was tun?“ wurde Web 2.0 zu definieren versucht. Dieses unmögliche Unterfangen zog sich so lange, dass wir eine Session verschieben mussten. Letztlich wurde das Thema wie Unternehmen und Web 2.0 zusammen finden nur angeschnitten und in der Diskussion zerrieben. Das interessanteste waren die Erzählungen des Last.fm-Mitgründers Michael Breidenbrücker, der tief in die Marktmechanismen 2.0 blicken lies.

Danach zeigte Peter Gollowitsch eine Software mit der der Landesparteitag der schleswig-holsteinischen Grünen organisiert und mit der abgestimmt wurde. Niko Alm hielt dagegen: Auch mit einem Wiki ist eine demokratische Meinungsbildung möglich, siehe neuverhandeln.at.

Kurz vor der Mittagspause (mit lecker Essen) referierte Jörg Linder zum Thema Usability 2.0. Nichts neues (für mich) hier. Das Back-Button-Problem ist immer noch eines.

Nach dem heißen Essen ging es dann in die heiße Phase. Wieder wurden Slots verteilt. Und es folgte mein Highlight der Konferenz. “SystemOne“http://systemone.at/ ist ein Inhaltemanagementsystem, das auf Wiki und Blogbasis funktioniert und dazu Daten aus verschiedenen Quellen gleichzeitig akquiriert. Der Screencast auf der Webseite verrät mehr. Vielen Dank an den SystemOne-Chef Michael Schuster, der ankündigte die Privatversion (1 Benutzername) frei zu Verfügung zu stellen.

Während der Diskussion ums „Marketing 2.0“ habe ich nicht wirklich aufgepasst, ich war in die Vorbereitung meines Vortrages vertieft. Ich glaube, da ging es irgendwie um Banner oder wie man Werbung oder andere Einnahmen… Ich habe keine Ahnung.

Vor der Kaffeepause um 16 Uhr eine „Maps Mashup Session“. Dabei erzählte Helge etwas über bikemap.de, eine Radfahrseite, die noch nicht online ist und die Jungs von Tupalo fassten ihren 45-Minuten-Vortrag in fünf Minuten zusammen. Dann war Pause.

Pünktlich um kurz nach halb fünf begann ich dann meinen abgespeckten Vortrag zum Thema Mikroformate. Durch die von 15 auf 10 Folien heruntergefahrene Präsentation versuchte ich möglichst schnell durchzufliegen, wir haben ja keine Zeit. Danach gab es viele Fragen, und ich zeigte Beispiele in Mikroformaten. Martin Rölls Einschätzung deckt sich mit meiner: „Super Vortrag über Mikroformate (microformats). Hier zeigt er, wie er für sich in Textpattern eine mikroformatierte Filmkritikseite gebaut hat. Amusement über seine Kommentare zu den Filmen.“

Der Vortrag lief wirklich gut, auch wenn ich zwischendurch das Gefühl hatte, dass die Zuhörer mir wegen des ganzen Gelächters um meine Filmkritiken entgleiten könnten. Ich habe viel direktes positives Feedback erhalten. Damit hatte sich mein Vortrag als nicht ganz so schlecht herausgestellt. Als ich dann an Christopher Clay übergab, der mit seinem Firefox 3-Vortrag meine Session ergänzen wollte bemerkte ich, dass es bereits 17:25 Uhr war. Ein wenig sehr überzogen, dafür, dass wir alle drei – Christopher, Heimo Reiter und ich – eigentlich um 17 Uhr hätte fertig sein sollen.

Christophers Vortrag war sehr Interessant. Vor allem ein Aspekt des neuen Firefox hat mich sehr überzeugt. Aber ich habe vergessen was es war. Ich werde mir seine Präsentation aber nochmals anschauen und dann berichten. Hoffe ich.

Ab 18 Uhr wurde dann wieder ausgetauscht und zwar zum Thema Video 2.0, was einerseits interessant war, andererseits sich aber auch sehr lang gezogen hat. Das Ergebnis der Diskussion ist mir nicht bekannt.

Fazit: Im Großen und Ganzen eine gelungene Veranstaltung mit interessanten Vorträgen und Vortragenden. Martin Röll hatte keine eigene Session, das war schade, ich hätte gerne mehr von ihm gehört. Das muss unbedingt wiederholt werden.

Nach der Konferenz wurde dann noch zusammen gegessen (was Cisco nicht zahlte – aber das war auch das einzige). Ausklingen ließen wir den Abend im WerkzeugH, das nach dem Umbau wirklich schön geworden ist. Ich habe alle nochmal an den Webmontag erinnert und habe mich dann um kurz nach null Uhr auf den Heimweg gemacht, da ich ja heute morgen bereits um sechs Uhr wieder aufstehen durfte. Was man nicht alles fürs Studium macht.


Was ist ein „Baustein“?

Bausteine sind mir zuerst als Teil des CMS Textpattern aufgefallen. Diese Bausteine, die im englischen Original „form“ heißen, sind wiederverwendbare XHTML-Codeausschnitte, die mit Textpattern-Code angereichert werden können.

Das Baustein-Prinzip ist jedoch nicht auf Textpattern begrenzt, im Gegenteil: Es hat sich als sinnvoll herausgestellt, wiederverwendbaren Code zu benutzen. Dies beugt auch der missbräuchlichen Verwendung von divs vor.

Zudem bringen Bausteine einen klaren, leichter zu lesenden XHTML-Code. Ein ähnliches System sind Mikroformate. Diese gelten jedoch nicht intern sondern seitenübergreifend, weshalb ich hier nicht auf sie eingehen will.

Bausteine in der Praxis

Bausteine benötigen eventuell eine genauere Auseinandersetzung mit den einzelnen Elementen der Seite. Als Beispiel ziehe ich das Recoding der Startseite von Focus Online heran, das ich im Januar angefertigt habe.

Dort gibt es mehrere Elemente, die einen ähnlichen Aufbau haben: Die Teaser.

Da gibt einen Teaser mit großem Bild und mehrere ohne oder mit kleinen Bildern. Davon sind einige in den beiden Übersichtsspalten am Ende der Seite.

Im Bild sieht man alle drei Teaserarten, von oben nach unten:

Teaserbeispiele des Focus

  1. Der Aufmacher: Steht am Anfang der Seite und erhält die Top-Meldung.
  2. Weitere Top-Meldungen: Steht im oberen Seitenteil in der Mittelspalte.
  3. Top-Meldungen nach Resort: Im unteren Seitenteil in einer der beiden Spalten.

Nun kommt es natürlich darauf an, wie man diese Teaser als XHTML-Code beschreibt, Anhaltspunkte sind auf folgender Grafik mit entsprechend eingezeichneten Bereichen zu sehen:

Teaserbeispiele des Focus mit Markierung der XHTML-Elemente

Code

Schauen wir uns folgenden Codeausschnitt an:

Die Angabe der zusammengesetzten Klassennamen first teaser (Zeile 1) und teaser withimage (Zeile 17) ist dabei unerheblich. So benannte Klassen sind aber wesentlich leichter lesbar als ein äquivalentes teaser first bzw. withimage teaser. Welche Regel letztendlich angewendet wird, wird durch die Spezifität festgelegt, nicht durch die Reihenfolge der Klassennamen.

Von diesen XHTML-Grundgerüsten leiten sich folgende Styleangaben ab:

Dabei wird auf die doppelte Bezeichnung von Klassen im Stil div.ersteklasse.zweiteklasse verzichtet, da der Internet Explorer (zumindest bis Version 6) damit Probleme haben kann1. Stattdessen wird die Spezifität genutzt um das gewünschte Ergebnis zu erreichen. So wird insbesondere im Abschnitt für die Kategorien immer das div#kategorien vorgesetzt um unerwünschte Effekte zu vermeiden.

Anmerkung zu den Zeilen 118-123:
Der Internet Explorer bis Version 6 zeigt den unteren Rand für die Teaser nicht an (definiert in Zeile 4). Diese simulieren wir indem wir einfach den Kategorielinks einen unteren Rand geben. Problem dabei: Browser, die den Quelltext korrekt rendern zeigen zwei übereinanderliegende Linien und dadurch einen doppelt dicken Rand. In den Zeilen 122-124 wird dieser Rand per Child-Selektor wieder entfernt. Der IE versteht die Anweisung nicht und übergeht diese deshalb. Im Internet Explorer 7 tritt diese Anomalie nicht mehr auf, zudem versteht er Child-Selektoren und verhält sich daher wie alle anderen standardkonformen Browser.

Mit wiederverwendbaren Bausteinen erleichtert man sich nicht nur die Arbeit beim Code-Schreiben, sondern vereinfacht auch den CSS-Quelltext, da man eventuelle Doppeldefinitionen vermeidet.

1 Siehe dazu: thestyleworks.de/tut-art/ie7.shtml#multiple-classes