русская студия сокол
&
Quantum@Media
Предварительное техническое задание на разработку сайта РосДорБанк
Содержание
Введение

Глоссарий

Глава 1. Описание проекта и браузерной части

  • Общая информация
  • Назначения сайта
  • Список страниц сайта
  • Дизайн концепция
  • Примеры и ориентиры
  • Графическая оболочка внутренних страниц
  • Дизайн макет

Глава 2. Функциональная часть проекта

  • Платформа разработки
  • Обеспечение безопасности
  • Аналитический модуль
  • Применяемые технологии
  • Административная панель сайта
  • Личные кабинеты
  • SEO-оптимизация сайта
Введение
Данный документ является первичным техническим заданием на разработку сайта "РосДорБанк". Документ составлен на русском языке и является объектом интеллектуальной собственности. Документ состоит из 2 глав текста и графических материалов.
Словарь терминов
Сайт - Информационная система, предоставляющая пользователям сети Интернет доступ к своему содержимому и функционалу в виде упорядоченного набора взаимосвязанных HTML-страниц

World wide web (WWW, web, веб) Единое информационное пространство на базе сети Internet, состоящее из совокупности сайтов. Приставка "веб-" может использоваться для обозначения объектов, ориентированных на использование в WWW или использующих типичные для WWW технологии (например, веб-интерфейс - интерфейс на базе веб-страниц)

HTML-страница (веб-страница, страница) Основной носитель информации в World ide Web. Особым образом сформатированный файл (набор файлов), просматриваемый с помощью www-браузера как единое целое (без перехода по гиперссылкам)

HTML-теги (теги) Управляющие коды, посредством которых осуществляется форматирование

HTML-страницы Гиперссылка (ссылка, линк) Активный элемент HTML-страницы, задаваемый специальным тегом. Выделенный фрагмент текста или изображения, позволяющий загрузить другую страницу или выполнить определенное действие

WWW-браузер (браузер) Клиентская программа, поставляемая третьими сторонами и позволяющая просматривать содержимое HTML-страниц

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

Поле (поле БД, поле формы) Структурный элемент, содержащий однотипную информацию, например, текст, дату, числовые значения и т.п.

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

Справочник Вспомогательная структура данных, содержащая список допустимых значений для какого-либо поля основных форм или БД. Справочники подразделяются на фиксированные (неизменяемые и поставляемые Исполнителем вместе с готовым сайтом) и редактируемые (состав которых может изменяться администратором)

Администратор (менеджер, редактор) сайта Лицо, осуществляющее от имени Заказчика информационную поддержку сайта

Дизайн-шаблон страниц Файл, содержащий элементы внешнего оформления HTML страниц сайта, а также набор специальных тегов, используемых системой публикации сайта для вывода информации при создании окончательных HTML страниц Дизайн веб-сайта Уникальные для конкретного веб-сайта структура, графическое оформление и способы представления информации

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

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

Элемент наполнения (контента) Отдельная запись в базе данных, внешнее представление которой зависит от управляющего ей программного модуля (например, в модуле «новостная лента» элементом наполнения является отдельная новость)

Система динамического управления наполнением (контентом) сайта Информационная система, позволяющая авторизованным пользователям производить изменения иерархической структуры и информационного наполнения веб-сайта без использования каких либо дополнительных специальных программных средств

Дамп Совокупность объектов базы данных, представленная в виде файлов, позволяющая восстановить точную копию структуры исходной базы данных в аналогичной системе управления базами данных

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

Шаблона раздела Особым образом размеченный ASCII-файл, определяющий как графическое оформление страниц раздела, так и их макет (раскладку) – взаимное расположение блоков с наполнением раздела

WYSIWYG редактор Редактор языка HTML, имеющий возможности по работе в текстовом режиме и в режиме WYSIWYG (What You See Is What You Get). В режиме WYSIWYG элементы HTML страницы при редактировании представляются в том же виде, что и при просмотре

Роль Класс пользователей системы, обладающих определенным набором прав доступа
Глава 1. Описание проекта и браузерной части

Общая информация
Название сайта: https://www.rdb.ru/
Логотип: есть
Тип сайта: коммерческий портал
Адаптивная версия: да
Языковые версии сайта: русский/английский
Система управления сайтом: самописная админпанель

Описание платформы:

Сайт разрабатывается с использованием фреймоворков Laravel
Данная технология обеспечивает функционал следующих элементов сайта:

  • Информационная часть сайта
  • Функциональная часть сайта
  • Имиджевая часть сайт

