Neue Version der HTML-Struktur des Webbaukastens

Mittwoch, 6. März 2013

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.