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

TLDR: از microdata/microformat ها برای افزودن معنی بیشتر به لیست رویدادها در وب سایت خود استفاده کنید، به کاربران این امکان را می دهد تا به راحتی رویدادها را به تقویم خود اضافه کنند و تجربه کاربری بهتری را ارائه دهند.

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

هی، عاشق لیست رویدادها هستم! اما اضافه کردن آنها به تقویم من دردناک است. آیا می توانید یک ویژگی “افزودن به تقویم” را اضافه کنید؟ این زندگی من را بسیار آسان تر می کند!

زیرا پیوندهای متنی برای مغز خوب است، اما برای کاربر خوب نیست که به راحتی به تقویم خود اضافه کند. میکروفرمت ها/ریزداده ها + مقداری جاوا اسکریپت می توانند آن را تغییر دهند!

ویژگی نادیده گرفته شده HTML: Microformats/Microdata

ریزفرمت‌ها/ریزداده‌های مورد استفاده در این مثال بر اساس h-event واژگان، که روشی استاندارد برای علامت گذاری رویدادها در وب است.

Microformats/Microdata راهی برای افزودن معنای معنایی اضافی به عناصر HTML است که درک ساختار و محتوای یک صفحه وب را برای موتورهای جستجو و سایر ماشین‌ها آسان‌تر می‌کند.

این h-event واژگان بخشی از مشخصات Microformats 2 است که یک روش استاندارد برای علامت گذاری ساختارهای داده رایج در وب است.

در اینجا نمونه ای از میکروفرمت های استفاده شده در این مثال آورده شده است:

 class="h-event">
   class="dt-start" datetime="2024-11-05T12:00:00">11/5
   class="p-name">Tennis Band på Nytorv
   class="dt-start" datetime="2024-11-05T12:00:00">kl. 12.00 -
   class="dt-end" datetime="2024-11-05T13:00:00">13.00

در این مثال، h-event کلاس برای نشان دادن اینکه عنصر یک رویداد را نشان می دهد استفاده می شود. این dt-start و dt-end کلاس ها به ترتیب برای نشان دادن تاریخ و زمان شروع و پایان رویداد استفاده می شوند. این p-name کلاس برای نشان دادن نام رویداد استفاده می شود.

شما می توانید اطلاعات بیشتری در مورد پیدا کنید h-event واژگان و Microformats 2 به طور کلی در وب سایت رسمی Microformats:

علاوه بر این، می‌توانید اطلاعات بیشتری درباره میکروداده در وب‌سایت W3C بیابید:

استفاده از جاوا اسکریپت برای افزودن پویا پیوند “افزودن به تقویم”

افزودن ویژگی “افزودن به تقویم” به لیست رویدادهای خود ساده تر از آن چیزی است که فکر می کنید!

با کمی جادوی جاوا اسکریپت، می‌توانید پیوندی به HTML توسعه‌یافته با میکروداده خود اضافه کنید که به کاربران اجازه می‌دهد به راحتی رویدادها را به تقویم خود اضافه کنند.

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