Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,204 views

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
  • Be the first to comment

  • Be the first to like this

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

×