Curso 1

TV Digital Ginga NCL
Federico Balaguer federico.balaguer@lifia.info.unlp.edu.ar Alejandro Alvarez alejandro.alvarez@lifia.info.unlp.edu.ar
Introduccin al lenguaje NCL
Introduccin
Ejemplo de aplicacin interactiva:
DEMO!
Cocineros Argentinos
Introduccin
El lenguaje NCL est basado en un modelo conceptual de datos llamado NCM (Nested Context Model).
Este modelo conceptual permite representar elementos multimediales, sincronizarlos en tiempo y espacio para crear aplicaciones interactivas.
Introduccin al lenguaje NCL Identificando elementos y sus relaciones en la aplicacin cocineros.
Video
Imagen
Texto
Introduccin al lenguaje NCL Entidades bsicas representadas en NCL:

Objeto Media
Descriptor
Regin
Link
Contexto
Relacin entre las entidades
Qu vamos a mostrar? - Objetos Media

Los objetos media son elementos de contenido multimedial: Audio Video Texto
Image n
HTML
Lua
Dnde los vamos a mostrar? - Regiones

Una regin representa un rea de un dispositivo en la cual ciertos objetos media sern visualizados.
Ejemplo: El logo del canal se visualizar en la esquina superior derecha.
Cmo los vamos a mostrar? - Descriptores

Un descriptor indica en que regin se mostrar el objeto media y con que propiedades. Ejemplo grado de transparencia de una imagen.
imagen
descriptor
region
Cundo los vamos a mostrar? - Links y Conectores

Permiten especificar acciones sobre objetos media a partir de la ocurrencia de eventos.
Condicin: al presionar el botn amarillo
Condicin
Accin
Accin: mostrar una imagen

Contexto
Permite agrupar elementos NCL y reutilizarlos.
TEMARIO
Introduccin al lenguaje NCL Lenguaje NCL Ejemplo paso a paso Ejercitacin
El lenguaje NCL
El lenguaje NCL Estructura General de un documento NCL

EDTVProfile o BDTVProfile, perfiles de NCL para indicar Enhanced DTV o Basic DTV.
<?xml version="1.0" encoding="ISO-8859-1"?> <ncl id=main" xmlns="http://www.ncl.org.br/NCL3.0/EDTVProfile"> <head> region, descriptor, connector </head> <body> media, port, switch, link </body> </ncl>
El lenguaje NCL
<head>
<regionBase> <region </regionBase> />
regin -> dnde mostramos?
<descriptorBase> <descriptor /> </descriptorBase> <connectorBase> <connector /> </connectorBase>
descriptor -> cmo mostramos?
conector -> cundo mostramos?
</head> <body>
<port ... /> <media ..../> <link .../>
puerta -> puerta de inicio contexto y media -> qu mostramos? link -> cundo mostramos?
</body>
El lenguaje NCL Entidades Bsicas

Todo objeto NCL contiene un identificador, para definirlo se utiliza el atributo id.
Ejemplo:
<descriptorBase> <descriptor id="descriptorId" region="regionId" /> </descriptorBase>
El lenguaje NCL
Elemento REGION
Representa una rea de la pantalla Las regiones pueden anidarse Su tamao y posicin se puede indicar en porcentajes o pixeles.
Atributos
id: identificador de la regin height: altura de la regin width: ancho de la regin left, right, top, bottom: indican posicin y dimensin de la regin zIndex: especifica la precedencia de superposicin de la regin.
El lenguaje NCL
Elemento REGION
<region id=" region1" height="100%" width="100%" zIndex="1" /> <region id=region2" top=0" left=0" height="50%" width="50%" > <region id=region3" right=50" left=50" top=50" bottom=50" /> <region>
El lenguaje NCL
Elemento DESCRIPTOR
Indica en qu regin se mostrar el objeto media Permite especificar propiedades de su presentacin Atributos
id: identificador del descriptor region: identificador de la regin asociada explicitDur: define la duracin del objeto media asociado al descriptor
En el caso de los videos dura el tiempo total del video, en otros casos este tiempo es infinito (imgenes, textos y HTML).
Ejemplo
<descriptor id="descImagen" region=regImagen" explicitDur=10s" />
El lenguaje NCL
Elemento DESCRIPTOR
Parmetros Se definen como un par (propiedad, valor) Las propiedades dependen del tipo de objeto media asociado al descriptor (transparency, soundLevel)
Ejemplo
Transparency:
nmeros reales entre 0 y 1, por defecto toma 1. porcentaje entre 0% y 100%.

