WSR 2017

Задание первого дня (Дизайн и верстка + JavaScript + PHP)


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

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

Создаваемые файлы должны структурированы и содержать комментарии. PHP и JS код должен выполняться без отображения ошибок, в т.ч. в консоли браузера.
Браузером для проверки основных функциональных возможностей является Mozilla Firefox Developer Edition. Однако работа приложения будет также проверена в браузере Google Chrome для проверки кроссбраузерности программы.

стартовый экран - содержит наименование игры, поле ввода своего имени, а также кнопку “Начать игру”. Имя не может быть пустым. Кнопка “Начать игру” активна, если только введено имя пользователя.
экран игры - интерфейс должен содержать:
блок с таймером - содержит таймер обратного отсчета с указанием минут, секунд в формате мм:сс. Таймер должен обновляться без перезагрузки страницы. В этом же блоке располагается кнопка “пауза” блок с заработанными баллами - количество заработанных игроком баллов за текущую игру. Обнуляется при начале новой игры.
блок с именем игрока - если игрок на стартовом экране в имени ввел “terter” то имя пользователя должно отображаться по другому, так как это “кодовое” слово для игры в тестовом режиме.
игровое поле - в зависимости от выбранной экспертами игры. Процесс игры должен включать в себя взаимодействия пользователя и компьютера и протекать без обновления страницы
экран окончания игры - содержит таблицу результатов с первыми 10 лучшими результатами. Если игрок по баллам не вошел в 10 лучших, то вместо 10 места показывается его результат с указанием места в таблице рекордов.


Модуль 1 (3 часа)

Технологии модуля: HTML5, CSS3


В данном модуле необходимо решить следующие задачи:

Разработка дизайна интерфейса игры, учитывая удобство использования интерфейса.
Верстка стартового экрана, игрового поля и экрана окончания игры
Анимация игрового поля. Участнику необходимо реализовать анимацию кнопок, а также всех интерактивных элементов игры.
Разработка анимации элементов управления

 

Модуль 2 (3 часа)

Технологии модуля: HTML5, CSS3, JavaScript, JQuery, EcmaScript 6, PHP, MySQL


Реализация логики, в состав которой должны быть включены следующие функции:

Пауза игрового процесса - останавливается время на таймере, запрещается воздействие на игровое поле, перечень элементов, для которых может сохранять анимация описывается экспертами отдельно (например, перемещение фона в режиме паузы). Режим паузы также может быть инициирован по нажатию на клавишу пробел. Возобновление игры так же возможно по нажатию на клавишу “пробел” или по нажатию на кнопку “Пауза” на игровом поле
Таймер обратного отсчета - начинает обратный отсчет с началом игры, как только доходит до значения 00:00 игра заканчивается
Таблица рекордов - показывает 10 лучших результатов игры. Если игрок не вошел в 10 лучших его результат показывает вместо 10 результата, с указанием его места в таблице рекордов.
Сохранение итоговых результатов в базу данных на стороне сервера.
Участнику предоставляется готовая структура базы данных(дамп таблицы), с которой он должен работать. Изменять структуру нельзя.
Режима теста - режим в котором таймер обратного отсчета не запускается, и игра не останавливается при взаимодействиях, которые подразумевают проигрыш или конец игры
Реализация логики работы игрового поля, например, изменение количества собранных объектов, уменьшение количества “жизней”, уменьшение оставшегося времени и т.д., а также обработка соответствующих событий - конец игры, проигрыш, выигрыш при наступлении определенных действий.

Разрешенные JS-библиотеки: jQuery, jQuery UI. JavaScript фреймворки
запрещены.

Задание второго дня ( PHP + JavaScript)


В данном задании участнику необходимо реализовать сервис по записи на услугу (кинотеатр, парикмахерская, автосервис и т.д.) Участнику дается готовый макет, который ему необходимо использовать. Использование PHP Framework по желанию участника. Также разрешено использование Jquery, Jquery UI.
HTML и CSS код должны быть валидными. Создаваемые файлы должны структурированы и содержать комментарии. PHP и JS код должен выполняться без отображения ошибок, в т.ч. в консоли браузера.
Работа будет проверяться в браузере Google Chrome.


Модуль 3 (3 часа)

Технологии модулей (3 и 4): PHP, MySQL, JavaScript, JQuery, EcmaScript 6, HTML5, CSS3, Yii2, Laravel


Необходимо реализовать указанный функционал:

Регистрация - Содержит следующие поля (все поля валидируются на стороне
клиента:
ФИО - содержит только кириллицу без цифр и знаков препинания.
E-mail - валидируется на соответствие шаблону e-mail адресов
Логин - должен быть уникальным
Пароль - должен содержать не менее 6 символов английской раскладки,
верхнего и нижнего регистра
Подтверждение пароля - должно совпадать с полем Пароль
Изображение пользователя (аватар) в указанном формате и ограничением по размеру
Кнопка Зарегистрироваться.

В случае несоответствия требованиям выводится соответствующее сообщение, поля с ошибками выделяются.

Авторизация - после авторизации простого пользователя должно отправлять в личный кабинет, а администратора в панель управления сайтом.

Логин
администратора: admin, пароль: wsr2018.

При успешной авторизации
пользователя перенаправляет на страницу просмотра своих записей на услуги.
 

Панель управления сайтом - страница доступная по адресу сайт/admin


панель управления сайтом доступна только администратору
 

Разделы пользователя:
1) Просмотр услуг с фильтром (активна, прошла, нет мест)
2) Записи на услугу
3) Просмотр своих записей на услугу
4) Отмена записи (не позднее 1 дня до срока оказания услуги)
 

Разделы администратора:
1) Добавление услуги (с указанием количества доступных для записи мест)
2) Просмотр записей на услугу
3) Удаление записей на услугу
4) Запрет удаления услуги, если на неё уже есть запись
5)Запрет записи на услугу с прошедшей датой

Модуль 4 (3 часа)

 


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

1) Пагинация страницы с услугами
2) Поиск по услугам с автодополнением (подсказки при наборе текста) слов в
поиске(ajax)
3) Импорт данных об услугах из XML файла - участнику предоставляется файл, ему необходимо написать страницу для его импорта на сайт.
4) Улучшение дизайна, учитывая целевую аудиторию
5) Создание логотипа с учетом указанной целевой аудитории


Разрешенные PHP-фреймворки: Yii2 (basic), Laravel 5

Задание третьего дня (Wordpress)
Участнику необходимо установить CMS (Wordpress), настроить её и доработать согласно заданию. Участнику дается архив с CMS, а также набор плагинов, шаблонов, текстов и картинок.


Модуль 5 (3 часа)

Технологии модуля: WordPress


В данном модуле необходимо:

1) произвести установку CMS.
2) Настроить её согласно предоставленным данным о компании.
3) Заполнить информацией - предоставленной, но разрешается дописывать информацию для создания целостности восприятия сайта.
4) установить плагины: галерея, обратная связь
5) установить шаблон - один из предоставленных.

