Template Multidevice con TYPO3

1,053 views

Published on

T3CAMP Italia 2011: Esempi e soluzioni per creare in TYPO3 dei layout che possano adattarsi a device con diverse dimensioni, risoluzioni, interfacce ecc... Con particolare attenzione ai dispositivi mobile.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,053
On SlideShare
0
From Embeds
0
Number of Embeds
46
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Template Multidevice con TYPO3

  1. 1. Template multi- device per un sito in TYPO3 Relatore: Nicola Della Marina.T3Camp Italia Bologna 28/29 Ottobre 2011Il secondo evento italiano dedicato a Typo3
  2. 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.comPag. 2 http://www.t3campitalia.it/
  3. 3. Template multi-device con TYPO3 Cosa intendiamo con ‘device’Pag. 3 http://www.t3campitalia.it/
  4. 4. Un po’ di statistichePag. 4 http://www.t3campitalia.it/
  5. 5. Un po’ di statistichePag. 5 http://www.t3campitalia.it/
  6. 6. Un po’ di statistichePag. 6 http://www.t3campitalia.it/
  7. 7. «Voglio che il mio sito si veda bene anche su [iPhone|iPad|Smart TV]» Un problema di layout Un problema di contestoPag. 7 http://www.t3campitalia.it/
  8. 8. Un problema di contestoPag. 8 http://www.t3campitalia.it/
  9. 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 altroPag. 9 http://www.t3campitalia.it/
  10. 10. Gli strumenti a nostra disposizione • CSS 3 • HTML5 • Framework Javascript • TYPO3Pag. 10 http://www.t3campitalia.it/
  11. 11. Cosa possiamo farePag. 11 http://www.t3campitalia.it/
  12. 12. Cosa possiamo farePag. 12 http://www.t3campitalia.it/
  13. 13. Cosa possiamo farePag. 13 http://www.t3campitalia.it/
  14. 14. Il giusto CSS… … in base al media HandheldPag. 14 http://www.t3campitalia.it/
  15. 15. Il giusto CSS… …in base alla risoluzione Media queriesPag. 15 http://www.t3campitalia.it/
  16. 16. Il giusto HTML… …per gestire gli ingrandimentiPag. 16 http://www.t3campitalia.it/
  17. 17. Il giusto HTML… No SìPag. 17 http://www.t3campitalia.it/
  18. 18. Il giusto HTML… ViewportPag. 18 http://www.t3campitalia.it/
  19. 19. Il giusto HTML I campi di inputPag. 19 http://www.t3campitalia.it/
  20. 20. Il giusto HTML I campi di input (Estensioni che supportano i form HTML5) • Powermail • FormhandlerPag. 20 http://www.t3campitalia.it/
  21. 21. Il giusto HTML Non tutti i device supportano tutte le tecnologiePag. 21 http://www.t3campitalia.it/
  22. 22. Framework JavascriptPag. 22 http://www.t3campitalia.it/
  23. 23. Riconoscere il device… WURFLPag. 23 http://www.t3campitalia.it/
  24. 24. Ridefinire l’output Redirigere l’utente • Mobile Redirect (cwmobileredirect) Ridefinire il template • Typoscript conditions (useragent o userFunc) Ridefinire i contenuti • wfmobilePag. 24 http://www.t3campitalia.it/
  25. 25. UtilitiesPag. 25 http://www.t3campitalia.it/
  26. 26. Utilities Inserire una icona per i bookmark su iPhonePag. 26 http://www.t3campitalia.it/
  27. 27. Utilities Per iniziare… • Mobify (mobify.com) • Wapple (wapple.net)Pag. 27 http://www.t3campitalia.it/
  28. 28. Come testare il sito • Emulatori online • Emulatori degli strumenti di sviluppo (SDK) • Comprare il devicePag. 28 http://www.t3campitalia.it/
  29. 29. Q&APag. 29 http://www.t3campitalia.it/

×