Abstract— The development of systems for the mobile

environment is considered complex due to the great number of aspects to be analyzed, such as constant changes of localization and the diversity of devices. In this context appears the necessity of more flexibility for the modeling and implementation of systems. This article presents an architecture for the Generation of Adaptive Interfaces (GAI) which has as aim the adaptation of application interfaces in the Web environment, according to the characteristics of multiple devices. For such, one technique of fragmentary is used in order to makes possible to the designer the division of a page in block of diverse sizes, according to the device screen where they will be shown. A repository of profiles is used for the recognition of the clients in run time. The validation of the architecture is presented through of an environment of development and a case study.

Keywords— CC/PP; Dispositivos Móveis; Interfaces

Adaptativas; Web

I. INTRODUÇÃO termo computação onipresente, Ubiquitous

Computing, cunhado por [1], se refere a ambientes com objetos operados por computador e conectados em redes sem fio, integrando mobilidade, comunicação e poder de processamento. O suporte à computação ubíqua implica em grandes desafios tecnológicos, mudanças organizacionais e do modelo de negócios.

Os sistemas para dispositivos móveis são executados em ambientes dinâmicos e heterogêneos com freqüentes e rápidas flutuações na qualidade de serviço das redes e variabilidade de fontes de acesso e disponibilidade. Outros aspectos que aumentam a complexidade são fatores como tempo, espaço, conectividade, portabilidade e mobilidade. Para suavizar o impacto dessas trocas a aplicação pode ter um comportamento adaptativo. O sistema pode modificar-se para melhorar tempo de resposta, recuperar-se de uma falha, otimizar o uso de recursos ou incorporar novas funcionalidades.

Giani Carla Ito é professora do ensino superior desde 1999 em Cascavel –

PR, Brasil. (e-mail: author@ boulder.nist.gov giito@uol.com.br). Mauricio Gonçalves Vieira Ferreira é professor do curso de Pós-

Graduação do INPE, São José dos Campos, São José dos Campos, Brasil. (e-mail: mauricio@ccs.inpe.br ).

Nilson Sant’Anna é professor do curso de Pós-Graduação do INPE., São José dos Campos, São José dos Campos, Brasil (e-mail: nilson@ccs.inpe.br ).

Embora os projetos relacionados a esse contexto já venham sendo explorados há algum tempo, a usabilidade das aplicações móveis está longe de oferecer qualidade de navegação aos usuários. O conteúdo desenvolvido originalmente para a Web não deve ser transferido para o ambiente móvel, sem algum tipo de otimização.

Os trabalhos atuais de acordo com [2], focam em duas abordagens: a primeira é transformar páginas Web existentes, como apresentados em [3], [4] e [5]. A segunda introduz novos formatos e mecanismos para adaptar-se a diferentes tamanhos de tela, descritos nos artigos de [6] e [7].

Na primeira abordagem, duas formas de transformação podem ocorrer, como por exemplo, mudanças na forma de apresentação da interface sem qualquer modificação estrutural. Nesse caso, retira-se a barra de rolagem horizontal e o conteúdo é exibido em uma única coluna vertical. Embora simples e rápida essa forma de navegação aumenta a altura da página forçando o usuário a usar a barra de rolagem vertical excessivamente. Outra solução utiliza o uso de palavras chave ou figuras como zoom em partes da página para facilitar a navegação. É mais indicada para usuários que tenham familiaridade com o conteúdo do site.

A segunda abordagem consiste em recuperar a estrutura semântica de um conteúdo original e reescrever a interface de acordo com o contexto do usuário. A técnica tem como objetivo particionar uma página Web dentro de um conjunto de subpáginas e gerar uma tabela de conteúdos com ou sem uma hierarquia, gerando um índice da página. A arquitetura proposta nesse trabalho pertence a essa categoria.

Esse artigo apresenta uma estratégia de desenvolvimento para a Geração de Interfaces Adaptativas (GIA) com o objetivo implementar interfaces que se adaptem às características de diversos dispositivos, oferecendo uma forma de implementação que preserve a consistência e usabilidade. Neste contexto, uma única interface pode automaticamente se adaptar a novas classes de aparelhos, oferecendo a mesma funcionalidade.

Além disso, deseja-se que os especialistas como desenvolvedores de software e designers de interface possam implementá-las tanto para desktops como para dispositivos móveis, sem a necessidade de programação adicional. Para tal, esse trabalho visa propor um ambiente com o objetivo de integrar o reconhecimento de dispositivos móveis em tempo de execução a uma metodologia de fragmentação de código.

