على غِرار اكاديمية حسوب، ما هو تطوير واجهات المستخدم؟ وكيف ابدأ التعلم مجاناً.

السلام عليكم و رحمة الله ،

فى بداية شهر يوليو الماضى قررت اتخاذ مسار جديد و تغيير المسار المهنى المستقبلى، فى السنوات الأخيرة اتخذت مسار مصمم الجرافيك و لكنى لم اجد به فرص تستحق المجازفة للإعتماد عليه فى المستقبل ، لذلك قررت ان اتوجه الى عالم الويب و خصوصاً تطوير واجهات المستخدم.

أولا ما هى واجهات المستخدم و انواعها؟

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

مطور واجهات المستخدم له العديد من الأدوار و له اكثر من وظيفة فمثلاً هناك من يطور الواجهات الخاصة بمواقع الويب , و آخر للتطبيقات الويب او قوائم التحكم الخاصة بالمديرين فى خلفية الموقع ، و هناك من يصمم و يطور الواجهات الخاصة بتطبيقات الموبايل.

حسناً، ما الفرق اذاً بين مطور واجهات الويب و مصمم صفحات الويب؟

مصمم صفحات الويب يعتمد غالباً على التصميم الجرافيكى فقط بالاضافة الى بعض اللغات التى قد يحتاجها مثل 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 الخاص بهم فقط ، انت من النخبة يا صديقى ، يمكنك الآن ان تقوم بدور أ/اسامة و تشرح احد هذه التقنيات فى سلسة خاصة بك مجاناً للمتعلمين من بعد ، اهنئك .

الطريق طويل جداً اعلم ذلك ، و بالاجتهاد قد تنجز هذا كله فى عام على الأقل اذا بدأت من الآن ، فأجعل للعام الجديد هدف يمكنك تحقيقه ، كل المصادر بين يديك ، فقط الاستفادة من وقتك ، انا اقدم لك النصيحة و انا لا استطيع ان انفذها ، و لكن ساحاول ان استمر فى المسار الذى بدأته و احقق اهدافى فى العام الجديد.

أذا اعجب المقال احدكم ، سأحاول ان اعرض عليكم فى موضوع آخر طرق الربح من هذا المجال المختلفة ، و من افضل ، بيع القوالب ام العمل الحر ام العمل فى شركة ما ، فانا اجد الطريق مفتوح لمجالات عده أخرى ، الطريق ليس سهل ، أفكر فى تغير مسارى الى كاتب محتوى -بمزح- بعد ان رأيت الصورة الكاملة للمجال ، اعتقد انى فعلت ، لكنى اتصطدم كل فترة بتقنية جديدة او اسلوب جديد لم اكن اعلم به من قبل .

لا تبخل على برأيك ، و عَدل على احد النقاط اذا كنت قد أخطئت ، و ضيف الآخر اذا كنت قد نسيت شيئاً .

و حظ موفق للجميع ان شاء الله