أؤكد لك إن قمت باتباع الخطوات المكتوبة في هذه المقالة فإنك ستكون على طريق الاحتراف، فما بعد ذلك يقع على عاتقك، فحتى تصبح محترفاً عليك الممارسة والتجربة عشرات المرات؛ بل لا أبالغ إن قلت ربما آلاف المرات، فكلما مارست أكثر أصبحت محترفاً أكثر.
تصميم مواقع الإنترنت أو تطوير المنصات أو مطور ويب وحتى التطوير للهواتف الذكية بالتقنيات الهجينة- أصبحت تقع في مجال واحد، إلا أن التخصص يختلف فيما كنت تركز على التصميم من أجل واجهة المستخدم (Front End)، وهو ما يراه ويتعامل معه المستخدم النهائي لموقع الإنترنت أو التطوير في الخلفية (Back End)، وهي البرمجة التي تقوم عليها هذه الواجهة لطلب البيانات ومعالجتها والتي لا يراها المستخدم النهائي.
لكل من الـ"Front End" و"Back End" تقنيات مختلفة ومتنوعة، ولكني سأذكر ما يحقق المعايير التالية:
- الأسهل في التعلم والعمل.
- الأسرع في التنفيذ والتطوير.
- الأكثر انتشاراً واستخداماً.
- الأقوى في الحماية والأداء.
- مفتوحة المصدر ومجانية.
- يتوافر لها الكثير من مصادر التعلم المجانية.
من المهم أن تعلم أنه ليس عليك أن تصبح محترفاً بكل القسمين، ففي العادة هناك من هو متخصص بـ"Back End"، وآخر متخصص بالـ"Front End". ولكن لا يمكن عمل موقع احترافي ويعمل بشكل كامل من دون وجود القسمين.
بالمناسبة، هذه المقالة مخصصة للمبتدئين ومن في حكمهم، ولم أفكر سابقاً في أن أركز على ذلك إلا أنه طُلب مني عدة مرات مؤخراً، ووجدت أن الناس لم يستطيعوا معرفة الطريق؛ ولذا قمت بكتابة هذه المقالة.
القسم الأول: التقنيات التي عليك تعلُّمها من أجل "Front End"
هي ما تسمى تقنيات الويب، أو قد يطلق عليها أيضاً "Web 2.0″، وهو ما تراه على الشاشة عند فتح أي موقع وتتفاعل معه.
أولاً: "HTML"
وهي ترتكز على "HTML"، وهي لغة توصيف/تنسيق وليست لغة برمجة، ففيها تقوم بتوصيف كيف تظهر النصوص والصور وباقي الوسائط على الشاشة، وتستخدم فيها ما يسمى الوسوم المختلفة ليترجمها المتصفح إلى التنسيق المطلوب، مثلاً الوسم () يعني أن النص هنا سيكون سميكاً، وكل وسم يبدأ وينتهي ويتداخل مع وسوم أخرى لكي تظهر النتيجة المطلوبة.
مثال
(Bold Text)
ويمكنك مشاهدة تنسيقات أي موقع عند زيارته والضغط على الشاشة بزر الفأرة الأيمن واختيار عرض الكود.
لكي تبدأ في هذا العالم عليك أن تتعلم HTML، وأفضل وأسهل الطرق، من خلال هذه الوصلة
ثانياً: (CSS)
وهي لغة تنسيق مساندة ومعززة لـ"HTML"، حيث تزيد من خيارات الوسوم الافتراضية بخيارات إضافية.
إلحاقاً للمثال السابق
(Bold Red Text)
ويمكنك مشاهدة تنسيقات أي موقع عند زيارته والضغط على الشاشة بزر الفأرة الأيمن واختيار عرض الكود في الصفحة مباشرة أو في ملفات مرتبطة بامتداد ".CSS".
لكي تقوم بإخراج صفحات موقعك بشكل أفضل عليك أن تتعلم CSS، وأفضل وأسهل الطرق، من خلال هذه الوصلة
ثالثاً: "JavaScript"
وهي لغة برمجة فعلية مشتقة من لغة "Java"، ولكنها خفيفة ومبسطة، وتتم ترجمتها من خلال المتصفح نفسه والتي تساعد في التحكم بالصفحة دون الحاجة لتحديث الصفحة من جديد، مثلاً إخفاء عنصر على الشاشة أو عمل حركة أنيميشن محددة.
مثال هنا: للذهاب إلى الصفحة السابقة عند الضغط على الوصلة
ويمكنك مشاهدة "الجافا سكربت" لأي موقع عند زيارته والضغط على الشاشة بزر الفأرة الأيمن واختيار عرض الكود في الصفحة مباشرة أو في ملفات مرتبطة بامتداد ".js".
لكي تقوم بجعل صفحات موقعك أكثر ديناميكية عليك أن تتعلم "JavaScript"، وأفضل وأسهل الطرق، من خلال هذه الوصلة
هذه التقنيات الثلاث (HTM, CSS, JavaScript) هي أهم وأكثر ما تحتاجه من أجل العمل على "Front end"، إلا أن هناك أطر عمل يمكنك استخدامها والتي سوف تسهل حياتك بشكل كامل للتعامل مع هذه التقنيات الثلاث.
تنبيه: نوصي وبشدة بأن تمر على هذه التقنيات الثلاث، وتتعلم أساسياتها على أقل تقدير قبل أن تتعلم أطر العمل التي سوف تسهل حياتك أو حتى قبل أن تبدأ في التطوير للويب من ناحية "Back End"، فعدم تعلُّمها سوف يعقيك جداً كلما تقدمت؛ لأنك ستبقى لا تفقه لماذا تقوم بذلك أو تستخدم ذلك.
رابعاً: إطار عمل "Bootstrap"
هذا الإطار وصل حتى وقت كتابة هذه المقالة إلى الإصدار (4)، وهو الإطار الأشهر والأكثر استخداماً وسهولة والذي سوف يسهِّل حياتك في بناء مواقع إنترنت جميلة تفاعلية.
هذا الإطار عبارة عن ملفات تنسيق "CSS" معدة مسبقاً بتعريفات خاصة ومعيارية؛ لتغطية كل ما تحتاج بناءه على الشاشة، كما أن هذا الإطار يستخدم مكتبة تطوير اسمها "jQuery"، وهي تعتبر كإطار مخصص للغة "JavaScript"، وتحوي مئات الأكواد الجاهزة من "JavaScript" للقيام بكل ما تريده بدلاً من كتابة ذلك الكود من جديد.
بواسطة "HTML" و"Bootstrap" تستطيع عمل كل ما تتمناه أو ما تراه موجوداً في مواقع أخرى.
لتتعلم إطار العمل هذا عليك بزيارة هذه الوصلة، التي تقوم بتسهيل الشرح عليك
وبعد ذلك عليك أن تداوم على زيارة الوصلة التالية؛ لكي تكون هي مرجعك الأول لاحتراف إطار العمل هذا
تنويه: استخدام "bootstrap" قد يغنيك عن "CSS" بنسبة 90% أو أكثر في مجمل الحالات، ولكن لا مناص من تعلم أساسيات ومداخل "CSS"؛ لكي تستطيع تطويع "bootstrap" أكثر وجعله يخدمك ولا يقيدك.
خامساً: مكتبة "jQuery"
هي مكتبة متكاملة من أكواد "JavaScript" المصممة خصيصاً للقيام بكل ما تريده داخل موقعك، حيث إنها جمعت خلال سنوات تطويرها وحتى الآن كل الخيارات التي تود أن تقوم بها على موقعك، وتختصر عليك مئات الأسطر البرمجية والساعات من التطوير.
لتعلُّم المكتبة واحترافها عليك فهم هيكلية التعامل معها، وإليك هذه الوصلة
بعد أن تتعلم الأساسيات في الوصلة السابقة أنصحك بأن تقوم بالالتحاق بهذه الدورة المجانية على الإنترنت لتحترفها بشكل أكبر
تنويه: تعلُّم "JavaScript" مهم جداً حتى لو أتقنت "jQuery"، وذلك لبناء الأكواد الخاصة بمعالجة عملياتك المنطقية، حيث إن "jQuery" تساعدك أكثر في التنسيق والعرض والتحقق. ولكن لبناء كود منطقي خاص بخوارزمية خاصة بك، فعليك أن تستخدم "JavaScript".
سادساً: فهم التصميم للشاشات الصغيرة "responsive-design"
أغلب الزوار حالياً يقومون بزيارة المواقع من أجهزة الهاتف والأجهزة اللوحية، وإن لم يكن موقعك داعماً لذلك فستخسر الكثير من الزوار، الخبر السعيد أن إطار عمل "bootstrap" مهيأ بشكل كامل، بالتكامل مع "jQuery"، ليقوم بهذا العمل بالنيابة عنك وتطويع الموقع حسب حجم شاشة المستخدم، ولكن عليك أن تفهم كيف يقوم بذلك؛ حتى تستطيع بناء هيكلية موقعك بشكل صحيح.
هنا في هذه الوصلة دورة على الإنترنت تساعدك في فهم هذا الهيكلية
نستطيع أن نقول هنا إنك انتهيت من جزئية "Front End"، ولكنك بحاجة إلى مصمم غرافيك من أجل الصور المستخدمة، مع العلم أنك تستطيع بناء موقع كامل من دون أي صورة، وبالطبع أفضل البرامج في هذا المجال هو "PhotoShop)"، وليس عليك أن تكون مصمماً حتى تتقن تقنيات الويب، ولكن المعرفة في هذا البرنامج سوف تساعدك.
معلومة مفرحة
بتعلُّمك لتقنيات الويب السابقة تستطيع بناء تطبيقات للهواتف الذكية أيضاً باستخدام لغات التطوير الهجينة والتي تعتبر قائمة على تقنيات الويب بالمقام الأول، ولذا فإنك ستكون مواكباً لتطوُّر العالم وانتقاله للتطبيقات أيضاً.
للتعرف على أفضل منصات التطوير الهجينة لتطبيقات الهواتف الذكية، قم بزيارة هذه الوصلة
معلومة مفيدة جداً
لكي توفر على نفسك عناء بناء مواقع من الصفر يمكنك استخدام قوالب إنترنت معدة مسبقاً بأسعار رمزية جداً ستوفر عليك عشرات الساعات من البناء، وتستطيع تخصيصها بشكل سريع لأغراض موقعك، والجميل أنها تستخدم تقنيات الويب السابقة في بنائها، وبذلك تستطيع تخصيصها أكثر وفقاً لاحتياجاتك.
استخدم هذا الرابط للوصول السريع لها
التقنيات التي عليك تعلُّمها من أجل "Back End"
في هذا العالم عليك أن تتحول من مصمم مواقع إنترنت إلى مطور مواقع إنترنت، ولكن ضع في حسبانك جيداًبأنه كلما زادت معرفتك وخبرتك في تقنيات الويب "Front End" السابقة سهلت حياتك في تطوير المواقع.
باختصار، لو أصبحت مطور "Back End" فقط، فستكون بحاجة دائماً إلى شخص مساند، بالإضافة إلى أنك ستقوم بكتابة مكتبات برمجية لكي يمكن لغيرك استخدامها، مما يُفقدك متعة رؤية ما تقوم بعمله على أرض الواقع.
أولاً: لغة البرمجة
هناك عشرات لغات البرمجة المعدة للتطوير للـ"Back End، والكثير منها مناسب للتطوير، ولكن سوف أختار "PHP"؛ لأنها تتناسب مع المعايير التي وضعتها لهذه المقالة (الأسهل، الأسرع، الأقوى، الأكثر انتشاراً، الأكثر استخداماً، مفتوحة المصدر ومجانية)، وأضيف على ذلك أنه يتوافر لها عدة أطر عمل جاهزة وتقنيات الويب والتي سوف تساعدك في استخدامها مباشرة وتوفير الكثير الكثير من الوقت عليك، كما أنه من الممكن توفيرها على كل نظم التشغيل؛ لكي تستطيع التطوير بواسطتها مثلاً (ويندوز، ماك، لينوكس بكل التوزيعات).
معلومة: أي مطور بأي لغة برمجية سيكون من السهل عليه جداً الانتقال إلى "PHP".
لتعلم التطوير بواسطة "PHP" عليك البداية من هنا
ثانياً: قواعد البيانات
من النادر جداً ألا تحتاج إلى قواعد بيانات عند بنائك أي موقع إنترنت؛ بل إن قواعد البيانات هي النواة الأساسية لمواقع الإنترنت، حيث تقوم لغات البرمجة بدور الوسيط في نقل البيانات بعرضها وتخزينها ما بين قواعد البيانات وواجهة المستخدم، مثلاً عندما تسجل حساباً جديداً في الموقع، فإنه فعلياً يتم حفظ بيانات تسجيلك في قاعدة بيانات، وذلك عبر لغة البرمجة.
يوجد الكثير من قواعد البيانات، ولكننا أيضاً سنختار ما هو مناسب لمعايير مقالنا، وسيقع الاختيار على "MySQL"، ولكن الجميل في الموضوع أن كل قواعد البيانات تتشارك في لغة التعامل معها، وذلك عبر لغة استعلامات هيكلية تسمى "SQL"، وهي فعلاً كل ما يهمك للتعامل مع أي قاعدة بيانات عبر تمرير هذه الاستعلامات عن طريق لغات البرمجة لها.
لتعلُّم لغة الاستعلامات الهيكلية عليك بزيارة هذه الوصلة
ثالثاً: إطار عمل التطوير "Laravel"
هو إطار عمل مخصص للغة البرمجة "PHP" بحيث تستخدم عدة تقنيات ومكتبات تطوير متضمنة بداخلها تساعدك في كتابة كودك البرمجي بسهولة كبيرة؛ لتوفر عليك الكثير من الوقت والجهد، وتقوم عنك بالكثير من العمليات مثل الحماية والتحقق وغيرها.
تتميز "Laravel" بأنها متوافقة أساساً مع أطر عمل الويب الأساسية (Bootstrap, jQuery) وتعمل بمنهجية "MVC" موفِّرة بذلك طبقات للتعامل بشكل سريع مع قواعد البيانات بمعرفة أساسيات لغة "SQL"، وبالطبع كل هذا بواسطة اللغة الأجمل "PHP".
وهنا تجد أفضل الدروس التعليمية لتعلُّمها
هل هذا كل شيء؟
بالتأكيد لا، فهذا العالم كبير جداً ومتشعب، ولكن إن اتبعت الخطوات السابقة فستكون قد قطعت 90% من الطريق وعرفت الخطة التي تحتاجها لطريقك للاحتراف في هذا العالم.
هل استفدت؟ ادعُ لي ولوالدي وعائلتي ولجميع المسلمين بالرحمة والمغفرة والرزق.
مقالات الرأي المنشورة في “عربي بوست” لا تعبر عن وجهة نظر فريق تحرير الموقع.