A Strategy of Development for Web Interfaces in Mobile Devices

Giani Carla Ito, Mauricio G. Ferreira, Nilson Sant’Anna

O

436 IEEE LATIN AMERICA TRANSACTIONS, VOL. 6, NO. 5, SEPTEMBER 2008

Esta metodologia consiste em particionar uma interface Web dentro de um conjunto de subpáginas gerando um menu de conteúdos de forma hierárquica para facilitar a navegação em diversos tipos de dispositivos.

Este artigo está dividido em sete seções. A seção II aborda os trabalhos relacionados. A seção III apresenta um método de reconhecimento de dispositivos móveis intitulado CC/PP. A seção IV apresenta a arquitetura para geração de interfaces adaptativas (GIA). A seção V descreve a metodologia proposta para fragmentação de interfaces. Na seção VI são apresentados os resultados obtidos visualizados em múltiplos dispositivos e a última seção conclui o trabalho.

II. TRABALHOS RELACIONADOS No campo das aplicações para unidades móveis, muito se

tem discutido sobre mecanismos que realizem de forma dinâmica a adaptação ao contexto do usuário.

Os projetos descritos por [8], [9] e [10] tem como finalidade a criação e design de um sistema interativo para diversos tipos de dispositivos móveis e embutidos, utilizando um modelo de desenvolvimento de interface do usuário baseado na linguagem Extensible Markup Language (XML). As transformações para Hiper Text Markup Language (HTML) e Java ocorrem por meio da eXtensible Stylesheet Language Transformation (XSLT).

Uma das restrições da utilização da abordagem XML refere-se ao código mais complexo, já que é preciso verificar a sintaxe com um analisador, para garantir uma execução livre de erros. A estrutura é bem definida, mas a semântica um tanto limitada. Os documentos XML definem a estrutura de dados, mas não descrevem como manipular esses dados.

Outro fator diz respeito à transformação da XML pela linguagem XSL, pois ela exige que cada aparelho tenha um XSL correspondente, gerando diversos arquivos para uma mesma interface, nesse caso, um para cada modelo de dispositivo.

A arquitetura descrita em [8], utiliza a especificação de atividades, ConcurTaskTree (CTT) proposta por [11], definida como uma especificação de atividades para a modelagem da interface do usuário em alto nível e determinar o conjunto de interações necessárias. A ferramenta TERESA (Transformation Environment for inteRactive Systems representAtions) proposta pelo mesmo autor, oferece uma sintaxe gráfica e uma estrutura hierárquica, como uma notação específica entre as atividades do sistema. O formalismo CTT, nesse caso, é combinado com nós de decisão e regras para permitir que a interface do usuário se adapte ao contexto.

Uma das limitações dos trabalhos [8] e [9], é que eles não garantem uma apresentação visual amigável da interface perante sua migração entre diversos tipos de dispositivos. O foco não está na usabilidade e sim na funcionalidade da interface. Os autores afirmam que dessa forma o sistema apresenta maior flexibilidade. A arquitetura proposta em [9] apresenta-se limitada no sentido da modelagem dos aspectos contextuais como, por exemplo, a identificação do tipo de dispositivo móvel. O mecanismo utilizado limita-se ao user agent, o qual informa apenas algumas características do cliente.

O trabalho proposto por [12] utiliza uma abordagem reflexiva para solucionar o problema de adaptação da interface. Um aspecto a ser observado nessa arquitetura é o grande número de exigências que devem ser obedecidas para a implementação de todos os requisitos estabelecidos. Apesar do potencial da abordagem reflexiva, seu uso para tempo real pode ser questionado com relação aos aspectos de desempenho e previsibilidade. A arquitetura GIA é baseada em uma arquitetura adaptativa e fundamentada no modelo-visão-controle (MVC), o qual estabelece uma separação da estrutura da interface em camadas.

O trabalho proposto por [13] sugere uma adaptação voltada a serviços multimídia para ambientes heterogêneos. A limitação dessa arquitetura é a necessidade de descrever cada novo dispositivo em Universal Profiling Schema (UPS), uma forma para minimizar a troca de perfis entre clientes, servidores ou proxies. Nessa arquitetura, a adaptação, algumas vezes, necessita de vários tipos de documentos para cada solicitação do cliente. A arquitetura GIA gera apenas um arquivo da interface.

