CC BY
35
WEB-РАЗРАБОТКА В ОБРАЗОВАТЕЛЬНЫХ И ВИКИПЕДИЙНЫХ ПРОЕКТАХ
Евтихов В.Г.1, Евтихова Н.В.2 ©
1Доцент, кафедра прикладной информатики;
Старший преподаватель, кафедра прикладной информатики.
Московский политехнический университет
Аннотация
В настоящей работе рассматривается готовящееся к изданию учебное пособие «Web-разработка в образовательных и википедийных проектах». Учебное пособие, подготовленное авторами статьи, содержит базовые сведения необходимые для веб-разработок. Приводятся основы веб-дизайна, верстки страниц и создания веб-сайтов с использованием HTML элементов и их атрибутов.
Ключевые слова: веб-разработка, веб-дизайн, веб-сайт, веб-контент, стиль, метаязык, скрипт.
Keywords: web-development, web-design, web-site, web-content, style, meta- language, script.
В условиях быстрого информационно-технологического прогресса остро встают проблемы подготовки специалистов в этой области, а также проблемы их освоения более широким кругом инженеров и научных работников. Комплексным решением целой серии задач подготовки специалистов в области информационных технологий является сочетание изучения языков разметки HTML/CSS c освоением википедийных технологий и практическое применение этих знаний аспирантами и студентами при работе над хранением, управлением версиями, содержанием и оформлением своих практических, лабораторных, курсовых, выпускных работ и диссертаций. При этом принципиально важной практической проблемой является соблюдение стандратов, ГОСТов, и других норм при исследовательской работе и подготовке отчетов по ним. Такая подготовка отчетов может быть выполнена с использованием современных технологий веб-дизайна и веб-верстки.
Вёрстка веб-страниц — создание структуры html-кода, размещающего элементы страницы (изображения, текст и т. д.) в окне браузера, согласно разработанного макета, является сложной, творческой и трудоемкой работой. Сделать сайт по заказу таким образом, чтобы элементы дизайна выглядели аналогично макету необходимый, но весьма затратный процесс и очень напоминает полиграфическую деятельность. Вёрстка веб-страниц отличается от полиграфической тем, что необходимо учитывать разницу отображения элементов в различных браузерах и разницу в размерах рабочего пространства устройств. Процесс сложен и ни один из способов не является каноничным и принятым как основа [1].
Торговые площадки, поисковые роботы и социальные сети вносят значительные коррективы в различные компоненты веб-дизайна, клиентского и серверного программного обеспечения. Так в настоящее время немыслимы веб-разработки без использования PHP, серверных и встроенных баз данных (MySQL и SQLite), JavaScript, Ajax и jQuery. Технологии больших данных позволяют обработать большой объем неструктурированных данных, систематизировать их, проанализировать и выявить закономерности там, где человеческий мозг никогда бы их не заметил[2,87]. Это открывает совершенно новые возможности по использованию данных. А с новым высоко эффективным HTML5, c его холстами, геолокацией, встроенным аудио и видео можно достичь большей эффективности мультимедийного веб-контента разрабатываемых сайтов.
Одним из перспективных видов создания веб-контента являются веб- сайты, содержимое которых пользователи могут самостоятельно менять с помощью инструментов,
© Евтихов В.Г., Евтихова Н.В., 2017 г.
предоставляемых самим сайтом (CMS — системы управления содержимым). На базе этого принципа построена известная Всемирная энциклопедия — Википедия и другие проекты Фонда Викимедиа. Википедийная разметка текста во многом повторяет разметку текста с помощью HTML, упрощая и ускоряя ввод текстовой информации. В тоже время в вики-разметку можно внедрять теги и стили HTML, что значительно расширяет область применения википедийных проектов, превращая их в современные мультимедийные веб-проекты.
Актуальность применений и преподавания HTML/CSS при учете их взаимодействия с другими языками и IT-технологиями на базе википедийных проектов возрастает в связи с решениями Российского правительства начать работу по созданию русского сегмента интернет-энциклопедии Википедия. Информационной базой для нового ресурса послужит материал Большой российской энциклопедии (БРЭ) и других отечественных справочников. Распоряжение премьера было опубликовано 29 августа 2016 года [3].
Создана рабочая группа руководителей по созданию «общенационального научно-образовательного интерактивного энциклопедического портала». В рабочую группу также вошли представители министерства связи и массовых коммуникаций, представители Минобрнауки, Минкультуры и РАН. В 2015 году разработку аналога Википедии анонсировало Российское военно-историческое общество. Проект получил название «Рипедия» и также должен был работать на базе БРЭ. Кроме того, на портале планировалось размещать текстовые материалы и иллюстрации из Православной и Исторической энциклопедий, а также авторские статьи ведущих ученых и экспертов.
Представленные в подготовленном пособии примеры по веб- разработкам в образовательных и википедийных проектах позволяют быстро освоить сложные и имеющие творческую основу способы организации процесса веб-верстки с использованием в качестве CMS движка Медиавики. Интерактивное взаимодействие среды верстки веб-страниц с разработчиком рассматривается с помощью имеющихся веб-ориентированных средств на основе написанного на PHP свободного программного обеспечения с открытым исходным кодом, реализующего гипертекстовую среду и изначально создававшуюся в качестве «движка» Википедии.
В книге на примерах представлены способы реализации кода HTML/CSS, которые можно разместить как внутри википедийного проекта, так и посредством стандартного размещения HTML на интернет и интранет ресурсах. Авторы ставили своей целью рассмотреть базовые элементы языка HTML/CSS необходимые для начальной стадии успешной реализации веб- разработок. Поэтому пособие не претендует на полноту перечня и описания всех элементов HTML, которые можно найти в соответствующих спецификациях по конкретной версии и реализации данного языка гипертекстовой разметки.
Учебное пособие реализовано в виде википедийного веб-ресурса и написано с использованием HTML/CSS элементов, википедийной разметки и JavaScript. Внедрение специального кода PHP на стороне сервера, позволило реализовать онлайн перевод содержимого книги на различные иностранные языки. Обучение по изложенному в книге материалу было апробировано авторами на занятиях в Московском политехническом университете на кафедре "Прикладной информатики" для обучения иностранных студентов в смешанных языковых группах.
В подготовленном учебном пособии основное внимание авторов было направлено на предоставление материала в объеме необходимом для получения начальных навыков работы с языком разметки HTML/CSS и закрепления этих навыков в реальном веб-дизайне на одном из действующих вики проектов. Язык разметки википедийных проектов поддерживает гиперссылки для создания ссылок между вики-страницами и является более наглядным, чем HTML, и более безопасным, поскольку использование JavaScript и каскадных таблиц стилей ограничено. При редактировании википедийной страницы можно и нужно использовать основные элементы HTML/CSS в дополнение к языку разметки "вики" или вместо нее. Таким образом википедийные проекты позволяют
задействовать основной потенциал HTML/CSS в наиболее безопасной среде разработки.
Для целей обучения большинство известных программных продуктов поддерживают специально выделенную среду безопасного исполнения компьютерных программ — так называемую "песочницу". Как правило, песочницы используют для запуска непроверенного кода из неизвестных источников, как средство активной защиты от вредоносного кода, а также для обнаружения и анализа вредоносных программ. Также зачастую песочницы используются в процессе разработки программного обеспечения для запуска «сырого» кода, который может случайно повредить систему или испортить сложную конфигурацию. Такие «тестовые» песочницы копируют основные элементы среды, для которой пишется код, и позволяют разработчикам быстро и безболезненно экспериментировать с сырым кодом [4]. В подготовленном учебном пособии освоение практических навыков работы иэкспериментирование пользователями, безопасным для программного обеспечения и данных образом, рассматривается применимо к такой википедийной "песочнице".
Учебное пособие разрабатывалось с целью изучения возможностей HTML и каскадных стилей в веб-разработке и википедийных проектах. В пособии рассмотрены ключевые элементы необходимые для верстки веб- страниц. Пособие ориентировано на использование его в качестве краткого справочника по HTML и CSS. Для этой цели подразделы имеют специальную структуру соответствующую алфавитному перечню имен основных элементов с указанием основного назначения этого элемента. Например: "<ol> — нумерованный список". Пособие представляет собой сочетание примеров HTML элементов и результатов их отображения в интернет браузере в режиме «онлайн». Для облегчения изучения HTML/CSS используются википедийные возможности по работе с HTML элементами и каскадными стилями. Данная реализация позволяет достичь наглядного, минимального срока и высокого качества обучения не только основам HTML, но и основам создания википедийных статей.
Возможность кодирования с использованием HTML имеет важное значение для любого веб-профессионала. Этот навык должен стать отправной точкой для тех, кто учится, как создавать контент для веб. Современный веб- дизайн состоит из следующих основных частей: HTML — информационное наполнение; CSS — стилизация наполнения; JavaScript — динамическое наполнение пользовательского интерфейса; PHP — серверная часть реализации HTML; CMS — управление контентом. В целом учебное пособие также состоит из нескольких частей, каждая из которых посвящена перечисленным составным частям веб-дизайна, а подготовленная часть предоставляет систематизированные начальные сведения о элементах языка разметки HTML.
В справочниках по HTML приводят сведения по HTML4, XHTML и HTML5. В учебном пособии рассматриваются базовые сведения ориентированные на XHTML, но с применением новых возможностей HTML5. XHTML имеет практически те же возможности что и HTML4, поддерживается большинством браузеров, но требует более строго и естественного синтаксиса, в соответствии с требованиями группы языков типа XML. HTML5 — включает в себя перспективные, но проблематичные расширения HTML средствами XML. Предполагается, что возможности XHTML сохранятся в последующих версиях браузеров. Зачем нужно использовать HTML5? Во-первых это следующий стандарт HTML, позволяющий использовать новую функциональность мета-разметки. Во- вторых появляются новые возможности улучшения презентабельности веб- страниц за счет мультимедийных тегов, заменяющих имеющиеся решения типа Flash и Silverlight.
Как уже отмечалось подготовленное учебное пособие само является веб-разработкой и реализовано на HTML/CSS c использованием свободного программного обеспечения с открытым исходным кодом Фонда Викимедиа. Для создания интерактивного взаимодействия с пользователем, оформления внешнего вида кроме разметки HTML применялась вики-разметка и разметка LaTeX. Также для создания стиля оформления соответствующего ГОСТ 3.72- 2001 в пособии широко примененялись разнообразные внешние CSS селекторы. Данный селекторный стиль обрабатывает специальное расширение
Extension: CSS использующее парсер функций [5]. Апробация учебного пособия демонстрирует улучшение качества обучения за счет: онлайн доступности учебного материала; предоставления улучшенной совместимости учебного материала и результатов применения практических приемов; ускорения обмена данными между студентами и преподавателем; встроенной возможности дистанционного прохождения тестов и получения результатов тестирования; охвата большого числа студентов.
Важным обстоятельством является открытый характер википедийных технологий. Следствием этой «открытости» является не бесконтрольность, а напротив, возможность разместить вычислительные кластеры в интранете университета, тогда программное обеспечение и базы данных останутся подконтрольными преподавателям и системным администраторам [6,34]. Поэтому возникает потребность в подготовке пособия не повторяющего HTML учебники и справочники, а пособия дающего образцы наиболее важных навыков и умений и ориентирующие обучающихся в существующем обширном справочном материале. Проблема выбора формы такого пособия неоднозначна. Очевидна необходимость разработки традиционной формы препринта, привычного студентам и преподавателям. Актуально также разработка новых форм обучающего материала в виде HTML/CSS файлов и текстов в формате википедийного проекта. Так в учебном пособии в эти формы представления материала включены образцы форматирования, позволяющие обучающимся использовать принцип: "выполнения задания по образцу". Кроме того в этих новых формах возможно применение наработанных во Всемирной википедии приемов автоматизации, в соответствии с принципами "умолчаний" [7,22]. В соответствии с принципом "умолчаний" более подготовленные в технике программирования пользователи могут использовать погружение в более глубокие методы. Менее подготовленные пользователи, не отвергаются, а применяют опробованные ранее или наработанные другими людьми методы и средства.
Являясь электронным ресурсом, учебное пособие содержит в себе средства для онлайн перевода более чем на 100 иностранных языков, что облегчает его использование для обучения иностранных студентов в много языковых группах. Веб-ориентированный подход к изучению предлагаемого материала открывает широкие возможности и перспективы для дальнейшей проработки предложенного материала, позволит поддерживать его в актуальном состоянии, совершенствуя и дополняя его современными методами работы и содержанием.
Литература
1. Мержевич В. Справочник по HTML [Электронный ресурс]. — Режим доступа: http://htmlbook.ru
2. Царькова Н.И., Смолянов А.С., Bigdata. Развитие, анализ и технологии // Актуальные проблемы гуманитарных и естественных наук. 2016. № 7-1. С. 86-95.
3. Распоряжение правительства [Электронный ресурс]. — Режим доступа: http:// publication.pravo.gov.ru
4. MediaWiki software [Электронный ресурс]. — Режим доступа: https://www.mediawiki.org
5. Extension:CSS [Электронный ресурс]. — Режим доступа: https://www.mediawiki.org/wiki/ Extension:CSS
6. Евтихова Н.В. Кластерные вычислительные системы для задач открытых программных платформ видеонаблюдения и интегрированных систем безопасности. Доклад на международной конференции. // Современные проблемы гуманитарных и естественных наук: материалы XXXI международной научно-практической конференции. - Москва: Изд-во "Институт стратегических исследований": Изд-вр "Перо", 2016. С. 33 -38. (296 с.)
7. Перцовский М.И., Евтихов М.Г. Виртуальные приборы комплементарного типа, анализаторы протоколов и визуальные умолчания. Автоматизация в промышленностиNo7, 2005, с.22-27.
