رفتن به نوشته‌ها

دسته: طراحی تحت وب

رفع خطای Port 80 در شبیه ساز سرور

اگر به تازگی با شبیه سازهای سرور در کامپیوتر مانند: Wampserver یا xampp آشنا شده اید و یا از کاربران این نرم افزارها هستید، این آموزش در صورت بروز مشکل در فعال نشدن apache بکارتان خواهد آمد.

clearing floats چیست

شاید بارها با کلمه clearing floats یا پاکسازی شناورها در طراحی تحت وب مواجه شده باشید. اما آیا می‌دانید این روش چیست و برای چه از آن استفاده می‌شود؟ عناصری که به وسیله‌ی ویژگی float در CSS به سمت چپ یا راست شناور شده باشند به درستی نمی‌توانند ارتفاع عنصر والدی که در آن قرار دارند را افزایش دهند. برای درک بهتر کدهای زیر را مشاهده کنید:

#main_container {
 width: 400px;
 margin: 20px auto;
 border: 2px solid #CCC;
 padding: 5px;
}
.floated_box {
 float: left;
 width: 100px;
 height: 100px;
 border: 1px solid #990000;
 margin: 10px;
}
<div id="main_container">
 <p>Some content.</p>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
</div>

DIVهایی با کلاس floated_box درون یک DIV والد با شناسه main_container قرار دارند، اما همانطور که در تصویر زیر مشاهده می‌کنید، تصور می‌شود که DIVهای با کلاس floated_box خارج از عنصر والد خود قرار دارند.

 

برای برطرف کردن این مشکل یک راهکار ساده وجود دارد و آن هم استفاده از ویژگی clear در CSS است. این DIV خالی را بعد از آخرین عنصر شناور خود قرار دهید:

<div style="clear: both;"></div>

همانطور که مشاهده می‌کنید با ویژگی clear و با مقدار دهی both به آن، مشکل ارتفاع عنصر والد حل شد.

دسترسی به لوکال هاست از طریق گوشی همراه

برخی از دوستان این سوال را داشتند که چگونه می‌شود از طریق گوشی همراه خود به لوکال هاست رایانه متصل شویم؟! در این آموزش کوتاه این کار بصورت کاملا ساده بیان می شود.

نصب وب سرور مجازی

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

یافتن IP سیستم

برای اینکار از طریق منوی استارت رایانه CMD را جستجو کنید. پس از باز شدن پنجره CMD با نوشتن ipconfig اطلاعات مربوط به IP نمایش داده می‌شود. شما به اعدادی که روبروی  IPv4 Address نوشته شده است نیاز دارید.

اتصال به گوشی همراه

ابتدا مطمئن شوید که گوشی شما به شبکه‌ای که رایانه در آن مشغول بکار هست متصل شده باشد.(از طریق wifi) سپس مرورگر گوشی را باز کرده و IP بدست آمده را در آن بنویسید. مشاهده می‌کنید که گوشی به راحتی به لوکال هاست شما متصل شده است.

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

معرفی برچسب details و summary در html

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

  1. details
  2. summary

برچسب details

برچسب دوطرفه details در برگیرنده محتوای مخفی شده است.

برچسب summary

برچسب summary موجود در detail امکان نمایش عنوان عنصر مخفی شده را برعهده می گیرد.

مثال: برای اینکار ابتدا برچسب دوطرفه details، سپس عنوان عنصر برای نمایش یا مخفی کردن محتوا را در برچسب دوطرفه summary نوشته و در انتها محتوای مورد نظر خود را اضافه می کنیم.

<details> <summary> برای نمایش محتوا کلیک کنید. </summary> <p> معرفی برچسبهای details و summary در html </p> </details>

خروجی:

با کلیک بر روی عنوان، محتوای مخفی شده نمایش پیدا می کند.

ویژگی open در details

بصورت پیشفرض محتوای درون برچسب details مخفی است. برای تغییر وضعیت آن به نمایش محتوا می توان از ویژگی open در برچسب details بهره برد.

<details open> <summary> برای نمایش محتوا کلیک کنید. </summary> <p> معرفی برچسبهای details و summary در html </p> </details>

نکته: محتوای درون details صرفا متن نیست! بلکه میتوانید برچسبهای دیگر را نیز مورد استفاده قرار دهید. مانند فرم، تصویر و… حتی میتوانید از details های تودرتو نیز استفاده کنید.

 

آموزش طراحی وب – جلسه دهم – ویژگی شناوری

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

ویژگی شناوری چیست

float یا ویژگی شناوری خاصیتی در CSS است که مشخص می کند عنصر مورد نظر در کدام جهت (چپ یا راست) قرار بگیرد.

برای ساده سازی این تعریف به این مثال توجه کنید: فرض کنید برای طراحی دو ستون در یک صفحه نیاز دارید که هر کدام را در سمتی از صفحه قرار دهید. یکی در سمت چپ و دیگری در سمت راست. برای اینکه ستونهای مورد نظر در یکی از این جهت ها قرار بگیرد CSS ویژگی float را در دسترس طراح قرار داده تا با مقداردهی به آن جهت قرارگیری عنصر را تعیین کند.

float دارای مقادیری همچون:

  • none : عنصر مورد نظر شناوری ندارد.
  • left : عنصر در سمت چپ شناور است.
  • right : عنصر در سمت راست شناور است.
  • initial : شناوری پیشفرض.
  • inherit : دریافت شناوری از عنصر والد.

مثال:

برای اینکه ستون های تصویر زیر را در جهت مناسبی که برایش تعیین شده قرار دهیم باید به صورت زیر عمل کنیم:

در سند html به این صورت عمل می کنیم:

<html>
<body>
<div class="left-block"></div>
<div class="right-block"></div>
</body>
</html>

در سند CSS بصورت زیر عمل می کنیم:

.left-block{
	float:left;
	border: 2px solid red;
	width:200px;
	height:400px;
}
.right-block{
	float:right;
	border: 2px solid red;
	width:200px;
	height:400px;
}

در سند HTML چه خبر؟!

در سند html از دو برچسب div استفاده شد یکی برای ستون سمت راست و دیگری برای ستون سمت چپ. به هرکدام یک کلاس اختصاص دادیم تا بتوانیم از طریق ویزگی های CSS تغییرات را بر روی آنها اعمال کنیم.

برای ایجاد عناصر مورد نظر می توان از برچسب دوطرفه div استفاده کرد.

در سند CSS چه خبر؟!

در سند CSS چون از کلاس برای برچسب ها استفاده کردیم پس ابتدا یک نقطه قرار داده و سپس نام کلاس را نوشتیم. در ابتدای ویزگی ها مشخص کردیم که هریک از ستون در کدام سمت قرار بگیرد. برای همین از ویزگی شناوری با مقداردهی left و right استفاده کردیم. در خط دوم از ویژگی border برای قرار دادن یک مرز و تفکیک ستون ها از یکدیگر استفاده شد. که قطر آن برابر شد با ۲px و مقدار برابر با solid (در جلسات بعدی توضیح داده خواهد شد) قرار گرفت و در انتها رنگ border مشخص شد. همچنین برای هریک از ستون ها عرض و ارتفاع در نظر گرفته شد که با ویزگی های height و width مشخص هستند. بدین صورت توانستیم با یادگیری ویژگی شناوری عناصر خود را در سمت راست یا چپ ثابت کنیم.

ویرایشگرهای قدرتمند برای کدنویس ها

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

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

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 انجام می دهد تغییر رنگ است. برای مثال اگر برچسب پاراگراف دارای چنین ویژگی باشد، متون موجود در آن به رنگ سبز خواهند بود.

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