Um aspecto importante com relação às arquiteturas estudadas refere-se ao fato de que a arquitetura GIA gera aplicações cientes de contexto com capacidade de adquirir informações do usuário de modo automatizado, disponibilizando-as em tempo de execução por meio do CC/PP e UAPROF, descritos na seção III. Vale ressaltar que o processo de implementação da interface é realizado sem duplicidade de código. Outro fator refere-se à dinamicidade da arquitetura, uma vez que, ao surgirem novos tipos de dispositivos, o sistema não precisa ser reestruturado para suportá-los.

III. RECONHECIMENTO DE DISPOSITIVOS MÓVEIS O Composite Capabilities/Preferences Profile (CC/PP) é

uma especificação do World Wide Web Consortium (W3C) para expressar características dos dispositivos e das preferências de usuários, de acordo com [14]. Tem como objetivo proporcionar um mecanismo estruturado e universal para descrever e transmitir informações sobre as capacidades de um cliente Web para um servidor, de forma que o conteúdo seja direcionado a essas características. Os perfis podem estar armazenados em um servidor Web local ou remoto, segundo [15].

O CC/PP é baseado no Resource Description Framework (RDF), uma linguagem utilizada pela W3C para modelagem de metadados e descrição de documentos XML, permitindo uma maior flexibilidade na criação de novos vocabulários, de segundo [16].

As características dos dispositivos também podem ser capturadas por meio do UAPROF (WAP-UAPROF), uma especificação definida pelo grupo Wireless Application Protocol (WAP). Tem como objetivo descrever as características e padronizar os vocabulários CC/PP entre os fabricantes de dispositivos móveis. Sua representação é baseada em RDF e portanto, seu vocabulário utiliza o mesmo formato básico que o CC/PP. Nesse vocabulário, cada propriedade do user-agent pertence a um dos componentes

ITO et al.: A STRATEGY OF DEVELOPMENT FOR WEB 437

que o formam: plataforma de hardware, software, características WAP, browser e características de rede. Cada fabricante disponibiliza um documento UAPROF para a classe de aparelhos em um Web site.

Para que sejam tratadas as requisições de dispositivos que possuam perfis CC/PP, foi desenvolvida pela [17] uma biblioteca denominada Delivery Context Library (DELI). Em [18] é apresentado um exemplo de uso e aplicação do DELI integrado ao CC/PP.

IV. ARQUITETURA PARA GERAÇÃO DE INTERFACES ADAPTATIVAS (GIA)

Nesta seção apresenta-se a arquitetura para Geração de Interfaces Adaptativas (GIA) que tem como proposta principal a criação de uma interface que preserve a consistência, a usabilidade e a facilidade para migrar de um dispositivo para outro. Essas interfaces podem automaticamente se adaptar a novas classes de aparelhos, oferecendo a mesma funcionalidade, sem a necessidade de programação adicional. O objetivo da arquitetura GIA é permitir que uma implementação esteja voltada a um ambiente multiplataforma, partindo de uma descrição da interface genérica que seja independente de dispositivo e que atenda às solicitações de diversos usuários a uma mesma aplicação, considerando o tipo de dispositivo móvel em tempo de execução.

Dessa forma, pretende-se reduzir o tempo de desenvolvimento, por meio de uma metodologia menos dependente de propriedades de um dispositivo único, justificando, a necessidade do conceito de adaptação da interface ao usuário. A Fig. 1 ilustra a arquitetura GIA composta pelo gerenciador de conexão, o framework DELI, o redirecionador de blocos, o gerador de componentes, o controlador, o banco de dados, o editor de interfaces e o gerenciador de recursos, detalhados a seguir.

Gerenciador de Conexão: é um servlet que intercepta

a conexão realizada pelo usuário com o objetivo de identificar as características do dispositivo. Tem a função de acionar o DELI e se comunicar com o

repositório de perfis externo, o CC/PP, a fim de obter os dados do dispositivo cliente e retorná-las para o controlador;

DELI e Repositório de Perfis: realiza o reconhecimento dos dispositivos que acessam a aplicação, como descrito na seção III; Controlador: é o módulo responsável pelo

gerenciamento da arquitetura. Associa funcionalidades do framework DELI com a arquitetura GIA para obter as características do dispositivo que está requisitando a interface. Controla o redirecionador de blocos e o gerador de componentes; Aplicação Web: é uma interface Web composta por

