usabilidade de sistemas web com o uso de frameworks para

Departamento de Computação – Universidade Federal de São Carlos (UFSCar)Caixa Postal 676 – 13.565-905 – São Carlos – SP – Brasil

Autor para correspondência: [email protected], [email protected]

ISSN 2316-2872T.I.S. São Carlos, v. 1, n. 1, p. 54-63, jul. 2012

©Tecnologias, Infraestrutura e Software

Usabilidade de sistemas web com o uso de

frameworks para aplicações ricas para a internet:

um estudo de caso

Rodolfo Vendrasco Tacin, Sergio Donizetti Zorzo

Abstract: Usability in web applications has become more important, given the scope and diversity of users. This paper presents an analysis

of the concept of Rich Internet Applications (RIA) associated with the Java language, seeking to increase the usability of applications develo-

ped for the web platform with employment components that make use of this concept. We present a case study that includes the development

of an interface of an Academic System, with the use of certain tools in the RIA concept, and usability aspects are analyzed for this case study.

Keywords: usability, RIA, web application

Resumo: Usabilidade em aplicações para a web ganhou importância, dado o alcance e diversidade dos usuários .Este trabalho apresenta uma análise do conceito de Rich Internet Applications (RIA) associado à linguagem Java, buscando incrementar a usabilidade em aplicações desenvolvidas para a plataforma web com o emprego de componentes que fazem uso de tal conceito. Apresentamos um estudo de caso que contempla o desenvolvimento de uma interface de um Sistema Acadêmico, com a utilização de algumas ferramentas dentro do conceito RIA, e os aspectos de usabilidade são analisados para esse estudo de caso.

Palavras-chave: usabilidade, RIA, aplicação web

I. INTRODUÇÃO

É indiscutível que a utilização de técnicas da Engenharia de Software para o desenvolvimento de um projeto web traz gran-des benefícios para o seu sucesso no mercado. Isso porque a aplicação de tais conceitos que passam pelo levantamento de requisitos, análise dos casos de uso, desenvolvimento estrutu-rado do banco de dados e do código-fonte favorecem, dentre outros aspectos, um bom funcionamento técnico da aplicação e a facilidade em sua manutenção.

No entanto, num contexto globalizado e baseado em concei-

à navegabilidade e usabilidade, as boas práticas no desenvol-

produto atinja as expectativas do usuário. É necessário que a -

sente funcionalidades que aproximem das experiências obtidas

parte das aplicações desktop (locais), principalmente, sistemas operacionais.

Segundo Deitel (2008), apesar do crescimento tecnológico da internet, a usabilidade de aplicações web tornou-se obsoleta em relação às aplicações desktop, pois a cada interação do usu-

ário na aplicação resulta em um período de espera. Isso porque em arquiteturas tradicionais para web, desprovidas de recursos

processamento, toda a página web (aplicação) é recarregada e apresentada estaticamente ao usuário. Ou seja, as informações obtidas a partir de uma solicitação, são apresentadas apenas para leitura.

Essa falta de interatividade prejudica a usabilidade, o que pode desencadear a desmotivação de utilização da aplicação por parte dos usuários e, consequentemente, gerar grandes

-cutado pela equipe de desenvolvimento em outros aspectos da aplicação, como as boas práticas da engenharia de software, citadas anteriormente.

O objetivo deste trabalho é apresentar um estudo de caso no qual é avaliada a usabilidade de um projeto acadêmico, deno-minado por SICA (Sistema Integrado de Controle Acadêmico), após o uso de componentes para aplicações ricas para a internet (RIA) associados à linguagem JAVA.

Para isso, na seção II, é apresentada a aplicação SICA, obje-to de estudo para este trabalho. Nesta apresentação, são levan-tados os fatores que motivaram o seu desenvolvimento, dife-

Usabilidade de sistemas web com o uso de frameworks ara aplicações ricas para a internet: um estudo de caso

55 T.I.S. 2012; 1 (1): 54-63

renciais que o software oferece para o mercado e quais são as suas principais características funcionais e técnicas.

Na seção III, é feita uma análise de alguns componentes e frameworks disponíveis no mercado para facilitar o desenvol-

