Tuning Yiyi Awọn ohun elo Wẹẹbu HTML5 Yiyi Lilo Awọn irinṣẹ Ayelujara Ṣiṣii

Bi Mo ṣe bẹrẹ nkan ti o kẹhin ninu jara yii, ireti mi ni pe o ti ni anfani lati mọ pataki HTML 5 ati idagbasoke oju-iwe ayelujara ti ọrẹ-alafẹ/idahun. Laibikita ipinnu yiyan tabili tabili rẹ, Netbeans jẹ IDE ti o lagbara ati nigba ti a lo papọ pẹlu awọn ọgbọn laini ipilẹ laini Linux ati awọn irinṣẹ ti a sọrọ ni Apakan 3, le ṣe iranlọwọ fun ọ lati ṣẹda awọn ohun elo titayọ laisi wahala pupọ.

Sibẹsibẹ, jọwọ ṣe akiyesi pe a ti bo awọn ipilẹ HTML 5 nikan ati idagbasoke wẹẹbu ninu jara yii ati gba pe o ni itumo pẹlu HTML, ṣugbọn WWW kun fun awọn orisun nla - diẹ ninu wọn jẹ FOSS - lati faagun lori ohun ti a Ti pin nibi.

Ninu itọsọna to kẹhin yii a yoo sọrọ nipa diẹ ninu awọn irinṣẹ wọnyẹn ki o fihan ọ bi o ṣe le lo wọn lati ṣafikun si oju-iwe ti o wa tẹlẹ ti a ti n ṣiṣẹ lori Ṣiṣe Ẹwa UI wa (wiwo olumulo).

Iwọ yoo ranti lati Apá 2 ti jara yii (“Fifi jQuery ati Bootstrap lati Kọ Ohun elo Wẹẹbu HTML5 kan”) pe faili zip Bootstrap wa pẹlu itọsọna kan ti a npè ni awọn nkọwe. A ti fipamọ awọn akoonu rẹ sinu folda pẹlu orukọ kanna inu AyeRoot ti agbese wa:

Bii o ṣe le sọ fun lati aworan ti o wa loke, Bootstrap pẹlu akojọpọ awọn eroja ti a pe ni glyphicons, eyiti ko si diẹ sii ko si kere si awọn ẹya ti a ṣe sinu rẹ ti o pese awọn aami ti o wuyi fun awọn bọtini ati awọn akojọ aṣayan ninu awọn ohun elo rẹ. Atokọ pipe ti awọn glyphicons ti o wa ninu Bootstrap wa ni http://getbootstrap.com/components/.

Lati ṣe apejuwe lilo glyphicons, jẹ ki a ṣafikun diẹ si ọpa lilọ kiri ni oju-iwe akọkọ wa. Ṣe atunṣe awọn akojọ aṣayan lilọ kiri bi atẹle. Jọwọ ṣe akiyesi aaye laarin ami ami igba ipari kọọkan ati ọrọ akojọ aṣayan:

<li class="active"><a href="#"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home</a></li>
<li><a href="#"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> About</a></li>
<li><a href="#"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Contact</a></li>

(ni ọna, awọn aami igba ni a lo nibi lati ṣe idiwọ awọn aami lati di alapọ pẹlu awọn paati miiran).

Ati pe abajade niyi:

Awọn Glyphicons, botilẹjẹpe o wulo, tun ni opin. Ati pe nibi ni Font Awesome ti nwọ oju iṣẹlẹ naa. Font Oniyi jẹ aami irinṣẹ/font/css ohun elo irinṣẹ pipe ti o ni agbara lati ṣepọ laisiyonu pẹlu Bootstrap.

Kii ṣe o le ṣafikun ọpọlọpọ ọpọlọpọ awọn aami miiran si awọn oju-iwe rẹ, ṣugbọn tun le ṣe iwọn wọn, sọ awọn ojiji, yi awọ pada, ati ọpọlọpọ awọn aṣayan miiran nipa lilo CSS. Sibẹsibẹ, niwọn igba ti ibaṣowo pẹlu CSS ko kuro ni aaye ti jara yii, a yoo ṣe pẹlu awọn aami iwọn aiyipada nikan ṣugbọn gba ọ niyanju ni akoko kanna lati “jinlẹ diẹ” lati ṣe iwari bi ọpa yii ṣe le mu ọ to.

Lati ṣe igbasilẹ Font Awesome ati ṣafikun rẹ sinu iṣẹ akanṣe rẹ, ṣe awọn ofin wọnyi (tabi ni ọfẹ lati lọ taara si oju opo wẹẹbu iṣẹ naa ki o ṣe igbasilẹ faili zip nipasẹ ẹrọ aṣawakiri rẹ ki o decompress rẹ ni lilo awọn irinṣẹ GUI):