Разрешается изменять шаблон, добавлять (удалять) картинки и блоки для создания лучшего восприятия сайта

WSR 2018

День 1. Модуль RESTful API

Технологии модуля: PHP, RESTful API, Yii2, Laravel, MySQL

 

 
Введение


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

От вас требуется написать RESTful API для интернет-магазина, всем остальным будет заниматься другие разработчики из вашей команды.

Функционал интернет магазина будет разделен на две роли:

●      администратор

●      гость

 

Функциональные возможности гостя:

●      авторизация

●      просмотр записей товаров и комментариев

●      комментирование записей товаров

●      поиск записей по тегу

 

Функциональные возможности администратора включают в себя функциональные возможности гостя, а также:

●      создание, редактирование и удаление товаров на сайте

●      удаление комментариев к записям товаров

 

Данное задание состоит из одного модуля и рассчитано на 3 часа. Распределите свое время таким образом, чтобы успеть выполнить все поставленные задачи.

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

API авторизации должен быть доступен POST-запросом на адрес {API}/auth, а также принимать следующие обязательные параметры:

●      login
логин администратора

●      password
пароль администратора

 

При успешной авторизации должен возвращаться ответ в следующем виде:

●      status code: 200

●      status text: Successful authorization

●      body:

○      status
true

○      token
bearer-токен для использования API администратора

 

При безуспешной авторизации или ошибке в запросе должен возвращаться ответ в следующем виде:

●      status code: 401

●      status text: Invalid authorization data

●      body:

○      status
false

○      message
Invalid authorization data

 

API создания товара должен быть доступен только администратору POST-запросом на адрес {API}/product, а также принимать следующие обязательные параметры:

●      title
название товара, не пустой, уникальный

●      manufacturer
производитель товара, не пустой

●      text
Полный текст описание товара, не пустой

●      tags
тэги товара через запятую, не обязательное поле

●      image
изображение товара, не пустой, разрешенные форматы: jpg, png. Максимальный размер: 2 мегабайта

 

При успешном создании товара должен возвращаться ответ в следующем виде:

●      status code: 201

●      status text: Successful creation

●      body:

○      status
true

○      post_id
уникальный идентификатор товара

 

После создания товара изображение должно загружаться на сервер в папку {API}/product _images.

 

При безуспешном добавлении товара должен возвращаться ответ в следующем виде:

●      status code: 400

●      status text: Creating error

●      body:

○      status
false

○      message
ассоциативный массив из параметров, которые содержат ошибку. В значении должно быть описание ошибки

 

Пример ответа при безуспешном добавлении товара:

{

      “status”: false,

      “message”: {

            “title”: “already exists”,

            “image”: “invalid file format”

}

}

 

 

 

 

API редактирования товара должен быть доступен только администратору POST-запросом на адрес {API}/product/< PRODUCT_ID>, а также принимать следующие параметры:

●      title
название товара, уникальный

●      manufacturer
производитель товара

●      text
полный текст описания товара

●      tags
тэги товара через запятую

●      image 
изображение товара, разрешенные форматы: jpg, png. Максимальный размер: 2 мегабайта

 

При успешном редактировании товара должен возвращаться ответ в следующем виде:

●      status code: 201

●      status text: Successful creation

●      body:

○      status
true

○      post

■      title
название товара

■      datatime
дата и время создания товара в формате чч:мм дд.мм.гггг (12:35 06.08.2018)

■      manufacturer
производитель товара

■      text
полный текст описания товара

■      tags
массив из тэгов товара ([“tag1”, “tag2”])

■      image
ссылка на изображение товара

 

При безуспешном добавлении товара должен возвращаться ответ в следующем виде:

●      status code: 400

●      status text: Editing error

●      body:

○      status
false

○      message
ассоциативный массив из параметров, которые содержат ошибку. В значении должно быть описание ошибки

 

При попытке редактирования несуществующего товара должен возвращаться ответ в следующем виде:

●      status code: 404

●      status text: Product not found

●      body:

○      message
Product not found

 

API удаления товара должен быть доступен только администратору DELETE-запросом на адрес {API}/product/<PRODUCT_ID>.

 

При успешном удалении товара должен возвращаться ответ в следующем виде:

●      status code: 201

●      status text: Successful delete

●      body:

○      status
true

 

При попытке удаления несуществующего товара должен возвращаться ответ в следующем виде:

●      status code: 404

●      status text: Product not found

●      body:

○      message
Product not found

 

API просмотра товаров интернет магазина должен быть доступен GET-запросом на адрес {API}/product. Ответ должен содержать массив объектов товаров, содержащие следующие параметры:

●      title
название товара

●      datatime
дата и время создания товара в формате чч:мм дд.мм.гггг (12:35 06.08.2018)

●      manufacturer
производитель товара

●      text
полный текст описания товара

●      tags
массив из тэгов товара ([“tag1”, “tag2”])

●      image
ссылка на изображение товара

Ответ должен иметь status code “200” и status text “List products”.

 

API просмотра одной записи товара должен быть доступен GET-запросом на адрес {API}/ product/<PRODUCT_ID>.

 

Ответ должен содержать следующие параметры:

●      title
название товара

●      datatime
дата и время создания товара в формате чч:мм дд.мм.гггг (12:35 06.08.2018)

●      manufacturer
производитель товара

●      text
полный текст описания товара

●      tags
массив из тэгов товара ([“tag1”, “tag2”])

●      image
ссылка на изображение товара

●      comments
массив из объектов комментариев содержащие следующие параметры:

○      comment_id
уникальный идентификатор комментария

○      datatime
дата и время в формате чч:мм дд.мм.гггг (12:35 06.08.2018)

○      author
имя автора, если автором комментария является администратор, то параметр содержит текст “admin”

○      comment
текст комментария

Ответ должен иметь status code “200” и status text “View product”.

 

При попытке просмотра несуществующего товара должен возвращаться ответ в следующем виде:

●      status code: 404

●      status text: Product not found

●      body:

○      message
Product not found

 

API добавления комментария к посту должен быть доступен POST-запросом на адрес {API}/product/<PRODUCT_ID>/comments и содержать следующие обязательные параметры:

●      author
имя комментатора, обязательное только для гостя

●      comment
обязательное, максимум 255 символов

 

При успешном добавлении комментария должен возвращаться ответ в следующем виде:

●      status code: 201

●      status text: Successful creation

●      body:

○      status
true

 

При безуспешном добавлении комментария должен возвращаться ответ в следующем виде:

●      status code: 400

●      status text: Creating error

●      body:

○      status
false

○      message
ассоциативный массив из параметров, которые содержат ошибку. В значении должно быть описание ошибки

 

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

●      status code: 404

●      status text: Product not found

●      body:

○      message
Product not found

 

API удаления комментария к товару должен быть доступен только администратору DELETE-запросом на адрес {API}/product/<PRODUCT_ID>/comments/<COMMENT_ID>.

При успешном удалении комментария должен возвращаться ответ в следующем виде:

