Applicazioni mobile integrate a TYPO3
0 likes473 views
Come gestire i contenuti di un'App mobile attraverso il CMS TYPO3.
![Typoscript per il Men湛
lib.jsonMenu = HMENU
Modifico profondamente la lib.jsonMenu {
struttura del contenuto senza
toccare il codice PHP 1 = TMENU
1{
NO = 1
NO.stdWrap.cObject < lib.jsonItem
NO.doNotLinkIt = 1
NO.wrapItemAndSub = {|},
[...]
json = PAGE
json.typeNum = 55
json.config.disableAllHeaderCode = 1
json.10 < lib.jsonMenu](https://image.slidesharecdn.com/typo3smart-121120040329-phpapp01/85/Applicazioni-mobile-integrate-a-TYPO3-12-320.jpg)
![Men湛 in json http://www.webformat.com/?type=55
{
"items":[
{ "text":"Home",
"pageType":"normal",
"url":"/index.html?type=56",
"leaf":true,
"id":"112"
},
{ "text":"Soluzioni e Servizi",
"pageType":"normal",
"id":"396",
"items":[
{ "text":"Portali 2.0",
"pageType":"normal",
"url":"soluzioni-servizi-cms-crm-dm/realizzazione-portali-20/index.html?type=56",
"leaf":true,
"id":"397"
},
{ "text":"Intranet 2.0",
"pageType":"normal",
"url":"soluzioni-servizi-cms-crm-dm/intranet-20-aziende-pa-pmi/index.html?type=56",
"leaf":true,
"id":"663"
},
]
},
]
}](https://image.slidesharecdn.com/typo3smart-121120040329-phpapp01/85/Applicazioni-mobile-integrate-a-TYPO3-13-320.jpg)
Applicazioni mobile integrate a TYPO3
- 1. Mobile App Luca Peressini TYPO3 come gestore di contenuti destrutturati
- 2. Chi sono APP e mobile developer presso WEBFORMAT Luca Peressini luca.peressini@webformat.com Mi occupo di ricerca e sviluppo nell'ambito dell'integrazione tra TYPO3 e i dispositivi Smart Di cosa vi parler嘆... TYPO3 multicanale Vi mostrer嘆 i passaggi che ci hanno portato a realizzare un'applicazione multi-piattaforma i cui contenuti sono gestiti da TYPO3 e Magento.
- 3. L'era post PC Sempre pi湛 dispositivi e sempre pi湛 diversi Diversi schermi per visualizzare i contenuti Diversi sistemi di interazione (touch, 5way navigation ) Diversi contesti (tempo, scopo, luogo, attenzione e stato mentale) Sempre pi湛 netta la separazione tra backend e frontend (Non sar pi湛 il backend a generare la struttura di una pagina da inviare al client ma sar il client a chiedere la particolare risorsa di cui ha bisogno per comporre la propria interfaccia in funzione del dispositivo)
- 4. L'approccio classico Per permettere ad un sito di essere correttamente fruibile su smartphone e tablet solitamente si considerano i seguenti concetti: Layout per schermi piccoli Responsive web design Mobile first e filtraggio dei contenuti
- 5. Limiti Le caratteristiche dei dispositivi utilizzati non vengono sfruttate (gestures, geolocation, push notification, fotocamera ecc) L'interazione proposta non si integra con le convenzioni e le interfacce native dei vari SO La navigazione 竪 macchinosa causa i continui reload delle pagine Esperienza utente
- 6. TYPO3 竪 un gestore di contenuti !!! Html JSON Gestiamo i contenuti all'interno delle APP
- 7. Un approccio diverso Considerare TYPO3 come un contenitore unificato di contenuti disaggregati Realizzare un'applicazione ottimizzata per il dispositivo, che permetta all'utente un'interazione simile a quelle a cui 竪 abituato con il software nativo del sistema. Generare l'interfaccia lato client in funzione di: dimensione, orientamento, sistema di interazione. Utilizzo delle caratteristiche del dispositivo: Navigazione offline, geolocalizzazione, push notification ecc. Possibilit di distribuirla attraverso i market ufficiali di Apple e Google, con conseguenti vantaggi in termini di fidelizzazione utenti Presenza del Brand tra le app dell'utente Possibilit di comunicare attraverso il sistema delle notifiche
- 8. Webformat Mobile Integrazione con TYPO3
- 9. Webformat Mobile Un'applicazione che accede ai contenuti del sito webformat.com come fosse un'app nativa, con la possibilit di installarla su Android e IOS. Navigazione con caricamento asincrono delle risorse Navigazione offline parziale Link veloci e notifiche news Visualizzazione contenuti adattati alla piattaforma Interazione e interfaccia simili ad un app nativa Compatibile con IOS, Android, Blackbarry e presto Windows Phone
- 10. Webformat Mobile
- 11. Integrazione con TYPO3 Destrutturazione dei contenuti Meccanismo del typeNum www.miosito.com/index.php?type=typenum Utilizzato per ottenere i contenuti formattati in JSON (+facile da interpretare lato client, meno overhead rispetto a xml o html) Sono stati definiti 3 template typoscript Men湛 di navigazione Contenuto delle pagine News
- 12. Typoscript per il Men湛 lib.jsonMenu = HMENU Modifico profondamente la lib.jsonMenu { struttura del contenuto senza toccare il codice PHP 1 = TMENU 1{ NO = 1 NO.stdWrap.cObject < lib.jsonItem NO.doNotLinkIt = 1 NO.wrapItemAndSub = {|}, [...] json = PAGE json.typeNum = 55 json.config.disableAllHeaderCode = 1 json.10 < lib.jsonMenu
- 13. Men湛 in json http://www.webformat.com/?type=55 { "items":[ { "text":"Home", "pageType":"normal", "url":"/index.html?type=56", "leaf":true, "id":"112" }, { "text":"Soluzioni e Servizi", "pageType":"normal", "id":"396", "items":[ { "text":"Portali 2.0", "pageType":"normal", "url":"soluzioni-servizi-cms-crm-dm/realizzazione-portali-20/index.html?type=56", "leaf":true, "id":"397" }, { "text":"Intranet 2.0", "pageType":"normal", "url":"soluzioni-servizi-cms-crm-dm/intranet-20-aziende-pa-pmi/index.html?type=56", "leaf":true, "id":"663" }, ] }, ] }
- 14. Typoscript per il Contenuto Seleziona i singoli elementi di contenuto da visualizzare sull'app onlyContent = PAGE onlyContent.typeNum = 56 onlyContent.config.disableAllHeaderCode = 1 onlyContent.config.linkVars = type onlyContent.config.absRefPrefix = http://www.webformat.com/ onlyContent.cleanImageParameters = 1 onlyContent.10 = CONTENT onlyContent.10 { table = tt_content select { pidInList = this orderBy = sorting } }
- 15. WFmobile TYPO3 come gestore di contenuti multi-piattaforma Filtra gli elementi di contenuto e le pagine in funzione della tipologia di dispositivo riconosciuto Backend Estensione Nuova versione di WFmobile, con possibilit di distinguere tra Android, iPhone, iPad, SmartTV ...
- 16. WFmobile Tutto il men湛 del sito Solo i contenuti filtrati
- 17. Local Storage Navigazione offline grazie a ApplicationCache e LocalStorage Memorizzazione delle risorse offline Dataview Server Store online Store Offline LocalStorage
- 18. News e notifiche Il componente news si integra con una delle estensioni pi湛 famose di TYPO3, tt_news Notifica all'utente il numero di news non lette dall'ultimo accesso Scroll infinito delle notizie Aggiornamento nuove news
- 19. Magento Web App Integrazione con lo store online
- 20. Magento Mobile Un'applicazione che si collega a TYPO3 e Magento Funzionalit dell'applicazione: Contenuti TYPO3 Navigazione tra le categorie Magento Caricamento dinamico dei prodotti Gestione wishlist e carrello Login utente Navigazione su singola pagina Posizionamento utente e negozio pi湛 vicino
- 21. Demo
- 22. Demo
- 23. Connettore TYPO3 + Magento Connettore Elenco categorie dello Accesso al blog shop Visualizzazione Visualizzazione pagine interne prodotti Login Login utente Wishlist e Carrello sincronizzati tra i device Pagina prodotto Geolocalizzazione
- 24. Andiamo in TV Sviluppo dell'applicazione per Smart TV Samsung, LG e Google TV
- 25. Aspetti da considerare Pu嘆 diventare la quarta categoria di schermo da tenere obbligatoriamente in considerazione Sviluppo diverso rispetto al mobile Contesto Esperienza condivisa Dimensione e qualit dello schermo L'interazione con l'utente e 10 foot experience 5 way navigation (Dpad) Dimensione dello schermo, 3D, Audio di alta qualit Ecosistema di dispositivi
- 26. Multi-screen interaction http://services.google.com/fh/files/misc/multiscreenworld_final.pdf Secondo una ricerca il 77% degli utenti usa un altro device mentre guarda la tv Tutti i produttori hanno la propria app per controllare la tv da smartphone o tablet Sostanzialmente sono repliche dei vari telecomandi
- 27. Multi-screen interaction La vera sfida per il futuro 竪 avere un telecomando che presenti un'interfaccia adattabile all'applicazione con cui si vuole interagire. Quello che Microsoft chiama: SmartGlass
- 28. Conclusioni Interfaccia comune
- 29. Domande Luca Peressini luca.peressini@webformat.com