Você está na página 1de 80

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.

3 Perfil Bsico

Luiz Fernando Gomes Soares Rogrio Ferreira Rodrigues Simone Diniz Junqueira Barbosa

1a edio: 8/11/2006

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

Sumrio
Introduo ................................................................................................................................ 6 O que so NCM e NCL? ........................................................................................................... 6 Estrutura de um documento NCL.............................................................................................. 7 Exemplo 01 Seu primeiro documento NCL: reproduo de um objeto de mdia ............ 9 Regies ......................................................................................................................... 11 Descritores.................................................................................................................... 13 Portas ............................................................................................................................ 14 Contextos (ou ns de composio)............................................................................... 15 N de mdia (ou n de contedo) ................................................................................. 16 Sincronizando ns de mdia atravs de elos e conectores................................................... 17 Exemplo 02 Iniciando e terminando dois objetos de mdia simultaneamente ............... 17 Elos ............................................................................................................................... 20 Conectores .................................................................................................................... 21 Exemplo 03 Iniciando um objeto de mdia quando outro termina................................. 23 Sincronizando diversos ns de mdia esttica a um n de mdia contnua ....................... 27 ncoras......................................................................................................................... 27 Exemplo 04 Sincronizando um vdeo com diferentes arquivos de legenda................... 28 Exemplo 05 Sincronizando um vdeo com um nico arquivo de legenda, segmentado ....................................................................................................................... 32 Interao com o Usurio ....................................................................................................... 35 Exemplo 06 Exibindo um vdeo em loop at a interveno do usurio......................... 35 Redimensionando regies...................................................................................................... 39 Exemplo 07 Redimensionando uma regio de vdeo durante a exibio de uma imagem.............................................................................................................................. 39 Exemplo 08 Trocando um objeto de mdia em resposta a uma ao do usurio ........... 43 Exemplo 09 Alternando imagens para identificar aes disponveis............................. 49 Regras, Switches e Ns do Tipo Settings................................................................................. 53 Exemplo 10 Simulao de um menu de DVD ............................................................... 54 Regras........................................................................................................................... 54 Switch ........................................................................................................................... 54 Exemplo 11 Simulao de um menu de DVD com feedback........................................ 60 Exemplo 12 Seleo atravs das setas ou nmeros do controle remoto ........................ 62 Exemplo 13 Re-uso de ns ............................................................................................ 75

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

Figuras
Figura 1: Ns e elos num hipertexto comum............................................................................. 6 Figura 2: Ns, elos e ns de composio (contextos)................................................................ 7 Figura 3: Vises estrutural, temporal e espacial do exemplo 01, para reproduo de um nico vdeo, sem sincronismo ou interao com o usurio. ........................................... 11 Figura 4: Regio da tela definida no exemplo 01.................................................................... 12 Figura 5: Atributos de posicionamento e dimenso de uma regio......................................... 13 Figura 6: Porta pInicio como ponto de entrada a um n interno de um contexto.................... 15 Figura 7: Vises estrutural, temporal e espacial do documento do exemplo 02, com sincronismo usando os conectores onBegin1StartN e onEnd1StopN..................... 20 Figura 8: Ilustrao de um conector ligando trs ns.............................................................. 21 Figura 9. Mquina de estados de eventos................................................................................ 22 Figura 10: Vises estrutural, temporal e espacial do exemplo 03, com sincronismo usando o conector onEnd1StartN................................................................................ 26 Figura 11: Vises estrutural, temporal e espacial do exemplo 04, que reproduz um vdeo sincronizando uma legenda................................................................................... 31 Figura 12: Vises estrutural, temporal e espacial do exemplo 06, com sincronismo (conectores onBegin1StartN e onEnd1StartN) e interao (conector onSelection1StartNStopNAbortN)......................................................................... 38 Figura 13: Vises estrutural, temporal e espacial do documento que redimensiona um vdeo sincronizado a uma imagem.................................................................................. 42 Figura 14: Vises temporal e espacial do exemplo 08, com sincronismo (conectores onBegin1StartN e onEnd1StopN) e interao com mudana de n de vdeo ativo (conector onSelection1SetN). ........................................................................... 48 Figura 15: Vises estrutural, temporal e espacial do exemplo 09, com sincronismo (conectores onBegin1StartN e onEnd1StopN) e interao (conectores onSelection1SetN e onSelection1StartNStopNAbortN). .................................. 53 Figura 16: Vises estrutural, temporal e espacial do exemplo 10, com sincronismo (conectores onBegin1StartN e onEnd1StartN) e interao (conector onSelection1SetNStartNStopNAbortN)................................................................ 59 Figura 17: Vises estrutural, temporal e espacial do exemplo 11, com feedback momentneo da seleo do usurio. ............................................................................... 62 Figura 18: Esquema de seleo de uma dentre 6 opes de menu. ......................................... 63 Figura 19: Indicao da opo atual selecionada. ................................................................... 64 Figura 20:Re-uso de elementos de mdia (a) vlido e (b) invlido, com mais de uma referncia a um mesmo n num nico contexto. ............................................................ 76

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

Tabelas
Tabela 1: Estrutura bsica de um documento NCL................................................................... 8 Tabela 2: Parmetros que podem ser utilizados em descriptorParam, conforme a mdia. ...... 14 Tabela 3: Conector onBegin1StartN. ...................................................................................... 22 Tabela 4: Conector onEnd1StopN........................................................................................... 23 Tabela 5: Conector onEnd1StartN........................................................................................... 26 Tabela 6: Conector onSelection1StartNStopNAbortN............................................................ 38 Tabela 7: Conector onBegin1SetNStartNStopN. .................................................................... 42 Tabela 8: Conector onEnd1SetNStartNStopN. ....................................................................... 43 Tabela 9: Conector onSelection1SetN..................................................................................... 48 Tabela 10: Definio do conector onSelection1SetNStartNStopNAbortN. ............................ 60 Tabela 11: Redefinio do conector onSelection1SetStartStop, para introduzir papis de ativao com retardo....................................................................................................... 60 Tabela 12: Definio de elo condicionado ao valor de um atributo. ....................................... 72 Tabela 13: Definio do conector onCondSelectSetNStartNStopN , para fazer atribuies de valor quando uma tecla pressionada e uma condio for verdadeira. ...................................................................................................................... 72 Tabela 14: Definio do conector onBegin1SetN, para fazer atribuies de valor quando um n de mdia exibido................................................................................... 73 Tabela 15: Definio do conector onSelection1SetNStartNStopNAbortN, para fazer atribuies de valor quando uma tecla pressionada, bem como iniciar e parar a exibio de mdias. ......................................................................................................... 74 Tabela 16: Definio do conector onCondSelectStopNDelay, para parar a exibio de mdias com ou sem retardo quando uma tecla pressionada e uma condio for verdadeira. ...................................................................................................................... 75

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

Listagens
Listagem 1: Documento NCL para reproduo de um s vdeo. .............................................. 9 Listagem 2: Documento NCL com elos para sincronizar o incio e o trmino de exibio de mdias. ......................................................................................................... 18 Listagem 3: Documento NCL com elos para sincronizar o incio de exibio de uma mdia quando outra termina. ........................................................................................... 24 Listagem 4: Documento NCL para reproduo de um vdeo com trs trechos de legenda sincronizados..................................................................................................... 29 Listagem 5: Documento NCL para reproduo de um vdeo com trs trechos de legenda sincronizados, num nico arquivo..................................................................... 32 Listagem 6. Documento NCL para exibir um vdeo em loop e substitu-lo por outro quando o usurio pressionar a tecla verde. ..................................................................... 35 Listagem 7: Documento NCL para redimensionamento de um vdeo enquanto uma imagem est sendo exibida. ............................................................................................ 40 Listagem 8: Documento NCL com elos para troca de ns de vdeo atravs da interao do usurio........................................................................................................................ 44 Listagem 9: Documento NCL com elos para alternar a exibio de imagens atravs da interao do usurio para refletir a alternncia entre ns de vdeo e as oportunidades de interao. ............................................................................................ 50 Listagem 10: Documento NCL para exibir um vdeo em loop e, mediante a seleo do usurio, substitu-lo por um segundo vdeo e, finalmente, exibir um terceiro vdeo e um udio conforme a seleo de idioma...................................................................... 56 Listagem 11: Modificaes sobre a listagem anterior (linhas 183 a 209) para, mediante a seleo do usurio, fornecer feedback momentneo................................................... 61 Listagem 12: Documento NCL ilustrando um menu com 6 opes........................................ 64 Listagem 13: Documento NCL ilustrando re-uso num programa com dois modos de exibio bsico e avanado........................................................................................ 76

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

Introduo
Este documento consiste num tutorial sobre o perfil bsico da linguagem NCL (Nested Context Language), verso 2.31. Ele apresenta 13 exemplos de elaborao de documentos hipermdia, com sincronismo entre mdias e interao com o usurio.

O que so NCM e NCL?


O NCM (Nested Context Model, Modelo de Contextos Aninhados) utiliza os conceitos de ns (nodes) e elos (links) comumente utilizados em documentos hipermdia (Figura 1).

Figura 1: Ns e elos num hipertexto comum.

Indo alm dos grafos acima para representar hipertexto, os grafos no NCM podem ser aninhados, permitindo segmentar e estruturar o documento hipermdia conforme necessrio ou desejado. Isto feito atravs de ns de composio, que so ns compostos de grafos NCM (Figura 2). Um n de composio tambm chamado de contexto.

Para efeito de simplificao, todas as referncias NCL neste documento devem ser interpretadas como se referindo ao Perfil Bsico da NCL, e no linguagem completa.

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

Figura 2: Ns, elos e ns de composio (contextos).

Assim, em NCM, um node (n) pode ser de dois tipos: n de contedo ou de mdia (content node ou media node): associado a um elemento de mdia como vdeo, udio, imagem, texto, aplicao etc.; ou n de composio ou contexto (composite node ou context). No caso da Figura 2, captulo 1 e captulo 2 so contextos (ns de composio), enquanto cada seo um n de contedo. Para auxiliar a construo de documentos hipermdia seguindo o modelo NCM, foi desenvolvida a linguagem NCL, que ser utilizada por todo este documento na elaborao de exemplos de documentos hipermdia. Os elementos da linguagem sero introduzidos progressivamente, com base em exemplos. Os exemplos sero baseados na verso atual do formatador (verso 1.00.02), que o programa que interpreta um documento NCL e apresenta o programa audiovisual interativo nele representado. pressuposto um conhecimento bsico do modelo NCM verso 3.0, apesar de este documento j apresentar alguns conceitos do modelo.

Estrutura de um documento NCL


A Tabela 1 apresenta a estrutura bsica de um documento NCL. Todo documento NCL possui um cabealho de arquivo NCL (linhas 1 a 3), uma seo de cabealho do programa (seo head, linhas 4 a 14), o corpo do programa (seo body, linhas 15 a 18), e a concluso do documento (linha 20). No corpo do programa que so definidos os contextos, ns de mdia, elos e outros elementos que definem o contedo e a estrutura do programa. Como ponto de entrada no documento, deve-se definir portas (porta pInicio, linha 16), que determinam onde a apresentao do programa pode se iniciar. Ao exibir o documento, deve-se informar a porta por onde a exibio do documento se inicia (i.e., passar o identificador da porta como parmetro para o formatador). Caso uma porta no seja informada no momento de exibir o documento, a porta que ser utilizada depender da implementao do formatador em uso.

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

Tabela 1: Estrutura bsica de um documento NCL.


cabealho do arquivo NCL 1: 2: 3: <?xml version="1.0" encoding="ISO-8859-1"?> <ncl id="exemplo01" xmlns="http://www.telemidia.puc-rio.br/specs/xml/NCL23/profiles" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.telemidia.pucrio.br/specs/xml/NCL23/profiles/NCL23.xsd"> <head>

cabealho do programa base de regies base de descritores base de conectores

4:

corpo do programa ponto de entrada no programa contedo do programa trmino do arquivo NCL

5: <regionBase> 6: <!-- regies da tela onde as mdias so apresentadas --> 7: </regionBase> 8: <descriptorBase> 9: <!-- descritores que definem como as mdias so apresentadas --> 10: </descriptorBase> 11: <connectorBase> 12: <!-- conectores que definem como os elos so ativados e o que eles disparam --> 13: </connectorBase> 14: </head> 15: <body> 16: 17: <port id="pInicio" component="ncPrincipal" interface="iInicio"/> <!-- contextos, ns de mdia, elos e outros elementos -->

18: </body> 19: </ncl>

Geralmente, os passos para se construir um documento NCL so: 1. escrever o cabealho bsico; 2. definir as regies da tela onde aparecero os elementos visuais (regionBase); 3. definir como e onde os ns de mdia sero exibidos, atravs de descritores (descriptorBase); 4. definir os conectores que especificam o comportamento dos elos do documento (connectorBase); 5. definir o contedo (ns de mdia - media) e a estrutura (contextos - context) do documento (seo body), associando-os aos descritores; 6. definir ncoras para os ns de mdia, visando construo dos elos de/para ns de mdia (area e attribute); 7. definir a porta de entrada do programa, apontando para o primeiro n a ser exibido, bem como as portas para os contextos, visando construo dos elos entre contextos e ns de mdia (port); e 8. definir elos para o sincronismo e interatividade entre os ns de mdia e contextos (link).

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

Exemplo 01 Seu primeiro documento NCL: reproduo de um objeto de mdia Esta seo apresenta um documento NCL simples, que apenas reproduz um vdeo no centro da tela de uma HDTV (assumindo um tamanho de tela de 1920 x 1080 px). Apesar de no se tratar de um documento hipermdia tpico (pois no h ns ligados por elos), o exemplo tem por objetivo introduzir alguns dos elementos bsicos da linguagem NCL. Observao: Para executar este exemplo, necessrio que haja um vdeo chamado video1.mpg no subdiretrio media sob o diretrio onde o arquivo NCL estiver localizado, como a seguir:
exemplo01.ncl media/ video1.mpg

Para construir um programa em NCL que reproduz um vdeo, necessrio criar os seguintes elementos (indicados na Listagem 1): 1. a regio da tela que define o dispositivo onde o programa ser exibido (regio rgTV, linhas 41-43) 2. a regio da tela onde o vdeo ser exibido (regio rgVideo1, linha 42); 3. a forma como o vdeo ser exibido (descritor dVideo1, linha 52). Nesse caso, o vdeo associado a este descritor deve ser exibido na regio rgVideo1, com os atributos default de exibio de vdeo; 4. a(s) porta(s) que define(m) o ponto de entrada do documento hipermdia. Nesse caso, a porta pInicio (linha 69), que aponta para o primeiro elemento de mdia, video1; 5. o n de mdia, o vdeo propriamente dito (mdia video1, linha 76). A listagem a seguir apresenta o cdigo necessrio para reproduzir o vdeo.
Listagem 1: Documento NCL para reproduo de um s vdeo.
1: <?xml version="1.0" encoding="ISO-8859-1"?> 2: 3: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 4: ! EXEMPLO 01 5: ! 6: ! Objetivo: Reproduzir um vdeo no meio da tela. 7: ! 8: ! Caractersticas: 9: ! 10: ! - sincronismo: nenhum 11: ! - interao do usurio: nenhuma 12: ! 13: ! Preparao: 14: ! 15: ! Para executar este exemplo, necessrio ter a seguinte mdia no subdiretrio 16: ! mdia a partir do caminho do arquivo NCL: 17: ! 18: ! 1) arquivo de vdeo chamado video1.mpg 19: ! 20: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

21: 22: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 23: ! CABEALHO NCL: 24: ! define as URIs dos esquemas da NCL 25: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 26: 27: <ncl id="exemplo01" xmlns="http://www.telemidia.puc-rio.br/specs/xml/NCL23/profiles" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.telemidia.puc-rio.br/specs/xml/NCL23/profiles http://www.telemidia.puc-rio.br/specs/xml/NCL23/profiles/NCL23.xsd"> 28: 29: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 30: ! CABEALHO DO PROGRAMA 31: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 32: 33: <head> 34: 35: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 36: ! BASE DE REGIES: 37: ! define as regies na tela onde as mdias so apresentadas 38: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 39: 40: <regionBase> 41: <region id="rgTV" width="1920" height="1080"> 42: <region id="rgVideo1" left="448" top="156" width="1024" height="768" /> 43: </region> 44: </regionBase> 45: 46: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 47: ! BASE DE DESCRITORES: 48: ! define como as mdias so apresentadas 49: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 50: 51: <descriptorBase> 52: <descriptor id="dVideo1" region="rgVideo1" /> 53: </descriptorBase> 54: 55: </head> 56: 57: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 58: ! CORPO DO PROGRAMA: 59: ! define as mdias e estrutura do programa 60: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 61: 62: <body> 63: 64: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 65: ! PONTO DE ENTRADA: 66: ! indica o componente onde o programa inicia 67: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 68: 69: <port id="pInicio" component="video1"/> 70: 71: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 72: ! MDIAS: 73: ! define o local dos arquivos de mdia e as associa com seus descritores 74: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 75: 76: <media type="video" id="video1" src="media/video1.mpg" descriptor="dVideo1"/> 77: 78: </body> 79: </ncl>

importante reparar que todo elemento da NCL (regio, descritor, n de mdia, porta etc.) deve possuir um identificador nico, representado pelo atributo id. Os demais atributos sero descritos nas sees seguintes, que aprofundam a definio de cada elemento utilizado no exemplo. A Figura 3 apresenta as vises estrutural, temporal e espacial deste exemplo.

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

Figura 3: Vises estrutural, temporal e espacial do exemplo 01, para reproduo de um nico vdeo, sem sincronismo ou interao com o usurio. Regies

Uma regio (region) definida como uma rea no dispositivo de sada onde um n de mdia pode ser exibido. Para organizar o layout das diversas partes do documento hipermdia, as regies podem ser aninhadas. Em NCL, as regies devem ser definidas no cabealho do programa (<head>), na seo de base de regies (<regionBase>). Todo documento NCL possui pelo menos uma regio, que define a dimenso e as caractersticas do dispositivo onde um ou mais ns de mdia sero apresentados. Uma regio serve para inicializar a posio dos ns de mdia num local especfico. No exemplo, foram criadas duas regies, rgTV, que define as dimenses do dispositivo, e rgVideo1, para que o vdeo fosse apresentado no centro da tela (assumindo uma tela com resoluo de 1920x1080 pixels):
<region id="rgTV" width="1920" height="1080"> <region id="rgVideo1" left="448" top="156" width="1024" height="768" /> </region>

A Figura 4 ilustra a regio definida no exemplo:

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

a rgTV, considerando a tela de HDTV


(tamanho 1920 x 1080 pixels) rgVideo1, 1024 x 768 pixels, nas coordenadas <448,156> (centralizada manualmente)

Figura 4: Regio da tela definida no exemplo 01.

Todas as regies devem ser definidas no cabealho do programa (<head>), contidas na seo de base de regies (<regionBase>). A NCL define os seguintes atributos de regio:
id:

identificador nico, utilizado nas referncias regio (por exemplo, nos descritores das mdias que so apresentadas na regio) (ttulo): ttulo da regio. No caso de a regio ser exibida com uma moldura, este o ttulo que aparece como sendo o ttulo da janela correspondente
title

(esquerda): coordenada x do lado esquerdo da regio, com relao coordenada do lado esquerdo da regio pai (ou da tela, no caso de a regio no estar aninhada a nenhuma outra)
left top

(topo): coordenada y do lado superior da regio, com relao coordenada do lado superior da regio pai (ou da tela, no caso de a regio no estar aninhada a nenhuma outra) (direita): coordenada x do lado direito da regio, com relao coordenada do lado direito da regio pai (ou da tela, no caso de a regio no estar aninhada a nenhuma outra)
right bottom

(base): coordenada y do lado inferior da regio, com relao coordenada do lado inferior da regio pai (ou da tela, no caso de a regio no estar aninhada a nenhuma outra)
width

(largura) e height (altura): dimenses horizontal e vertical da regio. Cabe observar que o autor pode escolher especificar as dimenses de uma regio de acordo com a melhor convenincia. Por exemplo, em certos casos pode ser melhor definir os atributos right, bottom, width e height. Em outros casos, pode ser mais apropriado especificar os atributos top, left, width e height. cor de fundo, definida em valores hexadecimais no formato #RRGGBB ou atravs de constantes (black, blue, cyan, darkGray, gray, green, lightGray, magenta, orange, pink, red, yellow ou white).
zIndex:

background:

posio da regio no eixo z, utilizado geralmente para indicar, no caso de regies sobrepostas, quais regies aparecem sobre quais outras. Camadas com zIndex maior so apresentadas no topo de (sobrepondo) camadas com zIndex menor.

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

