TYPO3 mobile

TYPO3 Mobile

Abramo Tesoro

T3Camp Italia Bologna 16/17 Novembre 2012
Il primo evento italiano dedicato a Typo3 Zanhotel Europa Bologna

T3CampItalia
Presentazione relatore Bologna
16-17 Novembre 2012

Abramo Tesoro
! Dal 2005 si occupa di sviluppo software, progettazione e
consulenza web
! Nel 2005 assunto dalla Archimede Informatica Società
Cooperativa di cui è socio e membro del C.d.A.
! Dal 2007 ha cominciato a realizzare portali con TYPO3
! Nel 2012 ottiene le certificazioni W3C “Mobile Web and
Application Best Pratices” e “Mobile Web 2: Application”
! In Archimede Informatica si occupa di sviluppare
software, coordinare e gestire la realizzazione di
interfacce web.

Pag. 2 abramotesoro@archicoop.it - http://www.archicoop.it/

T3CampItalia
Obiettivo della relazione Bologna
16-17 Novembre 2012

Mostrare alcune tecniche di realizzazione di un sito
multipiattaforma adattabile alla versione Mobile

Vedremo le principali problematiche relative alla realizzazione di
siti web che abbiano una buona resa anche su piattaforme
mobile e alcune tecniche e strategie per migliorare l’esperienza
di navigazione dell’utente.


T3CampItalia
Qualche Statistica Bologna
16-17 Novembre 2012

Utilizzo Mobile 2012 in Italia
! 27,7 milioni gli utenti che si sono collegati a internet almeno una volta
nell’ultimo mese. (+7% sul 2011)
! 18 milioni di utenti italiani che utilizzano internet da supporti mobile
(+36% sul 2011)
! 2,5 milioni gli italiani che dichiarano di possedere un tablet
! 25 milioni sono gli italiani che posseggono uno smartphone, con una
percentuale di penetrazione che sfiora ormai il 50%


T3CampItalia
Differenza di contesto! Bologna
16-17 Novembre 2012

Differenze principali tra siti web per cellulari,
tablet e desktop
! Costi e tempi della connessione
! Dimensioni ridotte dello schermo
! Assenza del mouse e degli eventi relativi
! Assenza della tastiera


T3CampItalia
Differenziare i Contenuti Bologna
16-17 Novembre 2012

Layout ! Evitare layout multi-column
! Design semplice e contenuti principali in evidenza
! Emulare il design delle app native
Navigazione ! Ridurre al minimo le voci di menù ed evidenziare le
più utili in un contesto mobile con bottoni larghi
! Evitare drop-down menù ed effetti sul on hover
! Aggiungere un link back alla versione desktop

Contenuti ! Ridurre le immagini non necessarie e dimensioni/peso
di quelle da lasciare
! Colori di testi e sfondi ad alto contrasto
! Immagini di peso e dimensioni ridotte, sprites…
! Ottimizzare le form (html5, minimizzare i campi, aree
input grandi, autofilling helper…)


T3CampItalia
Strumenti e Vantaggi Bologna
16-17 Novembre 2012

Strumenti a disposizione
! HTML5, CSS 3
! JavaScript
! TYPO3
! TypoScript
! TemplaVoila
! Mobile Frameworks e Emulatori Mobile per il testing

Vantaggi di TYPO3
! Check del browser/device direttamente in TypoScript
! Template multipli per lo stesso contenuto


T3CampItalia
Differenti approcci Bologna
16-17 Novembre 2012

Graceful Degradation
Progettare per la situazione più completa e aggiornata senza abbandonare gli
utenti che ancora utilizzavano versioni di browser meno aggiornate o che
utilizzano device con risorse limitate

Progressive enhancement
Rovesciamento del paradigma: ci si concentra sui contenuti, dando la possibilità
a chiunque di accedere ed usufruire degli stessi, qualsiasi browser o device
si scelga, sia esso moderno, obsoleto o con risorse limitate

HTML e CSS differenziati
Con TYPO3 possiamo anche differenziare facilmente templating e contenuti, pur
utilizzando gli stessi contenuti di backend. Altri elementi che avremo
normalmente bisogno di differenziare saranno menù e immagini


