Your SlideShare is downloading. ×
0
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Fluid Powered TYPO3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Fluid Powered TYPO3

358

Published on

Questo intervento si rivolge ai web designer senza particolari conoscenze di sviluppo TYPO3 e tratta della creazione di templates di pagine e contenuti attraverso il 
framework Fluid Powered TYPO3

Questo intervento si rivolge ai web designer senza particolari conoscenze di sviluppo TYPO3 e tratta della creazione di templates di pagine e contenuti attraverso il 
framework Fluid Powered TYPO3

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
358
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

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. www.t3campitalia.it 2014 morini@gammsystem.com T3Camp Italia Milano, 14 e 15 Marzo 2014 Fluid Powered TYPO3 Maurizio Morini
 Gamm System Srl
  • 2. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Sono Maurizio Morini socio fondatore di Gamm System mi occupo della progettazione di siti internet basati su TYPO3 2 Questo intervento si rivolge ai web designer senza particolari conoscenze di sviluppo TYPO3 e tratta di templating attraverso il 
 framework Fluid Powered TYPO3
  • 3. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Contesto 3
  • 4. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Evoluzione TYPO3 4
  • 5. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Framework di sviluppo 5
  • 6. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Pattern MVC 6 Model ControllerView
  • 7. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 7 Fluid Pattern MVC
  • 8. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Fluid Fluid è un linguaggio di templating che oltre a formattare i contenuti permette di processare l’output attraverso i suoi helper tag, meglio conosciuti come ViewHelper 8
  • 9. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 www.fedext.net 9
  • 10. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 FedExt Utilizza Fluid per ogni singolo aspetto di design e layout dell’output TYPO3 quindi mi posso concentrare sulla costruzione dei templates utilizzando solamente Fluid assieme ai soliti strumenti (html, css e javascript) 10
  • 11. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Flux • Flux è il cuore di ogni extension FedExt
 ed il suo scopo è di integrare un Flex Form dinamico direttamente all’interno del template Fluid • Flux permette di creare form fields di configurazione all’interno degli header di pagina e nei contenuti. 11
  • 12. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 VHS • VHS è una libreria di ViewHelpers che permettono funzioni avanzate di formattazione, interazione e manipolazione dei dati all’interno di un template Fluid 12
  • 13. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Fluid Pages • Fluid Pages è una extension con l’unico compito di interagire con il backend TYPO3 per il rendering dei template di pagina Fluid 13
  • 14. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Fluid Content • Fluid Content, come Fluid Pages, ha il compito di interagire con il backend TYPO3 e permette ad un singolo template Fluid di essere usato come content element. 14
  • 15. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 FedExt Core 15 Fluid Content Fluid Pages Flux VHS
  • 16. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Implementazione 16
  • 17. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Creazione extension • Creo con Extension Builder una ext vuota: fluidcontent_t3campitalia • Creo un file di configurazione typoscript • Modifico ext_table.php per includere il setup typoscript e registrare la extension come provider di page template e content template 17
  • 18. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Configuration/Typoscript/setup.txt plugin.tx_fluidcontentt3campitalia.view {! ! ! templateRootPath = ! EXT:fluidcontent_t3campitalia/Resources/Private/Templates/! ! ! partialRootPath = ! EXT:fluidcontent_t3campitalia/Resources/Private/Partials/ ! ! ! layoutRootPath = ! EXT:fluidcontent_t3campitalia/Resources/Private/Layouts/! ! } ! 18
  • 19. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 ext_table.php TYPO3CMSCoreUtilityExtensionManagementUtility::addStaticFile($_EXTKEY, 'Configuration/TypoScript', 'fluidcontent_t3campitalia');! ! Tx_Flux_Core::registerProviderExtensionKey('fluidcontent_t3campitalia', ‘Page');! ! Tx_Flux_Core::registerProviderExtensionKey('fluidcontent_t3campitalia', 'Content');! 19
  • 20. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Templates Fluid • Layouts: creano la struttura generale della pagina e sono utilizzati da più templates • Templates: sono il vero e proprio template referenziato dal Controller per il rendering dell’output della ext. • Partials: sono templates di parti di codice utilizzate in più Layouts/Templates 20
  • 21. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 fluidcontent_t3campitalia 21
  • 22. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Resource/Private 22
  • 23. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Resources/Public 23
  • 24. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Fluidpages 24
  • 25. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Frontend 25
  • 26. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Resources/Private/Layouts/Page.html {namespace v=Tx_Vhs_ViewHelpers}! <f:layout name="Page" />! ! <v:asset.style name=“bootstrap-css" ! path="EXT:fluidcontent_t3campitalia/Resources/Public/bootstrap.min.css"/>! <v:asset.style name="main-css" dependencies=“bootstrap-css" ! path="EXT:fluidcontent_t3campitalia/Resources/Public/main.css"/>! ! <v:asset.script name="jquery" allowMoveToFooter="false"! path="EXT:fluidcontent_t3campitalia/Resources/Public/jquery-1.9.0.min.js"/>! <v:asset.script name="bootstrap-core" dependencies="jquery"! path="EXT:fluidcontent_t3campitalia/Resources/Public/bootstrap.min.js"/>! ! <div class=“container {settings.pageClass}"> ! ! <f:render section="Header" partial=“Header" arguments="{_all}"/>! ! <f:render section="Content"></f:render> ! </div> 26
  • 27. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 https://fedext.net/viewhelpers 27
  • 28. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Resources/Private/Templates/Page/FontPage.html {namespace v=Tx_Vhs_ViewHelpers}! {namespace flux=Tx_Flux_ViewHelpers}! ! <f:layout name="Page" />! ! <f:section name="Configuration">! ! <flux:flexform ! ! ! id="front" ! ! ! label="Front Page" ! ! ! icon="{f:uri.resource(path: ‘Icons/t3camp_2014_mid.png')}">! ! <!-- Input field variabile 'pageClass' -->! <flux:flexform.field.input ! ! ! ! label="classe pagina" ! ! ! ! name="settings.pageClass" ! ! ! ! default="Frontpage-css-class"/>! ! Continua» 28
  • 29. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Resources/Private/Templates/Page/FontPage.html <!-- Backend layout grid -->! ! ! <flux:flexform.grid> ! ! ! ! <flux:flexform.grid.row> ! ! ! ! ! <flux:flexform.grid.column ! ! ! ! ! ! colPos="0" ! ! ! ! ! ! label="Sidebar" ! ! ! ! ! ! name=“Sidebar">! ! ! ! ! </flux:flexform.grid.column> ! ! ! ! ! ! <flux:flexform.grid.column ! ! ! ! ! ! colPos="1" label="Content" name=“Content">! ! ! ! ! </flux:flexform.grid.column> ! ! ! ! ! </flux:flexform.grid.row> ! ! ! </flux:flexform.grid> ! ! </flux:flexform>! </f:section>! Continua» 29
  • 30. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Resources/Private/Templates/Page/FontPage.html ! <f:section name="Content">! ! <div class=“row">! ! ! ! <div class="col-md-4" id="sidebar-col"> ! ! ! ! <v:page.content.render column="0"></v:page.content.render> ! ! ! </div> ! ! ! ! <div class="col-md-8" id="content-col"> ! ! ! ! <v:page.content.render column="1"></v:page.content.render> ! ! ! </div> !! ! ! ! </div>! </f:section>! ! </div> 30
  • 31. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Backend: header di pagina 31
  • 32. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Backend: header di pagina 32
  • 33. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Resources/Private/Partials/Header.html {namespace v=Tx_Vhs_ViewHelpers}! <f:layout name="Page"/>! ! ! <f:section name="Header">! ! ! ! <v:switch value="{page.uid}">! ! ! ! <v:case case="113" break="true">! ! ! ! ! ! <header class="jumbotron" role="banner">! ! ! ! ! ! <f:image ! src="EXT:fluidcontent_t3campitalia/Resources/Public/Icons/logo.png" ! ! ! ! ! ! alt="Logo" ! ! ! ! ! ! class=“pull-left"/>! ! ! ! ! ! ! <h1>Pagina T3CampItalia</h1>! ! ! ! ! </header>! ! ! ! ! </v:case>! Continua» 33
  • 34. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Resources/Private/Partials/Header.html ! ! ! ! <v:case case="default">! ! ! ! ! ! <header class="jumbotron" role="banner">! ! ! ! ! ! ! <h1>Page</h1>! ! ! ! ! ! </header>! ! ! ! ! </v:case>! ! ! </v:switch>! ! </f:section>! ! </div>! 34
  • 35. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Frontend 35
  • 36. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Fluidcontent 36
  • 37. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Backend: header di pagina 37
  • 38. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Resources/Private/Layouts/Content.html <f:layout name="Content"/>! ! <f:render section="Main"/> 38
  • 39. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Resources/Private/Templates/Content/Alert.html {namespace flux=Tx_Flux_ViewHelpers}! {namespace v=Tx_Vhs_ViewHelpers}! <f:layout name="Content" />! ! <f:section name="Configuration">! ! <flux:flexform wizardTab="Media" ! ! ! label="Alert box" ! ! ! description="Esempio di Fluidcontent per T3CampItalia 2014" id="alert" ! ! ! icon="{v:extension.path.resources(path: ‘Icons/ t3camp_2014_mid.png')}">! ! ! ! <flux:flexform.field.input name="header" label="Header" />! ! ! <flux:flexform.field.input name="closeLinkText" label="Close Link"/>! ! ! <flux:flexform.field.select name="class" items="warning,info,success,danger" default="warning" label="Type" />! ! ! <flux:flexform.field.checkbox label="Is Block?" name="isBlock" />! ! ! ! Continua» 39
  • 40. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Resources/Private/Templates/Content/Alert.html ! ! <flux:flexform.grid>! ! ! ! <flux:flexform.grid.row>! ! ! ! ! <flux:flexform.grid.column>! ! ! ! ! ! ! <flux:flexform.content name="content" />! ! ! ! ! ! </flux:flexform.grid.column>! ! ! ! </flux:flexform.grid.row>! ! ! </flux:flexform.grid>! ! </flux:flexform>! ! </f:section>! ! ! ! ! Continua» 40
  • 41. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Resources/Private/Templates/Content/Alert.html ! ! <f:section name="Main">! ! <div class="alert alert-{class} {f:if(condition: isBlock, then: ‘alert- block')}">! ! ! ! <f:if condition="{closeLinkText}">! ! ! ! <a class="close" data-dismiss=“alert">! ! ! ! ! <f:format.raw>{closeLinkText}</f:format.raw>! ! ! ! </a>! ! ! </f:if>! ! ! ! <f:if condition="{header}">! ! ! ! <h1 class="alert-heading">{header}</h1>! ! ! </f:if>! ! ! ! <flux:flexform.renderContent area="content" />! ! </div>! </f:section>! 41
  • 42. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Backend: Fluidcontent disponibile in add content 42
  • 43. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Backend: Edito il Fluidconten 43
  • 44. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Backend: Edito il Fluidconten 44
  • 45. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Backend: Edito il Fluidconten 45
  • 46. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Backend: header di pagina 46
  • 47. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Conclusioni 47
  • 48. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Confronto con TV • Nessuna informazioni di templates è memorizzata nel database • Quando si cambia il template non bisogna rimappare i contenuti • Typoscript viene utilizzato solo per configurazioni: con FedExt i menu vengono creati nel template Fluid • Fluid è utilizzato per tutti gli aspetti di definizione dei templates e per processare i dati da visualizzare. • Attraverso Flux posso parametrizzare e configurare i template di pagina e di contenuti, fornendo tantissime opzioni agli editori. 48
  • 49. Pagina www.t3campitalia.it 2014 morini@gammsystem.com Fluid Powered TYPO3 Riferimenti 49 Fluid Power TYPO3: 
 https://fedext.net/
 https://github.com/FluidTYPO3 Documentazione Fluid Power TYPO3: 
 https://github.com/FluidTYPO3/documentation DocumentazioneViewHelpers: 
 https://fedext.net/viewhelpers ! !
  • 50. www.t3campitalia.it 2014 morini@gammsystem.com T3Camp Italia Milano, 14 e 15 Marzo 2014 Fluid Powered TYPO3 Maurizio Morini
 Gamm System Srl

×