Grupo de Aplicações para a Web Pet Ciência da Computação

Transcrição

1 Universidade Federal de Santa Maria UFSM Departamento de Eletrônica e Computação Alunos: Cássio Forgiarini Martins Leandro Ramos de Oliveira Marília Guterres Ferreira Patrick Pivotto Viera Disciplina: Qualidade de Software Período: 2006/01 s: cassio@inf.ufsm.br leandroo@inf.ufsm.br marilia@inf.ufsm.br patrix@inf.ufsm.br Grupo de Aplicações para a Web Pet Ciência da Computação O Grupo: A computação é uma área em acelerado processo de evolução, tendo experimentado um assustador crescimento nas últimas décadas, dificilmente verificado em outra área tecnológica. Além disso, com o advento das redes de computadores, o uso de microcomputadores vem sofrendo mudanças de caráter profundo, motivadas pelo constante desenvolvimento da Internet. A Internet tem como principal característica o rápido acesso às informações, e o webdesigner é o responsável em aliar um visual bonito, atraente aos olhos dos visitantes e que seja condizente com a proposta do projeto, a facilidade de navegação do site. Para isso, são necessários além da criatividade, alguns conhecimentos básicos de técnicas de design e informática. Com esse intuito, foi criado o grupo de estudos de aplicações para a web, que pretende realizar estudos tanto de técnicas de webdesign quanto de ferramentas que podem ser utilizadas para o desenvolvimento de páginas web. Áreas de estudos: Basicamente duas áreas da tecnologia da informação serão abordadas pelo grupo: Design de páginas web (webdesigner); Ferramentas para o desenvolvimento de conteúdo web (webmaster).

2 Em relação ao design, são abordadas técnicas de como deve ser o layout, bem como cores e disposições do conteúdo em um site, de forma que seja agradável aos olhos, principalmente aos do cliente final. Já sobre as ferramentas utilizadas na produção, são abordadas apenas uma gama das tantas que existem. Dentre elas, temos: HTML; CSS; Javascript; Applets Java; JSP; Visual Basic Script; PHP; ASP; PERL; CGI; XML. O cliente: Do outro lado de toda conexão www, existe um cliente. Isso pode ser dito explicitamente, se se trabalha com venda de produtos, ou implicitamente, se apenas com a divulgação da informação. Um bom site tem que ser desenhado para atender seus clientes, atendendo suas necessidades e encorajando que eles voltem no futuro. Em suma fazendo da experiência de navegar no site uma coisa marcante. Mas manter os clientes felizes não é um trabalho trivial. Um dos pontos importantes é que o desenvolvedor esteja preparado para receber as mensagens mais estranhas, de clientes confusos que não sabem nem por onde começar. Esses clientes são os que precisam de mais ajuda, e é a partir daí que os sites começam a fazer diferença. O desenvolvedor na verdade está cercado por clientes. Tem o pessoal que navega, tem o chefe, o pessoal de vendas, e qualquer outra pessoa no seu local de trabalho que espera alguma forma de retorno no www. Enquanto o pessoal externo quer informações e produtos, o pessoal interno está de olho no retorno do investimento, nos dados demográficos, nos clientes externos. Não conseguir agradar os clientes externos é mortal para um site; não conseguir agradar os internos no mínimo vai te deixar com fama de chato. O cliente tem direito a: Cronogramas bem feitos. Comunicação constante.

3 Um contrato por escrito. Notificação imediata em caso de atrasos, problemas e despesas extras. Pagar somente pelo que foi autorizado. Controle de horas, quando está pagando por hora. Ver o projeto durante o desenvolvimento. Tempo de resposta razoável. Precauções relativas a segurança e privacidade. Produtos que funcionam de acordo com o que foi contratado. Direitos autorais sobre o conteúdo do site. Engenharia de produção de páginas: A maioria dos profissionais do ramo de produção web tem seu próprio método para a implementação de um novo projeto ou site. Aqui, tentamos relacionar os tópicos mais importantes, recomendados por alguns profissionais da área. Pesquisa e abstração: Pesquisar websites de assuntos afins. Elaborar uma relação de tudo o que website deve conter. Agrupar os conteúdos e definir as ligações que os assuntos têm entre si. Abstrair imaginar como prepararia se uma palestra sobre o assunto do website; qual o conteúdo programático? qual ordem da apresentação? Distribuir os assuntos no núcleo, nas bordas e pensar em como atualizar as informações geradas dinamicamente. Pensar no caminho para se encontrar a informação, na ordem natural da leitura. Layout do front page e páginas Internas: A partir da identidade visual do produto ou serviço, trabalhar a aplicação da marca na interface do website traçando o primeiro esboço do layout. Arquitetura da Informação: Refinamento do conteúdo organizado na pesquisa. Analisar a interligação das páginas e os aspectos da interatividade com o visitante. Design da informação: Consiste em "desenhar a informação", uma folha de papel em branco, um lápis e várias idéias na cabeça. Processo intuitivo: Agrupar as informações em pequenos "grupos de assuntos", classifica los e interliga los. Os "grupos de assuntos" dão origem aos grupos de páginas, Compondo assim a arquitetura da informação. Após a identificação de todos os "grupos de assuntos" que o website irá abranger, serão agrupados em "áreas" ( institucionais, serviços, destaques, etc). Montar a Arquitetura da

