Проектирование и реализация Web-интерфейса

Министерство науки и высшего образования РФ 

Федеральное государственное бюджетное образовательное учреждение 

высшего образования 

«Липецкий государственный педагогический университет имени 
П.П. Семенова-Тян-Шанского» 

Кафедра информатики, информационных технологий и защиты 
информации 

Г.А. Никулова 

ПРОЕКТИРОВАНИЕ И РЕАЛИЗАЦИЯ WEB-ИНТЕРФЕЙСА 

Учебно-методическое пособие 

Липецк – 2020 

УДК  004.43
ББК 32.973.4я73
Н653

Рекомендовано к печати кафедрой информатики, 
информационных 
технологий 
и 
защиты 

информации 
ФГБОУ 
ВО 
«Липецкий 

государственный 
педагогический 
университет 

имени П.П. Семенова-Тян-Шанского»
Протокол № 2 от 13.09.2019 г.

    Никулова, 
Г.А. 
Проектирование 
и 
реализация 
Web-интерфейса: 
учебно-методическое пособие   / Г.А. Никулова. –  Липецк: ЛГПУ имени 
П.П. Семенова-Тян-Шанского, 2020. – 66 с. 

В 
учебно-методическом 
пособии 
«Проектирование 
и 
реализация 
Web-интерфейса» представлены теоретические материалы и лабораторные 
работы по основам разработок современных Web-ресурсов, связанных с 
формированием компетенций проектирования и последующего создания 
интерфейса. 
Пособие  входит в состав УМК подготовки бакалавров по направлениям 
«Информационные системы и технологии», «Информационная безопасность», 
бакалавров и специалистов по направлению «Педагогическое образование» 
(профили «Профессиональное обучение», «Информатика» «Информатика и 
математика», «Информатика и дополнительное образование»). 
Рекомендовано 
для 
слушателей 
программ 
дополнительного 
профессионального образования соответствующего направления подготовки.

УДК 004.43 
ББК 32.973.4я73 
Н653 

Рецензенты: 

В.Н. Малыш, д-р техн. наук, профессор 

зав. кафедрой гуманитарных и естественнонаучных дисциплин 
Липецкого филиала Российской академии народного хозяйства и 
государственной службы при президенте РФ 

Л.Н. Боброва, канд. пед. наук, доцент 

ЛГПУ имени П.П. Семенова-Тян-Шанского 

© ФГБОУ ВО «Липецкий государственный педагогический университет имени 
П.П. Семенова-Тян-Шанского», 2020 
© Никулова Г.А., 2020 

ОГЛАВЛЕНИЕ 

 
ВВЕДЕНИЕ………………………………………………………….……….….......4 
Вводные теоретические сведения 
Пользовательский интерфейс. Понятия, стандарты................................................9 
Классификация ресурсов…………………………………………………………..11  
Эргономика интерфейса. Usability. Accessability. UX-дизайн Webинтерфейсов...............................................................................................................12 
Этапы проектирования и разработки интерфейса ресурса..….......…………......16 
Лабораторная работа №1 
КОНЦЕПЦИЯ, ТЕХНИЧЕСКОЕ ЗАДАНИЕ И МАКЕТ РЕСУРСА……………….21  
Лабораторная работа №2 
ФОРМИРОВАНИЕ 
РАЗМЕТКИ 
ДЛЯ 
СОЗДАНИЯ 
СТРУКТУРЫ 

РЕСУРСА...………………………………………………………………………..28 
Лабораторная работа №3 
СТИЛИЗАЦИЯ 
ЭЛЕМЕНТОВ, 
БЛОКОВ 
ИНТЕРФЕЙСА 
И 

ПРЕДСТАВЛЕНИЯ КОНТЕНТА С ПОМОЩЬЮ CSS3..................................41 
 
ЛИТЕРАТУРА…………………………………………………………………….57 

ВВЕДЕНИЕ 

 
В процессе формирования современных Web-ресурсов разработчикам 

приходится 
одновременно 
решать 
ряд 
проблем, 
связанных 
с 
их 

эффективностью в будущем, наиболее значимыми из которых являются: 
 
