Второй региональный чемпионат профессионального мастерства людей с инвалидностью «Абилимпикс» Тамбовской области
КОНКУРСНОЕ ЗАДАНИЕ
по компетенции
Веб-дизайн (Студенты, специалисты)
РАЗРАБОТАЛ
Национальный эксперт «Абилимпикс»
_________ ________________________
«____» _____________ 2017
СОГЛАСОВАНО
Компания ________________
_________ _______________
«____» _____________ 2017
СОГЛАСОВАНО
ООО «Всероссийское общество инвалидов»
______ ___________
(подпись) (ФИО)
«___» ________ 2017
|
СОГЛАСОВАНО
ОООИ «Всероссийское общество глухих»
______ ______________
(подпись) (ФИО)
«___» ________ 2017
|
СОГЛАСОВАНО
ОООИ «Всероссийское ордена Трудового красного Знамени общество инвалидов»
______ _____________
(подпись) (ФИО)
«___» ________ 2017
|
СОГЛАСОВАНО
РОО «Клуб психиатров»
______ __________
(подпись) (ФИО)«___»________2017
|
Тамбов, 2017
Содержание
1. Описаниекомпетенции
1.1. Ссылка на образовательный и профессиональный стандарт
Приказ Министерства труда и социальной защиты РФ от 5 октября 2015 г. N 689н «Об утверждении профессионального стандарта «Специалист по дизайну графических и пользовательских интерфейсов».
1.2. Актуальность компетенции.
Веб-разработка является уже состоявшейся отраслью и сегодня нуждается в высококвалифицированных специалистах, способных не только качественно выполнять свою работу, но насыщать её инновационными решениями.
Разработка digital-продуктов, таких как сайт или мобильное приложение – это всегда командная работа и каждый член команды должен четко понимать функционал и важность работы своего коллеги. Поэтому в концепции заданий для чемпионата “Абилимпикс” в компетенции “веб-дизайн” участнику предлагается попробовать и проявить себя сразу в нескольких ролях: аналитик-проектировщик, дизайнер, верстальщик, front-end и back-end разработчик. В реальных проектах в процессе работы над продуктом команда разработчиков не только использует специализированные программные средства, но и активно применяет свое логическое и творческое мышление. Благодаря чему профессиональные веб-разработчики создают гармоничный и эффективный в использовании продукт с учетом бизнес-потребностей заказчика, пожеланий целевой аудитории, реализуя это в продуманном функционале, качественной архитектуре и удобных пользовательских интерфейсах.
1.3. Требования к квалификации. Описание знаний, умений, навыков
Коммуникационные и межличностные навыки
Участник должен знать и понимать:
Как решить проблемы в общении, в том числе выявление проблемы, ее исследование, анализ, решение, макетирование, пользовательское тестирование и оценка результатов;
Принципы, лежащие в основе сбора и представления информации;
Принципы создания блок-схем, правил формирования концепции продукта.
Участник должен уметь:
Представить продукт, который отвечает требованиям клиента и спецификации;
Собирать, анализировать и оценивать информацию;
Использовать навыки грамотности для толкования стандартов и требований;
Планировать и организовывать общение с клиентом;
Критиковать свои проекты и идеи.
Прототип пользовательского интерфейса
Участник должен знать и понимать:
Основные принципы разработки пользовательских интерфейсов;
Как эффективно визуализировать концепцию продукта в пользовательских интерфейсах;
Приоритеты использования тех или иных элементов интерфейса.
Участник должен уметь:
Работать в основных программах для прототипирования;
Гармонично компоновать элементы интерфейса;
Отстаивать свою точку зрения по структуре разработанного прототипа.
Графический дизайн веб-страниц
Участник должен знать и понимать:
Общепринятые элементы веб-страниц различных видов и назначений;
Вопросы, связанные с когнитивными, социальными, культурными, технологическими и экономическими условиями при разработке дизайна;
Как создавать и оптимизировать графику для сети Интернет;
Как создавать дизайн по предоставляемым инструкциям и прототипам;
Правила поддержания фирменного стиля, бренда и стилевых инструкций;
Ограничения, которые накладывают мобильные устройства и разрешения экранов при использовании их для просмотра веб-сайтов;
Принципы построения эстетичного и креативного дизайна;
Современные стили и тенденции дизайна.
Участник должен уметь:
Создавать, использовать и оптимизировать изображения для вебсайтов;
Выбирать дизайнерское решение, которое будет наиболее подходящим для целевого рынка;
Принимать во внимание влияние каждого элемента, который добавляется в проект во время разработки дизайна;
Использовать все требуемые элементы при разработке дизайна;
Учитывать существующие правила корпоративного стиля;
Создавать «отзывчивый» дизайн, который будет отображаться корректно на различных устройствах и при разных разрешениях;
Придерживаться оригинальной концепции дизайна проекта и улучшать его визуальную привлекательность;
Превращать идею в эстетичный и креативный дизайн.
Верстка страниц
Участник должен знать и понимать:
Методы обеспечения доступа к страницам веб-сайтов аудитории с ограниченными возможностями;
World Wide Web Consortium (W3C) стандарты HTML и CSS;
Методы верстки веб-сайтов и их стандартную структуру;
Как встраивать и интегрировать анимацию, аудио, видео и другую мультимедийную информацию, управлять поведением остальных элементов на странице.
Участник должен уметь:
Создавать html-страницы сайта на основе предоставленных графических макетов их дизайна;
Корректно использовать CSS для обеспечения единого дизайна в разных браузерах;
Создавать адаптивные веб-страницы, которые способны оставаться функциональными на различных устройствах при разных разрешениях;
Создавать веб-сайты полностью соответствующие текущим стандартам W3C (http://www.w3.org).
Программирование на стороне клиента
Участник должен знать и понимать:
Возможности клиентского языка программирования JavaScript;
Как разрабатывать код с использованием открытых библиотек.
Участник должен уметь:
Разрабатывать анимацию для веб-сайта, с целью повышения его доступности и визуальной привлекательности;
Создавать и модифицировать JavaScript код для улучшения функциональности и интерактивности сайта;
Применять открытые библиотеки.
Программирование на стороне сервера
Участник должен знать и понимать:
Как разрабатывать PHP (PHP: HypertextPreprocessor) код на процедурном и объектно-ориентированном уровнях;
Как использовать открытые библиотеки и Фреймворки;
Распространенные модели организации и хранении данных и реализацию их с применением MySQL;
Как разрабатывать веб-сервисы с применением PHP, XML (ExtensibleMarkupLanguage) и JSON;
Как разрабатывать безопасное веб-приложение.
Участник должен уметь:
Создавать библиотеки и модули для выполнения повторяющихся задач;
Разрабатывать веб-приложения с доступом к базе данных MySQL и веб-сервисы по требованиям клиента;
Интерпретировать ER (Entity-Relationship) диаграммы в функционирующую базу данных;
Создавать SQL (StructuredQueryLanguage) запросы, используя корректный синтаксис (классический и PDO (PHP DataObject));
Разрабатывать объектно-ориентированный программный код.
2.Конкурское задание
Необходимо разработать веб-ресурс спортивного турнира по командному виду спорта, проводимого по круговой, циклической схеме, то есть каждая команда проводит по 2 матча со всеми другими командами: один матч на собственной площадке (или стадионе), второй на площадке (или стадионе) соперника.
В качестве тематики можно выбрать любой существующий или выдуманный турнир по любому командному виду спорта, включая соревнования по киберспорту, главным требованием является не индивидуальное, а именно командное участие и проведение турнира не по схеме «на вылет», а именно круговая схема, подразумевающая наличие сводной турнирной таблицы, определяющей занимаемое командой место.
При разработке веб-ресурса необходимо предусмотреть 5 уровней доступа и соответствующий каждому уровню набор доступных функций:
-
Гостевой доступ — доступ к публичной части веб-ресурса, не требующий никаких подтверждений прав доступа.
Просмотр новостей турнира.
Просмотр списка команд.
Просмотр составов команд.
Просмотр турнирной таблицы.
Просмотр календаря игр и результатов матчей.
-
Авторизованный пользователь — расширенный доступ к публичной части веб-ресурса, требуется аутентификация посредством логина и пароля, либо через OpenID.
Авторизация в личном кабинете.
Редактирование личных данных.
Голосование за лучшего игрока матча.
Комментирование новостей и матчей.
-
Менеджер клуба — доступ к административному разделу, требуется подтверждение прав доступа посредством аутентификации с использованием логина и пароля.
Авторизация в администраторском разделе.
Редактирование состава своей команды.
Формирование заявки (состава) игроков на матч.
-
Менеджер турнира — доступ к административному разделу, требуется подтверждение прав доступа посредством аутентификации с использованием логина и пароля.
Авторизация в администраторском разделе.
Управление новостями (добавление, редактирование, удаление).
Управление командами (добавление, редактирование, удаление).
Управление календарём сезона (расстановка матчей по датам и площадкам).
Утверждение заявки (состава) команд на матч.
Управление протоколом (событиями) матча.
-
Суперпользователь — может быть не более одного в системе, доступ к административному разделу, требуется подтверждение прав доступа посредством аутентификации с использованием логина и пароля.
Создание пользователей административного раздела веб-приложения.
Назначение прав доступа уровня «Менеджер клуба».
Назначение прав доступа уровня «Менеджер турнира».
2.2. Время на выполнение задания
6 часов
2.3. Детальные требования к выполнению задания
Модуль 1. Проектирование, прототипирование интерфейса и разработка дизайн-макетов уникальных страниц веб-приложения
Инструкция для участника
Базовая структура данных должна быть представлена участником в полной мере на всех этапах реализации веб-приложения от проекта интерфейса (его каркасной модели, или как её принято называть wireframe) и вплоть до законченного продукта. Управление данными должно быть представлено также в полной мере, в соответствии с последующими требования. В приложении, доступном в день проведения конкурса, будет приведён пример заполнения данными одного турнира, так называемая «рыба» содержимого.
-
Пользователи
Логин (или E-mail) — обязательное, строчное поле (длиной от 8 до 255 символов).
Пароль — обязательное (кроме случаев реализации авторизации посредством OpenID), строчное поле (длиной от 8 до 50 символов).
Фамилия — строчное поле (длиной от 1 до 255 символов).
Имя — обязательное, строчное поле (длиной от 1 до 100 символов).
Отчество — строчное поле (длиной от 1 до 255 символов).
-
Администраторы (менеджеры)
Логин — обязательное, строчное поле (длиной от 8 до 50 символов).
Пароль — обязательное, строчное поле (длиной от 8 до 50 символов).
Фамилия — строчное поле (длиной от 1 до 255 символов).
Имя — обязательное, строчное поле (длиной от 1 до 100 символов).
Отчество — строчное поле (длиной от 1 до 255 символов).
Телефон — строчное поле (длиной от 4 до 12 символов).
E-mail — строчное поле (длиной от 8 до 255 символов).
-
Новости
Название
Дата и время публикации
Автор
Содержание
-
Комментарии
Автор
Дата и время публикации
Содержание
-
Команды
Название
Город базирования
Эмблема
Тренер
Домашняя площадка или стадион
Адрес сайта в Интернет
-
Игроки
Игровой номер
Командная специализация
ФИО
Фотография
Дата рождения
Гражданство
-
Площадки (стадионы)
Название
Вместимость
Город
Адрес
-
Матчи
Принимающая команда
Гостевая команда
Дата и время начала матча
Продолжительность
-
События матчей
Матч
Минута матча
Тип события (зависит от вида спорта, но, как правило, делится на: участие игрока в матче, целевое или тактико-техническое действие игрока в матче, достижение игроком какого либо результата в матче или нарушение игроком правил матча).
Игрок
Публичная часть веб-приложения предусматривает самостоятельную регистрацию, а следовательно должен быть разработан эргономичный и легко воспринимаемы интерфейс регистрации и авторизации.
Администраторский раздел веб-приложения делится на множество модулей, каждый из которых имеет списки элементов, а также формы для управления данными. Устройство этих форм также необходимо проработать с точки зрения эргономики, логики заполнения администратором, а также желателен контроль за достоверностью и целостностью, вводимых данных (валидация данных) на клиентской и серверных сторонах веб-приложения.
Примечание
Разработчик задания рекомендует для достижения наилучшего эффекта и наиболее полного выполнения задания, не останавливаться на долго на каком либо из модулей, и везде стремиться к минимализму. Чем более четкий и простой дизайн Вы делаете, чем меньше в нём деталей, а даже имеющиеся детали многократно повторены и единообразны, тем меньше времени у Вас уйдет и на последующие модули. Лучше потратьте это время на демонстрацию Ваших способностей в различных практиках построения front-end и back-end.
Входные данные
В папке «Материалы для модуля 1» содержится тестовое наполнение для примера конкретных, допустимых данных, а также другая текстово-графическая информация, полезная в процессе разработки веб-приложения. Нет необходимости использовать все предоставленные материалы — каждый участник сам решает полезность тех или иных материалов для конкретно его задачи.
Выходные данные
-
Каркасная модель графического интерфейса приложения (wireframe) в составе следующих страниц:
Главная — cтартовая страница публичной части веб-приложения, содержащей общую информацию о турнире, свежие новости, турнирную таблицу, последние несколько матчей и несколько ближайших матчей.
Таблица результатов — содержит сводную таблицу всех матчей турнира.
Календарь турнира — список всех матчей турнира в хронологическом порядке.
Профиль команды — содержит общую информацию о команде и список игроков данной команды.
Матч — содержит общую информацию о матче, составе участвующих команд, а также событиях, происходивших во время матча.
Список новостей.
Страница с полным содержанием одной новости и возможностью комментирования для авторизованных участников.
Страница регистрации с формой (не требуется в случае регистрации по средствомOpenID).
Страница авторизации (не требуется в случае регистрации по средствомOpenID).
Личный кабинет пользователя с формой редактирования личной информации.
Страница авторизации в администраторской части веб-приложения.
Списки элементов (новостей, команд, матчей, площадок, игроков, пользователей и менеджеров).
Форма добавления и редактирования новости.
Форма добавления и редактирования команды.
Форма редактирования матча с возможность добавления и редактирования отдельных событий.
Форма добавления и редактирования площадок.
Форма добавления и редактирования игроков.
Форма добавления и редактирования менеджеров.
Каждая страница должна быть представлена отдельным файлом png или jpg форматов, либо представлена на отдельном листе бумаги.
Сохраните свою работу в папке Abilympics\Участник[ВАШ НОМЕР ПО ЖЕРЕБЬЕВКЕ]\Модуль1, если выполняете электронно, либо сдайте экспертам листочки бумаги с выполненным задание, подписав вверху “Модуль1 Участник [ВАШ НОМЕР ПО ЖЕРЕБЬЕВКЕ]”.
-
Дизайн-макеты сайта:
Макеты дизайна каждой страницы должны состоять из нескольких файлов (PhotoShop-исходник в формате .psd и предпросмотр в формате .png или .jpg). Обязательно иметь варианты адаптации главной страницы публичной части, а желательно адаптировать все страницы веб-приложения:
Макет под смартфоны — должен отражать схему отображения страниц при ширине экрана 320-767 пикселей.
Макет под планшеты — должен отражать схему отображения страниц при ширине экрана 768-1279 пикселей.
Макет под настольные компьютеры и ноутбуки — должен отражать схему отображения страниц при ширине экрана 1280 пикселей и более.
Каждая версия каждой страницы должна иметь название в формате:
[НАЗВАНИЕ_СТРАНИЦЫ]_[ШИРИНА_ЭКРАНА].psd. Например «Форма_управления_игроками_768px.psd» означает исходник дизайн-макеты страницы, позволяющей менеджеру команды добавлять и редактировать игроков с планшета (то есть при ширине экрана от 768 до 1279 пикселей).
Сохраните свою работу в папке Abilympics\Участник[ВАШ НОМЕР ПО ЖЕРЕБЬЕВКЕ]\Модуль1
|
