jQuery4ContentsMaurizio MoriniGamm SystemT3Camp Italia                   www.t3campitalia.itBologna, 28 e 29 Ottobre 2011 ...
jQuery4Contents                              Sono Maurizio Morini                 socio fondatore di Gamm System          ...
jQuery4Contents                        Premessa           I siti su cui lavoriamo hanno una forte           caratterizzazi...
jQuery4Contents                        Premessa           I siti su cui lavoriamo hanno una forte           caratterizzazi...
jQuery4Contents                        Premessa           Lanno scorso ho presentato unestensione che           permette d...
jQuery4Contents                         Premessa           Lanno scorso ho presentato unestensione che           permette ...
jQuery4Contents                           Premessa           Quello che spesso accade durante linserimento dei           c...
jQuery4Contents                           Premessa           Quello che spesso accade durante linserimento dei           c...
jQuery4Contents                 jQuery4Contents           Permette all’editore di selezionare nel Backend           TYPO3 ...
jQuery4Contents                 jQuery4Contents           Permette all’editore di selezionare nel Backend           TYPO3 ...
jQuery4Contents                    section_frame           Ogni contenuto TYPO3 ha un Frame selector           box (Indent...
jQuery4ContentsPagina 8                      www.t3campitalia.it                         morini@gammsystem.com
jQuery4Contents                    Page TSConfig           TCEFORM.tt_content.section_frame {               disabled = 0   ...
jQuery4Contents                TypoScript Template     tt_content.stdWrap.innerWrap.cObject {            10 = TEXT        ...
jQuery4Contents                TypoScript Template     tt_content.stdWrap.innerWrap.cObject {            10 = TEXT        ...
jQuery4ContentsPagina 11                       www.t3campitalia.it                          morini@gammsystem.com
jQuery4ContentsPagina 12                       www.t3campitalia.it                          morini@gammsystem.com
jQuery4ContentsPagina 13                       www.t3campitalia.it                          morini@gammsystem.com
jQuery4ContentsPagina 14                       www.t3campitalia.it                          morini@gammsystem.com
jQuery4ContentsPagina 15                       www.t3campitalia.it                          morini@gammsystem.com
jQuery4ContentsPagina 16                       www.t3campitalia.it                          morini@gammsystem.com
jQuery4ContentsPagina 17                       www.t3campitalia.it                          morini@gammsystem.com
jQuery4Contents              Creazione estensione            • creazione estensione con il Kickstarter wizard            •...
jQuery4ContentsPagina 19                       www.t3campitalia.it                          morini@gammsystem.com
jQuery4ContentsPagina 20                       www.t3campitalia.it                          morini@gammsystem.com
jQuery4ContentsPagina 21                       www.t3campitalia.it                          morini@gammsystem.com
jQuery4ContentsPagina 22                       www.t3campitalia.it                          morini@gammsystem.com
jQuery4ContentsPagina 23                       www.t3campitalia.it                          morini@gammsystem.com
jQuery4Contents                  ext_localconf.php            E’ il file di configurazione dell’estensione per la           ...
jQuery4Contents                  ext_localconf.php            E’ il file di configurazione dell’estensione per la           ...
jQuery4ContentsPagina 25                       www.t3campitalia.it                          morini@gammsystem.com
jQuery4ContentsPagina 26                       www.t3campitalia.it                          morini@gammsystem.com
jQuery4ContentsPagina 27                       www.t3campitalia.it                          morini@gammsystem.com
jQuery4ContentsPagina 28                       www.t3campitalia.it                          morini@gammsystem.com
jQuery4ContentsPagina 29                       www.t3campitalia.it                          morini@gammsystem.com
jQuery4ContentsPagina 30                       www.t3campitalia.it                          morini@gammsystem.com
jQuery4ContentsPagina 31                       www.t3campitalia.it                          morini@gammsystem.com
jQuery4Contents            Creazione estensione 2            • implementare una scrollbar jQuery all’interno             d...
jQuery4Contents                     ext_tables.sql      CREATE TABLE tt_content (           tx_jq4t3camp_width int(4) DEFA...
jQuery4Contents                     ext_tables.php            E’ il file di configurazione dell’estensione per la           ...
jQuery4ContentsPagina 35                       www.t3campitalia.it                          morini@gammsystem.com
jQuery4ContentsPagina 36                       www.t3campitalia.it                          morini@gammsystem.com
jQuery4ContentsPagina 37                       www.t3campitalia.it                          morini@gammsystem.com
jQuery4ContentsPagina 38                       www.t3campitalia.it                          morini@gammsystem.com
jQuery4ContentsPagina 39                       www.t3campitalia.it                          morini@gammsystem.com
jQuery4ContentsPagina 40                       www.t3campitalia.it                          morini@gammsystem.com
jQuery4ContentsPagina 41                       www.t3campitalia.it                          morini@gammsystem.com
jQuery4Contents                                    Riferimenti        Personalizzazione section_frame:        http://float-...
jQuery4ContentsMaurizio MoriniGamm SystemT3Camp Italia                   www.t3campitalia.itBologna, 28 e 29 Ottobre 2011 ...
Upcoming SlideShare
Loading in...5
×

T3camp 2011 jquery4contents

407

Published on

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.

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
407
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

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
  • T3camp 2011 jquery4contents

    1. 1. jQuery4ContentsMaurizio MoriniGamm SystemT3Camp Italia www.t3campitalia.itBologna, 28 e 29 Ottobre 2011 morini@gammsystem.com
    2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 12. jQuery4ContentsPagina 8 www.t3campitalia.it morini@gammsystem.com
    13. 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. 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. 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. 16. jQuery4ContentsPagina 11 www.t3campitalia.it morini@gammsystem.com
    17. 17. jQuery4ContentsPagina 12 www.t3campitalia.it morini@gammsystem.com
    18. 18. jQuery4ContentsPagina 13 www.t3campitalia.it morini@gammsystem.com
    19. 19. jQuery4ContentsPagina 14 www.t3campitalia.it morini@gammsystem.com
    20. 20. jQuery4ContentsPagina 15 www.t3campitalia.it morini@gammsystem.com
    21. 21. jQuery4ContentsPagina 16 www.t3campitalia.it morini@gammsystem.com
    22. 22. jQuery4ContentsPagina 17 www.t3campitalia.it morini@gammsystem.com
    23. 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. 24. jQuery4ContentsPagina 19 www.t3campitalia.it morini@gammsystem.com
    25. 25. jQuery4ContentsPagina 20 www.t3campitalia.it morini@gammsystem.com
    26. 26. jQuery4ContentsPagina 21 www.t3campitalia.it morini@gammsystem.com
    27. 27. jQuery4ContentsPagina 22 www.t3campitalia.it morini@gammsystem.com
    28. 28. jQuery4ContentsPagina 23 www.t3campitalia.it morini@gammsystem.com
    29. 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. 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. 31. jQuery4ContentsPagina 25 www.t3campitalia.it morini@gammsystem.com
    32. 32. jQuery4ContentsPagina 26 www.t3campitalia.it morini@gammsystem.com
    33. 33. jQuery4ContentsPagina 27 www.t3campitalia.it morini@gammsystem.com
    34. 34. jQuery4ContentsPagina 28 www.t3campitalia.it morini@gammsystem.com
    35. 35. jQuery4ContentsPagina 29 www.t3campitalia.it morini@gammsystem.com
    36. 36. jQuery4ContentsPagina 30 www.t3campitalia.it morini@gammsystem.com
    37. 37. jQuery4ContentsPagina 31 www.t3campitalia.it morini@gammsystem.com
    38. 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. 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. 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. 41. jQuery4ContentsPagina 35 www.t3campitalia.it morini@gammsystem.com
    42. 42. jQuery4ContentsPagina 36 www.t3campitalia.it morini@gammsystem.com
    43. 43. jQuery4ContentsPagina 37 www.t3campitalia.it morini@gammsystem.com
    44. 44. jQuery4ContentsPagina 38 www.t3campitalia.it morini@gammsystem.com
    45. 45. jQuery4ContentsPagina 39 www.t3campitalia.it morini@gammsystem.com
    46. 46. jQuery4ContentsPagina 40 www.t3campitalia.it morini@gammsystem.com
    47. 47. jQuery4ContentsPagina 41 www.t3campitalia.it morini@gammsystem.com
    48. 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. 49. jQuery4ContentsMaurizio MoriniGamm SystemT3Camp Italia www.t3campitalia.itBologna, 28 e 29 Ottobre 2011 morini@gammsystem.com
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×