1

Websiteentwicklung auf Basis vonTYPO3

Unterlagen zur VorlesungWS 19/20

1. Pagemachine

2. Inhalt der Vorlesung

3. Einführung CMS und TYPO3

4. Links

5. Bekannte Websites mit TYPO3

1

2

2

www.Pagemachine.de

Pagemachine

Miklos Weiszhaupt

Dipl.-Ing. Nachrichtentechnik, TU Darmstadt

Mitgründer der Pagemachine in 2001

Seit 2004 Realisierung von Webprojekten auf Basis von TYPO3

www.Pagemachine.de

Pagemachine

Full Service Digitalagentur

Konzeption und Umsetzung von webbasierten Lösungen

18 Mitarbeiter in den Bereichen:

Beratung, Konzeption, Gestaltung,

Programmierung,TYPO3, Extensions

Onlinemarketing

3

4

3

www.Pagemachine.de

Pagemachine

TYPO3 Community

Codesprints

Marketingsprints

Designsprints

Education Committee Sprint

Core Entwickler

www.Pagemachine.de

Pagemachine

F & E Projekt gemeinsam mit Frankfurt UAS

Ist eine Sammlung von Kommunikationsprotokollen für

Anwendungen wie Videokonferenz, Dateitransfer bzw.

Datenübertragung, Chat und Desktopsharing.

Entwicklung von speziellen Protokollen und Algorithmen

Prototypische Umsetzung von Anwendungen

5

6

4

www.Pagemachine.de

Pagemachine

www.Pagemachine.de

Die Pagemachine AG

Praktikum und Bachelor-Thesis bei uns

TYPO3

WebRTC

Technologien und Methoden, z.B.:

HTML, CSS

Bootstrap, Less/Sass

TypoScript

JavaScript – Vue.js, JsSIP

PHP

MySQL, MongoDB

Deployment (z.B. Docker, Shippable), Versionsverwaltung (Bitbucket)

Agile Methoden, Scrum, Kanban

7

8

5

1. Die Pagemachine AG

2. Inhalt der Vorlesung

3. Einführung CMS und TYPO3

4. Links

5. Bekannte Websites mit TYPO3

www.Pagemachine.de

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?

9

10

6

www.Pagemachine.de

www.Pagemachine.de

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

11

12

7

www.Pagemachine.de

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

www.Pagemachine.de

Wie arbeiten wir?Inhalt der Vorlesung

Entwicklung der Designvorlage (HTML /CSS)

Entwicklung des Templates

HTML Grundlagen

CSS Grundlagen

Bildformate

13

14

8

www.Pagemachine.de

Wie arbeiten wir?Inhalt der Vorlesung

TypoScript

eigene Konfigurationssprache

Einführung in die Syntax

TypoScript Entwicklung

www.Pagemachine.de

Wie arbeiten wir?Inhalt der Vorlesung

Auswahl, Installation und Konfiguration der

erforderlichen Extensions

Newsmodul

Suche

…

15

16

9

www.Pagemachine.de

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?

www.Pagemachine.de

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.

17

18

10

www.Pagemachine.de

Wie arbeiten wir?Inhalt der Vorlesung

www.Pagemachine.de

Wie arbeiten wir?Inhalt der Vorlesung

Klausur

Multiple Choice

Themengebiete

allgemeine Fragen zu TYPO3

Fragen zu HTML / CSS

Fragen zu TypoScript

Fragen zu den Themen „SEO“, „Usability“

Präsentationen zur Vorlesung ausreichend.

19

20

11

1. Die Pagemachine AG

2. Inhalt der Vorlesung

3. Einführung CMS und TYPO3

4. Links

5. Bekannte Websites mit TYPO3

www.Pagemachine.de

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

CMS und TYPO3

21

22

12

www.Pagemachine.de

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

Bedienungsanleitungen

Preislisten

Technische Dokumentation

Medienneutrale Datenhaltung für Export in beliebigen Formaten

CMS und TYPO3

CD-ROM / DVD

Websites

Intranet

Apps

www.Pagemachine.de

Wie denken wir?

Web Content Management System

Bei den WCMS-Systemen handelt es sich um Systeme für die Erstellung und

Verwaltung des Contents für das Internet, für Intranets und Extranets, die die

Interaktion und Kommunikation zwischen Benutzer und Website

