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

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

4. 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

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

2

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

3

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.

4

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

5

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 Alternar cores de divs, tabelas, etc, com padres definidos pelo projetista.

Rgba Propriedade para mudar cor de componentes, onde a se refere opacidade.

Animation Principal propriedade do CSS3.

text-shadow 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 Permite manipulao de orientao e alinhamento de forma geral das box.

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

6

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).

7

Figura 2. Viso geral da ferramenta

Figura 3. Viso das opes input

8

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

9

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). Model-

Driven 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.