●      status code: 201

●      status text: Successful delete

●      body:

○      status
true

При попытке удаления комментария к несуществующему товару должен возвращаться ответ в следующем виде:

●      status code: 404

●      status text: Product not found

●      body:

○      message
Product not found

При попытке удаления несуществующего комментария должен возвращаться ответ в следующем виде:

●      status code: 404

●      status text: Comment not found

●      body:

○      message
Comment not found

 

API поиска товаров по тегу должен быть доступен GET-запросом на адрес {API}/product/tag/<TAG_NAME>.

В ответ должен возвращаться ответ в следующем виде:

●      status code: 200

●      status text: Found product

●      body
массив из объектов товаров, содержащие данный тэг:

○      title
название товара

○      datatime
дата и время создания товара в формате чч:мм дд.мм.гггг (12:35 06.10.2018)

○      manufacturer
производитель товара

○      text
полный текст описания товара

○      tags
массив из тэгов товара ([“tag1”, “tag2”])

○      image
ссылка на изображение товара

 

Авторизация пользователя при использовании административных функциональных возможностей будет проверяться через bearer-token авторизацию. Т.е. к каждому такому запросу в headers будет дописываться bearer-token:

Authorization: Bearer xxxxxxxx

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

●      status code: 401

●      status text: Unauthorized

●      body:

○      message
Unauthorized

 

Под {API} подразумевается адрес http://xxx-m1.wsr.ru/api, где xxx - ваш логин.

Логин администратора admin, пароль - kemerovo2018.

 

 

ИНСТРУКЦИЯ ДЛЯ КОНКУРСАНТА

Готовая система должна быть доступна по адресу: http://xxxxxx-m1.wsr.ru/

Вам доступны фреймворки Yii2 и Laravel для работы с этим модулем.

Все ответы должны приходить в JSON формате.

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

День 1. Разработка на стороне клиента

Модуль 2

Технологии модуля: HTML5, CSS3, JavaScript, EcmaScript 6, JQuery, PHP, MySQL, Граф. дизайн

 


Данный тестовый проект состоит из следующих файлов:

Задание.doc
media.zip – Медиа файлы


Введение


В последние годы Интернет стал неотъемлемой частью нашей повседневной жизни. Использование игр приобрело заметную роль в этой вселенной, позволяя миллионам людей получать доступ к развлечениям быстро и бесплатно.

Наш заказчик сделал срочный заказ: необходимо разработать игру и воплотить желание заказчика в реальность! Все что вам необходимо – это реализовать логику игры.

Название игры: Враждебная эра

 

Время модуля: 3 часа

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

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


В игре используются элементы, описанные ниже:

Рыцарь: элемент, который контролируется игроком.
Монстры: элементы, которые необходимо уничтожить игроку.
Шкала жизней (HP): шкала, отражающая запас жизненной энергии игрока.
Шкала энергии (MP): шкала, отражающая запас магической энергии игрока.
Имя игрока: имя игрока, которое он ввел на стартовом экране.
Убийства: количество убитых монстров.
Панель умений: умения, которые может использовать игрок, для сражения с монстрами.
 

Игра должна начинаться со стартового экрана с инструкцией к игре, полем для ввода имени игрока и кнопкой "Начать", если поле имени пустое, то кнопка не активна. Инструкция к игре должна быть представлена анимировано.

 

Игровой функционал:

По нажатию на кнопку "Начать игру" игрок попадает на экран игры. Изначально у игрока 0 очков, 100 HP и 100 MP, таймер 00:00 (в формате mm:ss).
В начале игры запускается таймер, персонаж располагается в левой стороне игрового поля, что является начальной границей карты.
Игрок может передвигаться с помощью клавиш (→, ← и ↑): направо, налево и прыжок вверх. Когда игрок находится в левой половине видимой части экрана фон не передвигается, а «замирает». Когда игрок доходит центральной точки он остается в центральной части экрана, происходит анимация его передвижения, а фон, в свою очередь, начинает «прокручиваться». При этом, когда фон достигает конца, игрок должен передвигаться в правую часть экрана.
По мере прохождения игры на игрока нападают монстры, которые случайно генерируются в видимой части игрового поля и движутся справа налево. Игра заканчивается, как только игрок доходит до конца карты и достигает правого местоположения или происходит смерть рыцаря, а таймер останавливается.
За каждого убитого монстра дается 1 очко, после убитого монстра может остаться порция здоровья (10 единиц).
Если жизни игрока кончаются (0HP), то игра заканчивается.
Жизни игрока (HP) восстанавливается, благодаря магии лечения и подобранным бутылкам ХР.
Энергия игрока (MP) регенерируется со скоростью 5MP/с.
Игрок может использовать умения. Каждое умение тратит какое-то количество MP и имеет время перезарядки. Вот список умений:
 

Удар мечом.

Описание: Игрок делает удар мечом, нанося урон монстрам перед собой.
Клавиша активации: q.
Время перезарядки: 0 сек.
Количество потребляемой MP: 0.
Урон: 15 ед.

 

Щит.

Описание: Игрок выставляет щит перед собой. Щит блокирует весь урон. Монстры не могут пройти за щит.
Клавиша активации: w.
Время перезарядки: 0 сек.
Количество потребляемой MP: 5.

 

Трио мечей.

Описание: Игрок выпускает три меча перед собой. Мечи летят, нанося 40 единиц урона всем монстрам на своем пути.
Клавиша активации: e.
Время перезарядки: 3 сек.
Количество потребляемой MP: 10.
Урон: 40 ед.

 

Дождь из мечей.

Описание: в радиусе нескольких метров от игрока на землю обрушивается дождь мечей уничтожая всех, кто был в данном радиусе.
Клавиша активации: r.
Время перезарядки: 15 сек.
Количество потребляемой MP: 30.
Урон: 100 ед.

 

 

При нажатии на кнопку ESC игра ставится на паузу, а при повторном нажатии - снимается с паузы. Во время паузы останавливаются все интерактивные действия, а также вся анимация, таймер тоже замирает, умениями пользоваться нельзя, игрок и монстры не двигаются.
При ударе мечом урон наносится один раз каждому монстру, который находится в зоне поражения мечом, т.е. если перед игроком находится один монстр, то он получит 15 ед. урона, а если 3 монстра, то каждый из них получит по 15 ед. урона.
Монстры должны следовать за игроком, кроме волка, которого игрок может перепрыгнуть. Если игрок пробежал монстров, то они должны развернуться и следовать за ним.
Когда игрок идет обратно, он поворачивается в обратную сторону.
Каждый из монстров имеет свою скорость атаки и скорость движения, которая не превышает скорость движения игрока. На экране не должно находиться более 5 монстров. Вот описания монстров:


Волк - наносит 5 ед урона, имеет 15HP

Друид - наносит 10 ед урона, имеет 30HP

Кентавр - наносит 20ед урона, имеет 60HP

Ваша игра должна работать без отображения JavaScript ошибок или сообщений в консоли браузера.
Ваш HTML/CSS и JavaScript код должен быть организован и понятным. Используйте корректные наименования переменных, методов и не забывайте оставлять комментарии для дальнейшей поддержки в будущем.
После завершения игры результаты должны быть сохранены на сервере и показана таблица с рейтингом.
Вам дан PHP файл, который сохраняет данные в базу данных и возвращает массив с результатами. Используйте этот файл для сохранения результатов и получения данных для рейтинга. В этом файле можно изменять только данные доступа к базе данных (логин, пароль, имя базы данных). Этот файл принимает следующий AJAX запрос:
метод: POST
username - имя пользователя
score - количество убитых монстров
time – время игры
 

В ответ возвращается массив с данными:

[

    {"id":"1","username":"Player 1","score":"10","time":"20"},
{"id":"2","username":"Player 2","score":"8","time":"30"}

]

 

После завершения игры открывается экран результатов, в котором формируется таблица с лучшими 10 игроками, если игрок не вошел в таблицу, то выводятся 9 лучших игроков, а в последней строке указывается место и результат игрока только что завершившего игру.
Данные в таблице должны быть отсортированы по количеству убитых монстров по убыванию. Если несколько строк имеют одинаковое количество убитых монстров, то они сортируются между собой по времени по возрастанию. Если несколько строк имеют одинаковое количество убитых монстров и одинаковое время, то они занимают одинаковую позицию в рейтинге.
На экране результатов должна быть кнопка «Играть сначала», которая позволяет начать игру с начала, первый экран не отображается.
Проявите все свои навыки для создания качественной игры с анимацией и интерактивностью.

День 2. Разработка на стороне клиента

Технологии модуля: HTML5, CSS3, JavaScript, Vue.js, JQuery, JQuery UI, PHP, React.js, Граф. Дизайн, EcmaScript 6, MySQL

 

Данный тестовый проект состоит из следующих файлов:

Задание.pdf

media.zip – Медиа файлы

 

Введение


В наше время автоматизация и информатизация плотно вошли в жизнь каждого. Появляется все больше и больше гаджетов, в том числе для дома. И чем их больше, тем сложнее их контролировать.

Вам предстоит решить данную проблему, разработав интерфейс системы умный зимний сад «Smart Winter Garden».

Система должна быть адаптивная, открываться на телефоне, планшете и компьютере без проблем. Мы повседневно пользуемся множеством гаджетов в своих домах. Поэтому приложение должно быть удобным и продуманным, чтобы пользователь хотел им пользоваться.

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

Данное задание рассчитано на 6 часов и состоит из 2-х частей модуля по 3 часа. Распределите свое время таким образом, чтобы успеть выполнить все поставленные задачи.

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

 

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


Ваша задача – разработать дизайн приложения, которым удобно пользоваться на на планшетах с разрешением 1024х1366px.

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

●       Мобильные телефоны с разрешением 375x812px (IPhone X);

●       Планшеты с разрешением 1024х1366px (IPad Pro);

●       Компьютеры с шириной экрана от 1600px.

В приложении должны быть реализованы следующие экраны:

●       Экран авторизации

o  Поле для ввода логина;

o  Поле для ввода пароля;

o  Кнопка входа.

 

●       Домашний экран

o  Доступные зоны: пальмы, кактусы, орхидеи. Каждая зона должна иметь название и изображение;

o  Избранные устройства и датчики. - убрать

 

 

●       Экраны зоны пальм, кактусов и орхидей

o  Название зоны;

o  Изображение растения.

o  Устройства и датчики зоны.

 

●       Экран устройств и датчиков

o  Все устройства и датчики. Каждое устройство должно отражать свое состояние, а датчик показывать свое значение. Все устройства и датчики должны иметь название.

o  Кнопка редактирования устройства

 

●       Экран редактирования устройства

o  Выпадающий список для выбора устройства.

o  Поле для ввода значения устройства.

o  Кнопка для редактирования устройства.

 

●       Экран макросов:

o  Кнопка создания нового макроса;

o  Уже имеющиеся макросы, с названиями и возможностью удаления;

o  У каждого макроса должны быть указаны устройства, для которых они предназначены, а также значения, указанные для устройства.

o  У каждого макроса должна быть кнопка активации/деактивации макроса.

 

●       Экран создания макроса:

o  Поле для ввода названия макроса.

o  Выпадающий список для выбора устройства №1.

o  Выпадающий список для выбора значения устройства №1.

o  Выпадающий список для выбора устройства №2.

o  Выпадающий список для выбора значения устройства №2.

o  Кнопка создания макроса.

                           

 

ПЕРВЫЕ 3 ЧАСА

За первые 3 часа вам необходимо разработать дизайн и сверстать нарисованные экраны.

Сохраните разработанные дизайны в директорию design под следующими именами:

●       Экран авторизации – tablet _login.png

●       Домашний экран – tablet _home.png

●       Экран зон пальм, кактусов, орхидей – tablet _zone_palms.png ,tablet _zone_cacti.png , tablet _zone_orchids.png

●       Экран устройств и датчиков – tablet _devices.png

●       Экран макросов – tablet _macros.png

 


Сохраните все исходные файлы, если имеются, в директорию sources в папке design. Под исходными файлами понимаются файлы с разрешениями .ai, .psd, .eps и т.п.

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

●    Экран авторизации – tablet _login_2.png, …, tablet _login_N.png

●    Домашний экран – tablet _home_2.png, …, tablet _home_N.png

●    Экран зон пальм, кактусов, орхидей – tablet _zone_palms_2.png, …, tablet _zone_palms_N.png , tablet _zone_cacti_2.png, …, tablet _zone_cacti_N.png, tablet _zone_orchids_2.png, … tablet _zone_orchids_N.png

●    Экран устройств и датчиков – tablet _devices_2.png, …, tablet _devices_N.png

●    Экран макросов – table t_macros_2.png, …, tablet _macros_N.png

 

ПОСЛЕДНИЕ 3 ЧАСА

 

Во второй части вам необходимо разработать веб-интерфейс приложения «Smart Winter Garden», которое отражает состояние системы.

 

В умном зимнем саде поддерживаются следующие виды устройств:

 

Наименование устройства Состояния
Освещение on/off
Полив on/off
Термостат от +5 до +18


Форма на экране авторизации должна отображать ошибки валидации.

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

 


Ваш HTML/CSS и JavaScript код должен быть организован и понятным. Используйте корректные наименования переменных, методов и не забывайте оставлять комментарии для дальнейшей поддержки в будущем.

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

 

ИНСТРУКЦИЯ ДЛЯ КОНКУРСАНТА

Готовая система должна быть доступна по адресу: http://xxxxxx-m3.wsr.ru/

Оценка будет производиться при помощи браузера Google Chrome с использованием Device Toolbar.

День 3. Разработка на CMS Wordpress 

Время: 5 часов

Технологии модуля: WordPress, HTML5, CSS3, Bootstrap 4, PHP, Git и GitHub

 

