TYPO3 Neos - Next Generation CMS - Webkongress Erlangen 2014

TYPO3 Neos - Next Generation CMS 
LOBACHER. 
Patrick Lobacher  
Management | Consulting | Training 
20.03.2014

http://www.typovision.de/index.php
(c) 2014 - Patrick Lobacher | TYPO3 Neos - Next Generation CMS | Webkongress Erlangen | 20.03.2014 | www.lobacher.de
TYPO3 Neos - Next Generation CMS
LOBACHER.
2
Über den Referenten
Veröffentlichungen:
Patrick Lobacher 
Management // Consulting // Training
• 43 Jahre, glücklich verheiratet,
wohnhaft in München
• Selbständig im Bereich
Webentwicklung seit 1994
• Autor von 10 Fachbüchern und > 50
Fachartikeln zum Thema TYPO3 und
Webentwicklung
• Speaker, Trainer, Nerd
2010-2014
1996-2008
2008-2010
2014-…
?????

LOBACHER.
3
Was ist
TYPO3 Neos?

LOBACHER.
4
TYPO3 Neos - the next generation CMS
Neos (griechisch νέος) heißt übersetzt schlicht “neu”

LOBACHER.
5
Neos Website http://neos.typo3.org

LOBACHER.
6
Neos Oberﬂäche

LOBACHER.
7
http://neos.typo3.org/download/marketing-material.html

LOBACHER.
8
http://neos.typo3.org/download/marketing-material.html

LOBACHER.
9
Die Geschichte von TYPO3 Neos beginnt bei TYPO3 CMS
!
• TYPO3 CMS ist ein „Enterprise Open Source  
Content Management Framework“
• TYPO3 CMS existiert seit 1998 / Erfunden vom Dänen Kaspar Skårhøj
• ca. 500.000 Installationen weltweit / > 5 Mio Downloads
• Einsatz in DE z.B. bei > 50% aller DAX 500 Unternehmen, > 50% aller
Bundesliga-Vereinen, Discounter, Autovermieter, Öffentliche Träger
• > 6.000 Extensions
• > 150.000 Entwickler weltweit
• > 2000 Agenturen weltweit
• Finanziert und unterstützt von der TYPO3 Association
Geschichte von TYPO3 Neos beginnt bei TYPO3 CMS

LOBACHER.
10
Die Geschichte von TYPO3 Neos: TYPO3 Phoenix
!
• Auf den ersten T3DD (TYPO3 Developer Days) im Jahr 2006 wurde der
Entschluss gefasst, TYPO3 von Grund auf neu zu schreiben
• Codename: TYPO3 Phoenix (bzw. TYPO3 5.0)
• Einige benötigte/gewünschten Features gab es damals in PHP noch nicht
und mussten komplett neu implementiert werden: Content Repository,
Aspect Oriented Programming, DDD, Dependency Injection, ...
• Mit dem „Berlin Manifesto“ wurde 2008 der Rahmen und die Abgrenzung
zum TYPO3 CMS festgelegt 
http://typo3.org/roadmap/berlin-manifesto/ 
(Das Manifest ist mittlerweile in Teilen nicht mehr gültig) 
Geschichte von TYPO3 Neos: TYPO3 Phoenix

LOBACHER.
11
Die Geschichte von TYPO3 Neos: TYPO3 Flow und Neos
• Viele Grundfunktionen eines CMS sind nicht CMS-speziﬁsch (Session-
Handling, Datenbank-Handling, Templating, ...) => daher Trennung dieser
Funktionalitäten in ein eigenes Framework
• Durch die Einführung von Extbase im Jahr 2009 wurde es möglich, bereits
in TYPO3 CMS Extensions zu schreiben, die in TYPO3 Flow mit geringen
Änderungen lauffähig sind (sofern sie keine Internas verwenden)
• Am 20. Oktober 2011 wurde das Application Framework TYPO3 Flow
(ehemals FLOW3) als Final veröffentlicht (Aktuell 2.1.1)
• TYPO3 Neos ist eine Applikation die auf TYPO3 Flow basiert
• Erste ﬁnale Version 1.0.0 am 10.12.2013
• (Patchlevel: 1.0.2 am 3.3.2013) 
Geschichte von TYPO3 Neos: TYPO3 Flow und Ne0s

LOBACHER.
12
Die TYPO3 Welt - seit Oktober 2012 
• Dachmarke TYPO3 
• TYPO3 CMS 
(hat kein eigenes Logos)
• TYPO3 Flow
• TYPO3 Neos
 
