Tag: typo3

TYPO3 Flow 2.0 veröffentlicht in finaler Version

Wie auf der offiziellen TYPO3 Website kürzlich zu lesen war, wurde nach tausenden von Entwicklungsstunden und drei Beta-Versionen die finale 2.0 Version von TYPO3 Flow vom Core Team veröffentlicht. Diverses Feedback und neue Ideen sind in die neuste Version eingeflossen und macht Flow 2.0 zu einem sehr schnellen, innovativem und reifen Applikationsframework, welches jedem TYPO3 Entwickler eine mächtige Möglichkeit an die Hand gibt.

In den Release Notes findet man alles Wissenswertes rund um die neue Version und in folgendem Video kommen einige Köpfe rund um die Flow-Entwicklung auf der „Inspiring flow conference“ zu Worte. Definitiv sehenswert!

TYPO3 CMS 6.2 LTS alpha2 ist verfügbar

Im Mai wurde die Entwicklung rund um TYPO3 CMS 6.2 LTS angestoßen, nun ist mittlerweile die alpha2 veröffentlicht worden.

Seit der alpha1 aus dem Juni sind die Entwicklungen rund um die 6.2er Version stark voran geschritten. Die hauptsächlichen Veränderungen am TYPO3 CMS gibt es hier im Überblick:

  • Das Install Tool wurde komplett überarbeitet
  • t3lib wurde komplett entfernt
  • Extbase kann nun rekursive Validation
  • Die Logging API ist jetzt vollständig PSR-3 compliant
  • Die separaten ts_* Extensions sind in eine zusammengefügt worden
  • Es gibt Drag&drop für Dateien bei dem File-Upload
  • Eine neue „System“ group wurde in das Module-Menü eingefügt
  • Die Backend Autentifizierung setzt nun per default auf „saltedpassword“

Ausführliche Erläuterungen zu allen wichtigen Neuerungen gibt es bei der entsprechenden offiziellen Newsmeldung. Der Download wie immer offiziell auf typo3.org möglich.

TYPO3 6.2 LTS Entwicklung beginnt

Das TYPO3 Team hat kürzlich mit der Entwicklung des nächsten LTS-Releases von TYPO3 begonnen. LTS steht für Long Term Support und beschreibt eine TYPO3 Version, die besonders lange Unterstützung erfährt (wie das Wort schon sagt). Diese Version wird voraussichtlich im Oktober 2013 veröffentlicht und drei Jahre lang unterstützt, also bis Oktober 2016. Die neue TYPO3 6.2 LTS Version wird das bisherige LTS-Release 4.5 ablösen, welches noch bis Oktober 2014 supported wird.

Die Ziele der Entwickler für TYPO3 6.2 LTS sind

  • Einfache und problemlose Migration von der alten Version
  • Freude für den Nutzer
  • Stabilität, Robustheit und Sicherheit
  • Moderne Technologien und Interoperabilität

Für den zukünftigen Wechsel von 4.5 LTS zu 6.2 LTS  geben die Entwickler bereits jetzt einen kleinen Ausblick, da sie um die starke Verbreitung dieser Version wissen:

  • PHP Support: 5.3 (höher als 5.3.7) and 5.4
  • Upgrade Check Extension: Auf 4.5 installieren und schauen was bei einem Upgrade auf 6.2 LTS schief gehen kann
  • Kompatibilität der Extensions: Auf 6.2 installieren und über eine Emulation die 4.5 Funktionalität nutzen (um alte 4.5 Extension auf 6.2 laufen zu lassen)
  • Ggf. wird es ein PHP Code Migration Tool geben, um die Extension upzugraden

Man darf also gespannt sein. Das Entwicklerteam sucht auch noch Verstärkung – wer also 6.2 LTS mitsupporten will, soll sich melden. Wie es so schön heißt: Every helping hand is welcome!

Viele neue Version von TYPO3 erschienen

Die TYPO3 Community hat einige neue Versionen veröffentlicht, genauer genommen Version 4.5.26, 4.7.11 und 6.0.5 des CMS. Alle Releases wurden mit Bugfixes aktualisiert.

Für weitere Details, welche Fehler ausgebügelt wurden, findet man hier alle Informationen:

http://wiki.typo3.org/TYPO3_4.5.26
http://wiki.typo3.org/TYPO3_4.7.11
http://wiki.typo3.org/TYPO3_6.0.5

Der Download funktioniert wie immer hier:

http://typo3.org/download/

Responsive Design mit TYPO3

Auf Slideshare findet sich eine interessante Präsentation, die den Einstieg in das Thema Responsive Design mit TYPO3 bietet. Neben Stolpersteinen werden auch Best Practices vorgestellt.

Von den notwendigen Config-Einstellungen (korrekter Doctype, Charset etc.) über das richtige Markup-Rendering (DIV-Container dürfen z.B. keine festen Breiten haben) bis hin zum richtigen HTML-Header (Stichwort Viewport, Kompatiblität zum Internet Explorer, Apple-Endgeräte Support) sowie den verbundenen Fallstricken (z. B. das Verhalten von Videos zum Responsive Webdesign, Tabellen oder Bildunterschriften) werden alle Basics kurz erläutert.

Die in der Präse genannte Extension „Responsive TYPO3“ ist derzeit in der Beta-Phase und sehr experimentell anzusehen. Trotzdem ist dies sicher ein spannender Schritt in Richtung Responsive Design für TYPO3.

Man darf gespannt sein wie es weiter geht.

Literaturliste zur Diplomarbeit

Böhringer, Joachim / Bühler, Peter / Schlaich, Peter / Ziegler, Hans-Jürgen: Kompendium der Mediengestaltung für Digital- und Printmedien; 2. überarb. und erw. Aufl. 2003, Springer Verlag (X.media.press), Berlin 2003

Khazaeli, Cyrus Dominik / Hg: Moos, Ludwig: Crashkurs Typo und Layout, Originalausgabe, Rowohlt Taschenbuch Verlag GmbH, Reinbeck 1995

Grotenhoff, Maria / Stylianakis, Anna: Website-Konzeption: Von der Idee zum Storyboard. 1. Nachdruck 2002, Galileo Design Galileo Press GmbH, Bonn 2002

Heller, Eva: Wie Farben wirken, Sonderausgabe Dezember 2004, Ro-wohlt Taschenbuch Verlag GmbH, Reinbeck 1999

Lynch, Patrick J./ Horton, Sarah / Hg: Rosdale, Ray M.: Erfolgreiches Web-Design, Humboldt Taschenbuch Verlag Jacobi KG, München 1999

Meyer, Robert: Praxiswissen TYPO3, 1. Auflage 2005, O’Reilly Verlag, Köln 2005

Nielsen, Jakob: Erfolg des Einfachen, Autorisierte Übersetzung der amerikanischen Originalausgabe, Markt+Technik Verlag, München 2000