Данный тестовый проект состоит из следующих файлов:

1.   Задание.pdf

2.   media.zip – Медиа файлы

 

Введение


Покупки в интернете - это неотъемлемая часть жизни современного человека, миллионы людей покупают в интернете все, что только можно придумать, и наш заказчик – сеть магазинов «Дары Сибири» решил начать продажу своей продукции через интернет. Правда, один из друзей заказчика сказал ему, что делать сайт лучше на WordPress. Желание заказчика – закон!

Сеть магазинов «Дары Сибири» на сегодняшний день – это одно из ведущих предприятий Кемеровской области.

Сеть магазинов «Дары Сибири» - новый этап в истории компании. Он стал продолжением сети салонов, расположенных по всему Кузбассу. Сайт разработан с учётом всех пожеланий и потребностей постоянных клиентов. Выбрать и купить продукцию в интернет-магазине «Дары Сибири» легко. Мы позаботились о вашем удобстве и продумали каждый шаг.

 

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

Ваша задача разработать интернет-магазин для сети магазинов «Дары Сибири» с помощью WordPress.

CMS WordPress можно получить через репозиторий – GIT. И не забудьте сделать commit выполненной работы в репозиторий.

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

1.   Доступ к сайту происходит по адресу http://xxxxxx-m4.wsr.ru/ где xxxxxxxxx = код участника

2.   Чтобы обеспечить последующее администрирование и управление данными веб-сайта, используйте эту информацию для доступа к области администрирования WordPress:

2.1.  Логин: Admin

2.2.  Пароль: admin

3.   На сайте  интернет-магазина «Дары Сибири» должны быть представлены заданные разделы и содержание. Главное меню должно быть зафиксировано в верхней части веб-страницы. Для показа контента будет использована прокрутка.

3.1.  Разделы в главном меню:

3.1.1.    Главная

·    Текст и изображения, дающие представление о деятельности компании

3.1.2.                О компании

o   Текст и изображения, дающие представление о вакансиях и акциях

3.1.3.                Напишите нам

·    Представлена форма для отправки сообщения с полями:

o   Имя:

o   Адрес электронной почты:

o   Номер телефона:

o   Способ получения сообщений: почта, SMS, WhatsApp сообщение;

o   Сообщение:

3.1.4.  Новости

·    Каждая новость содержит: текст, изображение, дату публикации.

·    На странице должно выводится не более 4 новостей. Если новостей больше, должна выводится пагинация.

·    Дата публикации не должна совпадать для всех новостей.

3.1.5.  Каталог

·    Каталог товаров разделен на группы: Кедровая продукция, Мёд, Варенье, Ягоды, Грибы, Сибирские сувениры и Подарочные наборы. Все категории должны содержать хотя бы один соответствующий товар.

·    Каждый товар должен содержать изображение, название, стоимость и информацию о наличии.

·    Товар можно добавить в корзину и заказать. Сформированный заказ должен быть доступен через панель управления.

3.2.     Блок в нижней части страницы (колонтитул)

·    Сеть магазинов «Дары Сибири» © Copyright, 2018

·    Ссылка на условия использования интернет-магазина

·    Используя плагин, добавить ссылки на социальные сети:

o   Facebook - http://www.facebook.com

o   Twitter - http://www.twitter.com

o   YouTube - http://www.youtube.com

 

4.   Разработайте плагин, который реализует указанный функционал:

·       Создание формы обратной связи на выбранной странице с помощью шорткода;

·       Обработку и валидацию данных, которые отправляет пользователь через эту форму.

·       Пользователь может вводить номер телефона в любом формате, используя дополнительные символы, но в панели администратора номер отображается только в виде цифр.

·       Способ получения сообщений предполагает множественный выбор:

o    почта

o    SMS

o    WhatsApp сообщение

·       Все поля формы должны быть заполнены.

·       Отправленные сообщения с формы должны быть доступны через панель управления для просмотра и удаления;

·       Плагин должен размещаться в сайдбаре;

·       После отправки сообщения должно отобразиться уведомление о статусе отправки.

 

5.   В директории media лежат файлы для выполнения задачи, а именно:

·       Плагины WordPress

·       Текст контента и изображения для использования на сайте

 

6.   Необходимо разработать собственную тему интернет-магазина и разместить ее под именем Siberia. Допускается использование стандартной темы WordPress и Bootstrap. Ваша тема должна быть адаптирована под мобильные устройства и корректно отображать все функции и модули интернет магазина.

7.   Чтобы улучшить результаты в поисковых системах, установите и настройте один плагин для SEO на своем веб-сайте.

8.   Для проверки статистики доступа, установите и настройте плагин для подключения к Google Analytics. Использовать идентификатор UA-3334438812-2.

9.   HTML и CSS-код должны быть удовлетворять стандартам W3C (HTML 5 и CSS 3).

10. Логотип WordPress на странице входа на страницу администрирования должен быть заменён на логотип сети магазинов «Дары Сибири».

 

Инструкции для участника испытания
 

Участнику предоставляются медиафайлы в каталоге «media». Вы можете изменить предоставленные файлы, чтобы быть уверенным в том, что сайт выполняет свою задачу.

WSR 2018 Juniors

День 1. Разработка блога

 

Данный тестовый проект состоит из следующих файлов:

1.   Задание.pdf

2.   media.zip – Медиа файлы для разработки блога

 

Введение


К вам обратился путешественник с просьбой вступить в команду, которая разрабатывает для него блог. Его работа очень интересная и увлекательная. Он хочет рассказать о ней всей России.

 

Технологии модуля: PHP, Yii2, Laravel, JavaScript, JQuery, EcmaScript 6

Время модуля: 2 часа

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

Функционал блога будет разделен на две роли:

●      администратор

●      гость

 

Функциональные возможности гостя:

●      авторизация

●      просмотр списка записей блога

●      просмотр отдельного поста

●      поиск записей по тегу

Функциональные возможности администратора включает в себя функциональные возможности гостя, а также:

●      создание, просмотр, редактирование и удаление записей блога

●      выход из профиля

 

Для авторизации администратора нужно ввести следующие данные:

●      логин администратора, не пустой

●      пароль администратора, не пустой

При успешной авторизации функционал администратора становится доступным.

При неудачной авторизации или ошибке выводится соответствующее сообщение (не alert).

 

Создание постов должно быть доступно только администратору. Пост должен содержать поля:

●      название поста, не пустой, уникальный

●      текст поста, не пустой

●      тэги поста через запятую, не обязательное поле

●      изображение поста, не пустой, разрешенные форматы: jpg, png. Максимальный размер: 2 мегабайта

При успешном создании он должен отображаться в списке опубликованных постов.

После создания поста изображение должно загружаться на сервер в папку post_images в корне сайта.

При безуспешном добавлении поста или ошибке выводится соответствующее сообщение.

 

Редактирование постов должно быть доступно только администратору. Поля, доступные для редактирования:

●      название поста, не пустой, уникальный

●      текст поста, не пустой

