Ginga -NCL

Ivn Bernal, Ph.D.

ivan.bernal@epn.edu.ec
http://ginga.epn.edu.ec

Escuela Politcnica Nacional

Quito Ecuador

Copyright @2013, I. Bernal

Agenda
Generalidades
TV digital
Interactividad

STB

Ginga (middleware)

Ginga-NCL

Ginga-J

Plugin Eclipse y emulador de STB

NCL: regiones, descriptores y medios

Documentos hipermedia: nodos y enlaces

Conectores

Ejemplo

Marzo 2013/ Draft

Ivn Bernal, Ph.D.

Bibliografa
1.

http://wiki.ginga.org.ar (varios artculos)

Marzo 2013/ Draft

Ivn Bernal, Ph.D.

Generalidades
Ginga es el nombre que recibe el middleware.
Ginga permite ejecutar aplicaciones interactivas dentro de un STB
(Set-Top Box).
En el mercado existen STBs de distintos fabricantes y puede variar la
plataforma de hardware/software de los mismos.
Necesidad clara de tener un middleware que permita correr aplicaciones sin
importar que STB se tenga.
Los STBs tendrn la capacidad de actualizar su firmware as como tambin
la versin de Ginga.
Se podra actualizar por aire: mtodo de actualizacin masivo, y es el
broadcaster de TV quien se encarga de emitir la actualizacin.

A travs de un dispositivo USB: el fabricante provee un pendrive o bajando la

actualizacin desde la web.
Marzo 2013/ Draft

Ivn Bernal, Ph.D.

Generalidades
Ginga
Middleware abierto.
Se subdivide en dos subsistemas interrelacionados que permiten el
desarrollo de aplicaciones siguiendo dos paradigmas de programacin
diferentes.
Ginga-J (para aplicaciones procedimentales Java)
Ginga-NCL (para aplicaciones declarativas NCL)

Marzo 2013/ Draft

Ivn Bernal, Ph.D.

Generalidades
NCL (Nested Context Language)
NCL is an XML application language based on the NCM (Nested Context Model)
NCM is a conceptual model for hypermedia document specification, with temporal and
spatial synchronization among its media objects.

Lenguaje declarativo que provee facilidades para especificar aspectos de

interactividad, sincronismos espacial/temporal entre objetos de multimedia,
adaptabilidad y soporte para mltiples dispositivos, es decir construir aplicaciones.

Ginga-NCL
nico middleware estndar internacional tanto para IPTV como para TV digital
terrestre (en todos los tipos de dispositivos).
nico estndar abierto.
El mismo fue creado en la Pontificia Universidad Catlica de Ro de Janeiro
(PUC-Rio) .
Ofrece una infraestructura de presentacin de aplicaciones de multimedia/hipermedia
desarrolladas sobre el paradigma declarativo, escritas en el lenguaje NCL y el lenguaje
de scripting Lua.
Marzo 2013/ Draft

Ivn Bernal, Ph.D.

Generalidades
NCL (Nested Context Language)
Las aplicaciones se pueden ejecutar de dos maneras en el STB.
Las aplicaciones a ejecutar en los STBs vienen dentro de la seal que reciben,
en un canal de datos dedicado para las aplicaciones.
Este canal, recibe el nombre de carrusel de datos, dado que se va
iterando sobre los datos de manera circular envindolos constantemente.
Esto es necesario porque cuando se sintoniza un canal de televisin, el
STB debe poder descargar el contenido completo del carrusel.
Luego ya sea por voluntad del usuario, o por eventos emitidos desde el
brodcaster la aplicacin se ejecuta.
La aplicacin es cargada a travs de un dispositivo USB y ejecutada.
Descargar del Internet por el canal de retorno
Puede venir embebida en el STB.

Marzo 2013/ Draft

Ivn Bernal, Ph.D.

Generalidades
NCL (Nested Context Language)
Lenguaje declarativo
Significa que los programas declaran el resultado esperado.
Quien ejecuta el programa debe articular los recursos necesarios para
obtener lo que se declara.
Para comprender esta idea, considerar el lenguaje declarativo HTML,
donde se declara una pgina web pero no se indica paso a paso como
obtenerla, sino que el navegador web interpreta esta declaracin y la
muestra con sus propios algoritmos en base a los recursos que maneja.

