Веб-дизайн
базовый
Научим вас проектировать сайты.
Вы научитесь правильно проектировать сайты, научитесь работать с программистами и верстальщиками.
Веб-дизайн
Веб-дизайн
продвинутый
Научим вас верстать сайты на основании дизайна, подготовленного дизайнером. Результатом прохождения курса станет готовая страница сайта-портфолио.
Адаптивная верстка
Вы научитесь делать современные адаптивные сайты.
JavaScript
Научим вас пользоваться языком JavaScript для создания анимации и взаимодействия с пользователем.
CMS
Научим вас переноить статический сайт на CMS WordPress.
Результатом прохождения курса станет готовый сайт портфолио.
Оптимизация и SEO
Дадим базовое понимание принципов продвижения сайта в интернете, принципах работы поисковых машин, настройка сайта (внутренние факторы: скорость работы сайта, robots.txt, описания, внутренние ссылки и т.д.). Вы узнаете, как настроить ваш проект для эффективной работы в интернете.
Веб-дизайн базовый
Научим вас проектировать сайты.
Вы научитесь правильно проектировать сайты, научитесь работать с программистами и верстальщиками.
-
Курс рассчитан на студентов любых курсов архитектурных факультетов.
- Начальное знание 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-сайт. Принципы адаптивной верстки, проработка логики, подготовка макета для верстальщика/программиста.
- Ответы на вопросы.
Веб-дизайн продвинутый
HTML5 CSS3
Предполагает обязательное наличие знаний на уровне курса «Веб-дизайн базовый».
Дает знания, достаточные, для того, чтобы сверстать готовый сайт на основании дизайна, подготовленного дизайнером. Результатом прохождения курса станет готовая страница сайта-портфолио.
Программа курса
Занятие 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.
- Регистрация сайта в поисковых системах, установка.
Адаптивная верстка
HTML5 CSS3
Предполагает обязательное наличие знаний на уровне курса «Веб-дизайн продвинутый.
Программа курса
- Медиа запросы. Понимание media queries. Адаптивный и мобильный дизайн средствами CSS3.
- Mobile-first, пояснение принципа и практическое применение.
- Создание мобильных меню.
JavaScript
HTML5
JavaScript
Предполагает обязательное наличие знаний на уровне курса «Веб-дизайн продвинутый.
2 дня.
Программа курса
Занятие 1.
- Ввод в программирование на JavaScript
- Подключение
- Типы данных
- События
Занятие 2.
- JS Библиотеки
- jQuery
CMS
WordPress
Предполагает обязательное наличие знаний на уровне курса «Веб-дизайн продвинутый.
Дает знания, достаточные, для того, чтобы перенести статический сайт на 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
WordPress
Предполагает обязательное наличие знаний на уровне курса «Веб-дизайн продвинутый.
Дает базовое понимание принципов продвижения сайта в интернете, принципах работы поисковых машин, настройка сайта (внутренние факторы: скорость работы сайта, robots.txt, описания, внутренние ссылки и т.д.).
Программа
- Введение в SEO. Основные принципы оптимизации сайта в сети интернет.
- Внутренняя и внешняя оптимизация.
- Как составить семантическое ядро.
- Как правильно создавать web-страницы для их успешного продвижения. (Минификация, уменьшение запросов, ускорение загрузки за счет сжатия изображений, уменьшение запросов к БД).
- Поисковые системы, их назначение и роль в продвижении сайта. Правила создания контента для успешного индексирования и продвижения сайта.
- Роль и значение различных тегов в продвижении сайта.
- Понятие Юзабилити. Взаимосвязь Юзабилити и SEO.