Overview

HTTPS SSH

Счастье

Общие положения

Для разработки бэкенда сайта будет использоваться CMF MODX Revolution последней стабильной (на момент сдачи работ) версии.

Сайт будет размещен на выделенном сервере, базирующемся на территории России (из-за особенностей законодательства) и доступен только по протоколу https для повышения лояльности пользователей.

Разработка будет вестись с использованием системы контроля версий GitHub и InVision — это обеспечит дополнительный контроль и повысит скорость разработки в команде (мы работаем удалённо, чтобы не включать в стоимость аренду офиса или коворкинга).

В процессе вёрстки будет создан интерактивный стайлгайд (руководство по стилю, онлайн брендбук).

Мы работаем по принципу «ФФФ»: fix time, fix budget, flex scope (т. е. с фиксированными сроками и бюджетом, а функциональность оставляем гибкой).

«Точка невозврата»

Своеобразным Рубиконом нашего проекта станет начало работы над модулями вёрстки, т. е. приблизительно спустя месяц после предполагаемого начала работ. После этого этапа все изменения проекта рассматриваются только с точки зрения flex scope, меняя функциональность.

Технологии

  • БЭМ — разработанная в Яндекс методология и набор инструментов для создания масштабируемых проектов в первую очередь в области вёрстки;
  • SC5 Styleguide;
  • Gitify
  • Puppet
  • PostCSS, Autoprefixer

Коммуникация

По обоюдному согласию для коллаборации будет использоваться Basecamp. Если по каким-то причинам его будет недостаточно, предлагаем Slack:

Slack

Мы общаемся в Slack-чате, программе, используемой в NASA, The Times of London, Quartz, Spotify и другими крутыми ребятами. Это гораздо удобнее, чем почта — с возможностью поиска по истории сообщений, файлам, интеграцией других сервисов и прочего — вы всегда будете в курсе происходящего, а мы сможем задать вам вопрос, если что-то будет непонятно. Просто расслабьтесь и позвольте нам создать для вас аккаунты. С вас — список участников, которых вы бы хотели включить в проект (некоторые люди, например, менеджеры, которые будут наполнять сайт и отслеживать статусы заказа — обязательно).

[Добавить сотрудников]

Вёрстка

Пункты, соблюдение которых я буду контролировать лично:

  • соответствие макету;
  • кроссбраузерность, кодировка и DOCTYPE;
  • валидность (включая CSSLint и JSHint), доступность, микроформаты;
  • независимость блоков в CSS: минимизация каскада, использование техник БЭМ;
  • сайт должен нормально смотреться во всех стандартных разрешениях от 1024 и выше, не иметь горизонтального скролла и вписываться в экран мобильных устройств;
  • семантичность. Отсутствие глупостей в html и css, единообразие, аккуратность;
  • HTML5 формы, линковка, валидация;
  • правильная структура заголовков (H1—H6 и TITLE);
  • CSS должен быть написан с использованием процессоров, за вендорный префиксы отвечает Autoprefixer;
  • использование автоматизации сборки: Enb и Gulp;

Остальные моменты имеют более частный характер. Они увеличивают время разработки, но это оправдано:

  • корректная работа при вбивании реального текста, надёжность вёрстки, проверка на «одиннадцатиклассницу»;
  • наличие Win/Mac/Linux-аналогов шрифтов (если дизайнер решит использовать нестандартные лигатуры);
  • доступность при выключенных (загружающихся) картинках;
  • работоспособность при выключенном (незагруженном) JavaScript;
  • отсутствие багов при увеличенном шрифте;

Руководство по стилям

Пару слов о том, почему важно наличие стайлгайда…

Панель управления

Панель управления
Пример панели управления MODX из реального проекта

Почему желательно ограничение группы лиц, имеющих доступ к панели управления?

Во-первых, из соображений безопасности. MODX позволяет достаточно гибко настроить список «это можно, то — нельзя» для целых групп или отдельных пользователей, но это не панацея: движок сайта (в данном случае — MODX) уже является объектом конфиденциальной информации компании, т. к. злоумышленник, обладая этими данными, уже значительно упрощает себе задачу по анализу путей внедрения.

На сколько это опасно?

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

Система Количество уязвимостей Примечание
Magento 8
Joomla 1132 Абсолютный победитель по «дырявости» на все времена…
WordPress 784 Причина большинства уязвимостей — сторонние модули разработчиков-лентяев
Drupal 26
MODX 14 Последняя датируется ноябрём прошлого года и классифицируется как потенциальная.

Что же делать?

Достаточно вовремя проводить обновления MODX и сервера. Это защитит от основных проблем кроме человеческого фактора.

