Universidade Federal de So Carlos

Pr-Reitoria de Pesquisa
Coordenadoria de Iniciao Cientfica e Tecnolgica

Ttulo do projeto de pesquisa:

Modelagem de interfaces ricas cientes de contexto na Web 2.0 para
plataforma Android

Nome do Aluno:
Andr Luiz Bonfatti
Nome do Curso de Graduao:
Bacharelado em Cincia da Computao
Nome do Orientador:
Luciana Aparecida Martinez Zaina
Departamento/Centro:
Coordenao Acadmica campus Sorocaba

Sorocaba - 2012

Contedo
1.

Introduo ............................................................................................................................ 1

2.

Objetivo ................................................................................................................................ 3

3.

Metodologia ......................................................................................................................... 3

4.

3.1.

Etapa 1: Pesquisa bibliogrfica e estudo dos principais conceitos .................... 4

3.2.

Etapa 2: Agregao da modelagem de campos de entrada de dados ................. 4

3.3.

Etapa 3: Desenvolvimento do adaptador ........................................................... 4

3.4.

Etapa 4: Validao da Proposta ......................................................................... 4

3.5.

Etapa 5: Elaborao do Relatrio e Artigo para a publicao ........................... 5

Resultados Obtidos ............................................................................................................. 5

4.1.

Testes no Android .............................................................................................. 5

4.2.

Implementaes da biblioteca ............................................................................ 6

4.3.

Expanso da ferramenta ..................................................................................... 6

4.4.

Desenvolvimento do Adaptador ........................................................................ 8

4.5.

Validao da Ferramenta e do Adaptador .......................................................... 8

5.

Concluso........................................................................................................................... 10

6.

Referncias Bibliogrficas ............................................................................................... 11

7.

Produo Tcnico-Cientfica ........................................................................................... 12

8.

Auto Avaliao do Aluno ................................................................................................ 12

9.

Avaliao do Orientador .................................................................................................. 12

10. Destino do Aluno .............................................................................................................. 12

1. Introduo
Este projeto foi a continuao do projeto anterior de mesmo nome iniciado em
Agosto de 2010. Durante este projeto foi desenvolvida uma ferramenta para a
modelagem de interfaces ricas na Web 2.0 para a plataforma Android (2012) que sejam
adaptveis de acordo com o contexto de interao do usurio. Durante o perodo de
2011-2012 foi estudado os aspectos relacionados a elementos que proporcionam a
entrada de dados pelo usurio.
Um dos aspectos crticos como desenvolver aplicaes que sejam adequadas as
diferentes capacidades dos dispositivos existentes e que ao mesmo tempo possam
atender as preferncias do usurio. Essa necessidade de conhecer os elementos que
envolvem a interao e adaptar a aplicao segundo esses elementos denominada de
cincia de contexto. De maneira mais genrica pode-se definir contexto como um
conjunto de condies relevantes e influncias que possibilitam a compreenso de uma
situao (DEY, 2001).
A necessidade de criar diferentes verses de interfaces que sejam aderentes aos
diversos tipos de dispositivos mveis, acarreta um tempo de dedicao maior ao
desenvolvimento. O mais adequado que parte da interface seja projetada durante o
processo de desenvolvimento e outra parte possa ser construda dinamicamente em
tempo de execuo da interface (CERI et al, 2007).
A ferramenta que foi desenvolvida, denominada de DroidRichWeb, tem por
objetivo permitir que o desenvolvedor crie modelos de interfaces ricas para Web,
gerando modelos genricos de interfaces. Quando uma interface rica modelada no
DroidRichWeb ela gera um cdigo fonte utilizando padres Web definidos pelo W3C
(W3C, 2012): Cascading Style Sheets - CSS, eXtensible Hypertext Markup Language XHTML, Asynchronous JavaScript and XML - AJAX, Document Object Model DOM, eXtensible Markup Language - XML e JavaScript.
A partir da definio dos modelos genricos o desenvolvedor especifica quais
pontos da interface possuem variabilidades, definindo quais critrios sero considerados
para a adaptao daquele ponto. Os pontos de variabilidades representam variaes do
contexto da interao. Para a verso que foi desenvolvida dois aspectos contextuais
foram considerados: o perfil do usurio e o perfil do dispositivo, este obtido a partir de

especificaes descritas no WURFL (WURFL, 2012). Durante a modelagem possvel

