طراحی سایت و برنامه نویسی

آموزش طراحی سایت و برنامه نویسی

طراحی سایت و برنامه نویسی

آموزش طراحی سایت و برنامه نویسی

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

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

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

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

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

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

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

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

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

۱- فرم ساز 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
و…

نتیجه نهایی

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

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

منبع: ژاکت

مشاوره شنبه 2 شهریور 1398 ساعت 13:01

0 نظر

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

منبع: ژاکت

مشاوره شنبه 2 شهریور 1398 ساعت 13:00

0 نظر

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

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

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

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

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

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

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

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

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

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

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

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

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

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

۳- پاپ آپ

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

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

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

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

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

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

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

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

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

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

جمع بندی

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

منبع: ژاکت

مشاوره شنبه 2 شهریور 1398 ساعت 12:58

0 نظر

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

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

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

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

تا به اینجا برخی از کاربردهای اولیه بوم 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 انجام می‌دهیم وجود ندارد. ما نمی‌توانیم هیچ توپی را روی بوم جابجا کنیم، زیرا زمانی که رسم شد جزئی از بوم می‌شود و عنصر یا شیء منفردی نیست که بتوان با آن تعامل داشت. به جای آن می‌توان بوم را پاک کرد و دوباره نو رسم کرد و این کار یا از طریق پاک کردن و رسم مجدد همه چیز و یا با داشتن کدی که دقیقاً می‌داند کدام بخش‌ها باید پاک شوند و تنها آن نواحی مورد نیاز مجدداً روی بوم رسم شوند ممکن است.

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

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

محتوای بوم پاک می‌شود (به وسیله ()fillRect یا ()clearRect)
حالت (در صورت نیاز) با استفاده از ()save ذخیره می‌شود. این مورد زمانی ضروری است که بخواهید تنظیماتی که روی بوم به‌روزرسانی کرده‌اید، پیش از ادامه ذخیره شوند و برای کاربردهای پیشرفته‌تر مفید است.
گرافیکی که می‌خواهید انیمیت کنید را رسم کنید.
تنظیماتی را که در گام 2 ذخیره کرده بودید با استفاده از ()restore بازیابی کنید.
()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);

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

ما یک image به عنوان تصویری که باید جاسازی شود تعیین می‌کنیم.
پارامترهای 2 و 3 گوشه چپ-بالای قطعه برش یافته تصویر مبدأ را تعیین می‌کند، مقدار X به صورت sprite ضرب در 102 است که sprite شماره اسپریت بین 0 و 5 است و Y همواره برابر با صفر است.
پارامترهای 4 و 5 اندازه قطعه برش یافته یعنی 102 در 148 پیکسل است.
پارامترهای 6 و 7 گوشه چپ-بالای کادری که قطعه برش یافته در آن رسم می‌شود را تعیین می‌کنند. موقعیت X برابر با 0 + posX است یعنی می‌توانیم موقعیت رسم را با عوض کردن مقدار posX جابجا کنیم.
پارامترهای 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 انجام دهید. همچنین ایده مناسبی از این که برای کسب اطلاعات بیشتر باید چه کار بکنید دارید.

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

منبع: فرادرس

مشاوره شنبه 2 شهریور 1398 ساعت 12:57

0 نظر

استایل بندی فرم های HTML — راهنمای جامع

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

فرم های HTML در مرورگرهای قدیمی — راهنمای جامع

چرا استایل‌بندی ویجت‌های فرم با CSS دشوار است؟

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

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

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

حتی امروزه نیز هیچ مرورگر منفردی به صورت کامل CSS2.1 را پیاده‌سازی نکرده است. با این حال در طی زمان، ارائه‌دهندگان مرورگرها پشتیبانی خود از CSS را برای عناصرشان بهبود بخشیدند و گرچه CSS در این زمینه شهرت بدی کسب کرده است، اما امروزه می‌توان از آن برای استایل‌بندی فرم‌های HTML استفاده کرد.

همه ویجت‌ها در زمان فراخوانی CSS به صورت برابر ایجاد نمی‌شوند

