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

به همین علت هرکدام از نرم افزارهای ویرایشگر بر روی یک یا چند ویژگی که مورد انتظار کاربر است تمرکز کرده اند. البته برخی نیز سعی کرده اند با قرار دادن ابزارهای مختلف تمام کاربران را به سمت خود متمایل کنند! در این مطلب سعی شده تا چند ویرایشگر خوب به شما معرفی شود تا خود شما تصمیم بگیرید تا از کدامیک برای کارهای خود استفاده کنید.

IDE چیست؟

Integrated Development Environment به معنی محیط توسعه یکپارچه (مجتمع) می باشد. محیطی است که ابزارهای مورد نیاز برای تولید یک نرم افزار را در اختیار کاربر قرار می دهد.

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

NetBeans IDE

بگذارید در اولین نگاه، نرم افزاری حرفه‌ای را به شما معرفی کنم؛ این نرم‌افزار بااینکه بیشتر امکانات یک ویرایشگر حرفه ای را داراست، متن باز و رایگان نیز می باشد! از قابلیتهای مهم NetBeans می توان به پشتیبانی از زبان های مختلف از جمله HTML / PHP / JS / C / C++ / JAVA پایگاه داده Oracle، تکمیل کد وغیره اشاره کرد.

  • رایگان
  • متن‌باز
  • پشتیبانی از زبانهای برنامه‌نویسی مختلف

Brackets

برای آن دسته از کاربرانی که ابزارها و امکانات مختلف در ویرایشگرهای حرفه ای (مانند NetBeans) برایشان مهم نیست و بیشتر به سبک بودن و همچنین محیط دیداری زیبا اهمیت می دهند Brackets یک نمونه از ویرایشگرهای سبک و زیباست که می تواند نیاز یک کاربر غیرحرفه ای یا پیشرفته را مرتفع کند. از قابلیتهای مهم Brackets می توان به سبک و زیبا بودن و همچنین وجود مخزن افزونه های مختلف برای اضافه کردن و ارتقا ابزارهای مورد نیاز کاربر  اشاره کرد.

  • رایگان
  • سبک و زیبا
  • مخزن افزونه

Sublime Text

این ویرایشگر نیز همانند Brackets بوده با این تفاوت که در این نرم افزار از مخزن افزونه ها خبری نیست. اما با توجه به ظاهر زیبا و همچنین امکاناتی که برای راحتی کدنویسی به کاربر ارایه می دهد مورد توجه بسیاری از کدنویسان قرار گرفته است. نکته منفی در مورد این ویرایشگر هماهنگ نبودن آن با زبان فارسی است.

  • رایگان
  • هماهنگ نبودن با زبان فارسی

JetBrains PhpStorm

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

  • غیررایگان
  • دارای افزونه‌های مختلف
  • خطایابی هوشمند
  • جستجوی هوشمند

notepad++

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

  • رایگان
  • ساده، سبک و کاربردی

komodo edit

ویرایشگر کد komodo در دو نسخه komodo IDE و komodo Edit موجود می‌باشد. این ویرایشگر نیز ماننده دیگر ویرایشگرهای رایگان، دارای امکانات متفاوتی برای برنامه‌نویسان است. از نکات مثبت komodo چندزبانه بودن در کنار ظاهر آراسته و زیباست. نکته منفی در مورد این ویرایشگر کند بودن آن است.

  • رایگان

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

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

ID و CLASS در استایل نویسی

آیدی و کلاس دو ویژگی اصلی و کاربری در استایل نویسی می باشد که با قرار دادن آنها در برچسب های HTML می توان تغییرات ظاهری مختلفی را در آنها ایجاد کرد. یکی از مواردی که باید به آن توجه داشت این است که در سند خود مجاز به استفاده از تنها یک ID همنام و برای یک عنصر هستید. یعنی نمیتوان از یک ID برای چند برچسب استفاده کرد. اما CLASS این محدودیت را نداشته و با خیال راحت می توانید در چندین برچسب بنا به نیاز از آن استفاده کنید. یکی از ویژگی های ID استفاده از آن برای آدرس دهی می باشد که در جلسات بعدی به آن خواهم پرداخت.

