062 manualNCL2 3

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
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
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
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
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.
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.
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:  7: </regionBase> 8: <descriptorBase> 9:  10: </descriptorBase> 11: <connectorBase> 12:  13: </connectorBase> 14: </head> 15: <body> 16: 17: <port id="pInicio" component="ncPrincipal" interface="iInicio"/> 
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).
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: 
21: 22:  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:  32: 33: <head> 34: 35:  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:  50: 51: <descriptorBase> 52: <descriptor id="dVideo1" region="rgVideo1" /> 53: </descriptorBase> 54: 55: </head> 56: 57:  61: 62: <body> 63: 64:  68: 69: <port id="pInicio" component="video1"/> 70: 71:  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.
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:
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.
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.
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).
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:
<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)
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.
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"?>   <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:  33: 34: <head> 35: 36:  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:  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:  66: 67: <connectorBase> 68: <importBase alias="connectors" baseURI="connectorBase.ncl" />
69: </connectorBase> 70: 71: </head> 72: 73:  77: 78: <body> 79: 80:  84: 85: <port id="pInicio" component="video1" /> 86: 87:  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:  99: 100:  101: 102: <link id="lVideo1Titulo1Start" xconnector="connectors#onBegin1StartN"> 103: <bind component="video1" role="onBegin" /> 104: <bind component="titulo1" role="start" /> 105: </link> 106: 107:  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:
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:
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
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.
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.
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"?>   <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:  32: 33: <head> 34: 35:  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:  50: 51: <descriptorBase>
52: <descriptor id="dVideo1" region="rgVideo1" /> 53: </descriptorBase> 54: 55:  59: 60: <connectorBase> 61: <importBase alias="connectors" baseURI="connectorBase.ncl"/> 62: </connectorBase> 63: 64: </head> 65: 66:  70: 71: <body> 72: 73:  77: 78: <port id="pInicio" component="video1" /> 79: 80:  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:  92: 93:  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:
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.
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
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">  <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)
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">  <attribute id="top" name="top"/> <attribute id="left" name="left"/> <attribute id="width" name="width"/> <attribute id="height" name="height"/>  <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.
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"?>   <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:  34: 35: <head> 36: 37:  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:  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:  65: 66: <connectorBase> 67: <importBase alias="connectors" baseURI="connectorBase.ncl"/> 68: </connectorBase>
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>  <body>  <port id="pInicio" component="video1" />  <media type="video" id="video1" src="media/video1.mpg" descriptor="dVideo1">  <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" />   <link id="lLegenda01_start" xconnector="connectors#onBegin1StartN"> <bind component="video1" interface="aVideoLegenda01" role="onBegin" /> <bind component="legenda01" role="start" /> </link>  <link id="lLegenda01_stop" xconnector="connectors#onEnd1StopN"> <bind component="video1" interface="aVideoLegenda01" role="onEnd" /> <bind component="legenda01" role="stop" /> </link>  <link id="lLegenda02_start" xconnector="connectors#onBegin1StartN"> <bind component="video1" interface="aVideoLegenda02" role="onBegin" /> <bind component="legenda02" role="start" /> </link>  <link id="lLegenda02_stop" xconnector="connectors#onEnd1StopN"> <bind component="video1" interface="aVideoLegenda02" role="onEnd" /> <bind component="legenda02" role="stop" /> </link>  <link id="lLegenda03_start" xconnector="connectors#onBegin1StartN"> <bind component="video1" interface="aVideoLegenda03" role="onBegin" /> <bind component="legenda03" role="start" /> </link>
142:  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
video1 @ rgVideo1
video1 @ rgVideo1
video1 @ rgVideo1
Figura 11: Vises estrutural, temporal e espacial do exemplo 04, que reproduz um vdeo sincronizando uma legenda.
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:  24: 25:  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:  35: 36: <head> 37: 38:  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:  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:  66: 67: <connectorBase> 68: <importBase alias="connectors" baseURI="connectorBase.ncl"/> 69: </connectorBase> 70: 71: </head> 72: 73:  77: 78: <body> 79: 80:  84: 85: <port id="pInicio" component="video1" /> 86: 87:  91: 92: <media type="video" id="video1" src="media/video1.mpg" descriptor="dVideo1"> 93:  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>
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:  107: 108:  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:  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:  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:  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:  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:  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.
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:  25: 26:  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:  36: 37: <head> 38: 39:  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:  55: 56: <descriptorBase> 57: <descriptor id="dVideo1" region="rgVideo1" /> 58: <descriptor id="dBotaoVerde" region="rgBotaoVerde" /> 59: </descriptorBase> 60: 61:  65: 66: <connectorBase> 67: <importBase alias="connectors" baseURI="connectorBase.ncl"/> 68: </connectorBase> 69: 70: </head> 71: 72:  76: 77: <body> 78: 79:  83: 84: <port id="pInicio" component="video1" /> 85: 86:  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" />
95: 96:  100: 101:  102: <link id="lVideo1Init" xconnector="connectors#onBegin1StartN"> 103: <bind component="video1" role="onBegin" /> 104: <bind component="botaoVerde" role="start" /> 105: </link> 106: 107:  108: <link id="lVideo1Loop" xconnector="connectors#onEnd1StartN"> 109: <bind component="video1" role="onEnd" /> 110: <bind component="video1" role="start" /> 111: </link> 112: 113:  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>
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)
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
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"?>   <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:  34: 35: <head> 36: 37:  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:  51: 52: <descriptorBase> 53: <descriptor id="dVideo1" region="rgVideo1" /> 54: <descriptor id="dImagem1" region="rgImagem1" /> 55: </descriptorBase> 56: 57:  61: 62: <connectorBase>
63: <importBase alias="connectors" baseURI="connectorBase.ncl"/> 64: </connectorBase> 65: 66: </head> 67: 68:  72: 73: <body> 74: 75:  79: 80: <port id="pInicio" component="video1" /> 81: 82:  86: 87: <media type="video" id="video1" src="media/video1.mpg" descriptor="dVideo1"> 88: 89:  90: <area id="aVideo1Imagem1" begin="3s" end="8s"/> 91: 92:  93: <attribute id="attrVideo1Bounds" name="bounds" /> 94: 95: </media> 96: 97: <media type="image" id="imagem1" src="media/imagem1.gif" descriptor="dImagem1" /> 98: 99:  103: 104:  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:  113: </bind> 114: 115: <bind component="imagem1" role="start" /> 116: </link> 117: 118: 119:  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>
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.
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.
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" />  </bind>
A tabela a seguir descreve o conector onEnd1SetNStartNStopN.

