L’integrazione tra Fluid e Grid Elements permette la gestione di molteplici layout FrontEnd e BackEnd in grado di realizzare le più fantasiose richieste grafiche, senza complicare la vita ai content editors. Nella presentazione vediamo insieme come realizzare un sito utilizzando FLUID e l'estensione GridElements, creando BackEnd Layout in base al risultato FrontEnd da ottenere. Sito demo con codici sorgenti: t3campitalia.intera.it/elena/t3camp14

1. l’Arte del Templating:
TypoScript, Fluid e
Grid Elements
di Elena Bartolotti

2. 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?

3. Cosa voglio ottenere da
TYPO3?
gli Obiettivi

4. Un ambiente facile e intuitivo per ogni content editor
gli Obiettivi

5. Un sistema che permetta al content editor
di disporre liberamente i contenuti nelle pagine
gli Obiettivi

6. Un modo per impedire che il content editor faccia
DISASTRI
gli Obiettivi

7. Come posso ottenere tutto questo con
TYPO3?
gli Strumenti

8. gli Strumenti
Creo un ambiente facile e intuitivo con i
BackEnd Layout

9. gli Strumenti
Metto a disposizione del content editor
diversi modi per impaginare i contenuti con i
GridElements

10. gli Strumenti
Limito i disastri con una progettazione mirata,
associando i BackEnd Layout alle pagine con
Fluid
<f:abracadabra> --- </f:abracadabra>

11. Partiamo da un mockup
in Pratica

12. in Pratica

13. in Pratica

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

15. Esempio su sito reale
analizzare la Grafica

16. analizzare la Grafica
Esempio su sito reale

17. analizzare la Grafica
Esempio su sito reale

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

19. Per ogni “blocco” di elementi
può esserci più di una tipologia
il Template

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

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

22. <div id=”intestazione”> </div>
<div id=”centrale”> </div>
<div id=”piede”> </div>
Realizziamo ogni tipologia
aggiungendo Fluid al tremplate HTML
Fluid <f:section>

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

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

25. Come applico questo codice
alle pagine del mio sito?
BackEnd Layout

26. BackEnd Layout
BackEnd Layout

27. 1 - Home
Intestazione grande e animata
+ spazio full-size per i contenuti
+ footer automatico
BackEnd Layout
lib.Slider
lib.content

28. 2 - Pagine Interne
Intestazione bassa per immagine fissa
+ spazio full-size per i contenuti
+ footer automatico
BackEnd Layout
lib.header
lib.content

29. 3 – Pagine con Navigazione Laterale
Intestazione bassa per immagine fissa
+ colonna laterale per la navigazione
+ colonna per i contenuti
+ footer automatico
BackEnd Layout

30. Assegnazione del BackEnd Layout
nelle proprietà delle pagine
BackEnd Layout

31. L'ambiente di lavoro del Content Editor
deve rispecchiare il layout del sito
BackEnd Layout

32. TypoScript
TypoScript

33. page.10 = FLUIDTEMPLATE
page.10.file = fileadmin/templates/t3camp.html
TypoScript

34. Come comunicano
BackEnd Layout dentro TYPO3
con
le <f:section> nel template HTML?
TypoScript
t3camp.htm
l
<f:section
>
BeLayou
t
3
BeLayou
t
2
TYPO3
BeLayou
t
1

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

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

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

38. Fluid <f:if condition>
Vista Backend e Frontend
di una pagina con layout per pagine interne con navigazione

39. Ora è il momento dei contenuti!
i Contenuti

40. i Contenuti
4 colonne con bordi
1 colonna
2 colonne
3 colonne

41. Creare i record GridElements
GridElements

42. Il content editor può scegliere
come disporre i contenuti
GridElements

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

44. il Risultato

45. il Risultato

46. il Risultato

47. Non solo BackEnd Layout e GridElements
MultiColumn
Multiple Content
TemplaVoila
Fluid Content Engine
Flux
le Alternative

48. Progettare pensando anche al Content Editor
le Conclusioni

49. le Conclusioni

50. La Forza è nulla senza il controllo
le Conclusioni

51. the End
Grazie per l’attenzione