تعریف ID و CLASS در برچسب

آیدی و کلاس همانطور که دارای املای منحصر به خود هستند، دارای مشخصه‌ی خاصی برای استفاده در سند CSS نیز می باشند. این مشخصه ها به ترتیب برای آیدی “#” و برای کلاس “.” می باشد. که در ادامه در مورد آنها توضیح خواهم داد.

برای اینکه بخواهید به یک برچسب با استفاده از css تغییرات دلخواه خود را اعمال کنید، ابتدا باید نحوه تعریف آیدی و کلاس را در برچسب ها بیاموزید. برای اینکار در برچسب مورد نظر (در برچسب دوطرف قسمت باز برچسب مد نظر است) با نوشتن حرف کلیدی ID یا CLASS سپس قرار دادن “=” و پس از آن قرار دادن دبل کوتیشن “” آیدی یا کلاس خود را تعریف کنید. اما برای شناسایی این برچسب و اعمال تغییرات به وسیله‌ی CSS باید نامی برای آن انتخاب کرد و آن را در دبل کوتیشنی که پس از مساوی قرار داده شده وارد کرد.

مانند:

<p class="name">
این یک پاراگراف است
</p>

همانطور که در کد بالا مشاهده می کنید. ما یک برچسب پاراگراف را ایجاد کردیم تا بتوانیم به وسیله‌ی css تغییرات خود را اعمال کنیم. چنین روشی را می توان برای تمام برچسب ها مورد استفاده قرار داد.

نکته: گاهی اوقات طراح برای صرفه جویی در وقت و همچنین کدنویسی تمیز و… به جای استفاده از روش کلاس‌دهی، از نام برچسب برای ایجاد تغییرات در CSS بهره می برد.

تا به اینجا شما توانستید چگونی تعریف آیدی یا کلاس را برای برچسب ها بیاموزید. اما برای اینکه بتوانید تغییرات دلخواه خود را با استفاده از CSS به برچسب خود اعمال کنید باید با روش تعریف آیدی و کلاس در سند style.css نیز آشنا شوید. (اگر با سند style.css آشنا نیستید به جلسه قبلی رجوع کنید)

تعریف ID و CLASS در سند CSS

تعریف آیدی یا کلاس در سند CSS دارای چند نکته کلیدی است که با یادگیری آن دیگر مشکلی برای استایل نویسی حرفه‌ای نیز نخواهید داشت!

 

یک آیدی یا کلاس شامل سه قسمت:

  1. انتخابگر
  2. ویژگی
  3. مقدار

می باشد.

انتخابگر

مورد اول: همانطور که گفته شد مشخصه آیدی “#” و مشخصه کلاس “.” می باشد. این مشخصه ها در اینجا کاربرد خواهند داشت.

مورد دوم: هر آیدی یا کلاس دارای نام می باشند که در هنگام تعریف در یک برچسب به آن تعلق می گیرد.

اکنون شما قسمت اول یعنی انتخابگر را درک کردید. پس برای اینکه یک آیدی یا کلاس در سند CSS تعریف شود، ابتدا “#” یا “.” قرار می گیرد سپس نامی که برای آنها در نظر گرفته اید. حال باید از کروشه باز و بسته استفاده کنید “{ }” تمام ویژگی های مربوط به یک آیدی یا کلاس درون این کروشه ها قرار می گیرند و زمانی که خارج از آنها باشد بلااستفاده و باعث ایجاد مشکلات می شود.

ویژگی و مقدار

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

دو نکته در نوشتن ویژگی ها وجود دارد و آن استفاده از نقطه نقل و قول:” پس از نام ویژگی و نقطه ویرگول;” در انتهای دستور می باشد. همیشه باید پس از نوشتن نام ویژگی نقطه نقل و قول قرار گیرد. سپس مقدار نوشته می شود. اما قرارگیری نقطه ویرگول در انتها وابسته به دو نکته بوده، آن هم وجود بیش از یک ویزگی در یک آیدی یا کلاس. یعنی اگر تنها یک ویژگی در آیدیی یا کلاس نوشته شده باشد قرار دادن نقطه ویرگول در انتهای دستور الزامی نیست. اما اگر بیش از یک ویزگی داشته باشیم الزامی می باشد.

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

