SlideShare une entreprise Scribd logo
1  sur  29
Télécharger pour lire hors ligne
Template multi-
        device per un sito in
        TYPO3
        Relatore: Nicola Della Marina.




T3Camp Italia                                 Bologna 28/29 Ottobre 2011
Il secondo evento italiano dedicato a Typo3
Nicola Della Marina

        Website Developer a WEBFORMAT
        Certificato TYPO3 Integrator dal 2009
        Da oltre 10 anni nello sviluppo di progetti web
        TYPO3 trainer con oltre 200 ore di
         formazione in aula
        Copertura di tutta la realizzazione del sito: template,
         configurazione delle estensioni e sviluppo di estensioni
         personalizzate

        Contacts:
            nicola.dellamarina@webformat.com
            www.webformat.com




Pag. 2                                                 http://www.t3campitalia.it/
Template multi-device con
                 TYPO3


    Cosa intendiamo con ‘device’




Pag. 3                           http://www.t3campitalia.it/
Un po’ di statistiche




Pag. 4                      http://www.t3campitalia.it/
Un po’ di statistiche




Pag. 5                      http://www.t3campitalia.it/
Un po’ di statistiche




Pag. 6                      http://www.t3campitalia.it/
«Voglio che il mio sito si veda bene anche su
           [iPhone|iPad|Smart TV]»
               Un problema di layout
               Un problema di contesto


Pag. 7                             http://www.t3campitalia.it/
Un problema di contesto




Pag. 8                   http://www.t3campitalia.it/
Cosa possiamo fare?



   • Creare un template ‘adattabile’
   • Rimuovere le immagini e i contenuti non necessari
   • Ingrandire le aree cliccabili
   • Ingrandire il testo piccolo
   • Gestire lo scrolling verticale
   • Ottimizzare le form
   • … e molto altro


Pag. 9                                http://www.t3campitalia.it/
Gli strumenti a nostra
                 disposizione


   • CSS 3
   • HTML5
   • Framework Javascript
   • TYPO3




Pag. 10                            http://www.t3campitalia.it/
Cosa possiamo fare




Pag. 11                   http://www.t3campitalia.it/
Cosa possiamo fare




Pag. 12                   http://www.t3campitalia.it/
Cosa possiamo fare




Pag. 13                   http://www.t3campitalia.it/
Il giusto CSS…


          … in base al media


                Handheld




Pag. 14                    http://www.t3campitalia.it/
Il giusto CSS…

          …in base alla risoluzione


              Media queries




Pag. 15                      http://www.t3campitalia.it/
Il giusto HTML…




          …per gestire gli ingrandimenti




Pag. 16                          http://www.t3campitalia.it/
Il giusto HTML…


          No                                Sì




Pag. 17                          http://www.t3campitalia.it/
Il giusto HTML…



                Viewport




Pag. 18                     http://www.t3campitalia.it/
Il giusto HTML



           I campi di input




Pag. 19                    http://www.t3campitalia.it/
Il giusto HTML



                            I campi di input
          (Estensioni che supportano i form HTML5)
   • Powermail
   • Formhandler




Pag. 20                                        http://www.t3campitalia.it/
Il giusto HTML



    Non tutti i device supportano tutte le tecnologie




Pag. 21                             http://www.t3campitalia.it/
Framework Javascript




Pag. 22                   http://www.t3campitalia.it/
Riconoscere il device…




                  WURFL




Pag. 23                    http://www.t3campitalia.it/
Ridefinire l’output



   Redirigere l’utente
   • Mobile Redirect (cwmobileredirect)
   Ridefinire il template
   • Typoscript conditions (useragent o userFunc)
   Ridefinire i contenuti
   • wfmobile



Pag. 24                                  http://www.t3campitalia.it/
Utilities




Pag. 25               http://www.t3campitalia.it/
Utilities



     Inserire una icona per i bookmark su iPhone




Pag. 26                     http://www.t3campitalia.it/
Utilities



   Per iniziare…
   • Mobify (mobify.com)
   • Wapple (wapple.net)




Pag. 27                        http://www.t3campitalia.it/
Come testare il sito



   • Emulatori online
   • Emulatori degli strumenti di sviluppo (SDK)
   • Comprare il device




Pag. 28                             http://www.t3campitalia.it/
Q&A




Pag. 29         http://www.t3campitalia.it/

Contenu connexe

Similaire à Template Multidevice con TYPO3

Pratica dopo il manuale Typoscript Reference
Pratica dopo il manuale Typoscript ReferencePratica dopo il manuale Typoscript Reference
Pratica dopo il manuale Typoscript ReferenceRoberto Torresani
 
Le 10 estensioni da tenere sempre a disposizione
Le 10 estensioni da tenere sempre a disposizioneLe 10 estensioni da tenere sempre a disposizione
Le 10 estensioni da tenere sempre a disposizioneNicola Della Marina
 
