Slide 1

Slide 1 text

Individuelle Inhaltselemente für die einfachere Seitepflege. Der Vortrag zeigt, wie einfach dieses mit den Bord-mit-teln von TYPO3 umzusetzen ist. TYPO3 Content Elemente mit Fluid

Slide 2

Slide 2 text

Benjamin Kott | [email protected] 10.05.2013 Seite 2 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Hallo Welt!

Slide 3

Slide 3 text

Benjamin Kott | [email protected] 10.05.2013 Seite 3 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Benjamin Kott … ist 29 Jahre und haust in Düsseldorf … hat seit 14 Jahren eine Affäre mit dem Internet … macht Internet mit bunt und so … empfindet #RWD als Selbstverständlichkeit … wird von der wfp:2 versorgt … hat viel Spaß! Kontakt • facebook.com/benjamin.kott • twitter.com/benjaminkott • bk2k.info

Slide 4

Slide 4 text

Wir gestalten heute für das Web von morgen #RWD ist Pflichtprogramm

Slide 5

Slide 5 text

Leute - wir haben da ein Problemchen. CSS_Syled_Content

Slide 6

Slide 6 text

Benjamin Kott | [email protected] 10.05.2013 Seite 6 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid

Slide 7

Slide 7 text

Benjamin Kott | [email protected] 10.05.2013 Seite 7 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid

Slide 8

Slide 8 text

Benjamin Kott | [email protected] 10.05.2013 Seite 8 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid

Slide 9

Slide 9 text

Benjamin Kott | [email protected] 10.05.2013 Seite 9 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid

Slide 10

Slide 10 text

Benjamin Kott | [email protected] 10.05.2013 Seite 10 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid CSS_Styled_Content Magic macht daraus

Slide 11

Slide 11 text

Benjamin Kott | [email protected] 10.05.2013 Seite 11 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid

Slide 12

Slide 12 text

Benjamin Kott | [email protected] 10.05.2013 Seite 12 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Der Programmierer

Slide 13

Slide 13 text

Benjamin Kott | [email protected] 10.05.2013 Seite 13 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid LIKE A BOSS

Slide 14

Slide 14 text

Benjamin Kott | [email protected] 10.05.2013 Seite 14 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Der Redakteur

Slide 15

Slide 15 text

Benjamin Kott | [email protected] 10.05.2013 Seite 15 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid FOREVER ALONE

Slide 16

Slide 16 text

Benjamin Kott | [email protected] 10.05.2013 Seite 16 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Das hätten wir gebraucht: Headline Image Text

Slide 17

Slide 17 text

Benjamin Kott | [email protected] 10.05.2013 Seite 17 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Wo ist das Problem? Die Felder sind doch alle optional!

Slide 18

Slide 18 text

Problem 1: Der Redakteur wird zum Designer

Slide 19

Slide 19 text

Benjamin Kott | [email protected] 10.05.2013 Seite 19 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Der Redakteur ist zu 99,999…%* kein Designer und soll sich über das Design auch keine Gedanken machen. Es ist nicht sein Job! *Dieser Prozentsatz ist ein geschätzter Wert basierend auf meinen Erfahrungen.

Slide 20

Slide 20 text

Benjamin Kott | [email protected] 10.05.2013 Seite 20 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Wir geben unseren Kunden Werkzeuge ihre Webseite zu zerstören…

Slide 21

Slide 21 text

Benjamin Kott | [email protected] 10.05.2013 Seite 21 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid … indem wir ihnen zu viele Möglichkeiten geben ihre Website selbst zu gestalten.

Slide 22

Slide 22 text

Benjamin Kott | [email protected] 10.05.2013 Seite 22 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid „A CMS is not a website design tool.“ Rachel Andrew

Slide 23

Slide 23 text

Problem 2: Wir erzeugen massiven Overhead in der Umsetzung.

Slide 24

Slide 24 text

Benjamin Kott | [email protected] 10.05.2013 Seite 24 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Frage: Wer hat schon mal CSS_Styled_Content mit allem Optionen die zur Verfügung stehen für ein RWD Projekt umgeschrieben?

