نمونه هایی از بهترین وب سایت ها در استفاده از Javascript (قسمت اول)
اهمیت جاوا اسکریپت
زبان جاوا اسکریپت فرصتی را فراهم که طراحان سایت با استفاده از آن بتوانند وب سایت هایی طراحی کنند که خود را در ذهن بازدید کنندگان حک کنند و بارها و بارها دوباره به دیدن وب سایت بیایند . این زبان اسکریپتی قابلیت ایجاد بازی ها ، API ها و قابلیت های اسکرولی و خیلی چیزهای دیگر را فراهم می کند .
اینترنت پر از سایت های شاخصی است که با استفاده از جاوا اسکریپت خود را در دل بینندگان جا کرده است و تجربه منحصر به فردی را برای کاربران ایجاد می کند . در این مقاله سعی می کنم به چند تا از شاخص ترین آنان اشاره کنم . با من همراه باشید .
1. Histography
Histography راه جذابی برای اکتشاف در طول 14 میلیارد سال تاریخ جهان است .
اگر مجموعه مستند Cosmos را دیده باشید ، ممکن است Carl Segan را بیاد بیاورید که در مورد " تقویم کیهانی " صحبت می کند . اگر عمر کل گیتی را یک سال فرض کنیم ، تاریخ مکتوب بشر به اندازه آخرین ثانیه از آخرین روز اسفند ماه می باشد .
14 میلیارد سال تاریخ ، مجموعه عظیمی از اطلاعات است و نشان دادن اینهمه اطلاعات در پنجره مرورگر کار ساده ای نیست . اما طراح و توسعه دهنده وب "Matan Stauber" با اینکه خیلی به امکان انجام این کار مطمئن نبود خود را به چالش کشید : " فکر می کنم مسئله اصلی تقسیم بندی این اطلاعات است " او ادامه می دهد : " چطور میتوان تایم لاینی ایجاد کرد در صورتیکه 99.9% از تاریخی که می شناسیم به نسبت کل تاریخ کره زمین مثل یک قطره از دریاست ."
این طراح که پدرش یک تاریخ دان است ، هنگامی که دانشجوی آکادمی هنر و طراحی دانشگاه Bezalel بود تحت نظر Ronel Mor تصمیم گرفت وب سایت Histography را برپا کند : " از میان تمامی راههای به تصویر کشیدن وقایع تاریخی در طول زمان ایجاد Timeline بهترین و متداول ترین کار ، از زمان اختراع کاغذ است" . Matan ادامه می دهد : " من ایجاد تایم لاین را برای به تصویر کشیدن این حجم عظیم از اطلاعات تاریخی یک راه حل هیجان انگیز یافتم . "
این سایت وقایع تاریخی را از بانک اطلاعاتی ویکی پدیا می گیرد سپس تصاویر را از موتور جستجوی تصاویر گوگل و ویدیو ها را از یوتیوب دریافت کرده و با متن مقاله ترکیب می کند . نحوه نمایش اطلاعات تجربه لذت بخشی را برای کاربر ایجاد می کند . اگر از آن دسته افرادی هستید که زمان زیادی را صرف مطالعه ویکی پدیا می کنید حتما برای زیر و رو کردن این سایت وقت بگذارید .
2. Filippo Bello
Adoratorio برای ایجاد عمق کافی در وب سایت بجای استفاده از WebGL به CSS و Javascript روی آورده .
این وب سایت که نمونه کارهای هنرمند ایتالیایی Filippo Bello را به نمایش می گذارد ، توسط Enea Rossi و Alessandro Rigobello در استودیو طراحی Adoratorio طراحی و ساخته شده است .
بازی با عمق در وب سایت بسیار تاثیرگذار انجام میشود ، تصاویر به آرامی به سوی کاربر حرکت می کند که حس فرو رفتن در تصاویر را تداعی می کند . این حرکت بعلاوه تصویر پس زمینه که در باکس هایی جدا جدا به سمت بیننده حرکت می کند یک عمق واقعی در وب سایت ایجاد می کند . تیم طراحی با استفاده نکردن از متداول ترین تکنولوژی های طراحی وب ، چالش بزرگی را برای خود ایجاد کرده . Rossi ، کارگردان هنری و یکی از طراحان می گوید : " WebGL برای همه کاربران مناسب نیست ! بنابراین یکی از بزرگترین چالش های پیش روی ما ایجاد عمق در وب سایت با استفاده از کدهای CSS3 و Javascript به تنهایی و بدون استفاده از تکنولوژی های دیگر بود ."
گذار صفحه (Page transition) و کمی zoom effect روی تصاویر نتایج قابل قبولی بر روی نمایش وب سایت ایجاد کرده بطوری که Rossi آن را " فراتر از انتظار " می نامد .
3. The St.Louis Browns
این وب سایت مانند vintage book به تصویر کشیده شده است .
شرکت طراحی HLK با ایجاد این وب سایت در مورد تاریخچه باشگاه بیس بال St.Louis Browns ، تجربه لذت بخشی را برای کاربران این سایت ایجاد کرده است . این سایت مانند صفحات یک کتاب کلاسیک طراحی شده است با درج تمام جزییات و بخش بندی های آن . کاربران می توانند هر بخش را مانند خواندن یک رمان تاریخی ، مرور کنند .
طراحی این وب سایت الهام گرفته شده از متون تبلیغاتی و جراید دهه 1920 امریکاست که با تصاویری از همین دوران ، آراسته شده . تمامی این محتواها با رنگ های خاکستری و قهوه ای و سایه هایی نارنجی رنگ ، حال و هوای آن دهه را در ذهن طرفداران این تیم پرسابقه تداعی می کند .
بخشی از موارد مورد علاقه من در این سایت جزییاتی هستند از قبیل دکمه منو ( دایره ای با سه خط افقی منو مانند داخل آن ) که وقتی نشانگر را بر روی آن می برید به شکل توپ بیس بال در می آید . همچنین تایم لاین سمت چپ صفحه که با اسکرول آپدیت می شود هم برایم بسیار جالب است .
این سایت برپایه Node.js و Express framework ساخته شده که بتواند انتقال و تغییر ملایم میان محتویات وب سایت را فراهم آورد .
ادامه در قسمت دوم مقاله