# wget http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.3.0.zip

(bẹẹni, orukọ ìkápá naa jẹ gangan FortAwesome, pẹlu R kan, nitorinaa iyẹn kii ṣe itẹwe).

# unzip font-awesome-4.3.0.zip
# cp font-awesome-4.3.0/css/font-awesome.min.css /home/gabriel/NetBeansProjects/TecmintTest/public_html/styles
# cp font-awesome-4.3.0/fonts/* /home/gabriel/NetBeansProjects/TecmintTest/public_html/fonts

Ati ṣafikun faili .css si atokọ awọn atokọ ni oke oju-iwe wa, gẹgẹ bi a ti ṣe pẹlu jQuery ati Bootstrap ni iṣaaju (ranti pe o ko ni lati tẹ ohun gbogbo - kan fa faili naa lati taabu Awọn iṣẹ akanṣe sinu window koodu):

Jẹ ki a mu atokọ fifọ silẹ ni aaye lilọ kiri wa, fun apẹẹrẹ:

O dara, otun? Gbogbo ohun ti o gba ni rirọpo awọn akoonu ti ul kilasi ti a npè ni akojọ aṣayan-silẹ ni isalẹ ti index.php pẹlu:

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

Gbagbọ mi - idoko-owo akoko rẹ ninu kikọ bi o ṣe le lo awọn irinṣẹ wọnyi yoo jẹ iriri ti o ni ere pupọ.

Gẹgẹbi eniyan IT, o gbọdọ jẹ alabapade daradara pẹlu ọpọlọpọ awọn orisun fun iranlọwọ ti Intanẹẹti ti jẹ ki o wa. Niwọn igba ṣiṣe idagbasoke wẹẹbu kii ṣe iyatọ, nibi ni awọn orisun diẹ ti a ni idaniloju pe iwọ yoo rii iwulo lakoko yiyi awọn ohun elo rẹ.

Nigbati o ba n ṣe pẹlu koodu Javascript (fun apẹẹrẹ, nigbati o ba n ṣiṣẹ pẹlu jQuery bi a ti ṣe ni Apakan 2), iwọ yoo fẹ lati lo JSHint, olutọju koodu Javascript ori ayelujara ti o ni ifọkansi ni iranlọwọ awọn olupilẹṣẹ lati wa awọn aṣiṣe ati awọn iṣoro to ṣeeṣe. Nigbati a ba rii awọn idiwọn wọnyẹn, JSHint tọka nọmba laini ibiti wọn wa ati fun ọ ni awọn itanilolobo lati ṣatunṣe wọn:

Iyẹn daju dara julọ, ṣugbọn paapaa pẹlu ọpa adaṣe nla yii, awọn akoko yoo wa nigbati iwọ yoo nilo elomiran lati wo koodu rẹ ki o sọ fun ọ bi o ṣe le ṣatunṣe rẹ tabi bibẹẹkọ mu dara si, eyiti o tumọ si pinpin rẹ bakan.

JSFiddle (olutọju koodu Javascript ayelujara/CSS/HTML lori ayelujara) ati Bootply (bakanna bi JSFiddle ṣugbọn onimọran ni koodu Bootstrap) jẹ ki o fipamọ awọn snippets koodu (eyiti a tun mọ ni awọn fiddles) ati pese ọna asopọ kan lati pin wọn ni rọọrun lori Intanẹẹti (boya nipasẹ imeeli pẹlu awọn ọrẹ rẹ, ni lilo awọn profaili nẹtiwọọki awujọ rẹ, tabi ni awọn apejọ).

Akopọ

Ninu nkan yii a ti pese fun ọ pẹlu awọn imọran diẹ lati ṣe atunṣe awọn ohun elo wẹẹbu rẹ ati pin diẹ ninu awọn orisun ti yoo wa ni ọwọ ti o ba di tabi fẹ awọn oju miiran (ati kii ṣe ọkan nikan, ṣugbọn pupọ) lati wo koodu lati wo bi o ṣe le ni ilọsiwaju.

Awọn aye ni pe o le mọ ti awọn orisun miiran daradara. Ti o ba bẹ bẹ, ni ominira lati pin wọn pẹlu iyoku ti agbegbe Tecmint nipa lilo fọọmu asọye ni isalẹ - ati ni ọna, ma ṣe ṣiyemeji lati jẹ ki a mọ boya o ni ibeere eyikeyi nipa akoonu ti a gbekalẹ ninu nkan yii.

A nireti pe jara yii ti fun ọ ni iwoye ti awọn aye nla ti ore-alagbeka ati idagbasoke oju opo wẹẹbu idahun.