Статьи

30 сайтів-прикладів відмінного використання JavaScript

За допомогою JavaScript, стверджують автори статті, можна створювати запам'ятовуються платформи, на які користувач захоче повернутися. Мова дозволяє розробляти гри, сайти, API і багато іншого.

Портфоліо веб-дизайнера Майка Куса виконано в «чистої і стриманій манері», пишуть редактори Creative Bloq. У ньому великі зображення поєднуються з простими елементами призначеного для користувача інтерфейсу.

«Я думаю про своїх роботах, як про бренд. Немає ніякої необхідності додавати в мій сайт зайві елементи дизайну », - каже Кус.

Немає ніякої необхідності додавати в мій сайт зайві елементи дизайну », - каже Кус

У портфоліо Куса однаково легко орієнтуватися на всіх типах екранів - він зазначає, що домогтися такого ефекту було найскладніше. Кожен з проектів дизайнера представлений зображенням або фотографією - такий, щоб користувачеві захотілося дізнатися про роботу більше.

Сайт креативного агентства Hello Monday зазнав значних змін, зауважують автори статті. Розробниками компанії була виконана величезна робота. Їм вдалося зробити інтерфейс доброзичливим для користувача.

Старий сайт агентства Hello Monday Старий сайт агентства Hello Monday

Тепер на сайті представлені приклади вже виконаних агентством замовлень - у кожного проекту є своя сторінка, на якій описана його історія, що дає користувачеві більш глибоке розуміння, чим займається Hello Monday.

Оновлений сайт Hello Monday Оновлений сайт Hello Monday

«Ми намагалися відійти від шаблонного уявлення про те, як повинен виглядати сайт креативного агентства», - розповідає Кеті Хертел, керівник проекту по редизайну веб-сторінки Hello Monday. Автори матеріалу знаходять сайт дуже привабливим і чуйним, чому сприяє організація проектів на головній сторінці: вона автоматично доповнюється новими роботами агентства при прокручуванні вниз.

Multeor - це розрахована на багато користувачів онлайн-гра, написана на JavaScript з використанням елемента canvas HTML5. Вона розроблена Ар'єном де Врайзом і Філідор Вайзе, а спроектована Артуром ван Хугом. Основне завдання користувача в грі - контролювати падіння метеоритів, отримуючи очки за залишені їм руйнування.

Основне завдання користувача в грі - контролювати падіння метеоритів, отримуючи очки за залишені їм руйнування

Гра використовує Node.js-сервер для управління зв'язком між настільними і мобільними пристроями за допомогою WebSockets.

Вайзе акцентує увагу на тому, що при розробці Multeor не використовувалися вже існуючі ігрові бібліотеки:

Ми писали все самі - це було дуже захоплююче, до того ж, ми дізналися багато нового. Те, що ми не залежали від конкретних збірок і префабов, дало нам певну свободу дій: не потрібно було займатися рендерингом існуючої графіки, обробкою колізій і окремо описувати систему, що відповідає за вибухи.

Crime Timelime - агрегатор, що збирає дані про злочинність в Великобританії за допомогою публічних API. Він дозволяє користувачам дізнатися, як йдуть справи в їх регіоні.

«Ми організували сайт таким чином, щоб він показував карту регіону і місця скоєння злочинів - за місяць, вибраний користувачем на панелі знизу», - каже розробник проекту Алекс Міллер.

Ресурс використовує API Google Maps, для створення панелі з місяцями застосовувалися jQuery і jQRangeSlider. Коли користувач здійснює доступ до картки - наприклад, клацає мишкою в певне місце на ній, сайт оновлює зображення за допомогою JavaScript. «Бульбашки», що показують кількість злочинів, були створені за допомогою CSS і анімовані за допомогою jQuery.

На сайті Here is Today мову JavaScript використовувався для створення анімації. Творець ресурсу, дизайнер Люк Твімен, так пояснює свою ідею: «Я хотів створити щось, що дало б кожній людині відчуття масштабу часу. Here is Today допомагає зрозуміти, наскільки велика історія всесвіту ».

Твімен зазначає, що він з самого початку вирішив відмовитися від стандартних величин вимірювання - пікселів, і описав власні, грунтуючись на розмірах екрану. Це було зроблено для того, щоб сайт виглядав однаково на всіх пристроях.

