abohmam
21-03-2011, 02:50 AM
بسم الله الرحمن الرحيم
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
السلام عليكم ورحمة الله وبركاته
مع الجزء الثاني من موضوع أدوات تطوير الويب، وإعداد بيئة العمل، تطرقت في الموضوع إلى ثلاث محاور:
برامج تحرير الكود plain Text Editor
- Komodo
NotePad++
برامج تجربة المتصفحات
فايرفوكس وإضافاته
المتصفحات الإخرى
IeTester
إضافات فايرفوكس لتطوير الويب
web developer
FireBug
2. تجربة المتصفحات
لعل أصعب شيء يعاني منه المطورون، وخاصة العرب (مشكلة الإتجاه) هو موافقة أعمالهم مع المتصفحات، والأثرية منها بالخصوص، كثيرون يجدون راحتهم في ان لا يلقوا بالا لهذه المتصفحات، لكن علينا ان نعترف أن أكثر زوار الشبكة في العالم العربي يستخدمونها، لذلك من أرشد الأمور أن نقوم بدعمها ،و إظهار الموقع بشكل مرض على الأقل عليها، وهذا من أولوياتنا في هذه الدورة، لذلك وجب علينا تجهيز بيئة لتجربة اعمالنا والتأكد من موافقتها لأكثر المتصفحات إستعمالا.
1. الفايرفوكس كمنصة:
الفايرفوكس رغم وجود صفات متفوقة لمتصفحات اخرى عليه في أمور جمالية، إلا أنه المتصفح اللازم لكل مطور، عليه أن يكون منصة انطلاق، إذا توافق عملك مع فايرفوكس، لن تحتاج إلا إلى القليل من الترقيعات لتوافق متصفحات اخرى، طبعا علينا متابعة عملنا أولا بأول، وتجربته على المتصفحات بعد كل تعديل، لكي لا نضطر لإعادة العمل من البداية في حال ظهر لنا خلل ما.
2. إضافات فايرفوكس لتجربة المتصفحات
هناك إضافات كثيرة لتجربة مظهر الصفحة على متصفحات أخرى من خلا فايرفوكس نفسه، يمكنك البحث عنها وتجربتها من خلال الموقع الرسمي لإضافات فايرفوكس (https://addons.mozilla.org/en-US/firefox)، تحت تصنيف web Development (https://addons.mozilla.org/en-US/firefox/browse/type:1/cat:4)
3. المتصفحات الأخرى:
يمكنك تثبيت المتصفحات الأخرى التي تهتم لأمرها، Safari Opera GoogleChrom هذه كمتصفحات أساسية، المشكلة تكمن في نسخ الالإكسبلورر، لا يمكن تثبيت أكثر من نسخة على نفس الجهاز، لكن لحسن الحظ أن هناك طرقا لتجربت أعمالنا على جميع نسخه، ابتداء من النسخة 5.x ولعل أفضلها هو برنامج I.E.Tester
4. I .E .Tester
يمكنك تحميل البرنامج في موقع MyDebugbar (http://www.my-debugbar.com/)، من الصفحة الرئيسة لبرنامج IE Tester (http://www.my-debugbar.com/wiki/IETester/HomePage)، بعد تثبيت البرنامج ستحصل على بيئة كاملة لتجربة متصفح Explorer بكامل نسخه.
http://www.abc4web.net/vb/imgcache2011/8892.abc4web.jpg
3. إضافات فايرفوكس لتطوير الويب
كما سبق ان ذكرت فايرفوكس المنصة المفضلة لمطوري الويب، والفضل راجع لإضافاته المميزة التي تساعد المطورين على تحسين الأداء، تطوير الاعمال، تحليل اعمال الآخرين والإستفادة منها، ومن أروع الإضافات في هذا الصدد، إضافتي Web Developer و FireBug
1. إضافة web Developer
تثبيت الإضافة:
https://addons.mozilla.org/en-US/firefox/downloads/latest/60/addon-60-latest.xpi
بعد تثبيت الإضافة سيظهر لك شريط الأدوات الجديد، أحيانا قد لا تحتاجه، لذلك إستخدم هذه الطريقة السلسة، لإظهاره وإخفائه وقت الحاجة،أولا أنقر بالزر الأيمن للفأرة على مساحة فارغة من اشرطة الأدوات في متصفحك، واختر ِCustimise، ستظهر لك النافذة التالية، إبحث عن رمز الإضافة، واسحبه إلى مكان معين في أشرطة الادوات، أفضل شريط القوائم، ثم انقر على زر done.
http://www.abc4web.net/vb/imgcache2011/8893.abc4web.jpg
بهذه الطريقة ستخفف مظهر متصفحك ويبقى دائما أنيقا، يمكنك عمل ذلك مع عدة أمور اخرى كشريط ادوات جوجل وأخذ الأمور المهمة منه فقط، الآن يمكنك النقر على رمز الإضافة لإظهار او إخفاء الشريط
http://www.abc4web.net/vb/imgcache2011/8894.abc4web.jpg
توفر الإضافة مميزات عديدة، المصحح التلقائي(1)، معاينة عناصر الصفحة بطرق مختلفة، كمثال: عند التأشير عليها (2)، فيقوم بوضع حدود بالاحمر للعنصر (أنظر الصورة الموالية) كذلك يظهر عمق العنصر في الملف، هذا سيساعدنا على إكتشاف أخطائنا في الصفحة، وأسباب انزياح بعض العناصر الإخرى إلى الأسفل مثلا، كذلك في معاينة أي موقع على الشبكة والإستفادة منه.
http://www.abc4web.net/vb/imgcache2011/8895.abc4web.jpg
هنا يظهر شعار المدونة عند الإشارة إليه، ويظهر عمقه في الملف
http://www.abc4web.net/vb/imgcache2011/8896.abc4web.jpg
هنا ينبهني المصحح بخطأ في ملف التنسيق لإضافة من إضافات ووردبريس
http://www.abc4web.net/vb/imgcache2011/8897.abc4web.jpg
تمكنك الإضافة ايضا من إبطال تنسيق css معين، لمشاهدة الموقع فقط كبنية Html، أو إبطال تنسيق المتصفح الإفتراضي وهكذا..
http://www.abc4web.net/vb/imgcache2011/8898.abc4web.jpg
2. إضافة FireBug
تشترك هذه الإضافة مع الإضافة السابقة في أمور عديدة، لكن اهم ما يميزها التحرير على الملف للمعاينة مباشرة، حيث يمكنك مثلا تصفح صفحة ما، وإستبدال خصائصها في ملف التنسيق لكي ترى نتيجتها، طبعا لا يتغير كودها الأصلي إنما يظهر نتيجة التغيير، وهذا يمكنك من التجربة المباشرة لنتيجة كود قبل تطبيقه فعليا في الملف.
تثبيت الإضافة:
https://addons.mozilla.org/en-US/firefox/downloads/file/47650/firebug-1.3.3-fx.xpi
بعد تثبيت الإضافة يظهر رمزها الصغير في شريط الحالة أسفل المتصفح، (في أقصى اليمين للإنجليزية) بعد النقر على تلك الحشرة السحرية تظهر لك نافدة بشقين، الكود الناتج في صفحة html وتنسيق css لكل عنصر عند النقر عليه، أيضا عند التأشير على العنصر يظهر لك مكانه في الصفحة مباشرة، مع تحديد خصائص الهامش الداخلي والخارجي padding/margin (سنتطرق لهما فيما بعد)، من مميزات الإضافة أيضا أنها تحدد العناصر التي يرث منها العنصر عند النقر عليه، ويحدد الخصائص التي تم إلغاؤها عند الوراثة (لا تبتئس إن لم تفهم سنشرح مفهوم الوراثة في مواضيع لاحقة)، لتعديل الخصائص فقط أشر أنقر على الخاصية بالفأرة وأكتب القيمة الجديدة، أتركك لإكتشاف سحر هذه الإضافة.
http://www.abc4web.net/vb/imgcache2011/8899.abc4web.jpg
http://www.abc4web.net/vb/imgcache2011/8900.abc4web.jpg
الأدوات جاهزة لنبدأ الآن حصة الطبخ.
أتمنى لكم جميعا الفائدة من هذه المشاركة
ولاتنسونا من صالح دعائكم
:fasel6:
أبوهمام
.
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
السلام عليكم ورحمة الله وبركاته
مع الجزء الثاني من موضوع أدوات تطوير الويب، وإعداد بيئة العمل، تطرقت في الموضوع إلى ثلاث محاور:
برامج تحرير الكود plain Text Editor
- Komodo
NotePad++
برامج تجربة المتصفحات
فايرفوكس وإضافاته
المتصفحات الإخرى
IeTester
إضافات فايرفوكس لتطوير الويب
web developer
FireBug
2. تجربة المتصفحات
لعل أصعب شيء يعاني منه المطورون، وخاصة العرب (مشكلة الإتجاه) هو موافقة أعمالهم مع المتصفحات، والأثرية منها بالخصوص، كثيرون يجدون راحتهم في ان لا يلقوا بالا لهذه المتصفحات، لكن علينا ان نعترف أن أكثر زوار الشبكة في العالم العربي يستخدمونها، لذلك من أرشد الأمور أن نقوم بدعمها ،و إظهار الموقع بشكل مرض على الأقل عليها، وهذا من أولوياتنا في هذه الدورة، لذلك وجب علينا تجهيز بيئة لتجربة اعمالنا والتأكد من موافقتها لأكثر المتصفحات إستعمالا.
1. الفايرفوكس كمنصة:
الفايرفوكس رغم وجود صفات متفوقة لمتصفحات اخرى عليه في أمور جمالية، إلا أنه المتصفح اللازم لكل مطور، عليه أن يكون منصة انطلاق، إذا توافق عملك مع فايرفوكس، لن تحتاج إلا إلى القليل من الترقيعات لتوافق متصفحات اخرى، طبعا علينا متابعة عملنا أولا بأول، وتجربته على المتصفحات بعد كل تعديل، لكي لا نضطر لإعادة العمل من البداية في حال ظهر لنا خلل ما.
2. إضافات فايرفوكس لتجربة المتصفحات
هناك إضافات كثيرة لتجربة مظهر الصفحة على متصفحات أخرى من خلا فايرفوكس نفسه، يمكنك البحث عنها وتجربتها من خلال الموقع الرسمي لإضافات فايرفوكس (https://addons.mozilla.org/en-US/firefox)، تحت تصنيف web Development (https://addons.mozilla.org/en-US/firefox/browse/type:1/cat:4)
3. المتصفحات الأخرى:
يمكنك تثبيت المتصفحات الأخرى التي تهتم لأمرها، Safari Opera GoogleChrom هذه كمتصفحات أساسية، المشكلة تكمن في نسخ الالإكسبلورر، لا يمكن تثبيت أكثر من نسخة على نفس الجهاز، لكن لحسن الحظ أن هناك طرقا لتجربت أعمالنا على جميع نسخه، ابتداء من النسخة 5.x ولعل أفضلها هو برنامج I.E.Tester
4. I .E .Tester
يمكنك تحميل البرنامج في موقع MyDebugbar (http://www.my-debugbar.com/)، من الصفحة الرئيسة لبرنامج IE Tester (http://www.my-debugbar.com/wiki/IETester/HomePage)، بعد تثبيت البرنامج ستحصل على بيئة كاملة لتجربة متصفح Explorer بكامل نسخه.
http://www.abc4web.net/vb/imgcache2011/8892.abc4web.jpg
3. إضافات فايرفوكس لتطوير الويب
كما سبق ان ذكرت فايرفوكس المنصة المفضلة لمطوري الويب، والفضل راجع لإضافاته المميزة التي تساعد المطورين على تحسين الأداء، تطوير الاعمال، تحليل اعمال الآخرين والإستفادة منها، ومن أروع الإضافات في هذا الصدد، إضافتي Web Developer و FireBug
1. إضافة web Developer
تثبيت الإضافة:
https://addons.mozilla.org/en-US/firefox/downloads/latest/60/addon-60-latest.xpi
بعد تثبيت الإضافة سيظهر لك شريط الأدوات الجديد، أحيانا قد لا تحتاجه، لذلك إستخدم هذه الطريقة السلسة، لإظهاره وإخفائه وقت الحاجة،أولا أنقر بالزر الأيمن للفأرة على مساحة فارغة من اشرطة الأدوات في متصفحك، واختر ِCustimise، ستظهر لك النافذة التالية، إبحث عن رمز الإضافة، واسحبه إلى مكان معين في أشرطة الادوات، أفضل شريط القوائم، ثم انقر على زر done.
http://www.abc4web.net/vb/imgcache2011/8893.abc4web.jpg
بهذه الطريقة ستخفف مظهر متصفحك ويبقى دائما أنيقا، يمكنك عمل ذلك مع عدة أمور اخرى كشريط ادوات جوجل وأخذ الأمور المهمة منه فقط، الآن يمكنك النقر على رمز الإضافة لإظهار او إخفاء الشريط
http://www.abc4web.net/vb/imgcache2011/8894.abc4web.jpg
توفر الإضافة مميزات عديدة، المصحح التلقائي(1)، معاينة عناصر الصفحة بطرق مختلفة، كمثال: عند التأشير عليها (2)، فيقوم بوضع حدود بالاحمر للعنصر (أنظر الصورة الموالية) كذلك يظهر عمق العنصر في الملف، هذا سيساعدنا على إكتشاف أخطائنا في الصفحة، وأسباب انزياح بعض العناصر الإخرى إلى الأسفل مثلا، كذلك في معاينة أي موقع على الشبكة والإستفادة منه.
http://www.abc4web.net/vb/imgcache2011/8895.abc4web.jpg
هنا يظهر شعار المدونة عند الإشارة إليه، ويظهر عمقه في الملف
http://www.abc4web.net/vb/imgcache2011/8896.abc4web.jpg
هنا ينبهني المصحح بخطأ في ملف التنسيق لإضافة من إضافات ووردبريس
http://www.abc4web.net/vb/imgcache2011/8897.abc4web.jpg
تمكنك الإضافة ايضا من إبطال تنسيق css معين، لمشاهدة الموقع فقط كبنية Html، أو إبطال تنسيق المتصفح الإفتراضي وهكذا..
http://www.abc4web.net/vb/imgcache2011/8898.abc4web.jpg
2. إضافة FireBug
تشترك هذه الإضافة مع الإضافة السابقة في أمور عديدة، لكن اهم ما يميزها التحرير على الملف للمعاينة مباشرة، حيث يمكنك مثلا تصفح صفحة ما، وإستبدال خصائصها في ملف التنسيق لكي ترى نتيجتها، طبعا لا يتغير كودها الأصلي إنما يظهر نتيجة التغيير، وهذا يمكنك من التجربة المباشرة لنتيجة كود قبل تطبيقه فعليا في الملف.
تثبيت الإضافة:
https://addons.mozilla.org/en-US/firefox/downloads/file/47650/firebug-1.3.3-fx.xpi
بعد تثبيت الإضافة يظهر رمزها الصغير في شريط الحالة أسفل المتصفح، (في أقصى اليمين للإنجليزية) بعد النقر على تلك الحشرة السحرية تظهر لك نافدة بشقين، الكود الناتج في صفحة html وتنسيق css لكل عنصر عند النقر عليه، أيضا عند التأشير على العنصر يظهر لك مكانه في الصفحة مباشرة، مع تحديد خصائص الهامش الداخلي والخارجي padding/margin (سنتطرق لهما فيما بعد)، من مميزات الإضافة أيضا أنها تحدد العناصر التي يرث منها العنصر عند النقر عليه، ويحدد الخصائص التي تم إلغاؤها عند الوراثة (لا تبتئس إن لم تفهم سنشرح مفهوم الوراثة في مواضيع لاحقة)، لتعديل الخصائص فقط أشر أنقر على الخاصية بالفأرة وأكتب القيمة الجديدة، أتركك لإكتشاف سحر هذه الإضافة.
http://www.abc4web.net/vb/imgcache2011/8899.abc4web.jpg
http://www.abc4web.net/vb/imgcache2011/8900.abc4web.jpg
الأدوات جاهزة لنبدأ الآن حصة الطبخ.
أتمنى لكم جميعا الفائدة من هذه المشاركة
ولاتنسونا من صالح دعائكم
:fasel6:
أبوهمام
.