در حال حاضر همچنان برخی دشواری‌ها در زمان استفاده از CSS روی فرم‌ها بر جا مانده است. این مشکلات را می‌توان به سه دسته عمده تقسیم کرد:

موارد خوب

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

<form>
<fieldset>
<label>
<output>

این لیست همچنین شامل همه ویجت‌های فیلد متنی (چه تک‌خطی و چه چندخطی) و دکمه‌ها نیز می‌شود.

موارد بد

برخی عناصر به ندرت می‌توانند استایل‌بندی شوند و ممکن است نیازمند برخی ترفندهای پیچیده باشند و حتی در مواردی ممکن است لازم باشد از دانش پیشرفته CSS3 برخوردار باشید.

این لیست شامل عنصر <legend> است، اما این عنصر نمی‌تواند روی همه پلتفرم‌ها به درستی موقعیت‌یابی شود. «کادرهای انتخاب» (Checkboxes) و دکمه‌های رادیویی نیز نمی‌توانند مستقیماً استایل‌بندی شوند گرچه به لطف CSS3 می‌توان راه‌حل‌هایی یافت. محتوای placeholder به هیچ روش استانداردی قابل استایل‌بندی نیست، با این حال همه مرورگرهایی که آن را پیاده‌سازی می‌کنند، شِبه‌عنصر CSS مناسبی را برای آن پیاده‌سازی کرده‌اند یا شِبه‌کلاسی دارند که امکان استایل‌بندی آن را فراهم می‌سازد.

ما در مقالات آتی مجله فرادرس، روش مدیریت همه این حالت‌ها را با جزییات بیشتر توضیح خواهیم داد.

موارد زشت

برخی عناصر نمی‌توانند با استفاده از CSS استایل‌بندی شوند. این موارد شامل همه ویجت‌های پیشرفته اینترفیس کاربر مانند کنترل‌های range ،color یا date و همه ویجت‌های بازشدنی شامل عناصر <select> ،<option> ،<optgroup> و <datalist> می‌شود. ویجت file picker نیز به طور کلی نمی‌تواند استایل‌بندی شود. عناصر جدید <progress> و <meter> نیز در همین دسته جای می‌گیرند.

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

ساخت ویجت‌های سفارشی فرم در HTML — راهنمای جامع

استایل‌بندی ابتدایی

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

فیلدهای جستجو

کادرهای جستجو تنها نوعی از فیلدهای متنی هستند که ممکن است استایل‌بندی‌شان کمی دشوار باشد. در مرورگرهای مبتنی بر WebKit (کروم، سافاری و غیره) باید آن را با مشخصه webkit-appearance- دستکاری بکنید.

مثال

1
2
3
<form>
  <input type="search">
</form>

1
2
3
4
5
6
input[type=search] {
  border: 1px dotted #999;
  border-radius: 0;
 
  -webkit-appearance: none;
}

چنان که در تصویر فوق از فیلد جستجو روی مرورگر کروم مشخص است، دو فیلد دارای حاشیه هستند. فیلد اول بدون استفاده از مشخصه ‎-webkit-appearance رندر شده است در حالی که دومی با استفاده از مشخصه webkit-appearance:none رندر شده است. تفاوت کاملاً مشخص است.

فونت‌ها و متن

فونت CSS و قابلیت‌های متن می‌توانند به سهولت روی هر نوع ویجتی استفاده شوند. حتی می‌توان از font-face@ به همراه ویجت‌های فرم استفاده کرد. با این حال رفتار مرورگرها غالباً ناسازگار است. برخی ویجت‌ها به صورت پیش‌فرض از font-family و font-size از والدینشان ارث‌بری نمی‌کنند. مرورگرهای زیادی به جای آن از ظاهر پیش‌فرض سیستم استفاده می‌کنند. برای این که فرم شما از نظر ظاهری با باقی محتوا سازگار باشد، می‌توانید قاعده زیر را به استایل‌شیت اضافه کنید:

1
2
3
4
button, input, select, textarea {
  font-family : inherit;
  font-size   : 100%;
}

