PROGRAMA INSTITUCIONAL DE INICIAÇÃO CIENTÍFICA (PIBIC) RELATÓRIO PARCIAL DE ATIVIDADES (AGOSTO/2007 A MAIO/2008) Aplicação de Padrões Web em Framework

PROGRAMA INSTITUCIONAL DE INICIAÇÃO CIENTÍFICA (PIBIC) RELATÓRIO PARCIAL DE ATIVIDADES (AGOSTO/2007 A MAIO/2008) Aplicação de Padrões Web em Framework Fernando Henrique Malaquias Drª. Simone Nasser Matos Modalidade: PIBIC; VOLUNTÁRIO. CAMPUS Ponta Grossa, Agosto de 2009

SUMÁRIO 1 TÍTULO... 3 2 RESUMO... 3 3 INTRODUÇÃO... 3 4 MATERIAIS E MÉTODOS... 4 4.1 A Coleção Welie... 4 4.2 World Wide Web Consortium (W3C)... 6 4.3 Java Enterprise Edition (JEE)... 8 5 RESULTADOS PARCIAIS... 9 5.1 Página do Grupo de Pesquisa em Engenharia de Software... 9 5.2 Página do Padrões de Projeto... 13 5.3 Página do Framework de Otimização de Preço de Venda... 14 6 CONSIDERAÇÕES PARCIAIS... 17 7 REFERÊNCIAS BIBLIOGRÁFICAS... 17 APÊNDICE A Interface Gráfica: Área de Aplicação... 19 APÊNDICE B Interface Gráfica: Contexto da Aplicação... 20 APÊNDICE C Interface Gráfica: Contato... 21 APÊNDICE D Interface Gráfica: Ferramentas... 22 APÊNDICE E Interface Gráfica: Metodologia... 23 APÊNDICE F Interface Gráfica: Objetivo... 24 APÊNDICE G Interface Gráfica: Principal... 25 APÊNDICE H Interface Gráfica: Principal... 26 APÊNDICE I Interface Gráfica: Templates... 27

1 TÍTULO FRAMEMK: Um framework para análise, elaboração e otimização de preço de venda. 2 RESUMO Os padrões de interação são utilizados para resolverem problemas comuns que acontecem repetidas vezes na elaboração de sistemas interativos para web. Este relatório descreve a aplicação dos padrões de interface da coleção Welie e também padrões da World Wide Web Consortium (W3C) no desenvolvimento de interfaces para web, programadas com JSP, XHTML e CSS. Palavra-chave: Welie Patterns, W3C, JSP. 3 INTRODUÇÃO A interação do usuário com um sistema desenvolvido para internet é totalmente diferente de uma interação com sistemas desktop. Atualmente os usuários estão menos tolerantes a sistemas complexos. E por essa causa, existe uma preocupação em construir sistemas em que o usuário possa obter informações rapidamente e que seja de fácil interpretação. Welie observou nas aplicações web que muitas delas possuíam a mesma finalidade e desta forma criou um conjunto de padrões de interação o que denominou de Coleção Welie. E por meio disso, foi estudado os padrões de interface descritos por Welie para a construção de uma interface simples e objetiva. Aborda-se não somente os padrões de interface da Coleção Welie, mas também os padrões da World Wide Web Consortium (W3C), e suas linguagens de programação. A linguagem JSP foi utilizada para a interação entre as páginas do sítio. Este relatório tem por objetivo mostrar as técnicas e padrões estudados para a elaboração de interfaces serão utilizadas no desenvolvimento de um Framework para Otimização de Preço de Venda. O relatório está organizado da seguinte maneira: A Seção Materiais e Métodos apresentam os conceitos principais sobre a Coleção Welie, e também