-das, dentro do conceito denominado por Aplicações Ricas para a Internet (Rich Internet Applications) ou simplesmente RIA. Ainda nesta seção, por meio da implementação destes compo-nentes no SICA, é criado um modelo de interface com recursos

-veis soluções que são agregadas à aplicação.

A seção IV apresenta o conceito de usabilidade em uma aplicação web. Além disso, através de um método, é feita uma avaliação de usabilidade no SICA baseada em funcionalidades, as quais foram incrementadas com o uso de frameworks RIA.

Na seção seguinte, são apresentados outros tipos de metodo-logias utilizadas para a construção de interfaces e as vantagens e

são levantados os resultados e conclusões obtidas neste estudo.A partir desta implementação, com o uso de frameworks

RIA em uma aplicação, espera-se alcançar elementos que com--

riência do usuário em fatores ainda impactantes em aplicações web, tais como: controle e validação de informações, balancea-mento do processamento entre servidor-cliente, aumento da fa-cilidade de uso e da interatividade do usuário com a aplicação.

II. ESTUDO DE CASO: SISTEMA INTEGRADO DE CONTROLE ACADÊMICO (SICA)

O Sistema Integrado de Controle Acadêmico (SICA) é um

para o aumento do desempenho do aluno no processo pedagó-gico a partir da facilitação da troca de informações entre escola, aluno e pais.

Segundo López (2002), a participação dos pais é fundamen-tal no auxílio à atuação pedagógica escolar. Pois, os pais podem promover as atividades extracurriculares propostas pela esco-la; valorizar as habilidades e conhecimentos oferecidos pelos

fazer o acompanhamento dos resultados obtidos pelos alunos,

de resultados insatisfatórios, etc.No entanto, nos tradicionais modelos de acompanhamen-

to escolar, pais e responsáveis pedagógicos tomam ciência de questões relacionadas à desempenho e comportamento do alu-

-tuição de ensino. Fato que prejudica o processo de reversão de situações adversas às propostas curriculares estalecidas pela es-cola, dirigentes e governo. Em muitos casos, as perdas sofridas pelo aluno pelo seu mau desempenho escolar podem impactar em todo o seu processo cognitivo, trazendo consequências ne-gativas até no âmbito social.

Por outro lado, a atual conjuntura sócio-cultural, na qual a disponibilidade de tempo das pessoas passou a ser um fator

-mento pedagógico com o aumento de visitas à escola.

Diante desta constatação, o SICA, uma aplicação acadêmica desenvolvida para o ambiente web, surge como forma de suprir esta necessidade. Isto porque, com este aplicativo, é possível disponibilizar informações referentes ao aluno e à escola em pouco tempo, tão antes quanto possível. E, dessa forma, pro-mover a participação permanente dos pais em todo o processo educacional.

Com o SICA é possível oferecer vários diferenciais no mer-cado, como o canal direto com os pais, através da troca de men-sagens entre as partes envolvidas no processo educacional, o acesso por meio de dispositivos móveis (celulares), a facilidade de divulgação de resultados de trabalhos escolares e provas,

ensino-aprendizagem.O SICA foi desenvolvido e implantado no sistema operacio-

nal Linux. O PostgreSQL foi o sistema de gerenciador de banco de dados escolhido e como servidor de aplicação, foi utilizado

A linguagem de programação JAVA (JEE6 e Javabeans) foi adotada para a implementação do sistema através da IDE Ne-tbeans v6.8.

Também, foi adotada a arquitetura que segue o padrão de projeto MVC (Model-View-Controller) com uso do framework JSF 2.0, e os padrões de projeto Façade e DAO, com o JPA 2.0 (EclipseLink), API de mapeamento objeto-relacional. Esta esco-lha permitiu o desenvolvimento de interface adicional para aces-so ao sistema, via dispositivo móvel, de forma mais organizada.

Para complementar toda esta estrutura técnica, foram utili-zados componentes para aplicações ricas para a internet (RIA). Dentre os quais, podemos citar o Jquery; o Primefaces, uma biblioteca de componentes para o JSF 2.0, além do próprio fra-mework JSF 2.0. Também, foi utilizada a linguagem de estilos CSS, que dá suporte aos frameworks RIA. Tudo, com o intuito de permitir o funcionamento de recursos avançados de interfa-ce, manter a alta produtividade no processo de desenvolvimen-to e estabelecer um alto padrão de usabilidade da aplicação.