تصویر زیر تفاوت را نشان می‌دهد. در تصویر سمت چپ رندرینگ پیش‌فرض عنصر در فایرفاکس روی Mac OS X با استایل فونت پیش‌فرض پلتفرم مشاهده می‌شود. در سمت راست همان عناصر با اعمال قواعد هماهنگ‌سازی استایل دیده می‌شوند.

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

مدل باکس

همه فیلدهای متنی دارای پشتیبانی کاملی برای همه مشخصه‌های مرتبط با مدل باکس CSS شامل width ،height، padding ،margin و border هستند. با این حال مانند بخش قبل مرورگرها در زمان نمایش این ویجت‌ها عموماً به استایل‌های پیش‌فرض سیستم تکیه دارند. این بر عهده شما است که تعریف کنید دوست دارید آن‌ها چگونه با محتوای دیگر بخش‎های وب‌سایت هماهنگ شوند. اگر می‌خواهید ظاهر و حس بومی ویجت‌ها را حفظ کنید یا در صورتی که بخواهید اندازه سازگاری برایشان تعیین کنید، با کمی دشواری مواجه خواهید شد.

دلیل این مسئله آن است که هر ویجت قواعد خاص خود را برای border ،padding و margin دارد. بنابراین اگر می‌خواهید اندازه یکسانی به چند ویجت مختلف بدهید، باید از مشخصه box-sizing استفاده کنید:

1
2
3
4
5
6
7
8
input, textarea, select, button {
  width : 150px;
  margin: 0;
 
  -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
     -moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */
          box-sizing: border-box;
}

در تصویر فوق، سمت چپ بدون box-sizing ساخته شده است، در حالی که ستون راست از این مشخصه با مقدار border-box استفاده می‌کند. توجه کنید که بدین ترتیب می‌توانیم مطمئن شویم که همه عناصر علی‌رغم قواعد پیش‌فرض هر نوع ویجت، فضای یکسانی اشغال کرده‌اند.

موقعیت‌یابی

موقعیت‌یابی ویجت‌های فرم عموماً یک مشکل محسوب نمی‌شود، با این حال، دو عنصر وجود دارند که باید توجه خاصی به آن‌ها داشت و شامل legend و textarea می‌شوند که در ادامه هر یک را به صورت جداگانه توضیح می‌دهیم.

Legend

عنصر <legend> استایل‌بندی آسانی دارد و تنها مشکل در موقعیت‌یابی است. عنصر <legend> در هر مرورگر در بالای حاشیه فوقانی والد <fieldset> خود جای می‌گیرد. مطلقاً هیچ راهی برای تغییر دادن آن و قرار گرفتنش در داخل HTML و دوری از حاشیه فوقانی وجود ندارد. با این حال می‌توانید آن را به صورت مطلق یا نسبی با استفاده از مشخصه position موقعیت‌یابی کنید. در غیر این صورت بخشی از حاشیه fieldset خواهد بود.

از آنجا که عنصر <legend> برای مقاصد دسترسی‌پذیری بسیار مهم است، از سوی فناوری‌های حمایتی به عنوان بخشی از برچسب هر عنصر فرم درون fieldset قرائت می‌شود. در اغلب موارد با یک عنوان جفت شده و سپس به روشی دسترس‌پذیر پنهان می‌شود. به مثال زیر توجه کنید:

HTML

1
2
3
4
<fieldset>
  <legend>Hi!</legend>
  <h1>Hello</h1>
</fieldset>

CSS

1
2
3
4
5
legend {
  width: 1px;
  height: 1px;
  overflow: hidden;
}

Textarea

به صورت پیش‌فرض همه مرورگرها عنصر <textarea> را یک بلوک درون‌خطی در نظر می‌گیرند که در راستای خط تختانی متن تراز می‌شود. این وضعیت به ندرت مطلوب است. برای تغییر دادن inline-block به block بهتر است به آسانی از مشخصه display استفاده کنیم. اما اگر بخواهید از inline استفاده کنید، تغییر دادن تراز عمودی کار دشواری نخواهد بود:

1
2
3
textarea {
  vertical-align: top;
}

