Иконка

Веб-разработчик

Профессиональная переподготовка с присвоением квалификации, 800 ак.часов

Записаться на курс

Аннотация курса

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

Предварительные требования

  • уверенный пользователь ПК,
  • базовые знания HTML, CSS, JavaScript,
  • основ алгоритмизации и программирования.

Программа курса Версия для печати

I. Основы веб-технологий

  • Adobe Photoshop для Web-дизайна (50 часов)Стрелка вниз
    • Тема 1. Запуск и настройка программы.

      Просмотр изображений. Запуск программы и ее основной экран. Открытие и сохранение файлов. Графические форматы. Настройки и установки программы;

    • Тема 2. Работа с инструментами и изображениями.

      Группы инструментов. Назначение инструментов и их параметры. Масштабирование изображений. Просмотр изображений с помощью команды Zoomify. Режимы отображения рабочей области;

    • Тема 3. Работа с элементами изображения.

      Особенности выделенной области. Приемы выделения. Отмена действий и палитра History. Геометрические выделения. Выделение контрастных областей. Быстрое выделение. Выделение в ограниченной области. Выделение в форме текстовых символов. Исправление границы выделения. Альфа-каналы. Выделение на цветовых каналах;

    • Тема 4. Макетирование с помощью слоев.

      Типы слоев. Работа со слоями. Создание новых изобразительных слоев. Добавление изображения на слой. Размещение фрагмента изображения на отдельном слое. Изменение вертикального положения слоя. Непрозрачность слоя и режимы наложения пикселов. Группы слоев. Заливочные слои. Эффекты и стили. Smart-объекты. Объединение и сведение слоев. Автоматическое выравнивание и смешивание слоев;

    • Тема 5. Коррекция тона изображения.

      Гистограмма. Оценка тона. Коррекция тона. Корректирующие слои тоновой коррекции. Обработка 32-битных файлов;

    • Тема 6. Цветовая коррекция изображений.

      Цветовые каналы. Определение цветовых компонент. Цветовой охват. Цветовой круг. Операции и команды цветовой коррекции. Команда Auto Color. Удаление цветового оттенка. Команда Color Balance. Коррекция цветового баланса. Команда Hue/Saturation. Изменение цветового тона, насыщенности и яркости. Команда Levels. Коррекция отдельных цветовых каналов. Команда Replace Color. Замена цвета. Команда Selective Color. Выборочная коррекция цвета. Корректирующие слои цветовой коррекции;

    • Тема 7. Профессиональная работа.

      Camera Raw. Слой-маски. Обтравочные маски. Коррекция погрешностей объектива. Панорамные изображения. Изображения с перспективой. Настройка резкости. Размытие. Коррекция освещения. Обесцвечивание изображения. Эффекты закрашивания. Наложение градиентной заливки. Объединение альфа-каналов. Тонирование выделенной области. Коррекция цветового баланса. Применение фильтров;

    • Тема 8. Ввод и обработка текста.

      Инструменты ввода текста и их параметры. Создание заголовочного и абзацного текста. Обработка маскированного текста. Обработка векторного текста. Конвертирование и преобразование текста. Искривление текста. Растрирование текстового слоя. Общие сведения об использовании шрифтов. Использование текста в качестве отсекающей маски. Деформация текста с помощью интеллектуальных объектов;

    • Тема 9. Работа с трехмерными изображениями.

      Форматы трехмерных изображений. Открытие и обработка трехмерных изображений. Работа с трехмерными слоями. Совмещение трехмерных и двухмерных изображений. Рисование на трехмерных слоях;

    • Тема 10. Оптимизация изображений для Интернета.

      Графические форматы изображений в Интернете. Оптимизация формата GIF. Оптимизация формата JPEG. Изображения с индексированными цветами. Подготовка для Интернета изображений различных цветовых моделей. Использование палитры Actions.

  • HTML. Основы разработки web-сайтов (30 часов)Стрелка вниз
    • Тема 1. Введение в язык HTML

      Редакторы HTML кода. Браузеры. Валидность HTML-документа. Синтаксис языка HTML. Блочные и строчные элементы. Правила написания атрибутов. Универсальные атрибуты. Разделы документа HTML. !DOCTYPE

    • Тема 2. Форматирование текста Веб-страниц.

      Создание нового абзаца. Запрет переноса слов. Выравнивание элементов страницы по центру. Элементы фразы. Цитаты. Нижние и верхние индексы. Текстовые заголовки. Установка гарнитуры, размера и цвета шрифта. Горизонтальные линии. Нумерованный список. Маркированный список. Список терминов. Комментарии языка HTML

    • Тема 3. Графика на Веб-страницах

      Основные форматы графики. Добавление рисунка на Веб-страницу. Путь к файлу изображений. Установка размеров рисунка на странице. Управление обтеканием текста вокруг графического объекта. Фоновый рисунок веб-страницы.

    • Тема 4. Создание ссылок

      Создание ссылки. Указание адрес документа перехода. Установка целевого окна открытия документа по гиперссылке. Гиперссылки на закладки в тексте страницы. Гиперссылки на закладки. Установка цвета гиперссылок. Карты-изображений.

    • Тема 5. Разметка веб-страниц с помощью таблиц

      Теги HTML для создания таблиц. Размеры таблицы. Выравнивание содержимого ячеек. Отступы в таблицах. Использование в таблице фоновых изображений. Объединение ячеек. Группирование столбцов для форматирования таблицы

    • Тема 6. Создание форм

      Типы элементов формы. Добавления поля ввода и поля ввода пароля. Пояснительный текст к элементу формы. Размеры полей ввода. Блокирование элемента формы. Порядок элементов форм. Добавление флажков и переключателей. Создание списков. Текстовые области. Выбор файла с помощью элемента формы. Скрытое поле. Добавление на форму кнопки Сбросить и Отправить.

    • Тема 7. Работа с фреймами

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

    • Тема 8. Заголовок документа HTML

      Заголовок страницы. Установка базового шрифта. Установка базового адреса. Фоновый звук на веб-страницы. Мета теги типа NAME. Мета теги типа HTTP-EQUIV.

  • Разработка web-сайтов с использованием CSS3 (40 часов)Стрелка вниз
    • Тема 1. Основы css

      Применение css для html-тега. Применение css для страницы. Применение css для web-узла. Создание внешнего css-файла. Импорт таблицы стилей. Применение css к элементам страниц. Переопределение html-тега. Определение классов для создания тегов. Определение id-селекторов для идентификации объекта. Определение стилей с одинаковыми правилами. Наследование родительских свойств. Определение стилей потомка. Определение стилей прямого потомка. Определение стилей сестринских элементов. Универсальный селектор. Определение стилей атрибутов. Определение стилей с псевдоклассами. Определение ссылок стилей с псевдоклассами. Псевдоклассы. Значение !important. Определение каскадного порядка. Таблицы стилей для разных типов устройств. Установка полей для страницы при печати. Свойства с сокращенной формой записи. Комментарии в css.

    • Тема 2. Управление шрифтом

      Установка семейства шрифта. Размер шрифта. Относительные единицы. Абсолютные единицы измерения. Курсив. Толщина шрифта. Создание капители. Загрузка шрифта. Укороченная запись определения свойств шрифта.

    • Тема 3. Управление текстом

      Кернинг. Интервал между словами. Интерлиньяж. Заглавные и строчные буквы. Выравнивание текста по горизонтали. Вертикальное выравнивание текста. Красная строка. Перенос слов. Настройка цвета текста. Оформление текста. Видимость текста. Тень текста. Кавычки. Настройка направления текста. Установка разрыва страницы для печати. Установка разрыва страницы для печати. Управление свойствами пробелов.

    • Тема 4. Управление элементом

      Составляющие элемента. Изменение внешнего вида элемента. Ширина элемента. Высота элемента. Задание высоты и ширины блока. Отступ элемента. Поле элемента. Граница элемента. Установка толщины границы. Установка цвета границы. Cтиль границы. Общая укороченная форма записи. Скругление углов элемента. Установка границ. Настройка фона. Цвет фона. Установка фонового изображения. Установка начального положения фонового изображения. Повторяемость фона. Прокрутка фона. Фон по границам элемента. Масштабируемость фонового изображения. Общая укороченная форма записи. Тень элемента. Выравнивание элемента. Запрет обтекания.

    • Тема 5. Управление позиционированием элемента

      Позиционирование элемента. Абсолютное позиционирование. Фиксированное позиционирование. Относительное позиционирование. Статическое позиционирование. Настройка положения элемента. Настройка положения слева. Настройка положения справа. Настройка положения сверху. Настройка положения снизу. 3d-позиционирование.

    • Тема 6. Управление видимостью элемента

      Видимость элемента. Определение видимой части элемента. Управление невидимой частью. Управление невидимой частью по вертикали. Управление невидимой частью по горизонтали. Эффект прозрачности.

    • Тема 7. Управление списком, таблицей и интерфейсом

      Списки. Задание типа маркера. Создание собственных маркеров. Создание висячих отступов. Укороченная запись управления списком. Счетчик элемента. Увеличения значения счетчика. Таблицы. Свертывание границ между ячейками таблицы. Расстояние между границами ячеек. Отображение пустых ячеек. Отображение ячеек. Положение заголовка таблицы. Изменение внешнего вида курсора мыши.

II. Технологии front-end разработки

  • JavaScript. Основы программирования (60 часов)Стрелка вниз
    • Тема 1. Основные понятия языка JavaScript.

      Структура программы. Файлы. Выполнение программы в разных средах: в браузере и в интерфейсе командной строки (nodejs CLI). Жизненный цикл приложения на JavaScript.

    • Тема 2. Зависимости.

      Некоторые базовые инструменты (npm, yarn, turbo, nodemon, eslint). Формат JSON. Структура и назначение файла package.json

    • Тема 3. Переменные и области видимости JavaScript.

      Типы данных. Контроль типов данных. Приведение типов. Применение Unicode в JavaScript.

    • Тема 4. Функции.

      Стандартные и стрелочные функции. Возврат значения функцией. Анонимные функции (лямбды). Модели вызова функции. Передача и привязывание аргументов. Аргументы по умолчанию.

    • Тема 5. Функция как тип данных.

      Замыкания и коллбэки. Таймер. Веб-воркеры.

    • Тема 6. Управляющие конструкции JavaScript.

      Ветвление, кейсы, циклы с предусловием и постусловием, со счётчиком и без счётчика. Тернарный оператор. Контроль ошибок (try..catch).

  • Динамический язык стилевой разметки LESS (30 часов)Стрелка вниз
    • Тема 1. Введение в LESS.
    • Тема 2. Переменные.

      Интерполяции переменных. Селекторы. URL-адреса. Импортирование less. Свойства. Имена переменных. Переопределение переменной.

    • Тема 3. Примеси.

      Параметрические примеси.

    • Тема 4. Функции LESS.

      Строковые функции. Функции списка. Математические функции. Функции проверки типов данных.

    • Тема 5. Функции LESS для работы с цветом.

      Функции задания цвета. Функции для работы с цветовыми каналами. Операции с цветом. Функции смешения цветов.

    • Тема 6. Предохранители, циклы.

      Примеси, как функции. Предохранители. Циклы. Объединение.

  • Javascript. Событийно-ориентированное программирование (110 часов)Стрелка вниз
    • Тема 1. Объектная модель документа.

      Манипулирование элементами по их селекторам (querySelector). Изменение свойств каскадных стилей. Создание элементов и фрагментов DOM (documentFragment).

    • Тема 2. События.

      Слушатели событий. Всплывание событий. Кастомные события. Создание примера приложения с коммуникацией компонентов.

    • Тема 3. Считывание информации из внешнего интернет-ресурса.

      Кросс-доменные запросы. Интерфейс fetch. Считывание и интерпретация данных в формате JSON.

    • Тема 4. Строки

      Операции над строками. Дополнение строки до заданной длины. Обращение и конкатенация строк. Иммутабельность строк. Регулярные выражения. Валидация полей формы с помощью регулярных выражений.

    • Тема 5. Ссылочные типы данных. Массивы

      Итерация по массиву. Генерация непрерывного массива. Маппинг и свёртка. Синхронные коллбэки и предикаты в массивах: сортировка и фильтрация.

    • Тема 6. Создание объектов (plain JavaScript objects).

      Связь с форматом JSON. Сериализация объектов. Массивоподобные объекты. NodeCollection: новый взгляд на старую проблему. Создание объектов с помощью литерала, прототипа и класса. Энумерабельность и итерабельность.

    • Тема 7. Канвас. Динамическое рисование на холсте с помощью JavaScript.

      Создание паттернов для фонового изображения веб-страницы. Сходства и различия с манипулированием SVG-элементами.

    • Тема 8. Библиотеки

      Использование функциональности сторонних библиотек для создания пользовательского интерфейса и манипулирования данными (на примере jQuery). Библиотеки манипулирования датами (на примере Moment).

    • Тема 9. Веб-компоненты и шаблонизаторы на клиентской стороне.

      Использование Shadow DOM и веб-компонентов для расширения функциональности веб-документа. Шаблонизаторы: императивный и декларативный подход. Использование шаблонизатора на клиентской стороне (на примере Handlebars).

    • Тема 10. Подготовка и размещение итогового проекта.
  • Javascript. Технологии профессионального программирования. (130 часов)Стрелка вниз
    • Тема 1. Развитие стандарта JavaScript.

      Стандарт ECMAScript. Ecma International, Technical Committee 39 и эволюция предложений (proposals). Преобразование JavaScript-кода с помощью транспилятора babel. Плагины и пресеты. Типизация. Типизированные массивы. Понятие буфера и потока.

    • Тема 2. Модульность

      Модульность в экосистеме JavaScript/NodeJS. Импорт и экспорт в стиле CommonJS и нативная ES2015-модульность. Модули в Node.js и в браузере. Асинхронная загрузка модулей. Изоморфный JavaScript-код. Сбор проекта с помощью бандлера - на примере Webpack.

    • Тема 3. Асинхронное программирование на JavaScript

      Коллбэки и ад коллбэков. Миграция к промисам. Промисификация и асинхронные функции. Синхронное ожидание промисов (async/await). Функции-генераторы. Связь генераторов и итераторов.

    • Тема 4. Элементы функционального программирования на JavaScript

      Цепочки методов и функциональный подход к манипулированию элементами DOM. Функциональный и императивный стиль в манипулировании массивами: forEach vs for of Лямбды (безымянные функции). Функции высшего порядка. Контекст this: стандартные функции JavaScript и стрелочные функции. Иммутабельность функций. Чистые функции. Немедленно вызываемые функции (IIFE). Паттерны вызова функций и паттерны передачи аргументов (внедрение зависимостей). Рекурсия и безымянная рекурсия. Обход древовидных структур.

    • Тема 5. Элементы объектно-ориентированного программирования на JavaScript.

      Проектирование структуры предметной области. ORM - Object Relational Mapping. Геттеры и сеттеры. Объекты как коллекции свойств и пространства имён. Мутабельность объектов. Встроенные объекты. Проектирование цепочки методов. Прототипы объектов. Функции-фабрики объектов и функции-конструкторы. Классы в современном JavaScript. Конструкторы. Реализация наследования. Обращение к классу-родителю с помощью super.

    • Тема 6. Элементы метапрограммирования на JavaScript

      Рефлексия. Объект Reflect. Создание прокси и ловушек. Символы. Создание итератора с помощью символа Symbol.iterator

    • Тема 7. Проектирование модульных тестов.

      Подготовка наборов кейсов. Модульное тестирование и интеграционное тестирование. Страничное, межстраничное, логическое тестирование. Тестирование клиентского сценария. Тестирование событий, возникающих в интерактивных элементах управления. Асинхронное и промисифицированное тестирование. Тестирование с помощью автоматизации управления браузером на примере Chromium / Puppeteer.

  • Использование JavaScript-фреймворков. Реактивное программирование (40 часов)Стрелка вниз
    • Тема 1. Фреймворки и библиотеки.

      Современная экосистема фреймворков JavaScript.

    • Тема 2. React как библиотека для создания интерфейсов на основе повторно используемых компонент.

      Язык JSX. Байндинг и реактивность. Состояние. Принципы управления компонентами и их событиями. Жизненный цикл компонентов.

    • Тема 3. Фреймворк Vue.

      Встроенный шаблонизатор и система компонентов.

    • Тема 4. Фреймворк Elm.

      Разработка декларативных интерфейсов.

    • Тема 5. Создание типичного фронтэнд-приложения, работающего с серверным API (на примере плеера видеороликов или микроблога).

