تفاوت IDE و Text Editor و هر آن چیزی که باید درباره‌ی آن‌ها بدانید!

تفاوت IDE و Text Editor

برای کسی که تازه وارد حیطه‌ی برنامه نویسی شده است، یکی از مهم‌ترین تصمیم‌هایی که باید بگیرد این است که یک محیط توسعه برای خود انتخاب کند. میخواهیم درباره‌ی تفاوت IDE و Text Editor ها صحبت کنیم، مسئله ای که میتواند دغدغه هر برنامه نویس تازه کار باشد.

یک برنامه نویس تازه کار وقتی میخواهد اقدام به انتخاب یک محیط توسعه کند، با دو مفهموم متفاوت روبرو میشود، IDE ها و Text Editor ها. هرکدام از این دو،‌ مزایا، معایب و کارکردهای خاص خودشان را دارند و با توجه به کاری که میخواهیم انجام دهیم، باید یکی از آن‌ها ( و یا شاید هر دوی آن‌ها را) انتخاب کنیم و همینطور تفاوت IDE و Text Editor ها را درک کنیم.

در این مقاله میخواهیم درباره‌ی تفاوت IDE و Text Editor ها صحبت کنیم و هر آن چیزی که درباره‌ی تفاوت IDE و Text Editor را با هم مرور کنیم. همینطور میخواهیم بدانیم که آیا میشود با یک جفت دمپایی ساده، قله اورست را فتح کرد یا خیر!

 

IDE چیست؟

IDE مخفف Integrated Development Environment هست که میتوانیم آن‌را محیط توسعه یکپارچه ترجمه کنیم. میخواهیم کمی درباره‌ی مفهوم این عبارت صحبت کنیم.

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

نکته‌ای که در خصوص IDE ها وجود دارد این است که هر IDE مخصوص یک زبان برنامه نویسی خاص یا یک حیطه‌ی خاص از برنامه نویسی است. برای مثال شما نمیتوانید یک IDE داشته باشید و با آن هم طراحی وب کنید، هم اپلیکیشن های اندروید بنویسید و هم کدهای JAVA خود را اجرا کنید.

IDE ها بصورت خاص برای زبان ها یا حیطه های برنامه نویسی خاص ساخته شده‌اند و در آن حیطه‌ی خاص، تمام آن چیزی که برنامه نویس به آن‌ها نیاز دارد را در اختیار او قرار میدهند.

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

برای مثال، یک طراح وب هنگام کار، به موارد زیر ممکن است نیاز داشته باشد:

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

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

 

چند نمونه از IDE های معروف

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

  • PhpStorm: یک IDE قدرتمند برای نوشتن کدهای PHP (میتوان از آن برای HTML-CSS-JavaScript هم استفاده کرد)
  • WebStorm: یک IDE قدرتمند برای طراحان وب
  • Eclipse: یک IDE قدرتمند برای نوشتن کدهای Java, C, C++, Python
  • XCode: یک IDE قدرتمند مخصوص توسعه اپ ها برای IOS و Mac
  • Android Studio: یک IDE قدرتمد مخصوص توسعه‌ی اپ های سیستم عامل اندرید

همانطور که در لیست بالا دیدید، هر IDE برای یک کار خاص طراحی و توسعه داده شده است. برای مثال شما نمیتوانید از Android Studio برای نوشتن اپ‌هایی برای سیستم عامل IOS استفاده کنید. همینطور از Eclipse نمیتوانید برای طراحی وب با HTML-CSS استفاده کنید. در واقع میتوان گفت:

 

هر IDE را بهر کاری ساختند !

 

چند مورد از مهم‌ترین ویژگی‌هایی که IDE ها دارند

IDE ها بصورت پیشفرض ویژگی های بسیاری دارند که میتوانید از آن‌ها استفاده کنید:

  • رنگی کردن قسمت های مختلف کد ها بسته به زبان برنامه نویسی
  • امکان دیباگ کردن و رفع مشکلات کدها
  • مرتب سازی کدها و تمیز کردن آن‌ها
  • اخطار به خطاهای املایی و نگارشی در متن هایی که مینویسید
  • امکان اتصال به FTP و ویرایش کدهای آنلاین
  • امکان کار با Git
  • امکان کار با Command Line