selecionar que caractersticas relativas ao perfil do dispositivo e ao perfil do usurio
possuem impacto na adaptao da interface. A DroidRichWeb ento cria um arquivo
XML (eXtensible

Markup Language, 2012) contento as regras de adaptao para

interfaces ricas, que ser utilizado em tempo de execuo da aplicao para readequao
da interface de acordo com o contexto de interao.
A Figura 1 apresenta um modelo funcional de chamada s interfaces ricas geradas pela
ferramenta e as adaptaes dessas interfaces. A partir da chamada efetuada em um
dispositivo com Android, o servidor Web efetua a requisio para respectiva pgina (1),
esta gerada pelo DroidRichWeb. Quando um ponto de adaptao encontrado na pgina
acionado o adaptador (2), este referencia as regras de adaptao da pgina que esto
associadas ao ponto de variabilidade em questo (3), consultando os dados necessrios
dos perfis do usurio e do dispositivo (4). O adaptador ento realiza as alteraes na
pgina (5). Este procedimento realizado por toda a pgina requisitada. Ao final das
adaptaes a nova verso enviada para o dispositivo (6).

Figura 1: Modelo Funcional de Execuo das Interfaces Ricas

A interface rica e seus pontos de adaptao so definidos a partir do

DroidRichWeb. O adaptador ao identificar um ponto adaptvel, procura a respectiva
regra de adaptao no XML que contm as regras daquela interface.
Uma das principais caractersticas desta verso se refere possibilidade de usar
campos de texto em formulrios, os quais aceitam regras sobre qual o formato que o
usurio dever utilizar. Campos que permitem a livre digitao pelo usurio podem
apresentar problemas com padres incorretos (WROBLEWSKI, 2008; NILSSON,
2009). Em pequenos dispositivos este tipo de problema se torna mais frequente devido

s limitaes quanto ao tamanho do teclado utilizado. Para tratamento destas

inconsistncias foram especificados cdigos JavaScript e expresses regulares que
validam as entradas de dados (PASTOR; VALVERDE, 2009; LI; WOHLSTADTER,
2009). Uma expresso regular caracterizada por ser um mtodo de se especificar um
padro de texto. A partir de uma regra definida por sequncia de smbolos,
denominados de metacaracteres, que possuem significados especficos, verificada se
uma dada expresso (por exemplo, uma entrada de dados do usurio) casa (match),
encaixa com a regra (LEWIS; PAPADIMITRIU, 1998).

2. Objetivo
Este trabalho teve o objetivo de estender a ferramenta DroidRichWeb
possibilitando a incluso de campos que permitem a entrada de dados pelo usurio.
A principal extenso permite que durante a modelagem da interface rica o
desenvolver possa adicionar elementos de formulrio que permitam a entrada de dados
pelo usurio. A adio de tal elemento implica na possibilidade de acrescentar pontos de
variabilidades a eles de acordo com os elementos de contexto (perfil do usurio e do
dispositivo) e de tratamento dos dados digitados. Para poder adicionar o tratamento dos
dados foi desenvolvida uma biblioteca contendo um conjunto de expresses regulares
(funes JavaScript) que permitem a validao.
Outro objetivo foi implementar o adaptador das interfaces, que foi inicialmente
desenvolvido a partir do prottipo utilizado no projeto anterior (que apenas emulava
grande parte das adaptaes). O adaptador realiza o tratamento das regras de adaptao
conforme especificado na Figura 1. Alm disto, a verso final do adaptador permite
agregar a possibilidade de adaptao dos campos e de suas respectivas regras de
validao de entrada de dados (WROBLEWSKI, 2008).

3.

Metodologia
Para o desenvolvimento deste trabalho foram adotadas cinco etapas. A seguir

so dispostas as descries das etapas e os resultados das mesmas so apresentados na

seo quatro deste relatrio.

3.1. Etapa 1: Pesquisa bibliogrfica e estudo dos principais conceitos

