دوشنبه , آذر ۲۷ ۱۳۹۶
سرخط خبرها
خانه / کار و کسب / گوناگون / همه چیز درباره طراحی وب
همه چیز درباره طراحی وب
طراحی وب

همه چیز درباره طراحی وب

بیش از ۳۰ مورد از بر‌ترین اکستنشن‌های طراحی وب در فایرفاکس

همه آنچه طراحان وب می‌خواهند

شغل‌های مرتبط با حوزه فناوری اطلاعات اکثراً جزء شغل‌های پردرآمد در جهان محسوب می‌شوند؛ به علاوه میان همه شغل‌های فناوری اطلاعات، یکی از بر‌ترین‌ها طراحی وب است. اگر شخصی بتواند به معنای واقعی کلمه در این حوزه متخصص شود، می‌تواند سطح زندگی خوبی را تجربه کند. طراحی وب حوزه بسیار گسترده‌ای است و برای یک طراح وب حرفه‌ای شدن می‌توان ماه‌ها صحبت کرد و برای آن رشته دانشگاهی در نظر گرفت. اما یکی از موضوعاتی که باید به آن توجه کرد (در تمامی شغل‌ها و حوزه‌ها) شناخت ابزار مناسب و نحوه استفاده از آن است.

در طراحی وب یا‌‌ همان Web Developing، ابزارهای بسیار زیادی وجود دارد که متناسب با کاری که قرار است انجام دهید، باید آن‌ها را برگزینید. مرورگر‌ها بخش بزرگی از ابزار کار طراحان وب را تشکیل می‌دهند زیرا اکثر صفحات تولید شده برای نمایش در مرورگر‌ها ایجاد می‌شوند.

به علاوه اینکه وقتی با ابزار مناسب صفحه‌ای استاندارد ایجاد شود، می‌توانید انتظار داشته باشید که صفحه در تمامی مرورگر‌ها به درستی و یک شکل نمایش داده شوند، زیرا مرورگر‌ها به صورت استاندارد ساخته می‌شوند. (البته اینترنت اکپلورر کاملا از این قاعده مستثنا است.)

فایرفاکس و کروم بهترین مرورگرهایی هستند که هرکسی می‌تواند به سراغ آن برود. این هفته ما قصد داریم به سراغ ابزارهای دستیاری برویم که کار طراحی وب را بیش از پیش راحت‌تر، دلپذیر و حتی سریع‌تر می‌کنند. در واقع می‌خواهیم بهترین اضافه شونده‌های (Extensions) مرورگر فایرفاکس برای طراحی وب را در حد چند کلمه به شما معرفی کنیم.

چگونه نصب و استفاده کنم؟

برای نصب هر اکستنشن دو راه وجود دارد: به سایت addons. mozilla. org مراجعه کنید و نام اکستنشن را در آن جستجو کنید یا از منوی Firfox گزینه Add-ons را کلیک کرده و در پنجره باز شده به دنبال اکستنشن مورد نظر بگردید. فراموش نکنید که بعد از نصب بیشتر اکستنشن‌ها باید فایرفاکس را ری استارت کنید. (ببندید و دوباره باز کنید)

Web Development

اولین و در دسترس‌ترین ابزار دستیار طراحی وب فایرفاکس، قابلیتی است که در خود این مرورگر فوق العاده گنجانده شده است. Web Development مجموعه‌ای جالب و مهم از ابزارهایی است که می‌توان کار طراحی وب خود را با آن بهینه کنید و با سرعت بیشتری نتیجه کار خود را ببینید. برای مثال CSS Editor آن اجازه می‌دهد به طور زنده و لحظه‌ای (Live) هر تغییری که بخواهید در CSS یک صفحه ایجاد کنید یا با Console آن با صفحه و کدهای جاوا، اسکریپت در ارتباط باشید یا حتی دیباگ (اشکال زدایی) کنید.

Firebug

یکی از پر دانلود‌ترین اکستنشن‌های فایرفاکس است که کارکرد کلی آن دقیقاً به Web development خود فایرفاکس شباهت دارد؛ اما با کارایی‌هایی بیشتر و تخصصی‌تر. به وسیله آن می‌توانید CSS، HTML و جاوا اسکریپت صفحات خود را مشاهده، ویرایش و دیباگ کنید.

FireFTP

به دنبال یک اکستنشن خوب برای پروتکل‌های FTP و SFTP هستید که با آن بتوانید فایل‌های سایت خود را انتقال دهید. fireFTP یک اکستنشن امن و رایگان برای این کار است.

IE Tab V۲

