تأمین امنیت سایت از چه راه‌هایی امکان‌پذیر است؟

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

تأمین امنیت سایت

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

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

حفظ امنیت سایت و اهمیت آن

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

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

راه‌های تأمین امنیت سایت

برای آنکه امنیت سایت خودتان را تأمین کنید و با خیالی راحت به فعالیت‌ ادامه دهید نکات زیادی وجود دارد که باید حتماً رعایت شود. علاوه بر مواردی مانند امنیت شبکه، امنیت اینترنت و سیستم عامل که بیان کردیم لازم است که برای تأمین مطمئن‌تر امنیت سایت خودتان موارد زیر را رعایت کنید.

داشتن هاست امن

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

به‌روزرسانی CMS ها

سیستم مدیریت محتوا (cms) از جمله موارد اولیه و لازم در تشکیل یک سایت است. امروزه cms های بسیار زیادی وجود دارند که می‌توان از آن‌ها استفاده کرد. سیستم‌های منسوخ و ناامن می‌توانند راحت‌ترین هدف برای هکرها باشند. از CMS های استفاده کنید که قابلیت به‌روزرسانی داشته باشند؛ مانند وردپرس که بصورت کاملا منظم در حال بروزرسانی و رفع باگ‌هاست. امروزه هکرها پیشرفت‌های بسیار زیادی داشته‌اند و به صورت اتوماتیک عمل می‌کنند و دائماً سایت‌ها را بررسی می‌کنند؛ بنابراین CMS هایی که در کوتاه‌ترین زمان ممکن به‌روز می‌شوند می‌توانند گزینه‌های خوبی برای ساختن سایت‌ها باشند. بعد از به‌روزرسانی CMS حتماً سعی کنید که تمامی پلاگین هایی که استفاده می‌کنید به‌روز شوند. هکرها ممکن است حتی در کمتر از یک ساعت به سایت حمله کنند و آسیب‌ها جبران‌ناپذیری وارد کنند.

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

نصب SSL

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

رمز عبور قدرتمند

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

محدودیت دسترسی کاربران

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

بک آپ گرفتن

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

پیشنهاد ژاکت

افزونه Backup Buddy 

با کمک افزونه Backup buddy می‌توانید از کل اطلاعات سایت یک نسخه پشتیبان تهیه کنید و در هر زمان که به مشکل برخورد کردید آن را بازگردانی کنید. برخی از ویژگی‌های پررنگ این افزونه عبارت است از:

• تهیه نسخه پشتیبان از محتواهای سفارشی
• تهیه نسخه پشتیبان بصورت کاملا برنامه‌ریزی شده
• ذخیره فایل‌های پشتیبان
• اطلاع‌رسانی از طریق ایمیل

استفاده از یک افزونه امنیتی قدرتمند

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

پیشنهاد ژاکت

افزونه iThemes Security

iThemes Security یکی از قوی‌ترین افزونه‌های وردپرس در حوزه امنیت است که با کمک آن می‌توانید سایت را در مقابل حملات مختلف هک نجات دهید. بصورت کلی این افزونه عملیات زیر را امکان‌پذیر می‌سازد:

• جلوگیری از هک
• اصلاح نقص‌ها و باگ‌های امنیتی
• حفاظت در برابر بدافزارها

جمع‌بندی

علاوه بر تمامی موارد ذکر شده می‌توان موارد بسیار زیاد دیگری را نام برد که نقشی انکارناپذیر در تأمین امنیت سایت‌ دارند. از جمله آن‌ها می‌توان مجوزهای دسترسی فایل (این مجوزها تعریف می‌کنند که هرکسی می‌تواند بر روی فایل‌ها چه کاری انجام دهد)، استفاده از وب سرورهای مطمئن و فایل‌های پیکربندی‌شده سرور (وب سرورهای آپاچی، انجین ایکس و ای ای اس قدرتمندترین وب سرورها هستند)، محافظت سایت در برابر اسپمرها (استفاده از سیستم محافظت CAPTCHA )، استفاده از آنتی‌ویروس و فایروال قدرتمند، بروز، معتبر و اصل، استفاده از سیستم عامل و نرم‌افزارهای معتبر و اصلی و استفاده از اینترنت امن و مطمئن اشاره کرد که وجود نقص در هر کدام می‌توان زمینه‌ساز هک شدن سایت را فراهم کند.