componentes textuais e gráficos implementados utilizando a metodologia de fragmentação do código; Redirecionador de Blocos: é um algoritmo que gera

um menu hierárquico, possibilitando a navegação entre os blocos definidos pelo desenvolvedor. Para tal, o controlador verificará se a interface está fragmentada e o tamanho de tela do dispositivo solicitante, a fim de utilizar ou não os blocos declarados no código. Caso estas duas condições sejam verdadeiras, o menu será gerado; Gerador de Componentes: é um algoritmo que tem a

função de converter o código escrito em JSP referente ao componente na linguagem que o dispositivo solicitante reconheça, como por exemplo, XHTML, HTML ou Wireless Markup Language (WML), por meio de tag-libs previamente cadastradas no banco de dados; Banco de Dados: contêm as informações sobre browser,

fabricante, perfis, componentes, tag-libs e dispositivos, que serão utilizadas para a geração de componentes; Editor de Interfaces: proporciona um ambiente para a

criação de interfaces Web, permitindo que o desenvolvedor possa estruturar, fragmentar e visualizar interfaces para desktops e dispositivos móveis de diversos tamanhos; Gerenciador de Recursos: é o módulo responsável por

gerenciar as informações cadastradas no banco de dados e coordenar dados fundamentais para o funcionamento do serviço de adaptação. Seu acesso é realizado pelo editor de interfaces.

A. Ambiente de desenvolvimento GIA A arquitetura GIA é validada por um ambiente de

desenvolvimento composto pelo editor gráfico com visualização da interface em tamanhos de telas escolhidos pelo designer, bem como um gerenciador de recursos para atualizações do sistema, como ilustra a Fig. 2.

O ambiente gráfico GIA foi implementado utilizando-se a linguagem Object Pascal por meio do Borland Delphi 7.0 e o banco de dados PostgreSql 8.1. A linguagem Java foi usada para a implementação do servidor GIA.

B. Funcionamento da arquitetura GIA Para garantir a adaptação em múltiplos dispositivos, a

Fig. 1. Arquitetura para Geração de Interfaces Adaptativas

438 IEEE LATIN AMERICA TRANSACTIONS, VOL. 6, NO. 5, SEPTEMBER 2008

interface implementada no ambiente GIA deve utilizar a metodologia proposta na seção V, bem como a linguagem Java Server Pages (JSP).

Posteriormente a interface é transformada pela arquitetura na linguagem suportada pelo dispositivo móvel previamente cadastrado no banco de dados, como por exemplo, XML, HTML ou WML, garantindo desta forma a adaptação em múltiplos browsers.

Fig. 2 Ambiente de Desenvolvimento GIA Dessa forma, quando o usuário acessar uma aplicação por

meio de um dispositivo móvel ou computador pessoal, o gerenciador de conexão captura-a e faz uma chamada para o DELI, para identificar o dispositivo e localizar no repositório de perfis externo as informações relevantes, tais como o tamanho de tela, browser, sistema operacional, entre outros.

Após este processo, o gerenciador de conexão envia os parâmetros para o controlador que por sua vez ativa o gerador, o qual usa as informações dos componentes armazenados em banco de dados para converter as tag-libs declaradas no código em uma linguagem que o browser do dispositivo interprete.

Em seguida, o controlador verifica se a interface está fragmentada. Caso positivo analisa qual a bloco em cuja faixa de tamanhos de tela o dispositivo se encaixa. Uma vez determinado o tamanho mais adequado, a página é fragmentada e exibida de acordo com os blocos definidos pelo desenvolvedor, permitindo ao usuário navegar entre as telas.

Se a solicitação for feita por um desktop tem-se apenas um bloco definido, contendo toda a página. Dessa forma, o sistema detecta que a resolução da tela é de 800x600 pixels e a seleção é feita automaticamente de acordo com as delimitações para esse tamanho. Nesse caso, a página inteira é retornada ao browser, sem a necessidade de navegação entre outros blocos, uma vez que haveria apenas um.

V. METODOLOGIA PARA FRAGMENTAÇÃO DA INTERFACE O funcionamento da arquitetura GIA está vinculado a uma

estratégia de programação proposta neste trabalho, que sugere a divisão do código da interface em blocos, organizados de

forma hierárquica. Para garantir o funcionamento da metodologia proposta