TYPO3 & Templavoila Framework
TYPO3 & Templavoila FrameworkTYPO3 & Templavoila Framework
TYPO3 & Templavoila Frameworkgammsystem
 
Fluid powered TYPO3
Fluid powered TYPO3Fluid powered TYPO3
Fluid powered TYPO3gammsystem
 
Fluid Powered TYPO3
Fluid Powered TYPO3Fluid Powered TYPO3
Fluid Powered TYPO3gammsystem
 
[TYPO3] Typoscript, questo sconosciuto
[TYPO3] Typoscript, questo sconosciuto[TYPO3] Typoscript, questo sconosciuto
[TYPO3] Typoscript, questo sconosciutoRoberto Torresani
 
Tesseract Project - T3Camp Italia 2011 Bologna
Tesseract Project - T3Camp Italia 2011 BolognaTesseract Project - T3Camp Italia 2011 Bologna
Tesseract Project - T3Camp Italia 2011 Bolognaalfredo furnò
 
Presentazione Progetto MemExpo
Presentazione Progetto MemExpoPresentazione Progetto MemExpo
Presentazione Progetto MemExpoMemExpo
 
Creatività senza limiti con TYPO3
Creatività senza limiti con TYPO3Creatività senza limiti con TYPO3
Creatività senza limiti con TYPO3William Sbarzaglia
 
TYPO3 strumento per differenti soluzioni: sito community e sito multi-domain
TYPO3 strumento per differenti soluzioni: sito community e sito multi-domainTYPO3 strumento per differenti soluzioni: sito community e sito multi-domain
TYPO3 strumento per differenti soluzioni: sito community e sito multi-domaingammsystem
 
TT tecnosistemi: cataloghi personalizzabili per dispositivi mobili
TT tecnosistemi: cataloghi personalizzabili per dispositivi mobiliTT tecnosistemi: cataloghi personalizzabili per dispositivi mobili
TT tecnosistemi: cataloghi personalizzabili per dispositivi mobiliTT Tecnosistemi s.p.a.
 
Apertura + Come presentare al Web la propria struttura ricettiva
Apertura + Come presentare al Web la propria struttura ricettivaApertura + Come presentare al Web la propria struttura ricettiva
Apertura + Come presentare al Web la propria struttura ricettivaGiorgio Taverniti
 
Realizzazione di un ChatBot sulla piattaforma Messenger di Facebook per l'inf...
Realizzazione di un ChatBot sulla piattaforma Messenger di Facebook per l'inf...Realizzazione di un ChatBot sulla piattaforma Messenger di Facebook per l'inf...
Realizzazione di un ChatBot sulla piattaforma Messenger di Facebook per l'inf...Xhoi Kerbizi
 
Sviluppo di applicazioni mobile con Titanium Appcelerator
Sviluppo di applicazioni mobile con Titanium AppceleratorSviluppo di applicazioni mobile con Titanium Appcelerator
Sviluppo di applicazioni mobile con Titanium Appceleratorextrategy
 
L'unione fa la forza: supporto, assistenza e partecipazione tra gli utilizzat...
L'unione fa la forza: supporto, assistenza e partecipazione tra gli utilizzat...L'unione fa la forza: supporto, assistenza e partecipazione tra gli utilizzat...
L'unione fa la forza: supporto, assistenza e partecipazione tra gli utilizzat...gammsystem
 
Intelligenza Artificiale per creare contenuti con testo immagine video
Intelligenza Artificiale per creare contenuti con testo immagine videoIntelligenza Artificiale per creare contenuti con testo immagine video
Intelligenza Artificiale per creare contenuti con testo immagine videoRoberto Marmo
 
[TYPO3] Gestione avanzata dei contenuti: versionig e workflow
[TYPO3] Gestione avanzata dei contenuti: versionig e workflow[TYPO3] Gestione avanzata dei contenuti: versionig e workflow
[TYPO3] Gestione avanzata dei contenuti: versionig e workflowRoberto Torresani
 
Professioni Web: come sopravvivere alla giungla digitale
Professioni Web: come sopravvivere alla giungla digitaleProfessioni Web: come sopravvivere alla giungla digitale
Professioni Web: come sopravvivere alla giungla digitaleRoberto Scano
 
IAB Forum 2006 - Miriam Bertoli, Search Marketing e Web 2.0
IAB Forum 2006 - Miriam Bertoli,  Search Marketing e Web 2.0IAB Forum 2006 - Miriam Bertoli,  Search Marketing e Web 2.0
IAB Forum 2006 - Miriam Bertoli, Search Marketing e Web 2.0TSW
 
