ووردبريس باون

دورة قوالب ووردبريس: بيئة العمل – الأدوات 2

10 يونيو 2009

بسم الله الرحمن الرحيم، مع الجزء الثاني من موضوع أدوات تطوير الويب، وإعداد بيئة العمل،  تطرقت  في الموضوع إلى ثلاث محاور:

1. برامج تحرير الكود plain Text Editor
   • - Komodo
   • NotePad++
2. برامج تجربة المتصفحات
   • فايرفوكس وإضافاته
   • المتصفحات الإخرى
   • IeTester
3. إضافات فايرفوكس لتطوير الويب
   • web developer
   • FireBug

2. تجربة المتصفحات

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

1. الفايرفوكس كمنصة:

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

2. إضافات فايرفوكس لتجربة المتصفحات

هناك إضافات كثيرة لتجربة مظهر الصفحة على متصفحات أخرى من خلا فايرفوكس نفسه، يمكنك البحث عنها وتجربتها من خلال الموقع الرسمي لإضافات فايرفوكس، تحت تصنيف web Development

3. المتصفحات الأخرى:

يمكنك تثبيت المتصفحات الأخرى التي تهتم لأمرها، Safari Opera GoogleChrom هذه كمتصفحات أساسية، المشكلة تكمن في نسخ الالإكسبلورر، لا يمكن تثبيت أكثر من نسخة على نفس الجهاز، لكن لحسن الحظ أن هناك طرقا لتجربت أعمالنا على جميع نسخه، ابتداء من النسخة 5.x  ولعل أفضلها هو برنامج I.E.Tester

4. I .E .Tester

يمكنك تحميل البرنامج في موقع MyDebugbar، من الصفحة الرئيسة لبرنامج IE Tester، بعد تثبيت البرنامج ستحصل على بيئة كاملة لتجربة متصفح Explorer بكامل نسخه.

3. إضافات فايرفوكس لتطوير الويب

كما سبق ان ذكرت فايرفوكس المنصة المفضلة لمطوري الويب، والفضل راجع لإضافاته المميزة التي تساعد المطورين على تحسين الأداء، تطوير الاعمال، تحليل اعمال الآخرين والإستفادة منها، ومن أروع الإضافات في هذا الصدد، إضافتي Web Developer و FireBug

1. إضافة web Developer

تثبيت الإضافة:

https://addons.mozilla.org/en-US/firefox/downloads/latest/60/addon-60-latest.xpi

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

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

توفر الإضافة مميزات عديدة، المصحح التلقائي(1)، معاينة عناصر الصفحة بطرق مختلفة، كمثال: عند التأشير عليها (2)، فيقوم بوضع حدود بالاحمر للعنصر (أنظر الصورة الموالية) كذلك يظهر عمق العنصر في الملف، هذا سيساعدنا على إكتشاف أخطائنا في الصفحة، وأسباب انزياح بعض العناصر الإخرى إلى الأسفل مثلا، كذلك في معاينة أي موقع على الشبكة والإستفادة منه.

هنا يظهر شعار المدونة عند الإشارة إليه، ويظهر عمقه في الملف

هنا ينبهني المصحح بخطأ في ملف التنسيق لإضافة من إضافات ووردبريس

تمكنك الإضافة ايضا من إبطال تنسيق css معين، لمشاهدة الموقع فقط كبنية Html، أو إبطال تنسيق المتصفح الإفتراضي وهكذا..

2. إضافة FireBug

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

تثبيت الإضافة:

https://addons.mozilla.org/en-US/firefox/downloads/file/47650/firebug-1.3.3-fx.xpi

بعد تثبيت الإضافة يظهر رمزها الصغير في شريط الحالة أسفل المتصفح، (في أقصى اليمين للإنجليزية) بعد النقر على تلك الحشرة السحرية تظهر لك نافدة بشقين، الكود الناتج في صفحة html وتنسيق css لكل عنصر عند النقر عليه، أيضا عند التأشير على العنصر يظهر لك مكانه في الصفحة مباشرة، مع تحديد خصائص الهامش الداخلي والخارجي padding/margin (سنتطرق لهما فيما بعد)، من مميزات الإضافة أيضا أنها تحدد العناصر التي يرث منها العنصر عند النقر عليه، ويحدد الخصائص التي تم إلغاؤها عند الوراثة (لا تبتئس إن لم تفهم سنشرح مفهوم الوراثة في مواضيع لاحقة)، لتعديل الخصائص فقط أشر أنقر على الخاصية بالفأرة وأكتب القيمة الجديدة، أتركك لإكتشاف سحر هذه الإضافة.

كما قال رشيد، الأدوات جاهزة لنبدأ حصة الطبخ..

مواضيع مشابهة:

• دورة قوالب ووردبريس: بيئة العمل – الأدوات 1
• دورة قوالب ووردبريس: بيئة العمل – الخادم المحلي
• دورة قوالب ووردبريس: بيئة العمل – تثبيت ووردبريس
• دورة قوالب ووردبريس: ماذا تعرف عن html؟

الاوسمة: FireBug, Web Developer, أدوات مطوري الويب, برامج تحرير الكود, بيئة العمل, تكويد, دورة قوالب ووردبريس