Дмитрий Сергеевич Филиппов, ведущий программист, аспирант кафедры «Вычислительные системы, сети и информационная безопасность»
Москва
Dmitry S. Filippov, Senior programmer, Postgraduate student of the Department of Computer Systems, Networks and Information Security
Moscow
Цель исследования: рассмотреть и реализовать на практике систему вывода контента на экраны разного разрешения и ориентаций применительно к образовательному учреждению, используя как чистый Smart TV (встроенный браузер современного ТВ), так и подключённый к экранам Digital Signage плеер. В проектировании системы основной упор (и как следствие ключевая задача) делается на отсутствие дублирования контента для разных типов экранов вывода (включая интерактивные сенсорные киоски), что особенно актуально, т.к. реализованная система будет построена на свободных технологиях с открытым исходным кодом и интегрирована в текущий web-сайт ВУЗа, чего не сможет предложить ни одна другая проприетарная программная система Digital Signage.Материалы и методы: в исследовании используются разные методы трансформации и вывода контента, но преимущественно задействованы методы адаптации, основанные на каскадных таблицах стилей (CSS). Изучен опыт зарубежных программистов, работающих с адаптивной вёрсткой для web и ведущих свои блоги (в разделе «Литература»). Рассмотрены и предложены компромиссные методы вывода графических изображений и видео материалов на основе полученного опыта во время апробации прототипа системы.Результаты: разработка рабочей системы вывода контента на разноформатные экраны, требующая последующего минимального сопровождения и вмешательства администратора, отвечающего за наполнение контентом. Проведён анализ некоторых потенциальных решений и их совместимости с учётом поддержки браузерами стандартов CSS3 и HTML5, отобраны рабочие решения, которые могут быть использованы в проектировании индивидуальных шаблонов вывода контента в формате гипертекста и CSS конструкции (правил), работающих в указанных выше целях исследования. В статье сравниваются подходы к проектированию адаптивных шаблонов вывода web контента в формате HTML (гипертекста). Рассмотрены основные принципы, при которых контент, предназначенный в первую очередь для сайта ВУЗа, может без стороннего администратора (а также, в некоторых случаях, с минимальным вмешательством) отображаться на корпоративных ТВ и сенсорных интерактивных киосках ВУЗов благодаря применению каскадных таблиц стилей, относительных единиц измерения (vh, vw, vmin, vmax) и тегов, введённых в HTML5. В статье также рассмотрено как можно нивелировать нюансы, связанные с разным разрешением графических изображений и ориентацией экранов.Заключение: в заключительных абзацах статьи делается вывод о нюансах функционирования разработанной системы, эффективность которой напрямую зависит от выбранных и рассмотренных в статье методах реализации и используемых технологиях. Внедрение системы позволит повысить информированность студентов образовательного учреждения о событиях (анонсированных или проведённых), а администратору системы позволит повысить эффективность работы, публикуя и администрируя контент только в «одном окне» (например, на сайте ВУЗа), а разработанный шаблон вывода и/или CSS правила отобразят его на внутренние экраны, сохранив удобочитаемость и восприятие информации. Выработанные и апробированные методы могут быть использованы программистами, работающими в образовательных учреждениях.
Purpose of the study: to consider and implement in practice a system for displaying content on screens of different resolutions and orientations in relation to an educational institution, using both a pure Smart TV (built-in browser of modern TV) and a player connected to Digital Signage screens. In system engineering, the main emphasis (and, as a result, the key task) is on the absence of duplication of content for different types of output screens (including interactive touchscreen kiosks), which is especially important because the implemented system will be built on free, open-source technologies and integrated into the current university website, which no other proprietary Digital Signage software system can offer.Materials and methods: the study uses different methods of transformation and output of content, but adaptation methods based on cascading style sheets (CSS) are mainly used. The experience of foreign programmers working with adaptive layouts for the web and operating their own blogs was studied (in the “Reference” section). Compromise methods for displaying graphic images and video materials are considered and proposed based on the experience gained during testing of the prototype system.Results: development of a system for displaying content on multi-format screens, requiring minimal subsequent support and intervention from the administrator responsible for filling it with content. An analysis of some potential solutions and their compatibility was carried out, taking into account browser support for CSS3 and HTML5 standards, and working solutions were selected that can be used in the design of individual templates for displaying content in hypertext format and CSS designs (rules) that work for the purpose of the study. The article compares approaches to designing adaptive templates for displaying web content in HTML (hypertext) format. The basic principles are considered under which content intended primarily for a university website can, without a third-party administrator (and also, in some cases, with minimal intervention) be displayed on corporate TV and touchscreen kiosks of universities thanks to the use of cascading style sheets (CSS) and relative units of measurement (vh, vw, vmin, vmax) and tags introduced in HTML5. The article also discusses how to level out the nuances associated with different resolutions of graphic images and screen orientation.Conclusion: the final paragraphs of the article conclude on the nuances of the functioning of the developed system, the effectiveness of which directly depends on methods of implementation and technologies used, chosen and discussed in the article. The implementation of the system will increase the awareness of students of an educational institution about events (announced or conducted), and will allow the system administrator to increase work efficiency by publishing and administering content only in “one window” (for example, on the university website), and the developed output template and/or CSS rules will display it on the internal screens, maintaining readability and perception of information. The developed and tested methods can be used by programmers, working in educational institutions.
The authors declare that there are no conflicts of interest present.