Помимо этого я всегда использую дополнительные методы защиты:

  • изменение путей к элементам системы: панели управления, коннекторам и ядру, переименовывание конфигурационного ключа;
  • вынесение ядра системы за пределы доступа web-пользователя. Попросту говоря, ключевые файлы MODX физически недоступны даже при наличии доступа, например, через родную панель управления.

Примечание
при желании вы можете даже полностью удалить каталог с файлами панели управления — это никак не скажется на работоспособности самого сайта.

А что ещё может угрожать нашему сайту?

DDoS-атаки, например, — попытка выведения сервера из строя путём массированного обращения к ресурсам сайта. От DDoS защищают специализированные сервисы.

Авторизация

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

СМС-код

Вопрос: Отправка проверочного кода реализована у ePochta. Вы используете другой сервис? Какой?

Социальные сети (удалить?)

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

Интернет-магазин

Самый сложный функционал сайта. Логически подразделяется на категории с товарами, заказы, способы доставки/пункты самовывоза и варианты оплаты.

Категория

Товар

Характеристики товара
  • краткое название;
  • полное название;
  • артикул в базе 1С;
  • фотографии;
  • вес;
  • количество порций;
  • состав;
  • время исполнения заказа (срок производства);
  • предел начала выполнения заказа;
  • предел окончания выполнения заказа;
  • срок хранения;
  • цена.
Характеристики упаковки
  • краткое название;
  • полное название;
  • цвет;
  • вид ленты;
  • фотографии;
  • цена.
Характеристики открытки
  • название;
  • фотографии;
  • цена.
Фотогалерея

Фотографии товара в формате JPEG. Для автоматизации адаптации изображений под разные разрешения требуется загружать изображения в максимальном качестве (не менее 720 пикс. по ширине) — скрипт сам масштабирует их размер и качество до нужных соотношений.


Во избежание появления дубликатов, при загрузке все фотографии проверяются на соответствие, повторные — удаляются.


Учёт остатков

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

Настройка связей товаров

Связи необходимы для ассоциации одних товаров с другими. Например, для реализации блока «С этим товаром также покупают…». Подобный функционал настраивается вручную.

Связи:

  • с этим товаром покупают;
  • упаковка для товара;
  • открытка для товара (если конкретная открытка ассоциируются с конкрентным товаром).

Синхронизация с 1С

Обмен данными однонаправленный и по трём типам данных: 1С -> каталог товаров, заказы -> 1С и пользователи, оформившие заказ -> контрагенты 1С

Выгрузка каталога товаров осуществляется через генерацию со стороны 1С XML-файла, который выгружается на FTP-сервер и далее распарсивается скриптом в модель для выгрузки на сайт. Содержит структуру каталогов и список товаров с характеристиками.

Заказы и контрагенты экспортируются … как?

Корзина

Скидки, купоны

Расчёт стоимости доставки

Интеграция платёжного шлюза RoboKassa

«Комплекты»

Сервер

Предварительное окружение для сервера:

  • Ubuntu Server 14.04.3 LTS в качестве дистрибутива;
  • Nginx в качестве проксирующего HTTP-сервера;
  • Php-fpm вместо Apache в роли менеджера процессов FastCGI.

Для эффективного тестирования прототипов на нескольких устройствах (смартфоны, планшеты, стандартные и широкоформатные мониторы) мы используем технологию BrowserSync, синхронизирующую поведение пользователя на всех исследуемых экранах.

За развёртку виртуального рабочего окружения отвечает Puppet, консистентность данных в панели управления — Gitify. С их же помощью осуществляется создание бэкапов через систему контроля версий.

Помимо стандартных инструментов логирования доступа и ошибок сервера nginx, панель управления может отображать свой лог-файл:

Журнал действий менеджеров
Журнал действий менеджеров
Журнал ошибок
Журнал ошибок

База данных

Мы не используем MySQL. То есть не то чтобы вообще, просто заменили эту систему на более производительную MariaDB 10.1. Она полностью совместима с оригинальной MySQL, но имеет ряд преимуществ, в которых мы убедились на реальных тестах.

Оптимизация

Вопрос оптимизации выходит за рамки оговариваемого бюджета, но их всё же стоит упомянуть, включая те, что включены в бюджет по умолчанию:

  • будет реализовано:
  • минификация и конкатенация (объединение в один файл) скриптов и стилей;
  • оптимизация изображений под retina-дисплеи;
  • gzip сжатие (при технической возможности сервера);
  • прогрессивное кэширование страниц средствами MODX;
  • правильный ответ на 404 ошибку;
  • CSS-спрайты;
  • разумный base64-encode для небольших изображений;
  • использование defer для сторонних скриптов;
  • можно реализовать:
  • использование React.JS — библиотеки создания реактивных интерфейсов от команды Facebook. Позволяет взаимодействовать с интерфейсом страницы без перезагрузки страницы с минимальной задержкой;
  • конвертация изображений в WebP-формат;
  • создание core-файла стилей;
  • настройка сервера для работы по HTTP2;
  • использование LazyLoad для картинок;
  • подгрузка невидимых при первой загрузке частей страницы через AJAX (например, содержимое табов);
  • кэширование шрифтов в localStorage, если дизайнер решит использовать специфические лигатуры;