<descriptor id="descImagen" region="regImagen"> <descriptorParam name="transparency" value="60%"/> </descriptor>
El lenguaje NCL
Elemento DESCRIPTOR Navegacin con teclas
Se define mediante el uso de atributos del descriptor focusIndex, focusBorderColor, focusBorderWidth moveLeft, moveRight, moveUp, moveDown Utilidad menes
Ejemplo
<descriptor id="descImagen" region="regionId" focusIndex="1" moveDown="2"/> <descriptor id="descImagen" region="regionId" focusIndex="2" moveUp="1" moveDown="3" />
El lenguaje NCL Objeto Media Objeto MEDIA
Son elementos de contenido multimedial: video, imagen, sonido, texto, html y lua.
Atributos:
id: identificador src: path donde se ubica el media descriptor: id del descriptor asociado type: opcional, define el tipo MIME del objeto MEDIA
Ejemplos:
<media id="image" descriptor="imageDesc" src="foto.jpg" /> <media id="video" descriptor="videoDesc" src="sbtvdts://0" />
El lenguaje NCL
Objeto MEDIA
Hasta ahora las propiedades se definian en la regin, descriptor, o parametros del descriptor Tambien se pueden definir en un objeto MEDIA con el tag property
Define una interfaz para poder cambiar el valor de la propiedad en el objeto MEDIA Atributos: - name: indica el nombre de la propiedad - value: indica el valor que tomar la propiedad
Ejemplo:
<media id=texto" src=texto.txt descriptor="descTexto"> <property name=fontSize value=20/> </media>
El lenguaje NCL
Propiedades especficas de objetos media de audio
soundLevel
Valores numricos de 0 a 100 Ej.: value=0.2, value=100 <property name=soundLevel value=0.2/>
Propiedades de objetos media visuales

top, left, right, width
Formato de valores iguales a los ya presentados
location bounds
Forma abreviada del grupo de propiedades (left, top) <property name=location value=40%, 10%/> Forma abreviada de (left, top, width, height) <property name=bounds value=40%, 10%, 30%, 30%/>
El lenguaje NCL
Propiedades especficas de objetos media de texto
fontColor
blue, red, white, black, ...
fontSize
0 .. 100
weight
bold, normal
fontFamily
Tiresias <media id=texto" src=media/texto1.txt descriptor="descTexto"> <property name=fontColor value=blue/> <property name=fontSize value=20/> <property name=weight value=bold/> <property name=fontFamily value=Tiresias/> </media>
El lenguaje NCL
Componente CONTEXT
Es un objeto contenedor de entidades NCL. Permite agrupar elementos y reutilizarlos. El body de un documento NCL tambin es un contexto
Atributos
id: nombre del identificador del contexto refer: opcional, referencia a un contexto previamente definido. El cual puede estar en otro documento NCL.
Ejemplo
<context id="idDeContexto" > ... </context>
El lenguaje NCL
Componente PORT
Son puertas de entrada a los contextos Mapean la puerta a un elemento del contexto (objeto Media o Context) Pueden definirse ms de una para cada contexto En el body un Port que apunta a un objeto Media, indica que comenzar la presentacin del mismo al iniciar la aplicacin
Atributos
id: identificador component: id del objeto media que se mapea a la puerta
El lenguaje NCL
Componente PORT
pEntrada body
imagen
<body> <port id=pEntrada component="imagen"/> </body>
El lenguaje NCL
Transitions
Permiten mostrar objetos MEDIA con efectos de transicin de entrada o salida
Atributos
id: identificador de la transicin type: atributo obligatorio que indica el tipo de
transicin. Los valores posibles son : fade, barWipe, irisWipe, clockWipe, snakeWipe dur: duracin de la transicin en segundos. Por defecto es 1 segundo.
Ejemplo
<transitionBase> <transition id=transicion type="barWipe" dur="5s"/> </transitionBase>
El lenguaje NCL
Transitions
Se asocian a los descriptores

transIn Indica qu transicin usar al mostrar el objeto Media. transOut Indica qu transicin usar al ocultar el objeto Media.
El valor que toman estas propiedades son identificadores de transiciones Ejemplo

