Neue Version der HTML-Struktur des Webbaukastens

Die HTML-Struktur des Webbaukastens wurde aktualisiert. Hierbei wurde auf HTML5 umgestellt, ein neue Bereich „Sidebar“ eingefügt und verschiedene kleinere Korrekturen vorgenommen.

Die Änderungen im Detail:

Neuer Bereich Sidebar

Zur besseren und flexibleren Gestaltung für neue Designs wurde ein „Sidebar“-Bereich eingebaut. Dieser befindet sich im Source-Code direkt vor dem Content-Bereich und nach dem Menü.

bei neuen Designs wird die Sidebar die Aufgabe des bisherigen Bereiches „Zusatzinfo“ übernehmen. (Der Bereich „Zusatzinfo“ bleibt jedoch erhalten). Der neue Bereich macht es durch seine Positionierung im HTML-Code für Designer einfacher, die verschiedenen Bereiche optisch zu positinieren. So ist es möglich, die optische Reihenfolge und Darstellung von Menu, Sidebar und Contentbereich nach beliebigen zu setzen.

Zur Ansteuerung der Sidebar (sofern in Benutzung) via CSS-Anweisungen sollte via des HTML5-Tags <aside> oder über die CSS-Id „sidebar“ erfolgen.

Die Sidebar wird in der HTML-Struktur über ein ServerSideInclude eingebunden. Sie befindet sich in der Datei /ssi/sidebar.shtml .

Für den Fall, dass die Datei nicht vorhanden ist, aber neu angelegt werden soll, kann der folgende HTML-Code als Vorlage verwendet werden:

<aside><div id="sidebar" class="noprint"> <!-- begin: sidebar -->
  <!-- Inhalt hier -->
</div></aside> <!-- end: sidebar -->

Der NavEditor unterstützt ab der Version 2.13.0219 die Sidebar.

 

Umstellung von XHTML auf HTML

Das HTML-Grundgerüst wurde von XHTML strict auf HTML5 umgestellt. Dies hat für alte Webauftritte keine Folgen. Lediglich für neue Webdesigns, die HTML5-Anweisungen benötigen, ist dies notwendig.

In diesem Zusammenhang wurden die Bereichsmarken <header>, <aside> und <footer> in das HTML-Grundgerüst eingebaut.

 

Anzeige des Änderungsdatums einer Seite

Die Ausgabe für die letzte Änderung einer Webseite wurde so geändert, daß nur noch das Datum angezeigt wird.

Sollte gewünscht sein, daß alte Format mit Angabe der Uhrzeit zu erhalten, ist in den einzelnen HTML-Dateien folgende Zeile zu ändern:

 <p class="last_modified"><span>Letzte Änderung:</span> <!--#config timefmt="%d.%m.%Y"--><!--#echo var="LAST_MODIFIED"--></p>

Wird geändert in:

 <p class="last_modified"><span>Letzte Änderung:</span> <!--#config timefmt="%d.%m.%Y, %H:%M Uhr"--><!--#echo var="LAST_MODIFIED"--></p>

Also konkret wird dies geändert:

<!--#config timefmt="%d.%m.%Y, %H:%M Uhr"-->

Die Neuerung bitet auch den Vorteil, daß man mit einer einfachen CSS-Anweisung den Text „Letzte Änderung: “ einfach unsichtbar stellen kann. Die notwendige Anweisung im CSS wäre:

  p.last_modified span {
   display: none;
  }

Diese Anweisung könnte in einer eigenen Basemod-Datei eingefügt werden.

Entfernung der alten UnivIS-Perlskripten aus dem CGI-BIN

Die alten Skripten zum Einbinden von UnivIS-Ausgaben wurden entfernt. Stattdessen soll ein neues PHP-Skript verwendet werden, welches diese Aufgabe übernmimmt und dazu noch mehr Funktionen mitbringt. Zudem ist es schneller im Aufruf von Daten.

Das neue PHP-Skript befindet sich im Muster im Verzeichnis /vkdaten/tools/univis/ . Eine Anleitung zum Einbau und zur Nutzung findet sich (in Kürze) auf der Webbaukasten-Website.

 

Webauftritt aktualisieren

