تذكرني !

 





الملتقى العام مواضيع عامة

تجربتي في تعلم تصميم الويب بشكل يومي – الجزء الثاني

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

إضافة رد
 
أدوات الموضوع
  #1  
قديم 08-23-2015, 02:52 PM
الصورة الرمزية Eng.Jordan
Eng.Jordan متواجد حالياً
إدارة الموقع
 
تاريخ التسجيل: Jan 2012
الدولة: الأردن
المشاركات: 20,483
افتراضي تجربتي في تعلم تصميم الويب بشكل يومي – الجزء الثاني





تجربتي تعلم تصميم الويب بشكل learning2-965x425.jpg
كنت قد كتبت سابقاً عن تجربتي في تعلم تطوير الويب بشكل يومي، سوف أكمل التحدث عن التجربة. لمشاهدة الجزء الأول من هنا
بعد أن وصلت إلى أكثر من 8 أشهر من التعلم المتواصل شعرت بأن العمل على ملفات PSD أصبح أمراً يجب تغييره، لانه من الممكن ان تقوم بتطبيق ملف كامل بحذافيره كما هو بالتصميم، لكن بنفس الوقت لم تتعلم مهارة جديدة، فقط قمت بالممارسة أكثر. لا أقول أن هذا أمر غير جيد لكن يفضل أن تتعلم مهارة جديدة بنهاية كل يوم.
Codepen هو عبارة عن منصة تمكنك من عمل تجارب بالويب بشكل سريع من دون اللجوء إلى محرر برمجي على جهازك ومتصفح، تكتب الكود وسوف تظهر النتيجة مباشرة أمامك، بدأت بإنشاء أمور وأفكار جديدة كان بعضها يأخذ مني ساعات، وسابقاً كنت أعمل على تصاميم PSD وأحولها لصفحات ويب وتأخذ مني نصف الوقت الذي يلزم لتطبيق مهارة جديدة على Codepen. إذن تعلم مهارة جديدة ومواجهة مشاكل فيها أفضل من أن تنفذ تصميم معين وتفرح بإنجازه بكل تأكيد.

CSS ليست سهلة

صحيح أن تنسيقات CSS من السهل أن يفهمها أي شخص لا يعرف بالويب، لكن كتابتها ليست كذلك. في البداية كنت أعمل على مواقع تتكون من خمس صفحات مثلا، اقوم بعمل ملف CSS واحد وفيه الكثير من التكرار بالكود وكنت لا أكترث لهذا الأمر. لكن عندما عملت على مشاريع مختلفة لاحظت أن هناك مشكلة، كتابة CSS تحتاج لإن تكون محكمة جداً وأن أحاول قدر الإمكان أن يكون الكود المكتوب غير مكرر.
CSS ربما تكون سهلة عندما يتم تطبيقها على عنصر واحد – اثناء مرحلة التعلّم – أما إذا كانت على مشروع ويب حقيقي (كموقع اخباري مثل Mashable) فإن الأمر سيكون مختلفاً حينها. صعوبتها تكمن عندما يتوسع المشروع، وتتكرر العناصر، وتتعدد الصفحات، عندها تكون هيكلة CSS هي المشكلة، وارتباط الملفات مع بعضها البعض بطريقة متينة، ولتسمح لك بتوسعة المشروع في المستقبل بكل سهولة.
لو كنت تعمل على مشروع أنت وفريق من المطورين، يجب أن يتم الإتفاق فيما بينكم على طريقة معينة لكتابة CSS، هنا تكون الحاجة لمعرفة مهارات بتنظيم وترتيب الكود أكثر من معرفة كتابة الكود نفسه، فيجب أن يتم كتابة ال Classes بنسق معين ومتفق عليه، تقسيم الملفات إلى أسماء مختلفة ومنطقية، هناك مقال كامل عن هذا الموضوع قريبا.
إستخدام CSS Pre-Processors

لنفرض أنك تعمل على مشروع ويب ويوجد لديك 11 لون مختلف يتم إستخدامهم في الصفحات، لنفرض أن لون النص هو #dedede (رمادي)، هل ستقوم بكتابة هذا الكود عند كل عنصر يحتاجه؟ ماذا لو قررت أن تغير اللون وتستبدله لكافة العناصر؟ هل سوف تغير اللون يدوياً لكافة العناصر؟ بالتأكيد نعم لو لم تكن تعرف بالأمر التالي:
في لغات البرمجة يمكن أن تعرف متغير Variable وتعيد إستخدامه كما تريد في الكود، لكن في CSS هذا الأمر غير موجود (بالوقت الحالي)، لذلك تم إيجاد ال CSS Pre-Processors والتي تعطيك الإمكانية لإستخدام أمور مثل Variables, Nesting, Extend, For Loops. ومن أشهر هذه الأدوات هي Sass, Less.
كتابة كود CSS مرتب

