درباره این دوره
Front end چیست؟
فرانت اند یا Front End، به بخش قابل مشاهدهی یک وب سایت یا نرم افزار توسط کاربران میگویند. فرانت اند، کدهای غیر قابل فهم برای کاربران را در قالب ظاهری گرافیکی و بصری به آنها نمایش میدهد تا بتوانند به راحتی از بخشهای مختلف سایت استفاده کنند. در این بخش، فرمهای ورودی اطلاعات، صداها، تصاویر، ویدئوها و به صورت کلی هر چیز دیگری که برای کاربر قابل درک باشد، قرار میگیرد.
فرانت اند به دو بخش اصلی طراحی و توسعه رابط کاربری تقسیم میشود. در بخش طراحی، طراحان با نرم افزارهای گرافیکی مانند فتوشاپ، ادوبی ایکس دی، فیگما و… ظاهر سایت را طراحی میکنند. اما بخش توسعهی رابط کاربری مربوط به پیاده سازی ظاهر سایت در قالب کدهای HTML ،CSSو جاوا اسکریپت است. بخش قابل مشاهده سایت برای کاربران در سمت فرانت را سمت کاربر یا Client Side مینامند. بنابراین کدهای نوشته شده در سمت فرانت اند، در مرورگر کاربر پردازش و اجرا میشوند. یعنی کاربر به راحتی به این کدها دسترسی مستقیم دارد و میتواند آنها را مشاهده کند. فرانت اند با بخش بک اند در ارتباط مستقیم است و بر روی تجربه کاربران هنگام استفاده از محصول تاثیر بسیاری میگذارد.
فرانت اند یا Front End، به بخش قابل مشاهدهی یک وب سایت یا نرم افزار توسط کاربران میگویند. فرانت اند، کدهای غیر قابل فهم برای کاربران را در قالب ظاهری گرافیکی و بصری به آنها نمایش میدهد تا بتوانند به راحتی از بخشهای مختلف سایت استفاده کنند. در این بخش، فرمهای ورودی اطلاعات، صداها، تصاویر، ویدئوها و به صورت کلی هر چیز دیگری که برای کاربر قابل درک باشد، قرار میگیرد.
فرانت اند به دو بخش اصلی طراحی و توسعه رابط کاربری تقسیم میشود. در بخش طراحی، طراحان با نرم افزارهای گرافیکی مانند فتوشاپ، ادوبی ایکس دی، فیگما و… ظاهر سایت را طراحی میکنند. اما بخش توسعهی رابط کاربری مربوط به پیاده سازی ظاهر سایت در قالب کدهای HTML ،CSSو جاوا اسکریپت است. بخش قابل مشاهده سایت برای کاربران در سمت فرانت را سمت کاربر یا Client Side مینامند. بنابراین کدهای نوشته شده در سمت فرانت اند، در مرورگر کاربر پردازش و اجرا میشوند. یعنی کاربر به راحتی به این کدها دسترسی مستقیم دارد و میتواند آنها را مشاهده کند. فرانت اند با بخش بک اند در ارتباط مستقیم است و بر روی تجربه کاربران هنگام استفاده از محصول تاثیر بسیاری میگذارد.
در این مبحث قراره با هم مراحل ابتدایی و مقدماتی html-css رو یاد بگیریم .
زبان HTML
زبان HTML یک زبان برنامه نویسی نیست بلکه یک زبان نشانه گذاری است که به عنوان هسته و بدنه اصلی صفحات وب به حساب میآید. منظور از زبان نشانه گذاری، این است که کد نوشته شده به زبان HTML مانند یک فایل متنی است که اجزای مختلف آن با تگ از هم جدا شدهاند. این زبان برای ایجاد ساختار صفحات وب استفاده میشود.
زبان CSS
زبان به منظور استایل دهی به اجزای مختلف صفحات وب سایت مانند متن، تصویر، کادرها و… ساخته شده است. در حقیقت شما اجزا و المانهای یک سایت یا برنامه را با HTML در صفحهی خود قرار میدهید و با استفاده از CSS شکل و ظاهر آن المانها را شخصی سازی میکنید. پس
CSSطراحان سایت را قادر میسازد که بدون محدودیت خلاقیتهای خود را در طراحی صفحات سایت پیاده سازی کنند.
آشنایی با اصول طراحی واکنشگرا
یک رابط کاربری استاندارد باید به گونهای باشد که در دستگاهها و پلتفرمهای مختلف، عملکرد اپلیکیشن را دچار اختلال نکند. پس باید بتواند متناسب با نوع دستگاهی که در حال اجرای آن است، واکنش مناسب نشان دهد. اگر رابط کاربری به درستی طراحی نشود، ارزش سایت یا برنامه را از بین میبرد و کاربر با محصول شما کار نمیکند.
زبان HTML
زبان HTML یک زبان برنامه نویسی نیست بلکه یک زبان نشانه گذاری است که به عنوان هسته و بدنه اصلی صفحات وب به حساب میآید. منظور از زبان نشانه گذاری، این است که کد نوشته شده به زبان HTML مانند یک فایل متنی است که اجزای مختلف آن با تگ از هم جدا شدهاند. این زبان برای ایجاد ساختار صفحات وب استفاده میشود.
زبان CSS
زبان به منظور استایل دهی به اجزای مختلف صفحات وب سایت مانند متن، تصویر، کادرها و… ساخته شده است. در حقیقت شما اجزا و المانهای یک سایت یا برنامه را با HTML در صفحهی خود قرار میدهید و با استفاده از CSS شکل و ظاهر آن المانها را شخصی سازی میکنید. پس
CSSطراحان سایت را قادر میسازد که بدون محدودیت خلاقیتهای خود را در طراحی صفحات سایت پیاده سازی کنند.
آشنایی با اصول طراحی واکنشگرا
یک رابط کاربری استاندارد باید به گونهای باشد که در دستگاهها و پلتفرمهای مختلف، عملکرد اپلیکیشن را دچار اختلال نکند. پس باید بتواند متناسب با نوع دستگاهی که در حال اجرای آن است، واکنش مناسب نشان دهد. اگر رابط کاربری به درستی طراحی نشود، ارزش سایت یا برنامه را از بین میبرد و کاربر با محصول شما کار نمیکند.
نظرات (0)
آزمون و گواهینامه ها
test
1 سوالات
دقیقه
نمره قبولی: 20/20
تلاش ها: 0/
test
نمره قبولی: 20/20
0
0 نظرات
