КУРС
3 дня

Веб-дизайн
базовый

Научим вас проектировать сайты.
Вы научитесь правильно проектировать сайты, научитесь работать с программистами и верстальщиками.

КУРС
5 дней

Веб-дизайн
продвинутый

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

МАСТЕР-КЛАСС
1 день

Адаптивная верстка

Вы научитесь делать современные адаптивные сайты.

КУРС
2 дня

JavaScript

Научим вас пользоваться языком JavaScript для создания анимации и взаимодействия с пользователем.

КУРС
4 дня

CMS

Научим вас переноить статический сайт на CMS WordPress.
Результатом прохождения курса станет готовый сайт портфолио.

МАСТЕР-КЛАСС
1 день

Оптимизация и SEO

Дадим базовое понимание принципов продвижения сайта в интернете, принципах работы поисковых машин, настройка сайта (внутренние факторы: скорость работы сайта, robots.txt, описания, внутренние ссылки и т.д.). Вы узнаете, как настроить ваш проект для эффективной работы в интернете.

Веб-дизайн базовый

КУРС
3 дня

Научим вас проектировать сайты.
Вы научитесь правильно проектировать сайты, научитесь работать с программистами и верстальщиками.

  • Курс рассчитан на студентов любых курсов архитектурных факультетов.
  • Начальное знание Photoshop желательно.

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

Программа курса

Занятие 1.

  • Общее понятие www (World Wide Web), как работает интернет, основные технологии и понятия в веб-разработке.
  • Что такое сервер. Виды серверов. Взаимодействие компьютера пользователя с сервером. Модель клиент-сервер.
  • Протоколы. HTTP, FTP, SMTP+POP3, SSL.
  • Что такое сайт — как он устроен и работает. Виды сайтов по назначению и функциональности.
  • Как создается сайт — от задумки до размещения на хостинге.
  • Языки программирования, используемые в разработке. Серверные и скриптовые языки, языки разметки, языки баз данных (их задачи, отличия). На примере XML, HTML, JS, PHP, CSS, SQL. (Сервер-клиент).
  • Программное обеспечение, необходимое для создания сайта.
  • Ответы на вопросы.

Занятие 2.

  • Основные принципы построения макета сайта. Понятия UX и UI.
  • Виды и принципы верстки современных сайтов (резиновые макеты, разные устройства — разрешения экранов, возможности взаимодействия с пользователем).
  • Интерактивные элементы (элемены UI), анимация, видео и аудио на сайте, общие понятия.
  • Основные принципы правильной верстки макета (слои, векторные элементы svg, шрифты, размеры, и тд.).
  • Подготовка макета для верстальщика: правильная разбивка на слои, именование, шрифты.
  • Практика работы в программах Adobe Photoshop и Adobe Illustrator по оптимизации изображений для web-страницы и создании графических элементов сайта. Pixel perfect, SVG.
  • Домашнее задание.
  • Ответы на вопросы.

Занятие 3.

  • Проверка домашнего задания, разбор ошибок.
  • Responsive-сайт. Принципы адаптивной верстки, проработка логики, подготовка макета для верстальщика/программиста.
  • Ответы на вопросы.

Веб-дизайн продвинутый

КУРС
5 дней

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

Программа курса

Занятие 1.

  • Введение в язык разметки HTML. Теговая структура языка. Основные теги для формирования базовой структуры web-страницы. Основы синтаксиса языка, правила написания и технические приемы.
  • Теги.
    • Понятие ссылки. Основное назначение ссылки. Понятие абсолютной и относительной ссылок. Теги для вставки ссылок на web-страницу.
    • Теги разметки текста: p, b, i, em, strong, h1-8, ul, ol. Атрибуты тегов.
    • Таблицы. Таблица как элемент вывода данных и как элемент верстки страницы. Минусы табличной верстки.
    • Формы. Для чего нужны формы. Примеры использования форм на реальных сайтах. Теги для вставки формы и полей формы на страницу. Как работает форма, ее внутренний механизм.
    • Кнопки
    • Фреймы
  • HTML5. Семантика. Логика использования тегов HTML5.

Занятие 2.

  • Блоковая модель. На примере реальной страницы показать работу блоковой модели, перетекания и т.д.
  • Тэги div, span.
  • Знакомство с программой Sublime Text для создания web-страниц. Рабочая среда программы, основные навыки в работе с программой.
  • Плагин Emmet для Sublime Text 3.
  • На примере сверстанного в фотошопе макета начинаем верстать страницу:
    • Задаем структуру документа
    • Основные блоки в структуре макета: заголовок, тело, колонки, подвал.
    • Текст и изображения.
    • Элементы интерфейса.

Занятие 3.

  • Введение в CSS. CSS — как основное средство стилизации и разметки страницы.
  • Что такое CSS? Методы подключения стилей (подключение внешних файлов CSS к странице)
  • Создание стилей для элементов страницы. CSS селекторы. Классы и идентификаторы (их различия).
  • Размеры и стили в Avocode.
  • Позиционирование элементов страницы с помощью CSS.