من أهم مفاتيح النجاح بكتابة كود CSS مرتب ونظيف، هي أن تقوم بتسمية الكلاسات بشكل مرتب ومتسلسل وأن تبتعد قدر الإمكان عن إستخدام ال ID وإليك السبب:
يوجد مصطلح إسمه CSS Specificity ويعني قوة التحديد أو الاختيار، فمثلاً عندما يكون لدينا عنصر معين ونقوم بإعطاءه Class و ID بنفس الوقت، ومثلا في ال Class يكون لونه أحمر وال ID أزرق، سيتم أخذ اللون من ID لإنه أقوى. لذلك حاول قدر الإمكان أن لا تستعمله إلا بالحالات الضرورية فقط.
بالبداية كنت أسمي ال Classes من دون تخطيط وترتيب وذلك كان يؤدي لتكرار كثير، فعلى سبيل المثال يوجد عنصر معين يتكرر بنفس الخصائص لكن الإختلاف يكون فقط باللون في كل مرة، كنت أعطي كل عنصر Class بإسم مختلف عن سابقتها كالتالي:
تجربتي تعلم تصميم الويب بشكل Screen-Shot-2015-05-16-at-5.30.50-PM.png
كما تلاحظون كل العناصر مشتركة بنفس الخصائص ما عدا لون الخلفية، لكن ماذا لو اعطينها 2 Class بحيث تكون وحدة منهم مشتركة بالخصائص بين العناصر والثانية تميز كل عنصر عن الاخر من ناحية اللون كالتالي:
تجربتي تعلم تصميم الويب بشكل Screen-Shot-2015-05-16-at-5.32.25-PM.png
بهذه الحالة ستعطى الخصائص المشتركة ل header-item وعند تغيير اللون سيتم فقط وضع اللون الأزرق للخلفية في كلاس header-item-blue على سبيل المثال.
إستخدام Frameworks

من أكثر الأخطاء التي قد يوقع بها من يريد أن يتعلم الويب هي أن يستخدم إطار عمل جاهز مثل Bootstrap من دون فهم الأساسيات وما وراء الكواليس. يظن الكثير بأن عمل موقع تجاوبي أمر معقد وأن إطار العمل سوف يسهل عليك ويختصر الوقت، لكن بنظري:
“إذا كان لديك فهم لأساسيات الويب لن يهمك أن تستعمل شيء جاهز مثل Bootstrap أو أن تبني شيء خاص للمشروع الذي تعمل عليه، أفضل أن أرى ملف HTML مكتوب بطريقة مرتبة وجميع ال Classes فيه لها أسماء واضحة ومفهومة بدلاً من قراءة الأسماء التالية في مشروع تم عمله بإستخدام إطار عمل جاهز: col-md-6, col-xs-12, col-lg-10”. هناك مقال مفصل عن هذا النقطة قريبا إن شاء الله.
تسمية العناصر في CSS

مع الوقت وفي المشاريع الكبيرة ستحتاج لأن تسمي الكلاسات بطريقة وبنسق معين حتى يكون هناك تناسق عام في الكود، من أحد طرق تسمية العناصر هي BEM، اختصار ل Block, Element, Modifier. فعلى سبيل المثال يوجد لدينا العنصر التالي والذي يحتوي على: عنوان الخبر، صورة، الكاتب، أزرار المشاركة.
تجربتي تعلم تصميم الويب بشكل news-item.jpg
لو أردنا أن نكتب الكلاسات الخاصة به ستكون كالتالي:
تجربتي تعلم تصميم الويب بشكل Screen-Shot-2015-05-16-at-5.54.15-PM.png
لاحظ أنك بمجرد قرائتك لأسماء الكلاسات ستفهم المضمون لهذا العنصر ولو ليس بشكل كامل. لو اتبعت هذه الطريقة في التسمية سترتاح كثير خصوصاً لو كان هناك أكثر من مطور يعمل على ملفات CSS، استفدت من هذه الطريقة حتى الآن في التالي:
  • - التقليل من التكرار بإستخدام CSS
  • - كود HTML مقروء ومفهوم
  • - التخلص من التداخل Nesting في CSS
التوثيق والأدوات المساعدة

من المهم أن توثق ما تتعلم بشكل يومي في مستند نصي والأجمل من ذلك أن تطبعه أمامك في الأيام الأولى لكي ترى نتائج الجهد الذي قمت به. من الأدوات الممتازة لهذا الأمر هي Google Docs.
لنفرض أنك تعلمت مهارة معينة في اليوم رقم 100 وتريد أن تراجعها في اليوم رقم 250، سيكون من السهل عليك أن تبحث في الملف عن إسم المهارة وستجد المثال الذي قمت به. في التوثيق كنت أضيف روابط للتمارين التي أعملها على Codepen بحيث أرجع لها وقت الحاجة.
يوجد موقع رائع جداً إسمه Trello، فكرته بأن تقوم بإنشاء لوحة Board وتضع فيها بطاقات عن أمور معينة، في تعلمي للويب أضفت البطاقات التالية: Upcoming Practises, Finshed, VIP Topics, Articles. كما في الصورة التالية:
تجربتي تعلم تصميم الويب بشكل Screen-Shot-2015-05-16-at-6.04.53-PM.png
نظام التحكم بالإصدار Version Control System

