نمونه هایی از بهترین وب سایت ها در استفاده از Javascript

[hooman_the1]

اهمیت جاوا اسکریپت

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

1. Histography




Histography راه جذابی برای اکتشاف در طول 14 میلیارد سال تاریخ جهان است .اگر مجموعه مستند Cosmos را دیده باشید ، ممکن است Carl Segan را بیاد بیاورید که در مورد " تقویم کیهانی " صحبت می کند . اگر عمر کل گیتی را یک سال فرض کنیم ، تاریخ مکتوب بشر به اندازه آخرین ثانیه از آخرین روز اسفند ماه می باشد .
14 میلیارد سال تاریخ ، مجموعه عظیمی از اطلاعات است و نشان دادن اینهمه اطلاعات در پنجره مرورگر کار ساده ای نیست . اما طراح و توسعه دهنده وب "Matan Stauber" با اینکه خیلی به امکان انجام این کار مطمئن نبود خود را به چالش کشید : " فکر می کنم مسئله اصلی تقسیم بندی این اطلاعات است " او ادامه می دهد : " چطور میتوان تایم لاینی ایجاد کرد در صورتیکه 99.9% از تاریخی که می شناسیم به نسبت کل تاریخ کره زمین مثل یک قطره از دریاست ."
این طراح که پدرش یک تاریخ دان است ، هنگامی که دانشجوی آکادمی هنر و طراحی دانشگاه Bezalel بود تحت نظر Ronel Mor تصمیم گرفت وب سایت Histography را برپا کند : " از میان تمامی راههای به تصویر کشیدن وقایع تاریخی در طول زمان ایجاد Timeline بهترین و متداول ترین کار ، از زمان اختراع کاغذ است" . Matan ادامه می دهد : " من ایجاد تایم لاین را برای به تصویر کشیدن این حجم عظیم از اطلاعات تاریخی یک راه حل هیجان انگیز یافتم . "
این سایت وقایع تاریخی را از بانک اطلاعاتی ویکی پدیا می گیرد سپس تصاویر را از موتور جستجوی تصاویر گوگل و ویدیو ها را از یوتیوب دریافت کرده و با متن مقاله ترکیب می کند . نحوه نمایش اطلاعات تجربه لذت بخشی را برای کاربر ایجاد می کند . اگر از آن دسته افرادی هستید که زمان زیادی را صرف مطالعه ویکی پدیا می کنید حتما برای زیر و رو کردن این سایت وقت بگذارید .

ادامه دارد ...

منبع : appzweb.ir

[hooman_the1]

2. Filippo Bello


Adoratorio برای ایجاد عمق کافی در وب سایت بجای استفاده از WebGL به CSS و Javascript روی آورده .
این وب سایت که نمونه کارهای هنرمند ایتالیایی Filippo Bello را به نمایش می گذارد ، توسط Enea Rossi و Alessandro Rigobello در استودیو طراحی Adoratorio طراحی و ساخته شده است .
بازی با عمق در وب سایت بسیار تاثیرگذار انجام میشود ، تصاویر به آرامی به سوی کاربر حرکت می کند که حس فرو رفتن در تصاویر را تداعی می کند . این حرکت بعلاوه تصویر پس زمینه که در باکس هایی جدا جدا به سمت بیننده حرکت می کند یک عمق واقعی در وب سایت ایجاد می کند . تیم طراحی با استفاده نکردن از متداول ترین تکنولوژی های طراحی وب ، چالش بزرگی را برای خود ایجاد کرده . Rossi ، کارگردان هنری و یکی از طراحان می گوید : " WebGL برای همه کاربران مناسب نیست ! بنابراین یکی از بزرگترین چالش های پیش روی ما ایجاد عمق در وب سایت با استفاده از کدهای CSS3 و Javascript به تنهایی و بدون استفاده از تکنولوژی های دیگر بود .
"گذار صفحه (Page transition) و کمی zoom effect روی تصاویر نتایج قابل قبولی بر روی نمایش وب سایت ایجاد کرده بطوری که Rossi آن را " فراتر از انتظار " می نامد .

