از برچسب‌ ها در وردپرس استاندارد استفاده کنیم

اگر وردپرسی باشید حتما می‌دانید که برچسب‌ ها در وردپرس چه نقشی دارند و با کمک آن‌ها چه کاری می‌توان انجام داد. در واقع برچسب یا تگ یک راهنما برای یافتن مطالب مرتبط است. اما یک اشتباه رایج بین کاربران است که می‌گوید هر چه از برچسب‌ها بیشتر استفاده کنید، بهتر است! آیا اینطور فکر می‌کنید؟ باید به شما بگویم که استفاده از برچسب‌های بیش از حد نه تنها تاثیر مثبتی ندارد بلکه باعث اثرات منفی بر روی سایت شما نیز می‌شود. چه جالب! بعضی از ما تا همین دیروز فکر می‌کردیم هر چقدر از برچسب‌ها استفاده کنیم، بهتر است.
پیشنهاد می‌کنم برای استفاده مطلوب از تگ‌ها حتما مقاله امروزمان را مطالعه کنید.

برچسب‌ ها در وردپرس

در قدم اول بهتر است در مورد برچسب‌ها اطلاعات کاملی بدست آوریم. برچسب یا تگ عاملی است که باعث مسیریابی می‌شود. یعنی چه؟ یعنی به کاربران امکان یافتن بهتر مطالب سایت را می‌دهد. این ارتباط هم مسلما باید بین مطالبی که در یک دسته جای دارند و مرتبط هستند برقرار شود. یعنی اگر روی یک برچسبی کلیک می‌کنید و در صفحه مورد نظر تنها یک پست مشاهده می‌کنید، یعنی برچسب اشتباهی را استفاده کرده‌اید زیرا در آن صفحه هیچ‌گونه مطلب مرتبطی یافت نمی‌شود. با یک مثال مسئله را واضح‌تر می‌کنیم…

فرض کنید مطلبی با عنوان “ساخت فرم تماس در وردپرس” داریم. حال می‌خواهیم برچسبی را برای آن انتخاب کنیم؛ مسلما اول باید ببینیم در مورد ساخت فرم تماس چه مقالاتی در سایت موجود است. طبق همان تگی را انتخاب می‌کنیم که به مقالات پیشین و هم‌موضوع داده بودیم. زمانی که روی تگ مربوطه کلیک می‌شود تمامی برچسب‌ ها در وردپرس که مرتبط بودند در یک صفحه مجزا با پست موردنظر نمایان می‌شوند.

استفاده از برچسب‌ها ضروریست؟

نظر شما چیست؟ آیا استفاده از برچسب‌ ها در وردپرس یا هر نوع سایت دیگری ضرورت دارد؟ بله ضروری و بسیار مفید است. هم برای کاربران مفید است و هم بر سئوی سایت شما تاثیرگذار! در وردپرس افزونه‌هایی برای برچسب‌گذاری اتوماتیک نیز وجود دارد که برخی گزینه‌های مفیدی هستند.

برچسب‌ها چه تاثیری بر حضور کاربران دارند؟

همان‌طور که در سطرهای ابتدایی هم گفتیم، برچسب‌ها باعث نشان دادن مسیرهای کاربری می‌شود و با کمک برچسب‌ ها در وردپرس، کاربران مطالب شما را راحت‌تر می‌یابند. زمانی که کاربر در سایت شما احساس راحتی کند و در آن ماندگار شود، امتیاز مثبتی برایتان محسوب می‌شود.

برچسب‌ها در سئوی سایت چه تاثیری دارند؟

حتما متوجه شده‌اید که برچسب‌ها صفحه‌ای مجزا را برای خود می‌سازند. هر صفحه در سایت برای موتور جستجو دارای اهمیت است و آن را می‌بیند. این مورد در نتایج گوگل به خوبی نمایش داده می‌شود پس باید با دقت برچسب‌های خود را انتخاب کنید که امتیازات گوگل شامل حالتان شود. پس در نتیجه استفاده از برچسب‌ ها در وردپرس تاثیر مثبتی بر سئوی سایت دارد.

چرا استفاده بیش از حد از برچسب‌ها اشتباه است؟

اما سراغ سوال اصلی برویم. واقعا چرا استفاده از برچسب‌‌های زیاد اشتباه است؟
ما در ایران یاد گرفتیم از تگ‌ها هم بیش از حد استفاده کنیم و هم با بی دقتی تمام آن‌ها را انتخاب کنیم؛ غافل از اینکه با این رفتارها ضرر به سایت خود وارد می‌کنیم. برای اینکه بتوانید بهینه کار کنید گزینه‌های زیر را در نظر داشته باشید:

• از برچسب‌های بی‌ربط و زیادی به کار کاربران نمی‌آید.
• فقط صفحات بیش از حد و تکراری ایجاد می‌کنید.
• از اعتبار محتوای اصلی کم می‌کنید.
• برچسب نباید منحصرا برای یک صفحه خاص باشد.
• با توجه به جستجوی بیشتر، تگ‌ها را انتخاب کنید.
• کلمه کلیدی صرفا نمی‌تواند برچسب هم باشد.

چگونه اشتباهات قبلی خود را جبران کنیم؟

اینکه بخواهید تمامی تگ‌های اشتباه گذشته را جبران کنید واقعا کار دشواریست اما باید به فکر باشید. تمام صفحاتی که برچسب‌های تکی دارند را حذف کنید و البته از افزونه‌های ریدایرکت برای آن استفاده کنید. برای این 

منبع:https://zhaket.com/choose-the-best-tags/

از فرم‌ سازها در وردپرس چه استفاده‌ای می‌توان کرد؟

از فرم‌ سازها در وردپرس چه استفاده‌ای می‌توان کرد؟

 ۱۷:۲۸ ۱۳۹۷-۱۲-۰۵

زمانی که وارد وبسایتی می‌شوید، دست کم یک صفحه برای برقراری ارتباط با صاحبان سایت مشاهده می‌کنید که به کمک فرم سازها اجرا شده است. در واقع فرم سازها پلی برای رساندن پیامی از سمت کاربر به صاحب وبسایت هستند که می‌توانند در مورد موضوعات مختلفی باشند که دقیقا به نوع فعالیت سایت بستگی دارد. این فرم سازها چگونه ایجاد می‌شوند؟ در وردپرس، افزونه‌های متعددی برای ساخت انواع فرم‌ها وجود دارد که می‌توان بنا به نوع نیاز خود آن‌ها را انتخاب کرد. فرم‌ سازها در وردپرس در حالت‌های ساده و پیچیده موجودند که برخی معروف‌تر از بقیه هستند. گاهی با نصب یک افزونه می‌توانید انواع و اقسام فعالیت‌ها را اجرا کنید.
در این مقاله می‌خواهیم درباره فرم سازهای وردپرس کمی صحبت کنیم و برخی از بهترین گزینه‌ها را به شما معرفی کنیم. آیا موافقید؟

فرم‌ سازها در وردپرس

اگر وبسایت ساده‌ای دارید که به نظرتان نیازی به استفاده از هیچ فرم‌سازی ندارد، سخت در اشتباهید! هر چقدر هم که سایت شما به ایجاد فرم ها و پل ارتباطی بی‌نیاز باشد باز هم یک صفحه ارتباط با ما دارد که کاربران در صورت لزوم برایتان پیامی را ارسال کنند. پس هرگز فکر نکنید که در مورد استفاده از فرم‌ سازها در وردپرس بی‌نیاز هستید.

کاربرد فرم سازها

اما اگر می‌خواهید بدانید که فرم‌سازها چه کاربردهایی دارند، حتما به شما می‌گوییم. همان‌طور که گفتیم فرم‌سازها در هر نوعی که طراحی شوند وظیفه انتقال پیام را برعهده دارند. اما این نوع پیام متفاوت است:

• فرم تماس با ما برای انتقال پیامی از سمت کاربر به مدیریت سایت
• فرم استخدام، جهت پر کردن فیلدهای استخدامی توسط متقاضی شغل و ارسال آن به سایت
• فرم نظرسنجی، جهت پر کردن فیلد سوالات و ارسال آن برای سایت
• فرم ارسال مطلب جهت ارسال مقالات و نوشته‌ها به عنوان پست مهمان برای وبسایت‌ها
• فرم شرکت در همایش، کارگاه‌های آموزشی و… جهت ثبت‌نام در چنین مکان‌هایی
• فرم عضویت در سایت
• فرم ورود به سایت
• فرم عضویت‌های ویژه
• و…

