برمجة وتصميم المواقع - كل ما تحتاجه لتصبح مبرمج مواقع محترف

برمجة وتصميم المواقعالبرمجةhtmlCssjavascriptورد بريسphp

31/3/2018
برمجة وتصميم المواقع - كل ما تحتاجه لتصبح مبرمج مواقع محترف

الكثير يسعي لتعلم برمجة وتصميم المواقع ويصبح محترف في هذا المجال ولكن لا يعرف كيف يبدأ وما هي الخطوات التالية وكيف ينتقل بعد ذلك الي مرحلة الاحتراف.
لذلك قمنا في هذا المقال بتجميع كل ماتحتاجه لتصبح محترفا في هذا المجال , مع تحديد الخطوات التي تتبعها من البداية حتي تصل الي مرحلة الاحتراف.

دورات تعلم برمجة HTML

أول مايجب عليك تعلمه هي HTML وهي الأكواد المسؤلة عن اظهار العناصر المختلفة في الصفحة , مثل الصور والنماذج والنصوص وغيرها.
ولتقريب مفهوم HTML أكثر , بالتأكيد تعرف برنامج microsoft word , وهو برنامج مسؤل عن انشاء مستند نصي مع امكانية اضافة العناصر المختلفة مثل الصور وغيرها.
هذا ماتفعله بالظبط أكواد HTML , والحقيقة هذا أيضا مايفعله برنامج word فهو يقوم بانشاء هذه الأكواد وتخزينها وعند فتح الملف يقوم باعادة ترجمة هذه الأكواد مرة اخري الي مستند مرئي.

ولكن قد تتسائل لماذا نحتاج لكتابة أكواد HTML ولا نقوم بادراج العناصر كما نفعل في microsoft word؟
والاجابة علي هذا التساؤل بسيطة جدا , وهي أنك في مرحلة متقدمة من البرمجة ستحتاج الي انتاج هذه الأكواد بطريقة ديناميكية , لانها تختلف حسب متغيرات كثيرة.
لذلك تحتاج لانتاج كود (شفرة برمجية) ليقوم المتصفح بتحويلها الي مستند نصي مرئي (صفحة الويب).

لاحظ أن HTML ليست لغة برمجة في حد ذاتها , ولكنها مجموعة أكواد يقوم المتصفح بترجمتها الي صفحة الويب.

وحتي لا تتعب في البحث عن دورات , جمعنا لك أفضل الدورات التعليمية في مجال HTML

دورة الزيرو لتعلم HTML وهي تتكون من جزئين:
- الجزء الأول : دورة HTML
- الجزء الثاني : الجديد في HTML5

دورات تعلم CSS

الان انت تستطيع اظهار العناصر المختلفة في صفحة الويب , نأتي للخطوة الثانية وهي تنسيق هذه العناصر (الستايل).
ونقصد بتنسيق العناصر هو تحديد خصائصها المظهرية المختلفة مثل أبعاد العنصر وألوانه وخلفيته ومكانه في الصفحة ومقاسات الهوامش وكل مايخص ستايل كل عنصر.
ولكي نتمكن من ذلك نستعبد بأكواد CSS وهي اختصار لعبارة Cascading Style Sheet.

وCSS أيضا مثل HTML ليست لغة برمجة وانما أكواد يفهمها المتصفح ويقوم بتطبيقها علي عناصر HTML لتحديد مظهرها وخصائصها.

وقد تتسائل أيضا لماذا نحتاج لكتابة أكواد CSS لتنسيق العناصر , ولا نفعل مثلما كنا نفعل ببرنامج word لتحديد خصائص مظهر العنصر من القائمة المنسدلة بكل بساطة؟
ولتبسيط الاجابة سأكتفي بأن أقول لك أنك قد تحتاج لانتاج الاف الصفحات بطريقة ديناميكية , وكل صفحة بها عشرات العناصر.
سيكون الأمر غاية في الصعوبة اذا حاولت تطبيق هذا الستايل علي الاف الصفحات مرة واحدة , لذلك تترك هذه المهمة لـ CSS.
وكل ماتحتاجه هو تحديد الخصائص التي تريدها في كل عنصر وCSS ستقوم بضبط مظهر كل عنصر نيابة عنك

دورة الزيرو لتعلم CSS (جزئين)

صفحات الويب الديناميكية

الان انت تستطيع انشاء صفحة جميلة وقمت بتنسيق العناصر بطريقة رائعة , وهذه الصفحة جاهزة الان لعرضها علي الانترنت واستقبال الزوار.
ولكن مانستطيع فعله برمجيا أكبر بكثير من مجرد عرض صفحة بها مجموعة عناصر , ولكننا نريد أن تكون هذه الصفحة جاهزة للتعامل مع المعلومات والعناصر بطريقة ديناميكية.

ما المقصود بالصفحة الديناميكية؟
الصفحة الديناميكية هي الصفحة التي تتعامل مع المعطيات المختلفة بطريقة تفاعلية , فمثلا يمكن للصفحة الديناميكية أن :
- تتفاعل مع الزائر لتغيير أو اضافة أو ازالة عناصر حسب رغبة الزائر.
- التعامل مع البيانات والمعلومات المختلفة.
- اجراء العمليات المختلفة , مثل العمليات الحسابية والمنطقية وغيرها

باختصار الصفحة الديناميكية جاهزة لتتحكم بها عن طريق مجموعة أوامر برمجية وليست مجرد أكواد لعرض العناصر.

ولكي أختصر عليك الوقت قمت بتقسيم هذه الأوامر البرمجية الي 3 أنواع رئيسية.
- النوع الأول :
 التعامل مع البيانات الموجودة في السيرفر (أي قبل ارسال الكود النهائي للمتصفح)
