عند قيامك بـ إنشاء موقع إلكتروني Ùإن هناك مجموعة من الخطوات التي لا تخÙÙ‰ على أي مصمم مواقع الكترونية، ولكن الذي يميز مصمم عن غيره هو الأدوات التي يستعين بها والتي بدورها تجعل مهمته أسهل وأكثر ØرÙية، لذلك أعددنا لك هذا الموضوع الهام Øول الأدوات الأكثر Ùعّالية التي يستخدمها مصممون المواقع الالكترونية، والتي تنقسم لقسمين، القسم الأول هي الأدوات التي يستخدمها المصمم أثناء مرØلة إنشاء الموقع الإلكتروني، والقسم الثاني هي الأدوات الخاصة بتقييم واختبار الموقع بعد الانشاء.
أولًا الأدوات المستخدمة أثناء إنشاء الموقع:
1- Adobe Fireworks
Adobe Fireworks هو Ù…Øرر بيانات نقطية تجاري Ùˆ vector graphics من Adobe وهو متوÙر لأنظمة تشغيل Mac Ùˆ Windows. تم تصميم Fireworks خصيصًا لمصممي الويب (على عكس Photoshop)ØŒ وهو يوÙر لك عددًا كبيرًا من الأدوات والخيارات التي تجعل تصميم النماذج الأولية للويب أمرًا سهلاً.
من بين ميزاته البارزة: "الشرائØ" لتقطيع وتقطيع نموذج بالØجم الطبيعي للتصميم إلى HTML / CSS لإنشاء نماذج أولية بسرعة (على الرغم من أنه يجب تجنب استخدام Ø´Ùرة المصدر التي يتم إنشاؤها تلقائيًا للبناء النهائي)ØŒ والقدرة على Øزم تصميم موقع بالكامل كمل٠PDF مع مكونات قابلة للنقر لنماذج أولية تÙاعلية ومثيرة للإعجاب للمواقع، وأدوات تØسين لجعل رسومات الويب الخاصة بك Ø®ÙÙŠÙØ© الوزن قدر الإمكان.
2- Dreamweaver
Adobe Dreamweaver هو تطبيق تجاري لتطوير الويب وهو Ù…ØªØ§Ø Ù„Ø£Ù†Ø¸Ù…Ø© تشغيل Mac Ùˆ Windows.
تتضمن مجموعة الأدوات والخيارات المليئة بالمميزات لـ تصميم مواقع الانترنت:
تمييز بناء الجملة وتلميØات التعليمات البرمجية الذكية للغاية، وعميل FTP مدمج، وإدارة المشروع وخيارات سير العمل التي تجعل عمل الÙريق بلا مجهود
ÙˆLive View - التي تعرض لك معاينة للشÙرة المصدر الخاصة بك.
يتكامل Dreamweaver بإØكام مع منتجات Adobe الشائعة الأخرى مثل PhotoshopØŒ مما ÙŠØªÙŠØ Ù„Ùƒ مشاركة Smart Objects لتØديث مكونات الرسومات وتØريرها بسرعة وسهولة.
3- Panic Coda
Panic Coda هو تطبيق تطوير ويب برنامج تجريبي لنظام التشغيل Mac OS X.
يسعى إلى تقليل كمية التطبيقات (مثل عميل FTP ومØرر CSS ونظام التØكم ÙÙŠ الإصدار وما إلى ذلك) التي تØتاجها لتطوير مواقع الويب وتØسين سير عمل Ùريقك.
تستخدم ÙلسÙØ© تطوير الويب ذات الناÙذة الواØدة ÙÙŠ Coda واجهة مبوبة لتØرير النص ØŒ ونقل الملÙات Ùˆ SVN Ùˆ CSS ÙˆØتى "الكتب" التي تتضمن كتب الويب التي يمكن البØØ« عنها (تأتي مع المرجع المكتبي لمبرمج الويب ولكن يمكنك إضاÙØ© الخاص بك) .
لقد سمØت الواجهة البسيطة والبديهية لشركة Coda بالØصول على جوائز Apple Design Awards كأÙضل تجربة مستخدم لنظام التشغيل Mac OS X ÙÙŠ عام 2007.
4- Adobe تصميم مواقع الكترونية Photoshop
Adobe Photoshop هو Ù…Øرر رسومات تجاري شائع جدًا ومتوÙر لنظام التشغيل Mac Ùˆ Windows.
تم إنشاؤه للمصورين والمصممين المØترÙين ليساعدهم ÙÙŠ مراØÙ„ انشاء موقع ويب وهو التطبيق المثالي لمعالجة الصور وإنشاء رسومات الويب.
ÙŠØتوي Photoshop على جميع الأدوات والخيارات الضرورية التي تØتاجها مثل: المرشØات - التي تضي٠تلقائيًا تأثيرات إلى صورتك أو قسم Ù…Øدد من صورتك، وقابلية التوسع والأتمتة باستخدام Brushes ØŒ Actions and ScriptingØŒ وميزات تØسين سير العمل مثل Layer Comps Ùˆ Revert اختيار.
5. مطور Firefox
Firefox Developer Edition هو إصدار من Firefox مخصص لمطوري الويب.
بصÙتك مطورًا يمكنك الوصول إلى جميع أدوات DevTools الخاصة بهم. تشتمل الميزات العديدة على: التØليل وتصØÙŠØ Ø§Ù„Ø£Ø®Ø·Ø§Ø¡ØŒ والبناء والتصميم باستخدام CSS GridØŒ ومÙتش HTMLØŒ ومØرر النمط من بين العديد من الأدوات الأخرى لتقديم أكبر مساعدة Ùيما يتعلق باØتياجات تطوير الويب الخاصة بك.
ثانيًا الأدوات المستخدمة لتقييم واختبار الموقع بعد الانشاء:
1- ClickHeat
ClickHeat هي أداة مرئية Ù…ÙتوØØ© المصدر لعرض المناطق الأكثر Øيوية Ùˆ الباردة لصÙØØ© الويب.
ÙŠØ³Ù…Ø Ù„Ùƒ بمعرÙØ© أي المواقع ينقر المستخدمون عليها أكثر، وأيها يتم تجاهلها.
من السهل جدًا تنÙيذه على موقع الويب الخاص بك، ما عليك سوى تضمين مل٠جاÙا سكريبت خارجي.
2- Crazy Egg
تقدم Crazy Egg عددًا لا ÙŠØصى من الأدوات التØليلية لمساعدتك على تصور ما ÙŠÙعله الزوار وتعد من أهم أدوات المصممين عند تصميم مواقع الكترونية.
تشمل الميزات: Confetti - مما ÙŠØªÙŠØ Ù„Ùƒ معرÙØ© ما ينقر عليه الأشخاص بناءً على عوامل معينة مثل نظام التشغيل الخاص بهم ومن أين أتوا، والتراكب - يوÙر لك الكثير من البيانات Øول روابط معينة ومشاركة التقارير - مما ÙŠØªÙŠØ Ù„Ùƒ مشاركة البيانات مع أعضاء الÙريق والعملاء.
ÙŠØ³Ù…Ø Ø§Ù„Ø¥ØµØ¯Ø§Ø± المجاني بتتبع 4 صÙØات Ùقط - لذا استخدم Ø£Ùضل الصÙØات المقصودة للØصول على أكبر قدر من البيانات.
4- YSlow for Firebug
يتمثل Ø£Øد المبادئ الرئيسية للتصميم القوي ÙÙŠ أنه لا يجب تقديم المعلومات بطريقة منطقية وأنيقة ÙØسب، بل يجب أيضًا تقديمها بسرعة وبتأخير ضئيل جدًا.
YSlow for Firebug هي أداة مجانية لموزيلا ÙايرÙوكس تمنØÙƒ معلومات Øول تصميم الواجهة الأمامية لمعرÙØ© ما إذا كان يعمل بشكل جيد.
يمنØÙƒ درجة بالØر٠(من A إلى F) ويØدد نقاط المشاكل ÙÙŠ صÙØØ© الويب الخاصة بك.
يعتمد على Yahoo! Developer Network’s "Ø£Ùضل الممارسات لتسريع موقع الويب الخاص بك" ÙÙŠ البداية بواسطة ستي٠سودرس، الذي كان ÙÙŠ السابق رئيس قسم الأداء ÙÙŠ Yahoo! ويعمل الآن ÙÙŠ Google على أداء الويب ومبادرات المصدر المÙتوØ.
4- clickdensity
clickdensity عبارة عن مجموعة كاملة من أدوات التØليل قابلية الاستخدام التي ستساعدك على تقييم تصميم صÙØØ© الويب الخاصة بك.
يمكنك استخدام الخرائط الØرارية التي تعرض الأماكن التي ينقر المستخدمون عليها أكثر من غيرها، Ùˆ hover maps والتي تÙظهر الأشخاص وهم يتنقلون Ùوق الروابط ولكن لا ينقرون عليها، واختبارات A / B التي ØªØªÙŠØ Ù„Ùƒ تغيير بعض عناصر الصÙØØ© لمعرÙØ© النمط الأكثر Ùعالية.
5- ClickTale
تقدم ClickTale الكثير من بيانات المستخدم المتعلقة بكيÙية استخدام الزوار لموقع الويب الخاص بك.
هناك الكثير من الأشياء التي يمكنك الاطلاع عليها، مثل متوسط الوقت الذي يستغرقه المستخدم للنقر على الرابط، وتردد المستخدم ÙÙŠ النقر على الرابط، والتمرير إلى نسبة النقر، وغير ذلك الكثير.
كما يوÙر أيضًا تقارير ومخططات تÙصيلية Øول Ø£Øجام شاشات المستخدمين لديك لتØسين تصميم صÙØØ© الويب بشكل Ø£Ùضل لتلبية اØتياجات الزائر العادي.