همان‌طور که گزینه‌های بالا را بررسی می‌کنید، مشخص می‌شود که ما باید برای اهداف خود از فرم‌ سازها در وردپرس یا هر نوع سیستم دیگری کمک بگیریم. حال سوالی که مطرح می‌شود اینجاست که چگونه بدانیم کدامیک از فرم‌ سازها در وردپرس را برای فعالیت‌های خود انتخاب کنیم؟ برای اینکه به شما در انتخاب کنیم چند نوع فرم‌ساز را در نظر گرفته و برایتان معرفی می‌کنیم.

۱- فرم ساز Gravity Forms Farsi

یکی از حرفه‌ای‌ترین فرم‌ سازها در وردپرس، Gravity forms است که مطمئنا نام آن را شنیده یا با آن کار می‌کنید. جالب است بدانید این فرم‌ساز تمامی امکانات را در خود داشته و به کمک آن می‌توانید هر نوع فرمی را بسازید. فیلدهای مختلفی دارد که تنها نیاز به دستان توانمند شما جهت سفارشی‌سازی دارد. اگر بخواهیم دقیق درباره ویژگی‌های آن صحبت کنیم می‌توان گفت که این فرم‌ساز امکان ایجاد:

• فرم‌های چند صفحه‌ای
• تنظیمات فرم بصورت کامل
• محدودیت داده‌های ورودی
• فیلدهای پیشرفته
• زمانبندی فرم‌ها
• فیلدهای استاندارد
• فیلدهای قیمت‌گذاری
• فیلدهای نوشته
• فیلدهای فرم
• فیلدهای گزینه‌ای
• روش‌های حمل و نقل
• مجموع فیلدها
• مدیریت داده‌های ورودی
• جزئیات ورود
• برون‌بری داده‌ها
• اعلان‌ها
• اعلان‌های ایمیلی
• منطق شرطی
• ادغام فیلدها
• ایمیل‌های HTML
• سفارشی‌سازی
• بارگذاری فرم
• واگذاری فرم
• و…

را دارد.

۲- افزونه Profile Builder Pro

یکی از مشکلاتی که برخی کاربران با وردپرس دارند، عدم امکان ساخت پروفایل کاربریست. گاهی وبسایت شما احتیاجی به پنل کاربری برای کاربران ندارد اما گاهی هم سایتی دارید که حتما باید چنین پنلی را ایجاد کند. پس تکلیف چیست؟ افزونه profile builder به شما امکان ساخت یک پنل کاربری حرفه‌ای را می‌دهد. این افزونه دارای امکانات زیر است:

• دارای تنظیمات کامل در پنل مدیریت
• قابلیت تنظیم نوار ابزار مدیریت
• صفحه مدیریت کاربری
• قابلیت ساخت بیشمار فرم عضویت
• قابلیت ساخت بینهایت فرم ویرایش حساب کاربری
• نمایش لیست کاربران
• سفارشی‌سازی ایمیل‌های مدیریت
• سفارشی‌کننده ایمیل‌های کاربری
• تغییر مسیر دلخواه
• ماژول‌ها
• و…

۳- فرم ساز پیشرفته وردپرس Quform

یکی دیگر از فرم‌ سازها در وردپرس، Quform است که یک افزونه قدرتمند به حساب آمده و امکانات خوبی دارد. بهترین مزیت آن رابط کاربری استاندارد است. این فرم‌ساز دارای امکانات زیر است:

• افزودن فرم های چند صفحه ای
• افزودن منطق های شرطی به صفحات
• افزودن المان افزودن ستون جدید(چند ستونه کردن)
• امکان ویرایش ورودی های کاربران
• افزودن دکمه ی کپی کردن المان در فرم ساز
• افزودن تنظیمات “در حال بارگزاری”
• افزودن منطق شرطی برای اعلان ها
• امکان تعیید میزان دسترسی به نقش های مختلف کاربری
• افزودن تنظیمات آیکن فیلدها و برچسب ها
• امکان تنظیم تصویر پس زمینه و آین چک باکس ها و دکمه های رادیویی
• افزودن تنظیمات ریسپانسیو فرم برای عناصر و ستون ها
• حذف تنظیمات ارسال ایمیل(ارسال ایمیل به جهت امکان تعامل با سایر پلاگی ن ها از wp_mail() استفاده می کند)
• و…

۴- افزونه عضویت حرفه ای وردپرس Ultimate Member

افزونه Ultimate member مخصوص ساخت فرم‌های عضویت در وردپرس است. این افزونه دارای قابلیت‌های جالبی جهت ایجاد و ساخت فرم‌های عضویت است که برخی از آن‌ها عبارت است فرم ساز دراگ و دراپ و امکان ثبت نام و ورود از طریق شبکه های اجتماعی ، امکان ساخت شبکه اجتماعی ، دارای پروفایل کاربری و امکان ارسال پیام توسط کاربران به یکدیگر ، امکان ارسال پیام از طرف مدیر و امکان ارسال اطلاعیه به تمام کاربران سایت ، دارای کدکپچای گوگل برای جلوگیری از اسپم ها و امکان فالو و آنفالو کردن کاربران و امکانات بسیاری دیگر ….
افزونه‌های جانبی این افزونه عبارت است از:

• افزونه Google reCAPTCHA
• افزونه MailChimp
• افزونه Followers
• افزونه Private Messages
•  افزونه Social Activity
• افزونه bbPress
• افزونه Social login
• افزونه User Tags
• افزونه Notices
• افزونه instagram
• افزونه myCRED
• افزونه notifications
• و…

نتیجه نهایی

اگر به دنبال تعامل بیشتر با کاربران خود هستید و می‌خواهید نظر آن‌ها را جلب کنید، پیشنهاد می‌کنیم حتما از قدرت فرم سازها در وردپرس استفاده کنید. فقط کافیست کمی زمان بگذارید و فرم‌سازها را شناسایی کنید تا بتوانید برای هر منظوری با کمک فرم سازها می‌توانید پل ارتباطی بین خود و کاربران بزنید. در این مقاله ۴ مورد از بهترین فرم‌سازها را برایتان معرفی کردیم که به کمک آن‌ها تقریبا می‌توانید هر نوع فرمی را طراحی کرده و در سایت خود قرار دهید.

منتظر نظرات و پیشنهادات سازنده شما هستیم.

منبع: ژاکت

سرویس نجوا، راهکار بازاریابی دیجیتال حرفه‌ای و قدرتمند

سرویس نجوا، راهکار بازاریابی دیجیتال حرفه‌ای و قدرتمند

 ۱۹:۱۹ ۱۳۹۷-۱۲-۰۵

معرفی سرویس و افزونه وردپرس نجوا

نجوا پلتفرم ارسال اعلان (Push Notification) می‌باشد که با هدف تقویت ارتباط بین وب‌سایت‌ها، اپلیکیشن‌ها و کاربران آن‌ها ایجاد شده است.

شما به عنوان صاحبان کسب‌و‌کارهای اینترنتی پس از یک‌پارچه‌سازی وب‌سایت و اپلیکیشن خود با نجوا، می‌توانید کاربران سرویس خود را شناسایی کرده و آن‌ها را جذب نمایید. با ارسال پوش نوتیفیکیشن در زمان مناسب، آن‌ها را به وب‌سایت و اپلیکیشن خود‌ بازگردانده و با ارسال نوتیفیکیشن شخصی‌سازی شده متناسب با علایق و ویژگی‌های کابران، ضمن راضی نگه‌داشتن‌ آن‌ها، شبکه مخاطبان وفادار را گسترش دهید. به این ترتیب به عنوان کسب‌وکارهای مختلف در دنیای مجازی روابط بین خود و کاربران‌تان را دائمی و باکیفیت‌تر کنید.

اعلان یا پوش نوتیفیکیشن چیست؟

یک اعلان یا پوش نوتیفیکیشن پیغامی است که از وب‌سایت یا اپلیکیشن ارسال شده و بر روی کامپیوتر و موبایل مخاطب نمایش داده می‌شود. برای دریافت پوش نوتیفیکیشن، نیازی به باز بودن اپلیکیشن یا وب‌سایت فرستنده نمی‌باشد. این پیغام می‌تواند حاوی عکس، عنوان، توضیحات و لینک باشد که مخاطبان از طریق کلیک بر روی آن به لینک مورد نظر هدایت می‌شوند. نمونه‌ای از یک پوش نوتیفیکیشن در زیر نمایش داده شده است:

چرا پوش‌ نوتیفیکیشن وب برای سرویس‌های اینترنتی ضروری است؟

• با جذب کاربران جدید، ترافیک وب‌سایت شما را تا %۳۰ افزایش می‌دهد.
• شانس بازگشت کاربران‌ را تا ٪۸۰ بیش‌تر کرده و شبکه کاربران وفادارتان را گسترش می‌دهد.
• با یادآوری منظم وب‌سایت شما، زمان باز‌گشت کاربران‌تان را تا %۶۵ در ماه کاهش می‌دهد.
• نرخ تعامل کاربر با وب‌سایت و اپلیکیشن‌تان را تا %۶۰ افزایش می‌دهد.
• با یادآوری خریدهای نیمه‌تمام، سود شما را تا %۴۵ افزایش می‌دهد.

