Hvernig á að fegra Dynamic HTML5 vefforrit með netverkfærum


Þegar ég byrja á síðustu greininni í þessari röð er það von mín að þú hafir getað skilið mikilvægi HTML 5 og farsímavænnar/móttækilegrar vefþróunar.

Burtséð frá vali á skjáborðsdreifingu getur 3. hluti hjálpað þér að búa til framúrskarandi forrit án mikillar fyrirhafnar.

Hins vegar, vinsamlegast athugaðu að við höfum aðeins farið yfir grunnatriði HTML 5 og vefþróunar í þessari röð og gert ráð fyrir að þú þekkir HTML, en WWW er fullt af frábærum auðlindum - sum þeirra eru FOSS - til að útvíkka það sem við hef deilt hér.

Í þessari síðustu handbók munum við tala um sum þessara verkfæra og sýna þér hvernig á að nota þau til að bæta við núverandi síðu sem við höfum verið að vinna að Fegra notendaviðmótið okkar (notendaviðmót).

Fegra notendaviðmót vefsíðunnar

Font Awesome er fullkomið tákn/leturgerð/css verkfærasett sem hefur tilhneigingu til að sameinast Bootstrap óaðfinnanlega. Ekki aðeins þú getur bætt fullt af öðrum táknum við síðurnar þínar, heldur geturðu einnig breytt stærð þeirra, varpað skugga, breytt um lit og marga aðra valkosti með CSS.

Hins vegar, þar sem að takast á við CSS er utan gildissviðs þessarar seríu, munum við aðeins fást við sjálfgefnar stærðir tákn en hvetjum þig á sama tíma til að „grafa aðeins dýpra“ til að uppgötva hversu langt þetta tól getur tekið þig.

Til að hlaða niður Font Awesome og fella það inn í verkefnið þitt skaltu framkvæma eftirfarandi skipanir (eða ekki hika við að fara beint á Github verkefnisins og hlaða niður fontawesome zip skránni í gegnum vafrann þinn og þjappa henni niður með GUI verkfærum):

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

(já, lénið er í raun FortAwesome, með R, svo það er ekki innsláttarvilla).

$ 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

Og bættu .css skránni við tilvísanalistann efst á síðunni okkar, alveg eins og við gerðum með jQuery og Bootstrap áðan (mundu að þú þarft ekki að slá allt - bara draga skrána frá Verkefni flipann í kóðaglugganum):

Við skulum taka fellilistann á leiðsögustikunni okkar, til dæmis:

Sniðugt, ekki satt? Allt sem þarf er að skipta út innihaldi núverandi ul class fellivalmyndar neðst á index.php fyrir:

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

Trúðu mér - að fjárfesta tíma þinn í að læra hvernig á að nota þessi verkfæri verður mjög gefandi reynsla.

Sem upplýsingatæknimaður verður þú að vera vel kunnugur þeim mörgu hjálpargögnum sem internetið hefur gert aðgengilegt. Þar sem vefþróun er engin undantekning, þá eru hér nokkur úrræði sem við erum viss um að þér mun finnast gagnlegt þegar þú stillir forritin þín.

Þegar þú ert að fást við Javascript kóða (til dæmis, þegar þú vinnur með jQuery eins og við gerðum í hluta 2), viltu nota JSHint, Javascript gæðakóðaskoðara á netinu sem miðar að því að hjálpa forriturum að greina villur og hugsanleg vandamál. Þegar þessar gildrur finnast gefur JSHint til kynna línunúmerið þar sem þeir eru staðsettir og gefur þér vísbendingar um að laga þær:

Það lítur vissulega vel út, en jafnvel með þessu frábæra sjálfvirka tóli, það munu koma tímar þegar þú þarft einhvern annan til að kíkja á kóðann þinn og segja þér hvernig á að laga hann eða bæta hann á annan hátt, sem þýðir að deila honum einhvern veginn.

JSFiddle (á netinu Javascript/CSS/HTML kóða prófunartæki) og Bootply (sama og JSFiddle en sérhæft sig í Bootstrap kóða) gera þér kleift að vista kóðabúta (einnig þekkt sem fiðlur) og veita þér tengil til að deila þeim mjög auðveldlega á netinu (annaðhvort með tölvupósti með vinum þínum, með því að nota samfélagsnetið þitt eða á spjallborðum).

Samantekt

Í þessari grein höfum við veitt þér nokkur ráð til að stilla vefforritin þín og deilt nokkrum úrræðum sem munu koma þér að góðum notum ef þú festist eða vilt fá önnur augu (og ekki bara eitt, heldur mörg) til að kíkja á kóðann þinn til að sjá hvernig hægt er að bæta hann.

Líklegast er að þú vitir líka um önnur úrræði. Ef svo er skaltu ekki hika við að deila þeim með restinni af Tecmint samfélaginu með því að nota athugasemdareyðublaðið hér að neðan - og við the vegur, ekki hika við að láta okkur vita ef þú hefur einhverjar spurningar um innihaldið sem kynnt er í þessari grein.

Við vonum að þessi sería hafi gefið þér innsýn í hina miklu möguleika á farsímavænni og móttækilegri vefþróun.