Unsaon Pagpatahom sa Dynamic HTML5 Web App Gamit ang Online Tools

Sa akong pagsugod sa kataposang artikulo niini nga serye, ako nanghinaot nga imong masabtan ang importansya sa HTML 5 ug mobile-friendly/responsive web development.

Bisan unsa pa ang imong gipili nga pag-apod-apod sa desktop, ang Bahin 3, makatabang kanimo sa paghimo og talagsaon nga mga aplikasyon nga wala’y daghang problema.

Bisan pa, palihug timan-i nga among gitabonan lamang ang mga sukaranan sa HTML 5 ug pag-uswag sa web niini nga serye ug nagtuo nga medyo pamilyar ka sa HTML, apan ang WWW puno sa daghang mga kapanguhaan - ang uban niini FOSS - aron mapalapad kung unsa ang among gipaambit dinhi.

Niining katapusang giya, maghisgot kami bahin sa pipila sa mga himan ug ipakita kanimo kung giunsa nimo kini gamiton aron idugang sa naglungtad nga panid nga among gitrabaho sa Pagpatahom sa among UI (user interface).

Pagpanindot sa User Interface sa Website

Ang Font Awesome usa ka icon/font/css complete toolkit nga adunay potensyal nga hapsay nga mahiusa sa Bootstrap. Dili lamang ikaw makadugang sa daghang uban pang mga icon sa imong mga panid, apan mahimo usab nga usbon ang ilang gidak-on, mga anino, pagbag-o sa kolor, ug daghan pang mga kapilian gamit ang CSS.

Bisan pa, tungod kay ang pag-atubang sa CSS wala sa sulud sa kini nga serye, among atubangon ang mga default nga gidak-on nga mga icon apan gidasig ka sa parehas nga oras sa pagkalot og gamay nga lawom aron mahibal-an kung unsa ka layo ang mahimo nimo madala niini nga himan.

Aron ma-download ang Font Awesome ug i-incorporate kini sa imong proyekto, ipatuman ang mosunod nga mga command (o ayaw pag-adto nga direkta sa Github sa proyekto ug i-download ang fontawesome nga zip file pinaagi sa imong browser ug i-decompress kini gamit ang GUI tools):

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

(oo, ang domain name kay FortAwesome, nga naay R, mao nga dili 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

Ug idugang ang .css file sa lista sa mga reference sa ibabaw sa among panid, sama sa among gibuhat sa jQuery ug Bootstrap sa sayo pa (hinumdomi nga dili nimo kinahanglan nga i-type ang tanan – i-drag lang ang file gikan sa ang tab nga Mga Proyekto sa bintana sa code):

Atong kuhaon ang dropdown list sa atong navigation bar, pananglitan:

Nindot, di ba? Ang gikinahanglan mao ang pag-ilis sa mga sulod sa kasamtangan nga ul class nga ginganlan og dropdown-menu sa ubos sa index.php sa:

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

Tuohi ako - ang pagpamuhunan sa imong oras sa pagkat-on kung giunsa paggamit kini nga mga himan usa ka magantihon nga kasinatian.

Isip usa ka IT nga tawo, kinahanglan nga pamilyar ka sa daghang mga kapanguhaan alang sa tabang nga gihatag sa Internet. Tungod kay ang paghimo sa web development dili usa ka eksepsiyon, aniay pipila ka mga kapanguhaan nga kami sigurado nga imong makit-an nga mapuslanon samtang nag-tune sa imong mga aplikasyon.

Kung nag-atubang sa Javascript code (pananglitan, kung nagtrabaho uban ang jQuery sama sa among gibuhat sa Part 2), gusto nimong gamiton ang JSHint, usa ka online nga tigsusi sa kalidad sa code sa Javascript nga nagtumong sa pagtabang sa mga developer nga makit-an ang mga sayup ug potensyal nga mga problema. Kung makit-an ang mga pitfalls, gipakita sa JSHint ang numero sa linya kung diin sila nahimutang ug naghatag kanimo mga tip aron ayohon kini:

Nindot kaayo kana tan-awon, apan bisan pa sa kini nga maayo nga awtomatiko nga himan, adunay mga higayon nga kinahanglan nimo ang usa ka tawo nga motan-aw sa imong code ug sultihan ka kung giunsa kini ayo o kung dili kini mapauswag, nga nagpasabut nga ipaambit kini sa bisan unsang paagi.

Ang JSFiddle (usa ka online nga Javascript/CSS/HTML code tester) ug Bootply (parehas sa JSFiddle apan espesyalista sa Bootstrap code) tugotan ka nga mag-save sa mga snippet sa code (nailhan usab nga fiddles) ug maghatag kanimo usa ka link aron mapaambit kini nga dali sa Internet (bisan pinaagi sa email sa imong mga higala, gamit ang imong mga profile sa social network, o sa mga forum).

Summary

Niini nga artikulo, naghatag kami kanimo og pipila ka mga tip sa pag-tune sa imong mga aplikasyon sa web ug gipaambit ang pipila ka mga kapanguhaan nga magamit kung ikaw ma-stuck o gusto og laing pares sa mga mata (ug dili lang usa, apan daghan) nga tan-awon imong code aron makita kung giunsa kini pag-ayo.

Ang mga posibilidad mao nga nahibal-an nimo ang ubang mga kapanguhaan usab. Kung mao, ayaw pagduhaduha nga ipaambit kini sa nahabilin nga komunidad sa Tecmint gamit ang porma sa komentaryo sa ubos - ug sa ingon, ayaw pagpanuko sa pagpahibalo kanamo kung adunay ka mga pangutana bahin sa sulud nga gipresentar sa kini nga artikulo.

Kami naglaum nga kini nga serye naghatag kanimo usa ka daklit nga pagtan-aw sa daghang mga posibilidad sa mobile-friendly ug responsive nga web development.