TYPO3 & Templavoila Framework

1,527 views

Published on

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.

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,527
On SlideShare
0
From Embeds
0
Number of Embeds
40
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

TYPO3 & Templavoila Framework

  1. 1. Sponsors
  2. 2. Bologna 26/27 Novembre 2010 Novotel fiera Bologna Creazione di skin con Templavoila Framework Oratore: Maurizio Morini T3Camp Italia Il primo evento italiano dedicato a TYPO3
  3. 3. Creazione di skin con Templavoila Framework <ul><li>Sono socio fondatore di Gamm System Srl
  4. 4. Solgo la funzione di coordinatore dello sviluppo web
  5. 5. Lavoro con TYPO3 dal 2005, affrontando problematiche di analisi, pianificazione e sviluppo per varie tipologie di clienti.
  6. 6. morini@gammsystem.com </li></ul>Maurizio Morini
  7. 7. Creazione di skin con Templavoila Framework <ul><li>Templavoila (TV) è il metodo di templating più potente in Typo3.
  8. 8. Con Templavoila qualsiasi layout HTML può essere integrato in Typo3
  9. 9. Necessaria una discreta conoscenza di Typo3 e typoscript </li></ul>INTRODUZIONE
  10. 10. Creazione di skin con Templavoila Framework Templavoila Framework semplifica e razionaliza l'uso di TV in Typo3.
  11. 11. SKIN: Creazione di skin con Templavoila Framework <ul><li>Il layout del sito è racchiuso in una skin
  12. 12. Viene installata in Typo3 come un'estensione
  13. 13. Può essere cambiata con un semplice click </li></ul>Ecco alcuni esempi dello stesso sito web con skin diverse:
  14. 14. Creazione di skin con Templavoila Framework
  15. 15. Creazione di skin con Templavoila Framework
  16. 16. Creazione di skin con Templavoila Framework
  17. 17. Creazione di skin con Templavoila Framework
  18. 18. Creazione di skin con Templavoila Framework APPROCCIO TEMPLAVOILA TEMPLATE HTML CREAZIONE PAGINE e CONTENUTI TEMPLATE HTML
  19. 19. Creazione di skin con Templavoila Framework MAPPATURA TEMPLAVOILA
  20. 20. Creazione di skin con Templavoila Framework CREAZIONE CONTENUTI
  21. 21. Creazione di skin con Templavoila Framework APPROCCIO TEMPLAVOILA FRAMEWORK TEMPLATE HTML CREAZIONE PAGINE e CONTENUTI
  22. 22. Creazione di skin con Templavoila Framework <ul><li>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.
  23. 23. 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. S enza mappature Templavoila . </li></ul>APPROCCIO TEMPLAVOILA FRAMEWORK
  24. 24. Creazione di skin con Templavoila Framework
  25. 25. Creazione di skin con Templavoila Framework <ul><li>Header
  26. 26. Feature
  27. 27. Generated Content Block 1
  28. 28. Main Content, Content Area 2, Content Area 3
  29. 29. Generated Content Block 2
  30. 30. Footer </li></ul>Categorie di contenitori e Layout di pagina
  31. 31. Creazione di skin con Templavoila Framework
  32. 32. Creazione di skin con Templavoila Framework
  33. 33. Creazione di skin con Templavoila Framework
  34. 34. Creazione di skin con Templavoila Framework <ul><li>Columns
  35. 35. Modules
  36. 36. HTML Wrapper
  37. 37. Plain Image
  38. 38. Module Feature Image </li></ul>Utility FCE
  39. 39. Creazione di skin con Templavoila Framework Layout Backend
  40. 40. Creazione di skin con Templavoila Framework DEMO
  41. 41. Creazione di skin con Templavoila Framework <ul><li>preCodeHeader
  42. 42. PostCodeHeader
  43. 43. preCodeFeature
  44. 44. PostCodeFeature
  45. 45. PreCodeContent
  46. 46. preCodeGeneratedContent-1
  47. 47. postCodeGeneratedContent-1
  48. 48. preCodeContentBlock-1
  49. 49. postCodeContentBlock-1 </li></ul><ul><li>preCodeContentBlock-2
  50. 50. postCodeContentBlock-2
  51. 51. preCodeContentBlock-3
  52. 52. postCodeContentBlock-3
  53. 53. preCodeGeneratedContent-2
  54. 54. postCodeGeneratedContent-2
  55. 55. preCodeFooter
  56. 56. postCodeFooter </li></ul>
  57. 57. Sponsors

×