III. IMPLEMENTAÇÃO DE FRAMEWORKS RIA NO SICA

Aplicações ricas para a internet ou simplesmente RIA é um conceito de aplicação web em que são apresentadas característi-cas e funcionalidades de softwares tradicionais do tipo desktop (locais). Embora tenha sido iniciado por meio de outras deno-minações anteriores, somente por volta do ano de 2002, esse conceito passou a ser amplamente aceito.

Em suma, RIAs são caracterizadas pelo fato de parte de seu processamento, principalmente questões relacionadas à interface, ser transferido do servidor web ao navegador da internet e pelo o uso intenso de AJAX (Asynchronous Javascript And XML). Segundo Borba (2006), AJAX é uma arquitetura que utiliza-se de tecnologias para o desenvolvimento da apli-cação web para a parte cliente e para a parte do servidor. Em

-todologia de utilização estruturada das tecnologias Javascript e XML, a partir da qual é possível que um cliente faça solicita-ções de informações assíncronas a um servidor web.

Rodolfo Vendrasco Tacin e Sergio Donizetti Zorzo

T.I.S. 2012; 1 (1): 54-63 56

Há cerca de três anos atrás, as tecnologias mais utilizadas para tornar as aplicações ricas eram de difícil implementação e extremamente custosa às empresas de desenvolvimento de softwares, pois demandavam um estudo de funcionamento do sistema em várias plataformas de aplicação. Além disso, a in-serção de funcionalidades de interface avançadas era baseada em linguagens que fugiam do escopo do projeto e exigiam do programador alto nível de conhecimento.

Com a evolução da internet e o surgimento dos frameworks RIA, foi possível reverter essa situação, de forma a incorporar valor à aplicação por meio do enriquecimento de sua interface de

-des diante da diversidade de navegadores de internet do mercado.

Um framework é um conjunto de códigos que geram fun-cionalidades comuns à vários projetos com um alto grau de compatibilidade dentre os vários navegadores de internet. Em geral, um framework oferece soluções parcialmente prontas e podem ser utilizadas de maneira simples, pois escondem a complexidade do código fonte. Em muitos casos, apenas com a

nalidades avançadas de interface e agregadas às tecno logias modernas como CSS e AJAX, dentro do contexto da web 2.0.

A seguir, é apresentada implementação de frameworks RIA para a construção da camada de apresentação do Sistema Inte-

do código fonte apresentados são partes integrantes do proje-to e ilustram o potencial dos frameworks RIA aplicados, bem como o seu princípio de funcionamento.

Para este estudo, foi selecionado um exemplo de cada tecno-logia adotada como forma de ilustrar os resultados propiciados com a sua implementação.

A. Cascading Style Sheets (CSS)

Para tornar o projeto SICA atrativo do ponto de vista visual,

contextualizassem com o nicho de aplicação do software. Po-

-nentes visuais da página web da aplicação. Além de tudo, cada página da aplicação deveria ser programada estruturalmente, o que geraria declínio da produtividade.

Para resolver estes problemas, foi adotado o JSF 2.0. Com essa decisão, foi possível separar o projeto em camadas e cons-truir um template para o sistema. Com o emprego do template, foi resolvido o problema de estruturação das páginas do SICA,

para reuso na aplicação.Na construção deste template, bem como no ajuste dos com-

ponentes visuais particulares de cada página web, foi utilizado o CSS. Isto foi possível porque o JSF possui suporte a CSS, mantendo seus arquivos dentro do pacote resources, na camada de apresentação do padrão de projeto MVC.

O CSS (Cascading Style Sheets) é uma linguagem de estilos desenvolvida pela W3C (World Wide Web Consortlum) com o

separadamente da estrutura do documento (Deitel, 2008). Isto

de uma aplicação web, como fonte, espaçamento, cores e alinha-mento, são colocadas separadas da informação a ser apresentada.

-

de toda uma estrutura de apresentação de uma aplicação web. Dessa forma, se a apresentação de uma página web for inteira-

-dor poderá simplesmente trocar esta folha de estilos por outra, para que a aparência de sua página ou conjunto de páginas se-

-gunda versão, com a terceira em desenvolvimento. E, pelo fato da maioria dos navegadores admitirem a maior parte desta es-