مقایسه پوش نوتیفیکیشن با سایر سرویس‌ها بازاریابی

ویژگی‌ها	ایمیل	پیام کوتاه	پوش نوتیفیکیشن
نرخ باز شدن	کم	زیاد	زیاد
طول پیام	طولانی	متوسط	کوتاه
زمان باز شدن	زیاد	سریع	خیلی سریع
تعامل کاربر	کم	متوسط	زیاد
رسیدن به هدف	کم	متوسط	زیاد
نرخ تبدیل	کم	متوسط	زیاد
نرخ جذب کاربر	کم	کم	زیاد
هزینه	متوسط	زیاد	کم

با نجوا می‌توانید نوتیفیکیشن خود را

• به افراد مناسب ، در زمان مناسب، به مکان مناسب، به صورت نامحدود، به تعداد نامحدود کاربر و متناسب با میزان وفاداری و فعالیت کاربران‎تان یا متناسب با دستگاه یا ورژن اپلیکیشن و سیستم ‌عامل کاربر ارسال کنید.
• از طریق API به صورت برنامه نویسی شده برای کاربران خود از سمت سرور خود نوتیفیکیشن ارسال کنید.
• گزارش پوش نوتیفیکیشن ارسالی خود را به صورت Real-time در یافت کرده و با همکاران خود به اشتراک بگذارید.
• از پنل نجوا برای کاربران خود در سرویس‌های ONE-SIGNAL، SENDPULSE، FUX-PUSH و FIREBASE نوتیفیکیشن ارسال کنید.
• با قرار دادن کد جاوااسکریپت نجوا بر روی وب‌سایت خود پوش نوتیفیکیشن را در چندین مرورگر داشته‌ باشید و از SDK اندروید آن در اپلیکیشن خود استفاده کنید.
• با توجه به موضوع پوش نوتیفیکیشن اپلیکیشن می‌توانید امکاناتی از قبیل باز کردن URL، باز کردن صفحه شماره گیر، SMS، اپلیکیشن، باز کردن اکتیویتی خاصی از اپلیکیشن، عضو شدن در کانال تلگرام، باز کردن نقشه گوگل و به‌اشتراک گذاری نوتیفیکیشن را فعال کنید.

معرفی افزونه وردپرس نجوا

صاحبان وب‌سایت‌های وردپرسی می‌توانند با نصب افزونه وردپرس در پنل وردپرس خود، از بیشتر امکانات موجود در پنل نجوا بهره‌مند شوند. با وارد کردن توکن و API-KEY وب‌سایت خود در افزونه وردپرس، می‌توانید پنل نجوای خود را  به پنل وردپرس‌ متصل نمایید.

به کمک افزونه وردپرسی نجوا می‌توانید:

• اسکریپت نجوا را در تگ هد وب‌سایت خود قرار دهید.
• تعیین کنید پلاگین برای نوشته‌ها، برگه‌ها و محصولات شما، یا هر سه فعال باشد.
• تنظیمات پیغام درخواست را انجام دهید.
• تنظیمات نمایش زنگوله را انجام دهید.
• تنظیمات آنالیتیکس را انجام دهید.
• تنظمیات نمایش پیغام درخواست را انجام دهید.
• پوش نوتیفیکیشن را برای هر محصول، نوشته یا برگه به صورت فوری یا زمان‌بندی شده ارسال کنید.
• ارسال پوش نوتیفیکیشن را قبل از زمان ارسال کنسل کنید.
• پوش نوتیفیکیشن را برای گروه‌های خاص ارسال کنید.

منبع: ژاکت

چگونه تبلیغات هوشمندانه‌ ای برای سایت خود راه‌اندازی کنیم؟

وقتی حرف از تبلیغات در سایت‌ها به میان می‌آید، متاسفانه بخشی از ذهن ما انرژی منفی را دریافت می‌کند. تقصیر از ذهنیت ما نیست، زیرا بعضی از سایت‌ها با روش‌های اشتباهی تبلیغات راه انداختند و حال فکر می‌کنیم منظور از تبلیغات اینترنتی دقیقا همان کاریست که آن‌ها می‌کنند. اما این چنین نیست؛ هر چیزی را اگر طبق قوانین درست انجام دهید نه تنها باعث رنجش و آزار کاربران نمی‌شود، بلکه برای آن‌ها سودمند نیز هست. پس نتیجه این شد که به سراغ تبلیغات هوشمندانه‌ برای سایت باشیم. اما چگونه؟ همراه ما باشید تا در این مقاله پیرامون این مسئله صحبت کنیم.

تبلیغات هوشمندانه‌ برای سایت

هر کاری که برای پیشرفت سایتمان می‌کنیم خوب است اما شاید به پای تبلیغات اینترنتی نرسد. در واقع میزان تاثیرگذاری تبلیغات در سایت‌ها به گونه‌ایست که هم می‌تواند یک منبع درآمد برای صاحب وبسایت باشد و هم می‌تواند تاثیر بسزایی بر روی سایت تبلیغ دهنده داشته باشد. پس در واقع می‌توانیم بگوییم یک معامله دو سر سود است؛ به شرطی که از نوع تبلیغات هوشمندانه‌ برای سایت باشد.

چرا باید تبلیغ کنیم؟

سوالی که همین ابتدا لازم است به آن پاسخ دهیم، این است که چرا اصلا باید تبلیغ کنیم؟ مگر شما نمی‌خواهید وبسایت شناخته شده‌ای باشید و محصول و خدمات خود را به کاربران معرفی کنید؟ چه روش‌هایی را برای این منظور در نظر گرفته‌اید؟

حتما می‌گویید تمامی فاکتورهای سئو را رعایت می‌کنید. درست است! اما تبلیغات نیز یکی دیگر از عواملی است که تاثیر بسزایی بر فروش شما دارد. به شرط آنکه درست انجام شده و در سایت‌های خوبی قرار گیرد. از این هم نباید غافل شوید که تبلیغات هوشمندانه‌ برای سایت است که باعث افزایش درآمد کسب و کارتان می‌شود.
بسیاری از وبسایت‌های معتبر این روش را همیشه برای خود در نظر دارند و هرزچندگاهی تبلیغات خود را بصورت رپورتاژ آگهی، تبلیغات بنری و… به سایر وبسایت‌های معتبر می‌دهند تا کاربران جدیدی جمع کنند.

انواع تبلیغات اینترنتی در سایت‌ها

تبلیغات در وبسایت‌ها نیز روش‌های مختلفی دارد که انواع تبلیغات هوشمندانه‌ برای سایت را با هم بررسی می‌کنیم.

۱- تبلیغات بنری

معمولا تبلیغات بنری نوعی از تبلیغات بسیار رایج است که از گذشته تا کنون مورد استفاده قرار می‌گرفته. با توجه به اندازه‌ای که سایت‌ها برای تبلیغات بنری در نظر می‌گیرند، می‌توانید بنر خود را طراحی کرده و در اختیارشان قرار دهید. گاهی این بنرها می‌توانند به اندازه اسلایدر یک سایت طراحی شوند، گاهی در سایدبار قرار می‌گیرند و گاهی هم در بین نوشته‌ها.

۲- تبلیغات متنی

این نوع از تبلیغات معمولا با عنوان رپورتاژ آگهی در برخی وبسایت‌ها پذیرفته می‌شوند. یک متن خبری- تبلیغاتی را برای وبسایت مربوطه به همراه تصویر آماده کرده و تحویل می‌دهید. آن‌ها نیز یک پست از سایت خود را به مطلب شما اختصاص می‌دهند. در رپورتاژ‌ها معمولا حق استفاده از دو الی سه لینک از صفحه وبسایت خود را دارید. و این خود یک موقعیت بزرگ برای شما به حساب می‌آید.

۳- پاپ آپ

حتما با پنجره‌های پاپ آپ آشنایی دارید. وارد برخی سایت‌ها که می‌شویم به ناگاه پنجره‌های تبلیغاتی برایمان باز می‌شوند که به آن‌ها پاپ آپ می گویند. البته استفاده از آن‌ها روش خاصی دارد تا کاربر را دچار خستگی و رنجش نکند. اینجاست که می‌گوییم باید تبلیغات هوشمندانه‌ برای سایت داشته باشید.

افزونه حرفه ای نینجا پاپ آپ Ninja popup

این افزونه همان‌طور که از نامش پیداست تبلیغات هوشمندانه‌ برای سایت را با کمک پاپ آپ به وجود می‌آورد. امکانات فوق‌العاده‌ای دارد که برخی از آن‌ها عبارت است از:

