HTML یک زبان نشانه گذاری است، به این معنی که بخش های مختلف توسط اجزایی به نام تگ از هم جدا شده، که هر کدام دارای کاربرد و خواص مربوط خود هستند. این تگ ها به مرورگر اعلام می کنند، که هر بخش از صفحه چه نوع عنصری است و باید به چه صورت نمایش داده شود.
یک صفحه وب به طور کلی دارای دو بخش Client Side و Server Side است. بخش Client Side را می توان به سه بخش اساسی تفکیک کرد. اول ساختار صفحه است که توسط HTML ساخته می شود. دوم شکل و شمایل و رنگ و لعاب صفحه است که در CSS تعیین می شود و سوم منطق برنامه در سمت کلاینت است که با زبان‌های اسکریپتی مانند JavaScript مشخص می شود. بنابراین لزوم یادگیری CSS برای طراحی وب مشخص می‌شود. در آموزش تهیه شده در فرادرس سعی شده که جامعیت و مانعیت آموزش رعایت شود. یعنی در عین حال که آموزش فراگیر است و تقریبا شامل تمامی مباحث مربوطه است از گزاف گویی و اتلاف وقت دانشجویان جلوگیری می کند.
زبان HTML به مرور دست خوش تغییرات فراوانی شد و در به روز رسانی‌هایی که برای آن ارائه می‌شود، امکانات جدیدی به آن اضافه می‌گردد و همین طور عملکرد برخی امکانات در نسخه‌های قبلی، تغییرات زیادی را شاهد بودند. هم اکنون، آخرین نسخه ارائه شده برای زبان نشانه گذاری HTML، نسخه ۵ می‌باشد، که در این دوره به بررسی قابلیت‌های جدید این زبان نشانه گذاری خواهیم پرداخت.
با توجه به پیشرفت های حاصل در عرصه وب و همین طور تکنولوژی های مورد استفاده، زبان CSS نیز به مرور شاهد تغییراتی بود که با توجه به ارائه به روزرسانی ها و بهبودهای حاصل، هم اکنون با عنوان نسخه سوم CSS یا همان CSS3 شناخته می شود. زبان CSS3 نیز با توجه به بهبودها و همین طور بروزرسانی های انجام شده، توانسته تا به کاربر کمک کند تا بتوانند رابط کاربری وب سایت های خود را به زیبایی پیاده سازی کنند.
Bootstrap یک چارچوب نرم افزاری یا Framework است که شامل توابع و کتابخانه های از پیش آماده شده به زبان HTML و CSS و JavaScript می باشد که به ما این امکان را می دهد تا در صفحات وب خود، با استفاده از کتابخانه های از پیش آماده، المان هایی نظیر: فرم ها، دکمه ها، تب ها و … را ایجاد کرده و رابط کاربری وب سایت خود را توسعه دهیم. با توجه به امکانات ارائه شده توسط Bootstrap و همین طور سادگی استفاده از آن، روز به روز به تعداد وب سایت هایی که از آن استفاده می کنند، افزوده می شود. با توجه به تعداد استفاده کاربران و همین طور امکانات آن، به تازگی به روز رسانی جدیدی برای این ابزار ارائه شده است که با نام Bootstrap 4 شناخته می شود.
طراحی وب یکی از شاخه های برنامه نویسی محسوب می شود. طرح ابتدا در فتوشاپ پیاده سازی می شود سپس به کدهای HTML و CSS با استانداردهای روز جهانی تبدیل می کنیم. این فرادرس برای کسانی که می خواهند به صورت پروژه محور طراحی وب انجام دهند، مناسب است. زیرا ذهن آن ها را برای سوالات مختلفی که دارید باز می کند. به عنوان مثال (چطور این Attribute را استفاده کنم؟ در کجا استفاده کنم؟ برای بخش بندی از div استفاده کنم یا section؟ و …) چون ما هنگام انجام پروژه، تک تک این موضوعات را به شما آموزش می دهیم.
هدف از این فرادرس، چگونگی استفاده طراحان وب به صورت کاربردی از این سه تکنولوژی وب برای طراحی صفحات و تعاملی نمودن آن ها می باشد. اهمیت این فرادرس از این بابت است که باعث آموزش کاربردی افراد می شود و نحوه کارکرد مقدمات را می توانند در عمل مشاهده کنند و در پروژه های خود به کار گیرند. این فرادرس برای طراحان وب ضروری است، زیرا به وسیله آن یاد می گیرند که چگونه اجزای یک وب سایت را اعم از اسلایدر، تب، رویدادهای اسکرول و … ایجاد کنند. در واقع این فرادرس ساخت اجزایی را مورد هدف قرار می دهد که دانشجویان در اکثر سایت های مدرن آن ها را می بینند و از نحوه ایجاد آن ها اطلاعی ندارند.
طراحی قالب استاتیک اولین قدم برای ورود به بازار کار طراحی قالب و طراحی سایت است، زمانی که با نحوه طراحی یک قالب از ابتدا تا انتها آشنا شوید، روش های لایه بندی و همچنین تگ های HTML و CSS را بهتر درک می کنید و می توانید قالب برای انواع سایت های مختلف دانلودی، گرافیکی، شخصی و … طراحی کنید.
اصولاً آموزش و یادگیری HTML و CSS کار چندان مشکلی نیست اما ایجاد صفحات وب و نوشتن این کدها بسیار وقت گیر هستند. با استفاده از پلاگین Emmet این امکان وجود دارد که کدهای HTML و CSS با سرعت بسیار بالاتری در نرم افزارهای ویرایش گر کد نوشته شده و به مرحله تولید صفحات وب برسند.
امروزه یک صفحه وب ممکن است از روی هر وسیله ای مورد دستیابی قرار گیرد و نمایش یابد مانند: یک کامپیوتر شخصی، تبلت، موبایل، یک مانیتور عریض و…. پس لزوم نمایش درست و شکیل صفحه وب بر روی همه این وسایل یک حقیقت انکار ناپذیر است. صفحه وبی که بتواند بر روی تمامی ابزارها به شکل مناسب نمایش یابد، Responsive و یا واکنش گرا نامیده می شود. در این فرادرس کاربران یاد خواهند گرفت که چگونه صفحه وبی را بدون کمک گرفتن از هیچ یک از پلتفرم ها و فریم ورک های موجود به صورت واکنش گرا طراحی کنند.
امروزه هر کسب و کار موفقی، نیازمند یک سایت برای ارائه محصولات و توضیحات آن کسب و کار است. یک سایت خوب باید از نظر UI و UX طوری طراحی شود که اولاً برای مخاطب لذت بخش باشد و دوماً سئو و امتیاز خوبی از نظر محتوا داشته باشد. یکی از این امتیازات خوب، واکنش گرا بودن یا ریسپانسیو بودن یک سایت است. به این معنا که بعد از انجام عملیات واکنش گرایی سایت، مخاطب می تواند سایت شما را به صورت صحیح روی تمامی وسایل با عرض های مختلف مثل تبلت و موبایل و لپ تاپ و … مشاهده کند و مشکلی با نمایش سایت نداشته باشد. ما در این آموزش، سعی داریم ریسپانسیو کردن را به وسیله فریمورک قدرتمند Bootstrap به شما آموزش دهیم تا بتوانید یک طراح وب حرفه ای باشید.
در این فرادرس شما به سرعت و در اولین خطوط کد، با یک پروژه عملی و کاربردی مواجه می شوید. از مفاهیم تئوری، مثال های نامرتبط و توضیحات اضافی صرف نظر می کنیم. در ابتدا یک صفحه کامل را به عنوان هدف نهایی پروژه نمایش می دهیم و قدم به قدم در مراحل ساخت این صفحه با هم همراه می شویم. اولین قدم ما طرح بندی کلی HTML با استفاده از Grid و بهینه کردن آن برای صفحه نمایش های کوچک تر است. در ادامه با ساخت منوی واکنش گرا به وسیله فناوری Flexbox آشنا می شویم. ضمن اینکه در حین اجرای پروژه با نکات کوچک بی شماری نظیر: استفاده از انواع فونت ها و آیکون های تحت وب، تغییر اندازه عکس ها براساس اندازه صفحه نمایش، مفهوم سایه و شفافیت و همین طور واحدهای اندازه گیری em و vh آشنا می شویم.
امروزه با افزایش استفاده از وب سایت ها و همچنین افزایش درخواست ها، ضروری است که طراحان وب با یادگیری استفاده از پیش پردازنده هایی همانند Less به طراحی پروژه ها سرعت بخشیده و با درصد خطای کمتری مواجه شوند. تفاوت عمده Less با دیگر کامپایلرهای CSS این است که با کمک فایل Less.js از طریق مرورگر می توان فایل را درجا کامپایل نموده و علاوه بر این Less باعث داینامیک ساختن CSS شده است.
در این فرادرس قصد داریم زبان اسکریپت نویسی Sass را به شما معرفی کنیم. با استفاده از این زبان اسکریپت نویسی شما می توانید در بین کدهای CSS متغیر تعریف کنید، آن ها را به صورت تو در تو بنویسید و حتی برای کدهای پر کاربرد خود، تابع تعریف کنید و همچنین کدهای CSS خود را با استفاده از منطق، تحت کنترل خود بگیرید و از مفاهیم پرکاربرد DRY و وراثت در آن ها استفاده کنید. اگر قصد دارید یک طراح حرفه ای باشید و پروژه های بزرگ با کدهای بسیار زیاد را به راحتی استایل دهی کنید استفاده از یک زبان اسکریپت نویسی مانند Sass اجتناب ناپذیر است.
یکی از فریم ورک های مطرح در زمینه طراحی رابط کاربری، فریم ورک Foundation نام دارد که توسط شرکت Zurb ارائه شده است و به طراحان کمک می کند تا به سادگی، رابط کاربری صفحه وب خود را طراحی نمایند. این فریم ورک که تاکنون به روز رسانی های مرتبط و بهینه سازی های مشخصی داشته است، به کاربران کمک می کند تا برای تنظیم موقعیت المان ها از شبکه Grid موجود استفاده نموده که این شبکه Grid براساس سه طرح متفاوت XY و Float, Flex ارائه شده است. همچنین با استفاده از کلاس های موجود در این فریم ورک می توان نسبت به طراحی المان های مختلفی از جمله: دکمه ها، منوها، جداول، نوارهای پیشرفت و… اقدام کرد.
در طراحی رابط کاربری، HTML ساختار را ایجاد می کند و CSS به این ساختار شکل داده و ظاهر و نحوه نمایش آن ها را مشخص می کند. ما در این فرادرس، قصد داریم تا یکی از فریمورک های ارائه شده برای CSS با نام W3.CSS را بررسی کنیم. فریمورک W3.CSS فریمورکی است که توسط وب سایت W3Schools برنامه نویسی شده و به صورت رایگان در اختیار افراد قرار گرفته است. از مزایای فریمورک W3.CSS می توان به واکنش گرا بودن این فریمورک اشاره کرد. همچنین، این فریمورک، تنها از دستورات استاندارد CSS استفاده می کند و مانند سایر فریمورک ها نظیر: Bootstrap و یاFoundation، نیازی به استفاده از جاوا اسکریپت و یا jQuery ندارد.
آموزش های مقدماتی تکنولوژی های مختلف برنامه نویسی تحت وب فراوان یافت می شوند و تعداد بسیار کمی از این آموزش ها به صورت کاربردی به این تکنولوژی ها می پردازند. به همین منظور، برای استفاده کاربردی از سه تکنولوژی HTML5 ,CSS3 و jQuery آموزشی را تهیه کردیم تا کاربرد این سه تکنولوژی وب را به صورت عملی تدریس نموده و زمینه استفاده کاربردی از مقدمات را فراهم نماییم. بخش یکم آموزش نیز بر همین مبنا پایه ریزی شده بود و مثال های متنوعی در آن ارائه شده بود. در این قسمت، مثال های متنوع تری را ارائه می کنیم تا تسلط شما بر استفاده کاربردی از این سه تکنولوژی افزایش یابد.
پیش‌پردازنده Pug برای فایل‌های HTML کاربرد دارد و با امکانات جذاب خود، کدنویسی در HTML را تغییر می‌دهد. ویژگی‌هایی نظیر: استفاده از متغیرها و میکسین‌ها (Myxin) و نیز استفاده از دستورهای شرطی، نشان از قدرت بسیار وسیع این پیش‌پردازنده دارد. با یادگیری Pug شما می‌توانید کد‌هایی که در سمت HTML می‌نویسید را کمتر کنید بدون این که کدی را حذف کنید. بنابراین، یادگیری این پیش‌پردازنده قوی علاوه بر تمیز نوشتن کدها به شما کمک می‌کند که سریع‌تر وب‌سایت‌های خود را تکمیل نمایید.
مبحث انیمیشن (Animation) در CSS به سرعت به یکی از ابزارهای ضروری برای طراحی وب تبدیل شده است چرا که به شکل شگفت‌آوری باعث ایجاد یک ارتباط روانی جذاب بین مخاطب و وب‌سایت می‌شود و بدین صورت از عوامل ارتقای سطح UI یا همان رابط کاربری به حساب می‌آید. از آنجا که بهبود رابط کاربری از اهداف انکارناپذیر هر طراح وب به شمار می‌آید، پس بدون شک تسلط بر مبحث Animation در CSS در این روزها بیش از پیش لازم و ضروری است. در این فرادرس با فرض آشنایی مقدماتی دانشجو با مفاهیم CSS و HTML سعی شده است تا تمامی مفاهیم مرتبط با این موضوع از قبیل: ترنزیشن‌ها (Transition) و ترنسفورم‌ها (TranceForm) در محیط دو‌بعدی، سه‌بعدی، Animationها و Keyframeها بیان شود تا بدین شکل دانشجو با اصول کار آشنا شده و دست او برای خلق هر آنچه که در ذهن دارد باز شود.
برای مشاهده آموزشهای مرتبط دیگر، در میان بیش از ۱۵ هزار ساعت آموزش منتشر شده در فرادرس، جستجو کنید...