ببساطة هو عبارة عن نظام يساعدك في التحكم بمشاريعك بشكل أفضل مع توثيق ممتاز وحفط للبيانات، من الأمثلة عليه هو نظام Git. لو كان لديك مشروع ويب ويوجد خمس مبرمجين يعملون عليه، سوف يساعدك Git في أن يحصل كل منهم على نسخة محلية Local من ملفات المشروع، وعندما ينتهي كل منهم من عمله على جزء معين يستطيع أن يعمل Push للتحديثات على المستودع Repository، وباقي أعضاء الفريق بإمكانهم عمل Pull لمشاهدة التحديثات الجديدة. بكل بساطة تجربتي تعلم تصميم الويب بشكل smile.gif
في رحلة تعلمي للويب استخدمت Git بالفترة الأخيرة (منذ شهرين قريباً) مع كل مشروع أعمل عليه، حتى لو يمكن هناك فريق سوف ينظم ذلك عملك ويحفظه في مكان آمن تستطيع الوصول له في أي وقت. فوائد Git بشكل عام:
  • - هل قمت بتعديل على الكود واكتشفت بعد فترة أن التعديل خطأ وتريد أن ترجعه إلى ما كان عليه قبل التعديل؟ Git لها.
  • - مشاهدة الفرق بين صفحتين مختلفتين.
  • - هل تريد أن تجرب خاصية جديدة؟ تستطيع أن تنشىء فرع Branch وتعدل عليه كما تريد. اعجبتك الخاصية؟ تستطيع دمجها مع عملك الحالي، واذا لم تعجبك بإمكانك حذفها ومعاودة العمل سابقاً من جديد.

ماذا بعد؟

- حالياً أقوم بتقوية مهاراتي في ********** وسوف أبدأ بتعلم إطار عمل AngluarJS لكي يتم عمل تطبيقات ويب بإستخدام HTML وأيضاً أريد أن استفيد منها في ال Templeting، مثلا يوجد لدي Header في موقع معين، عندي خمس صفحات مختلفة وكل صفحة فيها Header، لو أردت التعديل على ملف HTML سأضطر لتكرار التعديل في الخمس ملفات. أما لو كنت أستعمل AngularJS سيتم تطبيق التعديل بشكل تلقائي على جميع الصفحات.
- التعمق في موضوع CSS Architicture وكيفية كتابة CSS بشكل مرتب ونظيف للمشاريع الكبيرة.

المصدر: ملتقى شذرات


j[vfjd td jugl jwldl hg,df fa;g d,ld – hg[.x hgehkd hg[sl hgkdm ja;g ],gd

__________________
رد مع اقتباس
إضافة رد
إضافة رد

العلامات المرجعية

الكلمات الدلالية (Tags)
الثاني, الجسم, النية, تجربتي, تصميم, تشكل, تعلم, دولي

« تجربتي في تعلم تصميم الويب بشكل يومي – الجزء الأول | داووا مرضاكم بالصدقات .. قصة واقعية »

يتصفح الموضوع حالياً : 1 (0 عضو و 1 ضيف)
 
أدوات الموضوع

ضوابط المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا يمكنك اضافة مرفقات
لا يمكنك تعديل مشاركاتك

BB code متاحة
كود [IMG] متاحة
كود HTML معطلة

ضوابط المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا يمكنك اضافة مرفقات
لا يمكنك تعديل مشاركاتك

BB code متاحة
كود [IMG] متاحة
كود HTML معطلة


المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
تجربتي في تعلم تصميم الويب بشكل يومي – الجزء الأول Eng.Jordan الملتقى العام 0 08-23-2015 02:51 PM
هل تعلم لماذا سُمّي يومي؟؟؟ صباح الورد الملتقى العام 0 09-12-2014 08:38 AM
هل كان مشروع الشعاع الازرق احد اهداف احتلال العراق؟؟ الجزء الثاني Eng.Jordan مقالات وتحليلات مختارة 0 06-03-2014 02:20 PM
دفتر عقد المقاولة الموحد للمشاريع الانشائية الجزء الثاني الشروط الخاصة (فيديك1999) Eng.Jordan المكتبة الهندسية 1 05-28-2013 05:45 PM
الجيل الثاني من الويب التفاعل والتعليم من أكبر المستفيدين Eng.Jordan علوم وتكنولوجيا 0 11-10-2012 09:37 PM

 

 

 
 

 

 
     
 

  sitemap  forummap

 


جميع الأوقات بتوقيت GMT +3. الساعة الآن 11:52 PM.

الاستايل الأصلي من تصميم استضافة لمسات


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
Adsense Management by Losha
جميع المواضيع والمشاركات المطروحة تعبر عن وجهة نظر كاتبها ولا تعبر بالضرورة عن رأي إدارة الموقع
جميع الحقوق محفوظة لـ موقع شذرات
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68