ویژگی های بسیاری در IDE ها بصورت پیشفرض وجود دارد که کار شما را بسیار راحت تر و سریع تر میکند. در ادامه میگوییم که البته این به این معنا نیست که Text Editor ها این ویژگی ها را ندارند. Text Editor ها بصورت پیشفرض یک نرم افزار ویرایش متن خام هستند که با نصب پکیج های مختلف، میتوانید امکانات مختلف را به آن‌ها اضافه کنید.

 

Text Editor چیست؟

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

 

مهم‌ترین مزیت Text Editor ها این است که بخاطر سبک بودن و نداشتن امکانات زیاد، سرعت بسیار بالایی دارند و برای کارهایی که میخواهید سریع انجام دهید مناسب هستند

البته Text Editor ها مزایا و معایب مختلفی دارد که در ادامه درباره‌ی آن‌ها صحبت میکنیم.

 

تفاوت IDE و Text Editor

 

چند نمونه از Text Editor های معروف

Text Editor های رایگان و غیر رایگان زیادی وجود دارند که میتوان از آن‌ها استفاده کرد. از معروف ترین Text Editor ها میتوان به موارد زیر اشاره کرد:

  • Sublime Text (غیر رایگان)
  • Atom (رایگان)
  • Visual Studio Code (رایگان)
  • ++ Notepad (رایگان)

هرکدام از این Text Editor ها ویژگی‌ها و طرفدارهای خاص خودشان را دارند. اگر میخواهید یک Text Editor را انتخاب کنید، باید ببینید با کدام یک از آن‌ها راحت تر هستید. در ادامه در خصوص روش انتخاب یک IDE یا Text Editor صحبت میکنیم.

 

چرا باید/نباید از IDE ها استفاده کنیم؟

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

در خصوص مزایای IDE ها میتوان به موارد زیر اشاره کرد:

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

 

IDE ها معایبی هم دارند که در زیر به آن‌ها اشاره میکنیم:

  • IDE ها معمولا حجم بسیار بالایی برای دانلود و نصب دارند که این حجم حداقل از ۱۰۰ مگ شروع میشود. در حالی شما میتوانید Text Editor ها را معمولا با حجم های بسیار کمی دانلود و نصب کنید
  • IDE ها هنگام استفاده منابع زیادی از سیستم شما را درگیر میکنند و به Ram زیادی برای کار نیاز دارند.
  • IDE ها معمولا نرم افزارهای سنگینی هستند و برای اجرای اولیه، نیاز به چندین ثانیه زمان برای اجرا دارند (من روی سیستم عامل مک، PhpStorm را حدودا ۲۰ ثانیه طول میکشد با بصورت کامل و آماده داشته باشم!)
  • IDE ها معمولا رایگان نیستند و برای استفاده از آن‌ها یا باید چندصد دلار هزینه کنید و یا ار روش های غیرقانونی مثل کرک کردن استفاده کنید.

همانطور که در بالا مشاهده کردید، IDE ها مزایا و معایب خاص خودشان را دارند. ادامه‌ی مقاله را هم مطالعه کنید تا بتوانید یک انتخاب هوشمندانه داشته باشید و متوجه تفاوت IDE و Text Editor ها شوید.

 

چرا باید/نباید از Text Editor ها استفاده کنیم؟

همانند IDE ها، Text Editor ها هم مزایا و معایبی دارند که در اینجا میخواهیم به آن‌ها اشاره کنیم.

مزایای Text Editor ها :

  • اکثر Text Editor ها رایگان هستند برای استفاده از آن‌ها نیاز نیست هیچ هزینه‌ای پرداخت کنید.
  • Text Editor ها بسیار سبک و سریع هستند و منابع زیادی از سیستم و Ram شما را اشغال نمیکنند.
  • یک Text Editor در کندترین حالت، زیر ۵ ثانیه بصورت کامل لود میشود و قابل استفاده است.

معایب Text Editor ها:

  • Text Editor ها در قدم اول فقط یک ویرایشگر متن ساده هستند. چیزی که به Text Editor ها قدرت میدهد، پکیج هایی است که روی آن‌ها نصب میکنیم. یکی از معایب Text Editor ها این است که برای هرکاری باید پکیج مربوط به آن را پیدا کنیم، نصب کنیم و تنظیمات مربوط به آن‌را انجام دهیم ( که اینکار به شخصه از حوصله‌ی من خارج است)
  • Text Editor ها در پیدا کردن مشکلات کد و دیباگ کردن، هرچقدر هم قوی باشند،‌ بازهم به پای IDE ها نمیرسند. یکی از بزرگترین مزایای IDE ها امکانات دیباگ کردن آن‌هاست.

 

تفاوت IDE و Text Editor

