typo3 & templavoila framework
DESCRIPTION
Templavoila Framework non permette di fare cose nuove ma fornisce un workflow basato su codice e best practices, per produrre siti di aspetto diverso in modo veloce e consistente usando TemplaVoila.TRANSCRIPT
![Page 1: TYPO3 & Templavoila Framework](https://reader035.vdocuments.pub/reader035/viewer/2022062707/55852500d8b42ada748b5094/html5/thumbnails/1.jpg)
Bologna 26/27 Novembre 2010Novotel fiera Bologna
Creazione di skin con Templavoila FrameworkOratore: Maurizio Morini
T3Camp Italia Il primo evento italiano dedicato a TYPO3
![Page 2: TYPO3 & Templavoila Framework](https://reader035.vdocuments.pub/reader035/viewer/2022062707/55852500d8b42ada748b5094/html5/thumbnails/2.jpg)
http://www.t3campitalia.it/
Pag. 3
Creazione di skin con Templavoila Framework
● Sono socio fondatore di Gamm System Srl
● Solgo la funzione di coordinatore dello sviluppo web
● Lavoro con TYPO3 dal 2005, affrontando problematiche
di analisi, pianificazione e sviluppo per varie tipologie di clienti.
Maurizio Morini
![Page 3: TYPO3 & Templavoila Framework](https://reader035.vdocuments.pub/reader035/viewer/2022062707/55852500d8b42ada748b5094/html5/thumbnails/3.jpg)
http://www.t3campitalia.it/
Pag. 4
Creazione di skin con Templavoila Framework
● Templavoila (TV) è il metodo di templating più potente in Typo3.
● Con Templavoila qualsiasi layout HTML può essere integrato in Typo3
● Necessaria una discreta conoscenza di Typo3 e typoscript
INTRODUZIONE
![Page 4: TYPO3 & Templavoila Framework](https://reader035.vdocuments.pub/reader035/viewer/2022062707/55852500d8b42ada748b5094/html5/thumbnails/4.jpg)
http://www.t3campitalia.it/
Pag. 5
Creazione di skin con Templavoila Framework
Templavoila Framework semplifica e razionaliza l'uso di TV in Typo3.
![Page 5: TYPO3 & Templavoila Framework](https://reader035.vdocuments.pub/reader035/viewer/2022062707/55852500d8b42ada748b5094/html5/thumbnails/5.jpg)
http://www.t3campitalia.it/
Pag. 6
SKIN:
Creazione di skin con Templavoila Framework
● Il layout del sito è racchiuso in una skin
● Viene installata in Typo3 come un'estensione
● Può essere cambiata con un semplice click
Ecco alcuni esempi dello stesso sito web con skin diverse:
![Page 6: TYPO3 & Templavoila Framework](https://reader035.vdocuments.pub/reader035/viewer/2022062707/55852500d8b42ada748b5094/html5/thumbnails/6.jpg)
http://www.t3campitalia.it/
Pag. 7
Creazione di skin con Templavoila Framework
![Page 7: TYPO3 & Templavoila Framework](https://reader035.vdocuments.pub/reader035/viewer/2022062707/55852500d8b42ada748b5094/html5/thumbnails/7.jpg)
http://www.t3campitalia.it/
Pag. 8
Creazione di skin con Templavoila Framework
![Page 8: TYPO3 & Templavoila Framework](https://reader035.vdocuments.pub/reader035/viewer/2022062707/55852500d8b42ada748b5094/html5/thumbnails/8.jpg)
http://www.t3campitalia.it/
Pag. 9
Creazione di skin con Templavoila Framework
![Page 9: TYPO3 & Templavoila Framework](https://reader035.vdocuments.pub/reader035/viewer/2022062707/55852500d8b42ada748b5094/html5/thumbnails/9.jpg)
http://www.t3campitalia.it/
Pag. 10
Creazione di skin con Templavoila Framework
![Page 10: TYPO3 & Templavoila Framework](https://reader035.vdocuments.pub/reader035/viewer/2022062707/55852500d8b42ada748b5094/html5/thumbnails/10.jpg)
http://www.t3campitalia.it/
Pag. 11
Creazione di skin con Templavoila Framework
MAPPATURATEMPLAVOILA
TEMPLATEHTML
CREAZIONEPAGINE e
CONTENUTI
APPROCCIO TEMPLAVOILA
TEMPLATEHTML
MAPPATURATEMPLAVOILA
![Page 11: TYPO3 & Templavoila Framework](https://reader035.vdocuments.pub/reader035/viewer/2022062707/55852500d8b42ada748b5094/html5/thumbnails/11.jpg)
http://www.t3campitalia.it/
Pag. 12
Creazione di skin con Templavoila Framework
MAPPATURA TEMPLAVOILA
![Page 12: TYPO3 & Templavoila Framework](https://reader035.vdocuments.pub/reader035/viewer/2022062707/55852500d8b42ada748b5094/html5/thumbnails/12.jpg)
http://www.t3campitalia.it/
Pag. 13
Creazione di skin con Templavoila Framework
CREAZIONE CONTENUTI
![Page 13: TYPO3 & Templavoila Framework](https://reader035.vdocuments.pub/reader035/viewer/2022062707/55852500d8b42ada748b5094/html5/thumbnails/13.jpg)
http://www.t3campitalia.it/
Pag. 14
Creazione di skin con Templavoila Framework
CREAZIONESKIN
TEMPLATEHTMLCREAZIONE
PAGINE eCONTENUTI
APPROCCIO TEMPLAVOILA FRAMEWORK
LIBRERIASKIN
![Page 14: TYPO3 & Templavoila Framework](https://reader035.vdocuments.pub/reader035/viewer/2022062707/55852500d8b42ada748b5094/html5/thumbnails/14.jpg)
http://www.t3campitalia.it/
Pag. 15
Creazione di skin con Templavoila Framework
● Preparo l'installazione di base del sito e posso subito lavorare: possiamo già creare le pagine e i contenuti del sito utilizzando un template di base: Questo permette di iniziare fin da subito ad organizzare i contenuti e la navigazione del sito, etc.
● Lo sviluppo della skin è “indipendente” dai contenuti. Abbiamo sempre un template html come in Templavoila, ma quello che devo fare è scrivere qualche riga di typoscript e gestire gli stili CSS necesssari. Senza mappature Templavoila.
APPROCCIO TEMPLAVOILA FRAMEWORK
![Page 15: TYPO3 & Templavoila Framework](https://reader035.vdocuments.pub/reader035/viewer/2022062707/55852500d8b42ada748b5094/html5/thumbnails/15.jpg)
http://www.t3campitalia.it/
Pag. 16
Creazione di skin con Templavoila Framework
● Header
● Feature
● Generated Content Block 1
● Main Content, Content Area 2, Content Area 3
● Generated Content Block 2
● Footer
Categorie di contenitori e Layout di pagina
![Page 16: TYPO3 & Templavoila Framework](https://reader035.vdocuments.pub/reader035/viewer/2022062707/55852500d8b42ada748b5094/html5/thumbnails/16.jpg)
http://www.t3campitalia.it/
Pag. 17
Creazione di skin con Templavoila Framework
![Page 17: TYPO3 & Templavoila Framework](https://reader035.vdocuments.pub/reader035/viewer/2022062707/55852500d8b42ada748b5094/html5/thumbnails/17.jpg)
http://www.t3campitalia.it/
Pag. 18
Creazione di skin con Templavoila Framework
![Page 18: TYPO3 & Templavoila Framework](https://reader035.vdocuments.pub/reader035/viewer/2022062707/55852500d8b42ada748b5094/html5/thumbnails/18.jpg)
http://www.t3campitalia.it/
Pag. 19
Creazione di skin con Templavoila Framework
![Page 19: TYPO3 & Templavoila Framework](https://reader035.vdocuments.pub/reader035/viewer/2022062707/55852500d8b42ada748b5094/html5/thumbnails/19.jpg)
http://www.t3campitalia.it/
Pag. 20
Creazione di skin con Templavoila Framework
● Columns
● Modules
● HTML Wrapper
● Plain Image
● Module Feature Image
Utility FCE
![Page 20: TYPO3 & Templavoila Framework](https://reader035.vdocuments.pub/reader035/viewer/2022062707/55852500d8b42ada748b5094/html5/thumbnails/20.jpg)
http://www.t3campitalia.it/
Pag. 21
Creazione di skin con Templavoila Framework
Layout Backend
![Page 21: TYPO3 & Templavoila Framework](https://reader035.vdocuments.pub/reader035/viewer/2022062707/55852500d8b42ada748b5094/html5/thumbnails/21.jpg)
http://www.t3campitalia.it/
Pag. 22
Creazione di skin con Templavoila Framework
DEMO
![Page 22: TYPO3 & Templavoila Framework](https://reader035.vdocuments.pub/reader035/viewer/2022062707/55852500d8b42ada748b5094/html5/thumbnails/22.jpg)
http://www.t3campitalia.it/
Pag. 23Pag. 23
Sponsors