• قابلیت درون ریزی ۱۰۰ پاپ آپ آماده به طور کامل
• نمایش پاپ آپ هنگام خروج کاربر سایت
• باز شدن پاپ آپ بعد از اسکرول بخشی از صفحه
• باز شدن پاپ آپ با تاخیری مشخص
• هماهنگ با ردیابی های گوگل آنالیتیکس
• پیکربندی آسان پاپ آپ ها (بدون نیاز به کد نویسی!)
• طراحی عالی پاپ‌آپ ها (رنگ‌های زیاد، ویرایشگر با قابلیت‌ کشیدن و رها کردن، layout های مختلف)
• قابلیت سفارشی‌سازی بالا
• افکت های انیمیشن زیبا
• هماهنگی کامل با API سرویس‌های مختلف ایمیل
• امکان ایجاد تعداد نامحدود پاپ آپ
• نمایش پاپ آپ هنگام بارگذاری صفحات سایت
• نمایش پاپ آپ هنگام بستن و یا ترک کردن صفحه
• امکان درج پاپ آپ برای صفحه یا نوشته‌ای خاص (با قابلیت انتخاب پاپ خوش آمد در دسکتاپ و موبایل و پیام خروج در دسکتاپ و موبایل)
• قفل محتوا با پاپ آپ شبکه های اجتماعی
• قفل محتوا با پاپ آپ اشتراک در خبرنامه
• نگه داشتن بیشتر کاربر در صفحه
• تجزیه و تحلیل پیشرفته از پاپ آپ ها
• پنل تنظیمات حرفه ای

۴- تبلیغات ویدئویی

ویدئو همیشه موثرترین روش ارائه مطلب به مخاطب است. معمولا سایتی مانند آپارات بهترین جایگاه برای قرارگیری ویدئو است. فرقی ندارد ویدئوی شما آموزشی باشد یا تبلیغاتی! به هر صورت می‌توانید آن را همراه با اطلاعاتی در آپارات بارگذاری کنید. هر چقدر ویدئوی شما بهتر باشد، مسلما مخاطبان بیشتری جذب آن خواهند شد. این مورد نیز جزء تبلیغات هوشمندانه‌ برای سایت به حساب می‌آید.

۵- ایمیل مارکتینگ

یک روش آشنا و همیشگی انجام ایمیل مارکتینگ یا بازاریابی ایمیلی است. این روش هرگز منسوخ نمی‌شود و همیشه جزء بهترین روش‌های ممکن است که می‌توان به کمک آن اطلاعات خوبی را به کاربران منتقل کرد به شرط آنکه تبلیغات هوشمندانه‌ برای سایت را شامل شود.

 افزونه حرفه‌ای ایجاد فرم‌های عضویت در خبرنامه بلوم Bloom

با کمک این افزونه می‌توان فرم‌های عضویت در خبرنامه ایجاد کرد که با خبرنامه بلوم در ارتباط است. کاربر با پر کردن اطلاعات خود توسط این فرم‌ها در خبرنامه شما عضو شده و در زمان ارسال ایمیل، امکان دریافت را پیدا می‌کند.

جمع بندی

چنانچه می‌خواهید از طریق تبلیغات جواب درستی بگیرید باید تبلیغات هوشمندانه‌ برای سایت پیدا کنید. به همین راحتی نمی‌توان هوشمند بود و درست عمل کرد. پس دقت کنید، مطالعه کنید و ابزارهای درستی را انتخاب نمایید.

منبع: ژاکت

رسم گرافیک با جاوا اسکریپت (بخش دوم) — راهنمای جامع

در بخش قبلی این مطلب با عنوان رسم گرافیک با جاوا اسکریپت در مورد برخی مباحث مقدماتی مرتبط با رسم گرافیک‌های دو بعدی در جاوا اسکریپت صحبت کردیم. اینک بخش دوم آن را ارائه می‌کنیم. برای مطالعه بخش قبلی روی لینک زیر کلیک کنید:

• رسم گرافیک با جاوا اسکریپت (بخش اول) — راهنمای جامع

حلقه‌ها و انیمیشن‌ها

تا به اینجا برخی از کاربردهای اولیه بوم 2 بعدی را معرفی کردیم، اما در عمل تا زمانی که بوم را به‌روزرسانی یا انیمیت نکرده‌اید هنوز از قدرت کامل بوم استفاده نکرده‌اید. در نهایت بوم، تصاویر قابل اسکریپت‌نویسی عرضه می‌کند. اگر قصد ندارید چیزی را تغییر دهید، در این صورت شاید بهتر باشد از تصاویر استاتیک استفاده و در وقت خود نیز صرفه‌جویی کنید.

ایجاد یک حلقه

کار کردن با حلقه‌ها در بوم تا حدی سرگرم‌کننده است، چون می‌توانید دستورهای بوم را درست مانند همه کدهای جاوا اسکریپت درون یک حلقه for اجرا کنید. در ادامه یک مثال ارائه می‌کنیم.

یک کپی از فایل زیر روی سیستم خود تهیه کنید.

فایل canvas_template.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<!DOCTYPE html> <html>   <head>     <meta charset="utf-8">     <title>Canvas</title>     <style>       body {         margin: 0;         overflow: hidden;       }     </style>   </head>   <body>     <canvas class="myCanvas">       <p>Add suitable fallback here.</p>     </canvas>       <script>       var canvas = document.querySelector('.myCanvas');       var width = canvas.width = window.innerWidth;       var height = canvas.height = window.innerHeight;       var ctx = canvas.getContext('2d');       ctx.fillStyle = 'rgb(0,0,0)';       ctx.fillRect(0,0,width,height);     </script>   </body> </html>

فایل را در ادیتور کد باز کنید.

خط زیر را به انتهای جاوا اسکریپت اضافه کنید. این کد شامل یک متد جدید به نام ()translate است که نقطه مبدأ بوم را جابجا می‌کند:

ctx.translate(width/2, height/2);4

این امر موجب می‌شود که مبدأ (0, 0) به مرکز بوم جابجا شود و دیگر در گوشه چپ-بالا نباشد. این وضعیت در موقعیت‌های زیادی مانند این مثال مفید است چون می‌خواهیم طراحی ما نسبت به مرکز بوم ترسیم شود.

سپس کد زیر را به انتهای جاوا اسکریپت اضافه کنید:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

function degToRad(degrees) {   return degrees * Math.PI / 180; };   function rand(min, max) {   return Math.floor(Math.random() * (max-min+1)) + (min); }   var length = 250; var moveOffset = 20;   for(var i = 0; i < length; i++) {   }

در کد فوق ما یک تابع ()degToRad پیاده‌سازی کرده‌ایم که در مثال مثلث قبلی دیدیم. یک تابع ()a نیز وجود دارد که عددی تصادفی بین کران‌های بالا و پایین تعیین‌شده بازگشت می‌دهد، متغیرهای length و moveOffset و یک حلقه for خالی نیز وجود دارند.

ایده این است که چیزی روی بوم و درون حلقه for رسم کنیم و هر بار روی آن تکرار کنیم به طوری که بتوانیم چیز جالبی رسم کنیم. کد زیر را درون حلقه for اضافه کنید:

1 2 3 4 5 6 7 8 9 10 11 12

ctx.fillStyle = 'rgba(' + (255-length) + ', 0, ' + (255-length) + ', 0.9)'; ctx.beginPath(); ctx.moveTo(moveOffset, moveOffset); ctx.lineTo(moveOffset+length, moveOffset); var triHeight = length/2 * Math.tan(degToRad(60)); ctx.lineTo(moveOffset+(length/2), moveOffset+triHeight); ctx.lineTo(moveOffset, moveOffset); ctx.fill();   length--; moveOffset += 0.7; ctx.rotate(degToRad(5));

بدین ترتیب در هر تکرار حلقه کارهای زیر صورت می‌گیرند:

