Ricerca nel sito web

Come scrivere un'app ottimizzata per dispositivi mobili utilizzando JQuery e Bootstrap


Nella Parte 1 di questa serie, abbiamo impostato un progetto HTML 5 di base utilizzando Netbeans come IDE e abbiamo anche presentato alcuni elementi che sono stati aggiunti in questa nuova specifica del linguaggio.

In poche parole, puoi pensare a jQuery come una libreria Javascript multibrowser e multipiattaforma in grado di semplificare notevolmente lo scripting lato client nelle pagine HTML. D'altra parte, Bootstrap può essere descritto come un framework completo che integra strumenti HTML, CSS e Javascript per creare pagine web ottimizzate per i dispositivi mobili e reattive.

In questo articolo ti presenteremo jQuery e Bootstrap, due preziosissime utility per scrivere più facilmente il codice HTML 5. Sia jQuery che Bootstrap sono rilasciati sotto le licenze MIT e Apache 2.0, che sono compatibili con la GPL e sono quindi software gratuiti.

Tieni presente che i concetti di base di HTML, CSS e Javascript non sono trattati in nessun articolo di questa serie. Se ritieni di dover aggiornarti su questi argomenti prima di procedere, consiglio vivamente il tutorial HTML 5 in W3Schools.

Incorporando jQuery e Bootstrap nel nostro progetto

Per scaricare jQuery, vai al sito web del progetto all'indirizzo http://jquery.com e fai clic sul pulsante che visualizza l'avviso per l'ultima versione stabile.

Utilizzeremo questa seconda opzione in questa guida. NON fare ancora clic sul collegamento per il download. Noterai che puoi scaricare una versione .min.js compressa o una versione .js non compressa di jQuery.

Il primo è pensato appositamente per i siti web e aiuta a ridurre il tempo di caricamento delle pagine (e quindi Google classificherà meglio il tuo sito), mentre il secondo è rivolto principalmente ai programmatori per scopi di sviluppo.

Per ragioni di brevità e facilità d'uso, scaricheremo la versione compressa (nota anche come minificata) nella cartella script all'interno della struttura del nostro sito.

cd /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts/
wget https://code.jquery.com/jquery-3.6.0.min.js

Ora è il momento di aggiungere Bootstrap al nostro progetto. Vai su http://getbootstrap.com e fai clic su Scarica Bootstrap. Nella pagina successiva, fare clic sull'opzione evidenziata come indicato di seguito per scaricare i componenti minimizzati, pronti all'uso, in un file zip:

Una volta completato il download, vai alla cartella Download, decomprimi il file e copia i file evidenziati nelle directory indicate all'interno del tuo progetto:

cd ~/Downloads
unzip -a bootstrap-5.1.3-dist.zip
cd bootstrap-5.1.3-dist/

Ora copia i file CSS e JS nelle rispettive cartelle nella struttura del progetto.

cp css/bootstrap.min.css /home/ubuntu/NetBeansProjects/TecmintTest/public_html/styles
cp js/bootstrap.min.js /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts

Se ora espandi la struttura del tuo sito in Netbeans, dovrebbe apparire come segue:

Aggiunta di riferimenti

Sicuramente sembra buono, ma non abbiamo ancora detto al nostro file index.html di utilizzare nessuno di questi file. Per ragioni di semplicità, sostituiremo prima il contenuto di quel file con un file html barebone:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery and Bootstrap</title>
</head>
<body>
 
   <!-- // Your code will appear here. -->

</body>
</html>

Quindi, basta trascinare e rilasciare ciascun file dalla sezione del navigatore del progetto al codice, all'interno dei tag , come puoi vedere nel seguente screencast. Assicurati che il riferimento a jQuery appaia prima del riferimento a Bootstrap perché quest'ultimo dipende dal primo:

Questo è tutto: hai aggiunto i riferimenti sia a jQuery che a Bootstrap e ora puoi iniziare a scrivere il codice.

Scrivere il tuo primo codice reattivo

Aggiungiamo ora una barra di navigazione e posizioniamola nella parte superiore della nostra pagina. Sentiti libero di includere 4-5 link con testo fittizio e per il momento non collegarli a nessun documento: inserisci semplicemente il seguente snippet di codice nel corpo del documento.