подготовка грамотного и оригинального контента; 

 
адекватное с точки зрения тематики и информационных задач 

оформление; 
 
создание условий для удобного и эргономичного использования ресурса с 

обеспечением максимально возможного полного доступа к информации всех 
видов 
и 
форматов, 
реализации 
необходимой 
функциональности 

ассоциированных с ресурсом сервисов и виджетов. 

Достижение последних в списке целей невозможно без целенаправленной 

подготовки специалистов, владеющих навыками проектирования и реализации  
Web-интерфейса [1, 2] для решения профессиональных задач.  
 

Целью настоящего пособия является формирование базовых знаний в 

области проектирования и разработки  Web-интерфейса, что включает: 
 
базовый понятийный аппарат в области разработки Web-интерфейсов; 

 
концепции и этапы построения Web-интерфейсов; 

 
основы проектирования взаимодействия в Web-пространстве; 

 
основные инструменты, необходимые для проектирования и создания 

интерфейсов сетевых ресурсов;  
 
основные законы эргономики и UX-дизайна интерфейса; 

 
требования usability и accessability. 

Во время обучения студенты должны научиться: анализировать Web- 

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

Основной акцент в данном пособии сделан на формировании 

практических 
навыков 
проектирования 
Web-интерфейсов 
конкретного 

информационно-тематического и функционального назначения с учетом 
требований современных Web-стандартов.  

Методические указания к лабораторным занятиям содержат: 

 
краткие теоретические сведения по вопросам проектирования Web
интерфейсов, отражающие современные тенденции обеспечения эффективного 
человеко-машинного взаимодействия, в том числе с учетом достижений 
когнитивной науки (как одной из ступеней приближения к проектированию и 
созданию нейроинтерфейсов); 
 
примеры воплощения приемов и методов создания Web-интерфейсов на 

базе современных языков разметки и спецификаций (XHTML, HTML5, CSS3 и 
т.п.); 
 
задания, цель которых –  

 ознакомление 
с 
основами 
проектирования для 
дальнейшего 

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

интерактивного взаимодействия для конкретной целевой аудитории;  
 изучение и оценка существующих в Сети интерфейсов  конкретной 
тематической направленности; 
 разработка собственных интерфейсов ресурсов; 
 экспериментирование 
с 
параметрами 
элементов 
интерфейса, 

значениями свойств в различных форматах для воплощения 
оригинальных идей;  

 
список испольуемой и рекомендуемой литературы  и  internet-источников 

для расширения профессионального кругозора в процессе самостоятельной 
работы студентов.  

Использование данного пособия не требует наличия  у студентов 

лицензионных программ. Однако необходимо использовать лицензионную 
операционную систему со встроенным набором инструментов (текстовый 
редактор для набора кода страниц, браузер для их отображения, простейший 
графический редактор для создания иллюстраций и элементов декора). Кроме 
того, рекомендуется периодически использовать валидатор (для проверки 
корректности написания кода на языке разметки, соответствия спецификации 
HTML и исправления возможных ошибок) (validator.w3.org). 

По 
мере 
приобретения 
и 
расширения 
практических 
навыков 

целесообразно 
использовать 
профессиональные 
инструменты 
создания  

Web-страниц, сайтов и более крупных специализированных ресурсов, а именно:  
 
набор современных версий наиболее популярных браузеров (Google 

Chrome 
(www.google.com/chrome?hl=ru), 
Mozilla 
Firefox, 

(www.mozilla.ru/products/firefox/), Opera (ru.opera.com/download/), Safari под 
MacOS и Windows от Apple (www.apple.com/ru/safari/)); 
 
один из профессиональных редакторов текста с выделением (подсветкой) 

