30. December 2010

Releaseblogeinträge: camerata-koeln.de, v2.5 & griewisch.de, v4 veröffentlicht

• Aktuelles
• HTML & CSS
• Referenzen
• 0 Kommentare

Etwas verspätet kommt nun der Releaseblogeinträge (vermutlich meine letzte Aktivität in diesem Blog für dieses Jahr) zu den kürzlich veröffentlichten neuen Website-Versionen von Camerata Köln und Matthias Griewisch, dem wohl einzigen und daher auch besten Cembalo- und Clavichordbauer in Bammental.

Camerata Köln, Version 2.5

Das Kammermusikensemble Camerata Köln hatte vor nicht allzu langer Zeit einen Namenswechsel vollzogen und nennt sich jetzt konsequent Cologne Camerata — Camerata Köln.

Aufgrund dieser Namensänderung musste auch der Webauftritt überarbeitet werden. Und weil die Namensänderung nicht allzu groß war, sollten auch die Änderungen am Webauftritt nicht allzu groß ausfallen. Die jetzige Version 2.5 ist das Ergebnis dieser leichten Veränderungen.

Technik

Die Website basiert jetzt auf dem XHTML/CSS-Framework YAML von Dirk Jesse, das sich schon bei mehreren von mir gestalteten Websiten bewährt hat. Die Hauptgründe waren diesmal nicht das Spaltenlayout (das nutze ich bei diesem Webauftritt gar nicht), sondern einfach die vorgegebene Namenskonvention der Klassen im HTML, die mich gewissermaßen in ein Korsett zwingen, das aber nicht zu eng ist, sondern mir beim Gestalten alle Freiheiten lässt. Und ich muss mir keine Gedanken mehr darüber machen, wie ich das HTML denn aufbaue, weil alle Klassen und div-Container, die zum Gestalten der Website nötig sind, schon von vornherein vorhanden sind.
Natürlich der andere Hauptgrund ist der Formularbaukasten von YAML, mit dem ich ein schön browserübergreifendes Kontaktformular ohne viel Arbeit auf die Beine stellen konnte.

Die Technik neben YAML hat sich nicht groß verändert: Hauptsächlich PHP zum includen von immer wiederkehrenden Elementen wie der Fußzeile, das Validieren des Kontaktformulars oder die Blätterklasse bei Diskographie, die dort weiterhin ihren Dienst tut. Und bei der Besetzung sorgt ein bißchen jQuery für ein Austauschen der Bilder (den Code für den jQuery-Effekt hatte ich übrigens von dieser Website), sodass, wenn man bei dem S/W-Foto mit der Maus auf den Kopf eines Bandmitglieds zielt, dieser auf einmal farbig wird und damit signalisiert, dass man auf ihn klicken kann. Wenn man dann auf einen Kopf klickt, kommt man zu einem detaillierten Lebenslauf des jeweiligen Bandmitglieds. Eigentlich raffiniert, diese Technik. Einziger potentieller Nachteil ist, dass man als Benutzer der Website eventuell nicht rafft, dass man auf die einzelnen Köpfe klicken kann. Sonst gut. Da bei der Startseite der jeweilligen Sprache genau das selbe Foto der kompletten Band in farbig ist, denkt man sich ja wahrscheinlich sowieso: “Hmm, warum ist jetzt bei Besetzung das Bild nur noch in S/W?” und fährt mal mit der Maus probehalber über das Bild, bemerkt daraufhin hoffentlich, dass sich das Bild verändert, wenn man über einen Kopf hovert, und klickt dann. So sollte es zumindest sein.

Gestalterische Raffinessen

Wie vielleicht schon aufgefallen ist, ist die Navigation nicht ganz mittig ausgerichtet. Das hat auch einen Grund: Ich wollte bei der neuen Version die Navigation so weit links platzieren, dass der erste Navipunkt auf gleicher Höhe wie die Detail-Beschreibungen der CDs bei Diskographie ist:

