دورة قوالب ووردبريس: بيئة العمل – الأدوات 1
9 يونيو 2009
بسم الله الرحمن الرحيم، هذا الموضوع (في جزئين) آخر المواضيع في إعداد بيئة العمل، هو الأخير فقط في الدورة أما للمهتمين بالتطوير فإعداد بيئة العمل قد لا ينتهي أبدا، كل يوم يحتاج متابعة وتنقيب، ليبقى المطور في تحديث دائم ومنسجما مع أحدث التقنيات والأدوات التي تسهل عليه العمل وتجعله أكثر احترافية، هناك أدوات عادية قد تغني البعض، لكن التردد في استعمال أدوات احترافية وخاصة البرامج الحرة، سيفوت عليك الكثير، أتطرق في الموضوع إلى ثلاث محاور:
- برامج تحرير الكود 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، بعد تحميل البرنامج أنقر عليه للبدء بالتثبيت
أنقر next للمتابعة بعد إغلاق أي برامج أخرى لتجنب مشاكل التثبيت.
2. عليك الموافقة على اتفاقية Mozilla1.1 للإستمرار في عملية التثبيت
3. تحديد الأجزاء التي تريد تثبيتها، يفضل أن تبقي على الإعدادات الإفتراضية، كذلك ملفات المساعدة تثبت افتراضيا، قد تحتاج إليها.
4. إذا كنت متأكدا من الغعدادات السابقة أنقر install للتثبيت، في حال الرغبة في التعديل على الخيارات أنقر Back ثم تابع مرة أخرى
5. إنتظر ليتم تثبيت ابرنامج ونسخ الملفات، بع انتهائها البرنامج من التثبيت ستظهر لك النافذة التالية
6. أنقر finish ستظهر صفحة التوجيهات، ويتم تشغيل البرنامج للمرة الأولى
7. عند فتح أي ملف بالبرنامج، وخاصة الملفات التي تحتوي اللغة العربية، تأكد من ضبط إعدادات تشفير اللغة، وكذلك حدد لغة البرمجة في الملف، لضبط إعدادات الملف من قائمة Edit إختر Current File Setting
8. ستظهر لك النافذة التالية، تأكد من اختيار UTF-8 مع عدم التأشير، أكرر عدم التأشير على إستخدام singnature BOM.
9. من خصائص البرنامج الرائعة، أنه يقترح عليك في قائمة نظيفة، حسب اللغة المحددة في الملف، مثلا بمجر أن تفتح وسم الفقر p في ملف php سيقترح عليك الأمور التي يمكن أن تدرجها في هذا الوسم، كذلك في css مثلا بمجرد كتابة حرف m تجد مقترحاته بخصائص css التي تبدأ بهذا الحرف
notepad++
هذا أحد البرامج التي استعملتها منذ نسخها الأولى، ما يميز البرنامج الإضافات التي تمنحه القوة ككل برنامج مفتوح المصدر، فبالإضافة إلى قائمته الإفتراضية للدوال والخصائص في الملفات، يمكن أن تضاف إليه إضافة خاصة بالتصحيح مثلا، أو إضافة تعرض اللون بمجرد الإشارة إلى قيمته.
- دعم العربية: نعم
- يدعم اغلب لغة البرمجة
- نظام التشغيل: وندوز
1. التحميل
تحميل البرنامج من هذا الرابط
http://notepad-plus.sourceforge.net/uk/site.htm
يمكنك اختيار لغة البرنامج قبل التحميل، أنقر على رابط البرنامج كالظاهر في الصورة ( في الأسفل تجد الإضافات الملحقة، لا داعي لتحميلها الآن، وقد لا تحتاجها أبدا)، سينقلك الرابط إلى موقع sourceFourge، هناك عدة صيغ للملف، من الأفضل أن تحمل الملف التنفيذي للتثبيت، كما هو موضح في الصورة
2. بعد تحميل البرنامج أنقر عليه، وقم بتحديد لغة التثبيت
3. سحليتنا أيضا تقدم النصيحة المعتادة، قم بإغلاق جميع البرامج لكي لا تحدث مشاكل مفترضة أثناء التثبيت.
4. اتفاقية البرامج الحرة، وافق عليها بالنقر على I Agree
5. حدد مسار البرنامج، يمكنك تثبيته على ذاكرة محولة flashDisk
6. تحديد المكونات التي ستثبت في البرنامج، في حال قمت بتثبيته على ذاكرة محمولة، حدد الخيار الأول، لكي لا يخزن الملف إعداداته على %APPDATA%، النقطة الثانية، وهي إمكانية تحديد البرنامج افتراضيا لمعاينة مصدر الكود لصفحة ما على المتصفح، للقيام بذلك، حدد خيار As Default Html Viewer.
7. انتظر ريثما ينهي البرنامج نسخ وتثبيت مكوناته، بعد انتهائه سيظهر لك الزر السعيد، Finish
8. عند تحرير الملفات التي تتضمن عبارات باللغة العربية، قم بتحديد خيار UTF-8 without Bom من قائمة Format
تنبيه: أحيانا إذا كان الملف يتضمن اللغة العربية، وقمنا بتغيير إعداده إلى UTF-8 without Bom سيظهر تغير بالحروف العربية بأشكال غريبة، لذلك قبل تغيير الإعداد قم بتحديد كامل الصفحة، ثم قص (Ctl + A) ثم (ctl + X)، بعدها قم بتغيير الإعداد ثم قم بلصق مرة أخرى، (Ctl+ C)
9. قم بتحديد خيار لغة البرمجة، من قائمة language
كما سبق، البرنامج أيضا يتضمن قائمة اقتراحات، رفم أنها قائمة واحدة لا تميز بين اللغات، إلا انها تساعد كثيرا لتحديد الكتابة الصحيحة لخاصية ما، لإظهار القائمة أثناء الكتابة إضغط (ctl + space)
مواضيع مشابهة:
- دورة قوالب ووردبريس: بيئة العمل – الأدوات 2
- دورة قوالب ووردبريس: بيئة العمل – الخادم المحلي
- دورة قوالب ووردبريس: بيئة العمل – تثبيت ووردبريس
- دورة قوالب ووردبريس: ماذا تعرف عن html؟
الاوسمة: komodo, notepad++, أدوات مطوري الويب, إضافات, برامج تحرير الكود, بيئة العمل, تكويد, دورة قوالب ووردبريس, وسوم HTML, ووردبريس
32 تعليق على “دورة قوالب ووردبريس: بيئة العمل – الأدوات 1”
ألقيت نظرة بسيطة علي الدرس وسأعود له للتطبيق
شكراً علي سرعة وضع الدروس
تحياتي : حسام عادل
بواسطة حسام عادل في يونيو 9, 2009
جزاك الله خيراً أستاذ عمران
بواسطة المعتصم بالله في يونيو 9, 2009
فعلا، هذه البرامج مهمة كثيرا، أظن أنك ستتطرق فيما بعد للبرامج التي تساعد في تحرير css كاختيار الألوان مثلا…
برنامج komodo سأجربه على أوبنتو، لم أستعمله من قبل.
تحياتي لك.
بواسطة يونس في يونيو 9, 2009
الف شكر لك اخي عمار على هدا المجهود الطيب و فعلا لي الشرف ان اتابع معك مرة اخرى هاته الدورة واتمنى من كل قلبي ان يوفقك الله لكل ما يحبه و يرضاه معك في الشرح الى النهاية.
بواسطة ادريس أطويل في يونيو 9, 2009
محررات قوية وأستخدام كومودو ..ونوت باد ++ الأثنين رائعين
بالتوفيق ..ونحن نتابعك
بواسطة حسين عادل في يونيو 9, 2009
شكرا لك أستاذنا، جاري التحميل
بواسطة أمتون في يونيو 9, 2009
الف شكر , و الله يجعله بميزان حسناتك
انا استخدم ال ++notepad
و ان شاء الله اذا بدينا بالبرمجه نغير البرنامج على حسب رغبتنا
و مشكور مره اخرى لسرعه طرحك للمواضيع ..
اخوك محمد
بواسطة Raneo Graphics في يونيو 9, 2009
شكراً جزيلاً !
بانتظار الجزء الأكثر سخونة
بواسطة iCoNzZz في يونيو 9, 2009
شكرا جزيلا أخوي على الشرح المميز عن البرامج التحريرية
عندي استفسار
لو استخدمت برنامج phpDesigner 2008 في أي مشكلة
تحاتي أبو الجود
بواسطة aboaljod في يونيو 9, 2009
عندي سؤال بسيط ,,
الآن أنا عندي برنامج Notepad ++ فما هو البرنامج الذي ستشرح عليه الدورة رسمياً .. حتي أستطيع التطبيق بلا أي مشاكل ؟؟
بواسطة حسام عادل في يونيو 9, 2009
مشكور اخوي على الشرح الرائع
وانا استخدم برنامج ++notepad
وان شاء الله اذا احتجنا ألى البرنامج الاخر اقوم بتنزيله
وشكرا على سرعه وضع الدروس يعطيك الف عافيه حبيبي
تحياتي محمود قنديل
بواسطة Master Of Love في يونيو 9, 2009
أهلا بكم جميعا وشكرا على تفاعلكم،
@يونس
إن شاء الله أخي سأعرج على أدوات اختيار الألوان في المواضيع المقبلة من الدورة عَرَضاً فقط.
@aboaljod
أهلا أخي، كما ذكرت سابقا لا مشكلة في استخدام أي برنامج اعتاد عليه الشخص، phpDesigner برنامج هائل وخاصة للغة php لكنه ليس مجانيا، وتغني عنه البرامج السابقة
بواسطة عمران عماري في يونيو 9, 2009
الله يبارك فيك اخي عمران
درس جميل بانتظار الجزء التاني
اسمحلي باستفسار فقط
ايش الاسهل الي كمبتدا استخدم برنامج النوتباد بلس ولا محررات نصوص عادية ولا استخدم برامج متطورة بعرض التصاميم مثل الدريم ويفر و Xsite ؟؟؟؟
بواسطة انس في يونيو 9, 2009
طبعا الأسهل والأكثر احترافية في آن واحد هو المحررات المفتوحة المصدر التي قدمت نموذجين لها، أسهل من المحررات العادية لأنها توضح جيدا جزء الكود وجزء المحتوى باستخدام الالوان، بالنسبة للمحررات مثل الدريم ويفر يمكن للمرء أن يستفيد منها، لكن للتعود على كود نظيف وللتعلم مع كل عمل ننجزه، أظن انه من الأفضل تجنبها.
بواسطة عمران عماري في يونيو 9, 2009
@ حسام عادل
أخي لا أظن هناك فرق كبير، وليست المشكلة في البرنامج طالما لهما نفس المهم، المهم ماذا ستفعل بهما.
بواسطة يونس في يونيو 9, 2009
السلام عليكم ورحمة الله وبركاته..
تدوينة حبلى بكل مفيد كما تعودنا منك أخي عمران.. جزاك الله عنا كل خير..
بالنسبة لي فإنني أستعمل دوما المحرر Notepad++ وفي الحقيقة أول مرة أتعرف على برنامج Komono وقد راقني من العرض وجاري تحميله الآن ليصبح جارا لأخيه في حاسوبي ^_^
لدي هنا ملاحظة أو إضافة أرجو أن تكون مفيدة وفي محلها، وتتعلق بذلك التنبيه الذي كتبته بخصوص ترميز الملفات المتضمنة للغة العربية في برنامج Notepad، وفي الحيقة ذلك المشكل كان يؤرقني إن أنني كنت أقوم تماما بالحل الذي اقترحته (أي نسخ ثم تغيير الترميز ومن تم لصق) ولكنها كانت تبدو لي عملية شاقة، فاهتديت ولله الحمد إلى طريقة تمكنني من تغيير ترميز الملف المتضمن للعربية من دون التأثير على الأحرف العربية، ويتم ذلك كما هو موضح في الصورة التالية:
http://i56.photobucket.com/albums/g194/hadi060/alamalnet/notepadconvertutf.png
أدعوك لتجربة هذه الطريقة أخي عمران وأنتظر ردك، فأنا دوما أستعملها وتبدو لي أسهل ولا تواجهني مشاكل مع الملفات والتعريب..
عذرا على الإطالة، ونحن هنا نتعاون بما نعلم إن شاء الله..
مني لكم أرق تحية..
بواسطة عبد الهادي في يونيو 9, 2009
ما رأيك ببرنامج DreamWeaver???
بواسطة yusuf في يونيو 9, 2009
@عبد الهادي
أهلا أخي عبد الهادي
شكرا لك على هذا التلميح، فعلا جربت الأمر وهو فعال، إنما تعودت على هذه الطريقة من النسخ الأولى لم تكن متوفرة أوامر التحويل بعد
شكرا لك
@يوسف
راجع تعليقي السابق
بواسطة عمران عماري في يونيو 9, 2009
جاري تحميل komodo على اوبنتو ..مع العلم أن المحرر gedit يلون الأكواد لكن فيه نواقص..
صورة من gedit
http://www.ubuntu-pics.de/bild/15973/screenshot_001_to0aUt.png
بواسطة abdullah_kh في يونيو 9, 2009
شكراً لك و نحن متابعين لك بكل قوه و إلى الأمام
بواسطة عيسى العسيري في يونيو 10, 2009
جزاك الله خير أخي الغالي
بالتوفيق للجميع
بواسطة علي ناجم في يونيو 10, 2009
السلام عليكم ورحمة الله وبركاته
يعطيك العافية يا أستاذ عمران عماري
على الشرح الرائع
تحاتي عبدالله
بواسطة عبدالله في يونيو 11, 2009
لأول مرة أعرف بأمر هالمحررات .. وأول مرة أعرف إن النوتباد لها نسخ آخرى بهالخيارات العديدة .. كنت حملت الدريم ويفر قبل لأن شفت الدروس تبعه وحسيت إنه راح يساعدني كثير بالتصميم لكن للأسف ماعرفت له عدل
ويبدو إن هالمحررات أفضل للمبتدئين ، بس أبي أعرف إذا كان يكفي أحمل واحد منهم بس لأني أفضل تحميل الأول والإكتفاء به في الوقت الحالي لكن في حال كنا سنحتاج لتحميل البرنامجين فياليت تقولي : ) .. وجزاك الله خير على الشرح المبسط .
بواسطة someone في يونيو 12, 2009
@someone
أهلا، نحتاج إلى أحدهما فقط
بواسطة عمران عماري في يونيو 12, 2009
شرح كيفية تثبيت البرنامجين على نظام لينوكس ..
install.sh)
1- Notepad++
عليك أولا بتثبيت برنامج wine ..
لمستخدمي أبونتو : sudo apt-get install wine
لمستخدمي فيدورا (يجب أن تكون جذر): yum install wine
هذا ما أعرف فقط ..من يعرف المزيد من الأوامر للتوزيعات الأخرى فليضفها..
2-Komodo Edit
أولا عليك بتنزيل هذا الملف إذا كنت تستعمل نسخة ×32 .
http://downloads.activestate.com/Komodo/releases/5.1.3/Komodo-Edit-5.1.3-3592-linux-libcpp6-x86.tar.gz
أما إن كنت من مستعملي نسخة ×64 .
http://downloads.activestate.com/Komodo/releases/5.1.3/Komodo-Edit-5.1.3-3592-linux-libcpp6-x86_64.tar.gz
بعد تنزيل الملف فك الضغط عنه إلى سطح المكتب..
فينتج لدينا مجلد ، ندخل المجلد فنجد ملفا بهذا الأسم
لا تقم بالضغط عليه ..بل افتح الطرفية -terminal- ، و اسحب (Drag & drop)
الملف إلى نافذة الطرفية .. لا تضغط Enter ، بل اكتب في بداية السطر أمر الجذر ، فمثلا في أنظمة الدبيان Sudo ، و الردهات (فيدورا،مندريفا الخ..) Su – ..يعني في أبونتو هكذا سوف يكون سطر الأوامر :
sudo ‘/home/yusuf/Desktop/Komodo-Edit-5.1.3-3592-linux-libcpp6-x86/install.sh’
أما فيدورا و رفيقاتها :
أولا : تكتب Su-
ثم enter
ثم انسخ الكود التالي :
‘/home/yusuf/Desktop/Komodo-Edit-5.1.3-3592-linux-libcpp6-x86/install.sh’
ثم يطلب منك مكان التثبيت أجعله :
usr/lib/komodo
انسخه واضغط انتر . ومبروك ..
======
ملاحظة\ جربت البرنامج على وندو 7 & توزيعة أوبونتو 9.04 وتعمل من أبونتو 7.04 وأحدث منها ..
بواسطة yusuf في يونيو 12, 2009
شكرا يوسف على الإضافة
بواسطة عمران عماري في يونيو 12, 2009
مساء الخير
شرح رائع
بس
أخوي عمران
أي برنامج راح تعتمد عليه فى شرح الدوره من برامج تحرير الكود
- Komodo
أو
NotePad++
حدد علشان أنزله
وياليت تكتبه هناك فى الشرح كاملاحظه حتي يكون مفهوم لدي الجميع أي برنامج راح تستخدمه فى الشرح
………..
وعندي بعد شي
خارج عن الموضوع
كيف تحطون صوره رمزيه فى هذا الموقع
الحين تصبحون على خير
فى أمان الله
أختكم
ساره روز
بواسطة Sarah Rose في يونيو 14, 2009
أهلا أختي سارة، لن يكون تحديد البرنامج مهما، المقصود أن نعرف الطريقة الصحيحة، ونقوم بها على أي برنامج بل وحتى على صفحة الويب نفسها، أو في محرر قوالب ووردبريس، قومي بتثبيت أي برنامج من الإثنين ولن تجدي صعوبة في التطبيق عليه.
وفقك الله
بواسطة عمران عماري في يونيو 14, 2009
مساء الخير
أخوي عمران
السؤال واضح ما يبيله شي
أي برنامج راح تستخدمه وتشرح عليه
لأنه البرنامجين ما تشرفت فيهم ما عندي خلفيه عنهم
وأنا ميح فى هذا المجال
مهم أعرف حق أطبق مثل الدرس تمام
حتي ما طيح فى مشاكل أثناء تطبيق الدرس
وأكيد راح تشرح على برنامج واحد
صح
فلما تقول مشمهم أي البرنامجين تقدرين تستخدمين أي واحد فيهم
هذا الكلام ما يمشي معاي
هذا الكلام ينفع حق اللي عندهم خبره فى البرنامجين
وأكيد فى ناس مثلي ما عندهم خلفية
فأرجوك ياخوي عمران أثناء الشرح يجب أنك تراعي
هذه النقطه وان تأخذ في بالك هالاعتبارات لأنه فى ناس ماعندهم خلفية فى البرامج المستخدمة
يحتاجون الى شرح كل نقطه
لأنه المعرفه لكل شخص مختلفة فى هذا المجال
أخوي عمران
ولا عليك أمر
يوم بتسوي أي درس
أكتب عندك فى ورقه صغييييييره لونها وردي
والصقها على كمبيوترك
ساره روز ميح
حق تذكر و تشرح بتفصيل كل ما شفت أسمي
وما تقول بينك وبن نفسك هاي النقطه مفهومه
مافى داعي أوضحها أكثر
لا يا خوي
لا فى داعي وضحها وفتك من صدعتي
صدعتكم صح
……………..
الصوره الرمزيه كيف تحطونها أخوي عمران عاد لا طنش
بارك الله فيك
فى أمان الله أختكم
ساره روز
مييييييييييييح
بواسطة Sarah Rose في يونيو 14, 2009
أهلا بك أختي سارة
سأشرح على النوتباد++
الذي قصدته أن لا نرتبط بالبرامج، أكثر من ارتباطنا بفهم الطريقة
أعتذر إن لم أشرح مقصدي من البداية
بواسطة عمران عماري في يونيو 14, 2009
الصوره الرمزيه كيف تحطونها أخوي عمران عاد لا طنش
————————–
بقة جزئية لم تتطرق لها او انك لم تلاحظها او تتجاهلها يا ليت اخي الكريم
نريد نعرف هذي الاجزئية
كيفية وضع صورة الرمزية مثل ما موضوعه في موقعك
بواسطة ولد السلطنة في يونيو 22, 2009
مشكور اخوي على الشرح
بواسطة yassine في يوليو 6, 2009