Aggiunta di jQuery e Bootstrap per scrivere un'applicazione Web reattiva e ottimizzata per i dispositivi mobili


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 cross-browser e multipiattaforma che può 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 utilità inestimabili per scrivere più facilmente codice HTML 5. Sia jQuery che Bootstrap sono concessi in licenza con le licenze MIT e Apache 2.0, che sono compatibili con la GPL e sono quindi software libero.

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 essere al corrente di 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.

Al momento della stesura di questo documento è v1.11.3 per la piena compatibilità del browser (comprese le versioni di Internet Explorer 6, 7 e 8) o v2.1.4 se sei sicuro che i tuoi visitatori non useranno quelle versioni di IE.

Andremo con questa seconda opzione in questa guida. NON fare ancora clic sul collegamento per il download (l'illustrazione seguente ha il solo scopo di indicare qual è l'opzione giusta).

Noterai che puoi scaricare una versione compressa .min.js o non compressa .js 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 motivi di brevità e facilità d'uso, scaricheremo la versione compressa (nota anche come minificata) nella cartella degli script all'interno della struttura del nostro sito.

Fare clic con il tasto destro sul collegamento per la versione compressa, di produzione e scegliere Salva collegamento con nome ..., quindi passare alla directory indicata (è possibile fare riferimento al percorso indicato in cui abbiamo scelto di salvare il nostro progetto nella Parte 1).

Infine, fai clic su Salva nella parte inferiore della finestra di dialogo corrente:

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 per l'uso, in un file zip:

Al termine del 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-3.3.5-dist.zip
# cd bootstrap-3.3.5-dist
# cp css/bootstrap.min.css /home/gabriel/NetBeansProjects/TecmintTest/public_html/styles
# cp fonts/* /home/gabriel/NetBeansProjects/TecmintTest/public_html/fonts
# cp js/bootstrap.min.js /home/gabriel/NetBeansProjects/TecmintTest/public_html/scripts

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