План лекций и практических работ для студентов и преподавателей колледжа по направлению "Веб-разработка". Том I

Специальность: 09.02.07 «Информационные системы и программирование»

Квалификация: разработчик веб и мультимедийных приложений

Курс специальности: первый (экстерн 10-11 классы)

Дисциплины:

• Информатика
• Введение в специальность

О чем статья: предложения тем лекций и практических работ для преподавателей данных дисциплин при формировании РП и КТП

А может и просто для людей, которые мечтают стать веб-разработчиками)

Информатика

• Введение. Роль информационной деятельности в современном обществе: экономической, социальной, культурной, образовательной сферах.

Раздел 1. Информационная деятельность человека.

• Современные тенденции ИКТ. Постинформационное общество
• VR&AR
• Искусственный интеллект
• Информационно-правовые нормы в IT-сфере

Раздел 2. Информация и информационные процессы.

• Системы счисления
• Кодирование и шифрование графической и звуковой информации
• Изучение ПК с помощью современного ПО
• Алгоритмы. Все виды алгоритмов в программировании.
• Понятие управления. Кибернетика
• Запись и восстановление данных с внешнего устройства
• Установка и удаление из реестра ПО
• Понятие "Веб-сайт". Виды сайтов, назначение, специфика.
• Установка и настройка Windows 10 Pro, Mac OS на виртуальную машину. Работа в различных ОС. Специфика файловых систем.

Раздел 3. Средства ИКТ

• Основные характеристики компьютеров. Многообразие внешних устройств, подключаемых к компьютеру.
• Виды программного обеспечения компьютеров.
• Операционная система. Графический интерфейс пользователя
• Подключение внешних устройств к компьютеру и их настройка.
• Примеры комплектации компьютерного рабочего места в соответствии и целями его использования для различных направлений профессиональной деятельности.
• Объединение компьютеров в локальную сеть. Организация работы в локальных компьютерных сетях.
• Разграничение прав доступа в сети, общее дисковое пространство
• Защита информации, антивирусная защита.
• Безопасность, гигиена эргономика, ресурсосбережение
• Эксплуатационные требования к компьютерному рабочему месту веб-разработчика

Раздел 4. Технологии создания и преобразования информационных объектов

• Понятие об информационных системах и автоматизации информационных процессов.
• Word от 0 до PRO, оформление курсовых и дипломных проектов.
• Рефераты на темы: Знаменитый IT-специалист (разработчик), веб-индустрия (технологии)
• Excel. Сводные таблицы, чек-листы
• PowerPoint. Понятие презентации стартапа
• Google Docs как облачная альтернатива
• Понятие СУБД. MySQL на практике

Раздел 5. Телекоммуникационные технологии

• История развития Интернета. WiFi, прямое подключение.
• Браузеры для разработчиков и обычных пользователей. Vpn
• Примеры работы с Интернет - магазином, Интернет - СМИ, Интернет – турагентством, Интернет - библиотекой и пр.
• Верстка сайтов из макетов Figma/Adobe XD/Adobe Photoshop
• Методы и средства сопровождения сайта. CRM-системы, админ.панели
• Окей, Google! Грамотный поиск информации.
• Создание ящика электронной почты и настройка его параметров. Рабочий, игровой, основной на разных почтовых сервисах.
• Тренировка скорости печати для IT-специалистов
• Социальные сети. Продвижение аккаунта в Instagram
• Образовательные порталы. Площадки с курсами.

Темы рефератов: знаменитый ИТ-специалист

1. Эрик Мейер и его знаменитый reset.css from Eric Meyer
2. Пол Айриш
3. Крис Койер
4. Ли Вероу
5. Джеффри Зельдман
6. Дэн Седерхольм
7. Питер-Поль Кох
8. Джон Ресиг
9. Николя Закас
10. Нейт Кешли
11. Реми Шарп
12. Джереми Кейт
13. Алекс Рассел
14. Дуглас Крокфорд
15. Дмитрий Сошников
16. Дмитрий Барановский
17. Юрий Зайцев
18. Сергей Чикуенок
19. Вадим Макеев
20. Виталий Харисов
21. Илья Кантор
22. Карен Спарк Джонс
23. Джуди Маллой
24. Софи Уилсон
25. Хеди Ламарр
26. Брендан Айк
27. Крюков Дмитрий Витальевич
28. Сегалович Илья Валентинович
29. Дуров Павел
30. Гидо ван Россум
31. Джон Маккарти
32. Билл Гейтс
33. Кен Томпсон
34. Тим Бернерс-Ли
35. Брэм Коэн

