Методы адаптивной трансформации контента в формате гипертекста на корпоративном ТВ и информационных киосках ВУЗа

Цель исследования: рассмотреть и реализовать на практике систему вывода контента на экраны разного разрешения и ориентаций применительно к образовательному учреждению, используя как чистый Smart TV (встроенный браузер современного ТВ), так и подключённый к экранам Digital Signage плеер. В проектировании системы основной упор (и как следствие ключевая задача) делается на отсутствие дублирования контента для разных типов экранов вывода (включая интерактивные сенсорные киоски), что особенно актуально, т.к. реализованная система будет построена на свободных технологиях с открытым исходным кодом и интегрирована в текущий web-сайт ВУЗа, чего не сможет предложить ни одна другая проприетарная программная система Digital Signage.
Материалы и методы: в исследовании используются разные методы трансформации и вывода контента, но преимущественно задействованы методы адаптации, основанные на каскадных таблицах стилей (CSS). Изучен опыт зарубежных программистов, работающих с адаптивной вёрсткой для web и ведущих свои блоги (в разделе «Литература»). Рассмотрены и предложены компромиссные методы вывода графических изображений и видео материалов на основе полученного опыта во время апробации прототипа системы.
Результаты: разработка рабочей системы вывода контента на разноформатные экраны, требующая последующего минимального сопровождения и вмешательства администратора, отвечающего за наполнение контентом. Проведён анализ некоторых потенциальных решений и их совместимости с учётом поддержки браузерами стандартов CSS3 и HTML5, отобраны рабочие решения, которые могут быть использованы в проектировании индивидуальных шаблонов вывода контента в формате гипертекста и CSS конструкции (правил), работающих в указанных выше целях исследования. В статье сравниваются подходы к проектированию адаптивных шаблонов вывода web контента в формате HTML (гипертекста). Рассмотрены основные принципы, при которых контент, предназначенный в первую очередь для сайта ВУЗа, может без стороннего администратора (а также, в некоторых случаях, с минимальным вмешательством) отображаться на корпоративных ТВ и сенсорных интерактивных киосках ВУЗов благодаря применению каскадных таблиц стилей, относительных единиц измерения (vh, vw, vmin, vmax) и тегов, введённых в HTML5. В статье также рассмотрено как можно нивелировать нюансы, связанные с разным разрешением графических изображений и ориентацией экранов.
Заключение: в заключительных абзацах статьи делается вывод о нюансах функционирования разработанной системы, эффективность которой напрямую зависит от выбранных и рассмотренных в статье методах реализации и используемых технологиях. Внедрение системы позволит повысить информированность студентов образовательного учреждения о событиях (анонсированных или проведённых), а администратору системы позволит повысить эффективность работы, публикуя и администрируя контент только в «одном окне» (например, на сайте ВУЗа), а разработанный шаблон вывода и/или CSS правила отобразят его на внутренние экраны, сохранив удобочитаемость и восприятие информации. Выработанные и апробированные методы могут быть использованы программистами, работающими в образовательных учреждениях.

1. Nikolaos Sagiadinos. How to create Responsive Digital Signage Content [Электрон. ресурс] // SMIL Control. 2020. Режим доступа: https://smil-control.com/responsive-digital-signage/. (Дата обращения: 18.01.2024).

2. Chris Coyier. A Guide to the Responsive Images Syntax in HTML. 2020. [Электрон. ресурс]. Режим доступа: https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/. (Дата обращения: 18.01.2024).

3. Anna Fitzgerald. Here’s the Difference Between Flexbox, CSS Grid & Bootstrap [Электрон. ресурс]. 2022. Режим доступа: https://blog.hubspot.com/website/css-grid-vs-flexbox. (Дата обращения: 10.03.2024).

4. Nader Abd ALhamed. Unveiling the Magic: How css works behind the scene [Электрон. ресурс]. 2023. Режим доступа: https://www.linkedin.com/pulse/unveiling-magic-how-css-works-behind-scene-nader-abd-alhamed. (Дата обращения: 10.03.2024).

5. Thierry Koblentz. Creating Intrinsic Ratios for Video [Электрон. ресурс]. 2009. Режим доступа: https://alistapart.com/article/creating-intrinsic-ratios-for-video/. (Дата обращения: 24.03.2024).