Mobile Redirect in TYPO3

Wollten wir ein Mobile Redirect mit TYPO3 umsetzen, so war lange Zeit die Extension cwmobileredirect das Mittel der Wahl. Sie ermöglicht es zuverlässig die Haupt-URL https://meinedomain.de automatisch auf eine mobile Alternative wie https://m.meinedomain.de umzuleiten sobald der Benutzer die Haupt-URL auf einem Mobilgerät aufruft.

Natürlich lässt sich über Vor- und Nachteile solcher mobilen (Sub-)Domains streiten, da wir das Erscheinungsbild der Website auch über MediaQueries sowie für die individuelle Anzeigegröße eigens erstelltes CSS optimieren können. Trotzdem haben eigens für Mobilgeräte optimierte Websites auch heute noch ihre Daseinsberechtigung.

Alternativen zu cwmobileredirect und lvmobile

Leider wurde weder die Extension cwmobilderedirect noch lvmobile weiterentwickelt. Beide sind bis TYPO3 in Version 7 erhältlich. Eine TYPO3-Version, deren LTS-Support durch das Developer-Team diesen Monat (November 2018) eingestellt wird. Wer diese TYPO3-Version weiterhin updaten möchte, muss entweder auf den sehr kostspieligen Extended-Support zurückgreifen oder Kunde bei einem TYPO3-spezialisierten Hoster sein, der den Extended-Support günstig bzw. als Inklusivleistung anbietet.

Alternativen zu cwmobileredirect oder lvmobile, welche mit TYPO3 in Version 8 oder höher kompatibel sind, stehen aktuell nicht zur Verfügung.

Mobile Redirect in TYPO3 ohne Extension

Doch es gibt einen Ausweg: die Mobile-Detection lässt sich auch über TypoScript realisieren. Bis TYPO3 in Version 6 eignet sich dafür folgendes TypoScript:

#Den useragent prüfen. Wird ein Mobilgerät entdeckt, so erfolgt die Umleitung
#auf die mobile Website – die useragents können bei Bedarf erweitert werden:
[useragent = *iPhone*]||[useragent = *iPod*]||[useragent = *Android*]
  config.additionalHeaders = Location: https://m.meinedomain.de
[global]

#Bei Bedarf auf der mobilen Webseitenversion einen Link 
#(https://m.meinedomain.de/?noMobile=1) einrichten, der zurück zur 
#Screen-Version der Website führt.
#Das dafür passende TypoScript, welches den additionalHeader zurücksetzt:
[globalVar = GP:noMobile > 0]
  config.additionalHeaders =
[global]

Ab TYPO3 in Version 7.6 ist der bisherige String-Typ von additionalHeaders „deprecated“ (d.h. veraltet) und additionalHeaders ist nunmehr ein Array mit numerischem Index. Daher muss vorstehender Code entsprechend umgeschrieben werden zu:

[useragent = *iPhone*]||[useragent = *iPod*]||[useragent = *Android*]
  config.additionalHeaders.10 {
     header = Location: https://m.meinedomain.de
  }
[global]

[globalVar = GP:noMobile > 0]
  config.additionalHeaders.10 {
     header =
  }
[global]

Referenz für den useragent:
https://docs.typo3.org/typo3cms/TyposcriptReference/7.6/Conditions/Reference/Index.html#useragent

Stichwörter: Mobile Redirect in TYPO3, MobileRedirect, cwmobileredirect, lvmobile, Alternativen zu cwmobileredirect

Der Beitrag Mobile Redirect in TYPO3 ohne Extension erschien zuerst auf Webdesign Tipps / Webdesign Blog.

Die TYPO3 News-Extension tt_news wurde bereits von Kasper Skårhøj im Rahmen der ersten TYPO3-Versionen entwickelt. Später wurde die Extension von Rupert Germann weiterentwickelt und betreut. Die offiziell im TYPO3-Repository verfügbare Version wurde (Stand Oktober 2018) letztmalig im November 2016 aktualisiert und ist für TYPO3 bis Version 7.6.99 kompatibel.

Sie wurde bis Oktober 2018 über 333.000 Mal heruntergeladen. Jetzt steht sie vor dem Aus. Was ist passiert?

tt_news basiert noch auf der alten piBase-Schnittstelle und wurde nicht für das neue Fluid/extBase weiterentwickelt. Dafür bestand wohl auch wenig Veranlassung, da Georg Ringer bereits im September 2011 die neue News-Extension News System (tx_news) veröffentlicht hat. Die neueren Versionen der Extension News System basieren auf der aktuellen Fluid/extBase-Technik.

News System gewährleistet eine hohe Kompatibilität und ist aktuell (Stand 10.2018) für TYPO3 in den Versionen 6, 7, 8 und 9 erhältlich.

tt_news für TYPO3 in Version 8.x oder höher

Für tt_news gibt es keine offizielle Version, die mit TYPO3 8.x oder höher kompatible ist. Nach aktuellem Stand ist wohl davon auszugehen, dass tt_news ein Auslaufmodell ist und nicht mehr weiterentwickelt wird. Daher ist es sinnvoll eine Migration von tt_news nach News System zu erwägen.

Denn im November 2018 läuft der offizielle Support für TYPO3 7.6 LTS aus. Sicherheitspatches können per „Extended Support“ dann günstig nur noch bezogen werden, wenn die Website bei einem Hoster wie Mittwald oder jweiland betrieben wird. Regulär kostet der so genannte „Extended Support“ für eine Website derzeit 2.000 Euro pro Jahr zzgl. MwSt.

Wer dennoch auf eine Migration von tt_news nach News System verzichten will, kann eine tt_news-Version im GitHub beziehen, welche 8.7-Kompatibilität angibt: https://github.com/rupertgermann/tt_news. Dies ist allerdings keine offizielle Version aus dem Repository und es ist unsicher, wie stabil sie läuft. Zudem stellt der Entwickler – dem Datum der Uploads nach zu schließen – scheinbar keine Sicherheitspatches bereit.

Durchführung der Migration von tt_news nach News System

Nachfolgend beschreiben wir die Umstellung von tt_news nach News System:
Sollte ein Upgrade von TYPO3 in Version 7.x auf Version 8.x geplant sein, so sollte die Migration von tt_news nach News System vor dem TYPO3-Upgrade durchgeführt werden.

Empfehlenswert ist zudem, vorab eine Datenbanksicherung vorzunehmen.

1. Im ersten Schritt installieren wir die Extension news_ttnewsimport

   über den Extension-Manager im T3-Backend oder beziehen sie alternativ aus dem Repository und installieren sie dann in T3 über das Modul Erweiterungen. Mit dieser Extension können wir tt_news-Datensätze in die Extension News System importieren.

   Erforderlich für eine erfolgreiche Installation ist TYPO3 in Version 6.2 oder höher sowie die Extension news in Version 3.0 oder höher.

2. Nun machen wir im PageTree das Modul News Importer verfügbar.

   Denn es wird nicht per Standard angezeigt, sondern muss aktiviert werden. Und zwar nicht – wie zu vermuten wäre – über die Extension news_ttnewsimport, sondern indem im Erweiterungsmanager die Konfiguration der Extension news aufgerufen wird.

   Im Reiter Import Module wird „Show Importer“ aktiviert sowie der Newsordner angegeben, welcher vorab auf dem Server anzulegen ist und in welchem im Zuge der Migration von tt_news nach News System die News-Bilder abgelegt werden. Nach dem Refresh der Seite wird im PageTree unter SYSTEM das neue Icon News Import / Nachrichten Importieren angezeigt.

   

3. Mittels des neuen Moduls News Import können wir festlegen, was wir importieren möchten – z.B. Kategorien oder Newseinträge.

   Möglicher Weise bricht der Importer nach ca. 100 Newseinträgen ab. In diesem Fall müssen wir den Import einfach nochmals neu starten. Bereits vorhandene News werden ignoriert, noch nicht importierte News werden importiert. Die neuen Newseinträge befinden sich nach dem Import im selben Ordner wie die bisherigen Newseinträge wobei die alten Newseinträge nicht automatisch gelöscht, sondern beibehalten werden. Auch die Newsbilder werden importiert, allerdings nicht die Plugin- sowie Typoscript-Einstellungen.

4. Nach Abschluss des Imports müssen wir – sofern noch nicht geschehen – die Extension news konfigurieren. Die entsprechende (englischsprachige) Anleitung wird hier bereitgestellt: https://docs.typo3.org/typo3cms/extensions/news/Introduction/Index.html

Stichwörter: Migration von tt_news nach News System, Umstellung von tt_news zu News System

Der Beitrag Migration von tt_news nach News System erschien zuerst auf Webdesign Tipps / Webdesign Blog.

Was sind vCards?