relatam brevemente os critérios da W3C, as linguagens XHTML e CSS e JSP que foram utilizados durante a criação da interface proposta. A Seção Resultados Parciais descreve a aplicação dos padrões da Coleção Welie e W3C para o desenvolvimento da interface. Por fim, a última seção apresenta as considerações parciais deste trabalho. 4 MATERIAIS E MÉTODOS Este trabalho utiliza alguns padrões da Coleção Welie na elaboração das telas de acesso do usuário ao framework. Além disso, aplica alguns conceitos da World Wide Web Consortium (W3C) para a validação da mesma. Foi estudado as linguagens de programação HTML, XHTML e CSS, linguagens padronizadas pela World Wide Web Consortium (W3C) e os padrões de designer da Coleção Welie. 4.1 A Coleção Welie Os padrões representam soluções já definidas para problemas recorrentes, os quais são aplicados no desenvolvimento de sistemas proporcionando uma maior reusabilidade (ALEXANDER 1977; GAMMA et al. 1994). Assim, identifica-se uma coleção de padrões e regras, os quais combinados representam um estilo arquitetural em uma linguagem de padrão (BRAGA, 2003). Os Padrões de Interação são coleções de boas práticas encontradas em interfaces gráficas de um determinado segmento. Por isso, Welie (2009) propôs um conjunto de padrões de interação, reunindo aspectos que tornam um determinado arranjo na interface gráfica padrão reconhecido pelos usuários e adotado pelos projetistas. Segundo Welie (2009), os padrões são definidos pelos elementos ilustrados na Tabela 1. Relata-se também, nessa tabela, a descrição destes elementos. Os elementos relacionados nesta tabela podem ser utilizados em sua totalidade ou não, isso depende da necessidade do projetista durante o desenvolvimento de seu sítio.

Tabela 1. Elementos Propostos para Descrição dos Padrões de Interação (WELIE, 2009) Elemento Nome Problema Descrição Define o pseudônimo para o padrão Informa ao projetista a finalidade e motivação para o uso do padrão Solução Quando Usar Como Porque Propõe uma solução para o problema Ilustra a aplicabilidade do padrão Relata o que precisa ser realizado para a adequação do padrão as necessidades do projetista Descreve a justificativa do uso do padrão Outros Exemplos Ilustra de forma prática o uso do padrão em alguns sítios A coleção Welie é dividida em várias categorias, a saber: User needs, Aplication needs e Context of Design, e dentro dessas categorias existe vários subcategorias, como por exemplo, o User Needs possui subcategorias tais como: Navigating around, Searching, Basic interactions, Dealing with data. Na Tabela 2, ilustra-se um exemplo da utilização do User Needs, da subcategoria Navigating around. Tabela 2. Descrição do Padrão Home Link (Welie, 2009) Elemento Problema Solução Descrição Os usuários precisam voltar a um ponto inicial do sítio. Use um elemento fixo, tais como: o logotipo do sítio, como um link para a página inicial. De www.cnn.com

Tabela 2. Descrição do Padrão Home Link (Welie, 2009) (cont.) Quando Usar Como Porque Outros Exemplos Esta página é geralmente o ponto de partida para a interação. Quando os usuários chegam a uma arbitrariedade página dentro do sítio, eles deverão ser capazes de voltar para a página inicial. Adicione um link para a página inicial (home-page) em cada página. Coloque o link no topo da página e se for caso na parte inferior da tela. Se o sítio tem um logotipo, aplicar no logotipo um link para a home-page também. Caso contrário, basta ligar a home-page utilizando o rótulo home, quer um texto rótulo ou um ícone de uma casa. Certifique-se que a ligação é sempre encontrada no mesmo lugar. Caso o sítio tenha subsitios, você precisar fazer uma distinção entre a raiz home-page e os locais dos subsites. Nesse caso, faça após o local de origem e de fornecer um link para a raiz da home-page. A home oferece uma ligação segura de saída em cada página e sempre na mesma posição. Não importa o quê, os usuários podem sempre voltar a um lugar familiar. Logotipo da identificação do sítio e, portanto, são facilmente escolhidas para voltar à página inicial. Este exemplo do site da Apple mostra a forma como o logotipo Apple é usado como um link para a página inicial. De www.apple.com 4.2 World Wide Web Consortium (W3C) O World Wide Web Consortium (W3C) é um consórcio de empresas de tecnologia, que visa estabelecer padrões para a utilização eficiente da web (W3C 2009). O W3C desenvolve padrões para a criação e a interpretação dos conteúdos para a Web. Sítios desenvolvidos segundo esses padrões podem ser acessados e visualizados por qualquer pessoa ou tecnologia, independente de hardware ou software, como celulares, PDA s, eletrodomésticos, de maneira rápida e compatível com os novos padrões e tecnologias que possam surgir com a evolução da internet.

