curso_1 - WordPress.com
Anuncio
TV Digital – Ginga NCL TEMARIO • Introducción al lenguaje NCL • Lenguaje NCL • Ejemplo paso a paso • Ejercitación Introducción al lenguaje NCL Introducción Repasando El sistema de TV Digital utiliza un middleware que permite ejecutar aplicaciones interactivas dentro de un STB. Introducción Repasando (cont.) Ese middleware es conocido como Ginga. • Ginga-NCL aplicaciones basadas en lenguaje NCL • Ginga-J aplicaciones basadas en lenguaje Java Introducción Repasando (cont.) Ginga y Aplicaciones Arquitectura Base( Estándar ISDB-T) Introducción • Ejemplo de aplicación interactiva: “Cocineros Argentinos” Introducción 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. Introducción al lenguaje NCL Identificando elementos y sus relaciones en la aplicación “cocineros”. Video Imagen Texto Introducción al lenguaje NCL Entidades básicas representadas en NCL: • Objeto Media • Descriptor • Región • Link • Contexto Introducción al lenguaje NCL Relación entre las entidades Introducción al lenguaje NCL ¿Qué vamos a mostrar? - Objetos Media Los objetos media son elementos de contenido multimedial: Audio Video Texto Imagen HTML Lua Introducción al lenguaje NCL ¿Dónde los vamos a mostrar? - Regiones Una región representa un área de un dispositivo en la cual ciertos objetos media serán visualizados. Ejemplo: El logo del canal se visualizará en la esquina superior derecha. Introducción al lenguaje NCL ¿Cómo los vamos a mostrar? - Descriptores Un descriptor indica en que región se mostrará el objeto media y con que propiedades. Ejemplo grado de transparencia de una imagen. imagen descriptor region Introducción al lenguaje NCL ¿Cuándo los vamos a mostrar? - Links y Conectores Permiten especificar acciones sobre objetos media a partir de la ocurrencia de eventos. Condición: “al presionar el botón amarillo” Condición Acción Acción: “mostrar una imagen” Introducción al lenguaje NCL • Contexto Permite agrupar elementos NCL y reutilizarlos. TEMARIO Introducción al lenguaje NCL • Lenguaje NCL • Ejemplo paso a paso • Ejercitación 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> /> región -> ¿dónde mostramos? <descriptorBase> <descriptor … </descriptorBase> /> descriptor -> ¿cómo mostramos? <connectorBase> <connector … </connectorBase> /> conector -> ¿cuándo mostramos? </head> <body> <port ... /> puerta -> puerta de inicio <media ..../> contexto y media -> ¿qué mostramos? <link .../> link -> ¿cuándo mostramos? </body> El lenguaje NCL – Entidades Básicas • 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 tamaño y posición se puede indicar en porcentajes o pixeles. ● • Atributos • id: identificador de la región • height: altura de la región • width: ancho de la región • left, right, top, bottom: indican posición y dimensión de la región • zIndex: especifica la precedencia de superposición de la región. 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é región se mostrará el objeto media ● Permite especificar propiedades de su presentación • Atributos ● • id: identificador del descriptor • region: identificador de la región asociada • explicitDur: define la duración 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 (imágenes, textos y HTML). Ejemplo <descriptor id="descImagen" region=“regImagen" explicitDur=“10s" /> El lenguaje NCL Elemento DESCRIPTOR ● Parámetros ● Se definen como un par (propiedad, valor) ● Las propiedades dependen del tipo de objeto media asociado al descriptor (transparency, soundLevel) Ejemplo • Transparency: • números 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 – Navegación con teclas ● Se define mediante el uso de atributos del descriptor ● focusIndex, focusBorderColor, focusBorderWidth ● moveLeft, moveRight, moveUp, moveDown ● Utilidad menúes 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 ObjetoMedia 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="sbtvd-ts://0" /> El lenguaje NCL Objeto MEDIA ● ● Hasta ahora las propiedades se definian en la región, 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 específicas de objetos media de audio • soundLevel • Valores numéricos 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 • Forma abreviada del grupo de propiedades (left, top) <property name=“location“ value=“40%, 10%”/> • bounds • Forma abreviada de (left, top, width, height) <property name=“bounds“ value=“40%, 10%, 30%, 30%”/> El lenguaje NCL Propiedades específicas 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 también 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 más de una para cada contexto ● En el body un Port que apunta a un objeto Media, indica que comenzará la presentación del mismo al iniciar la aplicación ● 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 transición de entrada o salida Atributos • id: identificador de la transición • type: atributo obligatorio que indica el tipo de transición. Los valores posibles son : fade, barWipe, irisWipe, clockWipe, snakeWipe • dur: duración de la transición 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é transición usar al mostrar el objeto Media. • transOut • Indica qué transición usar al ocultar el objeto Media. • El valor que toman estas propiedades son identificadores de transiciones • Ejemplo <descriptor id="descImagen" region=“regImagen" explicitDur="10s" transOut="transicion”/> transIn="transicion" TEMARIO Introducción al lenguaje NCL Lenguaje NCL • Ejemplo paso a paso • Ejercitación Creación de una aplicación 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: • creación de documentos .ncl • coloreado de sintaxis • autocompletado y autoformato de código • indicación de errores 3. Virtual Box • Permite usar la máquina virtual Linux que corre Ginga-NCL • Simula la ejecución del middleware Creación de un proyecto NCL usando Eclipse 1) Crear un proyecto convencional • En Package Explorer hacer click con el botón derecho y elegir: New Project… • Se abrirá una ventana donde se debe seleccionar: General Project Next Creación de un proyecto NCL usando Eclipse 2) Crear un documento NCL • Completar el nombre del proyecto nuevo: EjemploMostrarUnaImagen • Presionar Finish. Creación de un proyecto NCL usando Eclipse 2) Crear un documento NCL En el proyecto nuevo: • Click derecho y elegir: New Other… NCL NCL Document • Presionar Next Creación de un proyecto NCL usando Eclipse 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 línea: 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 Generación de código NCL En el head: •Definir una <region> dentro de <regionBase> Una región define el espacio de exhibición de un objeto media. <regionBase> <region id=“regFondo" width="100%" height="100%"/> </regionBase> •Definir un <descriptor> dentro de <descriptorBase> Un descriptor define las características de presentación de un media y la región en el que se muestra. <descriptorBase> <descriptor id="descImagen" region=" regFondo“ /> </descriptorBase> Generación de código NCL -Continuación 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 aplicación NCL <port id=“pEntrada" component="imagen"/> TEMARIO Introducción al lenguaje NCL Lenguaje NCL Ejemplo paso a paso • Ejercitación Ejercitación: Parte 1 – Uso de propiedades y componentes básicos Parte 1 – Uso de propiedades y componentes básicos • 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 transición. •Ejercicio 5: Realizar un menu de 5 items que se despliegue sobre el video. Utilizar navegación con teclas. Parte 1 – Uso de propiedades y componentes básicos Ejercicio 1 Mostrar el video “NuestraArgentina.avi” Cordillera de los Andes Parte 1 Ejercicio 1 – Notación Gráfica pEntrada video1 body Parte 1 – Uso de propiedades y componentes básicos Ejercicio 2 Mostrar la imagen “TvPublica.jpg” con transparencia 60% sobre el video “NuestraArgentina.avi” Acantilados patagónicos - Chubut Parte 1 – Uso de propiedades y componentes básicos Notación gráfica pEntrada1 pEntrada2 video1 imagen1 transparency =“60%” body Parte 1 – Uso de propiedades y componentes básicos 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 básicos Notación gráfica pEntrada imagen1 explicitDur=“10s” body Parte 1 – Uso de propiedades y componentes básicos 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 transición. Junín- Buenos Aires Parte 1 – Uso de propiedades y componentes básicos Notación gráfica pEntrada1 pEntrada2 video1 imagen1 explicitDur =“10s” transIn =“transicion” transOut =“transicion” transparency =“70%” body Parte 1 – Uso de propiedades y componentes básicos Ejercicio 5 Realizar un menú de 5 ítems que se despliegue sobre el video. Utilizar navegación con teclas. El menú deberá contener los siguentes ítems • Película • Actores • Sinópsis • Ficha Técnica • Trailers TEMARIO • Ejercitación Creación de un proyecto NCL usando Eclipse Parte 1 – Uso de propiedades y componentes básicos • Parte 2 – Uso de conectores y links • Parte 3 – Reuso a partir de contextos y switches • Parte 4 – Codificación de objetos .lua
