‫اﻟﺪﻟﻴﻞ اﻟﺸﺎﻣﻞ‬

‫ﻧﻮر ﺣﻤﺼﻲ‬
‫ﻟﺘﻌﻠﻢ ﻟﻐﺎت ﺗﻄﻮﻳﺮ اﻟﻮﻳﺐ‬
Personal:
nourhomsi.com

<2021/>
youtube.com/nourhomsi
fb.com/drnourhomsi
instagram.com/drnourhomsi

First Designer:
1designer.org
fb.com/groups/1designer
fb.com/1designerworld
 ‫‪ .1‬ﻣﺎ ﻫﻮ ﻫﺬا اﻟﺪﻟﻴﻞ‬
‫ﻫﺬا اﻟﺪﻟﻴﻞ ﻫﻮ ﺧﺎرﻃﺔ ﻃﺮﻳﻖ ﻟﺘﻌﻠﻢ ﻟﻐﺎت ﺗﻄﻮﻳﺮ اﻟﻮﻳﺐ اﺑﺘﺪاء ﻣﻦ اﻟﻌﺎم ‪ 2021‬وﻳﺘﻀﻤﻦ‬
‫اﻟﻠﻐﺎت واﻟﺘﻜﻨﻮﻟﻮﺟﻴﺎت اﻟﻤﺨﺘﻠﻔﺔ ﺳﻮاء اﻟﻤﻮﺟﻮدة‬
‫أﺻﻼً أو اﻟﻠﻐﺎت اﻟﺘﻲ ﻇﻬﺮت ﺣﺪﻳﺜ ًﺎ واﻟﺘﻲ ﻳﺘﻮﻗﻊ أن ﺗﺤﻈﻰ ﺑﺸﺄن ﻛﺒﻴﺮ ﻓﻲ اﻟﻤﺴﺘﻘﺒﻞ‪.‬‬

‫ﻣﻼﺣﻈﺔ ﻫﺎﻣﺔ‪:‬‬
‫ﻟﻜﻞ ﺷﺨﺺ ﻣﻨﺎ ﻣﺴﺎره اﻟﺨﺎص ﺳﻮاء ﻣﻦ ﻧﺎﺣﻴﺔ اﻟﺘﻔﻜﻴﺮ أو ﻣﻦ ﻗﺪرات اﻟﺘﻌﻠﻢ‪.‬‬
‫أو ﺣﺘﻰ ﻓﻲ اﻟﻬﺪف اﻟﺬي ﺗﺮﻳﺪ اﻟﻮﺻﻮل إﻟﻴﻪ‪ .‬ﻟﺬﻟﻚ أﺣﺎول ﻓﻲ ﻫﺬا اﻟﺪﻟﻴﻞ‪ ،‬ﺗﻀﻴﻴﻖ اﻟﺨﻴﺎرات‬
‫واﻟﺘﺸﻌﺒﺎت اﻟﺘﻲ ﻣﻦ اﻟﻤﻤﻜﻦ أن ﺗﻮاﺟﻬﻜﻢ‪ ،‬ﺑﺤﻴﺚ ﻳﺼﺒﺢ اﻟﻤﺴﺎر اﻟﺬي‬
‫ﺗﺮﻳﺪ اﺧﺘﻴﺎره أﻛﺜﺮ وﺿﻮﺣﺎً‪.‬‬

‫ﻫﺬا اﻟﺪﻟﻴﻞ ﻳﻌﻄﻴﻚ اﻟﻤﺴﺎر وﻻ ﻳﺨﺘﺎر ﻋﻨﻚ!‬

‫اﻟﺪﻟﻴﻞ اﻟﺸﺎﻣﻞ ﻟﺘﻌﻠﻢ ﻟﻐﺎت ﺗﻄﻮﻳﺮ اﻟﻮﻳﺐ >‪<2021/‬‬

 ‫‪ .2‬ﺣﺪّ د ﻣﺎ ﺗﺮﻳﺪ أن ﺗﺘﻌﻠﻤﻪ‪:‬‬
‫إﻧﺸﺎء ﻣﻮاﻗﻊ إﻧﺘﺮﻧﺖ ﺗﻔﺎﻋﻠﻴﺔ ﺑﺎﺳﺘﺨﺪام ﻟﻐﺎت اﻟﻜﻼﻳﻨﺖ‪ .‬اﺑﺘﺪاء ﻣﻦ اﻟﺘﺼﻤﻴﻢ ﻋﻠﻰ اﻟﻮرﻗﺔ‬
‫‪FE‬‬
‫‪FRONTEND DEV‬‬
‫وﺣﺘﻰ ﺗﺤﻮﻳﻞ اﻟﻤﻮﻗﻊ إﻟﻰ ‪ html‬و ‪ css‬و ﺟﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ وﻧﺸﺮه ﻋﻠﻰ اﻟﺴﻴﺮﻓﺮ‪.‬‬
‫ﺗﺼﻤﻴﻢ و ﺑﺮﻣﺠﺔ اﻟﻮاﺟﻬﺎت‬

‫ﻛﺘﺎﺑﺔ اﻟﻌﻤﻠﻴﺎت اﻟﺮﻳﺎﺿﻴﺔ واﻟﻤﻨﻄﻘﻴﺔ اﻟﺘﻲ ﺗﺮﺑﻂ وﻇﺎﺋﻒ ﻣﻮﻗﻊ اﻹﻧﺘﺮﻧﺖ ﺑﺒﻌﻀﻬﺎ واﻟﺘﻌﺎﻣﻞ‬
‫‪BE‬‬
‫‪BACKEND DEV‬‬
‫ﻣﻊ ﻗﻮاﻋﺪ اﻟﺒﻴﺎﻧﺎت‪ ،‬وإﻋﻄﺎء ﻛﺎﻓﺔ اﻟﺒﻴﺎﻧﺎت اﻟﻼزﻣﺔ ﻟﻤﻄﻮري اﻟﻮاﺟﻬﺎت‪.‬‬
‫ﺑﺮﻣﺠﺔ ﻟﻐﺎت اﻟﺴﻴﺮﻓﺮ‬

‫ﻣﺰﻳﺞ ﻛﺒﻴﺮ ﻣﻦ اﻟﻠﻐﺎت ﺳﻴﺘﻢ ﺗﻮﺿﻴﺤﻪ ﻻﺣﻘ ًﺎ ﻓﻲ ﻫﺬا اﻟﺪﻟﻴﻞ‬ ‫‪FS‬‬

‫‪FULL STACK DEV‬‬
‫ﻣﺒﺮﻣﺞ واﺟﻬﺎت وﻟﻐﺎت ﺳﻴﺮﻓﺮ‬

‫اﻟﺪﻟﻴﻞ اﻟﺸﺎﻣﻞ ﻟﺘﻌﻠﻢ ﻟﻐﺎت ﺗﻄﻮﻳﺮ اﻟﻮﻳﺐ >‪<2021/‬‬

 ‫‪ .3‬ﺣﺪّ د ﻫﺪﻓﻚ‪:‬‬
‫ﻓﻲ ﻏﺎﻟﺐ اﻟﺤﺎﻻت ﺗﺤﺪﻳﺪ اﻟﻬﺪف ﻳﻜﻮن ﻣﻦ أﺻﻌﺐ اﻷﻣﻮر‪ ،‬وﻟﻜﻦ ﻓﻘﻂ ﺗﻮﺿﻴﺢ اﻷﻫﺪاف‬
‫اﻟﺒﻌﻴﺪة ﻳﺴﻬّ ﻞ ﻋﻠﻴﻚ ﻋﻤﻠﻴﺔ اﻟﺒﺪء ﺑﺄي ﻣﺸﺮوع ﻟﻠﺘﻌﻠﻢ‪ ،‬ﻟﺬﻟﻚ أﺧﺘﺼﺮ ﻟﻚ اﻟﺨﻴﺎرات ﻛﺎﻟﺘﺎﻟﻲ‪:‬‬

