Ajax è una inesauribile risorsa per arricchire la user experience nella fruizione di contenuti. Generalmente l'integrazione dei comportamenti Ajax in un sito web viene progettata a tavolino rispetto ai contenuti e gli obiettivi di visualizzazione del sito, mentre è molto più complicato mettere a disposizione dell'editore la possibilità di personalizzare i contenuti nel momento della pubblicazione. Questo intervento si rivolge ai web designer senza particolari conoscenze nello sviluppo TYPO3 e propone l'implementazione di una Extension, che attraverso l'uso di jQuery, personalizza il rendering dei tt_content TYPO3 nel momento della pubblicazione. Vuole essere inoltre uno spunto per l'ideazione di nuove visualizzazioni nello sviluppo di siti TYPO3.

1. jQuery4Contents
Maurizio Morini
Gamm System
T3Camp Italia www.t3campitalia.it
Bologna, 28 e 29 Ottobre 2011 morini@gammsystem.com

2. jQuery4Contents
Sono Maurizio Morini
socio fondatore di Gamm System
mi occupo della progettazione
dei siti internet prodotti con TYPO3
Questo intervento si rivolge ai web designer senza
particolari conoscenze nello sviluppo TYPO3
e propone l'implementazione di una estensione
che personalizza il rendering dei contenuti
attraverso l'uso di CSS e jQuery
Pagina 2
www.t3campitalia.it
morini@gammsystem.com

3. jQuery4Contents
Premessa
I siti su cui lavoriamo hanno una forte
caratterizzazione grafica e necessitano della
massima libertà nella progettazione.
Pagina 3
www.t3campitalia.it
morini@gammsystem.com

4. jQuery4Contents
Premessa
I siti su cui lavoriamo hanno una forte
caratterizzazione grafica e necessitano della
massima libertà nella progettazione.
TYPO3: è lo strumento che ci permette di
esprimerci senza limiti.
Pagina 3
www.t3campitalia.it
morini@gammsystem.com

5. jQuery4Contents
Premessa
L'anno scorso ho presentato un'estensione che
permette di creare skin TYPO3 che vengono
installate come estensioni e che cambiano
l'aspetto grafico del sito con un click.
Pagina 4
www.t3campitalia.it
morini@gammsystem.com

6. jQuery4Contents
Premessa
L'anno scorso ho presentato un'estensione che
permette di creare skin TYPO3 che vengono
installate come estensioni e che cambiano
l'aspetto grafico del sito con un click.
Templavoila Framework risponde alla nostra
esigenza di "vestire" il sito web in modo
semplice e modulare
Pagina 4
www.t3campitalia.it
morini@gammsystem.com

7. jQuery4Contents
Premessa
Quello che spesso accade durante l'inserimento dei
contenuti è che l'editore abbia la necessità di una
formattazione particolare per caratterizzare al meglio
l’informazione. La skin Templavoila Framework non
arriva a questo livello di personalizzazione.
Pagina 5
www.t3campitalia.it
morini@gammsystem.com

8. jQuery4Contents
Premessa
Quello che spesso accade durante l'inserimento dei
contenuti è che l'editore abbia la necessità di una
formattazione particolare per caratterizzare al meglio
l’informazione. La skin Templavoila Framework non
arriva a questo livello di personalizzazione.
jQuery4Contents
Pagina 5
www.t3campitalia.it
morini@gammsystem.com

9. jQuery4Contents
jQuery4Contents
Permette all’editore di selezionare nel Backend
TYPO3 una specifica formattazione CSS o un
comportamento Ajax durante l’inserimento dei
contenuti da pubblicare.
Pagina 6
www.t3campitalia.it
morini@gammsystem.com

10. jQuery4Contents
jQuery4Contents
Permette all’editore di selezionare nel Backend
TYPO3 una specifica formattazione CSS o un
comportamento Ajax durante l’inserimento dei
contenuti da pubblicare.
Non è un estensione disponibile sul TER, ma
solo uno spunto di riflessione sulle
problematiche di rendering dei contenuti.
Pagina 6
www.t3campitalia.it
morini@gammsystem.com

11. jQuery4Contents
section_frame
Ogni contenuto TYPO3 ha un Frame selector
box (Indentation and Frames) che permette di
scegliere il wrapper html che racchiude il
contenuto.
Il section_frame e il relativo wrapper possono
essere personalizzati.
Pagina 7
www.t3campitalia.it
morini@gammsystem.com

12. jQuery4Contents
Pagina 8
www.t3campitalia.it
morini@gammsystem.com

13. jQuery4Contents
Page TSConfig
TCEFORM.tt_content.section_frame {
disabled = 0
removeItems = 1,5,6,10,11,12,20,21
addItems.7 = Rounded
addItems.8 = Reveal
}
Pagina 9
www.t3campitalia.it
morini@gammsystem.com

14. jQuery4Contents
TypoScript Template
tt_content.stdWrap.innerWrap.cObject {
10 = TEXT
10.value = <div class="rounded">|</div>
11 = TEXT
11.value = <div class="reveal">|</div>
}
Pagina 10
www.t3campitalia.it
morini@gammsystem.com

15. jQuery4Contents
TypoScript Template
tt_content.stdWrap.innerWrap.cObject {
10 = TEXT
10.value = <div class="rounded">|</div>
11 = TEXT
11.value = <div class="reveal">|</div>
}
page.includeCSS {
file_customstyles = fileadmin/templates/custom_styles.css
}
page.includeJS {
file_customjs = fileadmin/templates/customjs.js
}
Pagina 10
www.t3campitalia.it
morini@gammsystem.com