crescido de forma expressiva.Apesar de não ser um framework RIA, o uso de folhas de

estilos garante que aplicações web possam ser desenvolvidas

linguagem, a manipulação de elementos na camada de apresen-tação é bem mais controlada, proporcionando vários recursos que aumentam a experiência de interação dos usuários.

A Listagem 1 mostra um fragmento de código CSS, que de-

projeto, foi necessário criar referência do arquivo CSS dentro template, desenvolvido com a linguagem XHTML (eXtensible

Hypertext Markup Language).O resultado obtido a partir desta implementação é mostrada

na Figura 1.

B. Jquery

O Jquery é um framework desenvolvido para aplicações web. Seu principal objetivo é garantir que desenvolvedores es-crevam menos código e obtenham produtividade de forma sim-ples e ágil em recursos de interface rica para a web (RIA). Em outras palavras, o Jquery permite que programadores introdu-zam componentes Javascript escrevendo pouco código e obten-do resultados mais elaborados. Isto, sem ter a preocupação em buscar a compatibilidade de implantação diante dos diferentes navegadores do mercado.

O Jquery conta com uma biblioteca de componentes, cha-mados de plugins, que vão desde efeitos visuais até controle de dados via Ajax. Estes componentes podem ser usados em dife-rentes plataformas, com qualquer linguagem de programação disponível para a web.

Ademais, este framework é disponibilizado como software livre1. Para utilizá-lo, basta anexá-lo ao projeto sem qualquer custo, independentemente se for para uso pessoal ou comercial.

-do, a diversidade de componentes, a excelente documentação e

de melhoria e ampliação de tal projeto, têm garantido ao Jquery

para web. Por essa razão, sua utilização está em crescimento, 1. Pode ser encontrado em <http://www.jquery.com>


57 T.I.S. 2012; 1 (1): 54-63

sendo adotado, inclusive, em projetos web de grande porte. Ou-tro motivo que tem contribuído com a sua popularização, é fato de aproximar-se das declarações CSS. Isto permitiu facilitar o

No SICA, o Jquery foi utilizado para a criação de máscaras para os campos de entrada de dados, apesar do framework

PrimeFaces, utilizado na aplicação, também oferecer a mes-ma funcionalidade.

Para isso, foi necessário adicionar os arquivos Jquery na pasta resources/js e criar as declarações no cabeçalho das pá-ginas da aplicação ou template, conforme ilustra a Listagem 2.

arquivo ‘marcara.js’, apresentados na Listagem 3. Nesses parâ-

e formato desejado para a apresentação dos dados inseridos nele.A Figura 2 mostra um dos resultados obtidos a partir desta

de cadastro de alunos.

|__ . __ . __ - _

C. Java Server Faces (JSF)

Segundo Deitel (2008), Java Server Faces (JSF) é um fra-

de usuário de uma aplicação. Além disso, separa toda a lógica de negócio da aplicação web de sua apresentação. Muito em-bora, para alguns autores, JSF é mais do que um framework. É

padronizar a criação de um framework para a camada de apre-sentação de uma aplicação web.

De qualquer forma, o JSF foi aplicado ao SICA com o obje-tivo melhorar a produtividade do processo de desenvolvimen-to, bem como facilitar a manutenção da aplicação, promovendo

garantida pelo suporte a CSS, criação e uso de templates, vali-dação e conversão de dados, integração com o banco de dados, suporte a AJAX, dentre outras funcionalidades.

Apesar de apresentar vários recursos de interface, como fra-mework, o JSF ainda é pobre. Por essa razão, muitos projetos foram desenvolvidos de forma a estender as funcionalidades não contempladas. Estes projetos, chamados de bibliotecas, ganharam destaque pela variedade de recursos que disponibili-

-Faces, MyFaces Tomahawk, IceFaces, PrettyFaces e Woodsto-ck. Dentre as bibliotecas utilizadas no SICA, temos o PrimeFa-ces, descrita a seguir.

D. PrimeFaces

O PrimeFaces é uma biblioteca para JSF desenvolvida pelo grupo Prime Technology2. Apesar de ser menos popular e me-nos robusta do que a biblioteca RichFaces, desenvolvida pela

2. Fonte: <http://www.primefaces.org>.

Figura 1. Interface de entrada de dados do SICA.


