Università degli Studi Mediterranea di Reggio Calabria

Transcript

1 Università degli Studi Mediterranea di Reggio Calabria Dipartimento di Ingegneria dell Informazione, delle Infrastrutture e dell Energia Sostenibile Corso di Laurea in Ingegneria delle Telecomunicazioni Tesi di Laurea Progettazione e implementazione di un app in HTML5 per la geolocalizzazione e il parsing di dati in tempo reale 1 Relatore Prof. Domenico Ursino Candidato Domenico Rodà Anno Accademico

2 INDICE Introduzione 1 Capitolo 1: HTML Cos è HTML Da HTML ad HTML Panoramica su HTML Dualismo HTML5-JavaScript 13 Capitolo 2: Evoluzione delle app per dispositivi mobile Perché gli smartphone hanno avuto successo Panoramica sui Cascade Style Sheets (CSS) HTML5 e CSS3:l era del responsive design API HTML5: E pur si muove! HTML5, ibrida o nativa? 30 Capitolo 3: Analisi dei requisiti e progettazione Analisi dei requisiti Definizione della mappa Progettazione dei mock-up Progettazione dei casi d uso 43 1 Capitolo 4: Implementazione Strumenti del mestiere Tecniche di sviluppo Esploriamo l app 65 Capitolo 5: Analisi del sistema e confronto con sistemi correlati Punti di forza e debolezza Confronto con sistemi correlati 72 Conclusioni 81 Bibliografia 83 Ringraziamenti 85 Domenico Rodà

3

4 INTRODUZIONE Rivoluzione francese, rivoluzione industriale rivoluzione mobile! Come identificare il Nuovo Millennio se non con il termine rivoluzione? Ad oggi, il mobile racchiude tutti quei servizi che fino a poco tempo fa erano confinati ad un PC connesso in Rete: navigazione Internet, , messaggistica istantanea, streaming audio-video, etc. E per quanto i primi notebook cominciavano a dar forma al concetto di trasportabilità di tali servizi, essi non lo legavano ancora pienamente al senso di comodità. La rivoluzione mobile, dunque, ha permesso di unire tali concetti e fonderli in un unico dispositivo tascabile, dalle dimensioni ridottissime e dalle elevate capacità di calcolo. Ciò è stato possibile grazie alla sempre crescente miniaturizzazione dei transistor e di tutto ciò che ne ruota attorno dal punto di vista circuitale, così come al crescente affinamento del processo produttivo del silicio, il semiconduttore per eccellenza nella realizzazione delle CPU. Senza tali evoluzioni in campo elettronico, non avremmo assistito alla rapida ascesa del mobile così come lo conosciamo oggi. Probabilmente avremmo ancora cellulari poco smart e dalle dimensioni non indifferenti. 1 Oltre gli smartphone, hanno avuto notevole successo i tablet che, di fatto, hanno spodestato la breve parentesi dei netbook, finiti rapidamente nel dimenticatoio dal punto di vista commerciale. Proprio in questo periodo si sta diffondendo anche una nuova categoria, quella degli smartwatch, orologi 2.0 che implementano alcune funzionalità, social e non, tipiche di uno smartphone. Ma cosa ha generato questa incredibile mole di dispositivi mobili? Intuite le potenzialità offerte dal punto di vista commerciale, più case produttrici sparse nel mondo si sono immesse nel mercato, cercando di ritagliarsi le fette più grosse dello stesso. L effetto iniziale è stato quello di assistere allo scontro fra i tre maggiori colossi informatici, Apple, Google e Microsoft, con i rispettivi ios mobile, Android e Windows Phone. Di recente, molte altre case hanno lanciato i propri sistemi operativi, in particolare Mozilla con il suo FirefoxOS, Samsung con Tizen e Ubuntu con UbuntuOS mobile. Si è passati, dunque, dall avere un numero preciso e ridotto di piattaforme ad una quantità di sistemi operativi che sembra destinata a crescere ulteriormente. E facile intuire, quindi, come un primo inconveniente derivi dalle difficoltà degli sviluppatori a stare al passo con i tempi, così facilmente mutevoli. Se, però, da un lato, il mobile ha abbracciato del tutto il Web, dall altro il Web sta abbracciando sempre più il mobile, fornendo una serie di strumenti e ambienti di sviluppo che ben si adattano ai dispositivi tascabili. Domenico Rodà 1

5 A tal proposito, per esempio, abbiamo assistito all evoluzione di HTML verso una precisa direzione, quella dell unificazione. Attualmente, gli strumenti offerti dalla sua ultima incarnazione, ovvero HTML5, assieme ai CSS3 e a JavaScript, tendono a fondere i servizi offerti dal Web con l ecosistema mobile. Ciò consente di realizzare applicazioni di tipo Web che siano compatibili con il maggior numero possibile di dispositivi mobili. Di conseguenza, riteniamo che le app in HTML5 possano venirci realmente incontro, poiché l adattamento alle singole piattaforme rappresenterebbe soltanto una minima parte dello sviluppo, mentre il resto dell implementazione avverrebbe in modo univoco, conferendo al tutto una certa universalità. In tal modo possiamo affiancare allo sviluppo nativo un approccio più blando, che richieda meno tempo per l implementazione e non necessiti di particolari ottimizzazioni. Tuttavia, riteniamo anche che le applicazioni Web pensate per il mobile non possano in alcun modo sostituire quelle native; piuttosto, esse servono a facilitare la vita degli sviluppatori nei casi in cui un app debba offrire servizi utili ad informare l utente in tempo reale. In situazioni simili la possibilità di unificare più piattaforme diventa salvifica. In questo contesto si colloca il lavoro oggetto della presente tesi. Essa si basa proprio sullo sviluppo di un applicazione realizzata con le tecniche del Web più recenti. L idea è quella di proporre un app dimostrativa che mostri le potenzialità di tale approccio, sfruttando in particolare, una serie di API che si interfaccino con la rete e offrano un servizio di geolocalizzazione. Nello specifico, il nostro sistema è stato adattato per piattaforme Android e, utilizzando Apache Cordova, è stata garantita la piena compatibilità a partire dalla Versione 2.2. L app consente di geolocalizzare un dispositivo mobile, utilizzando le API di Google Maps, effettuare la ricerca dei cinema presenti all interno di una città e visualizzarne i rispettivi film proiettati sul momento. Quest ultima funzionalità è stata realizzata mediante un parsing di dati in tempo reale, implementato, come vedremo, grazie ad una libreria specifica di Java. Inoltre, l app consente di individuare la posizione corrente di un utente e di calcolare il percorso che lo separa da un determinato cinema. Tale percorso viene restituito, sfruttando sempre le API di Google Maps, o sotto forma di indicazioni stradali testuali oppure direttamente su mappa. L efficienza delle API da noi utilizzate sta nell ottima integrazione con l intera applicazione, conferendo alla stessa uniformità e continuità. 2 Domenico Rodà

6 Un altro aspetto da noi curato è stato rivolto all utilizzo delle risorse di rete; in particolare, abbiamo improntato l app sulla leggerezza, garantendo una buona fruibilità dei contenuti a partire dalle connessioni 2G. Il segreto per la buona riuscita di un app in HTML5, infatti, risiede anche in un corretto utilizzo degli strumenti grafici. Abbiamo evitato di appesantire i contenuti introducendo animazioni grafiche particolari, mantenendo una certa semplicità. Abbiamo quindi rispettato le regole del Responsive Design, operando in modo tale che l app si adatti facilmente a schermi diversi tra loro in termini di dimensione (smartphone, tablet e PC). Per farlo, ci siamo serviti di nuove regole stilistiche introdotte dai CSS3. Per quanto riguarda l implementazione delle API, invece, abbiamo utilizzato il linguaggio JavaScript. La presente tesi è strutturata come di seguito specificato: 1 nel Capitolo 1 verrà presentata una panoramica su HTML e verrà illustrata la sua evoluzione fino ad HTML5; nel Capitolo 2 verranno proposti dei cenni su JavaScript e verranno esposti i fattori che hanno contribuito al successo degli smartphone; la parte inerente all analisi dei requisiti e alla progettazione verrà, invece, illustrata nel Capitolo 3; nel Capitolo 4 verranno descritti nel dettaglio gli strumenti e le tecniche di sviluppo utilizzati e verrà proposta una panoramica sull applicazione; il Capitolo 5, invece, si concentrerà sull analisi del sistema e proporrà un confronto con sistemi correlati; infine, verranno tratte le conclusioni e verrà dato uno sguardo ai possibili sviluppi futuri. Domenico Rodà 3

7 4 Domenico Rodà

8 1. HTML5 In questo primo capitolo verrà fatta una panoramica su HTML e le innovazioni apportate nel tempo, dalla versione 1.0 a quella che oggi rappresenta un nuovo ed importante step evolutivo al passo coi tempi. 1 Cos è HTML 2 Da HTML ad HTML5 3 Panoramica su HTML5 1 4 Dualismo HTML5- Javascript Domenico Rodà 5

9 COS E HTML In origine il Web era nato con lo scopo di fornire informazioni fruibili in modo semplice, immediato e strutturato. Le prime pagine Web oggi risulterebbero scarne rispetto agli standard attuali, con poche immagini e molto testo. Ecco, il testo si può dire fosse l unico protagonista del Web: migliaia e migliaia di stringhe testuali stampate su schermo e connesse tra loro mediante collegamenti ipertestuali e distribuite nelle diverse aree, o sezioni, di uno stesso sito Internet. Inizialmente, quindi, la struttura di un sito si presentava snella. Con l esigenza di scambiare informazioni in modo più rapido ed immediato nascevano, poi, i primissimi forum, che, col tempo, hanno dato vita alle cosiddette community. Il Web 2.0, almeno concettualmente, stava cominciando a prendere forma, ma la strada verso i social network ed un Web sempre più al servizio delle persone era ancora lunga. Alla base del Web 1.0 vi era la prima versione ufficiale del linguaggio di markup HTML. L acronimo stesso di HTML palesa fortemente quelle che erano le fondamenta del Web: HyperText Markup Language, appunto linguaggio a marcatori per ipertesti, la cui sintassi fu stabilita e resa standard dal W3C, il World Wide Web Consortium, nella prima metà degli anni Novanta. Col tempo HTML ha assunto un ruolo sempre più importante per il Web, vuoi per la sintassi semplice vuoi per la sua adattabilità e flessibilità. Vediamo un po più da vicino cos è esattamente HTML. Innanzitutto il suo obiettivo non è quello di eseguire codice; esso, infatti, non è un linguaggio di programmazione! HTML è un linguaggio di formattazione puro, che consente di organizzare il layout di una pagina Web. Il concetto alla base della sua sintassi è l elemento: titoli delle pagine, singoli paragrafi, tabelle, immagini, etc. Sono tutti elementi, individuati e racchiusi dai cosiddetti <tag>, o etichette, definendo così la struttura di una porzione di testo, nonché la relativa grafica. Possiamo dire quindi che ogni pagina Web rappresenta un documento HTML (o XHTML, simile al primo ma più rigido per riguarda l uso dei tag). 6 Domenico Rodà

10 Di seguito viene mostrato graficamente l esempio di una pagina strutturata in formato HTML. Come si può notare, la pagina presenta una struttura gerarchica semplice ed intuitiva. Si inizia dichiarando il DOCTY- PE e si prosegue definendo la parte relativa al titolo della pagina e alle informazioni di servizio (Title ed Head). Dopo di ciò viene dichiarato il BODY, che contiene sia le informazioni da visualizzare che le modalità secondo cui devono essere visualizzate: testo, immagini e video. Da notare che il tag <html> viene aperto subito dopo la dichiarazione del DOC- TYPE e chiuso soltanto alla fine: funge quindi da elemento padre che racchiude tutti quegli elementi che vengono poi visualizzati su schermo. Immaginiamo, quindi, che i nostri Browser, fino a qualche anno fa, non facevano altro che interpretare e tradurre milioni e milioni di documenti HTML/XHTML di questo tipo e lo fanno tuttora (sia chiaro), ma giusto con qualche novità. È fondamentale conoscere la struttura di un documento HTML e questi brevi cenni servono a gettare le basi per una comprensione più immediata delle nuove funzionalità introdotte negli anni, fino ad arrivare alla sua quinta incarnazione. Domenico Rodà 7

