Webworking

Nachrichten und Artikel des WebTeams

Inhalt

Web-Baukasten: Neue Varianten für das Techfak-Design

Ab sofort stehen für das Techfak-Design im Web-Baukasten neue optionale Varianten zur Verfügung.

Seit einiger Zeit gibt es ein Techfak-Design im Web-Baukasten. Dieses basierte auf der Gestaltung des Fakultätswebauftritts:

Ein blau-gekachelter Balken oben, mit den fünf Farbpunkten welche die einzelnen Departments repräsentieren links darin. Darinter eine dreispaltige Seite, mit dem Menü links, den Inhaltsbereich in der Mitte einer einer dritten Spalte für Zusatzinformationen.

Vor einiger Zeit wurde im Bereich der Studiengänge jedoch auch ein eigenes Webdesign eingeführt. Dieses basierte auf einer noch älteren Vorlage. Das Design war nicht Teil des Web-Baukastens und ist leider auch aus fachlicher Sicht nicht optimal umgesetzt gewesen.

Dieses Design erkennt man daran, daß oben links an der Stelle, wo normalerweise ein eigenes Logo sitzt, das alte Techfak-Logo positioniert wurde (mit Verlinkung auf die Techfak-Homepage) . Ausserdem führt eine weiße Linie über den gesamten Balken und macht kurz vor dem Ende ein Haken in Form einer Box.

Die Webseiten, die es nutzten, basierten zwar in großen Teilen auf dem Framework des Web-Baukastens, hatten aber an einer entscheidenden Stelle eigene Definitionen im HTML eingeführt. In der Folge dieser individuellen Definitionen kam es immer wieder zu Problemen. Insbesondere in Zusammenspiel mit dem CMS NavEditor kam es zu Darstellungsfehlern, da dieser ein korrekt umgesetztes Framework erwartete. Die individuell vorgenomme Änderung war jedoch an einer besonders kritischen Stelle und für das CMS nicht bekannt.
Bei dem Anlegen neuer Seiten legte das CMS dann auch Webseiten gemäß der Originalvorlage des Web-Baukastens an, nicht aber nach den individuellen Modifikationen.

Für mich als Projektleiter des Vorlagenkatalogs war dabei besonders ärgerlich, dass obwohl diese Probleme nur durch die individuellen Modifikationen (und der schlechten Usability der Designvariante) verursacht wurden,  die Schuld  immer dem Web-Baukasten oder wahlweise dem NavEditor gegeben wurde.

Nachdem eine Anfrage aus einem Studiengang kam, bei der Lösung der Probleme zu helfen, entschied ich mich daher, mehrere entsprechende Varianten des Techfak-Designs einzustellen. Dabei ging ich nach einiger Überredungsarbeit von Dritten trotz schlechten Gewissens auch soweit, den Usability-Fehler mit der Positionierung des alten Techfak-Logos (anstelle des eigenen Logos) an der oberen rechten Position  zu übernehmen. Die Verlinkung des alten Techfak-Logos mit den Website der Techfak entfällt aber.

Diese neuen Varianten sollen den Betreibern der betreffenden Webauftritte den Umstieg auf den originalen Web-Baukasten erleichtern, da die Optik im wesentlichen dieselbe bleibt.

Gleichzeitig wurde aber auch eine ganz neue Variante bereitgestellt, die das neue Techfak-Logo verwendet und dieses auch an einer anderen Stelle positioniert. Diese Variante steht als (durchaus verführerisch gemeinter) Vorschlag zur freien Nutzung zur Verfügung.

Die neuen Varianten stehen mit allen Departmentfarben und den weiteren Mischfarben aus den Studiengängen zur Verfügung:

Für die Departments:

  • Gelb (Elektronik, Elektrotechnik, Informationstechnik)
  • Hellblau (Informatik)
  • Orange (Chemie und Bioingenieurwesen)
  • Grün (Maschinenbau)
  • Rot (Werkstoffwissenschaften)

