أفضل 30 من الأدوات والبرامج لاغني عنها لأي مطور أو مبرمج او مصمم ويب حزمة متكاملة

حزمة من الأدوات لا غني عنها لأي مطور أو مبرمج أو مصمم ويب

لابد لكل مصمم أو مبرمج أو مطور ويب أن يحمل دوماً مجموعة من الأدوات التي لا يستطيع العمل دونها لفترة طويله وإلا سيؤثر ذلك علي إنتاجيته وجودة ما يقوم به , وتلك الأدوات قد تتمثل في برامج سطح المكتب أو مواقع خدميه علي الويب وأيضاً كإضافات للمتصفح وفيما يلي سنعرض لكم مجموعة من الأدوات الأكثر أهمية في كل فئة من الفئات السابق ذكرها .

أولاً : برامج سطح المكتب :-

أ – محررات الأكواد (IDE) : -

1- Komodo IDE :-

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

صوره من داخل المحرر ,

حمل المحرر من هنا .

شاهد جديد الخصائص من هذه الصفحه .

حمل komodo-edit (نسخه مجانيه مفتوحه المصدر للأساسيات فقط) .


2- Visual Studio Code :-

محرر ميكروسوفت شبيه نوعاً ما بالمحرر السابق , يدعم اللغه العربيه ومتوفر أيضاً لويندوز وماك ولينكس وداعم لكثير من لغات الويب .

صوره من داخل المحرر ,

شاهد اللغات التي يدعمها المحرر من هنا .

حمل المحرر من هنا .

3- Brackets :-

متصفح رائع يُمكِّنك من تحرير الأكواد في نوافذ مختلفه أو تقسيم الشاشه لفتح أكثر من ملف في آن واحد , كذلك يدعم العرض المباشر للكود و يحتوي علي مركز إضافات أيضاً .

صوره من داخل المتصفح ,

حمل هذا المحرر من هنا .


4- Html-Pad : -

محرر متخصص للـ Html يتمتع بواجهة بسيطه للمبتدئين ويُمكِّنك من إضافة بعض الخصائص دون الحاجه لكتابة الكود بنفسك ويحتوي علي لاقط ألوان لإستعمال رمز اللون بالتصميم فيغنيك عن حفظ رموز Hex,يدعم اللغه العربيه ويدعم المعاينة الحيه للكود وإماكنية تقسيم الصفحه طولياً أو عرضياً لتري الكود والتصميم معاً , هذا بالإضافة إلي كتابة الأكواد الأساسية للغه إفتراضياً عند تشغيله لكي تقوم بعملك مباشرة.

صوره من داخل البرنامج ,

التحميل من هذه الوصله .

وتقدم الشركه أيضاً محرر rapid-php( إنقر هنا للتحميل ) .

و محرر rapid-css( إنقر هنا للتحميل ) . وكلاهما يشبهان المحرر الأول .

5- Notepad++ :-

محرر خفيف وسريع يدعم أكثر لغات الويب شهره وإستعمالاً , بسيط جدا ً في التصميم , ويدعم اللغه العربيه ومتوفر كاملاً بلغات عديده , وهو أقل المحررات حجماً .

صوره من داخل المحرر ,

إنقر هنا للتحميل .( 6 ميجا ونصف فقط ) .

6- Net-beans : -

محرر بسيط وسهل الإستخدام , يدعم الإستكمال ويقوم بتعبئة الأكواد الأساسية للصفحه ويدعم اللغه العربية , يعيبه كونه ثقيل نوعاً ما وحجمه كبير ولا يوفر من الخصائص ما يكفيليغطي علي هذا الجانب.

صوره من داخل المحرر ,

إنقر هنا للتحميل .

7- PHP-designer : -

محرر يدعم html , css , java , php ,perl ,paython , c# , ruby بالإضافه إلي إطارات عمل php , java , ذو واجهة بسيطه وسهله الإستخدام ويوفر عليك جهد في كتابة الكود , يدعم اللغه العربيه ويدعم الإكمال التلقائي , بإمكانك أيضاً تغير الثيم إن كنت تفضل اللون الغامق كخلفية للكود أكثر راحة في العمل .

صوره من داخل المحرر ,

لتحميل المحرر إنقر هنا .

8- Sublime-text :-

متوفر للويندوز والماك واللينكس , محرر جميل ولا يعيبه إلا أنه لا يدعم العربيه ( يعرض الحروف منفصله من اليسار إلي اليمين ) ومع ذلك له شعبيه بين المستخدمين .

صوره من داخل المحرر ,

لتحميل المحرر ( إضغط هنا ) .

9- Light-table :-