CSS چیست

Cascading Style Sheet یا CSS زبانی است که بصورت مستقل برای سبک دهی و ایجاد جلوه های مختلف بر روی عناصر موجود در html مورد استفاده قرار می گیرد.

حال برای اینکه بدانیم چگونه می توان از CSS برای زیباسازی سند خود استفاده کرد ابتدا باید با چگونگی فراخوانی آن در سند html آشنا شد. فراخوانی css به ۳ صورت انجام می پذیرد:

  1. سبک در خط (inline)
  2. سبک داخلی CSS
  3. سبک خارجی CSS

سبک در خط (Inline style)

ساده ترین راه برای استفاده از CSS قرار دادن آنها بصورت مستقیم در درون برچسب هاست. برای همین از این راه به عنوان درخط  یا  Inline یاد می شود. زیرا می توان تمام ویژگی های CSS را در درون خطوط HTML و برچسب ها مورد استفاده قرار داد. ساختار نوشتاری CSS در خط بصورت زیر است:

<p style="محل قرارگیری ویزگی های css">این یک پاراگراف است</p>

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

سبک داخلی  (Internal style sheet)

این راهکار حرفه ای تر از راهکار قبلی یعنی استفاده از CSS درخط می باشد. در این راه برای استفاده از ویژگی های CSS کافیست برچسب style درون برچسب head قرار گیرد تا بتوان از ویژگی های آن در سند HTML بهره برد.

<html>
<head>
<style>
محل قرار گیری ویژگی های css
</style>
</head>
<body>
</body>
</html>

تمام ویژگی های CSS با قرار گیری در برچسب style در مرورگر اجرا خواهد شد.

سبک خارجی (External style sheet)

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

برچسب یکطرفه link

یکی از موارد استفاده از این برچسب فراخوانی فایل CSS‌خارجی می باشد. برای اینکه بتوان یک فایل CSS را در سند HTML فراخوانی کرد به صورت زیر عمل می کنیم.

<html>
<head>
<link rel="stylesheet" type="text/css" href="filename.css">
</head>
</html>
  • rel : این کلمه مخفف relationship می باشد. از آن برای مشخص کردن ارتباط بین سند فعلی و سند لینک شده استفاده می شود.
  • type : مشخص کننده نوع فایل لینک شده می باشد.
  • href : نشانی فایل لینک شده را مشخص می کند.

ساخت سند CSS

برای این کار (در نرم افزار Notepad++) از قسمت نوار ابزار بر روی گزینه new کلیک کرده تا یک صفحه جدید گشوده شود.

سپس بدون آنکه محتوایی در آن قرار دهید از منو گزینه File و بعد بر روی Save As کلیک و در پنجره باز شده مکان ذخیره سازی سند خود را انتخاب کنید. (در اینجا من نام project را انتخاب می کنم که ار قبل ساخته بودیم) و فایل را در پوشه ذخیره کنید. نکته ای که باید به آن در زمان ذخیره سازی توجه کنید پسوند سند CSS شما می باشد. برای این کار پس از انتخاب نام برای سند خود (در اینجا من نام style را انتخاب می کنم) با قرار دادن یک نقطه “.” پس از نام، style را تایپ کرده و بر روی Save کلیک کرده تا ذخیره شود.

پس از ساخت سند، آماده می شویم برای یادگیری چگونگی کار با ویژگی های CSS که در جلسه بعدی شرح داده خواهد شد.

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

برچسب دوطرفه table

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

بصورت زیر نوشته می شود:

<table></table>

نکته: هر جدول از یک یا چند سطر (row) و سلول (cell) تشکیل شده است.

برچسب دوطرفه th

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

بصورت زیر نوشته می شود:

<table>
<th>عنوان</th>
</table>

برچسب دو طرفه tr

وقت آن رسیده تا سطرهای یک جدول را ایجاد کنید! این برچسب این امکان را فراهم می کند تا با قرار دادن هریک از آنها در جدول یک سطر اضافه شود.