• fillStyle به صورت سایه‌ای از رنگ بنفش کمی شفاف تعیین می‌شود که هر بار بر مبنای مقدار length عوض می‌شود. چنان که در ادامه خواهیم دید، این length هر بار که حلقه اجرا می‌شود کوچک‌تر می‌شود و بدین ترتیب جلوه‌ای که ایجاد می‌شود چنین است که رنگ هر بار با ترسیم مثلث بعدی روشن‌تر می‌شود.
• مسیر آغاز می‌شود.
• قلم به مختصات (moveOffset, moveOffset) جابجا می‌شود. این متغیر میزان فاصله‌ای که می‌خواهیم هر بار یک مثلث ترسیم شود تعیین می‌کند.
• یک خط به مختصات (moveOffset+length, moveOffset) رسم می‌کنیم. بدین ترتیب خطی به طول length موازی با محور X رسم می‌شود.
• ارتفاع مثلث را مانند قبل تعیین می‌کنیم.
• یک خط به گوشه رو به پایین مثلث رسم می‌کنیم و سپس یک خط به پشت نقطه آغاز مثلث می‌کشیم.
• ()fill برای پر کردن داخل مثلث فراخوانی می‌شود.
• متغیرهایی که توالی مثلث‌ها را تعیین می‌کنند به‌روزرسانی می‌کنیم، بنابراین می‌توانیم برای رسم مثلث بعدی آماده باشیم. مقدار length را یک واحد افزایش می‌دهیم و از این رو مثلث‌ها هر بار کوچک‌تر می‌شوند. moveOffset را مقدار کمی افزایش می‌دهیم، بنابراین هر بار که مثلث کمی دورتر می‌رود، از تابع ()rotate جدیدی استفاده می‌کنیم به طوری که می‌توانیم کل بوم را بچرخانیم. ما آن را 5 درجه پیش از رسم مثلث بعدی می‌چرخانیم.

در نهایت مثال ما باید به شکل زیر درآمده باشد:

در این مرحله شما را تشویق می‌کنیم که با این مثال بیشتر کار کنید و تغییرات دلخواه خود را در آن ایجاد کنید. برای نمونه می‌توانید:

• مستطیل‌ها یا کمان‌هایی به جای مثلث رسم کنید یا حتی تصاویری جاسازی نمایید.
• با مقادیر length و moveOffset بازی کنید.
• اعدادی تصادفی با استفاده از تابع ()rand که قبلاً معرفی کردیم، ولی مورد استفاده قرار ندادیم، تولید کنید.

نکته: کد کامل این مثال به صورت زیر است:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

<!DOCTYPE html> <html>   <head>     <meta charset="utf-8">     <title>Canvas</title>     <style>       body {         margin: 0;         overflow: hidden;       }     </style>   </head>   <body>     <canvas class="myCanvas">       <p>Add suitable fallback here.</p>     </canvas>       <script>       var canvas = document.querySelector('.myCanvas');       var width = canvas.width = window.innerWidth;       var height = canvas.height = window.innerHeight;       var ctx = canvas.getContext('2d');       ctx.fillStyle = 'rgb(0,0,0)';       ctx.fillRect(0,0,width,height);       ctx.translate(width/2, height/2);       function degToRad(degrees) {         return degrees * Math.PI / 180;       };       function rand(min, max) {         return Math.floor(Math.random() * (max-min+1)) + (min);       }       var length = 250;       var moveOffset = 20;       for(var i = 0; i < length; i++) {         ctx.fillStyle = 'rgba(' + (255-length) + ',0,' + (255-length) + ',0.9)';         ctx.beginPath();         ctx.moveTo(moveOffset,moveOffset);         ctx.lineTo(moveOffset+length,moveOffset);         var triHeight = length/2 * Math.tan(degToRad(60));         ctx.lineTo(moveOffset+(length/2),moveOffset+triHeight);         ctx.lineTo(moveOffset,moveOffset);         ctx.fill();         length--;         moveOffset+=0.7;         ctx.rotate(degToRad(5));       }     </script>   </body> </html>

انیمیشن‌ها

مثال حلقه‌ای که در بخش قبل ساختیم جالب بود، اما شما به یک حلقه ثابت نیاز دارید که در همه اپلیکیشن‌های جدی بوم مانند بازی یا بصری‌سازی آنی، به طور مکرر از آن استفاده کنید. اگر بوم را مانند یک فیلم تصور کنیم ما به یک نمایشگر نیاز داریم که در هر فریم به‌روزرسانی شود تا نمای به‌روز را نشان دهد. نرخ رفرش مناسب 60 فریم بر ثانیه است تا حرکت‌ها به چشم انسان زیبا و روان باشند.

چند تابع جاوا اسکریپت وجود دارند که امکان اجرای مکرر تابع‌ها را چندین بار در طی یک ثانیه فراهم می‌سازند، اما بهترین آن‌ها برای منظور ما ()window.requestAnimationFrame است. این تابع یک پارامتر می‌گیرد که نام تابعی است که می‌خواهید در هر فریم اجرا شود. دفعه بعد که مرورگر آماده به‌روزرسانی صفحه باشد، تابع شما فراخوانی می‌شود. اگر آن تابع به‌روزرسانی جدیدی در انیمیشن شما رسم کند، در این صورت بار دیگر درست قبل از انتهای تابع فراخوانی می‌شود و حلقه انیمیشن همین طور تداوم می‌یابد. حلقه زمانی متوقف می‌شود که ()requestAnimationFrame را فراخوانی کنید و یا ()window.cancelAnimationFrame را پس از فراخوانی ()requestAnimationFrame اما قبل از فراخوانی فریم، اجرا کنید.

نکته: فراخوانی ()cancelAnimationFrame از کد اصلی در زمان پایان یافتن کارمان با انیمیشن، ایده خوبی است زیرا مطمئن می‌شویم که هیچ به‌روزرسانی در انتظار اجرا شدن نیست.

مرورگر جزییات پیچیده‌ای مانند اجرای انیمیشن با سرعت یکنواخت و عدم هدر دادن منابع برای انیمیت چیزهایی که دیده نمی‌شوند را خود بر عهده می‌گیرد.

برای این که ببینید طرز کار آن چگونه است، مجدداً نگاهی سریع به مثال توپ‌های رقصان خود می‌اندازیم. کد حلقه که همه چیز را در حال حرکت حفظ می‌کند به صورت زیر است:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

