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 ...
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:abracad...
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” p...
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 ...
3 tipologie per la parte centrale:
Spazio full-size per Home Page (MainHome)
Spazio full-size per Pagine Interne (MainInte...
<div id=”intestazione”> </div>
<div id=”centrale”> </div>
<div id=”piede”> </div>
Realizziamo ogni tipologia
aggiungendo F...
<div id=”intestazione”> </div>
Fluid <f:section>
<f:section name="HeaderHome">
<div id="header" class="home">
<f:cObject t...
<div id=”centrale”> </div>
<f:section name=”MainHome”>
<div id=”content” class=”home”>
<f:cObject typoscriptObjectPath=”li...
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
li...
2 - Pagine Interne
Intestazione bassa per immagine fissa
+ spazio full-size per i contenuti
+ footer automatico
BackEnd La...
3 – Pagine con Navigazione Laterale
Intestazione bassa per immagine fissa
+ colonna laterale per la navigazione
+ colonna ...
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.htm
l
<f:section
>
BeL...
Variabile per selezionare la “section” in base al BElayout della pagina:
lib.BElayoutUID = TEXT
lib.BElayoutUID {
data = f...
<div id=”intestazione”>
<f:if condition=”{f:cObject(typoscriptObjectPath:'lib.BElayoutUID')} == 1”>
<f:then>
<f:render sec...
<div id="centrale">
<f:if condition="{f:cObject(typoscriptObjectPath:'lib.BElayoutUID')} == 1">
<f:then>
<f:render section...
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....
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
Upcoming SlideShare
Loading in...5
×

L'Arte del Templating: Typoscript, Fluid e Grid Elements

671

Published on

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

Published in: Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
671
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

L'Arte del Templating: Typoscript, Fluid e Grid Elements

  1. 1. l’Arte del Templating: TypoScript, Fluid e Grid Elements di Elena Bartolotti
  2. 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. 3. Cosa voglio ottenere da TYPO3? gli Obiettivi
  4. 4. Un ambiente facile e intuitivo per ogni content editor gli Obiettivi
  5. 5. Un sistema che permetta al content editor di disporre liberamente i contenuti nelle pagine gli Obiettivi
  6. 6. Un modo per impedire che il content editor faccia DISASTRI gli Obiettivi
  7. 7. Come posso ottenere tutto questo con TYPO3? gli Strumenti
  8. 8. gli Strumenti Creo un ambiente facile e intuitivo con i BackEnd Layout
  9. 9. gli Strumenti Metto a disposizione del content editor diversi modi per impaginare i contenuti con i GridElements
  10. 10. gli Strumenti Limito i disastri con una progettazione mirata, associando i BackEnd Layout alle pagine con Fluid <f:abracadabra> --- </f:abracadabra>
  11. 11. Partiamo da un mockup in Pratica
  12. 12. in Pratica
  13. 13. in Pratica
  14. 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. 15. Esempio su sito reale analizzare la Grafica
  16. 16. analizzare la Grafica Esempio su sito reale
  17. 17. analizzare la Grafica Esempio su sito reale
  18. 18. Template HTML : t3camp.html <div id=”intestazione”> </div> <div id=”centrale”> </div> <div id=”piede”> </div> il Template
  19. 19. Per ogni “blocco” di elementi può esserci più di una tipologia il Template
  20. 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. 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. 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. 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. 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. 25. Come applico questo codice alle pagine del mio sito? BackEnd Layout
  26. 26. BackEnd Layout BackEnd Layout
  27. 27. 1 - Home Intestazione grande e animata + spazio full-size per i contenuti + footer automatico BackEnd Layout lib.Slider lib.content
  28. 28. 2 - Pagine Interne Intestazione bassa per immagine fissa + spazio full-size per i contenuti + footer automatico BackEnd Layout lib.header lib.content
  29. 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. 30. Assegnazione del BackEnd Layout nelle proprietà delle pagine BackEnd Layout
  31. 31. L'ambiente di lavoro del Content Editor deve rispecchiare il layout del sito BackEnd Layout
  32. 32. TypoScript TypoScript
  33. 33. page.10 = FLUIDTEMPLATE page.10.file = fileadmin/templates/t3camp.html TypoScript
  34. 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. 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. 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. 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. 38. Fluid <f:if condition> Vista Backend e Frontend di una pagina con layout per pagine interne con navigazione
  39. 39. Ora è il momento dei contenuti! i Contenuti
  40. 40. i Contenuti 4 colonne con bordi 1 colonna 2 colonne 3 colonne
  41. 41. Creare i record GridElements GridElements
  42. 42. Il content editor può scegliere come disporre i contenuti GridElements
  43. 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. 44. il Risultato
  45. 45. il Risultato
  46. 46. il Risultato
  47. 47. Non solo BackEnd Layout e GridElements MultiColumn Multiple Content TemplaVoila Fluid Content Engine Flux le Alternative
  48. 48. Progettare pensando anche al Content Editor le Conclusioni
  49. 49. le Conclusioni
  50. 50. La Forza è nulla senza il controllo le Conclusioni
  51. 51. the End Grazie per l’attenzione
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×