eScapegoat — “Отпускаем грехи… пока вы на ходу”

Цель: собрать самые потаённые грехи людей через дружелюбное и забавное социальное приложение.

Задачи:

  • Высокоадаптивный дизайн для разрешений 1280×800 и выше с автоподстройкой под размер окна
  • Работа на ПК, Mac и iPhone 4+
  • Легковесный AJAX-движок
  • Продуманное клиент-серверное взаимодействие
  • Фоновый сбор данных и управление сессией

Технологии:

Время сознаться

У каждого из нас есть свои страшные секреты. Погребённые внутри, они отравляют разум и душу. Древние знали способ разрешения этой проблемы. Они отмечали особый день — Йом Киппур — который существовал именно для разрешения грехов всех людей. Под конец празднования они исчезали (грехи, но не люди) — вместе с двумя одинокими козлами, которых мы сегодня называем «козлами отпущения». Одного из них отправляли в пустыню, а другого - вниз со скалы. Бедные создания.

Американская медийная компания G-dcast ставит своей целью распространение еврейской культуры во всём мире через создание оригинальных обучающих видеороликов, комиксов и других забавных вещей, преобщающих людей к этой древней культуре.

Однако фильмы и комиксы — это одностороннее взаимодействие. Что, если бы мы могли «вмешать» читателя в сам процесс, дать ему почувствовать прохождение древнего ритуала? Например, позволить всем желающим высказать свои потаённые страхи, затем отобрать самые забавные и самые тёмные и сказать: »Ребята, у вас никогда не было настоящих проблем — они вот». Это, безусловно, вызвало бы гораздо больший резонанс.

Так родился eScapegoat.

Доска грешников

Обычно я не пропускаю описание серверной части, но у eScapegoat она весьма прямолинейна. Это просто набор цитат и авторов, иногда связанные вместе, иногда нет (для анонимных посетителей). Каждая сессия состоит из пары цитата-автор, для чего генерируется уникальный ID в начале каждого посещения. Пустые сессии автоматически удаляются с шансом 25% при входе на страницу, что поддерживает базу данных в чистоте.

А вот клиентская часть — совершенно другой разговор и главная часть мозайки. Мне передали дизайн в виде макетов PSD и все изображения в виде готовых к использованию файлов. Однако не смотря на внешнюю простоту оформления собрать всё это воедино оказалось совсем не тривиальной задачей.

Моргающий козлик
Каждый персонаж, которого вы видите на странице, либо морзает, либо разговаривает, либо ходит, либо прыгает. Иногда в пропасть.

Начать хотя бы с того, что все видимые персонажи - не часть фоновой картинки. Каждый — отдельное изображение, но не статичное, а анимированный GIF. Это была генеальная идея — правда, не моя — создать «HTML5-мультфильм». Подпрыгивающие и моргающие персонажи моментально оживляют картинку и вы не можете от неё оторваться, пока не сознаетесь хотя бы единожды (а многие люди сделали это не один раз!).

Фоновое полотно масштабируется в соответствии с размером вашего окна. Персонажи также меняют свои размеры и положение — таким образом, композиция замечательно выглядит как на MacBook с 1280×800 пикселями, так и на ПК с 1920×1200, iPhone и больших Android.

Однако редкий проект проходит без сучка и задоринки. eScapegoat не стал исключением. Из-за недопонимания в начале обсуждения проекта и из-за короткого срока на его завершение алгоритм подстройки не был доработан до совершенства. Композиция выглядит отлично на распространённых разрешениях экрана, на iPhone 4/5 и на многих Android, но для нестандартных размеров окон и небольших устройствах она может быть нарушена. К счастью, по словам заказчика, ошибка понятна и компания уже готова сделать вторую версию проекта с учётом исправлений — вероятно, к следующему празднованию Йом Киппур.

А, значит, eScapegoat вновь пронесётся по Интернету, собирая самые потаённые мысли!

Мобильный вызов

Как я отметил выше, самая сложная задача была в том, чтобы правильно адаптировать изображение под различные размеры окон и устройств. В сегодняшнем мире понятие «устройство» больше не ограничивается настольным компьютером, поэтому каждое по настоящему социальное приложение должно работать и на мобильных браузерах. И чем их больше — тем лучше.

В случае с eScapegoat это подразумевало совершенно отличный вид страниц. Моя задача была в том, чтобы найти способ разделения внешнего вида и клиентского кода для работы с ним (написанном на jQuery), что бы позволило мне использовать один и тот же код вне зависимости от типа устройства.

Я решил эту проблему созданием специальной схемы именования CSS-классов. Например, a-XXX обозначает персонажа (такого, как козла или священника), e-XXX — элемент на странице (например, окно с цитатой), а -XXX — его характеристику (например, «увеличенный»). JavaScript подключает свои обработчики в зависимости от классов элемента, на полную катушку используя отложенные обработчики событий jQuery ($(document).on(’click’, '.e-quote’)) - ведь eScapegoat это одностраничное приложение и содержимое заменяется через AJAX, без перезагрузки самой страницы.

Быстрый прыжок

Видимо, вышеозначенных трудностей мне было мало и я придумал для себя ещё одну. Я уверен в собственных навыках и стараюсь сделать любую работу наилучшим образом со всех сторон. Итак, eScapegoat очень активно использует графику и почти вся она — большие анимации, которые бы потребовали загрузки в течении 2-5 секунд, а для мобильных посетителей и того больше.

Спрайты

Эта задача оказалась проще, чем адаптация изображения под размеры окна. Сперва я объединил все статические элементы (логотип, кнопки, переключатели и прочее) в единый PNG. Он получился большим, но позволил сэкономить десяток-другой начальных запросов на сервер. В целом, это оыбчная процедура и благодарности уходят к HTML5 Stitches.

Следующими были анимации.

Причина, по которой был выбран формат GIF, а не APNG — именно в компактности первого, благодаря однобитному каналу прозрачности и другим особенностям. Неровные переходы по краям были устранены первоначальной заливкой фона аниммации нейтральным цветом (близким к тому, на который она попадёт при помещении на фон страницы), а затем обрезанием без сглаживания вместе с этим цветом. В результате получились весьма компактные файлы (большинство до 20 Кб).

И, наконец, настала очередь фоновых полотен. Здесь JPEG показал себя во всей красе: одно изображение 1920×1200 оказалось в два раза меньше, чем все PNG-спрайты, вместе взятые! Это позволило отказаться от наличия разных версий полотен с под разные размеры окон. Благодаря фоновой загрузке ресурсов страница сайта становится рабочей моментально и устраняются задержки в процессе её использвоания, так как все ресурсы предзагружаются в течении первых секунд, пока посетитель изучает заглавную страницу.

Сегодня я впервые посмотрел в код, чтобы подправить кое-какие тексты, и у меня снесло крышу. Это произведение искусства.