Weitere Farben für die Studiengänge:

  • Hellgrau(Life Science, …)
  • Karibikgrün(Medizintechnik, Computational Ingineering, …)

Weitere Optionen, die auf allen Farbvarianten geschaltet werden können:

  • Einschaltung des FAU-Siegels als Hintergrundbild für den Inhaltsbereich
  • Zweispaltige Gestaltung
  • Ausblendung des Zielgruppenmenüs
  • Automatisch Linkicons

Bei Nutzung des originalen Web-Baukastens und des CMS NavEditor ist ein  aktivieren von beliebigen Farbkombinationen und Optionen durch nur zwei Mausklicks möglich.
Auch ohne das CMS ist die Aktivierung durch Änderung der zentralen Layout-CSS-Datei eine Sache von Sekunden. (Immer vorausgesetzt, dass die Website auf den aktuellen Web-Baukasten-Framework beruht und dabei die aktuellen CSS-Designs hat.)

Screenshots der Designvarianten

Folgende Screenshots zeigen verschiedene Designvarianten.

 

 Installation oder Update

Die neuen Designs stehen all den Webauftritten bereits automatisch zur Verfügung, die seit dieser Woche neu installiert wurden. Bei älteren Webauftritten, müssen die jeweiligen Webmaster die neuen CSS-Dateien und die dazugehörigen Grafiken erst noch aktualisieren.

Die Aktualisierung erfolgt dabei direkt auf der Kommandozeile oder via SFTP. EIne Aktualisierung über den NavEditor ist nicht möglich.

Aktualisierung über Kommandozeile (Unix-Shell):

Kopieren Sie die Verzeichnisse /css und /grafiken   aus dem Musterwebauftritt in ihren eigenen. Wechseln Sie auf der Shell zunächst in das websource-Verzeichnis Ihres Webauftritts. Danach überschrieben Sie die alten CSS-Dateien und Grafiken wie folgt mit der aktuellen Version:

cp -R /proj/websource/docs/muster/www.defaultwebauftritt.uni-erlangen.de/css/*  css/
cp -R /proj/websource/docs/muster/www.defaultwebauftritt.uni-erlangen.de/grafiken/*  grafiken/

Falls ihr SSI-Verzeichnis älteren Datums ist als Juli 2011 sollten Sie ggf. auch diese Verzeichnisse erneuern:

cp -R /proj/websource/docs/muster/www.defaultwebauftritt.uni-erlangen.de/ssi/*  ssi/
cp -R /proj/websource/docs/muster/www.defaultwebauftritt.uni-erlangen.de/img/*  img/

Achtung: Durch die Aktualisierung des ssi-Verzeichnisses wurde wahrscheinlich ihr Design auf die Defaultvorgabe zurückgesetzt. Das heisst, Sie müssen danach wieder Ihr richtiges Design aktivieren.

Aktualisierung über SFTP:

Laden Sie sich die aktuellen Download-Files für CSS-Designs und Grafiken aus dem Webbaukasten.

Entpacken Sie die ZIP-Dateien auf ihren Rechner und kopieren Sie diese über SFTP dann in die jeweiligen Verzeichnisse /css und /grafiken .

Aktualisierung durch das Webteam:

Sollten Sie mit dem Update nicht klarkommen oder sich dies nicht zutrauen, können Sie sich auch via E-Mail an des Webteam wenden, damit wir dies für Sie vornehmen. Teilen Sie uns dabei auch mit, welches Design wir aktivieren sollen. Mit einer gewissen Vorlaufzeit und unter Berücksichtung anderer Termine werden wir dies dann erledigen, sofern auch tatsächlich der Web-Baukasten verwendet wird. Bachten Sie aber dabei bitte, daß wir individuelle Änderungen oder Modifikationen der betreffenden Websites nicht berücksichtigen können.