محرر قوي تم تصميمه بطريقه جميله ,برمجيه مفتوحة المصدر علي github , وهو مشروع من المشاريع المموَّله علي موقع kickstarter , حقق نجاح بين المحررات الأخري لكونه يجمع العديد من الخصائص المميزه لها .

صوره من داخل المحرر ,

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

رابط البرنامج علي github من هنا .


10- Dream-Weaver : -

محرر عملاق من شركة Adobe أثبت جدارته في هذا المجال , يسهل عليك العمل بشكل كبير جداً من خلال إدراج ما تريد من الواجهة الرسومية ومن ثم يتولي تحويل ما طلبت إلي الكود , ولا يُنصح به إن كنت مبتدئ في لغة البرمجه التي ستعمل عليها كي تعتد علي كتابة الكود بنفسك ويكفيك إستخدام أي محرر يروق لك مما سبق كي تفعل ذلك .

صوره من داخل المحرر ,

حمل المحرر من هنا .

ب- برامج أخري : -

1- Photoshop (للتصميم) :-

برنامج الفوتوشوب من شركة Adobe غني عن التعريف , يستخدم في تصميم واجهة المستخدم UI كي يري العميل ما سيحصل عليه ويطلب التعديلات قبل المرور بمرحلة التكويد , يمكن الإستغناء عن الفوتوشوب في حالة كان المبرمج هو صاحب الموقع ويمكن البدء بالتكويد مباشرة ورئية الناتج وهذا ما أُطلق عليه مصطلح Codesignأي كوِّد وصمم في ذات الوقت. ( حمل من هنا ) .

2- Balsamiq-Wireframe ( لتصميم النماذج ) :-

من أشهر برامج تصميم النماذج التي تختلف عن برامج التصميم كالفوتوشوب فالأولي Wireframe تستخدم لهيكلة الصفحه بطريقه بسيطه الغرض النهائي منها هو تحديد العناصر الموجوده في الصفحه وأماكنها التقريبيه , أما الثانيه Mockupالغرض النهائي منها هو تحديد كيف سيظهر الموقع أو التطبيق بالشكل النهائي دون تغير لون أو مكان أي عنصر أي أنها تُظهر كل التفاصيل فهي أخر مرحله قبل التكويد كما ذكرنا , و شعاربرنامجbalsamiq , " الحياه قصيره للغايه لتنفيذ البرمجيات السيئة " , ويُعنَي بهذا أهمية تخطيط Wireframe قبل البدء بالبرمجه لضمان جوده البرمجيات , ومع ذلك لازال هناك من المبرمجين من يباشر العمل دون رسم بسيط ولو علي الورق , وكمثال تم العمل علي موقع حسوب i/o بهذه الطريقه دون تصميم مسبق كما ذكر المؤسس عبد المهيمن الأغا .

( إضغط هنا لتحميل balsamiq) .

وهذه مجموعة من أهم الأدوات لتصميم الإطار الشبكي للمواقع يمكنك التعرف عليها من الرابط التالي : Top 15-Free Wireframing Tools for Designers

3- App-serv (خادم شخصي ) :-

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

ثانيا ً : المواقع الخدميه : -

1- Paletton : -

