l'arte del templating: typoscript, fluid e grid elements

l’Arte del Templating:

TypoScript, Fluid e

Grid Elements di Elena Bartolotti

Elena è... Web engineer dal 2004

Collaboratrice di Intera dal 2004

Tecnologo della Comunicazione dal 2005

Certified TYPO3 Integrator dal 2010

Relatrice al T3Camp per la seconda volta

… NERD da sempre ...

Elena Bartolotti... chi?

Cosa voglio ottenere da

TYPO3?

gli Obiettivi

Un ambiente facile e intuitivo per ogni content editor

gli Obiettivi

Un sistema che permetta al content editor

di disporre liberamente i contenuti nelle pagine

gli Obiettivi

Un modo per impedire che il content editor faccia

DISASTRI

gli Obiettivi

Come posso ottenere tutto questo con

TYPO3?

gli Strumenti

gli Strumenti

Creo un ambiente facile e intuitivo con i

BackEnd Layout

gli Strumenti

Metto a disposizione del content editor

diversi modi per impaginare i contenuti con i

GridElements

gli Strumenti

Limito i disastri con una progettazione mirata,

associando i BackEnd Layout alle pagine con

Fluid

<f:abracadabra> --- </f:abracadabra>

Partiamo da un mockup

in Pratica

in Pratica

in Pratica

Intestazione

Parte centrale

Piede

Intestazione

Parte centrale

Piede

Intestazione

Parte centrale

Piede

In ogni “template” posso individuare facilmente 3 blocchi di elementi: Intestazione Parte Centrale (contenuti principali) Piede

analizzare la Grafica

Esempio su sito reale

analizzare la Grafica

analizzare la Grafica

Esempio su sito reale

analizzare la Grafica

Esempio su sito reale

Template HTML : t3camp.html <div id=”intestazione”> </div> <div id=”centrale”> </div> <div id=”piede”> </div>

il Template

Per ogni “blocco” di elementi

può esserci più di una tipologia

il Template

2 tipologie per l'intestazione: Intestazione alta con slide di immagini per Home Page (HeaderHome)

Intestazione più bassa a immagine fissa per Pagine Interne (HeaderInterne)

il Template

3 tipologie per la parte centrale:

Spazio full-size per Home Page (MainHome)

Spazio full-size per Pagine Interne (MainInterne)

Spazio con Navigazione laterale sinistra (MainNav)

il Template

<div id=”intestazione”> </div> <div id=”centrale”> </div> <div id=”piede”> </div>

Realizziamo ogni tipologia

aggiungendo Fluid al tremplate HTML

Fluid <f:section>

<div id=”intestazione”> </div>

Fluid <f:section>

<f:section name="HeaderHome"> <div id="header" class="home"> <f:cObject typoscriptObjectPath="lib.Slider" /> <f:cObject typoscriptObjectPath="lib.TopNav"/> </div> </f:section>

<f:section name="HeaderInterne"> <div id="header"> <f:cObject typoscriptObjectPath="lib.header" /> <f:cObject typoscriptObjectPath="lib.TopNav"/> </div> </f:section>

<div id=”centrale”> </div> <f:section name=”MainHome”> <div id=”content” class=”home”> <f:cObject typoscriptObjectPath=”lib.pagetitle" /> <f:cObject typoscriptObjectPath=”lib.content” /> </div> </f:section> <f:section name=”MainInterne”> <div id=”content”> <f:cObject typoscriptObjectPath=”lib.pagetitle” /> <f:cObject typoscriptObjectPath=”lib.content” /> </div> </f:section> <f:section name=”MainNav”> <div id=”sidebar”> <f:cObject typoscriptObjectPath=”lib.LeftNav” /> </div> <div id=”content”> <f:cObject typoscriptObjectPath=”lib.pagetitle” /> <f:cObject typoscriptObjectPath=”lib.content” /> </div> </f:section>

Fluid <f:section>

Come applico questo codice

alle pagine del mio sito?

BackEnd Layout

BackEnd Layout

BackEnd Layout

1 - Home Intestazione grande e animata

