Websiteentwicklung auf Basis vontypo3. Unterlagen zur Vorlesung WS 16/ Die Pagemachine AG. 2. Inhalt der Vorlesung. 3. Einführung CMS und TYPO3

Transkript

1 Websiteentwicklung auf Basis vontypo3 Unterlagen zur Vorlesung WS 16/17 1. Die Pagemachine AG 2. Inhalt der Vorlesung 3. Einführung 4. Tools & Links 5. Bekannte Websites mit TYPO3 1

2 Die Pagemachine AG Miklos Weiszhaupt Dipl.-Ing. Nachrichtentechnik, TU Darmstadt Mitgründer der Pagemachine in 2001 Seit 2004 Realisierung von Webprojekten auf Basis von TYPO3 Die Pagemachine AG Full Service Online Agentur Konzeption und Umsetzung von webbasierten Lösungen 20 Mitarbeiter in den Bereichen: Beratung, Konzeption, Gestaltung, Programmierung (PHP, MySQL), TYPO3 Extensionprogrammierung, Onlinemarketing 2

3 Die Pagemachine AG Die Pagemachine AG Praktikum und Bachelor-Thesis Wir bieten 2 Praktikumsplätze pro Semester mit der Möglichkeit, im Anschluss eine Bachelor-Thesis zu schreiben. Themen im TYPO3 Umfeld z.b. Erstellung einer Website Entwicklung einer Extension 3

4 Die Pagemachine AG Praktikum und Bachelor-Thesis bei Pagemachine Wir bieten 2 Praktikumsplätze pro Semester mit der Möglichkeit, im Anschluss eine Bachelor-Thesis zu schreiben. Themen im TYPO3 Umfeld z.b. Erstellung einer Website Entwicklung einer Extension Die Pagemachine AG TYPO3 Community Codesprints Marketingsprints Designsprints 4

5 1. Die Pagemachine AG 2. Inhalt der Vorlesung 3. Einführung 4. Tools & Links 5. Bekannte Websites mit TYPO3 Wie arbeiten wir? Inhalt der Vorlesung Fragestellungen Realisierung einer Website auf Basis von TYPO3 unter Vorgabe eines Gestaltungskonzepts Wie ist der prinzipielle Projektablauf? Welche Technologien werden verwendet? Warum wird ein CMS eingesetzt? Welche Elemente hat eine typische Website Wie wird eine Website in TYPO3 realisiert? 5

6 Wie arbeiten wir? Inhalt der Vorlesung Aufgabenstellung Vorgabe: Designkonzept (Dummy) Kopfbereich mit Logo und Bild Hauptnavigation horizontal Subnavigation vertikal Breadcrumb Navigation Suchfunktion Mehrsprachig (DE / EN) News Kontaktformular Sitemap 6

7 Wie arbeiten wir? Inhalt der Vorlesung Einrichtung und Konfiguration von TYPO3 Wie ist TYPO3 aufgebaut Was wird zum Betreiben von TYPO3 benötigt Installation von TYPO3 auf dem eigenen Rechner XAMPP und TYPO3 Version 7 LTS Wie arbeiten wir? Inhalt der Vorlesung Entwicklung der Designvorlage (HTML /CSS) Entwicklung des Templates HTML Grundlagen CSS Grundlagen Bildformate 7

8 Wie arbeiten wir? Inhalt der Vorlesung TypoScript Einführung in die Syntax TypoScript Entwicklung Wie arbeiten wir? Inhalt der Vorlesung Auswahl, Installation und Konfiguration der erforderlichen Extensions Newsmodul Suche RealURL 8

9 Wie arbeiten wir? Inhalt der Vorlesung Suchmaschinenoptimierung / Kennzahlen Wie funktioniert SEO? Welche Maßnahmen gibt es? Wie kann man den Erfolg messen? Welche Kennzahlen gibt es? Wie arbeiten wir? Inhalt der Vorlesung Literatur Einstieg in TYPO3 CMS 6.2 LTS: Installation, Grundlagen, TypoScript, TemplaVoilà, Extbase, Fluid (Galileo Computing)24. November 2014 von Frank Bongers und Michael Hassel 9

