Nel Parte 1 di questa serie, abbiamo creato un progetto HTML 5 di base utilizzando Netbeans come nostro 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 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 utilissime utility per scrivere codice HTML 5 più facilmente. 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 passo con questi argomenti prima di procedere, ti consiglio vivamente il
Tutorial HTML 5 in W3Schools.Per scaricare jQuery, vai al sito web del progetto all'indirizzo http://jquery.com e fare clic sul pulsante che visualizza l'avviso per l'ultima versione stabile.
Al momento della stesura di questo articolo è v1.11.3 per la compatibilità con il browser completo (incluse le versioni 6, 7 e 8 di Internet Explorer) oppure v2.1.4 se sei sicuro che i tuoi visitatori non utilizzeranno quelle versioni di IE.
Andremo con questa seconda opzione in questa guida. NON fare clic sul collegamento per il download ancora (l'illustrazione seguente ha solo lo scopo di indicare quale è l'opzione giusta).
Noterai che puoi scaricare sia un file compresso .min.js
o un non compresso .js
versione 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 brevità e semplicità d'uso, scaricheremo il file compresso (noto anche come minimizzato) nella cartella degli script all'interno della struttura del nostro sito.
Fare clic con il pulsante destro del mouse sul collegamento per la versione compressa di produzione e scegliere Salvare il link come…, e poi navigare fino alla directory indicata (si consiglia di fare riferimento al percorso indicato dove abbiamo scelto di salvare il nostro progetto in 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 a http://getbootstrap.com e fai clic su Scarica Bootstrap. Nella pagina successiva, fai 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 al tuo Download cartella, decomprimi il file e copia i file evidenziati nelle directory indicate all'interno del tuo progetto:
# cd ~/Download. # 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: