Просмотр исходного текста страницы Использование свободного программного обеспечения — HTML5 Boilerplate, Bootstrap, Initializr для обучения студентов технологиям создания клиентской части web-приложений (Владимир Симонов, OSEDUCONF-2019)

;{{SpeakerInfo}}: {{Speaker|Владимир Симонов}}
<blockquote>
Представлены возможности программных продуктов СПО: HTML5 Boilerplate, Bootstrap, Initializr для разработки клиентского приложения в клиент-серверных облачных вычислениях. Программные продукты используются при обучении студентов направлений «Информатика и вычислительная техника», «Информационные системы и технологии» и других для создания обучающимися полноценных современных распределённых web-приложений, в особенности их фронтэнд части.
</blockquote>

{{VideoSection}}
{{vimeoembed|315021609|800|450}}
{{youtubelink|GZCo_E1hsmo}}
{{SlidesSection}}
[[File:СПО — HTML5 Boilerplate, Bootstrap, Initializr для обучения студентов технологиям создания клиентской части web-приложений (OSEDUCONF-2019).pdf|left|page=-|300px]]

{{----}}

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

Студентам направлений подготовки «Информатика и вычислительная техника», «Информационные системы и технологии» и ряда других необходимо знать вышеуказанные современные технологии, поскольку соответствующие ФГОС ВО содержат ряд компетенций, таких как «способность разрабатывать компоненты аппаратно-программных комплексов и баз данных, используя современные инструментальные средства и технологии программирования» (ПК-2). Соответствующие разделы входят в состав таких дисциплин, как «базы данных», «распределённые и удалённые базы данных», «разработка интернет-приложений», «проектирование и администрирование информационных систем», «программирование мобильных устройств».

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

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

Для разработки клиентского приложения наиболее простыми и удобными являются следующие программные продукты СПО: HTML5 Boilerplate, Bootstrap, Initializr. Данные продукты позволяют разработчикам решить большую часть задач при реализации клиентской части.

HTML5 Boilerplate [3, 6] — это фронтэнд шаблон для разработчиков. Он состоит из набора файлов, содержащих готовые решения, созданные специалистами или взятыми из практики. Файлы обеспечивают основу для любого создаваемого веб-сайта и могут быть скачаны бесплатно. Также шаблон предлагает готовую структуру файлов и папок для будущего проекта и основные конфигурации для работы с сервером. Использование шаблона значительно ускоряет разработку и улучшает её качество.

Bootstrap (Twitter Bootstrap) [4] — свободное программное обеспечение (free and open-source software, FOSS) для создания фронтэнд (front-end) частей сайтов и веб-приложений. Он включает в себя различные шаблоны для создания форм, кнопок, меню и иных компонентов web-интерфейса.

Следует помнить, что Bootstrap ориентирован на достаточно новые версии CSS и HTML, поэтому необходимо быть внимательными при пользовании устаревшими браузерами, требующими дополнительной поддержки. Для установки необходимо зайти на официальный сайт [4] и загрузить Bootstrap. После перенаправления на другую страницу, содержащую следующие различные варианты установки, необходимо выбрать нужную. Для стандартной загрузки выбирают Bootstrap — релиз с уже скомпилированными файлами. Остальные возможности предусмотрены для разработчиков более высокой квалификации, знающих языки стилей LESS и Sass.

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

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

Для работы Bootstrap использует такое понятие, как компоненты — готовые блоки, использующие HTML и/или JavaScript с предопределёнными стилями. Наиболее часто применяются компоненты для создания сетки (колонок), навигационной панели (nav, navbar), для отображения большого центрального блока (jumbotron), контейнера (container) и пр. Можно использовать как готовый компонент, так и создать свой собственный, либо изменить вид готового компонента.

Выбор между Bootstrap и HTML5 Boilerplate зависит от конкретного проекта, поскольку именно его требованиями определяется выбор средств разработки, каждое из которых имеет свои преимущества. Однако возможность объединить их во многих случаях является несомненным достоинством. Поэтому во многих случаях для быстрого создания интерфейса используется Initializr [5]. Заметим, что Initializr автоматически интегрирует Boilerplate и Bootstrap друг с другом, и пользователь избавлен от необходимости производить дополнительные настройки. При помощи Initializr можно легко сгенерировать шаблон, позволяя выбрать только необходимые для проекта части. Очень важно, что Initializr позволяет значительно проще, чем при помощи только Bootstrap и HTML5 Boilerplate, создавать макет страницы. Однако, разработка новых версий СПО Initializr активно продолжалась до 2018 года, когда разработчики предложили в дальнейшем использовать Bootstrap и HTML5 Boilerplate напрямую. Тем не менее, последние доступные на сайте (http://www.initializr.com/) версии Initializr будут работать достаточно продолжительное время, до внесения браузерами или ОС кардинальных изменений, как правило, добавлений, в свою концепцию.

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


{{----}}
[[File:{{#setmainimage:СПО — HTML5 Boilerplate, Bootstrap, Initializr для обучения студентов технологиям создания клиентской части web-приложений (OSEDUCONF-2019)!.jpg}}|center|640px]]
{{LinksSection}}
<!-- <blockquote>[©]</blockquote> -->

* [1] Мартишин С.А., Симонов В.Л., Храпченко М.В. Изучение студентами комплекса MEAN для создания серверной и клиентской частей современных web-приложений (тезисы доклада). // Материалы X Всероссийской научно-практической конференции «Информационные технологии в науке, технике, образовании» / 1–2 ноября 2018 года, Саратовский НИГУ им. Н.Г Чернышевского, г. Саратов. — с. 225–229.

* [2] Мартишин С.А., Симонов В.Л., Храпченко М.В. Современные технологии облачных вычислений над распределёнными данными (тезисы доклада). // Материалы Всероссийской научно-практической конференции «Информационные технологии в науке, технике, образовании» / 17 марта 2017 года, Саратовский НИГУ им. Н.Г Чернышевского, г. Саратов. — с. 49–53

* [3] HTML5 Boilerplate [Электронный ресурс]. — URL: https://html5boilerplate.com/ — Яз. англ. — Дата обращения: 27.11.2018.
* [4] Bootstrap [Электронный ресурс]. — URL: http://getbootstrap.com — Яз. англ. — Дата обращения: 27.11.2018.
* [5] Initializr [Электронный ресурс]. — URL: http://www.initializr.com — Яз. англ. — Дата обращения: 27.11.2018.
* [6] h5bp/html5boilerplate.com [Электронный ресурс]. — URL: https://github.com/h5bp/html5-boilerplate/ — Яз. англ. — Дата обращения: 27.11.2018.

{{fblink|2247257302193945}}                                          
<references/>

[[Категория:OSEDUCONF-2019]]
[[Категория:СПО в образовании]]
[[Категория:Front end development]]
{{stats|disqus_comments=0|refresh_time=2019-02-27T22:15:43.526007|vimeo_plays=4|youtube_plays=0}}