Модуль 3
46,00ч

Учебный модуль 3. Веб-верстка. Продвинутый уровень

Основные темы модуля:
Правила верстки писем, отличия верстки писем от верстки сайтов, основные почтовые клиенты
SVG: способы подключения svg, управление с помощью viewbox.
Работа js-анимации: setInterval, анимации на основе requestAnimationFrame, инструмент GreenSock.
Загрузка сайта и метрики. Прелоадинг шрифтов, приемы для более быстрой загрузки (минификация, протокол http2 , кэширование). CDN.
Конвейер пикселей: как парсится html и css, расчет геометрии, компоновка, досрочное вычисление геометрии страницы, приемы для улучшения производительности.
Gulp, и его преимущества. Инструмент Parcel: плюсы и минусы.
Препроцессоры и их использование. Препроцессор Sass и PostCSS, сравнение.
Grid. Базовые свойства контейнера. Явная сетка, неявная сетка. Адаптивный грид, особенности. Управление элементами.
Профессиональное развитие верстальщика
Часов в программе
16,00 часов
лекции
20,00 часов
практика
10,00 часов
промежуточная аттестация
46,00 часов
всего
Материально-технические условия реализации программы:
Вид занятий: лекционные и практические
Требуемое ПО:
Операционная система, программы Microsoft Excel, Microsoft Power Point, Power BI, MySQL, Github, Jupyter-notebook и настроенная в зависимости от языка программирования среда разработки: любая привычная IDE.
Информационные ресуры
Блочные и строчные теги [Электронный ресурс]//URL.: https://codepen.io/skillbox_weblayout/pen/KKNqaoyг
Важность в HTML. <b>, <strong>, <i>, <em> [Электронный ресурс]//URL.: https://codepen.io/skillbox_weblayout/pen/rNWwWxL
Веб-стандарты [Электронный ресурс]//URL.: https://web-standards.ru
Группировка в HTML. Подписи к изображениям [Электронный ресурс]//URL.: https://codepen.io/skillbox_weblayout/pen/VwmWmgV
Как мы тестируем frontend (html-верстку). Чек-лист- URL: https://vc.ru/dev/199130-kak-my-testiruem-frontend-html-verstku-chek-list
Web-дизайн и адаптивная верстка. - URL: https://palladiumlab.com/services/design-and-branding/website/
Выбираем профессию frontend- и backend-разработчика: принципы и отличия [Электронный ресурс]//URL.: https://skillbox.ru/media/code/frontend_i_backend_razrabotka/
Образовательные ресуры
Реализация программы дополнительного профессионального образования предусматривает использование дистанционных образовательных технологий, применяемых для преподавания теоретических разделов учебных модулей, выполнения практических ситуаций, а также для промежуточной аттестации с использованием асинхронной формы проведения занятий.
Асинхронное обучение — это метод доставки учебного материала обучающемуся с помощью размещения контента учебного курса на платформе дистанционного образования Skillbox 2.0. Преподаватель и обучающийся не контактируют напрямую. Лекционные занятия представлены в виде видеоконтента (электронный учебный курс). Обучающий на программе профессиональной переподготовки получает бесплатный доступ к электронной библиотечной системе Znanium.

Учебно-методические материалы

Методы, формы и технологии

Реализация программы дополнительного профессионального образования предусматривает использование дистанционных образовательных технологий, применяемых для преподавания теоретических разделов учебных модулей, выполнения практических ситуаций, а также для промежуточной аттестации, применяемой с использованием асинхронной формы проведения занятий.
Асинхронное обучение — это метод доставки учебного материала обучающемуся с помощью размещения контента учебного курса на платформе дистанционного образования Skillbox 2.0.
Преподаватель и обучающийся не контактируют напрямую.
Лекционные занятия представлены в виде видеоконтента (электронный учебный курс).
В рамках практических занятий применяется кейс-технология, или технология ситуационного анализа. Это метод активного обучения на основе реальных ситуаций. Слушателю предлагается короткий текст с подробным описанием ситуации и задача, требующая решения. Целью этого метода является максимальное вовлечение каждого слушателя в самостоятельную работу по решению поставленной проблемы или задачи, развитие самостоятельного мышления, применение теоретических знаний к решению практических задач. Преимуществом кейсов является возможность оптимально сочетать теорию и практику, что важно при подготовке специалистов в сфере разработки веб-приложений.
Каждый слушатель в течение всего периода обучения обеспечивается индивидуальным неограниченным доступом к электронно-библиотечной системе («Znanium») и к электронной информационно-образовательной среде.