Neutzling, Ulli / Hg: Moos, Ludwig: Typo und Layout im Web, Originalausgabe, Rowohlt Taschenbuch Verlag GmbH, Reinbeck 2002

Rada, Holger: Design digitaler Medien, Max Niemeyer Verlag, Tübin-gen 2002

Rosenfeld, Louis; Morville, Peter: Information Architecture for the World Wide Web, First Edition February 1998, O’Reilly & Associates, Sebastopol 1998

Schweizer, Peter: Handbuch der Webgestaltung – Eine konzentrierte Einführung in professionelles Webdesign, 1. Auflage 2003, Galileo De-sign Galileo Press GmbH, Bonn 2003

Stocksmeier, Thorsten: Business-Webdesign – Benutzerfreundlichkeit, Konzeptionierung, Technik, Wartung, Springer-Verlag (X.media.press), Berlin 2002

Stöckl, Andreas / Bongers, Frank: Einstieg in TYPO3, 1. Auflage 2005, Galileo Computing Galileo Press GmbH, Bonn 2005

Thissen, Frank: Kompendium des Screen-Design, 3. Auflage 2003, Springer-Verlag (X.media.press), Berlin 2003

TYPO3 Template-Datensatz des Auftritts „Main Template“

Constants:
plugin.alt.print.file.stylesheet = fileadmin/template/css/ne_print.css
plugin.alt.print.file.template = fileadmin/template/print_template.html
PAGE_TARGET =

Setup:
# DOCTYPE auf XHTML 1.0 Strict setzen, für den IE wird die XML-Angabe umgedreht
config.doctype = xhtml_strict
config.doctypeSwitch = true
config.xhtml_cleaning = all
config.htmlTag_langKey = de

# Konfiguration des Auto-Parser fuer Haupt-Template:
plugin.tx_automaketemplate_pi1 {

# Die Designvorlage wird eingelesen:
content = FILE
content.file = fileadmin/template/main_template.html

# Hier werden die Elemente im HTML definiert
# welche von subpart-Comments umgeben werden sollen:

elements {
BODY.all = 1
BODY.all.subpartMarker = DOCUMENT_BODY

HEAD.all = 1
HEAD.all.subpartMarker = DOCUMENT_HEADER
HEAD.rmTagSections = title

DIV.all = 1
}

# Alle relativen Pfadangaben soll diese Prefix vorangestellt werden:
relPathPrefix = fileadmin/template/
}

# Hauptnavigation s-Menu 1 cObject - vom Typ HMENU
temp.menu_main = HMENU

# Erste Ebene Menu-Object, textuell
temp.menu_main.1 = TMENU
temp.menu_main.1 {

# Normal-Zustand Eigenschaften
NO.allWrap = <div class="mainnavi-level1-no"> | </div>
NO.stdWrap.htmlSpecialChars = 1
}

# Zweite Ebene Menu-Object, textuell
temp.menu_main.2 = TMENU
temp.menu_main.2 {

# Normal-Zustand Eigenschaften
NO.allWrap = <div class="mainnavi-level2-no"> | </div>
NO.stdWrap.htmlSpecialChars = 1

# Aktiven Zustand aktivieren und Eigenschaften setzen
ACT = 1
ACT.allWrap = <div class="mainnavi-level2-act"> | </div>
ACT.stdWrap.htmlSpecialChars = 1
}

temp.menu_main.3 = TMENU
temp.menu_main.3 {

# Normal-Zustand Eigenschaften
NO.allWrap = <div class="mainnavi-level3-no"> | </div>
NO.stdWrap.htmlSpecialChars = 1

# Aktiven Zustand aktivieren und Eigenschaften setzen
ACT = 1
ACT.allWrap = <div class="mainnavi-level3-act"> | </div>
ACT.stdWrap.htmlSpecialChars = 1
}

# Metanavigation im KOPF
temp.menu_meta = HMENU
temp.menu_meta.special = list
temp.menu_meta.special.value = 38, 37, 36, 35
temp.menu_meta.1 = TMENU
temp.menu_meta.1.NO {
before = &nbsp;
after = &nbsp; | |*| &nbsp; | |*| &nbsp;
allWrap = <span class="metanavi-no"> | </span>
stdWrap.htmlSpecialChars = 1
}

# Metanavigation im FOOTER
temp.menu_footer = HMENU
temp.menu_footer.special = list
temp.menu_footer.special.value < temp.menu_meta.special.value
temp.menu_footer.wrap = &copy; nordEnergie AG 2005&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|
temp.menu_footer.1 = TMENU
temp.menu_footer.1.NO {
after = | |*| | |*| &nbsp;
allWrap = <span class="metanavi-no"> | </span>
stdWrap.htmlSpecialChars = 1
}

# Locator-Funktion (Pfadanzeige, rootline)
temp.locator = HMENU
temp.locator {
special = rootline
special.range = 0 | -1
wrap = Sie befinden sich hier:&nbsp;|
1 = TMENU
1 {
NO {
allWrap = | &nbsp;-&nbsp; |*| | &nbsp;-&nbsp; |*| |
stdWrap.htmlSpecialChars = 1
}
}
}

# Druckversion und "Nach Oben" - Link SETUP
temp.printversion = TEXT
temp.printversion.data = TSFE : id
temp.printversion.wrap = <a href="#nach_oben"><img src="fileadmin/template/img/
icon_top.gif" width="11" height="11"> nach oben</a>&nbsp;&nbsp;&nbsp;<a href="index.php?id=|&type=98"><img src="fileadmin/template/img/ i-con_druckversion.gif" width="12" height="11"> Druckversion</a>

# Konfiguration der Print-Version
alt_print >
alt_print = PAGE
alt_print.typeNum=98
alt_print.stylesheet = {$plugin.alt.print.file.stylesheet}

alt_print.10 = TEMPLATE
alt_print.10 {
template = FILE
template.file = {$plugin.alt.print.file.template}

subparts {
content < styles.content.get
}
workOnSubpart = DOCUMENT_BODY
}

# Main TEMPLATE cObject für den BODY
temp.mainTemplate = TEMPLATE
temp.mainTemplate {

# Das Template cObject referenziert den Inhalt des Auto-Parsers
template =< plugin.tx_automaketemplate_pi1

# Nur der Inhalt zwischen den <body>-TAGS der Vorlage wird beachtet
workOnSubpart = DOCUMENT_BODY

# Ersetze den ###mainnavi### subpart mit der dynamischen Hauptnavigation
subparts.mainnavi < temp.menu_main

# Ersetze den ###headerimage### subpart mit dem Bild aus der Spalte LINKS
subparts.headerimage < styles.content.getLeft

# Ersetze den ###content### subpart mit dem Inhalt der Spalte NORMAL
subparts.content < styles.content.get

# Ersetze den ###locator### subpart mit der Pfadanzeige
subparts.locator < temp.locator

# Ersetze den ###metanavi### subpart mit der Metanavigation für den Seitenkopf
subparts.metanavi < temp.menu_meta

# Ersetze den ###footer### subpart mit der Metanavigation für die Fußzeile
subparts.footer < temp.menu_footer

# Ersetze den ###lightblue_bottom_border### subparts mit den Links Print & Oben
subparts.lightblue_bottom_border < temp.printversion
}

