كيف تصبح مطور ويب؟ من أين تبدأ وماذا تتعلم
 |
web,developer
|
السلام عليكم ورحمة الله وبركاته
في موضوعي هذا سأتحدث عن مجال تطوير مواقع الويب, كيف تبدأ لتصبح مطور ويب وماهي مصادر التعلم وماذا تتعلم وذلك من خلال تجربتي في هذا المجال.
مقدمة:
مفهوم السيرفر والدومين؟
تخزن مواقع الانترنت على أجهزة كمبيوتر عملاقة بمواصفات عالية موصولة مع انترنت مستمر وبسرعة عالية وهذه الأجهزة تسمى المخدمات (السيرفرات) server وتجمع هذه السيرفرات في شركات انترنت وتسمى الشركات التي لديها عدد كبير من السيرفرات باسم داتا سنتر data center وتقوم هذه الشركات بـتأجير السيرفرات للمطورين لكي يقوموا بتخزين مواقع الانترنت عليها. وكالعادة السيرفر له نظام تشغيل ويمكن أن يكون ويندوز أو لينوكس ... الخ
 |
servers
الصورة أعلاه لداتا سنتر (تجمع سيرفرات) والصورة التالية ليسرفر واحد
|
 |
| server |
غالباً ما تقوم الشركات الصغيرة أو المحلية (في وطننا العربي) باستئجار سيرفرات من شركات أجنبية حيث أنه يمكنني طلب سيرفر بمواصفات أختارها أو من ضمن باقة عروض تقدمها شركات الداتا سنتر بحيث تكون مواصفات السيرفر ومساحته كافية لطلبي.
وهنا قد يتبادر إلى الذهن سؤال وهو لماذا لا أستعمل جهاز الكمبيوتر الخاص بي كمخدم server وأضع عليه مواقع الانترنت التي أبرمجها حتى يتصفح الآخرين المواقع عن طريق جهازي. والجواب أن ذلك ليس مستحيلاً بل ممكناً لكن الفرق بين تلك السيرفرات التي نقوم باستئجارها في المواصفات الفنية والتقنية حيث أن مواصفات السيرفر غالباً ما تكون أكثر بكثير من أي جهاز كمبيوتر تملكه, ناهيك عن خط الانترنت ذو السرعة العالية جداً والذي يضمن عدم انقطاعه والبدائل السريعة المباشرة في حالات المشاكل وأنظمة التشغيل و.... مع العلم أن هناك شركات محلية مثلاً في دمشق توفر سيرفرات استضافة مواقع انترنت لكن استمرارية عمل المواقع الموجودة على تلك السيرفرات يتعلق بها مثلاً لو انقطع النت عن سوريا ستتوقف المواقع المتواجدة على تلك السيرفرات عن العمل. ولا أنكر وجودة ميزة ربما تكون أفضل في هذه الحالة وهي أن المواقع قد تكون أسرع قليلاً لأن المسافة تلعب دوراً ولو بسيطاً في السرعة.
هذه السيرفرات يتم تقسيمها إلى مساحات صغيرة hosting ويتم ربط كل مساحة بعنوان domain (نطاق) مثل yoursite.com وتوضع ملفات المواقع على تلك المساحات
بخصوص النطاقات أيضاً يوجد شركات كثيرة توفر إمكانية بيع النطاقات / الدومينات / domains سوءاً بشكل فردي أي دومين واحد أو عدة دومينات وهو ما يسمى ريسلير.وكي لا أنسى هناك الكثير من المواقع التي تقدم استضافات مجانية free hosting و أنصح بالتجربة مع الاستضافات المجانية قبل الشروع في الاستضافات المدفوعة.
how to be web developer
ما الفرق بين مصمم, مبرمج, مطور ويب؟
مصمم الويب أو مصمم مواقع الانترنت هو الشخص الذي يقوم بتصميم الهيكل الخارجي للموقع من صور وخلفيات وأماكن توضع كل أجزاء الموقع من نصوص وعناوين ... الخ ويحتاج إلى خبرات في كل من photoshop, html, css وربما يحتاج قليلاً من javascript
 |