Методические разработки

Рекомендации по проведению обучения для лиц с ОВЗ.

Материалы курса

Основные правила верстки писем, отличия верстки писем от верстки сайтов. Основные почтовые клиенты, которые стоит поддерживать, их особенности.
Способы подключения svg на страницу и их отличия, как создавать svg с нуля с помощью специальных тегов. Как управлять размерами svg с помощью viewbox. Определение SVG-спрайта, его преимущества
Работа js-анимации, реализация js-анимации с помощью setInterval, анимации на основе requestAnimationFrame, инструмент GreenSock.
Загрузка сайта и метрики. Прелоадинг шрифтов, приемы для более быстрой загрузки (минификация, протокол http2 , кэширование). CDN.
Конвейер пикселей: как парсится html и css, расчет геометрии, компоновка, досрочное вычисление геометрии страницы, приемы для улучшения производительности.
Gulp, и его преимущества. Установка Gulp. Что такое таск и как его написать. Инструмент Parcel: плюсы и минусы.
Препроцессоры и их использование. Препроцессор Sass и PostCSS, сравнение.
Grid. Базовые свойства контейнера. Явная сетка, неявная сетка. Адаптивный грид, особенности. Именованные области сетки, управление элементами.
Профессиональное развитие верстальщика.

Учебная литература

Маркарян, Л. В. Инструментальные средства Internet-технологий: лабораторный практикум / Л. В. Маркарян. - Москва : Изд. Дом НИТУ «МИСиС», 2018. - 92 с. - ISBN 978-5-907061-76-7. - Текст: электронный. - URL: https://znanium.com/catalog/product/1232369
Лисьев, Г.А. Программное обеспечение компьютерных сетей и web-серверов: учебное пособие / Г. А. Лисьев, П. Ю. Романов, Ю. И. Аскерко. — Москва: ИНФРА-М, 2020. — 145 с. — ISBN 978-5-16-013565-6. - Текст: электронный. - URL: https://znanium.com/catalog/product/1068576
Вагин, Д. В. Современные технологии разработки веб-приложений : учебное пособие / Д. В. Вагин, Р. В. Петров. - Новосибирск : Изд-во НГТУ, 2019. - 52 с. - ISBN 978-5-7782-3939-5. - Текст : электронный. - URL: https://znanium.com/catalog/product/1866926

Темы

1. Верстка HTML-писем 2. SVG 3. Анимация на JS 4. Оптимизация и процесс загрузки 5. Отрисовка сайта 6. Сборщики 7. Препроцессоры и Постпроцессоры 8. CSS Grid 9. Будущее верстки
Лекции
2,00ч
Практические занятия
2,00ч
Всего
4,00ч
Лекции
2,00ч
Практические занятия
2,00ч
Всего
4,00ч
Лекции
2,00ч
Практические занятия
2,00ч
Всего
4,00ч
Лекции
2,00ч
Практические занятия
2,00ч
Всего
4,00ч
Лекции
2,00ч
Практические занятия
2,00ч
Всего
4,00ч
Лекции
1,00ч
Практические занятия
3,00ч
Всего
4,00ч
Лекции
1,00ч
Практические занятия
3,00ч
Всего
4,00ч
Лекции
2,00ч
Практические занятия
2,00ч
Всего
4,00ч
Лекции
2,00ч
Практические занятия
2,00ч
Всего
4,00ч
Промежуточная аттестация 10,00 часов
Промежуточная аттестация по Учебному модулю 3 "Веб-верстка. Продвинутый уровень" проводится путем выполнения практического задания.