AMD2013

Технологичный Новый год

Задача:

В сжатые сроки разработать площадку для проведения новогоднего конкурса

www.amd2013.ru
AMD 2013 Технологичный Новый год http://www.amd2013.ru

Постановка задачи и описание конкурса

  • PR-кампания AMD Видение проекта

    Чтобы повысить лояльность потребителей к своей продукции, AMD решили запустить PR-кампанию.

  • Конкурс к новому году Видение проекта

    Суть кампании — конкурс новогодних поздравлений в стиле AMD.

  • Суть конкурса Видение проекта

    Участники выкладывают фото и видео на тему «Технологичный Новый год». Посетители сайта голосуют. Победителю — ноутбук с процессором AMD.

Процесс

  • Особенность проека — сжатые сроки

    Неожиданными для нас оказались сроки: на разработку и наполнение нам отводилось всего три недели.

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

    сжатые сроки
Функции

Функции

Первым делом мы делим весь проект на небольшие функции, которые легко описать и проверить.

Для этого создаем прототип и выделяем отдельные блоки. Для каждого блока определяем функцию, например: «Добавление работы».

Тест-кейсы

Тест-кейсы

После того, как мы определились с перечнем функций, пишем как их проверить.

Для функции «Добавление работы» тест-кейс выглядит так (упрощенно):
После нажатия на кнопку «Добавить работу» пользователь должен ввести свой e-mail, ФИО, название работы, краткое описание, загрузить фото или вставить ссылку на видео. Работа должна появиться в списке неопубликованных работ для модерации.

Прогноз трудозатрат

Прогноз трудозатрат

Когда мы определились со списком функций и описали, как их проверить, можно оценивать трудозатраты.

Оценка проводится менеджером, программистом и тестировщиком. Каждый называет свою оценку, затем идет обсуждение. Обсуждение прекращается, когда команда пришла к единой оценке.

План работ

План работ

Детальное планирование, удобная коммуникация с заказчиком и концентрация усилий помогли нам выполнить проект качественно и в срок.

При взаимодействии с заказчиком и с командой мы использовали систему управления проектами Basecamp. Общая среда общения позволила нам сконцентрировать усилия на процессе, а не на долгих согласованиях.

План работ

Тесное взаимодействие в Basecamp

Обсуждение
Выявление и исправление ошибок
Внесение изменений
Фиксация результатов работ
тесное взаимодействие с менеджером

Благодаря удобной среде для обсуждения, вся команда в курсе последних решений.

Каждый может высказаться и будет услышан.

Менеджер со стороны заказчика и тестировщик сообщают о найденных ошибках.

Разработчики следят за ситуацией и внедряют доработки.

Некоторые требования меняются в процессе разработки.

Новые функции вносятся в бэклог и внедряются на сайт.

После проверки готовых функций тестировщиком и заказчиком задачи закрываются

Закрытые задачи отправляются в список завершенных.

Дизайн и верстка

Прогноз трудозатрат

Гайдлайны AMD

Все оформление выполняется строго по корпоративным гайдлайнам.

Брендбук AMD включает в себя логотип, фирменные цвета и шрифты.

Библиотека Isotope

Мы используем изысканную jQuery библиотеку Isotope для создания адаптивного макета.

Оверлеи

Блоки добавления работы, голосования, карта магазинов и другие, размещаются во всплывающих блоках. Решение удобно и ускоряет работу сайта.

Адаптивная верстка

При любом разрешении экрана сайт занимает максимум свободного пространства. Все функции работают на мобильных устройствах.

Ajax

Часть данных подгружается на сайт после загрузки главной страницы. Таким образом мы ускоряем работу сайта и снижаем нагрузку на сервер.

Ленивая подгрузка работ

Для ускорения загрузки сайта, картинки, не попавшие на главный экран, подгружаются при скролле.

Сайт на одной странице

Весь сайт на одной странице

Весь сайт расположен на одной странице.

Необходимые функции отображаются во всплывающих блоках.

