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

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

Post on 03-Jul-2015

634 views

Category:

Business

1 download

Embed Size (px)

DESCRIPTION

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

TRANSCRIPT

  • 1. lArte 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 --- 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

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.

Realizziamo ogni tipologia aggiungendo Fluid al tremplate HTML Fluid 23.

Fluid

24.