11 DA HTML AD HTML5 La nascita di HTML5, concettualmente parlando, non è così recente come può sembrare e la sua tendenza verso un approccio di tipo mobile è stata una naturale conseguenza, di pari passo con l arrivo dei primi dispositivi smart (smartphone, tablet et similia). Tutto comincia ufficialmente nel 2004, quando viene fondato il Web Hypertext Application Technology Working Group (WHATWG): come si può intuire, questo gruppo di ricerca nacque col preciso scopo di spingere il Web verso un approccio orientato alle applicazioni e non più al solo ipertesto. E il WHATWG nacque proprio in contrapposizione ad un altra scuola di pensiero, quella di XHTML2, che invece preferiva mantenere un profilo più basso e conservatore. Quest ultimo proponeva infatti regole ancora più rigide a livello sintattico, così rigide da dichiarare l assenza di retro-compatibilità nei confronti delle precedenti versioni di XHTML, generando non poche perplessità tra i più noti sviluppatori di browser. La diatriba tra i due gruppi di ricerca terminò quando il W3C decise finalmente di abbracciare in toto la filosofia del WHATWG: siamo ormai nel 2009 e, nel frattempo, viene standardizzata la quarta versione di HTML. Proprio HTML 4.0 comincia a svolgere il ruolo di filo conduttore tra quello che sarà HTML5 ed il suo antenato. Tuttavia, le esigenze di organizzare il Web in un certo modo hanno dato vita, paradossalmente, ad un mix tra lo stesso HTML4 e la sua controparte più rigida XHTML: è da questa pseudo-fusione che prende forma HTML5. 8 Domenico Rodà

12 La diatriba tra i due gruppi di ricerca terminò quando il W3C decise finalmente di abbracciare in toto la filosofia del WHATWG: siamo ormai nel 2009 e, nel frattempo, viene standardizzata la quarta versione di HTML. Proprio HTML 4.0 comincia a svolgere il ruolo di filo conduttore tra quello che sarà HTML5 ed il suo antenato. Tuttavia, le esigenze di organizzare il Web in un certo modo hanno dato vita, paradossalmente, ad un mix tra lo stesso HTML4 e la sua controparte più rigida XHTML: è da questa pseudo-fusione che prende forma HTML5. A questo punto non ci resta che vedere nel dettaglio cos è HTML5 e quali sono i suoi punti di forza. Domenico Rodà 9

13 PANORAMICA SU HTML5 Cos ha reso inevitabile il passaggio da HTML4/XHTML ad HTML5? In primis la necessità di rendere più flessibile e semplice la sintassi, soprattutto in vista della crescente diffusione di blog, testate giornalistiche di ogni specie e natura, nonché dei primi social network. L idea di racchiudere molti contenuti, soprattutto multimediali, avrebbe richiesto un notevole sforzo affinché questa risultasse fattibile e, al tempo stesso, complementare a forme di interazione più attive e complesse tra gli utenti. Da qui, e non solo, l esigenza di avere alla base un ecosistema facilmente manipolabile, dalla struttura solida, intuitiva e votata ad un organizzazione smart degli elementi su schermo. La sintassi di HTML5 si presenta da subito come un buon compromesso tra le specifiche più libertine di HTML4 e quelle più rigorose di XHTML, sposandole di fatto entrambe. In media stat virtus. Per fare un esempio pratico, possiamo mostrare alcuni casi in cui il concetto di tag visto pocanzi non rientra in schemi necessariamente rigidi ma, anzi, concede molta libertà al web developer. Prendiamo in considerazione un tag cosiddetto vuoto, nello specifico il tag <img>, relativo all inserimento delle immagini: utilizzando XHTML anche i tag vuoti devono essere chiusi per poter essere interpretati correttamente dal browser, mentre con HTML4 non era necessario. HTML5 sfrutta entrambe le convenzioni senza alcun limite. Possiamo, quindi, inserire un immagine aprendo e chiudendo il tag vuoto (<img src="immagine.png" alt="testo" /> ) oppure lasciandolo aperto (<img src="immagine.png" alt="testo" > ). In entrambi i casi i browser moderni non riconoscerebbero la differenza, interpretando correttamente sia la prima che la seconda dicitura. Un altra possibilità concessa da HTML5, restando in ambito puramente sintattico, è quella di scrivere i tag sia in minuscolo che in maiuscolo (con XHTML è obbligatorio l uso del minuscolo). Scrivere <img> o <IMG> non fa alcuna differenza; sta allo sviluppatore Web scegliere uno stile e mantenerlo tale al fine di conferire ordine, chiarezza e pulizia visiva al codice. 10 Domenico Rodà

14 Un caso particolare che ben evidenzia la flessibilità offerta da HTML5 è questo: <meta charset="utf-8"> <title> Titolo di prova </title> <p> questo è un paragrafo... <ol> <li>...e questo è un elemento di tipo lista </ol> Come si può notare, il codice contiene diversi elementi, in particolare un paragrafo e un elemento di tipo lista, aperti, rispettivamente, dai tag <p> e <li>. Di fatto, però, essi non vengono chiusi; questo perché contengono un singolo elemento ciascuno ed il browser è in grado di riconoscerne i rispettivi confini operativi, fintanto che l elemento successivo appartenga ad un altra categoria che rientri nelle specifiche di HTML5 e venga naturalmente dichiarato. Questa flessibilità si estende anche ad altre regole, per esempio quelle che consentono di dichiarare un attributo. Abbiamo a disposizione ben quattro modi diversi: 1) Vuoto (ad esempio, <input checked>, anziché <input checked= checked / >) 2) Senza virgolette (ad esempio, <div class=attributo>) 3) Apostrofato (ad esempio, <div class= attributo >) 4) Con virgolette (ad esempio, <div class= attributo >) In particolare, un attributo vuoto non ha bisogno che il suo valore venga esplicitato, ma basta il nome. Dal punto di vista semantico fin qui non sembrano esserci grossi stravolgimenti rispetto al passato. Tuttavia, ciò che rende ancora più flessibile HTML5 è l introduzione di nuovi tag semantici che, di fatto, hanno sostituito quelli un po più primitivi e poco efficienti. In passato, per esempio, l uso delle tabelle era all ordine del giorno, il che rendeva il codice pesante e poco efficiente. Anche le gerarchie degli elementi erano gestite in modo più rozzo e fortemente ancorato al concetto di sequenzialità e posizione. Oggi, invece, grazie alla presenza di tag quali <section>, <nav> ed <article>, è possibile strutturare in modo atomico ed organizzato il contenuto di una pagina HTML. Possiamo generare voci di menù e porzioni di testo in maniera definita e, soprattutto, più chiara e leggibile. Domenico Rodà 11

15 Esempio di pagina strutturata attraverso le specifiche HTLM5: <!DOCTYPE HTML> <html lang="it"> <head> </head> <body> <header> Contiene un titolo di testa </header> <nav> Contiene delle voci di menu </nav> <article> Contiene un messaggio (<h>, <p>, ecc.) </article> <article> Contiene un secondo messaggio </article> </body> </html> Tutti gli elementi contenuti nel body di questa pagina d esempio sono indipendenti tra loro, atomici e facilmente manipolabili. In passato avremmo avuto una sequenza di tag di tipo <div> e una serie di attributi class per distinguere le specifiche aree di appartenenza degli elementi. Se moltissimi siti Web oggi non risultano solo belli da vedere, ma anche ordinati e soprattutto leggibili è proprio grazie a queste innovazioni semantiche. 12 Domenico Rodà

16 DUALISMO HTML5-JAVASCRIPT Una delle caratteristiche più importanti di HTML5 è quella di poter integrare facilmente codice JavaScript. Standardizzato ufficialmente negli anni dallo European Computers Manifacturers Association (ECMA), e divenuto in seguito anche uno standard ISO, JavaScript è il più diffuso linguaggio di scripting per il Web. Ciò è da tenere in forte considerazione dal momento che tutte le funzioni che svolgiamo quotidianamente nel Web, più o meno complesse esse siano, sono scritte con questo linguaggio. Ad interpretarlo ci pensano, senza più tanti problemi ormai, i nostri browser, sebbene negli anni si è dovuti ricorrere ad espedienti per rendere JavaScript universalmente (o quasi) compatibile. Dunque i browser interpretano il codice, mentre HTML5 funge da vero e proprio contenitore. Anche prima funzionava così, ma l esigenza di sviluppare applicazioni Web sempre più complesse ha, di fatto, reso imprescindibile l integrazione di un linguaggio di scripting orientato agli oggetti e agli eventi, come appunto JavaScript, all interno dell ecosistema al quale ha dato vita HTML5. Anzi, si può dire che entrambi si siano diffusi ed evoluti di pari passo, proponendo servizi innovativi, efficienti ed eleganti. Manteniamo, ora, l attenzione, in linea generale, sull aspetto sintattico e vediamo come uno script può essere integrato all interno di una pagina HTML5. Con le specifiche precedenti era necessario dichiarare il tipo di attributo che il browser si accingeva ad interpretare: <script type="text/javascript" src="script.js"> </script> Oggi è opzionale e possiamo tranquillamente omettere l attributo type (addirittura, in passato, si usava un ulteriore attributo, language, divenuto obsoleto) e dichiarare all interno del tag <script> direttamente la sorgente dello script, contenente le funzioni ed i metodi JavaScript che vogliamo importare. Il codice risulta senz altro più snello: <script src="script.js"> </script> Il browser interpreterà implicitamente il tipo di elemento. Domenico Rodà 13

17 Conclusioni Questa, dunque, è un altra piccola semplificazione introdotta dalle nuove specifiche che, se vista nel quadro generale proposto fin qui, rafforza l idea di uno sviluppo per il Web tendenzialmente più semplice, a fronte di servizi più complessi. Come vedremo nel capitolo successivo, le API JavaScript, in particolare, sono diventate col tempo il motore pulsante di HTML5, consentendo agli sviluppatori un approccio quanto più universale possibile. Non soltanto, dunque, applicazioni rivolte all utenza PC Domenico Rodà

18 2. Evoluzione delle app per dispositivi mobili In questo secondo capitolo verranno descritti il percorso evolutivo intrapreso dalle app mobile ed i principali motivi che ne hanno accelerato la diffusione su larga scala. Inoltre, vi sarà un richiamo a quelle che sono le peculiarità delle app e le tecnologie, sia web sia native, che le contraddistinguono, con ulteriore approfondimento circa i vantaggi o gli svantaggi presenti in ciascuna di esse. 1 Perchè gli smartphone hanno avuto successo 2 Panoramica sui Cascade Style Sheets (CSS) 3 HTML5 e CSS3: l'era del Responsive Design 4 API HTML5: E pur si muove! 5 HTML5, ibrida o nativa? Domenico Rodà 15