| web designer
|
مبرمج مواقع الانترنت: هو الشخص الذي يقوم ببرمجة الموقع من حيث الرابط بين الصفحات وجلب البيانات من قاعدة البيانات أو إدخالها ويحتاج لغات برمجة مثل php, asp, python وقواعد بيانات مثل mysql ...
مطور الويب: هو الذي يجمع بين الاثنين السابقين معاً أي لديه مهارات في البرمجة والتصميم معاً ويضاف لها في بعض الاحيان مهارات في التعامل مع السيرفر وإدارته.
وفي الشركات الكبيرة التي تختص بمجال تطوير الويب يتم التقسيم بين أدوار الموظفين فمنهم من يختص بالتصميم ومنهم من يختص بالبرمجة وحتى في كل جزء ربما يتم تخصيص وتقسيم الأدوار والواجبات
نقطة البداية photoshop :
 |
photoshop
|
في حال اخترت أن تكون مصمم أو مبرمج أو مطور فإنه لابد أن تكون على معرفة بمجال التصميم وهنا يتوجب عليك أن تكتسب بعض المهارات في مجال التصميم ولعل من أشهر البرامج عالمياً وأكثرها استخدماً هو برنامج adobe photoshop وليس مطلوباً منك أن تكون محترفاً جداً فيه حتى تستطيع التحويل لمصمم أو مطور ويب بل يكفي وجود بعض المهارات في التعامل مع الصور وتقطيعها والتحكم بها. طبعاً كلما زادت خبرتك فيه فهذا أفضل, لكن لو تعلمت الأساسيات وأجدت استخدامها فلا بأسليس في بالي دورات معينة لكن من المواقع التي تعنى بدروس الفوتوشوب :محترفي الفوتوشوب , قلعة الفوتوشوب و , من المواقع بالانجليزية tutsplus دورة عربية مدحها البعض على موقع أرشيف بالضغط هنا (لم أحضرها بصراحة) وفي موقع ليندا (انجليزي) دورة متقدمة مفيدة لكن بعض معرفات لغات البرمجة الهيكيلية
وبالتأكيد بالبحث في جوجل ستجدون الكثير من الدروس المرئية والنصية كما يوجد في الأسواق الكثير من الأقراص التعليمية له.
وبالنسبة لمطوري الويب يجب التركيز على تقطيع الصور وتغيير أحجامها والتدرجات ولوح الأدوات مع الاهتمام بأداة القلم وفهم الطبقات بشكل جيد.. هذا بشكل أساسي وكما ذكرت كلما زادت خبراتك فيه فهذا سيحسن من نتائجك وأعمالك.
للعلم: كان الاعتماد في السابق أكثر من الآن على الفوتوشوب في مجال تصميم المواقع حيث أن الأشكال الجديدة والتقنيات الجديدة خففت من الاعتماد عليه فكثير من الأجزاء أصبحت متوفرة باستخدام css مثلاً مما جعلنا نستغني عن الصور الكثيرة في الموقع.
 |