Tabela 8: Conector onEnd1SetNStartNStopN.
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.
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:   <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:  37: 38: <head> 39: 40:  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:  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:  75: 76: <connectorBase> 77: <importBase alias="connectors" baseURI="connectorBase.ncl" />
78: </connectorBase> 79: 80: </head> 81: 82:  86: 87: <body> 88: 89:  93: 94: <port id="pInicio" component="video1" /> 95: 96:  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:  118: 119: 120:  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:  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: 
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:  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.
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)
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.
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"?>   <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:  38: 39: <head> 40: 41:  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:  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" />
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>  <connectorBase> <importBase alias="connectors" baseURI="connectorBase.ncl"/> </connectorBase> </head>  <body>  <port id="pInicio" component="video1" />  <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" />   <link id="lVideo_Botoes_start" xconnector="connectors#onBegin1StartN"> <bind component="video1" role="onBegin" /> <bind component="video2" role="start" /> <bind component="botaoVermelho" role="start" /> </link>  <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>  <link id="lSelecionaVideo2" xconnector="connectors#onSelection1SetN"> <linkParam name="keyCode" value="RED" /> <bind component="botaoVermelho" role="onSelection" />
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:  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:  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:  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>
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.
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" />
<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" />  </context> <context id="ctxAvancado"> <port id="pAvancado" component="videoAvancado" />  </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).
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"?>   <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:  40: 41: <head> 42: 43:  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:  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: 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>  <ruleBase> <rule id="rEn" var="idioma" op="eq" value="en" /> <rule id="rPt" var="idioma" op="eq" value="pt" /> </ruleBase>  <connectorBase> <importBase alias="connectors" baseURI="connectorBase.ncl"/> </connectorBase> </head>  <body>  <port id="pInicio" component="video1" /> <media type="settings" id="nodeSettings"> <attribute id="attrIdioma" name="idioma" /> </media>  <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" />  <context id="contextoFilme"> <port id="pVideo3" component="video3" /> <media type="video" id="video3" src="media/video3.mpg" descriptor="dVideo3" />  <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>  <link id="lVideo3AudioStart" xconnector="connectors#onBegin1StartN"> <bind component="video3" role="onBegin" /> <bind component="switchAudioIdioma" role="start" /> </link>  <link id="lVideo3AudioStop" xconnector="connectors#onEnd1StopN"> <bind component="video3" role="onEnd" /> <bind component="switchAudioIdioma" role="stop" /> </link> </context>   <link id="lVideo1Init" xconnector="connectors#onBegin1StartN"> <bind component="video1" role="onBegin" /> <bind component="botaoVermelho" role="start" /> <bind component="botaoVerde" role="start" /> </link>  <link id="lVideo1Loop" xconnector="connectors#onEnd1Start1"> <bind component="video1" role="onEnd" /> <bind component="video1" role="start" /> </link>  <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>  <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" />
206: <bind component="video2" role="start" /> 207: </link> 208: 209:  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>
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)
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:
Tabela 10: Definio do conector onSelection1SetNStartNStopNAbortN.
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
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:  <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>  <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>
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)
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
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.
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"?>   <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:  36:
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>  <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>  <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>  <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>  <connectorBase> <importBase alias="connectors" baseURI="connectorBase.ncl"/> </connectorBase> </head>  <body>
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:
 <port id="pInicio" component="video1" /> <media type="settings" id="nodeSettings"> <attribute id="attrOpcao" name="opcao" /> </media>  <media type="video" id="video1" src="media/video1.mpg" descriptor="dVideo1"> </media> <media type="image" id="marcadorOpcao" src="media/marca_opcao.gif" descriptor="dMarcadorOpcao">  <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 id="switchOpcao">  <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>   <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>
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:
 <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>  <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">
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>  <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>
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>  <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" />
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>  <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">
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:  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>
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
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>
Tabela 15: Definio do conector onSelection1SetNStartNStopNAbortN, para fazer atribuies de valor quando uma tecla pressionada, bem como iniciar e parar a exibio de mdias.
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>
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:
 <media type="video" id="videoPrincipal" src="media/video_principal.mpg" descriptor="dVideo1" />  <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).
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:  35: 36:  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:  46: 47: <head> 48: 49:  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:  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:  83: 84: <connectorBase> 85: <importBase alias="connectors" baseURI="connectorBase.ncl"/> 86: </connectorBase> 87: 88: </head> 89: 90:  94: 95: <body>
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:
 <port id="pInicio" component="video1" />  <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" />  <context id="ctxBasico"> <port id="pBasico" component="videoBasico" /> <media id="videoBasico" refer="videoPrincipal">  <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" />  <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>  <link id="lBasicoVideo1Start" xconnector="connectors#onBegin1PauseNStartN"> <bind component="videoBasico" interface="aVideoBasicoVideo1" role="onBegin" />
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">  <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" />  <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>  243: 244:  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:  252: <link id="lVideo1Loop" xconnector="connectors#onEnd1StartN"> 253: <bind component="video1" role="onEnd" /> 254: <bind component="video1" role="start" /> 255: </link> 256: 257:  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:  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>

