راهکارهای تعامل بیشتر با کاربر

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

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

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

ـ آیا کاربر عمل مناسبی که اتفاق می‌افتد را درک می‌کند و انتظار آن را دارد؟

ـ اگر محتوا پنهان باشد آیا کاربر خواهد فهمید چگونه به آن دسترسی پیدا کند؟

ـ آیا وب‌سایت روی تمام دستگاه‌ها قابل استفاده است؟

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

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

افکت‌های معلق (hover) برای لینک‌ها خوب عمل می‌کنند ولی زمانی که روی عناصر دیگر اعمال می‌شوند گیج‌کننده خواهند بود. همچنین آنها روی دستگاه‌های صفحه لمسی دسترسی کمتری دارند. زمانی که کاربر کلیک می‌کند، تعامل معمولا خیلی قابل استفاده است چرا که به کاربر بازخورد می‌دهد. سایت getsatisfaction از یک تکنیک هوشمندانه برای نشان دادن 12 توصیه مختلف استفاده کرده است. در این مثال، شرکت از گرافیک‌های برداری مقیاس‌پذیر (Scalable Vector Graphics - SVG) برای پشتیبانی از انیمیشن بهره برده است.

همیشه فواید و مضرات هر فناوری را در نظر داشته باشید. منطقی‌ترین راه‌حل لزوما راحت‌ترین راه برای پیاده‌سازی نیست. SVG یک محیط گرافیکی دیگر فراهم می‌کند که در برخی شرایط انیمیشن را مثل یک برش کیک می‌کند. همچنین طبیعت مقیاس‌پذیری SVG فواید آشکاری نسبت به تصاویر پیکسلی با اندازه ثابت دارد. دلیلی که به ندرت می‌توانیم SVG را ببینیم این است که اینترنت اکسپلورر از آن پشتیبانی نمی‌کرد (تا قبل از نسخه 9). البته کتابخانه رافائل (Raphaël) که سایت getsatisfaction از آن استفاده کرده است، به طور خودکار SVG را برای VML (Vector Markup Language یا زبان نشانه‌گذاری‌برداری) که IE آن را می‌فهمد، تبدیل می‌کند.

انتقال‌های CSS می‌توانند بسیاری از ویژگی‌ها را تغییر دهند تا افکت‌های بصری زیادی بسازند. ولی در نهایت آنها هنوز هم به شیوه‌های CSS و انتقال‌های با طول ثابت محدودند. آیا راهی وجود دارد که انیمیشن‌های پیشرفته‌تری تولید کرد؟

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

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

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