Eine vCard ist eine Art elektrische Visitenkarte. Typischer Weise wird auf der Unternehmenswebsite auf der Profilseite eines Mitarbeiters ein Download-Link für seine vCard angeboten. Der Besucher kann dann durch Anklicken des Links die vCard herunterladen oder direkt in sein Adressbuch übernehmen.

vCards mit TYPO3 erstellen: Einsatz von Extensions

Haben sich vCards vor einigen Jahren noch größter Beliebtheit erfreut, so ist es um sie mittlerweile etwas still geworden. Vielleicht, weil sich die Unternehmensmitarbeiter zunehmend über Portale wie beispielsweise LinkedIn oder Xing vorstellen.

Früher gab es für TYPO3 eine Reihe von Extensions für die Erstellung von vCards. Manche auch mit Anbindung an tt_addresses oder tt_news. Die wohl bekanntesten waren:

• vcard
• simplevcard
• neeg_vcard
• wt_directory

Diese Extensions wurden jedoch nicht weiterentwickelt und die Kompatibilität endet mit TYPO3 in Version 4.x oder 6.0.99. vCard-Extensions, die mit TYPO3 in Version 7 oder gar höher kompatibel sind, sucht man vergeblich. Aktuell (Stand 07.2018) gibt es keine Extension mehr, mit der sich auf einfachem Wege vCards mit TYPO3 erstellen lassen.

Dabei haben vCards nach wie vor ihre Existenzberechtigung. Kunden und Geschäftspartnern wird die Möglichkeit gegeben, per Klick und sich daran anschließenden Import einfach und komfortabel alle relevanten Daten zum Ansprechpartner abzuspeichern und jederzeit verfügbar zu haben. Dies trägt nicht zuletzt zur Kundenbindung bei.

Eigene vCards mit TYPO3 erstellen

Mit entsprechenden Kenntnissen ist es auch ohne Einsatz von Extensions möglich, in TYPO3 vCards zu erstellen.

Folgende Voraussetzungen sind erforderlich:

vCard-Standards

Um vCards zu erstellen, sollten Sie über entsprechende Kenntnisse und Hintergrundinformationen zum vCard-Format verfügen. Auf Wikipedia stehen umfangreiche Informationen zu den vCard-Standards 2.1, 3.0 sowie 4.0 bereit.

Eine typische vCard im Standard 3.0 sieht folgendermaßen aus:

BEGIN:VCARD
VERSION:3.0
N:Mustermann;Erika;;Dr.;
FN:Dr. Erika Mustermann
ORG:Wikimedia
ROLE:Kommunikation
TITLE:Redaktion & Gestaltung
PHOTO;VALUE=URL;TYPE=JPEG:http://commons.wikimedia.org/wiki/File:Erika_Mustermann_2010.jpg
TEL;TYPE=WORK,VOICE:+49 221 9999123
TEL;TYPE=HOME,VOICE:+49 221 1234567
ADR;TYPE=HOME:;;Heidestraße 17;Köln;;51147;Germany
EMAIL;TYPE=PREF,INTERNET:
URL:http://de.wikipedia.org/
REV:2014-03-01T22:11:10Z
END:VCARD

Integration eines Mitarbeiterbildes in die vCard

Nicht zwingend erforderlich aber oft gewünscht ist, dass bei der vCard auch ein Bild des Mitarbeiters dabei ist. Der unter Wikipedia vorgestellte Ansatz für die Integration eines Bildes Mittels Angabe einer URL sieht so aus:

PHOTO;TYPE=JPEG:http://example.org/photo.jpg

Dieses Vorgehen funktioniert unserer Erfahrung nach in keinem der vCard-Standards – zumindest nicht für Adressbücher wie die von Outlook oder Android.

Einen Ausweg bietet eine Base64-Codierung des Bildes. Die Konvertierung lässt sich über Base64 Image Encoder realisieren – beispielsweise mit: https://www.base64-image.de/

Erstellung der vCard in TYPO3 Mittels TypoScript

In TYPO3 können Sie eine vCard ohne Extension und ausschließlich mit Hilfe von TypoScript erstellen.

In der Regel möchten Sie nicht nur für einen, sondern für eine Vielzahl von Mitarbeitern vCards erstellen. Dann ist folgendes Vorgehen empfehlenswert:

1. Sie erstellen eine eigene Inhaltsseite – beispielsweise mit dem URL-Pfadsegement /vcard
   und integrieren dort ein Extension-Template.
2. Auf der Profilseite des Mitarbeiters wird ein Link eingerichtet, dem über die URL die Zielseite, die ID der Profilseite sowie die typeNum mitgegeben wird. Zum Beispiel:/vcard?id=123&type=5000
   Klickt der Benutzer den vCard-Link an, so wird er zur vCard-Inhaltsseite weitergeleitet und die erforderlichen Parameter werden über die URL bereitgestellt.
3. CONSTANTS
   Auf der vCard-Inhaltsseite wird in den CONSTANTS des Extension-Templates der Wert der ID aus der URL ausgelesen. Für jeden Mitarbeiter (identifizierbar über die ID) wird mittels einer Condition [globalVar = GP: id = 123] geprüft, um welchen Mitarbeiter es sich handelt und entsprechende globale Variablen mit den zugehörigen Werten befüllt (Name der vCard, Vorname, Nachname des Ansprechpartners, Adresse, Telefonnummer usw.).
4. SETUP
   Im SETUP erstellen Sie ein eigenes PAGE-Object, in diesem Fall mit typeNum = 5000.
   Nun schalten Sie den Standard-Headercode ab und integrieren einen eigenen vCard-Header, der die Ausgabe der vCard initiiert. Das Page-Object wird jetzt noch mit den globalen Variablen befüllt, die vorher in den CONSTANTS definiert wurden. Je nach dem Wert der ID, welcher über die Variable in der URL übergeben wird, werden somit die Daten des gewünschten Mitarbeiters in die vCard geschrieben und seine individuelle vCard erstellt.

vCards in TYPO3: ergänzende Informationen

1. Da die Einpflege der Mitarbeiterdaten bei einer größeren Anzahl von Mitarbeitern aufwendig – und aufgrund der Datenstruktur der vCards auch fehleranfällig – ist, haben wir noch eine kleine PHP-Datei geschrieben. Dort lassen sich die Einträge zu jedem Mitarbeiter übersichtlich über Variablen vornehmen, die in ein Array gefüllt werden. Das Array wird anschließend über eine Schleife ausgelesen und komfortabel die fertige Ausgabe erstellt, die nur noch per Copy & Paste in die CONSTANTS im TYPO3 Extension-Template zu übernehmen ist.
2. Werden Base64-codierte Bilder eingesetzt, so ist bei ca. 5 Mitarbeitern Schluss. Denn die Base64-Codes sind sehr lang und die Anzahl der in den CONSTANTS eintragbaren (und in der Datenbank abspeicherbaren) Zeichen begrenzt. Ein Ausweg ist, für jedes Mitarbeiterbild ein eigenes Extension Templates zu erstellen und dieses dann in das Haupttemplate zu laden (Basis-Template einschließen:).

Stichwörter: vCards mit TYPO3 erstellen

Der Beitrag vCards mit TYPO3 erstellen. erschien zuerst auf Webdesign Tipps / Webdesign Blog.

Die besten Hoster für TYPO3 / TYPO3 Hosting
Bei der Suche nach einem geeigneten Hoster für den Betrieb einer TYPO3-Website gilt es unterschiedliche Aspekte zu beachten:

1. TYPO3 Installation: Leistungsfähigkeit des Webservers

TYPO3 Websites stellen relativ hohe Anforderungen an die Leistungsfähigkeit des Webservers. Daher sollten Sie darauf verzichten, TYPO3 auf sehr günstigen Shared-Hosting-Paketen zu installieren. Sofern die TYPO3-Website überhaupt erfolgreich zum Laufen gebracht wird, sind meist viele Probleme und Fallstricke zu bewältigen. Dadurch steht die vermeintliche Ersparnis beim Webhosting oft in keinem vernünftigen Verhältnis zum Aufwand für die Installation und die Problembehebung, die während des laufenden Betriebs entsteht.

Es ist zudem nicht damit getan, TYPO3 selbst erfolgreich zu installieren. Meist soll der Standard-Funktionsumfang durch mehr oder weniger komplexe Extensions (= Erweiterungen) ergänzt werden. Während der Installation kann der Server ins Time Out rutschen. Gründe dafür sind meist die Überschreitung der Maximum Execution Time (= maximale Scriptausführungszeit) oder des Memory Limits (= Speicherlimit).

Welche Anforderungen muss der TYPO3-Webserver erfüllen?

Hier werden die erforderlichen Anforderungen an TYPO3 beschrieben:

Benötigte Infrastruktur