Це другий проект на JavaScript, створений дизайнером, і в ньому він застосував елементи, які не використав в попередньому. Однак Твімен знаходить в мові безліч подібностей з іншими високорівневими мовами програмування, до того ж, за його словами, JavaScript має досить детальну документацію, а в інтернеті (в тому числі на тематичних формах) розібрано велику кількість прикладів.

Tweetmap зображує на країни на карті пропорційно кількості відправлених з них твітів. Розробник сервісу Роб Хоукс перераховує кілька технологій, використаних при його створенні: TopoJSON, D3.js, Node.js, PhantomJS, і спеціальні алгоритми побудови суміжних картограм в режимі реального часу.

Ми вибрали Node.js, тому що у нас вже був досвід його використання, і тому що це проста, швидка і гнучка платформа. Для анімації карти (в форматі TopoJSON) ми використовуємо D3 - фантастичну бібліотеку для візуалізації даних. Зокрема, ми широко застосовуємо модуль geo, який дозволяє робити складні географічні розрахунки і перетворення.

Щоб уникнути проблем з поданням карт в браузері клієнта, система генерує карти на сервері за допомогою D3, запускає і рендерить їх за допомогою движка PhantomJS, і тільки потім передає користувачеві - це дозволяє не створювати «дірок» при показі карт.

Щоб уникнути проблем з поданням карт в браузері клієнта, система генерує карти на сервері за допомогою D3, запускає і рендерить їх за допомогою движка PhantomJS, і тільки потім передає користувачеві - це дозволяє не створювати «дірок» при показі карт

The Trip - інтерактивний фільм, створений за допомогою JavaScript і HTML5 (без використання Flash). Отто Наскарелла, творець проекту, вважає, що завдання розробки подібного сервісу виявилася дуже складною:

Більшість труднощів, з якими ми зіткнулися, були пов'язані з тим, що HTML5 на момент написання сайту не мав коштів для крос-браузерної розробки. Тоді ми вирішили, що будемо рекомендувати клієнтам використовувати Chrome.

Код сайту на JavaScript використовує jQuery практично для всіх завдань. Розробники також застосовували TextBlur і TextDrop - для розмиття і анімації тексту.

Ця сторінка, написана на JavaScript - нове портфоліо і блог дизайнерського і маркетингового агентства Si Digital. Провідний розробник проекту Алекс Крук так пояснює анімацію на головній сторінці: «Рідина, що рухається по трубах, веде користувачів на нашу портфоліо - вона активує анімацію зображень на кожному з етапів дослідження сайту клієнтом».

Для досягнення подібного ефекту Крук застосував метод jQuery.animate (). До того ж, додає він, потрібно було правильно вибрати швидкість заповнення рідиною труб - адже все читають з різною швидкістю.

Інтерактивний графік на сторінці з описом виконаних проектів і команди агентства, реалізований за допомогою jQuery. Тимчасова шкала, за словами Крука, генерується динамічно - на основі інформації з бази даних, з використанням технології Ajax.

Жан Хальфстейн - веб-дизайнер. У його портфоліо авторів статті найбільше привернула головна сторінка - і анімація на ній. «Я дійсно непогано провів час, поки возився з різними ефектами. Я дуже люблю використовувати нові технології, так що вирішив зробити основну сторінку свого сайту своєрідною пісочницею - там я развлекаюсь з Three.js і елементом canvas HTML5 », - розповідає Хальфстейн.

Ідея дизайнера полягала в тому, щоб створити портфоліо, слідуючи сучасним тенденціям - воно повинно було бути мінімалістичним, і при цьому привносити щось свіже в дизайн сайтів. Тому він вирішив використовувати управління анімацією за допомогою рухів миші і перетягування, а не натискань клавіш навігації.

За словами Джонса, коли він розробляв сайт, у нього було більше досвіду в роботі з Flash, ніж з JavaScript, але йому захотілося спробувати що-небудь нове - щоб зрозуміти, на що він здатний. «Я відразу зрозумів, що синтаксис JavaScript майже такий же, як синтаксис ActionScript - тому дуже скоро повністю освоївся», - описує процес написання коду Джонс.

«Я відразу зрозумів, що синтаксис JavaScript майже такий же, як синтаксис ActionScript - тому дуже скоро повністю освоївся», - описує процес написання коду Джонс

