آموزش Canvas برای برنامه نویسان فرانتاند
Canvas عمدتا برای پیاده سازی و رسم نمودار های مختلف جهت تحلیل اطلاعات، بکگراندها و افکت های متنی انیمیشنی، شکل های گرافیکی مختلف، بازی سازی و ... استفاده میشه. اما حجم کدی که با Canvas مینویسین در مقایسه با Css به شدت کمتر خواهد بود و این موضوع هم سرعت توسعه شما رو افزایش میده و هم حجم سورس کد رو کاهش میده (اعصاب خوردی و باگ رو هم کاهش میده :D) و در نهایت باعث بهبود لود وب سایت و سئو هم میشه.
وضعیت دوره
تکمیل شده
مدت زمان دوره
9 ساعت
آخرین بروزرسانی
1401/10/03
روش پشتیبانی
آنلاین
پیش نیاز
HTML & CSS & JS
نوع مشاهده
دانلودی/آنلاین
دانشجو
رضایت
محمدامین سعیدی راد
Full Stack Web Developer
توضیحات
هر زمان صحبت از HTML میشه احتمالا اولین چیزی که به ذهن شما میاد کدهای خشک و ساده و ایستایی هست که نهایت هنرشون، گذاشتن متن و لینک و عکس و اینهاست.
این تصور تا قبل از معرفی HTML5 تا حدود زیادی درست بود اما از اون به بعد، به حدی قابلیت های گرافیکی جدید به HTML اضافه شد که تکنولوژی قدرتمندی مثل Flash Player رو از میدون تکنولوژی وب محو کرد. یکی از عناصری که این قدرت رو به HTML اضافه کرد، Canvas هست که یک تگ ویژه محسوب میشه و به کمک اون میتونید کلی انیمیشن ها، گرافیک های دو بعدی و سه بعدی، بازی های خفن، جلوه های زیبا و … در سایت خودتون ایجاد کنید.
اما چطور؟!
این تگ در واقع یک باکس اختصاصی برای کدهای قدرتمند جاوا اسکریپتی ایجاد میکنه تا شما با استفاده از ظرفیت جاوا اسکریپت هرکاری خواستید انجام بدید. در حدی که حتی برای ساخت برنامه های گرافیکی آنلاین و توسعه هوش مصنوعی مثل TensorFlow که یک کتابخونه آنلاین برای هوش مصنوعی هست هم استفاده میشه.
حجم کدی که با Canvas نوشته میشه در مقایسه با Css کمتر هست و این موضوع هم سرعت توسعه شما رو افزایش میده و هم حجم سورس کد پروژه رو کاهش میده. علاوه بر این به دلایل متعدد سرعت لود صفحه و کیفیت سئوی اون رو هم بیشتر میکنه!
اگه دوست دارید HTML رو از یه زاویه حرفه ای تر یاد بگیرید و از قدرت گرافیکی اون در کنار جاوا اسکریپت لذت ببرید، یادگیری نحوه استفاده از تگ Canvas میتونه یکی از مهمترین قدم ها برای رسیدن شما به این هدف باشه. پس در ادامه با ما همراه باشید تا همه دغدغه های ذهنی شمارو قبل از ثبت نام جواب بدیم و با خیال راحت و دید باز در دوره ثبت نام کنید.
تو این دوره چی یاد می گیریم و به چه سطحی میرسیم؟
شما در این دوره به صورت قدم به قدم و از آشنایی اولیه با canvas شروع به یادگیری میکنید و تا مباحث پیشرفته این تگ هم خواهید رسید به طوری که هیچ نکته و مطلبی در زمینه Canvas نمونده باشه که شما ندونید.
اینکه این تگ دقیقا چی هست و هدفش چیه؟ کدوم مرورگرها از اون پشتیبانی میکنن ؟
بعد از این شروع به یادگیری مباحث اصلی این تگ میکنید و پروژه هایی مثل snake game, paint image editor ، رسم نمودار های حرفه ای با این تگ و کلی موارد دیگه بهتون آموزش داده میشه.
ممکنه شما قبلا با کتابخونه ای مثل particle js که انیمیشین های وب عالی به سایت اضافه میکنه و یا کتابخونه chartjs که کارش رسم نمودار های حرفه ای برای سایت هست، کار کرده باشید. جالبه بدونید شما با دیدن این دوره، تمام آنچه که برای پیاده سازی افکت های این کتابخونه ها نیاز دارید رو یاد میگیرید و بدون نیاز استفاده از این کتابخونه ها، افکت ها و نمودارهای خودتون رو پیاده سازی خواهید کرد.
این دوره برای چه کسانی مناسب هست؟
یادگیری نحوه استفاده از تگ Canvas برای افرادی که به هر نحو با برنامه نویسی وب سروکار دارن ضروری هست و به طور ویژه برای فرانت اند کارها…
به طور کلی اگه HTML/CSS و همینطور جاوا اسکریپت رو بلدید و به دنبال یک تگ حرفه ای برای به کار بردن المان های گرافیکی در HTML هستید، این دوره دقیقا برای شما طراحی شده و قطعا از مطالب اون لذت می برید چون تاثیرش روی کار شما حتی در کوتاه مدت محسوس خواهد بود.
تفاوت دوره Canvas سبزلرن با بقیه چی هست و چرا بهترین گزینه محسوب میشه؟
با وجود اینکه این تگ یکی از مهمترین تگ های html حساب میشه اما متاسفانه هیچ آموزش فارسی درست، جامع و کاملی برای اون وجود نداره.
در این دوره شما خیلی راحت میتونید مباحث اساسی Canvas رو به صورت رایگان ببینید (40 درصد اول همه دوره های سبزلرن، رایگان هست) و اصلا نیازی نیست هزینه کنید. علاوه بر این مباحث فنی Canvas رو هم به صورت کاملا پروژه محور آموزش می بینید.
سبزلرن مثل طبق روال ثابت خودش با آماده کردن یک محتوای کامل، جامع و عمیق به شما کمک میکنه تا به راحتی این تگ رو یاد بگیرید و با انجام دادن پروژه های متعددی که در این دوره به شما آموزش داده میشه، به سطح قابل قبولی برسید و بتونید خیلی راحت هر کار گرافیکی نیاز داشتید پیاده سازی کنید.
این دوره با پشتیبانی رایگان و همیشگی که داره به شما کمک میکنه تا در طی دوره آموزشی و بعد از اون هر زمان با مشکلی رو به رو شدید، با ایجاد سوال در بخش پرسش و پاسخ، خیلی سریع مشکلتون حل بشه.
سبزلرن تمام تلاش خودش رو انجام داده تا به بهترین شکل ممکن شما رو با این تگ قدرتمند آشنا کنه. (واقعیت اینه که مطالب و پروژه هایی که در این دوره به شما آموزش داده شده رو نمیتونید در سطح وب فارسی مشاهده کنید! )
پس تفاوت های اساسی این دوره به صورت خلاصه عبارتند از :
- مشاهده قسمت های اصلی Canvas به صورت رایگان (40 درصد)
- پروژه محوری و کاربردی بودن مطالب
- صفر تا صد بودن واقعی محتوای آموزشی
- جایگاه این تگ در افزایش کیفیت پروژه مطابق با نیاز بازار کار
- پشتیبانی واقعی. یعنی در این دوره معنی واقعی پشتیبانی رو متوجه میشید و هر موقع در مسیر دوره با مشکل یا سوالی مواجه شدید فقط کافیه سوالتون رو از طریق بخش پشتیبانی دوره مطرح کنید تا مدرس دوره و کارشناسان پشتیبانی در اسرع وقت و با حوصله جواب شمارو بدن.
شرکت کردن یا نکردن در این دوره چه ریسکی داره؟!
جوابش ساده هست. شما اگر با این تگ و قابلیت های اون آشنا نباشید، انگار که از تکنولوژی HTML حدود 20 سال پیش استفاده می کنید که هیچ قابلیت پویا و گرافیکی خاصی نداره. از طرفی نحوه و زمان استفاده از کدهای جاوا اسکریپت در صفحاب وب HTML رو هم یاد نخواهید گرفت.
قطعا با یادگیری این مبحث، یک مهارت جدید به دست میارید که میتونه در روند استخدام و همچنین پروژه های فریلنسری، ارزش کار شمارو بهتر نشون بده و حرفه ای تر به نظر برسید.
در واقع بعد از گذروندن دوره آموزش Canvas به درک خیلی خوبی از پیاده سازی انیمیشن ها و نمودار های مختلف و همینطور ساخت بازی های دو بعدی و سه بعدی در سطح وب میرسید که باعث میشه نسبت به افرادی که اطلاعاتی در مورد این تگ قدرتمند ندارن کیلومترها جلو بیفتید!
بعد از اتمام دوره به چه سطحی میرسیم ؟
شما بعد دیدن این دوره میتونید افکت های جالبی که تا الان سایت های مختلف مشاهده کردید رو خودتون به کمک تگ Canvas پیاده سازی کنید و نیازی به استفاده از کتابخونه هایی مثل PARTICLE JS و CHART JS و همینطور کدهای CSS نخوهید داشت. تا این حد!
میشه گفت قدرتی که این تگ به شما میده به شکلی هست که یک نقطه تمایز با دیگران برای خودتون ایجاد می کنید به طوری که در هر جمعی که باشید، نگاه متفاوت تری نسبت به تخصص و تسلط شما خواهند داشت.
سرعت بالای سایت، کد نویسی آسان و سریع، پشتیبانی مناسب در مرورگرهای مختلف، بهبود سئو و کلی دلیل دیگه باعث شده که تفاوت بین دونستن و ندونستن این تگ، زیاد باشه!
این دوره پیش نیاز خاصی داره که باید قبلش بلد باشم؟
قبل از این دوره شما باید به جاوا اسکریپت، HTML و CSS مسلط باشید تا بتونید از مطالب این دوره به بهترین شکل استفاده کنید. حداقل این که در حد قابل قبولی با اونها کار کرده باشید و آگاهی کلی داشته باشید.
چطور میتونم پروژه دانشجویان قبلیتون رو ببینم ؟
مدرس هر دوره معمولا صفحه خودش رو در شبکه اجتماعی با شما به اشتراک میگذاره. شما میتونید با دنبال کردن اون با کلی دانشجو و پروژه ای که توسط اونها انجام شده آشنا بشید تا ادعای سبزلرن در مورد کیفیت آموزش ها از جمله آموزش Canvas به شما اثبات بشه.
کسانی که مثل خودتون روز اولی داشتن و کلی تردید و نگرانی تو ذهنشون بود اما الان و با ادامه مسیر یادگیریشون در بقیه حوزه ها، به برنامه نویس های حرفه ای تبدیل شدن که هر شرکتی آرزوی همکاری با اونهارو داره . چون از دانشگاه شریف برنامه نویسی یعنی سبزلرن فارغ التحصیل شدن
نظر دانشجو ها در رابطه با این دوره؟
خیلی از شرکت کنندگان دوره بعد از پایان دوره حس خیلی خوبی داشتن چون Canvas برای فرانت اند کارها مثل کلید عمل میکنه و یادگیری اون با چنین پروژهای در این سطح، واقعا لذت بخشه. خیلی از دانشجوها در کامنت های این دوره به این موضوع اشاره کردن. شما هم میتونید به کامنت های دوره یه سر بزنید و نظرات دانشجوهای دوره رو ببینید.
چه تضمینی هست که خوب و کامل یاد بگیرم؟
ولی به طور کلی چند دلیل هست که معمولا باعث عدم نتیجه گیری شما از دوره ها میشه :
- کیفیت پایین محتوای آموزشی و سبک و تسلط مدرس
- عدم اشتیاق و علاقه مندی کافی برای یادگیری
- نبود پشتیبانی در دسترس و قوی در طول آموزش
- عدم مرور و تمرین مطالب (انبار کردن اونها برای روز مبادا !)
دو مورد اینها بر عهده شماست و دو مورد هم بر عهده سبزلرن. ما به شما قول میدیم این آموزش رو با بالاترین کیفیت و موثرترین پشتیبانی در اختیار شما قرار بدیم. شما قول می دید که با علاقه و پشتکار تمام تمرینات رو انجام بدید تا به نتیجه برسید؟!
پس همه چی حله…
اول دوره های مکمل جاوا اسکریپت، سپس این دوره و سپس تیلویند.
تو این مقاله به طور کامل نحوه استفاده از Canvas در ریاکت آموزش داده شده:
https://medium.com/@pdx.lucasm/canvas-with-react-js-32e133c05258
همیشه دنبال دوره آموزشی آماده نباشین. یکم سرچ کنین و مقاله بخونین، اگه موردی بود تو گروه پشتیبانی دوره ریاکت مطرح کنین، راهنماییتون میکنم 👌❤️
من با react js و next js کار میکنم و برای ظاهر هم به جای نوشتن css خام از tailwind css استفاده میکنم آیا از نکاتی که توی این دوره گفته میشه میتونم توی پروژه هام استفاده کنم ؟ طوری که نخوام دیگه از کتابخونه هایی مثل chart js برای قسمت های نمودار سایتم استفاده کنم ؟
یا اینکه بتونم ظواهر گرافیکی متنوعی ایجاد کنم ؟
این تگ canvas داخل react و next پشتیبانی میشه ؟
ربطی نداره که از کدوم فریمورک Css استفاده میکنین. اگه توسعهدهنده فرانتاند هستین قطعا با JS سر و کار دارین و میتونین از Canvas استفاده کنین.
بله داخل همه فریمورکها و کتابخونه های فرانتاند میشه از Canvas استفاده کرد.
یه سوال دارم
من الان رسیدم قسمت ۲۶ و ویدیویی برای این قسمت وجود نداره!!
مشکل کجاست؟!
فکر کنم فایل این جلسه حذف شده و مجدد باید رکورد شه.
این جلسه صرفا crop کردن عکس هست و مورد ضروری نیست.
سر فرصت مجدد رکورد کرده و برای دوره آپلود میکنم ❤️
منظورتون رو از کاستوم متوجه نشدم.
اگه درست متوجه شده باشم اگه از Canvas برای این کار استفاده نکنین راحتتره واستون.