Некоторые функции

IPgeobase

Определение региона пользователя для показа ему нужных работ

Работы участников делятся на 8 регионов.

При добавлении новой, выбор региона подсказывается по ip-адресу пользователя с помощью сервиса ipgeobase.ru.

geobase
geobase

Определение региона пользователя для показа ему нужных работ

Голосование также делится по регионам.

Сайт определяет регион голосующего и показывает ему локальных участников и список ближайших магазинов с ноутбуками AMD.

выбор региона

Xитрое добавление видео к работе

Вставка видео из сервисов youtube, vimeo, rutube

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

Возможность вставки любого кода: начиная от url, заканчивая кодом фрейма

Какой бы код ни вставил пользователь, сайт его распознает и добавит ролик.

Xитрое добавление видео к работ

Голосование через соц. сети и электронную почту

  • Быстрая авторизация через FB, VK, TW

    Регистрация и голосования возможны как с помощью электронной почты, так и социальных сетей.

  • Кнопки «Поделиться»

    Для того, чтобы участники конкурса и их друзья могли привлекать больше людей к голосованию, мы добавили кнопки «Поделиться» для основных социальных сетей: VK, FB и Twitter.

  • Логирование голосов и пользователей

    Так как в конкурсе есть ценные подарки от AMD, логично, что появятся пользователи, которые попытаются «Накрутить» голоса.

    Мы не мешаем накручивать, однако фиксируем данные о каждом голосе для анализа.

>Голосование через соц. сети

Админка во фронтенде

Конкурсные работы и статистику по ним можно модерировать как в интерфейсе системы управления так и во фронтенде сайта.

Если администратор авторизован в системе, он может пользоваться дополнительными функциями модератора.

Xитрое добавление видео к работ

Оптимизация быстродействия

  • Вывод 300 работ за 0,3 секунды

    Особое внимание мы уделяем быстродействию.

    Если стандартный компонент становится узким местом в производительности — мы пишем свой.

  • Оптимизация скриптов

    В коде сайта не допускаются лишние теги. Повсеместно используется Ajax.

    Внешние скрипты и таблицы стилей сжаты при помощи специальных утилит.

  • Трудности с ИЕ

    Почти треть времени разработки ушла на борьбу с браузером Interner Explorer 8+.

    Нам приходилось менять загрузчик фотографий, дописывать отдельные скрипты, чтобы все функции сайта полноценно работали в «детище» Microsoft.

Накрутки и борьба с ними

  • Специальные сервисы накрутчиков

    Количество голосов

    Когда конкурс завершился, пришло время подводить итоги. Тут нам на помощь пришла система логирования голосов.

    Большая часть мошенников пользовалась накрутками через e-mail и попались в нашу ловушку. Такие накрутки были легко вскрыты и участники исключены из конкурса.

    Чуть сложнее оказалось дело с пользователями социальных сетей. Тут пришлось анализировать случайные выборки голосовавших аккаунтов.

  • Специальные сервисы накрутчиковСпециальные сервисы накрутчиков

    Специальные сервисы накрутчиков

    Некоторые заинтересованные в победе деятели создали специальные автоматизированные сервисы для накрутки голосов через электронную почту.

    Однако, такие трудозатраты себя не оправдали, и мошенники были выявлены.

  • Специальные сервисы накрутчиков

    Вычисление голосов мошенников и вручение призов

    После того, как все «сомнительные» голоса удалены, можно приступить к публикации победителей.

    В итоге мы помогли АMD организовать и провести интересный, популярный и честный конкурс.

Над проектом работали:

  • Менеджеры:
  • Виталий Дощенко
  • Андрей Евтеев
  • Дизайнер:
  • Иван Ижанов
  • Верстальщик:
  • Александр Плут
  • Программисты:
  • Василий Наумкин
  • Александр Рахимов
  • Евгений Дурягин
  • Сергей Прохоров
  • Тестировщик:
  • Андрей Шульга