10 Wie arbeiten wir? Inhalt der Vorlesung Certified TYPO3 Integrator Der Certified TYPO3 Integrator ist eine von der TYPO3 Association entwickelte Zertifizierung für all jene, die ihre TYPO3-Kenntnisse testen und dokumentieren möchten. Die anspruchsvolle Prüfung umfasst Themen wie TypoScript Templating Backend-Administration Grundlagen der TYPO3-Implemetierung Auswahl, Installation und Konfiguration von Extensions Freiberuflern wie Agenturen dient das Zertifikat somit als Qualifikationsnachweis bei anspruchsvollen Kundenprojekten. Gleichzeitig erhalten Unternehmen ein objektives Kriterium für die Auswahl ihrer Dienstleister. Wie arbeiten wir? Inhalt der Vorlesung 10

11 Wie arbeiten wir? Inhalt der Vorlesung Klausur Themengebiete Multiple Choice allgemeine Fragen zu TYPO3 Fragen zu HTML / CSS Fragen zu TypoScript Fragen zu den Themen SEO, Usability Präsentationen zur Vorlesung ausreichend. 1. Die Pagemachine AG 2. Inhalt der Vorlesung 3. Einführung 4. Tools & Links 5. Bekannte Websites mit TYPO3 11

12 Wie denken wir? Content Management System Ein Content-Management-System (kurz: CMS, übersetzt: Inhaltsverwaltungssystem) ist ein System zur gemeinschaftlichen Erstellung, Bearbeitung und Organisation von Inhalten. Diese können aus Text- und Multimedia-Dokumenten bestehen. Ein Autor kann ein solches System in den meisten Fällen ohne Programmier- oder HTML- Kenntnisse bedienen. Der darzustellende Informationsgehalt wird in diesem Zusammenhang als Content (Inhalt) bezeichnet. Wikipedia Wie denken wir? Content Management System Tageszeitungen führten in den 80er Jahren Redaktionssysteme ein. Diese Systeme wurden in den Online-Redaktionen um weitere Funktionen erweitert. Heute werden Redaktionssysteme /Content Management Systeme in zahlreichen Unternehmen eingesetzt für das Erstellen von Content für: Kataloge CD-ROM / DVD Bedienungsanleitungen Websites Preislisten Intranet Technische Dokumentation Medienneutrale Datenhaltung für Export in beliebigen Formaten 12