T.I.S. 2012; 1 (1): 54-63 58

RedHat/JBoss3, o PrimeFaces saiu na frente na adequação ao JSF 2.0 (JSR-314), oferecendo uma variedade de componentes indisponíveis no RichFaces até a conclusão deste estudo.

O PrimeFaces está em sua versão 2.2 e apresenta mais de 90 componentes caracterizados pela leveza e simplicidade de uso em projetos Java Web. Dentre os recursos, estão as funciona-lidades de calendário, fotos, formulários, requisições, uploads, caixas de mensagens, paginação, etc.

para os erros, alertas, informativos e paradas críticas foi utili-zado no SICA. Uma das aplicações realizada com este recurso, foi para a exibição de mensagens no formulário de login, onde o intuito era manter o usuário informado sobre a resposta da requisição ‘entrar no sistema’, apresentando mensagens de erro de nome de usuário, senha ou a falta de preenchimento de um desses campos.

Em aplicativos Java Web, antes de utilizar um framework, deve-se mapear a Servlet. Este procedimento é mostrado na Listagem 4.

Pelo fato do SICA utilizar como padrão a camada de apre-sentação baseada em Facelets, é necessário a inclusão da na-mespace, que referencia o PrimeFaces na página da aplicação, como apresenta a Listagem 5.

integração dos recursos do PrimeFaces no projeto. Nesta etapa, o Netbeans auxilia o programador, mostrando todos os compo-nentes disponíveis de um framework a partir da digitação de

Como pode-se observar na Listagem 6, as mensagens de

visualizadas através da tag <p:messages />.Com a inserção deste componente, o recurso já estará fun-

cionando nesta página. Todas as mensagens de erros ou qual-quer outro evento da aplicação, serão reportados por meio desta tag

(div), denominada no projeto por “msg_erro”.Obviamente que toda essa funcionalidade só é possível de-

vido ao uso do JSF, o qual dá suporte ao funcionamento do PrimeFaces, que por sua vez, esconde toda a complexidade de exibição desta mensagem.

O resultado desta implementação é demonstrado na Figura 3.

IV. USABILIDADE EM APLICAÇÕES WEB

De acordo com a norma ISO 9241-1 (International Organi-zation for Standardization), usabilidade consiste na “amplitude a qual um produto pode ser utilizado por certos usuários para

em um certo contexto de uso” (Díscola, 2004). Paralelamente, no dicionário de língua portuguesa (Michaelis, 1998), o termo usabilidade é a “facilidade com a qual um equipamento ou 3. Fonte: <http://www.jboss.org/richfaces>.

programa pode ser usado”. Sob esta perspectiva e dentro do

podemos dizer que a usabilidade é um atributo fundamental por descrever a qualidade de interação dos usuários com uma deter-minada aplicação através de sua interface.

de grande importância no desenvolvimento de aplicações com-putacionais. Isto porque, um utilizador pode rejeitar o uso da aplicação, mesmo que esta esteja bem concebida em termos de funcionalidades, caso a usabilidade não seja boa.

metologias de avaliação. Para Shackell (1986), quatros parâmetros são utilizados para

atitude do usuário do sistema. Nesta mesma direção, Smith e Mayes (1996) apresentam três atributos: facilidade de aprendi-zagem, facilidade de utilização e satisfação do usuário na utili-zação do sistema.

Hix e Hartson (1993) colocam a usabilidade relacionada

usuário diante dela.Segundo Nielsen e Loranger (2007), a qualidade de usabi-

lidade de uma aplicação web está associada à avaliação dos seguintes tópicos: facilidade de aprendizado, facilidade de lem-

desenvolvimento de tarefas, baixa taxa de erros ou erros que não comprometam a integridade da aplicação e a satisfação subjetiva do usuário.

-res. Todas valorizam a percepção do usuário diante da apresen-tação da aplicação por meio de sua interface, além da facilidade de aprendizagem.

A. Metodologia de Avaliação de Usabilidade

Existem várias metodologias empregadas para mensurar a

da avaliação e podem requerer ou não a participação de usuá-rios representativos. De acordo com o método, podem ser con-siderados: o tempo de execução de cada tarefa, o levantamento estatístico de erros, questionários, etc.

Dentre os principais métodos, estão a Avaliação Heurística, -