MageDay 2013 - Magento e TYPO3: una soluzione integrata
MageDay 2013 - Magento e TYPO3: una soluzione integrataMageDay 2013 - Magento e TYPO3: una soluzione integrata
MageDay 2013 - Magento e TYPO3: una soluzione integrataMauro Lorenzutti
 

Similaire à Template Multidevice con TYPO3 (20)

Pratica dopo il manuale Typoscript Reference
Pratica dopo il manuale Typoscript ReferencePratica dopo il manuale Typoscript Reference
Pratica dopo il manuale Typoscript Reference
 
Le 10 estensioni da tenere sempre a disposizione
Le 10 estensioni da tenere sempre a disposizioneLe 10 estensioni da tenere sempre a disposizione
Le 10 estensioni da tenere sempre a disposizione
 
TYPO3 & Templavoila Framework
TYPO3 & Templavoila FrameworkTYPO3 & Templavoila Framework
TYPO3 & Templavoila Framework
 
Fluid powered TYPO3
Fluid powered TYPO3Fluid powered TYPO3
Fluid powered TYPO3
 
Fluid Powered TYPO3
Fluid Powered TYPO3Fluid Powered TYPO3
Fluid Powered TYPO3
 
[TYPO3] Typoscript, questo sconosciuto
[TYPO3] Typoscript, questo sconosciuto[TYPO3] Typoscript, questo sconosciuto
[TYPO3] Typoscript, questo sconosciuto
 
Tesseract Project - T3Camp Italia 2011 Bologna
Tesseract Project - T3Camp Italia 2011 BolognaTesseract Project - T3Camp Italia 2011 Bologna
Tesseract Project - T3Camp Italia 2011 Bologna
 
Presentazione Progetto MemExpo
Presentazione Progetto MemExpoPresentazione Progetto MemExpo
Presentazione Progetto MemExpo
 
Creatività senza limiti con TYPO3
Creatività senza limiti con TYPO3Creatività senza limiti con TYPO3
Creatività senza limiti con TYPO3
 
TYPO3 strumento per differenti soluzioni: sito community e sito multi-domain
TYPO3 strumento per differenti soluzioni: sito community e sito multi-domainTYPO3 strumento per differenti soluzioni: sito community e sito multi-domain
TYPO3 strumento per differenti soluzioni: sito community e sito multi-domain
 
TT tecnosistemi: cataloghi personalizzabili per dispositivi mobili
TT tecnosistemi: cataloghi personalizzabili per dispositivi mobiliTT tecnosistemi: cataloghi personalizzabili per dispositivi mobili
TT tecnosistemi: cataloghi personalizzabili per dispositivi mobili
 
Apertura + Come presentare al Web la propria struttura ricettiva
Apertura + Come presentare al Web la propria struttura ricettivaApertura + Come presentare al Web la propria struttura ricettiva
Apertura + Come presentare al Web la propria struttura ricettiva
 
Realizzazione di un ChatBot sulla piattaforma Messenger di Facebook per l'inf...
Realizzazione di un ChatBot sulla piattaforma Messenger di Facebook per l'inf...Realizzazione di un ChatBot sulla piattaforma Messenger di Facebook per l'inf...
Realizzazione di un ChatBot sulla piattaforma Messenger di Facebook per l'inf...
 
Sviluppo di applicazioni mobile con Titanium Appcelerator
Sviluppo di applicazioni mobile con Titanium AppceleratorSviluppo di applicazioni mobile con Titanium Appcelerator
Sviluppo di applicazioni mobile con Titanium Appcelerator
 
L'unione fa la forza: supporto, assistenza e partecipazione tra gli utilizzat...
L'unione fa la forza: supporto, assistenza e partecipazione tra gli utilizzat...L'unione fa la forza: supporto, assistenza e partecipazione tra gli utilizzat...
L'unione fa la forza: supporto, assistenza e partecipazione tra gli utilizzat...
 
Intelligenza Artificiale per creare contenuti con testo immagine video
Intelligenza Artificiale per creare contenuti con testo immagine videoIntelligenza Artificiale per creare contenuti con testo immagine video
Intelligenza Artificiale per creare contenuti con testo immagine video
 
[TYPO3] Gestione avanzata dei contenuti: versionig e workflow
[TYPO3] Gestione avanzata dei contenuti: versionig e workflow[TYPO3] Gestione avanzata dei contenuti: versionig e workflow
[TYPO3] Gestione avanzata dei contenuti: versionig e workflow
 
Professioni Web: come sopravvivere alla giungla digitale
Professioni Web: come sopravvivere alla giungla digitaleProfessioni Web: come sopravvivere alla giungla digitale
Professioni Web: come sopravvivere alla giungla digitale
 
