لكل من ينوي تعلم تطوير المواقع..
تحت هذه التغريدة سأضع أشهر التقنيات و اللغات المختلفة المستخدمة في تطوير المواقع و سأوضح خارطة الطريق لمن أراد الدخول في هذا المجال أو التقدم فيه...
#برمجة #حزب_المبرمجين
تحت هذه التغريدة سأضع أشهر التقنيات و اللغات المختلفة المستخدمة في تطوير المواقع و سأوضح خارطة الطريق لمن أراد الدخول في هذا المجال أو التقدم فيه...
#برمجة #حزب_المبرمجين
أولا: html + css و هما اللغتان الأساسيتان لوضع هيكل صفحات المواقع و تصميمها.. حيث تستخدم الhtml لتحديد محتوى الصفحة و طريقة توزيع هذا المحتوى، ثم تستخدم الcss لإضافة التصميم على هذا المحتوى (لون الخط، حجم الفقرات، لون الخلفية، الظلال، ترتيب العناصر..الخ)
تعتبر الhtml + css تقنيات أساسية حيث لايوجد تقنيات بديلة يمكن اختيارها لعمل الصفحات و تصميمها للموقع
أحد التقنيات الإضافية التي يمكن أن تستخدم مع الcss هي الSass أو الless و هي تقنيات تحول كتابة أكواد الcss إلى طريقة أكثر مرونة..
مثال: استخدام متغير ليعبر عن اللون و بمجرد الحاجة لتغيير ألوان الموقع يتم تغيير قيمة هذا المتغير فقط.. بالإضافة لتسهيلات أخرى عديدة
مثال: استخدام متغير ليعبر عن اللون و بمجرد الحاجة لتغيير ألوان الموقع يتم تغيير قيمة هذا المتغير فقط.. بالإضافة لتسهيلات أخرى عديدة
٢: الجافاسكريبت-Javascript
و هي اللغة التي تستخدم لإضافة المنطق البرمجي على الصفحات، مثلا: تغيير لون أحد عناصر الصفحة عند الضغط على زر معين، و كذلك تعتبر الجافاسكريبت خيارا أساسيا و لا وجود لبديل فعال عوضا عنها
و هي اللغة التي تستخدم لإضافة المنطق البرمجي على الصفحات، مثلا: تغيير لون أحد عناصر الصفحة عند الضغط على زر معين، و كذلك تعتبر الجافاسكريبت خيارا أساسيا و لا وجود لبديل فعال عوضا عنها
ذكر الجافا سكريبت يتطلب ذكر الjQuery معها.. و هي مكتبة يمكن إضافتها لتسهيل كتابة أكواد الجافا سكريبت و تنفيذها بطرق أبسط.. استخدام الjQuery يبقى خيارا يحدده المبرمج و ليس مجبرا عليه.. لكنها منتشرة بشكل كبير جدا و قلما يخلو موقع منها
٣- المكتبات أو أطر العمل-frameworks- المساعدة على التصميم:
و هي تساعد بشكل كبير على إنشاء عناصر (أزرار-جداول-نماذج..الخ) في الصفحة بالإضافة إلى العديد من الخيارات التي تسهل ترتيب العناصر في الصفحة،
أشهرها بلا منازع الbootstrap
و هي تساعد بشكل كبير على إنشاء عناصر (أزرار-جداول-نماذج..الخ) في الصفحة بالإضافة إلى العديد من الخيارات التي تسهل ترتيب العناصر في الصفحة،
أشهرها بلا منازع الbootstrap
و هناك خيارات أخرى مثل: materialize أو semantic UI و لكل منها ميزاته، فمثلا خيارات الألوان و الأشكال الجاهزة في materialize أكثر بكثير منها في الbootstrap بالإضافة لدعمها القوي لنمط شهير في التصميم و هو الmaterial design و لكن يبقى الbootstrap هو الأشهر و الأكثر انتشارا
استخدام أحد هذه الخيارات ليس إجباريا كذلك، لكن الاعتماد على الcss-html-Javascript بشكل كامل دون استخدام أحد الخيارات المذكورة سيزيد من وقت العمل بشكل كبير و سيقلل من جمالية و جودة النتائج و هو أمر نادر الحدوث في المواقع بصفة عامة
تعلم هذه الأجزاء: html-css-Javascript-jquery-bootstrap يعني إكمال المرحلة الأولى من تطوير المواقع و يطلق فيها على المطور:
frontend developer
frontend developer
ثم تأتي بعدها المرحلة الثانية و هي الخاصة ببرمجة منطق الموقع على السيرفر و التعامل مع قاعدة البيانات و التي يطلق عليها:
Backend development
و هذه المرحلة تحوي العديد من الخيارات المختلفة و هي أكثر بكثير من الخيارات الموجودة لتطوير الfrontend و خياراتها كالتالي:
Backend development
و هذه المرحلة تحوي العديد من الخيارات المختلفة و هي أكثر بكثير من الخيارات الموجودة لتطوير الfrontend و خياراتها كالتالي:
أولا: اللغات المستخدمة لبرمجة السيرفر..
و يستخدم فيها عدد من اللغات أو التقنيات أشهرها:
١- node js: و هي تقنية توفر الإمكانية لكود الجافا سكريبت أن يعمل في السيرفر و بالتالي فإن اللغة المستخدمة فيها هي الجافاسكريبت
٢- php
٣- python
٤- c#
و يستخدم فيها عدد من اللغات أو التقنيات أشهرها:
١- node js: و هي تقنية توفر الإمكانية لكود الجافا سكريبت أن يعمل في السيرفر و بالتالي فإن اللغة المستخدمة فيها هي الجافاسكريبت
٢- php
٣- python
٤- c#
لكل من هذه اللغات عيوبه و ميزاته و الجدل حول الأفضل بينها لا ينتهي، و في النهاية اختيار أي واحدة منها و تعلمها سيؤدي الغرض.. و لذلك على مبرمج المواقع أن يختار أحدها و يتعلمه بشكل مفصل حتى يتقنها و يصبح خبيرا فيها
و الحقيقة أن تعلم اللغة هي الخطوة الأولى و هي الخطوة الأسهل..
تطوير المنطق على السيرفر و برمجة قواعد البيانات و التعامل معها باستخدام اللغة وحدها سيكلف المبرمج الكثير من الوقت و الجهد.. إذا ما هو الخيار الآخر؟
تطوير المنطق على السيرفر و برمجة قواعد البيانات و التعامل معها باستخدام اللغة وحدها سيكلف المبرمج الكثير من الوقت و الجهد.. إذا ما هو الخيار الآخر؟
الخيار الآخر هو استخدام أحد أطر العمل-frameworks- الخاصة بكل لغة حيث أن ميزاتها كثيرة جدا، منها:
١- تختصر الكثير من الوقت و الجهد
٢- تسهل بشكل كبير العمل مع فريق العمل
٣- توفر بعض الاحتياطات الخاصة ببعض جوانب حماية الموقع من الاختراق او الاطلاع على البيانات
و غيرها..
١- تختصر الكثير من الوقت و الجهد
٢- تسهل بشكل كبير العمل مع فريق العمل
٣- توفر بعض الاحتياطات الخاصة ببعض جوانب حماية الموقع من الاختراق او الاطلاع على البيانات
و غيرها..
لكن ماهو إطار العمل؟
إطار العمل هي مجموعة كبيرة من ملفات الأكواد الجاهزة و التي تعتبر أساسا مشتركا لأغلب المواقع حيث يبدأ المطور عمله من خلالها بدلا من البدء من الصفر
إطار العمل هي مجموعة كبيرة من ملفات الأكواد الجاهزة و التي تعتبر أساسا مشتركا لأغلب المواقع حيث يبدأ المطور عمله من خلالها بدلا من البدء من الصفر
و لذا يعتبر استخدام أطر العمل أمرا أساسيا، و لكل لغة كذلك أطر عمل مختلفة، و كذلك الجدل حول أفضل إطار عمل لكل لغة لا ينتهي و لكل أسبابه و حجته.. و سأذكر أشهر أطر العمل لكل لغة..
أولا: node js..
أشهر إطار عمل فيها و أكثرها انتشارا هو express و يمتاز ببساطته و سهولته..
و يوجد خيارات أخرى عديدة.. منها: sails.js و adonis.js و هو شبيه بشكل كبير لإطار عمل laravel الخاص بلغة الphp
أشهر إطار عمل فيها و أكثرها انتشارا هو express و يمتاز ببساطته و سهولته..
و يوجد خيارات أخرى عديدة.. منها: sails.js و adonis.js و هو شبيه بشكل كبير لإطار عمل laravel الخاص بلغة الphp
ثانيا: php
أشهر إطار عمل فيها هو laravel و الذي يمتاز بتوفر العديد من الأوامر التي تقوم بعمل ملفات جاهزة دون الحاجة لقضاء الوقت في بنائها، و كذلك يوجد خيارات أخرى مثل:
Symfony, code igniter, Yii, cake php
أشهر إطار عمل فيها هو laravel و الذي يمتاز بتوفر العديد من الأوامر التي تقوم بعمل ملفات جاهزة دون الحاجة لقضاء الوقت في بنائها، و كذلك يوجد خيارات أخرى مثل:
Symfony, code igniter, Yii, cake php
ثالثا: python..
و أشهر إطاري عمل فيها: django, flask
رابعا: c#
و أشهر إطار عمل فيها: asp .net
و أشهر إطاري عمل فيها: django, flask
رابعا: c#
و أشهر إطار عمل فيها: asp .net
بعد تعلم برمجة السيرفر يجب التعرف على قواعد البيانات و طريقة التعامل معها و كغيرها من أجزاء تطوير المواقع فإنها تحتوي على عدد من الخيارات التي يمكن استخدامها
في البداية يجب التنويه على أن قواعد البيانات تنقسم لقسمين:
relational (sql) - non-relational (NoSql)
و لا يتسع المجال لذكر أوجه التشابه و الاختلاف.. و لكن يمكن الاطلاع عليه من هذه المقالة التي تقارن بين النوعين:
link.medium.com
relational (sql) - non-relational (NoSql)
و لا يتسع المجال لذكر أوجه التشابه و الاختلاف.. و لكن يمكن الاطلاع عليه من هذه المقالة التي تقارن بين النوعين:
link.medium.com
و من المفترض أن اختيار النوع يكون بناء على طبيعة المشروع.. إلا أن الاختيار غالبا - بناء على ملاحظتي على الأقل- يكون للsql
ولا أعتقد أن السبب في ذلك طبيعة المشروع بقدر ما هو انتشار الsql بشكل أكبر بين المطورين
ولا أعتقد أن السبب في ذلك طبيعة المشروع بقدر ما هو انتشار الsql بشكل أكبر بين المطورين
أشهر قواعد البيانات من النوع الأول - sql-:
MySql بالإضافة لوجود خيارات أخرى مثل Oracle, PostgreSql
أما النوع الثاني- noSql فأشهرها: mongoDb
و على مبرمج المواقع أن يتعلم أحد قواعد البيانات و يتقنها، و لعله من المناسب أن يكون البدء بMySql ثم التوسع لغيرها إن دعت الحاجة
MySql بالإضافة لوجود خيارات أخرى مثل Oracle, PostgreSql
أما النوع الثاني- noSql فأشهرها: mongoDb
و على مبرمج المواقع أن يتعلم أحد قواعد البيانات و يتقنها، و لعله من المناسب أن يكون البدء بMySql ثم التوسع لغيرها إن دعت الحاجة
بعد تعلم لغة برمجة السيرفر مع إطار عمل مناسب لها بالإضافة لتعلم قواعد البيانات و طريقة التعامل معها يكون المبرمج قد وصل مرحلة يطلق عليه فيها: backend developer
و إذا جمع المطور بين تقنيات الfrontend و الbackend يطلق عليه: full stack developer✌?
و إذا جمع المطور بين تقنيات الfrontend و الbackend يطلق عليه: full stack developer✌?
و إن أرادالمطور التقدم أكثر بعد ذلك فإن هناك بعض التقنيات أو أطر العمل التي تحسن كثيرا من أداء الموقع و تجعله أسرع بمراحل عن طريق نقل مهمة تحميل الصفحات إلى المتصفح بدلا من السيرفر مما يعني أن المتصفح لن يحتاج إلى التواصل مع السيرفر لعرض الصفحات و سيكون التواصل فقط لجلب البيانات
أشهر التقنيات التي تدعم هذه الخاصية..
Angular و التي أطلقتها google
React و التي أطلقتها facebook
Vue و التي أطلقها أحد موظفي جوجل الذي عمل على angular
كذلك يوجد العديد من المقارنات بينها و لكل منها نقاط ضعف و قوة
Angular و التي أطلقتها google
React و التي أطلقتها facebook
Vue و التي أطلقها أحد موظفي جوجل الذي عمل على angular
كذلك يوجد العديد من المقارنات بينها و لكل منها نقاط ضعف و قوة
هذه التقنيات ليست بدائل عن أطر العمل التي ذكرتها سابقا و إنما يتم استخدام أحدها مع أحد أطر العمل الخاصة بالbackend و لا ترتبط أطر العمل بتقنية محددة و إنما يمكن للمطور اختيار أي إطار عمل للbackend مع أي تقنية من التقنيات
و مع ذلك فإن هناك مجموعات-stacks-من التقنيات يشيع استخدامها سويا.. من الأمثلة المشهورة:
MEAN stack و هو اختصار ل:
M: mongo db
E: Express framework
A: angular
N: node js
و كذلك من الشائع استخدام Vue مع Laravel
MEAN stack و هو اختصار ل:
M: mongo db
E: Express framework
A: angular
N: node js
و كذلك من الشائع استخدام Vue مع Laravel
أخيرا هناك مسار آخر تماما لمن أراد تعلم تطوير المواقع دون بذل جهد و وقت كبيرين و دون الحاجة لتعلم البرمجة و هو عن طريق تعلم أحد نظم إدارة المحتوى أو نظم إدارة المتاجر الإلكترونية أو نظم إدارة المحتوى التعليمي.. الخ
أشهر نظم إدارة المحتوى على الإطلاق هو الWordpress حيث أن ٣٠٪ من المواقع حتى وقت قريب تم إنشاؤها باستخدامه
و يوجد أمثلة أخرى منها لإدارة المحتوى بشكل عام و منها خاص بمجالات مثل التجار الالكترونية مثل
Wix-magento-shopify و غيرها
و يوجد أمثلة أخرى منها لإدارة المحتوى بشكل عام و منها خاص بمجالات مثل التجار الالكترونية مثل
Wix-magento-shopify و غيرها
و لأن لكل خيار ميزاته و عيوبه فإن السهولة و البساطة يقابلها عدة سلبيات:
١- أنها خاصة لمواقع إدارة المحتوى كالمدونات و المواقع الإخبارية مثلا و تخصيصها لغير ذلك ممكن لكن ليس دائما
٢- لا يوجد حرية كاملة في التحكم بالتصميم و في بعض الميزات الخاصة دائما
و غيرها
١- أنها خاصة لمواقع إدارة المحتوى كالمدونات و المواقع الإخبارية مثلا و تخصيصها لغير ذلك ممكن لكن ليس دائما
٢- لا يوجد حرية كاملة في التحكم بالتصميم و في بعض الميزات الخاصة دائما
و غيرها
أخيرا.. لو أردت أن أنصح بدورة واحدة فقط لتطوير المواقع فهي أحد الدورات على موقع يوديمي
التقنيات المضمنة فيها:
html-css-JavaScript-jquery-bootstrap-semantic-node js
مدتها: ٤٦ساعة (يمكنك أخذ جزء منها كالفرونت اند فقط مثلا)
الرابط:
udemy.com
#برمجة #حزب_المبرمجين
التقنيات المضمنة فيها:
html-css-JavaScript-jquery-bootstrap-semantic-node js
مدتها: ٤٦ساعة (يمكنك أخذ جزء منها كالفرونت اند فقط مثلا)
الرابط:
udemy.com
#برمجة #حزب_المبرمجين
جاري تحميل الاقتراحات...