function loop() {   ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';   ctx.fillRect(0, 0, width, height);     for(let i = 0; i < balls.length; i++) {     balls[i].draw();     balls[i].update();     balls[i].collisionDetect();   }     requestAnimationFrame(loop); }   loop();

ما تابع ()loop را یک بار در انتهای کد برای آغاز چرخه اجرا می‌کنیم و نخستین فریم انیمیشن را رسم می‌کنیم. سپس تابع ()loop مسئولیت فراخوانی (requestAnimationFrame(loop را برای اجرای فریم بعدی انیمیشن به طور مکرر بر عهده می‌گیرد.

توجه کنید که هر فریم به صورت کامل بوم را پاک و همه چیز را از تو رسم می‌کند. در مورد هر توپی که وجود دارد ما آن را رسم می‌کنیم، موقعیتش را به‌روزرسانی می‌کنیم و بررسی می‌کنیم که آیا با توپ‌های دیگر برخورد دارد یا نه. زمانی که یک گرافیک روی بوم رسم می‌کنید، هیچ راهی برای دستکاری منفرد گرافیک مانند کاری که روی عناصر DOM انجام می‌دهیم وجود ندارد. ما نمی‌توانیم هیچ توپی را روی بوم جابجا کنیم، زیرا زمانی که رسم شد جزئی از بوم می‌شود و عنصر یا شیء منفردی نیست که بتوان با آن تعامل داشت. به جای آن می‌توان بوم را پاک کرد و دوباره نو رسم کرد و این کار یا از طریق پاک کردن و رسم مجدد همه چیز و یا با داشتن کدی که دقیقاً می‌داند کدام بخش‌ها باید پاک شوند و تنها آن نواحی مورد نیاز مجدداً روی بوم رسم شوند ممکن است.

بهینه‌سازی انیمیشن گرافیک‌ها یک بحث کاملاً تخصصی برنامه‌نویسی است که تکنیک‌های هوشمندانه زیادی دارد. با این حال بررسی این موارد خارج از حیطه این مقاله است.

به طور کلی فرایند انیمیشن بوم شامل گام‌های زیر است:

1. محتوای بوم پاک می‌شود (به وسیله ()fillRect یا ()clearRect)
2. حالت (در صورت نیاز) با استفاده از ()save ذخیره می‌شود. این مورد زمانی ضروری است که بخواهید تنظیماتی که روی بوم به‌روزرسانی کرده‌اید، پیش از ادامه ذخیره شوند و برای کاربردهای پیشرفته‌تر مفید است.
3. گرافیکی که می‌خواهید انیمیت کنید را رسم کنید.
4. تنظیماتی را که در گام 2 ذخیره کرده بودید با استفاده از ()restore بازیابی کنید.
5. ()requestAnimationFrame را فراخوانی کنید تا رسم فریم بعدی انیمیشن زمان‌بندی شود.

نکته: ما در مثال خود به بررسی ()save و ()restore نپرداختیم، اما در مقالات بعدی این سری مطالب آموزشی به آن خواهیم پرداخت.

یک انیمیشن ساده کاراکتر

اینک نوبت به ایجاد یک انیمیشن ساده رسیده است. به این منظور یک کاراکتر از یک بازی جالب را انتخاب کرده‌ایم که روی صفحه راه می‌رود. یک کپی از فایل زیر روی رایانه خود ایجاد کنید:

فایل canvas_template.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<!DOCTYPE html> <html>   <head>     <meta charset="utf-8">     <title>Canvas</title>     <style>       body {         margin: 0;         overflow: hidden;       }     </style>   </head>   <body>     <canvas class="myCanvas">       <p>Add suitable fallback here.</p>     </canvas>       <script>       var canvas = document.querySelector('.myCanvas');       var width = canvas.width = window.innerWidth;       var height = canvas.height = window.innerHeight;       var ctx = canvas.getContext('2d');       ctx.fillStyle = 'rgb(0,0,0)';       ctx.fillRect(0,0,width,height);     </script>   </body> </html>

آن را در ادیتور کد باز کنید. یک کپی از فایل walk-right.png (+) نیز در همان دایرکتوری ایجاد کنید. در انتهای جاوا اسکریپت خط زیر را اضافه کنید تا یک بار دیگر مختصات مقدار را در میانه بوم قرار دهیم:

1	ctx.translate(width/2, height/2);

اکنون یک شیء HTMLImageElement جدید ایجاد کنید، src آن را تصویری که می‌خواهید بارگذاری شود تعیین کنید و یک دستگیره رویداد onload اضافه کنید که موجب می‌شود تابع ()draw زمانی که تصویر بارگذاری می‌شود اجرا گردد.

1 2 3

var image = new Image(); image.src = 'walk-right.png'; image.onload = draw;

اکنون برخی متغیرها اضافه می‌کنیم تا رد موقعیت تصویری که روی صفحه رسم می‌شود و تعداد تصاویری که می‌خواهیم نمایش یابد را داشته باشیم.

1 2	var sprite = 0; var posX = 0;

در ادامه تصویر spritesheet را توضیح می‌دهیم. تصویر به صورت زیر است:

این تصویر شامل شش اسپریت است که کل توالی راه رفتن را می‌سازند و هر یک 102 پیکسل عرض و 148 پیکسل ارتفاع دارند. برای نمایش هر اسپریت به صورت واضح باید از ()drawImage استفاده کنید تا یک تصویر را از اسپریتشیت برش داده و تنها آن بخش را نمایش دهد. این شبیه کاری است که در مورد لوگوی فایرفاکس قبلاً انجام دادیم. مختصات X قطعه باید مضربی از 102 باشد و مختصات Y همواره 0 است. اندازه قطعه همواره 102 در 148 پیکسل است.

اینک یک تابع ()draw خالی در انتهای کد درج می‌کنیم که آماده کدنویسی است:

1 2	function draw() { };

بقیه کد در این بخش درون draw()‎ قرار می‌گیرد. ابتدا خط زیر را اضافه می‌کنیم که بوم را پاک می‌کند و آماده رسم هر فریم می‌شویم. توجه کنید که ما باید گوشه چپ-بالای مستطیل را به صورت -(width/2), -(height/2) تعیین کنیم زیرا مبدأ را قبلاً به صورت width/2, height/2 تعیین کرده‌ایم.

1	ctx.fillRect(-(width/2), -(height/2), width, height);

سپس تصویر خود را با استفاده از drawImage رسم می‌کنیم. ما از نسخه 9 پارامتری آن استفاده می‌کنیم:

1	ctx.drawImage(image, (sprite*102), 0, 102, 148, 0+posX, -74, 102, 148);

چنان که می‌بینید:

1. ما یک image به عنوان تصویری که باید جاسازی شود تعیین می‌کنیم.
2. پارامترهای 2 و 3 گوشه چپ-بالای قطعه برش یافته تصویر مبدأ را تعیین می‌کند، مقدار X به صورت sprite ضرب در 102 است که sprite شماره اسپریت بین 0 و 5 است و Y همواره برابر با صفر است.
3. پارامترهای 4 و 5 اندازه قطعه برش یافته یعنی 102 در 148 پیکسل است.
4. پارامترهای 6 و 7 گوشه چپ-بالای کادری که قطعه برش یافته در آن رسم می‌شود را تعیین می‌کنند. موقعیت X برابر با 0 + posX است یعنی می‌توانیم موقعیت رسم را با عوض کردن مقدار posX جابجا کنیم.
5. پارامترهای 8 و 9 اندازه تصویر روی بوم را تعیین می‌کند. ما می‌خواهیم اندازه اصلی آن را حفظ کنیم، بنابراین 102 و 108 را به ترتیب برای اندازه و ارتفاع وارد می‌کنیم.

اینک مقدار sprite را پیش از هر بار رسم عوض می‌کنیم. بلوک کد زیر را در انتهای تابع ()draw وارد کنید:

1 2 3 4 5 6 7

if (posX % 13 === 0) {     if (sprite === 5) {       sprite = 0;     } else {       sprite++;     }   }

ما کل بلوک را در بخش زیر وارد می‌کنیم:

1	if (posX% 13 === 0) { ... }

همچنین از عملگر پیمانه (%) برای بررسی این نکته که مقدار posX می‌تواند دقیقاً و بدون باقیمانده بر 13 تقسیم شود استفاده می‌کنیم. اگر چنین باشد با افزایش شماره sprite به اسپریت بعدی می‌رویم. این کار عملاً به این معنی است که ما تنها sprite را هر 13 فریم یک بار روی صفحه به‌روزرسانی می‌کنیم یا به عبارت دیگر نرخ رفرش ما 5 فریم بر ثانیه است. توجه کنید که ()requestAnimationFrame در صورت امکان با نرخ 60 فریم بر ثانیه فراخوانی می‌شود. ما عامدانه نرخ فریم را کندتر کرده‌ایم زیرا تنها شش اسپریت داریم که می‌توانیم نمایش دهیم و اگر در هر ثانیه 60 بار اسپریت را عوض کنیم، کاراکتر ما بسیار به سرعت راه می‌رود.

درون بلوک بیرونی از یک گزاره if…else استفاده می‌کنیم تا بررسی کنیم آیا مقدار sprite روی 5 قرار دارد یا نه. اگر آخرین اسپریت را نمایش دهیم sprite را روی 0 ریست می‌کنیم و در غیر این صورت آن را 1 واحد افزایش می‌دهیم.

سپس باید شیوه تغییر مقدار posX را در هر فریم بررسی کنیم. بلوک کد زیر را درست زیر کد قبلی اضافه کنید:

1 2 3 4 5 6 7

if(posX > width/2) {     newStartPos = -((width/2) + 102);     posX = Math.ceil(newStartPos / 13) * 13;     console.log(posX);   } else {     posX += 2;   }

ما از یک گزاره if … else دیگر استفاده می‌کنیم تا ببینیم آیا مقدار posX بزرگ‌تر از width/2 می‌شود یا نه. این بدان معنی است که کاراکتر ما از گوشه راست صفحه به بیرون می‌رود. اگر چنین باشد باید موقعیتی را محاسبه کنیم که کاراکتر را در سمت چپ، بخش چپ صفحه قرار می‌دهد و سپس posX را برابر با نزدیک‌ترین ضریب 13 آن عدد قرار دهیم. این مقدار باید ضریبی از 13 باشد چون در غیر این صورت بلوک کد قبلی کار نمی‌کند، چون posX هرگز برابر با ضریب 13 نخواهد بود.

اگر کاراکتر انیمیشن هنوز از لبه صفحه بیرون نرفته است مقدار posX را به میزان 2 واحد افزایش می‌دهیم. بدین ترتیب در هر بار رسم، کمی به سمت راست حرکت می‌کند.

در نهایت باید حلقه انیمیشن را با فراخوانی requestAnimationFrame()‎ در انتهای تابع draw()‎ به اجرا درآوریم:

1	window.requestAnimationFrame(draw);

بدین ترتیب و در نهایت مثال ما باید چیزی مانند زیر باشد:

نکته: کد نهایی این مثال به صورت زیر است:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

<!DOCTYPE html> <html>   <head>     <meta charset="utf-8">     <title>Canvas</title>     <style>       body {         margin: 0;         overflow: hidden;       }     </style>   </head>   <body>     <canvas class="myCanvas">       <p>Add suitable fallback here.</p>     </canvas>       <script>       var canvas = document.querySelector('.myCanvas');       var width = canvas.width = window.innerWidth;       var height = canvas.height = window.innerHeight;       var ctx = canvas.getContext('2d');       ctx.fillStyle = 'rgb(0,0,0)';       ctx.fillRect(0,0,width,height);       ctx.translate(width/2,height/2);       var image = new Image();       image.src = 'walk-right.png';       image.onload = draw;       var sprite = 0;       var posX = 0;       function draw() {         ctx.fillRect(-(width/2),-(height/2),width,height);         ctx.drawImage(image, (sprite*102), 0, 102, 148, 0+posX, -74, 102, 148);         if(posX % 13 === 0) {           if(sprite === 5) {             sprite = 0;           } else {             sprite++;           }         }         if(posX > width/2) {           newStartPos = -((width/2) + 102);           posX = Math.ceil(newStartPos / 13) * 13;           console.log(posX);         } else {           posX += 2;         }         window.requestAnimationFrame(draw);       };     </script>   </body> </html>

یک اپلیکیشن ساده برای رسم

به عنوان آخرین مثال این نوشته، یک اپلیکیشن بسیار ساده برای رسم معرفی می‌کنیم تا شیوه ترکیب حلقه انیمیشن را ورودی کاربر را نمایش دهیم. ما مراحل ساخت این مثال را مورد بررسی قرار نمی‌دهیم و صرفاً به بررسی بخش‌های جالب‌تر کد می‌پردازیم.

کد این مثال به صورت زیر است:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93

<!DOCTYPE html> <html>   <head>     <meta charset="utf-8">     <title>Canvas</title>     <style>       body {         margin: 0;         overflow: hidden;         background: #ccc;       }       .toolbar {         width: 150px;         height: 75px;         background: #ccc;         padding: 5px;       }       input[type="color"], button {         width: 90%;         margin: 0 auto;         display: block;       }       input[type="range"] {         width: 70%;       }        span {          position: relative;          bottom: 5px;        }     </style>   </head>   <body>     <div class="toolbar">       <input type="color" aria-label="select pen color">       <input type="range" min="2" max="50" value="30" aria-label="select pen size"><span class="output">30</span>       <button>Clear canvas</button>     </div>       <canvas class="myCanvas">       <p>Add suitable fallback here.</p>     </canvas>       <script>       var canvas = document.querySelector('.myCanvas');       var width = canvas.width = window.innerWidth;       var height = canvas.height = window.innerHeight-85;       var ctx = canvas.getContext('2d');       ctx.fillStyle = 'rgb(0,0,0)';       ctx.fillRect(0,0,width,height);       var colorPicker = document.querySelector('input[type="color"]');       var sizePicker = document.querySelector('input[type="range"]');       var output = document.querySelector('.output');       var clearBtn = document.querySelector('button');       // covert degrees to radians       function degToRad(degrees) {         return degrees * Math.PI / 180;       };       // update sizepicker output value       sizePicker.oninput = function() {         output.textContent = sizePicker.value;       }       // store mouse pointer coordinates, and whether the button is pressed       var curX;       var curY;       var pressed = false;       // update mouse pointer coordinates       document.onmousemove = function(e) {         curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);         curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);       }       canvas.onmousedown = function() {         pressed = true;       };       canvas.onmouseup = function() {         pressed = false;       }       clearBtn.onclick = function() {         ctx.fillStyle = 'rgb(0,0,0)';         ctx.fillRect(0,0,width,height);       }       function draw() {         if(pressed) {           ctx.fillStyle = colorPicker.value;           ctx.beginPath();           ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false);           ctx.fill();         }         requestAnimationFrame(draw);       }       draw();     </script>   </body> </html>

در ادامه این مثال را در حالت اجرایی مشاهده می‌کنید:

در ادامه به بررسی بخش‌های جالب‌تر کد می‌پردازیم. قبل از هر چیز رد مختصات X و Y ماوس و این که کلید ماوس کلیک شده یا نه را با متغیرهای curX ،curY و pressed حفظ می‌کنیم. زمانی که ماوس حرکت می‌کند یک مجموعه تابع به صورت دستگیره رویداد onmousemove اجرا می‌کنیم که مقادیر فعلی X و Y را دریافت می‌کند. همچنین از دستگیره‌های رویداد onmousedown و onmouseup برای تغییر مقدار pressed به true در زمانی که دکمه ماوس زده می‌شود استفاده می‌کنیم و زمانی که کلیدش رها شود آن را مجدداً به حالت false تعیین می‌کنیم.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

var curX; var curY; var pressed = false;   document.onmousemove = function(e) {   curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);   curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); }   canvas.onmousedown = function() {   pressed = true; };   canvas.onmouseup = function() {   pressed = false; }

زمانی که دکمه Clear canvas فشرده شود یک تابع ساده اجرا می‌کنیم که کل بوم را پاک می‌کند و به حالتی که قبلاً دیدیم درمی‌آید:

1 2 3 4

clearBtn.onclick = function() {   ctx.fillStyle = 'rgb(0, 0, 0)';   ctx.fillRect(0, 0, width, height); }

حلقه رسم کاملاً ساده است، اگر مقدار pressed به صورت true باشد، یک دایره رسم می‌کنیم که دارای استایل fill برابر با مقداری است که از انتخابگر رنگ به دست آمده است و شعاع نیز بر برابر با مقداری است که در ورودی range ارائه شده است.

1 2 3 4 5 6 7 8 9 10 11 12

function draw() {   if(pressed) {     ctx.fillStyle = colorPicker.value;     ctx.beginPath();     ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false);     ctx.fill();   }     requestAnimationFrame(draw); }   draw();

نکته: انواع <input> به صورت range و color تقریباً به خوبی روی همه مرورگرها پشتیبانی می‌شوند و تنها استثنا نسخه‌های زیر 10 اینترنت اکسپلورر است. البته سافاری نیز هنوز از color پشتیبانی نمی‌کند. اگر مرورگر شما از این ورودی‌ها پشتیبانی نمی‌کند به صورت فیلدهای متنی ساده fall back می‌شوند و می‌توانید مقادیر موردنظر رنگ/شماره را خودتان وارد کنید.

WebGL

اینک زمان آن رسیده است که بوم 2 بعدی را کنار بگذاریم و یک بررسی اجمالی در مورد بوم 3 بعدی داشته باشیم. محتوای بوم 3 بعدی با استفاده از WebGL API تعیین می‌شود که یک API کاملاً جدا از API بوم 2 بعدی است، گرچه هر دو روی عنصر <canvas> رندر می‌شوند.

WebGL بر مبنای زبان برنامه‌نویسی گرافیک OpenGL طراحی شده است و امکان ارتباط مستقیم با GPU رایانه را به دست می‌دهد. در این حالت، نوشتن WebGL خام به زبان‌های سطح پایین مانند ++C نزدیک‌تر است تا جاوا اسکریپت و گرچه کاملاً پیچیده، اما بسیار قدرتمند است.

استفاده از یک کتابخانه

اغلب افراد کد گرافیکی 3 بعدی را به دلیل پیچیدگی‌اش با استفاده از یک کتابخانه جاوا اسکریپت شخص ثالث مانند Three.js، PlayCanvas یا Babylon.js انجام می‌دهند. اغلب آن‌ها طرز کار مشابهی دارند و کارکردی برای ایجاد شکل‌های ابتدایی و سفارشی، موقعیت‌یابی دوربین‌های تماشا و ابزارهای نورپردازی، تبدیل سطوح به بافت و موارد دیگر ارائه می‌کنند. این کتابخانه‌ها WebGL را برای شما مدیریت می‌کنند و امکان کار در سطوح بالاتر را فراهم می‌سازند.

استفاده از یکی از این ابزارها باعث می‌شود که API جدیدی را بیاموزید، ما بسیار ساده‌تر از کدنویسی WebGL خام است.

بازسازی مثال مکعب

در ادامه به مثال ساده‌ای از شیوه ایجاد یک چیز جدید در کتابخانه WebGL می‌پردازیم. ما کتابخانه Three.js را انتخاب می‌کنیم، چون یکی از محبوب‌ترین کتابخانه‌ها محسوب می‌شود. در این راهنما یک مکعب چرخان 3 بعدی که قبلاً در ابتدای مطلب دیدیم را ایجاد می‌کنیم.

در آغاز کار یک کپی از فایل زیر در یک پوشه روی سیستم خود ایجاد کنید و سپس تصویر metal003.png (+) را دانلود کرده در همان پوشه قرار دهید. این همان تصویری است که به عنوان بافت سطح برای مکعب استفاده می‌کنیم.

فایل index.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<!DOCTYPE html> <html>   <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">     <meta name="viewport" content="width=device-width">       <title>Three.js basic cube example</title>       <style>       html,body {         margin: 0;       }       body {         overflow: hidden;       }     </style>   </head>     <body>     <script src="three.min.js"></script>   <script src="main.js"></script>   </body> </html>

سپس فایل index.html را در ادیتور کد خود باز کنید تا ببینید که دو عنصر <script> دارد. عنصر اول برای الصاق three.min.js به صفحه و دومی برای الصاق فایل main.js به صفحه استفاده می‌شود. ما باید کتابخانه three.min.js (+) را دانلود کرده و در همان دایرکتوری قبلی ذخیره کنیم.

اینک three.js به صفحه الصاق یافته است و می‌توانیم شروع به نوشتن کد جاوا اسکریپتی بکنیم که از آن در min.js استفاده می‌کند. کار خود را با ایجاد یک صحنه جدید آغاز می‌کنیم. کد زیر را به فایل main.js اضافه کنید:

1	var scene = new THREE.Scene();

سازنده ()Scene یک صحنه جدید ایجاد می‌کند که نماینده کل دنیای 3 بعدی است که می‌خواهیم نمایش دهیم.

سپس باید یک camera داشته باشیم تا بتوانیم صحنه خود را ببینیم. دوربین در فرهنگ اصلاحات طراحی 3 بعدی، نماینده موقعیت بیننده در دنیا است. برای ایجاد یک دوربین باید خطوط زیر را به صفحه اضافه کنید:

1 2	var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5;

سازنده ()PerspectiveCamera چهار آرگومان می‌گیرد:

• میدان دید (field of view) – میزان عریض بودن ناحیه پیش روی دوربین که باید روی صفحه دیده شود و بر حسب درجه است.
• نسبت ابعادی (aspect ratio) – معمولاً این نسبت برابر با عرض صحنه تقسیم بر ارتفاع صحنه است. استفاده از مقدار دیگر موجب اعوجاج صحنه می‌شود که شاید مطلوب شما باشد ولی عموماً چنین نیست.
• صفحه نزدیک (near plane) – میزان نزدیک بودن اشیا به دوربین را قبل از توقف رندر کردن آن‌ها روی صفحه تعیین می‌کند. آن را می‌توان با این موقعیت تصور کرد که انگشت خود را کم‌کم به چشمانتان نزدیک می‌کنید تا این که جایی بین چشمان شما قرار می‌گیرد که دیگر نمی‌توانید آن را ببینید.
• صفحه دور (far plane) – میزان دور بودن اشیا از دوربین را که دیگر نمی‌توانند رندر شوند تعیین می‌کند.

همچنین موقعیت دوربین را در مسافت 5 واحد از محور Z تعیین می‌کنیم که مانند CSS به سمت خارج از صفحه یعنی به سمت شما (بیننده) است.

عامل ضروری سوم رندر کننده است. این شیئی است که یک صحنه مفروض را چنان که توسط دوربین مفروض دیده می‌شود، رندر می‌کند. ما با استفاده از سازنده ()WebGLRenderer یک رندرکننده می‌سازیم، اما در حال حاضر از آن استفاده نمی‌کنیم. خطوط زیر را به کد قبلی اضافه کنید:

1 2 3

var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);

