Sie sehen sich momentan die Weblog-Einträge zur Kategorie "Referenzen" an.
12. February 2011
Vielleicht haben Sie es schon gesehen: Auf der Website meines Vaters Matthias Griewisch, seines Zeichens Cembalobaumeister aus Bammental, hat sich was getan. Und zwar beim Menüpunkt "Werkstatt": Hier wurde der vorherige Image-Slide-Effekt durch eine richtige Diashow ersetzt, bei der man nun auch anhalten kann und von Hand sich ein Bild aussuchen kann.
Um sich vorab schon mal ein Bild der neuen Galerie machen zu können, klicken Sie doch einfach auf den Screenshot links. Dort sehen Sie, dass die Werkstatt-Galerie ganz ähnlich aufgebaut ist wie die Galerien bei den Einzelansichten der Instrumente: Oben das große Hauptbild, darunter die kleinen Bilder (Thumbnails), auf die Sie klicken können, um das jeweilige Bild oben anzuzeigen. Mithilfe der Pfeile rechts und links neben den Thumbnails können Sie durch die Thumbnail-Liste navigieren. Sie können auch auf das große Hauptbild in den linken oder rechten Bereich klicken (nachdem sich ein Pfeil gebildet hat) und so zum vorherigen (bzw. nächsten) Bild zu springen.
Die eigentliche Diashow können Sie unter dem großen Hauptbild rechts mit den entsprechenden Links (Start / Stop) ... naja, starten und stoppen halt! 
Ist doch irgendwie logisch, oder? Momentan ist die Diashow so eingestellt, dass sie immer fünf Sekunden bei einem Bild verweilt, bis sie zum nächsten Bild springt. Sie sehen rechts neben den Links dann immer einen Countdown, bis zum nächsten Bild gesprungen wird.
Und hier können Sie sich den Effekt auf der richtigen Website anschauen.
Zur Website springen
Für die Webdesigner unter uns: Umgesetzt wurde dieser Effekt (wie immer) mit der Javascript-Bibliothek jQuery und dem Plugin AD Gallery.
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.
13. October 2010
Vor wenigen Tagen habe ich die Website der Musikwissenschaftlerin Katharina Larissa Paech aus Graz fertig gestellt und für die Suchmaschinen freigegeben.
Die Website basiert auf dem CMS Wordpress, weil die Kundin angekündigt hatte, dass sich relativ häufig der Text auf ihrer Website ändert (dass zum Beispiel neues zu “Aktuelles” kommt oder dergleichen). Und verglichen mit Expression Engine (Kosten) oder Textpattern (wegen fehlendem WYSIWYG manchmal eventuell etwas schwierige Handhabung durch den Kunden) erschien mir Wordpress für diese Aufgabe wie geschaffen. Auf diese Weise hatte ich auch Gelegenheit, nachdem ich selbst im Mai dieses Jahres aufgrund mangelnder Flexibilität Wordpress überdrüssig geworden bin, das neue Wordpress 3.0 mal etwas näher in Augenschein zu nehmen.
Katharina Larissa Paech
Bei Katharina Larissa Paech handelt es sich um eine Musikwissenschaftlerin aus Graz (Österreich) mit eindeutigem Schwerpunkt auf Johann Pachelbel.
Die Technik dahinter
Wie schon erwähnt, kommt Wordpress als CMS zum Einsatz. Das Layout basiert wieder einmal auf der bewährten Grundlage der Basis des Fundaments, nämlich YAML von Dirk Jesse, für das ich mir jetzt auch mal eine generelle Lizenz zugelegt habe, sodass ich nicht mehr auf den Zwangslink zum Autor oder zur Projekthomepage von YAML angewiesen bin.
Ein Favicon wurde auch noch erstellt und die ganze Website wurde natürlich wieder auf einen Server von all-inkl.com verfrachtet, wo sie (noch) sehnlichst darauf wartet, von den Suchmaschinen gefunden zu werden. Ein Ajax-unterstütztes Kontaktformular (über das Wordpress-Plugin “Contact Form 7”) erleichtert dem Benutzer die Fehlersuche, wenn er sich irgendwo vertippt haben sollte.
Ansonsten, schauen Sie ruhig gerne mal rein.
Website besuchen »
21. April 2010
Seit ca. 2 Wochen ist nun auch Helmut Zorn aus Karlsruhe, der Klavierunterricht für Kinder, Jugendliche und Erwachsene gibt, online. Die Website wurde von mir erstellt – wieder ohne CMS, dafür aber mit Notepad++. Technisch gesehen basiert sie auf (nebenbei validem) XHTML, CSS und ein bißchen PHP für das Kontaktformular. Weil ich ein browserübergreifendes Spaltenlayout und ein browserübergreifendes Kontaktformular brauchte, was auch noch im IE 5 gut aussieht, habe ich als solide, gut durchgetestete Grundlage des Fundaments auf das bewährte XHTML/CSS-Framework YAML von Dirk Jesse zurückgegriffen. Bei der Domain, die übrigens offenbar schon seit Jahren zwar reserviert, aber nicht mit Inhalt gefüllt war, wurde außerdem ein Serverwechsel von 1&1 zu all-inkl.com durchgeführt, der auch reibungslos geklappt hat.
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.
25. April 2009
Schon vor einigen Tagen offiziell fertig gestellt, habe ich erst jetzt Zeit gefunden, meine erste Website, die ich für Geld gemacht habe, auch hier im Blog anzukündigen: camerata-koeln.de.
Vorher äußerst unstrukturiert (unabsichtlich wechselnde Hintergründe bei manchen Seiten oder keinen Rahmen als Begrenzung – um nur mal ein paar Beispiele zu nennen) und auch sonst nicht sehr schön (häßlich unformatierte Tabellen …), geht diese Website jetzt auf den Pfad der CSS- Tugend.
Zur technischen Umsetzung
- So sieht die Grundstruktur des Markups, die sich schon bei meinen beiden anderen Referenzen bewährt hat, aus:
<div id=”wrapper”>
<div id=”kopfbereich”></div>
<div id=”textbereich”></div>
<div id=”fussbereich”></div>
</div>
- Das CSS besteht aus einer einzigen Datei
bildschirm.css. Auf ein Stylesheet für eine druckbare Version der Seite wurde verzichtet.
- Die Navigation oben rechts wurde im Registerkarten- Stil (“Sliding doors”) umgesetzt.
- Für diverse Seiten wurden PHP/mySQL- Skripte von Johann- Christian Hanke eingesetzt (beispielsweise bei der Diskographie seine raffinierte Blätterklasse).
Auf irgendwelche Spielereien mit Javascript wurde diesmal verzichtet.
Was gibt es hier (bzw. dort)?
Die Präsenz camerata-koeln.de ist sozusagen die Firmenpräsenz vom Musikensemble Camerata Köln. Hier gibt es:
- Einen Übersichtstext zur Geschichte von Camerata Köln
- Lebensläufe und Bilder der einzelnen Mitglieder
- Eine Diskographie
- Einen Blog
- Die Möglichkeit, einen Newsletter, der über Neuigkeiten informiert, zu abonnieren
- Die Möglichkeit, über ein Kontaktformular – na ja – Kontakt zu Camerata Köln aufzunehmen.
Feedback zur Website sind erwünscht.
31. October 2008
Heute habe ich es endlich geschafft: Die Website von meiner Schwester Annika Griewisch ist gerade fertig gestellt worden. Unter http://www.annikagriewisch.lima-city.de können Sie meine zweite selbst erstellte Website bewundern.
Im Gegensatz zu meiner ersten Referenz http://www.griewisch.de ist diese Website eine Website ohne viel Effekte: Einfach nur HTML- Seiten, die CSS gestylt wurden. Kein Javascript, kein SSI, kein Garnichts (schreibt man das zusammen oder auseinander, groß oder klein?). Das schöne an der Webseite ist, dass meine Schwester damit auf jeden Webserver kann, wenn sie später einmal von ihrem jetzigen kostenlosen lima-city- Server umzieht auf einen kostenpflichtigen (wie zum Beispiel all- inkl, wo ich jetzt meine Website hoste); der jeweilige Server muss dann kein PHP unterstützen, nur HTML und CSS, und das tun heutzutage alle Webserver.
Von der Struktur her ist die Website meiner Schwester so aufgebaut:
- Einen Header, wo das Logo drin Platz findet, das natürlich mit einem HOME- Link versehen ist, sodass man durch einen einfachen Klick auf es immer wieder zur Startseite kommt.
- Ein
<div id=“content”>, wo der eigentliche Inhalt drin ist.
- Und natürlich einen Footer, eine Fußzeile, wo eine kurze Copyright- Angabe sowie ein Link zu dem Autor, dem Ersteller dieser Website (mir) drin ist. Außerdem können Sie im Footer nochmal nachlesen, dass diese Website ausschließlich « mit HTML und CSS realisiert » ist.
Das Stylesheet habe ich diesmal, nicht wie bei http://www.griewisch.de in mehrere Stylesheets aufgeteilt, sondern in eine einzige Datei default.css gesteckt, die dementsprechend auch ziemlich lang ist.
So, das wär’s zur technischen Seite der Website. Nun interessiert vielleicht noch den ein oder anderen: « Was findet man eigentlich auf der Website? »
« Nun, », würde ich ihm antworten, « meine Schwester ist Grafikdesignerin (sie hat mir ja auch schon die Hotzenplotz- Fortsetzung und die Kleine- Hexe- Fortsetzung illustriert), die jetzt als Weiterbildung noch Innenarchitektur studiert. Das kann man so sagen, denke ich. Und auf dieser Website sind dementsprechend einige Werke von ihr ausgestellt. Außerdem gibt es einen kurzen Lebenslauf sowie eine Kontaktseite (leider ohne Formular) für Fragen und Anregungen. »
Am Besten sage ich einfach:
Have a look and then: Enjoy. And then leave a comment here: Did you like the homepage? What can I do better? Let me know. Leave a comment. Thank you.
12. September 2008
Heute ist die neue Website von meinem Vater Matthias Griewisch online gestellt worden; die von mir erstellte page wurde ein wenig mit modernen Techniken aufgepeppt.
Heute ist die neue Website von meinem Vater Matthias Griewisch online gestellt worden; die von mir erstellte page wurde ein wenig mit modernen Techniken aufgepeppt. Während zum Beispiel der Quellcode der alten Website, die mit dem WYSIWYG- Editor Frontpage erstellt wurde, entsprechend grausam aussah (immer wieder die selbe Formatierungsanweisung in jedem neuen Absatz <p>; meist sogar nicht mal mit CSS, sondern umschrieben mit <strong>, <b> …), die Webseite die inzwischen veralteten Frames benutzte und als Kontaktformular eine Frontpage- Servererweiterung nutzte (was hieß, dass der Server extra eine Erweiterung braucht, dass er dieses Tool ausführen kann), ist die neue Homepage nun bedeutend professioneller: Der Quellcode ist, weil wir in von Hand erstellt haben, äußerst übersichtlich und gut struktiert; <strong> oder <b> werden nun nicht mehr als Umschreibung für fett genutzt, sondern eine kleine CSS- Regel, die, wie alle CSS, die diese Website verwendet, ausgelagert ist, sorgt nun für diese fette Darstellung:
font-weight: bold;
Wie gesagt, gut struktierter Quelltext, ausgelagerte CSS (Cascading Style Sheets – dienen zum Gestalten von Websiten) … Aber nein, das war noch lange nicht alles: Immer wieder kehrende Elemente – wie zum Beispiel der Header – wurden mit SSI (Server Side Includes) in externe Dateien ausgelagert; das macht es für den Administrator der Website – also mein Vater – später einmal leichter, zum Beispiel einen neuen Punkt in der Navigation hinzuzufügen. Auf Frames wurde komplett verzichtet; das Kontaktformular wird nun auch nicht mehr über Frontpage- Servererweiterungen gehandhabt, sondern schön mit einem einfachen PHP- Formmailer gesteuert.
Ein Originalzitat aus dem Rundbrief, den mein Vater über ein neues Instrument verfasst hat und an dessen Ende er auch ein wenig auf seine Homepage aufmerksam macht:
Wie ich von meinem 15- jährigen Sohn Hans erfahren musste, entsprach meine alte website nun überhaupt nicht mehr modernem Standard. Ich hatte gedacht, daß HTML die Sprache des webs und mithin ausreichend sei, aber von ihm weiß ich nun, dass man heute auch CSS, SSI, PHP, MooTools, jQuery und vieles andere mehr braucht, wenn man auf eine halbwegs zeitgemäße Darstellung aus ist. Wohlan denn, besuchen Sie ‘unsere’ neue website: hoffentlich klarer, strukturierter, dynamischer!Matthias Griewisch, Rundbrief “Gregori”
Kleine Anmerkung meinerseits: HTML ist die Sprache des webs (Originalzitat W3C: “What is HTML? HTML is the publishing language of the World Wide Web.”), nur ist sie allein halt einfach nicht zum Gestalten von Websiten gedacht; dazu braucht man dann CSS.
Aber was ist jetzt dynamischer an der neuen Website? Was sind MooTools, was ist jQuery? Die Antwort: Javascript- Frameworks. Für den Englisch- Hasser: Javascript- Bibliotheken. Ich habe sie bei Referenzen (“Accordion- Effect”) und bei Diskographie (“Tablesorter- Plugin”) zum Einsatz kommen lassen.
Nun, ich hoffe, Ihnen gefällt die website. Feedback erwünscht!
Vielen Dank.