Джонс згадує, що Flash не давав йому доступу до роботи з рухами миші - це був новий досвід, який йому дуже сподобався. Розробник хотів домогтися такої чуйності сайту, якої він не міг досягти, використовуючи переходи між класами в CSS. Джонс задоволений досягнутим результатом:

Якщо ви збираєтеся перейти з ActionScript на JavaScript, не зволікайте ні секунди. Роблячи свій сайт, я хотів зрозуміти, чи здатний JavaScript на те, на що здатний Flash. І я дуже вражений.

MapsTD - онлайн-гра, суть якої полягає в обороні фортеці. Фортеця - це власний будинок користувача, який він повинен захищати від лиходіїв, невпинно бродять по вулицях району.

Фортеця - це власний будинок користувача, який він повинен захищати від лиходіїв, невпинно бродять по вулицях району

Творець проекту Дункан Барклай пояснює, як це працює: «Ми використовували API Google Maps, MooTools і JavaScript. Найскладніша частина - пошук маршруту, яким будуть слідувати вороги користувача. Як тільки гравець вибрав початкову точку, сервіс здійснює пошук довготи і широти, і обчислює можливі шляхи c допомогою Google ».

По ходу гри на екрані з'являється все більше противників. Барклай розповідає, що розробникам довелося «боротися» c таймингом браузерів - справа в тому, що більшість з них згодом знижує частоту перевірки оновлень на сторінці, і потрібно було зробити так, щоб цього не відбувалося.

Інша проблема полягала в тому, що разом з проходженням гри збільшувалася кількість ворогів, і знижувалася продуктивність. В результаті розробниками було вирішено підвищувати рівень умінь лиходіїв, а не їх число.

Ресурс Glimpse розроблений спільно командою Windows IE і проектом TheFind, і поєднує в собі систему пошуку TheFind і додаток тих же розробників для онлайн-шопінгу на Facebook. В рамках Glimpse програмісти випустили власний фреймворк, заснований на Turn.js.

Метою команди з самого початку було зробити з Glimpse веб-додаток, а не звичайний сайт. Розробники використовували парадигму «модель-уявлення-поведінка», яка розділяє на три окремих компонента модель даних, призначений для користувача інтерфейс і взаємодія з клієнтом. Сервіс застосовує шаблони рендеринга моделей на стороні клієнта Thrift або JSON - в залежності від обчислювальної потужності клієнта.

Бібліотека Turn.js також використовувалася при розробці каталогів. За допомогою CSS і JavaScript моделям, представленим на сайті, надається обсяг - за рахунок накладення тіней на зображення.

RBMA Radio використовує інструмент Modernizr, який дозволяє вести кросбраузерну розробку на HTML5 і CSS. Modernizr постійно оновлюється, так що творці сайту можуть покращувати код в міру подання нових можливостей.

Крім того, при реалізації сервісу застосована бібліотека Backbone.js - за допомогою неї завантажуються плитки для створення ефекту нескінченної сторінки.

Nouvelle Vague - сайт від французького дизайнерського агентства Ultranoir. Сервіс дозволяє «відстежувати» твіти по заданому хештегом. Він реалізований за допомогою JavaScript, WebGL і HTML5. HTML5, правда, відповідає тільки за тизер при відкритті ресурсу.

HTML5, правда, відповідає тільки за тизер при відкритті ресурсу

Один з розробників агентства розповів, що на створення сайту пішло чотири місяці, а працювали над ним три людини. «Нам було дуже цікаво спробувати попрацювати з WebGL», - пояснює він.

Основна мета проекту полягала в тому, щоб за допомогою 3D-зображень відтворити атмосферу з відеозаставки. Команда занурилася в нові технології HTML5, CSS3 і JavaScript, і вважає, що ці мови можуть стати стандартами для роботи з 3D в майбутньому - через якісного рендеринга, багатих можливостей взаємодії та реагування.

The Convergence - браузерна гра, своєю ретро-графікою нагадує Super Mario Bros. Вона демонструє приголомшливі можливості JavaScript і HTML5 і доводить, що HTML5 справляється зі своїми завданнями нітрохи не гірше, ніж Flash.

Вона демонструє приголомшливі можливості JavaScript і HTML5 і доводить, що HTML5 справляється зі своїми завданнями нітрохи не гірше, ніж Flash

