Система управления эфирными телеканалам, с эргономичным интерфейсом

Аннотация


В данной статье рассмотрено программное приложение, предназначенное для формирования и управления эфира телеканала, вещающего в Internet. Это приложение является web-ориентированным, и создано с учетом последних тенденций, характерных для сети.

In this article a new program device intended for formation and management of an ether of a telechannel, broadcasting in Internet. It is a web-focused, and is created in view of last tendencies, characteristic for a network.

Система управления эфирными телеканалам, с эргономичным интерфейсом.

Информация о проекте.

Роль веб-приложений в жизни информационного общества постоянно растет. Веб-приложения - это будущее сети, программных приложений, сетевых архитектур и даже компьютеров и операционных систем. Приложения, основанные и ориентированные на работу в Internet, проникнут практически во все виды программ, которыми мы пользуемся сегодня. Естественно, растущие потребности требуют новых затрат, ресурсов и технологий. В рамках информационной системы телевещания, организованной на кафедре ЭВА, МГИЭМ, был создан программный модуль, позволяющий систематизировать и упорядочить существующий видео материал и реализовать систему для формирования и управления эфирной сеткой телеканалов.

Информационная телевизионная система приема видео включает в себя: модуль преобразования формата принятого файла, каталог для хранения принятых файлов и модуль организации телевещания, так называемый – “playlist”. Последний будет рассмотрен в этой статье.




Для организации вещания используется Windows Media 9 Series Streaming Server. Он поучает потоковое видео в формате WMV и транслирует его. Изначально эфирный лист формировался как набор ссылок на расположенные в архиве видеофайлы, но это было весьма трудоемко, так как требовало специальных знаний, навыков и уровня доступа. Для устранения этих недостатков и было принято решение о создании данного сервиса.

Примененные технологии и особенности разработки.

Модуль “playlist” расположена и функционирует в сети Internet. Поэтому при ее создании учитывались особенности среды, в которой будет функционировать система. Для создания данного интерфейса были использованы: средства языка разметки HTML и XML, средства языков программирования Javascript, PHP и язык запросов к базе данных MYSQL. В проект включены готовые, свободно-распространяемые скрипты, библиотеки и модули, упрощающие процесс создания, настройки и функционирования систем с подобными интерфейсами управления, например библиотека языка php - XAJAX, обеспечивающая возможность использования и обращения к php функциям, как к функциям JavaScript. При создании пользовательского интерфейса, также уделено большое внимание, эргономике проекта, чтобы работа с приложением была приятна, и не напрягала зрение пользователя.

Данный программный модуль интегрирован в каталог для хранения видео, его работа базируется на данных, получаемых из каталога видео. Все размещенные в видео каталоге материалы, могут быть добавлены в Playlist на выбранный канал в список воспроизведения прямо из видео хранилища. “Playlist” реализован в виде 3-ех ячеек, содержащими ссылки. Ячейки соответственно: содержимое каталога, содержимое “Playlist” данного канала, удаленные ссылки. В совокупности, ссылки и ячейки представляют систему – Drag and Drop меню, которое реализовано средствами javaScript. В основе перемещение элементов лежат обработка событий таких как: наведение на ссылку, нажатие кнопки мыши на ссылке, удержание кнопки и перетаскивание ссылки, отпускание кнопки. Каждое событие вызывает определенное действие, в зависимости от того, какими свойствами обладают перемещаемые объекты и объекты “цели”. Так, например, событие отпускание мыши приводит к записи ссылки в базу, если ссылку перемещают во второй контейнер. Или удаление, при перемещение в последний. Все свойства, которыми обладал объект, сохраняются в специально созданном объекте javaScript, который может модернизироваться в процессе работы. Удаленные же из “Playlist” ссылки, сохраняются в буфере созданном на javaScript. Поэтому всегда можно восстановить ошибочно удаленную ссылку, однако, после перезагрузки страницы, “откат” не возможен. Экспорт “playlist” для каждого канала в отдельности, в формате ТВ-сервера, производится автоматически и формируется в отдельном файле, к которому, напрямую подключается Windows Media 9 Series Streaming Server, который уже и осуществляет трансляцию. В процессе разработки возникла стандартная проблемой - различные браузеры обрабатывают элементы на странице по-разному. Существует ряд свойств, поддерживаемых не всеми браузерами. Для устранение этого недостатка, была написана функции, имитирующие необходимые свойства. Так как планируется дальнейшее развитие и модернизация системы, возникнет потребность в поддержке работы со временем и датой. При этом основой должно будет стать именно время сервера, а не клиента. Для этого была создана специальная функция, которая при загрузке приложения получает серверное время, а затем, уже обрабатывает полученное значение динамически. Весь процесс управления вещанием происходит в режиме реального времени через сеть Internet, что позволяет управлять системой вещания удаленно из любой точки мира и в любое время, где есть доступ к сети, при наличии соответствующих прав доступа.