primeiramente, a interface deve conter a referência à arquitetura GIA conforme a sintaxe apresentada na Fig. 4. O conteúdo estruturado dentro das tags <gia:html> e </gia:html> são tratados pela arquitetura durante a requisição a uma aplicação.

Cada bloco pode ter vários tamanhos determinados de acordo com as telas para as quais se pretende exibir a interface, podendo ser visualizados e alterados conforme desejado. A GIA foi idealizada determinando-se nove tamanhos de blocos, numa escala aritmética de 100 a 500 pixels com coeficiente de variação de 50 pixels. Para determinar o tamanho mínimo e máximo de um bloco analisou-se que o menor tamanho da tela dos dispositivos móveis, incluindo celulares e PDAs, aproximam-se de 100 pixels e o maior de 500 pixels.

Caso o tamanho da tela ultrapasse 500 pixels a interface não será fragmentada, sendo mostrada na íntegra. A fim de viabilizar o processo de adaptação, a arquitetura exibe o menor bloco que mais se aproxima da resolução do aparelho.

A Fig. 3 descreve o código para um cadastro de usuários composto por seis componentes, sem a utilização da metodologia proposta. A Fig. 4 exibe o mesmo código fragmentado em blocos de três tamanhos: 100, 250 e 350 pixels.

<%@taglib uri="gia" prefix="gia"%><gia:html><gia:title>Cadastro de Usuários</gia:title>

<gia:Componente TIPO:"img"PROPRIEDADE:" src='images/logo.jpg',alt='Logo Marca' width='30',heigth='30'”/><gia:Componente TIPO:"Label"PROPRIEDADE:" Text='Nome' ”/><gia:Componente TIPO:"EDIT"PROPRIEDADE:" size='10', name='Nome'”/><gia:Componente TIPO:"Label"PROPRIEDADE:" Text='Endereco' ”/><gia:Componente TIPO:"EDIT"PROPRIEDADE:" size='30',name='Endereco'”/><gia:Componente TIPO:"Button"PROPRIEDADE:" width='30',height=20 Text='Botao Enviar', ”/><gia:Componente TIPO:"img"PROPRIEDADE:" src='images/animação.jpg',alt='Logo Marca' width='30',heigth='30'”/>

</gia:html>

Para que os blocos sejam reconhecidos pela arquitetura GIA devem ser identificados e seqüenciados pelas propriedades id, seq e comentário, descritos a seguir e exemplificados no código da Fig. 4.

• Id: é o nome que identifica o trecho do bloco; • Seq: indica o nível de prioridade de cada bloco dentro de

sua hierarquia. A seqüência determinada por esse atributo indica a ordem que as telas aparecerão;

Fig.3 Exemplo de Código sem a Metodologia Fragmentação

Visualização completa

Visualização Fragmentada

ITO et al.: A STRATEGY OF DEVELOPMENT FOR WEB 439

1

2

3

45

6

7 8

Fig.5 Interface Original no Internet Explorer 6.0

Fig.6 Interface acessada sem a utilização da Arquitetura GIA

• Comentário: é a descrição do bloco. É exibido por um menu durante a navegação para possibilitar ao usuário um melhor entendimento do mapeamento da interface;

<gia:title>Cadastro de Usuários</gia:title>

2"><gia:Componente TIPO:"EDIT" PROPRIEDADE:"size='30', name='Endereco'”/><gia:Componente TIPO:"Button" PROPRIEDADE:"width='30',height=20 Text='Botao Enviar', ”/>

</gia:bloco100><gia:bloco100 id="bloco100.3" seq="3" comentario="Parte3">

<gia:Componente TIPO:"img" PROPRIEDADE:"src='images/animação.jpg', alt='Logo Marca'width='30', heigth='30'”/>

</gia:bloco100>

<%@gialib uri="gia" prefix="gia"%>

<gia:html><gia:bloco350 id="Menu" seq="1" comentario="Parte 1">

<gia:bloco250 id="Menu" seq="1" comentario="Parte 1"><gia:bloco100 id="Cadastro1" seq="1" comentario="Parte1">

<gia:Componente TIPO:"img" PROPRIEDADE:"src='images/logo.jpg', alt='Logo Marca'width='30', heigth='30'”/><gia:Componente TIPO:"Label" PROPRIEDADE:"Text='Nome' ”/><gia:Componente TIPO:"EDIT" PROPRIEDADE:"size='10', name='Nome'”/>

</gia:bloco100><gia:bloco100 id="bloco100.2" seq="2" comentario="Parte2">