Общее:

  • Кроссбраузерность — сайт должен одинаково отображаться во всех последних версиях всех браузеров, на момент разработки сайта;
  • Стандартная ширина рабочей области согласно шаблону;
  • Полоса прокрутки используется при наличии информации больше чем ширина экрана пользователя (зависит от диагонали/разрешения дисплея);
  • Сайт должен показывать не менее 70% скорости работы по гугл девелоперс;

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

Назначение сайта:
- предоставление информации об услугах компании "РосДорБанк";
- управление взаимоотношениями с компанией "РосДорБанк" посредством личных кабинетов;
- анонсирование мероприятий и новых продуктов компании;
- осуществление обратной связи с клиентами.

Цель создания сайта:
Ознакомление с услугами компании «РосДорБанк», расширение ареала потребительской аудитории, систематизированное размещение данных о программах и продуктах банка, налаживание диалога и взаимодействия с потребителями. Конечной целью сайта является повышения числа корпоративных клиентов банка
Список страниц сайта
Главная страница
Страница "О нас"
Страница "Контакты"
Страница "Корпоративным клиентам"
Страница "Частным лицам"
Страница "Партнерам"
Страница "Специальные программы"
Страница "Новости"
Страница с телом новости
Информационная страница подраздела
Личный кабинет физического лица
Личный кабинет юридического лица
Личный кабинет администратора сайта
Дизайн концепция
В ходе работы над данным документом были проанализированы сайты таких банков как:

  • Альфа-банк
  • Точка банк
  • Открытие
  • Сбербанк
  • Тинькофф банк.

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

Предлагаем в работе над сайтом использовать общие тенденции рынка и создать современный, эстетически привлекательный и удобный в пользовании дизайн. Концентрация вокруг CTA-объектов позволит увеличить конверсию сайта и превратить его не только в имиджевый продукт, но и в полноценный канал продаж
Примеры и ориентиры
Графическая оболочка внутренних страниц
(общая для всех подразделов)
Графическая оболочка внутренних страниц должна делиться на следующие разделы:

- графическая шапка
- навигационное меню сайта (навигационная панель 2 обеспечивает переход к основным пунктам меню сайта);
- поле поиска – предназначено для выполнения полнотекстового поиска по сайту;
- поле выбора языка – русский\английский;
- ссылка «На главную»;
- навигационная панель по подразделам выбранного раздела сайта;
- поле для отображения контента выбранной страницы сайта;
- внизу страницы - краткая контактная информация - телефон и e-mail компании;
- кнопка «Задать вопрос» - обеспечивает переход к форме «Задать вопрос».
Дизайн макет
Глава 2. Функциональная часть проекта

Платформа разработки
Наиболее предпочтительным решением для данного проекта является использование фреймворка Laravel. Ниже приведён список основных преимуществ.

1. Высокая безопасность

Основными проблемами в безопасности являются 2 уязвимости: SQL-иньекции и кросссайтовый скриптинг.

Первая угроза связана с передачей строки деструктивного SQL через параметры HTTP запроса. Если система не проверяет все параметры, приходящие от пользователя, то этот запрос может быть выполнен. Laravel не допускает таких атак т.к. использует ORM которая, по умолчанию, исключает возможность "сырых" SQL-запросов, а все параметры при построении SQL запроса нормализируются. Из них удаляется все, что может навредить данным.

Вторая угроза связана с внедрением вредоносного кода JavaScript на произвольную страницу сайта. Если это происходит, то злоумышленник может легко получить все данные из куки пользователя и следовательно их подделать. Таким образом он получает все привилегии того бедняги, на чьей странице произошло выполнение этого javascript-а о чем он может и не подозревать вовсе. Подобная уязвимость решается путем экранирования запрещенных html-тегов (в частности тега script) и вывод экранированной строки как обычного текста без возможности его выполнения.

2.Повышенная производительность. Кеширование

Еще одна веская причина почему выбрали Laravel – отличная производительность веб-приложения. Это достигается за счет множества инструментов, которые повышают скорость генерации веб-страниц.

3.Аутентификация

Laravel предоставляет довольно продвинутую систему аутентификации пользователей как через формы так и через социальные сети, используя механизмы OAuth.

4.Юнит-тесты

В Laravel встроены PHPUnit-тесты из коробки. Для каждого приложения создаются настройки в phpunit.xml файле. Кроме модульных, есть еще функциональные тесты, где система проверяется со стороны пользователя, эмулируя все его действия, такие как заполнение и отправка форм, переход по ссылкам и пр. Данные тесты проводятся с участием браузера.