Розробники обіцяють в майбутньому додати в гру аудіосупровід і нові рівні, а також підтримку Mozilla Gamepad API.

Це веб-додаток перетворює слова «купите один раз, читайте на всіх пристроях» в реальність. Воно використовує технології HTML5, JavaScript API, бібліотеки jQuery і jQuery UI і кілька плагінів jQuery, в тому числі jScrollPane для прокрутки сторінок і jQuery Templates. Крім того, команда розробників скористалася WebSQL для підтримки офлайн-режиму.

Сайт, запущений студією WeFail, вважають автори замітки, виглядає страшнувато, але все одно дуже круто. Ресурс виконаний в досить різкому стилі. JavaScript використовується для анімації при взаємодії користувача і системи. Щоб прокручування здійснювалося тільки для окремих елементів інтерфейсу, командою був застосований плагін jQuery ScrollTo. Для появи відео не у спливаючих вікнах, а прямо на сайті використовувалася бібліотека Shadowbox.js.

Крім того, в коді Les Enfants застосовується плагін jQuery Cycle - він відповідає за відображення картинок і прикладів робіт агентства.

«Ми запустили Les Enfants, щоб зрозуміти, які можливості по продуктивності є у JavaScript. Виявилося, що в поєднанні з СSS Transform можна добитися відмінних результатів », - каже розробник Мартін Х'ю.

Не так давно, зазначає Х'ю, подібні речі можна було створювати тільки за допомогою Flash, але тепер у нього є життєздатна альтернатива - JavaScript.

Pinterest - яскравий приклад використання JavaScript для створення ефекту нескінченної сторінки. Для створення сайту знадобилися інструменти jQuery, jQuery UI і плагін PageLess.

Як вважають автори замітки, PageLess життєво важливий для Pinterest, тому що нескінченна прокрутка і прогрузкі нових пинов набагато ефективніше допомагає утримувати увагу користувача, ніж соціальні функції - наприклад, коментування записів.

Love Bobm Builder допомагає користувачам висловити свою любов або подяку кому-небудь. Це акуратний і простий сайт, який дозволяє створити і відправити послання-бомбу.

Це акуратний і простий сайт, який дозволяє створити і відправити послання-бомбу

Ресурс іcпользует інструмент Modernizr для своєчасного оновлення коду на JavaScript і HTML5.

Коли користувач потрапляє на сайт, в першу чергу він бачить так званий «прелоадер» - може здатися, що він виконаний за допомогою Flash, але це не так. За наповнення склянки пивом у міру завантаження відповідає HTML5 і JavaScript.

Ресурс використовує функцію часткової прокрутки - тільки для окремих елементів інтерфейсу, і дозволяє користувачеві інтерактивно взаємодіяти з зображеннями.

Натискаючи на маски тварин, клієнт вирушає до інших сцен - все анімаційні ефекти в яких виконані за допомогою jQuery.animate ().

Trello - додаток для спільного або індивідуального планування, в якому користувачі можуть створювати списки виконаних і невиконаних завдань і ділитися прогресом в режимі реального часу. Сайт розроблений з використанням Node.js, MongoDB і Backbone.js.

js

Один з творців Trello Даніель ле Чермінан пояснює, що застосування тільки однієї мови при написанні сайту допомагає новим членам команди швидше влитися в процес розробки.

Спілкування між користувачами реалізовано за допомогою Web Sockets - ле Чермінан зазначає, що це досить нова технологія, тому при її налаштування виникали деякі складності.

Це гра в ретро-стилі, створена студією Little Workshop, покликана продемонструвати можливості HTML5, JavaScript і, в особливості, Web Sockets. Він може одночасно підтримувати взаємодію між тисячами користувачів.

Він може одночасно підтримувати взаємодію між тисячами користувачів

«Створення багатокористувацької гри - відмінний спосіб продемонструвати, як такі технології можуть працювати разом. BrowserQuest спирається на сервери Node.js, кожен з яких може запустити кілька екземплярів ігрового світу », - розповідає розробник студії Гійом Лекольне.

JS1k - щорічний конкурс, завдання учасників якого створити сторінку на JavaScript на задану тему (найчастіше - анімаційні зображення). Її вага не повинна перевищувати 1 КБ.