19 PERCHÉ GLI SMARTPHONE HANNO AVUTO SUCCESSO Difficile riuscire a scriverlo in poche righe, ma possiamo provarci. Il termine smartphone è stato coniato ufficialmente nel 1997 dalla Ericsson, con il suo GS 88 Penelope. Ma l idea di realizzare un dispositivo mobile che unisse le tipiche funzioni di un telefono a quelle di un computer era già nell aria a partire dai primi anni Settanta. Tuttavia, è dai primissimi anni del Nuovo Millennio che quell aria comincia a respirarsi in modo sempre più concreto, di pari passo con l evoluzione delle reti cellulari, grazie all avvento di UMTS, fino ad arrivare agli attuali HSPA ed LTE. Fermandoci qui, sembrerebbe, dunque, che la diffusione degli smartphone sia unicamente legata all evoluzione stessa di queste tecnologie. Tuttavia, preferiremmo esporre un pensiero più ampio, che vada oltre le mere questioni tecniche e che coincida col nostro personalissimo pensiero a riguardo. Viviamo in un epoca che presenta due volti: uno di questi viene chiamato Era Digitale, l altro Medioevo Tecnologico. Naturalmente il primo contraddice il secondo. In quest ultimo decennio abbiamo assistito ad una crescita tecnologica controllata ma repentina e, raggiunto l apice, stiamo ora assistendo ad un collasso fisiologico, dettato non solo dalla crisi finanziaria globale, ma dalla saturazione stessa del mercato. Quando si parla di Medioevo Tecnologico, in linea di massima, ci si riferisce ad un progressivo indebolimento dell innovazione e della crescita. C è, però, un ulteriore aspetto che vorremmo approfondire ed è inerente al contesto socio-culturale all interno del quale stiamo vivendo. Abbiamo sì notato come il miglioramento dei servizi di rete cellulare abbia accompagnato l evoluzione degli smartphone, ma, al tempo stesso è stato altrettanto influente l impatto avuto sulla società odierna, in particolare sui giovani, pronta ad accogliere in modo vorace qualsiasi novità tecnologica invasiva. Per invasiva intendiamo la presenza di tutti quei dispositivi/servizi che possano influenzare, anche pesantemente, la vita di tutti i giorni. Spesso viene spontaneo chiedersi: com era la vita prima di Facebook?. A questa domanda, per fortuna, siamo in grado di rispondere avendo vissuto negli anni in cui di Facebook non si conosceva neanche l esistenza. Certo, le prime forme di social network (blog personali) e servizi di chat avevano preso piede già una decina di anni fa, ma, appunto, non in modo così invasivo. Quello che invece ci fa riflettere è il fatto che le nuove generazioni stiano crescendo esclusivamente nel pieno dell era digitale, o meglio, dei social network e quindi del Web Domenico Rodà

20 Questa premessa è per noi doverosa al fine di dare un senso (o almeno tentare di farlo) alla nostra risposta, una delle tante che si possono attribuire alla domanda Perché gli smartphone hanno avuto successo?. Bene, un fattore non di poco conto è quello, appunto, socioculturale. Ma cosa c entrano i social network in tutto questo? Il nostro pensiero è che gli smartphone abbiano avuto successo soprattutto perché, man mano, non sono state le abitudini o gli istinti fortemente sociali delle persone ad adattarsi ai dispositivi mobili, ma sono stati quest ultimi ad abbracciare e soddisfare progressivamente le esigenze e gli istinti dell Uomo. Gli stessi istinti che già Aristotele, d altronde, aveva apprezzato ed individuato millenni orsono, definendo l Uomo come uno Zoon politikon, ossia un animale sociale, dedito alla collettività e mosso dall istinto di integrarsi all interno di un gruppo. Bene, nel momento in cui la tecnologia ha raggiunto la piena maturità, possiamo dire che gli smartphone rappresentino l incarnazione pressoché perfetta di quelli che sono i desideri e gli istinti sociali dell Uomo moderno, in grado di stravolgerli ed amplificarli. Restare costantemente in contatto, condividere le proprie esperienze o i singoli eventi quotidiani sono cose possibili grazie ad un qualsiasi smartphone oggi in commercio, economicamente accessibile a larga parte degli abitanti del pianeta Terra. Rispondiamo, allora, dicendo che gli smartphone hanno avuto successo perché nati in funzione dei nostri istinti primordiali; non ci stupiremmo, dunque, se anche al tempo di Aristotele avessero avuto, in proporzione, la medesima diffusione, con tutte le sfumature del caso. Certo, non è corretto affermare che l aspetto sociale sia l unico in grado di spiegare, appunto, il successo degli smartphone; sarebbe piuttosto riduttivo. Ma che ne abbiano incrementato l appeal è un dato oggettivo. E l aspetto, invece, prettamente culturale dove può trovare un riscontro? In questo caso è doveroso fare riferimento all evoluzione tecnologica: l aumento delle prestazioni e della capacità di banda delle reti cellulari e l integrazione delle fotocamere/videocamere all interno dei primi smartphone hanno, senz altro, fatto da trampolino di lancio a tutto ciò che sarebbe diventato social, facendo leva su una sfumatura influente che caratterizza la società moderna, fortemente improntata su una cultura narcisistica ed autoreferenziale. La nostra riflessione vuole analizzare, in particolare, questo contesto proprio perché l idea che sta alla base della nostra applicazione si fonda su principi, al contrario, più semplici e primitivi, che tentano di divergere il più possibile da quella che è la filosofia del momento. Domenico Rodà 17

21 PANORAMICA SUI CASCADE STYLE SHEETS (CSS) Come abbiamo visto nel primo capitolo, agli albori, HTML veniva utilizzato anche per l impaginazione dei contenuti. L utilizzo di specifici tag atti a definire un ordine ed uno stile, come <table>, tuttavia, non garantisce una buona efficienza strutturale e sintattica e, per questo motivo, verso la fine degli anni Novanta si è avuta la necessità di separare i contenuti dalla formattazione e dallo stile delle pagine Web. Nascono così i Cascade Style Sheets (CSS), ovvero i Fogli di Stile, che con il tempo, hanno guadagnato terreno rispetto all utilizzo dell HTML puro, se non altro per la loro malleabilità e facilità di riutilizzo. Vediamo un po più nel dettaglio perché. Immaginiamo di avere del testo da formattare all interno di una serie di <div>, con all interno diversi paragrafi <p> o qualche immagine; immaginiamo, poi, che per ciascuno di questi <div>, si vogliano ottenere stili e dimensioni differenti. Una soluzione primitiva sarebbe quella di definire determinati valori all interno degli stessi tag HTML; questo però comporterebbe un appesantimento del codice, soprattutto nel caso di pagine ricche di contenuti. Supponiamo, anche, di voler modificare lo sfondo della pagina, cambiandone il colore o aggiungendo, magari, un immagine appropriata. Bene, una soluzione alternativa molto più efficace ci è resa possibile grazie ai CSS, i quali sono basati su un linguaggio che consente di definire la formattazione e lo stile di ogni singola pagina HTML. All interno di un file.css possiamo, dunque, inserire tutte le proprietà che vogliamo associare ad una specifica pagina Web. Come? Semplice: riprendiamo l esempio e ricordiamo la presenza di una serie di <div>, con all interno testo o immagini. Grazie agli attributi class ed id, messi a disposizione dal codice HTML, possiamo, innanzitutto, diversificare i singoli tag <div> di cui sopra. Per esempio, all interno di un <div> testo... </div> contenente solo testo vogliamo fare in modo che il carattere compaia con uno specifico colore. Modifichiamo, allora, il tag aggiungendo un attributo class che chiameremo class= colore_testo_1, ottenendo, così, il tag completo <div class= colore_testo_1 > testo </ div>. Adesso vogliamo fare in modo che non solo questo, ma anche tutti gli altri <div> ai quali assoceremo l attributo class= colore_testo_1, abbiano il testo al loro interno del medesimo colore, ad esempio rosso. Generiamo a questo punto un file.css e scriviamo semplicemente questo frammento di codice:.colore_testo_1 {color: red;}. 18 Domenico Rodà

22 Con una piccola stringa di codice, dunque, siamo in grado di modificare parti intere o singole porzioni di testo di una pagina HTML. E se volessimo che solo un elemento specifico abbia un particolare stile o una precisa dimensione? In tal caso ci serviremmo dell attributo Id, che particolarizza il caso dell attributo Class visto pocanzi. Vogliamo, per esempio, che il titolo principale di una porzione di testo posto all interno di un <div> compaia in grassetto e di colore giallo. Attribuiamo, allora, un id al corrispettivo tag HTML che individui quel titolo (o header): <h1 id= titolo_1 > </h1>. Torniamo allo stesso file.css in cui avevamo definito i valori della classe.colore_testo_1 ed aggiungiamo il secondo frammento di codice, usando stavolta il simbolo #(per far capire al nostro browser che stiamo facendo riferimento ad uno specifico attributo di tipo Id): #titolo_1 {color: yellow; font-weight: bold;}. Gli Id sono univoci e non possono essere riutilizzati: in questo caso, all interno del CSS, il frammento #titolo_1 {color: yellow; font-weight: bold;} potrà fare riferimento soltanto all elemento contenuto in <h1 id= titolo_1 > </h1>. Le specifiche CSS stabilite dal W3C hanno, naturalmente, definito dei termini che contraddistinguono gli elementi caratteristici del codice fin qui mostrato. Gli elementi.colore_testo_1 e #titolo_1 vengono chiamati, rispettivamente, selettore di classe (la classe viene richiamata mediante il simbolo.) e selettore di id (l id viene richiamato mediante il simbolo # ). Sono presenti anche il selettore di tipo (o selettore di elementi ), riferito ad un preciso elemento di una pagina (ad esempio, h1, h2, h3, p, etc.), e il selettore universale, che si indica con un * e si riferisce a tutti gli elementi di una pagina HTML. Vi sono, poi, altri selettori fondamentali, che si utilizzano quando vogliamo definire lo stile di elementi posti in una struttura ad albero, noti come: selettore di discendenti, selettore di figli (riferiti dal simbolo >), selettore di fratelli adiacenti (+) e selettore generale di fratelli (~). Domenico Rodà 19

23 Se avessimo per esempio una porzione di codice HTML del tipo: <div id= stile_figli > <p> Testo 1 </p> <div> //inserimento divisore interno <p> Testo 2 </p> </div> //chiusura divisore interno <p> Testo 3 </p> </div> Per modificare lo stile soltanto dei paragrafi contenenti Testo 1 e Testo 3 scriveremmo nel file.css: #stile_figli > p {color: red; font-style: italic;} In altre parole, richiederemmo che a tutti gli elementi (figli) contenuti nel tag <div> avente id= stile_figli venga associato il colore rosso ed un carattere corsivo (italic). Finora abbiamo visto come slegare la formattazione e lo stile di una pagina HTML dai contenuti della pagina stessa, permettendoci di lavorare su due ambienti distinti. Certo, tali ambienti sono distinti fino ad un certo punto perché dobbiamo, comunque, fare in modo che essi si riconoscano. Per integrare un file.css, che per comodità chiamiamo style.css, in una pagina HTML possiamo seguire diversi approcci. Giusto per abbracciare la filosofia del Rasoio di Occam, descriviamo direttamente il metodo più semplice ed efficiente. 20 Domenico Rodà

24 Quando vogliamo associare ad una pagina HTML uno specifico foglio di stile, ci basta agire all interno del tag <head> in questo modo: <html> <head> <title> Esempio CSS </title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> </html> Oppure, ancora più sinteticamente: <html> <head> </head> <title> Esempio 2 CSS </title> <style url (style.css); </style> </html> Tale approccio consente manutenibilità, chiarezza e riuso di codice nel miglior modo possibile. E i fogli di stile sono nati per favorire quest aspetto. Vediamo, adesso, cos hanno da offrire nella loro ultima incarnazione, ovvero i CSS3. Domenico Rodà 21

25 HTML5 E CSS3: L ERA DEL RESPONSIVE DESIGN Fin qui abbiamo fatto una piccola introduzione ai CSS, delineandone le caratteristiche principali e gli aspetti che li rendono indispensabili per assegnare stile e formattazione alle pagine Web. Con il tempo anche le specifiche CSS hanno seguito da vicino l evoluzione dei dispositivi multimediali, costituendo, assieme ad HTML, un binomio via via indissolubile. Al momento stiamo assistendo ad un continuo aggiornamento delle specifiche CSS3 che, seppur ancora in corso, stanno già ricevendo un notevole supporto. L obiettivo, a partire dai CSS2, è quello di semplificare il più possibile la realizzazione di pagine Web (e, come vedremo, anche di applicazioni di tipo Web) che si adattino perfettamente a dispositivi diversi tra loro: PC desktop, notebook, tablet, smartphone e così via. Questo approccio viene definito appunto responsive e lascia spazio a numerose soluzioni, a seconda delle esigenze dello sviluppatore e dei dispositivi di destinazione. Se già con le specifiche dei CSS2 si intravedeva chiaramente questa realtà, adesso abbiamo a disposizione degli strumenti più potenti e meglio delineati. Ma procediamo con ordine. Innanzitutto, dobbiamo definire alcuni concetti che stanno alla base dei principali cambiamenti introdotti dai CSS3. Non si parla più di specifiche come di un unica grande matassa di metodi ed attributi, bensì di moduli. Un approccio di tipo modulare, infatti, conferisce una migliore fruibilità nello studio delle specifiche, oltre ad una gestione più efficace delle stesse. Le singole funzioni, cioè, vengono suddivise per categorie, alleggerendo, di fatto, le istruzioni all uso. Al momento, le specifiche CSS3 sono in fase di sviluppo e di continuo aggiornamento; tuttavia alcuni moduli sono già stati completati e permettono di sfruttarne le intere potenzialità. Per farsi un idea pratica di come le specifiche vengono semplicemente suddivise in moduli, basta dare uno sguardo allo screen presente nella pagina successiva, che ritrae una porzione della pagina Web tratta dal sito ufficiale del W3c, il quale ci aggiorna man mano di tutte le novità inerenti all introduzione di nuovi moduli o il completamento di altri. L indirizzo da cui tale screen è stato preso è: 22 Domenico Rodà