A Figura 4 ilustra os atributos top, left, right, bottom, width e height:


rgPai left rgFilho height width right bottom

top

Figura 5: Atributos de posicionamento e dimenso de uma regio. Descritores

Um descritor (descriptor) define como um n de mdia ser apresentado, incluindo a associao com uma regio onde ser exibido. Em NCL, todos os descritores devem ser definidos no cabealho do programa (<head>), na seo de base de descritores (<descriptorBase>). No exemplo anterior, representou-se o descritor do vdeo da seguinte maneira:
<descriptor id="dVideo1" region="rgVideo1" />

Este descritor identificado como dVideo1 e se refere regio rgVideo12. A NCL define os seguintes atributos de descritor:
id:

identificador nico, utilizado nas referncias ao descritor (por exemplo, nos ns de mdia/contedo apresentados pelo descritor)
player:

identifica a ferramenta de apresentao a ser utilizada para exibir o objeto de mdia associado ao descritor. Esse atributo opcional. Quando omitido, o formatador procura pela ferramenta default em funo do tipo do objeto de mdia. define a durao ideal do objeto de mdia associado ao descritor. No formatador atual, o valor deste atributo s pode ser expresso em segundos, e deve estar no formato 9.9s (valor numrico seguido da letra s). Quando explicitDur no for especificado, o objeto que estiver associado ao descritor ser exibido com sua durao default. Mdias como textos e imagens estticas possuem durao default infinita.
region: explicitDur:

identificador de uma regio associada ao descritor. Ao utilizar o descritor, o objeto ser exibido na regio correspondente. Esse atributo s precisa ser especificado para objetos que possuam um contedo visual a ser exibido.

A maioria dos ns de mdia deve ter um descritor a ele associado. A seo N de mdia descreve como o n faz referncia ao seu descritor.

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

A NCL define ainda o seguinte elemento contido num elemento de descritor:


descriptorParam:

define parmetros do descritor como pares <atributo, valor>. Os atributos e seus respectivos valores dependem do programa de exibio da mdia associada ao descritor. Cada descritor pode conter diversos elementos descriptorParam, definidos no formato:
<descriptorParam name="nome_do_parametro" value="valor_do_parametro" />

Por exemplo, um descritor pode definir um parmetro adicional soundLevel, com o valor 0.9, para indicar que a mdia correspondente deve ser reproduzida com o volume a 90% do mximo:
<descriptor id="dVideo1" region="rgVideo1"> <descriptorParam name="soundLevel" value="0.9" /> </descriptor>

O uso de parmetros de descritor promove um alto grau de flexibilidade. Cabe a cada programa de exibio do objeto de mdia (player) interpretar esses atributos da forma adequada. Os parmetros definidos atualmente para os exibidores principais da verso atual do formatador so os seguintes, de acordo com o tipo de mdia:
Tabela 2: Parmetros que podem ser utilizados em descriptorParam, conforme a mdia. tipo de mdia parmetro
border

valores possveis
none: oculta

texto vdeo e udio

a borda do elemento

(caso o parmetro seja omitido, a borda ser apresentada)


soundLevel

de 0 a 1: nvel de volume (0 = mute; 0.5 = volume a 50%;


1

= volume mximo)

Portas

Uma porta (port) um ponto de interface (interface point) de um contexto, que oferece acesso externo ao contedo de um contexto. Em outras palavras, para um elo apontar para um n interno ao contexto, este contexto deve possuir uma porta que leve ao n interno (Figura 6).

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

Figura 6: Porta pInicio como ponto de entrada a um n interno de um contexto.

Observe que o elemento body de um documento NCL um contexto que herda o id do prprio documento. Sendo assim, em todo documento, deve haver pelo menos uma porta de entrada (port na seo body) indicando qual o n de mdia ou contexto inicial. No exemplo anterior, essa porta de entrada est definida da seguinte forma:
<port id="pInicio" component="video1" />

Observe que o atributo component dessa porta aponta para o vdeo video1. Isto significa que, ao iniciar o documento hipermdia, o formatador seguir a porta pInicio, que leva ao n de contedo video1, que por sua vez ser exibido. Uma porta possui os seguintes atributos:
id:

identificador nico da porta, utilizado nas referncias porta (por exemplo, por elos)
component:

n de mdia ou contexto ao qual a porta se aplica.

Caso component seja um contexto, deve-se definir ainda o atributo interface, fazendo o mapeamento para uma porta ou ncora daquele contexto. Caso component seja um n de mdia, pode-se definir o atributo interface apenas como sendo uma ncora do n de mdia. Se o atributo interface for omitido, todo o n ser considerado como sendo a ncora mapeada quela porta. nome do ponto de interface (porta) de destino no contexto ou nome da ncora de destino no n de mdia ou contexto
Contextos (ou ns de composio)
interface:

Contextos ou ns de composio so utilizados para estruturar um documento hipermdia. Os contextos podem ser aninhados, para refletir a estrutura do documento e ajudar o autor a organizar os segmentos do programa audiovisual interativo. Um contexto definido da seguinte forma:

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

<context id=" ctxNome"> </context>

Os atributos de um contexto so:


id: identificador nico descriptor: refer:

do contexto

identificador do descritor que define como o contexto ser apresentado, quando for o caso referncia a um outro contexto previamente definido (utiliza os atributos (exceto o id) do contexto referenciado) Vale lembrar que o elemento body considerado um caso particular de contexto, representando o documento como um todo.
N de mdia (ou n de contedo)

Um n de mdia ou de contedo (media node ou content node) define o objeto de mdia propriamente dito: vdeo, udio, texto etc. Cada definio de n de mdia deve apresentar, alm do arquivo de origem da mdia, o descritor que regular a apresentao daquele objeto de mdia. No exemplo anterior, foi definido apenas um n de mdia, do tipo vdeo:
<media type="video" id="video1" src="media/video1.mpg" descriptor="dVideo1"/>

Um n de mdia possui os seguintes atributos:


id:

identificador nico do n de mdia, utilizado nas referncias ao n (por exemplo, nas portas dos ns de contexto que levam mdia)

tipo de mdia. O formatador aceita atualmente os seguintes tipos de mdia: video, audio, text (pginas HTML ou TXT), image ou img (imagens JPEG, GIF, PNG ou BMP), nclet (cdigo Java de um NCLet), lua (arquivo com cdigo Lua) e settings (n de atributos globais para ser usado em escolhas (switches)). fonte do objeto de mdia. Trata-se do caminho para o arquivo de mdia. Esse caminho pode ser relativo, a partir do diretrio onde se encontra o arquivo NCL, ou absoluto, atravs de uma URI.
descriptor: src:

type:

identificador do descritor que controla a apresentao do objeto de

mdia
refer:

referncia a um outro n de mdia previamente definido (utiliza os atributos (exceto o id) do n de mdia referenciado)

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

Sincronizando ns de mdia atravs de elos e conectores


Esta seo descreve alguns exemplos de criao de elos para o sincronismo de mdias.

Exemplo 02 Iniciando e terminando dois objetos de mdia simultaneamente O objetivo deste exemplo apresentar dois ns de mdia simultaneamente, um de texto (titulo1) e outro de vdeo (video1). Para isto, ser necessrio criar dois elos: para disparar titulo1, assim que video1 iniciar para terminar titulo1, assim que video1 terminar Para definir a semntica dos elos em NCL, utiliza-se conectores. Um conector define a relao entre o(s) n(s) de origem do elo (i.e., que ativam o elo) e o(s) n(s) de destino do elo. J existe um conjunto de conectores definidos atualmente. Este exemplo assume que as definies desses conectores esto num arquivo XML chamado connectorBase.ncl, localizado no mesmo diretrio do arquivo NCL. Neste exemplo, sero utilizados os conectores onBegin1StartN e onEnd1StopN. A semntica dos conectores definidos atualmente ser explicada adiante. Por ora, basta saber que o conector onBegin1StartN inicia a exibio de um ou mais ns de mdia assim que o n de mdia de origem exibido, e o conector onEnd1StopN termina a exibio de um ou mais ns de mdia assim que o n de mdia de origem termina de ser exibido. Observao: Para executar este exemplo, necessrio que haja, no subdiretrio media, sob o diretrio onde o arquivo NCL estiver localizado, as seguintes mdias: uma pgina HTML chamada titulo1.html; e um vdeo chamado video1.mpg. Assim, a estrutura de diretrios para este exemplo deve ser a seguinte:
exemplo02.ncl connectorBase.ncl media/ video1.mpg titulo1.html

A Listagem 2 apresenta o cdigo do exemplo. Esse cdigo toma como base o exemplo anterior, e as linhas em negrito indicam aquelas que foram inseridas ou modificadas para este exemplo.

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

Listagem 2: Documento NCL com elos para sincronizar o incio e o trmino de exibio de mdias.
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: <?xml version="1.0" encoding="ISO-8859-1"?> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ EXEMPLO 02 Objetivo: Reproduzir um ttulo e um vdeo numa regio da tela, sincronizados. Caractersticas: - sincronismo: simples (de incio e trmino de uma mdia) - interao do usurio: nenhuma Preparao: Para executar este exemplo, necessrio ter as seguintes mdias no subdiretrio mdia a partir do caminho do arquivo NCL: 1) arquivo HTML com o ttulo, chamado titulo1.html 2) arquivo de vdeo chamado video1.mpg !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! CABEALHO NCL: ! define as URIs dos esquemas da NCL !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <ncl id="exemplo02" xmlns="http://www.telemidia.puc-rio.br/specs/xml/NCL23/profiles" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.telemidia.puc-rio.br/specs/xml/NCL23/profiles/NCL23.xsd">

29: 30: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 31: ! CABEALHO DO PROGRAMA 32: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 33: 34: <head> 35: 36: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 37: ! BASE DE REGIES: 38: ! define as regies na tela onde as mdias so apresentadas 39: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 40: 41: <regionBase> 42: <region id="rgTV" width="1920" height="1080"> 43: <region id="rgTitulo1" left="448" top="116" width="1024" height="40" /> 44: <region id="rgVideo1" left="448" top="156" width="1024" height="768" /> 45: </region> 46: </regionBase> 47: 48: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 49: ! BASE DE DESCRITORES: 50: ! define como as mdias so apresentadas 51: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 52: 53: <descriptorBase> 54: <descriptor id="dTitulo1" region="rgTitulo1"> 55: <descriptorParam name="border" value="none" /> 56: </descriptor> 57: <descriptor id="dVideo1" region="rgVideo1"> 58: <descriptorParam name="soundLevel" value="1" /> 59: </descriptor> 60: </descriptorBase> 61: 62: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 63: ! BASE DE CONECTORES: 64: ! definem o comportamento dos elos 65: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 66: 67: <connectorBase> 68: <importBase alias="connectors" baseURI="connectorBase.ncl" />

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

69: </connectorBase> 70: 71: </head> 72: 73: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 74: ! CORPO DO PROGRAMA: 75: ! define as mdias e estrutura do programa 76: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 77: 78: <body> 79: 80: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 81: ! PONTO DE ENTRADA: 82: ! indica o componente onde o programa inicia 83: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 84: 85: <port id="pInicio" component="video1" /> 86: 87: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 88: ! MDIAS: 89: ! define o local dos arquivos de mdia e as associa com seus descritores 90: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 91: 92: <media type="text" id="titulo1" src="media/titulo1.html" descriptor="dTitulo1" /> 93: <media type="video" id="video1" src="media/video1.mpg" descriptor="dVideo1" /> 94: 95: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 96: ! ELOS 97: ! define os elos que regem o sincronismo entre as mdias 98: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 99: 100: <!-- video1 deve ser iniciado simultaneamente a titulo1 --> 101: 102: <link id="lVideo1Titulo1Start" xconnector="connectors#onBegin1StartN"> 103: <bind component="video1" role="onBegin" /> 104: <bind component="titulo1" role="start" /> 105: </link> 106: 107: <!-- titulo1 deve ser terminado simultaneamente a video1 --> 108: 109: <link id="lVideo1Titulo1Stop" xconnector="connectors#onEnd1StopN"> 110: <bind component="video1" role="onEnd" /> 111: <bind component="titulo1" role="stop" /> 112: </link> 113: 114: </body> 115: </ncl> 116:

Como no exemplo anterior, so inseridos: a regio onde ser exibido o ttulo (rgTitulo1, linha 43); o descritor que define como e onde o n de mdia ser exibido (dTitulo1, linhas 54 a 56); e o n de mdia propriamente dito, apontando para o arquivo HTML do contedo (titulo1, linha 92). Alm disto, foram introduzidos dois novos trechos ao programa: importao da base de conectores atualmente definidos, a partir do arquivo connectorBase.ncl (seo connectorBase, linhas 62 a 69); e
onBegin1StartN

dois elos de ligao entre o n video1 e o n titulo1, fazendo uso dos conectores e onEnd1StopN:

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

o elo lVideo1Titulo1Start (conector onBegin1StartN) define o incio do n titulo1 a partir do incio do n video1 (linhas 100 a 105); e o elo lVideo1Titulo1Stop (conector onEnd1StopN) define o trmino do n titulo1 a partir do trmino do n video1 (linhas 109 a 112).

A Figura 7 ilustra as vises estrutural, temporal e espacial do documento do exemplo 02:


onBegin1StartN

viso estrutural

video1

titulo1

onEnd1Stop N pInicio rgVideo1 video1

viso temporal
rgTitulo1

onBegin1StartN

onEnd1StopN

titulo1

elos de sincronismo: conectores onBegin1StartN e onEnd1StopN

titulo1 @ rgTitulo1

viso espacial

video1 @ rgVideo1

Figura 7: Vises estrutural, temporal e espacial do documento do exemplo 02, com sincronismo usando os conectores onBegin1StartN e onEnd1StopN. Elos

Os elos (links) associam ns atravs de conectores (connectors), que definem a semntica da associao entre os ns. A NCL define os seguintes atributos de elos:
id: identificador nico xconnector:

do elo

identificador do conector associado ao elo

A NCL define os seguintes elementos contidos num elemento de elo:

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

linkParam:

define parmetros do elo como pares <atributo, valor>. Os atributos e seus respectivos valores dependem da definio do conector ao qual o elo est associado.
bind: indica os componentes (component, ns de mdia e de contexto) envolvidos no elo, indicando o papel (role) de cada um no elo, conforme a semntica do conector. Em alguns casos deve-se indicar tambm o ponto de interface (interface) do n ao qual o elo ligado (porta do contexto ou ncora de um n de mdia).

O elemento bind pode ainda conter uma ou mais instncias do seguinte elemento como elementos filhos:
bindParam:

define parmetros especficos do bind como pares <atributo, valor>. Os atributos e seus respectivos valores dependem da definio do conector ao qual o elo est associado.

Conectores

No NCM, o sincronismo no feito por marcas de tempo (timestamps), mas sim por mecanismos de causalidade e restrio definidos nos conectores (connectors). O conector define os papis (roles) que os ns de origem e de destino exercem nos elos que utilizam o conector. A Figura 8 ilustra um conector ligando trs ns.

Figura 8: Ilustrao de um conector ligando trs ns.

Existem dois tipos de conectores: causal (causal connector) e de restrio (constraint connector). Um conector causal define dois ou mais papis, que indicam sob quais condies um elo pode ser ativado (conditionRole e assessmentRole) e as aes a serem realizadas quando o elo

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

for ativado (actionRole). Os tipos de evento (eventType) utilizados nos conectores podem ser: presentation, selection, attribution, pointOver, prefetch ou focus. Um conditionRole pode ser composto de um elemento de condio de transio de estado (eventStateTransitionCondition), de condio de atribuio (attributeCondition) ou composto de dois ou mais desses elementos. Em cada condio de transio de estado pode ser definida uma das seguintes transies (atributo transition): starts, stops, pauses, resumes, aborts, abortsFromPaused ou ends. Em cada condio de atribuio pode ser definido um dos seguintes tipos de atributo (atributo attributeType): repeat, occurrences, state ou nodeAttribute (qualquer atributo explicitamente declarado em um n). A ativao do elo pode ainda ser condicionada avaliao de certos valores, atravs do elemento assessmentRole, que pode conter um elemento eventStateTransitionAssessment ou attributeAssessment, conforme o atributo eventType. As aes podem ser de apresentao (presentation actions) ou de atribuio (assignment actions). Os tipos de ao de apresentao (atributo actionType do elemento presentationAction) definidos na NCL so: start, stop, pause, resume e abort (Figura 9). J as aes de atribuio (assignmentAction) possuem um nico atributo, value3.

Figura 9. Mquina de estados de eventos.

As seguintes tabelas descrevem os conectores onBegin1StartN e onEnd1StopN utilizados no exemplo 2:


Tabela 3: Conector onBegin1StartN.

Nome: Tipo: Condio: Ao:

onBegin1StartN causal incio de exibio de um n de mdia (definido no papel onBegin) dispara o incio de exibio de um ou mais ns de mdia (definidos no papel start)

Aes de atribuio sero vistas no exemplo 7.

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

Ilustrao

Tabela 4: Conector onEnd1StopN.

Nome: Tipo: Condio: Ao: Ilustrao:

onEnd1StopN causal trmino de exibio de um n de mdia (definido no papel onEnd) encerra a exibio de um ou mais ns de mdia (definidos no papel stop)

Exemplo 03 Iniciando um objeto de mdia quando outro termina O objetivo deste exemplo sincronizar o trmino de uma mdia com o incio de outra, fazendo com que, ao trmino do vdeo video1, seja iniciada a exibio de um outro vdeo (video2), na mesma regio. Alm da criao do novo n de mdia correspondente ao vdeo, ser necessrio tambm criar um elo para ligar os dois vdeos, atravs do conector onEnd1StartN. Esse conector dispara a exibio de um ou mais ns de destino quando a exibio do n de origem terminada. Observao: Para executar este exemplo, necessrio que haja, no subdiretrio media, sob o diretrio onde os arquivos NCL (exemplo03.ncl e connectorBase.ncl) estiverem localizados, dois arquivos de vdeo, chamados video1.mpg e video2.mpg, como indicado a seguir:
exemplo03.ncl connectorBase.ncl media\ video1.mpg video2.mpg

A Listagem 3 apresenta o cdigo do exemplo. Esse cdigo toma como base o exemplo 01, e as linhas em negrito indicam aquelas que foram inseridas ou modificadas para este exemplo.

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

Como nos exemplos anteriores, o n de mdia inserido, apontando para o segundo arquivo de vdeo (video2, linha 86). Alm disto, foi introduzido um novo elo de ligao, lVideo1Video2Start, que dispara o n de vdeo video2 assim que o n de vdeo video1 tem sua exibio terminada (linhas 93 a 98). Observa-se que, como o n de vdeo deveria ser apresentado da mesma forma e na mesma regio, no foi necessrio criar um novo descritor nem uma nova regio para o novo n. Isto uma evidncia de que o custo de certos tipos de extenso a um programa existente pode ser extremamente baixo.
Listagem 3: Documento NCL com elos para sincronizar o incio de exibio de uma mdia quando outra termina.
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: <?xml version="1.0" encoding="ISO-8859-1"?> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ EXEMPLO 03 Objetivo: Reproduzir dois vdeos em seqncia, numa mesma regio da tela. Caractersticas: - sincronismo: trmino de uma mdia -> incio de outra - interao do usurio: nenhuma Preparao: Para executar este exemplo, necessrio ter as seguintes mdias no subdiretrio mdia a partir do caminho do arquivo NCL: 1) arquivo de vdeo chamado video1.mpg 2) arquivo de vdeo chamado video2.mpg !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! CABEALHO NCL: ! define as URIs dos esquemas da NCL !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <ncl id="exemplo03" xmlns="http://www.telemidia.puc-rio.br/specs/xml/NCL23/profiles" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.telemidia.puc-rio.br/specs/xml/NCL23/profiles/NCL23.xsd">

28: 29: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 30: ! CABEALHO DO PROGRAMA 31: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 32: 33: <head> 34: 35: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 36: ! BASE DE REGIES: 37: ! define as regies na tela onde as mdias so apresentadas 38: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 39: 40: <regionBase> 41: <region id="rgTV" width="1920" height="1080"> 42: <region id="rgVideo1" left="448" top="156" width="1024" height="768" /> 43: </region> 44: </regionBase> 45: 46: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 47: ! BASE DE DESCRITORES: 48: ! define como as mdias so apresentadas 49: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 50: 51: <descriptorBase>

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