Inicialmente foi realizado um estudo bibliogrfico sobre os assuntos
relacionados ao projeto. Alm disso, foram pesquisadas metodologias e ferramentas de
validao de campos de texto (HTML5, JQuery, expresses regulares), bem como
diferentes necessidades para o usurio no que se refere a tratamento de campos de
entrada empregados em aplicaes ricas na Web para dispositivos mveis.
Alm destas pesquisas, nesta etapa foram realizados os testes de algumas
propriedades CSS e como os browsers nativos das verses 2.2 e 2.3.3 do Android as
interpretavam.
3.2. Etapa 2: Agregao da modelagem de campos de entrada de dados
Nesta etapa foi realizada a expanso da ferramenta DroidRichWeb. As atividades
desta etapa tinham como objetivo a modelagem e implementao da funcionalidade que
permite ao usurio do DroidRichWeb adicionar formulrios e campos de textos ao
modelo adaptvel, bem como poder editar expresses regulares para os mesmos.
Formatos pr-definidos de validao foram adicionados ferramenta por serem os mais
utilizados segundo pesquisas realizadas. Tambm nesta etapa foi implementada uma
biblioteca XML que contm todas as regras de validao de campos de texto,
possibilitando que o usurio do DroidRichWeb personalize a coleo de expresses
regulares que a ferramenta utiliza sem precisar de uma nova compilao da mesma.
3.3. Etapa 3: Desenvolvimento do adaptador
Esta etapa teve como objetivo modelar, desenvolver e testar o adaptador das
interfaces a partir do prottipo j desenvolvido durante o projeto anterior. Conforme
apresentado na Figura 1 o adaptador utiliza o conjunto de regras de adaptao gerado
durante a modelagem da interface rica para realizar a adaptao da interface. Tambm
so consultados os perfis de dispositivo e do usurio. A verificao da biblioteca de
validao dos campos de entrada do usurio tambm foi agregada s consistncias de
adaptao.
3.4. Etapa 4: Validao da Proposta
Nesta etapa foi realizado um estudo de caso e desenvolvida uma aplicao com
interfaces ricas para Android utilizando a ferramenta DroidRichWeb. Foi utilizada a

mesma aplicao j desenvolvida anteriormente de download e upload de arquivos,

acrescentando a ela a possibilidade de criar metadados dos arquivos durante o upload.
Uma nova funcionalidade de busca de arquivos atravs dos campos dos
metadados cadastrados foi implementada. Essa pode ser utilizada para localizar
arquivos especficos para download. O estudo de caso permitiu a validao do
adaptador desenvolvido.
3.5. Etapa 5: Elaborao do Relatrio e Artigo para a publicao
Alm do relatrio final do projeto, foi elaborado um artigo que foi submetido ao
Workshop de Trabalhos de Iniciao Cientfica Webmedia 2012.

4. Resultados Obtidos
Dadas as cinco etapas e suas consecutivas concluses, foram obtidos os
resultados esperados, os quais so descritos a seguir.
4.1. Testes no Android
Na primeira etapa do projeto, algumas propriedades CSS foram testadas no
browser nativo das verses 2.2 e 2.3.3 do Android. Durante este estudo foi gerada uma
tabela contendo a propriedade testada e sua respectiva funo. Todas as propriedades,
listadas na Tabela 1, funcionaram corretamente em ambas as verses testadas.

Tabela 1. Propriedades CSS testadas

Propriedade

Funo

@face-font

Importar fontes de repositrios on-line sem a necessidade de APIs ou Javascript.

nth-child
Rgba
Animation
text-shadow

Alternar cores de divs, tabelas, etc, com padres definidos pelo projetista.
Propriedade para mudar cor de componentes, onde a se refere opacidade.
Principal propriedade do CSS3.
Sombras em texto.

border-radius

Arredondamento de bordas.

border-image

Usar uma imagem como borda.

Stroke

Contorno.

Gradient

Preenchimento gradiente.

Column

Separar a seo do texto em duas ou mais colunas.

flexible box model

Transformations

Permite manipulao de orientao e alinhamento de forma geral das box.

Permite aplicar transformaes de translao, rotao e escala (zoom).

4.2. Implementaes da biblioteca