يوفر لك لوحة ألوان يمكنك من خلالها أن تحصل وبدقه علي كود Hex للون الذي تريده تحديداً لإستخدامه في موقعك ( رابط الموقع ) , ( موقع أخر) , }موقع يعكس العمليه ( يظهر اللون من كود hex ) {.

2- Placehold :-

موقع بسيط يقدم لك صور بمقاسات مختلفه لإستعمالها في موقعك أثناء كتابة الكود ويمكن أن يكون ذلك للتدرب أو ترك مساحه إعلانيه أو توضيح مكان وضع الصور إن لم تكن أنت المسؤول عن إضافتها وما شابه ذلك من إستخدامات ,( رابط الموقع ) وللحصول علي الصور أرفق العرض ثم الطول يفصل بينهم خط مائل " / " بعد عنوان الموقع مباشرة , علي سبيل المثال "placehold.it/965x159" وهذه صوره طولها هو 159 وعرضها هو 965 , ولاحظ أن الموقع يوفر كافة الأحجام عدا الكبيره جداً التي لن تحتاجها.

3- Template :-

موقع مميز يقدم لك مجموعه من 847 قالب html5 و css يمكنك دوماً الرجوع إليها ومحاكاتها لتحافظ علي مستواك في تلك اللغات وتزيد من مهاراتك ( رابط الموقع )(موقع شبيه)(موقع شبيه أخر) .

4- By-people :-

موقع عملاق يضم العديد من الأعمال في ( javascript–html5- css–php–bootstrap–wordpress ) والمزيد أيضاً , ( رابط الموقع ) .

5- Hostinger :-

إستضافه مجانية بسيرفر أباتشي تدعم php وقواعد البيانات mysql , ستستفيد منها في رفع ملفات موقعك إن لم تفضل إستعمال الخادم الشخصي , وهي إستضافه عربيه سهلة الإستخدام وستتمكن من رفع ملفاتك بـ ftp بسهوله . ( رابط الإستضافه ) , (إستضافات أخري ) .

6- Code-pen :-

موقع رائع يمكنك من إضافة أكوادك البرمجيه ومشاركتها , وكذلك مشاهدة أعمال الأخرين , هذا بالإضافة إلي إمكانية التعديل المباشر علي الكود ورؤية الناتج فوراً , ( رابط الموقع ) .

7- Paste-bin :-

شبيه نوعاً ما بالموقع السابق إلا أنه خفيف وسريع ويمكنك من خلاله نشر أي نص أو كود أو أي شئ مع إمكانية تحديد مده معينه يُحذف بعدها ما شاركت, ويمكنك إنشاء حساب للإحتفاظ بما شاركت والتعديل عليه لاحقاً ليكون عملك في آمان .

8- px-em :-

موقع للتحويل من px إلي em , كما نعلم أن em هو حجم الخط المستعمل في الكود فإذا كان حجم الخط 10 px علي سبيل المثال فإن 1em يساوي 10 pxولكن إن أردت أنت أن تتحكم في خط عنصر ما لجعله 13px ولكن ستدخل هذه القيمه بوحده em , فكل ما عليك فعله هو التوجه للموقع السابق وإدخال حجم الخط لديك في المربع الأول وحجم الخط الذي تريده في المربع الثاني ( الإثنان بالـ px ) وسيعطيك الموقع الحجم المساوي بالـ em .( رابط الموقع ) , ( موقع شبيه ).

9- Glyph-search: -

موقع رائع للبحث عن الأيقونات والخطوط المختلفه ويحتوي علي عدد كبير منها . ( رابط الموقع ) .

10-contrast-ratio :-

أداة مفيدة لقياس تناسب الألوان مباشرة لجعل موقعك متناسقاً وفي مظهر جميل فقط أدخل اللون الأول في اليمين والأخر في اليسار وسيعطي لك الموقع درجه التوافق فوراً , ( رابط الأداة من هنا ) .


ثالثا:- الإضافات : -

1-Color-Zilla :-

إضافة هامه لإلتقاط الألوان أثناء تصفحك علي الويب , تمكنك الإضافه من معرفة كود اللون المستخدم في أي موقع علي الويب بمجرد تمرير المؤشر بدقه علي مكان ذلك اللون , أيضاً توفر لك لوحة ألوان لإختيار اللون الذي يناسبك منها , وبالنقر علي Dom color analyzer تعرض لك الإضافه كافة الألوان المستخدمه بالصفحه وأماكنها , هذه الإضافة متوفره لمتصفحي جوجل كروم وفاير فوكس ( تثبيت الإضافة )( إضافه شبيهه ).

2- Light-shot : -

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

3-Ripple Emulator :-

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

4- Corporate Ipsum : -

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

5- Html-Validator :-

إضافه مميزه للفايرفوكس تسمح لك بفحص كود HTml للمواقع التي تتصفحها وتعرض لك الأخطاء والتنبيهات التي من شأنها أن تثبط عمل الموقع وتعوق أداءه ( تثبيت الإضافه من الموقع الرسمي ) .

6- Firebug :-

أداة رائعة تمكنك من تعديل صفحات Html و Css والتعامل مع أكود المواقع بصفه عامه وهي الأكثر شهره بين المطورين ( يمكنك تثبيت الإضافه لفايرفوكس من هنا ) , ولتحميل Firephp وهي من ملحقات هذه الإضافه ( من هنا ) .

7- Fire-ftp :-

لنقل الملفات من الحاسوب إلي الموقع والعكس عبر بروتوكول نقل الملفات ftp , بعد تثبيت الإضافه إضغط علي زر alt فيظهر الشريط العلوي في فايرفوكس ثم من tools إختر Web Developer وفي أخر القائمة ستعثر علي الإضافه , بعد فتحها ستعمل في تبويب جديد في المتصفح وسيتوجب عليك إدخال المستضيف والمستخدم وكلمة المرور للتحكم بالملفات مثلها مثل أي برنامج للتعامل مع Ftp ولكن يميزها العمل علي المتصفح مما يعني القرب من الموقع الفعلي وسرعه في الأداء , ( ثبت الإضافه من هنا لفايرفوكس ) , الموقع الرسمي للإضافه ( من هنا ) .

إلي هنا قد إنتهينا , نرجو منكم إثراء الموضوع بتعليقاتكم حول هذه الأدوات وتجاربكم معها وأفضلها لكم وأحقها بالتجربه وإن لم تُذكر .