52: <descriptor id="dVideo1" region="rgVideo1" /> 53: </descriptorBase> 54: 55: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 56: ! BASE DE CONECTORES: 57: ! definem o comportamento dos elos 58: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 59: 60: <connectorBase> 61: <importBase alias="connectors" baseURI="connectorBase.ncl"/> 62: </connectorBase> 63: 64: </head> 65: 66: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 67: ! CORPO DO PROGRAMA: 68: ! define as mdias e estrutura do programa 69: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 70: 71: <body> 72: 73: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 74: ! PONTO DE ENTRADA: 75: ! indica o componente onde o programa inicia 76: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 77: 78: <port id="pInicio" component="video1" /> 79: 80: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 81: ! MDIAS: 82: ! define o local dos arquivos de mdia e as associa com seus descritores 83: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 84: 85: <media type="video" id="video1" src="media/video1.mpg" descriptor="dVideo1" /> 86: <media type="video" id="video2" src="media/video2.mpg" descriptor="dVideo1" /> 87: 88: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 89: ! ELOS 90: ! define os elos que regem o sincronismo entre as mdias 91: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 92: 93: <!-- video2 deve ser iniciado quando video1 terminar --> 94: 95: <link id="lVideo1Video2Start" xconnector="connectors#onEnd1StartN"> 96: <bind component="video1" role="onEnd" /> 97: <bind component="video2" role="start" /> 98: </link> 99: 100: </body> 101: </ncl>

A Figura 10 ilustra as vises estrutural, temporal e espacial do exemplo 03:

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

Figura 10: Vises estrutural, temporal e espacial do exemplo 03, com sincronismo usando o conector onEnd1StartN.

A tabela a seguir descreve o conector onEnd1StartN, utilizado neste exemplo.


Tabela 5: Conector onEnd1StartN.

Nome: Tipo: Condio: Ao:

onEnd1StartN causal trmino de exibio de um n de mdia (definido no papel onEnd) dispara o incio de exibio de um ou mais ns de mdia (definidos no papel start)

Ilustrao:
role onEnd onEnd1StartN role start role start . . . role start

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

Sincronizando diversos ns de mdia esttica a um n de mdia contnua


Nos exemplos desta seo sero utilizadas ncoras, definidas a seguir.
ncoras

As ncoras so pontos de entrada para os ns de mdia ou contextos. O objetivo de se utilizar ncoras utilizar segmentos de um n de mdia ou contexto, seja como origem ou destino de elos. Uma ncora pode ser do tipo ncora de contedo (content anchor) ou ncora de atributo (attribute anchor). Uma ncora de contedo define um segmento da mdia (intervalo de tempo e/ou regio no espao) que poder ser utilizado como ponto de ativao de elos. Cada n de mdia composto de unidades de informao (information units). A definio dessas unidades de informao depende do tipo de mdia representado pelo n. As unidades de informao de um vdeo, por exemplo, podem ser os frames do vdeo. Uma ncora consiste numa seleo contgua de unidades de informao de um n. Uma ncora de contedo definida como um elemento area dentro do elemento media. No exemplo abaixo, so definidas trs ncoras de contedo para um n de vdeo:
<media type="video" id="video1" src="media/video1.mpg" descriptor="dVideo1"> <!-- ncoras de contedo no vdeo que devem ser sincronizadas com a legenda --> <area id="aVideoLegenda01" begin="5s" end="9s"/> <area id="aVideoLegenda02" begin="10s" end="14s"/> <area id="aVideoLegenda03" begin="15s" end="19s"/> </media>

A NCL define os seguintes atributos de ncora de contedo:


id: identificador nico coords: begin: end: dur:

da ncora

coordenadas em pixels da ncora espacial (atributo vlido para mdias visuais), no formato X,Y,width,height

incio da ncora, em segundos, no formato 99.9s (atributo vlido para mdias contnuas) trmino da ncora, em segundos, no formato 99.9s (atributo vlido para mdias contnuas) durao da ncora, em segundos, no formato 99.9s (atributo vlido para mdias contnuas) quadro/amostra da mdia definindo o incio da ncora (atributo vlido para mdias contnuas)
last: first:

quadro/amostra da mdia definindo o fim da ncora (atributo vlido para mdias contnuas)
text:

texto da ncora no arquivo de origem (atributo vlido para mdias de texto)

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

posio do texto da ncora no arquivo de origem (atributo vlido para mdias de texto)
anchorLabel:

position:

identificador da ncora no arquivo de origem, tal como interpretado pela ferramenta de exibio. J as ncoras de atributo se referem a atributos de um n de origem ou de destino, que podem ser manipulados pelos elos. Exemplos de atributos so: volume de udio de um n de udio ou vdeo, coordenadas e dimenses de exibio de um n de mdia visual, entre outros. Uma ncora de atributo definida como um elemento attribute dentro do elemento media ou context. No exemplo a seguir so definidas quatro ncoras de atributo para um n de vdeo, alm de uma ncora de contedo:
<media type="video" id="video1" src="media/video1.mpg" descriptor="dVideo1"> <!-- ncoras de atributos que sero manipulados pelos elos --> <attribute id="top" name="top"/> <attribute id="left" name="left"/> <attribute id="width" name="width"/> <attribute id="height" name="height"/> <!-- ncora de contedo no vdeo que deve sincronizar a imagem --> <area id="aVideo1Imagem1" begin="3s" end="8s"/> </media>

Exemplo 04 Sincronizando um vdeo com diferentes arquivos de legenda Esta seo apresenta um documento NCL que reproduz um vdeo no centro da tela e sincroniza uma legenda com o vdeo. A legenda composta de trs arquivos HTML, cada qual com um texto a ser sincronizado com um segmento do vdeo. Observao: Para executar este exemplo, necessrio que haja, no subdiretrio media sob o diretrio onde o arquivo NCL estiver localizado, as seguintes mdias: um vdeo chamado video1.mpg; trs arquivos HTML chamados legenda01.html, legenda02.html legenda03.html, cada qual com um texto a ser sincronizado. e

Como nos exemplos anteriores, deve-se criar os ns de mdia correspondentes ao vdeo e aos arquivos HTML. Para definir os pontos do vdeo em que a legenda deve aparecer, necessrio criar ncoras para o vdeo, cada qual definindo o intervalo de exibio da legenda correspondente. Em seguida, basta criar trs elos, cada qual para iniciar e terminar a exibio de cada legenda. A origem de cada elo deve ser uma das ncoras do vdeo, e o destino a legenda correspondente. A listagem a seguir apresenta o cdigo necessrio para reproduzir o vdeo com a legenda sincronizada. A definio das ncoras (linhas 92 a 95) e seu uso nos elos (linhas 110, 117, 124, 131, 138 e 145) aparecem em negrito.

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

Listagem 4: Documento NCL para reproduo de um vdeo com trs trechos de legenda sincronizados.
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: <?xml version="1.0" encoding="ISO-8859-1"?> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ EXEMPLO 04 Objetivo: Reproduzir um vdeo numa regio da tela, sincronizando com trechos de legenda. Caractersticas: - sincronismo: simples (de incio e trmino de mdias) - interao do usurio: nenhuma Preparao: Para executar este exemplo, necessrio ter as seguintes mdias no subdiretrio mdia a partir do caminho do arquivo NCL: 1) arquivo de vdeo chamado video1.mpg 2) 3 arquivos HTML com a legenda, chamados legenda01.html, legenda02.html e legenda03.html !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! CABEALHO NCL: ! define as URIs dos esquemas da NCL !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <ncl id="exemplo04" xmlns="http://www.telemidia.puc-rio.br/specs/xml/NCL23/profiles" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.telemidia.puc-rio.br/specs/xml/NCL23/profiles/NCL23.xsd">

30: 31: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 32: ! CABEALHO DO PROGRAMA 33: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 34: 35: <head> 36: 37: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 38: ! BASE DE REGIES: 39: ! define as regies na tela onde as mdias so apresentadas 40: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 41: 42: <regionBase> 43: <region id="rgTV" width="1920" height="1080"> 44: <region id="rgVideo1" left="448" top="156" width="1024" height="768" /> 45: <region id="rgLegenda" left="448" top="925" width="1024" height="40" /> 46: </region> 47: </regionBase> 48: 49: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 50: ! BASE DE DESCRITORES: 51: ! define como as mdias so apresentadas 52: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 53: 54: <descriptorBase> 55: <descriptor id="dVideo1" region="rgVideo1" /> 56: <descriptor id="dLegenda" region="rgLegenda"> 57: <descriptorParam name="border" value="none" /> 58: </descriptor> 59: </descriptorBase> 60: 61: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 62: ! BASE DE CONECTORES: 63: ! definem o comportamento dos elos 64: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 65: 66: <connectorBase> 67: <importBase alias="connectors" baseURI="connectorBase.ncl"/> 68: </connectorBase>

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

69: 70: 71: 72: 73: 74: 75: 76: 77: 78: 79: 80: 81: 82: 83: 84: 85: 86: 87: 88: 89: 90: 91: 92: 93: 94: 95: 96: 97: 98: 99: 100: 101: 102: 103: 104: 105: 106: 107: 108: 109: 110: 111: 112: 113: 114: 115: 116: 117: 118: 119: 120: 121: 122: 123: 124: 125: 126: 127: 128: 129: 130: 131: 132: 133: 134: 135: 136: 137: 138: 139: 140: 141:

</head> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! CORPO DO PROGRAMA: ! define as mdias e estrutura do programa !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <body> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! PONTO DE ENTRADA: ! indica o componente onde o programa inicia !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <port id="pInicio" component="video1" /> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! MDIAS: ! define o local dos arquivos de mdia e as associa com seus descritores !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <media type="video" id="video1" src="media/video1.mpg" descriptor="dVideo1"> <!-- ncoras no vdeo que devem ser sincronizadas com a legenda --> <area id="aVideoLegenda01" begin="5s" end="9s"/> <area id="aVideoLegenda02" begin="10s" end="14s"/> <area id="aVideoLegenda03" begin="15s" end="19s"/> </media> <media type="text" id="legenda01" src="media/legenda01.html" descriptor="dLegenda" /> <media type="text" id="legenda02" src="media/legenda02.html" descriptor="dLegenda" /> <media type="text" id="legenda03" src="media/legenda03.html" descriptor="dLegenda" /> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! ELOS ! define os elos que regem o sincronismo entre as mdias !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <!-- incio da legenda 01 --> <link id="lLegenda01_start" xconnector="connectors#onBegin1StartN"> <bind component="video1" interface="aVideoLegenda01" role="onBegin" /> <bind component="legenda01" role="start" /> </link> <!-- trmino da legenda 01 --> <link id="lLegenda01_stop" xconnector="connectors#onEnd1StopN"> <bind component="video1" interface="aVideoLegenda01" role="onEnd" /> <bind component="legenda01" role="stop" /> </link> <!-- incio da legenda 02 --> <link id="lLegenda02_start" xconnector="connectors#onBegin1StartN"> <bind component="video1" interface="aVideoLegenda02" role="onBegin" /> <bind component="legenda02" role="start" /> </link> <!-- trmino da legenda 02 --> <link id="lLegenda02_stop" xconnector="connectors#onEnd1StopN"> <bind component="video1" interface="aVideoLegenda02" role="onEnd" /> <bind component="legenda02" role="stop" /> </link> <!-- incio da legenda 03 --> <link id="lLegenda03_start" xconnector="connectors#onBegin1StartN"> <bind component="video1" interface="aVideoLegenda03" role="onBegin" /> <bind component="legenda03" role="start" /> </link>

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

142: <!-- trmino da legenda 03 --> 143: 144: <link id="lLegenda03_stop" xconnector="connectors#onEnd1StopN"> 145: <bind component="video1" interface="aVideoLegenda03" role="onEnd" /> 146: <bind component="legenda03" role="stop" /> 147: </link> 148: 149: </body> 150: </ncl>

A Figura 11 ilustra as vises estrutural, temporal e espacial do exemplo 04.

onBegin1StartN onEnd1StopN onBegin1StartN

legenda 01

viso estrutural

video1

onEnd1StopN

legenda 02

onBegin1StartN onEnd1StopN legenda 03

pInicio

elos de sincronismo

rgVideo1 video1 aVideoLe genda01 aVideoLe genda02 aVideoLe genda03

viso temporal
rgLegenda

onBegin1StartN

onBegin1StartN onBegin1StartN onEnd1StopN onEnd1StopN onEnd1StopN

legenda01

legenda02

legenda03

1 viso espacial

video1 @ rgVideo1

video1 @ rgVideo1

video1 @ rgVideo1

video1 @ rgVideo1

legenda01 @ rgLegenda

legenda02 @ rgLegenda

video1 @ rgVideo1

video1 @ rgVideo1

video1 @ rgVideo1

legenda03 @ rgLegenda

Figura 11: Vises estrutural, temporal e espacial do exemplo 04, que reproduz um vdeo sincronizando uma legenda.

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

Exemplo 05 Sincronizando um vdeo com um nico arquivo de legenda, segmentado Esta seo tambm apresenta um documento NCL que reproduz um vdeo no centro da tela e sincroniza uma legenda com o vdeo. Desta vez, no entanto, a legenda composta de um nico arquivo HTML, contendo trs elementos DIV, cada qual com um texto a ser sincronizado com o vdeo. Observao: Para executar este exemplo, necessrio que haja, no subdiretrio media sob o diretrio onde o arquivo NCL estiver localizado, as seguintes mdias: um vdeo chamado video1.mpg; e um arquivo HTML chamados legendas.html, contendo trs elementos DIV identificados por legenda01, legenda02 e legenda03, cada qual com um texto a ser sincronizado. Assim como no exemplo anterior, para definir os pontos do vdeo em que a legenda deve aparecer, necessrio criar ncoras para o vdeo, cada qual definindo o intervalo de exibio da legenda correspondente. Em seguida, basta criar trs elos, cada qual para iniciar e terminar a exibio de cada legenda. A origem de cada elo deve ser uma das ncoras do vdeo, e o destino a legenda correspondente. Diferentemente do exemplo anterior, em vez de os trs ns de legenda constiturem arquivos distintos, sua fonte (atributo src) ficar no formato nome_do_arquivo#id_do_div, como em legendas.html#legenda01 (linhas 99 a 101). A listagem a seguir apresenta o cdigo necessrio para reproduzir o vdeo com a legenda sincronizada.
Listagem 5: Documento NCL para reproduo de um vdeo com trs trechos de legenda sincronizados, num nico arquivo.
1: <?xml version="1.0" encoding="ISO-8859-1"?> 2: 3: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 4: EXEMPLO 05 5: 6: Objetivo: Reproduzir um vdeo numa regio da tela, sincronizando com trechos 7: de legenda. 8: 9: Caractersticas: 10: 11: - sincronismo: simples (de incio e trmino de mdias) 12: - interao do usurio: nenhuma 13: 14: Preparao: 15: 16: Para executar este exemplo, necessrio ter as seguintes mdias no subdiretrio 17: mdia a partir do caminho do arquivo NCL: 18: 19: 1) arquivo de vdeo chamado video1.mpg 20: 2) um nico arquivo HTML chamado legendas.html, com trs legendas, cada qual num 21: elemento DIV (com IDs legenda01, legenda02 e legenda03, respectivamente) 22: 23: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 24: 25: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 26: ! CABEALHO NCL:

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

27: ! define as URIs dos esquemas da NCL 28: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 29: 30: <ncl id="exemplo05" xmlns="http://www.telemidia.puc-rio.br/specs/xml/NCL23/profiles" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.telemidia.puc-rio.br/specs/xml/NCL23/profiles/NCL23.xsd"> 31: 32: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 33: ! CABEALHO DO PROGRAMA 34: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 35: 36: <head> 37: 38: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 39: ! BASE DE REGIES: 40: ! define as regies na tela onde as mdias so apresentadas 41: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 42: 43: <regionBase> 44: <region id="rgTV" width="1920" height="1080"> 45: <region id="rgVideo1" left="448" top="156" width="1024" height="768" /> 46: <region id="rgLegenda" left="448" top="925" width="1024" height="40" /> 47: </region> 48: </regionBase> 49: 50: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 51: ! BASE DE DESCRITORES: 52: ! define como as mdias so apresentadas 53: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 54: 55: <descriptorBase> 56: <descriptor id="dVideo1" region="rgVideo1" /> 57: <descriptor id="dLegenda" region="rgLegenda"> 58: <descriptorParam name="border" value="none" /> 59: </descriptor> 60: </descriptorBase> 61: 62: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 63: ! BASE DE CONECTORES: 64: ! definem o comportamento dos elos 65: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 66: 67: <connectorBase> 68: <importBase alias="connectors" baseURI="connectorBase.ncl"/> 69: </connectorBase> 70: 71: </head> 72: 73: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 74: ! CORPO DO PROGRAMA: 75: ! define as mdias e estrutura do programa 76: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 77: 78: <body> 79: 80: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 81: ! PONTO DE ENTRADA: 82: ! indica o componente onde o programa inicia 83: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 84: 85: <port id="pInicio" component="video1" /> 86: 87: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 88: ! MDIAS: 89: ! define o local dos arquivos de mdia e as associa com seus descritores 90: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 91: 92: <media type="video" id="video1" src="media/video1.mpg" descriptor="dVideo1"> 93: <!-- ncoras no vdeo que devem ser sincronizadas com a legenda --> 94: <area id="aVideoLegenda01" begin="5s" end="9s"/> 95: <area id="aVideoLegenda02" begin="10s" end="14s"/> 96: <area id="aVideoLegenda03" begin="15s" end="19s"/> 97: </media>

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

98: 99: <media type="text" id="legenda01" src="media/legendas.html#legenda01" descriptor="dLegenda" /> 100: <media type="text" id="legenda02" src="media/legendas.html#legenda02" descriptor="dLegenda" /> 101: <media type="text" id="legenda03" src="media/legendas.html#legenda03" descriptor="dLegenda" /> 102: 103: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 104: ! ELOS 105: ! define os elos que regem o sincronismo entre as mdias 106: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 107: 108: <!-- incio da legenda 01 --> 109: 110: <link id="lLegenda01_start" xconnector="connectors#onBegin1StartN"> 111: <bind component="video1" interface="aVideoLegenda01" role="onBegin" /> 112: <bind component="legenda01" role="start" /> 113: </link> 114: 115: <!-- trmino da legenda 01 --> 116: 117: <link id="lLegenda01_stop" xconnector="connectors#onEnd1StopN"> 118: <bind component="video1" interface="aVideoLegenda01" role="onEnd" /> 119: <bind component="legenda01" role="stop" /> 120: </link> 121: 122: <!-- incio da legenda 02 --> 123: 124: <link id="lLegenda02_start" xconnector="connectors#onBegin1StartN"> 125: <bind component="video1" interface="aVideoLegenda02" role="onBegin" /> 126: <bind component="legenda02" role="start" /> 127: </link> 128: 129: <!-- trmino da legenda 02 --> 130: 131: <link id="lLegenda02_stop" xconnector="connectors#onEnd1StopN"> 132: <bind component="video1" interface="aVideoLegenda02" role="onEnd" /> 133: <bind component="legenda02" role="stop" /> 134: </link> 135: 136: <!-- incio da legenda 03 --> 137: 138: <link id="lLegenda03_start" xconnector="connectors#onBegin1StartN"> 139: <bind component="video1" interface="aVideoLegenda03" role="onBegin" /> 140: <bind component="legenda03" role="start" /> 141: </link> 142: 143: <!-- trmino da legenda 03 --> 144: 145: <link id="lLegenda03_stop" xconnector="connectors#onEnd1Stop1"> 146: <bind component="video1" interface="aVideoLegenda03" role="onEnd" /> 147: <bind component="legenda03" role="stop" /> 148: </link> 149: 150: </body> 151: </ncl>

As vises temporal e espacial deste exemplo so as mesmas do exemplo anterior, ilustradas na Figura 11.

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

Interao com o Usurio


Esta seo descreve um exemplos de criao de elo para a interao do usurio com o documento hipermdia.

Exemplo 06 Exibindo um vdeo em loop at a interveno do usurio O objetivo deste exemplo exibir um vdeo em loop, permitindo ao usurio prosseguir para um segundo vdeo, pressionando a tecla verde do controle remoto da TV digital. Ambos os vdeos devem ser apresentados na mesma posio da tela. Para que um vdeo possa ser exibido em loop, utiliza-se o conector OnEnd1StartN para o mesmo n de vdeo. Para disparar o segundo vdeo, no entanto, no basta utilizar o evento stop, pois este dispararia o primeiro elo novamente (para retomar o loop). Portanto, necessrio que o vdeo em loop seja interrompido por um evento abort (linha 119). Essa relao foi definida em um conector chamado OnSelection1StartNStopNAbortN. Observao: Para executar este exemplo, necessrio que haja, no subdiretrio media, sob o diretrio onde o arquivo NCL estiver localizado, as seguintes mdias: dois arquivos de vdeo, chamados video1.mpg e video2.mpg; e uma imagem, chamada botao_verde.gif, representando o boto verde. A Listagem 6 apresenta o cdigo do exemplo, e as linhas em negrito indicam aquelas que foram inseridas ou modificadas para este exemplo.
Listagem 6. Documento NCL para exibir um vdeo em loop e substitu-lo por outro quando o usurio pressionar a tecla verde.
1: <?xml version="1.0" encoding="ISO-8859-1"?> 2: 3: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 4: EXEMPLO 06 5: 6: Objetivo: Reproduzir um vdeo em loop, at que o usurio 7: pressione a tecla verde para mover para o prximo 8: vdeo. 9: 10: Caractersticas: 11: 12: - sincronismo: simples (de incio e trmino de mdias) 13: - interao do usurio: interrupo do vdeo para disparar outro 14: 15: Preparao: 16: 17: Para executar este exemplo, necessrio ter as seguintes mdias no subdiretrio 18: mdia a partir do caminho do arquivo NCL: 19: 20: 1) arquivo de vdeo chamado video1.mpg, com uma introduo em loop 21: 2) arquivo de vdeo chamado video2.mpg 22: 3) arquivo de imagem chamado botao_verde.gif, indicando a ao do boto verde 23:

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

24: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 25: 26: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 27: ! CABEALHO NCL: 28: ! define as URIs dos esquemas da NCL 29: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 30: 31: <ncl id="exemplo06" xmlns="http://www.telemidia.puc-rio.br/specs/xml/NCL23/profiles" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.telemidia.puc-rio.br/specs/xml/NCL23/profiles/NCL23.xsd"> 32: 33: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 34: ! CABEALHO DO PROGRAMA 35: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 36: 37: <head> 38: 39: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 40: ! BASE DE REGIES: 41: ! define as regies na tela onde as mdias so apresentadas 42: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 43: 44: <regionBase> 45: <region id="rgTV" width="1920" height="1080"> 46: <region id="rgVideo1" left="200" top="168" width="320" height="240" /> 47: <region id="rgBotaoVerde" left="200" top="420" width="25" height="25" /> 48: </region> 49: </regionBase> 50: 51: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 52: ! BASE DE DESCRITORES: 53: ! define como as mdias so apresentadas 54: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 55: 56: <descriptorBase> 57: <descriptor id="dVideo1" region="rgVideo1" /> 58: <descriptor id="dBotaoVerde" region="rgBotaoVerde" /> 59: </descriptorBase> 60: 61: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 62: ! BASE DE CONECTORES: 63: ! definem o comportamento dos elos 64: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 65: 66: <connectorBase> 67: <importBase alias="connectors" baseURI="connectorBase.ncl"/> 68: </connectorBase> 69: 70: </head> 71: 72: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 73: ! CORPO DO PROGRAMA: 74: ! define as mdias e estrutura do programa 75: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 76: 77: <body> 78: 79: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 80: ! PONTO DE ENTRADA: 81: ! indica o componente onde o programa inicia 82: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 83: 84: <port id="pInicio" component="video1" /> 85: 86: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 87: ! MDIAS: 88: ! define o local dos arquivos de mdia e as associa com seus descritores 89: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 90: <media type="video" id="video1" src="media/video1.mpg" descriptor="dVideo1" /> 91: 92: <media type="video" id="video2" src="media/video2.mpg" descriptor="dVideo1" /> 93: 94: <media type="image" id="botaoVerde" src="media/botao_verde.gif" descriptor="dBotaoVerde" />

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

95: 96: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 97: ! ELOS 98: ! define os elos que regem o sincronismo entre as mdias 99: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 100: 101: <!-- incio do video1 deve exibir botes --> 102: <link id="lVideo1Init" xconnector="connectors#onBegin1StartN"> 103: <bind component="video1" role="onBegin" /> 104: <bind component="botaoVerde" role="start" /> 105: </link> 106: 107: <!-- trmino do video1 deve dispar-lo novamente (deve tocar em loop) --> 108: <link id="lVideo1Loop" xconnector="connectors#onEnd1StartN"> 109: <bind component="video1" role="onEnd" /> 110: <bind component="video1" role="start" /> 111: </link> 112: 113: <!-- cancela a exibio do video1 e dispara a exibio do video2 quando a tecla verde pressionada --> 114: <link id="lSelectBotaoVerde" xconnector="connectors#onSelection1StartNStopNAbortN"> 115: <bind component="botaoVerde" role="onSelection"> 116: <bindParam name="keyCode" value="GREEN" /> 117: </bind> 118: <bind component="botaoVerde" role="stop" /> 119: <bind component="video1" role="abort" /> 120: <bind component="video2" role="start" /> 121: </link> 122: 123: </body> 124: </ncl>

A Figura 12 ilustra as vises estrutural, temporal e espacial do exemplo 06:

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

Figura 12: Vises estrutural, temporal e espacial do exemplo 06, com sincronismo (conectores onBegin1StartN e onEnd1StartN) e interao (conector onSelection1StartNStopNAbortN).

A tabela a seguir descreve o conector onSelection1StartNStopNAbortN. Observa-se que esse conector exige que o elo correspondente defina um parmetro do tipo: para preencher o valor do parmetro keyCode, definido no conector como a tecla de acionamento do elo.
Tabela 6: Conector onSelection1StartNStopNAbortN.
bindParam ou linkParam,

Nome: Tipo: Condio:

onSelection1StartNStopNAbortN causal tecla <keyCode> acionada (papel onSelection)

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

Ao:

exibe as mdias identificadas pelo papel start; pra as mdias identificadas pelo papel stop; aborta as mdias identificadas pelo papel abort.

Observao:

Os elos que utilizarem este conector devero identificar, como parmetro adicional da ligao com o n de origem (bindParam ou linkParam), o cdigo virtual da tecla do controle remoto associada seleo, atravs do parmetro
keyCode.

Por exemplo:

<bindParam name="keyCode" value="GREEN" />

Os cdigos de teclas definidos no formatador Maestro atual so: RED, GREEN, YELLOW, BLUE VK_LEFT, VK_RIGHT, VK_UP, VK_DOWN VK_ENTER 1, 2, 3, 4, 5, 6, 7, 8, 9, 0 MENU e outros dependentes do dispositivo de entrada: INTERACTION, *, #, letras A-Z

Redimensionando regies
Exemplo 07 Redimensionando uma regio de vdeo durante a exibio de uma imagem Esta seo apresenta um documento NCL que reproduz um vdeo em tela inteira (720 x 576 px) e que, num determinado momento, redimensionado para dar lugar a uma imagem na parte inferior da tela. Observao: Para executar este exemplo, necessrio que haja, no subdiretrio media sob o diretrio onde o arquivo NCL estiver localizado, as seguintes mdias: um vdeo chamado video1.mpg; e uma imagem chamada imagem1.gif. A listagem a seguir apresenta o cdigo necessrio para redimensionar o vdeo quando uma imagem aparecer, a 3 segundos do incio do vdeo, e para restaurar o tamanho original, a 8 segundos do vdeo. Para manipular os atributos top, left, width e height da regio qual o vdeo est associado, necessrio definir explicitamente esses atributos como atributos da mdia. No caso especfico desses atributos, pode-se especificar uma ncora para o atributo bounds para manipul-los em conjunto (linha 93). A manipulao feita atravs dos elos

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

Video1Imagem1_start e Video1Imagem1_stop (linhas 104 a 130). Os conectores onBegin1SetNStartNStopN e onEnd1SetNStartNStopN sero vistos no final desta seo.
Listagem 7: Documento NCL para redimensionamento de um vdeo enquanto uma imagem est sendo exibida.
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: <?xml version="1.0" encoding="ISO-8859-1"?> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ EXEMPLO 07 Objetivo: Reproduzir um vdeo numa regio da tela e redimension-lo num momento de sincronizao com uma imagem Caractersticas: - sincronismo: simples (de incio e trmino de uma mdia) - interao do usurio: nenhuma Preparao: Para executar este exemplo, necessrio ter as seguintes mdias no subdiretrio mdia a partir do caminho do arquivo NCL: 1) arquivo de vdeo, chamado video1.mpg 2) arquivo de imagem, chamado imagem1.gif !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! CABEALHO NCL: ! define as URIs dos esquemas da NCL !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <ncl id="exemplo07" xmlns="http://www.telemidia.puc-rio.br/specs/xml/NCL23/profiles" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.telemidia.puc-rio.br/specs/xml/NCL23/profiles/NCL23.xsd">

30: 31: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 32: ! CABEALHO DO PROGRAMA 33: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 34: 35: <head> 36: 37: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 38: ! BASE DE REGIES: 39: ! define as regies na tela onde as mdias so apresentadas 40: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 41: 42: <region id="rgTV" width="1920" height="1080"> 43: <region id="rgVideo1" left="200" top="168" width="320" height="240" /> 44: <region id="rgImagem1" left="200" top="190" width="504" height="377" /> 45: </region> 46: 47: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 48: ! BASE DE DESCRITORES: 49: ! define como as mdias so apresentadas 50: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 51: 52: <descriptorBase> 53: <descriptor id="dVideo1" region="rgVideo1" /> 54: <descriptor id="dImagem1" region="rgImagem1" /> 55: </descriptorBase> 56: 57: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 58: ! BASE DE CONECTORES: 59: ! definem o comportamento dos elos 60: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 61: 62: <connectorBase>

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

63: <importBase alias="connectors" baseURI="connectorBase.ncl"/> 64: </connectorBase> 65: 66: </head> 67: 68: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 69: ! CORPO DO PROGRAMA: 70: ! define as mdias e estrutura do programa 71: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 72: 73: <body> 74: 75: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 76: ! PONTO DE ENTRADA: 77: ! indica o componente onde o programa inicia 78: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 79: 80: <port id="pInicio" component="video1" /> 81: 82: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 83: ! MDIAS: 84: ! define o local dos arquivos de mdia e as associa com seus descritores 85: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 86: 87: <media type="video" id="video1" src="media/video1.mpg" descriptor="dVideo1"> 88: 89: <!-- ncora no vdeo que deve sincronizar a imagem --> 90: <area id="aVideo1Imagem1" begin="3s" end="8s"/> 91: 92: <!-- atributo que ser manipulado pelos elos --> 93: <attribute id="attrVideo1Bounds" name="bounds" /> 94: 95: </media> 96: 97: <media type="image" id="imagem1" src="media/imagem1.gif" descriptor="dImagem1" /> 98: 99: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 100: ! ELOS 101: ! define os elos que regem o sincronismo entre as mdias 102: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 103: 104: <!-- ncora do vdeo 1 deve iniciar a exibio da imagem --> 105: 106: <link id="Video1Imagem1_start" xconnector="connectors#onBegin1SetNStartNStopN"> 107: 108: <bind component="video1" interface="aVideo1Imagem1" role="onBegin" /> 109: 110: <bind component="video1" interface="attrVideo1Bounds" role="set"> 111: <bindParam name="valueSet" value="200,18,160,120" /> 112: <!-- As dimenses de bounds so: left, top, width, height --> 113: </bind> 114: 115: <bind component="imagem1" role="start" /> 116: </link> 117: 118: 119: <!-- ncora do vdeo 1 deve terminar a exibio da imagem --> 120: 121: <link id="Video1Imagem1_stop" xconnector="connectors#onEnd1SetNStartNStopN"> 122: 123: <bind component="video1" interface="aVideo1Imagem1" role="onEnd" /> 124: 125: <bind component="video1" interface="attrVideo1Bounds" role="set"> 126: <bindParam name="valueSet" value="200,168,320,240" /> 127: </bind> 128: 129: <bind component="imagem1" role="stop" /> 130: </link> 131: 132: </body> 133: </ncl>

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

A Figura 13 ilustra as vises estrutural, temporal e espacial do exemplo 07.


onBegin1SetNStartNStopN

viso estrutural

video1 onEnd1SetNStartNStopN

imagem1

pInicio

rgVideo1 video1 set aVideo1I magem1 set onEnd1 SetNStartNStopN stop

viso temporal

onBegin1 SetNStartNStopN start

rgImagem1 imagem1

elos de sincronismo: conectores onBegin1SetNStartNStopN e onEnd1SetNStartNStopN

1 viso espacial

2
video1 @ rgVideo1 video1 @ rgVideo1

video1 @ rgVideo1

imagem1 @ rgImagem1

Figura 13: Vises estrutural, temporal e espacial do documento que redimensiona um vdeo sincronizado a uma imagem.

A tabela a seguir descreve o conector onBegin1SetNStartNStopN.


Tabela 7: Conector onBegin1SetNStartNStopN.

Nome: Tipo: Condio: Ao:

onBegin1SetNStartNStopN Causal incio de exibio da mdia no papel onBegin altera atributos dos ns associados ao papel set, conforme os valores passados pelo mapeamento (bindParam) para o parmetro do conector (connectorParam) denominado valueSet; pode exibir mdias no papel start; e pode ocultar mdias no papel stop.

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

Observao:

Os elos que utilizarem este conector devero identificar, como parmetro adicional do mapeamento do n (bindParam), as novas coordenadas e dimenses (x,y,w,h). Por exemplo:
<bind component="video1" interface="attrVideo1Bounds" role="set"> <bindParam name="valueSet" value="200,18,160,120" /> <!-- As dimenses de bounds so: left, top, width, height --> </bind>

A tabela a seguir descreve o conector onEnd1SetNStartNStopN.


Tabela 8: Conector onEnd1SetNStartNStopN.

Nome: Tipo: Condio: Ao:

onEnd1SetNStartNStopN causal trmino de exibio da mdia no papel onEnd altera atributos dos ns associados ao papel set, conforme os valores passados pelo mapeamento (bindParam) para o parmetro do conector (connectorParam) denominado valueSet; pode exibir mdias no papel start; e pode ocultar mdias no papel stop.

Observao:

Os elos que utilizarem este conector devero identificar, como parmetro adicional do mapeamento do n (bindParam), as novas coordenadas e dimenses (x,y,w,h). Por exemplo:
<bind component="video1" interface="attrVideo1Bounds" role="set"> <bindParam name="valueSet" value="200,168,320,240" /> </bind>

Exemplo 08 Trocando um objeto de mdia em resposta a uma ao do usurio O objetivo deste exemplo permitir ao usurio alternar entre dois vdeos, atravs da seleo das teclas vermelha e verde do controle remoto da TV digital. Ambos os vdeos devem ser apresentados na mesma posio da tela. Para alternar entre os vdeos, algumas modificaes precisam ser feitas com relao ao Exemplo 03. Os dois vdeos devem ser iniciados de forma sincronizada, sendo que um deles deve iniciar invisvel e sem som. Quando o usurio fizer uma seleo com os botes do controle remoto, os atributos dos dois vdeos devem ser invertidos.

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

Como as duas mdias tocaro ao mesmo tempo mas com parmetros de visibilidade e som distintos, um novo descritor para o segundo vdeo (video2, linha 106) criado (dVideo2, linha 61) reusando a mesma regio do video1 mas com os valores dos atributos correspondentes definidos no seu descritor (linhas 62 e 63) para que no haja som nem exibio no incio. Para que seja possvel alterar os atributos visible e soundLevel, necessrio que esses atributos estejam definidos explicitamente no n de mdia correspondente (linhas 102-103 e 107-108). Finalmente, necessrio criar dois elos para efetuar a seleo do vdeo, atravs do conector onSelection1SetN (linhas 140 a 180). Como ser visto adiante, esse conector utilizado para trocar os atributos de visibilidade e volume do som, trocando o vdeo sendo exibido conforme o boto selecionado: o boto vermelho ativa o video2 e o boto verde ativa o video1. Observa-se que, como o elo deve alterar alguns atributos dos ns de vdeo, cada elemento de ligao (bind) deve especificar no apenas o componente de destino do elo (atributo component), mas tambm o seu atributo (atributo interface), tal como definido no n da mdia. Alm disso, como o valor desse atributo modificado, o novo valor deve ser passado como parmetro (atravs do elemento bindParam):
<bind component="video1" interface="aVideo1Visible" role="set"> <bindParam name="valueSet" value="false" /> </bind> <bind component="video1" interface="aVideo1SoundLevel" role="set"> <bindParam name="valueSet" value="0" /> </bind>

Observao: Para executar este exemplo, necessrio que haja, no subdiretrio media, sob o diretrio onde o arquivo NCL estiver localizado, as seguintes mdias: dois arquivos de vdeo, chamados video1.mpg e video2.mpg; e duas imagens, chamadas botao_vermelho.gif e botao_verde.gif, representando os botes vermelho e verde, respectivamente. A Listagem 8 apresenta o cdigo do exemplo, e as linhas em negrito indicam aquelas que foram inseridas ou modificadas para este exemplo.
Listagem 8: Documento NCL com elos para troca de ns de vdeo atravs da interao do usurio.
1: <?xml version="1.0" encoding="ISO-8859-1"?> 2: 3: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 4: EXEMPLO 08 5: 6: Objetivo: Reproduzir um vdeo e permitir que o usurio alterne entre dois vdeos, 7: numa mesma regio da tela, atravs do pressionamento das teclas 8: vermelha e verde do controle remoto. 9: 10: Caractersticas: 11: 12: - sincronismo: ponto de alternncia entre os vdeos 13: - interao do usurio: seleo do vdeo a ser exibido 14: 15: Preparao:

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32:

Para executar este exemplo, necessrio ter as seguintes mdias no subdiretrio mdia a partir do caminho do arquivo NCL: 1) arquivo de vdeo chamado video1.mpg 2) arquivo de vdeo chamado video2.mpg 3) arquivo de imagem chamado botao_vermelho.gif, indicando a ao do boto vermelho 4) arquivo de imagem chamado botao_verde.gif, indicando a ao do boto verde !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! CABEALHO NCL: ! define as URIs dos esquemas da NCL !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <ncl id="exemplo08" xmlns="http://www.telemidia.puc-rio.br/specs/xml/NCL23/profiles" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.telemidia.pucrio.br/specs/xml/NCL23/profiles/NCL23.xsd">

33: 34: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 35: ! CABEALHO DO PROGRAMA 36: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 37: 38: <head> 39: 40: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 41: ! BASE DE REGIES: 42: ! define as regies na tela onde as mdias so apresentadas 43: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 44: 45: <regionBase> 46: <region id="rgTV" width="1920" height="1080"> 47: <region id="rgVideo1" left="200" top="168" width="320" height="240" /> 48: <region id="rgBotaoVermelho" left="200" top="420" width="25" height="25" /> 49: <region id="rgBotaoVerde" left="200" top="470" width="25" height="25" /> 50: </region> 51: </regionBase> 52: 53: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 54: ! BASE DE DESCRITORES: 55: ! define como as mdias so apresentadas 56: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 57: 58: <descriptorBase> 59: <descriptor id="dVideo1" region="rgVideo1" /> 60: 61: <descriptor id="dVideo2" region="rgVideo1"> 62: <descriptorParam name="visible" value="false" /> 63: <descriptorParam name="soundLevel" value="0" /> 64: </descriptor> 65: 66: <descriptor id="dBotaoVermelho" region="rgBotaoVermelho" /> 67: 68: <descriptor id="dBotaoVerde" region="rgBotaoVerde" /> 69: </descriptorBase> 70: 71: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 72: ! BASE DE CONECTORES: 73: ! definem o comportamento dos elos 74: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 75: 76: <connectorBase> 77: <importBase alias="connectors" baseURI="connectorBase.ncl" />

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

78: </connectorBase> 79: 80: </head> 81: 82: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 83: ! CORPO DO PROGRAMA: 84: ! define as mdias e estrutura do programa 85: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 86: 87: <body> 88: 89: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 90: ! PONTO DE ENTRADA: 91: ! indica o componente onde o programa inicia 92: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 93: 94: <port id="pInicio" component="video1" /> 95: 96: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 97: ! MDIAS: 98: ! define o local dos arquivos de mdia e as associa com seus descritores 99: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 100: 101: <media type="video" id="video1" src="media/video1.mpg" descriptor="dVideo1"> 102: <attribute id="aVideo1Visible" name="visible" /> 103: <attribute id="aVideo1SoundLevel" name="soundLevel" /> 104: </media> 105: 106: <media type="video" id="video2" src="media/video2.mpg" descriptor="dVideo2"> 107: <attribute id="aVideo2Visible" name="visible" /> 108: <attribute id="aVideo2SoundLevel" name="soundLevel" /> 109: </media> 110: 111: <media type="image" id="botaoVermelho" src="media/botao_vermelho.gif" descriptor="dBotaoVermelho" /> 112: <media type="image" id="botaoVerde" src="media/botao_verde.gif" descriptor="dBotaoVerde" /> 113: 114: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 115: ! ELOS 116: ! define os elos que regem o sincronismo entre as mdias 117: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 118: 119: 120: <!-- incio do video1 deve disparar a exibio do video2 e das imagens dos botes --> 121: 122: <link id="lVideo_Botoes_start" xconnector="connectors#onBegin1StartN"> 123: <bind component="video1" role="onBegin" /> 124: <bind component="video2" role="start" /> 125: <bind component="botaoVerde" role="start" /> 126: <bind component="botaoVermelho" role="start" /> 127: </link> 128: 129: 130: <!-- trmino do video1 deve terminar a exibio das imagens dos botes --> 131: 132: <link id="lVideo_Botoes_stop" xconnector="connectors#onEnd1StopN"> 133: <bind component="video1" role="onEnd" /> 134: <bind component="video2" role="stop" /> 135: <bind component="botaoVerde" role="stop" /> 136: <bind component="botaoVermelho" role="stop" /> 137: </link> 138: 139: 140: <!-- alterna para vdeo 2 caso a tecla vermelha seja acionada -->

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

