Your SlideShare is downloading. ×
TYPO3 mobile
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

TYPO3 mobile

566

Published on

Sviluppare un sito multidevice con TYPO3

Sviluppare un sito multidevice con TYPO3

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
566
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. TYPO3 Mobile Abramo TesoroT3Camp Italia Bologna 16/17 Novembre 2012Il primo evento italiano dedicato a Typo3 Zanhotel Europa Bologna
  • 2. 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/
  • 3. 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.Pag. 3 abramotesoro@archicoop.it - http://www.archicoop.it/
  • 4. 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%Pag. 4 abramotesoro@archicoop.it - http://www.archicoop.it/
  • 5. 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 tastieraPag. 5 abramotesoro@archicoop.it - http://www.archicoop.it/
  • 6. 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…)Pag. 6 abramotesoro@archicoop.it - http://www.archicoop.it/
  • 7. 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 contenutoPag. 7 abramotesoro@archicoop.it - http://www.archicoop.it/
  • 8. 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 immaginiPag. 8 abramotesoro@archicoop.it - http://www.archicoop.it/
  • 9. 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 = handheldPag. 9 abramotesoro@archicoop.it - http://www.archicoop.it/
  • 10. 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)Pag. 10 abramotesoro@archicoop.it - http://www.archicoop.it/
  • 11. 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]Pag. 11 abramotesoro@archicoop.it - http://www.archicoop.it/
  • 12. T3CampItalia Direttamente in Typoscript Bologna 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]Pag. 12 abramotesoro@archicoop.it - http://www.archicoop.it/
  • 13. T3CampItalia Direttamente in Typoscript Bologna 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]Pag. 13 abramotesoro@archicoop.it - http://www.archicoop.it/
  • 14. 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 inserirePag. 14 abramotesoro@archicoop.it - http://www.archicoop.it/
  • 15. 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”>Pag. 15 abramotesoro@archicoop.it - http://www.archicoop.it/
  • 16. 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”>Pag. 16 abramotesoro@archicoop.it - http://www.archicoop.it/
  • 17. 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">Pag. 17 abramotesoro@archicoop.it - http://www.archicoop.it/
  • 18. 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">Pag. 18 abramotesoro@archicoop.it - http://www.archicoop.it/
  • 19. 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>Pag. 19 abramotesoro@archicoop.it - http://www.archicoop.it/
  • 20. 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 laudio, 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>Pag. 20 abramotesoro@archicoop.it - http://www.archicoop.it/
  • 21. 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/Pag. 21 abramotesoro@archicoop.it - http://www.archicoop.it/
  • 22. T3CampItalia Fine Bologna 16-17 Novembre 2012 Grazie per l’attenzione! Contatti: Abramo Tesoro abramotesoro@archicoop.it www.archicoop.it abramotesoroPag. 22 abramotesoro@archicoop.it - http://www.archicoop.it/

×