Geschichte von TYPO3 Neos: Die TYPO3 Welt

LOBACHER.
13
TYPO3 Neos: Positionierung 
• Es gibt ab Dezember 2013 zwei unabhängige CMS aus dem Hause
TYPO3:
• TYPO3 CMS 6.x (4.7, 6.0, 6.1, 6.2 LTS Beta)
• TYPO3 Neos 1.0
• Technologisch haben beide NICHTS miteinander zu tun
• Es gibt KEINE Migrationsmöglichkeiten von einem der beiden Systeme
zum anderen
• TYPO3 Neos ist NICHT der Nachfolger von TYPO3 CMS,  
sondern ein eigenständiges CMS mit anderem Fokus
 
Geschichte von TYPO3 Neos: Die TYPO3 Welt

LOBACHER.
14
Features
von TYPO3 Neos

LOBACHER.
15
Features von TYPO3 Neos 
• Maximal erweiterbares Enterprise CMF - Content Management Framework
• Basis ist das stabile TYPO3 Flow Framework (Version 2.1.1)
• Einfacher und ﬂexibler Content Export/Import (bisher nur per
Kommandozeile)
• Multi-Domain Support
• Modernste Technologie und Paradigmen unter der Haube (DDD, AOP,
RequireJS, EmberJS, ...)
• Intuitives Benutzer-Interface
• Wireframe Mode - Content-Editing ohne Template
• Webbasiertes Package Management
Features von TYPO3 Neos

LOBACHER.
16
Features von TYPO3 Neos 
• In-place Content-Editing
• Eigene Content-Elemente (inkl. In-place Content-Editing) leicht
möglich
• Integration von TYPO3 Flow Applikationen als Plugins (Packages)
• TypoScript 2 / Eel / FlowQuery
• Workspaces (Nicht Multiuser-fähig bislang)
• Custom Single-Sign-On / Custom Authentiﬁcation per
Programmierung möglich
• TYPO3 Surf für das automatische Deployment  
(Integration mit CI Server wie Jenkins)

LOBACHER.
17
Bislang fehlende Features (evtl./sicher Version [1.1])
• Webbased Installer (Kommandozeile notwendig)
• [1.1] Mehrsprachigkeit (Backend & User Interface)
• [1.1] Benutzerrechte / Benutzergruppen / ACLs
• Öffentliche Extensions (es gibt noch kein Package Repository)
• [1.1] Gemeinsam genutzte Workspaces
• [1.1] Versionierung (UI-Interface)
• Non-Core-Features: News, Anbindung an 3rd-Party-Systeme,
Slider, SSL, Google Analytics Einbindung, ...
• [1.1] REST
• Logs (User, Admin, ...)

LOBACHER.
18
Bislang fehlende Features
!
• SEO-Features (Seiteneigenschaften: noindex, nofollow,
keywords, description, canonical, ...)
• Richtiges RWD-Interface (Interface funktioniert nur mit ca.
1000px und größer)
• RWD-Rendering von Bildern
• Digital Asset Management (es gibt einen MediaBrowser)
• Formular-Designer (man kann lediglich programmatisch
vorbereitete Formulare auswählen)
• [1.1] Content Synchronization and Syndication
• [1.1] Admin-Interface um beliebige Datensätze zu
bearbeiten

LOBACHER.
19
Aufbau der Neos
Oberﬂäche

LOBACHER.
Aufbau der Admin-Oberﬂäche
20
Features von TYPO3 Neos - Screenshots
Funktionen-Menü
Page-Browser 
(Seitenbaum) 
User-Administration 
Logout und Settings
Publish 
Publizieren, bei  
Klick auf Pfeil  
Möglichkeit zu 
„Auto-Publish“
Inspector 
Content-bezogene 
Eigenschaften, z.B.
Seiten-
eigenschaften, o.ä.
Preview-Mode 
Anzeige, wie die  
Seite live
aussehen würde
Preview-Zentrale 
z.B. Anzeige ohne
Design
Struktur- 
Ansicht 
Apply

LOBACHER.
21
Inspector
Selektiertes Element 
z.B. Headline, Content-Collection, Page, ...
Properties 
Kontextsentisive 
Eigenschaften, z.B.  
Seiten-
eigenschaften, o.ä.

LOBACHER.
22
Funktionen-Menü
Content 
Hier können die verschiedenen Sites umgeschaltet
werden 
 
Workspaces 
Verwaltung der Workspaces 
Medien-Browser 
Verwaltung der Medien 
 