Implementazione T3CampItalia
Bologna
Naturale 16-17 Novembre 2012

Media Queries sul Media
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet” href="css/mobile.css" media=“handheld" />

TypoScript
page.includeCSS.file1 = templates/css/style.css
page.includeCSS.file2 = templates/css/mobile.css
page.includeCSS.file2.media = handheld


Implementazione T3CampItalia
Bologna
su dimensioni dello schermo 16-17 Novembre 2012

Media Queries CSS
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="css/mobile.css" />
<link rel="stylesheet” href="css/600800.css" media="all and (min-width: 600px) and (max-width:
800px)" />
<link rel="stylesheet" href="css/800plus.css" media="all and (min-width: 801px)" />

TypoScript
page.meta.viewport = width=device-width, initial-scale=1.0
page.includeCSS.file1 = templates/css/mobile.css
page.includeCSS.file2 = templates/css/600800.css
page.includeCSS.file2.media = all and (min-width: 600px) and (max-width: 800px)
page.includeCSS.file3 = templates/css/800plus.css
page.includeCSS.file3.media = all and (min-width: 801px)


T3CampItalia
Direttamente in Typoscript Bologna
16-17 Novembre 2012

Device Detecting HTML, CSS, Immagini,
menù…
Possiamo con poche righe differenziare il foglio di stile e il template html,
il logo, ottimizzare i menù e le immagini
[useragent =*iPhone*]||[useragent =*iPod*]||[useragent =*Android*]||
[useragent=*OperaMini*]||[useragent =*BlackBerry*]
page.includeCSS.file = fileadmin/templates/css/mobile.css
template.file = fileadmin/templates/mobile.html
lib.logo.file = fileadmin/templates/images/logomobile.png
lib.navmenu.special.value = 172,173,177
lib.rightmenu.special.value = 175,176,178,179
tt_content.image.20.maxW = 320
config.baseUrl = http://m.urlsito.it/
[end]


T3CampItalia
16-17 Novembre 2012

Device Detecting
TemplaVoila

TSConfig:
TCEFORM.tx_templavoila_tmplobj.rendertype.addItems.mobile = Mobile version
Template TypoScript:
[useragent =*iPhone*]||[useragent =*iPod*]||[useragent =*Android*]||
[useragent=*OperaMini*]||[useragent =*BlackBerry*]
page.10.childTemplate = mobile
[end]


T3CampItalia
16-17 Novembre 2012

UserFunc
[userFunc = detect_mobile(appleDevices)] || [userFunc = detect_mobile
(androidDevices)]
page.includeCSS.file = fileadmin/templates/css/mobile.css
template.file = fileadmin/templates/mobile.html
lib.logo.file = fileadmin/templates/images/logomobile.png
[else]
page.includeCSS.file = templates/css/style.css
template.file = fileadmin/templates/template.html
lib.logo.file = fileadmin/templates/images/logo.png
[end]


T3CampItalia
Form - ottimizzazione Bologna
16-17 Novembre 2012

Ottimizzare le form
! Ridurre il numero di campi di input paginando eventualmente la
form se molto lunga
! Ingrandire i campi di testo perché siano funzionali al contesto
mobile tenendo in considerazione che l’utente utilizza le dita
della mano e non il puntatore del mouse
! Per agevolare l’inserimento dell’input da parte dell’utente
possiamo utilizzare i nuovi tag HTML5 che utilizzando le
modalità native o selezionano il tastierino appropriato al dato da
inserire


T3CampItalia
Form – data e ora Bologna
16-17 Novembre 2012

HTML5 nuovi tag input per la data
! date
permette di selezionare una data utilizzando la modalità nativa
mobile o un date-picker su desktop sui browser aggiornati,
sui vecchi browser funzioneranno come normali campi di input
<input type="date" name=“data”>
! datetime
permette di selezionare una data e un’ora utilizzando la modalità nativa mobile o un date-picker
su desktop sui browser aggiornati, sui vecchi browser funzioneranno come normali campi di
input
<input type="datetime" name=“data”>
! datetime-local
permette di selezionare una data e un’ora localizzata utilizzando la
modalità nativa mobile o un date-picker su desktop sui browser
aggiornati, sui vecchi browser funzioneranno come normali campi
di input
<input type="datetime-local" name=“data”>


