Паспорт курса
Описание курса
Отзывы выпускников
Аннотация курса
Курс рассчитан на начальный уровень подготовки. Даже если вы никогда не работали в Adobe Photoshop и не верстали на HTML, после прохождения курса вы сможете создать полнофункциональный сайт (десктопную и мобильную версию) с нуля и «под ключ».
В процессе обучения вы изучите основные технологии создания современных и успешных веб-сайтов: научитесь разрабатывать макеты в Adobe Photoshop, получите полное представление о технологии верстки веб-страниц, применяя язык разметки гипертекста HTML5 и каскадные таблицы стилей CSS3, научитесь динамически управлять элементами веб-страниц благодаря языку программирования JavaScript.
Полученные технические знания в полной мере вы сможете применять на практике в процессе изучения UX и UI проектирования, создавая веб-приложения с учетом современных тенденций в дизайне.
Поскольку важную роль в веб-разработке занимает умение работать в команде, в рамках данного курса вы получите опыт взаимодействия в группе в процессе изучения системы контроля версий GIT и научитесь решать базовые задачи, возникающие перед разработчиками. Также Вы получите опыт работы с конструктором Tilda, который в разы ускоряет процесс прототипирования и разработки веб-страниц.
Полученная специальность позволит работать как удаленно или на фрилансе, так и на штатных позициях в федеральных и международных компаниях, что подтверждено опытом наших выпускников.
Перед заключением договора на обучение рекомендуется ознакомиться с курсом в режиме тестового доступа
Очное обучение проходит по расписанию в вечерние часы (18.30 — 21.50) 4 раза в неделю. Дистанционное обучение — по индивидуальному календарному плану;
Профессиональные стандарты
Курс соответствует:
Предварительные требования
Уверенный пользователь ПК.
Программа курса
Типы обрабатываемых изображений. Свойства пиксельных изображений. Операции обработки цифровых изображений. Начальное окно Adobe Photoshop и элементы интерфейса. Меню. Панель быстрого доступа. Настройка интерфейса — рабочие среды. Панель настройки инструментов. Палитрыпанели. Диалоговые окна. Управление открытыми документами. Упорядочивание документов. Создание копии рабочего окна. Операции с файлами. Увеличение и уменьшение изображения на экране. Режимы отображения рабочего экрана. Вывод на экран и отключение видимости элементов интерфейса. Получение информации об изображении. Выбор и использование инструментов. Настройки и установки программы.
Параметры нового документа. Размеры изображения. Размер холста (канвы). Обрезка изображения — кадрирование. Вращение изображения. Отзеркаливание или отражение изображения. Отмена действий.
Палитра Info (Инфо). Автоматическая коррекция. Простые решения по коррекции. Тоновая коррекция изображений. Характеристики тона изображения. Анализ гистограмм. Команды тоновой коррекции. Использование команды Brightness/Contrast (Яркость/Контраст). Оценка тона изображения с помощью команды Levels (Уровни). Коррекция тона изображения с помощью Curves (Кривые). Обработка 8- и 16-битных файлов. Цветовая коррекция. Изменение резкости и четкости. Добавление шума, удаление погрешностей.
Использование основного и фонового цвета. Кодировка цвета. Калибровка монитора. Управление цветом. Определение цвета с помощью диалогового окна. Синтез цвета с помощью палитры Color (ЦветСинтез цвета). Палитра Swatches (ОбразцыКаталог). Основные параметры рисующих инструментов. Инструменты Pencil (Карандаш), Brush (Кисть) и Eraser (Ластик). Инструмент Paint Bucket (Заливка). Инструмент Gradient (Градиент).. Слои фигуры. Инструменты ретуши.
Создание выделения с помощью инструментов. Геометрические выделения. Растушевка границы выделения. Выделение области, основанной на цвете. Комбинирование инструментов выделения. Команды меню Select. Редактирование выделенной области с использованием альфа-каналов. Перемещение границ выделенной области. Модификация выделенной области командами подменю Modify (Модификация). Перемещение выделенной области. Копирование выделенных областей. Копирование выделенной области при перетаскивании. Удаление выделенных пикселов. Трансформирование изображения в выделенной области.
Послойная организация изображения. Палитра Layers (Слои). Использование палитры Layers (Слои). Настройка прозрачных областей слоя. Режимы рисования и наложения слоев. Применение эффектов и стилей. Применение к слою стиля. Smart-объекты. Деформирование изображений. Объединение и сведение слоев. Композиции слоев.
Корректирующие слои в палитре Layers (Слои). Создание корректирующих слоев. Палитра Adjustments (Коррекция). Корректирующие слои тоновой коррекции. Корректирующие слои цветовой коррекции. Корректирующий слой Vibrance (Вибрация). Корректирующий слой Black and White (Белое и черное). Корректирующий слой Photo Filter (Фотофильтр). Корректирующий слой Channel Mixer (Смешение каналов). Корректирующие слои Invert (Инвертирование), Threshold (Порог) и Posterize (Постеризовать). Корректирующий слой Gradient Map (Карта градиента). Маскирование слоев. Создание слой-маски. Палитры для работы с масками. Диалоговое окно Refine Mask (Уточнить маску).
Основные термины. Ввода текста. Типы текста, их создание и использование. Палитры форматирования в Adobe Photoshop. Обработка маскированного текста. Обработка векторного текста. Создание из текста рабочего контура. Преобразование текста в кривые. Изменение формы текста. Создание текста вдоль контура. Создание текста внутри контура. Растеризация текстового слоя.
Графические форматы изображений в Интернете. Оптимизация отдельных изображений. Оптимизация формата JPEG. Оптимизация формата GIF. GIF-анимация. Видео и видеослои. Автоматизация действий.
Размеры пиксельной графики для полиграфии. Использование форматов файлов для полиграфии. Формат TIFF. Формат EPS. Формат PDF. Использование формата RAW. Создание контуровпутей. Модель кривой Безье. Предварительное цветоделение. Параметры конвертации в CMYK. Рекомендуемые установки цветоделения. Печать из Adobe Photoshop.
Понятие HTML. Основы работы глобальной сети Интернет. Понятие веб-сервера. Статичные и динамичные сайты. Основные типы сайтов. Обзор современных стек технологий HTML и CSS. Базовая структура HTML. Варианты разметки страницы. Основные блоки HTML-страницы.Создание гиперссылок и работа с ними. Основы работы с гиперссылками. Взаимосвязь между страницами статичного веб-сайта.
Размещение изображений на веб-странице. Упорядоченные и неупорядоченные списки. Основы работы с таблицами. Отрывки прошлого: старые сайты верстали в таблицах.
Размещение на своих страницах звуковых и видео-файлов.Внедрение внешних HTML-страниц. Взаимодействие ссылок с iframe-элементами.Текстовые поля, радио-кнопки, флажки/чекбоксы, элемент выбора select и их атрибуты. Создание формы обратной связи.
Основы работы с CSS. Подключение файла стилей. Базовые понятия: селектор, свойство, каскад, наследование, единицы измерения. Применение CSS-свойств к оформлению изображений.
Верстка страницы по макету. Построение структуры страницы. Высота и ширина колонок. Свойства float, display.
@media, медийные запросы (@mediaqueries) для страниц, mediafeature.
@font-face, GoogleFonts, Единицы измерения для работы со шрифтами и html-элементами.
Выбор хостинга. Основы работы с FTP-клиентами. Использование тега meta.
Проверка валидности верстки. Языки серверного программирования и генерация динамических HTML-страниц. Возможности JavaScript по работе с HTML-страницами и CSS-свойствами.
Типы данных. Операторы. Инструкции и выражения. Переменные и константы.
Конструкции ветвления логики программы (if…else, switch). Циклы: с предусловием, постусловием и арифметический.
Понятие функции. Объявление функции. Аргументы функции. Возврат значений. Области видимости. Стрелочные функции. Анонимные функции.
Понятие объект (Object). Свойства объекта. Методы объекта. Массивы. Свойство и методы функции. Объект String и его аргументы. Объект Math. Функция parseInt(). Функция parseFloat(). Статические функции объекта Math.
Объекта Data. Работа с таймерами. Свойства и методы объекта Window. Управление поведением Window. Объект Location. Объект History. Объект Navigator.
Причины использования DHTML. DOM (DocumentObjectModel — объектная модель документа). Доступ к узлам DOM. Доступ по идентификационному номеру (ID) . Доступ по атрибуту name. Доступ по имени дескриптора . Доступ и изменение класса через свойство className. Получение информации об узле. Перемещение по иерархическому дереву DOM. Метод removeChild(). Удаление элементов. Методы createElement() и appendChild(). Создание и добавление элементов. Методы insertBefore(). Создание и добавление элементов. Метод createTextNode(). Создание текстовых элементов. Метод setAttribute(). Добавление атрибутов. Метод cloneNode(). Клонирование элементов. Метод replaceChild(). Замена элементов. Свойство innerHTML. Изменение фрагментов кода HTML. Использование CSS стилей в сценариях JavaScript. Соглашения об именах: CSS-атрибуты в JavaScript. Работа со свойствами стилей. DHTML-анимация.
Описание cookie. Cookie в браузере.
Элементы управления и объекты. Быстрый доступ к объектам. Динамическое изменение значений атрибутов. Изменение элементов на основе значений, указанных пользователем. Динамическое изменение списка вариантов. Проверка выбранных флажков. Изменение элементов перед отправкой формы на сервер. Использование встроенных функций JavaScript. Отключение элементов. Элементы только для чтения.
CSS-фреймворки: Bootstrap и Foundation. Базовые возможности фреймворков.
Контейнеры. Система сеток Bootstrap. PSD-файл для разработки макета.
Оформление списков, шрифтов, таблиц и изображений с помощью Bootstrap.
Кнопки. Выпадающие элементы. «Хлебные крошки».
Всплывающие формы. Формы обратной связи. Всплывающие сообщения.
Границы. Иконки. Встраивание медиа-файлов на HTML-страницы.
Понятие Flexbox. Основы работы с Flexbox.
Понятие JavaScript. Базовые возможности языка. Взаимодействие с Bootstrap. Управление поведением bootstrap-компонент через JS.
Общие понятия интерфейса и его элементы. История экранных интерфейсов. Тенденции развития экранных интерфейсов, технологический аспект. Интерфейсы сегодня. Проектировщик интерфейсов, кто он? Поиск референсов, графические стоки.
Практика: Создание простого лэндинга по примеру. Повторить стиль одной страницы, изменив название и основное изображение.
Приемы для создания нужного настроения на сайте. Значимость различных элементов. Примеры стилей и их применения. Проектный подход.
Практика: Создание сета элементов в различных стилях (для 2-х сайтов, игрового и продающего). Отрисовать по 4 иконки и по 1 кнопке.
Экранная верстка. Модульные сетки и их применение. Модульные сетки в разработке онлайн газет и онлайн магазинов. Адаптивность сетки.
Практика: Создание макета простой страницы товара на основе модульной сетки.
Обзор самых популярных сайтов, почему они так популярны? Обзор сайтов-призеров различных конкурсов web-дизайна. Что важного в их дизайне?
Практика: Повторить (перерисовать) стартовую страницу известного сайта в заданном стиле. При перерисовывании также необходимо перерисовать иконки и кнопки.
Порядок элементов, логика повествования и адаптивный дизайн.
Практика: Выберите тему для простого сайта, у сайта должны быть формы отправления запроса, записи на прием или голосования. Для этих целей нужно будет использовать кнопку и форму ответа. Продумайте порядок и расположение элементов. Нарисуйте три лэндинга, (используя модульную сетку) для монитора стационарного компьютера, для планшета и для мобильного телефона. Отрисуйте иконки, формы ответа или иные элементы. Соблюдайте общий стиль.
Текст в web, его значимость для пользователя и для систем. Метаданные и инклюзивный дизайн.
Практика: Вам необходимо спроектировать три страницы текстового сайта, портала научных статей. Страницы: все новости, одна новость, описание платного онлайн курса, на который можно записаться. В верстке используйте модульные сетки, правила экранной типографики.
Анализ целевой аудитории Истории и пользовательские сценарии. Проектирование сайта или проектирование пользовательского опыта. Тестирование и сбор данных.
Практика: Выберите тему для своего сайта. Начните сбор данных для его проектирования. Сделайте анализ целевой аудитории Напишите историю и пользовательский сценарий. Проектирование сайт на основе полученных данных. Уделите максимальное внимание расположению элементов, его внешний облик будете создавать в рамках следующего занятия.
Практика: Вам нужно спроектировать адаптивный сайт (три версии) и сделать его презентацию.
Принципы работы систем контроля версий. Введение в Git. Установка и начальная настройка Git (Windows и Linux).Создание, изменение и удаление репозитория. Просмотр истории коммитов. Отмена действий. Метки. Псевдонимы.
Принципы ветвления и слияния. Управление ветками. Слияние и разрешение конфликтов. Перебазирование.
Установка Git на сервере. Настройка. Протоколы. Рабочие процессы. Создание коммитов. Поддержка. Инструментарий.
Графические утилиты. Среды разработки. GitHub.
О назначении конструкторов. Панель управления сайтами. Выбор тарифа. Экспорт кода. Создание сайта. Настройки сайта. Создание страниц. Список страниц. Настройки отдельной страницы. Интерфейс редактирования страницы. Предпросмотр и публицикация страницы. Списки страниц. Техническая поддрежка.
Практика: создание учетной записи, сайта и страницы сайта.
Хэдер и футер. Обложка. Блок о проекте. Добавление изображения. Добавление галлереи. Блок преимущества. Команда сайта. Список страниц. Добление отзывов. Расписание для сайта мероприятия. Этапы работы над проектом. Контакты. Подключение карт. Добавление соцсетей. Сетка парнеров.
Практика: создание лэндинга из стандартных блоков на выбранную тему.
Создание нулевого блока. Панель навигации. Доступные элементы. Работа с текстом. Работа с изображениями. Шейпы. Добавление кнопок. Работа с видео. Работа с тултипами. Вставка кода. Добавление формы. Размеры в пикселях и процентах. Цвет и границы и тени. Порядок слоев. Пару слов о lazyload картинок.
Практика: создание интеренет-магазина на выбранную тему.
Настройка домена. Выбор главной страницы. Стастистика сайта. Googleanalytic и Яндекс метрика. Настройка HTTPS. Настройка шрифтов, цвета для всего сайта. Seo - рекондамендации. Экспорт сайта. Cервисы приёма данных из форм. Платежные системы. Выбор шапки и подвала. Действия с сайтом. Ограничение доступа. Личный кабинет. HEAD для всего сайта. Кастомизация СSS для всего сайта.Ключи от API карт. Фавикон.
Практика: исправление работ, созданных во втором и третьем блоках по SEO-рекоммендациям. Подключение платежной системы. Подключение карты. Добавление фавикона.
Рассмотрение возможностей анимации в Тильда. Анимация в стандартных блоках. Basic в ZeroBlock. Длительность, задержка, увеличение, просмотр. Параллакс. Фиксирование. Step-by-step в ZeroBlock. События: элемент на экране, блок на экране, по скроллу, по ховеру, по клику. Старт анимации. Зацикливание. Шаги. Перемещение, масштаб, опасность, поворот, задержка.
Практика: добавление анимации к работам, созанным во втором и третьем блоках + бонус (выполнение задания на анимацию скроллинга)
Полезные скрипты с mo-tilda. Как персонализировать страницу "Спасибо" в Tilda. Применяем градиент к заголовку в Tilda. Как создать фиксированную кнопку из ZeroBlock в Tilda. Фоновое видео в Zero-блоке. Создание калькулятора для сайта. Эффект печатной машинки. Добавление собсвенного скрипта.
Практика: доработка страницы спасибо для интеренет-магазина, добавление видео в zero-блок лэндинга.
Преподаватели курса