User Management 
User-Verwaltung 
 
Package Management 
Package Verwaltung 
 
Sites Management 
Verwaltung der Websites

LOBACHER.
23
Workspaces Verwaltung Publish 
Publizieren 
Discard 
Verwerfen 
Auswahl
einzelner
Änderungen 
Angabe
zum  
Node-Typ 
Typ der 
Änderung 
Workspaces Verwaltung

LOBACHER.
24
Workspaces Verwaltung
Seiten, die
Änderungen
enthalten 
werden im 
Seitenbaum 
orange 
markiert

LOBACHER.
25
Package-Verwaltung
Delete 
Deactivate 
& Activate 
Freeze 
& Unfreeze 
Auswählen 
Aktionen
auf der
Auswahl

LOBACHER.
26
Site-Verwaltung Übersicht
Delete 
Deactivate 
& Activate 
Edit 
Neue Seite anlegen 
Status der Site

LOBACHER.
27
Raw Content Mode - Anzeige der Elemente ohne Design

LOBACHER.
28
Preview Zentrale - Anzeige-Alternativen

LOBACHER.
29
Seitenbaum
Doppelklicken um den
Seitentitel zu editieren 
Filtern des Seitenbaums nach
Typ (Seite, Shortcut, ...) 
Drag&Drop um Seite  
zu verschieben 
Klick auf Seitentitel um
Seite in der Preview
rechts zu sehen 
Refresh 
Löschen der  
ausgewählten Seite 
Einfügen (innerhalb) 
Ausschneiden 
Seitentitel editieren
Seite unsichtbar/sichtbar
Seite kopieren
Suche im Seitenbaum
Klick auf das Plus- 
Symbol legt  
neue Seite an 
Neue Seite anlegen

LOBACHER.
30
Strukturbaum
Im Strukturbaum werden alle
Elemente (sichtbare und
unsichtbare) der aktuellen Seite
hierarchisch aufgelistet
!
Auch hier hat man die selben
Icons für Funktionen wie „Neu“,
„Ausblenden“, „Kopieren“, ...
zur Verfügung
!
Klick auf die Überschrift öffnet
rechts die Eigenschaften im
Inspector und platziert den
InPlace-Editor an der
entsprechenden Stelle

LOBACHER.
31
Content-Funktionen Neues Content-Element
nach dem
ausgewählten anlegen 
Content-Element
kopieren 
Content-Element
ausschneiden 
Content-Element
löschen 
Content-Element
ausblenden 
Content-Element
ausschneiden 
Sobald man auf
„Kopieren“ oder
„Ausschneiden“ klickt,
erscheint „Einfügen“

LOBACHER.
32
Content-Funktionen
Absatzformate 
Tabelle 
einfügen
Formatfrei 
einfügen
Formatierung entfernen 
Link
einfügen

LOBACHER.
33
Content Element einfügen

LOBACHER.
34
Mehrspaltige Content Elemente

LOBACHER.
35
Formulare auswählen

LOBACHER.
36
Media Browser
Tagging
Upload Ansichten
Zum Taggen wird die
Datei per Drag&Drop
auf das Tag
„gezogen“

LOBACHER.
37
Media Browser
Meta-
Daten
Aktionen

LOBACHER.
38
Image Handling
UploadMedia-
Browser
Crop

LOBACHER.
39
Cropping (unobstrusive)

LOBACHER.
40
Systemvoraussetzungen
von TYPO3 Neos

LOBACHER.
41
Systemvoraussetzungen von TYPO3 Neos
!
• Wichtig ist auch, dass das PHP auf der Kommandozeile ebenfalls mindestens
Version 5.3.7 ist (und über die angegebenen php.ini Einstellungen verfügt) - dies
kann mit dem folgenden Befehl überprüft werden 
 
php --version 
• MySQL 5.1.50 - 5.x.x (zum Beispiel - grundsätzlich kann jede zum Doctrine DBAL
kompatible Datenbank verwendet werden) 
• Zugang zur Konsole (root User!), wenn die Zugangsrechte vom Hoster nicht
entsprechend gesetzt worden sind. Bei den meisten Hostern ist dies aber der Fall -
dann reicht ein normaler User.
Systemvoraussetzungen von TYPO3 Neos