بصورت زیر نوشته می شود:

<table>
<tr>ایجاد یک سطر</tr>
</table>

برچسب دوطرفه td

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

بصورت زیر نوشته می شود:

<table>
<td>ایجاد یک سلول</td>
</table>

تا به اینجا جدول ما به صورت زیر در آمده است:

<table>
<th>عنوان یک</th>
<th>عنوان دو</th>
<tr>
<td>سلول یک</td>
<td>سلول دو</td>
</tr>
</table>

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

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

<table border=1>
<th>عنوان یک</th>
<th>عنوان دو</th>
<tr>
<td>سلول یک</td>
<td>سلول دو</td>
</tr>
</table>

خروجی:

برچسب دوطرفه thead

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

اولین برچسب گروهی thead بوده که مربوط به عناوین می باشد. به وسیله این برچسب میتوان مدیریت بهتری بر روی برچسب های th داشت. برای مثال می توان با نوشتن یک ویژگی CSS آن را برای تمام برچسب های th اعمال کرد.

<table border=1>
<thead>
<th>عنوان یک</th>
<th>عنوان دو</th>
</thead>
<tr>
<td>سلول یک</td>
<td>سلول دو</td>
</tr>
</table>

برچسب دوطرفه tbody

کارکرد این برچسب نیز مانند thead است با این تفاوت که از tbody برای اثرگذاری بر روی بدنه و محتوای داخلی یک جدول استفاده می شود.

<table border=1>
<thead>
<th>عنوان یک</th>
<th>عنوان دو</th>
</thead>
<tbody>
<tr>
<td>سلول یک</td>
<td>سلول دو</td>
</tr>
</tbody>
</table>

برچسب دوطرفه tfoot

توضیح این برچسب نیز مانند دو برچسب قبلی بوده با این تفاوت که ردیف یا سطر انتهایی جدول را تحت تاثیر قرار می دهد.

<table border=1>
<thead>
<th>عنوان یک</th>
<th>عنوان دو</th>
</thead>
<tbody>
<tr>
<td>سلول یک</td>
<td>سلول دو</td>
</tr>
</tbody>
<tfoot>
<td>سلول یک</td>
<td>سلول دو</td>
</tr>
</tfoot>
</table>

نکته: برچسب های گروهی thead, tbody و tfoot زمانی قابلیت تاثیرگذاری دارند که از ویژگی ها CSS استفاده شود وگرنه هیچ تاثیری نخواهند داشت.

برچسب دوطرفه caption

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

<table border=1>
<caption>شرح جدول</caption>
<thead>
<th>عنوان یک</th>
<th>عنوان دو</th>
</thead>
<tr>
<td>سلول یک</td>
<td>سلول دو</td>
</tr>
</table>

برچسب table دارای ویژگی های مختلفی است که باعث ایجاد قابلیت هایی از جمله تغییر رنگ، اندازه و… در آن می شود البته این ویژگی ها در نسخه‌ی HTML5 پشتیبانی نمی شود. آن هم به این علت که این ویزگی ها می تواند با استفاده از CSS در جدول اعمال شود. برای همین سعی می کنم تا در جلسات مربوط به CSS درباره آنها توضیح دهم.

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

با معرفی نسخه جدید از CSS در سال ۲۰۱۱ و امکانات منحصر بفردی که در اختیار توسعه دهندگان قرار داد؛ مفهومی جدید با نام Responsive یا واکنشگرا پا به عرصه وجودی نهاد. این ویژگی این امکان را فراهم می کرد تا با استفاده از مدیاکوئری ها اندازه های مختلفی از سایت را برای دستگاه ها با رزولوشن های مختلف به نمایش بگذارند. این ویژگی که هم اکنون در بیشتر سایت ها مورد استفاده قرار می گیرد باعث می شود تا یک سایت با توجه به رزولوشن یک دستگاه تغییر وضعیت داده و ظاهری متناسب با آن دستگاه را به نمایش بگذارد.

نکته: ویژگی ریسپانسیو یا واکنشگرا در پی ایجاد انعطاف ظاهری در دستگاه های مختلف مورد استفاده قرار می گیرد.

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

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