Uma das novas propriedades do HTML5 o pattern. Essa propriedade
especifica uma expresso regular pelo qual o valor do input checado (W3SCHOOLS,
2012). possvel bloquear ou no o mtodo submit do formulrio, permitindo controlar
o fluxo de execuo apenas se a validao de um campo for correta. Essa propriedade,
entretanto, no interpretada nativamente pelos browsers das verses do Android
(2012) testadas neste projeto.
Utilizando os recursos do JQuery (2012) foi criado o plugin Validate que pode
ser usado em qualquer formulrio HTML para este reconhecer os atributos HTML5
required e pattern e o tipo de campo email. O objetivo deste plugin validar os campos
no cliente.
Foram escolhidos alguns casos mais comuns de validaes para serem
verificados pela ferramenta, e foram geradas suas respectivas expresses regulares. As
expresses criadas foram as seguintes: strings alfanumricas, apenas nmeros, datas,
horrios, email, web sites e telefones.
4.3. Expanso da ferramenta
A ferramenta DroidRichWeb foi alterada incorporando as opes de inserir form
e input. A Figura 2 mostra a viso geral da ferramenta.
Ao inserir um elemento input e selecion-lo teremos a opo de validar o campo.
A Figura 3 mostra essa situao, ao clicarmos em (1) uma janela aparecer com as
opes de validao. O campo (2) mostra as validaes possveis, j o campo (3) pode
estar habilitado ou no e d a opo de quantificar uma validao (se poder se repetir n
vezes entre outras opes).

Figura 2. Viso geral da ferramenta

Figura 3. Viso das opes input

As validaes possveis so colocadas num arquivo XML e ficam disponveis na

ferramenta sem a necessidade de recompilao. A Figura 4 apresenta os componentes
principais para elaborao do cdigo fonte, as classes Input e Form foram includas
durante o processo de expanso da ferramenta.

Figura 4. Arquitetura da ferramenta aps a expanso

4.4. Desenvolvimento do Adaptador
Foi realizada a especificao dos requisitos funcionais do adaptador com a
elaborao dos seus modelos estticos e dinmicos.
O adaptador um servlet que recebe o arquivo XML (modelo esttico) como
entrada e inicia sua interpretao. O adaptador utiliza o WURFL (Wireless Universal
Resource File), que se trata de um arquivo XML que contm informaes de milhares
de dispositivos mveis. Assim o adaptador apenas copia as tags HTML ordinrias, e os
pontos adaptveis so analisados. Ao final um cdigo HTML vlido e adaptado
gerado.
4.5. Validao da Ferramenta e do Adaptador
Para validao da ferramenta foi desenvolvida uma aplicao que permite o
download e upload de arquivos, cuja interface foi modelada atravs do DroidRichWeb.
A aplicao permite testar a adaptao da interface de acordo com dois critrios: largura
da tela do dispositivo (max_image_width) e largura de banda do usurio (bandwidth). A
aplicao conta com um menu que implementado usando os efeitos do componente
link (efeitos da Web 2.0). Existem dois modelos de cabealho, que adaptado de acordo
com o dispositivo: um com imagem e um em texto puro. Caso a largura da tela do
dispositivo seja menor que 350px o texto puro exibido, caso a largura seja maior ou
igual a imagem mostrada. A exibio dos arquivos no servidor adaptvel de acordo

com o usurio: se a largura de banda for maior que 127kbps sero mostrados os ltimos
20 arquivos enviados, se for menor sero exibidos os ltimos cinco.
No teste utilizamos trs dispositivos: Motorola Droid (Milestone) de display
854x480; Samsung i7500 de display 480x320 e HTC Touch de display 320x240. Os
dois primeiros foram testados em uma conexo de 64kbps, o ltimo foi testado em uma
conexo de 64kbps e em uma de 1mbps.
Na Figura 5 temos os trs dispositivos com uma conexo de 64kbps. Na Figura
5(a) temos o dispositivo Motorola Droid; na Figura 5(b), HTC Touch; na Figura 5(c),
Samsung i7500.
J na Figura 6(a), temos o HTC Touch com conexo de 64kbps e na Figura 6(b),
o HTC Touch com conexo de 1Mbps.

Figura 5. Mesma aplicao para diferentes tamanhos de tela

Figura 6. Aplicao adaptada de acordo com a conexo ativa

Os testes realizados comprovaram a execuo correta do DroidRichWeb, bem
como da verso final do adaptador.

10

