TYPO3: Website in 30 Minuten Teil 2: TypoScript Templates, Inhalte pflegen

Im ersten Teil des TYPO3 Kurs: Website in 30 Minuten habe ich folgende Themen behandelt:

• Vorbereiten einer HTML Datei, setzen von Subparts
• Backend-Spalten anpassen
• Dateibaum erstellen
• Seitenbaum erstellen

Du hast in der Anleitung gelernt wie man ein HTML Dokument mit Subparts erstellt, wie Du das Backend mit den Spalten an Deine eigenen Bedürfnisse anpassen kannst, und was der Dateibaum und der Seitenbaum innerhalb des TYPO3-Backends ist. Wenn Du Dir das Video Tutorial angesehen hast, findest Du Dich auch in TYPO3 etwas zurecht.

In diesem Tutorial werden wir das angefangene beenden. Du wirst danach ein TypoScript Template erstellt haben. In diesem TypoScript Template werden wir die Subparts aus dem HTML Dokument ansprechen und dynamisch gegen die Inhalte aus dem TYPO3 Backend austauschen lassen. Du konfigurierst ein einfaches Listenmenü mit TypoScript inklusive einer Active-Regel. Zudem konfigurieren wir per TypoScript das Headerimage im oberen Bereich der Internetseite. Wenn Du auf der jeweiligen Seite kein Bild hinterlegst, greift das System auf ein definiertes Headerbild zurück.

(weiterlesen…)

TYPO3: Website in 30 Minuten Teil 1: HTML Template, Seitenbaum, Ressourcen

In diesem kleinen Online Tutorial möchte ich Dir zeigen, wie Du in 30 Minuten eine Internetseite mit TYPO3 erstellen kannst. Ziel dieser Anleitung soll es sein, Dir näher zu bringen, wie sich der Ablauf mit TYPO3 gestaltet, und welche Schritte Du abarbeiten musst, um am Ende auch Erfolg zu haben.

Themen in diesem Kurs:

1. Vorbereiten einer HTML Datei, setzen von Subparts
2. Backend-Spalten anpassen
3. Seitenbaum erstellen
4. Dateibaum erstellen
5. Video-Toturial ansehen

Was kann ich am Ende des Kurses mit TYPO3 machen?

Wir werden das HTML Template für TYPO3 vorbereiten. Ich gehe davon aus, dass Du bereits mit HTML vertraut bist, und ein Layout erstellen kannst. Sollte das nicht der Fall sein, steht Dir am Ende der Download mit den Dateien zur Verfügung. An denen kannst Du Dich dann weiter orientieren. Alternativ kannst Du auch meinen HTML Online Kurs durcharbeiten. Wir werden das TYPO3 für ein 3 spaltiges Layout einrichten, und zusätzlich ein austauschbares Headerbild (Emobild) anlegen. Du lernst wie man eine Dateistruktur sowie einen Seitenbaum anlegt und einen TypoScript Template Record erstellt. Am Schluss des Lehrgangs werden wir eine Seite mit Content pflegen. Wenn Du nicht selbst Lust hast ein TYPO3 zu installieren und einzurichten, möchte ich Dir Mittwald als Hoster für TYPO3 empfehlen. Die Preise sind klein und die Leistungen sehr gut: Mittwald TYPO3 Hosting.

(weiterlesen…)

TYPO3: Der t3editor

Der t3editor ist ein sehr nützliches Werkzeug für all diejenigen, die viel mit TypoScript, der Konfigurationssprache von TYPO3, zu tun haben. Bisher war es so, das das TypoScript entweder in einem einfachen textarea bearbeitet wurde. Doch diese Zeiten sind nun endlich vorbei.

Der t3editor im Extension Manager

Der t3editor ist eine sogenannte “sysext“, also eine Systemextension, die nicht im Repository als Download zur Verfügung steht. Der t3editor steht seit der Version 4.2 von TYPO3 zur Verfügung. Auch ist der t3editor nicht aktiv, nachdem TYPO3 installiert wurde. Der typoscript Editor ist beim Klick auf den Extension-Manager unter der Kategorie “Backend” zu finden. Ein Klick auf das Install Symbol genügt, um den t3editor zu aktivieren.