خط اول یک رندرکننده جدید می‌سازد، خط دوم اندازه‌ای را تعیین می‌کند که رندرکننده با آن نمای دوربین را رسم خواهد کرد و خط سوم عنصر <canvas> ایجاد شده از سوی رندرکننده را به <body> سند الحاق می‌کند. اینک هر چیزی که رندرکننده رسم کند روی پنجره ما رسم می‌شود.

سپس می‌خواهیم مکعبی ایجاد کنیم که روی بوم نمایش پیدا کند. به این منظور بلوک کد زیر را به انتهای جاوا اسکریپت موجود اضافه کنید:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

var cube;   var loader = new THREE.TextureLoader();   loader.load( 'metal003.png', function (texture) {   texture.wrapS = THREE.RepeatWrapping;   texture.wrapT = THREE.RepeatWrapping;   texture.repeat.set(2, 2);     var geometry = new THREE.BoxGeometry(2.4, 2.4, 2.4);   var material = new THREE.MeshLambertMaterial( { map: texture, shading: THREE.FlatShading } );   cube = new THREE.Mesh(geometry, material);   scene.add(cube);     draw(); });

کارهای زیادی در این کد انجام می‌یابد که در ادامه آن‌ها را توضیح می‌دهیم:

ابتدا یک متغیر سراسری cube ایجاد می‌کنیم تا بتوانیم از هر جایی در کد به مکعب خود دسترسی داشته باشیم.

