‫ﺑﺮﻧﺎﻣﻪﺳﺎزی وب‬
‫ﻧﯿﻢﺳﺎل اول ‪٩٣-٩٢‬‬
‫داﻧﺸ ﺪهی ﻣﻬﻨﺪﺳ ﮐﺎﻣﭙﯿﻮﺗﺮ‬
‫ﻣﺪرس‪ :‬ﺣﻤﯿﺪ ﺿﺮاﺑ زاده‬
‫ﺗﻤﺮﯾﻦ ﺳﺮی اول‬
‫ﻣﻬﻠﺖ ارﺳﺎل‪ ٢١ :‬ﻣﻬﺮﻣﺎه‬
‫ﺑﺨﺶ اول‪ .‬ﻃﺮاﺣ ﺻﻔﺤﻪ‬
‫در اﯾﻦ ﺗﻤﺮﯾﻦ ﻗﺼﺪ دارﯾﻢ ﺑﺮای ﻧﻤﺎﯾﺶ اﻃﻼﻋﺎت رزوﻣﻪ ﯾ‬
‫ﻗﺎﻟﺐﺑﻨﺪی ﻣﺸﺎﺑﻪ ﺗﺼﻮﯾﺮ زﯾﺮ ﻃﺮاﺣ ﮐﻨﯿﺪ‪.‬‬
‫ﺳﺎﯾﺖ ﻃﺮاﺣ ﮐﻨﯿﻢ‪ .‬در اﯾﻦ ﺑﺨﺶ ﺑﺎﯾﺪ ﯾ‬
‫ﺷ ﻞ ‪ :١‬ﻗﺎﻟﺐ اوﻟﯿﻪی ﺳﺎﯾﺖ رزوﻣﻪ‬
‫وارد ﮐﺮدن اﻃﻼﻋﺎت ﻣﻌﺘﺒﺮ در ﻗﺴﻤﺖﻫﺎی ﻣﺸﺨﺺﺷﺪه اﺟﺒﺎری ﻧﯿﺴﺖ‪ ،‬وﻟ ﻣ ﺗﻮاﻧﺪ ﻣﻔﯿﺪ ﺑﺎﺷﺪ‪.‬‬
‫‪١‬‬
‫ﺻﻔﺤﻪ ﺑﺎ‬
‫ﺑﺨﺶ دوم‪ .‬اﻓﺰودن ﺟﺰﯾﯿﺎت‬
‫در اﯾﻦ ﺑﺨﺶ ﻇﺎﻫﺮ ﻗﺎﻟﺐ را ﺑﺎﯾﺪ ﻧﻬﺎﯾ ﮐﻨﯿﺪ‪ .‬ﻣﻮارد زﯾﺮ را در ﺻﻔﺤﻪ ﻟﺤﺎظ ﮐﻨﯿﺪ‪:‬‬
‫‪ .١‬ﺑﺮای ﻣﺸﺨﺺ ﮐﺮدن ﻫﺮ ﻗﺴﻤﺖ از ﺗ ﻫﺎی ﻣﻨﺎﺳﺐ ﻣﻮﺟﻮد در ‪ HTML5‬ﻣﺎﻧﻨﺪ ‪،section ،header ،article‬‬
‫و ‪ figure‬اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪.‬‬
‫‪ .٢‬ﺑﺎ ﮐﻤ‬
‫ﮔﺮﻓﺘﻦ از ‪ Google Webfonts‬ﯾ‬
‫ﻓﻮﻧﺖ ﻣﻨﺎﺳﺐ را ﺑﺮای ﺻﻔﺤﻪ ﺗﻌﯿﯿﻦ ﮐﻨﯿﺪ‪.‬‬
‫‪ .٣‬ﺟﺪول ﻣﻮﺟﻮد در ﺑﺨﺶ ‪ Skills‬را ﻃﻮری ﻧﻤﺎﯾﺶ دﻫﯿﺪ ﮐﻪ ﺳﻄﺮ اول آن ﻃﻮﺳ ﺗﯿﺮه‪ ،‬ﺳﻄﺮﻫﺎی زوج ﺳﻔﯿﺪ‪ ،‬و‬
‫ﺳﻄﺮﻫﺎی ﻓﺮد ﻃﻮﺳ روﺷﻦ ﺑﺎﺷﺪ‪ .‬ﻫﻤﭽﻨﯿﻦ‪ ،‬ﻫﻨ ﺎم ﻗﺮار ﮔﺮﻓﺘﻦ ﻣﻮس روی ﻫﺮ ﺳﻄﺮ ﺟﺪول‪ ،‬ﺑﺎﯾﺪ رﻧ ﺳﻄﺮ‬
‫ﻣﻘﺪاری ﺗﯿﺮهﺗﺮ ﺷﻮد‪.‬‬
‫‪ .۴‬ﻋﻼﻣﺖ ﻧﺸﺎن داده ﺷﺪه ﮐﻨﺎر ﻣﻮارد ﻟﯿﺴﺖ را ﺑﻪ ﺷ ﻞ ﻣﺮﺑﻊ ﺗﻐﯿﯿﺮ دﻫﯿﺪ‪.‬‬
‫‪ .۵‬رﻧ‬
‫ﻟﯿﻨ ﻫﺎی ﺻﻔﺤﻪ را ﺑﻪ ﻧﺎرﻧﺠ ﺗﻐﯿﯿﺮ دﻫﯿﺪ و زﯾﺮ آنﻫﺎ ﺑﻪ ﺟﺎی ﺧﻂ‪ ،‬ﺧﻂﭼﯿﻦ ﻧﺎرﻧﺠ ﻧﺸﺎن دﻫﯿﺪ‪.‬‬
‫‪ .۶‬ﭘﺎراﮔﺮاف اول ﺳﺎﯾﺖ را ﮐﻪ ﻣﺮﺑﻮط ﺑﻪ ﺗﻮﺿﯿﺤﺎت ﮐﻠ در ﻣﻮرد ﺷﺨﺺ ﻫﺴﺖ‪ ،‬را ﻃﻮری ﺗﻐﯿﯿﺮ دﻫﯿﺪ ﮐﻪ ﺧﻂ‬
‫اول آن ﻣﺎﻧﻨﺪ ﯾ ﭘﺎراﮔﺮاف درﺳﺖ ﮐﻤ ﺟﻠﻮﺗﺮ ﺑﺎﺷﺪ‪.‬‬
‫‪ .٧‬ﭘﺲزﻣﯿﻨﻪ ﻗﺎب اﺻﻠ ﻣﺤﺘﻮا را ﺑﺎ ﮐﻤ‬
‫زﯾﺮ ﮐﻨﯿﺪ‪:‬‬
‫اﻣ ﺎﻧﺎت ‪ CSS3‬ﺗﺒﺪﯾﻞ ﺑﻪ ﯾ‬
‫‪ Linear Gradient‬ﻋﻤﻮدی ﺑﻪ ﺷ ﻞ‬
‫‪ .٨‬ﺑﺮای ﻫﺮ ﮐﺪام از ﻣﻮارد ﻗﺴﻤﺖﻫﺎی رزوﻣﻪ‪ ،‬اﻃﻼﻋﺎت ﺑﯿﺸﺘﺮی را ﺑﺎ ﮐﻤ‬
‫‪ Attributes‬ﺗﻌﯿﯿﻦ ﮐﻨﯿﺪ‪ .‬ﺑﺎ ﮐﻤ ﺷﺒﻪﻋﻨﺎﺻﺮ و ﺷﺒﻪﮐﻼسﻫﺎی ‪ CSS‬ﺑﺎ ﮐﻠﯿ‬
‫اﯾﻦ اﻃﻼﻋﺎت اﺿﺎﻓﻪ را در ﺧﻂ زﯾﺮ ﻫﺮ ﻣﻮرد ﻧﻤﺎﯾﺶ دﻫﯿﺪ‪.‬‬
‫‪٢‬‬
‫‪HTML5 Custom Data‬‬
‫ﺑﺮ روی ﺳﺮآﯾﻨﺪ ﻫﺮ ﺑﺨﺶ‬
‫ﺑﺨﺶ ﺳﻮم‪ .‬ﺑﻪ ﺳﻮی ﻃﺮاﺣ‬
‫‪Responsive‬‬
‫در اﯾﻦ ﺑﺨﺶ ﺑﺎﯾﺪ ﻃﺮاﺣ ﺳﺎﯾﺖ را ﺑﻪ ﺷ ﻠ ﺗﻐﯿﯿﺮ دﻫﯿﺪ ﮐﻪ ﺑﻪ درﺳﺘ در‬
‫ﻧﻤﺎﯾﺸ ﺮﻫﺎی ﻣﺨﺘﻠﻒ دﯾﺪه ﺷﻮد‪ .‬ﻗﺎﻟﺒ ﮐﻪ ﺗﺎ ﮐﻨﻮن ﻃﺮاﺣ ﮐﺮدﯾﺪ ﺑﺮای‬
‫ﻧﻤﺎﯾﺸ ﺮﻫﺎی ﺑﺰرگ ﻣﺎﻧﻨﺪ ﻟﭗﺗﺎپ ﻣﻨﺎﺳﺐ اﺳﺖ‪.‬‬
‫ﺑﺎ ﮐﻤ ﮔﺮﻓﺘﻦ از ‪ CSS3 Media Queries‬ﻗﺎﻟﺐ را ﺑﺮای ﻧﻤﺎﯾﺸ ﺮﻫﺎی‬
‫ﮐﻮﭼ ﺗﺮ ﺗﻐﯿﯿﺮ دﻫﯿﺪ‪.‬‬
‫در ﮔﺎم اول‪ ،‬ﺑﺮای ﻧﻤﺎﯾﺸ ﺮﻫﺎی ﮐﻮﭼ ﺗﺮ از ﻟﭗﺗﺎپ ﻣﺎﻧﻨﺪ ﺗﺒﻠﺖﻫﺎ ﻗﺎﻟﺐ‬
‫را ﻣﻄﺎﺑﻖ ﺷ ﻞ ﺗﻐﯿﯿﺮ دﻫﯿﺪ‪.‬‬
‫در ﮔﺎم ﺑﻌﺪی‪ ،‬ﻗﺎﻟﺐ را ﺑﺮای ﺻﻔﺤﺎت ﮐﻮﭼ ﺗﺮ از ﺗﺒﻠﺖ‪ ،‬ﻣﺎﻧﻨﺪ‬
‫ﮔﻮﺷ ﻫﺎی ﻣﻮﺑﺎﯾﻞ ﻣﻄﺎﺑﻖ ﺷ ﻞ ‪ ٢‬ﺗﻐﯿﯿﺮ دﻫﯿﺪ‪.‬‬
‫ﻣﺤﺪودهی ﻋﺮض ﻫﺮ ﮐﺪام از اﯾﻦ ﻗﺎﻟﺐﻫﺎ واﺑﺴﺘﻪ ﺑﻪ ﻃﺮاﺣ ﺧﻮدﺗﺎن اﺳﺖ‪.‬‬
‫ﺑﺎ ﺑﺮرﺳ ﻃﺮح ﻧﻬﺎﯾ ﺧﻮد‪ ،‬در ﻣﻮرد ﻣﺮز ﺗﻐﯿﯿﺮ از ﯾ ﻗﺎﻟﺐ ﺑﻪ ﻗﺎﻟﺐ دﯾ ﺮ‬
‫ﺗﺼﻤﯿﻢ ﺑ ﯿﺮﯾﺪ‪.‬‬
‫ﺷ ﻞ ‪ :٢‬ﻗﺎﻟﺐ ﻣﻨﺎﺳﺐ ﺑﺮای ﮔﻮﺷ ﻫﺎی‬
‫ﻣﻮﺑﺎﯾﻞ‬
‫ﺷ ﻞ ‪ :٣‬ﻗﺎﻟﺐ ﻣﻨﺎﺳﺐ ﺑﺮای ﺗﺒﻠﺖﻫﺎ‬
‫‪٣‬‬
‫ﺑﺨﺶ ﭼﻬﺎرم‪ .‬اﻃﻼﻋﺎت ﺗﻤﺎس‬
‫در اﯾﻦ ﺑﺨﺶ ﻣ ﺧﻮاﻫﯿﻢ ﺑﺎ ﮐﻠﯿ ﮐﺮدن ﺑﺮ روی ﻟﯿﻨ زﯾﺮ ﻋ ﺲ ﺷﺨﺺ‪ ،‬اﻃﻼﻋﺎت ﺗﻤﺎس را ﺑﺎ ﮐﻤ اﻧﯿﻤﯿﺸﻦﻫﺎی‬
‫‪ CSS‬ﻧﺸﺎن دﻫﯿﻢ‪ .‬ﺑﺮای اﻧﺠﺎم اﯾﻨ ﺎر ﺑﺎﯾﺪ از ‪ CSS 3D Transform‬اﺳﺘﻔﺎده ﮐﻨﯿﺪ‪ .‬ﻣﺮاﺣﻞ زﯾﺮ را ﺑﺮای اﯾﺠﺎد اﯾﻦ‬
‫اﻧﯿﻤﯿﺸﻦ دﻧﺒﺎل ﮐﻨﯿﺪ‪:‬‬
‫‪ .١‬ﺑﺎ ﮐﻤ‬
‫‪ .٢‬ﯾ‬
‫ﺗ‬
‫ﮔﺮﻓﺘﻦ از ﺧﺼﻮﺻﯿﺖ ‪ perspective‬در ‪ CSS3‬ﻋﻤﻖ ﺻﻔﺤﻪ را ﺣﺪود ‪ ۴٠٠‬ﭘﯿ ﺴﻞ ﻣﺸﺨﺺ ﮐﻨﯿﺪ‪.‬‬
‫ﺣﺎوی اﻃﻼﻋﺎت ﺗﻤﺎس ﺗﻌﺮﯾﻒ ﮐﻨﯿﺪ و آن را ‪ ١٨٠‬درﺟﻪ ﺣﻮل ﻣﺤﻮر ‪ Y‬ﺑﭽﺮﺧﺎﻧﯿﺪ‪.‬‬
‫‪ .٣‬ﻧﻤﺎﯾﺶ ﭘﺸﺖ ﺻﻔﺤﺎت ‪ ١‬را ﻏﯿﺮﻓﻌﺎل ﮐﻨﯿﺪ‪ ،‬ﻃﻮری ﮐﻪ اﻃﻼﻋﺎت ﺗﻤﺎس ﻣﺸﺨﺺ ﻧﺒﺎﺷﺪ‪.‬‬
‫‪ .۴‬ﺑﺎ ﮐﻤ ﺷﺒﻪﮐﻼسﻫﺎ ﮐﺎری ﮐﻨﯿﺪ ﮐﻪ ﺑﺎ ﮐﻠﯿ ﺑﺮ روی ﻟﯿﻨ زﯾﺮ ﻋ ﺲ‪ ،‬ﻫﻢ ﻋ ﺲ و ﻫﻢ اﻃﻼﻋﺎت ﺗﻤﺎس‬
‫‪ ١٨٠‬درﺟﻪ ﺑﭽﺮﺧﻨﺪ ﮐﻪ در ﻧﺘﯿﺠﻪ اﻃﻼﻋﺎت ﺗﻤﺎس دﯾﺪه ﺷﻮد‪ .‬ﻫﻤﭽﻨﯿﻦ ﻟﯿﻨ در زﯾﺮ اﻃﻼﻋﺎت ﺗﻤﺎس ﺑﺮای‬
‫ﭼﺮﺧﺶ دوﺑﺎره ﻗﺮار دﻫﯿﺪ‪.‬‬
‫‪ .۵‬ﺧﺼﻮﺻﯿﺖ اﻧﯿﻤﯿﺸﻦ را ﺑﺮای اﯾﻦ ﺗ ﻫﺎ ﻃﻮری ﺗﻌﯿﯿﻦ ﮐﻨﯿﺪ ﮐﻪ ﭼﺮﺧﺶ ‪ ٢‬ﺛﺎﻧﯿﻪ ﻃﻮل ﺑ ﺸﺪ‪.‬‬
‫در ﺷ ﻞ زﯾﺮ ﻧﻤﻮﻧﻪای از اﻃﻼﻋﺎت ﺗﻤﺎس را ﻣ ﺗﻮاﻧﯿﺪ ﺑﺒﯿﻨﯿﺪ‪.‬‬
‫‪Backface Visiblity١‬‬
‫‪۴‬‬
‫ﻧ ﺎت ﻧﻬﺎﯾ‬
‫• در اﯾﻦ ﺗﻤﺮﯾﻦ ﻧﺒﺎﯾﺪ از ﻫﯿﭻﮔﻮﻧﻪ ﮐﺪ ﺟﺎوااﺳ ﺮﯾﭙﺘ اﺳﺘﻔﺎده ﮐﻨﯿﺪ و ﺗﻤﺎﻣ ﺑﺨﺶﻫﺎی ﺗﻤﺮﯾﻦ را ﺑﺎﯾﺪ ﺑﺎ ﮐﻤ‬
‫‪ HTML‬و ‪ CSS‬اﻧﺠﺎم دﻫﯿﺪ‪.‬‬
‫• ﺻﻔﺤﻪای ﮐﻪ ﻃﺮاﺣ ﻣ ﮐﻨﯿﺪ ﺑﺎﯾﺪ ﺑﻪ درﺳﺘ در ﻣﺮورﮔﺮ ﮐﺮوم ﻗﺎﺑﻞ ﻧﻤﺎﯾﺶ ﺑﺎﺷﺪ‪ .‬ﭘﺸﺘﯿﺒﺎﻧ از ﻣﺮورﮔﺮﻫﺎی‬
‫دﯾ ﺮ اﺧﺘﯿﺎری اﺳﺖ‪.‬‬
‫• ﺻﻔﺤﻪی ﺧﻮد را ﺗﻮﺳﻂ ‪ validator.w3.org‬ارزﯾﺎﺑ و ﺧﻄﺎﻫﺎی اﺣﺘﻤﺎﻟ را رﻓﻊ ﻧﻤﺎﯾﯿﺪ‪.‬‬
‫• از ﺑﺎﻻ آوردن ﺳﺎﯾﺖ ﺧﻮد ﺑﺮ روی ﻫﺮ ﮔﻮﻧﻪ آدرس ﻋﻤﻮﻣ ﺗﺎ ﻗﺒﻞ از ﻣﻮﻋﺪ ﺗﺤﻮﯾﻞ ﺗﻤﺮﯾﻦ ﺧﻮدداری ﮐﻨﯿﺪ‪.‬‬
‫• ﺳﻮاﻻت ﺧﻮد را در ﺳﺎﯾﺖ ﭘﯿﺎﺗﺰا ﻣﻄﺮح ﮐﻨﯿﺪ‪.‬‬
‫‪۵‬‬