Der t3editor kann nun für das editieren von TypoScript verwendet werden. Allerdings steht der Editor nur zur Verfügung, wenn entweder “Setup” oder “Constants” gewählt wurde. Wird der komplette Template-Record bearbeitet, stehen nach wie vor nur die textarea zur Verfügung.

Der t3editor und TypoScript

Der t3editor stellt das TypoScript farbig dar. Beim Syntax highlighting werden sehr viele Funktionen farbig markiert. Beim Test mit tt_news wurden die meisten Begriffe farbig gekennzeichnet. Beim Einsatz von Conditions werden diese mit einer dunkelroten Farbe hinterlegt, somit fallen Sie im Code sofort auf.

Zusätzlich zum Syntax highlighting steht der Shortcut [STRG+s] zur Verfügung, der das schnelle speichern erlaubt. Ein netter Nebeneffekt: Die Eingabe bleibt auch bei langen Eingaben an der Stelle stehen, an der gerade geschrieben wurde. Ein langes nach unten scrollen entfällt somit.

Das Klammern und Tab Handling nimmt einem der t3editor ebenfalls ab. Einrückungen und geschweifte Klammern werden vom TypoScript Editor selbstständig gesetzt. Ein TypoScript Template das ohne den t3editor erstellt wurde, aber zu einem späteren Zeitpunkt von Ihm geöffnet wird, wird sauber formatiert. Alles in allem ein sehr nützliches Werkzeug dass ich in Zukunft auch gerne verwenden werde.

Google Chrome Browser und TYPO3

Google Chrome und das TYPO3 Backend

Nachdem nun der neue Browser Google Chrome als erste Beta erschienen ist, habe ich mich natürlich gleich gefragt, geht das mit TYPO3? Und die Antwort auf diese Frage lautet: Ja.

Der neue Browser ist seit einigen Tagen als Beta Download bei Google zu haben. Natürlich habe ich den Browser sofort installiert und getestet. Der Login ins TYPO3 Backend funktioniert ohne Probleme. Der Seitenaufbau im Backend ist extrem schnell. Alle Javascript-Komponenten funktionieren problemlos.

Das Arbeiten im RTE html area der bei TYPO3 in der Version 4.2.1 enthalten ist, funktioniert ebenfalls problemlos. Die Tatstaurshortcuts wie z.B. Fettschrift können ebenfalls genutzt werden. Die Geschwindigkeit des Backends ist genauso schnell mit Apples Safari. Ich bin angenehm überrascht. Bei dieser Geschwindigkeit kann der Firefox 3 nicht ganz mithalten.

Natürlich hat mich auch interessiert, was nicht funktioniert. So ist zum Beispiel der t3editor für TS Templates nicht nutzbar. Syntaxhighlighting funktioniert nicht, der Shortcut [STRG+s] zeigt ebenfalls keine Wirkung. Die TAB Funktion geht dagegen problemlos. Ausserdem verweigert die extension “Mass upload“, ein Java Applet, seinen Dienst. Es wird zwar geladen, aber beim Drag & Drop Dateiupload kommen keine Dateien im Zielverzeichniss an.

Wer den Google Chrome Browser nutzen möchte, sollte auf jeden Fall das aktuelle Java auf seinem Rechner installieren, da mit alten Java Versionen noch viel weniger funktioniert.

Einbinden von Google Analytics in TYPO3

Das Einbinden von Google Analytics in TYPO3 ist relativ einfach. Es gibt schon verschiedene Extensions die diese Aufgabe übernehmen, man kann jedoch relativ einfach per Typoscript Google Analytics in das HTML Template einbinden. Zuerst setzten wir in unserem HTML Template einen Marker. Dieser Marker kann z.B. GOOGLE heißen.

###GOOGLE###

Wenn wir nun im Template Setup folgenden Code hinterlegen, wird der Marker im HTML Template gegen den Google Analytics Code ersetzt:

(weiterlesen…)