<descriptor id="descImagen" transIn="transicion" transOut="transicion/> region=regImagen" explicitDur="10s"
Creacin de una aplicacin NCL usando Eclipse
Herramientas
1. Eclipse El entorno de desarrollo integrado (IDE) Eclipse permite crear y editar aplicaciones NCL 2. Plugin NCL Eclipse Provee funcionalidades tales como: creacin de documentos .ncl coloreado de sintaxis autocompletado y autoformato de cdigo indicacin de errores 3. Virtual Box Permite usar la mquina virtual Linux que corre GingaNCL Simula la ejecucin del middleware
Creacin de un proyecto NCL usando Eclipse

1) Crear un proyecto convencional
En Package Explorer hacer click con el botn derecho y elegir: New Project Se abrir una ventana donde se debe seleccionar:
General Project Next

2) Crear un documento NCL Completar nuevo: el nombre del proyecto
EjemploMostrarUnaImagen
Presionar Finish.

2) Crear un documento NCL En el proyecto nuevo: Click derecho y elegir:
New Other Document NCL NCL
Presionar Next

2) Crear un documento NCL Completar los campos:
id: main nombre de archivo: main.ncl
(se autocompletar al poner el id, pero puede modificarse)
Presionar Finish.
Crear una carpeta compartida

Seleccionar en el menu de la maquina virtual
Devices shared folders Agregar una nueva carpeta Indicar el path y asignar un <folderName> Tildar make permanent
Luego, abrir una consola y ejecutar la lnea:

sudo mount -t vboxsf <folderName> shared
Luego en la carpeta /home/virutalbox/shared se encontrar el contenido de la carpeta compartida
Ejemplo paso a paso: Mostrar una imagen
Ejemplo paso a paso

Mostrar la imagen quebradaDeHumahuaca.jpg
Quebrada de Humahuaca- Jujuy
Generacin de cdigo NCL

En el head: Definir una <region> dentro de <regionBase>
Una regin define el espacio de exhibicin de un objeto media. <regionBase> <region id=regFondo" width="100%" height="100%"/> </regionBase>
Definir un <descriptor> dentro de <descriptorBase>

Un descriptor define las caractersticas de presentacin de un media y la regin en el que se muestra. <descriptorBase> <descriptor id="descImagen" region=" regFondo /> </descriptorBase>
Generacin de cdigo NCL -Continuacin

En el body: Definir el objeto <media> que representa la imagen
El objeto media debe tener: id, path de la imagen, descriptor a usar <media id="imagen src=media/imagen1.jpg descriptor="descImagen"/>
Indicar un <port> de inicio

Un <port> indica que componente se presentar al iniciar la aplicacin NCL <port id=pEntrada" component="imagen"/>
TEMARIO
Introduccin al lenguaje NCL Lenguaje NCL Ejemplo paso a paso Ejercitacin
Ejercitacin: Parte 1 Uso de propiedades y componentes bsicos
Parte 1 Uso de propiedades y componentes bsicos

Ejercicio 1: Mostrar un video Ejercicio 2: Mostrar una imagen con transparencia sobre un video Ejercicio 3: Mostrar una imagen durante un determinado tiempo Ejercicio 4: Mostrar una imagen con transparencia y durante un tiempo determinado sobre un video. La imagen debe entrar y salir con una transicin. Ejercicio 5: Realizar un menu de 5 items que se despliegue sobre el video. Utilizar navegacin con teclas.
Ejercicio 1
Mostrar el video NuestraArgentina.avi
Cordillera de los Andes
Parte 1 Ejercicio 1 Notacin Grfica
pEntrada
video1
body
Ejercicio 2
Mostrar la imagen TvPublica.jpg con transparencia 60% sobre el video NuestraArgentina.avi
Acantilados patagnicos - Chubut
Parte 1 Uso de propiedades y componentes bsicos Notacin grfica pEntrada1 pEntrada2
video1
imagen1 transparency =60%