unterstützen.

CMS und TYPO3

23

24

13

www.Pagemachine.de

Wie denken wir?

Content Management Systeme

Verteilung von Open Source CMS Systemen in Deutschland

(Quelle: www.cmscrawler.com)

1. Wordpress 5.222.844 Websites

2. Joomla! 590.694 Websites

3. Drupal 314.027 Websites

4. (Wix.com 300.446 Websites - kein Open Source)

5. TYPO3 188.143 Websites

Stand 10/2019

CMS und TYPO3

www.Pagemachine.de

Wie denken wir?

Websiteentwicklung ohne CMS

Statische Websites

CMS und TYPO3

25

26

http://www.cmscrawler.com/

14

www.Pagemachine.de

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

CMS und TYPO3

www.Pagemachine.de

Wie denken wir?

Content Management System

CMS und TYPO3

Navigation

Gestaltung

Inhalt

+

+

CMS

27

28

15

www.Pagemachine.de

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.

CMS und TYPO3

www.Pagemachine.de

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 Generierung der Navigation

Speicherung der Inhalte in einer Datenbank => Mehrfachnutzung

Regelmäßige Updates (z.B. Sicherheitspatches oder Anpassung an

neue Browser)

Content just in time

Quelle: www.typo3.com

CMS und TYPO3

29

30

16

www.Pagemachine.de

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

CMS und TYPO3

www.Pagemachine.de

Wie denken wir?

GNU-Projekt

Das GNU-Projekt wurde von Richard Stallman mit dem Ziel gegründet, ein

offenes, unixähnliches Betriebssystem zu schaffen, das sicherstellt, dass die

Endbenutzer die Freiheiten haben, es verwenden, untersuchen, verbreiten

(kopieren) und ändern zu dürfen. Software, deren Lizenz diese Freiheiten

garantiert, wird Freie Software (Free Software) genannt, GNU ist in diesem Sinne

frei.

Da es in der Zeit am MIT üblich war, für Programme, die anderen Programmen

ähneln, rekursive Akronyme zu nutzen, wählte Stallman den Namen GNU für

„GNU’s not Unix“.

Bekanntheit erlangte das Projekt vor allem auch durch die von ihm eingeführte

GNU General Public License (GPL)

Quelle: www.typo3.com

CMS und TYPO3

31

32

17

www.Pagemachine.de

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

Kasper Skårhøj (* 1975 in Dänemark) Erfinder und

ehemaliger Chefentwickler

CMS und TYPO3

www.Pagemachine.de

Wie denken wir?

1997 – Kaspar Skårhøj beginnt mit der Entwicklung von TYPO3

2000 – erste Beta Version

2002 – Die Version 3.0 wird veröffentlicht

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

2017 – Version 8.7 LTS, unterstützt PHP7, Formularframework, CK Editor

2018 – Version 9.5 LTS

2019 – Start Version 10

CMS und TYPO3

33

34

18

www.Pagemachine.de

Wie denken wir?

Und was ist mit der Version 5?

CMS und TYPO3

www.Pagemachine.de

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

CMS und TYPO3

35

36

19

www.Pagemachine.de

Wie denken wir?

- in Zahlen

9.400.000+ Downloads

500.000+ Websites mit TYPO3

79.000+ registrierte Entwickler

1.800+ Extensions

1647+ registrierte Agenturen

51 Sprachen

Quelle typo3.org (2017)

CMS und TYPO3

www.Pagemachine.de

Wie denken wir?CMS und TYPO3

37

38

20

www.Pagemachine.de

Wie denken wir?

typo3.org

Zentrale Anlaufstelle zu allen Themen rund um TYPO3

Allgemeine Infos

Download der aktuellen Versionen

Dokumentation

Community

Termine und Veranstaltungen

Extension Repository

CMS und TYPO3

www.Pagemachine.de

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 - CertiFUNcation

http://association.typo3.org

CMS und TYPO3

39

40

http://association.typo3.org/

21

www.Pagemachine.de

Wie denken wir?

TYPO3 GmbH

Gegründet in 2016 von der TYPO3 Association, Sitz in Düsseldorf

Ca. 10 Mitarbeiter, Geschäftsführer Mathias Schreiber

Ist kommerzieller Arm von TYPO3

Marketing