# Head TEMPLATE cObject für den HEAD
temp.headTemplate = TEMPLATE
temp.headTemplate {
# Das Template cObject referenziert den Inhalt des Auto-Parsers
template =< plugin.tx_automaketemplate_pi1
# Nur der Inhalt zwischen den <head>-TAGS der Vorlage wird beachtet
workOnSubpart = DOCUMENT_HEADER
}

# Standard PAGE object
page = PAGE
page.typeNum = 0
# <body>-TAG wird ohne jegliche Angaben gelassen
page.bodyTag = <body>
page.config.language = de
page.config.locale_all = de_DE

# Kopiere den Inhalt aus mainTemplate für den <body-Bereich in die Seite
page.10 < temp.mainTemplate
# Kopiere den Inhalt aus headTemplate fü;r den <head>-Bereich in den HEAD
page.headerData.10 < temp.headTemplate

Veröffentlichung des Internetauftritts

Aus technischer Sicht spricht nichts gegen eine baldige Veröffentlichung der Seiten im Internet. Das umschließende Grundgerüst ist komplett fertig gestellt und wartet bereits auf den produktiven Einsatz. Das Fehlen der Inhalte verzögert dieses Vorhaben jedoch. Sobald die von der Firma zu fertigenden Inhalte nachgeliefert sind, wird möglichst schnell ein Termin für den Launch der Internetpräsenz zu finden sein.

Meta-Tags in TYPO3

Für TYPO3 existiert eine Extension namens „Meta tags, extended“, die für das Hinzufügen der Meta-Tags zu einer jeden Seite verwendet werden kann. Dem System zuvor bekannt gemacht und folgendermaßen konfiguriert ist die gesamte Präsenz optimal beschrieben. Da Meta-Tags, wie soeben geklärt, in sehr engem Zusammenhang mit den tatsächlichen Inhalten der Seiten stehen und diese noch nicht bereitgestellt wurden, ist dieser Teilabschnitt als rein technische Beschreibung für das Content Management System zu verstehen und geht nicht auf die Entwicklung spezieller Schlüsselworte ein.

Constants:

plugin.meta >
plugin.meta {
description =
keywords =
robots =
copyright =
email =
author =
language =
distribution =
rating =
revisit =
includeGlobal = 0
}

Als Konstanten werden in TYPO3 verschiedene Werte festgelegt, die von ihrer Bezeichnung her exakt den spezifizierten (X)HTML-Vorgaben für das Meta-Tag-Format entsprechen und für ihre Äquivalente in dem generierten XHTML-Code eingesetzt werden. Es können so bspw. eine Kurzbeschreibung der Seiten, spezielle Schlüsselwörter, Sprachversion und Hin-weise auf den Autor oder das Copyright angegeben werden, die für alle Seiten der Präsenz übergreifend gelten.

Setup:

plugin.meta.global.description =
plugin.meta.global.keywords =
plugin.meta.flags.useSecondaryDescKey = 1
plugin.meta.flags.alwaysGlobalDescription = 0
plugin.meta.flags.alwaysGlobalKeywords = 0
plugin.meta.flags.DC = 0
# Mit dem Setzen auf den Wert 0, werden doppelte Metatags vermieden.
page.headerData.999 < plugin.meta

Das Setup der Meta-Tags fügt die Angaben der zu generierenden Seite letztenendlich zu. Dafür wird der Inhalt in den Head-Bereich des PAGE-Objekts kopiert. Auffällig ist die Doppelung des Feldes „Description“ und „Keywords“. Die global geltenden Kurzbeschreibung und die Schlüsselwörter können per Konstantendeklaration gesetzt werden oder alternativ direkt im Setup festgelegt werden (die vorletzte Anweisung ver-hindert, dass die Meta-Tags doppelt generiert werden). Des Weiteren werden drei Werte gesetzt. Die Anweisungen führen dazu, dass im Normalfall die hier definierten Beschreibungen für die Meta-Tags verwendet werden, es sei denn für spezielle Seiten werden anderweitige Informationen über das Seiten-Modul festgelegt. In diesem Fall werden die Angaben der Unterseite verwendet, sonst die global gültigen Definitionen.

Suchmaschinen-Optimierung

Studien ergeben, dass ca. 80 bis 85% aller Internetanwender eine neue Website über den Gebrauch von Suchmaschinen finden. Ein treffendes Suchergebnis kommt durch Eingabe von Stichwörtern, die mit dem Inhalt der Internetpräsenz in engem Zusammenhang stehen, zu Stande. Da in den meisten Fällen lediglich die ersten und zweiten Seiten der Trefferlisten eines Suchergebnisses betrachtet werden, muss der Internetauftritt auf die Arbeitsweise der Suchmaschinen optimiert werden. Programme der Suchmaschinenanbieter, sogenannte „Robots“, „Spiders“ oder „Crawlers“, katalogisieren die verfügbaren Seiten nach einer bestimmten Arbeitsweise und benutzen anbieterabhängige, nicht öffentliche Algorithmen zur Relevanzbestimmung und der damit verbundenen Platzierung im Ranking. Obwohl die genauen Abläufe als Geschäftsgeheimnis im Verborgenen bleiben, sind generelle Arbeitsweise und Schritte, wie ein Auftritt auf sie ausgerichtet werden kann, bekannt.

Die Bewertung einer Interseite wird durch verschiedene Faktoren beeinflusst:

  • Lage der Suchbegriffe
    Befindet sich z.B. ein gesuchtes Wort im Titel oder in Überschriften der Website, so scheint der Inhalt dieses Informationsangebotes relevanter zu sein, da sich der komplette Auftritt oder große Teile vermutlich mit diesem Thema beschäftigen.
  • Dichte der Suchbegriffe („keyword density“)
    Die Häufigkeit des gesuchten Terminus im Text spielt ebenfalls eine große Rolle, da die Seite desto wichtiger eingestuft wird, desto öfter das Wort Erwähnung findet. Die Suchbegriffdichte beschreibt das Verhältnis des Textes zum Suchbegriff. Aus Erfahrung sollte dieser Wert zwischen 1% und 7% liegen. Höhere Prozentzahlen werden von den Suchmaschinen als Manipulation eingestuft und mit schlechten Platzierungen bestraft.
  • Link-Popularität
    Wird eine Website häufig von anderen Angeboten „verlinkt“, so gehen die Agentenprogramme der Suchmaschinenanbieter von einer höheren Beliebtheit und gleichbedeutend einer größeren Wichtigkeit des Angebots aus. Dieser Faktor lässt sich selbst kaum beeinflussen.
  • Klick-Popularität
    Einige Suchmaschinen merken sich die Häufigkeit des Anklickens der Suchergebnisse bei bestimmten Suchbegriffen. Wird ein Internetauftritt besonders oft ausgewählt, so wird dieser in dem Ranking dadurch steigen. Eine Möglichkeit, auf diesen Bewertungsfaktor direkt einzuwirken, gibt es nicht.