Um einen bestehenden Webauftritt auf die neue Struktur zu aktualisieren ist unter Umständen „Handarbeit“ notwendig. Dies muss mit einem echten HTML-Editor durchgeführt werden. Der NavEditor ist hierzu nur eingeschränkt fähig. Die neue Version des NavEditors (Version 2.13.0306)  erstellt zwar bereits neue Seiten richtig; kann jedoch alte vorhandene Seiten nicht vollständig aktuallisieren.

Folgende Schritte sind mit einem HTML-Editor pro einzelne SHTML-Datei vorzunehmen. Es empfiehlt sich, einen professionellen Editor zu nutzen, der über eine Suchen & Ersetzen-Funltion verfügt, die über mehrere Dateien gleichzeitig geht.

1. Ändern des Kopfteils (Zeilen 1 und 2)

Die ersten Zeilen der HTML-Datei sollen wie folgt aussehen:

<!DOCTYPE html>
<html lang="de">

Vorher fand sich dort die Definition zu XHTML strict. Diese ist zu ersetzen.

2. Hinzufügen des <header>-Tags (Zeile 13).

Vor der Anweisung

<div id="kopf">

ist der HTHML-Tag

<header>

zusätzlich einzubauen.

Etwa in Zeile 21 (abhängig vom Inhalt der dazwischen ist) ist die Anweisung

</div> <!-- end: kopf -->

durch

</div></header> <!-- end: kopf -->

zu ersetzen.

3. Hinzufügen des Sidebar-Includes

Etwa ab der Zeile 33 befindet sich der <div>-Bereich mit den Conent:

<div id="content> <!-- begin: content -->

Sehr wahrscheinlich befinden sich davor auch zusätzlich zwei Kommentarzeilen die nur sagen, daß ab hier der Content losgeht.

Davor wird eine neue Zeile eingefügt, die so aussieht:

<!--#include virtual="/ssi/sidebar.shtml" -->

Wenn die Datei sidebar.shtml nicht existiert, sollte sie angelegt werden. Es reicht hier dazu, eine leere Datei mit dem Namen sidebar.shtml im Verzeichnis ssi/  abzulegen. Man kann alternativ auch folgenden Inhalt in die Sidebar speichern:

<aside><div id="sidebar"> <!-- begin: sidebar -->
  <!-- Inhalt hier -->
</div></aside> <!-- end: sidebar -->

4. Hinzufügen des <footer>-Tags

Im unteren Teil des HTML-Dokuments findet man die folgende <div>:

<div id="footer"> <!-- begin: footer -->

Vor dieser Anweisung wird schlicht der neue HTML-Tag <footer> eingefügt.

Etwa 6 Zeilen weiter unten findet sich dann noch der abschliessende </div>:

</div>  <!-- end: footer -->

Hier wird auch die Endanweisung vom </footer> eingefügt:

</div></footer> <!-- end: footer -->

 

Hinweis: Einige Webauftritte sind so alt, dass sie die HTML-Kommentare  <!– begin: Bereich –> und <!– end: Bereich –> nicht enthalten sind. Dies ändert das grundsätzliche vorgehen nicht. Jedoch muss hier sorgsamer darauf geachtet werden, dass die richtigen Bereichsenden gefunden werden.

Aktualisierung von Webauftritten durch das Webteam

Unter Umständen ist es möglich, dass das Webteam die Aktualisierung für einen Webauftritt vornimmt. Handelt es sich um einen kleinen Webauftritt mit nur einem Dutzend oder weniger Inhaltsseiten, kann dies möglicherweise -abhängig von der Verfügbarkeit und Prioritäten anderen Aufgaben- vom Webteam kostenfei übernommen werden. Bei größeren Webauftritten ist jedoch leider eine Kostenerstattung des Zeitaufwands nach den üblichen Sätzen notwendig.

 

 

 

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.

 

 

Neue Domainnamen und die Suchmaschine

Bekanntlicherweise sind alle Webauftritte die vom RRZE betreut werden, auch mit den alternativen Domainnamen versehen. (Vgl. auch die Meldung vom 19. Mai ).

So trägt beispielsweise der Webauftritt des Webbaukastens seit mehreren Jahren den Domainnamen www.vorlagen.uni-erlangen.de  .  Bereits seit Ende 2010 funktionieren aber auch die Formen vorlagen.uni-erlangen.de, www.vorlagen.fau.de und vorlagen.fau.de um an dasselbe Ziel zu kommen.