Support für Agenturen

Organisiert Code Sprints

Bietet erweiterten Long Term Support für einzelne TYPO3 Versionen

Bietet Service Level Agreements

www.typo3.com

CMS und TYPO3

www.Pagemachine.de

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

CMS und TYPO3

41

42

http://www.typo3.com/

22

www.Pagemachine.de

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

CMS und TYPO3

www.Pagemachine.de

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

CMS und TYPO3

43

44

23

www.Pagemachine.de

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.

…

CMS und TYPO3

www.Pagemachine.de

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

CMS und TYPO3

45

46

24

www.Pagemachine.de

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)

CMS und TYPO3

www.Pagemachine.de

Wie denken wir?

- Optimierung

Viele Standardfunktionen zur Suchmaschinenoptimierung (SEO)

Valider Quellcode

Sprechende URL‘s

Metadaten (z.B. Title, Description)

Google Sitemap

Canonical Tag

CMS und TYPO3

47

48

25

www.Pagemachine.de

Wie denken wir?

- kostengünstig

Keine Lizenzkosten

Keine laufenden Kosten

Zahlreiche kostenfreie Erweiterungen

CMS und TYPO3

Quelle: www.typo3.com

www.Pagemachine.de

Wie denken wir?CMS und TYPO3

Backend

Navigationsleiste DetailansichtModulleiste

Frontend

49

50

26

1. Die Pagemachine AG

2. Inhalt der Vorlesung

3. Einführung CMS und TYPO3

4. Links

5. Bekannte Websites mit TYPO3

www.Pagemachine.de

Tools & Links

Links

www.typo3.org

http://association.typo3.org, http://bugs.typo3.org

http://www.typo3.net/forum/

http://www.typo3forum.net/

http://www.typo3-snippets.de/

http://typo3blogger.de/linkliste/ (Linksammlung mit über 2.000 Links)

http://www.w3.org/

http://validator.w3.org/

51

52

http://www.typo3.org/http://association.typo3.org/http://bugs.typo3.org/http://www.typo3.net/forum/http://www.typo3forum.net/http://www.typo3-snippets.de/http://typo3blogger.de/linkliste/http://www.w3.org/http://validator.w3.org/

27

1. Die Pagemachine AG

2. Inhalt der Vorlesung

3. Einführung CMS und TYPO3

4. Links

5. Bekannte Websites mit TYPO3

www.Pagemachine.de

Tools & Links

Etwa 50% aller Dax-500-Unternehmen setzen

derzeit ein TYPO3 CMS ein.

53

54

28

www.Pagemachine.de

Tools & Links

Sehr verbreitet an Hochschulen

Eigenes TYPO3 Association Academic Committee

www.Pagemachine.de

Wie arbeiten wir?TYPO3 Beispielwebsites

55

56

29

www.Pagemachine.de

Wie arbeiten wir?TYPO3 Beispielwebsites

www.Pagemachine.de

Wie arbeiten wir?TYPO3 Beispielwebsites

57

58

30

www.Pagemachine.de

Wie arbeiten wir?TYPO3 Beispielwebsites

www.Pagemachine.de

Wie arbeiten wir?TYPO3 Beispielwebsites

59

60

31

www.Pagemachine.de

Wie arbeiten wir?TYPO3 Beispielwebsites

SIXT Autovermietung

www.Pagemachine.de

Wie arbeiten wir?TYPO3 Beispielwebsites

61

62

32

www.Pagemachine.de

Wie arbeiten wir?TYPO3 Beispielseiten

Weitere Beispiele

Viele weitere Beispiele finden Sie z.B. auf:

http://www.typo3-websites.eu

1. Die Pagemachine AG

2. Inhalt der Vorlesung

3. Einführung CMS und TYPO3

4. Links

5. Bekannte Websites mit TYPO3

63

64

http://www.typo3-websites.eu/

33

www.Pagemachine.de

Wie denken wir?

Nächste Vorlesung

24.10.2019

Themen

TYPO3 Installation und Administration

CMS und TYPO3

www.Pagemachine.de

Vielen Dank

für Ihre Aufmerksamkeit

Diese Präsentation können Sie ab morgen unter:

www.Pagemachine.de/fh-frankfurt

herunterladen.

65

66

http://www.pagemachine.de/fh-frankfurt