سیاره‌ی آی‌تی

با IT-Planet دنیای آی‌تی را بهتر بشناسید

طراحی وب

ایجاد افکت موج در صفحات وب با CSS و JavaScript

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

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

همان‌طور که اشاره کردیم برای طراحی کردن افکت پخش شدن موج یا Ripple Effect روش‌های مختلفی وجود دارد اما بهترین و ساده‌ترین روش این است که از جاوااسکریپت به همراه CSS استفاده کنید. به کمک Javascript یک المان جدید در نقطه‌ای که کلیک شده ایجاد کنید که دارای انیمیشن بزرگ شدن یا Scale و محو شدن یا Opacity است و پس از زمان مشخصی، عنصری که به صفحه‌ی وب اضافه شده، به کمک جاوااسکریپت حذف می‌شود. در صورت نیاز می‌توانید رنگ موج را نیز با توجه به عنصری که روی آن کلیک شده، مشخص کنید.

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

نحوه اضافه کردن باکس برچسب‌ها به صورت چک‌باکسی در وردپرس

در نرم‌افزار مدیریت سایت WordPress برای هر مطلب یا پست می‌توان چند دسته یا Category و چند برچسب یا Tag انتخاب کرد. انتخاب دسته با تیک زدن در چک‌باکس‌ها انجام می‌شود اما انتخاب برچسب به صورت تایپ کردنی است و البته می‌توان کمی صبر کرد تا وردپرس برچسب‌های قبلی استفاده شده را بررسی کند و پیشنهادی برای برچسب جدید ارایه کند.

اما در وردپرس می‌توان با یک تغییر ساده در قالب و فایل توابع یا functions.php کاری کرد که نمایش برچسب‌ها مثل دسته‌ها به صورت چک‌باکسی باشد و انتخاب کردن برچسب برای سایت‌های کوچک، ساده شود.

در این مقاله به روش تبدیل کردن ظاهر بخش برچسب‌ها در WordPress به شکل مشابه دسته‌ها می‌پردازیم. با ما باشید.

در نرم‌افزار مدیریت سایت WordPress برای هر مطلب یا پست می‌توان چند دسته یا Category و چند برچسب یا Tag انتخاب کرد. انتخاب دسته با تیک زدن در چک‌باکس‌ها انجام می‌شود اما انتخاب برچسب به صورت تایپ کردنی است و البته می‌توان کمی صبر کرد تا وردپرس برچسب‌های قبلی استفاده شده را بررسی کند و پیشنهادی برای برچسب جدید ارایه کند. اما در وردپرس می‌توان با یک تغییر ساده در قالب و فایل توابع یا functions.php کاری کرد که نمایش برچسب‌ها مثل دسته‌ها به صورت چک‌باکسی باشد و انتخاب کردن برچسب برای سایت‌های کوچک، ساده شود. در این مقاله به روش تبدیل کردن ظاهر بخش برچسب‌ها در WordPress به شکل مشابه دسته‌ها می‌پردازیم. با ما باشید.

بهینه‌سازی سایت برای موبایل و بهبود SEO

بررسی آماری گوگل نشان می‌دهد که در سال ۲۰۱۸ برای اولین بار کاربران اینترنت موبایل از دستاپ پیشی گرفته‌اند. در حقیقت تعداد گوشی‌های اندروید و آیفون آن قدر افزایش پیدا کرده و سرعت اینترنت سیم‌کارت بیشتر شده که این روزها کاربران اینترنت بیش از کامپیوتر و لپ‌تاپ، از موبایل برای بازدید از سایت‌ها استفاده می‌کنند.

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

در این مطلب می‌خواهیم به نکات مهم در طراحی و بهینه‌سازی سایت برای موبایل که به سئو نیز کمک می‌کند، بپردازیم. با ما باشید.

بررسی آماری گوگل نشان می‌دهد که در سال ۲۰۱۸ برای اولین بار کاربران اینترنت موبایل از دستاپ پیشی گرفته‌اند. در حقیقت تعداد گوشی‌های اندروید و آیفون آن قدر افزایش پیدا کرده و سرعت اینترنت سیم‌کارت بیشتر شده که این روزها کاربران اینترنت بیش از کامپیوتر و لپ‌تاپ، از موبایل برای بازدید از سایت‌ها استفاده می‌کنند. در طراحی وب‌سایت به گونه‌ای که در نمایشگر کوچک گوشی‌ها کاربری ساده‌ای داشته باشد و موتورهای جست‌وجو امتیاز خوبی به طراحی کلی سایت بدهند، می‌بایست نکات مختلفی را در نظر گرفت تا SEO سایت بهینه شود. در این مطلب می‌خواهیم به نکات مهم در طراحی و بهینه‌سازی سایت برای موبایل که به سئو نیز کمک می‌کند، بپردازیم. با ما باشید.

آموزش فرم تماس با ما در وردپرس بدون افزونه و به کمک Google Forms

اگر از کسانی هستید که از Wordpress برای طراحی سایت استفاده می‌کنند و نیاز به فرم تماس یا Contact From دارید، افزونه‌های مختلفی برای این مهم طراحی شده ولیکن یکی از گزینه‌های جالب و بسیار عالی برای صفحه‌ی تماس با ما، استفاده کردن از Google Forms است.

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

در این مقاله به آموزش استفاده از Google Form برای طراحی فرم تماس با ما یا فرم دریافت دیدگاه خوانندگان در انواع سایت آشنا می‌شویم. با ما باشید.

اگر از کسانی هستید که از Wordpress برای طراحی سایت استفاده می‌کنند و نیاز به فرم تماس یا Contact From دارید، افزونه‌های مختلفی برای این مهم طراحی شده ولیکن یکی از گزینه‌های جالب و بسیار عالی برای صفحه‌ی تماس با ما، استفاده کردن از Google Forms است. از گوگل فرم می‌توان در هر سایت و وبلاگی استفاده کرد و محدود به وردپرس نیست. به علاوه به کمک گوگل فرمز می‌توان نظرات بازدیدکنندگان را در یک صفحه‌ی Google Sheet که مثل اکسل مرتب و منظم است، جمع‌آوری و بررسی کرد. در این مقاله به آموزش استفاده از Google Form برای طراحی فرم تماس با ما یا فرم دریافت دیدگاه خوانندگان در انواع سایت آشنا می‌شویم. با ما باشید.

فعالسازی Gzip در وردپرس و هاست و آشنایی با فشرده‌سازی Gzip

 فعال کردن فشرده‌سازی فایل به صورت Gzip یکی از توصیه‌های کارشناسان سئو و همین‌طور کمپانی‌های بزرگی مثل گوگل به وب‌مسترها و صاحبان کسب‌وکارهای اینترنتی است. Gzip یکی از اقسام آرشیو است که مثل zip و rar و 7zip برای فشرده کردن فایل‌ها استفاده می‌شود. اگر فایل‌ها از نوع متنی باشند، مثل HTML و CSS و Javascript، به راحتی فشرده می‌شوند. به همین علت است که برای بهبود کیفیت سایت و امتیاز کلی SEO می‌توان این ویژگی را در هاست و سرور فعال کرد.

فعالسازی با تغییراتی ساده در htaccess صورت می‌گیرد و حتی افزونه‌های متعددی برای فعال کردن gzip در وردپرس وجود دارد که کار را ساده‌تر می‌کند.

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

 فعال کردن فشرده‌سازی فایل به صورت Gzip یکی از توصیه‌های کارشناسان سئو و همین‌طور کمپانی‌های بزرگی مثل گوگل به وب‌مسترها و صاحبان کسب‌وکارهای اینترنتی است. Gzip یکی از اقسام آرشیو است که مثل zip و rar و 7zip برای فشرده کردن فایل‌ها استفاده می‌شود. اگر فایل‌ها از نوع متنی باشند، مثل HTML و CSS و Javascript، به راحتی فشرده می‌شوند. به همین علت است که برای بهبود کیفیت سایت و امتیاز کلی SEO می‌توان این ویژگی را در هاست و سرور فعال کرد. فعالسازی با تغییراتی ساده در htaccess صورت می‌گیرد و حتی افزونه‌های متعددی برای فعال کردن gzip در وردپرس وجود دارد که کار را ساده‌تر می‌کند. در این مقاله به روش فعال کردن فشرده‌سازی در هاستینگ‌های مختلف پرداخته و اثر آن روی سرعت بارگذاری سایت و مصرف اینترنت را بررسی می‌کنیم. با ما باشید.