Strutturazione dei file e intestazione del documento HTML

3. Sviluppo dell’applicazione mobile con Apache Cordova

3.1 Strutturazione dei file e intestazione del documento HTML

Considerando la creazione di un progetto vuoto con Apache Cordova, come osservato nell’illustrazione 16, la cartella sulla quale andare ad inserire, o meglio, a creare il progetto, è la cartella rinominata www. In essa troviamo la seguente struttura dei file:

29. Illustrazione: Cartella di lavoro di un progetto Cordova

Tutti i file dentro le cartelle sono stati sostituiti con i file del modello particellare. Di conseguenza anche le referenze sono state cambiate, data la struttura del progetto Cordova47_{. Gli unici elementi}

mantenuti sono stati i tag<meta> che Cordova ha prodotto durante la creazione di un progetto

nuovo, e il riferimento allo script cordova.js relativo a tutto il framework Cordova (senza di esso l’applicazione non funzionerebbe, o meglio funzionerebbe ma senza utilizzare neanche un componente di un dispositivo mobile).

I tag meta vengono utilizzati per indicare quanta parte dello schermo deve essere utilizzata dal contenuto dell'applicazione e specificare come deve essere scalata. La scala si riferisce al livello dello zoom, ed indica lo zoom desiderato al momento del caricamento dell’applicazione

I valoriinitial-scale, maximum-scale, minimum-scale, controllano le proprietà di scalabilità.

Nell'applicazione le impostazioni predefinite sono configurate per caricare il contenuto al 100%, (initial-scale = 1) non consentono alcuna scalabilità dell'utente (user-scalable = no), e utilizzano la larghezza e l'altezza massima del dispositivo.

Sono presenti inoltre altri tag meta tra cui:

Il primo tag rappresenta una funzionalità Apple per riconoscere un numero di telefono e fare un collegamento automatico da esso fornendo un supporto implicito di click-to-call (clicca per chiamare). Tuttavia, troppi numeri tendono a essere selezionati con questa funzionalità abilitata, inclusi alcuni indirizzi, numeri ISBN48_{e altri dati numerici, per cui è raccomandabile impostarla su}

no. Il secondo tag permette di disattivare l'evidenziazione grigia quando l’utente esegue un tap su un Windows Phone 8 o successivi. Questa proprietà è simile al colore -webkit-tap-highlight-color in iOS di Safari con la differenza che l’elemento corrisponde ad un tag meta HTML, e l’altro ad una proprietà CSS.

47 Questo tipo di struttura risulta essere ottima per una qualsiasi applicazione web, a differenza della struttura dei file vista in precedenza dove tutti i file erano in un’unica directory. La struttura di un progetto Cordova consente di avere i file divisi per tipologia. In una cartella sono presenti i fogli di stile a cascata ( css), in un’altra tutte le immagini (img), in un’altra gli script JavaScript (js).

48 ISBN è un numero che identifica a livello internazionale in modo univoco e duraturo un titolo o una edizione di un titolo di un determinato editore. L'attuale codice ISBN è formato da una stringa di 13 cifre, suddivise in 5 settori.

Il file cordova.js caricato all’interno del corpo (body) della pagina HTML, è stato spostato nella sezione dei metadati (head)49_{. Esso è utilizzato per accedere specificamente all’hardware del}

dispositivo nativo (fotocamera, contatti, GPS, ecc.) da JavaScript alle applicazioni Cordova. Includendo questo riferimento di file, si assicura che le API di Cordova abbiano accesso a queste funzionalità e siano disponibili. Si nota inoltre che non esiste un file cordova.js che si trova in qualsiasi punto della cartella, neanche in quella relativa ai file JavaScript ( js). Questo perché la versione giusta per la piattaforma viene fornita all'utente in fase di esecuzione dall'applicazione dallo sviluppatore o dalla riga di comando se si sta costruendo i progetti utilizzando la CLI. È sufficiente garantire che il riferimento sia stata inserito per interagire con l’hardware dei dispositivi. Una delle molteplici operazioni eseguite al documento HTML è stata la rimozione di innumerevoli file referenziati tra i metadati riguardanti i fogli di stile riguardanti il design responsivo. La scelta di rimuove tali documenti dal file HMTL e dal modello particellare, è stata effettuata in vista di creare un unico foglio di stile avente tutte le informazioni necessarie per il layout (chiamato successivamente nustyle.css), senza dover separare il design responsivo (responsive.css), il layout riguardante le strutture generali (examples.css) e la grafica dettagliata degli elementi (style.css), come è avvenuto per la precedente versione dell’applicazione.