Темы рефератов: веб-индустрия

1. PHP & Laravel
2. WordPress + WooCommerce & OpenCart
3. JavaScript & Node.js
4. Python & Django
5. Go
6. Ruby & Ruby on Rails
7. React.js & Angular.js & Vue.js
8. Bootstrap
9. Tilda
10. Drupal
11. SoftSkills frontend/backend/fullstack - разработчиков
12. HardSkills frontend/backend/fullstack - разработчиков
13. Микросервисная архитектура
14. Технологии разработки сайтов с 3D-элементами
15. Ajax. Асинхронная web-разработка
16. Single Page Application & Progressive Web Apps
17. WebAssembly
18. Yii2
19. Canvas & WebGL
20. MySQL & PostgreSQL & MongoDB & MariaDB
21. TypeScript & Vanilla JS
22. WebPack & Docker
23. Блокчейн и виртуальная реальность: от концепта до применения в web
24. Чат боты и искусственный интеллект в web
25. Motion UI
26. SSL протокол и HTTPS
27. Google AMP
28. Google Analytics & Яндекс.Метрика
29. CSS препроцессоры: SASS & LESS
30. API: GraphQL & REST
31. Git & GitHub & GitLab
32. DevOps
33. Scrum & Kanban & Agile
34. Современные IT-профессии. Иерархия в IT-компаниях
35. Интернет вещей в веб-разработке

Список вопросов к экзамену по дисциплине «Информатика»

1. Этапы развития информационного общества
2. Что такое информационная система? Классификация, структура
3. Что понимается под организацией рабочего места? Опишите комплектацию рабочего места веб-разработчика
4. Расскажите об основном назначении компьютерной сети. Охарактеризуйте кратко топологию «шина», «звезда», «кольцо».
5. Дайте определение понятию «сеть»? Каково основное назначение локальных сетей?
6. Какие бывают методы поиска информации? Перечислите основные операции
7. Какие модели памяти используются в операционных системах?
8. Что такое приложения типа «клиент-сервер», с помощью чего их разрабатывают?
9. Что принято понимать под термином «software»? Что такое интерпретатор и компилятор? Какая между ними разница?
10. Scrum & Kanban & Agile
11. Интернет вещей в веб-разработке
12. Современные IT-профессии. Иерархия в IT-компаниях
13. Чат боты и искусственный интеллект в web
14. Что такое автоматизированная информационная система?
15. Что такое автоматизированная система управления?
16. Алгоритмы и способы их описания
17. Искусственный интеллект в Яндекс.Go
18. Что такое верстка? Какие бывают методы верстки?
19. Проведите сравнительный анализ разницы тегов HTML5 и обычных
20. Что такое адаптивная верстка? Какая технология применяется?
21. Что внес в жизнь разработчиков HTML5?
22. В чем различия frontend и backend разработки?
23. Как Вы следите за последними тенденциями в IT-сфере?
24. Какими SoftSkills должны владеть fullstack – разработчики?
25. Какими SoftSkills должны владеть backend– разработчики?
26. Какими SoftSkills должны владеть frontend– разработчики?
27. Расскажите об одном из известных веб-разработчиков России
28. Какими HardSkills должны владеть fullstack – разработчики?
29. Какими HardSkills должны владеть backend– разработчики?
30. Какими HardSkills должны владеть frontend – разработчики?

Билеты по дисциплине «Информатика»

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ №1

Экзамен по дисциплине: Информатика

Вопросы:

1. Искусственный интеллект в Яндекс.Go

2. Установить и настроить OpenServer

3. Подготовить выступление на митап по предложенной теме

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ №2

Экзамен по дисциплине: Информатика

Вопросы:

1. В чем различия frontend и backend разработки?

2. Установить и настроить MacOs

3. Сверстать первый экран по предложенному макету

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ №3