مشکلات زبان فارسی در IDE و Text Editor ها

مفهوم تفاوت IDE و Text Editor ها برای فارسی زبانان، با بقیه جهان متفاوت است. زیرا به یکی از چیزهایی که ما در کدنویسی های خودمان نیاز داریم، قابلیت پشتیبانی از زبان فارسی است. هرچقدر هم یک IDE یا Text Editor خوب و حرفه‌ای و عالی باشد، اگر از زبان فارسی پشتیبانی نکند، زیاد نمیتواند برای ما مفید باشد.

برای مثال در دنیا Sublime  را به عنوان یک Text Editor بسیار خوب و حرفه ای میشناسند، اما Sublime هرچقدر هم حرفه‌ای و عالی باشد، چون از زبان فارسی پشتیبانی نمیکند، برای کسانی که با حروف فارسی در پروژه‌هایشان سر و کار دارند به درد نمیخورد.

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

چون من یک طراح و برنامه نویس وب هستم، فقط Text Editor ها و IDE های حیطه‌ی تخصصی خود را به خوبی میشناسم و از  Text Editor ها و IDE های دیگر اطلاعی ندارم. در Text Editor ها و IDE های دنیای وب، پشتیبانی از زبان فارسی به شکل زیر است:

  • Sublime بصورت کلی از زبان فارسی پشتیبانی نمیکند و حروف فارسی را بصورت برعکس نشان میدهد
  • Atom حروف فارسی را به خوبی نشان میدهد، اما هنگام انتخاب یک بخش از حروف فارسی به مشکل برمیخورید و نمیتوانید با موس یک قسمت از متن را انتخاب (Select) کنید.
  • Phpstorm تنها IDE است که نسبت به بقیه Text Editor ها و IDE ها، پشتیبانی بهتری از زبان فارسی دارد. در نسخه 2018 این نرم افزار، شما میتوانید بدون هیچ مشکلی حروف فارسی را بنویسید، بخوانید و اگر نیاز بود آن‌را ویرایش کنید.  همینطور هیچ مشکلی با انتخاب و Select کردن حروف فارسی ندارید.

 

تفاوت IDE و Text Editor

فتح قله اِوِرِست، با دمپایی!

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

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

البته این حرف به این معنا نیست که نمیتوانید پروژه های بزرگ با Text Editor ها به پایان برسانید. شما میتوانید Text Editor ها را با پکیج هایی که روی آن‌ها نصب میکنید، بسیار قدرتمند و حرفه‌ای کنید. اما بارها شده است که از دوستان برنامه نویسم، افرادی دیده ام که با Text Editor و یا کدهای خود ساعت‌ها و روزهاست که درگیر یک مشکل هستند، در صورتی که همان کار را یک IDE برای من بسیار سریع‌تر و حرفه‌ای تر انجام میدهد.

 

تجربه‌ی شخصی من در خصوص تفاوت IDE و Text Editor

بارها شده است که تبلیغ و تعریف های Text Editor ها شنیده‌ام و سعی کرده‌ام که به آن‌ها مهاجرت کنم و یک Text Editor را برای کارهای همیشگی خودم انتخاب کنم. در این انواع تست هایی که داشتم، Text Editor های Sublime, atom, visual studio و… را بررسی کردم و مدتی با آن‌ها کار کردم. اما بعد از مدتی دست از پا درازتر به سمت PhpStorm برگشتم و نتوانستم با Text Editor ها هیچ رابطه ای برقرار کنم.

تفاوت IDE و Text Editor

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

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

 

 

کدام IDE یا Text Editor را انتخاب کنیم؟ خود خواه باشید!

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

Text Editor ها و IDE های معروف و مختلف را نصب کنید، تست کنید، مدتی با آ‌ن کار کنید و اگر احساس راحتی نکردید،‌ حذف کنید. همه چیز به شما بستگی دارد. ببینید که احساستان نسبت به کدام Text Editor یا IDE خوب است. به هرکدام احساس خوبی داشتید و با آن راحت‌تر بودید، شروع به استفاده از آن‌ کنید.

شاید یک Text Editor برای من اصلا دوست داشتنی و راحت نباشد، اما شما آن‌را نصب کنید و از کار با آن لذت ببرید. همه چیز بستگی به خودتان دارد. فقط کافی است احساستان را دنبال کنید.

