HTML Mobile App: quali competenze occorrono per crearne una

Quasi contemporaneamente alla nascita degli smartphone e all’introduzione nel mercato dei dispositivi mobile, è nata la possibilità di realizzare mobile app ibride, soprattutto grazie all’avvento di tools come Phonegap, che permettono di compilare progetti HTML5 sotto forma di applicazioni native.

Molti web designer si sono orientati verso questo tipo prodotto, forti del fatto di conoscere bene i linguaggi lato-client, come appunto CSS e Javascript, riuscendo a estendere il proprio raggio d’azione e a offrire ai propri clienti un ulteriore tipo di servizio.

È quello che mi è successo quando venni a sapere della nascita di Phonegap: ricordo che non stavo nella pelle all’idea di poter “buttare fuori” un’applicazione tutta mia, e cominciai subito il percorso di creazione della mia prima Mobile App in HTML.

Grazie all’esperienza personale maturata in questi anni di sviluppo mobile, mi sono fatto un’idea di quali siano le nozioni che un web designer dovrebbe conoscere per poter realizzare un’applicazione ibrida.

In questo articolo voglio elencare quelle che secondo me sono le più importanti.

Conoscere le basi dell’HTML

Sembra banale, ma troppo spesso questo aspetto viene sottovalutato. Molti web designers scrivono il markup HTML dei propri progetti senza tener conto dei principali standard W3C, o magari ricorrendo a dei marchingegni javascript per realizzare dei controlli che molte volte sono già disponibili di default con l’HTML5.

Conoscere bene l’HTML5 è fondamentale per poter incrementare l’esperienza-utente della propria applicazione, e molte volte può sorprendere come sapere usar bene un determinato controllo possa contribuire a risparmiare un’enorme quantità di tempo.

Luca Pipolo, un autore di YourInspirationWeb, offre un’ottima serie di articoli per imparare ad usare correttamente le funzionalità dell’ HTML5.

Conoscere le principali istruzioni CSS

Ovviamente anche i CSS giocano un ruolo fondamentale.

Come per un sito web, anche in un’applicazione mobile la qualità con cui l’interfaccia viene presentata all’utente dipende interamente (o quasi) dalla combinazione di stili CSS e markup HTML.

Conoscere bene le principali istruzioni per la creazione di un layout (come posizionare i vari elementi all’interno del documento), o quelle per definire gli stili di elementi come link, pulsanti, form ecc. in modo che siano ottimizzati per il touch, è una skill che non dovrebbe mai mancare, anche se utilizziamo dei framework mobile-first come Twitter Bootstrap, Ratchet, Foundation ecc.

Saper usare animazioni CSS3 performanti

Ho parlato di performance di animazioni in diverse occasioni, quasi come un ossessionato.

Ma c’è un motivo: realizzare animazioni performanti può fare la differenza per il successo o meno di un’applicazione, eliminando quasi definitivamente le differenze con le applicazioni native.

Almeno questo è quello che ho riscontrato durante le mie esperienze.

In particolare, è molto importante  capire come funziona il processo di rendering per ognuno degli elementi DOM all’interno del documento, e come applicare la tecnica dell’accelerazione hardware.

Per approfondire questo argomento ti consiglio di leggere questo articolo:

Conoscere il Javascript ed i principali framework

Anche conoscere il javascript è molto importante.

In una mobile app tutto viene gestito dal Javascript, come l’avvio di un’animazione (aggiungendo o rimuovendo per esempio una classe CSS da un elemento DOM), il controllo degli eventi che si verificano nel momento in cui l’utente interagisce con l’interfaccia (tap sui pulsanti, focus sui campi di un form, swipe su di un <div> ecc.), le chiamate asincrone a un server remoto (le chiamate Ajax), ecc…

Saper utilizzare bene jQuery e altre librerie javascript può facilitare e velocizzare incredibilmente il processo di sviluppo.

Comprendere il concetto di single page application

Molti web desginers abituati a realizzare siti web in cui i contenuti sono organizzati in pagine separate e dove si passa da un contenuto all’altro attraverso i classici anchor link, non hanno ben chiaro, soprattutto all’inizio, il concetto di single-page-application.

Tutte le mobile app ibride, quindi quelle realizzate in HTML, sono single page application, ovvero progetti in cui il documento è definito da un solo file .html (solitamente il file index.html) che sì, viene caricato come una normale pagina internet, ma solo quando viene avviata l’applicazione.

Una volta avviata l’applicazione, per mostrare ulteriori contenuti all’utente non bisogna ricorrere ai classici anchor link che puntano a una pagina diversa, bensì manipolare gli elementi DOM del file index.html in modo da visualizzare o nascondere le parti o i componenti che si desidera.