As orientações elaboradas pelo consórcio têm como objetivo auxiliar o desenvolvimento de páginas, indicando princípios gerais de acessibilidade e as formas ideais de implementação que orientam os desenvolvedores web. Neste trabalho, os conceitos do W3C serão utilizados para a criação da interface, aplicando as linguagens: Cascading Style Sheet (CSS) e Extensible Hypertext Markup Language (XHTML), as quais serão apresentadas sumariamente nas próximas subseções. 4.2.1 Cascading Style Sheet (CSS) Foi desenvolvida para solucionar o problema da HTML, sendo utilizada para separar a linguagem de marcação do seu estilo. Com a utilização da CSS, a HTML é usada somente para marcar e estruturar o conteúdo do documento, deixando a cargo da CSS a tarefa de estilizar o sítio, no qual são declaradas propriedades e valores de estilização para os elementos (tag) da HTML. Essas declarações de estilo, quer sejam estruturadas em um arquivo externo com extensão.css ou declaradas de outros modos, tais como: importadas, ligadas, incorporadas ou in-line, contém todas as regras de estilo para os elementos do documento HTML (Maujor 2009). 4.2.2 Extensible Hypertext Markup Language (XHTML) O Extensible Hypertext Markup Language (XHTML) é uma reformulação da linguagem de marcação HTML (MARCONDES, 2000). Essa substituição muda a descrição do conteúdo Web fornecendo recursos extensíveis, mais ricos e mais poderosos que a HTML. Embora não existam muitas diferenças entre a HTML e a XHTML, a linguagem XHTML combina os elementos de marcação HTML com regras da XML. Esse processo de padronização visa à exibição de páginas Web em diversos dispositivos. A idéia é acessibilidade (W3C 2009).

4.3 Java Enterprise Edition (JEE) O Java Enterprise Edition é um conjunto de especificações publicadas pela Sun e pelo Java Community Process (JSRs), que criam toda a infra-estrutura para o desenvolvimento das aplicações distribuídas corporativas (SAMPAIO, 2007). O modelo de programação JEE é baseado em containeres, que fornecem todos os serviços necessários para a aplicação corporativa. Desta forma, o desenvolvedor escreve menos código, acarretando uma diminuição do tempo gasto para o desenvolvimento, dos riscos de projeto e dos problemas de manutenção. 4.3.1 Java Server Pages (JSP) Uma página JSP é uma página web em código fonte que é dividida em dois objetos, a Requisição (Request) que é feita pelo usuário por meio de um navegador e em seguida é envida a um servidor. No servidor, essa requisição é processada pelo J2EE web contêiner e logo após se gera uma resposta (Response), que é uma página HTML. Essa página é enviada novamente ao navegador do usuário (BOMFIM, 2002; ANSELMO, 2005; SAMPAIO, 2007). A Figura 1 ilustra o funcionamento de uma página JSP, mostrando os objetos Request enviados e os objetos Response recebidos. Figura 1 - Funcionamento de uma página JSP

A linguagem JSP possui diversas diretivas, as quais são elementos que não precisam de solicitações, mas são essenciais na fase de tradução, ou seja, na transformação da página JSP em linguagem HTML. A sintaxe básica é: <% diretiva %> (BOMFIM, 2002; ANSELMO, 2005). As diretivas são divididas em três: Include, Page e Taglib. A diretiva Include é utilizada para incorporar os códigos de um arquivo padrão como páginas HTML, JSP e documento de texto.txt para a página corrente. A diretiva Page traz informações sobre a página JSP como, por exemplo, o tipo, as bibliotecas que serão importadas e a linguagem da página. A diretiva Taglib serve para habilitar uma biblioteca de elementos (tags) personalizadas (ANSELMO, 2005). 5 RESULTADOS PARCIAIS 5.1 Página do Grupo de Pesquisa em Engenharia de Software Esta seção descreve a aplicação dos padrões de interação Welie no desenvolvimento da página do grupo de pesquisa, bem como sua validação. Relata o modo utilizado de atualização o conteúdo da página utilizando arquivos do tipo.txt. A aplicação dos padrões, a validação e a atualização correspondem ao processo proposto. 5.1.1 Aplicando a Coleção Welie e a Validação da Página Por meio da combinação de alguns padrões da coleção Welie, e as especificações da W3C, tais como CSS e XHTML, foi possível criar um sítio, que ilustra a aplicação das tecnologias descritas anteriormente. A Figura 2 ilustra esse sítio.

