المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : تجربتي في تعلم تصميم الويب بشكل يومي – الجزء الأول


Eng.Jordan
08-23-2015, 02:51 PM
تجربتي في تعلم تصميم الويب بشكل يومي – الجزء الأول

http://ishadeed.com/blog/wp-content/uploads/2015/02/front-end-965x425.jpg (http://ishadeed.com/blog/front-end/learning/)


الشغف هو أن تعمل ليل نهار ولا تشعر بأي تعب، الشغف هو ان تترك جزءاً من عمل أنت مستمتع به لليوم التالي حتى تبدأ به صباحك، الشغف هو أن تقرأ كتاباً يتعلق بمجال عملك وتضعه تحت وسادتك ليلاً لكي تحفظه أو ربما لكي تحلم بفكرة جديدة تفتح لك آفاقاً كثيرة، لا يوجد شيء أروع من أن تحب ما تعمل، فأنت تقوم بشيء منك وفيك.
قبل سنة واحدة مثل هذه الأيام لم يكن لدي تلك التجربة التي تستحق أن تذكر مع تصميم الويب، كنت أجهل أنه يجب أن يتم إختيار Grid معين لكي نبدأ بالعمل على تصميم موقع معين، كنت أشعر بالإستياء عندما لا يتم تطبيق فكرة صممتها من قبل المبرمج، وهي في الحقيقة غير ممكنة التطبيق لسبب أو لآخر.
حاولت في فترات سابقة أن أتعلم برمجة الويب، لكن كنت أبدأ وبعد مدة معينة أتوقف وأنسى كل ما تعلمت! هذه مشكلة كبيرة تواجهنا جميعاً، وسببها غالباً هو أننا نريد أن نصبح شيئاً كبيراً خلال فترة قصيرة.
قررت في آخر شهر 6 من عام 2014 أن أبدأ في التعلم بشكل يومي بإستخدام تطبيق Commit (https://itunes.apple.com/us/app/commit/id473527073?mt=8)، والذي يشجع الشخص كثيراً على الإلتزام بعادة جديدة أو تعلم شيء معين. كان من المفترض أن أبدأ في نهاية الشهر لكن أجلت موعد البدء لشهر 7 وبدأت بالتعلم يوم الأربعاء 2/7/2014. كنت قد عملت سابقاً على تصميم تجريبي لمدونتي وقررت أن أبدأ رحلتي مع الويب بإستخدام هذا التصميم.
كنت متحمساً جداً في اليوم الأول وبدأت في أول تمرين وهو الصفحة الرئيسية لصفحة المدونة وواجهت عدة مشاكل كما بالصورة:
http://ishadeed.com/blog/wp-content/uploads/2015/02/Screen-Shot-2015-02-21-at-3.08.02-PM.png (http://ishadeed.com/blog/wp-content/uploads/2015/02/Screen-Shot-2015-02-21-at-3.08.02-PM.png)اليوم الأول من التعلم

مشكلة الأيام الأولى أن الشخص يكون قليل الخبرة، لا يعرف ماذا سيتعلم بالأيام القادمة، هل سينجح في تمرين الغد؟ الكثير من الأسئلة التي تدور في ذهنه والتي من شأنها أن تحبط الإنسان وتجعله يتوقف عن التعلم!
من أكثر الأخطاء التي ترتكب هي أن تقول لنفسك “دعني أرتاح غداً من التمرين، لقد تعبت”. غالباً عندما ترتاح يوم سترتاح بقية الأيام :D نعم هذا ما سيحدث. لا ترتاح! اتعب قليلاً لمستقبلك.
ومن هنا بدأت رحلة التعلم، صرت أحمل ملفات PSD مجانية وأقوم بمحاولة عملها HTML/CSS، أو مثلا اخذ ملفات مشروع قديم واقوم بالعمل عليه. كنت أحاول بأن أختار في كل تمرين تحدي جديد، واذا لم اواجه اي مشكلة باليوم الذي اتعلم فيه أحاول أن ابحث عن شيء جديد، لان عدم مواجهة مشاكل يعني أنك لم تتعلم شيء جديد.
الأدوات المساعدة

تطبيق Commit (https://itunes.apple.com/us/app/commit/id473527073?mt=8)

فكرة التطبيق أنه يقوم بسؤالي يومياً “هل تمرنت اليوم على html/css/js” ؟ وعند الضغط على “نعم” يزيد العداد يوم ويكتب في أسفل الصفحة “233 يوماً متتالياً”.
الجميل في هذا التطبيق أنه يشجع الشخص ببساطته وفكرته المميزة التي تقوم على أن تعلم أي شيء يحتاج إلى ممارسة وإلتزام يومي.
Google Docs

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

هناك عدة مواقف ربما لو وافقت أنت عليها، ستنهي يومك من دون تمرين. من الأفضل أن تقول “لا” ولا تخجل من أي إنسان. إجعل هذه التجربة تنظم حياتك بالكامل، لا تتعلم شيء جديد فقط بل أيضاً نمي مهاراتك في تنظيم الوقت واختيار المناسب لك.
مثال: يمكنك التخطيط لزيارة مكان معين أنت وأصدقائك، في ذلك اليوم عليك أن تحضر التمرين وتحاول أن تنهيه قبل أن تخرج معهم. سيكون وقتها مزاجك مرتاحاً ولن يكون تفكيرك مشوشاً بماذا ستتعلم اليوم.
الصعوبات

صعوبة إيجاد ملفات PSD بأفكار جديدة لكي أتمرن عليها.

أغلب ملفات ال PSD تشبه بعضها البعض، لذلك كان الحل بأن أقوم بتصفح مواقع مثل Dribbble أو Behance وتحميل تصاميم عادية JPG والتعلم عليها. بعد فترة صرت ألاحظ بأنه لا يوجد فرق كبير بين ملف التصميم المفتوح والصورة، ببساطة لانك كمصمم ويب لن يصعب عليك أن تعرف حجم الخط، لونه، المسافة بين العناصر سواء كان الملف JPG أو PSD.
التعلم أثناء السفر: سافرت مرتين أثناء التعلم وكل مرة كان لها تجربة مختلفة.

أثناء السفر تحدث أمور كثيرة لا تكون بالحسبان، مثل أن يكون هناك مشكلة بالانترنت مثلاً، او المكان الذي انت فيه غير مريح بالنسبة لك، فرق التوقيت، الارهاق وامور كثيرة تحاول ان تمنعك من التمرين.
قل لها بكل بساطة “لا”، سأقوم بتمرين اليوم رغماً عنك :)
المرة الأولى: قمت بتحضير خطة لمدة أسبوعين عن طريق عمل جدول يحتوى على تمرين معين لكل يوم، تم تأجيل السفر لظرف ووقتها اكتشفت أن تحضير خطة أسبوعية مثلا أمر جدا مهم، بدلا من التفكير كل ليلة في تمرين الغد، تستطيع أن تعد خطة اسبوعية وبهذا الشكل سوف ترتاح نفسياً وتقوم بالتمارين وانت مرتاح ولا تفكر في تمرين اليوم الثاني.
المرة الثانية: قمت بإعداد خطة مشابهة ومشيت عليها، حاولت أن استغل كل دقيقة كانت لدي أثناء الإنتظار في المطار وأيضاً أثناء الرحلة في الطائرة، كنت أقرأ كتاب Implementing Responsive Design وأطبق ما أتعلم.
حصول مشكلة في الاتصال بالانترنت

كنت اعتمد على مصادر لا يتم فتحها إلا بالانترنت، او مثلا ال *** Fonts. حاول ان تقوم بتحميل كل شيء والتحضير لأي شيء قد لا يكون بالحسبان.
من أين أحصل على التمارين؟

يصلني هذا السؤال بشكل مستمر، لا يوجد مصدر معين أعتمد عليه في التمارين. لكن بشكل عام أبحث في المواقع التالية: Dribbble, Behance, Pinterest وأبحث في جوجل عن ملفات مجانية.
في بعض الحالات يكون التمرين مشروع حقيقي أعمل عليه.
مصادر التعلم

يوجد عدة مصادر مميزة سوف أوصيكم بها.
دروس:


HTML5 Fundamentals (http://courses.tutsplus.com/courses/html5-fundamentals)
Cross Browser Testing (http://courses.tutsplus.com/courses/cross-platform-browser-testing)
********** Fundamentals (http://courses.tutsplus.com/courses/**********-fundamentals)
Advanced ********** (http://courses.tutsplus.com/courses/advanced-**********-fundamentals)
SEO for *** Designers (http://courses.tutsplus.com/courses/seo-for-***-designers)
Responsive *** Design Techniques (http://courses.tutsplus.com/courses/responsive-***-design-techniques)
CSS3 Animations (http://courses.tutsplus.com/courses/css3-animations)
PSD to HTML5 (http://courses.tutsplus.com/courses/psd-to-html5)

كتب:


AtoZ CSS (http://www.atozcss.com/books)
Implementing Responsive Design (http://www.implementingresponsivedesign.com/)
********** and jQuery: Interactive Front End *** Development (http://**********book.com/)
Eloquent ********** (http://eloquent**********.net/)

مواقع:


CSS Tricks (http://css-tricks.com/)
Smashing Magazine (http://smashingmagazine.com/)
Sitepoint (http://sitepoint.com/)
Codrops (http://tympanus.net/codrops/)
***designtuts (http://***design.tutsplus.com/)

قائمة قمت بعملها على تويتر تحتوي على أشهر الأشخاص في مجال Front End:


Twitter Front End List (https://twitter.com/shadeed9/lists/front-end-dev)


مشاركة الناس

من الجيد أن تشارك الناس ما تتعلم، سيعرفوا أنك ملتزم بتعلم شيء معين بشكل يومي وسوف يسألونك ماذا فعلت وإلى أين وصلت. قمت بنشر صورة على صفحتي في فيسبوك عن فكرة تطبيق Commit (https://itunes.apple.com/us/app/commit/id473527073?mt=8) في اليوم رقم 28 من التعلم. صرت أعرف أن البعض ينتظر مني الجديد ويريد تحديثات واخبار لماذا يحصل وهذا شجعني اكثر على إكمال الطريق. ربما لو لم أنشر تلك الصورة لما كنت أكملت التعلم.
مشاريع حقيقية

بدأت بالعمل منذ اليوم 45 على أول مشروع حقيقي، كانت التجربة حقاً رائعة وتعلمت منها الكثير. حاليا قمت بالعمل على 5 مشاريع Front End حقيقية، لم أكن أتخيل بأنني سأقوم بالعمل على مشاريع حقيقية قبل إنهاء مدة التعلم المحددة، لكن الممارسة اليومية أمر هام جداً ويغير حياة الإنسان بشكل كامل إذا طبقه في عدة أمور في حياته.
كتب هذا المقال في اليوم رقم 234 من التعلم، هل يوجد لديك إضافات أو اقتراحات معينة؟ تفضل بذكرها في التعليقات ولا تنسى أيضاً أن تشارك المقال مع من يهتم بتصميم الويب.

مصدر صورة المقال (http://www.oxygenna.com/freebies/iphone-photorealistic-mockups)