13 Wie denken wir? Content Management Systeme Verteilung von Open Source CMS Systemen in Deutschland (Quelle: 1. Wordpress Websites 2. Joomla! Websites 3. Drupal Websites 4. TYPO Websites 5. Frontpage Websites Stand 10/2016 Wie denken wir? Websiteentwicklung ohne CMS Statische Websites 13

14 Wie denken wir? Websiteentwicklung ohne CMS Statische Websites Inhalt und Gestaltung werden gemeinsam programmiert. Ergebnis wird hochgeladen Nachteile Ohne Programmierkenntnisse kann die Website nicht gepflegt werden. Umfangreiche Websites mit vielen Einzelseiten und Sprachen können nur mit erheblichem Aufwand gepflegt werden. Hohe Fehleranfälligkeit i.d.r. dauert es lange bis Änderungen online sind Wie denken wir? Content Management System CMS Gestaltung + Navigation + Inhalt 14

15 Wie denken wir? Content Management System Gestaltung, Inhalt und Navigation werden getrennt erstellt. Nur die Gestaltung wird von der Agentur erstellt. Alle Inhalte wie Texte und Grafiken können ohne Programmierkenntnisse z.b. von Redakteuren oder Marketingabteilung editiert werden. Navigation wird ebenfalls ohne Programmierkenntnisse bearbeitet. Wie denken wir? Content Management System - Vorteile Dezentrale Pflege Redakteure benötigen keine Programmierkenntnisse Individuell konfigurierbare Rechte für Redakteure Einhaltung der Design-Vorgaben Automatische Navigations-Generierung Speicherung der Inhalte in einer Datenbank => Mehrfachnutzung Regelmäßige Updates (z.b. Sicherheitspatches oder Anpassung an neue Browser) Content just in time Quelle: 15

16 Wie denken wir? Enterprise Web Content Management System (EWCMS) Open Source GPL (GNU Public License) TYPO3 darf kommerziell genutzt werden Man darf das System verändern, muss aber ursprüngliche Copyrighthinweise bewahren Eigenentwicklungen dürfen in Rechnung gestellt werden Wie denken wir? TYPO3 darf prinzipiell für alle Arten von Websites verwendet werden Allerdings wünscht sich Kasper Skårhøj, dass es nicht für Pornografische Websites Antireligiöse Websites Websites mit menschrechtsverletzenden Inhalt 16

17 Wie denken wir? "Denn so sehr hat Gott die Welt geliebt, dass er seinen eingeborenen Sohn gab, damit alle, die an ihn glauben, nicht verloren gehen, sondern das ewige Leben haben." Johannes 3,16 joh316 war mal das Standardpasswort für das Installtool von TYPO3 Kasper Skårhøj (* 1975 in Dänemark) Erfinder und ehemaliger Chefentwickler Wie denken wir? 1997 Kaspar Skårhøj beginnt mit der Entwicklung von TYPO erste Beta Version 2002 Die Version 3.0 wird veröffentlicht 2002 Version 3.5 mit Extension Manager 2003 Version 3.6 mit Digital Asset Management und Templa Voilà 2005 Version 3.8 Unterstützung von Mehrsprachigkeit 2006 Version 4.0, Runderneuerung des Backend, besser Usability 2011 Version 4.5, Performanceoptimierung, HTML5 Unterstützung, 2012 Version 6.0, Optimierung des Codes und des Backends, FAL 2014 Version 6.2 LTS 2014 Version 7.0, Code-Cleanup, Redesign des Backends 2016 Version 7.6 LTS, responsive Backend, Bildercropping 2016 Version 8 in Entwicklung 17

18 Wie denken wir? Und was ist mit der Version 5? Wie denken wir? TYPO3 Flow TYPO3 Flow (ursprünglich FLOW3) ist ein in PHP geschriebenes freies Applikation-Framework, dessen erste finale Version am 20. Oktober 2011 erschien. Es wurde zwar in erster Linie als Grundlage für das Content-Management-System TYPO3 Neos entwickelt, lässt sich aber auch unabhängig davon einsetzen. Es eignet sich generell für die Entwicklung von Software in PHP mit einem mittleren oder hohen Umfang Quelle: Wikipedia 18

19 Wie denken wir? - in Zahlen Downloads Websites mit TYPO registrierte Entwickler Extensions registrierte Agenturen 51 Sprachen Quelle typo3.org Wie denken wir? 19

20 Wie denken wir? Verein: 2004 gegründet, Sitz in der Schweiz Fördert die Weiterentwicklung von TYPO3 Organisiert die TYPO3 Veranstaltungen T3BOARD, TYPO3 Conference, T3DD Wird durch Spenden und Mitgliedschaften finanziert Man kann Mitglied werden durch Zahlung eines einmaligen Betrages und einer jährlichen Mitgliedsgebühr Ist für die TYPO3-Zertifizierungsprüfung verantwortlich Wie denken wir? -Content Management System Trennung von Inhalt (Content), Navigation und Layout Layout wird von der Agentur initial angelegt Inhalte wie Texte und Grafiken werden ohne Programmierkenntnisse erstellt Content und Navigation werden in der Datenbank gespeichert Layout, Inhalt und Navigation wird durch TYPO3 (Typoscript) zusammengefügt 20

21 Wie denken wir? - einfach im Einsatz Inhalte (Content) werden ausschließlich über Webbrowser bearbeitet Der Redakteur kann die Website von jedem PC mit Webzugang editieren Redakteure, Administratoren und Entwickler können parallel an der Website arbeiten Die Entwicklung kann ebenfalls direkt im Backend erfolgen Arbeiten mehrere Entwickler parallel an komplexen Website, sind externe Tools und Versionsverwaltung (Git) empfehlenswert Wie denken wir? - viele Funktionen Offene Architektur / nahezu beliebig erweiterbar Mehrere Websites / Domains Asset Management -FAL (File Abstraction Layer)-Modul Mehrsprachigkeit Workflow Management (Workspaces) Integrierte Bildbearbeitung (ImageMagick) Individuell konfigurierbares Rechtekonzept 21

22 Wie denken wir? - einfache Erweiterbarkeit Zahlreiche (>6.000) Extensions, z.b. Newsverwaltung FAQ Modul Userverwaltung (Registrierung, Login) Glossar Modul Shop Modul Bewerber Management Newsletteranmeldung und Versand Einbindung von Twitter, RSS Feeds etc. Wie denken wir? - individuell erweiterbar Einfache Entwicklung von kundenspezifischen Erweiterungen Anpassung und Erweiterung bestehender Extensions Programmierung von Schnittstellen zur Anbindung an Datenbanken, CRM, ERP, SAP etc. Schnittstellen zu Social Media (Facebook, Twitter etc) Als Framework einsetzbar 22

23 Wie denken wir? - offen für moderne Technologien Responsive Design Einbindung von JavaScript-Bibliotheken (z.b. jquery) für die DOM Manipulation z.b. für Animationen, Filterfunktionen Mit AJAX (Asynchronous JavaScript and XML) können HTTP-Anfragen durchgeführt werden, während eine HTML-Seite angezeigt wird. Damit kann die Seite verändert werden, ohne sie komplett neu zu laden. (z.b. Suggestfunktion) Wie denken wir? - Optimierung Viele Standardfunktionen zur Suchmaschinenoptimierung (SEO) Valider Quellcode Sprechende URL s Metadaten Google Sitemap Canonical Tag 23

24 Wie denken wir? - kostengünstig Keine Lizenzkosten Keine laufenden Kosten Zahlreiche kostenfreie Erweiterungen Quelle: Wie denken wir? Backend Modulleiste Navigationsleiste Detailansicht Frontend 24

25 1. Die Pagemachine AG 2. Inhalt der Vorlesung 3. Einführung 4. Tools & Links 5. Bekannte Websites mit TYPO3 Tools & Links Links (Linksammlung mit über Links)

26 1. Die Pagemachine AG 2. Inhalt der Vorlesung 3. Einführung 4. Tools & Links 5. Bekannte Websites mit TYPO3 Tools & Links Etwa 50% aller Dax-500-Unternehmen setzen derzeit ein TYPO3 CMS ein. 26

27 Wie arbeiten wir? TYPO3 Beispielwebsites SIXT Autovermietung Wie arbeiten wir? TYPO3 Beispielwebsites SIXT Autovermietung 27

28 Wie arbeiten wir? TYPO3 Beispielwebsites SIXT Autovermietung Wie arbeiten wir? TYPO3 Beispielwebsites SIXT Autovermietung 28

29 Wie arbeiten wir? TYPO3 Beispielwebsites SIXT Autovermietung Wie arbeiten wir? TYPO3 Beispielseiten Weitere Beispiele Viele weitere Beispiele finden Sie z.b. auf: 29

30 1. Die Pagemachine AG 2. Inhalt der Vorlesung 3. Einführung 4. Tools & Links 5. Bekannte Websites mit TYPO3 Wie denken wir? Nächste Vorlesung Themen Installation die wichtigsten Verzeichnisse und Dateien das Install Tool 30

31 Vielen Dank für Ihre Aufmerksamkeit Diese Präsentation können Sie ab morgen unter: /fh-frankfurt herunterladen. 31