أؤكد لك إن قمت باتباع الخطوات المكتوبة بهذه المقالة فأنك ستكون على طريق الاحتراف، فما بعد ذلك يقع على عاتقك فحتى تصبح محترفا عليك الممارسة والتجربة عشرات المرات بل لا أبالغ لربما ألاف المرات، فكلمات مارست أكثر كلما أصبحت محترفا أكثر
تصميم مواقع الإنترنت أو تطوير المنصات أو مطور ويب وحتى التطوير للهواتف الذكية بالتقنيات الهجينة أصبحت تقع في مجال واحد إلا أن التخصص يختلف فيما كنت تركز على التصميم من أجل واجهة المستخدم (Front End) وهو ما يراه ويتعامل معه المستخدم النهائي لموقع الانترنت أو التطوير في الخلفية (Back End) وهي البرمجة التي تقوم عليها هذه الواجهة لطلب البيانات ومعالجتها والتي لا يراها المستخدم النهائي
لكل من ال (Front End) و (Back End) تقنيات مختلفة ومتنوعة ولكني سأذكر ما يحقق المعايير التالية:
- – الأسهل في التعلم والعمل
- – الأسرع في التنفيذ والتطوير
- – الأكثر انتشارا واستخداما
- – الأقوى في الحماية والأداء
- – مفتوحة المصدر ومجانية
- – يتوفر لها الكثير من مصادر التعلم المجانية
من المهم أن تعلم بأنه ليس عليك أن تصبح محترفا في كل القسمين ففي العادة هناك من هو متخصص في (Back End) وأخر متخصص في ال (Front End) ولكن لا يمكن عمل موقع احترافي ويعمل بشكل كامل بدون تواجد القسمين
بالمناسبة هذه المقالة مخصصة للمبتدئين ومن في حكمهم ولم أفكر سابقا أن أركز على ذلك إلا أنه طلب مني عدة مرات مؤخرا ووجدت بأن الناس لم يستطيعوا معرفة الطريق ولذا قمت بكتابة هذه المقالة
القسم الأول) التقنيات التي عليك تعلمها من أجل (Front End)
هي ما تسمى تقنيات الويب أو قد يطلق عليها أيضا (Web 2.0) وهو ما تراه على الشاشة عند فتح أي موقع وتتفاعل معه
أولا (HTML)
وهي ترتكز على (HTML) وهي لغة توصيف \ تنسيق وليست لغة برمجة، ففيها تقوم بتوصيف كيف تظهر النصوص والصور وباقي الوسائط على الشاشة وتستخدم فيها ما يسمى الوسوم المختلفة ليترجمها المتصفح إلى التنسيق المطلوب مثلا الوسم (<b>) يعني أن النص هنا سيكون سميك وكل وسم يبدأ وينتهي ويتداخل مع وسوم أخرى لكي تظهر النتيجة المطلوبة.
مثال
(<b>Bold Text</b>)
ويمكنك مشاهدة تنسيقات أي موقع عند زيارته والضغط على الشاشة بزر الفأرة الأيمن واختيار عرض الكود
لكي تبدأ في هذا العالم عليك أن تتعلم HTML وأفضل وأسهل الطرق هو عبر هذه الوصلة
ثانيا (CSS)
وهي لغة تنسيق مساندة ومعززة ل (HTML) حيث تزيد من خيارات الوسوم الافتراضية بخيارات إضافية
الحاقا للمثال السابق
(<b style=’color:red’>Bold Red Text</b>)
ويمكنك مشاهدة تنسيقات أي موقع عند زيارته والضغط على الشاشة بزر الفأرة الأيمن واختيار عرض الكود في الصفحة مباشرة أو في ملفات مرتبطة بامتداد .CSS
لكي تقوم بإخراج صفحات موقعك بشكل أفضل عليك أن تتعلم CSS وأفضل وأسهل الطرق هو عبر هذه الوصلة
ثالثا (JavaScript)
وهي لغة برمجة فعلية مشتقة من لغة (Java) ولكنها خفيفة ومبسطة ويتم ترجمتها من خلال المتصفح نفسه والتي تساعد في التحكم في الصفحة دون الحاجة لتحديث الصفحة من جديد مثلا إخفاء عنصر على الشاشة أو عمل حركة أنيميشن محددة
مثال هنا للذهاب الى الصفحة السابقة عند الضغط على الوصلة
<a href=’ #’ onclick=’window.history.back();’ >Cancel</a>
ويمكنك مشاهدة الجافا سكربت لأي موقع عند زيارته والضغط على الشاشة بزر الفأرة الأيمن واختيار عرض الكود في الصفحة مباشرة أو في ملفات مرتبطة بامتداد .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% من الطريق وعرفت الخطة التي تحتاجها لطريقك للاحتراف في هذا العالم
هل استفدت؟ ادعوا لي ولوالدي وعائلتي ولجميع المسلمين بالرحمة والمغفرة والرزق