Учебный курс адаптивного web-дизайна

Серия «Естественные и физико-математические науки». 8/2016 УДК 378.147.39:004

Е. И. Полякова, В. В. Кабаченко УЧЕБНЫЙ КУРС АДАПТИВНОГО WEB-ДИЗАЙНА

Представлено содержание курса основ верстки web-страниц, адаптирующихся к размерам экрана мобильных устройств и настольных компьютеров.

Ключевые слова: интернет-технология, web-дизайн, адаптивный дизайн, отзывчивый дизайн, CSS, Twitter Bootstrap.

Преподавание интернет-технологий студентам информационных направлений подготовки традиционно связано с изучением следующих тем:

• сетевые протоколы прикладного уровня;

• языки разметки гипертекста;

• принципы верстки web-страниц;

• серверные языки программирования;

• клиентские языки программирования.

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

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

Понятие адаптивного дизайна, наряду с понятием «отзывчивого дизайна» (responsive design) возникло после 2010 года [1, 2]. Его идея состоит в выработке таких приемов верстки, которые видоизменяли бы вид web-страницы в зависимости от формата устройства, на котором она отображается. В последней версии популярного фронтенд-фреймворка Twitter Bootstrap [3] эти приемы представлены в удобном для применения виде.

Нашей целью является разработка учебного курса по адаптивной верстке на основе фреймворка Twitter Bootstrap. Этот курс предназначен студентам, изучившим язык разметки гипертекста HTML5 и основы создания каскадных таблиц стилей CSS3. Для тестирования созданных учащимися web-страниц на разных устройствах используется эмулятор мобильных устройств, встроенный в браузер Google Chrome.

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

Вестник Псковского государственного университета

Курс включает в себя следующие темы:

1. Подключение к веб-странице компонентов Twitter Bootstrap. CSS- и js-компоненты фреймворка, порядок их подключения к web-странице.

2. Сетка Twitter Bootstrap. Разметка web-страницы с использованием сетки Bootstrap. Селекторы классов сетки для разных типов устройств. Принципы организации блоков контента на различных типах устройств.

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

4. Адаптация внедренных объектов. Виды внедренных объектов, способы их размещения на web-странице. Отзывчивое представление видео с видеосервисов.

5. Панели навигации. Способы организации вертикальных и горизонтальных панелей навигации на различных типах устройств. Автоматическая адаптация панелей навигации к изменению размеров экрана.

6. Компоненты Bootstrap на различных устройствах. Обзор стандартных визуальных компонентов Bootstrap и особенности их использования на устройствах с различной шириной экрана.

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

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

Литература

1. Маркотт И. Отзывчивый веб-дизайн. М.: Манн, Иванов и Фербер, 2012. 176 с.

2. Gustafson A. Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement. Easy Readers, 2011. 144 p.

3. Megosinarso R. Step By Step Bootstrap 3: A Quick Guide to Responsive Web Development Using Bootstrap 3. Create Space Independent Publishing Platform, 2014. 236 p.

Об авторах

Полякова Екатерина Игоревна — магистрант кафедры прикладной информатики в образовании физико-математического факультета, Псковский государственный университет, Россия

E-mail: impala2033@yandex.ru

Кабаченко Виктор Валентинович — кандидат технических наук, доцент, заведующий кафедрой прикладной информатики в образовании, физико-математический факультет, Псковский государственный университет, Россия

E-mail: vkabachenko@gmail.com

Серия «Естественные и физико-математические науки». 8/2016

E. Polyakova, V. Kabachenko

A TRAINING COURSE OF ADAPTIVE WEB-DESIGN

The article presents the content of the basic course of web-page design. The course focuses on the work with web-pages which can adapt to the size of the screens of mobile devices and desktop computers.

Key words: internet-technology, web-design, adaptive design, responsive design, CSS, Twitter Bootstrap.

About the authors

E. Polyakova - Master Student of the Department of Applied Informatics in Education, Faculty of Physics and Mathematics, Pskov State University, Russia.

E-mail: impala2033@yandex.ru

V. Kabachenko - Candidate of Technical Science, Associate Professor, Head of the Department of Applied Informatics in Education, Faculty of Physics and Mathematics, Pskov State University, Russia.

E-mail: vkabachenko@gmail.com