Onlaýn gurallary ulanyp, dinamiki HTML5 web programmasyny nädip owadanlaşdyrmaly

Bu seriýadaky soňky makalany başlanymda, HTML 5-iň we ykjam amatly/täsirli web ösüşiniň ähmiýetine düşünip bilersiňiz diýip umyt edýärin.

Iş stoluňyzyň paýlanyşyna garamazdan, 3-nji bölüm, köp kynçylyksyz ajaýyp programmalary döretmäge kömek edip biler.

Şeýle-de bolsa, bu seriýadaky diňe HTML 5 we web ösüşiniň esaslaryny öz içine alandygymyzy we HTML bilen birneme tanyşdygyňyzy çaklaýandygyňyzy ýadyňyzdan çykarmaň, ýöne WWW ägirt uly çeşmelerden doly - olaryň käbiri FOSS - biziň edýän zatlarymyzy giňeltmek üçin Bu ýerde paýlaşdyk.

Bu soňky gollanmada, şol gurallaryň käbiri barada gürleşeris we UI-ni owadanlamak (ulanyjy interfeýsi) üstünde işleýän bar bolan sahypamyza goşmak üçin olary nähili ulanmalydygyny görkezeris.

Sahypanyň ulanyjy interfeýsini owadanlamak

Font Awesome, Bootstrap bilen bökdençsiz birleşmek mümkinçiligine eýe bolan nyşan/font/css doly gurallar toplumy. Diňe sahypalaryňyza başga-da köp nyşanlary goşmak bilen çäklenmän, olaryň ölçegini üýtgedip, kölegeleri üýtgedip, reňkini üýtgedip we CSS ulanyp bilersiňiz.

Şeýle-de bolsa, CSS bilen iş salyşmak bu seriýanyň çäginden çykmaýandygy sebäpli, diňe adaty ululykdaky nyşanlar bilen iş salyşarys, şol bir wagtyň özünde bu guralyň sizi näderejede alyp biljekdigini anyklamak üçin “birneme çuňňur gazmagy” maslahat bereris.

Font Awesome-ni göçürip almak we ony taslamaňyza goşmak üçin aşakdaky buýruklary ýerine ýetiriň (ýa-da taslamanyň Github-a gönüden-göni girip, fontawesome zip faýlyny brauzeriňizden göçürip alyň we GUI gurallary arkaly dekompressirläň):

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

(hawa, domen ady aslynda FortAwesome, R bilen, şonuň üçin ýalňyşlyk däl).

$ 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

Öňem jQuery we Bootstrap bilen edişimiz ýaly sahypamyzyň ýokarsyndaky salgylanmalar sanawyna .css faýly goşuň (hemme zady ýazmaly däldigiňizi ýadyňyzdan çykarmaň - faýly süýräň kod penjiresindäki Taslamalar goýmasy):

Geliň, nawigasiýa setirimizdäki açylan sanawy alalyň:

Gowy, şeýlemi? Munuň üçin diňe index.php-iň aşagyndaky açylan menýu atly ul class mazmunyny çalyşmak:

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

Maňa ynanyň - bu gurallary nädip ulanmalydygyny öwrenmek üçin wagtyňyzy sarp etmek gaty peýdaly tejribe bolar.

IT adamy hökmünde, internetiň elýeterli bolmagy üçin köp çeşmeler bilen gowy tanyş bolmaly. Web ösüşini amala aşyrmak kadadan çykma däldigi sebäpli, programmalaryňyzy düzeniňizde peýdaly boljakdygyňyza ynanýan birnäçe çeşme bar.

Javascript kody bilen iş salyşanyňyzda (mysal üçin, 2-nji bölümdäki ýaly jQuery bilen işleýän wagtyňyz), döredijilere ýalňyşlyklary we ýüze çykyp biljek kynçylyklary ýüze çykarmaga kömek etmegi maksat edinýän onlaýn Javascript hil kody barlaýjy JSHint-i ulanmak islärsiňiz. Şol çukurlar tapylanda, JSHint nirede ýerleşýändigini görkezýär we olary düzetmek üçin görkezmeler berýär:

Bu, elbetde, gaty gowy görünýär, ýöne bu ajaýyp awtomatlaşdyrylan gural bilen hem, koduňyza göz aýlamak we ony nädip düzetmelidigini ýa-da başga bir görnüşde gowulaşdyrmak üçin başga birine mätäç boljak wagtlary bolýar, bu bolsa nädip paýlaşmagy göz öňünde tutýar.

JSFiddle (onlaýn Javascript/CSS/HTML kody barlaýjy) we Bootply (JSFiddle bilen birmeňzeş, ýöne Bootstrap kody boýunça ýöriteleşdirilen) kod böleklerini (jedeller diýlip hem atlandyrylýar) ýatda saklamaga we internetde aňsat paýlaşmak üçin baglanyşyk bermäge mümkinçilik berýär. dostlaryňyz bilen e-poçta arkaly, sosial ulgam profilleriňizi ýa-da forumlarda).

Gysgaça mazmun

Bu makalada web programmalaryňyzy sazlamak üçin birnäçe maslahat berdik we ýapyşsaňyz ýa-da başga bir jübüt gözüňize (we diňe bir däl, köpüsi) göz aýlasaňyz peýdaly boljak käbir çeşmeleri paýlaşdyk. nädip gowulandyryp boljakdygyny görmek üçin koduňyz.

Beýleki çeşmeleri hem bilip bilersiňiz. Şeýle bolsa, aşakdaky düşündiriş formuny ulanyp, Tecmint jemgyýetiniň galan bölekleri bilen paýlaşyp bilersiňiz - ýogsa-da, bu makalada görkezilen mazmun barada soraglaryňyz bar bolsa bize habar bermekden çekinmäň.

Bu seriýa size ykjam we amatly web ösüşiniň giň mümkinçilikleri barada düşünje berdi diýip umyt edýäris.