Nach Betrachtung der Kriterien bietet es sich also an, gezielt Schlüsselwörter für den Auftritt festzulegen. In die Überlegungen einzubeziehen sind drei Regeln. Die Keywords sollten nicht aus einzelnen Suchbegriffen bestehen, sondern zwischen zwei und vier Wörter beinhalten. Denn in den meisten Suchanfragen werden Phrasen, also mehrere Wörter, verwendet, um einen passenden Treffer zu erzielen. Zum einen müssen diese Phrasen gebräuchlich sein, so dass ein Suchmaschinenbenutzer auch tatsächlich diese Suchbegriffe wählt; auf der anderen Seite ist Einzigartigkeit ebenso notwendig, um sich von der Konkurrenz abzusetzen. Spezifische Schlüsselwörter qualifizieren außerdem die über eine Suchmaschine kommenden Besucher.

Suchmaschinen müssen des weiteren die Website „lesen“ können, um die Inhalte und Schlüsselworte etc. zu erfassen. Durch den Gebrauch von Webstandards und den Verzicht auf Tabellen als Layoutmittel ist der Quellcode der nordEnergie-Seiten schlank gehalten und kann von den Agenten der Suchmaschinen optimal verarbeitet werden.

Meta-Tags sind für Suchmaschinen von großer Bedeutung. Es gibt eine Vielzahl von verschiedenen Typen, allerdings sind in der Praxis mittlerweile lediglich zwei Arten interessant: die Kurzbeschreibung (Description) und die Schlüsselwörter (Keywords). Die Kurzbeschreibung fasst in zwei bis drei Sätzen den Inhalt des Auftritts zusammen und Schlüsselwörter spiegeln den Inhalt der Seiten wieder. Dabei ist es enorm wichtig, dass die Keywords mit den wirklichen Inhalten korrespondieren. Eine Irreführung mit gefälschten Begriffen führt zur Abstrafung des Auftritts mit schlechter Platzierung.

All diese Aspekte sind für ein erfolgreiches Bekanntwerden des Internetauftritts zu beachten, bevor man eine manuelle oder automatische Eintragung in eine Suchmaschine bzw. ein Verzeichnis anvisiert. Die Schlüsselwörter bestimmen sich über den Inhalt und können durch Meta-Tags unterstützt werden. Wie sich die Realisierung dieser Angaben in TYPO3 gestaltet, soll als nächstes betrachtet werden.

Domainwahl

Bei einer Domain handelt es sich im üblichen Wortgebrauch um die Internetadresse einer Website. Genauer betrachtet steht hinter jeder Internetadresse eine mehrstellige Zahlenfolge (IP genannt), die von dem DNS-Dienst des Internets (Domain Name Server) aufgelöst wird und eindeutig einer IP zuzuordnen ist. Das System der DNS dient der besseren Einprägung der Adressen, da sich Buchstabenfolgen bzw. Wörter in der Regel besser merken lassen als bloße Zahlenfolgen. Ein Domainname besteht vereinfacht dargestellt aus dem frei wählbaren Namen und dem TLD-Zusatz (Top Level Domain, z.B. „.de“ für Deutschland oder „.com“ für kommerzielle Zwecke). Die Problematik bei der Domainwahl besteht darin, dass jede Domain nur einmal vergeben wird und aktuell nur noch sehr wenige sinnvolle Namen verfügbar sind. Eine gut gewählte Domain kann den Bekanntheitsgrad steigern und gilt als Aushängeschild des Auftritts.

Für den Internetauftritt der nordEnergie AG existiert bereits eine Internetadresse. Die Wahl ist bei Gründung der Firma auf www.nordenergieag.de gefallen und die Adresse ist bereits auf Visitenkarten, Plakaten und sonstigen Drucksachen verewigt. Ebenso wird von den entsprechenden E-Mail-Adressen Gebrauch gemacht. Das Mitführen der Rechtsform im Domainnamen ist allerdings problembehaftet. Zwar entspricht die Internetadresse exakt dem Firmennamen, doch ist die Praktik den Zusatz von „AG“ anzugeben nicht weit verbreitet und wird so im Web nicht angewandt (die „Deutsche Bank“ oder „Die Bahn“ führen „AG“ schließlich auch nicht in ihrer Internetadresse mit). Die Adresse ist dadurch nicht auf den ersten Blick der Firma zuzuordnen. Es empfiehlt sich, zusätzlich zu der bestehenden Domain, die eindeutige105 und einprägsamere Variante „www.nordenergie.de“ zu reservieren. Eine Weiterleitung ist einzurichten. Somit kann außerdem verhindert werden, dass z.B. ein Mitanbieter sich die Adresse sichert und andere Inhalte dort hinterlegt.

Einpflegen der Inhalte in TYPO3

Für die Gestaltung der Inhalte existieren in TYPO3 bereits in der Standardinstallation umfangreiche Möglichkeiten. Aus verschiedenen Seiteninhaltstypen kann gewählt werden. Dazu gehören bspw. reine Textfelder, Texte mit einer frei wählbaren Anzahl von Bildern (samt Positionierung), Formulare, Tabellen, Auflistungen oder multimediale Inhalte . Durch die Extension „CSS styled Content“, welche die Inhaltselemente mit CSS-Formatierung verknüpft, wird dem Administrator die Möglichkeit gegeben alle Module nach eigenen Ansprüchen übergreifend und konsistent zu gestalten.

Das Einfügen neuer Inhaltstypen ist leicht und schnell erledigt. Ein spezielles TYPO3-Modul steht dafür zur Verfügung, welches wie ein Assistent funktioniert und von dem bearbeiten-den Redakteur alle notwendigen Daten abfragt. Es können beliebig viele, unterschiedliche Module für eine Seite festgelegt werden. Die Reihenfolge der Inhaltsobjekte kann auch im Nachhinein verändert und verschoben werden.