lidade.Neste estudo, foi utilizado o método Percurso Cognitivo pelo

fato de não necessitar da participação de usuários representati-vos, ou seja é um método analítico e por fragmentar o processo com a avaliação de cada tarefa disponível na aplicação. Isso possibilitou a avaliação restrita à funcionalidade enriquecida com o uso de um framework RIA.

O método do Percurso Cognitivo tem por objetivo identi--

face por meio da exploração da aplicação. Isto é, o avaliador, representando o usuário, irá descobrir as funcionalidades da aplicação por tentativas e erros, de acordo com a necessidade de utilização.


59 T.I.S. 2012; 1 (1): 54-63

Para isso, cada um dos avaliadores recebem um conjunto de -

do ações mais frequentes e outras mais críticas.Após o processo de exploração, eles irão descrever quais fa-

proporcionada pela interface. Isso, baseado em quatro pontos de análise ou perguntas: como os usuários irão conhecer qual o resul-tado querem alcançar; como os usuários irão saber que uma ação está disponível; como os usuários irão saber qual ação é adequada para o resultado que estão tentando obter e; como os usuários irão saber se as coisas estão indo bem depois da ação (Andrade, 2005).

Por não requerer a participação de usuários representativos, a aplicação deste método é barata, permitindo o seu uso por vá-rias vezes num mesmo projeto. Além do mais, sua metodologia é bem simples, baseando-se em apenas quatro questões a serem respondidas. Outro aspecto interessante é que, com o uso deste método, os custos com treinamentos de uma aplicação tendem a diminuir, já que a mesma é elaborada de forma a permitir a exploração dos recursos e funcionalidades de forma intuitiva.

Em contrapartida, apesar de fácil aplicação, o método é muito trabalhoso. Pois, para cada funcionalidade, é necessário

uso neste trabalho, pois apenas uma funcionalidade é avalia-da como forma de ilustrar os benefícios da aplicação de fra-meworks RIA em um projeto web.

V. DIFERENCIAIS DO USO DE FRAMEWORKS RIA

Além dos frameworks RIA, estão disponíveis no mercado várias tecnologias para a construção de interfaces ricas.

Amaral e Rodrigues (2007), em seu estudo, propõem o uso direto das linguagens Javascript, XML e CSS, as quais são as-sociadas à linguagem HTML (HyperText Markup Language) como forma de obter melhores resultados em aspectos de usa-bilidade.

Entretanto, tais linguagens tornam o processo de desenvol-vimento extremamente trabalhoso, complexo e custoso às em-presas de desenvolvimento de aplicações web. Pois, na maior parte dos casos, existem poucas equipes de desenvolvimento que fazem reuso dos trabalhos elaborados com esta linguagem

contar o desvio de foco no trabalho da equipe de desenvolve-dores, a qual poderia se deter em reunir esforços à questões relacionadas ao domínio de negócio em questão.

Ainda, segundo Amaral e Rodrigues (2007), o uso direto da linguagem Javascript tornou o gerenciamento da aplicação complexa à medida que a mesma atinge dimensão considerá-vel. Esse fato torna o processo de manutenção da aplicação muito difícil.

O uso dos frameworks RIA facilita a manutenção e o cres-cimento da aplicação. Isso porque, apesar de utilizar-se da tecnologia AJAX, encapsula o código fonte dos componentes de interface. Assim, a produtividade obtida com o uso dos fra-meworks é substancialmente maior do que com o uso direto da linguagem Javascript/AJAX.

Ademais, a diferença da quantidade de código entre os pro-jetos que utilizam frameworks, como o SICA e projetos que fa-zem uso direto de javascript é muito grande Por exemplo, com o JSF 2.0, que possui AJAX nativo, o código para requisições assíncronas se restringe a uma linha de código. Em contraparti-da, com o uso direto do Javascript, esta quantidade é ampliada

60

Figura 3. Exibição de mensagem de erro na tela de login com o uso do PrimeFaces.


T.I.S. 2012; 1 (1): 54-63 60

VI. CONCLUSÃO

A partir deste estudo, podemos concluir que o uso de frameworks RIA traz grandes benefícios para o desenvolvimento de aplicações web, principalmente, na plataforma Java EE. Isso pode ser tradu-