LOBACHER.
42
Installation von TYPO3 Neos
1. Laden von TYPO3 Neos via Composer:  
composer create-project --no-dev typo3/neos-base-distribution
TYPO3-Neos-1.0 
2. oder manuell via Archiv (zip, tar.gz, tar.bz2) 
http://sourceforge.net/projects/typo3flow/files/TYPO3%20Neos/
1.0.2/ 
3. oder über GIT-Snapshot 
git clone git://git.typo3.org/Neos/Distributions/Base.git
TYPO3-Neos 
4.oder per Launchr 
https://launchr.com/typo3-neos 
Installation von TYPO3 Neos - Composer

LOBACHER.
43
Die Architektur
von TYPO3 Neos

LOBACHER.
44
Die Architektur von TYPO3 Neos - Backend
!
 
Die Architektur von TYPO3 Neos - Backend
Fluid 
Modern Templating Engine 
TYPO3CR 
Content Repository (JCR / Sling) 
 
TypoScript 
TypoScript 2.0 - next Generation 
Forms 
Form API & Form Builder 
 
Expose 
Extensible admin interface 
 
Eel 
Embedded Expression Language 
FlowQuery

LOBACHER.
45
Die Architektur von TYPO3 Neos - Frontend
!
 
Die Architektur von TYPO3 Neos - Frontend
EmberJS 
JavaScript Web Application
Framework 
Create.js 
Web Editing Interface 
 
Aloha / Hallo 
HTML5 WYSIWYG Editor 
VIE = viejs.org 
Semantic Interaction Framework 
 
RequireJS 
JavaScript ﬁle and module loader

LOBACHER.
46
TYPO3 Flow - Basis Design
!
• OOP - Object-Oriented Programming
• TDD - Test Driven Development
• DDD - Domain Driven Design (Eric Evans)
• MVC - Model, View, Controller
• AOP - Aspect Oriented Programming (Separation of
Concerns, Cross cutting concerns)
• DI - Dependency Injection
• ORM - Object Relational Mapping (basierend auf Doctrine
2, eigenes ORM möglich)
TYPO3 Flow - Basis Design
Achtung: 
Buzzword-
Bingo :-)

LOBACHER.
47
Internas von
TYPO3 Neos

LOBACHER.
48
Node Structure
!
• TYPO3CR Node
• Node Name 
(dient der Identiﬁkation)
• Node Type 
(z.B. Document, Folder, AbstractNode, Content,  
ContentCollection...)
• Properties 
(Abhängig vom NodeType) 
• Einfach erweiterbar und leicht 
konﬁgurierbar
Page
Content Section
Content Element
Site root
TYPO3 Neos Internas: Node Structure
Domain Model

LOBACHER.
49
Node Type
!
• Jede TYPO3CR Node hat einen sogenannten 
Node Type
• Node Types können in jedem Package
deﬁniert werden, indem Sie in der Datei
Configuration/NodeTypes.yaml
deklariert werden.
• Jeder Node Type kann einen oder mehrere
Eltern Typen haben. Wenn diese speziﬁziert
sind, werden alle Eigenschaften und
Settings der Eltern Types vererbt
 
TYPO3 Neos Internas: Node Type
http://docs.typo3.org/neos/TYPO3NeosDocumentation/IntegratorGuide/ContentStructure.html#nodes-inside-the-typo3-content-repository

LOBACHER.
50
Node Zugriff
!
• Der Zugriff auf Nodes erfolgt durch „NodePaths“
• Jede Seite ist ein Node, jedes Element auf einer Seite ebenfalls
TYPO3 Neos Internas: Node Zugriff
/sites/typo3org/home/subpage/main/text1
content
section
pages
site root

LOBACHER.
51
TypoScript
!
• TypoScript ist eine hierarchische, objektorientierte und Prototypen-
basierte Verarbeitungssprache
• Wird von Neos verwendet, um den Content ﬂexibel zu rendern
• Objekte sind z.B. Array, Collection, Case, Menu, Page, Template, Plugin,
Value, ...
• Objekte haben Eigenschaften, die das Objekt „konﬁgurieren“
• TypoScript hat Zugriff auf den jeweiligen „Context“ (z.B. Seitenbaum im
Objekt „menu“ oder Seiteneigenschaften im Objekt „page“)
• Es gibt „Prozessoren“ die die Eigenschaftswerte verändern können
(ähnlich stdWrap-Funktionen in TYPO3 CMS)
!
TYPO3 Neos Internas: TypoScript

LOBACHER.
52
TypoScript: Fluid-Template
<!DOCTYPE html>
{namespace neos=TYPO3NeosViewHelpers}
{namespace ts=TYPO3TypoScriptViewHelpers}
<html>
<head>
<f:section name="stylesheets">