ادامه دارد ...

منبع : appzweb.ir

[hooman_the1]

3. The St.Louis Browns



این وب سایت مانند vintage book به تصویر کشیده شده است .
شرکت طراحی HLK با ایجاد این وب سایت در مورد تاریخچه باشگاه بیس بال St.Louis Browns ، تجربه لذت بخشی را برای کاربران این سایت ایجاد کرده است . این سایت مانند صفحات یک کتاب کلاسیک طراحی شده است با درج تمام جزییات و بخش بندی های آن . کاربران می توانند هر بخش را مانند خواندن یک رمان تاریخی ، مرور کنند .
طراحی این وب سایت الهام گرفته شده از متون تبلیغاتی و جراید دهه 1920 امریکاست که با تصاویری از همین دوران ، آراسته شده . تمامی این محتواها با رنگ های خاکستری و قهوه ای و سایه هایی نارنجی رنگ ، حال و هوای آن دهه را در ذهن طرفداران این تیم پرسابقه تداعی می کند .
بخشی از موارد مورد علاقه من در این سایت جزییاتی هستند از قبیل دکمه منو ( دایره ای با سه خط افقی منو مانند داخل آن ) که وقتی نشانگر را بر روی آن می برید به شکل توپ بیس بال در می آید . همچنین تایم لاین سمت چپ صفحه که با اسکرول آپدیت می شود هم برایم بسیار جالب است .
این سایت برپایه Node.js و Express framework ساخته شده که بتواند انتقال و تغییر ملایم میان محتویات وب سایت را فراهم آورد .

ادامه دارد ...

منبع : appzweb.ir

[hooman_the1]

4. Leg Work Studio


وب سایت Leg Work Studio از انیمیشن های تعاملی جهت افزایش لذت بازدید از وب سایت استفاده کرده است.

Leg Work کارهای زیبایی در سبد محصولات مبتنی بر وب دارد ، از طراحی گرافیک تا محصولات تعاملی و مدیا . بنابراین زیبایی و خلاقیت وب سایت رسمی این استودیو دور از ذهن نیست . شخصیت خلاقانه این استودیو از روی محتویات چندرسانه ای و جذاب این وب سایت که با ته مایه ای از طنز آراسته شده خودنمایی می کند . طراحان این وب سایت با ترکیب عکسهایی که vintage effect بر روی آنان اجرا شده و همچنین نقاشی های دیجیتال با تاکید بر فضای سفید و همچنین نوشتارهای دستی ، قطعه هنری فوق العاده ای ایجاد کرده اند که بخوبی معرف خلاقیت ذاتی این استودیو است .
اما شاهکار هنری این وب سایت فقط مختص به تصاویر آن نیست ، بلکه انیمیشن های تعاملی بکار رفته در سایت تحسین هر بیننده ای را بر می انگیزد . بعضی از تصاویر را حتی می توان نوعی ویدئو به حساب آورد که با After Effects ایجاد شده است . مانند sidebar وب سایت که به آرامی حرکت می کند .
اولویت اول طراحان این وب سایت مرورگرهای موبایلی بوده است ، و در هنگام نمایش در مرورگرهای دسکتاپ بعضی قابلیت ها شبیه سازی شده است ، مانند اینکه کاربر پی سی می تواند با استفاده از track pad قسمت های مختلف را بپیماید . این وب سایت با استفاده از Modernizer و jQuery ساخته شده است .

ادامه دارد ...

منبع : appzweb.ir

[hooman_the1]

5. IBM Design