141: 142: <link id="lSelecionaVideo2" xconnector="connectors#onSelection1SetN"> 143: <linkParam name="keyCode" value="RED" /> 144: <bind component="botaoVermelho" role="onSelection" /> 145: 146: <bind component="video1" interface="aVideo1Visible" role="set"> 147: <bindParam name="valueSet" value="false" /> 148: </bind> 149: <bind component="video1" interface="aVideo1SoundLevel" role="set"> 150: <bindParam name="valueSet" value="0" /> 151: </bind> 152: 153: <bind component="video2" interface="aVideo2Visible" role="set"> 154: <bindParam name="valueSet" value="true" /> 155: </bind> 156: <bind component="video2" interface="aVideo2SoundLevel" role="set"> 157: <bindParam name="valueSet" value="1" /> 158: </bind> 159: </link> 160: 161: <!-- alterna para vdeo 1 caso a tecla verde seja acionada --> 162: 163: <link id="lSelecionaVideo1" xconnector="connectors#onSelection1SetN"> 164: <linkParam name="keyCode" value="GREEN" /> 165: <bind component="botaoVerde" role="onSelection" /> 166: 167: <bind component="video2" interface="aVideo2Visible" role="set"> 168: <bindParam name="valueSet" value="false" /> 169: </bind> 170: <bind component="video2" interface="aVideo2SoundLevel" role="set"> 171: <bindParam name="valueSet" value="0" /> 172: </bind> 173: 174: <bind component="video1" interface="aVideo1Visible" role="set"> 175: <bindParam name="valueSet" value="true" /> 176: </bind> 177: <bind component="video1" interface="aVideo1SoundLevel" role="set"> 178: <bindParam name="valueSet" value="1" /> 179: </bind> 180: </link> 181: 182: </body> 183: </ncl>

A Figura 14 ilustra as vises temporal e espacial do exemplo 08, com elos de sincronismo e interao com o usurio.

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

Figura 14: Vises temporal e espacial do exemplo 08, com sincronismo (conectores onBegin1StartN e onEnd1StopN) e interao com mudana de n de vdeo ativo (conector onSelection1SetN).

A tabela a seguir descreve o conector onSelection1SetN. Observa-se que esse conector exige que o elo correspondente defina um parmetro (linkParam ou bindParam), para preencher o valor do atributo keyCode, que identifica a tecla pressionada.
Tabela 9: Conector onSelection1SetN.

Nome: Tipo: Condio:

onSelection1SetN causal tecla <keyCode> acionada (papel onSelection)

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

Ao: Observaes:

altera atributos dos ns associados ao papel set, atravs do parmetro valueSet; Os elos que utilizarem este conector devero identificar, como parmetro adicional do elo (linkParam), ou como parmetro do mapeamento de um n (bindParam), o cdigo virtual da tecla do controle remoto associada seleo. Por exemplo:
<bindParam name="keyCode" value="VK_ENTER"/>

Os elos que utilizarem este conector devero identificar tambm, como parmetro adicional dos mapeamentos dos ns (bindParam), os novos valores dos atributos. No exemplo, os atributos de visibilidade e volume de som, como a seguir:
<bind component="video1" interface="aVideo1Visible" role="set"> <bindParam name="valueSet" value="false" /> </bind> <bind component="video1" interface="aVideo1SoundLevel" role="set"> <bindParam name="valueSet" value="0" /> </bind>

Exemplo 09 Alternando imagens para identificar aes disponveis No exemplo anterior, as imagens dos botes vermelho e verde ficam o tempo todo visveis, mas somente um dos botes causa efeito ao ser pressionado. Como isto pode causar problemas de usabilidade, o objetivo deste exemplo modificar a visibilidade das imagens correspondentes aos botes sempre que uma seleo for feita, de modo que apenas o boto que possa causar uma mudana do vdeo seja exibido. Observao: Para executar este exemplo, necessrio que haja, no subdiretrio media, sob o diretrio onde o arquivo NCL estiver localizado, as seguintes mdias: dois arquivos de vdeo, chamados video1.mpg e video2.mpg; e duas imagens, chamadas botao_vermelho.gif e botao_verde.gif, representando os botes vermelho e verde, respectivamente. A Listagem 9 apresenta o cdigo do exemplo, e as linhas em negrito indicam aquelas que foram inseridas ou modificadas para este exemplo. Em primeiro lugar, o elo de exibio inicial do vdeo e dos botes no deve mais exibir o boto verde, pois pressionar a tecla verde enquanto o vdeo 1 est tocando no produz efeito (item removido no elo definido nas linhas 120 a 124). Alm disto, a nica alterao a ser feita a incluso de dois elos, que alternam a exibio das imagens correspondentes aos botes (linhas 177 a 193). Esses elos utilizam o conector onSelection1StartNStopNAbortN, especificado para modificar a exibio de um ou mais ns de mdia conforme o pressionamento de uma determinada tecla.

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

Listagem 9: Documento NCL com elos para alternar a exibio de imagens atravs da interao do usurio para refletir a alternncia entre ns de vdeo e as oportunidades de interao.
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32: 33: <?xml version="1.0" encoding="ISO-8859-1"?> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ EXEMPLO 09 Objetivo: Reproduzir um vdeo e permitir que o usurio alterne entre dois vdeos, numa mesma regio da tela, atravs do pressionamento das teclas vermelha e verde do controle remoto. Oculta a imagem correspondente ao boto que no fizer efeito no momento. Caractersticas: - sincronismo: ponto de alternncia entre os vdeos - interao do usurio: seleo do vdeo a ser exibido Preparao: Para executar este exemplo, necessrio ter as seguintes mdias no subdiretrio mdia a partir do caminho do arquivo NCL: 1) arquivo de vdeo chamado video1.mpg 2) arquivo de vdeo chamado video2.mpg 3) arquivo de imagem chamado botao_vermelho.gif, indicando a ao do boto vermelho 4) arquivo de imagem chamado botao_verde.gif, indicando a ao do boto verde !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! CABEALHO NCL: ! define as URIs dos esquemas da NCL !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <ncl id="exemplo09" xmlns="http://www.telemidia.puc-rio.br/specs/xml/NCL23/profiles" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.telemidia.puc-rio.br/specs/xml/NCL23/profiles/NCL23.xsd">

34: 35: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 36: ! CABEALHO DO PROGRAMA 37: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 38: 39: <head> 40: 41: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 42: ! BASE DE REGIES: 43: ! define as regies na tela onde as mdias so apresentadas 44: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 45: 46: <region id="rgTV" width="1920" height="1080"> 47: <region id="rgVideo1" left="200" top="168" width="320" height="240" /> 48: <region id="rgBotaoVermelho" left="200" top="420" width="25" height="25" /> 49: <region id="rgBotaoVerde" left="200" top="470" width="25" height="25" /> 50: </region> 51: 52: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 53: ! BASE DE DESCRITORES: 54: ! define como as mdias so apresentadas 55: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 56: 57: <descriptorBase> 58: <descriptor id="dVideo1" region="rgVideo1" /> 59: 60: <descriptor id="dVideo2" region="rgVideo1"> 61: <descriptorParam name="visible" value="false" /> 62: <descriptorParam name="soundLevel" value="0"/> 63: </descriptor> 64: 65: <descriptor id="dBotaoVermelho" region="rgBotaoVermelho" /> 66: 67: <descriptor id="dBotaoVerde" region="rgBotaoVerde" />

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

68: 69: 70: 71: 72: 73: 74: 75: 76: 77: 78: 79: 80: 81: 82: 83: 84: 85: 86: 87: 88: 89: 90: 91: 92: 93: 94: 95: 96: 97: 98: 99: 100: 101: 102: 103: 104: 105: 106: 107: 108: 109: 110: 111: 112: 113: 114: 115: 116: 117: 118: 119: 120: 121: 122: 123: 124: 125: 126: 127: 128: 129: 130: 131: 132: 133: 134: 135: 136: 137: 138: 139: 140:

</descriptorBase> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! BASE DE CONECTORES: ! definem o comportamento dos elos !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <connectorBase> <importBase alias="connectors" baseURI="connectorBase.ncl"/> </connectorBase> </head> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! CORPO DO PROGRAMA: ! define as mdias e estrutura do programa !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <body> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! PONTO DE ENTRADA: ! indica o componente onde o programa inicia !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <port id="pInicio" component="video1" /> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! MDIAS: ! define o local dos arquivos de mdia e as associa com seus descritores !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <media type="video" id="video1" src="media/video1.mpg" descriptor="dVideo1"> <attribute id="aVideo1Visible" name="visible" /> <attribute id="aVideo1SoundLevel" name="soundLevel" /> </media> <media type="video" id="video2" src="media/video2.mpg" descriptor="dVideo2"> <attribute id="aVideo2Visible" name="visible" /> <attribute id="aVideo2SoundLevel" name="soundLevel" /> </media> <media type="image" id="botaoVermelho" src="media/botao_vermelho.gif" descriptor="dBotaoVermelho" /> <media type="image" id="botaoVerde" src="media/botao_verde.gif" descriptor="dBotaoVerde" /> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! ELOS ! define os elos que regem o sincronismo entre as mdias !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <!-- incio do video1 deve disparar a exibio do video2 e das imagens dos botes --> <link id="lVideo_Botoes_start" xconnector="connectors#onBegin1StartN"> <bind component="video1" role="onBegin" /> <bind component="video2" role="start" /> <bind component="botaoVermelho" role="start" /> </link> <!-- trmino do video1 deve terminar a exibio das imagens dos botes --> <link id="lVideo_Botoes_stop" xconnector="connectors#onEnd1StopN"> <bind component="video1" role="onEnd" /> <bind component="video2" role="stop" /> <bind component="botaoVerde" role="stop" /> <bind component="botaoVermelho" role="stop" /> </link> <!-- alterna para vdeo 2 caso a tecla vermelha seja acionada --> <link id="lSelecionaVideo2" xconnector="connectors#onSelection1SetN"> <linkParam name="keyCode" value="RED" /> <bind component="botaoVermelho" role="onSelection" />

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

141: <bind component="video1" interface="aVideo1Visible" role="set"> 142: <bindParam name="valueSet" value="false" /> 143: </bind> 144: <bind component="video1" interface="aVideo1SoundLevel" role="set"> 145: <bindParam name="valueSet" value="0" /> 146: </bind> 147: 148: <bind component="video2" interface="aVideo2Visible" role="set"> 149: <bindParam name="valueSet" value="true" /> 150: </bind> 151: <bind component="video2" interface="aVideo2SoundLevel" role="set"> 152: <bindParam name="valueSet" value="1" /> 153: </bind> 154: </link> 155: 156: <!-- alterna para vdeo 1 caso a tecla verde seja acionada --> 157: 158: <link id="lSelecionaVideo1" xconnector="connectors#onSelection1SetN"> 159: <linkParam name="keyCode" value="GREEN" /> 160: <bind component="botaoVerde" role="onSelection" /> 161: 162: <bind component="video2" interface="aVideo2Visible" role="set"> 163: <bindParam name="valueSet" value="false" /> 164: </bind> 165: <bind component="video2" interface="aVideo2SoundLevel" role="set"> 166: <bindParam name="valueSet" value="0" /> 167: </bind> 168: 169: <bind component="video1" interface="aVideo1Visible" role="set"> 170: <bindParam name="valueSet" value="true" /> 171: </bind> 172: <bind component="video1" interface="aVideo1SoundLevel" role="set"> 173: <bindParam name="valueSet" value="1" /> 174: </bind> 175: </link> 176: 177: <!-- oculta a tecla vermelha quando ela pressionada --> 178: <link id="lToggleBotaoVermelho" xconnector="connectors#onSelection1StartNStopNAbortN"> 179: <bind component="botaoVermelho" role="onSelection"> 180: <bindParam name="keyCode" value="RED" /> 181: </bind> 182: <bind component="botaoVerde" role="start" /> 183: <bind component="botaoVermelho" role="stop" /> 184: </link> 185: 186: <!-- oculta a tecla verde quando ela pressionada --> 187: <link id="lToggleBotaoVerde" xconnector="connectors#onSelection1StartNStopNAbortN"> 188: <bind component="botaoVerde" role="onSelection"> 189: <bindParam name="keyCode" value="GREEN" /> 190: </bind> 191: <bind component="botaoVerde" role="stop" /> 192: <bind component="botaoVermelho" role="start" /> 193: </link> 194: 195: </body> 196: </ncl>

A Figura 15 ilustra as vises estrutural, temporal e espacial do exemplo 09:

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

onSelection1StartNStopNAbortN keycode=RED

video1

onBegin1StartN set visible=false set soundLevel=0

botaoVermelho

stop onSelection1SetN keycode=RED start start

viso estrutural

onBegin1StartN

set visible=true set soundLevel=1 set visible=true set soundLevel=1 set visible=false set soundLevel=0

onSelection1SetN keycode=GREEN
botaoVerde

video2

stop

onSelection1StartNStopNAbortN keycode=GREEN

pInicio rgVideo1

video1 onBegin1StartN onSelection1SetN video2 onEnd1StopN

elos de interao: conector onSelection1SetN elos de sincronismo: conectores onBegin1StartN e onEnd1StopN

rgBotaoVerde botaoVerde stop start rgBotaoVermelho botaoVermelho stop start

elo de interao: conector onSelection1StartNStopNAbortN

viso temporal viso espacial

video1 @ rgVideo1

video2 @ rgVideo1

botaoVermelho @ rgBotaoVermelho botaoVerde @ rgBotaoVerde

Figura 15: Vises estrutural, temporal e espacial do exemplo 09, com sincronismo (conectores onBegin1StartN e onEnd1StopN) e interao (conectores onSelection1SetN e onSelection1StartNStopNAbortN).

Regras, Switches e Ns do Tipo Settings


Esta seo ilustra o uso do n do tipo settings para armazenar valores que podem ser manipulados pelos elos para modificar o comportamento do programa.

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

Exemplo 10 Simulao de um menu de DVD O objetivo deste exemplo exibir um vdeo em loop, exibindo ao mesmo tempo duas opes de idioma. Ao selecionar uma das opes (pressionando a tecla verde ou vermelha do controle remoto da TV digital), exibido um vdeo de abertura (independente do idioma selecionado) e, em seguida, um vdeo sem som e um udio de acordo com o idioma escolhido. Todos os vdeos devem ser apresentados na mesma posio da tela. Para armazenar a opo selecionada, ser utilizado um n do tipo settings com um atributo idioma (linhas 109 a 111). J para selecionar o n de udio a ser reproduzido ao final do video2, so definidas rules (regras, linhas 79 a 82) e um switch (linhas 134 a 147).
Regras

As regras de um documento NCL so definidas na seo ruleBase, com base num atributo, operador e valor, como no exemplo a seguir:
<ruleBase> <rule id="rEn" var="idioma" op="eq" value="en" /> <rule id="rPt" var="idioma" op="eq" value="pt" /> </ruleBase>

Os seguintes operadores podem ser utilizados na definio de regras: eq (equal igual a); ne (not equal diferente de); gt (greater than maior que); ge (greater than or equal to maior que ou igual a); lt (less than menor que); le (less than or equal to menor que ou igual a). Uma forma de armazenar os atributos que sero utilizados nas regras utilizar o n settings. Trata-se de um n de atributos globais, como no seguinte exemplo:
<media type="settings" id="nodeSettings"> <attribute id="attrIdioma" name="idioma" /> </media>

Switch

Um switch um contexto com ns alternativos, ou seja, dentre os quais apenas um ser ativado. A deciso sobre qual n ser ativado dada por regras. Na definio de um switch, alm dos ns que o compem, devem ser definidos os mapeamentos das regras para esses ns e suas ncoras, tal como no seguinte exemplo:
<switch id="switchAudioIdioma"> <bindRule rule="rEn" component="audioEn" /> <bindRule rule="rPt" component="audioPt" /> <media type="audio" id="audioEn" src="media/audioEn.mp3" descriptor="dAudio1" />

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

<media type="audio" id="audioPt" src="media/audioPt.mp3" descriptor="dAudio1" /> </switch>

Nesse exemplo, a mdia audioEn ser reproduzida caso a regra rEn seja vlida, ou seja, caso idioma possua o valor en. Se essa regra no for vlida, o prximo mapeamento avaliado, e assim sucessivamente, at uma regra vlida ser alcanada ou at terminar o conjunto de mapeamentos daquele switch. Caso o switch seja composto de contextos, necessrio ainda definir um ou mais elementos switchPort para indicar a porta de destino de cada mapeamento das regras, como no seguinte exemplo:
<switch id="switchNivel"> <switchPort id="pNivel"> <mapping component="ctxBasico" interface="pBasico" /> <mapping component="ctxAvancado" interface="pAvancado" /> </switchPort> <bindRule rule="rBasico" component="ctxBasico" /> <bindRule rule="rAvancado" component="ctxAvancado" /> <context id="ctxBasico"> <port id="pBasico" component="videoBasico" /> <!-- ns e elos do contexto ctxBasico --> </context> <context id="ctxAvancado"> <port id="pAvancado" component="videoAvancado" /> <!-- ns e elos do contexto ctxAvancado --> </context> </switch>

*** Voltando ao exemplo, quando o boto vermelho ou o verde selecionado, o idioma correspondente armazenado no atributo idioma, atravs do conector OnSelection1SetNStartNStopNAbortN (linhas 183 a 209). Este mesmo conector o responsvel por interromper o video1 e iniciar a exibio do video2. Quando o video2 termina, o elo lVideo2StartVideo3, atravs do conector OnEnd1StartN, ativa o n de contexto contextoFilme (linhas 211 a 215). A porta desse contexto ativa o video3 (linha 129), que por sua vez dispara, sincronamente, atravs do conector onBegin1StartN (linhas 147 a 154), o switch switchAudioIdioma (linhas 139 a 145). Este switch regido pelas regras rEn e rPt (linhas 140 e 141), definidas previamente na seo ruleBase (linhas 79 a 82). Nota-se que foi criado um segundo descritor para o video3 (linhas 65 a 67), pois ele deve ser exibido sem som (soundLevel=0). Observao: Para executar este exemplo, necessrio que haja, no subdiretrio media, sob o diretrio onde o arquivo NCL estiver localizado, as seguintes mdias: trs arquivos de vdeo, chamados video1.mpg, video2.mpg e video3.mpg; duas imagens, chamadas botao_vermelho.gif e botao_verde.gif, representando os botes vermelho e verde, respectivamente; e dois arquivos de udio, chamados audioEn.mp3 e audioPt.mp3, cada qual num idioma (en = ingls e pt = portugus).

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

A Listagem 10 apresenta o cdigo do exemplo, e as linhas em negrito indicam aquelas que foram inseridas ou modificadas para este exemplo.
Listagem 10: Documento NCL para exibir um vdeo em loop e, mediante a seleo do usurio, substitu-lo por um segundo vdeo e, finalmente, exibir um terceiro vdeo e um udio conforme a seleo de idioma.
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: <?xml version="1.0" encoding="ISO-8859-1"?> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ EXEMPLO 10 Objetivo: Reproduzir um vdeo e permitir que o usurio selecione o idioma do udio, atravs do pressionamento das teclas vermelha e verde do controle remoto. Caractersticas: - sincronismo: simples (de incio e trmino de mdias) - interao do usurio: seleo do udio a ser exibido Preparao: Para executar este exemplo, necessrio ter as seguintes mdias no subdiretrio mdia a partir do caminho do arquivo NCL: 1) arquivo de vdeo chamado video1.mpg, com uma introduo em loop 2) arquivo de vdeo chamado video2.mpg, com uma abertura do produtor do vdeo 3) arquivo de vdeo chamado video3.mpg, que contm o filme em si 4) arquivo de udio chamado audio1.mp3, com o udio em ingls 5) arquivo de udio chamado audio2.mp3, com o udio em portugus 6) arquivo de imagem chamado botao_vermelho.gif, indicando a ao do boto vermelho 7) arquivo de imagem chamado botao_verde.gif, indicando a ao do boto verde !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! CABEALHO NCL: ! define as URIs dos esquemas da NCL !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <ncl id="exemplo10" xmlns="http://www.telemidia.puc-rio.br/specs/xml/NCL23/profiles" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.telemidia.puc-rio.br/specs/xml/NCL23/profiles/NCL23.xsd">