IAB Forum 2006 - Miriam Bertoli, Search Marketing e Web 2.0
IAB Forum 2006 - Miriam Bertoli,  Search Marketing e Web 2.0IAB Forum 2006 - Miriam Bertoli,  Search Marketing e Web 2.0
IAB Forum 2006 - Miriam Bertoli, Search Marketing e Web 2.0
 
MageDay 2013 - Magento e TYPO3: una soluzione integrata
MageDay 2013 - Magento e TYPO3: una soluzione integrataMageDay 2013 - Magento e TYPO3: una soluzione integrata
MageDay 2013 - Magento e TYPO3: una soluzione integrata
 

Template Multidevice con TYPO3

  • 1. Template multi- device per un sito in TYPO3 Relatore: Nicola Della Marina. T3Camp Italia Bologna 28/29 Ottobre 2011 Il secondo evento italiano dedicato a Typo3
  • 2. Nicola Della Marina  Website Developer a WEBFORMAT  Certificato TYPO3 Integrator dal 2009  Da oltre 10 anni nello sviluppo di progetti web  TYPO3 trainer con oltre 200 ore di formazione in aula  Copertura di tutta la realizzazione del sito: template, configurazione delle estensioni e sviluppo di estensioni personalizzate  Contacts:  nicola.dellamarina@webformat.com  www.webformat.com Pag. 2 http://www.t3campitalia.it/
  • 3. Template multi-device con TYPO3 Cosa intendiamo con ‘device’ Pag. 3 http://www.t3campitalia.it/
  • 4. Un po’ di statistiche Pag. 4 http://www.t3campitalia.it/
  • 5. Un po’ di statistiche Pag. 5 http://www.t3campitalia.it/
  • 6. Un po’ di statistiche Pag. 6 http://www.t3campitalia.it/
  • 7. «Voglio che il mio sito si veda bene anche su [iPhone|iPad|Smart TV]» Un problema di layout Un problema di contesto Pag. 7 http://www.t3campitalia.it/
  • 8. Un problema di contesto Pag. 8 http://www.t3campitalia.it/
  • 9. Cosa possiamo fare? • Creare un template ‘adattabile’ • Rimuovere le immagini e i contenuti non necessari • Ingrandire le aree cliccabili • Ingrandire il testo piccolo • Gestire lo scrolling verticale • Ottimizzare le form • … e molto altro Pag. 9 http://www.t3campitalia.it/
  • 10. Gli strumenti a nostra disposizione • CSS 3 • HTML5 • Framework Javascript • TYPO3 Pag. 10 http://www.t3campitalia.it/
  • 11. Cosa possiamo fare Pag. 11 http://www.t3campitalia.it/
  • 12. Cosa possiamo fare Pag. 12 http://www.t3campitalia.it/
  • 13. Cosa possiamo fare Pag. 13 http://www.t3campitalia.it/
  • 14. Il giusto CSS… … in base al media Handheld Pag. 14 http://www.t3campitalia.it/
  • 15. Il giusto CSS… …in base alla risoluzione Media queries Pag. 15 http://www.t3campitalia.it/
  • 16. Il giusto HTML… …per gestire gli ingrandimenti Pag. 16 http://www.t3campitalia.it/
  • 17. Il giusto HTML… No Sì Pag. 17 http://www.t3campitalia.it/
  • 18. Il giusto HTML… Viewport Pag. 18 http://www.t3campitalia.it/
  • 19. Il giusto HTML I campi di input Pag. 19 http://www.t3campitalia.it/
  • 20. Il giusto HTML I campi di input (Estensioni che supportano i form HTML5) • Powermail • Formhandler Pag. 20 http://www.t3campitalia.it/
  • 21. Il giusto HTML Non tutti i device supportano tutte le tecnologie Pag. 21 http://www.t3campitalia.it/
  • 22. Framework Javascript Pag. 22 http://www.t3campitalia.it/
  • 23. Riconoscere il device… WURFL Pag. 23 http://www.t3campitalia.it/
  • 24. Ridefinire l’output Redirigere l’utente • Mobile Redirect (cwmobileredirect) Ridefinire il template • Typoscript conditions (useragent o userFunc) Ridefinire i contenuti • wfmobile Pag. 24 http://www.t3campitalia.it/
  • 25. Utilities Pag. 25 http://www.t3campitalia.it/
  • 26. Utilities Inserire una icona per i bookmark su iPhone Pag. 26 http://www.t3campitalia.it/
  • 27. Utilities Per iniziare… • Mobify (mobify.com) • Wapple (wapple.net) Pag. 27 http://www.t3campitalia.it/
  • 28. Come testare il sito • Emulatori online • Emulatori degli strumenti di sviluppo (SDK) • Comprare il device Pag. 28 http://www.t3campitalia.it/
  • 29. Q&A Pag. 29 http://www.t3campitalia.it/