Inoltre, proseguendo nell’indagine dei metadati e dei file referenziati, si è osservato i seguenti script:

Nell’illustrazione soprastante si può osservare che ci sono ben tre riferimenti a differenti librerie (o parte di esse) JQuery. JQuery ha come obiettivo quello di semplificare la selezione, la manipolazione, la gestione degli eventi, e l'animazione di elementi del DOM all’interno delle 49 Questo è un fattore molto curioso. Un progetto standard di Cordova prevede l’inserimento dello script cordova.js e

del file javascript index.js all’interno del tag body. Nella standard HTML gli script JavaScript risiedono solitamente all’interno del tag head

pagine, nonché permette di implementare le funzionalità AJAX50_{. Osservando questi riferimenti ai}

file si è pensato di eseguire una rimozione per verificare quali fossero superflui e quali invece fossero necessari per il corretto funzionamento della pagina.

Si nota inoltre una porzione di codice embedded. Tale porzione si occupa di creare una lista indicizzata di colori e abilitare la slidesNavigation, una delle proprietà del layout di Alvaro Trigo, ed è stata rimossa ai fini di un cambiamento di layout. È preferibile inoltre non tenere codice JavaScript all’interno del documento HTML.

Infine si può asserire che la sezione dei metadati, riguardante i riferimenti ai file esterni, è stata conclusa come segue:

Dal codice soprastante si può osservare i risultanti file referenziati all’interno del tag head.

Troviamo un unico file css chiamato nustyle.css rispetto alla precedente versione che contava ben tre fogli di stile. Rimangono invariati jquery.min.js e jquery-ui.min.js ed è stato rimosso il file jquery.scroll.js51_{; in più viene aggiunto jquery.mobile-1.4.5.min.js il quale abbisogna dei precedenti}

file citati per il funzionamento52_{. Infine troviamo il file JavaScript, sul quale si è operato}

maggiormente, e il riferimento alla libreria Cordova.

50 AJAX è una tecnologia di JQuery per l’implementazione di chiamate asincrone, ovvero chiamate a delle risorse esterne che non interferiscono con l'esecuzione della risorsa chiamante; i risultati della risorsa esterna saranno utilizzabili solo quando disponibili senza tempi di sosta per l'utilizzatore (il caricamento della risorsa esterna avviene in background). Attraverso Ajax è possibile cambiare dinamicamente il contenuto di una pagina o di una sua porzione senza effettuare il ricaricamento della URL, recuperando informazioni sempre aggiornate da una risorsa web, sia essa statica (un file HTML o un XML, ad esempio) che dinamica (uno script PHP, JSP o altro), che viene contattata attraverso una chiamata HTTP lanciata tramite JavaScript, e sarà, appunto, Javascript ad occuparsi di gestire eventuali errori e di manipolare il risultato ricevuto in risposta interagendo col DOM del documento. Nonostante il grande potenziale, non è stato utilizzato per la creazione del progetto finale, pure essendo presente all’interno del framework/libreria JQuery.

51 Probabilmente utilizzato per la creazione del layout di Alvaro Trigo, quindi non più funzionale in vista del progetto finale.

52 JQuery mobile non è una reimplementazione di tutto il framework JQuery, ma semplicemente un estensione relativa ai dispositivi mobili. Nei (sotto)capitoli successivi verrà spiegato nel dettaglio il suo funzionamento all’interno del progetto e le scelte di utilizzo.

Nel documento Sviluppo di un'applicazione ibrida per l'insegnamento del modello particelle nelle scuole secondarie di primo grado (pagine 65-69)