1. Betriebssystem: Unix (z.B. Linux), Windows or Mac
2. Webserver: Apache (empfohlen), IIS, NGINX
3. Middleware: PHP (die erforderliche PHP-Version ist abhängig von der TYPO3-Version)
4. Datenbank: MySQL oder jede andere Datenbank, die DBAL unterstützt (z.B. Oracle, Postgres etc.)
5. Hardware: mindestens 256 MB RAM. Ein höherer Arbeitsspeicher ist empfehlenswert.

Empfohlene Features

• GraphicsMagick oder ImageMagick
• GDlib/Freetype (kompiliert mit PHP)
• zlib (kompiliert mit PHP)
• Apache mit mod_gzip/mod_deflate/mod_rewrite
• Ein PHP-Cache (z.B.: APCu / PHP-Accelerator / OPcache / Zend Accelerator, nur für UNIX/Linux verfügbar).

Vor diesem Hintergrund zielen viele Webhosting-Empfehlungen auf möglichst leistungsstarke Server ab, welche vorstehende Anforderungen erfüllen. Schnell werden Hoster wie Strato und 1&1 genannt, die mit Web-Paketen wie PowerWeb Pro (Strato) bzw. Unlimited Pro (1&1) reichlich Performance bieten.

Doch sind sie für das Hosting von TYPO3-Websites geeignet?
Wir haben in der Vergangenheit mit dem Betrieb von TYPO3 Websites bei 1&1 schlechte Erfahrungen gemacht. Ständig musste der TYPO3-Cache neu aufgebaut werden und der Besucher erhielt eine entsprechende Meldung. Auch bei der Performance gab es Schwierigkeiten. Vor diesem Hintergrund haben wir bereits vor Jahren sämtliche Kunden-Websites zu anderen Hostern transferiert. Denn neben der Performance des Webservers gibt es noch einen weiteren wichtigen Aspekt, der leider oft vernachlässigt wird:

2. Support des Hosters: wie gut ist der TYPO3 Support?

Es ist gut und schön, wenn sich im Kunden-Verwaltungsbereich des Hosters TYPO3 per Klick installieren lässt. Ein wirklich komfortabler Service – auch wenn TYPO3-Entwickler das genauso gut in 5-10 Minuten „per Hand“ schaffen.

Darauf sollte sich das Know-how des Hosters aber nicht beschränken. Bei Problemen wünscht man sich einen kompetenten Ansprechpartner. Auch wenn bestimmte Features auf dem Webserver installiert oder freigeschaltet werden müssen, benötigen Sie die Unterstützung durch den Hoster.

Ist es ausreichend, wenn eine Mailanfrage an den Support nach mehreren Tagen bis hin zu einer Woche mit einer Standard-Mail beantwortet wird? Eine Standard-E-Mail, in der zu lesen ist, dass es sich bei TYPO3 um die Software eines Drittanbieters handelt, für die man leider keinen Support geben könne? Vorsorglich weist 1&1 auch im Hilfe-Center darauf hin:

In diesem Artikel wird die standardmäßige Installation von Typo3 beschrieben. Einen weiteren Support für diese externe Software können wir Ihnen nicht anbieten. Prüfen Sie in regelmäßigen Abständen, ob für Typo3 oder die Plugins ein Updates verfügbar sind.

1&1 kennt die korrekte Schreibweise nicht – statt TYPO3 wird Typo3 geschrieben. Bei 1&1 scheint zudem nicht einmal bekannt zu sein, dass man zwar bei WordPress, nicht aber bei TYPO3 von „Plugins“ spricht. Diese heißen bei TYPO3 „Extensions.“ Vielleicht findet sich bereits hier die Antwort auf die Frage, warum 1&1 keinen TYPO3-Support bietet.

3. Welche Hoster sind für den Betrieb von TYPO3-Websites empfehlenswert?

Es finden sich eine ganze Reihe an Empfehlungen, die aber nicht unbedingt auch immer zielführend sind. Anbieter wie guter-webhoster.de informieren zunächst über TYPO3 und verlinken dort zu einer tabellarischen Übersicht zu empfehlenswerten Hostern. Dort sind auch Anbieter wie 1&1 sowie Strato vorne mit dabei, die von vielen Benutzern in den einschlägigen TYPO3-Foren regelmäßig kritisiert werden. Dabei ist allerdings zu berücksichtigen: Entsprechende Links zu den Anbietern sind Affilated, bringen bei einem Vertragsabschluss also eine Provision ein.

Der TYPO3 spezialisierte Anbieter jweiland wird in der Auflistung erst gar nicht erwähnt. Vielleicht weil er nicht am Affilated-Programm teilnimmt?

TYPO3 spezialisierte Hoster: Mittwald und jweiland

Zwei Anbieter tun sich im Bereich TYPO3-Hosting besonders hervor

• Mittwald
• jweiland

Beide bieten:

1. TYPO3 spezialisiertes Hosting inklusive automatischer Installation von Sicherheitspatches und TYPO3-Versionsaktualisierung innerhalb einer Version (z.B. von Version 7.6.19 auf 7.6.21).
2. Professionellen TYPO3-Support
3. Umfangreiche Tutorials / Anleitungen zu TYPO3
4. Aktives Sponsoring der Weiterentwicklung des TYPO3-Systems, indem sie als Premium-Partner investieren und die Entwickler finanziell unterstützen.

jweiland bietet zudem immer wieder attraktive Sonderkonditionen. So ist im März 2017 der Support von TYPO3 in Version 6.2 LTS ausgelaufen und ein erweiterter Support kostet regulär 2.000 EUR/Jahr (netto). jweiland bietet ihn seinen Hostingkunden für 200 EUR (netto) an. Mittwald geht sogar noch einen Schritt weiter: hier ist der Extended Support für TYPO3 in Version 6.2.x LTS inklusive.

Eine solche Spezialisierung ist allerdings nicht zum Nulltarif zu haben. Sowohl Mittwald als auch jweiland sind relativ hochpreisige Webhoster. Zudem sind in deren Hostingpaketen nur maximal eine Domain inklusive. Bei Mittwald sind weiterhin die Domaingebühren sehr hoch. Die Nettopreise beginnen für die günstigsten TLD (= Top Level Domains) bei 18 EUR/Jahr und Domain zzgl. einer Einrichtungsgebühr von mindestens 9 EUR. Alle Preisangaben zzgl. MwSt.

Bei jweiland kostet das günstigste Hosting Business aktuell 16 EUR/Monat (brutto), der günstigste Managed Server Premium QS (den sich vier Kunden teilen) gibt es ab 150 EUR/Monat. Mittwald bietet TYPO3-Hosting im XL-Paket ab 9,99 EUR/Monat (netto) an, wobei es empfehlenswert ist, das Paket XXL für 16,99 EUR/Monat (netto) zu wählen. Managed Server gibt es ab 99,99 EUR/Monat (netto).

TYPO3 Hosting: Weitere Hoster für TYPO3-Websites

Die besten Hoster für TYPO3: Verschiedene Hoster werden für das TYPO3 Hosting in der TYPO3-Community „gehandelt.“
So beispielsweise auch HostEurope, deren Angebot sehr modular aufgebaut ist und daher einen extrem preiswerten Einstieg in das Webhosting ermöglicht. De facto gab es verschiedentlich Kritik, dass wichtige Dinge wie ImageMagick oder ein CronJob für die System-Extension Scheduler erst bei relativ hochpreisigen Hostingpaketen angeboten wurden.

Da wir selbst einen eigenen WebServer betreiben, auf dem unsere Websites sowie die unsere Kunden liegen, wechseln wir inzwischen nicht mehr zwischen verschiedenen Hostern und kennen daher nicht die aktuellen Vor- und Nachteile verschiedener Anbieter.

Im Zusammenhang mit dem Betrieb von TYPO3-Websites werden folgende Hoster immer wieder positiv erwähnt (Nennung in alphabetischer Reihenfolge):

1. Alfahosting
2. All-Inkl
3. Domainfactory
   (Achtung: deren Rechenzentren befinden sich teilweise im EU-Ausland und nicht ausschließlich in Deutschen Rechenzentren, was ggf. Auswirkungen beim Datenschutz haben kann).
4. Hetzner

Stichworte: Die besten Hoster für TYPO3 Websites, TYPO3 Hosting

Der Beitrag Die besten Hoster für TYPO3 Websites, TYPO3 Hosting erschien zuerst auf Webdesign Tipps / Webdesign Blog.

tt_news Untertitel mit RTE ausstatten: Meist benötigt man für das Untertitel-Feld der Extension tt_news keinen RTE. Denn der Inhalt des Feldes Untertitel wird in der Regel zugleich für den Inhalt des Feldes Description im Quelltext der Seite verwendet und dient somit zur Suchmaschinenoptimierung. Das funktioniert problemlos mittels einiger Zeilen TypoScript:

  page.headerData.999 {
    local >
    local {
      description.data = register:newsSubheader
    }
  }

