Web Design
Propaganda
Técnico em Informática Web Design Ewerton Menezes de Mendonça 2014 Presidenta da República Dilma Vana Rousseff Governador do Estado de Pernambuco João Soares Lyra Neto Vice-presidente da República Michel Temer Secretário de Educação José Ricardo Wanderley Dantas de Oliveira Ministro da Educação José Henrique Paim Fernandes Secretário Executivo de Educação Profissional Paulo Fernando de Vasconcelos Dutra Secretário de Educação Profissional e Tecnológica Aléssio Trindade de Barros Gerente Geral de Educação Profissional Luciane Alves Santos Pulça Coordenador de Educação a Distância George Bento Catunda Diretor de Integração das Redes Marcelo Machado Feres Coordenação Geral de Fortalecimento Carlos Artur de Carvalho Arêas Coordenação do Curso João Ferreira Coordenação de Design Instrucional Diogo Galvão Revisão de Língua Portuguesa Letícia Garcia Diagramação Izabela Cavalcanti Sumário INTRODUÇÃO............................................................................................................................ 3 1.COMPETÊNCIA 01 | ELABORAR UM ESCOPO DE PROJETO PARA PROGRAMAÇÃO VISUAL PARA WEB.................................................................................................................................6 1.1 Introdução a Web Design ....................................................................................... 6 1.1.1 Breve História da Internet ................................................................................... 6 1.1.2 World Wide Web ................................................................................................. 7 1.1.3 Padrões Web ....................................................................................................... 8 1.1.4 Design .................................................................................................................. 9 1.1.5 Front-End e Back-End ........................................................................................ 10 1.2 Elaborar um Escopo de Projeto para Programação Visual para Web .................. 11 1.2.1 Objetivos ........................................................................................................... 13 1.2.2 Questionário ...................................................................................................... 15 1.2.3 Análise ............................................................................................................... 17 1.2.4 Público Alvo ....................................................................................................... 18 1.2.5 Personas ............................................................................................................ 20 1.2.6 Pesquisa de Campo ........................................................................................... 21 2.COMPETÊNCIA 02 | PLANEJAR UM WEBSITE ......................................................................24 2.1 Card Sorting .......................................................................................................... 26 2.1.1 Análise de Dados ............................................................................................... 28 2.2 Sistema de Navegação ......................................................................................... 29 2.2.1 Logotipo............................................................................................................. 31 2.2.2 Barra de Navegação .......................................................................................... 32 2.2.3 Menu Drop-Down ............................................................................................. 32 2.2.4. Bread Crumb .................................................................................................... 33 2.2.5 Conteúdo Cruzado............................................................................................. 33 2.2.6 Erro 404 ............................................................................................................. 34 2.2.7. Passos ............................................................................................................... 35 2.2.8 Paginação .......................................................................................................... 35 2.2.9 Abas ................................................................................................................... 36 2.2.10 Camadas .......................................................................................................... 36 2.2.11. Nuvem de Tags ............................................................................................... 37 2.3 Sistema de Busca .................................................................................................. 38 3.COMPETÊNCIA 03 | CONHECER OS MODELOS DE REPRESENTAÇÃO E ORGANIZAÇÃO DE WEBSITE..................................................................................................................................39 3.1 Mapa do Site ........................................................................................................ 39 3.2 Fluxo de Navegação ............................................................................................. 42 3.2.1 Páginas, Arquivos e Conjuntos .......................................................................... 42 3.2.2. Conectores e Setas ........................................................................................... 43 3.2.3. Conjunto Corrente............................................................................................ 45 3.2.4 Separações ........................................................................................................ 45 3.2.5 Áreas e Áreas Iterativas..................................................................................... 46 3.2.6 Sistemas Programados ...................................................................................... 47 3.2.7 Exemplo de Diagrama ....................................................................................... 47 CONCLUSÃO ...........................................................................................................................49 REFERÊNCIAS ..........................................................................................................................50 MINICURRÍCULO DO PROFESSOR ...........................................................................................51 INTRODUÇÃO Caro (a) aluno (a), a maioria das pessoas leigas acredita que design é uma denominação para desenho. Que o trabalho do designer limita-se a produção estética, formas, cores, texturas, etc. Que apenas o bom gosto ou saber utilizar as ferramentas são suficientes para ser um bom designer. Nesta disciplina, você vai descobrir que o trabalho do designer, em específico do web design, vai muito além de saber desenhar. Design pode ser entendido como projetar. Planejar bem antes de fazer a parte estética. Assim, esta disciplina possui um tamanho considerável, por necessitar de um planejamento antes do processo da fabricação. Por isso, dividimos o caderno de estudo em dois, para ficar mais confortável para você. Este é o primeiro caderno, composto das três primeiras competências que são responsáveis pelo conhecimento relativo ao planejamento do futuro website. Começaremos a primeira competência entendendo um pouco deste universo, iniciando pela profissão de web designer, e finalizaremos com Elaborar um Escopo de Projeto para Programação Visual para Web. Assim, vamos mergulhar no domínio do problema e compreender as necessidades do cliente, do usuário e até dos funcionários. Isso assegura que o designer não erre achando que seja uma coisa sendo outra. Uma vez que conhecermos bem o assunto, iremos, na segunda competência, Planejar um Website. Utilizaremos técnicas profissionais e conheceremos os principais sistemas de navegação. Iremos verificar na terceira competência, Conhecer os Modelos de Representação e Organização de Websites, a complexidade do projeto através de técnicas de mapeamento visual, o que ajuda a saber quantas páginas nosso site terá e a que se destinam cada uma delas. Evitamos o temido “eu acho”, que é muito incerto e pode dar vários problemas depois do trabalho feito. Encerramos, assim, a primeira parte referente ao planejamento. 3 Web Design O segundo caderno conterá o material necessário para a produção estética e a codificação necessária para tornar real o website. Dando continuidade às competências anteriores, iniciamos a quarta competência, Elaborar Layouts para Websites, que mostra um pouquinho de metodologias profissionais para a criação estética da identidade visual do site, ou seja, formas, cores, entre outros elementos que formam a aparência do website. Vamos conhecer na quinta competência, Conhecer os Padrões Definidos pela W3C para Representação e Criação de Websites, as tecnologias que usaremos para produzir o site. Daí em diante, teremos uma competência para cada tecnologia. Assim, a sexta competência será para o HTML, Formatar um Website Usando os Mais Modernos Padrões de Marcação de Hipertexto. Na sétima, focaremos no CSS, Planejar a Identidade Visual de Websites Usando Folhas de Estilo. E na última, daremos uma pincelada sobre programação com Java Script para usarmos efeitos interessantes em nossa página, Construir um Website. Tenha atenção para não se confundir, certo? Como já disse, esta disciplina possui dois cadernos de estudos e a leitura deles é extremamente necessária para se entender todo conhecimento proposto. Dedique-se, busque mais conhecimento para ser um profissional melhor que certamente as recompensas virão. Ao fazer esse curso, você tomou uma grande decisão. Uma decisão que lhe dará o poder de ser um produtor, ao invés de um simples consumidor da web. Esta disciplina pretende lhe dar conhecimento para idealizar um site, organizá-lo e construí-lo. É uma jornada que lhe exigirá dedicação não só na leitura deste caderno, mas também em fazer pesquisas na internet para completar seu aprendizado. É impossível colocar tudo neste simples caderno. Daremos a você, caro (a) estudante, as ferramentas iniciais para você progredir por si mesmo. Você encontrará muita informação na web, em texto e também em vídeo. Aproveite bastante, pois esta informação é gratuita e está lá, lhe esperando. Lembre-se de que o ser humano aprende por repetição. Poucas pessoas entendem conceitos complexos de primeira. Para a 4 Técnico em Informática maioria de nós, ler e reler o caderno de estudos é necessário para se entender de verdade. Não deixe, também, de fazer os exercícios, eles ajudam na compreensão. Aproveite e, quando possível, faça os exemplos mostrados. Seu aprendizado depende de sua dedicação nas competências desta disciplina. Contamos com você, viu? Bons estudos. 5 Web Design Competência 01 1.COMPETÊNCIA 01 | ELABORAR UM ESCOPO DE PROJETO PARA PROGRAMAÇÃO VISUAL PARA WEB Iniciamos nossa disciplina entendendo o domínio do problema, ou seja, quem tem o problema, o que ele acha que seja o problema, o que os usuários acham e porque não, os funcionários. Buscaremos informação de todos os lados para obtermos a solução que se manifesta em um website, da melhor forma possível. Mas, antes disso, precisamos conhecer um pouco do universo do web designer. Vamos saber, por exemplo, que internet e a WWW, World Wide Web, não são sinônimos. E então? Ficou curioso? 1.1 Introdução a Web Design A internet forneceu um suporte para o mundo mudar. Essa tecnologia é considerada uma revolução de várias formas, e seu impacto é bem mais profundo do que percebemos. Os mais novos podem até se perguntar: como era possível viver sem internet? É um novo mundo. Um mundo de bits, a menor unidade de informação do computador, que circula de computador para computador na chamada rede mundial de computadores. Para entrarmos nesse mundo, vamos precisar conhecer um pouquinho de sua história. Caso você tenha curiosidade, deixaremos links para você se aprofundar nos assuntos. Espero que se divirta aprendendo. 1.1.1 Breve História da Internet Na década de 1960, o mundo passava pela chamada Guerra Fria. De um lado os Estados Unidos, líder do bloco capitalista, e do outro a União Soviética, líder do bloco socialista. Estes dois blocos possuíam armas atômicas e o receio 6 Técnico em Informática Competência 01 na época era de que algum deles começasse uma guerra nuclear, daí o nome Guerra Fria. Assista a quantidade de bombas atômicas que foram explodidas de 1945 a 1998 nesta animação. Você vai se impressionar. www.youtube.com/ watch?v=jfpQNfcRE 1o Figura 1 - Teste nuclear realizado em 18 de Abril de 1953 na Área de Testes de Nevada. Fonte: http://pt.wikipedia.org/wiki/Ficheiro:Operation_Upshot-Knothole__Badger_001.jpg No meio disso, os militares dos Estados Unidos tinham receio de que, caso houvesse uma explosão no território americano, essa impedisse a comunicação entre as bases militares. Era necessário um sistema de comunicação entre as bases que continuasse funcionando mesmo que uma fosse destruída. Assim, começou a pesquisa da internet na década de 60. A internet é um sistema de comunicação entre computadores ao redor do planeta. Ela dá o suporte para a troca de dados entre os computadores que estão conectados a ela. E entenda que hoje temos computadores em casa, nos carros e constantemente conosco, através de smartphones. Descubra mais sobre a internet. Acesse http://pt.wikipedia. org/wiki/Hist%C3% B3ria_da_Internet 1.1.2 World Wide Web A World Wide Web ou teia mundial, também é conhecida por web ou www. Não é a mesma coisa de internet. A web foi criada em 1980, por um engenheiro do CERN chamado Tim Berners-Lee. Ele trabalhava em um lugar que possuía uma rede de computadores ligados à internet com vários cientistas trocando documentos diferentes entre si, só que os sistemas operacionais e, na maioria das vezes, um documento de uma máquina não 7 Web Design Competência 01 abria em outra. Não existia uma forma comum, padronizada, para acessar os diferentes documentos. Assista à excelente palestra de Tim no TED. A palestra está em inglês, mas possui legendas em português. Vale muito a pena. www.ted.com/talks /tim_berners_lee_o n_the_next_web Figura 2 - Tim Berners Lee no Campus Party Brasil. Fonte: http://pt.wikipedia.org/wiki/Ficheiro:Tim_Berners-Lee_CP.jpg Para resolver esse problema, nas horas vagas, ele começou a escrever um projeto que usava a internet como base. Então, concluímos que internet e web não são as mesmas coisas. A web é um formato de documento HTML, com uma forma de endereçamento URL, e uma forma de entrega desse documento, através de protocolos. Ex.: HTTP, HTTPS, entre outros. A internet é por onde isso tudo é utilizado. Descubra mais sobre a web. Acesse http://pt.wikipedia. org/wiki/WWW;./ 1.1.3 Padrões Web Perceba que o maior problema eram documentos de formatos diferentes vindos de computadores diferentes, e que a web padronizou tudo. Mas quando a web ficou popular no mundo, as pessoas começaram a modificá-la para adaptá-la às respectivas necessidades. Seria uma bagunça se não fosse uma instituição que cuida da uniformidade na web, garantindo, assim, que o documento que foi produzido do outro lado do mundo seja exibido da mesma forma em qualquer parte dele. O W3C (World Wide Web Consortium) é a principal organização de padronização da web. Ela não é uma empresa, é um consórcio internacional com quase 400 membros, agrega empresas, órgãos governamentais e 8 Técnico em Informática Competência 01 organizações independentes com o objetivo de estabelecer padrões para a criação e a interpretação de conteúdos para a Web. Hoje, a W3C cuida da reformulação do HTML em um projeto divulgado como HTML 5. Figura 3 – Site da W3C. Fonte: www.w3c.br/Home/WebHome 1.1.4 Design A maioria das pessoas entende de maneira errada a profissão de designer. Design não se traduz como desenho e sim como projeto. A palavra para desenho é draw. O designer projeta não só a parte visual, mas, principalmente, a organização e sua estrutura para a melhor experiência com o artefato. No caso, o web designer é especialista no planejamento e na produção de artefatos conhecidos como sites web. O trabalho maior do web designer está antes de escrever o HTML ou de desenhar a identidade visual, que são tarefas do final do processo. Fazer um site sem planejar antes é como construir uma casa sem uma planta, sem planejar o encanamento, esgoto, parte elétrica, etc. Dá para perceber que o resultado é bem frustrante. Então, tenha paciência e faça a parte inicial bem feita. Assim, aumentaremos Veja uma animação divertida que explica o papel do design gráfico. www.youtube.com/ watch?v=EjMYdfdn y3M 9 Web Design Competência 01 as chances do site ser um sucesso. 1.1.5 Front-End e Back-End A internet possui dois lados: o início e a chegada. Quando abrimos um navegador, aquele programa que visualiza páginas de internet, e solicitamos ver uma página, como a do Google, por exemplo, fazemos um pedido para outro computador, que guarda a página e nos envia. Os computadores na internet que são especializados em servir as páginas que queremos ler são chamados de servidores. Na verdade, o servidor é um programa que funciona no computador, mas vamos simplificar. Existem páginas que, não importa quantas vezes as solicitemos, sempre virá o mesmo conteúdo. Classificamos essas páginas como estáticas. A Figura 4 mostra uma página comum a muitos sites que normalmente é estática, a página “Sobre”. Figura 4 – Exemplo de página estática no site da W3C. Fonte: www.w3c.br/Sobre Mas, às vezes, a página solicitada modifica dependendo do que estamos fazendo. O carrinho de compra em um site de vendas online é uma página em que o conteúdo dela modifica dependendo de nossa interação no site de 10 Técnico em Informática Competência 01 comércio online. São chamadas de páginas dinâmicas. Figura 5 – Exemplo de página dinâmica, um carrinho de compras. Fonte: http://dicadeouro.com/conteudos/arquivos_posts/carrinho_002.gif A diferença é que nas páginas estáticas fazemos uma vez seu conteúdo e ele será copiado toda vez que for requisitado. Nas páginas dinâmicas o conteúdo vai ser determinado por um software que produz a página a cada requisição. Esta disciplina é focada na criação de páginas de conteúdo estático, e a isso classificamos como desenvolvimento front-end. Quando temos que desenvolver uma aplicação que irá construir as páginas de forma dinâmica, temos então o desenvolvimento back-end. Este tipo de desenvolvimento é mais difícil e para fazê-lo é muito recomendável que você conheça bem o desenvolvimento front-end primeiro. 1.2 Elaborar um Escopo de Projeto para Programação Visual para Web Como já dissemos, diferente do que muita gente pensa, o trabalho do web design é maior antes dele colocar a mão na massa e produzir o site. O planejamento é essencial para um produto de sucesso e, para se planejar bem, você deve conhecer bem a situação. Dificilmente você vai dominar o contexto de seu cliente tão bem quanto ele. É necessário utilizar algumas 11 Web Design Competência 01 técnicas consagradas na área para conseguir entender da melhor forma possível e resolver no menor tempo. Isto significa que você deve utilizar uma metodologia para alcançar os objetivos. Clement Mok é um designer gráfico canadense, fundador do Studio Archetype ex-diretor de criação da Apple. Ele foi o desenvolvedor da metodologia DADI para projetos de websites. DADI é o acrônimo para Definição, Arquitetura, Design e Implantação. Na etapa de Definição, o web design mergulha no universo do problema que será solucionado pelo site. Ele deve investigar o máximo de aspectos ligados ao domínio do problema e coletar o máximo de informações relevantes que o ajudem a desenvolver o site que será a solução do problema do cliente. A etapa de Arquitetura é uma fase complementar à Definição. Nessa fase, o web design procura organizar todos os dados coletados e também distribuir por completo o conteúdo do site, para que o usuário não receba toda a informação de uma vez, e ainda hierarquizá-la, para que o usuário receba primeiro uma informação e daí se desejar aprofundar-se mais terá essa opção. Na etapa de Design o profissional deixa a informação mais atrativa e confortável de ser visualizada. É quando planejamos quais cores são melhores para o público alvo definido na fase de Definição, além das fontes, formas, imagens, vídeos, etc. Ainda não codificamos nada, apenas teremos alguma coisa para mostrar ao cliente, como uma imagem do site. Na última etapa, a Implantação, o web design terá o produto pronto. Mas o trabalho não acaba por aí. A solução criada deve ser testada para se averiguar que realmente ela resolve o problema que levou o cliente a desejar um site. Nesta competência, abordamos a etapa de Definição. O que você como profissional deve fazer é um documento que possua as informações adquiridas através de entrevistas e questionários, além de uma pesquisa na 12 Técnico em Informática Competência 01 frente do computador. Mas vamos com calma e fazer uma coisa de cada vez. Alertamos para que você tenha zelo ao produzir o documento. Faça algo bem profissional, com uma qualidade que mostre a seriedade com que você está trabalhando. 1.2.1 Objetivos Pode parecer óbvia esta parte. Basta perguntar ao cliente, você pode se dizer, mas nem sempre o cliente sabe os verdadeiros motivos que o levaram a procurar um web design. Muitas vezes, ele só deseja alimentar seu ego. Porque o concorrente tem, ele também quer. Neste ponto o único usuário relevante do site é ele próprio, e se ele quer dessa forma, que assim seja. Mas se o cliente desejar algo mais relacionado ao seu negócio, aí você terá mais trabalho. O melhor jeito de conseguir essas valiosas informações é através de entrevista e muita atenção nas respostas. Converse bem com seu cliente ou seu representante. Só tenha cuidado com empresas que possuem muitos “donos”. Você só deve se dirigir a apenas um deles. Um corpo não anda se tiver muitas cabeças pensando diferente. Mas o que perguntar? Realmente, é um bom questionamento. Não existe uma receita fixa. Depende muito da experiência do profissional e do tipo do cliente. Não há uma quantidade certa nem quais são as melhores perguntas a serem feitas. De nada adianta se você não entender a resposta, por exemplo. Consiga o máximo de informações que você julgar que irá ajudar na produção. Peça os textos e imagens, caso não seja você quem também irá produzir. Descubra se é o cliente quem dará a palavra final ou vai passar para um representante. Anote tudo e deixe bem definido para depois ele não pedir algo que não foi acordado antes. Com o tempo, você vai ganhando experiência e vai descobrindo o que precisa perguntar. 13 Web Design Competência 01 Abaixo, temos algumas sugestões para a fase de definição dos objetivos. 1. 2. 3. 4. 5. 6. Por que deseja um site? Quais sites que lhe chamaram mais atenção? Qual o público alvo de seu negócio? O que lhe chama mais atenção nos sites que lhe agradam? O que você gostaria que o site tivesse? O conteúdo (texto, imagens, etc.) já está pronto? Com essas poucas perguntas, você já vai ter uma ideia do que ele quer, quanto tempo vai durar a produção e quem será seu usuário, se ele ou os clientes dele. Outro ponto é a multiplicidade de objetivos. Na verdade, o site possui um objetivo geral, mas pode ter vários específicos. Os objetivos específicos são metas menores que somadas alcançam o objetivo geral. Exemplo: Nosso cliente é um empresário de um músico que está lançando seu primeiro álbum. O empresário responde dessa forma as perguntas. 1. Quero que o site seja um local para que os fãs de meu cantor possam conhecer um pouco mais sobre ele, seu trabalho e sua agenda. Quero alimentar a simpatia que os fãs nutrem por ele. 2. Os sites dos Luan Santana, Gustavo Lima e Daniel têm o mesmo estilo de música do meu artista. 3. Na maioria são garotas de mais ou menos 18 anos. 4. Uma bela foto do artista e, geralmente, tem um vídeo clipe dele. 5. Não sei muito bem, mas poderia ter além de fotos, uma biografia e a agenda do cantor. 6. Não. Enviaremos assim que tivermos. Mas você pode começar a fazer logo. 14 Técnico em Informática Competência 01 Analisando as respostas percebemos que o cliente sabe bem o que quer: promover o cantor. Os exemplos de site que ele deu mostram que, mesmo que o artista não seja bem conhecido, ele deseja a grandiosidade que outros já conseguiram. Isso seria para atrair seu público alvo que, segundo o empresário, são garotas entre 13 e 23 anos. Nesse caso, como teremos um público menor de idade, devemos ter cuidado com o conteúdo e a forma como é mostrado. Também teremos que planejar o site para receber um conteúdo de vídeo em alguma parte. No entanto, o empresário não transmite muita segurança na entrega do conteúdo do site. Devemos, então, ter uma alternativa na manga para caso o vídeo nunca chegue. Outro detalhe que chama atenção é a agenda do cantor. Como não estamos fazendo um sistema de gerenciamento de conteúdo, back-end ou site dinâmico, devemos imaginar em fazer um contrato com ele para atualizar mensalmente ou quinzenalmente o site. Agora é a sua vez. Procure algum conhecido que tenha um negócio que você acredite que ele gostaria de ter um site estático. Esta pessoa não pode ser você, nem você deve inventar. Procure uma pessoa real para fazer a entrevista. Diga-lhe que ela está lhe ajudando em uma atividade de seu curso. Você não precisa fazer o serviço realmente. Ele só vai estar lhe ajudando, mas deixe isso bem claro. Você pode utilizar as perguntas usadas acima e acrescentar outras que achar pertinente. 1.2.2 Questionário Às vezes, o cliente não sabe responder as perguntas da entrevista. Os motivos podem ser vários. Ele pode não ser um dos usuários do futuro site, nem ter intimidade com a internet. Nesse caso, as informações podem vir de pessoas que seriam os empregados ou clientes do negócio. Fazer uma entrevista com 15 Web Design Competência 01 cada um seria demorado e, como diz o ditado, tempo é dinheiro. Resolvemos essa situação com um questionário. Pense bem nas perguntas e, se possível, coloque alternativas, mas deixe um espaço para uma resposta que não esteja entre as alternativas. Não faça muitas perguntas e não as complique. Seja claro e simples. Ao final, você pode oferecer um brinde barato pela ajuda que as pessoas deram. Faça o questionário e peça a alguém para ler e dar uma opinião. Ao final reproduza uma quantidade e distribua. Recolha dando o brinde para quem respondeu. Depois, analise as respostas e mantenha o foco, você está procurando os objetivos do site. As perguntas possuem as mesmas regras da entrevista. Na verdade, o questionário pode ser uma opção quando o cliente não sabe responder. Exemplo: 1. Você acessa a internet? 2. Quantas vezes por semana? 3. Se a empresa tivesse um site, qual a primeira coisa que você procuraria? 4. Procuraria por mais alguma coisa? 5. Se você tivesse que entrar em contato, utilizaria o e-mail ou o formulário de contato do site? Vamos supor que a maioria das respostas foi: 1. Sim. 2. De 3 a 5 vezes na semana. 3. A listagem de médicos credenciados e o telefone para marcar consultas. 4. O endereço dos locais onde posso autorizar o atendimento. De preferência que tivesse um mapa explicativo. Também se eles oferecem outros serviços que eu possa ter direito pelo meu plano. 16 Técnico em Informática Competência 01 5. O e-mail, mas se estivesse no site usaria o formulário de contato. Observamos que os clientes desse negócio acessam a internet com regularidade, então conhecem bem o meio. Que existe uma demanda para consultar uma determinada informação que pode aparecer a qualquer momento na vida do cliente e mais de uma vez. O cliente também gostaria de ter informações específicas sobre o serviço que comprou. O site pode oferecer um formulário, que exige programação back-end, mas podemos apenas oferecer um endereço de e-mail para contato. Vamos ver se vocês entenderam. Faça o seu questionário, com as perguntas que você achar pertinente e distribua os papéis para algumas pessoas. Você pode até enviar por e-mail. O mais ideal é que elas sejam as clientes do negócio do amigo que lhe ajudou antes. Depois de recebê-los preenchidos, compare os objetivos que o cliente deu na entrevista com as respostas do questionário. Será que são os mesmos? 1.2.3 Análise Junte todas as informações que conseguiu adquirir, seja pelo cliente, funcionários e/ou clientes de seu cliente. Leia com calma e tente entender as relações entre elas. Compare. Será que o cliente entende mesmo os clientes dele? Desse material extraia o objetivo geral e os específicos. Faça um parágrafo simples e escreva um documento bem estruturado com títulos e subtítulos. Seja zeloso em seu trabalho. Um bom profissional sempre é organizado com suas responsabilidades. 17 Web Design Competência 01 Neste exemplo, o tamanho da fonte foi aumentado para facilitar a leitura, mas não há necessidade do texto ser tão grande. Figura 6 – Página de capa e página um do projeto de exemplo. O seu não precisa ser igual. Este é apenas um exemplo de cuidado com o projeto. Fonte: Próprio autor. 1.2.4 Público Alvo O público alvo reúne as características comuns dos clientes. Normalmente, quando perguntamos: quem são seus clientes? A resposta é “todo mundo”, ou algo parecido. Isto significa que ele não sabe quem é seu cliente, ou ele deseja que realmente todo mundo seja seu cliente. Mas não é. O público alvo define as características comuns à maioria dos clientes. Tudo bem que seu cliente pode vender para qualquer um, mas como é a maioria das pessoas? Alta, baixa, gorda, magra, homem, mulher, não vive sem internet, ou não gosta de tecnologia? Uma vez que você conhece as características comuns pode fazer um site que agrade mais a maioria das pessoas e dessa forma aumentar a possibilidade de sucesso. Lembre-se de que se você atirar para todo lado pode não atingir ninguém, e 18 Técnico em Informática Competência 01 vai “precisar de muitas balas”, o que é caro. Mas se você escolher um alvo, neste caso o mais fácil, aumenta as chances de acertar em cheio. A forma de descobrir o público alvo de seu cliente pode vir por ele mesmo, durante a entrevista, ou conversando com os funcionários que convivem com os clientes, ou observando o fluxo no negócio. Talvez até você já conheça por experiência própria. O mais importante é que tenha a certeza dele. Caso você erre em determinar as características principais pode levar por água abaixo todo o projeto, e fazer algo que nem de longe as pessoas gostem. Vamos analisar os clientes de chupetas. Isto mesmo. As chupetas possuem um usuário que é o bebê, mas outro cliente, o pai ou a mãe. Para complicar podemos ter alguém que indica, como uma tia ou a avó. Além disso, se o pai compra, ele vai procurar algo mais prático, se for a mãe irá dedicar um tempo maior para observar as vantagens extras, independente do preço. Viu como pode complicar? Exemplo: No caso de nosso empresário do cantor sertanejo, ele conhece bem quem é o público alvo e nos diz isso na entrevista. Garotas com mais ou mesmo 18 anos. Entendemos que este público busca novidade e é altamente conectado. Já na pesquisa com os clientes de uma empresa, podemos deduzir que são pessoas que passam dos 50 anos por precisar, à medida que envelhecem, de médicos e exames. Outra característica que podemos perceber é a de que provavelmente a pessoa que necessite do serviço deve se encontrar fragilizada pelo problema que está passando. É claro que estamos adivinhando, o que poderia ser ruim em caso de erro. Quanto mais você pesquisa, mais diminui o risco. 19 Web Design Competência 01 Quais são as características comuns do público alvo do negócio que você está analisando? Defina as características mais marcantes e as que você pode deduzir sobre elas. Não se esqueça de buscar alguém com estas características para comprovar se você deduziu certo. Lembre-se do perigo que é deduzir errado. Acrescente ao seu projeto com o título PÚBLICO ALVO. 1.2.5 Personas Apesar de você fazer todo esse trabalho para conhecer o público alvo de seu site, podemos chegar a situações que as características são tão abrangentes que é difícil imaginar uma pessoa alta e magra ao mesmo tempo, que ama e odeia a internet, que é jovem e velha, tudo ao mesmo tempo. Quando ocorre algo assim, por conta da abrangência, temos que enxergar melhor os estereótipos, até caso você tenha uma equipe que faça essa pesquisa e você não tennha o contato com as pessoas reais que geraram os dados. Assim, selecione as características mais próximas e invente uma personagem com uma história fictícia que passe a ideia do público alvo. Você pode colocar uma foto fictícia para ilustrar, ou utilizar um desenho para dar um pouco mais de intimidade com aquele estereótipo. Exemplo: Baseado nos dados que o empresário nos passou e em deduções pessoais temos a persona abaixo. Lembre-se de que é uma história inventada com as características observadas e deduzidas. 20 Técnico em Informática Competência 01 Maria tem 16 anos é estudante e não larga do celular com internet. Ela e as amigas adoram música e principalmente os cantores tal e tal. Também faz parte de um fã clube organizado em uma rede social virtual que compartilha informações sobre um determinado cantor. Fonte da imagem: www. freeimages.com/photo/ 1270130 Agora, proponho um desafio. Não sei o público alvo que você descobriu, mas faça no mínimo duas personas bem distintas, ou seja, com características bem diferentes. Siga o exemplo e escreva um parágrafo para cada uma com quatro linhas no mínimo. Escreva o título PERSONAS com elas logo abaixo no documento. 1.2.6 Pesquisa de Campo Os concorrentes são uma importante fonte de conhecimento, mas não a única. Provavelmente eles já fizeram todo o trabalho duro e apresentam os resultados no produto. Mas copiar nunca é o bastante. Afinal, seu site não pode ser apenas mais um. Ele deve atrair pelo diferencial. Ou seja, o que seu site tem que os outros não têm? Visite os sites dos concorrentes de seu cliente. Descubra o que eles têm de igual e diferente. Procure pensar em como o site que você produzirá irá se destacar quando estiver lado a lado com os outros. Para isso, utilizamos uma tabela com características dos sites e marcamos nossas impressões sobre eles. Sensibilidade é o fator mais importante aqui. Você tem que perceber os fatores positivos e negativos, fazendo um 21 Web Design Competência 01 julgamento imparcial. A tabela abaixo é o do diferencial semântico. Para preenchê-lo você deve visitar um site do concorrente e, após usá-lo por algum tempo, responder a tabela com um x para cada intensidade de impressão. Exemplo: Ao utilizar o site, senti que o entendimento dele foi “um tanto ruim” e sua visibilidade era “muito clara”. O entendimento do site foi... Muito Boa Clara Um tanto Nenhum Um tanto x Muito Um tanto Muito Ruim Escura x As imagens que foram exibidas pareciam... Muito Um tanto Nenhum Granuladas Realistas Inacreditáveis Distorcidas Nítidas Irreais Críveis Precisas O movimento do site foi... Muito Um tanto Nenhum Um tanto Muito Suave Quebrado Lento Consistente Irregular Contínuo Rápido Inconsistente Você sentiu que o ambiente era... Muito Pequeno Vazio Claro Fechado Permanente Monocromático Distante Intocável Um tanto Nenhum Um tanto Muito Grande Cheio Escuro Aberto Temporário Colorido Próximo Tocável Faça esta tabela com alguns sites concorrentes. Capture a tela inicial do site que você verificou e anexe acima da tabela preenchida. Ao final, verifique as 22 Técnico em Informática Competência 01 impressões para a maioria dos sites e cada característica. Sabendo por exemplo que a maioria dos sites dos concorrentes transmite sensações, como grande, cheio e escuro; podemos ou seguir a tendência por ser uma característica que agrada ao público alvo, ou inovar fazendo o contrário. Passando uma ideia de pequeno, vazio e claro. Use o bom senso. Visite o site de ao menos três concorrentes. Capture a tela com a página inicial com printscreen e cole em seu documento, abaixo do título CONCORRENTES. Preencha a tabela para cada um deles. Depois, escreva um resumo mencionando cada característica observada no site dos concorrentes. Com isso, possuiremos uma boa quantidade de informação sobre o domínio do problema e podemos buscar uma solução para ele. Lembre-se de que nesta etapa de Definição, quanto mais informação melhor. Na próxima competência, veremos a segunda etapa de nosso projeto, a fase Arquitetural. 23 Web Design Competência 02 2.COMPETÊNCIA 02 | PLANEJAR UM WEBSITE Com vimos no começo, a fase Arquitetural do DADI complementa a fase anterior, Definição. Ela tem o objetivo de organizar os dados coletados, selecionar os de maior importância e distribuir o conteúdo entregue pelo cliente nas várias páginas que vão compor o site. Imagine como seria constrangedor visitar um site onde o conteúdo está todo misturado e em páginas gigantes que cansam só de olhar. Não queremos que os usuários de nosso site fujam. Por isso, dedicamos um bom tempo nesta parte. Lembre-se de que não basta ler ou assistir as videoaulas. Nosso aprendizado é mais eficiente quando fazemos exercícios para praticar. Aproveite as oportunidades que aparecerem e dê o seu melhor. No início desta fase você vai precisar do conteúdo do site. Assim, poderá projetar um site eficiente para o conteúdo devido. No entanto, no design participativo, onde aquilo que o usuário pensa é mais importante do que aquilo que nós pensamos, devemos identificar como ele acha mais natural a estrutura da informação. Além disso, para nós pode ser que uma palavra seja mais comum para aquele conceito, mas os usuários do site não a conheçam ou achem mais interessante outra palavra ou até mesmo uma gíria. A arquitetura de informação é a atividade de estruturar a informação de uma forma organizada. Leia mais a respeito em http://pt.wikipedia. org/wiki/Arquitetur a_de_informa%C3% A7%C3%A3o Então, o web design irá pegar todos os dados coletados, ler todo o conteúdo que o cliente entregou e começar a separar em grupos. Associe cada pedaço de informação ao que aquele grupo tem mais haver. Não se preocupe com os assuntos, eles vão aparecendo à medida que você for agrupando. Se um grupo estiver com muito conteúdo, subdivida. A ideia é fugir da entropia, da confusão. Por incrível que pareça, a quantidade de dados pode não determinar a quantidade de grupos. Podemos ter muitos dados sobre um determinado 24 Técnico em Informática Competência 02 assunto e não podermos mais fragmentar. Assim como podemos ter poucos dados, mas eles se relacionarem pouco, aumentando a quantidade de grupos. Em todo caso, faça o máximo de grupos que puder. Ao final, entenda do que se trata aquele grupo e sintetize em uma palavra. Tenha o cuidado de deixar claro. Se for necessário utilize mais de uma. Faça uma lista com essas palavras. Exemplo: Existe um conceito que diz que todo sistema que não é submetido a uma força que a organiza, tende a ser uma desordem, ou seja, uma entropia. Nosso empresário tem pressa em ver algo pronto e não entende que não podemos fazer um layout sem saber qual o conteúdo que terá. Com muita conversa e jeitinho, ele aceita e solicita para sua assistente passar toda a informação pública do artista para você. Descobrimos que o site possui pouco conteúdo, mas existem muitas fotos e a agenda de shows. Agrupe todo o conteúdo em agregados menores. Neste caso, temos informações pessoais sobre o artista, sua discografia, muitas fotos e uma agenda relativamente grande, sem esquecer de que ainda teremos que colocar um vídeo e um meio de contato. Biografia Fotos Show Agenda Discografia Fotos Backstage Locais de Show Fotos Artista Promoção Contato Videoclipe Twitter Facebook Instagram Concurso Recados dos Fãs Fotos dos Fãs Cartas dos Fãs Contratar Show 25 Web Design Competência 02 Vamos exercitar para melhorar o entendimento. Junte todo o material que você pesquisou e procure algum conteúdo do negócio que você escolheu anteriormente. Se seu amigo puder lhe fornecer o conteúdo, melhor. Mas, caso contrário, procure algum conteúdo similar pelos sites na internet. Junte uma boa quantidade de informação sobre o assunto. Pode ser em vários sites. Quando terminar, comece a agrupar a informação. Fragmente o máximo possível. Depois, verifique em cada grupo a palavra chave que sintetiza aquelas informações. 2.1 Card Sorting Existem várias metodologias para classificação de informação. Uma das mais conhecidas é o Card Sorting. Utilizaremos essa técnica para classificar as palavras chaves. Seria o mesmo que reunir grupos. Você pode se perguntar, mas não já fizemos isso? Pois é. Fizemos do nosso ponto de vista, mas nosso design é participativo, lembra? O que achamos melhor para nós pode não ser para nossos usuários. Nosso público alvo pode não ter tanta intimidade com a palavra “e-mail” e simplesmente ignorar uma parte vital de nosso projeto. Para eles algo como “Mande-nos uma mensagem” seria muito mais compreensível. Além disso, podemos descobrir pelo card sorting que o que achamos conveniente separar seja um empecilho para o usuário. O card sorting pode ser aberto ou fechado. Card sorting aberto é quando a nossa amostra tem que achar o tema de relacionamento dos cartões. Amostra é um grupo de pessoas que representa nosso público alvo, e por isso deve pertencer a esse público. O número de pessoas da amostra varia: quanto mais, melhor. O card sorting fechado é quando já temos uma boa ideia dos temas e apresentamos a amostra. Nesse caso, ela classifica de acordo com 26 Técnico em Informática Competência 02 nossos critérios. E qual usar? Quando não entendemos o domínio do problema, ou não temos certeza, podemos buscar os temas através da amostra utilizando card sorting aberto. Isso nos dará uma pista de como o público alvo entende aquele conteúdo. Mas se conhecemos bem o domínio, até somos parte desse público alvo, podemos nos arriscar em definir os temas. O card sorting pode confirmar ou negar o que imaginamos. E como se faz? Vamos utilizar o card sorting fechado por ser mais simples para os usuários. Começamos fazendo cartões, e em cada um deles escrevemos uma palavra da nossa lista e os temas. Afinal, as pessoas podem associar um tema a outro. Também devemos ter folhas de papel, cada folha escrita com o nome de um tema. Procuramos, então, as pessoas que farão parte de nossa amostra. Em separado, a cada uma entregamos os cartões e pedimos para colocar em um tema que ache adequado. Diga-lhe que pode sugerir novos temas ou criticar a existência de uma palavra ou tema. Qualquer coisa que a amostra diga pode ser importante para o sucesso do site. Registre o resultado de cada pessoa. Figura 7 – Web desing realizando o card sorting fechado. Fonte: www.rogeriopa.com/wp-content/uploads/2010/02/cardsorting_3.jpg 27 Web Design Competência 02 Faça os cartões baseados em sua lista e os papeis com os temas. Procure dez ou mais pessoas. Peça-lhes para classificar e dar sugestões. Anote a classificação dos usuários. 2.1.1 Análise de Dados Agora, vamos terminar esta parte verificando como a amostra percebe o conteúdo. Contabilize a quantidade de cada palavra em cada tema. As que tiverem maior quantidade serão as subpáginas de nosso site. Os temas serão as páginas principais que dão acesso ao grupo de informação. Exemplo: Nossa amostra de fãs de música sertaneja não foi difícil de encontrar. Poderíamos fazer com muitas pessoas e diminuir o risco de erro ou confusão, mas nos limitamos ao tempo que tivemos para isso. Conseguimos alguns brindes de divulgação com o empresário e distribuímos para quem participou do card sorting fechado. O resultado da análise é mostrado na tabela abaixo. Cantor Biografia Discografia Música Fotos Vídeo Agenda Contato Contratar Twitter Instagram Facebook Música Discografia Youtube Fotos Fotos Artista F. Backstage Fotos Show Fotos Fãs Vídeo Videoclipe Youtube Agenda Agenda Locais Show Contratar S. Contato Contato Facebook Twitter Tabela 1 – Resultado da análise do card sorting. Fonte: Próprio autor. 28 Técnico em Informática Competência 02 A análise mostra que uma página sobre o cantor seria a página inicial. Durante o card sorting algumas pessoas perceberam a falta de um canal no YouTube e sugeriram o acréscimo. Outra ideia foi relativa ao conteúdo dos fãs. Eles procuraram um tema Fã que não havíamos percebido antes e, por isso, os rótulos sobre ele não aparecem. Como a área do fã é difícil de controlar, deixamos de fora do conteúdo oficial. Agora, é hora de experimentar a metodologia. Faça a análise em cima do card sorting que você fez anteriormente. Escreva uma descrição com todas as observações relevantes que a amostra forneceu. Tanto do que você percebeu na classificação que fizeram, quanto nas ideias sugeridas de novos temas, cartões e críticas. Ok! Pegamos um todo informacional, classificamos da melhor forma, verificamos se foi bem classificado, fizemos ajustes e hierarquizamos tudo. No entanto, quando temos uma grande quantidade de conteúdo, pode ser difícil para o usuário achar aquilo que quer rapidamente. Existe um risco de ele se cansar e abandonar o site sem voltar. Na próxima sessão vamos conhecer algumas formas de melhorar o acesso à informação. 2.2 Sistema de Navegação Vimos no início de nossa jornada que um site é um conjunto de páginas sobre um tema. No entanto, podemos ter um número necessário, porém, exagerado de páginas e, por mais fragmentada e hierarquizada que a informação esteja, pode-se levar um tempo relativamente alto para achar aquilo que se deseja. Ou, pior, não achar e supor que a informação não exista. Um sistema de navegação em um site ajuda a encontrar aquilo que queremos no menor tempo possível. E o melhor sistema de navegação é aquele que não 29 Web Design Competência 02 se percebe ao usá-lo. Assim, não precisamos nos preocupar como funciona a navegação a cada site que acessamos. Com os games funciona de modo oposto. Para quem já jogou em um vídeo game, a primeira coisa a fazer é aprender como navegar por ele. A cada jogo uma nova forma de navegação. No entanto, alguns são parecidos e com isso o aprendizado pode ficar mais fácil. É justamente neste ponto que queríamos chegar. Existe uma coleção de elementos de navegação que já são conhecidos dos usuários da web. Podemos utilizá-los em nosso site para tornar a navegação mais eficiente. Como eles existem em diversos sites, o usuário só tem que aprendê-los uma vez e se concentrar na informação e não na navegação. Mas não vamos apenas copiar algo que já existe. Você deve usar o bom senso para saber o que usar e quando usar. Com a experiência, a tarefa ficará cada vez mais fácil. Abaixo, temos uma lista de princípios que podem lhe ajudar. Apreensível: fácil de aprender; Consistente: não apresentar erros ou falhas; Reagente: responder apropriadamente aos comandos do usuário; Propositivo: indicar alternativas claras de navegação; Econômico: chegar ao que quer com menos cliques; Claro: ser de fácil entendimento; Adequado: o usuário deve sentir que aquele site foi feito para ele. Vamos agora conhecer, afinal, quais são estes elementos. Marca; Barra de navegação; Menu drop-down; Bread crumb; Conteúdo cruzado; 30 Técnico em Informática Competência 02 Erro 404; Passos; Paginação; Abas; Camadas; Nuvens de tags. Estas são as mais comuns, mas esta lista pode ser modificada com novas formas de navegação. Enquanto isso não acontece, vamos ver uma a uma, assim você pode começar a imaginar quais usará em seu projeto. Utilizaremos um site de comércio eletrônico, que normalmente possui uma grande quantidade de informações fragmentadas e utiliza vários elementos de navegação. 2.2.1 Logotipo Você também pode encontrar como marca e logomarca. O uso mais comum do logotipo é como uma imagem no canto superior esquerdo. Ajuda a identificar o site e serve de link para retornar a primeira página do site. Chamamos esta página de “home”. Figura 8 – Observe o retângulo vermelho no canto superior esquerdo destacando a marca do Walmart. Fonte: www.walmart.com.br/ 31 Web Design Competência 02 2.2.2 Barra de Navegação A barra de navegação pode ser global ou local. Na barra global temos os temas mais abrangentes, mais superiores na hierarquia. A partir dele temos a barra local que classifica os subtemas daquele tema. As duas barras normalmente funcionam em conjunto quando temos uma subclassificação. Figura 9 – O retângulo vermelho horizontal é a barra de navegação global. Ao entrar na sessão ‘Eletrônicos’ vemos no lado esquerdo a barra de navegação local. Fonte: www.walmart.com.br/departamento/eletronicos/317 2.2.3 Menu Drop-Down Ao posicionarmos o ponteiro do mouse em cima de uma sessão, é apresentado um menu perto do ponteiro com opções contextualizadas. 32 Técnico em Informática Competência 02 Figura 10 – Neste caso, vemos que além de um menu, a caixa oferece um produto de maior aceitação. Fonte: www.walmart.com.br/ 2.2.4. Bread Crumb A tradução literal é ‘migalhas de pão’, mas não significa que vamos comer em cima do teclado. Este termo foi utilizado porque na história de João e Maria, coletada pelos irmãos Grimm, uma trilha de migalhas de pão foi deixada para que eles pudessem achar o caminho de volta. A ideia é mostrar ao usuário onde ele está e quais caminhos seguiu através de links. Figura 11 – Observe que o bread crumb começa com um ícone de uma casa, que leva a home, temos então a sessão ‘Eletrônicos’ e estamos na sessão “TV 3D”. Fonte: www.walmart.com.br/categoria/eletronicos/tv-3d/?fq=C:317/1722/&PS=20 2.2.5 Conteúdo Cruzado Quando o usuário está em uma página, uma série de links é oferecida como opções para continuar a leitura. Normalmente, um sistema programado verifica o comportamento do usuário para realizar uma sugestão. Mas nada 33 Web Design Competência 02 impede da sugestão ser feita com links estáticos. Figura 12 – Observe que estamos vendo um produto e na mesma página, logo abaixo, são sugeridos os links para outros produtos relacionados. Fonte: www.walmart.com.br/produto/Eletronicos/TV-3D-LG/LG/380832-TV-LED-32LA613B---Preta--LG 2.2.6 Erro 404 Quando um servidor não encontra a página solicitada pelo usuário é gerado um erro de código 404. Os servidores permitem configurar uma página para dar essa informação ao usuário. Tratando a página com a identidade visual do site mostramos seriedade ao serviço. Figura 13 – Esta página de Erro 404 transmite a mensagem de uma forma mais simpática. Fonte: www.walmart.com.br/produto/Eletronicos/TV-3D-LG/LG/380832 34 Técnico em Informática Competência 02 A página com o erro deve ser nomeada de uma forma aceita pelo servidor. Normalmente a página é a 404.html. Faça esta página e a deixe na raiz de seu site. Caso ela não exista, a página padrão do servidor para este erro é mostrada. 2.2.7. Passos Quando a informação que o usuário quer deve ser obtida seguindo uma sequência de páginas, devemos informar a ele quais são os passos, em que passo está e quanto falta para conseguir finalizar. Isto é o que acontece quando vamos encerrar uma compra em um site de comércio eletrônico. Figura 14 – Para finalizarmos uma compra é necessário primeiro nos identificarmos, informarmos o endereço de entrega e a forma de pagamento. Fonte: www2.walmart.com.br/checkout/content/#chooseAddress 2.2.8 Paginação Quando a informação solicitada pelo usuário é muito grande, podemos dividir em páginas e oferecer controles para avançar, retroceder e selecionar uma 35 Web Design Competência 02 determinada página. Figura 15 – O retângulo de contorno preto destaca os controles de paginação. Fonte: http://busca.americanas.com.br/busca.php?q=tablet 2.2.9 Abas As abas oferecem um acesso rápido a uma sessão, além de informar quais existem e onde o usuário está. É uma solução de navegação bem elegante quando não temos muitas sessões. Figura 16 – Na exibição do produto as abas são exibidas para mostrar detalhes informacionais sobre ele. Fonte: www.walmart.com.br/produto/Tablets/Tablets-KIDS/Oregon/403042-Tablet-Meep-Oregon 2.2.10 Camadas Em alguns momentos uma determinada informação é necessária, ou se destaca perante as outras. Quando queremos sobrepor àquela informação às 36 Técnico em Informática Competência 02 outras, podemos utilizar a navegação em camadas. Dessa forma, temos duas camadas uma em cima da outro. Na camada superior a informação é mais visível que na camada inferior. Observe o efeito na Figura 17. Figura 17 – Neste exemplo, para prosseguir com o processo de compra é exigida a identificação do usuário. Fonte: www2.walmart.com.br/checkout/content/#chooseAddress 2.2.11. Nuvem de Tags Normalmente utilizado em blogs que categorizam o conteúdo através de palavras chaves, a nuvem de tags exibe um conjunto de palavras mais acessadas variando seu tamanho pela quantidade de acesso. Para sua produção é necessário que ela seja programada. Figura 18 – Nuvem de tags. Cada palavra é um link para uma pesquisa sobre aquela palavra no blog. Fonte: http://markun.com.br/memoriacoletiva/wp-content/uploads/2011/02/tags2702.png 37 Web Design Competência 02 2.3 Sistema de Busca A busca é uma alternativa ao sistema de navegação que vimos anteriormente. O usuário digita uma palavra-chave, é feita uma busca em um banco de dados e retornado os links relacionados a ela. Este tipo de sistema deve ser programado e não está no escopo deste curso. Mas existem empresas que oferecem o serviço, tanto gratuito quanto pago. Cada empresa tem sua forma de instalação do sistema em seu site e não seria possível descrevê-las aqui. A escolha de um serviço também não é conveniente pela velocidade com que serviços nascem e morrem na internet. Mas se for tão importante para seu cliente, faça uma pesquisa e estude na página do desenvolvedor o modo como deve ser instalado o serviço. Figura 20 – Campo para busca no site. O resultado é uma listagem de links relacionados. Fonte: www.walmart.com.br/ Com isto finalizamos esta competência. Estude as formas de navegação e decida adequadamente qual delas utilizará. Não é necessário usar todas e quanto menos conteúdo, menos necessárias elas serão. Lembre-se de que em design menos é mais. Mas não deixe seu site carente de formas de navegação. 38 Técnico em Informática Competência 03 3.COMPETÊNCIA 03 | CONHECER OS REPRESENTAÇÃO E ORGANIZAÇÃO DE WEBSITE MODELOS DE Em nossa quarta competência, vamos definir a estrutura do site utilizando conceitos de arquitetura. Mas não é a arquitetura de construções e sim a arquitetura da informação. Arquitetura da informação é a ciência que estuda a disposição dos elementos na página, a estrutura de navegação e o conteúdo delas. Existem vários livros com técnicas e metodologias sobre o assunto. Mas como nosso tempo para esta competência é limitado, ficaremos com as que considero mais importantes: Mapa do site e Fluxo de Navegação. 3.1 Mapa do Site O mapa do site ajuda a reconhecer a estrutura geral do site webs e aplicações. Quanto mais conteúdo tem um site, navegar por ele pode ser extremamente complicado e o mapa do site ajuda na identificação de sua hierarquia e conexões. Quer aprender mais e ser um profissional melhor? Acesse o link abaixo para ler mais sobre Arquitetura de Informação. http://pt.wikipedia. org/wiki/Arquitetur a_de_informa%C3% A7%C3%A3o Podemos utilizá-lo para explicar à equipe que irá desenvolver o site, como é sua estrutura, mas também podemos mostrar ao cliente para ele compreender a complexidade do projeto, e não para por aí. Ainda podemos usar no próprio site para ajudar a localização do conteúdo procurado. O mapa do site é uma maneira visual e simples de exibir as partes de um website como um todo, fornecendo um panorama da navegação dele e, em alguns casos, mostrando todas as conexões de cada página. 39 Web Design Competência 03 Figura 21 – Mapa do site de um estúdio de design no formato hierárquico. Fonte: Próprio autor. Figura 22 – Mesmo mapa do site da Figura 21, em formato tópicos. Fonte: Próprio autor. 40 Técnico em Informática Competência 03 Repare pelos exemplos que através de uma representação gráfica entendemos rapidamente a estrutura do site. Os elementos ou as páginas podem ser dispostos de maneira hierárquica ou ainda mostrados em uma estrutura de tópicos. Exemplo: Baseado na tabela resultante de nossa análise no card sorting, fizemos um mapa do site e apresentamos para nosso cliente empresário. Assim, ele reconheceu as novas ideias e até se surpreendeu, pois achava que era mais simples, e ajudou no reconhecimento do valor. Existem alguns aplicativos online gratuitos que você pode utilizar para fazer seu mapa de site. O Write Maps é um deles. Acesse o link abaixo para experimentá-lo. As imagens ilustrativas desta sessão foram produzidas nele. http://writemaps.c om/ Figura 23 – Exemplo de mapa do site. Fonte: Próprio autor. Sua vez! Pegue sua análise e faça seu diagrama. Utilize a aplicação que você se sentir mais confortável. Uma vez que sabemos a quantidade de páginas e como elas estão dispostas temos que entender o fluxo de navegação. 41 Web Design Competência 03 3.2 Fluxo de Navegação Também conhecido como Fluxo de Tarefa é uma técnica que identifica caminhos ou processos que o usuário fará enquanto avança na utilização do website ou sistema. Figura 24 – Exemplo de Fluxo de Tarefa Fonte: http://iainstitute.org/pt/translations/garrett_visvocab-fig07.gif Em 2000, Jesse James Garrett, iniciou o desenvolvimento de uma biblioteca de vocábulos visuais. Seu objetivo era ter uma formalização de diagramação para fluxos de navegação. Esta biblioteca de vocábulos visuais é simplesmente um conjunto de símbolos que compõem um diagrama, baseado em um modelo conceitual para prover: Caminhos para o usuário do website; A movimentação do usuário ao longo desses caminhos através de ações; Ações que geram resultados na navegação. Agora, vamos ver cada um destes símbolos para gerarmos nossos diagramas. 3.2.1 Páginas, Arquivos e Conjuntos A página é a unidade básica de experiência do usuário na Web. No diagrama é representada como um retângulo simples. Ela corresponde ao que o usuário recebe em seu navegador e pode ser feita das seguintes maneiras: 42 Técnico em Informática Competência 03 Através de vários arquivos HTML (como no caso de uma página que contém um iframe - veremos em outra competência o que são iframes) Ou quando temos um sistema programado (tomando como exemplo o PHP, vários arquivos PHP podem produzir apenas uma página). Então, este retângulo seria a representação da página que o usuário vê. Mas, às vezes, o usuário pode solicitar o download de um arquivo que será visto fora do navegador. Os anexos de e-mail são um bom exemplo desse tipo de documento. Chamamos esse tipo de documento de 'Arquivo' e para representá-los é utilizado o ícone de documento com uma orelha dobrada. Para representar um grupo de páginas com a mesma funcionalidade, utilizamos o símbolo de pilha de páginas. Da mesma forma com vários arquivos. Para distinguir as páginas e os arquivos no diagrama, utilizamos rótulos com uma identificação para cada um. Apenas escreva o nome do identificador no meio. Observe os exemplos na Figura 24 e um exemplo com rótulos na Figura 23. Figura 25 – Da esquerda para direita: página, arquivo, conjunto de páginas e conjunto de arquivos. Fonte: http://iainstitute.org/pt/translations/garrett_visvocab-fig01.gif 3.2.2. Conectores e Setas Os hiperlinks que levam de uma página a outra são simbolizados no diagrama por linhas que conectam os elementos. A forma hierárquica é mais organizada e pode demonstrar que o usuário pode ir da página de cima para as opções 43 Web Design Competência 03 abaixo. Figura 26 – Da esquerda para a direita: a forma hierárquica, também chamada de árvore; e a forma aleatória. Fonte: http://iainstitute.org/pt/translations/garrett_visvocab-fig02.gif Quando temos uma relação direcionada, como no exemplo da competência anterior, no item 3.3.7 PASSOS, onde o usuário segue em uma direção, utilizamos uma seta para demonstrar isso. Quando o direcionamento é forçado, ou seja, é obrigatório seguir em um sentido apenas, utilizasse uma barra cortando a seta no ponto sem retorno. Se o conector termina em outro conector, colocamos a seta no meio inicial do conector. Observe o exemplo na Figura 26. Figura 27 – À esquerda, acima: conector com seta indicando o provável caminho do usuário. À esquerda, abaixo: caminho com impossibilidade de retorno. À direita: conector com seta que termina em outro conector. http://iainstitute.org/pt/translations/garrett_visvocab-fig03.gif Podemos também rotular os conectores para tornar mais clara a relação. No entanto, deve-se utilizar de forma moderada. 44 Técnico em Informática Competência 03 Figura 28 – Exemplos de rótulos em conectores. Fonte: http://iainstitute.org/pt/translations/garrett_visvocab-fig04.gif 3.2.3. Conjunto Corrente Você já clicou em um link em que apareceu não só a página, mas também um pop-up, ou até mesmo outra página? Acredito que para a maioria dos usuários da web isso aconteceu. Quando temos a situação descrita, a representação se dá através de um semicírculo em cima do conector. Veja o exemplo na Figura 28. Figura 29 - Diagrama que mostra uma página com instruções sendo aberta e um arquivo sendo baixado, tudo isso aconteceu com apenas um clique em um link na página acima. Fonte: http://iainstitute.org/pt/translations/garrett_visvocab-fig05.gif 3.2.4 Separações Às vezes, o diagrama pode ficar gigante e não caber no papel. Podemos interromper um diagrama por falta de espaço e seguir em outra folha através 45 Web Design Competência 03 de pontos de continuação. Os pontos são representados por colchetes com um rótulo que identifica a continuidade. Temos um exemplo simples na Figura 29. Figura 30 – À esquerda, temos um diagrama com um ponto de continuação indicando a sequência na página D, em outro diagrama. À direita, temos a continuação do diagrama e outro ponto de continuação indicando a volta. Fonte: http://iainstitute.org/pt/translations/garrett_visvocab-fig06.gif 3.2.5 Áreas e Áreas Iterativas Para representar um grupo de páginas que possui um ou mais atributos comuns, como um determinado tratamento estético ou o aparecimento de uma mensagem, contornamos as páginas com um retângulo de cantos arredondados e um rótulo. Figura 31 – Exemplo de uma área com uma janela pop-up em comum. Fonte: http://iainstitute.org/pt/translations/garrett_visvocab-fig07.gif Você pode ter um catálogo de produtos em que cada produto tem várias páginas associadas a ele. Você pode desenhar uma estrutura para cada produto, mas por que perder tempo? Em vez disso, use o elemento de área iterativa, que é um conjunto de retângulos de bordas arredondadas. 46 Técnico em Informática Competência 03 Figura 32 - Um exemplo de uso de área iterativa para representar uma estrutura que se repete num catálogo de produtos. Fonte: http://iainstitute.org/pt/translations/garrett_visvocab-fig08.gif 3.2.6 Sistemas Programados Este curso se limita ao projeto de páginas estáticas, como vimos na introdução. No entanto, o web design pode participar de um projeto onde programadores desenvolvem um sistema que gera as páginas para o usuário. Nesse caso, conhecer conceitos de programação, como estruturas condicionais, se torna necessário. Como não faz parte do escopo desta disciplina, não abordamos os vocábulos referentes ao assunto. 3.2.7 Exemplo de Diagrama Dando continuidade a nossa sequência de exemplos, abaixo temos o diagrama feito para o site de nosso cantor. Talvez você tenha até percebido que não colocamos um vocábulo referente ao arquivo de vídeo do cantor, que o nosso empresário quer tanto mostrar. Isto acontece porque não vamos dispor o arquivo para download por conta dos diretos autorais. Planejamos mostrá-lo na página inicial e, por isso, tanto a página principal quanto o vídeo estão representados como o conteúdo recebido no vocábulo ‘principal’. Você pode ampliar seus conhecimentos, lendo o artigo original em português e descobrindo os vocábulos para sistemas web neste link: http://iainstitute.or g/pt/translations/0 00332.html 47 Web Design Competência 03 Existem diversas ferramentas que podem ser utilizadas para gerar um diagrama como o que está acima. Uma boa ferramenta online e gratuita, a qual foi utilizada para gerar este exemplo, pode ser acessada em www.gliffy.com Figura 33 – Diagrama de nosso site de exemplo. Fonte: Próprio autor. Agora é com você. Dê continuidade ao que você já fez anteriormente. Caso não tenha feito, terá que realizá-los antes que possa continuar. Lembre-se de que fazendo os exercícios é que se aprende de verdade. 48 Técnico em Informática CONCLUSÃO Encerramos a primeira parte desta competência, o planejamento. Mergulhamos no universo do problema, conhecendo sobre o cliente, usuários e até os funcionários. Fizemos uma análise do conteúdo utilizando técnicas consagradas do mercado e definimos a complexidade do site. Agora, temos um esqueleto do site, sabemos quanto trabalho teremos e até podemos explicar para o cliente por meio de diagramas, o que torna mais fácil a compreensão. No próximo caderno iremos nos concentrar na parte estética e na produção. Conheceremos um pouquinho sobre formas e cores. Depois, aprenderemos os padrões web para produção de sites. Até lá. 49 Web Design REFERÊNCIAS ROBBINS, Jeninifer Niederst. Aprendendo Web Design: Guia para iniciantes, 3ª edição – Porto Alegre: Bookman, 2010. KALBACH, James. Design de Navegação Web: Otimizando a experiência do usuário, Porto Alegre: Bookman, 2009. ZEMEL, Tácio. Web design responsivo: páginas adaptáveis para todos os dispositivos, São Paulo: Casa do Código, 2012. SILVA, Mauricio Samy. HTML 5: A linguagem de revolucionou a WEB, São Paulo: Novatec Editora, 2011. marcação que SILVA, Mauricio Samy. CSS3: Desenvolva aplicações web profissionais com o uso dos poderosos recursos de estilização das CSS3, São Paulo: Novatec Editora, 2012. SILVA, Mauricio Samy. Construindo sites com CSS e (X)HTML: Sites controlados por folhas de estilo em cascata, São Paulo: Novatec Editora, 2008. SILVA, Mauricio Samy. Criando sites com HTML: Sites de alta qualidade com HTML e CSS, São Paulo: Novatec Editora, 2008. SILVA, Mauricio Samy. JQuery - A Biblioteca do Programador Javascript, 2ª Edição – São Paulo: Novatec Editora, 2010. 50 Técnico em Informática MINICURRÍCULO DO PROFESSOR Ewerton Mendonça é formado em Sistemas de Informação pela UPE e Design pela UFPE, com mestrado em Ciência da Computação pela UFPE. Atualmente, é professor da Faculdade de Ciências e Letras de Caruaru – FAFICA e professor substituto no IFPE em Belo Jardim. Possui experiência na área de desenvolvimento WEB e design gráfico desde 1998. 51 Web Design
