Kako uljepšati dinamičku HTML5 web aplikaciju koristeći online alate

Kako započinjem posljednji članak u ovoj seriji, nadam se da ste uspjeli shvatiti važnost HTML-a 5 i web razvoja prilagođenog mobilnim uređajima/responsive.

Bez obzira na vašu desktop distribuciju koju odaberete, Netbeans je moćan IDE i kada se koristi zajedno sa osnovnim vještinama Linux komandne linije i alatima o kojima se govori u 3. dijelu, može vam pomoći da kreirate izvanredne aplikacije bez mnogo muke.

Međutim, imajte na umu da smo u ovoj seriji pokrili samo osnove HTML 5 i web razvoja i pretpostavili da ste donekle upoznati sa HTML-om, ali WWW je pun sjajnih resursa – neki od njih su FOSS – da proširimo ono što smo ovdje podijelili.

U ovom posljednjem vodiču ćemo govoriti o nekim od tih alata i pokazati vam kako ih koristiti za dodavanje na postojeću stranicu na kojoj smo radili. Uljepšavanje našeg korisničkog sučelja (korisničkog sučelja).

Uljepšavanje korisničkog sučelja web stranice

Font Awesome je kompletan komplet alata za ikone/fontove/css koji ima potencijal da se neprimetno integriše sa Bootstrapom. Ne samo da možete dodati puno drugih ikona na svoje stranice, već možete i promijeniti njihovu veličinu, bacati sjene, promijeniti boju i mnoge druge opcije koristeći CSS.

Međutim, budući da je bavljenje CSS-om izvan okvira ove serije, bavit ćemo se samo ikonama zadane veličine, ali ćemo vas istovremeno ohrabriti da “kopate malo dublje” kako biste otkrili koliko daleko ovaj alat vas može odvesti.

Da preuzmete Font Awesome i ugradite ga u svoj projekat, izvršite sljedeće naredbe (ili slobodno idite direktno na Github projekta i preuzmite fontawesome zip datoteku kroz svoj preglednik i dekomprimirajte je pomoću GUI alata):

wget https://github.com/FortAwesome/Font-Awesome/releases/download/5.15.4/fontawesome-free-5.15.4-web.zip

(da, naziv domene je zapravo FortAwesome, sa R, tako da to nije greška u kucanju).

unzip fontawesome-free-5.15.4-web.zip
cp fontawesome-free-5.15.4-web/css/fontawesome.min.css /home/ubuntu/NetBeansProjects/TecmintTest/public_html/styles
cp fontawesome-free-5.15.4-web/webfonts/* /home/ubuntu/NetBeansProjects/TecmintTest/public_html/fonts

I dodajte datoteku .css na listu referenci na vrhu naše stranice, baš kao što smo ranije uradili sa jQuery i Bootstrapom (zapamtite da ne morate sve upisivati – samo prevucite datoteku sa kartice Projekti u prozor koda):

Uzmimo padajuću listu u našoj navigacijskoj traci, na primjer:

Lijepo, zar ne? Sve što je potrebno je zamijeniti sadržaj postojeće ul class pod nazivom padajući meni na dnu index.php sa:

<li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
<li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>

Vjerujte mi – ulaganje vašeg vremena u učenje korištenja ovih alata bit će vrlo korisno iskustvo.

Gdje tražiti pomoć

Kao IT osoba, morate biti dobro upoznati sa mnogim resursima za pomoć koje je Internet učinio dostupnim. Budući da web razvoj nije izuzetak, evo nekoliko resursa za koje smo sigurni da će vam biti od koristi dok podešavate svoje aplikacije.

Kada se bavite Javascript kodom (na primjer, kada radite sa jQuery-jem kao što smo radili u 2. dijelu), htjet ćete koristiti JSHint, online provjeru kvaliteta Javascript koda koji ima za cilj pomaže programerima da otkriju greške i potencijalne probleme. Kada se pronađu te zamke, JSHint označava broj reda na kojem se nalaze i daje vam savjete da ih popravite:

To sigurno izgleda sjajno, ali čak i sa ovim sjajnim automatiziranim alatom, bit će trenutaka kada će vam trebati neko drugi da pogleda vaš kod i kaže vam kako da ga popravite ili na drugi način poboljšate, što podrazumijeva da ga na neki način podijelite.

JSFiddle (online tester Javascript/CSS/HTML koda) i Bootply (isto kao JSFiddle, ali specijalizovan za Bootstrap kod) omogućavaju vam da sačuvate isječke koda (poznate i kao fiddles) i daju vam link da ih vrlo lako podijelite putem interneta (bilo putem e-pošte sa svojim prijateljima, koristeći svoje profile na društvenim mrežama ili na forumima).

Sažetak

U ovom članku dali smo vam nekoliko savjeta za podešavanje vaših web aplikacija i podijelili neke resurse koji će vam dobro doći ako zapnete ili želite još jedan par očiju (i to ne samo jedan, već mnogo) da pogledate vaš kod da vidite kako se može poboljšati.

Šanse su da možda znate i za druge resurse. Ako je tako, slobodno ih podijelite s ostatkom Tecmint zajednice koristeći formu za komentare ispod – i usput, ne oklijevajte da nam kažete ako imate bilo kakvih pitanja o predstavljenom sadržaju u ovom članku.

Nadamo se da vam je ova serija pružila uvid u ogromne mogućnosti web razvoja prilagođenog mobilnim uređajima i brzog odziva.