Это основные моменты, почему мы выбрали именно Laravel для вашего проекта
Несомненно плюсов гораздо больше
Обеспечение безопасности
Для входа в личный кабинет физ или юридического лица необходимо предусмотреть смс аутентификацию.

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

Для любых операций внутри личных кабинетов, предусмотреть обязательную смс аутентификацию и уведомления по совершенным действиям.Обязательным условием является наличие на сайте SSH сертификата, для безопасного подключения и шифровки данных. И правильная его настройка для предотвращения атак на сайт банка.

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

Для большей безопасности, предлагаем не использовать коробочные решения для написания сайта, т.к. это бьет по безопасности. Безусловно использование фреймворков увеличивает стоимость и срок разработки проекта, но при этом гарантирует безопасность работы. Если это будет критичным для принятия решения, то наша рекомендация из коробочных решений использовать исключительно Битрикс. И не использовать какие либо другие некоммерческие системы управления контентом.

Для полноты данных приводим статистику 2019 года по системам управления контентом для банков России.
Аналитический модуль
Стандартные метрики

На сайт устанавливаются стандартные метрики для отслеживания количества посещений, продолжительности просмотра страниц, и прочих данных сбор которых предусмотрен сервисами Яндекс.Метрика и Google Analitics

Технические метрики

Будут установлены средства мониторинга работы сервера, для оперативного оповещения разработчиков о проблеме.Скорее всего будут использоваться сервисы такие как Monit или Nagios для отслеживания корректности работы сервера, баз данных, объема загруженности жесткого диска.

Внутренние метрики

Дополнительными модулями встраивается аналитика работы сервиса как продукта. Некоторые опции могут дублироваться с настройкой метрик от Яндекса и Google
Технологии
Перечень технологий, которые необходимо установить на сервер

  • Apache
  • Laravel
  • Php
  • MySQL
  • Munin (или альтернатива)
  • Monit (или альтернатива)
Административная панель сайта
Панель управления сайтом должна иметь стандартизированный интерфейс, отвечающий следующим требованиям:

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

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

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

Добавление текста в контентные блоки разделов (страниц) должно осуществляться с использованием визуального редактора с поддержкой режима вода HTML-тегов. При копировании и вставке информации из текстовых редакторов (например, Microsoft Word) с помощью буфера обмена должна быть предусмотрена автоматическая чистка HTML-кода (удаление определений шрифтов, стилей, отступов, множественных пробелов).
Личные кабинеты пользователей
Общее

Регистрация/авторизация

Пользователь регистрируется на сайте при помощи e-mail и sms авторизации.
В качестве логина при авторизации может использоваться email или созданный лог

Макет 1.
Зарегистрируйтесь
Введите свои данные и мы отправим коды подтверждения для активации в следующем окне
Данные защищены
Обработка ошибок

Если указана неверная пара email -пароль, выводится сообщение:

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

Восстановление пароля

При нажатии на ссылку «Забыли пароль?» в новой вкладке браузера открывается страница с формой восстановления пароля, которая содержит:

  • заголовок «Восстановление пароля»
  • служебный текст: «Пожалуйста, укажите логин или email, который Вы использовали для входа в личный кабинет. Вам будет отправлено сообщение со ссылкой для создания нового пароля.»;
  • капча, для защиты от роботов
  • кнопка «Выслать контрольную строку / Восстановить пароль».

При нажатии на кнопку «Отправить» происходит проверка существования в системе указанного email-адреса/логина:

  • если такого email-адреса/логина не существует в системе, выводится сообщение:

"Логин или EMail не найдены."

  • если проверка пройдена успешно, то на указанный email отправляется сообщение с темой: «Восстановление доступа к личному кабинету РосДорБанк».
Тело email:

«Здравствуйте!

От Вашего имени был отправлен запрос на восстановление доступа к личному кабинету сайта РосДорБанк

Перейдите по ссылке ниже для создания нового пароля:

<link>

Если Вы не отправляли запрос, то проигнорируйте данное письмо.
Пожалуйста, не отвечайте на это сообщение, так как оно сгенерировано автоматически.

С уважением, РосДорБанк»



На странице сайта при этом выводится сообщение:

"Ссылка для восстановления доступа была отправлена на указанный E-Mail.

Пожалуйста, дождитесь письма, так как ссылка изменяется при каждом запросе"

_

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

Основной функционал личных кабинетов включает в себя понятие Интернет-Банкинг

Он подразумевает:

1) выписки по счетам;

2) предоставление информации по банковским продуктам (депозиты, кредиты, ПИФ и т. д.);

