L'Arte del Templating: Typoscript, Fluid e Grid Elements
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 479 views
Uploaded 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......

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

More in: Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
479
On Slideshare
358
From Embeds
121
Number of Embeds
6

Actions

Shares
Downloads
6
Comments
0
Likes
0

Embeds 121

http://t3campitalia.intera.it 81
http://www.t3campitalia.it 31
http://www.slideee.com 5
http://dev-nu.intera.it 2
http://www.linkedin.com 1
https://www.linkedin.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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