Дополнительные ресурсы и расходы

  • InVision — сервис для коллаборации и обсуждения графических элементов проекта. Мы будем использовать бесплатную версию, она не накладывает никаких ограничений.
  • Система контроля версий GitHub. Может быть представлена одним из двух типов:
  • публичный, бесплатно. Исходный код будет общедоступен (повышает лояльность пользователей, но, в первую очередь, разработчиков);
  • приватный, $7 (около 440 рублей) в месяц. Доступ к репозиторию ограничен только доверенным списком лиц (требуется аккаунт на GitHub).
  • Выделенный сервер. Инфа не 100%, но вообще у нас по законодательству, если вы храните персональную информацию пользователей-граждан РФ, то эта информация должна храниться на территории нашей прекрасной страны. Увы, тут выбор не велик (из известных мне): Selectel (официальный хостинг-провайдер ВКонтакте) и Flops. Я советую второй вариант — я тестировал оба и не заметил разницы в скорости или качестве. У Flops цена незначительно ниже и они предоставляют бесплатный пробный период. Но у Selectel более развитый CDN-сервис (CDN — Content Delivery Network, система доставки контента, позволяющая ускорить загрузку статичных элементов на стороне пользователя: картинки, скрипты, стили). В принципе, ничего не мешает использовать CDN от Selectel и сервер от Flops.
  • SSL сертификат. Условно обязателен для обеспечения лояльности пользователей и шифрования конфиденциальной информации (фамилия, номер телефона, email). Оплачивается на год (потом требует продления). Существует несколько вариантов и по качеству, и, соответственно, по стоимости. Ценник варьируется от 600 руб. до 78000 руб..

Сдача проекта

Этот долгожданный и приятный во всех отношениях процесс происходит в несколько этапов:

  • предоставление полного доступа к панели управления;
  • обучение пользованию панелью управления ответственного лица со стороны заказчика;
  • недельное тестирование функционала, исправление недочётов;
  • передача ключей доступа к серверу, минифицированных исходников финального этапа проекта, актуального бэкапа «заводских настроек» (на всякий случай);
  • подписание акта сдачи-приёмки;
  • консультационное сопровождение в течение месяца по вопросам использования продукта;
  • обсуждение возможных планов доработки, составление дополнительных смет, приложений к договору;
  • PROFIT!!!

Авторство

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

В остальном все исходники и программное обеспечение передаётся в ваше бережное пользование. Мы с ними прощаемся на этапе подписания акта сдачи-приёмки, как описано выше, снимая с себя груз ответственности, и передаём в ваше вечное пользование.

Мы не ставим своих баннеров, «сделано в студии …» в «подвале» сайта, скрытых ссылок или прочих дикостей (так, по крайней мере, мы это воспринимаем). Единственное условие, которое мы просим соблюсти после исполнения всех обоюдных обязательств — это текстовый файл в корне вашего сайта: humans.txt с перечислением участников проекта как с нашей, так и с вашей стороны, и наших контактов. Приблизительно вот так:

                    888                        888                      
                    888                        888                      
                    888                        888                      
  .d8888b   .d8888b 88888b.   8888b.  .d8888b  888888 888  888  .d88b.  
  88K      d88P"    888 "88b     "88b 88K      888    888  888 d8P  Y8b 
  "Y8888b. 888      888  888 .d888888 "Y8888b. 888    888  888 88888888 
       X88 Y88b.    888  888 888  888      X88 Y88b.  Y88b 888 Y8b.     
   88888P'  "Y8888P 888  888 "Y888888  88888P'  "Y888  "Y88888  "Y8888  
                                                           888          
                                                      Y8b d88P          
                                                       "Y88P"           

---------------------- Welcome to our humans.txt ----------------------

/* TEAM */

Design: Sergey Bortsov
Site: behance.net/bortsov
Location: Saint Petersburg, Russia

Tech lead: Roman Ganin
Site: fb.com/realetive
Twitter: @realetive
Location: Saint Petersburg, Russia

MarkUp Junior: Yuliya Timoshenko
Site: vk.com/timosha
Location: Saint Petersburg, Russia

etc…

/* THANKS */
Thanks for watching ;)

/* SITE */
Last update: today…
Standards: HTML5, CSS3,..
Components: Twitter Bootstrap, Modernizr, jQuery, UI Kit, Font Awesome, Bootstrap Social, PhotoSwipe
Software: Sublime Text 3, NodeJS and npm, Yeoman, Gulp, BrowserSync, Bower, SVGOptimizer