Задание для квалификационного экзамена по ПМ.05 у студентов специальности 09.02.07 "Информационные системы и программирование"

Квалификационный экзамен
ПМ.05 «Проектирование и разработка информационных систем»

 

СОСТАВЛЕНО НА ОСНОВЕ

«КОНКУРСНОЕ ЗАДАНИЕ КОМПЕТЕНЦИИ «Веб-технологии»»
Модуль А. Разработка интерфейса пользователя

 

Задание

 

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

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

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

Также при верстке страниц вам следует учитывать существующие практики UI/UX, чтобы использование веб-ресурса было максимально удобным и продуктивным.

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

Использование любых фреймворков и библиотек (Bootstrap, Tailwind, например) запрещено. Вам запрещено пользоваться нейролингвистическими генераторами (например, ChatGPT, Google Bard, Bing Chat и т.п.)! За использование нейролингвистических генераторов будет присвоена оценка за квалификационный экзамен: «не сдан».

 

Описание проекта и задач

 

Ваша задача – сверстать следующие страницы веб-сайта:

1.                   Главная

2.                   Страница входа в личный кабинет

3.                   Страница регистрации в личном кабинете

4.                   Страница личного кабинета пользователя

5.                   Страница добавления информации о найденном животном

6.                   Страница личного кабинета модератора (управление объявлениями)

7.                   Страница поиска животных

8.                   Страница с карточкой найденного животного

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

 

Основные роли пользователей

 

Гость

1.            Регистрация

2.            Авторизация

3.            Добавление объявлений о найденном животном

4.            Поиск животного по базе существующих объявлений

 

Авторизованный пользователь

1.            Добавление объявления о найденном животном

2.            Поиск животного по базе существующих объявлений

3.            Просмотр своих объявлений

4.            Просмотр информации о себе с возможностью редактирования некоторых данных

5.            Выход из профиля

 

Модератор

1.            Подтверждения объявлений и их модерация

2.            Выход

 

ГЛАВНАЯ СТРАНИЦА - LANDING PAGE

 

Главная страница должна содержать следующие блоки:

1.         Шапка сайта.

1.1.         Логотип.

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

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

1.2.      Меню навигации.

1.2.1.      Поиск.

1.2.2.      Регистрация.

1.2.3.      Личный кабинет.

1.2.4.      Добавить.

1.2.5.      Отзывы.

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

2.1.         Изображение.

2.2.         Вид животного (например, кот, собака, суслик, хорек, вомбат и т.д.).

2.3.         Краткое описание обстоятельств, при которых животное было найдено.

2.4.         Кнопка «подробнее» для перехода на страницу с описанием найденного животного.

3.         Секция с быстрым поиском животного, например, по виду животного. Предусматривает наличие одного поля ввода и кнопки для поиска. В поле ввода должны выводится подсказки по поиску.

4.         Факты о компании и сайте

4.1.         Помогли найти более 500 животных.

4.2.         Более трех лет способствуем возвращению питомцев к хозяевам.

4.3.         Все услуги оказываются бесплатно.

Около каждого из пунктов заказчик просит разработать и разместить соответствующее графическое изображение.

5.         Карточки с найденными животными. В каждой карточке отображается фото, район, где животное было найдено, контактный номер телефона нашедшего, дата размещения карточки, индикатор, кем было добавлено объявление (зарегистрированным или незарегистрированным пользователем)

Общее количество карточек с найденными животными - 6. Верстка не должна нарушаться, если объявлений будет меньше.

6.         Форма поиска. Должна содержать следующие поля ввода:

6.1.         Район.

6.2.         Вид животного (например, кошка, собака, суслик, хорек и т.д.)

6.3.         Поле ввода текста для поиска по виду животного

6.4.         Кнопка поиска питомца.

7.         Отзывы владельцев питомцев, которые уже нашли потерянное животное, в виде слайдсета с прокруткой по 1 элементу. Реализация JS не требуется, но визуально должно быть понятно, что подразумевается поочередная смена отзывов.

7.1.         Имя автора отзыва

7.2.         Фото животного

7.3.         Отзыв

7.4.         Дата отзыва

Порядок полей может быть любым.

8.         Форма для подписки на новости сервиса

8.1.         Email

8.2.         Элемент, подтверждающий согласие на обработку персональных данных

8.3.         Кнопка для подписки

9.         Подвал сайта

9.1.         Телефон “8 (800)123-45-76”

9.2.         e-mail: [email protected]

9.3.         Навигация по сайту:

9.3.1.        Главная

9.3.2.        Регистрация

9.3.3.        Авторизация

9.3.4.        Личный кабинет

9.3.5.        Найдено животное

9.3.6.        Поиск

 

СТРАНИЦА ВХОДА В ЛИЧНЫЙ КАБИНЕТ

 

На этой странице вам необходимо сделать форму со следующими полями:

1.                   e-mail

2.                   Пароль

3.                   Кнопка для входа

4.                   Кнопка восстановления пароля 

 

СТРАНИЦА РЕГИСТРАЦИИ В ЛИЧНОМ КАБИНЕТЕ

 

На этой странице вам необходимо сделать форму со следующими полями, обязательными для заполнения:

1.                   e-mail   

2.                   Имя

3.                   Фамилия

4.                   Телефон