<gia:Componente TIPO:"Label" PROPRIEDADE:"Text='Endereco' ”/>

</gia:bloco250><gia:bloco250 id="bloco250.2" seq="2" comentario="Parte

</gia:bloco250></gia:bloco350></gia:html>

<gia:html>

<gia:componente tipo="IMG" propriedade="SRC=imagenlogo_do_site.jpg;ALIGN=middle"/>

A arquitetura GIA contém tag-libs, representadas no

código por <gia:bloco350, <gia:bloco250 e <gia:bloco100 as quais delimitam e identificam os blocos determinados pelo desenvolvedor durante a implementação da interface. Quando um cliente faz uma solicitação ao servidor, automaticamente o tamanho da tela é identificado. O sistema analisa os fragmentos do código e verifica em qual faixa de tamanho o mesmo se encaixa. A seleção do conteúdo que será exibido é determinada de acordo com as delimitações dos blocos.

O ambiente GIA também possui tags genéricas que tem como função representar o respectivo componente de cada dispositivo. As mesmas serão convertidas por um algoritmo em componentes reconhecidos pelo browser do cliente. Esse processo é realizado com o auxílio do CC/PP.

As restrições ligadas ao tamanho de tela dos dispositivos móveis tornam necessárias que as informações visualizadas nesses aparelhos sejam classificadas, isto é, reduzidas de forma que seja mostrado somente o conteúdo principal do site.

A arquitetura GIA seleciona o conteúdo que será exibido no aparelho de acordo com a declaração das tags. O código que estiver fora da delimitação de um bloco não será exibido no dispositivo móvel, como ilustra o código entre 350 e 250, na Fig. 4. Nesse caso, a imagem não aparecerá em uma tela menor que 250 pixels.

VI. ESTUDO DE CASO UTILIZANDO A FERRAMENTA GIA Para demonstração do estudo de caso, foi elaborado um

Web site utilizando o ambiente de desenvolvimento GIA. Para tal, foi configurado o servidor Web Apache TomCat 5.0, o Internet Explorer 6.0 da máquina local e os simuladores Openwave Phone Simulator [19], Palm Os Simulator 6.0.1 [20], da PalmSource e PocketPC Simulator 2003 da Microsoft. A Fig. 5 exibe uma interface no navegador Internet Explorer 6.0 na resolução de 1024x768 pixels.

As linhas pontilhadas determinam como será feita a divisão da interface em telas menores, de acordo com a modelagem definida previamente pelo desenvolvedor. Essa etapa é importante para planejar como a tela será fragmentada e visualizada no tamanho do dispositivo desejado.

O primeiro acesso da interface elaborada, é demonstrado na Fig. 6, por meio de simuladores de PDAs e celulares, sem a utilização da arquitetura GIA. Como a maioria das aplicações é desenvolvida exclusivamente para desktops, a interface é exibida de forma desconfigurada em dispositivos com telas menores.

Exibir uma interface completa em um dispositivo móvel dificulta a visualização das informações. Navegar em uma coluna vertical pode causar exaustão ao usuário, pois as páginas se tornam extensas demais. As imagens e textos são visualizados de forma parcial utilizando-se a barra de rolagem. Esses problemas são comumente encontrados na maioria dos Web sites devido, ao desenvolvimento voltado a desktops.

Fig.4 Exemplo de Código dividido em blocos

440 IEEE LATIN AMERICA TRANSACTIONS, VOL. 6, NO. 5, SEPTEMBER 2008

A fim de facilitar o processo de navegação, a arquitetura GIA gera um menu no topo e no final de cada tela, como ilustra a Fig. 7. A opção T apresenta o layout em uma longa coluna vertical. Essa opção é utilizada caso o usuário deseje ver o conteúdo completo. A letra M apresenta um menu de opções da interface fragmentada. As demais regiões são numeradas em ordem ascendente com seus respectivos títulos, definidos durante a fase de implementação.

Para fins de demonstração, a interface da Fig. 7 foi acessada pelo Palm Os Simulator 6.0.1. O perfil CC/PP para este aparelho não foi localizado na Internet. A solução encontrada foi o desenvolvimento de um perfil baseado em informações disponibilizadas pelo fabricante.

A partir da captura de telas do Palm, observa-se na Fig. 7 que a interface foi adaptada características do dispositivo. A arquitetura GIA inseriu no topo e no final de cada bloco um menu numérico de 1 a 7.

No simulador Openwave, a interface foi adaptada, pois não gerou barra horizontal e o conteúdo pôde ser visualizado de uma maneira clara e objetiva, assim como em outros testes realizados com simuladores do PocketPC e celulares Nokia.

VII. CONCLUSÕES As ferramentas atuais de desenvolvimento abordam um

tipo de implementação voltada ou para desktops ou para dispositivos móveis. Este trabalho buscou, a partir dos desafios identificados inicialmente e considerando-se o escopo e as restrições estabelecidas, elaborar uma Arquitetura para

Geração de Interfaces Adaptativas (GIA), com o intuito de contribuir para uma maior facilidade de desenvolvimento para múltiplos dispositivos. Um aspecto importante com relação às arquiteturas estudadas refere-se ao fato de que a arquitetura GIA gera aplicações cientes de contexto com capacidade de adquirir informações do usuário de modo automatizado, disponibilizando-as em tempo de execução por meio do CC/PP e UAPROF.

Pela arquitetura GIA, pretende-se reduzir o tempo de desenvolvimento e duplicidade de conteúdo por meio de uma metodologia menos dependente de propriedades de um dispositivo único. Dessa forma, almeja-se uma programação voltada a um ambiente multiplataforma e que seja capaz de adquirir informações de contexto do usuário de modo automatizado.

A metodologia de desenvolvimento proposta é um diferencial deste trabalho, pois permite ao programador fragmentar o código de acordo com diversos tamanhos de tela, bem como ao fato de que o sistema seleciona, em tempo de execução, o tamanho mais adequado ao dispositivo visitante da página.

Com a utilização da ferramenta GIA aliada à metodologia de fragmentação almeja-se contribuir para a diminuição da complexidade do projeto das interfaces Web e melhorar a usabilidade em múltiplos dispositivos. Vale salientar que uma única interface é gerada e exibida em diversos tipos de aparelhos, sendo esse o principal diferencial da arquitetura GIA.

Fig. 7 Interface Adaptada pela Arquitetura GIA visualizada nos simuladores Openwave Simulator 7.0 e Palm OS Simulator 6.0

ITO et al.: A STRATEGY OF DEVELOPMENT FOR WEB 441

A. Trabalhos futuros Para facilitar ainda mais o processo de desenvolvimento

pretende-se como trabalho futuro, adicionar a ferramenta um ambiente gráfico para o desenvolvimento de interfaces, onde o designer poderá inserir componentes sem precisar fazê-lo pelo código, mas por meio do recurso arrastar-soltar. Pretende-se adicionar um módulo para tratar especificamente a adaptação de imagens e vídeos para dispositivos móveis.

REFERÊNCIAS [1] M. Weiser. “The Computer for 21st Century”, Scientific American, vol.

265, nº.3, pp. 94-104, 1991 [2] X. Xie, C. Wang, L. Chen and W. Ma. “An Adaptive Web Page Layout

Structure for Small Devices”. ACM Multimedia Systems Journal, vol. 11, nº. 1, 2005

[3] Y. Chen, W. Ma and H.J. Zhang. “Detecting Web Page Structure for Adaptive Viewing on Small Form Factor devices”. Proceedings of WWW’03. Budapest, Hungary, 2003.

[4] X. Gu, J. Chen, W. Ma and G. Chen. “Visual Based Content Understanding Towards Web Adaptation”. Proceedings of 2nd International Conference on Adaptive Hypermedia and Adaptive Web Based Systems, Malaga, Spain, 2002. pp. 164–173.

[5] N. Milic-Frayling and R. Sommerer. “SmartView: Flexible Viewing of Web Page Contents”. In: Proceedings of WWW’02. Honolulu,USA, 2002

[6] A. Borning, R.K. Lin and K. Marriott. “Constraint-Based Document Layout for the Web”. ACM Multimedia Syst. J. 2000. pp.177–189.

[7] R. Han, V. Perret and M. Naghshineh. “WebSplitter: A unified XML Framework for Multi-Device Collaborative Web Browsing”. Proceedings of CSCW’00, Philadelphia, USA, 2000. pp. 221–230.

[8] K. Coninx, K. Luyten, C. Vandervelpen, J. Van Den Bergh and B. Creemers. “Dygimes: Dynamically Generating Interfaces for Mobile Computing Devices and Embedded Systems”. Mobile HCI, vol. 2795, Springer, 2003, pp. 256-270.