различных типов конструкций и элементов кода, объединяющих проверку кода 
на ошибки (встроенный валидатор) и возможность предварительного 
просмотра результатов (Notepad++ (notepad-plus.sourceforge.net/ru/site.htm), 
EditPlus (www.editplus.com), PSPad (www.pspad.com/ru/download.php), Sublime 

Text 3  (www.sublimetext.com/3), который обладает большими возможностями 
по обеспечению кроссплатформенности разрабатываемых ресурсов; 
 
свободно 
распространяемые 
графические 
редакторы 
Gimp 

(gimp.ru/download/gimp/) 
или 
Paint.Net  
(www.getpaint.net/download.html); 

профессиональный редактор Corel WebDraw (http://www.corel.com/).  

Существует 
ряд 
сервисов, 
преимущественно 
платных 
(часто 
с 

бесплатным 
тестовым 
периодом 
или 
ограниченным 
функционалом 
в 

бесплатном доступе), позволяющих создавать Web-интерфейсы целевых 
страниц в автоматизированном или полуавтоматизированном режимах. К 
таковым относятся сервисы-конструкторы: 
 
LPgenerator (https://lpgenerator.ru/features/); 

 
WIX  (https://ru.wix.com/); 

 
Webstarts (https://www.webstarts.com/); 

 
Webnode (https://www.webnode.ru/); 

 
Tilda (https://tilda.cc/ru/); 

 
1C-UMI  (https://portal.1c.ru/applications/46); 

 
Voog (https://www.voog.com/, мультиязычная платформа); 

 
Xweb (https://www.xweb.io/, англ.); 

 
Bookmark (https://www.bookmark.com/, англ.); 

 
uCraft (https://www.ucraft.com/, англ.); 

 
Webflow (https://webflow.com/, англ.); 

 
IM Creator (https://www.imcreator.com/, англ.); 

 
Shopify (https://www.shopify.com/, англ.); 

 
Simbla (https://www.simbla.com/, англ.); 

 
и бесплатные сервисы 
 
Google Sites (https://sites.google.com/new?pli=1); 

 
Setup (https://www.setup.ru/); 

 
Mobirise (https://mobirise.com/, англ.). 

Подробный обзор online конструкторов можно найти в следующих 

интернет-источниках: 
 
Лучшие 
конструкторы 
сайтов 
Рунета 
(UGUIDE.RU 
30.01.2019,  

https://uguide.ru/rejting-luchshij-konstruktor-sajtov-runeta) ; 
 
Обзор ТОП-30 конструкторов сайтов от Andrew Chornyy (13 March, 2019. 

CEO Plerdy,  https://www.plerdy.com/ru/blog/website-builders-review/); 
 
17 лучших конструкторов, которые помогут создать мобильное 

приложение, 
не 
написав 
и 
строчки 
кода! 
(02. 
12. 
2018, 

https://xmldatafeed.com/article-17-luchshix-servisov-kotorye-pomogut-sozdatmobilnoe-prilozhenie-ne-napisav-i-strochki-koda/).  

Однако, как в любом деле, эффективное использование инструментов, 

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

В. Дунаева [3-4], Э. В. Мержевича [5], Робсона, Э. Фримена [10], Б. Скотта,  
Т. Нейла  [11], П. Ташкова и В. Дронова [12, 13],  Р. Унгера, Б. Хогана [14, 15]. 
Вместе с тем основательное овладение технологией разработки ресурсов 
невозможно без систематической проработки теоретических сведений в 
области Web-технологий [6-10]. 

Для 
осмысленного 
формирования 
иллюстративных 
объектов 
и 

проектирования страниц сетевых ресурсов необходимо ознакомиться с 
советами и рекомендациями  специализированных источников по направлению  
«Web-дизайн» [4, 9, 14] с целью постепенного формирования навыков 
грамотного преставления контента, поскольку исключительно технологические 
компетенции не могут решить задачи обеспечения привлекательности и 
успешности разрабатываемых ресурсов.  

Одним 
из 
требований 
к 
студентам, 
выполняющим 
задания 
к 

лабораторным работам, является создание продуманного проекта каждой 
страницы, 
наличия 
идеи 
и 
логически 
обоснованного 
представления 

содержимого как в вербальной, так и в графической форме.   

При работе с пособием рекомендуется: 
 
освоить технологические приемы, описанные в лабораторных 

работах; 
 
поэкспериментировать с параметрами элементов страницы, создав 

свою композицию, осмысленное текстовое содержание; 
 
просмотреть результат в различных браузерах.