5.                   Пароль

6.                   Повтор пароля

7.                   Элемент, подтверждающий согласие на обработку персональных данных

8.                   Кнопка для регистрации

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

 

СТРАНИЦА ЛИЧНОГО КАБИНЕТА ПОЛЬЗОВАТЕЛЯ

 

Общая информация о пользователе (в любом порядке):

1.                   номер телефона и кнопка «Изменить»,

2.                   e-mail и кнопка «Изменить»,

3.                   количество добавленных объявлений,

4.                   количество животных, которые вернулись к хозяевам,

5.                   дата регистрации пользователя,

6.                   количество дней, прошедших с момента регистрации на сайте,

7.                   информация по объявлениям, созданным пользователем ранее.

Эти объявления должны быть сгруппированы по статусам «Активно», «На модерации», «Найдено», «В архиве». Каждая из групп должна иметь собственное оформление и визуально отличаться от других. Каждая группа должна содержать минимум 2 объявления.

В каждом объявлении должна быть отражена следующая информация: район, в котором было найдено животное; дата, когда объявление было добавлено; дополнительная информация (например, при каких обстоятельствах, порода); клеймо (если есть), фото. Для объявлений со статусами «Активно» и «На модерации» должны быть кнопки «Удалить» и «Редактировать».

 

СТРАНИЦА ДОБАВЛЕНИЯ ИНФОРМАЦИИ О НАЙДЕННОМ ЖИВОТНОМ

 

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

Ниже представлены поля, которые необходимо заполнить пользователю при добавлении объявления о найденном животном.

1.                   Контактный номер телефона нашедшего питомца

2.                   e-mail человека, нашедшего животное

3.                   Элемент выбора опции автоматической регистрации пользователя при добавлении объявления о найденном животном. Если пользователь выбрал вариант с регистрацией, то появляется блок с полями для ввода пароля и его подтверждения (по умолчанию он скрыт). Отображение блока происходит без использования js.

Если пользователь решил после этого отказаться от регистрации, блок с полями для ввода паролей скрывается (также без использования js).

4.                   вид животного

5.                   Фото найденного животного. Отобразите в верстке возможность добавления нескольких фотографий, но не более 3 фотографий.

6.                   Дополнительная информация, например, описание обстоятельств, при которых было найдено животное, порода, кличка и т.д.

7.                   Клеймо (если есть)

8.                   Район

9.                   Дата, когда было найдено животное

10.               Элемент, подтверждающий согласие на обработку персональных данных

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

 

СТРАНИЦА ЛИЧНОГО КАБИНЕТА МОДЕРАТОРА

 

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

Модератор может сортировать объявления по дате, статусу - вам необходимо предусмотреть соответствующие элементы управления.

По умолчанию у новых объявлений установлен статус «На модерации». Модератору должны быть доступны элементы управления, позволяющие изменить статус объявления на «Активно», «Найдено», «В архиве».

 

СТРАНИЦА С РЕЗУЛЬТАТАМИ ПОИСКА ЖИВОТНЫХ

 

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

1.                   вид животного

2.                   Фото найденного животного (одно)

3.                   Дополнительная информация, например, описание обстоятельств, при которых было найдено животное

4.                   Клеймо (если есть)

5.                   Район

6.                   Дата, когда было найдено животное

7.                   Контактный номер телефона нашедшего питомца

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

 

СТРАНИЦА С КАРТОЧКОЙ НАЙДЕННОГО ЖИВОТНОГО

 

На странице отображается следующая информация:

1.                   3 фотографии животного

2.                   вид животного

3.                   Имя нашедшего

4.                   Контактный номер телефона нашедшего питомца

5.                   e-mail человека, нашедшего животное

6.                   Дополнительная информация, например, описание обстоятельств, при которых было найдено животное

7.                   Клеймо (если есть)

8.                   Район

9.                   Дата, когда было найдено животное

Порядок и вид отображения полей может быть произвольный

 

ИНСТРУКЦИЯ ДЛЯ ЭКЗАМЕНУЕМОГО

 

Страницы должны быть согласованы между собой. Вам нужно использовать не менее одного из представленных шрифтов. Оценка будет производиться в браузере Google Chrome.

Сохраните сверстанные страницы со следующими именами:

1.                   Главная - index.html

2.                   Страница входа в личный кабинет - login.html

3.                   Страница регистрации в личном кабинете - register.html

4.                   Страница личного кабинета пользователя - profile.html

5.                   Страница добавления информации о найденном животном - add.html

6.                   Страница личного кабинета модератора (управление объявлениями) - orders-management.html

7.                   Страница поиска животных - search.html

8.                   Страница с карточкой найденного животного - pet.html

 

Работы, выполненные с использованием CSS-фреймворков, проверяться не будут!

 

КРИТЕРИИ ОЦЕНИВАНИЯ

 

Группа оценивания	Максимальный балл
G. Общие требования	1,9
PS. Структура проекта	2
D. Дизайн	10,5
WD. Верстка сайта	5,33
Дополнительные баллы	3
Максимальное количество баллов	19,73

 

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

1.                   100%-80%: 5 «отлично»;

2.                   79%-50%: 4 «хорошо»;

3.                   49%-25%: 3 «удовлетворительно»;

4.                   25% и ниже: 2 «неудовлетворительно».