‫ﻋﻤﻞ ﻣﻬﻨﻲ‪ :‬ﻓﻲ ﺷﺮﻛﺔ )ﺳﻮاء ﻛﺎﻧﺖ ﺻﻐﻴﺮة أو ﻛﺒﻴﺮة(‬ ‫‪.1‬‬

‫ﻋﻤﻞ ﺣﺮ‪ :‬ﻋﻤﻞ ﻣﻊ ﻋﻤﻼء ﻣﺘﻌﺪدﻳﻦ ﺑﺸﻜﻞ ﺧﺎص‪ ،‬أو إﻧﺸﺎء ﺷﺮﻛﺔ ﺻﻐﻴﺮة ﻣﻊ ﻣﻮﻇﻔﻴﻦ‪.‬‬ ‫‪.2‬‬
‫ﻣﺸﺮوع ﺷﺨﺼﻲ‪ :‬ﻟﺪﻳﻚ ﻣﺸﺮوع ﻣﺎ وﺗﺮﻳﺪ ﺗﻌﻠﻢ ﻣﺎ ﻳﻠﺰم ﻟﺘﻨﻔﻴﺬ ﻣﻮﻗﻊ اﻧﺘﺮﻧﺖ أو ﺗﻄﺒﻴﻖ ﺑﻨﻔﺴﻚ‪.‬‬ ‫‪.3‬‬
‫ﻫﻮاﻳﺔ‪ :‬ﺗﻬﻮى اﻟﺘﻜﻨﻮﻟﻮﺟﻴﺎ وﺗﺮﻳﺪ اﻻﻃﻼع ﻋﻠﻰ ﻋﺎﻟﻢ اﻟﺒﺮﻣﺠﺔ ﻋﻤﻮﻣ ًﺎ أو ﻣﺴﺎﻋﺪة أوﻻدك ﻟﻠﺘﻌﻠﻢ‪.‬‬ ‫‪.4‬‬

‫اﻟﺪﻟﻴﻞ اﻟﺸﺎﻣﻞ ﻟﺘﻌﻠﻢ ﻟﻐﺎت ﺗﻄﻮﻳﺮ اﻟﻮﻳﺐ >‪<2021/‬‬

 ‫‪ .4‬اﻷدوات اﻟﻤﻄﻠﻮﺑﺔ‪:‬‬
‫ﺣﺘﻰ ﺗﺘﻌﻠﻢ ﺑﺮﻣﺠﺔ اﻟﻮﻳﺐ ﻓﺈﻧﻚ ﻻ ﺗﺤﺘﺎج اﻟﻜﺜﻴﺮ ﻣﻦ اﻷدوات‪ ،‬ﻓﻲ اﻟﺤﻘﻴﻘﺔ أﻧﺖ ﻻ ﺗﺤﺘﺎج أﻛﺜﺮ‬
‫ﻣﻦ ﻛﻤﺒﻴﻮﺗﺮ ﺑﻤﻮاﺻﻔﺎت ﻣﺘﻮﺳﻄﺔ‪ .‬وﻣﻦ ﺛﻢ اﻟﺒﺮاﻣﺞ اﻟﺘﺎﻟﻴﺔ‪:‬‬

‫ﺑﺮﻧﺎﻣﺞ ﺟﺮاﻓﻴﻚ‬ ‫ﺗﻴﺮﻣﻴﻨﺎل‬ ‫ﻣﺘﺼﻔﺢ وﻳﺐ‬ ‫ﻣﺤﺮر ﻧﺼﻮص‬ ‫ﻧﻈﺎم ﺗﺸﻐﻴﻞ‬

‫ﻳﻤﻜﻦ اﻟﻌﻤﻞ ﻋﻠﻰ أي ﻧﻈﺎم‬ ‫أو ﻣﻌﺎﻟﺞ ﺳﻄﺮ اﻷواﻣﺮ وﻫﻮ‬ ‫ﻳﺠﺐ ﻋﻠﻰ ﻣﺒﺮﻣﺞ اﻟﻮﻳﺐ أن‬ ‫ﺟﻤﻴﻌﻬﺎ ﻣﺘﻮﻓﺮ ﻣﺠﺎﻧ ًﺎ وﺗﺆدي‬ ‫ﻳﻤﻜﻦ اﻟﻌﻤﻞ ﻋﻠﻰ أي ﻧﻈﺎم‬
‫ﺗﺸﻐﻴﻞ‪ .‬ﺑﻴﺌﺔ ﺗﻄﻮﻳﺮ اﻟﻮﻳﺐ‬ ‫ﻣﺘﻮﻓﺮ ﺑﺸﻜﻞ اﻓﺘﺮاﺿﻲ ﻋﻠﻰ‬ ‫ﻳﻤﺘﻠﻚ ﺟﻤﻴﻊ ﻣﺘﺼﻔﺤﺎت‬ ‫ﻧﻔﺲ اﻟﻐﺮض وﺗﺤﺘﻮي ﻋﻠﻰ‬ ‫ﺗﺸﻐﻴﻞ‪ .‬ﺑﻴﺌﺔ ﺗﻄﻮﻳﺮ اﻟﻮﻳﺐ‬
‫ﻣﻨﻔﺼﻠﺔ ﻋﻦ ﻧﻈﺎم اﻟﺘﺸﻐﻴﻞ‬ ‫ﻛﻞ أﺟﻬﺰة اﻟﻜﻤﺒﻴﻮﺗﺮ‬ ‫اﻟﻮﻳﺐ ﻻﺧﺘﺒﺎر اﻟﻤﻮاﻗﻊ‬ ‫ذات اﻟﻤﻴﺰات‬ ‫ﻣﻨﻔﺼﻠﺔ ﻋﻦ ﻧﻈﺎم اﻟﺘﺸﻐﻴﻞ‬
‫‪Adobe XD‬‬ ‫‪Terminal‬‬ ‫‪Chrome‬‬ ‫‪VS Code‬‬ ‫‪MacOS‬‬
‫‪Photoshop‬‬ ‫‪Powershell‬‬ ‫‪FireFox‬‬ ‫‪Atom‬‬ ‫‪Windows‬‬
‫‪Illustrator‬‬ ‫‪Git Bash‬‬ ‫‪Safari‬‬ ‫‪Sublime‬‬ ‫‪Linux‬‬

‫اﻟﺪﻟﻴﻞ اﻟﺸﺎﻣﻞ ﻟﺘﻌﻠﻢ ﻟﻐﺎت ﺗﻄﻮﻳﺮ اﻟﻮﻳﺐ >‪<2021/‬‬

 ‫‪ .5‬ﻣﺎذا ﺗﺘﻌﻠﻢ؟‬
‫ﺑﻌﺪ أن ﺣﺪدت ﻣﺴﺎرك وﻫﺪﻓﻚ‪ ،‬ﻋﻠﻴﻚ أن ﺗﺘﻌﻠﻢ اﻟﻠﻐﺎت اﻟﺘﻲ ﺗﺴﺎﻋﺪك ﻋﻠﻰ ﺗﺤﻘﻴﻖ ﻫﺬا اﻟﻬﺪف‪،‬‬
‫وﺗﺬﻛﺮ داﺋﻤ ًﺎ اﻟﻘﺎﻋﺪة اﻷﺳﺎﺳﻴﺔ‪ :‬ﻛﻞ ﺷﻲء ﻋﻦ ﺷﻲء و ﺷﻲء ﻋﻦ ﻛﻞ ﺷﻲء‬

‫‪BE‬‬ ‫‪FS‬‬ ‫‪FE‬‬

‫‪PHP / PYTHON‬‬ ‫‪HTML & CSS‬‬ ‫‪PHOTOSHOP‬‬

‫‪NODE JS / MYSQL‬‬ ‫‪JAVASCRIPT‬‬ ‫‪ADOBE XD‬‬

‫اﻟﺪﻟﻴﻞ اﻟﺸﺎﻣﻞ ﻟﺘﻌﻠﻢ ﻟﻐﺎت ﺗﻄﻮﻳﺮ اﻟﻮﻳﺐ >‪<2021/‬‬

‫‪FE‬‬

‫ﺑﺮاﻣﺞ اﻟﺠﺮاﻓﻴﻚ ﻣﺘﻌﺪدة وواﺳﻌﺔ ﺟﺪاً‪ .‬وﻟﻜﻨﻚ ﻟﺴﺖ ﺑﺤﺎﺟﺔ ﻷن ﺗﺘﻌﻠﻤﻬﺎ‬

‫ﺟﻤﻴﻌﺎً‪ .‬وأﻳﻀ ًﺎ أﻧﺖ ﻟﺴﺖ ﺑﺤﺎﺟﺔ ﻷن ﺗﺘﻌﻠﻢ ﺟﻤﻴﻊ ﻣﺎﻓﻲ اﻟﺒﺮاﻣﺞ‪ .‬ﻳﻜﻔﻲ ﻓﻘﻂ‬
‫ﻣﻌﺮﻓﺔ اﻷﺳﺎﺳﻴﺎت اﻟﺘﻲ ﺗﺠﻌﻠﻚ ﻗﺎدر ًا ﻋﻠﻰ إﻧﺠﺎز اﻟﻤﻬﻤﺎت اﻟﺒﺴﻴﻄﺔ ﺑﺴﺮﻋﺔ‪:‬‬
‫‪ .6‬ﺑﺮاﻣﺞ اﻟﺠﺮاﻓﻴﻚ‪:‬‬

‫ﺑﺎﻟﺘﺄﻛﻴﺪ ﻟﺴﻨﺎ ﺑﺤﺎﺟﺔ ﻟﻠﺤﺪﻳﺚ ﻋﻦ أﻫﻤﻴﺔ ﺑﺮﻧﺎﻣﺞ ﻓﻮﺗﻮﺷﻮب ﺑﺎﻟﻨﺴﺒﺔ ﻷي ﺷﺨﺺ ﻳﻌﻤﻞ ﻋﻠﻰ اﻟﻜﻤﺒﻴﻮﺗﺮ ﺳﻮاء ﻓﻲ اﻟﺘﺼﻤﻴﻢ‬
‫أو اﻟﺒﺮﻣﺠﺔ أو ﺣﺘﻰ ﻓﻲ أي اﺧﺘﺼﺎص آﺧﺮ‪ .‬ﻓﻮﺗﻮﺷﻮب ﺿﺨﻢ ﺟﺪ ًا وﻳﺤﺘﻮي ﻋﻠﻰ ﻣﻴﺰات ﺗﺨﺪم اﻟﻜﺜﻴﺮ ﻣﻦ اﻻﺧﺘﺼﺎﺻﺎت‪ ،‬ﻟﺬﻟﻚ‬ ‫‪PHOTOSHOP‬‬
‫ﻧﺤﻦ ﻧﺨﺘﺎر ﻓﻘﻂ اﻟﻤﻴﺰات اﻟﺘﻲ ﺗﺨﺪﻣﻨﺎ ﻓﻲ ﻋﻤﻠﻨﺎ‪:‬‬
‫أﺳﺎﺳﻴﺎت ﻣﻌﺎﻟﺠﺔ اﻟﺼﻮر‪ :‬ﺗﻨﻘﻴﺔ اﻟﺼﻮر وإزاﻟﺔ اﻟﻌﻴﻮب ﻣﻨﻬﺎ وﺗﺒﺪﻳﻞ اﻟﺨﻠﻔﻴﺎت وﺗﻐﻴﻴﺮ اﻷﻟﻮان‬ ‫‪-‬‬
‫ﺗﺨﻔﻴﺾ اﻷﺣﺠﺎم‪ :‬ﺻﻮر اﻟﻮﻳﺐ ﻳﺠﺐ أن ﺗﻜﻮن أﺻﻐﺮ ﻣﺎ ﻳﻤﻜﻦ‪ .‬ﻟﺬﻟﻚ ﻳﺠﺐ أن ﺗﺘﻌﻠﻢ اﻟﺘﻘﻨﻴﺎت اﻟﺘﻲ ﺗﺴﺎﻋﺪك‬ ‫‪-‬‬
‫ﻋﻠﻰ ﺗﺨﻔﻴﺾ ﺣﺠﻢ اﻟﺼﻮرة وزﻳﺎدة ﻣﺴﺎﺣﺘﻬﺎ ﻟﺘﻨﺎﺳﺐ ﺻﻔﺤﺔ اﻟﻮﻳﺐ‪.‬‬
‫اﻷﺗﻤﺘﺔ‪ :‬اﻟﺴﺮﻋﺔ ﻫﻲ ﻣﻔﺘﺎح أي ﻣﺒﺮﻣﺞ ﻧﺎﺟﺢ‪ .‬ﻳﻮﻓﺮ ﻓﻮﺗﻮﺷﻮب ﻣﻴﺰة إﻧﺠﺎز ﻋﺪد ﻛﺒﻴﺮ ﻣﻦ اﻟﻤﻬﻤﺎت ﺑﺸﻜﻞ‬ ‫‪-‬‬
‫أوﺗﻮﻣﺎﺗﻴﻜﻲ وﻋﻠﻰ ﻋﺪد ﻻ ﻧﻬﺎﺋﻲ ﻣﻦ اﻟﺼﻮر‪.‬‬

‫ﺑﺈﻣﻜﺎﻧﻚ اﻻﺳﺘﻌﺎﺿﺔ ﻋﻨﻪ ﺑﺄي ﺑﺮﻧﺎﻣﺞ ‪ Prototype‬أو ﺑﺮاﻣﺞ ‪ Wireframe‬وﻫﻲ ﺑﺮاﻣﺞ ﺗﻌﻄﻴﻚ اﻟﻘﺪرة ﻋﻠﻰ ﺗﺨﻄﻴﻂ اﻟﻤﻮﻗﻊ‬
‫ﻛﺎﻣﻼً ﻗﺒﻞ اﻟﺒﺪء ﺑﺎﻟﺘﺼﻤﻴﻢ و اﻟﺒﺮﻣﺠﺔ‪.‬‬ ‫‪ADOBE XD‬‬

‫اﻟﺪﻟﻴﻞ اﻟﺸﺎﻣﻞ ﻟﺘﻌﻠﻢ ﻟﻐﺎت ﺗﻄﻮﻳﺮ اﻟﻮﻳﺐ >‪<2021/‬‬

‫‪FE‬‬

‫‪ .7‬ﺗﺼﻤﻴﻢ اﻟﻮاﺟﻬﺎت‪:‬‬
‫ﻣﻦ اﻟﻤﻬﻢ ﺟﺪ ًا أن ﺗﺘﻌﻠﻢ ﻗﻮاﻋﺪ اﻟﺘﺼﻤﻴﻢ وﺗﺮﻳﻨﺪات اﻟﺘﺼﻤﻴﻢ اﻟﺤﺪﻳﺜﺔ ﺣﺘﻰ ﺗﺒﻨﻲ ﻣﻮﻗﻌﻚ‬
‫ﻋﻠﻰ ﺟﻤﺎﻟﻴﺎت وﻧﻈﺮﻳﺎت ﺻﺤﻴﺤﺔ ﻓﻲ اﻟﺘﺼﻤﻴﻢ‪.‬‬

‫‪Typography‬‬ ‫أﺣﺠﺎم اﻟﻌﻨﺎﺻﺮ‬ ‫اﻟﻔﺮاغ‬ ‫ﻧﻈﺮﻳﺔ اﻷﻟﻮان‬ ‫ﻗﻮاﻋﺪ اﻟﺘﺼﻤﻴﻢ‬

‫أﻓﻀﻞ اﻟﺨﻄﻮط ﻟﻠﻮﻳﺐ‬ ‫ﻫﺬا اﻟﻤﻌﻴﺎر ﻫﺎم ﺟﺪ ًا ﺣﺘﻰ‬
‫وﻛﻴﻔﻴﺔ إدراج اﻟﺨﻄﻮط‬ ‫ﺗﺴﺘﻄﻴﻊ ﺟﺬب اﻧﺘﺒﺎه زوار‬
‫وأﺣﺠﺎﻣﻬﺎ وأﻧﻮاﻋﻬﺎ‬ ‫اﻟﻤﻮﻗﻊ إﻟﻰ اﻟﻤﻌﻠﻮﻣﺎت‬
‫اﻟﺘﻲ ﺗﺮﻳﺪﻫﻢ اﻟﺘﺮﻛﻴﺰ ﻋﻠﻴﻬﺎ‬
‫أﻛﺜﺮ ﻣﻦ ‪ %50‬ﻣﻦ ﻣﻮﻗﻊ‬ ‫ﺗﺴﺎﻋﺪك ﻧﻈﺮﻳﺔ اﻷﻟﻮان‬ ‫ﻳﺠﺐ دراﺳﺔ ﻗﻮاﻋﺪ‬
‫اﻻﻧﺘﺮﻧﺖ ﻫﻮ ﻓﺮاغ‪ ،‬ﻟﺬﻟﻚ‬ ‫ﺑﺎﺧﺘﻴﺎر اﻷﻟﻮان اﻟﻤﻨﺎﺳﺒﺔ‬ ‫اﻟﺘﺼﻤﻴﻢ ﻣﺜﻞ اﻟﺘﺒﺎﻳﻦ‬
‫ﻳﺠﺐ أن ﺗﺘﻌﻠﻢ أي ﺗﻀﻊ‬ ‫ﻟﻤﻮﻗﻌﻚ وﺗﺴﺮﻳﻊ ﻋﻤﻠﻴﺔ‬ ‫واﻻﻧﺴﻴﺎﺑﻴﺔ واﻟﺘﻘﺎرب‬
‫اﻟﻔﺮاغ وﺣﺠﻢ اﻟﻔﺮاغ ﺗﻨﺎﺳﺒ ًﺎ‬ ‫اﻟﺘﺼﻤﻴﻢ‬ ‫واﻟﺘﻮازن واﻟﺘﻜﺮارﻳﺔ‪...‬‬
‫ﻣﻊ ﺣﺠﻢ اﻟﻤﺤﺘﻮى‬

‫اﻟﺪﻟﻴﻞ اﻟﺸﺎﻣﻞ ﻟﺘﻌﻠﻢ ﻟﻐﺎت ﺗﻄﻮﻳﺮ اﻟﻮﻳﺐ >‪<2021/‬‬

‫‪FS‬‬
‫ﺟﻤﻴﻊ ﻟﻐﺎت اﻟﻮﻳﺐ ﺗﻨﺘﻬﻲ ﻋﻠﻰ اﻟﻤﺘﺼﻔﺢ ﺑـ ‪ html‬ﻓﻬﻲ أﺳﺎس اﻟﻮﻳﺐ‪ ،‬وﺑﺎﻟﺘﺎﻟﻲ‬
‫ﺑﺎﻟﺘﺄﻛﻴﺪ ﻳﺠﺐ ﺗﻌﻠﻢ ‪ css‬ﻟﺘﻨﺴﻴﻖ اﻟﻤﺤﺘﻮى‬
‫‪:HTML & CSS .8‬‬

‫ﻫﻲ ﻟﻐﺔ ﺑﺴﻴﻄﺔ ﺟﺪ ًا وﺗﻌﻠﻤﻬﺎ ﻻ ﻳﺤﺘﺎج اﻟﻜﺜﻴﺮ ﻣﻦ اﻟﻮﻗﺖ‪ ،‬وﻫﻲ ﻟﻐﺔ ﺗﺘﻄﻮر ﺑﺎﺳﺘﻤﺮار‪ ،‬ﻟﺬﻟﻚ ﻧﺘﻌﻠﻢ‪:‬‬
‫ﻛﻴﻔﻴﺔ ﺑﻨﺎء اﻟﺼﻔﺤﺎت ‪page structure‬‬ ‫‪-‬‬ ‫‪HTML‬‬
‫أﻫﻢ اﻟﻮﺳﻮم ‪semantic tags‬‬ ‫‪-‬‬
‫وﺳﻮم اﻟﺘﺮوﻳﺴﺎت ‪meta‬‬ ‫‪-‬‬

‫ﻫﻲ ﻟﻐﺔ ﺗﻨﺴﻴﻖ اﻷﻧﻤﺎط وﺟﻤﺎﻟﻴﺎت اﻟﻤﻮﻗﻊ‪ ،‬ﻟﺬﻟﻚ ﻧﺘﻌﻠﻢ‪:‬‬

‫اﻟﺘﻌﻠﻴﻤﺎت اﻷﺳﺎﺳﻴﺔ ﻟﻠﺘﻨﺴﻴﻖ‬ ‫‪-‬‬ ‫‪CSS‬‬
‫ﺗﻤﻮﺿﻊ اﻟﻌﻨﺎﺻﺮ ﻋﻤﻮدﻳ ًﺎ وأﻓﻘﻴ ًﺎ‬ ‫‪-‬‬
‫اﻻﻧﺘﻘﺎﻻت واﻷﻧﻴﻤﻴﺸﻦ‬ ‫‪-‬‬
‫ﺗﺠﺎوب ﻣﻮﻗﻊ اﻻﻧﺘﺮﻧﺖ ﻣﻊ اﻟﻤﻮﺑﺎﻳﻞ‬ ‫‪-‬‬

‫اﻟﺪﻟﻴﻞ اﻟﺸﺎﻣﻞ ﻟﺘﻌﻠﻢ ﻟﻐﺎت ﺗﻄﻮﻳﺮ اﻟﻮﻳﺐ >‪<2021/‬‬

‫‪FE‬‬

‫ﺟﻤﻴﻊ اﻟﻤﻨﺼﺎت ﻫﻲ ﻣﺠﺮد ﻣﺴﺎﻋﺪة ﻟﻚ ﺣﺘﻰ ﺗﺴﺘﻄﻴﻊ إﻧﻬﺎء اﻟﻌﻤﻞ ﺑﺄﺳﺮع‬

‫وﻗﺖ‪ ،‬ﻟﺬﻟﻚ ﺑﻘﺪر ﻣﺎ ﺗﻌﺮف ﻣﻨﺼﺎت ﺑﻘﺪر ﻣﺎ ﺗﻜﻮن ﺳﺮﻳﻌ ًﺎ ﺑﺎﻟﻌﻤﻞ‪.‬‬
‫‪ .9‬ﻣﻨﺼﺎت ‪:CSS‬‬
‫ﺳﺎس ﻫﻲ ﻣﻌﺎﻟﺞ ‪ css‬وﻫﺬا ﻳﻌﻨﻲ أﻧﻬﺎ ﻣﻦ ﻣﺎ ﻳﺴﻤﻰ ﺑﻠﻐﺎت اﻟﺘﺮف‪ ،‬أي أﻧﻬﺎ ﻏﻴﺮ ﺿﺮورﻳﺔ أﺑﺪ ًا وﻟﻜﻨﻬﺎ ﺳﺘﺴﺮع ﻣﻦ وﺗﻴﺮة‬
‫ﻋﻤﻠﻚ ﺑﺸﻜﻞ ﻛﺒﻴﺮ ﺟﺪ ًا ﻫﻲ ﻟﻐﺔ ﺑﺴﻴﻄﺔ ﺟﺪ ًا وﺗﻌﻠﻤﻬﺎ ﻻ ﻳﺤﺘﺎج اﻟﻜﺜﻴﺮ ﻣﻦ اﻟﻮﻗﺖ‪ ،‬ﻟﺬﻟﻚ ﻧﺘﻌﻠﻢ‪:‬‬ ‫‪SASS‬‬
‫اﻟﻤﺘﻐﻴﺮات ‪Variables‬‬ ‫‪-‬‬
‫اﻟﻮﻇﺎﺋﻒ اﻟﻜﺒﻴﺮة ‪Mixins‬‬ ‫‪-‬‬
‫اﻟﻮﻇﺎﺋﻒ اﻟﺼﻐﻴﺮة ‪Functions‬‬ ‫‪-‬‬
‫اﻟﺘﺪاﺧﻞ ‪Nesting‬‬ ‫‪-‬‬
‫ﺣﺎﻣﻼت اﻟﻜﻮد ‪Placeholder‬‬ ‫‪-‬‬

‫أﺷﻬﺮ ﻣﻨﺼﺔ ‪ CSS‬واﺳﺘﺨﺪاﻣﻬﺎ ﺑﺴﻴﻂ ﺟﺪ ًا وﻳﻌﻤﻞ اﻟﻤﻄﻮرون ﻋﻠﻰ ﺗﺤﺪﻳﺜﻬﺎ ﺑﺎﺳﺘﻤﺮار‪ ،‬ﻟﺬﻟﻚ ﻧﺘﻌﻠﻢ‪:‬‬
‫أﻫﻢ اﻟﻜﻼﺳﺎت‬ ‫‪-‬‬ ‫‪BOOTSTRAP‬‬
‫ﺑﻨﺎء اﻟﺼﻔﺤﺎت ﺑﺎﺳﺘﺨﺪام ﺑﻮﺗﺴﺘﺮاب‬ ‫‪-‬‬

‫ﻣﻼﺣﻈﺔ‪ :‬ﻫﻨﺎك ﻣﻨﺼﺎت أﺧﺮى ﻣﺜﻞ ‪ Tailwind CSS‬و ‪ Materialize‬وأﻳﻀﺎ ﻣﻌﺎﻟﺠﺎت ‪ CSS‬أﺧﺮى ﻣﺜﻞ ‪ Less‬و ‪ Stylus‬وﻟﻜﻨﻬﺎ أﻗﻞ اﺳﺘﺨﺪاﻣ ًﺎ وﻳﻤﻜﻦ ﺗﻌﻠﻤﻬﺎ ﻓﻘﻂ ﻷﺟﻞ اﻻﻃﻼع واﻟﻤﻌﺮﻓﺔ‬
‫وﺑﺎﻟﺘﺄﻛﻴﺪ ﺣﺘﻰ ﺗﺴﺘﻄﻴﻊ اﻟﺘﻌﺪﻳﻞ ﻋﻠﻰ اﻻﻛﻮاد اﻟﺠﺎﻫﺰة‪.‬‬

‫اﻟﺪﻟﻴﻞ اﻟﺸﺎﻣﻞ ﻟﺘﻌﻠﻢ ﻟﻐﺎت ﺗﻄﻮﻳﺮ اﻟﻮﻳﺐ >‪<2021/‬‬

‫‪FE‬‬

‫‪ .10‬ﺟﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ‪:‬‬
‫ﻫﻲ ﻟﻐﺔ ﻛﻞ اﻟﻤﺘﺼﻔﺤﺎت واﻟﻤﻌﻴﺎر اﻷﺳﺎﺳﻲ ﻟﻘﻮة ﻣﻄﻮر اﻟﻮاﺟﻬﺎت‬

‫‪API‬‬ ‫ﺑﺮوﺗﻮﻛﻮل ‪HTTP‬‬ ‫‪JSON‬‬ ‫اﻟﻤﺘﺼﻔﺢ‬ ‫اﻷﺳﺎﺳﻴﺎت‬

‫اﺳﺘﺤﻀﺎر اﻟﻤﻌﻠﻮﻣﺎت ﻣﻦ‬ ‫‪GET‬‬ ‫ﺳﺘﺠﺪ ‪ JSON‬ﻓﻲ ﻛﻞ ﻣﻮﻗﻊ‬ ‫اﺧﺘﻴﺎر ﻋﻨﺎﺻﺮ اﻟﻤﺴﺘﻨﺪ‬ ‫اﻟﻤﺘﻐﻴﺮات ‪Variables‬‬
‫ﻣﺼﺎدر ﺧﺎرﺟﻴﺔ وﺗﻄﻮﻳﻊ‬ ‫‪Post‬‬ ‫ﺗﻔﺘﺤﻪ‪ ،‬وﻫﻲ ﻣﺎ ﻳﺸﺒﻪ‬ ‫واﻟﺘﻌﺪﻳﻞ ﻋﻠﻴﻬﺎ واﻟﻘﺪرة‬ ‫اﻟﻤﺼﻔﻮﻓﺎت ‪Arrays‬‬
‫ﻫﺬه اﻟﻤﻌﻠﻮﻣﺎت‬ ‫‪Put‬‬ ‫ﻗﻮاﻋﺪ ﺑﻴﺎﻧﺎت ﻣﺒﺴﻄﺔ ﻓﻲ‬ ‫ﻋﻠﻰ إﺿﺎﻓﺔ ﻋﻨﺎﺻﺮ‬ ‫اﻟﻮﻇﺎﺋﻒ ‪Functions‬‬
‫‪Delete‬‬ ‫ﺟﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ‬ ‫واﻟﺘﻼﻋﺐ ﺑﺼﻔﺤﺔ اﻻﻧﺘﺮﻧﺖ‬ ‫اﻟﺤﻠﻘﺎت ‪For‬‬
‫‪...‬‬ ‫اﻟﻜﺎﺋﻨﺎت ‪Objects‬‬
‫اﻟﺠﻤﻞ اﻟﺸﺮﻃﻴﺔ ‪If‬‬

‫اﻟﺪﻟﻴﻞ اﻟﺸﺎﻣﻞ ﻟﺘﻌﻠﻢ ﻟﻐﺎت ﺗﻄﻮﻳﺮ اﻟﻮﻳﺐ >‪<2021/‬‬

‫‪FE‬‬

‫‪ .11‬ﺟﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ ‪:2015‬‬

‫ﻫﻲ اﻟﻨﺴﺨﺔ اﻟﺤﺪﻳﺜﺔ ﻣﻦ ﺟﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ ﺣﻴﺚ ﺗﻤﺖ إﺿﺎﻓﺔ اﻟﻜﺜﻴﺮ ﻣﻦ اﻟﻜﻼﺳﺎت ﺑﺎﻹﺿﺎﻓﺔ‬
‫إﻟﻰ اﻟﻜﺜﻴﺮ ﻣﻦ اﻷﺳﺎﻟﻴﺐ اﻟﺠﺪﻳﺪة ﻟﻜﺘﺎﺑﺔ ﺟﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ‬

‫‪1.‬‬ ‫‪Let / Const‬‬ ‫‪5. This‬‬

‫‪2.‬‬ ‫‪Destructuring‬‬ ‫‪6. Classes‬‬
‫‪3.‬‬ ‫‪Objects‬‬ ‫‪7. Arrow Function‬‬
‫‪4.‬‬ ‫‪Spread‬‬ ‫‪8. Modules‬‬

‫اﻟﺪﻟﻴﻞ اﻟﺸﺎﻣﻞ ﻟﺘﻌﻠﻢ ﻟﻐﺎت ﺗﻄﻮﻳﺮ اﻟﻮﻳﺐ >‪<2021/‬‬

‫‪FS‬‬

‫‪ .12‬اﻟﺪوﻣﻴﻦ واﻟﺤﺠﺰ‪:‬‬
‫ﻳﺠﺐ أن ﺗﺘﻌﻠﻢ ﻛﻴﻒ ﺗﺤﺠﺰ أﺳﻤﺎء اﻟﻨﻄﺎﻗﺎت واﻟﺤﺠﻮزات وﻛﻴﻔﻴﺔ إدارة اﻟﺴﻴﺮﻓﺮات وﻧﻘﻞ‬
‫اﻟﺪوﻣﻴﻨﺎت واﻟﺘﺤﻜﻢ ﺑـ ‪ DNS‬و إﻧﺸﺎء اﻹﻳﻤﻴﻼت‬

‫‪Hostinger, Namecheap, Name.com, Google Domains...‬‬ ‫اﻟﻨﻄﺎﻗﺎت‬

‫‪Hostinger, Hostgator, Bluehost, Siteground‬‬ ‫اﻻﺳﺘﻀﺎﻓﺔ‬

‫‪SSL Certificates: Let’s Encrypt, Cloudflare, Namecheap‬‬ ‫اﻷﻣﺎن‬

‫اﻟﺪﻟﻴﻞ اﻟﺸﺎﻣﻞ ﻟﺘﻌﻠﻢ ﻟﻐﺎت ﺗﻄﻮﻳﺮ اﻟﻮﻳﺐ >‪<2021/‬‬

 ‫ﺣﺘﻰ ﻫﺬه اﻟﻠﺤﻈﺔ‪:‬‬
‫ﺣﺘﻰ اﻵن‪ ،‬ﺗﻌﻠﻤﺖ ﻛﻞ ﻣﺎ ﻳﻠﺰم ﺣﺘﻰ ﺗﺼﻤﻢ ﻣﻮﻗﻊ إﻧﺘﺮﻧﺖ ﺗﻔﺎﻋﻠﻲ ﻣﻦ اﻟﻤﺴﺘﻮى اﻟﻤﻤﺘﺎز‪.‬‬

‫ﺗﺴﺘﻄﻴﻊ ﻛﺘﺎﺑﺔ ‪ html‬و ‪ css‬و ‪Javascript‬‬ ‫●‬

‫ﺗﻌﻠﻤﺖ اﺳﺘﺨﺪام ‪Sass‬‬ ‫●‬
‫ﺗﺴﺘﻄﻴﻊ إﻧﺸﺎء ﻣﻮﻗﻊ إﻧﺘﺮﻧﺖ ﻣﺘﺠﺎوب ‪Responsive‬‬ ‫●‬
‫ﻗﺎدر ﻋﻠﻰ اﻟﺘﻼﻋﺐ ﺑﻌﻨﺎﺻﺮ اﻟﻤﻮﻗﻊ ﻋﻦ ﻃﺮﻳﻖ ‪ Css‬و ‪Javascript‬‬ ‫●‬
‫اﺳﺘﺤﻀﺎر اﻟﻤﻌﻠﻮﻣﺎت ﻣﻦ ﻣﺼﺎدر ﺧﺎرﺟﻴﺔ ﻋﻦ ﻃﺮﻳﻖ ‪API‬‬ ‫●‬
‫ﺷﺮاء دوﻣﻴﻦ واﺳﺘﻀﺎﻓﺔ وﻧﺸﺮ اﻟﻤﻮﻗﻊ‬ ‫●‬
‫ﺗﺄﻣﻴﻦ وﺣﻤﺎﻳﺔ اﻟﻤﻮﻗﻊ ﻋﻦ ﻃﺮﻳﻖ ‪SSL‬‬ ‫●‬

‫… اذ ًا ‪ ..‬ﻣﺎذا ﺑﻌﺪ‬

‫اﻟﺪﻟﻴﻞ اﻟﺸﺎﻣﻞ ﻟﺘﻌﻠﻢ ﻟﻐﺎت ﺗﻄﻮﻳﺮ اﻟﻮﻳﺐ >‪<2021/‬‬

 ‫واﻵن… ﻣﺎذا؟‬
‫اﺑﺘﺪاء ﻣﻦ ﻫﺬه اﻟﻠﺤﻈﺔ ﻳﻌﻮد اﻷﻣﺮ إﻟﻴﻚ وإﻟﻰ ﻣﺎ ﺗﺮﻳﺪ اﻟﻮﺻﻮل إﻟﻴﻪ واﻟﻤﻬﻨﺔ اﻟﺘﻲ ﺗﺮﻳﺪ اﻟﺘﺨﺼﺺ ﺑﻬﺎ‪:‬‬

‫ﻟﻐﺎت ﺳﻴﺮﻓﺮ‬ ‫ﻣﻨﺼﺎت ﻓﺮوﻧﺖ إﻧﺪ‬ ‫ﺟﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ‬

‫اﺑﺪأ ﻋﻠﻰ اﻷﻗﻞ ﺑﻠﻐﺔ ﺳﻴﺮﻓﺮ واﺣﺪة‬ ‫ﺗﻌﻠﻢ ﻣﻨﺼﺎت ﻓﺮوﻧﺖ إﻧﺪ ﻣﺜﻞ ‪React,‬‬ ‫ﺑﺈﻣﻜﺎﻧﻚ ﺗﻘﻮﻳﺔ ﻣﻬﺎراﺗﻚ ﻓﻲ ﺟﺎﻓﺎ‬
‫‪Node, Python, PhP‬‬ ‫‪Vue, Angular‬‬ ‫ﺳﻜﺮﻳﺒﺖ ﻟﺘﻜﻮن ﻗﺎدر ﻋﻠﻰ إﻧﺸﺎء‬
‫ﻣﻮاﻗﻊ أﻛﺜﺮ ﺗﻔﺎﻋﻠﻴﺔ‬

‫اﻟﺪﻟﻴﻞ اﻟﺸﺎﻣﻞ ﻟﺘﻌﻠﻢ ﻟﻐﺎت ﺗﻄﻮﻳﺮ اﻟﻮﻳﺐ >‪<2021/‬‬

‫‪FE‬‬

‫‪ .13‬ﻣﻨﺼﺎت ﻓﺮوﻧﺖ إﻧﺪ‬

‫‪State Manager‬‬
‫ﻫﻲ ﻣﻜﺘﺒﺔ ﺟﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ ﻣﻔﺘﻮﺣﺔ اﻟﻤﺼﺪر وواﺟﻬﺔ أﻣﺎﻣﻴﺔ ﻟﺒﻨﺎء واﺟﻬﺎت اﻟﻤﺴﺘﺨﺪم أو ﻣﻜﻮﻧﺎت‬
‫‪Redux‬‬ ‫واﺟﻬﺔ اﻟﻤﺴﺘﺨﺪم‪ .‬ﺗﺘﻢ إدارﺗﻬﺎ ﺑﻮاﺳﻄﺔ ‪Facebook‬‬ ‫‪React‬‬

‫ﻣﻨﺼﺔ ﻓﺮوﻧﺖ إﻧﺪ ﺟﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ ﻣﻔﺘﻮﺣﺔ اﻟﻤﺼﺪر ﺗﺴﺘﺨﺪم ﻟﺒﻨﺎء واﺟﻬﺎت اﻟﻤﺴﺘﺨﺪم‬
‫‪VueX‬‬ ‫واﻟﺘﻄﺒﻴﻘﺎت ذات اﻟﺼﻔﺤﺔ اﻟﻮاﺣﺪة وﻳﺘﻢ إدارﺗﻬﺎ ﺑﻮاﺳﻄﺔ ﻣﻄﻮر أﻓﺮاد وﻟﻴﺲ ﺷﺮﻛﺎت‬ ‫‪Vue‬‬

‫ﻫﻲ ﻣﻨﺼﺔ ﻓﺮوﻧﺖ إﻧﺪ ﻣﻔﺘﻮﺣﺔ اﻟﻤﺼﺪر ﺗﻌﺘﻤﺪ ﻋﻠﻰ ‪ TypeScript‬ﺗﻢ ﺗﻄﻮﻳﺮﻫﺎ ﻣﻦ ﻗﺒﻞ ﻓﺮﻳﻖ ﻋﻤﻞ‬
‫‪Angular‬‬ ‫داﺧﻞ ‪ Google‬وﻫﻲ إﻋﺎدة ﻛﺘﺎﺑﺔ ﻟﻤﻜﺘﺒﺔ ‪ AngularJS‬ﺳﺎﺑﻘ ًﺎ‬ ‫‪Angular‬‬

‫ﻣﻦ اﻟﻤﻬﻢ ﺟﺪ ًا ﻣﻌﺮﻓﺔ أﻧﻚ ﺗﺴﺘﻄﻴﻊ اﺳﺘﺨﺪام أي ﻣﻨﺼﺔ ﻓﺮوﻧﺖ إﻧﺪ ﻣﻊ أي ﻟﻐﺔ ﺑﺎك إﻧﺪ‪ ،‬اﻷﻣﺮ ﻣﻨﻔﺼﻞ ﺗﻤﺎﻣ ًﺎ وﻻ ﻳﻮﺟﺪ أي ﻗﺎﻋﺪة إﻻ اﻟﺨﺒﺮة اﻟﺸﺨﺼﻴﺔ ﻟﻜﻞ ﻣﺒﺮﻣﺞ‪.‬‬ ‫‪-‬‬
‫ﻳﻮﺟﺪ ﻣﻨﺼﺎت أﺧﺮى أﻗﻞ ﺷﻬﺮة وﻟﻜﻨﻬﺎ أﻳﻀﺎ ﺗﺴﺘﺤﻖ اﻟﺘﻌﻠﻢ ﻣﺜﻞ ‪Svelte‬‬ ‫‪-‬‬

‫اﻟﺪﻟﻴﻞ اﻟﺸﺎﻣﻞ ﻟﺘﻌﻠﻢ ﻟﻐﺎت ﺗﻄﻮﻳﺮ اﻟﻮﻳﺐ >‪<2021/‬‬

‫‪FE‬‬

‫‪ .14‬ﻣﻌﺎﻟﺠﺎت ﻃﺮف اﻟﺴﻴﺮﻓﺮ )‪(SSR‬‬

‫‪React‬‬ ‫‪Next.js‬‬

‫‪Vue‬‬ ‫‪Nuxt.js‬‬

‫‪Angular‬‬ ‫‪Angular Universal‬‬

‫أﺧﺘﺮ ﺗﻌﻠﻢ ﻣﻌﺎﻟﺞ واﺣﺪ ﻓﻘﻂ ﺣﺘﻰ ﺗﺴﺘﻄﻴﻊ اﻟﺘﺮﻛﻴﺰ ﺑﺸﻜﻞ أﻛﺒﺮ ﻋﻠﻰ ﻣﺎ ﺗﺘﻌﻠﻤﻪ‬ ‫‪-‬‬
‫ﻳﻮﺟﺪ ﻣﻌﺎﻟﺠﺎت أﺧﺮى أﻗﻞ ﺷﻬﺮة وﻟﻜﻨﻬﺎ أﻳﻀﺎ ﺗﺴﺘﺤﻖ اﻟﺘﻌﻠﻢ ﻣﺜﻞ ‪Sapper‬‬ ‫‪-‬‬

‫اﻟﺪﻟﻴﻞ اﻟﺸﺎﻣﻞ ﻟﺘﻌﻠﻢ ﻟﻐﺎت ﺗﻄﻮﻳﺮ اﻟﻮﻳﺐ >‪<2021/‬‬

‫‪FE‬‬

‫‪ .15‬ﻣﻮﻟﺪات اﻟﺼﻔﺤﺎت اﻟﺜﺎﺑﺘﺔ‬

‫‪React‬‬ ‫‪Gatsby‬‬

‫‪Vue‬‬ ‫‪Gridsome‬‬

‫‪Ruby‬‬ ‫‪Jekyll‬‬

‫ﻫﺬه اﻟﻤﻮﻟﺪات ﺗﻌﻠﻤﻬﺎ اﺧﺘﻴﺎري ﺟﺪاً‪ ،‬وﻳﺄﺗﻲ ﺑﻌﺪ اﺣﺘﺮاف ﺗﺼﻤﻴﻢ اﻟﻤﻮاﻗﻊ ﺑﺸﻜﻞ ﻛﺒﻴﺮ ورﻏﺒﺘﻚ ﻓﻲ إﻧﺘﺎج ﻣﻮاﻗﻊ إﻧﺘﺮﻧﺖ ﻓﺎﺋﻘﺔ اﻟﺴﺮﻋﺔ ﻟﻤﺸﺎرﻳﻊ ﻛﺒﻴﺮة‪.‬‬ ‫‪-‬‬
‫ﻳﻮﺟﺪ ﻣﻮﻟﺪات أﻗﻞ ﺷﻬﺮة ﺗﺴﺘﺤﻖ اﻻﻃﻼع أﻳﻀﺎ ﻣﺜﻞ ‪ Hugo‬ﻣﻦ ﻟﻐﺔ ‪ Go‬و ‪ 11y‬ﻣﻦ ﺟﺎﻓﺎ ﺳﻜﺮﻳﺒﺖ‬ ‫‪-‬‬

‫اﻟﺪﻟﻴﻞ اﻟﺸﺎﻣﻞ ﻟﺘﻌﻠﻢ ﻟﻐﺎت ﺗﻄﻮﻳﺮ اﻟﻮﻳﺐ >‪<2021/‬‬

‫‪FE‬‬

‫‪ .16‬أﻧﻈﻤﺔ إدارة ﻣﺤﺘﻮى ﻫﺠﻴﻨﺔ‬

‫ﻫﻮ ﻧﻈﺎم إدارة ﻣﺤﺘﻮى ﻣﻔﺘﻮح اﻟﻤﺼﺪر ﻳﺘﻴﺢ ﻟﻠﻤﻄﻮرﻳﻦ ﺣﺮﻳﺔ اﺧﺘﻴﺎر اﻷدوات‬ ‫‪Strapi‬‬
‫واﻷﻃﺮ اﻟﻤﻔﻀﻠﺔ ﻟﺪﻳﻬﻢ ﻣﻊ اﻟﺴﻤﺎح ﻟﻠﻤﺤﺮرﻳﻦ ﺑﺈدارة اﻟﻤﺤﺘﻮى‬

‫ﺑﺎﺳﺘﺨﺪام ‪ REST API‬اﻟﺨﺎص ﺑـ ‪ Wordpress‬ﻳﻤﻜﻦ ﺗﻮﻟﻴﺪ اﻟﻤﻌﻠﻮﻣﺎت ﻋﻦ ﻃﺮﻳﻖ‬ ‫‪Wordpress‬‬

‫ووردﺑﺮس وﻣﻦ ﺛﻢ اﺳﺘﺨﺪام أي ﻣﻨﺼﺔ ﻓﺮوﻧﺖ إﻧﺪ ﻟﻠﺘﺤﻜﻢ ﺑﻬﺬه اﻟﻤﻌﻠﻮﻣﺎت‬

‫ﻫﻨﺎك اﻟﻜﺜﻴﺮ ﻣﻦ أﻧﻈﻤﺔ إدارة اﻟﻤﺤﺘﻮى أﻗﻞ ﺷﻬﺮة ﻣﺜﻞ ‪ Sanity‬و ‪ Contentful‬و ‪Frontity‬‬ ‫‪-‬‬

‫اﻟﺪﻟﻴﻞ اﻟﺸﺎﻣﻞ ﻟﺘﻌﻠﻢ ﻟﻐﺎت ﺗﻄﻮﻳﺮ اﻟﻮﻳﺐ >‪<2021/‬‬

 ‫ﺣﺘﻰ ﻫﺬه اﻟﻠﺤﻈﺔ‪:‬‬
‫إذا وﺻﻠﺖ ﺣﺘﻰ ﻫﺬه اﻟﻠﺤﻈﺔ‪ ،‬ﻓﺄﻧﺖ ﻣﻄﻮر ﻓﺮوﻧﺖ إﻧﺪ ﻣﻦ اﻟﻤﺴﺘﻮى اﻟﻤﻤﺘﺎز‪:‬‬

‫ﻗﺎدر ﻋﻠﻰ ﺑﻨﺎء ﻣﻮاﻗﻊ اﻹﻧﺘﺮﻧﺖ واﻟﺘﻄﺒﻴﻘﺎت ﺑﺎﺳﺘﺨﺪام ﻣﻨﺼﺎت ﻓﺮوﻧﺖ إﻧﺪ‬ ‫●‬
‫ﻗﺎدر ﻋﻠﻰ اﺳﺘﺤﻀﺎر ﺑﻴﺎﻧﺎت ‪ JSON‬واﺳﺘﺨﺪاﻣﻬﺎ ﻓﻲ اﻟﻤﻮﻗﻊ أو اﻟﺘﻄﺒﻴﻖ‬ ‫●‬
‫ﻗﺎدر ﻋﻠﻰ ﻛﺘﺎﺑﺔ ﻧﺺ ﺑﺮﻣﺠﻲ ﺻﺤﻴﺢ وﻣﺘﻜﺎﻣﻞ وﺧﺎﻟﻲ ﻣﻦ اﻷﺧﻄﺎء ﻗﺎﺑﻞ ﻟﻠﺘﻌﺪﻳﻞ واﻟﺘﻮﺳﻴﻊ‬ ‫●‬

‫ﺟﺎﻧﺒﻴﺎً‪:‬‬
‫ﻟﺪﻳﻚ ﻓﻜﺮة واﺳﻌﺔ ﻋﻦ أﻧﻈﻤﺔ ادارة اﻟﻤﺤﺘﻮى اﻟﻬﻴﻨﺔ‬ ‫●‬
‫ﺗﺴﺘﻄﻴﻊ ﻋﻨﺪ اﻟﺤﺎﺟﺔ اﺳﺘﺨﺪام ﻣﻮﻟﺪات اﻟﻤﻮاﻗﻊ اﻟﺜﺎﺑﺘﺔ‬ ‫●‬
‫ﺗﺴﺘﻄﻴﻊ اﺳﺘﺨﺪام ﻣﻌﺎﻟﺠﺎت ﺟﺎﻧﺐ اﻟﺴﻴﺮﻓﺮ‬ ‫●‬

‫اﻟﺪﻟﻴﻞ اﻟﺸﺎﻣﻞ ﻟﺘﻌﻠﻢ ﻟﻐﺎت ﺗﻄﻮﻳﺮ اﻟﻮﻳﺐ >‪<2021/‬‬

‫‪BE‬‬

‫‪ .17‬ﻟﻐﺎت اﻟﺴﻴﺮﻓﺮ‬
‫ﻟﻐﺎت اﻟﺴﻴﺮﻓﺮ ﻛﺜﻴﺮة وﻣﺘﺸﻌﺒﺔ وﻟﻜﻦ اﺧﺘﺮﺗﻨﺎ ﻫﻨﺎ اﻷﻛﺜﺮ ﺷﻴﻮﻋ ًﺎ واﻷﻛﺜﺮ اﺳﺘﺨﺪاﻣ ًﺎ واﻷﺳﺮع‬
‫ﻟﺪﺧﻮل ﻓﻲ ﺳﻮق اﻟﻌﻤﻞ‬

‫اذا أﺻﺒﺤﺖ ﻣﻬﺎراﺗﻚ ﻓﻲ ﺟﺎﻓﺎﺳﻜﺮﻳﺒﺖ ﻋﺎﻟﻴﺔ‪ ،‬ﺗﺎﺑﻊ ﺑﺘﻌﻠﻢ ﻧﻮد ﺟﻲ إس‬ ‫‪Node.js‬‬

‫ﻳﺠﺐ أن ﺗﺘﻌﻠﻢ وﻟﻮ ﺣﺘﻰ اﻷﺳﺎﺳﻴﺎت ﻷﻧﻬﺎ اﻟﻠﻐﺔ اﻟﺼﺎﻋﺪة وﺑﻜﻞ ﻗﻮة ﻓﻲ ﻛﻞ اﻟﻤﻬﻦ‬ ‫‪Python‬‬

‫ﺳﺘﺠﺪ اﻟﻜﺜﻴﺮ ﻣﻨﻬﺎ ﻋﻠﻰ اﻹﻧﺘﺮﻧﺖ ﻟﺬﻟﻚ ﺣﺘﻰ ﻟﻮ ﻟﻢ ﺗﺴﺘﺨﺪﻣﻬﺎ‪ ..‬ﺗﻌﻠﻤﻬﺎ‬ ‫‪PHP‬‬
‫ﻟﻐﺎت أﺧﺮى ﻳﻤﻜﻦ أن ﺗﺘﻌﻠﻤﻬﺎ ﻻﺣﻘ ًﺎ أﻫﻤﻬﺎ‪Java - Ruby - C# - Ruby - Kotlin - Go :‬‬

‫اﻟﺪﻟﻴﻞ اﻟﺸﺎﻣﻞ ﻟﺘﻌﻠﻢ ﻟﻐﺎت ﺗﻄﻮﻳﺮ اﻟﻮﻳﺐ >‪<2021/‬‬

‫‪BE‬‬

‫‪ .18‬ﻣﻨﺼﺎت ﺑﺎك إﻧﺪ‬

‫‪State Manager‬‬
‫ﻣﻨﺼﺔ ﺑﺎك إﻧﺪ ﻣﻔﺘﻮﺣﺔ اﻟﻤﺼﺪر‪ ،‬ﺻﻤﻤﺖ ﻟﺒﻨﺎء ﺗﻄﺒﻴﻘﺎت وﻳﺐ و ‪ API‬و ﻣﻌﺘﻤﺪة ﺑﺸﻜﻞ رﺋﻴﺴﻲ‬
‫‪Node.js‬‬ ‫ﻋﻠﻰ ﻧﻮد ﺟﻲ اس‪ ،‬وﻫﻲ اﻷﺳﻬﻞ ﺗﻌﻠﻤ ًﺎ ﺑﻴﻦ ﺟﻤﻴﻊ اﻟﻤﻨﺼﺎت‬ ‫‪Express‬‬

‫ﻣﻨﺼﺔ ﺑﺎك إﻧﺪ ﻣﻦ ‪ php‬ﻣﺠﺎﻧﻴﺔ وﻣﻔﺘﻮﺣﺔ اﻟﻤﺼﺪر‪ ،‬ﺗﻌﻤﻞ ﻋﻠﻰ ﺗﻄﻮﻳﺮ ﺗﻄﺒﻴﻘﺎت اﻟﻮﻳﺐ ﺑﺎﻋﺘﻤﺎد‬
‫‪PHP‬‬ ‫ﻧﻈﺎم‪ :‬ﻧﻤﺬﺟﺔ‪-‬ﻋﺮض‪-‬ﺗﺤﻜﻢ وﻫﻲ ﻣﺒﻨﻴﺔ ﻋﻠﻰ ﻣﻨﺼﺔ ‪Symfony‬‬ ‫‪Lavarel‬‬

‫ﻣﻨﺼﺔ ﻋﻤﻞ ﻣﺒﻨﻴﺔ ﻋﻠﻰ ‪ Python‬ﻣﺠﺎﻧﻴﺔ وﻣﻔﺘﻮﺣﺔ اﻟﻤﺼﺪر ﺗﺘﺒﻊ ﻧﻤﻂ ﻧﻤﺬﺟﺔ‪-‬ﺗﻤﺒﻠﺖ‪-‬ﻋﺮض‬
‫‪Python‬‬ ‫‪Django‬‬

‫ﻓﻲ ﻫﺬا اﻟﻤﺠﺎل ﻳﻮﺟﺪ اﻟﻜﺜﻴﺮ ﻣﻦ ﻣﻨﺼﺎت اﻟﻌﻤﻞ اﻟﺘﻲ ﻳﻤﻜﻦ أﻳﻀﺎ اﺿﺎﻓﺘﻬﺎ ﻣﺜﻞ‪:‬‬
‫)‪Next (Node), Flask (Python), Symfony (PHP), Ruby on Rails (Ruby), Javalin (Kotlin‬‬

‫اﻟﺪﻟﻴﻞ اﻟﺸﺎﻣﻞ ﻟﺘﻌﻠﻢ ﻟﻐﺎت ﺗﻄﻮﻳﺮ اﻟﻮﻳﺐ >‪<2021/‬‬

‫‪BE‬‬ ‫‪FE‬‬

‫‪ .20‬ﻟﻐﺔ اﺳﺘﻌﻼم ‪GraphQL‬‬

‫ﻫﻲ ﻟﻐﺔ اﺳﺘﻌﻼم ‪ ،API‬ﺗﻌﻤﻞ ﻋﻠﻰ ﺟﺎﻧﺐ اﻟﻤﺨﺪم ﻟﺘﻨﻔﻴﺬ اﻻﺳﺘﻌﻼﻣﺎت ﺑﺎﺳﺘﺨﺪام ﻧﻮع اﻟﺒﻴﺎﻧﺎت اﻟﺬي ﺗﺮﻳﺪ اﻟﺤﺼﻮل ﻋﻠﻴﻪ‪.‬‬

‫ﺗﻤﻜﻨﻚ ﻣﻦ ارﺳﺎل اﻻﺳﺘﻌﻼﻣﺎت ﺑﺸﻜﻞ ﻳﺸﺒﻪ ‪ JSON‬إﻟﻰ اﻟـ ‪ API‬واﻟﺤﺼﻮل ﺗﻤﺎﻣﺎ ﻋﻠﻰ ﻣﺎ ﺗﺮﻳﺪه ﻣﻦ‬ ‫‪.1‬‬
‫دون ﺗﺤﻤﻴﻞ ﻃﺎﻗﺔ إﺿﺎﻓﻴﺔ ﻟﻠﺴﻴﺮﻓﺮ‪.‬‬
‫ﺗﻌﻤﻞ اﻟﻠﻐﺔ ﻋﻠﻰ ﺟﺎﻧﺐ اﻟﻤﺨﺪم وﻳﻤﻜﻦ اﺳﺘﺨﺪام ﺗﻄﺒﻴﻘﺎت ﻣﺜﻞ ‪ Apollo‬ﻣﻦ ﻃﺮف اﻟﻤﺴﺘﺨﺪم‬ ‫‪.2‬‬
‫ﺗﻌﻤﻞ ﺑﺸﻜﻞ راﺋﻊ ﺟﺪ ًا ﻣﻊ رﻳﺎﻛﺖ‬ ‫‪.3‬‬

‫اﻟﺪﻟﻴﻞ اﻟﺸﺎﻣﻞ ﻟﺘﻌﻠﻢ ﻟﻐﺎت ﺗﻄﻮﻳﺮ اﻟﻮﻳﺐ >‪<2021/‬‬

‫‪BE‬‬ ‫‪FE‬‬

‫‪ .21‬ﻧﻈﺎم إدارة اﻟﻤﺤﺘﻮى ‪Wordpress‬‬

‫ﻛﺜﻴﺮ ﻣﻦ اﻟﻤﺒﺮﻣﺠﻴﻦ ﻻ ﻳﺤﺒﻮن ذﻛﺮ ‪ wordpress‬ﻛﺨﻴﺎر ﻟﻼﺳﺘﺨﺪام ﻓﻲ اﻟﺒﺮﻣﺠﺔ‪ ،‬ﺑﺴﺒﺐ أﻧﻬﺎ ﻓﻲ اﻟﻨﻬﺎﻳﺔ ﺑﺮﻣﺠﻴﺔ‬
‫ﺟﺎﻫﺰة‪ .‬وﻟﻜﻦ ﻋﻨﺪ اﻋﺘﺒﺎر ‪ wordpress‬ﻛﻤﻨﺼﺔ ﺗﺤﻜﻢ ﺳﻴﺘﻐﻴﺮ اﻟﻤﻔﻬﻮم ﺗﻤﺎﻣﺎ‪ ،‬ﺣﻴﺚ‪:‬‬

‫‪ -‬ﻳﻤﻜﻦ اﺳﺘﺨﺪام ووردﺑﺮس ﻛﻨﻈﺎم إدارة ﻣﺤﺘﻮى ﻓﻘﻂ ﻹﻋﻄﺎء اﻟﺘﺤﻜﻢ ﻟﻠﻌﻤﻼء‪ ،‬ﺑﻴﻨﻤﺎ ﻳﺘﻢ ﺑﻨﺎء‬ ‫‪.1‬‬
‫اﻟﻮاﺟﻬﺎت ﺑﻮاﺳﻄﺔ ﻣﻨﺼﺎت ﻓﺮوﻧﺖ إﻧﺪ ﻣﺜﻞ رﻳﺎﻛﺖ‪.‬‬
‫‪ -‬ﺗﺴﺘﻄﻴﻊ ﺗﺜﺒﻴﺖ ﻣﻮﻗﻊ إﻧﺘﺮﻧﺖ ﺟﺎﻫﺰ ﺧﻼل ﻟﺤﻈﺎت ﻣﻊ ﻗﺎﻋﺪة ﺑﻴﺎﻧﺎت وﻟﻮﺣﺔ ﺗﺤﻜﻢ‬ ‫‪.2‬‬
‫‪ -‬ﺗﺴﺘﻄﻴﻊ إﻋﻄﺎء زﺑﺎﺋﻨﻚ ﻟﻮﺣﺔ ﺗﺤﻜﻢ ﻹدارة اﻟﻤﺤﺘﻮى اﻟﺨﺎص ﺑﻬﻢ‬ ‫‪.3‬‬
‫‪ -‬آﻻف اﻟﺒﺮﻣﺠﻴﺎت اﻟﺠﺎﻫﺰة اﻟﺘﻲ ﺗﺴﺘﻄﻴﻊ ﻣﻦ ﺧﻼﻟﻬﺎ إﺿﺎﻓﺔ أي ﻣﻴﺰة ﺗﺮﻳﺪﻫﺎ ﻟﻤﻮﻗﻌﻚ ﺑﻠﺤﻈﺎت‬ ‫‪.4‬‬
‫‪ -‬ﻣﺠﺘﻤﻊ دﻋﻢ ﺿﺨﻢ ﺟﺪ ًا ﻳﻤﻜﻨﻚ ﻣﻦ ﺣﻞ اﻟﻤﺸﺎﻛﻞ ﺑﺴﺮﻋﺔ‬ ‫‪.5‬‬
‫‪ -‬ﺗﺴﺘﻄﻴﻊ إﻧﺸﺎء ﺗﺼﻤﻴﻤﻚ اﻟﺨﺎص ودﻣﺠﻪ ﻣﻊ ووردﺑﺮس‬ ‫‪.6‬‬

‫اﻟﺪﻟﻴﻞ اﻟﺸﺎﻣﻞ ﻟﺘﻌﻠﻢ ﻟﻐﺎت ﺗﻄﻮﻳﺮ اﻟﻮﻳﺐ >‪<2021/‬‬

‫‪BE‬‬

‫‪ .22‬اﻟﺴﻴﺮﻓﺮات‬
‫‪Heroku, AWS‬‬ ‫ﻣﻨﺼﺎت اﺳﺘﻀﺎﻓﺔ‬

‫‪Nginx, Apache‬‬ ‫ﺳﻴﺮﻓﺮات وﻳﺐ‬

‫‪S3, Cloudinary‬‬ ‫ﻣﻨﺼﺎت ﻣﻴﺪﻳﺎ‬

‫اﻟﺪﻟﻴﻞ اﻟﺸﺎﻣﻞ ﻟﺘﻌﻠﻢ ﻟﻐﺎت ﺗﻄﻮﻳﺮ اﻟﻮﻳﺐ >‪<2021/‬‬

 ‫ﺣﺘﻰ ﻫﺬه اﻟﻠﺤﻈﺔ‪:‬‬
‫إذا وﺻﻠﺖ ﺣﺘﻰ ﻫﺬه اﻟﻠﺤﻈﺔ‪ ،‬ﻓﺄﻧﺖ ﻣﻄﻮر وﻳﺐ ﻣﺘﻜﺎﻣﻞ ‪Full Stack Developer‬‬

‫ﺗﺴﺘﻄﻴﻊ ﺑﻨﺎء واﺟﻬﺎت ﻣﺴﺘﺨﺪم ﺑﺎﻹﺿﺎﻓﺔ إﻟﻰ ﺑﺮﻣﺠﺔ ﻟﻐﺎت اﻟﺴﻴﺮﻓﺮ‬ ‫●‬
‫ﺗﺴﺘﻄﻴﻊ اﻟﺘﻌﺎﻣﻞ ﻣﻊ ﻗﻮاﻋﺪ اﻟﺒﻴﺎﻧﺎت‬ ‫●‬
‫ﺗﺴﺘﻄﻴﻊ اﻟﻌﻤﻞ ﻣﻊ اﻟـ ‪ ،API‬إﻧﺸﺎء واﺳﺘﺨﺪام‪.‬‬ ‫●‬
‫ﺗﺴﺘﻄﻴﻊ اﻟﺘﻌﺎﻣﻞ ﻣﻊ ﺑﺮوﺗﻮﻛﻮل ‪HTTP‬‬ ‫●‬
‫ﺗﺴﺘﻄﻴﻊ اﺳﺘﻼم ﻣﻮﻗﻊ إﻧﺘﺮﻧﺖ ﻣﻦ اﻟﺒﺪاﻳﺔ ﻋﻠﻰ اﻟﻨﻬﺎﻳﺔ‬ ‫●‬
‫ﻋﻠﻰ ﻣﻌﺮﻓﺔ ﺑﺠﻤﻴﻊ اﻟﻠﻐﺎت اﻟﻼزﻣﺔ ﻟﺒﻨﺎء ﻣﻮﻗﻊ إﻧﺘﺮﻧﺖ ﻣﻦ اﻟﺤﺠﻢ اﻟﻜﺒﻴﺮ‪.‬‬ ‫●‬

‫اﻟﺪﻟﻴﻞ اﻟﺸﺎﻣﻞ ﻟﺘﻌﻠﻢ ﻟﻐﺎت ﺗﻄﻮﻳﺮ اﻟﻮﻳﺐ >‪<2021/‬‬

 ‫‪ .23‬ﺗﻄﻮﻳﺮ ﺗﻄﺒﻴﻘﺎت اﻟﻤﻮﺑﺎﻳﻞ‬
‫ﺗﻢ ﺗﻄﻮﻳﺮﻫﺎ ﺑﻮاﺳﻄﺔ ﻏﻮﻏﻞ‪ ،‬ﺗﺴﺘﻄﻴﻊ ﺑﻮاﺳﻄﺘﻬﺎ إﻧﺸﺎء ﺗﻄﺒﻴﻘﺎت ﻣﻮﺑﺎﻳﻞ ﺗﻌﻤﻞ ﻋﻠﻰ ﺟﻤﻴﻊ‬
‫‪Flutter‬‬
‫اﻟﻤﻨﺼﺎت ﻣﻦ ﻗﺎﻋﺪة ﺑﻴﺎﻧﺎت واﺣﺪة‪.‬‬

‫ﺗﻢ ﺗﻄﻮﻳﺮﻫﺎ ﺑﻮاﺳﻄﺔ ﻓﻴﺴﺒﻮك‪ ،‬ﻣﻨﺼﺔ ﻣﻔﺘﻮﺣﺔ اﻟﻤﺼﺪر ﺗﺴﺘﻄﻴﻊ إﻧﺸﺎء ﺗﻄﺒﻴﻘﺎت ﻣﻮﺑﺎﻳﻞ‬
‫‪React Native‬‬
‫ﻣﺘﻮاﻓﻘﺔ ﻣﻊ ﺟﻤﻴﻊ أﻧﻈﻤﺔ اﻟﺘﺸﻐﻴﻞ‪.‬‬

‫أو ﺗﻄﺒﻴﻘﺎت اﻟﻮﻳﺐ اﻟﻤﺘﻘﺪﻣﺔ‪ ،‬واﻟﺘﻲ ﺗﻌﻨﻲ ﺗﺤﻮﻳﻞ ﻣﻮﻗﻊ اﻹﻧﺘﺮﻧﺖ اﻟﻤﻜﺘﻮب ﺑﺄي ﻟﻐﺔ‪ ،‬إﻟﻰ واﺟﻬﺔ‬
‫‪PWA‬‬
‫ﺗﻄﺒﻴﻖ ﻣﻮﺑﺎﻳﻞ‪ ،‬وﻳﺘﻢ اﺳﺘﺨﺪام ﻣﺘﺼﻔﺢ اﻹﻧﺘﺮﻧﺖ ﻹدارة اﻟﺒﺮﻣﺠﻴﺎت اﻟﻤﺘﻌﻠﻘﺔ‬

‫ﻓﻲ ﻫﺬا اﻟﻤﺠﺎل ﻳﻮﺟﺪ اﻟﻜﺜﻴﺮ ﻣﻦ اﻟﻠﻐﺎت اﻷﺧﺮى ﻳﻤﻜﻦ ﺗﻌﻠّﻤﻬﺎ أﻳﻀﺎً‪Ionic, Kotlin, Swift :‬‬

‫اﻟﺪﻟﻴﻞ اﻟﺸﺎﻣﻞ ﻟﺘﻌﻠﻢ ﻟﻐﺎت ﺗﻄﻮﻳﺮ اﻟﻮﻳﺐ >‪<2021/‬‬

 ‫‪ .23‬ﺗﻄﺒﻴﻘﺎت اﻟﻮﻳﺐ اﻟﻤﺘﻘﺪّ ﻣﺔ ‪PWA‬‬
‫ﺗﻢ إﻧﺸﺎء ﻫﺬا اﻟﻤﺼﻄﻠﺢ أوﻻً ﺿﻤﻦ ﺟﻮﺟﻞ ﻓﻲ اﻟﻌﺎم ‪ ،2015‬رﻏﻢ أن اﻟﻔﻜﺮة أﻗﺪم ﺑﻜﺜﻴﺮ ﻣﻦ ذﻟﻚ‪ ،‬وﻧﻼﺣﻆ أن اﻟﺘﺎرﻳﺦ ﺣﺪﻳﺚ ﻧﺴﺒﻴﺎً‪ ،‬ﻟﺬﻟﻚ ﻫﻲ‬
‫ﺗﻘﻨﻴﺔ ﻻزاﻟﺖ ﺣﺪﻳﺜﺔ وﻳﺘﻢ اﻟﻌﻤﻞ ﻋﻠﻴﻬﺎ ﺑﺎﺳﺘﻤﺮار‪ .‬وﻳﻌﺘﻘﺪ أن ﻫﺬه اﻟﺘﻘﻨﻴﺔ ﺳﺘﻜﻮن اﻟﻤﺴﻴﻄﺮة ﻓﻲ اﻟﺴﻨﻮات اﻟﻘﺎدﻣﺔ ﻓﻲ ﻋﺎﻟﻢ اﻟﻮﻳﺐ‬
‫واﻟﻤﻮﺑﺎﻳﻞ ﻣﻌﺎً‪.‬‬

‫اﻟﻤﺴﺎوئ‪:‬‬ ‫اﻟﻤﺤﺎﺳﻦ‪:‬‬
‫اﻟﺘﻮاﻓﻖ ﻣﻊ ﻧﻈﺎم ‪ ،iOS‬أول دﻋﻢ ﻟﻠﺘﻘﻨﻴﺔ ﻣﻦ اﻟﻨﺴﺨﺔ ‪11.3‬‬ ‫‪-‬‬ ‫ﺗﻌﻤﻞ ﺣﺘﻰ ﻣﻊ ﻋﺪم وﺟﻮد اﺗﺼﺎل إﻧﺘﺮﻧﺖ‬ ‫‪-‬‬
‫ﻻ ﺗﺪﻋﻢ اﻟﻤﻮﺑﺎﻳﻼت اﻟﻘﺪﻳﻤﺔ )ﺑﺴﺒﺐ ﺣﺪاﺛﺔ اﻟﺘﻘﻨﻴﺔ(‬ ‫‪-‬‬ ‫أداء ﺑﺴﺮﻋﺔ ﻋﺎﻟﻴﺔ ﺟﺪ ًا‬ ‫‪-‬‬
‫ﻻ ﺗﺴﺘﻄﻴﻊ ﻋﻤﻞ ﻛﻞ ﺷﻲء ﻋﻠﻰ اﻟﻤﻮﺑﺎﻳﻞ‪ .‬ﺣﺘﻰ اﻵن ﻏﻴﺮ ﻣﺴﻤﻮح ﻟﻠﺘﻘﻨﻴﺔ‬ ‫‪-‬‬ ‫ﺣﺠﻢ ﺧﻔﻴﻒ ﺟﺪ ًا ﺑﺴﺒﺐ ﻋﺪم وﺟﻮد ﻣﻠﻒ ﻟﻠﺘﻨﺼﻴﺐ‬ ‫‪-‬‬
‫ﺑﺎﻟﺪﺧﻮل إﻟﻰ ﻣﻴﺰات اﻟﻤﻮﺑﺎﻳﻞ اﻷﺳﺎﺳﻴﺔ ﻣﺜﻞ اﻟﺒﻠﻮﺗﻮث واﻟﺤﺴﺎﺳﺎت واﻟﻜﺎﻣﻴﺮات‬ ‫ﻻ ﺣﺎﺟﺔ ﻟﺘﺤﺪﻳﺚ اﻟﺘﻄﺒﻴﻖ‪ ،‬ﻳﺘﻢ اﻟﺘﺤﺪﻳﺚ ﻣﻦ اﻟﻮﻳﺐ ﻣﺒﺎﺷﺮة‬ ‫‪-‬‬
‫اﻟﻤﺘﻘﺪﻣﺔ‬ ‫ﺗﺘﺼﺮف ﺗﻤﺎﻣ ًﺎ ﻛﺄي ﺗﻄﺒﻴﻖ ﻣﻮﺑﺎﻳﻞ‬ ‫‪-‬‬
‫اﺳﺘﻬﻼك ﺿﺌﻴﻞ ﻟﻠﺒﻴﺎﻧﺎت‬ ‫‪-‬‬
‫اﻟﺘﺨﻠﻲ ﻋﻦ ﺳﻴﻄﺮة ﻣﺘﺎﺟﺮ اﻟﺘﻄﺒﻴﻘﺎت‬ ‫‪-‬‬

‫اﻟﺪﻟﻴﻞ اﻟﺸﺎﻣﻞ ﻟﺘﻌﻠﻢ ﻟﻐﺎت ﺗﻄﻮﻳﺮ اﻟﻮﻳﺐ >‪<2021/‬‬

 ‫‪ .24‬اﻟﺨﻮارزﻣﻴﺎت‬
‫ﺗﻢ وﺿﻌﻬﺎ ﻓﻲ اﻟﻨﻬﺎﻳﺔ ﻷن اﻟﺨﻮارزﻣﻴﺎت ﺻﻌﺒﺔ اﻟﺘﻌﻠّﻢ‬
‫ﻓﻲ اﻟﺒﺪاﻳﺎت‪ ،‬وﻗﺪ ﺗﻘﻮد اﻟﻤﺘﻌﻠﻢ إﻟﻰ اﻹﺣﺒﺎط ﻓﻲ ﺑﺪاﻳﺎﺗﻪ‪،‬‬
‫وﻟﻜﻦ ﺑﻌﺪ اﻟﺨﺒﺮة ﺗﺴﺎﻋﺪ اﻟﺨﻮارزﻣﻴﺎت ﻋﻠﻰ ﺗﻨﻈﻴﻢ‬
‫اﻟﻌﻤﻞ واﻟﺘﻮﺳﻊ أﻛﺒﺮ ﻓﻲ اﻟﻤﺸﺎرﻳﻊ‬

‫اﻟﺪﻟﻴﻞ اﻟﺸﺎﻣﻞ ﻟﺘﻌﻠﻢ ﻟﻐﺎت ﺗﻄﻮﻳﺮ اﻟﻮﻳﺐ >‪<2021/‬‬

 ‫واﻵن… ﻣﺎذا؟‬

‫ﺳﻮق اﻟﻌﻤﻞ‬ ‫ﺑﻮرﺗﻔﻮﻟﻴﻮ‬ ‫ﻣﺸﺮوﻋﻚ اﻟﺨﺎص‬ ‫ﺗﻌﻠّﻢ اﻷﺳﺎﺳﻴﺎت‬ ‫ﺧﻄﺔ اﻟﺘﻌﻠّﻢ‬

‫ﻻ ﺗﺘﺮدد ﻓﻲ اﻟﺘﻘﺪم ﻋﻠﻰ‬ ‫أﻧﺸﺊ ﻣﻨﺬ اﻟﺒﺪاﻳﺔ ﻣﻜﺎﻧ ًﺎ ﻟﺘﻀﻊ‬ ‫ﻻ ﺗﻜﺘﻔﻲ ﺑﺎﻟﺘﻌﻠّﻢ ﻓﻘﻂ‪ ،‬ﺑﻞ‬ ‫داﺋﻤ ًﺎ ﺗﻌﻠﻢ ﻣﺎ ﻳﻀﻌﻚ ﻋﻠﻰ‬ ‫ﻗﻢ ﺑﻮﺿﻊ ﺧﻄﺘﻚ اﻟﺨﺎﺻﺔ‬
‫وﻇﻴﻔﺔ‪ ،‬ﻟﻴﺴﺖ ﻛﻞ اﻟﺸﺮﻛﺎت‬ ‫ﻋﻠﻴﻪ ﺟﻤﻴﻊ أﻋﻤﺎﻟﻚ‪،‬‬ ‫ﻗﻢ ﺑﺈﻧﺸﺎء ﻣﺸﺮوﻋﻚ‬ ‫ﻣﺴﺎر اﻟﻌﻤﻞ‪ ،‬وأﺛﻨﺎء اﻟﻌﻤﻞ‬ ‫ﻟﻠﺘﻌﻠﻢ ﺑﻨﺎء ﻋﻠﻰ اﻟﻬﺪف اﻟﺬي‬
‫ﺗﻄﻠﺐ ﻣﺤﺘﺮﻓﻴﻦ‬ ‫ﺳﺘﻨﺪﻫﺶ ﺑﻌﺪ ﻓﺘﺮة ﺑﻜﻤﻴﺔ‬ ‫اﻟﺨﺎص اﻟﺬي ﺗﻄﺒﻖ ﻋﻠﻴﻪ ﻛﻞ‬ ‫ﺗﺘﻌﻠﻢ ﻛﻞ ﺷﻲء آﺧﺮ ﺣﺴﺐ‬ ‫ﺗﺮﻳﺪ اﻟﻮﺻﻮل إﻟﻴﻪ‬
‫ﻣﺎ ﻗﻤﺖ ﺑﻌﻤﻠﻪ‬ ‫ﻣﺎ ﺗﺘﻌﻠﻤﻪ‬ ‫اﻟﻄﻠﺐ‬

‫اﻟﺪﻟﻴﻞ اﻟﺸﺎﻣﻞ ﻟﺘﻌﻠﻢ ﻟﻐﺎت ﺗﻄﻮﻳﺮ اﻟﻮﻳﺐ >‪<2021/‬‬