CC BY
105
Серия «Естественные и физико-математические науки». 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: [email protected]
Кабаченко Виктор Валентинович — кандидат технических наук, доцент, заведующий кафедрой прикладной информатики в образовании, физико-математический факультет, Псковский государственный университет, Россия
E-mail: [email protected]
Серия «Естественные и физико-математические науки». 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: [email protected]
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: [email protected]