HTML
|
هذه اللغة مختصة بكتابة بعض الوسوم tags التي تهتم بتقسيم صفحة الانترنت وتوضيع كل جزء منها حيث يتم وضع عنوان الصفحة ومحتوياتها والفقرات والنصوص والصور و....... الخ عن طريقها.
بخصوص HTML 5 أي الإصدار الأخير فهو يحوي tags جدد لعناصر جديدة لم تكن موجودة في السابق مثل الفيديو والصوت ... حيث كانت تضاف عن طريق الفلاش. ولا أنصح في العصر الحالي بوضع عناصر فلاش في صفحات مواقع الانترنت.
CSS
الخطوة الثالثة هي تعلم css وهي (لغة) مختصة بتصميم الصفحة وتنسيقها مثل ألوان النصوص وخلفيات بعض الأجزاء والظلال والإطارات وما إلى ذلك أي تهتم بالتنسيقات على العناصر التي تم إضافتها باستخدام HTML وآخر إصدارين هما CSS2, CSS3 وفي الأخير 3 يوجد إضافات مثل الظلال والتدرجات وليس كل متصفحات الانترنت تظهر هذه المؤثرات إنما تظهرها فقط الإصدارات التي تدعم css3 وكل الإصدارات الأخيرة للمتصفحات أصبحت تدعهما
Javascript
تكتب اختصاراً JS وتهتم هذه اللغة بالتفاعل مع عناصر الصفحة مثلاً عند الضغط على زر يظهر تنبيه أو يختفي عنصر أو يظهر عنصر آخر أو يتحرك عنصر أو يتغير تنسيقه وهي لغة تفاعلية رائعة وتضفي مزيداً من الروعة والجمالية والكمال لموقعك ويكاد لا يخلو موقع منها وهي تأتي في الخطوة الرابعة من خطوات تعلم تطوير الويب
بعد إتقانك للغات الثلاثة HTML, CSS, JS ما الذي ستصبح قادراً على فعله؟
ستصبح قادراً على تصميم مواقع انترنت من النوع الساكن static أي موقع يتألف من عدة صفحات ويوجد روابط بين تلك الصفحات (لكن لايوجد تخزين قيم وجلب قيم من قاعدة البيانات مثلاً لايوجد نظام تسجيل عضويات أو كتابة مواضيع من قبل الأعضاء).
كما ستكون جاهزاً لتصميم قوالب السكربتات الجاهزة لمواقع الانترنت حيث إنه يوجد الكثير من البرمجيات الجاهزة التي يمكن تركيبها على المواقع مثل المنتديات والمدونات وأذكر منها vbulletin, wordpress, joomla , moodle ......... etc وستكون أمامك فرص عمل كثيرة لو كنت قد أتقنت ذلك واحترفته أي إلى هنا تكون قد أصبحت مصمم ويب
jQuery
بعد تعلم الثلاثية السابقة كلغات برمجة ويب HTML, CSS, JS نكون قد كسرنا القيد وتخطينا أصعب حاجز وسنجد أنه فتح لنا الآن آفاق كبيرة للتوسع والتطور أكثر وتأتينا هنا الإضافات التابعة لتلك اللغات أو ما يسمى منصات عمل أو platform أو framework وبالنسبة لجافاسكربت يوجد منصة شهيرة جداً هي jQuery جي كويري وفيها الكثير من الدوال التي تختصر الكثير والكثير من العمل التقليدي في JS والكثير جداً من مواقع الانترنت في الوقت الحالي يستخدم هذه الإضافة حتى أنه أصبح شبه واجب تعلمها ولكن لا تقلق ربما في يوم واحد أو يومين تتعلمها وتصبح قادراً على التعامل معها
الموقع الخاص: jquery.com كما أن لهذه المنصة نفسها إضافات تابعة لها كثيرة منها jquerymobile.com وهي مختصة بعمل تصميم لموقع متوافق مع أجهزة الموبايل الحديثة (اللمس) كما تستخدم في عمل تطبيقات موبايل مع بعض الأدوات مثل phonegap ويوجد إضافة أخرى هي jqueryui.com تحوي حركات ومؤثرات إضافية لجي كويري ولا تقلق من كثرتهم يمكنك تعلم أي إضافة بسهولة وسرعة عندما تلزمك ولن تجد صعوبة طالما أتقنت الأساسيات الثلاث السابقة
شعارها (اكتب القليل واحصل على الكثير)
Bootstrap
وهي من المنصات الرائعة جداً والتي تجمع بين CSS, JS وهدفها جعل تصميم الموقع متجاوب responsive أي يتغير شكل التصميم وأماكن توضع المحتويات حسب قياس الشاشة ويختلف التصميم ما بين شاشة الكمبيوتر والأجهزة اللوحية والموبايل بحيث يبقى مناسباً وواضح النص. موقع ootstbrap ويعيبها في الإصدار الأخير أنها تعتمد على HTML5 لذلك سيظهر الموقع مشوهاً تقريباً على متصفحات الانترنت القديمة التي لا تدعم HTML5
ويوجد منصة أخرى أيضاً ذات شعبية واسعة وهي foundation ولكل منهما دورة جيدة في موقع ليندا وبالنسبة لي اخترت الاعتماد على bootstrap بعد أن درست كلاً منهما.
 |
