Разработка веб чата для сайта знакомств
Техническоезадание
Разработка дизайн макета
Требования к верстке: Адаптивная верстка (Responsible Templates).
Интерактивный прототип находится по адресу:
http://domlapki.esy.es/Camzone69/home.html
Примечание:
Пользователь - это веб-модель которая общается с юзерами, за счет онлайн чата и видео трансляции.
Юзер - это человек с которым ведет общение пользователь(Веб-модель).
Юзеры делятся на такие типы:
В главном чате:
- Гость. Незарегистрированные пользователи
- Users. Это зарегистрированные пользователи
Вприват чате
-Best. Это избранные друзья
-Online. Это друзья которые находяться в онлайне.
Статус пользователя - это отображаемое сообщение всем пользователем.Которое как указано в дизайн макете, он закреплен в верхней части главного
чата.
Описание проекта
Данная страница является рабочим пространством пользователя (Модели). На этой странице она может видеть, общатся и
выполнять дополнительные действия по отношению к юзерам. Пользователь также
ведет видеотрансляцию, которая транслируется на страницу юзера и
демонстрируется на странице пользователя.
Общение ведется в трех чатах, условно они разделены таким образом:
- Главный чат (Topic)
- Приват чат (Private chat)
- Быстрый чат (Quick chat)
На этой странице также отображается “Заработок пользователя”. Он отображен в
двух видах, один просто цифрами во вкладке “CREDITS”, другой в графике во
вкладке “CHARTS”. Пользователь также имеет окно настроек, которое определяет взаимодействие юзеров с пользователем.
Рабочее пространство разделено на четыре основных блока и два вторичных:
Основные:
- Первый блок “Видео и Статистика”
- Второй блок “Главный чат”
- Третий блок “Приват чат”
- Четвертый блок “Быстрый чат”
Вторичные:
- Кнопка разворачивает/сворачивает “Третий блок”
- Кнопка “Быстрого чата”
Первый блок:
Данный блок визуально разделен на два суб-блока.
Видео демонстрация. Отображает видео снимаемое камерой пользователя.
В данной суб-блоке имеется следующие кнопки:
- Первая иконка “Фото аппарат”, при нажатии делает скрин видео трансляции. Также при повторном нажатии скрин удаляется.
- Вторая иконка “Твиттер”, при нажатии отправляет данный скрин в ленту новостей твиттера
- Третья иконка “Инстаграм”, повторяем функцию “Твиттер”
- Переключатель, при нажатии происходит функция выхода в сеть. При повторном нажатии выход в сеть прекращается.
Иконка шестеренки, при нажатии выдвигает панель настроек
Внизу данного блоке есть мягкий черный градиент который возможно трудно заметить в дизайн-макете. Данный градиент подчеркивает видимость иконок в нижней части блока.
Статистика пользователя
В данном суб-блоке отображается статистика пользователя“Заработок”
Данный блок имеет две вкладки: CREDITS, CHART.
Во вкладке CREDITS отображается статистика заработка в трех категориях и суммарное количество именуемое как “Total credits”.
Во вкладке CHART отображается график заработка во временной шкале.
Если условно то вектор Y отображает количество денег, вектор X отображает
время.
При наведении указателя мыши на пункт в графике, отображается письменная
статистика, как во вкладке CREDITS.
Когда указатель мышки находится на блоке графика, то пользователь за счет колёсика мыши, должен
иметь возможность увеличить или уменьшить шкалу графика.
Также в верхнем правом углу блока с графиком есть выпадающий список.
Благодаря которому пользователь имеет возможность отобразить статистику
заработка за день, за неделю и за текущий месяц.
Настройки
При нажатии на иконку “Шестеренка” с правого бока выдвигается панель настроек.
Данная панель дает возможность пользователю настроить взаимодействие с юзерами,
а также выбрать цвет и шрифт, только своих сообщений.
Второй блок “Главный чат”:
Данный блок отвечает за коммуникацию всех юзеров с пользователем.
Вверху есть четыре элемента:
- Название “Topic”
- Иконка “+”. Отвечает за добавление статуса пользователя.
- 98 Guests - это отображаемое количество гостей на странице пользователя (Читать примечание)
- 112 Users - это отображаемое количество зарегистрированных юзеров которые находятся на странице пользователя.
Ниже отображено поле “Статус пользователя”. Пользователь должен иметь возможность редактировать, удалять и добавлять данный статус.
Справа колонка отображает список зарегистрированных пользователей. Где отображается в статичном состоянии аватар и логин юзера
Данный список выдвигается когда на него наводишь мышью.
Здесь отображается карточки юзеров. В карточке юзера есть:
- Логин
- Аватар
- Количество кредитов
- Кнопка “Камеры”. отображается видео трансляцию юзера. Если она не активна (Что отображается серым цветов), то это значит что пользователь
не включил свою камеру.
При нажатии на нею открывается попап окно, с видеотрансляцией юзера.
- Кнопка “Письмо”. при нажатии открывается чат в “Приватчате” и дальше пользователь ведет личное общение с выбранным юзером в приватном
чате.
- иконка “Троеточие”. при нажатии открывается контекстное меню где есть следующие элементы управления:
- Кнопка“Добавить в друзья”. Если пользователь уже в “Друзьях”, тогда появляется кнопка
“Удалить из друзей”
- Кнопка“Добавить в Бан”. Если пользователь уже ”Добавлен в Бан”, тогда Появляется
кнопка “Вывести из Бана (UNBAN)”
-Кнопка “Игнор”. При нажатии включается функция, после активации которой,
сообщения данного юзера не отображаются в главном и приватном чате для всех юзеров в том числе. Если кнопка уже активна, то у пользователя должна быть возможность деактивировать её.
Данный список должен скролится при большом объемепользователей. Скрол сделать кастомным как указано в дизайн-макете.
Поле сообщений:
Сделать все как на макете. Обратите внимание как должны быть отображены логин отправителя и время.
Поле ввода сообщений:
Здесь отображено само поле ввода сообщения, выбор цвета отправляемого сообщения, смайлы и кнопка
отправить.
Третий блок “Приват чат”:
Данный блок отвечает за личные сообщения.
Данный блок очень схож по смыслу с “Главным чатом”. Отличие в том что, данный чат не имеет “Статуса пользователя”.
В верхней части имеется название “Friends” и две кнопки благодаря которым можно
выбрать тот или иной список (Best and Online).
Ниже отображаются активные переписки. На них отображается выбранный чат и количество непрочитанных сообщений от не выбранных пользователей.
Желтая полоска под надписями “Best and online” это hover.
Список повторяет тот же функционал как и в “Главном чате”.
Кнопка разворачивает/сворачивает “Третий блок”
Данная кнопка сворачивает и разворачивает “Приват чат”.
В неактивном состоянии она дублирует значение “Best and Online”
В активном состоянии отображается только иконка стрелки вверх. что говорит о том что данное окно можно развернуть. Не в активном состоянии, противоположно.
Четвертый блок “Быстрый чат”
Это POPUP окно
Данный чат повторяет функцию приват чата. Но данный чат более гибкий и имеет возможность
открываться на всех страницах сервиса. А также перемещаться по всему экрану пользователя. Окно Быстрого чата должно ресайзится (Изменять размер) как угодно пользователю.
Кнопка “Быстрого чата”
Данная кнопка при нажатии открывает и закрывает окно “Быстрого чата”
Также быстрый чат можно закрыть нажатием на иконку “Крестик”
При первом открытии быстро чата, в его окне,открывается список юзеров с которыми ведет общение пользователь в “Приват чате”. Также в этом списке отображается непрочитанные сообщения.
Окно быстрого чата
В данном окне пользовательведет переписку с выбранным юзером.
В верхней части экрана отображен логин юзера, стрелка вернутся назад, иконка “Перейти в приват” и закрытие окна.