• Daher möchte man als Administrator normalerweise weder, dass der Text im Feld Untertitel zu lang wird und begrenzt deshalb die Zeichenzahl mit Hilfe von TypoScript (subheader_stdWrap.crop =).
• Noch sind in der Regel HTML-Formatierungen erwünscht, die ja ebenfalls in der Description ausgegeben werden.

Warum der RTE für das tt_news Untertitel-Feld dennoch sinnvoll sein kann

In einem aktuellen Projekt hat sich für uns eine neue Situation ergeben: hier soll die tt_news Extension nicht nur für den Bereich Aktuelles zum Einsatz kommen, sondern auch für den Newsletterbereich. Die Newsletter-Detailinhalte selbst sollen jedoch ausschließlich als PDF-Dateien bereitgestellt werden und innerhalb von TYPO3 lediglich auf diese PDFs verlinkt werden. Diese Links sollen bereits in der Listenansicht und nicht erst in der Detailansicht von tt_news integriert werden. Aufgrund der rudimentären On-Site-Informationen spielt der SEO-Aspekt keine primäre Rolle. Zudem sind die Newsletterinhalte spezifisch auf die Zielgruppe ausgerichtet und es sollen mit dem Newsletter hauptsächlich Bestandskunden angesprochen werden.

Prinzipiell lässt sich im tt_news Untertitel-Feld natürlich „per Hand“ HTML eintragen. Was für den Webdesigner zum Standard gehört, stellt viele Redakteure jedoch vor (meist unerwünschte) Herausforderungen.

Wie lässt sich in TYPO3 für tt_news ein RTE in das Feld Untertitel integrieren?

Einen sehr interessanten Ansatz stellt Oliver Tempel vor.

Um das tt_news Untertitel-Feld mit RTE-Funktionalität auszustatten, benötigen wir zunächst etwas PHP-Code, der in die Datei extTables.php im Verzeichnis /typo3conf einzutragen ist.

<?php
    t3lib_div::loadTCA('tt_news');
    $GLOBALS['TCA']['tt_news']['columns']['short']['config']['softref'] = 'typolink_tag,images,email[subst],url';
    $GLOBALS['TCA']['tt_news']['columns']['short']['config']['wizards'] = array(
      '_PADDING' => 4,
      'RTE' => array(
        'notNewRecords' => 1,
        'RTEonly' => 1,
        'type' => 'script',
        'title' => 'LLL:EXT:lang/locallang_general.php:LGL.subheader',
        'icon' => 'wizard_rte2.gif',
        'script' => 'wizard_rte.php',
      ),
    );
    foreach($GLOBALS['TCA']['tt_news']['types'] as $index => $conf) {
      $GLOBALS['TCA']['tt_news']['types'][$index]['showitem'] = preg_replace('/short([.^,])*,/', 'short;;;richtext:rte_transform[flag=rte_enabled|mode=ts];4-4-4,', $GLOBALS['TCA']['tt_news']['types'][$index]['showitem']);
    }
?>

Anschließend ergänzen wir das TypoScript und teilen TYPO3 mit, dass wir den tt_news Untertitel mit RTE versehen möchten (lib.parseFunc_RTE):

   plugin.tt_news {
      displayList{
        subheader_stdWrap.stripHtml = 0
        subheader_stdWrap.crop =
        subheader_stdWrap.parseFunc =< lib.parseFunc_RTE
        subheader_stdWrap.outerWrap >
      }

      displayLatest{
        subheader_stdWrap.stripHtml = 0
        subheader_stdWrap.crop =
        subheader_stdWrap.parseFunc =< lib.parseFunc_RTE
        subheader_stdWrap.outerWrap >
      }

      displaySingle{
        subheader_stdWrap.stripHtml = 0
        subheader_stdWrap.crop =
        subheader_stdWrap.parseFunc =< lib.parseFunc_RTE
        subheader_stdWrap.outerWrap >
      }
    }

Stichworte: tt_news Untertitel mit RTE

Der Beitrag Den TYPO3 tt_news Untertitel mit RTE ausstatten erschien zuerst auf Webdesign Tipps / Webdesign Blog.

Um die Antwort gleich vorwegzunehmen: selbstverständlich lassen sich Responsive Webseiten mit TYPO3 realisieren.

Dabei ist folgendes zu berücksichtigen:
Ob eine Website responsive ist oder nicht, hat rein gar nichts mit TYPO3 zu tun. Sondern ausschließlich damit, ob das erstellte Template sowie das zugehörige CSS so entwickelt wurde, dass darin auch ein für Mobilgeräte optimiertes Design enthalten ist.

» Tipp: Dieser Artikel beschäftigt sich ausführlich mit der Erstellung von TYPO3 Templates und stellt eine detaillierte Anleitung bereit.

Eine Responsive Website mit TYPO3 realisieren

Um eine responsive Layoutvorlage zu erstellen, werden entsprechende Kenntnisse in HTML und CSS vorausgesetzt. Dabei gilt es, die Website nicht nur für Desktop-Computer zu gestalten, sondern auch die speziellen Anforderungen von Mobilgeräten zu berücksichtigen:

1. Mobile Endgeräte wie Tablets oder Smartphones verfügen über einen kleineren Anzeigebereich und können auch hochkant („Potrait-Modus“) gehalten werden, wodurch sich die zur Verfügung stehende Breite weiter reduziert. Entsprechend muss sich die Größe der Seiteninhaltselemente – wie Spaltenbreite oder Bildgröße – dynamisch an den zur Verfügung stehenden Platz anpassen.
2. Aufgrund der reduzierten Platzverhältnisse empfiehlt sich, insbesondere bei der Darstellung auf Smartphones, ein speziell angepasstes Menü. Häufig findet das so genannte „Hamburger-Menü“ Anwendung. Der Name resultiert daraus, dass die üblicher Weise verwendeten drei Querstriche mit etwas Fantasie aussehen wie ein „Hamburger“.
3. Auf Tablets und Smartphones wird durch Antippen der Navigationselemente und Links navigiert statt mit der Maus. Entsprechend gibt es auch kein „MouseOver“.
   Hier erfahrt ihr, wie sich Touchpad-freundlichen Navigationsmenüs in TYPO3 umsetzen lassen.

Für die Realisation von Responsiven Websites haben sich zwei unterschiedliche Ansätze etabliert:

• Entweder es wird nur ein Design für die Website entwickelt und so optimiert, dass sich die Anzeige für das jeweilige Benutzerendgerät anpasst.
• Oder es wird zweigleisig gefahren und die Desktop-Version der Website auf der Hauptdomain zur Verfügung gestellt und die mobile Webseitenversion auf einer Subdomain – oft mit vorangestelltem „m“ in folgender Form: https://m.domainname.de.

Welche Methode zu bevorzugen ist, hängt von der Intention ab. Google empfiehlt, die Website unter der Haupt-Domain bereitzustellen und so zu entwickeln, dass sich das Layout für die unterschiedlichen Benutzerendgeräte anpasst.

Insbesondere wenn die Inhalte der mobilen Webseitenversion von denen der Desktop-Version abweichen, kann es aber durchaus sinnvoll sein, mit einer Subdomain zu arbeiten, über eine Mobile Detection das Benutzerendgerät zu identifizieren und automatisch auf die passende URL weiterzuleiten. Weitere Informationen zu diesem Thema stellen wir hier bereit:
Responsive Homepages.

Responsive Webseiten mit TYPO3:
Folgende Bereiche gilt es bei der Realisation eines reponsiven TYPO3 Templates zu berücksichtigen:

1. Viewport der responsiven Website

Damit sich das Weblayout in Bezug auf die Inhaltselemente und Schriftgröße einheitlich an die Darstellung für mobile Geräte anpasst, ist der Viewport zu definieren. Unter einem Viewport wird der für die Darstellung zur Verfügung stehende Bereich verstanden. Beispielsweise die Größe des in einem Browserfenster zur Verfügung stehenden Platzes.

Eine gebräuchliche und weit verbreitete Angabe ist:

<meta name="viewport" content="width=device-width; initial-scale=1.0" />   
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

2. Automatische Anpassung der Bildgröße

In TYPO3 werden Bilder per Standard in einer fixen Größe integriert. Damit die Bildgröße sich bei responsiven Webseiten mit TYPO3 dynamisch an den zur Verfügung stehenden Platz anpasst – also insbesondere reduziert, wenn das Browserfenster schmaler wird – sind entsprechende Anpassungen über das CSS erforderlich:

.csc-textpic-image img,
img {
    max-width: 100%;
    height: auto;
    width: auto;
  }