36: 37: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 38: ! CABEALHO DO PROGRAMA 39: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 40: 41: <head> 42: 43: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 44: ! BASE DE REGIES: 45: ! define as regies na tela onde as mdias so apresentadas 46: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 47: 48: <regionBase> 49: <region id="rgTV" width="1920" height="1080"> 50: <region id="rgVideo1" left="200" top="168" width="320" height="240" /> 51: <region id="rgAudio1" left="200" top="410" width="320" /> 52: <region id="rgBotaoVermelho" left="200" top="420" width="25" height="25" /> 53: <region id="rgBotaoVerde" left="200" top="470" width="25" height="25" /> 54: </region> 55: </regionBase> 56: 57: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 58: ! BASE DE DESCRITORES: 59: ! define como as mdias so apresentadas 60: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 61:

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

62: 63: 64: 65: 66: 67: 68: 69: 70: 71: 72: 73: 74: 75: 76: 77: 78: 79: 80: 81: 82: 83: 84: 85: 86: 87: 88: 89: 90: 91: 92: 93: 94: 95: 96: 97: 98: 99: 100: 101: 102: 103: 104: 105: 106: 107: 108: 109: 110: 111: 112: 113: 114: 115: 116: 117: 118: 119: 120: 121: 122: 123: 124: 125: 126: 127: 128: 129: 130: 131: 132: 133: 134:

<descriptorBase> <descriptor id="dVideo1" region="rgVideo1" /> <descriptor id="dVideo3" region="rgVideo1"> <descriptorParam name="soundLevel" value="0" /> </descriptor> <descriptor id="dAudio1" region="rgAudio1" /> <descriptor id="dBotaoVermelho" region="rgBotaoVermelho" /> <descriptor id="dBotaoVerde" region="rgBotaoVerde" /> </descriptorBase> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! BASE DE REGRAS: ! definem o comportamento dos elos !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <ruleBase> <rule id="rEn" var="idioma" op="eq" value="en" /> <rule id="rPt" var="idioma" op="eq" value="pt" /> </ruleBase> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! BASE DE CONECTORES: ! definem o comportamento dos elos !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <connectorBase> <importBase alias="connectors" baseURI="connectorBase.ncl"/> </connectorBase> </head> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! CORPO DO PROGRAMA: ! define as mdias e estrutura do programa !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <body> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! PONTO DE ENTRADA: ! indica o componente onde o programa inicia !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <port id="pInicio" component="video1" /> <media type="settings" id="nodeSettings"> <attribute id="attrIdioma" name="idioma" /> </media> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! MDIAS: ! define o local dos arquivos de mdia e as associa com seus descritores !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <media type="video" id="video1" src="media/video1.mpg" descriptor="dVideo1" /> <media type="video" id="video2" src="media/video2.mpg" descriptor="dVideo1" /> <media type="image" id="botaoVermelho" src="media/botao_vermelho.gif" descriptor="dBotaoVermelho" /> <media type="image" id="botaoVerde" src="media/botao_verde.gif" descriptor="dBotaoVerde" /> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! CONTEXTO: ! contm o vdeo do filme e do switch com os udios !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <context id="contextoFilme"> <port id="pVideo3" component="video3" /> <media type="video" id="video3" src="media/video3.mpg" descriptor="dVideo3" /> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! SWITCH: contexto que

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

135: 136: 137: 138: 139: 140: 141: 142: 143: 144: 145: 146: 147: 148: 149: 150: 151: 152: 153: 154: 155: 156: 157: 158: 159: 160: 161: 162: 163: 164: 165: 166: 167: 168: 169: 170: 171: 172: 173: 174: 175: 176: 177: 178: 179: 180: 181: 182: 183: 184: 185: 186: 187: 188: 189: 190: 191: 192: 193: 194: 195: 196: 197: 198: 199: 200: 201: 202: 203: 204: 205:

! contm os udios, com regra de seleo entre eles ! conforme o idioma !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <switch id="switchAudioIdioma"> <bindRule rule="rEn" component="audioEn" /> <bindRule rule="rPt" component="audioPt" /> <media type="audio" id="audioEn" src="media/audioEn.mp3" descriptor="dAudio1" /> <media type="audio" id="audioPt" src="media/audioPt.mp3" descriptor="dAudio1" /> </switch> <!-- incio do video3 deve disparar a reproduo do udio --> <link id="lVideo3AudioStart" xconnector="connectors#onBegin1StartN"> <bind component="video3" role="onBegin" /> <bind component="switchAudioIdioma" role="start" /> </link> <!-- trmino do video3 deve parar a reproduo do udio --> <link id="lVideo3AudioStop" xconnector="connectors#onEnd1StopN"> <bind component="video3" role="onEnd" /> <bind component="switchAudioIdioma" role="stop" /> </link> </context> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! ELOS ! define os elos que regem o sincronismo entre as mdias !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <!-- incio do video1 deve exibir botes --> <link id="lVideo1Init" xconnector="connectors#onBegin1StartN"> <bind component="video1" role="onBegin" /> <bind component="botaoVermelho" role="start" /> <bind component="botaoVerde" role="start" /> </link> <!-- trmino do video1 deve dispar-lo novamente (deve tocar em loop) --> <link id="lVideo1Loop" xconnector="connectors#onEnd1Start1"> <bind component="video1" role="onEnd" /> <bind component="video1" role="start" /> </link> <!-- define idioma ingls quando a tecla vermelha pressionada --> <link id="lSelectBotaoVermelhoIdioma" xconnector="connectors#onSelection1SetNStartNStopNAbortN"> <bind component="botaoVermelho" role="onSelection"> <bindParam name="keyCode" value="RED" /> </bind> <bind component="nodeSettings" interface="attrIdioma" role="set"> <bindParam name="valueSet" value="en" /> </bind> <bind component="botaoVerde" role="stop" /> <bind component="botaoVermelho" role="stop" /> <bind component="video1" role="abort" /> <bind component="video2" role="start" /> </link> <!-- define idioma portugus quando a tecla verde pressionada --> <link id="lSelectBotaoVerdeIdioma" xconnector="connectors#onSelection1SetNStartNStopNAbortN"> <bind component="botaoVerde" role="onSelection"> <bindParam name="keyCode" value="GREEN" /> </bind> <bind component="nodeSettings" interface="attrIdioma" role="set"> <bindParam name="valueSet" value="pt" /> </bind> <bind component="botaoVerde" role="stop" /> <bind component="botaoVermelho" role="stop" /> <bind component="video1" role="abort" />

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

206: <bind component="video2" role="start" /> 207: </link> 208: 209: <!-- trmino do video2 deve disparar o video3 em seu contexto --> 210: <link id="lVideo2StartVideo3" xconnector="connectors#onEnd1StartN"> 211: <bind component="video2" role="onEnd" /> 212: <bind component="contextoFilme" interface="pVideo3" role="start" /> 213: </link> 214: 215: </body> 216: </ncl>

A Figura 16 ilustra as vises estrutural, temporal e espacial do exemplo 10:

botaoVerde

onSelection1SetNStartNStopNAbortN keyCode=GREEN video3 stop start onEnd1StartN onBegin1StartN

contextoFilme

onBegin1StartN stop

onEnd1StopN

onEnd1StartN video1

switchAudioIdioma abort set idioma=pt nodeSettings abort set idioma=en audioEn stop start stop audioPt video2 rEn rPt

viso estrutural

onBegin1StartN

botaoVermelho

onSelection1SetNStartNStopNAbortN keyCode=RED

elos de interao: conector onSelection1SetNStartNStopNAbortN


pInicio onEnd1StartN onEnd1StartN rgVideo1 video1 rgVideo1 video2 onBegin1StartN abort start switchAudioIdioma rgBotaoVerde stop botaoVerde abort set idioma=pt audioEn start rgAudio1 rPt (idioma=pt) rEn (idioma=en) rgBotaoVermelho stop botaoVermelho set idioma=en audioPt rgVideo1 video3 onEnd1StopN contextoFilme

nodeSettings (atributo idioma)

viso temporal viso espacial

video1 @ rgVideo1

video2 @ rgVideo1

video3 @ rgVideo1

botaoVerde @ rgBotaoVerde botaoVermelho @ rgBotaoVermelho

[audioEn | audioPt] @ rgAudio1

Figura 16: Vises estrutural, temporal e espacial do exemplo 10, com sincronismo (conectores
onBegin1StartN e onEnd1StartN) e interao (conector onSelection1SetNStartNStopNAbortN)

O conector onSelection1SetNStartNStopNAbortN apresentado na Tabela 10:

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

Tabela 10: Definio do conector onSelection1SetNStartNStopNAbortN.

Nome: Tipo: Condio: Ao:

onSelection1SetNStartNStopNAbortN causal tecla <keyCode> acionada (papel onSelection) exibe as mdias identificadas pelo papel start; pra as mdias identificadas pelo papel stop; aborta as mdias identificadas pelo papel abort; e define o valor <valueSet> ao atributo mapeado atravs do papel set.

Observao:

Os elos que utilizarem este conector devero identificar, como parmetro adicional do elo (linkParam) ou como parmetro do mapeamento de um n (bindParam), o cdigo virtual da tecla do controle remoto associada seleo. Por exemplo:
<linkParam name="keyCode" value="VK_ENTER" />

Os elos que utilizarem este conector devero identificar tambm, como parmetro adicional dos mapeamentos dos ns (bindParam), os novos valores dos atributos. Por exemplo:
<bindParam name="valueSet" value="en" />

Exemplo 11 Simulao de um menu de DVD com feedback No exemplo anterior, ao selecionar um idioma, o usurio no recebe qualquer feedback imediato sobre qual opo foi selecionada. Ele precisa esperar o incio da reproduo do udio, aps o video2, para saber se fez a seleo correta. Como boa prtica de projeto de programa audiovisual interativo, deve-se fornecer um feedback para toda ao do usurio. Uma forma de se fazer isso ocultar momentaneamente as opes que no foram selecionadas, deixando apenas a seleo do usurio visvel, mesmo que por uma frao de segundo. Para atingir esse efeito, pode-se definir um atributo delay no mapeamento de ativao do conector. A Tabela 11 apresenta o conector OnSelection1SetNStartNStopNAbortN modificado (chamado de OnSelection1SetStartStopDelay), para acomodar no apenas o disparo imediato de eventos, mas tambm um disparo retardado por meio segundo:
Tabela 11: Redefinio do conector onSelection1SetStartStop, para introduzir papis de ativao com retardo.

Nome: Tipo:

onSelection1SetStartStopDelay causal

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

Condio: Ao:

tecla <keyCode> acionada (papel onSelection) exibe as mdias identificadas pelo papel start; pra as mdias identificadas pelo papel stop; aborta as mdias identificadas pelo papel abort; define o valor <valueSet> ao atributo mapeado atravs do papel set; exibe, aps um retardo de 0,5s, as mdias identificadas pelo papel dstart; pra, aps um retardo de 0,5s, as mdias identificadas pelo papel dstop; e aborta, aps um retardo de 0,5s, as mdias identificadas pelo papel dabort.

Observao:

Os elos que utilizarem este conector devero identificar, como parmetros adicionais da ligao com o n de origem (bindParam ou linkParam), o cdigo virtual da tecla do controle remoto associada seleo e o valor a ser atribudo. Por exemplo:
<bindParam name="keyCode" value="GREEN" /> <bindParam name="valueSet" value="en" />

Fazendo uso desse conector, pode-se ocultar imediatamente a opo no selecionada, e aps meio segundo, oculta-se a opo selecionada e substituir o video1 pelo video2. A Listagem 11 apresenta o cdigo NCL das modificaes necessrias para esse exemplo.
Listagem 11: Modificaes sobre a listagem anterior (linhas 183 a 209) para, mediante a seleo do usurio, fornecer feedback momentneo.
183: 184: 185: 186: 187: 188: 189: 190: 191: 192: 193: 194: 195: 196: 197: 198: 199: 200: 201: 202: 203: 204: 205: 206: 207: 208: 209: <!-- define idioma ingls quando a tecla vermelha pressionada --> <link id="lSelectBotaoVermelhoIdioma" xconnector="connectors#onSelection1SetStartStopDelay"> <bind component="botaoVermelho" role="onSelection"> <bindParam name="keyCode" value="RED" /> </bind> <bind component="nodeSettings" interface="idioma" role="set"> <bindParam name="valueSet" value="en" /> </bind> <bind component="botaoVerde" role="stop" /> <bind component="botaoVermelho" role="dstop" /> <bind component="video1" role="dabort" /> <bind component="video2" role="dstart" /> </link> <!-- define idioma portugus quando a tecla verde pressionada --> <link id="lSelectBotaoVerdeIdioma" xconnector="connectors#onSelection1SetStartStopDelay"> <bind component="botaoVerde" role="onSelection"> <bindParam name="keyCode" value="GREEN" /> </bind> <bind component="nodeSettings" interface="idioma" role="set"> <bindParam name="valueSet" value="pt" /> </bind> <bind component="botaoVerde" role="dstop" /> <bind component="botaoVermelho" role="stop" /> <bind component="video1" role="dabort" /> <bind component="video2" role="dstart" /> </link>

A Figura 17 ilustra as vises estrutural, temporal e espacial do exemplo 11:

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

botaoVerde

onSelection1SetNStartNStopNAbortN keyCode=GREEN video3 dstop dstart onEnd1StartN onBegin1StartN

contextoFilme

onBegin1StartN stop

onEnd1StopN

onEnd1StartN video1

dabort

set idioma=pt nodeSettings video2

switchAudioIdioma rEn rPt

dabort

set idioma=en audioEn stop dstart dstop audioPt

viso estrutural

onBegin1StartN

botaoVermelho

onSelection1SetNStartNStopNAbortN keyCode=RED

elos de interao: conector onSelection1SetNStartNStopNAbortNDelay


pInicio onEnd1StartN onEnd1StartN rgVideo1 video1 rgVideo1 video2 onBegin1StartN dstart dabort switchAudioIdioma rgBotaoVerde dstop botaoVerde dstart rgAudio1 rPt (idioma=pt) rEn (idioma=en) rgBotaoVermelho dstop dabort botaoVermelho set idioma=en set idioma=pt audioEn audioPt rgVideo1 video3 onEnd1StopN contextoFilme

nodeSettings (atributo idioma)

viso temporal viso espacial

video1 @ rgVideo1

video1 @ rgVideo1

video2 @ rgVideo1

video3 @ rgVideo1

botaoVerde @ rgBotaoVerde botaoVermelho @ rgBotaoVermelho

botaoVerde @ rgBotaoVerde

[audioEn | audioPt] @ rgAudio1

ou

video1 @ rgVideo1

botaoVermelho @ rgBotaoVermelho

Figura 17: Vises estrutural, temporal e espacial do exemplo 11, com feedback momentneo da seleo do usurio.

Exemplo 12 Seleo atravs das setas ou nmeros do controle remoto Os exemplos de interatividade apresentados at agora fizeram uso dos botes coloridos. No entanto, essa estratgia est limitada ao nmero de botes coloridos do controle remoto da TV, que geralmente so 4. Como existem situaes em que so oferecidas aos usurios mais do que 4 opes, torna-se necessrio apresentar outra estratgia de seleo. Uma estratgia utilizada com freqncia faz uso das setas do controle remoto ou teclas numricas para

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

identificar uma opo, seguidas do pressionamento da tecla OK para ativar o elo correspondente seleo realizada. Para realizar esse tipo de menu, segue-se o esquema da Figura 18. O esquema considera que as opes esto ordenadas. Inicia-se com a primeira opo selecionada. Caso a tecla para baixo seja pressionada, a prxima opo selecionada. J a tecla para cima utilizada para selecionar a opo anterior na lista. Caso um nmero seja pressionado, a opo correspondente selecionada. Observa-se que o esquema no representa um menu circular, ou seja, pressionar a seta para baixo na ltima opo no seleciona a primeira, assim como pressionar a seta para cima na primeira opo no seleciona a ltima. Aps selecionar a opo desejada, o usurio pode pressionar a tecla OK (cdigo virtual VK_ENTER) para acionar o elo correspondente.

Figura 18: Esquema de seleo de uma dentre 6 opes de menu.

Nesse tipo de menu, imprescindvel que o usurio seja mantido informado de qual a seleo atual. Para isso, este exemplo utiliza uma imagem que movida para o lado esquerdo da seleo atual, conforme o esquema da Figura 19.

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

Figura 19: Indicao da opo atual selecionada.

Esse exemplo utiliza novamente um atributo do n do tipo settings (nodeSettings), desta vez chamado opcao. A Listagem 12 apresenta o cdigo do programa que, dada uma seleo, dispara uma pgina HTML correspondente (selecao1.html, selecao2.html etc).
Listagem 12: Documento NCL ilustrando um menu com 6 opes.
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: <?xml version="1.0" encoding="ISO-8859-1"?> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ EXEMPLO 12 Objetivo: Selecionar uma dentre 6 opes, mudando o item ativo atravs das setas Caractersticas: - sincronismo: simples (de incio e trmino de uma mdia) - interao do usurio: nenhuma Preparao: Para executar este exemplo, necessrio ter as seguintes mdias no subdiretrio mdia a partir do caminho do arquivo NCL: 1) arquivo de vdeo, chamado video1.mpg 2) arquivos de imagens indicando as opes (opcao1.gif .. opcao6.gif) 3) arquivo de imagem indicando opo atual (marca_opcao.gif) 4) arquivos HTML resultantes da escolha (selecao1.html .. selecao6.html) !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! CABEALHO NCL: ! define as URIs dos esquemas da NCL !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <ncl id="exemplo12" xmlns="http://www.telemidia.puc-rio.br/specs/xml/NCL23/profiles" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.telemidia.puc-rio.br/specs/xml/NCL23/profiles/NCL23.xsd">

32: 33: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 34: ! CABEALHO DO PROGRAMA 35: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 36:

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

37: 38: 39: 40: 41: 42: 43: 44: 45: 46: 47: 48: 49: 50: 51: 52: 53: 54: 55: 56: 57: 58: 59: 60: 61: 62: 63: 64: 65: 66: 67: 68: 69: 70: 71: 72: 73: 74: 75: 76: 77: 78: 79: 80: 81: 82: 83: 84: 85: 86: 87: 88: 89: 90: 91: 92: 93: 94: 95: 96: 97: 98: 99: 100: 101: 102: 103: 104: 105: 106: 107: 108: 109:

<head> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! BASE DE REGIES: ! define as regies na tela onde as mdias so apresentadas !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <regionBase> <region id="rgTV" width="1920" height="1080"> <region id="rgVideo1" left="448" top="100" width="1024" height="768" /> <region id="rgMarcadorOpcao" left="150" top="100" width="50" height="50" zIndex="1" /> <region id="rgOpcao1" left="200" top="100" width="200" height="50" zIndex="1"/> <region id="rgOpcao2" left="200" top="150" width="200" height="50" zIndex="1" /> <region id="rgOpcao3" left="200" top="200" width="200" height="50" zIndex="1" /> <region id="rgOpcao4" left="200" top="250" width="200" height="50" zIndex="1" /> <region id="rgOpcao5" left="200" top="300" width="200" height="50" zIndex="1" /> <region id="rgOpcao6" left="200" top="350" width="200" height="50" zIndex="1" /> <region id="rgResultado" left="150" top="100" width="200" height="100" zindex="1" /> </region> </regionBase> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! BASE DE DESCRITORES: ! define como as mdias so apresentadas !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <descriptorBase> <descriptor id="dVideo1" region="rgVideo1" /> <descriptor id="dMarcadorOpcao" region="rgMarcadorOpcao" /> <descriptor id="dOpcao1" region="rgOpcao1" /> <descriptor id="dOpcao2" region="rgOpcao2" /> <descriptor id="dOpcao3" region="rgOpcao3" /> <descriptor id="dOpcao4" region="rgOpcao4" /> <descriptor id="dOpcao5" region="rgOpcao5" /> <descriptor id="dOpcao6" region="rgOpcao6" /> <descriptor id="dSelecionado" region="rgResultado" explicitDur="3s" /> </descriptorBase> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! BASE DE REGRAS: ! definem regras utilizadas em switches para a seleo de ns !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <ruleBase> <rule id="r1" var="opcao" op="eq" value="1" /> <rule id="r2" var="opcao" op="eq" value="2" /> <rule id="r3" var="opcao" op="eq" value="3" /> <rule id="r4" var="opcao" op="eq" value="4" /> <rule id="r5" var="opcao" op="eq" value="5" /> <rule id="r6" var="opcao" op="eq" value="6" /> </ruleBase> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! BASE DE CONECTORES: ! definem o comportamento dos elos !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <connectorBase> <importBase alias="connectors" baseURI="connectorBase.ncl"/> </connectorBase> </head> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! CORPO DO PROGRAMA: ! define as mdias e estrutura do programa !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <body>

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

