این محتوا هم به صورت مقاله هم به صورت ویدیویی در دسترس شما عزیزان قرار گرفته است. در صورت تمایل به مشاهده‌ی ویدیو، ابتدا فیلتر‌شکن خود را روشن نمایید و سپس بر روی عکس زیر کلیک کنید.
در صورتی هم که تمایل به مطالعه‌ی مطلب دارید، تا انتهای این صفحه همراه ما باشید.
Watch on YouTubeسلام به همه دوستان عزیز.
من سجاد سعادت هستم و از وب‌کاستر آکادمی با قسمت سوم از دوره‌ی آموزشی طراحی وب‌سایت با وردپرس در خدمت شما هستم.
در قسمت‌های قبلی، درباره‌ی مفاهیم اولیه صحبت کردیم. حالا در این بخش قصد داریم به سراغ یک مفهوم بسیار مهم دیگر برویم که مستقیماً با طراحی وب‌سایت در ارتباط است.
چرا مفاهیم پایه اهمیت دارند؟
شاید شما مشتاق باشید که خیلی سریع وارد بخش عملی طراحی شوید. اما قبل از هر چیزی، باید با مفاهیم پایه و اصطلاحات کلیدی آشنا شوید. درک این مفاهیم به شما کمک می‌کند در مراحل بعدی پروژه‌ها، مسیر را با درک بهتر و تسلط بیشتری ادامه دهید. پس لطفاً صبر کنید و همراه من باشید تا این بخش را هم با دقت یاد بگیریم.
فارغ از این که با وردپرس کار کنید یا با هر تکنولوژی دیگه، طراحی وب‌سایت از دو بخش تشکیل شده است:
- فرانت‌اند (Front-end)
- بک‌اند (Back-end)
در این مطلب تمرکز ما روی بخش فرانت‌اند است.
فرانت‌اند چیست؟
طراحی فرانت‌اند همان چیزی است که کاربر در مرورگر خود می‌بیند و با آن تعامل دارد. زمانی که شما وارد یک وب‌سایت می‌شوید – چه از طریق اپلیکیشن و چه از طریق مرورگر – در واقع دارید با لایه‌ی فرانت‌اند آن وب‌سایت کار می‌کنید.
فرانت‌اند دقیقا همان خروجی نهایی است که برای کاربران قابل مشاهده و استفاده است. اما این خروجی چگونه ساخته می‌شود؟ در ادامه، با زبان‌ها و تکنولوژی‌های مورد استفاده در این بخش آشنا می‌شویم.
ابزارهای فرانت‌اند
- HTML
زبان HTML ساختار اصلی صفحه را مشخص می‌کند و به کمک آن می‌توانیم تعیین کنیم که در صفحه چه اجزایی مثل منو، اسلایدر، تصاویر، متن، فوتر و … وجود داشته باشند. - CSS
HTML به تنهایی جلوه‌ی بصری ندارد. در اینجا CSS وارد عمل می‌شود تا رنگ، اندازه، فونت، فاصله‌ها و جلوه‌های ظاهری را به صفحه اضافه کند. - Responsive Design
یکی از ویژگی‌های مهم در CSS، طراحی ریسپانسیو است. یعنی وب‌سایت بتواند خودش را با اندازه‌ي صفحه‌ی نمایش دستگاه‌های مختلف (موبایل، تبلت، لپ‌تاپ) هماهنگ کند و همیشه کاربر تجربه‌ی از تعامل با وب‌سایت مناسبی داشته باشد. - JavaScript
جاوااسکریپت یک زبان برنامه‌نویسی قدرتمند است که تعامل و پویایی را به صفحه‌ی وب اضافه می‌کند. مثلاً با جاوااسکریپت می‌توان اسلایدر ساخت، افکت‌های بصری اجرا کرد و یا با کاربر تعامل برقرار نمود.
ارتباط وردپرس با فرانت‌اند و بک‌اند
در این دوره، هدف ما آموزش طراحی سایت وردپرس است. وردپرس هر دو لایه‌ی فرانت‌اند و بک‌اند را در دل خود دارد. بنابراین لازم است به عنوان کسی که قصد دارید با وردپرس کار کنید، درک کلی‌ای از این لایه‌ها و تکنولوژی‌های پشت آن‌ها داشته باشید.
حتی اگر قصد ندارید مستقیماً درگیر کدنویسی فرانت‌اند یا بک‌اند شوید، دانستن این مفاهیم باعث می‌شود در پروژه‌های بعدی بتوانید بهتر تصمیم بگیرید، مسیر درست‌تری انتخاب کنید و با توسعه‌دهندگان تعامل مؤثرتری داشته باشید.
جمع‌بندی
ما در این مقاله با مفاهیم پایه‌ای فرانت‌اند آشنا شدیم و دیدیم که چگونه HTML، CSS و JavaScript با یکدیگر ترکیب می‌شوند تا بخش قابل مشاهده و تعاملی یک وب‌سایت را بسازند.
هدف این بود که بدون ورود به جزئیات فنی، درک مناسبی از این لایه داشته باشیم. اگر سوالی درباره این بخش دارید، می‌توانید در بخش نظرات همین صفحه یا در بخش قسمت کامنت‌های یوتیوب این آموزش بنویسید. تمام کامنت‌ها در اسرع وقت پاسخ داده خواهند شد.
ممنون از همراهی شما. امیدوارم این مطلب برایتان مفید بوده باشد.