T3camp 2011 jquery4contents
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

T3camp 2011 jquery4contents

  • 540 views
Uploaded on

Ajax è una inesauribile risorsa per arricchire la user experience nella fruizione di contenuti. ...

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
540
On Slideshare
515
From Embeds
25
Number of Embeds
2

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 25

http://www.t3campitalia.it 23
http://2011.t3campitalia.it 2

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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 1. jQuery4ContentsMaurizio MoriniGamm SystemT3Camp Italia www.t3campitalia.itBologna, 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  limplementazione di una estensione che personalizza il rendering dei contenuti attraverso luso di CSS e jQueryPagina 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 Lanno scorso ho presentato unestensione che permette di creare skin TYPO3 che vengono installate come estensioni e che cambiano laspetto grafico del sito con un click.Pagina 4 www.t3campitalia.it morini@gammsystem.com
  • 6. jQuery4Contents Premessa Lanno scorso ho presentato unestensione che permette di creare skin TYPO3 che vengono installate come estensioni e che cambiano laspetto grafico del sito con un click. Templavoila Framework risponde alla nostra esigenza di "vestire" il sito web in modo semplice e modularePagina 4 www.t3campitalia.it morini@gammsystem.com
  • 7. jQuery4Contents Premessa Quello che spesso accade durante linserimento dei contenuti è che leditore 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 linserimento dei contenuti è che leditore abbia la necessità di una formattazione particolare per caratterizzare al meglio l’informazione. La skin Templavoila Framework non arriva a questo livello di personalizzazione. jQuery4ContentsPagina 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. jQuery4ContentsPagina 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. jQuery4ContentsPagina 11 www.t3campitalia.it morini@gammsystem.com
  • 17. jQuery4ContentsPagina 12 www.t3campitalia.it morini@gammsystem.com
  • 18. jQuery4ContentsPagina 13 www.t3campitalia.it morini@gammsystem.com
  • 19. jQuery4ContentsPagina 14 www.t3campitalia.it morini@gammsystem.com
  • 20. jQuery4ContentsPagina 15 www.t3campitalia.it morini@gammsystem.com
  • 21. jQuery4ContentsPagina 16 www.t3campitalia.it morini@gammsystem.com
  • 22. jQuery4ContentsPagina 17 www.t3campitalia.it morini@gammsystem.com
  • 23. jQuery4Contents Creazione estensione • creazione estensione con il Kickstarter wizard • portare le configurazioni che abbiamo visto allinterno dell’estensione • implementare un comportamento jQuery più complesso.Pagina 18 www.t3campitalia.it morini@gammsystem.com
  • 24. jQuery4ContentsPagina 19 www.t3campitalia.it morini@gammsystem.com
  • 25. jQuery4ContentsPagina 20 www.t3campitalia.it morini@gammsystem.com
  • 26. jQuery4ContentsPagina 21 www.t3campitalia.it morini@gammsystem.com
  • 27. jQuery4ContentsPagina 22 www.t3campitalia.it morini@gammsystem.com
  • 28. jQuery4ContentsPagina 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.addTypoScriptPagina 24 www.t3campitalia.it morini@gammsystem.com
  • 31. jQuery4ContentsPagina 25 www.t3campitalia.it morini@gammsystem.com
  • 32. jQuery4ContentsPagina 26 www.t3campitalia.it morini@gammsystem.com
  • 33. jQuery4ContentsPagina 27 www.t3campitalia.it morini@gammsystem.com
  • 34. jQuery4ContentsPagina 28 www.t3campitalia.it morini@gammsystem.com
  • 35. jQuery4ContentsPagina 29 www.t3campitalia.it morini@gammsystem.com
  • 36. jQuery4ContentsPagina 30 www.t3campitalia.it morini@gammsystem.com
  • 37. jQuery4ContentsPagina 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 BackendPagina 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 backendPagina 34 www.t3campitalia.it morini@gammsystem.com
  • 41. jQuery4ContentsPagina 35 www.t3campitalia.it morini@gammsystem.com
  • 42. jQuery4ContentsPagina 36 www.t3campitalia.it morini@gammsystem.com
  • 43. jQuery4ContentsPagina 37 www.t3campitalia.it morini@gammsystem.com
  • 44. jQuery4ContentsPagina 38 www.t3campitalia.it morini@gammsystem.com
  • 45. jQuery4ContentsPagina 39 www.t3campitalia.it morini@gammsystem.com
  • 46. jQuery4ContentsPagina 40 www.t3campitalia.it morini@gammsystem.com
  • 47. jQuery4ContentsPagina 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.htmlPagina 42 www.t3campitalia.it morini@gammsystem.com
  • 49. jQuery4ContentsMaurizio MoriniGamm SystemT3Camp Italia www.t3campitalia.itBologna, 28 e 29 Ottobre 2011 morini@gammsystem.com