26 Domenico Rodà 23

27 Naturalmente, va sottolineato che lo screen precedente ritrae soltanto la prima porzione della pagina relativa alle specifiche. Difatti, di queste ultime vengono anche descritte quelle in fase di revisione o, addirittura, abbandonate perché obsolete, o da sostituire con altre più stabili. Dando uno sguardo più attento alla tabella di cui sopra, possiamo notare che tra le specifiche che rientrano nello stato di Completed, e quindi definitive, ve n è una decisamente importante da descrivere, ovvero Media Queries. Media Queries ci mette a disposizione uno strumento fondamentale, realizzato con lo scopo di favorire e semplificare, al tempo stesso, la fruizione dei contenuti Web mediante dispositivi diversi tra loro. Questo si può facilmente tradurre come il tentativo di garantire la corretta visualizzazione delle pagine presenti in Rete al maggior numero possibile di sistemi multimediali, in particolare quelli mobili. Se pensiamo che attualmente esiste una miriade di dispositivi con schermi dalle molteplici dimensioni, è facile capire perché oggi siano necessarie determinate accortezze. Ed è proprio in questo campo che i CSS3 incarnano maggiormente e potenziano quello spirito che possiamo definire universale, che mira, cioè, a rendere i contenuti del Web efficacemente accessibili in qualsiasi momento, favorendo la nascita del Responsive Design, con tutto ciò che ne consegue. Fatta questa doverosa premessa, vediamo come si presentano, dal punto di vista pratico, le Media Queries e perché sono diventate ormai imprescindibili. Analizziamo la seguente stringa di codice HTML: <link rel="stylesheet" media="handheld href="style.css" / Bene, riprendiamo la stessa stringa di esempio mostrata nel capitolo precedente, con la quale abbiamo evidenziato un metodo efficace per implementare un foglio di stile all interno di una pagina HTML. Come si può facilmente notare, abbiamo introdotto un nuovo attributo, media, contenente un valore ben preciso, ossia handheld. Abbiamo appena definito una media query. Cosa comporta dichiarare un valore all interno di questa query? Ne segue che la pagina in cui è stato dichiarato questo attributo garantirà la corretta visualizzazione dei suoi contenuti a tutti i dispositivi mobili di piccole dimensioni, magari con browser aventi limitazioni grafiche. Possiamo, quindi, intuire la potenza di questo strumento, che possiamo assimilare ad una tipica espressione logica che prevede un valore booleano. Vediamo, allora, più nel dettaglio come sfruttarne le potenzialità. 24 Domenico Rodà

28 Cominciamo con il fornire l elenco dei vari tipi di media che è possibile dichiarare: all: si riferisce a tutti i tipi di schermo; screen: si usa se vogliamo specificare che lo schermo di visualizzazione è quello di un PC; print: indica una pagina idonea alla stampa; projection: è valido per presentazioni e proiezioni; speech: si usa quando i destinatari sono dispositivi a sintesi vocale; braille: si utilizza se i dispositivi interessati fanno uso del braille; embossed: si riferisce invece alle stampanti di tipo braille; handheld: è riferito, come visto, a dispositivi mobili di piccole dimensioni e con browser limitati; tty: è utilizzato se i dispositivi di riferimento sono quelli a carattere fisso (terminali); tv: è adatto per la visualizzazione corretta da parte della TV. Proviamo, ora, a concatenare alcuni valori in modo da definire una media query, riferita in questo caso ad una corretta visualizzazione su dispositivo di piccole dimensioni: <link rel="stylesheet" media="screen and (max-device-width: 480px) href="smart_style.css" type="text/css" /> In questo caso abbiamo definito un tipo di media, ossia screen, legato con un and alla vera e propria query inserita tra parentesi: max-device-width: 480px. Stiamo, cioè, chiedendo al dispositivo se la larghezza del suo schermo è pari o inferiore ad una risoluzione di 480 pixel. In caso affermativo, il dispositivo visualizzerà i contenuti con associato lo stile presente in smart_style.css. Possiamo personalizzare ulteriormente le query e specificare, per esempio, anche l altezza massima supportata, oppure differenziare la visualizzazione in base all orientamento dello schermo, se in modalità landscape o portrait, e così via. Insomma, abbiamo a disposizione numerose soluzioni, ma che non si limitano naturalmente alla sola dichiarazione del tipo di media nel tag <link> di una pagina HTML. All interno dei fogli di stile possiamo definire le regole CSS che specificano come i contenuti di una pagina responsive si debbano disporre ed auto-dimensionare a seconda della grandezza degli schermi e, quindi, al variare dell area di visualizzazione (numero dei pixel interessati). Domenico Rodà 25

29 Visto questo pratico esempio, possiamo dedurre come la strada intrapresa dalle specifiche dei CSS3 sia quella dell universalità. Separare la formattazione e l assegnazione di uno stile dai contenuti è stato solo un primo passo. Il vantaggio di operare in tal modo, infatti, si ripercuote positivamente nel momento in cui scegliamo di realizzare un architettura Web di tipo responsive. La flessibilità offerta da tale approccio è dimostrata dalla possibilità di integrare man mano, all interno di un foglio di stile, nuove regole che si adattino ad un particolare dispositivo piuttosto che ad un altro, il tutto senza realizzare modelli ad hoc che ci avrebbero costretti ad agire individualmente per ciascun tipo di dispositivo presente in commercio. Infine, per quanto il nostro lavoro abbia posto l accento sulle media queries, segnaliamo il link Internet: al cui interno è possibile trovare l elenco di tutte le proprietà delle quali è possibile usufruire nell ambito delle media queries. A conclusione di quanto esposto, possiamo certamente definire i fogli di stile, nella loro attuale incarnazione, come un tassello fondamentale per la costruzione di un mosaico che sia al passo coi tempi e facilmente malleabile. Essi possono gestire, come abbiamo visto, l adattamento a diversi dispositivi di visualizzazione, animazioni dalla complessità crescente, e così via. Dunque, abbiamo definito l importanza dei CSS3; accoppiati ad HTML5 e a Java- Script, essi offrono strumenti atti a realizzare pagine Web sofisticate e complesse. Tuttavia, per cogliere pienamente il concetto di applicazione Web, dobbiamo aggiungere un ulteriore elemento. Esso verrà esaminato nel prossimo paragrafo. 26 Domenico Rodà

30 API HTML5: E PUR SI MUOVE! I Web Service che sfruttano determinate API rappresentano ormai il motore pulsante della Rete. Esse consentono di implementare, all interno di una piattaforma Web, una serie di interfacce che ci permettono di interagire con applicazioni software fornite da terzi. Ci danno la possibilità, cioè, di recuperare informazioni da fonti esterne e manipolarle a proprio piacimento, operando naturalmente entro i limiti concessi, e proporle all utente sotto forma di servizi. Possiamo sintetizzare il concetto con la parola interoperabilità : sistemi diversi tra loro comunicano scambiandosi dati, dando vita a servizi Web più o meno complessi, a seconda delle necessità e all interno di un sistema distribuito, senz altro sinonimo di Rete. Nel panorama HTML5 ritroviamo un numero consistente di API, alcune particolarmente adatte allo sviluppo di vere a proprie applicazioni Web, pensate in particolar modo nell ottica mobile. Esistono, difatti, API HTML5 (scritte in JavaScript) che interagiscono direttamente con i dispositivi mobili, sfruttando magari funzionalità e caratteristiche strettamente legate al dispositivo ed al suo sistema operativo, quali fotocamera, batteria, accelerometro, vibrazione, file system, e così via. Tutte queste API, viste in un quadro completo, formano un ottimo strumento per sfruttare, quindi, anche le potenzialità hardware dei dispositivi mobili, proprio come farebbero delle applicazioni native. Per ora, tuttavia, soffermiamoci sulle possibilità offerte da quelle API che, dall altro lato della barricata, sfruttano in particolar modo le potenzialità del Web, facendo appunto leva sul concetto di Web Service. Riteniamo, infatti, che dare priorità a quest ultimo approccio sia come partire dall ABC per quanto concerne lo sviluppo di una Web Application. Visitando la pagina presente al link: possiamo entrare nella sezione HTML5 APIs e ritrovare una guida per ciascuna delle API al momento più significative, ovvero: HTML5 Geolocation HTML5 Drag/Drop HTML5 Web Storage HTML5 App Cache HTML5 Web Workers HTML5 SSE Domenico Rodà 27

