Dynaamisen HTML5-verkkosovelluksen kaunistaminen online-työkalujen avulla


Kun aloitan tämän sarjan viimeisen artikkelin, toivon, että olet ymmärtänyt HTML 5:n ja mobiiliystävällisen/responsiivisen verkkokehityksen tärkeyden.

Riippumatta valitsemastasi työpöytäjakelusta, Netbeans on tehokas IDE, ja kun sitä käytetään yhdessä Linuxin peruskomentorivitaitojen ja osassa 3 käsiteltyjen työkalujen kanssa, voit luoda erinomaisia sovelluksia ilman suurta vaivaa.

Huomaa kuitenkin, että olemme käsitelleet tässä sarjassa vain HTML 5:n ja verkkokehityksen perusteet ja olettaneet, että olet jonkin verran perehtynyt HTML:ään, mutta WWW on täynnä upeita resursseja – osa niistä on FOSS – laajentaaksemme sitä, mitä olemme jakaneet täällä.

Tässä viimeisessä oppaassa puhumme joistakin näistä työkaluista ja näytämme, kuinka voit lisätä niitä olemassa olevalle sivulle, jota olemme työstäneet käyttöliittymämme kaunistamiseksi (käyttöliittymä).

Verkkosivuston käyttöliittymän kaunistaminen

Font Awesome on täydellinen ikoni/fontti/css-työkalusarja, joka voidaan integroida saumattomasti Bootstrapiin. Sen lisäksi, että voit lisätä sivuillesi paljon muita kuvakkeita, voit myös muuttaa niiden kokoa, heittää varjoja, muuttaa väriä ja monia muita vaihtoehtoja CSS:n avulla.

Koska CSS:n käsitteleminen ei kuitenkaan kuulu tämän sarjan piiriin, käsittelemme vain oletuskokoisia kuvakkeita, mutta kehotamme sinua samalla "kaivaa hieman syvemmälle" selvittääksesi, kuinka pitkälle tämä työkalu voi viedä sinut.

Lataa Font Awesome ja sisällytä se projektiisi suorittamalla seuraavat komennot (tai siirry suoraan projektin Githubiin ja lataa fontawesome-zip-tiedosto selaimesi kautta ja pura se GUI-työkaluilla):

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

(kyllä, verkkotunnuksen nimi on itse asiassa FortAwesome, jossa on R, joten se ei ole kirjoitusvirhe).

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

Ja lisää .css-tiedosto sivumme yläreunassa olevaan viiteluetteloon, aivan kuten teimme aiemmin jQueryn ja Bootstrapin kanssa (muista, että sinun ei tarvitse kirjoittaa kaikkea – vedä tiedosto Projektit-välilehdeltä koodiikkunaan):

Otetaan esimerkiksi navigointipalkin pudotusvalikko:

Hienoa, eikö? Tarvitsee vain korvata olemassa olevan ul-luokan, jonka nimi on pudotusvalikko index.php-tiedoston alareunassa, sisällöllä:

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

Usko minua – aikasi sijoittaminen näiden työkalujen käytön oppimiseen on erittäin palkitseva kokemus.

Mistä pyytää apua

IT-henkilönä sinun on tunnettava hyvin monet Internetin tarjoamat apuresurssit. Koska verkkokehitys ei ole poikkeus, tässä on muutamia resursseja, joista on varmasti hyötyä sovelluksiasi viritettäessä.

Kun käsittelet Javascript-koodia (esimerkiksi työskennellessäsi jQueryn kanssa, kuten teimme osassa 2), sinun kannattaa käyttää JSHinta, online-Javascript-laatukoodin tarkistusta, jonka tavoitteena on auttaa kehittäjiä havaitsemaan virheet ja mahdolliset ongelmat. Kun nämä sudenkuopat löytyvät, JSHint osoittaa rivinumeron, jossa ne sijaitsevat, ja antaa vinkkejä niiden korjaamiseen:

Se näyttää varmasti hyvältä, mutta jopa tämän upean automatisoidun työkalun kanssa tulee aikoja, jolloin tarvitset jonkun muun katsomaan koodiasi ja kertomaan, kuinka se korjataan tai muuten parantaa sitä, mikä edellyttää sen jakamista jollakin tavalla.

JSFiddle (verkko Javascript-/CSS-/HTML-koodin testaaja) ja Bootply (sama kuin JSFiddle, mutta erikoistunut Bootstrap-koodiin) antavat sinun tallentaa koodinpätkiä (tunnetaan myös nimellä viulut) ja tarjoamme sinulle linkin, jonka avulla voit jakaa ne helposti Internetissä (joko sähköpostitse ystävillesi, käyttämällä sosiaalisen verkoston profiileja tai foorumeilla).

Yhteenveto

Tässä artikkelissa olemme antaneet sinulle muutamia vinkkejä verkkosovellustesi virittämiseen ja jakaneet joitain resursseja, joista on hyötyä, jos jäät jumiin tai haluat toisen silmäparin (eikä vain yhden, vaan monta) katsomaan koodisi nähdäksesi, kuinka sitä voidaan parantaa.

On mahdollista, että tiedät myös muita resursseja. Jos on, voit jakaa ne muun Tecmint-yhteisön kanssa käyttämällä alla olevaa kommenttilomaketta – ja muuten, älä epäröi kertoa meille, jos sinulla on kysyttävää esitetystä sisällöstä. tässä artikkelissa.

Toivomme, että tämä sarja on antanut sinulle välähdyksen mobiiliystävällisen ja responsiivisen verkkokehityksen laajoista mahdollisuuksista.