●      тэги поста через запятую, не обязательное поле

●      изображение поста, не пустой, разрешенные форматы: jpg, png. Максимальный размер: 2 мегабайта

При безуспешном редактировании поста или ошибке выводится соответствующее сообщение.

 

Удаление поста должно быть доступно только администратору.

 

Просмотр записей блога в виде списка доступен на главной странице. Каждая запись содержит название и изображение.

Просмотр поста осуществляется при клике по заголовку на отдельной странице с выводом полной информации.

Поиск осуществляется по тегу с выводом результатов в виде списка. Каждая запись содержит название и изображение.

Сайт должен быть доступен по адресу http://xxx-m1.wsr.ru, где xxx - ваш логин.

Логин администратора admin, пароль - kemerovo2018

День 1. Разработка на стороне клиента

 

Данный тестовый проект состоит из следующих файлов:

1.   Задание.pdf

2.   media.zip – Медиа файлы

 

Введение


В последние годы Интернет стал неотъемлемой частью нашей повседневной жизни. Использование игр приобрело заметную роль в этой вселенной, позволяя миллионам людей получать доступ к развлечениям быстро и бесплатно.

Наш заказчик сделал срочный заказ: необходимо разработать игру и воплотить желание заказчика в реальность! Все что вам необходимо – это реализовать логику игры.

Название игры: Ад Данте.

Технологии модуля: HTML 5, CSS3, JavaScript, jQuery, Граф. дизайн, PHP, MySQL, EcmaScript 6

Время модуля: 2 часа

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

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


В игре используются элементы, описанные ниже:

1.   Рыцарь: элемент, который контролируется игроком.

2.   Монстры: элементы, которые необходимо уничтожить игроку.

3.   Шкала жизней (HP): шкала, отражающая запас жизненной энергии игрока.

4.   Имя игрока: имя игрока, которое он ввел на стартовом экране.

5.   Убийства: количество убитых монстров.

 

Игра должна начинаться со стартового экрана с полем для ввода имени игрока и кнопкой "Начать", если поле имени пустое, то кнопка не активна.

 

Игровой функционал:

1.      По нажатию на кнопку "Начать" игрок попадает на экран игры. Изначально у игрока 0 очков, 100 HP, таймер 00:00 (в формате mm:ss).

2.      В начале игры запускается таймер, персонаж располагается в центре игрового поля.

3.      Игрок может передвигаться с помощью клавиш-стрелок: налево и направо. Во время движения игрока, игровой фон должен «прокручиваться».

4.      По мере прохождения игры на игрока нападают монстры, которые случайно генерируются в видимой части игрового поля и движутся справа налево.

5.      Игра заканчивается и таймер останавливается, как только игрок доходит до конца карты или погибает.

6.      За каждого убитого монстра дается 1 очко.

7.      Если жизни игрока кончаются (0HP), то игра заканчивается.

8.      Жизни игрока (HP) регенерируются со скоростью 2HP/с.

9.      Игрок может наносить удары по монстру мечом при нажатии на клавишу 1. При ударе монстр умирает

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

11.    Когда игрок идет обратно, он поворачивается в обратную сторону.

12.    Монстры имеют свою скорость атаки и скорость движения, которая не превышает скорость движения игрока. Вы можете выбрать одного монстра. На экране не должно находиться более 6 монстров. Вот описание монстров:

 


Медуза - наносит 5ед урона, имеет 15HP

Минотавр - наносит 6ед урона, имеет 20HP

Орк - наносит 4ед урона, имеет 10HP

 


13.    Ваша игра должна работать без отображения JavaScript ошибок или сообщений в консоли браузера.

14.    Ваш HTML/CSS и JavaScript код должен быть организован и понятным. Используйте корректные наименования переменных, методов и не забывайте оставлять комментарии для дальнейшей поддержки в будущем.

15.    После завершения игры результаты должны быть сохранены на сервере и показана таблица с рейтингом.

16.    Вам дан PHP файл, который сохраняет данные в базу данных и возвращает массив с результатами. Используйте этот файл для сохранения результатов и получения данных для рейтинга. В этом файле можно изменять только данные доступа к базе данных (логин, пароль, имя базы данных). Этот файл принимает следующий AJAX запрос:

·       метод: POST

·       username - имя пользователя

·       score - количество убитых монстров

·       time – время игры

 

В ответ возвращается массив с данными:

[

    {"id":"1","username":"Player 1","score":"10","time":"20"},
{"id":"2","username":"Player 2","score":"8","time":"30"}

]

 

17.    После завершения игры открывается экран результатов, в котором формируется таблица с лучшими 10 игроками, а также результат текущего игрока (не в таблице).

18.    На экране результатов должна быть кнопка «Играть сначала», которая позволяет начать игру с начала, первый экран не отображается.

Проявите все свои навыки для создания качественной игры, с анимацией и интерактивностью.

 

ИНСТРУКЦИЯ ДЛЯ КОНКУРСАНТА

Игра должна быть доступна по адресу: http://xxxxxx-m2.wsr.ru

Оценка будет производиться при помощи браузера Google Chrome.

День 2. Разработка на стороне клиента

 

Данный тестовый проект состоит из следующих файлов:

Задание.pdf

media.zip – Медиа файлы

 

Введение


В наше время автоматизация и информатизация плотно вошли в жизнь каждого. Появляется все больше и больше гаджетов, в том числе для дома. И чем их больше, тем сложнее их контролировать.

Вам предстоит решить данную проблему, разработав интерфейс системы умный зимний сад «Smart Winter Garden».

Система должна быть адаптивная, открываться на телефоне, планшете и компьютере без проблем. Мы повседневно пользуемся множеством гаджетов в своих домах. Поэтому приложение должно быть удобным и продуманным, чтобы пользователь хотел им пользоваться.

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

Технологии модуля: HTML5, CSS3, JavaScript, Vue.js, JQuery, JQuery UI, PHP, React.js, Граф. Дизайн, MySQL, EcmaScript 6

Данное задание рассчитано на 6 часов и состоит из 2-х частей модуля по 3 часа. Распределите свое время таким образом, чтобы успеть выполнить все поставленные задачи.

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

 

Легенда
 

В умном зимнем саду произошла поломка… Сломалось приложение, которое регулировало устройства и датчики в зонах с растениями. У термостатов и устройств сбились настройки и теперь температура неправильная, где-то идет полив, который не нужен, где-то отключилось освещение. Есть 3 зоны: Зона пальм, зона кактусов и зона орхидей. В каждой зоне есть 3 растения.

Зона пальм.

Пальма Ливистона – Ей требуется освещение, нужен полив, а температура зимой желательна +16°С.

Пальма Архонтофеникс Александра – Ей нужен полив, требуется освещение, зимой температура должна быть +16°С.

Пальма Гиофорба – Нуждается в освещении, в поливе, и температуре +18°С зимой.

Зона кактусов.

Кактус Опунция артикулата – Необходимо освещение, полив зимой не нужен, температура должна быть от +5°С до +10°С.

