آموزش طراحی سایت: FrontEnd
نام دوره: طراحی سایت فرانت اند
مدرس: امید فتاحی
تعداد جلسات: 43
وضعیت دوره: تمام شده
مدت زمان: 64 ساعت
سطح: از مقدماتی تا پیشرفته
نوع آموزش: خصوصی
فضای آموزش: حضوری و مجازی
توضیحات تکمیلی
طراحی سایت
امروزه با پیشرفت تکنولوژی و هموار شدن مسیر برای کسب و کارهای آنلاین، بازار فعالیت‌هایی مانند طراحی سایت بیش از پیش رونق گرفته است. داشتن یک وب سایت سازمان دهی شده و بر مبنای اصول سئو روند سود دهی کسب و کار شما را تسریع کرده و بهبود می‌بخشد. یکی از محبوب‌ترین آموزش‌های در دنیای امروز، آموزش طراحی سایت می‌باشد. با یادگیری این مهارت می‌توانید کسب درآمد کنید. آموزش طراحی سایت به شما کمک می‌کند تا بتوانید با توجه به نیاز مشتری وب سایت‌های آن‌ها را طراحی کنید.
منظور از فرانت اند
گروهی از طراحان که روی بخش‌های ظاهری و بخش‌های که در معرض دید کاربر قرار دارند کار میکنند را طراحان بخش فرانت می‌نامند. کار بخش فرانت اند توسعه‌ی رابط کاربری است همچنین فرانت با کمک نرم افزارهایی مثل فیگما یا فتوشاپ روی طرح‌های ظاهری کار می‌کند. به طور کلی فرانت اند روی قسمت‌هایی که برای کاربر قابل مشاهده است و کاربر با آن تعامل دارد کار می‌کند یعنی او با استفاده از کدها موارد قابل فهم را برای کاربران ایجاد می‌کند.
بنابراین می‌توان گفت تمامی کارهایی که طراحان فرانت با کدها انجام می‌دهند به مواردی قابل فهم تبدیل می‌شوند که برای کاربران قابل مشاهده است. بخش فرانت اند با بخش بک اند در ارتباط بوده و با کمک یکدیگر برای کسب یک تجربه کاربری خوب از کاربر تلاش میکنند.
HTML
HTML یکی از پرکاربردترین زبان‌های مورد استفاده در طراحی سایت می‌باشد که مخفف Hyper Text Markup Language به معنی زبان نشانه گذاری فوق متن است. زبان استاندارد طراحی صفحات وب می‌باشد و تمام کدهای صفحه نهایتا (سمت سرور و سمت مشتری) به کدهای HTML تبدیل می‌شود و توسط مرورگرها به نماش گذاشته می‌شوند. به معنای دیگر کدهای سمت سرور همچون asp و php برای مرورگرها قابل شناسایی نیست و تنها کدهای html برای آن‌ها قایل شناسایی هستند. می‌توان گفت HTML اسکلت و استخوان بندی سایت شما را می‌سازد.
HTML از عناصری برای ایجاد ساختار صفحات وب استفاده می‌کند. عناصر HTML مانند تگ‌های HTML هستند که محتوای صفحه وب را مشخص میکنند. به عنوان مثال، تگ <h1> برای ایجاد یک عنوان سطح یک، تگ <p> برای ایجاد یک پاراگراف و تگ <img> برای قرار دادن تصویر در صفحه استفاده می‌شود.
CSS
صفحات HTML به تنهایی جلوه‌ی بصری ندارد و با استفاده از دستورالعمل‌ها و زبان‌های مختلف جلوه‌ی زیبایی به صفحات سایت داد. یکی از این زبان‌ها CSS است. CSS مخفف Cascading Style Sheet است که برای ایجاد و ساخت ویژگی‌های ظاهری وب سایت‌های مورد استفاده قرار می‌گیرد. از کاربردهای CSS می‌توان به اعمال تنظیمات برای تغییر نمایش صفحات وب سایت بسته به اندازه‌ی صفحه نمایش می‌باشد که اصطلاحا به آن طراحی ریسپانسیو می‌گویند. با به کارگیری CSS در کنار HTML می‌توان یک سایت زیبا و اصولی را طراحی کرد.
CSS از ویژگی‌هایی برای سبک‌دهی صفحات وب استفاده می‌کند. ویژگی‌های CSS مانند رنگ، فونت و اندازه متن هستند. به عنوان مثال، می‌توانید از ویژگی color برای تغییر رنگ متن، از ویژگی font-family برای تغییر فونت متن و از ویژگی font-size برای تغییر اندازه متن استفاده کنید.
JavaScript
جاوا اسکریپت (JavaScript) که به اختصار JS نامیده می‌شود از محبوب‌ترین زبان‌های برنامه نویسی پویا و شی گرا است که می‌توان در هم سمت کاربر و هم سمت سرور استفاده کرد. جاوا اسکریپت بیشتر برای برنامه‌های مبتنی بر وی و مرورگرهای وب مورد استفاده قرار می‌گیرد اما کاربردهای آن به این موارد خلاصه نمی‌شود و می‌توان در نرم افزار، سرورها و کنترل‌های سخت افزاری نیز استفاده کرد. از کاربردهای جاوا اسکریپت می‌توان به موارد زیر اشاره نمود:
- اضافه کردن رفتار تعاملی به صفحات وب
- ایجاد برنامه‌های وب و موبایل
- ساخت وب سرورها و توسعه برنامه‌های کاربردی سرور
- توسعه بازی
- با یادگیری اصولی طراحی وب سایت می‌توانید به دنیای زیبای برنامه نویسی وارد شوید و برای خود کسب درآمد کنید
- محتوای صفحات وب را تغییر دهید
- رویدادهایی را مدیریت کنید
- تعاملات کاربر را مدیریت کنید
- بازی‌ها و برنامه‌های کاربردی ایجاد کنید
- صفحات وب تعاملی ایجاد کنید
الگوریتم
یک الگوریتم خوب باید ویژگی‌های زیر را داشته باشد:
- قابل اجرا: الگوریتم باید بتوان آن را در یک برنامه کامپیوتری پیاده سازی کرد.
- کارآمد: الگوریتم باید در زمان و حافظه بهینه کار کند.
- دقیق: الگوریتم باید نتیجه صحیحی را تولید کند.
الگوریتم‌ها در بسیاری از زمینه‌ها از جمله علوم کامپیوتر، ریاضیات، مهندسی و تجارت استفاده می‌شوند. آن‌ها یک ابزار ضروری برای حل مسائل پیچیده هستند و می‌توانند به بهبود بهره وری و کارایی کمک کنند.
در اینجا مثالی از یک الگوریتم برای جمع دو عدد آورده شده است:
- ورودی دو عدد را دریافت کنید.
- حاصل جمع دو عدد را محاسبه کنید.
- خروجی حاصل جمع را نمایش دهید.
این الگوریتم قابل اجرا، کارآمد و دقیق است. قابل اجرا است زیرا می‌تواند در یک برنامه کامپیوتری پیاده سازی شود. کارآمد است زیرا زمان و حافظه کمی مصرف می‌کند. دقیق است زیرا همیشه نتیجه صحیحی را تولید می‌کند.
ReactJS
ReactJS یک کتابخانه متن باز جاوا اسکریپت است. این کتابخانه توسط فیسبوک توسعه داده شده است و به منظور ساخت و توسعه برنامه‌های تحت وب تک صفحه‌ای یا SPA (Single Page Applications) طراحی شده است. ReactJS بر پایه “کامپوننت” عمل می‌کند. یک کامپوننت در ReactJS یک قسمت مستقل و قابل استفاده مجدد است که می‌تواند شامل کدهای HTML، CSS و جاوا اسکریپت باشد. با استفاده از کامپوننت‌ها، می‌توان رابط کاربری را به بخش‌های کوچکتر تقسیم کرده و هر بخش را به صورت مستقل توسعه و مدیریت کرد. یکی از ویژگی‌های برجسته آن Virtual DOM است. Virtual DOM یک نمایش مجازی از DOM است که تغییرات در آن اعمال می‌شود و سپس با DOM واقعی همگام می‌شود. این روش باعث بهبود عملکرد و سرعت بارگذاری صفحات وب می‌شود. ReactJS از JSX نیز استفاده می‌کند که یک ترکیب از جاوا اسکریپت و HTML است. با استفاده از JSX، می‌توان کدهای HTML را درون کدهای جاوا اسکریپت قرار داد و به راحتی با کامپوننت‌ها در ReactJS کار کرد. به طور خلاصه، ReactJS یک کتابخانه قدرتمند برای ساخت رابط کاربری تحت وب است که با استفاده از کامپوننت‌ها، Virtual DOM و JSX، توسعه برنامه‌های تحت وب را ساده‌تر و کارآمدتر می‌کند.
React بر اساس مفهوم اجزای قابل استفاده مجدد است. هر جزء یک قطعه کوچک از رابط کاربری است که می‌تواند به طور مستقل توسعه و آزمایش شود. این به شما امکان می‌دهد رابط‌های کاربری پیچیده را با کد کمتری ایجاد کنید. همچنین بسیار سریع است. این به دلیل استفاده از مفهوم حالت است که به شما امکان می‌دهد فقط قسمت‌های رابط کاربری را که تغییر میکنند به روز کنید. این به بهبود عملکرد رابط کاربری شما کمک می‌کند. در اینجا برخی از مزایای استفاده از React آورده شده است:
- سریع است
- قابل استفاده مجدد است
- برای توسعه رابط‌های کاربری پیچیده آسان است
- محبوب است و تعداد زیادی کتابخانه و ابزار React وجود دارد
- توسط بسیاری از شرکت‌های بزرگ استفاده می‌شود
- معماری مبتنی بر کامپوننت
- ایجاد کامپوننت‌های قابل استفاده مجدد
- DOM مجازی
وردپرس
شما می‌توانید با استفاده از یک قالب وردپرس از پیش ساخته شده، یک وب سایت یا وبلاگ ایجاد کنید یا قالب خود را با استفاده از یک صفحه ساز وردپرس ایجاد کنید. در اینجا برخی از مزایای استفاده از وردپرس آورده شده است:
- استفاده از آن آسان است
- منبع باز است، به این معنی که می‌توانید کد آن را مشاهده و ویرایش کنید
- انعطاف پذیر است و می‌توانید از آن برای ایجاد انواع مختلف وب سایت‌ها استفاده کنید
- محبوب است و تعداد زیادی افزونه و قالب وردپرس وجود دارد که می‌توانید از آن‌ها برای سفارشی کردن وب سایت خود استفاده کنید
- قابل اعتماد است و میلیون‌ها نفر در سراسر جهان از آن استفاده میکنند
NextJS
Next.js یک فریم‌ورک توسعه وب برای React است که توسط شرکت Vercel توسعه داده شده است. این فریم‌ورک با استفاده از سرعت و قابلیت توسعه پذیری React، مزایایی مانند رندر سمت سرور (Server-side rendering) و تولید خودکار (Automatic code-splitting) را فراهم می‌کند. با استفاده از Next.js، می‌توانید برنامه‌های React خود را به صورت سریع و با بهره وری بالا توسعه دهید. برخی از ویژگی‌های برجسته این فریم‌ورک عبارتند از:
- رندر سمت سرور
- تولید خودکار
- پشتیبانی از مسیریابی داینامیک
- پشتیبانی از CSS Modules
TypeScript
در اینجا چند مزیت استفاده از TypeScript آورده شده است:
- قابل خواندن و قابل نگهداری تر از جاوا اسکریپت است
- به شما امکان می‌دهد کد جاوا اسکریپت موجود خود را گسترش دهید
- برای توسعه برنامه‌های وب، برنامه‌های دسکتاپ و برنامه‌های موبایل محبوب است
- دارای یک اکو سیستم بزرگ ابزارها و کتابخانه‌ها است
سرفصل دوره‌های آموزشی فرانت اند
HTML و CSS دو زبان برنامه‌نویسی هستند که برای ایجاد صفحات وب استفاده می‌شوند. HTML زبانی برای ساختار صفحات وب است و CSS زبانی برای سبک دهی صفحات وب است.
جاوا اسکریپت یک زبان برنامه‌نویسی سمت کلاینت است که برای تعامل با صفحات وب استفاده می‌شود. جاوا اسکریپت به شما امکان می‌دهد تا محتوای صفحات وب را تغییر دهید، رویدادهایی را مدیریت کنید و تعاملات کاربر را مدیریت کنید.
الگوریتم مجموعه‌ای از دستورالعمل‌ها است که یک کار را به صورت واضح و مختصر مشخص می‌کند. الگوریتم‌ها می‌توانند برای حل طیف گسترده‌ای از مشکلات استفاده شوند، از مسائل ساده مانند جمع دو عدد گرفته تا مسائل پیچیده مانند حل معادلات ریاضی.
جی کوئری یک کتابخانه جاوا اسکریپت است که کار با جاوا اسکریپت را آسان تر می‌کند. جی کوئری مجموعه‌ای از توابع آماده از پیش است که می‌توانید از آن‌ها برای انجام کارهایی مانند حرکت دادن عناصر، تغییر ظاهر عناصر و تعامل با کاربر استفاده کنید. جی کوئری یک ابزار قدرتمند است که می‌تواند به شما کمک کند تا صفحات وب خود را تعاملی‌تر و جذاب‌تر کنید. اگر در جاوا اسکریپت تازه کار هستید، جی کوئری یک راه عالی برای یادگیری و استفاده از جاوا اسکریپت است.
Bootstrap یک چهارچوب رایگان و منبع باز HTML و CSS است که برای ساخت صفحات وب سریع، پاسخگو و جذاب استفاده می‌شود. Bootstrap توسط تیم توسعه وب در Twitter ساخته شده و در سال 2011 منتشر شد. Bootstrap از یک مجموعه از کلاس‌های CSS برای ایجاد عناصر رابط کاربری مانند دکمه‌ها، فرم‌ها، لیست‌ها و پیمایش استفاده می‌کند. این همچنین شامل یک مجموعه از اسکریپت‌های جاوا اسکریپت برای افزودن ویژگی‌های تعاملی مانند اسلایدر و جستجوی زنده است.
وردپرس یک سیستم مدیریت محتوای رایگان و منبع باز است که به شما امکان می‌دهد یک وب سایت یا وبلاگ ایجاد کنید. وردپرس توسط میلیون‌ها نفر در سراسر جهان استفاده می‌شود و محبوب‌ترین سیستم مدیریت محتوا در جهان است. استفاده از وردپرس آسان است و نیازی به دانش کدنویسی ندارد.
React یک کتابخانه جاوا اسکریپت است که برای ایجاد رابط‌های کاربری تعاملی استفاده می‌شود. این توسط Facebook در سال 2011 ایجاد شد و به سرعت به یکی از محبوب‌ترین کتابخانه‌های جاوا اسکریپت در جهان تبدیل شد.
TypeScript یک زبان برنامه نویسی است که بر روی جاوا اسکریپت ساخته شده است. TypeScript به شما امکان می‌دهد کد جاوا اسکریپت موجود خود را گسترش دهید بدون اینکه نیاز به تغییر کد جاوا اسکریپت خود داشته باشید.
Next.js یک چهارچوب React است که برای ساخت برنامه‌های وب سریع و قابل توسعه طراحی شده است. این بر اساس مفهوم “صفحه سرور” است که به این معنی است که آن را می‌توان هم در سمت سرور و هم در سمت کلاینت رندر کرد. این به شما امکان می‌دهد تجربه کاربری سریع و یکپارچه را برای کاربران خود فراهم کنید. Next.js همچنین دارای ویژگی‌های زیادی است که توسعه برنامه‌های وب را آسان‌تر می‌کند، مانند پشتیبانی از SSR، مسیریابی، حالت و بین‌المللی سازی. این یک چهارچوب محبوب است و توسط بسیاری از شرکت‌های بزرگ، از جمله Uber، Airbnb و Netflix استفاده می‌شود.
