Jinsi ya Kupamba Programu ya Wavuti ya HTML5 Inayobadilika Kwa Kutumia Zana za Mtandaoni

Ninapoanza makala ya mwisho katika mfululizo huu, ni matumaini yangu kwamba umeweza kufahamu umuhimu wa HTML 5 na uundaji wa wavuti unaotumia simu/msikivu.

Bila kujali ugawaji wa eneo-kazi lako la chaguo, Sehemu ya 3, inaweza kukusaidia kuunda programu bora bila usumbufu mwingi.

Hata hivyo, tafadhali kumbuka kwamba tumeangazia tu misingi ya HTML 5 na ukuzaji wa wavuti katika mfululizo huu na kudhani kuwa unaifahamu HTML kwa kiasi fulani, lakini WWW imejaa rasilimali kubwa - baadhi yao ni FOSS - kupanua juu ya kile tunachofahamu. umeshiriki hapa.

Katika mwongozo huu wa mwisho, tutazungumza kuhusu baadhi ya zana hizo na kukuonyesha jinsi ya kuzitumia kuongeza kwenye ukurasa uliopo ambao tumekuwa tukifanya kazi ya Kurembesha UI (kiolesura cha mtumiaji).

Kupamba Kiolesura cha Mtumiaji cha Tovuti

Font Awesome ni aikoni/fonti/css zana kamili ya zana ambayo ina uwezo wa kuunganishwa bila mshono na Bootstrap. Sio tu kwamba unaweza kuongeza aikoni zingine nyingi kwenye kurasa zako, lakini pia unaweza kuzibadilisha, kuweka vivuli, kubadilisha rangi na chaguzi zingine nyingi kwa kutumia CSS.

Hata hivyo, kwa kuwa kushughulika na CSS ni nje ya upeo wa mfululizo huu, tutashughulika tu na aikoni za ukubwa chaguo-msingi lakini tutakuhimiza kwa wakati mmoja chimba kwa kina kidogo ili kugundua umbali ambao zana hii inaweza kukupeleka.

Ili kupakua Font Awesome na kuijumuisha kwenye mradi wako, tekeleza amri zifuatazo (au jisikie huru kwenda moja kwa moja kwenye Github ya mradi na kupakua faili ya zip ya fontawesome kupitia kivinjari chako na kuipunguza kwa kutumia zana za GUI):

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

(ndio, jina la kikoa kwa kweli ni FortAwesome, na R, kwa hivyo hiyo sio typo).

$ 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

Na ongeza faili ya .css kwenye orodha ya marejeleo iliyo juu ya ukurasa wetu, kama tulivyofanya na jQuery na Bootstrap hapo awali (kumbuka kuwa sio lazima kuandika kila kitu - buruta faili kutoka kichupo cha Miradi kwenye kidirisha cha nambari):

Wacha tuchukue orodha kunjuzi kwenye upau wetu wa kusogeza, kwa mfano:

Nzuri, sawa? Kinachohitajika ni kubadilisha maudhui ya darasa la ul iliyopo iliyopewa jina la menyu kunjuzi chini ya index.php na:

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

Niamini - kuwekeza muda wako katika kujifunza jinsi ya kutumia zana hizi kutakuwa jambo la kuthawabisha sana.

Kama mtu wa TEHAMA, ni lazima ufahamu vyema nyenzo nyingi za usaidizi ambazo Mtandao umefanya kupatikana. Kwa kuwa kufanya usanidi wa wavuti si ubaguzi, hizi hapa ni nyenzo chache ambazo tuna uhakika utapata manufaa unapotayarisha programu zako.

Unaposhughulikia msimbo wa Javascript (kwa mfano, unapofanya kazi na jQuery kama tulivyofanya katika Sehemu ya 2), utataka kutumia JSHint, kikagua msimbo wa mtandaoni wa Javascript ambacho kinalenga kusaidia wasanidi programu kugundua hitilafu na matatizo yanayoweza kutokea. Mitego hiyo inapopatikana, JSHint huonyesha nambari ya mstari mahali zilipo na kukupa vidokezo vya kuzirekebisha:

Hiyo inaonekana nzuri sana, lakini hata ukiwa na zana hii nzuri ya kiotomatiki, kutakuwa na wakati utahitaji mtu mwingine kutazama nambari yako na kukuambia jinsi ya kuirekebisha au kuiboresha, ambayo inamaanisha kuishiriki kwa njia fulani.

JSFiddle (kijaribu mtandaoni cha Javascript/CSS/HTML) na Bootply (sawa na JSFiddle lakini maalum katika msimbo wa Bootstrap) hukuwezesha kuhifadhi vijisehemu vya msimbo (pia hujulikana kama fiddles) na kukupa kiungo cha kuzishiriki kwa urahisi sana kwenye Mtandao (ama kupitia barua pepe na marafiki zako, kwa kutumia wasifu wako wa mtandao wa kijamii, au kwenye vikao).

Muhtasari

Katika nakala hii, tumekupa vidokezo vichache vya kurekebisha programu zako za wavuti na kushiriki rasilimali zingine ambazo zitakusaidia ikiwa utakwama au unataka jozi nyingine ya macho (na sio moja tu, lakini mengi) ya kutazama. nambari yako ili kuona jinsi inaweza kuboreshwa.

Kuna uwezekano kwamba unaweza kujua rasilimali zingine pia. Ikiwa ndivyo, jisikie huru kuzishiriki na jumuiya nyingine ya Tecmint kwa kutumia fomu ya maoni iliyo hapa chini - na hata hivyo, usisite kutujulisha ikiwa una maswali yoyote kuhusu maudhui yaliyotolewa katika makala haya.

Tunatumahi kuwa mfululizo huu umekupa muhtasari wa uwezekano mkubwa wa ukuzaji wa wavuti unaotumia simu na msikivu.