T3CampItalia
Form – data e ora Bologna
16-17 Novembre 2012

HTML5 altri tag input per data e ora
! month
permette di selezionare una data (senza il giorno) utilizzando la modalità nativa mobile o un
date-picker su desktop sui browser aggiornati, sui vecchi browser funzioneranno come normali
campi di input
<input type="month" name=“data”>
! time
permette di selezionare un’ora utilizzando la modalità nativa mobile o un selettore su desktop sui
browser aggiornati, sui vecchi browser funzioneranno come normali campi di input
<input type=”time" name=“ora”>


T3CampItalia
Form – numeri Bologna
16-17 Novembre 2012

HTML5 tag input per valori numerici
! range
permette di selezionare un valore numerico all’interno di un intervallo prefissato utilizzando un
apposito selettore a scorrimento sia su mobile che su desktop sui browser aggiornati, sui vecchi
browser funzioneranno come normali campi di input
<input type="range" name=”numero" min="1" max="10”>
! number
su mobile fa comparire il tastierino numerico anziché quello testuale, su desktop sui browser
aggiornati permette di selezionare un numero con un selettore, sui vecchi browser
funzioneranno come normali campi di input
<input type="number" name=”numero" min="1" max=”10">


T3CampItalia
Form – email, telefono e url Bologna
16-17 Novembre 2012

HTML5 tag input per email, telefono e url
! email
si presenta come un normale campo di input, su mobile fa comparire il tastierino adatto (con la
@) su desktop sui browser aggiornati fornisce un minimo controllo formale sulla consistenza del
dato email (testa solo presenza di @ e .)
<input type="email" name="usremail">
! tel
si presenta come un normale campo di input, su mobile fa comparire
il tastierino numerico
<input type="tel" name=”telefono”>
! url
si presenta come un normale campo di input, su mobile fa comparire il tastierino apposito
(con / . .com e senza spazio), su desktop sui browser aggiornati aggiunge http:// se non presente
<input type="url" name="homepage">


T3CampItalia
Audio Bologna
16-17 Novembre 2012

HTML5 tag audio
Per inserire il player nella pagina è sufficiente scrivere:
<audio src="fileaudio.mp3" controls></audio>

unica pecca il formato mp3 non è supportato da tutti browser

<audio controls>
<source src="fileaudio.mp3" type="audio/mpeg"/>
<source src="fileaudio.ogg" type="audio/ogg"/>
</audio>


T3CampItalia
Video Bologna
16-17 Novembre 2012

HTML5 tag video
Per inserire il player video nella pagina è sufficiente scrivere:
<audio src="filevideo.mp4" controls></audio>

Anche in questo caso le cose non sono così semplici, come per l'audio, non
c’è ancora un formato standard comune a tutti i browser, per un supporto più
efficace è bene includere nel TAG video 2 o 3 codifiche del video ad esempio:
<video controls width="480" height="288" >
<source src=“filevideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src=“filevideo.ogv" type='video/ogg; codecs="theora, vorbis"' />
<source src=“filevideo.webm" type='video/webm; codecs="vp8, vorbis"'/>
</video>


T3CampItalia
Risorse Bologna
16-17 Novembre 2012

Qualche link utile
Compatibilità HTML5 dei browser mobile e tablet
http://mobilehtml5.org/

Generatori CSS3
http://css3generator.com/
http://www.colorzilla.com/gradient-editor/

Emulatori Mobile
http://www.mobilexweb.com/emulators
http://www.springbox.com/mobilizer/


T3CampItalia
Fine Bologna
16-17 Novembre 2012

Grazie per l’attenzione!

Contatti:
Abramo Tesoro
abramotesoro@archicoop.it
www.archicoop.it
abramotesoro


TYPO3 mobile

Recomendados

Recomendados

Más contenido relacionado

Similar a TYPO3 mobile

Similar a TYPO3 mobile (20)

TYPO3 mobile