اما این نکته را مدنظر داشته باشید که هر Text Editor یا IDE را که انتخاب میکنید، باید فرایند کاری شما را سریع و لذت بخش کند. اگر میتوانید کارتان را با یک Text Editor یا IDE خاص بهتر انجام دهید، سعی کنید از آن استفاده کنید.

 

امتحان کنید، دوست نداشتید، تغییر دهید

مهم‌ترین چیز در بحث انتخاب یک موضوع تست کردن است. همیشه وقتی گزینه‌های زیادی را برای انتخاب دارید، شروع به تست کردن کنید.

تست کردن به شما تجربه اضافه میکند. ممکن است برای انتخاب یک Text Editor یا IDE مجبور باشید چندین گزینه را نصب و حذف کنید تا نهایتا آن چیزی را که میخواهید پیدا کنید.

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

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

 

حتما به یک Text Editor تسلط داشته باشید

نکته‌ی مهمی که در خصوص طراحان و برنامه نویسان وب وجود دارد این است که حداقل باید با یک Text Editor آشنایی خوبی داشته باشند. IDE ها چون نرم افزارهای کاملی هستند، معمولا برای اجرا شدن به چندین ثانیه (یا دقیقه،‌ بسته به قدرت سیستم شما) نیاز به زمان برای اجرا دارند. ممکن است شما بخواهید یک کد یا بخشی از آن را خیلی سریع اجرا و ویرایش کنید. در این مواقع نیاز به یک Text Editor دارید که بتوانید سریع آن کار را انجام دهید. چون Text Editor ها خیلی سریع هستند و میتوانند در چند ثانیه بصورت کامل باز و آماده استفاده شوند. سرعت در اجرا یکی از موارد مهم در تفاوت IDE و Text Editor می‌باشد.

با اینکه IDE اصلی من PhpStorm است، اما همیشه Sublime و Atom را دم دستم دارم که اگر بخواهم تکه کدی را خیلی سریع مشاهده یا ویرایش کنم، از آن‌ها استفاده کنم.

 

آموزش کامل و رایگان PhpStorm

IDE مورد علاقه‌ی ما در زنبیل PhpStorm میباشد و در همه‌ی فایل ها و دوره‌های آموزشی از آن استفاده میکنیم. برای همین یک آموزش کامل نصب و کار با PhpStorm را تهیه کرده‌ایم که برای شروع می‌تواند برای شما بسیار مفید باشد.

 

تفاوت div و span در طراحی وب

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



دانلود فیلم آموزش تفاوت div و span در طراحی وب – حجم 22 مگ

