Sie sehen sich momentan die Weblog-Einträge zur Kategorie "HTML & CSS" an.
20. November 2011
Zwei wesentliche Neuerungen gibt es auf der neuen Version 5.5 meiner Website zu sehen: Einmal die Nachrichtenleiste über der Website, die ein bißchen wie die von Youtube aussieht, die dort manchmal erscheint, wenn es irgendwas Wichtiges gibt. Zum zweiten dann der "Demnächst"-Kasten auf der Startseite, der ganz gezielt auf das nächste Ereignis im Termin-Kalender hinweist.
Die Nachrichtenleiste
Zum Vergrößern bitte auf das Bild links klicken. In einer mit einem sanften Blauton unterlegten Leiste über der Website erscheinen ab sofort kurze wichtige Nachrichten, die zu kurz für einen Weblog-Eintrag oder den “Demnächst”-Kasten sind. Als Anfang jetzt leider gleich die Mitteilung, dass das anders-Konzert im Palü am 26.11. ausfällt. :(
Realisiert wurde das ganze mit zwei verschachtelten Div-Containern, ein bißchen CSS und ein bißchen jQuery. Das erste Div geht über die ganze Breite, sodass der Farbverlauf über die ganze Bildschirmbreite zu sehen ist. Das innere Div hat eine genau festgelegte Breite von 960px und wird nach rechts und links zentriert, sodass der Text genau bündig mit dem Rest der Website anfängt. Das Schließen-Symbol rechts in der Leiste habe ich absolut positioniert (und zwar relativ zu dem äußeren Div, sodass es rechts genau bündig ist, wo auch der Rest der Website aufhört).
Ein bißchen jQuery sorgt nun dafür, dass die Leiste verschwindet, wenn man auf das Schließen-Symbol rechts klickt. Ein Cookie merkt sich diese Einstellung für eine gewisse Zeit, sodass die Leiste dann nicht mehr erscheint, wenn man einmal das Schließen-Symbol geklickt hat. Erst wenn man das Cookie löscht, erscheint die Leiste wieder.
Die “Demnächst”-Box
Hier erscheint der nächste Termin aus dem Termin-Kalender immer mit näheren Informationen.
27. March 2011
Soeben wurde das neue Kontaktformular für die Website meines Vaters Matthias Griewisch, dem berühmt berüchtigten Cembalobaumeister aus Bammental, online gestellt. Es verfügt jetzt über eine client-seitige Validierung der Formulardaten.
Auf deutsch übersetzt: Die Daten, die der normale Benutzer eingibt, werden direkt auf seinem Rechner auf bestimmte Kritierien überprüft, beispielsweise ob alle Felder ausgefüllt wurden, ob die E-Mail-Adresse gültig ist und so weiter ...
Client-seitig, also mit Javascript (in meinem Falle mithilfe jQuery, Validation-Plugin und dieser Anleitung hier), die vom Benutzer eingegebenen Daten zu überprüfen, hat den Vorteil, dass der Server entlastet wird, da alles auf dem Rechner des jeweiligen Benutzers stattfindet. Bei größeren Anstürmen kann das durchaus nützlich sein. Für das eigentliche Versenden der Daten kommt dann wieder PHP zum Einsatz.
Außerdem hat der Benutzer eine viel direktere Rückmeldung, da jetzt sofort, wenn der Benutzer ein Feld falsch ausgefüllt verlässt, eine entsprechende Fehlermeldung unterhalb des jeweiligen Feldes angezeigt wird.
Falls der Benutzer jetzt Javascript ausgeschaltet haben sollte (solche Leute soll es ja tatsächlich geben ...), sorgt ein kleines PHP-Fallback dafür, dass die Daten trotzdem noch vom Server kontrolliert werden, bevor sie versendet werden.
Und hier kann man sich das neue Kontaktformular anschauen:
Website besuchen »
30. December 2010
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. 
10. September 2010
Manchmal mag es schön aussehen, wenn man einer Website eine feste Höhe sowie eine feste Breite verpasst und diese Box, die dabei entsteht, dann vertikal und horizontal zentriert. Wie das geht? Mit ganz wenig CSS. Der folgende Artikel zeigt wie's geht.
Dieses kleine Codeschnipselchen habe ich bei einer meiner zahlreichen Netzreisen gefunden.
#wrapper {
width:800px;
height:600px;
/* für horizontale und vertikale Zentrierung */
position: absolute;
left:50%;
margin-left:-400px; /* Um die Hälfte der Breite nach links schieben */
top:50%;
margin-top:-300px; /* Um die Hälfte der Höhe nach oben schieben */
}
Wie arbeitet der Code? Ganz einfach:
- In Zeile 2 und 3 werden Breite und Höhe des Containers festgelegt.
- Für die horizontale und vertikale Zentrierung ist eine absolute Positionierung des Containers notwendig. (Zeile 5)
- Die nächsten Zeilen sorgen für die eigentliche Zentrierung. (Zeile 6-9) Hierbei sind nur die
margin-Werte jeweils anzupassen. Der margin-left-Wert muss stets die Hälfte der Breite in px betragen, der margin-top-Wert die Hälfte der Höhe in px.
Im HTML legt man dann einfach ein div-Container an, der sämtliche Inhalte enthält:
<div id="wrapper">
<p>Hier kommt sämtlicher Inhalt hin.</p>
</div>
Fertig. Horizontal und vertikal zentriert. So einfach ist das.
28. May 2010
Webdesigner kämpfen immer wieder damit, ihre CSS-Dateien ordentlich zu halten. Eine Möglichkeit ist, viele kleine CSS-Dateien zu erstellen, die dann für jeweils einen bestimmten Bereich der Website das Design zur Verfügung stellen.
Diese Möglichkeit schützt allerdings nicht vor doppelten Angaben innerhalb des Stylesheets. Dafür gibt es jetzt Object Oriented CSS (kurz OOCSS) von Nicole Sullivan.
Ausgangslage
Normalerweise wird eine Box mit rosa Hintergrund und schwarzer Rahmenlinie so definiert:
.boxmitrosarahmen {
background: #8f0824; /* oder irgendetwas anderes rosa farbenes */
border: 1px solid black;
padding: 10px;
}
Im HTML greift man mittels dieses Konstrukts auf die eben festgelegten Formatierungen zurück:
<p class="boxmitrosarahmen">Lorem ipsum…</p>
Einen zweiten Kasten mit anderen Farbwerten kann man analog zum ersten Beispiel erstellen. Wenn man das gemacht hat, fällt auf, dass gewisse Formatierungen der Boxen doppelt definiert wurden:
- Der Innenabstand, der zweimal 10px beträgt
- die Rahmenstärke und der Rahmentyp
Und wo bleibt jetzt das Object Oriented CSS?
Hier setzt OOCSS von Nicole Sullivan an. Es überträgt den Hintergedanken von Objektorientierung (von Programmiersprachen) auf CSS. Ein Gedanke von Objektorientierung ist die Modularisierung: Alles wird auf kleinste Teilchen reduziert, die dann erweitert werden. Unmittelbar damit verbunden ist das sogenannte DRY-Prinzip. “DRY” steht für “Don’t repeat yourself” und fordert, dass nichts doppelt notiert wird. Unser Ausgangsbeispiel verstößt also ganz radikal gegen das DRY-Gesetz.
Wie können wir dem begegnen? Mit Object Oriented CSS. Überlegen wir uns also, wie wir die doppelten Angaben vermeiden. Wir könnten eine Art Basisklasse festlegen, die die grundlegenden Formatierungen für die Boxen festlegt, und einige andere Klassen, die diese Basisklasse erweitern. Die Basisklasse könnte .box heißen und so aussehen:
.box {
padding: 10px;
border-style: solid;
border-width: 1px;
}
Die Erweiterungsklassen könnten nach folgendem Muster angelegt werden:
.rosablack {
background: #8f0824; /* Den Kommentar dazu spare ich mir hier. 
*/
border: 1px solid black;
}
Diese Namensgebung der Erweiterungsklassen (erst der Hintergrundname in einem Wort und dann die Farbe der Rahmenlinie) widerspricht zwar dem uralten Grundsatz, dass man sprechende Klassennamen wie .note oder .important verwenden soll, weil man aus .rosablack nur schwer ablesen kann, wofür diese Klasse zuständig ist. Natürlich könnte man die Klasse auch .note oder .important nennen. Aber für mich war diese Namensgebung praktischer, weil bei mir eine grüne Box (grüner Hintergrund und grüner Rahmen) nicht automatisch eine “Irgendetwas-ist-gut-gelaufen-Box” heißt.
Im HTML greift man dann auf beide Klassen (Basis- und Erweiterungsklasse) gleichzeitig zu, ganz nach Motto:
<p class="box rosablack">Lorem ipsum…</p>
Vor- und Nachteile von OOCSS
Nach dieser ersten Demonstration stellt sich vielleicht die Frage nach den Vor- und Nachteilen von OOCSS.
Ein Nachteil von OOCSS ist sicherlich, dass man mehr schreiben muss (weil die sogenannten short hands im CSS nicht mehr vorhanden sind, bzw. gemäß dem DRY-Prinzip nicht mehr angewendet werden dürfen). Das betrifft allerdings nicht nur das CSS, sondern auch das HTML.
Der Vorteil jedoch ist, dass man nichts mehr doppelt schreibt und so später einmal bei allen Boxen auf einmal, egal welcher Farbe, die Rahmenstärke ändern kann. Dieser Vorteil der Modularisierung des CSS hat mich voll überzeugt und mich dazu bewogen, das Konzept in Maßen auch auf meiner eigenen Website einzusetzen; ich benutze es bei den Kästen, die manchmal im Fließtext auftauchen, und bei den Erfolgs- und Fehlermeldungen beim Kontaktformular.
Ich hoffe, eine gute kleine Einführung in das Thema gegeben zu haben. Vielleicht regt mein Blogeintrag den ein oder anderen Webdesigner, der meine Website besucht, dazu an, doch mal sein CSS und HTML noch mal zu überdenken und OOCSS bei zukünftigen Projekten konsequent einzusetzen.
Weblinks zum Thema
11. May 2010
Jetzt habe ich es endlich geschafft: Das Relaunch meiner Website, Codename <Wonder>, ist online. Basierend auf Expression Engine und YAML, wartet es mit einem modernisierten Design auf und zahlreichen kleinen Javascript-Effekten. Ich habe die Geschichtsaufsätze nun vollständig in die Website integriert und auch eine eigenständige Geschäftswebsite erstellt.
Endlich. Der Relaunch. Was soll ich sagen? Angefangen hat alles im Sommer 2009 mit dem Besuch der Sitepoint-Website. Deren Navigation hat mich so fasziniert, dass ich diese ohne Umschweife als Grundstock für meine Website genommen habe. Nach einer Weile ist daraus dann die Website geworden, die Sie jetzt hier sehen: schlicht, aber doch ergreifend, oder? Schauen Sie sich einfach mal um und schreiben Sie mir ein kurzes Feedback.
Vorteile, die ich mir von dem Relaunch verspreche
Einmal wäre da sicherlich das mordernisierte Design, das ich komplett selbst gemacht habe, was heißt, dass ich jetzt die volle Kontrolle darüber habe, soweit man das behaupten kann.
Zum Anderen aber auch die Performance: Die ist bei der Expression Engine nämlich um Welten besser als bei Wordpress - glaube ich zumindest. Und da Google kürzlich beschlossen hat, die Performance einer Website als Ranking-Faktor mit einzubeziehen, schadet eine schnellere Seite auch nichts.
Des weiteren ist das Templating-System der Expression Engine einfach ganz wunderbar intuitiv, es macht Spaß, damit zu arbeiten und geht schnell von der Hand - was man bei Wordpress-Templates nicht behaupten kann.
Weiteres zur Website und was dahinter werkelt, können Sie auf der “Behind-The-Site”-Seite lesen.
Was noch fehlt
- Einige der alten Blogeinträge müssen noch importiert werden.
- Der Spruch des Tages muss wieder rein.
- Die Abkürzungen müssen noch gekennzeichnet werden.
target=“blank” in Links entfernen und durch jQuery ersetzen. -> wartungsfreundlicher.- DIN berücksichtigen, was Gedankenstriche und danachfolgende Leerschritte angeht.
7. January 2010
Ich habe mir heute das Buch “jQuery” von Ralph Steyer gekauft. Bereits nach dem zweiten Kapitel fiel mir ein konkreter Anwendungszweck ein: Ich wollte den Bilder- Austauschen- Effekt auf meiner Startseite erneuern. Dabei sollte jQuery zum Einsatz kommen und das HTML entschlackt werden (invalide Attribute wurden entfernt etc.). So weit so gut. So sieht der Quelltext meiner Seite jetzt aus (Ausschnitt):
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//preload image
clearImage = new Image();
clearImage.src = "marcus_cicero_sprechblase.jpg";
$(document).ready(function() {
$("#swapImage").hover(function() {
$(this).attr({src:"marcus_cicero_sprechblase.jpg"});
});
});
</script>
</head>
<body>
<p style="text-align:center; margin-top: 20px;">
<a href="/wp">
<img src="marcus_cicero.jpg" width="320" height="475" id="swapImage" title="Marcus Tullius Cicero">
</a>
</p>
</body>
Zur Erklärung: Zuerst wird über das CDN von Google die Funktionsbibliothek jQuery eingebunden. Dann lade ich das Bild mit der Sprechblase vor und sage jQuery, dass es bei dem Rüberfahren über das Bild mit der Maus das Bild austauschen soll. So einfach und doch so genial.
Aus Performance- Gründen wurde der Hintergrundsound bei der Startseite bei den Aufräumarbeiten gleich mit rausgeschmissen.
Update: Die Lösung, wie ich sie oben beschrieben habe, hat leider den Schönheitsfehler, dass das Bild mit der Sprechblase immer noch sichtbar ist, selbst wenn man schon längst mit der Maus wieder wo anders ist. Diese Lösung hier funktioniert besser:
$(document).ready(function() {
$("#swapImage").bind('mouseover', function(){
$(this).attr({src:"marcus_cicero_sprechblase.jpg"});
});
$("#swapImage").bind('mouseout', function(){
$(this).attr({src:"marcus_cicero.jpg"});
});
});
10. October 2009
Schon seit einiger Zeit (Sommerferien 2009, um genau zu sein) schleppe ich den Gedanken einer kompletten Neugestaltung dieses Auftritts (Codename <Version 5.0> <Wonder>) auf Basis des XHTML/CSS- Frameworks YAML von Dirk Jesse mit mir herum. Damit einhergehen würde dann auch ein CMS- Wechsel, um mehr Flexibilität zu erreichen. Mit Wordpress ist man nämlich (meine Meinung) irgendwie in ein etwas zu enges Korsett gezwungen. In der näheren Auswahl im Wald der CMS ist die Expression Engine, von der ich früher schon einmal berichtet hatte. Ob ich Expression Engine einsetzen werde, steht allerdings noch nicht fest. Ich werde auf jeden Fall auf Version 2.0 warten, die einige Verbesserungen mit sich bringen soll. Oder ich mache das ganze in Handarbeit mit dem Zend Framework (auch hier will ich auf Version 2.0 warten, weil dann die Neuauflage des ZF- Buches von Ralf Eggert rauskommt, das sehr positiv bei Amazon besprochen wurde). Schwierige Entscheidungen …
6. October 2009
Einfach, dass mal wieder etwas passiert auf diesen Seiten. Heute in der Schule kam ich mit meinem Freund Benni auf die ganz verrückte Idee, doch mal den Anfang von Beethovens 5. als Hintergrundmusik auf der Startseite zu hinterlegen. Hab ich dann auch gerade gemacht. Interessantes technisches Detail der Umsetzung:
<embed src="beethoven.mp3" autostart="true" hidden="true">
So einfach wie genial!
25. August 2009
Vor einigen Wochen habe ich mit meinem Vater zusammen das Javascript- Framework jQuery, das auf seiner Website zur Verwendung kommt, auf die neueste Version (derzeit 1.3) upgedatet. Im Zusammenhang dazu kam mir dann auch die Idee, die Bilder auf der Website meines Vaters doch mal ein wenig anders – ein wenig besser – zu präsentieren. Nur wie? – war die Frage.
Also habe ich mir mal die jQuery- Plugins zum Bereich “Media” vorgeknöpft, habe einige wenige aussortiert und sie meinem Vater gezeigt. Und – oh Wunder – eins hat ihm gefallen! Also prompt geguckt, wie das denn einzubinden ging. Das ging auch relativ leicht, aber – wie es meistens bei solchen Sachen ist – prompt hat der Firefox (2 & 3) gemeutert und die Bildergalerie nicht mehr richtig dargestellt. Also haben wir die Idee erstmal wieder verworfen.
Bis es mich dann Ende Mai nochmal gepackt hat und ich mir gedacht hatte: “Irgendwie muss man dieses Problem doch lösen können.” Da das Problem ganz offensichtlich beim CSS lag, habe ich mich also beim XHTML- Forum angemeldet und das Problem mal gepostet. Nach längerem Hinundher kamen wir zu einer Lösung. Dann auch noch schnell im selben Forum gefragt, wie man den jQuery- Aufruf im <head> in eine externe Datei auslagern kann. Nach einiger Weile fanden wir auch hierfür eine Lösung. Nach Lösung dieser zwei Probleme hatten wir das Plugin soweit, dass wir es auf der richtigen Seite einsetzen konnten. Dann kamen allerdings erstmal zwei Wochen Urlaub dazwischen. Danach jedoch ging es richtig los. In Rekordzeit setzten wir die Bildergalerie in die Tat um. Das Ergebnis können Sie unter http://www.griewisch.de bestaunen, wenn Sie zum Beispiel auf Instrumente > Deutsche > Cembalo nach Christian Vater 1738 klicken.
Das Einbinden ging natürlich ganz easy, wie das auch schon beim tablesorter- plugin der Fall war. Anhand einer Testseite haben wir dann noch ein wenig mit dem CSS herumgespielt und haben auch noch kleine Veränderungen im Javascript selbst vorgenommen (der Text unter dem großen Bild wird jetzt nicht mehr – wie das eigentlich vorgesehen ist – aus dem title- Attribut des jeweiligen <img>- tags ausgelesen, sondern ist normaler statischer Text in Form eines <caption>- Elements). Dann – nach einer ausgiebigen Testphase – ging es an die Fleißarbeit. Nämlich auf allen Seiten in allen drei Sprachen die Bilderpräsentation umzustellen.
Naja, es hat schon Vorteile gebracht:
- Die Bilder werden jetzt – im Vergleich zu früher – viel schöner präsentiert.
- Für den Webmaster entfallen ungefähr 100 Seiten pro Sprache (also in unserem Falle 300 Seiten), die es zu pflegen gilt, da jetzt sämtliche Bilder eines Instrumentes in eine SHTML- Datei eingebunden sind.
Nebenbei haben wir bei “Werkstatt” mit dem jQuery-Plugin “Dynamic Slideshow” eine schöne Diashow erstellt. Auch wurden einige offenbar schon seit Jahren vorhandene Rechtschreibfehler beseitigt
Schauen Sie einfach mal wieder vorbei und lassen Sie doch gleich auf dem Seiten- eigenen Kontaktformular Ihr feedback da. Vielen Dank.