</f:section>
<f:section name="scripts">
<!-- put your scripts inclusions here, they will be included in your website by TypoScript -
>
</f:section>
</head>
<body>
<f:section name="body">
<nav class="menu">
{parts.menu -> f:format.raw()}
</nav>
<nav class="breadcrumb">
{parts.breadcrumb -> f:format.raw()}
</nav>
<div class="content">
{content.main -> f:format.raw()}
</div>
TYPO3 Neos Internas: TypoScript - Fluid Template

LOBACHER.
53
TypoScript: Beispiel - Teil 1
include: NodeTypes/Carousel.ts2
namespace: TypoScript=TYPO3.TypoScript
/**
* Root TypoScript template for the Neos website
*/
page = Page {
head {
stylesheets.site = TypoScript:Template {
templatePath = 'resource://TYPO3.NeosDemoTypo3Org/Private/Templates/Page/Default.html'
sectionName = 'stylesheets'
}
metadata = TypoScript:Template {
sectionName = 'metadata'
}
titleTag {
// Overwrite the title tags content with a collection to create a breadcrumb
content = TYPO3.TypoScript:Collection {
// Retrieve all parent document nodes excluding the homepage
collection = ${q(documentNode).add(q(documentNode).parents()).slice(0, -1).get()}
itemName = 'node'
iterationName = 'nodeIterator'
// Implode node titles with a dash
itemRenderer = ${q(node).property('title') + (nodeIterator.isLast ? '' : ' - ')}
// Always add general site name as suffix
TYPO3 Neos Internas: TypoScript - Beispiel - Teil 1

LOBACHER.
54
TypoScript: Beispiel - Teil 2
!
// This query checks if the second level menu has items and sets an additional class for the body
bodyTag.attributes.class = ${q(node).parents().count() >= 1 && q(node).children('[instanceof
TYPO3.Neos:Document]').filter('[_hiddenInIndex=false]').count() > 0 ? 'has-subpages' : ''}
!
body {
sectionName = 'body'
!
parts {
mainMenu = Menu {
entryLevel = 1
templatePath = 'resource://TYPO3.NeosDemoTypo3Org/Private/Templates/
TypoScriptObjects/MainMenu.html'
maximumLevels = 3
}
secondLevelMenu = Menu {
entryLevel = 2
templatePath = 'resource://TYPO3.NeosDemoTypo3Org/Private/Templates/
TypoScriptObjects/SecondLevelMenu.html'
maximumLevels = 1
}
TYPO3 Neos Internas: TypoScript - Beispiel - Teil 2

LOBACHER.
55
Eel - Embedded Expression Language
• Während TypoScript Zuweisungen und Prozessoren beinhaltet, kann man mit Eel Ausdrücke
der Art myObject.foo = ${q(node).property('bar')} formulieren
• Die Embedded Expression Language (Eel) ist ein Baustein um Domain Speciﬁc Languages
(DSL) zu erstellen.
• Eel stellt eine reichhaltige Syntax zur Verfügung um beliebige Ausdrücke zu erstellen, damit
sich der Autor der DSL auf die Semantik konzentrieren kann 
 
${foo.bar} // Traversal 
${foo.bar()} // Methoden-Aufruf 
${foo.bar().baz()} // Verketter Methoden-Aufruf 
${foo.bar("arg1", true, 42)} // Methoden-Aufruf mit Argumenten 
${12 + 18.5} // Kalkulation 
${foo == bar} // Vergleiche 
${foo.bar(12+7, foo == bar)} // Alles kombiniert 
${[foo, bar]} // Array Literal 
${{foo: bar, baz: test}} // Object Literal
TYPO3 Neos Internas: Eel - Embedded Expression Language

LOBACHER.
56
FlowQuery
• FlowQuery stellt eine Art jQuery für TYPO3 Flow dar
• FlowQuery stellt damit einen Weg dar, um Content (der ja eine TYPO3CR Node in Neos ist) im
Eel zu verarbeiten
• In FlowQuery gibt es Operationen:
• property 
Zugriff auf alle Eigenschaften einer Node
• ﬁlter 
Filterausdrücke in „Fizzle“
• children 
Gibt alle Kinder der TYPO3CR Node zurück
• parents 
Gibt alle Eltern der TYPO3CR Node zurück
• Weitere Operationen: add, count, ﬁrst, get, is, last, ... 
TYPO3 Neos Internas: FlowQuery

LOBACHER.
57
FlowQuery - Beispiele
• Anzahl der Kommentare = Anzahl der Kinder der aktuellen Node mit dem Namen
„comments“, deren Eigenschaft „spam“ auf dem Wert „false“ steht. 
numberOfComments = ${q(node).children('comments').children("[spam =
false]").count()}
• Breadcrumb-Menü = Aktuelle Seite + alle Elternseiten 
prototype(TYPO3.Neos:Breadcrumb) < prototype(TYPO3.TypoScript:Template) { 
templatePath = 'resource://TYPO3.Neos/Private/Templates/TypoScriptObjects/
BreadcrumbMenu.html' 
node = ${node} 
items = ${q(node).add(q(node).parents('[instanceof TYPO3.Neos:Document]'))} 
} 
{namespace neos=TYPO3NeosViewHelpers} 
<f:if condition="{items}"> 
<ul class="breadcrumbs"> 
<f:for each="{items}" as="item" reverse="TRUE"> 
<f:if condition="{item.hiddenInIndex} == 0">
<li> 
<neos:link.node node="{item}">{item.label}</neos:link.node> 
</li> 
</f:if> 
</f:for>
TYPO3 Neos Internas: FlowQuery - Beispiele

LOBACHER.
58
Erweiterung der Site
Einfaches Plugin 1

LOBACHER.
59
Plugin: Meta-Tag zur Angabe einer Canonical URL 
• Ziel: TYPO3 Neos soll so erweitert werden, dass es möglich ist, im
Backend eine Canonical URL anzugeben, welche dann wie folgt im
Frontend gerendert wird: 
 
<link rel="canonical" href="http://www.typovision.de/
canonical" /> 
• Dafür benötigen wir ein Flow Package, welches wir als Neos
Plugin verwenden
!
• Schritt 1: Anlegen eines Flow Package - der Vendor ist hier
„Typovision“, der Name des Packages ist „Canonical“ 
 
./flow kickstart:package Typovision.Canonical 
Plugin 1 Beispiel

LOBACHER.
60
Plugin: Meta-Tag zur Angabe einer Canonical URL
!
• Schritt 2: Zufügen einer Datei „NodeTypes.yaml“ in Packages/Application/
Typovision.Canonical/Configuration/ 
# Hinzufuegen des Feldes zu den Seiteneigenschaften 
'TYPO3.Neos.NodeTypes:Page': 
superTypes: ['TYPO3.Neos:Document'] 
properties: 
canonicalUrl: 
type: string 
ui: 
label: 'Canonical URL' 
reloadIfChanged: TRUE 
inspector: 
group: 'metaOptions' 
ui: 
inspector: 
groups: 
metaOptions: 
label: 'Canonical Information' 
position: 180 
Plugin 1 Beispiel
WICHTIG: 
Die Einrückungen
werden mit je 
2 Leerzeichen 
durchgeführt!

LOBACHER.
61
• Schritt 3: Anlegen des TypoScript Verzeichnisses unterhalb von Resources 
 
mkdir -p Packages/Application/Typovision.Canonical/Resources/Private/TypoScripts 
 
• Schritt 4: Dort wird die Datei Root.ts2 angelegt, welche den Head-Bereich der
Website mit einem Template erweitert, in welchem die CanonicalUrl angezeigt wird 
 
page.head.metadata { 
canonicalTag = TYPO3.TypoScript:Template 
canonicalTag { 
templatePath = 'resource://Typovision.Canonical/Private/Templates/
TypoScript/CanonicalTag.html' 
canonicalUrl = TYPO3.TypoScript:Value 
canonicalUrl.value = ${q(node).property('canonicalUrl')} 
} 
}
Plugin 1 Beispiel

LOBACHER.
62
• Schritt 5: Anlegen des TypoScript Verzeichnisses unterhalb von Templates 
 
mkdir -p Packages/Application/Typovision.Canonical/Resources/Private/
Templates/TypoScript 
 
• Schritt 6: Dort wird die Datei CanonicalTag.html angelegt 
 
{namespace ts = TYPO3TypoScriptViewHelpers} 
<link rel="canonical" href="{ts:render(path: 'canonicalUrl')}" /> 
 
• Übung für den Leser: Das Tag nur dann ausgeben lassen, wenn auch eine Canonical
URL eingegeben wurde 
Plugin 1 Beispiel

LOBACHER.
63
• Schritt 7: Einfügen des TypoScripts in der Datei (möchlichst am Anfang) 
Packages/Sites/Typovision.Demo/Resources/Private/TypoScripts/
Library/Root.ts2 
 
include: resource://Typovision.Canonical/Private/TypoScripts/Root.ts2 
• Hintergrundwissen: 
Die Seiteneigenschaften werden in der Tabelle  
typo3_typo3cr_domain_model_nodedata  
im Feld 
properties 
gespeichert:  
a:7:{s:4:"name";s:20:"TYPO3 Neos Demo Site";s:5:"title";s:4:"Home";s:
6:"layout";s:11:"landingPage";s:13:"subpageLayout";s:0:"";s:5:"state";s:
1:"1";s:23:"siteResourcesPackageKey";s:22:"TYPO3.NeosDemoTypo3Org";s:
12:"canonicalUrl";s:20:"http://www.google.de";} 
Plugin 1 Beispiel

LOBACHER.
64
• Schritt 8: Einfügen eines Markers ins Seitentemplate 
Packages/Sites/Typovision.Demo/Resources/Private/Templates/Page/
Default.html 
 
... 
<head> 
<f:section name="metadata"> 
... 
{canonicalTag -> f:format.raw()} 
</f:section> 
... 
</head> 
.... 
Plugin 1 Beispiel

LOBACHER.
65
Erste Projekte
mit TYPO3 Neos

LOBACHER.
66
Mitarbeit bei TYPO3 Neos: We need you!!
http://www.centurion-magazine.com/

LOBACHER.
67
http://www.departures-international.com/

LOBACHER.
68
http://feelcostabrava.com/

LOBACHER.
69
Mitarbeit
bei TYPO3 Neos

LOBACHER.
70
We need you!!
!
• Komme ins TYPO3 Neos und Flow Team! 
• Jeder wird gebraucht: Programmierer,  
Architekten, UX-Experten, Designer, 
Doku, Tester, JS-Spezialisten, ... 
• Meldet Euch bei robert [at] typo3.org

LOBACHER.
71
TYPO3 Neos Codesprint
!
• Wann: 24. - 27.03.2014
• Wo: FH Rosenheim
• Wer: Jeder der Interesse hat, an TYPO3 Neos mitzuwirken
• Kontakt: Meldet Euch bei robert [at] typo3.org 
• URL: http://wiki.typo3.org/Neos_Code_Sprint_March_2014
TYPO3 Neos Codesprint

LOBACHER.
72
Kunden gesucht!
!
• Direkte Mitarbeit
• Gebe frühes Feedback zu neuen Funktionen, User Interfaces, ...
• Direkter Kontakt und Diskussion mit den Entwicklern
• Sofern sinnvoll, wird das Feedback unmittelbar umgesetzt
!
• Vorteile
• Gestalte das WCMS der Zukunft direkt mit
• Nimm Einﬂuss auf die Entwicklung
• Zugang zu Entwicklern, Architekten und UX‘lern
• Networking mit anderen Neos-Kunden 
• Kontakt
• rasmus [at] typo3.org
Mitarbeit bei TYPO3 Neos: Kunden gesucht

LOBACHER.
73
Neos
Literatur

LOBACHER.
74
Das TYPO3 Neos Kompendium
!
!
!
Neos Literatur
www.lobacher.de/neoskompendium
Über 270 Seiten zu allen Aspekten 
von TYPO3 Neos
• Installation
• Konﬁguration
• Integration
• Entwicklung
de.slideshare.net/
plobacher/typo3-neos-das-
kompendium

LOBACHER.
75
Artikel
• web & mobile DEVELOPER (Autor Patrick Lobacher)
• Ausgabe 11 / 2013: TypoScript, FlowQuery und Eel in TYPO3 Neos
• Ausgabe 03 / 2014: TYPO3 Neos in Praxiseinsatz
• Ausgabe 04 / 2014: Erweiterung von TYPO3 Neos
• Ausgabe 05 / 2014: Plugin-Erstellung für TYPO3 Neos
• Screenguide (Autor Patrick Lobacher)
• Ausgabe 20 / 2014: TYPO3 Neos - ein Überblick
!
!
!
Neos Literatur

LOBACHER.
76
The Neos Book
!
• Im Februar 2014 wurde von Dan Frost eine Initiative gestartet, die
sich „The Neos Book“ nennt
• Ziel soll es sein, ein (englischsprachiges) Buch zu TYPO3 Neos im
(Spät)Sommer 2014 auf den Markt zu bringen
• Dafür werden mehr als 30 Core Entwickler und Autoren Inhalte
beisteuern
• Die Finanzierung wird über kickstarter.com erfolgen 
• Website: http://www.theneosbook.com/
Neos Literatur

LOBACHER.
77
TYPO3 Neos
Veranstaltungen

LOBACHER.
78
TYPO3 Neos Veranstaltungen

LOBACHER.
79
Spezielles Angebot für den  
Webkongress Erlangen 2014 
 
 
=> 20% Rabatt auf die letzten Tickets!!

LOBACHER.
80
http://t3dd14.typo3.org/
http://www.typo3camp-stuttgart.de/

LOBACHER.
81
Quellen und
Informationen

LOBACHER.
82
Quellen und Informationen
!
• TYPO3 Neos Website 
http://neos.typo3.org/ 
• TYPO3 Neos Download 
http://neos.typo3.org/download.html 
• TYPO3 Flow Website 
http://flow.typo3.org/ 
• TYPO3 Neos Dokumentation 
http://docs.typo3.org/neos/TYPO3NeosDocumentation/Index.html 
• TYPO3 Flow Dokumentation 
http://flow.typo3.org/documentation.html

LOBACHER.
83
!
• TYPO3 Neos Projekt bei forge 
http://forge.typo3.org/projects/typo3neos 
• TYPO3 Flow Projekt bei forge 
http://forge.typo3.org/projects/flow3 
• Cheatsheet für Fluid (und demnächst für Flow) 
http://www.lobacher.de/files/cs/FluidCheatSheet_3.01_Lobacher.pdf 

LOBACHER.
84
!
• GitHub Account von Lelesys (Pankaj Lele / http://www.lelesys.com/) 
https://github.com/lelesys 
• IRC Log vom Channel #typo3-neos bei Freenode 
http://riesvantwisk.com/cms/home/irc-logs/typo3-neos-irc-log.html

LOBACHER.
85
Installations-Alternativen und Hilfen
• TYPO3 Neos Vagrant Box 
https://github.com/tlayh/vagrant-typo3neos
• TYPO3 Neos Installation auf Mac OS X Snow Leopard und MAMP 
http://www.content-driven-ecommerce.de/typo3-neos-install/
• .git ignore File 
https://git.typo3.org/Neos/Distributions/Base.git/blob/
HEAD:/.gitignore
• Launchr (TYPO3 Neos Online testen) 
https://launchr.com/
• Mittwald Hosting - 30 Tage TYPO3 Neos Account 
https://www.mittwald.de/neos-testen/
• Manuelle Installation von jweiland.net 
http://jweiland.net/typo3/neos/neos-installation/manuelle-neos-
installation.html
• Installation auf einen Shared Hosting (Hostshare) 
https://wiki.hostsharing.net/index.php?title=TYPO3_Neos_installieren 
Troubleshoot / FAQ / Hilfe

LOBACHER.
86
Kontakt &
Projektanfragen

LOBACHER.
87
Kontakt
Klassisch: 
 
Patrick Lobacher 
 
Maxhofstr. 24 
81475 München 
 
Fon: +49 89 51 66 16 30 
 
Email: patrick@lobacher.de 
Web: www.lobacher.de
!
 
Twitter:  
www.twitter.com/PatrickLobacher 
 
Facebook:  
www.facebook.com/patrick.lobacher 
 
Blog:
blog.lobacher.de
 
Schulungen:
www.lobacher.de 
 
Google+: 
plus.google.com/105500420878314068694 
 
XING:  
www.xing.com/proﬁle/Patrick_Lobacher 
 
LinkedIn 
www.linkedin.com/pub/patrick-lobacher/
4/881/171 
 
Slideshare:  
www.slideshare.net/plobacher 
 
Amazon:  
www.amazon.de/Patrick-Lobacher/e/
B0045AQVEA
Kontakt
Leistungen: Consulting, Audit, Entwicklung, PM, Schulung 
Projektanfragen ab einem Budget von ca. 25.000 EUR möglich

LOBACHER.
88
Kontakt
Referenzen (net-o-graphic/typofaktum/typovision/LOBACHER.)

LOBACHER.
89
Fragen?
Oder komplett verwirrt?

Vielen Dank für Eure
Aufmerksamkeit
LOBACHER.

TYPO3 Neos - Next Generation CMS - Webkongress Erlangen 2014

Weitere ähnliche Inhalte

Was ist angesagt? (20)

Andere mochten auch (20)

Ähnlich wie TYPO3 Neos - Next Generation CMS - Webkongress Erlangen 2014 (20)

Mehr von die.agilen GmbH (20)

TYPO3 Neos - Next Generation CMS - Webkongress Erlangen 2014