افزونه های طراحی وب سایت برای مرورگر کروم (قسمت اول)

گنجینه افزونه های کروم را که بگردید صد در صد گیج خواهید شد زیرا در هر موردی هزاران افزونه وجود دارد تا باعث شود این مرورگر به قوی ترین و پرطرفدارترین مرورگر بین رقبا به حساب بیاید. در واقع می توان گفت ۹۰ درصد نیازهایی که شما از یک مرورگر از ذهنتان عبور کند در این گنجینه موجود است. اگر شما به طراحی سایت می پردازید باید بگوییم خوشبختانه در این مورد هم کروم دست پر است. در مطلب ” افزونه های سئو سایت کروم ” به معرفی برخی از افزونه های سئو سایت کروم پرداخته شد. در این مطلب می خواهیم به معرفی افزونه های طراحی سایت نیز بپردازیم تا همچنان شعار همراهی شما از ابتدا تا انتها و کامل بودن مطالب سایت ما در هر زمینه ای پا فشاری کنیم.

( روی اسم هرکدام از افزونه ها که بزنید به صفحه ی افزونه هدایت می شوید )

افزونه طراحی سایت ColorPicker

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

افزونه طراحی سایت Chrome Pallete

از شدت خسته کننده بودن پیدا کردن طرح رنگ ( Color Scheme ) یک عکس سردرد میگیرید ؟ پس افزونه‌ی کروم پالت مخصوص شماست ، از هر عکس ۶۴ پالت مختلف ایجاد میکند.