Außerdem muss bis TYPO3 Version 6.x für die von TYPO3 verwendeten Classes csc-textpic-imagewrap die Eigenschaft float: none; festgelegt werden.

Ab TYPO3 Version 7.x wird für die Class ce-column die Eigenschaft float: none; integriert.

3. Anpassung der Spaltenelemente

Häufig werden auf Webseiten mehrspaltige Inhalte gezeigt. So kommen beispielsweise zwei-, drei- oder gar vierspaltige Inhaltsbereich zum Einsatz wie auf vorgenannter Seite zu sehen ist. Wird dort die Website am Desktop-PC zunächst groß angezeigt, dann aber immer schmaler gezogen, so passt sich auch das Layout an.

Reduziert sich die Anzeigebreite, so werden die Spalten zunächst schmaler und schließlich untereinander angezeigt. Dies wird über zwei Techniken erreicht:

1. Um die Breite des Browserfensters zu ermitteln und in Abhängigkeit vom zur Verfügung stehenden Platz Änderungen am Layout vornehmen zu können, werden Media Queries eingesetzt.
   
2. Sobald über die Media Query ermittelt wird, dass die zu Verfügung stehende Breite zu gering ist, wird die Breite der DIV-Container über CSS auf 100% erweitert. Dadurch werden die Spalten nicht mehr nebeneinander sondern untereinander angezeigt.

4. Responsives Webdesign über Media Queries

Alle halbwegs modernen Webbrowser „verstehen“ und unterstützen Media Queries.

• Firefox bereits seit Version 3.5, die Mitte 2009 herausgegeben wurde.
• Der Internet Explorer bietet die Unterstützung von Media Queries erst ab Version 9 an, welche zuerst im März 2010 veröffentlich wurde.
• Der Apple-Browser Safari dessen Rendering Engine Webkit auch in Googles Chrome zum Einsatz kommt, unterstützt Media Queries bereits seit Version 3, die im Juni 2007 veröffentlicht wurde.
• Der Browser Opera bietet Media Query-Unterstützung bereits seit Version 8 aus dem Jahre 2005 an.

Zusammenfassend lässt sich sagen, dass selbst das Schlusslicht Internet Explorer seit Frühjahr 2010 Media Queries unterstützt und deren Einsatz somit problemlos möglich ist.

Was aber genau sind „Media Queries“?
Mit Media Queries lassen sich mittels CSS diverse Eigenschaften des Browsers bzw. Endgeräts abfragen.

Einige Beispiele:

• Eigenschaft width
  Damit lässt sich in Abhängigkeit von der Breite des Viewports angepasstes CSS ausgeben.
  Beispiel:
  @media screen and (max-width: 780px) {…}
  D.h: „wenn die Breite des Vieports maximal 780 Pixel beträgt, dann wende das nachstehende CSS an.“
• Eigenschaft height
  Über diese Eigenschaft lässt sich in Abhängigkeit von der Viewport-Höhe das CSS anpassen.
  Beispiel:
  @media screen and (max-height: 500px) {…}
• Eigenschaft orientation
  Tablets und Smartphones können im Hochformat (= Portrait) oder Querformat (= Landscape) gehalten werden. Dafür lässt sich separat das Layout anpassen.
  Beispiel:
  @media all and (orientation:landscape) {…}

Das Layout einer Webseite soll (schematisch) auf dem Desktop-Rechner, Tablet sowie Smartphone folgendermaßen angepasst werden:

Das zugehörige HTML halten wir ganz einfach:

<header>  
  <div id="main-menu">NAVIGATION</div>
</header 

<main>  
  <div class="col1">SPALTE 1</div>  
  <div class="col2">SPALTE 2</div>
</main>

Für die Desktop-Version der Website definieren wir nachstehendes CSS:

#main-menu {
  height: 120px;
  width: 100%;
  margin: 0 0 2em 0;
  background: #98a9af; 
}

.col1 {
  float: left;
  width: 46%;
  height: 500px;
  margin: 0 2% 0 2%;
  background: #073b6c; 
}

.col2 {
  float: left;
  width: 46%;
  height: 500px;
  margin: 0 2% 0 0;
  background: #276fb4; 
}

Das CSS sorgt dafür, dass analog zur vorstehenden Abbildung im Kopfbereich der Website eine Navigation mit entsprechender Hintergrundfarbe und darunter zwei gleich breite Boxen inklusive Randabstände auf der linken und rechten Seite erzeugt werden. Durch die Verwendung von Prozentangaben wird erreicht, dass die Navigation bzw. die Boxen sich abhängig von der Browserfensterbreite an den zur Verfügung stehenden Platz anpassen.

Dadurch passt sich das Layout beim Tablet (oder iPad) automatisch an und wird auch in Portraitausrichtung korrekt angezeigt. Bei komplexeren Weblayouts kann aber selbstverständlich auch eine separate Anpassung für Tablets/iPads vorgenommen werden.

Auf dem Smartphone reduziert sich – insbesondere im Portrait-Modus, d.h. wenn das Smartphone hochkant gehalten wird – der zur Verfügung stehende Platz drastisch. Daher sollen SPALTE 1 und SPALTE 2 nun nicht mehr neben- sondern untereinander angezeigt werden. Hier kommen die Media Queries ins Spiel:

@media screen and (max-width: 480px) { 

  .col1 {
    width: 100%;
    height: 250px;
    margin: 0 10px 10px 10px;
  }

  .col2 {
    width: 100%;
    height: 250px;
    margin: 10px 10px 0 10px;
  }
}

Vorstehendes CSS überprüft, ob die Browserfensterbreite bzw. der Viewport 480 Pixel oder kleiner ist. Ist dies der Fall, so werden die Werte von .col1 und .col2 überschrieben. Die Spalten werden auf 100% Breite gesetzt dadurch verdrängt SPALTE 1 die SPALTE 2 und zwingt SPALTE 2 dazu, unterhalb von SPALTE 1 zu erscheinen.

Weiterhin wird den beiden Spalten eine Höhe von 250 Pixel gegeben sowie ein rechter und linker Randabstand von 10 Pixel und ein Abstand zwischen den beiden Boxen.

5. Mobiles Menü für responsive Websites

Über CSS und Media Queries lässt sich auch ein responsives (Hamburger-) Menü realisieren. Dazu kann folgendermaßen vorgegangen werden:

• Der Hamburger wird in den Quellcode der Website integriert, aber über CSS unsichtbar gesetzt (display: none;).
• Unterschreitet die Browserfensterbreite bzw. der Viewport eine bestimmte Breite, so wird der Hamburger mittels display: block; sichtbar gesetzt und im Gegenzug das reguläre (Desktop/Tablet-) Menü verborgen.
• Damit die Submenüpunkte in der Desktop-Ansicht bzw. beim mobilen Menü unterschiedlich angezeigt werden, wird – ebenfalls über Media Queries – eine entsprechende Anpassung des CSS vorgenommen, wenn die Browserfensterbreite bzw. der Viewport eine festgelegte Mindestbreite unterschreitet.

Stichworte: Responsive Webseiten mit TYPO3

Der Beitrag Responsive Webseiten mit TYPO3 erstellen: wie geht das? erschien zuerst auf Webdesign Tipps / Webdesign Blog.

Was ist ein „Template“?
Darunter wird eine Rahmenvorlage bzw. eine Art „Grundgerüst“ für das Layout einer Website verstanden. Bei WordPress werden diese Vorlagen Themes genannt.

Heutzutage basieren viele Webseiten auf Standard-Templates. Insbesondere Joomla- oder WordPress-Webseiten.

Dafür gibt es unterschiedliche Gründe:

• Begrenztes Budget
  Kann oder möchte der Kunde nicht allzu viel in seinen Webauftritt investieren, muss die Website im Rahmen eines überschaubaren Zeitkontingents realisiert werden. Dazu bietet sich der Einsatz von Standard-Templates an.
• Mangelndes Know-how
  Es gibt viele Agenturen, die nicht primär auf Webdesign spezialisiert sind. Die Webseitenrealisation wird zwar angeboten, es fehlt aber oft das Wissen um die damit verbundenen Spezialgebiete wie zum Beispiel die Nutzung professioneller CMS-Systeme, Web-Technik, Servertechnik, Ladezeiten, Suchmaschinenoptimierung, etc.

Webseiten, die auf Standard-Templates basieren, fehlt in der Regel die Individualität. Da jeder das entsprechende Template beziehen kann, gibt es oft hunderte oder tausende von Webseiten, die identisch oder zumindest sehr ähnlich aussehen. Zwar lassen sich beim Template Dinge wie das Logo oder die Farbgebung individualisieren. Um weiterreichende Änderungen vornehmen zu können, muss jedoch das HTML und CSS „aufgebohrt“ und individuell umprogrammiert werden. Ein Aufwand, der meist gescheut wird – oft auch wegen fehlender Kenntnisse.

