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.

 

 

 

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]

Neues Standarddesign und kleinere Updates am CSS-Design

Mit dem gestrigen Update erhält der Web-Baukasten ein neues Standarddesign. Das neue Design „Techfak“ ist eine aktualisierte und bereinigte Version des bereits von der Website der Technischen Fakultät bekannten Designs. Die Vorlage beinhaltet standardmäßig einige Modifikationen, die beispielsweise verschiedene Farbgestaltungen (nach dem Vorbild der Departments der Techn. Fakultät) aktivieren. Das neue Design ist ab sofort in allen Komplettpaketen enthalten ( http://vorlagen.fau.de/downloads/komplettpakete.php ).

Weitere Informationen zum Design „Techfak“ gibt es unter: http://vorlagen.fau.de/designs/design-techfak.shtml

Neue Funktionen & Bugfixes

In der neuen Version wurden einige kleine Darstellungsfehler (vor allem an der Version für Smartphones) behoben, sodass nun auch längere Titel mit Beschreibung (und auch mit Logo) im mobilen Design richtig dargestellt werden. Außerdem wurde das Headerstyling entsprechend aktualisiert, sodass (in der Design-Version für normale Bildschirme) nun problemlos Logo, Titel und Beschreibung gleichzeitig eingebunden werden können, ohne gesonderte Anpassungen an den CSS-Dateien durchführen zu müssen.

Die neue CSS-Klasse „flaggen“ wurde mit entsprechendem Styling für Sprachauswahlflaggen versehen. Diese erscheinen nun (falls sie verwendet werden) wahlweise rechts oben im Kopfbereich der Seite bzw. rechts über dem Inhaltsbereich der Seite (bei Integration der Sprachauswahl innerhalb des „content“-Div-Elements).

Auch am Styling des Feedimports und in anderen Bereichen der Designs wurden kleinere Fehler behoben, weshalb ein Update auf die neue Version in jedem Fall sinnvoll, aber nicht notwendig ist.

Mini-Update zur neuen CSS-Dateien

Bei der neuen Version des CSS-Frameworks kam es zu zwei kleinen Fehlern, welche die Behandlung der Webseiten durch fehlerhafte, veraltete Browser (IE7 und älter) betraf.

In den Dateien ssi/head(*).shtml-Dateien war die Zeile mit der Conditional Comment falsch; Sie enthielt den Tag <style />. Korrekt wäre jedoch gewesen <link />.

 

Die korrigierte Zeile lautet nunmehr (z.B. für das Design d4):

<!--&#91;if lte IE 7&#93;>
		<link href="/css/d4/patches/patch.css" rel="stylesheet" type="text/css" />
< !&#91;endif&#93;-->

Weiterhin wurden bei fast allen Layouts die IE6- und IE7-Hackdateien /css/designname/patches/patch.css um einige wenige Angaben zur Positionierung des Menus angepasst.

Die entsprechenden Pakete zum Download wurden bereits aktualisiert.
Für die direkte Kopie der Dateien, kann wie üblich auch direkt auf das Musterverzeichnis unter /proj/websource/docs/muster/www.defaultwebauftritt.uni-erlangen.de
zugegriffen werden.

Grundsätzlich muss jedoch darauf hingewiesen werden, daß die Unterstützung für fehlerhafte Software nur eingeschränkt erfolgen kann. Wer mit veralteter und fehlerhafter Software (älter als 5 Jahre) unterwegs ist, muss mit einer eingeschränkten Nutzbarkeit rechnen. Und dies gilt nicht etwa nur für den Webbaukasten, sondern für den Besuch auf fast allen modernen Webangeboten im Netz.

Das häufig vorgebrachte Argument, einige Unternehmen seien heutzutage noch mit einem Internet Explorer 6 (oder älter) unterwegs ist mit Blick auf die üblichen Updatezyklen bei zentral verwalteten  Installationen nicht mehr haltbar. Auch große IT-Unternehmen haben inzwischen die Unterstützung für diese Browser eingestellt, da der Aufwand zur Bereitstellung von Workarounds höher ist als der Nutzen durch sehr wenige verbliebene Anwender.

Neue Version des Webbaukastens und kein Plan beim aktualisieren?

Obgleich die Anleitung für das Update des Webbaukastens eigentlich keine Fragen offen lässt, tun sich manche schwer, die neue Version des Webbaukastens zu installieren.

Aus diesem Grund biete ich hiermit an: Die ersten 10 Webmaster die sich bei mir melden und einen Webauftritt mit einer alten und nicht selbst modifizierten Version des Webbaukastens betreiben, erhalten von mir ein kostenfreies Update.

Bei Interesse melden Sie sich hierzu an die Mailadresse   webmaster@rrze.uni-erlangen.de

Die ersten 10 gewinnen!

„Einsendeschluß“ ist der 21. Juli 2011.