31 In particolare, vorremmo porre l accento su quella che personalmente riteniamo sufficientemente adatta per mostrare, con semplicità e chiarezza, le potenzialità base di un app HTML5: la Geolocation API, dedicata, appunto, alla geolocalizzazione. Immaginiamo, per ora, di voler semplicemente ricavare le informazioni circa la nostra attuale posizione, indipendentemente dal dispositivo, fisso o mobile, col quale effettuiamo la richiesta. Analizziamo, dunque, il seguente esempio di codice JavaScript (da inserire all interno di un <body>): <script> var x = document.getelementbyid("test_geolocalizzazione"); function getlocation() { if (navigator.geolocation) { navigator.geolocation.getcurrentposition (showposition); } else { x.innerhtml = "Geolocation is not supported by this browser."; } } function showposition(position) { x.innerhtml = "Latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude; } </script> Con poche righe di codice abbiamo realizzato una funzione che, una volta richiamata, ci restituisce, per ora solo attraverso latitudine e longitudine in formato testuale, la posizione corrente nella quale ci troviamo. La risposta visualizzata è del tipo: Latitude: Longitude: Domenico Rodà

32 Addentrarci da subito in un esempio diretto come questo può farci intuire quali siano i vasti scenari di utilizzo. Nel momento in cui ci siamo chiesto quale potesse essere l aspetto cruciale di un app HTML5 che ben si adattasse ad uno smartphone, dispositivo mobile per eccellenza, è emersa spontaneamente la geolocalizzazione. Quasi tutti noi ormai, giornalmente, veniamo geo-localizzati, sia in maniera esplicita (per esempio mediante la condivisione della propria posizione all interno dei social network) che implicita. Ritrovarci tra le mani un numero crescente di applicazioni che sfruttassero i GPS dei nostri dispositivi mobili è stato un passo alquanto breve. Nell ecosistema HTML5, dunque, realizzare un API sulla geolocalizzazione è stato pressoché inevitabile. Possiamo certamente definire le API HTML5 come degli strumenti imprescindibili per la realizzazione di un applicazione Web ed evidenziano, implicitamente, l importanza di Java- Script. Tuttavia, ci sono sia pro che contro da considerare nel momento in cui si decide di realizzare un applicazione pensata appositamente per dispositivi mobili. Domenico Rodà 29

33 HTML5, IBRIDA O NATIVA? Per quanto ci siano API che consentono di utilizzare un app HTML5 anche offline, uno dei primi limiti evidenti di un applicazione di questo tipo è la stretta dipendenza dalle risorse di rete dei dispositivi mobili. La domanda sorge, quindi, spontanea nel momento in cui si sa già che tipo di applicazione vogliamo realizzare. Dove un app, basata interamente su un architettura Web, può riscontrare un certo consenso anche in ambito mobile? Senz altro in uno scenario che non prevede la gestione di una grossa mole di dati. Se pensiamo che attualmente gli smartphone utilizzano sia tecnologia 2G che tecnologia 3G ed una piccola parte soltanto, di recente, anche quella 4G, e che non tutti possiedono un abbonamento per il pacchetto dati, allora si tradurrebbe in uno spreco di risorse ed in una scarsissima efficienza realizzare un app che nasconda dietro un enorme mole di dati. Sostanzialmente, un applicazione Web mobile non deve essere assolutamente vista come il riadattamento o la realizzazione di un portale di Rete, come spesso si può fraintendere. Piuttosto, questo naturalmente il nostro personalissimo pensiero, deve essere un applicazione che faccia della semplicità il suo cavallo di battaglia, che sappia innanzitutto gestire bene le risorse lato server. Sarebbe presuntuoso e decisamente deleterio pensare di abbandonare lo sviluppo di app native in favore delle Web app. Queste ultime, anzi, si potrebbero vedere come una naturale evoluzione delle prime, ma non in termini sostitutivi. D altro canto, laddove lo scenario è consono ad un loro utilizzo, le Web app mostrano un potenziale notevole, dando la possibilità allo sviluppatore di risparmiare tempo e risorse, soprattutto se si intende il tempo in funzione dello sviluppo/adattamento nativo verso una o più piattaforme (Windows Mobile, Android, ios, etc.). Un vantaggio lampante, quindi, è rappresentato dalla facilità di rendere un applicazione HTML5 compatibile con più sistemi contemporaneamente, salvo lievi accortezze nelle fasi finali dello sviluppo. Questo perché è possibile slegare completamente il core logico dell applicazione dall hardware del dispositivo, effettuando, di fatto, un astrazione. La parola astrazione dovrebbe farci ulteriormente riflettere sull importanza di rendere una Web app snella ed efficiente. 30 Domenico Rodà

34 Nel caso in cui, invece, sono strettamente necessarie le capacità di uno specifico dispositivo possiamo scegliere due vie. La prima è quella dello sviluppo nativo mentre la seconda è quella che, in realtà, sta in mezzo alle prime due: l app ibrida. Con questo termine si intende un app in grado di fondere le tecniche di sviluppo utilizzate per il Web con quelle per lo sviluppo nativo. Tale approccio è quello che abbiamo deciso di approfondire nel corso della tesi, per quanto la semplice applicazione d esempio realizzata per l occasione, oggetto di discussione, si basi quasi esclusivamente sull utilizzo di tecniche orientate alla Rete. Tuttavia, come vedremo, è importante mostrare come un ambiente di sviluppo tradizionale, quale può essere Eclipse, sia in grado di trasformarsi ed accogliere in modo confortevole l intero ecosistema HTML5. Anche nel caso di app ibride, comunque, bisogna scegliere sapientemente quali devono essere le funzioni da delegare alla Rete e quali quelle da assegnare alle risorse software e hardware del dispositivo. Domenico Rodà 31

35 Per riepilogare, in questo capitolo abbiamo analizzato le caratteristiche che rendono peculiari, nonché fondamentali, i CSS3, introducendo al concetto di Responsive Design. In secondo luogo, abbiamo definito l importanza delle API HTML5, e quindi dei Web Services, soffermandoci su una della API che, a nostro avviso, meglio si presenta in ottica mobile, ovvero quella sulla geolocalizzazione. Infine, abbiamo provato a delineare un breve confronto tra app HTML5 ed app ibride, sottolineando i vantaggi e gli svantaggi più evidenti di ciascuna categoria. 32 Domenico Rodà

36 3. Analisi dei requisiti e progettazione Questo terzo capitolo si concentrerà sull analisi dei requisiti, atti a descrivere le funzionalità della nostra applicazione, e sulla fase di progettazione, caratterizzata dall utilizzo di strumenti utili a definire i casi d uso, con il relativo diagramma, e i Process Flow. 1 Analisi dei requisiti 2 3 Definizione della mappa Progettazione dei mock-up 4 Progettazione dei casi d uso Domenico Rodà 33

37 ANALISI DEI REQUISITI L obiettivo di questa tesi è stato quello di realizzare un applicazione con un approccio orientato quasi esclusivamente al Web. Dato questo presupposto, abbiamo optato per un applicazione innanzitutto semplice, che operasse in un ambito specifico, ovvero la geolocalizzazione. Come accennato nel precedente capitolo, infatti, l idea è quella di abbracciare l ecosistema di HTML5 cercando di astrarre il più possibile le risorse hardware dei nostri dispositivi mobili sfruttandone, di conseguenza, solo una minima parte. Questo può essere uno svantaggio laddove un applicazione necessiti soprattutto della capacità di calcolo della CPU. Tuttavia, se consideriamo che il mercato è popolato principalmente da dispositivi di fascia medio-bassa, con ridotte capacità di calcolo nella maggior parte dei casi, allora potrebbe diventare un vantaggio mettere a disposizione applicazioni che cerchino di delegare il meno possibile sulla CPU il carico di lavoro. Vediamo come la nostra applicazione cerchi di emulare tale scenario. L idea che sta alla base è semplice: garantire, in qualsiasi istante, la possibilità di visualizzare i cinema presenti nella propria città e conoscere la lista dei film proiettati al momento della ricerca. Sfruttando, poi, l API sulla geolocalizzazione, l utente deve poter visualizzare su una mappa il percorso che lega la sua attuale posizione alla destinazione, nel nostro caso un cinema. Per la realizzazione di questo ultimo aspetto, ci siamo serviti delle efficienti API offerte da Google, pensate appositamente per sfruttare, in toto, il servizio proprietario Google Maps. Innanzitutto, comunque, l applicazione deve verificare se il dispositivo restituisce correttamente la posizione dell utente. Per tale motivo, abbiamo inserito una prima funzione che funge da test. Essa, una volta attivata, chiede all utente di acconsentire al rilevamento della propria posizione, nel pieno rispetto delle normative Web sulla privacy. Se l utente acconsente, la funzione restituisce, in caso di successo, la sua posizione all interno di una mappa. In caso contrario, devono essere gestite due eccezioni: l utente non autorizza l applicazione a rilevare la posizione del suo dispositivo si verifica un errore durante il tentativo di geo-localizzare il dispositivo Il rispetto della privacy di ciascun utente rappresenta l aspetto cruciale delle applicazioni mobili, in particolare quelle che sfruttano la geolocalizzazione. Chiedere quindi il permesso di rilevare la posizione del dispositivo, dato senz altro sensibile, è il primo requisito che deve possedere la nostra applicazione. 34 Domenico Rodà

38 Nel caso il test termini con successo, l utente può proseguire nell utilizzo dell applicazione vera e propria e, solo a quel punto, sfruttare appieno le risorse di rete. L utente può entrare, dal menù principale, nella sezione Seleziona Città. All interno di questa funzione devono essere inserite, a scopo dimostrativo, le città più grandi d Italia. Selezionando una città, l applicazione deve caricare, lato server, la lista dei cinema presenti in essa e visualizzare, per ciascuno di questi, i film proiettati sul momento. Ad ogni film sono associati la fascia oraria all interno della quale vengono proiettati ed il genere di appartenenza. Nel caso in cui l utente volesse conoscere nel dettaglio la strada per raggiungere un determinato cinema, l applicazione deve fornire un ulteriore funzione, ovvero Calcola percorso. Per ogni cinema, infatti, deve essere possibile calcolarne il percorso a partire dalla posizione dell utente. Se attivata, questa funzione geolocalizza il dispositivo, genera un percorso ottimale e lo restituisce in due modi: il primo fornisce le indicazioni stradali in forma testuale, con la possibilità di scegliere se il percorso deve essere effettuato a piedi, con un mezzo privato o con uno pubblico (le variazioni sul traffico o la momentanea inaccessibilità di una strada vengono segnalate); il secondo visualizza il percorso direttamente su una mappa, mostrando partenza e destinazione. Le due modalità sono complementari tra loro: possono essere accedute separatamente, ma fanno comunque parte della stessa API. Sta all utente stabilire quale delle due fornisce le informazioni che più si adattano al suo contesto. Quanto proposto finora deve essere eseguito esclusivamente lato server. Le informazioni sui cinema e sui film non sono contenuti all interno di un database, ma vengono estrapolate mediante un parsing di dati. Per il momento, in mancanza di autorizzazioni da parte di fonti esterne non appartenenti allo stesso dominio in cui è contenuto il nostro server, ci atteniamo al rispetto della Same Origin Policy, optando, come vedremo più avanti, per un parsing lato client. Inoltre, l applicazione deve essere pienamente compatibile con i dispositivi dotati di sistema operativo Android, a partire dalla versione 2.2 Froyo. Domenico Rodà 35

39 DEFINIZIONE DELLA MAPPA Di seguito, mostriamo la mappa gerarchica che individua le aree che costituiscono la struttura della nostra applicazione: HOME Utilizza le API di Google Maps. Verifica che il dispositivo venga rilevato correttamente SELEZIONA CITTA TEST GEOLOCALIZZAZIONE LISTA CITTA LISTA CINEMA Visualizza i cinema, con i rispettivi film, proiettati al momento della ricerca. CALCOLA PERCORSO Utilizza le API di Google Maps per tracciare il percorso tra utente e cinema selezionato. Tutte le aree sono bidirezionali. 36 Domenico Rodà

40 PROGETTAZIONE DEI MOCK-UP Passiamo alla progettazione dei mock-up, utili a definire una prima idea concreta di come si presenterà, dal punto di vista del layout, la nostra applicazione. In primo luogo mostriamo la schermata iniziale una volta avviata l app: Domenico Rodà 37

41 Selezionando Test Geolocalizzazione deve apparire una schermata come quella mostrata nella seguente figura: 38 Domenico Rodà

42 Selezionando la voce Seleziona Città, invece, comparirà la seguente schermata: Domenico Rodà 39

43 Proseguendo a partire dall ultimo screen mostrato, selezionando una città viene visualizzata una schermata come quella mostrata nella seguente figura: 40 Domenico Rodà

44 Nel caso in cui l utente dovesse poi scegliere di calcolare il percorso verso un determinato cinema, a partire dalla sua posizione corrente, deve essere mostrato il tragitto. Ciò può avvenire, innanzitutto, mediante indicazioni stradali in formato testuale, come nella seguente figura: Domenico Rodà 41

45 In alternativa è possibile la visualizzazione diretta su mappa dinamica, come mostrato di seguito: Entrambe le modalità sono interconnesse tra loro mediante uno switch. 42 Domenico Rodà

46 PROGETTAZIONE DEI CASI D USO Definiti i requisiti della nostra applicazione, la mappa ed i mock-up, adesso possiamo procedere con l analisi dei casi d uso. Un primo passo da compiere è quello di progettare il Diagramma dei casi d uso e mostrare le operazioni che l utente può effettuare con la nostra applicazione. Tale diagramma è mostrato nella seguente figura: uc Primary Use Cases TestGeolocalizzazione VisualizzaCittà «include» Utente VisualizzaCinema «include» CalcolaPercorsoSuMappa Domenico Rodà 43

47 Una volta descritto il diagramma dei casi d uso, passiamo alla definizione del Process Flow inerente al calcolo del percorso. sd Process Flow [L'utente vuole conoscere la lista dei film proiettati nella sua città] START [Visualizzare i cinema con i rispettivi film proiettati] Vuoi [Verificare la corretta geolocalizzazione del dispositivo] Visualizza Città Test Geolocalizzazione Seleziona Città FlowFinal Visualizza Cinema [Conoscere il percorso verso un determinato cinema a partire dalla tua posizione] Vuoi [Concludere la visualizzazione] FlowFinal Calcola Percorso Su Mappa END Questo diagramma descrive le azioni che compie un utente nel momento in cui decide di sfruttare il servizio di geolocalizzazione e calcolare il percorso verso un cinema. 44 Domenico Rodà

48 Descriviamo ora il caso d uso di maggior rilevanza presente all interno della nostra applicazione, ovvero CalcolaPercorsoSuMappa. ID: 1 CalcolaPercorsoSuMappa Breve descrizione: L utente vuole che si calcoli, a partire dalla sua posizione, il percorso verso un determinato cinema. Attori primari: Utente. Attori secondari: Nessuno. Precondizioni: 1. L utente ha dato il consenso ad essere geo-localizzato. Sequenza degli eventi principale: 1. Include VisualizzaCinema. 2. L app richiama le API di Google Maps per generare il percorso dispositivo-cinema. Postcondizioni: 1. L utente visualizza le indicazioni stradali in formato testuale. 2. L utente visualizza il percorso su mappa. Sequenze degli eventi alternative: Nessuna. Domenico Rodà 45

49 Il caso d uso sopra descritto rappresenta sostanzialmente il fulcro dell applicazione. Esso consente all utente di sfruttare appieno le API offerte da Google per quanto concerne la geolocalizzazione. L utente, una volta richiamata la funzione intrinseca al caso d uso, visualizza su schermo il percorso, sia in formato testuale che in modalità mappa. Non prima, naturalmente, di aver dato il consenso affinché la posizione del suo dispositivo venga rilevata; questo può essere stato fatto in precedenza effettuando un test iniziale, oppure al momento stesso in cui egli chiede che venga generato un percorso. Ciò garantisce, in ogni parte della nostra applicazione, il pieno rispetto delle normative Web sulla privacy. La flessibilità di questa API sta nel fatto che la geolocalizzazione può avvenire non necessariamente con il GPS attivo, ma anche mediante la sola rete a pacchetti, sfruttando le antenne poste all interno della cella nella quale ci troviamo. Ciò consente un notevole risparmio di batteria, fattore cruciale per i nostri smartphone, in particolare per quelli di fascia medio-alta, maggiormente soggetti a stress. 46 Domenico Rodà

50 4. Implementazione Questo quarto capitolo illustrerà i metodi di implementazione adottati per lo sviluppo dell applicazione. Inizialmente verranno descritti i tool di sviluppo; successivamente si proseguirà con le tecniche utilizzate, con tanto di codice esplicativo; infine, verrà effettuata una rapida panoramica visuale sull applicazione. 1 Strumenti del mestiere 2 Tecniche di sviluppo 3 Esploriamo l app Domenico Rodà 47

51 STRUMENTI DEL MESTIERE Per implementare la nostra applicazione abbiamo utilizzato gli strumenti al momento più noti. Primo fra tutti, Apache Cordova ( cordova.apache.org/), una piattaforma che fornisce librerie e API JavaScript pensate appositamente per lo sviluppo di app native e ibride. Esso è uno strumento flessibile e potente, affiancabile alla maggior parte degli ambienti di sviluppo più diffusi: noi abbiamo utilizzato Eclipse, installando Apache Cordova sotto forma di espansione. La sua peculiarità sta nell essere completamente open source, nonché compatibile con piattaforme Windows e Unix; questo fondamentale aspetto cela dietro il chiaro intento di garantire un cross-platform efficiente, delegando solo ad una minima parte dello sviluppo l adattamento verso un sistema piuttosto che un altro. Per chi si avvicina per la prima volta a questa piattaforma, risulta indispensabile seguire la documentazione completa, con tanto di guida all installazione a seconda del sistema operativo utilizzato, presente all interno del link: guide_overview_index.md.html#overview. In tale documentazione è possibile, in particolare, prendere nota delle API ufficiali implementabili, con tanto di codice JavaScript esplicativo. Di seguito, riportiamo l elenco delle API tradizionali più utilizzate, in modo da rendere meglio l idea delle potenzialità di Apache Cordova: Geolocation: geolocalizza il dispositivo. Globalization: abilita la rappresentazione di oggetti specifica ad una località. InAppBrowser: consente di avviare un URL in una finestra browser all interno della stessa app. Media: registra e riproduce file audio. 48 Domenico Rodà

52 Media Capture: cattura file multimediali sfruttando le applicazioni di cattura del dispositivo. Network Information: ricerca velocemente lo stato della rete e l informazione sulla rete cellulare. Splashscreen: mostra e nasconde gli splash screen delle applicazioni, utili a rappresentare le fasi di caricamento di una schermata. Vibration: attiva le funzioni di vibrazione del dispositivo. StatusBar: mostra, nasconde e configura una status bar. Come possiamo notare, sono tutti plug-in che richiamano, mediante codice esclusivamente JavaScript, le funzionalità di un dispositivo mobile, evitando di utilizzare il linguaggio di programmazione specifico del dispositivo stesso, ad esempio Java nel caso di Android. Per chi volesse rivolgere uno sguardo più ampio ai molteplici plug-in disponibili, costantemente aggiornati, può visionare l elenco generale presente al link: Per completezza, mostriamo come si presenta su piattaforma Windows il pacchetto di installazione di Apache Cordova: Domenico Rodà 49

53 Ecco, invece, come si presenta un progetto Eclipse una volta integrate le librerie di Cordova: Riepilogando, per la realizzazione della nostra applicazione Web, adattata ad Android, abbiamo utilizzato la piattaforma Apache Cordova, integrata all ambiente di sviluppo Eclipse. Tuttavia, manca un terzo e fondamentale elemento, quello che abbiamo scelto per orientare la nostra app (quasi) esclusivamente al Web: un server. In rete, ormai, si ha la possibilità di richiedere server gratuiti ad una moltitudine di host, indispensabili per rendere fruibili online i nostri contenuti e servizi; lo stesso abbiamo deciso di fare per la nostra applicazione, in modo da proporre un approccio alternativo. Come vedremo, infatti, abbiamo optato per un implementazione lato server, delegando alla coppia Eclipse + Apache Cordova solo l atto conclusivo dello sviluppo. Sostanzialmente, quindi, la quasi totalità del codice è stato inserito mediante l editor fornitoci dal nostro host. 50 Domenico Rodà

54 TECNICHE DI SVILUPPO Presentiamo, dunque, il codice utilizzato per la schermata iniziale della nostra app, che potremmo definire contemporaneamente sia Home (tipica di un sito Web) che (utilizzando un termine più consono alle app Android) First Activity. Analizziamo, cioè, il classico file noto di default come index.html. Il codice relativo a tale file è riportato nella seguente figura: Domenico Rodà 51

55 La lettura del codice HTML dovrebbe essere facilmente coadiuvata dagli esempi di codice mostrati nei capitoli precedenti. A rendere la pagina responsive è la seguente stringa: <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> Abbiamo definito l attributo media, associando ad esso il valore all, in modo che la pagina si adatti a più schermi appartenenti a dispositivi diversi tra loro. E, in particolare, abbiamo richiamato una serie di regole, dichiarate nel file style.css, che così si presentano: body { background:url('../images/bg01.jpg'); background-size:100% 100%; font-family: 'Open Sans', sans-serif; font-size: 100%; }.wrap{ padding: 10px; } /* start grids_of_3 */.grids_of_3{ display: block; }.grid1_of_3{ margin-bottom: 10px; //(continua) 52 Domenico Rodà

56 /* Inizio stile griglia */.grid_img{ position: relative; margin-bottom: -4px; }.grid_img img{ width: 100%; border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; -o-border-radius: 10px 10px 0 0; }.list_top{ position: absolute; bottom: 20px; left: 20px; }.list_top h4{ display: block; font-size: 1.2em; color: #ffffff; text-transform: uppercase; font-weight: 800; }.list_top span { font-size: em; color: #ffffff; text-transform: capitalize; font-weight: 800; } /* Fine stile griglia */ //(continua) Domenico Rodà 53

57 /*Inizio stile menu_box_list */.menu_box_list{ border-radius: 0px 0px 10px 10px; -webkit-border-radius: 0px 0px 10px 10px; -moz-border-radius:0px 0px 10px 10px; -o-border-radius:0px 0px 10px 10px; background: rgba(255, 255, 255, 0.13); }.menu_box_list li{ border-bottom: 1px solid #BBA9E2; }.menu_box_list li:last-child{ border-bottom: none; }.menu_box_list li a{ display:block; color:#ffffff; text-transform:capitalize; font-size:1em; line-height:1.8em; font-weight: 400; padding:12px 30px 10px; border-left: 8px solid rgba(255, 255, 255, 0); -webkit-transition: color.2s linear,background.2s linear; -moz-transition: color.2s linear,background.2s linear; -o-transition: color.2s linear,background.2s linear; transition: color.2s linear,background.2s linear; } //(continua) 54 Domenico Rodà

58 .menu_box_list li a > i{ width:26px; height:26px; display:inline-block; background:url(../images/sprite_nav.png) no-repeat; vertical-align:middle; transition:none; float: right; }.menu_box_list li a:hover > i{ background:url(../images/sprite_nav.png) no-repeat; }.menu_box_list li a:hover,.menu_box_list li.active a{ color: #ffffff; background-color: rgba(255, 255, 255, 0.22); border-left: 8px solid #ffffff; }.menu_box_list li a span{ float: left; }.menu_box_list li a > i.settings{ background-position:0px 0px; }.menu_box_list li a:hover > i.settings{ background-position:1px -33px; }.menu_box_list li a > i.location{ background-position: -32px 1px; }.menu_box_list li a:hover > i.location{ background-position: -31px -32px; }.menu_box_list li.active a > i.favorite{ background-position: -62px -32px; } //(continua) Domenico Rodà 55

59 .menu_box_list li a > i.food { background-position: -94px 0px; }.menu_box_list li a:hover > i.food{ background-position: -93px -33px; } /*Fine stile menu_box_list */ Abbiamo fin qui definito tutte le regole atte ad assegnare uno stile ed un preciso comportamento agli elementi che compaiono nel nostro index.html. Per quanto le stringhe di codice possano sembrare numerose, in realtà vengono giustificate da una serie di effetti grafici che ben si adattano allo stile delle app mobile. Ci siamo, infatti, concentrati sul conferire all applicazione un aspetto congruo, che di fatto inganni l utente circa la vera natura della stessa. Pensiamo sia strettamente necessaria, a tal proposito, la scelta di un template adeguato, funzionale e moderno al tempo stesso, in modo che risulti intuitivo sia lato desktop (nel caso la nostra app preveda la fruizione dei contenuti anche attraverso un PC) sia lato mobile. Come vedremo più avanti, per dimostrare quanto la scelta di un template responsive sia cruciale per la buona riuscita di un applicazione Web pensata per il mobile, abbiamo lasciato una schermata nel suo stato primitivo, priva di elementi grafici particolari. Per ora, continuiamo a soffermarci sull aspetto prettamente tecnico, mostrando stavolta come abbiamo implementato via via le API di Google Maps, motore pulsante della nostra applicazione. In primo luogo, definiamo il codice utilizzato per testare la funzionalità base di geolocalizzazione di un dispositivo, a partire dal corpo HTML all interno del quale abbiamo inserito lo script JS per attivare l API. Nella pagina che segue introduciamo la prima porzione di codice. 56 Domenico Rodà

60 <!DOCTYPE html> <html> <head> <title> Geolocation </title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px } </style> // Includiamo ora le mappe con sensor=true poiché il codice richiama le funzionalità GPS per rilevare la posizione. Maggiori info su: documentation/javascript/tutorial#loading_the_maps_api // <script src=" v=3.exp&sensor=true"></script> //(continua) Abbiamo, intanto, dichiarato lo stile della mappa da adottare, nel nostro caso #mapcanvas, e abbiamo specificato che lo stesso deve essere visualizzato in full-screen (height: 100%). Dopo di che, abbiamo richiamato con lo script finale la sorgente che ci fornisce la specifica API che desideriamo utilizzare. A questo punto non ci resta che inizializzare la mappa e definirne il comportamento, eccezioni comprese. Domenico Rodà 57

61 <script> var map; function initialize() { var mapoptions = { zoom: 6 }; map = new google.maps.map(document.getelementbyid('mapcanvas'), mapoptions); // Testa la geolocalizzazione HTML5 if(navigator.geolocation) { navigator.geolocation.getcurrentposition(function (position) { var pos = new google.maps.latlng (position.coords.latitude, position.coords.longitude); } var infowindow = new google.maps.infowindow({ map: map, position: pos, content: 'Geolocalizzato con HTML5.' }); map.setcenter(pos); }, function() { handlenogeolocation(true); }); } else { // Il Browser non supporta la geolocalizzazione handlenogeolocation(false); } 58 Domenico Rodà

62 Impostati alcuni parametri di inizializzazione, abbiamo introdotto la prima condizione; questa specifica che, nel caso in cui il dispositivo viene correttamente rilevato, allora la funzione genera una mappa mostrando la posizione dell utente, centrata rispetto allo schermo, sfruttando i valori di latitudine e longitudine prelevati. A seguire, gestiamo le eccezioni, completiamo lo script e chiudiamo il corpo HTML: function handlenogeolocation(errorflag) { if (errorflag) { var content = 'Errore: Il servizio di Geolocalizzazione ha fallito.'; } else { var content = 'Errore: Il tuo browser non supporta la geolocalizzazione.'; } var options = { map: map, position: new google.maps.latlng(60, 105), content: content }; } var infowindow = new google.maps.infowindow(options); map.setcenter(options.position); google.maps.event.adddomlistener(window, 'load', initialize); </script> </head> <body> <div id="map-canvas"></div> </body> </html> Domenico Rodà 59

63 Nel caso in cui l utente non dia semplicemente il consenso ad essere geo-localizzato, invece, di default viene visualizzata una pagina vuota. Abbiamo lasciato inalterato il termine browser nei commenti circa la gestione degli errori proprio per far intendere come tale API sia pensata in ottica Web. Questi comportamenti vengono, di conseguenza, ereditati nel caso l API venga integrata in una applicazione mobile strutturata in HTML5. Ciò è reso possibile grazie ad Apache Cordova, ma, prima di entrare nel merito, approfondiamo le potenzialità delle API Google Maps mostrando le porzioni di codice che ci consentono di calcolare un percorso, data una destinazione prefissata (nel nostro caso un cinema), a partire da una posizione corrente. Vediamo, cioè, come abbiamo esteso le funzionalità base di geolocalizzazione viste in precedenza, arricchendole di dettagli e informazioni aggiuntive. Di seguito, lo script JS: 1 $(document).ready(function() { 2 var startinglocation; 3 var destination = " , "; // Coordinate cinema La Nuova Pergola. 4 $('a.get-directions').click(function (e) { 5 e.preventdefault(); 6 if (navigator.geolocation) { 7 navigator.geolocation.getcurrentposition(function (position) { 8 var latitude = position.coords.latitude; 9 var longitude = position.coords.longitude; 10 startinglocation = latitude + "," + longitude; 11 gotogooglemaps(startinglocation, destination); } }); 60 Domenico Rodà

64 Mediante la l istruzione alla riga 2 abbiamo dichiarato la variabile che conterrà la posizione iniziale di partenza, rilevata al momento della geolocalizzazione. L istruzione alla riga 3, invece, contiene una variabile già dichiarata, ossia quella riferita alla posizione del POI che ci interessa raggiungere, espressa in forma latitudine, longitudine. Una volta dichiarate entrambe le variabili, con l if successivo determiniamo la condizione seguente: se il dispositivo supporta correttamente la geolocalizzazione, allora viene rilevata la posizione mediante coordinate, viene inserita nella variabile startinglocation precedentemente dichiarata (istruzione alla riga 10) e, infine, viene utilizzata dal metodo presente nell istruzione alla riga 11 in combinazione con la variabile destination. Quest ultima funzione si occupa, appunto, del calcolo del percorso e della conseguente visualizzazione delle indicazioni stradali, sia testuali che su mappa. Concludiamo qui la parte inerente ai metodi utilizzati per sfruttare le API di Google Maps. Possiamo adesso concentrarci sulla parte finale dello sviluppo, che ha previsto l utilizzo di Apache Cordova, mostrandone subito l intuitivo codice Java: package com.prova.test2; import android.os.bundle; import org.apache.cordova.*; public class Test2 extends CordovaActivity public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); super.init(); super.loadurl(" nostro URL /Schermate/ smartphone/mobile_index.html", 3000); } } Domenico Rodà 61

65 Come possiamo notare, essendo la nostra applicazione orientata al Web, ed avendola implementata direttamente lato server, possiamo sfruttare una semplice funzione, ovvero : super.loadurl() Questa si incaricherà di caricare direttamente l URL associato alla nostra Home in HTML5 (mobile_index.html), mostrandone i contenuti all interno di un pacchetto che funge da vera e propria app. L immagine a fianco mostra l aspetto che Apache Cordova associa, di default, alla nostra applicazione una volta installata su un dispositivo Android. Quello che l utente vedrà, non appena avviata l applicazione dal proprio dispositivo, sarà quindi l equivalente di una First Activity, che cela in realtà dietro un infrastruttura Web. Un passo fondamentale dal quale non si può prescindere per consentire la corretta esecuzione di un applicazione in HTML5 è quello di dichiarare opportunamente i permessi di accesso al dispositivo all interno del Manifest. Per la nostra applicazione, tale attività è stata effettuata inserendo dei permessi aggiuntivi, come mostrato di seguito: /> <uses-permission android:name= "android.permission.internet" /> <uses-sdk android:minsdkversion="10" android:targetsdkversion="19" /> <uses-permission android:name= "android.permission.access_coarse_location" /> <uses-permission android:name= "android.permission.access_network_state" /> <uses-permission android:name= "android.permission.access_fine_location" /> <uses-permission android:name= "android.permission.access_location_extra_commands" 62 Domenico Rodà

66 Passiamo, ora, a descrivere il metodo utilizzato per effettuare il parsing dei dati. Nel rispetto della Same Origin Policy non abbiamo optato per una soluzione lato server, ma abbiamo momentaneamente adottato una libreria presente in Java, nota come Jsoup, che consente comunque di effettuare, in tempo reale, il parsing dei dati su specifiche pagine Web. Dove recuperare, dunque, tutte le informazioni circa i cinema ed i corrispettivi film proiettati sul momento? Anche in questo caso ci viene in aiuto Google, grazie ad un Web Service proprietario che ci offre le informazioni di cui necessitiamo: A noi interessa estrapolare da una pagina come questa solo il codice HTML che restituisce le seguenti informazioni: Titoli dei film proiettati per ogni cinema; informazioni sui film (durata, genere e orari). Domenico Rodà 63

67 Per realizzarlo, abbiamo individuato i tag HTML che contengono tali informazioni; dopo di che, grazie ai metodi presenti nella libreria Jsoup, abbiamo operato come mostrato nel codice seguente: package parsing; import org.jsoup.jsoup; import org.jsoup.nodes.document; public class Test { public static void main(string[] args) throws Exception { String url = " hl=it&near=reggio+calabria"; Document document = Jsoup.connect(url).get(); document.select("a, span").unwrap(); String theater = document.select ("#movie_results").outerhtml(); System.out.println(theater); } } Eseguito il main, esso ci restituisce, mediante una stampa su schermo soltanto, la porzione di codice HTML contenente le informazioni che ci interessano. Estratte tali informazioni, possiamo tranquillamente esportarle sul nostro server ed aggiornare, così, le pagine inerenti ai cinema. Grazie ai CSS, lo stile viene automaticamente importato da un file apposito, senza la necessità di dover intervenire manualmente ogni volta che effettuiamo un aggiornamento delle pagine. Nel paragrafo seguente vedremo come tutto ciò si traduce in termini grafici e funzionali. 64 Domenico Rodà

68 ESPLORIAMO L APP Questo paragrafo è dedicato all esplorazione visuale della nostra applicazione, a mo di guida turistica, proponendo direttamente degli screen d esempio. In primo luogo, mostriamo la Home: Si tratta di una schermata molto semplice, che tenta di emulare lo stile delle app mobile native, senza tuttavia scegliere icone che tendano ad assimilare lo stile di un sistema operativo piuttosto che di un altro. I tasti di selezione, grazie alle regole CSS definite in precedenza (par. Tecniche di sviluppo), rispondono anche visivamente ai controlli touch, illuminandosi con effetto trasparenza. L obiettivo di un applicazione Web pensata per il mobile è, chiaramente, quella di ricreare un interfaccia verosimile, servendosi di escamotage grafici utili allo scopo. La seguente schermata compare una volta selezionato Test Geolocalizzazione. Se eseguita per la prima volta, l app chiederà naturalmente il consenso. In caso affermativo, e se non dovessero presentarsi errori, essa restituirà il luogo in cui è collocato il dispositivo, mostrando la posizione su una mappa, centralmente rispetto allo schermo. Domenico Rodà 65

69 Proseguiamo con la navigazione: La terza schermata, qui a sinistra, invece, sarà quella mostrata nel caso in cui l utente scelga dal menù principale la voce Seleziona Città. In essa, verrà mostrata la lista delle città italiane definite metropoli. Una scelta che non risponde ad un criterio preciso, anzi lascia ampia libertà a seconda delle preferenze dello sviluppatore. Noi mostriamo un esempio pratico molto semplice, dal momento che la nostra applicazione non è realizzata per fini commerciali, ma puramente dimostrativi. Come accennato nel paragrafo Tecniche di sviluppo, abbiamo deciso di lasciare la schermata inerente alle informazioni sui cinema con uno stile ancora primitivo, proprio per mostrare come, di fatto, essa rappresenti chiaramente una pagina Web strutturata in HTML. Ai vari tag abbiamo associato solo poche regole di stile. La voce Calcola Percorso su Mappa, evidenziata nel riquadro, richiama un ulteriore schermata, mostrata nella pagina seguente. 66 Domenico Rodà

70 Selezionando la funzione Trovami, l utente non fa altro che attivare lo script JavaScript visto nel paragrafo precedente, che rileva la posizione del dispositivo e genera il percorso verso un cinema, le cui coordinate sono già note. Un esempio di possibili risultati e le modalità con le quali essi vengono visualizzati, sono mostrati come nelle due figure seguenti. Domenico Rodà 67

71 Dopo il breve tour sulla nostra applicazione possiamo concludere questo quarto capitolo nella speranza di aver espresso in modo chiaro, pratico ed efficace le potenzialità offerte da un applicazione orientata al Web. Quello della ricerca dei cinema resta, oltremodo, uno dei tanti modi possibili per sfruttare le API sulla geolocalizzazione. Pensiamo a quanti ambiti possano trovare un riscontro pratico ed interessante, ad esempio in campo ospedaliero, farmaceutico, quindi sanitario in genere; oppure, ancora, in ambito turistico, dove i punti di interesse sono numerosi (musei, monumenti, luoghi storici, etc.). Potremmo sfruttare applicazioni simili alla nostra, ancor più complesse ed articolate, rendendole man mano universali, compatibili cioè con la maggior parte dei sistemi operativi mobile. Il tutto, grazie ad un ambiente di sviluppo alla base unico per la maggior parte dei dispositivi, laddove, chiaramente, si scelga di sviluppare un applicazione esclusivamente Web come la nostra, con tutti i limiti e i pregi del caso. 68 Domenico Rodà

72 5. Analisi del sistema e confronto con sistemi correlati In questo quinto capitolo verranno descritti i punti di forza e di debolezza della nostra applicazione. Successivamente verranno effettuate dai confronti con applicazioni presenti nel PlayStore di Android, valutandone pregi, difetti e traendone spunti per miglioramenti futuri. 1 Punti di forza e debolezza 2 Confronto con sistemi correlati Domenico Rodà 69

73 PUNTI DI FORZA E DEBOLEZZA Esaminiamo in primo luogo quali sono, secondo noi, i punti di forza della nostra applicazione. La caratteristica di maggior rilievo che la contraddistingue è, senz altro, la compatibilità su larga scala; un app in HTML5, la cui infrastruttura si basi esclusivamente sulle tecnologie Web, garantisce in partenza un numero esteso di dispositivi compatibili con essa. Questo perché, come accennato in precedenza, un applicazione di tipo Web effettua una sorta di astrazione, potremmo dire, delle numerose configurazioni hardware/software dei dispositivi mobile presenti in commercio. Qui abbiamo un server che, invece, si frappone tra app e dispositivo, incaricandosi di svolgere i compiti più esosi in termini di calcolo. Per specchio riflesso, otteniamo un secondo vantaggio: se l applicazione è sviluppata con le minime, ma comunque dovute, accortezze, ne consegue un elevata omogeneità sul fronte prestazioni. Ergo, un dispositivo di fascia bassa non rischia di andare in crisi, soprattutto laddove vi sono parecchi dati da gestire. Guadagniamo, quindi, un livellamento verso l alto delle prestazioni, a partire dai dispositivi più economici, in particolare quelli Android, i quali incorrono facilmente in collassi prestazionali. Abbiamo individuato due particolari vantaggi, entrambi complementari e riferiti ai concetti di compatibilità ed ottimizzazione. Da ciò, emerge chiaramente che un app nativa, invece, richieda maggiori sforzi per garantire prestazioni accettabili su più segmenti di mercato. Pertanto, rispetto a quest ultima, un app in HTML5 non necessita di studi approfonditi, in relazione all eterogeneità del mercato, se non di piccole accortezze, come l eventuale utilizzo di script JavaScript che velocizzino, per esempio, il caricamento delle schermate (o pagine). Insomma, l ecosistema HTML5 mette a disposizione un vasto numero di escamotage, librerie e API che consentono la buona riuscita di un applicazione Web di tipo mobile, rendendola una valida alternativa. Abbiamo testato la nostra app su più smartphone e tablet Android, ciascuno con diverse versioni del sistema operativo targato Google: in nessun caso da noi sperimentato abbiamo rilevato problemi di compatibilità, o decadimenti prestazionali a fronte di un abbassamento delle capacità di calcolo. Una volta visti i nostri punti di forza, individuiamo quelli che, per noi, rappresentano i punti deboli. Un primo svantaggio risiede proprio nella premessa: per poter utilizzare l applicazione è necessario che sul dispositivo sia attiva una connessione di rete. L app, infatti, propone contenuti che richiedono una certa frequenza di aggiornamento e, in particolare, includono API strettamente dipendenti dalla rete. L unica porzione di app che potremmo rendere fruibile anche off-line è sì quella contenente le informazioni sui cinema ed i film proiettati, consapevoli, però, che esse possano variare da un giorno all altro. Per una fruizione dei contenuti nel breve termine, tuttavia, potrebbe rappresentare un buon compromesso consentirne l accesso sfruttando la memoria cache, prescindendo dalla presenza di connettività. 70 Domenico Rodà

74 Un secondo svantaggio è rappresentato dagli attacchi informatici. Stiamo lavorando in un contesto in cui tali attacchi, attuati anche solo per diletto, diventano sempre più frequenti. In questo senso, le applicazioni esclusivamente orientate al Web si presentano ancora abbastanza deboli. Per tale motivo, suggeriamo di non esagerare con l eventuale inserimento/ accesso di/a dati sensibili degli utenti (pensiamo ai siti di e-commerce). Abbiamo optato per un applicazione, infatti, che fosse semplice e asettica anche in ottica sicurezza. Nel nostro caso, comunque, un attacco informatico mirato minerebbe inevitabilmente l esperienza d uso, rendendo l app potenzialmente inaccessibile; se si decide di realizzare un app in HTML5 bisogna considerare le dovute precauzioni. A fronte di quanto esaminato, potremmo definire un bilancio che, dal generale, si estenda al caso particolare della nostra applicazione: vantaggi e svantaggi si controbilanciano, generando un equilibrio. Lo svantaggio di dover mantenere attiva una connessione di rete viene già affievolito dal fatto che chi possiede uno smartphone, nella stragrande maggioranza dei casi, possiede anche un abbonamento per l accesso alla rete a pacchetti. L approccio da noi adottato è stato quello di non intasare l applicazione di effetti grafici o animazioni affamati di banda, rendendo la fruizione dei contenuti rapida, nonché parsimoniosa in termini di risorse, anche solo sfruttando il 2G. Domenico Rodà 71

75 CONFRONTO CON SISTEMI CORRELATI Quale miglior modo di individuare effettivamente vantaggi e svantaggi se non quello di effettuare dei confronti con applicazioni simili alla nostra, già presenti nello store di Google? La prima con la quale ci confrontiamo è quella di maggior successo nel panorama nazionale, ovvero Coming Soon Cinema. Essa si presenta come un app completa, che consente di visualizzare tutti i film presenti nelle sale italiane e quelli in arrivo. Inoltre, inserendo manualmente il nome della città nella quale ci troviamo, individua quali sale nelle vicinanze proiettano i film di nostro interesse. Nel caso volessimo anche conoscere il percorso verso un determinato cinema, vi è la funzione apposita che mostra le indicazioni su mappa. Anche questa applicazione lo fa sfruttando Google Maps, al momento fattore predominante, grazie alle sue potenti API, nel settore delle app mobile incentrate sulle geolocalizzazione. Un applicazione ad alto budget come questa mostra i muscoli soprattutto sul fronte grafico, moderno ed efficace. Sono emersi, tuttavia, dei limiti: abbiamo provato ad installare Coming Soon Cinema su un dispositivo equipaggiato con Android 2.2, ma il messaggio di avviso apparso sul PlayStore di Google risulta chiaro: Il tuo dispositivo non è compatibile con questa versione. Come recita, infatti, la figura sotto, possiamo installare l app soltanto nei dispositivi che possiedono una versione di Android dalla 4.0 in poi; siamo ricorsi allora ad un secondo dispositivo, stavolta compatibile. - Fig.1-72 Domenico Rodà

76 Proseguendo nell esplorazione di Coming Soon Cinema, abbiamo notato che, almeno per quanto riguarda la città di Reggio Calabria, purtroppo non sono presenti tutti i cinema. L elenco mostrato, infatti, nonostante un raggio di ricerca impostato di default a ben 30km, ne riporta uno soltanto, con tutti gli altri appartenenti alla città di Messina: Questo ci fa supporre che siano serviti dei permessi da parte dei cinema stessi affinché venissero inseriti in lista, per quanto la scelta di non comparire in un app così diffusa risulti alquanto discutibile. Non conoscendo i dettagli del caso ci fermiamo ad una semplice supposizione, mettendo, comunque, in evidenza la questione. La modalità di ricerca proposta dall applicazione ci dà uno spunto a migliorare eventualmente il nostro sistema, basato, invece, su un elenco già visibile all utente. Ciò potrebbe farci risparmiare l utilizzo di una schermata, integrando la ricerca della città alla pagina stessa nella quale, come effetto della conferma di ricerca, verranno poi mostrati i cinema ed i relativi film. Nella pagina che segue mostriamo la parte inerente alla geolocalizzazione, sottolineando l affinità con la nostra applicazione. Domenico Rodà 73

77 Ecco come in Coming Soon Cinema viene gestita la geolocalizzazione: Una volta selezionato dall elenco un cinema, ci viene mostrata una schermata contenente la posizione su mappa del nostro punto di interesse. Possiamo notare come la mappa sia gestita anche qui da una API di Google Maps. Per ogni cinema compare una nuvoletta con indicato il nome, più una voce che permette di calcolare il percorso a partire dalla posizione dell utente. Un metodo grafico senz altro efficace e raffinato. Una volta selezionato Calcola percorso, viene generata una mappa, sfruttando sempre le API di Google Maps, che mostra il percorso verso il cinema da noi selezionato. Come possiamo notare, viene utilizzata la stessa API che abbiamo implementato nella nostra applicazione, mostrando sia le indicazioni stradali in forma testuale che la mappa. 74 Domenico Rodà

78 Volendo fare un raffronto diretto, la nostra applicazione, per quanto si trovi in uno stato embrionale, non ne esce pesantemente sconfitta dal punto di vista concettuale. Abbiamo la possibilità di utilizzare le tecniche del Web più efficaci per rendere la grafica più moderna e piacevole al tempo stesso, così come possiamo certamente introdurre delle sezioni ad hoc, che mostrino, in generale, tutti i film proiettati sul momento in Italia. E, in più, possiamo garantire un elevata compatibilità, soprattutto verso i dispositivi di fascia bassa e dotati di versioni Android meno recenti. In tal caso, dunque, la filosofia delle applicazioni Web ci viene fortemente incontro. Proponiamo un secondo confronto, stavolta con un altra applicazione di rilievo nazionale, poiché strettamente legata ad uno dei maggiori portali cinematografici del nostro Paese, ovvero MyMovies. Trattasi anch essa di un applicazione Web, supportata da un database di notevoli dimensioni. Vediamo, quindi, come si presenta all utente e quali funzionalità offre. Innanzitutto la schermata principale offre una breve panoramica sui due maggiori film del giorno, il primo al cinema ed il secondo in TV. Il tasto in basso a sinistra apre una schermata contenente una breve mappa descrittiva del sito, mentre quello in basso a destra presenta il menu principale (come da screen in basso). Domenico Rodà 75

79 A noi interessa effettuare un confronto con solo alcune delle sezioni dell applicazione, inerenti alla visualizzazione dei cinema della propria città, con i rispettivi film proiettati, e alla geolocalizzazione. Selezionando la voce Cinema, l app ci mostra un elenco di cinema intorno a noi, a partire da quello potenzialmente più vicino. Selezionando un cinema di nostro interesse, l app visualizza i rispettivi film in programmazione. Come in Coming Soon, anche qui abbiamo la possibilità di leggere una breve descrizione di un determinato film, semplicemente selezionandolo. La presenza di una breve descrizione per ciascun film ci offre uno spunto per potenziare la nostra applicazione, arricchendola di un ulteriore schermata informativa. Un altra funzione da proporre all utente potrebbe essere la gestione dei feedback, dando la possibilità di assegnare un voto ai film sotto forma di stelle (per un massimo di cinque). Tuttavia, lasciamo una riserva per tale possibilità, in quanto giudizi così sintetici potrebbero influire pesantemente sulla scelta di un film da parte di un utente indeciso. Vorremmo evitare, quindi, di adottare un sistema secondo noi distante dalla realtà e fuorviante, anche se ci fosse la possibilità di inserire commenti personali. La nostra filosofia è: abbandoniamo per un attimo lo smartphone e commentiamo i film di persona!. Non possiamo tutti amare/odiare i medesimi film. 76 Domenico Rodà

80 Giungiamo, infine, alla sezione inerente alla geolocalizzazione che, di fatto, non viene implementata. Vediamo perché. Selezionando la voce Come Arrivare, l app ci mostra una schermata con soltanto il POI individuato su una mappa statica di Google Maps. Non viene descritto alcun percorso, rendendo difficoltosa l individuazione di un cinema all interno di una mappa che, di per sé, mostra poche indicazioni. Anche cambiando la tipologia della mappa stessa la situazione non migliora. Domenico Rodà 77

81 Abbiamo notato una certa ridondanza, inoltre, nel caso in cui selezioniamo la voce Info Cinema. La schermata visualizzata, infatti, contiene una breve descrizione dei cinema e, sottostante ad essa, un immagine contenente la posizione su una mappa. A questo punto, si sarebbero potute fondere le due schermate contenenti la descrizione e la mappa. Per quanto concerne, infine, la reattività, l applicazione MyMovies non brilla in velocità ed immediatezza, causando spesso caricamenti lunghi anche con connessioni a banda larga veloci. L impressione è che, essendo prettamente un applicazione Web, debba elaborare molti dati alla volta per buona parte della navigazione. Qui ci ricolleghiamo alla nostra idea circa il fatto che un applicazione di questo tipo non debba essere troppo pesante. 78 Domenico Rodà

82 Valutiamo, infine, una terza applicazione, stavolta nativa Android, ovvero Cinema Orari Film. Di per sé risulta molto semplice e veloce; manca, tuttavia, della funzione di geolocalizzazione e calcolo del percorso verso un cinema. Una volta avviata, essa consente di effettuare una ricerca manuale della città ed individuarne, prima di tutto, tutti i film proiettati. Successivamente, una volta selezionato un film, viene visualizzato l elenco dei cinema che lo proiettano, con uno stile analogo al nostro: Domenico Rodà 79

83 Affiancate alla sezione Cinema, troviamo Trama e Video Trailer, come le due immagini d esempio mostrano di seguito: Questo ci dà uno spunto per inserire, per ogni film, una scheda descrittiva, contenente l anteprima sulla trama ed il trailer ufficiale. Quest ultima applicazione da noi testata ci è parsa molto semplice e funzionale, anche se scarna graficamente; l implementazione di una funzione incentrata sulla geolocalizzazione la renderebbe del tutto completa. Tale percorso comparativo ci ha fornito un idea concreta di cosa lo store di Android offre al momento. Inoltre, ci ha permesso di trarre spunti utili per migliorare e potenziare la nostra applicazione, mantenendoci saldi sulla linea dell immediatezza e della semplicità. 80 Domenico Rodà