Ein TYPO3 Template erstellen

TYPO3 bietet den Vorteil, dass sich mit diesem CMS-System sehr einfach individuelle Webseiten erstellen lassen. Vorausgesetzt, der Entwickler verfügt über das entsprechende Know-how in Bezug auf HTML, CSS, ggf. Javascript und natürlich TYPO3 selbst.

Denn bei TYPO3 Websites werden Template und CMS-Technik sauber voneinander getrennt:

1. Im ersten Schritt erstellt der Webdesigner ganz ohne TYPO3 ein Template der zu realisierenden Website. Dazu nutzt er sein Wissen im Bereich HTML, CSS und ggf. weiteren Bereichen (z.B. Javascript).
2. Dieses Template wird während der Entwicklung und abschließend auf verschiedenen Browsern und verschiedenen Browserversionen getestet. Da Webseiten heutzutage auch responsive sein sollten, muss das Layout entsprechend gestaltet und auch auf Mobilgeräten getestet werden.
3. Auf Basis der fertigen Templatevorlage werden im nächsten Schritt die entsprechenden Bereiche – z.B. Navigationsmenü, Content und Footer – durch so genannte MARKER ersetzt. Dabei handelt es sich um eine Art „Platzhalter“, die anschließend durch TypoScript angesprochen und dynamisch durch Inhalte aus dem TYPO3-CMS befüllt werden können.

Tipp: Sie können uns gerne auf die Erstellung individueller TYPO3 Templates sowie auf die Realisation kompletter TYPO3 Webseiten ansprechen.

Eine Templatevorlage für TYPO3 realisieren

Das TYPO3 Template erstellen:
Nachstehend wird eine stark vereinfachte HTML-Templatevorlage vorgestellt. Die aus einem Navigationsmenü, sowie dem Webseiteninhalt besteht:

<!DOCTYPE html    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="de" lang="de" xmlns="http://www.w3.org/1999/xhtml"> 
  <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- METADATEN -->
    <!-- CSS -->
  </head>

  <body>
    <!-- NAVIGATIONSMENÜ -->
    <header>
      <ul id="main-menu">
        <li>
          <a href="/hauptmenuepunkt-1" target="_self">MAIN 1</a>
        </li>
        <li>
          <a href="/hauptmenuepunkt-2" target="_self">MAIN 2</a>
        </li>
        <li class="active">
          <a href="/hauptmenuepunkt-3" target="_self">MAIN 3</a>
          <ul class="hidden">
            <li><a href="/untermenuepunkt-3_1" target="_self">Sub 3.1</a></li>
            <li><a href="/untermenuepunkt-3_2" target="_self">Sub 3.2</a></li>
            <li><a href="/untermenuepunkt-3_3" target="_self">Sub 3.3</a></li>        
          </ul>
        </li>
        <li>
          <a href="/hauptmenuepunkt-4" target="_self">MAIN 4</a>
        </li> 
      </ul>
    </header>

    <!—SEITENINHALT -->
    <main>
      <h1>Überschrift der Inhaltsseite</h1> 
      <div class="g50 gl">
        <p>Inhalt der linken Spalte</p>
      </div>
      <div class="g50 gr">
        <p>Inhalt der rechten Spalte</p>
      </div>
    </main>

  </body>
</html>

Diese HTML-Vorlage lässt sich selbstverständlich noch individuell gestalten, indem zusätzliche DIV-Container integriert und ihr Inhalt mit CSS gestyled wird.

Nach Abschluss der HTML- und CSS-Erstellung verfügen wir über eine statische Einzelseite, die vollkommen unabhängig von TYPO3 funktioniert.

Vereinfachte Darstellung:

Diese Vorgehensweise entspricht derjenigen, mit der Webseiten seit der Anfangsphase des Internets realisiert werden. Indem der Code Zeile für Zeile geschrieben und optimiert wird. Bevor es CMS-Systeme gab, wurde im Anschluss folgendermaßen vorgegangen:

Wurden beispielsweise 10 Inhaltsseiten benötigt, die auf dieser Layoutvorlage basieren sollten, so musste das Template 10x dupliziert und in jeder der statischen Inhaltsseiten das Menü individuell angepasst und der Content (= Webinhalt) eingefügt werden. Je umfangreicher die Website, desto mühsamer und unübersichtlicher wurde es. Sollte ein neuer Menüpunkt integriert werden, so musste er auf jeder einzelnen HTML-Seite hinzugefügt werden. Daher wurden serverseitige Scriptsprachen wie PHP oder ASP entwickelt, mit denen sich solche Vorgänge automatisieren lassen, indem beispielsweise das Menü in eine separate Datei ausgelagert und in die index.php-Datei includiert wurde.

Noch komfortabler wird die Verwaltung der Webseiteninhalte jedoch durch den Einsatz eines Content Management System (CMS).
Der Däne Kasper Skårhøj hat dafür ab 1997 TYPO3 entwickelt.

Die Templatevorlage in TYPO3 implementieren

Im nächsten Schritt soll die zuvor erstellte Templatevorlage in TYPO3 implementiert werden und Inhalte wie die Navigation und der Content sollen dynamisch via TYPO3 befüllt werden.

Dazu wird der Inhaltsbereich, der von TYPO3 verwaltet werden soll, zunächst mit dem MARKER ###DOKUMENT### „gewrapped“. D.h. es wird TYPO3 mitgeteilt, von wo bis wo die dynamischen Inhalte einzufügen sind:

<!-- ###DOKUMENT### begin -->

<!-- ###DOKUMENT### end -->

Danach sind die Bereich, die über das TYPO3 CMS befüllt werden sollen, durch MARKER zu ersetzen. Die Bezeichnung der Marker kann selbst gewählt werden Es sind allerdings nur Buchstaben, Zahlen und der Unterstrich zu lässig. Jeder Marker beginnt und endet mit „###“.

Unser vorstehendes HTML-Template wird entsprechend angepasst und sieht im Ergebnis so aus:

<!DOCTYPE html    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xml:lang="de" lang="de" xmlns="http://www.w3.org/1999/xhtml"> 
  <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- METADATEN -->
    <!-- CSS -->
  </head>

  <body>
    <!-- ###DOKUMENT### begin -->

    <!-- NAVIGATIONSMENÜ (Erläuterung) -->
    <header>
      ###MAIN_MENU###
    </header>

    <!-- SEITENINHALT (Erläuterung) -->
    <main>
      <div class="g50 gl">
        ###COLUMNLEFT###
      </div>
      <div class="g50 gr">
        ###COLUMNRIGHT###
      </div>
    </main>

    <!-- ###DOKUMENT### end -->

  </body>
</html>

Damit unsere Templatevorlage in TYPO3 funktionsfähig ist, sind folgende Schritte erforderlich:

1. Die Templatevorlage (eine HTML-Datei) muss im TYPO3 Backend (= das Redaktionssystem von TYPO3) eingebunden werden.
2. Es muss Scriptcode für die Navigation verfasst und das Navigationsmenü in den Marker ###MAIN_MENU### geschrieben werden.
3. Außerdem muss TYPO3 mitgeteilt werden, in welchen Marker bzw. in welche Marker es die Inhalte aus der jeweiligen Spalte im Backend schreiben soll. Per Standard sind dies die Spalten „Links“, „Normal“, „Rechts“, „Rand“.
   

Die vorgenannten Schritte werden alle mit der hauseigenen Scriptsprache TypoScript durchgeführt. Im Rahmen dieser Anleitung werden Grundkenntnisse in TypoScript vorausgesetzt.

1. Zunächst erstellen wir das PAGE-Object.
2. Danach binden wir unsere Templatevorlage in TYPO3 ein.
   Die Templatevorlage wurde template.html benannt und befindet sich im Verzeichnis /fileadmin/templates/template.html
3. Anschließend teilen wir TYPO3 mit, welche Marker angesprochen und durch eigene Inhalte ersetzt werden sollen.
4. Abschließend binden wir noch unsere CSS-Datei ein.