5. Concluso
O projeto contou com algumas etapas de anlise de compatibilidade, estudo e
investigao de solues semelhantes e complementares. Na primeira etapa foi testado o
browser padro do Android para as funcionalidades da Web 2.0 e HTML5 voltadas para
entrada de dados e validao. Assim foi possvel definir quais funcionalidades poderiam
ser implementadas na ferramenta de modelagem. Nesta mesma etapa, trabalhos
relacionados com os assuntos que este projeto engloba foram analisados e estudados a
fim de melhorar a compreenso e atualizao sobre o assunto.
A segunda etapa contou com a gerao da uma biblioteca Javascript para
validao dos campos e definio de quais tipos de dados sero tratados.
A etapa seguinte consistiu na expanso da ferramenta para elementos form e
input serem aceitos e validaes serem atreladas aos componentes apropriados.
A terceira etapa consistiu na implementao do adaptador, desenvolvido a partir
do prottipo criado no projeto anterior.
A quarta etapa tratou da validao da ferramenta e do adaptador, onde foi
desenvolvida uma aplicao, utilizando a ferramenta, para download e upload de
arquivos. Na ultima etapa foi realizada a elaborao do Relatrio final do projeto e a
elaborao do artigo, o qual foi submetido ao Workshop de Trabalhos de Iniciao
Cientfica Webmedia 2012.

11

6. Referncias Bibliogrficas
Android (2012). Plataforma Android. Disponvel em: http://code.google.com/android/.
Acessado em: 15/04/2012.
JQuery (2012) Disponvel em: http://jquery.com/. Acessado em: 15/04/2012.
XML (2012). Disponvel em: http://www.w3.org/XML/. Acessado em 05/04/2012.
Dey, Anind K (2001). Understanding and Using Context. Personal and Ubiquitous
Computing, Vol 5, No. 1, pp. 4-7.
Ceri, Stefano; Daniel, Florian; Matera, Maristella; Facca, Federico M (2007). ModelDriven Development of Context-Aware Web Applications. ACM Transactions on
Internet Technology, Vol. 7, No. 1, Article 2.
Lewis, Harry R.; Papadimitriou, Christos H (1998). Elements of the Theory of
Computation. Prentice Hall.
Li, Peng; Wohlstadter, Eric (2009). Script InSight: Using Models to Explore
JavaScript Code from the Browser View. Web Engineering.

Lecture Notes in

Computer Science, Vol. 5648, pp. 260-274.

Nilsson, Erik G (2009). Design patterns for user interface for mobile applications. In:
Advances in Engineering Software, Vol. 40, N. 12, pp. 1318-1328.
Pastor, Oscar; Valverde, Francisco (2009). Facing the Technological Challenges of
Web 2.0: A RIA Model-Driven Engineering Approach. Web Information Systems
Engineering. Lecture Notes in Computer Science, Vol. 5802, pp. 131-144.
Wroblewski, Luke (2008). Web Form Design: Filling in the Blanks. Editora Rosenfled
Media.
W3School

(2012).

HTML5

input

pattern

Attribute.

Disponvel

em:

http://www.w3schools.com/html5/att_input_pattern.asp. Acessado em 16/05/2012.

W3C (2012). World Wide Web Consortium . Disponvel em: http://www.w3.org/.
Acessado em 16/05/2012.

12

7. Produo Tcnico-Cientfica
Foram produzidos relatrios parciais durante o desenvolvimento do projeto e um
artigo que foi submetido ao Workshop de Trabalhos de Iniciao Cientfica Webmedia
2012.

8. Auto Avaliao do Aluno

Na opinio do aluno, o projeto possibilitou o conhecimento em uma rea de
grande interesse que a de desenvolvimento para dispositivos mveis, em especial para
plataformas Android. Mesmo iniciando o projeto como pesquisador voluntrio, o
trabalho foi de grande valia para a vida acadmica do aluno, o auxiliando em outras
atividades.

9. Avaliao do Orientador
O aluno teve um excelente desempenho nas atividades da iniciao cientfica
sempre cumprindo o que era planejado. Alm da facilidade de investigar novos temas, o
aluno tem boa capacidade de sintetizar os conceitos aprendidos. O aluno possui uma
boa expresso oral e boa capacidade de escrita, transcrevendo de maneira clara e
objetiva aquilo que tem aprendido. Estou bastante satisfeita com o seu trabalho. Alm
disto, o aluno tem boa capacidade de gerenciamento do tempo, cumprindo
adequadamente com suas tarefas acadmicas. A partir de agora iniciaremos um novo
projeto que foi aprovado no edital do PIBIC 2012-2013.

10. Destino do Aluno

No ano de 2012 o aluno ir participar de outro projeto de iniciao cientfica, na
mesma rea, como bolsista PIBIC/CNPq.