ابزارهای طراحی سایت

معرفی ۵ ابزار برای طراحی سایت

معرفی ۵ ابزار برای طراحی سایت

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

1- codeanywher

اولین ابزار طراحی سایت

اگر شما هم از آن دسته افرادی هستید که کارهای برنامه نویسی خود را در مکان های مختلفی انجام می دهید و همیشه از جابجایی کدهای خودتان و کنترل ورژن ها و تغییرات آن خسته شده اید و اطلاعات و کدهای زیادی را از دست داده اید بهترین راه این است که در این سایت عضو شوید.

سایت codeanywhere این امکان را برای شما فراهم خواهد کرد تا پروژه دلخواه خود را ایجاد کنید و بعد از ایجاد پروژه کافی است در هر مکانی به اکانت خودتان لاگین کرده و کدهای خود را دانلود کنید و یا ختی بر روی پروژه خودتان با ویرایشگرهای پیشرفته و کامل همین مجموعه کار کنید.

از ویژگی های مثبت دیگر codeanywhere می توان به پشتیبانی کردن بسیاری از فریم ورک های پی اچ پی ، سی اس اس و جاوا اسکریپت اشاره نمود البته این مجموعه فریم ورک های جاوا و پایتون را هم به صورت کامل پشتیبانی کرده و شما می توانید فقط با یک کلیک منتظر ایجاد فایل های پیشفرض فریم ورک خود باشید.

از معروف ترین فریم ورک ها و حتی سی ام اس هایی که codeanywhere پشتیبانی می کند می توان به موارد زیر اشاره کرد.

لاراول، کیک پی اچ پی،جانگو،دروپال،Angular.js، backbone.js، سی پلاس پلاس، سی ،firehose،Go،java، magento، node.js،پایتون، رابی، Swift، سیمفونی، وردپرس و چندین مورد دیگر.

2- ویرایشگر Atom :

ویرایشگر ات Atom

ویرایشگر یکی از مهمترین ابزارها برای هر برنامه نویس و طراح سایت است! از بهترین وبرایشگرهای طراحی سایت می توان به sublimetext ، phpStorm،netBeans،Eclips و چند ویرایشگر دیگر اشاره نمود ولی چرا ما Atom را پیشنهاد می کنیم؟

به عنوان شخصی که چندین سال با ویرایشگر sublimeText کار کرده است معرفی این ویرایشگر به عنوان ویرایشگر برتر(از دیدگاه شخصی) کار چندان آسانی نیست ولی این ویرایشگر قابلیت هایی دارد که بقیه ویرایشگرها فاقد آن هستند البته دوست خوبمون دکتر مهران برای اولین بار پیشنهاد استفاده از این ویرایشگر رو داد که خداروشکر مثل داروهای تجویزیش نبود!

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

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

البته سرعت Atom حتی بعد از نصب چندین پکیج بسیار بیشتر از SublimeText حتی بدون یک پکیج است و این مسئله رو نمی شه نادیده گرفت حتی اگه سیستم شما در حد سیستم فضایی باشه( درسته! زیاد فرقی  نمی کنه 🙂

3-fireBug

فایرباگ firebug برای طراحی سایت

اگر از مرورگر فایرفاکس استفاده می کنید اصلا این افزونه را از دست ندهید! فایرباگ یکی از افزونه های کاربردی فایرفاکس است جالبه که بدونید در وقتی این نوشته منتشر شده  2/455/828 نفر داشتن از فایرباگ استفاده می کردن و اگر شما از این پلاگین استفاده نمی کنید حتما این افزونه رو  نصب کنید البته به صورت پیش فرض در فایرفاکس و گوگل کروم ابزار مشابهی وجود داره ولی فایرباگ چیزی است دیگر!

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

4- foundation

foundation در طراحی سایت

فوندیشن یکی از فریم ورک های حرفه ای طراحی سایت اصطلاحا front-end یا سمت کاربر است یعنی این فریم ورک به شما یاری می دهد تا بتوانید کدهای مربوط به سی اس اس، جی کوئری و اچ تی ام ال ۵ را به صورت کاملا استاندارد پیاده سازی نمایید.

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

foundation نیز یک فریم ورک است که اصطلاحا صفحات شما را ریسپانسیو کرده و کاربر می تواند به راحتی با موبایل و تبلت وارد سایت شما شده و برای هر نمایشگر با هر سایزی عرض وب سایت تنظیم شده و نیاز به زووم کردن برای خوانایی نوشته ها نیست و  اصطلاحا وب سایت user friendly می شود.

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

این فریم ورک را می توانید از این لینک دانلود کنید.

5-coolors

ابزار جداسازی رنگ تصاویر در طراحی سایت

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

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

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

 

 

 

 

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد.