Jornal Electrónico

Relatório do Trabalho

Miguel Domingues (migATidite-minhoDOTpt)
MICEI0203/PED
1 de Julho de 2003

Dedicatória

à minha Dama

Agradecimentos

a quem bem me quer...

Índice

1. Introdução
2. O Relatório
3. O Jornal Electrónico
3.1. Arquitectura do Sistema
3.1.1. Schema (.xsd)
3.1.2. Instância (.xml)
3.1.3. Html (.html)
3.1.4. Stylesheet (.xslt)
4. Conclusão


1. Introdução

No âmbito da disciplina de Processamento Estruturado de Documentos, desenvolveu-se um trabalho baseado em tecnologia XML. Este trabalho engloba a realização de um Jornal Electrónico e de um Relatório. Para cada um criaram-se os ficheiros xsd, xml e xslt. Para além disso, também foram criados ficheiros auxiliares do tipo js e css.

2. O Relatório

A apresentação do trabalho será centralizada na execução do Jornal Electrónico, uma vez que este é o principal objectivo. No entanto, gostaria de salientar a forma como foi desenvolvido o schema do Relatório para permitir escrever o seguinte código xml:


<paragraph align="center">
   <bold>
      <italic>
         <underlined>particularidade</underlined>
      </italic>
   </bold>
</paragraph>

... que permite aninhar o texto com elementos do tipo italic, bold, underlined e paragraph para obter o seguinte resultado:

particularidade

Eis o Schema que lhe dá origem, mais particularmente o elemento body:



Fig 1. Elemento body (report.xsd)

Em relação ao Jornal Electrónico, a única mais-valia do Relatório é a estrutura do Schema. A linguagem de formatação gráfica é muito mais rica e elaborada, pelo que vale a pena ver em detalhe todo o elemento body que não foi possível mostrar aqui.

ver ficheiros: report.xsd


3. O Jornal Electrónico

Um jornal electrónico é um documento que normalmente é distribuído por email a uma lista de subscritores. Um documento deste género deve ter um editorial com a informação técnica de produção e um conjunto de secções com vários artigos. Cada artigo tem um título, um lead, um corpo com a notícia, uma imagem, uma referência para os autores e uma lista de links com informação complementar ou relacionada. Para completar, cada artigo deve também ter um conjunto de keywords associadas para que os mecanismos de pesquisa automática que venham a ser criados possam obter melhores resultados. Esta é uma breve descrição da estrutura pretendida na realização deste trabalho.

ver ficheiros: ejournal.html


3.1. Arquitectura do Sistema

Para se perceber melhor a função de cada ficheiro desenvolvido, vejamos o esquema que se segue:



Fig 2. Arquitectura do Sistema

O ficheiro xsd é a gramática da linguagem usada para criar e validar a instância do documento xml. O ficheiro xslt transforma a árvore documental xml dando origem ao ficheiro html. No código gerado, é feita referência aos ficheiros de imagem, css e js. O primeiro formata o aspecto gráfico da página, enquanto o segundo contém as javascripts necessárias para dinamizar a navegação através de dhtml.
De realçar que a chave deste processo de geração automática está no uso de tecnologias XML como os Schemas, as Stylesheets e a linguagem XPath.

3.1.1. Schema (.xsd)

A primeira figura mostra-nos a estrutura base do jornal:



Fig 3. Elemento ejournal (ejournal.xsd)

O jornal é classificado por um conjunto de atributos como o nome, a data, o logotipo e a versão. Para além disso, é constituído por um editorial e um conjunto de secções. O editorial contém informação sobre a produção técnica e deixa em aberto um conjunto de items que podem ser definidos, conforme a edição o desejar, como um par {nome, valor}. Por exemplo, poderia ser {"Director","José Joaquim"} e {"Design","Maria Maruca"}. Cada secção é uma sequência de artigos. Vejamos a descrição de um artigo:



Fig 4. Elemento article (ejournal.xsd)

Um artigo é constituído por um título, um lead, um corpo textual, uma imagem e a referência aos autores. Pode também ter um conjunto de links sobre informação relacionada, e um conjunto de keywords para classificação do artigo perante motores de pesquisa. As zonas textuais são simples parágrafos de texto, para evitar a heterogeneidade gráfica das notícias que provém de diversos autores.
Em suma, é um esquema bastante simples mas eficaz, modular e objectivo.

ver ficheiros: ejournal.xsd


3.1.2. Instância (.xml)

A instância é o documento xml que descreve os conteúdos do jornal. A título de exemplo vejamos um excerto de código:


<section name="Grupo de Linguagens">
   <article>
      <title>Processamento Estruturado de Documentos</title>
      <lead>
          <paragraph>
          Disciplina de opção oferecida ao Mestrado
          em Informática e ao Curso de Especialização em Informática
          do Departamento de Informática, da Escola de Engenharia
          da Universidade do Minho.
          </paragraph>
      </lead>
      <body>
          <paragraph>
          Familiarização e Utilização da tecnologia baseada
          em XML e XSL como suporte à publicação electrónica de
          conteúdos e como plataforma de intercâmbio entre 
          diferentes sistemas e aplicações.
          </paragraph>
          <paragraph>
          No fim do módulo, o aluno deverá ser capaz de
          montar uma plataforma para processamento documental
          usando XML, XSL e ferramentas derivadas, suportando
          todas as fases do ciclo de vida documental.
          </paragraph>
      </body>
   </article>
</section>

Um dos aspectos mais importantes que foi considerado quando se criou a gramática documental deste documento, teve a ver com o produto final que se pretendia. De facto, uma das observações que pode ser feita é que a formatação textual do artigo, no que ao parágrafo diz respeito, poderia ser mais rica. A justificação mais plausível é que de facto não era uma exigência do produto final idealizado porque se pretendia homogeneizar a escrita de artigos não deixando margem para grandes invenções por parte de quem os editava.
Nesse sentido, toda a riqueza de formatação textual e gráfica foi passada para o trabalho de geração do Relatório, em que este, tal como já o descrevemos, contém alguns mecanismos mais poderosos. Não se pense, por isso, que foi um detalhe deixado ao acaso ou incompleto...

ver ficheiros: ejournal.xml


3.1.3. Html (.html)

A única razão para que este tópico seja abordado nesta altura, é a necessidade de explicar ao leitor a estrutura de navegação da página, para que, mais tarde, consiga perceber melhor o código da Stylesheet.
Na página web, o uso de DHTML e Javascript permitiu construir uma navegação por Layers (Divs). Basicamente, existem dois divs (artigos de uma secção, artigo) que estão visíveis e outro conjunto de divs que estão ocultos. Sempre que é necessário, os dois primeiros são carregados com o conteúdo dos que estão escondidos. Tudo isto é feito dinamicamente sem recarregar a página. Para conseguir este tipo de dinamismo, no header do html gerado, são colocadas referências aos ficheiros css e js. A figura seguinte ilustra a navegação aqui referida:



Fig 5. Navegação por layers (ejournal.html)

Convém referir que este modelo foi primeiro desenvolvido em código estático e só depois transposto para o ficheiro xsl. À parte deste pormenor, o resto da codificação HTML é bastante simples, mas muito bem estruturada.

ver ficheiros: ejournal.html, browser.js, global.js, main.js, global.css


3.1.4. Stylesheet (.xslt)

Na Stylesheet vamos analisar os excertos de código mais importantes e comentar as opções e decisões tomadas em cada um.

Excerto 1:


<xsl:template match="sections">
   <div id="sections" class="containerOn">
      (...)
      Secções
      (...)
      <xsl:for-each select="section">
         <xsl:if test="position()>1">
            <img hspace="5" src="images/bulletb.gif" align="middle"/>
         </xsl:if>
         <a genid="{generate-id(.)}" 
         onclick="javascript:writeFromTo(this.genid,'articles')" href="#">
            <xsl:value-of select="@name"/>
         </a>
      </xsl:for-each>
      (...)
   </div>
</xsl:template>

Esta template escreve no div "sections" o nome de todas as secções que existem no documento e fica sempre visível devido à definição da class="containerOn". A separação de nomes é feita por um ponto, do tipo imagem, que é escrito apenas quando há mais que um, tal como é garantido pela condição test="position()>1", e cada nome é escrito dentro de um <a...>...</a>.
Quando o utilizador clica no link de uma secção, é accionada uma função que copia o conteúdo de um div, que está escondido e contém a informação sobre os artigos dessa secção, para o div "articles". Este último, também está sempre visível. Desta forma é feita uma navegação dinâmica ao nível do cliente.

Excerto 2:


<xsl:template match="section">
   <div id="{generate-id(.)}" class="containerOff">
      (...)
      Artigos
      (...)
      <xsl:for-each select="article">
         (...)
         <a genid="{generate-id(.)}" 
         onclick="javascript:writeFromTo(this.genid,'article')" href="#">
            <xsl:value-of select="title"/>
         </a>
      </xsl:for-each>
      (...)
   </div>
</xsl:template>

O div gerado por esta template é um exemplo de um layer que fica oculto na página, devido à declaração da class="containerOff". Este tipo de divs apenas servem para guardar informação na página como se fossem uma variável de armazenamento global.
O que foi explicado para o excerto 1 também é válido para o excerto 2, mas neste caso, quando se escolhe um artigo, é carregado o seu conteúdo para o div "article".

Excerto 3:


<xsl:template match="article">
   <div id="{generate-id(.)}" class="containerOff">
      (...)
      Artigo
      (...)
      <xsl:value-of select="title"/>
      (...)
      <xsl:if test="count(keywords/keyword)>0">
         (...)
         <xsl:for-each select="keywords/keyword">
            (...)
            <xsl:value-of select="."/>
         </xsl:for-each>
         (...)
      </xsl:if>
      (...)
      <xsl:for-each select="lead/paragraph">
         (...)
         <xsl:value-of select="."/>
      </xsl:for-each>
      (...)
      <xsl:if test="image/path!=''">
         (...)
         <img src="{image/path}"/>
         <xsl:if test="image/legend!=''">
            (...)
            <xsl:value-of select="image/legend"/>
            (...)
         </xsl:if>
         (...)
      </xsl:if>
      (...)
      <xsl:for-each select="body/paragraph">
         (...)
         <xsl:value-of select="."/>
      </xsl:for-each>
      (...)
      <xsl:if test="count(links/link)>0">
         (...)
         <xsl:for-each select="links/link">
            (...)
            <a href="{url}">
               <xsl:value-of select="name"/>
            </a>
         </xsl:for-each>
         (...)
      </xsl:if>
      <xsl:if test="count(authors/author)>0">
         (...)
         <xsl:for-each select="authors/author">
            (...)
            <xsl:value-of select="."/>
         </xsl:for-each>
         (...)
      </xsl:if>
      (...)
   </div>
</xsl:template>

Nesta template, aplicada a cada artigo, destacam-se os testes realizados sobre os elementos opcionais ou plurais do Schema que evitam que seja gerado código desnecessário.

A total compreensão desta Stylesheet requer alguns conhecimentos em DHTML e Javascript. Como estas tecnologias não são o objectivo principal deste trabalho, espero que o elaborado esforço em explicar a estrutura de navegação possa ter contribuído para um melhor esclarecimento do leitor.

ver ficheiros: ejournal.xslt


4. Conclusão

Este mini-projecto permitiu, de uma forma leve, introduzir a tecnologia XML e explorar as suas potencialidades. Na verdade, é na aplicação do XML que surgem as discussões mais pertinentes, porque o seu potencial ninguém duvida que é elevado. Na minha opinião, este tipo de tecnologia atinge o seu auge quando se aplica na área do eBusiness facilitando a integração de informação entre diferentes entidades, sejam elas sistemas organizacionais ou não. Mas, mais áreas haverá em que a sua aplicação seja uma vantagem, pelo menos por agora. No entanto, sou daqueles que acreditam que não é a solução para tudo!
Em jeito de auto-avaliação, este trabalho apresenta criatividade na forma como dispõe graficamente e estruturalmente o jornal, não descurando o cuidado em produzir um resultado final com qualidade suficientemente profissional do ponto de vista de tecnológico.

Bibliografia

[XPC02] Stanek, William R.: XML - Pocket Consultant. Microsoft Press, 2002. ISBN 0-7356-1183-1
[XX02] Ramalho, José C., Henriques, Pedro R.: XML & XSL - Da Teoria à Prática. FCA - Tecnologias de Informação, 2002. ISBN 972-722-347-8
[XC01] XML Complete. Sybex, 2001. ISBN 0-7821-4033-5




Versão 1.0 @ Miguel Domingues