|
|
УТВЕРЖДЕНО
на заседании регионального организационного комитета по проведению конкурса «Aбилимпикс» по профессиональному мастерству среди инвалидов и лиц с ограниченными возможностями здоровья в Ханты-Мансийском автономном округе – Югре
в 2018 году
протокол от 04.09.2018 №2
|
КОНКУРСНОЕ ЗАДАНИЕ
по компетенции
«Веб-дизайн»
-
Описание компетенции.
-
Ссылка на образовательный и профессиональный стандарт.
Приказ Министерства труда и социальной защиты РФ от 5 октября 2015 г. N 689н «Об утверждении профессионального стандарта «Специалист по дизайну графических и пользовательских интерфейсов».
-
Актуальность компетенции.
Веб-разработка — процедура создания WEB-приложения или WEB-сайта. Основными этапами этого процесса являются такие мероприятия, как веб-дизайн, вёрстка страниц сайта, веб-программирование на стороне сервера и клиента, а также работы по конфигурированию веб-сервера.
В веб-разработке используется много различных технологий и готовых продуктов: это языки программирования и разметки в «чистом» виде, базы данных и другие хранилища информации, программные продукты для упрощения разработки (фреймворки и системы управления сайтами), а также серверное программное обеспечение.
Эта отрасль сегодня нуждается в высококвалифицированных специалистах, способных не только качественно выполнять свою работу, но насыщать её инновационными решениями. Разработка digital-продуктов, таких как сайт или мобильное приложение - это всегда командная работа и каждый член команды должен четко понимать функционал и важность работы своего коллеги. Поэтому в концепции заданий для чемпионата “Абилимпикс” в компетенции “веб-дизайн” участнику предлагается попробовать и проявить себя сразу в нескольких ролях: аналитик - проектировщик, дизайнер, верстальщик, front-end и back-end разработчик. В реальных проектах в процессе работы над продуктом команда разработчиков не только использует специализированные программные средства, но и активно применяет свое логическое и творческое мышление.
Веб-дизайн разрабатываемого сайта непременно обязан привлекательно выглядеть при использовании пользователями различных браузеров, особенно это касается таких браузеров, как Chrome, Internet Explorer, Safari, Firefox и Opera.
Общее задание
Требуется разработать веб-сайт волонтерского движения своего города. Главная цель проекта: популяризация движения волонтеров и стюардов, оказывающих всестороннюю помощь в организации и проведении общественно важных и социальных мероприятий и проектов на территории своего города или региона.
Сегментация целевой аудитории и функции на сайте каждого из сегментов:
Интересующиеся:
- узнать общую информацию о волонтерском движении,
- узнать новости в сфере организации социальных проектов региона,
- узнать о готовящихся мероприятиях,
- получить контактную информацию волонтерских центров,
- регистрация в качестве волонтёра.
Волонтёры:
- авторизация в личном кабинете волонтёра,
- редактирование профиля,
- регистрация на участие в мероприятиях.
Менеджеры сайта:
- авторизация в администраторском разделе,
- редактирование информации о волонтёрском движении,
- добавление и изменение функциональных направлений участия,
- добавление, публикация и редактирование новостей социальной жизни города или региона,
- добавление и изменение мероприятий движения.
-
Время на выполнение задания
4 часа
4. Детальные требования к выполнению задания
Модуль 1. Проектирование, прототипирование интерфейса и разработка дизайн-макетов уникальных страниц сайта
ИНСТРУКЦИЯ ДЛЯ УЧАСТНИКА
Необходимо разработать:
- каркасную модель (wireframe);
- дизайн-макеты уникальных страниц публичной части сайта.
Сайт должен иметь следующую структуру страниц и содержимое каждой из них:
Главная:
Текстовая и графическая информация о волонтёрском движении в стране и в вашем регионе.
Направления:
Функциональные направления волонтерского движения. Направление должно быть охарактеризовано названием и коротким описанием.
Примеры направлений:
- социальное;
- военно-патриотическое;
- экологическое;
- спортивное.
Новости:
Каждая новость в списке характеризуется названием, датой публикации, заглавной картинкой и текстовым анонсом. Детализация выбранной новости содержит полный текст самой новости кроме даты публикации.
Контакты:
Реквизиты представителей волонтерского движения.
События:
Список мероприятий, обеспечиваемых волонтёрами движения. Каждое мероприятие имеет название, дату проведения, заглавную картинку. Детализации выбранного события должна содержать название, дату проведения мероприятия, подробное описание, реквизиты координатора мероприятия и модуль регистрации волонтеров. Модуль регистрации должен содержать информацию о необходимом количестве волонтеров и количеству зарегистрированных волонтеров по каждому направлению.
Личный кабинет:
Перенаправление авторизованных волонтёров к редактированию личной информации, а не авторизованных пользователей на страницу регистрации. - Вход в свой кабинет (форма ввода логина (e-mail) и пароля с последующим открытием страницы формы с ранее заполненными персональными данными для ввода изменений). Авторизованный пользователь должен видеть, на какое мероприятие он записан в качестве волонтера.
- Регистрация (форма для регистрации).
Форма регистрации содержит следующие поля:
- Фамилия *
- Имя *
- Отчество
- E-mail *
- Телефон *
- О себе
- Направление (множественный выбор нескольких специализаций из списка всех доступных, можно реализовывать как на базе группы checkbox, так и при помощи select multiple.
- Checkbox о согласии на обработку персональных данных и ссылку на страницу с текстом согласия.
Поля, отмеченные знаком «*» являются обязательными для заполнения.
Каждая страница сайта должна иметь «шапку» (header) и «подвал» (footer), в которых необходимо расположить логотип волонтёрского движения, главное меню сайта, контактную информацию, а также кнопки регистрации в качестве волонтера и вход на сайт для ранее зарегистрированных волонтёров.
ВХОДНЫЕ ДАННЫЕ
В папке «Материалы для модуля 1» содержится тестовое наполнение разделов сайта, а также другая текстово-графическая информация, полезная в процессе разработки сайта. Нет необходимости использовать все предоставленные материалы — каждый участник сам решает полезность тех или иных материалов для конкретно его задачи.
ВЫХОДНЫЕ ДАННЫЕ
Каркасная модель графического интерфейса (wireframe) в составе следующих страниц:
- Главная.
- Список событий.
- Детализация события.
Сохраните свою работу в папке C:\Участник_номер \Модуль1\
Дизайн-макеты сайта:
Макеты дизайна каждой страницы должны состоять из нескольких файлов (PhotoShop-исходник в формате .psd и предпросмотр в формате .png или .jpg). Обязательно иметь варианты адаптации главной страницы:
Макет под смартфоны — должен отражать схему отображения страниц приширине экрана 320-767 пикселей.
Макет под планшеты — должен отражать схему отображения страниц при ширине экрана 768-1279 пикселей. Макет под настольные компьютеры и ноутбуки — должен отражать схему отображения страниц при ширине экрана 1280 пикселей и более.
Каждая версия каждой страницы должна иметь название в формате: [НАЗВАНИЕ_СТРАНИЦЫ]_[ШИРИНА_ЭКРАНА]. psd. Например «Форма_управления_игроками_768px.psd» означает исходник дизайн-макеты страницы, позволяющей менеджеру команды добавлять и редактировать игроков с планшета (то есть при ширине экрана от 768 до 1279 пикселей).
Сохраните свою работу в папке C:\Участник_номер \Модуль1.
Модуль 2. Разработка клиентской части сайта (front-end).
ИНСТРУКЦИЯ ДЛЯ УЧАСТНИКА
Сверстать дизайн макеты страниц сайта с использованием современного технологического стека разработки: HTML5, CSS3, JavaScript.
ВХОДНЫЕ ДАННЫЕ
Используются макеты-дизайна, разработанные в рамках Модуля 1. Код страниц должен быть сверстан самостоятельно, участниками конкурса, допускается использование редакторов кода, ускоряющих разработку, таких как Emmet или Jade, но совершенно недопустима машинная генерация кода на основе макета.
ВЫХОДНЫЕ ДАННЫЕ
Работа должна состоять из набора html, css, js-файлов, изображений, а также других необходимых для корректного отображения страницы в браузерах файлов.
Код максимально насколько это возможно должен соответствовать спецификации стандартов HTML 5 и CSS3. Для установления соответствия организационный комитет будет пользовать официальным инструментом validator.w3.org. Любое отклонение от стандартов должно быть обоснованно в комментариях непосредственно перед или сразу после места отхождения от спецификации.
Необходимо обеспечить некоторую степень кроссбраузерности: полученные в результате верстки страницы должны одинаково адекватно отображаться, работать и соответствовать макетам в последних версиях браузеров Chrome, FireFox, Opera, Safari, Internet Explorer и Edge.
Сохраните свою работу в папке C:\Участник_номер \Модуль2.
Требования охраны труда и техники безопасности
Инфраструктурный лист
НА 1-ГО УЧАСТНИКА
|
Оборудование, инструменты и мебель
|
№
|
Наименование
|
Ссылка на сайт с тех характеристиками либо тех характеристики инструмента
|
Ед.
измерения
|
Кол-
во
|
1
|
Компьютер
|
Core i5, 8GB ОЗУ, 1TB HD, монитор 23", ИБП на 650 Вт, мышь, клавиатура
|
шт
|
1
|
2
|
Стол обычный для компьютера
|
1200*600 мм
|
шт
|
1
|
3
|
Кресло компьютерное
|
На усмотрение организатора
|
шт
|
1
|
4
|
MicrosoftOffice 2010-2014
|
Програмное обеспечение
|
шт
|
1
|
5
|
Geany
|
Програмное обеспечение
|
шт
|
1
|
6
|
Kompozer
|
Програмное обеспечение
|
шт
|
1
|
7
|
Notepad ++
|
Програмное обеспечение
|
шт
|
1
|
8
|
SublimeText 2
|
Програмное обеспечение
|
шт
|
1
|
9
|
Web Browser - Firefox Developer Edition
|
Програмное обеспечение
|
шт
|
1
|
10
|
WebBrowser - Chrome
|
Програмное обеспечение
|
шт
|
1
|
11
|
Adobe Creative (Fireworks, Photoshop, Illustrator, Dreamweaver)
|
Програмное обеспечение
|
шт
|
1
|
12
|
AdobeAcrobatreader
|
Програмное обеспечение
|
шт
|
1
|
13
|
GIMP
|
Програмное обеспечение
|
шт
|
1
|
14
|
Inkscape
|
Програмное обеспечение
|
шт
|
1
|
15
|
Windows 7 - 10
|
Операционная система
|
шт
|
1
|
Расходные материалы
|
№
|
Наименование
|
Ссылка на сайт с тех характеристиками либо тех характеристики инструмента
|
Ед.
измерения
|
Кол-
во
|
1
|
Карандаш
|
На усмотрение организатора
|
шт
|
1
|
2
|
Лист бумаги
|
На усмотрение организатора
|
шт
|
40
|
|