+ spazio full-size per i contenuti

+ footer automatico

BackEnd Layout

lib.Slider

lib.content

2 - Pagine Interne Intestazione bassa per immagine fissa

+ spazio full-size per i contenuti

+ footer automatico

BackEnd Layout

lib.header

lib.content

3 – Pagine con Navigazione Laterale Intestazione bassa per immagine fissa

+ colonna laterale per la navigazione

+ colonna per i contenuti

+ footer automatico

BackEnd Layout

Assegnazione del BackEnd Layout

nelle proprietà delle pagine

BackEnd Layout

L'ambiente di lavoro del Content Editor

deve rispecchiare il layout del sito

BackEnd Layout

TypoScript

TypoScript

page.10 = FLUIDTEMPLATE

page.10.file = fileadmin/templates/t3camp.html

TypoScript

Come comunicano

BackEnd Layout dentro TYPO3

con

le <f:section> nel template HTML?

TypoScript

t3camp.html

<f:section>

BeLayout 3

BeLayout 2

TYPO3

BeLayout 1

Variabile per selezionare la “section” in base al BElayout della pagina: lib.BElayoutUID = TEXT lib.BElayoutUID { data = field:backend_layout ifEmpty.cObject = TEXT ifEmpty.cObject { data = levelfield:-1, backend_layout_next_level, slide override.data = page:backend_layout } }

TypoScript

<div id=”intestazione”> <f:if condition=”{f:cObject(typoscriptObjectPath:'lib.BElayoutUID')} == 1”> <f:then> <f:render section="HeaderHome" /> </f:then> <f:else> <f:render section="Header" /> </f:else> </f:if> </div> <f:section name="HeaderHome"> <div id="header" class="home"> <f:cObject typoscriptObjectPath="lib.Slider" /> <f:cObject typoscriptObjectPath="lib.TopNav" /> </div> </f:section> <f:section name="Header"> <div id="header"> <f:cObject typoscriptObjectPath="lib.header" /> <f:cObject typoscriptObjectPath="lib.TopNav" /> </div> </f:section>

Fluid <f:if condition>

<div id="centrale"> <f:if condition="{f:cObject(typoscriptObjectPath:'lib.BElayoutUID')} == 1"> <f:then> <f:render section="MainHome" /> </f:then> </f:if> <f:if condition="{f:cObject(typoscriptObjectPath:'lib.BElayoutUID')} == 2"> <f:then> <f:render section="MainInterne" /> </f:then> </f:if> <f:if condition="{f:cObject(typoscriptObjectPath:'lib.BElayoutUID')} == 3"> <f:then> <f:render section="MainNav" /> </f:then> </f:if> </div>

Fluid <f:if condition>

Fluid <f:if condition> Vista Backend e Frontend

di una pagina con layout per pagine interne con navigazione

Ora è il momento dei contenuti!

i Contenuti

i Contenuti

4 colonne con bordi

1 colonna

2 colonne

3 colonne

Creare i record GridElements

GridElements

Il content editor può scegliere

come disporre i contenuti

GridElements

tt_content.gridelements_pi1.10=<lib.stdheader tt_content.gridelements_pi1.20.10.setup { # ID 1 – Grid a 1 colonna 1 < lib.gridelements.defaultGridSetup 1.columns { 0 < .default 0.wrap = <div class="large-12 columns">|</div> } 1.wrap = <div class="row nospace">|</div> # ID 2 - Grid a 2 colonne 50 50 2 < lib.gridelements.defaultGridSetup 2.columns { 0 < .default 0.wrap = <div class="large-6 columns">|</div> 1 < .default 1.wrap = <div class="large-6 columns">|</div> } 2.wrap = <div class="row nospace">|</div> … }

GridElements

il Risultato

il Risultato

il Risultato

Non solo BackEnd Layout e GridElements

MultiColumn Multiple Content

TemplaVoila

Fluid Content Engine

Flux

le Alternative

Progettare pensando anche al Content Editor

le Conclusioni

le Conclusioni

La Forza è nulla senza il controllo

le Conclusioni

the End

Grazie per l’attenzione