Интерфейс “playlist”

При создании “playlist”, помимо разработки эффективной программной части, особое внимание было уделено созданию продуманного, эргономичного, приятного и понятного пользователю интерфейса управления и навигации. Он напоминает стандартный интерфейс, используемый в таких известных продуктах как: Microsoft Office и Microsoft Windows. Такой выбор обусловлен тем, что навыками, необходимыми для управления подобными приложениями, обладают практически все пользователи современного ПК, что позволяет сделать систему простой и понятной пользователю. Для этого был произведен анализ существующих web технологий, остановимся на их особенностях более подробно.

Современные тенденции в разработке интерфейсов WEB приложений.

В настоящее время, в разработке WEB приложений, существует тенденция к разграничению клиентской и серверной части, этим и обуславливается повсеместное использование шаблонов, таких как Smarty и XSLT. Сейчас проекты становятся сложнее и переплетать между собой различные технологии становиться слишком дорого и для разработчика. Так, например, все стили форматирования выносятся в CSS или в XSL файлы, HTML или XML данные хранятся в других разделах, серверные обработчики в-третьих, базы данных в-четвертых. И если еще 5-6 лет назад практически везде можно было увидеть переплетение всего этого в одном файле, то сейчас это все чаще становиться редкостью. При разработке более сложных проектов возникает необходимость в структурированности и удобочитаемости кода. Не следует засорять код программиста кодом верстальщика, а код верстальщика - правками дизайнера, и так далее. Возникает необходимость в разграничении работы. Так, например, дизайнер будет делать свою работу, верстальщик свою, программист свою, и при этом никто друг другу мешать не будет. В итоге каждому участнику проекта достаточно будет знать только те данные, с которыми ему придется работать. В таком случае производительность группы и качество проекта повышается в разы. В настоящее время эта проблема с успехом решается путем использования шаблонов, однако это тоже создает определенные трудности.




Рассмотрение среды Java Script

На сегодняшний день, все веб-приложения работают по протоколу HTTP, по схеме клиент-сервер. То есть пользователь получает данные и далее, после внесения информации или ее изменений, они отправляются на сервер. В результате, вместо того, чтобы целиком сосредоточится на работе с данными, обработать их полностью, и по завершению всех этапов преобразования, сохранить изменения на тот же сервер, пользователю приходится периодически отправлять данные на сервер, зачастую для проведения абсолютно примитивных операций, например проверка правильности введенного e-mail. На практике это означает сплошные неудобства: ошибки при передаче данных, ошибки в введенной информации и, самое главное, потраченные нервы и время пользователя. Все это приводит к ухудшению качества трудовой деятельности и снижению продуктивности. Для того чтобы хоть как-то облегчить работу с приложениями был создан клиентский язык – Javascript. Благодаря нему существует возможность, для перенесения определенного количества программной логики в HTML-страницу, что ускорит реакцию на действия пользователя. Но здесь есть один недостаток. Одна из проблем заключается в том, что как только JavaScript попадает в браузер пользователя, программная логика доступна для просмотра невооруженным глазом. До некоторой степени это не угрожает проекту, но при передачи конфиденциальной информации, такое решение, зачастую, невозможно.

Вторым аспектом, который не способен решить Java Script заключается в том, что серьезную программную логику в страницу поместить невозможно. Интерфейс для этого просто не предназначен. Вся логика должна находиться на уровне приложения, а это значит, приходится возвращаться на сервер. Сложности вызывает и тот факт, что Java Script поддерживается не всеми браузерами или не все пользователи включают ее поддержку. Поэтому проверка или обработка данных, реализация программной логики должны обрабатываться на сервере. Очевидно, что функций Java script, в последнее время стало совершенно недостаточно, так как процедуру передачи и получения информации между сервером и клиентом язык упростить не смог. Передача существовала по средствам методов GET и POST. Но на сегодняшний день существует намного более рациональный способ обмена данными между клиентом и сервером - объект языка Java Script – XMLHttpRequest. Этот объект впервые был реализован компанией Microsoft в виде объекта ActiveX, но сейчас он доступен как встроенный объект в некоторых браузерах. Этот объект позволяет с использованием JavaScript осуществлять HTTP-запросы к удаленному серверу без необходимости перезагружать страницу. По сути HTTP-запросы отправляются и получаются полностью вне страницы, а пользователь их даже не замечает. Это позволяет достичь создания быстрого пользовательского интерфейса с сохранением при этом программной логики на сервере. Но технология на сегодняшний день еще не стандартизована, поэтому в различных браузерах она работает по разному, либо не работает вовсе.




Ajax технология

К сожалению, средствами XMLHttpRequest, возможно ускорить работу приложения, но улучшить интерфейс и создать иную систему работы с ним – невозможно. Улучшить ситуацию здесь помогает AJAX (Asynchronous JavaScript and XML) - подход к построению пользовательских интерфейсов веб-приложений, при котором web-страница, не перезагружаясь, сама догружает нужные пользователю данные. AJAX - один из компонентов концепции DHTML. Впервые об Ajax заговорили после появления в феврале 2005-го года статьи Джесси Джеймса Гарретта "Новый подход к веб-приложениям". Ajax - это не самостоятельная технология. Это идея, которая базируется на двух основных принципах. Использование DHTML для динамичного изменения содержания страницы. Использование XMLHttpRequest для обращения к серверу "на лету". Использование этих двух подходов позволяет создавать намного более удобные WEB-интерфейсы на тех страницах сайтов, где необходимо активное взаимодействие с пользователем. Использование Ajax стало наиболее популярно после того, как компания Google начала активно использовать его при создании своих сайтов, таких как Gmail, Google maps и Google suggest. Создание этих сайтов подтвердило эффективность использования данного подхода.

Если взять классическую модель WEB - приложения: Изображение:image1.gif

Клиент, набирая в строке поиска адрес интересующего его ресурса, попадая на сервер, делает к нему запрос. Сервер производит вычисления в соответствии с запросом, обращается к базе данных и так далее, после чего полученные данные идут клиенту и, в случае необходимости подставляются в шаблоны и обрабатываются браузером. Результатом является страница, которую мы видим, и которую 80% населения страны находящейся в WEB называют Интернетом. Это классическая модель, которая успела себя зарекомендовать и заслужить себе почетное место под солнцем. Это самая простая модель взаимодействия и, как следствие, самая распространенная. Однако ее все чаще становиться недостаточно.




Теперь посмотрим на модель взаимодействия AJAX:

Изображение:image2.gif

Последовательность действий клиента сохраняется и он, скорее всего не поймет того, что будет происходить. Но на стороне сервера все выглядит иначе. При обращении к серверу, генерируется страница, которая будет отображаться пользователю, и предлагать ему совершить интересующую его последовательность действий. При сознательном (хотя и не обязательно) выборе клиента, его запрос будет обращаться к AJAX модулю, который и будет производить все интересующие его вычисления и работу с сервером как таковым. Но в чем же новшество? Основное отличие в том, что этот метод дает нам возможность динамически обращаться к серверу и выполнять интересующие нас действия. Например, нам нужно выполнить обращение к базе данных и получить интересующие нас данные которые затем будем использовать. Данные мы будем хранить в XML файле который будет формироваться динамически. Так мы можем получить и обработать данные, полученные из БД, или что-нибудь другое необходимое нам. К тому же сервер будет обрабатывать только те данные, которые нам необходимо обновить, а не всю страницу в случае ее перезагрузки.