Bootstrap
|
ملاحظة : الإضافات بعد ثلاثية لغات البرمجة الهيكلية ليس من الضروري الانتقال لها بعد JS فوراً أي يمكنك بعد تعلم JS الانتقال إلى PHP , MySql ثم العودة لها
لغات البرمجة من جهة السيرفر server side PHP
بعد أن أتقنت الثلاثية (HTML, CSS, JS) تكون قد صرت مصمم ويب وإذا أردت أن تصبح مبرمج ويب فإنه عليك أن تتعلم لغات برمجة الويب الخاصة بالسيرفر أي التي تنفذ من قبل السيرفر حيث إن (اللغات) السابقة يتم تنفيذها من قبل المتصفح فقط حيث بإمكانك فتح برنامج المفكرة وكتابة كود Html + css + js وتنفيذه عن طريق فتح الملف بمتصفح انترنت مثل Firefox , Chrom .. أما لغات السيرفر هي اللغات التي يقوم بتنفيذها السيرفر وغالباً ما تعمل مع قواعد البيانات أيضاً حيث يمكن إنشاء مواقع ديناميكية قابلة لإضافة المحتوى وتسجيل أعضاء ودردشة وإرسال بريد الكتروني على سبيل المثال وهنا نكون أمام خيارات كثيرة مثل PHP, PYTHON, ASP ,RUBY,... الخ
ولعل الأكثر استخداماً من بينهم PHP وتحتاج إلى سيرفر عليه نظام تشغيل من نوع لينوكس Linux أما ASP تحتاج سيرفر بنظام تشغيل Windows
 |
MySql-php
بعد اختيارك للغة برمجة من طرف السيرفر أنت بحاجة لقواعد بيانات لتخزين البيانات الكبيرة على موقعك مثل تخزين بيانات الاعضاء وتخزين المواضيع وفي حال اختيارك للغة البرمجة PHP فإن قواعد البيانات MySql ستكون الشقيق الدائم لـ PHP وفي حال اختيارك ASP ربما تختار قواعد بيانات Sql server أو ربما حتى أكسس access ...
ملاحظة: SQLite هي قواعد بيانات مصغرة عن mysql حيث تخزن قاعدة البيانات على شكل ملف وتستخدم في حال لم تكن قاعدة البيانات ذات حجم كبير أو مع تطبيقات الموبايل مثل phonegap
AJAX
يمكن أن نقول أنها طريقة في جافا سكربت للتعامل مع php وللتوضيح كمثال في موقع فيسبوك عند وقوف الماوس فوق اسم عضو تظهر نافذة صغيرة مع عبارة جاري التحميل وبعد لحظات تظهر بيانات عن العضو حيث تم جلب جزء صغير من مكان آخر على السيرفر دون الحاجة لتحميل الصفحة بشكل كامل وهذه التقنية تسمى Ajax وفي مكتبة jQuery بعد الطرق تسهل التعامل مع AJAX
|
 |
| MVC |
بعد تعلم php, mysql يمكن تعلم أشياء أخرى تسهل علينا العمل وتنظم المشاريع وتوحد شكلها حيث ستلاحظ في المشاريع المتوسطة والكبيرة التداخل والعشوائية في ملفاتك وهنا جاءت منصات عمل تعمل بنظام MVC وهي اختصار من Model View Controller حيث يتم الفصل بين ملفات المشروع في ثلاثة أقسام الأول controller المتحكم الرئيسي بروابط الموقع ومن ثم Model مختص فقط بقواعد البيانات وأوامر التعامل معها و View لوضع الواجهات والقوالب التي تعطي الشكل الخارجي للموقع والتعامل مع هذا النظام سيجعل من عملك أسهل بكثير ومنظم وتستطيع العودة للتعديل في أي وقت بسرعة وفي حال وجود فريق عمل سيسهل ربط المهام كثيراً ومن أشهر تلك المنصات مع php منصة codeigniter , cake php, laraval ... بالنسبة لي اخترت codeigniter واعتمدتها في مشاريعي و مرتاح بالتعامل معها وهي ذات شعبية واسعة ولذلك يوجد دروس كثيرة عند البحث في حال لديك استفسار ولكن مؤخراً أصبحت laraval هي رقم واحد في منصات PHP لذلك أنصح الجدد بتعلم laraval بلداً من المنصات الأخرى
هل انتهينا ؟
إن هذا المجال بحر لا ينتهي وفي كل يوم تظهر لنا تقنيات جديدة وإضافات ومنصات عمل ومطور الويب الناجح يسعى دوماً لمواكبة كل جديد وتطوير نفسه فمثلاً هناك xml, json, nodeJs ومؤخراً بدأ التعامل مع خطوط خارجية تضاف للموقع وأيقونات على شكل خطوط وفي كل يوم نجد مستجدات وتحديثات وتطويرات ..
مصادر التعلم >>>
من أفضل المصادر باللغة العربية لتعلم لغات برمجة الويب الدروس التي قدمها الأشخاص الثلاثة التالية أسماؤهم:
أما مصادر التعلم باللغة الانجليزية فلعل من أشهرها:http://www.w3schools.comوهو موقع رائع وأشهر من نار على علم 
ودروسه رائعة جداً وبأسلوب سهل وسلس ولغة انجليزية مبسطة وإمكانية تجربة الأكواد بشكل مباشر (أونلاين) لمعظم اللغات وهو مرجع لي في كثير من الأشياءالموقع http://www.tizag.comشبيه بالموقع سابق الذكر
ولا ننسى موقع يوتيوب ففيه الكثير والكثير من الدروس في مجال الويب ولطالما استفدت منه كثيراً
برامج المساعدة في كتابة الكود IDE
IDE هي اختصار لـ Integrated development environment وتعني كترجمة حرفية (بيئة التطوير المتكاملة) وهي برنامج تحرير وكتابة الأكواد البرمجية والتي تساعد كثيراً في تنظيم الملفات وكتابة الكود فمثلاً عند البدء بكتابة اسم دالة في php تظهر قائمة منسدلة لخيارات فيها الدوال التي تبدأ بالاحرف التي كتبت ويتم تلوين الكود وتنظيمه
وحسب ما قرأت لإحصائية تخص عام 2014 فإن أشهر والأكثر استخداماً لتلك البرامج مرتبة وموضحة في الصورة التالية:
 |