110: 111: 112: 113: 114: 115: 116: 117: 118: 119: 120: 121: 122: 123: 124: 125: 126: 127: 128: 129: 130: 131: 132: 133: 134: 135: 136: 137: 138: 139: 140: 141: 142: 143: 144: 145: 146: 147: 148: 149: 150: 151: 152: 153: 154: 155: 156: 157: 158: 159: 160: 161: 162: 163: 164: 165: 166: 167: 168: 169: 170: 171: 172: 173: 174: 175: 176: 177: 178: 179: 180: 181: 182:

<!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! PONTO DE ENTRADA: ! indica o componente onde o programa inicia !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <port id="pInicio" component="video1" /> <media type="settings" id="nodeSettings"> <attribute id="attrOpcao" name="opcao" /> </media> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! MDIAS: ! define o local dos arquivos de mdia e as associa com seus descritores !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <media type="video" id="video1" src="media/video1.mpg" descriptor="dVideo1"> </media> <media type="image" id="marcadorOpcao" src="media/marca_opcao.gif" descriptor="dMarcadorOpcao"> <!-- atributo manipulado por elos --> <attribute id="attrMarcadorTop" name="top" /> </media> <media type="image" id="opcao1" src="media/opcao1.gif" descriptor="dOpcao1" /> <media type="image" id="opcao2" src="media/opcao2.gif" descriptor="dOpcao2" /> <media type="image" id="opcao3" src="media/opcao3.gif" descriptor="dOpcao3" /> <media type="image" id="opcao4" src="media/opcao4.gif" descriptor="dOpcao4" /> <media type="image" id="opcao5" src="media/opcao5.gif" descriptor="dOpcao5" /> <media type="image" id="opcao6" src="media/opcao6.gif" descriptor="dOpcao6" /> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! SWITCH: ! contm os ns dentre os quais um ser selecionado ! com base nas regras definidas por bindRule !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <switch id="switchOpcao"> <!-- caso a regra ri seja vlida, dispara o n selecaoi --> <bindRule rule="r1" component="selecao1" /> <bindRule rule="r2" component="selecao2" /> <bindRule rule="r3" component="selecao3" /> <bindRule rule="r4" component="selecao4" /> <bindRule rule="r5" component="selecao5" /> <bindRule rule="r6" component="selecao6" /> <media type="text" id="selecao1" src="media/selecao1.html" descriptor="dSelecionado" /> <media type="text" id="selecao2" src="media/selecao2.html" descriptor="dSelecionado" /> <media type="text" id="selecao3" src="media/selecao3.html" descriptor="dSelecionado" /> <media type="text" id="selecao4" src="media/selecao4.html" descriptor="dSelecionado" /> <media type="text" id="selecao5" src="media/selecao5.html" descriptor="dSelecionado" /> <media type="text" id="selecao6" src="media/selecao6.html" descriptor="dSelecionado" /> </switch> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! ELOS ! define os elos que regem o sincronismo entre as mdias !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <!-- incio do vdeo 1 deve iniciar a exibio das opes --> <link id="Video1Start" xconnector="connectors#onBegin1StartN"> <bind component="video1" role="onBegin" /> <bind component="marcadorOpcao" role="start" /> <bind component="opcao1" role="start" /> <bind component="opcao2" role="start" /> <bind component="opcao3" role="start" /> <bind component="opcao4" role="start" /> <bind component="opcao5" role="start" /> <bind component="opcao6" role="start" /> </link>

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

183: 184: 185: 186: 187: 188: 189: 190: 191: 192: 193: 194: 195: 196: 197: 198: 199: 200: 201: 202: 203: 204: 205: 206: 207: 208: 209: 210: 211: 212: 213: 214: 215: 216: 217: 218: 219: 220: 221: 222: 223: 224: 225: 226: 227: 228: 229: 230: 231: 232: 233: 234: 235: 236: 237: 238: 239: 240: 241: 242: 243: 244: 245: 246: 247: 248: 249: 250: 251: 252: 253: 254: 255:

<!-- incio do vdeo 1 deve definir o valor default para marcadorOpcao --> <link id="Video1Set" xconnector="connectors#onBegin1SetN"> <bind component="video1" role="onBegin" /> <bind component="nodeSettings" interface="attrOpcao" role="set"> <bindParam name="valueSet" value="1" /> </bind> </link> <!-- ncoras de seta para baixo --> <link id="SetaBaixo1" xconnector="connectors#onCondSelectSetNStartNStopN"> <bind component="video1" role="onSelection"> <bindParam name="keyCode" value="VK_DOWN" /> </bind> <bind component="nodeSettings" interface="attrOpcao" role="attTest"> <bindParam name="valueTest" value="1" /> </bind> <bind component="nodeSettings" interface="attrOpcao" role="set"> <bindParam name="valueSet" value="2" /> </bind> <bind component="marcadorOpcao" interface="attrMarcadorTop" role="set"> <bindParam name="valueSet" value="150" /> </bind> </link> <link id="SetaBaixo2" xconnector="connectors#onCondSelectSetNStartNStopN"> <bind component="video1" role="onSelection"> <bindParam name="keyCode" value="VK_DOWN" /> </bind> <bind component="nodeSettings" interface="attrOpcao" role="attTest"> <bindParam name="valueTest" value="2" /> </bind> <bind component="nodeSettings" interface="attrOpcao" role="set"> <bindParam name="valueSet" value="3" /> </bind> <bind component="marcadorOpcao" interface="attrMarcadorTop" role="set"> <bindParam name="valueSet" value="200" /> </bind> </link> <link id="SetaBaixo3" xconnector="connectors#onCondSelectSetNStartNStopN"> <bind component="video1" role="onSelection"> <bindParam name="keyCode" value="VK_DOWN" /> </bind> <bind component="nodeSettings" interface="attrOpcao" role="attTest"> <bindParam name="valueTest" value="3" /> </bind> <bind component="nodeSettings" interface="attrOpcao" role="set"> <bindParam name="valueSet" value="4" /> </bind> <bind component="marcadorOpcao" interface="attrMarcadorTop" role="set"> <bindParam name="valueSet" value="250" /> </bind> </link> <link id="SetaBaixo4" xconnector="connectors#onCondSelectSetNStartNStopN"> <bind component="video1" role="onSelection"> <bindParam name="keyCode" value="VK_DOWN" /> </bind> <bind component="nodeSettings" interface="attrOpcao" role="attTest"> <bindParam name="valueTest" value="4" /> </bind> <bind component="nodeSettings" interface="attrOpcao" role="set"> <bindParam name="valueSet" value="5" /> </bind> <bind component="marcadorOpcao" interface="attrMarcadorTop" role="set"> <bindParam name="valueSet" value="300" /> </bind> </link> <link id="SetaBaixo5" xconnector="connectors#onCondSelectSetNStartNStopN"> <bind component="video1" role="onSelection">

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

256: 257: 258: 259: 260: 261: 262: 263: 264: 265: 266: 267: 268: 269: 270: 271: 272: 273: 274: 275: 276: 277: 278: 279: 280: 281: 282: 283: 284: 285: 286: 287: 288: 289: 290: 291: 292: 293: 294: 295: 296: 297: 298: 299: 300: 301: 302: 303: 304: 305: 306: 307: 308: 309: 310: 311: 312: 313: 314: 315: 316: 317: 318: 319: 320: 321: 322: 323: 324: 325: 326: 327: 328:

<bindParam name="keyCode" value="VK_DOWN" /> </bind> <bind component="nodeSettings" interface="attrOpcao" role="attTest"> <bindParam name="valueTest" value="5" /> </bind> <bind component="nodeSettings" interface="attrOpcao" role="set"> <bindParam name="valueSet" value="6" /> </bind> <bind component="marcadorOpcao" interface="attrMarcadorTop" role="set"> <bindParam name="valueSet" value="350" /> </bind> </link> <!-- ncoras de seta para cima --> <link id="SetaCima2" xconnector="connectors#onCondSelectSetNStartNStopN"> <bind component="video1" role="onSelection"> <bindParam name="keyCode" value="VK_UP" /> </bind> <bind component="nodeSettings" interface="attrOpcao" role="attTest"> <bindParam name="valueTest" value="2" /> </bind> <bind component="nodeSettings" interface="attrOpcao" role="set"> <bindParam name="valueSet" value="1" /> </bind> <bind component="marcadorOpcao" interface="attrMarcadorTop" role="set"> <bindParam name="valueSet" value="100" /> </bind> </link> <link id="SetaCima3" xconnector="connectors#onCondSelectSetNStartNStopN"> <bind component="video1" role="onSelection"> <bindParam name="keyCode" value="VK_UP" /> </bind> <bind component="nodeSettings" interface="attrOpcao" role="attTest"> <bindParam name="valueTest" value="3" /> </bind> <bind component="nodeSettings" interface="attrOpcao" role="set"> <bindParam name="valueSet" value="2" /> </bind> <bind component="marcadorOpcao" interface="attrMarcadorTop" role="set"> <bindParam name="valueSet" value="150" /> </bind> </link> <link id="SetaCima4" xconnector="connectors#onCondSelectSetNStartNStopN"> <bind component="video1" role="onSelection"> <bindParam name="keyCode" value="VK_UP" /> </bind> <bind component="nodeSettings" interface="attrOpcao" role="attTest"> <bindParam name="valueTest" value="4" /> </bind> <bind component="nodeSettings" interface="attrOpcao" role="set"> <bindParam name="valueSet" value="3" /> </bind> <bind component="marcadorOpcao" interface="attrMarcadorTop" role="set"> <bindParam name="valueSet" value="200" /> </bind> </link> <link id="SetaCima5" xconnector="connectors#onCondSelectSetNStartNStopN"> <bind component="video1" role="onSelection"> <bindParam name="keyCode" value="VK_UP" /> </bind> <bind component="nodeSettings" interface="attrOpcao" role="attTest"> <bindParam name="valueTest" value="5" /> </bind> <bind component="nodeSettings" interface="attrOpcao" role="set"> <bindParam name="valueSet" value="4" /> </bind> <bind component="marcadorOpcao" interface="attrMarcadorTop" role="set"> <bindParam name="valueSet" value="250" /> </bind>

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

329: 330: 331: 332: 333: 334: 335: 336: 337: 338: 339: 340: 341: 342: 343: 344: 345: 346: 347: 348: 349: 350: 351: 352: 353: 354: 355: 356: 357: 358: 359: 360: 361: 362: 363: 364: 365: 366: 367: 368: 369: 370: 371: 372: 373: 374: 375: 376: 377: 378: 379: 380: 381: 382: 383: 384: 385: 386: 387: 388: 389: 390: 391: 392: 393: 394: 395: 396: 397: 398: 399: 400: 401:

</link> <link id="SetaCima6" xconnector="connectors#onCondSelectSetNStartNStopN"> <bind component="video1" role="onSelection"> <bindParam name="keyCode" value="VK_UP" /> </bind> <bind component="nodeSettings" interface="attrOpcao" role="attTest"> <bindParam name="valueTest" value="6" /> </bind> <bind component="nodeSettings" interface="attrOpcao" role="set"> <bindParam name="valueSet" value="5" /> </bind> <bind component="marcadorOpcao" interface="attrMarcadorTop" role="set"> <bindParam name="valueSet" value="300" /> </bind> </link> <!-- ncoras de nmeros --> <link id="Selecao_Num1" xconnector="connectors#onSelection1SetNStartNStopNAbortN"> <bind component="video1" role="onSelection"> <bindParam name="keyCode" value="1" /> </bind> <bind component="nodeSettings" interface="attrOpcao" role="set"> <bindParam name="valueSet" value="1" /> </bind> <bind component="marcadorOpcao" interface="attrMarcadorTop" role="set"> <bindParam name="valueSet" value="100" /> </bind> </link> <link id="Selecao_Num2" xconnector="connectors#onSelection1SetNStartNStopNAbortN"> <bind component="video1" role="onSelection"> <bindParam name="keyCode" value="2" /> </bind> <bind component="nodeSettings" interface="attrOpcao" role="set"> <bindParam name="valueSet" value="2" /> </bind> <bind component="marcadorOpcao" interface="attrMarcadorTop" role="set"> <bindParam name="valueSet" value="150" /> </bind> </link> <link id="Selecao_Num3" xconnector="connectors#onSelection1SetNStartNStopNAbortN"> <bind component="video1" role="onSelection"> <bindParam name="keyCode" value="3" /> </bind> <bind component="nodeSettings" interface="attrOpcao" role="set"> <bindParam name="valueSet" value="3" /> </bind> <bind component="marcadorOpcao" interface="attrMarcadorTop" role="set"> <bindParam name="valueSet" value="200" /> </bind> </link> <link id="Selecao_Num4" xconnector="connectors#onSelection1SetNStartNStopNAbortN"> <bind component="video1" role="onSelection"> <bindParam name="keyCode" value="4" /> </bind> <bind component="nodeSettings" interface="attrOpcao" role="set"> <bindParam name="valueSet" value="4" /> </bind> <bind component="marcadorOpcao" interface="attrMarcadorTop" role="set"> <bindParam name="valueSet" value="250" /> </bind> </link> <link id="Selecao_Num5" xconnector="connectors#onSelection1SetNStartNStopNAbortN"> <bind component="video1" role="onSelection"> <bindParam name="keyCode" value="5" /> </bind> <bind component="nodeSettings" interface="attrOpcao" role="set"> <bindParam name="valueSet" value="5" />

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

402: 403: 404: 405: 406: 407: 408: 409: 410: 411: 412: 413: 414: 415: 416: 417: 418: 419: 420: 421: 422: 423: 424: 425: 426: 427: 428: 429: 430: 431: 432: 433: 434: 435: 436: 437: 438: 439: 440: 441: 442: 443: 444: 445: 446: 447: 448: 449: 450: 451: 452: 453: 454: 455: 456: 457: 458: 459: 460: 461: 462: 463: 464: 465: 466: 467: 468: 469: 470: 471: 472: 473: 474:

</bind> <bind component="marcadorOpcao" interface="attrMarcadorTop" role="set"> <bindParam name="valueSet" value="300" /> </bind> </link> <link id="Selecao_Num6" xconnector="connectors#onSelection1SetNStartNStopNAbortN"> <bind component="video1" role="onSelection"> <bindParam name="keyCode" value="6" /> </bind> <bind component="nodeSettings" interface="attrOpcao" role="set"> <bindParam name="valueSet" value="6" /> </bind> <bind component="marcadorOpcao" interface="attrMarcadorTop" role="set"> <bindParam name="valueSet" value="350" /> </bind> </link> <!-- ncoras de OK --> <link id="Selecao_OK1" xconnector="connectors#onCondSelectStopNDelay"> <bind component="video1" role="onSelection"> <bindParam name="keyCode" value="VK_ENTER" /> </bind> <bind component="nodeSettings" interface="attrOpcao" role="attTest"> <bindParam name="valueTest" value="1" /> </bind> <bind component="marcadorOpcao" role="dstop" /> <bind component="opcao2" role="stop" /> <bind component="opcao3" role="stop" /> <bind component="opcao4" role="stop" /> <bind component="opcao5" role="stop" /> <bind component="opcao6" role="stop" /> </link> <link id="Selecao_OK2" xconnector="connectors#onCondSelectStopNDelay"> <bind component="video1" role="onSelection"> <bindParam name="keyCode" value="VK_ENTER" /> </bind> <bind component="nodeSettings" interface="attrOpcao" role="attTest"> <bindParam name="valueTest" value="2" /> </bind> <bind component="marcadorOpcao" role="dstop" /> <bind component="opcao1" role="stop" /> <bind component="opcao3" role="stop" /> <bind component="opcao4" role="stop" /> <bind component="opcao5" role="stop" /> <bind component="opcao6" role="stop" /> </link> <link id="Selecao_OK3" xconnector="connectors#onCondSelectStopNDelay"> <bind component="video1" role="onSelection"> <bindParam name="keyCode" value="VK_ENTER" /> </bind> <bind component="nodeSettings" interface="attrOpcao" role="attTest"> <bindParam name="valueTest" value="3" /> </bind> <bind component="marcadorOpcao" role="dstop" /> <bind component="opcao1" role="stop" /> <bind component="opcao2" role="stop" /> <bind component="opcao4" role="stop" /> <bind component="opcao5" role="stop" /> <bind component="opcao6" role="stop" /> </link> <link id="Selecao_OK4" xconnector="connectors#onCondSelectStopNDelay"> <bind component="video1" role="onSelection">

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

475: <bindParam name="keyCode" value="VK_ENTER" /> 476: </bind> 477: 478: <bind component="nodeSettings" interface="attrOpcao" role="attTest"> 479: <bindParam name="valueTest" value="4" /> 480: </bind> 481: 482: <bind component="marcadorOpcao" role="dstop" /> 483: <bind component="opcao1" role="stop" /> 484: <bind component="opcao2" role="stop" /> 485: <bind component="opcao3" role="stop" /> 486: <bind component="opcao5" role="stop" /> 487: <bind component="opcao6" role="stop" /> 488: </link> 489: 490: <link id="Selecao_OK5" xconnector="connectors#onCondSelectStopNDelay"> 491: <bind component="video1" role="onSelection"> 492: <bindParam name="keyCode" value="VK_ENTER" /> 493: </bind> 494: 495: <bind component="nodeSettings" interface="attrOpcao" role="attTest"> 496: <bindParam name="valueTest" value="5" /> 497: </bind> 498: 499: <bind component="marcadorOpcao" role="dstop" /> 500: <bind component="opcao1" role="stop" /> 501: <bind component="opcao2" role="stop" /> 502: <bind component="opcao3" role="stop" /> 503: <bind component="opcao4" role="stop" /> 504: <bind component="opcao6" role="stop" /> 505: </link> 506: 507: <link id="Selecao_OK6" xconnector="connectors#onCondSelectStopNDelay"> 508: <bind component="video1" role="onSelection"> 509: <bindParam name="keyCode" value="VK_ENTER" /> 510: </bind> 511: 512: <bind component="nodeSettings" interface="attrOpcao" role="attTest"> 513: <bindParam name="valueTest" value="6" /> 514: </bind> 515: 516: <bind component="marcadorOpcao" role="dstop" /> 517: <bind component="opcao1" role="stop" /> 518: <bind component="opcao2" role="stop" /> 519: <bind component="opcao3" role="stop" /> 520: <bind component="opcao4" role="stop" /> 521: <bind component="opcao5" role="stop" /> 522: </link> 523: 524: <!-- ao ocultar a seleo, oculta video1 e ativa a mdia correspondente seleo --> 525: 526: <link id="FinalSelecao" xconnector="connectors#onEnd1StartNStopN"> 527: <bind component="marcadorOpcao" role="onEnd" /> 528: 529: <bind component="video1" role="stop" /> 530: <bind component="opcao1" role="stop" /> 531: <bind component="opcao2" role="stop" /> 532: <bind component="opcao3" role="stop" /> 533: <bind component="opcao4" role="stop" /> 534: <bind component="opcao5" role="stop" /> 535: <bind component="opcao6" role="stop" /> 536: 537: <bind component="switchOpcao" role="start" /> 538: 539: </link> 540: 541: </body> 542: </ncl>

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

Esse exemplo ilustra o uso de um conector com ativao condicional: alm do evento de pressionamento de tecla, o valor do atributo opcao avaliado para decidir qual o destino do elo correspondente. Nas linhas 194 a 207, por exemplo, temos o seguinte elo:
Tabela 12: Definio de elo condicionado ao valor de um atributo.

<link id="SetaBaixo1" xconnector="connectors#onCondSelectSetNStartNStopN"> <bind component="video1" role="onSelection"> <bindParam name="keyCode" value="VK_DOWN" /> </bind> <bind component="nodeSettings" interface="attrOpcao" role="attTest"> <bindParam name="valueTest" value="1" /> </bind> <bind component="nodeSettings" interface="attrOpcao" role="set"> <bindParam name="valueSet" value="2" /> </bind> <bind component="marcadorOpcao" interface="attrMarcadorTop" role="set"> <bindParam name="valueSet" value="150" /> </bind> </link>