#----- PAGE-Object erstellen: -----
page {
  typeNum = 0

  10 = TEMPLATE
  10.template = FILE
  
  10 {    
    #----- TEMPLATEVORLAGE einbinden: -----
    template.file = fileadmin/templates/template.html

    #----- TYPO3 MITTEILEN, WO SICH DIE ZU ERSETZENDEN INHALTE IM TEMPLATE BEFINDEN -----
    # In vorstehendem Template ist das der Bereich:
    # <!-- ###DOKUMENT### begin --> bis <!-- ###DOKUMENT### end -->
    # der anzusprechende Marker heißt also DOKUMENT:

    workOnSubpart = DOKUMENT
 
    marks {
      #--------SPALTEN --------
      # Für die linke Spalte ist im Template der Marker ###COLUMNLEFT### vorgesehen und
      # für die rechte Spalte der Marker ###COLUMNRIGHT###
      # Den Inhalt der Spalte “Links” in den Marker COLUMNLEFT des Templates schreiben:
      COLUMNLEFT        < styles.content.getLeft 

      # Den Inhalt der Spalte “Rechts” in den Marker COLUMNRIGHT des Templates schreiben: 
      COLUMNRIGHT       < styles.content.getRight  
     
      # In diesem Beispiel nicht verwendet aber der Vollständigkeit halber erwähnt:
      # Einfügen des Inhalts der Spalte „Normal“ in den Marker ###CONTENT### im Tempalte:
      CONTENT            < styles.content.get

      #--------NAVIGATION --------
      MAIN_MENU         < temp.MAINMENU
    }      
  }
}#end PAGE

#----- EIGENES CSS EINBINDN -----
page.includeCSS.content = fileadmin/css/main.css

Für mehrspaltige Inhalte sind in TYPO3 die Spalten Links | Normal | Rechts | Rand vorgesehen. In vorstehendem Beispiel wurde das Template so erstellt, dass der Inhalt der Spalte „Links“ des TYPO3 Backends in den Marker COLUMNLEFT und der Inhalt der Spalte „Rechts“ in den Marker COLUMNRIGHT des Templates geschrieben wird.

Zwecks größerer Flexibilität nutzen TYPO3-Entwickler aber meist andere Möglichkeiten wie beispielsweise TemplaVoila oder Grid-Elements.

Der aufmerksame Leser fragt sich nun, wie die Navigation realisiert wird. Diese wird in den Marker ###MAIN_MENU### des Templates geschrieben. In vorstehendem TypoScript findet sich dafür die Zeile:

MAIN_MENU < temp.MAINMENU

Aus Gründen der Übersichtlichkeit wurde das TypoScript für das Navigationsmenü separate erstellt und in temp.MAINMENU geschrieben. Von dort wird der Inhalt von temp.MAINMENU dann über die vorstehende TypoScript-Zeile in den Marker MAIN_MENU integriert.

Das TypoScript für das Navigationsmenü:

#--------MAIN-MENU--------
# Art des Menüs festlegen: wir verwenden ein HMENU
temp.MAINMENU = HMENU   

# Einstiegs-Level für das Menü im TYPO3 PageTree
temp.MAINMENU.entryLevel = 0

# Menü vom Typ directory:
temp.MAINMENU.special = directory

#Einstiegspunkt für das Menü ist die Seite mit der ID 2:
temp.MAINMENU.special.value = 2

temp.MAINMENU {
    ### MAIN MENU (HAUPTMENÜ) ###
    1 = TMENU
    1 {
      expAll = 1
      noBlur = 1  
      wrap = <ul id="main-menu">|</ul>  
      
      # Normalzustand des Menüs      
      NO = 1
      NO {              
        wrapItemAndSub = <li>|</li>       
      }
      
      # Aktivzustand des aktuellen Listenbereichs
      ACT < .NO
      ACT.wrapItemAndSub = <li class="active">|</li>
      
      # Die aktuelle Seite wird mit der Information zum Aktivzustand befüllt
      CUR < .ACT     
    }

    ### SUB-MENU (Untermenü) ###      
    # Das Untermenü erbt die Eigenschaften des Hauptmenüs

    2 < .1
    2 {
            
      # und wird in einigen Bereichen anders konfiguriert:
      expAll = 0
      wrap = <ul class="hidden">|</ul>
      NO {        
        wrapItemAndSub = <li>|</li>  
      }
      
      ACT < .NO
      ACT.wrapItemAndSub = <li class="active">|</li>
              
    }     
}

Fazit zu TYPO3 Template erstellen:
Auf TYPO3-Einsteiger wirkt vorstehendes TypoScript eventuell abschreckend. Dazu muss jedoch berücksichtigt werden, dass TYPO3 kein „Bunti-Bunti-Klicki-Klicki“-System ist, wo alles bereits fertig vorkonfiguriert wurde.

Sondern mit TYPO3 lassen sich professionelle Webseiten individuell gestalten. Das erfordert von Seiten des Webdesigners eine entsprechende Einarbeitung – eben auch in die eigene Scriptsprache TypoScript.

Die vorstehende Anleitung zeigt aber auch, dass die Gestaltung eines Templates und dessen Integration in das TYPO3 CMS kein „Hexenwerk“ ist. Entsprechende Kenntnisse in HTML, CSS und TYPO3 vorausgesetzt, gestaltet sich die Umsetzung eigener und individueller Webseiten mit TYPO3 sehr komfortabel.

Stichworte: TYPO3 Template erstellen

Der Beitrag TYPO3 Template erstellen – ein individuelles T3-Template gestalten erschien zuerst auf Webdesign Tipps / Webdesign Blog.

Navigationstitel statt Seitentitel: Der Vorteil liegt auf der Hand: insbesondere bei umfangreicheren Webprojekten wird einfach im Frontend nach dem Navigationstitel geschaut. Auf diesem Wege kann der Redakteur die Seite im Backend schneller finden.

Eine einzige Zeile Code führt zum gewünschten Ergebnis.

TYPO3 Version 4.x:
Auch wenn TYPO3 in Version 4.x längst outdated ist, hier nochmals der Ansatz:
Folgender Eintrag in der localconf.php sorgt dafür, dass bei allen Benutzer des TYPO3 Backends der kurze und griffige Navigationstitel statt des Seitentitels erscheint:

t3lib_extMgm::addUserTSConfig('options.pageTree.showNavTitle = 1');

TYPO3 ab Version 6
Hier lässt sich dasselbe Ergebnis durch eine zusätzliche Zeile in der PHP-Datei
typo3conf/AdditionalConfiguration.php erreichen:

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addUserTSConfig('options.pageTree.showNavTitle = 1');

Navigationstitel statt Seitentitel nur für bestimmte Benutzer oder Benutzergruppen anzeigen

Sollte es erwünscht sein, nur für ausgewählte Benutzer oder Benutzergruppen den Navigationstitel statt dem Seitentitel im Pagetree anzuzeigen, so lässt sich das in TYPO3 ebenfalls realisieren.

Dafür muss für den entsprechenden Benutzer bzw. die entsprechende Benutzergruppe lediglich folgender Eintrag in der TSconfig vorgenommen werden:

options.pageTree.showNavTitle = 1

Wie finde ich die „TSconfig“?
Im linken Bereich des TYPO3 Backends ist die Ansicht Liste auszuwählen und in der mittleren Spalte die oberste Ebene der Website („Root“). In der rechten Spalte werden daraufhin – falls vorhanden – die Backend-Benutzergruppen sowie die Backend-Benutzer angezeigt. Die gewünschte Benutzergruppe bzw. der gewünschte Benutzer ist zu editieren. Anschließend findet sich das Eintragsfeld TSconfig unter dem Reiter Optionen.

Stichworte: Navigationstitel statt Seitentitel im TYPO3 Pagetree anzeigen

Der Beitrag Navigationstitel statt Seitentitel im TYPO3 Pagetree anzeigen erschien zuerst auf Webdesign Tipps / Webdesign Blog.

Touchpad Menü mit TYPO3 – Worum geht es?
Am Desktop-Computer arbeitet der Benutzer in der Regel mit einer Maus. Mittels Mauszeiger werden beim Besuch einer Website ständig so genannte „MouseOver“ durchgeführt. Das heißt, der Mauszeiger wird unter anderem über einen (Navigations-) Link bewegt und es findet eine Interaktion statt. Beim MouseOver über einen Hauptmenüpunkt kann mittels CSS dadurch das Submenü (= Untermenü) ausgeklappt werden.

Seit Websites nicht nur für Desktop-Computer optimiert werden sondern auch responsive sein sollen, stellt sich folgendes Problem: beim Touchpad (Tablet, iPad, Smartphone) gibt es keinen MouseOver. Vielmehr muss der Benutzer den entsprechenden Menüpunkt berühren, damit eine Interaktion stattfindet. Trotzdem finden sich relativ viele Websites, deren Hauptmenüpunkt entweder direkt auf eine Inhaltsseite oder auf den ersten Untermenüpunkt verlinkt. Somit ist die Folge, dass der Benutzer das Submenü erst gar nicht zu sehen bekommen bzw. es nur „kurz aufflackert“ und beim Laden der neuen Inhaltsseite gleich wieder verschwindet.

Beispielsweise bei WordPress gibt es viele Themes, die dieses Problem mit sehr viel Javascript-Code umschiffen, damit das Submenü angezeigt bleibt. Dabei geht es auch deutlich einfacher.