Slide 25

Slide 25 text

Benjamin Kott | [email protected] 10.05.2013 Seite 25 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Frage: Wie lange habt ihr dafür gebraucht?

Slide 26

Slide 26 text

Benjamin Kott | [email protected] 10.05.2013 Seite 26 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Frage: Wurde es tatsächlich benötigt?

Slide 27

Slide 27 text

Benjamin Kott | [email protected] 10.05.2013 Seite 27 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Jedes mal wenn so etwas gemacht wird, wird achtlos mit dem Budget des Kunden umgegangen.

Slide 28

Slide 28 text

Benjamin Kott | [email protected] 10.05.2013 Seite 28 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Mein Fazit zu CSS_Styled_Content

Slide 29

Slide 29 text

Benjamin Kott | [email protected] 10.05.2013 Seite 29 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid CSS_Styled_Content ist ein extrem umfangreiches Rendering Beispiel dafür was mit tt_content und TYPO3 möglich ist. Es hat im Produktivbetrieb seine Daseinsberechtigung verloren.

Slide 30

Slide 30 text

Benjamin Kott | [email protected] 10.05.2013 Seite 30 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid • 90% der Funktionen werden nicht benötigt • Schwierig in der Konfiguration, da es immer komplexer wird • Derzeit nicht #RWD kompatibel • Anpassungskosten übersteigen den Nutzen • Frameworks umständlich zu implementieren

Slide 31

Slide 31 text

Es gibt Hoffnung. Custom Content Elements

Slide 32

Slide 32 text

Benjamin Kott | [email protected] 10.05.2013 Seite 32 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Welche Benefits ergeben sich? • Maximale Flexibilität bei minimalem Aufwand • Erleichterte Pflege für Redakteure • Weniger Fehlerquellen bei #RWD Designs • Glücklichere Kunden

Slide 33

Slide 33 text

Benjamin Kott | [email protected] 10.05.2013 Seite 33 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Was müssen wir dafür tun? • Bestimmen der benötigten Content Elemente • Erstellen der Content Elemente

Slide 34

Slide 34 text

Benjamin Kott | [email protected] 10.05.2013 Seite 34 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Möglichkeiten Content Elemente zu erstellen und zu rendern • Extbase • Fluidtemplate Standalone • … Es gibt noch weitere Möglichkeiten Content Elemente zu rendern wir beschränken uns im Zuge der Demos jedoch auf diese beiden Varianten.

Slide 35

Slide 35 text

Content Element mit Extbase

Slide 36

Slide 36 text

Benjamin Kott | [email protected] 10.05.2013 Seite 36 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Was benötigen wir? • Extbase Controller • TCA für das Backend • Fluid Templates • Das Content Element muss registriert und konfiguriert werden

Slide 37

Slide 37 text

Benjamin Kott | [email protected] 10.05.2013 Seite 37 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Basic Extbase Controller typo3conf/ext/bk2k_content_elements/Classes/Controller/CustomElementController.php contentObj = $this->configurationManager->getContentObject(); $this->data = $this->contentObj->data; } public function renderAction(){ $this->view->assign('data',$this->data); } } ?>

Slide 38

Slide 38 text

Benjamin Kott | [email protected] 10.05.2013 Seite 38 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Basic Fluid Template typo3conf/ext/bk2k_content_elements/Resources/Private/Templates/CustomElement/Render.html {namespace ce = Bk2k\Bk2kContentElements\ViewHelpers} {data.bodytext}

Slide 39

Slide 39 text

Benjamin Kott | [email protected] 10.05.2013 Seite 39 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid ext_tables.php typo3conf/ext/bk2k_content_elements/ext_tables.php

Slide 40

Slide 40 text

Benjamin Kott | [email protected] 10.05.2013 Seite 40 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid ext_localconf.php typo3conf/ext/bk2k_content_elements/ext_localconf.php 'render', ), array( ), \TYPO3\CMS\Extbase\Utility\ExtensionUtility::PLUGIN_TYPE_CONTENT_ELEMENT ); ?>