Отрицательные черты Ajax и средсва их устранения.

    Во-первых - передавать данные возможно только методом GET, соответственно затрудняется работа с большими объемами данных. Данная проблема имеет решения, путем использования Сookies, которые вполне приемлемы в случаях передачи больших данных, чем может вместить в себя GET запрос, а Javascript в свою очередь имеет функции для работы с ними. Вторая проблема - кросс-браузерность. Объект XMLHttpRequest еще не является частью какого-либо стандарта (хотя нечто подобное уже было предложено в спецификации W3C DOM Level 3 Load and Save). И, наконец, защищенность. Основная проблема заключается в том, что все данные и исходный код JavaScript функций можно увидеть путем просмотра исходного кода страницы, соответственно проследить логику выполнения запросов. Это создает рад проблем при передачи специальной информации, например паролей для авторизации. Возможным решением являются Cookies, с их помощью можно пересылать и обрабатывать необходимые данные.

Изображение:image3.gif




AJAX с одной стороны - огромный скачок в WEB инженерии, но с другой стороны это давно назревавший этап эволюции, который открыл новые горизонты в сфере разработки программного обеспечения. В тоже время эта технология еще довольно "сыра". Но она постоянно развивается и улучшается, вместе с развитием Internet.

Класс RIA

Тенденция к усовершенствованию WEB интерфейсов постоянно заставляет крупные компании, работающие в этой сфере, разрабатывать и выпускать новые среды и модули. Одна из таких компаний – Adobe. Недавно она презентовала целый набор утилит и программ для разработки интерфейсов нового поколения. Называется этот набор Flex. Описывать систему самостоятельно не целесообразным, поэтому рассмотрим основные, наиболее важные характеристики, преимущества и отличия Flex, заявленные самим производителем.

Adobe Flex — технология для легкого и очень быстрого создания RIA, Rich Internet Applications. Flex — это родственная Flash технология, основанная на описании интерфейса приложения с помощью диалекта XML — MXML. Flex-приложение может компилироваться на сервере, а может — из IDE, как во Flash, результатом является swf файл, исполняемый Flash Player.

Отличие Flex от Flash. Достоинства Flex тесно связаны с его спецификой, MXML. Flash не позволяет создать настолько эффектного интерфейса, как это позволяет сделать Flex. Во Flash невозможна работа с динамическими данными, его возможности ограничены лишь загрузкой внешних роликов. Flex же в полной мере позволяет работать с быстро изменяющимися данными и обрабатывать их, в чем и заключается его основное преимущество. Хотя на сегодняшний день для многих задач привычного Flash вполне достаточно, в ближайшем будущем без систем аналогичных Flex обойтись будет невозможно. Например, в случае со строгими интерфейсами бизнес-приложений скорость разработки просто потрясающая. Также Flex славен своими графиками, компоненты для построения которых сделаны не только удобными для использования, но и в большинстве случаев выглядят очень приемлимо для использования. Пример — графики Google Analytics.




Все преимущество Flex-GUI в его фрэймворке (библиотека компонент), которая очень удачно спроектирована, вобрав в себя весь опыт предыдущих компонент. Другая составляющая - это компилятор mxmlc, который превращает mxml-код в обычный AS3-код, который, в свою очередь, компилируется в swf. Таким образом, Flex-GUI представляет собой связку удачно спроектированного фрэймворка, заточенного под mxml, и компилятора mxmlc.

Достоинства: Flex 2, помимо скорости разработки, предоставляет полные мультимедийные возможности Flash Platform : включая потоковое видео, звук (в том числе и программный), бинарные сокеты и большое число прочих новых возможностей ActionScript 3. Возможностей, которые, казалось бы, в 1.2 мегабайта запихать просто невозможно...