desenvolvimento aliado à melhora da usabilidade e interatividade.Além disso, como muitos componentes estão disponíveis no

mercado e, a maior parte deles é disponibilizada de forma gra--

ções web com relação às aplicações desktop tendem à diminuir com o tempo. Com isso, as plataformas preparadas para o uso de tecnologias RIA irão contar com ampla expansão no mercado.

disponibilidade da aplicação por parte de seus usuários e pelo avanço da banda larga à maior parte dos usuários web.

Em suma, as aplicações RIA garantem a construção de in-

forma simples, as quais garantem a facilidade de uso e apren-dizado. No SICA, pudemos evidenciar este fato com a inserção de elementos ligados ao contexto de uso do sistema, como por exemplo a lousa, onde são exibidos dados do sistema por meio de folhas de estilo (CSS) e com a avaliação de usabilidade rea-lizada com o caso de uso cadastrar aluno.

O PrimeFaces trouxe interatividade com recursos de simples implantação, como pudemos evidenciar através das mensagens de erro. Com uma gama de mais de 90 componentes, incluindo

(galerias), as suas possibilidades são variadas, promovendo uma melhora de usabilidade e interatividade independente do nicho de aplicação do sistema web.

Com o uso do JSF 2.0, pudemos garantir a validação de in-formações na parte cliente. Por meio da qual, só é possível o en-vio das informações do cliente ao servidor, se o campo estiver preenchido. Além disso, o Jquery minimizou a possibilidade de envio de informações fora do formato padronizado através da

Também, o recurso AJAX, nativo na JSF 2.0, promoveu a

desempenho do sistema fosse sensivelmente ampliado, além de não demandar preocupações de compatibilidade entre os nave-gadores de internet disponíveis no mercado ou aprendizado de outras linguagens para suprir as limitações do HTML.

Em estudos futuros, esta produtividade de desenvolvimen-to com frameworks RIA pode ser estendida aos dispositivos móveis, como os celulares e smartphones. Já existem projetos nesta área, como o TouchFaces, da Prime Technology. No en-tanto, são projetos modestos que ainda mantêm várias lacunas a serem exploradas.

REFERÊNCIAS BIBLIOGRÁFICAS

Aplicações Web com Ajax, Disponível em: <http://www.fundanet.br/cursos/tc_ admin/nelson_raphael.pdf>. Publicado em 2007. Acesso em: 29 out. 2010.

ANDRADE, A. L. L. Avaliação Heurística de Usabilidade de Interfaces no Jornalismo online: um estudo de caso do JB Online, Disponível em: <http://www.poscom.ufba.br/arqui-

Andrade.pdf>. Publicado em 2005. Acesso em: 22 set. 2010.BORBA, F. E. AJAX: Guia de Programação. São Paulo: Érica,

2006.DEITEL, P.; DEITEL, J. Ajax, Rich Internet Applications e De-

senvolvimento Web para Programadores. São Paulo: Pear-son Pretince Hall, 2008.

DÍSCOLA JÚNIOR, S. L. Processo de planejamento da reen-genharia de software guiado por avaliação de usabilidade. Dissertação (Mestrado Ciência da Computação) – São Car-los: Universidade Federal de São Carlos, 2004.

HIX, D.; HARTSON, H. R. Developing User Interfaces: En-suring Usability Through Product and Process. New York: John Wiley & Sons Ltd, 1993.

LÓPEZ, J. S. Educação na família e na escola. O que é, como se faz. São Paulo: Loyola, 2002.

MICHAELIS Moderno Dicionário da Língua Portuguesa. São Paulo: Melhoramentos, 1998.

Usabilidade na web. Tradução: Edson Fumankiewics & Carlos Schafranski. Rio de Janeiro: Elsevier, 2007.

SHACKELL, B. People and Computers: Designing for Us-ability. Proceeding of the Second Conference of the British Computer Society. University of York, 1986.

SMITH, C.; MAYES, T. Telematics Applications for Education and Training Communities

Tabela 1. Avaliação de usabilidade do caso de uso Cadastrar Aluno.

Aspecto Avaliação

Clareza do resultado a ser atingido

A apresentação do formulário proporciona clareza de seu objetivo, visto que todas as informações requeridas são apresentadas numa mesma interface (tela) de forma organizada e contextualizada.