Занятие 4.

  • Продолжаем верстать страницу по макету.
  • Понятие страницы фиксированного размера и «резиновая» страница.
  • Создание первого многостраничного сайта блочной верстки с горизонтальным и вертикальным меню и формой обратной связи. Использование изображений и графических элементов созданных в программе Adobe Photoshop.
  • Верстка в две и три колонки. Технические тонкости и приемы создания web-страниц блочной верстки.

Занятие 5.

  • Взаимодействие с реальным сервером.
  • Выбор и покупка хостинга. Взаимодействие с хостером.
  • Выбор и покупка доменного имени. Обзор возможностей по работе с сервером через интерфейс сайта хостера (личный кабинет).
  • «Привязка» доменного имени к хостингу. Доступ к файлам сайта по http и ftp протоколам. Загрузка файлов сайта на сервер хостера. Программы для взаимодействия с сервером по ftp.
  • Регистрация сайта в поисковых системах, установка.

Адаптивная верстка

МАСТЕР-КЛАСС
1 день

Предполагает обязательное наличие знаний на уровне курса «Веб-дизайн продвинутый.

Программа курса

  • Медиа запросы. Понимание media queries. Адаптивный и мобильный дизайн средствами CSS3.
  • Mobile-first, пояснение принципа и практическое применение.
  • Создание мобильных меню.

JavaScript

КУРС
2 дня
JScript

Предполагает обязательное наличие знаний на уровне курса «Веб-дизайн продвинутый.
2 дня.

Программа курса

Занятие 1.

  • Ввод в программирование на JavaScript
  • Подключение
  • Типы данных
  • События

Занятие 2.

  • JS Библиотеки
  • jQuery

CMS

КУРС
4 дня

Предполагает обязательное наличие знаний на уровне курса «Веб-дизайн продвинутый.
Дает знания, достаточные, для того, чтобы перенести статический сайт на CMS WordPress.
Результатом прохождения курса станет готовый сайт портфолио.

Программа курса

Занятие 1.

  • Что такое CMS? Какие сайты можно создавать с помощью CMS? Наиболее популярные CMS.
  • Знакомство с CMS WordPress. Особенности и преимущества ее использования.
  • Установка CMS WordPress на локальный компьютер на примере XAMPP.
  • Настройка CMS WordPress.
  • Обзор административной панели управления WordPress.
  • Основные настройки системы WordPress.
  • Управление контентом, темой и тд.

Занятие 2.

  • Планирование информационной структуры сайта на WordPress.
  • Подготовка и публикация материалов. Визуальный редактор материалов. Загрузка и вставка медиафайлов в материалы. Настройки материалов в WordPress.
  • Управление категориями материалов на сайте.
  • Занятие 3.
  • Дизайн сайта.
  • Управление дизайн-шаблонами WordPress.
  • Поиск и установка дизайн-шаблона для сайта.
  • Работа со структурой шаблона – настройка позиций и внешнего вида модулей WordPress.
  • Управление плагинами WordPress.
  • Обзор популярных расширений для реализации на сайте: форм, карты сайта, форума и т.д.

Занятие 3.

  • Программирование темы оформление для WordPress. Структура темы (иерархия файлов темы, принцип работы CMS WordPress с точки зрения дизайнера-разработчика) — алгоритм работы.
  • Структура темы:
    • Файлы темы, структура
    • Стартовая страница (спец. дизайн стартовой страницы)
    • Внутренняя страница
    • Архив
    • Блог
    • Спец. страница.
  • Widgets и Custom Menu.
  • Header и Footer Template.
  • Начинаем переносить сверстанную страницу (в курсе «Веб-дизайн продвинутый») на WordPress.

Занятие 4.

  • CSS и JS в темах WP.
  • WordPress Loop.
  • Custom Post Types.
  • Custom Fields.
  • Permalinks
  • Занятие 6.
  • Перенос сайта на хостинг. Нюансы при переносе.
  • Создание резервных копий.
  • Защита от взлома.
  • Автоматизация создания копий БД.
  • Ответы на вопросы.

Оптимизация и SEO

МАСТЕР-КЛАСС
1 день

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

Программа

  • Введение в SEO. Основные принципы оптимизации сайта в сети интернет.
  • Внутренняя и внешняя оптимизация.
  • Как составить семантическое ядро.
  • Как правильно создавать web-страницы для их успешного продвижения. (Минификация, уменьшение запросов, ускорение загрузки за счет сжатия изображений, уменьшение запросов к БД).
  • Поисковые системы, их назначение и роль в продвижении сайта. Правила создания контента для успешного индексирования и продвижения сайта.
  • Роль и значение различных тегов в продвижении сайта.
  • Понятие Юзабилити. Взаимосвязь Юзабилити и SEO.