2.2. Разработка дизайна
Перед разработкой дизайна необходимо определить к какому виду веб-сайтов относиться электронный учебно-методический комплекс. Веб-сайты по визуальному представлению делятся на три вида:
– текстовые или информационные веб-сайты: подобные веб-сайты разрабатываются с акцентом на текстовые материалы; эти веб-сайты, имеют относительно маленький вес, вследствие чего быстро загружаются; дизайн таких веб-сайтов выполняется в минималистическом стиле;
– графические веб-сайты: данные веб-сайты используют элементы графического пользовательского интерфейса, позаимствованные из области разработки программного обеспечения, например, прижатая к верхней части страницы строка меню, пиктограммы и всплывающие окна; некоторые компоненты графического пользовательского интерфейса довольно часто применяются и в обычных текстовых сайтах;
– тематические или метафорические веб-сайты: такие веб-сайты имеют дизайн веб-страниц, которые выглядят подобно объектам из реальной жизни, например, интерфейс в виде руля на веб-сайте о машинах; при тематическом дизайне на веб-сайтах применяется много визуальных эффектов [28].
Электронный учебно-методический комплекс по дисциплине «Разработка программных приложений» по визуальному представлению будет являться текстовым веб-сайтом. Отсюда следует, что дизайн электронного учебно-методического комплекса должен быть максимально простым и понятным для студента и должен соответствовать структуре рабочей программы. При разработке дизайна, следует учесть, что цвета, шрифт, размер текста и структура электронного комплекса должны быть направлены на обеспечение легкого восприятия информации.
Следующим шагом в разработке дизайна электронного комплекса является выбор цветовой гаммы. Основными цветами в дизайне электронного учебно-методического комплекса будут являться белый, голубой, серый и черный. Светлые цвета (белый, голубой и серый) будут мотивировать студентов на обучение, что должно поспособствовать повышению эффективности образовательного процесса.
Белый цвет соотносится с чистотой, простотой, легкостью, мудростью и самоотдачей. Голубой цвет ассоциируется со спокойствием, позволяет сосредоточиться. Серый цвет является нейтральным цветом и не вызывает раздражения. Черный цвет ассоциируется с изысканностью и стилем [25].
Белый цвет будет являться основным цветом в интерфейсе электронного комплекса. Голубой цвет будет использоваться для фона заголовков. Светлый оттенок серого будет применяться для обрамления элементов интерфейса электронного комплекса. Черный цвет будет использоваться для горизонтального меню.
2.3. Верстка веб-страниц
После того, как был разработан макет электронного учебно-методического комплекса по дисциплине «Разработка программных приложений» его необходимо сверстать с помощью языков HTML и CSS, также для верстки веб-страниц будет использоваться фреймворк Bootstrap.
Описание блоков, из которых состоит макет комплекса:
– nav class = navbar navbar-inverse navbar-fixed-top role = navigation –блок навигации, который будет растянут по ширине экрана и будет всегда располагаться в верхней части веб-страницы;
– div class = container head_site – блок с пунктами горизонтального меню, распологается в блоке навигации;
– div class = container mid_site – центральный блок, который с помощью фреймворка Bootstrap разделен на две колонки; в узкой колонке будет располагаться вертикальное меню, а в широкой колонке будет находиться текстовое и функциональное содержание электронного комплекса;
– div class = col-md-3 left_menu – блок с вертикальной навигацией; в этом блоке будет размещена навигация по разделам и лабораторным работам дисциплины «Разработка программных приложений»;
– div class = col-md-9 content_area – блок, в котором будет отображаться содержание главной страницы учебно-методического комплекса, а также в этом блоке будут находиться ссылки на лекции и лабораторные работы;
– div class = container bottom_site – блок, в котором будет находиться подвал сайта или нижняя часть сайта;
– footer – подвал сайта; блок, в котором будет находиться информация о разработчике электронного учебно-методического комплекса.
Разработку электронного учебно-методического комплекса необходимо начать с создания папки «sedo-pages» на локальном сервере. Далее в этой папке желательно создать следующие папки:
– папка «css» – в этой папке будут находиться файлы стилей;
– папка «html» – в этой папке будут находиться HTML-страницы электронного комплекса с различным тематическим содержанием.
Следующим шагом в разработке будет создание файла «index.html». Создается данный файл следующим образом: в стандартном текстовом редакторе Notepad нужно нажать на кнопку главного меню «File»; затем выбрать пункт «Save As»; откроется диалоговое окно сохранения файла; в строке имени файла нужно написать имя файла с расширением .html; в строке типа файла в выпадающем списке нужно выбрать «All Files»; в выпадающем списке кодировок нужно выбрать UTF-8, делается это для того, чтобы кириллица корректно отображалась на веб-страницах.
После создания файла «index.html» в нем необходимо прописать HTML-код структуры веб-страницы с использованием блочного тега <div>. HTML-код макета электронного учебно-методического комплекса по дисциплине «Разработка программных приложений» будет выглядеть так, как показано в листинге 2.1.
Листинг 2.1:
<html>
<head>
<title></title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container head_site">
</div>
</nav>
<div class="container mid_site">
<div class="row">
<div class="col-md-3 left_menu">
<div class="list-group discipline_list_sections">
</div>
<div class="list-group discipline_list_labs">
</div>
</div>
<div class="col-md-9 content_area">
<div class="thumbnail">
<p class="list-group-item active top_title"></p>
<h4></h4>
<div class="caption-full">
</div>
<hr>
</div>
</div>
</div>
</div>
<div class="container bottom_site">
<footer>
<div class="row">
<div class="col-lg-3 empty_area">
</div>
<div class="col-lg-9 copyright_area">
<hr>
</div>
</div>
</footer>
</div>
</body>
</html>
В папке «css» необходимо создать файл с именем «style.css». Создается этот файл точно также, как и файл «index.html». Единственное, что изменится, это расширение сохраняемого файла. В данном случае файлу нужно указать расширение .css. Файл «style.css» будет содержать описание визуального представления блочных элементов и дизайн отдельных тэгов электронного учебно-методического комплекса.
Большая часть описания стилей классов, которые используются при верстке макета, находится в файле «bootstrap.min.css». Этот файл является частью фреймворка Bootstrap. В данном случае для разработки макета веб-страниц электронного учебно-методического комплекса была использована сеточная система. Данная система основывается на следующих компонентах:
– контейнеры – блоки, которые имеют класс .container;
– ряды – блоки, которые описываются классом .row;
– адаптивные блоки – блоки, в которых располагаются колонки, например, col-md-9.
Контейнеры – это блоки, которые являются фундаментом разметки, то есть ряды и адаптивные блоки никак не могут быть расположены вне области контейнера. Во фреймворке Bootstrap существует два вида контейнеров: адаптивно-фиксированый и адаптивно-резиновый контейнеры [29].
Ряды – это блоки, которые предназначены для расположения в них адаптивных блоков. Ряды содержат в себе колонки, а также их разрешается помещать в контейнеры и адаптивные блоки [29].
Адаптивные блоки – это главные элементы адаптивного макета. Именно эти блоки решают, как будет отображаться макет веб-страниц на различных устройствах и при разных разрешениях экрана. Адаптивные блоки размещаются друг за другом строками. Одна строка может содержать такое число адаптивных блоков, сумма колонок которых не превышает число двенадцать. Блоки, которые не поместились в одну строку, располагаются на следующей строке [29].
Описание классов .container, .row, .col-md-3, .col-md-9 и многих других классов, а также описание правила @media для различных ситуаций содержится в файле «bootstrap.min.css». Фрагмент кода, содержащийся в файле «bootstrap.min.css», представлен в листинге 2.2.
Листинг 2.2:
.nav {
display: block;
}
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width:992px) {
.container {
width: 970px;
}
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.col-md-3 {
width: 25%;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-md-9 {
width: 75%;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
@media (min-width:992px) {
.col-md-3, .col-md-9 {
float: left;
}
}
Чтобы применить стили для веб-страницы необходимо файл «style.css» подключить к файлу «index.html». Для этого в HTML-файле, между тегами <head> и </head> необходимо добавить следующие строчки кода, как показано в листинге 2.3.
Листинг 2.3:
<link href="css/sode-pages.style.css" rel="stylesheet">
Теперь необходимо установить фреймворк Bootstrap. Для этого необходимо файлы «bootstrap.min.css» и «bootstrap.min.js» подключить к файлу «index.html». Делается это аналогичным образом, как и с файлом «style.css»: между тегами <head> и </head> необходимо прописать следующие строчки кода, как показано в листинге 2.4.
Листинг 2.4:
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
В результате выше описанных действий происходит связь стилевых файлов и файлов, относящихся к фреймворку Bootstrap, с HTML-файлом. При запуске веб-страницы браузер будет использовать CSS-файлы, в которых прописаны стили для всех элементов и классов макета. Веб-страница электронного учебно-методического комплекса с подключенными CSS-файлами будет выглядеть так, как показано на рисунке 2.2.
Рисунок 2.2 – Сверстанная веб-страница
Сверстанный макет электронного учебно-методического комплекса по дисциплине «Разработка программных приложений», благодаря фреймвору Bootstrap, является адаптивным [29]. Дизайн веб-страницы электронного комплекса будет изменяться в зависимости от размера окна браузера или разрешения экрана. Это означает, что содержание веб-страницы всегда будет находиться в видимой области окна веб-браузера, то есть горизонтальная прокрутка будет отсутствовать. Отсутствие горизонтальной прокрутки является одним из требований, предъявляемых при разработке к электронному учебно-методическому комплексу [28].