Недостатки: Отдельные части Flex технологии являются платными.


Сравнение и интеграция AJAX и Flex.

Компания Adobe упростила разработку веб-приложений на основе AJAX и Flex. Она выпустила две библиотеки с открытым исходным кодом, которые должны упростить процесс разработки веб-приложений, одновременно использующих технологии Flex, Flash и AJAX.

Сравнивая две эти среды, можно выделить преимущества той или иной среды разработки. AJAX позволяет создавать веб-сайты, которые субъективно работают быстрее обычных. Ресурсы, построенные с применением технологии AJAX, позволяют выполнять многие действия без перезагрузки страницы. Это позволяет работать с веб-приложениями почти так же, как с традиционными программами. Однако внешний вид приложений, по-прежнему реализуется стандартными средствами HTML и CSS, украшенных изображениями в различных форматах и swf роликами.




В свою очередь, Flex и Flash обладают рядом возможностей, которые отсутствуют у AJAX. В частности, поддерживаются работа с векторной графикой, кросс-доменный доступ к данным и прочее. Библиотеки Adobe должны установить своеобразный мост между Flex, Flash и AJAX. Но среда разработки Flex приложений является платной, что негативно отличает ее от технологии AJAX и других средств для создания web-приложений.

Вывод

Тенденции развития web-приложений направлены на то, чтобы работа с ними была максимально продуктивна, понятна, удобна, экономична, имела возможность интеграции с существующими системами и разработками. Несомненно, выполнение и реализация подобных задач средствами, разработанными боле 20 лет назад уже не эффективна, а зачастую и невозможна. Будущие проектов, требующих адекватного интерфейса, работающий для пользователя и по его правилам, а не по правилам машины, за новыми технологиями. Технология компании Adobe - Flex, вполне может выступать в качестве современного средства для выполнения поставленных задач. Учитывая скорость развития web, можно с уверенностью сказать, что разработка интерфейса, например, для системы телевещания, отличная возможность для применения Flex технологии. Несомненно, телевещание в Internet скоро будет совершенно обыденным явлением. Требования к качеству и его возможностям такого вещания будут расти вместе с ростом всемирной сети. Работа подобных систем будет рассчитана на многомиллионную аудиторию, что потребует от них помимо четко работающей технической части, доступный, приятный и понятный пользовательский интерфейс. Данный проект, на нынешнем уровне развития, не позволяет организовать вещание на многотысячную аудиторию, но является упрощенным прототипом таких систем как You Tube или RamblerTV. Однако, на его примере можно глубоко изучить все тонкости и особенности технологии вещания в Internet.



Подпишитесь на рассылку:

Интерфейс

Проекты по теме:

Основные порталы, построенные редакторами

Домашний очаг

ДомДачаСадоводствоДетиАктивность ребенкаИгрыКрасотаЖенщины(Беременность)СемьяХобби
Здоровье: • АнатомияБолезниВредные привычкиДиагностикаНародная медицинаПервая помощьПитаниеФармацевтика
История: СССРИстория РоссииРоссийская Империя
Окружающий мир: Животный мирДомашние животныеНасекомыеРастенияПриродаКатаклизмыКосмосКлиматСтихийные бедствия

Справочная информация

ДокументыЗаконыИзвещенияУтверждения документовДоговораЗапросы предложенийТехнические заданияПланы развитияДокументоведениеАналитикаМероприятияКонкурсыИтогиАдминистрации городовПриказыКонтрактыВыполнение работПротоколы рассмотрения заявокАукционыПроектыПротоколыБюджетные организации
МуниципалитетыРайоныОбразованияПрограммы
Отчеты: • по упоминаниямДокументная базаЦенные бумаги
Положения: • Финансовые документы
Постановления: • Рубрикатор по темамФинансыгорода Российской Федерациирегионыпо точным датам
Регламенты
Термины: • Научная терминологияФинансоваяЭкономическая
Время: • Даты2015 год2016 год
Документы в финансовой сферев инвестиционнойФинансовые документы - программы

