Dodavanje jQueryja i Bootstrapa za pisanje mobilne aplikacije i reaktivne web aplikacije

U 1. dijelu ove serije postavili smo osnovni HTML 5 projekt koristeći Netbeans kao naš IDE, a predstavili smo i nekoliko elemenata koji su dodani u ovoj novoj specifikaciji jezika.

U nekoliko riječi, jQuery možete zamisliti kao biblioteku Javascripta za više preglednika i više platformi koja može uvelike pojednostaviti skriptiranje na strani klijenta u HTML stranicama. S druge strane, Bootstrap se može opisati kao cjeloviti okvir koji integrira HTML, CSS i Javascript alate kako bi stvorio web stranice prilagođene mobilnim uređajima.

U ovom ćemo vam članku predstaviti jQuery i Bootstrap, dva neprocjenjiva uslužna programa za lakše pisanje HTML 5 koda. I jQuery i Bootstrap licencirani su pod licencama MIT i Apache 2.0, koje su kompatibilne s GPL-om i stoga su besplatni softver.

Napominjemo da osnovni koncepti HTML, CSS i Javascript nisu obuhvaćeni niti jednim člankom ove serije. Ako smatrate da prvo morate nastaviti s ovim temama, prije nego što nastavite, toplo preporučujem HTML 5 vodič u W3Schools.

Uključivanje jQueryja i Bootstrapa u naš projekt

Da biste preuzeli jQuery, idite na web mjesto projekta na http://jquery.com i kliknite gumb koji prikazuje obavijest o najnovijoj stabilnoj verziji.

U vrijeme pisanja ovog teksta, to je v1.11.3 za kompatibilnost s punim preglednikom (uključujući verzije Internet Explorer 6, 7 i 8) ili v2.1.4 ako ste sigurni da vaši posjetitelji neće koristiti te verzije IE-a.

U ovom ćemo vodiču pristupiti drugoj opciji. NEMOJTE još kliknuti na vezu za preuzimanje (sljedeća ilustracija namijenjena je samo naznacivanju koja je prava opcija).

Primijetit ćete da možete preuzeti komprimiranu .min.js ili nekomprimiranu .js verziju jQueryja. Prva je namijenjena posebno za web stranice i pomaže u smanjenju vremena učitavanja stranica (i samim time Google će bolje rangirati vašu web lokaciju), dok je druga usmjerena uglavnom na kodere u svrhu razvoja.

Radi kratkoće i jednostavnosti korištenja, preuzetu komprimiranu (poznatu i kao minificiranu) verziju preuzet ćemo u mapu skripti unutar strukture našeg web mjesta.

Desnim klikom kliknite vezu za komprimiranu, produkcijsku verziju i odaberite Spremi vezu kao ..., a zatim se pomaknite do naznačenog direktorija (možda ćete htjeti uputiti se na naznačeni put na kojem smo odlučili spremiti naš projekt u 1. dijelu).

Na kraju, kliknite Spremi na dnu trenutnog dijaloškog okvira:

Sada je vrijeme da u naš projekt dodamo Bootstrap. Idite na http://getbootstrap.com i kliknite na Download Bootstrap. Na sljedećoj stranici kliknite na istaknutu opciju kao što je naznačeno u nastavku da biste preuzeli minificirane komponente, spremne za upotrebu, u zip datoteku:

Kada se preuzimanje završi, idite u mapu Preuzimanja, raspakirajte datoteku i kopirajte istaknute datoteke u naznačene direktorije unutar vašeg projekta:

# 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

Ako sada proširite strukturu svoje stranice na Netbeansu, to bi trebalo izgledati kako slijedi: