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

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

در سرویس آماری Google Analytics که محبوب‌ترین روش محاسبه‌ی آمار بازدیدکنندگان سایت است، برخی کمیت‌ها مثل نرخ پرش یا Bounce Rate و زمان ماندن در صفحه یا Time on Page برای وب‌مسترهای مبتدی کمی نامفهوم است و البته خطای محاسباتی زیادی دارد.

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

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

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

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

برای کار با آرایه‌ها در جاوااسکریپت، ترفندها و روش‌های مختلفی وجود دارد که در این مقاله می‌خواهیم به ۱۰ مورد جالب و کاربردی اشاره کنیم که شاید برخی را ندیده باشید. با ما باشید.

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

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

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

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

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

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

سرعت بارگذاری سایت به صورت مستقیم در SEO موثر نیست اما طبعاً سایتی که سریع‌تر لود شود، بازدیدکننده را با احتمال بیشتری به بازدید از صفحات دیگر تشویق می‌کند و این یک فاکتور مثبت در سئوی سایت است. در ادامه به روش بارگذاری فایل‌های CSS و JS قالب سایت‌ها و پلاگین‌های نصب‌شده از طریق Google Drive می‌پردازیم. با ما باشید.

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

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

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

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

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

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

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

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

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

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

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

یکی از مزایای فایرفاکس، افزونه‌های متعدد آن است. طراحان وب می‌توانند از Add-onهایی که برای ویرایش CSS و JS و همین‌طور JSON و ... طراحی شده برای تسریع در کار خود استفاده کنند. در این مقاله می‌خواهیم با ۵ افزونه‌ی مفید و کاربردی برای طراحان وبی که از فایرفاکس کوآنتوم استفاده می‌کنند، آشنا شویم.