Step by Step mit dem Site Package Tutorial
Lerne wie du deine eigene Template Extension entwickelst.
Michael Schams ist ein in der TYPO3 Szene bekannter TYPO3 Entwickler, der unter anderem Autor des TYPO3 Security Guides ist. Im TYPO3 Site Package Tutorial gibt er der Community eine Anleitung an die Hand, wie aus einem klassischen Template (HTML, CSS, JavaScript etc.) ein Design erstellt werden kann, dass sich auch mobil auf dem Smartphone und Tablet gut nutzen lässt. Dafür wird im Tutorial eine Site Package Extension entwickelt, die alle relevanten Files an einem zentralen Punkt lagert. Weiterer Vorteil: Per Version Controll z.B. über Git kann jeder Entwickler die Änderungen nachvollziehen oder zu einem bestimmten Schritt zurückgelangen.
Warum solltest du das Site Package Tutorial nutzen?
Immer mehr Nutzer rufen Webseiteninhalte über das Tablet oder unterwegs mit dem Smartphone auf. Dabei wünschen sie sich Inhalte, die schnell laden und dass sie sich gut zurechtfinden. Deshalb legen auch Suchmaschinen immer größeren Wert darauf, dass die mobilfreundlich sind. Andernfalls leiden die Suchmaschinenrankings darunter. Erst im März berichtete Google, dass der mobile-first-Index offiziell für die Bewertung der Webseite herangezogen wird.
In TYPO3 werden mittels HTML und CSS Texte, Bilder, Videos und Styles festgelegt. Wie Du dein eigenes Template als Extension mit einem responsiven Design anlegen kannst lernst du einfach und verständlich im Tutorial. Vermittelt wird ein Basisverständnis für HTML, CSS und Javascript. Geeignet ist das Tutorial vor allem für TYPO3 Entwickler und Integratoren, die bereits mit TYPO3 Erfahrung gesammelt haben.
Das Tutorial findet ihr hier.
Wie funktioniert das Tutorial?
Schritt für Schritt zeigt das Tutorial wie eine Basis Site Package erstellt wird. Dabei werden Bibliotheken wie Bootstrap und jQuery genutzt, die beispielhaften Quellcode nutzen. Screenshots
Aufbauend auf einem einfachen HTML/CSS Template werden folgende Themen behandelt:
- Aufteilung des Design Templates in Fluid Templates
- Anwendung von „Fluid Styled Content“ TypoScript
- Beinhaltet Bootstrap und jQuery Bibliotheken als externe Quellen
- Erstellung einer voll funktionierenden TYPO3 Extension
- Installation der Site Package Extension über den Extension Manager
- Erstellung einer eigenen Startseite, TypoScript Templates und die Vorschau im TYPO3 Backend
- Entwicklung eines einfachen Navigationsmenüs
- Inhalte mittels TypoScript rendern
Zusätzlich gehört zum Tutorial eine dreiteilige Videoreihe von Matthias Schreiber und Benjamin Kott.
Nach dem Tutorial wirst du nicht nur wissen, wie eine moderne TYPO3 Webseite gebaut wird, sondern auch wie du das Site Package für deine eigenen Projekte nutzen kannst.
Du hast deine erste Extension entwickelt?
Ganz nach dem Motto "TYPO3 inspires people to share!" kannst du deine Extension in der TYPO3 Extension Repository hochladen und der Community zur Verfügung stellen. Mach mit!