Тема цього року - «Here be dragons».

Робота-переможець конкурсу в 2012 році Робота-переможець конкурсу в 2012 році. Автор - Філіп Бучанан, тема - «Любов»

Робота переможця 2012 року з самого початку важила 8 КБ - але за день Філіп зміг скоротити її розмір до необхідного 1 КБ, оптимізувавши алгоритм генерації дерева:

Моїй тактикою був «чесний обман» компілятора. Наприклад, використання конструкції «a? b: c »замість« if (a) b else c »економить 8 байтів.

Сервіс дозволяє користувачам створювати Таймлайн, і він дуже простий у використанні. В інтерактивну шкалу можна включати твіти, відео, фотографії та аудіозаписи. Свій таймлайн можна описати за допомогою JSON або Google Docs - як зручніше самому клієнту.

Основна ідея сервісу полягає в тому, щоб надати користувачеві можливість трохи розважитися, беручи участь в інтерактивній історії - допомагаючи намальованому чоловічкові долати різні перешкоди. Замальовки на сайті виконуються за допомогою миші.

Для створення гри використовувалися jQuery і бібліотека для роботи з векторною графікою Raphal.js. Реалізація проекту з допомогою Raphal допомогла розробникам уникнути проблем з продуктивністю на більшості пристроїв і у всіх браузерах.

Рекламний сайт мережі пекарень Panera Bread був створений агентством Luxurios Animals. Технічний директор студії Ден Федермен каже, що розробники з самого початку вирішили реалізовувати проект на CSS3 там, де це можливо, а для всього іншого використовувати JavaScript.

Технічний директор студії Ден Федермен каже, що розробники з самого початку вирішили реалізовувати проект на CSS3 там, де це можливо, а для всього іншого використовувати JavaScript

Анімація за допомогою CSS3 забезпечує плавність переходів на всіх типах пристроїв. Крім того, команда скористалася бібліотекою Hammer.js для обробки дотиків, Backbone.js для створення моделей даних, плагінами jQuery Transit і Isotope і HTML.

Peanut Gallery - проект, реалізованій Google Creative Lab. Сайт дозволяє користувач додаваті озвучку в «Німі» короткометражки з с помощью мікрофона. Ресурс використовує Google Speech API та JavaScript API - вони допомагають інтегрувати розпізнавання мови в веб-додатки.

Валден Кламп, один з розробників проекту, виділяє на його погляд цікаву особливість Google Speech API - динамічного розпізнавання мови. Наприклад, якщо англомовний користувач починає вимовляти «European Union», то спочатку розпізнається слово «your» або «year» і лише під кінець воно перетворюється в «European». Ще одна корисна можливість - розпізнавання знаків пунктуації. Словосполучення «знак питання», «знак оклику» та інші автоматично перетворюються у відповідні їм пунктуаційні знаки.

«Інтерактивне вухо» створено агентством Epiphany Solutions для свого клієнта Amphilon, який спеціалізується на слухових апаратах та інших рішеннях для слабочуючих людей. Ресурс орієнтований на дітей віком молодшої та середньої школи. Сайт складається з трьох «вітрин», що демонструють, як влаштовано людське вухо.

Сайт складається з трьох «вітрин», що демонструють, як влаштовано людське вухо

Творець проекту Брайан Джеймс зазначає, що завдяки використанню JavaScript, HTML5 і CSS команда змогла досягти максимальної продуктивності навіть в застарілих і підтримуються браузерах. Анімації при дослідженні вуха за допомогою лупи - це GIF-зображення.

Violin - інструмент для візуалізації коду на JavaScript. Він показує, як частини програми взаємодіють один з одним в режимі реального часу. Сам сайт виконаний на JavaScript з використанням бібліотеки D3.js для побудови графіків.

Сайт британської письменниці Філіппи Грегорі, автора роману «Ще одна з роду Болейн», виконаний на її замовлення агентством Better. Основним завданням розробників була оптимізація майданчики для всіх видів пристроїв. Ресурс побудований на базі FuelPHP CMS. JavaScript відповідає за користувальницький інтерфейс, інтерактивність і плавність переходів на сайті.

JavaScript відповідає за користувальницький інтерфейс, інтерактивність і плавність переходів на сайті

Наприклад, використання конструкції «a?

Новости