Web-Dokumente im Corporate Design
der TU Chemnitz erstellen und pflegen
frank.richter@hrz.tu-chemnitz.de
, März 2019
- Hilfe:
webmaster@tu-chemnitz.de
Anforderungen an Webautoren
- Sprachlich perfekt: Rechtschreibung, Grammatik; inhaltlich: verständlich, aktuell
- … in deutsch und englisch
- Gestalterische Fähigkeiten: Farben, Aufteilung, Anordnung, Fotos – und allen soll es gefallen!
- Technisch: Fließende Kenntnisse in HTML, CSS, JavaScript, PHP, diverse Werkzeuge …
- Programmierung: Funktionalität und Sicherheit!
- … für Desktop, Tablet, Smartphone
- Barrierefreiheit: für Menschen mit Einschränkungen
- Rechtlich: Datenschutz, Urheberrecht
- Kommunikation, Dokumentation – immer auf dem Laufenden
- … und alles immer ganz schnell!
Anforderungen, auch für (temporäre) Hilfskräfte: → www.tu-chemnitz.de/urz/www/autoren.html
Architektur der Webserver
- Layer-4-Switch: Ausfallsicherheit, Lastverteilung
- Webserver: Linux, Apache, PHP, PHP-basiertes Layout-System
www.tu-chemnitz.de
– zentrale Webseiten:
Daten in /afs/tu-chemnitz.de/www/root
www-user.tu-chemnitz.de
– Homepages von Benutzern:
Daten in HOME/public_html
- AFS-Server: Datenspeicherung = Webspace: Zugriff von allen URZ-Rechnern via Dateiystem
- Datenbank-Server: MySQL für PHP-Anwendungen
- Autoren-Server:
wfm.hrz.tu-chemnitz.de
- Web-basierter Dateimanager WFM mit Autorensystem:
https://wfm.hrz.tu-chemnitz.de/wfm
- HTML-Editor, Formular zu Erstellung des „Rahmens“
- Unterstützung zur Erstellung fremdsprachiger Seiten
- Dateien erstellen, umbenennen, löschen
- Berechtigungen (AFS-Rechte) einstellen
- auch Zugang via SCP, SSH, SFTP
Technik:
- Trennung von Inhalt und Design
- Grundlegender Aufbau durch Layout-System
- Autoren benutzen ein Autorensystem, Design
entsteht „automatisch“ aus Vorgaben
- Bei Änderung im Design keine Änderung durch Autoren, sondern nur im
Layout-System
Schnelle Änderungen auf statischen Webseiten:
- Falls noch nicht angemeldet: Klick auf „Anmelden“ (Kopf- oder Fußzeile)
- am Web-Trust-Center anmelden
- zurück, Seite neu laden → „Für Autoren“ (Fußzeile)
- Falls berechtigt: im Editor ändern, speichern
Besonderheiten
- Seiten(teile) mit dynamischen Inhalten aus Datenbanken erzeugt:
Veranstaltungskalender, Artikel der Pressestelle
- können über PHP-Funktionen eingebunden werden
- zur Bearbeitung der Inhalte spezielle Admin-Schnittstellen
Corporate Design für Webseiten
Corporate Design (CD):
- Teilbereich der Corporate Identity (CI)
- beinhaltet gesamtes visuelles Erscheinungsbild eines Unternehmens oder einer Organisation (Kommunikationsmittel, Produktdesign)
- einheitliche Gesichtspunkte, um Wiedererkennungseffekt zu erreichen
- im WWW auch: sinnvolle Funktionen (Navigation, Suche) einheitlich,
Usability
Grundlegendes: www.tu-chemnitz.de/tu/pressestelle/cd/
Historie:
www-user.tu-chemnitz.de/~fri/museum/
Gestaltungs-/Funktionselemente sind vorgegeben:
- Kopf (Logo ...), Navigation, Suche, Inhaltsmenü, Fuß (Autor, Datum, Adresse ...)
- Farben, Schriftarten, Gestaltungs- und Funktionselemente
Autoren- und Layout-System TUCAL
Eine Gruppe zusammengehörender Webseiten („Buch“) stellt man am besten in einen
separaten Ordner. Die Startseite dieses Webangebots heißt
index.html
(oder index.php
).
Der Rahmen (Kopf, Inhalts-Menü, Fuß), in dem alle
Webseiten dieses „Buches“ erscheinen,
wird in einer Datei config.inc
festgelegt (PHP-Syntax,
siehe Beispiel der oben gezeigten Webseite).
Diese Rahmendefinition wird mit einem Formular im Autorensystem mittels Webbrowser erstellt und bearbeitet.
Weitere Informationen zu dieser Datei config.inc
:
www.tu-chemnitz.de/urz/www/rahmen.html#var.
Für jede Webseite
ist eine Datei anzulegen, dessen Namen man in den
Definitionen des Inhalt-Menüs in config.inc
festlegt.
Diese muss die Endung .html
(oder .php
) tragen.
- Eine jede Datei beginnt mit dieser Zeile (erledigt das Autorensystem):
<?php require_once('config.inc'); seite(__FILE__); ?>
Hinter require_once
muss die zugehörige config.inc
angegeben werden, in der der Rahmen definiert ist. Die kann auch in
einem anderen Ordner stehen.
Der Funktion seite()
wird
der Name der anzuzeigenden Datei übergeben:
__FILE__ |
der Normalfall, die Datei selbst. D.h. alles was nach der
ersten Zeile folgt, wird im Rahmen dargestellt, der in config.inc
festgelegt wurde.
Nach dieser ersten Zeile folgt dann der eigentliche Inhalt, s.u.
|
'Dateiname' |
Inhalt einer anderen Datei: Dateiname = URL-Pfad ohne führenden /
|
Der eigentliche Inhalt der Seite kann bestehen aus:
- HTML (statische Webseiten)
Beliebiger HTML-Kode ohne die einleitenden HTML-Tags bis
einschließlich <body>
und ohne
abschließende Tags ab </body>
– erstellbar mit HTML-Editor im Autorensystem
- PHP (dynamische Webseiten)
-
Beliebiger PHP-Kode. Bitte beachten:
- Die in
config.inc
gesetzten Variablen sollten nicht
überschrieben werden.
- Globale Variablen aus URL oder Formularen sind über die in PHP
vordefinierten globalen Felder zugreifbar:
$_REQUEST['variablenname']
,
nicht $variablenname
Beispiel der oben gezeigten Webseite
Planung
- Welche Inhalte, wie angeordnet – Menüstruktur
- Gründlich überlegen, an Vorlagen oder guten Vorbildern
orientieren:
- Abbildung auf Dateien / Ordner:
- Die Datei- bzw. Ordnernamen werden Teil des URLs (der
Webadresse) – deswegen gut überlegen!
- Prägnanter Name – alles Kleinbuchstaben oder Ziffern,
keine Sonderzeichen, Umlaute, Leerzeichen o.ä.
- Wir empfehlen die Dateiendung .html. Auch in diesen Dateien wird PHP-Code interpretiert, daher muss der Dateiname nicht mit .php
enden.
- Spätere Umbenennungen sind aufwändig, da dies Änderungen in Ihren Dokumenten und denen anderer (vielleicht unbekannter) Autoren
erfordert.
- Ein „Projekt“ – ein Ordner.
In jeden Ordner eine „Start-Datei“ index.html
- An eingerichtete Strukturen halten, Dateien in die Ordner,
in die sie gehören.
- Ordnung halten – alte Dateien löschen.
- Bilder in ein Unterverzeichnis schaffen, z.B. bilder,
das erhöht die Übersicht.
Beispiel:
- Dokumente mit besonderen Zugriffsrechten: eigener Ordner
Realisierung mit TUCAL
Mit Web-basiertem Datei-Manager WFM:
https://login.tu-chemnitz.de/
→ Zugriff auf Dateien
- In entsprechenden Ordner im Webspace
wechseln, ggf. ein neuen Ordner anlegen.
- Rahmendefinition erstellen:
- Neue Datei config.inc anlegen, TU Corp. Design:
Rahmen
- Formular ausfüllen: Navigation, Menü, Autor usw. festlegen
- Speichern
- Für jede Seite eine Datei anlegen:
- TU Corp. Design: Inhalt
- In HTML-Editor Inhalt erstellen/einfügen oder ändern, Bedienung weitgehend wie Textverarbeitung
- Speichern
- Webansicht via Klick auf
- Bearbeiten: Klick auf
Prinzipiell auch möglich:
- Erstellen der Dateien auf lokalem Rechner
- Überspielen der Dateien via WFM oder SCP, SFTP oder Netzlaufwerk
Hinweise zur Gestaltung
- Achten Sie auf korrekte Rechtschreibung und Verständlichkeit!
- Vermeiden Sie schrille Farben, Laufschriften, blinkende Schrift bzw. animierte Bilder. Verwenden Sie die vordefinierten
Formate: www.tu-chemnitz.de/urz/www/css.html.
- Skalieren Sie Bilder, insbesondere Fotos, auf die richtige Größe und versehen Sie diese mit der Klasse
"img-responsive"
.
- Die wesentlichen Funktionen sollten auch ohne Javascript zugänglich sein. Kein Java, Flash, keine Plugins.
- Sichern Sie die HTML-Konformität und Link-Konsistenz, z. B. mittels
- Unsere Webseiten sollen auf möglichst allen Anzeigegeräten gut lesbar sein – auf Smartphones, Tablets, Desktop-, TV- u. a. hochauflösenden Bildschirmen, für sehbehinderte
Menschen und ausgedruckt auf Papier. → Aspekte des „Responsive Webdesign“ beachten: Inhalt passt sich an die zur Verfügung stehende
Auflösung des Endgerätes an – www.tu-chemnitz.de/urz/www/responsive.html
Erstellung fremdsprachiger Webseiten
1. Vollständige Übersetzung mit identischer Struktur
Empfohlene Variante: Die grundlegende Struktur der bestehenden deutschen Seiten wird beibehalten.
Für jede übersetzte Seite wird automatisch ein Verweis auf die jeweils andere Sprachversion eingefügt, falls diese vorhanden ist:
Im Seitenkopf ist die Sprache dann umschaltbar.
- Ändern Sie via WFM die Datei
config.inc
:
- Erstellen einer Datei
config.inc.en
:
Stellen Sie die Vernüpfung zu Deutsch auf "automatisch anhand Endung" und übersetzen Sie insbesondere die Navigations-Hierarchie und die Menü-Leiste(n). Hängen Sie an den Dateinamen jeweils .en
an.
- Für jede Inhaltsseite erzeugen Sie eine entsprechende englische
Seite, indem Sie auf das Symbol klicken. So entsteht z .B. aus
index.html
eine Datei index.html.en
Zur
Übersetzung sind einige Hilfsmittel eingebunden (Google Übersetzung,
BEOLINGUS-Wörterbuch). Diese Unterstützung ist z.Z. nur für
Englisch umgesetzt. Die Dateiendungen für die anderen Sprachen:
Französisch .fr
, Russisch .ru
,
Tschechisch .cz
, Polnisch .pl
Als Verknüpfung zur Fremdsprache in Schritt 1. können Sie auch "automatisch anhand Endung oder maschinelle Übersetzung" auswählen.
Dann wird für jede Seite, für die es (noch) keine erstellte Übersetzung gibt, ein Verweis zum Google-Übersetzer eingefügt:
Dies bietet oft nur geringen Nutzen, da die maschinelle Übersetzung nicht optimal und sogar irreführend sein kann.
2. Teilweise Übersetzung mit geänderter Struktur
Mit dieser Variante können Sie eine separate englische Version mit anderer Struktur aufbauen, um z. B. Seiten zusammenzufassen und nur die wichtigsten Informationen zu übersetzen. Die Umschaltung erfolgt hier nicht „zielgenau“ wie bei Variante 1, sondern führt immer zu einer festen Anfangsseite.
- Erstellen Sie diese englischen Seiten am besten in einem Unterverzeichnis, z. B. mit Namen
en
.
Diese Seiten verwenden ein eigenes config.inc
: Sprache für Rahmen: Englisch, Vernüpfung zu Deutsch: fester Pfad: ../
- Im
config.inc
der deutschen Seiten ändern Sie:
Beide Varianten können separat für die Sprachen Englisch, Französisch, Russisch, Tschechisch und Polnisch eingestellt werden. So können Sie z.B. eine vollständige englische Übersetzung anbieten, während Sie für andere Sprachen auf eine maschinelle Übersetzung verweisen, z.B.
Barrierefreie Webseiten
Inhalte von Webseiten sind Menschen mit Beeinträchtigungen häufig nur schwer oder unvollständig zugänglich. Bei der Erstellung von Webseiten sind daher besondere Anforderungen zu
berücksichtigen, um diese Barrieren abzubauen. Dazu gehört beispielsweise, bestimmter Kontrastwerte einzuhalten und den Code der Seiten so zu gestalten, dass er mit Hilfe spezieller
Software (Screenreader) für die nicht-visuelle Ausgabe, wie Sprache oder die Braille-Zeile, interpretierbar ist.
Einstellung des Zugriffsschutzes
Sicheres Programmieren
Weitere Hinweise