Template Multidevice con TYPO3
-
Upload
nicola-della-marina -
Category
Documents
-
view
1.120 -
download
1
description
Transcript of Template Multidevice con TYPO3
![Page 1: Template Multidevice con TYPO3](https://reader034.fdocument.pub/reader034/viewer/2022051313/5484bb0ab4af9fa00d8b4cb8/html5/thumbnails/1.jpg)
Bologna 28/29 Ottobre 2011
Template multi-device per un sito in TYPO3 Relatore: Nicola Della Marina.
T3Camp Italia Il secondo evento italiano dedicato a Typo3
![Page 2: Template Multidevice con TYPO3](https://reader034.fdocument.pub/reader034/viewer/2022051313/5484bb0ab4af9fa00d8b4cb8/html5/thumbnails/2.jpg)
Pag. 2 http://www.t3campitalia.it/
Pag. 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: [email protected]
www.webformat.com
![Page 3: Template Multidevice con TYPO3](https://reader034.fdocument.pub/reader034/viewer/2022051313/5484bb0ab4af9fa00d8b4cb8/html5/thumbnails/3.jpg)
Pag. 3 http://www.t3campitalia.it/
Pag. 3
Template multi-device con TYPO3
Cosa intendiamo con ‘device’
![Page 4: Template Multidevice con TYPO3](https://reader034.fdocument.pub/reader034/viewer/2022051313/5484bb0ab4af9fa00d8b4cb8/html5/thumbnails/4.jpg)
Pag. 4
Un po’ di statistiche
http://www.t3campitalia.it/
![Page 5: Template Multidevice con TYPO3](https://reader034.fdocument.pub/reader034/viewer/2022051313/5484bb0ab4af9fa00d8b4cb8/html5/thumbnails/5.jpg)
Pag. 5
Un po’ di statistiche
http://www.t3campitalia.it/
![Page 6: Template Multidevice con TYPO3](https://reader034.fdocument.pub/reader034/viewer/2022051313/5484bb0ab4af9fa00d8b4cb8/html5/thumbnails/6.jpg)
Pag. 6
Un po’ di statistiche
http://www.t3campitalia.it/
![Page 7: Template Multidevice con TYPO3](https://reader034.fdocument.pub/reader034/viewer/2022051313/5484bb0ab4af9fa00d8b4cb8/html5/thumbnails/7.jpg)
Pag. 7 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
![Page 8: Template Multidevice con TYPO3](https://reader034.fdocument.pub/reader034/viewer/2022051313/5484bb0ab4af9fa00d8b4cb8/html5/thumbnails/8.jpg)
Pag. 8
Un problema di contesto
http://www.t3campitalia.it/
![Page 9: Template Multidevice con TYPO3](https://reader034.fdocument.pub/reader034/viewer/2022051313/5484bb0ab4af9fa00d8b4cb8/html5/thumbnails/9.jpg)
Pag. 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
http://www.t3campitalia.it/
![Page 10: Template Multidevice con TYPO3](https://reader034.fdocument.pub/reader034/viewer/2022051313/5484bb0ab4af9fa00d8b4cb8/html5/thumbnails/10.jpg)
Pag. 10
Gli strumenti a nostra disposizione
• CSS 3
• HTML5
• Framework Javascript
• TYPO3
http://www.t3campitalia.it/
![Page 11: Template Multidevice con TYPO3](https://reader034.fdocument.pub/reader034/viewer/2022051313/5484bb0ab4af9fa00d8b4cb8/html5/thumbnails/11.jpg)
Pag. 11
Cosa possiamo fare
http://www.t3campitalia.it/
![Page 12: Template Multidevice con TYPO3](https://reader034.fdocument.pub/reader034/viewer/2022051313/5484bb0ab4af9fa00d8b4cb8/html5/thumbnails/12.jpg)
Pag. 12
Cosa possiamo fare
http://www.t3campitalia.it/
![Page 13: Template Multidevice con TYPO3](https://reader034.fdocument.pub/reader034/viewer/2022051313/5484bb0ab4af9fa00d8b4cb8/html5/thumbnails/13.jpg)
Pag. 13
Cosa possiamo fare
http://www.t3campitalia.it/
![Page 14: Template Multidevice con TYPO3](https://reader034.fdocument.pub/reader034/viewer/2022051313/5484bb0ab4af9fa00d8b4cb8/html5/thumbnails/14.jpg)
Pag. 14
Il giusto CSS…
http://www.t3campitalia.it/
… in base al media
Handheld
![Page 15: Template Multidevice con TYPO3](https://reader034.fdocument.pub/reader034/viewer/2022051313/5484bb0ab4af9fa00d8b4cb8/html5/thumbnails/15.jpg)
Pag. 15
Il giusto CSS…
…in base alla risoluzione
http://www.t3campitalia.it/
Media queries
![Page 16: Template Multidevice con TYPO3](https://reader034.fdocument.pub/reader034/viewer/2022051313/5484bb0ab4af9fa00d8b4cb8/html5/thumbnails/16.jpg)
Pag. 16
Il giusto HTML…
…per gestire gli ingrandimenti
http://www.t3campitalia.it/
![Page 17: Template Multidevice con TYPO3](https://reader034.fdocument.pub/reader034/viewer/2022051313/5484bb0ab4af9fa00d8b4cb8/html5/thumbnails/17.jpg)
Pag. 17
Il giusto HTML…
http://www.t3campitalia.it/
Sì No
![Page 18: Template Multidevice con TYPO3](https://reader034.fdocument.pub/reader034/viewer/2022051313/5484bb0ab4af9fa00d8b4cb8/html5/thumbnails/18.jpg)
Pag. 18
Il giusto HTML…
Viewport
http://www.t3campitalia.it/
![Page 19: Template Multidevice con TYPO3](https://reader034.fdocument.pub/reader034/viewer/2022051313/5484bb0ab4af9fa00d8b4cb8/html5/thumbnails/19.jpg)
Pag. 19
Il giusto HTML
http://www.t3campitalia.it/
I campi di input
![Page 20: Template Multidevice con TYPO3](https://reader034.fdocument.pub/reader034/viewer/2022051313/5484bb0ab4af9fa00d8b4cb8/html5/thumbnails/20.jpg)
Pag. 20
Il giusto HTML
http://www.t3campitalia.it/
I campi di input
• Powermail
• Formhandler
(Estensioni che supportano i form HTML5)
![Page 21: Template Multidevice con TYPO3](https://reader034.fdocument.pub/reader034/viewer/2022051313/5484bb0ab4af9fa00d8b4cb8/html5/thumbnails/21.jpg)
Pag. 21
Il giusto HTML
http://www.t3campitalia.it/
Non tutti i device supportano tutte le tecnologie
![Page 22: Template Multidevice con TYPO3](https://reader034.fdocument.pub/reader034/viewer/2022051313/5484bb0ab4af9fa00d8b4cb8/html5/thumbnails/22.jpg)
Pag. 22
Framework Javascript
http://www.t3campitalia.it/
![Page 23: Template Multidevice con TYPO3](https://reader034.fdocument.pub/reader034/viewer/2022051313/5484bb0ab4af9fa00d8b4cb8/html5/thumbnails/23.jpg)
Pag. 23
Riconoscere il device…
http://www.t3campitalia.it/
WURFL
![Page 24: Template Multidevice con TYPO3](https://reader034.fdocument.pub/reader034/viewer/2022051313/5484bb0ab4af9fa00d8b4cb8/html5/thumbnails/24.jpg)
Pag. 24
Ridefinire l’output
Redirigere l’utente
• Mobile Redirect (cwmobileredirect)
Ridefinire il template
• Typoscript conditions (useragent o userFunc)
Ridefinire i contenuti
• wfmobile
http://www.t3campitalia.it/
![Page 25: Template Multidevice con TYPO3](https://reader034.fdocument.pub/reader034/viewer/2022051313/5484bb0ab4af9fa00d8b4cb8/html5/thumbnails/25.jpg)
Pag. 25
Utilities
http://www.t3campitalia.it/
![Page 26: Template Multidevice con TYPO3](https://reader034.fdocument.pub/reader034/viewer/2022051313/5484bb0ab4af9fa00d8b4cb8/html5/thumbnails/26.jpg)
Pag. 26
Utilities
http://www.t3campitalia.it/
Inserire una icona per i bookmark su iPhone
![Page 27: Template Multidevice con TYPO3](https://reader034.fdocument.pub/reader034/viewer/2022051313/5484bb0ab4af9fa00d8b4cb8/html5/thumbnails/27.jpg)
Pag. 27
Utilities
Per iniziare…
• Mobify (mobify.com)
• Wapple (wapple.net)
http://www.t3campitalia.it/
![Page 28: Template Multidevice con TYPO3](https://reader034.fdocument.pub/reader034/viewer/2022051313/5484bb0ab4af9fa00d8b4cb8/html5/thumbnails/28.jpg)
Pag. 28
Come testare il sito
• Emulatori online
• Emulatori degli strumenti di sviluppo (SDK)
• Comprare il device
http://www.t3campitalia.it/
![Page 29: Template Multidevice con TYPO3](https://reader034.fdocument.pub/reader034/viewer/2022051313/5484bb0ab4af9fa00d8b4cb8/html5/thumbnails/29.jpg)
Pag. 29
Q&A
http://www.t3campitalia.it/