IE Tab V۲ یک نسخه جداگانه و بروز شده از یک اکستنشن قدیمی با همین نام است. این اضافه شونده یه کاربران و به خصوص طراحان وب اجازه می‌دهد در حالیکه مرورگر فایرفاکس است، بتواند موتور پردازشگر را تغییر داده و صفحه وب مورد نظر را با موتور اینترنت اکسپلورر رندر کند و ببیند (در داخل خود فایرفاکس). با این شیوه به راحتی از داخل فایر فاکس ظاهر یک صفحه وب یا سایت را در حالت اینترنت اکپلورر نیز می‌توانید مشاهده و بررسی کنید.

Chrome View

شبیه اکستنشن قبلی اما برای کروم. صفحه وب مورد نظر را در کروم باز می‌کند.

Flagfox

Flagfox یک اکستنشن فرا‌تر از نمایش دهنده پرچم کشور سایت مورد نظر است. این اضافه شونده ابزارهایی مانند چک کننده امنیت سایت، Whois دومین سایت، ترجمه، معرفی سایت‌های مشابه، کوتاه کننده آدرس‌های اینترنتی (URL) و… انجام می‌دهد.

ColorZilla

اگر طراح وب باشید، به خوبی با موضوع حساسیت رنگ‌ها و انتخاب رنگ مناسب آشنا هستید؛ حتی ر برخی موارد رنگ‌هایی را در سایت‌هایی دیده‌اید که دوست داشتید آن‌ها را در طراحی خود استفاده کنید. اینجاست که ColorZilla به کمک شما می‌آید و با دو کلیک ساده می‌توانید رنگ مورد نظر خود را از صفحه دربیاورید.

Webpage Screenshot

یک ابزار فوق العاده برای گرفتن اسکرین شات از صفحات وب و اضافه کردن المان‌هایی برای بهینه کردن آن. المان‌هایی نظیر تغییر رنگ برخی نقاط، اضافه کردن اشاره گر‌ها، برش تصویر و امکانات جالب دیگر.

Live HTTP Headers

HTTP Headers یک موضوع بسیار آشنا برای طراحان وب است. به وسیله این اکستنشن می‌توانید به صورت زنده و لحظه‌ای HTTP Headerهای صفحات و سایت‌ها را مشاهده کنید.

MeasureIt

سایز و اندازه در طراحی وب یک موضوع بسیار حساس و مهم است. MeasureIt ابزارهایی برای اندازه گیری بخش‌های مختلف صفحه وب را در اختیار کاربرانش می‌گذارد. برای مثال، طول ارتفاع المانی خاص یا فاصله بین المان‌های HTML.

YSlow

وای اسلو یک اکستنشن جالب است که صفحات وب طراحی شده توسط شما را آنالیز کرده و طبق قوانینی به شما راهکارهای افزایش سرعت بارگذاری صفحه را ارائه می‌کند.

Cookies Manager+

خود فایر فاکس ابزاری برای مشاهده سطحی کوکی‌ها دارد، اما با این اکستنشن نه تنها قادرید کوکی‌ها را ببینید، بلکه می‌توانید آن‌ها را ویرایش کرده، کوکی جدید ایجاد کنید، نسخه پشتیبان تهیه کنید و حتی آن‌ها را بازگردانی کنید.

HttpFox

یک اضافه شونده مانیتورینگ است که تمام ترافیک HTTP مرورگر شما را با سرورهای سایت‌ها نظارت می‌کند.

ShowIP

همانطور که از نام این اضافه شونده مشخص است، اطلاعات آی پی سایتی را که در لحظه در حال مشاهده آن هستید نشان می‌دهد. Whois و Netcraft جزء قابلیت‌های این اکستنشن است.

Screengrab

شاید روزی این اکستنشن به کار شما بیاید؛ از طریق آن می‌توانید کل یک صفحه وب را به صورت عکس ذخیره کنید.

Html Validator

کدهای HTML صفحه را از نظر استاندارد و صحت نوشتن بررسی کرده و طی گزارشی، مشکلات آن را به شما اعلام می‌کند.

Autofill Forms

یک اضافه شونده که باعث می‌شود فیلد فرم‌ها به صورت خودکار پر شوند. این اضافه شونده هم برای کاربران عادی کاربرد دارد، هم برای طراحان وب. به این ترتیب دیگر نیازی نیست طراحان، هر بار فیلد فرم‌هایی را که خودشان برای سایت‌های در حال ساخت طراحی کرده‌اند، به صورت دستی پر کنند.

Pixlr Grabber

یک ابزار فوق العاده برای ذخیره سازی هرگونه عکسی که در صفحات وب استفاده شده است؛ از عکس‌هایی که قابل کلیک نیستند گرفته تا عکس‌هایی که به عنوان پس زمینه یا‌‌ همان Background المان‌های صفحات استفاده می‌شوند.