Quando a tecla para baixo pressionada se o valor atual de opcao for 1 muda o valor de opcao para 2, e e move o indicador de seleo para top=150

As tabelas a seguir definem os conectores onCondSelectSetNStartNStopN (Tabela 13), onBegin1SetN, onSelection1SetNStartNStopNAbortN, e onCondSelectStopNDelay.
Tabela 13: Definio do conector onCondSelectSetNStartNStopN , para fazer atribuies de valor quando uma tecla pressionada e uma condio for verdadeira.

Nome: Tipo: Condio:

onCondSelectSetNStartNStopN causal tecla <keyCode> acionada (papel onSelection) valor <valueTest> igual ao parmetro (papel attTest)

Ao:

define o valor <valueSet> aos atributos mapeados atravs do papel set; exibe as mdias identificadas pelo papel start; e pra as mdias identificadas pelo papel stop

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

Observao:

Os elos que utilizarem este conector devero identificar, como parmetro adicional do elo (linkParam), ou como parmetro do mapeamento de um n (bindParam), o cdigo virtual da tecla do controle remoto associada seleo. Por exemplo:
<linkParam name="keyCode" value="GREEN"/>

Os elos que utilizarem este conector devero identificar tambm, como parmetro adicional dos mapeamentos dos ns (bindParam), os valores dos atributos a serem testados (valueTest) e atribudos (valueSet). Por exemplo:
<bind component="nodeSettings" interface="attrOpcao" role="attTest"> <bindParam name="valueTest" value="3" /> </bind> <bind component="nodeSettings" interface="attrOpcao" role="set"> <bindParam name="valueSet" value="2" /> </bind> <bind component="marcadorOpcao" interface="attrMarcadorTop" role="set"> <bindParam name="valueSet" value="150" /> </bind>

Tabela 14: Definio do conector onBegin1SetN, para fazer atribuies de valor quando um n de mdia exibido.

Nome: Tipo: Condio: Ao: Observao:

onBegin1SetN causal incio de exibio da mdia no papel onBegin define o valor <valueSet> aos atributos mapeados atravs do papel set Os elos que utilizarem este conector devero identificar, como parmetros adicionais da ligao com o n de origem (bindParam), os valores a serem atribudos: valueSet. Por exemplo:
<bind component="nodeSettings" interface="attrOpcao" role="set"> <bindParam name="valueSet" value="1" /> </bind>

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

Tabela 15: Definio do conector onSelection1SetNStartNStopNAbortN, para fazer atribuies de valor quando uma tecla pressionada, bem como iniciar e parar a exibio de mdias.

Nome: Tipo: Condio: Ao:

onSelection1SetNStartNStopNAbortN causal tecla <keyCode> acionada (papel onSelection) define o valor <valueSet> aos atributos mapeados atravs do papel set; exibe as mdias identificadas pelo papel start; pra as mdias identificadas pelo papel stop; e aborta as mdias identificadas pelo papel abort.

Observao:

Os elos que utilizarem este conector devero identificar, como parmetro adicional do elo (linkParam), ou como parmetro do mapeamento de um n (bindParam), o cdigo virtual da tecla do controle remoto associada seleo. Por exemplo:
<linkParam name="keyCode" value="1"/>

ou
<bind component="video1" role="onSelection"> <bindParam name="keyCode" value="1" /> </bind>

Os elos que utilizarem este conector devero identificar tambm, como parmetro adicional dos mapeamentos dos ns (bindParam), os valores dos atributos a serem e atribudos (valueSet). Por exemplo:
<bind component="nodeSettings" interface="attrOpcao" role="set"> <bindParam name="valueSet" value="1" /> </bind> <bind component="marcadorOpcao" interface="attrMarcadorTop" role="set"> <bindParam name="valueSet" value="100" /> </bind>

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

Tabela 16: Definio do conector onCondSelectStopNDelay, para parar a exibio de mdias com ou sem retardo quando uma tecla pressionada e uma condio for verdadeira.

Nome: Tipo: Condio:

onCondSelectStopNDelay causal tecla <keyCode> acionada (papel onSelection) valor <valueTest> igual ao parmetro (papel attTest)

Ao:

pra as mdias identificadas pelo papel stop; e pra, aps um retardo de 0,5s, as mdias identificadas pelo papel dstop

Observao:

Os elos que utilizarem este conector devero identificar, como parmetros adicionais da ligao com o n de origem (bindParam ou linkParam), o cdigo virtual da tecla do controle remoto associada seleo e o valor a ser testado. Por exemplo:
<linkParam name="keyCode" value="VK_ENTER" /> <bindParam name="valueTest" value="3" />

Exemplo 13 Re-uso de ns Em alguns documentos hipermdia, pode ser necessrio apresentar diversas ocorrncias de um mesmo n, como por exemplo vdeos de anncio, imagens ou textos de advertncia ou uma barra de navegao com imagens e elos. Para que no seja necessrio definir repetidas vezes um mesmo n e todos os seus atributos, a NCL oferece a possibilidade de se reutilizar um n de contedo (media), de composio (context) ou de escolha (switch), atravs do atributo refer. Nesse caso, todos os atributos do n, exceto o seu id, so reutilizados na nova definio, como ilustrado a seguir para um n de mdia:
<!-- definio do vdeo original --> <media type="video" id="videoPrincipal" src="media/video_principal.mpg" descriptor="dVideo1" /> <!-- em um outro contexto, o re-uso do vdeo videoPrincipal, identificado como videoAvancado --> <media id="videoAvancado" refer="videoPrincipal">

importante observar que, para manter a consistncia com o modelo NCM, a declarao de um n e cada uma de suas ocorrncias de re-uso devem estar em contextos diferentes (Figura 20).

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

body

video1 contextoA contextoB

video2 refer=video1

video3 refer=video1

(a)

(b)

Figura 20:Re-uso de elementos de mdia (a) vlido e (b) invlido, com mais de uma referncia a um mesmo n num nico contexto.

O documento NCL deste exemplo representa um programa instrucional que pode ser utilizado em dois modos: no modo bsico, um vdeo exibido de forma intercalada com outros vdeos e textos detalhados; e no modo avanado, o mesmo vdeo exibido, mas acompanhado apenas de textos resumidos. No modo bsico, so exibidos o vdeo principal, intercalado de 3 vdeos (video_basico1.mpg, video_basico2.mpg, video_basico3.mpg) e 3 textos (basico1.html, basico2.html e basico3.html). J no modo avanado so exibidos apenas 3 textos (avancado1.html, avancado2.html e avancado3.html). A Listagem 13 apresenta o cdigo do programa. O n videoPrincipal (linha 110) reutilizado como videoBasico no contexto ctxBasico (linha 122) e como videoAvancado em ctxAvancado (linha 200).
Listagem 13: Documento NCL ilustrando re-uso num programa com dois modos de exibio bsico e avanado.
1: <?xml version="1.0" encoding="ISO-8859-1"?> 2: 3: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 4: EXEMPLO 13 5: 6: Objetivo: Reproduzir um vdeo e permitir que o usurio selecione 7: o nvel de conhecimento sobre um tpico, 8: atravs do pressionamento das teclas 9: vermelha e verde do controle remoto 10: e com feedback imediato para o usurio. 11: O vdeo "principal" ser re-usado em 2 contextos: 12: - contexto bsico, entrelaado com vdeos e texto explicativo em diversos pontos 13: - contexto avanado, somente com texto explicativo em alguns pontos (menos do que no bsico) 14: 15: Caractersticas: 16: 17: - sincronismo: simples (de incio e trmino de mdias) 18: - interao do usurio: seleo do contexto a ser exibido 19: - re-uso de ns de contedo 20: 21: Preparao: 22: 23: Para executar este exemplo, necessrio ter as seguintes mdias no subdiretrio 24: mdia a partir do caminho do arquivo NCL:

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

25: 26: 1) arquivo de vdeo chamado video1.mpg 27: 2) arquivo de vdeo chamado video_principal.mpg 28: 3) arquivos de vdeo chamados video_basico1.mpg, video_basico2.mpg, video_basico3.mpg 29: 4) arquivos de texto basico1.html, basico2.html, basico3.html 30: 5) arquivos de texto avancado1.html, avancado2.html, avancado3.html 31: 6) arquivo de imagem chamado botao_vermelho.gif, indicando a ao do boto vermelho 32: 7) arquivo de imagem chamado botao_verde.gif, indicando a ao do boto verde 33: 34: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 35: 36: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 37: ! CABEALHO NCL: 38: ! define as URIs dos esquemas da NCL 39: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 40: 41: <ncl id="exemplo13" xmlns="http://www.telemidia.puc-rio.br/specs/xml/NCL23/profiles" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.telemidia.puc-rio.br/specs/xml/NCL23/profiles/NCL23.xsd"> 42: 43: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 44: ! CABEALHO DO PROGRAMA 45: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 46: 47: <head> 48: 49: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 50: ! BASE DE REGIES: 51: ! define as regies na tela onde as mdias so apresentadas 52: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 53: 54: <regionBase> 55: <region id="rgTV" width="1920" height="1080"> 56: <region id="rgVideo1" left="448" top="156" width="1024" height="768" /> 57: <region id="rgVideo2" left="498" top="206" width="1024" height="768" /> 58: <region id="rgTexto1" left="200" top="410" width="320" height="120" /> 59: <region id="rgBotaoVermelho" left="200" top="420" width="25" height="25" /> 60: <region id="rgBotaoVerde" left="200" top="470" width="25" height="25" /> 61: </region> 62: </regionBase> 63: 64: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 65: ! BASE DE DESCRITORES: 66: ! define como as mdias so apresentadas 67: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 68: 69: <descriptorBase> 70: <descriptor id="dVideo1" region="rgVideo1" /> 71: <descriptor id="dVideo2" region="rgVideo2" /> 72: 73: <descriptor id="dTexto1" region="rgTexto1" /> 74: 75: <descriptor id="dBotaoVermelho" region="rgBotaoVermelho" /> 76: <descriptor id="dBotaoVerde" region="rgBotaoVerde" /> 77: </descriptorBase> 78: 79: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 80: ! BASE DE CONECTORES: 81: ! definem o comportamento dos elos 82: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 83: 84: <connectorBase> 85: <importBase alias="connectors" baseURI="connectorBase.ncl"/> 86: </connectorBase> 87: 88: </head> 89: 90: <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 91: ! CORPO DO PROGRAMA: 92: ! define as mdias e estrutura do programa 93: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 94: 95: <body>

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

96: 97: 98: 99: 100: 101: 102: 103: 104: 105: 106: 107: 108: 109: 110: 111: 112: 113: 114: 115: 116: 117: 118: 119: 120: 121: 122: 123: 124: 125: 126: 127: 128: 129: 130: 131: 132: 133: 134: 135: 136: 137: 138: 139: 140: 141: 142: 143: 144: 145: 146: 147: 148: 149: 150: 151: 152: 153: 154: 155: 156: 157: 158: 159: 160: 161: 162: 163: 164: 165: 166: 167: 168:

<!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! PONTO DE ENTRADA: ! indica o componente onde o programa inicia !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <port id="pInicio" component="video1" /> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! MDIAS: ! define o local dos arquivos de mdia e as associa com seus descritores !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <media type="video" id="video1" src="media/video1.mpg" descriptor="dVideo1" /> <media type="video" id="videoPrincipal" src="media/video_principal.mpg" descriptor="dVideo1" /> <media type="image" id="botaoVermelho" src="media/botao_vermelho.gif" descriptor="dBotaoVermelho" /> <media type="image" id="botaoVerde" src="media/botao_verde.gif" descriptor="dBotaoVerde" /> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! CONTEXTOS: ! os documentos bsico e avanado !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> <context id="ctxBasico"> <port id="pBasico" component="videoBasico" /> <media id="videoBasico" refer="videoPrincipal"> <!-- ncoras no vdeo que devem ser sincronizadas com a legenda --> <area id="aVideoBasicoTexto1" begin="1s" end="3s" /> <area id="aVideoBasicoTexto2" begin="5s" end="15s" /> <area id="aVideoBasicoTexto3" begin="16s" end="21s" /> <area id="aVideoBasicoVideo1" begin="2s" end="4s" /> <area id="aVideoBasicoVideo2" begin="8s" end="10s" /> <area id="aVideoBasicoVideo3" begin="13s" end="16s" /> </media> <media id="textoBasico1" type="text" src="media/basico1.html" descriptor="dTexto1" /> <media id="textoBasico2" type="text" src="media/basico2.html" descriptor="dTexto1" /> <media id="textoBasico3" type="text" src="media/basico3.html" descriptor="dTexto1" /> <media id="videoBasico1" type="video" src="media/video_basico1.mpg" descriptor="dVideo2" /> <media id="videoBasico2" type="video" src="media/video_basico2.mpg" descriptor="dVideo2" /> <media id="videoBasico3" type="video" src="media/video_basico3.mpg" descriptor="dVideo2" /> <!-- links para sincronizar os textos com o vdeo --> <link id="lBasicoTexto1Start" xconnector="connectors#onBegin1StartN"> <bind component="videoBasico" interface="aVideoBasicoTexto1" role="onBegin" /> <bind component="textoBasico1" role="start" /> </link> <link id="lBasicoTexto2Start" xconnector="connectors#onBegin1StartN"> <bind component="videoBasico" interface="aVideoBasicoTexto2" role="onBegin" /> <bind component="textoBasico2" role="start" /> </link> <link id="lBasicoTexto3Start" xconnector="connectors#onBegin1StartN"> <bind component="videoBasico" interface="aVideoBasicoTexto3" role="onBegin" /> <bind component="textoBasico3" role="start" /> </link> <link id="lBasicoTexto1End" xconnector="connectors#onEnd1StopN"> <bind component="videoBasico" interface="aVideoBasicoTexto1" role="onEnd" /> <bind component="textoBasico1" role="stop" /> </link> <link id="lBasicoTexto2End" xconnector="connectors#onEnd1StopN"> <bind component="videoBasico" interface="aVideoBasicoTexto2" role="onEnd" /> <bind component="textoBasico2" role="stop" /> </link> <link id="lBasicoTexto3End" xconnector="connectors#onEnd1StopN"> <bind component="videoBasico" interface="aVideoBasicoTexto3" role="onEnd" /> <bind component="textoBasico3" role="stop" /> </link> <!-- links para sincronizar os vdeos auxiliares com o vdeo principal --> <link id="lBasicoVideo1Start" xconnector="connectors#onBegin1PauseNStartN"> <bind component="videoBasico" interface="aVideoBasicoVideo1" role="onBegin" />

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

169: 170: 171: 172: 173: 174: 175: 176: 177: 178: 179: 180: 181: 182: 183: 184: 185: 186: 187: 188: 189: 190: 191: 192: 193: 194: 195: 196: 197: 198: 199: 200: 201: 202: 203: 204: 205: 206: 207: 208: 209: 210: 211: 212: 213: 214: 215: 216: 217: 218: 219: 220: 221: 222: 223: 224: 225: 226: 227: 228: 229: 230: 231: 232: 233: 234: 235: 236: 237: 238: 239: 240: 241:

<bind component="videoBasico" role="pause" /> <bind component="videoBasico1" role="start" /> </link> <link id="lBasicoVideo2Start" xconnector="connectors#onBegin1PauseNStartN"> <bind component="videoBasico" interface="aVideoBasicoVideo2" role="onBegin" /> <bind component="videoBasico" role="pause" /> <bind component="videoBasico2" role="start" /> </link> <link id="lBasicoVideo3Start" xconnector="connectors#onBegin1PauseNStartN"> <bind component="videoBasico" interface="aVideoBasicoVideo3" role="onBegin" /> <bind component="videoBasico" role="pause" /> <bind component="videoBasico3" role="start" /> </link> <link id="lBasicoVideo1End" xconnector="connectors#onEnd1ResumeN"> <bind component="videoBasico1" role="onEnd" /> <bind component="videoBasico" role="resume" /> </link> <link id="lBasicoVideo2End" xconnector="connectors#onEnd1ResumeN"> <bind component="videoBasico2" role="onEnd" /> <bind component="videoBasico" role="resume" /> </link> <link id="lBasicoVideo3End" xconnector="connectors#onEnd1ResumeN"> <bind component="videoBasico3" role="onEnd" /> <bind component="videoBasico" role="resume" /> </link> </context> <context id="ctxAvancado"> <port id="pAvancado" component="videoAvancado" /> <media id="videoAvancado" refer="videoPrincipal"> <!-- ncoras no vdeo que devem ser sincronizadas com a legenda --> <area id="aVideoAvancadoTexto1" begin="5s" end="9s"/> <area id="aVideoAvancadoTexto2" begin="10s" end="14s"/> <area id="aVideoAvancadoTexto3" begin="15s" end="19s"/> </media> <media id="textoAvancado1" type="text" src="media/avancado1.html" descriptor="dTexto1" /> <media id="textoAvancado2" type="text" src="media/avancado2.html" descriptor="dTexto1" /> <media id="textoAvancado3" type="text" src="media/avancado3.html" descriptor="dTexto1" /> <!-- links para sincronizar os textos com o vdeo --> <link id="lAvancadoTexto1Start" xconnector="connectors#onBegin1StartN"> <bind component="videoAvancado" interface="aVideoAvancadoTexto1" role="onBegin" /> <bind component="textoAvancado1" role="start" /> </link> <link id="lAvancadoTexto2Start" xconnector="connectors#onBegin1StartN"> <bind component="videoAvancado" interface="aVideoAvancadoTexto2" role="onBegin" /> <bind component="textoAvancado2" role="start" /> </link> <link id="lAvancadoTexto3Start" xconnector="connectors#onBegin1StartN"> <bind component="videoAvancado" interface="aVideoAvancadoTexto3" role="onBegin" /> <bind component="textoAvancado3" role="start" /> </link> <link id="lAvancadoTexto1End" xconnector="connectors#onEnd1StopN"> <bind component="videoAvancado" interface="aVideoAvancadoTexto1" role="onEnd" /> <bind component="textoAvancado1" role="stop" /> </link> <link id="lAvancadoTexto2End" xconnector="connectors#onEnd1StopN"> <bind component="videoAvancado" interface="aVideoAvancadoTexto2" role="onEnd" /> <bind component="textoAvancado2" role="stop" /> </link> <link id="lAvancadoTexto3End" xconnector="connectors#onEnd1StopN"> <bind component="videoAvancado" interface="aVideoAvancadoTexto3" role="onEnd" /> <bind component="textoAvancado3" role="stop" /> </link> </context> <!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ! ELOS ! define os elos que regem o sincronismo entre as mdias

Manual de Construo de Programas Audiovisuais Interativos Utilizando a NCL 2.3 Perfil Bsico 1a edio: 8/11/2006

242: !++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--> 243: 244: <!-- incio do video1 deve exibir botes --> 245: <link id="lVideo1Init" xconnector="connectors#onBegin1StartN"> 246: <bind component="video1" role="onBegin" /> 247: <bind component="botaoVermelho" role="start" /> 248: <bind component="botaoVerde" role="start" /> 249: </link> 250: 251: <!-- trmino do video1 deve dispar-lo novamente (deve tocar em loop) --> 252: <link id="lVideo1Loop" xconnector="connectors#onEnd1StartN"> 253: <bind component="video1" role="onEnd" /> 254: <bind component="video1" role="start" /> 255: </link> 256: 257: <!-- define nvel bsico quando a tecla vermelha pressionada --> 258: <link id="lSelectBotaoVermelho" xconnector="connectors#onSelection1SetStartStopDelay"> 259: <bind component="botaoVermelho" role="onSelection"> 260: <bindParam name="keyCode" value="RED" /> 261: </bind> 262: <bind component="botaoVerde" role="stop" /> 263: <bind component="botaoVermelho" role="dstop" /> 264: <bind component="video1" role="dabort" /> 265: <bind component="ctxBasico" interface="pBasico" role="dstart" /> 266: </link> 267: 268: <!-- define nvel avanado quando a tecla verde pressionada --> 269: <link id="lSelectBotaoVerde" xconnector="connectors#onSelection1SetStartStopDelay"> 270: <bind component="botaoVerde" role="onSelection"> 271: <bindParam name="keyCode" value="GREEN" /> 272: </bind> 273: <bind component="botaoVerde" role="dstop" /> 274: <bind component="botaoVermelho" role="stop" /> 275: <bind component="video1" role="dabort" /> 276: <bind component="ctxAvancado" interface="pAvancado" role="dstart" /> 277: </link> 278: 279: </body> 280: </ncl>