КЗ. КЗ (2). Задание на отборочные соревнования. Модуль 1
 Скачать 0.53 Mb.
|
|
З АДАНИЕ НА ОТБОРОЧНЫЕ СОРЕВНОВАНИЯ . М ОДУЛЬ 1 ВВЕДЕНИЕ Технологии этого модуля: HTML5, CSS3, server-side, граф. дизайн. Время на выполнение: 2 часа 15 минут. В современном мире с каждым днём появляется всё больше и больше новых технологий. В настоящее время сложно представить организацию, у которой нет веб-сайта. К вам обратилась компания «GroomRoom», предоставляющая услуги груминга – ухода за внешним видом животного, его кожей и шерстью, когтями и ушами. Вам необходимо реализовать веб-ресурс, на котором зарегистрированные пользователи могли бы загружать фотографии домашних животных, а сотрудники компании публиковали бы результаты после проведения соответствующих процедур. При этом, как часто бывает, заказчик не знает, что хочет конкретно, но хочет, чтобы сайт привлекал новых клиентов. В добавок ко всему, заказчику хотелось бы, чтобы разрабатываемый ресурс был ориентирован на весьма специфическую аудиторию и удовлетворял бы некоторым дополнительным условиям. Вам предстоит продемонстрировать свои знания в разработке веб-портала с использованием таких технологий как дизайн, верстка, программирование на стороне сервера. Также необходимо позаботиться о защите проекта: от взлома, от несанкционированного доступа к административным функциям и т.д. Вы можете использовать предоставленные фреймворки и библиотеки: Yii, Laravel, Django. Вам необходимо продумать дизайн и сверстать его, а также реализовать функциональные возможности сервиса в соответствии с текущим заданием. Стоит принять во внимание тот факт, что основная часть пользователей пользуется сайтом с помощью смартфона. Обязательно позаботьтесь об удобстве использования сервиса и обратной связи между сервисом и пользователями. Заказчик отметил, что основными пользователями сайта и, соответственно, клиентами являются девушки и женщины в возрасте 17-35 лет, которые регулярно пользуются услугами грумеров для своих питомцев и регулярно общаются с другими владельцами домашних животных. Постарайтесь учесть этот факт. Дополнительным преимуществом будет реализация анимации и микроанимации. ВНИМАНИЕ! Проверяться будут только работы, загруженные на сервер! ОПИСАНИЕ ПРОЕКТА И ЗАДАЧ Ваша задача – разработать сайт, которым удобно пользоваться на смартфонах с разрешением 375 x 812px (вертикальная ориентация). 2 of 9 Несмотря на то, что основная целевая группа будет пользоваться вашим веб-ресурсом со смартфонов, вы должны предусмотреть возможность удобной работы на сайте с компьютеров. Поэтому ваша верстка должна быть адаптивна и корректно отображаться на следующих устройствах: ● смартфоны с разрешением 375 x 812px; ● компьютеры с шириной экрана от 1200px. Структура страниц для смартфонов и компьютеров должна отличаться. В частности, заявки, отображаемые на главной странице версии страницы для смартфона, должны быть расположены в одну колонку (каждая последующая заявка отображается под предыдущей). Следует обратить внимание, что дизайн сайта должен быть удобен и понятен для использования, соответствовать современным тенденциям, а также учитывать особенности платформ, для которых создается сайт. Все созданные страницы должны иметь согласованный интерфейс. При разработке верстки необходимо использовать один из предоставленных шрифтов. На сайте должны быть реализованы следующие страницы: ● Главная страница, предоставляющая возможности авторизации и регистрации пользователей. ● Личные кабинеты администратора и авторизованных пользователей. Дополнительная информация по каждой из страниц представлена ниже. Вы можете создавать дополнительные страницы по своему усмотрению. Учтите, что дизайн и верстка будут оцениваться в первую очередь по страницам: ● Главная страница ● Личный кабинет авторизованного пользователя (http://xxxxxx-m1.wsr.ru/user) Доступ к этим страницам должен быть очевидным. Заказчиком предоставлено несколько логотипов, вам необходимо выбрать один из них. Выбранный логотип должен быть сохранен на сервере в корневом каталоге в директории logo со следующим именем – logo_groom.png Портал должен поддерживать возможности 3 типов пользователей: ● Гость ● Авторизованный пользователь ● Администратор Возможности гостя ● Вход в личный кабинет по логину и паролю ● Регистрация ● Просмотр главной страницы Возможности авторизованного пользователя ● Просмотр главной страницы 3 of 9 ● Выход; ● Создание заявки (запись) на оказание услуг груминга домашним животным; ● Просмотр своих заявок; ● Удаление своей заявки. Возможности администратора ● Смена статуса заявки на «Обработка данных» или «Услуга оказана». Авторизация пользователя и администратора (на главной странице) При вводе неправильной пары логин-пароль пользователю отображается сообщение об ошибке. При успешной авторизации пользователь должен перенаправляться в личный кабинет с возможностью просмотра своих заявок. Личный кабинет доступен только авторизованному пользователю. Панель управления сайтом (личный кабинет администратора) доступна только администратору. Регистрация пользователя (на главной странице) Вся валидация должна происходить на стороне сервера, все поля обязательные для заполнения: ● ФИО - только кириллические буквы и пробелы; ● Логин – только латиница и дефис, уникальный; ● Email - валидный формат email-адреса; ● Пароль; ● Повтор пароля – введенное значение должно совпадать с паролем; ● Согласие на обработку персональных данных - должно быть отмечено. В случае несоответствия любым требованиям поля с ошибками должны выделяться. Создайте учетную запись администратора с логином admin и паролем grooming. Все авторизованные пользователи могут выйти из профиля по нажатию на ссылку/кнопку «Выход». Создание заявки (на странице пользователя по адресу http://xxxxxx- m1.wsr.ru/user): ● Кличка домашнего животного, обязательное поле; ● Фото домашнего животного в одном из форматов (jpeg, bmp) максимальный размер 2Мб; при невыполнении хотя бы одного из требований, заявка не сохраняется на сервере, выводится сообщения об ошибке, обязательное поле. При добавлении заявки она должна автоматически получить статус «Новая». Удаление заявки (на странице пользователя по адресу http://xxxxxx- m1.wsr.ru/user): Пользователь может удалить только свою заявку, статус которой не был изменен администратором на «Обработка данных» или «Услуга оказана». 4 of 9 Просмотр своих заявок (на странице пользователя по адресу http://xxxxxx- m1.wsr.ru/user): На странице просмотра своих заявок необходимо отобразить список своих заявок со следующими полями: ● Кличка домашнего животного ● Статус заявки («Новая», «Обработка данных», «Услуга оказана»). По умолчанию отображаются все заявки в порядке добавления заявок (недавно добавленные отображаются в начале таблицы/списка). Главная страница На главной странице выводится не более 4 последних заявок в статусе «Услуга оказана» со следующими полями: ● Кличка домашнего животного ● Фотография домашнего животного, загруженное при создании заявки Непосредственно на главной странице должны быть поля для авторизации и регистрации пользователя. Смена статуса заявки (в административной панели по адресу http://xxxxxx- m1.wsr.ru/groom): Заявке со статусом «Новая» можно сменить статус на «Обработка данных». Заявке со статусом «Обработка данных» можно сменить статус на «Услуга оказана» с обязательным прикреплением (добавлением) изображения – фотографии, демонстрирующей результат оказанной услуги. Смена статуса «Услуга оказана» невозможна. ИНСТРУКЦИЯ ДЛЯ КОНКУРСАНТА Портал должен быть доступен по адресу: http://xxxxxx-m1.wsr.ru/, где xxxxxx – логин пользователя, полученный участником на индивидуальной карточке Административная панель должна быть доступна по адресу: http://xxxxxx- m1.wsr.ru/groom Внимание! Доступ ко всем страницам должен быть реализован с помощью элементов пользовательского интерфейса. Вам предоставляются медиа файлы. Вы можете изменять предоставленные файлы и создавать новые для улучшения приложения. Проверяются только работы, загруженные на сервер. Ваш HTML/CSS должен быть валидным. Оценка будет производиться в браузере Google Chrome. Работа будет проверяться с применением автоматической оценки, поэтому укажите соответствующие классы для следующих элементов: 5 of 9 Расположение Элемент Классы Регистрация Поле для ввода ФИО test-1-i-fio Блок, содержащий ошибки для поля ФИО test-1-e-fio Поле для ввода Логин test-1-i-login Блок, содержащий ошибки для поля Логин test-1-e-login Поле для ввода Email test-1-i-email Блок, содержащий ошибки для поля Email test-1-e-email Поле для ввода Пароль test-1-i-pass Блок, содержащий ошибки для поля Пароль test-1-e-pass Поле для ввода Повтор пароля test-1-i-pass2 Блок, содержащий ошибки для поля Повтор пароля test-1-e-pass2 Поле для отметки Согласие на обработку персональных данных test-1-i-agree Блок, содержащий ошибки для поля Согласие на обработку персональных данных test-1-e-agree Кнопка для отправки формы test-1-b-reg Авторизация Поле для ввода Логин test-2-i-login Блок, содержащий ошибки для поля Логин test-2-e-login Поле для ввода Пароль test-2-i-pass Блок, содержащий ошибки для поля Пароль test-2-e-pass Кнопка для отправки формы test-2-b-log Вид авторизованного пользователя Ссылка/кнопка “Выход” test-b-logout 6 of 9 Создание заявки пользователем Поле для ввода клички домашнего животного test-i-name Поле для выбора фото домашнего животного test-c-photo Кнопка для отправки формы test-b-new Просмотр своих заявок Кличка домашнего животного test-t-name Статус заявки test-t-status Кнопка для удаления заявки test-b-remove Главная страница Логотип test-t-logo Кличка домашнего животного test-t-name Фотография с результатом test-t-photo Страница смены статусов заявок (для админа) Кличка домашнего животного test-t-name Поле с выбором статуса test-s-status Поле с выбором фотографии test- с-photo Поле для отправки формы со сменой статуса (при наличии) test-b-change Указывайте классы только для тех элементов, которые у вас есть. СИСТЕМА ОЦЕНКИ секция критерий сумма A Организация работы и управление 3.00 B Коммуникация и навыки межличностного общения 3.00 С Графический дизайн 11.00 D Верстка 11.00 Е Программирование на стороне клиента 0.00 F Программирование на стороне сервера 22.00 G CMS 0.00 Всего 50.00 7 of 9 З АДАНИЕ НА ОТБОРОЧНЫЕ СОРЕВНОВАНИЯ . М ОДУЛЬ 2 ВВЕДЕНИЕ Вашей задачей является продемонстрировать свои навыки программирования на “чистом” JavaScript. Для этого вам необходимо написать свое веб-приложение под названием “Список задач”. Технологии этого модуля: HTML5, CSS3, client-side, граф. дизайн. Время на выполнение: 2 часа 15 минут. ОПИСАНИЕ ПРОЕКТА И ЗАДАЧ Вашей задачей является продумать дизайн, сверстать страницу и реализовать требуемый функционал на языке программирования JavaScript. В данном модуле вы можете использовать только чистый JavaScript и чистый CSS, без фреймворков, библиотек и дополнительных модулей. Работы, не удовлетворяющие данному требованию, проверяться не будут. Внимание! Проверяются только работы, загруженные на сервер! Все интерактивные действия должны происходить без обновления страницы. Основной функционал: ● Добавление задачи ○ Название задачи нельзя добавить задачу с пустым названием ○ Дата и время до которого необходимо выполнить задачу необязательные поля. В случае заполнения: не раньше сегодняшнего дня и текущего времени. ■ Формат ввода даты ДД.ММ.ГГГГ ■ Формат ввода времени ЧЧ:ММ ○ Список подзадач можно удалять и добавлять подзадачи: текстовые поля ● Отметка о выполнении задачи ○ Если у задачи есть список подзадач, то нельзя отметить задачу выполненной, если у нее остались не закрытые подзадачи ○ Выполненные задачи отображаются только во вкладке “Выполненные”, а активные только во вкладке “Активные” ● Удаление задач Удаление должно происходить с запросом на подтверждение ● Фильтрация ○ Фильтрация должна происходить в момент ввода поискового запроса ○ Фильтрация ведется по заголовку задачи, названиям подзадач, дате и времени 8 of 9 ○ Фильтрация должна быть гибкой и фильтровать сразу по нескольким параметрам. Например, должна работать фильтрация по запросу: “сделать задание в 10:00”. Если есть задача, в которой встречаются слова “сделать”, “задание”, “в” и “10:00”, то только тогда эта задача должна выводиться в результатах фильтрации. ○ Найденные слова в поисковой фразе должны выделяться везде в результатах фильтрации (заголовок задачи, названия подзадач, дата и время) ○ Задачи, которые не удовлетворяют поисковому запросу при фильтрации, должны скрываться ○ Фильтрация ведется только в активной вкладке (активные/выполненные) ○ При переключении между вкладками, фильтрация осуществляется по введенному ранее запросу в соответствующем поле ○ Формат времени для поиска ЧЧ:ММ или Ч:ММ (например, 07:00, 10:00, 8:00, 23:50) ○ Формат даты для поиска ДД.ММ.ГГГГ или Д.ММ.ГГГГ (например, 10.09.2020, 9.04.2021, 09.04.2021). Недопустимы записи вида: 9.4.2021 ● Редактирование задачи ○ Название задачи нельзя оставить пустое название ○ Дата и время, до которых необходимо выполнить задачу ○ Список подзадач можно удалять и добавлять подзадачи ● Вывод задач ○ Вы должны предусмотреть, что в задаче должно выводиться время до выполнения по формату: ■ “Просрочено” если время и дата задачи уже прошло ■ “Сегодня” ■ “Завтра” ■ “Послезавтра” ■ “Через X дней(я)” - в остальных случаях, где X - оставшееся кол-во дней Общее требования к дизайну ● Дизайн веб-приложения должен соответствовать целевой аудитории ● Целевая аудитория: студенты учебных заведений России, которые готовятся к экзаменам ● Должны использоваться простые и понятные заголовки ● Шрифты должны соответствовать целевой аудитории ● Используемые цвета должны помогать восприятию контента ● Свободное пространство должно быть равномерным в однотипных блоках ● Интерфейс должен быть привлекательным и удобным, для этого, в том числе, следует использовать интерактивные эффекты и микроанимации Информация должна сохраняться при обновлении страницы средствами браузерного хранилища. 9 of 9 ИНСТРУКЦИЯ ДЛЯ КОНКУРСАНТА В данном модуле вы можете использовать только JavaScript и CSS, без фреймворков, библиотек и дополнительных модулей. Работы, не удовлетворяющие данному требованию, проверяться не будут. Проверяются только работы, загруженные на сервер! Ваше веб-приложение должно быть доступно по адресу: {host}, где {host} - запись вида http://xxxxxx-m2.wsr.ru, а xxxxxx - полученный логин. Оценка будет производиться при помощи браузера Google Chrome. СИСТЕМА ОЦЕНКИ Секция Критерий Сумма A Организация работы и управление 3 B Коммуникация и навыки межличностного общения 3 С Дизайн 11 D Верстка 11 Е Программирование на стороне клиента 22 F Программирование на стороне сервера 0 G CMS 0 Всего 50 |