Slide 41

Slide 41 text

Benjamin Kott | [email protected] 10.05.2013 Seite 41 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Das war es schon. • TypoScript muss nicht erstellt und eingebunden werden da das generierte Default TS ausreicht. • Wir haben vollen Zugriff auf den kompletten Datensatz über {data} im Fluidtemplate • Daten vom FAL müssen im Controller bereit gestellt oder wie hier ein ViewHelper genutzt werden.

Slide 42

Slide 42 text

Content Element mit Fluidtemplate

Slide 43

Slide 43 text

Benjamin Kott | [email protected] 10.05.2013 Seite 43 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Was benötigen wir? • TCA für das Backend • Fluid Templates • Das Content Element muss registriert und konfiguriert werden • Ein wenig TypoScript

Slide 44

Slide 44 text

Benjamin Kott | [email protected] 10.05.2013 Seite 44 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Basic Fluid Template typo3conf/ext/bk2k_content_elements/Resources/Private/Templates/CustomElement/Render.html {namespace ce = Bk2k\Bk2kContentElements\ViewHelpers} {data.bodytext}

Slide 45

Slide 45 text

Benjamin Kott | [email protected] 10.05.2013 Seite 45 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid ext_tables.php typo3conf/ext/bk2k_content_elements/ext_tables.php

Slide 46

Slide 46 text

Benjamin Kott | [email protected] 10.05.2013 Seite 46 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid ext_localconf.php - Teil 1 typo3conf/ext/bk2k_content_elements/ext_localconf.php

Slide 47

Slide 47 text

Benjamin Kott | [email protected] 10.05.2013 Seite 47 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid ext_localconf.php - Teil 2 typo3conf/ext/bk2k_content_elements/ext_localconf.php /** * Include TypoScript for tt_content after static */ $customFluidContentElementTypoScriptSetup = trim(' tt_content.bk2kcontentelements_customfluidelement = COA tt_content.bk2kcontentelements_customfluidelement { 10 = < lib.stdheader 20 = FLUIDTEMPLATE 20 { file = {$plugin.tx_bk2kcontentelements.view.templateRootPath}CustomElement/Render.html partialRootPath = {$plugin.tx_bk2kcontentelements.view.partialRootPath} layoutRootPath = {$plugin.tx_bk2kcontentelements.view.layoutRootPath} } } '); \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTypoScript( $_EXTKEY, 'setup', $customFluidContentElementTypoScriptSetup, 43 );

Slide 48

Slide 48 text

Benjamin Kott | [email protected] 10.05.2013 Seite 48 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Das war es schon. • Das TypoScript wird direkt in der in den ExtTables geschrieben damit es auf jedenfall verfügbar ist. • Wir haben vollen Zugriff auf den kompletten Datensatz über {data} im Fluidtemplate • Daten vom FAL müssen im Controller bereit gestellt oder wie hier ein ViewHelper genutzt werden.

Slide 49

Slide 49 text

Zusammenfassung

Slide 50

Slide 50 text

Benjamin Kott | [email protected] 10.05.2013 Seite 50 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid • Es ist einfach Content Elemente zu erstellen • Dank Fluid wird das rendern zum Kinderspiel • Wir brauchen kein CSS_Styled_Content • Im Idealfall sparen wir Zeit

Slide 51

Slide 51 text

Ausblick – Hands On

Slide 52

Slide 52 text

Daten stehen bereit. Resources

Slide 53

Slide 53 text

Benjamin Kott | [email protected] 10.05.2013 Seite 53 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid https://github.com/benjaminkott/bk2k_content_elements Alle Beispiele sind auf GitHub verfügbar.

Slide 54

Slide 54 text

Benjamin Kott | [email protected] 10.05.2013 Seite 54 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Fragen?

Slide 55

Slide 55 text

Benjamin Kott | [email protected] 10.05.2013 Seite 55 wfp:2 GmbH & Co. KG Mönchengladbach | www.wfp2.com TYPO3 Content Elemente mit Fluid Danke! facebook.com/benjamin.kott twitter.com/benjaminkott bk2k.info