[9] K. Luyten, C. Vandervelpen and K. Coninx. (2007).“Migratable User Interface Descriptions in Component-Based Development”. DSVIS 2002 Springer-Verlag. [Online]. Available: http://www.springer.de/comp/lncs/index.html

[10] G. Menkhaus. “Adaptive User Interface Generation in a Mobile Computing Environment”. PhD Thesis, University of Salzburg, Áustria, 2002

[11] G. Mori, F. Paternò and C. Santoro. “Design and Development of Multidevice User Interfaces through Multiple Logical Descriptions”. IEEE Transactions on Software Engineering 2004. pp. 507-520.

[12] M. Sendin and J. LORES. “Plasticity in Mobile Devices: a Dichotomy and Semantic View”. AH 2004: 3rd International Conference on Adaptive Hypermedia and Adaptive Web-Based Systems. Eindhoven. Holanda. Proceedings Del congrés, 2004, pp. 58-67.

[13] T. Lemlouma and N. Layaida. “Context-aware adaptation for mobile devices”. Saint Martin, France. In: Proceedings of IEEE International Conference on Mobile Data Management, 2004, pp.106 - 111

[14] G. R. Hanumansetty. “Model Based Approach for Context Aware and Adaptive User Interface Generation”. Master's Thesis, Virginia Polytechnic Institute and State University, Virginia, USA. 2004

[15] M. H. Butler. (2006). “DELI: A Delivery Context Library for CC/PP and UAPROF”. [Online]. Available: http://www.hpl.hp.com/personal/marbut/DeliUserGuideWEB.htm.

[16] O. Sila and R. Swick. (2005). “Resource Description Framework (RDF) Model and Syntax Specification”. (1999). [Online]. Available: <http://www.w3.org/1999/status/REC-rdf-syntax-19990222/status>.

[17] HEWLETT PACKARD LABS. (2005) [Online]. Available: <http://www.hpl.hp.com/personal/marbut>

[18] Silva, A. C. B., Ribeiro, N. N. T. J.; Ito, G. C. Análise de um Repositório de Perfis para Reconhecimento de Dispositivos Móveis. Anais, XII SIMPEP, 2005

[19] Openwave Developer Network. (2006). [Online]. Available:<http://developer.openwave.com/dvl/member/downloadManager.htm?softwareId=2>.

[20] Palm OS Simulator. (2006). [Online]. Available: <http://www.palmos.com/dev/tools/simulator/>.

Giani Carla Ito obteve o título Bacharel em informática pela UNIOESTE - Universidade Estadual do Oeste do PR, em 1998. Em 2001 concluiu o mestrado em ciências da computação pela UFSC-Universidade Federal de Santa Catarina. Em 2004, obteve o título de especialista em docência no ensino superior pela UNIPAN-União Pan-americana de Ensino. É doutora em computação aplicada pelo INPE – Instituto Nacional de Pesquisas Espaciais.

È professora do ensino superior desde 1999 em Cascavel - PR. Atualmente atua nas áreas de computação móvel com ênfase em interfaces adaptativas.

Mauricio Gonçalves Vieira Ferreira nasceu em Rio Pomba, Brasil, em 19 de dezembro de 1965. Graduou-se em Tecnologia de Processamento de Dados em 1987 pela FAI - Faculdade de Administração e Informática. Recebeu o título de Mestre em Computação Aplicada em 1996 e concluiu o doutorado em 2001, ambos pelo INPE - Instituto Nacional de Pesquisas Espaciais. Atualmente é professor do curso de Pós-Graduação do

INPE.

Nilson Sant’Anna - Graduado em Engenharia Elétrica - Ênfase Eletrônica pela UNIFEI- Universidade Federal de Itajubá em 1987. Recebeu o título de Mestre em 1993 e Doutor em Engenharia de Software no INPE – Instituto Nacional de Pesquisas Espaciais em 2000. É pesquisador responsável pelo grupo de Engenharia de Software do INPE/LAC - Laboratório de Computação e Matemática Aplicada e professor do

curso de Pós-Graduação do INPE. É consultor e instrutor em processo de Desenvolvimento e Qualidade de Software credenciado pelo SOFTEX/MPS-Br Modelo de Melhoria do Processo de Software.

442 IEEE LATIN AMERICA TRANSACTIONS, VOL. 6, NO. 5, SEPTEMBER 2008