مثال

در این بخش نگاهی به یک مثال دقیق از شیوه استایل‌بندی یک فرم HTML خواهیم داشت. بدین ترتیب بسیاری از این ایده‌ها روشن‌تر می‌شوند. ما قصد داریم این فرم تماس «کارت‌پستالی» را بسازیم.

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

فایل postcard-start.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>Postcard example</title>
    <style>
    </style>
</head>
 
<body>
 
</body>
 
</html>

کد HTML

کد HTML این مثال چندان پیچیده نیست و صرفاً چند ID و عنوان از یک صفحه معمولی HTML بیشتر دارد:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<form>
  <h1>to: Mozilla</h1>
 
  <div id="from">
    <label for="name">from:</label>
    <input type="text" id="name" name="user_name">
  </div>
 
  <div id="reply">
    <label for="mail">reply:</label>
    <input type="email" id="mail" name="user_email">
  </div>
 
  <div id="message">
    <label for="msg">Your message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </div>
 
  <div class="button">
    <button type="submit">Send your message</button>
  </div>
</form>

کد فوق را در بدنه HTML اضافه می‌کنیم.

سازماندهی فایل‌ها

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

پس‌زمینه کارت‌پستال (+) – این فایل را دانلود کرده و در همان دایرکتوری که فایل HTML قرار دارد، بگذارید.
یک فونت ماشین تایپ (+) – فونت Secret Typewriter را دانلود کرده و فایل TTF را در همان دایرکتوری قبلی قرار دهید.
فونت دست‌نویس (+) – فونت Journal را دانلود کرده و فایل TTF را در همان دایرکتوری HTML قرار دهید.

پیش از آغاز فونت‌ها به مقدار پردازش بیشتر نیاز دارد:

به بخش تولید Webfont وب‌سایت fontsquirrel (+) بروید.
با استفاده از فرم مربوطه، هر دو فایل فونت را آپلود کنید و یک کیت وب‌فونت ایجاد کنید. کیت را روی رایانه خود دانلود کنید.
فایل فشرده ارائه شده را از حالت فشرده خارج کنید.
درون محتوای نافشرده دو فایل woff. و دو فایل woff2. می‌بینید. این چهار فایل را در یک دایرکتوری به نام fonts در همان دایرکتوری قبلی کپی کنید. ما از فایل‌های مختلف برای هر فونت استفاده می‌کنیم تا سازگاری مرورگر را ارتقا ببخشیم.

کد CSS

اکنون نوبت بررسی CSS مثال رسیده است. همه بلوک‌های کد نمایش یافته درون عنصر <style> را یکی پس از دیگری اضافه کنید.