Meta Navigation Headerless Menu Footer Bar Figura 2 - Página do Grupo de Pesquisa de Engenharia de Software No menu vertical, padrão Headerless Menu, foi definido a prioridade das informações conforme sua relevância, sendo que as de maior importância foram disponibilizadas na parte superior do menu. O padrão de busca foi utilizado, pois a página contém muitos relatórios e informações. No rodapé, padrão Footer Bar, foi adicionado créditos aos alunos que desenvolveram o layout do sítio e a programação, bem como a identificação da aluna que criou a versão inicial da página. Além das aplicações dos padrões descritos anteriormente, estudou-se alguns outros da coleção Welie, dente eles destacam-se: busca (padrão denominado de Search Area), contato (padrão denominado de Comment Box) e mapa do sítio (padrão denominado de Site Map). O padrão contato via formulário representa outro

padrão a ser implementado, o qual permite ao usuário entrar em contato com o grupo, ou então, obter mais informações sobre a pesquisa desenvolvida. Por fim, o padrão mapa do sítio não foi utilizado, pois a estrutura da página não está dividida em vários níveis. Porém, com o aumento dos níveis esse padrão poderá ser aplicado. A página ilustrada na Figura 2 foi elaborada utilizando o padrão CSS contido em um único arquivo, o qual detém todas as formatações a serem usadas. Após a elaboração da página utilizou-se as especificações de validação propostas pelo W3C, tais como: CSS e XHTML. A seguir será descrito o procedimento adotado para alteração do conteúdo da página. 5.1.2 Atualização do Conteúdo da Página Quando se fala em interação humano-computador logo vem à mente interface e como aprimorá-la, almejando um melhor desempenho do usuário. No caso da página do grupo de pesquisa, além dessa necessidade, há um diferencial, de grande importância, mas pouco utilizado: a interação cliente-aplicação. Um cliente é uma pessoa que solicita o desenvolvimento da página, enquanto a aplicação representa a página em si. Para solucionar este problema, utilizaram-se os conceitos de HTML (MARCONDES, 2000), JSP (SAMPAIO, 2007) e arquitetura Model View Control (MVC) (MENDES, 2002; BASS et al. 2003). A HTML é usada neste trabalho com o objetivo de fornecer ao cliente uma maneira de atualização de conteúdo do sítio, utilizando também um arquivo do tipo texto (.txt). Além disso, utilizou-se a linguagem Java Server Pages (JSP), que são páginas web, em linguagem fonte, processadas pelo J2EE Web Container (SAMPAIO, 2007). Ou seja, é uma espécie de servidor web que permite acessar uma página na internet. A Figura 3 mostra um trecho do programa JSP que foi utilizado para o desenvolvimento da página ilustrada na Figura 2. switch(opcao) { // Menu Projeto case 1: {%> <!-- Projeto --> <h2><%out.println("objetivo");%></h2> <h3><%@include file = "conteudo/01.objetivo.txt"%></h3> <% break; } Figura 3 - Trecho do código da página do GPES usando tags JSP

Utilizando algumas especificações da arquitetura MVC, que fornece uma maneira de dividir a funcionalidade envolvida na manutenção e apresentação dos dados de uma aplicação (MENDES, 2002; BASS et al. 2003), foi dividido o conteúdo do sítio. Para a página do grupo, a View representa a implantação utilizando HTML, XHTML e CSS, a Controller foi representada pelos arquivos.txt, que contém o conteúdo a ser inserido ou atualizado na página e exibidos pela View. Por fim, a Model foi descrita pela tag desenvolvida na linguagem JSP. A Figura 4 ilustra a ligação entre a Controller e a Model. Figura 4 - Ligação do entre a Controller e a Model No código da camada Model colocou-se a marcação de JSP <%@include file =... %>, que faz a chamada a um bloco de notas, no qual estão todas as informações sobre o conteúdo a ser atualizado no sítio. Isso foi desenvolvido com o objetivo de melhorar a interação do cliente com a sua página, ficando dispensável a presença de um programador, caso haja necessidade de modificação no conteúdo do sítio. Ocorrendo a necessidade de modificar o conteúdo da página, o cliente necessita abrir um arquivo de texto localizado no servidor de páginas, incluir o conteúdo e salvá-lo, uma vez que a diretiva do JSP faz a ligação com o arquivo, independente de suas informações. Além disso, o arquivo.txt pode ser elaborado em qualquer editor texto, independente do sistema operacional e necessita pouco espaço em disco, pois toda a formatação é controlada pelo CSS (camada View). O código em linguagem HTML inserido no bloco de notas é mínimo, como mostra a Figura 5, sendo necessário, neste caso, somente a marcação de quebra de

linha (</br>). Neste arquivo, a primeira linha corresponde ao título da seção do conteúdo, seguido de uma quebra de linha (</br>) e logo após o texto a ser atualizado ou inserido na página. Título</br> Usuário deve inserir seu texto aqui! Figura 5 - Arquivo Template.txt Desta forma a página ilustrada na Figura 3 foi elaborada com a união de tecnologias como coleção Welie, XHTML, CSS com HTML e JSP, que servirão de apoio para o desenvolvimento de sistemas interativos para web. 5.2 Página do Padrões de Projeto A figura 6 ilustra os padrões de menu vertical, os links são ordenados com ordem de relevância. Utilizando as linguagens CSS para estilização do sítio, e JSP para interação da página. Figura 6 - Página do Padrões de Projeto

5.3 Página do Framework de Otimização de Preço de Venda Esta seção descreve a aplicação dos padrões de interação Welie no desenvolvimento das interfaces, descrevendo quais padrões foram utilizados. A aplicação dos padrões corresponde ao processo proposto. Na confecção da tela de login, ilustrada na Figura 7, utilizou-se os padrões Login e Registration da subcategoria Personalizing, onde o usuário poderá acessar seções exclusivas do sítio. A localização dos campos Usuário (login) e Senha (password) deverão ser de fácil localização, geralmente abaixo do logotipo do sítio. Figura 7- Exemplo de tela de login da Página do Framework A figura 8 mostra uma tela de cadastro que segue o padrão Form. A distribuição dos campos de preenchimento é um campo por linha, para uma melhor visualização do cadastro. Dependendo do nível, pode ser utilizada mais de uma página e também a barra de rolagem. Figura 8 - Exemplo de tela de Cadastro da Página do Framework

Ao realizar algum cadastro em sítios da internet, pede-se o fornecimento de um e-mail, para posteriormente enviar a senha, caso a tenha esquecido. A figura 9 exibe uma tela de recuperação de senha. Figura 9 - Exemplo de tela de recuperação de senha A figura 10 aborda o padrão Form com o exemplo de atualização de um cadastro, mas pode ser utilizado também para inserção de valores para cálculo. Figura 10 - Exemplo de tela de alteração dos dados cadastrados.

A figura 11 ilustra a interface gráfica em que o usuário pode acessar partes exclusivas do sítio ou então personalizá-lo. Como em todo o sistema há a necessidade do usuário sair desse preservando seus dados, então é recomendado ter um botão de sair (logoff) de fácil acesso, de preferência na parte superior direita da página. Figura 11 - Exemplo de tela exclusiva de usuário logado A figura 12 ilustra a tela de inserção de itens, em que possível fazer alteração, atualização e exclusão de itens. Figura 12 - Exemplo de tela para inserção e remoção de itens

Em todas as telas, o aviso de campo obrigatório não preenchido deverá ser alertado ao usuário e de fácil visualização, por meio de símbolos de alerta e indicando quais campos não foram preenchidos. As telas descritas anteriormente são os templates de elaboração da interface gráfica do framework. As telas com seus conteúdos podem ser visualizadas nos Apêndices: A, B, C, D, E, F, G, H e I. 6 CONSIDERAÇÕES PARCIAIS A maior dificuldade durante o estudo foi encontrar materiais em português sobre os padrões da Coleção Welie para consulta e compreensão sobre o assunto. Com relação as recomendações e os padrões da W3C, XHTML e CSS, a busca por materiais tornou-se mais fáceis pois já existem vários livros e referências na internet em português sobre o assunto, além de serem de fácil compreensão. Para uma melhor compreensão de tais padrões, tanto da Coleção Welie como da W3C, durante o decorrer da pesquisa, foram elaborados três sítios para internet, o que permitiu uma melhor assimilação dos padrões abordados. Além disso, este relatório detalhou a elaboração dos templates usados na criação da interface gráfica do framework de otimização de preço de venda. 7 REFERÊNCIAS BIBLIOGRÁFICAS ALEXANDER, C. A Pattern language: towns, buildings, constructions. New York: Oxford University Press, 1977. 1224p. BASS, L.; CLEMENTS, P.; KAZMAN, R. Software architecture in practice. (2003). New York: Addison Wesley. 560p. BRAGA, R. T. V. Um processo para construção e instanciação de frameworks baseados em uma linguagem de padrões para um domínio específico. (2003). 232f. Tese (Doutorado em Ciência da Computação) Universidade de São Paulo, São Carlos. MARCONDES, C. A. (2000) Programando em HTML 4.0 5ª Edição - Editora Érica MAUJOR. Disponível em: http://www.maujor.com/. Acesso em: Jun/2009. MENDES, A. Arquitetura de software: desenvolvimento orientado a arquitetura. (2002). Rio de Janeiro: Campus. 212p. SAMPAIO, C. (2007). Guia do Java Enterprise Edition 5: desenvolvendo aplicações corporativas, Rio de Janeiro: Brasport.

WELIE. (2008). Disponível em: www.welie.com/patterns/. Acesso em: Jul/2009. W3C. (2008). Disponível em: www.w3.org/. Acesso em: Jul/2009.

APÊNDICE A Interface Gráfica: Área de Aplicação A interface ilustrada na Figura A1 mostra as área de aplicação do framework de otimização de preço de venda. Figura A1 Interface Gráfica: Áreas de Aplicação

APÊNDICE B Interface Gráfica: Contexto da Aplicação A interface ilustrada na Figura B1 mostra o contexto pesquisado (modelagem) para o entendimento dos métodos da literatura usados para a formação do preço de venda. Figura B1 Interface Gráfica: Contexto da Aplicação

APÊNDICE C Interface Gráfica: Contato A interface ilustrada na Figura C1 mostra a tela do contato, ou seja, possíveis usuários que desejam receber o aplicativo para teste. Figura C1 Interface Gráfica: Contato

APÊNDICE D Interface Gráfica: Ferramentas A interface ilustrada na Figura D1 mostra uma descrição sobre as ferramentas usadas no desenvolvimento das telas e do aplicativo. Figura D1 Interface Gráfica: Ferramentas

APÊNDICE E Interface Gráfica: Metodologia A interface ilustrada na Figura E1 mostra uma descrição sobre a metodologia que será usada no desenvolvimento do aplicativo. Figura E1 Interface Gráfica: Metodologia

APÊNDICE F Interface Gráfica: Objetivo A interface ilustrada na Figura F1 mostra o objetivo do projeto do framework para otimização de preço de venda. Figura F1 Interface Gráfica: Objetivo

APÊNDICE G Interface Gráfica: Principal A interface ilustrada na Figura G1 mostra a opção Principal do framework para otimização de preço de venda. Figura G1 Interface Gráfica: Principal

APÊNDICE H Interface Gráfica: Principal projeto. A interface ilustrada na Figura H1 mostra os resultados atingidos com o Figura H1 Interface Gráfica: Resultados

APÊNDICE I Interface Gráfica: Templates A interface ilustrada na Figura I1 permite que os templates gerados possam ser abaixados. Os templates foram descritos na Seção 5 deste trabalho. Figura I1 Interface Gráfica: Templates