Экзамен по дисциплине: Информатика

Вопросы:

1. Что внес в жизнь разработчиков HTML5?

2. Проверить предложенный фрагмент кода на валидность. Объяснить результат

3. Сверстать LandingPage по предложенному макету

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ №4

Экзамен по дисциплине: Информатика

Вопросы:

1. Что такое адаптивная верстка? Какая технология применяется?

2. Настроить предложенный документ по ГОСТ

3. Сверстать LandingPage по предложенному макету

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ №5

Экзамен по дисциплине: Информатика

Вопросы:

1. Проведите сравнительный анализ разницы тегов HTML5 и обычных

2. Возможно ли изобразить интервал дат с помощью одного элемента time?

3. Сверстать первый экран по предложенному макету

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ №6

Экзамен по дисциплине: Информатика

Вопросы:

1. Алгоритмы и способы их описания

2. Составьте резюме на Junior-frontend разработчика

3. Сверстать первый экран по предложенному макету

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ №7

Экзамен по дисциплине: Информатика

Вопросы:

1. Что такое верстка? Какие бывают методы верстки?

2. Составьте резюме на Junior-backend разработчика

3. Сверстать первый экран по предложенному макету

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ №8

Экзамен по дисциплине: Информатика

Вопросы:

1. Что такое верстка? Какие бывают методы верстки?

2. Установить и настроить MacOs

3. Сверстать первый экран по предложенному макету

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ №9

Экзамен по дисциплине: Информатика

Вопросы:

1. Расскажите об одном из известных веб-разработчиков России

2. Разработайте постер-инфографику: мой путь развития как веб-разработчиков за 4 года

3. Сверстать 5 элементов UI-kit из предложенного макету

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ №10

Экзамен по дисциплине: Информатика

Вопросы:

1. Что такое автоматизированная система управления?

2. Установить и настроить XAMPP

3. Выполнить практическое задание по MySQL

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ №11

Экзамен по дисциплине: Информатика

Вопросы:

1. Что такое автоматизированная информационная система?

2. Разработайте таблицу в GoogleDocs «Приемная комиссия ВПолК»

3. Выполнить практическое задание по сборке конфигурации ПК

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ №12

Экзамен по дисциплине: Информатика

Вопросы:

1. Чат боты и искусственный интеллект в web

2. Во сколько раз увеличатся числа 10,110; 10,12; 64,58; 39,F16 при пере-носе запятой на один знак вправо?

3. Сверстать 8 элементов UI-kit из предложенного макету

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ №13

Экзамен по дисциплине: Информатика

Вопросы:

1. Современные IT-профессии. Иерархия в IT-компаниях

2. Записать число 199710 в римской системе счисления.

3. Сверстать LandingPage по предложенному макету

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ №14

Экзамен по дисциплине: Информатика

Вопросы:

1. Что такое верстка? Какие бывают методы верстки?

2. Установить и настроить Windows10 Pro

3. Сверстать первый экран по предложенному макету

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ №15

Экзамен по дисциплине: Информатика

Вопросы:

1. Интернет вещей в веб-разработке

2. Выполнить практическое задание по Python

3. Сверстать первый экран по предложенному макету

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ №16

Экзамен по дисциплине: Информатика

Вопросы:

1. Что такое верстка? Какие бывают методы верстки?

2. Установить и настроить MacOs

3. Сверстать первый экран по предложенному макету

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ №17

Экзамен по дисциплине: Информатика

Вопросы:

1. Scrum & Kanban & Agile

2. Как встроить одну веб-страницу внутрь другой?

3. Выполнить задание по предложенному варианту

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ №18

Экзамен по дисциплине: Информатика

Вопросы:

1. Что принято понимать под термином «software»? Что такое интерпретатор и компилятор? Какая между ними разница?

2. Установить и настроить MacOs

3. Сверстать первый экран по предложенному макету

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ №19

Экзамен по дисциплине: Информатика

Вопросы:

1. Какими SoftSkills должны владеть frontend– разработчики?

2. Представьте, что не можете решить проблему, связанную с програм-мированием. Что сделаете, чтобы найти решение?

3. Сверстать LandingPage по предложенному макету

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ №20

Экзамен по дисциплине: Информатика