وب سایت IBM Design بجای دنیای دیجیتال الهام گرفته از دنیای فیزیکی و واقعی است.
در چند سال اخیر IBM سمت و سوی حرکت خود را به سمت طراحی هایی برگرفته از اشیاء فیزیکی تغییر داده است . این کمپانی به تازگی IBM Design Language را که آپدیتی برای animation vocabulary خود می باشد را ارائه کرده است . این زبان منابع و مستندات مورد نیاز توسعه دهندگان وب را بصورت منبع باز (Open source) در اختیارشان می گذارد .
چیزی که بیش از اپن سورس بودن آن برایم لذت بخش است ، نحوه نگاه این استودیو به میراث استودیو IBM و تغییر دیدگاه از مفاهیم دیجیتال به الهام گرفتن از منابع فیزیکی است . Hayley hughes ، مدیر بخش زبان طراحی IBM می گوید ، تیم ما برای طراحی از اشیاء واقعی ، اجزاء تشکیل دهنده آن ها و حجم فیزیکی شان الهام می گیرد .
" از حرکت قدرتمندانه دسته دستگاه چاپ تا حرکت نرم محفظه کاغذ پرینتر ، هر حرکت به منظوری خاص طراحی شده است " ایشان ادامه می دهد : " نرم افزار ما هم دقیقا همین گونه به جزییات دقت می کند تا بتواند محصول نهایی را زنده و واقعی نمایش دهد ."
چرا انیمیشن اینقدر برای زبان طراحی IBM حیاتی است ؟ خانم Hughes چنین پاسخ می دهد :"دقیقا همانطور که زبان بدن به ایجاد ارتباط کلامی انسان ها کمک می کند ، به همان صورت هم انیمیشن به کاربران کمک می کند که راه خود را از میان محصولات ما پیدا کنند . "

ادامه دارد ...

منبع : appzweb.ir

[hooman_the1]

6. Masi Tupungato


وب سایت عکس محور پروژه تولید نوشیدنی ایتالیایی Masi Tupungato بسیار چشمگیر طراحی شده است .

این وب سایت بسیار زیبا که توسط آژانس بین المللی طراحی AQuest برای پروژه تولید نوشیدنی Masi Tupungato در ایتالیا طراحی شده ، اساس ارائه محتوا را بر دوش تصاویر باکیفیت بنا نهاده .

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

بعضی صفحات این سایت حجم بالایی دارند ( بین 1.2 تا 5 مگابایت ) که بعضی اوقات بخاطر تکنیک های سنگین بکار رفته در صفحات حتی حجیم تر از این مقدار نیز می شود . اما با وجود حجم بالا ، سایت بسیار خوش ساختی است که نمای اولیه را در کمتر از یک ثانیه به کاربر نشان می دهد و سپس به سرعت نمایشگر میزان بارگذاری را در مرورگر ایجاد می کند . فریم ورک بکاررفته در این سایت متعلق به unsemantic.com است که جانشین خلف سیستم گرید 960 است .

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

ادامه دارد ...

منبع : appzweb.ir

[hooman_the1]

7. tota11y



Tota11y "دست رسی پذیری" را آسان تر می کند .
ساختن وب سایتی که قابل دسترسی (accessible) باشد بسیار حیاتیست . گرچه تکنیک ها و تست های مربوطه بعضی اوقات آنقدر تخصصی به نظر می رسد که طراحان و توسعه گران وب را تا سرحد مرگ می ترساند.
!نترسید ؛ tota11y اینجا در کنار شماست ، ابزاری ساده که می تواند شامل یک فایل جاوا اسکریپت متصل شده به صفحه و یا حتی بصورت یک bookmarklet بر روی وب سایت باشد . این ابزار مبتنی بر جاوا اسکریپت آیتم های وب پیج شما را بررسی کرده و آنهایی را که قوانین مربوط به accessibility را نقض کرده اند مشخص می کند از جمله مواردی از قبیل کنتراست تصویری پایین ، توضیحات مربوط به عکس برای نابینایان و .... .
این ابزار جاوا اسکریپتی ، پس از یافتن آیتم های مشکل دار ، آنها را بصورت بصری مشخص کرده تا شما به عنوان کاربر بتوانید آنها را به تیم طراحی و یا کارفرما نشان داده و در عین حال توضیح مختصری هم در مورد مشکل و رفع آن در اختیارتان می گذارد تا کار رفع نقص به راحتی انجام شود .
وب سایت khan academy برای tota11y خیلی پرزرق و برق نیست اما بسیار کارامد است ، این برنامه ظاهری ساده دارد که به کاربران کمک می کند بدون تشریفات وب سایت خود را از لحاظ accessibility بهینه کنند .
ادامه دارد ...

