Tutorial NCL

Ferramentas Necessárias

Windows:
1) VMWare Player(http://www.vmware.com/products/player/)
2) GINGA-NCL VIRTUAL STB Máquina virtual Linux para VMWare, contendo Ginga-NCL C++ v. 0.11.2 rev.23 (342 MB)
http://www.ncl.org.br/ferramentas/fedora-fc7-ginga-i386.zip
3) WinSCP(http://winscp.net/eng/download.php)
4) Putty(http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html)
5) Notepad++(http://notepad-plus.sourceforge.net/br/site.htm)

Linux:
1) VMWare Player(http://www.vmware.com/products/player/)
2) GINGA-NCL VIRTUAL STB Máquina virtual Linux para VMWare, contendo Ginga-NCL C++ v. 0.11.2 rev.23 (342 MB)
http://www.ncl.org.br/ferramentas/fedora-fc7-ginga-i386.zip
3) Filezilla (http://filezilla-project.org/)
4) Putty(http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html)

NCL

Tutorial sobre a linguagem NCL( Nested Context Language).
Baseado no NCM ( NCL Contex Model).

Estrutura básica de uma arquivo ncl

A exemplo da linguagem html, a linguagem ncl caracteriza-se por ser uma linguagem de marcação, possuindo elementos (tags) padrões assim como o html. A seguir, vamos demonstrar a estrutura básica existente em um código de arquivo ncl:

Cabeçalho do arquivo ncl

O cabeçalho de um arquivo ncl possui dois elementos básicos:

1) <?xml version="1.0" encoding="ISO-8859-1"> - Essa é normalmente é a primeira linha de um código ncl, onde são definidas a versão do xml bem como a codificação usada (vide http://pt.wikipedia.org/wiki/ISO_8859-1). Isto é, define o tipo de caracteres que serão exibidos na tela. No nosso caso, obviamente, devemos usar a codificação "ISO-8859-1", que corresponde aos caracteres ocidentais.

2) <ncl id="exemplo01"> - Essa tag, a exemplo da tag <html>, define o início do programa ncl propriamente dito. A tag <ncl> possui diversos atributos como os usados no exemplo acima: id="exemplo01", que define um identificador uno que posteriormente poderá ser usado como referência por outros elementos ncl. Na tag <ncl>, também são definidos diversos outros atributos. Entretanto, para desenvolver aplicações simples como as previstas nesse tutorial, não é necessária a definição de outro atributos.

Cabeçalho do programa

Abaixo do cabeçalho do arquivo ncl, encontra-se o cabeçalho do programa. Assim como no html, esse cabeçalho é delimitado pelas tags <head></head>. Dentro do cabeçalho do programa (entre as tags <head></head>), encontram-se três elementos básicos de um programa ncl. São os seguintes elementos:

1) Base de regiões: Aqui são delimitadas as regiões da sua apresentação na tela. Nessas regiões são apresentadas as mídias.

A base de regiões inicia-se com a tag <regionBase> e finaliza com a tag </regionBase>. Entre essas duas tags devem ser declaradas todas as regiões.

Exemplo de definição das áreas:

<regionBase>
    <region width="1080" height="1920" id="rgTV">
        <region left="448" top="156" width="1024" height="300" id="rgVideo"/>
    </region>
</regionBase>

Neste exemplo acima são definidas duas regiões: "rgTV", com três atributos: width, height e id; que definem a largura da região em pixels, a altura da região em pixels e o identificador da região, respectivamente; e "rgVideo" que, além dos atributos já mencionados, possui outros dois: left e top, que definem a posição da região na tela, em relação a esquerda e ao topo, respectivamente.

Observe também que as tags encontram-se indentadas. A indentação é muito importante em qualquer linguagem, visto que facilita a compreensão do código por programadores que posteriormente possam manipular o código. A indentação também facilita a percepção de regiões que estão inseridas dentro de outras regiões, como é o caso da região "rgVideo", que encontra-se inserida na região "rgTV".

2) Base de descritores: Aqui são criados os descritores. Os descritores definem como e onde as mídias serão apresentadas. A base de descritores inicia e termina com as tags <descriptorBase></descriptorBase>, respectivamente.

Exemplo de criação de descritores:

<descriptorBase>
    <descriptor region="rgVideo" id="dVideo"/>
</descriptorBase>

No exemplo acima é criado um descritor com o atributo id igual a "dVideo". Também é definido o atributo "region" que faz referência à uma região previamente criada, chamada de rgVideo. Os descritores regem o comportamento de um "nó de mídia", definindo por exemplo a região onde a mídia será exibida. Neste exemplo a mídia seria exibida na região rgVideo.