Вопросы:

1. Что такое приложения типа «клиент-сервер», с помощью чего их разрабатывают?

2. Разработайте личный план развития frontend-разработчика

3. Сверстать первый экран по предложенному макету

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ №21

Экзамен по дисциплине: Информатика

Вопросы:

1. Какие модели памяти используются в операционных системах?

2. Подключить и настроить графический планшет

3. Сверстать первый экран по предложенному макету

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ №22

Экзамен по дисциплине: Информатика

Вопросы:

1. Какие бывают методы поиска информации? Перечислите основные операции

2. Нарисуйте схему соединения компьютеров по топологии «кольцо». Расскажите о достоинствах и недостатках данной топологии.

3. Создайте и настройте почтовый ящик для работы

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ №23

Экзамен по дисциплине: Информатика

Вопросы:

1. Какими SoftSkills должны владеть backend– разработчики?

2. Нарисуйте схему соединения компьютеров по топологии общая ши-на. Каковы достоинства и недостатки такой топологии? Для чего служат терминаторы?

3. Сверстать первый экран по предложенному макету

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ №2

Экзамен по дисциплине: Информатика

Вопросы:

4. Дайте определение понятию «сеть»? Каково основное назначение ло-кальных сетей?

5. Установить и настроить MacOs

6. Сверстать первый экран по предложенному макету

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ №25

Экзамен по дисциплине: Информатика

Вопросы:

1. Какими SoftSkills должны владеть fullstack – разработчики?

2. Решите задачу. Максимальная скорость передачи данных в локальной сети 100 Мбит/с. Сколько страниц текста можно передать за 1 сек, если 1 страница текста содержит 50 строк и на каждой строке - 70 символов

3. Создайте и настройте почтовый ящик для повседневного пользования

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ №26

Экзамен по дисциплине: Информатика

Вопросы:

1. Расскажите об основном назначении компьютерной сети. Охарактеризуйте кратко топологию «шина», «звезда», «кольцо».

2. Установить и настроить MacOs

3. Сверстать первый экран по предложенному макету

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ №27

Экзамен по дисциплине: Информатика

Вопросы:

1. Что понимается под организацией рабочего места? Опишите комплектацию рабочего места веб-разработчика

2. Подзаголовки – одни из самых распространенных элементов в лю-бом веб-сайте. Несколько лет назад тег hgroup был представлен как раз для этих нужд, однако совсем недавно он был удален из спецификации. Можете ли Вы описать, почему отказались от hgroup и как проблему с разметкой заголовков решают сегодня?

3. Сверстать первый экран по предложенному макету

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ №28

Экзамен по дисциплине: Информатика

Вопросы:

1. Что такое информационная система? Классификация, структура

2. Установить и настроить MacOs

3. Создайте и настройте аккаунт в Instagram по предложенной тематике

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ №29

Экзамен по дисциплине: Информатика

Вопросы:

1. Какими HardSkills должны владеть frontend – разработчики?

2. Как добавить к элементам margin, padding и border?

3. Сверстать первый экран по предложенному макету

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ №30

Экзамен по дисциплине: Информатика

Вопросы:

1. Какими HardSkills должны владеть backend– разработчики?

2. Подготовьте руководство пользователя на тему «Как верстать маке-ты из Figma»

3. Создайте и настройте аккаунт в Instagram по предложенной тематике

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ №31

Экзамен по дисциплине: Информатика

Вопросы:

1. Какими HardSkills должны владеть fullstack – разработчики?

2. Разработайте доску в трелло по саморазвитию в веб-дизайне

3. Сверстать первый экран по предложенному макету

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ №32

Экзамен по дисциплине: Информатика

Вопросы:

1. Как Вы следите за последними тенденциями в IT-сфере?

2. Подготовить презентацию на тему «Студент колледжа»

3. Сверстать первый экран по предложенному макету

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ №33

Экзамен по дисциплине: Информатика

Вопросы:

1. Что такое верстка? Какие бывают методы верстки?

2. Разработайте интеллект-карту «Мой путь развития в колледже за год»

3. Сверстать первый экран по предложенному макету

ЭКЗАМЕНАЦИОННЫЙ БИЛЕТ №34

