Come si è detto, questa guida ha lo scopo di introdurre chi ha competenze nello sviluppo web all'ambito della creazione di app mobile. Data la varietà delle tecnologie utilizzare per quest'ultimo ambito, in questa lezione cercheremo di orientarci tra di esse.
Lavorare nel web può significare molte cose: creare elenganti pagine web, prive però di un funzionamento dinamico, oppure interfacce web con meccanismi che rispondono agli input dell'utente manipolando elementi visivi o, ancora, vere e proprie applicazioni che "girano" sul browser, in grado di attivare logiche complesse e di interagire con la rete. Queste tipologie di applicazioni, in genere, fanno uso (in maniere diversa) delle tre tecnologie portanti del web lato client (HTML, CSS e Javascript). Cerchiamo di riepilogare il ruolo di ognuna di esse.
La struttura e lo stile: HTML e CSS
Il linguaggio HTML consente di specificare la struttura delle pagine e, soprattutto con il contributo dei nuovi tag di HTML5, di valorizzare semanticamente il ruolo dei singoli elementi. I fogli di stile, invece, sono realizzati con il linguaggio CSS, e vengono usati principalmente per modellare gli aspetti grafici degli elementi (font, colori, bordi, forme, eccetera) e gestire il posizionamento all'interno della pagina. Con l'avanzare di nuove problematiche (tra cui quelle legate al mobile), la complessità dei fogli di stile è diventata un problema sempre più significativo; per ovviare a ciò, sono nati alcuni framework che ne permettono un utilizzo più flessibile e moderno, tra cui:
- Bootstrap: è un framework CSS che offre una serie di componenti molto comuni dello sviluppo web/mobile, che devono
semplicemente essere inclusi all'interno delle nostre pagine web. Nato internamente a Twitter, al giorno d'oggi ispira moltissimi designer, e lo si più quasi considerare uno standard de facto a livello mondiale. Lo introdurremo nelle prossime lezioni, ma una trattazione più approfondita può essere reperita nella guida dedicata; - SASS: si tratta di un preprocessore per fogli CSS. Permette di definirli con una sintassi modificata, con la quale
possono essere descritte regole che verranno tradotte automaticamente in fogli di stile più o meno complessi. Anche per SASS si può consultare un'apposita guida.
Javascript e il DOM
Il linguaggio JavaScript è il principale linguaggio di scripting (e, quindi, di programmazione) utilizzato sul web, principalmente lato client. Nelle nostre applicazioni, esso sarà il motore di ogni azione dinamica all'interno della struttura composta da HTML e CSS. In realtà, Javascript è già attivo nell'ambito di HTML5 in quanto viene utilizzato per implementare le API che ne fanno parte. Nel prosieguo di questa lezione, illustreremo per sommi capi le tecnologie JavaScript che saranno utilizzate nelle esercitazioni successive, mentre non ci soffermeremo sulla sintassi, per la quale si può ricorrere alla guida JavaScript di HTML.it.
Se si vuole introdurre del codice JavaScript all'interno di una pagina HTML, avremo innanzitutto bisogno di inserirlo in un tag <script>:
<script>
document.getElementById("testo").innerHTML = "Testo di prova";
</script>I tag <script> possono essere inclusi all'interno dei blocchi <head> o <body>. Mentre prima era usuale inserirli all'interno della prima porzione del file HTML (il tag <head>), oggi si tende ad includere il Javascript alla fine del blocco <body>,
al fine di velocizzare il caricamento del layout e posticipare l'esecuzione del codice dinamico.
Quello che si vede nello script precedente è un uso molto basilare di JavaScript: si sfrutta il metodo getElementById dell'oggetto document (che identifica l'intera pagina HTML) per modificare un tag con id testo e popolarne il contenuto con una stringa. Questa operazione rappresenta una semplice manipolazione del DOM, acronimo che sta per Document Object Model: si tratta di uno standard per la costruzione e gestione di una struttura dati rappresentante una pagina HTML (o un file XML). Il DOM si basa sulla creazione di una struttura ad albero, costituita dai riferimenti ai tag della pagina HTML. Ciò facilita le operazioni di manipolazione dinamica, come ad esempio quella effettuata nel semplice script visto poc'anzi.
Uno strumento che ha contributo ad agevolare molto l'utilizzo di Javascript nel mondo del web è jQuery, una libreria che nel corso della guida incontreremo più volte. Per poterla utilizzare è necessario integrarla all'interno delle nostre pagine HTML mediante un tag <script>. Ci sono due alternative per farlo:
- scaricare una versione della libreria ed integrarla all'interno
del tag<head>:
<head> <script src="jquery-1.11.3.min.js"></script> </head> - inserire un riferimento esterno a jQuery, che sarà quindi scaricato dal browser al bisogno da una CDN (Content Delivery Network). Sia Google che Microsoft offrono CDN per il download di jQuery:
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> </head>
Ovviamente, JavaScript può anche servire a molto altro. Potrebbe essere utile per gestire interazioni, animazioni e per interrogare, via rete, un server web. La tecnologia AJAX (Asynchronous Javascript and XML) permette di aggiornare
una porzione della pagina web senza ricaricarla, semplicemente svolgendo la comunicazione in background. jQuery offre vari metodi che semplificano l'implementazione delle richieste AJAX, e che vedremo, ad esempio, quando realizzeremo un'app che recupera previsioni del tempo: mentre il layout sarà realizzato con HTML e CSS staticamente, i dati meteo verranno recuperati attraverso chiamate AJAX e mostrati all'utente dopo la loro interpretazione. Per approfondimenti su jQuery, oltre a quello che vedremo insieme, è possibile consultare la guida di HTML.it.