ПРОГРАММА КУРСА
"Web-разработка для детей"
Количество занятий: 20
Занятие 1
Обзор профессии Web-мастера. Состав и версии программного обеспечения Web-мастера. Этапы разработки Web-сайта. Организация рабочего места Web-мастера: установка и настройка OpenServer (Apache, PHP, MySQL, phpMyAdmin, FTP-клиент, Git, домены и алиасы, почта), создание локального Web-сервера, редакторы кода, профессиональные редакторы для верстки сайтов. Структура директорий веб-сайта.

Занятие 2
Язык HTML5. Структура HTML-документа. Понятие тега и его атрибута. Заголовки, параграфы, разделители. Физические и логические стили текста, маркированные и нумерованные списки. Списки определений. Вставка изображений, типы и атрибуты изображений. Вставка гиперссылок, атрибуты гиперссылок. Цветовое оформление и фоновые изображения.

Занятие 3
Работа с таблицами: структура таблицы, заголовки, строки и ячейки, объединение ячеек. Позиционирование элементов сайта с помощью таблиц. Создание простого многостраничного сайта.

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

Занятие 5
Размещение аудио и видео материалов на сайте. Типы медиа файлов. Атрибуты медиа тегов: предварительная загрузка, автозапуск, органы управления. Конвертеры форматов аудио и видео. Добавление на свой сайт аудио и видео материалов. Использование визуальных редакторов для создания сайтов на примере Adobe Dreamweaver и Adobe Brackets. Работа с HTML-шаблонами сайтов в визуальном редакторе.

Занятие 6
Язык стилей CSS3. Подключение CSS к HTML-документу. Синтаксис CSS. Основные элементы стилей: строки, числа, проценты, абсолютные и относительные единицы размеров, цвета, адреса, комментарии. Селекторы тегов и селекторы классов. Классы тегов. Практические задания по использованию стилей тегов и стилей классов.

Занятие 7
Использование идентификаторов. Идентификаторы тегов. Использование псевдоклассов для определения динамического состояния элементов. Использование псевдоэлементов для генерирования нового содержимого. Принципы группирования и использование переменных. Практические задания по изученным элементам.

Занятие 8
Принципы наследования и применение каскадирования для стилевых правил. Пример блочной верстки сайта. Пример использования семантических тегов для разделения страницы на части. Анимация и трансформация в CSS. Готовые библиотеки анимации. Практические задания по изученному материалу.

Занятие 9
Пример адаптивной верстки сайта в CSS. Использование CSS-препроцессоров на примере LESS. CSS-постпроцессоры для вставки вендорных префиксов. Применение методологий CSS. CSS-фреймфорки на примере Bootstrap. Валидация кода HTML и CSS. Проверка скорости доступа к сайту. Практические задания по изученному материалу.

Занятие 10
Ознакомление с графическим редактором Adobe Photoshop. Обзор интерфейса. Настройки Photoshop. Выбор масштаба и перемещение изображения. Информация об изображении. Создание и сохранение файла. Примеры с инструментами выделения: "прямоугольное" и "овальное" выделения, "лассо", "волшебная палочка", "перо". Пример с командой выделения "цветовой диапазон".

Занятие 11
Пикселы, разрешения и размеры. Цветовые модели и типы изображений: полутоновые изображения (в оттенках серого), черно-белые изображения, индексированные цвета, полноцветные изображения. Команда "Сохранить для Web". Слои и маски в Photoshop: режим быстрой маски, использование слой-маски и корректирующих слоев, использования канал-маски (Альфа-канал) и редактора градиента.

Занятие 12
Создание коллажа и работа с текстом. Пример ретуши. Применение фильтров. Коррекция уровней, яркости и контрастности, цвета. Коррекция резкости изображения. Фильтры размытия. Инструменты коррекции резкости. Восстановление утраченных фрагментов инструментом "Штамп". Осветление и затемнение фрагментов изображения. Изменение насыщенности. Работа с вырезками (раскройка изображения). Создание GIF-анимации.

Занятие 13

Создание PSD-макета в Adobe Photoshop, на примере сайта университета: подключение линейки, разметка областей сайта с помощью направляющих, создание групповых слоев, набор текста, использование градиента, наложение эффектов слоя, создание блоков сайта ("Послание ректора", "Специальности", "Факультеты" и "Контакты"), вставка изображения карты и создание футера. Сохранить макет в формате PSD. Практическая работа: завершить макет самостоятельно.

Занятие 14
Верстка шаблона сайта с помощью HTML и CSS из файла PSD: создание на диске структуры папок сайта, верстка структуры сайта с помощью HTML, создание стилевых правил для отдельных блоков сайта с помощью CSS, поэтапное создание блоков сайта от заголовка до футера с указанием стилей каждому блоку. Вырезание отдельных элементов дизайна из макета PSD с помощью команды "Преобразовать в смарт-объект". Подключение готового слайдера. Практическая работа: завершить шаблон самостоятельно.

Занятие 15
Ознакомление с языком JavaScript. Способы подключения сценариев JavaScript к HTML-документу. Типы данных и преобразование типов, константы и переменные, операторы языка, ввод-вывод данных, языковые конструкции, организация ветвлений и выполнение вычислений. Понятие объекта, его свойства и метода. Объекты JavaScript. Методы объекта Math. Выполнение практических заданий.

Занятие 16
Организация циклов, работа с массивами. Примеры программ выполнения операций с массивами с помощью циклов и ветвлений. Функции. Области видимости переменных. События и обработчики событий. Отладка кода JavaScript с помощью инструментов разработчика на примере браузера Chrome. Выполнение практических заданий.

Занятие 17
Объектная модель браузера, использование объектов браузера: окно, документ, навигация, история. Коллекции объекта "document": ссылки, формы, изображения. Использование свойств и методов объектов. Выполнение практических заданий.

Занятие 18
Управление формами в JavaScript. Примеры проверки данных и динамического управления формами. Работа со строками. Преобразование строки в число, для вычислений. Выполнение практических заданий.

Занятие 19
Конструкторы объектов. Объекты, как переменные-контейнеры, функции-конструкторы. Понятие JavaScript-фреймворка на примере jQuery. Примеры JavaScript API. Понятие серверной части JavaScript, ознакомление с Node.js. создание и запуск простого сервера. Создание примера взаимодействия браузера и Node.js – запись текстового файла на диске. Выполнение практических заданий.

Занятие 20
Размещение сайта в интернете. Регистрация хостинга и домена, работа с панелью хостинга. Настройка FTP-клиента и копирование файлов сайта на хостинг. Изменение и обновление сайта. Первичные настройки сайта: файл .htaccess, robots.txt, страницы 404. Правила коммуникации со службой технической поддержки.