Che questi contenuti aggiuntivi possano essere poi letti dal contenuto di altri file .html mediante delle chiamate sincrone è un altro discorso.

Ma la pagina non dovrebbe mai essere ricaricata, in quanto ogni ricaricamento del file index.html corrisponde ad un ri-avvio dell’applicazione, mentre effettuare un link a un’altra pagina sarebbe come eseguire un’applicazione separata rispetto a quella iniziale.

Saper utilizzare i principali sistemi di salvataggio dati

Ogni applicazione deve gestire dei dati, e il più delle volte questi devono essere salvati sul dispositivo o in remoto, a seconda delle esigenze e in base allo scopo per il quale è stata pensata l’applicazione.

Conoscere i vari tipi di salvataggio dati è fondamentale per creare, modificare, eliminare e leggere informazioni.

Per approfondire il discorso delle metodologie di salvataggio dati ti consiglio di leggere questo articolo:

Capire la differenza tra linguaggio lato-client e linguaggio lato-server

Sembra strano, ma è la realtà: molti web designer che si affacciano allo sviluppo di app ibride confondono ancora il concetto di linguaggi lato-client da quello di linguaggi lato-server.

Un’HTML mobile App deve essere costituita solamente da linguaggi lato-client, quindi da HTML, CSS e Javascript, in quanto all’interno di un app non disponiamo di alcun tipo di server che ci permetta di eseguire pagine Php, Asp, ASP.Net, Node.js ecc.

Possiamo poi effettuare chiamate Ajax a dei server remoti da noi gestiti, che ci forniscono i dati di cui abbiamo bisogno, i quali possono essere generati dinamicamente da linguaggi lato-server; ma l’applicazione deve poter comunque funzionare in modo indipendente da questo tipo di risorse.

Capire la logica del linguaggio MVC

Non è un aspetto essenziale per poter realizzare una applicazione non troppo complessa, ma sicuramente introdurre la logica MVC (Model View Controller) può facilitare e velocizzare il processo di sviluppo di qualsiasi applicazione, ed aiutare ad organizzare correttamente la struttura di qualsiasi progetto.

Entrare nella logica dell’MVC può rappresentare uno scoglio iniziale, ma una volta superato, la strada sarà completamente in discesa.

Per avere maggiori informazioni sull’MVC ti consiglio di leggere questo articolo:

Conclusioni

Sviluppare mobile app in HTML5 non è un gioco da ragazzi, ma posso affermare che qualsiasi web desginer ha la possibilità di crearne una.

La chiave per chi vuole affacciarsi al mondo delle mobile app è quella di cominciare con dei progetti semplici, magari all’inizio anche banali, e provare a pubblicarli in app store o play store, in modo da capirne il funzionamento (potrebbe essere utile, se sei un freelance, creare una sorta di piccola presentazione personale, corredata magari da una sezione “portfolio” per mostrare gli ultimi lavori svolti).

Quelli che ho elencato in questo articolo sono gli aspetti fondamentali su cui lavorare per riuscire a produrre un’applicazione di tutto rispetto, che abbia le caratteristiche di un’app nativa, e che possa essere offerta come servizio aggiuntivo ai propri clienti.

Crea la tua applicazione mobile

Da quando mi sono affacciato al mondo delle app ibride ho creato per i miei clienti oltre 10 applicazioni mobile, tra cui due progetti personali: Tint Weather App e Dieta SI o NO?.

Se anche tu sei un web designer e vuoi realizzare la tua applicazione mobile da distribuire nei vari stores, forse sarai interessato al mio e-book: HTML Mobile Accelerato.

Grazie ad esso verrai a conoscenza di tutte quelle tecniche che renderanno la tua mobile app fluida e reattiva come quelle native.

Tag: , , ,

L'autore

Web Designer Freelance e Developer (conosciuto anche come upCreative), si occupa del design e dello sviluppo di applicazioni web dal 2008; è abituato a gestire più ruoli e spaziare su più campi, ma le sue passioni principali sono realizzare interfacce in html5 e CSS3 e testare continuamente nuove tecniche di content marketing. Sta scrivendo un e-book su come realizzare mobile app (https://www.upcreative.net/html-mobile-accelerato/)

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

6 commenti

Trackback e pingback

  1. HTML Mobile App: quali competenze occorrono per...
    […] Quasi contemporaneamente alla nascita degli smartphone e all’introduzione nel mercato dei dispositivi mobile, è nata la possibilità di realizzare…