3) Base de conectores: No cabeçalho do programa, a exemplo da Base de Regiões e da Base de Descritores, também é definida a Base de conectores. Seguindo a mesma lógica das bases anteriores, a base de conectores começa com a tag<connectorBase> e termina com a tag </connectorBase>.

Os conectores definem como os elos são ativados e o que eles disparam. Por exemplo: Através de conectores, é possível fazer com que a exibição de uma mídia comece simultamente a outra, bem como termine simultaneamente a outra e diversas outras ações.

Normalmente os conectores estão definidos em um arquivo exterior ao código, semelhante a um arquivo .css. Se preferir, você também pode criar os seus próprios conectores na base de conectores, entretanto é recomendado o uso do arquivo externo já que ele contém dezenas de conectores prontos para o uso diminuindo-se, assim, o trabalho.

Exemplo de carregamento de uma base de conectores externa:

<connectorBase>
         <importBase alias="connectors" documentURI="connectorBase.ncl"/>
</connectorBase>

No exemplo acima, através do atributo "documentURI", o arquivo "connectorBase.ncl", que está no mesmo diretório do programa ncl e contém dezenas de conectores prontos, é carregado no programa. O atributo "alias" funciona como uma espécie de identificador para a base carregada. Essa "identificação" será utilizada pelos elos para fazer referência a base carregada.

Corpo do programa

No corpo do programa são inseridos os nós (mídias), portas, elos, âncoras etc.

NÓS

Os nós são referências para as mídias. O nó funciona semelhante à tag <a> do html. Sendo assim, os nós funcionam como links que, quando ativados, disparam a exibição de uma determinada mídia.

Os nós podem ser de dois tipos: Nó de conteúdo (ou de mídia) e nó de composição (ou contexto).

1) Nó de conteúdo: Como já foi dito, esse tipo de nó é associado a um tipo de mídia (txt, html, jpeg, mpeg etc). Um nó de conteúdo é iniciado através da tag <media>.

Exemplo de utilização de um nó de conteúdo:

<media type="video/mpeg" id="video1" src="video1.mpg" descriptor="dVideo1">

Neste exemplo, é criado um nó de conteúdo fazendo referência, através do atributo "src", a um arquivo chamado video1.mpg que encontra-se no mesmo diretório do programa ncl.

Na criação de um nó também deve ser determinado que descritor regerá o seu funcionamento (onde e como será exibido). O descritor poderá, por exemplo, determinar a região da tela na qual a mídia será exibida.

Também é definido a atributo "type", que deve receber o tipo da mídia que será executada.

Os tipos mais comuns são:

image/gif
image/jpeg
image/bmp
video/mpeg
text/plain
text/html
audio/mp3

2) Nó de contexto:

PORTAS

A porta, representada pela tag <port>, é um ponto de interface de um contexto. Através dela podemos ter acesso ao conteúdo de um contexto. Sendo assim, para um elo apontar para um nó interno ao contexto, este contexto deve possuir uma porta que leve ao nó interno.

Exemplo do uso de uma porta:

<port id="pInicio" component="suporte" />

No exemplo acima, o atributo "id" define o nome da porta e o atributo "component" define que nó será acessado em um determinado contexto. Nesse caso seria ativado um nó com id igual a suporte.

ELOS

Como já falamos, os elos funcionam semelhates a um link em um arquivo html. Através do elo podemos sincronizar os possíveis eventos em um programa ncl. Por exemplo: iniciar a execução de uma mídia simultaneamente a outra, finalizar uma mídia imediatamente após o término de outra etc.

Tal sincronia se torna possível através dos conectores que podem ser criados dentro do arquivo ncl ou, como já vimos, importados de um arquivo externo.

Um elo inicia com a tag <link> e termina com a tag </link>.

Exemplo do uso de elo:

<link xconnector="connectors#onBegin1StartN" id="Titulo1Inicia">
     <bind role="onBegin" component="suporte"/>
     <bind role="start" component="titulo"/>
</link>

No exemplo acima, o atributo "xconnector" faz referência à base de conectores que será utilizada. Observe que o atributo "xconnecotr" recebe dois valores separados pelo caracter "#". O primeira valor "connectors" faz referência a base de connectores onde está o connector que será utilizado (vide atributo "alias" na base de conectores). A segunda parte (onBegin1StartN) indica que conector contido no arquivo importado será usado.

A tag <bind>, determina os papéis de cada nó nesse elo. No primeiro bind é determinado de que forma e qual nó ativará o elo. Nesse bind, o nó "suporte", quando executado (onBegin), fará com que, no segundo bind, o nó de mídia "titulo" também seja iniciado (start). Dessa forma, as duas midias seriam exibidas simultaneamente.