Non dimenticare di dedicare un po' di tempo a familiarizzare con la funzione di completamento automatico di Netbeans, che ti mostrerà le classi rese disponibili da Bootstrap non appena inizi a digitare.

Al centro dello snippet di codice riportato di seguito c'è la classe container Bootstrap, che viene utilizzata per posizionare il contenuto all'interno di un contenitore orizzontale che si ridimensionerà automaticamente in base alle dimensioni dello schermo in cui viene visualizzato. Non meno importante è la classe container-fluid, che farà sì che il contenuto all'interno occupi l'intera larghezza dello schermo.

<div class="container">
  	<nav class="navbar navbar-default">
    	<div class="container-fluid">
      	<div class="navbar-header">
        	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          	<span class="sr-only">Toggle navigation</span>
          	<span class="icon-bar"></span>
          	<span class="icon-bar"></span>
          	<span class="icon-bar"></span>
        	</button>
        	<a class="navbar-brand" href="#">Project name</a>
      	</div>
      	<div id="navbar" class="navbar-collapse collapse">
        	<ul class="nav navbar-nav">
          	<li class="active"><a href="#">Home</a></li>
          	<li><a href="#">About</a></li>
          	<li><a href="#">Contact</a></li>
          	<li class="dropdown">
            	<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
            	<ul class="dropdown-menu">
              	<li><a href="#">Action</a></li>
              	<li><a href="#">Another action</a></li>
              	<li><a href="#">Something else here</a></li>
              	<li role="separator" class="divider"></li>
              	<li class="dropdown-header">Nav header</li>
              	<li><a href="#">Separated link</a></li>
              	<li><a href="#">One more separated link</a></li>
            	</ul>
          	</li>
        	</ul>
      	</div><!--/.nav-collapse -->
    	</div><!--/.container-fluid -->
  	</nav>
</div>

Un'altra caratteristica distintiva di Bootstrap è che elimina la necessità di tabelle nel codice HTML. Utilizza invece un sistema a griglia per disporre i contenuti e farli apparire correttamente sia su dispositivi grandi che piccoli (dai telefoni fino ai grandi schermi di desktop o laptop).

Nel sistema a griglia di Bootstrap, il layout dello schermo è diviso in 12 colonne:

Una configurazione tipica consiste nell'utilizzare il layout a 12 colonne diviso in 3 gruppi di 4 colonne ciascuno, come segue:

Per indicare questo fatto nel codice e per visualizzarlo in questo modo a partire dai dispositivi di medie dimensioni (come i laptop) e superiori, aggiungere il seguente codice sotto il tag di chiusura:

...
    </nav>
   	 <div class="row">
   	 	<div class="col-md-4">This is the text in GROUP 1</div>
   	 	<div class="col-md-4">This is the text in GROUP 2</div>
   	 	<div class="col-md-4">This is the text in GROUP 3</div>
   	 </div>
</div> <!--Closing tag of the container class -->

Probabilmente avrai notato che le classi di colonne nella griglia Bootstrap indicano il layout iniziale per dimensioni specifiche del dispositivo e superiori, poiché md in questo esempio sta per medio (che copre anche lg , o dispositivi di grandi dimensioni).

Per i dispositivi più piccoli (sm e xs), i div dei contenuti vengono impilati e appaiono uno sopra l'altro.

Nel seguente screencast, puoi vedere come dovrebbe apparire la tua pagina adesso. Tieni presente che puoi ridimensionare la finestra del browser per simulare diverse dimensioni dello schermo dopo aver avviato il progetto utilizzando il pulsante Esegui progetto, come abbiamo appreso nella Parte 1.

Riepilogo

Congratulazioni! A questo punto devi aver scritto una pagina semplice, ma funzionale e reattiva. Non dimenticare di controllare il sito Web Bootstrap per acquisire maggiore familiarità con le funzionalità quasi illimitate di questo framework.

Come sempre, se hai una domanda o un commento, non esitare a contattarci utilizzando il modulo sottostante.