منبع : appzweb.ir

[hooman_the1]

8. Know Lupus


وب سایت know Lupus مطالب و حقایق علمی را با روشی جذاب به شما ارائه می دهد .

The Lupus Foundation of America یا LFA یک سازمان ملی است که بر روی بیماری پوستی lupus مطالعه می کند . استودیو Viget به عنوان شریک این سازمان در پروژه آگاه سازی افکار عمومی در مورد بیماری لوپوس فعالیت می کند .

“ LFA قصد داشت که بازی جذابی تهیه کند که با استفاده از آن مطالب آموزنده و هشدار دهنده در مورد بیماری لوپوس را در اختیار مردم قرار دهد " Laura Sweltz طراح UX و مدیر پروژه اضافه می کند : " تمام فعالیت ما بر رسیدن به همین هدف متمرکز شد علاوه بر آن تصمیم گرفتیم مشخصات محصول ما به نحوی باشد که افراد مبتلا به بیماری لوپوس از اشتراک آن لذت ببرند ."

راه حل Viget بازی بود با الهام از بازی های کارتی کازینوها که با استفاده از React ساخته شد و هر کارت یکی از مشخصات بیماری لوپوس را نشان می داد . طراح معروف Blair Culberth در عین ایجاد فضایی بانشاط مطالب مهمی را از طریق این بازی به کاربران منتقل می کند ، همچنین صداهای مربوط به فضاهای کازینوها نیز برای هرچه جذاب تر شدن فضا به این بازی اضافه شده است .

انیمیشن ها کاملا نرم و زنده اند که به افزایش حس سرزندگی محیط بازی کمک شایانی می کند. به تمام اینها تجربه فوق العاده استفاده از این بازی با موبایل را اضافه کنید ، زیرا این وب سایت کاملا ریسپانسیو (responsive) طراحی شده است . نتیجه نهایی پروژه بازی بسیار سرگرم کننده ای است که یادگیری در مورد این بیماری را برایتان لذت بخش می کند .

ادامه دارد ...

منبع : appzweb.ir

[hooman_the1]

9. The Boat


The Boat یک رمان تصویری آن لاین است .

محبوبیت داستان های بلند بصورت پیوسته در حال افزایش است اما شبکه خبرپراکنی SBS ، رمان گرافیکی آنلاینی را با نام The Boat بر اساس نوشته ای از Nam Le ساخته است که هم در استایل و هم در اجرا بی همتاست . تصاویر سبک Sumi ink که بصورت انیمیشن های حرفه ای پردازش شده و با صداهای فراگیر محیطی ترکیب شده ، روایت گر داستان سفر یک پناهنده جوان ویتنامی است .
برای ایجاد حس زنده بودن داستان ، Matty Huynh طراح گرافیک این پروژه ، مدت 6 ماه را با Nam Le که خالق این رمان است گذراند و با استفاده از نظرات او به خلق شخصیت ها و ایجاد thumbnail ها پرداخت .
Kylie Boltin تهیه کننده این پروژه می گوید : " توازنی که در وب سایت می بینید حاصل دوره طولانی تولید است . این مدت زمان باعث شد افراد تیم با داستان همذات پنداری کنند و تک تک لحظات را لمس کنند . ما ضرباهنگ داستان را درک کردیم و فهمیدیم کجاهای داستان نیاز به برجسته شدن دارد . خط مشی ما ، روایت داستان اصلی بود بدون اینکه المان هایی برای جذابیت بیشتر به آن اضافه کنیم ."
پنل گرافیکی بصورت دفترچه خاطرات طراحی شده ، همانقدر جاری ، جذاب و پر از احساس . این وب سایت ثابت کرد که داستان سرایی آنلاین چقدر می تواند قدرتمند و جذاب باشد .

پایان

منبع : appzweb.ir