standard-web

www.ParsBook.org

‫‪١‬‬

‫‪WEB STANDARDS SOLUTIONS‬‬ ‫اﺳﺘﺎﻧﺪاردﻫﺎي ﻃﺮاﺣﯽ و ﺗﻮﻟﯿﺪ وب ﺳﺎﯾﺖ‬

‫ﺗﺎﻟﯿﻒ و ﺗﺮﺟﻤﻪ‪:‬‬ ‫وﺣﯿـﺪ ﻗــﺮﺑـﺎﻧـﯽ‬ ‫‪VahidGhorbani.net‬‬

‫‪www.ParsBook.org‬‬

‫‪٢‬‬

‫ﻓﻬﺮﺳﺖ‬ ‫ﻓﺼﻞ ‪1‬‬ ‫راﻫﻨﻤﺎي ﺑﻬﯿﻨﻪﺳﺎزي ﺳﺎﯾﺖ ﺑﺮاي ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ‬

‫ﻣﻘﺪﻣﻪ‬

‫اﺳﺘﻔﺎده درﺳﺖ از ﺑﺮﭼﺴﺐ ﺗﯿﺘﺮ در ﺻﻔﺤﺎت وب‬

‫ﻓﺮاﺑﺮﭼﺴﺐ ‪description‬‬

‫‪4‬‬ ‫‪5‬‬ ‫‪6‬‬ ‫‪8‬‬ ‫‪11‬‬

‫ﺑﻬﺒﻮد آدرس ﺻﻔﺤﺎت‬

‫‪13‬‬

‫ﺳﻬﻮﻟﺖ در ﺣﺮﮐﺖ در ﺳﺎﯾﺖ ﺑﺮاي ﮐﺎرﺑﺮان‬

‫‪17‬‬

‫اراﺋﻪ ﺳﺮوﯾﺲﻫﺎ و ﻣﻄﺎﻟﺐ ﺑﺎ ﮐﯿﻔﯿﺖ‬

‫‪20‬‬

‫ﺑﻬﺒﻮد ﻣﺘﻦ داﺧﻞ ﻟﯿﻨﮏﻫﺎ‬

‫‪21‬‬

‫اﺳﺘﻔﺎده از ﺑﺮﭼﺴﺐﻫﺎي ﺗﯿﺘﺮ‬

‫‪22‬‬

‫ﺑﻬﯿﻨﻪ ﺳﺎزي ﺗﺼﺎوﯾﺮ‬

‫‪24‬‬

‫ﻓﺎﯾﻞ ‪robots.txt‬‬

‫‪26‬‬

‫اﺳﺘﻔﺎده از ﺧﺼﯿﺼﻪ ‪rel‬‬

‫‪28‬‬

‫ﺗﺒﻠﯿﻎ ﺳﺎﯾﺖ ﺑﻪ ﺷﯿﻮه ﺻﺤﯿﺢ‬

‫‪29‬‬

‫اﺳﺘﻔﺎده از ﺳﺮوﯾﺲﻫﺎي ﺗﺠﺰﯾﻪ و ﺗﺤﻠﯿﻞِ وب‬

‫ﻓﺼﻞ ‪2‬‬ ‫راﻫﻨﻤﺎي اﻓﺰاﯾﺶ ﺳﺮﻋﺖ ﺑﺎرﮔﺬاري ﺻﻔﺤﺎت وب‬ ‫ﻣﻘﺪﻣﻪ‬

‫‪31‬‬ ‫‪32‬‬ ‫‪34‬‬

‫ﮐﺎﻫﺶ درﺧﻮاﺳﺖﻫﺎي ‪HTTP‬‬

‫اﺳﺘﻔﺎده از ‪Content Delivery Network‬ﻫﺎ‬

‫اﺿﺎﻓﻪ ﮐﺮدن ‪expire header‬‬

‫‪37‬‬ ‫‪39‬‬ ‫‪42‬‬

‫ﻓﺸﺮده ﮐﺮدن اﺟﺰاي ﺻﻔﺤﻪ ﺑﺎ ‪GZIP‬‬

‫‪47‬‬

‫ﻗﺮاردادن ‪ CSS‬در ﺑﺎﻻي ﺳﻨﺪ ‪HTML‬‬

‫ﻗﺮاردادن ‪ javascript‬در اﻧﺘﻬﺎي ﺳﻨﺪ ‪HTML‬‬ ‫ﻋﺪم اﺳﺘﻔﺎده از ‪CSS Expression‬‬

‫ﻗﺮاردادن ﮐﺪﻫﺎي ‪ CSS‬و ‪ jacascript‬در ﻓﺎﯾﻞ ﺟﺪاﮔﺎﻧﻪ‬

‫ﮐﻮﭼﮏ ﮐﺮدن ﻓﺎﯾﻞﻫﺎي ﺟﺎوا اﺳﮑﺮﯾﭙﺖ‬

‫‪50‬‬ ‫‪52‬‬ ‫‪55‬‬ ‫‪58‬‬ ‫‪61‬‬

‫ﺗﻨﻈﯿﻢ ‪ETAG‬ﻫﺎ‬

‫‪66‬‬

‫ﺑﻬﯿﻨﻪ ﺳﺎزي ﺗﺼﺎوﯾﺮ‬

‫‪www.ParsBook.org‬‬

‫‪٣‬‬

‫ﻓﺼﻞ ‪3‬‬

‫‪74‬‬

‫راﻫﻨﻤﺎي ﻃﺮاﺣﯽ ﺻﻔﺤﺎت وب‬

‫‪75‬‬

‫ﮐﺎرﺑﺮدﭘﺬﯾﺮي‬

‫‪77‬‬

‫ﺷﯿﻮه اﺳﺘﻔﺎده ﮐﺎرﺑﺮان از وب‬

‫‪80‬‬

‫ﻃﺮاﺣﯽ ﺳﺎﯾﺖ ﺑﻪ ﺳﺒﮏ ﻃﺮاﺣﯽ ﺑﯿﻠﺒﻮرد‬

‫‪85‬‬

‫ﺷﯿﻮه ﺻﺤﯿﺢ ﻃﺮاﺣﯽ ﺑﺨﺶ ‪navigation‬‬

‫‪91‬‬

‫ﺷﯿﻮه ﺻﺤﯿﺢ ﻃﺮاﺣﯽ ﻟﻮﮔﻮي ﺳﺎﯾﺖ‬

‫‪93‬‬

‫ﻧﻮار ﺟﺴﺘﺠﻮ در ﺳﺎﯾﺖ‬

‫‪95‬‬

‫اﻧﺘﺨﺎب ﻧﺎم ﺻﻔﺤﺎت‬

‫‪99‬‬

‫‪Tab‬ﻫﺎ در ﺻﻔﺤﺎت وب‬

‫‪103‬‬

‫ﺿﻤﺎﺋﻢ‬

‫‪104‬‬

‫ﺿﻤﯿﻤﻪ ‪ : 1‬ﭼﮏ ﻟﯿﺴﺖ ﮐﯿﻔﯿﺖ ﻃﺮاﺣﯽ‬

‫‪115‬‬

‫ﻟﯿﺴﺖ ﻣﻨﺎﺑﻊ و ﻣﺮاﺟﻊ‬

‫‪www.ParsBook.org‬‬

‫‪۴‬‬

‫ﻓﺼﻞ اول‬ ‫راﻫﻨﻤﺎي ﺑﻬﯿﻨﻪﺳﺎزي ﺳﺎﯾﺖ ﺑﺮاي ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ‬

‫‪www.ParsBook.org‬‬

‫‪۵‬‬

‫ﻣﻘﺪﻣﻪ‪:‬‬ ‫در اﯾﻦ ﻓﺼﻞ ﺷﯿﻮه ﮐﺴﺐ ﻧﺘﺎﯾﺞ ﻣﻨﺎﺳﺐ در ﺟﺴﺘﺠﻮﻫﺎي ﮔﻮﮔﻞ را ﺑﺮرﺳﯽ ﻣﯽﮐﻨﯿﻢ‪ ،‬وﻟﯽ ﻧﻤﯽﺗﻮان ﺗﻀﻤﯿﻦ ﮐﺮد ﮐﻪ‬ ‫ﺳﺎﯾﺖ ﺷﻤﺎ در ﺻﻔﺤﺎت اول ﻧﺘﺎﯾﺞ ﮔﻮﮔﻞ ﻗﺮار ﮔﯿﺮد زﯾﺮا ﺷﯿﻮه رﺗﺒﻪ دﻫﯽ و اﻣﺘﯿﺎز ﺑﻨﺪي ﺳﺎﯾﺖﻫﺎ ﺗﻮﺳﻂ ﯾﮏ‬ ‫اﻟﮕﻮرﯾﺘﻢ ﻣﺤﺮﻣﺎﻧﻪ ﮐﻨﺘﺮل ﻣﯽﺷﻮد ﮐﻪ در اﺧﺘﯿﺎر ﻫﯿﭻ ﮐﺲ ﻧﯿﺴﺖ‪.‬‬ ‫ﺑﻬﯿﻨﻪ ﺳﺎزي ﺳﺎﯾﺖ ﺑﺮاي ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ ﺷﺎﻣﻞ ﺗﻐﯿﯿﺮات ﮐﻮﭼﮑﯽ اﺳﺖ و اﯾﻦ ﺗﻐﯿﯿﺮات ﺑﺎﯾﺪ ﺑﻪ ﺷﮑﻞ‬ ‫ﻣﺴﺘﻤﺮ در ﺳﺎﯾﺖ اﯾﺠﺎد ﺷﻮﻧﺪ‪ .‬ﭘﯿﺸﺮﻓﺖ ﺳﺎﯾﺖ ﺑﺎﯾﺪ ﺑﺎ اﺳﺘﻔﺎده از اﺑﺰارﻫﺎي ﻣﺨﺘﻠﻒ ﺳﻨﺠﯿﺪه ﺷﺪه و ﻣﯿﺰان ﺗﺎﺛﯿﺮ ﻫﺮ‬ ‫ﺷﯿﻮه ﺑﻪ درﺳﺘﯽ اﻧﺪازه ﮔﯿﺮي ﺷﻮد‪ .‬ﺳﭙﺲ ﺗﻐﯿﯿﺮات ﻣﻔﯿﺪ ﺑﺮاي ﺑﻬﺒﻮد ﻫﺮ ﭼﻪ ﺑﯿﺸﺘﺮ وﺿﻌﯿﺖ ﺳﺎﯾﺖ‪ ،‬ﺑﺎﯾﺪ ﺑﺮ روي‬ ‫ﺳﺎﯾﺖ اﻋﻤﺎل ﮔﺮدد‪ .‬ﻣﻤﮑﻦ اﺳﺖ ﺑﺎ ﺑﺮﺧﯽ از اﯾﻦ ﺗﮑﻨﯿﮏﻫﺎآﺷﻨﺎ ﺑﺎﺷﯿﺪ زﯾﺮا اﯾﻦ ﺗﮑﻨﯿﮏﻫﺎ ﺟﺰو ﭘﺎﯾﻪ و اﺳﺎس ﻣﺒﺎﺣﺚ‬ ‫ﺑﻬﯿﻨﻪ ﺳﺎزي ﺳﺎﯾﺖ ﺑﺮاي ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ ﺑﻪ ﺣﺴﺎب ﻣﯽآﯾﻨﺪ‪.‬‬

‫!‬

‫ﺑﻬﯿﻨﻪ ﺳﺎزي ﺳﺎﯾﺖ ﺑﺮاي ﻣﻮﺗﻮر ﻫﺎ ي ﺟﺴﺘﺠﻮ ﺗﻨﻬﺎ ﺑﺮ روي ﻧﺘﺎﯾﺞ ﻋﺎدي ﺟﺴﺘﺠﻮ ﺗﺎﺛﯿﺮﮔﺬار اﺳﺖ و‬

‫ﺑﺮروي ﻧﺘﺎﯾﺞ ﻣﺮﺑﻮط ﺑﻪ ﺗﺒﻠﯿﻐﺎت ﭘﻮﻟﯽ ﻣﺎﻧﻨﺪ ‪ Google adWord‬ﺗﺎﺛﯿﺮي ﻧﺪارد ‪.‬‬ ‫ﻫﻤﯿﺸﻪ ﺳﻌﯽ ﮐﻨﯿﺪ ﺑﻬﯿﻨﻪ ﺳﺎزيﻫﺎي ﺧﻮد را ﺑﻪ ﺷﮑﻠﯽ اﻧﺠﺎم دﻫﯿﺪ ﮐﻪ ﻧﺨﺴﺖ‪ ،‬رﺿﺎﯾﺖ ﮐﺎرﺑﺮان ﺳﺎﯾﺘﺘﺎن را‬ ‫ﺟﻠﺐ ﮐﻨﯿﺪ ‪.‬آﻧﻬﺎ اﺳﺘﻔﺎده ﮐﻨﻨﺪﮔﺎن اﺻﻠﯽ ﺳﺎﯾﺖ ﺷﻤﺎ ﻫﺲ‪.1‬ﺗﻨﺪ و از ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ اﺳﺘﻔﺎده ﻣﯽﮐﻨﻨﺪ ﺗﺎ ﺷﻤﺎ را‬

‫‪www.ParsBook.org‬‬

‫‪۶‬‬

‫ﺑﯿﺎﺑﻨﺪ ‪.‬اﮔﺮ ﺑﻪ ﺳﺨﺘﯽ ﺑﺮ روي ﮐﺴﺐ رﺗﺒﻪ ﺑﺎﻻ در ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ ﺗﻤﺮﮐﺰ ﮐﻨﯿﺪ‪ ،‬ﻣﻤﮑﻦ اﺳﺖ ﻧﺘﯿﺠﻪ را ﮐﻪ‬ ‫ﻣﯽﺧﻮاﻫﯿﺪ‪ ،‬ﺑﻪ دﺳﺖ ﻧﯿﺎورﯾﺪ ‪.‬ﺑﻬﯿﻨﻪ ﺳﺎزي ﺑﺮاي ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ ﯾﻌﻨﯽ ﻧﻬﺎﯾﺖ ﺗﻼش ﺑﺮاي ﺗﺴﻬﯿﻞ دﺳﺘﺮﺳﯽ‬ ‫ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ ﺑﻪ ﻣﺤﺘﻮاي ﺳﺎﯾﺖ ﺷﻤﺎ‪.‬‬ ‫اﮔﺮ ﺳﺎﯾﺖ ﺷﻤﺎ در ﺻﻔﺤﻪ ﻧﺘﺎﯾﺞ ﺑﺎﺷﺪ‪ ،‬ﻣﺤﺘﻮاي ﺑﺮﭼﺴﺐ ﺗﯿﺘﺮ ﻫﻤﯿﺸﻪ در اوﻟﯿﻦ ﺧﻂ ﺑﺎ ﻓﻮﻧﺖ ﺗﻮ ﭘﺮ ﻧﻤﺎﯾﺶ‬ ‫داده ﻣﯽﺷﻮد )اﻟﺒﺘﻪ ﺑﻪ ﺷﺮﻃﯽ ﮐﻪ ﮐﻠﻤﻪ ﺟﺴﺘﺠﻮ ﺷﺪه در ﺗﯿﺘﺮ ﺻﻔﺤﻪ ﺷﻤﺎ وﺟﻮد داﺷﺘﻪ ﺑﺎﺷﺪ( ‪ .‬اﯾﻦ ﺑﻪ ﮐﺎرﺑﺮان ﮐﻤﮏ‬ ‫ﻣﯽﮐﻨﺪ ﺗﺎ ﺗﺸﺨﯿﺺ دﻫﻨﺪ آﯾﺎ ﺳﺎﯾﺖ ﻣﻮرد ﻧﻈﺮ ﺑﺎ ﺟﺴﺘﺠﻮي آﻧﺎن ﻣﺮﺗﺒﻂ اﺳﺖ ﯾﺎ ﺧﯿﺮ‪.‬‬ ‫ﺑﺮاي ﺻﻔﺤﺎت ﺧﻮد‪ ،‬ﺗﯿﺘﺮﻫﺎي ﻣﻨﺤﺼﺮ ﺑﻪ ﻓﺮد و ﻣﻨﺎﺳﺐ اﻧﺘﺨﺎب ﮐﻨﯿﺪ‬ ‫ﯾﮏ ﺑﺮﭼﺴﺐ‪ 1‬ﺗﯿﺘﺮ‪ ،‬ﻫﻢ ﺑﻪ ﮐﺎرﺑﺮان و ﻫﻢ ﺑﻪ ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ اﻋﻼم ﻣﯽﮐﻨﺪ ﮐﻪ ﺻﻔﺤﻪ ﻣﻮرد ﻧﻈﺮ درﺑﺎرة ﭼﯿﺴﺖ‪.‬‬ ‫ﺑﺮﭼﺴﺐ >‪ <Title‬ﺑﺎﯾﺪ در ﻣﯿﺎن ﺑﺮﭼﺴﺐ >‪ <head‬در ﺑﺎﻻي ﺳﻨﺪ ‪ HTML‬ﺷﻤﺎ ﻗﺮار ﺑﮕﯿﺮد ‪.‬در ﺑﻬﺘﺮﯾﻦ ﺣﺎﻟﺖ ﺑﺎﯾﺪ‬ ‫ﺑﺮاي ﻫﺮ ﺻﻔﺤﻪ از ﺳﺎﯾﺖ‪ ،‬ﯾﮏ ﺗﯿﺘﺮ ﻣﻨﺤﺼﺮ ﺑﻪ ﻓﺮد داﺷﺘﻪ ﺑﺎﺷﯿﺪ‪.‬‬

‫ﺗﯿﺘﺮ ﺻﻔﺤﻪ ﻧﺨﺴﺖ ﺳﺎﯾﺖ ﻣﯽﺗﻮاﻧﺪ ﺣﺎوي ﻧﺎم ﺳﺎﯾﺖ ﯾﺎ ﻧﺎم ﺷﺮﮐﺖ ﺷﻤﺎ و ﻫﻤﭽﻨﯿﻦ ﺣﺎوي ﺑﺮﺧﯽ اﻃﻼﻋﺎت ﻣﻬﻢ دﯾﮕﺮ‬ ‫ﻫﻤﭽﻮن ﻣﻮﻗﻌﯿﺖ ﻓﯿﺰﯾﮑﯽ و ﯾﺎ ﺣﺘﯽ ﻣﻌﺮﻓﯽ ﺑﺮﺧﯽ از زﻣﯿﻨﻪﻫﺎي ﮐﺎري ﺷﺮﮐﺖ ﻣﺎ ﺑﺎﺷﺪ‪.‬‬

‫ﮐﺎرﺑﺮي ﻋﺒﺎرت ‪ baseball cards‬را ﺟﺴﺘﺠﻮ ﮐﺮده اﺳﺖ‬

‫‪١‬‬

‫‪tag‬‬

‫‪www.ParsBook.org‬‬

‫‪٧‬‬

‫ﺳﺎﯾﺖ ﻣﺎ در ﺻﻔﺤﻪ اول ﻧﺘﺎﯾﺞ ﻧﻤﺎﯾﺶ داده ﺷﺪه و ﮐﻠﻤﺎﺗﯽ ﮐﻪ ﮐﺎرﺑﺮ ﺟﺴﺘﺠﻮ ﮐﺮده و در ﺗﯿﺘﺮ ﻫﻢ‬ ‫ﻣﻮﺟﻮد ﺑﻮده اﺳﺖ‪ ،‬ﺑﺎ ﻓﻮﻧﺖ ﺗﻮ ﭘﺮ ﻧﻤﺎﯾﺶ داده ﺷﺪه اﺳﺖ ‪.‬‬

‫ﺣﺎل اﮔﺮ ﮐﺎرﺑﺮ ﺑﺮ روي ﻧﺘﯿﺠﻪ ﮐﻠﯿﮏ ﮐﻨﺪ‪ ،‬ﺗﯿﺘﺮ ﻣﻄﻠﺐ در ﺑﺎﻻي ﭘﻨﺠﺮه ﻣﺮورﮔﺮ ﻧﻤﺎﯾﺶ داده ﻣﯽ ﺷﻮد ‪.‬‬ ‫ﺗﯿﺘﺮﻫﺎي ﺻﻔﺤﺎت داﺧﻠﯽ ﺳﺎﯾﺖ ﺷﻤﺎ ﺑﺎﯾﺪ ﺑﻪ روﺷﻨﯽ‪ ،‬زﻣﯿﻨﻪ ﮐﺎري و ﻫﺪف آن ﺻﻔﺤﻪ ﺧﺎص را ﺗﻮﺻﯿﻒ ﮐﻨﺪ‬ ‫و ﻣﻤﮑﻦ اﺳﺖ ﻣﺎﯾﻞ ﺑﺎﺷﯿﺪ ﮐﻪ ﻧﺎم ﺗﺠﺎرﯾﺘﺎن را ﻧﯿﺰ ﺑﻪ ﺗﯿﺘﺮ ﺻﻔﺤﺎت داﺧﻠﯽ اﺿﺎﻓﻪ ﮐﻨﯿﺪ‪ .‬ﺻﻔﺤﻪ ﻧﺨﺴﺖ ﺳﺎﯾﺖ ﻣﺎ در‬ ‫ﻧﺘﺎﯾﺞ ﻧﻤﺎﯾﺶ داده ﺷﺪه اﺳﺖ و ﺗﯿﺘﺮ ﺻﻔﺤﻪ ﻧﺨﺴﺖ ﻧﯿﺰ در ﺧﻂ اول دﯾﺪه ﻣﯽﺷﻮد )دﻗﺖ ﮐﻨﯿﺪ ﮐﻠﻤﺎﺗﯽ ﮐﻪ در ﺗﯿﺘﺮ‬ ‫ﺻﻔﺤﻪ وﺟﻮد دارد و ﺗﻮﺳﻂ ﮐﺎرﺑﺮ ﻧﯿﺰ ﺟﺴﺘﺠﻮ ﺷﺪه اﺳﺖ‪ ،‬ﺑﺎ ﻓﻮﻧﺖ ﺿﺨﯿﻢ ﻧﻤﺎﯾﺶ داده ﻣﯽﺷﻮﻧﺪ(‪ .‬اﮔﺮ ﮐﺎرﺑﺮي ﺑﺮ‬ ‫روي ﻧﺘﺎﯾﺞ ﺟﺴﺘﺠﻮ ﮐﻠﯿﮏ ﮐﻨﺪ و ﺻﻔﺤﻪ ﻣﺎ را در ﻣﺮورﮔﺮ ﺧﻮد ﺑﺎز ﮐﻨﺪ‪ ،‬ﺗﯿﺘﺮ ﺻﻔﺤﻪ در ﺑﺎﻻي ﭘﻨﺠﺮه ﻣﺮورﮔﺮش ﺑﻪ‬ ‫ﻧﻤﺎﯾﺶ در ﻣﯽآﯾﺪ‪.‬‬ ‫ﭼﻨﺪ ﻧﮑﺘﮥ ﻣﻔﯿﺪ ﺑﺮاي اﺳﺘﻔﺎده درﺳﺖ از ﺑﺮﭼﺴﺐ ﺗﯿﺘﺮ در ﺻﻔﺤﺎت وب‬ ‫‪‬‬

‫ﻣﺤﺘﻮاي ﺻﻔﺤﻪ را ﺑﻪ دﻗﺖ ﺗﻮﺻﯿﻒ ﮐﻨﯿﺪ ‪ -‬ﺗﯿﺘﺮي را اﺳﺘﻔﺎده ﮐﻨﯿﺪ ﮐﻪ ﺑﻪ ﺧﻮﺑﯽ ﻣﺤﺘﻮاي ﺻﻔﺤﻪ را‬ ‫ﺗﻮﺿﯿﺢ دﻫﺪ‪.‬‬ ‫ﮐﺎرﻫﺎﯾﯽ ﮐﻪ ﺑﺎﯾﺪ از اﻧﺠﺎﻣﺸﺎن اﺟﺘﻨﺎب ﮐﻨﯿﺪ‪:‬‬ ‫‪ o‬اﻧﺘﺨﺎب ﺗﯿﺘﺮﻫﺎﯾﯽ ﮐﻪ ﻫﯿﭻ ارﺗﺒﺎﻃﯽ ﺑﺎ ﻣﺤﺘﻮاي ﺻﻔﺤﻪ ﻧﺪارﻧﺪ‬ ‫‪ o‬اﺳﺘﻔﺎده از ﺗﯿﺘﺮﻫﺎي ﭘﯿﺶ ﻓﺮض و ﯾﺎ ﺑﯽ ﻣﻌﻨﯽ ﻣﺎﻧﻨﺪ ‪ untitled‬و ﯾﺎ ‪1 New Page‬‬

‫‪‬‬

‫ﺑﺮاي ﻫﺮ ﺻﻔﺤﻪ‪ ،‬ﯾﮏ ﺗﯿﺘﺮ ﻣﻨﺤﺼﺮ ﺑﻪ ﻓﺮد اﺳﺘﻔﺎده ﮐﻨﯿﺪ ‪ -‬ﻫﺮ ﮐﺪام از ﺻﻔﺤﺎت ﺑﺎﯾﺪ ﯾﮏ ﺗﯿﺘﺮ ﻣﻨﺤﺼﺮ ﺑﻪ‬ ‫ﻓﺮد داﺷﺘﻪ ﺑﺎﺷﺪ ﮐﻪ ﺑﻪ ﮔﻮﮔﻞ ﮐﻤﮏ ﮐﻨﺪ ﺗﺎ ﺑﺘﻮاﻧﺪ آن ﺻﻔﺤﻪ از ﺳﺎﯾﺖ را از دﯾﮕﺮ ﺻﻔﺤﺎت ﺳﺎﯾﺖ‪ ،‬ﻣﺘﻤﺎﯾﺰ ﮐﻨﺪ‪.‬‬ ‫ﮐﺎرﻫﺎﯾﯽ ﮐﻪ ﺑﺎﯾﺪ از اﻧﺠﺎﻣﺸﺎن اﺟﺘﻨﺎب ﮐﻨﯿﺪ‪:‬‬ ‫‪ o‬اﺳﺘﻔﺎده از ﯾﮏ ﺗﯿﺘﺮ ﺑﺮاي ﻫﻤﻪ ﺻﻔﺤﺎت ﺳﺎﯾﺖ و ﯾﺎ ﺑﺨﺶ اﻋﻈﻢ ﺻﻔﺤﺎت ﺳﺎﯾﺖ‬

‫‪www.ParsBook.org‬‬

‫‪٨‬‬

‫‪‬‬

‫از ﺗﯿﺘﺮﻫﺎي ﮐﻮﺗﺎه در ﻋﯿﻦ ﺣﺎل ‪ ،‬ﺗﻮﺻﯿﻔﯽ اﺳﺘﻔﺎده ﮐﻨﯿﺪ ‪ -‬ﺗﯿﺘﺮﻫﺎ ﻣﯽﺗﻮاﻧﻨﺪ ﮐﻮﺗﺎه و ﺗﻮﺻﯿﻔﯽ ﺑﺎﺷﻨﺪ ‪.‬اﮔﺮ‬ ‫ﺗﯿﺘﺮ ﺻﻔﺤﻪ ﺷﻤﺎ ﺧﯿﻠﯽ ﻃﻮﻻﻧﯽ ﺑﺎﺷﺪ‪ ،‬ﮔﻮﮔﻞ ﺗﻨﻬﺎ ﺑﺨﺸﯽ از آن را در ﻧﺘﺎﯾﺞ ﺟﺴﺘﺠﻮ ﻧﻤﺎﯾﺶ ﻣﯽدﻫﺪ‪.‬‬ ‫ﮐﺎرﻫﺎﯾﯽ ﮐﻪ ﺑﺎﯾﺪ از اﻧﺠﺎﻣﺸﺎن اﺟﺘﻨﺎب ﮐﻨﯿﺪ‪:‬‬ ‫‪ o‬اﺳﺘﻔﺎده از ﺗﯿﺘﺮﻫﺎي ﺑﺴﯿﺎر ﻃﻮﻻﻧﯽ ﮐﻪ ﺑﻪ ﮐﺎرﺑﺮان ﮐﻤﮑﯽ ﻧﻤﯽﮐﻨﻨﺪ‬ ‫‪ o‬ﻗﺮار دادن ﮐﻠﻤﺎت ﮐﻠﯿﺪي ﻏﯿﺮ ﺿﺮوري در ﺑﺮﭼﺴﺐ ﺗﯿﺘﺮ‬

‫از ﻓﺮا ﺑﺮﭼﺴﺐ‪ description 2‬اﺳﺘﻔﺎده ﮐﻨﯿﺪ‬ ‫ﻓﺮا ﺑﺮﭼﺴﺐِ ‪ description‬ﯾﮏ ﺧﻼﺻﻪ از ﻣﺤﺘﻮاي ﺻﻔﺤﻪ ﺑﻪ ﮔﻮﮔﻞ و ﺑﻘﯿﻪ ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ اراﺋﻪ‬ ‫ﻣﯽﮐﻨﺪ‪ .‬از آﻧﺠﺎﯾﯿﮑﻪ ﺗﯿﺘﺮ ﺻﻔﺤﺎت ﺗﻨﻬﺎ ﺣﺎوي ﮐﻠﻤﺎت ﻣﺤﺪودي اﺳﺖ‪ ،‬ﻓﺮاﺑﺮﭼﺴﺐ ‪ description‬ﻣﯽﺗﻮاﻧﺪ ﺣﺎوي ﯾﮏ‬ ‫ﯾﺎ دو ﺧﻂ ﻣﺘﻦ ﯾﺎ ﺣﺘﯽ ﯾﮏ ﭘﺎراﮔﺮاف ﮐﻮﺗﺎه ﺑﺎﺷﺪ ‪. Google Webmaster Tools‬اﺑﺰاري ﻣﻨﺎﺳﺒﯽ ﺑﺎ ﻋﻨﻮان‬ ‫‪content analysis section‬در اﺧﺘﯿﺎر ﺷﻤﺎ ﻗﺮار ﻣﯽدﻫﺪ و ﺑﻪ ﺷﻤﺎ اﻋﻼم ﻣﯽﮐﻨﺪ ﮐﻪ ﻓﺮاﺑﺮﭼﺴﺐ ﺷﻤﺎ ﺑﺴﯿﺎر ﮐﻮﺗﺎه‬ ‫ﯾﺎ ﺑﺴﯿﺎر ﻃﻮﻻﻧﯽ اﺳﺖ و ﯾﺎ ﺣﺘﯽ ﺑﻪ دﻓﻌﺎت ﺑﯿﻦ ﺻﻔﺤﺎت ﻣﺨﺘﻠﻒ ﺗﮑﺮار ﺷﺪه اﺳﺖ )ﻫﻤﯿﻦ اﻃﻼﻋﺎت ﺑﺮاي ﺑﺮﭼﺴﺐ‬ ‫>‪<title‬ﻧﯿﺰ ﻧﻤﺎﯾﺶ داده ﻣﯽﺷﻮد(‪ .‬ﻫﻤﺎﻧﻨﺪ ﺑﺮﭼﺴﺐ>‪ ، <Title‬ﻓﺮاﺑﺮﭼﺴﺐ ‪ description‬ﻧﯿﺰ در ﺑﺎﻻي ﺳﻨﺪ ‪HTML‬‬ ‫و در ﻣﯿﺎن ﺑﺮﭼﺴﺐ >‪ <head‬ﻗﺮار ﻣﯽﮔﯿﺮد‪.‬‬

‫در اﯾﻨﺠﺎ ﻣﺤﺘﻮاي ﻓﺮاﺑﺮﭼﺴﺐ ‪ description‬را ﻣﯽ ﺑﯿﻨﯿﺪ ﮐﻪ ﺣﺎوي ﺗﻮﺻﯿﻔﯽ در ﻣﻮرد ﻓﻌﺎﻟﯿﺖ ﺳﺎﯾﺖ‬ ‫اﺳﺖ‬ ‫ﻓﺮاﺑﺮﭼﺴﺐﻫﺎي ‪ description‬ﺑﺴﯿﺎر ﻣﻬﻢ اﻧﺪ زﯾﺮا ﮔﻮﮔﻞ ﻣﻤﮑﻦ اﺳﺖ از آﻧﻬﺎ ﺑﻪ ﻋﻨﻮان ﻣﺘﻦ ﺗﻮﺻﯿﻔﯽ در‬ ‫زﯾﺮ ﻟﯿﻨﮏ ﺑﻪ ﺻﻔﺤﻪ ﺷﻤﺎ در ﺻﻔﺤﻪ ﻧﺘﺎﯾﺞ ﺟﺴﺘﺠﻮ‪ ،‬اﺳﺘﻔﺎده ﮐﻨﺪ ‪.‬دﻗﺖ ﮐﻨﯿﺪ ﮐﻪ ﻣﺎ از ﻋﺒﺎرت »ﻣﻤﮑﻦ« اﺳﺖ اﺳﺘﻔﺎده‬ ‫ﮐﺮدﯾﻢ زﯾﺮا اﻣﮑﺎن دارد ﮐﻪ ﮔﻮﮔﻞ‪ ،‬ﺑﺨﺸﯽ از ﻣﺘﻦ ﺻﻔﺤﻪ را ﺷﻤﺎ را ﮐﻪ ارﺗﺒﺎط ﺑﯿﺸﺘﺮي ﺑﺎ ﻋﺒﺎرت ﺟﺴﺘﺠﻮ ﺷﺪه ﺗﻮﺳﻂ‬ ‫ﮐﺎرﺑﺮ دارد را ﺑﻪ ﺟﺎي ﻣﺘﻦ ‪ description‬ﻧﻤﺎﯾﺶ دﻫﺪ‪ .‬ﻋﻼوه ﺑﺮ آن‪ ،‬اﮔﺮ ﺳﺎﯾﺖ ﺷﻤﺎ در ﭘﺮوژة ﮐﺘﺎب راﻫﻨﻤﺎي آزاد ﯾﺎ‬

‫‪٢‬‬

‫‪metatag‬‬

‫‪www.ParsBook.org‬‬

‫‪٩‬‬

‫ﻫﻤﺎن ‪ DMOZ‬ﺛﺒﺖ ﺷﺪه ﺑﺎﺷﺪ‪ ،‬ﻣﻤﮑﻦ اﺳﺖ ﮔﻮﮔﻞ از ﻣﺘﻦ ‪ description‬ﻣﻮﺟﻮد در آن ﻓﻬﺮﺳﺖ اﺳﺘﻔﺎده ﮐﻨﺪ‪ .‬اﺿﺎﻓﻪ‬ ‫ﮐﺮدن ﻓﺮاﺑﺮﭼﺴﺐ ﺑﻪ ﺗﻤﺎﻣﯽ ﺻﻔﺤﺎت وب‪ ،‬ﻫﻤﯿﺸﻪ اﻣﺮي ﻣﻄﻠﻮب ﺑﻪ ﺣﺴﺎب ﻣﯽآﯾﺪ ﻣﺨﺼﻮﺻﺎً زﻣﺎﻧﯽ ﮐﻪ ﮔﻮﮔﻞ‬ ‫ﻧﻤﯽﺗﻮاﻧﺪ ﻣﺘﻦ ﻣﻨﺎﺳﺒﯽ را ﺑﺮاي ﻧﻤﺎﯾﺶ در زﯾﺮ ﻟﯿﻨﮏ ﺻﻔﺤﻪ ﺷﻤﺎ در ﺻﻔﺤﻪ ﻧﺘﺎﯾﺞ ﭘﯿﺪا ﮐﻨﺪ‪.‬‬ ‫ﻣﺘﻦﻫﺎي ﺗﻮﺻﯿﻔﯽ‪ ،‬زﯾﺮ ﺗﯿﺘﺮ ﺻﻔﺤﻪ و ﺑﺎﻻي آدرس ﺻﻔﺤﻪ ﻣﻮرد ﻧﻈﺮ در ﺻﻔﺤﻪ ﻧﺘﺎﯾﺞ ﺟﺴﺘﺠﻮ ﻧﻤﺎﯾﺶ داده‬ ‫ﻣﯽﺷﻮد‪.‬‬

‫ﮐﺎرﺑﺮي ﮐﻠﻤﻪ ‪ baseball cards‬را ﺟﺴﺘﺠﻮ ﮐﺮده اﺳﺖ ‪.‬‬

‫ﺳﺎﯾﺖ ﻣﺎ در ﺻﻔﺤﻪ ﻧﺘﺎﯾﺞ ﻧﻤﺎﯾﺶ داده ﺷﺪه و ﻣﺘﻦ داﺧﻞ ﺑﺨﺶ ‪ description‬ﻧﯿﺰ ﺑﻪ ﻋﻨﻮان ﻣﺘﻦ‬ ‫ﺗﻮﺻﯿﻔﯽ در زﯾﺮ ﺗﯿﺘﺮ ﻣﻄﻠﺐ ﻗﺮار ﮔﺮﻓﺘﻪ اﺳﺖ ‪.‬‬ ‫زﻣﺎﻧﯽ ﮐﻪ ﮐﻠﻤﺎت ﺟﺴﺘﺠﻮ ﺷﺪه در ﻣﺘﻦ ﺗﻮﺻﯿﻔﯽ وﺟﻮد داﺷﺘﻪ ﺑﺎﺷﺪ‪ ،‬آن ﮐﻠﻤﺎت ﺑﺎ ﻓﻮﻧﺖ ﺿﺨﯿﻢ ﻧﻤﺎﯾﺶ داده‬ ‫ﻣﯽﺷﻮد ‪.‬اﯾﻦ ﻣﻮرد ﺑﻪ ﮐﺎرﺑﺮان ﮐﻤﮏ ﻣﯽﮐﻨﺪ ﮐﻪ آﯾﺎ ﻣﺤﺘﻮاي ﺻﻔﺤﻪ ﺑﺎ ﭼﯿﺰي ﮐﻪ ﮐﺎرﺑﺮ ﺟﺴﺘﺠﻮ ﮐﺮده اﺳﺖ‪ ،‬ﻫﻤﺨﻮاﻧﯽ‬ ‫دارد ﯾﺎ ﺧﯿﺮ‪ .‬در اداﻣﻪ ﻣﺜﺎل دﯾﮕﺮي ذﮐﺮ ﺷﺪه اﺳﺖ‪ ،‬اﯾﻦ ﺑﺎر ﻣﺘﻦ ﺗﻮﺻﯿﻔﯽ از ﻓﺮاﺑﺮﭼﺴﺐ ‪ description‬ﻣﺘﻌﻠﻖ ﺑﻪ ﯾﮑﯽ‬ ‫از ﺻﻔﺤﺎت داﺧﻠﯽ )و ﻓﺮاﺑﺮﭼﺴﺐ ﻣﻨﺤﺼﺮ ﺑﻪ ﻓﺮد ﺧﻮد را دارد( ﮐﻪ ﺣﺎوي ﯾﮏ ﻣﻘﺎﻟﻪ اﺳﺖ را ﺑﻪ ﻧﻤﺎﯾﺶ ﮔﺬاﺷﺘﻪ اﺳﺖ‪.‬‬

‫ﮐﺎرﺑﺮي ﻋﺒﺎرت ‪ rarest basball cards‬را ﺟﺴﺘﺠﻮ ﮐﺮده اﺳﺖ‬

‫‪www.ParsBook.org‬‬

‫‪١٠‬‬

‫ﯾﮑﯽ از ﺻﻔﺤﺎت داﺧﻠﯽ ﺳﺎﯾﺖ ﻣﺎ در ﺑﯿﻦ ﻧﺘﺎﯾﺞ ﻧﻤﺎﯾﺶ داده ﺷﺪه اﺳﺖ ﮐﻪ ﺑﺨﺶ ‪description‬‬

‫ﺻﻔﺤﻪ ﺑﻪ ﻋﻨﻮان ﻣﺘﻦ ﺗﻮﺻﯿﻔﯽ در زﯾﺮ ﺗﯿﺘﺮ ﻣﻄﻠﺐ ﻗﺮار ﮔﺮﻓﺘﻪ اﺳﺖ ‪.‬‬ ‫ﭼﻨﺪ ﻧﮑﺘﮥ ﻣﻔﯿﺪ ﺑﺮاي اﺳﺘﻔﺎده درﺳﺖ از ﻓﺮاﺑﺮﭼﺴﺐ ‪ Description‬در ﺻﻔﺤﺎت وب‬ ‫‪‬‬

‫ﻣﺤﺘﻮاي ﺻﻔﺤﻪ را ﺑﻪ دﻗﺖ در اﯾﻦ ﺑﺨﺶ ﺧﻼﺻﻪ ﮐﻨﯿﺪ – ﻣﺘﻦ ﺗﻮﺻﯿﻔﯽ را ﺑﻪ ﺷﮑﻠﯽ ﺑﻨﻮﯾﺴﯿﺪ ﮐﻪ اﮔﺮ از‬ ‫اﯾﻦ ﻣﺘﻦ در ﺻﻔﺤﻪ ﻧﺘﺎﯾﺞ ﮔﻮﮔﻞ اﺳﺘﻔﺎده ﺷﺪ ‪ ،‬اﯾﻦ ﻣﺘﻦ ﻫﻢ ﺑﺘﻮاﻧﺪ اﻃﻼﻋﺎت ﻻزم را در اﺧﺘﯿﺎر ﮐﺎرﺑﺮ ﻗﺮار‬ ‫دﻫﺪ و ﻫﻢ او را ﺟﺬب ﮐﻨﺪ‪.‬‬ ‫ﮐﺎرﻫﺎﯾﯽ ﮐﻪ ﺑﺎﯾﺪ از اﻧﺠﺎﻣﺸﺎن اﺟﺘﻨﺎب ﮐﻨﯿﺪ‪:‬‬ ‫‪ o‬ﻧﻮﺷﺘﻦ ﻣﺘﻦ ﺗﻮﺻﯿﻔﯽ ﺑﻪ ﺷﮑﻠﯽ ﮐﻪ ﻫﯿﭻ ارﺗﺒﺎﻃﯽ ﺑﺎ ﻣﺤﺘﻮاي ﺻﻔﺤﻪ ﻧﺪاﺷﺘﻪ ﺑﺎﺷﺪ‬ ‫‪ o‬اﺳﺘﻔﺎده از ﺗﻮﺻﯿﻔﺎت ﮐﻠﯽ ﻣﺎﻧﻨﺪ »اﯾﻦ ﯾﮏ ﺻﻔﺤﻪ وب اﺳﺖ« و »اﯾﻦ ﺻﻔﺤﻪ درﺑﺎرة ﻃﺮاﺣﯽ وب‬ ‫اﺳﺖ «‬ ‫‪ o‬ﭘﺮﮐﺮدن ﻓﺮاﺑﺮﭼﺴﺐ ‪ description‬ﺑﺎ ﮐﻠﻤﺎت ﮐﻠﯿﺪي‬ ‫‪ o‬ﮐﭙﯽ ﮐﺮدن ﮐﻞ ﻣﺤﺘﻮاي ﺻﻔﺤﻪ در ﻓﺮاﺑﺮﭼﺴﺐِ ‪description‬‬

‫‪‬‬

‫ﺑﺮاي ﻫﺮ ﺻﻔﺤﻪ از ﺳﺎﯾﺖ‪ ،‬از ‪ description‬ﻣﻨﺤﺼﺮ ﺑﻪ ﻓﺮد اﺳﺘﻔﺎده ﮐﻨﯿﺪ – داﺷﺘﻦ ﻓﺮاﺑﺮﭼﺴﺐﻫﺎي‬ ‫‪ description‬ﻣﺘﻔﺎوت ﺑﺮاي ﻫﺮ ﺻﻔﺤﻪ‪ ،‬ﻣﺨﺼﻮﺻﺎً زﻣﺎﻧﯽ ﮐﻪ ﮐﺎرﺑﺮان ﭼﻨﺪﯾﻦ ﺻﻔﺤﻪ از ﺳﺎﯾﺖ ﺷﻤﺎ را‬ ‫ﺟﺴﺘﺠﻮ ﮐﺮده ﺑﺎﺷﻨﺪ )ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﺑﺎ اﺳﺘﻔﺎده از ﻋﻤﻠﮕﺮ ‪ ( site:‬ﺑﻪ ﮐﺎرﺑﺮان و ﮔﻮﮔﻞ ﮐﻤﮏ ﺷﺎﯾﺎﻧﯽ ﻣﯽﮐﻨﺪ‪.‬‬ ‫اﮔﺮ ﺳﺎﯾﺖ ﺷﻤﺎ ﻫﺰاران و ﯾﺎ ﻣﯿﻠﯿﻮنﻫﺎ ﺻﻔﺤﻪ دارد‪ ،‬اﺿﺎﻓﻪ ﮐﺮدن ﻓﺮاﺑﺮﭼﺴﺐِ ‪ description‬ﺑﻪ ﺷﮑﻞ دﺳﺘﯽ‬ ‫اﺣﺘﻤﺎﻻً ﻏﯿﺮ ﻣﻤﮑﻦ اﺳﺖ‪ .‬در اﯾﻦ زﻣﺎن ﻣﯽﺗﻮاﻧﯿﺪ ﺑﺎ ﺗﻮﺟﻪ ﺑﻪ ﻣﺤﺘﻮاي ﺻﻔﺤﺎت ﺑﻪ ﺷﮑﻞ اﺗﻮﻣﺎﺗﯿﮏ ﺑﺮاﯾﺸﺎن‬ ‫ﻓﺮاﺑﺮﭼﺴﺐ ﺑﺴﺎزﯾﺪ‪.‬‬ ‫ﮐﺎرﻫﺎﯾﯽ ﮐﻪ ﺑﺎﯾﺪ از اﻧﺠﺎﻣﺸﺎن اﺟﺘﻨﺎب ﮐﻨﯿﺪ‪:‬‬ ‫‪ o‬اﺳﺘﻔﺎده از ﯾﮏ ‪ description‬ﺛﺎﺑﺖ ﺑﺮاي ﺗﻤﺎﻣﯽﺻﻔﺤﺎت ﯾﺎ ﺑﺨﺶ اﻋﻈﻢ ﺻﻔﺤﺎت ﺳﺎﯾﺖ‪.‬‬

‫اﮔﺮ دﻗﺖ ﮐﺮده ﺑﺎﺷﯿﺪ در اﯾﻨﺠﺎ ﻫﯿﭻ ﺣﺮﻓﯽ از ﻓﺮاﺑﺮﭼﺴﺐ ‪ keyword‬زده ﻧﺸﺪه اﺳﺖ‪ .‬اﯾﻦ ﻓﺮاﺑﺮﭼﺴﺐ دﯾﮕﺮ ﺑﺮاي‬ ‫ﻣﻮﺗﻮر ﺟﺴﺘﺠﻮي ﮔﻮﮔﻞ ارزﺷﯽ ﻧﺪارد و ﺗﻨﻬﺎ ﺗﻮﺳﻂ ﻣﻮﺗﻮر ﺟﺴﺘﺠﻮﻫﺎي دﯾﮕﺮ ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﻣﯽﮔﯿﺮد‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪١١‬‬

‫ﺳﺎﺧﺘﺎر آدرس ﺻﻔﺤﺎت را ﺑﻬﺒﻮد ﺑﺨﺸﯿﺪ‬ ‫ﺳﺎﺧﺘﻦ دﺳﺘﻪ ﺑﻨﺪيﻫﺎي ﺗﻮﺻﯿﻔﯽ و ﺗﻌﯿﯿﻦ ﻧﺎم ﻓﺎﯾﻞ ﺑﺮاي اﺳﻨﺎد ﻣﻮﺟﻮد ﺑﺮ روي ﺳﺎﯾﺘﺘﺎن ﻧﻪ ﺗﻨﻬﺎ ﺑﻪ ﺳﺎزﻣﺎن دﻫﯽ‬ ‫ﺑﻬﺘﺮ ﻣﻄﺎﻟﺐ ﺳﺎﯾﺖ ﺷﻤﺎ ﮐﻤﮏ ﻣﯽﮐﻨﺪ ﺑﻠﮑﻪ ﺑﺎﻋﺚ ﻣﯽﺷﻮد ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ ﻧﯿﺰ ﺑﻪ ﺷﮑﻞ ﺑﻬﺘﺮي ﻣﺤﺘﻮاي ﺻﻔﺤﻪ‬ ‫ﺷﻤﺎ را ﺑﮑﺎوﻧﺪ‪ .‬ﻋﻼوه ﺑﺮ آن اﯾﻦ ﮐﺎر ﺑﺎﻋﺚ ﻣﯽﺷﻮد ﮐﻪ آدرسﻫﺎي ﺻﻔﺤﺎت ﺷﻤﺎ ﺑﺮاي ﮐﺴﺎﻧﯽ ﮐﻪ ﻣﯽﺧﻮاﻫﻨﺪ ﺑﻪ‬ ‫ﺻﻔﺤﺎت ﺷﻤﺎ ارﺟﺎع ﺑﺪﻫﻨﺪ ‪» ،‬ﮐﺎرﺑﺮ ﭘﺴﻨﺪ ﺗﺮ « ﺑﺎﺷﺪ‪ .‬ﮐﺎرﺑﺮان از آدرسﻫﺎي ﺑﺴﯿﺎر ﻃﻮﻻﻧﯽ و ﻣﺮﻣﻮز ﮐﻪ ﺗﻨﻬﺎ ﺣﺎوي‬ ‫ﮐﻠﻤﺎت ﻗﺎﺑﻞ ﻓﻬﻢ ﻣﻌﺪودي ﻫﺴﺘﻨﺪ‪ ،‬وﺣﺸﺖ دارﻧﺪ‪.‬‬

‫ﯾﮏ ﻧﻤﻮﻧﻪ از آدرس ﻫﺎ ي ﺳﺎﯾﺖ ﮐﻪ اﺳﺘﻔﺎده از آن ﻣﻤﮑﻦ اﺳﺖ ﺑﺮاي ﮐﺎرﺑﺮان ﺑﺴﯿﺎر ﺳﺨﺖ ﺑﺎﺷﺪ ‪.‬‬ ‫آدرسﻫﺎي ‪ URL‬اي ﮐﻪ اﯾﻦ ﺷﮑﻞ و ﺷﻤﺎﯾﻞ را داﺷﺘﻪ ﺑﺎﺷﻨﺪ‪ ،‬ﮐﺎرﺑﺮان را ﮔﯿﺞ ﮐﺮده و ﮐﺎرﺑﺮ ﭘﺴﻨﺪ ﻧﯿﺴﺘﻨﺪ‪ .‬ﮐﺎرﺑﺮان‬ ‫ﺑﺮاي ﺑﻪ ﯾﺎدآوري و ارﺟﺎع دادن ﺑﻪ اﯾﻦ آدرس ﻣﺸﮑﻞ دارﻧﺪ‪ .‬ﻫﻤﭽﻨﯿﻦ ﮐﺎرﺑﺮان ﻣﻤﮑﻦ اﺳﺖ ﻓﮑﺮ ﮐﻨﻨﺪ ﮐﻪ ﺑﺮﺧﯽ از‬ ‫ﻗﺴﻤﺖﻫﺎي آدرس ﺻﻔﺤﻪ‪ ،‬ﺿﺮوري ﻧﺒﺎﺷﺪ ﻣﺨﺼﻮﺻﺎً اﮔﺮ ﭘﺎراﻣﺘﺮﻫﺎي زﯾﺎدي داﺧﻞ آدرس ﺻﻔﺤﻪ وﺟﻮد داﺷﺘﻪ‬ ‫ﺑﺎﺷﺪ‪ .‬آﻧﻬﺎ ﻣﻤﮑﻦ اﺳﺖ ﮐﻪ ﺑﺨﺸﯽ از آدرس را ﺣﺬف ﮐﻨﻨﺪ و ﻫﻤﯿﻦ ﺑﺎﻋﺚ ﻣﯽﺷﻮد ﮐﻪ ﻟﯿﻨﮏ از ﮐﺎر ﺑﯿﺎﻓﺘﺪ‪.‬‬ ‫ﺑﺮﺧﯽ از ﮐﺎرﺑﺮان ﻣﻤﮑﻦ اﺳﺖ ﮐﻪ ﺑﻪ ﺻﻔﺤﻪ ﺳﺎﯾﺖ ﺷﻤﺎ ﻟﯿﻨﮏ ﺑﺪﻫﻨﺪ و در داﺧﻞ ﻣﺘﻦ ﻟﯿﻨﮏ ﻫﻢ از ﺧﻮد آدرس‬ ‫اﺳﺘﻔﺎده ﮐﻨﻨﺪ‪ .‬اﮔﺮ ﺑﻪ ﺟﺎي ‪ ID‬و ﭘﺎراﻣﺘﺮﻫﺎﯾﯽ ﺑﺎ ﻧﺎمﻫﺎي ﻏﯿﺮﻋﺎدي‪ ،‬آدرس ﺷﻤﺎ ﺣﺎوي ﮐﻠﻤﺎت ﻣﺮﺗﺒﻂ ﺑﺎ ﻣﺘﻦ ﺻﻔﺤﻪ‬ ‫ﺷﻤﺎ ﺑﺎﺷﺪ‪ ،‬از اﯾﻦ ﻃﺮﯾﻖ ﮐﺎرﺑﺮان و ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ‪ ،‬اﻃﻼﻋﺎت ﺑﯿﺸﺘﺮي از ﺻﻔﺤﻪ ﺑﻪ دﺳﺖ ﻣﯽآورﻧﺪ‪.‬‬

‫ﮐﻠﻤﺎت ﮐﻠﯿﺪي ﮐﻪ در آدرس ﺻﻔﺤﻪ ﻣﺸﺨﺺ ﺷﺪه اﻧﺪ‪ ،‬ﺑﻪ ﮐﺎرﺑﺮ ﮐﻤﮏ ﻣﯽ ﮐﻨﻨﺪ ﺗﺎ ﻗﺒﻞ از ورود ﺑﻪ‬ ‫ﺻﻔﺤﻪ ﻣﻮرد ﻧﻈﺮ از ﻣﺤﺘﻮﯾﺎت آن ﺗﺎ ﺣﺪودي ﻣﻄﻠﻊ ﺷﻮﻧﺪ ‪.‬‬ ‫درﻧﻬﺎﯾﺖ‪ ،‬ﺑﻪ ﯾﺎد داﺷﺘﻪ ﺑﺎﺷﯿﺪ ﮐﻪ آدرس ﯾﮏ ﺻﻔﺤﻪ وب ﺗﻮﺳﻂ ﮔﻮﮔﻞ در ﺻﻔﺤﻪ ﻧﺘﺎﯾﺞ ﺟﺴﺘﺠﻮ ﻧﯿﺰ ﻧﻤﺎﯾﺶ داده‬ ‫ﻣﯽﺷﻮد و اﯾﻦ آدرس در زﯾﺮ ﺗﯿﺘﺮ و ﻣﺘﻦ ﺗﻮﺻﯿﻔﯽ ]و ﺑﻪ رﻧﮓ ﺳﺒﺰ[ ﻧﻤﺎﯾﺶ داده ﻣﯽﺷﻮد‪ .‬ﻫﻤﺎﻧﻨﺪ ﺗﯿﺘﺮ و ﻣﺘﻦ‬ ‫ﺗﻮﺻﯿﻔﯽ‪ ،‬اﮔﺮ ﮐﻠﻤﺎت ﺟﺴﺘﺠﻮ ﺷﺪه ﺗﻮﺳﻂ ﮐﺎرﺑﺮ‪ ،‬داﺧﻞ آدرس ﺻﻔﺤﻪ وﺟﻮد داﺷﺘﻪ ﺑﺎﺷﺪ‪ ،‬آن ﮐﻠﻤﺎت ﺑﺎ ﻓﻮﻧﺖ‬ ‫ﺿﺨﯿﻢ ﻧﻤﺎﯾﺶ داده ﻣﯽﺷﻮﻧﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪١٢‬‬

‫ﮐﺎرﺑﺮي ﻋﺒﺎرت ‪ baseball cards‬را ﺟﺴﺘﺠﻮ ﮐﺮده اﺳﺖ‬

‫ﺳﺎﯾﺖ ﻣﺎ در ﺻﻔﺤﻪ ﻧﺘﺎﯾﺞ ﻧﻤﺎﯾﺶ داده ﺷﺪه اﺳﺖ و آدرس ﺻﻔﺤﻪ ﻧﯿﺰ در زﯾﺮ ﻣﺘﻦ ﺗﻮﺻﯿﻔﯽ ﻗﺮار‬ ‫ﮔﺮﻓﺘﻪ اﺳﺖ‬ ‫ﮔﻮﮔﻞ در ﮐﺎوﯾﺪن اﻧﻮاع و اﻗﺴﺎم آدرسﻫﺎ ﺑﺎ ﺳﺎﺧﺘﺎرﻫﺎي ﻣﺨﺘﻠﻒ‪ ،‬ﺑﺴﯿﺎر ﻗﺪرﺗﻤﻨﺪ ﻋﻤﻞ ﻣﯽﮐﻨﺪ ﺣﺘﯽ اﮔﺮ اﯾﻦ‬ ‫آدرسﻫﺎ ﺑﺴﯿﺎر ﭘﯿﭽﯿﺪه ﺑﺎﺷﻨﺪ اﻣ‪‬ﺎ ﺳﻌﯽ ﮐﻨﯿﺪ ﮐﻪ وﻗﺖ ﺑﮕﺬارﯾﺪ و آدرسﻫﺎ را ﺗﺎ ﺟﺎﯾﯽ ﮐﻪ اﻣﮑﺎن دارد ﺑﺮاي ﮐﺎرﺑﺮان و‬ ‫ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ‪ ،‬ﺳﺎده ﮐﻨﯿﺪ‪ .‬ﺑﺮﺧﯽ از ﺗﻮﺳﻌﻪ دﻫﻨﺪﮔﺎن وب ﺳﻌﯽ ﻣﯽﮐﻨﻨﺪ ﺑﺎ ﺑﺎزﻧﻮﯾﺴﯽ آدرسﻫﺎي ﭘﻮﯾﺎ ﺑﻪ‬ ‫آدرسﻫﺎي ﺛﺎﺑﺖ‪ ،‬اﯾﻦ ﻣﺸﮑﻞ را ﺑﺮﻃﺮف ﮐﻨﻨﺪ‪ .‬ﺑﺎ ﺗﻮﺟﻪ ﺑﻪ اﯾﻨﮑﻪ ﮔﻮﮔﻞ ﺑﺎ اﯾﻦ ﺗﮑﻨﯿﮏ ﻣﺸﮑﻠﯽ ﻧﺪارد اﻣ‪‬ﺎ ﻣﺎﯾﻠﯿﻢ ﮔﻮﺷﺰد‬ ‫ﮐﻨﯿﻢ ﮐﻪ اﯾﻦ ﺗﮑﻨﯿﮏ‪ ،‬ﻣﺮاﺣﻞ ﭘﯿﺸﺮﻓﺘﻪ اي دارد و اﮔﺮ ﺑﻪ درﺳﺘﯽ اﻋﻤﺎل ﻧﺸﻮد ﻣﯽﺗﻮاﻧﺪ‪ ،‬ﮐﺎوش ﺳﺎﯾﺖ ﺷﻤﺎ ﺗﻮﺳﻂ‬ ‫ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ را ﻣﺨﺘﻞ ﮐﻨﺪ‪ .‬اﮔﺮ ﻣﺎﯾﻠﯿﺪ ﮐﻪ در ﻣﻮرد ﺳﺎﺧﺘﺎر ﻣﻨﺎﺳﺐ آدرسﻫﺎي ﺻﻔﺤﻪ اﻃﻼﻋﺎت ﺑﯿﺸﺘﺮي‬ ‫ﮐﺴﺐ ﮐﻨﯿﺪ‪ ،‬ﺑﻪ ﺷﻤﺎ ﭘﯿﺸﻨﻬﺎد ﻣﯽﮐﻨﯿﻢ ﮐﻪ ﺻﻔﺤﻪ ﺳﺎﺧﺖ آدرسﻫﺎي ﺻﻔﺤﺎت ﻣﻨﺎﺳﺐ ﺑﺮاي ﮔﻮﮔﻞ را در‬ ‫‪ Webmaster Help Center‬ﻣﻄﺎﻟﻌﻪ ﮐﻨﯿﺪ‪.‬‬ ‫ﭼﻨﺪ ﻧﮑﺘﮥ ﻣﻔﯿﺪ ﺑﺮاي اﻧﺘﺨﺎب ﺻﺤﯿﺢ ﺳﺎﺧﺘﺎر ﺑﺮاي آدرس ﺻﻔﺤﺎت‬ ‫‪‬‬

‫از ﮐﻠﻤﺎت در آدرس ﺻﻔﺤﻪ اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪ -‬آدرسﻫﺎﯾﯽ ﮐﻪ ﺣﺎوي ﮐﻠﻤﺎت ﻣﺮﺗﺒﻂ ﺑﺎ ﻣﺤﺘﻮا و ﺳﺎﺧﺘﺎر ﺳﺎﯾﺖ‬ ‫ﺷﻤﺎ داﺷﺘﻪ ﺑﺎﺷﻨﺪ‪ ،‬ﺑﺮاي اﻓﺮادي ﮐﻪ در ﺳﺎﯾﺖ ﺷﻤﺎ ﻣﯽﮔﺮدﻧﺪ‪ ،‬ﮐﺎرﺑﺮ‪ -‬ﭘﺴﻨﺪﺗﺮﻧﺪ‪ .‬آﻧﻬﺎ اﯾﻦ آدرسﻫﺎ را‬ ‫راﺣﺖ ﺗﺮ ﺑﻪ ﯾﺎد ﻣﯽآورﻧﺪ و ﻣﻤﮑﻦ اﺳﺖ ﺗﻤﺎﯾﻞ ﺑﯿﺸﺘﺮي ﺑﺮاي ﻟﯿﻨﮏ دادن ﺑﻪ اﯾﻦ ﺻﻔﺤﺎت داﺷﺘﻪ ﺑﺎﺷﻨﺪ‪.‬‬ ‫ﮐﺎرﻫﺎﯾﯽ ﮐﻪ ﺑﺎﯾﺪ از اﻧﺠﺎﻣﺸﺎن اﺟﺘﻨﺎب ﮐﻨﯿﺪ‪:‬‬ ‫‪ o‬اﺳﺘﻔﺎده از آدرسﻫﺎي ﻃﻮﻻﻧﯽ ﮐﻪ ﺣﺎوي ﭘﺎراﻣﺘﺮﻫﺎي ﻏﯿﺮﺿﺮوري و ‪Session ID‬ﻫﺎ ﺑﺎﺷﺪ‬ ‫‪ o‬اﺳﺘﻔﺎده از ﻧﺎم ﺻﻔﺤﺎت ﻋﻤﻮﻣﯽ ﻣﺎﻧﻨﺪ »‪«page1.htm‬‬ ‫‪ o‬اﺳﺘﻔﺎده ﺑﯿﺶ از اﻧﺪازه از ﮐﻠﻤﺎت ﮐﻠﯿﺪي در آدرس ﺻﻔﺤﻪ ﻣﺎﻧﻨﺪ ‪google-pagerank-google-‬‬ ‫‪google-pagerank.htm‬‬

‫‪www.ParsBook.org‬‬

‫‪١٣‬‬

‫‪‬‬

‫دﺳﺘﻪ ﺑﻨﺪيﻫﺎي ﺳﺎده اي را ﺑﺮاي ﺳﺎﯾﺖ ﺧﻮد اﯾﺠﺎد ﮐﻨﯿﺪ – از ﯾﮏ ﺳﺎﺧﺘﺎر دﺳﺘﻪ ﺑﻨﺪي اﺳﺘﻔﺎده ﮐﻨﯿﺪ ﮐﻪ‬ ‫ﻧﻈﻢ دﻫﯽ دادهﻫﺎ ﺑﺮاي ﮐﺎرﺑﺮان را ﺑﻪ ﺷﮑﻠﯽ ﻋﺎﻟﯽ و در ﻋﯿﻦ ﺣﺎل ﺳﺎده‪ ،‬اﻣﮑﺎن ﭘﺬﯾﺮ ﮐﻨﺪ و ﺑﻪ آﻧﻬﺎ ﮐﻤﮏ ﮐﻨﺪ‬ ‫ﮐﻪ ﺑﺪاﻧﻨﺪ‪ ،‬در ﮐﺪام ﺑﺨﺶ از ﺳﺎﯾﺖ ﺷﻤﺎ ﻫﺴﺘﻨﺪ‪ .‬ﺳﻌﯽ ﮐﻨﯿﺪ ﺳﺎﺧﺘﺎر دﺳﺘﻪ ﺑﻨﺪي ﺳﺎﯾﺖ را ﺑﻪ ﺷﮑﻠﯽ اﻧﺘﺨﺎب‬ ‫ﮐﻨﯿﺪ ﮐﻪ اﯾﻦ دﺳﺘﻪ ﺑﻨﺪيﻫﺎ‪ ،‬ﻧﺸﺎن دﻫﻨﺪه ﻣﺤﺘﻮاي داﺧﻞ آن آدرس ﺑﺎﺷﺪ‪.‬‬ ‫ﮐﺎرﻫﺎﯾﯽ ﮐﻪ ﺑﺎﯾﺪ از اﻧﺠﺎﻣﺸﺎن اﺟﺘﻨﺎب ﮐﻨﯿﺪ‪:‬‬ ‫‪ o‬اﺳﺘﻔﺎده از دﺳﺘﻪ ﺑﻨﺪي ﺑﺎ ﺷﺎﺧﻪﻫﺎ و زﯾﺮ ﺷﺎﺧﻪﻫﺎي ﻣﺘﻌﺪد ﻣﺎﻧﻨﺪ ‪:‬‬ ‫‪dir1/dir2/dir3/dir4/dir5/page.html‬‬ ‫‪ o‬اﺳﺘﻔﺎده از ﻧﺎم ﺷﺎﺧﻪﻫﺎ و دﺳﺘﻪ ﺑﻨﺪيﻫﺎ ﺑﻪ ﺷﮑﻠﯽ ﮐﻪ ﻫﯿﭻ ارﺗﺒﺎﻃﯽ ﺑﺎ ﻣﺤﺘﻮاي داﺧﻠﺸﺎن ﻧﺪاﺷﺘﻪ‬ ‫ﺑﺎﺷﺪ‪.‬‬

‫‪‬‬

‫ﺑﺮاي رﺳﯿﺪن ﺑﻪ ﻫﺮ ﺻﻔﺤﻪ‪ ،‬ﺗﻨﻬﺎ ﯾﮏ آدرس ‪ URL‬ﻓﺮاﻫﻢ ﮐﻨﯿﺪ – ﺑﺮاي ﺟﻠﻮﮔﯿﺮي از ﻟﯿﻨﮏ دادن ﮐﺎرﺑﺮان ﺑﻪ‬ ‫ﯾﮏ ﻧﺴﺨﻪ از ﺻﻔﺤﻪ ﺷﻤﺎ و ﻟﯿﻨﮏ دادن ﮔﺮوﻫﯽ دﯾﮕﺮ ﺑﻪ ﻧﺴﺨﻪ ﻣﺘﻔﺎوت از ﻫﻤﺎن ﺻﻔﺤﻪ )داﺷﺘﻦ آدرسﻫﺎي‬ ‫ﻣﺘﻔﺎوت ﺑﺮاي ﯾﮏ ﺻﻔﺤﻪ ﺑﺎﻋﺚ ﻣﯽﺷﻮد ﮐﻪ ارزش ﮐﻠﯽ آن ﺻﻔﺤﻪ ﺑﯿﻦ آدرسﻫﺎي ﻣﺨﺘﻠﻒ ﺗﻘﺴﯿﻢ ﺷﻮد(‪ ،‬ﺑﺮ‬ ‫روي اﺳﺘﻔﺎده از ﯾﮏ آدرس و ارﺟﺎع دادن آدرسﻫﺎي دﯾﮕﺮ ﺑﻪ آدرس اﺻﻠﯽ ﺗﻤﺮﮐﺰ ﮐﻨﯿﺪ‪ .‬اﮔﺮ ﻣﺘﻮﺟﻪ ﺷﺪﯾﺪ‬ ‫ﮐﻪ ﮐﺎرﺑﺮان ﺑﺎ اﺳﺘﻔﺎده از آدرسﻫﺎي ﻣﺨﺘﻠﻒ ﺑﻪ ﯾﮏ ﺻﻔﺤﻪ از ﺳﺎﯾﺖ ﺷﻤﺎ دﺳﺘﺮﺳﯽ دارﻧﺪ‪ ،‬ﺑﺎ اﺳﺘﻔﺎده از‬ ‫‪ ، redirect 301‬آدرسﻫﺎي ﻓﺮﻋﯽ را ﺑﻪ آدرس اﺻﻠﯽ ﻫﺪاﯾﺖ ﮐﻨﯿﺪ‪ .‬اﯾﻦ ﺑﻬﺘﺮﯾﻦ ﺷﯿﻮه ﺑﺮاي ﺣﻞ ﻣﺸﮑﻞ‬ ‫اﺳﺖ‪.‬‬ ‫ﮐﺎرﻫﺎﯾﯽ ﮐﻪ ﺑﺎﯾﺪ از اﻧﺠﺎﻣﺸﺎن اﺟﺘﻨﺎب ﮐﻨﯿﺪ‪:‬‬ ‫‪ o‬داﺷﺘﻦ‬

‫ﺻﻔﺤﺎﺗﯽ‬

‫در‬

‫زﯾﺮ‬

‫ﺷﺎﺧﻪﻫﺎي‬

‫ﺳﺎﯾﺖ‬

‫و‬

‫ﻣﺴﯿﺮ‬

‫اﺻﻠﯽ‬

‫ﺳﺎﯾﺖ‬

‫)ﻣﺎﻧﻨﺪ‬

‫‪ domain.com/page.htm‬و ‪ ( subdomain.com/page.htm‬ﮐﻪ ﻫﺮ دو ﻣﺴﯿﺮ ﺑﻪ ﯾﮏ‬ ‫ﺻﻔﺤﻪ ﻣﻨﺘﻬﯽ ﻣﯽﺷﻮﻧﺪ‪.‬‬ ‫‪ o‬ﻟﯿﻨﮏ دادن ﺑﻪ ﻣﻄﺎﻟﺐ داﺧﻠﯽ ﺳﺎﯾﺖ ‪ ،‬ﮔﺎﻫﯽ ﻫﻤﺮاه ﺑﺎ ‪ www‬در آدرس ﺻﻔﺤﻪ و ﮔﺎﻫﯽ ﺑﺪون‬ ‫‪www‬‬ ‫‪ o‬اﺳﺘﻔﺎده از ﺣﺮوف ﺑﺰرگ در آدرس ﺻﻔﺤﺎت ﺑﻪ ﺷﮑﻠﯽ ﻏﯿﺮﻋﺎدي )ﺑﺴﯿﺎري از ﮐﺎرﺑﺮان آدرﺳﻬﺎ ﺑﺎ‬ ‫ﺣﺮوف ﮐﻮﭼﮏ را ﻣﯽﭘﺴﻨﺪﻧﺪ و آﻧﻬﺎ را راﺣﺖ ﺗﺮ ﺑﻪ ﯾﺎد ﻣﯽآورﻧﺪ(‬ ‫ﺣﺮﮐﺖ در ﺳﺎﯾﺖ را ﺑﺮاي ﮐﺎرﺑﺮان‪ ،‬آﺳﺎن ﮐﻨﯿﺪ‬ ‫ﮐﻤﮏ ﺑﻪ ﮐﺎرﺑﺮان ﺑﺮاي ﯾﺎﻓﺘﻦ اﻃﻼﻋﺎﺗﯽ ﮐﻪ ﺑﻪ دﻧﺒﺎﻟﺶ ﻫﺴﺘﻨﺪ در ﺣﯿﻦ ﮔﺸﺖ و ﮔﺬار و ﺣﺮﮐﺖ ﺑﯿﻦ ﺻﻔﺤﺎت‬ ‫ﺳﺎﯾﺖ‪ ،‬اﻫﻤﯿﺖ وﯾﮋه اي دارد‪ .‬اﯾﻦ ﮐﺎر ﺑﻪ ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ ﻧﯿﺰ ﮐﻤﮏ ﻣﯽﮐﻨﺪ ﺗﺎ ﺑﻔﻬﻤﻨﺪ ﮐﻪ ﭼﻪ ﻣﻄﺎﻟﺒﯽ در ﺳﺎﯾﺖ از‬

‫‪www.ParsBook.org‬‬

‫‪١۴‬‬

‫دﯾﺪ ﺻﺎﺣﺐ ﺳﺎﯾﺖ‪ ،‬از اﻫﻤﯿﺖ ﺑﯿﺸﺘﺮي ﺑﺮﺧﻮردار اﺳﺖ‪ .‬اﮔﺮ ﭼﻪ ﻧﺘﺎﯾﺞ ﺟﺴﺘﺠﻮي ﮔﻮﮔﻞ در ﺳﻄﺢ ﺻﻔﺤﺎت اراﺋﻪ‬ ‫ﻣﯽﺷﻮد اﻣ‪‬ﺎ ﮔﻮﮔﻞ دوﺳﺖ دارد ﺑﺪاﻧﺪ ﮐﻪ ﻫﺮ ﺻﻔﺤﻪ از ﺳﺎﯾﺖ از دﯾﺪ ﮐﻠﯽ ﭼﻪ ﻧﻘﺸﯽ را در ﺳﺎﯾﺖ ﺷﻤﺎ ﺑﺎزي ﻣﯽﮐﻨﻨﺪ‪.‬‬ ‫ﻫﻤﻪ ﺳﺎﯾﺖﻫﺎ داراي ﺻﻔﺤﻪ ﻧﺨﺴﺖ ﯾﺎ ﺻﻔﺤﻪ اﺻﻠﯽ ﻫﺴﺘﻨﺪ ﮐﻪ ﺑﯿﺸﺘﺮﯾﻦ ﺑﺎزدﯾﺪ را دارد و ﻧﻘﻄﻪ ﺷﺮوع‬ ‫ﺣﺮﮐﺖ ﺑﺮاي ﺑﺴﯿﺎري از ﮐﺎرﺑﺮان ﺳﺎﯾﺖ ﻣﺤﺴﻮب ﻣﯽﺷﻮد‪ .‬اﮔﺮ ﺳﺎﯾﺖ ﺷﻤﺎ ﺻﻔﺤﺎت اﻧﺪﮐﯽ دارد‪ ،‬اﯾﻦ ﻣﻮرد اﻫﻤﯿﺖ‬ ‫زﯾﺎدي ﻧﺪارد وﻟﯽ اﮔﺮ ﺗﻌﺪاد ﺻﻔﺤﺎت ﺷﻤﺎ زﯾﺎد اﺳﺖ‪ ،‬ﺑﺎﯾﺪ ﺑﻪ اﯾﻦ ﻓﮑﺮ ﮐﻨﯿﺪ ﮐﻪ ﮐﺎرﺑﺮان ﺳﺎﯾﺖ‪ ،‬ﭼﻄﻮر از ﺻﻔﺤﻪ اول‬ ‫ﺳﺎﯾﺖ ﺷﻤﺎ ﺑﻪ ﺻﻔﺤﺎﺗﯽ ﮐﻪ ﺣﺎوي اﻃﻼﻋﺎت ﺟﺰﺋﯽ ﺗﺮي ﻫﺴﺘﻨﺪ‪ ،‬وارد ﻣﯽﺷﻮﻧﺪ‪ .‬آﯾﺎ در ﻣﻮرد ﻣﻮﺿﻮﻋﯽ ﺧﺎص‪،‬‬ ‫ﻣﻘﺎﻻت ﮐﺎﻓﯽ درﺳﺎﯾﺖ دارﯾﺪ و آﯾﺎ اﯾﺠﺎد ﯾﮏ ﺻﻔﺤﻪ ﺟﺪﯾﺪ ﺑﺮاي ﺗﻮﺻﯿﻒ اﯾﻦ ﻣﻘﺎﻻت ﻣﺮﺗﺒﻂ ﺑﺎ ﻫﻢ‪ ،‬ﻣﻨﻄﻘﯽ ﺑﻪ ﻧﻈﺮ‬ ‫ﻣﯽرﺳﺪ ؟ (ﺑﺮاي ﻣﺜﺎل ﺻﻔﺤﻪ ﻧﺨﺴﺖ –< ﻟﯿﺴﺖ ﻣﻘﺎﻻت ﻣﺮﺗﺒﻂ –< ﯾﮏ ﻣﻘﺎﻟﮥ ﺧﺎص)‪ .‬آﯾﺎ ﺳﺎﯾﺖ ﺷﻤﺎ ﺣﺎوي ﺻﺪﻫﺎ‬ ‫ﻣﺤﺼﻮل ﻣﺨﺘﻠﻒ اﺳﺖ ﮐﻪ ﺑﺎﯾﺪ در دﺳﺘﻪ ﺑﻨﺪيﻫﺎ و زﯾﺮ ﺷﺎﺧﻪﻫﺎي ﻣﺨﺘﻠﻒ دﺳﺘﻪ ﺑﻨﺪي ﺷﻮﻧﺪ ؟‬

‫ﺳﺎﺧﺘﺎر ﯾﮏ ﺳﺎﯾﺖ ﮐﻮﭼﮏ در زﻣﯿﻨﻪ ﮐﺎرت ﻫﺎ ي ﺑﯿﺲ ﺑﺎل‬ ‫‪) Sitemap‬ﺑﺎ ﺣﺮوف ﮐﻮﭼﮏ( ﺻﻔﺤﮥ ﺳﺎده اي اﺳﺖ ﮐﻪ ﺳﺎﺧﺘﺎر ﺻﻔﺤﺎت ﺳﺎﯾﺖ ﺷﻤﺎ را ﺑﻪ ﻧﻤﺎﯾﺶ ﻣﯽﮔﺬارد و‬ ‫ﻣﻌﻤﻮﻻ ﺣﺎوي ﯾﮏ ﻟﯿﺴﺖ دﺳﺘﻪ ﺑﻨﺪي ﺷﺪه و ﺳﻠﺴﻠﻪ ﻣﺮاﺗﺒﯽ‪ ،‬از ﺻﻔﺤﺎت ﺳﺎﯾﺖ ﺷﻤﺎﺳﺖ‪ .‬ﮐﺎرﺑﺮان ﺳﺎﯾﺖ ﻣﻤﮑﻦ اﺳﺖ‬ ‫در زﻣﺎﻧﯽ ﮐﻪ ﻧﻤﯽﺗﻮاﻧﻨﺪ ﺻﻔﺤﻪ ﻣﻮرد ﻧﻈﺮﺷﺎن را ﭘﯿﺪا ﮐﻨﻨﺪ‪ ،‬ﺑﻪ اﯾﻦ ﺻﻔﺤﻪ ﻣﺮاﺟﻌﻪ ﮐﻨﻨﺪ‪ .‬اﮔﺮ ﭼﻪ ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ‬ ‫ﻫﻢ ﺑﻪ اﯾﻦ ﺻﻔﺤﻪ ﻣﺮاﺟﻌﻪ ﻣﯽﮐﻨﻨﺪ و اﯾﻦ ﺻﻔﺤﻪ ﺑﻪ ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ ﮐﻤﮏ ﻣﯽﮐﻨﺪ ﮐﻪ ﺑﻪ ﺷﮑﻞ ﺑﻬﺘﺮي ﺑﺘﻮاﻧﻨﺪ‬ ‫ﺻﻔﺤﺎت ﺳﺎﯾﺖ ﺷﻤﺎ را ﻓﻬﺮﺳﺖ ﮐﻨﻨﺪ وﻟﯽ اﯾﻦ ﺻﻔﺤﻪ در اﺻﻞ ﺑﺮاي ﮐﺎرﺑﺮان ﺳﺎﯾﺖ ﺳﺎﺧﺘﻪ ﻣﯽﺷﻮد‪.‬‬ ‫ﻓﺎﯾﻞ ‪) XML Sitemap‬ﺑﺎ ﺣﺮوف ﺑﺰرگ( ﮐﻪ ﻣﯽﺗﻮاﻧﯿﺪ از ﻃﺮﯾﻖ ‪ Webmaster tools‬ﮔﻮﮔﻞ ﺛﺒﺘﺶ ﮐﻨﯿﺪ‪ ،‬ﺟﺴﺘﺠﻮ و‬ ‫ﯾﺎﻓﺘﻦ ﺻﻔﺤﺎت ﺳﺎﯾﺖ ﺷﻤﺎ را ﺑﺮاي ﮔﻮﮔﻞ آﺳﺎن ﻣﯽﮐﻨﺪ‪ .‬اﺳﺘﻔﺎده از ‪ Sitemap‬ﻧﯿﺰ ﯾﮑﯽ از راهﻫﺎ )اﮔﺮ ﭼﻪ اﯾﻦ راه‬ ‫ﺑﺮاي ﻣﻌﺮﻓﯽ آدرس اﺻﻠﯽ ﺳﺎﯾﺖ ﺿﻤﺎﻧﺖ ﺷﺪه ﻧﯿﺴﺖ( ﺑﺮاي ﺗﻌﯿﯿﻦ آدرس اﺳﺘﺎﻧﺪارد ﺳﺎﯾﺖ اﺳﺖ )ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل‬ ‫‪ http://example.ir‬ﯾﺎ ‪ .( http://www.example.ir‬ﮔﻮﮔﻞ ﺑﺎ ﺳﺎﺧﺖ اﺳﮑﺮﯾﭙﺖ ﺗﻮﻟﯿﺪ ‪ Sitemap‬ﺑﻪ ﺷﻤﺎ ﮐﻤﮏ‬

‫‪www.ParsBook.org‬‬

‫‪١۵‬‬

‫ﮐﺮده اﺳﺖ ﺗﺎ ﺑﺮاي ﺳﺎﯾﺖ ﺧﻮد ﯾﮏ ‪ Sitemap‬ﺑﺴﺎزﯾﺪ‪ .‬ﺑﺮاي ﮐﺴﺐ اﻃﻼﻋﺎت ﺑﯿﺸﺘﺮ در ﻣﻮرد ‪ Sitemap‬ﺑﻪ ﻣﺮﮐﺰ‬ ‫راﻫﻨﻤﺎي ﻣﺪﯾﺮﯾﺖ ﺳﺎﯾﺖ ﮔﻮﮔﻞ ﻣﺮاﺟﻌﻪ ﮐﺮده و ﻣﻘﺎﻟﮥ ﻣﻔﯿﺪ راﻫﻨﻤﺎي ﺳﺎﺧﺖ ﻓﺎﯾﻞ ‪ Sitemap‬را ﻣﻄﺎﻟﻌﻪ ﮐﻨﯿﺪ‪.‬‬ ‫ﭼﻨﺪ ﻧﮑﺘﮥ ﻣﻔﯿﺪ در ﻣﻮرد ﺷﯿﻮه ﺻﺤﯿﺢ ﻃﺮاﺣﯽ ﺑﺨﺶ ﻧﺎوﺑﺮي‪ 3‬در ﺳﺎﯾﺖ‬ ‫‪‬‬

‫ﺳﺎﺧﺘﺎر ﺑﺨﺶ ﻧﺎوﺑﺮي را ﺑﻪ ﺷﮑﻠﯽ ﻣﻨﻄﻘﯽ و ﻃﺒﯿﻌﯽ ‪ ،‬ﻃﺮاﺣﯽ ﮐﻨﯿﺪ – ﺣﺮﮐﺖ از ﺻﻔﺤﺎت ﺑﺎ ﻣﺤﺘﻮاي‬ ‫ﻋﻤﻮﻣﯽﺑﻪ ﺻﻔﺤﺎت ﺑﺎ ﻣﺤﺘﻮاي ﺗﺨﺼﺼﯽ را ﺗﺎ ﺟﺎﯾﯽ ﮐﻪ اﻣﮑﺎن دارد‪ ،‬ﺑﺮاي ﮐﺎرﺑﺮان ﺳﺎﯾﺘﺘﺎن آﺳﺎن ﮐﻨﯿﺪ‪ .‬ﻫﺮ‬ ‫زﻣﺎﻧﯽ ﮐﻪ اﺣﺴﺎس ﮐﺮدﯾﺪ‪ ،‬ﺑﻪ ﯾﮏ ﺻﻔﺤﻪ ﺑﺮاي ﻫﺪاﯾﺖ ﮐﺎرﺑﺮان ﺑﻪ دﯾﮕﺮ ﺻﻔﺤﺎت اﺣﺘﯿﺎج اﺳﺖ و وﺟﻮد اﯾﻦ‬ ‫ﺻﻔﺤﻪ ﺑﻪ ﮐﺎرﺑﺮان ﮐﻤﮏ ﻣﯽﮐﻨﺪ‪ ،‬اﯾﻦ ﺻﻔﺤﻪ را اﯾﺠﺎد ﮐﻨﯿﺪ‪.‬‬ ‫ﻣﻮاردي ﮐﻪ ﺑﺎﯾﺪ از اﻧﺠﺎﻣﺸﺎن اﺟﺘﻨﺎب ﮐﻨﯿﺪ‪:‬‬ ‫‪ o‬ﺳﺎﺧﺖ ﺑﺨﺶ ﻧﺎوﺑﺮي ﺑﻪ ﺷﮑﻠﯽ ﺑﺴﯿﺎر ﭘﯿﭽﯿﺪه ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﻟﯿﻨﮏ دادن از ﻫﺮ ﺻﻔﺤﻪ ﺑﻪ ﺻﻔﺤﺎت‬ ‫دﯾﮕﺮ)زﯾﺎده روي در ﺧﺮد ﮐﺮدن و دﺳﺘﻪ ﺑﻨﺪي ﮐﺮدن ﻣﻄﺎﻟﺐ (اﯾﻨﮑﺎر ﺑﺎﻋﺚ ﻣﯽﺷﻮد ﮐﺎرﺑﺮ ﺳﺎﯾﺖ‬ ‫ﻣﺠﺒﻮر ﺑﺎﺷﺪ ﺑﺮاي رﺳﯿﺪن ﺑﻪ ﻣﺤﺘﻮاي ﺧﺎص‪ ،‬ﺑﺎرﻫﺎ ﺑﺮ روي ﻟﯿﻨﮏﻫﺎي ﻣﺨﺘﻠﻒ ﮐﻠﯿﮏ ﮐﻨﺪ‪.‬‬

‫‪‬‬

‫ﺳﻌﯽ ﮐﻨﯿﺪ اﻏﻠﺐ از ﻟﯿﻨﮏﻫﺎي ﻣﺘﻨﯽ اﺳﺘﻔﺎده ﮐﻨﯿﺪ – اﮔﺮ ﺑﺨﺶ ﻧﺎوﺑﺮي ﺳﺎﯾﺖ و ﻫﺪاﯾﺖ ﮐﺎرﺑﺮان ﺑﯿﻦ ﺻﻔﺤﺎت‬ ‫ﻣﺨﺘﻠﻒ ﺳﺎﯾﺖ را ﺑﺎ اﺳﺘﻔﺎده از ﻟﯿﻨﮏﻫﺎي ﻣﺘﻨﯽ‪ ،‬ﻣﺪﯾﺮﯾﺖ ﮐﻨﯿﺪ‪ ،‬ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ راﺣﺖ ﺗﺮ ﻣﯽﺗﻮاﻧﻨﺪ ﺳﺎﯾﺖ‬ ‫ﺷﻤﺎ را ﮐﺎوش ﮐﻨﻨﺪ‪ .‬ﺑﺴﯿﺎري از ﮐﺎرﺑﺮان ﻧﯿﺰ اﯾﻦ ﺳﺒﮏ از ﻟﯿﻨﮏﻫﺎ را ﺑﯿﺸﺘﺮ ﻣﯽﭘﺴﻨﺪﻧﺪ ﻣﺨﺼﻮﺻﺎً آن ﮐﺎرﺑﺮاﻧﯽ‬ ‫ﮐﻪ از اﺑﺰارﻫﺎﯾﯽ اﺳﺘﻔﺎده ﻣﯽﮐﻨﻨﺪ ﮐﻪ ﻓﻠﺶ و ﺟﺎوااﺳﮑﺮﯾﭙﺖ را ﭘﺸﺘﯿﺒﺎﻧﯽ ﻧﻤﯽﮐﻨﺪ‪.‬‬ ‫ﮐﺎرﻫﺎﯾﯽ ﮐﻪ ﺑﺎﯾﺪ از اﻧﺠﺎﻣﺸﺎن اﺟﺘﻨﺎب ﮐﻨﯿﺪ‪:‬‬ ‫‪ o‬ﻃﺮاﺣﯽ ﺑﺨﺶ ﻧﺎوﺑﺮي ﮐﺎﻣﻞ ﺳﺎﯾﺖ ﺑﻪ ﺷﮑﻞ ﻟﯿﺴﺖ ﭘﺎﯾﯿﻦ اﻓﺘﺎدﻧﯽ‪ ،4‬ﺗﺼﻮﯾﺮي و ﯾﺎ اﻧﯿﻤﯿﺸﻦ )ﺑﺴﯿﺎري از‬ ‫ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ‪ ،‬ﻧﻪ ﻫﻤﻪ ﺷﺎن‪ ،‬ﻣﯽﺗﻮاﻧﻨﺪ اﯾﻦ ﺳﺒﮏ از ﻟﯿﻨﮏﻫﺎ را ﺑﺒﯿﻨﻨﺪ اﻣﺎ اﮔﺮ ﯾﮏ ﮐﺎرﺑﺮ ﺑﺘﻮاﻧﺪ ﺑﺎ‬ ‫اﺳﺘﻔﺎده از ﻟﯿﻨﮏﻫﺎي ﻣﺘﻨﯽ‪ ،‬ﺑﻪ ﺗﻤﺎﻣﯽﺻﻔﺤﺎت ﺳﺎﯾﺖ ﺷﻤﺎ دﺳﺘﺮﺳﯽ ﭘﯿﺪا ﮐﻨﺪ‪ ،‬اﯾﻦ ﮐﺎر ﺑﺎﻋﺚ ﺑﺎﻻ رﻓﺘﻦ‬ ‫ﺳﻬﻮﻟﺖ دﺳﺘﺮﺳﯽ ﺑﻪ ﺳﺎﯾﺖ ﺷﻤﺎ ﻣﯽﺷﻮد‪ .‬در ﻣﻘﺎﻟﻪ ﺷﯿﻮه ﺑﺮﺧﻮرد ﮔﻮﮔﻞ ﺑﺎ ﻟﯿﻨﮏﻫﺎي ﻏﯿﺮ ﻣﺘﻨﯽ‬ ‫ﻣﯽﺗﻮاﻧﯿﺪ اﻃﻼﻋﺎت ﺑﯿﺸﺘﺮي در اﯾﻦ ﻣﻮرد ﮐﺴﺐ ﮐﻨﯿﺪ(‪.‬‬

‫‪‬‬

‫از ﻧﺎوﺑﺮيِ ﺳﻠﺴﻪ ﻣﺮاﺗﺒﯽ‪ 5‬اﺳﺘﻔﺎده ﮐﻨﯿﺪ – ﻧﺎوﺑﺮي ﺳﻠﺴﻠﻪ ﻣﺮاﺗﺒﯽ ﯾﮏ ﺳﻠﺴﻠﻪ از ﻟﯿﻨﮏﻫﺎ ﺑﻪ ﺻﻔﺤﺎت داﺧﻠﯽ‬ ‫ﺳﺎﯾﺖ اﺳﺖ ﮐﻪ در ﺑﺎﻻ و ﯾﺎ ﭘﺎﯾﯿﻦ ﺻﻔﺤﻪ ﻗﺮار ﻣﯽﮔﯿﺮد و ﺑﻪ ﮐﺎرﺑﺮان اﺟﺎزه ﻣﯽدﻫﺪ ﺗﺎ ﺑﻪ ﺳﺮﻋﺖ ﺑﻪ ﺻﻔﺤﺎت‬ ‫ﻗﺒﻠﯽ و ﯾﺎ ﺻﻔﺤﻪ اول ﺳﺎﯾﺖ ﺑﺎزﮔﺮدﻧﺪ‪ .‬ﺑﺴﯿﺎري از ﻧﺎوﺑﺮيﻫﺎي ﺳﻠﺴﻠﻪ ﻣﺮاﺗﺒﯽ اﻏﻠﺐ‪ ،‬اﺻﻠﯽ ﺗﺮﯾﻦ ﺻﻔﺤﻪ را )ﮐﻪ‬

‫‪٣‬‬

‫‪Navigation‬‬ ‫‪٤‬‬ ‫‪Drop down menu‬‬ ‫‪٥‬‬ ‫‪ - Breadcrumb‬اﯾﻦ ﻧﺎم از داﺳﺘﺎنﻫﺎﻧﺴﻞ و ﮔﺮﺗﻞ ﮔﺮﻓﺘﻪ ﺷﺪه اﺳﺖ ﮐﻪ اﯾﻦ ﺑﭽﻪﻫﺎ ﺑﺎ رﯾﺨﺘﻦ ﺧﻮردهﻫﺎي ﻧﺎن ﺑﺮ روي زﻣﯿﻦ راه ﺑﺮﮔﺸﺖ ﺧﻮد ﺑﻪ ﺧﺎﻧﻪ را‬ ‫ﭘﯿﺪا ﮐﺮدﻧﺪ‬

‫‪www.ParsBook.org‬‬

‫‪١۶‬‬

‫ﻣﻌﻤﻮﻻ ﺻﻔﺤﻪ اول ﺳﺎﯾﺖ اﺳﺖ( ﺑﻪ ﻋﻨﻮان اوﻟﯿﻦ ﻟﯿﻨﮏ و در ﺳﻤﺖ راﺳﺖ ﻗﺮار ﻣﯽدﻫﻨﺪ و ﺻﻔﺤﺎت ﺟﺰﺋﯽ ﺗﺮ را‬ ‫ﺑﻌﺪ از آن در ﺳﻤﺖ ﭼﭗ ﻣﯽآورﻧﺪ‪.‬‬

‫ﻧﻤﺎﯾﯽ از ﺑﺨﺶ ﻧﺎوﺑﺮي ﺳﻠﺴﻪ ﻣﺮاﺗﺒﯽ ﮐﻪ در ﺑﺎﻻي ﯾﮑﯽ از ﺻﻔﺤﺎت داﺧﻠﯽ ﺳﺎﯾﺖ ﻧﻤﺎﯾﺎن ﺷﺪه اﺳﺖ ‪.‬‬ ‫‪‬‬

‫ﺑﺮاي ﺳﺎﯾﺘﺘﺎن ﯾﮏ ﺻﻔﺤﻪ ‪ sitemap‬ﺑﺴﺎزﯾﺪ و ﯾﮏ ﻓﺎﯾﻞ ‪ XML Sitemap‬ﻧﯿﺰ ﺑﺮاي ﺳﺎﯾﺖ ﺧﻮد ﻓﺮاﻫﻢ‬ ‫ﮐﻨﯿﺪ ‪ -‬ﯾﮏ ‪ sitemap‬ﺳﺎده اﮔﺮ ﺑﻪ ﺗﻤﺎﻣﯽ ﺻﻔﺤﺎت ﺳﺎﯾﺖ و ﯾﺎ ﺣﺪاﻗﻞ ﺑﻪ ﺻﻔﺤﺎت ﻣﻬﻢ ﺳﺎﯾﺖ )اﮔﺮ ﺻﺪﻫﺎ‬ ‫و ﯾﺎ ﻫﺰاران ﺻﻔﺤﻪ دارﯾﺪ( ﻟﯿﻨﮏ دﻫﺪ‪ ،‬ﻣﯽﺗﻮاﻧﺪ ﺑﺴﯿﺎر ﺳﻮدﻣﻨﺪ واﻗﻊ ﺷﻮد‪ .‬ﺳﺎﺧﺖ ﯾﮏ ﻓﺎﯾﻞ ‪XML‬‬ ‫‪ Sitemap‬ﺑﻪ ﺷﻤﺎ اﯾﻦ اﻃﻤﯿﻨﺎن را ﻣﯽدﻫﺪ ﮐﻪ ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ ﻣﯽﺗﻮاﻧﻨﺪ ﺻﻔﺤﺎت ﻣﺨﺘﻠﻒ ﺳﺎﯾﺖ ﺷﻤﺎ را‬ ‫ﺑﺒﯿﻨﻨﺪ‪.‬‬ ‫ﮐﺎرﻫﺎﯾﯽ ﮐﻪ ﺑﺎﯾﺪ از اﻧﺠﺎﻣﺸﺎن اﺟﺘﻨﺎب ﮐﻨﯿﺪ‪:‬‬ ‫‪ o‬داﺷﺘﻦ ﯾﮏ ﺻﻔﺤﻪ ‪ sitemap‬ﻗﺪﯾﻤﯽ و داراي ﻟﯿﻨﮏﻫﺎي ﺷﮑﺴﺘﻪ و از ﮐﺎر اﻓﺘﺎده‬ ‫‪ o‬ﺳﺎﺧﺖ ﯾﮏ ﺻﻔﺤﻪ ‪ sitemap‬ﮐﻪ ﺗﻨﻬﺎ ﻫﻤﻪ ﺻﻔﺤﺎت را ﻟﯿﺴﺖ ﮐﺮده اﺳﺖ و ﻫﯿﭻ ﻧﻈﻤﯽ ﻧﺪارد )ﻣﺜﻼ‬ ‫دﺳﺘﻪ ﺑﻨﺪي ﮐﻠﯿﻪ ﻣﻄﺎﻟﺐ ﺗﻨﻬﺎ ﺑﺮ ﻃﺒﻖ ﻣﻮﺿﻮﻋﺸﺎن(‬

‫‪‬‬

‫ﻣﻤﮑﻦ اﺳﺖ ﮐﺎرﺑﺮان‪ ،‬ﺑﺨﺸﯽ از آدرس ﺻﻔﺤﺎت ﺷﻤﺎ را ﺣﺬف ﮐﻨﻨﺪ؛ اﯾﻦ ﻣﻮرد را ﻣﺪ ﻧﻈﺮ ﻗﺮار دﻫﯿﺪ –‬ ‫ﺑﺮﺧﯽ از ﮐﺎرﺑﺮان ﻣﻤﮑﻦ اﺳﺖ ﺑﻪ ﺷﮑﻠﯽ ﻋﺠﯿﺐ‪ ،‬در ﺳﺎﯾﺖ ﺷﻤﺎ ﮐﺎوش ﮐﻨﻨﺪ و ﺷﻤﺎ ﺑﺎﯾﺪ اﯾﻦ ﻣﻮرد را ﻣﺪ ﻧﻈﺮ‬ ‫داﺷﺘﻪ ﺑﺎﺷﯿﺪ‪ .‬ﺑﺮاي ﻣﺜﺎل ﺑﻪ ﺟﺎي اﺳﺘﻔﺎده از ﺑﺨﺶ ﻧﺎوﺑﺮيِ ﺳﻠﺴﻠﻪ ﻣﺮاﺗﺒﯽ‪ ،‬ﮐﺎرﺑﺮ ﺷﻤﺎ ﻣﻤﮑﻦ اﺳﺖ ﺑﺨﺸﯽ‬ ‫از آدرس ﺻﻔﺤﻪ را ﺣﺬف ﮐﻨﺪ ﺑﻪ اﻣﯿﺪ اﯾﻨﮑﻪ ﺑﺘﻮاﻧﺪ ﺑﻪ ﻣﻄﺎﻟﺐ دﺳﺘﻪ ﺑﻨﺪي ﮐﻠﯽ ﺗﺮ‪ ،‬دﺳﺘﺮﺳﯽ ﭘﯿﺪا ﮐﻨﺪ‪.‬‬ ‫ﮐﺎرﺑﺮان ﺳﺎﯾﺖ ﺷﻤﺎ ﻣﻤﮑﻦ اﺳﺖ ﺑﻪ اﯾﻦ ﺻﻔﺤﻪ ﻣﺮاﺟﻌﻪ ﮐﻨﺪ ‪:‬‬ ‫‪http://www.example.ir/articles/graphic-design/principles-of-a-standard-design‬‬ ‫و ﺑﺨﺶ آﺧﺮ آدرس را ﺣﺬف ﮐﻨﺪ و اﯾﻦ آدرس را وارد ﮐﻨﺪ ‪:‬‬ ‫‪http://www.example.ir/articles/graphic-design‬‬ ‫ﺑﻪ اﻣﯿﺪ اﯾﻨﮑﻪ ﺑﺘﻮاﻧﺪ ﺑﻪ ﺗﻤﺎﻣﯽ ﻣﻄﺎﻟﺐ ﺑﺨﺶ ﻃﺮاﺣﯽ ﮔﺮاﻓﯿﮑﯽ دﺳﺖ ﭘﯿﺪا ﮐﻨﺪ‪ .‬آﯾﺎ ﺳﺎﯾﺖ ﺷﻤﺎ ﻗﺎدر اﺳﺖ در‬ ‫اﯾﻦ ﺷﺮاﯾﻂ ‪ ،‬ﻣﻄﺎﻟﺐ ﻣﻮرد ﻧﯿﺎز ﮐﺎرﺑﺮ را ﺑﻪ او اراﺋﻪ ﮐﻨﺪ و ﯾﺎ اﯾﻨﮑﻪ در ﻋﻮض ﯾﮏ ﺻﻔﺤﻪ ﺑﺎ ﭘﯿﻐﺎم ﺧﻄﺎي‬

‫‪www.ParsBook.org‬‬

‫‪١٧‬‬

‫‪) 404‬ﺻﻔﺤﻪ ﻣﻮرد ﻧﻈﺮ ﯾﺎﻓﺖ ﻧﺸﺪ( ﺑﻪ او ﻧﺸﺎن ﻣﯽدﻫﺪ ؟ اﮔﺮ ﮐﺎرﺑﺮ ﺑﺎز ﻫﻢ ﺑﺨﻮاﻫﺪ ﯾﮏ ﻣﺮﺣﻠﻪ دﯾﮕﺮ ﻧﯿﺰ ﺑﻪ‬ ‫ﻋﻘﺐ ﺑﺮﮔﺮدد و ﺑﻪ آدرس ‪ http://www.wedesign.ir/articles‬ﺑﺮود ﭼﻄﻮر ؟‬ ‫‪‬‬

‫ﯾﮏ ﺻﻔﺤﻪ ‪ 404‬ﺳﻮدﻣﻨﺪ ﺑﺴﺎزﯾﺪ – ﮐﺎرﺑﺮان‪ ،‬ﮔﻪ ﮔﺎه ﺑﺎ دﻧﺒﺎل ﮐﺮدن ﯾﮏ ﻟﯿﻨﮏ ﺷﮑﺴﺘﻪ و ﯾﺎ ﺗﺎﯾﭗ اﺷﺘﺒﺎه‬ ‫آدرس ﺑﺎ ﺻﻔﺤﻪ اي ﻣﻮاﺟﻪ ﻣﯽﺷﻮﻧﺪ ﮐﻪ ﻧﺸﺎن ﻣﯽدﻫﺪ ﺻﻔﺤﻪ ﻣﻮرد ﻧﻈﺮ ﺑﺮ روي ﺳﺎﯾﺖ ﺷﻤﺎ وﺟﻮد ﻧﺪارد‪.‬‬ ‫داﺷﺘﻦ ﯾﮏ ﺻﻔﺤﻪ ‪ 404‬ﺷﺨﺼﯽ ﮐﻪ ﮐﺎرﺑﺮان را ﺑﻪ ﺻﻔﺤﻪﻫﺎي ﻓﻌﺎل در ﺳﺎﯾﺖ ﻫﺪاﯾﺖ ﻣﯽﮐﻨﺪ‪ ،‬ﻣﯽﺗﻮاﻧﺪ ﺑﻪ‬ ‫ﻣﯿﺰان زﯾﺎدي ﺑﺮ رﺿﺎﯾﺖ ﮐﺎرﺑﺮان از ﺳﺎﯾﺖ‪ ،‬ﺗﺎﺛﯿﺮ ﮔﺬار ﺑﺎﺷﺪ‪ .‬ﺻﻔﺤﻪ ‪ 404‬ﺷﻤﺎ ﻣﯽﺗﻮاﻧﺪ ﺣﺎوي ﯾﮏ ﻟﯿﻨﮏ‬ ‫ﺑﻪ ﺻﻔﺤﻪ اول ﺳﺎﯾﺖ ﺷﻤﺎ و ﯾﺎ ﻟﯿﻨﮏﻫﺎﯾﯽ ﺑﻪ ﻣﻄﺎﻟﺐ ﭘﺮ ﻃﺮﻓﺪار ﯾﺎ ﻣﺮﺗﺒﻂ در ﺳﺎﯾﺖ ﺷﻤﺎ ﺑﺎﺷﺪ‪ .‬ﮔﻮﮔﻞ ﻧﯿﺰ‬ ‫ﯾﮏ اﺑﺰار ‪ 404‬اراﺋﻪ ﮐﺮده اﺳﺖ ﮐﻪ ﻣﯽﺗﻮاﻧﯿﺪ در ﺻﻔﺤﻪ ‪ 404‬ﺧﻮد‪ ،‬ﺟﺎ ﺳﺎزﯾﺶ ﮐﻨﯿﺪ و اﯾﻦ اﺑﺰار ﻧﯿﺰ ﺑﻪ‬ ‫ﺷﮑﻞ ﮐﺎﻣﻼ ﺧﻮدﮐﺎر‪ ،‬اﻃﻼﻋﺎت ﻣﻔﯿﺪي را ﺑﻪ ﮐﺎرﺑﺮان اراﺋﻪ ﻣﯽﮐﻨﺪ‪ .‬ﺷﻤﺎ ﻣﯽﺗﻮاﻧﯿﺪ از اﺑﺰارﻫﺎي ‪Google‬‬ ‫‪ Webmaster‬اﺳﺘﻔﺎده ﮐﻨﯿﺪ و ﻣﻨﺸﺄ آدرسﻫﺎﯾﯽ ﮐﻪ ﺑﺎﻋﺚ ﭘﯿﻐﺎم ﺧﻄﺎي ‪ 404‬ﻣﯽﺷﻮﻧﺪ را ﺑﯿﺎﺑﯿﺪ‪.‬‬

‫ﮐﺎرﻫﺎﯾﯽ ﮐﻪ ﺑﺎﯾﺪ از اﻧﺠﺎﻣﺸﺎن اﺟﺘﻨﺎب ﮐﻨﯿﺪ‪:‬‬ ‫‪ o‬اﺟﺎزه دادن ﺑﻪ ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ ﺑﺮاي ﻓﻬﺮﺳﺖ ﮐﺮدن ﺻﻔﺤﻪ ‪) 404‬ﻣﻄﻤﺌﻦ ﺷﻮﯾﺪ ﮐﻪ‬ ‫‪ webserver‬ﺷﻤﺎ ﺑﻪ ﺷﮑﻠﯽ ﺗﻨﻈﯿﻢ ﺷﺪه اﺳﺖ ﮐﻪ در ﺻﻮرت وﺟﻮد ﻧﺪاﺷﺘﻦ ﺻﻔﺤﻪ‪ ،‬ﭘﯿﻐﺎم ‪HTTP‬‬ ‫‪ status code 404‬را ﺑﻪ ﮐﺎرﺑﺮ ﺑﺮﮔﺮداﻧﺪ(‪.‬‬ ‫‪ o‬ﻓﺮاﻫﻢ ﮐﺮدن ﭘﯿﻐﺎمﻫﺎي ﮔﻨﮓ ﻣﺎﻧﻨﺪ »ﯾﺎﻓﺖ ﻧﺸﺪ «‪ «404» ،‬و ﯾﺎ اﺻﻼً ﻧﺪاﺷﺘﻦ ﺻﻔﺤﻪ ‪. 404‬‬ ‫‪ o‬داﺷﺘﻦ ﯾﮏ ﻃﺮاﺣﯽ ﺧﺎص ﺑﺮاي ﺻﻔﺤﻪ ‪ 404‬ﮐﻪ ﺑﺎ ﻃﺮح ﮐﻠﯽ ﺻﻔﺤﻪ ﺷﻤﺎ ﻫﻤﺎﻫﻨﮕﯽ ﻧﺪاﺷﺘﻪ ﺑﺎﺷﺪ‪.‬‬ ‫ﻣﻄﺎﻟﺐ و ﺳﺮوﯾﺲﻫﺎي ﺑﺎ ﮐﯿﻔﯿﺖ اراﺋﻪ ﮐﻨﯿﺪ‬ ‫ﻓﺮاﻫﻢ ﮐﺮدن ﻣﻄﺎﻟﺐ ﻗﺎﺑﻞ ﻗﺒﻮل و ﻣﻔﯿﺪ ﺑﯿﺶ از ﻫﻤﻪ ﻣﻮاردي ﮐﻪ ﺗﺎ ﺑﻪ ﺣﺎل ﺑﺤﺚ ﮐﺮدﯾﻢ ﺑﺮ روي ﻣﻮﻓﻘﯿﺖ‬ ‫ﺳﺎﯾﺖ ﺷﻤﺎ ﺗﺎﺛﯿﺮﮔﺬار اﺳﺖ‪ .‬ﮐﺎرﺑﺮان ﻣﻄﺎﻟﺐ ﺧﻮب را ﭘﯿﺪا ﻣﯽﮐﻨﻨﺪ و ﻣﻤﮑﻦ اﺳﺖ ﮐﻪ دﯾﮕﺮ ﮐﺎرﺑﺮان را ﻧﯿﺰ ﺑﻪ ﺳﻮي‬ ‫اﯾﻦ ﻣﻄﺎﻟﺐ‪ ،‬ﻫﺪاﯾﺖ ﮐﻨﻨﺪ‪ .‬اﯾﻦ ﮐﺎر ﻣﻤﮑﻦ اﺳﺖ از ﻃﺮﯾﻖ ﭘﺴﺖﻫﺎي وﺑﻼگ‪ ،‬ﺳﺮوﯾﺲﻫﺎي ﺟﻮاﻣﻊ ﻣﺠﺎزي‪ ،‬اﯾﻤﯿﻞ و‬ ‫ﺗﺎﻻرﻫﺎي ﮔﻔﺘﻤﺎن و ﯾﺎ ﻫﺮ ﺷﯿﻮه دﯾﮕﺮي اﻧﺠﺎم ﺷﻮد‪ .‬ﺗﺒﻠﯿﻐﺎت ﻋﺎدي ﯾﺎ ﻫﻤﺎن ﺗﺒﻠﯿﻐﺎت زﺑﺎن ﺑﻪ زﺑﺎن ﻧﯿﺰ ﺟﺰو ﻣﻮاردي‬ ‫اﺳﺖ ﮐﻪ ﺑﻪ ﺷﻬﺮت ﺳﺎﯾﺖ ﺷﻤﺎ در ﻣﯿﺎن ﮐﺎرﺑﺮان و ﮔﻮﮔﻞ‪ ،‬ﮐﻤﮏ ﻣﯽﮐﻨﺪ و اﯾﻦ ﺷﯿﻮه ﺗﺒﻠﯿﻎ‪ ،‬ﺑﺪون داﺷﺘﻦ ﻣﻄﺎﻟﺐ ﺑﺎ‬ ‫ﻣﺤﺘﻮا‪ ،‬ﻣﺤﻘﻖ ﻧﻤﯽﺷﻮد‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪١٨‬‬

‫ﮐﺎرﺑﺮي از ﯾﮑﯽ از ﻣﻄﺎﻟﺐ ﺳﺎﯾﺖ ﺧﻮﺷﺶ آﻣﺪه و ﺑﻪ آن ارﺟﺎع داده اﺳﺖ ‪.‬‬ ‫ﭼﻨﺪ ﻧﮑﺘﮥ ﺧﻮب درﺑﺎرة ﻓﺮاﻫﻢ ﮐﺮدن ﻣﻄﺎﻟﺐ ﻣﻨﺎﺳﺐ ﺑﺮاي ﺳﺎﯾﺖ‬ ‫در ﺣﺎﻟﯽ ﮐﻪ ﻣﯽﺗﻮاﻧﯿﺪ در ﻣﻮرد ﻫﺮ ﻣﻄﻠﺒﯽ در ﺳﺎﯾﺘﺘﺎن ﺑﻨﻮﯾﺴﯿﺪ اﻣ‪‬ﺎ در اﯾﻨﺠﺎ ﭘﯿﺸﻨﻬﺎداﺗﯽ اراﺋﻪ ﻣﯽﺷﻮد‪:‬‬ ‫‪‬‬

‫ﻣﺘﻨﻬﺎ را ﺳﺎده ﺑﻨﻮﯾﺴﯿﺪ – ﮐﺎرﺑﺮان از ﺧﻮاﻧﺪن ﻣﺘﻨﻬﺎﯾﯽ ﮐﻪ ﺑﻪ ﺧﻮﺑﯽ ﻧﻮﺷﺘﻪ ﺷﺪهاﻧﺪ و دﻧﺒﺎل ﮐﺮدﻧﺸﺎن‬ ‫آﺳﺎن اﺳﺖ‪ ،‬ﻟﺬت ﻣﯽﺑﺮﻧﺪ‪.‬‬ ‫ﮐﺎرﻫﺎﯾﯽ ﮐﻪ ﺑﺎﯾﺪ از اﻧﺠﺎم دادﻧﺸﺎن اﺟﺘﻨﺎب ﮐﻨﯿﺪ‪:‬‬ ‫‪ o‬ﻧﻮﺷﺘﻦ ﻣﺘﻦﻫﺎي ﻧﺎﻣﺮﺗﺐ ﮐﻪ ﺣﺎوي ﻏﻠﻂﻫﺎي اﻣﻼﯾﯽ و ﻧﺤﻮي ﺑﺴﯿﺎر ﺑﺎﺷﺪ‬ ‫‪ o‬ﻗﺮار دادن ﻣﺘﻦ در داﺧﻞ ﺗﺼﺎوﯾﺮ در ﺟﺎﯾﯽ ﮐﻪ وﺟﻮد ﻣﺘﻦ اﻫﻤﯿﺖ ﺑﺴﯿﺎر دارد )ﮐﺎرﺑﺮان ﻣﻤﮑﻦ‬ ‫اﺳﺖ ﮐﻪ ﺑﺨﻮاﻫﻨﺪ ﻣﺘﻦ را ﮐﭙﯽ ﮐﻨﻨﺪ‪ .‬ﻋﻼوه ﺑﺮ آن ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ ﻧﻤﯽﺗﻮاﻧﻨﺪ ﻣﺘﻦ داﺧﻞ‬ ‫ﺗﺼﺎوﯾﺮ را ﺑﺨﻮاﻧﻨﺪ(‪.‬‬

‫‪‬‬

‫ﻣﺘﻦﻫﺎ را ﺳﺎده ﺑﻨﻮﯾﺴﯿﺪ – ﮐﺎرﺑﺮان از ﺧﻮاﻧﺪن ﻣﺘﻦﻫﺎﯾﯽ ﮐﻪ ﺑﻪ ﺧﻮﺑﯽ ﻧﻮﺷﺘﻪ ﺷﺪه اﻧﺪ و دﻧﺒﺎل ﮐﺮدﻧﺸﺎن‬ ‫آﺳﺎن اﺳﺖ‪ ،‬ﻟﺬت ﻣﯽﺑﺮﻧﺪ‪.‬‬

‫‪‬‬

‫ﻣﻄﺎﻟﺐ را ﺑﻪ دﻗﺖ دﺳﺘﻪ ﺑﻨﺪي ﮐﻨﯿﺪ – ﺳﺎزﻣﺎن دﻫﯽ ﻣﻄﺎﻟﺐ ﺳﺎﯾﺖ ﻫﻤﯿﺸﻪ اﻣﺮي ﻣﻄﻠﻮب ﺑﻪ ﺣﺴﺎب ﻣﯽآﯾﺪ‬ ‫و ﮐﺎرﺑﺮان ﻧﯿﺰ ﺑﻪ ﺧﻮﺑﯽ ﻣﯽﺗﻮاﻧﻨﺪ ﺑﻔﻬﻤﻨﺪ ﮐﻪ ﯾﮏ ﻣﻮﺿﻮع در ﮐﺪام ﺑﺨﺶ ﺷﺮوع ﺷﺪه و در ﮐﺠﺎ ﭘﺎﯾﺎن‬ ‫ﻣﯽﯾﺎﺑﺪ‪ .‬ﺗﻘﺴﯿﻢ ﻣﻄﺎﻟﺐ ﺑﻪ ﻗﺴﻤﺖﻫﺎي ﻣﻨﻄﻘﯽ ﺑﻪ ﮐﺎرﺑﺮان ﮐﻤﮏ ﻣﯽﮐﻨﺪ ﺗﺎ ﻣﻄﺎﻟﺐ ﻣﻮرد ﻧﯿﺎزﺷﺎن را ﺳﺮﯾﻌﺘﺮ‬ ‫در ﺳﺎﯾﺖ ﺑﯿﺎﺑﻨﺪ‪.‬‬ ‫ﮐﺎرﻫﺎﯾﯽ ﮐﻪ ﺑﺎﯾﺪ از اﻧﺠﺎﻣﺸﺎن اﺟﺘﻨﺎب ﮐﻨﯿﺪ‪:‬‬ ‫‪ o‬ﻗﺮار دادن ﺣﺠﻢ زﯾﺎدي از ﻣﺘﻦ درﺑﺎرة ﻣﻮﺿﻮﻋﺎت ﻣﺨﺘﻠﻒ در ﯾﮏ ﺻﻔﺤﻪ ﺑﺪون اﺳﺘﻔﺎده از‬ ‫ﭘﺎراﮔﺮاف‪ ،‬ﺗﯿﺘﺮ و ﺗﻘﺴﯿﻢ ﺑﻨﺪي ﻇﺎﻫﺮي‬

‫‪‬‬

‫از زﺑﺎﻧﯽ ﻣﻨﺎﺳﺐ اﺳﺘﻔﺎده ﮐﻨﯿﺪ – درﺑﺎرة ﮐﻠﻤﺎﺗﯽ ﻓﮑﺮ ﮐﻨﯿﺪ ﮐﻪ ﮐﺎرﺑﺮان ﻣﻤﮑﻦ اﺳﺖ ﺟﺴﺘﺠﻮﯾﺸﺎن ﮐﻨﻨﺪ ﺗﺎ‬ ‫ﻣﻄﺎﻟﺒﯽ ﺧﺎص را ﺑﯿﺎﺑﻨﺪ‪ .‬ﮐﺎرﺑﺮاﻧﯽ ﮐﻪ درﺑﺎرة ﻣﺒﺤﺜﯽ ﺧﺎص‪ ،‬اﻃﻼﻋﺎت زﯾﺎدي دارﻧﺪ‪ ،‬ﻣﻤﮑﻦ اﺳﺖ از ﮐﻠﻤﺎﺗﯽ‬

‫‪www.ParsBook.org‬‬

‫‪١٩‬‬

‫ﻣﺘﻔﺎوت در ﺟﺴﺘﺠﻮﯾﺸﺎن اﺳﺘﻔﺎده ﮐﻨﻨﺪ در ﺣﺎﻟﯽ ﮐﻪ ﮐﺎرﺑﺮاﻧﯽ ﮐﻪ ﺑﺎ ﻣﺒﺤﺜﯽ ﺟﺪﯾﺪ آﺷﻨﺎ ﻣﯽﺷﻮﻧﺪ‪ ،‬اﻏﻠﺐ‬ ‫ﮐﻠﻤﺎﺗﯽ ﮐﻠﯽ ﺗﺮ را ﺟﺴﺘﺠﻮ ﻣﯽﮐﻨﻨﺪ‪ .‬ﺑﺮاي ﻣﺜﺎل ﻣﻤﮑﻦ اﺳﺖ ﮐﺎرﺑﺮي ﮐﻪ ﺑﺎ ﻣﺴﺎﺋﻞ ﻣﺮﺗﺒﻂ ﺑﺎ ﺑﻬﯿﻨﻪ ﺳﺎزي‬ ‫ﺳﺎﯾﺖ ﺑﺮاي ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ آﺷﻨﺎﯾﯽ داﺷﺘﻪ ﺑﺎﺷﺪ‪ ،‬ﻋﺒﺎرت ‪ SEO‬را ﺟﺴﺘﺠﻮ ﮐﻨﺪ در ﺣﺎﻟﯽ ﮐﻪ ﮐﺎرﺑﺮان‬ ‫ﻣﺒﺘﺪي ﮐﻪ اﻃﻼﻋﺎﺗﯽ درﺑﺎره اﯾﻦ ﻣﻮﺿﻮع ﻧﺪارﻧﺪ‪ ،‬اﻏﻠﺐ ﮐﻠﻤﺎﺗﯽ ﮐﻠﯽ ﺗﺮ ﻫﻤﭽﻮن »ﺑﻬﯿﻨﻪ ﺳﺎزي ﺳﺎﯾﺖ ﺑﺮاي‬ ‫ﻣﻮﺗﻮر ﺟﺴﺘﺠﻮ « را ﺟﺴﺘﺠﻮ ﻣﯽﮐﻨﻨﺪ‪ .‬ﺗﻮﺟﻪ ﺑﻪ اﯾﻦ اﺧﺘﻼﻓﺎت در ﺟﺴﺘﺠﻮﻫﺎ و ﻣﺪ ﻧﻈﺮ ﻗﺮار دادن آﻧﻬﺎ در‬ ‫ﻫﻨﮕﺎم ﻧﻮﺷﺘﻦ ﻣﻄﺎﻟﺐ )اﺳﺘﻔﺎده از ﮐﻠﻤﺎت ﻣﺨﺘﻠﻒ ﺑﻪ ﺷﮑﻞ ﻣﺨﻠﻮط( ﻣﯽﺗﻮاﻧﺪ ﻧﺘﺎﯾﺞ ﻣﺜﺒﺘﯽ ﺑﻪ ﻫﻤﺮاه داﺷﺘﻪ‬ ‫ﺑﺎﺷﺪ‪ Google AdWord .‬ﯾﮏ اﺑﺰار ﻣﻔﯿﺪ ﺑﻪ ﻧﺎم ‪ Keyword Tool‬ﻓﺮاﻫﻢ ﮐﺮده اﺳﺖ ﮐﻪ ﮐﻤﮏ ﻣﯽﮐﻨﺪ ﺗﺎ‬ ‫ﮐﻠﻤﺎت ﮐﻠﯿﺪي ﺟﺪﯾﺪ و ﮐﻠﻤﺎت ﻣﺮﺗﺒﻂ ﺑﺎ ﮐﻠﻤﻪ ﻣﻮرد ﻧﻈﺮ ﺷﻤﺎ را ﺑﺎ ﺣﺪود دﻓﻌﺎت ﺟﺴﺘﺠﻮي آن ﻋﺒﺎرات را ﺑﻪ‬ ‫ﺷﻤﺎ اراﺋﻪ ﻣﯽﮐﻨﺪ‪ .‬ﻫﻤﭽﻨﯿﻦ‪ Google Webmaster Tools ،‬اﺑﺰاري را ﻓﺮاﻫﻢ ﮐﺮده ﮐﻪ ﻟﯿﺴﺘﯽ از ﮐﻠﻤﺎﺗﯽ ﮐﻪ‬ ‫ﺑﯿﺸﺘﺮﯾﻦ ﺟﺴﺘﺠﻮ را در ﺳﺎﯾﺖ ﺷﻤﺎ داﺷﺘﻪاﻧﺪ‪ ،‬و ﮐﺎرﺑﺮان را ﺑﻪ ﺳﺎﯾﺖ ﺷﻤﺎ ﻫﺪاﯾﺖ ﮐﺮدهاﻧﺪ‪ ،‬اراﺋﻪ ﻣﯽﮐﻨﺪ‪.‬‬ ‫‪‬‬

‫ﻣﻄﺎﻟﺐ ﺟﺪﯾﺪ و ﻣﻨﺤﺼﺮ ﺑﻪ ﻓﺮد ﺗﻮﻟﯿﺪ ﮐﻨﯿﺪ – ﻣﻄﺎﻟﺐ ﺟﺪﯾﺪ ﻧﻪ ﺗﻨﻬﺎ ﮐﺎرﺑﺮان ﺛﺎﺑﺖ ﺳﺎﯾﺖ ﺷﻤﺎ را دوﺑﺎره ﺑﻪ‬ ‫ﺳﺎﯾﺖ ﺷﻤﺎ ﻣﯽﮐﺸﺎﻧﺪ ﺑﻠﮑﻪ ﮐﺎرﺑﺮان ﺟﺪﯾﺪي را ﻧﯿﺰ ﺑﻪ ﺳﻮي ﺳﺎﯾﺖ ﺷﻤﺎ ﺟﺬب ﻣﯽﮐﻨﺪ‪.‬‬ ‫ﻣﻮاردي ﮐﻪ ﺑﺎﯾﺪ از اﻧﺠﺎﻣﺸﺎن اﺟﺘﻨﺎب ﮐﻨﯿﺪ‪:‬‬ ‫‪ o‬اﯾﺠﺎد ﺗﻐﯿﯿﺮات ﺳﺎده در ﻣﻄﺎﻟﺐ ﻣﻮﺟﻮد در ﺳﺎﯾﺖ )ﯾﺎ ﺣﺘﯽ ﮐﭙﯽ ﮐﺮدن ﻣﻄﺎﻟﺐ از ﺳﺎﯾﺖﻫﺎي دﯾﮕﺮ(‬ ‫ﮐﻪ ارزﺷﯽ ﺑﺮاي ﮐﺎرﺑﺮان ﻧﺪارﻧﺪ‪ .‬داﺷﺘﻦ ﻣﺤﺘﻮاي ﺗﮑﺮاري ﯾﺎ ﺗﻘﺮﯾﺒﺎً ﺗﮑﺮاري در ﺳﺎﯾﺖ ) ﺑﺮاي‬ ‫ﮐﺴﺐ اﻃﻼﻋﺎت ﺑﯿﺸﺘﺮ‪ ،‬ﻣﻘﺎﻟﮥ ﻣﻄﻠﺐ ﺗﮑﺮاري را ﻣﻄﺎﻟﻌﻪ ﮐﻨﯿﺪ(‪.‬‬

‫‪‬‬

‫ﻣﻄﺎﻟﺐ و ﺳﺮوﯾﺲﻫﺎي ﻣﻨﺤﺼﺮ ﺑﻪ ﻓﺮد ﺗﻮﻟﯿﺪ ﮐﻨﯿﺪ – ﺳﺮوﯾﺴﯽ ﺟﺪﯾﺪ و ﻣﻔﯿﺪي اراﺋﻪ دﻫﯿﺪ ﮐﻪ دﯾﮕﺮ‬ ‫ﺳﺎﯾﺖﻫﺎ‪ ،‬اراﺋﻪ ﻧﻤﯽدﻫﻨﺪ‪ .‬ﺷﻤﺎ ﻣﯽﺗﻮاﻧﯿﺪ ﺑﺨﺸﯽ از ﺗﺤﻘﯿﻘﺎﺗﯽ را ﮐﻪ ﺧﻮدﺗﺎن اﻧﺠﺎم داده اﯾﺪ‪ ،‬ﺑﻪ ﺷﮑﻞ ﻣﮑﺘﻮب‪،‬‬ ‫ﻣﻨﺘﺸﺮ ﮐﻨﯿﺪ ‪ ،‬اﺧﺒﺎر و داﺳﺘﺎﻧﻬﺎي ﺟﺪﯾﺪ ﻣﻨﺘﺸﺮ ﮐﻨﯿﺪ و ﯾﺎ از ﺗﻮان ﮐﺎرﺑﺮان ﺣﺮﻓﻪ اي ﺳﺎﯾﺘﺘﺎن اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪.‬‬ ‫ﺳﺎﯾﺖﻫﺎي دﯾﮕﺮ ﻣﻤﮑﻦ اﺳﺖ ﺑﻪ ﺧﺎﻃﺮ ﻧﺪاﺷﺘﻦ ﻣﻨﺎﺑﻊ و ﻧﯿﺮوﻫﺎي ﻣﺘﺨﺼﺺ ﻗﺎدر ﺑﻪ اﻧﺘﺸﺎر آن ﻣﻄﺎﻟﺐ‬ ‫ﻧﺒﺎﺷﻨﺪ‪.‬‬

‫‪‬‬

‫ﻣﻄﺎﻟﺐ را در ﻗﺪم ﻧﺨﺴﺖ ﺑﺮاي ﮐﺎرﺑﺮان ﺳﺎﯾﺖ ﺑﻨﻮﯾﺴﺪ ﻧﻪ ﺑﺮاي ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ – ﺳﺎﯾﺖ ﺧﻮد را ﺑﺎ‬ ‫ﺗﻮﺟﻪ ﺑﻪ ﻧﯿﺎز ﮐﺎرﺑﺮاﻧﺘﺎن ﺑﺴﺎزﯾﺪ و اﻃﻤﯿﻨﺎن ﺣﺎﺻﻞ ﮐﻨﯿﺪ ﮐﻪ ﺳﺎﯾﺖ ﺷﻤﺎ ﺑﻪ راﺣﺘﯽ ﺑﺮاي ﻣﻮﺗﻮرﻫﺎي‬ ‫ﺟﺴﺘﺠﻮ ﻧﯿﺰ در دﺳﺘﺮس اﺳﺖ‪ .‬اﻧﺠﺎم اﯾﻦ ﮐﺎر اﻏﻠﺐ ﻧﺘﺎﯾﺞ ﻣﺜﺒﺘﯽ ﺑﻪ ﻫﻤﺮاه دارد‪.‬‬

‫ﮐﺎرﻫﺎﯾﯽ ﮐﻪ ﺑﺎﯾﺪ از اﻧﺠﺎﻣﺸﺎن اﺟﺘﻨﺎب ﮐﻨﯿﺪ‪:‬‬ ‫‪ o‬وارد ﮐﺮدن ﺗﻌﺪاد زﯾﺎدي ﮐﻠﻤﺎت ﮐﻠﯿﺪي ﻏﯿﺮ ﺿﺮوري در ﺻﻔﺤﻪ ﮐﻪ ﺗﻨﻬﺎ ﺑﺮاي ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ‬ ‫ﻓﺮاﻫﻢ ﺷﺪه اﻧﺪ و ﺑﺮاي ﮐﺎرﺑﺮان آزار دﻫﻨﺪه و ﯾﺎ ﺑﯽ رﺑﻄﻨﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪٢٠‬‬

‫‪ o‬اﺿﺎﻓﻪ ﮐﺮدن ﺑﺨﺸﯽ ﺑﻪ ﺳﺎﯾﺖ ﮐﻪ داراي اﯾﻦ ﻋﻨﻮان اﺳﺖ‪» :‬ﻋﺒﺎرات اﺷﺘﺒﺎه ﮐﻪ ﺑﺎﻋﺚ ورود ﺑﻪ اﯾﻦ‬ ‫ﺻﻔﺤﻪ ﺷﺪه اﺳﺖ ‪ «.‬اﯾﻦ ﺑﺨﺶ از ﺳﺎﯾﺖ ارزش ﺑﺴﯿﺎر ﮐﻤﯽ ﺑﺮاي ﮐﺎرﺑﺮان دارد‪.‬‬ ‫‪ o‬ﻓﺮﯾﺐ دادن ﮐﺎرﺑﺮان ﺑﺎ ﻣﺨﻔﯽ ﮐﺮدن ﻣﺘﻦ داﺧﻞ ﺻﻔﺤﻪ و ﻧﻤﺎﯾﺶ آن ﻣﺘﻦﻫﺎ ﺑﻪ ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ‬ ‫ﻣﺘﻦ داﺧﻞ ﻟﯿﻨﮏﻫﺎ را ﺑﻪ ﺷﮑﻞ ﺑﻬﺘﺮي ﻓﺮاﻫﻢ ﮐﻨﯿﺪ‬ ‫ﻣﺘﻦ داﺧﻞ ﻟﯿﻨﮏ‪ ،‬ﺑﺨﺸﯽ از ﻣﺘﻦ ﺻﻔﺤﻪ اﺳﺖ ﮐﻪ ﮐﺎرﺑﺮ آﻧﻬﺎ را ﺑﻪ ﺷﮑﻞ ﻟﯿﻨﮏ ﻣﯽﺑﯿﻨﺪ و اﯾﻦ ﻣﺘﻦ ﻧﯿﺰ داﺧﻞ ﺑﺮﭼﺴﺐ‬ ‫>‪ <a href=”…”></a‬ﻗﺮار ﻣﯽﮔﯿﺮد‪.‬‬

‫ﻣﺘﻦ داﺧﻞ ﻟﯿﻨﮏ ﺑﻪ ﺧﻮﺑﯽ ﺻﻔﺤﻪ ﻣﻘﺼﺪ ﮐﻪ ﯾﮑﯽ از ﻣﻘﺎﻻت ﺳﺎﯾﺖ ﻣﺎ اﺳﺖ را ﺑﻪ ﺧﻮﺑﯽ ﺗﻮﺻﯿﻒ‬ ‫ﻣﯽ ﮐﻨﺪ‬ ‫اﯾﻦ ﻣﺘﻦ‪ ،‬اﻃﻼﻋﺎﺗﯽ درﺑﺎرة ﺻﻔﺤﻪ ﻣﻘﺼﺪ ﺑﻪ ﮐﺎرﺑﺮان و ﮔﻮﮔﻞ اراﺋﻪ ﻣﯽﮐﻨﺪ‪ .‬ﻟﯿﻨﮏﻫﺎي ﺻﻔﺤﻪ ﺷﻤﺎ ﻣﻤﮑﻦ‬ ‫اﺳﺖ داﺧﻠﯽ ﺑﺎﺷﻨﺪ )از ﯾﮏ ﺻﻔﺤﻪ ﺑﻪ ﺻﻔﺤﻪ دﯾﮕﺮ در ﺳﺎﯾﺖ ﺧﻮدﺗﺎن ﻟﯿﻨﮏ داده ﺑﺎﺷﯿﺪ( و ﯾﺎ ﺧﺮوﺟﯽ ﺑﺎﺷﺪ و ﺑﻪ‬ ‫ﻣﻄﺎﻟﺒﯽ در ﺳﺎﯾﺘﯽ دﯾﮕﺮ ﻟﯿﻨﮏ داده ﺑﺎﺷﯿﺪ‪ .‬در ﻫﺮ دو ﺣﺎﻟﺖ‪ ،‬ﻫﺮ ﭼﻘﺪر ﻣﺘﻦ ﺑﻬﺘﺮي ﺑﺮاي ﻟﯿﻨﮏﻫﺎﯾﺘﺎن اﻧﺘﺨﺎب ﮐﻨﯿﺪ‪،‬‬ ‫ﮐﺎرﺑﺮان ﺑﺎ راﺣﺘﯽ ﺑﯿﺸﺘﺮ در ﺳﺎﯾﺖ ﺷﻤﺎ ﮐﺎوش ﻣﯽﮐﻨﻨﺪ و ﮔﻮﮔﻞ ﻧﯿﺰ ﻣﯽﺗﻮاﻧﺪ اﻃﻼﻋﺎﺗﯽ را درﺑﺎرة ﺻﻔﺤﻪ ﻣﻘﺼﺪ ﺑﻪ‬ ‫دﺳﺖ ﺑﯿﺎورد‪.‬‬ ‫ﭼﻨﺪ ﻧﮑﺘﮥ ﻣﻔﯿﺪ درﺑﺎرة ﻓﺮاﻫﻢ ﮐﺮدن ﻣﺘﻦ ﻣﻨﺎﺳﺐ ﺑﺮاي ﻟﯿﻨﮏﻫﺎ‬ ‫‪‬‬

‫ﻣﺘﻦﻫﺎ را ﺑﻪ ﺷﮑﻞ ﺗﻮﺻﯿﻔﯽ ﺑﻨﻮﯾﺴﯿﺪ – ﻣﺘﻦ داﺧﻞ ﻟﯿﻨﮏ ﺣﺪاﻗﻞ ﺑﺎﯾﺪ اﻃﻼﻋﺎﺗﯽ ﭘﺎﯾﻪ درﺑﺎرة ﺻﻔﺤﻪ ﻣﻘﺼﺪ‬ ‫اراﺋﻪ دﻫﺪ‪.‬‬ ‫ﮐﺎرﻫﺎﯾﯽ ﮐﻪ ﺑﺎﯾﺪ از اﻧﺠﺎﻣﺸﺎن اﺟﺘﻨﺎب ﮐﻨﯿﺪ‪:‬‬ ‫‪ o‬ﻧﻮﺷﺘﻦ ﮐﻠﻤﺎﺗﯽ ﻋﻤﻮﻣﯽ ﻫﻤﭽﻮن »ﺻﻔﺤﻪ« ‪» ،‬ﻣﻘﺎﻟﻪ« و ﯾﺎ »اﯾﻨﺠﺎ ﮐﻠﯿﮏ ﮐﻨﯿﺪ«‬ ‫‪ o‬اﺳﺘﻔﺎده از ﻣﺘﻨﯽ ﮐﻪ ارﺗﺒﺎﻃﯽ ﺑﺎ ﻣﻮﺿﻮع ﺻﻔﺤﻪ ﻣﻘﺼﺪ ﻧﺪارد‬ ‫‪ o‬اﺳﺘﻔﺎده از آدرس ﺻﻔﺤﻪ ﺑﻪ ﻋﻨﻮان ﻣﺘﻦ داﺧﻞ ﻟﯿﻨﮏ )اﻟﺒﺘﻪ اﺳﺘﻔﺎده از آدرس ﺻﻔﺤﻪ ﺑﻪ ﺟﺎي ﻣﺘﻦ‬ ‫داﺧﻞ ﻟﯿﻨﮏ ﺗﻨﻬﺎ زﻣﺎﻧﯽ ﻣﻨﺎﺳﺐ اﺳﺖ ﮐﻪ ﺑﺨﻮاﻫﯿﺪ ﯾﮏ ﺳﺎﯾﺖ دﯾﮕﺮ را ﺗﺒﻠﯿﻎ ﮐﻨﯿﺪ و ﺑﻪ آن ارﺟﺎع‬ ‫دﻫﯿﺪ(‬

‫‪‬‬

‫ﻣﺘﻦﻫﺎي داﺧﻞ ﻟﯿﻨﮏ را ﺑﻪ ﺷﮑﻠﯽ ﻣﺨﺘﺼﺮ ﺑﻨﻮﯾﺴﯿﺪ – از ﻣﺘﻦﻫﺎي ﮐﻮﺗﺎه و در ﻋﯿﻦ ﺣﺎل ﺗﻮﺻﯿﻔﯽ اﺳﺘﻔﺎده‬ ‫ﮐﻨﯿﺪ )اﻏﻠﺐ از ﭼﻨﺪ ﮐﻠﻤﻪ و ﯾﺎ ﯾﮏ ﻋﺒﺎرت ﮐﻮﺗﺎه اﺳﺘﻔﺎده ﮐﻨﯿﺪ(‬

‫‪www.ParsBook.org‬‬

‫‪٢١‬‬

‫ﮐﺎرﻫﺎﯾﯽ ﮐﻪ ﺑﺎﯾﺪ از اﻧﺠﺎﻣﺸﺎن اﺟﺘﻨﺎب ﮐﻨﯿﺪ‪:‬‬ ‫‪ o‬ﻧﻮﺷﺘﻦ ﻣﺘﻦﻫﺎي ﻃﻮﻻﻧﯽ در ﻟﯿﻨﮏ ﻣﺎﻧﻨﺪ ﯾﮏ ﺟﻤﻠﻪ ﻃﻮﻻﻧﯽ و ﯾﺎ ﯾﮏ ﭘﺎراﮔﺮاف ﻣﺘﻦ ﮐﻮﭼﮏ‬ ‫‪‬‬

‫از ﻣﺘﻦﻫﺎي ﺗﻮﺻﯿﻔﯽ ﺑﺮاي ﻟﯿﻨﮏﻫﺎي داﺧﻠﯽ ﺳﺎﯾﺖ ﻧﯿﺰ اﺳﺘﻔﺎده ﮐﻨﯿﺪ – ﻣﻤﮑﻦ اﺳﺖ ﻓﮑﺮ ﮐﻨﯿﺪ ﮐﻪ‬ ‫ﻣﺘﻦﻫﺎي ﺗﻮﺻﯿﻔﯽ را ﺑﺎﯾﺪ ﺗﻨﻬﺎ ﺑﺮاي ﻟﯿﻨﮏﻫﺎي ﺑﻪ ﺧﺎرج ﺳﺎﯾﺖ اﺳﺘﻔﺎده ﮐﻨﯿﺪ اﻣﺎ ﺗﻮﺟﻪ ﺑﯿﺸﺘﺮ ﺑﻪ ﻣﺘﻦِ‬ ‫ﻟﯿﻨﮏﻫﺎي داﺧﻠﯽ ﻧﯿﺰ ﻣﯽﺗﻮاﻧﺪ ﺑﻪ ﮐﺎرﺑﺮان و ﮔﻮﮔﻞ ﺑﺮاي اﺳﺘﻔﺎده ﺑﻬﺘﺮ از ﺳﺎﯾﺖ‪ ،‬ﮐﻤﮏ ﮐﻨﺪ‪.‬‬ ‫ﻣﻮاردي ﮐﻪ ﺑﺎﯾﺪ از اﻧﺠﺎﻣﺸﺎن اﺟﺘﻨﺎب ﮐﻨﯿﺪ‪:‬‬ ‫‪ o‬اﺳﺘﻔﺎده از ﻣﺘﻦﻫﺎي ﻃﻮﻻﻧﯽ و ﻣﻤﻠﻮ از ﮐﻠﻤﺎت ﮐﻠﯿﺪي در ﻟﯿﻨﮏﻫﺎ ﮐﻪ ﺗﻨﻬﺎ ﺑﺮاي ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ‬ ‫ﻓﺮاﻫﻢ ﺷﺪه ﺑﺎﺷﻨﺪ‬ ‫‪ o‬اﺿﺎﻓﻪ ﮐﺮدن ﻟﯿﻨﮏﻫﺎي ﻏﯿﺮ ﺿﺮوري ﺑﻪ ﺻﻔﺤﻪ ﮐﻪ ﺑﻪ ﮐﺎرﺑﺮان ﺳﺎﯾﺖ ﮐﻤﮑﯽ ﻧﮑﻨﺪ‪.‬‬

‫از ﺑﺮﭼﺴﺐﻫﺎي ﺗﯿﺘﺮ ﺑﻪ ﺷﮑﻞ ﻣﻨﺎﺳﺐ اﺳﺘﻔﺎده ﮐﻨﯿﺪ‬ ‫از ﺑﺮﭼﺴﺐﻫﺎي ﺗﯿﺘﺮ )اﯾﻦ ﺑﺮﭼﺴﺐ را ﺑﺎ ﺑﺮﭼﺴﺐ >‪ < head‬و ﯾﺎ ‪HTTP header‬ﻫﺎ اﺷﺘﺒﺎه ﻧﮕﯿﺮﯾﺪ( ﺑﺮاي ﺗﻌﯿﯿﻦ‬ ‫ﺳﺎﺧﺘﺎر ﻣﺤﺘﻮاي ﺻﻔﺤﻪ اﺳﺘﻔﺎده ﻣﯽﺷﻮد‪ .‬ﺷﺶ ﺳﺎﯾﺰ ﻣﺨﺘﻠﻒ از اﯾﻦ ﺑﺮﭼﺴﺐﻫﺎ وﺟﻮد دارد ﮐﻪ ﺑﺎ ﺑﺮﭼﺴﺐ >‪<h1‬‬ ‫ﺷﺮوع ﻣﯽﺷﻮد و از ﻫﻤﻪ ﺑﺮﭼﺴﺐﻫﺎ‪ ،‬اﻫﻤﯿﺖ ﺑﯿﺸﺘﺮي دارد و ﺑﻪ >‪ <h6‬ﮐﻪ ﮐﻤﺘﺮﯾﻦ اﻫﻤﯿﺖ را دارد‪ ،‬ﺧﺘﻢ ﻣﯽﺷﻮد‪.‬‬

‫در اﯾﻦ ﺻﻔﺤﻪ ﻣﺎ ﺑﺎﯾﺪ ﻧﺎم ﺳﺎﯾﺖ را در ﺑﺮﭼﺴﺐ ‪ h1‬ﻗﺮار دﻫﯿﻢ و ﺗﯿﺘﺮ ﻣﻘﺎﻟﻪ را ﻫﻢ در ﺑﺮﭼﺴﺐ ‪h2‬‬

‫ﺑﮕﺬارﯾﻢ‬ ‫از آﻧﺠﺎﺋﯿﮑﻪ ﮐﻪ ﻣﺘﻦ داﺧﻞ ﺑﺮﭼﺴﺐﻫﺎي ﺗﯿﺘﺮﺑﺎ ﺳﺎﯾﺰ ﺑﺰرﮔﺘﺮي در ﺻﻔﺤﻪ ﻧﻤﺎﯾﺶ داده ﻣﯽﺷﻮﻧﺪ‪ ،‬از ﻧﻈﺮ‬ ‫ﺑﺼﺮي ﺑﻪ ﮐﺎرﺑﺮان ﮐﻤﮏ ﻣﯽﮐﻨﻨﺪ ﮐﻪ ﺑﻔﻬﻤﻨﺪ‪ ،‬اﯾﻦ ﻣﺘﻮن‪ ،‬اﻫﻤﯿﺖ ﺑﺎﻻﯾﯽ دارﻧﺪ و اﻃﻼﻋﺎﺗﯽ درﺑﺎرة ﻣﻄﺎﻟﺐ اراﺋﻪ ﺷﺪه در‬ ‫زﯾﺮ ﻫﺮ ﺗﯿﺘﺮ اراﺋﻪ ﻣﯽدﻫﻨﺪ‪ .‬از ﺳﺎﯾﺰﻫﺎي ﻣﺨﺘﻠﻒ ﺑﺮﭼﺴﺐﻫﺎي ﺗﯿﺘﺮ ﺑﺮاي ﻣﻨﻈﻢ ﮐﺮدن ﻣﺤﺘﻮاي ﺻﻔﺤﻪ ﺑﻪ ﺷﮑﻞ‬ ‫ﺳﻠﺴﻠﻪ ﻣﺮاﺗﺒﯽ اﺳﺘﻔﺎده ﻣﯽﺷﻮد و اﺳﺘﻔﺎده از ﺑﺮﭼﺴﺐﻫﺎي ﻣﺨﺘﻠﻒ ﺗﯿﺘﺮ ﺑﻪ ﮐﺎرﺑﺮان ﮐﻤﮏ ﻣﯽﮐﻨﺪ ﺗﺎ ﺑﺘﻮاﻧﻨﺪ ﺑﻪ ﺷﮑﻞ‬ ‫راﺣﺖ ﺗﺮي از ﻣﻄﺎﻟﺐ داﺧﻞ ﺻﻔﺤﻪ اﺳﺘﻔﺎده ﮐﻨﻨﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪٢٢‬‬

‫ﭼﻨﺪ ﻧﮑﺘﮥ ﻣﻔﯿﺪ درﺑﺎرة اﺳﺘﻔﺎده از ﺑﺮﭼﺴﺐﻫﺎي ﺗﯿﺘﺮ‬ ‫‪‬‬

‫ﺗﺼﻮر ﮐﻨﯿﺪ در ﺣﺎل ﻧﻮﺷﺘﻦ رﺋﻮس ﻣﻄﺎﻟﺐ ﻫﺴﺘﯿﺪ – ﻫﻤﺎﻧﻨﺪ ﻧﻮﺷﺘﻦ رﺋﻮس ﻣﻄﺎﻟﺐ ﺑﺮاي ﯾﮏ ﻣﻘﺎﻟﻪ‬ ‫ﻃﻮﻻﻧﯽ ‪ ،‬ﮐﻤﯽ در ﻣﻮرد ﻣﻮﺿﻮع اﺻﻠﯽ و ﻣﻮﺿﻮﻋﺎت ﻓﺮﻋﯽ ﻣﻄﻠﺐ ﻓﮑﺮ ﮐﻨﯿﺪ و در ﻣﻮرد ﻣﮑﺎن ﻗﺮار ﮔﯿﺮي‬ ‫ﺗﯿﺘﺮﻫﺎ‪ ،‬ﺗﺼﻤﯿﻢ ﮔﯿﺮي ﮐﻨﯿﺪ‪.‬‬ ‫ﮐﺎرﻫﺎﯾﯽ ﮐﻪ ﺑﺎﯾﺪ از اﻧﺠﺎﻣﺸﺎن اﺟﺘﻨﺎب ﮐﻨﯿﺪ‪:‬‬ ‫‪ o‬ﻗﺮار دادن ﻣﺘﻦﻫﺎﯾﯽ در داﺧﻞ ﺑﺮﭼﺴﺐ ﺗﯿﺘﺮ ﺻﻔﺤﻪ ﮐﻪ ﻫﯿﭻ ﮐﻤﮑﯽ ﺑﻪ ﺗﻌﺮﯾﻒ ﺳﺎﺧﺘﺎر ﺻﻔﺤﻪ‬ ‫ﻧﻤﯽﮐﻨﺪ‬ ‫‪ o‬اﺳﺘﻔﺎده از ﺑﺮﭼﺴﺐﻫﺎي ﺗﯿﺘﺮ در ﺟﺎﯾﯽ ﮐﻪ اﺳﺘﻔﺎده از ﺑﺮﭼﺴﺐﻫﺎﯾﯽ ﻫﻤﭽﻮن >‪<em‬‬

‫و‬

‫>‪ <strong‬ﻣﻨﻄﻘﯽ ﺗﺮ ﺑﺎﺷﺪ‬ ‫‪ o‬ﺗﻐﯿﯿﺮ ﻧﺎﮔﻬﺎﻧﯽ ﺳﺎﯾﺰ ﺗﯿﺘﺮﻫﺎي داﺧﻞ ﺻﻔﺤﻪ )ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل اﺳﺘﻔﺎده از ﺑﺮﭼﺴﺐ >‪ <h6‬درﺳﺖ ﺑﻌﺪ‬ ‫از ﺑﺮﭼﺴﺐ >‪(<h1‬‬ ‫‪‬‬

‫از ﺑﺮﭼﺴﺐﻫﺎي ﺗﯿﺘﺮ ﺑﻪ ﺷﮑﻞ ﺑﻬﯿﻨﻪ در ﺳﺎﯾﺖ اﺳﺘﻔﺎده ﮐﻨﯿﺪ – از ﺑﺮﭼﺴﺐﻫﺎي ﺗﯿﺘﺮ ﻓﻘﻂ در ﻣﮑﺎن درﺳﺖ‬ ‫و زﻣﺎﻧﯽ ﮐﻪ ﺣﻀﻮر اﯾﻦ ﺑﺮﭼﺴﺐ ﻣﻨﻄﻘﯽ اﺳﺖ‪ ،‬اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪ .‬ﺑﺮﭼﺴﺐﻫﺎي ﺗﯿﺘﺮ ﻣﺘﻌﺪد در ﺻﻔﺤﻪ ﻣﯽﺗﻮاﻧﺪ‬ ‫ﺧﻮاﻧﺪن ﻣﺤﺘﻮاي ﺻﻔﺤﻪ را ﺑﺮاي ﮐﺎرﺑﺮان ﺳﺨﺖ ﮐﻨﺪ و آﻧﻬﺎ ﻣﺘﻮﺟﻪ ﻧﺸﻮﻧﺪ ﮐﻪ در ﮐﺠﺎ ﯾﮏ ﻣﻄﻠﺐ ﺷﺮوع و‬ ‫در ﮐﺠﺎ ﭘﺎﯾﺎن ﻣﯽﯾﺎﺑﺪ‪.‬‬ ‫ﮐﺎرﻫﺎﯾﯽ ﮐﻪ ﺑﺎﯾﺪ از اﻧﺠﺎﻣﺸﺎن اﺟﺘﻨﺎب ﮐﻨﯿﺪ‪:‬‬ ‫‪ o‬اﺳﺘﻔﺎدة ﺑﯽ روﯾﻪ از ﺑﺮﭼﺴﺐﻫﺎي ﺗﯿﺘﺮ در ﺻﻔﺤﺎت‬ ‫‪ o‬ﻗﺮار دادن ﺗﻤﺎﻣﯽ ﻣﺘﻦ ﺻﻔﺤﻪ در داﺧﻞ ﺑﺮﭼﺴﺐﻫﺎي ﺗﯿﺘﺮ‬ ‫‪ o‬اﺳﺘﻔﺎده از ﺑﺮﭼﺴﺐﻫﺎي ﺗﯿﺘﺮ ﺗﻨﻬﺎ ﺑﺮاي ﺳﺒﮏ دﻫﯽ ﺑﻪ ﻣﺘﻦ )ﺑﻪ ﺟﺎي ﻣﻌﻨﯽ ﺑﺨﺸﯿﺪن ﺑﻪ ﻣﺤﺘﻮاي‬ ‫ﺻﻔﺤﻪ(‬

‫ﺗﺼﺎوﯾﺮ اﺳﺘﻔﺎده ﺷﺪه در ﻃﺮﺣﺘﺎن را ﺑﻬﯿﻨﻪ ﮐﻨﯿﺪ‬ ‫ﺗﺼﺎوﯾﺮ ﻣﻤﮑﻦ اﺳﺖ ﺑﻪ ﻋﻨﻮان ﺑﺨﺸﯽ ﺳﺎده از ﺳﺎﯾﺖ ﺷﻤﺎ ﺑﻪ ﺣﺴﺎب ﺑﯿﺎﯾﻨﺪ اﻣﺎ ﺷﻤﺎ ﻣﯽﺗﻮاﻧﯿﺪ آﻧﻬﺎ را در‬ ‫ﺻﻔﺤﻪ ﺑﻬﯿﻨﻪ ﮐﻨﯿﺪ‪ .‬ﻫﻤﻪ ﺗﺼﺎوﯾﺮ ﻣﯽﺗﻮاﻧﻨﺪ ﻧﺎم و ﺧﺼﯿﺼﻪ‪ alt 6‬ﻣﺠﺰا داﺷﺘﻪ ﺑﺎﺷﺪ ﮐﻪ ﻫﺮ دوي آﻧﻬﺎ ﻣﯽﺗﻮاﻧﻨﺪ ﺑﺴﯿﺎر‬ ‫ﻣﻔﯿﺪ ﺑﺎﺷﻨﺪ‪ .‬ﺧﺼﯿﺼﻪ ‪ alt‬ﺑﻪ ﺷﻤﺎ اﺟﺎزه ﻣﯽدﻫﺪ ﮐﻪ ﯾﮏ ﻣﺘﻦ ﺟﺎﯾﮕﺰﯾﻦ ﺑﺮاي ﺗﺼﺎوﯾﺮ در ﻧﻈﺮ ﺑﮕﯿﺮﯾﺪ ﮐﻪ اﮔﺮ ﺗﺼﺎوﯾﺮ‬ ‫ﺑﻪ ﻫﺮ دﻟﯿﻠﯽ درﺻﻔﺤﻪ ﻧﻤﺎﯾﺶ داده ﻧﺸﺪ‪ ،‬ﻣﺘﻦ داﺧﻞ اﯾﻦ ﺧﺼﯿﺼﻪ ﺑﻪ ﺟﺎي ﺗﺼﻮﯾﺮ ﻧﻤﺎﯾﺶ ﯾﺎﺑﺪ‪.‬‬

‫‪٦‬‬

‫‪attribute‬‬

‫‪www.ParsBook.org‬‬

‫‪٢٣‬‬

‫ﻣﺘﻦ ‪ alt‬در اﯾﻨﺠﺎ ﺗﺼﻮﯾﺮﻣﺎن را ﺑﻪ ﺧﻮﺑﯽ ﺗﻮﺻﯿﻒ ﻣﯽ ﮐﻨﺪ ‪.‬‬ ‫ﭼﺮا ﺑﺎﯾﺪ از اﯾﻦ ﺧﺼﯿﺼﻪ اﺳﺘﻔﺎده ﮐﺮد ؟ اﮔﺮ ﮐﺎرﺑﺮ ﺳﺎﯾﺖ ﺷﻤﺎ را ﺑﺎ ﻣﺮورﮔﺮي ﺑﺎز ﮐﻨﺪ ﮐﻪ ﺗﺼﺎوﯾﺮ را ﭘﺸﺘﯿﺒﺎﻧﯽ‬ ‫ﻧﮑﻨﺪ و ﯾﺎ از ﺗﮑﻨﻮﻟﻮژيﻫﺎي ﺟﺎﯾﮕﺰﯾﻦ اﺳﺘﻔﺎده ﮐﺮده ﺑﺎﺷﺪ‪ ،‬ﻣﺎﻧﻨﺪ ﺑﺮﻧﺎﻣﻪﻫﺎي ﻗﺮاﺋﺖ ﻣﺘﻦ ﺻﻔﺤﻪ‪ ،‬ﻣﺤﺘﻮاﻧﯽ ‪، alt‬‬ ‫اﻃﻼﻋﺎﺗﯽ را درﺑﺎرة ﺗﺼﻮﯾﺮ ﺑﻪ ﮐﺎرﺑﺮ اراﺋﻪ ﻣﯽﮐﻨﺪ‪.‬‬

‫ﺗﺼﻮﯾﺮ ﻣﺎ ﺑﻨﺎ ﺑﻪ دﻻﯾﻠﯽ ﺑﺮاي ﮐﺎرﺑﺮ ﻧﻤﺎﯾﺶ داده ﻧﺸﺪه وﻟﯽ در ﻋﻮض ﻣﺘﻦ ﺗﻮﺻﯿﻔﯽ ‪ alt‬ﻣﺮﺑﻮط ﺑﻪ‬ ‫ﺗﺼﻮﯾﺮ ﺑﻪ ﻧﻤﺎﯾﺶ در آﻣﺪه اﺳﺖ‬ ‫دﻟﯿﻞ دﯾﮕﺮ ﺑﺮاي اﺳﺘﻔﺎده از ﻣﺘﻦ ‪ alt‬زﻣﺎﻧﯽ اﺳﺖ ﮐﻪ از ﯾﮏ ﺗﺼﻮﯾﺮ ﺑﻪ ﻋﻨﻮان ﻟﯿﻨﮏ اﺳﺘﻔﺎده ﮐﺮده ﺑﺎﺷﯿﺪ‪ .‬در‬ ‫اﯾﻦ ﺷﺮاﯾﻂ ﻣﺘﻦ داﺧﻞ ﺧﺼﯿﺼﻪ ‪ alt‬ﻫﻤﺎﻧﻨﺪ ﻣﺘﻦ داﺧﻞ ﻟﯿﻨﮏ ﻋﻤﻞ ﻣﯽﮐﻨﺪ‪ .‬ﺑﺎ اﯾﻦ وﺟﻮد ‪ ،‬ﻣﺎ ﭘﯿﺸﻨﻬﺎد ﻧﻤﯽﮐﻨﯿﻢ در‬ ‫ﺟﺎﯾﯽ ﮐﻪ اﺳﺘﻔﺎده از ﻟﯿﻨﮏﻫﺎي ﻣﺘﻨﯽ اﻣﮑﺎن ﭘﺬﯾﺮ اﺳﺖ‪ ،‬از ﺗﺼﺎوﯾﺮ ﺑﻪ ﻋﻨﻮان ﻟﯿﻨﮏ اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪ .‬در ﻧﻬﺎﯾﺖ ﺑﻬﯿﻨﻪ‬ ‫ﮐﺮدن ﻧﺎم ﺗﺼﺎوﯾﺮ و ﻣﺘﻦ ‪ ،alt‬ﺑﻪ ﺳﺮوﯾﺲﻫﺎﯾﯽ ﻣﺎﻧﻨﺪ ‪ Google Image Search‬ﮐﻤﮏ ﻣﯽﮐﻨﺪ ﺗﺎ ﺑﺎ دﯾﺪ ﺑﻬﺘﺮي‬ ‫ﺗﺼﺎوﯾﺮ را ﻓﻬﺮﺳﺖ ﮐﻨﻨﺪ‪.‬‬ ‫ﭼﻨﺪ ﻧﮑﺘﮥ ﻣﻔﯿﺪ درﺑﺎرة ﺑﻬﯿﻨﻪ ﮐﺮدن ﺗﺼﺎوﯾﺮ‬ ‫‪‬‬

‫از ﻧﺎم ﻓﺎﯾﻞ و ﻣﺘﻦ ‪ alt‬ﻣﺨﺘﺼﺮ و ﺗﻮﺻﯿﻔﯽ اﺳﺘﻔﺎده ﮐﻨﯿﺪ – ﻫﻤﺎﻧﻨﺪ ﻗﺴﻤﺖﻫﺎي ﻣﺨﺘﻠﻒ ﺳﺎﯾﺖ ﮐﻪ ﺑﺮ‬ ‫روﯾﺸﺎن ﺑﻬﯿﻨﻪ ﺳﺎزي اﻧﺠﺎم ﺷﺪ‪ ،‬ﻧﺎم ﻓﺎﯾﻞ و ﻣﺘﻦ ‪) alt‬ﺑﺮاي زﺑﺎنﻫﺎﯾﯽ ﮐﻪ از ﮐﺪ ‪ ASCII‬اﺳﺘﻔﺎده ﻣﯽﮐﻨﻨﺪ(‬ ‫اﮔﺮ ﮐﻮﺗﺎه و ﺗﻮﺻﯿﻔﯽ اﻧﺘﺨﺎب ﺷﻮد‪ ،‬ﺑﺴﯿﺎر ﺗﺎﺛﯿﺮ ﮔﺬار ﺧﻮاﻫﻨﺪ ﺑﻮد‪.‬‬ ‫ﮐﺎرﻫﺎﯾﯽ ﮐﻪ ﺑﺎﯾﺪ از اﻧﺠﺎﻣﺸﺎن اﺟﺘﻨﺎب ﮐﺮد‪:‬‬ ‫‪ o‬اﺳﺘﻔﺎده از ﻧﺎم ﻓﺎﯾﻞﻫﺎي ﻣﻌﻤﻮل ﻣﺎﻧﻨﺪ ‪) 1.jpg, pic1.gif, image1.png‬ﺑﺮﺧﯽ از ﺳﺎﯾﺖﻫﺎ ﮐﻪ‬ ‫ﻫﺰاران ﺗﺼﺎوﯾﺮ دارﻧﺪ ﻣﻤﮑﻦ اﺳﺖ ﺑﻪ ﺷﮑﻞ اﺗﻮﻣﺎﺗﯿﮏ ﻧﺎم ﺗﺼﺎوﯾﺮ را اﻧﺘﺨﺎب ﮐﻨﻨﺪ(‬ ‫‪ o‬اﻧﺘﺨﺎب ﻧﺎم ﻓﺎﯾﻞﻫﺎي ﺑﺴﯿﺎر ﻃﻮﻻﻧﯽ‬ ‫‪ o‬ﻗﺮار دادن ﮐﻠﻤﺎت ﮐﻠﯿﺪي در داﺧﻞ ﻣﺘﻦ ‪ alt‬و ﯾﺎ ﮐﭙﯽ ﮐﺮدن ﮐﻞ ﻣﺘﻦ داﺧﻞ ﺟﻤﻠﻪ‬

‫‪www.ParsBook.org‬‬

‫‪٢۴‬‬

‫‪‬‬

‫زﻣﺎﻧﯽ ﮐﻪ از ﺗﺼﺎوﯾﺮ ﺑﻪ ﻋﻨﻮان ﻟﯿﻨﮏ اﺳﺘﻔﺎده ﻣﯽﮐﻨﯿﺪ‪ ،‬ﻣﺘﻦ ‪ alt‬را ﻧﯿﺰ ﺑﺮاي ﺗﺼﻮﯾﺮ در ﻧﻈﺮ ﺑﮕﯿﺮﯾﺪ –‬ ‫اﮔﺮ ﺗﺼﻤﯿﻢ دارﯾﺪ ﮐﻪ از ﯾﮏ ﺗﺼﻮﯾﺮ ﺑﻪ ﻋﻨﻮان ﻟﯿﻨﮏ اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪ ،‬ﻓﺮاﻫﻢ ﮐﺮدن ﻣﺘﻦ ‪ alt‬ﺑﻪ ﮔﻮﮔﻞ ﮐﻤﮏ‬ ‫ﻣﯽﮐﻨﺪ ﺗﺎ اﻃﻼﻋﺎت ﺑﯿﺸﺘﺮي از ﺻﻔﺤﻪ اي ﮐﻪ ﺑﻪ آن ﻟﯿﻨﮏ داده اﯾﺪ‪ ،‬ﺑﻪ دﺳﺖ آورد‪ .‬ﺗﺼﻮر ﮐﻨﯿﺪ ﮐﻪ در ﺣﺎل‬ ‫ﻓﺮاﻫﻢ ﮐﺮدن ﻣﺘﻦ ﺑﺮاي ﯾﮏ ﻟﯿﻨﮏ ﻋﺎدي ﻫﺴﺘﯿﺪ‪.‬‬ ‫ﮐﺎرﻫﺎﯾﯽ ﮐﻪ ﺑﺎﯾﺪ از اﻧﺠﺎﻣﺸﺎن اﺟﺘﻨﺎب ﮐﻨﯿﺪ‪:‬‬ ‫‪ o‬ﻧﻮﺷﺘﻦ ﻣﺘﻦﻫﺎي ‪ alt‬ﺑﺴﯿﺎر ﻃﻮﻻﻧﯽ ﮐﻪ ﻣﻤﮑﻦ اﺳﺖ از ﻃﺮف ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ ﺑﻪ ﻋﻨﻮان ‪spam‬‬ ‫ﺷﻨﺎﺧﺘﻪ ﺷﻮد‬ ‫‪ o‬ﺗﻨﻬﺎ اﺳﺘﻔﺎده از ﻟﯿﻨﮏﻫﺎي ﺗﺼﻮﯾﺮي ﺑﺮاي ﺑﺨﺶ ﻧﺎوﺑﺮي ﺳﺎﯾﺖ‬

‫‪‬‬

‫ﺗﺼﺎوﯾﺮ را در ﺷﺎﺧﻪ ﻣﺨﺼﻮص ﺧﻮدﺷﺎن ذﺧﯿﺮه ﮐﻨﯿﺪ – ﺑﻪ ﺟﺎي ﭘﺨﺶ ﮐﺮدن ﻓﺎﯾﻞﻫﺎي ﺗﺼﻮﯾﺮي در‬ ‫ﻣﺴﯿﺮﻫﺎي ﻣﺨﺘﻠﻒ و زﯾﺮ ﺷﺎﺧﻪﻫﺎي دوﻣﯿﻦ ﺳﺎﯾﺘﺘﺎن‪ ،‬ﺳﻌﯽ ﮐﻨﯿﺪ ﺗﺼﺎوﯾﺮ را در ﯾﮏ داﯾﺮﮐﺘﻮري ﻗﺮار دﻫﯿﺪ )‬ ‫ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ‪ (example.ir/images‬اﯾﻦ ﮐﺎر دﺳﺘﺮﺳﯽ ﺑﻪ ﻣﺴﯿﺮ ﺗﺼﺎوﯾﺮ را ﺗﺴﻬﯿﻞ ﻣﯽﮐﻨﺪ‪.‬‬

‫‪‬‬

‫از ﻧﻮع ﻓﺎﯾﻞﻫﺎي ﻣﻌﻤﻮل اﺳﺘﻔﺎده ﮐﻨﯿﺪ – اﻏﻠﺐ ﻣﺮورﮔﺮﻫﺎ از ﻓﺮﻣﺖﻫﺎي ﺗﺼﺎوﯾﺮيِ ‪ JPEG, GIF, PNG‬و‬ ‫‪ BMP‬ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽﮐﻨﻨﺪ‪ .‬ﺑﻬﺘﺮ اﺳﺖ ﮐﻪ ﻧﻮع ﻓﺎﯾﻞ ﺑﺎ ﭘﺴﻮﻧﺪ ﻓﺎﯾﻞ ﻧﯿﺰ ﯾﮑﯽ ﺑﺎﺷﺪ‪.‬‬

‫از ﻓﺎﯾﻞ ‪ robots.txt‬ﺑﻬﺮه ﺑﺒﺮﯾﺪ‬ ‫ﯾﮏ ﻓﺎﯾﻞ ‪ robots.txt‬ﺑﻪ ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ ﻣﯽﮔﻮﯾﺪ آﯾﺎ آﻧﻬﺎ اﺟﺎزه دارﻧﺪ ﮐﻪ ﺑﻪ ﺑﺨﺸﯽ از ﺳﺎﯾﺖ دﺳﺘﺮﺳﯽ داﺷﺘﻪ‬ ‫ﺑﺎﺷﻨﺪ و آن ﺑﺨﺶ را ﮐﺎوش ﮐﻨﻨﺪ ﯾﺎ ﺧﯿﺮ‪ .‬اﯾﻦ ﻓﺎﯾﻞ‪ ،‬ﮐﻪ ﺑﺎﯾﺪ ﻧﺎﻣﺶ را »‪ «robots.txt‬ﺑﮕﺬارﯾﺪ‪ ،‬در ﺷﺎﺧﻪ اﺻﻠﯽ ﺳﺎﯾﺖ‬ ‫ﺷﻤﺎ ﻗﺮار ﻣﯽﮔﯿﺮد‪.‬‬

‫آدرس ﻓﺎﯾﻞ ‪ robots.txt‬ﺑﺮ روي ‪ server‬ﯾﮏ ﺳﺎﯾﺖ‬

‫‪www.ParsBook.org‬‬

‫‪٢۵‬‬

‫ﺑﺎ ﺗﻮﺟﻪ ﺑﻪ اﯾﻦ دﺳﺘﻮر ﻫﻤﻪ ﻣﻮﺗﻮر ﻫﺎ ي ﺟﺴﺘﺠﻮ ) در اﯾﻨﺠﺎ * ﯾﻌﻨﯽ ﻫﻤﻪ ﻣﻮﺗﻮر ﻫﺎ ي ﺟﺴﺘﺠﻮ ( اﺟﺎزه‬ ‫ﻓﻬﺮﺳﺖ ﮐﺮدن ﻣﺤﺘﻮاي ﭘﻮﺷﻪ ‪ images‬را ﻧﺪارﻧﺪ و ﻫﻤﭽﻨﯿﻦ ﺣﻖ ﻓﻬﺮﺳﺖ ﮐﺮدن ﺻﻔﺤﺎﺗﯽ ﮐﻪ ﺑﺎ ﮐﻠﻤﻪ‬ ‫‪ search‬ﺷﺮوع ﻣﯽ ﺷﻮﻧﺪ را ﻧﯿﺰ در اﺧﺘﯿﺎر ﻧﺨﻮاﻫﻨﺪ داﺷﺖ‬ ‫ﺷﺎﯾﺪ ﺑﺨﻮاﻫﯿﺪ ﮐﻪ ﺑﺮﺧﯽ از ﺻﻔﺤﺎت ﺳﺎﯾﺘﺘﺎن و ﯾﺎ ﺑﺮﺧﯽ ﻣﺴﯿﺮﻫﺎي ﺧﺎص از ﺳﺎﯾﺖ ﺗﻮﺳﻂ ﻣﻮﺗﻮرﻫﺎي‬ ‫ﺟﺴﺘﺠﻮ‪ ،‬ﮐﺎوش ﻧﺸﻮد زﯾﺮا ﻣﻤﮑﻦ اﺳﺖ ﻣﻄﺎﻟﺐ ﻣﻔﯿﺪي در آن ﺻﻔﺤﺎت ﯾﺎ ﻣﺴﯿﺮﻫﺎ ﺑﺮاي ﮐﺎرﺑﺮان وﺟﻮد ﻧﺪاﺷﺘﻪ‬ ‫ﺑﺎﺷﺪ‪ .‬اﮔﺮ ﻣﯽﺧﻮاﻫﯿﺪ ﮐﻪ از ﮐﺎوش ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ در ﺑﺨﺶ ﺧﺎﺻﯽ از ﺳﺎﯾﺘﺘﺎن ﺟﻠﻮﮔﯿﺮي ﮐﻨﯿﺪ‪Google ،‬‬ ‫‪ webmaster Tools‬اﺑﺰار ﻣﻨﺎﺳﺒﯽ در اﺧﺘﯿﺎر ﺷﻤﺎ ﻗﺮار ﻣﯽدﻫﺪ ﺑﻪ ﻧﺎم ‪ robots.txt generator‬ﮐﻪ ﺑﻪ ﺷﻤﺎ در‬ ‫ﺳﺎﺧﺖ ﻓﺎﯾﻞ ‪ robots.txt‬ﮐﻤﮏ ﻣﯽﮐﻨﺪ‪ .‬ﺗﻮﺟﻪ داﺷﺘﻪ ﺑﺎﺷﯿﺪ ﮐﻪ اﮔﺮ ﺳﺎﯾﺖ ﺷﻤﺎ ﺣﺎوي دوﻣﯿﻦﻫﺎي زﯾﺮ ﺷﺎﺧﻪ‪ 7‬اﺳﺖ و‬ ‫ﻣﺎﯾﻠﯿﺪ ﮐﻪ ﺑﺨﺸﯽ ﺧﺎص از اﯾﻦ زﯾﺮ ﺷﺎﺧﻪ ﺗﻮﺳﻂ ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ‪ ،‬ﮐﺎوش ﻧﺸﻮد‪ ،‬ﺑﺎﯾﺪ ﯾﮏ ﻓﺎﯾﻞ ‪robots.txt‬‬ ‫ﺟﺪﯾﺪ ﺑﺮاي آن زﯾﺮ ﺷﺎﺧﻪ ﺑﺴﺎزﯾﺪ‪ .‬ﺑﺮاي ﮐﺴﺐ اﻃﻼﻋﺎت ﺑﯿﺸﺘﺮ در ﻣﻮرد ﻓﺎﯾﻞ ‪ robots.txt‬ﭘﯿﺸﻨﻬﺎد ﻣﯽﮐﻨﯿﻢ ﮐﻪ‬ ‫راﻫﻨﻤﺎي اﺳﺘﻔﺎده از ﻓﺎﯾﻞ ‪ robots.txt‬در ﻣﺮﮐﺰ راﻫﻨﻤﺎي ﻣﺪﯾﺮﯾﺖ ﺳﺎﯾﺖ‪ ‬ﮔﻮﮔﻞ را ﻣﻄﺎﻟﻌﻪ ﮐﻨﯿﺪ‪.‬‬ ‫راﻫﻬﺎي دﯾﮕﺮي ﻧﯿﺰ ﺑﺮاي ﺟﻠﻮﮔﯿﺮي از ﻓﻬﺮﺳﺖ ﺷﺪن ﺑﺨﺶ ﺧﺎﺻﯽ از ﺳﺎﯾﺖ در ﻧﺘﺎﯾﺞ ﺟﺴﺘﺠﻮ‪ ،‬وﺟﻮد دارد ﻫﻤﺎﻧﻨﺪ‬ ‫اﺿﺎﻓﻪ ﮐﺮدن »‪ «NOINDEX‬ﺑﻪ ﻓﺮاﺑﺮﭼﺴﺐ ‪ robots‬و ﯾﺎ اﺳﺘﻔﺎده از ﻓﺎﯾﻞ ‪ htaccess‬ﺑﺮاي ﺣﻔﺎﻇﺖ ﯾﮏ ﻣﺴﯿﺮ ﺧﺎص‬ ‫ﺑﺎ اﺳﺘﻔﺎده از ﮐﻠﻤﻪ ﻋﺒﻮر و ﯾﺎ ﺣﺘﯽ اﺳﺘﻔﺎده از ‪ Google Webmaster Tools‬ﺑﺮاي ﺣﺬف ﻣﺤﺘﻮاﯾﯽ ﮐﻪ در ﺣﺎل‬ ‫ﺣﺎﺿﺮ ﺗﻮﺳﻂ ﮔﻮﮔﻞ ﮐﺎوش ﺷﺪه اﺳﺖ‪.‬‬ ‫ﭼﻨﺪ ﻧﮑﺘﮥ ﻣﻔﯿﺪ درﺑﺎرة ﺳﺎﺧﺖ ﻓﺎﯾﻞ ‪robots.txt‬‬ ‫‪‬‬

‫ﺑﺮاي ﻣﻄﺎﻟﺐ ﺣﺴﺎس ﺳﺎﯾﺖ از ﺷﯿﻮهﻫﺎي اﻣﻦ ﺗﺮ اﺳﺘﻔﺎده ﮐﻨﯿﺪ – ﻧﺒﺎﯾﺪ ﻓﮑﺮ ﮐﻨﯿﺪ ﮐﻪ در ﺻﻮرت اﺳﺘﻔﺎده‬ ‫از ﻓﺎﯾﻞ ‪ robots.txt‬ﻣﯽﺗﻮاﻧﯿﺪ ﺟﻠﻮي ﻓﻬﺮﺳﺖ ﺷﺪن ﻣﻄﺎﻟﺐ ﻣﻬﻢ و ﺣﺴﺎس ﺳﺎﯾﺖ ﺧﻮد را ﺑﮕﯿﺮﯾﺪ‪ .‬ﯾﮏ دﻟﯿﻞ‬ ‫ﺑﺮاي اﯾﻦ اﻣﺮ اﯾﻦ اﺳﺖ ﮐﻪ اﮔﺮ از ﺟﺎﯾﯽ در اﯾﻨﺘﺮﻧﺖ ﺑﻪ ﺻﻔﺤﻪ اي ﮐﻪ ﻣﺴﺪودش ﮐﺮده اﯾﺪ‪ ،‬ﻟﯿﻨﮑﯽ وﺟﻮد‬ ‫داﺷﺘﻪ ﺑﺎﺷﺪ )ﻣﺜﻼ در ﻓﺎﯾﻞ ﺛﺒﺖ ارﺟﺎﻋﺎت‪ (8‬ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ ﻣﯽﺗﻮاﻧﻨﺪ ﺑﻪ ﺻﻔﺤﻪاي ﮐﻪ ﻣﺴﺪود ﺷﺪه‪،‬‬ ‫ارﺟﺎع ﺑﺪﻫﻨﺪ )ﺗﻨﻬﺎ آدرس را ﻧﻤﺎﯾﺶ ﺑﺪﻫﻨﺪ و ﻫﯿﭻ ﺗﯿﺘﺮ و ﻣﺘﻦ ﺗﻮﺻﯿﻔﯽ اي ﻧﻤﺎﯾﺶ داده ﻧﻤﯽﺷﻮد(‪ .‬ﻋﻼوه ﺑﺮ‬ ‫آن ﺑﺮﺧﯽ از ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮي ﻏﯿﺮ اﺳﺘﺎﻧﺪارد و ﻣﺨﺮب ﮐﻪ از ﻓﺎﯾﻞ ‪ robots‬ﭘﯿﺮوي ﻧﻤﯽﮐﻨﻨﺪ‪ ،‬ﻣﯽﺗﻮاﻧﻨﺪ‬ ‫دﺳﺘﻮرات داﺧﻞ اﯾﻦ ﻓﺎﯾﻞ را ﻧﺎدﯾﺪه ﺑﮕﯿﺮﻧﺪ و از آن اﻃﺎﻋﺖ ﻧﮑﻨﻨﺪ‪ .‬در آﺧﺮ‪ ،‬ﯾﮏ ﮐﺎرﺑﺮ ﮐﻨﺠﮑﺎو ﻣﯽﺗﻮاﻧﺪ ﺑﺎ‬ ‫آزﻣﺎﯾﺶ ﺷﺎﺧﻪﻫﺎ و زﯾﺮ ﺷﺎﺧﻪﻫﺎي ﻣﻮﺟﻮد در ﻓﺎﯾﻞ ‪ robots.txt‬را آزﻣﺎﯾﺶ ﮐﻨﺪ و آدرس ﺻﻔﺤﺎﺗﯽ را ﮐﻪ‬ ‫ﺷﻤﺎ ﻧﻤﯽﺧﻮاﻫﯿﺪ ﮐﺎرﺑﺮان ﺑﺒﯿﻨﻨﺪ را ﺣﺪس ﺑﺰﻧﺪ‪ .‬ﻣﺤﺘﻮا را رﻣﺰﻧﮕﺎري ﮐﻨﯿﺪ ﯾﺎ ﺑﺎ اﺳﺘﻔﺎده از ﮐﻠﻤﻪ ﻋﺒﻮر آن را‬ ‫ﺣﻔﺎﻇﺖ ﮐﻨﯿﺪ‪ .‬اﺳﺘﻔﺎده از ﻓﺎﯾﻞ ‪ . htaccess‬ﻧﯿﺰ ﯾﮏ راه ﺟﺎﯾﮕﺰﯾﻦ ﻣﻄﻤﺌﻦ ﺗﺮ اﺳﺖ‪.‬‬

‫‪٧‬‬

‫‪subdomain‬‬ ‫‪٨‬‬ ‫‪Log file‬‬

‫‪www.ParsBook.org‬‬

‫‪٢۶‬‬

‫ﮐﺎرﻫﺎﯾﯽ ﮐﻪ ﺑﺎﯾﺪ از اﻧﺠﺎﻣﺸﺎن اﺟﺘﻨﺎب ﮐﻨﯿﺪ‪:‬‬ ‫‪ o‬اﺟﺎزه دادن ﺑﻪ ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ ﺑﺮاي ﻓﻬﺮﺳﺖ ﮐﺮدن ﺻﻔﺤﺎﺗﯽ ﮐﻪ ﺧﻮد ﺷﺒﯿﻪ ﺑﻪ ﻧﺘﺎﯾﺞ ﺻﻔﺤﺎت‬ ‫ﺟﺴﺘﺠﻮ ﻫﺴﺘﻨﺪ )ﮐﺎرﺑﺮان دوﺳﺖ ﻧﺪارﻧﺪ ﮐﻪ ﭼﯿﺰي را ﺟﺴﺘﺠﻮ ﮐﻨﻨﺪ و از ﺻﻔﺤﻪ ﻧﺘﺎﯾﺞ وارد‬ ‫ﺻﻔﺤﻪ اي ﺷﻮﻧﺪ ﮐﻪ ﺧﻮد آن ﺻﻔﺤﻪ ﻧﯿﺰ ﻧﺘﺎﯾﺞ ﺟﺴﺘﺠﻮ را ﻧﻤﺎﯾﺶ ﻣﯽدﻫﺪ‪ .‬اﯾﻦ ﺻﻔﺤﺎت ﮐﻤﮑﯽ ﺑﻪ‬ ‫ﮐﺎرﺑﺮ ﻧﻤﯽﮐﻨﻨﺪ(‬ ‫‪ o‬اﺟﺎزه دادن ﺑﻪ ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ ﺑﺮاي ﻓﻬﺮﺳﺖ ﮐﺮدن ﺻﻔﺤﺎﺗﯽ ﮐﻪ ﺑﻪ ﻃﻮر اﺗﻮﻣﺎﺗﯿﮏ ﺳﺎﺧﺘﻪ‬ ‫ﺷﺪه اﻧﺪ و ﮐﺎﻣﻼً ﻣﺸﺎﺑﻪ ﻫﻢ ﻫﺴﺘﻨﺪ و ﯾﺎ ﺗﻨﻬﺎ ﺗﻔﺎوتﻫﺎي اﻧﺪﮐﯽ ﺑﺎ ﻫﻢ دارﻧﺪ‪ » :‬آﯾﺎ ﻓﮑﺮ ﻣﯽﮐﻨﯿﺪ ‪100‬‬ ‫ﻫﺰار ﺻﻔﺤﻪ ﮐﻪ ﺗﻘﺮﯾﺒﺎً ﻫﻤﻪ ﺷﺎن ﯾﮑﺴﺎن ﻫﺴﺘﻨﺪ‪ ،‬ﺑﺎﯾﺪ در ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ ﻓﻬﺮﺳﺖ ﺷﻮﻧﺪ ؟ «‬ ‫‪ o‬اﺟﺎزه دادن ﺑﻪ ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ ﺑﺮاي ﻓﻬﺮﺳﺖ ﮐﺮدن آدرسﻫﺎﯾﯽ ﮐﻪ در ﻧﺘﯿﺠﻪ اﺳﺘﻔﺎده از‬ ‫ﺳﺮوﯾﺴﻬﺎي ﭘﺮوﮐﺴﯽ‪ ،‬ﺳﺎﺧﺘﻪ ﻣﯽﺷﻮﻧﺪ‪.‬‬ ‫از وﺟﻮد ﺧﺼﯿﺼﻪ "‪ rel="nofollow‬ﺑﺮاي ﻟﯿﻨﮑﻬﺎ‪ ،‬آﮔﺎه ﺑﺎﺷﯿﺪ‬ ‫ﺗﻨﻈﯿﻢ ﺧﺼﯿﺼﻪ ‪ rel‬ﻣﺮﺑﻮط ﺑﻪ ﻟﯿﻨﮏﻫﺎ‪ ،‬ﺑﺎ ﻣﻘﺪار ‪ nofollow‬ﺑﻪ ﮔﻮﮔﻞ ﻣﯽﮔﻮﯾﺪ ﮐﻪ ﯾﮏ ﺳﺮي ﻟﯿﻨﮏﻫﺎي ﺧﺎص در‬ ‫ﺳﺎﯾﺖ ﺷﻤﺎ را ﻧﺒﺎﯾﺪ دﻧﺒﺎل ﮐﻨﺪ و ﯾﺎ ﻫﯿﭻ ارزﺷﯽ را ﺑﻪ ﺻﻔﺤﻪ ﮐﻪ از اﯾﻦ ﻃﺮﯾﻖ ﺑﻪ آن ﻟﯿﻨﮏ داده ﺷﺪه اﺳﺖ‪ ،‬اﻧﺘﻘﺎل‬ ‫ﻧﺪﻫﺪ‪ .‬ﺑﺮاي اﺳﺘﻔﺎده از اﯾﻦ ﻗﺎﺑﻠﯿﺖ ﺑﺎﯾﺪ "‪ rel="nofollow‬را ﺑﻪ داﺧﻞ ﺑﺮﭼﺴﺐ ﻟﯿﻨﮏ اﺿﺎﻓﻪ ﮐﻨﯿﺪ‪.‬‬

‫اﮔﺮ ﺑﻪ ﺳﺎﯾﺘﯽ ﻟﯿﻨﮏ ﻣﯽ دﻫﯿﺪ ﮐﻪ ﺑﻪ آن اﻋﺘﻤﺎد ﻧﺪارﯾﺪ و ﯾﺎ ﻧ ﻤﯽ ﺧﻮاﻫﯿﺪ ارزﺷﯽ را ﺑﻪ ﺳﺎﯾﺖ ﻣﻮرد‬ ‫ﻧﻈﺮ از ﺳﺎﯾﺖ ﺧﻮدﺗﺎن اﻧﺘﻘﺎل دﻫﯿﺪ‪ ،‬از ‪ nofollow‬اﺳﺘﻔﺎده ﮐﻨﯿﺪ ‪.‬‬ ‫ﭼﻪ زﻣﺎﻧﯽ اﺳﺘﻔﺎده از اﯾﻦ ﺷﯿﻮه ﺳﻮدﻣﻨﺪ اﺳﺖ ؟ اﮔﺮ ﺳﺎﯾﺖ ﺷﻤﺎ ﺑﺨﺶ ﮐﺎﻣﻨﺖ دارد و اﯾﻦ ﺑﺨﺶ ﺑﺮاي ﻋﻤﻮم ﻗﺎﺑﻞ‬ ‫اﺳﺘﻔﺎده اﺳﺖ‪ ،‬ﻟﯿﻨﮏ دادن از داﺧﻞ ﮐﺎﻣﻨﺖﻫﺎ ﺑﻪ ﺳﺎﯾﺖﻫﺎي دﯾﮕﺮ‪ ،‬ﻣﯿﺘﻮاﻧﺪ ارزﺷﯽ را از ﺻﻔﺤﻪ ﺷﻤﺎ ﺑﻪ ﺳﺎﯾﺖ ﻣﻘﺼﺪ‬ ‫اﻧﺘﻘﺎل دﻫﺪ‪ .‬اﻣﮑﺎن دارد ﺷﻤﺎ ﻣﺎﯾﻞ ﻧﺒﺎﺷﯿﺪ ﺑﻪ آن ﺳﺎﯾﺖﻫﺎ ارزﺷﯽ را اﻧﺘﻘﺎل دﻫﯿﺪ‪ .‬ﮐﺎﻣﻨﺖﻫﺎي وﺑﻼگ ﺟﺰو ﺑﺨﺶﻫﺎﯾﯽ‬ ‫از ﺳﺎﯾﺖ اﺳﺖ ﺑﺴﯿﺎر ﻣﺴﺘﻌﺪ آﻟﻮده ﺷﺪن ﺑﻪ ‪ spam‬اﺳﺖ‪ .‬اﺳﺘﻔﺎده از ‪ nofollow‬ﺑﻪ ﺷﻤﺎ اﻃﻤﯿﻨﺎن ﻣﯽدﻫﺪ ﮐﻪ ارزش‬ ‫ﺻﻔﺤﺎت ﺳﺎﯾﺘﺘﺎن را ﮐﻪ ﺑﻪ زﺣﻤﺖ ﺑﻪ دﺳﺖ آورده اﯾﺪ‪ ،‬ﺑﻪ ﺳﺎﯾﺘﻬﺎي ﺑﯽ ارزش اﻧﺘﻘﺎل ﻧﻤﯽدﻫﯿﺪ‪ .‬ﺑﺴﯿﺎري از ﻧﺮم‬ ‫اﻓﺰارﻫﺎي راه اﻧﺪازي وﺑﻼگ ﺑﻪ ﻃﻮر اﺗﻮﻣﺎﺗﯿﮏ‪ nofollow ،‬را ﺑﻪ ﻟﯿﻨﮏﻫﺎي داﺧﻞ ﮐﺎﻣﻨﺖ‪ ‬ﮐﺎرﺑﺮان اﺿﺎﻓﻪ ﻣﯽﮐﻨﻨﺪ اﻣ‪‬ﺎ‬ ‫آﻧﻬﺎﯾﯽ ﮐﻪ ﺳﯿﺴﺘﻤﺸﺎن اﯾﻦ ﻗﺎﺑﻠﯿﺖ را ﺑﻪ ﻃﻮر ﭘﯿﺶ ﻓﺮض ﻧﺪارد‪ ،‬ﺑﺎﯾﺪ ﺑﻪ ﺷﮑﻞ دﺳﺘﯽ‪ nofollow ،‬را ﺑﻪ ﻟﯿﻨﮏﻫﺎ‬ ‫اﺿﺎﻓﻪ ﮐﻨﻨﺪ‪ .‬اﯾﻦ ﻗﺎﺑﻠﯿﺖ را ﻣﯽﺗﻮاﻧﯿﺪ ﺑﺮاي ﺑﺨﺶﻫﺎي دﯾﮕﺮ ﺳﺎﯾﺖ ﮐﻪ اﻃﻼﻋﺎﺗﺶ ﺗﻮﺳﻂ ﮐﺎرﺑﺮان ﻓﺮاﻫﻢ ﻣﯽﺷﻮد‪،‬‬ ‫اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪ .‬ﺑﺨﺶﻫﺎﯾﯽ ﻫﻤﭽﻮن ﺻﻔﺤﻪ ﺷﺨﺼﯽ ﮐﺎرﺑﺮان‪ ،‬ﺗﺎﻻرﻫﺎي ﮔﻔﺘﻤﺎن‪ ،‬اﺗﺎقﻫﺎي ﭼﺖ و ﻟﯿﺴﺖ ارﺟﺎﻋﺎت از‬

‫‪www.ParsBook.org‬‬

‫‪٢٧‬‬

‫ﺳﺎﯾﺘﻬﺎي دﯾﮕﺮ‪ .‬اﮔﺮ ﻣﯽﺧﻮاﻫﯿﺪ ﺑﻪ ﻟﯿﻨﮏﻫﺎﯾﯽ ﮐﻪ ﺗﻮﺳﻂ دﯾﮕﺮان اﺿﺎﻓﻪ ﺷﺪه اﻧﺪ را ﺗﺎﯾﯿﺪ ﮐﻨﯿﺪ )ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل اﮔﺮ‬ ‫اﺷﺨﺎﺻﯽ ﮐﻪ در ﺳﺎﯾﺖ ﺷﻤﺎ ﮐﺎﻣﻨﺖ ﻣﯽﮔﺬارﻧﺪ‪ ،‬ﻣﻮرد ﺗﺎﯾﯿﺪ ﺷﻤﺎ ﻫﺴﺘﻨﺪ(‪ ،‬دﯾﮕﺮ ﻻزم ﻧﯿﺴﺖ ﮐﻪ ﺑﻪ ﻟﯿﻨﮏﻫﺎﯾﺘﺎن‪،‬‬ ‫‪ nofollow‬اﺿﺎﻓﻪ ﮐﻨﯿﺪ‪ .‬ﺑﺎ اﯾﻦ وﺟﻮد ﻟﯿﻨﮏ دادن ﺑﻪ ﺳﺎﯾﺖﻫﺎﯾﯽ ﮐﻪ از ﻧﻈﺮ ﮔﻮﮔﻞ‪ ،‬ﺳﺎﯾﺖﻫﺎي ‪ spam‬ﻣﺤﺴﻮب‬ ‫ﻣﯽﺷﻮﻧﺪ‪ ،‬ﻣﯽﺗﻮاﻧﺪ اﻋﺘﺒﺎر ﺳﺎﯾﺖ ﺷﻤﺎ را ﺗﺤﺖ ﺗﺎﺛﯿﺮ ﻗﺮار دﻫﺪ‪ .‬ﻣﺮﮐﺰ راﻫﻨﻤﺎي ‪ webmaster‬ﮔﻮﮔﻞ‪ ،‬ﺗﺮﻓﻨﺪﻫﺎي‬ ‫ﺑﯿﺸﺘﺮي ﺑﺮاي ﺟﻠﻮﮔﯿﺮي از ‪ spam‬در ﮐﺎﻣﻨﺖﻫﺎ اراﺋﻪ ﻣﯽدﻫﺪ ﻣﺎﻧﻨﺪ اﺳﺘﻔﺎده از ‪ ) CAPTCHA‬ﮐﺪ ﺗﺎﯾﯿﺪ ﺗﺼﻮﯾﺮي ( و‬ ‫ﻓﻌﺎل ﮐﺮدن ﻣﺪﯾﺮﯾﺖ ﮐﺎﻣﻨﺖﻫﺎ‪.‬‬

‫ﯾﮏ اﺳﭙﻤﺮ در زﯾﺮ ﯾﮑﯽ از ﻣﻄﺎﻟﺐ ﺟﺪﯾﺪ ﺳﺎﯾﺖ ﻣﺎ ﮐﺎﻣﻨﺖ ﮔﺬاﺷﺘﻪ اﺳﺖ ﺑﻪ اﯾﻦ اﻣﯿﺪ ﮐﻪ از اﯾﻦ ﻃﺮﯾﻖ‪،‬‬ ‫‪ rank‬ﺳﺎﯾﺖ ﺧﻮد را اﻓﺰاﯾﺶ دﻫﺪ ‪.‬‬ ‫ﯾﮑﯽ دﯾﮕﺮ از ﻣﻮارد اﺳﺘﻔﺎده از ‪ nofollow‬زﻣﺎﻧﯽ اﺳﺖ ﮐﻪ ﻣﯽﺧﻮاﻫﯿﺪ ﺑﻪ ﺳﺎﯾﺘﯽ ارﺟﺎع ﺑﺪﻫﯿﺪ وﻟﯽ ﻧﻤﯽﺧﻮاﻫﯿﺪ‬ ‫ارزﺷﯽ را ﺑﻪ ﺳﺎﯾﺖ ﻣﻘﺼﺪ ﻣﻨﺘﻘﻞ ﮐﻨﯿﺪ‪ .‬ﺑﺮاي ﻣﺜﺎل ﻣﯽﺧﻮاﻫﯿﺪ ﻣﻄﻠﺒﯽ در ﻣﻮرد ارﺳﺎل اﺳﭙﻢ در ﭘﺴﺘﺘﺎن ﺑﻨﻮﯾﺴﯿﺪ و‬ ‫ﻗﺼﺪ دارﯾﺪ از ﺳﺎﯾﺘﯽ ﻧﺎم ﺑﺒﺮﯾﺪ ﮐﻪ ﺑﻪ ﺗﺎزﮔﯽ در ﺳﺎﯾﺖ ﺷﻤﺎ ‪ spam‬ارﺳﺎل ﮐﺮده اﺳﺖ‪ .‬ﺷﻤﺎ ﻣﯽﺧﻮاﻫﯿﺪ دﯾﮕﺮان را از‬ ‫وﺟﻮد اﯾﻦ ﺳﺎﯾﺖ آﮔﺎه ﮐﻨﯿﺪ از اﯾﻦ رو ﻟﯿﻨﮑﯽ ﺑﻪ ﺳﺎﯾﺖ ﻣﻮرد ﻧﻈﺮ در داﺧﻞ ﻣﺤﺘﻮاي ﭘﺴﺖ ﺧﻮد ﻗﺮار ﻣﯽدﻫﯿﺪ‪ ،‬ﺑﺎ اﯾﻦ‬ ‫وﺟﻮد‪ ،‬ﻗﻄﻌﺎً ﻧﻤﯽﺧﻮاﻫﯿﺪ ارزﺷﯽ را ﺑﻪ ﺳﺎﯾﺖ ﻣﻮرد ﻧﻈﺮ اﻧﺘﻘﺎل دﻫﯿﺪ و آن ﺳﺎﯾﺖ را ﺗﺎﯾﯿﺪ ﮐﻨﯿﺪ‪ .‬ﺣﺎل ﻣﻮﻗﻌﯿﺖ ﻣﻨﺎﺳﺒﯽ‬ ‫اﺳﺖ ﮐﻪ از ‪ nofollow‬اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪.‬‬ ‫در ﻧﻬﺎﯾﺖ‪ ،‬اﮔﺮ ﻣﯽﺧﻮاﻫﯿﺪ ﺑﻪ ﺗﻤﺎﻣﯽ ﻟﯿﻨﮏﻫﺎي داﺧﻞ ﺻﻔﺤﻪ‪ nofollow ،‬ﺑﺪﻫﯿﺪ‪ ،‬ﻣﯽﺗﻮاﻧﯿﺪ از ﻓﺮاﺑﺮﭼﺴﺐ ‪ robots‬ﺑﺎ‬ ‫ﻣﻘﺪار‪ nofollow‬اﺳﺘﻔﺎده ﮐﻨﯿﺪ ﮐﻪ در ﺑﺮﭼﺴﺐ >‪ <head‬در ﺑﺎﻻي ﺻﻔﺤﻪ ‪ HTML‬ﺷﻤﺎ ﻗﺮار ﻣﯽﮔﯿﺮد‪ .‬وﺑﻼگ‬ ‫‪ Webmaster‬ﮔﻮﮔﻞ‪ ،‬ﭘﺴﺘﯽ ﻣﻔﯿﺪ درﺑﺎرة اﺳﺘﻔﺎده از ﻓﺮاﺑﺮﭼﺴﺐ ‪ robots‬دارد ﮐﻪ ﻣﯽﺗﻮاﻧﯿﺪ آن را ﻣﻄﺎﻟﻌﻪ ﮐﻨﯿﺪ‪.‬‬ ‫ﺑﺮاي اﺳﺘﻔﺎده از اﯾﻦ ﺗﮑﻨﯿﮏ ﺑﺎﯾﺪ ﻓﺮاﺑﺮﭼﺴﺐ‬

‫> "‪ < meta name=”robots” content=”nofollow‬را ﺑﻪ‬

‫ﺑﺎﻻي ﺻﻔﺤﻪ ‪ HTML‬ﺧﻮد اﺿﺎﻓﻪ ﮐﻨﯿﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪٢٨‬‬

‫ﻫﺮ ﺻﻔﺤﻪ از ﺳﺎﯾﺖ از ﻧﻈﺮ ﮔﻮﮔﻞ ارزﺷﯽ دارد و اﮔﺮ از آن ﺻﻔﺤﻪ ﺑﻪ ﺻﻔﺤﺎت دﯾﮕﺮ ﻫﻤﺎن ﺳﺎﯾﺖ ﯾﺎ ﺳﺎﯾﺖﻫﺎي‬ ‫دﯾﮕﺮ ﻟﯿﻨﮏ داده ﺷﻮد‪ ،‬ﺑﺨﺸﯽ از ارزش آن ﺻﻔﺤﻪ از ﻃﺮﯾﻖ ﻟﯿﻨﮏ ﺑﻪ ﺻﻔﺤﻪﻫﺎي دﯾﮕﺮ و ﯾﺎ ﺳﺎﯾﺖﻫﺎي دﯾﮕﺮ اﻧﺘﻘﺎل‬ ‫داده ﻣﯽﺷﻮد‪ .‬اﯾﻦ ارزش در ﺗﻌﯿﯿﻦ ‪ Pagerank‬ﺻﻔﺤﻪ ﺗﺎﺛﯿﺮ ﮔﺬار اﺳﺖ‪.‬‬

‫در اﯾﻨﺠﺎ ﺑﺎ اﺳﺘﻔﺎده از اﯾﻦ ﺑﺮﭼﺴﺐ ﺑﻪ ﺗﻤﺎ ﻣﯽ ﻟﯿﻨﮏ ﻫﺎ ي داﺧﻞ ﺻﻔﺤﻪ‪ nofollow ،‬اﺿﺎﻓﻪ ﺷﺪه اﺳﺖ ‪.‬‬ ‫ﺳﺎﯾﺖ ﺧﻮد را ﺑﻪ ﺷﯿﻮه ﺻﺤﯿﺢ ﺗﺒﻠﯿﻎ ﮐﻨﯿﺪ‬ ‫زﻣﺎﻧﯽ ﮐﻪ ﻣﺮدم از ﻃﺮﯾﻖ ﺟﺴﺘﺠﻮ ﯾﺎ دﯾﮕﺮ راهﻫﺎ ﺳﺎﯾﺖ ﺷﻤﺎ را ﭘﯿﺪا ﮐﻨﻨﺪ و ﺑﻪ آن ﻟﯿﻨﮏ ﺑﺪﻫﻨﺪ‪ ،‬ﻟﯿﻨﮏﻫﺎي‬ ‫داده ﺷﺪه ﺑﻪ ﺳﺎﯾﺖ ﺷﻤﺎ ﺑﻪ ﻣﺮور زﯾﺎد ﻣﯽﺷﻮﻧﺪ و ﮔﻮﮔﻞ ﻣﯽﻓﻬﻤﺪ ﮐﻪ ﺷﻤﺎ ﻣﺎﯾﻠﯿﺪ ﮐﻪ دﯾﮕﺮان را از ﮐﺎرﺗﺎن و زﺣﻤﺘﯽ‬ ‫ﮐﻪ ﺑﺮاي ﻓﺮاﻫﻢ ﮐﺮدن ﻣﻄﻠﺐ ﻣﯽﮐﺸﯿﺪ‪ ،‬ﻣﻄﻠﻊ ﮐﻨﯿﺪ‪ .‬ﺗﺒﻠﯿﻎ ﺑﺮاي ﻣﻄﺎﻟﺐ ﺟﺪﯾﺪ ﺳﺎﯾﺖ ﺑﻪ ﺷﮑﻞ اﺻﻮﻟﯽ‪ ،‬ﻣﻨﺠﺮ ﺑﻪ اﯾﻦ‬ ‫ﺧﻮاﻫﺪ ﺷﺪ ﺗﺎ اﻓﺮادي ﮐﻪ ﺑﻪ دﻧﺒﺎل ﻣﻄﺎﻟﺐ در ﻣﻮرد ﻫﻤﺎن ﻣﻮﺿﻮع ﻣﯽﮔﺮدﻧﺪ‪ ،‬ﺳﺎﯾﺖ ﺷﻤﺎ را ﺳﺮﯾﻌﺘﺮ ﺑﯿﺎﺑﻨﺪ‪ .‬ﻫﻤﺎﻧﻨﺪ‬ ‫اﻏﻠﺐ ﻧﮑﺎﺗﯽ ﮐﻪ در اﯾﻦ ﻓﺼﻞ ﺗﻮﺿﯿﺢ داده ﺷﺪ‪ ،‬اﺳﺘﻔﺎده ﺑﯿﺶ از ﺣﺪ و اﻓﺮاﻃﯽ از اﯾﻦ ﺗﮑﻨﯿﮏﻫﺎ ﻣﯽﺗﻮاﻧﺪ ﻣﻮﻗﻌﯿﺖ و‬ ‫ﻣﺤﺒﻮﺑﯿﺖ ﺳﺎﯾﺖ ﺷﻤﺎ را ﺗﺨﺮﯾﺐ ﮐﻨﺪ‪.‬‬ ‫ﭼﻨﺪ ﻧﮑﺘﮥ ﻣﻔﯿﺪ درﺑﺎرة ﺷﯿﻮهﻫﺎي ﺻﺤﯿﺢ ﺗﺒﻠﯿﻎ ﮐﺮدن ﺳﺎﯾﺖ‬ ‫‪‬‬

‫ﻣﻄﺎﻟﺐ ﺟﺪﯾﺪ ﺑﻨﻮﯾﺴﯿﺪ و ﺳﺮوﯾﺲﻫﺎي ﺟﺪﯾﺪ را در ﭘﺴﺖﻫﺎﯾﺘﺎن ﻣﻌﺮﻓﯽ ﮐﻨﯿﺪ – ﯾﮏ ﭘﺴﺖ وﺑﻼگ در‬ ‫ﺳﺎﯾﺖ ﺷﻤﺎ ﺑﻪ ﮐﺎرﺑﺮان اﻃﻼع ﻣﯽدﻫﺪ ﮐﻪ ﺷﻤﺎ ﺑﺨﺸﯽ ﺟﺪﯾﺪ و ﯾﺎ ﺳﺮوﯾﺲ ﺟﺪﯾﺪ راهاﻧﺪازي ﮐﺮده اﯾﺪ و اﯾﻦ‬ ‫راﻫﯽ ﺑﺴﯿﺎر ﻣﻨﺎﺳﺐ ﺑﺮاي ﺗﺒﻠﯿﻎ ﻣﺤﺘﻮا و ﯾﺎ ﯾﮏ ﺳﺮوﯾﺲ ﺟﺪﯾﺪ اﺳﺖ‪ .‬ﻣﺪﯾﺮان ﺳﺎﯾﺖﻫﺎي دﯾﮕﺮ ﮐﻪ ﻣﻄﺎﻟﺐ‬ ‫ﺳﺎﯾﺖ ﺷﻤﺎ از ﻃﺮﯾﻖ ‪ RSS‬دﻧﺒﺎل ﻣﯽﮐﻨﻨﺪ ﻧﯿﺰ از ﺑﺨﺶﻫﺎي ﺟﺪﯾﺪ ﺳﺎﯾﺖ‪ ،‬ﻣﺤﺘﻮا و ﯾﺎ ﺳﺮوﯾﺲ ﺟﺪﯾﺪ ﺷﻤﺎ‬ ‫ﻣﻄﻠﻊ ﻣﯽﺷﻮﻧﺪ‪.‬‬

‫‪‬‬

‫ﺗﺒﻠﯿﻎ ﺳﻨﺘﯽ را ﻓﺮاﻣﻮش ﻧﮑﻨﯿﺪ – ﺗﺒﻠﯿﻎ ﺳﺎﯾﺖ ﺑﻪ ﺷﮑﻞ ﺳﻨﺘﯽ ﻧﯿﺰ ﻣﯽﺗﻮاﻧﺪ ﻣﺰاﯾﺎﯾﯽ ﺑﺮاي ﺷﻤﺎ ﺑﻪ ﻫﻤﺮاه‬ ‫داﺷﺘﻪ ﺑﺎﺷﺪ‪ .‬ﺑﺮاي ﻣﺜﺎل‪ ،‬اﮔﺮ ﺷﻤﺎ ﯾﮏ ﺳﺎﯾﺖ ﺗﺠﺎري دارﯾﺪ‪ ،‬ﻣﻄﻤﺌﻦ ﺷﻮﯾﺪ ﮐﻪ آدرس ﺳﺎﯾﺘﺘﺎن در ﮐﺎرت‬

‫‪www.ParsBook.org‬‬

‫‪٢٩‬‬

‫وﯾﺰﯾﺘﺘﺎن‪ ،‬ﺳﺮﺑﺮگﻫﺎ و ﭘﻮﺳﺘﺮﻫﺎﯾﺘﺎن ﻧﻮﺷﺘﻪ ﺷﺪه ﺑﺎﺷﺪ‪ .‬ﻫﻤﭽﻨﯿﻦ ﻣﯽﺗﻮاﻧﯿﺪ ﺑﺎ ارﺳﺎل اﻋﻼﻣﯿﻪ از ﻃﺮﯾﻖ‬ ‫ﻧﺎﻣﻪ‪ ،‬ﮐﺎرﺑﺮان ﺳﺎﯾﺖ را از ﻣﻄﺎﻟﺐ ﺟﺪﯾﺪ در ﺳﺎﯾﺖ ﺷﺮﮐﺖ‪ ،‬ﻣﻄﻠﻊ ﮐﻨﯿﺪ‪.‬‬ ‫‪‬‬

‫در ﺳﺎﯾﺖﻫﺎي ﺟﻮاﻣﻊ ﻣﺠﺎزي ﻓﻌﺎﻟﯿﺖ ﮐﻨﯿﺪ – ﺳﺎﯾﺖﻫﺎﯾﯽ ﮐﻪ ﺑﺮ ﭘﺎﯾﻪ ﺗﻌﺎﻣﻼت ﮐﺎرﺑﺮي و ﺑﻪ اﺷﺘﺮاك‬ ‫ﮔﺬاري اﻃﻼﻋﺎت ﺑﻨﺎ ﺷﺪه ﺑﺎﺷﻨﺪ‪ ،‬ﺗﺠﻤﻊ ﮐﺎرﺑﺮانِ ﻋﻼﻗﻪ ﻣﻨﺪ‪ ،‬ﺣﻮل ﻣﻮﺿﻮﻋﯽ ﺧﺎص را ﺗﺴﻬﯿﻞ ﻣﯽﮐﻨﻨﺪ‪.‬‬ ‫ﮐﺎرﻫﺎﯾﯽ ﮐﻪ ﺑﺎﯾﺪ از اﻧﺠﺎﻣﺸﺎن اﺟﺘﻨﺎب ﮐﺮد‪:‬‬ ‫‪ o‬ﺗﻼش در ﺟﻬﺖ ﺗﺒﻠﯿﻎ ﻫﺮ ﻣﻄﻠﺐ ﺟﺪﯾﺪ و ﮐﻮﭼﮏ در ﺷﺒﮑﻪﻫﺎي اﺟﺘﻤﺎﻋﯽِ آﻧﻼﯾﻦ )در ﻋﻮض ﺑﻪ دﻧﺒﺎل‬ ‫ﻣﻄﺎﻟﺐ ﻣﻬﻢ و ﺟﺬاب ﺑﺎﺷﯿﺪ(‬ ‫‪ o‬اﺳﺘﻔﺎده از ﺗﮑﻨﯿﮏﻫﺎﯾﯽ ﮐﻪ ﺑﺎﻋﺚ ﻣﯽﺷﻮد ﮐﻪ ﻣﻄﺎﻟﺐ ﺳﺎﯾﺖ ﺷﻤﺎ ﺑﻪ ﺷﮑﻞ ﻣﺼﻨﻮﻋﯽ در رﺗﺒﻪ اي‬ ‫ﺑﺎﻻ در اﯾﻦ ﺳﺎﯾﺘﻬﺎ ﻗﺮار ﺑﮕﯿﺮد‬

‫‪‬‬

‫ﺗﺠﺎرت ﺧﻮد را ﺑﻪ ﻣﺮﮐﺰ ﺗﺠﺎرتﻫﺎي ﻣﺤﻠﯽِ ﮔﻮﮔﻞ اﺿﺎﻓﻪ ﮐﻨﯿﺪ – اﮔﺮ ﯾﮏ ﺗﺠﺎرت ﻣﺤﻠﯽ را ﻣﺪﯾﺮﯾﺖ ﻣﯽﮐﻨﯿﺪ‬ ‫‪ ،‬اﺿﺎﻓﻪ ﮐﺮدن اﻃﻼﻋﺎت ﺷﺮﮐﺘﺘﺎن ﺑﻪ ﻣﺮﮐﺰ ﺗﺠﺎرتﻫﺎي ﻣﺤﻠﯽِ ﮔﻮﮔﻞ ﺑﻪ ﺷﻤﺎ ﮐﻤﮏ ﻣﯽﮐﻨﺪ ﺗﺎ از ﻃﺮﯾﻖ‬ ‫‪ Google Maps‬و ﺟﺴﺘﺠﻮي ﮔﻮﮔﻞ‪ ،‬ﮐﺎرﺑﺮاﻧﯽ ﺟﺪﯾﺪ را ﺟﺬب ﺳﺎﯾﺖ ﮐﻨﯿﺪ‪ .‬ﻣﺮﮐﺰ راﻫﻨﻤﺎي ‪Webmaster‬‬ ‫ﮔﻮﮔﻞ ﺣﺎوي ﻣﻄﺎﻟﺐ ﺑﯿﺸﺘﺮي در ﻣﻮرد ﺗﺒﻠﯿﻎ ﺗﺠﺎرت ﻣﺤﻠﯽ اﺳﺖ‪.‬‬

‫‪‬‬

‫ﺑﺎ ﮐﺎرﺑﺮان ﻓﻌﺎل‪ ،‬در ﺟﻮاﻣﻊ آﻧﻼﯾﻨﯽ ﮐﻪ ﻣﻮﺿﻮﻋﺸﺎن ﺑﺎ ﻣﻮﺿﻮع ﺳﺎﯾﺖ ﺷﻤﺎ ﻣﺮﺗﺒﻂ اﺳﺖ‪ ،‬ارﺗﺒﺎط‬ ‫ﺑﺮﻗﺮار ﮐﻨﯿﺪ – اﯾﻦ ﺷﺎﻧﺲ وﺟﻮد دارد ﮐﻪ ﺳﺎﯾﺖﻫﺎﯾﯽ ﺑﺎﺷﻨﺪ ﮐﻪ ﻣﺤﺘﻮا و ﻣﻮﺿﻮﻋﯽ ﻣﺸﺎﺑﻪ ﺑﺎ ﺳﺎﯾﺖ ﺷﻤﺎ‬ ‫داﺷﺘﻪ ﺑﺎﺷﻨﺪ‪ .‬ﺑﺮﻗﺮاري ارﺗﺒﺎط ﺑﺎ اﯾﻦ ﺳﺎﯾﺖﻫﺎ‪ ،‬ﻫﻤﯿﺸﻪ ﻣﯽﺗﻮاﻧﺪ ﺑﺮاي ﺳﺎﯾﺖ ﺷﻤﺎ ﺳﻮدﻣﻨﺪ ﺑﺎﺷﺪ‪ .‬ﻣﻄﺎﻟﺐ داغ‬ ‫در ﺑﯿﻦ ﮐﺎرﺑﺮان ﺳﺎﯾﺖ ﺷﻤﺎ ﺑﺎﻋﺚ ﻣﯽﺷﻮد ﮐﻪ اﯾﺪهﻫﺎﯾﯽ ﺟﺪﯾﺪ ﺑﺮاي ﺗﻮﻟﯿﺪ ﻣﺤﺘﻮا و ﯾﺎ ﺳﺎﺧﺖ ﯾﮏ ﻣﺮﺟﻊ‬ ‫ﻣﻨﺎﺳﺐ‪ ،‬ﻓﺮاﻫﻢ ﺷﻮد‪.‬‬ ‫ﮐﺎرﻫﺎﯾﯽ ﮐﻪ ﺑﺎﯾﺪ از اﻧﺠﺎﻣﺸﺎن اﺟﺘﻨﺎب ﮐﻨﯿﺪ‪:‬‬ ‫‪ o‬ارﺳﺎل اﺳﭙﻢ در ﺗﻤﺎﻣﯽ ﺳﺎﯾﺖﻫﺎﯾﯽ ﮐﻪ ﻣﻮﺿﻮع ﻣﺸﺎﺑﻪ ﺑﺎ ﺳﺎﯾﺖ ﺷﻤﺎ دارﻧﺪ‪.‬‬ ‫‪ o‬ﺧﺮﯾﺪ ﻟﯿﻨﮏ از ﺳﺎﯾﺖﻫﺎي دﯾﮕﺮ ﺑﻪ ﻫﺪف ﺑﺎﻻ ﺑﺮدن ‪ PageRank‬ﺑﻪ ﺟﺎي ﺗﻮﺟﻪ ﺑﻪ ﺑﺎﻻ ﺑﺮدن‬ ‫ﺑﺎزدﯾﺪﻫﺎي ﺳﺎﯾﺖ‪.‬‬

‫از ﻣﺰاﯾﺎي ﺳﺮوﯾﺲﻫﺎي ﺗﺠﺰﯾﻪ و ﺗﺤﻠﯿﻞِ وب ﺑﻬﺮه ﺑﺮﯾﺪ‬ ‫‪‬‬

‫اﮔﺮ ﮐﺎوش و ﻓﻬﺮﺳﺖ ﺷﺪن ﺳﺎﯾﺘﺘﺎن را ﺑﺎ اﺳﺘﻔﺎده از اﺑﺰارﻫﺎي ‪ Google Webmaster Tools‬و ﯾﺎ دﯾﮕﺮ‬ ‫اﺑﺰارﻫﺎ‪ ،‬ﺑﻬﺒﻮد ﺑﺨﺸﯿﺪه ﺑﺎﺷﯿﺪ‪ ،‬ﻣﻤﮑﻦ اﺳﺖ ﻣﺸﺘﺎق ﺑﺎﺷﯿﺪ‪ ،‬ﺑﺪاﻧﯿﺪ‪ ،‬ﺗﺮاﻓﯿﮏ ﺳﺎﯾﺘﺘﺎن ﭼﻘﺪر اﻓﺰاﯾﺶ داﺷﺘﻪ‬ ‫اﺳﺖ‪ .‬ﺑﺮﻧﺎﻣﻪﻫﺎي ﺗﺠﺰﯾﻪ و ﺗﺤﻠﯿﻞ ﻣﺎﻧﻨﺪ ‪ Google Analytics‬ﻣﺮﺟﻊ ﻣﻨﺎﺳﺒﯽ ﺑﺮاي ﻧﯿﻞ ﺑﻪ اﯾﻦ ﻫﺪف ﺑﻪ‬ ‫ﺣﺴﺎب ﻣﯽآﯾﺪ‪ .‬ﺷﻤﺎ ﻣﯽﺗﻮاﻧﯿﺪ ﺑﺎ اﺳﺘﻔﺎده از اﯾﻦ اﺑﺰار‪ ،‬دﯾﺪي ﮐﻠﯽ ﻧﺴﺒﺖ ﺑﻪ اﯾﻦ ﻣﻮﺿﻮع ﮐﻪ ﮐﺎرﺑﺮان ﭼﻄﻮر‬ ‫ﺑﻪ ﺳﺎﯾﺖ ﺷﻤﺎ ﻣﯽرﺳﻨﺪ و ﭼﻄﻮر از آن اﺳﺘﻔﺎده ﻣﯽﮐﻨﻨﺪ ﺑﻪ دﺳﺖ ﺑﯿﺎورﯾﺪ‬

‫‪‬‬

‫ﻣﺤﺒﻮب ﺗﺮﯾﻦ ﻣﺤﺘﻮاي ﺳﺎﯾﺖ را ﺑﯿﺎﺑﯿﺪ‬

‫‪www.ParsBook.org‬‬

‫‪٣٠‬‬

‫‪‬‬

‫ﺗﺎﺛﯿﺮ ﺑﻬﯿﻨﻪ ﺳﺎزيﻫﺎﯾﯽ ﮐﻪ ﺑﺮ روي ﺳﺎﯾﺖ اﻋﻤﺎل ﮐﺮدﯾﺪ را اﻧﺪازه ﺑﮕﯿﺮﯾﺪ )ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل آﯾﺎ ﺗﻐﯿﯿﺮ ﺗﯿﺘﺮﻫﺎ و‬ ‫ﻓﺮاﺑﺮﭼﺴﺐﻫﺎي‪ ، description‬ﺗﺮاﻓﯿﮏ ورودي ﺑﻪ ﺳﺎﯾﺖ از ﻃﺮﯾﻖ ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ را اﻓﺰاﯾﺶ داده‬ ‫اﺳﺖ ؟(‪ .‬اﻃﻼﻋﺎت ﮐﻪ ﯾﮏ ﭘﮑﯿﺞ ﺗﺠﺰﯾﻪ و ﺗﺤﻠﯿﻞ اراﺋﻪ ﻣﯽﮐﻨﺪ ﺑﻪ ﻫﻤﺮاه دادهﻫﺎي ﻣﻮﺟﻮد در ﻓﺎﯾﻞ ‪server log‬‬ ‫اﻃﻼﻋﺎت ﺟﺎﻣﻊﺗﺮي را درﺑﺎره ﺷﯿﻮه ﺗﻌﺎﻣﻞ ﮐﺎرﺑﺮان ﺑﺎ ﺻﻔﺤﺎت ﺷﻤﺎ در اﺧﺘﯿﺎر ﮐﺎرﺑﺮان ﺣﺮﻓﻪاي ﻗﺮار‬ ‫ﻣﯽدﻫﺪ )ﻣﺎﻧﻨﺪ ﮐﻠﻤﺎت ﮐﻠﯿﺪي ﺑﯿﺸﺘﺮ ﮐﻪ ﺟﺴﺘﺠﻮﮔﺮان ﻣﻤﮑﻦ اﺳﺖ ﺗﻮﺳﻂ آﻧﻬﺎ ﺳﺎﯾﺖ ﺷﻤﺎ را ﺑﯿﺎﺑﻨﺪ(‪.‬‬

‫در آﺧﺮ‪ ،‬ﮔﻮﮔﻞ اﺑﺰار دﯾﮕﺮي ﺑﺎ ﻧﺎم ‪ Google Website Optimizer‬اراﺋﻪ ﮐﺮده اﺳﺖ ﮐﻪ ﺑﻪ ﺷﻤﺎ اﺟﺎزه ﻣﯽدﻫﺪ ﮐﻪ‬ ‫آزﻣﺎﯾﺸﺎﺗﯽ را ﺑﺮ روي ﺻﻔﺤﺎت ﺧﻮد اﻧﺠﺎم دﻫﯿﺪ و ﺑﻔﻬﻤﯿﺪ ﮐﻪ ﭼﻪ ﺗﻐﯿﯿﺮاﺗﯽ در ﺻﻔﺤﻪ‪ ،‬ﺑﯿﺸﺘﺮﯾﻦ ﻣﯿﺰان ﺗﺎﺛﯿﺮ را ﺑﺮ‬ ‫روي ﮐﺎرﺑﺮاﻧﺘﺎن داد‪ .‬اﺳﺘﻔﺎده از اﯾﻦ اﺑﺰار ﺑﻪ ﻫﻤﺮاه ‪ Google Webmaster Tools ، Google Analytics‬و‬ ‫‪ Google Trifecta‬ﺑﺮاي ﺑﻬﺒﻮد ﺑﺨﺸﯿﺪن وﺿﻌﯿﺖ ﺳﺎﯾﺖ‪ ،‬راﻫﯽ ﻣﻨﺎﺳﺐ ﺑﻪ ﺷﻤﺎر ﻣﯽآﯾﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪٣١‬‬

‫ﻓﺼﻞ دوم‬ ‫راﻫﻨﻤﺎي اﻓﺰاﯾﺶ ﺳﺮﻋﺖ ﺑﺎرﮔﺬاري ﺻﻔﺤﺎت وب‬

‫‪www.ParsBook.org‬‬

‫‪٣٢‬‬

‫ﻣﻘﺪﻣﻪ‪:‬‬ ‫ﺳﺮﻋﺖ ﭘﺎﺳﺦ دﻫﯽ ﺳﺎﯾﺖ ﺑﻪ ﮐﺎرﺑﺮان ﯾﮑﯽ از ﻣﻬﻢﺗﺮﯾﻦ ﻓﺎﮐﺘﻮرﻫﺎ در ﻣﻮﻓﻘﯿﺖ ﯾﮏ ﺳﺎﯾﺖ ﻣﺤﺴﻮب ﻣﯽﺷـﻮد‪.‬‬ ‫اﯾﻦ ﻣﻮرد ﺣﺘﯽ در ﮐﺸﻮرﻫﺎﯾﯽ ﮐﻪ اﯾﻨﺘﺮﻧﺖ ﺑﺴﯿﺎر ﭘﺮﺳﺮﻋﺖ ﻧﯿﺰ در اﺧﺘﯿﺎر ﮐﺎرﺑﺮان ﻗﺮار ﻣﯽدﻫﻨﺪ‪ ،‬اﻫﻤﯿﺖ ﺑﺴﯿﺎر دارد‪.‬‬ ‫اﻟﺒﺘﻪ ﺑﺎ ﺗﻮﺟﻪ ﺑﻪ وﺿﻌﯿﺖ وﯾﮋه ﮐﺸﻮرﻣﺎن‪ ،‬ﺑﻪ ﺧﺎﻃﺮ ﻋﺪم وﺟﻮد زﯾﺮﺳﺎﺧﺖﻫﺎي ﻻزم ﺑﺮاي اراﺋـﻪ ﺳـﺮوﯾﺲ اﯾﻨﺘﺮﻧـﺖ‬ ‫ﭘﺮﺳﺮﻋﺖ ﺑﻪ ﻫﻤﻪ ﮐﺎرﺑﺮان و ﻣﻤﻨﻮﻋﯿﺖ اراﺋﻪ ﺳﺮوﯾﺲﻫﺎﯾﯽ ﺑﺎ ﺳﺮﻋﺖ ﺑﺎﻻﺗﺮ از ‪ 128‬ﮐﯿﻠﻮﺑﯿﺖ ﺑـﺮ ﺛﺎﻧﯿـﻪ ﺑـﻪ ﮐـﺎرﺑﺮان‬ ‫ﺧﺎﻧﮕﯽ‪ ،‬اﻓﺰاﯾﺶ ﺳﺮﻋﺖ ﺑﺎرﮔﺬاري ﺳﺎﯾﺖ ﺑﺮاي ﺳﺎﯾﺖﻫﺎي اﯾﺮاﻧﯽ اﻫﻤﯿﺖ ﺑﺴﯿﺎر ﺑﺎﻻﯾﯽ دارد‪ .‬ﻫﺮ ﭼﻘﺪر ﺻﻔﺤﺎت ﺳﺎﯾﺖ‬ ‫ﺑﺎ ﺳﺮﻋﺖ ﺑﯿﺸﺘﺮي ﺑﺎز ﺷﻮﻧﺪ‪ ،‬ﮐﺎرﺑﺮان رﺿﺎﯾﺖ ﺑﯿﺸﺘﺮي ﺧﻮاﻫﻨﺪ داﺷﺖ و ﺻﻔﺤﺎت در زﻣـﺎن ﮐﻤﺘـﺮي ﺑﺮاﯾﺸـﺎن ﺑـﻪ‬ ‫ﻧﻤﺎﯾﺶ درﺧﻮاﻫﺪ آﻣﺪ‪ .‬از آﻧﺠﺎﺋﯽﮐﻪ ﻫﻤﯿﺸﻪ ﺑﯿﻦ اﻓﺰاﯾﺶ ﺳﺮﻋﺖ ﺳـﺎﯾﺖ و ﺣﺠـﻢ ﺻـﻔﺤﺎت راﺑﻄـﻪ ﻣﺴـﺘﻘﯿﻤﯽ ﺑﺮﻗـﺮار‬ ‫اﺳﺖ‪ ،‬در اﻏﻠﺐ اوﻗﺎت اﻓﺰاﯾﺶ ﺳﺮﻋﺖ ﺑﺎ ﮐﺎﻫﺶ ﺣﺠﻢ ﺻﻔﺤﺎت ﻫﻤﺮاه اﺳﺖ‪ .‬ﮐﻢ ﺷﺪن ﺣﺠﻢ ﺻﻔﺤﺎت ﻓﺸﺎر ﮐﻤﺘﺮي را‬ ‫ﺑﻪ ‪ server‬ﻫﺎ وارد ﻣﯽآورد و ﺳﺎزﻣﺎنﻫﺎ ﻧﯿﺰ ﺑﻬﺎي ﮐﻤﺘﺮي را ﺑﺮاي ﺧﺮﯾﺪ ﭘﻬﻨﺎي ﺑﺎﻧﺪ ﻣﺎﻫﺎﻧﻪ و ارﺗﻘﺎي ﺳﺨﺖ اﻓﺰاري‬ ‫ﺳﯿﺴﺘﻢﻫﺎﯾﺸﺎن ﭘﺮداﺧﺖ ﻣﯽﮐﻨﻨﺪ‪ .‬در ﺣﺎل ﺣﺎﺿﺮ ﺷﺮﮐﺖﻫﺎي ﺑﺰرﮔﯽ ﻣﺎﻧﻨﺪ ﯾﺎﻫﻮ و ﮔﻮﮔﻞ ﻧﯿﺰ‪ ،‬ﺗﯿﻤﯽ در اﺧﺘﯿﺎر دارﻧـﺪ‬ ‫ﮐﻪ وﻇﯿﻔﻪ اﻓﺰاﯾﺶ ﺳﺮﻋﺖ وب ﺳﺎﯾﺖ را ﺑﺮ ﻋﻬﺪه دارﻧﺪ‪ .‬در ﺳﺎل ‪ 2007‬ﮐﺘـﺎﺑﯽ ﺗﺤـﺖ ﻋﻨـﻮان ‪high performance‬‬ ‫‪ website‬ﺗﻮﺳﻂ آﻗﺎي اﺳﺘﯿﻮ ﺳﻮدرز ﻧﻮﺷﺘﻪ ﺷﺪ‪ .‬در آن زﻣﺎن آﻗﺎي ﺳﻮدرز رﻫﺒـﺮي ﺗـﯿﻢ اﻓـﺰاﯾﺶ ﺳـﺮﻋﺖ ﺳـﺎﯾﺖ‬ ‫ﯾﺎﻫﻮ را ﺑﺮ ﻋﻬﺪه داﺷﺖ‪ .‬در ﺳﺎل ‪ 2009‬ﻧﯿﺰ ﮐﺘﺎب دﯾﮕﺮي ﺗﺤﺖ ﻧﺎم ‪ even faster websites‬ﺗﻮﺳﻂ ﻫﻤﯿﻦ ﺷﺨﺺ و‬ ‫ﺑﺮﺧﯽ دﯾﮕﺮ از اﻓﺮاد ﺻﺎﺣﺐ ﻧﻈﺮ ﺗﻬﯿﻪ و ﭼﺎپ ﺷﺪ‪ .‬اﯾﻦ ﻓﺼﻞ ﺣﺎوي ﭼﮑﯿﺪه اي از ﻫﺮ دو ﮐﺘﺎب اﺳﺖ‪.‬‬

‫ﻃﺒﻖ ﺗﺤﻘﯿﻘﺎﺗﯽ ﮐﻪ اﻧﺠﺎم ﺷﺪه اﺳﺖ‪ ،‬ﺗﻨﻬﺎ ‪ 10‬ﺗـﺎ ‪ 20‬درﺻـﺪ از زﻣـﺎن ﺑﺎرﮔـﺬاري ﺻـﻔﺤﺎت وب ﻣﺮﺑـﻮط ﺑـﻪ‬ ‫‪ backend‬اﺳﺖ‪ .‬اﻏﻠﺐ ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﺎن زﻣﺎن ﺑﺴﯿﺎر زﯾﺎدي را ﺟﻬﺖ اﻓﺰاﯾﺶ ﺳﺮﻋﺖ و ﻣـﻨﻈﻢ ﮐـﺮدن ﮐـﺪﻫﺎي ﺑﺮﻧﺎﻣـﻪ‬ ‫ﺧﻮد و ﯾﺎ ﺣﺘﯽ ﻣﺪﯾﺮﯾﺖ دﯾﺘﺎﺑﯿﺲ و ﺣﺎﻓﻈﻪ ﻣﯽﮐﻨﻨﺪ وﻟﯽ در ﻋﻤﻞ ﻣﺸﺨﺺ ﺷﺪه اﺳﺖ ﮐﻪ ‪ 80‬ﺗﺎ ‪ 90‬درﺻﺪ زﻣﺎن ‪load‬‬ ‫ﺷﺪن ﯾﮏ ﺻﻔﺤﻪ ﻣﺮﺑﻮط ﺑﻪ ﺑﺨﺶ ‪ end user‬اﺳﺖ‪ .‬ﺗﻨﻬـﺎ ﺑـﺎ ﺑﻬﯿﻨـﻪ ﮐـﺮدن اﯾﻨﺘـﺮﻓﯿﺲ ﻣـﯽﺗـﻮان ﺳـﺮﻋﺖ ﺑﺎرﮔـﺬاري‬ ‫ﺻﻔﺤﺎت وب را ﺑﻪ ﻣﯿﺰان زﯾﺎدي ارﺗﻘﺎ ﺑﺨﺸﯿﺪ‪.‬‬ ‫اﮔﺮ ﻧﻤﻮدار ﺑﺎرﮔﺬاري ﺻﻔﺤﻪ اول ﺳﺎﯾﺖ ﯾﺎﻫﻮ را ﺑﺒﯿﻨﯿﻢ‪ ،‬ﺑﺎ ﻧﻤﻮداري اﯾﻦﭼﻨﯿﻨﯽ ﻣﻮاﺟﻪ ﺧﻮاﻫﯿﻢ ﺷﺪ‪:‬‬

‫‪www.ParsBook.org‬‬

‫‪٣٣‬‬

‫ﻫﻤﺎنﻃﻮر ﮐﻪ در ﺗﺼﻮﯾﺮ ﻣﺸﺨﺺ ﺷﺪه‪ ،‬ﺗﻨﻬﺎ ‪ 12‬درﺻﺪ از ﮐﻞ زﻣﺎن ﺑﺎرﮔﺬاري ﯾﮏ ﺻﻔﺤﻪ ﻣﺮﺑﻮط ﺑﻪ درﯾﺎﻓﺖ ﻓﺎﯾﻞ‬ ‫‪ HTML‬از ‪ Server‬اﺳﺖ و ﺑﻘﯿﻪ زﻣﺎن‪ ،‬ﺻﺮف داﻧﻠﻮد اﺟﺰاي داﺧﻞ ﺻﻔﺤﻪ وب ﺷﺪه اﺳﺖ‪.‬‬ ‫ﺣﺎل اﮔﺮ ﻫﻤﯿﻦ ﺻﻔﺤﻪ را ‪ Refresh‬ﮐﻨﯿﻢ ﺑﺎ ﺗﺼﻮﯾﺮي اﯾﻨﭽﻨﯿﻦ ﻣﻮاﺟﻪ ﻣﯽﺷﻮﯾﻢ‪.‬‬

‫در اﯾﻦ ﺗﺼﻮﯾﺮ ﻧﯿﺰ ﻣﺸﺨﺺ ﺷﺪه ﮐﻪ ﺗﻨﻬﺎ ‪ 12‬درﺻﺪ ﮐﻞ زﻣﺎن ﺻـﺮف درﯾﺎﻓـﺖ ﻓﺎﯾـﻞ ‪ HTML‬ﺷـﺪه اﺳـﺖ‪.‬‬ ‫اﻟﺒﺘﻪ ﯾﮏ ﻓﺎﺻﻠﻪ زﯾﺎد ﺑﯿﻦ درﯾﺎﻓﺖ ﻓﺎﯾﻞ ‪ HTML‬و درﯾﺎﻓﺖ دﯾﮕﺮ ﻓﺎﯾﻞﻫﺎ دﯾﺪه ﻣـﯽﺷـﻮد‪ .‬اﯾـﻦ ﻓﺎﺻـﻠﻪ در اﺻـﻞ ﻫﻤـﺎن‬ ‫زﻣﺎﻧﯽ اﺳﺖ ﮐﻪ ﻣﺮورﮔﺮ ﺻﺮف ﭘﺮدازش ﻓﺎﯾﻞ ‪ HTML‬ﮐﺮده اﺳﺖ‪.‬‬ ‫ﻫﻤﺎﻧﻄﻮر ﮐﻪ در ﺗﺼﻮﯾﺮ ﻫﻢ ﻣﺸﺨﺺ ﺷﺪه اﺳﺖ‪ ،‬ﺗﻨﻬﺎ زﻣﺎن اﻧﺪﮐﯽ از ﺑﺎرﮔﺬاري ﺻﻔﺤﻪ ﻣﺮﺑﻮط ﺑـﻪ‬ ‫درﯾﺎف ﻓﺎﯾﻞ ‪ HTML‬اﺳﺖ و ﺑﺨﺶ اﻋﻈﻢ زﻣﺎن ﺑﺎرﮔﺬاري ﺑﻪ درﯾﺎﻓﺖ ﻓﺎﯾﻞﻫﺎي دﯾﮕﺮ ﻣﺮﺑﻮط ﻣﯽﺷﻮد‪ .‬اﮔﺮ ﻣﺎ‬ ‫زﻣﺎن درﯾﺎﻓﺖ ﻓﺎﯾﻞ ‪ HTML‬را ﺑﺎ وﯾﺮاﯾﺶ ﺳﺎﺧﺘﺎر ﮐﺪ ﻧﻮﯾﺴﯽ و ارﺗﻘﺎي ‪ server‬ﻫﺎ ﺑﻪ ﻧﺼﻒ ﮐﺎﻫﺶ دﻫـﯿﻢ‪،‬‬ ‫ﮐﺎرﺑﺮ ﺗﻨﻬﺎ ﯾﮏ ﺑﻬﺒﻮد ‪ 5‬ﺗﺎ ‪ 10‬درﺻﺪي در زﻣﺎن ﺑﺎرﮔﺬاري را اﺣﺴﺎس ﺧﻮاﻫﺪ ﮐﺮد ﮐﻪ ﻋﻤـﻼً ﺑﺴـﯿﺎر ﻧـﺎﭼﯿﺰ‬

‫‪www.ParsBook.org‬‬

‫‪٣۴‬‬

‫ﺑﻮده و ﻣﻤﮑﻦ اﺳﺖ اﺻﻼً ﺑـﻪ ﭼﺸـﻢ ﻧﯿﺎﯾـﺪ‪ .‬اﻣـﺎ اﮔـﺮ ﺳـﺮﻋﺖ ﺑﺨـﺶ ‪ Frontend‬را دو ﺑﺮاﺑـﺮ ﮐﻨـﯿﻢ‪ ،‬زﻣـﺎن‬ ‫ﺑﺎرﮔﺬاري ﺳﺎﯾﺖ ﺑﯿﻦ ‪ 40‬ﺗﺎ ‪ 45‬درﺻﺪ ﺑﻬﺒﻮد ﺧﻮاﻫﺪ ﯾﺎﻓﺖ ﮐﻪ اﯾﻦ ﻣﯿﺰان ﮐﺎﻣﻼً ﺑـﺮاي ﮐـﺎرﺑﺮ ﻣﺸـﻬﻮد اﺳـﺖ‪.‬‬ ‫ﻣﻮرد دﯾﮕﺮ اﯾﻨﮑﻪ ﺑﻬﯿﻨﻪﺳﺎزي ‪ Backend‬ﻫﻤﻮاره ﮐﺎري زﻣﺎنﺑﺮ و ﭘـﺮﻫﺰﯾﻨـﻪ ﺑـﻮده و ﺑـﻪ ﺑـﺎز ﻧﻮﯾﺴـﯽ ﮐـﻞ‬ ‫ﺳﯿﺴﺘﻢ و ﺗﻐﯿﯿﺮ ﻣﻌﻤﺎري ﻧﺮماﻓﺰار ﻣﻨﺠﺮ ﻣﯽﺷﻮد در ﺣﺎﻟﯽ ﮐﻪ ﺑﻬﯿﻨﻪ ﮐﺮدن ‪ Frontend‬اﻏﻠﺐ ﮐﻢ ﻫﺰﯾﻨﻪ ﺗﺮ و‬ ‫ﭘﯿﺎده ﺳﺎزي آن ﺳﺮﯾﻊ ﺗﺮ و راﺣﺖ ﺗﺮ اﻧﺠﺎم ﻣﯽﭘﺬﯾﺮد‪.‬‬ ‫ﺗﻮﺿﯿﺤﺎﺗﯽ ﮐﻠﯽ در ﻣﻮرد اﻓﺰاﯾﺶ ﺳﺮﻋﺖ ﺑﺎرﮔﺬاري ﺻﻔﺤﺎت‬ ‫ﻣﺪﯾﺮان ﭘﺮوژه و ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﺎن در ﻫﻨﮕﺎم ﻃﺮاﺣـﯽ ﯾـﮏ ﺳﯿﺴـﺘﻢ‪ ،‬در زﻣـﺎنﻫـﺎي ﺧـﺎص ﺑﺎﯾـﺪ ﺗﺼـﻤﯿﻤﺎت‬ ‫ﻣﺘﻌﺪدي ﺑﮕﯿﺮﻧﺪ ﮐﻪ اﯾﻦ ﺗﺼﻤﯿﻤﺎت ﺑﺮ روي ﻧﺘﯿﺠﻪ ﻧﻬﺎﯾﯽ ﺗﺎﺛﯿﺮ ﻣﺴﺘﻘﯿﻢ دارد‪ .‬ﻫﺪف ﻫﻤﯿﺸﻪ ﻧﺰدﯾـﮏ ﺷـﺪن ﺑـﻪ ﮐﻤـﺎل و‬ ‫ﮐﺎﻫﺶ ﻧﮑﺎت ﻣﻨﻔﯽ ﺳﯿﺴﺘﻢ اﺳﺖ‪ .‬اﮔﺮ ﭘﺮوژه را ﯾﮏ ﻣﺜﻠﺚ در ﻧﻈـﺮ ﺑﮕﯿﺮﯾـﺪ‪ .‬ﺳـﻪ راس اﯾـﻦ ﻣﺜﻠـﺖ‪ ،‬ﺳـﺮﻋﺖ‪ ،‬ﮐﯿﻔﯿـﺖ و‬ ‫ارزاﻧﯽ اﺳﺖ ﮐﻪ در آن واﺣﺪ ﺗﻨﻬﺎ دو ﻣﻮرد از اﯾﻦ ﺳﻪ ﻣﻮرد را ﻣﯽﺗﻮان اﻧﺘﺨﺎب ﮐﺮد‪ .‬ﻫﻤﯿﺸﻪ زﻣﺎن ﮐﻢ ﺑﺎﻋـﺚ ﮐـﺎﻫﺶ‬ ‫ﮐﯿﻔﯿﺖ ﮐﺪﻧﻮﯾﺴﯽ ﻣﯽﺷﻮد‪ .‬ﺑﺮاي ﭘﯿﺎده ﺳﺎزي ﺗﮑﻨﯿﮏﻫﺎي اﻓﺰاﯾﺶ ﺳﺮﻋﺖ ﻧﯿﺰ ﺑﺎﯾﺪ ﻫﻤﯿﻦ ﻣﻮارد را در ﻧﻈﺮ داﺷﺖ‪ .‬ﮔﺎﻫﺎً‬ ‫ﭘﯿﺎدهﺳﺎزي ﻫﻤﻪ اﯾﻦ ﺗﮑﻨﯿﮏﻫﺎ اﻣﮑﺎن ﭘﺬﯾﺮ ﻧﯿﺴﺖ و ﯾﺎ ﭘﯿﺎده ﺳﺎزي ﺑﺮﺧﯽ از آنﻫﺎ ﺗﻨﻬـﺎ اﻧـﺪﮐﯽ ﺑـﻪ وﺿـﻌﯿﺖ ﺳـﺮﻋﺖ‬ ‫ﺳﺎﯾﺖ ﮐﻤﮏ ﻣﯽﮐﻨﺪ وﻟﯽ از ﻧﻈﺮ ﻫﺰﯾﻨﻪ‪ ،‬ﺗﻮﺟﯿﻪ اﻗﺘﺼﺎدي ﻧﺪارد‪ .‬ﻫﻤﯿﺸﻪ ﺑﺎﯾﺪ ﺑﻪ دﻧﺒﺎل ﺑﺨﺶﻫﺎﯾﯽ از ﮐﺎر ﺑﺎﺷﯿﺪ ﮐـﻪ ﺑـﺎ‬ ‫ﮐﻢﺗﺮﯾﻦ ﻫﺰﯾﻨﻪ‪ ،‬ﺑﻬﺘﺮﯾﻦ ﻧﺘﯿﺠﻪ را درﯾﺎﻓﺖ ﮐﻨﯿﺪ‪.‬‬ ‫ﺣﺎل ﻣﯽﭘﺮدازﯾﻢ ﺑﻪ ‪ 11‬ﺗﮑﻨﯿﮏ ﻣﺮﺑﻮط ﺑﻪ اﻓﺰاﯾﺶ ﺳﺮﻋﺖ ﺑﺎرﮔﺬاري ﺻﻔﺤﺎت‪.‬‬

‫‪ -1‬ﮐﺎﻫﺶ درﺧﻮاﺳﺖﻫﺎي ‪HTTP‬‬ ‫ﻧﺨﺴـﺖ ﺑﺒﯿﻨـﯿﻢ ﮐـﻪ ﯾـﮏ درﺧﻮاﺳـﺖ ‪ HTTP‬ﭼﯿﺴـﺖ ؟‬ ‫‪ HTTP‬ﭘﺮوﺗﮑﻠﯽ اﺳﺖ ﮐﻪ از ﻃﺮﯾﻖ آن ﻣﺮورﮔﺮ ﺷﻤﺎ ﺑﺎ ‪ Server‬ﺗﻌﺎﻣﻞ ﻣﯽﮐﻨﺪ‪ .‬ﻣﺴﺘﻨﺪات ‪ HTTP‬ﺗﻮﺳـﻂ ﮐﻨﺴﺮﺳـﯿﻮم‬ ‫ﺟﻬﺎﻧﯽ وب ﺗﺪوﯾﻦ ﺷﺪه اﺳﺖ‪ .‬ﻣﺮورﮔﺮ ﺷﻤﺎ ﯾﮏ درﺧﻮاﺳﺖ ‪ HTTP‬را ﺑـﺮاي درﯾﺎﻓـﺖ ﯾـﮏ ‪ URL‬ﺧـﺎص ﺑـﻪ ‪Server‬‬ ‫ارﺳﺎل ﻣﯽﮐﻨﺪ و ‪ Server‬ﻧﯿﺰ ﺑﻪ اﯾﻦ درﺧﻮاﺳﺖ ﭘﺎﺳﺦ ﻣﯽدﻫﺪ‪ .‬درﺧﻮاﺳﺖﻫﺎ‪ ،‬اﻧـﻮاع ﻣﺨﺘﻠـﻒ دارﻧـﺪ ﮐـﻪ ﻋﺒﺎرﺗﻨـﺪ از‪:‬‬ ‫‪ GET, POST, HEAD, PUT, DELETE, OPTION, TRACE‬ﮐﻪ در اﯾﻦ ﻣﯿﺎن ﻣﺘﺪاول ﺗﺮﯾﻦ ﺷﯿﻮه ارﺳﺎل درﺧﻮاﺳـﺖ‬ ‫اﺳﺘﻔﺎده از دﺳﺘﻮر ‪ GET‬اﺳﺖ‪ .‬در اداﻣﻪ ﻧﻤﻮﻧﻪاي از ارﺳﺎل ﯾﮏ درﺧﻮاﺳﺖ ‪ HTTP‬و ﭘﺎﺳﺦ آن را ﻣﯽﺑﯿﻨﯿﺪ‪:‬‬

‫‪www.ParsBook.org‬‬

‫‪٣۵‬‬

‫ﯾﮏ درﺧﻮاﺳﺖ ‪ http‬از ﯾﮏ آدرس ‪ URL‬ﺗﺸﮑﯿﻞ ﺷﺪه اﺳﺖ ﮐﻪ ﺑﻪ ﻫﻤﺮاه آن ‪ header‬ﻫﺎ ﻗﺮار ﻣﯽﮔﯿﺮﻧﺪ‪ .‬در ﺗﺼـﻮﯾﺮ‬ ‫ﻗﺒﻞ ﻓﺎﯾﻞ ‪ yahoo_2.0.0-b2.js‬ﺗﻮﺳﻂ ﻣﺮورﮔﺮ درﺧﻮاﺳﺖ ﺷﺪه اﺳﺖ‪.‬‬ ‫ﻫﻤﯿﺸﻪ درﯾﺎﻓﺖ ﯾﮏ ﻓﺎﯾﻞ از ﻃﺮﯾﻖ درﺧﻮاﺳﺖ ‪ http‬اﻧﺪﮐﯽ زﻣﺎن ﻻزم دارد‪ .‬ﻫﺮ ﭼﻘﺪر ﺗﻌﺪاد درﺧﻮاﺳﺖﻫﺎي‬ ‫ﺷﻤﺎ ﺑﯿﺶﺗﺮ ﺑﺎﺷﺪ اﯾﻦ زﻣﺎنﻫﺎي اﻧﺪﮐﯽ ﮐﻪ ﺻﺮف ارﺳﺎل درﺧﻮاﺳﺖ ﺑﻪ ‪ Server‬و درﯾﺎﻓﺖ ﺟﻮاب ﻣﯽﺷﻮد‪ ،‬اﻧﺒﺎﺷـﺘﻪ‬ ‫ﺷﺪه و ﺳﺮﻋﺖ ﺻﻔﺤﺎت را ﺑﻪ ﻃﺮز ﻗﺎﺑﻞ ﻣﻼﺣﻈﻪاي ﮐﺎﻫﺶ ﻣﯽدﻫﺪ‪ .‬ﺗﻘﺮﯾﺒﺎ ‪ 80‬ﺗﺎ ‪ 90‬درﺻﺪ از زﻣﺎن ‪ Load‬ﺻﻔﺤﻪ ﺑﻪ‬ ‫درﯾﺎﻓﺖ ﻓﺎﯾﻞﻫﺎي داﺧﻞ ﺳﻨﺪ ‪ HTML‬اﺧﺘﺼﺎص داده ﻣﯽﺷﻮد‪ .‬ﺑﻨﺎﺑﺮاﯾﻦ ﺗﻨﻬﺎ ﺑﺎ ﮐﺎﻫﺶ ‪ http request‬ﻫـﺎ ﻣـﯽﺗـﻮاﻧﯿﻢ‬ ‫زﻣﺎن ﺑﺎرﮔﺬاري ﺻﻔﺤﺎت را ﺑﻪ ﻃﻮر ﭼﺸﻤﮕﯿﺮي اﻓﺰاﯾﺶ دﻫﯿﻢ‪ .‬اﻟﺒﺘﻪ ﮐﺎﻫﺶ ﺗﻌﺪاد درﺧﻮاﺳﺖﻫﺎ‪ ،‬ﺗﻨﺶﻫـﺎﯾﯽ را اﯾﺠـﺎد‬ ‫ﻣﯽﮐﻨﺪ و اﯾﻦ ﺗﺼﻮر ﺑﻪ وﺟﻮد ﻣﯽآﯾﺪ ﮐﻪ ﺑﺎ ﮐﺎﻫﺶ درﺧﻮاﺳﺖﻫﺎ‪ ،‬ﻇﺎﻫﺮ ﺳﺎﯾﺖ ﺑﯿﺶ از ﺣﺪ ﺳﺎده ﺷﺪه و زﯾﺒﺎﯾﯽ ﺧـﻮد‬ ‫را از دﺳﺖ ﻣﯽدﻫﺪ‪ .‬در اﯾﻦﺟﺎ ﺗﮑﻨﯿﮏﻫﺎﯾﯽ را ﺑﺮرﺳﯽ ﻣﯽﮐﻨﯿﻢ ﮐﻪ ﺑﺎ اﺳﺘﻔﺎده از آﻧﻬﺎ ﻣﯽﺗـﻮاﻧﯿﻢ ﻫـﻢ درﺧﻮاﺳـﺖﻫـﺎ را‬ ‫ﮐﺎﻫﺶ دﻫﯿﻢ و ﻫﻢ زﯾﺒﺎﯾﯽ ﺑﺼﺮي ﻃﺮح را ﺣﻔﻆ ﮐﻨﯿﻢ‪.‬‬

‫‪ 1 -1‬اﺳﺘﻔﺎده از ‪ image map‬ﻫﺎ‬ ‫ﮔﺎﻫﺎً ﺑﺨﺶ ‪ navigation‬ﺳﺎﯾﺖ ﺧﻮد را ﺑﺎ اﺳﺘﻔﺎده از ﺗﺼﺎوﯾﺮ اﯾﺠﺎد ﮐﺮده اﯾﺪ‪ .‬ﺑﻬﺘﺮ اﺳﺖ ﺑﻪ ﺟـﺎي اﯾﻨﮑـﻪ ﺑـﺮاي ﻫـﺮ‬ ‫ﻟﯿﻨﮏ از ﯾﮏ ﺗﺼﻮﯾﺮ اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪ ،‬از ‪ image map‬اﺳﺘﻔﺎده ﮐﻨﯿﺪ و ﯾﮏ ﺗﺼﻮﯾﺮ را ﺑﻪ ﻣﻨﺎﻃﻖ ﻣﺨﺘﻠﻒ ﺗﻘﺴﯿﻢ ﮐﻨﯿـﺪ‪ .‬از‬ ‫اﯾﻦ ﻃﺮﯾﻖ ﻣﯽﺗﻮاﻧﯿﺪ در ﺗﻌﺪاد درﺧﻮاﺳﺖﻫﺎي ‪ HTTP‬ﺻﺮﻓﻪ ﺟﻮﯾﯽ ﮐﻨﯿﺪ‪ .‬در اداﻣﻪ ﺗﺼﻮﯾﺮ ﯾﮏ ﺑﺨﺶ ‪ navigation‬را‬ ‫ﻣﯽﺑﯿﻨﯿﺪ ﮐﻪ ﺑﺎ ﺗﺼﻮﯾﺮ اﯾﺠﺎد ﺷﺪه اﺳﺖ‪.‬‬

‫ﺣﺎل اﮔﺮ ﻫﻤﯿﻦ ﺑﺨﺶ را ﺑﺎ اﺳﺘﻔﺎده از ‪ image map‬ﺑﺎز ﻧﻮﯾﺴﯽ ﮐﻨﯿﻢ‪ ،‬ﮐﺪي اﯾﻨﮕﻮﻧﻪ ﺧﻮاﻫﯿﻢ داﺷﺖ‪:‬‬ ‫>"‪<img usemap="#map1" border=0 src="/images/imagemap.gif‬‬ ‫>"‪<map name="map1‬‬

‫‪www.ParsBook.org‬‬

‫‪٣۶‬‬

‫>"‪<area shape="rect" coords="0,0,31,31" href="home.html" title="Home‬‬ ‫>"‪<area shape="rect" coords="36,0,66,31" href="gifts.html" title="Gifts‬‬ ‫>"‪<area shape="rect" coords="71,0,101,31" href="cart.html" title="Cart‬‬ ‫>"‪<area shape="rect" coords="106,0,136,31" href="settings.html" title="Settings‬‬ ‫>"‪<area shape="rect" coords="141,0,171,31" href="help.html" title="Help‬‬ ‫>‪</map‬‬ ‫اﻟﺒﺘﻪ ﻧﻮﺷﺘﻦ ﮐﺪ ﺑﺮاي ‪ image map‬ﮐﺎري ﺳﺨﺖ و ﺧﺴﺘﻪﮐﻨﻨﺪه اﺳﺖ وﻟﯽ ﺑﺎ اﺳﺘﻔﺎده از ﺑﺮﻧﺎﻣﻪﻫﺎﯾﯽ ﻣﺎﻧﻨﺪ‬ ‫‪ Dreamweaver‬ﺑﻪ راﺣﺘﯽ و در زﻣﺎﻧﯽ اﻧﺪﮐﯽ ﻣﯽﺗﻮاﻧﯿﺪ اﯾﻦﮐﺎر را اﻧﺠﺎم دﻫﯿﺪ‪.‬‬

‫‪ 1 -2‬اﺳﺘﻔﺎده از ‪ CSS Sprite‬ﻫﺎ‬ ‫در اﯾﻦ ﺗﮑﻨﯿﮏ ﺷﻤﺎ ﺗﺼﺎوﯾﺮ ﻣﺘﻌﺪد را در درون ﯾﮏ ﺗﺼﻮﯾﺮ ﻗﺮار ﻣﯽدﻫﯿﺪ و ﺳﭙﺲ ﺑﺎ اﺳـﺘﻔﺎده از ‪ CSS‬اﯾـﻦ‬ ‫ﺗﺼﺎوﯾﺮ را در ﭘﺲزﻣﯿﻨﻪ ﺗﮓﻫﺎي ﻣﻮرد ﻧﻈﺮﺗﺎن در ﻃﺮح ﻗﺮار ﻣﯽدﻫﯿﺪ‪ .‬ﺑﻪ ﻋﻨـﻮان ﻣﺜـﺎل اﮔـﺮ ‪ 10‬ﺗﺼـﻮﯾﺮ را در ﯾـﮏ‬ ‫ﺗﺼﻮﯾﺮ ﺑﮕﻨﺠﺎﻧﯿﺪ‪ 9 ،‬درﺧﻮاﺳﺖ ‪ HTTP‬ﺻﺮﻓﻪ ﺟﻮﯾﯽ داﺷﺘﻪ اﯾﺪ و از اﯾﻦ ﻃﺮﯾﻖ ﻣﯽﺗﻮاﻧﯿﺪ ﺳﺮﻋﺖ ﺑﺎز ﺷﺪن ﺻﻔﺤﻪ را‬ ‫ﺑﻪ ﻃﺮز ﭼﺸﻤﮕﯿﺮي اﻓﺰاﯾﺶ دﻫﯿﺪ‪ .‬ﺑﻪ اﯾﻦ ﺗﺼﻮﯾﺮ دﻗﺖ ﮐﻨﯿﺪ‪:‬‬

‫در اﯾﻦ ﺟﺎ ﺗﻌﺪاد زﯾﺎدي آﯾﮑﻮن در درون ﯾﮏ ﺗﺼﻮﯾﺮ ﻗﺮار ﮔﺮﻓﺘﻪ اﺳﺖ‪ .‬در اﯾﻦ ﺗﮑﻨﯿﮏ ﻣـﺎ ﻣـﯽﺗـﻮاﻧﯿﻢ ﺗﺼـﺎوﯾﺮ را ﺑـﺎ‬ ‫اﺳﺘﻔﺎده از ‪ CSS‬و دﺳﺘﻮر ‪ background-position‬در ﭘﺲزﻣﯿﻨﻪ ﺗﮓﻫﺎﯾﯽ ﻫﻤﭽﻮن ‪ div‬و ﯾﺎ ‪ span‬ﻗـﺮار دﻫـﯿﻢ‪ .‬در‬ ‫ﺗﺼﻮﯾﺮ ﺑﺎﻻ ﯾﮑﯽ از آﯾﮑﻮنﻫﺎ ﮐﻪ ﮐﻠﻤﻪ ‪ my‬در آن ﻧﻮﺷﺘﻪ ﺷﺪه اﺳﺖ‪ ،‬ﻣﺸﺨﺺ ﺷﺪه و ﻣﺨﺘﺼﺎت آن ﻧﯿـﺰ در ﺗﺼـﻮﯾﺮ‬ ‫ﻧﻮﺷﺘﻪ ﺷﺪه اﺳﺖ‪ .‬اﮔﺮ ﺑﺨﻮاﻫﯿﻢ ﻫﻤﯿﻦ ﺗﺼﻮﯾﺮ را در ﭘﺲزﻣﯿﻨﻪ ﯾﮏ ‪ div‬ﻗﺮار دﻫﯿﻢ ﺑﺎﯾﺪ اﯾﻦ ﮐﺪ را ﺑﻨﻮﯾﺴﯿﻢ‪:‬‬ ‫;)'‪<div style="background-image: url('a_lot_of_sprites.gif‬‬ ‫;‪background-position: -260px -90px‬‬

‫‪www.ParsBook.org‬‬

‫‪٣٧‬‬

‫>";‪width: 26px; height: 24px‬‬ ‫>‪</div‬‬ ‫اﺳﺘﻔﺎده از ‪ CSS Sprite‬ﻫﺎ ﻧﻪ ﺗﻨﻬﺎ ﺗﻌﺪاد درﺧﻮاﺳﺖﻫﺎي ‪ http‬را ﮐﺎﻫﺶ ﻣﯽدﻫﺪ ﺑﻠﮑﻪ ﺣﺠﻢ ﺗﺼﺎوﯾﺮ را ﻧﯿـﺰ‬ ‫ﮐﺎﻫﺶ ﻣﯽدﻫﺪ‪ .‬ﺑﺮﺧﯽ ﻓﮑﺮ ﻣﯽ ﮐﻨﻨﺪ ﮐﻪ ﺑﺎ ﮔﻨﺠﺎﻧﺪن ﭼﻨﺪ ﺗﺼﻮﯾﺮ در ﯾﮏ ﺗﺼﻮﯾﺮ‪ ،‬ﺣﺠﻢ ﻧﻬﺎﯾﯽ از ﻣﺠﻤﻮع ﺣﺠﻢ ﻓﺎﯾﻞﻫﺎي‬ ‫ﮐﻮﭼﮏ ﺑﯿﺸﺘﺮ ﻣﯽﺷﻮد وﻟﯽ اﯾﻦ ﺗﺼﻮر اﺷﺘﺒﺎه ﻫﺴﺖ‪ .‬ﻫﺮ ﺗﺼﻮﯾﺮ ﺑﻪ ﺗﻨﻬﺎﯾﯽ ﺣﺎوي ﺑﺮﺧـﯽ اﻃﻼﻋـﺎت اﺳـﺖ ﻫﻤﭽـﻮن‬ ‫اﻃﻼﻋﺎت ﻓﺮﻣﺖ و ﺟﺪول رﻧﮓﻫﺎ ﺳﺖ ﮐﻪ اﮔﺮ ﺗﺼﺎوﯾﺮ ﺑﺎ ﻫﻢ ﻣﺨﻠﻮط ﺷﻮﻧﺪ دﯾﮕـﺮ ﺗﻨﻬـﺎ ﯾـﮏ ﺟـﺪول رﻧـﮓ و اﻃﻼﻋـﺎت‬ ‫ﻓﺮﻣﺖ وﺟﻮد ﺧﻮاﻫﺪ داﺷﺖ و ﺣﺠﻢ ﯾﮏ ﻓﺎﯾﻞ ﮐﻠﯽ ﻧﺴﺒﺖ ﺑﻪ ﺣﺠﻢ ﻣﺠﻤﻮع ﻓﺎﯾﻞﻫﺎي ﮐﻮﭼﮏ‪ ،‬ﮐﻤﺘﺮ ﻣﯽﺷﻮد‪.‬‬

‫‪ 1 -3‬ﻣﺨﻠﻮط ﮐﺮدن ﻓﺎﯾﻞﻫﺎي ‪ JavaScript‬و ‪CSS‬‬ ‫اﺳﺘﻔﺎده از ﮐﺪﻫﺎي ﺟﺎوا اﺳﮑﺮﯾﭙﺖ و ‪ CSS‬ﺑﻪ ﺷﮑﻞ ‪ inline‬ﻫﻤﯿﺸﻪ ﺑﻬﺘﺮﯾﻦ ﺳﺮﻋﺖ را در اﺧﺘﯿﺎر ﺷـﻤﺎ ﻗـﺮار ﻣـﯽدﻫـﺪ‬ ‫وﻟﯽ اﺳﺘﻔﺎده از اﯾﻦ ﺷﯿﻮه ﮐﺪﻧﻮﯾﺴﯽ ﺑﻪ ﻫﯿﭻ ﻋﻨﻮان ﭘﯿﺸﻨﻬﺎد ﻧﻤﯽ ﺷﻮد زﯾﺮا ﺣﺠﻢ ﺻـﻔﺤﻪ را اﻓـﺰاﯾﺶ داده و ﮐـﺪﻫﺎي‬ ‫ﺷﻤﺎ ﻧﯿﺰ در ‪ cache‬ﻣﺮورﮔﺮ ﻗﺮار ﻧﻤﯽﮔﯿﺮد‪ .‬ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﺎن و ﻃﺮاﺣـﺎن ﺣﺮﻓـﻪ اي ﺑـﻪ ﺷـﻤﺎ ﭘﯿﺸـﻨﻬﺎد ﻣـﯽﮐﻨﻨـﺪ ﮐـﻪ‬ ‫ﻓﺎﯾﻞﻫﺎي ‪ CSS‬و ‪ JS‬ﺧﻮد را در ﻓﺎﯾﻞﻫﺎ ﯾﯽ ﺟﺪاﮔﺎﻧﻪ ﻗﺮار دﻫﯿﺪ و ﺑﻪ ﺻﻔﺤﻪ ﺧﻮد ﻟﯿﻨﮏ ﮐﻨﯿﺪ‪ .‬اﻟﺒﺘﻪ ﺑﺎ ﻣﺎژوﻻر ﮐﺮدن اﯾﻦ‬ ‫ﻓﺎﯾﻞﻫﺎ و ﺟﺪا ﮐﺮدن ﻓﺎﯾﻞ ‪ CSS‬و ‪ JS‬ﻫﺮ ﺑﺨﺶ‪ ،‬ﺗﻌﺪاد ﻓﺎﯾﻞﻫﺎ اﻓﺰاﯾﺶ ﻣﯽﯾﺎﺑﺪ و در ﻧﺘﯿﺠﻪ درﺧﻮاﺳﺖﻫـﺎي ‪ HTTP‬ﻧﯿـﺰ‬ ‫اﻓﺰاﯾﺶ ﺧﻮاﻫﯿﺪ ﯾﺎﻓﺖ‪ ،‬در ﻧﺘﯿﺠﻪ ﺻﻔﺤﻪ ﺷﻤﺎ ﮐﻨﺪﺗﺮ ﺧﻮاﻫﺪ ﺷﺪ‪ .‬ﺷﻤﺎ ﻣﯽﺗﻮاﻧﯿﺪ ﺗﻤﺎﻣﯽﻓﺎﯾﻞﻫﺎي ‪ CSS‬ﺧﻮد را در داﺧﻞ‬ ‫ﯾﮏ ﻓﺎﯾﻞ ﮔﺮدآوري ﮐﻨﯿﺪ وﻫﻤﯿﻦ ﮐﺎر را ﻧﯿﺰ ﺑﺮاي دﺳﺘﻮرات ‪ JavaScript‬ﺧﻮد اﻧﺠﺎم دﻫﯿﺪ‪ .‬از اﯾـﻦ ﻃﺮﯾـﻖ ﻣـﯽﺗﻮاﻧﯿـﺪ‬ ‫درﺧﻮاﺳﺖﻫﺎي ‪ HTTP‬را ﮐﺎﻫﺶ دﻫﯿﺪ‪ .‬اﻟﺒﺘﻪ ﻣﯽﺗﻮاﻧﯿﺪ ﻓﺎﯾﻞﻫﺎ ي ﺧﻮد را ﺟﺪا از ﻫـﻢ ﻧﮕـﻪ دارﯾـﺪ وﻟـﯽ ﺑـﺎ اﺳـﺘﻔﺎده از‬ ‫زﺑﺎنﻫﺎي ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ ‪ server side‬در ﻟﺤﻈﻪ ارﺳﺎل ﺻﻔﺤﻪ ﺑﺮاي ﮐﺎرﺑﺮ‪ ،‬ﻫﻤﻪ ﻓﺎﯾﻞﻫﺎ را ﺑـﺎ ﻫـﻢ ادﻏـﺎم ﮐﻨﯿـﺪ‪ .‬در‬ ‫ﺣﺎل ﺣﺎﺿﺮ ﺳﯿﺴﺘﻢﻫﺎي ﻣﺪﯾﺮﯾﺖ ﻣﺤﺘﻮا ﻣﺎﻧﻨﺪ ‪ Drupal‬ﻗﺎدر ﺑﻪ اﻧﺠﺎم اﯾﻦ ﮐﺎر اﺳﺖ‪.‬‬ ‫! ﻫﺮ ﭼﻘﺪر ﺗﻌﺪاد درﺧﻮاﺳﺖﻫﺎي ‪ HTTP‬ﮐﺎﻫﺶ ﯾﺎﺑﺪ‪ ،‬ﺻﻔﺤﻪ ﺑﻪ ﻫﻤﺎن ﻧﺴﺒﺖ ﺑﺎ ﺳﺮﻋﺖ ﺑﺎﻻﺗﺮي ﺑﺎز ﺧﻮاﻫﺪ ﺷﺪ‪.‬‬

‫‪ -2‬اﺳﺘﻔﺎده از ‪ Content Delivery Network‬ﻫﺎ‬ ‫دﺳﺘﺮﺳﯽ ﮐﺎرﺑﺮان ﺑﻪ اﯾﻨﺘﺮﻧﺖ ﺑﺎ ﺳﺮﻋﺖ ﺑﺎﻻ ﻣﺪام در ﺣﺎل ﺑﻬﺘﺮ ﺷﺪن اﺳـﺖ‪ ،‬اﻣـﺎ ﻫﻤﯿﺸـﻪ ﻓﺎﺻـﻠﻪ ﺷـﻤﺎ ﺑـﺎ وب‬ ‫ﺳﺮوري ﮐﻪ اﻏﻠﺐ ﺳﺮورﻫﺎﯾﺸﺎن را در ﯾﮏ ﻣﺤﻞ ﻗﺮار ﻣﯽدﻫﻨﺪ زﯾﺎد اﺳﺖ‪ ،‬وﻟﯽ ﺑﺎ اﻓﺰاﯾﺶ ﺑﺎزدﯾﺪ ﺳﺎﯾﺖ اﯾﻦ ﺷﺮﮐﺖﻫﺎ‬ ‫ﺑﻪ اﯾﻦ ﻧﺘﯿﺠﻪ ﺧﻮاﻫﻨﺪ رﺳﯿﺪ ﮐﻪ ‪ Server‬ﻫﺎﯾﺸﺎن دﯾﮕﺮ ﺟـﻮابﮔـﻮ ﻧﯿﺴـﺘﻨﺪ و ﺑﻬﺘـﺮ اﺳـﺖ ﮐـﻪ ‪ Server‬ﻫـﺎ در ﻣﻨـﺎﻃﻖ‬ ‫ﺟﻐﺮاﻓﯿﺎﯾﯽ ﮔﻮﻧﺎﮔﻮن‪ ،‬ﭘﺮاﮐﻨﺪه ﺷﻮﻧﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪٣٨‬‬

‫ﺑﺮاي درك ﺑﻬﺘﺮ اﯾﻦ ﺗﮑﻨﯿﮏ ﺑﺎﯾﺪ ﺑﻪ ﻣﻮرد ﻗﺒﻞ ﺑﺎز ﮔـﺮدﯾﻢ‪ .‬ﺑـﺎ ﻫـﺮ درﺧﻮاﺳـﺖ ‪ ، HTTP‬اﯾـﻦ درﺧﻮاﺳـﺖ ﺑـﻪ ‪Server‬‬ ‫ارﺳﺎل ﻣﯽﺷﻮد و ﻣﺮورﮔﺮ ﺷﻤﺎ ﺑﺎﯾﺪ ﻣﻨﺘﻈﺮ ﭘﺎﺳﺦ ﺑﻤﺎﻧﺪ‪ .‬ﻫﺮ ﭼﻘﺪر ﻓﺎﺻﻠﻪ ﺷﻤﺎ ﺑﺎ ﻣﺤﻠﯽ ﮐﻪ ‪ Server‬در آن واﻗﻊ ﺷﺪه‬ ‫اﺳﺖ ﺑﯿﺸﺘﺮ ﺑﺎﺷﺪ‪ ،‬زﻣﺎن ﺑﯿﺸﺘﺮي ﺟﻬﺖ درﯾﺎﻓﺖ ﭘﺎﺳﺦ ﺻﺮف ﻣﯽﺷﻮد وﻟﯽ اﮔﺮ ﻓﺎﺻﻠﻪ ﺷـﻤﺎ ﺑـﺎ ‪ Server‬ﮐـﻢ ﺑﺎﺷـﺪ‪،‬‬ ‫ﭘﺎﺳﺦ را ﺳﺮﯾﻊﺗﺮ درﯾﺎﻓﺖ ﻣﯽﮐﻨﯿﺪ‪ .‬ﺑﺎ اﺳﺘﻔﺎده از ‪ CDN‬ﻣﯽﺗﻮاﻧﯿﺪ ﻓﺎﯾﻞﻫـﺎ را در ﺳﺮاﺳـﺮ دﻧﯿـﺎ ﺑـﺮ روي ﺳـﺮورﻫﺎي‬ ‫ﻣﺨﺘﻠﻒ ﭘﺮاﮐﻨﺪه ﮐﻨﯿﺪ و زﻣﺎﻧﯽ ﮐﻪ ﮐﺎرﺑﺮ ﻓﺎﯾﻠﯽ را ﮐﻪ ﻣﺮﺑﻮط ﺑﻪ ﺳﺎﯾﺖ ﺷﻤﺎﺳﺖ‪ ،‬درﺧﻮاﺳﺖ ﮐﻨﺪ‪ ،‬ﻓﺎﯾـﻞ ﻣـﻮرد ﻧﻈـﺮ از‬ ‫ﻧﺰدﯾﮏ ﺗﺮﯾﻦ ‪ Server‬ﺑﺮاي ﮐﺎرﺑﺮ ارﺳﺎل ﻣﯽﺷﻮد و در ﻧﺘﯿﺠﻪ ﻓﺎﯾﻞ ﺑﺎ ﺗﺎﺧﯿﺮ ﮐﻤﺘﺮي در اﺧﺘﯿﺎر ﮐﺎرﺑﺮ ﻗﺮار ﻣﯽﮔﯿﺮد‪.‬‬ ‫ﺑﺎز ﻧﻮﯾﺴﯽ ﺳﯿﺴﺘﻢ ﺑﺮاي ﭘﺨﺶ ﮐﺮدن دادهﻫﺎي ﺑﯿﻦ ‪ Server‬ﻫﺎي ﻣﺨﺘﻠـﻒ اﻏﻠـﺐ ﺑﺴـﯿﺎر ﺳـﺨﺖ و ﭘﯿﭽﯿـﺪه‬ ‫اﺳﺖ‪ .‬ﺑﻬﺘﺮ اﺳﺖ ﺑﻪ ﺟﺎي ﭘﺨﺶ ﮐﺮدن دادهﻫﺎي دﯾﺘﺎﺑﯿﺲ ﺑﯿﻦ ‪ Server‬ﻫﺎي ﻣﺨﺘﻠﻒ ﺗﻨﻬﺎ دادهﻫﺎي اﺳﺘﺎﺗﯿﮏ و ﺗﺼﺎوﯾﺮ‬ ‫را ﺑﯿﻦ ‪ Server‬ﻫﺎ ﺗﻘﺴﯿﻢ ﮐﻨﯿﺪ ﮐﻪ اﯾﻨﮑﺎر ﺑﺎ اﺳﺘﻔﺎده از ‪ CDN‬ﻫﺎ ﺑﺴﯿﺎر آﺳﺎن ﻣﯽﺷﻮد‪.‬‬ ‫ﺑﺴﯿﺎري از ﺳﺎﯾﺖﻫﺎي ﺑـﺰرگ‪ ،‬ﺳـﺮورﻫـﺎي ‪ CDN‬ﺧـﻮد را دارﻧـﺪ وﻟـﯽ از ﻧﻈـﺮ اﻗﺘﺼـﺎدي ﺑـﻪ ﺻـﺮﻓﻪ اﺳـﺖ ﮐـﻪ از‬ ‫ﺳﺮوﯾﺲﻫﺎي ‪ CDN‬اي ﮐﻪ ﺗﻮﺳﻂ ﺷﺮﮐﺖﻫﺎي ﻓﻌﺎل در اﯾﻦ زﻣﯿﻨﻪ اراﺋـﻪ ﻣـﯽﺷـﻮد‪ ،‬اﺳـﺘﻔﺎده ﮐﻨﯿـﺪ‪ .‬در ﺣـﺎل ﺣﺎﺿـﺮ‬ ‫ﺑﺮﺗﺮﯾﻦ ﺳـﺮوﯾﺲ دﻫﻨـﺪه ‪ CDN‬در دﻧﯿـﺎ ﺷـﺮﮐﺖ ‪ Akamai‬اﺳـﺖ و ﺷـﺮﮐﺖﻫـﺎي ‪ Mirror Image, Limelight‬و‬ ‫‪ SAVVIS‬ﺷﺮﮐﺖﻫﺎي ﻣﻌﺘﺒﺮ ﺑﻌﺪي ﻫﺴﺘﻨﺪ‪ .‬اﮔﺮ ﺑﻪ ﻟﯿﺴﺖ ﺳﺎﯾﺖﻫﺎي ﭘﺮﺑﺎزدﯾﺪ دﻧﯿﺎ ﻫـﻢ ﻧﮕـﺎﻫﯽ ﺑﯿﻨـﺪازﯾﻢ‪ ،‬ﺑﺴـﯿﺎري از‬ ‫آﻧﻬﺎ از ‪ CDN‬ﺷﺮﮐﺖﻫﺎي ﻧﺎم ﺑﺮده اﺳﺘﻔﺎده ﻣﯽﮐﻨﻨﺪ‪:‬‬

‫‪ CDN‬ﻫﺎ ﻣﺰاﯾﺎي دﯾﮕﺮي ﻧﯿﺰ دارﻧﺪ از ﺟﻤﻠﻪ اﯾﻦﮐﻪ از دادهﻫﺎي ﺷﻤﺎ ﭘﺸﺘﯿﺒﺎن ﺗﻬﯿﻪ ﻣـﯽﺷـﻮد‪ ،‬ﺑﺮﺧـﯽ دادهﻫـﺎ ﺑـﺮ‬ ‫روي ﺳﺮورﻫﺎي ‪ CDN‬درون ‪ Cache‬ﻗﺮار ﻣﯽ ﮔﯿﺮﻧﺪ و ﻫﻤﭽﻨﯿﻦ ﻓﻀﺎي ﺑﺴﯿﺎر زﯾﺎدي ﻧﯿﺰ ﺑﺮ روي اﯾﻦ ﺳﺮورﻫـﺎي‬ ‫در اﺧﺘﯿﺎر ﺷﻤﺎ ﻗﺮار ﻣﯽﮔﯿﺮد‪ .‬ﻣﻮرد ﻣﻬﻢ دﯾﮕﺮ اﯾﻦ اﺳﺖ ﮐـﻪ در زﻣـﺎن اوج ﺑﺎزدﯾـﺪ ﺳـﺎﯾﺖ‪ ،‬در ﺻـﻮرت اﺳـﺘﻔﺎده از‬ ‫‪ ، CDN‬ﻓﺸﺎر از روي ‪ Server‬اﺻﻠﯽ ﺑﺮداﺷﺘﻪ ﻣﯽﺷﻮد و ﺑﺨﺸﯽ از ﺑﺎر ﺑﻪ دوش ﺳـﺮورﻫـﺎي ‪ CDN‬ﻣـﯽاﻓﺘـﺪ‪ .‬اﻟﺒﺘـﻪ‬ ‫اﺳﺘﻔﺎده از ‪ CDN‬ﻣﯽ ﺗﻮاﻧﺪ ﻧﮑﺎﺗﯽ ﻣﻨﻔﯽ ﻫﻢ داﺷﺘﻪ ﺑﺎﺷﺪ از ﺟﻤﻠﻪ اﯾﻨﮑﻪ زﻣﺎن اراﺋﻪ ﻓﺎﯾﻞ ﺑﻪ ﮐﺎرﺑﺮ ﺗﻮﺳـﻂ ﺳـﺮورﻫـﺎي‬ ‫‪ CDN‬ﻧﯿﺰ ﻣﯽﺗﻮاﻧﺪ ﺗﺤﺖ ﺗﺎﺛﯿﺮ ﺑﺎزدﯾﺪﻫﺎي دﯾﮕﺮ ﺳﺎﯾﺖﻫﺎ ﺑﺎﺷﺪ‪ .‬از آﻧﺠﺎﺋﯽﮐﻪ ﺳﺮورﻫﺎي ‪ CDN‬ﻓﺎﯾﻞﻫـﺎي ﻣﺮﺑـﻮط ﺑـﻪ‬

‫‪www.ParsBook.org‬‬

‫‪٣٩‬‬

‫ﺳﺎﯾﺖﻫﺎي ﻣﺨﺘﻠﻒ را ﺑﺮ روي ﺧﻮد ذﺧﯿﺮه ﻣﯽﮐﻨﻨﺪ‪ ،‬اﮔﺮ ﺑﺎزدﯾﺪﻫﺎي ﺳﺎﯾﺖ دﯾﮕﺮ ﺑﻪ ﺷﺪت ﺑﺎﻻ رود و ﺑﻪ ﺳﺮور ‪CDN‬‬ ‫ﻓﺸﺎر آورد‪ ،‬ﺳﺮﻋﺖ اراﺋﻪ ﻓﺎﯾﻞﻫﺎي ﻣﺮﺑﻮط ﺑﻪ ﺳﺎﯾﺖ ﺷﻤﺎ ﻧﯿﺰ ﺗﺤﺖ ﺗﺎﺛﯿﺮ ﻗﺮار ﻣﯽﮔﯿﺮد‪ .‬ﻣﻮرد دﯾﮕـﺮ ﻧﯿـﺰ اﯾـﻦ ﻣـﻮرد‬ ‫اﺳﺖ ﮐﻪ ﺷﻤﺎ دﯾﮕﺮ ﺑﻪ ﺷﮑﻞ ﻣﺴﺘﻘﯿﻢ ﺑﺮ روي اراﺋﻪ ﻓﺎﯾﻞ از ﻃﺮﯾﻖ ‪ CDN‬ﮐﻨﺘﺮل ﻧﺪارﯾﺪ و ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل اﮔﺮ ﺑﺨﻮاﻫﯿـﺪ‬ ‫‪ http header‬ﻣﺮﺑﻮط ﺑﻪ ﻓﺎﯾﻞﻫﺎي ﺧﻮد ﺑﺮ روي ‪ CDN‬را ﺗﻐﯿﯿﺮ دﻫﯿﺪ ﺑﺎﯾﺪ اﯾﻦ ﮐﺎر را از ﺗﻨﻈﯿﻤﺎت ﻣﺮﺑﻮط ﺑﻪ ﺳـﺮور‬ ‫‪ CDN‬ﺧﻮد اﻧﺠﺎم دﻫﯿﺪ‪.‬‬ ‫اراﺋﻪ ﻓﺎﯾﻞﻫﺎي داﯾﻨﺎﻣﯿﮏ از ﻃﺮﯾﻖ ‪ CDN‬ﻫﺎ ﺑﺴﯿﺎر ﭘﯿﭽﯿﺪه و ﻣﺸﮑﻞ اﺳﺖ و ﺑﻪ ﻫﻤـﯿﻦ ﺧـﺎﻃﺮ از ‪ CDN‬ﻫـﺎ ﺗﻨﻬـﺎ ﺑـﺮاي‬ ‫اراﺋﻪ ﻓﺎﯾﻞﻫﺎي اﺳﺘﺎﺗﯿﮏ‪ ،‬ﺗﺼﺎوﯾﺮ و ﻓﺎﯾﻞﻫﺎي ‪ CSS‬و ﺟﺎوا اﺳﮑﺮﯾﭙﺖ اﺳﺘﻔﺎده ﻣﯽﺷﻮد‪.‬‬ ‫! اﺳﺘﻔﺎده از ‪ CDN‬ﻫﺎ ﻣﯽ ﺗﻮاﻧﺪ ﺑﻪ ﻣﯿﺰان ﻗﺎﺑﻞ ﺗﻮﺟﻬﯽ ﺑﺮ روي ﺳﺮﻋﺖ ﺑﺎز ﺷﺪن ﺻﻔﺤﺎت ﺳﺎﯾﺖ ﺷﻤﺎ ﺗﺎﺛﯿﺮ ﻣﺜﺒﺖ‬ ‫داﺷﺘﻪ ﺑﺎﺷﺪ‪.‬‬ ‫‪ -3‬اﺿﺎﻓﻪ ﮐﺮدن ‪expire header‬‬ ‫در اﯾﻦ ﺑﺨﺶ ﺗﻮﺿﯿﺢ ﻣﯽدﻫﯿﻢ ﮐﻪ ﭼﻄﻮر ﺑﺎ اﺳﺘﻔﺎده از ‪ expire header‬ﻫﺎ از ﻧﻬﺎﯾﺖ ﻗﺎﺑﻠﯿﺖ ‪ Caching‬در ﻣﺮورﮔـﺮ‬ ‫ﮐﺎرﺑﺮان‪ ،‬اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪.‬‬ ‫اﻣﺮوزه ﺻﻔﺤﺎت وب اﺟﺰاي ﺑﺴﯿﺎر زﯾﺎدي دارﻧﺪ و ﺗﻌـﺪاد اﺟـﺰاي اﯾـﻦ ﺻـﻔﺤﺎت وب روز ﺑـﻪ روز ﺑﯿﺸـﺘﺮ‬ ‫ﻣﯽﺷﻮد‪ .‬ﺑﺎ اﺳﺘﻔﺎده از ‪ expire header‬ﻫﺎ ﻣﯽﺗﻮاﻧﯿﺪ ﻗﺎﺑﻠﯿﺖ ‪ Cache‬ﺷﺪن را ﺑﻪ اﯾﻦ اﺟﺰا اﺿﺎﻓﻪ ﮐﻨﯿﺪ‪ .‬از اﯾﻦ ﻃﺮﯾـﻖ‬ ‫از درﺧﻮاﺳﺖﻫﺎي ‪ http‬در ﻣﺮاﺟﻌﺎت ﺑﻌﺪي ﮐﺎرﺑﺮ ﺑﻪ ﺻﻔﺤﻪ ﺟﻠﻮﮔﯿﺮي ﻣـﯽﺷـﻮد‪ .‬از ‪ expire header‬اﻏﻠـﺐ ﺑـﺮاي‬ ‫ﺗﺼﺎوﯾﺮ اﺳﺘﻔﺎده ﻣﯽﺷﻮد وﻟﯽ درﺳﺖ اﯾﻦ اﺳﺖ ﮐﻪ آن را ﺑﻪ ﺗﻤـﺎﻣﯽﺗﺼـﺎوﯾﺮ‪ ،‬ﻓﺎﯾـﻞﻫـﺎي ‪ CSS‬و ‪ JS‬و ‪ flash‬اﺿـﺎﻓﻪ‬ ‫ﮐﻨﯿﺪ‪.‬‬ ‫در ﺣﺎل ﺣﺎﺿﺮ ﺗﻤﺎﻣﯽ ﻣﺮورﮔﺮﻫﺎي ﺟﺪﯾﺪ ﺑﺨﺸﯽ ﺑﻪ ﻧﺎم ﻣﺨﺰن ﯾـﺎ ﻫﻤـﺎن ‪ Cache‬دارﻧـﺪ‪ .‬زﻣـﺎﻧﯽ ﮐـﻪ ﺷـﻤﺎ‬ ‫ﺻﻔﺤﻪاي را ﺑﺎز ﻣﯽﮐﻨﯿﺪ ﺑﺮاي ﻫﺮ ﯾﮏ از اﺟﺰاي داﺧﻞ ﺻﻔﺤﻪ ﯾﮏ درﺧﻮاﺳﺖ ‪ HTTP‬ارﺳﺎل ﻣﯽﺷـﻮد و ﻓﺎﯾـﻞ ﻣـﻮرد‬ ‫ﻧﻈﺮ ﺑﻌﺪ از درﯾﺎﻓﺖ درون ‪ Cache‬ﻗﺮار ﻣﯽﮔﯿﺮد‪ .‬در ﻣﺮاﺟﻌﺎت ﺑﻌﺪي ﻣﺮورﮔﺮ ﻣﺘﻮﺟﻪ ﻣﯽﺷﻮد ﮐﻪ ﺑﺮﺧﯽ از ﻓﺎﯾﻞﻫﺎﯾﯽ‬ ‫ﮐﻪ در ﺻﻔﺤﻪ وﺟﻮد دارد را درون ‪ Cache‬در اﺧﺘﯿﺎر دارد‪ .‬در اﯾﻦ ﺣﺎﻟﺖ دﯾﮕﺮ ﻓﺎﯾﻞ را دوﺑﺎره داﻧﻠﻮد ﻧﻤـﯽﮐﻨـﺪ و از‬ ‫ﻫﻤﺎن ﻓﺎﯾﻞ درون ‪ Cache‬ﺑﻬﺮه ﻣﯽﺑﺮد‪ .‬اﻟﺒﺘﻪ ﺑﺮاي اﯾﻨﮑﻪ اﻃﻤﯿﻨﺎن ﺣﺎﺻﻞ ﮐﻨﺪ ﮐﻪ ﻓﺎﯾﻞ ﺗﻐﯿﯿـﺮ ﻧﮑـﺮده اﺳـﺖ‪ ،‬از ﺳـﺮور‬ ‫ﺳﻮال ﻣﯽﭘﺮﺳﺪ ‪ » :‬ﻣﻦ ﻓﺎﯾﻠﯽ را درون ‪ Cache‬دارم ﮐﻪ ﻫﻢ ﻧﺎم ﻓﺎﯾﻞ روي ﺳﺮور اﺳﺖ و ﺣﺠﻢ ﻓﺎﯾﻞ آن ﻧﯿـﺰ ﯾﮑﺴـﺎن‬ ‫اﺳﺖ‪ ،‬آﯾﺎ اﯾﻦ ﻓﺎﯾﻞ ﻫﻤﺎن ﻓﺎﯾﻞ روي ﺳﺮور اﺳﺖ و ﯾﺎ ﻓﺎﯾﻞ دﯾﮕﺮي اﺳﺖ ؟ « ﺑﻪ اﯾـﻦ درﺧﻮاﺳـﺖﻫـﺎي ‪Conditional‬‬ ‫‪ HTTP Request‬ﻣﯽﮔﻮﯾﻨﺪ‪ .‬ﺑﺎ اﺳﺘﻔﺎده از ‪ expire header‬ﻫﺎ در اﺻﻞ ﺳﺮور ﺑﺮاي ﺗﻤﺎﻣﯽ ﻓﺎﯾﻞﻫـﺎي ﺗﻌﯿـﯿﻦ ﺷـﺪه‬

‫‪www.ParsBook.org‬‬

‫‪۴٠‬‬

‫ﺗﻮﺳﻂ ﺷﻤﺎ ﺗﺎرﯾﺦ اﻧﻘﻀﺎ ﻣﺸﺨﺺ ﻣﯽﮐﻨﺪ و ﻣﺮورﮔﺮ ﺷﻤﺎ دﯾﮕﺮ ﺑـﻪ ﺳـﺮور ‪ conditional HTTP request‬ارﺳـﺎل‬ ‫ﻧﺨﻮاﻫﺪ ﮐﺮد‪ .‬در اﯾﻦ ﺣﺎﻟﺖ ﺳﺮﻋﺖ ﺑﺎز ﺷﺪن ﺻﻔﺤﺎت ﺷﻤﺎ اﻓﺰاﯾﺶ ﺧﻮاﻫﺪ ﯾﺎﻓﺖ‪.‬‬ ‫اﻟﺒﺘﻪ دﻗﺖ داﺷﺘﻪ ﺑﺎﺷﯿﺪ ﮐﻪ ﺗﻌﯿﯿﻦ ‪ expire header‬ﻫﺎ در ﺑﺎرﮔﺬاري ﺻﻔﺤﻪ ﺑﺮاي ﺑﺎر اول ﻫﯿﭻ ﺗﺎﺛﯿﺮي ﻧـﺪارد و ﺗﻨﻬـﺎ‬ ‫در ﻣﺮاﺟﻌﺎت ﺑﻌﺪي ﮐﺎرﺑﺮ ﺑﻪ ﺳﺎﯾﺖ اﺳﺖ ﮐﻪ اﯾﻦ ﺑﺨﺶ‪ ،‬ﺑﻪ ﺑﺎرﮔﺬاري ﺳﺮﯾﻊ ﺻﻔﺤﺎت ﮐﻤﮏ ﻣﯽﮐﻨﺪ‪.‬‬

‫‪Expire Header‬‬ ‫‪ Expire header‬ﻫﺎ ﺑﻪ ﻣﺮورﮔﺮ اﻃﻼع ﻣﯽدﻫﻨﺪ ﮐﻪ ﻓﺎﯾﻞ ﻣﻮرد ﻧﻈﺮ ﺗﺎ ﭼﻪ ﺗﺎرﯾﺨﯽ اﻋﺘﺒﺎر دارد و ﻣﺮورﮔـﺮ ﻣـﯽﺗﻮاﻧـﺪ‬ ‫ﺑﺪون ﺳﻮال ﮐﺮدن از ‪ Server‬از ﻫﻤﺎن ﻓﺎﯾﻞ اﺳﺘﻔﺎده ﮐﻨﺪ‪ .‬ﺷﯿﻮه ﻧﻤﺎﯾﺶ اﯾﻦ ﺑﺨﺶ ﻫﻢ ﺑﻪ ﺷﮑﻞ ﺗﺎرﯾﺦ و ﺳﺎﻋﺖ اﺳـﺖ‬ ‫ﮐﻪ ﭘﺲ از اﯾﻦ ﺗﺎرﯾﺦ و ﺳﺎﻋﺖ‪ ،‬ﻓﺎﯾﻞ دﯾﮕﺮ ﻣﻌﺘﺒﺮ ﻧﯿﺴﺖ و ﻣﺮورﮔﺮ ﺑﺎﯾﺪ ﻓﺎﯾﻞ ﺟﺪﯾﺪ را درﺧﻮاﺳﺖ ﮐﻨـﺪ‪ .‬ﺑـﻪ اﯾـﻦ ﻣﺜـﺎل‬ ‫دﻗﺖ ﮐﻨﯿﺪ‪:‬‬

‫ﻓﺮض ﮐﻨﯿﺪ ﮐﻪ اﮐﻨﻮن در ﺳﺎل ‪ 2008‬ﻫﺴﺘﯿﻢ‪ .‬اﯾﻦ ‪ expire header‬ﺑﻪ ﻣﺮورﮔﺮ ﻣﯽﮔﻮﯾﺪ ﮐﻪ ﻓﺎﯾﻞ ﻣﻮرد ﻧﻈﺮ ﺗﺎ ﺗـﺎرﯾﺦ‬ ‫‪ 15‬آورﯾﻞ ‪ 2010‬ﻣﻌﺘﺒﺮ اﺳﺖ‪ .‬در اﯾﻦ ﺣﺎﻟﺖ ﺑﻌﺪ از ﻣﺮاﺟﻌﻪ اول ﻣﺮورﮔﺮ ﺑﻪ اﯾﻦ ﺻﻔﺤﻪ‪ ،‬ﺗﺎ اﯾﻦ ﺗﺎرﯾﺦ‪ ،‬ﻣﺮورﮔﺮ در ﻫﺮ‬ ‫ﺑﺎر ﻣﺮاﺟﻌﻪ از ﻫﻤﺎن ﻓﺎﯾﻠﯽ اﺳﺘﻔﺎده ﻣﯽﮐﻨﺪ ﮐﻪ ﺑﺎر اول داﻧﻠﻮد ﮐﺮده و در ‪ Cache‬ﺧﻮد ﺣﻔﻆ ﮐﺮده اﺳﺖ‪.‬‬

‫‪ Max-Age‬و ‪Mod_expire‬‬ ‫از آﻧﺠﺎﺋﯽﮐﻪ در ‪ expire header‬از ﯾﮏ ﺗﺎرﯾﺦ ﻣﺸﺨﺺ اﺳﺘﻔﺎده ﻣﯽﺷﻮد‪ ،‬اﯾـﻦ ﻣـﻮرد ﻣﺤـﺪودﯾﺖﻫـﺎﯾﯽ را‬ ‫اﯾﺠﺎد ﻣﯽﮐﻨﺪ از ﺟﻤﻠﻪ اﯾﻦﮐﻪ ﺑﯿﻦ ‪ Server‬و ‪ Client‬ﺑﺎﯾﺪ ﺗﺎرﯾﺦ و ﺳﺎﻋﺖﻫﺎ ﻫـﻢ زﻣـﺎن ﺑﺎﺷـﻨﺪ و ﻋـﻼوه ﺑـﺮ آن ﺑﺎﯾـﺪ‬ ‫ﻫﻤﯿﺸﻪ اﯾﻦ ﺗﺎرﯾﺦ را ﮐﻨﺘﺮل ﮐﺮد و اﮔﺮ ﺗﺎرﯾﺦ رو ﺑﻪ اﺗﻤﺎم اﺳﺖ‪ ،‬ﺗﺎرﯾﺦ ﺟﺪﯾﺪﺗﺮي را در ﺗﻨﻈﯿﻤﺎت ‪ Server‬وارد ﮐـﺮد‪.‬‬ ‫ﺑﺮاي ﺣﻞ اﯾﻦ ﻣﺤﺪودﯾﺖﻫﺎي ‪ Cache-control header‬در ‪ HTTP/1.1‬اراﺋﻪ ﺷﺪ‪.‬‬ ‫‪ Cache-control‬از دﺳﺘﻮر ‪ Max-Age‬اﺳﺘﻔﺎده ﻣﯽﮐﻨﺪ‪ .‬ﺑﺎ اﺳﺘﻔﺎده از اﯾﻦ دﺳﺘﻮر ﻣﯽﺗﻮان ﻣﺪت زﻣﺎن اﻋﺘﺒﺎر ﻓﺎﯾـﻞ‬ ‫را در ﻗﺎﻟﺐ ﺛﺎﻧﯿﻪ ﻣﺸﺨﺺ ﮐﺮد‪ .‬اﮔﺮ ﻣﺮورﮔﺮ دوﺑﺎره ﺑﻪ ﺻﻔﺤﻪاي ﮐﻪ ﻗﺒﻼً ﺑﺎز ﮐﺮده اﺳﺖ‪ ،‬ﺑﺎز ﮔﺮدد و ﻣﺪت زﻣﺎﻧﯽ ﮐﻪ‬ ‫ﺑﻪ ﺷﮑﻞ ﺛﺎﻧﯿﻪ در ‪ Max-Age‬ﻃﯽ ﻧﺸﺪه ﺑﺎﺷﺪ‪ ،‬ﻣﺮورﮔﺮ از ﻓﺎﯾﻞﻫﺎي داﺧﻞ ‪ cache‬ﺧﻮد اﺳﺘﻔﺎده ﺧﻮاﻫﺪ ﮐﺮد‪ .‬ﺑـﻪ اﯾـﻦ‬ ‫ﻣﺜﺎل دﻗﺖ ﮐﻨﯿﺪ‪:‬‬

‫‪www.ParsBook.org‬‬

‫‪۴١‬‬

‫در اﯾﻦ ﻣﺜﺎل ﺑﺮاي ﺟﻠﻮﮔﯿﺮي از درﺧﻮاﺳﺖﻫﺎي ‪ HTTP‬ﺑﺎ اﺳـﺘﻔﺎده از دﺳـﺘﻮر ‪ Max-Age‬ﻣـﺪت اﻋﺘﺒـﺎر ﻓﺎﯾـﻞ را ‪10‬‬ ‫ﺳﺎل ﺑﻌﺪ ﺗﻌﯿﯿﻦ ﮐﺮدهاﻧﺪ ﺑﻪ ﻋﺒﺎرﺗﯽ اﯾﻦ ﻓﺎﯾﻞ ﺗﺎ ‪ 10‬ﺳﺎل اﻋﺘﺒﺎر دارد و ﻣﺮورﮔﺮ در ﻣﺮاﺟﻌﺎت ﺑﻌﺪي ﻣﯽﺗﻮاﻧﺪ از ﻓﺎﯾـﻞ‬ ‫داﺧﻞ ‪ Cache‬ﺧﻮد اﺳﺘﻔﺎده ﮐﻨﺪ‪.‬‬ ‫اﻟﺒﺘﻪ ﻣﺮورﮔﺮﻫﺎﯾﯽ وﺟﻮد دارﻧﺪ ﮐﻪ از اﺳﺘﺎﻧﺪارد ‪ HTTP/1.1‬ﭘﺸﺘﯿﺒﺎﻧﯽ ﻧﻤﯽﮐﻨﻨﺪ در ﻧﺘﯿﺠﻪ ﻧﻤـﯽﺗﻮاﻧﻨـﺪ اﯾـﻦ‬ ‫دﺳﺘﻮرات را ﺑﻪ ﮐﺎر ﮔﯿﺮﻧﺪ ) اﻟﺒﺘﻪ اﯾﻦ ﮔﺮوه از ﮐﺎرﺑﺮان ﺳـﺎﯾﺖ ﺷـﻤﺎ ﮐﻤﺘـﺮ از ﯾـﮏ درﺻـﺪ ﮐـﻞ ﺑﺎزدﯾـﺪﻫﺎ را ﺗﺸـﮑﯿﻞ‬ ‫ﻣﯽدﻫﻨﺪ(‪ .‬ﺑﺮاي ﺣﻞ ﻣﺸـﮑﻞ ﻣـﯽﺗﻮاﻧﯿـﺪ از ﻫﻤـﺎن دﺳـﺘﻮر ‪ expire header‬ﺑـﺎ ﺗـﺎرﯾﺦ ﻣﺸـﺨﺺ اﺳـﺘﻔﺎده ﮐﻨﯿـﺪ‪ .‬در‬ ‫ﻣﺴﺘﻨﺪات ‪ HTTP/1.1‬ﻧﻮﺷﺘﻪ ﺷﺪه اﺳﺖ ﮐﻪ اﮔﺮ ﻫﺮ دو دﺳﺘﻮر ‪ Max-Age‬و ‪ expire header‬ﺑﺎ ﻫﻢ وﺟـﻮد داﺷـﺘﻪ‬ ‫ﺑﺎﺷﻨﺪ‪ ،‬دﺳﺘﻮر ‪ Max-Age‬ارﺟﺤﯿﺖ دارد‪.‬‬ ‫اﻟﺒﺘﻪ اﮔﺮ ﻫﻤﭽﻨﺎن ﻧﮕﺮان ﺗﻨﻈﯿﻢ ﺗﺎرﯾﺦ و ﺳﺎﻋﺖ ﺳﺮور ﻫﺴﺘﯿﺪ‪ ،‬ﻣﯽﺗﻮاﻧﯿﺪ از ‪ mod_expire‬اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪ .‬اﯾﻦ ﻣﺎژول‬ ‫آﭘــﺎﭼﯽ ﺑــﻪ ﺷــﻤﺎ ﮐﻤــﮏ ﻣــﯽﮐﻨــﺪ ﺗــﺎ ﺗــﺎرﯾﺦ ‪ expire header‬را ﻫﻤﺎﻧﻨــﺪ ‪ Max-Age‬را ﺑــﺎ اﺳــﺘﻔﺎده از دﺳــﺘﻮر‬ ‫‪ ExpireDefault‬ﺑﻪ ﺷﮑﻞ ﻧﺴﺒﯽ وارد ﮐﻨﯿﺪ‪ .‬در اﯾﻦ ﺣﺎﻟﺖ ﺑﺎﯾﺪ دﺳﺘﻮر را ﺑﻪ اﯾﻦ ﺷﮑﻞ اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪:‬‬ ‫>"‪<FilesMatch "\.(gif|jpg|js|css)$‬‬ ‫"‪ExpiresDefault "access plus 10 years‬‬ ‫>‪</FilesMatch‬‬ ‫در اﯾﻨﺠﺎ ﺗﺎرﯾﺦ اﻧﻘﻀﺎ ﺑﺮاي ﮐﻠﯿﻪ ﻓﺎﯾﻞﻫﺎ ﺑﺎ ﭘﺴﻮﻧﺪﻫﺎي ‪ gif, jpg, js‬و ‪ 10، CSS‬ﺳﺎل ﻣﺸﺨﺺ ﺷﺪه اﺳﺖ‪ .‬اﯾﻦ ﻣﺎژول‬ ‫ﺑﻪ ﻃﻮر ﻫﻤﺰﻣﺎن ‪ expire header‬و ‪ Max-Age‬را در ‪ header‬ﻓﺎﯾﻞ ﻗﺮار ﻣﯽدﻫﺪ‪.‬‬

‫در اﯾﻦ ﺣﺎﻟﺖ ﭼﻮن ﺗﺎرﯾﺦ ﺑﻪ ﺷﮑﻞ ﻧﺴﺒﯽ ﻣﺸﺨﺺ ﻣﯽﺷﻮد دﯾﮕﺮ ﻧﮕﺮاﻧﯽ ﺗﻨﻈﯿﻢ ﺗﺎرﯾﺦ و ﺳﺎﻋﺖ ﺳﺮور وﺟﻮد ﻧﺪارد و‬ ‫دﯾﮕﺮ ﻻزم ﻧﯿﺴﺖ ﺗﺎرﯾﺦ ﺑﻪ ﺷﮑﻞ دﺳﺘﯽ ﺗﻨﻈﯿﻢ ﺷﻮد‪ .‬ﺑﻪ اﯾﻦ ﺷﮑﻞ ﻫﻢ ﻣﺮورﮔﺮﻫﺎي ﺟﺪﯾﺪ و ﻫﻢ ﻣﺮورﮔﺮﻫﺎي ﻗﺪﯾﻤﯽ ﮐﻪ‬ ‫از ‪ HTTP/1.0‬ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽﮐﻨﻨﺪ‪ ،‬ﻣﯽﺗﻮاﻧﻨﺪ از ‪ expire header‬ﻫﺎ ﺑﻬﺮه ﺑﺮﻧﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪۴٢‬‬

‫ﺗﻌﯿﯿﻦ ﻧﺴﺨﻪ ﺑﺎ ﺗﻐﯿﯿﺮ ﻧﺎم ﻓﺎﯾﻞﻫﺎ‬ ‫در ﺻﻮرﺗﯽ ﮐﻪ ﺷﻤﺎ ﻓﺎﯾﻠﯽ را ﺑﺮ روي ‪ Server‬ﺧﻮد ﺗﻐﯿﯿﺮ دﻫﯿﺪ و ﻗﺒﻼً ﻧﯿﺰ ﺑﺮاي آن ﻓﺎﯾـﻞ ‪ expire header‬ﺗﻌﺮﯾـﻒ‬ ‫ﮐﺮده ﺑﺎﺷﯿﺪ‪ ،‬ﮐﺎرﺑﺮ ﭼﻄﻮر از ﺗﻐﯿﯿﺮ ﻓﺎﯾﻞ ﻣﻄﻠﻊ ﺧﻮاﻫﺪ ﺷﺪ ؟ ﻋﻤﻼً ﮐﺎرﺑﺮ ﻣﺘﻮﺟﻪ ﻫﯿﭻ ﺗﻐﯿﯿﺮي ﻧﻤﯽﺷﻮد زﯾﺮا ﺑﺎ ﺗﻌﯿـﯿﻦ‬ ‫ﺗﺎرﯾﺦ اﻧﻘﻀﺎ ﺑﺮاي ﻓﺎﯾﻞﻫﺎ دﯾﮕﺮ ﻣﺮورﮔﺮ ﮐﺎرﺑﺮ ﺑﺮاي ﻓﺎﯾﻞ درﺧﻮاﺳﺖ ﺟﺪﯾﺪي ارﺳﺎل ﻧﻤﯽﮐﻨﺪ و از ﻫﻤﺎن ﻓﺎﯾـﻞ درون‬ ‫‪ Cache‬ﺑﻬﺮه ﻣﯽﺑﺮد‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل اﮔﺮ ﺷﻤﺎ ﺗﻐﯿﯿﺮات اﺳﺎﺳﯽ در ﻓﺎﯾﻞ ‪ CSS‬ﺧﻮد اﯾﺠﺎد ﮐﻨﯿﺪ‪ ،‬ﮐﺎرﺑﺮ ﺗﺎ ﻣﺪتﻫﺎ ﺳﺎﯾﺖ‬ ‫ﺷﻤﺎ را ﺑﺎ ﻇﺎﻫﺮ ﻗﺪﯾﻤﯽ ﺧﻮاﻫﺪ دﯾﺪ‪ .‬ﺑﺮاي ﺣﻞ اﯾﻦ ﻣﺸﮑﻞ ﻣﯽﺗﻮان ﻧﺎم ﻓﺎﯾﻞ را ﺗﻐﯿﯿﺮ داد‪ .‬ﺑﺎ ﺗﻐﯿﯿﺮ ﻧـﺎم ﻓﺎﯾـﻞ‪ ،‬ﻣﺮورﮔـﺮ‬ ‫ﻓﺎﯾﻞ ﺟﺪﯾﺪ را داﻧﻠﻮد ﺧﻮاﻫﺪ ﮐﺮد‪ .‬ﺑﺴﯿﺎري از ﺳﯿﺴﺘﻢﻫﺎ ﺑﺮاي ﻓﺎﯾﻞ ‪ CSS‬و ﯾﺎ ‪ JS‬ﺧﻮد ‪ Version‬ﺗﻌﯿﯿﻦ ﻣﯽﮐﻨﻨﺪ ﮐـﻪ در‬ ‫ﮐﻨﺎر ﻧﺎم ﻓﺎﯾﻞ آورده ﻣﯽﺷﻮد‪ .‬در ﺻﻮرﺗﯽ ﮐﻪ ﻓﺎﯾﻞ ﺗﻐﯿﯿﺮ ﮐﻨﺪ‪ ،‬اﯾﻦ ﺷﻤﺎره ﻧﺴﺨﻪ ﻧﯿﺰ ﺗﻐﯿﯿﺮ ﺧﻮاﻫﺪ ﮐـﺮد و در ﻧﺘﯿﺠـﻪ‬ ‫ﻓﺎﯾﻞ ﺟﺪﯾﺪ ﺑﺮ روي ﺳﯿﺴﺘﻢ ﮐﺎرﺑﺮ داﻧﻠﻮد ﺧﻮاﻫﺪ ﺷﺪ‪ .‬اﻟﺒﺘﻪ ﺑﺎﯾﺪ دﻗﺖ داﺷﺘﻪ ﺑﺎﺷﯿﺪ ﮐﻪ ﻫﯿﭻﮔﺎه ﺑﺮاي ﻓﺎﯾﻞ ‪ HTML‬ﺧﻮد‬ ‫‪ expire header‬ﺗﻌﺮﯾﻒ ﻧﮑﻨﯿﺪ زﯾﺮا اﯾﻦ ﻓﺎﯾﻞﻫﺎ اﻏﻠﺐ در ﺣﺎل ﺗﻐﯿﯿﺮ ﻫﺴﺘﻨﺪ‪ .‬ﺗﻨﻬﺎ زﻣـﺎﻧﯽ ﮐـﻪ ﺻـﻔﺤﺎت ﺳـﺎﯾﺖ ﺷـﻤﺎ‬ ‫ﮐﺎﻣﻼ اﺳﺘﺎﺗﯿﮏ اﺳﺖ ﺑﺮاي ﻓﺎﯾﻞﻫﺎي ‪ HTML‬ﺳﺎﯾﺘﺘﺎن ‪ expire header‬در ﻧﻈﺮ ﺑﮕﯿﺮﯾﺪ‪.‬‬

‫!‬

‫ﺗﻌﯿﯿﻦ ‪ expire header‬ﻫﺎ ﺑﺮاي ﺗﻤﺎﻣﯽ ﻓﺎﯾﻞﻫﺎ ﮔﺎﻫﺎ ﻣﯽﺗﻮاﻧﺪ زﻣﺎن ﺑﺎرﮔﺬاري ﺻﻔﺤﺎت در ﻣﺮاﺟﻌﺎت ﺑﻌـﺪي را‬

‫ﺗﺎ ‪ 50‬درﺻﺪ ﺑﻬﺒﻮد ﺑﺒﺨﺸﺪ‪.‬‬

‫‪ -4‬ﻓﺸﺮده ﮐﺮدن اﺟﺰاي ﺻﻔﺤﻪ ﺑﺎ ‪GZIP‬‬ ‫ﺗﺎ ﮐﻨﻮن در ﻣﻮرد ﺷﯿﻮهﻫﺎي ﻣﺨﺘﻠﻒ اﻓﺰاﯾﺶ ﺳﺮﻋﺖ ﺑﺎرﮔﺬاري ﺻﻔﺤﺎت ﺑﺤﺚ ﮐﺮدﯾﻢ‪ .‬ﺣﺎل ﻣﯽﺧﻮاﻫﯿﻢ در ﻣﻮرد‬ ‫ﻓﺸﺮده ﺳﺎزي ﺻﻔﺤﺎت ﺑﺤﺚ ﮐﻨﯿﻢ‪ .‬ﺑﺎ اﺳﺘﻔﺎده از ﻓﺸﺮدهﺳﺎزي ﺻﻔﺤﺎت ﻧﯿﺰ ﻣﯽﺗﻮان ﺳﺮﻋﺖ ﺑﺎرﮔﺬاري ﺻـﻔﺤﺎت را‬ ‫ﺑﻪ ﻣﯿﺰان ﭼﺸﻤﮕﯿﺮي اﻓﺰاﯾﺶ داد‪ .‬ﻫﻨﮕﺎﻣﯽ ﮐﻪ اﺟﺰاي ﺻﻔﺤﻪ را ﻓﺸﺮده ﮐﻨﯿﺪ‪ ،‬زﻣﺎن اﻧﺘﻘﺎل ﻓﺎﯾﻞ ﮐﺎﻫﺶ ﻣﯽﯾﺎﺑﺪ و ﺗﻌﺪاد‬ ‫‪packet‬ﻫﺎي ﮐﻤﺘﺮي ﺑﺮاي ﮐﺎرﺑﺮ ارﺳﺎل ﻣﯽﺷﻮد‪ .‬اﯾﻦ ﺗﮑﻨﯿﮏ ﺳـﺎده ﺗـﺮﯾﻦ روش ﺑـﺮاي اﻓـﺰاﯾﺶ ﺳـﺮﻋﺖ اﺳـﺖ و از‬ ‫ﻃﺮﻓﯽ آﺳﺎنﺗﺮﯾﻦ ﺷﯿﻮه ﭘﯿﺎدهﺳﺎزي را ﻧﯿﺰ داراﺳﺖ‪.‬‬

‫ﻓﺸﺮده ﺳﺎزي ﺻﻔﺤﺎت ﺑﻪ ﭼﻪ ﺷﮑﻞ ﮐﺎر ﻣﯽﮐﻨﺪ‬ ‫ﻫﻤﺎن ﺷﯿﻮه ﻓﺸﺮدهﺳﺎزي ﮐﻪ دﻫﻪﻫﺎﺳﺖ ﮐﻪ ﺑﺮاي ﻓﺸﺮده ﺳﺎزي اﯾﻤﯿﻞﻫﺎ و اﻧﺘﻘـﺎل ﻓﺎﯾـﻞﻫـﺎ از ﻃﺮﯾـﻖ ‪FTP‬‬ ‫اﺳﺘﻔﺎده ﻣﯽﺷﻮد‪ ،‬اﮐﻨﻮن ﺑﺮاي ﻓﺸﺮدهﺳﺎزي ﺻﻔﺤﺎت ﺑﺮاي ﻣﺮورﮔﺮﻫﺎ اﺳﺘﻔﺎده ﻣﯽﺷﻮد و اﯾﻦ ﺷﯿﻮه ﻓﺸـﺮدهﺳـﺎزي‬ ‫ﻧﯿﺰ در ‪ HTTP/1.1‬ﻋﺮﺿﻪ ﺷﺪه اﺳﺖ‪ .‬ﻣﺮورﮔﺮﻫﺎي وب‪ ،‬ﭘﺸﺘﯿﺒﺎﻧﯽ ﺧﻮد از اﯾﻦ ﻗﺎﺑﻠﯿﺖ را ﺑﺎ اﺿﺎﻓﻪ ﮐﺮدن ‪Accept-‬‬ ‫‪ Encoding‬ﺑﻪ ‪ header‬درﺧﻮاﺳﺖ ‪ HTTP‬ﺧﻮد‪ ،‬اﻋﻼم ﻣﯽﮐﻨﻨﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪۴٣‬‬

‫زﻣﺎﻧﯽ ﮐﻪ ‪ Server‬اﯾﻦ ‪ header‬را از ﻣﺮورﮔﺮ درﯾﺎﻓﺖ ﮐﻨﺪ ﻣﯽﺗﻮاﻧﺪ ﺻﻔﺤﻪ ﯾﺎ ﻓﺎﯾﻞ ﻣﻮرد ﻧﻈﺮ را ﺑﺎ ﯾﮑﯽ از ﻣﺘﺪﻫـﺎي‬ ‫ﻓﺸﺮدهﺳﺎزي ﻓﺸﺮده ﮐﺮده و ﺑﺮاي ﮐﺎرﺑﺮ ارﺳﺎل ﮐﻨـﺪ‪ Server .‬ﻧﯿـﺰ ﺑـﺎ اﺿـﺎﻓﻪ ﮐـﺮدن ‪ Content-Encoding‬ﺑـﻪ‬ ‫‪ ،header‬ﻣﺮورﮔﺮ را از ﻓﺸﺮده ﺑﻮدن ﺻﻔﺤﻪ ﻣﻄﻠﻊ ﻣﯽﮐﻨﺪ‪.‬‬

‫ﻓﺮﻣﺖ ﻓﺸﺮده ﺳﺎزي ‪ GZIP‬در ﺣﺎل ﺣﺎﺿﺮ از ﻫﻤﻪ ﻣﺸﻬﻮرﺗﺮ اﺳﺖ و ﮐﺎﻣﻼً ﻣﺠﺎﻧﯽ اﺳﺖ و در ﯾـﮏ ﭘـﺮوژه‬ ‫‪ GNU‬ﺗﻮﺳﻌﻪ داده ﺷﺪه و ﺗﻮﺳﻂ ‪ RFC 1952‬ﻧﯿﺰ ﺑﻪ ﺷﮑﻞ اﺳﺘﺎﻧﺪارد در آﻣﺪه اﺳﺖ‪ .‬ﺗﻨﻬﺎ ﻓﺮﻣﺖ ﻓﺸﺮدهﺳﺎزي دﯾﮕـﺮ‬ ‫ﮐﻪ ﻣﻤﮑﻦ اﺳﺖ ﺑﺎ آن ﻣﻮاﺟﻪ ﺷﻮﯾﺪ‪ ،‬ﻓﺮﻣﺖ ‪ deflate‬اﺳﺖ ﮐﻪ ﻗﺎﺑﻠﯿﺖ ﮐﻤﺘﺮي ﻧﺴﺒﺖ ﺑﻪ ‪ GZIP‬دارد و ﻣﺤﺒـﻮﺑﯿﺘﺶ ﻧﯿـﺰ‬ ‫ﮐﻤﺘﺮ اﺳﺖ‪ .‬ﻣﺮورﮔﺮﻫﺎﯾﯽ ﮐﻪ از ‪ deflate‬ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽﮐﻨﻨﺪ‪ ،‬از ‪ GZIP‬ﻧﯿﺰ ﭘﺸﺘﯿﺒﺎﻧﯽ ﺑﻪ ﻋﻤﻞ ﻣﯽآورﻧﺪ وﻟـﯽ ﺑـﺮﻋﮑﺲ‬ ‫اﯾﻦ ﻗﻀﯿﻪ ﻫﻤﯿﺸﻪ ﺻﺎدق ﻧﯿﺴﺖ‪ .‬از اﯾﻦ رو ﻓﺮﻣﺖ ‪ GZIP‬ﻣﺘﺪ ﭘﯿﺸﻨﻬﺎدي ﺑﺮاي ﻓﺸﺮدهﺳﺎزي ﺻﻔﺤﺎت و ﻓﺎﯾﻞﻫﺎﺳﺖ‪.‬‬

‫ﭼﻪ ﻓﺎﯾﻞﻫﺎﯾﯽ را ﺑﺎﯾﺪ ﻓﺸﺮده ﮐﻨﯿﻢ‬ ‫ﺗﻨﻈﯿﻤﺎت ‪ Server‬ﻣﺸﺨﺺ ﻣﯽﮐﻨﺪ ﮐﻪ ﭼﻪ ﻓﺮﻣﺖﻫﺎﯾﯽ ﺑﺎﯾﺪ ﻓﺸﺮده ﺷﻮﻧﺪ‪ .‬اﻏﻠﺐ ﺳﺎﯾﺖﻫـﺎ ﺗﻨﻬـﺎ ﻓﺎﯾـﻞ ‪HTML‬‬ ‫ﺧﻮد را ﻓﺸﺮده ﻣﯽﮐﻨﻨﺪ وﻟﯽ ﺑﻬﺘﺮ اﺳﺖ ﮐﻪ ﮐﻠﯿﻪ ﻓﺎﯾﻞﻫـﺎي ‪ HTML, CSS, JS‬و ﺣﺘـﯽ ﻓﺎﯾـﻞﻫـﺎي ‪ XML‬و ‪ JSON‬ﻧﯿـﺮ‬ ‫ﻓﺸﺮده ﺷﻮﻧﺪ‪ .‬اﻟﺒﺘﻪ ﺗﺎﮐﯿﺪ ﺑﺎﯾﺪ ﺑﯿﺸﺘﺮ روي ﻓﺎﯾﻞﻫﺎي ‪ CSS‬و ‪ JS‬ﺑﺎﺷﺪ زﯾﺮا ﺣﺠﻢ اﯾﻦ ﻓﺎﯾﻞﻫﺎ ﻣﻌﻤﻮﻻ زﯾﺎد ﺑﻮده و ﮔﺎﻫﺎً‬ ‫ﺗﻌﺪادﺷﺎن ﻧﯿﺰ زﯾﺎد اﺳﺖ‪.‬‬ ‫از ﻓﺸﺮدهﺳﺎزي ﻓﺎﯾﻞﻫﺎي ﺗﺼﻮﯾﺮي و ‪ PDF‬ﭘﺮﻫﯿﺰ ﮐﻨﯿﺪ زﯾﺮا اﯾﻦ ﻓﺎﯾﻞﻫﺎ ﻓﺸﺮده ﺷﺪهاﻧﺪ و ﻓﺸـﺮده ﺳـﺎزي‬ ‫دوﺑﺎره آﻧﻬﺎ ﺣﺠﻤﺸﺎن را ﮐﺎﻫﺶ ﻧﻤﯽدﻫﺪ ﺑﻠﮑﻪ ﻣﻤﮑﻦ اﺳﺖ ﺣﺘﯽ ﺣﺠﻢ اﯾﻦ ﻓﺎﯾﻞﻫﺎ را اﻓـﺰاﯾﺶ دﻫـﺪ و ﻫﻤﭽﻨـﯿﻦ ﻣﻨـﺎﺑﻊ‬ ‫‪ Server‬ﺷﻤﺎ ﻧﯿﺰ ﺟﻬﺖ ﻓﺸﺮدهﺳﺎزي ﻓﺎﯾﻞﻫﺎي ﺑﯿﻬﻮده‪ ،‬ﻫﺪر ﻣﯽرود‪.‬‬ ‫ﻓﺸﺮدهﺳﺎزي ﻓﺎﯾﻞﻫﺎ ﻧﯿﺰ ﻫﺰﯾﻨﻪﻫﺎﯾﯽ ﺑﺮاي ﺷﻤﺎ در ﺑﺮ ﺧﻮاﻫﺪ داﺷﺖ‪ .‬ﻓﺸﺮدهﺳﺎزي ﻓﺎﯾﻞﻫﺎ ﻣﻘﺪاري از ﺗـﻮان‬ ‫‪ CPU‬ﺳﺮور ﺷﻤﺎ را ﻣﺼﺮف ﻣﯽﮐﻨﺪ‪ .‬اﻟﺒﺘﻪ ﺻﺮﻓﻪ ﺟﻮﯾﯽ ﺣﺎﺻﻞ از ﻓﺸﺮدهﺳﺎزي ﺻﻔﺤﺎت در ﭘﻬﻨﺎي ﺑﺎﻧﺪ ﻣﺼـﺮﻓﯽ و‬ ‫ﻫﻤﭽﻨﯿﻦ رﺿﺎﯾﺖ ﮐﺎرﺑﺮان از ﺑﺎز ﺷﺪن ﺳﺮﯾﻊ ﺻﻔﺤﺎت ﻫﻤﯿﺸﻪ دﻟﯿﻞ ﻗﺎﻧﻊ ﮐﻨﻨﺪه اي اﺳﺖ ﮐـﻪ ﻫﻤﯿﺸـﻪ ﻓﺸـﺮدهﺳـﺎزي‬ ‫ﺻﻔﺤﺎت و ﻓﺎﯾﻞﻫﺎ را ﺑﻪ ﮐﺎر ﮔﯿﺮﯾﺪ‪ .‬در ﻋﻤﻞ ﺗﻮﺻﯿﻪ ﻣﯽ ﺷﻮد ﮐﻪ ﻫﺮ ﻓﺎﯾﻞ ﺑﺰرﮔﺘﺮ از ﯾﮏ ﯾـﺎ دو ﮐﯿﻠﻮﺑﺎﯾـﺖ را ﻓﺸـﺮده‬ ‫ﮐﻨﯿﺪ‪ .‬ﺑﺎ اﺳﺘﻔﺎده از دﺳﺘﻮر ‪ mod_gzip_file_size‬ﻣﯽﺗﻮاﻧﯿﺪ ﺣﺪاﻗﻞ ﺳﺎﯾﺰ ﻓﺎﯾﻞ را ﺑﺮاي ﻓﺸﺮدهﺳﺎزي ﻣﺸﺨﺺ ﮐﻨﯿﺪ‬ ‫ﮐﻪ اﯾﻦ ﻣﻘﺪار ﺑﻪ ﻃﻮر ﭘﯿﺶ ﻓﺮض ﻣﻌﺎدل ‪ 500‬ﺑﺎﯾﺖ اﺳﺖ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪۴۴‬‬

‫ﻣﯿﺰان اﻓﺰاﯾﺶ ﺳﺮﻋﺖ‬ ‫در اﮐﺜﺮ ﻣﻮاﻗﻊ ﺑﻪ ﻃﻮر ﻣﯿﺎﻧﮕﯿﻦ ﺑﻌﺪ از ﻓﺸﺮدهﺳﺎزي ﺻﻔﺤﺎت‪ ،‬ﺣﺪود ‪ 70‬درﺻﺪ از ﺣﺠﻢ ﺻﻔﺤﻪ ﮐﺎﺳﺘﻪ ﻣﯽﺷـﻮد‪ .‬در‬ ‫اداﻣﻪ ﺟﺪوﻟﯽ را ﺧﻮاﻫﯿﺪ دﯾﺪ ﮐـﻪ ﻓﺎﯾـﻞﻫـﺎي ‪ CSS‬و ‪ JS‬ﺑـﺎ ﺳـﺎﯾﺰﻫـﺎي ﺑـﺰرگ و ﮐﻮﭼـﮏ ﺗﻮﺳـﻂ دو ﻓﺮﻣـﺖ ﻣﺨﺘﻠـﻒ‬ ‫ﻓﺸﺮدهﺳﺎزي‪ ،‬ﻓﺸﺮده ﺷﺪهاﻧﺪ‪.‬‬

‫درﺟﺪول ﺑﺎﻻ ﻧﯿﺰ ﮐﺎﻣﻼً ﻣﺸﺨﺺ ﺷﺪه ﮐﻪ ﭼﺮا ‪ GZIP‬ﺑﺮ ‪ deflate‬ارﺟﺤﯿﺖ دارد‪ .‬ﻓﺸﺮدهﺳﺎزي ‪ GZIP‬ﺑﻪ ﺷﮑﻞ ﺑﻬﺘﺮي‬ ‫ﻣﯽﺗﻮاﻧﺪ ﻓﺎﯾﻞﻫﺎ را ﻓﺸﺮده ﮐﻨﺪ‪.‬‬ ‫ﺗﻨﻈﯿﻤﺎت‬ ‫ﺷﯿﻮه ﺗﻨﻈﯿﻤﺎت ﻣﺎژولﻫﺎي ﻓﺸﺮدهﺳﺎزي ﺑﻪ ﻧﺴﺨﻪ ‪ Apache‬ﺳﺮور ﺷﻤﺎ ﺑﺴﺘﮕﯽ دارد‪ .‬ﺑـﺮ روي ‪Apache‬‬ ‫‪ 1.3‬از ﻣﺎژول ‪ mod_gzip‬اﺳﺘﻔﺎده ﻣﯽﺷﻮد در ﺣﺎﻟﯽ ﮐﻪ ‪ Apache 2.x‬از ﻣﺎژول ‪ mod_deflate‬ﺑﻬﺮه ﻣـﯽﮔﯿـﺮد‪.‬‬ ‫در اﯾﻦ ﺑﺨﺶ ﺗﻨﻈﯿﻤﺎت ﻣﺮﺑﻮط ﺑﻪ ﻓﺸﺮدهﺳﺎزي در ﺳﺮورﻫﺎي ‪ Apache‬ﺑﺮاي ﺷﻤﺎ ﺗﻮﺿﯿﺢ داده ﻣﯽﺷﻮد زﯾـﺮا اﯾـﻦ‬ ‫‪ web server‬ﻣﺤﺒﻮبﺗﺮﯾﻦ ‪ web server‬ﻣﻮﺟﻮد ﺑﺮ روي اﯾﻨﺘﺮﻧﺖ اﺳﺖ‪.‬‬

‫‪Apache 1.3: mod_gzip‬‬ ‫در اﯾﻦ ﻧﺴﺨﻪ از آﭘﺎﭼﯽ از ﻣﺎژول ‪ mod_gzip‬ﺑﺮاي ﻓﺸﺮدهﺳﺎزي اﺳﺘﻔﺎده ﻣﯽﺷﻮد‪ .‬ﺗﻨﻈﯿﻤﺎت اﯾﻦ ﻣـﺎژول‬ ‫دﺳــــــﺘﻮرات زﯾــــــﺎدي دارد ﮐــــــﻪ ﻣــــــﯽﺗﻮاﻧــــــﺪ آن را در ﺳــــــﺎﯾﺖ ﻣــــــﺎژول در آدرس‬ ‫‪ http://www.schroepl.net/projekte/mod_gzip‬ﺑﺨﻮاﻧﯿــﺪ‪ .‬ﻣﻌــﺮوفﺗـﺮﯾﻦ دﺳــﺘﻮر ﺑــﻪ اﯾــﻦ ﺷــﮑﻞ اﺳــﺘﻔﺎده‬ ‫ﻣﯽﺷﻮد‪:‬‬ ‫‪mod_gzip_on‬‬ ‫‪Enables mod_gzip.‬‬ ‫‪mod_gzip_item_include‬‬ ‫‪mod_gzip_item_exclude‬‬ ‫ﺑﺎ اﺳﺘﻔﺎده از اﯾﻦ دﺳﺘﻮرات ﻣﯽﺗﻮاﻧﯿﺪ ﻣﺸﺨﺺ ﮐﻨﯿﺪ ﮐﻪ ﺑﺮ اﺳﺎس ﻧﻮع ﻓﺎﯾـﻞ‪ user agent ،MIME type ،‬و ‪ ...‬ﭼـﻪ‬ ‫اﺟﺰاﯾﯽ ﺑﺎﯾﺪ ﻓﺸﺮده ﺷﻮﻧﺪ و ﭼﻪ اﺟﺰاﯾﯽ ﻓﺸﺮده ﻧﺸﻮﻧﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪۴۵‬‬

‫ﺑﺮﺧﯽ از ﺳﺮورﻫﺎي ﻣﺎژول ‪ mod_gzip‬را ﺑﻪ ﻃﻮر ﭘﯿﺶ ﻓﺮض ﺑﺮاي ‪MIME type‬ﻫﺎي ‪ text/html‬ﻓﻌﺎل ﮐﺮدهاﻧـﺪ‪.‬‬ ‫در اداﻣﻪ ﺑﺎﯾﺪ دﺳﺘﻮراﺗﯽ ﺑﻨﻮﯾﺴﯿﺪ ﮐﻪ ﻓﺎﯾﻞﻫﺎي ‪ CSS‬و ‪ JavaScript‬را ﻧﯿﺰ ﻓﺸﺮده ﮐﻨﺪ‪ .‬ﺑﺮاي اﻧﺠﺎم اﯾﻦﮐﺎر ﺑﺎﯾـﺪ اﯾـﻦ‬ ‫دﺳﺘﻮرات را ﺑﻨﻮﯾﺴﯿﺪ‪:‬‬ ‫‪mod_gzip_item_include file \.js$‬‬ ‫‪mod_gzip_item_include mime ^application/x-javascript$‬‬ ‫‪mod_gzip_item_include file \.css$‬‬ ‫‪mod_gzip_item_include mime ^text/css$‬‬ ‫ﺑﺎ اﺳﺘﻔﺎده از ﺧﻂ ﻓﺮﻣﺎن ﻣﯽﺗﻮاﻧﯿﺪ ﻣﯿﺰان ﻓﺸﺮده ﺳﺎزي را ﻧﯿﺰ ﻣﺸﺨﺺ ﮐﻨﯿﺪ وﻟﯽ دﺳﺘﻮري ﺑﺮاي اﯾﻦﮐـﺎر در ﺳـﻄﺢ‬ ‫‪ mod_gzip‬وﺟﻮد ﻧﺪارد‪.‬‬ ‫‪Apache 2.x: mod_deflate‬‬ ‫ﻓﺸﺮدهﺳﺎزي در آﭘﺎﭼﯽ ‪ 2‬ﺗﻮﺳﻂ ﻣﺎژول ‪ mod_deflate‬اﻧﺠﺎم ﻣﯽﺷﻮد‪ .‬ﺑﺮ ﺧﻼف ﻧـﺎﻣﺶ‪،‬اﯾـﻦ ﻣـﺎژول از‬ ‫ﻫﻤﺎن ﻓﺸﺮدهﺳﺎزي ‪ GZIP‬اﺳﺘﻔﺎده ﻣﯽﮐﻨﺪ‪ .‬ﻫﻤﺎن دﺳﺘﻮراﺗﯽ ﮐﻪ در ﺑﺨﺶ ﻗﺒﻞ ﺑﺮاي ﻓﺸﺮدهﺳﺎزي ‪ CSS‬و ‪ JS‬ﻧﻮﺷـﺘﻪ‬ ‫ﺑﻮدﯾﻢ‪ ،‬در اﯾﻦﺟﺎ ﺑﺮاي اﯾﻦ ﻣﺎژول در ﻗﺎﻟﺐ ﯾﮏ ﺧﻂ دﺳﺘﻮر ﻧﻮﺷﺘﻪ ﻣﯽﺷﻮد‪:‬‬ ‫‪AddOutputFilterByType DEFLATE text/html text/css application/x-javascript‬‬ ‫ﺑـــﺮﺧﻼف ‪ mod_gzip‬در ‪ mod_deflate‬دﺳـــﺘﻮري ﺑـــﺮاي ﺗﻨﻈـــﯿﻢ ﻣﯿـــﺰان ﻓﺸـــﺮده ﺳـــﺎزي وﺟـــﻮد دارد‬ ‫)‪ (DeflateCompressionLevel‬ﮐﻪ ﺑﺎ اﺳﺘﻔﺎده از آن ﻣﯽﺗﻮاﻧﯿﺪ ﻣﯿﺰان ﻓﺸﺮدهﺳﺎزي را ﺗﻨﻈـﯿﻢ ﮐﻨﯿـﺪ‪ .‬ﺑـﺮاي ﮐﺴـﺐ‬ ‫اﻃﻼﻋﺎت ﺑﯿﺸﺘﺮ در ﻣﻮرد ﺷﯿﻮهﻫﺎي ﻓﺸﺮدهﺳﺎزي‪،‬ﻣﺴﺘﻨﺪات ﻣﺮﺑﻮط ﺑﻪ ‪ Mod_deflate‬را در آدرس زﯾﺮ ﺑﺨﻮاﻧﯿﺪ‪:‬‬ ‫‪http://httpd.apache.org/docs/2.0/mod/mod_deflate.html‬‬ ‫‪Proxy Caching‬‬ ‫ﺗﻨﻈﯿﻤﺎﺗﯽ ﮐﻪ ﺗﺎ ﺑﻪ ﺣﺎل ﺑﻪ ﺷﻤﺎ آﻣﻮزش دادم ﺑـﺮ روي ﻣﺮورﮔـﺮﻫـﺎﯾﯽ ﮐـﻪ ﺑـﻪ ﻃـﻮر ﻣﺴـﺘﻘﯿﻢ‪ ،‬ﻓﺎﯾـﻞﻫـﺎ و‬ ‫ﺻﻔﺤﺎت را از ﺳﺮور درﺧﻮاﺳﺖ ﻣﯽﮐﻨﻨﺪ‪ ،‬ﺑﻪ ﺧﻮﺑﯽ ﮐﺎر ﻣﯽﮐﻨﺪ‪ Server .‬ﺑـﺎ ﺗﻮﺟـﻪ ﺑـﻪ ‪ Accept-Encoding‬ارﺳـﺎل‬ ‫ﺷﺪه در ‪ header‬ﻓﺎﯾـﻞ را ﻓﺸـﺮده ﻣـﯽﮐﻨـﺪ و ﺑـﺮاي ﮐـﺎرﺑﺮ ارﺳـﺎل ﻣـﯽﮐﻨـﺪ و ﻣﺮورﮔـﺮ ﮐـﺎرﺑﺮ ﻧﯿـﺰ ﺑـﺎ ﺗﻮﺟـﻪ ﺑـﻪ‬ ‫‪ expire header‬و ‪ ،Cache-Control‬ﻓﺎﯾﻞﻫﺎ را درون ‪ Cache‬ﺧﻮد ﻗﺮار ﻣﯽدﻫﺪ‪.‬‬ ‫زﻣﺎﻧﯽ ﮐﻪ ﻣﺮورﮔﺮ درﺧﻮاﺳﺖ ﺧﻮد را از ﻃﺮﯾﻖ ‪ proxy‬ارﺳﺎل ﮐﻨﺪ‪ ،‬ﻗﻀﯿﻪ ﮐﻤﯽ ﭘﯿﭽﯿـﺪه ﻣـﯽﺷـﻮد‪ .‬ﻓـﺮض‬ ‫ﮐﻨﯿﺪ درﺧﻮاﺳﺖ اول از ﻃﺮﯾﻖ ﻣﺮورﮔﺮي ارﺳﺎل ﺷﻮد ﮐﻪ ﻓﺸﺮدهﺳﺎزي را ﭘﺸﺘﯿﺒﺎﻧﯽ ﻧﻤﯽﮐﻨﺪ‪ .‬در ﺧﻮاﺳﺖ ﺑﻪ ﺳـﺮور‬ ‫‪ proxy‬ﻣﯽ رﺳﺪ و اﯾﻦ ﺳﺮور ﻧﯿﺰ درﺧﻮاﺳﺖ را ﺑﻪ ﺳﺮور اﺻﻠﯽ ارﺳﺎل ﻣﯽﮐﻨﺪ و ﻓﺎﯾـﻞ را ﺑـﻪ ﺷـﮑﻞ ﻓﺸـﺮده ﻧﺸـﺪه‬ ‫درﯾﺎﻓﺖ ﻣﯽﮐﻨﺪ و ﺑﺮاي ﮐﺎرﺑﺮ ارﺳﺎل ﻣﯽﮐﻨﺪ‪ .‬ﺳﭙﺲ ﻫﻤﯿﻦ ﻓﺎﯾﻞ ﻓﺸﺮده ﻧﺸـﺪه ﺑـﺮ روي ﺳـﺮور ‪ proxy‬ﻣـﻮرد ﻧﻈـﺮ‪،‬‬

‫‪www.ParsBook.org‬‬

‫‪۴۶‬‬

‫‪ cache‬ﻣﯽﺷﻮد‪ .‬ﺣﺎل ﮐﺎرﺑﺮ دﯾﮕﺮي ﻫﻤﯿﻦ ﺻﻔﺤﻪ را از ‪ proxy‬درﺧﻮاﺳﺖ ﻣـﯽﮐﻨـﺪ‪ ،‬در ﺣـﺎﻟﯽ ﮐـﻪ اﯾـﻦ ﻣﺮورﮔـﺮ از‬ ‫ﻗﺎﺑﻠﯿﺖ ﻓﺸﺮده ﺳﺎزي ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽﮐﻨﺪ اﻣﺎ ﺳﺮور ‪ proxy‬ﻫﻤﺎن ﻓﺎﯾﻞ ﻓﺸﺮده ﻧﺸـﺪه را از روي ﺳـﺮور ﺑـﺮاي ﮐـﺎرﺑﺮ‬ ‫ارﺳﺎل ﻣﯽﮐﻨﺪ‪ .‬از اﯾﻦ ﻃﺮﯾﻖ ﮐﺎرﺑﺮ دﯾﮕﺮ ﻧﻤﯽﺗﻮاﻧﺪ از ﻗﺎﺑﻠﯿﺖ ﻓﺸﺮدهﺳﺎزي ﻣﻮﺟﻮد ﺑﺮ روي ﻣﺮورﮔﺮش ﺑﻬﺮه ﺑﺒﺮد‪.‬‬ ‫ﺑﺮاي ﺣﻞ اﯾﻦ ﻣﺸﮑﻞ ﺑﺎﯾﺪ ‪ header‬ﺑﺎ ﻋﻨﻮان ‪ vary‬را ﺑﻪ ﺻﻔﺤﻪ اﺿﺎﻓﻪ ﮐﻨﯿﺪ‪ .‬در اﯾﻦ ﺣﺎﻟـﺖ ﺳـﺮور ﺷـﻤﺎ ﺑـﻪ ﺳـﺮور‬ ‫‪ proxy‬ﻣﯽﮔﻮﯾﺪ ﮐﻪ ﺑﺮ اﺳﺎس ‪ header‬درﺧﻮاﺳﺖ‪ ،‬ﻧﺴﺨﻪﻫـﺎي ﻣﺨﺘﻠـﻒ از ﺻـﻔﺤﻪ را در ‪ Cache‬ﻗـﺮار ﺑـﺪه‪ .‬ﺑـﺮاي‬ ‫اﯾﻦﮐﻪ ﻣﯽﺧﻮاﻫﯿﻢ ﻣﻼك ﻧﺴﺨﻪﻫﺎي ﻣﺨﺘﻠﻒ ‪ Cache‬ﺷﺪه ﺑﺮ اﺳﺎس ‪ Accept-Encoding‬درﺧﻮاﺳﺖﻫﺎ ﺑﺎﺷﺪ‪ ،‬دﺳﺘﻮر‬ ‫را اﯾﻦﮔﻮﻧﻪ ﻣﯽﻧﻮﯾﺴﯿﻢ‪:‬‬

‫وﺟﻮد اﯾﻦ دﺳﺘﻮر در ‪ header‬ﺻﻔﺤﻪ ﺑﺎﻋﺚ ﻣﯽﺷﻮد ﮐﻪ ﺑﺮ اﺳﺎس ‪ Accept-Encoding‬ﻫـﺮ درﺧﻮاﺳـﺖ‪،‬‬ ‫ﭼﻨﺪﯾﻦ ﻧﺴﺨﻪ از ﺻﻔﺤﻪ ﺑﺮ روي ﺳﺮور ‪ proxy‬ﻗﺮار ﮔﯿﺮد‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜـﺎل اﮔـﺮ ﻣﺮورﮔـﺮ ﮐـﺎرﺑﺮ از ﻓﺸـﺮدهﺳـﺎزي‬ ‫ﭘﺸﺘﯿﺒﺎﻧﯽ ﻧﮑﻨﺪ‪ ،‬ﻧﺴﺨﻪ ﻓﺸﺮده ﻧﺸﺪه از ﺻﻔﺤﻪ ﺑﺮ روي ﭘﺮوﮐﺴﯽ ‪ Cache‬ﻣﯽﺷﻮد و اﮔـﺮ ﻣﺮورﮔـﺮ ﮐـﺎرﺑﺮ ﺑﻌـﺪي از‬ ‫ﻓﺸﺮدهﺳﺎزي ﭘﺸﺘﯿﺒﺎﻧﯽ ﮐﻨﺪ‪ ،‬ﯾﮏ ﻧﺴﺨﻪ از ﻓﺎﯾﻞ ﻓﺸﺮده ﻧﯿﺰ ﺑﺮ روي ﺳﺮور ‪ proxy‬ﻗﺮار ﻣﯽﮔﯿﺮد و ‪ Cache‬ﻣﯽﺷﻮد‪.‬‬ ‫ﺣﺎل ﺑﺮاي درﺧﻮاﺳﺖﻫﺎي ﺑﻌﺪي ﺑﻪ ﻧﺴﺒﺖ اﯾﻦﮐﻪ ﻣﺮورﮔـﺮ از ﻓﺸـﺮده ﺳـﺎزي ﭘﺸـﺘﯿﺒﺎﻧﯽ ﮐﻨـﺪ ﯾـﺎ ﺧﯿـﺮ‪ ،‬ﻧﺴـﺨﻪﻫـﺎي‬ ‫ﻣﻨﺎﺳﺐ‪ ،‬ﺗﻮﺳﻂ ﺳﺮور ‪ proxy‬ﺑﺮاي ﮐﺎرﺑﺮان ارﺳﺎل ﻣﯽﺷﻮد‪.‬‬ ‫ﻣﻮارد ﺧﺎص‬ ‫ﻫﻤﺎﻫﻨﮕﯽ ﺑﺮاي ﻓﺸﺮدهﺳﺎزي ﻓﺎﯾﻞﻫﺎ و ﺻﻔﺤﺎت ﺑﯿﻦ ﻣﺮورﮔﺮ و ﺳﺮور‪ ،‬اﻣﺮي ﺳﺎده اﺳﺖ اﻣـﺎ ﻫﻤـﯿﻦ روﻧـﺪ‬ ‫ﻧﯿﺰ ﺑﺎﯾﺪ ﺑﻪ درﺳﺘﯽ ﻃﯽ ﺷﻮد‪ .‬اﮔﺮ ﺳﺮور اﺷﺘﺒﺎﻫﯽ ﻣﺮﺗﮑﺐ ﺷﻮد و ﺻﻔﺤﺎﺗﯽ ﮐﻪ ﻓﺸﺮده ﺷﺪه اﺳﺖ را ﺑـﺮاي ﮐـﺎرﺑﺮي‬ ‫ﮐﻪ ﻣﺮورﮔﺮش ﻗﺎﺑﻠﯿﺖ ﻓﺸﺮدهﺳﺎزي را ﭘﺸﺘﯿﺒﺎﻧﯽ ﻧﻤﯽﮐﻨﺪ‪ ،‬ارﺳﺎل ﮐﻨﺪ‪ ،‬و ﯾـﺎ ﻓﺮاﻣـﻮش ﮐﻨـﺪ ﮐـﻪ در ‪ header‬ﺻـﻔﺤﻪ‬ ‫اﻋﻼم ﮐﻨﺪ ﮐﻪ ﺻﻔﺤﻪ ﻓﺸﺮده ﺷﺪه اﺳﺖ‪ ،‬ﺻﻔﺤﻪ ﻣﻮرد ﻧﻈﺮ دﯾﮕﺮ ﺑﺮاي ﮐﺎرﺑﺮ ﻗﺎﺑﻞ اﺳﺘﻔﺎده ﻧﺨﻮاﻫﺪ ﺑﻮد‪.‬‬ ‫در ﺣﺎل ﺣﺎﺿﺮ ‪ 90‬درﺻﺪ از ﺗﺮاﻓﯿﮏ وب از ﻃﺮﯾﻖ ﻣﺮورﮔﺮﻫﺎﯾﯽ ﻣﻨﺘﻘـﻞ ﻣـﯽﺷـﻮد ﮐـﻪ ‪ GZIP‬را ﭘﺸـﺘﯿﺒﺎﻧﯽ‬ ‫ﻣﯽﮐﻨﻨﺪ‪ .‬اﮔﺮ ﻣﺮورﮔﺮي اﻋﻼم ﮐﻨﺪ ﮐﻪ از ﻓﺸﺮدهﺳﺎزي ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽﮐﻨﺪ‪ ،‬ﻣﯽﺗﻮاﻧﯿﺪ ﺑـﻪ آن اﻋﺘﻤـﺎد ﮐﻨﯿـﺪ اﻣـﺎ ﻣـﻮاردي‬ ‫وﺟﻮد دارد ﮐﻪ ﺑﻪ ﺧﺎﻃﺮ ﻣﺸﮑﻼت ﻧﺮم اﻓﺰاري‪ ،‬ﺑﺮﺧﯽ از ﻣﺮورﮔﺮﻫﺎ ﻧﻤﯽﺗﻮاﻧﻨﺪ ﺻﻔﺤﺎت ﻓﺸﺮده ﺷـﺪه را ﺑـﻪ درﺳـﺘﯽ‬ ‫ﻧﻤﺎﯾﺶ دﻫﻨﺪ‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل اﯾﻨﺘﺮﻧﺖ اﮐﺴﭙﻠﻮرر ﻧﺴﺨﻪ ‪ 5.5‬و ﻧﺴﺨﻪ ‪ 6‬ﺳﺮوﯾﺲ ﭘـﮏ ‪ 1‬در ﻧﻤـﺎﯾﺶ ﺻـﻔﺤﺎت ﻓﺸـﺮده‪،‬‬ ‫ﻣﺸﮑﻞ دارﻧﺪ‪.‬‬ ‫ﯾﮏ راه اﯾﻦ اﺳﺖ ﮐﻪ ﺻﻔﺤﺎت ﻓﺸﺮده را ﺗﻨﻬﺎ ﺑﺮاي ﻣﺮورﮔـﺮﻫـﺎﯾﯽ ﺑﻔﺮﺳـﺘﯿﻢ ﮐـﻪ ﻣـﯽداﻧـﯿﻢ از اﯾـﻦ ﻗﺎﺑﻠﯿـﺖ‬ ‫ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽﮐﻨﻨﺪ‪ .‬ﺑﺮاي اﯾﻦﮐﺎر ﺑﺎﯾﺪ ﯾﮏ ﻟﯿﺴﺖ ﺳﻔﯿﺪ ﺗﻬﯿﻪ ﮐﻨﯿﻢ‪ .‬اﻟﺒﺘﻪ در اﯾﻦ ﺣﺎﻟﺖ ﻣﻤﮑﻦ اﺳﺖ ﻣﺮورﮔﺮﻫـﺎﯾﯽ وﺟـﻮد‬

‫‪www.ParsBook.org‬‬

‫‪۴٧‬‬

‫داﺷﺘﻪ ﺑﺎﺷﻨﺪ ﮐﻪ از اﯾﻦ ﻗﺎﺑﻠﯿﺖ ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽﮐﻨﻨﺪ وﻟﯽ از آﻧﺠﺎﺋﯽﮐﻪ در ﻟﯿﺴﺖ ﺳﻔﯿﺪ ﻗﺮار ﻧﺪارﻧﺪ‪ ،‬ﺻﻔﺤﺎت ﺑﺮاﯾﺸﺎن ﺑﻪ‬ ‫ﺷﮑﻞ ﻓﺸﺮده ﺷﺪه ارﺳﺎل ﻧﻤﯽﺷﻮد‪.‬‬ ‫در ﺻـــﻮرﺗﯽ ﮐـــﻪ از ‪ Apache 1.3‬و ‪ mod_gzip‬اﺳـــﺘﻔﺎده ﻣـــﯽﮐﻨﯿـــﺪ ﻣـــﯽﺗﻮاﻧﯿـــﺪ ﺑـــﺎ اﺳـــﺘﻔﺎده از دﺳـــﺘﻮر‬ ‫‪ mod_gzip_item_include‬ﯾﮏ ﻟﯿﺴﺖ ﺳﻔﯿﺪ اﯾﺠﺎد ﮐﻨﯿﺪ‪:‬‬ ‫"]‪mod_gzip_item_include reqheader "User-Agent: MSIE [6-9‬‬ ‫"]‪mod_gzip_item_include reqheader "User-Agent: Mozilla/[5-9‬‬ ‫در آﭘﺎﭼﯽ ‪ 2‬ﺑﺎﯾﺪ از دﺳﺘﻮر ‪ BrowserMatch‬اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪:‬‬ ‫‪BrowserMatch ^MSIE [6-9] gzip‬‬ ‫‪BrowserMatch ^Mozilla/[5-9] gzip‬‬ ‫ﺣﺎل اﮔﺮ ﻗﺎﺑﻠﯿﺖ ‪ Cache‬ﺷﺪن ﺻﻔﺤﺎت ﺑﺮ روي ﺳﺮور ‪ proxy‬را ﻧﯿـﺰ ﺑـﻪ اﯾـﻦ وﺿـﻌﯿﺖ اﺿـﺎﻓﻪ ﮐﻨﯿـﺪ‪ ،‬ﺑـﺎ ﺷـﺮاﯾﻂ‬ ‫ﭘﯿﭽﯿــﺪهاي ﻣﻮاﺟــﻪ ﻣــﯽﺷــﻮﯾﻢ‪ .‬ﺣــﺎل ﺑﺎﯾــﺪ ﺑــﻪ ‪ header‬ﻣــﺎن دﺳــﺘﻮر ‪ vary‬را اﺿــﺎﻓﻪ ﮐﻨــﯿﻢ ﻣﻨﺘﻬــﺎ ﺑــﻪ ﻫﻤــﺮاه‬ ‫‪ Accept-Encoding‬ﺑﺎﯾﺪ ‪ User-Agent‬را ﻫﻢ اﺿﺎﻓﻪ ﮐﻨﯿﻢ‪ .‬ﺑﻪ ﻋﺒﺎرﺗﯽ ﺑﻪ ﺳﺮور ‪ proxy‬ﻣﯽﮔﻮﺋﯿﻢ ﮐـﻪ ﺑـﻪ ازاي ﻫـﺮ‬ ‫ﻧﺴﺨﻪ از ﻣﺮورﮔﺮ و اﯾﻦﮐﻪ آﯾﺎ آن ﻣﺮورﮔﺮ ﻓﺸﺮدهﺳﺎزي را ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽﮐﻨﺪ ﯾﺎ ﻧﻪ‪ ،‬ﯾﮏ ﻧﺴـﺨﻪ از ﺻـﻔﺤﻪ را ‪cache‬‬ ‫ﮐﻦ‪.‬‬

‫اﻟﺒﺘﻪ ﺑﻌﯿﺪ ﺑﻪ ﻧﻈﺮ ﻣﯽرﺳﺪ ﮐﻪ ﺳﺮور ‪ proxy‬اﯾﻦ ﺗﻌﺪاد ﻧﺴـﺨﻪ از ﻫـﺮ ﺻـﻔﺤﻪاي را ﺑـﻪ ازاي ﻫـﺮ ﻣﺮورﮔـﺮ‪،‬‬ ‫‪ Cache‬ﮐﻨﺪ‪ .‬در اﯾﻦﺟﺎ ﻣﯽﺗﻮان ﺑﺎ اﺳﺘﻔﺎده از دﺳﺘﻮر * ‪ vary:‬و ﯾـﺎ ‪ Cache-Control: Private‬ﮐـﻼً ‪ Cache‬ﺷـﺪن‬ ‫ﻓﺎﯾﻞ ﺑﺮ روي ‪ proxy‬را ﻏﯿﺮ ﻓﻌﺎل ﮐﻨﯿﻢ‪ .‬دﺳﺘﻮر * ‪ vary:‬از ‪ cache‬ﺷـﺪن اﺟـﺰاي ﺻـﻔﺤﻪ ﻫـﻢ ﺟﻠـﻮﮔﯿﺮي ﺑـﻪ ﻋﻤـﻞ‬ ‫ﻣﯽآورد ﺑﻨﺎﺑﺮاﯾﻦ ﺷﯿﻮه دوم ﮐﻪ ﻫﻤﺎن ‪ cache-control: private‬اﺳﺖ را ﭘﯿﺸـﻨﻬﺎد ﻣـﯽﮐﻨـﯿﻢ ﮐـﻪ در ﺣـﺎل ﺣﺎﺿـﺮ‬ ‫ﺗﻮﺳﻂ ﯾﺎﻫﻮ و ﮔﻮﮔﻞ ﻧﯿﺰ اﺳﺘﻔﺎده ﻣﯽﺷﻮد‪.‬‬ ‫! ﺑﺎ ‪ GZIP‬ﮐﺮدن اﺟﺰاي ﺻﻔﺤﻪ ﻣﯽﺗﻮاﻧﯿﺪ ﺗﺎ ‪ 70‬درﺻﺪ‪ ،‬ﺣﺠﻢ ﺻﻔﺤﺎﺗﺘﺎن را ﮐﺎﻫﺶ دﻫﯿﺪ‪.‬‬

‫‪ -5‬ﻓﺎﯾﻞ ‪ CSS‬را در ﺑﺎﻻي ﻓﺎﯾﻞ ‪ HTML‬ﻗﺮار دﻫﯿﺪ‬ ‫ﺑﻪ ﻃﻮر ﮐﻠﯽ ﻗﺮار دادن ﻓﺎﯾﻞﻫﺎي ‪ CSS‬در زﯾﺮ ﻓﺎﯾﻞ ‪ HTML‬ﺑﺎرﮔﺬاري ﺻﻔﺤﻪ ﺷﻤﺎ را ﺳﺮﯾﻊﺗﺮ ﻣﯽﮐﻨﺪ زﯾـﺮا‬ ‫وﻗﺘﯽ ﻓﺎﯾﻞﻫﺎي ‪ CSS‬و دﯾﮕﺮ ﻓﺎﯾﻞﻫﺎ در ﭘﺎﯾﯿﻦ ﺳﻨﺪ ﺷﻤﺎ ﻗﺮار ﮔﺮﻓﺘﻪ ﺑﺎﺷﻨﺪ‪ ،‬اول ﻓﺎﯾﻞﻫﺎ و اﺟﺰاي ﻣﻬﻢﺗﺮ داﻧﻠﻮد ﺷﺪه و‬ ‫ﺳﭙﺲ ﻧﻮﺑﺖ ﺑﻪ ‪ CSS‬و دﯾﮕﺮ ﻓﺎﯾﻞﻫﺎ ﻣﯽرﺳﺪ وﻟﯽ ﻣﺸﮑﻠﯽ وﺟﻮد دارد!‬

‫‪www.ParsBook.org‬‬

‫‪۴٨‬‬

‫ﻣﻬﻨﺪﺳﯿﻦ ﻃﺮاﺣﯽ واﺳﻂ ﮐﺎرﺑﺮي )‪ (user interface‬ﻣﺎﯾﻠﻨﺪ ﮐﻪ ﺻﻔﺤﻪﻫﺎ ﺑﻪ ﺷﮑﻞ ﺟﺰء ﺑﻪ ﺟـﺰء ﺑﺎرﮔـﺬاري‬ ‫ﺷﻮد زﯾﺮا زﻣﺎﻧﯽ ﮐﻪ ﺻﻔﺤﻪ ﺑﻪ اﯾﻦ ﺷﮑﻞ ﺑـﺮاي ﻧﻤـﺎﯾﺶ داده ﺷـﻮد‪ ،‬ﮐـﺎرﺑﺮاﻧﯽ ﮐـﻪ ﺳـﺮﻋﺖ اﯾﻨﺘﺮﻧـﺖ ﭘـﺎﯾﯿﻨﯽ دارﻧـﺪ‪،‬‬ ‫اﺣﺴﺎس راﺣﺘﯽ ﺑﯿﺸﺘﺮي ﺧﻮاﻫﻨﺪ ﮐﺮد زﯾﺮا ﺑﻪ ﻣﺮور اﺟﺰاي ﺻﻔﺤﻪ ﺑﺮاﯾﺸﺎن ﻧﻤﺎﯾﺶ داده ﻣﯽﺷﻮد و اﻧﺘﻈـﺎر ﮐﺸـﯿﺪن‬ ‫ﺑﺮاي ﮐﺎﻣﻞ ﺷﺪن ﺻـﻔﺤﻪ ﺑﺮاﯾﺸـﺎن ﺳـﺎده ﺗـﺮ ﻣـﯽﺷـﻮد‪ .‬آﻗـﺎي ژاﮐـﻮب ﻧﯿﻠﺴـﻦ ﮐـﻪ ﺗﺤﻘﯿﻘـﺎت ﮔﺴـﺘﺮده اي درﺑـﺎره‬ ‫ﮐﺎرﺑﺮدﭘﺬﯾﺮي‪ 9‬ﺳﺎﯾﺖﻫﺎي وب اﻧﺠﺎم داده اﺳﺖ در اﯾﻦ ﻣﻮرد ﻣﯽﻧﻮﯾﺴﺪ‪:‬‬ ‫ﺑﺎرﮔﺬاري ﺻﻔﺤﻪ ﺑﻪ ﺷﮑﻞ ﺟﺰء ﺑﻪ ﺟﺰء ﺳﻪ ﻓﺎﯾﺪه دارد‪ :‬ﻣﻮرد اول اﯾﻨﮑﻪ ﮐﺎرﺑﺮ ﻣﺘﻮﺟﻪ ﻣﯽﺷﻮد ﮐﻪ ﺳﺎﯾﺖ از‬ ‫ﮐﺎر ﻧﯿﻔﺘﺎده و در ﺣﺎل ﺑﺎرﮔﺬاري اﺳﺖ‪ .‬ﻣﻮرد دوم اﯾﻨﮑﻪ ﮐﺎرﺑﺮ ﻣﯽﺗﻮاﻧﺪ ﺑﺎ ﺗﻮﺟـﻪ ﺑـﻪ ﻧﻤـﺎﯾﺶ اﺟـﺰاي ﺻـﻔﺤﻪ‪ ،‬زﻣـﺎن‬ ‫ﺑﺎرﮔﺬاري ﮐﺎﻣﻞ ﺻﻔﺤﻪ را ﺣﺪس ﺑﺰﻧﺪ و در اﯾﻦ زﻣﺎن ﻣﯽﺗﻮاﻧﺪ ﺗﺎ زﻣﺎن ﮐﺎﻣﻞ ﺷﺪن ﺻﻔﺤﻪ‪ ،‬ﮐﺎرﻫﺎي دﯾﮕﺮي را اﻧﺠﺎم‬ ‫دﻫﺪ و در ﻧﻬﺎﯾﺖ ﻣﻮرد ﺳﻮم اﯾﻨﮑﻪ ﻧﮕﺎه ﮐﺮدن ﺑﻪ اﺟﺰاﯾﯽ ﮐﻪ ﮐﻢ ﮐﻢ ﺑﺎرﮔﺬاري ﺷﺪه و ﻧﻤﺎﯾﺶ داده ﻣـﯽﺷـﻮﻧﺪ‪ ،‬اﻧﺘﻈـﺎر‬ ‫ﮐﺸﯿﺪن را ﺑﺮاي ﮐﺎرﺑﺮ آﺳﺎنﺗﺮ ﻣﯽﮐﻨﺪ‪.‬‬ ‫ﻣﺸﮑﻞ اﯾﻦ اﺳﺖ‪ :‬زﻣﺎﻧﯽ ﮐﻪ ﺷﻤﺎ ﻓﺎﯾﻞ ‪ CSS‬را در ﭘﺎﯾﯿﻦ ﺻﻔﺤﻪ ‪ HTML‬ﻗﺮار ﻣﯽدﻫﯿﺪ‪ ،‬اﯾﻦﮐﺎر ﺑﺎﻋﺚ ﻣﯽﺷﻮد‬ ‫ﮐﻪ اﺟﺰاي ﺻﻔﺤﻪ ﺑﻪ ﺷﮑﻞ ﺟﺰء ﺑﻪ ﺟﺰء ﻧﻤﺎﯾﺶ داده ﻧﺸﻮد‪ .‬ﻣﺮورﮔﺮ ‪ IE‬ﻣﯽﺧﻮاﻫﺪ ﮐﻪ اول ﻓﺎﯾﻞ ‪ CSS‬را داﻧﻠﻮد ﮐﻨـﺪ و‬ ‫ﭘﺲ از آن ﺻﻔﺤﻪ را ﺑﻪ ﻧﻤﺎﯾﺶ در آورد از اﯾﻦ رو اﮔﺮ ﭼﻪ ﻓﺎﯾﻞﻫﺎي ﻣﺨﺘﻠﻒ را درﯾﺎﻓﺖ ﮐﺮده اﺳﺖ وﻟـﯽ آﻧﻬـﺎ را ﺑـﻪ‬ ‫ﮐﺎرﺑﺮ ﻧﻤﺎﯾﺶ ﻧﻤﯽدﻫﺪ و ﺻﺒﺮ ﻣﯽﮐﻨﺪ ﺗﺎ ﻓﺎﯾﻞ ‪ CSS‬را ﻧﯿﺰ درﯾﺎﻓﺖ ﮐﻨﺪ و ﭘﺲ از آن ﺑـﻪ ﯾﮑﺒـﺎره ﺻـﻔﺤﻪ را ﺑـﻪ ﮐـﺎرﺑﺮ‬ ‫ﻧﻤﺎﯾﺶ ﻣﯽدﻫﺪ‪ .‬در ﻋﻤﻞ زﻣﺎﻧﯽ ﮐﻪ ﻓﺎﯾﻞ ‪ CSS‬در زﯾﺮ ﺻﻔﺤﻪ ﻗﺮار دارد‪ ،‬ﺻﻔﺤﻪ ﺳﺮﯾﻊﺗﺮ ﺑﺎرﮔﺬاري ﻣﯽﺷـﻮد وﻟـﯽ از‬ ‫آﻧﺠﺎﺋﯽﮐﻪ ﺗﺎ زﻣﺎن ﺑﺎرﮔﺬاري ﮐﺎﻣﻞ ﺻﻔﺤﻪ ﭼﯿﺰي ﺑﻪ ﮐﺎرﺑﺮ ﻧﻤﺎﯾﺶ داده ﻧﻤﯽﺷﻮد‪ ،‬ﮐـﺎرﺑﺮ اﺣﺴـﺎس ﺧﻮاﻫـﺪ ﮐـﺮد ﮐـﻪ‬ ‫زﻣﺎن ﺑﺎرﮔﺬاري ﺻﻔﺤﻪ ﺑﺴﯿﺎر ﻃﻮﻻﻧﯽ ﺑﻮده اﺳﺖ‪.‬‬ ‫ﻣﺮورﮔﺮ اﯾﻨﺘﺮﻧﺖ اﮐﺴﭙﻠﻮرر در زﻣﺎﻧﯽ ﮐﻪ ﻓﺎﯾﻞ ‪ CSS‬در زﯾﺮ ﺻﻔﺤﻪ ﻗـﺮار داﺷـﺘﻪ ﺑﺎﺷـﺪ در ﺳـﻪ ﺣﺎﻟـﺖ‪ ،‬ﺗـﺎ‬ ‫زﻣﺎن ﺑﺎرﮔﺬاري ﮐﺎﻣﻞ ﺻﻔﺤﻪ‪ ،‬ﺗﻨﻬﺎ ﯾﮏ ﺻﻔﺤﻪ ﺳﻔﯿﺪ و ﺧﺎﻟﯽ ﺑﻪ ﮐﺎرﺑﺮ ﻧﻤﺎﯾﺶ ﻣﯽدﻫﺪ‪:‬‬

‫‪٩‬‬

‫‪usability‬‬

‫‪www.ParsBook.org‬‬

‫‪۴٩‬‬

‫ﻧﻤﺎﯾﯽ از ﯾﮏ ﺻﻔﺤﻪ ﮐﻪ ﻓﺎﯾﻞ ‪ CSS‬را در زﯾﺮ ﺻﻔﺤﻪ ﻗﺮار داده اﺳﺖ ‪ .‬در اﯾﻦ ﺣﺎﻟﺖ ﺻﻔﺤﻪ ﺗﺎ‬ ‫ﺑﺎرﮔﺬاري ﮐﺎﻣﻞ‪ ،‬ﺑﻪ ﮐﺎرﺑﺮ ﻧﻤﺎﯾﺶ داده ﻧﺨﻮاﻫﺪ ‪.‬‬ ‫‪ .1‬زﻣﺎﻧﯽ ﮐﻪ در ﺣﺎل دﯾﺪن ﺳﺎﯾﺘﯽ ﺑﺎﺷﯿﺪ و ﯾﮏ ﺻﻔﺤﻪ را در ﯾﮏ ﭘﻨﺠﺮه ﺟﺪﯾﺪ ﺑﺎز ﮐﻨﯿﺪ‪.‬‬ ‫‪ .2‬زﻣﺎﻧﯽ ﮐﻪ ﺻﻔﺤﻪ را ‪ refresh‬ﮐﻨﯿﺪ‪.‬‬ ‫‪ .3‬زﻣﺎﻧﯽ ﮐﻪ ﺻﻔﺤﻪ را ‪ homepage‬ﺧﻮد ﻗﺮار دﻫﯿﺪ و ﻣﺮورﮔﺮ ﺧﻮد را ﺑﺎز ﮐﻨﯿﺪ‪.‬‬ ‫ﻣﺮورﮔﺮﻫﺎي دﯾﮕﺮ ﻧﯿﺰ ﺑﻪ ﺷﮑﻠﯽ ﻣﺘﻔﺎوت رﻓﺘﺎر ﻣﯽﮐﻨﻨﺪ‪ .‬ﻣﺮورﮔﺮﻫﺎي دﯾﮕﺮ اول ﻣـﺘﻦ و ﺗﺼـﺎوﯾﺮ را ﺑـﺪون ﻫـﯿﭻ‬ ‫ﻗﺎﻟﺐﺑﻨﺪي و ﺳﺒﮑﯽ و ﺑﺎ ﻧﻤﺎي ﭘﯿﺶ ﻓﺮض ﻣﺮورﮔﺮ ﻧﻤﺎﯾﺶ ﻣﯽدﻫﻨﺪ و زﻣﺎﻧﯽ ﮐﻪ ﻓﺎﯾﻞ ‪ CSS‬داﻧﻠﻮد ﺷﺪ ﺑﻪ ﯾﮑﺒﺎر ﺻﻔﺤﻪ‬ ‫را ﺑﺎ ﺷﮑﻞ ﺻـﺤﯿﺤﺶ ﺑـﻪ ﻧﻤـﺎﯾﺶ در ﻣـﯽآورﻧـﺪ‪ .‬اﯾـﻦ اﺗﻔـﺎق را ‪ FOUC‬ﯾـﺎ ﻫﻤـﺎن ‪Flash Of Unstilted Content‬‬ ‫ﻣﯽﮔﻮﯾﻨﺪ‪ .‬ﻫﯿﭻ ﮐﺪام از دو رﻓﺘﺎر ذﮐﺮ ﺷﺪه ﻣﻨﺎﺳﺐ ﮐﺎرﺑﺮ ﻧﯿﺴﺖ و ﺑﺎﯾﺪ از آنﻫﺎ ﭘﺮﻫﯿﺰ ﺷﻮد‪.‬‬ ‫زﻣﺎﻧﯽ ﮐﻪ ﻓﺎﯾﻞ ‪ CSS‬را در ﺑﺎﻻي ﺻﻔﺤﻪ ﻗﺮار ﻣﯽدﻫﯿﺪ‪ ،‬ﻣﯽﺗﻮاﻧﯿﺪ ﺑﻪ دو ﺷﮑﻞ ﻓﺎﯾﻞ ‪ CSS‬را ﺑﻪ ﺻﻔﺤﻪ ﺧﻮد‬ ‫اﺿﺎﻓﻪ ﮐﻨﯿﺪ‪ .‬ﻣﯽﺗﻮاﻧﯿﺪ از ﺑﭽﺴﺐ >‪ <link‬اﺳﺘﻔﺎده ﮐﻨﯿﺪ و ﯾﺎ اﯾﻨﮑﻪ از دﺳﺘﻮر ‪ @import‬اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪.‬‬ ‫ﻧﻤﻮﻧﻪاي از دﺳﺘﻮر ﻟﯿﻨﮏ‬ ‫>"‪<link rel="stylesheet" href="styles1.css‬‬ ‫ﻧﻤﻮﻧﻪاي از دﺳﺘﻮر ‪@import‬‬ ‫>‪<style‬‬ ‫;)"‪@import url("styles2.css‬‬ ‫>‪</style‬‬ ‫زﻣﺎﻧﯽ ﮐﻪ ﻓﺎﯾﻞ ‪ CSS‬را ﺑﺎ اﺳﺘﻔﺎده از دﺳﺘﻮر ‪ Import‬ﺑﻪ ﺻﻔﺤﻪ اﺿﺎﻓﻪ ﻣﯽﮐﻨﯿﺪ ﺑﺎﯾﺪ دﻗﺖ داﺷﺘﻪ ﺑﺎﺷﯿﺪ ﮐﻪ‬ ‫دﺳﺘﻮر ‪ Import‬در داﺧﻞ ﺑﺮﭼﺴﺐ >‪ <style‬ﺑﺎﯾﺪ اول ﻗﺮار ﺑﮕﯿﺮد‪ .‬ﻣﻮرد دﯾﮕﺮ اﯾﻨﮑﻪ زﻣﺎﻧﯽ ﮐﻪ ﺷﻤﺎ از دﺳﺘﻮر‬ ‫‪ import‬اﺳﺘﻔﺎده ﻣﯽﮐﻨﯿﺪ‪ ،‬ﻓﺎﯾﻞﻫﺎ ﺑﻪ ﺗﺮﺗﯿﺒﯽ ﮐﻪ در ﺻﻔﺤﻪ ﻗﺮار دارﻧﺪ ﺑﺎرﮔﺬاري ﻧﻤﯽﺷﻮﻧﺪ و ﻓﺎﯾﻞ ‪ CSS‬اي ﮐﻪ ﺑﺎ‬ ‫دﺳﺘﻮر ‪ import‬ﺑﻪ ﺻﻔﺤﻪ اﺿﺎﻓﻪ ﺷﺪه ﺣﺘﯽ اﮔﺮ در ﺑﺎﻻي ﺳﻨﺪ و داﺧﻞ ﺑﺮﭼﺴﺐ >‪ <head‬ﻫﻢ ﺑﺎﺷﺪ‪ ،‬ﺑﺎز ﻫﻢ ﺑﻌﺪ از‬ ‫ﺑﺎرﮔﺬاري ﺗﻤﺎﻣﯽﻓﺎﯾﻞﻫﺎ درﯾﺎﻓﺖ ﻣﯽﺷﻮد ﮐﻪ اﺻﻼ ﻣﻨﺎﺳﺐ ﻧﯿﺴﺖ‪ .‬از اﯾﻦ رو ﭘﯿﺸﻨﻬﺎد ﻣﯽﺷﻮد ﮐﻪ ﺗﻨﻬﺎ از دﺳﺘﻮر ‪link‬‬ ‫اﺳﺘﻔﺎده ﮐﻨﯿﺪ و آن را ﻧﯿﺰ در ﺑﺎﻻي ﺳﻨﺪ و داﺧﻞ ﺑﺮﭼﺴﺐ >‪ <head‬ﻗﺮار دﻫﯿﺪ‪.‬‬

‫!‬

‫از اﯾﻦ رو ﭘﯿﺸﻨﻬﺎد ﻣﯽﺷﻮد ﮐﻪ ﻓﺎﯾﻞ ‪ CSS‬را در ﺑﺎﻻي ﺳﻨﺪ ‪ HTML‬ﺧﻮد ﻗﺮار دﻫﯿﺪ ﺗﺎ ﺻﻔﺤﻪ ﺑﻪ ﺷﮑﻞ ﺟﺰء ﺑﻪ‬

‫ﺟﺰء ﺑﺮاي ﮐﺎرﺑﺮ ﻧﻤﺎﯾﺶ دﻫﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪۵٠‬‬

‫‪ -6‬ﻓﺎﯾﻞﻫﺎي ‪ JavaScript‬را در ﭘﺎﯾﯿﻦ ﺳﻨﺪ ‪ HTML‬ﺧﻮد ﻗﺮار دﻫﯿﺪ‪.‬‬ ‫ﻫﻤﺎنﻃﻮر ﮐﻪ در ﺑﺨﺶ ﻗﺒﻞ دﯾﺪﯾﻢ‪ ،‬ﻗﺮار دادن ﻓﺎﯾﻞ ‪ CSS‬در ﺑﺎﻻي ﺳﻨﺪ ﻣﺸﮑﻼﺗﯽ را ﺑﺮاي ﻧﻤﺎﯾﺶ ﺻﻔﺤﻪ ﺑﻪ‬ ‫وﺟﻮد ﻣﯽآورد‪ .‬ﻣﺸﮑﻠﯽ ﻣﺸﺎﺑﻪ ﻧﯿﺰ در زﻣﺎﻧﯽ ﮐﻪ ﻓﺎﯾﻞ ‪ JavaScript‬را در ﺑﺎﻻي ﺳﻨﺪ ﻗﺮار دﻫﯿﺪ ﺑﺮوز ﻣﯽﮐﻨﺪ و ﺷﯿﻮه‬ ‫ﺑﺮﻃﺮف ﮐﺮدن ﻣﺸﮑﻞ ﻧﯿﺰ درﺳﺖ ﺑﺮ ﺧﻼف ﻣﻮرد ﻗﺒﻞ اﺳﺖ‪ .‬ﺑﻪ ﻋﺒﺎرﺗﯽ ﺑﺮاي ﺣﻞ ﻣﺸﮑﻞ در اﯾﻨﺠﺎ ﺑﺎﯾﺪ ﻓﺎﯾﻞﻫﺎي ﺟﺎوا‬ ‫اﺳﮑﺮﯾﭙﺖ را در زﯾﺮ ﺻﻔﺤﻪ ﻗﺮار دﻫﯿﺪ‪.‬‬ ‫ﻣﺸﮑﻞ ﺑﺎ ﻓﺎﯾﻞﻫﺎي ‪script‬‬ ‫ﻓﺎﯾﻞﻫﺎي ﺟﺎوا اﺳﮑﺮﯾﭙﺖ در زﻣﺎﻧﯽ ﮐﻪ در ﺣﺎل ﺑﺎرﮔﺬاري ﻫﺴﺘﻨﺪ‪ ،‬ﻣﺎﻧﻊ ﺑﺎرﮔﺬاري ﻓﺎﯾﻞﻫﺎي دﯾﮕـﺮ ﺑـﻪ ﺷـﮑﻞ ﻫﻤﺰﻣـﺎن‬ ‫ﻣﯽﺷﻮﻧﺪ‪ .‬ﺑﻪ ﻋﺒﺎرت دﯾﮕﺮ در زﻣﺎﻧﯽ ﮐﻪ ﻓﺎﯾﻞ ﺟﺎوا اﺳﮑﺮﯾﭙﺖ در ﺣﺎل درﯾﺎﻓﺖ اﺳﺖ‪ ،‬ﻓﺎﯾﻞ دﯾﮕﺮي ﺗﻮﺳـﻂ ﻣﺮورﮔـﺮ از‬ ‫‪ server‬ﺳﺎﯾﺖ درﯾﺎﻓﺖ ﻧﻤﯽﺷﻮد‪ .‬ﻣﺸﮑﻞ دﯾﮕﺮ اﯾﻦ اﺳﺖ ﮐﻪ اﮔﺮ ﻓﺎﯾﻞ ﺟﺎوا اﺳﮑﺮﯾﭙﺖ را در ﺑﺎﻻي ﺻـﻔﺤﻪ ﺧـﻮد ﻗـﺮار‬ ‫دﻫﯿﺪ‪ ،‬ﺗﺎ زﻣﺎﻧﯽ ﮐﻪ اﯾﻦ ﻓﺎﯾﻞ درﯾﺎﻓﺖ و اﺟﺮا ﻧﺸﻮد‪ ،‬ﻫﯿﭻ ﺑﺨﺶ دﯾﮕﺮ از ﺻﻔﺤﻪ ﺑﻪ ﻧﻤﺎﯾﺶ در ﻧﺨﻮاﻫﺪ آﻣﺪ‪ .‬ﺑـﻪ ﻋﺒـﺎرﺗﯽ‬ ‫ﺗ ﺎ زﻣﺎﻧﯽ ﮐﻪ اﯾﻦ ﻓﺎﯾﻞ درﯾﺎﻓﺖ ﻧﺸﺪه و اﺟﺮا ﻧﺸﻮد‪ ،‬دﯾﮕﺮ اﺟﺰاي ﺻﻔﺤﻪ ﮐﻪ ﺑﻌـﺪ از ﻓﺎﯾـﻞ ﺟـﺎوا اﺳـﮑﺮﯾﭙﺖ آﻣـﺪه اﻧـﺪ‪،‬‬ ‫درﯾﺎﻓﺖ ﻧﻤﯽﺷﻮﻧﺪ و درﯾﺎﻓﺖ دﯾﮕﺮ ﻓﺎﯾﻞﻫﺎ و ﻧﻤﺎﯾﺸﺸﺎن در ﺻﻔﺤﻪ ﺑﻪ اﻧﺪازهاي ﺑﻪ ﺗﺎﺧﯿﺮ ﻣﯽاﻓﺘﺪ ﺗﺎ ﻧﺨﺴﺖ ﻓﺎﯾﻞ ﺟﺎوا‬ ‫اﺳﮑﺮﯾﭙﺖ درﯾﺎﻓﺖ ﺷﺪه و اﺟﺮا ﺷﻮد‪.‬‬ ‫درﯾﺎﻓﺖ ﻫﻤﺰﻣﺎن ﻓﺎﯾﻞﻫﺎ‬ ‫در ﺑﺨﺶﻫﺎي ﻗﺒﻞ ﺗﻮﺿﯿﺢ دادﯾﻢ ﮐﻪ ﻣﺮورﮔﺮﻫﺎ ﺑﺮاي درﯾﺎﻓـﺖ ﻫـﺮ ﮐـﺪام از اﺟـﺰاي ﺻـﻔﺤﻪ ﯾـﮏ درﺧﻮاﺳـﺖ ‪HTTP‬‬ ‫ارﺳﺎل ﻣﯽﮐﻨﻨﺪ‪ .‬ﺷﺎﯾﺪ ﭘﯿﺶ ﺧﻮد ﻓﮑﺮ ﮐﻨﯿﺪ ﺣﺎل ﮐﻪ ارﺳﺎل ﻫﺮ درﺧﻮاﺳﺖ‪ ،‬اﻧﺪك زﻣﺎﻧﯽ را ﺗﻠﻒ ﻣﯽﮐﻨﺪ ﭼـﺮا ﻣﺮورﮔـﺮ‬ ‫ﺑﻪ ﯾﮏﺑﺎره ﭼﻨﺪﯾﻦ درﺧﻮاﺳﺖ را ﺑﻪ ﻃﻮر ﻫﻤﺰﻣﺎن ارﺳﺎل ﻧﻤﯽﮐﻨﺪ ؟ ﺟﻮاب اﯾﻦ ﺳﻮال در ﻣﺴﺘﻨﺪات ﻣﺮﺑﻮط ﺑـﻪ ‪HTTP‬‬ ‫‪ 1.1‬ﻗﺮار دارد‪ .‬در ﻣﺴﺘﻨﺪات اﯾﻦ ﻧﺴﺨﻪ ﻧﻮﺷﺘﻪ ﺷﺪه اﺳﺖ ﮐﻪ ﻫﺮ ﻣﺮورﮔﺮ ﺗﻨﻬﺎ ﻣﯽﺗﻮاﻧﺪ دو درﺧﻮاﺳﺖ ﻫﻤﺰﻣﺎن را ﺑﻪ‬ ‫ﯾﮏ ‪ server‬ﺑﺎ ﯾﮏ ﻧﺎم ﺧﺎص ارﺳﺎل ﮐﻨﺪ‪ .‬ﺑﻪ اﯾﻦ ﺗﺼﻮﯾﺮ دﻗﺖ ﮐﻨﯿﺪ‪:‬‬

‫‪www.ParsBook.org‬‬

‫‪۵١‬‬

‫ﻫﻤﺎﻧﻄﻮر ﮐﻪ در ﺗﺼﻮﯾﺮ ﻧﻤﺎﯾﺎن اﺳﺖ ‪ .‬ﻣﺮورﮔﺮ ﺗﻨﻬﺎ دو درﺧﻮاﺳﺖ ﻫﻤﺰﻣﺎن ﺑﻪ ‪ server‬ارﺳﺎل‬ ‫ﻣﯽ ﮐﻨﺪ ‪.‬‬ ‫اﻟﺒﺘﻪ در ﺣﺎل ﺣﺎﺿﺮ ﺗﻨﻬﺎ ﻧﺴﺨﻪﻫﺎي ﻗﺪﯾﻤﯽ ﺗﺮ اﯾﻨﺘﺮﻧﺖ اﮐﺴﭙﻠﻮرر ﺑﻪ اﯾﻦ ﻗﺎﻧﻮن ﭘﺎﯾﻨﺪ ﻫﺴﺘﻨﺪ و ﻣﺮورﮔﺮﻫﺎي ﺟﺪﯾﺪ‬ ‫ﻫﻤﭽﻮن ﻓﺎﯾﺮ ﻓﺎﮐﺲ و ﯾﺎ اﯾﻨﺘﺮﻧﺖ اﮐﺴﭙﻠﻮرر ‪ 8‬در ﻫﺮ ﻧﻮﺑﺖ ‪ 6‬درﺧﻮاﺳﺖ را ﺑﻪ ﻃﻮر ﻫﻤﺰﻣﺎن ارﺳﺎل ﻣﯽﮐﻨﺪ‪.‬‬ ‫ﺣﺎل اﮔﺮ ﻓﺎﯾﻞﻫﺎ ﺑﺮ روي ‪ server‬ﻫﺎﯾﯽ ﺑﺎ ﻧﺎمﻫﺎي ﻣﺨﺘﻠﻒ ﻗﺮار ﮔﯿﺮد‪ .‬ﻣﺮورﮔﺮﻫﺎ ﻣﯽﺗﻮاﻧﻨﺪ در آن واﺣﺪ ﺣﺪاﻗﻞ دو‬ ‫درﺧﻮاﺳﺖ ﺑﻪ ﻫﺮ ‪ server‬ارﺳﺎل ﮐﻨﻨﺪ‪ .‬در اﯾﻦ ﺣﺎﻟﺖ زﻣﺎن ﺑﺎرﮔﺬاري اﺟﺰاي ﺻﻔﺤﻪ دو ﺑﺮاﺑﺮ ﺳﺮﯾﻌﺘﺮ ﺧﻮاﻫﺪ ﺷﺪ‪.‬‬ ‫ﺑﻪ اﯾﻦ ﺗﺼﻮﯾﺮ دﻗﺖ ﮐﻨﯿﺪ‪:‬‬

‫ﻫﻤﺎﻧﻄﻮر ﮐﻪ در ﺗﺼﻮﯾﺮ ﻣﺸﺨﺺ ﺷﺪه ﻣﺮورﮔﺮ دو درﺧﻮاﺳﺖ را ﺑﻪ ﻫﺮ ‪ server‬ارﺳﺎل ﮐﺮده و از‬ ‫آﻧﺠﺎﺋﯽ ﮐﻪ دو ‪ server‬ﻧﯿﺰ وﺟﻮد داﺷﺘﻪ از اﯾﻦ رو ‪ 4‬درﺧﻮاﺳﺖ در ﻫﺮ ﻧﻮﺑﺖ ارﺳﺎل ﺷﺪه اﺳﺖ ‪.‬‬ ‫ﻓﺎﯾﻞﻫﺎي ‪ Script‬و ﻣﺸﮑﻞ درﯾﺎﻓﺖ ﻓﺎﯾﻞ ﻫﻤﺰﻣﺎن‬ ‫زﻣﺎﻧﯽ ﮐﻪ ﻓﺎﯾﻞ ‪ JavaScript‬را در ﺑﺎﻻي ﺻﻔﺤﻪ ﻗﺮار دﻫﯿﺪ‪ ،‬اﯾﻦﮐﺎر ﺑﺎﻋﺚ ﻣﯽﺷﻮد ﮐﻪ ﻓﺎﯾﻞﻫﺎ دﯾﮕﺮ ﺑﻪ ﻃـﻮر‬ ‫ﻫﻤﺰﻣﺎن درﯾﺎﻓﺖ ﻧﺸﻮﻧﺪ ﺣﺘﯽ اﮔﺮ ﺷﻤﺎ ﺑﯿﺶ از ﯾﮏ ‪ server‬داﺷﺘﻪ ﺑﺎﺷﯿﺪ ﺗﺎ زﻣﺎﻧﯽ ﮐﻪ ﻓﺎﯾﻞ ﺟﺎوا اﺳـﮑﺮﯾﭙﺖ ﺑـﻪ ﻃـﻮر‬ ‫ﮐﺎﻣﻞ درﯾﺎﻓﺖ ﻧﺸﺪه ﺑﺎﺷﺪ‪ ،‬ﻫﯿﭻ ﻓﺎﯾﻞ دﯾﮕﺮي از ‪ server‬ﻫﺎي ﺳﺎﯾﺖ ﺷﻤﺎ درﺧﻮاﺳﺖ ﻧﺨﻮاﻫﺪ ﺷﺪ‪ .‬دﻟﯿﻞ اﯾﻦ اﺗﻔﺎق اﯾـﻦ‬ ‫اﺳﺖ ﮐﻪ ﻣﻤﮑﻦ اﺳﺖ در داﺧﻞ ﻓﺎﯾﻞ ‪ javascript‬ﺷﻤﺎ دﺳﺘﻮر ‪ document.write‬وﺟﻮد داﺷﺘﻪ ﺑﺎﺷﺪ‪ .‬ﺑﺎ اﺳـﺘﻔﺎده از‬ ‫اﯾﻦ دﺳﺘﻮر ﻣﯽﺗﻮان ﻋﻨﺎﺻﺮ ﺟﺪﯾﺪي ﺑﻪ ﺻﻔﺤﻪ اﺿﺎﻓﻪ ﮐﺮد‪ .‬ﻣﺮورﮔﺮﻫـﺎ ﻧﻤـﯽﺧﻮاﻫﻨـﺪ ﮐـﻪ اول ﺻـﻔﺤﻪ را ﺑـﻪ ﮐـﺎرﺑﺮ‬ ‫ﻧﻤﺎﯾﺶ دﻫﻨﺪ و ﺳﭙﺲ ﺑﻌﺪ از درﯾﺎﻓﺖ ﻓﺎﯾﻞ ﺟﺎوا اﺳـﮑﺮﯾﭙﺖ و اﺟـﺮاي آن‪ ،‬اﺟﺰاﯾـﯽ را ﺑـﻪ ﺻـﻔﺤﻪ اﺿـﺎﻓﻪ ﮐﻨﻨـﺪ ﺑﻠﮑـﻪ‬ ‫ﻣﯽﺧﻮاﻫﻨﺪ ﺻﻔﺤﻪ ﻧﻬﺎﯾﯽ را ) ﺑﻌﺪ از اﺿﺎﻓﻪ ﺷﺪن اﺟﺰا ﺟﺪﯾﺪ ﺗﻮﺳﻂ ﺟﺎوا اﺳﮑﺮﯾﭙﺖ( ﺑﻪ ﮐﺎرﺑﺮ ﻧﻤﺎﯾﺶ دﻫﻨﺪ از اﯾـﻦرو‬

‫‪www.ParsBook.org‬‬

‫‪۵٢‬‬

‫ﺻﺒﺮ ﻣﯽﮐﻨﻨﺪ ﺗﺎ ﻓﺎﯾﻞ ﺟﺎوا اﺳﮑﺮﯾﭙﺖ ﺑﻪ ﻃﻮر ﮐﺎﻣﻞ درﯾﺎﻓـﺖ ﺷـﺪه و اﺟـﺮا ﺷـﻮد و ﺳـﭙﺲ آن را ﺑـﻪ ﮐـﺎرﺑﺮ ﻧﻤـﺎﯾﺶ‬ ‫ﻣﯽدﻫﻨﺪ‪ .‬ﻣﻮرد دﯾﮕﺮ اﯾﻦ اﺳﺖ ﮐﻪ اﻣﮑﺎن دارد ﺷﻤﺎ ﺑﯿﺶ از ﯾﮏ ﻓﺎﯾﻞ ﺟﺎوا اﺳﮑﺮﯾﭙﺖ در ﺻﻔﺤﻪ داﺷـﺘﻪ ﺑﺎﺷـﯿﺪ و اﯾـﻦ‬ ‫ﻓﺎﯾﻞﻫﺎ ﻧﯿﺰ ﺑﻪ ﻫﻢ واﺑﺴﺘﮕﯽﻫﺎﯾﯽ داﺷﺘﻪ ﺑﺎﺷﻨﺪ‪ .‬ﻣﺮورﮔﺮﻫﺎ ﻣﯽﺧﻮاﻫﻨﺪ ﮐﻪ ﻓﺎﯾﻞﻫﺎ را ﺑﻪ ﺗﺮﺗﯿﺐ درﯾﺎﻓﺖ و اﺟﺮا ﮐﻨﻨﺪ ﮐﻪ‬ ‫اﺣﯿﺎﻧﺎً ﺑﻪ ﺧﺎﻃﺮ اﯾﻦ واﺑﺴﺘﮕﯽ ﻓﺎﯾﻞﻫﺎ ﺑﻪ ﻫﻢ ﺑﺎ ﭘﯿﻐﺎم ﺧﻄﺎﯾﯽ ﻣﻮاﺟﻪ ﻧﺸﻮﻧﺪ‪.‬‬ ‫ﺑﻪ اﯾﻦ ﺗﺼﻮﯾﺮ دﻗﺖ ﮐﻨﯿﺪ‪:‬‬

‫در اﯾﻦ ﺗﺼﻮﯾﺮ ﻣﺸﺨﺺ اﺳﺖ ﮐﻪ ﻓﺎﯾﻞ ﺟﺎوا اﺳﮑﺮﯾﭙﺖ ﻣﺎﻧﻊ درﯾﺎﻓﺖ دﯾﮕﺮ ﻓﺎﯾﻞ ﻫﺎ ي ﺻﻔﺤﻪ ﻣﯽ ﺷﻮد‬ ‫) ﺣﺘﯽ اﮔﺮ ﺷﻤﺎ ﺑﯿﺶ از ﯾﮏ ‪ server‬داﺷﺘﻪ ﺑﺎﺷﯿﺪ (‪.‬‬ ‫اﻟﺒﺘﻪ ﮔﺎﻫﯽ اوﻗﺎت اﻧﺘﻘﺎل ﻓﺎﯾﻞ ﺟﺎوا اﺳﮑﺮﯾﭙﺖ ﺑﻪ زﯾﺮ ﺻﻔﺤﻪ وﺟﻮد ﻧـﺪارد‪ .‬در اﯾـﻦ زﻣـﺎن ﻣـﯽﺗﻮاﻧـﺪ از ﺧﺼﻮﺻـﯿﺖ‬ ‫‪ defer‬در ﺑﺮﭼﺴﺐ >‪ <script‬اﺳﺘﻔﺎده ﮐﺮد‪:‬‬ ‫>‪<script defer src='A.js'></script‬‬ ‫در اﯾﻦ ﺣﺎﻟﺖ ﺷﻤﺎ ﺑﻪ ﻣﺮورﮔﺮ ﻣﯽﮔﻮﺋﯿﺪ ﮐﻪ ﻓﺎﯾﻞ ﺟﺎوا اﺳﮑﺮﯾﭙﺖ ﺷﻤﺎ ﺣـﺎوي دﺳـﺘﻮر ‪ document.write‬ﻧﯿﺴـﺖ از‬ ‫اﯾﻦ رو ﻣﺮورﮔﺮ ﻣﯽ ﺗﻮاﻧﺪ در زﻣﺎن درﯾﺎﻓﺖ ﻓﺎﯾﻞ ﺟﺎوا اﺳﮑﺮﯾﭙﺖ دﯾﮕـﺮ ﻓﺎﯾـﻞﻫـﺎ را ﺑـﻪ ﺷـﮑﻞ ﻫﻤﺰﻣـﺎن درﯾﺎﻓـﺖ ﮐﻨـﺪ‪.‬‬ ‫ﻣﺘﺎﺳﻔﺎﻧﻪ اﯾﻦ ﻗﺎﺑﻠﯿﺖ در ﻣﺮورﮔﺮ ﻓﺎﯾﺮﻓﺎﮐﺲ ﭘﺸﺘﯿﺒﺎﻧﯽ ﻧﻤﯽﺷﻮد و ﺣﺘﯽ ﺑـﺎ ﺣﻀـﻮر اﯾـﻦ دﺳـﺘﻮر ﺑـﺎز ﻫـﻢ ﺗـﺎ زﻣـﺎن‬ ‫درﯾﺎﻓﺖ ﻓﺎﯾﻞ اﺳﮑﺮﯾﭙﺖ‪ ،‬ﻫﯿﭻ ﻓﺎﯾﻞ دﯾﮕﺮي درﯾﺎﻓﺖ ﻧﻤﯽﺷﻮد‪.‬‬ ‫! ﻓﺎﯾﻞﻫﺎي اﺳﮑﺮﯾﭙﺖ ﺧﻮد را در زﯾﺮ ﺻﻔﺤﻪ ﻗﺮار دﻫﯿﺪ‪.‬‬

‫‪ -7‬از ‪ CSS Expression‬ﻫﺎ اﺳﺘﻔﺎده ﻧﮑﻨﯿﺪ‪.‬‬ ‫‪ CSS Expression‬ﻫﺎ ﺧﺼﻮﺻﯿﺎت ﻗﺪرﺗﻤﻨﺪ )در ﻋﯿﻦ ﺣﺎل ﻣﻀﺮ ﺑﺮاي ﺳﺮﻋﺖ ﺻﻔﺤﺎت( اﻧﺪ ﮐﻪ ﺗﻮﺳﻂ ﻣﺎﯾﮑﺮوﺳﺎﻓﺖ‬ ‫ﺗﻮﺳﻌﻪ داده ﺷﺪﻧﺪ و اﯾﻨﺘﺮﻧﺖ اﮐﺴﭙﻠﻮرر ‪ 5‬و ﻧﺴﺨﻪﻫﺎي ﺑﻌﺪ از آن از اﯾـﻦ وﯾﮋﮔـﯽ ﭘﺸـﺘﯿﺒﺎﻧﯽ ﻣـﯽﮐﻨﻨـﺪ‪ .‬ﻓـﺮض ﮐﻨﯿـﺪ‬ ‫ﻣﯽ ﺧﻮاﻫﯿﻢ ﺑﺮاي ﻋﻨﺼﺮي در ﺻﻔﺤﻪ رﻧﮓ ﭘﺲ زﻣﯿﻨﻪ در ﻧﻈﺮ ﺑﮕﯿﺮﯾﻢ‪:‬‬

‫‪www.ParsBook.org‬‬

‫‪۵٣‬‬

‫;‪background-color: #B8D4FF‬‬ ‫ﺑﺮاي ﺻﻔﺤﺎﺗﯽ ﮐﻪ ﺑﻪ ﺷﮑﻞ داﯾﻨﺎﻣﯿﮏ ﻃﺮاﺣﯽ ﺷﺪهاﻧﺪ‪ ،‬ﮔﺎﻫﯽ اوﻗﺎت ﺷﺎﯾﺪ ﻻزم ﺑﺎﺷﺪ ﮐﻪ رﻧـﮓ ﭘـﺲ زﻣﯿﻨـﻪ ﺑﻌﻀـﯽ از‬ ‫ﺑﺨﺶﻫﺎ ﻫﺮ ﯾﮏ ﺳﺎﻋﺖ ﯾﮑﺒﺎر ﺗﻐﯿﯿﺮ ﮐﻨﺪ‪.‬‬ ‫;) "‪background-color: expression( (new Date()).getHours( )%2 ? "#B8D4FF" : "#F08A00‬‬ ‫ﻫﻤﺎﻧﻄﻮر ﮐﻪ ﻣﯽﺑﯿﻨﯿﺪ‪ ،‬ﻣﺎ از ‪ expression‬ﻫﺎي ﺟﺎوا اﺳﮑﺮﯾﭙﺖ در اﯾﻨﺠـﺎ اﺳـﺘﻔﺎده ﮐـﺮدﯾﻢ‪ .‬در اﺻـﻞ ﺑـﺎ اﺳـﺘﻔﺎده از‬ ‫دﺳﺘﻮرات ﺟﺎوا اﺳﮑﺮﯾﭙﺖ ﻣﯽﺗﻮان رﻧﮓ ﻋﻨﺎﺻﺮ را در داﺧﻞ ﻓﺎﯾﻞ ‪ CSS‬ﺗﻐﯿﯿﺮ داد‪.‬‬ ‫اﯾﻦ ﺧﺼﻮﺻﯿﺎت ﺗﻮﺳﻂ ﻣﺮورﮔﺮﻫﺎي دﯾﮕﺮ ﻧﺎدﯾﺪه ﮔﺮﻓﺘﻪ ﻣﯽﺷﻮﻧﺪ و ﺗﻨﻬـﺎ در اﯾﻨﺘﺮﻧـﺖ اﮐﺴـﭙﻠﻮرر ﮐـﺎرﺑﺮد‬ ‫دارﻧﺪ‪ .‬ﺑﺎ اﺳﺘﻔﺎده از اﯾﻦ ﻗﺎﺑﻠﯿﺖ ﻣﯽﺗﻮان ﺑﺮﺧﯽ از ﮐﺎﺳﺘﯽﻫﺎي ﻧﺴﺨﻪﻫﺎي ﻣﺨﺘﻠﻒ ‪ IE‬را ﭘﻮﺷﺶ داد‪ .‬ﺑـﻪ ﻋﻨـﻮان ﻣﺜـﺎل‬ ‫ﻧﺴﺨﻪﻫﺎي ﻗﺪﯾﻤﯽ ﻣﺮورﮔﺮ ‪ IE‬از دﺳﺘﻮر ‪ min-height‬ﭘﺸﺘﯿﺒﺎﻧﯽ ﻧﻤﯽﮐﻨﻨﺪ‪ .‬ﺗﻨﻬﺎ ﺑﺎ اﺳﺘﻔﺎده از ‪ CSS expression‬ﻫـﺎ‬ ‫ﻣﯽﺗﻮان اﯾﻦ ﻧﻘﻄﻪ ﺿﻌﻒ را ﭘﻮﺷﺶ داد‪ .‬ﺣﺎل در ﻣﺜﺎل ﺑﻌﺪي ﺑﺎ اﺳﺘﻔﺎده از اﯾـﻦ ﻗﺎﺑﻠﯿـﺖ‪ ،‬اﯾـﻦ ﻣﺸـﮑﻞ ﻣﺮورﮔـﺮ ‪ IE‬را‬ ‫ﺑﺮﻃﺮف ﻣﯽﮐﻨﯿﻢ‪:‬‬ ‫;) "‪width: expression( document.body.clientWidth < 600 ? "600px" : "auto‬‬ ‫;‪min-width: 600px‬‬ ‫اﮐﺜﺮ ﻣﺮورﮔﺮﻫﺎ ﺧﻂ اول دﺳﺘﻮر را ﻧﺎدﯾﺪه ﻣـﯽﮔﯿﺮﻧـﺪ زﯾـﺮا از ‪ CSS Expression‬ﭘﺸـﺘﯿﺒﺎﻧﯽ‬ ‫ﻧﻤﯽﮐﻨﻨﺪ و ﺗﻨﻬﺎ دﺳﺘﻮر ﺧﻂ دوم را اﺳﺘﻔﺎده ﻣﯽﮐﻨﻨﺪ وﻟﯽ ﻣﺮورﮔﺮ ‪ IE‬ﺧـﻂ اول را ﭘـﺮدازش ﮐـﺮده و از آن اﺳـﺘﻔﺎده‬ ‫ﻣﯽﮐﻨﺪ در ﺣﺎﻟﯽ ﮐﻪ ﺑﻪ ﺧﺎﻃﺮ ﻋﺪم ﭘﺸﺘﯿﺒﺎﻧﯽ از دﺳﺘﻮر ‪ ،min-height‬ﺧﻂ دوم را ﻧﺎدﯾﺪه ﻣﯽﮔﯿﺮد‪.‬‬ ‫‪ CSS Expression‬ﻫﺎ ﺑﺎ ﻫﺮ ﺗﻐﯿﯿﺮي در ﺻﻔﺤﻪ‪،‬از ﻧﻮ ارزﯾﺎﺑﯽ ﻣـﯽﺷـﻮﻧﺪ‪ .‬ﺑـﻪ ﻋﻨـﻮان ﻣﺜـﺎل ﺑـﺎ ﺗﻐﯿﯿـﺮ ﺳـﺎﯾﺰ ﭘﻨﺠـﺮه‬ ‫ﻣﺮورﮔﺮ‪ ،‬اﯾﻦ ‪ expression‬از ﻧﻮ ارزﯾﺎﺑﯽ ﻣﯽﺷﻮد ﺗﺎ اﻃﻤﯿﻨﺎن ﺣﺎﺻﻞ ﺷﻮد ﮐﻪ ﺻﻔﺤﻪ ﺑﻪ درﺳﺘﯽ ﻧﻤﺎﯾﺶ داده ﺧﻮاﻫﺪ‬ ‫ﺷﺪ‪ .‬ﺗﻌﺪاد دﻓﻌﺎت اﺟﺮاي ‪ expression‬ﻫﺎﺳﺖ ﮐﻪ ﺑﺎﻋﺚ ﻣﯽﺷﻮد ﺻﻔﺤﻪ ﺑﻪ درﺳﺘﯽ ﻧﻤﺎﯾﺶ داده ﺷﻮد وﻟﯽ از ﻃﺮﻓـﯽ‬ ‫ﺑﻪ ﻋﻠﺖ ﺗﮑﺮار ﺑﯿﺶ از ﺣﺪ اﯾﻦ دﺳﺘﻮرات‪ ،‬ﺻﻔﺤﻪ ﺷﻤﺎ ﺑﻪ ﺷﺪت ﮐﻨﺪ ﺧﻮاﻫﺪ ﺷﺪ و اﯾﻦ ﻣﻮرد ﺑﺮاي ﺳﺎﯾﺖ ﺑﺴﯿﺎر ﻣﻀﺮ‬ ‫اﺳﺖ‪.‬‬ ‫ارزﯾﺎﺑﯽ ‪ expression‬ﻫﺎ‬ ‫ﺗﻌﺪاد دﻓﻌﺎﺗﯽ ﮐﻪ ﯾﮏ دﺳﺘﻮر ‪ expression‬ﻣﺤﺎﺳﺒﻪ و ارزﯾﺎﺑﯽ ﻣﯽﺷﻮد ﮔﺎه اﯾﻦﻗـﺪر زﯾـﺎد اﺳـﺖ ﮐـﻪ ﺣﺘـﯽ‬ ‫ﺗﺼﻮرش را ﻫﻢ ﻧﻤﯽﮐﻨﯿﻢ‪ .‬اﯾﻦ دﺳﺘﻮرات ﻧﻪ ﺗﻨﻬﺎ ﺑﻌﺪ از ﺗﻐﯿﯿﺮ ﺳﺎﯾﺰ ﭘﻨﺠـﺮه ﻣﺮورﮔـﺮ ﺑﻠﮑـﻪ در ﻫﻨﮕـﺎم ‪ scroll‬ﮐـﺮدن‬ ‫ﺻﻔﺤﻪ و ﺣﺘﯽ ﺟﺎ ﺑﻪ ﺟﺎ ﮐﺮدن ﻣﮑﺎنﻧﻤﺎي ﻣﺎوس ﺷﻤﺎ ﻧﯿﺰ اﺟﺮا ﻣﯽﺷـﻮﻧﺪ‪ .‬ﺑـﺎ اﺿـﺎﻓﻪ ﮐـﺮدن ﯾـﮏ ﺷـﻤﺎرﻧﺪه ﺑـﺎ اﯾـﻦ‬ ‫‪ expression‬ﻫﺎ ﻣﯽﺗﻮان از ﺗﻌﺪاد دﻓﻌﺎت اﺟﺮا ﺷﺪن آﻧﻬﺎ ﺑﺎ ﺧﺒﺮ ﺷﺪ‪:‬‬ ‫{‪P‬‬ ‫;) "‪width: expression( setCntr( ), document.body.clientWidth<600 ? "600px" : "auto‬‬

‫‪www.ParsBook.org‬‬

‫‪۵۴‬‬

‫;‪min-width: 600px‬‬ ‫;‪border: 1px solid‬‬ ‫}‬ ‫در ﺻﻔﺤﻪ اي ﮐﻪ ﺗﻨﻬﺎ ‪ 10‬ﭘﺎراﮔﺮاف ﺑﻮد‪ ،‬اﯾﻦ ﮐﺪ ﺑﯿﺶ از ‪ 40‬ﺑﺎر اﺟﺮا ﺷﺪ‪ .‬ﺑﺎ ‪ scroll‬ﮐﺮدن ﺻﻔﺤﻪ و ﺟﺎ ﺑﻪ ﺟﺎ ﮐـﺮدن‬ ‫ﻣﮑﺎن ﻧﻤﺎي ﻣﺎوس ﺗﻌﺪاد اﺟﺮا ﺷﺪن اﯾﻦ ‪ expression‬ﺑﻪ ‪ 10000‬ﺑﺎر رﺳﯿﺪ‪ .‬در اﯾﻦ ﺣﺎﻟﺖ ﺑﺮ روي ﯾﮏ ﻓﯿﻠﺪ ﻣﺘﻨﯽ ﻧﯿـﺰ‬ ‫ﮐﻠﯿﮏ ﮐﺮدﯾﻢ ﮐﻪ اﯾﻨﮑﺎرﻣﺎن ﺑﺎﻋﺚ ﺷﺪ ﮐﻪ اﯾﻨﺘﺮﻧﺖ اﮐﺴﭙﻠﻮرر ﮐﺎﻣﻼ از ﮐﺎر ﺑﯿﺎﻓﺘﺪ‪.‬‬

‫راه ﺣﻞ ﻣﻘﺎﺑﻠﻪ ﺑﺎ اﯾﻦ ﻣﺸﮑﻞ‬ ‫ﺑﺮاي ﺣﻞ اﯾﻦ ﻣﺸﮑﻞ ﻣﯽﺗﻮان ‪ CSS expression‬ﻫﺎ را ﻃﻮري ﻧﻮﺷﺖ ﮐﻪ ﺗﻨﻬﺎ ﯾﮏﺑﺎر اﺟﺮا ﺷﻮﻧﺪ‪ .‬در اﯾﻨﺠـﺎ ﻣـﯽﺗـﻮان‬ ‫ﺟﺎوا اﺳﮑﺮﯾﭙﺖ و ‪ event handler‬ﻫﺎ اﺳﺘﻔﺎده ﮐﺮد ﺗﺎ اﯾﻦ ﮐﺪ ﺗﻨﻬﺎ ﯾﮏﺑﺎر اﺟﺮا ﺷﻮد‪.‬‬ ‫‪Expression‬ﻫﺎﯾﯽ ﮐﻪ ﺗﻨﻬﺎ ﯾﮑﺒﺎر اﺟﺮا ﻣﯽﺷﻮﻧﺪ‬ ‫اﮔﺮ ﻻزم ﺑﺎﺷﺪ ﮐﻪ ﯾﮏ ‪ CSS expression‬ﺗﻨﻬـﺎ ﯾـﮏﺑـﺎر اﺟـﺮا ﺷـﻮد‪ ،‬ﻣـﯽﺗﻮاﻧـﺪ ﺧـﻮدش را در ﻃـﻮل اﺟـﺮا ﺷـﺪﻧﺶ‪،‬‬ ‫ﺑﺎزﻧﻮﯾﺴﯽ ﮐﻨﺪ‪ .‬ﺗﻐﯿﯿﺮ رﻧﮓ ﭘﺲ زﻣﯿﻨﻪ ﮐﻪ در اول اﯾﻦ ﺑﺨﺶ ﺗﻮﺿﯿﺢ داده ﺷﺪه ﻣﺜﺎل ﺧﻮﺑﯽ اﺳﺖ‪:‬‬ ‫>‪<style‬‬ ‫{‪P‬‬ ‫;) )‪background-color: expression( altBgcolor(this‬‬ ‫}‬ ‫>‪</style‬‬ ‫>"‪<script type="text/javascript‬‬ ‫{ )‪function altBgcolor(elem‬‬ ‫;"‪elem.style.backgroundColor = (new Date()).getHours( )%2 ? "#F08A00" : "#B8D4FF‬‬ ‫}‬ ‫>‪</script‬‬ ‫در اﯾﻦ ﻣﺜﺎل ‪ CSS Expression‬ﺗﺎﺑﻊ )(‪ altBgcolor‬را ﻓﺮاﺧﻮاﻧﯽ ﻣﯽﮐﻨﺪ و رﻧﮓ ﭘﺲ زﻣﯿﻨﻪ را ﻣﺸﺨﺺ ﮐﺮده و ﺟﺎي‬ ‫‪ CSS expression‬ﻗﺮار ﻣﯽﮔﯿﺮد‪ .‬ﻣﺎ ﺑﺎ اﺳﺘﻔﺎده از اﯾﻦ ‪ expression‬رﻧﮓ ﭘﺲ زﻣﯿﻨﻪ ‪ 10‬ﭘﺎراﮔﺮاف را ﻣﺸﺨﺺ‬ ‫ﮐﺮدهاﯾﻢ‪ .‬ﺣﺎل اﮔﺮ ﭘﻨﺠﺮه ﻣﺮورﮔﺮ را ﺑﺰرگ و ﮐﻮﭼﮏ ﮐﻨﯿﻢ دﯾﮕﺮ اﯾﻦ ﮐﺪ اﺟﺮا ﻧﺨﻮاﻫﺪ ﺷﺪ و ﺗﻨﻬﺎ ﻫﻤﺎن ‪ 10‬ﺑﺎراول‪،‬‬ ‫ﻓﺮاﺧﻮاﻧﯽ ﺷﺪه و دﯾﮕﺮ اﺟﺮا ﻧﺨﻮاﻫﺪ ﺷﺪ‪.‬‬ ‫اﺳﺘﻔﺎده از ‪ event handler‬ﻫﺎ‬ ‫در ﺑﺴﯿﺎري از ﻣﻮﻗﻌﯿﺖﻫﺎ دﯾﺪهام ﮐﻪ ﻣﯽﺗـﻮان ﺑـﻪ ﺟـﺎي اﺳـﺘﻔﺎده از ‪ CSS expression‬ﻫـﺎ از ﺷـﯿﻮهﻫـﺎي‬ ‫ﺟﺎﯾﮕﺰﯾﻦ اﺳﺘﻔﺎده ﮐﺮد‪ .‬ﺗﻨﻬﺎ ﻧﮑﺘﻪ ﻣﺜﺒﺖ ‪ CSS expression‬ﻫﺎ اﯾﻦ اﺳﺖ ﮐﻪ ﺑﻪ ﻃﻮر اﺗﻮﻣﺎﺗﯿﮏ ﺑﻪ ‪ event‬ﻫﺎي ﻣﺮورﮔﺮ‬

‫‪www.ParsBook.org‬‬

‫‪۵۵‬‬

‫ﻣﺘﺼﻞ ﻣﯽ ﺷﻮﻧﺪ ﮐﻪ اﻟﺒﺘﻪ اﯾﻦ اﻣﺮ ﻧﯿﺰ ﺧﻮدش ﺑﺎﻋﺚ ﺑﺮوز ﻣﺸﮑﻞ و ﮐﻨﺪ ﺷﺪن ﺻﻔﺤﻪ ﻣﯽﺷﻮد‪ .‬ﺑﻬﺘﺮ اﺳﺖ ﮐﻪ ﻃﺮاح ﯾـﺎ‬ ‫ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺲ زﺣﻤﺖ ﺑﯿﺸﺘﺮي ﺑﻪ ﺧﻮد ﺑﺪﻫﺪ و رﻓﺘـﺎر ﻣـﻮرد ﻧﻈـﺮ ﺧـﻮد را ﺑـﺎ اﺳـﺘﻔﺎده از ‪ event handler‬ﻫـﺎ ﺑـﻪ‬ ‫‪ event‬ﻣﻮرد ﻧﻈﺮ ﻣﺘﺼﻞ ﮐﻨﺪ‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﺑﺮاي ﺗﻐﯿﯿﺮ ﺳﺎﯾﺰ ﭘﺎراﮔﺮافﻫﺎ ﺑﺮ اﺳﺎس ﺗﻐﯿﯿﺮ ﺳﺎﯾﺰ ﺻﻔﺤﻪ ﻣﯽﺗـﻮان‬ ‫اﯾﻦ ﮐﺪ را ﻧﻮﺷﺖ ‪:‬‬ ‫{ ) (‪function setMinWidth‬‬ ‫;) (‪setCntr‬‬ ‫;)"‪var aElements = document.getElementsByTagName("p‬‬ ‫{ ) ‪for ( var i = 0; i < aElements.length; i++‬‬ ‫‪aElements[i].runtimeStyle.width = ( document.body.clientWidth<600 ? "600px" :‬‬ ‫;) "‪"auto‬‬ ‫}‬ ‫}‬ ‫{ ) )"‪if ( -1 != navigator.userAgent.indexOf("MSIE‬‬ ‫;‪window.onresize = setMinWidth‬‬ ‫}‬ ‫در اﯾﻨﺠﺎ ﺗﺎﺑﻊ )(‪ setMinWidth‬ﻣﺴﺌﻮﻟﯿﺖ ﺗﻌﯿﯿﻦ ﺳﺎﯾﺰ ﭘﺎراﮔﺮافﻫﺎ را در ﺣﯿﻦ ﺗﻐﯿﯿﺮ ﺳﺎﯾﺰ ﭘﻨﺠﺮه ﺑـﻪ ﻋﻬـﺪه دارد و‬ ‫اﯾﻦ دﺳﺘﻮرات ﻧﯿﺰ ﺗﻨﻬﺎ و ﺗﻨﻬﺎ زﻣﺎﻧﯽ ﮐﻪ ﺳﺎﯾﺰ ﭘﻨﺠﺮه ﻣﺮورﮔﺮ ﺗﻐﯿﯿﺮ ﮐﻨﺪ اﺟﺮا ﺧﻮاﻫﺪ ﺷﺪ و ﻣﺎﻧﻨـﺪ ‪CSS expression‬‬ ‫ﺑﺎ ‪ event‬ﻫﺎﯾﯽ ﻫﻤﭽﻮن ‪ scroll‬ﮐﺮدن و ﯾﺎ ‪ refresh‬ﺻﻔﺤﻪ اﺟﺮا ﻧﻤﯽﺷﻮﻧﺪ‪.‬‬ ‫در ﻧﻬﺎﯾﺖ ﺑﻬﺘﺮ اﺳﺖ از ‪ CSS Expression‬ﻫﺎ اﺳـﺘﻔﺎده ﻧﮑﻨﯿـﺪ‪ .‬در آزﻣﺎﯾﺸـﺎت ﻣﺸـﺨﺺ ﺷـﺪ ﮐـﻪ در ﺑﻌﻀـﯽ ﻣﻮاﻗـﻊ‬ ‫اﺳﺘﻔﺎده از اﯾﻦ ‪ expression‬ﻫﺎ زﻣﺎن ﺑﺎرﮔﺬاري ﺻﻔﺤﻪ را ﺑﺮاي ﮐﺎرﺑﺮ ﮔﺎﻫﺎ ﺗﺎ ‪ 20‬ﺛﺎﻧﯿﻪ اﻓﺰاﯾﺶ ﻣﯽدﻫﻨـﺪ‪ .‬ﺗـﺎ ﺟـﺎﯾﯽ‬ ‫ﮐﻪ اﻣﮑﺎن دارد از اﯾﻦ دﺳﺘﻮرات اﺳﺘﻔﺎده ﻧﮑﻨﯿﺪ‪.‬‬ ‫! از ‪ CSS Expression‬ﻫﺎ اﺳﺘﻔﺎده ﻧﮑﻨﯿﺪ‪.‬‬

‫‪ -8‬ﻓﺎﯾﻞﻫﺎي ‪ CSS‬و ‪ JavaScript‬ﺧﻮد را در ﻓﺎﯾﻞﻫﺎي ‪ external‬ﻗﺮار دﻫﯿﺪ‪.‬‬ ‫ﺣﺘﻤﺎ از ﺧﻮد ﺳﻮال ﮐﺮده اﯾﺪ ﮐﻪ اﺳﺘﻔﺎده از دﺳﺘﻮرات ‪ CSS‬و ﺟﺎوا اﺳﮑﺮﯾﭙﺖ ﺑـﻪ ﺷـﮑﻞ ‪ inline‬ﺳـﺮﯾﻊ ﺗـﺮ‬ ‫اﺳﺖ ﯾﺎ اﺳﺘﻔﺎده از دﺳﺘﻮرات در ﯾﮏ ﻓﺎﯾﻞ ‪ .external‬ﻓﺮض ﮐﻨﯿﺪ ﻣﺎ ﺻﻔﺤﻪ اي دارﯾﻢ ﮐﻪ ﺣﺠﻤﯽﻣﻌﺎدل ‪ 90‬ﮐﯿﻠﻮﺑﺎﯾﺖ‬ ‫دارد و ﺗﻤﺎﻣﯽدﺳﺘﻮرات ‪ CSS‬و ﺟﺎوا اﺳﮑﺮﯾﭙﺖ آن ﺑﻪ ﺷﮑﻞ ‪ inline‬ﻧﻮﺷﺘﻪ ﺷﺪه اﺳﺖ‪ .‬ﺣﺎل ﺻﻔﺤﻪ دﯾﮕﺮي دارﯾﻢ ﮐـﻪ‬ ‫ﺣﺠﻢ ﺻﻔﺤﻪ آن ﻧﯿﺰ ‪ 90‬ﮐﯿﻠﻮﺑﺎﯾﺖ اﺳﺖ وﻟﯽ ‪ 35‬ﮐﯿﻠﻮﺑﺎﯾﺖ از اﯾﻦ ﺣﺠﻢ ﻣﺮﺑﻮط ﺑﻪ ﻓﺎﯾﻞ ‪ CSS‬و ‪ 40‬ﮐﯿﻠﻮﺑﺎﯾـﺖ آن ﻧﯿـﺰ‬ ‫ﻣﺮﺑﻮط ﺑﻪ دو ﻓﺎﯾﻞ ﺟﺎوا اﺳﮑﺮﯾﭙﺖ اﺳﺖ‪ .‬در اﯾﻦ ﺣﺎﻟﺖ ﺣﺠﻢ ﻫﺮ دو ﺻﻔﺤﻪ ﯾﮑﺴﺎن اﺳﺖ وﻟﯽ در زﻣﺎن ﺑﺎرﮔﺬاري آن‬ ‫ﺻﻔﺤﻪاي ﮐﻪ دﺳﺘﻮرات را ﺑﻪ ﺷﮑﻞ ‪ inline‬ﺑﻪ ﮐﺎر ﺑﺮده ﺑﯿﻦ ‪ 30‬ﺗﺎ ‪ 50‬درﺻﺪ ﺳﺮﯾﻊﺗﺮ ﺑﺎرﮔﺬاري ﻣﯽﺷﻮد‪ .‬دﻟﯿـﻞ اﯾـﻦ‬

‫‪www.ParsBook.org‬‬

‫‪۵۶‬‬

‫اﺧﺘﻼف اﯾﻦ اﺳﺖ ﮐﻪ در ﺣﺎﻟﺖ اول ﺗﻨﻬﺎ ﯾﮏ درﺧﻮاﺳﺖ ‪ HTTP‬ارﺳـﺎل ﻣـﯽﺷـﻮد وﻟـﯽ در ﺣﺎﻟـﺖ دوم ‪ 4‬درﺧﻮاﺳـﺖ‬ ‫ارﺳﺎل ﻣﯽ ﺷﻮد و اﯾﻦ ﺗﻔﺎوت ﺑﻪ ﺧﺎﻃﺮ اﺗﻼف وﻗﺘﯽ اﺳﺖ ﮐﻪ ﺑﺮاي ارﺳﺎل ﻫﺮ درﺧﻮاﺳﺖ ‪ HTTP‬اﯾﺠﺎد ﻣﯽﺷـﻮد‪ .‬اﮔـﺮ‬ ‫ﭼﻪ ﻓﺎﯾﻞﻫﺎ ﻣﯽ ﺗﻮاﻧﻨﺪ ﺑﻪ ﺷﮑﻞ ﻫﻤﺰﻣﺎن درﯾﺎﻓﺖ ﺷﻮﻧﺪ وﻟﯽ ﺑﺎز ﻫﻢ زﻣﺎن ﻫﺪر رﻓﺘﻪ در زﻣﺎن درﺧﻮاﺳﺖ ‪ ، HTTP‬ﺑﺎﻋﺚ‬ ‫ﮐﻨﺪ ﺷﺪن ﺑﺎرﮔﺬاري ﺻﻔﺤﻪ ﻣﯽﺷﻮد‪.‬‬ ‫اﺣﺘﻤﺎﻻ ﻓﮑﺮ ﻣﯽﮐﻨﯿﺪ ﮐﻪ اﺳﺘﻔﺎده از دﺳﺘﻮرات ﺑﻪ ﺷﮑﻞ ‪ inline‬ﺑﻬﺘﺮ اﺳﺖ وﻟﯽ ﻧﮑﺘﻪاي را ﻓﺮاﻣﻮش ﮐﺮده اﯾﺪ‪ .‬ﮐـﺎرﺑﺮان‬ ‫ﺳﺎﯾﺖﻫﺎ اﻏﻠﺐ ﺑﯿﺶ از ﯾﮏ ﺻﻔﺤﻪ از ﺳﺎﯾﺖ را در ﻫﺮ ﻧﻮﺑﺖ ﻣﯽﺑﯿﻨﻨﺪ‪ .‬ﺑﻌﺪ از اوﻟﯿﻦ ﺑﺎزدﯾﺪ از ﺳﺎﯾﺖ ﺗﻤﺎﻣﯽ ﻓﺎﯾـﻞﻫـﺎي‬ ‫‪ CSS‬و ‪ JavaScript‬ﺑﺮ روي ﻣﺮورﮔﺮ ﮐﺎرﺑﺮ ‪ cache‬ﻣﯽﺷﻮد و در ﻣﺮاﺟﻌﺎت ﺑﻌﺪي اﯾـﻦ ﻓﺎﯾـﻞﻫـﺎ دوﺑـﺎره درﯾﺎﻓـﺖ‬ ‫ﻧﻤﯽﺷﻮﻧﺪ و دﯾﮕﺮ ﻫﯿﭻ درﺧﻮاﺳﺖ ‪ HTTP‬اي ﺑﺮاي درﯾﺎﻓﺖ اﯾﻦ ﻓﺎﯾﻞﻫﺎ ارﺳﺎل ﻧﺨﻮاﻫﺪ ﺷﺪ‪.‬‬ ‫ﺗﻌﺪاد ﺑﺎزدﯾﺪﻫﺎ‪ cache ،‬ﺧﺎﻟﯽ و ‪ cache‬ﭘﺮ‬ ‫ﺑﺮاي اﺳﺘﻔﺎده درﺳﺖ دﺳﺘﻮرات ﺑﺎﯾﺪ در ﻧﻈﺮ ﺑﮕﯿﺮﯾﺪ ﮐﻪ ﮐﺪام ﺣﺎﻟﺖ ﺑﺮاي ﺳﺎﯾﺖ ﺷﻤﺎ ﻣﻨﺎﺳﺐﺗﺮ اﺳـﺖ‪ .‬اﮔـﺮ‬ ‫ﺳﺎﯾﺘﯽ دارﯾﺪ ﮐﻪ ﺗﻌﺪاد ﺑﺎزدﯾﺪﻫﺎي ﻣﺤﺪودي در ﻣﺎه دارد و ﮐﺎرﺑﺮان ﺗﻨﻬﺎ دﻓﻌﺎت ﻣﺤﺪودي در ﻣﺎه ﺑﻪ آن ﺳـﺮ ﻣﯿﺰﻧﻨـﺪ‬ ‫ﺑﻬﺘﺮ اﺳﺖ ﮐﻪ از دﺳﺘﻮرات ‪ inline‬اﺳﺘﻔﺎده ﮐﻨﯿﺪ وﻟﯽ اﮔﺮ ﮐﺎرﺑﺮاﻧﯽ دارﯾﺪ ﮐﻪ ﺑﻪ دﻓﻌﺎت در ﻃﻮل ﻣﺎه ﺑـﻪ ﺳـﺎﯾﺖ ﺷـﻤﺎ‬ ‫ﻣﺮاﺟﻌﻪ ﻣﯽﮐﻨﻨﺪ ﺑﻬﺘﺮ اﺳﺖ ﮐﻪ دﺳﺘﻮرات ﺑﻪ ﺷـﮑﻞ ‪ external‬و در ﻓﺎﯾـﻞ ﺟﺪاﮔﺎﻧـﻪ ﻗـﺮار ﮔﯿﺮﻧـﺪ‪ .‬در اﯾـﻦ ﺣﺎﻟـﺖ اﯾـﻦ‬ ‫دﺳﺘﻮرات در ‪ cache‬ﻣﺮورﮔﺮ ﻗﺮار ﻣﯽﮔﯿﺮﻧﺪ و از آﻧﺠﺎﺋﯽﮐﻪ ﻓﺎﺻﻠﻪ ﻣﺮاﺟﻌﺎت ﮐﻮﺗﺎه اﺳﺖ‪ ،‬اﺣﺘﻤﺎل ﺣﺬف ﻓﺎﯾـﻞﻫـﺎ از‬ ‫‪ cache‬ﻣﺮورﮔﺮ ﮐﻤﺘﺮ اﺳﺖ و ﺑﻪ ﻫﻤﯿﻦ ﺧﺎﻃﺮ ﺻﻔﺤﺎت ﺑﺎ ﺳﺮﻋﺖ ﺑﯿﺸﺘﺮي ﺑﺮاي ﮐﺎرﺑﺮان ﺑﺎز ﻣـﯽﺷـﻮد زﯾـﺮا ﺑﺨـﺶ‬ ‫اﻋﻈﻢ ﺻﻔﺤﺎت از ‪ cache‬ﻣﺮورﮔﺮ ﺧﻮاﻧﺪه ﻣﯽﺷﻮد‪.‬‬ ‫اﮔﺮ ﺻﻔﺤﺎت ﺷﻤﺎ ﺑﻪ ﺷﮑﻠﯽ ﻃﺮاﺣﯽ ﺷﺪه ﮐﻪ دﺳﺘﻮرات داﺧﻞ ﻫﺮ ﺻﻔﺤﻪ ﺑﺎ ﺻﻔﺤﺎت دﯾﮕﺮ ﻓﺮق دارد و ﺷـﺒﺎﻫﺘﯽ ﺑـﯿﻦ‬ ‫دﺳﺘﻮرات ﻧﯿﺴﺖ ﺑﻬﺘﺮ اﺳﺖ ﮐﻪ از دﺳﺘﻮرات ‪ inline‬ﺑﯿﺸﺘﺮ اﺳﺘﻔﺎده ﮐﻨﯿﺪ وﻟﯽ اﮔﺮ ﺑﺨﺶ زﯾﺎدي از دﺳﺘﻮرات ﺷﻤﺎ در‬ ‫ﺻﻔﺤﺎت ﻣﺨﺘﻠﻒ ﯾﮑﺴﺎن اﺳﺖ ﺑﻬﺘﺮ اﺳﺖ ﮐﻪ دﺳﺘﻮرات را در ﻓﺎﯾﻞﻫﺎي ﺧﻮدﺷﺎن و ﺑﻪ ﺷﮑﻞ ‪ external‬ﺑﻪ ﮐﺎر ﺑﺒﺮﯾﺪ‪.‬‬ ‫ﺻﻔﺤﻪ ﻧﺨﺴﺖ ﺳﺎﯾﺖ‬ ‫اﻟﺒﺘﻪ ﺻﻔﺤﻪ ﻧﺨﺴﺖ ﺑﺴﯿﺎري از ﺳﺎﯾﺖﻫﺎ از اﯾﻦ ﻗﺎﻋﺪه ﻣﺴﺘﺜﻨﺎﺳﺖ و ﺗﻨﻬﺎ ﺟﺎﯾﯽ ﮐﻪ ﻣﯽﺗﻮاﻧﯿﺪ دﺳﺘﻮرات ‪ inline‬را‬ ‫ﺑﯿﺸﺘﺮ ﺑﻪ ﮐﺎر ﺑﺒﺮﯾﺪ ﻫﻤﯿﻦ ﺻﻔﺤﺎت اول اﺳﺖ‪ .‬ﻣﻌﻤﻮﻻ اﯾﻦ ﺻﻔﺤﺎت را ﮐﺎرﺑﺮ ﺗﻨﻬﺎ ﯾﮑﺒﺎر ﺑﺎز ﻣﯽﮐﻨﺪ و ﺳﭙﺲ وارد‬ ‫ﺻﻔﺤﺎت داﺧﻠﯽ ﻣﯽﺷﻮد‪ .‬ﺑﺮاي اﻓﺰاﯾﺶ ﺳﺮﻋﺖ اﯾﻦ ﺻﻔﺤﻪ ﻣﯽ ﺗﻮاﻧﯿﺪ ﺑﺮﺧﯽ از دﺳﺘﻮرات را در اﯾﻦ ﺻﻔﺤﻪ ﺑﻪ ﺷﮑﻞ‬ ‫‪ inline‬ﺑﻪ ﮐﺎر ﺑﺒﺮﯾﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

۵٧

post-onload download ‫اﺳﺘﻔﺎده از ﻣﺘﺪﻫﺎي‬ ‫ ﺑﻪ ﮐﺎر ﻣﯽﺑﺮﻧﺪ وﻟﯽ دﺳﺘﻮراﺗﯽ ﮐﻪ ﻣﺮﺑﻮط‬inline ‫ﺑﺴﯿﺎري از ﺳﺎﯾﺖﻫﺎ دﺳﺘﻮرات ﻣﺮﺑﻮط ﺑﻪ ﺻﻔﺤﻪ اول را ﺑﻪ ﺷﮑﻞ‬ ‫ﺑﻪ ﺻﻔﺤﺎت داﺧﻠﯽ اﺳﺖ را در داﺧﻞ ﯾﮏ ﻓﺎﯾﻞ ﺟﺪاﮔﺎﻧﻪ ﻗﺮار ﻣﯽدﻫﻨﺪ و ﺑﺎ اﺳﺘﻔﺎده از ﺟﺎوا اﺳﮑﺮﯾﭙﺖ ﺑﻌﺪ از ﺑﺎرﮔﺬاري‬ ‫ در اﯾﻦ ﺣﺎﻟﺖ اول ﺻﻔﺤﻪ ﺑﻪ ﻃﻮر ﮐﺎﻣﻞ ﺑﺎرﮔﺬاري ﻣﯽﺷﻮد و ﺑﻪ ﻋﻨﻮان‬.‫ ﺑﺮاي ﮐﺎرﺑﺮ ارﺳﺎل ﻣﯽﮐﻨﻨﺪ‬،‫ﮐﺎﻣﻞ ﺻﻔﺤﻪ‬ ‫ ﺷﺪه و‬load ‫ ﻣﺮﺑﻮط ﺑﻪ ﺻﻔﺤﺎت دﯾﮕﺮ ﺗﻮﺳﻂ ﺟﺎوا اﺳﮑﺮﯾﭙﺖ‬JavaScript ‫ و‬CSS ‫ﻣﺜﺎل ﺑﻌﺪ از ﯾﮏ ﺛﺎﻧﯿﻪ ﻓﺎﯾﻞﻫﺎي‬ .‫ﺑﺮاي ﮐﺎرﺑﺮ ارﺳﺎل ﻣﯽﺷﻮد‬ :‫ﺑﺮاي ﻧﻤﻮﻧﻪ ﺑﻪ اﯾﻦ ﮐﺪ دﻗﺖ ﮐﻨﯿﺪ‬ <script type="text/javascript"> function doOnload( ) { setTimeout("downloadComponents( )", 1000); } window.onload = doOnload; // Download external components dynamically using JavaScript. function downloadComponents( ) { downloadJS("http://stevesouders.com/hpws/testsma.js"); downloadCSS("http://stevesouders.com/hpws/testsm.css"); } // Download a script dynamically. function downloadJS(url) { var elem = document.createElement("script"); elem.src = url; document.body.appendChild(elem); } // Download a stylesheet dynamically. function downloadCSS(url) { var elem = document.createElement("link"); elem.rel = "stylesheet"; elem.type = "text/css"; elem.href = url; document.body.appendChild(elem); } </script> js ‫ و ﯾﮏ ﻓﺎﯾﻞ‬CSS ‫ ﮐﺎﻣﻞ ﺻﻔﺤﻪ اﯾﻦ ﮐﺪ ﻓﻌﺎل ﻣﯽﺷﻮد و ﻟﯿﻨﮏ ﻣﺮﺑﻮط ﺑﻪ ﯾﮏ ﻓﺎﯾﻞ‬load ‫در اﯾﻦ ﻣﺜﺎل ﯾﮏ ﺛﺎﻧﯿﻪ ﺑﻌﺪ از‬ ..‫را ﺑﻪ ﺑﺎﻻي ﺻﻔﺤﻪ اﺿﺎﻓﻪ ﻣﯽﺷﻮد‬

www.ParsBook.org

‫‪۵٨‬‬

‫! دﺳﺘﻮرات ‪ CSS‬و ‪ JavaScript‬را در ﻓﺎﯾﻞﻫﺎي ﺟﺪاﮔﺎﻧﻪ ﻗﺮار دﻫﯿﺪ و ﺑﻪ ﺷﮑﻞ ‪ external‬اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪.‬‬

‫‪ -9‬ﻓﺎﯾﻞﻫﺎي ﺟﺎوا اﺳﮑﺮﯾﭙﺖ را ﮐﻮﭼﮏ ﮐﻨﯿﺪ‪.‬‬ ‫ﺟﺎوا اﺳﮑﺮﯾﭙﺖ زﺑﺎﻧﯽ اﺳﮑﺮﯾﭙﯽ اﺳﺖ ﮐﻪ در وب اﺳﺘﻔﺎده ﺑﺴﯿﺎر زﯾﺎدي دارد‪ .‬ﮐﺪﻫﺎي ﻧﻮﺷﺘﻪ ﺷـﺪه ﺑـﺎ اﯾـﻦ‬ ‫زﺑﺎن ﺑﺮ روي ﺳﯿﺴﺘﻢ ﮐﺎرﺑﺮ ﺑﺎرﮔﺬاري ﺷﺪه و ﺳﭙﺲ اﺟﺮا ﻣﯽﺷﻮﻧﺪ از اﯾﻦ رو از وﻇـﺎﯾﻒ ﻃـﺮاح اﺳـﺖ ﮐـﻪ ﮐـﺪﻫﺎي‬ ‫ﻣﺮﺑﻮط ﺑﻪ ﺟﺎوا اﺳﮑﺮﯾﭙﺖ را از ﻧﻈﺮ ﺳﺎﯾﺰ ﺑﻬﯿﻨﻪ ﮐﻨﺪ‪ .‬ﺑﺮاي ﻓﺸﺮدهﺳﺎزي ﺟﺎوا اﺳﮑﺮﯾﭙﺖ ﻣﯽﺗﻮان ﻣﺘﺪﻫﺎي ﻣﺨﺘﻠﻔﯽ را‬ ‫اﺳﺘﻔﺎده ﮐﺮد ﮐﻪ ﻣﻬﻢﺗﺮﯾﻦ آن ﻫﻤﺎن ‪ gzip‬ﮐﺮدن ﻓﺎﯾﻞﻫﺎ ﺑﻮد ﮐﻪ در ﺑﺨﺶﻫﺎي ﻗﺒﻠﯽ ﺗﻮﺿﯿﺢ داده ﺷـﺪه‪ .‬ﺣﺎﻟـﺖ ﺑﻌـﺪي‬ ‫‪ minify‬ﮐﺮدن ﻓﺎﯾﻞﻫﺎي ﺟﺎوا اﺳﮑﺮﯾﭙﺖ اﺳﺖ‪.‬‬ ‫‪Minification‬‬ ‫ﮐﻮﭼﮏﺳﺎزي ﯾﺎ ‪ minification‬ﻋﺒﺎرت اﺳﺖ از ﺣﺬف ﺗﻤﺎﻣﯽﻓﺎﺻﻠﻪﻫﺎي ﺧﺎﻟﯽ درون ﮐﺪ ﺟﻬﺖ ﮐﺎﻫﺶ ﺣﺠﻢ ﮐﺪ‪ .‬در‬ ‫اﯾﻦ ﺣﺎﻟﺖ ﺗﻤﺎﻣﯽﻓﺎﺻﻠﻪﻫﺎي ﺧﺎﻟﯽ از درون ﮐﺪ ﺧﺎرج ﻣﯽﺷﻮد و ﮐﺪ ﺑﻪ ﮐﻢﺗﺮﯾﻦ ﺣﺠﻢ ﺧﻮد ﻣﯽرﺳﺪ در ﻧﺘﯿﺠﻪ زﻣﺎن‬ ‫ﺑﺎرﮔﺬاري ﺻﻔﺤﻪ ﮐﻮﺗﺎهﺗﺮ ﻣﯽﺷﻮد‪.‬‬ ‫‪Obfuscation‬‬ ‫ﻣﺒﻬﻢ ﺳﺎزي ﮐﺪﻫﺎ ي ﺟﺎوا اﺳﮑﺮﯾﭙﺖ ﻋﺒﺎرت اﺳﺖ از ﮐﻮﭼﮏ ﮐﺮدن ﮐﺪ و ادﻏﺎم ﺗﻮاﺑـﻊ‪ ،‬ﺗﻐﯿﯿـﺮ ﻧـﺎم ﺗﻮاﺑـﻊ ﺑـﻪ‬ ‫ﻧﺎمﻫﺎي ﺑﯽﻣﻌﻨﯽ وﻟﯽ ﮐﻮﺗﺎهﺗﺮ‪ .‬در اﯾﻦ ﺣﺎﻟﺖ ﺣﺠﻢ ﮐﺪ ﺑﻪ ﻣﯿﺰان ﺑﯿﺸﺘﺮي ﮐﺎﻫﺶ ﻣﯽﯾﺎﺑﺪ و اﻏﻠﺐ از اﯾـﻦ ﺷـﯿﻮه ﺑـﺮاي‬ ‫ﮐﺎﻫﺶ ﺣﺠﻢ ﮐﺪ و ﻫﻤﭽﻨﯿﻦ ﺳﺨﺖ ﮐﺮدن ﭘﺮوﺳﻪ ﻣﻬﻨﺪﺳﯽ ﻣﻌﮑﻮس در ﮐﺪﻫﺎ اﺳﺘﻔﺎده ﻣﯽﺷﻮد‪ .‬اﻟﺒﺘﻪ از آﻧﺠﺎﺋﯽﮐﻪ اﯾـﻦ‬ ‫ﭘﺮوﺳﻪ ﭘﯿﭽﯿﺪه ﺗﺮ اﺳﺖ‪ ،‬اﻏﻠﺐ ﺑﺎﻋﺚ ﺑﺮوز ﺧﻄﺎﻫﺎﯾﯽ در ﮐﺪ ﻧﯿﺰ ﻣﯽﺷﻮد در ﺿﻤﻦ ﺧﻮاﻧﺎﯾﯽ ﮐﺪ ﻧﯿﺰ ﮐﺎﻫﺶ ﻣـﯽﯾﺎﺑـﺪ و‬ ‫رﻓﻌﺎ ﻋﯿﺐ ﮐﺪ در ﺣﺎﻟﺘﯽ ﮐﻪ ﮐﺪ ﻣﺒﻬﻢ ﺳﺎزي ﺷﺪه اﺳﺖ‪ ،‬ﺑﺴﯿﺎر ﻣﺸﮑﻞ اﺳﺖ‪ .‬اﮔﺮ ﻫﺪف ﺷﻤﺎ ﻣﺨﻔﯽ ﮐﺮدن ﮐﺪﺗﺎن از دﯾﺪ‬ ‫ﮐﺎرﺑﺮان ﻧﺒﺎﺷﺪ‪ ،‬ﺑﺎﯾﺪ دﯾﺪ ﮐﻪ آﯾﺎ ﻣﺒﻬﻢ ﺳﺎزي ﮐﺪ ﺑﺮاي ﺷﻤﺎ ﻧﻔﻌﯽ دارد ﯾﺎ ﺧﯿﺮ‪.‬‬ ‫اﺑﺰارﻫﺎ‬ ‫اﺑﺰارﻫﺎي ﻣﺨﺘﻠﻔﯽ ﺑﺮاي ﮐﻮﭼﮏ ﺳﺎزي ﮐﺪﻫﺎ وﺟﻮد دارد وﻟﯽ ﻣﻌﺮوف ﺗﺮﯾﻦ اﺑﺰار ﺑﺮاي ﮐﻮﭼﮏﺳﺎزي ﮐﺪ ‪JSmin‬‬ ‫اﺳﺖ ﮐﻪ ﺗﻮﺳﻂ داﮔﻼس ﮐﺮاﮐﻔﻮرد ﻧﻮﺷﺘﻪ ﺷﺪه اﺳﺖ‪ source .‬اﯾﻦ ﺑﺮﻧﺎﻣﻪ ﺑﻪ زﺑﺎنﻫﺎي ﻣﺨﺘﻠﻔﯽ در دﺳﺘﺮس اﺳﺖ‬ ‫)‪.(http://crockford.com/javascript/jsmin‬‬ ‫اﺑﺰار ﻣﻨﺎﺳﺐ دﯾﮕﺮ ﻧﯿﺰ ‪ Dojo Compressor‬اﺳﺖ ﮐﻪ اﮐﻨﻮن ﺑﻪ ‪ shrinksafe‬ﺗﻐﯿﯿﺮ ﻧﺎم داده و در آدرس‬ ‫‪ http://dojotoolkit.org/docs/shrinksafe‬در دﺳﺘﺮس اﺳﺖ‪ .‬ﺣﺎل ﺷﯿﻮه ﻋﻤﻠﮑﺮد اﯾﻦ دواﺑﺰار را ﺑﺮ روي ﯾﮏ‬ ‫ﺗﮑﻪ ﮐﺪ ﻣﯽﺑﯿﻨﯿﻢ‪:‬‬

‫‪www.ParsBook.org‬‬

۵٩

YAHOO.util.CustomEvent = function(type, oScope, silent, signature) { this.type = type; this.scope = oScope || window; this.silent = silent; this.signature = signature || YAHOO.util.CustomEvent.LIST; this.subscribers = []; if (!this.silent) { } var onsubscribeType = "_YUICEOnSubscribe"; if (type !== onsubscribeType) { this.subscribeEvent = new YAHOO.util.CustomEvent(onsubscribeType, this, true); } }; :‫ ﻓﺸﺮده ﻣﯽﮐﻨﯿﻢ‬JSmin ‫ﺣﺎل ﻫﻤﯿﻦ ﮐﺪ را ﺑﺎ‬ YAHOO.util.CustomEvent=function(type,oScope,silent,signature){this.type=type;this. scope=oScope||window;this.silent=silent;this.signature=signature||YAHOO.util.CustomEve nt.LIST;this.subscribers=[];if(!this.silent){}var onsubscribeType="_YUICEOnSubscribe";if(type!==onsubscribeType){this.subscribeEvent=ne w YAHOO.util.CustomEvent(onsubscribeType,this,true);}}; dojo ‫ ﺣﺎل ﻫﻤﯿﻦ ﮐﺪ را ﺑﺎ‬.‫ﻫﻤﺎﻧﻄﻮر ﮐﻪ ﻣﯽﺑﯿﻨﯿﺪ ﺗﻤﺎﻣﯽﻓﺎﺻﻠﻪﻫﺎي ﺧﺎﻟﯽ و ﮐﺎﻣﻨﺖﻫﺎ از درون ﮐﺪ ﺣﺬف ﺷﺪه اﺳﺖ‬ :‫ ﻓﺸﺮده ﻣﯽﮐﻨﯿﻢ‬compressor YAHOO.util.CustomEvent=function(_1,_2,_3,_4){ this.type=_1; this.scope=_2||window; this.silent=_3; this.signature=_4||YAHOO.util.CustomEvent.LIST; this.subscribers=[]; if(!this.silent){ } var _5="_YUICEOnSubscribe"; if(_1!==_5){ this.subscribeEvent=new YAHOO.util.CustomEvent(_5,this,true); } }; ‫ در اﯾﻦ ﺣﺎﻟﺖ ﮐﺪ ﻣﺎ‬.‫ ﻧﺎم ﻣﺘﻐﯿﺮﻫﺎ ﻧﯿﺰ ﺑﻪ ﻋﺪد ﺗﻐﯿﯿﺮ ﮐﺮده و ﮐﻮﭼﮏﺗﺮ ﺷﺪه اﺳﺖ‬،‫در اﯾﻦﺟﺎ اﮔﺮ دﻗﺖ ﮐﻨﯿﺪ‬ ‫ در اﯾﻦ ﻟﯿﺴﺖ ﻣﺎ ﭼﻨﺪ ﺳﺎﯾﺖ ﭘﺮﺑﺎزدﯾﺪ‬.‫ ﺣﺎل ﺑﻪ ﻟﯿﺴﺘﯽ ﮐﻪ ﻓﺮاﻫﻢ ﮐﺮدهاﯾﻢ دﻗﺖ ﮐﻨﯿﺪ‬.‫اﻧﺪﮐﯽ ﺑﯿﺸﺘﺮ ﮐﻮﭼﮏ ﺷﺪه اﺳﺖ‬

www.ParsBook.org

‫‪۶٠‬‬

‫را ﻟﯿﺴﺖ ﮐﺮدهاﯾﻢ و ﺣﺠﻢ ﻓﺎﯾﻞ ﻫﺎي ﺟﺎوا اﺳﮑﺮﯾﭙﺘﺸﺎن را در ﺣﺎﻟﺖ ﻋﺎدي‪ ،‬ﮐﻮﭼﮏ ﺷﺪه ﺗﻮﺳﻂ ‪ jsmin‬و ‪dojo‬‬ ‫‪ compressor‬ﺑﻪ ﻧﻤﺎﯾﺶ ﮔﺬاﺷﺘﻪ اﯾﻢ‪:‬‬

‫در ﺟﺪول ﻣﺸﺨﺺ اﺳﺖ ﮐﻪ ﻓﺸﺮده ﺳﺎزي در ﻫﺮ دو ﺣﺎﻟﺖ ﺗﻘﺮﯾﺒﺎ ﯾﮑﺴﺎن اﺳﺖ و ﺗﻨﻬﺎ ﺳﺎﯾﺖ آﻣـﺎزون اﺳـﺖ ﮐـﻪ ﺑـﺎ‬ ‫ﻣﺒﻬﻢ ﺳﺎزي ﮐﺪش ﻣﯽﺗﻮاﻧﺪ ‪ 8‬درﺻﺪ ﮐﺪ ﺟﺎوا اﺳﮑﺮﯾﭙﺘﺶ را ﺑﯿﺸﺘﺮ ﻓﺸﺮده ﮐﻨﺪ‪ .‬از اﯾﻦ رو ﭘﯿﺸﻨﻬﺎد ﻣﯽﮐﻨﯿﻢ ﮐـﻪ اﮔـﺮ‬ ‫ﻓﺎﯾﻞﻫﺎي ﺷﻤﺎ زﯾﺮ ‪ 100‬ﮐﯿﻠﻮﺑﺎﯾﺖ اﺳﺖ آﻧﻬﺎ را ‪ obfuscate‬ﻧﮑﻨﯿﺪ زﯾﺮا ﺗﻔﺎوت ﺳﺎﯾﺰ ﺑﺴﯿﺎر اﻧﺪك اﺳـﺖ از ﻃﺮﻓـﯽ ﺑـﺎ‬ ‫اﺟﺘﻨﺎب از ‪ obfuscate‬ﮐﺮدن ﻣﯽﺗﻮاﻧﯿﺪ ﻣﻄﻤﺌﻦ ﺑﺎﺷﯿﺪ ﮐﻪ ﮐﺪﻫﺎي ﺷﻤﺎ ﺑﺎ ﭘﯿﻐﺎم ﺧﻄﺎ ﻣﻮاﺟﻪ ﻧﺨﻮاﻫﺪ ﺷﺪ‪.‬‬ ‫‪ Gzip‬ﮐﺮدن و ‪minification‬‬ ‫ﻫﻤﺎﻧﻨﺪ ﻣﺜﺎل ﻗﺒﻞ ﻣﯽﺗﻮاﻧﯿﻢ ﻫﻤﺮاه ﺑﺎ ﮐﻮﭼﮏ ﺳﺎزي ﮐﺪ‪ ،‬ﻓﺎﯾﻞﻫﺎ را ﺑﺎ اﺳﺘﻔﺎده از ‪ gzip‬ﻫﻢ ﻓﺸﺮده ﮐﻨﯿﻢ‪ .‬در‬ ‫اﯾﻦ ﺣﺎﻟﺖ ﺣﺠﻢ ﻓﺎﯾﻞﻫﺎ ﺑﯿﺶ از ‪ 70‬درﺻﺪ ﮐﺎﻫﺶ ﺧﻮاﻫﺪ ﯾﺎﻓﺖ‪ .‬ﮔﺎﻫﺎ ﺳﻮال ﻣﯽﺷﻮد ﮐﻪ در زﻣﺎﻧﯽ ﮐﻪ از ‪gzip‬‬ ‫اﺳﺘﻔﺎده ﻣﯽﮐﻨﯿﻢ آﯾﺎ ﻻزم اﺳﺖ ﮐﻪ ﮐﺪﻫﺎ را ‪ minify‬ﻫﻢ ﺑﮑﻨﯿﻢ ؟ ﺑﺮاي ﺗﻮﺿﯿﺢ اﯾﻦ ﻣﻄﻠﺐ ﺟﺪول دﯾﮕﺮي ﺑﻪ ﺷﻤﺎ ﻧﺸﺎن‬ ‫ﻣﯽدﻫﯿﻢ ﮐﻪ ﺛﺎﺑﺖ ﻣﯽﮐﻨﺪ ﺣﺘﯽ ﺑﺎ وﺟﻮد ‪ gzip‬ﮐﺮدن ﻓﺎﯾﻞﻫﺎ ﺑﻬﺘﺮ اﺳﺖ ﮐﻪ ﻓﺎﯾﻞﻫﺎ را ‪ minify‬ﮐﻨﯿﻢ‪.‬‬

‫اﯾﻦ ﺟﺪول ﻧﺸﺎن ﻣﯽدﻫﺪ ﮐﻪ ﺣﺘﯽ ﺑﺎ اﯾﻦﮐﻪ ﺻﻔﺤﺎت ‪ gzip‬ﺷﺪهاﻧﺪ اﮔﺮ ﻓﺎﯾﻞﻫﺎي ﺟﺎوا اﺳﮑﺮﯾﭙﺖ را ‪ minify‬ﻧﯿﺰ ﺑﮑﻨﯿﻢ‪.‬‬ ‫ﻣﯽﺗﻮاﻧﯿﻢ ﺗﺎ ‪ 20‬درﺻﺪ دﯾﮕﺮ از ﺣﺠﻢ ﻓﺎﯾﻞ ﻧﻬﺎﯾﯽ ﺑﮑﺎﻫﯿﻢ‪ .‬از اﯾﻦ رو ﭘﯿﺸﻨﻬﺎد ﻣﯽﺷﻮد ﮐﻪ ﺣﺘﻤﺎ ﻓﺎﯾﻞﻫﺎي ﺧﻮد را‬ ‫‪ minify‬ﮐﻨﯿﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪۶١‬‬

‫ﮐﻮﭼﮏ ﺳﺎزي ‪CSS‬‬ ‫ﮐﻮﭼﮏ ﺳﺎزي و ‪ minify‬ﮐﺮدن ﺗﻨﻬﺎ ﻣﺨﺘﺺ ﺑﻪ ﻓﺎﯾﻞﻫﺎي ‪ javascript‬ﻧﯿﺴﺖ و اﺑﺰارﻫﺎﯾﯽ در اﯾﻨﺘﺮﻧﺖ وﺟﻮد دارد ﮐﻪ‬ ‫ﺣﺠﻢ ﻓﺎﯾﻞﻫﺎي ‪ CSS‬ﺷﻤﺎ را ﻧﯿﺰ ﮐﺎﻫﺶ ﻣﯽدﻫﻨﺪ‪ .‬اﻟﺒﺘﻪ ﻣﯿﺰان ﻓﺸﺮدهﺳﺎزي در ‪ CSS‬ﻫﯿﭽﮕﺎه ﺑﻪ اﻧﺪازه ﺟﺎوا اﺳﮑﺮﯾﭙﺖ‬ ‫ﻧﯿﺴﺖ وﻟﯽ از اﯾﻦ ﻃﺮﯾﻖ ﻫﻢ ﻣﯽ ﺗﻮان اﻧﺪﮐﯽ ﺣﺠﻢ ﺻﻔﺤﺎت را ﮐﻤﺘﺮ ﮐﺮد‪.‬‬ ‫! ﻓﺎﯾﻞﻫﺎي ﺟﺎوا اﺳﮑﺮﯾﭙﺖ ﺧﻮد را ﮐﻮﭼﮏ ﺳﺎزي )‪ (minify‬ﮐﻨﯿﺪ‪.‬‬

‫‪ ETag - 10‬ﻫﺎ را ﺗﻨﻈﯿﻢ ﮐﻨﯿﺪ‪.‬‬ ‫ﺑﻬﺘﺮﯾﻦ راه ﺑﺮاي اﻓﺰاﯾﺶ ﺳﺮﻋﺖ ﺑﺎرﮔﺬاري ﺻﻔﺤﺎت ﮐﺎﻫﺶ ﺗﻌﺪاد درﺧﻮاﺳﺖﻫﺎي ‪ HTTP‬اﺳﺖ‪ .‬ﺷﻤﺎ‬ ‫ﻣﯽﺗﻮاﻧﯿﺪ ﺑﺎ اﺳﺘﻔﺎده از ﻗﺎﺑﻠﯿﺖ ‪ Cache‬ﻣﺮورﮔﺮﻫﺎ ﺳﺮﻋﺖ ﺑﺎرﮔﺬاري ﺻﻔﺤﺎت وب را ﺑﻪ ﻣﯿﺰان ﻗﺎﺑﻞ ﺗﻮﺟﻬﯽ اﻓﺰاﯾﺶ‬ ‫دﻫﯿﺪ‪ ،‬اﻣﺎ زﻣﺎﻧﯽ ﮐﻪ ﺳﺎﯾﺖ ﺷﻤﺎ ﺑﺮ روي ﺑﯿﺶ از ﯾﮏ ‪ Server‬ﻗﺮار داﺷﺘﻪ ﺑﺎﺷﺪ‪ Etag ،‬ﻫﺎي ﻣﻮﺟﻮد در ‪header‬‬ ‫ﺟﻠﻮي ‪ Cache‬ﺷﺪن اﺟﺰاي ﺻﻔﺤﻪ ﺷﻤﺎ را ﻣﯽﮔﯿﺮﻧﺪ‪ .‬ﺣﺎل ﺗﻮﺿﯿﺢ ﻣﯽدﻫﯿﻢ ﮐﻪ ﭼﺮا ﺣﻀﻮر اﯾﻦ ‪ Etag‬ﻫﺎ ﺑﺎﻋﺚ‬ ‫ﮐﺎﻫﺶ ﺳﺮﻋﺖ وب ﺳﺎﯾﺖﻫﺎ ﻣﯽﺷﻮﻧﺪ و اﯾﻦﮐﻪ ﭼﻄﻮر ﻣﯽﺗﻮاﻧﯿﺪ ﺑﺎ اﺳﺘﻔﺎده از ﻗﺎﺑﻠﯿﺖﻫﺎﯾﯽ ﮐﻪ ﺑﺮ روي ‪ server‬ﻫﺎ‬ ‫وﺟﻮد دارد اﯾﻦ ﺑﺨﺶ را ﺑﻬﯿﻨﻪ ﮐﺮده و ﯾﺎ ﮐﻼ ﺣﺬف ﮐﻨﯿﺪ‪.‬‬

‫‪ Etag‬ﭼﯿﺴﺖ ؟‬ ‫‪ Entity tag‬ﯾﺎ ﻫﻤﺎن ‪ETag‬ﻫﺎ ﻣﮑﺎﻧﯿﺰﻣﯽ ﻫﺴﺘﻨﺪ ﮐﻪ ‪server‬ﻫﺎي وب و ﻣﺮورﮔﺮ از آن ﺑﺮاي ﺗﺎﯾﯿﺪ اﺟﺰاي ‪Cache‬‬ ‫ﺷﺪه اﺳﺘﻔﺎده ﻣﯽﮐﻨﻨﺪ‪ .‬ﻗﺒﻞ از اﯾﻨﮑﻪ ﺑﻪ ﺟﺰﺋﯿﺎت ‪ Etag‬ﻫﺎ ﺑﭙﺮدازﯾﻢ اﺟﺎزه دﻫﯿﺪ ﺑﺮرﺳﯽ ﮐﻨﯿﻢ ﮐﻪ اﺟﺰاي ﯾﮏ ﺻﻔﺤﻪ‬ ‫وب ﭼﻄﻮر ‪ Cache‬ﺷﺪه و ‪ validate‬ﻣﯽﺷﻮﻧﺪ‪.‬‬ ‫‪Expire Header‬‬ ‫زﻣﺎﻧﯽ ﮐﻪ ﻣﺮورﮔﺮ اﺟﺰاي ﺻﻔﺤﻪ را درﯾﺎﻓﺖ ﻣﯽﮐﻨﻨﺪ آنﻫﺎ را در ‪ Cache‬ﺧﻮد ذﺧﯿﺮه ﻣﯽﮐﻨﺪ‪ .‬در ﻣﺮاﺟﻌﺎت‬ ‫ﺑﻌﺪي اﮔﺮ از اﺟﺰاي ﻫﻤﺎن ﺻﻔﺤﻪ در ‪ Cache‬ﭼﯿﺰي وﺟﻮد داﺷﺘﻪ ﺑﺎﺷﺪ‪ ،‬ﺑﻪ ﺟﺎي درﯾﺎﻓﺖ آن ﻓﺎﯾﻞﻫﺎ از ‪server‬‬ ‫ﻣﺮورﮔﺮ اﯾﻦ ﻓﺎﯾﻞﻫﺎ را از ‪ Cache‬ﻣﯽﺧﻮاﻧﺪ و دﯾﮕﺮ درﺧﻮاﺳﺖ ‪ HTTP‬ﺑﻪ ‪ server‬ارﺳﺎل ﻧﻤﯽﮐﻨﺪ‪ .‬ﻣﺮورﮔﺮ ﺑﺎ ﺗﻮﺟﻪ‬ ‫ﺑﻪ ﺗﺎرﯾﺦ اﻧﻘﻀﺎي ﻣﻮﺟﻮد در ‪ header‬ﻣﺘﻮﺟﻪ ﻣﯽﺷﻮد ﮐﻪ ﻓﺎﯾﻞ ﻣﻮﺟﻮد ﻗﺎﺑﻞ اﺳﺘﻔﺎده اﺳﺖ ﯾﺎ ﺧﯿﺮ‪ .‬زﻣﺎﻧﯽ ﮐﻪ ﯾﮏ‬ ‫ﺟﺰء از ﺻﻔﺤﻪ درﺧﻮاﺳﺖ ﻣﯽﺷﻮد‪ server ،‬در ﺟﻮاب ﻣﯽﺗﻮاﻧﺪ در ﺑﺨﺶ ‪ header‬ﻗﺴﻤﺘﯽ ﺗﺤﺖ ﻋﻨﻮان ‪expire‬‬ ‫‪ header‬را ﺑﺮاي ﻣﺮورﮔﺮ ارﺳﺎل ﮐﻨﯿﺪ ﮐﻪ ﺑﻪ اﯾﻦ ﺷﮑﻞ اﺳﺖ‪:‬‬

‫‪www.ParsBook.org‬‬

‫‪۶٢‬‬

‫‪Expires: Thu, 15 Apr 2010 20:00:00 GMT‬‬ ‫ﻗﺒﻼً ﺗﻮﺿﯿﺢ دادﯾﻢ ﮐﻪ ﻣﯽ ﺗﻮاﻧﯿﻢ ﺑﺎ ﺗﻨﻈﯿﻢ اﯾﻦ ﺑﺨﺶ ﺑﺮ روي ﯾﮏ ﺗﺎﺧﯿﺮ دور در آﯾﻨﺪه‪ ،‬ﺑﻪ ﻣﺮورﮔﺮ اﺟﺎزه‬ ‫دﻫﯿﻢ ﮐﻪ ﺗﺼﺎوﯾﺮ را درون ‪ Cache‬ﺧﻮد ﻧﮕﺎه دارد و در ﻣﺮاﺟﻌﺎت ﺑﻌﺪي از ﻫﻤﺎن ﻓﺎﯾﻞﻫﺎ اﺳﺘﻔﺎده ﮐﻨﺪ‪ .‬اﻟﺒﺘﻪ ﺑﺮ‬ ‫اﺳﺎس ﻣﺴﺘﻨﺪات ‪ HTTP‬ﭘﯿﺸﻨﻬﺎد ﺷﺪه اﺳﺖ ﮐﻪ ‪ server‬ﻫﺎ ﻣﺪت زﻣﺎن ‪ expire‬ﺷﺪن ﯾﮏ ﻋﻨﺼﺮ را ﺗﺎ ﯾﮏ ﺳﺎل آﯾﻨﺪه‬ ‫ﺗﻨﻈﯿﻢ ﮐﻨﻨﺪ وﻟﯽ اﯾﻦ ﺗﻨﻬﺎ ﯾﮏ ﭘﯿﺸﻨﻬﺎد اﺳﺖ و اﮔﺮ ﺷﻤﺎ ﺗﺎرﯾﺦ اﻧﻘﻀﺎي ﻓﺎﯾﻞ را ﺑﯿﺶ از ﯾﮏ ﺳﺎل ﻧﯿﺰ ﺗﻌﺮﯾﻒ ﮐﻨﯿﺪ‪،‬‬ ‫ﻣﺮورﮔﺮﻫﺎ از آن ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽﮐﻨﻨﺪ‪.‬‬

‫درﺧﻮاﺳﺖﻫﺎي ‪ HTTP‬ﺷﺮﻃﯽ‬ ‫زﻣﺎﻧﯽ ﮐﻪ ﺗﺎرﯾﺦ اﻧﻘﻀﺎي ﯾﮏ ﻓﺎﯾﻞ ﻓﺮا ﻣﯽرﺳﺪ و ﯾﺎ ﮐﺎرﺑﺮ ﺻﻔﺤﻪ ﺧﻮد را ‪ refresh‬ﻣﯽﮐﻨﺪ‪ ،‬ﻣﺮورﮔﺮ ﺑﺎﯾﺪ‬ ‫اﻃﻤﯿﻨﺎن ﺣﺎﺻﻞ ﮐﻨﺪ ﮐﻪ ﻓﺎﯾﻠﯽ ﮐﻪ در ‪ Cache‬ﺧﻮد در اﺧﺘﯿﺎر دارد ﻫﻨﻮز ﻣﻌﺘﺒﺮ اﺳﺖ ﯾﺎ ﺧﯿﺮ‪ .‬ﺑﺮاي اﯾﻦﮐﺎر ﻣﺮورﮔﺮ‬ ‫ﯾﮏ درﺧﻮاﺳﺖ ﺷﺮﻃﯽ ‪ HTTP‬ارﺳﺎل ﻣﯽﮐﻨﺪ )‪ .(conditional get request‬ﻣﺘﺎﺳﻔﺎﻧﻪ ﻣﺮورﮔﺮﻫﺎ ﺑﺮاي ﺗﺎﯾﯿﺪ‬ ‫ﻓﺎﯾﻞﻫﺎﯾﯽ ﮐﻪ در اﺧﺘﯿﺎر دارﻧﺪ ﺗﻨﻬﺎ از اﯾﻦ ﻃﺮﯾﻖ ﻣﯽ ﺗﻮاﻧﻨﺪ اﻗﺪام ﮐﻨﻨﺪ وﻟﯽ ﺑﺎ اﯾﻦ ﺣﺎل ﺗﺎﯾﯿﺪ ﮐﺮدن ﻓﺎﯾﻞﻫﺎ ﺑﻪ اﯾﻦ ﺷﮑﻞ‬ ‫ﺧﯿﻠﯽ ﺑﻬﺘﺮ از اﯾﻦ اﺳﺖ ﮐﻪ ﺗﻤﺎﻣﯽﻓﺎﯾﻞﻫﺎ را از ﻧﻮ درﯾﺎﻓﺖ ﮐﻨﻨﺪ‪ .‬زﻣﺎﻧﯽ ﮐﻪ درﺧﻮاﺳﺖ ارﺳﺎل ﻣﯽﺷﻮد و ﻓﺎﯾﻞ ﻫﻨﻮز‬ ‫ﻣﻌﺘﺒﺮ اﺳﺖ ﺑﻪ ﺟﺎي اﯾﻦﮐﻪ ﮐﻞ ﻓﺎﯾﻞ ﺑﺮاي ﻣﺮورﮔﺮ ارﺳﺎل ﺷﻮد ﺗﻨﻬﺎ ﯾﮏ ‪ status code‬از ﻧﻮع ‪304 Not Modified‬‬ ‫ﺑﺮاي ﻣﺮورﮔﺮ ارﺳﺎل ﻣﯽﺷﻮد‪.‬‬ ‫ﻣﺮورﮔﺮ ﺗﻨﻬﺎ از دو ﻃﺮﯾﻖ ﻣﯽﺗﻮاﻧﺪ ﻣﺘﻮﺟﻪ ﺷﻮد ﮐﻪ ﻓﺎﯾﻞ ﻣﻮﺟﻮد ﺑﺮ روي ﺳﺮور ﺑﺎ ﻓﺎﯾﻠﯽ ﮐﻪ در ‪ Cache‬ﻣﺮورﮔﺮ‬ ‫ﻗﺮار دارد‪ ،‬ﯾﮑﺴﺎﻧﻨﺪ‪:‬‬ ‫‪‬‬

‫ﺑﺎ ﻣﻘﺎﯾﺴﻪ ‪last-modified date‬‬

‫‪‬‬

‫ﺑﺎ ﻣﻘﺎﯾﺴﻪ ‪ entity tag‬ﻫﺎ‬

‫‪Last-Modified Date‬‬ ‫ﻣﻘﺪار ‪ last-modified date‬از ﻃﺮﯾﻖ ﺳﺮور در داﺧﻞ ‪ header‬ﺑﺮاي ﻣﺮورﮔﺮ ارﺳﺎل ﻣﯽﺷﻮد‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪۶٣‬‬

‫در اﯾﻦ ﺟﺎ ﻣﺮورﮔﺮ ﻟﻮﮔﻮي ﺳﺎﯾﺖ ﯾﺎﻫﻮ را درﺧﻮاﺳﺖ ﮐﺮده اﺳﺖ ﮐﻪ ﺗﻮﺳﻂ ‪ server‬اﯾﻦ ﻓﺎﯾﻞ ﺑﺮاي ﻣﺮورﮔﺮ ارﺳﺎل‬ ‫ﻣﯽﺷﻮد‪ .‬در ﻣﺮاﺟﻌﻪ ﺑﻌﺪي ﻣﺮورﮔﺮ اﯾﻦ ﻓﺎﯾﻞ را درون ‪ Cache‬دارد و ﻣﯽﺧﻮاﻫﺪ از ﻣﻌﺘﺒﺮ ﺑﻮدن ﻓﺎﯾﻞ ﺧﻮد اﻃﻤﯿﻨﺎن‬ ‫ﺣﺎﺻﻞ ﮐﻨﺪ از اﯾﻦ رو ﺑﺎ ارﺳﺎل درﺧﻮاﺳﺖ ‪ if-modified-since‬در ‪ header‬از ‪ server‬ﻣﯽﺧﻮاﻫﺪ ﮐﻪ ﺗﺎرﯾﺦ‬ ‫‪ last-modified date‬را ﺑﺎ ﻓﺎﯾﻞ روي ‪ server‬ﻣﻘﺎﯾﺴﻪ ﮐﻨﺪ ‪.‬‬

‫زﻣﺎﻧﯽ ﮐﻪ ﻓﺎﯾﻞﻫﺎ ﯾﮑﺴﺎن ﺑﺎﺷﺪ‪ server ،‬در ﭘﺎﺳﺦ ‪ 304 Not Modified‬را ﺑﺮاي ﻣﺮورﮔﺮ ارﺳﺎل ﻣﯽﮐﻨﺪ و ﻣﺮورﮔﺮ‬ ‫ﻣﺘﻮﺟﻪ ﺧﻮاﻫﺪ ﺷﺪ ﮐﻪ ﻓﺎﯾﻞ ﺗﻐﯿﯿﺮ ﻧﮑﺮده و ﻓﺎﯾﻞ را از درون ‪ Cache‬ﻣﯽﺧﻮاﻧﺪ و دﯾﮕﺮ ﯾﮏ ﻓﺎﯾﻞ ‪ 1195‬ﺑﺎﯾﺘﯽ ﺑﺮاي‬ ‫ﻣﺮورﮔﺮ ارﺳﺎل ﻧﻤﯽﺷﻮد‪.‬‬

‫‪Entity tag‬ﻫﺎ‬ ‫اﺳﺘﻔﺎده از ‪ etag‬ﻫﺎ راه دﯾﮕﺮي اﺳﺖ ﺑﺮاي ﻣﻄﻤﺌﻦ ﺷﺪن از اﯾﻦﮐﻪ ﻓﺎﯾﻞ روي ‪ server‬ﺑﺎ ﻓﺎﯾﻞ داﺧﻞ ‪Cache‬‬ ‫ﯾﮑﺴﺎن اﺳﺖ ﯾﺎ ﺧﯿﺮ‪ .‬دﻗﺖ ﮐﻨﯿﺪ ﮐﻪ واژه ‪ Entity‬دﻗﯿﻘﺎ ﻣﻌﺎدل ‪ component‬ﯾﺎ ﻫﻤﺎن اﺟﺰاي ﺻﻔﺤﻪ اﺳﺖ )ﺑﻪ ﻋﻨﻮان‬ ‫ﻣﺜﺎل ﻓﺎﯾﻞﻫﺎي اﺳﮑﺮﯾﭙﺖ‪ CSS ،‬و ﺗﺼﺎوﯾﺮ(‪ Etag .‬ﻫﺎ در ‪ HTTP/1.1‬ﻣﻌﺮﻓﯽ ﺷﺪﻧﺪ‪ Etag .‬ﻫﺎ ﯾﮏ رﺷﺘﻪ ﮐﺎﻣﻼً ﻣﻨﺤﺼﺮ‬ ‫ﺑﻪ ﻓﺮد ﻫﺴﺘﻨﺪ ﮐﻪ ﺑﻪ ﻫﺮ ﯾﮏ از اﺟﺰاي ﺻﻔﺤﻪ اﺧﺘﺼﺎص داده ﻣﯽﺷﻮﻧﺪ‪ .‬ﺗﻨﻬﺎ ﭼﯿﺰي ﮐﻪ در ﻣﻮرد ﻓﺮﻣﺖ ﻧﻮﺷﺘﺎري‬ ‫‪Etag‬ﻫﺎ ﺑﺎﯾﺪ رﻋﺎﯾﺖ ﺷﻮد اﯾﻦ اﺳﺖ ﮐﻪ ﺣﺘﻤﺎً ﺑﺎﯾﺪ داﺧﻞ ﻋﻼﻣﺖ ﻧﻘﻞ ﻗﻮل ﻗﺮار ﺑﮕﯿﺮﻧﺪ‪ Server .‬در ﭘﺎﺳﺦ ﺑﻪ‬ ‫درﺧﻮاﺳﺖ ﻣﺮورﮔﺮ در ‪ header‬اي ﮐﻪ ﺑﺮاي ﻣﺮورﮔﺮ ارﺳﺎل ﻣﯽﮐﻨﺪ‪ Etag ،‬ﻣﺮﺑﻮط ﺑﻪ ﻓﺎﯾﻞ را ﻧﯿﺰ ﺑﺮاي ﻣﺮورﮔﺮ‬ ‫ارﺳﺎل ﻣﯽﮐﻨﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪۶۴‬‬

‫‪Etag‬ﻫﺎ ﺑﻪ اﯾﻦ ﺟﻬﺖ اﺧﺘﺮاع ﺷﺪﻧﺪ ﺗﺎ ﻣﮑﺎﻧﯿﺰم اﻧﻌﻄﺎف ﭘﺬﯾﺮﺗﺮي ﻧﺴﺒﺖ ﺑﻪ ‪ last-modified date‬ﻫﺎ‬ ‫داﺷﺘﻪ ﺑﺎﺷﻨﺪ‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل اﮔﺮ ﯾﮏ ﺟﺰء ﺻﻔﺤﻪ ﺑﺮ اﺳﺎس ‪ user-agent‬و ﯾﺎ ‪ accept-language‬ﺗﻐﯿﯿﺮ ﮐﻨﺪ‪ ،‬اﯾﻦ‬ ‫ﺗﻐﯿﯿﺮ در ‪ Etag‬ﻣﻨﻌﮑﺲ ﺧﻮاﻫﺪ ﺷﺪ‪ .‬ﺳﭙﺲ‪ ،‬اﮔﺮ ﻣﺮورﮔﺮ ﺑﺨﻮاﻫﺪ ﮐﻪ اﺟﺰاي ﺻﻔﺤﻪ را ‪ validate‬ﮐﻨﺪ از دﺳﺘﻮر‬ ‫‪ If-None-Match‬در ‪ header‬اﺳﺘﻔﺎده ﻣﯽﮐﻨﺪ و ﻣﻘﺪار ‪ Etag‬را ﺑﺮاي ‪ server‬ارﺳﺎل ﻣﯽﮐﻨﺪ‪ ،‬اﮔﺮ ‪Etag‬ﻫﺎ ﺑﺎ ﻫﻢ‬ ‫ﯾﮑﺴﺎن ﺑﺎﺷﻨﺪ‪ server ،‬دﺳﺘﻮر ‪ 304 status code‬را ﺑﺮﻣﯽﮔﺮداﻧﺪ و ﻓﺎﯾﻞ دﯾﮕﺮ ﺑﺮاي ﮐﺎرﺑﺮ ارﺳﺎل ﻧﻤﯽﺷﻮد و‬ ‫ﻫﻤﺎن ﻓﺎﯾﻞ داﺧﻞ ‪ Cache‬اﺳﺘﻔﺎده ﺧﻮاﻫﺪ ﺷﺪ‪.‬‬

‫ﻣﺸﮑﻼﺗﯽ ﮐﻪ ‪ Etag‬ﻫﺎ اﯾﺠﺎد ﻣﯽﮐﻨﻨﺪ‪.‬‬ ‫ﻣﺸﮑﻼت ‪ Etag‬ﻫﺎ از آنﺟﺎﺋﯽ ﺷﺮوع ﻣﯽﺷﻮد ﮐﻪ آﻧﻬﺎ ﺑﺮ اﺳﺎس ﺧﺼﯿﺼﻪﻫﺎﯾﯽ ﺳﺎﺧﺘﻪ ﻣﯽﺷﻮﻧﺪ و اﯾﻦ ﺧﺼﯿﺼﻪﻫﺎ‬ ‫ﺑﺎﻋﺚ ﻣﯽﺷﻮﻧﺪ ﮐﻪ اﯾﻦ ‪ Etag‬ﺑﺮ روي ﻫﺮ ‪ server‬ﮐﺎﻣﻼً ﻣﻨﺤﺼﺮ ﺑﻪ ﻓﺮد ﺑﺎﺷﺪ‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﻓﺎﯾﻠﯽ ﺗﻮﺳﻂ ﻣﺮورﮔﺮ‬ ‫از ﯾﮏ ‪ server‬درﯾﺎﻓﺖ ﻣﯽﺷﻮد وﻟﯽ در ﻣﺮاﺟﻌﻪ ﺑﻌﺪي اﯾﻦ ﻓﺎﯾﻞ از ‪ Server‬دﯾﮕﺮي ﺑﺮاي ﮐﺎرﺑﺮ ارﺳﺎل ﻣﯽﺷﻮد و‬ ‫در اﯾﻦﺟﺎ اﮔﺮ ﭼﻪ ﻓﺎﯾﻞﻫﺎ ﯾﮑﺴﺎن ﻫﺴﺘﻨﺪ وﻟﯽ ‪Etag‬ﻫﺎ ﻣﺘﻔﺎوت ﺧﻮاﻫﺪ ﺑﻮد از اﯾﻦ رو ﺑﺎ اﯾﻦﮐﻪ ﻓﺎﯾﻞ در ‪Cache‬‬ ‫ﻣﺮورﮔﺮ ﻗﺮار دارد وﻟﯽ ﺑﺎز ﻫﻢ از ‪ Server‬درﺧﻮاﺳﺖ ﺷﺪه و درﯾﺎﻓﺖ ﻣﯽﺷﻮد‪ .‬ﺑﺴﯿﺎري از ﺳﺎﯾﺖﻫﺎي ﺑﺰرگ ﺑﺮ‬ ‫روي ﺑﯿﺶ از ﯾﮏ ‪ server‬ﻗﺮار دارﻧﺪ و اﯾﻦ ﻣﺸﮑﻼت ﺑﺮاي ﻫﻤﻪ اﯾﻦ ﺳﺎﯾﺖﻫﺎ ﺑﺮوز ﻣﯽﮐﻨﺪ‪.‬‬ ‫ﻓﺮﻣﺖ ‪ Etag‬ﻫﺎ ﺑﺮ روي ‪ server‬ﻫﺎي ‪ Apache 1.3‬و ‪ Apache 2.x‬ﺑﻪ ﺷﮑﻞ ‪ inode-size-timestamp‬اﺳﺖ‪.‬‬ ‫‪ Inode‬ﻫﺎ ﺗﻮﺳﻂ ‪ filesystem‬ﻫﺎ اﺳﺘﻔﺎده ﻣﯽﺷﻮﻧﺪ و اﻃﻼﻋﺎﺗﯽ ﻫﻤﭽﻮن ﻧﻮع ﻓﺎﯾﻞ‪ ،‬ﺻﺎﺣﺐ‪ ،‬ﮔﺮوه و ﺷﯿﻮه‬ ‫دﺳﺘﺮﺳﯽ را در آن ذﺧﯿﺮه ﻣﯽﮐﻨﻨﺪ‪ .‬اﮔﺮ ﭼﻪ ﻣﻤﮑﻦ اﺳﺖ ﯾﮏ ﻓﺎﯾﻞ ﺑﺎ ﺳﺎﯾﺰ ﻓﺎﯾﻞ ﯾﮑﺴﺎن ﺑﺮ روي ﺳﺮورﻫﺎي ﻣﺨﺘﻠﻒ‬ ‫وﺟﻮد داﺷﺘﻪ ﺑﺎﺷﺪ وﻟﯽ ﺑﺮ روي ﻫﺮ ‪ server‬ﻣﻘﺪار ‪ inode‬ﻫﺎ ﺑﺮاي ﻓﺎﯾﻞ ﻣﺘﻔﺎوت اﺳﺖ‪.‬‬ ‫‪ IIS‬ﻧﺴﺨﻪ ‪ 5‬و ‪ 6‬ﻫﻢ ﻣﺸﮑﻞ ﻣﺸﺎﺑﻪ را داراﺳﺖ‪ .‬ﻓﺮﻣﺖ ‪ ETag‬ﺑﺮ روي ‪ IIS‬ﺑﻪ ﺷﮑﻞ‬ ‫‪ Filetimestamp:ChangeNumber‬اﺳﺖ‪ ChangeNumber .‬ﯾﮏ ﺷﻤﺎرﻧﺪه اﺳﺖ ﮐﻪ ﺑﺮاي ردﯾﺎﺑﯽ ﺗﻐﯿﯿﺮات در‬ ‫ﺗﻨﻈﯿﻤﺎت ‪ IIS‬اﺳﺘﻔﺎده ﻣﯽﺷﻮد‪ .‬ﺑﻌﯿﺪ اﺳﺖ ﮐﻪ ﻣﻘﺪار ‪ ChangeNumber‬در ‪ server‬ﻫﺎي ﻣﺨﺘﻠﻒ ‪ IIS‬ﯾﮑﺴﺎن ﺑﺎﺷﺪ‪.‬‬ ‫در ﻧﻬﺎﯾﺖ ‪ Etag‬ﻫﺎﯾﯽ ﮐﻪ ﺗﻮﺳﻂ ‪ Apache‬و ‪ IIS‬ﺗﻮﻟﯿﺪ ﻣﯽ ﺷﻮﻧﺪ ﺑﺮاي ﯾﮏ ﻓﺎﯾﻞ واﺣﺪ در ‪ server‬ﻫﺎي ﻣﺨﺘﻠﻒ‪،‬‬ ‫ﻣﺘﻔﺎوت اﺳﺖ‪ .‬در اﯾﻦ ﺣﺎﻟﺖ ﺑﻪ ﺟﺎي اﯾﻨﮑﻪ ﻣﺮورﮔﺮ ﯾﮏ ﭘﺎﺳﺦ ﺳﺮﯾﻊ ‪ 403‬درﯾﺎﻓﺖ ﮐﻨﺪ در ﻋﻮض ﺑﺮاي ﯾﮏ ﻓﺎﯾﻠﯽ ﮐﻪ‬ ‫در ‪ Cache‬ﺧﻮد در اﺧﺘﯿﺎر دارد ﯾﮏ ﺑﺎر دﯾﮕﺮ ﻓﺎﯾﻞ را از ﻧﻮ درﯾﺎﻓﺖ ﻣﯽﮐﻨﺪ و درﺧﻮاﺳﺖ ‪ 200‬ﺑﺮاي ﮐﺎرﺑﺮ ارﺳﺎل‬

‫‪www.ParsBook.org‬‬

‫‪۶۵‬‬

‫ﻣﯽﺷﻮد‪ .‬اﮔﺮ ﺷﻤﺎ ﺳﺎﯾﺖ ﺧﻮد را ﺑﺮ روي ﺗﻨﻬﺎ ﯾﮏ ‪ server‬ﻗﺮار داده اﯾﺪ ﻣﺸﮑﻠﯽ ﻧﺨﻮاﻫﯿﺪ داﺷﺖ وﻟﯽ اﮔﺮ ﺳﺎﯾﺖ ﺷﻤﺎ‬ ‫ﺑﺮ روي ﺑﯿﺶ از ﯾﮏ ﺳﺮور ﻗﺮار داﺷﺘﻪ ﺑﺎﺷﺪ‪ ،‬ﮐﺎرﺑﺮان ﺷﻤﺎ ﻓﺎﯾﻞﻫﺎﯾﯽ ﮐﻪ در اﺧﺘﯿﺎر دارﻧﺪ را ﺑﺎرﻫﺎ و ﺑﺎرﻫﺎ درﯾﺎﻓﺖ‬ ‫ﺧﻮاﻫﻨﺪ ﮐﺮد‪.‬‬ ‫اﯾﻦ ﮐﺎر ﺑﺎﻋﺚ ﺑﺎﻻ رﻓﺘﻦ ‪ load‬ﺳﺮورﻫﺎي ﺷﻤﺎ ﺧﻮاﻫﺪ ﺷﺪ و ﭘﻬﻨﺎي ﺑﺎﻧﺪ ﺷﻤﺎ را ﺑﯿﻬﻮده ﻫﺪر ﺧﻮاﻫﺪ داد‪ .‬ﺑـﻪ ﻋﺒـﺎرﺗﯽ‬ ‫اﮔﺮ ﻓﺎﯾﻞﻫﺎي ﺷﻤﺎ ﺑﺮ روي ‪ 10‬ﺳﺮور ﻣﺨﺘﻠﻒ ﻗﺮار داﺷﺘﻪ ﺑﺎﺷﺪ ﮐﺎرﺑﺮ ‪ 90‬درﺻﺪ اﺣﺘﻤﺎل دارد ﮐﻪ ﻓـﺎﯾﻠﯽ ﺗﮑـﺮاري را‬ ‫درﯾﺎﻓﺖ ﮐﻨﺪ‪.‬‬ ‫ﻋﻼوه ﺑﺮ آن ‪ Etag‬ﻫﺎ ﻣﺸﮑﻼﺗﯽ را در ﺣﯿﻦ اﺳﺘﻔﺎده از ‪ proxy server‬ﻫﺎ اﯾﺠﺎد ﻣﯽﮐﻨﻨﺪ‪ .‬ﻓﺎﯾﻞﻫﺎﯾﯽ ﮐﻪ ﺑﺮ روي‬ ‫‪ proxy‬ﻫﺎ ‪ Cache‬ﻣﯽﺷﻮﻧﺪ‪ Etag،‬ﻫﺎﯾﯽ ﻣﺘﻔﺎوت از ﻓﺎﯾﻞﻫﺎي ﻣﻮﺟﻮد ﺑﺮ روي ‪ server‬اﺻﻠﯽ ﺧﻮاﻫﻨﺪ داﺷﺖ‪ .‬ﺑﻪ‬ ‫ﻫﻤﯿﻦ ﺧﺎﻃﺮ ﺑﺎز ﻫﻢ درﺧﻮاﺳﺖﻫﺎي اﺿﺎﻓﻪ و ﺑﯿﻬﻮده از ﺳﻮي ﻣﺮورﮔﺮ ارﺳﺎل ﺧﻮاﻫﺪ ﺷﺪ و ﻓﺎﯾﻞﻫﺎﯾﯽ ﺗﮑﺮاري‬ ‫ﺗﻮﺳﻂ ﮐﺎرﺑﺮ درﯾﺎﻓﺖ ﻣﯽﺷﻮد‪.‬‬ ‫آﯾﺎ از ‪ Etag‬ﻫﺎ اﺳﺘﻔﺎده ﮐﻨﯿﻢ ﯾﺎ ﺧﯿﺮ؟‬ ‫اﮔﺮ ﺳﺎﯾﺖ ﺷﻤﺎ ﺑﺮ روي ﭼﻨﺪ ﺳﺮور ﻗﺮار داﺷﺘﻪ ﺑﺎﺷﺪ‪ ،‬وﺟﻮد ‪ Etag‬ﻫﺎ ﺑﺎﻋﺚ ﻣﯽﺷﻮد ﮐﻪ ﭘﻬﻨﺎي ﺑﺎﻧﺪ‬ ‫ﺑﯿﺸﺘﺮي ﻣﺼﺮف ﮐﻨﯿﺪ و ﺳﺮورﻫﺎي ﺷﻤﺎ ﻓﺸﺎر ﺑﯿﺸﺘﺮي را ﺗﺤﻤﻞ ﮐﻨﻨﺪ و ﺻﻔﺤﺎﺗﯽ ﮐﻨﺪﺗﺮ ﻧﯿﺰ داﺷﺘﻪ ﺑﺎﺷﯿﺪ‪ .‬ﺷﺎﯾﺪ‬ ‫ﺑﮕﻮﺋﯿﺪ ﮐﻪ ﻣﻦ ‪ expire header‬ﻫﺎ را ﺑﻪ ﺗﻤﺎﻣﯽ اﺟﺰاي ﺻﻔﺤﻪ اﺿﺎﻓﻪ ﮐﺮدهام و زﻣﺎﻧﯽ دور در آﯾﻨﺪه را ﺑﻪ آن‬ ‫اﺧﺘﺼﺎص دادهام از اﯾﻦ رو دﯾﮕﺮ ﻫﯿﭻ درﺧﻮاﺳﺖ ﺷﺮﻃﯽ‪ HTTP‬ارﺳﺎل ﻧﺨﻮاﻫﺪ ﺷﺪ وﻟﯽ ﻣﺘﺎﺳﻔﺎﻧﻪ زﻣﺎﻧﯽ ﮐﻪ ﮐﺎرﺑﺮ‬ ‫روي دﮐﻤﻪ ‪ reload‬ﯾﺎ ‪ refresh‬ﮐﻠﯿﮏ ﮐﻨﺪ‪ ،‬اﯾﻦ درﺧﻮاﺳﺖﻫﺎي ﺷﺮﻃﯽ دوﺑﺎره ارﺳﺎل ﺧﻮاﻫﻨﺪ ﺷﺪ‪ .‬ﻣﯽﺗﻮان از‬ ‫‪Etag‬ﻫﺎ ﺑﺮاي ﻣﻘﺎﺻﺪ دﯾﮕﺮي اﺳﺘﻔﺎده ﮐﺮد وﻟﯽ در ﮐﻞ اﮔﺮ ﺑﻪ آﻧﻬﺎ ﻧﯿﺎزي ﻧﺪارﯾﺪ ﻣﯽﺗﻮاﻧﯿﺪ ﮐﺎﻣﻼً ﺣﺬﻓﺸﺎن ﮐﻨﯿﺪ‪ .‬ﻫﺮ‬ ‫دوي ﺳﺮورﻫﺎي ‪ Apache‬و ‪ IIS‬ﻣﺘﻮﺟﻪ ﻣﺸﮑﻼت ‪ Etag‬ﻫﺎ ﺷﺪهاﻧﺪ و ﭘﯿﺸﻨﻬﺎد دادهاﻧﺪ ﮐﻪ ﻣﺤﺘﻮﯾﺎت آن را ﺗﻐﯿﯿﺮ‬ ‫دﻫﯿﺪ‪.‬‬ ‫آﭘﺎﭼﯽ ﻧﺴﺨﻪ ‪ 1.3.23‬ﺑﻪ ﺑﻌﺪ از دﺳﺘﻮر ‪ FileEtag‬ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽﮐﻨﻨﺪ ﮐﻪ ﺑﺎ اﺳﺘﻔﺎده از آﻧﻬﺎ ﻣﯽﺗﻮاﻧﯿﺪ‬ ‫‪ inode‬ﻫﺎ را از ‪ Etag‬ﻫﺎ ﺣﺬف ﮐﺮده و ﻣﺸﮑﻞ را ﺑﺮﻃﺮف ﮐﻨﯿﺪ‪ .‬ﻫﻤﯿﻦ ﮐﺎر را ﻣﯽﺗﻮاﻧﯿﺪ ﺑﺎ اﺳﺘﻔﺎده از ﺗﻨﻈﯿﻤﺎﺗﯽ ﺑﺮ‬ ‫روي ‪ IIS‬اﻧﺠﺎم دﻫﯿﺪ و ‪ ChangeNumber‬ﻫﺎ را ﺑﻪ ﻣﻘﺪاري ﺛﺎﺑﺖ ﺗﻐﯿﯿﺮ دﻫﯿﺪ ﺗﺎ در ﺗﻤﺎﻣﯽﺳﺮورﻫﺎ ﯾﮑﺴﺎن ﺑﺎﺷﺪ‪.‬‬ ‫ﺑﺎز ﺑﺎ اﯾﻦﺣﺎل اﯾﻦ ﺗﻐﯿﯿﺮات ﺑﺎﻋﺚ ﻣﯽﺷﻮد ﮐﻪ ‪ Etag‬ﻫﺎ ﯾﮑﺴﺎن ﺷﻮﻧﺪ و ﺑﻬﺘﺮ اﺳﺖ ﮐﻪ ﮐﺎﻣﻼً آﻧﻬﺎ را ﺣﺬف ﮐﻨﯿﺪ‪ .‬ﺗﻨﻬﺎ‬ ‫وﺟﻮد ‪ Last-Modified‬ﻫﺎ ﮐﻔﺎﯾﺖ ﻣﯽﮐﻨﺪ‪ .‬ﺣﺬف ‪ Etag‬ﻫﺎ ﺣﺠﻢ ‪ header‬ﻫﺎ را ﻧﯿﺰ ﮐﺎﻫﺶ ﻣﯽدﻫﺪ‪ .‬در آﭘﺎﭼﯽ ﺑﺎ‬ ‫اﺿﺎﻓﻪ ﮐﺮدن اﯾﻦ دﺳﺘﻮر ﺑﻪ راﺣﺘﯽ ﻣﯽﺗﻮاﻧﯿﺪ ‪ Etag‬ﻫﺎ را ﺣﺬف ﮐﻨﯿﺪ‪:‬‬ ‫‪FileETag none‬‬

‫!‬

‫‪ Etag‬ﻫﺎ را ﺗﻨﻈﯿﻢ و ﯾﺎ ﮐﺎﻣﻼً ﺣﺬف ﮐﻨﯿﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪۶۶‬‬

‫‪ -11‬ﺗﺼﺎوﯾﺮ را ﺑﻬﯿﻨﻪ ﮐﻨﯿﺪ‬ ‫ﺗﺼﺎوﯾﺮ از اﺟﺰاي ﺟﺪاﯾﯽ ﻧﺎﭘﺬﯾﺮ ﺻﻔﺤﺎت وب ﺷﺪهاﻧﺪ‪ .‬از ﻃﺮﻓﯽ اﯾﻦ ﺑﺨﺶ از ﺻﻔﺤﺎت وب ﻣﻌﻤﻮﻻ ﺣﺠﻢ‬ ‫ﺑﺎﻻﯾﯽ دارﻧﺪ‪ .‬اﻏﻠﺐ ﺗﺼﺎوﯾﺮ ﺣﺪاﻗﻞ ﻧﯿﻤﯽاز ﺣﺠﻢ ﺻﻔﺤﻪ را ﺷﺎﻣﻞ ﻣﯽﺷﻮﻧﺪ‪ .‬از اﯾﻦ رو ﺗﺼﺎوﯾﺮ از ﺟﻤﻠﻪ ﻣﻮاردي‬ ‫ﻫﺴﺘﻨﺪ ﮐﻪ ﺣﺘﻤﺎً ﺑﺎﯾﺪ ﻣﻮرد ﺗﻮﺟﻪ ﻗﺮار ﮔﯿﺮﻧﺪ و ﺣﺠﻤﺸﺎن ﮐﺎﻫﺶ ﯾﺎﺑﺪ‪ .‬در اﯾﻦ ﺗﺼﻮﯾﺮ ﻣﯿﺰان اﺳﺘﻔﺎده از ﺗﺼﺎوﯾﺮ در‬ ‫ﺑﺮﺧﯽ از ﺳﺎﯾﺖﻫﺎي ﻣﻄﺮح دﻧﯿﺎ آورده ﺷﺪه اﺳﺖ‪ .‬ﻫﻤﺎﻧﻄﻮر ﮐﻪ در ﺗﺼﻮﯾﺮ ﻧﻤﺎﯾﺎن اﺳﺖ ﺗﻘﺮﯾﺒﺎ ﻧﯿﻤﯽ از ﺣﺠﻢ‬ ‫ﺻﻔﺤﺎت را ﺗﺼﺎوﯾﺮ ﺗﺸﮑﯿﻞ ﻣﯽدﻫﻨﺪ‪.‬‬

‫راهﻫﺎي ﻣﺨﺘﻠﻔﯽ ﺑﺮاي ﮐﺎﻫﺶ ﺣﺠﻢ ﺗﺼﺎوﯾﺮ وﺟﻮد دارد‪ .‬اﮔﺮ ﺗﺼﺎوﯾﺮ ﺧﻮد را ﺑﻬﯿﻨﻪ ﻧﮑﻨﯿﺪ ﻣﻘﺪاري داده ﺑﯽارزش را‬ ‫ﮐﻪ در ﺗﺼﺎوﯾﺮ ذﺧﯿﺮه ﺷﺪه اﺳﺖ ﺑﺮاي ﮐﺎرﺑﺮان ارﺳﺎل ﻣﯽﮐﻨﯿﺪ در ﺣﺎﻟﯽ ﮐﻪ اﯾﻦ دادهﻫﺎ ﺑﺮ روي وب ﻫﯿﭻ ارزﺷﯽ‬ ‫ﻧﺪارﻧﺪ و ﺗﻨﻬﺎ زﻣﺎن ﺑﺎرﮔﺬاري ﺻﻔﺤﻪ را ﻃﻮﻻﻧﯽ ﻣﯽﮐﻨﻨﺪ‪.‬‬

‫ﻓﺮﻣﺖﻫﺎي ﺗﺼﻮﯾﺮي راﯾﺞ ﺑﺮاي وب‬ ‫ﺑﺮاي ﺑﻬﯿﻨﻪ ﺳﺎزي ﺗﺼﺎوﯾﺮ ﻧﺨﺴﺖ ﺑﺎﯾﺪ ﻓﺮﻣﺖﻫﺎي راﯾﺞ ﺗﺼﺎوﯾﺮ را ﺑﺸﻨﺎﺳﯿﻢ و ﺷﯿﻮه ﺑﻬﯿﻨﻪﺳﺎزي ﻫﺮ ﮐﺪام را‬ ‫ﻓﺮاﺑﮕﯿﺮﯾﻢ‪ .‬ﻓﺮﻣﺖﻫﺎي راﯾﺞ ﺑﺮاي وب ‪ GIF, PNG‬و ‪ JPEG‬اﺳﺖ ﮐﻪ ﻫﺮ ﮐﺪام را ﺑﻪ ﻃﻮر ﻣﺠﺰا ﺑﺮرﺳﯽ ﻣﯽﮐﻨﯿﻢ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪۶٧‬‬

‫ﻓﺮﻣﺖ ﺗﺼﻮﯾﺮي ‪GIF‬‬ ‫‪ GIF‬ﻣﺨﻔﻒ ﻋﺒﺎرت ‪ Graphic Interchange Format‬اﺳﺖ‪ .‬اﯾﻦ ﻓﺮﻣﺖ ﺗﺼﻮﯾﺮي از ﺷﻔﺎﻓﯿﺖ ﭘﺸﺘﯿﺒﺎﻧﯽ‬ ‫ﻣﯽﮐﻨﺪ وﻟﯽ ﻣﺪل ﭘﺸﺘﯿﺒﺎﻧﯽ آن ﺑﻪ ﺷﮑﻞ ‪ binary‬اﺳﺖ ﺑﻪ ﻋﺒﺎرﺗﯽ ﯾﮏ ﭘﯿﮑﺴﻞ ﯾﺎ ﻣﯽﺗﻮاﻧﺪ ﮐﺎﻣﻼ ﻣﺎت ﺑﺎﺷﺪ ﯾﺎ ﮐﺎﻣﻼ‬ ‫ﺷﻔﺎف‪ .‬ﭘﯿﮑﺴﻞﻫﺎي ﻧﯿﻤﻪ ﺷﻔﺎف در اﯾﻦ ﻓﺮﻣﺖ ﺗﺼﻮﯾﺮي ﭘﺸﺘﯿﺒﺎﻧﯽ ﻧﻤﯽﺷﻮد‪ .‬ﭘﯿﮑﺴﻞﻫﺎي ﻧﯿﻤﻪ ﺷﻔﺎف را اﺻﻄﻼﺣﺎ‬ ‫ﭘﯿﮑﺴﻞﻫﺎي داراي ‪ Alpha transparency‬ﻣﯽﮔﻮﯾﻨﺪ‪ .‬اﯾﻦ ﻓﺮﻣﺖ ﺗﺼﻮﯾﺮي از ﺗﺼﺎوﯾﺮ ﻣﺘﺤﺮك ﻫﻢ ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽﮐﻨﺪ‬ ‫و ﻣﯽ ﺗﻮان ﭼﻨﺪ ﺗﺼﻮﯾﺮ را در ﯾﮏ ﺗﺼﻮﯾﺮ ﻗﺮار داد ﮐﻪ ﺑﺎ ﯾﮏ ﻓﺎﺻﻠﻪ زﻣﺎﻧﯽ ﻫﺮ ﮐﺪام از اﯾﻦ ﻓﺮﯾﻢﻫﺎ ﺑﻪ ﻧﻤﺎﯾﺶ در‬ ‫ﺧﻮاﻫﻨﺪ آﻣﺪ‪ .‬اﯾﻦ ﻓﺮﻣﺖ ﺗﺼﻮﯾﺮي ﺗﺼﺎوﯾﺮ را ﺑﺪون اﻓﺖ ﮐﯿﻔﯿﺖ ذﺧﯿﺮه ﻣﯽﮐﻨﺪ‪ .‬اﯾﻦ ﺑﺪان ﻣﻌﻨﯽ اﺳﺖ ﮐﻪ ﻣﯽﺗﻮاﻧﯿﺪ اﯾﻦ‬ ‫ﺗﺼﺎوﯾﺮ را ﺑﺎز ﮐﺮده و دوﺑﺎره ذﺧﯿﺮه ﮐﻨﯿﺪ ﺑﺪون اﯾﻨﮑﻪ ﮐﯿﻔﯿﺖ آﻧﻬﺎ اﻓﺖ داﺷﺘﻪ ﺑﺎﺷﺪ‪ .‬اﯾﻦ ﻓﺮﻣﺖ از ﯾﮏ اﻟﮕﻮرﯾﺘﻢ‬ ‫ﻓﺸﺮدهﺳﺎزي اﺳﺘﻔﺎده ﻣﯽﮐﻨﺪ ﺑﻪ ﻧﺎم ‪ LZW‬ﮐﻪ ﭘﯿﮑﺴﻞﻫﺎ را ﺑﻪ ﺷﮑﻞ اﻓﻘﯽ ‪ render‬ﻣﯽﮐﻨﺪ‪ .‬ﺑﻪ ﻋﺒﺎرﺗﯽ اﮔﺮ ﺗﺼﻮﯾﺮ‬ ‫ﺷﻤﺎ ﺣﺎوي ﯾﮏ اﻟﮕﻮي ﺗﮑﺮار ﺷﺪﻧﯽ اﺳﺖ‪ .‬اﮔﺮ اﯾﻦ اﻟﮕﻮ در ﻋﺮض ﺗﮑﺮار ﺷﻮد ﺣﺠﻢ ﮐﻤﺘﺮي ﭘﯿﺪا ﻣﯽﮐﻨﺪ و اﮔﺮ در‬ ‫ﻃﻮل ﺗﮑﺮار ﺷﻮد ﺑﺎ اﯾﻨﮑﻪ ﺳﺎﯾﺰ ﻫﺮ دو ﺗﺼﻮﯾﺮ ﯾﮑﺴﺎن اﺳﺖ وﻟﯽ ﺗﺼﻮﯾﺮ دوم ﺣﺠﯿﻢﺗﺮ ﺧﻮاﻫﺪ ﺷﺪ‪.‬‬ ‫ﺗﺼﺎوﯾﺮ ‪ GIF‬ﺗﻨﻬﺎ ‪ 256‬رﻧﮓ را ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽ ﮐﻨﻨﺪ و اﮔﺮ ﺗﺼﻮﯾﺮ ﺷﻤﺎ ﺑﯿﺶ از اﯾﻦ ﺗﻌﺪاد رﻧﮓ را داﺷﺘﻪ ﺑﺎﺷﺪ‪،‬‬ ‫رﻧﮓﻫﺎي اﺿﺎﻓﻪ ﺑﺎ رﻧﮓﻫﺎي دﯾﮕﺮ ﮐﻪ در اﯾﻦ ‪ 256‬رﻧﮓ وﺟﻮد دارد‪ ،‬ﺟﺎﯾﮕﺰﯾﻦ ﻣﯽﺷﻮﻧﺪ‪ .‬اﻟﮕﻮرﯾﺘﻢ ﻓﺸﺮدهﺳﺎزي ‪LZW‬‬ ‫ﻣﺘﻌﻠﻖ ﺑﻪ ﺷﺮﮐﺖ ﺧﺎص ﺑﻮد و اﺳﺘﻔﺎده از آن ﻣﺤﺪودﯾﺖﻫﺎﯾﯽ را ﺑﺮاي ﻃﺮاﺣﺎن اﯾﺠﺎد ﻣﯽﮐﺮد ﮐﻪ اﻣﺘﯿﺎز آن ﻧﯿﺰ در‬ ‫ﺳﺎل ‪ 2004‬ﻣﻨﻘﻀﯽ ﺷﺪ و ﻣﯽ ﺗﻮان ﺑﺪون ﻣﺸﮑﻞ از اﯾﻦ ﻓﺮﻣﺖ ﺗﺼﻮﯾﺮي اﺳﺘﻔﺎده ﮐﺮد‪ .‬اﻟﺒﺘﻪ ﺗﺼﺎوﯾﺮ ‪ PNG8‬ﺑﺮ اﯾﻦ‬ ‫ﻓﺮﻣﺖ ﺗﺼﻮﯾﺮي ارﺟﺤﯿﺖ دارﻧﺪ‪.‬‬ ‫ﺑﻬﯿﻨﻪ ﺳﺎزي ‪ GIF‬ﻫﺎي ﻣﺘﺤﺮك‬ ‫ﺑﺮاي ﺑﻬﯿﻨﻪ ﺳﺎزي ﺗﺼﺎوﯾﺮ ‪ GIF‬ﮐﺎر ﺧﺎﺻﯽ ﻧﻤﯽﺗـﻮان اﻧﺠـﺎم داد‪ .‬ﺗﻨﻬـﺎ ﻣـﯽﺗـﻮان ﺑـﺎ اﺳـﺘﻔﺎده از اﺑـﺰاري‪،‬‬ ‫ﺗﺼﺎوﯾﺮ ﻣﺘﺤﺮك اﯾﻦ ﻓﺮﻣﺖ را ﺑﻬﯿﻨﻪ ﮐﺮد‪ .‬اﯾﻦ اﺑﺰار ‪ Gifsicle‬ﻧﺎم دارد‪ .‬ﮐﺎر اﯾﻦ اﺑﺰار اﯾﻦ اﺳﺖ ﮐﻪ ﻣﯽﺗﻮاﻧﺪ ﻓﺮﯾﻢﻫﺎي‬ ‫ﻣﻮﺟﻮد در ﺗﺼﻮﯾﺮ ﻣﺘﺤﺮك را ﺑﺮرﺳﯽ ﮐﻨﺪ و ﺑﺒﯿﻨﺪ ﮐﻪ ﭼﻪ ﺑﺨﺶﻫﺎﯾﯽ از ﺗﺼﻮﯾﺮ در ﺑﯿﻦ ﻓﺮﯾﻢﻫﺎ ﺗﻐﯿﯿﺮ ﻧﮑﺮده اﺳﺖ و‬ ‫ﺳﭙﺲ اﯾﻦ ﺑﺨﺶﻫﺎي ﻣﺸﺘﺮك را از ﺗﺼﺎوﯾﺮ ﺑﻌﺪي ﺣﺬف ﻣﯽﮐﻨﺪ ﺗﺎ ﺣﺠﻢ ﻓﺎﯾﻞ ﻣﺘﺤﺮك ﮐﺎﻫﺶ ﭘﯿﺪا ﮐﻨﺪ‪.‬‬ ‫ﺑﺮاي اﺳﺘﻔﺎده از اﯾﻦ ﺑﺮﻧﺎﻣﻪ ﺑﺎﯾﺪ از اﯾﻦ دﺳﺘﻮر اﺳﺘﻔﺎده ﮐﻨﯿﻢ‪:‬‬ ‫‪gifsicle -O2 src.gif > dest.gif‬‬

‫‪www.ParsBook.org‬‬

‫‪۶٨‬‬

‫ﻓﺮﻣﺖ ﺗﺼﻮﯾﺮي ‪JPEG‬‬ ‫اﯾﻦ ﻧﺎم ﻣﺨﻔﻒ ﻋﺒﺎرت ‪ Joint Photographic Expert Group‬اﺳﺖ ﮐﻪ ﻧﺎم ﺳﺎزﻣﺎﻧﯽ اﺳﺖ ﮐﻪ اﯾﻦ ﻓﺮﻣﺖ را‬ ‫ﺗﻮﺳﻌﻪ داده اﺳﺖ‪ .‬اﯾﻦ ﻓﺮﻣﺖ ﯾﮏ ﻓﺮﻣﺖ ﺷﻨﺎﺧﺘﻪ ﺷﺪه و ﺑﺴﯿﺎر ﻣﻌﺮوف ﺑﺮاي ذﺧﯿﺮه ﺳﺎزي ﺗﺼﺎوﯾﺮ اﺳﺖ‪ .‬اﯾﻦ‬ ‫ﻓﺮﻣﺖ ﺑﺎ اﺳﺘﻔﺎده از اﻟﮕﻮرﯾﺘﻤﯽ ﺗﻤﺎﻣﯽ رﻧﮓﻫﺎ ﯾﯽ را ﮐﻪ ﭼﺸﻢ اﻧﺴﺎن ﺑﻪ آﻧﻬﺎ ﺣﺴﺎﺳﯿﺖ ﻧﺪارد را از ﺻﻔﺤﻪ ﺣﺬف‬ ‫ﻣﯽﮐﻨﻨﺪ و ﺑﻪ اﯾﻦ ﻃﺮﯾﻖ ﺳﺎﯾﺰ ﺗﺼﻮﯾﺮ ﺑﻪ ﻣﯿﺰان ﻗﺎﺑﻞ ﻣﻼﺣﻈﻪاي ﮐﺎﻫﺶ ﻣﯽﯾﺎﺑﺪ‪ .‬ذﺧﯿﺮه ﮐﺮدن ﺗﺼﻮﯾﺮ ﺑﺎ اﯾﻦ ﻓﺮﻣﺖ ﺑﺎ‬ ‫ﮐﺎﻫﺶ ﮐﯿﻔﯿﺖ ﺗﺼﻮﯾﺮ ﻫﻤﺮاه اﺳﺖ‪ .‬ﺣﺘﯽ اﮔﺮ ﻣﯿﺰان ﮐﯿﻔﯿﺖ ﺗﺼﻮﯾﺮ را در ﻫﻨﮕﺎم ذﺧﯿﺮه ﺳﺎزي ﺑﺮ روي ‪ 100‬درﺻﺪ‬ ‫ﻫﻢ ﻗﺮار دﻫﯿﺪ ﺑﺎز ﻫﻢ ﮐﺎﻫﺶ ﮐﯿﻔﯿﺖ ﺧﻮاﻫﯿﺪ داﺷﺖ‪ .‬اﮔﺮ ﯾﮏ ﺗﺼﻮﯾﺮ را ﭼﻨﺪ ﺑﺎر ﺑﺎز ﮐﺮده و ذﺧﯿﺮه ﮐﻨﯿﺪ در ﻫﺮ ﻧﻮﺑﺖ‬ ‫ﻗﺪري از ﮐﯿﻔﯿﺖ ﺗﺼﻮﯾﺮ ﮐﺎﻫﺶ ﭘﯿﺪا ﺧﻮاﻫﺪ ﮐﺮد‪ .‬ﺑﺮاي وﯾﺮاﯾﺶ ﯾﮏ ﺗﺼﻮﯾﺮ ﺑﻬﺘﺮ اﺳﺖ ﮐﻪ اول ﺗﺼﻮﯾﺮ را ﺑﺎ ﻓﺮﻣﺘﯽ ﮐﻪ‬ ‫ﮐﯿﻔﯿﺖ را ﮐﺎﻫﺶ ﻧﻤﯽدﻫﺪ ذﺧﯿﺮه ﮐﻨﯿﺪ و زﻣﺎﻧﯽ ﮐﻪ ﺗﻐﯿﯿﺮات را ﻧﻬﺎﯾﯽ ﮐﺮدﯾﺪ آن را ﺑﺎ ﻓﺮﻣﺖ ‪ JPEG‬ذﺧﯿﺮه ﮐﻨﯿﺪ‪ .‬اﻟﺒﺘﻪ‬ ‫ﺗﻐﯿﯿﺮاﺗﯽ ﻧﯿﺰ وﺟﻮد دارد ﮐﻪ ﺑﺎ ﮐﺎﻫﺶ ﮐﯿﻔﯿﺖ ﻫﻤﺮاه ﻧﯿﺴﺖ ﻣﺎﻧﻨﺪ‬ ‫‪‬‬

‫ﭼﺮﺧﺎﻧﺪن ﺗﺼﻮﯾﺮ‬

‫‪‬‬

‫ﺑﺮﯾﺪن ﺑﺨﺸﯽ از ﺗﺼﻮﯾﺮ‬

‫‪‬‬

‫ﻣﻌﮑﻮس ﮐﺮدن ﺗﺼﻮﯾﺮ ﺑﻪ ﺷﮑﻞ ﻋﻤﻮدي و اﻓﻘﯽ‬

‫‪‬‬

‫ﺗﻐﯿﯿﺮ ﺑﺎرﮔﺬاري ﺗﺼﻮﯾﺮ از ‪ baseline‬ﺑﻪ ‪ progressive‬و ﺑﺎﻟﻌﮑﺲ‬

‫‪‬‬

‫وﯾﺮاﯾﺶ ‪ metadata‬در ﺗﺼﻮﯾﺮ‬

‫اﯾﻦ ﻓﺮﻣﺖ ﺗﺼﻮﯾﺮي از ﺷﻔﺎﻓﯿﺖ ﭘﺸﺘﯿﺒﺎﻧﯽ ﻧﻤﯽﮐﻨﺪ‪.‬‬ ‫ﺑﻬﯿﻨﻪ ﺳﺎزي ﺗﺼﺎوﯾﺮ ‪JPEG‬‬ ‫اﯾﻦ ﻓﺮﻣﺖ ﺗﺼﻮﯾﺮي ﺣﺎوي اﻃﻼﻋﺎﺗﯽ اﺳﺖ ﮐﻪ ‪ metadata‬ﻧﺎﻣﯿﺪه ﻣﯽﺷﻮد‪ .‬اﯾﻦ ﺑﺨﺶ ﺣﺎوي اﻃﻼﻋﺎﺗﯽ اﺳﺖ‬ ‫ﻫﻤﭽﻮن‪:‬‬ ‫‪‬‬

‫ﮐﺎﻣﻨﺖﻫﺎ‬

‫‪‬‬

‫اﻃﻼﻋﺎﺗﯽ ﮐﻪ ﺑﺮﻧﺎﻣﻪﻫﺎي ﮔﺮاﻓﯿﮑﯽ در ﺗﺼﻮﯾﺮ ذﺧﯿﺮه ﻣﯽﮐﻨﻨﺪ )ﻣﺎﻧﻨﺪ ﻧﺮم اﻓﺰار ﻓﻮﺗﻮﺷﺎپ(‬

‫‪‬‬

‫دادهﻫﺎي ‪ EXIF‬ﮐﻪ ﻣﺪل دورﺑﯿﻦ و زﻣﺎن ﺗﺼﻮﯾﺮ ﺑﺮداري و ﺑﺮﺧﯽ از اﻃﻼﻋﺎت دﯾﮕﺮ در آن ذﺧﯿﺮه ﻣﯽﺷﻮد‪.‬‬

‫ﺧﻮﺷﺒﺨﺘﺎﻧﻪ ﺣﺬف اﯾﻦ ﺑﺨﺶ از دادهﻫﺎ از ﺗﺼﻮﯾﺮ ﺑﺎ ﮐﺎﻫﺶ ﮐﯿﻔﯿﺖ ﻫﻤﺮاه ﻧﯿﺴﺖ و از ﻃﺮﻓﯽ اﯾﻦ دادهﻫﺎ ﺑﺮ روي وب‬ ‫و ﺑﺮاي ﺗﺼﺎوﯾﺮ وب ﮐﺎرﺑﺮدي ﻧﺪارﻧﺪ‪ .‬ﺑﺎ اﺳﺘﻔﺎده از اﺑﺰارﻫﺎﯾﯽ راﯾﮕﺎن ﺑﻪ راﺣﺘﯽ ﻣﯽﺗﻮاﻧﯿﻢ اﯾﻦ دادهﻫﺎ را از ﺗﺼﻮﯾﺮ‬ ‫ﺣﺬف ﮐﻨﯿﻢ و ﺣﺠﻢ ﺗﺼﻮﯾﺮ را ﮐﺎﻫﺶ دﻫﯿﻢ‪ .‬ﺑﺮاي ﺣﺬف اﯾﻦ دادهﻫﺎ ﻣﯽﺗﻮاﻧﯿﻢ از ﻧﺮم اﻓﺰار ‪ jpegtran‬اﺳﺘﻔﺎده ﮐﻨﯿﻢ‪.‬‬ ‫اﯾﻦ اﺑﺰار از ﺧﻂ ﻓﺮﻣﺎن ﮐﺎر ﻣﯽﮐﻨﺪ و ﺑﺎﯾﺪ اﯾﻦ دﺳﺘﻮر را وارد ﮐﻨﯿﺪ‬

‫‪www.ParsBook.org‬‬

‫‪۶٩‬‬

‫‪jpegtran -copy none -optimize src.jpg > dest.jpg‬‬ ‫دﺳﺘﻮرات ﻣﻮﺟﻮد در اﯾﻦ ﯾﮏ ﺧﻂ ﻓﺮﻣﺎن از اﯾﻦ ﻗﺮار اﺳﺖ‬ ‫‪-copy none‬‬ ‫اﯾﻦ دﺳﺘﻮر ﻣﯽﮔﻮﯾﺪ ﮐﻪ ﻫﯿﭻ داده اي ﻣﺘﺎﯾﯽ ﻧﺒﺎﯾﺪ در ﺗﺼﻮﯾﺮ وﺟﻮد داﺷﺘﻪ ﺑﺎﺷﺪ‬ ‫‪-optimize‬‬ ‫اﯾﻦ دﺳﺘﻮر ﺟﺪول ‪ Huffman‬را ﮐﻪ ﺑﺮاي ﻓﺸﺮده ﺳﺎزي ﺗﺼﻮﯾﺮ اﺳﺘﻔﺎده ﻣﯿﺸﻮد‪ ،‬ﺑﻬﯿﻨﻪ ﻣﯽﮐﻨﺪ‬ ‫‪Src.jpg‬‬ ‫آدرس ﺗﺼﻮﯾﺮ ﻣﺒﺪا‬ ‫‪Dest.jpg‬‬ ‫ﺗﺼﻮﯾﺮ ﺑﻬﯿﻨﻪ ﺷﺪه ﺑﺎ اﯾﻦ ﻧﺎم و در ﻣﺴﯿﺮ ﻣﺸﺨﺺ ﺷﺪه ذﺧﯿﺮه ﻣﯽﺷﻮد‪.‬‬ ‫دﻗﺖ داﺷﺘﻪ ﺑﺎﺷﯿﺪ ﮐﻪ ﺗﻨﻬﺎ دادهﻫﺎي ﻣﺮﺑﻮط ﺑﻪ ﺗﺼﺎوﯾﺮ ﺧﻮد را ﺣﺬف ﮐﻨﯿﺪ‪ .‬ﺑﺮﺧﯽ از اﯾﻦ دادهﻫﺎ در اﺻﻞ ﺻﺎﺣﺐ‬ ‫ﺗﺼﻮﯾﺮ را ﻣﺸﺨﺺ ﻣﯽﮐﻨﺪ و ﮐﭙﯽ راﯾﺖ ﺗﺼﻮﯾﺮ ﺑﻪ ﺣﺴﺎب ﻣﯽآﯾﺪ‪ .‬ﺣﺬف ﮐﭙﯽ راﯾﺖ ﺗﺼﺎوﯾﺮ ﻣﯽﺗﻮاﻧﺪ در آﯾﻨﺪه ﺑﺮاي‬ ‫ﺷﻤﺎ ﻣﺸﮑﻞ ﺳﺎز ﺷﻮد‪ .‬از ﻣﺠﺎﻧﯽ ﺑﻮدن ﺗﺼﻮﯾﺮ ﻗﺒﻞ از ﺣﺬف دادهﻫﺎ اﻃﻤﯿﻨﺎن ﺣﺎﺻﻞ ﮐﻨﯿﺪ‪.‬‬ ‫اﻟﺒﺘﻪ اﺑﺰارﻫﺎي دﯾﮕﺮي ﺑﺎ اﻣﮑﺎﻧﺎت ﺑﯿﺸﺘﺮي ﻧﯿﺰ وﺟﻮد دارد‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﻣﯽﺗﻮاﻧﯿﺪ از اﺑﺰار ‪ ExifTool‬اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪.‬‬

‫ﺗﺼﺎوﯾﺮ ‪ JPEG‬ﺑﺎ ﺣﺠﻢ ﺑﺎﻻ را ﺑﻪ ﺷﮑﻞ ‪ progressive‬ذﺧﯿﺮه ﮐﻨﯿﺪ‬ ‫ﺗﺼﺎوﯾﺮ ‪ JPEG‬را ﻣﯿﺘﻮان ﺑﻪ ﺷﮑﻞ ‪ progressive‬ذﺧﯿﺮه ﮐﺮد‪ .‬اﯾﻦ ﺗﺼﺎوﯾﺮ در زﻣﺎن ‪ load‬ﺷﺪن اول ﺑﻪ ﺷﮑﻞ‬ ‫ﺑﯽﮐﯿﻔﯿﺖ ﺑﺎرﮔﺬاري ﻣﯽﺷﻮﻧﺪ و ﮐﻢ ﮐﻢ ﺑﺎ ﮐﯿﻔﯿﺖﺗﺮ ﻣﯽﺷﻮﻧﺪ‪ .‬ﺑﺎ آزﻣﺎﯾﺸﯽ ﮐﻪ ﺑﺮ روي ﺑﯿﺶ از ‪ 10‬ﻫﺰار ﺗﺼﻮﯾﺮ اﻧﺠﺎم‬ ‫ﺷﺪه اﺳﺖ‪ ،‬ﺑﻪ اﯾﻦ ﻧﺘﯿﺠﻪ رﺳﯿﺪﯾﻢ ﮐﻪ ﺗﺼﺎوﯾﺮي ﮐﻪ ﺑﺎﻻي ‪ 10‬ﮐﯿﻠﻮﺑﺎﯾﺖ ﺣﺠﻢ دارﻧﺪ اﮔﺮ ﺑﻪ ﺷﮑﻞ ‪progressive‬‬ ‫ذﺧﯿﺮه ﺷﻮﻧﺪ ‪ ،‬ﺣﺠﻢ ﻓﺎﯾﻞ ﮐﻤﺘﺮي ﺧﻮاﻫﻨﺪ داﺷﺖ‪ .‬ﺗﺼﺎوﯾﺮ زﯾﺮ ‪ 10‬ﮐﯿﻠﻮﺑﺎﯾﺖ اﮔﺮ ‪ progressive‬ﻧﺒﺎﺷﻨﺪ ﮐﻢ ﺣﺠﻢ ﺗﺮ‬ ‫ﺧﻮاﻫﻨﺪ ﺑﻮد‪ .‬ﺗﺼﻮﯾﺮي ﮐﻪ در اداﻣﻪ ﺷﺎﻫﺪ ﺧﻮاﻫﯿﺪ ﺑﻮد ﺑﻪ ﺧﻮﺑﯽ اﯾﻦ ﻣﻮرد را ﻧﺸﺎن ﻣﯽدﻫﺪ‪:‬‬

‫‪www.ParsBook.org‬‬

‫‪٧٠‬‬

‫ﻣﺤﻮر ‪ X‬ﺳﺎﯾﺰ ﻓﺎﯾﻞ را ﻧﺸﺎن ﻣﯽدﻫﺪ و ﻣﺤﻮر ‪ Y‬ﺗﻔﺎوت ﺳﺎﯾﺰ ﻓﺎﯾﻞ در ﺣﺎﻟﺖ ‪ baseline‬و ‪ progressive‬را ﻧﺸﺎن‬ ‫ﻣﯽدﻫﺪ‪ .‬ﮐﺎﻣﻼ ﻣﺸﺨﺺ اﺳﺖ ﮐﻪ ﻫﺮ ﭼﻘﺪر ﺳﺎﯾﺰ ﺗﺼﻮﯾﺮ ﺑﺰرﮔﺘﺮ ﺑﺎﺷﺪ ﺑﻬﺘﺮ اﺳﺖ ﮐﻪ ﺗﺼﺎوﯾﺮ در ﺣﺎﻟﺖ‬ ‫‪ progressive‬ذﺧﯿﺮه ﺷﻮﻧﺪ‪ .‬اﻟﺒﺘﻪ اﯾﻦ ﻧﻤﻮدار ﺗﻨﻬﺎ ﻓﺎﯾﻞﻫﺎﯾﯽ ﺑﺎ ﺣﺠﻢ ﻧﻬﺎﯾﺖ ‪ 30‬ﮐﯿﻠﻮﺑﺎﯾﺖ را ﺑﺮ روي ﻧﻤﻮدار ﻧﺸﺎن‬ ‫داده اﺳﺖ وﻟﯽ اﯾﻦ ﻗﺎﻧﻮن ﺑﺮاي ﺗﺼﺎوﯾﺮ ﺑﺎ ﺳﺎﯾﺰﻫﺎي ﺑﺎﻻﺗﺮ ﻧﯿﺰ ﺻﺎدق اﺳﺖ‪.‬‬ ‫ﻓﺮﻣﺖ ﺗﺼﻮﯾﺮي ‪PNG‬‬ ‫اﯾﻦ ﻧﺎم ﻣﺨﻔﻒ ‪ Portable Network Graphic‬اﺳﺖ‪ .‬اﯾﻦ ﻓﺮﻣﺖ را ﺑﺮاي ﺟﺒﺮان ﮐﺎﺳﺘﯽﻫﺎﯾـﯽ ﮐـﻪ در ﻓﺮﻣـﺖ ‪ GIF‬و‬ ‫ﻣﺸﮑﻼت ﺣﻖ اﻣﺘﯿﺎز‪ ،‬ﺧﻠﻖ ﮐﺮدﻧﺪ‪.‬‬ ‫ﺗﺼﺎوﯾﺮ ‪ PNG‬ﭼﻨﺪﯾﻦ ﻧﻮع ﻣﺨﺘﻠﻒ دارﻧﺪ ﮐﻪ در ﮐﻞ ﺑﻪ دو ﺷﺎﺧﻪ ﺗﻘﺴﯿﻢ ﻣﯽﺷﻮﻧﺪ‪ .‬ﺗﺼﺎوﯾﺮ ‪ True color‬و‬ ‫ﺗﺼﺎوﯾﺮ ‪ palette‬ﮐﻪ ﻧﻮع دوم ﺑﻪ ﻋﻨﻮان ﺟﺎﯾﮕﺰﯾﻦ ‪ gif‬ﻣﺤﺴﻮب ﻣﯽﺷﻮد‪ .‬از ﺗﺼﺎوﯾﺮ ‪ Truecolor PNG‬ﻧﯿﺰ‬ ‫ﻣﯽﺗﻮاﻧﯿﺪ ﺑﻪ ﺟﺎي ﺗﺼﺎوﯾﺮ ‪ JPEG‬اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪ .‬اﯾﻦ ﻓﺮﻣﺖ ﺗﺼﻮﯾﺮي از ﺷﻔﺎﻓﯿﺖ ﻧﯿﺰ ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽﮐﻨﺪ اﻟﺒﺘﻪ اﯾﻦ‬ ‫ﭘﺸﺘﯿﺒﺎﻧﯽ ﮐﺎﻣﻞﺗﺮ از ‪ gif‬اﺳﺖ و ﺗﺼﺎوﯾﺮ ﺑﺎ ﭘﯿﮑﺴﻞﻫﺎي ﻧﯿﻤﻪ ﺷﻔﺎف ﻧﯿﺰ ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽﺷﻮﻧﺪ‪ .‬اﻟﺒﺘﻪ اﯾﻦ ﻓﺮﻣﺖ‬ ‫ﺗﺼﻮﯾﺮي از ﺗﺼﺎوﯾﺮ ﻣﺘﺤﺮك ﭘﺸﺘﯿﺒﺎﻧﯽ ﻧﻤﯽﮐﻨﺪ‪ .‬اﻟﺒﺘﻪ ﮐﺎرﻫﺎﯾﯽ ﺑﺮاي اﯾﻦﮐﺎر و اﺿﺎﻓﻪ ﮐﺮدن ﺗﺼﺎوﯾﺮ ﻣﺘﺤﺮك ﺑﻪ اﯾﻦ‬ ‫ﻓﺮﻣﺖ اﻧﺠﺎم ﺷﺪه وﻟﯽ اﯾﻦ ﺗﮑﻨﯿﮏﻫﺎ ﺑﺮ روي ﺗﻤﺎﻣﯽ ﻣﺮورﮔﺮﻫﺎ ﮐﺎر ﻧﻤﯽﮐﻨﺪ‪ .‬اﯾﻦ ﻓﺮﻣﺖ ﺗﺼﻮﯾﺮي ﮐﯿﻔﯿﺖ ﺗﺼﻮﯾﺮ را‬ ‫ﮐﺎﻫﺶ ﻧﻤﯽدﻫﺪ و ﺗﺼﻮﯾﺮﻫﺎ اﮔﺮ ﺑﺎرﻫﺎ ﻫﻢ وﯾﺮاﯾﺶ ﺷﻮﻧﺪ‪ ،‬ﮐﯿﻔﯿﺘﺸﺎن اﻓﺖ ﻧﺨﻮاﻫﺪ ﮐﺮد‪ .‬ﻫﻤﺎﻧﻨﺪ ﺗﺼﺎوﯾﺮ ‪ ، GIF‬اﯾﻦ‬ ‫ﻓﺮﻣﺖ ﺗﺼﻮﯾﺮي ﻧﯿﺰ ﺗﺼﺎوﯾﺮ را ﺑﻪ ﺷﮑﻞ اﻓﻘﯽ ‪ render‬ﻣﯽﮐﻨﺪ و اﮔﺮ رﻧﮓﻫﺎ ﺑﻪ ﺷﮑﻞ اﻓﻘﯽ ﺗﮑﺮار ﺷﻮﻧﺪ‪ ،‬ﺣﺠﻢ ﮐﻤﺘﺮي‬ ‫را اﺷﻐﺎل ﺧﻮاﻫﻨﺪ ﮐﺮد‪.‬‬ ‫ﺗﺼﺎوﯾﺮ ‪ PNG‬ﺑﺎ ﺳﻪ ﺣﺎﻟﺖ وﺟﻮد دارﻧﺪ‪ .‬اول ﺗﺼﺎوﯾﺮ ‪ PNG8‬ﮐﻪ ﻣﺤﺪود ﺑﻪ ‪ 256‬رﻧﮓ ﻫﺴﺘﻨﺪ و ﻫﻤﺎن ‪palette‬‬ ‫‪ PNG‬ﻧﺎﻣﯿﺪه ﻣﯽﺷﻮﻧﺪ‪ .‬ﻣﺪل دوم ‪ PNG24‬اﺳﺖ ﮐﻪ ﻫﻤﺎن ‪ truecolor PNG‬ﻣﺤﺴﻮب ﻣﯽﺷﻮد وﻟﯽ ﺷﻔﺎﻓﯿﺖ را در‬

‫‪www.ParsBook.org‬‬

‫‪٧١‬‬

‫ﺧﻮد ﻧﺪارد و در آﺧﺮ ‪ PNG32‬اﺳﺖ ﮐﻪ ﻫﻤﺎﻧﻨﺪ ‪ truecolor PNG‬ﺑﻮده ﻣﻨﺘﻬﺎ ﺷﻔﺎﻓﯿﺖ ﭘﯿﮑﺴﻞﻫﺎ را ﻧﯿﺰ در ﺧﻮد‬ ‫ذﺧﯿﺮه ﮐﺮده اﺳﺖ‪.‬‬ ‫ﺗﺼﺎوﯾﺮ ‪ PNG‬اﺳﺘﻔﺎدهﻫﺎي ﺑﺴﯿﺎري دارﻧﺪ و ﻣﯽﺗﻮاﻧﻨﺪ ﺟﺎﯾﮕﺰﯾﻦ ﻣﻨﺎﺳﺒﯽ ﺑﺮاي ﺗﺼﺎوﯾﺮ ‪ GIF‬و ‪JPEG‬‬ ‫ﺑﺎﺷﻨﺪ‪ .‬ﺗﺼﺎوﯾﺮ ‪ PNG‬ﺟﺎﯾﮕﺰﯾﻦ ﺑﺴﯿﺎر ﻣﻨﺎﺳﺒﯽ ﺑﺮاي ﺗﺼﺎوﯾﺮ ‪ GIF‬ﻫﺴﺘﻨﺪ و ﺗﻨﻬﺎ ﻣﺘﺤﺮكﺳﺎزي را ﭘﺸﺘﯿﺒﺎﻧﯽ‬ ‫ﻧﻤﯽﮐﻨﻨﺪ وﻟﯽ ﻫﻤﯿﺸﻪ ﺗﺼﺎوﯾﺮي ﺑﺎ ﮐﯿﻔﯿﺖ ﺑﻬﺘﺮ و ﺣﺠﻢ ﮐﻤﺘﺮي از ﻓﺮﻣﺖ ‪ GIF‬در اﺧﺘﯿﺎر ﺷﻤﺎ ﻗﺮار ﻣﯽدﻫﻨﺪ‪ .‬ﺗﺎ ﺟﺎﯾﯽ‬ ‫ﮐﻪ ﻣﯽﺗﻮاﻧﯿﺪ از ﺗﺼﺎوﯾﺮ ‪ PNG‬ﺑﻪ ﺟﺎي ‪ GIF‬اﺳﺘﻔﺎده ﮐﻨﯿﺪ ﺑﻪ ﺟﺰ ﻣﻮاﻗﻌﯽ ﮐﻪ ﺗﺼﻮﯾﺮ ﺑﺴﯿﺎر ﮐﻮﭼﮏ اﺳﺖ و رﻧﮓﻫﺎي‬ ‫ﺑﺴﯿﺎر ﮐﻤﯽ در ﺧﻮد دارد‪ .‬در اﯾﻨﺠﺎ ﺣﺠﻢ ﺗﺼﺎوﯾﺮ ‪ GIF‬ﮐﻮﭼﮏ ﺗﺮ اﺳﺖ‪ .‬اﻟﺒﺘﻪ اﮔﺮ در ﻃﺮاﺣﯽ ﺧﻮد از ‪CSS Sprite‬ﻫﺎ‬ ‫اﺳﺘﻔﺎده ﻣﯽﮐﻨﯿﺪ‪ ،‬ﺑﺎز ﺑﻬﺘﺮ اﺳﺖ ﮐﻪ ﺗﺼﺎوﯾﺮ را ﺑﺎ ﻓﺮﻣﺖ ‪ PNG‬ذﺧﯿﺮه ﮐﻨﯿﺪ‪.‬‬ ‫ﺑﺮاي ﻓﺸﺮدهﺳﺎزي ﺗﺼﺎوﯾﺮي ﮐﻪ رﻧﮓﻫﺎي ﺑﺴﯿﺎري دارﻧﺪ‪ ،‬ﻣﻌﻤﻮﻻ ﻓﺮﻣﺖ ‪ JPEG‬ارﺟﺤﯿﺖ دارد وﻟﯽ اﮔﺮ‬ ‫ﺗﺼﻮﯾﺮ ﺷﻤﺎ ﮐﻤﯽﺑﯿﺶ از ‪ 256‬رﻧﮓ دارد ﻣﯽﺗﻮاﻧﯿﺪ آن را ﺑﺎ ﻓﺮﻣﺖ ‪ PNG‬ذﺧﯿﺮه ﮐﻨﯿﺪ و ﻓﺎﯾﻠﯽ ﺑﺎ ﮐﯿﻔﯿﺖ و ﮐﻢ ﺣﺠﻢ‬ ‫داﺷﺘﻪ ﺑﺎﺷﯿﺪ‪.‬‬ ‫ﻣﺸﮑﻼت اﯾﻨﺘﺮﻧﺖ اﮐﺴﭙﻠﻮرر در ﻧﻤﺎﯾﺶ ﺗﺼﺎوﯾﺮ داراي ﺷﻔﺎﻓﯿﺖ ﺑﺎ ﻓﺮﻣﺖ ‪PNG‬‬ ‫دو ﺣﺎﻟﺖ در ﺷﯿﻮه ﻧﻤﺎﯾﺶ ﺗﺼﺎوﯾﺮ ‪ PNG‬داراي ﺷﻔﺎﻓﯿﺖ در ‪ IE‬ﻧﺴﺨﻪ ‪ 6‬ﭘﯿﺶ ﻣﯽآﯾﺪ‬ ‫‪‬‬

‫ﺗﻤﺎﻣﯽﭘﯿﮑﺴﻞﻫﺎي ﻧﯿﻤﻪ ﺷﻔﺎف در ‪ PNG8‬در اﯾﻨﺘﺮﻧﺖ اﮐﺴﭙﻠﻮرر ‪ 6‬ﺑﻪ ﺷﮑﻞ ﮐﺎﻣﻼً ﺷﻔﺎف ﻧﻤﺎﯾﺶ داده‬ ‫ﻣﯽﺷﻮﻧﺪ‪.‬‬

‫‪‬‬

‫ﺗﻤﺎﻣﯽﭘﯿﮑﺴﻞﻫﺎي ﻧﯿﻤﻪ ﺷﻔﺎف در ‪ PNG32‬در اﯾﻨﺘﺮﻧﺖ اﮐﺴﭙﻠﻮرر ‪ 6‬ﺑﺎ رﻧﮓ ﺧﺎﮐﺴﺘﺮي ﻧﻤﺎﯾﺶ داده‬ ‫ﻣﯽﺷﻮﻧﺪ‪.‬‬

‫ﻣﻮرد اول را ﻣﯽﺗﻮان ﻣﻮرد ﻣﻔﯿﺪي ﺑﻪ ﺣﺴﺎب آورد زﯾﺮا ﺗﺼﺎوﯾﺮ ‪ PNG‬ﺷﻤﺎ در اﯾﻦ ﺣﺎﻟﺖ در اﯾﻨﺘﺮﻧﺖ اﮐﺴﭙﻠﻮرر ﺑﻪ‬ ‫ﺷﮑﻞ ﺗﺼﺎوﯾﺮ ‪ GIF‬ﻧﻤﺎﯾﺶ داده ﻣﯽﺷﻮﻧﺪ ﺑﻪ ﻫﻤﯿﻦ ﺧﺎﻃﺮ ﭘﯿﺸﻨﻬﺎد ﻣﯽﺷﻮد ﮐﻪ ﻫﺮ ﺟﺎ ﮐﻪ اﻣﮑﺎن دارد ﺑﻪ ﺟﺎي ‪ GIF‬از‬ ‫ﺗﺼﺎوﯾﺮ ‪ PNG‬اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪.‬‬ ‫ﻣﻮرد دوم را ﺗﻨﻬﺎ ﻣﯽﺗﻮان ﺑﺎ اﺳﺘﻔﺎده از ‪ AlphaImageLoader‬ﺣﻞ ﮐﺮد ﮐﻪ ﻫﻤﯿﺸﻪ ﺑﺎ ﮐﺎﻫﺶ ﺷﺪﯾﺪ‬ ‫‪ performance‬ﺳﺎﯾﺖ ﺧﻮد ﻣﻮاﺟﻪ ﺧﻮاﻫﯿﺪ ﺷﺪ و ﯾﺎ اﯾﻨﮑﻪ ﻣﺠﺒﻮرﯾﺪ از ‪ VML‬اﺳﺘﻔﺎده ﮐﻨﯿﺪ و اﺳﺘﻔﺎده از ‪ VML‬ﻧﯿﺰ‬ ‫ﺑﺎ اﺿﺎﻓﻪ ﺷﺪن ﺣﺠﻢ ﮐﺪﻫﺎي ﺷﻤﺎ ﻫﻤﺮاه ﺧﻮاﻫﺪ ﺑﻮد‪ .‬ﺑﻪ ﻫﻤﯿﻦ ﺧﺎﻃﺮ ﺑﻬﺘﺮ اﺳﺖ ﺗﺎ ﺟﺎﯾﯽ ﮐﻪ ﻣﯿﺘﻮاﻧﯿﺪ از ‪PNG8‬‬ ‫اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪٧٢‬‬

‫ﺗﻮﺟﻪ‪:‬‬ ‫ﻣﺘﺎﺳﻔﺎﻧﻪ ﺑﺮﻧﺎﻣﻪﻫﺎي ﻣﻌﺮوف وﯾﺮاﯾﺶ ﺗﺼﻮﯾﺮ از ﺟﻤﻠﻪ ‪ photoshop‬ﻧﻤﯽﺗﻮاﻧﻨﺪ ﺗﺼﺎوﯾﺮ ‪ PNG8‬را ﺑﺎ‬ ‫ﭘﯿﮑﺴﻞﻫﺎي ﻧﯿﻤﻪ ﺷﻔﺎف ذﺧﯿﺮه ﮐﻨﻨﺪ و در اﯾﻦ ﺣﺎﻟﺖ ﺗﺼﺎوﯾﺮ ‪ PNG‬را ﻫﻤﺎﻧﻨﺪ ﺗﺼﺎوﯾﺮ ‪ GIF‬ﺑﺎ ﺷﻔﺎﻓﯿﺖ ‪binary‬‬ ‫ذﺧﯿﺮه ﻣﯽﮐﻨﻨﺪ‪ .‬ﺑﺮاي ﺣﻞ اﯾﻦ ﻣﺸﮑﻞ ﻣﯽ ﺗﻮاﻧﯿﺪ ﺗﺼﺎوﯾﺮ را ﺑﺎ اﺳﺘﻔﺎده از ﻧﺮم اﻓﺰار ‪ fireworks‬ذﺧﯿﺮه ﮐﻨﯿﺪ ﮐﻪ ﻗﺎدر‬ ‫ﺑﻪ ذﺧﯿﺮه ﺳﺎزي ﺗﺼﺎوﯾﺮ ‪ PNG8‬ﺑﺎ ﭘﯿﮑﺴﻞﻫﺎي ﻧﯿﻤﻪ ﺷﻔﺎف ﻧﯿﺰ ﻫﺴﺖ‪ .‬ﻋﻼوه ﺑﺮ اﯾﻦ ﻧﺮم اﻓﺰار ﻣﯽﺗﻮاﻧﯿﺪ از‬ ‫ﺑﺮﻧﺎﻣﻪﻫﺎي ﻣﺠﺎﻧﯽ ﻫﻤﺎﻧﻨﺪ ‪ pngquant‬و ﯾﺎ ‪ pngnq‬اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪ .‬اﯾﻦ اﺑﺰارﻫﺎ ﻣﯽﺗﻮاﻧﻨﺪ ﺗﺼﺎوﯾﺮ ‪PNG truecolor‬‬ ‫را ﺑﻪ ‪ palette PNG‬ﺗﺒﺪﯾﻞ ﮐﻨﯿﺪ‪.‬‬

‫ﭼﻼﻧﺪن ﺗﺼﺎوﯾﺮ ‪PNG‬‬ ‫ﺗﺼﺎوﯾﺮ ‪ PNG‬اﻃﻼﻋﺎﺗﯽ را داﺧﻞ ‪ chunks‬ذﺧﯿﺮه ﻣﯽﮐﻨﻨﺪ‪ .‬از آﻧﺠﺎﺋﯽﮐﻪ اﯾﻦ ﻓﺮﻣﺖ ﺗﺼﻮﯾﺮي ﻗﺎﺑﻞ ﺗﻮﺳﻌﻪ‬ ‫دادن اﺳﺖ ﺷﻤﺎ ﻣﯽﺗﻮاﻧﯿﺪ ﺑﺎ اﺳﺘﻔﺎده از اﯾﻦ ﻗﺎﺑﻠﯿﺖ‪ chunks ،‬ﻫﺎي ﺟﺪﯾﺪي ﺑﺴﺎزﯾﺪ و دادهﻫﺎﯾﯽ را درون آن ذﺧﯿﺮه‬ ‫ﮐﻨﯿﺪ‪ .‬ﺑﺮﻧﺎﻣﻪﻫﺎﯾﯽ ﮐﻪ از ‪ chunks‬ﻫﺎ ﭼﯿﺰي ﻣﺘﻮﺟﻪ ﻧﺸﻮﻧﺪ‪ ،‬آن را ﻧﺎدﯾﺪه ﻣﯽﮔﯿﺮﻧﺪ‪ .‬اﻟﺒﺘﻪ ﺑﺮ روي وب اﺻﻼ ﺑﻪ اﯾﻦ‬ ‫‪ chunks‬ﻫﺎ اﺣﺘﯿﺎﺟﯽ ﻧﺪارﯾﻢ و ﻣﯽﺗﻮاﻧﯿﻢ ﺑﻪ آﺳﺎﻧﯽ آﻧﻬﺎ را ﺣﺬف ﮐﻨﯿﻢ‪ .‬ﯾﮑﯽ از ﻣﺰاﯾﺎي ﺣﺬف اﯾﻦ ‪ chunks‬ﻫﺎ اﯾﻦ‬ ‫اﺳﺖ ﮐﻪ ﺷﯿﻮه ﻧﻤﺎﯾﺶ ﺗﺼﺎوﯾﺮ ‪ PNG‬ﺑﺮ روي ﻣﺮورﮔﺮﻫﺎي ﻣﺨﺘﻠﻒ ﯾﮑﺴﺎن ﻣﯽﺷﻮد‪ .‬زﯾﺮا درون دادهﻫﺎي ‪chunks‬‬ ‫اﻃﻼﻋﺎﺗﯽ در ﻣﻮرد ‪ gamma‬ذﺧﯿﺮه ﻣﯽﺷﻮد ﮐﻪ در ﻫﺮ ﻣﺮورﮔﺮي اﯾﻦ اﻃﻼﻋﺎت ﺑﻪ ﯾﮏ ﺷﮑﻞ ﺗﻔﺴﯿﺮ ﻣﯽﺷﻮد و از‬ ‫اﯾﻦ رو ﺑﺎﻋﺚ ﺑﺮوز ﺗﻔﺎوتﻫﺎﯾﯽ در ﺷﯿﻮه ﻧﻤﺎﯾﺶ ﻣﯽﺷﻮد‪ .‬ﺣﺬف اﯾﻦ ﺑﺨﺶ از دﯾﺘﺎ ﻣﯽﺗﻮاﻧﺪ ﺷﯿﻮه ﻧﻤﺎﯾﺶ ﻓﺎﯾﻞﻫﺎي‬ ‫‪ PNG‬در ﻣﺮورﮔﺮﻫﺎي ﻣﺨﺘﻠﻒ را ﯾﮑﺴﺎن ﮐﻨﺪ‪.‬‬ ‫ﺑﺮاي ﺣﺬف ‪ chunk‬ﻫﺎ اﺑﺰارﻫﺎي ﻣﺨﺘﻠﻔﯽ وﺟﻮد دارد ﮐﻪ راﯾﮕﺎناﻧﺪ‪ .‬ﺑﺮاي اﯾﻨﮑﺎر ﻣﺎ از اﺑﺰار ‪ pngcrush‬اﺳﺘﻔﺎده‬ ‫ﻣﯽﮐﻨﯿﻢ‪ .‬ﺷﻤﺎ ﻣﯽﺗﻮاﻧﯿﺪ ﺑﺎ اﺟﺮاي اﯾﻦ دﺳﺘﻮر ﻓﺎﯾﻞ ‪ PNG‬ﺧﻮد را ﺑﻬﯿﻨﻪ ﮐﻨﯿﺪ‪:‬‬ ‫‪pngcrush -rem alla -brute -reduce src.png dest.png‬‬ ‫ﺣﺎل دﺳﺘﻮرات داﺧﻞ اﯾﻦ ﯾﮏ ﺧﻂ ﻓﺮﻣﺎن را ﺑﺮرﺳﯽ ﻣﯽﮐﻨﯿﻢ‪:‬‬ ‫‪-rem alla‬‬ ‫اﯾﻦ دﺳﺘﻮر ﺗﻤﺎﻣﯽ‪ chunks‬ﻫﺎ ﺑﻪ ﻏﯿﺮ از ‪ chunk‬اي ﮐﻪ ﺷﻔﺎﻓﯿﺖ را ﻣﺪﯾﺮﯾﺖ ﻣﯽﮐﻨﺪ را ﺣﺬف ﻣﯽﮐﻨﺪ‪.‬‬ ‫‪-brute‬‬ ‫اﯾﻦ دﺳﺘﻮر ﺑﯿﺶ از ‪ 100‬ﻣﺘﺪ ﺑﺮاي ﺑﻬﯿﻨﻪ ﮐﺮدن ﺗﺼﻮﯾﺮ ‪ PNG‬اﻧﺠﺎم ﻣﯿﺪﻫﺪ‪ .‬اﻟﺒﺘﻪ اﻧﺠﺎم اﯾﻦ ﮐﺎر ﮐﻤﯽزﻣﺎن ﺑﺮ اﺳﺖ و‬ ‫اﻏﻠﺐ ﺗﻔﺎوت ﻣﺤﺴﻮﺳﯽ ﺣﺎﺻﻞ ﻧﻤﯽﺷﻮد وﻟﯽ اﻧﺠﺎم آن ﺑﻪ ﮐﺎﻫﺶ ﺣﺠﻢ ﺗﺼﻮﯾﺮ ﮐﻤﮏ ﻣﯽﮐﻨﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪٧٣‬‬

‫‪-reduce‬‬ ‫اﯾﻦ دﺳﺘﻮر ﺗﻌﺪاد رﻧﮓﻫﺎي داﺧﻞ ‪ palette‬راه در ﺻﻮرت اﻣﮑﺎن ﮐﺎﻫﺶ ﻣﯽدﻫﺪ‪.‬‬ ‫‪Src.png‬‬ ‫ﻓﺎﯾﻞ ﻣﺮﺟﻊ‬ ‫‪Dest.jpg‬‬ ‫ﺗﺼﻮﯾﺮ ﺑﻬﯿﻨﻪ ﺷﺪه در اﯾﻦ ﻣﺴﯿﺮ ﺑﺎ اﯾﻦ ﻧﺎم ذﺧﯿﺮه ﻣﯽﺷﻮد‪.‬‬ ‫اﻟﺒﺘﻪ اﺑﺰارﻫﺎي دﯾﮕﺮي ﻧﯿﺰ ﺑﺮاي ﺑﻬﯿﻨﻪ ﺳﺎزي ﺗﺼﺎوﯾﺮ ‪ PNG‬وﺟﻮد دارد‪ .‬اﺑﺰاري ﮐﻪ از آن اﺳﺘﻔﺎده ﮐﺮدﯾﻢ‪،‬‬ ‫ﻣﻮازﻧﻪ اي را ﺑﯿﻦ ﺳﺮﻋﺖ اﺟﺮاي ﺑﻬﯿﻨﻪ ﺳﺎزي و ﻧﺘﯿﺠﻪ ﺣﺎﺻﻠﻪ ﺑﺮﻗﺮار ﻣﯽﮐﻨﺪ‪ .‬اﮔﺮ وﻗﺖ ﺑﯿﺸﺘﺮي ﺑﺮاي ﺑﻬﯿﻨﻪ ﺳﺎزي‬ ‫ﺗﺼﺎوﯾﺮ در اﺧﺘﯿﺎر دارﯾﺪ ﻣﯽﺗﻮاﻧﯿﺪ از اﺑﺰارﻫﺎ ي دﯾﮕﺮي ﻧﯿﺰ اﺳﺘﻔﺎده ﮐﻨﯿﺪ و ﺣﺠﻢ ﺗﺼﺎوﯾﺮ را ﺗﺎ ﺟﺎﯾﯽ ﮐﻪ اﻣﮑﺎن دارد‬ ‫ﮐﺎﻫﺶ دﻫﯿﺪ‪ .‬اﺑﺰارﻫﺎي دﯾﮕﺮ ﻣﻮﺟﻮد ﺑﻪ ﻗﺮار ذﯾﻞ اﻧﺪ"‬ ‫‪PNGOUT‬‬ ‫ﻓﻘﻂ ﺑﺮاي وﯾﻨﺪوز ﻋﺮﺿﻪ ﺷﺪه اﺳﺖ و ‪ source‬آن ﺑﺴﺘﻪ اﺳﺖ‬ ‫‪OptiPNG‬‬ ‫ﻣﺠﺎﻧﯽ ﺑﻮده و ﺑﺮ روي ﺳﯿﺴﺘﻢ ﻋﺎﻣﻞﻫﺎي ﻣﺨﺘﻠﻒ اﺟﺮا ﻣﯽﺷﻮد و از ﺧﻂ ﻓﺮﻣﺎن ﻧﯿﺰ ﺑﺎﯾﺪ ﺑﺎ آن ﮐﺎر ﮐﺮد‬ ‫‪PngOptimizer‬‬ ‫ﺑﺮاي وﯾﻨﺪوز ﻋﺮﺿﻪ ﺷﺪه و ‪ source‬آن ﺑﺎز اﺳﺖ و ﻣﺤﯿﻂ آن ﮔﺮاﻓﯿﮑﯽ و ﺧﻂ ﻓﺮﻣﺎن اﺳﺖ‪.‬‬ ‫اﺑﺰار دﯾﮕﺮي ﮐﻪ در دﺳﺘﺮس ﺷﻤﺎ ﻗﺮار دارد اﺑﺰار ‪ PNGslim‬اﺳﺖ ﮐﻪ اﻟﺒﺘﻪ ﯾﮏ ﻓﺎﯾﻞ ‪ batch‬ﺑﺮاي وﯾﻨﺪوز اﺳﺖ‪.‬‬ ‫ﮐﺎري ﮐﻪ اﯾﻦ ﻧﺮم اﻓﺰار اﻧﺠﺎم ﻣﯽدﻫﺪ اﯾﻦ اﺳﺖ ﮐﻪ ﺑﺮﻧﺎﻣﻪ ‪ PNGOUT‬را ﺑﺎ ﺻﺪﻫﺎ ﺗﻨﻈﯿﻤﺎت ﻣﺘﻔﺎوت اﺟﺮا ﻣﯽﮐﻨﺪ‪.‬‬ ‫اﻟﺒﺘﻪ ﺑﺮﻧﺎﻣﻪ ‪ PNGOUT‬ﯾﮑﯽ از ﮐﻨﺪﺗﺮﯾﻦ ﺑﺮﻧﺎﻣﻪﻫﺎي ﻣﻮﺟﻮد در ﻟﯿﺴﺖ ﻣﺎ اﺳﺖ‪ .‬ﭘﺲ ﺑﺎﯾﺪ ﺑﺪاﻧﯿﺪ ﮐﻪ اﺟﺮاي ‪PNGslim‬‬ ‫ﻣﯽﺗﻮاﻧﺪ زﻣﺎن زﯾﺎدي را ﺑﮕﯿﺮد‪ .‬ﮔﺎﻫﯽ ﺑﺮاي ﺑﻬﯿﻨﻪ ﺳﺎزي ﯾﮏ ﺗﺼﻮﯾﺮ ﺑﺎﯾﺪ ﺳﺎﻋﺖﻫﺎ ﻣﻨﺘﻈﺮ ﺑﻤﺎﻧﯿﺪ‪.‬‬ ‫! ﺑﺴﯿﺎري از دادهﻫﺎي داﺧﻞ ﺗﺼﺎوﯾﺮ ﺑﺮ روي وب ﻗﺎﺑﻞ اﺳﺘﻔﺎده ﻧﯿﺴﺘﻨﺪ‪ .‬ﺗﺼﺎوﯾﺮ را ﺗﺎ ﺟﺎﯾﯽ ﮐﻪ ﻣﯽﺗﻮاﻧﯿﺪ ﮐﻢ‬ ‫ﺣﺠﻢ ﮐﻨﯿﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪٧۴‬‬

‫ﻓﺼﻞ ﺳﻮم‬ ‫راﻫﻨﻤﺎي ﻃﺮاﺣﯽ ﺻﻔﺤﺎت وب‬

‫‪www.ParsBook.org‬‬

‫‪٧۵‬‬

‫ﻣﻘﺪﻣﻪ‪:‬‬ ‫اﺳﺘﺎﻧﺪاردﻫﺎي وب اﻫﻤﯿﺖ ﺑﺴﯿﺎر ﺑﺎﻻﯾﯽ دارﻧﺪ و رﻋﺎﯾﺖ آﻧﻬﺎ ﺑﻪ ﺷﻤﺎ اﯾﻦ اﻃﻤﯿﻨﺎن را ﻣﯽدﻫﺪ ﮐﻪ ﺳﺎﯾﺖ ﺷﻤﺎ ﺑﺮاي‬ ‫اﺑﺰارﻫﺎي ﻣﺨﺘﻠﻒ و ﺣﺘﯽ اﺑﺰارﻫﺎﯾﯽ ﮐﻪ ﻫﻨﻮز ﺳﺎﺧﺘﻪ ﻧﺸﺪهاﻧﺪ و ﯾﺎ در آﯾﻨﺪه اراﺋﻪ ﺧﻮاﻫﻨﺪ ﺷﺪ‪ ،‬در دﺳﺘﺮس ﺑﺎﺷﺪ‪.‬‬ ‫اﺳﺘﺎﻧﺪاردﻫﺎ در ﻃﺮاﺣﯽ وب ﺑﻪ ﭼﻨﺪﯾﻦ ﺑﺨﺶ ﺗﻘﺴﯿﻢ ﻣﯽﺷﻮﻧﺪ‪ .‬در اداﻣﻪ اﯾﻦ ﻓﺼﻞ در ﻣﻮرد ﻣﻮﺿﻮﻋﺎﺗﯽ ﻫﻤﭽﻮن‬ ‫‪ Usability, Accessibility‬ﺑﺤﺚ ﺧﻮاﻫﯿﻢ ﮐﺮد‪.‬‬

‫ﮐﺎرﺑﺮدﭘﺬﯾﺮي‬ ‫ﮐﺎرﺑﺮدﭘﺬﯾﺮي ﯾﺎ ﻫﻤﺎن ‪ usability‬ﻋﺒﺎرت اﺳﺖ از ﺳﻬﻮﻟﺖ اﺳﺘﻔﺎده از ﺳﺎﯾﺖ ﺑﺮاي ﮐﺎرﺑﺮان و ﻗﺎﺑﻞ اﺳﺘﻔﺎده ﺑﻮدن آن‬ ‫ﺑﺮاي ﮐﺎرﺑﺮان ﻣﺨﺘﻠﻒ‪ .‬ﺑﺎ رﻋﺎﯾﺖ ﻧﮑﺎت ﮐﺎرﺑﺮدﭘﺬﯾﺮي ﻣﯽﺗﻮاﻧﯿﺪ ﻣﻄﻤﺌﻦ ﺑﺎﺷﯿﺪ ﮐﻪ ﻃﺮح ﺷﻤﺎ ﺑﺮاي ﮐﺎرﺑﺮان ﻗﺎﺑﻞ‬ ‫اﺳﺘﻔﺎده اﺳﺖ و آﻧﻬﺎ ﺑﺮاي دﺳﺖ ﯾﺎﺑﯽ ﺑﻪ اﻣﮑﺎﻧﺎت ﺳﺎﯾﺖ ﺑﺎ ﻣﺸﮑﻠﯽ ﻣﻮاﺟﻪ ﻧﺨﻮاﻫﻨﺪ ﺷﺪ‪.‬‬ ‫ﯾﮑﯽ از ﻣﻬﻤﺘﺮﯾﻦ ﻣﻮاردي ﮐﻪ ﺑﺮاي ﻣﻮﺿﻮع ﮐﺎرﺑﺮد ﭘﺬﯾﺮي ﻣﻄﺮح اﺳﺖ‪ ،‬ﺳﻬﻮﻟﺖ اﺳﺘﻔﺎده از ﺳﺎﯾﺖ اﺳﺖ‪ .‬ﺳﺎﯾﺖ ﺷﻤﺎ‬ ‫ﺑﺎﯾﺪ ﺑﻪ ﮔﻮﻧﻪاي ﻃﺮاﺣﯽ ﺷﻮد ﮐﻪ ﮐﺎرﺑﺮ در زﻣﺎن اﺳﺘﻔﺎده از ﺳﺎﯾﺖ ﻣﺠﺒﻮر ﺑﻪ ﻓﮑﺮ ﮐﺮدن ﻧﺒﺎﺷﺪ‪ .‬ﺗﻤﺎﻣﯽ ﻗﺴﻤﺖﻫﺎي‬ ‫ﺳﺎﯾﺖ ﺑﺎﯾﺪ ﮐﺎﻣﻼً ﮔﻮﯾﺎ و ﺷﻔﺎف ﺑﺎﺷﺪ‪ .‬ﻃﺮاﺣﺎن ﺑﻪ اﯾﻦ ﺧﺎﻃﺮ ﮐﻪ ﮐﺎرﺑﺮان ﺣﺮﻓﻪاي وب ﻣﺤﺴﻮب ﺷﻮﻧﺪ و از ﺳﻮﯾﯽ‬ ‫در ﺣﯿﻦ ﻃﺮاﺣﯽ ﺑﻪ ﻣﺪت زﯾﺎدي ﺑﺮ روي ﻃﺮح ﺧﻮد ﮐﺎر ﮐﺮده اﻧﺪ‪ ،‬اﯾﻦ ﺗﺼﻮر را دارﻧﺪ ﮐﻪ ﮐﺎرﺑﺮان ﻧﯿﺰ ﺑﺎ اوﻟﯿﻦ‬ ‫ﺑﺮﺧﻮرد ﺑﺎ ﻃﺮح ﻣﯽﺗﻮاﻧﻨﺪ اﺟﺰاي آن را ﺑﻪ ﺧﻮﺑﯽ ﺗﺸﺨﯿﺺ دﻫﻨﺪ‪.‬‬

‫زﻣﺎﻧﯽ ﮐﻪ ﻃﺮح ﺑﻪ ﺧﻮﺑﯽ ﻃﺮاﺣﯽ ﺷﺪه ﺑﺎﺷﺪ‪ ،‬ﮐﺎرﺑﺮ ﺑﺮاي اﺳﺘﻔﺎده از آن ﻓﮑﺮ ﻧﺨﻮاﻫﺪ ﮐﺮد‪ .‬ﻫﻤﻪ ﭼﯿﺰ ﻣﺸﺨﺺ ﺷﺪه و‬ ‫در ﺟﺎي ﺧﻮد ﻗﺮار ﮔﺮﻓﺘﻪ اﺳﺖ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪٧۶‬‬

‫وﻟﯽ اﮔﺮ ﻃﺮح ﺑﻪ ﺷﮑﻞ ﻣﻨﻄﻘﯽ و درﺳﺘﯽ ﻃﺮاﺣﯽ ﻧﺸﺪه ﺑﺎﺷﺪ‪ ،‬ﮐﺎرﺑﺮ ﺑﺮاي اﺳﺘﻔﺎده از ﻫﺮ ﺑﺨﺶ ﺑﺎﯾﺪ ﻗﺪري ﻓﮑﺮ ﮐﻨﺪ‪.‬‬ ‫اﯾﻦ ﻓﮑﺮ ﮐﺮدن ﺑﺎﻋﺚ از دﺳﺖ رﻓﺘﻦ اﻋﺘﻤﺎد ﺑﻪ ﻧﻔﺲ ﮐﺎرﺑﺮ در اداﻣﻪ اﺳﺘﻔﺎده از ﺳﺎﯾﺖ ﻣﯽﺷﻮد و ﻣﻤﮑﻦ اﺳﺖ ﻧﺘﻮاﻧﺪ‬ ‫اﻃﻼﻋﺎﺗﯽ را ﮐﻪ در ﭘﯽ آن اﺳﺖ را ﭘﯿﺪا ﮐﻨﺪ و از اﯾﻦ رو ﺳﺎﯾﺖ را ﺗﺮك ﮐﻨﺪ‪ .‬در ﺗﺼﻮﯾﺮي ﮐﻪ ﻣﺸﺎﻫﺪه ﻣﯽﮐﻨﯿﺪ‪،‬‬ ‫ﺳﺎﺧﺘﺎر ﺳﺎﯾﺖ ﺑﻪ درﺳﺘﯽ ﺗﻨﻈﯿﻢ ﻧﺸﺪه اﺳﺖ و ﮐﺎرﺑﺮ ﺑﺎﯾﺪ ﺑﺮاي اﺳﺘﻔﺎده از اﺟﺰاي ﺳﺎﯾﺖ‪ ،‬ﻓﮑﺮ ﮐﻨﺪ‪.‬‬ ‫در ﻃﺮاﺣﯽ ﺟﺪﯾﺪ ﻫﻤﯿﺸﻪ در ﻧﻈﺮ ﮔﺮﻓﺘﻪ ﻣﯽﺷﻮد ﮐﻪ ﺗﻮﺟﻪ و زﻣﺎن ﮐﺎرﺑﺮ ﻣﺤﺪود اﺳﺖ‪ .‬ﺑﺎﯾﺪ ﺳﺎﺧﺘﺎر ﺳﺎﯾﺖ ﺑﻪ ﺷﮑﻠﯽ‬ ‫ﺑﺎﺷﺪ ﮐﻪ ﮐﺎرﺑﺮ در ﮐﻤﺘﺮﯾﻦ زﻣﺎن ﻣﻤﮑﻦ ﺑﺘﻮاﻧﺪ اﻃﻼﻋﺎﺗﯽ را ﮐﻪ ﻧﯿﺎز دارد را ﺑﯿﺎﺑﺪ‪ .‬از اﯾﻦ رو ﭘﺎﮐﯿﺰه و ﺧﻠﻮت ﺑﻮدن‬ ‫ﻃﺮح اﻫﻤﯿﺖ ﺑﺴﯿﺎر زﯾﺎدي دارد‪.‬‬ ‫ﺑﺮاي اﯾﻨﮑﻪ ﮐﺎرﺑﺮ را ﺑﻪ ﻓﮑﺮ ﮐﺮدن وادار ﻧﮑﻨﯿﻢ ﺑﺎﯾﺪ از ﺑﺮﺧﯽ اﺳﺘﺎﻧﺪاردﻫﺎ ﭘﯿﺮوي ﮐﻨﯿﻢ‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل دﮐﻤﻪﻫﺎﯾﯽ ﮐﻪ‬ ‫ﻗﺎﺑﻞ ﮐﻠﯿﮏ ﮐﺮدن ﻫﺴﺘﻨﺪ اﻏﻠﺐ ﺷﮑﻠﯽ ﮐﺎﻣﻼً ﻣﺸﺨﺺ دارﻧﺪ و ﻣﺘﻦ داﺧﻞ دﮐﻤﻪ ﻧﯿﺰ ﮐﺎﻣﻼ ﺷﻤﺎ را ﻣﺘﻘﺎﻋﺪ ﻣﯽﮐﻨﺪ ﮐﻪ‬ ‫دﮐﻤﻪ ﻗﺎﺑﻞ ﮐﻠﯿﮏ ﮐﺮدن اﺳﺖ وﻟﯽ اﮔﺮ دﮐﻤﻪ را ﺑﻪ ﺷﮑﻠﯽ ﻃﺮاﺣﯽ ﮐﻨﯿﻢ ﮐﻪ ﺷﺒﺎﻫﺘﯽ ﺑﻪ دﮐﻤﻪ ﻧﺪاﺷﺘﻪ ﺑﺎﺷﺪ و ﯾﺎ ﻣﺘﻦ‬ ‫داﺧﻞ آن ﮔﻮﯾﺎ ﻧﺒﺎﺷﺪ‪ ،‬ﮐﺎرﺑﺮ ﺑﺎﯾﺪ ﻟﺤﻈﺎﺗﯽ ﺗﺎﻣﻞ ﮐﻨﺪ و ﻫﻤﯿﻦ درﻧﮓ ﮐﺮدنﻫﺎ ﺑﺎﻋﺚ ﻧﺎرﺿﺎﯾﺘﯽ ﮐﺎرﺑﺮ و ﺗﻠﻒ ﺷﺪن‬ ‫زﻣﺎن ﻣﯽﺷﻮد‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪٧٧‬‬

‫ﻣﻮرادي ﻫﺴﺖ ﮐﻪ ﮐﺎرﺑﺮان ﻫﯿﭻ ﻋﻼﻗﻪ اي ﺑﻪ آﻧﻬﺎ ﻧﺪارﻧﺪ از ﺟﻤﻠﻪ‪:‬‬ ‫‪‬‬

‫ﮐﺠﺎي ﺳﺎﯾﺖ ﻗﺮار دارم؟‬

‫‪‬‬

‫از ﮐﺠﺎ ﺑﺎﯾﺪ ﺷﺮوع ﮐﻨﻢ؟‬

‫‪‬‬

‫ﻓﻼن ﺑﺨﺶ در ﮐﺠﺎي ﺳﺎﯾﺖ ﻗﺮار دارد؟‬

‫‪‬‬

‫ﮐﺪام ﺑﺨﺶ از ﺻﻔﺤﻪ از دﯾﮕﺮ ﺑﺨﺶﻫﺎ ﻣﻬﻢ ﺗﺮ اﺳﺖ؟‬

‫‪‬‬

‫ﭼﺮا ﻧﺎم اﯾﻦ ﺑﺨﺶ را اﯾﻨﮕﻮﻧﻪ اﻧﺘﺨﺎب ﮐﺮده اﻧﺪ؟‬

‫! ﮐﺎرﺑﺮان ﺗﻨﻬﺎ ﺑﻪ دﻧﺒﺎل داده ﻫﺴﺘﻨﺪ و اﮔﺮ ﻧﺘﻮاﻧﻨﺪ داده ﺧﻮد را ﺑﻪ راﺣﺘﯽ در ﺳﺎﯾﺖ ﺷﻤﺎ ﺑﯿﺎﺑﻨﺪ‪ ،‬ﺳﺎﯾﺖ را ﺗﺮك‬ ‫ﺧﻮاﻫﻨﺪ ﮐﺮد‪ .‬ﻧﮕﺬارﯾﺪ ﮐﺎرﺑﺮان ﻓﮑﺮ ﮐﻨﻨﺪ‪ .‬ﺳﺎﯾﺖ را ﺳﺎده و ﮔﻮﯾﺎ ﻃﺮاﺣﯽ ﮐﻨﯿﺪ‪.‬‬ ‫ﺷﯿﻮه اﺳﺘﻔﺎده ﮐﺎرﺑﺮان از وب‬ ‫ﮐﺎرﺑﺮان ﺑﻪ ﺷﯿﻮه اي ﻣﺘﻔﺎوت از ﭼﯿﺰي ﮐﻪ اﻧﺘﻈﺎر دارﯾﻢ ﺻﻔﺤﺎت را ﻣﯽﺑﯿﻨﻨﺪ‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﻣﺎ اﻧﺘﻈﺎر دارﯾﻢ ﮐﻪ‬ ‫ﮐﺎرﺑﺮان ﺻﻔﺤﺎت را ﺑﻪ دﻗﺖ و از ﺑﺎﻻ ﺗﺎ ﭘﺎﯾﯿﻦ و ﺑﺨﺶ ﺑﻪ ﺑﺨﺶ ﺑﺨﻮاﻧﻨﺪ وﻟﯽ در ﺣﻘﯿﻘﺖ ﮐﺎرﺑﺮان ﺻﻔﺤﺎت را ﺧﯿﻠﯽ‬ ‫ﺳﺮﯾﻊ اﺳﮑﻦ ﻣﯽﮐﻨﻨﺪ و ﻓﻘﻂ ﺑﺨﺶﻫﺎﯾﯽ ﮐﻪ ﺑﺮاﯾﺸﺎن ﺟﺬاب اﺳﺖ را ﻣﯽﺧﻮاﻧﻨﺪ‪ .‬ﺑﻌﻀﯽ از ﮐﺎرﺑﺮان ﺑﺮ روي اوﻟﯿﻦ‬ ‫ﻟﯿﻨﮑﯽ ﮐﻪ ﺟﺬﺑﺸﺎن ﮐﻨﺪ‪ ،‬ﮐﻠﯿﮏ ﻣﯽﮐﻨﻨﺪ‪.‬‬

‫اﯾﻦ ﺗﺼﻮﯾﺮ ﮐﺎﻣﻼً ﮔﻮﯾﺎي اﺗﻔﺎﻗﯽ اﺳﺖ‪ ،‬ﮐﻪ ﻣﯽاﻓﺘﺪ‪ .‬ﻣﺎ ﺗﻮﻗﻊ دارﯾﻢ ﮐﺎرﺑﺮ ﺳﺎﯾﺖ ﺑﺎ اﻟﮕﻮﯾﯽ ﻣﺸﺎﺑﻪ ﺗﺼﻮﯾﺮ ﺳﻤﺖ ﭼﭗ‬ ‫ﺳﺎﯾﺖ ﻣﺎ را ﺑﺨﻮاﻧﺪ وﻟﯽ در ﺣﻘﯿﻘﺖ ﮐﺎرﺑﺮ ﺑﺮ اﺳﺎس اﻟﮕﻮي ﺳﻤﺖ راﺳﺖ ﻣﻄﺎﻟﺐ ﺳﺎﯾﺖ را ﻣﯽﺧﻮاﻧﻨﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪٧٨‬‬

‫ﺣﺎل ﺣﻘﺎﯾﻘﯽ وﺟﻮد دارد ﮐﻪ ﺷﺎﯾﺪ داﻧﺴﺘﻨﺸﺎن ﺑﺮاﯾﺘﺎن ﺟﺎﻟﺐ ﺑﺎﺷﺪ‬

‫ﺣﻘﯿﻘﺖ اول ‪:‬‬ ‫ﮐﺎرﺑﺮان ﺻﻔﺤﺎت ﺳﺎﯾﺖ را ﻧﻤﯽﺧﻮاﻧﻨﺪ ﺑﻠﮑﻪ آﻧﻬﺎ را اﺳﮑﻦ ﻣﯽﮐﻨﻨﺪ‪.‬‬ ‫ﮐﺎرﺑﺮان اﻏﻠﺐ ﻣﻄﺎﻟﺐ ﺳﺎﯾﺖ را اﮔﺮ ﻃﻮﻻﻧﯽ ﺑﺎﺷﻨﺪ‪ ،‬ﻧﻤﯽﺧﻮاﻧﻨﺪ و ﺗﻨﻬﺎ آﻧﻬﺎ را اﺳﮑﻦ ﻣﯽﮐﻨﻨﺪ‪ .‬ﯾﮑﯽ از دﻻﯾﻞ اﯾﻨﮑﺎر اﯾﻦ‬ ‫اﺳﺖ ﮐﻪ ﮐﺎرﺑﺮان ﺑﺎ ﺧﻮاﻧﺪن ﻣﺘﻦﻫﺎي ﻃﻮﻻﻧﯽ ﺑﺮ روي ﮐﺎﻏﺬ راﺣﺖ ﺗﺮﻧﺪ و اﮔﺮ ﻣﺘﻦ داﺧﻞ ﺻﻔﺤﻪ از ﭼﻨﺪ ﭘﺎراﮔﺮاف‬ ‫ﺑﯿﺸﺘﺮ ﺑﺎﺷﺪ ﺑﻪ ﺟﺎي ﺧﻮاﻧﺪن ﻣﺘﻦ آن را ﭘﺮﯾﻨﺖ ﻣﯽﮔﯿﺮﻧﺪ‪ .‬ﺣﺎل دﻻﯾﻞ دﯾﮕﺮ اﺳﮑﻦ ﮐﺮدن ﻣﻄﺎﻟﺐ ﺑﺪﯾﻦ ﻗﺮار اﺳﺖ‪.‬‬ ‫‪‬‬

‫ﻣﺎ ﻣﻌﻤﻮﻻً ﻋﺠﻠﻪ دارﯾﻢ‪ .‬اﻏﻠﺐ ﮐﺎرﺑﺮان ﺳﻌﯽ دارﻧﺪ ﺑﺎ اﺳﺘﻔﺎده از وب در وﻗﺖ ﺻﺮﻓﻪ ﺟﻮﯾﯽ ﮐﻨﻨﺪ ﺑﻪ ﻫﻤﯿﻦ‬ ‫ﺧﺎﻃﺮ اﻏﻠﺐ ﻋﺠﻠﻪ دارﻧﺪ‪ .‬ﮐﺎرﺑﺮان وب ﻫﻤﺎﻧﻨﺪ ﮐﻮﺳﻪ ﻫﺴﺘﻨﺪ ﮐﻪ ﻣﺪام ﺑﺎﯾﺪ در ﺣﺎل ﺣﺮﮐﺖ ﺑﺎﺷﻨﺪ و ﺳﺎﮐﻦ‬ ‫ﺑﻮدن ﺑﻪ ﻣﺮﮔﺸﺎن ﺧﺘﻢ ﻣﯽﺷﻮد‪.‬‬

‫‪‬‬

‫ﻣﯽداﻧﯿﻢ ﮐﻪ ﻻزم ﻧﯿﺴﺖ ﻫﻤﻪ ﭼﯿﺰ را ﺑﺨﻮاﻧﯿﻢ‪ .‬ﻣﺎ ﻣﯽداﻧﯿﻢ ﮐﻪ ﺑﻪ ﻫﻤﻪ ﻣﺤﺘﻮاي ﺻﻔﺤﻪ ﻧﯿﺎزي ﻧﺪارﯾﻢ و ﺑﻪ‬ ‫دﻧﺒﺎل ﺑﺨﺸﯽ ﻫﺴﺘﯿﻢ ﮐﻪ ﺑﺮاي ﻣﺎ ﺟﺬاب ﺗﺮ اﺳﺖ ﺗﺎ ﻓﻘﻂ آن ﺑﺨﺶ را ﺑﺨﻮاﻧﯿﻢ‪.‬‬

‫‪‬‬

‫ﻣﺎ در اﯾﻨﮑﺎر ﺗﺨﺼﺺ دارﯾﻢ‪ .‬ﻣﺎ روزﻧﺎﻣﻪ و ﻣﺠﻠﻪ را ﻫﻢ ﺑﻪ ﻫﻤﯿﻦ ﺷﮑﻞ ﻣﯽﺧﻮاﻧﯿﻢ و ﺑﺎ ﻧﮕﺎه ﮐﺮدن ﺑﻪ‬ ‫ﺗﯿﺘﺮﻫﺎ ﻓﻘﻂ ﺑﺨﺶﻫﺎﯾﯽ را ﮐﻪ ﺑﻪ دﻧﺒﺎﻟﺶ ﻫﺴﺘﯿﻢ را ﻣﯽﺧﻮاﻧﯿﻢ‪ .‬ﺗﻨﻬﺎ ﺗﯿﺘﺮﻫﺎ را اﺳﮑﻦ ﻣﯿﮑﻨﯿﻢ و ﺑﺨﺶﻫﺎي‬ ‫ﺟﺬاب را ﻣﯽﺧﻮاﻧﯿﻢ‪.‬‬

‫ﺣﻘﯿﻘﺖ دوم‪:‬‬ ‫ﻣﺎ ﺑﻪ دﻧﺒﺎل اﻧﺘﺨﺎب ﺑﺮﺗﺮ ﻧﯿﺴﺘﻢ‪ .‬ﺗﻨﻬﺎ ﭼﯿﺰي را اﻧﺘﺨﺎب ﻣﯽﮐﻨﯿﻢ ﮐﻪ ﺑﺮاﯾﻤﺎن ﻗﺎﻧﻊ ﮐﻨﻨﺪه ﺑﺎﺷﺪ‪.‬‬ ‫زﻣﺎﻧﯽ ﮐﻪ ﺻﻔﺤﻪ اي را ﻃﺮاﺣﯽ ﻣﯽ ﮐﻨﯿﻢ‪ ،‬اﻧﺘﻈﺎر دارﯾﻢ ﮐﻪ ﮐﺎرﺑﺮان ﻟﯿﻨﮏﻫﺎي داﺧﻞ ﺻﻔﺤﻪ را ارزﯾﺎﺑﯽ ﮐﻨﻨﺪ و ﺑﻬﺘﺮﯾﻦ‬ ‫ﮔﺰﯾﻨﻪ را اﻧﺘﺨﺎب ﮐﻨﻨﺪ وﻟﯽ در ﺣﻘﯿﻘﺖ ﮐﺎرﺑﺮان ﺑﺮ روي اوﻟﯿﻦ ﻟﯿﻨﮑﯽ ﮐﻪ ﺑﺒﯿﻨﻨﺪ و ﺑﻪ ﻧﻈﺮﺷﺎن ﻟﯿﻨﮏ ﺧﻮﺑﯽ ﺑﯿﺎﯾﺪ‪ ،‬ﮐﻠﯿﮏ‬ ‫ﻣﯽﮐﻨﻨﺪ‪.‬‬ ‫ﺗﺤﻘﯿﻘﺎت ﻧﺸﺎن داده ﮐﻪ اﻧﺴﺎن در ﺷﺮاﯾﻄﯽ ﮐﻪ ﻣﺤﺪودﯾﺖ زﻣﺎﻧﯽ دارد ﻣﻌﻤﻮﻻ اﻧﺘﺨﺎبﻫﺎي اﻧﺪﮐﯽ را ارزﯾﺎﺑﯽ ﻣﯽﮐﻨﺪ و‬ ‫از ﺑﯿﻦ اﯾﻦ اﻧﺘﺨﺎبﻫﺎي ﻣﻌﺪود ﯾﮑﯽ را اﻧﺘﺨﺎب ﻣﯽﮐﻨﺪ‪.‬‬ ‫ﺣﺎل دﻻﯾﻞ اﯾﻨﮑﻪ ﻣﺎ ﺑﻪ دﻧﺒﺎل ﺑﻬﺘﺮﯾﻦ اﻧﺘﺨﺎب ﻧﯿﺴﺘﯿﻢ ﺑﺪﯾﻦ ﻗﺮار اﺳﺖ‪:‬‬ ‫‪‬‬

‫ﻣﺎ اﻏﻠﺐ ﻋﺠﻠﻪ دارﯾﻢ‪ :‬ﻫﻤﯿﺸﻪ ﺑﻬﯿﻨﻪ ﺳﺎزي ﮐﺎري ﺳﺨﺖ و زﻣﺎن ﺑﺮ اﺳﺖ‪ ،‬ﻗﺎﻧﻊ ﺳﺎزي ﻫﻤﯿﺸﻪ ﮐﺎري‬ ‫راﺣﺖﺗﺮ اﺳﺖ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪٧٩‬‬

‫‪‬‬

‫اﮔﺮ در اﻧﺘﺨﺎب اﺷﺘﺒﺎه داﺷﺘﻪ ﺑﺎﺷﯿﻢ‪ ،‬ﺿﺮري ﻣﺘﻮﺟﻬﻤﺎن ﻧﯿﺴﺖ‪ :‬اﮔﺮ در اﻧﺘﺨﺎب ﻟﯿﻨﮏ اﺷﺘﺒﺎه ﮐﻨﯿﻢ ﻫﯿﭻ‬ ‫ﺿﺮري ﻣﺘﻮﺟﻪ ﻣﺎ ﻧﯿﺴﺖ و ﺗﻨﻬﺎ ﺑﺎﯾﺪ دو ﮐﻠﯿﮏ دﯾﮕﺮ اﻧﺠﺎم دﻫﯿﻢ و ﺑﻪ ﺻﻔﺤﻪ ﻗﺒﻞ ﺑﺮﮔﺸﺘﻪ و ﮔﺰﯾﻨﻪ دﯾﮕﺮي‬ ‫را اﻧﺘﺨﺎب ﮐﻨﯿﻢ‪.‬‬

‫‪‬‬

‫ﺳﺒﮏ و ﺳﻨﮕﯿﻦ ﮐﺮدن ﻟﯿﻨﮏﻫﺎ ﮐﻤﮑﯽ ﺑﻪ ﻣﺎ ﻧﻤﯽﮐﻨﺪ‪ :‬زﻣﺎﻧﯽ ﮐﻪ ﺳﺎﺧﺘﺎر ﺳﺎﯾﺖ ﻣﻨﺎﺳﺐ ﻧﯿﺴﺖ و ﺑﺎ ﺳﺎﯾﺖ‬ ‫ﺷﻠﻮﻏﯽ ﻣﻮاﺟﻪ ﻫﺴﺘﯿﻢ‪ .‬وﻗﺖ ﮔﺬاﺷﺘﻦ ﺟﻬﺖ ﺳﺒﮏ و ﺳﻨﮕﯿﻦ ﮐﺮدن ﻟﯿﻨﮏﻫﺎ ﻫﯿﭻ ﮐﻤﮑﯽ ﺑﻪ ﻣﺎ ﻧﺨﻮاﻫﺪ ﮐﺮد‪.‬‬

‫‪‬‬

‫ﺣﺪس زدن ﺷﯿﺮﯾﻦ ﺗﺮ اﺳﺖ‪ .‬ﺣﺪس زدن ﻫﻤﯿﺸﻪ ﺳﺮﯾﻌﺘﺮ اﺳﺖ و ﭼﻮن داراي ﻋﻨﺼﺮ ﺷﺎﻧﺲ اﺳﺖ ﺑﺮاي‬ ‫ﮐﺎرﺑﺮان ﻟﺬت ﺑﺨﺶﺗﺮ اﺳﺖ‪ .‬از اﯾﻦ رو ﮐﺎرﺑﺮان دوﺳﺖ دارﻧﺪ ﮐﻪ ﺑﺎ ﺣﺪس زدن اﻧﺘﺨﺎب ﮐﻨﻨﺪ‪.‬‬

‫ﺣﻘﯿﻘﺖ ﺳﻮم‪:‬‬ ‫ﺷﯿﻮه ﮐﺎر ﮐﺮد اﺷﯿﺎ و اﻗﻼم ﺑﺮاي ﻣﺎ ﻣﻬﻢ ﻧﯿﺴﺖ‪ .‬ﻣﺎ ﺗﻨﻬﺎ ﺳﻌﯽ ﻣﯿﮑﻨﯿﻢ ﺑﻪ ﺷﮑﻠﯽ از آﻧﻬﺎ اﺳﺘﻔﺎده ﮐﻨﯿﻢ‬ ‫ﻣﻮردي ﮐﻪ ﺑﺎﯾﺪ ﻫﻤﯿﺸﻪ ﺑﻪ ﯾﺎد داﺷﺘﻪ ﺑﺎﺷﯿﺪ اﯾﻦ اﺳﺖ ﮐﻪ ﻣﺮدم از اﺑﺰارﻫﺎ اﺳﺘﻔﺎده ﻣﯽﮐﻨﻨﺪ ﺑﺪون اﯾﻨﮑﻪ در ﻣﻮرد‬ ‫ﺷﯿﻮه ﮐﺎرﮐﺮد ﻫﻤﺎن اﺑﺰارﻫﺎ ﭼﯿﺰي ﺑﺪاﻧﻨﺪ‪ .‬ﺗﻨﻬﺎ اﻓﺮاد اﻧﺪﮐﯽ ﻫﺴﺘﻨﺪ ﮐﻪ ﻣﯽﺧﻮاﻫﻨﺪ ﺷﯿﻮه ﮐﺎرﮐﺮد را ﺑﺪاﻧﻨﺪ و در‬ ‫ﻋﻮض ﻣﺮدم ﻋﺎدي ﺳﻌﯽ ﻣﯽﮐﻨﻨﺪ ﺳﺮﯾﻌﺎ ﮐﺎر ﺑﺎ اﺑﺰار را ﺷﺮوع ﮐﻨﻨﺪ و ﺑﺎ آزﻣﻮن‪ -‬ﺧﻄﺎ ﺷﯿﻮه ﮐﺎر ﮐﺮد آن اﺑﺰار را‬ ‫ﻓﺮاﺑﮕﯿﺮﻧﺪ‪.‬‬ ‫ﻣﺜﺎل ﺧﯿﻠﯽ ﺑﺎرز ﺑﺮاي اﯾﻦ ﻣﺴﺌﻠﻪ ﮐﺎرﺑﺮاﻧﯽ ﻫﺴﺘﻨﺪ ﮐﻪ ﻓﮑﺮ ﻣﯽﮐﻨﻨﺪ ﺑﺮاي ورود ﺑﻪ ﺳﺎﯾﺖ ﺑﺎﯾﺪ آدرس ﮐﺎﻣﻞ ﺳﺎﯾﺖ را‬ ‫در ﻧﻮار ﺟﺴﺘﺠﻮي ﮔﻮﮔﻞ ﯾﺎ ﯾﺎﻫﻮ وارد ﮐﻨﻨﺪ و ﺑﺮ روي دﮐﻤﻪ ‪ search‬ﮐﻠﯿﮏ ﮐﻨﻨﺪ و ﺳﭙﺲ در ﺻﻔﺤﻪ ﻧﺘﺎﯾﺞ ﺑﺮ روي‬ ‫اوﻟﯿﻦ ﻧﺘﯿﺠﻪ ﮐﻠﯿﮏ ﮐﻨﻨﺪ‪.‬‬ ‫ﭼﺮا اﯾﻦ اﺗﻔﺎق ﻣﯽاﻓﺘﺪ‪:‬‬ ‫‪‬‬

‫ﺷﯿﻮه ﮐﺎرﮐﺮد اﺑﺰارﻫﺎي ﺑﺮاي ﻣﺎ اﻫﻤﯿﺘﯽ ﻧﺪارد‪ :‬ﺗﺎ زﻣﺎﻧﯽ ﮐﻪ ﻣﯽﺗﻮاﻧﯿﻢ از ﯾﮏ اﺑﺰار اﺳﺘﻔﺎده ﮐﻨﯿﻢ‪ ،‬ﺷﯿﻮه‬ ‫ﮐﺎرﮐﺮد آن اﺑﺰار ﺑﺮاي ﻣﺎ اﻫﻤﯿﺘﯽ ﻧﺪارد‪ .‬اﯾﻦ ﻧﺎﺷﯽ از ﮐﻢ ﻫﻮﺷﯽ ﻣﺎ ﻧﯿﺴﺖ ﺑﻠﮑﻪ از ﻋﺪم ﺗﻮﺟﻪ ﻣﺎ ﻧﺎﺷﯽ‬ ‫ﻣﯽﺷﻮد‪.‬‬

‫‪‬‬

‫زﻣﺎﻧﯽ ﮐﻪ ﺑﺘﻮاﻧﯿﻢ از ﯾﮏ اﺑﺰار اﺳﺘﻔﺎده ﮐﻨﯿﻢ‪ ،‬ﻫﻤﺎن ﺷﯿﻮه را ﺑﺮاي ﺑﻪ ﮐﺎرﮔﯿﺮي اﺑﺰار ﺑﺮاي ﻫﻤﯿﺸﻪ اداﻣﻪ‬ ‫ﻣﯽدﻫﯿﻢ‪ :‬زﻣﺎﻧﯽ ﮐﻪ ﺑﺮاي ﺷﯿﻮه ﮐﺎر ﮐﺮدن ﺑﺎ اﺑﺰاري را ﻓﺮا ﻣﯽﮔﯿﺮﯾﻢ )ﻫﺮ ﭼﻨﺪ ﻣﻤﮑﻦ اﺳﺖ اﯾﻦ ﺷﯿﻮه‬ ‫اﺳﺘﻔﺎده ﻧﺎدرﺳﺖ ﺑﺎﺷﺪ( وﻟﯽ ﺑﺮاي ﻫﻤﯿﺸﻪ از ﻫﻤﺎن ﺷﯿﻮه اﺳﺘﻔﺎده ﻣﯽﮐﻨﯿﻢ و ﺷﯿﻮه اﺳﺘﻔﺎده را ﻋﻮض‬ ‫ﻧﻤﯽﮐﻨﯿﻢ ﺣﺘﯽ اﮔﺮ ﺷﯿﻮه ﺑﻬﺘﺮي ﻧﯿﺰ ﺑﯿﺎﺑﯿﻢ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪٨٠‬‬

‫از اﯾﻦ رو ﺑﺎﯾﺪ ﺳﻌﯽ ﮐﻨﯿﺪ ﺳﺎﯾﺖ را ﺑﻪ ﺷﮑﻠﯽ ﻃﺮاﺣﯽ ﮐﻨﯿﺪ ﮐﻪ اﺟﺰاي ﺻﻔﺤﻪ ﺑﺘﻮاﻧﺪ ﺑﻪ ﻃﻮر ﮐﺎﻣﻞ ﺗﻮﺟﻪ ﮐﺎرﺑﺮ را ﺑﻪ‬ ‫ﺧﻮد ﺟﻠﺐ ﮐﻨﺪ‪ .‬ﮐﺎرﺑﺮ ﺑﺎﯾﺪ درك ﮐﻨﺪ ﮐﻪ ﻫﺮ ﮐﺪام از اﺟﺰاي ﺳﺎﯾﺖ دﻗﯿﻘﺎً ﭼﻪ ﮐﺎري اﻧﺠﺎم ﻣﯽدﻫﺪ‪.‬‬ ‫ﻃﺮاﺣﯽ ﺳﺎﯾﺖ ﺑﻪ ﺳﺒﮏ ﻃﺮاﺣﯽ ﺑﯿﻠﺒﻮرد‬ ‫ﺣﺎل ﮐﻪ ﻓﻬﻤﯿﺪﯾﻢ ﮐﺎرﺑﺮان ﻫﻤﯿﺸﻪ در اﺳﺘﻔﺎده از ﺳﺎﯾﺖ ﻋﺠﻠﻪ دارﻧﺪ و ﺑﻪ دﻗﺖ اﺟﺰاي ﺻﻔﺤﻪ را ﻧﻤﯽﺑﯿﻨﻨﺪ از اﯾﻦ رو‬ ‫ﺑﺎﯾﺪ ﺳﺎﯾﺖ را ﺑﻪ ﺷﮑﻠﯽ ﻃﺮاﺣﯽ ﮐﻨﯿﻢ ﮐﻪ ﻫﻤﻪ ﭼﯿﺰ واﺿﺢ و روﺷﻦ ﺑﺎﺷﺪ و ﮐﺎرﺑﺮ ﺑﻪ ﺳﺮﻋﺖ ﺑﺘﻮاﻧﻨﺪ اﺟﺰاي ﻣﻬﻢ‬ ‫ﺻﻔﺤﻪ را ﺗﺸﺨﯿﺺ دﻫﺪ‪.‬‬ ‫ﺣﺎل ﭼﻨﺪ ﮐﺎر اﺳﺖ ﮐﻪ ﺑﺎﯾﺪ ﺣﺘﻤﺎً در ﺣﯿﻦ ﻃﺮاﺣﯽ اﻧﺠﺎم دﻫﯿﻢ‪:‬‬ ‫‪‬‬

‫ﺳﺎﺧﺘﺎر ﺳﻠﺴﻠﻪ ﻣﺮاﺗﺒﯽ ﻣﻨﻈﻤﯽ را ﺑﺮاي ﻫﺮ ﺻﻔﺤﻪ در ﻧﻈﺮ ﺑﮕﯿﺮﯾﺪ‪.‬‬

‫‪‬‬

‫از ﻋﺮفﻫﺎي ﻃﺮاﺣﯽ ﭘﯿﺮوي ﮐﻨﯿﺪ‪.‬‬

‫‪‬‬

‫ﺻﻔﺤﻪ را ﺑﻪ اﺟﺰاي ﻣﺸﺨﺺ و ﻣﺠﺰا ﺗﻘﺴﯿﻢ ﮐﻨﯿﺪ‪.‬‬

‫‪‬‬

‫ﻣﺸﺨﺺ ﮐﻨﯿﺪ ﮐﻪ ﭼﻪ اﺟﺰاﯾﯽ از ﺻﻔﺤﻪ ﻗﺎﺑﻞ ﮐﻠﯿﮏ ﮐﺮدن ﻫﺴﺘﻨﺪ‪.‬‬

‫‪‬‬

‫ﺷﻠﻮﻏﯽ ﺻﻔﺤﻪ را ﮐﺎﻫﺶ دﻫﯿﺪ‪.‬‬

‫ﺳﺎﺧﺘﺎر ﺳﻠﺴﻠﻪ ﻣﺮاﺗﺒﯽ ﻣﻨﻈﻤﯽ را ﺑﺮاي ﻫﺮ ﺻﻔﺤﻪ در ﻧﻈﺮ ﺑﮕﯿﺮﯾﺪ‬ ‫ﯾﮑﯽ از راهﻫﺎﯾﯽ ﮐﻪ ﻣﯽ ﺗﻮان اﺳﺘﻔﺎده ﮐﺮد ﺗﺎ اﺟﺰاي ﺻﻔﺤﻪ ﺑﻪ ﺧﻮﺑﯽ از ﻫﻢ ﺗﻔﮑﯿﮏ ﺷﻮﻧﺪ اﯾﻦ اﺳﺖ ﮐﻪ ارﺗﺒﺎط ﺑﯿﻦ‬ ‫اﺟﺰاي ﻣﺨﺘﻠﻒ ﺻﻔﺤﻪ را ﺑﻪ روﺷﻨﯽ ﻣﺸﺨﺺ ﮐﻨﯿﺪ‪ .‬اﯾﻨﮑﻪ ﭼﻪ اﺟﺰاﯾﯽ از ﺻﻔﺤﻪ ﺑﻪ ﻫﻢ رﺑﻂ دارﻧﺪ و ﭼﻪ اﺟﺰاﯾﯽ‬ ‫ﺟﺰﺋﯽ از ﺑﺨﺶﻫﺎي دﯾﮕﺮ ﺑﻪ ﺣﺴﺎب ﻣﯽآﯾﻨﺪ‪ .‬ﯾﮏ ﺻﻔﺤﻪ ﺑﺎ ﺳﺎﺧﺘﺎر ﺑﺼﺮي ﻣﺮﺗﺐ ﺑﺎﯾﺪ ﺳﻪ ﺷﺮط داﺷﺘﻪ ﺑﺎﺷﺪ‪.‬‬ ‫‪‬‬

‫ﻫﺮ ﺑﺨﺸﯽ ﮐﻪ ﻣﻬﻢ ﺗﺮ اﺳﺖ ﺑﺎﯾﺪ ﺑﺮﺟﺴﺘﻪ ﺗﺮ ﻧﻤﺎﯾﺶ داده ﺷﻮد‪ :‬ﺑﺮاي ﻣﺜﺎل ﺗﯿﺘﺮﻫﺎي ﻣﻬﻢ ﺑﺎﯾﺪ ﺑﺰرﮔﺘﺮ و‬ ‫ﺑﺎ ﻓﻮﻧﺖ ﺿﺨﯿﻢ ﻧﻤﺎﯾﺶ داده ﺷﻮﻧﺪ و ﯾﺎ رﻧﮕﺸﺎن ﻣﺘﻔﺎوت ﺑﺎﺷﺪ‪ .‬ﻣﻄﺎﻟﺐ ﻣﻬﻢ ﺗﺮ ﺑﺎﯾﺪ در ﺑﺎﻻي ﺻﻔﺤﻪ ﺑﺎﺷﻨﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪٨١‬‬

‫‪‬‬

‫ﻣﻄﺎﻟﺒﯽ ﮐﻪ از ﻧﻈﺮ ﻣﻔﻬﻮﻣﯽ ﺑﺎ ﻫﻢ ﻣﺮﺗﺒﻂ اﻧﺪ از ﻧﻈﺮ ﺑﺼﺮي ﻧﯿﺰ ﺑﺎﯾﺪ ﺑﻪ ﻫﻢ ﻣﺮﺗﺒﻂ ﺑﺎﺷﻨﺪ‪ :‬ﺑﺮاي ﻣﺜﺎل‬ ‫ﻣﻄﺎﻟﺒﯽ ﮐﻪ ﺑﺎ ﻫﻢ ﻣﺮﺗﺒﻂ اﻧﺪ ﺑﺎﯾﺪ ﺑﺎ ﺷﮑﻞ ﮔﺮوﻫﯽ ﻧﻤﺎﯾﺶ داده ﺷﻮﻧﺪ و ﯾﺎ در ﺑﺨﺸﯽ از ﺻﻔﺤﻪ در ﮐﻨﺎر ﻫﻢ‬ ‫ﻧﻤﺎﯾﺶ داده ﺷﻮﻧﺪ‪.‬‬

‫‪‬‬

‫ﻋﻨﺎﺻﺮي ﮐﻪ درون ﻫﻢ ﻗﺮار ﻣﯽﮔﯿﺮﻧﺪ‪ ،‬ﺑﺎﯾﺪ ﮐﺎﻣﻼ ﻣﺸﺨﺺ ﺑﺎﺷﻨﺪ و ارﺗﺒﺎط ﻫﺮ ﺑﺨﺶ ﺑﺎ زﯾﺮﻣﺠﻤﻮﻋﻪ‬ ‫ﺧﻮدش ﻣﺸﺨﺺ ﺑﺎﺷﺪ‪ :‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﺗﯿﺘﺮ ﻓﺼﻞ ﮐﺘﺎب ﻫﻤﯿﺸﻪ در ﺑﺎﻻي ﺻﻔﺤﺎت ﮐﺘﺎب ﻗﺮار دارد و ﮐﺘﺎب‬ ‫ﻧﯿﺰ ﺣﺎوي ﺗﯿﺘﺮ ﻣﻄﻠﺐ و ﻣﺤﺘﻮاي ﻣﺮﺑﻮط ﺑﻪ آن ﺗﯿﺘﺮ اﺳﺖ ﮐﻪ در زﯾﺮ آن ﻗﺮار ﻣﯿﮕﯿﺮد‪.‬‬

‫اﻟﺒﺘﻪ ﻣﺎ ﺑﺎ اﯾﻦ ﻗﻮاﻧﯿﻦ آﺷﻨﺎ ﻫﺴﺘﯿﻢ و ﻫﺮ روزه در روزﻧﺎﻣﻪ و ﻣﺠﻠﻪ آﻧﻬﺎ را ﻣﺸﺎﻫﺪه ﻣﯽﮐﻨﯿﻢ‪ .‬ارﺗﺒﺎط‬ ‫ﺗﺼﺎوﯾﺮ ﺑﺎ ﻣﺘﻦﻫﺎ ﮐﺎﻣﻼ ﻣﺸﺨﺺ اﺳﺖ و ﻣﻬﻤﺘﺮﯾﻦ ﻣﻄﺎﻟﺐ ﻣﻌﻤﻮﻻ ﺗﯿﺘﺮﻫﺎي ﺑﺰرگﺗﺮي دارﻧﺪ‪ .‬اﮔﺮ اﯾﻦ‬ ‫ﻗﻮاﻧﯿﻦ را ﺑﻪ درﺳﺘﯽ در ﻃﺮاﺣﯽ رﻋﺎﯾﺖ ﮐﻨﯿﻢ‪ ،‬ﮐﺎرﺑﺮ ﻣﯽﺗﻮاﻧﺪ ﺑﻪ ﺳﺮﻋﺖ ﺳﺎﺧﺘﺎر ﺻﻔﺤﻪ ﻣﺎ را درك ﮐﻨﺪ و‬ ‫ﺑﻪ آﺳﺎﻧﯽ ﻣﺤﺘﻮاي ﻣﻮرد ﻧﯿﺎز ﺧﻮد را از ﺑﯿﻦ ﻣﺤﺘﻮاي ﻣﻮﺟﻮد در ﺻﻔﺤﻪ ﺑﯿﺎﺑﺪ‬ ‫ﻋﺮفﻫﺎي ﻣﻮﺟﻮد‪ ،‬ﺑﻪ ﺷﻤﺎ ﮐﻤﮏ ﻣﯽﮐﻨﻨﺪ‬ ‫ﻣﺎ از ﮐﻮدﮐﯽ ﯾﺎد ﮔﺮﻓﺘﻪ اﯾﻢ ﮐﻪ ﺑﻪ ﻋﺮفﻫﺎي راﯾﺞ ﺧﻮ ﺑﮕﯿﺮﯾﻢ‪ .‬از ﻫﻤﺎن دروان آﻣﻮﺧﺘﻪاﯾﻢ ﮐﻪ در ﻫﻨﮕﺎم ﺧﻮاﻧﺪن‬ ‫روزﻧﺎﻣﻪ ﺑﺎﯾﺪ ﺑﻪ ﭼﻪ ﺷﮑﻞ ﻋﻤﻞ ﮐﻨﯿﻢ‪ .‬در ﻫﻨﮕﺎم ﺧﻮاﻧﺪن روزﻧﺎﻣﻪ ﻫﻤﻪ ﻣﻄﺎﻟﺐ را ﻧﻤﯽﺧﻮاﻧﯿﻢ‪ .‬ﺗﻨﻬﺎ ﺗﯿﺘﺮﻫﺎ را اﺳﮑﻦ‬ ‫ﻣﯽﮐﻨﯿﻢ و آن ﻣﻄﻠﺒﯽ ﮐﻪ ﺑﺮاﯾﻤﺎن ﺟﺬابﺗﺮ اﺳﺖ ﻣﯽﺧﻮاﻧﯿﻢ‪ .‬ﻫﻤﯿﺸﻪ ﻣﯽداﻧﯿﻢ ﻣﺘﻨﯽ ﮐﻪ ﺑﺎ ﻓﻮﻧﺘﯽ ﻣﺘﻔﺎوت در ﻧﺰدﯾﮑﯽ‬

‫‪www.ParsBook.org‬‬

‫‪٨٢‬‬

‫ﯾﮏ ﺗﺼﻮﯾﺮ ﻧﻮﺷﺘﻪ ﺷﺪه اﺳﺖ‪ ،‬ﺗﻮﺿﯿﺤﯽ در ﻣﻮرد ﻫﻤﺎن ﺗﺼﻮﯾﺮ اﺳﺖ‪ .‬در وب ﻫﻢ از ﻫﻤﯿﻦ ﻋﺮفﻫﺎ وﺟﻮد دارد‪ .‬ﺑﻪ‬ ‫ﻋﻨﻮان ﻣﺜﺎل ﮐﺎرﺑﺮان وب ﻣﯽداﻧﻨﺪ ﮐﻪ آﯾﮑﻮن ﺳﺒﺪ ﺧﺮﯾﺪ ﻫﻤﯿﺸﻪ ﺑﺮاي ورود ﺑﻪ ﺑﺨﺶ ﻓﺮوﺷﮕﺎه در ﺳﺎﯾﺖ اﺳﺖ‪.‬‬ ‫ﻫﻤﯿﺸﻪ اﯾﻦ ﻋﺮفﻫﺎ ﻧﺘﯿﺠﻪ ﻓﮑﺮ ﯾﮏ ﻃﺮاح ﺧﻼق اﺳﺖ ﮐﻪ ﻣﻮرد ﺗﻮﺟﻪ ﮐﺎرﺑﺮان ﻗﺮار ﮔﺮﻓﺘﻪ و از آن اﺳﺘﻘﺒﺎل ﺷﺪه‬ ‫اﺳﺖ‪ .‬ﺳﭙﺲ ﻃﺮاﺣﺎن دﯾﮕﺮ ﻧﯿﺰ ﻫﻤﺎنﻫﺎ را ﺑﻪ ﮐﺎر ﮔﺮﻓﺘﻪ اﻧﺪ و آن ﺗﮑﻨﯿﮏ ﺑﻪ ﯾﮏ ﻋﺮف در ﻃﺮاﺣﯽ ﺗﺒﺪﯾﻞ ﺷﺪه اﺳﺖ‪.‬‬ ‫اﯾﻦ ﭘﺮوﺳﻪ اﻏﻠﺐ زﻣﺎن ﺑﺮ اﺳﺖ وﻟﯽ از آﻧﺠﺎﺋﯿﮑﻪ اﯾﻨﺘﺮﻧﺖ ﻣﺤﯿﻄﯽ ﺑﺴﯿﺎر ﭘﻮﯾﺎﺳﺖ‪ ،‬اﯾﻦ اﺗﻔﺎﻗﺎت ﺧﯿﻠﯽ ﺳﺮﯾﻊ ﻣﯽاﻓﺘﺪ‪.‬‬ ‫اﻟﺒﺘﻪ دو ﻣﻮرد ﻣﻬﻢ اﺳﺖ ﮐﻪ ﺑﺎﯾﺪ ﺑﻪ آن ﺗﻮﺟﻪ داﺷﺘﻪ ﺑﺎﺷﯿﺪ‪:‬‬ ‫‪‬‬

‫اﯾﻦ ﻋﺮفﻫﺎ ﺑﺴﯿﺎر ﭘﺮ اﺳﺘﻔﺎده اﻧﺪ‪ .‬زﻣﺎﻧﯽ ﮐﻪ از اﯾﻦ ﻋﺮفﻫﺎ در ﻃﺮاﺣﯽ اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪ ،‬ﮐﺎرﺑﺮان ﺑﺎ راﺣﺘﯽ‬ ‫ﺑﯿﺸﺘﺮي از ﺳﺎﯾﺖ ﺷﻤﺎ اﺳﺘﻔﺎده ﻣﯽﮐﻨﻨﺪ زﯾﺮا اﯾﻦ ﺗﮑﻨﯿﮏﻫﺎ را در ﺳﺎﯾﺖﻫﺎي دﯾﮕﺮ دﯾﺪه اﻧﺪ و ﺑﺎ آﻧﻬﺎ آﺷﻨﺎ‬ ‫ﻫﺴﺘﻨﺪ‪ .‬از اﯾﻦ رو ﮐﺎرﺑﺮان ﺑﺎ ﺣﺮﮐﺖ از ﯾﮏ ﺳﺎﯾﺖ ﺑﻪ ﺳﺎﯾﺖ دﯾﮕﺮ ﺑﺎ ﻣﺸﮑﻠﯽ ﻣﻮاﺟﻪ ﻧﻤﯽﺷﻮﻧﺪ و ﺑﻪ راﺣﺘﯽ‬ ‫ﻣﯽﺗﻮاﻧﻨﺪ از ﺳﺎﯾﺖﻫﺎي ﻣﺨﺘﻠﻒ اﺳﺘﻔﺎده ﮐﻨﻨﺪ‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل زﻣﺎﻧﯽ ﮐﻪ وارد ﯾﮏ ﺳﺎﯾﺖ ﻣﯽﺷﻮﯾﺪ و‬ ‫ﻣﺠﻤﻮﻋﻪ اي از ﻟﯿﻨﮏﻫﺎ را در ﺑﺎﻻي ﺳﺎﯾﺖ ﻣﯽﺑﯿﻨﯿﺪ ﮐﻪ رﻧﮓ ﭘﺲ زﻣﯿﻨﻪ ﻣﺘﻔﺎوت دارد و زﻣﺎﻧﯽ ﮐﻪ ﻣﺎوس‬ ‫ﺑﺮروي آﻧﻬﺎ ﻗﺮار ﻣﯽﮔﯿﺮد‪ ،‬ﺗﻐﯿﯿﺮ رﻧﮓ ﻣﯽدﻫﺪ‪ ،‬ﺣﺘﻤﺎ ﻣﺘﻮﺟﻪ ﺧﻮاﻫﯿﺪ ﺷﺪ ﮐﻪ اﯾﻦ ﺑﺨﺶ از ﺳﺎﯾﺖ‪،‬‬ ‫‪ navigation‬ﺳﺎﯾﺖ اﺳﺖ‪.‬‬

‫‪‬‬

‫ﻃﺮاﺣﺎن در اﺳﺘﻔﺎده از اﯾﻦ ﻋﺮفﻫﺎ‪ ،‬ﮐﻮﺗﺎﻫﯽ ﻣﯽﮐﻨﻨﺪ‪ :‬ﺑﺴﯿﺎري از ﻃﺮاﺣﺎن ﺳﻌﯽ ﻣﯽﮐﻨﻨﺪ اﯾﻦ ﻋﺮفﻫﺎ را‬ ‫ﺑﺸﮑﻨﻨﺪ و ﮐﺎري ﺟﺪﯾﺪ اﻧﺠﺎم دﻫﻨﺪ زﯾﺮا اﺣﺴﺎس ﻣﯽﮐﻨﻨﺪ ﮐﻪ ﺣﻘﻮق ﻣﯽﮔﯿﺮﻧﺪ ﺗﺎ ﮐﺎري ﻣﺘﻔﺎوت و ﺟﺪﯾﺪ اﻧﺠﺎم‬ ‫دﻫﻨﺪ و از اﯾﻦ رو ﺑﻪ ﺟﺎي اﺳﺘﻔﺎده از اﯾﻦ ﻋﺮفﻫﺎي آﻣﺎده و ﺗﺎﯾﯿﺪ ﺷﺪه ﺳﻌﯽ ﻣﯽﮐﻨﻨﺪ ﺗﺎ ﻣﺘﺪﻫﺎي ﻧﺎﻣﺘﻌﺎرف‬ ‫ﺟﺪﯾﺪ را اﺑﺪاع ﮐﻨﻨﺪ‪.‬‬ ‫اﮔﺮ ﻣﺎﯾﻠﯿﺪ ﮐﻪ از ﺷﯿﻮهاي ﺟﺪﯾﺪ در ﻃﺮاﺣﯽ اﺳﺘﻔﺎده ﮐﻨﯿﺪ اول ﺑﺎﯾﺪ اﻃﻤﯿﻨﺎن ﺣﺎﺻﻞ ﮐﻨﯿﺪ ﮐﻪ ﺷﯿﻮه ﺟﺪﯾﺪ ﺑﻪ‬ ‫اﻧﺪازه ﮐﺎﻓﯽ ﻣﻨﺎﺳﺐ و ﮐﺎرﺑﺮدي اﺳﺖ و ﺑﻪ اﻧﺪازهاي ﺑﻪ ﺳﻬﻮﻟﺖ اﺳﺘﻔﺎده از ﺻﻔﺤﻪ ﮐﻤﮏ ﻣﯽﮐﻨﺪ‪.‬‬

‫ﺻﻔﺤﻪ را ﺑﻪ اﺟﺰاي ﻣﺨﺘﻠﻒ و ﮐﺎﻣﻼ ﻣﺸﺨﺺ ﺗﻘﺴﯿﻢ ﮐﻨﯿﺪ‬ ‫ﮐﺎرﺑﺮان ﺑﺎﯾﺪ ﺑﺘﻮاﻧﻨﺪ ﺗﻨﻬﺎ ﺑﺎ ﯾﮏ ﻧﮕﺎه ﺑﻪ ﺻﻔﺤﻪ‪ ،‬اﺟﺰاي ﻣﺨﺘﻠﻒ را ﺷﻨﺎﺳﺎﯾﯽ ﮐﻨﻨﺪ ﺗﻘﺴﯿﻢ ﺑﻨﺪي اﺟﺰاي ﺻﻔﺤﻪ ﺑﻪ‬ ‫ﮐﺎرﺑﺮان ﮐﻤﮏ ﻣﯽﮐﻨﺪ ﮐﻪ ﺑﻪ ﺳﺮﻋﺖ ﺑﺘﻮاﻧﻨﺪ ﻣﻄﺎﻟﺒﯽ را ﮐﻪ ﺑﻪ دﻧﺒﺎﻟﺶاﻧﺪ را ﺑﻪ راﺣﺘﯽ ﺑﯿﺎﺑﺒﻨﺪ‪ .‬ﺗﺤﻘﯿﻘﺎت ﻧﺸﺎن ﻣﯽدﻫﺪ‬ ‫ﮐﻪ ﮐﺎرﺑﺮان ﺑﻪ ﺳﺮﻋﺖ در ﻣﻮرد ﻣﻬﻤﺘﺮﯾﻦ ﺑﺨﺶ ﺻﻔﺤﻪ ﺗﺼﻤﯿﻢ ﮔﯿﺮي ﻣﯿﮑﻨﻨﺪ و آن را اﻧﺘﺨﺎب ﻣﯽﮐﻨﻨﺪ و دﯾﮕﺮ ﺑﻪ‬ ‫اداﻣﻪ ﺻﻔﺤﻪ ﺗﻮﺟﻪ ﻧﻤﯽﮐﻨﻨﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪٨٣‬‬

‫ﺑﺨﺶﻫﺎي ﻗﺎﺑﻞ ﮐﻠﯿﮏ ﺻﻔﺤﻪ را ﻣﺸﺨﺺ ﮐﻨﯿﺪ‬ ‫ﻣﻬﻤﺘﺮﯾﻦ ﮐﺎر ﻣﺮﺑﻮط ﺑﻪ ﮐﺎرﺑﺮان در اﯾﻨﺘﺮﻧﺖ ﭘﯿﺪا ﮐﺮدن ﺻﻔﺤﻪ ﻣﻨﺎﺳﺐ و ﮐﻠﯿﮏ ﮐﺮدن ﺑﺮ روي ﻟﯿﻨﮏ اﺳﺖ‪ .‬از اﯾﻦ رو‬ ‫اﻫﻤﯿﺖ ﺑﺴﯿﺎري دارد ﮐﻪ ﺑﺨﺶ ﻗﺎﺑﻞ ﮐﻠﯿﮏ ﺻﻔﺤﻪ را ﺑﻪ ﺷﮑﻠﯽ ﺳﺒﮏدﻫﯽ ﮐﻨﯿﺪ ﮐﻪ ﮐﺎرﺑﺮ ﺑﺘﻮاﻧﺪ ﺑﻪ راﺣﺘﯽ آن را ﺑﯿﺎﺑﺪ‬ ‫و ﺑﺮروي آن ﮐﻠﯿﮏ ﮐﻨﺪ‪.‬‬ ‫ﻣﺜﺎل ﻣﻌﺮوف را ﻣﯽﺗﻮان ﻧﻮار ﺟﺴﺘﺠﻮي ﺳﺎﯾﺖ ‪ drkoop.com‬را ﻧﺎم ﺑﺮد‪ .‬در اﯾﻦ ﺳﺎﯾﺖ دﮐﻤﻪ ﺟﺴﺘﺠﻮ اﺻﻼ ﺷﺒﯿﻪ‬ ‫ﺑﻪ دﮐﻤﻪ ﻧﯿﺴﺖ‪.‬‬

‫اﻟﺒﺘﻪ دﻗﺖ داﺷﺘﻪ ﺑﺎﺷﯿﺪ ﮐﻪ در ﻣﺘﻦ زﯾﺮ اﯾﻦ ﻧﻮار ﺟﺴﺘﺠﻮ از ﮐﻠﻤﻪ ‪ search‬اﺳﺘﻔﺎده ﺷﺪه اﺳﺖ و ﻧﺰدﯾﮑﺘﺮﯾﻦ ﻣﺘﻦ‬ ‫ﻧﺰدﯾﮏ ﺑﻪ ﻧﻮار اﺳﺖ و از ﻃﺮﻓﯽ ﻓﻠ‪‬ﺶ ﮐﻮﭼﮏ ﮐﻨﺎر ﻣﺘﻦ ﻧﯿﺰ ﯾﮑﯽ از ﻋﺮفﻫﺎي راﯾﺞ ﺑﺮاي ﻧﻤﺎﯾﺶ ﻟﯿﻨﮏ اﺳﺖ وﻟﯽ از‬ ‫آﻧﺠﺎﺋﯽﮐﻪ اﯾﻦ ﻓﻠ‪‬ﺶ‪ ،‬ﺟﻬﺖ ﻣﺨﺎﻟﻒ ﻣﺘﻦ را ﻧﺸﺎن ﻣﯽدﻫﺪ‪ ،‬اﯾﻦ را ﺗﺪاﻋﯽ ﻣﯽﮐﻨﺪ ﮐﻪ اﯾﻦ ﻣﺘﻦ ﻗﺎﺑﻞ ﮐﻠﯿﮏ ﺷﺪن ﻧﯿﺴﺖ‪.‬‬ ‫اﮔﺮ ﻓﻠ‪‬ﺶ را ﻗﺒﻞ از ﻣﺘﻦ ﻗﺮار دﻫﯿﻢ ﮐﻪ ﺑﻪ ﻣﺘﻦ اﺷﺎره ﮐﻨﺪ‪ ،‬اﯾﻦ ﻣﺸﮑﻼت ﺑﺮﻃﺮف ﻣﯽﺷﻮد‪.‬‬

‫ﺷﻠﻮﻏﯽ ﺻﻔﺤﻪ را ﮐﺎﻫﺶ دﻫﯿﺪ‬ ‫ﯾﮑﯽ از ﻣﻮرادي ﮐﻪ ﺑﯿﺸﺘﺮي ﻣﺸﮑﻞ را اﯾﺠﺎد ﻣﯽﮐﻨﺪ و ﺑﺎﻋﺚ ﻧﺎﮐﺎرآﻣﺪي ﺳﺎﯾﺖ ﻣﯽﺷﻮد‪ ،‬ﺷﻠﻮﻏﯽ ﺑﺼﺮي ﺻﻔﺤﻪ‬ ‫اﺳﺖ‪ .‬اﯾﻦ ﺷﻠﻮﻏﯽ ﺑﻪ دو دﺳﺘﻪ ﺗﻘﺴﯿﻢ ﻣﯽﺷﻮد‪:‬‬ ‫‪‬‬

‫ﺷﻠﻮﻏﯽ ﺻﻔﺤﻪ‪ :‬ﺑﺮﺧﯽ از ﺻﻔﺤﺎت ﺑﻪ ﻗﺪري ﺷﻠﻮغ ﻫﺴﺘﻨﺪ و ﻧﺎم ﺑﺨﺶﻫﺎ ﺑﻪ ﻗﺪري ﺑﺪ اﻧﺘﺨﺎب ﺷﺪه اﺳﺖ ﮐﻪ‬ ‫ﻧﻤﯽ ﺗﻮان ﺑﻪ راﺣﺘﯽ ﺑﺨﺶ ﻣﻮرد ﻧﻈﺮ را ﭘﯿﺪا ﮐﺮده و از آن اﺳﺘﻔﺎده ﮐﺮد‪ .‬زﻣﺎﻧﯽ ﮐﻪ ﻫﺮ ﺑﺨﺸﯽ از ﺻﻔﺤﻪ‬ ‫ﻗﺼﺪ داﺷﺘﻪ ﺑﺎﺷﺪ ﮐﻪ ﺗﻮﺟﻪ ﮐﺎرﺑﺮ را ﺟﻠﺐ ﮐﻨﺪ‪ ،‬ﻋﻤﻼ ﮐﺎرﺑﺮ ﻧﻤﯽﺗﻮاﻧﺪ ﺑﺨﺶ ﻣﻮرد ﻧﻈﺮش را ﺑﯿﺎﺑﺪ‪.‬‬

‫‪‬‬

‫ﺷﻠﻮﻏﯽ ﭘﺲ زﻣﯿﻨﻪ‪ :‬ﺑﻌﻀﯽ اوﻗﺎت ﻧﯿﺰ اﺟﺰاي ﺻﻔﺤﻪ ﺷﻠﻮغ ﻧﯿﺴﺘﻨﺪ وﻟﯽ ﺑﻪ ﺗﻌﺪاد زﯾﺎدي اﻟﻤﻨﺖ ﮔﺮاﻓﯿﮑﯽ در‬ ‫ﻃﺮح وﺟﻮد دارد ﮐﻪ ﻣﺠﻤﻮع اﯾﻦ ﺗﺼﺎوﯾﺮ ﮔﺮاﻓﯿﮑﯽ ﮐﻪ در ﻗﺎﻟﺐ ﺳﺎﯾﺖ ﮐﺎر ﺷﺪه اﺳﺖ‪ ،‬ﺗﻮﺟﻪ ﮐﺎرﺑﺮ را از‬ ‫اﺻﻞ ﻣﻮﺿﻮع ﻣﻨﺤﺮف ﻣﯽﮐﻨﺪ‪ .‬ﺑﻪ ﻫﻤﯿﻦ ﺧﺎﻃﺮ ﺗﻮﺻﯿﻪ ﻣﯽﺷﻮد ﮐﻪ ﺗﺼﺎوﯾﺮ ﮔﺮاﻓﯿﮑﯽ را زﻣﺎﻧﯽ اﺳﺘﻔﺎده ﮐﻨﯿﺪ‬ ‫ﮐﻪ ارزﺷﯽ را ﺑﻪ ﺻﻔﺤﻪ اﺿﺎﻓﻪ ﮐﻨﺪ‪ .‬ﺑﻪ ﮐﺎرﮔﯿﺮي ﺗﺼﺎوﯾﺮ ﮔﺮاﻓﯿﮑﯽ ﺑﻪ ﺷﮑﻞ ﺑﯽ ﻫﺪف ﺗﻨﻬﺎ ﺻﻔﺤﻪ ﺷﻤﺎ را‬ ‫ﺷﻠﻮغ ﻣﯽﮐﻨﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪٨۴‬‬

‫ﻣﺘﻮن اﺿﺎﻓﻪ را ﺣﺬف ﮐﻨﯿﺪ‬ ‫در اﻏﻠﺐ ﺻﻔﺤﺎت وب ﺣﺠﻢ ﻋﻈﯿﻤﯽ از ﺻﻔﺤﻪ را ﻣﺘﻮﻧﯽ ﺗﺸﮑﯿﻞ ﻣﯽدﻫﺪ ﮐﻪ ﻋﻤﻼ اﺳﺘﻔﺎده زﯾﺎدي ﻧﺪارﻧﺪ و ﮐﺎرﺑﺮان‬ ‫آﻧﻬﺎ را ﻧﻤﯽﺧﻮاﻧﻨﺪ‪ .‬ﻫﻤﺎﻧﻄﻮر ﮐﻪ در ﺑﺨﺶﻫﺎي ﻗﺒﻠﯽ ﺗﻮﺿﯿﺢ دادﯾﻢ ﮐﺎرﺑﺮان ﻣﺘﻮن ﺻﻔﺤﻪ را ﺑﻪ ﻃﻮر ﮐﺎﻣﻞ ﻧﻤﯽﺧﻮاﻧﻨﺪ‬ ‫و ﺗﻨﻬﺎ آن را اﺳﮑﻦ ﻣﯽﮐﻨﻨﺪ‪ .‬زﻣﺎﻧﯽ ﮐﻪ ﻣﺘﻦ ﻃﻮﻻﻧﯽ ﺑﺎﺷﺪ اﺣﺘﻤﺎل ﺧﻮاﻧﺪه ﺷﺪن ﻣﺘﻦ ﺗﻮﺳﻂ ﮐﺎرﺑﺮان ﮐﺎﻫﺶ ﻣﯽﯾﺎﺑﺪ‪.‬‬ ‫ﯾﮑﯽ از ﮐﺎرﻫﺎﯾﯽ ﮐﻪ ﺑﺎﯾﺪ ﺑﺮاي ﺑﻬﯿﻨﻪ ﮐﺮدن ﻣﺘﻦ ﺻﻔﺤﻪ اﻧﺠﺎم دﻫﯿﺪ اﯾﻦ اﺳﺖ ﮐﻪ ﺳﻌﯽ ﮐﻨﯿﺪ ﻧﯿﻤﯽاز ﻣﺘﻦ ﺻﻔﺤﻪ را ﮐﻢ‬ ‫ﮐﻨﯿﺪ و ﻣﻨﻈﻮرﺗﺎن را ﺑﺎ ﻫﻤﺎن ﻧﯿﻤﻪ ﺑﺎﻗﯽ ﻣﺎﻧﺪه ﺑﺮﺳﺎﻧﯿﺪ‪ .‬ﮔﺎﻫﯽ اوﻗﺎت اﯾﻨﮑﺎر ﺷﺪﻧﯽ ﻧﯿﺴﺖ وﻟﯽ ﻣﯿﺘﻮان ﺟﻤﻼت اﺿﺎﻓﻪ‬ ‫را ﮐﻢ ﮐﺮد و ﻣﺘﻦ داﺧﻞ ﺻﻔﺤﻪ را ﺗﺎ ﺟﺎﯾﯽ ﮐﻪ اﻣﮑﺎن دارد ﺧﻼﺻﻪ ﮐﺮد‪ .‬ﺧﻼﺻﻪ ﮐﺮدن ﻣﺘﻦ داﺧﻞ ﺻﻔﺤﻪ ﻣﺰاﯾﺎﯾﯽ‬ ‫دارد ﮐﻪ ﺑﺮﺧﯽ از آنﻫﺎ ﺑﺪﯾﻦ ﻗﺮار اﺳﺖ‪:‬‬ ‫‪‬‬

‫ﺷﻠﻮﻏﯽ ﺻﻔﺤﻪ ﮐﺎﻫﺶ ﻣﯽﯾﺎﺑﺪ‪.‬‬

‫‪‬‬

‫ﻣﺘﻦ ﺑﺎ ارزش ﺻﻔﺤﻪ در اﯾﻦ ﺣﺎﻟﺖ ﺑﯿﺸﺘﺮ ﺑﻪ ﭼﺸﻢ ﻣﯽآﯾﺪ‪.‬‬

‫‪‬‬

‫ﺻﻔﺤﻪ ﮐﻮﺗﺎهﺗﺮ ﻣﯽﺷﻮد و ﮐﺎرﺑﺮان اﯾﻦ ﻣﺠﺎل را ﻣﯽﯾﺎﺑﻨﺪ ﮐﻪ ﺑﺪون اﺳﮑﺮول ﮐﺮدن ﻣﺤﺘﻮاي ﻣﻨﺎﺳﺐ ﺻﻔﺤﻪ‬ ‫را در ﯾﮏ ﻧﮕﺎه ﺑﺒﺒﯿﻨﻨﺪ‪.‬‬

‫اﻟﺒﺘﻪ ﻣﻨﻈﻮر ﻣﻦ اﯾﻦ ﻧﯿﺴﺖ ﮐﻪ ﻫﻤﻪ ﻣﻘﺎﻻت ﻣﻔﺼﻞ و ﮐﺎﻣﻞ را ﺑﺎﯾﺪ ﺧﻼﺻﻪ ﮐﻨﯿﻢ ﺑﻠﮑﻪ ﻣﻨﻈﻮر اﯾﻦ اﺳﺖ ﮐﻪ‬ ‫ﺻﻔﺤﺎﺗﯽ را ﮐﻪ در آن ﻣﯽ ﺗﻮان ﻣﻨﻈﻮري را در ﻗﺎﻟﺐ ﯾﮏ ﺟﻤﻠﻪ رﺳﺎﻧﺪ‪ ،‬ﺑﻬﺘﺮ اﺳﺖ ﮐﻪ از ﻫﻤﺎن ﯾﮏ ﺟﻤﻠﻪ اﺳﺘﻔﺎده‬ ‫ﺷﻮد و ﺑﯽﺟﻬﺖ ﺣﺠﻢ ﻣﻄﺎﻟﺐ داﺧﻞ ﺻﻔﺤﻪ اﻓﺰاﯾﺶ ﻧﯿﺎﺑﺪ‪.‬‬ ‫از ﻧﻮﺷﺘﻦ ﺟﻤﻼت ﺧﻮشآﻣﺪﮔﻮﯾﯽ ﭘﺮﻫﯿﺰ ﮐﻨﯿﺪ‬ ‫ﯾﮑﯽ از اﻋﻤﺎﻟﯽ ﮐﻪ ﻣﻌﻤﻮﻻ ﺻﺎﺣﺒﺎن ﺳﺎﯾﺖ اﻧﺠﺎم ﻣﯽدﻫﻨﺪ اﯾﻦ اﺳﺖ ﮐﻪ در ﺻﻔﺤﻪ اول ﻣﺘﻨﯽ را ﺑﺮاي ﺧﻮش آﻣﺪ ﮔﻮﯾﯽ‬ ‫ﺑﻪ ﮐﺎرﺑﺮان ﻣﯽﻧﻮﯾﺴﻨﺪ‪ .‬در ﺿﻤﻦ ﭼﻮن ﺻﻔﺤﻪ اول ﺳﺎﯾﺖ ﻣﻌﻤﻮﻻ اﻃﻼﻋﺎﺗﯽ ﻣﺨﺼﻮص ﺑﻪ ﺧﻮد ﻧﺪارد و ﺗﻨﻬﺎ ﻣﻄﺎﻟﺐ‬ ‫ﺑﺨﺶﻫﺎي دﯾﮕﺮ را در ﺻﻔﺤﻪ اول ﻧﻤﺎﯾﺶ ﻣﯽدﻫﻨﺪ‪ ،‬ﻃﺮاﺣﺎن اﻏﻠﺐ دوﺳﺖ دارﻧﺪ ﮐﻪ ﺑﺨﺶﻫﺎﯾﯽ از ﺻﻔﺤﻪ اول را ﺑﺎ‬ ‫اﺳﺘﻔﺎده از اﯾﻦﮔﻮﻧﻪ ﻣﻄﺎﻟﺐ ﭘﺮ ﮐﻨﻨﺪ‪ .‬از آﻧﺠﺎﺋﯿﮑﻪ ﮐﺎرﺑﺮان ﺑﺮاي ﭘﯿﺪا ﮐﺮدن ﻣﻄﻠﺐ ﻣﻮرد ﻧﻈﺮ ﺧﻮد ﻋﺠﻠﻪ دارﻧﺪ اﻏﻠﺐ‬ ‫اﯾﻦ ﻣﺘﻦﻫﺎ را ﻧﻤﯽﺧﻮاﻧﻨﺪ‪ .‬اﯾﻨﮕﻮﻧﻪ ﻣﺘﻦﻫﺎ ﺗﻨﻬﺎ ﺻﻔﺤﻪ را ﺷﻠﻮغ ﻣﯽﮐﻨﺪ و ﮐﺎرﺑﺮان ﻧﯿﺰ اﻫﻤﯿﺘﯽ ﺑﻪ آﻧﻬﺎ ﻧﻤﯽدﻫﻨﺪ‪.‬‬ ‫راﻫﻨﻤﺎي اﺳﺘﻔﺎده از ﺳﺎﯾﺖ ﺑﺎﯾﺪ ﺣﺬف ﺷﻮد‬ ‫ﯾﮑﯽ از ﻣﻨﺎﺑﻌﯽ ﮐﻪ ﻣﻤﻠﻮ اﺳﺖ از ﻣﻄﺎﻟﺐ ﺑﯽ ارزش و ﻃﻮﻻﻧﯽ‪ ،‬ﻫﻤﯿﻦ ﺑﺨﺶ راﻫﻨﻤﺎي ﺳﺎﯾﺖ اﺳﺖ‪ .‬ﮐﺎرﺑﺮان ﺗﺎ وﻗﺘﯽ‬ ‫ﺑﺎرﻫﺎ ﺑﺮاي اﺳﺘﻔﺎده از ﺳﺎﯾﺖ ﺗﻼش ﻧﮑﻨﻨﺪ و ﺷﮑﺴﺖ ﻧﺨﻮرﻧﺪ‪ ،‬ﻣﻄﺎﻟﺐ ﺑﺨﺶ راﻫﻨﻤﺎي ﺳﺎﯾﺖ را ﻧﻤﯽﺧﻮاﻧﻨﺪ‪ .‬ﺣﺘﯽ‬ ‫زﻣﺎﻧﯽ ﻫﻢ ﮐﻪ ﺗﺼﻤﯿﻢ ﺑﮕﯿﺮﻧﺪ اﯾﻦ ﺑﺨﺶ را ﺑﺨﻮاﻧﻨﺪ‪ ،‬اﮔﺮ ﻣﻄﺎﻟﺐ اﯾﻦ ﺑﺨﺶ ﻃﻮﻻﻧﯽ ﺑﺎﺷﯿﺪ ﺧﯿﻠﯽ ﺑﻌﯿﺪ اﺳﺖ ﮐﻪ ﮐﺎرﺑﺮ‬ ‫ﺑﺘﻮاﻧﺪ ﻣﻄﻠﺐ ﻣﻮرد ﻧﻈﺮ ﺧﻮد را ﺑﯿﺎﺑﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪٨۵‬‬

‫ﻫﺪف ﺷﻤﺎ ﺑﺎﯾﺪ اﯾﻦ ﺑﺎﺷﺪ ﮐﻪ از ﻗﺮار دادن راﻫﻨﻤﺎي اﺳﺘﻔﺎده در ﺳﺎﯾﺖ ﭘﺮﻫﯿﺰ ﮐﻨﯿﺪ و ﻫﺮ ﭼﯿﺰ را ﺑﻪ ﺷﮑﻠﯽ ﻃﺮاﺣﯽ‬ ‫ﮐﻨﯿﺪ ﮐﻪ ﺧﻮدش ﮐﺎﻣﻼ ﮔﻮﯾﺎ و واﺿﺢ ﺑﺎﺷﺪ‪ .‬زﻣﺎﻧﯽ ﻫﻢ ﮐﻪ ﺑﻪ راﻫﻨﻤﺎ اﺣﺘﯿﺎج داﺷﺘﯿﺪ آن را در ﮐﻢﺗﺮﯾﻦ ﺣﺠﻢ ﻣﻤﮑﻦ ﻧﮕﻪ‬ ‫دارﯾﺪ‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل در ﺳﺎﯾﺖ ‪ Verizon‬زﻣﺎﻧﯽ ﮐﻪ ﺑﺮ روي ‪ site survey‬ﮐﻠﯿﮏ ﮐﻨﯿﺪ ﺑﺎ ﺻﻔﺤﻪ اي اﯾﻦﭼﻨﯿﻦ ﻣﻮاﺟﻪ‬ ‫ﺧﻮاﻫﯿﺪ ﺷﺪ‪.‬‬

‫ﺑﻪ ﺟﺎي اﯾﻦ ﻫﻤﻪ ﻣﺘﻦ ﺗﻮﺿﯿﺤﯽ و راﻫﻨﻤﺎ ﺑﻬﺘﺮ اﺳﺖ ﮐﻪ ﺻ ﻔﺤﺎت ﻃﻮري ﻃﺮاﺣﯽ ﺷﻮﻧﺪ ﮐﻪ اﺳﺘﻔﺎده از آن ﺑﻪ آﺳﺎﻧﯽ‬ ‫ﻣﻤﮑﻦ ﺑﺎﺷﺪ و ﻫﺮ ﺑﺨﺸﯽ ﺑﻪ ﻣﯿﺰان ﮐﺎﻓﯽ ﮔﻮﯾﺎ ﺑﺎﺷﺪ‪.‬‬ ‫ﺷﯿﻮه ﺻﺤﯿﺢ ﻃﺮاﺣﯽ ﺑﺨﺶ ‪navigation‬‬ ‫ﺑﺨﺶ ‪ navigation‬ﺳﺎﯾﺖ را ﺑﺎﯾﺪ ﺑﻪ ﺷﮑﻠﯽ ﻃﺮاﺣﯽ ﮐﻨﯿﺪ ﮐﻪ ﮐﺎرﺑﺮ ﺑﻪ راﺣﺘﯽ ﺑﺘﻮاﻧﺪ ﻣﻮﻗﻌﯿﺖ ﺧﻮد در ﺳﺎﯾﺖ را‬ ‫درﯾﺎﺑﺪ ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﺷﻤﺎ ﯾﮏ ﻓﺮوﺷﮕﺎه را در ﻧﻈﺮ ﺑﮕﯿﺮﯾﺪ‪ .‬زﻣﺎﻧﯽ ﮐﻪ وارد ﻓﺮوﺷﮕﺎه ﻣﯽﺷﻮﯾﺪ ﻧﺨﺴﺖ ﺑﻪ ﺑﺎﻻي‬ ‫دﯾﻮارﻫﺎ ﻧﮕﺎه ﻣﯽﮐﻨﯿﺪ ﺗﺎ ﺑﺨﺶﻫﺎي ﻣﺨﺘﻠﻒ ﻓﺮوﺷﮕﺎه را ﭘﯿﺪا ﮐﻨﯿﺪ‬

‫ﺣﺎل وارد ﺑﺨﺶ ‪ tools‬ﻣﯽﺷﻮﯾﺪ و در اﯾﻨﺠﺎ ﺑﻪ ﺗﺎﺑﻠﻮي ﺑﺎﻻي ﻫﺮ راﻫﺮو ﻧﮕﺎه ﻣﯽﮐﻨﯿﺪ ﺗﺎ ﺑﺨﺶ ﻣﻮرد ﻧﻈﺮﺗﺎن را ﭘﯿﺪا‬ ‫ﮐﻨﯿﺪ‪ .‬ﺳﭙﺲ وارد راﻫﺮوي ﻣﻮرد ﻧﻈﺮ ﻣﯽﺷﻮﯾﺪ ﺗﺎ اﺟﻨﺎس ﻣﻮرد ﻧﯿﺎزﺗﺎن را ﭘﯿﺪا ﮐﻨﯿﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪٨۶‬‬

‫ﺑﻌﺪ از ﭘﯿﺪا ﮐﺮدن ﺑﺨﺶ ﻣﻮرد ﻧﻈﺮﺗﺎن ﻣﯽﺗﻮاﻧﯿﺪ ﺑﻪ ﻗﻔﺴﻪﻫﺎ ﻧﮕﺎه ﮐﻨﯿﺪ ﺗﺎ ﮐﺎﻻي ﻣﻮرد ﻧﻈﺮ را ﺑﯿﺎﺑﯿﺪ‪ .‬ﺑﺮ روي ﻫﺮ ﻗﻔﺴﻪ‬ ‫ﻧﯿﺰ ﻧﺎمﻫﺎﯾﯽ ﻗﺮار ﮔﺮﻓﺘﻪ ﺗﺎ راﺣﺖ ﺗﺮ ﺑﺘﻮاﻧﯿﺪ اﻗﻼم را ﺑﯿﺎﺑﯿﺪ‪.‬‬

‫اﮔﺮ در اﻧﺘﺨﺎب راﻫﺮو اﺷﺘﺒﺎه ﮐﺮده ﺑﺎﺷﯿﺪ ﺗﻨﻬﺎ ﮐﺎﻓﯽ اﺳﺖ ﮐﻪ ﺑﻪ ﻋﻘﺐ ﺑﺮﮔﺮدﯾﺪ و راﻫﺮوي دﯾﮕﺮي را اﻣﺘﺤﺎن ﮐﻨﯿﺪ‪.‬‬ ‫ﻫﻤﯿﻦ ﻣﮑﺎﻧﯿﺰم ﻧﯿﺰ ﺑﺮ روي وب وﺟﻮد دارد وﻟﯽ اﺧﺘﻼفﻫﺎﯾﯽ ﺑﯿﻦ ﻣﺤﯿﻂ وب و ﻣﺤﯿﻂ واﻗﻌﯽ وﺟﻮد دارد‪.‬‬

‫‪ Navigation‬در وب‬ ‫ﺟﺴﺘﺠﻮﮐﺮدن و ﯾﺎﻓﺘﻦ ﭼﯿﺰي در وب و دﻧﯿﺎي واﻗﻌﯽ ﺷﺒﺎﻫﺖﻫﺎي ﺑﺴﯿﺎري دارﻧﺪ وﻟﯽ در ﺑﻌﻀﯽ ﻗﺴﻤﺖﻫﺎ‬ ‫ﺗﻔﺎوتﻫﺎﯾﯽ ﻧﯿﺰ دﯾﺪه ﻣﯽﺷﻮد ﮐﻪ در ﻣﻮرد اﯾﻦ ﺗﻔﺎوتﻫﺎ ﺗﻮﺿﯿﺤﺎﺗﯽ ﺧﻮاﻫﯿﻢ داد‪ .‬ﻣﺮاﺣﻠﯽ ﮐﻪ ﺷﻤﺎ ﺑﺮاي ﯾﺎﻓﺘﻦ ﭼﯿﺰي‬ ‫ﻃﯽ ﻣﯽﮐﻨﯿﺪ ﺗﻘﺮﯾﺒﺎ اﯾﻨﮕﻮﻧﻪ اﺳﺖ‪:‬‬ ‫‪‬‬

‫ﺷﻤﺎ ﻣﻌﻤﻮﻻ ﺳﻌﯽ ﻣﯽﮐﻨﯿﺪ ﭼﯿﺰي را ﺑﯿﺎﺑﯿﺪ‪ :‬در دﻧﯿﺎي واﻗﻌﯽ ﻣﻤﮑﻦ اﺳﺖ ﺷﻤﺎ دﻧﺒﺎل ﯾﮏ ﮐﺘﺎب ﺧﺎص ﯾﺎ‬ ‫ﯾﮏ ﻟﻮح ﻓﺸﺮده ﺻﻮﺗﯽ ﺑﺎﺷﯿﺪ و در اﯾﻨﺘﺮﻧﺖ ﻣﻤﮑﻦ اﺳﺖ ﺑﻪ دﻧﺒﺎل ﯾﮏ ﻧﺮماﻓﺰار ﻣﻨﺎﺳﺐ و ارزان ﻗﯿﻤﺖ‬ ‫ﺑﺎﺷﯿﺪ‪.‬‬

‫‪‬‬

‫ﺷﻤﺎ ﺗﺼﻤﯿﻢ ﻣﯽ ﮔﯿﺮﯾﺪ ﮐﻪ اول از ﮐﺴﯽ ﺳﻮال ﮐﻨﯿﺪ ﯾﺎ ﻧﺨﺴﺖ ﺑﻪ ﮔﺸﺖ و ﮔﺬار ﺑﭙﺮدازﯾﺪ‪ :‬ﺗﻔﺎوﺗﯽ ﮐﻪ‬ ‫دﻧﯿﺎي واﻗﻌﯽ و دﻧﯿﺎي اﯾﻨﺘﺮﻧﺖ دارﯾﺪ در اﯾﻦ اﺳﺖ ﮐﻪ در دﻧﯿﺎي واﻗﻌﯽ ﮐﺴﺎﻧﯽ ﻫﺴﺘﻨﺪ ﮐﻪ ﺑﺘﻮاﻧﯿﺪ از آنﻫﺎ‬ ‫ﺳﻮال ﮐﻨﯿﺪ وﻟﯽ در اﯾﻨﺘﺮﻧﺖ ﮐﺴﯽ وﺟﻮد ﻧﺪارد ﮐﻪ در ﻫﻤﺎن ﻟﺤﻈﻪ ﺑﺘﻮاﻧﺪ ﺟﻮاب ﺷﻤﺎ را ﺑﺪﻫﺪ در ﻋﻮض در‬ ‫اﯾﻨﺘﺮﻧﺖ ﻧﻮار ﺟﺴﺘﺠﻮ در ﺳﺎﯾﺖ وﺟﻮد دارد ﮐﻪ ﻣﯽ ﺗﻮاﻧﯿﺪ از آن ﺑﺮاي ﯾﺎﻓﺘﻦ ﺟﻮاب ﺳﻮال ﺧﻮد اﺳﺘﻔﺎده‬ ‫ﮐﻨﯿﺪ‪ .‬ﺷﻤﺎ ﻋﺒﺎرﺗﯽ را ﮐﻪ ﻣﯽ ﺧﻮاﻫﯿﺪ ﺟﺴﺘﺠﻮ ﺷﻮد را در ﻓﯿﻠﺪ وارد ﻣﯽﮐﻨﯿﺪ و در ﭘﺎﺳﺦ ﻟﯿﺴﺘﯽ درﯾﺎﻓﺖ‬ ‫ﻣﯽﮐﻨﯿﺪ ﮐﻪ ﺣﺎوي ﺻﻔﺤﺎﺗﯽ اﺳﺖ ﮐﻪ اﻃﻼﻋﺎت ﻣﻮرد ﻧﻈﺮ ﺷﻤﺎ را در ﺧﻮد دارﻧﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪٨٧‬‬

‫ﺑﺮﺧﯽ از ﮐﺎرﺑﺮان را ﺑﻪ اﺻﻄﻼح ﮐﺎرﺑﺮان دوﺳﺘﺪار ﺟﺴﺘﺠﻮ ﻣﯽﻧﺎﻣﻨﺪ‪ .‬اﯾﻦ ﮐﺎرﺑﺮان از ﺑﺪو ورود ﺑﻪ ﺳﺎﯾﺖ‬ ‫ﺑﻪ دﻧﺒﺎل ﺑﺨﺶ ﺟﺴﺘﺠﻮ ﻣﯽﮔﺮدﻧﺪ و دوﺳﺖ دارﻧﺪ اول ﮐﺎر‪ ،‬ﭼﯿﺰي را ﺟﺴﺘﺠﻮ ﮐﻨﻨﺪ‪ .‬در ﻣﻘﺎﺑﻞ اﯾﻦ ﮐﺎرﺑﺮان‬ ‫اﻓﺮاد دﯾﮕﺮي ﻫﺴﺘﻨﺪ ﮐﻪ دوﺳﺖ دارﻧﺪ اول در ﺳﺎﯾﺖ ﺑﻪ ﮔﺸﺖ و ﮔﺬار ﺑﭙﺮدازﻧﺪ و ﺑﺎ آزﻣﻮدن ﻟﯿﻨﮏﻫﺎي‬ ‫ﻣﺨﺘﻠﻒ‪ ،‬ﭼﯿﺰي را ﮐﻪ ﻣﯽ ﺧﻮاﻫﻨﺪ ﺑﯿﺎﺑﻨﺪ و اﮔﺮ ﻣﻮﻓﻖ ﻧﺸﺪﻧﺪ در آﺧﺮ ﮐﺎر ﺑﻪ ﻧﻮار ﺟﺴﺘﺠﻮي ﺳﺎﯾﺖ ﻣﺮاﺟﻌﻪ‬ ‫ﻣﯽﮐﻨﻨﺪ‪ .‬اﯾﻦ ﮐﺎرﺑﺮان را‪ ،‬ﮐﺎرﺑﺮان دوﺳﺘﺪار ﮔﺸﺖ و ﮔﺬار ﻣﯽﻧﺎﻣﻨﺪ‪.‬‬ ‫‪‬‬

‫اﮔﺮ ﺑﺨﻮاﻫﯿﺪ در ﺳﺎﯾﺖ ﺑﻪ ﮔﺸﺖ و ﮔﺬار ﺑﭙﺮدازﯾﺪ ﺑﺎﯾﺪ از ﺑﺨﺶ ‪ navigation‬اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪ .‬وﻗﺘﯽ‬ ‫ﺑﺨﻮاﻫﯿﺪ در ﺳﺎﯾﺖ ﺑﻪ ﮔﺸﺖ و ﮔﺬار ﺑﭙﺮدازﯾﺪ ﺑﺮاي ﯾﺎﻓﺘﻦ ﻣﺴﯿﺮ و ﭘﯿﺪا ﮐﺮدن ﻣﺤﺘﻮاي ﻣﻮرد ﻧﻈﺮ ﺧﻮد ﺑﺎﯾﺪ‬ ‫از ﺑﺨﺶ ‪ navigation‬ﻧﺸﺎﻧﻪﻫﺎﯾﯽ ﮐﻪ در ﺳﺎﯾﺖ ﺑﺮاي ﺷﻤﺎ ﻗﺮار داده ﺷﺪه اﺳﺖ راه ﺧﻮد را ﺑﯿﺎﺑﯿﺪ‪.‬‬

‫ﺑﺎ اﺳﺘﻔﺎده از اﯾﻦ ﻧﺸﺎﻧﻪﻫﺎ ﻣﯽﺗﻮاﻧﯿﺪ ﺑﻪ زﯾﺮ ﺷﺎﺧﻪﻫﺎ دﺳﺘﺮﺳﯽ ﯾﺎﺑﯿﺪ و ﯾﺎ ﺑﺮﻋﮑﺲ‪ ،‬ﺑﻪ دﺳﺘﻪ ﺑﻨﺪيﻫﺎي‬ ‫ﮐﻠﯽﺗﺮ وارد ﺷﻮﯾﺪ و ﻣﺤﺘﻮاي ﻣﻮرد ﻧﯿﺎز ﺧﻮد را ﺑﯿﺎﺑﯿﺪ‪.‬‬ ‫‪‬‬

‫در ﻧﻬﺎﯾﺖ اﮔﺮ ﻧﺘﻮاﻧﯿﺪ ﭼﯿﺰي را ﮐﻪ ﺑﻪ دﻧﺒﺎﻟﺶ ﺑﻮدﯾﺪ ﺑﯿﺎﺑﯿﺪ‪ :‬در زﻣﺎﻧﯽ ﮐﻪ ﺑﻪ دﻧﺒﺎل ﻣﺤﺘﻮاﯾﯽ ﻣﯽﮔﺮدﯾﺪ و‬ ‫آن را ﻧﻤﯽﯾﺎﺑﯿﺪ در ﻧﻬﺎﯾﺖ ﺑﻪ ﻣﺮﺣﻠﻪ اي از ﻧﺎاﻣﯿﺪي ﻣﯽرﺳﯿﺪ ﮐﻪ ﺳﺎﯾﺖ را ﺗﺮك ﻣﯽﮐﻨﯿﺪ زﯾﺮا ﻓﮑﺮ ﻣﯽﮐﻨﯿﺪ‬ ‫ﭘﯿﺪا ﮐﺮدن آن ﻣﺤﺘﻮا در ﺳﺎﯾﺖ ﺷﺪﻧﯽ ﻧﯿﺴﺖ و ﯾﺎ اﯾﻦ ﻣﺤﺘﻮا اﺻﻼ در آن ﺳﺎﯾﺖ وﺟﻮد ﻧﺪارد‪.‬‬

‫ﻫﻤﺎﻧﻄﻮر ﮐﻪ دﯾﺪﯾﺪ ﺑﯿﻦ ﺟﺴﺘﺠﻮ در وب و ﺟﺴﺘﺠﻮ در دﻧﯿﺎي واﻗﻌﯽ ﺷﺒﺎﻫﺖﻫﺎي زﯾﺎدي وﺟﻮد دارد وﻟﯽ ﺗﻔﺎوتﻫﺎﯾﯽ‬ ‫ﻧﯿﺰ ﻫﺴﺖ‪ ،‬از ﺟﻤﻠﻪ اﯾﻦ ﮐﻪ در وب دﯾﮕﺮ ﺷﻤﺎ درﮐﯽ از ﻣﺤﯿﻂ ﻧﺨﻮاﻫﯿﺪ داﺷﺖ‪ .‬ﺷﻤﺎ ﺗﻨﻬﺎ ﺑﺎ ﻟﯿﻨﮏﻫﺎ و ﺻﻔﺤﺎت در‬ ‫ﺗﻤﺎس ﻫﺴﺘﯿﺪ‪ .‬دﻻﯾﻞ اﺻﻠﯽ اﯾﻦ ﺗﻔﺎوت ﺑﺪﯾﻦ ﻗﺮارﻧﺪ‪:‬‬ ‫‪‬‬

‫ﻋﺪم درك از ﺣﺠﻢ‪ :‬زﻣﺎﻧﯽ ﮐﻪ ﺷﻤﺎ وارد ﻓﺮوﺷﮕﺎه ﻣﯽﺷﻮﯾﺪ ﺑﻪ راﺣﺘﯽ ﻣﺘﻮﺟﻪ وﺳﻌﺖ ﻓﺮوﺷﮕﺎه ﺧﻮاﻫﯿﺪ ﺷﺪ‬ ‫وﻟﯽ ﺑﺮ رو ي وب ﺷﻤﺎ ﻫﯿﭻ درﮐﯽ از ﺑﺰرﮔﯽ ﯾﺎ ﮐﻮﭼﮑﯽ ﺳﺎﯾﺘﯽ ﮐﻪ ﺑﻪ آن وارد ﺷﺪه اﯾﺪ ﻧﺨﻮاﻫﯿﺪ داﺷﺖ‬

‫‪www.ParsBook.org‬‬

‫‪٨٨‬‬

‫)اﺻﻼ ﻣﺸﺨﺺ ﻧﺨﻮاﻫﺪ ﺑﻮد ﮐﻪ ﺳﺎﯾﺖ ‪ 50‬ﺻﻔﺤﻪ ‪ 1000،‬ﺻﻔﺤﻪ ﯾﺎ ‪ 20‬ﻫﺰار ﺻﻔﺤﻪ دارد(‪ .‬در ﻣﺤﯿﻂ واﻗﻌﯽ‬ ‫ﺣﺘﯽ اﮔﺮ ﻣﺎ ﺗﻤﺎﻣﯽ ﺑﺨﺶﻫﺎي ﯾﮏ ﻣﺤﯿﻂ را ﻧﺒﯿﻨﯿﻢ وﻟﯽ ﻣﯽﺗﻮاﻧﯿﻢ ﺑﺎ ﺗﻮﺟﻪ ﺑﻪ وﺳﻌﺖ ﻣﺤﯿﻂ ﺗﺨﻤﯿﻦ ﺑﺰﻧﯿﻢ‬ ‫وﻟﯽ در اﯾﻨﺘﺮﻧﺖ ﻧﻤﯽ ﺗﻮان وﺳﻌﺖ ﺳﺎﯾﺖ را ﺗﺨﻤﯿﻦ زد از اﯾﻦ رو ﻧﻤﯽﺗﻮاﻧﯿﻢ ﺑﻔﻬﯿﻢ ﮐﻪ ﭼﻪ ﻣﻘﺪار از ﻣﺤﺘﻮاي‬ ‫ﺳﺎﯾﺖ را دﯾﺪه اﯾﻢ و آﯾﺎ اداﻣﻪ دادن ﺟﺴﺘﺠﻮ ﻣﻨﻄﻘﯽ اﺳﺖ ﯾﺎ ﺧﯿﺮ‪.‬‬ ‫‪‬‬

‫ﻋﺪم درك از ﺳﻮ و ﺟﻬﺖ‪ :‬در وب ﭼﭗ و راﺳﺖ و ﺟﻬﺖ ﻣﻌﻨﯽ ﻧﺪارد‪ .‬ﻣﺎ ﺷﺎﯾﺪ در وب در ﻣﻮرد ﺑﺎﻻ و ﭘﺎﯾﯿﻦ‬ ‫ﺻﺤﺒﺖ ﮐﻨﯿﻢ وﻟﯽ اﯾﻦ ﺑﺎﻻ و ﭘﺎﯾﯿﻦ ﻣﻨﻈﻮر ﺣﺮﮐﺖ در ﯾﮏ ﻧﻤﻮدار ﺳﻠﺴﻪ ﻣﺮاﺗﺒﯽ اﺳﺖ و ﺟﻬﺖ در وب‬ ‫ﻣﻌﻨﺎﯾﯽ ﻧﺪارد‪.‬‬

‫‪‬‬

‫ﻋﺪم درك ﻣﮑﺎن‪ .‬در دﻧﯿﺎي ﻓﯿﺰﯾﮑﯽ ﻣﺎ در ﻣﺤﯿﻂ ﺣﺮﮐﺖ ﻣﯽﮐﻨﯿﻢ و اﻃﻼﻋﺎﺗﯽ در ﻣﻮرد ﻣﺤﯿﻂ ﺑﻪ ﺧﺎﻃﺮ‬ ‫ﻣﯽﺳﭙﺎرﯾﻢ و در ﻣﺮاﺟﻌﺎت ﺑﻌﺪي ﻣﺴﺘﻘﯿﻤﺎ ﺑﻪ ﻫﻤﺎن ﺑﺨﺶ ﻣﺮاﺟﻌﻪ ﻣﯽﮐﻨﯿﻢ‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل اﮔﺮ در ﻓﺮوﺷﮕﺎه‬ ‫ﺑﻪ دﻧﯿﺎل ﻣﯿﺦ و ﭼﮑﺶ ﻣﯿﮕﺮدﯾﺪ و ﯾﮑﺒﺎر ﻣﮑﺎن آن را ﭘﯿﺪا ﮐﺮده اﯾﺪ ﺑﺮاي ﺑﺎر ﺑﻌﺪي ﻣﺴﺘﻘﯿﻤﺎ ﺑﻪ ﻫﻤﺎن ﺑﺨﺶ‬ ‫ﻣﺮاﺟﻌﻪ ﻣﯽﮐﻨﯿﺪ‪.‬‬

‫اﻣﺎ در وب ﺷﻤﺎ اﺻﻼ ﺑﺎ ﻣﺤﯿﻂ ﻓﯿﺰﯾﮑﯽ ﺗﻤﺎس ﻧﺪارﯾﺪ و ﺗﻨﻬﺎ ﺑﺎ ﻟﯿﻨﮏﻫﺎ و ﺻﻔﺤﺎت ﺳﺮ و ﮐﺎر دارﯾﺪ‪ .‬زﻣﺎﻧﯽ ﮐﻪ‬ ‫ﺑﺨﻮاﻫ ﯿﺪ ﺑﻪ ﺑﺨﺶ ﻣﯿﺦ و ﭼﮑﺶ در ﻓﺮوﺷﮕﺎه آﻧﻼﯾﻦ وارد ﺷﻮﯾﺪ ﺗﻨﻬﺎ ﺑﺮ روي ﻟﯿﻨﮏ ﮐﻠﯿﮏ ﻣﯽﮐﻨﯿﺪ و در ﮐﺴﺮي از‬ ‫ﺛﺎﻧﯿﻪ ﺑﻪ ﺑﺨﺶ ﻣﻮرد ﻧﻈﺮ ﻣﻨﺘﻘﻞ ﻣﯽ ﺷﻮﯾﺪ ﺑﻪ ﻫﻤﯿﻦ ﺧﺎﻃﺮ ﻫﯿﭻ درﮐﯽ از ﻣﺤﯿﻂ ﻧﺨﻮاﻫﯿﺪ داﺷﺖ و در ﻣﺮاﺟﻌﺎت ﺑﻌﺪي‬ ‫ﺑﺎﯾﺪ ﺳﻌﯽ ﮐﻨﯿﺪ ﻣﻮﻗﻌﯿﺖ ﻓﻌﻠﯽ ﺧﻮد در ﺳﺎﯾﺖ را ﺑﯿﺎﺑﯿﺪ و ﺷﺮوع ﺑﻪ ﺣﺮﮐﺖ ﺑﻪ ﺳﻮي ﺑﺨﺶ ﻣﻮرد ﻧﻈﺮﺗﺎن ﮐﻨﯿﺪ‪ .‬ﺑﻪ‬ ‫ﻫﻤﯿﻦ ﺧﺎﻃﺮ اﺳﺖ ﮐﻪ در وب ‪ bookmark‬ﮐﺮدن ﺻﻔﺤﻪ اﻫﻤﯿﺖ ﺑﺴﯿﺎر زﯾﺎدي دارد و دﻟﯿﻞ اﯾﻨﮑﻪ ﭼﺮا ‪ 30‬ﺗﺎ ‪40‬‬ ‫درﺻﺪ ﮐﻠﯿﮏﻫﺎي وب ﺑﺮ روي دﮐﻤﻪ ‪ back‬ﻣﺮورﮔﺮ اﺳﺖ ﻧﯿﺰ ﺑﻪ ﻫﻤﯿﻦ دﻟﯿﻞ اﺳﺖ‪.‬‬

‫ﻣﺰاﯾﺎي اﺳﺘﻔﺎده از ‪ navigation‬در وب‬ ‫دو ﻫﺪف اﺻﻠﯽ ﺑﺨﺶ ‪ navigation‬اﯾﻦ اﺳﺖ ﮐﻪ ﺑﻪ ﻣﺎ ﮐﻤﮏ ﻣﯽﮐﻨﯿﺪ ﺗﺎ ﭼﯿﺰي را ﮐﻪ در ﺟﺴﺘﺠﻮﯾﺶ ﻫﺴﺘﯿﻢ را ﺑﯿﺎﺑﯿﻢ‬ ‫و از ﺳﻮﯾﯽ ﻣﺸﺨﺺ ﻣﯽﮐﻨﺪ ﮐﻪ در ﮐﺪام ﺑﺨﺶ ﺳﺎﯾﺖ ﻗﺮار ﮔﺮﻓﺘﻪ اﯾﻢ‪ .‬ﻣﻮارد دﯾﮕﺮ ﻋﺒﺎرﺗﻨﺪ از‪:‬‬ ‫‪‬‬

‫اﯾﻦ ﺑﺨﺶ ﺣﺪاﻗﻞ ﭼﯿﺰي در اﺧﺘﯿﺎرﻣﺎن ﻗﺮار ﻣﯽدﻫﺪ ﺗﺎ ﺑﻪ آن ﺗﮑﯿﻪ ﮐﻨﯿﻢ‪ :‬ﺑﻪ ﻋﻨﻮان ﯾﮏ اﺻﻞ ﻫﻤﻪ ﻣﺎ‬ ‫اﻧﺴﺎنﻫﺎ از اﺣﺴﺎس ﮔﻢ ﺷﺪن ﻧﻔﺮت دارﯾﻢ‪ .‬ﺑﺨﺶ ‪ navigation‬درﺳﺖ ﻣﺎﻧﻨﺪ اﯾﻦ اﺳﺖ ﮐﻪ ﻧﻘﺸﻪاي در‬

‫‪www.ParsBook.org‬‬

‫‪٨٩‬‬

‫دﺳﺘﻤﺎن ﻗﺮار ﮔﺮﻓﺘﻪ ﺑﺎﺷﺪ و ﺑﻪ ﻣﺎ اﻋﺘﻤﺎد ﺑﻪ ﻧﻔﺲ ﻣﯽدﻫﺪ ﺗﺎ ﺑﺎ راﺣﺘﯽ ﺑﯿﺸﺘﺮي ﺑﻪ دﻧﺒﺎل ﻣﺤﺘﻮاي ﻣﻮرد‬ ‫ﻧﻈﺮﻣﺎن ﺑﮕﺮدﯾﻢ‪.‬‬ ‫‪‬‬

‫ﺑﻪ ﻣﺎ ﮐﻤﮏ ﻣﯽﮐﻨﺪ ﺗﺎ ﺑﻔﻬﻤﯿﻢ در ﯾﮏ ﺑﺨﺶ ﺧﺎص ﭼﻪ ﻗﺮار دارد‪ :‬ﺑﺎ ﻧﮕﺎه ﺑﻪ ﺑﺨﺶ ‪ navigation‬ﺳﺎﯾﺖ‬ ‫ﻣﯽﺗﻮاﻧﯿﻢ ﻣﺘﻮﺟﻪ ﺷﻮﯾﻢ ﮐﻪ در ﯾﮏ زﯾﺮ ﺷﺎﺧﻪ دﻗﯿﻘﺎ ﭼﻪ ﭼﯿﺰﻫﺎﯾﯽ وﺟﻮد دارد‪ .‬اﯾﻦ ﺑﺨﺶ ﻣﺤﺘﻮا را در ﺟﻠﻮي‬ ‫ﭼﺸﻤﺎن ﻣﺎ ﻗﺮار ﻣﯽدﻫﺪ‪.‬‬

‫‪‬‬

‫ﺑﻪ ﻣﺎ ﮐﻤﮏ ﻣﯽﮐﻨﺪ ﺗﺎ ﺷﯿﻮه اﺳﺘﻔﺎده از ﺳﺎﯾﺖ را ﺑﯿﺎﻣﻮزﯾﻢ‪ .‬اﮔﺮ اﯾﻦ ﺑﺨﺶ از ﺳﺎﯾﺖ ﮐﺎرش را ﺑﻪ دﺳﺘﯽ‬ ‫اﻧﺠﺎم دﻫﺪ و ﺑﻪ روﺷﻨﯽ ﺑﺮاي ﺷﻤﺎ ﺷﺮح دﻫﺪ ﮐﻪ از ﮐﺠﺎ ﺑﺎﯾﺪ ﺷﺮوع ﮐﻨﯿﺪ و ﮔﺰﯾﻨﻪﻫﺎي در اﺧﺘﯿﺎر ﺷﻤﺎ‬ ‫ﭼﯿﺴﺖ در اﺻﻞ در ﺣﺎل آﻣﻮزش دادن ﺷﯿﻮه اﺳﺘﻔﺎده از ﺳﺎﯾﺖ ﺑﻪ ﺷﻤﺎﺳﺖ‪ .‬اﻟﺒﺘﻪ اﯾﻦ ﻣﻮرد ﺑﺴﯿﺎر ﺧﻮب‬ ‫اﺳﺖ ﭼﻮن ﮐﺎرﺑﺮان دوﺳﺖ ﻧﺪارﻧﺪ راﻫﻨﻤﺎي اﺳﺘﻔﺎده از ﺳﺎﯾﺖ را ﺑﻪ ﺷﮑﻞ ﻣﺘﻦ ﺑﺨﻮاﻧﻨﺪ‪.‬‬

‫‪‬‬

‫ﺑﻪ ﻣﺎ ﮐﻤﮏ ﻣﯽﮐﻨﺪ ﺗﺎ ﻃﺮاﺣﺎن ﺳﺎﯾﺖ را ﺑﺎور ﮐﻨﯿﻢ‪ .‬ﻫﺮ زﻣﺎﻧﯽ ﮐﻪ ﮐﺎرﺑﺮ ﺑﻪ ﺳﺎﯾﺖ وارد ﻣﯽﺷﻮد ﺷﺎﯾﺪ از‬ ‫ﺧﻮد ﺑﭙﺮﺳﺪ ﮐﻪ آﯾﺎ ﻃﺮاﺣﺎن ﺳﺎﯾﺖ دﻗﯿﻘﺎ ﻣﯽداﻧﻨﺪ ﮐﻪ ﻣﻦ ﭼﻪ ﻣﯽﺧﻮاﻫﻢ ﯾﺎ ﺧﯿﺮ‪ .‬ﺑﺨﺶ ‪ navigation‬اﮔﺮ ﺑﻪ‬ ‫درﺳﺘﯽ ﻃﺮاﺣﯽ ﺷﻮد ﻣﯽﺗﻮاﻧﺪ اﺛﺮ ﻣﺜﺒﺘﯽ ﺑﺮ روي ﮐﺎرﺑﺮان ﺑﮕﺬارد‪.‬‬

‫ﻋﺮفﻫﺎ در ﻃﺮاﺣﯽ ‪ navigation‬در وب‬ ‫در ﻣﺤﯿﻂ واﻗﻌﯽ‪ ،‬ﺷﻬﺮﻫﺎ و ﺧﯿﺎﺑﺎنﻫﺎ و ﺣﺘﯽ ﺳﺎﺧﺘﻤﺎنﻫﺎ )ﺣﺘﯽ ﮐﺘﺎب و ﻣﺠﻠﻪ( ﺳﯿﺴﺘﻢ ‪ navigation‬ﺧﺎص ﺧﻮد را‬ ‫دارﻧﺪ‪ .‬در ﺧﯿﺎﺑﺎن‪،‬ﻋﺮفﻫﺎ ﻫﻤﺎن ﺗﺎﺑﻠﻮﻫﺎ ﻫﺴﺘﻨﺪ و ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل در ﮐﺘﺎب‪ ،‬ﻓﻬﺮﺳﺖ و ﺷﻤﺎره ﺻﻔﺤﺎت و ﺗﺎﯾﺘﻞ‬ ‫ﺑﺨﺶﻫﺎ و ﻓﺼﻞﻫﺎ ﻋﺮفﻫﺎي ‪ navigation‬ﺑﻪ ﺣﺴﺎب ﻣﯽآﯾﻨﺪ‪ .‬زﻣﺎﻧﯽ ﮐﻪ در ﻃﺮاﺣﯽ اﯾﻦ ﺑﺨﺶﻫﺎ از ﻋﺮفﻫﺎ اﺳﺘﻔﺎده‬ ‫ﮐﻨﯿﻢ‪ ،‬ﮐﺎرﺑﺮان ﺑﻪ راﺣﺘﯽ آﻧﻬﺎ را ﺧﻮاﻫﻨﺪ ﯾﺎﻓﺖ‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﻣﺎ اﻧﺘﻈﺎر دارﯾﻢ ﮐﻪ ﺑﺨﺶ ﺗﺎﺑﻠﻮي اﺳﻢ ﺧﯿﺎﺑﺎنﻫﺎ را در‬ ‫ﺑﺎﻻي ﯾﮏ ﺳﺘﻮن ﻓﻠﺰي ﺑﺒﯿﻨﯿﻢ و ﺑﺮاي دﯾﺪﻧﺶ ﻫﻤﯿﺸﻪ ﺑﻪ ﺑﺎﻻ ﻧﮕﺎه ﻣﯽﮐﻨﯿﻢ و ﻫﯿﭽﮕﺎه در ﻧﺰدﯾﮑﯽ زﻣﯿﻦ ﺑﻪ دﻧﺒﺎل‬ ‫ﺗﺎﺑﻠﻮي ﺧﯿﺎﺑﺎن ﻧﯿﺴﺘﯿﻢ‪.‬‬

‫در ﻓﺮوﺷﮕﺎهﻫﺎي ﺑﺰرگ ﻣﺎ ﻧﺎم ﺑﺨﺶﻫﺎي ﻣﺨﺘﻠﻒ را ﺑﺮ روي ﺳﺘﻮن راﻫﺮوﻫﺎ ﻣﯽﺑﯿﻨﯿﻢ و در ﻣﺠﻠﻪ ﻣﺎ اﻧﺘﻈﺎر دارﯾﻢ ﮐﻪ‬ ‫ﻓﻬﺮﺳﺖ ﻣﻄﺎﻟﺐ را در ﺻﻔﺤﺎت اول ﻣﺠﻠﻪ ﺑﺒﯿﻨﯿﻢ و ﺑﺮاي ﯾﺎﻓﺘﻦ ﺻﻔﺤﻪ ﺑﻪ ﺷﻤﺎره ﺻﻔﺤﺎت در ﭘﺎﯾﯿﻦ ﺻﻔﺤﺎت ﯾﺎ ﺑﺎﻻ و‬ ‫ﮔﻮﺷﻪ ﺻﻔﺤﺎت دﻗﺖ ﮐﻨﯿﻢ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪٩٠‬‬

‫ﺣﺎل ﻓﺮض ﮐﻨﯿﺪ ﮐﻪ در ﻣﺠﻠﻪ‪ ،‬ﯾﮑﯽ از اﯾﻦ ﻋﺮفﻫﺎ ﺷﮑﺴﺘﻪ ﺷﻮد و ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل ﻓﻬﺮﺳﺖ ﻣﻄﺎﻟﺐ در ﺻﻔﺤﺎت آﺧﺮ‬ ‫ﺑﯿﺎﯾﺪ‪ .‬اﯾﻦ ﻫﻨﺠﺎر ﺷﮑﻨﯽﻫﺎ ﻣﻌﻤﻮﻻ ﺑﺮاي ﺷﻤﺎ آزار دﻫﻨﺪه ﺧﻮاﻫﺪ ﺑﻮد‪ .‬ﺑﺨﺶ ‪ navigation‬در وب ﻧﯿﺰ ﻫﻤﯿﻦ وﺿﻌﯿﺖ‬ ‫را دارد‪ .‬ﺑﺨﺸﯽ از اﯾﻦ ﻋﺮفﻫﺎ در وب از ﺻﻨﻌﺖ ﭼﺎپ اﯾﺪه ﮔﺮﻓﺘﻪ ﺷﺪه اﺳﺖ وﻟﯽ ﺑﻪ ﻣﺮور زﻣﺎن ﻋﺮفﻫﺎي ﺟﺪﯾﺪي‬ ‫ﻧﯿﺰ اﯾﺠﺎد ﺷﺪهاﻧﺪ‪.‬‬

‫ﺑﺨﺸﯽ از ‪ navigation‬ﺳﺎﯾﺖ در ﺗﻤﺎﻣﯽ ﺻﻔﺤﺎت ﺗﮑﺮار ﻣﯽﺷﻮد ﮐﻪ ﻃﺮاﺣﺎن اﯾﻦ ﺑﺨﺶ را‬

‫‪persistent‬‬

‫‪ navigation‬ﻣﯽﻧﺎﻣﻨﺪ‪ .‬اﯾﻦ ﺑﺨﺶ از آنﺟﺎﺋﯽﮐﻪ از ﻧﻈﺮ ﻇﺎﻫﺮي ﻫﯿﭻ ﺗﻔﺎوﺗﯽ ﻧﻤﯽﮐﻨﺪ و در ﺗﻤﺎﻣﯽ ﺻﻔﺤﺎت ﺳﺎﮐﻦ‬ ‫اﺳﺖ ﺑﻪ ﮐﺎرﺑﺮ اﯾﻦ ﺣﺲ را اﻟﻘﺎ ﻣﯽﮐﻨﺪ ﮐﻪ ﻫﻤﭽﻨﺎن در ﻫﻤﺎن ﺳﺎﯾﺖ ﻗﺒﻠﯽ ﻗﺮار دارد و ﺳﺎﯾﺖ را ﺗﺮك ﻧﮑﺮده اﺳﺖ و از‬ ‫ﻃﺮﻓﯽ ﭼﻮن اﯾﻦ ﺑﺨﺶ ﺛﺎﺑﺖ اﺳﺖ‪ ،‬ﮐﺎرﺑﺮ ﺗﻨﻬﺎ ﯾﮏﺑﺎر اﺳﺘﻔﺎده از آن را ﻓﺮاﻣﯽﮔﯿﺮد و دﯾﮕﺮ ﻻزم ﻧﯿﺴﺖ ﻫﺮ ﺑﺎر ﺷﯿﻮه‬ ‫ﮐﺎر ﮐﺮدن ﺑﺎ آن را از ﻧﻮ ﻓﺮا ﺑﮕﯿﺮد‪.‬‬ ‫اﯾﻦ ‪ navigation‬ﺑﺎﯾﺪ ‪ 5‬وﯾﮋﮔﯽ را داﺷﺘﻪ ﺑﺎﺷﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪٩١‬‬

‫‪ -1‬ﻧﺎم ﺳﺎﯾﺖ‬ ‫‪ -2‬راﻫﯽ ﺑﺮاي ﺑﺎزﮔﺸﺖ ﺑﻪ ﺻﻔﺤﻪ اول ﺳﺎﯾﺖ‬ ‫‪ -3‬راﻫﯽ ﺑﺮاي ﺟﺴﺘﺠﻮ ﮐﺮدن‬ ‫‪ -4‬ﺑﺨﺶﻫﺎي ﻣﺨﺘﻠﻒ ﺳﺎﯾﺖ‬ ‫‪ -5‬ﺑﺮﺧﯽ ﻟﯿﻨﮏﻫﺎي ﻣﻔﯿﺪ‬ ‫اﻟﺒﺘﻪ در دو ﺟﺎ ﻣﯽﺗﻮاﻧﯿﻢ ﺑﺨﺶ ‪ navigation‬را ﺑﺎ ﻃﺮﺣﯽ ﻣﺘﻔﺎوت اﺳﺘﻔﺎده ﮐﻨﯿﻢ و ﯾﺎ ﺣﺘﯽ از اﯾﻦ ﺑﺨﺶ اﺳﺘﻔﺎده‬ ‫ﻧﮑﻨﯿﻢ‪.‬‬ ‫‪‬‬

‫ﺻﻔﺤﻪ اول ﺳﺎﯾﺖ‪ :‬ﺻﻔﺤﻪ اول ﺳﺎﯾﺖ ﺷﺒﺎﻫﺘﯽ ﺑﻪ ﺻﻔﺤﺎت دﯾﮕﺮ ﻧﺪارد‪ .‬وﻇﺎﯾﻒ ﺻﻔﺤﻪ اول ﺑﺎ دﯾﮕﺮ‬ ‫ﺻﻔﺤﻪﻫﺎ ﻣﺘﻔﺎوت اﺳﺖ‪ .‬ﺣﺎل در اداﻣﻪ ﺧﻮاﻫﯿﺪ دﯾﺪ ﮐﻪ ﺑﺎ ﺗﻮﺟﻪ ﺑﻪ ﺷﺮاﯾﻂ ﺻﻔﺤﻪ اول ﻣﯽﺗﻮاﻧﯿﻢ‬ ‫‪ navigation‬اي ﻣﺘﻔﺎوت ﺑﺮاي اﯾﻦ ﺑﺨﺶ در ﻧﻈﺮ ﺑﮕﯿﺮﯾﻢ‪.‬‬

‫‪‬‬

‫ﻓﺮمﻫﺎ‪ :‬در ﺻﻔﺤﺎﺗﯽ ﮐﻪ اﺣﺘﯿﺎج ﺑﻪ ﭘﺮ ﮐﺮدن ﻓﺮم وﺟﻮد دارد‪ .‬ﻻزم ﻧﯿﺴﺖ ﮐﻪ ﺑﺨﺶ ‪ navigation‬را داﺷﺘﻪ‬ ‫ﺑﺎﺷﯿﻢ‪ .‬ﻣﻤﮑﻦ اﺳﺖ اﯾﻦ ﺑﺨﺶ در اﯾﻦ ﺻﻔﺤﺎت‪ ،‬ﺣﻮاس ﮐﺎرﺑﺮ را ﻣﻨﺤﺮف ﮐﻨﺪ‪ .‬در اﯾﻦ ﺻﻔﺤﺎت ﻣﺎ ﺗﻨﻬﺎ‬ ‫ﻣﯽ ﺧﻮاﻫﯿﻢ ﮐﻪ ﮐﺎرﺑﺮ ﺑﺮ روي ﭘﺮ ﮐﺮدن ﺻﻔﺤﺎت ﺗﻤﺮﮐﺰ داﺷﺘﻪ ﺑﺎﺷﺪ از اﯾﻦ رو ﻣﯽﺗﻮاﻧﯿﻢ ﺗﻨﻬﺎ ﯾﮏ ﻧﺴﺨﻪ‬ ‫ﺳﺎده ﺷﺪه از ﺑﺨﺶ ‪ navigation‬را در اﯾﻦ ﺻﻔﺤﺎت داﺷﺘﻪ ﺑﺎﺷﯿﻢ ﮐﻪ ﺣﺎوي ﻟﻮﮔﻮي ﺳﺎﯾﺖ‪ ،‬ﯾﮏ ﻟﯿﻨﮏ ﺑﻪ‬ ‫ﺻﻔﺤﻪ اول و ﺑﺮﺧﯽ ﻟﯿﻨﮏﻫﺎي ﻣﻔﯿﺪ دﯾﮕﺮ ﺑﺎﺷﺪ‪.‬‬

‫ﻧﮑﺎﺗﯽ در ﻣﻮرد ﻟﻮﮔﻮي ﺳﺎﯾﺖ‬ ‫ﻟﻮﮔﻮي ﺳﺎﯾﺖ در اﺻﻞ ﻫﻤﺎﻧﻨﺪ ﻧﺎم ﯾﮏ ﻣﮑﺎن ﯾﺎ ﯾﮏ ﺳﺎﺧﺘﻤﺎن اﺳﺖ‪ .‬زﻣﺎﻧﯽ ﮐﻪ ﺷﻤﺎ وارد ﻓﺮوﺷﮕﺎهﻫﺎي زﻧﺠﯿﺮهاي‬ ‫ﻣﯽ ﺷﻮﯾﺪ‪ ،‬ﻧﺎم ﻓﺮوﺷﮕﺎه در ﺳﺮدر ﻗﺮار ﮔﺮﻓﺘﻪ اﺳﺖ و ﺗﺎ زﻣﺎﻧﯽ ﮐﻪ درون ﻓﺮوﺷﮕﺎه ﻫﺴﺘﯿﺪ ﻣﯽداﻧﯿﺪ ﮐﻪ در ﭼﻪ ﻣﮑﺎﻧﯽ‬ ‫ﻗﺮار دارﯾﺪ‪ .‬وﻟﯽ در ﺳﺎﯾﺖﻫﺎ‪ ،‬ﺣﺮﮐﺖ در ﺑﺨﺶﻫﺎي ﻣﺨﺘﻠﻒ ﻣﺎﻫﯿﺖ ﻓﯿﺰﯾﮑﯽ ﻧﺪارد از اﯾﻦ رو ﺑﺎﯾﺪ در ﻫﺮ ﺻﻔﺤﻪ ﺑﻪ‬ ‫ﮐﺎرﺑﺮ اﻃﻼع دﻫﯿﺪ ﮐﻪ در ﭼﻪ ﺻﻔﺤﻪ اي ﻗﺮار دارد‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪٩٢‬‬

‫ﻣﺎ اﻧﺘﻈﺎر دار ﯾﻢ ﮐﻪ اﻏﻠﺐ ﻟﻮﮔﻮي ﺳﺎﯾﺖ را در ﺑﺎﻻ و در ﺳﻤﺖ ﭼﭗ ﺑﺮاي ﺳﺎﯾﺖﻫﺎي اﻧﮕﻠﯿﺴﯽ و ﺳﻤﺖ راﺳﺖ ﺑﺮاي‬ ‫ﺳﺎﯾﺖﻫﺎي ﻓﺎرﺳﯽ ﺑﺒﯿﻨﯿﻢ‪ .‬از آﻧﺠﺎﺋﯽﮐﻪ ﻟﻮﮔﻮي ﺳﺎﯾﺖ ﻧﺸﺎندﻫﻨﺪه ﮐﻞ ﺳﺎﯾﺖ اﺳﺖ ﺑﺎﯾﺪ در ﺟﺎﯾﯽ ﻗﺮار ﺑﮕﯿﺮد ﮐﻪ ﮐﻞ‬ ‫ﺳﺎﯾﺖ را در ﺑﺮ ﺑﮕﯿﺮد از اﯾﻦ رو ﯾﺎ در ﺑﺎﻻي ﺻﻔﺤﻪ ﻗﺮار ﻣﯽﮔﯿﺮد ﯾﺎ ﻓﺮﯾﻤﯽ ﮐﻞ ﻣﺤﺘﻮاي ﺳﺎﯾﺖ را در ﺧﻮد دارد و‬ ‫ﻟﻮﮔﻮ ﻧﯿﺰ در ﺑﺎﻻي اﯾﻦ ﻓﺮﯾﻢ اﺳﺖ‪.‬‬

‫در ﺿﻤﻦ ﻟﻮﮔﻮي ﺳﺎﯾﺖ ﻧﯿﺰ ﺑﺎﯾﺪ ﺷﺮاﯾﻄﯽ ﻣﻨﺎﺳﺐ را دارا ﺑﺎﺷﺪ‪ .‬ﺑﺎﯾﺪ از رﻧﮓﻫﺎ و ﻓﻮﻧﺖﻫﺎي ﺧﺎﺻﯽ اﺳﺘﻔﺎده ﺷﻮد ﮐﻪ‬ ‫در ﺳﺎﯾﺖﻫﺎي ﺑﺰرگ و ﮐﻮﭼﮏ ﮐﺎﻣﻼ ﻣﺘﻤﺎﯾﺰ ﺑﺎﺷﺪ و ﺑﻪ ﺧﻮﺑﯽ ﺑﺮاي ﮐﺎرﺑﺮ ﻗﺎﺑﻞ ﺗﺸﺨﯿﺺ ﺑﺎﺷﺪ‪.‬‬ ‫ﺑﺨﺶﻫﺎي ﻣﺨﺘﻠﻒ ﺳﺎﯾﺖ‬ ‫ﺑﺨﺶﻫﺎي ﻣﺨﺘﻠﻒ ﺳﺎﯾﺖ و دﺳﺘﻪ ﺑﻨﺪيﻫﺎ را ﻣﻌﻤﻮﻻ ‪ primary navigation‬ﻣﯽﻧﺎﻣﻨﺪ‪ .‬ﻟﯿﻨﮏﻫﺎي داﺧﻞ اﯾﻦ ﺑﺨﺶ ﺑﻪ‬ ‫دﺳﺘﻪﻫﺎي اﺻﻠﯽ ﺳﺎﯾﺖ و ﻣﻄﺎﻟﺐ ﮐﻠﯽ ﻣﻨﺘﻬﯽ ﻣﯽﺷﻮد‪.‬‬

‫اﻏﻠﺐ ‪ navigation‬ﻫﺎ ﻓﻀﺎﯾﯽ را در ﻧﻈﺮ ﻣﯽﮔﯿﺮﻧﺪ ﺗﺎ زﻣﺎﻧﯽ ﮐﻪ ﻣﺎوس را ﺑﺮ روي اﯾﻦ ﻟﯿﻨﮏﻫﺎ ﻗﺮار ﮔﯿﺮد‪ ،‬زﯾﺮ‬ ‫ﺷﺎﺧﻪﻫﺎي آن دﺳﺘﻪ ﺧﺎص ﻧﯿﺰ ﺑﻪ ﻧﻤﺎﯾﺶ در آﯾﻨﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪٩٣‬‬

‫ﻟﯿﻨﮏﻫﺎي ﻣﻔﯿﺪ‪ ‬ﮐﻤﮑﯽ‬ ‫ﻟﯿﻨﮏﻫﺎي ﮐﻤﮑﯽ ﺑﺨﺸﯽ از ﺳﺎﯾﺖ اﺳﺖ ﮐﻪ ﺣﺎوي ﻟﯿﻨﮏﻫﺎﯾﯽ ﺑﻪ ﺑﺮﺧﯽ از ﻣﻄﺎﻟﺐ اﺳﺖ ﮐﻪ در ﺷﺎﺧﻪﻫﺎي اﺻﻠﯽ ﺳﺎﯾﺖ‬ ‫ﻧﻤﯽﮔﻨﺠﻨﺪ‪ .‬اﯾﻦ ﺑﺨﺶ ﺣﺎوي راﻫﻨﻤﺎي اﺳﺘﻔﺎده از ﺳﺎﯾﺖ اﺳﺖ و ﯾﺎ ﻧﻘﺸﻪ ﺳﺎﯾﺖ و ﺳﺒﺪ ﺧﺮﯾﺪ را ﺷﺎﻣﻞ ﻣﯽﺷﻮد‪.‬‬ ‫ﻋﻼوه ﺑﺮ اﯾﻦ ﻟﯿﻨﮏﻫﺎﯾﯽ ﺑﻪ ﺻﻔﺤﺎت ﺗﻤﺎس ﺑﺎ ﻣﺎ و درﺑﺎره ﻣﺎ ﻣﻌﻤﻮﻻ در ﻫﻤﯿﻦ ﺑﺨﺶ ﻗﺮار ﻣﯽﮔﯿﺮﻧﺪ‪.‬‬ ‫ﻟﯿﻨﮏﻫﺎي اﯾﻦ ﺑﺨﺶ ﻣﻌﻤﻮﻻ ﺑﻪ ﭼﻬﺎر ﯾﺎ ﭘﻨﺞ ﻟﯿﻨﮏ ﻣﺤﺪود ﻣﯽﺷﻮد زﯾﺮا ﻟﯿﻨﮏﻫﺎي ﺑﯿﺸﺘﺮ از اﯾﻦ ﻣﻘﺪار ﮐﺎرﺑﺮ را ﮔﯿﺞ‬ ‫ﻣﯽﮐﻨﺪ و از ﻃﺮﻓﯽ اﯾﻦ ﻟﯿﻨﮏﻫﺎ ﺑﻪ ﺳﺒﮑﯽ ﻃﺮاﺣﯽ ﻣﯽﺷﻮﻧﺪ ﮐﻪ زﯾﺎد ﺟﻠﺐ ﺗﻮﺟﻪ ﻧﮑﻨﻨﺪ و ﻣﺰاﺣﻢ ﮐﺎرﺑﺮ ﻧﺒﺎﺷﻨﺪ‪.‬‬ ‫ﻟﯿﻨﮏ ﺑﺎزﮔﺸﺖ ﺑﻪ ﺻﻔﺤﻪ اول‬ ‫ﻟﯿﻨﮏ ﺑﺎزﮔﺸﺖ ﺑﻪ ﺻﻔﺤﻪ اول ﻧﯿﺰ اﻫﻤﯿﺖ ﺑﺴﯿﺎر زﯾﺎدي دارد زﯾﺮا ﺑﺎ وﺟﻮد اﯾﻦ ﻟﯿﻨﮏ ﮐﺎرﺑﺮ اﺣﺴﺎس اﻃﻤﯿﻨﺎن ﺑﯿﺸﺘﺮي‬ ‫ﺧﻮاﻫﺪ ﮐﺮد و ﺧﻮاﻫﺪ داﻧﺴﺖ ﮐﻪ اﮔﺮ درﺳﺎﯾﺖ ﮔﻢ ﺷﻮد ﺗﻨﻬﺎ ﺑﺎ ﯾﮏ ﮐﻠﯿﮏ ﻣﯽﺗﻮاﻧﺪ ﺑﻪ ﺻﻔﺤﻪ اول ﺳﺎﯾﺖ ﺑﺎزﮔﺮدد‪.‬‬ ‫اﻟﺒﺘﻪ اﻏﻠﺐ‪ ،‬ﻃﺮاﺣﺎن ﻟﻮﮔﻮي ﺳﺎﯾﺖ را ﻧﯿﺰ ﺑﻪ ﺻﻔﺤﻪ اول ﺳﺎﯾﺖ ﻟﯿﻨﮏ ﻣﯽﮐﻨﻨﺪ وﻟﯽ ﺑﺴﯿﺎري از ﮐﺎرﺑﺮان از اﯾﻦ ﻗﺎﺑﻠﯿﺖ‬ ‫ﺑﯽاﻃﻼع ﻫﺴﺘﻨﺪ و ﻧﻤﯽداﻧﻨﺪ ﮐﻪ ﻟﻮﮔﻮي ﺳﺎﯾﺖ ﻧﯿﺰ ﮐﻠﯿﮏ ﺷﺪﻧﯽ اﺳﺖ‪ .‬ﺑﻬﺘﺮ اﺳﺖ ﮐﻪ ﻋﻼوه ﺑﺮ اﯾﻨﮑﻪ ﻟﻮﮔﻮي ﺳﺎﯾﺖ را‬ ‫ﺑﻪ ﺷﮑﻞ ﻟﯿﻨﮏ در آورده اﯾﺪ‪ ،‬ﻟﯿﻨﮑﯽ ﺑﻪ ﺻﻔﺤﻪ اول را در ﺑﺨﺶ ‪ navigation‬ﯾﺎ در ﻣﯿﺎن ﻟﯿﻨﮏﻫﺎي ﮐﻤﮑﯽ ﻗﺮار دﻫﯿﺪ و‬ ‫ﮐﻠﻤﻪ ﺻﻔﺤﻪ اول ﺳﺎﯾﺖ را ﻧﯿﺰ ﺑﻨﻮﯾﺴﯿﺪ ﺗﺎ ﮐﺎرﺑﺮان ﺑﺘﻮاﻧﻨﺪ ﺑﺎ اﺳﺘﻔﺎده از آن ﺑﻪ ﺻﻔﺤﻪ اول ﺳﺎﯾﺖ ﺑﺎزﮔﺮدﻧﺪ‪ .‬ﺣﺘﯽ‬ ‫ﻣﯽﺗﻮاﻧﯿﺪ ﺑﻪ ﻟﻮﮔﻮ ﻧﯿﺰ‪ ،‬آرﻣﯽ ﮐﻪ ﻧﺸﺎن دﻫﻨﺪه ﺻﻔﺤﻪ اول ﺳﺎﯾﺖ ﺑﺎﺷﺪ اﺿﺎﻓﻪ ﮐﻨﯿﺪ و ﯾﺎ ﮐﻠﻤﻪ ﺻﻔﺤﻪ اول ﺳﺎﯾﺖ را ﺑﻪ‬ ‫ﺷﮑﻞ ﺑﺴﯿﺎر رﯾﺰ در زﯾﺮ ﻟﻮﮔﻮي ﺻﻔﺤﺎت داﺧﻠﯽ ﺑﮕﻨﺠﺎﻧﯿﺪ ﺗﺎ ﮐﺎرﺑﺮ ﺑﺪاﻧﺪ ﮐﻪ اﯾﻦ ﻟﻮﮔﻮ‪ ،‬ﮐﻠﯿﮏ ﺷﺪﻧﯽ اﺳﺖ‪.‬‬

‫ﻧﻮار ﺟﺴﺘﺠﻮ در ﺳﺎﯾﺖ‬ ‫ﻫﻤﺎﻧﻄﻮر ﮐﻪ در ﺑﺨﺶﻫﺎ ي ﻗﺒﻠﯽ ﻫﻢ ﺗﻮﺿﯿﺢ دادﯾﻢ ﺑﺮﺧﯽ از ﮐﺎرﺑﺮان ﺑﻪ ﻣﺤﺾ ورود ﺑﻪ ﺳﺎﯾﺖ ﺑﻪ دﻧﺒﺎل ﺑﺨﺶ‬ ‫ﺟﺴﺘﺠﻮي ﺳﺎﯾﺖ ﻣﯽ ﮔﺮدﻧﺪ و اﺻﻼ ﺑﺮاﯾﺸﺎن ﻣﻬﻢ ﻧﯿﺴﺖ ﮐﻪ ﺳﺎﯾﺖ ﺷﻤﺎ ﮐﻮﭼﮏ اﺳﺖ و ﯾﺎ ﻣﻄﺎﻟﺒﺶ ﺧﯿﻠﯽ ﺧﻮب‬

‫‪www.ParsBook.org‬‬

‫‪٩۴‬‬

‫دﺳﺘﻪﺑﻨﺪي ﺷﺪه اﺳﺖ‪ .‬از اﯾﻦ رو ﻻزم اﺳﺖ ﮐﻪ ﺑﺨﺶ ﺟﺴﺘﺠﻮي ﺳﺎﯾﺖ در ﺗﻤﺎﻣﯽ ﺻﻔﺤﺎت و در ﻣﮑﺎﻧﯽ ﻣﻨﺎﺳﺐ ﻗﺮار‬ ‫ﺑﮕﯿﺮد ﺗﺎ ﮐﺎرﺑﺮ ﺑﻪ راﺣﺘﯽ ﺑﺘﻮاﻧﺪ اﯾﻦ ﺑﺨﺶ از ﺳﺎﯾﺖ را ﺑﯿﺎﺑﺪ‪.‬‬ ‫اﯾﻦ ﻗﺒﯿﻞ ﮐﺎرﺑﺮان در ﺳﺎﯾﺖ ﺑﻪ دﻧﺒﺎل ﯾﮑﯽ از اﯾﻦ ﺳﻪ اﻟﮕﻮ ﻣﯽﮔﺮدﻧﺪ‪.‬‬

‫دﻗﺖ داﺷﺘﻪ ﺑﺎﺷﯿﺪ ﮐﻪ ﺑﺮاي ﺑﺨﺶ ﺟﺴﺘﺠﻮ ﺣﺘﻤﺎ ﮐﻠﻤﻪ ‪ search‬و ﯾﺎ ﺟﺴﺘﺠﻮ را اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪ .‬ﮐﺎر را ﺑﺮاي ﮐﺎرﺑﺮ‬ ‫ﺳﺨﺖ ﻧﮑﻨﯿﺪ و از ﮐﻠﻤﺎت ﻧﺎﻣﺘﻌﺎرف اﺳﺘﻔﺎده ﻧﮑﻨﯿﺪ‪ .‬ﺑﺮﺧﯽ از اﻗﺪاﻣﺎت ﮐﻪ ﮐﺎر را ﺑﺮاي ﮐﺎرﺑﺮ ﺳﺨﺖ ﻣﯽﮐﻨﺪ از ﻗﺮار ذﯾﻞ‬ ‫اﺳﺖ‪:‬‬ ‫‪‬‬

‫ﮐﻠﻤﺎت ﻓﺎﻧﺘﺰي‪ :‬ﺳﻌﯽ ﮐﻨﯿﺪ ﺗﻨﻬﺎ از ﻫﻤﺎن ﮐﻠﻤﻪ ﺟﺴﺘﺠﻮ ﯾﺎ ‪ search‬اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪ .‬ﺑﺮﺧﯽ ﻋﺒﺎرات ﭼﻮن‬ ‫ﺟﺴﺘﺠﻮي ﺳﺮﯾﻊ‪ ،‬ﯾﺎﻓﺘﻦ‪ ،‬ﯾﺎﻓﺘﻦ ﺳﺮﯾﻊ و اﯾﻦ ﻗﺒﯿﻞ ﮐﻠﻤﺎت اﺳﺘﻔﺎده ﻧﮑﻨﯿﺪ‪ .‬اﻟﺒﺘﻪ ﮐﺎرﺑﺮ در ﻧﻬﺎﯾﺖ ﻣﺘﻮﺟﻪ ﺧﻮاﻫﺪ‬ ‫ﺷﺪ وﻟﯽ اﯾﻨﮑﺎر ﺷﻤﺎ ﺑﺎﻋﺚ ﺧﻮاﻫﺪ ﺷﺪ ﮐﻪ ﮐﺎرﺑﺮ اﻧﺪﮐﯽ ﻣﮑﺚ ﮐﻨﺪ ﺗﺎ ﻣﺘﻮﺟﻪ ﻣﻨﻈﻮر ﺷﻤﺎ ﺷﻮد‪.‬‬

‫‪‬‬

‫راﻫﻨﻤﺎي اﺳﺘﻔﺎده‪ :‬از ﻧﻮﺷﺘﻦ راﻫﻨﻤﺎ ﺑﺮاي ﺑﺨﺶ ﺟﺴﺘﺠﻮ اﺟﺘﻨﺎب ﮐﻨﯿﺪ‪ .‬ﻫﺮ ﮐﺲ ﮐﻪ ﺗﻨﻬﺎ ﭼﻨﺪ روز از‬ ‫اﯾﻨﺘﺮﻧﺖ اﺳﺘﻔﺎده ﮐﺮده ﺑﺎﺷﺪ ﺑﻪ ﺧﻮﺑﯽ ﻣﯽداﻧﺪ ﮐﻪ ﭼﻄﻮر ﺑﺎﯾﺪ از ﺑﺨﺶ ﺟﺴﺘﺠﻮ اﺳﺘﻔﺎده ﮐﻨﺪ‪ .‬اﯾﻦ راﻫﻨﻤﺎ‬ ‫ﻧﻮﺷﺘﻦﻫﺎ ﺗﻨﻬﺎ ﮐﺎرﺑﺮ را ﮔﯿﺞ ﻣﯽﮐﻨﺪ و وﻗﺘﺶ را ﻣﯿﮕﯿﺮد‪.‬‬

‫‪‬‬

‫اﻧﺘﺨﺎبﻫﺎ‪ :‬اﮔﺮ در زﻣﺎن ﺟﺴﺘﺠﻮ اﻧﺘﺨﺎبﻫﺎﯾﯽ را در اﺧﺘﯿﺎر ﮐﺎرﺑﺮ ﻗﺮار ﻣﯽدﻫﯿﺪ ﺑﺎﯾﺪ ﺑﻪ روﺷﻨﯽ ﻣﺸﺨﺺ‬ ‫ﮐﻨﯿﺪ ﮐﻪ ﮐﺎرﺑﺮ در ﺣﺎل ﺟﺴﺘﺠﻮي ﺑﺨﺶ ﺧﺎﺻﯽ از ﺳﺎﯾﺖ اﺳﺖ‪.‬‬

‫ﺑﻪ ﯾﺎد داﺷﺘﻪ ﺑﺎﺷﯿﺪ ﮐﻪ در زﻣﺎنﻫﺎ ﯾﯽ ﮐﻪ اﺣﺘﯿﺎﺟﯽ ﺑﻪ دادن اﻧﺘﺨﺎب ﺑﻪ ﮐﺎرﺑﺮ ﻧﯿﺴﺖ از ﻫﻤﺎن ﺟﺴﺘﺠﻮي‬ ‫ﺳﺎده اﺳﺘﻔﺎده ﮐﻨﯿﺪ و ﺗﻨﻬﺎ زﻣﺎﻧﯽ اﻧﺘﺨﺎب در اﺧﺘﯿﺎر ﮐﺎرﺑﺮ ﻗﺮار دﻫﯿﺪ ﮐﻪ ﻻزم ﺑﺎﺷﺪ‪ .‬ﻫﺮ ﭼﻘﺪر ﺑﺘﻮاﻧﯿﺪ اﯾﻦ‬ ‫ﺑﺨﺶ را ﺳﺎدهﺗﺮ ﻧﮕﻪ دارﯾﺪ ﮐﺎرﺑﺮ ﺑﺎ آﺳﺎﯾﺶ و راﺣﺘﯽ ﺑﯿﺸﺘﺮي از آن اﺳﺘﻔﺎده ﺧﻮاﻫﺪ ﮐﺮد‪.‬‬ ‫ﺑﺎﯾﺪ ﺳﻌﯽ ﮐﻨﯿﺪ ﺑﺨﺶ ﺟﺴﺘﺠﻮ را ﺑﻪ ﺷﮑﻠﯽ ﻃﺮاﺣﯽ ﮐﻨﯿﺪ ﮐﻪ ﺣﺘﯽ در ﺻﻮرﺗﯽ ﮐﻪ ﮐﺎرﺑﺮ ﻫﯿﭻ ﮔﺰﯾﻨﻪاي را‬ ‫اﻧﺘﺨﺎب ﻧﮑﺮده ﺑﺎﺷﺪ ﺑﺎز ﻫﻢ ﻧﺘﺎﯾﺠﯽ ﺑﺮاي ﮐﺎرﺑﺮ ﻧﻤﺎﯾﺶ داده ﺷﻮد‪ .‬ﯾﮑﯽ از دﻻﯾﻞ ﻣﻮﻓﻘﯿﺖ ﺳﺎﯾﺖ آﻣﺎزون ﻧﯿﺰ‬ ‫ﻫﻤﯿﻦ ﺑﻮده اﺳﺖ‪ .‬در اﯾﻦ ﺳﺎﯾﺖ اﮔﺮ ﺷﻤﺎ ﻧﺎم ﯾﮏ ﮐﺘﺎب را ﺟﺴﺘﺠﻮ ﮐﻨﯿﺪ ﺗﻤﺎﻣﯽ اﻗﻼﻣﯽ ﮐﻪ در ﺳﺎﯾﺖ ﺣﺎوي‬ ‫ﻧﺎم آن ﮐﺘﺎب ﺑﺎﺷﺪ را ﺑﺮاي ﺷﻤﺎ ﺑﻪ ﻧﻤﺎﯾﺶ ﻣﯽﮔﺬارد وﻟﯽ اﮔﺮ ﺟﺴﺘﺠﻮ را ﻣﺤﺪود ﺑﻪ ﮐﺘﺎب ﮐﻨﯿﺪ ﺗﻨﻬﺎ ﻧﺘﺎﯾﺞ‬ ‫ﻣﺮﺑﻮط ﺑﻪ ﮐﺘﺎب را ﺑﻪ ﺷﻤﺎ ﻧﺸﺎن ﻣﯽدﻫﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪٩۵‬‬

‫زﯾﺮ ﺷﺎﺧﻪﻫﺎي دوم‪ ،‬ﺳﻮم و زﯾﺮ ﺷﺎﺧﻪﻫﺎي ﺑﻌﺪي‬ ‫اﻏﻠﺐ ﻃﺮاﺣﺎن ﺗﻨﻬﺎ دو ﻣﺮﺣﻠﻪ اول ‪ navigation‬را ﺑﻪ ﺧﻮﺑﯽ ﻃﺮاﺣﯽ ﻣﯽﮐﻨﻨﺪ و ﺑﻪ ﻣﺤﺾ اﯾﻨﮑﻪ وارد ﻣﺮﺣﻠﻪ ﺳﻮم و‬ ‫ﭼﻬﺎرم ﻣﯽﺷﻮﯾﻢ دﯾﮕﺮ اﯾﻦ ﺑﺨﺶﻫﺎ ﻗﺎﺑﻞ اﺳﺘﻔﺎده ﻧﯿﺴﺘﻨﺪ و ﺑﻪ ﺧﻮﺑﯽ ﻃﺮاﺣﯽ ﻧﺸﺪه اﻧﺪ‬

‫ﺟﺎﻟﺐ اﯾﻦﺟﺎﺳﺖ ﮐﻪ ﻃﺮاﺣﺎن ﺑﺮاي دﺳﺘﻪﺑﻨﺪي ﻣﻄﺎﻟﺐ ﺳﺎﯾﺖ ﻣﻌﻤﻮﻻ اﯾﻦ ﭼﻬﺎر ﻣﺮﺣﻠﻪ را ﭘﯿﺶﺑﯿﻨﯽ ﮐﺮدهاﻧﺪ وﻟﯽ ﺑﻌﺪ‬ ‫از ﻣﺮﺣﻠﻪ دوم ‪ ،‬ﺑﺨﺶﻫﺎي ﺑﻌﺪي اﺻﻼ ﺑﻪ ﺷﮑﻞ ﻣﺘﻤﺎﯾﺰ و ﻣﺮﺗﺐ ﻃﺮاﺣﯽ ﻧﺸﺪهاﻧﺪ‪ .‬ﺷﺎﯾﺪ ﻃﺮاﺣﺎن ﻓﮑﺮ ﻣﯽﮐﻨﻨﺪ ﮐﻪ‬ ‫ﮐﺎرﺑﺮان اﻏﻠﺐ از ﻫﻤﺎن دو ﻣﺮﺣﻠﻪ اول ‪ navigation‬اﺳﺘﻔﺎده ﻣﯽﮐﻨﻨﺪ و زﯾﺮ ﺷﺎﺧﻪﻫﺎي ﺑﻌﺪي را اﺳﺘﻔﺎده ﻧﻤﯽﮐﻨﻨﺪ‬ ‫وﻟﯽ در ﺣﻘﯿﻘﺖ ﻣﺸﺨﺺ ﺷﺪه اﺳﺖ ﮐﻪ ﮐﺎرﺑﺮان ﺑﻪ ﻫﻤﺎن اﻧﺪازهاي ﮐﻪ از ﻣﺮﺣﻠﻪﻫﺎي اول و دوم ‪navigation‬‬ ‫اﺳﺘﻔﺎده ﻣﯽ ﮐﻨﻨﺪ ﺑﻪ ﻫﻤﺎن اﻧﺪازه ﻫﻢ از ﻣﺮﺣﻠﻪ ﺳﻮم و ﭼﻬﺎرم اﺳﺘﻔﺎده ﻣﯽﮐﻨﻨﺪ از اﯾﻦ رو ﻃﺮاﺣﯽ اﯾﻦ ﺑﺨﺶﻫﺎ ﻧﯿﺰ‬ ‫ﺿﺮوري اﺳﺖ‪.‬‬ ‫اﻟﺒﺘﻪ ﺷﺎﯾﺪ ﯾﮑﯽ از دﻻﯾﻞ ﻋﺪم ﻃﺮاﺣﯽ ﺻﺤﯿﺢ ﻣﺮاﺣﻞ ﺳﻮم و ﭼﻬﺎرم‪ ،‬ﮐﻤﺒﻮد ﻓﻀﺎ در ﺻﻔﺤﺎت ﺑﺎﺷﺪ‪.‬‬ ‫ﻧﺎم ﺻﻔﺤﺎت وب‬ ‫ﻧﺎم ﺻﻔﺤﺎت در وب اﻫﻤﯿﺖ ﺑﺴﯿﺎر دارد زﯾﺮا وﻗﺘﯽ ﮐﺎرﺑﺮ ﺷﮏ ﮐﻨﺪ ﮐﻪ در ﺻﻔﺤﻪ درﺳﺘﯽ ﻗﺮار ﮔﺮﻓﺘﻪ اﺳﺖ ﯾﺎ ﻧﻪ‪ ،‬ﺗﻨﻬﺎ‬ ‫ﮐﺎﻓﯿﺴﺖ ﺑﻪ ﻧﺎم ﺻﻔﺤﻪ دﻗﺖ ﮐﻨﺪ ﺗﺎ ﻣﺘﻮﺟﻪ ﺷﻮد ﮐﻪ در ﮐﺪام ﺻﻔﺤﻪ ﻗﺮار ﮔﺮﻓﺘﻪ اﺳﺖ‪.‬‬ ‫ﭼﻬﺎر ﭼﯿﺰ را ﺑﺎﯾﺪ در ﻣﻮرد ﻧﺎم ﺻﻔﺤﺎت ﺑﺪاﻧﯿﺪ‪:‬‬ ‫‪‬‬

‫ﻫﺮ ﮐﺪام از ﺻﻔﺤﺎت ﺑﺎﯾﺪ ﻧﺎﻣﯽ داﺷﺖ ﺑﺎﺷﺪ‪ :‬ﻫﻤﺎﻧﻄﻮر ﮐﻪ ﻫﺮ ﺧﯿﺎﺑﺎﻧﯽ داراي ﻧﺎﻣﯽ اﺳﺖ‪،‬ﻫﺮ ﺻﻔﺤﻪ اي ﻧﯿﺰ‬ ‫ﺑﻪ ﻧﺎم اﺣﺘﯿﺎج دارد‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪٩۶‬‬

‫ﻃﺮاﺣﺎن ﮔﺎﻫﯽ ﻓﮑﺮ ﻣﯽﮐﻨﻨﺪ ﮐﻪ » ﺧﻮب ﻣﺎ ﻧﺎم ﺻﻔﺤﻪ را در ﺑﺨﺶ ‪ navigation‬آوردهاﯾﻢ و آن را ﻣﺘﻤﺎﯾﺰ‬ ‫ﻧﯿﺰ ﻧﺸﺎن دادهاﯾﻢ ﭘﺲ دﯾﮕﺮ ﻧﯿﺎزي ﺑﻪ ﻧﺎم ﺻﻔﺤﻪ ﻧﯿﺴﺖ و ﻣﯽﺗﻮاﻧﯿﻢ اﯾﻦ ﻋﻨﺼﺮ را از ﺻﻔﺤﻪ ﺣﺬف ﮐﻨﯿﺪ و‬ ‫در ﻓﻀﺎ ﺻﺮﻓﻪ ﺟﻮﯾﯽ ﮐﻨﯿﻢ«‪ .‬اﻟﺒﺘﻪ ﻣﺴﻠﻤﺎ اﯾﻦ ﮐﺎﻓﯽ ﻧﯿﺴﺖ و ﺑﺎﯾﺪ ﺑﺮاي ﻫﺮ ﺻﻔﺤﻪ ﻧﺎﻣﯽ در ﻧﻈﺮ ﺑﮕﯿﺮﯾﺪ و‬ ‫آن را در ﺻﻔﺤﻪ در ﺟﺎﯾﯽ ﻣﻨﺎﺳﺐ ﺑﻪ ﻧﻤﺎﯾﺶ در آورﯾﺪ‪.‬‬ ‫‪‬‬

‫ﻧﺎم ﺑﺎﯾﺪ در ﺟﺎي ﻣﻨﺎﺳﺐ در ﺻﻔﺤﻪ ﻗﺮار ﺑﮕﯿﺮد‪ :‬ﻧﺎم ﺻﻔﺤﻪ ﺑﺎﯾﺪ در ﺟﺎﯾﯽ ﻗﺮار ﺑﮕﯿﺮد ﮐﻪ ﻧﻤﺎﯾﺎنﮔﺮ‬ ‫ﻣﺤﺘﻮاي زﯾﺮ ﻣﺠﻤﻮﻋﻪ ﺧﻮد ﺑﺎﺷﺪ و در ﺑﺎﻻي ﻓﺮﯾﻤﯽ ﻗﺮار ﺑﮕﯿﺮد ﮐﻪ ﻣﺤﺘﻮا را در ﺧﻮد ﻗﺮار ﮔﺮﻓﺘﻪ اﺳﺖ‪.‬‬

‫‪‬‬

‫ﻧﺎم ﺻﻔﺤﻪ ﺑﺎﯾﺪ ﻣﺸﺨﺺ و واﺿﺢ ﺑﺎﺷﺪ‪ :‬ﺷﻤﺎ ﺑﺎﯾﺪ از رﻧﮓ ﻣﺘﻔﺎوت‪ ،‬ﺳﺎﯾﺰ ﻣﺘﻦ و ﻣﺤﻞ ﻣﻨﺎﺳﺐ اﺳﺘﻔﺎده‬ ‫ﮐﻨﯿﺪ ﺗﺎ ﻧﺎم ﺻﻔﺤﻪ ﺑﻪ ﺷﮑﻠﯽ ﮐﺎﻣﻼ ﻣﺘﻤﺎﯾﺰ از ﻣﺘﻦﻫﺎي دﯾﮕﺮ ﺻﻔﺤﻪ ﻧﻤﺎﯾﺶ داده ﺷﻮد‪ .‬در اﻏﻠﺐ اوﻗﺎت اﯾﻦ‬ ‫ﺑﺨﺶ ﺑﺰرگﺗﺮﯾﻦ ﺳﺎﯾﺰ ﻓﻮﻧﺖ را در ﺻﻔﺤﻪ داراﺳﺖ‪.‬‬

‫‪‬‬

‫ﻧﺎم ﺻﻔﺤﻪ ﺑﺎﯾﺪ ﺑﺎ ﻟﯿﻨﮑﯽ ﮐﻪ ﺑﻪ ﺻﻔﺤﻪ ﻣﻨﺘﻬﯽ ﺷﺪه اﺳﺖ‪ ،‬ﯾﮑﺴﺎن ﺑﺎﺷﺪ‪ .‬ﻫﻤﯿﺸﻪ ﺑﺎﯾﺪ ﻣﺘﻦ داﺧﻞ ﻟﯿﻨﮏ و‬ ‫ﺗﯿﺘﺮ ﻧﺎم ﺻﻔﺤﻪ ﯾﮑﺴﺎن ﺑﺎﺷﺪ‪ .‬ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل وﻗﺘﯽ ﺑﺮ روي ﻋﺒﺎرت ﻣﺤﺼﻮﻻت ﮐﻠﯿﮏ ﮐﺮدﯾﻢ ﺑﺎﯾﺪ ﻧﺎم‬ ‫ﺻﻔﺤﻪاي ﮐﻪ واردش ﻣﯽﺷﻮﯾﻢ دﻗﯿﻘﺎ ﻣﺤﺼﻮﻻت ﺑﺎﺷﺪ‪ .‬اﯾﻦ ﻧﮑﺘﻪ ﺑﺴﯿﺎر ﻇﺮﯾﻒ اﺳﺖ وﻟﯽ اﮔﺮ ﻧﺎم ﺻﻔﺤﻪ و‬ ‫ﻣﺘﻦ ﻟﯿﻨﮑﯽ ﮐﻪ ﺑﻪ ﺻﻔﺤﻪ ﻣﻨﺘﻬﯽ ﻣﯽﺷﻮد ﯾﮑﯽ ﻧﺒﺎﺷﺪ‪ ،‬ﮐﺎرﺑﺮ ﺑﺎﯾﺪ ﭼﻨﺪ ﺻﺪم ﺛﺎﻧﯿﻪ ﻓﮑﺮ ﮐﻨﺪ ﺗﺎ ﻣﺘﻮﺟﻪ ﺷﻮد ﮐﻪ‬ ‫ﭼﺮا ﻧﺎم داﺧﻞ ﻟﯿﻨﮏ و ﻧﺎم ﺻﻔﺤﻪ ﯾﮑﺴﺎن ﻧﯿﺴﺖ‪.‬‬

‫اﻟﺒﺘﻪ ﮔﺎﻫﯽ اوﻗﺎت ﺑﻪ ﺧﺎﻃﺮ ﻣﺤﺪودﯾﺖ ﻓﻀﺎ ﺷﺎﯾﺪ ﻣﺠﺒﻮر ﺑﺎﺷﯿﺪ ﮐﻪ ﻧﺎم ﺻﻔﺤﻪ را ﺗﻐﯿﯿﺮ ﺑﺪﻫﯿﺪ وﻟﯽ ﺑﺎﯾﺪ‬ ‫ﺳﻌﯽ ﮐﻨﯿﺪ ﺗﺎ ﺟﺎﯾﯽ ﮐﻪ اﻣﮑﺎن دارد ﻧﺎم ﺻﻔﺤﻪ را ﻧﺰدﯾﮏ ﺑﻪ ﻣﺘﻦ داﺧﻞ ﻟﯿﻨﮏ ﻣﻨﺘﻬﯽ ﺑﻪ ﺻﻔﺤﻪ ﻧﮕﻪ دارﯾﺪ و‬ ‫اﮔﺮ ﻧﺎم را ﺗﻐﯿﯿﺮ دادهاﯾﺪ دﻟﯿﻞ اﯾﻦ ﺗﻐﯿﯿﺮ ﺑﺎﯾﺪ ﺑﺮاي ﮐﺎرﺑﺮ روﺷﻦ ﺑﺎﺷﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪٩٧‬‬

‫ﻣﮑﺎن ﺣﻀﻮر ﮐﺎرﺑﺮ را ﻣﺸﺨﺺ ﮐﻨﯿﺪ‬ ‫ﻫﻤﺎﻧﻄﻮر ﮐﻪ ﻗﺒﻼً ﺗﻮﺿﯿﺢ دادﯾﻢ‪ ،‬ﮐﺎرﺑﺮان از ﮔﻢ ﺷﺪن و اﺣﺴﺎس ﮔﻢﺷﺪﮔﯽ در ﺳﺎﯾﺖ ﻧﻔﺮت دارﻧﺪ‪ .‬ﺑﺎﯾﺪ ﻫﻤﺎﻧﻨﺪ‬ ‫ﻓﺮوﺷﮕﺎهﻫﺎي ﺑﺰرگ و اﯾﺴﺘﮕﺎهﻫﺎ ي ﻣﺘﺮو ﻣﮑﺎن ﻗﺮار ﮔﺮﻓﺘﻦ ﺷﺨﺺ را ﻣﺸﺨﺺ ﮐﻨﯿﺪ ﺗﺎ آن ﺷﺨﺺ ﺑﺘﻮاﻧﺪ درﮐﯽ‬ ‫ﺻﺤﯿﺢ از ﻣﺤﯿﻂ داﺷﺘﻪ ﺑﺎﺷﺪ‪.‬‬ ‫در وب ﻣﺎ اﯾﻦﮐﺎر را ﺑﺎ اﺳﺘﻔﺎده از ﺗﻐﯿﯿﺮ رﻧﮓ ﻟﯿﻨﮏﻫﺎي ﻣﺮﺑﻮط ﺑﻪ ﺑﺨﺶ ﻣﺮﺑﻮﻃﻪ اﻧﺠﺎم ﻣﯽدﻫﯿﻢ‪ .‬اﻏﻠﺐ اﯾﻨﮑﺎر در‬ ‫ﺑﺨﺶ ‪ navigation‬و ﻣﻨﻮﻫﺎ اﻧﺠﺎم ﻣﯽﮔﯿﺮد‪.‬‬

‫ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل در اﯾﻦ ﺗﺼﻮﯾﺮ‪ ،‬ﮐﺎرﺑﺮ در ﺷﺎﺧﻪ ﻟﺒﺎسﻫﺎي زﻧﺎﻧﻪ و زﯾﺮ ﺷﺎﺧﻪ ﻣﺮﺑﻮط ﺑﻪ ﺷﻠﻮار ﻗﺮار دارد‪ .‬ﻫﻤﺎنﻃﻮر‬ ‫ﮐﻪ ﻣﺸﺨﺺ اﺳﺖ‪ ،‬ﻃﺮاح ﺑﺎ ﺗﻐﯿﯿﺮ رﻧﮓ ﻣﺘﻦ و ﺗﻐﯿﯿﺮ رﻧﮓ ﭘﺲ زﻣﯿﻨﻪ ﻣﮑﺎﻧﯽ را ﮐﻪ ﮐﺎرﺑﺮ در آن ﻗﺮار ﮔﺮﻓﺘﻪ اﺳﺖ را‬ ‫ﻣﺸﺨﺺ ﮐﺮده اﺳﺖ‪ .‬دﻗﺖ ﮐﻨﯿﺪ ﮐﻪ اﯾﻦ ﻟﯿﻨﮏﻫﺎ ﺑﺎﯾﺪ ﺑﻪ ﺧﻮﺑﯽ ﻣﺘﻤﺎﯾﺰ ﺷﻮﻧﺪ در ﻏﯿﺮ اﯾﻦ ﺻﻮرت ﮐﺎرﺑﺮان ﻣﺘﻮﺟﻪ آن‬ ‫ﻧﻤﯽﺷﻮﻧﺪ و ﺗﻨﻬﺎ ﺻﻔﺤﻪ را ﺷﻠﻮغ ﻣﯽﮐﻨﻨﺪ‪.‬‬ ‫‪breadcrumb‬‬ ‫‪ breadcrumb‬ﯾﺎ ﺑﺨﺶ راﻫﻨﻤﺎي ﺧﺮده ﻧﺎﻧﯽ ) اﯾﻦ ﻧﺎم از داﺳﺘﺎن ﻫﺎﻧﺴﻞ و ﮔﺮﺗﻞ ﮔﺮﻓﺘﻪ ﺷﺪه اﺳﺖ ﮐﻪ اﯾﻦ دو ﮐﻮدك‬ ‫ﺑﺮاي ﯾﺎﻓﺘﻦ راه و ﺑﺎزﮔﺸﺘﻦ ﺑﻪ ﺧﺎﻧﻪ‪ ،‬ﻧﺎن را ﺧﺮد ﻣﯽﮐﺮدﻧﺪ و در ﻣﺴﯿﺮ ﻣﯽرﯾﺨﺘﻨﺪ ﺗﺎ ﺑﻌﺪ ﺑﺘﻮاﻧﻨﺪ ﺑﺎ ﯾﺎﻓﺘﻦ ﻫﻤﺎن ﺧﺮده‬ ‫ﻧﺎنﻫﺎ ﺑﻪ ﺧﺎﻧﻪ ﺑﺎز ﮔﺮدﻧﺪ( ﻣﻌﻤﻮﻻ ﻣﺤﻞ ﻗﺮارﮔﯿﺮي ﺷﻤﺎ را در ﺻﻔﺤﻪ ﻧﻤﺎﯾﺶ ﻣﯽدﻫﻨﺪ و ﻟﯿﻨﮏﻫﺎﯾﯽ ﺑﺮاي ﺑﺎزﮔﺸﺖ ﺑﻪ‬ ‫ﺑﺨﺶﻫﺎي ﮐﻠﯽﺗﺮ ﯾﺎ وارد ﺷﺪن ﺑﻪ ﺑﺨﺶﻫﺎي ﺟﺰﺋﯽﺗﺮ ﺳﺎﯾﺖ را ﺑﺮاي ﺷﻤﺎ ﻣﻤﮑﻦ ﻣﯽﺳﺎزﻧﺪ‪ .‬ﻣﻌﻤﻮﻻ ﻋﺒﺎرﺗﯽ ﻫﻤﭽﻮن‬ ‫»ﺷﻤﺎ در اﯾﻨﺠﺎ ﻗﺮار دارﯾﺪ« در ﮐﻨﺎر اﯾﻦ ﺑﺨﺶ دﯾﺪه ﻣﯽﺷﻮد‪.‬‬

‫اﯾﻦ ﺑﺨﺶ در ﺳﺎﯾﺖﻫﺎ ﺑﺴﯿﺎر ﻣﻔﯿﺪﻧﺪ‪ .‬اﻏﻠﺐ ﮐﺎرﺑﺮان از ﻃﺮﯾﻖ ﺟﺴﺘﺠﻮ ﺑﻪ ﺻﻔﺤﺎت وارد ﻣﯽﺷﻮﻧﺪ و دﻗﯿﻘﺎ ﻧﻤﯽداﻧﻨﺪ‬ ‫ﮐﻪ در ﮐﺪام ﺑﺨﺶ از ﺳﺎﯾﺖ ﻗﺮار ﮔﺮﻓﺘﻪاﻧﺪ وﻟﯽ اﯾﻦ راﻫﻨﻤﺎﻫﺎي ﺧﺮده ﻧﺎﻧﯽ ﺑﻪ آﻧﻬﺎ ﮐﻤﮏ ﻣﯽﮐﻨﺪ ﺗﺎ ﻣﺴﯿﺮ ﺧﻮد را‬ ‫ﺑﯿﺎﺑﻨﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪٩٨‬‬

‫در ﮔﺬﺷﺘﻪ اﯾﻦ ﺑﺨﺶ ﺗﻨﻬﺎ در ﺳﺎﯾﺖﻫﺎﯾﯽ دﯾﺪه ﻣﯽﺷﺪ ﮐﻪ دادهﻫﺎي ﻋﻈﯿﻤﯽ داﺷﺘﻨﺪ و دﺳﺘﻪﺑﻨﺪيﻫﺎي ﺑﺴﯿﺎر ﻋﻤﯿﻘﯽ‬ ‫ﻧﯿﺰ ﺑﺮاي ﺳﺎﯾﺖ ﺧﻮد ﺗﻌﺮﯾﻒ ﮐﺮده ﺑﻮدﻧﺪ‪.‬‬

‫ﻫﻤﭽﻨﯿﻦ در ﺳﺎﯾﺖﻫﺎﯾﯽ ﮐﻪ داراي ﺑﺨﺶﻫﺎي ﻣﺨﺘﻠﻒ زﯾﺎدي ﺑﻮدﻧﺪ و در اﺻﻞ ﭼﻨﺪ ﺳﺎﯾﺖ در ﯾﮏ ﺳﺎﯾﺖ ﻗﺮار داﺷﺖ‬ ‫از اﯾﻦ ﺑﺨﺶ اﺳﺘﻔﺎده ﻣﯽﺷﺪ‪ .‬ﻣﺎﻧﻨﺪ ﺳﺎﯾﺖ ‪ Cnet‬ﮐﻪ داراي ﺳﺎﯾﺖﻫﺎي ﻣﺨﺘﻠﻒ زﯾﺎدي اﺳﺖ‪.‬‬

‫اﻟﺒﺘﻪ در ﺳﺎلﻫﺎي اﺧﯿﺮ اﯾﻦ ﺑﺨﺶ در ﺳﺎﯾﺖﻫﺎي ﺑﺴﯿﺎري دﯾﺪه ﻣﯽﺷﻮد و ﺣﺘﯽ ﺳﺎﯾﺖﻫﺎﯾﯽ ﮐﻪ ﻣﺤﺘﻮاﯾﺸﺎن را ﺑﻪ‬ ‫ﺧﻮﺑﯽ دﺳﺘﻪﺑﻨﺪي ﮐﺮدهاﻧﺪ ﻧﯿﺰ از اﯾﻦ ﺑﺨﺶ اﺳﺘﻔﺎده ﻣﯽﮐﻨﻨﺪ‪.‬‬ ‫اﻟﺒﺘﻪ ﺑﻪ ﯾﺎد داﺷﺘﻪ ﺑﺎﺷﯿﺪ ﮐﻪ اﯾﻦ ﺑﺨﺶ ﻧﻤﯽﺗﻮاﻧﺪ ﺟﺎﯾﮕﺰﯾﻦ ‪ navigation‬اﺻﻠﯽ ﺳﺎﯾﺖ ﺷﻮد و ﻫﻤﭽﻨﺎن ﻧﻤﺎﯾﺶ‬ ‫‪ navigation‬ﺑﻪ ﻫﻤﺮاه ﯾﮏ ﻣﺮﺣﻠﻪ از زﯾﺮ ﺷﺎﺧﻪﻫﺎ در اوﻟﻮﯾﺖ اﺳﺖ و ﺣﺘﻤﺎ ﺑﺎﯾﺪ در ﺳﺎﯾﺖ ﮔﻨﺠﺎﻧﺪه ﺷﻮد‪ .‬زﯾﺮا‬ ‫‪ bredcrumb‬ﻫﺎ ﺑﻪ اﻧﺪازه ﮐﺎﻓﯽ ﮔﻮﯾﺎ ﻧﯿﺴﺘﻨﺪ و ﺑﻪ اﻧﺪازه ‪ navigation‬ﻫﺎ در ﺟﻠﻮي ﭼﺸﻢ ﮐﺎرﺑﺮان ﻗﺮار ﻧﺪارﻧﺪ‪ .‬اﻟﺒﺘﻪ‬ ‫ﻣﻨﻈﻮر اﯾﻦ ﻧﯿﺴﺖ ﮐﻪ اﯾﻦ ﺑﺨﺶ اﺻﻼ ارزش ﻧﺪارد ﺑﻠﮑﻪ ﺑﺮﻋﮑﺲ اﯾﻦ ﺑﺨﺶ ﻣﯽﺗﻮاﻧﺪ ﺑﺴﯿﺎر ﻣﻔﯿﺪ ﺑﺎﺷﺪ و از آﻧﺠﺎﺋﯽﮐﻪ‬ ‫ﻓﻀﺎي ﺑﺴﯿﺎر ﮐﻤﯽ را ﻧﯿﺰ اﺷﻐﺎل ﻣﯽﮐﻨﺪ‪ ،‬ﺣﻀﻮرش ﺧﻠﻠﯽ را در ﻃﺮح ﺳﺎﯾﺖ ﺑﻪ وﺟﻮد ﻧﻤﯽآورد‪.‬‬ ‫ﻧﮑﺎﺗﯽ را ﺑﺎﯾﺪ در ﻫﻨﮕﺎم ﻃﺮاﺣﯽ ‪ breadcrumb‬ﻫﺎ در ﻧﻈﺮ ﺑﮕﯿﺮﯾﺪ‪:‬‬ ‫‪‬‬

‫آﻧﻬﺎ را در ﺑﺎﻻي ﺻﻔﺤﻪ ﻗﺮار دﻫﯿﺪ‪ :‬اﮔﺮ ﻣﯽﺧﻮاﻫﯿﺪ اﯾﻦ ﺑﺨﺶ اﺳﺘﻔﺎده زﯾﺎدي داﺷﺘﻪ ﺑﺎﺷﺪ و ﺑﺮاي ﮐﺎرﺑﺮان‬ ‫ﻣﻔﯿﺪ واﻗﻊ ﺷﻮد ﺑﺎﯾﺪ آﻧﻬﺎ را در ﺑﺎﻻي ﺻﻔﺤﻪ و در ﺑﺎﻻي ﻫﻤﻪ ﭼﯿﺰ ﻗﺮار دﻫﯿﺪ‪ .‬درﺳﺖ ﻫﻤﺎﻧﻨﺪ ﺷﻤﺎره‬ ‫ﺻﻔﺤﺎت ﮐﺘﺎب ﮐﻪ در ﺑﺎﻻي ﺻﻔﺤﺎت ﻗﺮار ﻣﯽﮔﯿﺮﻧﺪ ﺷﻤﺎ ﻧﯿﺰ ﺑﺎﯾﺪ ﺳﻌﯽ ﮐﻨﯿﺪ ﮐﻪ اﯾﻦ ﺑﺨﺶ را در ﺟﺎﯾﯽ‬ ‫ﻧﺰدﯾﮏ ﺑﻪ ﺑﺎﻻي ﺻﻔﺤﻪ ﻗﺮار دﻫﯿﺪ ﺗﺎ از ‪ navigation‬اﺻﻠﯽ ﺻﻔﺤﻪ ﻣﺘﻤﺎﯾﺰ ﺑﺎﺷﺪ‪ .‬زﻣﺎﻧﯽ ﮐﻪ اﯾﻦ دو ﺑﺨﺶ‬ ‫ﻧﺰدﯾﮏ ﺑﻪ ﻫﻢ ﺑﺎﺷﺪ‪ ،‬ﮐﺎرﺑﺮ ﺑﺎز ﺑﻪ ﻓﮑﺮ ﻓﺮو ﻣﯽرود ﮐﻪ ﮐﺪام ﯾﮏ از اﯾﻦ دو ‪ navigation‬اﺻﻠﯽ ﺳﺎﯾﺖ‬ ‫ﺧﻮاﻫﻨﺪ ﺑﻮد‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪٩٩‬‬

‫‪‬‬

‫ﺑﯿﻦ ﻟﯿﻨﮏﻫﺎ از ﻋﻼﻣﺖ ﮐﻮﭼﮏﺗﺮ ﯾﺎ ﺑﺰرگﺗﺮ )ﺑﺎ ﺗﻮﺟﻪ ﺑﻪ زﺑﺎن ﺳﺎﯾﺖ( اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪ :‬ﺗﺤﻘﯿﻘﺎت ﻧﺸﺎن داده‬ ‫ﮐﻪ ﻋﻼﻣﺖ ﺑﺰرگﺗﺮ ﺑﺮاي زﺑﺎن اﻧﮕﻠﯿﺴﯽ و ﻋﻼﻣﺖ ﮐﻮﭼﮏﺗﺮ ﺑﺮاي زﺑﺎنﻫﺎي راﺳﺖ ﺑﻪ ﭼﭗ ﺑﻬﺘﺮﯾﻦ ﮔﺰﯾﻨﻪ‬ ‫ﺑﺮاي ﻧﻤﺎﯾﺶ ﺑﺨﺶ ‪ bredcrumb‬اﺳﺖ‪.‬‬

‫اﻟﺒﺘﻪ ﻋﻼﻣﺖ ‪ :‬و ‪ /‬ﻫﻢ ﻣﯽﺗﻮاﻧﻨﺪ در اﯾﻨﺠﺎ اﺳﺘﻔﺎده ﺷﻮﻧﺪ وﻟﯽ ﻋﻼﻣﺖ ﮐﻮﭼﮏﺗﺮ و ﺑﺰرگﺗﺮ ﮔﻮﯾﺎﺗﺮﻧﺪ و ﺑﯿﺶﺗﺮ‬ ‫ﻣﻮرد اﺳﺘﻔﺎده ﻗﺮار ﮔﺮﻓﺘﻪاﻧﺪ و ﺟﻠﻮه ﺣﺮﮐﺖ رو ﺑﻪ ﺟﻠﻮ را ﺗﺪاﻋﯽ ﻣﯽﮐﻨﻨﺪ‪.‬‬ ‫‪‬‬

‫از ﻣﺘﻦ ﺑﺎ ﺳﺎﯾﺰ ﮐﻮﭼﮏ اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪ :‬ﺑﻪ ﯾﺎد داﺷﺘﻪ ﺑﺎﺷﯿﺪ ﮐﻪ اﯾﻦ ﺑﺨﺶ ﺗﻨﻬﺎ ﯾﮏ ﺑﺨﺶ ﮐﻤﮑﯽ اﺳﺖ و ﺑﺎﯾﺪ‬ ‫ﺗﻨﻬﺎ ﺑﻪ ﻫﻤﺎن اﻧﺪازه در ﭼﺸﻢ ﮐﺎرﺑﺮ ﺑﺎﺷﺪ‪ .‬ﻣﺘﻤﺎﯾﺰ ﮐﺮدن زﯾﺎد از ﺣﺪ اﯾﻦ ﺑﺨﺶ‪ ،‬ﺑﺎﻋﺚ ﺳﺮدرﮔﻤﯽ ﮐﺎرﺑﺮ‬ ‫ﻣﯽﺷﻮد‪.‬‬

‫‪‬‬

‫از ﻋﺒﺎرت ﺷﻤﺎ اﯾﻨﺠﺎ ﻗﺮار دارﯾﺪ اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪ :‬اﻏﻠﺐ ﮐﺎرﺑﺮان ﺑﺎ ‪ breadcrumb‬آﺷﻨﺎ ﻫﺴﺘﻨﺪ وﻟﯽ ﻧﻮﺷﺘﻦ‬ ‫ﻣﺘﻦ ﮐﻤﮑﯽ ﺑﺮاي ﮔﻮﯾﺎﺗﺮ ﻧﺸﺎن دادن اﯾﻦ ﺑﺨﺶ ﻣﯽﺗﻮاﻧﺪ ﺑﻪ ﮐﺎرﺑﺮان ﮐﻤﮏ ﮐﻨﺪ‪.‬‬

‫‪‬‬

‫آﺧﺮﯾﻦ ﮔﺰﯾﻨﻪ ﻟﯿﺴﺖ را ﺑﺎ ﻓﻮﻧﺖ ﺿﺨﯿﻢ ﻧﻤﺎﯾﺶ دﻫﯿﺪ‪ :‬ﺳﻌﯽ ﮐﻨﯿﺪ ﮐﻪ آﺧﺮﯾﻦ ﮔﺰﯾﻨﻪ ﻟﯿﺴﺖ را ﺑﺎ ﻓﻮﻧﺖ‬ ‫ﺿﺨﯿﻢ ﻧﺸﺎن دﻫﯿﺪ ﮐﻪ اﯾﻦ ﮔﺰﯾﻨﻪ ﻫﻤﺎن ﻧﺎم ﺻﻔﺤﻪ اي اﺳﺖ ﮐﻪ ﮐﺎرﺑﺮ در آن ﻗﺮار دارد‪.‬‬

‫‪‬‬

‫از اﯾﻦ ﺑﺨﺶ ﺑﻪ ﺟﺎي ﻧﺎم ﺻﻔﺤﺎت اﺳﺘﻔﺎده ﻧﮑﻨﯿﺪ‪ :‬ﺑﺮﺧﯽ از ﻃﺮاﺣﺎن از ﮔﺰﯾﻨﻪﻫﺎي ‪ breadcrumb‬ﺑﻪ‬ ‫ﺟﺎي ﻧﺎم ﺻﻔﺤﺎت اﺳﺘﻔﺎده ﻣﯽﮐﻨﻨﺪ‪ .‬ﺷﺎﯾﺪ ﺑﻪ ﻧﻈﺮ ﺑﺮﺳﺪ ﮐﻪ اﯾﻦ ﺷﯿﻮه ﻣﻮﺛﺮ اﺳﺖ اﻣﺎ در ﺣﻘﯿﻘﺖ اﯾﻦﻃﻮر‬ ‫ﻧﯿﺴﺖ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪١٠٠‬‬

‫ﺷﺎﯾﺪ ﺑﻪ اﯾﻦ دﻟﯿﻞ ﮐﻪ ﺑﺮاي زﺑﺎنﻫﺎي راﺳﺖ ﺑﻪ ﭼﭗ ﻣﺎ اﻧﺘﻈﺎر دارﯾﻢ ﮐﻪ ﻧﺎم ﺻﻔﺤﻪ را در ﺑﺎﻻ و ﺳﻤﺖ راﺳﺖ‬ ‫ﺑﺒﯿﻨﻢ وﻟﯽ در ‪ breadcrumb‬آﺧﺮﯾﻦ ﮔﺰﯾﻨﻪ ﻣﻌﻤﻮﻻ در وﺳﻂ ﯾﺎ ﺣﺘﯽ ﻧﺰدﯾﮏ ﺑﻪ ﭼﭗ ﺻﻔﺤﻪ ﻧﻤﺎﯾﺶ داده‬ ‫ﺧﻮاﻫﺪ ﺷﺪ‪.‬‬ ‫‪ Tab‬ﻫﺎ در ﻃﺮاﺣﯽ ﺻﻔﺤﺎت وب‬ ‫در ﺑﺮﺧﯽ از ﮐﺘﺐ ﻗﺪﯾﻤﯽ ﺑﺮاي ﺟﺪا ﮐﺮدن ﻣﺤﺘﻮاي ﮐﺘﺎب ﺑﻪ ﺑﺨﺶﻫﺎي ﻣﺨﺘﻠﻒ‪ tab ،‬ﻫﺎﯾﯽ در ﮐﻨﺎر ﮐﺘﺎب ﻗﺮار‬ ‫ﻣﯽﮔﺮﻓﺖ ﮐﻪ ﺑﺎ اﺳﺘﻔﺎده از آﻧﻬﺎ ﻣﯽﺗﻮاﻧﺴﺘﯿﺪ ﺧﯿﻠﯽ ﺳﺮﯾﻊ ﺑﻪ ﺑﺨﺶ ﻣﻮرد ﻧﻈﺮ دﺳﺖ ﯾﺎﺑﯿﺪ‪.‬‬

‫ﺗﺐﻫﺎ در ﻃﺮاﺣﯽ اﺳﺘﻔﺎده ﺑﺴﯿﺎري دارﻧﺪ و ﺑﺎ اﺳﺘﻔﺎده از آﻧﻬﺎ ﻣﯽﺗﻮان ارﺗﺒﺎط ﺑﯿﻦ ﺑﺨﺶ ﻣﺮﺑﻮﻃﻪ و ﻣﺤﺘﻮاي ﻣﺮﺑﻮط‬ ‫ﺑﻪ ﺑﺨﺶ را ﺑﻪ ﺧﻮﺑﯽ ﺑﻪ ﻧﻤﺎﯾﺶ ﮔﺬاﺷﺖ‪ .‬از اﯾﻦ رو ﺳﺎﯾﺖﻫﺎي وب از اﯾﻦ ‪ tab‬ﻫﺎ ﺑﺮاي ﺳﺎﺧﺖ ﺑﺨﺶ ‪navigation‬‬ ‫اﺳﺘﻔﺎده ﮐﺮدﻧﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪١٠١‬‬

‫ﺑﻪ ﭼﻨﺪ دﻟﯿﻞ ‪ tab‬ﻫﺎ ﺑﻬﺘﺮﯾﻦ ﮔﺰﯾﻨﻪ ﺑﺮاي ﻃﺮاﺣﯽ ﺑﺨﺶ ‪ navigation‬در ﺳﺎﯾﺖﻫﺎي ﺑﺰرگ ﺑﻪ ﺣﺴﺎب ﻣﯽآﯾﻨﺪ‪:‬‬ ‫‪‬‬

‫‪Tab‬ﻫﺎ ﺑﺴﯿﺎر ﮔﻮﯾﺎ ﻫﺴﺘﻨﺪ‪ :‬ﺗﺎ ﺑﻪ ﺣﺎل ﮐﺴﯽ را ﻧﺪﯾﺪﯾﻢ ﮐﻪ ﺑﻪ ‪ tab‬ﻫﺎ ﻧﮕﺎه ﮐﻨﺪ و درك ﻧﮑﻨﺪ ﮐﻪ اﯾﻦ ﺑﺨﺶ ﺑﻪ‬ ‫ﭼﻪ ﻣﻨﻈﻮر در ﺻﻔﺤﻪ ﻗﺮار ﮔﺮﻓﺘﻪ اﺳﺖ‪ .‬از آﻧﺠﺎﯾﯿﮑﻪ در دﻧﯿﺎي واﻗﻌﯽ از ‪ tab‬ﻫﺎ اﺳﺘﻔﺎده ﮐﺮدهاﯾﻢ در دﻧﯿﺎي‬ ‫وب ﻧﯿﺰ ﺑﺎ آﻧﻬﺎ آﺷﻨﺎﯾﯽ دارﯾﻢ‪.‬‬

‫‪‬‬

‫ﮐﻤﺘﺮ ﭘﯿﺶ ﻣﯽآﯾﺪ ﮐﻪ ﮐﺎرﺑﺮ اﯾﻦ ﺑﺨﺶ را ﻧﺒﯿﻨﺪ‪ :‬ﺑﺎرﻫﺎ ﺷﺪه اﺳﺖ ﮐﻪ ﮐﺎرﺑﺮ ﻟﯿﻨﮏﻫﺎي ﺑﺎﻻي ﺻﻔﺤﻪ را‬ ‫ﻧﺪﯾﺪه اﺳﺖ وﻟﯽ از آﻧﺠﺎﺋﯽﮐﻪ ﺗﺐﻫﺎ ﺑﺴﯿﺎر در ﭼﺸﻢ ﻫﺴﺘﻨﺪ‪ ،‬ﮐﺎرﺑﺮ ﺑﻪ ﺧﺎﻃﺮ ﺑﺰرﮔﯽ و ﺗﻔﺎوت رﻧﮓ اﯾﻦ‬ ‫ﺑﺨﺶ ﺧﯿﻠﯽ راﺣﺖ اﯾﻦ ﺑﺨﺶ را در ﺻﻔﺤﻪ ﻣﯽﺑﯿﻨﺪ‪.‬‬

‫‪‬‬

‫‪ Tab‬ﻫﺎ زﯾﺒﺎ ﻫﺴﺘﻨﺪ‪ :‬ﻃﺮاﺣﺎن ﻫﻤﯿﺸﻪ دﻏﺪﻏﻪ دارﻧﺪ ﮐﻪ ﺻﻔﺤﺎت را ﺑﻪ ﺷﮑﻠﯽ ﺟﺬاب ﻃﺮاﺣﯽ ﮐﻨﻨﺪ‪ tab .‬ﻫﺎ را‬ ‫ﻣﯽﺗﻮان ﺑﺎ اﺳﺘﻔﺎده از ﮔﺮاﻓﯿﮏ و ‪ CSS‬ﺑﻪ اﺷﮑﺎل ﺑﺴﯿﺎر زﯾﺒﺎﯾﯽ ﻃﺮاﺣﯽ ﮐﺮد‪.‬‬

‫‪‬‬

‫‪ Tab‬ﻫﺎ ﺣﺴﯽ از ﻓﻀﺎي ﻓﯿﺰﯾﮑﯽ را اﻟﻘﺎ ﻣﯽﮐﻨﻨﺪ‪ :‬ﻫﻤﯿﺸﻪ در ﻃﺮاﺣﯽ ‪ tab‬ﻫﺎ‪ ،‬آﻧﻬﺎ را ﻃﻮري ﻃﺮاﺣﯽ‬ ‫ﻣﯽﮐﻨﻨﺪ ﮐﻪ ‪ tab‬ﻓﻌﺎل ﺑﺮ روي ‪ tab‬ﻫﺎ دﯾﮕﺮ ﻗﺮار ﻣﯽﮔﯿﺮد‪ .‬ﺗﮑﻨﯿﮏ ﺳﺎدهايﺳﺖ وﻟﯽ ﺑﺴﯿﺎر اﺛﺮ ﮔﺬار اﺳﺖ و‬ ‫ﮐﺎرﺑﺮ ﺧﯿﻠﯽ راﺣﺖ ﺑﺎ آن ارﺗﺒﺎط ﺑﺮﻗﺮار ﻣﯽﮐﻨﺪ‪.‬‬

‫در ﺑﯿﻦ ﺳﺎﯾﺖﻫﺎﯾﯽ ﮐﻪ از ‪ tab‬اﺳﺘﻔﺎده ﮐﺮدهاﻧﺪ ﺳﺎﯾﺖ آﻣﺎزون ﯾﮑﯽ از اوﻟﯿﻦﻫﺎ ﺑﻮده اﺳﺖ و از ‪tab‬ﻫﺎ ﺑﻪ ﺑﻬﺘﺮﯾﻦ‬ ‫ﺷﮑﻞ اﺳﺘﻔﺎده ﺑﺮده اﺳﺖ‪.‬‬ ‫ﺗﺐﻫﺎي ﺳﺎﯾﺖ آﻣﺎزون ﺳﻪ وﯾﮋﮔﯽ ﮐﻠﯿﺪي داﺷﺘﻪ اﻧﺪ ﮐﻪ ﺑﺪﯾﻦ ﻗﺮار اﺳﺖ‪:‬‬ ‫‪‬‬

‫‪ Tab‬ﻫﺎ ﺑﺎﯾﺪ ﺑﻪ درﺳﺘﯽ ﺑﻪ ﺗﺼﻮﯾﺮ ﮐﺸﯿﺪه ﺷﺪه ﺑﺎﺷﻨﺪ‪ :‬اﯾﻦ ﺑﺨﺶ را ﺑﺎﯾﺪ ﺑﻪ درﺳﺘﯽ ﻃﺮاﺣﯽ ﮐﻨﯿﺪ ﮐﻪ ﺗﺐ‬ ‫ﻓﻌﺎل در ﻣﻘﺎﺑﻞ ﺑﻘﯿﻪ ﺗﺐﻫﺎ ﻗﺮار ﺑﮕﯿﺮد‪ .‬اﻟﺒﺘﻪ ﺑﺎﯾﺪ دﻗﺖ داﺷﺘﻪ ﺑﺎﺷﯿﺪ ﮐﻪ ﺗﺐ ﻓﻌﺎل ﺑﺎﯾﺪ ﺑﺎ رﻧﮕﯽ ﻣﺘﻔﺎوت ﻧﻤﺎﯾﺶ‬ ‫داده ﺷﻮد و ارﺗﺒﺎﻃﺶ را ﺑﺎ ﺻﻔﺤﻪ زﯾﺮ ﺑﻪ ﺧﻮﺑﯽ ﺑﻪ ﻧﻤﺎﯾﺶ ﺑﮕﺬارد‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪١٠٢‬‬

‫‪‬‬

‫در ﺗﺐﻫﺎ از رﻧﮓﻫﺎي ﻣﺨﺘﻠﻒ اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪ :‬ﺳﻌﯽ ﮐﻨﯿﺪ ﺑﺮاي ﻫﺮ ﺑﺨﺸﯽ‪ ،‬از ﯾﮏ رﻧﮓ ﺑﺮاي ‪ tab‬ﻫﺎ‬ ‫اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪ .‬و از آن رﻧﮓ ﻧﯿﺰ در ﻫﻤﺎن ﺷﺎﺧﻪ در ﻗﺴﻤﺖﻫﺎي دﯾﮕﺮ ﻧﯿﺰ اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪ .‬ﺑﺪﯾﻦ ﺷﮑﻞ ارﺗﺒﺎﻃﯽ‬ ‫ﺑﯿﻦ رﻧﮓ ﺗﺐ و رﻧﮓ اﺳﺘﻔﺎده ﺷﺪه در ﺻﻔﺤﻪ ﺑﻪ وﺟﻮد ﺧﻮاﻫﺪ آﻣﺪ‪.‬‬

‫‪‬‬

‫در ﻫﺮ ﺻﻔﺤﻪ و ﺑﺨﺸﯽ ﮐﻪ ﮐﺎرﺑﺮ وارد ﻣﯽﺷﻮد‪ ،‬ﺗﺐ ﻣﺮﺑﻮط ﺑﻪ آن ﺑﺨﺶ ﺑﺎﯾﺪ ﻣﺘﻤﺎﯾﺰ ﺷﺪه ﺑﺎﺷﺪ‪ .‬زﻣﺎﻧﯽ‬ ‫ﮐﻪ ﮐﺎرﺑﺮ وارد ﺻﻔﺤﻪ اول ﺳﺎﯾﺖ ﻣﯽﺷﻮد ﺑﺎﯾﺪ ﯾﮏ ‪ tab‬ﻓﻌﺎل ﺑﺎﺷﺪ در ﻏﯿﺮ اﯾﻦ ﺻﻮرت ‪ tab‬ﻫﺎ اﺛﺮ ﺧﻮد را‬ ‫از دﺳﺖ ﻣﯽدﻫﻨﺪ و ﺑﻪ ﭼﺸﻢ ﻧﻤﯽآﯾﻨﺪ و ﮐﺎرﺑﺮ ﻧﯿﺰ ﺑﺎﯾﺪ اﻧﺪﮐﯽ ﻓﮑﺮ ﮐﻨﺪ ﺗﺎ ﻣﺘﻮﺟﻪ ﻣﻮﺿﻮع ﺷﻮد‪ .‬ﺑﻬﺘـﺮ اﺳـﺖ‬ ‫ﮐﻪ ﺣﺘﯽ در ﺻﻔﺤﻪ اول ﺳﺎﯾﺖ ﻧﯿﺰ ﯾﮏ ‪ tab‬ﻓﻌﺎل ﺑﺎﺷﺪ‪.‬‬

‫ﺑﻪ ﻋﻨﻮان ﻣﺜﺎل در اﯾﻦ ﺳﺎﯾﺖ در ﺻﻔﺤﻪ اول ﻫﯿﭻ ‪ tab‬اي ﻓﻌﺎل ﻧﯿﺴﺖ‪ .‬ﺣﺎل ﺑﻪ ﻣﺜـﺎل ﺳـﺎﯾﺖ آﻣـﺎزون دﻗـﺖ‬ ‫ﮐﻨﯿﺪ‪:‬‬

‫‪www.ParsBook.org‬‬

‫‪١٠٣‬‬

‫در ﺳﺎﯾﺖ آﻣﺎزون ﺣﺘﯽ ﺑﺮاي ﺻﻔﺤﻪ اول ﻧﯿﺰ ‪ tab‬ﻣﺮﺑﻮط ﺑﻪ ﺧﻮشآﻣﺪﮔﻮﯾﯽ ﻓﻌﺎل اﺳﺖ و زﯾﺮ‬ ‫ﻣﺠﻤﻮﻋﻪﻫﺎي آن را ﻣﺸﺎﻫﺪه ﻣﯽﮐﻨﯿﺪ‪.‬‬ ‫ﺑﺎ اﺳﺘﻔﺎده از اﯾﻦ ﺗﮑﻨﯿﮏﻫﺎ ﻣﯽ ﺗﻮاﻧﯿﺪ ﺳﺎﯾﺘﯽ زﯾﺒﺎ ﺑﺮاي ﮐﺎرﺑﺮان ﻃﺮاﺣﯽ ﮐﻨﯿﺪ و ﮐﺎرﺑﺮان ﻧﯿﺰ ﺑﻪ آﺳﺎﻧﯽ‬ ‫ﻣﯽ ﺗﻮاﻧﻨﺪ از ﻃﺮح ﺷﻤﺎ ﺑﻬﺮه ﺑﺒﺮﻧﺪ و دﯾﮕﺮ ﻣﺠﺒﻮر ﻧﺨﻮاﻫﻨﺪ ﺑﻮد ﺑﺮاي اﺳﺘﻔﺎده از ﻫﺮ ﺑﺨﺶ اﻧﺪﮐﯽ ﻓﮑﺮ ﮐﻨﻨﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

١٠۴

‫ﺿﻤﺎﺋﻢ‬

www.ParsBook.org

‫‪١٠۵‬‬

‫ﻟﯿﺴﺖ ﮐﻨﺘﺮل ﮐﯿﻔﯿﺖ ﻃﺮاﺣﯽ‬ ‫ﺑﺮاي ﮐﻨﺘﺮل ﮐﯿﻔﯿﺖ ﻫﻤﯿﺸﻪ ﺑﻬﺘﺮﯾﻦ راه اﺳﺘﻔﺎده از ﻟﯿﺴﺖ ﮐﻨﺘﺮل اﺳﺖ‪ .‬اﯾﻦ ‪check list‬ﻫﺎ ﺑﻪ ﺷﻤﺎ ﮐﻤﮏ ﻣﯽﮐﻨﻨﺪ ﺗﺎ در‬ ‫ﮐﻤﺘﺮﯾﻦ زﻣﺎن ﺑﺘﻮاﻧﯿﺪ اﯾﺮادات و ﮐﺎﺳﺘﯽﻫﺎي ﻃﺮحﻫﺎي ﻣﺨﺘﻠﻒ را ﺑﯿﺎﺑﯿﺪ و ﺑﺮﻃﺮف ﮐﻨﯿﺪ‪ .‬از آﻧﺠﺎﺋﯽﮐﻪ ﻃﺮاﺣﯽ‬ ‫اﯾﻨﺘﺮﻓﯿﺲ ﻣﻌﻤﻮﻻ ﮐﺎري ﻃﻮﻻﻧﯽ و ﺑﺎ ﺟﺰﺋﯿﺎت زﯾﺎد اﺳﺖ اﮔﺮ از اﯾﻦ ﻟﯿﺴﺖﻫﺎ اﺳﺘﻔﺎده ﻧﮑﻨﯿﺪ‪ ،‬ﻣﻤﮑﻦ اﺳﺖ اﯾﺮاداﺗﯽ در‬ ‫ﻃﺮح ﺑﺎﻗﯽ ﺑﻤﺎﻧﺪ ﮐﻪ ﺑﻪ آن ﺗﻮﺟﻪ ﻧﮑﺮدهاﯾﺪ ﯾﺎ آن را در ذﻫﻦ ﻧﺪاﺷﺘﻪاﯾﺪ‪ .‬ﺑﺎ ‪ checklist‬ﻣﯽﺗﻮاﻧﯿﺪ ذﻫﻦ ﺧﻮد را ﻧﻈﻢ دﻫﯿﺪ‬ ‫و ﺗﻤﺎﻣﯽﻧﮑﺎت ﻣﻬﻢ را در ﻃﺮح ﮐﻨﺘﺮل ﮐﻨﯿﺪ‪:‬‬ ‫در اﯾﻦ ﺳﻨﺪ ﻟﯿﺴﺘﯽ از ﻣﻮارد ﻣﻬﻢ ﺑﺮاي ﮐﻨﺘﺮل ﺑﻪ ﺗﻔﮑﯿﮏ ﻣﻮﺿﻮع آورده ﺷﺪه اﺳﺖ‪:‬‬

‫ﻣﻮارد ﻣﺮﺑﻮط ﺑﻪ ﺑﻬﯿﻨﻪ ﺳﺎزي ﺳﺎﯾﺖ ﺑﺮاي ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ‬ ‫‪ -1‬آﯾﺎ ﺻﻔﺤﻪ ﺷﻤﺎ ﺣﺎوي اﻃﻼﻋﺎت ﻣﻨﺎﺳﺐ اﺳﺖ ؟‬ ‫ﯾﮑﯽ از ﻣﻮاردي ﮐﻪ ﺑﺎﯾﺪ ﻣﺪ ﻧﻈﺮ داﺷﺘﻪ ﺑﺎﺷﯿﺪ ﻣﺤﺘﻮاي ﺳﺎﯾﺖ ﺷﻤﺎﺳﺖ‪ .‬ﮔﺎﻫﺎ اﻓﺮاد ﻣﯽﺧﻮاﻫﻨﺪ در ﮔﻮﮔﻞ‬ ‫ﺑﺎﻻﺗﺮﯾﻦ رﺗﺒﻪ را داﺷﺘﻪ ﺑﺎﺷﻨﺪ وﻟﯽ ﺳﺎﯾﺖ آﻧﻬﺎ ﺣﺎوي ﻫﯿﭻ ﻣﺤﺘﻮاﯾﯽ ﻧﯿﺴﺖ‪ .‬ﻣﺤﺘﻮاي ﺑﺎ ﮐﯿﻔﯿﺖ ﺑﺮاي ﺳﺎﯾﺖ‬ ‫ﺧﻮد ﻓﺮاﻫﻢ ﮐﻨﯿﺪ‪.‬‬ ‫‪ -2‬آﯾﺎ ﮐﻠﻤﺎت ﮐﻠﯿﺪي ﻣﻨﺎﺳﺐ را ﺑﺮاي ﻣﺘﻦ ﺧﻮد اﻧﺘﺨﺎب ﮐﺮده اﯾﺪ ؟‬ ‫ﯾﺎﻓﺘﻦ ﮐﻠﻤﺎت ﮐﻠﯿﺪي ﻣﻨﺎﺳﺐ ﺑﺮاي ﻧﻮﺷﺘﻦ ﻣﻄﻠﺐ اﻫﻤﯿﺖ ﻓﺮاواﻧﯽ دارد‪ .‬ﮐﻠﻤﺎت ﮐﻠﯿﺪي ﻣﻨﺎﺳﺐ را ﻣﯽﺗﻮاﻧﯿﺪ ﺑﺎ‬ ‫اﺳﺘﻔﺎده از اﺑﺰارﻫﺎي ﻫﻢﭼﻮن ‪ adwords keyword tool‬اﻧﺘﺨﺎب ﮐﻨﯿﺪ‪.‬‬ ‫‪ -3‬آﯾﺎ در ﻫﻨﮕﺎم ﮐﺪ ﻧﻮﯾﺴﯽ ﺻﻔﺤﻪ از ﮐﺪﻧﻮﯾﺴﯽ ‪ semantic‬اﺳﺘﻔﺎده ﮐﺮده اﯾﺪ ؟‬ ‫در ﮐﺪﻧﻮﯾﺴﯽ ‪ HTML‬ﺑﺎﯾﺪ ﻫﻤﯿﺸﻪ ﺗﮓﻫﺎ را ﺑﻪ ﺷﮑﻞ درﺳﺖ ﺑﻪ ﮐﺎر ﺑﺒﺮﯾﺪ‪ .‬ﺗﯿﺘﺮﻫﺎ را داﺧﻞ ﺗﮓﻫﺎي ‪ H1‬ﺗﺎ‬ ‫‪ H6‬ﻗﺮار داده و ﻫﺮ ﺑﺨﺸﯽ را در ﺗﮓ ﻣﺮﺑﻮط ﺑﻪ ﺧﻮد ﻗﺮار دﻫﯿﺪ‪ .‬از اﯾﻦ ﻃﺮﯾﻖ ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ درك‬ ‫ﺑﻬﺘﺮي از ﻣﺤﺘﻮاي ﺻﻔﺤﻪ ﺧﻮاﻫﻨﺪ داﺷﺖ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪١٠۶‬‬

‫‪ -4‬آﯾﺎ ﻣﺤﺘﻮاي ﺻﻔﺤﺎت و ﺗﮑﻨﯿﮏﻫﺎﯾﯽ ﮐﻪ ﺑﻪ ﮐﺎر ﮔﺮﻓﺘﻪ اﯾﺪ‪ ،‬ﻣﻨﻄﻘﯽاﻧﺪ؟‬ ‫ﮔﺎﻫﺎً ﻃﺮاﺣﺎن ﺳﻌﯽ ﻣﯽ ﮐﻨﻨﺪ ﻣﻄﺎﻟﺒﯽ را در ﺻﻔﺤﻪ ﺑﮕﻨﺠﺎﻧﻨﺪ ﮐﻪ اﺻﻼ رﺑﻄﯽ ﺑﻪ ﻣﻮﺿﻮع اﺻﻠﯽ ﻣﻘﺎﻟﻪ ﻧﺪارد‪.‬‬ ‫ﺗﻨﻬﺎ ﻫﺪﻓﺸﺎن اﯾﻦ اﺳﺖ ﮐﻪ ﮐﻠﻤﺎت ﮐﻠﯿﺪي ﺧﺎص را در ﺻﻔﺤﻪ ﺟﺎﺳﺎزي ﮐﻨﻨﺪ‪ .‬و ﯾﺎ ﮐﻠﻤﺎت ﮐﻠﯿﺪي ﻏﯿﺮ ﻣﺮﺗﺒﻂ‬ ‫زﯾﺎدي را در ‪metatag‬ﻫﺎ ﻗﺮار ﻣﯽدﻫﻨﺪ‪ .‬ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ از ﺷﻤﺎ ﺑﺎﻫﻮشﺗﺮﻧﺪ! اﯾﻦ ﺗﺮﻓﻨﺪﻫﺎ ﻧﯿﺰ از‬ ‫ﺳﻮي آﻧﻬﺎ ﺷﻨﺎﺳﺎﯾﯽ ﻣﯽ ﺷﻮد و ﺳﺎﯾﺖ ﺷﻤﺎ ﺑﻪ ﺧﺎﻃﺮ ﺗﺨﻠﻒ ﺟﺮﯾﻤﻪ ﺧﻮاﻫﺪ ﺷﺪ و از ﻟﯿﺴﺖ ﺟﺴﺘﺠﻮ ﺣﺬف‬ ‫ﻣﯽﺷﻮﯾﺪ‪.‬‬ ‫‪ -5‬آﯾﺎ آدرس ﺻﻔﺤﻪ ﺷﻤﺎ ﮐﺎرﺑﺮ ﭘﺴﻨﺪ اﺳﺖ ؟‬ ‫ﯾﮑﯽ از ﻣﻮارد ﻣﻬﻢ اﯾﻦ اﺳﺖ ﮐﻪ ﺑﺎﯾﺪ آدرس ﺻﻔﺤﺎت را ﮐﺎرﺑﺮ ﭘﺴﻨﺪ ﺗﻨﻈﯿﻢ ﮐﻨﯿﺪ‪ .‬آدرسﻫﺎ ﺑﺎﯾﺪ ﺳﺎده و ﻗﺎﺑﻞ‬ ‫ﺣﻔﻆ ﮐﺮدن و ﻫﻤﭽﻨﯿﻦ ﮐﻮﺗﺎه ﺑﺎﺷﺪ‪ .‬از ﺑﻪ ﮐﺎر ﮔﯿﺮي آدرسﻫﺎي ﻃﻮﻻﻧﯽ و ﻣﻤﻠﻮ از ﭘﺎراﻣﺘﺮ ﭘﺮﻫﯿﺰ ﮐﻨﯿﺪ ؟‬ ‫‪ -6‬ﺗﯿﺘﺮ ﺻﻔﺤﻪ ﺷﻤﺎ ﺑﻪ درﺳﺘﯽ اﻧﺘﺨﺎب ﺷﺪه اﺳﺖ ؟‬ ‫ﺗﯿﺘﺮ ﺻﻔﺤﻪ ﮐﻪ در داﺧﻞ ﺗﮓ ‪ title‬ﻗﺮار ﻣﯽﮔﯿﺮد ﺑﺴﯿﺎر ﻣﻬﻢ اﺳﺖ‪ .‬ﻣﺘﻦ داﺧﻞ اﯾﻦ ﺗﮓ ﺑﺎﯾﺪ ﺑﻪ درﺳﺘﯽ‬ ‫اﻧﺘﺨﺎب ﺷﻮد زﯾﺮا ﺑﯿﺸﺘﺮي ﺗﺎﺛﯿﺮ را در ﻓﻬﺮﺳﺖ ﺷﺪن ﺻﻔﺤﻪ ﺷﻤﺎ در ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ دارد‪.‬‬ ‫‪ -7‬آﯾﺎ ﮐﻠﻤﺎت ﮐﻠﯿﺪي را داﺧﻞ ‪ keyword metatag‬ﻗﺮار داده اﯾﺪ ؟‬ ‫ﻗﺮار دادن ﮐﻠﻤﺎت ﮐﻠﯿﺪي داﺧﻞ ﻣﺘﺎﺗﮓ ‪ keyword‬از دﯾﺪ ﮔﻮﮔﻞ ارزش ﭼﻨﺪاﻧﯽ ﻧﺪارد و اﯾﻦ ﻣﻮﺗﻮر ﺟﺴﺘﺠﻮ‬ ‫اﻫﻤﯿﺘﯽ ﺑﻪ اﯾﻦ ﻣﺘﺎﺗﮓ ﻧﻤﯽدﻫﺪ وﻟﯽ ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮي دﯾﮕﺮ ﺑﻪ اﯾﻦ ﺑﺨﺶ ﺗﻮﺟﻪ ﻧﺸﺎن ﻣﯽدﻫﻨﺪ‪ .‬ﻣﺤﺘﻮاي‬ ‫اﯾﻦ ﻣﺘﺎﺗﮓ را ﮐﻮﺗﺎه و ﻣﺮﺗﺒﻂ ﺑﺎ ﻣﺤﺘﻮاي ﺻﻔﺤﻪ ﺗﻨﻈﯿﻢ ﮐﻨﯿﺪ‪ .‬از ﻗﺮار دادن ﯾﮏ ﻣﺘﺎﺗﮓ ﺛﺎﺑﺖ ﺑﺮاي ﻫﻤﻪ‬ ‫ﺻﻔﺤﺎت ﺑﻪ ﺷﺪت ﭘﺮﻫﯿﺰ ﮐﻨﯿﺪ‪.‬‬ ‫‪ -8‬آﯾﺎ ﺑﺮاي ﻣﻄﺎﻟﺐ ﺧﻮد ‪ description metatag‬در ﻧﻈﺮ ﮔﺮﻓﺘﻪ اﯾﺪ ؟‬ ‫اﯾﻦ ﻣﺘﺎﺗﮓ ﻧﯿﺰ در ﺑﺎﻻ رﻓﺘﻦ ﻣﻮﻗﻌﯿﺖ ﺳﺎﯾﺖ ﺷﻤﺎ در ﺻﻔﺤﻪ ﻧﺘﺎﯾﺞ ﺗﺎﺛﯿﺮ ﭼﻨﺪاﻧﯽ ﻧﺪارد و ﺗﻨﻬﺎ ﻣﺘﻦ داﺧﻞ اﯾﻦ‬ ‫ﻣﺘﺎﺗﮓ در ﺻﻔﺤﻪ ﻧﺘﺎﯾﺞ ﺑﻪ ﻋﻨﻮان ﺗﻮﺿﯿﺢ در زﯾﺮ ﻟﯿﻨﮏ ﺻﻔﺤﻪ ﺷﻤﺎ ﻗﺮار ﻣﯽﮔﯿﺮد‪ .‬اﮔﺮ اﯾﻦ ﻣﺘﻦ را ﺑﻪ‬ ‫درﺳﺘﯽ ﺗﻨﻈﯿﻢ ﮐﻨﯿﺪ‪ ،‬ﺷﺎﻧﺲ ﺑﯿﺸﺘﺮي دارﯾﺪ ﮐﻪ ﮐﺎرﺑﺮان ﺑﺮ روي ﻟﯿﻨﮏ ﺷﻤﺎ ﮐﻠﯿﮏ ﮐﻨﻨﺪ و وارد ﺳﺎﯾﺖ ﺷﻤﺎ‬ ‫ﺷﻮﻧﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪١٠٧‬‬

‫‪ -9‬آﯾﺎ ﮐﻠﻤﺎت ﮐﻠﯿﺪي را در آدرس ﺻﻔﺤﻪ ﻗﺮار داده اﯾﺪ ؟‬ ‫ﮐﻠﻤﺎت ﮐﻠﯿﺪي داﺧﻞ آدرس ﺻﻔﺤﻪ از دﯾﺪ ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ ﺑﺎ اﻫﻤﯿﺖ اﺳﺖ‪ .‬ﺳﻌﯽ ﮐﻨﯿﺪ ﮐﻠﻤﺎت ﮐﻠﯿﺪي ﻣﺘﻦ‬ ‫را داﺧﻞ آدرس ﺻﻔﺤﻪ ﻧﯿﺰ ﻗﺮار دﻫﯿﺪ‪ .‬اﻟﺒﺘﻪ ﺗﺎ ﺟﺎﯾﯽ ﮐﻪ اﻣﮑﺎن دارد از وارد ﮐﺮدن ﮐﻠﻤﺎت ﮐﻠﯿﺪي ﻓﺎرﺳﯽ در‬ ‫آدرس ﺻﻔﺤﻪ ﭘﺮﻫﯿﺰ ﮐﻨﯿﺪ زﯾﺮا اﯾﻦ آدرس ﺗﺒﺪﯾﻞ ﺑﻪ ﮐﺪ ﺷﺪه و آدرس ﺻﻔﺤﻪ ﺷﻤﺎ را ﺑﺴﯿﺎر ﻃﻮﻻﻧﯽ‬ ‫ﻣﯽﮐﻨﺪ‪.‬‬ ‫‪ -10‬آﯾﺎ ﮐﻠﻤﺎت ﮐﻠﯿﺪي ﻣﻮرد ﻧﻈﺮ را در ﻣﺘﻦ ﺻﻔﺤﻪ ﺗﮑﺮار ﮐﺮده اﯾﺪ ؟‬ ‫ﯾﮑﯽ از ﻣﻮارد ﻣﻬﻢ در ﺑﺎﻻ ﺑﺮدن ارزش ﯾﮏ ﺻﻔﺤﻪ ﺑﺮاي ﯾﮏ ﮐﻠﻤﻪ ﮐﻠﯿﺪي ﺧﺎص‪ ،‬ﺗﮑﺮار ﮐﺮدن آن ﮐﻠﻤﻪ در‬ ‫ﺻﻔﺤﻪ اﺳﺖ‪ .‬اﻟﺒﺘﻪ در ﺗﮑﺮار ﮐﻠﻤﻪ ﺑﺎﯾﺪ اﺣﺘﯿﺎط ﺑﻪ ﺧﺮج دﻫﯿﺪ و ﮐﻠﻤﻪ ﻣﻮرد ﻧﻈﺮ را ﺗﻨﻬﺎ ﭼﻨﺪ ﺑﺎر ﺗﮑﺮار ﮐﻨﯿﺪ‪.‬‬ ‫ﺗﮑﺮار ﺑﯿﺶ از ﺣﺪ ﯾﮏ ﮐﻠﻤﻪ از دﯾﺪ ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ ‪ spam‬ﺑﻪ ﺣﺴﺎب ﺧﻮاﻫﺪ آﻣﺪ‪.‬‬ ‫‪ -11‬آﯾﺎ ﺑﺨﺶ ‪ navigation‬ﺳﺎﯾﺖ ﺧﻮد را ﺑﻪ درﺳﺘﯽ ﻃﺮاﺣﯽ ﮐﺮده اﯾﺪ ؟‬ ‫ﺑﺨﺶ ‪ navigation‬اﻫﻤﯿﺖ ﺑﺴﯿﺎر زﯾﺎدي دارد‪ .‬ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ از ﻃﺮﯾﻖ اﯾﻦ ﺑﺨﺶ ﻣﯽﺗﻮاﻧﻨﺪ ﺻﻔﺤﺎت‬ ‫داﺧﻠﯽ ﺳﺎﯾﺖ ﺷﻤﺎ ﺑﯿﺎﺑﻨﺪ‪ .‬اﮔﺮ در ﻃﺮاﺣﯽ اﯾﻦ ﺑﺨﺶ از ‪ JavaScript‬اﺳﺘﻔﺎده ﮐﺮده ﺑﺎﺷﯿﺪ و اﯾﻦ اﺳﺘﻔﺎده ﺑﻪ‬ ‫ﺷﮑﻠﯽ ﺑﺎﺷﺪ ﮐﻪ در ﻧﺒﻮد ﺟﺎوا اﺳﮑﺮﯾﭙﺖ ﻧﺸﻮد از اﯾﻦ ﺑﺨﺶ اﺳﺘﻔﺎد ﮐﺮد‪ ،‬ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ در ﻓﻬﺮﺳﺖ‬ ‫ﮐﺮدن ﻣﺤﺘﻮاي ﺳﺎﯾﺖ ﺷﻤﺎ ﺑﺎ ﻣﺸﮑﻞ ﺟﺪي ﻣﻮاﺟﻪ ﺧﻮاﻫﻨﺪ ﺷﺪ‪ .‬اﯾﻦ ﺑﺨﺶ را ﺳﺎده و ﻣﺮﺗﺒﻂ ﻧﮕﺎه دارﯾﺪ‪.‬‬ ‫‪ -12‬آﯾﺎ ﺑﻪ ﻣﻄﺎﻟﺐ داﺧﻞ ﺳﺎﯾﺖ ﺧﻮد ﻟﯿﻨﮏ داده اﯾﺪ ؟‬ ‫ﯾﮑﯽ از ﻣﻮاردي ﮐﻪ ﺑﻪ ﻓﻬﺮﺳﺖ ﺷﺪن ﺳﺮﯾﻌﺘﺮ ﺳﺎﯾﺖ ﺷﻤﺎ ﮐﻤﮏ ﻣﯽﮐﻨﺪ‪ ،‬ﻟﯿﻨﮏ دادن از داﺧﻞ ﯾﮏ ﻣﻄﻠﺐ ﺑﻪ‬ ‫ﻣﻄﻠﺐ ﻣﺮﺗﺒﻂ دﯾﮕﺮ اﺳﺖ‪ .‬اﯾﻦ ﮐﺎر ﺑﻪ ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ ﮐﻤﮏ ﻣﯽﮐﻨﺪ ﺗﺎ ﻣﻄﺎﻟﺐ ﻣﺮﺗﺒﻂ ﺑﻪ ﻫﻢ را در ﺳﺎﯾﺖ‬ ‫ﺷﻤﺎ ﺑﻬﺘﺮ ﺑﯿﺎﺑﻨﺪ و ﺷﺎﻧﺲ ﺷﻤﺎ ﺑﺮاي ﻓﻬﺮﺳﺖ ﺷﺪن ﺻﻔﺤﻪ ﻣﻮرد ﻧﻈﺮﺗﺎن ﺑﺎﻻ ﻣﯽرود‪ .‬ﺳﻌﯽ ﮐﻨﯿﺪ ﺑﻪ ﻣﻄﺎﻟﺐ‬ ‫ﻣﺮﺗﺒﻂ در ﺳﺎﯾﺖ ﺧﻮد ﻟﯿﻨﮏ دﻫﯿﺪ‪.‬‬ ‫‪ -13‬آﯾﺎ ﻣﺘﻦ داﺧﻞ ﻟﯿﻨﮏﻫﺎي ﺷﻤﺎ ﻣﻨﺎﺳﺐ اﺳﺖ ؟‬ ‫ﻣﺘﻦ داﺧﻞ ﻟﯿﻨﮏﻫﺎي ﺷﻤﺎ ﺑﺎﯾﺪ ﻣﻔﻬﻮﻣﯽﺑﺎﺷﺪ‪ .‬از ﺑﻪ ﮐﺎرﺑﺮدن ﻋﺒﺎراﺗﯽ ﻫﻤﭽﻮن اﯾﻨﺠﺎ ﮐﻠﯿﮏ ﮐﻨﯿﺪ و ﯾﺎ اﯾﻦ ﻣﻘﺎﻟﻪ‬ ‫را ﺑﺨﻮاﻧﯿﺪ ﭘﺮﻫﯿﺰ ﮐﻨﯿﺪ و ﺑﻪ ﺟﺎي آن ﺗﯿﺘﺮ ﻣﻘﺎﻟﻪ را داﺧﻞ ﺗﮓ ﻟﯿﻨﮏ ﻗﺮار دﻫﯿﺪ‪ .‬ﺑﻪ اﯾﻦ ﺷﮑﻞ ﺑﻪ ﮔﻮﮔﻞ ﮐﻤﮏ‬ ‫ﻣﯽﮐﻨﯿﺪ ﺗﺎ درك ﺑﻬﺘﺮي از ﺻﻔﺤﻪ ﻣﻘﺼﺪ ﺑﻪ دﺳﺖ ﺑﯿﺎورد‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪١٠٨‬‬

‫‪ -14‬آﯾﺎ ﺗﺼﺎوﯾﺮ داﺧﻞ ﺻﻔﺤﻪ ﺷﻤﺎ ‪ alt‬دارد ؟‬ ‫ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ ﻧﻤﯽﺗﻮاﻧ ﻨﺪ ﻣﺘﻦ داﺧﻞ ﺗﺼﺎوﯾﺮ را ﺑﺒﯿﻨﻨﺪ و ﯾﺎ ﺗﺼﺎوﯾﺮ را درك ﮐﻨﻨﺪ‪ .‬اﯾﻦ ﻣﺘﻦ ‪ alt‬اﺳﺖ‬ ‫ﮐﻪ اﻃﻼﻋﺎت ﻣﺮﺑﻮط ﺑﻪ ﺗﺼﻮﯾﺮ را در اﺧﺘﯿﺎر ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ ﻗﺮار ﻣﯽدﻫﺪ‪ .‬ﻣﺘﻦ داﺧﻞ اﯾﻦ ﺧﺼﻮﺻﯿﺖ‬ ‫را ﺑﻪ درﺳﺘﯽ و ﺑﺎ دﻗﺖ ﺑﻨﻮﯾﺴﯿﺪ ﺗﺎ ﻣﻮﻗﻌﯿﺖ ﺑﻬﺘﺮي در ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ ﺑﻪ دﺳﺖ آورﯾﺪ‪.‬‬ ‫‪ -15‬آﯾﺎ ﺑﺮاي ﺳﺎﯾﺖ ﺧﻮد ﺳﺎﯾﺖﻣﭗ ﺳﺎﺧﺘﻪ اﯾﺪ ؟‬ ‫ﺳﺎﯾﺖﻣﭗ ﯾﺎ ﻫﻤﺎن ﻧﻘﺸﻪ ﺳﺎﯾﺖ ﺑﻪ ﮐﺎرﺑﺮان و ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ ﮐﻤﮏ ﻣﯽﮐﻨﺪ ﺗﺎ ﻣﻄﺎﻟﺐ ﻣﻮرد ﻧﻈﺮﺷﺎن را‬ ‫ﺑﻪ آﺳﺎﻧﯽ ﺑﯿﺎﺑﻨﺪ و ﺳﺎﺧﺘﺎر ﺳﺎﯾﺖ ﺷﻤﺎ را ﺑﻪ ﺷﮑﻞ ﺑﻬﺘﺮي درك ﮐﻨﻨﺪ‪ .‬از اﯾﻦ رو داﺷﺘﻦ اﯾﻦ ﺑﺨﺶ در ﺳﺎﯾﺖ‬ ‫اﻫﻤﯿﺖ وﯾﮋه اي دارد‪.‬‬ ‫‪ -16‬آﯾﺎ ﺑﺮاي ﺳﺎﯾﺖ ﺧﻮد ‪ XML Sitemap‬ﺳﺎﺧﺘﻪ اﯾﺪ؟‬ ‫اﯾﻦ ﻓﺎﯾﻞ ﯾﮏ ﻓﺎﯾﻞ ﻣﺘﻨﯽ ﺑﺎ ﻓﺮﻣﺖ ‪ XML‬اﺳﺖ ﮐﻪ آدرس ﮐﻠﯿﻪ ﺻﻔﺤﺎت ﺷﻤﺎ و ﻣﯿﺰان ﺑﻪ روزﺷﺪﻧﺸﺎن را‬ ‫ﺷﺎﻣﻞ ﻣﯽﺷﻮد‪ .‬اﯾﻦ ﭘﺮوﺗﻮﮐﻞ ﻧﺨﺴﺖ ﺗﻮﺳﻂ ﮔﻮﮔﻞ اراﺋﻪ ﺷﺪ و ﺳﭙﺲ ﺗﻮﺳﻂ ﯾﺎﻫﻮ و ﻣﺎﯾﮑﺮوﺳﺎﻓﺖ ﻧﯿﺰ‬ ‫اﺳﺘﻔﺎد ﺷﺪ‪ .‬اﺑﺰارﻫﺎي زﯾﺎدي وﺟﻮد دارﻧﺪ ﮐﻪ اﯾﻦ ﺑﺨﺶ را ﺑﺮاي ﺳﺎﯾﺖ ﺷﻤﺎ ﻣﯽﺳﺎزﻧﺪ‪ .‬ﭘﺲ از ﺳﺎﺧﺖ اﯾﻦ‬ ‫ﺑﺨﺶ ﺑﺎﯾﺪ آن را ﺑﻪ ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ ﻣﻌﺮﻓﯽ ﮐﻨﯿﺪ‪.‬‬ ‫‪ -17‬آﯾﺎ از ﻓﺎﯾﻞ ‪ robots.txt‬اﺳﺘﻔﺎده ﻣﯽﮐﻨﯿﺪ ؟‬ ‫اﯾﻦ ﻓﺎﯾﻞ ﺑﻪ ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ ﻣﯽﮔﻮﯾﺪ ﮐﻪ اﺟﺎزه دﺳﺘﺮﺳﯽ ﺑﻪ ﮐﺪام ﻗﺴﻤﺖ از ﺳﺎﯾﺖ را دارﻧﺪ‪ .‬ﺑﺎ اﺳﺘﻔﺎده‬ ‫از اﯾﻦ ﻓﺎﯾﻞ ﻣﯽ ﺗﻮاﻧﯿﺪ ﺑﺮاي ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ ﺗﻌﯿﯿﻦ ﮐﻨﯿﺪ ﮐﻪ ﺣﻖ دﺳﺘﺮﺳﯽ و ﻓﻬﺮﺳﺖ ﮐﺮدن ﭼﻪ ﻣﻄﺎﻟﺒﯽ‬ ‫را ﻧﺪارﻧﺪ‪ .‬ﺑﺎ اﺳﺘﻔﺎده از اﯾﻦ ﻓﺎﯾﻞ ﻣﯽﺗﻮاﻧﯿﺪ از ﻓﻬﺮﺳﺖﺷﺪن ﻣﻄﺎﻟﺐ ﺑﯽﻣﺤﺘﻮا و ﺑﺪون اﺳﺘﻔﺎده ﺧﻮد‬ ‫ﺟﻠﻮﮔﯿﺮي ﮐﻨﯿﺪ‪.‬‬ ‫‪ -18‬ﺗﻌﺪاد ﻟﯿﻨﮏﻫﺎي ﺳﺎﯾﺖ ﺧﻮد را زﯾﺮ ‪ 200‬ﻟﯿﻨﮏ ﻧﮕﻪ داﺷﺘﻪ اﯾﺪ ؟‬ ‫ﮔﻮﮔﻞ ﭘﯿﺸﻨﻬﺎد ﮐﺮده ﺑﻮد ﮐﻪ ﻟﯿﻨﮏﻫﺎي ﺧﺮوﺟﯽ از ﯾﮏ ﺻﻔﺤﻪ را زﯾﺮ ‪ 100‬ﻟﯿﻨﮏ ﻧﮕﻪ دارﯾﺪ وﻟﯽ اﮐﻨﻮن‬ ‫ﻣﯽﺗﻮان ﺗﺎ ‪ 200‬ﻟﯿﻨﮏ را در ﯾﮏ ﺻﻔﺤﻪ داﺷﺖ‪ .‬ﻣﻘﺪار ﺑﯿﺶ از اﯾﻦ ﻣﻤﮑﻦ اﺳﺖ ارزش ﺻﻔﺤﻪ ﺷﻤﺎ را ﮐﺎﻫﺶ‬ ‫دﻫﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪١٠٩‬‬

‫‪ -19‬ﺑﺮاي ﺳﺎﯾﺖ ﺧﻮد ﻟﯿﻨﮏ ﺟﻤﻊ آوري ﮐﺮده اﯾﺪ ؟‬ ‫ﻫﺮ ﭼﻘﺪر ﻟﯿﻨﮏﻫﺎﯾﯽ ﮐﻪ ﺑﻪ ﺳﺎﯾﺖ ﺷﻤﺎ داده ﻣﯽﺷﻮد ﺑﯿﺶﺗﺮ ﺑﺎﺷﺪ از دﯾﺪ ﮔﻮﮔﻞ ﺷﻤﺎ ﺳﺎﯾﺖ ارزشﻣﻨﺪﺗﺮي‬ ‫دارﯾﺪ‪ .‬ﺗﺎ ﺟﺎﯾﯽ ﮐﻪ ﻣﯽﺗﻮاﻧﯿﺪ ﺳﻌﯽ ﮐﻨﯿﺪ از ﺳﺎﯾﺖﻫﺎي دﯾﮕﺮ ﻟﯿﻨﮏ ﺑﻪ دﺳﺖ آورﯾﺪ و ﺑﻪ ﺳﺎﯾﺖ ﺧﻮد ﻟﯿﻨﮏ‬ ‫دﻫﯿﺪ‪ .‬اﯾﻨﮑﺎر ارزش ﺳﺎﯾﺖ ﺷﻤﺎ را ﻧﺰد ﮔﻮﮔﻞ اﻓﺰاﯾﺶ ﻣﯽدﻫﺪ‪.‬‬ ‫‪ -20‬ﻟﯿﻨﮏﻫﺎي ﺷﮑﺴﺘﻪ ﺳﺎﯾﺖ ﺧﻮد را ﮐﻨﺘﺮل ﮐﺮده اﯾﺪ ؟‬ ‫ﮔﺎﻫﺎ ﺑﻌﺪ از ﺗﻐﯿﯿﺮ آدرس ﺻﻔﺤﻪ ﺷﻤﺎ‪ ،‬ﻫﻤﭽﻨﺎن از دﯾﮕﺮ ﺳﺎﯾﺖﻫﺎ ﺑﻪ ﺻﻔﺤﻪ ﻗﺒﻠﯽ ﻟﯿﻨﮏ داده ﺷﺪه اﺳﺖ‪.‬‬ ‫اﯾﻦﮐﺎر ﺑﺎﻋﺚ درﯾﺎﻓﺖ ﯾﮏ ﭘﯿﻐﺎم ﺧﻄﺎي ‪ 404‬ﻣﯽﺷﻮد‪ .‬اﮔﺮ آدرس ﺻﻔﺤﻪاي را ﺗﻐﯿﯿﺮ ﻣﯽدﻫﯿﺪ‪ ،‬ﺣﺘﻤﺎ آدرس‬ ‫ﻗﺒﻠﯽ را ﺑﻪ آدرس ﺟﺪﯾﺪ ‪ redirect 301‬ﮐﻨﯿﺪ‪.‬‬

‫ﻣﻮارد ﻣﺮﺑﻮط ﺑﻪ ‪ performance‬ﺳﺎﯾﺖ‬ ‫‪ -1‬درﺧﻮاﺳﺖﻫﺎي ‪ HTTP‬را ﺗﺎ ﺣﺪ اﻣﮑﺎن ﮐﺎﻫﺶ داده اﯾﺪ ؟‬ ‫ﯾﮑﯽ از ﻣﻬﻢ ﺗﺮﯾﻦ ﻓﺎﮐﺘﻮرﻫﺎ ﺑﺮاي اﻓﺰاﯾﺶ ﺳﺮﻋﺖ ﺑﺎرﮔﺬاري ﺳﺎﯾﺖ‪ ،‬ﮐﺎﻫﺶ درﺧﻮاﺳﺖﻫﺎي ‪ HTTP‬اﺳﺖ‪ .‬ﻫﺮ‬ ‫ﭼﻘﺪر اﯾﻦ درﺧﻮاﺳﺖﻫﺎ ﮐﻤﺘﺮ ﺷﻮد ﺻﻔﺤﺎت ﺷﻤﺎ ﺑﺎ ﺳﺮﻋﺖ ﺑﯿﺸﺘﺮي ﺑﺎز ﺧﻮاﻫﺪ ﺷﺪ‪ .‬ﺑﺎ ﺗﮑﻨﯿﮏﻫﺎي ﻣﺨﺘﻠﻔﯽ‬ ‫از ﺟﻤﻠﻪ ‪ cache‬ﮐﺮدن ﻣﺤﺘﻮا و ﯾﺎ اﺳﺘﻔﺎده از ‪CSS Sprite‬ﻫﺎ ﻣﯽﺗﻮان ﺗﻌﺪاد اﯾﻦ درﺧﻮاﺳﺖﻫﺎ را ﮐﺎﻫﺶ‬ ‫داد‪.‬‬ ‫‪ -2‬از ‪CDN‬ﻫﺎ اﺳﺘﻔﺎده ﻣﯽﮐﻨﯿﺪ ؟‬ ‫درﺧﻮاﺳﺖ ﻓﺎﯾﻞﻫﺎ از ﻃﺮﯾﻖ اﯾﻨﺘﺮﻧﺖ ﻫﻤﯿﺸﻪ ﺑﺎ ﺗﺎﺧﯿﺮ ﻫﻤﺮاه اﺳﺖ‪ .‬اﮔﺮ ﻓﺎﯾﻞﻫﺎ را در ﺟﺎﯾﯽ ﻧﺰدﯾﮏ ﺑﻪ ﻣﺤﻞ‬ ‫زﻧﺪﮔﯽ ﮐﺎرﺑﺮ ﻗﺮار دﻫﯿﺪ‪ ،‬ﺳﺮﻋﺖ درﯾﺎﻓﺖ ﻓﺎﯾﻞ ﺑﺎﻻﺗﺮ ﻣﯽرود زﯾﺮا اﯾﻦ ﺗﺎﺧﯿﺮ ﮐﺎﻫﺶ ﻣﯽﯾﺎﺑﺪ‪ .‬ﺑﺎ اﺳﺘﻔﺎده از‬ ‫ﺳﺮوﯾﺲﻫﺎي ‪ CDN‬ﻣﯽﺗﻮاﻧﯿﺪ ﻓﺎﯾﻞﻫﺎ ﺧﻮد را در ﮐﺸﻮرﻫﺎي ﻣﺨﺘﻠﻒ و ﺑﺮ روي ﺳﺮورﻫﺎي ﻣﺨﺘﻠﻒ ﻗﺮار‬ ‫دﻫﯿﺪ و ﺑﻪ ﻧﺴﺒﺖ درﺧﻮاﺳﺖ ﮐﺎرﺑﺮ ﻫﻤﯿﺸﻪ ﻓﺎﯾﻞ از ﻧﺰدﯾﮏ ﺗﺮﯾﻦ ‪ Server‬ﺑﺮاي او ارﺳﺎل ﺧﻮاﻫﺪ ﺷﺪ‪.‬‬ ‫‪ -3‬ﺑﺮاي ﻓﺎﯾﻞﻫﺎي اﺳﺘﺎﺗﯿﮏ‪ expire header ،‬در ﻧﻈﺮ ﮔﺮﻓﺘﻪ اﯾﺪ ؟‬ ‫زﻣﺎﻧﯽ ﮐﻪ ﻣﺮورﮔﺮ ﻓﺎﯾﻠﯽ را درﯾﺎﻓﺖ ﻣﯽﮐﻨﺪ آن را درون ‪ cache‬ﺧﻮد ﻗﺮار ﻣﯽدﻫﺪ‪ .‬ﺣﺎل در ﻣﺮاﺟﻌﻪ ﺑﻌﺪي‬ ‫از ﺳﺎﯾﺖ ﻣﯽﭘﺮﺳﺪ ﮐﻪ آﯾﺎ ﻓﺎﯾﻠﯽ ﮐﻪ درون ‪ cache‬دارد ﺗﻐﯿﯿﺮ ﮐﺮده اﺳﺖ ﯾﺎ ﺧﯿﺮ‪ .‬اﯾﻦ ﭘﺮﺳﺶ و ﭘﺎﺳﺦ‬ ‫زﻣﺎنﺑﺮ اﺳﺖ وﻟﯽ اﮔﺮ ﺑﺮاي ﻓﺎﯾﻞ ‪ expire header‬ﻣﺸﺨﺺ ﮐﻨﯿﺪ دﯾﮕﺮ ﻣﺮورﮔﺮ از ‪ server‬ﺳﻮال ﻧﻤﯽﮐﻨﺪ‬ ‫و ﺑﻪ ﺗﺎرﯾﺦ اﻧﻘﻀﺎي ﻣﺸﺨﺺ ﺷﺪه ﺑﺮاي ﻓﺎﯾﻞ دﻗﺖ ﻣﯽﮐﻨﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪١١٠‬‬

‫‪ -4‬آﯾﺎ ﺻﻔﺤﺎت را ﺑﺎ ﻓﺮﻣﺖ ‪ Gzip‬ﻓﺸﺮده ﮐﺮده اﯾﺪ ؟‬ ‫در ﺻﻮرﺗﯽ ﮐﻪ ﺻﻔﺤﺎت را ﺑﺎ ﻓﺮﻣﺖ ‪ Gzip‬ﻓﺸﺮده ﮐﻨﯿﺪ‪ .‬ﺣﺠﻢ ﺻﻔﺤﺎت ﺗﻘﺮﯾﺒﺎ ‪ 70‬درﺻﺪ ﮐﺎﻫﺶ ﻣﯽﯾﺎﺑﺪ‪ .‬از‬ ‫اﯾﻦ ﻃﺮﯾﻖ ﮐﺎرﺑﺮ ﻓﺎﯾﻞ ﮐﻮﭼﮏﺗﺮي را درﯾﺎﻓﺖ ﻣﯽﮐﻨﺪ و زﻣﺎن ﺑﺎرﮔﺬاري ﺻﻔﺤﺎت ﮐﺎﻫﺶ ﻣﯽﯾﺎﺑﺪ از ﻃﺮﻓﯽ‬ ‫ﭘﻬﻨﺎي ﺑﺎﻧﺪ ﮐﻤﺘﺮي ﻧﯿﺰ از ﺳﻮي ‪ server‬اﺳﺘﻔﺎده ﻣﯽﺷﻮد‪ .‬ﻫﻤﯿﺸﻪ ﺳﻌﯽ ﮐﻨﯿﺪ ﺻﻔﺤﺎت را ‪ Gzip‬ﮐﻨﯿﺪ‪.‬‬ ‫‪DNS Lookup -5‬ﻫﺎ را ﮐﺎﻫﺶ دادهاﯾﺪ ؟‬ ‫ﻫﺮ زﻣﺎﻧﯽ ﮐﻪ ﻓﺎﯾﻠﯽ از ﯾﮏ ‪ server‬درﺧﻮاﺳﺖ ﻣﯽﺷﻮد‪ ،‬ﺳﯿﺴﺘﻢ ﺷﻤﺎ ﺑﺎﯾﺪ ﻧﺨﺴﺖ آدرس ‪ IP‬ﺳﺮور ﻣﺮﺑﻮط‬ ‫را ﭘﯿﺪا ﮐﻨﺪ‪ .‬اﯾﻦ ﻓﺮآﯾﻨﺪ زﻣﺎنﺑﺮ اﺳﺖ و ﻫﺮ ﭼﻘﺪر ﻓﺎﯾﻞﻫﺎي ﺷﻤﺎ ﺑﺮ روي ﺳﺮورﻫﺎي ﺑﯿﺸﺘﺮي ﭘﺮاﮐﻨﺪه ﺑﺎﺷﺪ‬ ‫زﻣﺎن ﺑﯿﺸﺘﺮي ﺑﺮاي ﯾﺎﻓﺘﻦ آدرس ﺳﺮورﻫﺎ ﺻﺮف ﻣﯽﺷﻮد‪ .‬ﻓﺎﯾﻞﻫﺎ را ﺗﻨﻬﺎ ﺑﺮ روي ﺳﺮورﻫﺎي ﻣﻌﺪودي‬ ‫ﻗﺮار دﻫﯿﺪ‪.‬‬ ‫‪ -6‬ﻓﺎﯾﻞﻫﺎي ‪ CSS‬را در ﺑﺎﻻي ﺳﻨﺪ ﻗﺮار داده اﯾﺪ ؟‬ ‫ﻓﺎﯾﻞﻫﺎي ‪ CSS‬را ﺑﺎﯾﺪ در ﺑﺎﻻي ﺳﻨﺪ ﺧﻮد ﻗﺮار دﻫﯿﺪ در ﻏﯿﺮ اﯾﻦ ﺻﻮرت ﻣﺮورﮔﺮﻫﺎ ﺗﺎ درﯾﺎﻓﺖ ﮐﺎﻣﻞ ﻓﺎﯾﻞ‬ ‫‪ CSS‬ﺻﻔﺤﻪ ﺷﻤﺎ را ﺑﻪ ﮐﺎرﺑﺮ ﻧﺸﺎن ﻧﻤﯽدﻫﻨﺪ‪ .‬اﯾﻦ ﻣﻮرد ﺑﺮاي ﮐﺎرﺑﺮان ﻣﻨﺎﺳﺐ ﻧﯿﺴﺖ‪ .‬ﺳﻌﯽ ﮐﻨﯿﺪ ﻫﻤﯿﺸﻪ‬ ‫ﻓﺎﯾﻞﻫﺎي ‪ CSS‬را در ﺑﺎﻻي ﺻﻔﺤﻪ ﻗﺮار دﻫﯿﺪ‪.‬‬ ‫‪ -7‬ﻓﺎﯾﻞﻫﺎي ‪ javascript‬را در ﭘﺎﯾﯿﻦ ﺳﻨﺪ ﻗﺮار داده اﯾﺪ ؟‬ ‫ﻣﺮورﮔﺮﻫﺎي وب ﺗﺎ زﻣﺎﻧﯽ ﮐﻪ ﻓﺎﯾﻞ ﺟﺎوا اﺳﮑﺮﯾﭙﺖ ﺑﻪ ﻃﻮر ﮐﺎﻣﻞ داﻧﻠﻮد ﻧﺸﺪه و اﺟﺮا ﻧﺸﺪه ﺑﺎﺷﺪ ﻧﻪ ﺻﻔﺤﻪ‬ ‫را ﺑﻪ ﮐﺎرﺑﺮ ﻧﺸﺎن ﻣﯽدﻫﻨﺪ و ﻧﻪ ﻓﺎﯾﻞ دﯾﮕﺮي را ﺑﻪ ﻃﻮر ﻫﻤﺰﻣﺎن از ‪ server‬درﯾﺎﻓﺖ ﻣﯽﮐﻨﻨﺪ از اﯾﻦ رو اﮔﺮ‬ ‫اﯾﻦ ﻓﺎﯾﻞﻫﺎ در ﺑﺎﻻي ﺳﻨﺪ ﻗﺮار ﺑﮕﯿﺮﻧﺪ‪ ،‬ﺻﻔﺤﻪ دﯾﺮﺗﺮ ﺑﺮاي ﮐﺎرﺑﺮ ﻧﻤﺎﯾﺶ داده ﻣﯽﺷﻮد‪ .‬اﯾﻦ ﻓﺎﯾﻞﻫﺎ را در‬ ‫زﯾﺮ ﺻﻔﺤﻪ ﺧﻮد ﻗﺮار دﻫﯿﺪ‪.‬‬ ‫‪ -8‬از ‪ CSS Expression‬ﻫﺎ اﺳﺘﻔﺎده ﻧﮑﻨﯿﺪ‬ ‫اﺳﺘﻔﺎده از ‪ Expression‬ﻫﺎ ﺑﺎﻋﺚ ﮐﻨﺪي ﺻﻔﺤﻪ ﻣﯽﺷﻮد زﯾﺮا ﺑﺎ ﻫﺮ ‪ event‬اي ﮐﻪ اﺗﻔﺎق ﻣﯽاﻓﺘﺪ اﯾﻦ‬ ‫دﺳﺘﻮرات ﺑﺎرﻫﺎ اﺟﺮا ﻣﯽﺷﻮﻧﺪ‪ .‬ﺑﻪ ﺟﺎي اﺳﺘﻔﺎده از اﯾﻦ ‪expression‬ﻫﺎ از ﺟﺎوا اﺳﮑﺮﯾﭙﺖ اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪ .‬ﺑﺎ‬ ‫اﺳﺘﻔﺎده ازﺟﺎوا اﺳﮑﺮﯾﭙﺖ ﻣﯽﺗﻮاﻧﯿﺪ اﺟﺮا ﺷﺪن ﮐﺪ را ﺑﻪ ﯾﮏ ‪ event‬ﺧﺎص ﻣﺤﺪود ﮐﻨﯿﺪ و از اﺟﺮا ﺷﺪن‬ ‫ﺑﯿﻬﻮده دﺳﺘﻮرات ﺟﻠﻮﮔﯿﺮي ﮐﻨﯿﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪١١١‬‬

‫‪ -9‬ﻓﺎﯾﻞﻫﺎي ‪ CSS‬و ‪ JS‬را در ﻓﺎﯾﻞﻫﺎي ‪ external‬ﻗﺮار داده اﯾﺪ ؟‬ ‫زﻣﺎﻧﯽ ﮐﻪ ﻓﺎﯾﻞﻫﺎي ‪ CSS‬و ‪ JS‬را در ﻓﺎﯾﻞﻫﺎي ﺧﺎرﺟﯽ ﻗﺮار دﻫﯿﺪ‪ .‬ﻣﺮورﮔﺮﻫﺎ ﻣﯽﺗﻮاﻧﻨﺪ ﻓﺎﯾﻞﻫﺎ را ‪cache‬‬ ‫ﮐﻨﻨﺪ‪ .‬از اﯾﻦ ﻃﺮﯾﻖ در ﻣﺮاﺟﻌﺎت ﺑﻌﺪي دﯾﮕﺮ اﯾﻦ ﻓﺎﯾﻞﻫﺎ درﯾﺎﻓﺖ ﻧﻤﯽﺷﻮﻧﺪ و زﻣﺎن ﺑﺎرﮔﺬاري ﺻﻔﺤﺎت‬ ‫ﺳﺮﯾﻊ ﺗﺮ ﻣﯽﺷﻮد‪ .‬اﻟﺒﺘﻪ اﺳﺘﻔﺎده از ﻓﺎﯾﻞﻫﺎي ‪ CSS‬و ‪ JS‬ﺑﻪ ﺷﮑﻞ ‪ inline‬ﺳﺮﯾﻊﺗﺮ اﺳﺖ ﭼﻮن دﯾﮕﺮ ﺑﺮاي‬ ‫درﯾﺎﻓﺖ ‪ inline‬دﺳﺘﻮرات ﻫﯿﭻ درﺧﻮاﺳﺖ ‪ HTTP‬اي ارﺳﺎل ﻧﻤﯽﺷﻮد وﻟﯽ اﮔﺮ دﺳﺘﻮرات ‪ inline‬اﺳﺘﻔﺎده‬ ‫ﺷﻮﻧﺪ ﺑﺎ ﻫﺮ ﺑﺎر ﺑﺎزدﯾﺪ از ﺻﻔﺤﻪ ﮐﻠﯿﻪ دﺳﺘﻮرات ﺑﺎﯾﺪ از اول درﯾﺎﻓﺖ ﺷﻮﻧﺪ ﭼﻮن دﺳﺘﻮرات ‪ inline‬ﺑﺨﺸﯽ‬ ‫از ﮐﺪ ﺻﻔﺤﻪ ﺑﻪ ﺣﺴﺎب ﻣﯽآﯾﻨﺪ‪.‬‬ ‫‪ -10‬ﻓﺎﯾﻞﻫﺎي ‪ javascript‬و ‪ CSS‬را ‪ minify‬ﮐﺮده اﯾﺪ ؟‬ ‫ﺑﺎ اﺳﺘﻔﺎده از ﺑﺮﺧﯽ اﺑﺰارﻫﺎي آﻧﻼﯾﻦ ﻣﯽﺗﻮاﻧﯿﺪ ﮐﻠﯿﻪ ﻓﺎﺻﻠﻪﻫﺎي ﺧﺎﻟﯽ ﻣﻮﺟﻮد در اﯾﻦ ﻓﺎﯾﻞﻫﺎ را ﺣﺬف ﮐﻨﯿﺪ‬ ‫ﮐﻪ ﺑﺮاي ‪ CSS‬اﻏﻠﺐ ﺗﺎ ‪ 15‬درﺻﺪ ﺻﺮﻓﻪ ﺟﻮﯾﯽ ﺳﺎﯾﺰ و ﺑﺮاي ﺟﺎوا اﺳﮑﺮﯾﭙﺖ ﻧﯿﺰ ﮔﺎﻫﺎ ﺗﺎ ‪ 30‬درﺻﺪ‬ ‫ﺻﺮﻓﻪﺟﻮﯾﯽ در اﻧﺪازه ﻓﺎﯾﻞ ﺣﺎﺻﻞ ﻣﯽﺷﻮد‪ .‬از اﯾﻦ ﻃﺮﯾﻖ ﻣﯽﺗﻮاﻧﯿﺪ ﺣﺠﻢ ﻓﺎﯾﻞﻫﺎ را ﺗﺎ ﺟﺎﯾﯽ ﮐﻪ اﻣﮑﺎن دارد‬ ‫ﮐﻮﭼﮏ ﮐﻨﯿﺪ‪.‬‬ ‫‪ -11‬آﯾﺎ ‪Etag‬ﻫﺎ را ﺗﻨﻈﯿﻢ ﮐﺮده اﯾﺪ ؟‬ ‫‪Etag‬ﻫﺎ ﺑﻪ ﻣﺮورﮔﺮﻫﺎ ﮐﻤﮏ ﻣﯽﮐﻨﻨﺪ ﮐﻪ ﻓﺎﯾﻞﻫﺎ را ﺷﻨﺎﺳﺎﯾﯽ ﮐﻨﻨﺪ و اﮔﺮ ﻓﺎﯾﻞ را در ‪ cache‬ﺧﻮد در اﺧﺘﯿﺎر‬ ‫دارﻧﺪ‪ ،‬دﯾﮕﺮ آن را از ‪ server‬درﺧﻮاﺳﺖ ﻧﮑﻨﻨﺪ‪ .‬اﻟﺒﺘﻪ ﻣﺸﮑﻞ اﯾﻨﺠﺎﺳﺖ ﮐﻪ اﯾﻦ ‪etag‬ﻫﺎ ﺑﺮ روي ﺳﺮورﻫﺎي‬ ‫ﻣﺨﺘﻠﻒ ﺑﻪ ﺷﮑﻠﯽ ﻣﺨﺘﻠﻒ ﻧﻤﺎﯾﺶ داده ﻣﯽﺷﻮﻧﺪ‪ .‬ﺑﺮاي ﺣﻞ اﯾﻦ ﻣﺸﮑﻞ ﻣﯽﺗﻮاﻧﯿﺪ ‪etag‬ﻫﺎ را ﺑﻪ ﻃﻮر ﮐﺎﻣﻞ‬ ‫ﺣﺬف ﮐﻨﯿﺪ و ﯾﺎ ﺑﺨﺶﻫﺎﯾﯽ ﮐﻪ ﺑﺎﻋﺚ ﺑﺮوز ﻣﺸﮑﻞ ﻣﯽﺷﻮﻧﺪ را از درون ‪etag‬ﻫﺎ ﺣﺬف ﮐﻨﯿﺪ‪.‬‬ ‫‪ -12‬ﺗﺼﺎوﯾﺮ را ﺑﻬﯿﻨﻪ ﮐﺮده اﯾﺪ ؟‬ ‫ﺗﺼﺎوﯾﺮ ﺗﻘﺮﯾﺒﺎً ‪ 50‬درﺻﺪ از ﺣﺠﻢ ﺻﻔﺤﺎت را ﺷﺎﻣﻞ ﻣﯽﺷﻮﻧﺪ‪ ،‬ﺑﺎ ﺑﻬﯿﻨﻪ و ﮐﻢﺣﺠﻢ ﮐﺮدن ﺗﺼﺎوﯾﺮ ﻣﯽﺗﻮاﻧﯿﺪ‬ ‫ﺣﺠﻢ ﺻﻔﺤﺎت را ﮐﺎﻫﺶ دﻫﯿﺪ‪ .‬اﺑﺰارﻫﺎي ﻣﺨﺘﻠﻔﯽ ﺑﺮاي ﺑﻬﯿﻨﻪ ﮐﺮدن ﺗﺼﺎوﯾﺮ وﺟﻮد دارد از ﻃﺮﻓﯽ ﺑﺎ داﺷﺘﻦ‬ ‫ﺷﻨﺎﺧﺖ از ﻓﺮﻣﺖﻫﺎي ﺗﺼﻮﯾﺮي ﻣﯽﺗﻮاﻧﯿﺪ ﻓﺮﻣﺖ ﻣﻨﺎﺳﺐ را ﺑﺮاي ﻫﺮ ﺗﺼﻮﯾﺮي اﻧﺘﺨﺎب ﮐﻨﯿﺪ ﺗﺎ ﮐﻢﺗﺮﯾﻦ‬ ‫ﺣﺠﻢ را ﺑﺮاي ﻓﺎﯾﻞ ﻣﻮرد ﻧﻈﺮ داﺷﺘﻪ ﺑﺎﺷﯿﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪١١٢‬‬

‫ﻣﻮارد ﻣﺮﺑﻮط ﺑﻪ اﺳﺘﺎﻧﺪاردﻫﺎي ﻃﺮاﺣﯽ‬ ‫‪ -1‬آﯾﺎ ‪ Doctype‬اﺳﺘﻔﺎده ﺷﺪه اﺳﺖ و آﯾﺎ اﯾﻦ دﺳﺘﻮر اوﻟﯿﻦ ﺧﻂ ﮐﺪ ﺷﻤﺎﺳﺖ ؟‬ ‫ﻫﻤﯿﺸﻪ ﺑﺎﯾﺪ ‪ doctype‬ﺳﻨﺪ ﺧﻮد را ﻣﺸﺨﺺ ﮐﻨﯿﺪ ﺗﺎ ﺻﻔﺤﻪ ﺷﻤﺎ ﺑﺮ اﺳﺎس اﺳﺘﺎﻧﺪاردﻫﺎ ﻧﻤﺎﯾﺶ داده ﺷﻮد‪.‬‬ ‫اﮔﺮ اﯾﻦ دﺳﺘﻮر را وارد ﻧﮑﻨﯿﺪ‪ ،‬ﺻﻔﺤﻪ ﺷﻤﺎ ﺑﺮ اﺳﺎس اﺳﺘﺎﻧﺪاردﻫﺎي ﻗﺪﯾﻤﯽ ﻧﻤﺎﯾﺶ داده ﻣﯽﺷﻮد و‬ ‫ﺑﺎگﻫﺎﯾﯽ در ﻃﺮح ﺑﺮوز ﺧﻮاﻫﺪ ﮐﺮد ﮐﻪ رﻓﻊﺷﺎن ﻫﻤﯿﺸﻪ دردﺳﺮ ﺳﺎز و وﻗﺖﮔﯿﺮ اﺳﺖ‪ .‬ﻋﻼوه ﺑﺮ اﯾﻦ اﮔﺮ‬ ‫اﯾﻦ ﺧﻂ اوﻟﯿﻦ ﺧﻂ ﮐﺪ ﺷﻤﺎ ﻧﺒﺎﺷﺪ ﻣﺮورﮔﺮ ‪ ie6‬اﯾﻦ اﯾﻦ دﺳﺘﻮر را ﮐﻼ ﻧﺎدﯾﺪه ﻣﯽﮔﯿﺮد و ﺻﻔﺤﻪ را ﺑﺮ‬ ‫اﺳﺎس اﺳﺘﺎﻧﺪاردﻫﺎي ﻗﺪﯾﻤﯽ ﺑﻪ ﻧﻤﺎﯾﺶ ﺧﻮاﻫﺪ ﮔﺬاﺷﺖ‪.‬‬ ‫‪ -2‬آﯾﺎ ﻃﺮح ﮐﺎﻣﻼ ‪ tabeless‬اﺳﺖ ؟‬ ‫‪ Table‬ﻫﺎ دﯾﮕﺮ ﺑﺮاي ﻃﺮاﺣﯽ ﮐﻠﯽ ﺻﻔﺤﻪ اﺳﺘﻔﺎده ﻧﻤﯽﺷﻮﻧﺪ و ﺳﺎلﻫﺎﺳﺖ ﮐﻪ اﺳﺘﻔﺎده از ‪ table‬ﺑﺮاي‬ ‫ﻃﺮاﺣﯽ ﮐﻠﯽ ﺻﻔﺤﻪ ﻣﻨﺴﻮخ ﺷﺪه اﺳﺖ‪ .‬از ‪ table‬ﻫﺎ ﺗﻨﻬﺎ زﻣﺎﻧﯽ اﺳﺘﻔﺎده ﮐﻨﯿﺪ ﮐﻪ ﻗﺼﺪ ﻧﻤﺎﯾﺶ اﻃﻼﻋﺎت‬ ‫ﺟﺪوﻟﯽ را دارﯾﺪ‪ .‬در ﺣﺎﻟﺖ ﮐﻠﯽ ﺑﺎﯾﺪ ﺑﺎ اﺳﺘﻔﺎده از ‪ div‬و اﺧﺘﺼﺎص ﮐﻼس و ‪ ID‬ﺑﻪ اﯾﻦ ‪div‬ﻫﺎ ﺻﻔﺤﺎت‬ ‫ﺧﻮد را دﺳﺘﻪﺑﻨﺪي و ﺳﺒﮏدﻫﯽ ﮐﻨﯿﺪ‪.‬‬ ‫‪ -3‬آﯾﺎ از ﻓﺎﯾﻞ ‪ reset.css‬اﺳﺘﻔﺎده ﺷﺪه اﺳﺖ ؟‬ ‫ﻣﺮورﮔﺮﻫﺎ ي ﻣﺨﺘﻠﻒ ﻣﻘﺎدﯾﺮ ﭘﯿﺶ ﻓﺮﺿﯽ ﺑﺮاي ﯾﮏ ﺳﺮي از ﺧﺼﻮﺻﯿﺎت ﻫﺮ ﺗﮓ در ﻧﻈﺮ ﻣﯽﮔﯿﺮﻧﺪ‪ .‬اﯾﻦ‬ ‫ﺗﻔﺎوتﻫﺎ در ﺷﯿﻮه ﻧﻤﺎﯾﺶ ﺑﺎﻋﺚ ﺑﺮوز ﻣﺸﮑﻼﺗﯽ ﻣﯽﺷﻮد‪ .‬ﺑﺎ اﺳﺘﻔﺎده از دﺳﺘﻮرات ‪ reset CSS‬ﻣﯽﺗﻮان‬ ‫اﺳﺘﺎﯾﻞ ﭘﯿﺶ ﻓﺮض در ﻧﻈﺮ ﮔﺮﻓﺘﻪ ﺷﺪه ﺑﺮاي ﻋﻨﺎﺻﺮ ﻣﺨﺘﻠﻒ ﺻﻔﺤﻪ را ﺣﺬف ﮐﺮد ﺗﺎ ﺑﺘﻮان ﺻﻔﺤﻪاي‬ ‫ﯾﮑﺴﺎن در ﻣﺮورﮔﺮﻫﺎ اﯾﺠﺎد ﮐﺮد‪ .‬ﻣﻌﺮوفﺗﺮﯾﻦ دﺳﺘﻮرات ‪ reset CSS‬را آﻗﺎي ‪ eric meyer‬ﺗﻬﯿﻪ ﮐﺮده‬ ‫اﺳﺖ‪.‬‬ ‫‪ -4‬آﯾﺎ ﻃﺮح در ﺳﺎﯾﺰ ﻣﻨﺎﺳﺐ ﺑﻪ ﺷﮑﻞ درﺳﺘﯽ دﯾﺪه ﻣﯽﺷﻮد ؟‬ ‫در ﺣﺎل ﺣﺎﺿﺮ ﮐﻮﭼﮏﺗﺮﯾﻦ ﺳﺎﯾﺰ ﻣﺎﻧﯿﺘﻮر را ‪ 1024‬در ‪ 768‬در ﻧﻈﺮ ﻣﯽﮔﯿﺮﻧﺪ‪ .‬ﺳﺎﯾﺖ ﺷﻤﺎ ﺑﺎﯾﺪ در اﯾﻦ‬ ‫ﺳﺎﯾﺰ ﺑﻪ درﺳﺘﯽ و ﺑﺪون ﻧﻤﺎﯾﺶ ‪ scroll‬در زﯾﺮ ﺻﻔﺤﻪ ﻧﻤﺎﯾﺶ داده ﺷﻮد‪ .‬از ﺳﻮﯾﯽ ﺑﺎﯾﺪ ﺷﺮاﯾﻄﯽ را ﻓﺮاﻫﻢ‬ ‫ﮐﻨﯿﺪ ﮐﻪ ﮐﺎرﺑﺮاﻧﯽ ﮐﻪ ﻣﺎﻧﯿﺘﻮرﻫﺎي ﺑﺰرﮔﺘﺮي در اﺧﺘﯿﺎر دارﻧﺪ ﻧﯿﺰ ﺑﺘﻮاﻧﻨﺪ ﺳﺎﯾﺖ ﺷﻤﺎ را ﺑﻪ درﺳﺘﯽ ﺑﺒﯿﻨﻨﺪ‪.‬‬ ‫‪ -5‬آﯾﺎ ﻣﺘﻦ ﺻﻔﺤﻪ را ﻣﯽﺗﻮان در اﯾﻨﺘﺮﻧﺖ اﮐﺴﭙﻠﻮرر ﺑﺰرﮔﺘﺮ ﮐﺮد ؟‬ ‫اﮔﺮ ﭼﻪ ﻣﺮورﮔﺮﻫﺎي ﺟﺪﯾﺪ از ﻗﺎﺑﻠﯿﺖ ‪ zoom‬ﮐﺮدن ﺑﺮ روي ﺻﻔﺤﻪ ﭘﺸﺘﯿﺒﺎﻧﯽ ﻣﯽﮐﻨﻨﺪ وﻟﯽ اﯾﻨﺘﺮﻧﺖ‬ ‫اﮐﺴﭙﻠﻮرر ﺑﻪ ﮐﺎرﺑﺮان اﺟﺎزه ﻧﻤﯽدﻫﺪ ﮐﻪ ﻣﺘﻦﻫﺎﯾﯽ ﮐﻪ ﺳﺎﯾﺰﺷﺎن ﺑﺎ ‪ pixel‬ﻣﺸﺨﺺ ﺷﺪه اﺳﺖ را ﺗﻐﯿﯿﺮ‬

‫‪www.ParsBook.org‬‬

‫‪١١٣‬‬

‫ﺳﺎﯾﺰ دﻫﻨﺪ‪ .‬ﺑﻬﺘﺮ اﺳﺖ ﺳﺎﯾﺰ ﻣﺘﻦ در ﺻﻔﺤﻪ ﺑﺎ درﺻﺪ و ﯾﺎ ﻣﻘﯿﺎس ‪ em‬ﻣﺸﺨﺺ ﺷﺪه ﺑﺎﺷﺪ‪ .‬در اﯾﻦ ﺣﺎﻟﺖ‬ ‫ﮐﺎرﺑﺮان ﻣﺮورﮔﺮ ‪ IE‬ﻫﻢ ﻣﯽﺗﻮاﻧﻨﺪ ﺳﺎﯾﺰ ﻣﺘﻦ را در ﺻﻮرت ﻟﺰوم اﻓﺰاﯾﺶ دﻫﻨﺪ‪.‬‬ ‫‪ -6‬آﯾﺎ ‪ CSS‬و ‪ HTML‬را ‪ validate‬ﮐﺮده اﯾﺪ ؟‬ ‫‪ Validate‬ﮐﺮدن ﻓﺎﯾﻞﻫﺎي ‪ CSS‬و ‪ HTML‬از ﻣﻠﺰوﻣﺎت ﻧﯿﺴﺖ وﻟﯽ اﮔﺮ ﻓﺎﯾﻞﻫﺎي ﺷﻤﺎ ‪ validate‬ﺷﻮﻧﺪ ﺑﺎ‬ ‫اﻃﻤﯿﻨﺎن ﺧﺎﻃﺮ ﺑﯿﺸﺘﺮي ﻣﯽﺗﻮاﻧﯿﺪ ﻣﺸﮑﻼت ﻃﺮح را ﺑﺮﻃﺮف ﮐﻨﯿﺪ‪ .‬ﮔﺎﻫﺎ ﻫﻤﯿﻦ ﻣﺸﮑﻼت ﻣﻮﺟﻮد در‬ ‫ﻓﺎﯾﻞﻫﺎﺳﺖ ﮐﻪ ﺑﺎﻋﺚ ﻣﯽﺷﻮد ﺗﺎ ﺻﻔﺤﻪ ﺷﻤﺎ ﺑﻪ ﺷﮑﻞ دﻟﺨﻮاه ﺑﻪ ﻧﻤﺎﯾﺶ در ﻧﯿﺎﯾﺪ‪ .‬ﺳﻌﯽ ﮐﻨﯿﺪ ﻫﻤﯿﺸﻪ‬ ‫ﺻﻔﺤﺎت را ‪ validate‬ﮐﻨﯿﺪ‪.‬‬ ‫‪ -7‬آﯾﺎ ﻃﺮح ﺷﻤﺎ در ﻣﺮورﮔﺮﻫﺎي ﻣﺨﺘﻠﻒ ﯾﮑﺴﺎن دﯾﺪه ﻣﯽﺷﻮد ؟‬ ‫ﻃﺮح ﺑﺎﯾﺪ در ﻣﺮورﮔﺮﻫﺎي ﻣﺨﺘﻠﻒ ﺗﻘﺮﯾﺒﺎ ﯾﮑﺴﺎن دﯾﺪه ﺷﻮد‪ .‬اﻟﺒﺘﻪ ﺷﺒﺎﻫﺖ ‪ 100‬درﺻﺪ ﻃﺮح در‬ ‫ﻣﺮورﮔﺮﻫﺎي ﻣﺨﺘﻠﻒ اﻟﺰاﻣﯽ ﻧﯿﺴﺖ وﻟﯽ ﺑﺎﯾﺪ ﺷﺮاﯾﻄﯽ را ﻓﺮاﻫﻢ ﮐﻨﯿﺪ ﮐﻪ ﻣﺤﺘﻮاي ﺳﺎﯾﺖ ﺷﻤﺎ در‬ ‫ﻣﺮورﮔﺮﻫﺎي ﻣﺨﺘﻠﻒ ﺑﻪ ﺷﮑﻞ درﺳﺖ ﻧﻤﺎﯾﺶ داده ﺷﻮد و ﺑﺮاي ﮐﺎرﺑﺮ ﻗﺎﺑﻞ اﺳﺘﻔﺎده ﺑﺎﺷﺪ‪ .‬اول ﻃﺮح را‬ ‫ﺑﺮاي ﻣﺮورﮔﺮﻫﺎي ﺟﺪﯾﺪ ﻃﺮاﺣﯽ ﮐﻨﯿﺪ و ﺳﭙﺲ در ﻣﺮورﮔﺮﻫﺎي ﻗﺪﯾﻤﯽﻫﻤﭽﻮن ‪ IE‬آن را ﺑﺒﯿﻨﯿﺪ و ﻣﺸﮑﻼﺗﺶ‬ ‫را رﻓﻊ ﮐﻨﯿﺪ‪.‬‬ ‫‪ -8‬اﮔﺮ از ﻗﺎﺑﻠﯿﺖ ‪ float‬در ‪ CSS‬اﺳﺘﻔﺎده ﮐﺮدهاﯾﺪ آﯾﺎ در ﻫﻤﻪ ﺟﺎ ﻋﻨﺎﺻﺮ ﺑﻌﺪ از ‪ float‬را ‪ clear‬ﮐﺮدهاﯾﺪ ؟‬ ‫زﻣﺎﻧﯽ ﮐﻪ ﻋﻨﺼﺮي را ‪ float‬ﻣﯽﮐﻨﯿﺪ‪ ،‬ﻋﻨﺎﺻﺮ ﺑﻌﺪ از ﻋﻨﺼﺮ ﻣﻮرد ﻧﻈﺮ دﯾﮕﺮ ﻋﻨﺼﺮ ‪ float‬ﺷﺪه را ﻧﺎدﯾﺪه‬ ‫ﻣﯽﮔﯿﺮﻧﺪ و ﺟﺎﯾﺶ را اﺷﻐﺎل ﻣﯽﮐﻨﻨﺪ‪ .‬ﺑﺎﯾﺪ ﺑﺎ اﺳﺘﻔﺎده از دﺳﺘﻮر ‪ clear‬از ﺑﺮوز ﻣﺸﮑﻞ ﺟﻠﻮﮔﯿﺮي ﮐﻨﯿﺪ‪ .‬اﻟﺒﺘﻪ‬ ‫‪ IE‬ﻧﺴﺨﻪﻫﺎي ‪ 6‬و ‪ 7‬ﻣﺸﮑﻼﺗﯽ دارﻧﺪ و ﻫﻤﯿﺸﻪ ‪box‬ﻫﺎ را ﺑﻪ ﺷﮑﻞ ‪ clear‬ﺷﺪه ﻧﻤﺎﯾﺶ ﻣﯽدﻫﻨﺪ وﻟﯽ‬ ‫ﺑﺎگﻫﺎﯾﯽ ﻧﯿﺰ وﺟﻮد دارد ﮐﻪ ﺑﺎ اﺧﺘﺼﺎص ‪ layout‬ﺑﻪ ﻋﻨﺼﺮ ﻣﻮرد ﻧﻈﺮ ﻣﯽﺗﻮان ﻣﺸﮑﻞ را ﺑﺮﻃﺮف ﮐﺮد‪.‬‬ ‫‪ -9‬آﯾﺎ در ‪ navigation‬از ﺟﺎوا اﺳﮑﺮﯾﭙﺖ اﺳﺘﻔﺎده ﮐﺮده اﯾﺪ ؟‬ ‫در ﺻﻮرﺗﯽ ﮐﻪ ﺑﺮاي ﺑﺨﺶ ‪ navigation‬از ﺟﺎوااﺳﮑﺮﯾﭙﺖ اﺳﺘﻔﺎده ﮐﻨﯿﺪ و اﯾﻦ ﺑﺨﺶ ﺑﺪون ﺣﻀﻮر ﺟﺎوا‬ ‫اﺳﮑﺮﯾﭙﺖ ﻓﻌﺎل ﻧﺒﺎﺷﺪ‪ ،‬ﺳﺎﯾﺖ ﺷﻤﺎ ﺑﺎ ﻣﺸﮑﻼت ﻣﺨﺘﻠﻔﯽ روﺑﺮو ﻣﯽﺷﻮد‪ .‬ﮐﺎرﺑﺮاﻧﯽ ﮐﻪ اﯾﻦ ﺑﺨﺶ را در‬ ‫ﻣﺮورﮔﺮ ﺧﻮد ﻓﻌﺎل ﻧﺪارﻧﺪ‪ ،‬ﻗﺎدر ﺑﻪ دﯾﺪن اﯾﻦ ﺑﺨﺶ ﻧﯿﺴﺘﻨﺪ و ﻣﻮﺗﻮرﻫﺎي ﺟﺴﺘﺠﻮ ﻧﯿﺰ ﻧﻤﯽﺗﻮاﻧﻨﺪ اﯾﻦ ﺑﺨﺶ‬ ‫از ﺳﺎﯾﺖ ﺷﻤﺎ را ﺑﺒﯿﻨﻨﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

‫‪١١۴‬‬

‫‪ -10‬آﯾﺎ ﺳﺎﯾﺖ ﺑﺪون وﺟﻮد ﺗﺼﻮﯾﺮ و ﯾﺎ در ﺻﻮرت ﻋﺪم وﺟﻮد ‪ CSS‬ﻗﺎﺑﻞ اﺳﺘﻔﺎده اﺳﺖ ؟‬ ‫ﺳﺎﯾﺖ ﺑﺎﯾﺪ ﺑﻪ ﺷﮑﻠﯽ ﻃﺮاﺣﯽ ﺷﻮد ﮐﻪ در ﺻﻮرت ‪ load‬ﻧﺸﺪن ﺗﺼﺎوﯾﺮ و ﯾﺎ ‪ CSS‬ﻣﺤﺘﻮاي ﻣﺘﻨﯽ ﺻﻔﺤﺎت‬ ‫ﮐﺎﻣﻼ ﻗﺎﺑﻞ اﺳﺘﻔﺎده ﺑﺎﺷﺪ‪ .‬ﺑﺎﯾﺪ ﺳﻌﯽ ﺷﻮد ﺑﺮاي ﻫﻤﻪ ﺑﺨﺶﻫﺎﯾﯽ ﮐﻪ ﺗﺼﺎوﯾﺮ ﭘﺲ زﻣﯿﻨﻪ در ﻧﻈﺮ ﮔﺮﻓﺘﻪ ﺷﺪه‪،‬‬ ‫رﻧﮓ ﭘﺲ زﻣﯿﻨﻪ ﺑﺎ رﻧﮕﯽ ﻣﺸﺎﺑﻪ ﺗﺼﻮﯾﺮ ﻧﯿﺰ در ﻧﻈﺮ ﮔﺮﻓﺘﻪ ﺷﻮد و در ﺿﻤﻦ ‪ direction‬ﺻﻔﺤﻪ را ﻧﯿﺰ ﺑﻬﺘﺮ‬ ‫اﺳﺖ داﺧﻞ ﻓﺎﯾﻞ ‪ HTML‬ﻣﺸﺨﺺ ﮐﻨﯿﻢ ﺗﺎ در ﺻﻮرت ﻋﺪم وﺟﻮد ‪ CSS‬ﻣﺤﺘﻮاي ﺻﻔﺤﻪ ﻗﺎﺑﻞ ﺧﻮاﻧﺪن ﺑﺎﺷﺪ‪.‬‬

‫‪www.ParsBook.org‬‬

١١۵ :‫ﻓﻬﺮﺳﺖ ﻣﻨﺎﺑﻊ ﻣﺎﺧﺬ‬ 

Web Standards designing with web standards web standard solutions



Usability dont make me think web form design filling the blanks



Principle of Design principles of beautiful web design sexy web design



CSS CSS mastery pro CSS and HTML design patterns



Performance high performance websites even faster websites



Mobile Design programming the mobile web



SEO the art of SEO Seo warrior

WebSite: http://VahidGhorbani.NET Email: VahidGhorbani@hotmail.Com

www.ParsBook.org