افزونه طراحی سایت (Ripple Emulator (Beta

Ripple یک شبیه ساز موبایلی چند پلتفرمی است که برای توسعه و تست برنامه های کاربردی HTML5 موبایل به طور سفارشی طراحی شده است.هدف این افزونه کاهش چالش هایی که توسعه دهندگان و برنامه نویسان گوشی که به خاطر اختلال در پلتفرم مواجه میشوند ، میباشد.

افزونه طراحی سایت Colour Tweaker

همان کار Color Picker را انجام میدهد اما با یک متد خاص. در فیلد سلکتور ( Selector ) ، سلکتور مربوطه در بخش CSS قسمتی را که میخواهید را وارد کنید و بعد به راحتی رنگ متن ، زمینه ، و حاشیه آن را تغییر دهید

افزونه طراحی سایت Font Editor

دیگر حدس زدن و از پنجره ای به پنجره ای دیگر رفتن برای مشاهده تغییرات اعمال شده لازم نیست. این افزونه به شما اجازه میدهد تغییرات واریانت ، ارتفاع ، نوع و خانواده ، ارتفاع خطوط و …. را به سادگی اعمال کنید و همان لحظه مشاهده کنید

افزونه طراحی سایت  What Font

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

افزونه طراحی سایت Google Font Previewer

همان‌طور که از اسمش پیداست امکان پیش‌نمایش فونت‌ها را از فولدر فونت‌های گوگل را در اختیار شما میگذارد. همچنین میتوانید استایل فونت‌ها را هم تغییر بدهید. این تغییرات شامل size , style, weight و shadow میشود. اگه از فونت خاصی خوشتان آمد میتوانید کد CSS آن فونت را که این افزونه در اختیارتان قرار میدهد را در وبسایتتان کپی کنید تا از این فونت استفاده کنید.

افزونه طراحی سایت Web developer

افزونه Web Developer همانطور که مشخص است سری ابزارهایی را در اختیار طراحان وب قرار داده تا با استفاده از آن بتواند مدیریت کاملی بر روی CSS ، تصاویر ، کوکی‌ها و … داشته باشد و وب سایت را با تمامی دیدهای ممکن ، از جمله دید یک موتور جستجو چک و تست نماید.

افزونه طراحی سایتPendule

یک ابزار سبک مشابه Web Developer اما فقط مجهز به ابزار خاص مثل Style Viewer, Source Viewer و Validator

افزونه طراحی سایت Code cola

یک افزونه برای ویرایش css های صفحه به صورت آنلاین می باشد.

افزونه طراحی سایت Visual Inspoector

Visual Inspector یک افزونه کروم است که به طراحان این قابلیت را می دهد بدون احتیاج به کدنویسی تغییرات موقتی را در وبسایت ایجاد کنند.

افزونه طراحی سایت Web Developer Checklist

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

افزونه طراحی سایت Firebug Lite 

با کاری که در فایرفاکس انجام میدهد متفاوت است. یک نوع نمایش ویژوال فایرفاکس-مانند را در اختیار شما قرار میدهد. همچنین قابلیت ردیابی المان‌های HTML با موس را هم دارد. همچنین میتونید به صورت زنده کد CSS مربوط به هر المان را تغییر بدهید و تغییرات را همان لحظه مشاهده کنید

افزونه طراحی سایت Stylebot

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

افزونه طراحی سایت Stylesheet Reloader

بدون refresh کردن کل وبسایت CSS جدید را به آن اعمال کنید که در زمان به شدت صرفه‌جویی میشود ، مخصوصا برای طراحانی با سرعت اینترنت پایین

افزونه طراحی سایت Check My Links

افزونه Check My Links صفحات شما را بررسی می کند و تمام لینک های استفاده شده در آن را زیر نظر می گیرد و در نهایت لینک هایی که به درستی قرار گرفته اند را با رنگ سبز و لینک های شکسته را با رنگ قرمز نشان می‌دهد. هیچکس لینک های شکسته دوست ندارد.

افزونه طراحی سایت Page Ruler

با استفاده از افزونه Page Ruler می توانید در صفحه وبتان یک خط کش داشته باشید و ارتفاع ، عرض و موقعیت مورد نظرتان را با آن خط کشی نمایید.

افزونه طراحی سایت Dimensions

یک افزونه بسیار ساده اما کارآمد است که ارتفاع و عرض صفحه نمایش‌تان را اندازه گیری می کند.

افزونه طراحی سایت BuiltWith Technology Profiler

جذاب ترین قسمت این افزونه این است که هر نوع تکنولوژی وب به کار رفته را مثل فریم‌ورک‌ها و استانداردهای وب را با اطلاعات کامل در مورد جزئیات لیست می کند.

افزونه طراحی سایت Window Resizer

با این افزونه میتوانید سازگاری وضوح ( Resolution ) صفحه وبسایتتان را با وضوح استاندارد یا تعریف شده توسط خودتان تست کنید

افزونه طراحی سایت HTML Validator

یکی از بهترین افزونه‌ها در نوع خودش که میتونه به اعتبارسنجی کدهای HTML انلاین یا افلاین ( روی localhost ) به صورت دستی یا اتوماتیک بپردازه. میتونید نتیجه اعتبارسنجی رو در یک تب جدید یا در همان تب ببینید.

افزونه طراحی سایت Sight

با گزینه‌های فونت و تم متعدد. این افزونه متن کد وبسایت رو به یک حالت راحت‌تر برای خواندن تبدیل میکند

افزونه طراحی سایت PicMonkey

یک افزونه ویرایشگر تصویر به صورت آنلاین میباشد که به شما امکان ویرایش تصاویر را میدهد.شما با استفاده از این افزونه میتوانید از کل صفحه خود و با یک کلیک یک عکس بگیرید.

افزونه طراحی سایت CSS Dig

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

افزونه طراحی سایت CSSViewer

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

افزونه طراحی سایت  Page ruler

با استفاده از افزونه Page Ruler یک خط کش کامل و بدون خطا را در تمامی صفحات وب سایت خود همراه دارید. این خط کش پس از فعال سازی به طراحان کمک می‌کند تا به سرعت اندازه یک بنر یا هر چهارچوب دیگری را که مدنظر دارد گرفته و اعداد آن را یادداشت کند.

افزونه طراحی سایت CSS-Shack

افزونه‌ای است که به شما اجازه می دهد استایل های لایه بندی شده را درست کنید (درست مانند برنامه های ویرایش تصویر ) و آن ها را در یک فایل سی‌اس‌اس خروجی بگیرید.

افزونه طراحی سایت CSS Shapes Editor

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

افزونه طراحی سایت WordPress Style Editor

با استفاده از این افزونه می توانید استایل های مربوط به قالب خود را در وردپرس تغییر دهید و تغییرات را به صورت مستقیم در صفحه اعمال نمایید.

افزونه طراحی سایت PageEdit

باعث می شود که صفحه مرورگر شما به یک ادیتور HTML در حالت WYSIWYG تبدیل شود و با آن بتوانید هر صفحه ای را ویرایش کنید.

افزونه طراحی سایت Perfmap

افزونه ای است که برای شما یک نقشه از وبسایت درست می کند و به شما می گوید که چه بخش هایی از وبسایت در چه بازه‌ای از زمان لود می شود. اینکار با استفاده از Resource Timing API انجام می شود.

افزونه طراحی سایت Validity

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

افزونه طراحی سایت Bootlint This Page

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

افزونه طراحی سایت ColorZilla

این افزونه در اصل برای مرورگر فایرفاکس درست شده است. این افزونه به شما ابزارهای مختلفی را برای استفاده از رنگ در مرورگر‌تان ارائه می دهد. ابزارهایی مانند color picker ، eyedropper ، pallette viewer و gradient generator.

افزونه ها و طراحی سایت

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

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

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