Кактус Цефалоцереус – Нужно освещение, не нужен полив зимой, температура желательная +10°С зимой.

Кактус Харрисия – Необходим полив, освещение, температура должна быть +15°С зимой.

Зоны орхидей.

Орхидея Одонтоглоссум – Нужен полив, освещение и температура зимой +16°С.

Орхидея Целогина – Нуждается в поливе, в освещении, температуре +15°С зимой.

Орхидея Мильтония – Нужно освещение, полив, температура +17°С зимой.

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

 

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


Ваша задача – разработать дизайн приложения, которым удобно пользоваться на на планшетах с разрешением 1024х1366px.

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

●       Мобильные телефоны с разрешением 375x812px (IPhone X);

●       Планшеты с разрешением 1024х1366px (IPad Pro);

●       Компьютеры с шириной экрана от 1600px.

В приложении должны быть реализованы следующие экраны:

●       Экран авторизации

o  Поле для ввода логина;

o  Поле для ввода пароля;

o  Кнопка входа.

 

●       Домашний экран

o  Доступные зоны: пальмы, кактусы, орхидеи. Каждая зона должна иметь название и изображение;

 

●       Экраны зоны пальм, кактусов и орхидей

o  Название зоны;

o  Изображение растения.

o  Устройства и датчики зоны.

 

●       Экран устройств и датчиков

o  Все устройства и датчики. Каждое устройство должно отражать свое состояние, а датчик показывать свое значение. Все устройства и датчики должны иметь название.

o  Кнопка редактирования устройства

 

●       Экран редактирования устройства

o  Выпадающий список для выбора устройства.

o  Поле/выпадающий список для ввода/выбора значения устройства.

o  Кнопка для редактирования устройства.

                           

 

ПЕРВЫЕ 3 ЧАСА

За первые 3 часа вам необходимо разработать дизайн и сверстать нарисованные экраны.

Сохраните разработанные дизайны в директорию design под следующими именами:

●       Экран авторизации – tablet _login.png

●       Домашний экран – tablet _home.png

●       Экран зон пальм, кактусов, орхидей – tablet _zone_palms.png ,tablet _zone_cacti.png , tablet _zone_orchids.png

●       Экран устройств и датчиков – tablet _devices.png

 

Сохраните все исходные файлы, если имеются, в директорию sources в папке design. Под исходными файлами понимаются файлы с разрешениями .ai, .psd, .eps и т.п.

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

●    Экран авторизации – tablet _login_2.png, …, tablet _login_N.png

●    Домашний экран – tablet _home_2.png, …, tablet _home_N.png

●    Экран зон пальм, кактусов, орхидей – tablet _zone_palms_2.png, …, tablet _zone_palms_N.png , tablet _zone_cacti_2.png, …, tablet _zone_cacti_N.png, tablet _zone_orchids_2.png, … tablet _zone_orchids_N.png

●    Экран устройств и датчиков – tablet _devices_2.png, …, tablet _devices_N.png

 

ПОСЛЕДНИЕ 3 ЧАСА

 

Во второй части вам необходимо разработать веб-интерфейс приложения «Smart Winter Garden», которое отражает состояние системы.

 

В умном зимнем саде поддерживаются следующие виды устройств:

 

Наименование устройства Состояния
Освещение on/off
Полив on/off
Термостат от +5 до +18

 

Форма на экране авторизации должна отображать ошибки валидации.

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

Ваш HTML/CSS и JavaScript код должен быть организован и понятным. Используйте корректные наименования переменных, методов и не забывайте оставлять комментарии для дальнейшей поддержки в будущем.

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

ИНСТРУКЦИЯ ДЛЯ КОНКУРСАНТА

Готовая система должна быть доступна по адресу: http://xxxxxx-m3.wsr.ru/

Оценка будет производиться при помощи браузера Google Chrome с использованием Device Toolbar.

День 3. Разработка на CMS Wordpress

Время: 4 часа

Технологии модуля: WordPress, HTML5, CSS3, Bootstrap 4, PHP, Git и GitHub

 

Данный тестовый проект состоит из следующих файлов:

1.   Задание.pdf

2.   media.zip – Медиа файлы

 

Введение


Покупки в интернете - это неотъемлемая часть жизни современного человека, миллионы людей покупают в интернете все, что только можно придумать, и наш заказчик – ООО «Дары Сибири» решил начать продажу товаров через интернет. Правда один из друзей заказчика сказал ему, что делать сайт лучше на WordPress. Желание заказчика – закон!

 

ООО «Дары Сибири» на сегодняшний день – это одно из ведущих предприятий Кемеровской области.

 

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

 

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


Ваша задача разработать интернет-магазин для компании ООО «Дары Сибири» с помощью WordPress.

 

CMS WordPress можно получить через репозиторий – GIT. И не забудьте сделать commit выполненной работы в репозиторий, мы же не хотим потерять проект?

 

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

 

1.    Доступ к сайту происходит по адресу http://xxxxxx-m5.wsr.ru/ где xxxxxxxxx = код участника

2.    Чтобы обеспечить последующее администрирование и управление данными веб-сайта, используйте эту информацию для доступа к области администрирования WordPress:

2.1. Логин: Admin

2.2. Пароль: adminAdmin

 

3.    На сайте ООО «Дары Сибири» должны быть представлены следующие разделы и содержание:

3.1. Логотип организации ООО «Дары Сибири»

3.2. Главное меню должно быть зафиксировано в верхней части веб-страницы. Для показа контента будет использована прокрутка.

3.3. Разделы в главном меню:

3.3.1.     Главная

3.3.1.1.      Текст и изображения, дающие представление о деятельности компании

3.3.2.   О компании

3.3.2.1.      Текст и изображения, дающие представление об оказываемых услугах компании и их выполненных проектах

3.3.3.   Напишите нам

3.3.3.1.      Представлена форма для отправки сообщения с полями:

3.3.3.1.1.Имя:

3.3.3.1.2.Адрес электронной почты:

3.3.3.1.3.Номер телефона:

3.3.3.1.4.Сообщение:

Разработайте плагин, который реализует указанный функционал:

·         Создание формы обратной связи на выбранной странице с помощью шорткода;

·         Обработку и валидацию данных, которые отправляет пользователь через эту форму.

·         Пользователь может вводить номер телефона в любом формате, используя дополнительные символы

·         Все поля формы должны быть заполнены.

·         Плагин должен размещаться в сайдбаре;

·         После отправки сообщения, должно отобразиться уведомление об отправке.

 

3.3.4.   Новости

Каждая новость содержит: текст, изображение, дату публикации.

На странице должно выводится не более 4 новостей. Если новостей больше должна выводится пагинация.

Дата публикации не должна совпадать для всех новостей.

3.3.5.   Каталог

Каталог товаров разделенный на группы: Мед, Орехи, Чаи, Успокаивающие сборы, Лечебные сборы, Сладости, Подарочные наборы, Сувениры. Все категории должны содержать хотя бы один соответствующий товар.