سپس یک شیء جدید TextureLoader ایجاد می‌کنیم و ()load را نیز روی آن فراخوانی می‌کنیم. ()load در این مثال دو پارامتر می‌گیرد (گرچه می‌تواند موارد بیشتری بگیرد) که یکی بافتی است که می‌خواهیم بارگذاری شود (فایل PNG) و دیگری تابعی است که هنگام بارگذاری شدن بافت اجرا خواهد شد.

درون این تابع از مشخصه‌های شیء texture برای تعیین این که می‌خواهیم یک تکرار 2 در 2 از تصویر پیرامون همه اضلاع مکعب را بپوشاند استفاده می‌کنیم. سپس یک شیء BoxGeometry و یک شیء جدید MeshLambertMaterial می‌سازیم و آن‌ها را کنار یکدیگر قرار می‌دهیم تا یک mesh برای مکعب ایجاد شود. یک شیء به طور معمول نیازمند یک هندسه (شکل کلی) و یک جنس (نوع سطح) است.

در نهایت مکعب خود را به صحنه اضافه می‌کنیم و سپس تابع ()draw را فرامی‌خوانیم تا شروع به انیمیشن کند.

پیش از آن که ()draw را تعریف کنیم باید چند نور به صحنه اضافه کنیم تا همه چیز روشن‌تر شود. بنابراین بلوک زیر را به صفحه اضافه می‌کنیم:

1 2 3 4 5 6 7

var light = new THREE.AmbientLight('rgb(255, 255, 255)'); // soft white light scene.add(light);   var spotLight = new THREE.SpotLight('rgb(255, 255, 255)'); spotLight.position.set( 100, 1000, 1000 ); spotLight.castShadow = true; scene.add(spotLight);

شیء AmbientLight نوعی از نور نرم است که کل صحنه را کمی روشن می‌کند مانند آفتاب که موجب روشنایی زمین می‌شود. در سوی دیگر شیء AmbientLight یک شعاع نور جهت‌دار است که بیشتر شبیه نور چراغ قوه است.

در نهایت تابع ()draw را به انتهای کد می‌افزاییم:

1 2 3 4 5 6 7

function draw() {   cube.rotation.x += 0.01;   cube.rotation.y += 0.01;   renderer.render(scene, camera);     requestAnimationFrame(draw); }

این کد کاملاً گویا است. در هر فریم، مکعب را کمی روی محورهای X و Y خود می‌چرخانیم و سپس صحنه را چنان که از سوی دوربین دیده می‌شود رندر می‌کنیم و در نهایت ()requestAnimationFrame را فرامی‌خوانیم تا رسم فریم بعدی را زمان‌بندی کند.

در ادامه‌ می‌توانید وضعیت نهایی مثالی که ساختیم را ملاحظه کنید:

نکته: کد کامل مثال فوق به صورت زیر است. اگر هر نوع خطایی داشتید می‌توانید کد خودتان را با مثال زیر تطبیق دهید:

فایل index.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<!DOCTYPE html> <html>   <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">     <meta name="viewport" content="width=device-width">       <title>Three.js basic cube example</title>       <style>       html,body {         margin: 0;       }       body {         overflow: hidden;       }     </style>   </head>     <body>     <script src="three.min.js"></script>   <script src="main.js"></script>   </body> </html>

فایل main.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

var scene = new THREE.Scene();   var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5;   var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);   var cube;   var loader = new THREE.TextureLoader();   loader.load( 'metal003.png', function (texture) { texture.wrapS = THREE.RepeatWrapping; texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(2, 2);   var geometry = new THREE.BoxGeometry(2.4,2.4,2.4); var material = new THREE.MeshLambertMaterial( { map: texture, shading: THREE.FlatShading } ); cube = new THREE.Mesh(geometry, material); scene.add(cube);   draw(); });   var light = new THREE.AmbientLight('rgb(255,255,255)'); // soft white light scene.add(light);   var spotLight = new THREE.SpotLight('rgb(255,255,255)'); spotLight.position.set( 100, 1000, 1000 ); spotLight.castShadow = true; scene.add(spotLight);   function draw() {   cube.rotation.x += 0.01;   cube.rotation.y += 0.01;   renderer.render(scene, camera);   requestAnimationFrame(draw); }

سخن پایانی

بدین ترتیب اینک با مطالعه این مطلب نسبتاً بلند ایده مفیدی از مبانی برنامه‌نویسی گرافیکی با استفاده از Canvas و WebGL کسب کرده‌اید و می‌دانید که چه کارهایی می‌توانید با API انجام دهید. همچنین ایده مناسبی از این که برای کسب اطلاعات بیشتر باید چه کار بکنید دارید.

اگر این مطلب برای شما مفید 

منبع: فرادرس