NOTA: Experimente abrir o arquivo "connectorBase.ncl" com um editor de texto e procurar pelo conector usado para ver como ele funciona.

ÂNCORAS

As âncoras são pontos de entrada para os nós de mídia ou contextos. O objetivo de se utilizar âncoras é utilizar segmentos de um nó de mídia ou contexto, seja como origem ou destino de elos.

Existem dois tipos de âncoras: âncora de conteúdo (content anchor) e âncora de atributo
(attribute anchor).

1) Âncora de conteúdo define um segmento da mídia (intervalo de tempo e/ou região no espaço) que poderá ser utilizado como ponto de ativação de elos. Cada
nó de mídia é composto de unidades de informação (information units). A definição dessas unidades de informação depende do tipo de mídia representado pelo nó. As unidades de informação de um vídeo, por exemplo, podem ser os frames do vídeo. Uma âncora consiste numa seleção contígua de unidades de informação de um nó.

Uma âncora de conteúdo é definida como uma tag <area> dentro da tag <media>.

Exemplo de utilização de âncora de conteúdo:

<media type="vídeo/mpeg" id="video1" src="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>

No exemplo acima são definidas três âncoras de conteúdo para um nó de vídeo. Nesse exemplo, as âncoras são utilizadas para sincronizar legendas com o vídeo. O atributo “begin” define o tempo transcorrido na execução do vídeo (Xs) no qual a âncora será ativada. O atributo “end” funciona semelhante ao begin, determinando o tempo em que a âncora será encerrada.

2) Uma âncora de propriedade se refere a propriedades de um nó de origem ou de destino, que podem ser manipulados pelos elos. Exemplos de propriedades são: volume de áudio de um nó de áudio ou vídeo, coordenadas e dimensões de exibição de um nó de mídia visual, entre outros.

Uma âncora de propriedade é definida através da tag <property> dentro da tag <media> ou <context>. No exemplo a seguir são definidas quatro âncoras de propriedade para um nó de
vídeo, além de uma âncora de conteúdo.

<media type="video" id="video1" src="media/video1.mpg" descriptor="dVideo1">
 
<!-- âncoras de propriedades que serão manipulados pelos elos -->
 
<property id="top" name="top"/>
<property id="left" name="left"/>
<property id="width" name="width"/>
<property id="height" name="height"/>
 
<!-- âncora de conteúdo no vídeo que deve sincronizar a imagem -->
 
<area id="aVideo1Imagem1" begin="3s" end="8s"/>
</media>

Exemplo de estrutura básica de um arquivo NCL:

Agora que já sabemos os elementos básicos de um programa ncl, vamos ver como esses elementos se organizam. Abaixo está um exemplo de um programa ncl simples:

<?xml version="1.0" encoding="ISO-8859-1"?>
 
<ncl xsi:schemaLocation="http://www.ncl.org.br/NCL3.0/EDTVProfile http://www.ncl.org.br/NCL3.0/profiles/NCL30EDTV.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.ncl.org.br/NCL3.0/EDTVProfile" id="exemplo1">
 
    <head>
 
        <regionBase>
            <region width="1080" height="1920" id="rgTV">
                <region left="448" top="156" width="1024" height="300" id="rgVideo"/>
            </region>
        </regionBase>
 
        <descriptorBase>
            <descriptor region="rgVideo" id="dVideo"/>
        </descriptorBase>
 
    </head>
 
    <body>
        <port component="video" id="pInicio"/>
 
        <media descriptor="dVideo" src="video1.mpg" type="video/mpeg" id="video"/>
 
    </body>
</ncl>

No corpo (<body>) do exemplo acima estão inseridas um nó representado pela tag <media> e uma porta representada pela tag <port>.

Observe que no nó o atributo "descriptor" faz referência ao descritor criado no cabeçalho do programa de "id=dVideo". O descritor dVideo por sua vez indicará a região onde a mídia será exibida. Observe também que a mídia foi determinada através do atributo "src" que faz referência a um vídeo do tipo mpg, de nome video1, que encontra-se no mesmo diretório que o arquivo ncl. Veja também que o nó recebe o nome video1 através do atributo "id".

Para tornar possível a exibição do vídeo na região determinada pelo descritor, deve-se criar uma "porta". Observe, na tag <port> que o atributo "component" faz referência ao nó "video".

NOTA: é importante que todo elemento NCL (região, descritor, nó de mídia, porta etc.) possua um identificar único, representado pelo atributo id. Os demais elementos e atributos serão utilizados nas seções seguintes, que aprofundam a definição de cada elemento utilizado nos exemplos.

Exemplos de Aplicações Ginga-NCL

Aplicação construída na I Oficina sobre TV Digital do Projeto XPTA

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License