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/