Kako polepšati dinamično spletno aplikacijo HTML5 s spletnimi orodji

Ko začenjam zadnji članek v tej seriji, upam, da ste lahko razumeli pomen HTML 5 in mobilnega razvoja prijaznega/odzivnega spletnega razvoja.

Ne glede na vašo izbiro distribucije namizja, vam 3. del lahko pomaga ustvariti izjemne aplikacije brez večjih težav.

Vendar upoštevajte, da smo v tej seriji pokrili samo osnove HTML 5 in spletnega razvoja in domnevali, da ste nekoliko seznanjeni s HTML, vendar je WWW poln odličnih virov – nekateri med njimi so FOSS – za razširitev tega, kar smo delil tukaj.

V tem zadnjem vodniku bomo govorili o nekaterih od teh orodij in vam pokazali, kako jih uporabiti za dodajanje obstoječi strani, na kateri smo delali. Polepšamo naš uporabniški vmesnik (uporabniški vmesnik).

Polepšanje uporabniškega vmesnika spletnega mesta

Font Awesome je popoln komplet orodij za ikone/pisave/css, ki se lahko brezhibno integrira z Bootstrapom. Ne samo, da lahko na svoje strani dodate veliko drugih ikon, ampak jih lahko tudi spremenite velikost, oddate sence, spremenite barvo in številne druge možnosti z uporabo CSS.

Ker pa obravnava CSS izven obsega te serije, se bomo ukvarjali samo z ikonami privzete velikosti, hkrati pa vas spodbujamo, da »kopate malo globlje«, da odkrijete, kako daleč vas lahko to orodje pripelje.

Če želite prenesti Font Awesome in ga vključiti v svoj projekt, izvedite naslednje ukaze (ali pa pojdite neposredno na Github projekta in prenesite datoteko fontawesome zip prek brskalnika in jo razpakirajte z orodji GUI):

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

(da, ime domene je pravzaprav FortAwesome, z R, tako da to ni tipkarska napaka).

$ 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

In dodajte datoteko .css na seznam referenc na vrhu naše strani, tako kot smo to storili z jQuery in Bootstrap prej (ne pozabite, da vam ni treba vnesti vsega – samo povlecite datoteko iz zavihek Projekti v okno kode):

Vzemimo na primer spustni seznam v naši navigacijski vrstici:

Lepo, kajne? Vse, kar je potrebno, je zamenjati vsebino obstoječega ul class imenovanega padajoči meni na dnu index.php z:

<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>

Verjemite mi – vlaganje svojega časa v učenje uporabe teh orodij bo zelo koristna izkušnja.

Kot IT oseba morate biti dobro seznanjeni s številnimi viri za pomoč, ki jih ponuja internet. Ker spletno razvijanje ni izjema, je tukaj nekaj virov, za katere smo prepričani, da vam bodo med prilagajanjem aplikacij koristni.

Ko se ukvarjate s kodo Javascript (na primer, ko delate z jQuery, kot smo to storili v 2. delu), boste želeli uporabiti JSHint, spletni pregledovalnik kakovosti kode Javascript, katerega cilj je pomagati razvijalcem pri odkrivanju napak in morebitnih težav. Ko odkrijejo te pasti, JSHint navede številko vrstice, kjer se nahajajo, in vam da namige, kako jih odpraviti:

To zagotovo izgleda odlično, a tudi s tem odličnim avtomatiziranim orodjem bodo včasih potrebovali nekoga drugega, da si ogleda vašo kodo in vam pove, kako jo popraviti ali kako drugače izboljšati, kar pomeni, da jo nekako delite.

JSFiddle (spletni preizkuševalec kode Javascript/CSS/HTML) in Bootply (enako kot JSFiddle, vendar je specializiran za kodo Bootstrap) vam omogočata shranjevanje odrezkov kode (znane tudi kot fiddles) in vam nudita povezavo, da jih zelo enostavno delite prek interneta (bodisi prek e-pošte s prijatelji, z uporabo profilov v družabnih omrežjih ali na forumih).

Povzetek

V tem članku smo vam posredovali nekaj nasvetov za prilagajanje spletnih aplikacij in delili nekaj virov, ki vam bodo prišli prav, če se vam zatakne ali želite še en par oči (in ne samo enega, ampak veliko), da si jih ogledate. svojo kodo, da vidite, kako jo je mogoče izboljšati.

Verjetno je, da poznate tudi druge vire. Če je tako, jih lahko delite z ostalimi člani skupnosti Tecmint s spodnjim obrazcem za komentarje – in mimogrede, ne oklevajte in nam sporočite, če imate kakršna koli vprašanja o vsebini, predstavljeni v tem članku.

Upamo, da vam je ta serija dala vpogled v ogromne možnosti mobilnega razvoja prijaznega in odzivnega spletnega razvoja.