Jedes Seitenelement kann mit einer Überschrift versehen werden, die den im Style Sheet definiertem Aussehen entspricht. Nach diesem Prinzip funktioniert die gesamte Textformatierung in TYPO3. Des Weiteren stehen für den Inhaltstyp allgemeine Optionen zur Verfügung, die es z.B. ermöglichen das Element zu verstecken, einen Veröffentlichungstermin oder –zeitraum festzulegen und die Seite nur ausgewählten Benutzern bzw. Benutzergruppen zugänglich zu machen . Besonders komfortabel ist das Editieren von Texten unter Verwendung des Internet Explorers, da TYPO3 für diesen Browser standardmäßig einen „Rich Text Editor“ (kurz RTE) anbietet. Mit Hilfe dieses Editors kann der Redakteur in Anlehnung an die Bedienungsweisen einer Textverarbeitung wie z.B. „Word“ den Content erstellen, gliedern und formatieren. Durch diese praktische Funktionalität sind keine Vorkenntnisse von HTML o.ä. notwendig, um die Seiten zu warten.

Für das Einpflegen von Inhalten können in TYPO3 verschiedene Rollen vergeben werden. Für Mitarbeiter mit unterschiedlichen Kompetenzbereichen können Benutzer mit dementsprechend konfigurierten Zugriffs- und Schreibrechten eingerichtet werden, so dass ein Mitarbeiter ausschließlich in seinem Bereich tätig sein kann. Die übrigen Seitenteile sowie administrativen Funktionen werden für ihn dann komplett ausgeblendet. Die ihm zugeordneten Bereiche sind frei skalierbar. Ebenfalls können Restriktionen festgelegt werden, was das Anlegen und Weiterverarbeiten von neuen oder bestehenden Seiten belangt. Ein Benutzer kann dann bspw. eine Seite zwar verändern, jedoch nicht löschen oder neue hinzufügen. Dadurch ist optimal gewährleistet, dass der zukünftige Redakteur nicht überfordert, sondern ein auf ihn speziell abgestimmtes und passendes Angebot zusammengestellt wird. Des Weiteren ist eine intuitive Bearbeitung der Inhalte durch das sogenannte „Frontend-Editing“ möglich. Dieser Begriff beschreibt die Funktionalität, dass ein Redakteur direkt in dem Internetauftritt Änderungen an den Inhalten vornehmen kann ohne über das Backend zu agieren. Veränderbare Bereiche werden durch ein nebenste-hendes Stift-Symbol angezeigt. Durch die Auswahl dieser Edit-Funktion wird in den Bearbeitungsmodus gewechselt, der dem Redakteur bereits bekannt ist.

Da während der Bearbeitung der Diplomarbeit noch keine vollständigen Texte für die Inter-netseite bereitgestellt werden konnten, wurde der textuelle Bereich mit Blindtext zur besseren Veranschaulichung aufgefüllt und die sonstigen contentrelevanten Elemente prototypisch angelegt. Bis zum Launch der Internetpräsenz sind die Inhalte durch die Firma selbstverständlich zu ergänzen.

Wartbarkeit/Pflege des Auftritts

Die Pflege einer Internetseite ist essenziell, um sie für den Besucher interessant und aktuell zu halten. So können regelmäßige Aufrufe erreicht werden. Elementar wichtig hierbei ist, dass das Aktualisieren, das Ändern, das Einfügen und das Erweitern von Inhalten etc. von Mitarbeitern der nordEnergie AG übernommen werden kann, die über keinerlei HTML- oder anderweitige Programmierungskenntnisse verfügen.

Der Internetauftritt wird durch den Einsatz eines Content Management Systems wie TYPO3 sehr simpel zu warten sein. Die oben aufgestellte Forderung deckt sich optimal mit dem Funktionsumfang des CMS.

Das Publizieren von Inhalten mit TYPO3 erfordert keine Zusatzsoftware. Einzige Vorausset-zung ist ein Internetzugang und der Microsoft Internet Explorer. Somit kann die Seite von überall auf der Welt gepflegt werden. Das Erstellen der neuen Inhalte bzw. die Änderung bestehender Informationen erfolgt über einen „Rich Text Editor“, der an Bedienkonzepte von Standard-Textverarbeitungen wie Microsoft Word angelehnt ist. Mit diesem speziellen Tool können ohne Umgewöhnung, Vorkenntnisse oder langwierige Einarbeitungszeit beispielsweise Texte formatiert, Bilder eingefügt oder Hyperlinks gesetzt werden. Das Aussehen bzw. das Erscheinungsbild des Textes wird immer automatisch den vorher festgelegten Formatvorlagen angepasst und ist ständig konsistent. Das ausgeklügelte Usermanagement kann einzelnen Redakteuren spezielle Rollen und Rechte zuweisen, die ihnen z.B. erlauben, lediglich einen bestimmten Bereich der Internetseite editieren zu dürfen.

Somit erreicht man eine einfache Lösung des Problems der Wartbarkeit des Internetauftritts. Grundsätzlich jeder interessierte Mitarbeiter der nordEnergie AG kann als Redakteur eingesetzt werden und gänzlich ohne kostenintensive Schulung oder Fortbildung Inhalte einpflegen sowie veröffentlichen.

Auswahl und Kurzvorstellung der Software

Drei verschiedene Großbereiche müssen mit Open Source-Software bei der Konzeption und Realisierung eines kompletten Webauftritts samt Content Management System abgedeckt werden.

Während der Entwurfs- und Designphase ist ein Tool zur Erstellung der Design- und Layoutentwürfe samt Bildbearbeitung und Bildkomposition notwendig, welches nach Möglichkeit annähernd die Funktionalitäten und Leistungen von der etablierten Standard-Software Adobe Photoshop bieten kann. Für die Umsetzung des finalen Layouts in eine webkompatible Darstellungsform muss ein entsprechender HTML-Editor eingesetzt werden (standardmäßig wurde für diesen Anwendungsfall Dreamweaver MX von Macromedia verwendet). Dass als Content Management System eine freie Open Source-Lösung auf dem Webserver aufgesetzt wird, ist mittlerweile nicht ungewöhnlich. Einige kostenlose Systeme müssen mittlerweile vom Leistungsspektrum her den Vergleich mit kommerziellen Konkurrenten nicht mehr scheuen.

Bildbearbeitung/Grafiktool
Für die Bildbearbeitung wurde GIMP in Version 2.2.6 als Applikation gewählt, welches unter GPL vertrieben wird und plattformübergreifend frei erhältlich ist. Ausschlaggebend für diese Entscheidung ist, dass GIMP oftmals als das freie Photoshop bezeichnet wird. Zu beziehen ist GIMP für verschiedene Betriebssysteme über das Portal http://www.gimp.org.

Die GIMP-Dokumentation verspricht Folgendes über das Programm:

GIMP ist ein portables Photo- und Bildmanipulationswerkzeug. Das Wort GIMP ist zu-sammengesetzt aus den englischen Worten GNU Image Manipulation Program, was im Deutschen soviel bedeutet wie GNU Bildbearbeitungsprogramm. GIMP ist äußerst vielfältig einsetzbar für eine Vielzahl an Aufgaben einschließlich Photonachbearbeitung, Bildkomposition und -malerei.

Inwieweit GIMP tatsächlich mit dem etablierten Photoshop konkurrieren kann, wird sich im Verlauf der Arbeit zeigen.

HTML-Editor/Web-Editor
Der Web-Editor Nvu (gesprochen „n-view“) ist eine Weiterentwicklung der Komponente „Composer“ aus der Mozilla-Suite, welche sich mit HTML, CSS, Javascript, XML und den meisten sonst üblichen Webstandards versteht.
Da das Ziel des Projekts ist, sich als ein ernstzunehmendes Konkurrenzprodukt neben Mac-romedia Dreamweaver und Microsoft Frontpage zu etablieren, eignet sich diese ambitio-nierte Open Source-Applikation besonders für den Einsatz während meiner Tätigkeit.

Freigegeben ist Nvu unter den drei Lizenzformen MPL (Mozilla Public License), LGPL und GPL. Die englischsprachige Entwicklerplattform ist über http://www.nvu.com zu erreichen. Über selbigen Link kann die neuste Version (aktueller Stand April 2005 Version 1.0 Preview Release) bezogen werden.

Content Management System
Als leistungsstarkes und praxiserprobtes Open Source Content Management System soll für die Internetpräsenz TYPO3 in der momentan aktuellsten Version 3.7.0 verwendet werden (TYPO3 3.8.0 befindet sich in der Beta-Phase und soll laut Entwicklern nicht für den produktiven Einsatz verwendet werden. Die endgültige Fertigstellung ist noch nicht abzusehen). Lizenziert wird TYPO3 unter GPL und ist somit bekanntermaßen kostenfrei. TYPO3 setzt wie fast jedes andere CMS auf dem Webserver die Datenbank MySQL und die Skriptsprache PHP als Systemanforderung voraus.

Mehr als 1000 Referenzen (Stand 2004, darunter namhafte Unternehmen wie Volkswagen, Karstadt, Villeroy & Boch) sprechen für TYPO3 als stabiles und weit verbreitetes Open Source-System, welches auf http://www.typo3.org herunterzuladen ist.

Zusammensetzen aller Teilelemente in TYPO3

Alle erwähnten Elemente wurden bei der bisherigen Betrachtung in temporären Objekten abgelegt, die in dieser Form nirgends darstellbar sind. Es ist erforderlich, die einzelnen Teile an ihre zugewiesenen Positionen im Layout zu bringen, indem die dafür vorgesehenen Subparts des Templates mit Inhalt gefüllt werden. Den Abschluss bildet das Einfügen des Standard-PAGE-Objektes, welches die Template-Daten zugewiesen bekommt, und für die eigentliche Seitenanzeige zuständig ist.

Constants:

PAGE_TARGET =

Durch diese Konstantenzuweisung wird garantiert, dass alle seiteninternen Links von TYPO3 in demselben aktiven Fenster angezeigt werden.

Setup:

# Main TEMPLATE cObject für den BODY
temp.mainTemplate = TEMPLATE
temp.mainTemplate {

# Das Template cObject referenziert den Inhalt des Auto-Parsers
template =< plugin.tx_automaketemplate_pi1

# Nur der Inhalt zwischen den <body>-TAGS der Vorlage wird beachtet
workOnSubpart = DOCUMENT_BODY

# Ersetze den ###mainnavi### subpart mit der dynamischen Hauptnavigation
subparts.mainnavi < temp.menu_main

# Ersetze den ###headerimage### subpart mit dem Bild aus der Spalte LINKS
subparts.headerimage < styles.content.getLeft

# Ersetze den ###content### subpart mit dem Inhalt der Spalte NORMAL
subparts.content < styles.content.get

# Ersetze den ###locator### subpart mit der Pfadanzeige
subparts.locator < temp.locator

# Ersetze den ###metanavi### subpart mit der Metanavigation für den Seitenkopf
subparts.metanavi < temp.menu_meta

# Ersetze den ###footer### subpart mit der Metanavigation für die Fußzeile
subparts.footer < temp.menu_footer

# Ersetze den ###lightblue_bottom_border### subparts mit den Links Print & Oben
subparts.lightblue_bottom_border < temp.printversion
}

# Head TEMPLATE cObject für den HEAD
temp.headTemplate = TEMPLATE
temp.headTemplate {

# Das Template cObject referenziert den Inhalt des Auto-Parsers
template =< plugin.tx_automaketemplate_pi1

# Nur der Inhalt zwischen den <head>-TAGS der Vorlage wird beachtet
workOnSubpart = DOCUMENT_HEADER
}

# Standard PAGE object
page = PAGE
page.typeNum = 0
# <body>-TAG wird ohne jegliche Angaben gelassen
page.bodyTag = <body>
page.config.language = de
page.config.locale_all = de_DE

# Kopiere den Inhalt aus mainTemplate für den <body>-Bereich in die Seite
page.10 < temp.mainTemplate

# Kopiere den Inhalt aus headTemplate für den <head>-Bereich in den HEAD
page.headerData.10 < temp.headTemplate

Das TypoScript-Listing des abschließenden Setups, welches für das Zusammensetzen und die letztenendliche Generierung der Frontend-Seite zuständig ist, gestaltet sich auf den ersten Blick relativ umfangreich, ist jedoch schnell und einfach nachvollziehbar.
Ein neues TEMPLATE-Objekt mit der Bezeichnung „mainTemplate“ wird angelegt, welches den Inhalt des Auto-parsers, also die XHTML-Designvorlage, referenziert. Lediglich der Be-reich der Vorlage zwischen den Body-Tags wird berücksichtigt. Es wird anschließend begon-nen, die zuvor temporär gespeicherten Elemente (Navigation, Stimmungsbild, Content, Pfadanzeige etc.) in ihre vorgesehene Position (durch Subparts markiert) im Layout einzu-fügen. Derselbe Vorgang wird für den Head-Bereich ebenfalls durchgeführt. Um die Seite nun endgültig darstellbar zu gestalten, benötigt TYPO3 ein PAGE-Objekt, welches in diesem Setup die Bezeichnung „page“ erhält. Der Standardseitentyp wird zugewiesen (typeNum = 0) und der Body-Tag ohne weitere Auszeichnungen gesetzt (TYPO3 erzeugt sonst standard-mäßig eine Seite mit weißem Hintergrund). Die folgenden zwei Zeilen konfigurieren die deutsche Sprachversion des Auftritts. Anschließend wird der Inhalt aus der Variable „mainTemplate“ (die zuvor erschaffenen Seitenelemente) in den Datenteil des darzustel-lenden PAGE-Objektes kopiert. Die Header-Angaben aus „headTemplate“ werden in den Head-Bereich von „page“ eingefügt.

