Разработка интересных HTML-презентаций

На этом этапе агентство и клиент знакомятся, проходят предварительные обсуждения. Клиент заполняет бриф, ставит задачу на разработку, проходит знакомство с материалами, определяется объем HTML-презентации. Решаются вопросы как общего характера, такие как цели-задачи, целевая аудитория, так и технического — анимация, звук, интерактивность, платформа и прочее. Важно отметить, что на подготовительном этапе определяется предварительный бюджет разработки. К сожалению, без детальной проработки и прототипирования точный бюджет установить затруднительно.

После нахождения точек соприкосновения, подписывается договор и вносится предоплата.

Этап, на котором закладывается фундамент HTML-презентации и готовится смета разработки. Работа начинается с формирования команды, состоящей, как правило из менеджера проекта, контент-менеджера, редактора, арт-директора, front- и back-end программистов, UI/UX-дизайнера, дизайнера презентаций. Ребята анализируют и прорабатывают сценарий на основе анализа исходных материалов и предварительного задания, а также готовят набор прототипов страниц, каждый из которых в схематичной форме обозначает где расположены элементы управления, блоки, контент, иллюстрации и прочее. Прототипы презентуются клиенту и корректируются при необходимости. Они становятся частью технического задания, где прописываются вопросы анимации, функционал слайдов, работа интерактивных модулей и пр. Утверждается техническое задание, бюджет и подписывается промежуточный акт.

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

Концепция ложится в основу дизайна сцен HTML-презентации. Дизайнеры под руководством арт-директора занимаются подготовкой статичной инфографики — схемами, таблицами, иллюстрированием информации. На этом этапе массивы текста превращаются в концентрированный, удобный для быстрого восприятия контент. UI/UX-дизайнеры готовят сцены, размещают информацию по сетке, добавляют фото- и материалы и рисованные картинки. Команда постоянно знакомит клиента с результатами работы, которые дорабатываются при необходимости. Готовые статичные слайды презентуются клиенту, дорабатывается и утверждается.

HTML-верстка подразумевает перенос статичных слайдов в формат, пригодный для просмотра через интернет на стационарных и мобильных устройствах. Вся графика нарезается особым образом и компонуется с текстом. Front-end программист создает так называемую адаптивную верстку, которая автоматически подстраивается под размер дисплея зрителя. Он же добивается того, чтобы HTML-презентация обладала необходимой кроссбраузерностью, то есть выглядела одинаково хорошо на любом девайсе. На этом же этапе создается анимация, добавляется звук. Сверстанные слайды презентуются клиенту, дорабатывается и утверждается.

Back-end программист собирает отдельные слайды в готовую презентацию. На этом этапе программист реализуют CMS — систему управления презентацией (так называемый «движок»). CMS отвечает за управление HTML-презентацией: взаимодействие шаблонов, физическую структуру, наполнение, ввод-вывод данных, функционирование модулей (поиск, статистика, формы обратной связи и т.д.), прав доступа и взаимодействие с посетителями и администраторами, ведение статистики и пр. Как правило CMS подразделяется на две части: внешнюю (набор HTML-страниц, динамически формируемых при запросе из браузера) и внутреннюю — систему администрирования. Обе используют общее хранилище данных (базу данных (БД)), где хранится контент (тексты, картинки, видео) и информация, описывающая его (шаблоны страниц, CSS, структура, права доступа и пр.). При вызове страницы скрипт, который отвечает за вывод страниц, в зависимости от полученных параметров, выбирает из БД необходимую информацию (какое содержимое показать, какие ссылки поставить, как это все расположить) и собирает из фрагментов HTML-документ, который и видит на своем устройстве посетитель в виде сайта. Неотъемлемой частью «движка» является визуальная система администрирования, которая позволяет авторизованным посетителям менять фактически любую информацию в презентации. Система простая, напоминает Word и не требует специальных компетенций. Собранная презентация презентуется клиенту, дорабатывается и утверждается.

Активное использование соцсетей позволяют наладить обратную связь с аудиторией, построить эффективную коммуникацию и, как следствие, сформировать столь ценное сегодня комьюнити. Интеграции с социальными медиа частично создает технологическую платформу для SSM. Позволяет отслеживать эффективность рекламных и пиар-акций и т.д.

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

На заключительном этапе разработки HTML-презентации решается вопрос размещения ее в сети. Покупается хостинг и осуществляется перенос на постоянную площадку. Исходные файлы подготавливаются и передаются клиенту. Клиент подписывает акт и оплачивает остаток по договору.