Vorab-Tipp: Der nachfolgende Ansatz nutzt Anker (Anchors). Weitere Informationen zu Ankern finden sich im Artikel Anker setzen.

Touchpad Menü mit TYPO3 realisieren

Der Hauptmenüpunkt selbst wird nicht auf eine Inhaltsseite verlinkt, sondern es wird ihm ein leerer Anker mitgegeben. Der MouseOver bewirkt über die CSS-Eigenschaft hover, dass das Submenü bei MouseOver anzeigt wird. Der Anker in der URL des Hauptmenüpunkts sorgt dafür, dass das Submenü mittels

<a href="#"></a>

angesprochen werden kann.

Die von uns realisierte Website Wirtschaftsberater Köln visualisiert diesen Ansatz.

Das entsprechende HTML sieht so aus (gekürzt):

<ul id="main-menu">  
  <li class="has-sub">    
    <a href="#">HAUPTMENÜPUNKT</a>    
    <ul class="hidden">      
      <li>        
        <a href="/submenu1">Submenüpunkt 1</a>        
        <a href="/submenu2">Submenüpunkt 2</a>        
      </li>    
    </ul>  
  </li>
</ul>

Über entsprechendes CSS wird die Class „hidden“ per Standard auf unsichtbar gesetzt und bei einem MouseOver über den Anker des Hauptmenüpunktes „WIR ÜBER UNS“ sichtbar gesetzt.

Probleme mit TYPO3-Ankern

Beim Setzen eines Ankers verlinkt TYPO3 per Standard auf die Startseite der Website. Um das zu vermeiden und (wunschgemäß) auf eine bestimmte Inhaltsseite verlinken zu können, wurde bis TYPO3 in Version 6.x folgendes TypoScript verwendet:

config.prefixLocalAnchors = all

Seit TYPO3 in Version 7.x funktioniert das allerdings nicht mehr. Der Grund ist, dass hier eine Sicherheitslücke gefunden und diese Funktionalität daher deaktiviert wurde.

Abhilfe schafft, mit folgender Codezeile zu arbeiten:

config.absRefPrefix = /

Vollständiger Code:
Für nachstehendes TypoScript setzen wir voraus, dass die Website mit RealURL arbeitet.

Bisheriges TypoScript (bis TYPO3 in Version 6.x):

config.simulateStaticDocuments = 0
config.baseURL = https://a-vista-studios.de/
config.tx_realurl_enable = 1
config.prefixLocalAnchors = all

Neues TypoScript (ab TYPO3 in Version 7.x):

config.simulateStaticDocuments = 0
config.tx_realurl_enable = 1
config.absRefPrefix = /

Zudem hat der neue Ansatz den Vorteil, dass die im TypoScript keine BASE mehr eingetragen werden muss.

Der Beitrag Touchpad Menü mit TYPO3 realisieren – Touchpad-Friendly erschien zuerst auf Webdesign Tipps / Webdesign Blog.

TYPO3 Anleitungen, Manuals, Handbücher: mit dem CMS-System lassen sich professionelle Webseiten realisieren. Jedoch sind die Anforderungen relativ hoch.

Mit dem professionellen und kostenlosen Open Source Content Management System TYPO3 lassen sich hochwertige Webseiten realisieren. Das System stellt allerdings wesentlich höhere Anforderungen an deren Entwicklung, als beispielsweise WordPress oder Joomla.

Für unterschiedliche Anforderungen und Probleme stellen wir hier TYPO3 Anleitungen und Tipps zur Verfügung. Selbstverständlich können Sie uns auch mit der Realisation Ihrer TYPO3-Website beauftragen.

Unsere TYPO3 Anleitungen beziehen sich insbesondere auf das TYPO3 Backend, die hauseigene Metasprache TypoScript sowie den Einsatz von Extensions (= Erweiterungen).

Lohnt sich der Einsatz überhaupt, wenn TYPO3 so kompliziert ist? Damit kommen wir zu der Frage:

Welches CMS-System ist „das Beste“?

Welches Content Management System (CMS) zur Anwendung kommt, ist neben dem zur Verfügung stehenden Budget auch eine Frage der Anforderungen. Und manchmal auch eine Imagefrage. Es gibt zu denken, wenn eine Webagentur oder Werbeagentur offensiv damit wirbt, hochwertige Webseiten für ihre Kunden zu realisieren. Und sich selbst im Anschluss über einen 0/8/15 Internetauftritt mit einer Standardvorlage von WordPress oder Joomla präsentiert.

WordPress war ursprünglich ein reines Blog-System. „Blog“ kommt von „Weblog“, damit ist ein auf einer Website geführtes Tagebuch oder Journal gemeint. Dementsprechend ist WordPress perfekt für unseren Agentur-Blog geeignet. Für unsere Agentur-Website bevorzugen wir TYPO3.

Im Zuge der Weiterentwicklung von WordPress lassen sich bereits seit längerer Zeit auch vollständige Internetauftritte mit diesem System realisieren. Jedoch gibt es eine Reihe von Anforderungen, die sich nur oder zumindest besser mit einem professionellem System wie TYPO3 realisieren lassen.

TYPO3 ist professionell – einige Beispiele:

• Viele Funktionen von TYPO3 werden bereits mit dem Core-System bereitgestellt und mit jeder neuen TYPO3-Version automatisch und kontinuierlich weiterentwickelt. Bei WordPress hingegen beruht ein weitaus größerer Teil der Funktionalität auf Plugins (= Erweiterungsmodule). Werden solche Plugins eingesetzt und vom Anbieter nicht mehr weiterentwickelt, so besteht das Risiko, dass sie nach einem WordPress-Update nicht mehr funktionieren.
• TYPO3 bietet eine native Mehrsprachigkeit. „Nativ“ bedeutet, dass die Funktionalität der Mehrsprachigkeit bereits „von Haus“ aus im System bereitgestellt wird. Das funktioniert sehr übersichtlich und komfortabel. Bei WordPress ist die Integration der Mehrsprachigkeit hingegen nur durch eine relativ aufwendige „Multi-Site“-Lösung oder den Einsatz von (teilweise kostenpflichtigen) Plugins möglich, die unserer Erfahrung nach immer wieder erhebliche Probleme verursachen. So waren multilinguale WordPress-Websites nach einem Plugin-Update nicht mehr erreichbar und dem Besucher wurde nur noch eine Fehlermeldungsseite angezeigt.
• Das Backend (= der Verwaltungsbereich) von TYPO3 ist dank seines Page Trees (= Seitenbaum) streng hierarchisch aufgebaut und sehr viel übersichtlicher, als bei WordPress. Insbesondere Websites mit vielen Inhaltsseiten profitieren davon.
• TYPO3 verfügt über ein umfangreiches Rechte-Vergabesystem. Administratoren können und dürfen alles. Sie können individuelle Benutzergruppen konfigurieren und aus hunderten von Berechtigungen exakt festlegen, welche Änderungen die jeweilige Benutzergruppe am System vornehmen darf. Zudem kann über die Rechtevergabe eine mehrstufige Veröffentlichung festgelegt werden. So darf beispielsweise Redakteur A lediglich einen neuen Artikel anlegen aber nicht veröffentlichen. Redakteur B wird informiert, dass der neue Artikel bereitsteht und redigiert ihn, bevor durch die Geschäftsleitung C die Freigabe und Veröffentlichung erfolgt.

Das bedeutet jedoch nicht, dass TYPO3 für jeden Anwendungszweck die beste Wahl ist. Dadurch, dass TYPO3 Websites aufwendiger sind, ist deren Realisation in der Regel auch teurer.

Außerdem fällt Redakteuren die Einarbeitung in WordPress in der Regel leichter als in TYPO3 – daher haben wir das TYPO3 Handbuch für Redakteure entwickelt, wo sich täglich durchschnittlich ca. 500 Anwender über TYPO3 informieren.

WordPress-Websites

WordPress bietet eine große Auswahl von Vorlagen – so genannte „Themes“ – mit denen sich eine Website aufsetzen lässt. Das sorgt für Komfort, allerdings auch für eine reduzierte Individualität, da jeder das entsprechende Theme beziehen kann. Von Haus aus sehen Webseiten, die auf demselben Theme basieren, weitgehend identisch aus. Das mag dem netten Handwerksbetrieb egal sein, nicht aber dem renommierten mittelständischen Unternehmen. Wer nicht nur ein wenig an der Farbgebung optimieren sondern das Layout individuell anpassen möchte, sollte über fundierte Kenntnisse in HTML und CSS verfügen.

Stichworte: TYPO3 Anleitungen, TYPO3 Manuals, TYPO3 Handbücher

Der Beitrag TYPO3 Anleitungen, TYPO3 Manuals, TYPO3 Handbücher erschien zuerst auf Webdesign Tipps / Webdesign Blog.