Das Template ist somit vollständig und kann die XHTML-Seite für die Frontend-Darstellung generieren. Alle dynamischen Bereiche wurden durch ihre entsprechenden Elemente substituiert und ergeben mit den statischen Teilen das Gesamterscheinungsbild.

Einrichten einer Printversion

Das Bereitstellen einer Printversion der jeweiligen Seite kann von TYPO3 durch ein richtig konfiguriertes Plug-In standardmäßig übernommen werden. Dieses Plug-In muss dem Template als statische Template bekannt gemacht werden. Erstmalig ist der Gebrauch von Konstanten von Nöten. Neben der Printversion soll ein Hyperlink, der zum Seitenbeginn führt, eingefügt werden.

Constants:

plugin.alt.print.file.template = fileadmin/template/print_template.html
plugin.alt.print.file.stylesheet = fileadmin/template/css/ne_print.css

Per Konstantendeklaration werden die spezielle Printvorlage in XHTML mit dazugehörigem Style Sheet für die Printversion festgelegt. Es handelt sich hierbei um eine für das Ausdrucken optimierte Darstellungsweise. Die Dateien sind im Dateimanager hinterlegt.

Setup:

# Druckversion und "Nach Oben" â Link SETUP
temp.printversion = TEXT
temp.printversion.data = TSFE : id
temp.printversion.wrap = <a href="#nach_oben"><img src="fileadmin/template/img/
icon_top.gif" width="11" height="11"> nach oben</a>&nbsp;&nbsp;&nbsp;<a href="index.php?id=|&type=98"><img src="fileadmin/template/img/ icon_druckversion.gif" width="12" height="11"> Druckversion</a>

# Konfiguration der Print-Version
alt_print >
alt_print = PAGE
alt_print.typeNum=98
alt_print.stylesheet = {$plugin.alt.print.file.stylesheet}

alt_print.10 = TEMPLATE
alt_print.10 {
template = FILE
template.file = {$plugin.alt.print.file.template}

subparts {
content < styles.content.get
}
workOnSubpart = DOCUMENT_BODY
}

Die Erstellung des Hyperlinks für die Druckversion gestaltet sich einfach. Das Standard-TYPO3-Plug-In „plugin.alt.print (98)“ wird dem Main Template als statisches Template be-kannt gemacht. Die Variable „temp.printversion“ wird von Typ „TEXT“ deklariert und mit der Anweisung der nächsten Zeile die aktuelle Page-ID ermittelt. Der Verweis an den Anfang der Seite (ein simpler Link auf einen statischen Anchor-Tag in der Designvorlage) und der eigentliche Link zur Druckversion samt Icon werden formuliert und die Page-ID übergeben. Um nun die Ausgabe des Inhalts in das vorbereitete Print-Template zu übergeben, muss als Seitentyp „98“ für die Printversion angegeben werden. Den Rest erle-digt TYPO3 dann von selbst.

Die nachfolgende Konfiguration der Print-Version ist eine angepasste Version aus der TYPO3-Dokumentation für den Standardeinsatz des Print-Plug-Ins. Ein neues PAGE-Objekt wird erzeugt, dass die Darstellung der Druckversion übernehmen wird. Die Eigenschaft wird aus Übersichtlichkeitsgründen passend zum Seitentyp auf 98 gesetzt. Das Style Sheet aus der Konstantendeklaration wird wie die eigentliche Vorlage dem PAGE-Objekt zugewiesen. In den Subpart „content“, welcher in der Print-Vorlage klassisch definiert wurde, wird der Inhalt aus der Seite kopiert (content < styles.content.get). Außerdem wird durch die abschließende Zeile erreicht, dass nur der Teil innerhalb des Subparts „DOCUMENT_BODY“ in der Printvorlage für den Seitenaufbau benutzt wird. Jeder Seite der nordEnergie-Präsenz wird nun ein Link, der zum Seitenanfang zurückführt und ein Verweis zur Druckversion hinzugefügt.

Pfadanzeige als Menü realisiert

Die Pfadanzeige (Breadcrumb) zur leichten Orientierung in der Seitenhierarchie ist vom Prinzip her nichts anderes als ein Menü mit speziellen Eigenschaften.

# Locator-Funktion (Pfadanzeige, rootline)
temp.locator = HMENU
temp.locator {
special = rootline
special.range = 0 | -1
wrap = Sie befinden sich hier:&nbsp;|
1 = TMENU
1 {
NO {
allWrap = | &nbsp;-&nbsp; |*| | &nbsp;-&nbsp; |*| |
stdWrap.htmlSpecialChars = 1
}
}
}

Ein neues mit „temp.locater“ bezeichnetes HMENU-Objekt vom Spezialtyp „rootline“ bietet die Funktionalität einer anklickbaren Pfadanzeige. Die „range“-Eigenschaft des HMENU-Objekts legt fest, bei welcher Ebene der Pfad beginnen soll.
In diesem Anwendungsfall wird auf obersten Ebene bei Level 0 (Startseite) begonnen und bis zur aktuellen Seite fortgesetzt (-1). Zur besseren Verständlichkeit der Funktion dient der vorangestellte, kurze Erklärungstext (Sie befinden…). Der Pfad selbst ist wiederum ein Text-menü, welches per „allWrap“ und „Optionsplit“ die einzelnen Seitentitel durch ein Minus-zeichen und Leerzeichen optisch voneinander abtrennt.

Aufbau der Metanavigation im Kopf- und Fußbereich

Die Metanavigation wird an zwei bekannten Stellen im Layout platziert. Da die Darstellung leicht variiert, müssen zwei, sich sehr ähnelnde Menüs angelegt werden. Hierfür werden die bereits aus der Hauptnavigation bekannten HMENU- und TMENU-Objekte eingesetzt.

# Metanavigation im KOPF
temp.menu_meta = HMENU
temp.menu_meta.special = list
temp.menu_meta.special.value = 38, 37, 36, 35
temp.menu_meta.1 = TMENU
temp.menu_meta.1.NO {
before = &nbsp;
after = &nbsp; | |*| &nbsp; | |*| &nbsp;
allWrap = <span class="metanavi-no"> | </span>
stdWrap.htmlSpecialChars = 1
}

# Metanavigation im FOOTER
temp.menu_footer = HMENU
temp.menu_footer.special = list
temp.menu_footer.special.value < temp.menu_meta.special.value
temp.menu_footer.wrap = &copy; nordEnergie AG 2005&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|
temp.menu_footer.1 = TMENU
temp.menu_footer.1.NO {
after = | |*| | |*| &nbsp;
allWrap = <span class="metanavi-no"> | </span>
stdWrap.htmlSpecialChars = 1
}

