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

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: nicola.dellamarina@webformat.com

www.webformat.com

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

Pag. 3

Template multi-device con TYPO3

Cosa intendiamo con ‘device’

Pag. 4

Un po’ di statistiche

http://www.t3campitalia.it/

Pag. 5

Un po’ di statistiche

http://www.t3campitalia.it/

Pag. 6

Un po’ di statistiche

http://www.t3campitalia.it/

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

Pag. 8

Un problema di contesto

http://www.t3campitalia.it/

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/

Pag. 10

Gli strumenti a nostra disposizione

• CSS 3

• HTML5

• Framework Javascript

• TYPO3

http://www.t3campitalia.it/

Pag. 11

Cosa possiamo fare

http://www.t3campitalia.it/

Pag. 12

Cosa possiamo fare

http://www.t3campitalia.it/

Pag. 13

Cosa possiamo fare

http://www.t3campitalia.it/

Pag. 14

Il giusto CSS…

http://www.t3campitalia.it/

… in base al media

Handheld

Pag. 15

Il giusto CSS…

…in base alla risoluzione

http://www.t3campitalia.it/

Media queries

Pag. 16

Il giusto HTML…

…per gestire gli ingrandimenti

http://www.t3campitalia.it/

Pag. 17

Il giusto HTML…

http://www.t3campitalia.it/

Sì No

Pag. 18

Il giusto HTML…

Viewport

http://www.t3campitalia.it/

Pag. 19

Il giusto HTML

http://www.t3campitalia.it/

I campi di input

Pag. 20

Il giusto HTML

http://www.t3campitalia.it/

I campi di input

• Powermail

• Formhandler

(Estensioni che supportano i form HTML5)

Pag. 21

Il giusto HTML

http://www.t3campitalia.it/

Non tutti i device supportano tutte le tecnologie

Pag. 22

Framework Javascript

http://www.t3campitalia.it/

Pag. 23

Riconoscere il device…

http://www.t3campitalia.it/

WURFL

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/

Pag. 25

Utilities

http://www.t3campitalia.it/

Pag. 26

Utilities

http://www.t3campitalia.it/

Inserire una icona per i bookmark su iPhone

Pag. 27

Utilities

Per iniziare…

• Mobify (mobify.com)

• Wapple (wapple.net)

http://www.t3campitalia.it/

Pag. 28

Come testare il sito

• Emulatori online

• Emulatori degli strumenti di sviluppo (SDK)

• Comprare il device

http://www.t3campitalia.it/

Pag. 29

Q&A

http://www.t3campitalia.it/