Экзамен по дисциплине: Информатика

Вопросы:

1. Этапы развития информационного общества

2. Установить и настроить антивирус из предложенных вариантов

3. Сверстать первый экран по предложенному макету

Введение в специальность

Раздел 1. Введение в профессию

Тема 1 Компетенция «Веб-дизайн и разработка»

• Техническое описание компетенции «Веб-дизайн и разработка»
• Современные ИКТ в профессиональной деятельности. Перспективы развития веб-технологий
• Система СПО. Внедрение системы демонстрационных экзаменов. Обзор конкурсных заданий по компетенции "Веб-дизайн и разработка"
• ТОП 50 IT-профессий в мире

Тема 2 Веб-дизайн

• Основы веб-дизайна. Дизайн-концепции и техники, черновое макетирование страниц

Пр.1 Разбираем первый экран и повторяем его на соседнем холсте в Figma

• Основы дизайна веб-страниц. Верстка первого экрана в Figma

Пр. 2 Векторные иконки и первый экран в Figma

• Основы веб-дизайна. Выполнение задания на разработку одностраничного сайта в формате Landing Page

Пр 3 Разбираем одностраничник и повторяем его на соседнем холсте в Figma

Пр. 4 Разбираем дизайн модуля 1.2 из демонстрационного экзамена по компетенции "Веб-дизайн и разработка"

Пр. 5 Разбираем дизайн модуля 1 из регионального этапа чемпионата по компетенции "Веб-дизайн и разработка"

• Визуальное оформление себя, как специалиста. Резюме Junior-frontend / Junior-backend разработчиков, разработать дизайн сертификата об успешном окончании 1/2/3/4 курса, постер-инфографика: ваш путь развития как веб-разработчиков за 4 года, интеллект-карта " Планы на лето" .

Тема 3 Веб-разработка

• Знакомство с профессией «Верстальщик»
• IT-рекрутинг. Frontend-разработчик

Пр.6 Верстка окна авторизации, первого экрана и элементов ui-kit.

• Верстка сайта компании в формате LandingPage

Пр.7 Верстка модуля 1.2 демонстрационного экзамена по компетенции "Веб-дизайн и разработка"

• Современная верстка на Flex

Пр.8 Верстка модуля 1 регионального этапа чемпионата по компетенции "Веб-дизайн и разработка"

• Разбор кейса от заказчика

Пр. 9 Верстка макета из Figma с фриланс-биржи Хабр.Фриланс

Тема 4 Тестирование

• IT-рекрутинг. Тестировщик и прожект-менеджер
• Введение в профессию "Тестировщик". Качество продукта. Тестировщик в команде
• Профессия QA-тестировщик. Тестирование в геймдеве
• Анализ требований. Декомпозиция приложения

Тема 5 SEO-оптимизация и SMM-продвижение

• Введение в интернет-маркетинг. Поисковые системы
• Комплексный аудит сайта
• Сайты WordPress. SEO-оптимизация

Пр.10 Интернет-магазин на WordPress

Пр.11 Администрирование группы Вконтакте

Вариативная часть:

IT-рекрутинг

• Python-разработчик
• PHP-разработчик
• Ruby-разработчик
• DevOps
• С++ разработчик
• Java-разработчик
• Разработчик мобильных приложений
• Разработчик искусственного интеллекта

Веб-дизайн

• Интернет-магазин
• Создание шаблона для instagram в figma

Сайты на Tilda

• Сайт по шаблону
• Сайт по дизайну через ZeroBlock

GameDev

• Фундаментальная теория
• Практика
• Как придумать игру и выйти на доход
• Пайплайн разработки инди-игры

Графический дизайн

• Дизайн соц. сетей. Основы брендинга
• Дизайн соц. сетей. Основы визуальной коммуникации
• Профессиональное ПО. Adobe Photoshop
• Профессиональное ПО. Adobe Illustrator

Книги для саморазвития SoftSkills & HardSkills

Задания к дифференцированному зачету по дисциплине "Введение в специальность"

Пояснения:

Медиа-файлы ищите в интернете на свой вкус.

Полезность:

1. Растет скилл в веб-дизайне

2. Растет скилл в веб-разработке