Hier habe ich mich von dem Trend der sogenannten Grid-Layouts inspirieren lassen. Völlig bewusst breche ich dann zum Beispiel bei den einzelnen Musikern bei Besetzung aus dem Layout aus: Das Bild bricht aus dem Layout aus, während der Text wieder auf gleicher Höhe wie der erste Navigationspunkt ist, wie man an folgendem Bild sehr schön sehen kann:

Feedback zur neuen Website wird gerne angenommen, sei es Lob oder Kritik. Funktioniert zum Beispiel bei allen der Bilderwechsel-Effekt bei Besetzung?

Matthias Griewisch, Cembalo- und Clavichordbau in Bammental, Version 4.0

Nach gut einem Jahr, das seit dem letzten Relaunch (Version 3.5) ins Land gezogen ist, habe ich meine Kenntnisse in der Erstellung von Websiten bis heute soweit ausbauen können, um zu sagen, dass mal wieder ein Relaunch fällig wäre.

Hauptkritikpunkt der Besucher von Matthias’ Website war, dass man bei den Einzelansichten der Instrumente die kleinen Bilder unter dem großen Hauptbild (auch Thumbnails genannt) auf kleinen Bildschirmen nicht mehr sehen würde.

Eine weitere Baustelle, die im Prinzip schon seit dem letzten Relaunch feststand, war das Kontaktformular, dass selbst in aktuellen Browsern teilweise sogar sehr unschön versprang. Noch ein Grund für ein Relaunch.

Technische Neuerungen

Das Problem mit dem “Nicht-mehr-die-Thumbnails-unter-dem-großen-Bild-bei-den-Einzelansichten-sehen” ließ sich leicht lösen. Wir haben einfach die Navigation in eine vertikale Spalte links verbannt. So haben wir dadurch, dass die horizontale Navigation nicht mehr existierte, ein bißchen Höhe eingespart. Hoffentlich genug.

Jedenfalls: Diese Spalten — das riecht stark nach einem Fall für YAML. Und ist auch was für YAML. Die neue Version jedenfalls baut jetzt vollständig auf YAML auf. Und weil sie auf YAML aufbaut, war auch ganz fix die zweite Baustelle (das Kontaktformular) aus dem Weg geräumt. Dank dem Formularbaukasten von YAML wieder mal kein Problem.
Bei Referenzen kommen außerdem noch die Subcolumns von YAML zum Einsatz: Sie erlaubten die Unterteilung des Hauptframes (nein, ich habe nicht mit Frames gearbeitet — das ist ja verpönt, veraltet und überhaupt nicht schön —: Hauptframe ist einfach ein Begriff für das Hauptinhaltsfenster) in zwei gleich große Spalten. Auf den Akkordion-Effekt haben wir diesmal verzichtet, einfach aus dem Grund, weil die einzelnen Quetschkommoden-Elemente zu lang waren. Ein Akkordion wirkt eben nur bei kurzen Elementen gut. Außerdem wollten wir bei dem neuen Relaunch sowieso nur noch auf jQuery als JS-Bibliothek setzen. Der ehemalige Akkordion-Effekt setzte jedoch auf Mootools als JS-Bibliothek.

Bei Anfahrt steuern wir jetzt über Javascript die Google-Maps-API an: Das resultiert in einer schöneren Navigation innerhalb der Map, als wenn man die Karte über einen iFrame einbauen würde.

Bei der Navigation — das ist mein größter Stolz bei dem Relaunch — habe ich es jetzt geschafft, dank PHP und unzähliger if-elseif-else-Konstruktionen das komplette Menü einer Sprache in einer einzigen Datei zu kapseln, anstatt wie vorher ungefähr 10 - 15 Dateien pro Sprache. Das erspart später mal viel Arbeit, wenn sich was an dem Menü ändert. Für den Fall, dass der Benutzer der Website den “HOME”-Link auf dem Namen in der Kopfzeile nicht als solchen erkennt, haben wir auch noch in der Navigation ganz oben einen Link platziert, der zur Sprachauswahl-Seite führt.

Die Diashow bei “Werkstatt” existiert weiterhin.

Feedback zur neuen Website, ob negativ oder positiv, ist gerne gesehen.

Kommentare

Zu diesem Beitrag wurden keine Kommentare verfasst.

Commenting is not available in this weblog entry.