4 Informação, utilizando se de papel picado com os nomes dos "grupos de assuntos" e "áreas", arranjando os em um espaço que corresponda a tela do computador. Montar o quebra cabeça intuitivamente. Os elementos que não são da área de intersecção dos "grupos de assuntos" eleitos mas se ligam com elementos entre as "áreas" (ex. as buscas), necessitam ser colocados na arquitetura. Arquitetura de Design: Preparar as imagens e layouts das páginas. O design deve seguir a arquitetura de informação proposta inicialmente. O front page do website deve causar IMPACTO e persuadir o visitante. O website não pode ser desenvolvido como uma revista ou um folheto (folder) em formato eletrônico. A internet é um veículo de informação muito ágil e dinâmico. O visitante espera uma solução digital surpreendente, diferente, que abra caminho para interatividade. É importante que o website responda aos interesses dos seus visitantes. Conteúdo: A informação é agrupada em pequenos textos, que podem ser lidos em qualquer ordem, é importante classificá los e interligá los, para facilitar o acesso à informação. Atualizar conteúdo o lançamento do website é um passo importante, mas lembrar sempre que o sucesso dele se dá com a atualização constante do seu conteúdo. Manter o foco nos assuntos contidos na arquitetura de informação. Cumprir o seu objetivo. Responder e mail recebidos na conta webmaster de forma esclarecedora. Desenvolvimento: Criação dos processos de produção de conteúdo e aplicativos. Hospedagem: Criação do ambiente de produção ou pesquisa de infra estrutura do provedor de acesso para armazenagem e atualização. Técnicas para um bom design: Usar um visual consistente: Usar o mesmo visual para todas as páginas do site. Desta forma, os visitantes terão um senso de reconhecimento quando acessarem várias páginas. Repetir elementos visuais: Repetir elementos visuais (imagens, cores, fontes, etc) nas várias páginas ajuda a tornar o visual consistente. Não utilizar um fundo escuro:

5 Fundos escuros tornam os textos menos legíveis. Se for necessário utiliza lo, usar fontes como Arial, Universe e Helvetica em um tamanha não muito pequeno. Não engordar a página: Usar bordas para as tabelas e molduras para as imagens e applets. Evitar que o conteúdo saia da tela: Uma boa utilização das tabelas e imagens, evita que em determinados navegadores e resoluções diferentes, o conteúdo do site saia da tela e seja necessário o uso de scrolls. Alinhar o conteúdo: Uma das mais importantes regras de um bom design de site é que todo seu conteúdo, tanto textual quanto visual esteja alinhado. Utilizar o contraste das cores: A boa utilização de cores pode produzir resultados surpreendentes para os visitantes. Saber como interagir a mesma cor em diferentes intensidades e/ou tonalidades, pode destacar partes da página para que chamem a atenção do visitante. A página do grupo: Exemplo de idéia de layout por parte de um dos integranes do grupo.

6 Pensei em colocar um logotipo do grupo, criado pelo próprio ou uma figura que o grupo julgue que o represente bem, no canto superior esquerdo, como é padrão na maioria dos sites. Ao lado do logotipo, poderia haver algo escrito como, por exemplo, o nome do grupo de estudo ou um banner com imagens. Estruturado da forma em que está no desenho, o site seguiria este layout. Baseado não necessariamente em uma divisão por barras, mas pode ser também por um contraste não muito gritante de cores. Como penso que o grupo representa tecnologia, imagino a possibilidade do uso de escritas em degrade metálico, aliado com uma cor de fundo mais clara, para que o site não fique muito escuro. Ou até mesmo um fundo que combine tonalidades diferentes da mesma cor para se ter um bom contraste. Pensei em já que o grupo vai estudar diversas ferramentas de desenvolvimento de sites, colocar imagens ou algo que represente cada uma dessas ferramentas nas laterais do site, (tendo o nome da ferramenta abaixo da imagem), formando assim um palco no meio que será o local onde irá ficar o material escrito. Nesta parte central, teria um titulo no topo e subtítulos anunciando cada parte onde estariam escritos os objetivos do grupo, o cronograma para as próximas 2 semanas, os integrantes, e as atividades já realizadas.

7 Também poderia haver uma espécie de mural, ou um local onde pudesse ser posta as atividades q estão em andamento. Na base central do site, teria um anuncio de copyright, bem como um e mail comum ao grupo (lista do gmail, por exemplo). Referente a links, não vejo a necessidade de um menu, visto que o site teria uma única página. A não ser que o grupo decida por produzir um site com várias páginas, uma para cada seção. Como o site a princípio deve ser todo em html para que o grupo possa colocar em prática o que foi estudado inicialmente, seria algo bem simples. Sem envolver animações em flash nem outro tipo de implementação que não o próprio código html. O site: Para ver o resultado final e maiores informações acesse o nosso site: