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

مشاهدة النسخة كاملة : دورة قوالب ووردبريس: بيئة العمل – الأدوات 1


abohmam
21-03-2011, 02:42 AM
بسم الله الرحمن الرحيم

الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين

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


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

برامج تحرير الكود plain Text Editor

- Komodo
NotePad++


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

فايرفوكس وإضافاته
المتصفحات الإخرى
IeTester


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

web developer
FireBug





1. برامج تحرير الكود plain Text Editor

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



دعم العربية: نعم
يدعم أغلب لغات البرمجة.
نظام التشغيل: متعدد

1. التحميل
تحميل البرنامج من هذا الرابط


http://www.activestate.com/komodo_edit/downloads/


إختر نظام تشغيلك وابأ بالتحميل، حجم البرنامج يتجاوز 30 mb، بعد تحميل البرنامج أنقر عليه للبدء بالتثبيت


http://www.abc4web.net/vb/imgcache2011/8871.abc4web.jpg


أنقر next للمتابعة بعد إغلاق أي برامج أخرى لتجنب مشاكل التثبيت.


http://www.abc4web.net/vb/imgcache2011/8872.abc4web.jpg


2. عليك الموافقة على اتفاقية Mozilla1.1 (http://www.mozilla.org/MPL/MPL-1.1.html) للإستمرار في عملية التثبيت


http://www.abc4web.net/vb/imgcache2011/8873.abc4web.jpg


3. تحديد الأجزاء التي تريد تثبيتها، يفضل أن تبقي على الإعدادات الإفتراضية، كذلك ملفات المساعدة تثبت افتراضيا، قد تحتاج إليها.


http://www.abc4web.net/vb/imgcache2011/8874.abc4web.jpg
4. إذا كنت متأكدا من الغعدادات السابقة أنقر install للتثبيت، في حال الرغبة في التعديل على الخيارات أنقر Back ثم تابع مرة أخرى
http://www.abc4web.net/vb/imgcache2011/8875.abc4web.jpg


5. إنتظر ليتم تثبيت ابرنامج ونسخ الملفات، بع انتهائها البرنامج من التثبيت ستظهر لك النافذة التالية


http://www.abc4web.net/vb/imgcache2011/8876.abc4web.jpg


6. أنقر finish ستظهر صفحة التوجيهات، ويتم تشغيل البرنامج للمرة الأولى


http://www.abc4web.net/vb/imgcache2011/8877.abc4web.jpg

7. عند فتح أي ملف بالبرنامج، وخاصة الملفات التي تحتوي اللغة العربية، تأكد من ضبط إعدادات تشفير اللغة، وكذلك حدد لغة البرمجة في الملف، لضبط إعدادات الملف من قائمة Edit إختر Current File Setting


http://www.abc4web.net/vb/imgcache2011/8878.abc4web.jpg


8. ستظهر لك النافذة التالية، تأكد من اختيار UTF-8 مع عدم التأشير، أكرر عدم التأشير على إستخدام singnature BOM.


http://www.abc4web.net/vb/imgcache2011/8879.abc4web.jpg


9. من خصائص البرنامج الرائعة، أنه يقترح عليك في قائمة نظيفة، حسب اللغة المحددة في الملف، مثلا بمجر أن تفتح وسم الفقر p في ملف php سيقترح عليك الأمور التي يمكن أن تدرجها في هذا الوسم، كذلك في css مثلا بمجرد كتابة حرف m تجد مقترحاته بخصائص css التي تبدأ بهذا الحرف


http://www.abc4web.net/vb/imgcache2011/8880.abc4web.jpg
notepad++

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


دعم العربية: نعم
يدعم اغلب لغة البرمجة
نظام التشغيل: وندوز

1. التحميل
تحميل البرنامج من هذا الرابط

(http://notepad-plus.sourceforge.net/uk/site.htm)
http://notepad-plus.sourceforge.net/uk/site.htm


http://www.abc4web.net/vb/imgcache2011/8881.abc4web.jpg (http://notepad-plus.sourceforge.net/uk/site.htm)


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


http://www.abc4web.net/vb/imgcache2011/8882.abc4web.jpg


2. بعد تحميل البرنامج أنقر عليه، وقم بتحديد لغة التثبيت


http://www.abc4web.net/vb/imgcache2011/8883.abc4web.jpg


3. سحليتنا أيضا تقدم النصيحة المعتادة، قم بإغلاق جميع البرامج لكي لا تحدث مشاكل مفترضة أثناء التثبيت.


http://www.abc4web.net/vb/imgcache2011/8884.abc4web.jpg


4. اتفاقية البرامج الحرة، وافق عليها بالنقر على I Agree


http://www.abc4web.net/vb/imgcache2011/8885.abc4web.jpg


5. حدد مسار البرنامج، يمكنك تثبيته على ذاكرة محولة flashDisk


http://www.abc4web.net/vb/imgcache2011/8886.abc4web.jpg


6. تحديد المكونات التي ستثبت في البرنامج، في حال قمت بتثبيته على ذاكرة محمولة، حدد الخيار الأول، لكي لا يخزن الملف إعداداته على %APPDATA%، النقطة الثانية، وهي إمكانية تحديد البرنامج افتراضيا لمعاينة مصدر الكود لصفحة ما على المتصفح، للقيام بذلك، حدد خيار As Default Html Viewer.


http://www.abc4web.net/vb/imgcache2011/8887.abc4web.jpg


7. انتظر ريثما ينهي البرنامج نسخ وتثبيت مكوناته، بعد انتهائه سيظهر لك الزر السعيد، Finish


http://www.abc4web.net/vb/imgcache2011/8888.abc4web.jpg


8. عند تحرير الملفات التي تتضمن عبارات باللغة العربية، قم بتحديد خيار UTF-8 without Bom من قائمFormat


http://www.abc4web.net/vb/imgcache2011/8889.abc4web.jpg


تنبيه: أحيانا إذا كان الملف يتضمن اللغة العربية، وقمنا بتغيير إعداده إلى UTF-8 without Bom سيظهر تغير بالحروف العربية بأشكال غريبة، لذلك قبل تغيير الإعداد قم بتحديد كامل الصفحة، ثم قص (Ctl + A) ثم (ctl + X)، بعدها قم بتغيير الإعداد ثم قم بلصق مرة أخرى، (Ctl+ C)
9. قم بتحديد خيار لغة البرمجة، من قائمة language


http://www.abc4web.net/vb/imgcache2011/8890.abc4web.jpg


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


http://www.abc4web.net/vb/imgcache2011/8891.abc4web.jpg


تابع الجزء الثاني من الموضوع (http://www.abc4web.net/vb/showthread.php?t=16669)

أتمنى لكم جميعا الفائدة من هذه المشاركة

ولاتنسونا من صالح دعائكم

:fasel6:
أبوهمام
.

أبو يوسف
21-03-2011, 02:18 PM
بارك الله فيك اخي أبو همام

abohmam
13-04-2011, 01:31 AM
بارك الله فيك اخي أبو همام

وفيك بارك الله اخانا الفاضل ابا يوسف