062 manualNCL2 3

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

062 manualNCL2 3

Uploaded by

Copyright:

Available Formats

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

O que so NCM e NCL?

Figura 1: Ns e elos num hipertexto comum.

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

Estrutura de um documento NCL

Tabela 1: Estrutura bsica de um documento NCL.

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

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

A Figura 4 ilustra a regio definida no exemplo:

a rgTV, considerando a tela de HDTV

Figura 4: Regio da tela definida no exemplo 01.

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

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

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

texto vdeo e udio

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

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

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

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

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

Os atributos de um contexto so:

Um n de mdia possui os seguintes atributos:

identificador do descritor que controla a apresentao do objeto de

Sincronizando ns de mdia atravs de elos e conectores

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

onEnd1Stop N pInicio rgVideo1 video1

elos de sincronismo: conectores onBegin1StartN e onEnd1StopN

identificador do conector associado ao elo

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

Figura 8: Ilustrao de um conector ligando trs ns.

Figura 9. Mquina de estados de eventos.

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

Nome: Tipo: Condio: Ao:

Aes de atribuio sero vistas no exemplo 7.

Tabela 4: Conector onEnd1StopN.

Nome: Tipo: Condio: Ao: Ilustrao:

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

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

Nome: Tipo: Condio: Ao:

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

A NCL define os seguintes atributos de ncora de contedo:

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

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

onBegin1StartN onEnd1StopN onBegin1StartN

onBegin1StartN onEnd1StopN legenda 03

rgVideo1 video1 aVideoLe genda01 aVideoLe genda02 aVideoLe genda03

onBegin1StartN onBegin1StartN onEnd1StopN onEnd1StopN onEnd1StopN

Interao com o Usurio

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

Nome: Tipo: Condio:

onSelection1StartNStopNAbortN causal tecla <keyCode> acionada (papel onSelection)

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

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

rgVideo1 video1 set aVideo1I magem1 set onEnd1 SetNStartNStopN stop

onBegin1 SetNStartNStopN start

elos de sincronismo: conectores onBegin1SetNStartNStopN e onEnd1SetNStartNStopN

A tabela a seguir descreve o conector onBegin1SetNStartNStopN.

Nome: Tipo: Condio: Ao:

A tabela a seguir descreve o conector onEnd1SetNStartNStopN.

Nome: Tipo: Condio: Ao:

Nome: Tipo: Condio:

onSelection1SetN causal tecla <keyCode> acionada (papel onSelection)

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