Техника

АвиацияАвтоВычислительная техникаОборудование(Электрооборудование)РадиоТехнологии(Аудио-видео)(Компьютеры)

Общество

БезопасностьГражданские права и свободыИскусство(Музыка)Культура(Этика)Мировые именаПолитика(Геополитика)(Идеологические конфликты)ВластьЗаговоры и переворотыГражданская позицияМиграцияРелигии и верования(Конфессии)ХристианствоМифологияРазвлеченияМасс МедиаСпорт (Боевые искусства)ТранспортТуризм
Войны и конфликты: АрмияВоенная техникаЗвания и награды

Образование и наука

Наука: Контрольные работыНаучно-технический прогрессПедагогикаРабочие программыФакультетыМетодические рекомендацииШколаПрофессиональное образованиеМотивация учащихся
Предметы: БиологияГеографияГеологияИсторияЛитератураЛитературные жанрыЛитературные героиМатематикаМедицинаМузыкаПравоЖилищное правоЗемельное правоУголовное правоКодексыПсихология (Логика) • Русский языкСоциологияФизикаФилологияФилософияХимияЮриспруденция

Мир

Регионы: АзияАмерикаАфрикаЕвропаПрибалтикаЕвропейская политикаОкеанияГорода мира
Россия: • МоскваКавказ
Регионы РоссииПрограммы регионовЭкономика

Бизнес и финансы

Бизнес: • БанкиБогатство и благосостояниеКоррупция(Преступность)МаркетингМенеджментИнвестицииЦенные бумаги: • УправлениеОткрытые акционерные обществаПроектыДокументыЦенные бумаги - контрольЦенные бумаги - оценкиОблигацииДолгиВалютаНедвижимость(Аренда)ПрофессииРаботаТорговляУслугиФинансыСтрахованиеБюджетФинансовые услугиКредитыКомпанииГосударственные предприятияЭкономикаМакроэкономикаМикроэкономикаНалогиАудит
Промышленность: • МеталлургияНефтьСельское хозяйствоЭнергетика
СтроительствоАрхитектураИнтерьерПолы и перекрытияПроцесс строительстваСтроительные материалыТеплоизоляцияЭкстерьерОрганизация и управление производством

Каталог авторов (частные аккаунты)

Авто

АвтосервисАвтозапчастиТовары для автоАвтотехцентрыАвтоаксессуарыавтозапчасти для иномарокКузовной ремонтАвторемонт и техобслуживаниеРемонт ходовой части автомобиляАвтохимиямаслатехцентрыРемонт бензиновых двигателейремонт автоэлектрикиремонт АКППШиномонтаж

Бизнес

Автоматизация бизнес-процессовИнтернет-магазиныСтроительствоТелефонная связьОптовые компании

Досуг

ДосугРазвлеченияТворчествоОбщественное питаниеРестораныБарыКафеКофейниНочные клубыЛитература

Технологии

Автоматизация производственных процессовИнтернетИнтернет-провайдерыСвязьИнформационные технологииIT-компанииWEB-студииПродвижение web-сайтовПродажа программного обеспеченияКоммутационное оборудованиеIP-телефония

Инфраструктура

ГородВластьАдминистрации районовСудыКоммунальные услугиПодростковые клубыОбщественные организацииГородские информационные сайты

Наука

ПедагогикаОбразованиеШколыОбучениеУчителя

Товары

Торговые компанииТоргово-сервисные компанииМобильные телефоныАксессуары к мобильным телефонамНавигационное оборудование

Услуги

Бытовые услугиТелекоммуникационные компанииДоставка готовых блюдОрганизация и проведение праздниковРемонт мобильных устройствАтелье швейныеХимчистки одеждыСервисные центрыФотоуслугиПраздничные агентства

Блокирование содержания является нарушением Правил пользования сайтом. Администрация сайта оставляет за собой право отклонять в доступе к содержанию в случае выявления блокировок.