السلام عليكم و رحمة الله ،
فى بداية شهر يوليو الماضى قررت اتخاذ مسار جديد و تغيير المسار المهنى المستقبلى، فى السنوات الأخيرة اتخذت مسار مصمم الجرافيك و لكنى لم اجد به فرص تستحق المجازفة للإعتماد عليه فى المستقبل ، لذلك قررت ان اتوجه الى عالم الويب و خصوصاً تطوير واجهات المستخدم.
أولا ما هى واجهات المستخدم و انواعها؟
التعريف بسيط، ببساطة هى الواجهات الرسومية التى يستطيع المستخدم التعامل معها و استخدام الموقع او التطبيق بما يناسب احتياجاته، لا أكثر من احتياجته و لا أقل من ضرورياته.
مطور واجهات المستخدم له العديد من الأدوار و له اكثر من وظيفة فمثلاً هناك من يطور الواجهات الخاصة بمواقع الويب , و آخر للتطبيقات الويب او قوائم التحكم الخاصة بالمديرين فى خلفية الموقع ، و هناك من يصمم و يطور الواجهات الخاصة بتطبيقات الموبايل.
حسناً، ما الفرق اذاً بين مطور واجهات الويب و مصمم صفحات الويب؟
مصمم صفحات الويب يعتمد غالباً على التصميم الجرافيكى فقط بالاضافة الى بعض اللغات التى قد يحتاجها مثل HTML / CSS و لكن أكثرهم لا يستخدم الأكواد كثيراً و يقوم فقط بالتصميم و من ثم تأتى هنا مهمة مطور الواجهات حيث يقوم بتحويل هذه الصورة -التصميم- الى صفحة حية يستطيع المستخدم التفاعل معها.
أيضاً يمكن لمصمم الويب ان يقوم هو بهذه المهمة و تحويل تصميمه الى صفحة حية للمستخدم ولكنه هنا يفتقر لمعظم المهارات المهمة و المطلوبة فى سوق العمل الخاص بمطور واجهات المستخدم ، لذلك كن جادً و محيادً و انت تختار مسارك ولا تتدمج الاثنين معاً ، فمصمم محترف افضل من مصمم مبتدئ يستطيع استخدام هذه اللغات ، و العكس صحيح.
من أنا اذاً فى سوق العمل؟
هناك الكثير من المسميات لهذه الوظيفة ولكنه غالباً تحمل نفس المعنى او معنى مقارب مثلاً:
UI Developer
Front-End Developer
و أحياناً يحتاج المطور الى مهارة اضافية غالباً تعتمد على رؤيته الجمالية و الحرص على راحة المستخدم فى التصميم و التى تعرف بتصميم خبرات المستخدم (UX Design - User Experience Design) لذلك تجد معظم المهتمين بهذا المجال يضيف هذه المهارة بجانب المسمى الوظيفى الخاص به لتصبح :
UI/UX Developer
UI/UX Front-End Developer
لنضع هذه المسميات جانباً و نستعد للخوض فى طريق شاقٍ و لكنه ممتع الى ابعد الحدود - على الاقل بالنسبة لى-.
ما هى خطوات العمل؟
فى بداية طريقك للتعلم يجب ان تختار بحرص ما الجزء التى تريد ان تكون متخصص به ، اذا كنت تريد ان تستمر فى تصميم الصفحات فقط ، فلا انصحك بتكملة القراءة ولكنك ان كنت متشوق فعلاً للبدء فى مسار مطور صفحات الويب فهيا بنا ننطلق.
لنأخذ فى الاعتبار انه مطلوب منك مشروع كبير لموقع مثلاً لشركة ما ، فما هى الخطوات التى تتبعها للبدء فى مشروعك؟
لنتكلم كالمحترفين و ذو الخبرة ، يبدأ مطور الويب فى اتخاذ هذه الخطوات للبدء فى مشروعه - نحن الان تحت المسمى الوظيفى UI/UX Front-End Developer -
1- دراسة الهدف من المشروع و تصميم خبره المستخدم.
2- تحويل التصميم الخاص بخبره المستخدم الى تصميم تخطيطى.
3- تصميم صفحات المشروع كاملة
4- تحويل التصميم الى صفحة حية .
5- اضافة الـ Interactions و الـ Animation الخاص بالمشروع
6 - اختبار المشروع و سد الثغرات.
لأكون محياد معكم ، هذه الخطوات لا يتبعها الا المحترفين و الأكثر من 5 سنوات خبره فى هذه المجال ، اول خطوتين ( 1 - 2 ) يقوم بهم شخص متخصص و هو الـ UX Designer و الخطوة الثالثة (3) خاصة بصمم صفحات الويب و الآخيرة (6) غالباً ما يقوم بها المختصون باختبار المنتجات - Testers -
و لكنى اضع امامكم كل هذه من الباب العلم بالشئ و لك ان تفعل كما يحلو لك و لا تزيد على نفسك ما لا تحتمله ، و لكن ان كنت تفعل هذه كله فالمشروع فلن يكون راتبك اقل من 50$ فى الساعة.
متحمس للبدء فى التعلم؟
راجع نفسك قليلاً و القى نظرة على الوظائف البرمجية الأخرى قبل ان تتخذ هذا القرار ، فهذا المجال كل يوم يظهر به مكتبات و تقنيات جديدة ، و يجب تعلمهاً اول بأول لتنجو وسط عمالقة هذا المجال ، المنافسة هنا كبيرة و على نطاق واسع جداً و ليس من السهل الخوض فيها اذا كنت تريد فقط ان تجمع اموال ، فلن تنجح فى ذلك ان مليت و لو لدقيقة فى البدء فى تعلم مهارة او تقنية جديدة ، راجع نفسك قليلاً قبل البدء ، هناك مجالات تستطيع جنى المال ايضاً و بكثرة عن هذه المجال ، هذا المجال للشغوفين فقط!
قررت؟ هل انت متأكد؟
اذا انا احترمك و احترم شغفك و حماسك ، دعنى اعرض عليك ما يجب تعلمه لتبدأ مسارك الوظيفى:
HTML
CSS
CSS3
HTML5
CSS Framework
Javascript
Jquery
Javascript Framework
Package Managers
CSS Preprocessors
Javascript Task Runners
Unit Testers
أعلم ان القائمة طويلة و لكن يجب ان تعلم ايضاً انى اضمن لك بها الاحتراف و الوصول الى النخبة القليلة فى هذا المجال ، دعنا نقسم هذا القائمة الى قسمين و من ثم يمكنك ان تحدد ما الأساسى و يمكنه ضمان الوظيفة لك و ما هو الفرعى الذى يطور مهاراتك و يجعلك من النخبة.
من أول القائمة بالأعلى حتى Javascript Framework هى مهارات اساسية يجب عليك تعلمها ، اما الباقى فهو ليجعل لك وزنك الخاص وسط هذه المنافسة الشرسة.
جاء وقت العمل.
ها انا ذا سأبدأ بفتح جعبتى و عرض عليك مصادر التعلم المحفوظة و مأرشفة لدى منذ مدة و قد بدأت بالفعل فى مشاهدة الدروس و تطبيقها .
لنبدأ اذا:
فى البداية يجب عليك ان تتعلم لغة HTML و معرفة كيفية التخطيط ووضع هيكل المحتوى.
هذه القائمة هى المفضلة لدي :
و ايضاً لا ننسى اكاديمة حسوب ، فهذا القسم من الاقسام المحببة الى قلبى:
بعد ذلك ننتقل الى تعلم الـ CSS
و هذه القائمة من نفس القناة :
القسم الخاص بالـ CSS باكاديمية حسوب:
ثم ننتقل الى تعلم CSS3 مع نفس الشخص :
و بعدها نضف الى خبراتنا HTML5 و يمكنك ايضاً التعلم من نفس القناة:
بعد ان تنتهى من تعلم هذه الاساسيات ، اعمل بنصيحة صاحب هذه القناة و قم بتطبيق هذا المثال للتدريب:
ننتقل الآن من مرحلة المبتدئ الى مرحلة متقدمة و مهمة و اساسية و هى العمود الاساسى فى هذا المجال ، و هى تعلم لغة Javascript هناك العديد من المصادر المجانية لتعلم هذه اللغة ، و لكن لا اضمن لك شرح وافى و شامل مثل ما يفعل أ/اسامة فى شروحاته لذلك اتجه الى هذه القائمة الخاصة بشرح الـ Javascript
و يجب عليك متابعة قسم الجافاسكربت فى الاكاديمية لتزيد من خبراتك و معلوماتك :
بعد ذلك قم بتعلم مكتبة الـ JQuery و هى من اشهر و اهم مكتبات الـ Javascript :
بعد ذلك قم بتطبيق هذه الأمثلة على ما تعلمته فى الـ Javascript و الـ Jquery
حسناً انت الآن فى طريقك الى الاحتراف ، بعد مشاهدة و تعلم المهارات بالأعلى و خاصة بعد تعلم CSS3 فأنت الآن على دراية بأنه يجب عليك انت تصمم و تطور واجهات بحيث ان تكون متجاوبة لكل الشاشات و خاصة شاشات الهواتف المحمولة ، و ايضاً تعلم انه من الصعب و الشاق ان تقوم بعمل ذلك من الصفر عن طريق الـ media queries الخاصة بالـ CSS3 لذلك سنتجه الى تعلم احد الـ CSS Frameworks و المفضل و الاكثر طلباً فى هذا المجال هو Twitter Bootstrap دعنا نبدأ مع أ/ اسامة جزاه الله خيراً مرة أخرى:
يمكنك الآن التوقف عند هذا الحد و الشروع فى بداية مسارك المهنى و التوجه للعمل الحر ، و انا اضمن لك الحصول على مشاريع حتى بدون ان تمتلك خبرات سابقة ، فقط الإلمام و التطبيق بهذه المهارات يضمن لك البدء فى العمل.
و لكن ماذا اذا اردت ان يصبح لك مكاناً اخر؟
حسناً فى البداية دعنى اشرح لك ما بعد هذه المرحلة
انت الآن تستطيع ان تأخذ ملفات الـ PSD الخاصة بتصميم المواقع و تحويلها الى صفحات حية و متفاعلة ايضاً و يمكنك تطويرها بحيث ان تصبح مناسبة لجميع الشاشات .
فماذا اذا وجدت عميل يطلب منك تصميم و تطوير مشروعه من الصفر؟
هنا يجب عليك ان تبدأ المشروع على الخطوات المذكورة بالأعلى و هى تصميم خبرات المستخدم و تصميم الصفحات باستخدام الفوتوشوب و تقوم بمهمة مصمم الصفحات فى هذه المرة ، و لكن ذلك تمهيداً لدورك الرئيسى فى المشروع و هى التطوير وليس التصميم .
دعنى اخبرك ان الحصول على الخبرات الخاصة بمصممين خبرة المستخدم تحتاج لدراسات كثيفة لا علاقة لها بالبرمجة او غيره و لكنى اضمن لك ايضاً ان اللمسات الجمالية و الاساسيات الخاصة بهذه النقطة يمكن الحصول عليها عن طريق الممارسة و فهم محتويات الموقع جيداً و قراءة القليل من المقالات و الاستفادة من الخبرات الاخرى ، و للأسف هذا المجال لم اجد فيه المهتمين فى المجتمع العربى ، و من يملك فيه معلومات يعرضها للبيع فضلاً عن نشره لها - لا لوم عليهم - لذلك سنضطر فى هذه المرحلة الى متابعة بعض المقالات الانجليزية ، يمكنك البحث فى جوجل او الولوج الى احد هذه المدونات :
بعد التصميم و التخطيط ستنتقل الى مرحلة التصميم ببرنامج الفوتوشوب ، و انا ارشح لك هذه السلسة القصيرة فقط للتعلم ثم بعد ذلك الممارسة بمخليك - انت الآن على طريق الاحتراف - ، فليس عليك ان تتعلم سوي الاساسيات و تبدأ انت بالابداع :
حسناً انت الآن من المحترفين و يمكنك البدء فى تنفيذ اى مشروع من نقطة الصفر حتى النهاية ، و لكن ماذا بعد؟
كيف اكون من النخبة الآن؟
انت تعلم كيف تكون كذلك ، هناك القليل من المهارات المتبقية للوصول لهذه المرحلة ، فى البداية يجب عليك تطوير اكوادك و خصوصاً الكود الخاص بالـ CSS و الاعتماد الكلى على البرمجة - حيث ان لغة CSS ليس لغة برمجية - و الانتقال من هذه اللغة الى احد معالجى هذه اللغة و تبدأ بالكتابة بها فى السياق البرمجى .
هناك اكثر من معالج مثل : SASS , LESS , SCSS و لكل منهم مميزاته و لكن تعلم احداهم يغنى عن الأخرى ، لذلك دعنا نبدأ فى تعلم SASS ، و لنذهب الى أ/اسامة مرة اخرى :
و تابع ايضاً دروس الاكاديمية من هنا :
/sass/
بعد ذلك او قبل ذلك ايضاً و لكنه امر حتمى لابد منه و هو بدء تعلم و التعامل مع الـ Javascript Framework و ايضاً عند هذه النقطة يوجد العديد من الفريموركس مثل AngularJS,React,Backbone,Ember و للأسف لم اصادف اى محتوى عربى يشرح هذه التقنيات بعد ، من منهم افضل؟ هذه الاسئلة تصبح معقدة كثيراً فى هذا المجال ، فهناك الكثير من التقنيات و المكتبات و لكل منها مميزاتها و عيوبها ، و لكنك لك ان تتقن واحدة منهم حتى تغنيك عن الاخرى و تفعل بها ما تستطيع فعله باى واحدة اخرى ، لذلك دعنى اعرض عليك AngularJS و الذى بدأت الكورس الخاص بها على موقع كورسيرا هذا الشهر :
انت الآن يا صديقى مميز جداً فى هذا المجال و يمكنك تصميم و تطوير اى شئ فى الواجهات الامامية للمواقع ، انت لديك قوى خارقة حالياً ، انا واثق فى ذلك ، و لكن لما انت بطئ و تأخذ وقت كثير لإنجاز مشاريعك؟
اعرف الاجابة ، انت تحتاج فى كل مرة ان تحمل الـ frameworks و تقوم بانشاء الفولدرات و نقل الملفات و تتابع كل هذه العمليات يدوياً و هذا يأخذ الكثير من الوقت .
حسناً انا اعرض عليك Bower package managment لتقوم هى بكل ذلك بدلاً منك و ايضاً اعرض عليك التعرف على المساعد الشخصى لمطور الوجهات و يمكنك الاختيار بين هذين الرائعين Grunt/Gulp فهما سيساعدوك فى كل الامور اللى تفقدك وقتك و جهدك ، و ايضاً يمكن الاستفادة منهم فى تصغير الكود البرمجى الخاص بك فى النهاية و هى احد الأوامر الاساسية فى مشاريعى - minify- للحصول على سرعة اكبر عن تحميل صفحة الويب ..
انهيت كل شئ؟ حسناً ضف القليل الى مهاراتك و اختبر تطبيقاتك بنفسك قم بتعلم احد الـ Unit Testers مثل Jasmine / Karma ، انت الآن من النخبة يا صديقى.
ماذا؟ من اين؟؟ انت لست مبتدئ لاساعدك فى هذه النقطة ، قم بالبحث ، و انا اضمن لك ان تستطيع التعامل مع الـ task runners و الـ unit testers بعد قراءة الـ documentation الخاص بهم فقط ، انت من النخبة يا صديقى ، يمكنك الآن ان تقوم بدور أ/اسامة و تشرح احد هذه التقنيات فى سلسة خاصة بك مجاناً للمتعلمين من بعد ، اهنئك .
الطريق طويل جداً اعلم ذلك ، و بالاجتهاد قد تنجز هذا كله فى عام على الأقل اذا بدأت من الآن ، فأجعل للعام الجديد هدف يمكنك تحقيقه ، كل المصادر بين يديك ، فقط الاستفادة من وقتك ، انا اقدم لك النصيحة و انا لا استطيع ان انفذها ، و لكن ساحاول ان استمر فى المسار الذى بدأته و احقق اهدافى فى العام الجديد.
أذا اعجب المقال احدكم ، سأحاول ان اعرض عليكم فى موضوع آخر طرق الربح من هذا المجال المختلفة ، و من افضل ، بيع القوالب ام العمل الحر ام العمل فى شركة ما ، فانا اجد الطريق مفتوح لمجالات عده أخرى ، الطريق ليس سهل ، أفكر فى تغير مسارى الى كاتب محتوى -بمزح- بعد ان رأيت الصورة الكاملة للمجال ، اعتقد انى فعلت ، لكنى اتصطدم كل فترة بتقنية جديدة او اسلوب جديد لم اكن اعلم به من قبل .
لا تبخل على برأيك ، و عَدل على احد النقاط اذا كنت قد أخطئت ، و ضيف الآخر اذا كنت قد نسيت شيئاً .
و حظ موفق للجميع ان شاء الله
التعليقات