♞ Как мы делали Worldchess.com
Вступление
Истории шахмат более тысячи лет, и за это время игра пережила множество изменений, взлётов и спадов популярности. В конце прошлого века после игр Каспарова, робота «Deep Blue» и внушительных призовых фондов наступило затишье, и шахматы попали в информационную тень. Сейчас по прошествии двадцати лет их снова начинают называть «спящим гигантом» спортивной индустрии и прочат им новый виток развития. В наши дни в шахматы ежедневно играет более полумиллиарда человек. Игра встроена во многие операционные системы, и даже, как оказалось, в фейсбучный мессенджер. Человек-муравей играет в квантовые шахматы со Стивеном Хокингом, а бывший человек-паук пытается выиграть у Бориса Спасского.
I. Клиент
Высшая шахматная инстанция — ФИДЕ (Fédération Internationale des Échecs, FIDE), основанная в 1924 году в Париже международная организация, которая проводит соревнования, устанавливает правила и определяет будущее шахмат (по сути ФИФА в мире шахмат). В 2012 году в ФИДЕ начали следующий этап развития и заключили партнёрство с компанией «Agon», которая стала заниматься организацией чемпионатов, поиском спонсоров и популяризацией шахмат.
II. Ребрендинг шахмат
Два года назад «Agon» создала бренд «World Chess», который должен был стать новым лицом шахмат и своего рода их департаментом развития.
В 2014 году студия «Pentagram» разработала фирменный стиль и дизайн шахматного набора для «World Chess». Затем настала очередь портала для нового бренда, на котором и профессионалы, и любители смогут узнавать о новостях в мире шахмат, следить за рейтингами и смотреть трансляции. Существующие на тот момент шахматные ресурсы пахли нафталином и всем своим видом показывали, что шахматы находятся в жопе. «Agon» поставила перед нами задачу эту ситуацию изменить. Challenge accepted.
III. Подготовка к проекту
В начале мы встретились с несколькими шахматистами из топ-100, издателем проекта, а также новым главным редактором портала — Диланом МакКлейном, который до этого писал о шахматах для «The New York Times». Узнали, что будет интересно шахматистам (больше всего их волновала аналитика игр с разбором стратегии и ходов), обсудили формат, архитектуру проекта.
По итогам всех обсуждений эссенция брифа звучала так: создать портал не о шахматах, а для шахматистов, причем любого уровня. Основные функции проекта — публикации, рейтинг, трансляции игр. Ок, поехали.
IV. Процесс
1. Структура сайта
Древо проекта строили с помощью «Mindmeister» вместе с клиентом. Достаточно удобный онлайн инструмент для совместного построения структуры. Правда, к концу проекта многие разделы изменились, объединились или вообще отвалились, но первые пару недель работы «паучок» красиво повисел на стене в студии.
2. Проектирование
После согласования разделов и общей структуры перешли к проектированию страниц серыми блоками. Работу тоже вели совместно с клиентом: лейаут презентовали на бумажных развёртках, на которых сразу, без «мы вернёмся к вам с фидбеком», писались и рисовались комментарии и замечания. Совместное участие в проекте, вовлечение, вот это всё.
Затем рулоны оцифровывались в рабочие варфреймы, и уже с ними шла работа по внутренностям будущего сайта. В определённый момент подключили отдел рекламных продаж, чтобы заранее согласовать рекламные места и форматы (выделено оранжевым) и не лепить горбатого по готовому сайту. Согласованные варфреймы сразу оживлялись вёрсткой, либо для быстрого прототипирования использовали новый и бодрый инструмент MarvelApp.
3. Колоризация и шлифовка
После подтверждения проектировки начинаем любимую игру в раскраску, а заодно перекомпоновываем всё ни один раз. А затем ещё. И ещё. Всего было сделано 9 вариантов компоновки главной страницы, а внутри каждого варианта — ещё по 4–6 итераций.
В конце концов файл сhess_home_7–5_1–2_news_block-2-dev.sketch уходит на сборку. Кстати, именно на этом проекте мы окончательно переехали с фотошопа на скетч, потому что файл главной страницы в псд стал весить 100 МБ, а аналогичный файл в скетче 15 МБ и к тому же летал как ракета. Так легко и непринуждённо иконка алмаза заняла в доке первое место.
Вносим 281 правку по итогам сборки первой версии.
Параллельным курсом запиливаем спецраздел о грядущем чемпионате мира в Нью-Йорке.
4. Элементы
Компонуем варианты главного тизера: трансляция, важная новость, сюжет.
Продумываем режим быстрого ознакомления с новостями и пробуем запасной вариант переноса ленты новостей повыше.
Работаем над адаптивом.
Делаем сборку интерфейсных элементов и палитру для разработчиков.
Готовим комплект свг-пиктограмм.
Кстати, пиктограмма юзера на сайте создаётся из портрета текущего чемпиона мира (на момент написания — норвежец Магнус Карлсен). Как только место чемпиона занимает другой, дефолтный юзер меняется на победителя. Для наиболее перспективных игроков заготовки сделаны заранее.
5. Типографика
Основные требование к шрифтам — умеренная аристократичность, строгость и узнаваемость. В итоге сложился следующий комплект:
— В крупных заголовках тон задаёт «Superior Title».
— Для текстовых блоков статей — отечественный «PT Serif». Именно он на тестах показал максимальное удобство для чтения шахматистами, треть которых носит очки.
— Для служебной информации и подписей — «Helvetica Neue».
6. Иллюстрации
Четыре недели, два гигабайта фотографий, одна Лера Базанкова — и в итоге у нас появились портреты всех шахматистов топ-100 в единой стилистике. Даже популярные шахматисты не любители фотосессий, из-за чего пришлось буквально по крупицам выискивать нормальные кадры для отрисовки и запрашивать их в ФИДЕ. Теперь Лера знает всех игроков в лицо лучше, чем судья шахматной федерации :)
Объём переписки с иллюстратором в работе над рейтингом — 319 писем.
V. Главные функции
1. Рейтинг
Один из самых важных разделов, данные для которого приходят с серверов ФИДЕ. Сервера немного отстали от жизни — отдавали данные в экселевских таблицах, медленно, а иногда вообще никак. Пришлось многое перенастроить, зато теперь рейтинг обновляется раз в десять секунд.
На данный момент мы запустили самые важные категории рейтинга:
— Статистика каждого игрока по партиям различных типов игр (классика, блиц, рапид). Можно сравнивать с другими игроками. Кстати, привязанность шахматистов к цвету фигур — не легенда. Поэтому в каждом пироге можно сравнить, как шахматист играл белыми и как — чёрными.
— Самый главный — рейтинг ФИДЕ, на основе которого, собственно, игрок и получает своё место в топ-100. Помимо общего рейтинга в профиле каждого игрока есть график, который показывает изменения позиции игрока на временной шкале.
2. Плеер партий
Любую шахматную партию можно сохранить в текстовом формате PGN (portable game notation), по-русски — «нотация». Мы разработали специальный плеер для проигрывания партий, который переваривает нотацию и визуализирует её на сайте в виде шахматной доски. Можно «прокликать» все ходы игры с комментариями шахматного аналитика и получить полный разбор партии по полочкам. Забавно, что аналитики практически как комментаторы футбольных игр иногда подписывают особо впечатляющие ходы:
No!!!!!!
So unusual for him!
WTF??
Шахматные фигуры для плеера рисовались с набора «Стаунтон», который изготовил англичанин Натаниэль Кук в 1849, а прорекламировал их в своём журнале сильнейший шахматист 19 века Говард Стаунтон, за что они и получили своё название. Данный набор является классическим и им играют на официальных соревнованиях ФИДЕ.
3. Трансляции соревнований
Право на трансляцию игр есть только у ФИДЕ. Чего не было у ФИДЕ, так это возможности транслировать ходы быстро. Процесс устроен так: во время соревнований используются специальные шахматные доски «DGT e-Board» (стоимость под 1000$ за набор) с электронными датчиками, которые фиксируют передвижения фигур. От доски по ком-кабелю информация о ходах передаётся на компьютер администратора соревнования в виде нотации, оттуда — на фтп ФИДЕ. С фтп по специально сделанным для нас шлюзам мы забираем информацию и, наконец, визуализируем ходы игроков на сайте, преобразовывая в привычную доску c фигурами. На начальных тестах разница между ходом игрока и отображением в нашей трансляции составляла 30–60 секунд. После нескольких дней отладки разницу сократили до 4–5 секунд. Нот бэд.
Сама трансляция разделена на два потока. Первый — собственно, сама трансляция с досками и видео, второй — медиапоток, куда сливаются все новости, связанные с соревнованием. Лента формируется с помощью инструмента Waterfall.
И, кстати, приятно, что на кандидатском турнире, на котором мы обкатывали первый раз в боевом режиме трансляцию, победил россиянин Сергей Карякин. Именно он поедет в Нью-Йорк бороться за титул чемпиона мира с Магнусом Карлсеном.
VI. Технологии
Весь бэкенд написан на Python с использованием фрэймворка Django, за долговременное хранение данных отвечают серверы MySQL с репликацией. Оперативные данные хранятся в Redis, кеш на фронтендах Memcached. Хостинг — Amazon. Статика вынесена на S3. Трансляция игр идет с межсерверным взаимодействием через RabbitMQ, realtime-фронтенды на Tornado.
Заключение
Проект запущен в общей сложности за три месяца, сейчас активно поддерживается и развивается. В планах разработка мобильного приложения, создание платформы для игр, наращивание функций рейтинга и совершенствование трансляций игр.
Титры
Дмитрий Салливан
арт-директор и дизайнер
Макар Богданов
дизайнер
Дмитрий Алексашин (Astroshock)
технический директор
Дмитрий Гущин (Astroshock)
ведущий разработчик
Андрей Мирзоян (Astroshock)
разработчик
Лера Базанкова
иллюстратор
Мария Куница
продюсер
Владимир Кукаев
Роберт Фонтейн
Дилан МакЛейн
консультанты