Die Metanavigation ist ein spezielles hierarchisches Menü vom Typ „list“. Dieser Liste können direkt Seiten durch die Angabe der Page-ID der jeweiligen Seiten über „value“ zugeordnet werden. Die vier Zuweisungen von 35 bis 38 entsprechen den Einträgen der Metanavigation Startseite, Kontakt, Impressum und Sitemap. Dem Textmenü im Normalzustand werden über „after“ und „before“ verschiedene Teile voran- und hintergestellt. In diesem Fall werden die zwei Werte verwendet, um Abstände zwischen den Menüeinträgen zu schaffen. Bei „after“ kommt ein „OptionSplit“ zu Einsatz. Der Bereich vor dem ersten |*| gilt für den ersten Eintrag, der darauffolgende für alle „mittleren“ Menüeinträge und der letzte Teil wird für den letzten Menüeintrag angewandt. Alle Einträge erhalten das Aussehen „metanavi-no“. Außerdem wird die XHTML-Konformität weiterhin gewahrt. Die Metanavigation für den Seitenkopf ist unter „temp.menu_meta“ abgelegt.

Für die Anzeige der Metanavigation im Fußbereich werden die Schritte weitestgehend analog durchgeführt. Die Zuweisung der Page-IDs wird aus dem erstangelegten Menü übernommen. Außerdem wird, wie in der Vorlage definiert, ein Copyright-Hinweis der Navigation vorangestellt und der nötige Abstand zwischen diesen beiden Elementen hergestellt. Unter „temp.menu_footer“ wird dieses Menü zwischengespeichert.

Aufbau der Hauptnavigation

Der Aufbau der Navigation in TYPO3 ist simpel und schnell realisiert. Für das Erstellen der Hauptnavigation werden spezielle TypoScript-Objekte vom Typ HMENU und TMENU benö-tigt, die in TYPO3 für hierarchische, textbasierte Menüs verwendet werden. Grafische Navigationen oder Layermenüs wären ebenfalls durch das CMS nutzbar gewesen, sind für diese Art der Navigation jedoch überflüssig.

# Hauptnavigations-Menu 1 cObject - vom Typ HMENU
temp.menu_main = HMENU

# Erste Ebene Menu-Object, textuell
temp.menu_main.1 = TMENU
temp.menu_main.1 {

# Normal-Zustand Eigenschaften
NO.allWrap = <div class="mainnavi-level1-no"> | </div>
NO.stdWrap.htmlSpecialChars = 1
}

# Zweite Ebene Menu-Object, textuell
temp.menu_main.2 = TMENU
temp.menu_main.2 {

# Normal-Zustand Eigenschaften
NO.allWrap = <div class="mainnavi-level2-no"> | </div>
NO.stdWrap.htmlSpecialChars = 1

# Aktiven Zustand aktivieren und Eigenschaften setzen
ACT = 1
ACT.allWrap = <div class="mainnavi-level2-act"> | </div>
ACT.stdWrap.htmlSpecialChars = 1
}

temp.menu_main.3 = TMENU
temp.menu_main.3 {

# Normal-Zustand Eigenschaften
NO.allWrap = <div class="mainnavi-level3-no"> | </div>
NO.stdWrap.htmlSpecialChars = 1

# Aktiven Zustand aktivieren und Eigenschaften setzen
ACT = 1
ACT.allWrap = <div class="mainnavi-level3-act"> | </div>
ACT.stdWrap.htmlSpecialChars = 1
}

Erzeugt wird ein mit dem Titel „temp.menu_main“ (frei wählbar) versehenes HMENU-Objekt, welches für „Hierarchisches Menü“ steht und das grundlegende Basisobjekt aller TYPO3-Menüs ist. Für das neue Menüobjekt müssen nun seine Zustände und Ebenen definiert werden. Dafür werden den drei Ebenen drei neue Menü-Objekte von Typ TMENU zugewiesen (Textmenüs) und der jeweilige Normal-Zustand angegeben (abgekürzt mit NO). Zusätzlich kann ein aktives Aussehen, wenn der Menüpunkt aktuell ausgewählt ist, zur erhöhten Orientierung des Besuchers definiert werden (ACT), was für die zweite und dritte Ebene realisiert wurde.

Von dem generellen Prinzip her wird den verschiedenen Zuständen lediglich ein umschlie-ßender Div-Tag zugewiesen. So erhält bspw. der Normalzustand der ersten Ebene durch „allWrap“ die Div-Klasse „mainnavi-level1-no“. Für das Pipesymbol („|“) wird also der Menücode aus dem CMS eingefügt und von den in „allWrap“ stehenden Zeichen umgeben. Das genaue Aussehen dieses Eintrages ist im Style Sheet definiert. So funktioniert die Menüerstellung in allen Fällen. Die „htmlSpecialChars”-Funktion ist für die XHTML-Kompatibilität notwendig, falls Sonderzeichen im Textmenü verwendet werden.

Mit wenigen Zeilen TypoScript ist die gesamte, problemlos erweiterbare Hauptnavigation umgesetzt worden. Das Menü ist komplett dynamisch und bildet die Baumstruktur aus TY-PO3 ab. Wird eine neue Seite hinzugefügt, wird diese Veränderung automatisch in der Frontend-Darstellung eingepflegt. Das gesamte Menü ist in dem Eintrag temp.menu_main bereits angelegt und wird an späterer Stelle der Seite hinzugefügt.

Doctype-Festlegung per TypoScript

TYPO3 erzeugt standardmäßig HTML 4.01 Transitional kompatiblen Quellcode. Über wenige Zeilen TypoScript kann der Dokumententyp (Doctype) wie zuvor festgelegt auf XHTML 1.0 Strict gesetzt werden.

#DOCTYPE auf XHTML 1.0 Strict setzen, für den IE wird die XML-Angabe umgedreht
config.doctype = xhtml_strict
config.doctypeSwitch = true
config.xhtml_cleaning = all
config.htmlTag_langKey = de

Die erste Anweisung verändert den Doctype auf XHTML 1.0 Strict. Der zweite Befehl ist notwendig, da in der Version 6.0 des Microsoft Internet Explorers ein Bug existiert, der eine dem W3-Konsortium entsprechende Deklaration des XML-Typs der Seite vor dem Doctype fehlinterpretiert und zu gravierenden Darstellungsfehlern führt. Deshalb muss die Reihenfolge speziell für den Internet Explorer umgedreht werden, was durch diese Anweisung erledigt wird. Durch die Funktion „xhtml_cleaning“ wird der erzeugte XHTML-Code von häufigen Fehlern bereinigt. Mit der letzten Zeile wird die Sprachversion der generierten Seiten auf deutsch festgelegt.