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.

 

 

Kleine Updates an CSS und Navigationsskript


Updates an den CSS-Designs

Die CSS-Vorlagen haben ein paar kleinere Updates:

  • In allen Designs gibt es nun eine neue Option: FAU Siegel im Hintergrund einblenden. Diese Option erlaubt es, daß man im Inhaltsbereich an der rechten Seite und etwas nach unten verschoben das FAU-Siegel als Wasserzeichen sieht.
    Bitte beachten Sie, daß zur Nutzung auch das verzeichnis /img/logos/fau/   aktualisiert werden muss und nicht nur die CSS-Dateien.
  • Alle CSS-Designs enthalten für die Schaltung von wechselnden Farbhintergründen bei Tabellen nun die Klasse “wechselfarbe”.
    Dies bedeutet daß jede zweite Tabellenzeile andersfarbig gezeigt wird. Hierzu bedarf es nur das Setzen der Klasse in dem <table>-Tag:  <table class=”wechselfarbe”> 
  • Beim Design D3 wurde eine Option eingebaut, die den kleinen bunten Farbbalken ganz oben ausblendet. Dieser etwa 5 Pixel hohe Farbbalken war Teil des Designs. Viele Webmaster haben aber allerdings immer wieder danach gefragt, ob es ein Fehler sei und wie man das wegbekäme.
    Die basemod_disable_top_stripe.css muss lediglich in der layout.css aktiviert werden, dann ist es weg.

Neue Version vom Navigationsskript

Es gibt es bei dem Navigationsskript cgi-bin/navigation/navigation.pl   eine neue Version. 

Diese neue Version erlaubt per Konfigurationsvariable “ZeigeBaum” mit dem Wert “2″, daß der gesamte Baum immer vollständig geöffnet angezeigt wird. Dies wird benutzt um die Gestaltung zukünftiger neuer Designs zu unterstützen, bei denen die Anzeige von Navigationsebenen mit Hilfe von CSS3/HTML5 gesteuert werden soll.
Möglicherweise wird es an dem Skript noch Ergänzungen geben um zusätzliche Klassennamen einzufügen.

[via Uniportal]

Relaunches am 1.12.2011

Heute wurden zwei weitere Websites mit Nutzung des Webbaukastens relauncht.

Bei der ersten handelt es sich um die Website Masters of Arts  – The Americas / Las Américas aus der philosphischen Fakultät.

Grundlage für diesen Relaunch war das Design Nummer 4 und eine Printproduktion. Leider wurde das Webteam hinsichtlich Fragen des Webdesigns erst hinzugezogen, nachdem ein Printdesign und der Druck von Flyern fertig gestellt wurden.
Die vom Print vorgegebene Grafik und dessen Aufbau waren nicht unbedingt für eine Webdarstellung geeignet. So ist bspw. die Position des amerikanischen Kontinents in der Grafik in Hinblick auf die Benutzbarkeit ungünstig und die verwendete Grundfarbe nicht exakt verwendbar, da sie auf Bildschirmansichten zu kontrastschwach ist. Aus diesem Grund wurde als Minimalmaßnahme fürs Web die Bannergrafik neu gesetzt und andere Farben definiert.

Es gäbe daher noch viel mehr Optimierungspotential. Dies würde jedoch aufwendiger werden und die Printerzeugnisse müssten sich dann ebenfalls nach dem wichtigeren Onlinemedium richten (und nicht umgekehrt).

Die Bearbeitung der Inhalte der Website erfolgt mit dem CMS NavEditor.

 

Ein weiterer Webauftritt der heute relauncht wurde, kommt aus der Techfak. Hier gibt es allerdings noch einige Probleme bei der Umsetzung, da manche Dinge nicht so gemacht wurden, wie wir es empfohlen oder dokumentiert haben. Daher dazu erst morgen mehr, wenn die Probleme behoben sind.

 

Sollten Sie selbst bei Webauftritten Probleme und Fragen haben oder sich eine neutrale ergebnisoffene Beratung wünschen, steht Ihnen das Webteam des RRZE gern zur Verfügung.

Bitte wenden Sie sich bei Fragen auf dem Gebiet von Webauftritten direkt und ohne Umwege an uns unter der Mailadresse webmaster@rrze.uni-erlangen.de .

 

Kleinere Updates bei Designs und Download-Paketen des Webbaukastens

Soeben wurde eine neue Version des Downloadpakete des Webbaukastens ins Netz gestellt. Bei der neuen Version wurden im Unterschied zur letzten großen Änderung im Wesentlichen nur marginale Verbesserungen eingebaut.

Folgende Änderungen wurden eingefügt:

  • Die Designs d3, d4, d7 und das neue Techfak-Design wurden um ein optionale CSS-Datei “screen/basemod_links” ergänzt. Diese CSS-Datei ermöglicht die automatisches optische Darstellung von Link-Symbolen für Medientypen (z.B. PDF) und bei externen Links.
  • Zusammen mit der optionalen CSS-Datei für Link-Symbole, wurde das Verzeichnis websource/img/links/ um einige weitere Bilder ergänzt.
  • Es wurde ein neues Verzeichnis “bin” direkt unter der obersten Verzeichnisebene des Webauftritts angelegt. In diesem Verzeichnis befindet sich ein beispielhaftes Shellskript, welches zeigt, wie mit RSS-Feeds von fremden Quellen ausgelesen und als statische Datei auf dem Webauftritt abgespeichert werden kann. Diese Datei kann dann später über Include-Anweisung an verschiedenen Stellen der Webseite eingebunden werden. Zweck ist es, auf diese Weise den Zugriff auf dynamisch erstellte Inhalte spürbar zu beschleunigen.

 

Techfak Website aktualisiert

Die Website der Techfak wurde heute früh auf einem neuen Stand gebracht:

  • Das Design der Website wurde aktualisiert auf das sogenannte Techfak-Design,welches seit dem Sommer im Webbaukasten zu finden ist.
    Damit verbunden ist nun auch eine flexible Darstellung des Inhaltes abhängig von der Anzeigegröße des jeweiligen Browsers. Die aktuellen Designs des Webbaukastens unterstützen dabei mitHilfe der Technik der  “Media Querys” insbesondere die Darstellung auf Smartphones.
  • Fehlerhafte HTML-Seiten wurden korrigiert.
  • Die derzeit 6 Redakteure verwenden zur Bearbeitung von Inhalten die aktuelle Version des CMS  NavEditors2.
  • Aktuelle Meldungen werden nicht mehr händisch als statische Seiteninhalte geschrieben, sondern über das Blogsystem provisioniert:Das Techfak-Blog enthält über verschiedene Kategorien verteilt die wichtigsten Meldungen aus der Techfak.
    (Somit können die Meldungen der Techfak nun auch für andere Webangebote verwendet und über RSS abboniert werden.)

Die Navigation und das Grundkonzept des Techfak-Designs wurden dabei nicht geändert.
Dieses wäre Aufgabe einer weitergehenden Umstellungsmaßnahme.