SeoQuake SEO

یک اکستنشن فوق العاده دیگر برای طراحان وب که به کمک آن‌ها می‌آید تا صفحات وب خود را بر اساس بهینه سازی برای موتورهای جست‌و‌جوگر (Search Engine Optimization یا‌‌ همان SEO) و همچنین بهینه سازی برای شبکه‌های اجتماعی (Social Media Optimization یا‌‌ همان SMO) طراحی کنند.

Extended Statusbar

نوار استاتوس فایرفاکس را با اطلاعات تکمیلی دیگر مانند سرعت، درصد، زمان و حجم داده دانلود شده تکمیل می‌کند. این قابلیت به صورت پیش فرض در مرورگر اپرا وجود دارد.

FireQuery

در واقع این اکستنشن یک مکمل برای Firebug است که در ابتدای متن در مورد آن توضیح دادیم. FireQuery ابزارهای ویرایش و دیباگینگ جی کوئری (jQuery) را به فایرباگ اضافه می‌کند.

URL Fixer

یک اکستنشن دیگر که نه تنها برای توسعه دهندگان وب کاربردی است، بلکه کاربران عادی نیز می‌توانند از آن استفاده کنند. این اکستنشن پیش از اینکه یک آدرس اشتباه مثلاً Google. com یا youtube. com فراخوانی شود، یک پیغام تأیید از شما می‌خواهد.

Wappalyzer

این اضافه شونده به صورت خودکار اپلیکیشن‌های وب مورد استفاده را در صفحه‌ای که هم اکنون در حال مشاهده آن هستید شناسایی کرده و به شما نشان می‌دهد. برای مثال Drupal، PHP، Apache، jquery، WordPress و چند پلتفرم دیگر.

Flashlight

یک اضافه شونده جالب برای طراحانی که با فایل‌های فلش (Flash) سروکار دارند با استفاده از این ابزار می‌توانند به دیباگینگ این فایل‌ها بپردازند؛ برای مثال فلش را در نسخه‌های مختلف Flash Player بررسی کنند.

WebRank Toolbar

یک ابزار فوق العاده برای طراحان وبی است که می‌خواهند رتبه در گوگل (Page Rank)، رتبه الکسا (Alexa)، رتبه Quantcast، صفحات ایندکس شده، لینک‌های برگشت داده شده از سایت‌های دیگر (Backlinks) و کلی اطلاعات دیگر آن سایت را در یک جا ببینند و استفاده کنند.

Font Finder

شاید برای شما هم پیش آمده باشد که فونت مورد استفاده در یک سایت را دوست داشته باشید و بخواهید بدانید که چه فونتی است؛ در این صورت اکستنشن Font Finder به کمک شما می‌آید.

Dafizilla Table۲Clipboard

کپی اطلاعاتی که داخل جدول‌ها (Tables) قرار دارد، کاری سخت است. دافی زیلا نام اکستنشنی است که به شما اجازه می‌دهد اطلاعات جداول را چه به صورت سطری (Row) چه به صورت ستونی (Column) کپی کنید.

SQL Inject Me

تزریق اس کیوال (SQL Inject) یکی از بد‌ترین و شایع‌ترین حملاتی است که به سایت‌ها صورت می‌گیرد. با این اکستنشن ساده می‌توانید تا حدودی سایت خود را از نظر مقاومت در برابر اینگونه حملات بررسی کنید.

CookieSwap

کوکی سواپ به کاربران اجازه می‌دهد که همزمان برای یک سایت، کوکی‌های متفاوت داشته باشند و بین آن‌ها جابجا شوند. برای مثال چند اکانت در گوگل و یاهو دارید و با یک جابجایی کوکی راحت می‌توانید بین اکانت‌ها جابجا شوید.

PHP Developer Toolbar

با استفاده از این اضافه شونده، دیگر کدنویس‌های PHP نیازی ندارند در سایت PHP. net به دنبال مرجع توابع و دستورات پی اچ پی بگردند. فقط کافی است با این نوار ابزار به دنبال موضوع خود بگردند.

Regular Expressions Tester

یک ابزار کمکی برای کار با عبارات منظم (Regular Expressions) و افزایش بهره وری و تست آن‌ها.

GridFox

ایجاد یک لایه جدولی روی صفحه برای نمایش تقسیم بندی درست صفحه و جانشانی درست المان‌ها در صفحه وب. این ابزار به زیبایی‌های طراحی‌ها بسیار کمک می‌کند.

منبع: عصر ارتباط

انتشار توسط 8 تم

جوابی بنویسید

ایمیل شما نشر نخواهد شدخانه های ضروری نشانه گذاری شده است. *

*

*