ابتدا زمینه را با تعریف کردن قواعد ‎@font-face آماده می‌کنیم. همه موارد مقدماتی روی عنصر ‎<body> element و عنصر <form> آماده هستند:

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
@font-face {
    font-family: 'handwriting';
    src: url('fonts/journal-webfont.woff2') format('woff2'),
         url('fonts/journal-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
 
@font-face {
    font-family: 'typewriter';
    src: url('fonts/veteran_typewriter-webfont.woff2') format('woff2'),
         url('fonts/veteran_typewriter-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
 
body {
  font  : 21px sans-serif;
 
  padding : 2em;
  margin  : 0;
 
  background : #222;
}
 
form {
  position: relative;
 
  width  : 740px;
  height : 498px;
  margin : 0 auto;
 
  background: #FFF url(background.jpg);
}

اکنون می‌توانیم موقعیت عناصر خود را که شامل عنوان و همه عناصر فرم است تعیین کنیم:

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
h1 {
  position : absolute;
  left : 415px;
  top  : 185px;
 
  font : 1em "typewriter", sans-serif;
}
 
#from {
  position: absolute;
  left : 398px;
  top  : 235px;
}
 
#reply {
  position: absolute;
  left : 390px;
  top  : 285px;
}
 
#message {
  position: absolute;
  left : 20px;
  top  : 70px;
}

این همان جایی است که شروع به کار روی خود عناصر فرم می‌کنیم. ابتدا باید مطمئن شویم که عناصر <label> دارای فونت مناسبی هستند:

1
2
3
label {
  font : .8em "typewriter", sans-serif;
}

فیلدهای متنی نیازمند نوعی قواعد مشترک هستند. به بیان ساده ما borders و backgrounds را حذف می‌کنیم و padding و margin آن‌ها را بازتعریف می‌کنیم:

1
2
3
4
5
6
7
8
9
10
input, textarea {
  font    : .9em/1.5em "handwriting", sans-serif;
 
  border  : none;
  padding : 0 10px;
  margin  : 0;
  width   : 240px;
 
  background: none;
}

زمانی که یکی از این فیلدها فوکوس بگیرند، آن‌ها را به رنگ خاکستری روشن و با پس‌زمینه شفاف هایلایت می‌کنیم. توجه کنید که افزودن مشخصه outline برای حذف هایلایت فوکوس پیش‌فرض اضافه شده روی برخی مرورگرها ضروری است:

1
2
3
4
5
input:focus, textarea:focus {
  background   : rgba(0,0,0,.1);
  border-radius: 5px;
  outline      : none;
}

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

فیلد متنی تک‌خطی برای مشاهده مناسب در اینترنت اکسپلورر به دستکاری بیشتری نیاز دارد. اینترنت اکسپلورر ارتفاع فیلدها را بر مبنای ارتفاع طبیعی فونت (که رفتار همه مرورگرهای دیگر است) تعریف نمی‌کند. برای اصلاح این مشکل باید مانند زیر یک ارتفاع صریح به فیلد اختصاص دهیم

1
2
3
4
input {
    height: 2.5em; /* for IE */
    vertical-align: middle; /* This is optional but it makes legacy IEs look better */
}

عناصر <textarea> به صورت پیش‌فرض به عنوان یک عنصر بلوکی رندر می‌شوند. دو نکته مهم در اینجا به مشخصه‌های resize و overflow مربوط است. از آنجا که طراحی دارای اندازه ثابت است، باید از مشخصه resize برای جلوگیری از تغییر دادن اندازه فیلدهای متنی چندخطی از سوی کاربران استفاده کنیم. مشخصه overflow برای این که فیلد روی مرورگرهای مختلف به روش منسجم‌تری رندر شود مورد استفاده قرار می‌گیرد. برخی مرورگرها به صورت پیش‌فرض دارای مقدار auto هستند، در حالی که برخی دیگر دارای مقدار پیش‌فرض scroll هستند. در این حالت بهتر است هر بار که از auto استفاده می‌کنیم کاملاً مطمئن باشیم:

1
2
3
4
5
6
7
8
9
10
11
textarea {
  display : block;
 
  padding : 10px;
  margin  : 10px 0 0 -10px;
  width   : 340px;
  height  : 360px;
 
  resize  : none;
  overflow: auto;
}

عنصر <button> با CSS کاملاً سازگار است و می‌توان هر کار موردنظر را روی آن حتی با استفاده از pseudo-elements اجرا کرد:

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
button {
  position     : absolute;
  left         : 440px;
  top          : 360px;
 
  padding      : 5px;
 
  font         : bold .6em sans-serif;
  border       : 2px solid #333;
  border-radius: 5px;
  background   : none;
 
  cursor       : pointer;
 
-webkit-transform: rotate(-1.5deg);
   -moz-transform: rotate(-1.5deg);
    -ms-transform: rotate(-1.5deg);
     -o-transform: rotate(-1.5deg);
        transform: rotate(-1.5deg);
}
 
button:after {
  content: " >>>";
}
 
button:hover,
button:focus {
  outline   : none;
  background: #000;
  color   : #FFF;
}

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

فایل 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
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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>Postcard example</title>
    <style>
    @font-face {
        font-family: 'handwriting';
        src: url('fonts/journal-webfont.woff2') format('woff2'),
             url('fonts/journal-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'typewriter';
        src: url('fonts/veteran_typewriter-webfont.woff2') format('woff2'),
             url('fonts/veteran_typewriter-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
    body {
      font  : 21px sans-serif;
      padding : 2em;
      margin  : 0;
      background : #222;
    }
    form {
      position: relative;
      width  : 740px;
      height : 498px;
      margin : 0 auto;
      background: #FFF url(background.jpg);
    }
    h1 {
      position : absolute;
      left : 415px;
      top  : 185px;
      font : 1em "typewriter", sans-serif;
    }
    #from {
      position: absolute;
      left : 398px;
      top  : 235px;
    }
    #reply {
      position: absolute;
      left : 390px;
      top  : 285px;
    }
    #message {
      position: absolute;
      left : 20px;
      top  : 70px;
    }
    label {
      font : .8em "typewriter", sans-serif;
    }
    input, textarea {
      font    : .9em/1.5em "handwriting", sans-serif;
      border  : none;
      padding : 0 10px;
      margin  : 0;
      width   : 240px;
      background: none;
    }
    input:focus, textarea:focus {
      background   : rgba(0,0,0,.1);
      border-radius: 5px;
      outline      : none;
    }
    input {
        height: 2.5em; /* for IE */
        vertical-align: middle; /* This is optional but it makes legacy IEs look better */
    }
    textarea {
      display : block;
      padding : 10px;
      margin  : 10px 0 0 -10px;
      width   : 340px;
      height  : 360px;
      resize  : none;
      overflow: auto;
    }
    button {
      position     : absolute;
      left         : 440px;
      top          : 360px;
      padding      : 5px;
      font         : bold .6em sans-serif;
      border       : 2px solid #333;
      border-radius: 5px;
      background   : none;
      cursor       : pointer;
    -webkit-transform: rotate(-1.5deg);
       -moz-transform: rotate(-1.5deg);
        -ms-transform: rotate(-1.5deg);
         -o-transform: rotate(-1.5deg);
            transform: rotate(-1.5deg);
    }
    button:after {
      content: " >>>";
    }
    button:hover,
    button:focus {
      outline   : none;
      background: #000;
      color   : #FFF;
    }
    </style>
</head>
 
<body>
 
  <form>
    <h1>to: Mozilla</h1>
 
    <div id="from">
      <label for="name">from:</label>
      <input type="text" id="name" name="user_name">
    </div>
 
    <div id="reply">
      <label for="mail">reply:</label>
      <input type="email" id="mail" name="user_email">
    </div>
 
    <div id="message">
      <label for="msg">Your message:</label>
      <textarea id="msg" name="user_message"></textarea>
    </div>
 
    <div class="button">
      <button type="submit">Send your message</button>
    </div>
  </form>
 
</body>
 
</html>

فایل postcard-start.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>Postcard example</title>
    <style>
    </style>
</head>
 
<body>
 
</body>
 
</html>

سخن پایانی

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

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

منبع: فرادرس

مشاوره شنبه 2 شهریور 1398 ساعت 12:55

0 نظر

33
1
...
3
4
5
صفحه 6
7

ابر برجسب

جدیدترین یادداشت‌ها

بایگانی

جستجو

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

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

۱- فرم ساز Gravity Forms Farsi

۲- افزونه Profile Builder Pro

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

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

نتیجه نهایی

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

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

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

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

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

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

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

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

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

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

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

۳- پاپ آپ

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

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

جمع بندی

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

ایجاد یک حلقه

فایل canvas_template.html

انیمیشن‌ها

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

فایل canvas_template.html

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

WebGL

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

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

فایل index.html

فایل index.html

فایل main.js

سخن پایانی

چرا استایل‌بندی ویجت‌های فرم با CSS دشوار است؟

همه ویجت‌ها در زمان فراخوانی CSS به صورت برابر ایجاد نمی‌شوند

موارد خوب

موارد بد

موارد زشت

استایل‌بندی ابتدایی

فیلدهای جستجو

مثال

فونت‌ها و متن

مدل باکس

موقعیت‌یابی

Legend

HTML

CSS

Textarea

مثال

فایل postcard-start.html

کد HTML

سازماندهی فایل‌ها

کد CSS

فایل index.html

فایل postcard-start.html

سخن پایانی