Allerdings gab es ein Problem hinsichtlich der zentralen Suchmaschine: Die Suchmaschine kennt diese Aliase nicht. Und aus technischen Gründen ist es nicht einfach möglich, dem Trefferindex nachträglich neue Namen zuzuordnen.

Somit funktionierte die in den Webseiten des Webbaukastens eingebettete Suchmaschine nur dann richtig, wenn der Webauftritt vorher mit der herkömlichen, langen Form des Domainnamens aufgerufen wurde. Bei Nutzung einer kurzen Form, wurden keinerlei Treffer gefunden.

Dieses Problem wurde nunmehr behoben.
Allerdings kann konnte keine zentrale Lösung gebaut werden, die ab sofort und automatisch auf alle Webauftritte wirkt. Stattdessen ist es für jeden Webauftritt individuell notwendig, das entsprechen CGI-Skript der Suche zu aktualisieren. Diese Aufgabe muss von allen Webmastern der Webauftritte selbst gemacht werden (oder diese müssen uns beauftragen, daß wir es tun).

Zur Aktualisierung gehen Sie wie folgt vor:

  1.  Melden Sie sich mit der Hauptwebmasterkennung des Webauftritts auf den Server infodialog an.
  2. Wechseln Sie in das CGI-Verzeichnis Ihres Webauftritts
  3. Kopieren Sie die Datei aus demMusterverzeichnis /proj/websource/docs/muster/www.defaultwebauftritt.uni-erlangen.de/cgi-bin/suche.pl   in das CGI-Verzeichnis in dem Sie zuvor gewechselt sind.
  4. Prüfen Sie, ob die Dateirechte korrekt sind: Das Skript ist eine Anwendung, die ausführbar sein muss. Also muss die Datei suche.pl auch das „Ausführflag“ besitzen.
    (Unter Unix/Linux führen Sie einfach ein chmod 755 suche.pl   aus)

Wenn Ihnen dies alles unklar erscheint, können Sie das Webteam auch darum bitten, diese Aktualisierung für Sie vorzunehmen.

 

 

Präsentation zum CMS NavEditor (Update)

Der NavEditor2 hat sich im Verlauf der letzten Jahre zu einem hilfreichen Werkzeug und einfachen CMS entwickelt.

Bei der Entwicklung gilt die Prämisse, daß der NavEditor ein Werkzeug sein soll, der möglichst ohne Schulung nutzbar sein soll.

Zudem soll der NavEditor immer als modulares Werkzeug zu einem Webauftritt fungieren. Das bedeutet, daß der Webauftritt jederzeit auch ohne den NavEditor funktionieren muss und Webmaster auch andere Editoren verwenden können sollten.
Die Balance zwischen einfacher und intuitiver Benutzbarkeit einerseits, einem großem Funktionsumfang, der die Bedienung komplexer macht, andererseits ist dabei nur schwer zu halten.

Aufgrund der langjährigen Entwicklung und Verbesserung des NavEditors hat sich dieser inzwischen sehr gewandelt. War er am Anfang noch sehr experimentell und hatte nur einen eingeschränkten Funktionsumfang,  hat sich inzwichen sehr viel getan.

Aus diesem Grund möchte ich den aktuellen Stand des NavEditors in einem „Hands on“-Vortrag präsentieren.

Dabei werden die einzelnen Funktionen der aktuellen Version gezeigt und auf übliche Probleme und derren Lösungen eingegangen. Ausserdem möchte ich die Gelegenheit nutzen um Feedback zu neuen Entwicklungen zu bekommen.

 

Die Vorstellung findet statt am

14.12.2011 um 15.00 Uhr s.t.

im Südgelände:

Informatikhochhaus (Wolfgang-Händler-Hochhaus),
Martensstrasse 3
91058 Erlangen

im Raum 12.150.

Da der Raum nur 16 Personen Platz bietet, möchte ich alle die kommen wollen um vorherige Rückmeldung an webmaster@rrze.uni-erlangen.de bitten.

 

Update 12.12.:

Für alle Plätze liegen nun Anmeldungen vor, der Raum ist voll.

Falls Sie trotzdem noch Interesse haben, möchte ich dennoch um eine E-Mail bitten. Sollten sich genug Personen melden, werde ich eine weitere Präsentation im Januar planen.