أفضل الأضافات لمصممى المواقع ل: Fire Fox و Google Chrome

أفضل الأضافات لمساعدة مصممى المواقع لمتصفح Fire Fox  

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

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

1- “كولور زيلا” ColorZilla :

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

2- “بينسل” Pencil :

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

 3- “ميجرليت” Measurlet :

إضافة “ميجرليت” من أهم الإضافات في عالم التصميم، لأنها تمكن المستخدم من الحصول على قياسات أي منطقة يقوم بتحديدها، وهو مايسمح بإنشاء تصميم متجانس 100%، وكل مايحتاجه المستخدم هو الضغط على أيقونة المسطرة الموجودة بعد شريط العنوان ثم تحديد المنطقة.

4-  “ستايلش” Stylish :

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

5- “ڤيو سورس تشارت” View Source Chart :

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

6- “إتش تي إم إل ڤاليديتور” HTML Validator :

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

7- “فونت فايندر” Font Finder :

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

8- “سي إس إس يوسيج” CSS Usage :

بعد الإنتهاء من التصميم وتكويد التصميم، تأتي مهمة فحص ملفات “سي إس إس” للتأكد من سلامتها وعدم وجود أي عناصر مكررة أو لاعمل لها من أجل تحسين سرعة عرض الموقع، تتيح هذه الإضافة القيام بهذه المهمة حيث تقوم بتحديد العناصر الغير مستخدمة داخل الملف ليقوم المصمم بحذفها.

9 - " فاير باج " Fire bug :

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

10 - " ويب ديفلوبر " Web Developer :

أتت هذه الأضافة لتلبي حاجات مشرفي المواقع و المدونات لرصد كل ما يتعلق بشكل صفحاتهم كما انها تضم العديد من الخدمات و لكل الفئات المتقدمة و المبتدئة منها :

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

و الكثير من الوظائف الهامة نترككم لاكتشافها .

أهم الأضافات لمساعدة مصممى المواقع لمتصفح Google Chrome

1 - Awesome Screenshot: Capture & Annotate

كم من مرة رأيت مقال أعجبك على الانترنت و تريد اخد صورة منة screenshot ، هذة الأداة سوف تساعدك فى عمل ذلك بسهولة , للتحميل من هنا .

2 - Chroma

أختار اللون ، أختار الظل .. هذا الأداة الأأفضل لالتقاط الوان من صفحات الويب “color picker”  للتحميل من هنا .

3 - Chrome Sniffer

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

4 - LastPass

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

 

5 - MeasureIt

ترسم بها على أى موقع للحصول على الأبعاد وكنت قد تطرقت إليها فى إضافات FireFox فى التدوينة السابقة . للتحميل من هنا .

6 - Speed Tracer

للحصول على كيفية أداء تطبيقات الويب الخاصة بك للتحميل من هنا .

7 - Pearltrees Extension

Pearltrees هو مكان لجمع وتنظيم ومشاركة كل ما تحب على شبكة الإنترنت , للتحميل من هنا
                                                         
   منقول من عرب سوفت