body
Ejercicio 3
Mostrar la imagen TvPublica.jpg durante 10 segundos mientras se est viendo el video NuestraArgentina.avi
Glaciar Perito Moreno- Santa Cruz
Parte 1 Uso de propiedades y componentes bsicos Notacin grfica pEntrada
imagen1
explicitDur=10s
body
Ejercicio 4
Mostrar la imagen mapaJunin.jpg con transparencia del 70% durante 10 segundos sobre el video NuestraArgentina.avi. La imagen debe entrar y salir con una transicin.
Junn- Buenos Aires
Notacin grfica pEntrada1 pEntrada2 video1
imagen1
explicitDur =10s transIn =transicion transOut =transicion transparency =70%
body
Ejercicio 5
Realizar un men de 5 tems que se despliegue sobre el video. Utilizar navegacin con teclas. El men deber contener los siguentes tems
Pelcula Actores Sinpsis Ficha Tcnica Trailers
TEMARIO
Ejercitacin
Creacin de un proyecto NCL usando Eclipse Parte 1 Uso de propiedades y componentes bsicos Parte 2 Uso de conectores y links Parte 3 Reuso a partir de contextos y switches Parte 4 Codificacin de objetos .lua

Curso 1

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Curso 1

Enviado por

Direitos autorais:

Formatos disponíveis

TV Digital Ginga NCL

Federico Balaguer federico.balaguer@lifia.info.unlp.edu.ar Alejandro Alvarez alejandro.alvarez@lifia.info.unlp.edu.ar

Introduccin al lenguaje NCL

Introduccin al lenguaje NCL Identificando elementos y sus relaciones en la aplicacin cocineros.

Introduccin al lenguaje NCL Entidades bsicas representadas en NCL:

Introduccin al lenguaje NCL

Relacin entre las entidades

Introduccin al lenguaje NCL

Qu vamos a mostrar? - Objetos Media

Introduccin al lenguaje NCL

Dnde los vamos a mostrar? - Regiones

Ejemplo: El logo del canal se visualizar en la esquina superior derecha.

Introduccin al lenguaje NCL

Cmo los vamos a mostrar? - Descriptores

Introduccin al lenguaje NCL

Cundo los vamos a mostrar? - Links y Conectores

Condicin: al presionar el botn amarillo

Accin: mostrar una imagen

Introduccin al lenguaje NCL

Introduccin al lenguaje NCL Lenguaje NCL Ejemplo paso a paso Ejercitacin

El lenguaje NCL Estructura General de un documento NCL

regin -> dnde mostramos?

<descriptorBase> <descriptor /> </descriptorBase> <connectorBase> <connector /> </connectorBase>

descriptor -> cmo mostramos?

conector -> cundo mostramos?

El lenguaje NCL Entidades Bsicas

nmeros reales entre 0 y 1, por defecto toma 1. porcentaje entre 0% y 100%.

Elemento DESCRIPTOR Navegacin con teclas

El lenguaje NCL Objeto Media Objeto MEDIA

Propiedades de objetos media visuales

<body> <port id=pEntrada component="imagen"/> </body>

Se asocian a los descriptores

El valor que toman estas propiedades son identificadores de transiciones Ejemplo

Creacin de una aplicacin NCL usando Eclipse

Creacin de un proyecto NCL usando Eclipse

Creacin de un proyecto NCL usando Eclipse

Creacin de un proyecto NCL usando Eclipse

Creacin de un proyecto NCL usando Eclipse

Crear una carpeta compartida

Luego, abrir una consola y ejecutar la lnea:

Luego en la carpeta /home/virutalbox/shared se encontrar el contenido de la carpeta compartida

Ejemplo paso a paso: Mostrar una imagen

Ejemplo paso a paso

Quebrada de Humahuaca- Jujuy

Generacin de cdigo NCL

Definir un <descriptor> dentro de <descriptorBase>

Generacin de cdigo NCL -Continuacin

Indicar un <port> de inicio

Ejercitacin: Parte 1 Uso de propiedades y componentes bsicos

Parte 1 Uso de propiedades y componentes bsicos

Parte 1 Uso de propiedades y componentes bsicos

Cordillera de los Andes

Parte 1 Ejercicio 1 Notacin Grfica

Parte 1 Uso de propiedades y componentes bsicos

Acantilados patagnicos - Chubut

Parte 1 Uso de propiedades y componentes bsicos Notacin grfica pEntrada1 pEntrada2

imagen1 transparency =60%

Parte 1 Uso de propiedades y componentes bsicos

Glaciar Perito Moreno- Santa Cruz

Parte 1 Uso de propiedades y componentes bsicos Notacin grfica pEntrada

Parte 1 Uso de propiedades y componentes bsicos

Junn- Buenos Aires

Parte 1 Uso de propiedades y componentes bsicos