III. Технологии back-end разработки

  • NodeJS. Основы создания веб-приложений (60 часов)Стрелка вниз
    • Тема 1. Веб-сервер и основы его взаимодействия с клиентом.

      Протокол HTTP. Методы (глаголы): GET, POST, DELETE, PUT. Коды ответов веб-сервера. Эмуляция работы браузера с помощью клиента telnet. Основные приёмы работы с curl и приложением Postman.

    • Тема 2. Модель приложения на платформе Node.js

      Объекты Request и Response. Создание простого веб-сервера. Отдача статического контента, MIME-типы. Выдача HTTP-заголовков. CORS.

    • Тема 3. Фреймворк Express.

      Объект app. Создание простого веб-приложения. Основы серверной маршрутизации. Создание микросервиса.

    • Тема 4. Серверная шаблонизация.

      Использование движков шаблонизации, связанных с Express (на примере Pug).

  • NodeJS. Технологии профессионального программирования (140 часов)Стрелка вниз
    • Тема 1. Потоки (streams) и сокеты.

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

    • Тема 2. Документоориентированные базы данных (на примере Mongo).

      Развёртывание сервера с Mongo и подключение к нему. Пользователи и их права. Импорт и экспорт данных.

    • Тема 3. Использование объектно-документного сопоставителя (Object Document Mapper, ODM) Mongoose.

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

    • Тема 4. Аутентификация и авторизация.

      Механизмы сессий в Express. Технология PassportJS и внешние стратегии аутентификации.

    • Тема 5. Проектирование REST API на примере серверной части микроблога.

      Обслуживание маршрутов с помощью контроллеров. Управление маршрутизаторами.

    • Тема 6. Использование Node совместно с библиотекой React.

      Клиентская маршрутизация. Создание интерфейса одностраничного приложения (SPA). Серверный рендеринг: React SSR. Сборка проекта с помощью Webpack на стороне сервера.

    • Тема 7. Использование других серверных Node-фреймворков

      Разработка Node-приложений с помощью альтернативных серверных фреймворков (на примере Koa). Управление серверным приложением. Менеджер процессов.

    • Тема 8. Подготовка и развёртывание финального проекта с использованием платформы деплоймента (на примере Heroku)
  • PHP и MySQL (60 часов)Стрелка вниз
    • Тема 1. Основные понятия языка PHP.

      Структура программы. Файлы. Выполнение программы в разных средах: в связке с веб-сервером и в интерфейсе командной строки (PHP CLI). Жизненный цикл приложения на PHP.

    • Тема 2. Развёртывание стека LAMP.

      Развёртывание связки PHP-FPM + NGINX на виртуальном хостинге и в докер-контейнере.

    • Тема 3. Программные сущности в сценарии PHP

      Переменные, типы данных, функции, строки, массивы, ассоциативные массивы. Суперглобальные массивы. Стандартные библиотеки.

    • Тема 4. Буфер вывода.

      Генерация изображений. Работа с файлами и потоками.

    • Тема 5. Основы объектно-ориентированного программирования на PHP

      Менеджер зависимостей composer и автозагрузка классов. Реализация наследования. Стандарты кодирования PSR.

    • Тема 6. Реляционные базы данных (на примере MySQL).

      Развёртывание сервера с MySQL и подключение к нему. Пользователи и их права. Импорт и экспорт данных. Использование PDO для взаимодействия PHP и MySQL.

    • Тема 7. Механизм сессий в PHP.

      Хранение данных сессии. Создание и уничтожение сессии.

    • Тема 8. Реализация MVC-паттерна в экосистеме PHP.

      Обзор популярных MVC-фреймворков (на примере Yii и Laravel).

Преподаватели курса

Государев Илья Борисович

Государев Илья Борисович

к.п.н., доцент

Google ссылка Research ссылка

Шуклин Дмитрий Анатольевич

Шуклин Дмитрий Анатольевич

к.п.н, заведующий кафедрой

Google ссылка Research ссылка

Перепелица Филипп Александрович

Перепелица Филипп Александрович

старший преподаватель

Google ссылка Research ссылка