16. jQuery4Contents
Pagina 11
www.t3campitalia.it
morini@gammsystem.com

17. jQuery4Contents
Pagina 12
www.t3campitalia.it
morini@gammsystem.com

18. jQuery4Contents
Pagina 13
www.t3campitalia.it
morini@gammsystem.com

19. jQuery4Contents
Pagina 14
www.t3campitalia.it
morini@gammsystem.com

20. jQuery4Contents
Pagina 15
www.t3campitalia.it
morini@gammsystem.com

21. jQuery4Contents
Pagina 16
www.t3campitalia.it
morini@gammsystem.com

22. jQuery4Contents
Pagina 17
www.t3campitalia.it
morini@gammsystem.com

23. jQuery4Contents
Creazione estensione
• creazione estensione con il Kickstarter wizard
• portare le configurazioni che abbiamo visto
all'interno dell’estensione
• implementare un comportamento jQuery più
complesso.
Pagina 18
www.t3campitalia.it
morini@gammsystem.com

24. jQuery4Contents
Pagina 19
www.t3campitalia.it
morini@gammsystem.com

25. jQuery4Contents
Pagina 20
www.t3campitalia.it
morini@gammsystem.com

26. jQuery4Contents
Pagina 21
www.t3campitalia.it
morini@gammsystem.com

27. jQuery4Contents
Pagina 22
www.t3campitalia.it
morini@gammsystem.com

28. jQuery4Contents
Pagina 23
www.t3campitalia.it
morini@gammsystem.com

29. jQuery4Contents
ext_localconf.php
E’ il file di configurazione dell’estensione per la
gestione dei comportamenti nella parte
Frontend.
Pagina 24
www.t3campitalia.it
morini@gammsystem.com

30. jQuery4Contents
ext_localconf.php
E’ il file di configurazione dell’estensione per la
gestione dei comportamenti nella parte
Frontend.
t3lib_extMgm.addPageTSConfig
t3lib_extMgm.addTypoScript
Pagina 24
www.t3campitalia.it
morini@gammsystem.com

31. jQuery4Contents
Pagina 25
www.t3campitalia.it
morini@gammsystem.com

32. jQuery4Contents
Pagina 26
www.t3campitalia.it
morini@gammsystem.com

33. jQuery4Contents
Pagina 27
www.t3campitalia.it
morini@gammsystem.com

34. jQuery4Contents
Pagina 28
www.t3campitalia.it
morini@gammsystem.com

35. jQuery4Contents
Pagina 29
www.t3campitalia.it
morini@gammsystem.com

36. jQuery4Contents
Pagina 30
www.t3campitalia.it
morini@gammsystem.com

37. jQuery4Contents
Pagina 31
www.t3campitalia.it
morini@gammsystem.com

38. jQuery4Contents
Creazione estensione 2
• implementare una scrollbar jQuery all’interno
di un tt_content
• creazione di un nuovo campo nella form di
inserimento di contenuti nel Backend
Pagina 32
www.t3campitalia.it
morini@gammsystem.com

39. jQuery4Contents
ext_tables.sql
CREATE TABLE tt_content (
tx_jq4t3camp_width int(4) DEFAULT '0' NOT NULL,
tx_jq4t3camp_height int(4) DEFAULT '0' NOT NULL
);
Pagina 33
www.t3campitalia.it
morini@gammsystem.com

40. jQuery4Contents
ext_tables.php
E’ il file di configurazione dell’estensione per la
gestione dei comportamenti nella parte
Backend.
In questo caso è usato per definire il rendering
dei nuovi campi nella form di backend
Pagina 34
www.t3campitalia.it
morini@gammsystem.com

41. jQuery4Contents
Pagina 35
www.t3campitalia.it
morini@gammsystem.com

42. jQuery4Contents
Pagina 36
www.t3campitalia.it
morini@gammsystem.com

43. jQuery4Contents
Pagina 37
www.t3campitalia.it
morini@gammsystem.com

44. jQuery4Contents
Pagina 38
www.t3campitalia.it
morini@gammsystem.com

45. jQuery4Contents
Pagina 39
www.t3campitalia.it
morini@gammsystem.com

46. jQuery4Contents
Pagina 40
www.t3campitalia.it
morini@gammsystem.com

47. jQuery4Contents
Pagina 41
www.t3campitalia.it
morini@gammsystem.com

48. jQuery4Contents
Riferimenti
Personalizzazione section_frame:
http://float-middle.blogspot.com/2009/07/custom-frames-for-content-elements-in.html
Documentazione TSConfig:
http://typo3.org/documentation/document-library/core-documentation/doc_core_tsconfig/current/
Typoscript:
http://wiki.typo3.org/Ts45min
Struttura delle extensions:
http://typo3.org/documentation/document-library/core-documentation/doc_core_api/4.3.0/view/2/1/
API reference:
http://typo3.org/fileadmin/typo3api-4.0.0/db/d23/classt3lib__extMgm.html
Pagina 42
www.t3campitalia.it
morini@gammsystem.com

49. jQuery4Contents
Maurizio Morini
Gamm System
T3Camp Italia www.t3campitalia.it
Bologna, 28 e 29 Ottobre 2011 morini@gammsystem.com