دليل مختصر لإنشاء المواقع الإلكترونية من البداية الى الاتقان.
لكل شخص مهتم بتطوير الويب رح أبدأ سلسلة من
🌟3 ثريدات🌟أشرح فيها المراحل الثلاثة من أجل أن تصبح مطور ويب حقيقي.
رح أبدأ في هذا الثريد المحطة الأولى التي هي :
أدوات ولغات تصميم الموقع.
أعرني انتباهك و ركز معي🧠.
لكل شخص مهتم بتطوير الويب رح أبدأ سلسلة من
🌟3 ثريدات🌟أشرح فيها المراحل الثلاثة من أجل أن تصبح مطور ويب حقيقي.
رح أبدأ في هذا الثريد المحطة الأولى التي هي :
أدوات ولغات تصميم الموقع.
أعرني انتباهك و ركز معي🧠.
بداية الرحلة – الأدوات الأساسية المساعدة في انشاء مواقع الويب
تحتاج رحلتنا بعد حصولنا على الخارطة إلى أدوات تقود الرحلة وهي البرمجيات الأساسية اللازمة لبدء تطوير الموقع:
تحتاج رحلتنا بعد حصولنا على الخارطة إلى أدوات تقود الرحلة وهي البرمجيات الأساسية اللازمة لبدء تطوير الموقع:
المتصفح:
يحتاج مطور الويب المختص بتصميم الموقع إلى المتصفح بشكل شبه دائم، حيث يستخدم لتجربة الموقع أثناء عملية التصميم ومن أهم وأشهر المتصفحات الجيدة للمصممين: Google Chrome – Firefox، و يعتبر متصفح كروم الأكثر شيوعًا بينهما على الرغم من قوة متصفح فايرفوكس.
يحتاج مطور الويب المختص بتصميم الموقع إلى المتصفح بشكل شبه دائم، حيث يستخدم لتجربة الموقع أثناء عملية التصميم ومن أهم وأشهر المتصفحات الجيدة للمصممين: Google Chrome – Firefox، و يعتبر متصفح كروم الأكثر شيوعًا بينهما على الرغم من قوة متصفح فايرفوكس.
المحرر:
يتميز تطوير الويب بإمكانية استخدام أي محرر نصوص مهما كان لكتابة الأكواد البرمجية، وهو أداة يحتاجها مصمم الموقع والمبرمج المختص بالسيرفر، ويوجد بعض البرامج الأفضل والتي توفر العديد من الإضافات الخاصة بالبرمجة
يتميز تطوير الويب بإمكانية استخدام أي محرر نصوص مهما كان لكتابة الأكواد البرمجية، وهو أداة يحتاجها مصمم الموقع والمبرمج المختص بالسيرفر، ويوجد بعض البرامج الأفضل والتي توفر العديد من الإضافات الخاصة بالبرمجة
لتسهيل كتابة البرامج وفهمها ومن أشهر المحررات: VS Code – Atom – WebStorm وجميعها قوية وملائمة لتطوير الويب إلا أن الأكثر شيوعًا بينها هو VS Code.
برنامج التصميم: يحتاج المطوير إلى بعض الصور بمقاسات معينة أو بألوان معينة أو إلى تصماميم خاصة بمكونات الموقع، لذا عليهم الاتكال على أنفسهم في هذه النقطة بعض الشيء واستخدام برامج تصميم،
وبالرغم من الشهرة الكبيرة لبرنامج فوتوشوب وأنه يفي بالغرض، إلا أن شركة أدوبي أطلقت برنامجًا مختصًا بتصميم واجهات المواقع وتطبيقات الموبايل يدعى Adobe XD يفضل استخدامه
المحطة الأولى في انشاء مواقع الويب – تصميم الموقع Front-end
في المحطة الأولى في رحلتنا إلى انشاء مواقع الويب سنتوقف عند تفاصيل بناء شكل الموقع وقدرته على التفاعل مع المستخدمين،
في المحطة الأولى في رحلتنا إلى انشاء مواقع الويب سنتوقف عند تفاصيل بناء شكل الموقع وقدرته على التفاعل مع المستخدمين،
إلى جانب كونه متناسبًا مع جميع أجهزتهم وبناء كل ما يحتاجه الموقع من ناحية المستخدم، وللقيام بذلك علينا البدء بتعلم عدة أمور وتكون الخطوات كالتالي:
⬅️ الخطوة الأولى – أساسيات التصميم HTML/CSS
غالبًا يتعلم المبتدئين الأساسيات معًا، حيث يبني المطور عناصر الواجهة عن طريق HTML ثم يرتبها ويضيف لها بعض الجمالية عن طريق CSS، ولا يمكن المضي قدمًا في تطوير الويب دون أساس جيد لا بد منه.
غالبًا يتعلم المبتدئين الأساسيات معًا، حيث يبني المطور عناصر الواجهة عن طريق HTML ثم يرتبها ويضيف لها بعض الجمالية عن طريق CSS، ولا يمكن المضي قدمًا في تطوير الويب دون أساس جيد لا بد منه.
وهنا لا بد من ذكر بعض النقاط الهامة الواجب اتقانها في هذه الخطوة:
-دلالات عناصر HTML5.
-أساسيات ترتيب العناصر باستخدام CSS3.
-الشبكة ضمن صفحة الويب وخصائص Flexbox.
-المتحولات في CSS.
-استخدام أدوات التطوير ضمن المتصفح.
-دلالات عناصر HTML5.
-أساسيات ترتيب العناصر باستخدام CSS3.
-الشبكة ضمن صفحة الويب وخصائص Flexbox.
-المتحولات في CSS.
-استخدام أدوات التطوير ضمن المتصفح.
⬅️ الخطوة الثانية – بناء تصميم Responsive
بعد تعلم مبادئ بناء صفحة الويب وامتلاك معرفة كافية في أساسيات التصميم، على المطور تعلم بناء موقع متوافق مع جميع الأجهزة والشاشات وهو ما يسمى Responsive Design، وهو ضرورة قصوى في بناء أي موقع ، يشمل ذلك معرفة عدة نقاط منها:
بعد تعلم مبادئ بناء صفحة الويب وامتلاك معرفة كافية في أساسيات التصميم، على المطور تعلم بناء موقع متوافق مع جميع الأجهزة والشاشات وهو ما يسمى Responsive Design، وهو ضرورة قصوى في بناء أي موقع ، يشمل ذلك معرفة عدة نقاط منها:
-تنظيم Viewport.
-بناء العرض بطريقة مرنة Fluid لتتناسب مع أي جهاز.
-تنظيم عناصر الميديا (صور وفيديو).
-استخدام الوحدات النسبية مثل rem وقت اللزوم لتحسين -ظهور الموقع في مختلف الأجهزة.
-التصميم بما يتناسب مع الموبايل إلى جانب الحاسب.
-بناء العرض بطريقة مرنة Fluid لتتناسب مع أي جهاز.
-تنظيم عناصر الميديا (صور وفيديو).
-استخدام الوحدات النسبية مثل rem وقت اللزوم لتحسين -ظهور الموقع في مختلف الأجهزة.
-التصميم بما يتناسب مع الموبايل إلى جانب الحاسب.
⬅️ الخطوة الثالثة – برمجة التصميم
مهما كان الطريق الذي ستسلكه لاحقًا في تطوير الموقع فمن المهم جدًا تعلم لغة البرمجة JavaScript، فهي الأساس لإضافة الديناميكية للموقع وبرمجته من جهة المستخدم،
مهما كان الطريق الذي ستسلكه لاحقًا في تطوير الموقع فمن المهم جدًا تعلم لغة البرمجة JavaScript، فهي الأساس لإضافة الديناميكية للموقع وبرمجته من جهة المستخدم،
وهي أساس أي إطار برمجي لتصميم الموقع وهي متاحة في برمجة السيرفر كما سنعرف قريبًا، إذًا لا بد من معرفة أساسيات لغة جافا سكريبت كأول لغة برمجية في مسيرة تطوير المواقع، وهنا بعض النقاط الواجب معرفتها:
-أنواع البيانات والتوابع والشروط والحلقات والمعاملات.
-فهم عملية التواصل بين JS و HTML وفهم جيد للـ DOM والأحداث.
-معرفة طرق تشكيل البيانات بطريقة موحدة مثل JSON و XML.
-آلية إرسال الطلبات عبر الإنترنت Requests.
-مفاهم متقدمة في JS تشمل: التوابع ذات السهم، الـ Promise وأهم مفاهيم
-فهم عملية التواصل بين JS و HTML وفهم جيد للـ DOM والأحداث.
-معرفة طرق تشكيل البيانات بطريقة موحدة مثل JSON و XML.
-آلية إرسال الطلبات عبر الإنترنت Requests.
-مفاهم متقدمة في JS تشمل: التوابع ذات السهم، الـ Promise وأهم مفاهيم
ES6 الشهيرة.
عند هذه المحطة يمكنك أن تقول أنك أصبحت ملمًّا بأساسيات تصميم المواقع.
ستحتاج الآن إلى نقل خبراتك إلى مستوى معرفي آخر وبدء تقليل الوقت وزيادة الكفاءة بالعمل وذلك عن طريق استخدام بعض الأطر البرمجية والتصميمية الشهيرة.
عند هذه المحطة يمكنك أن تقول أنك أصبحت ملمًّا بأساسيات تصميم المواقع.
ستحتاج الآن إلى نقل خبراتك إلى مستوى معرفي آخر وبدء تقليل الوقت وزيادة الكفاءة بالعمل وذلك عن طريق استخدام بعض الأطر البرمجية والتصميمية الشهيرة.
⬅️ الخطوة الرابعة – استخدام إطار تصميم HTML/CSS
على الرغم من أن إطار أو مكتبة Bootstrap هي الأشهر على الإطلاق بين إطارات تنظيم التصميم، إلا أنه هنالك مكتبات أخرى يمكن تجريبها مثل Materialize أو Bulma،
على الرغم من أن إطار أو مكتبة Bootstrap هي الأشهر على الإطلاق بين إطارات تنظيم التصميم، إلا أنه هنالك مكتبات أخرى يمكن تجريبها مثل Materialize أو Bulma،
ومع ذلكف من الضروري فهم Bootstarp، وهي في الواقع بسيطة لا تحتاج أي وقت للتعليم فقط على المطور معرفة ما يمكنها القيام به ليقوم باستخدام الكلاسات المناسبة للتصميم.
⬅️ الخطوة الخامسة – معرفة أساسيات jQuery
jQuery هي مكتبة غنية جدًا وشهيرة للغة جافا سكريبت، تسهل بشكل مذهل عملية التعامل مع ملفات HTML وعناصر الواجهات ضمنها، إلى جانب كونها متوافقة مع جميع المتصفحات،
jQuery هي مكتبة غنية جدًا وشهيرة للغة جافا سكريبت، تسهل بشكل مذهل عملية التعامل مع ملفات HTML وعناصر الواجهات ضمنها، إلى جانب كونها متوافقة مع جميع المتصفحات،
وهي ليست منفصلة عن لغة جافا سكريبت بل مساعدة لها في بعض العمليات البرمجية التي تتطلب كتابة الكثير بلغة جافا سكريبت لولا وجودها بشكل أسهل بكثير في jQuery.
⬅️ الخطوة السادسة – معرفة أساسيات Ajax
Ajax هي اختصار لـ (Asynchronous JavaScript and XML)، وهي تقنية ويب يمكنها تحديث صفحات الويب بشكل غير متزامن من خلال تبادل البيانات مع السيرفر دون الحاجة لتحديث الصفحة،
Ajax هي اختصار لـ (Asynchronous JavaScript and XML)، وهي تقنية ويب يمكنها تحديث صفحات الويب بشكل غير متزامن من خلال تبادل البيانات مع السيرفر دون الحاجة لتحديث الصفحة،
وهي مرنة بحيث يمكن تغيير كامل محتوى صفحة الويب دون تحديثها وأشهر الأمثلة عليها اقتراحات غوغل التي تظهر في مربع البحث عندما نبدأ بالكتابة.
⬅️ الخطوة السابعة – استخدام Sass
Sass أو تعرف بأنها معالج لكتابة CSS بشكل متقدم، حيث تتيح التعامل مع المتحولات واستخدام تعليمات الإدخال وبعض القواعد وبعض التعليمات الأخرى، بالإضافة لتنظيم ظهور الخصائص بشكل أكبر حيث تساعد على جعل CSS أسهل وأكثر مرونة.
Sass أو تعرف بأنها معالج لكتابة CSS بشكل متقدم، حيث تتيح التعامل مع المتحولات واستخدام تعليمات الإدخال وبعض القواعد وبعض التعليمات الأخرى، بالإضافة لتنظيم ظهور الخصائص بشكل أكبر حيث تساعد على جعل CSS أسهل وأكثر مرونة.
⬅️ الخطوة الثامنة – استخدام بعض الأدوات والأوامر
بعد وصول أي مطور إلى هذه المرحلة سوف يحتاج استخدام بعض الأدوات والتعليمات في واجهة الأوامر Terminal/Command line، ولا داعي للقلق حولها فالأمر بسيط ينحصر بعدد قليل من التعليمات التي يتعلمها المطور عند الحاجة ومن الأدوات الهامة:
بعد وصول أي مطور إلى هذه المرحلة سوف يحتاج استخدام بعض الأدوات والتعليمات في واجهة الأوامر Terminal/Command line، ولا داعي للقلق حولها فالأمر بسيط ينحصر بعدد قليل من التعليمات التي يتعلمها المطور عند الحاجة ومن الأدوات الهامة:
استخدام Git: أي مطور سيتعامل مع git عاجلًا أم آجلًا، حيث أن تعلم أساسيات git فقط ستكون كافية عند البدء بالعمل لصالح أي شركة، فهو الأداة التي
تسهل التعامل مع النسخ المطورة من الموقع إلى جانب العمل الجماعي وإدارة المشروع البرمجي. استخدم git أثناء بناء المشاريع فسيضيف ذلك نقاطًا إيجابية إلى خبراتك المهنية.
استخدام npm أو yarn: في الحقيقية الأداتين تستخدمان لنفس الهدف تقريبًا وبنفس الطريقة إلا أنه يمكن اعتبار Yarn مجموعة ضمن npm، وهما أداتان ﻹدارة الحزم
والمكتبات والإضافات الخارجية بشكل عام، سواء كانت تلك الإضافات بلغة js أو أي لغة أو تقنية أخرى، حيث يمكن إضافتها أو حذفها بتعليمة بسيطة.
⬅️ الخطوة التاسعة – استخدام إطار برمجي JS
لم يعد منتشرًا بناء مواقع قوية دون استخدام أطر عمل تناسب حاجة الموقع، ولاختيار الإطار المناسب للموقع على المطور معرفة الخيارات المتاحة، ولعل أشهر الأطر البرمجية هي:
لم يعد منتشرًا بناء مواقع قوية دون استخدام أطر عمل تناسب حاجة الموقع، ولاختيار الإطار المناسب للموقع على المطور معرفة الخيارات المتاحة، ولعل أشهر الأطر البرمجية هي:
إطار React: وهو إطار طرحته شركة فيسبوك، وهو الأكثر شعبية بين مختلف الأطر البرمجية، حيث يسهل إنشاء واجهات تفاعلية محببة بفضل اعتماده مبدأ المكونات، حيث يبني المطور مكوناته الخاصة ويستخدمها في أي صفحة يشاء،
كما أن المواقع المعتمدة على الرياكت تكون سهلة التحديث والتطوير وتصحيح الأخطاء، وتعمل فيسبوك بشكل دائم على تطوير وتحسين هذا الإطار ليلبي كافة حاجات المطورين، وتعتبر النسخة 16.8 الأحدث حتى الآن من مكتبة React.
إطار Angular: وهو الإطار الذي طرحته شركة غوغل لتسهيل عمل المطورين، حيث يعتمد على HTML وعلى لغات Javascript/TypeScript، يجمع بين القوالب والمكونات المعتمدة على بعضها البعض
ويتيح أفضل الطرق لبناء موقع قابل للصيانة والتطوير بما يتناسب مع التقنيات المتطورة، وهو خيار جيد وحديث يمكن الاعتماد عليه حيث كان الأكثر شيوعًا عام 2018، والنسخة الأحدث منه اليوم هي Angular 7، لذا يمكن التفكير في استخدامه بجدية.
إطار Vue: تعتبر مكتبة Vue من أسهل المكتبات من ناحية التعلم، وقد ازدهرت في الآونة الأخيرة بشكل كبير، وهي من الأطر الملائمة للمشاريع الصغيرة ومواقع الصفحة الواحدة،
ويمكن بسرعة كبيرة تعلمها وتطبيقها والتمتع بنتائجها، وفي الواقع فإن الشركات الكبرى بدأت باستخدامها بشكل أكبر وازدادت الرغبة بتوظيف خبراء Vue.
⬅️ الخطوة العاشرة – أدوات إدارة الحالة
عند التعامل مع مشاريع كبيرة لا بد للمطور من التفكير بأدوات تنظيم وإدارة البيانات وحالات التطبيق التي تتغير وفقًا لتغير البيانات، ولذا يوجد ثلاث أدوات هامة تتبع الأطر السابقة وتسهل إدارة الحالة وهي:
عند التعامل مع مشاريع كبيرة لا بد للمطور من التفكير بأدوات تنظيم وإدارة البيانات وحالات التطبيق التي تتغير وفقًا لتغير البيانات، ولذا يوجد ثلاث أدوات هامة تتبع الأطر السابقة وتسهل إدارة الحالة وهي:
Redux: أداة لإدارة حالة البيانات يمكن استخدامها ضمن الموقع لتحسين عمليات التحكم بالحالة.
VueX: وهذه أداة أخرى شهيرة لتنظيم حالة البيانات.
✅هنا أصبح بإمكانك أن تطلق على نفسك اسم Front-End Developer ويمكنك الحصول على عمل.✅
VueX: وهذه أداة أخرى شهيرة لتنظيم حالة البيانات.
✅هنا أصبح بإمكانك أن تطلق على نفسك اسم Front-End Developer ويمكنك الحصول على عمل.✅
جاري تحميل الاقتراحات...