منبع: ژاکت

داشتن وب سایت، کمک به کسب و کار

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

وبسایت و کسب و کار

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

بر اساس آمارهای منتشر شده از دو موسسه معتبر  Hootsuite و We Are Social در سال ۲۰۱۸ در حدود ۴٫۲ میلیارد کاربر اینترنت در سراسر دنیا وجود داشته اند. ۳٫۴ میلیارد نفر در دنیا از شبکه های اجتماعی در سال ۲۰۱۸ استفاده کرده اند. حتی یک تجزیه و تحلیل ساده از اعداد و ارقام بیان شده ثابت می کند که تمام افراد در سراسر دنیا تمایل دارند به سمت استفاده از اینترنت بروند و این یعنی هر بیزینسی که در اینترنت فعالیتی نداشته باشد به زودی قافیه را به رقبای خود می بازد. پس هر چه زودتر باید ارتباطی بین وبسایت و کسب و کار ایجاد کنیم .در ادامه مطلب به تعدادی از مزایای استفاده از سایت ها برای پیشرفت کسب و کار اینترنتی اشاره می کنیم.

۱- بازاریابی و تبلیغات

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

۲- برند سازی

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

۳- افزایش مشتری

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

۴- ارتباط بهتر با مشتریان و دسترسی همیشگی

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

۵- افزایش اعتبار کسب و کار و اعتماد مشتری

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

۶- جهانی شدن

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

۷- افزایش فروش

قطعاً هرکسی که کسب و کاری را شروع می کند، اولین هدف او فروش و سود دهی بیشتر است. وب سایت‌ها می توانند زمینه بازدید مشتریان بیشتری از کسب و کار شما را فراهم کنند. وب سایت می تواند حکم یک فروشگاه مجازی را داشته باشد. فروشگاهی که روزانه ۲ میلیون نفر بازدید کننده دارد قطعاً فروش بالاتری از فروشگاه مشابه با ۱۰۰۰ بازدید کننده دارد و این یعنی درصد سود بالاتر. افزایش فروش باعث می شود که تعداد مشتری ها هم افزایش یابد و هرچقدر تعداد مشتری بیشتر شود، سوددهی و راندمان کار هم بالا می‌رود.

جمع‌بندی

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

پیشنهاد ژاکت

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

منبع: ژاکت

افزایش درآمد با عبور از کسب و کار سنتی

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

عبور از کسب و کار سنتی

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

کاهش هزینه ها

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

تعداد مشتری بیشتر

مزیت اصلی کسب و کارهای آنلاین و اینترنتی نسبت به کسب و کار سنتی این است که مشتریان در سراسر جهان وجود دارند که می تواند باعث افزایش مشتری های بالقوه (مشتری های خریدار) شود. با توجه به اینکه این نوع بیزینس محدودیت مکان و زمان ندارد و به صورت ۲۴ ساعته می توان بر آن نظارت داشت و با مخاطبان در ارتباط بود، در مدت زمان کمی تعداد مشتری ها رو به افزایش خواهد بود. بر اساس آمارها، ۷۰ درصد از کاربران اینترنت در طول ۹۰ روز، حداقل یک بار به صورت آنلاین خرید انجام می دهند.

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

کسب اعتبار و برند سازی

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

به عنوان مثال در کشور ایران، همه دیجی کالا را به عنوان یک برند معتبر می شناسند و بیشتر افراد ترجیح می دهند که محصولات مورد نیاز خودشان را از این سایت خریداری کنند. مجله Economist  در گزارشی ارزش دیجی کالا را به عنوان یک استارتاپ ایرانی، نزدیک به ۱۵۰ میلیون دلار اعلام کرده است. در صورتی که دیجی کالا فعالیت خود را همچنان به شیوه سنتی انجام میداد قطعا امروز دارای چنین برند با ارزشی نبود.

هدفمند شدن کسب و کار

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

عدم محدودیت جغرافیایی

امروزه بیش از ۱۹۰ کشور در دنیا از اینترنت استفاده می‌کنند و تقریبا ۵ میلیارد نفر کاربر اینترنت در سراسر دنیا وجود دارد. زمانی که کسب و کار سنتی باشد حتی اگر در بزرگترین شهرهای دنیا قرار داشته باشد، نمی تواند تعداد مشتری های خود را بیشتر از چند هزار نفر بداند. زمانی که به فضای کسب و کار آنلاین وارد شوید، می توانید از پتانسیل اینترنت برای دسترسی به مشتری ها در صدها کشور استفاده کنید و با شناسایی نیازهای آنان، محصولات خود را به فروش برسانید. زمانی که دامنه فعالیت شما اینگونه افزایش می یابد قطعا افزایش درآمد هم خواهید داشت. به عنوان مثال وب سایت آمازون که از این عدم محدودیت جغرافیایی بهترین استفاده را برده است در هر ثانیه ۱۰۸۴ دلار درآمد دارد. این عدد را در دقیقه، ساعت، روز، هفته ، ماه و سال ضرب کنید تا به پتانسیل کسب و کارهای نوین پی ببرید. پس کمی به عبور از کسب و کار سنتی فکر کنید.

امکان اداره چندین کسب و کار

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

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

پیشنهاد ژاکت

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

منبع: ژاکت

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

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

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

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

تا به اینجا برخی از کاربردهای اولیه بوم 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) رسم می‌کنیم. بدین ترتیب خطی به طول lemgth موازی با محور 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 (+) را دانلود کرده و در همان دایرکتوری قبلی ذخیره کنیم.

اینک trhee.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) و دیگری تابعی است که هنگام بارگذاری شدن بافت اجرا خواهد شد.

درون این تابع از مشخصه‌های شیء txture برای تعیین این که می‌خواهیم یک تکرار 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 انجام دهید. همچنین ایده مناسبی از این که برای کسب اطلاعات بیشتر باید چه کار بکنید دارید.

منبعک فرادرس

فراتر از کسب و کار سنتی

فراتر از کسب و کار سنتی

 ۱۰:۰۰ ۱۳۹۸-۰۳-۱۹

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

فراتر از کسب و کار سنتی

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

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

حذف محدودیت های زمانی و جغرافیایی

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

صرفه جویی در هزینه ها و زمان

صرفه جویی در هزینه ها یکی از مهم ترین دلایلی است که باید شیوه سنتی کسب درآمد را کنار گذاشت و به سوی روش های نوین روی آورد. تصور کنید شما در حوزه محصولات آرایشی و بهداشتی فعالیت می کنید و می خواهید محصولات خودتان را به ۱۰ میلیون نفر معرفی کنید. برای این کار چقدر باید هزینه کنید؟ هزینه بازاریاب، تبلیغات، کاتالوگ و دیگر هزینه ها؛ اما استفاده از اینترنت و فضای مجازی تقریباً هیچ هزینه ای ندارد و در زمان هم صرفه جویی خواهد شد.

موبایل محوری

براساس آمارهای موسسه Hootsuite  در سال ۲۰۱۸ در حدود ۵٫۱ میلیارد نفر از مردم جهان از گوشی تلفن همراه استفاده می کنند. کاربران تلفن همراه در کشور ایران نیز در سال ۱۳۹۷ به ۷۳ میلیون نفر رسیده است. تصور کنید زمانی که کسب و کاری بتواند به اینترنت و فضای دیجیتال و مجازی ورود کند و فراتر از کسب و کار سنتی رود، چقدر می تواند موفق شود و به سوددهی بیشتر برسد.

بر اساس آمارها (روزنامه مشرق) در حدود ۲۰ میلیون نفر از ایرانیان از اپلیکیشن اینستاگرام استفاده می کنند که رتبه هفتم جهان را دارند، حدود ۴۰ میلیون کاربر تلگرامی وجود دارد و سایر شبکه های اجتماعی مانند فیسبوک، تویتر، لینکدین، واتساپ، یوتیوب و آپارات نیز از تعداد کاربران بسیار زیادی برخوردار هستند. همین آمار و ارقام نشان می دهد که کسب و کارها می توانند به راحتی و با کمترین هزینه به مخاطبان خود دسترسی داشته باشند. کسب و کاری که به موبایل ورود کند می تواند موفقیت و سوددهی خود را تضمین شده بداند.

افزایش اعتبار و اعتماد

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

شناخت مخاطبان و نیاز آنان

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

سودآوری

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

جمع‌بندی

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

پیشنهاد ژاکت

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

بهاره کوهستانی

دیدگاهتا

منبع: ژاکت