وفي هذه الحالة نحتاج لتعلم لغة ديناميكية لجهة السيرفر مثل php أو ASP
وهذه اللغات تقوم بالتعامل مع المعلومات المختلفة واجراء العمليات والتعديلات المطلوبة عليها وتقوم بانتاج كود HTML النهائي قبل ارساله للمتصفح لمشاهدة صفحة الويب.
الان أنت فهمت أكثر لماذا احجنا للتعامل مع عناصر صفحة الويب عن طريق أكواد HTML.

دورة تعلم PHP

- النوع الثاني:
بعد ارسال كود HTML الي المتصفح وتحويله الي صفحة ويب مرئية وعرضه للزائر , قد يحتاج الزائر للتحكم في هذه العناصر ولكن هذه التعديلات تكون في المتصفح فقط وليس السيرفر.
أو بمعني اخر لا يتم تطبيق هذه التعديلات علي البيانات الحقيقية الموجودة علي السيرفر , ولكنها تعديلات مؤقتة يتم تطبيقها علي صفحة الويب المرئية فقط.

وللتعامل مع هذه التعديلات نحتاج لتعلم لغة javascript

- النوع الثالث :
قواعد البيانات , مفهوم قواعد البيانات لا يحتاج شرح فأنت بالفعل تعرفه وتفهمه جيدا , ولكن تحتاج أن تتعلم كيف تقوم بتطبيق هذه المفاهيم علي أرض الواقع وتتحكم في المعلومات وقواعد البيانات.
أنت بالطبع تعرف أن موقع مثل فيسبوك مثلا يحتوي علي بيانات كثيرة جدا , مثل أسماء الاشخاص وبياناتهم المختلفة والمنشورات التي يقومون بنشرها والعديد من اليانات الاخري.
كيف يقوم الفيسبوك بتخزين كل هذه المعلومات وادارتها؟ بالطبع يحتاج الفيسبوك لمحرك قواعد بيانات قوي يقوم بتنفيذ العمليات المختلفة علي هذه البيانات ومن أهمها :
 - تخزين البيانات.
 - استخراج البيانات وقت الاحتياج اليها.
 - التعديل علي البيانات.
 - حذف بيانات معينة

المكتبات البرمجية

ولتسهيل عملية البرمجة يظهر من وقت لاخر مجموعة مكتبات أو framework وهي عبارة عن أكواد جاهزة تم كتابتها سابقا بهدف تبسيط الأكواد المعقدة.
هذه المكتبات في الغالب يتم انشاؤها لتقوم بمهام معقدة ومكررة , فبدلا من كتابة الكود المعقد كاملا , يكتفي فقط أن نحدد المدخلات المطلوبة ونترك المكتبة تقوم بتنفيذ المهمة.

كل لغة برمجة لها مكتبات عديدة تقوم باداء أدوار عديدة .
ويوجد أيضا ايسمي framework وهو بطريقة مبسطة عبارة عن اطار عمل كامل يقوم بتنفيذ مهام كثيرة ومعقدة.
كما يوجد أيضا أنظمة جاهزة لادارة المحتوي وتسمي CMS.

من أشهر المكتبات والـ frameworks المعروفة حاليا:

مكتبات javascript

jquery
angularjs

backbonejs
getbreezenow
emberjs
 

ويمكن معرفة المزيد عن مكتبات javascript والفروقات بينهم من خلال هذا الموضوع
https://3alam.pro/mnsor-alaatyby/articles/javascript-libraries-and-frameworks

واليك دورة تعليمية لتعلم jquery مكونة من جزئين:
- الجزء الأول تعليم أوامر jquery.
- الجزء الثاني : تطبيق عملي علي jQuery

مكتبات CSS

من أشهر مكتبات CSS والتي يستخدمها موقع المجتمع هي مكتبة Bootstrap

دورة تعلم CSS

مكتبات php

codeigniter
yiiframework
zend
cakephp
 

ويمكن التعرف علي تفاصيل المكتبات وأطر العمل من خلال هذا الموضوع : مكتبات PHP الأكثر تميزاً
 

أنظمة ادارة المحتوي CMS

كما تعرفت سابقا أن CMS عبارة عن نظام متكامل لادارة المحتوي , ومن أشهر أنظمة ادارة المحتوي:

wordpress
laravel

هذا الموضوع ليس كل شئ في برمجة الويب , ولكنه حجر الأساس , لذلك أنصحك بالبحث دائما عن الجديد.
مثل NodeJs و composer وغيرها من التقنيات الحديثة نسبيا.
ولكن لا تفعل ذلك الا بعد اتقان الأساسيات التي تعلمتها من خلال هذا المقال.

الكثير يسعي لتعلم برمجة وتصميم المواقع ويصبح محترف في هذا المجال ولكن لا يعرف كيف يبدأ وما هي الخطوات التالية وكيف ينتقل بعد ذلك الي مرحلة الاحتراف.
لذلك قمنا في هذا المقال بتجميع كل ماتحتاجه لتصبح محترفا في هذا المجال , مع تحديد الخطوات التي تتبعها من البداية حتي تصل الي مرحلة الاحتراف.

- دورات تعلم برمجة #HTML
- دورات تعلم #CSS و #bootstrap
- دورات تعلم #javascript و #jQuery
- دورات تعلم #php
- دورات تعلم قواعد البيانات (#Mysql & #Sqlite)
- أشهر المكتبات وأطر العمل والفرق بينهم.
- أشهر أنظمة ادارة المحتوي
- دورات #wordpress و #laravel
وظائفوظائف خاليةوظائف للمهندسينمطلوب مهندسينمطلوب مهندسين حديثي التخرجوظائف شركة مقاولاتوظائف مكتب استشاريمطلوب مهندسين مكتب فنيفرص عملمنح دراسيةتعليم اللغة الانجليزية