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

Transkript

1 Websiteentwicklung auf Basis vontypo3 Unterlagen zur Vorlesung WS 14/15 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 Online Solutions made in Frankfurt Konzeption und Umsetzung von webbasierten Lösungen 14 Mitarbeiter in den Bereichen: Beratung, Konzeption, Gestaltung, Programmierung (PHP, MySQL), TYPO3 Extensionprogrammierung, Onlinemarketing 2

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

4 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? 4

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

6 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 Oracle Virtual Box WAMP-Installer (nur TYPO3 Version 4.7.7) Wie arbeiten wir? Inhalt der Vorlesung Entwicklung der Designvorlage (HTML /CSS) Entwicklung des Templates HTML Grundlagen CSS Grundlagen Bildformate 6

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

8 Wie arbeiten wir? Inhalt der Vorlesung Suchmaschinenoptimierung / Kennzahlen Wie arbeiten wir? Inhalt der Vorlesung Literatur Certified TYPO3 Integrator. Vorbereitung auf die Prüfung der TYPO3 Association von Patrick Lobacher (2. Auflage TYPO3 v. 4.5) 8

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

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

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

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

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

14 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: 14

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

16 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 das Standardpasswort für das Installtool von TYPO3 Kasper Skårhøj (* 1975 in Dänemark) Erfinder und ehemaliger Chefentwickler Wie denken wir? - Historie 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 Version

17 Wie denken wir? Und was ist mit der Version 5? Wie denken wir? - in Zahlen Downloads Websites mit TYPO registrierte Entwickler Extensions registrierte Agenturen 51 Sprachen 17

18 Wie denken wir? 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 18

19 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 Wie denken wir? - einfach im Einsatz Installation auf einem Webserver TYPO3 besteht nur aus PHP Files und einer Datenbank. Es gibt diverse Installer z.b. für Windows oder Mac unter Ist eine LAMP-Umgebung vorhanden, können hier ebenfalls Packages heruntergeladen werden 19

20 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 (DAM-Modul) Mehrsprachigkeit Workflow Management (Workspaces) Integrierte Bildbearbeitung (ImageMagick) Individuell konfigurierbares Rechtekonzept 20

21 Wie denken wir? - einfache Erweiterbarkeit Zahlreiche Standarderweiterungen, 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 Kickstarter für die Entwicklung von eigenen Extensions Anpassung und Erweiterung bestehender Extensions Programmierung von Schnittstellen zur Anbindung an Datenbanken, CRM, ERP, SAP etc. Schnittstellen zu Social Media (Facebook, Twitter etc) 21

22 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 erä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 22

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

24 1. Die PAGEmachine AG 2. Inhalt der Vorlesung 3. Einführung 4. Tools & Links 5. Bekannte Websites mit TYPO3 Wie arbeiten wir? Tools & Links Tools (eine Auswahl) FTP FileZilla ( Webentwicklung Eclipse ( IETester ( Für Tests in allen Versionen des Intern Explorers (speziell IE6) Firefox Ad-ons Firebug zur technischen Analyse (z.b. HTML, CSS, Ladezeiten, Cookies, etc) SEOmoz für die Suchmaschinenanalyse Open Office ( für die TYPO3 Dokumentation Bildbearbeitung GIMP ( WinHTTrack ( zum Download kompletter Websites 24

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

26 Wie arbeiten wir? TYPO3 Beispielwebsites SIXT Autovermietung Wie arbeiten wir? TYPO3 Beispielwebsites SIXT Autovermietung 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 Beispielseiten Weitere Beispiele Viele weitere Beispiele finden Sie z.b. auf: 28

29 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 Voraussetzungen für Installation die wichtigsten Verzeichnisse und Dateien das Install Tool Quelle: 29

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