Время выполнения варианта: 3ч

Вариант 1. Сайт для артиста

Содержание

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

1. Задание.pdf

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

Введение

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

Технологии этого модуля: HTML5, CSS3, Граф. дизайн.

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

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

Вам необходимо сверстать одностраничный сайт в формате Landing Page, на котором будут находиться следующие блоки:

1. Шапка, содержащая логотип, телефон PR-менеджера и кнопку для заказа звонка;

2. Блок, содержащий информацию о артисте;

3. Блок с популярными песнями исполнителя и кнопкой для быстрого подбора ближайшего города, в котором будет концерт.

4. Блок с альбомами артиста

5. Блок, содержащий особенности туров на основе купленного билета (Premium / Vip / Обычный (танцпол);

6. Блок со списком туров: фото места выступления, город, выбор билетов, свободные места;

7. Фильтр с поиском и выбором города для покупки билета.

8. Слайдер с отзывами;

9. Попап с опросом «Вы фанат Егора Крида?»

10. Кнопка, позволяющая вернуться наверх.

Общее требования к дизайну:

• Дизайн сайта должен соответствовать целевой аудитории. Целевая аудитория: молодые люди в возрасте 18-25 лет;
• Дизайн сайта должен соответствовать деятельности артиста;
• Должны использоваться простые и понятные заголовки;
• Шрифты должны соответствовать деятельности артиста;
• Дизайн сайта должен быть привлекателен:

1. Размеры шрифтов должны использоваться гармонично (должна быть предусмотрена некая иерархия размеров);
2. Используемые цвета должны помогать восприятию контента;
3. Свободное пространство должно быть равномерным в однотипных блоках.

• Интерфейс должен быть удобен.

Общие требования к логотипу:

• Логотип должен быть разработан в векторе;
• Логотип должен быть оригинальным и соответствовать теме сайта.

Интерактивные требования:

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

Требования к верстке:

• HTML и CSS должны быть валидны;
• Ваш код должен быть структурирован и комментирован. Его должен понять другой разработчик;
• Верстка должна быть в том числе адаптирована для просмотра через мобильные телефоны (375X812px).

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

Входные данные:

• Описание деятельности артиста;
• Список туров по городам с фото;
• ·Список альбомов и популярных песен;
• Текст отзывов;
• Необходимые медиа данные для дизайна.

Выходные данные:

HTML-шаблон и/или дизайн макет, исходник логотипа.

Верстку сохранить в папку на рабочий стол назвав: ФИО, поток 1, группа

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

Вариант 2. Промо-страница для банка

Содержание

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

1. Задание.pdf

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

Введение

К Вам обратился банк «BFP» (Bank For People), который привлекает денежные средства на депозиты у тех, кто имеет сбережения, и выдаёт деньги в виде кредитов тем, кому они нужны для развития бизнеса или личных нужд, чтобы Вы создали ему небольшой сайт, который бы рассказывал потенциальным клиентам о банке и демонстрировал актуальные на текущий момент предложения. Главная цель – совершение заказа потенциальным клиентом.

Технологии этого модуля: HTML5, CSS3, Граф. дизайн.

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

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

Вам необходимо одностраничный сайт в формате Landing Page, на котором будут находиться следующие блоки:

1. Шапка, содержащая логотип, номер телефона и кнопку «стать клиентом»;
2. Блок со слоганом и кнопкой для быстрого заполнения заявки;
3. Блок поиска по сайту с кнопкой;
4. Блок, содержащий особенности кредитной карты;
5. Блок с карточками популярных продуктов: название, преимущество, фото;
6. Слайдер с актуальными предложениями;
7. Блок, преимуществ ипотеки с кнопкой «Заполнить заявку»;
8. Блок, заполнения заявки на кредитную карту;
9. Блок с калькулятором расчёта кредита (приложены в папке media);
10. Кнопка, позволяющая вернуться наверх.

Общее требования к дизайну:

• Дизайн сайта должен соответствовать целевой аудитории. Целевая аудитория: люди в возрасте 20-40 лет;
• Дизайн сайта должен соответствовать деятельности банка;
• Должны использоваться простые и понятные заголовки;
• Шрифты должны соответствовать деятельности банка;
• Дизайн сайта должен быть привлекателен:

1. Размеры шрифтов должны использоваться гармонично (должна быть предусмотрена некая иерархия размеров);
2. Используемые цвета должны помогать восприятию контента;
3. Свободное пространство должно быть равномерным в однотипных блоках.

• Интерфейс должен быть удобен.

Общие требования к логотипу:

• Логотип должен быть разработан в векторе;
• Логотип должен быть оригинальным и соответствовать теме сайта.

Интерактивные требования:

• Шапка должна быть фиксирована к верхней части сайта;
• Слайды с актуальными предложениями должны переключаться;
• Кнопка, позволяющая вернуться наверх страницы всегда зафиксирована снизу экрана;
• На сайте должны присутствовать анимации, способствующие положительному пользовательскому опыту;
• Все интерактивные действия должны происходить без обновления страницы и без использования языков программирования.
• Калькулятор должен рассчитывать ежемесячный платёж в зависимости от суммы и срока кредита (все элементы должны быть интерактивны).

Требования к верстке:

• HTML и CSS должны быть валидны;
• Ваш код должен быть структурирован и комментирован. Его должен понять другой разработчик;
• Верстка должна быть в том числе адаптирована для просмотра через мобильные телефоны (375X812px).

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

Входные данные:

• Описание банка;
• Список актуальных предложений;
• Необходимые медиа данные для дизайна.
• Формула для калькулятора

Выходные данные:

HTML-шаблон и/или дизайн макет, исходник логотипа.

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

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

Вариант 3. Сайт-визитка для компьютерного клуба

Содержание

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

1. Задание.pdf

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

Введение

К Вам обратились владельцы хостела «Кибер арена «ALT+F4», чтобы Вы создали им небольшой сайт, который бы рассказывал потенциальным клиентам о них и демонстрировал преимущества выбора их Кибер арены. Главная цель – совершение бронирования места потенциальным клиентом.

Технологии этого модуля: HTML5, CSS3, Граф. дизайн.

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

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

Вам необходимо одностраничный сайт в формате Landing Page, на котором будут находиться следующие блоки:

1. Шапка, содержащая логотип, меню. Пункты меню: новости, о центрах, аренда ПК на дом, турниры, отзывы.
2. Блок со слайдером с примерами комнат;
3. Блок, содержащий преимущества арены (с инфографикой);
4. Блок, содержащий примеры ПК: фото и описание ПК;
5. Блок, содержащий контакты: телефон, email, ссылки на социальные сети;
6. Блок с партнёрами;
7. Слайдер с отзывами;
8. Блок в виде таблицы, содержащий список ближайших турниров;
9. Прайс-лист в 3 колонки с популярными тарифами;
10. Футер с названием арены и кнопкой, позволяющий забронировать место.

Общее требования к дизайну:

• Дизайн сайта должен соответствовать целевой аудитории. Целевая аудитория: люди от 15 до 55 лет.
• Дизайн сайта должен соответствовать деятельности арены;
• Должны использоваться простые и понятные заголовки;
• Шрифты должны соответствовать деятельности арены;
• Дизайн сайта должен быть привлекателен:

1. Размеры шрифтов должны использоваться гармонично (должна быть предусмотрена некая иерархия размеров);
2. Используемые цвета должны помогать восприятию контента;
3. Свободное пространство должно быть равномерным в однотипных блоках.

• Интерфейс должен быть удобен.

Общие требования к логотипу:

• Логотип должен быть разработан в векторе;
• Логотип должен быть оригинальным и соответствовать теме сайта.

Интерактивные требования:

• При клике на пункт меню происходит переход на соответствующий экран;
• Отзывы в блоке со слайдером должны переключаться анимировано;
• Фото в слайдерах должны переключаться анимировано;
• Меню при прокрутке должно быть зафиксировано вверху экрана;
• Кнопка бронирования места должна быть постоянно на экране при прокрутке;
• На сайте должны присутствовать анимации, способствующие положительному пользовательскому опыту;
• Все интерактивные действия должны происходить без обновления страницы и без использования языков программирования.

Требования к верстке:

• HTML и CSS должны быть валидны;
• Ваш код должен быть структурирован и комментирован. Его должен понять другой разработчик;
• Верстка должна быть в том числе адаптирована для просмотра через мобильные телефоны и планшеты (разрешения (375X812px) и (1024X1366px)).

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

Входные данные:

• Информация о арене;
• Текст отзывов;
• Необходимые медиа данные для дизайна.

Выходные данные:

HTML-шаблон, исходник логотипа.

Верстку сохранять на рабочий стол в папку: ФИО, номер потока, группа

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

Вариант 4. Одностраничный сайт для школы английского языка

Содержание

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

1. Задание.pdf

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

Введение

К Вам обратилась онлайн-школа английского языка PugEng, занимающаяся обучением школьников, взрослых и компаний. От Вас требуется создать им небольшой сайт, который бы рассказывал потенциальным клиентам о школе и демонстрировал актуальные на текущий момент курсы обучения. Главная цель – совершение заказа потенциальным клиентом.

Технологии этого модуля: HTML5, CSS3, Граф. дизайн.

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

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

Вам необходимо одностраничный сайт в формате Landing Page, на котором будут находиться следующие блоки:

1. Шапка, содержащая логотип, меню, кнопку бесплатного урока, кнопку «Войти»;

2. Блок «Уроки с преподавателем в онлайн-школе», содержащий категории: взрослые, дети, компании и кнопку «Оставить заявку» и ссылку «Подробнее»;

3. Блок со слоганом «Где угодно и когда удобно Занимайтесь из дома, на работе или в путешествии — с компьютера или смартфона.» и видеороликом с всплывающей и исчезающей при скролле кнопкой «Бесплатный урок»;

4. Блок «Наглядный прогресс» с всплывающей и исчезающей при скролле кнопкой «Бесплатный урок»;

5. Блок «Пройдите вводный урок» с кнопкой «Оставить заявку»;

6. Блок «Мотивация продолжать» с фотогалереей;

7. Блок, содержащий информацию о консультантах;

8. Блок «Нам доверяют», содержащий преимущества выбора школы

9. Слайдер с отзывами;

10. Блок «Запишитесь на бесплатный вводный урок».

11. Попап: онлайн-чат.

12. Подвал: логотип, соц. сети, Преподавателям, Карьера в школе, Партнёрская программа, Отзывы, Адреса и телефоны, ОБУЧЕНИЕ, Записаться на вводный урок, Процесс, Курсы, Преподаватели, Вопрос-ответ, Стоимость, Подарить сертификат, ПРОДУКТЫ, Skysmart — онлайн-школа для детей и подростков, Talks, Курсы и профессии, Корпоративное обучение, Skyeng iOS, Skyeng Android, ДОПОЛНИТЕЛЬНО, План по изучению английского, Вебинар для мотивации, Марафон «Формируем привычку учить английский», Журнал «Skyeng Magazine», Статьи.

Общее требования к дизайну:

• Дизайн сайта должен соответствовать целевой аудитории. Целевая аудитория: люди в возрасте 14-50 лет;
• Дизайн сайта должен соответствовать деятельности школы;
• Должны использоваться простые и понятные заголовки;
• Шрифты должны соответствовать деятельности компании;
• Дизайн сайта должен быть привлекателен:

1. Размеры шрифтов должны использоваться гармонично (должна быть предусмотрена некая иерархия размеров);
2. Используемые цвета должны помогать восприятию контента;
3. Свободное пространство должно быть равномерным в однотипных блоках.

• Интерфейс должен быть удобен.

Общие требования к логотипу:

• Логотип должен быть разработан в векторе;
• Логотип должен быть оригинальным и соответствовать теме сайта.

Интерактивные требования:

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

Требования к верстке:

• HTML и CSS должны быть валидны;
• Ваш код должен быть структурирован и комментирован. Его должен понять другой разработчик;
• Верстка должна быть в том числе адаптирована для просмотра через мобильные телефоны (375X812px).

ИНСТРУКЦИЯ ДЛЯ СТУДЕНТОВ:

Входные данные:

• Описание школы;
• Необходимые медиа данные для дизайна.

Выходные данные:

HTML-шаблон, исходник логотипа.

Верстку сохранять на рабочем столе: папка – ФИО, Поток 4, группа

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