3) заявки на открытие депозитов, получение кредитов, банковских карт и т. ;д.;

4) внутренние переводы на счета банка;

5) переводы на счета в других банках;

6) конвертацию средств;

7) оплату услуг.

8) осуществление переводов по своим и другим счетам

9)Авторизация/регистрация/ смена пароля


Кабинет юридического лица.

Основной функционал личных кабинетов включает в себя понятие Интернет-Банкинг

Он подразумевает:

1) выписки по счетам;

2) предоставление информации по банковским продуктам (депозиты, кредиты, ПИФ и т. д.);

3) заявки на открытие депозитов, получение кредитов, банковских карт и т. ;д.;

4) внутренние переводы на счета банка;

5) переводы на счета в других банках;

6) конвертацию средств;

7) оплату услуг.

8) осуществление переводов по своим и другим счетам

9) Выставление счетов и оплата по счетам

10) Авторизация/регистрация/ смена пароля

Кабинет администратора

1) Авторизация/регистрация/ смена пароля

2) Публикация и редактирование новостей/акций

3) Редактирование текста и картинок на страницах

Администратор не имеет доступа к пользовательским данным и каким либо операциям произведенными пользователями
SEO-оптимизация
Заголовки тайтлы и ключевые слова

  • Заголовок статичной страницы должен проставляться из «title» при создании страницы.
  • Заголовок раздела инфоблока должен проставляться по принципу:
  • Если во вкладке SEO (элемента или раздела) не заполнены поля title, keywords – то они остаются пустые на странице.
  • Если во вкладке SEO (элемента или раздела) не заполнено поле заголовок, то
URL


Все URL должны быть статическими, дружественными для пользователя и
автоматически формироваться из адреса создаваемой страницей путем
транслитерирования из название раздела или элемента.Параметры фильтрации передаваемые через URL должны состоять принимать вид ЧПУ.

Страница 404

Необходимо чтобы сайт возвращал 404ю ошибку при неправильном или
отсутствующем url. (в т.ч. во всех инфоблоках и каталогах).

Карта сайта

Карта сайта будет генерироваться стандартными методами Laravel. А также будет
составлена html карта сайта для пользователей.

Заголовки h1-h6

Теги заголовков должны быть использованы для корректного разграничения уровня
важности заголовков и подзаголовков на странице (H1 — H6).

Настройка правила Robots.txt

Обеспечить правильную настройку robots.txt, указав в параметрах приоритетные
директивы и то, что будет запрещено для скачивания роботам таким образом,
чтобы в поиске преимущественно находились «продуктовые» страницы Сайта.

Запретить индексацию на сайте:

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

Команда разработчиков
Quantum@Media
Специализация: Разработка сайтов и комплексное ведение IT компаний и партнёров.


Русская Студия Сокол
Специализация: сложная web и it разработка

Какие этапы мы пройдем?
1
Доработка технического задания
На основании обратной связи полученной от представителей банка мы доработаем техническое задание. Это необходимо для общего понимания всех нюансов проекта
2
Создание структуры сайта
Для того чтобы сайт был не просто красивой картинкой, а каналом продаж необходимо проработать коммерческую составляющую. Это означает, что нам потребуется разработать все возможные пути пользователя сайта и сделать упор на наиболее выгодных для банка. На выходе мы получим mind-map карту со всеми возможными сценариями.
3
Построение архитектуры кода
Для получения максимальной производительности сайта мы разрабатываем архитектуру кода. Выработанные технические решения позволят наилучшим обьразом оптимизировать работу сайта и в дальнейшем помогут масштабировать код под разработку мобильного приложения
4
Дизайн проекта
Одной из главных задач данного проекта является создание современного и удобного дизайна. Сначала мы сделаем макеты отвечающий требованиям UI/UX. Затем перейдем к полноценному дизайну сайта и будем прорабатывать каждый элемент для достижения оптимального соотношения простоты, эстетики, и удобства пользования
5
Серверная настройка
Параллельно с запуском работ по дизайну мы запускаем развертывание технологий на сервере и общую разработку внутренней части проекта
6
Верстка сайта
Отрисованный интерфейс и другие страницы сайта по мере готовности передаются на верстку в html
7
Связка и тестирование
После того, как будут готовы все визуальные элементы, написаны скрипты обработки на сервере, и готова верстка проекта, мы занимаемся связкой всех элементов проекта и проводим тестирование
8
SEO-оптимизация
Финальным этапом мы заполняем контент сайта и проводим работы по базовой оптимизации для дальнейшего продвижения в поисковых системах
Made on
Tilda