Marzo 2013/ Draft

Ivn Bernal, Ph.D.

Generalidades
NCL (Nested Context Language)
El lenguaje declarativo NCL puede adems complementarse con el lenguaje
de scripting Lua, combinando programacin declarativa+procedimental.
Salvando la diferencia entre lenguajes y el uso especfico para aplicaciones
de TV interactiva de Ginga-NCL-Lua.
Este enfoque es anlogo al uso del lenguaje declarativo HTML con el
de scripting Javascript que se aplica en el desarrollo de paginas web.

Marzo 2013/ Draft

Ivn Bernal, Ph.D.

Generalidades
The basic NCL structure module defines:
Te root element, called <ncl>, and its children elements:
The <head> element
The <body> element

Marzo 2013/ Draft

Ivn Bernal, Ph.D.

10

Generalidades
The <head> element may have the following elements as its
children:
<importedDocumentBase>

<ruleBase>
<transitionBase>
<regionBase>
<descriptorBase>
<connectorBase>
<meta> and <metadata>

Marzo 2013/ Draft

Ivn Bernal, Ph.D.

11

Generalidades
The <body> element may have the following elements as
its children:
<port>
<property>
<media>
<context>
<switch>
<link>

Marzo 2013/ Draft

Ivn Bernal, Ph.D.

12

Eclipse

Marzo 2013/ Draft

Ivn Bernal, Ph.D.

13

Ivn Bernal, Ph.D.

14

Eclipse

Marzo 2013/ Draft

Eclipse

Marzo 2013/ Draft

Ivn Bernal, Ph.D.

15

Ivn Bernal, Ph.D.

16

Eclipse

Marzo 2013/ Draft

Eclipse

Marzo 2013/ Draft

Ivn Bernal, Ph.D.

17

Marzo 2013/ Draft

Ivn Bernal, Ph.D.

18

NCL
Todos los nombres de las etiquetas (tags) estn en letras
minsculas.
A diferencia de HTML, en donde <HTML>, <html>, <Html> y

<hTMl> todas se refieren a la misma cosa.

En NCL, los nombres de las etiquetas son sensibles a
maysculas y minsculas.
Todos los nombres de las etiquetas NCL usan minsculas y as se las debe
utilizar.

Marzo 2013/ Draft

Ivn Bernal, Ph.D.

19

NCL

Elementos
Toma una de dos formas.
Start tag y end tag (etiquetas de inicio y fin) cuyos tipos deben coincidir.

Solo un empty-element tag

Ntese que hay exactamente un / por elemento.

Un elemento puede contener otros elementos

(cualquiera de las dos formas indicadas).
Cada etiqueta puede contener atributos y sus
respectivos valores asignados.
Marzo 2013/ Draft

Ivn Bernal, Ph.D.

20

10

NCL visualizar un video

Marzo 2013/ Draft

Ivn Bernal, Ph.D.

21

NCL

Planificar!!!!!!

Marzo 2013/ Draft

Ivn Bernal, Ph.D.

22

11

Ejemplo
Dentro de <head>:
Definir una <region> dentro de <regionBase>
Una regin define el espacio de exhibicin de un objeto medio

Definir un <descriptor> dentro de <descriptorBase>

Un descriptor define las caractersticas de presentacin de un medio y
la regin en el que se muestra.
Define como se presentan los medios.

Marzo 2013/ Draft

Ivn Bernal, Ph.D.

23

Ejemplo
region id="rgScreen"
width=100%
height=100%
left=top= 0%

region id="rgBoton"
left="3%"
top="5%"
height="10%"
width="10%"

Marzo 2013/ Draft

Ivn Bernal, Ph.D.

24

12

Ejemplo
region id="rgBanner"
top=0%"
left="70%"

height="100%"
width="30%"

region id="rgInferior"
top="75%"

left="0%"
height="25%"
width="70% (78% por semicrculo de la imagen)
Marzo 2013/ Draft

Ivn Bernal, Ph.D.

25

Ejemplo

Para este ejercicio:

Incluir todas las regiones
Incluir todos los descriptores
Las regiones y los descriptores pueden ser utilizados por

