Yadda Ake Ƙawata Ƙwararren Yanar Gizo na HTML5 Ta Amfani da Kayan Aikin Kan layi

Yayin da na fara labarin ƙarshe a cikin wannan silsilar, fatana ne cewa kun sami damar fahimtar mahimmancin HTML 5 da haɓakar gidan yanar gizo mai dacewa da wayar hannu/amsawa.

Ba tare da la'akari da zaɓin rarraba tebur ɗin ku ba, Sashe na 3, na iya taimaka muku ƙirƙirar fitattun aikace-aikace ba tare da wahala ba.

Duk da haka, da fatan za a lura cewa mun rufe mahimman abubuwan HTML 5 da ci gaban yanar gizo a cikin wannan jerin kuma mun ɗauka cewa kun ɗan saba da HTML, amma WWW yana cike da manyan albarkatu - wasu daga cikinsu FOSS ne - don faɗaɗa akan abin da muke. na raba anan.

A cikin wannan jagorar ƙarshe, za mu yi magana game da wasu daga cikin waɗannan kayan aikin kuma mu nuna muku yadda ake amfani da su don ƙarawa zuwa shafin da muke aiki akan Ƙawata UI ɗin mu (mai amfani).

Kyawawan Mu'amalar Mai Amfani na Yanar Gizo

Font Awesome icon/font/css cikakke kayan aiki ne wanda ke da yuwuwar haɗawa da Bootstrap ba tare da matsala ba. Ba wai kawai za ku iya ƙara yawan gumaka masu yawa zuwa shafukanku ba, amma kuma kuna iya canza girman su, jefa inuwa, canza launi, da sauran zaɓuɓɓuka masu yawa ta amfani da CSS.

Koyaya, tunda mu'amala da CSS ba ta cikin iyakokin wannan silsilar, za mu yi mu'amala da gumaka masu girman tsoho ne kawai amma muna ƙarfafa ku a lokaci guda don zurfafa kaɗan don gano nisan wannan kayan aikin zai iya kai ku.

Don zazzage Font Awesome kuma shigar da shi a cikin aikin ku, aiwatar da umarni masu zuwa (ko jin daɗin zuwa kai tsaye zuwa Github na aikin kuma zazzage fayil ɗin zip ɗin fontawesome ta hanyar burauzar ku kuma yanke shi ta amfani da kayan aikin GUI):

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

(e, sunan yankin shine ainihin FortAwesome, tare da R, don haka wannan ba bugu ba ne).

$ 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

Kuma ƙara fayil ɗin .css zuwa jerin abubuwan da ke saman shafinmu, kamar yadda muka yi da jQuery da Bootstrap a baya (tuna cewa ba lallai ne ku rubuta komai ba - kawai ja fayil ɗin daga. da Projects tab a cikin code taga):

Bari mu ɗauki jerin zaɓuka a mashigin kewayawa, misali:

nice, dama? Duk abin da ake buƙata shine maye gurbin abubuwan da ke cikin ul class mai suna dropdown-menu a kasan index.php tare da:

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

Ku yarda da ni - saka hannun jarin lokacinku don koyon yadda ake amfani da waɗannan kayan aikin zai zama ƙwarewa mai lada.

A matsayinka na mutumin IT, dole ne ka san da yawa albarkatun don taimakon Intanet ya samar. Tun da yin ci gaban yanar gizo ba keɓanta ba ne, ga ƴan albarkatun da muke da tabbacin za ku sami amfani yayin kunna aikace-aikacenku.

Lokacin da ake mu'amala da lambar Javascript (misali, lokacin aiki tare da jQuery kamar yadda muka yi a cikin Sashe na 2), zaku so kuyi amfani da JSHint, mai duba lambar ingancin Javascript ta kan layi wanda ke da nufin taimakawa masu haɓakawa don gano kurakurai da matsaloli masu yuwuwa. Lokacin da aka sami waɗannan ramukan, JSHint yana nuna lambar layi inda suke kuma yana ba ku alamun gyara su:

Wannan tabbas yana da kyau, amma ko da wannan babban kayan aiki mai sarrafa kansa, akwai lokacin da za ku buƙaci wani ya duba lambar ku ya gaya muku yadda za ku gyara shi ko kuma inganta shi, wanda ke nufin raba shi ko ta yaya.

JSFiddle (mai gwada lambar Javascript na kan layi/CSS/HTML) da Bootply (daidai da JSFiddle amma ƙwararre a lambar Bootstrap) yana ba ku damar adana snippets na lamba (wanda aka fi sani da fiddles) kuma ku samar muku hanyar haɗi don raba su cikin sauƙi akan Intanet (ko dai. ta hanyar imel tare da abokanka, ta amfani da bayanan martabar hanyar sadarwar ku, ko a cikin taron tattaunawa).

Takaitawa

A cikin wannan labarin, mun ba ku ƴan shawarwari don daidaita aikace-aikacen gidan yanar gizon ku kuma mun raba wasu albarkatun da za su yi amfani idan kun makale ko kuna son wani idanu biyu (kuma ba ɗaya ba, amma da yawa) don dubawa. lambar ku don ganin yadda za a inganta shi.

Yiwuwar kuna iya sanin sauran albarkatun kuma. Idan haka ne, jin daɗin raba su tare da sauran jama'ar Tecmint ta amfani da fom ɗin sharhi da ke ƙasa - kuma ta hanya, kada ku yi shakka a sanar da mu idan kuna da wasu tambayoyi game da abubuwan da aka gabatar a cikin wannan labarin.

Muna fatan wannan silsilar ta ba ku hangen nesa game da ɗimbin yuwuwar haɓakar gidan yanar gizo mai dacewa da wayar hannu.