Каждый товар должен содержать изображение, название, стоимость и информация о наличии.

Товар можно добавить в корзину и заказать. Сформированный заказ должен быть доступен через панель управления.

3.4. Блок в нижней части страницы (колонтитул)

3.4.1.   ООО «Дары Сибири» © Copyright, 2018

3.4.2.   Ссылка на условия использования интернет-магазина

3.4.3.   Используя плагин, добавить ссылки на социальные сети:

·         Facebook - http://www.facebook.com

·         Twitter - http://www.twitter.com

·         YouTube - http://www.youtube.com

 

4.    В директории media лежат файлы для выполнения задачи, а именно:

4.1. Плагины WordPress

4.2. Текст контента и изображения для использования на сайте

 

5.    Необходимо разработать собственную тему интернет-магазина и разместить ее именем Kemerovo. Допускается использование стандартной темы WordPress и Bootstrap. Ваша тема должна быть адаптирована под мобильные устройства и корректно отображать все функции и модули интернет магазина.

 

 

6.    HTML и CSS-код должны удовлетворять стандартам W3C (HTML 5 и CSS 3).

 

7.    Логотип WordPress на странице входа на страницу администрирования должен быть заменён на логотип организации ООО «Дары Сибири».

 

Инструкции для участника испытания
 

Участнику предоставляются медиафайлы в каталоге «media». Вы можете изменить предоставленные файлы, чтобы быть уверенным в том, что сайт выполняет свою задачу.

Отборочный в нацфинал WSR 2018

Скачать материал к заданию

Данный тестовый проект состоит из следующих файлов:

 

Задание.pdf

zip – Медиа файлы

 

Введение

 

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

Этот модуль рассчитан на 5 часов. Вам необходимо создать городской портал по приему заявок на устранение проблем в городе: ямочный ремонт дорог, ремонт детских площадок, зданий сооружений. Вам предстоит продемонстрировать свои знания в разработке веб-портала с использованием таких технологий как HTML/CSS, JavaScript и PHP. Вам необходимо позаботиться о защите проекта: утечек данных, взлома, а также от несанкционированного доступа к административным функциям.

Вы можете использовать один из предоставленных Фреймворков на выбор: Yii 2 или Laravel 5.

Вам необходимо разработать интерфейс системы. Обязательно позаботьтесь о удобстве использования сервиса и обратной связи между порталом и пользователем.

 

Вам необходимо реализовать функционал сервиса и провести его редизайн.

Стоит принять во внимание тот факт, что основная часть пользователей использует сайт через мобильный телефон. Целью редизайна является привлечение молодежи к проблемам благоустройства города.

Также вам необходимо разработать логотип, отвечающий требованиям проекта.

 

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

 

 

Портал должен поддерживать 3 типа пользователей:

  • Гость - может просматривать только общедоступную информацию.
  • Пользователь - может публиковать заявки, видеть их и удалять.
  • Администратор - имеет доступ к административной панели и всем ее функциям.

 

Возможности неавторизованных пользователей:

  • Вход в личный кабинет по логину и паролю
  • Регистрация
  • Просмотр главной страницы

 

Возможности пользователя после авторизации:

  • Регистрация, авторизация, выход;
  • Создание заявки на решение проблемы;
  • Просмотр своих заявок;
  • Удаление своей заявки.

 

Разделы администратора:

  • Смена статуса заявки на «Решена».
  • Управление категориями заявок (ремонт дорог, уборка мусора и д.р.)

Авторизация

При вводе неправильной пары логин-пароль пользователю отображается сообщение об ошибке.

При успешной авторизации пользователь должен перенаправляться в личный кабинет с возможностью просмотра своих заявок не ремонт.  Личный кабинет доступен только авторизованному пользователю.

Панель управления сайтом доступна только администратору.

 

Регистрация

Вся валидация должна работать без перезагрузки страницы, все поля обязательные:

  • ФИО - только кириллические буквы, без цифр и знаков препинания. Обязательное наличие двух пробелов, стоящих не в подряд;
  • Логин - латиница, уникальный;
  • Email - валидный email адрес;
  • Пароль;
  • Повтор пароля - должно совпадать с паролем;
  • Согласие на обработку персональных данных - должно быть отмечено.

В случае несоответствия любым требованиям выводится анимированное сообщение об ошибке, поля с ошибками выделяются.

Создайте учетную запись администратора с логином admin и паролем adminWSR

 

Все авторизованные пользователи могут выйти из профиля по нажатию на ссылку/кнопку «Выход».

Создание заявки (все поля обязательны):

  • Название;
  • Описание;
  • Категория (выбор из существующих категорий);
  • Фото - демонстрирующее проблему в одном из форматов (jpg, jpeg, png, bmp) максимальный размер 10Мб;
  • Временная метка добавления заявки

При добавлении заявки она должна автоматически получить статус «Новая»

 

Удаление заявки

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

 

Просмотр своих заявок

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

  • Временная метка
  • Название с описанием
  • Категория заявки
  • Статус заявки (Новая, Решена, Отклонена).

По умолчанию отображаются все заявки в порядке от новой к старой.

Вам необходимо добавить возможности фильтрации заявок по статусу, например, отображение только заявок со статусом «Новая».

Пользователь может удалить свои заявку, только если она имеет статус «Новая».

 

Главная страница

На главной странице необходимо вывести 8 последних решенных проблем (фото решенной проблемы) со следующими полями:

  • Временная метка
  • Название с описанием
  • Категория заявки
  • Фотография

 

Изначально видна фотография «после». При наведении на фото «после», курсор должен «разделять» фото на «до» и «после» как показано ниже:

   

Добавьте на главную страницу следующие счетчики:

  • Количество пользователей;
  • Количество решенных заявок;

Информация о зарегистрированных пользователях и решенных задачах обновляется автоматически, без перезагрузки страницы не реже чем 1 раз в 5 секунд.

В случае изменения одной или обеих цифр должно звучать оповещение (notif.wav). Цифры должны обновляться с анимацией.

 

Смена статуса заявки

Заявке со статусом «Новая» можно сменить статус на «Решена» с обязательным прикреплением фотографии – доказательства решения проблемы.

Заявке со статусом «Новая» можно сменить статус на «Отклонена» с обязательным указанием причины отказа.

Смена статуса с «Решена» или «Отклонена» невозможна.

 

Управления категориями заявок

Администратор может добавить или удалить категорию заявок.

При удалении категории должны быть удалены все заявки данной категории.

 

ИНСТРУКЦИЯ ДЛЯ  КОНКУРСАНТА

Портал должен быть доступен по адресу: http://xxxxxx-m1.wsr.ru/

Административная панель должна быть доступна по адресу: http://xxxxxx-m1.wsr.ru/admin

Медиа файлы располагаются на сервере в папке public. Вы можете изменять предоставленные файлы и создавать новые для улучшения приложения.

Ваш HTML/CSS должен быть валидным.

Оценка будет производиться в браузере Google Chrome.

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