varios medios!!!!!
Imgenes verticales: lista, 8 candidatos
Imgenes horizontales: mensaje CNE, propuestas de
todos los candidatos

Marzo 2013/ Draft

Ivn Bernal, Ph.D.

26

13

Ejemplo

Para este ejercicio:

Incluir por ahora los medios
Video
Botn de interactividad (info.png)
Lista de candidatos (lista.png)
Mensaje del CNE (inferior.png)

No olvidar asociar a los medios los

descriptores!!!

Marzo 2013/ Draft

Ivn Bernal, Ph.D.

27

Ejemplo
Los documentos hipermedios estn compuestos generalmente por
nodos (ns) y enlaces (links, elos).
Cada nodo representa un medio y cada enlace representa la relacin entre
medios.
Una relacin entre medios puede especificar, por ejemplo, que en un
determinado momento de la presentacin de un medio, otro debe iniciarse.

Marzo 2013/ Draft

Ivn Bernal, Ph.D.

28

14

Ejemplo
Ejemplo: considerando un programa audiovisual interactivo que
al iniciar la presentacin de un video, inicie tambin la
presentacin de una imagen y texto.

Marzo 2013/ Draft

Ivn Bernal, Ph.D.

29

Ejemplo
NCM (Nested Context Model) Modelo de Contextos anidados
Para estructurar/organziar de mejor manera la seccin body (que es un contexto global),
pueden emplearse los contextos para enmarcar algunos medios que estn estrechamente
relacionados. Por ejemplo: los tems de un men.

Marzo 2013/ Draft

Ivn Bernal, Ph.D.

30

15

Ejemplo
MiConector (onBeginStart)
Apenas existe un rol de condicin y un rol de activacin.
onBegin: condicin que indica que el enlace se activa cuando el nodo asociado a este rol es
iniciado.
start : accin indicando que el enlace, al ser activado, inicia una presentacin del nodo asociado

a este rol.
El conector inicia la presentacin del nodo ligado al rol start cuando el nodo asociado al rol
onBegin es presentado

Marzo 2013/ Draft

Ivn Bernal, Ph.D.

31

Ivn Bernal, Ph.D.

32

Ejemplo

Marzo 2013/ Draft

16

Ejemplo
En NCL 3.0 solo hay un tipo de conector : causal
connector.
Define condiciones sobre las cuales el enlace puede ser activado y las
acciones que sern realizadas cuando el enlace sea activado.
Un conector causal debe poseer por lo menos una condicin y una accin.
Cada condicin o accin est asociada a un rol, punto de interfaz del
conector que participar de las asociaciones (bind) del enlace.
Se lee: cuando la condicin, entonces la accin

Cuando <algn nodo> inicia, termina <algn

nodo>

Ivn Bernal, Ph.D.

33

Ivn Bernal, Ph.D.

34

Ejemplo

Marzo 2013/ Draft

Marzo 2013/ Draft

17

Ejemplo

Incluir etiquetas <connectorBase>

Ahora DEFINIMOS un conector:

<causalConnector id=MiConector">
<simpleCondition role="onBegin" />
<simpleAction role="start" />

</causalConnector>
Marzo 2013/ Draft

Ivn Bernal, Ph.D.

35

Ejemplo

Para este ejercicio ahora USAMOS:

<link xconnector="MiConector">
<bind role="onBegin" component="video"/>

<bind role="start" component="info"/>

</link>

Marzo 2013/ Draft

Ivn Bernal, Ph.D.

36

18

Ejemplo

Puede reutilizar definiciones de conectores.

El propio eclipse trae un archivo
<connectorBase>
<importBase documentURI="ConnectorBase.ncl"
alias="CONN"/>

</connectorBase>

Marzo 2013/ Draft

Ivn Bernal, Ph.D.

37

Ejemplo
<link xconnector="CONN#onKeySelectionStartNStopN">

<bind role="onSelection" component="info">

<bindParam name="keyCode" value="BLUE"/>
</bind>

<bind role="stop" component="info"/>

<bind role="start" component="lista"/>
<bind role="start" component="inferior"/>

</link>
Marzo 2013/ Draft

Ivn Bernal, Ph.D.

38

19