Click here to load reader

TYPO3 mobile

  • View
    589

  • Download
    0

Embed Size (px)

Text of TYPO3 mobile

  • Bologna 16/17 Novembre 2012 Zanhotel Europa Bologna

    TYPO3 Mobile

    Abramo Tesoro

    T3Camp Italia Il primo evento italiano dedicato a Typo3

  • Pag. 2 Pag. 2

    Presentazione relatore

    ! 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.

    Abramo Tesoro

    [email protected] - http://www.archicoop.it/

    T3CampItalia Bologna

    16-17 Novembre 2012

  • Pag. 3 Pag. 3

    Obiettivo della relazione

    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 lesperienza di navigazione dellutente.

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

    [email protected] - http://www.archicoop.it/

    T3CampItalia Bologna

    16-17 Novembre 2012

  • Pag. 4 Pag. 4

    Qualche Statistica

    ! 27,7 milioni gli utenti che si sono collegati a internet almeno una volta nellultimo 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%

    Utilizzo Mobile 2012 in Italia

    [email protected] - http://www.archicoop.it/

    T3CampItalia Bologna

    16-17 Novembre 2012

  • Pag. 5 Pag. 5

    Differenza di contesto!

    ! Costi e tempi della connessione

    ! Dimensioni ridotte dello schermo

    ! Assenza del mouse e degli eventi relativi

    ! Assenza della tastiera

    Differenze principali tra siti web per cellulari, tablet e desktop

    [email protected] - http://www.archicoop.it/

    T3CampItalia Bologna

    16-17 Novembre 2012

  • Pag. 6 Pag. 6

    Differenziare i Contenuti

    ! Evitare layout multi-column

    ! Design semplice e contenuti principali in evidenza

    ! Emulare il design delle app native

    Layout

    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)

    [email protected] - http://www.archicoop.it/

    T3CampItalia Bologna

    16-17 Novembre 2012

  • Pag. 7 Pag. 7

    Strumenti e Vantaggi

    ! HTML5, CSS 3

    ! JavaScript

    ! TYPO3

    ! TypoScript

    ! TemplaVoila ! Mobile Frameworks e Emulatori Mobile per il testing

    Strumenti a disposizione

    Vantaggi di TYPO3 ! Check del browser/device direttamente in TypoScript

    ! Template multipli per lo stesso contenuto

    [email protected] - http://www.archicoop.it/

    T3CampItalia Bologna

    16-17 Novembre 2012

  • Pag. 8 Pag. 8

    Differenti approcci

    Graceful Degradation

    Progressive enhancement

    [email protected] - http://www.archicoop.it/

    HTML e CSS differenziati

    T3CampItalia Bologna

    16-17 Novembre 2012

    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

    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

    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

  • Pag. 9 Pag. 9

    Implementazione Naturale

    Media Queries sul Media

    TypoScript page.includeCSS.file1 = templates/css/style.css

    page.includeCSS.file2 = templates/css/mobile.css page.includeCSS.file2.media = handheld

    [email protected] - http://www.archicoop.it/

    T3CampItalia Bologna

    16-17 Novembre 2012

  • Pag. 10 Pag. 10

    Implementazione su dimensioni dello schermo

  • Pag. 11 Pag. 11

    Direttamente in Typoscript

    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]

    Device Detecting HTML, CSS, Immagini, men

    [email protected] - http://www.archicoop.it/

    T3CampItalia Bologna

    16-17 Novembre 2012

  • Pag. 12 Pag. 12

    Direttamente in Typoscript

    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]

    Device Detecting TemplaVoila

    [email protected] - http://www.archicoop.it/

    T3CampItalia Bologna

    16-17 Novembre 2012

  • Pag. 13 Pag. 13

    Direttamente in Typoscript

    [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]

    UserFunc

    [email protected] - http://www.archicoop.it/

    T3CampItalia Bologna

    16-17 Novembre 2012

  • Pag. 14 Pag. 14

    Form - ottimizzazione

    ! 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 lutente utilizza le dita della mano e non il puntatore del mouse

    ! Per agevolare linserimento dellinput da parte dellutente possiamo utilizzare i nuovi tag HTML5 che utilizzando le modalit native o selezionano il tastierino appropriato al dato da inserire

    Ottimizzare le form

    [email protected] - http://www.archicoop.it/

    T3CampItalia Bologna

    16-17 Novembre 2012

  • Pag. 15 Pag. 15

    Form data e ora

    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

    ! datetime permette di selezionare una data e unora utilizzando la modalit nativa mobile o un date-picker su desktop sui browser aggiornati, sui vecchi browser funzioneranno come normali campi di input

    ! datetime-local permette di selezionare una data e unora localizzata utilizzando la modalit nativa mobile o un date-picker su desktop sui browser aggiornati, sui vecchi browser funzioneranno come normali campi di input

    [email protected] - http://www.archicoop.it/

    T3CampItalia Bologna

    16-17 Novembre 2012

  • Pag. 16 Pag. 16

    Form 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

    ! time permette di selezionare unora utilizzando la modalit nativa mobile o un selettore su desktop sui browser aggiornati, sui vecchi browser funzioneranno come normali campi di input

  • Pag. 17 Pag. 17

    Form numeri

    ! range permette di selezionare un valore numerico allinterno 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

    ! 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

    HTML5 tag input per valori numerici

    [email protected] - http://www.archicoop.it/

    T3CampItalia Bologna

    16-17 Novembre 2012

  • Pag. 18 Pag. 18

    Form 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 .)

    ! tel si presenta come un normale campo di input, su mobile fa comparire il tastierino numerico

    ! 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

    HTML5 tag input per email, telefono e url

    [email protected] - http://www.archicoop.it/

    T3CampItalia Bologna

    16-17 Novembre 2012

  • Pag. 19 Pag. 19

    Audio

    HTML5 tag audio

    [email protected] - http://www.archicoop.it/

    T3CampItalia Bologna

    16-17 Novembre 2012

    Per inserire il player nella pagina sufficiente scrivere:

    unica pecca il formato mp3 non supportato da tutti browser

  • Pag. 20 Pag. 20

    Video

    HTML5 tag video

    [email protected] - http://www.archicoop.it/

    T3CampItalia Bologna

    16-17 Novembre 2012

    Per inserire il player video nella pagina sufficiente scrivere:

    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:

  • Pag. 21 Pag. 21

    Risorse

    Qualche link utile

    [email protected] - http://www.archicoop.it/

    T3CampItalia Bologna

    16-17 Novembre 2012

    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/

  • Pag. 22 [email protected] - http://www.archicoop.it/ Pag. 22

    Fine

    Contatti:

    Abramo Tesoro

    [email protected]

    www.archicoop.it

    abramotesoro

    Grazie per lattenzione!

    T3CampItalia Bologna

    16-17 Novembre 2012