[quote font_size=”14″ bgcolor=”#” color=”#000″ bcolor=”#” arrow=”no”]فایل ویدئویی آموزشی و متن زیر، دقیقا یک محتوا را توضیح میدهند. ولی توضیحات فایل‌ ویدئویی جامع‌تر و دقیق‌تر می‌باشد. از هرکدام که راحت تر هستید برای یادگیری‌ استفاده کنید و لذت ببرید :)[/quote]

تفاوت div و span در طراحی وب

شاید برایتان سوال باشد که چه زمان هایی باید از تگ div و چه زمان هایی باید از تگ span  استفاده کنیم. در این بخش به بررسی این موضوع میپردازیم و میفهمیم که کاربرد و تفاوت div و span در دنیای طراحی وب چیست؟

تفاوت المان های inline و block

در دنیای طراحی وب ما با دو نوع از المان ها همیشه سر و کار داریم:

  1. المان های in-line
  2. المان های block

المان های in-line المان هایی هستند که اگر قبل و بعد از آن ها متنی قرار دهیم، تمام آن متن را در یک خط قرار میدهند. مثل تگ span.

اما المان های block به این صورت هستند که اگر قبل و بعد از آن‌ ها متنی قرار دهیم، آن محتوایی که بین آن تگ block نوشته شده است، برای ما در یک خط جدید آورده میشود. مثل تگ div, p, h1, h2 و… .

در تصویر زیر و همانطور در فیلم آموزشی بالا این موضوع بهتر توضیح داده شده است:

تفاوت div و span

کاربرد تگ div

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

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

تفاوت div و span

کاربرد تگ span

اما از تگ span زمانی استفاده میشود که بخواهیم به یک قسمت خاص از متن،‌ یک استایل خاص بدهیم.

برای مثال وقتی که بخواهیم در متن فوتر، اسم کسب و کارمان را با فونت و شکلی متفاوت داشته باشیم، میتوانیم از تگ span استفاده کنیم و نهایتا با دادن استایل های css به آن تگ span، ظاهری متفاوت را برای آن طراحی کنیم.

مانند تصویر زیر که نوشته «مرکز آموزشی زنبیل» را داخل یک تگ span قرار داده ایم و سپس به آن استایل متفاوت داده‌ایم تا به شکل دیگر، نمایش داده شود:

تفاوت div و span

 

تفاوت jpg و png در طراحی وب

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

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

همینطور نحوه پیدا کردن و دانلود این ۲ گروه از تصاویر را هم یاد میگیریم.


دانلود فیلم آموزش تفاوت jpg و png در طراحی وب – حجم 24 مگ

[quote font_size=”18″ bgcolor=”#” color=”#000″ bcolor=”#” arrow=”no”]فایل ویدئویی آموزشی و متن زیر، دقیقا یک محتوا را توضیح میدهند. از هرکدام که راحت تر هستید برای یادگیری‌تان استفاده کنید و لذت ببرید :)[/quote]

تفاوت jpg و png در طراحی وب

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

تصاویر jpg

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

تصویر یک خودرو، با پس زمینه سفید رنگ که روی پس زمینه‌ی آبی رنگ قرار گرفته است.

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

تفاوت jpg و png در طراحی وب

اگر میخواهید درباره‌ی طراحی و برنامه نویسی و روش تبدیل شدن به یک برنامه نویس حرفه‌ای بیشتر بدانید، یک هدیه فوق العاده برای شما دارم:

[mailerlite_form form_id=3]

تصاویر png

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

تفاوت jpg و png در طراحی وب دقیقا همین مورد است. در جاهایی که نخواهیم تصویر ما دارای یک پس زمینه باشد، از یک تصویر با فرمت png و پس زمینه شفاف استفاده میکنیم.

[quote font_size=”18″ bgcolor=”#” color=”#000″ bcolor=”#” arrow=”no”]البته این موضوع به این معنا نیست که تمام تصاویر png دارای این خاصیت هستند. بلکه فقط تصاویری این خاصیت را دارند که دو شرط داشته باشند: ۱- فرمت آن‌ها png باشد ۲- پس زمینه آن‌ها شفاف باشد[/quote]

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

تفاوت jpg و png در طراحی وب

نحوه‌ی دانلود تصاویر png و jpg

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

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

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

 

تفاوت jpg و png در طراحی وب

انتخاب بهترین رنگ در طراحی‌وب

هميشه يكي از مشكلاتي كه هر طراح وب با آن مواجه است مشكل انتخاب رنگ براي المان‌هاي طراحي‌اش است. اينكه رنگ لينك‌ها، دكمه‌ها، متن‌ها، بخش‌هاي مختلف سايت را چه چيزي قرار دهيم تاثير بسيار زيادي بر روي نظر كاربر نسبت به طرح ما ميگذارد. هرچه رنگ‌هاي انتخاب ما حرفه‌اي تر و قشنگ تر باشند و با فكر بيشتري طبق استانداردها انتخاب شوند كاربر حس بهتري به طراحي ما پيدا ميكند و ارتباط بهتري با آن ميگيرد.

برعكس اگر از رنگ‌هاي غير حرفه‌اي استفاده كنيم چشم كاربر به زودي خسته ميشود و صفحه‌ي سايت ما را فورا ميبندد.

در اين آموزش باهم نحوه‌ي انتخاب بهترين رنگ‌ها را ياد ميگيريم و با 3 سايت فوق‌العاده كه در انتخاب رنگ‌ها به ما كمك ميكنند آشنا مي‌شويم.

دانلود فيلم آموزشي با كيفيت بالا و حجم 11 مگ

سايت‌هاي براي انتخاب بهترين رنگ‌ها

براي راهنمايي گرفتن درباره‌ي بهترين رنگ‌ها ميتوانيد از اين سه سايت فوق‌العاده استفاده كنيد (در فيلم آموزشي بالا بيشتر درباره‌ي آن‌ها توضيح داده‌ايم) :

flatuicolors.com
flatcolors.net
flatcolorsui.com

تفاوت بین Class و ID در طراحی وب با HTML و CSS

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

برای این آموزش هم فایل ویدئویی ضبط شده و هم متن آن در زیر قابل دریافت است. اگر میتوانید فیلم آموزشی را دانلود و مشاهد کنید و اگر امکان این کار را ندارید از آموزش متنی لذت ببرید.

ID ها و Class ها مانند قلاب عمل میکنند

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

برای مثال فرض کنید شما در صفحه‌ی وب خودتان چندین div دارید که یکی برای بخش محتوای اصلی، یکی برای منوی کناری، یکی برای منوی بالایی و دیگری برای قسمت پایینی سایت (Footer) است. حالا اگر شما بخواهید هر کدام از این قسمت‌ها را بصورت خاص و جداگانه با css استایل دهی کنید چاره‌ی کار دقیقا همین است که با id ها و class ها اینکار را انجام دهید.

بصورت خلاصه id ها و class ها به ما کمک میکنند که یک المان را بصورت کاملا خاص هدف گیری کنیم و آن را به قلاب بیندازیم و بعد با استفاده از css تغییرات مورد نظرمان را روی آن اعمال کنیم. سوالی که پیش می‌آید این است که تفاوت بین id ها و class ها چیست؟ در ادامه به این سوال میپردازیم.

ساخت فروشگاه اینترنتی با php

 ID ها منحصر به فرد هستند

  • هر المان فقط میتواند یک id داشته باشد.
  • هر صفحه‌ی وب فقط میتواند یک المان با آن ایدی داشته باشد.

برای مثال اگر برای منوی کناری خودتان از کد <“div id=”sidebar>  استفاده کنید دیگر نمتوانید در جایی دیگر این id را به کار بگیرید و اینجا تنها جایی است که شما باید از “id=”sidebar استفاده کنید.

CLass ها منحصر به فرد نیستند

  • شما میتوانید یک class را روی چندین المان استفاده کنید.
  • شما میتوانید چندین class را برای یک المان تعیین کنید.

زمانی که میخواهید یک استایل خاص را روی چندین المان تکرار کنید باید از class ها استفاده کنید. برای مثال شما در کدتان چندین جا مجبور میشوید یک استایل خاص را به یک تکه از متن بدهید.برای مثال در جایی میخواهید آن متن را به این شکل کلفت و Bold کنید  و جاهایی هم میخواهید علاوه بر Bold بودن رنگ آن آبی هم باشد. در کد زیر در خط اول میخواهیم یک متن ساده داشته باشیم، پس هیچ class خاصی به آن اختصاص نمیدهیم. در خط دوم فقط میخواهیم یک متن کلفت داشته باشیم، به همین دلیل class آنرا برابر bold و در خط سوم چون میخواهیم متن‌مان هم کلفت و هم آبی باشد مقدار class آن را برابر دو مقدار bold و blue-text قرار میدهیم و این دو را با یک فاصله (space) از هم جدا میکنیم.

<div>این یک متن عادی است</div>
<div class="bold">این یک متن کلفت است</div>
<div class="bold blue-text">این یک متن کلفت و آبی رنگ است</div>

و حالا میرویم و در css این کدها را برای یک متن کلفت و یک متن آبی رنگ مینویسیم :

.bold {
    font-weight: bold;
}

.blue-text {
    color: blue;
}

از این به بعد در هرجای کدمان بخواهیم یک متن کلفت داشته باشیم به یک المان class=bold و هر جا بخواهیم یک متن آبی رنگ داشته باشیم به یک المان class=blue-text و هرجا که هردوی این‌ها را باهم بخواهیم به آن المان هر دوی این class ها را با یک فاصله میدهیم. حاصل کد بالا این شد:

class-id-1

 

ساخت فروشگاه اینترنتی با php

طراحی یکسان در مرورگرهای مختلف با CSS Reset ها

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

dl-btnدانلود فیلم آموزشی معرفی و کار با CSS Reset ها با کیفیت بالا (با حجم 15 مگ)dl-btn
dl-btnدانلود فایل reset.cssdl-btn

آموزش متنی

برای کار با CSS Reset ها فقط کافی است کدهای CSS Reset  را از لینک بالا دانلود کنید و آنرا با دستور import@ در اول فایل CSS اصلی خودتان لود کنید :

@import "reset.css";

CSS Reset خودتان را همچنین میتوانید در اول فایل HTML خود با دستور link لود کنید ولی در دنیای طراحان وب مرسوم است که CSS Reset خود را در فایلی جداگانه با اسم reset.css ذخیره میکنند و بعد آن فایل را در ابتدای فایل استایل اصلی خودشان با دستور بالا وارد میکنند.

توجه کنید که شما میتوانید CSS Reset را با توجه به نیاز و پروژه خودتان دست‌کاری کنید و قسمت‌هایی از آن که کار شما را خراب میکنند حذف و یا قسمت‌های جدید که کار شما را توسعه می‌دهند به آن اضافه کنید.