Recursos disponíveisCampos que não são necessários para o preenchimento são desabilitados com cores diferenciadas (CSS) ou mesmo com a ocultação do recurso.

Clareza de utilização do recurso

Com o auxílio das máscaras criadas com Jquery, a possibilidade de falha ou a falta de padronização dos

Mensagens claras de ações do sistema

Para cada informação errada no formulário, é apresentada uma mensagem de erro (do lado do campo)

cumprimento da tarefa. Independentemente do entendimento, a localização da mensagem auxilia na correção. Além disso, o uso de cores diferenciadas ajuda a destacar a mensagem de erro (CSS).


61 T.I.S. 2012; 1 (1): 54-63

#topo {

position:relative;

top:10px;

left:25px;

width:940px;

height:117px;

background-image:url(../images/banner_top.png);

}

#menu_principal {

position:relative;

top:80px;

width:640px;

height:34px;

}

#lousa {

position:absolute;

width:228px;

height:70px;

left:670px;

top:35px;

color:#FFF;

font-size:11px;

line-height:13.5px;

text-align:left;

}

#menu_secundario {

position:relative;

width:940px;

height:37px;

left:25px;

top:20px;

background-image:url(../images/menu_secundario.png);

background-repeat:no-repeat;

}

...

Listagem 1. Fragmento de código para a construção da interface de entrada de dados.

<h:head>

...

<h:outputScript name=”js/jquery-1.4.2.min.js” />

<h:outputScript name=”js/jquery.maskedinput-1.2.2.min.js” />

<h:outputScript name=”js/mascara.js” />

<h:outputScript name=”js/maskMoney.js” />

...

</h:head>

Listagem 2. Inserção do componente Jquery no projeto


T.I.S. 2012; 1 (1): 54-63 62

$(document).ready(function() {

jQuery(function($){

$(‘#formDados\\:cpf’).mask(“999.999.999-99”);

$(‘#formDados\\:rg’).mask(“99.999.999-*”);

$(‘#formDados\\:cepDigitado’).mask(“99999-999”);

$(‘#formDados\\:telefoneres’).mask(“(99) 9999-9999”);

$(‘#formDados\\:telefonetrab’).mask(“(99) 9999-9999”);

$(‘#formDados\\:celular’).mask(“(99) 9999-9999”);

$(‘#formDados\\:dtnascimento’).mask(“99/99/9999”);

$(‘#formDados\\:renda’).maskMoney({symbol:”R$”,decimal:”.”,thousands:””});

$(‘#formDados\\:dtadmissao’).mask(“99/99/9999”);

$(‘#formDados\\:dtrescisao’).mask(“99/99/9999”);

$(‘#formDados\\:anoletivo’).mask(“9999”);

$(‘#formDados\\:data’).mask(“99/99/9999”);

$(‘#formDados\\:hora’).mask(“99:99”);

$(‘#formDados\\:datainicial’).mask(“99/99/9999”);

});

});

mascara.js’

<servlet>

<servlet-name>Resource Servlet</servlet-name>

<servlet-class>org.primefaces.resource.ResourceServlet</servlet-class>

<load-on-startup>1</load-on-startup>

</servlet>

<servlet-mapping>

<servlet-name>Resource Servlet</servlet-name>

<url-pattern>/primefaces_resource/*</url-pattern>

</servlet-mapping>

web.xml para o PrimeFaces

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/

TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”

xmlns:h=”http://java.sun.com/jsf/html”

xmlns:p=”http://primefaces.prime.com.tr/ui”> <h:head>

...

Listagem 5. Fragmento de código que mostra a inserção do componente


63 T.I.S. 2012; 1 (1): 54-63

<div id=”msg_erro” align=”center”><p:messages/></div>

...

<h:form id=”formLogin”>

<table class=”campos_login”>

<tr>

<td height=”30px” style=”padding-right: 13px”>

<h:inputText id=”nome” value=”#{LoginManagedBean.usuario.nomeusuario}”

class=”nomeUsuario” maxlength=”10” required=”true” requiredMessage=”O campo ‘nome’

é obrigatório.” />

</td>

</tr>

...

</table>

</h:form>

Listagem 6. Fragmento de código para a apresentação de erro na página de login.

usabilidade de sistemas web com o uso de frameworks para

Documents