PhpStorm
أي أن برنامج PhpStorm جاء في المرتبة الأولى
|
وختاماً أقول: ما ذكرته من مصادر تعلم هو جزء مما هو موجود في عالم الويب ويوجد غيرهم الكثير وحتى لا تحتار كثيراً ابدأ بأي شيء ترتاح له فأي دورة ترتاح لها أو كتاب أو دروس نصية في مدونات أو مواقع أو منتديات ابدأ بها فوراً. وأنصح بالتروي الشديد في دراسة كل لغة وعدم العجلة بحيث يتم الإتقان التام والفهم الجيد للغة قبل الانتقال إلى التي تليها
وأضيف لك أن لا تظن أبداً بأن دورة في جافا سكربت على سبيل المثال ستخرج منها محترفاً تماماً فالاحتراف لن يعطيك إياه أي كتاب أو دورة إنما التجربة والخطأ والتكرار والبحث هو ما سيكسبك الاحتراف مع الايام ومع استمرارية عملك في تطوير الويب ولكن لابد من تعلم أي لغة من أي مرجع ثم خلال عملك ستتعلم الكثير من الاشياء تضيفها لما اكتسبته. كما أود التركيز على نقطة هامة جداً وهي مصادر التعلم العربية والانجليزية أيهما أفضل وماذا أختار؟
الدروس العربية ماهي إلا إعادة شرح للدروس الأم باللغة الانجليزية غالباً والتي هي الأم والأصل لأي لغة برمجة فإذا أردت القوة والدقة في مصدر تعلمك فبالتأكيد الدروس الانجليزية دوماً أوسع وأقوى وأشمل وأدق من حيث المحتوى أيضاً وفوق ذلك تجد دروس حديثة ومواكبة لكل شيء فمثلاً إذا تفحصت المصادر العربية التي ذكرتها أعلاه ستجد أغلب الدروس قديمة قليلاً ولا يطرأ عليها تحديث وتذكر أن العرب لا يعيدون كتابة كل ما يتعلمونه باللغة العربية.
كما أشدد على نقطة مهمة وهي المصادر الأم لكل لغة فمثلاً إذا أردت فهم دالة function في لغة php فالمصدر الأساسي لها هو موقع اللغة نفسها أي موقع php فإذا أردت فهم دالة expload ومعرفة كافة التفاصيل عنها سأجد ذلك على الرابط http://www.php.net/manual/en/function.explode.php حيث يمكنني البحث عن أي شيء وإيجاد شرح شامل له وكذلك لو أردت فهم شيء ما في bootstrap فأفضل مرجع ومصدر لي هو موقع المنصة نفسهhttp://getbootstrap.com
