Baixe o app para aproveitar ainda mais
Prévia do material em texto
Técnico em Informática Web Design 1 Técnico em Informática Web Design Técnico em Informática Web Design 2 Governador: Eduardo Henrique Accioly Campos Vice-Governador: João Soares Lyra Neto Secretário de Educação: José Ricardo Wanderley Dantas de Oliveira Secretário Executivo de Educação Profissional: Paulo Dutra Gerente Geral da Educação Profissional: Luciane Pulça Gestor de Educação a Distância: George Bento Catunda Coordenador do Curso: João Ferreira da Silva Júnior Professor Pesquisador: Carlos José Pereira da Silva Equipe Central de Educação a Distância: Andréia Guerra | Carlos Cunha | Éber Gomes | Gustavo Tavares | Maria de Lourdes Cordeiro Marques | Marcos Clemente | Morgana Leão| Mauro de Pinho Vieira| Reginaldo Filho. Técnico em Informática Web Design 3 INDICAÇÃO DE ÍCONES Os ícones são elementos gráficos utilizados para ampliar as formas de linguagem e facilitar a organização e a leitura hipertextual. Atenção: indica pontos de maior relevância no texto. Saiba mais: oferece novas informações que enriquecem o assunto ou “curiosidades” e notícias recentes relacionadas ao tema estudado. Glossário: indica a definição de um termo, palavra ou expressão utilizada no texto. Mídias Integradas: sempre que se desejar que os estudantes desenvolvam atividades empregando diferentes mídias: vídeos, filmes, jornais, ambiente AVA e outras. Atividades de aprendizagem: apresenta atividades em diferentes níveis de aprendizagem para que o estudante possa realizá-las e conferir o seu domínio do tema estudado. Técnico em Informática Web Design 4 COMPETÊNCIAS Elaborar um escopo de projeto para programação visual de Web. Planejar um website. Conhecer os modelos de representação e organização de websites. Elaborar layouts para website. Conhecer os padrões definidos pela W3C para representação e criação de websites. Formatar um website usando os mais modernos padrões de marcação de hipertexto. Planejar a identidade visual de web sites usando folhas de estilo. Construir um website. Técnico em Informática Web Design 5 CONTEXTUALIZAÇÃO DAS COMPETÊNCIAS DA DISCIPLINA WEB DESIGN NO CURSO DE INFORMÁTICA Olá pessoal, sou Carlos José, professor que tive a imensa satisfação e o privilegio de preparar o conteúdo dessa disciplina especialmente para vocês. O universo da Web Design que é um assunto que eu gosto muito e fui privilegiado em poder acompanhar a sua evolução assim que a Internet chegou ao Brasil em 1995 quando era iniciante como profissional nesta área. Comecei a ministrar aulas de Web Design em 2000 na Unibratec, de lá para cá muita coisa mudou e mudou para melhor. A minha missão com esta disciplina é compartilhar o meu conhecimento e experiência com você, capacitá-lo a construir websites com tudo que tem direito e mais um pouquinho. Para isso faz-se necessário que você aprenda a elabora um escopo de projeto, planejar como será o website, conhecer os modelos de representação e organização, elabora layouts e conhecer os padrões web. De posse dos conhecimentos acima citados, você estará pronto para aprender sobre as linguagens de marcação (HTML), as linguagens de formatação através das folhas de estilos (CSS) e por fim somando todas as competências e habilidades adquiridas, construir um website. São muitos assuntos, atividades, exercícios e muita leitura, mas conto com a sua disposição e fome de aprender para completar cada semana de estudo com o máximo empenho e disposição, pois só assim você será um excelente web design, conto com você. É isso! Carlos José Técnico em Informática Web Design 6 SUMÁRIO 1. INTRODUÇÃO ----------------------------------------------------------------------------------------- 10 2. ELABORAR UM ESCOPO DE PROJETO PARA PROGRAMAÇÃO VISUAL DE WEB --- 12 2.1. DEFINIÇÃO DOS OBJETIVOS ------------------------------------------------------------------- 12 2.2. QUESTIONÁRIO------------------------------------------------------------------------------------ 14 2.3. ANALISANDO AS RESPOSTAS ----------------------------------------------------------------- 14 2.4. PÚBLICO ALVO ------------------------------------------------------------------------------------- 15 2.5. PERSONAS E CENÁRIOS ------------------------------------------------------------------------- 17 2.6. ANÁLISE COMPETITIVA ------------------------------------------------------------------------- 18 2.7. ENTENDENDO O CONTEÚDO ------------------------------------------------------------------ 20 2.7.1. CONTEÚDO ESTÁTICO ------------------------------------------------------------------------ 20 2.7.2. CONTEÚDO DINÂMICO ---------------------------------------------------------------------- 21 2.7.3. FUNCIONAL/TRANSACIONAL -------------------------------------------------------------- 23 2.8. ENTENDENDO A TECNOLOGIA ---------------------------------------------------------------- 24 2.8.1. PLATAFORMAS --------------------------------------------------------------------------------- 24 2.8.2. BACK-END --------------------------------------------------------------------------------------- 25 2.8.3. FRONT-END ------------------------------------------------------------------------------------- 26 3. PLANEJAR UM WEBSITE ---------------------------------------------------------------------------- 28 3.1. CARD SORTING ------------------------------------------------------------------------------------ 29 3.1.1. O PROCESSO ------------------------------------------------------------------------------------ 31 3.1.2. CONSOLIDAÇÃO DOS DADOS -------------------------------------------------------------- 32 3.1.3. INVENTÁRIO DE CONTEÚDO --------------------------------------------------------------- 33 3.2. SISTEMA DE NAVEGAÇÃO ---------------------------------------------------------------------- 35 Técnico em Informática Web Design 7 3.2.1. SISTEMA DE NAVEGAÇÃO EMBUTIDO -------------------------------------------------- 36 3.3. SISTEMA DE BUSCA ------------------------------------------------------------------------------ 45 4. CONHECER OS MODELOS DE REPRESENTAÇÃO E ORGANIZAÇÃO DE WEBSITE --- 48 4.1. SISTEMA DE NAVEGAÇÃO REMOTO -------------------------------------------------------- 48 4.1.1. MAPA DO SITE---------------------------------------------------------------------------------- 48 4.1.2. ÍNDICE REMISSIVO ---------------------------------------------------------------------------- 50 4.2. FLUXO DE NAVEGAÇÃO ------------------------------------------------------------------------- 51 4.2.1. REPRESENTAÇÃO DOS ELEMENTOS SIMPLES ----------------------------------------- 52 4.2.2. REPRESENTAÇÃO DOS ELEMENTOS CONDICIONAIS -------------------------------- 57 5. ELABORAR LAYOUTS PARA WEBSITE----------------------------------------------------------- 62 5.1. PROJETAR UMA LÓGICA VISUAL ------------------------------------------------------------- 62 5.1.1. LEIS DA GESTALT ------------------------------------------------------------------------------- 64 5.2. CRIAR TEMPLATES -------------------------------------------------------------------------------- 68 5.3. PROTOTIPAÇÃO ----------------------------------------------------------------------------------- 70 5.4. CONSTRUINDO WIREFRAME ------------------------------------------------------------------ 71 6. CONHECER OS PADRÕES DEFINIDOS PELA W3C PARA REPRESENTAÇÃO E CRIAÇÃO DE WEBSITES------------------------------------------------------------------------------------ 74 6.1. FUNDAMENTOS WEB ----------------------------------------------------------------------------74 6.2. HISTÓRIA DA HTML ------------------------------------------------------------------------------ 81 6.3. REQUISITOS SINTÁTICOS DA XHTML -------------------------------------------------------- 83 6.4. A DECLARAÇÃO DOCTYPE ---------------------------------------------------------------------- 85 7. FORMATAR UM WEBSITE USANDO OS MAIS MODERNOS PADRÕES DE MARCAÇÃO DE HIPERTEXTO ---------------------------------------------------------------------------- 90 7.1. INTRODUÇÃO A LINGUAGEM DE MARCAÇÃO ------------------------------------------- 91 Técnico em Informática Web Design 8 7.2. MARCAÇÃO DE TEXTO -------------------------------------------------------------------------- 94 7.3. MARCAÇÃO DE LISTAS ------------------------------------------------------------------------ 101 7.4. MARCAÇÃO DE LINKS ------------------------------------------------------------------------- 102 7.5. MARCAÇÃO DE IMAGENS -------------------------------------------------------------------- 107 7.6. MARCAÇÃO DE TABELAS --------------------------------------------------------------------- 109 7.7. FORMULÁRIOS ---------------------------------------------------------------------------------- 112 8. PLANEJAR A IDENTIDADE VISUAL DE WEB SITES USANDO FOLHAS DE ESTILO -- 116 8.1. FUNDAMENTOS CSS --------------------------------------------------------------------------- 116 8.2. BOX MODEL -------------------------------------------------------------------------------------- 124 8.2.1. PROPRIEDADES CSS PARA BOX MODEL ---------------------------------------------- 127 8.3. POSICIONAMENTO CSS ----------------------------------------------------------------------- 133 8.4. SELETORES, HERANÇA E EFEITO CASCATA ---------------------------------------------- 140 8.4.1. ÁRVORE DO DOCUMENTO HTML ------------------------------------------------------- 140 8.4.2. SELETORES ------------------------------------------------------------------------------------- 141 8.4.3. HERANÇA CSS --------------------------------------------------------------------------------- 155 8.4.4. EFEITO CASCATA ----------------------------------------------------------------------------- 156 8.4.5. DIRETIVA !IMPORTANT -------------------------------------------------------------------- 157 8.5. FONTE E TEXTO ---------------------------------------------------------------------------------- 157 8.5.1. PROPRIEDADE FONT ------------------------------------------------------------------------ 158 8.5.2. PROPRIEDADE TEXT ------------------------------------------------------------------------ 165 8.6. CORES E BACKGROUND ----------------------------------------------------------------------- 167 8.6.1. PROPRIEDADE COLOR ---------------------------------------------------------------------- 167 8.6.2. PROPRIEDADE BACKGROUND ----------------------------------------------------------- 170 8.7. BORDAS E SOMBRAS -------------------------------------------------------------------------- 177 Técnico em Informática Web Design 9 8.8. LAYOUT MULTICOLUNAS --------------------------------------------------------------------- 179 8.9. LAYOUT RESPONSIVO ------------------------------------------------------------------------- 183 8.10. TRANSIÇÕES -------------------------------------------------------------------------------------- 184 9. CONSTRUIR UM WEBSITE ----------------------------------------------------------------------- 190 9.1. INTRODUÇÃO AO JQUERY ------------------------------------------------------------------- 190 9.2. INSTALANDO O JQUERY ---------------------------------------------------------------------- 191 9.3. JQUERY NA PRATICA --------------------------------------------------------------------------- 193 9.3.1. SELETORES JQUERY ------------------------------------------------------------------------- 195 9.3.2. MANIPULAÇÃO DO DOM ----------------------------------------------------------------- 204 9.3.3. EVENTOS --------------------------------------------------------------------------------------- 211 9.4. FRAMEWORK ------------------------------------------------------------------------------------ 212 REFERÊNCIAS ----------------------------------------------------------------------------------------------- 215 CURRÍCULO DO PROFESSOR-PESQUISADOR ------------------------------------------------------ 218 Técnico em Informática Web Design 10 1. INTRODUÇÃO Antes de falar sobre qualquer assunto, quero deixar você por dentro de como surgiu à interconexão dos computadores que chamamos de Internet. Capitalismo e socialismo, conflitos de ordem política, econômica, social e militar entre Estados Unidos e União Soviética originaram a chamada corrida espacial tecnológica, passada no período da guerra fria, que deu origem a diversos segmentos tecnológicos utilizados por todos nós nos dias de hoje. Por volta da década 1950, o presidente norte americano Dwight Eisenhower anuncia a intenção de seu país em lançar um satélite artificial em volta da orbita da terra. No entanto, a Rússia saiu na frente lançando o Sputnik que fazia transmissões de rádio. No auge da guerra fria, em uma disputa chegar em segundo lugar onde só existiam dois competidores, foi de mais para os Estados Unidos. Deu início à corrida espacial com a criação da ARPA (Advanced Research Projects Agency) com o objetivo de criar mecanismos de defesa avançados tecnologicamente aos quais existiam na época. Na criação desses mecanismos de defesa, alguns cientistas concentraram seus esforços na transmissão de dados eletrônicos. O cientista John Licklider propõe a criação da rede galáctica, uma visão futurista para a interligação de milhares de computadores inspirado como as galáxias se organizam no cosmo, John Licklider foi transferido para ARPA com a finalidade de desenvolver a rede galáctica que tinha duas premissas: Cada computador deveria ter uma porta de entrada permanentemente aberta para outros computadores, permitindo o acesso a dados comuns a todos e não aos dados particulares de cada um. As modificações particulares em cada computador não poderiam afetar os outros computadores ligados à rede. Técnico em Informática Web Design 11 Essas premissas deram início à tecnologia de troca de pacotes que foi fundamental para o nascimento da rede de computadores. Isso mesmo, os princípios definidos pelo cientista John Licklider nos proporcionaram a Internet que temos hoje, um grande e complexo emaranhado de computadores interligados e trocando informações. Com isso apresento para você que esta fazendo este curso e principalmente a disciplina Web Design o ambiente onde os websites são publicados: a Internet. Você vai aprender a projetar e desenvolver websites que serão armazenados em computadores e estes interligados a outros e a outros e assim por diante. Agora que você tem uma ideia do ambiente de trabalho, vamos aprender as técnicas para projetar, criação e desenvolvimento de websites para Internet. Técnico em Informática Web Design 12 2. ELABORAR UM ESCOPO DE PROJETO PARA PROGRAMAÇÃO VISUAL DE WEB Quando se pensa em projetar um website a nossa primeira atitude é ir para o computador abrir um programa gráfico ou um editor HTML e começar a produzir todo o visual. É muito tentador, mais quero que você entenda que não é assim que funcionar! A palavra design significa projeto, muitos se enganam achando que é desenho, na língua inglesa desenho é draw. Você pode estar se perguntando: o que ele quer dizer com isso? Essa sua indagação é muito pertinente, pois ter um entendimento claro e precoce do que você vai projetar economiza tempo e dinheiro em longo prazo. Por isso, iremos aprender as técnicas da arquitetura de informaçãopara poder projetar um website com o seguinte foco: Definição dos objetivos Público alvo Personas e cenários Análise competitiva Entendendo o conteúdo Entendendo a tecnologia 2.1. Definição dos objetivos Você pode achar óbvio demais definir objetivos, pense um pouco...quantos websites são construídos sem estrutura, sem planejamento e por fim sem objetivo. As empresas quando decidem fazer um website, querem ganhar mais dinheiro, serem conhecidas, mostrar seus produtos e/ou serviços. Ter um website porquê todo mundo tem, não é um bom objetivo, pois se eu não sei o que quero alcançar como chegarei lá? Se você foi convidado para projetar um website pense Técnico em Informática Web Design 13 nisso: por que esta empresa esta iniciando este projeto só agora? Precisamos encontrar os motivos, causas, ou seja, os objetivos. Segue abaixo uma lista de objetivos gerais: Ganhar novos clientes/membros; Aumentar a fidelização dos clientes/membros; Solidificar a marca; Além dos objetivos comuns, pensar em objetivos específicos: A missão da empresa; Propósito da empresa; Objetivos de curto e longo prazo; O público alvo da empresa; Os objetivos gerais e específicos formam o escopo do projeto, no dicionário Houaiss da língua portuguesa, escopo significa ponto em que se mira; alvo; intenção; objetivo. Tudo isso faz parte do escopo de nosso projeto. Figura 1 – Fluxo de trabalho para definição do escopo do projeto Fonte: O Autor (2012). Técnico em Informática Web Design 14 Vamos aprender a primeira técnica para realizar o levantamento dos objetivos: questionário! Isso mesmo, realizar todo e qualquer tipo de pergunta que nos ajude a entender o que o cliente quer com o projeto do website. 2.2. Questionário Com quem eu devo realizar o questionário? Essa é uma excelente pergunta! Dependendo do porte da empresa, você deve falar até com o dono/proprietário, em outros casos com o chefe/diretor do departamento de marketing . O que devo perguntar? Outra excelente pergunta! Se algumas perguntas básicas: Qual é o propósito da empresa em criar um website? Quais os objetivos da empresa a curto e a longo prazo com o website? Qual é o público alvo do website? Por que as pessoas irão visitar o website? Pense em outras perguntas, alias, faça todas as perguntas necessárias e não fique com dúvidas quanto à resposta, não tenha vergonha de dizer que não entendeu, pois a sua dúvida ou falta de clareza vai impactar no projeto. 2.3. Analisando as respostas Nessa etapa vamos passar um pente fino, ou seja, realizar um filtro nas respostas, pois se você realizou o questionário com mais de uma pessoa, observe se as respostas são iguais e descarte as que não forem iguais, faça uma mistura delas. Separe a(s) resposta(s) referente ao público alvo, pois será o nosso próximo tópico. Realizado o filtro das respostas, de forma objetiva pegue cada resposta e transforme em Técnico em Informática Web Design 15 pequenos parágrafos de no máximo 3 (três) linhas por ordem de prioridade, dessa forma você terá os objetivos do website . Para finalizar esta etapa, mostre esse conjunto de respostas que se tornaram o objetivo do seu projeto para o cliente aprovar, assim você terá certeza da clareza dos objetivos levantados. Figura 2 – Estabelecendo os objetivos Fonte: O Autor (2012). 2.4. Público alvo De posse dos objetivos, o mais importante agora é determinar o público alvo. O público alvo na verdade serão os usuários do website é para eles que vamos projetar. É por isso que precisamos conhecê-los! Como assim? Vou entrevistar quantas mil pessoas? Calma não precisa entrar em pânico. O público alvo geralmente é definido por: Faixa etária; Por classe social; Poder de compra; Por gênero; Técnico em Informática Web Design 16 Nível educacional; Conhecimento tecnológico; Dentro de cada definição podemos considerar: Cada usuário tem necessidades diferentes; Pensando assim, ou seja, na definição de cada público alvo e considerando a necessidade de cada um deles, o nosso projeto terá sucesso, por isso que essa etapa é muito importante. Vamos analisar o seguinte exemplo: Um website para uma escola infantil de 0 a 7 anos. Vamos à pergunta chave: qual é o público alvo? Isso mesmo! Pais que tenham crianças nessa faixa etária! Vamos analisar outro exemplo: Um website para venda de carros. Qual o público alvo? Esse é mais complexo! Classificando os públicos: Compradores – pessoas interessadas e necessitadas por um carro Vendedores – os próprios vendedores da loja Negociantes – outras empresas que compram e vendem carros Neste exemplo, definimos por gênero. Agora analise a lista que consta o público alvo realizado na etapa dos objetivos com base no que aprendemos. Classifique o público alvo por ordem de importância. O foco nunca pode ser na tecnologia ou nas maquinas, mais sempre nos usuários e suas necessidades, comportamentos e experiências de navegação. Juliano Alvarenga traz um excelente artigo: Muito achismo e pouca certeza na análise de projetos - http://migre.me/bMvfC http://migre.me/bMvfC Técnico em Informática Web Design 17 2.5. Personas e cenários Você deve estar se perguntando: O que é personas? E o que isso tem haver com construção de websites? Pois bem, personas são descrições de personagens que representam perfis de usuários que refletem padrões de necessidades e comportamentos. Para melhorar o entendimento do público alvo, utilizaremos personas. Criando as personas: Identificar os atributos mais importantes que estabeleça uma diferença entre os usuários. Para realizar uma descrição dos usuários utilizando o website, vamos associar as personagens aos seus respectivos cenários. O cenário não passa de uma narrativa, uma estória vivenciada pela personagem (persona) no website. Criando cenários: Precisamos dar vida ao usuário. Dê um nome. Dê uma das tarefas obtidas na etapa objetivos/metas da lista de público alvo para ser realizado por ele no website. Por exemplo: José Pedro, 27 anos programador júnior. José Pedro recebeu uma proposta na empresa que trabalha para participar de uma capacitação e poder subir de cargo na empresa. Essa capacitação será à noite, mas nesse horário José Pedro está estudando na faculdade. Técnico em Informática Web Design 18 José Pedro decidiu trancar a faculdade para poder realizar essa capacitação e poder mudar de cargo. Ele decide entrar no website da faculdade para ter informações por quanto tempo ele pode trancar o curso. No website existem muitos links, mais ele decide clicar no link matriculas, neste encontra outro link para maiores informações. Na página maiores informações, existe um link para órgão especifico que trata de trancamentos, na página de trancamento o José Pedro fica sabendo que pode trancar o curso por 6 (seis) meses. Dessa forma José Pedro encontrou a informação que queria e mais o órgão da faculdade que ele pode procurar para realizar o trancamento. Pronto! Temos o personagem e o cenário e uma ideia de navegação pelo website. Para cada grupo de usuários, escreva um cenário – seja criativo, use a sua imaginação. 2.6. Análise competitiva Depois de ter conhecimento do público alvo você terá que conhecer a concorrência ou competidores do seu cliente no projeto do website. Para começar precisamos realizar um levantamento junto ao cliente sobre os seus concorrentes/competidores, precisamos saber o que eles estão fazendo em seus websites. Crie personas com necessidades especiais de acessibilidade, por exemplo: baixa visão, problemas de coordenaçãomotora, daltonismo, deficientes visuais, deficientes auditivos. O público alvo de um website governamental é povo brasileiro sem distinção. Personas e cenários para antecipar o futuro - http://migre.me/bMPhl por Frederick van Amstel. Acessibilidade – Portal Brasil, http://migre.me/bNAJA Portal de Acessibilidade, http://migre.me/bNAO1 http://migre.me/bMPhl http://migre.me/bNAJA http://migre.me/bNAO1 Técnico em Informática Web Design 19 Você pode se perguntar, por onde começar? Pelas características! Quais características? Ora com os objetivos do website como base para analisar os outros! Outra coisa pense nas funcionalidades do website da concorrência que sejam interessante para o seu projeto. Faça uma tabela contendo as características que você deseja analisar juntamente com os critérios de analise. Vejamos alguns critérios que você pode utilizar no projeto:Segue abaixo um exemplo: Tabela 1 – Características para análise dos concorrentes Características Gerais Site 1 Site 2 Site 3 Site 4 Design do site (1-10) 10 8 7 5 Layout (1-10) 10 10 10 10 Navegação (1-10) 9 2 5 7 Permite publicidade (1-10) 0 0 0 0 Estilo (1-10) 10 10 10 10 URL amigáveis (sim/não) Sim Não Não Não Personalização Site 1 Site 2 Site 3 Site 4 Página inicial personalizável (sim/não) Não Sim Sim Sim Newsletter por email (sim/não) Sim Sim Sim Sim RSS (sim/não) Não Não Não Sim Enquetes antigas (sim/não) Não Não Sim Não Tecnologia Site 1 Site 2 Site 3 Site 4 Javascript (sim/não) Sim Sim Sim Sim jQuery (sim/não) Sim Sim Sim Sim AJAX (sim/não) Sim Sim Sim Sim JAVA (sim/não) Não Não Não Não Banco de dados (sim/não) Sim Não Sim Não PHP (sim/não) Sim Não Sim Não Fonte: JOHN SHIPLE (2012) Técnico em Informática Web Design 20 As características acima são apenas alguns exemplos do que podemos analisar sobre a concorrência. Não fique limitado nas características acima, cada projeto tem características diferentes a serem analisadas. Colocamos site1, site2 etc para não ocupar tanto espaço na tabela, faça uma legenda indicando cada um dos sites analisados. Dependendo do projeto, é interessante escrever para cada site analisado os prós e contras bem como a inclusão das capturas de telas. 2.7. Entendendo o conteúdo Recapitulando, já definimos os objetivos/metas, o público alvo, personas e cenários e analisamos a concorrência/competidores nos resta entender o conteúdo do website. Quando me refiro a conteúdo, não estou me referindo a texto a ser digitado, muito pelo contrario, me refiro especificamente a três tipos de conteúdo: estático, dinâmico e funcional/transacional para cada um destes três segue uma explicação. 2.7.1. Conteúdo estático Consideramos como conteúdo estático todo o texto que foi criado com uma finalidade bem especifica de sempre informar a qualquer visitante do website sobre: Políticas de privacidade. Termos de uso. Copyright (direitos reservados). Regras de participação de um sorteio. Editais de um concurso e etc. Falando de forma técnica, este conteúdo foi criado com bastante antecedência para servir de informação para os usuários. Vejamos alguns exemplos: Técnico em Informática Web Design 21 Figura 3: Website Americanas.Com – Conteúdo Estático. Fonte: AMERICANAS (2012). Geralmente a política de privacidade, termos de uso, copyright são colocado no rodapé do website, na figura 3 mostramos a política de privacidade. Figura 4: Website saraiva.com – mais exemplos de conteúdo estático. Fonte: SARAIVA (2012). 2.7.2. Conteúdo dinâmico Este tipo de conteúdo é exatamente o oposto ao anterior, pois este conteúdo será criado de acordo com a navegação do usuário no website, por exemplo: Técnico em Informática Web Design 22 Catálogo de produtos. Imagine uma loja de produtos de informática com mil produtos! Se esse conteúdo fosse estático, seria necessário um documento HTML para cada produto – isso é totalmente inviável. Observe as figuras: Figura 5 – Busca de produtos em um website de produtos de informática Fonte: NAGEM (2012). Figura 6 – Busca de produtos em um website de produtos de informática Fonte: NAGEM (2012). Técnico em Informática Web Design 23 Observe que nas duas figuras foi utilizado o formulário de busca com critérios de busca diferente para cada um. Observe no quadro em destaque que o documento que exibe o retorno da busca é o mesmo: busca.php É isso que chamamos de conteúdo dinâmico, não tinha como criar um documento HTML para cada busca realizada pelo usuário. Neste caso é mais aconselhável criar um documento único capaz de exibir conteúdos variados. 2.7.3. Funcional/Transacional É considerado conteúdo funcional/transacional todo e qualquer formulário utilizado no website, por exemplo: Formulário de login. o Funcionalidade: permitir que usuários cadastrados tenham acesso a conteúdos exclusivos. o Transação: verificar se o nome de usuário e senha digitados conferem com os cadastrados no website. Figura 7 – Exemplos de conteúdo funcional/transacional Fonte: GLOBO; WORDPRESS (2012). De posse dessas informações, você pode criar o que chamamos de inventário de conteúdo, ou seja, pegue cada parte de conteúdo (estático, dinâmico e funcional/transacional) e defina Técnico em Informática Web Design 24 cada uma no projeto do website com base na analise competitiva, dessa forma você terá a estrutura do website. 2.8. Entendendo a tecnologia Assim como um engenheiro civil precisa entender os tipos de materiais e suas propriedades para utilizar em uma construção, você precisar ter um entendimento da tecnologia por traz do desenvolvimento de um website. Nessa fase inicial do projeto temos três níveis de tecnologia: Plataformas Back-end Front-end Para que você possa entender o que cada tecnologia representa, vejamos cada uma de forma detalhada. 2.8.1. Plataformas Com a evolução tecnológica dos equipamentos, o conteúdo do website pode ser distribuído e visualizado em diferentes tipos de dispositivos, por exemplo: Smartphone Tablet Desktop Smart tv Você precisa entender as limitações de cada dispositivo para poder projetar levando em consideração os seguintes aspectos: Tamanho do display Técnico em Informática Web Design 25 o A lista anterior foi iniciada listando exatamente do menor para o maior. Especificamente para os smartphone e tablet, podemos visual na horizontal e vertical – medidas diferentes para cada visualização. Interação o Por clique e por gestos. Um recurso bastante utilizado nos desktop é o rollover, nos dispositivos móveis não existe rollover! Taxa de conexão o Baixar um conteúdo que foi projeto exclusivamente para um desktop direto em um smartphone nem pensar! É necessário solucionar este problema, projetando o conteúdo para todos. Você pode estar se perguntando ou pensando: Como se faz isso? Este tópico é informativo, mais você vai aprender como fazer isso mais a frente, por enquanto estamos no inicio definindo o escopo do projeto para que na fase de desenvolvimento não sejamos pegos de surpresa e tenhamos que mudar todo o projeto. 2.8.2. Back-end É a tecnologia utilizada nos conteúdos dinâmicos, como foi explicado na seção 2.5.2. Essa tecnologia é utilizada no lado do servidor, isso mesmo um servidor de arquivos dentro de uma estrutura de rede de computadores. Essa tecnologia abrange as seguintes questões: Banco de dados Áreas protegidas por senhas Firewalls Personalização de perfis de usuários Sistemas de gerenciamento de conteúdo (CMS) Linguagem de programação o PHP, ASP, ASP.NET, C#, JSP, Rubi on Rails e etc Técnicoem Informática Web Design 26 2.8.3. Front-end É a tecnologia utilizada para criação do design das interfaces. Essa tecnologia é utilizada no lado do cliente diretamente no browser (navegador) é o que você vai aprender nessa disciplina. Essa tecnologia abrange as questões de trabalhar em camadas: Camada de Informação o O conteúdo textual do documento web com as marcações HTML. o O HTML é a base sobre a qual as outras camadas serão assentadas. Camada de Apresentação o Controlar a aparência visual, formatando com CSS todo o conteúdo textual que contém as marcações HTML que deverá aparecer no navegador. Camada de Comportamento o Inclui os scripts jQuery de programação que tornam a experiência do usuário interativa. HTML é uma sigla em inglês para Hyper Text Markup Language, em português significa linguagem de marcação de hipertexto. Hipertexto tem como principal característica interligar outros documentos na web. CSS é uma sigla em inglês para Cascading Style Sheet, em português significa folhas de estilos em cascata. É considerado estilo ou estilizar uma marcação em um documento HTML alterando as fontes, cores, posicionamento e etc. A revista Wide Edição 81 Novembro/Dezembro 2010 trouxe em destaque a matéria: Tecnologia – Especialistas falam da importância do front-end engineer Segue abaixo algumas frases dessa matéria: Grandes empresas, como Yahoo!, Google, Twitter, Microsoft e Adobe, investem pesado em front- end. Rafael Mumme – desenvolvedor front-end sênior na HUGE de Nova Iorque. A falta de um profissional especializado nessa área pode representar risco ao projeto. Eduardo Lundgren – engenheiro de software na Liferay Inc. O domínio de especialidades de front-end pela equipe é essencial para o sucesso de um produto na web. Guilherme Chapiewski – Sr. Engineering Manager no Yahoo! Inc. Leia também: O Front-end auxiliando o Marketing Digital por Deivid Marque - http://migre.me/c16oo http://migre.me/c16oo Técnico em Informática Web Design 27 Finalizada a etapa de elaboração do escopo do projeto o que aprendemos: A palavra design significa projeto Precisamos definir os objetivo/metas para website Precisamos conhecer o público alvo – a audiência do website Criar personagens e cenários para conhecer melhor o público alvo e a forma de navegação no website Conhecer e analisar a concorrência/competidores do cliente Entender e onde aplicar as formas de conteúdo E por fim entender a tecnologia tanto na apresentação do conteúdo quanto no desenvolvimento do mesmo no projeto do website Técnico em Informática Web Design 28 3. PLANEJAR UM WEBSITE Vencida a fase de elaboração do escopo do projeto, vamos avançar no assunto aprendendo a planejar um website. Nessa fase você vai aprender a colocar ordem em meio a uma desordem. Como assim? Você vai aprender a classificar o conteúdo para website. Como farei isso? Boa pergunta! Rotulando, agrupando e categorizando. Rotular é julgar, ou seja, ter um preconceito – uma opinião formada sobre alguma coisa, por exemplo, observe o grupo de palavras abaixo e tente rotular cada palavra levando em consideração que algumas palavras possam receber o mesmo rótulo. Caso existam palavras que você não sabe o significado, não tem problema, separe estas palavras e mais a frente veremos o que fazer com elas. Agrupar é juntar em grupos ou reunir em grupos. Agora escreva as palavras acima em uma folha agrupando-as pelo rótulo que você determinou anteriormente, separe a parte as palavras que você não conhece ou não sabe o significado. Não fique tentado ver o resultado que está logo abaixo, pois você precisa aprender fazendo e não olhando apenas. Aprendiz Aluno Colega Acadêmico Universitário Discípulo Educando Pupilo Estagiário Estudante Tutelado Técnico em Informática Web Design 29 Categorizar é classificar ou separar por categoria. Agora que você separou as palavras em grupos a partir do pré-julgamento que é o rótulo, você deve escrever uma palavra acima dos grupos a fim de classificar as palavras que estão em cada grupo. Mais uma vez peço para não olhar o resultado que está logo abaixo. Finalizamos o processo de ordem em meio a uma desordem em apenas três passos – Rotulando, Agrupando e Categorizando. Com essa introdução vamos aprender as técnicas para poder planejar um website com o seguinte foco: Card Sorting Sistema de navegação Sistema de busca 3.1. Card sorting Traduzindo o termo acima – classificação de cartões, que vai nos ajudar a realizar uma avaliação com o público alvo que definimos na seção 2.2 a fim de criar a navegação do Aprendiz Estagiário Acadêmico Universitário Educando Aluno Colega Estudante Discípulo Pupilo Tutelado Aprendiz Estagiário Acadêmico Universitário Educando Aluno Colega Estudante Discípulo Pupilo Tutelado Trabalho Formal Coloquial Fábula Direito Técnico em Informática Web Design 30 website. Essa técnica é utilizada para descobrir como o usuário classifica uma determinada informação em sua mente. Como farei isso? Você vai criar um conjunto de cartões que contém todas as palavras a serem utilizados no website já com as categorias e entregar para os participantes dessa avaliação, eles irão colocar ordem em meio à desordem utilizando o processo que você acabou de aprender – Rotular, Agrupar e Classificar. Você pode estar se questionando: por que é necessário fazer isso? Esse é um ótimo questionamento! Respondendo ao questionamento: o website não será projetado para você utilizar e sim para o público alvo (usuários), ou seja, pessoas que tenham ou não conhecimento sobre navegação web. Existem duas formas de aplicar o Card Sorting Card Sorting Aberto o Nos cartões não constam as categorias previamente definidas e os participantes é que definem as categorias. Card Sorting Fechado o Nos cartões constam as categorias previamente definidas por você. Qual das duas formas será utilizada? Pela complexidade do Card Sorting Aberto que gera inúmeras variáveis na criação das categorias por parte dos participantes, vamos utilizar sempre o Card Sorting Fechado, dessa forma, você terá um controle melhor quando for consolidar os dados. Técnico em Informática Web Design 31 Figura 8 – exemplos de Card Sorting Fonte: LOCALWEB (2012) 3.1.1. O processo Entregue ao usuário uma série de cartões com as palavras e as categorias tudo junto e misturado. Só pra reforçar vamos utilizar o Card Sorting Fechado. Informe para o usuário apenas o necessário, que ele deve agrupar os cartões um abaixo do outro de forma que todos os cartões tenham uma relação entre eles e o primeiro cartão classifica (define) o grupo de cartões abaixo, com isso será realizado o processo que você aprendeu – Rotulagem, Agrupamento e Classificação. Fique apenas observando, caso ele não saiba o significado de alguma palavra que está no cartão, peça para deixar a parte. Agora sim vou explicar o por quê. Achou que eu tinha esquecido? Às vezes por nosso nível de conhecimento e vocabulário colocamos palavras que fazem parte do nosso dia-a-dia, mas não faz parte do repertório da maioria das pessoas. Card-sorting é uma técnica de um projeto centrado no usuário e tem como objetivo principal descobrir como as pessoas organizam as informações dentro de um site. Leia o artigo completo do Rogério Pereira Card Sorting na prática em http://migre.me/c7wU7 http://migre.me/c7wU7 Técnico em Informática Web Design 32 Por exemplo, a palavra docente define o profissionalque leciona, mas professor define melhor o profissional que da aula, percebeu a diferença? Pergunte o porquê de ter separado o cartão identifique e faça as anotações necessárias. Se o mesmo cartão for separado várias vezes, é um indicador que: a palavra deve ser trocada por um sinônimo ou não deva fazer parte no website. Desenvolvimento Recursos: Mesa Cartolina branca ou colorida Tempo e quantidade: Deve durar de 20 a 40 minutos por pessoa O mínimo são 15 pessoas Dados: Tire foto da classificação de cada participante Escreva as observações de cada participante 3.1.2. Consolidação dos dados Nesta etapa você vai reunir todas as fotos e observações realizadas no Card Sorting com os participantes em uma única classificação que chamamos de consolidar, que significa – firmar ou fortalecer. Como farei isso? Vamos às etapas! Etapa 1: Comece analisando a primeira coluna de todas as fotos em busca de repetições na classificação, se as repetições passar dos 50% será aceito como a classificação final. Repita essa análise com todas as outras colunas. Técnico em Informática Web Design 33 Etapa 2: Monte a classificação final e tire uma foto, esta foto fará parte no documento do nosso projeto com as devidas observações caso seja necessário. Figura 9 – Classificação final da Escola Criativa Fonte: O Autor (2012) 3.1.3. Inventário de conteúdo Quando você terminar de consolidar os dados, precisamos colocar estas informações em uma tabela chamada Inventário de conteúdo. Você pode utilizar uma Planilha eletrônica para que os dados fiquem mais organizados, nessa tabela constará o resultado final da classificação por ordem de níveis do 0 (zero) que sempre será a Home até o nível mais baixo a partir da Home. Técnico em Informática Web Design 34 Figura 10 – Inventário de conteúdo da Escola Criativa Fonte: O Autor (2012) No exemplo mostrado temos 7 (sete) níveis e em cada nível colocamos os seus sub-níveis. Observe que no inventário de conteúdo descriminamos o máximo possível inclusive os três tipos de conteúdo que você já aprendeu – Estático, Dinâmico e Funcional/Transacional. Agora que temos uma visão macro do website com a classificação das informações em nosso inventário de conteúdo, podemos considerar que as categorias identificam todo um conteúdo relacionado a essa categoria. Por exemplo, a categoria Quem somos está relacionada a todo o conteúdo que os visitantes desse website podem conhecer e ter a respeito da escola. Existem softwares para realizar o Card-sorting, seguem abaixo alguns: CardZort – http:// http://www.cardzort.com/cardzort/ CardsWord - http://sourceforge.net/projects/cardsword/ WebSort - http://uxpunk.com/websort/ http://www.cardzort.com/cardzort/ http://sourceforge.net/projects/cardsword/ http://uxpunk.com/websort/ Técnico em Informática Web Design 35 3.2. Sistema de navegação A navegação web tem um papel importante com o usuário, pois provê acesso a informação de forma melhor para encontrar a informação desejada. Espera-se que a navegação web seja transparente, tão fácil aponto de não interferir. Um bom exemplo disso é o arbitro de futebol, quando ele não interfere no jogo não é notado, mas basta uma decisão errada, passa ser percebido e desce sobre ele a culpa do resultado final do jogo. Você vai aprender a não atrapalhar o usuário e sim facilitar a vida dele com as técnicas de navegação web. Vamos a algumas definições: No dicionário Houaiss navegar é: percorrer, viajar por, consultar sequencialmente diversos hipertextos. Na enciclopédia aberta Wikipédia navegação é: ciência, arte, pratica ou tecnologia, de planejar e executar uma viagem de um ponto de partida até o ponto de destino. E a navegação web? É do mesmo jeito! Pois bem, sua função é indicar ao usuário onde ele está e mostrar o caminho para que ele possa chegar ao destino. Estabelecer pontos de referências e uma sinalização que possa orientar o usuário. Para facilitar a sua vida, seguem alguns princípios básicos de navegação web em forma de recomendação: 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: evitar o excesso de cliques Claro: o usuário não pode se sentir perdido Adequado: ao perfil do usuário Junto com essas recomendações somamos aos elementos do sistema de navegação que estão divididos em duas categorias: Técnico em Informática Web Design 36 Sistema de navegação embutido Sistema de navegação remoto 3.2.1. Sistema de navegação embutido Este sistema é formado pelos elementos de navegação que se apresentam junto ao conteúdo do website com a função específica de melhorar e flexibilizar a navegação do usuário. Logotipo Barra de navegação global Barra de navegação local Menu drop-down Megamenu Trilha de migalha de pão (Bread crumb) Conteúdo cruzado (Cross content) Erro 404 Navegação por passos Navegação por paginação Navegação de abas Navegação em camadas Nuvens de tags Para que você possa ter um entendimento melhor, vamos mostrar cada um dos elementos embutidos. O sistema de navegação remoto será estudado na próxima competência. Técnico em Informática Web Design 37 Logotipo Além de identificar o website, serve como um retorno rápido ao início de tudo através de um clique. Figura 11 – Logotipo das lojas online Saraiva, Submarino e Americanas Fonte: SARAIVA; SUBMARINO; AMERICANAS (2012) Barra de navegação global Esse modelo de organização traz os links de forma categorizados. Figura 12 – Barra de navegação global da loja online Americanas Fonte: AMERICANAS (2012) Técnico em Informática Web Design 38 Barra de navegação local Esse modelo de organização é utilizado comumente em conjunto com a navegação global, pois a partir de uma categoria macro podemos ter acesso às informações das subcategorias e navegar por elas. Figura 13 – Barra de navegação local da loja online americanas Fonte: AMERICANAS (2012) Menu drop-down É um modelo de seleção mais básico para listar de forma rápida as subcategorias de uma categoria específica. Figura 14 – Menu drop-down da loja online submarino Fonte: SUBMARINO (2012) Técnico em Informática Web Design 39 Megamenu É uma variação do menu drop-down na tentativa de expor todas as categorias com suas subcategoria agrupadas em um único local. Figura 15 – Aplicação do megamenu nas lojas online rei e americanas Fonte: REI (2012) Fonte: AMERICANAS (2012) Trilha de migalha de pão (Bread crumb) Técnico em Informática Web Design 40 Esse modelo serve para informar ao usuário duas coisas básicas na navegação: onde ele está e de onde ele veio. A migalha de pão é apresentada na forma de link possibilitando o usuário realizar uma navegação hierárquica. Figura 16 – Aplicação do brean crumb na loja online submarino Fonte: SUBMARINO (2012) Conteúdo cruzado (Cross contente) É apresentado ao usuário uma serie de links relacionados com as buscas realizada no website, bem como as compras realizadas por um determinado usuário cadastrado no website. Figura 17 – Loja online submarino, realizado uma busca com a palavra-chave HTML Fonte: SUBMARINO (2012) Figura 18 – Conteúdo cruzado em relação à busca anterior com a palavra-chave HTML Técnico em Informática Web Design 41 Fonte: SUBMARINO (2012) O conteúdo cruzado (Cross content) é exibido na mesma página com a busca, apenas dividi as imagenspara uma melhor visualização. Erro 404 Esse modelo de navegação é muito importante por informar ao usuário que o documento ou informação que o usuário quer visualizar não foi encontrado no servidor. Junto com a mensagem de erro, faz-se necessário servir o usuário com alternativas de navegação para que ele possa sair dessa situação. Figura 19 – Loja online do Submarino exibindo a página de erro 404 Fonte: SUBMARINO (2012) Técnico em Informática Web Design 42 Figura 20 – 404.html padrão do servidor Fonte: O Autor (2012) Navegação por passos Esse modelo permite ao usuário mover-se sequencialmente por um determinado conteúdo. Por exemplo, um conteúdo funcional/transacional como um cadastro em uma loja online. Figura 21 – Loja online da Livraria Saraiva, formulário de cadastro para novos clientes. Fonte: SARAIVA (2012) A mensagem de erro 404 é um documento HTML (404.html) que deve ser criado por você e colocada no servidor onde estiver hospedado o website. Caso esse documento não exista, será retornado para o usuário o documento 404.html padrão do servidor. Técnico em Informática Web Design 43 Navegação por paginação Esse modelo é normalmente utilizado em um retorno de uma busca listando os resultados ou em um catálogo de produtos e está sempre relacionado a um conteúdo dinâmico. Figura 22 – Navegação por paginação loja online do Walmart Fonte: WALMART (2012) Navegação de abas Esse modelo é utilizado para organizar melhor conteúdos longos ou organizar um conteúdo pequeno de forma categorizada semelhante a barra de navegação global com uma diferença importante – o conteúdo não é carregado novamente, ou seja, todo conteúdo é carregado de uma única vez e distribuído nas aba. Figura 23 – Website para criação de mapa de site – Write Maps Fonte: WRITEMAPS (2012) Técnico em Informática Web Design 44 Navegação em camadas Esse modelo é bastante utilizado para apresentar um determinado conteúdo em uma camada acima do conteúdo que está sendo visualizado. Figura 24 – Website 978.gs, através da categoria downloads clicando no item 300 grid system Fonte: 978 (2012) Figura 25 – O conteúdo do item 300 grid system é aberto sobre o conteúdo da categoria downloads em uma camada Fonte: 978 (2012) Nuvens de tags Esse mecanismo é bastante utilizado em conjunto com um conteúdo dinâmico e geralmente aplicado em blog`s e portais de notícias onde as tags (palavras relevantes) variam de Técnico em Informática Web Design 45 tamanho conforme a quantidade de conteúdo relacionada a tag, por exemplo, HTML5, CSS3, nesse caso existem mais conteúdos relevantes para HTML5 do que CSS3. Figura 26 – Nuvem de tags no blog carlosjose.net Fonte: CARLOSJOSE (2012) A maioria dos exemplos utilizados foram lojas online por utilizarem a maioria do sistema de navegação embutido. 3.3. Sistema de busca O sistema de busca é considerado uma alternativa ao sistema de navegação. A busca é uma consulta por uma palavra-chave, a navegação permite que os usuários naveguem pelo resultado da busca dessa palavra-chave. Você deve estar se perguntando: então devo integrar a busca com a navegação? Isso mesmo! Deve ser tão transparente aos usuários que eles nem percebam essa integração. O que devo saber ou fazer pra chegar nesse resultado? Excelente pergunta! Segue algumas recomendações que vão lhe ajudar a fazer essa integração: Explique sempre ao usuário de onde os resultados vieram Informe sempre na forma de mensagem o que o usuário acabou de fazer Repita o formulário de busca e a palavra-chave utilizada no resultado da busca Informe quantos itens foram encontrados Utilize a navegação por paginação Técnico em Informática Web Design 46 Figura 27 – Busca realizada na loja online do Walmart – palavra-chave: tablet Fonte: WALMART (2012) E quando não encontramos o que buscamos? O que fazer? Mais importante que um resultado de uma busca é não ter resultado em uma busca daquilo que queremos encontrar. Segue algumas recomendações para integrar a busca sem resultados: Informe sempre de forma clara e objetiva que não foi encontrado o termo pesquisado Peça ao usuário para revisar a palavra-chave caso tenha escrito errado Repita o formulário de busca e a palavra-chave utilizada no resultado da busca Figura 28 – Busca realizada na Revista Científica Tecnologus – palavra-chave: informática Fonte: TECNOLOGUS (2012) Finalizada a etapa de planejar um website o que aprendemos: Técnico em Informática Web Design 47 A colocar ordem em meio da uma desordem – Rotulando, Agrupando e Categorizando Rotular, agrupar e categorizar faz parte da técnica Card Sorting que analisa a forma como o usuário classifica determinados dados. Que existem duas formas de aplicar o Card Sorting – aberto e fechado. Que devemos aplicar o Card Sorting com no mínimo 15 participantes que se enquadrem no público-alvo do website Que devemos consolidar os dados realizados no Card Sorting A consolidar os dados do Card Sorting para preencher o inventário de conteúdo Que o sistema de navegação possui elementos embutidos ao design do website para melhorar e flexibilizar a navegação do usuário Que o sistema de busca é considerado uma alternativa ao sistema de sistema de navegação e que deve ser integrado ao website Técnico em Informática Web Design 48 4. CONHECER OS MODELOS DE REPRESENTAÇÃO E ORGANIZAÇÃO DE WEBSITE Vencida a fase de planejar um website, vamos avançar em Conhecer os modelos de representação e organização de website. Na competência anterior aprendemos que o sistema de navegação possui duas categorias: Sistema de navegação embutido e sistema de navegação remoto que deixei para explicar sua funcionalidade agora por fazer parte desta competência. 4.1. Sistema de navegação remoto Consideramos como sistema de navegação remoto os elementos que estão fora da hierarquia principal do website que tem a função de fornecer caminhos complementares para que os usuários possam encontrar o conteúdo desejado. Este sistema é constituído de dois elementos: Mapa do site Índice remissivo Em conjunto com o sistema de navegação remoto (mapa do site), vamos aprender o fluxo de navegação que é a representação do mapa do site em alto nível de complexidade. Fique tranquilo e aproveite essa nova fase para aprimorar mais o seu conhecimento em web design. 4.1.1. Mapa do site O mapa do site fornece uma visão geral da estrutura navegacional do website, possibilitando assim ao usuário pular diretamente para qualquer parte do website. Em muitos casos o mapa do site tem a sua própria página de forma simples e apreensível. Um website com uma grande quantidade de conteúdo e tipos variados de público-alvo o mapa do site vem a ser uma ajuda importante. Elementos do mapa do site Como não existe uma regra ou definição específica para a exibição do mapa do site, faz-se necessário possuir elementos que sejam comuns a todos os mapas. Elementos básicos para o mapa do site: Nós – as páginas do website. Conexões – os relacionamentos existentes entre os nós. Técnico em Informática Web Design 49 Rótulos – um título que seja correspondente ao nó. Esquema de numeração – serve como um identificador único a cada nó. Figura 29 – Inventário de conteúdo ajuda a projetar o mapa do site Fonte: O Autor (2012) Figura 30 – Mapa do site feito a partir do inventário de conteúdo com esquema de numeração Fonte: O Autor (2012) Mapas de alto nível Neste caso não o mapa não ficou restritos em mostrar apenas as categorias principais, mas fornece o usuário a possibilidade de exploraras subcategorias e os detalhes específicos de cada categoria. Técnico em Informática Web Design 50 Figura 31 – Mapa do site do banco Bradesco Fonte: BRADESCO (2012) 4.1.2. Índice remissivo Outro elemento do sistema de navegação remoto é o índice remissivo. Pode ser apresentado de varias formas, por exemplo: Menu drop-down Lista O índice remissivo é uma lista com os rótulos do inventário de conteúdo em ordem alfabética por ordem de importância. Para usuários que já tenham uma ideia do conteúdo que procuram, essa é uma ótima opção. Figura 32 – Índice remissivo do banco Bradesco Fonte: BRADESCO (2012) Técnico em Informática Web Design 51 4.2. Fluxo de navegação Avançando mais no assunto, você vai aprender agora a criar diagramas que representem o fluxo de navegação em um website. O fluxo de navegação vem logo em seguida ao mapa do site, na verdade vamos utilizar o mapa do site como ponto de partida para o fluxo de navegação. O Jesse James Garrett é co-fundador e chief creative officer da Adaptive Path, empresa especializada em design de interação, arquitetura de informação, entre outras áreas. No ano 2000 Jesse deu inicio a criação de uma biblioteca de vocábulos visuais com finalidade de padronizar o fluxo de navegação em forma de diagrama. A versão mais atual desse vocábulo data de 06 de março de 2002. O vocábulo visual criado por Jesse é um conjunto de símbolos baseados em um modelo conceitual da arquitetura de informação e design de interação para prover: Caminhos para o usuário no website A movimentação do usuário ao longo desses caminhos através de ações Ações que geram resultados na navegação Você pode utilizar qualquer programa gráfico para fazer o mapa do site. Existe uma ferramenta online para criação, edição e distribuição do mapa do site – WriteMaps: http://writemaps.com/ Segundo a Wikipédia, a enciclopédia livre, o termo Arquitetura de Informação é a arte de expressar um modelo ou conceito de informação utilizado em atividades que exigem detalhes explícitos de sistemas complexos. Design de interação é uma área do design especializada no projeto de artefatos interativos, como websites, PDAs, jogos eletrônicos e softwares. A documentação completa desses vocábulos está no artigo: A visual vocabulary for describing info architecture and interaction design. http://writemaps.com/ http://www.jjg.net/ia/visvocab/ http://www.jjg.net/ia/visvocab/ Técnico em Informática Web Design 52 4.2.1. Representação dos elementos simples Os elementos a seguir representam um fluxo de navegação estática onde cada caminho leva sempre ao mesmo resultado. Elementos simples: páginas, arquivos, pilha de páginas e pilha de arquivos O retângulo é a representação básica de um ou mais documentos HTML que normalmente chamamos de página ou pilha de páginas. As páginas podem ter um arquivo ou vários arquivos vinculados que são entregues aos usuários para ser utilizado fora do fluxo de navegação do website, por exemplo, manuais em PDF, arquivos de áudio, arquivos zipados e etc. Quando tiver mais de um arquivo que recebe as mesmas funcionalidades de navegação, por exemplo, um catálogo de wallpaper deve ser representado como uma pilha de arquivos. Figura 33 – Elementos simples: páginas, arquivos, pilha de páginas e pilha de arquivos. Fonte: O Autor (2012) Tanto nas páginas quanto nos arquivos faz-se necessário a identificação dos mesmos através de rótulos. Criando relações: conectores e setas Para representar as relações dos elementos, utilizamos conectores e setas. Técnico em Informática Web Design 53 Figura 34 – Representação de relações simples Fonte: O Autor (2012) Nessas relações é importante identificar o sentido ou a direção que o usuário pode tomar na navegação a fim de realizar uma determinada tarefa. Figura 35 – Representação das relações com conectores e setas Fonte: O Autor (2012) a) Seta indica movimento downstream (ou caminho de ida), b) Crossbar indica que o movimento upstream não é permitido (ou caminho de volta) e c) Múltiplas pontas de setas indicam a direção do fluxo. Técnico em Informática Web Design 54 Para um entendimento mais claro sem ambiguidade das relações entre as páginas, faz-se necessário a aplicação de notas de rodapé ou apêndices com uma descrição explicativa dessa relação. Figura 36 – Representação das relações com notas de rodapé Fonte: O Autor (2012) Tudo de uma vez: conjuntos concorrentes A característica principal de um conjunto concorrente (condição de disputa) é a utilização de um semicírculo onde a ação do usuário gera múltiplos resultados simultâneos. Por exemplo, a realização de um download de um arquivo. Figura 37 – Representação das relações com conjunto concorrentes que tem como elemento base o semicírculo Fonte: O Autor (2012) Técnico em Informática Web Design 55 Separando: pontos de continuidade Existem diagramas de fluxo de navegação que são bem simples e cabem em uma página A4, mas em outros casos os diagramas podem ser complexos e não cabem em apenas uma página A4. Para esse segundo caso, aplicamos os pontos de continuidade, ou seja, separamos o diagrama em seções de fácil entendimento. Utilizamos o princípio de dividir para conquistar. Figura 38 – Representação das relações com pontos de continuidade Fonte: O Autor (2012) Elementos comuns: áreas e áreas interativas Um retângulo com os cantos arredondados representa uma área para agrupar páginas comuns com o mesmo tratamento gráfico. Quando este elemento foi criado usavam-se janelas pop-up, mas com a evolução dos padrões web passamos a utilizar janelas em camada. Um ponto de continuidade pode ter mais de uma origem ou destino de acordo com a necessidade. Técnico em Informática Web Design 56 Figura 39 – Representação das relações com uma navegação pop-up ou em camada simbolizado pelo retângulo com os cantos arredondados Fonte: O Autor (2012) As áreas interativas seguem o mesmo principio da área, com uma pequena diferença importante representar uma estrutura onde varias páginas estão associadas a uma única página como um catalogo de produtos ou um portfólio. Figura 40 – Representação das relações com áreas interativas simbolizado por vários retângulos com os cantos arredondados. Fonte: O Autor (2012) Elementos reutilizáveis: área de referência e fluxo de referência Os elementos reutilizáveis são uma “mão na roda”, pois em um fluxo de navegação é comum uma sequência de passos como login de usuário e download de arquivos aparecerem várias vezes ao longo do diagrama. Técnico em Informática Web Design 57 O fluxo de referência serve como um marcador em um determinado ponto no diagrama para representar o elemento que se repete. Dessa forma fazemos um único diagrama de login em uma área de fluxo e o representamos com um fluxo de referência. Figura 41 – Representação das relações com elementos reutilizáveis simbolizado pelo retângulo com os cantos cortados Fonte: O Autor (2012) 4.2.2. Representação dos elementos condicionais Os próximos elementos requerem uma lógica condicional para representar um fluxo de navegação dinâmica, onde mediante uma escolha é determinado um caminho com base em uma avaliação ou condição. Elementos condicionais: pontos de decisão O ponto de decisão é representado por um losango onde uma ação do usuário pode gerar apenas um entre vários caminhos a ser seguido. Podemos citar alguns exemplos, tentar submeter um formulário sem preencher os campos e receber uma mensagem de erro, realizar um login e entrar com dados incorretos e receber uma mensagem de erro.Área de fluxo e fluxo de referência possui a mesma forma – um retângulo com os cantos cortados. A área de fluxo requer dois tipos de pontos de continuidade específicos: ponto de entrada e ponto de saída. Técnico em Informática Web Design 58 Figura 42 – Representação das relações com pontos de decisão que tem como elemento base um losango. Fonte: O Autor (2012) Criando relações condicionais: conectores e setas Representado por uma linha tracejada tem como finalidade indicar as relações que o usuário pode seguir se a condição for verdadeira segue por um caminho se for falsa segue por outro caminho como está representado no ponto de decisão. Figura 43 – Representação das conexões com conectores e setas condicionais Fonte: O Autor (2012) a) Seta indica movimento downstream (ou caminho de ida), b) Crossbar indica que o movimento upstream não é permitido (ou caminho de volta) e c) Múltiplas pontas de setas indicam a direção do fluxo. Múltipla escolha: ramos condicionais Técnico em Informática Web Design 59 Um ramo condicional é a representação de vários caminhos ao mesmo tempo (chamado de mutuamente exclusivo), mas que são exclusivos mediante escolha do sistema e apresentado ao usuário. Por exemplo, um website de comércio eletrônico existe vários usuários, cada usuário mediante login é direcionado para um dos ramos/caminhos do sistema. Figura 44 – Representação das relações condicionais com caminhos mutuamente exclusivos que tem como elemento base um triangulo. Fonte: O Autor (2012) Escolha um ou mais: seletores condicionais Funciona de forma semelhante à múltipla escolha com uma diferença crucial, são apresentados caminhos não exclusivos ao usuário. Por exemplo, uma pesquisa realizada no Google sempre traz como resultado: web, imagens, mapas, shopping, vídeos, notícias e mais. Figura 45 – Representação das relações condicionais em uma busca com múltiplos caminhos que tem como elemento base um trapézio Fonte: O Autor (2012) Técnico em Informática Web Design 60 Uma decisão, muitos caminhos: grupos Para representar estruturas condicionais com base em certas decisões, associamos os caminhos e agrupamos a outras estruturas. Funciona de forma semelhante ao ramo condicional só que é apresentado mais de um caminho ao usuário. Figura 46 – Representação das relações condicionais agrupadas com outras relações que tem como elemento base um círculo Fonte: O Autor (2012) Aplicando algumas restrições: áreas condicionais A área condicional é uma boa representação de um fluxo de navegação para áreas restritas que necessitam de acesso exclusivo via login para ter acesso a um conjunto de páginas com informações sigilosas. Por exemplo, acessar a conta em um banco, acessar uma loja online, acessar um sistema corporativo, acessar uma intranet e etc. Figura 47 – Representação das relações condicionais com uma conexão segura tem como elemento base um retângulo com os cantos arredondados com a linha tracejada Fonte: O Autor (2012) Técnico em Informática Web Design 61 Finalizada a etapa com os modelos de representação e organização de um website o que aprendemos: Que o sistema de navegação remoto é formado pelo mapa do site e pelo índice remissivo. O mapa do site é formado por: nós que são as páginas, pelas conexões entre os nós, os rótulos que correspondem aos nós e por fim possuem um esquema de numeração. O inventario de conteúdo é a base para construir o mapa do site. Que existe um vocabulário especifico para representar o fluxo de navegação de um website. O fluxo de navegação está dividido em representações simples e representações condicionais. Técnico em Informática Web Design 62 5. ELABORAR LAYOUTS PARA WEBSITE Vencida a fase de conhecer os modelos de representação e organização de website, vamos avançar na elaboração de layouts para website. Você deve está ansioso para começar a escrever o HTML, mas precisamos ainda agregar mais conhecimento para poder começar a codificar um website. Com o conhecimento adquirido com o fluxo de navegação (seção 4.2), podemos ter uma visão macro de todo o website. O layout tem um papel fundamental nessa fase em que o usuário vai reagir ao design aplicado, faz-se necessário poder representar de forma gráfica as páginas e suas variações com o sistema de navegação (seção 3.2.1 sistema de navegação embutido), texto, imagens, vídeos e etc. No processo de criar um leiaute, existem três áreas principais: Determinar os caminhos de navegação Projetar uma lógica visual Criar templates de páginas Desses três processos vamos aprender os dois últimos, pois o primeiro você já aprendeu com a competência anterior. 5.1. Projetar uma lógica visual Na seção 3.2 – Sistema de navegação, foram apresentadas algumas recomendações que devem ser seguidas na navegação web que agora devem ser aplicado na criação do layout da página do website, que deve ser apreensível, ou seja, fácil de aprender e isto deve acontecer antes mesmo do usuário ler qualquer texto. Por falta de conhecimento de todo esse assunto que estou lhe apresentando até agora, muitos websites não seguem uma lógica visual, e em Segundo Houaiss dicionário da língua portuguesa, a palavra layout (leia-se leiaute) significa esboço ou projeto gráfico. Técnico em Informática Web Design 63 alguns casos não tem nenhuma lógica. E mistura-se quantidade de informação a uma baixa qualidade visual. Faço questão que você pare agora a leitura desse material e navegue nos links abaixo: http://migre.me/cmuj6 http://migre.me/cmuqh http://migre.me/cmurV Não coloquei as imagens de propósito, talvez você nunca tivesse imaginado que poderia existir websites com tão baixa qualidade e sem nenhuma lógica visual na vida! Vou colocar colírio nos seus olhos, pois agora segue uma nova lista, porem onde a quantidade de informação associada a uma lógica visual faz toda a diferença. Mais uma vez, pare de ler este material e navegue, explore os links abaixo: http://migre.me/cmve4 http://migre.me/cmvBz http://migre.me/dtGGJ Não existem regras que definam ou que formem padrões para se projetar um layout de navegação de um website. Mas nada impede que peguemos emprestadas as leis da psicologia das formas a Gestalt, para ajudar no processo de criação do layout. Figura 48 – Um exemplo de efeito Gestalt Fonte: O Autor (2012) a) observamos quatro círculos cortados como foram desenhados, mas em b) realmente é o que vemos, ou seja, não conseguimos apenas observar os círculos de forma individual, mas http://migre.me/cmuj6 http://migre.me/cmuqh http://migre.me/cmurV http://migre.me/cmve4 http://migre.me/cmvBz http://migre.me/dtGGJ Técnico em Informática Web Design 64 um quinto elemento – o quadrado central. Vamos observar algumas leis da Gestalt para criação de layout. 5.1.1. Leis da Gestalt Proximidade Elementos próximos tendem a ser vistos constituindo uma unidade dentro de um todo. Figura 49 – Proximidade Fonte: O Autor (2012) Os grupos são formados pelos objetos que estão próximos, assim temos dois grupos. Fechamento É importante para formação de unidades dando a sensação de fechamento visual da forma pela ordem estrutural. Figura 50 – Fechamento Fonte: O Autor (2012) Técnico em Informática Web Design 65 Nesse exemplo o nosso olho adiciona novos elementos que faltam para completar a forma, por exemplo, um retângulo. Continuidade É a sensação visual que as partes se sucedem através da organização sem quebras ou interrupções na trajetória visual. Um padrão que aparece e se estende mesmo após a sua parada. Figura 51 – Continuidade,os retângulos diagonais parecem continuar após sua parada. Fonte: O Autor (2012) Na figura 51 a sensação é que os retângulos mais finos na diagonal continuam a se repetir para cima mesmo após a sua parada. Similaridade É a tendência de associar elementos pelas propriedades similares. Figura 52 – Similaridade Fonte: O Autor (2012) Técnico em Informática Web Design 66 Misturando as partes Você pode e deve misturar ou combinar as leis da Gestalt para criar um layout. Por exemplo, ao alinhar elementos similares próximos uns dos outros a fim de dar um fechamento e ao mesmo tempo uma continuidade, dessa forma geramos um padrão totalmente reconhecido pelo usuário. Figura 53 – Combinando as leis da Gestalt para criar layout Fonte: O Autor (2012) Balanceamento Na criação de um layout você deve levar em consideração o balanço de todos os elementos dispostos na página. Como faço isso? Boa pergunta! Fazendo um balanceamento assimétrico, separando uma parte do layout para as informações mais importantes, por exemplo: Layout de navegação – focar nas opções de navegação (75% navegação e 25% conteúdo). Layout de conteúdo – focar no conteúdo (75% conteúdo e 25% navegação). Layout com funcionalidades – focar nas funcionalidades (50% funcionalidade, 30% conteúdo e 20% navegação). Para uma maior compreensão do que acabamos de explanar, é interessante ler o artigo - Gestalt aplicado ao web design, escrito por Canha. Veja também os artigos: Teoria da Gestalt e Gestalt aplicada no design de interfaces: exemplos práticos. http://design.blog.br/web-design/gestalt-aplicado-ao-web-design http://www.linguagemvisual.com.br/gestalt.php http://www.revistawide.com.br/index.php/gestalt-interfaces-exemplos/ http://www.revistawide.com.br/index.php/gestalt-interfaces-exemplos/ Técnico em Informática Web Design 67 É claro que podemos criar um layout que contemple navegação, conteúdo e funcionalidades. As porcentagens podem e devem variar mediante a sua decisão na criação do layout, como disse antes não existe uma regra definida, mas existe o bom censo. Figura 54 – Layout com foco na navegação (navegue para entender melhor) Fonte: AMERICANAS (2012) Figura 55 – Layout com foco no conteúdo (navegue para entender melhor) Fonte: CARLOSJOSE (2012) http://www.americanas.com.br/ http://carlosjose.net/ Técnico em Informática Web Design 68 Figura 56 – Layout com foco nas funcionalidades (navegue para entender melhor) Fonte: CREPES TRIUNFO (2012) 5.2. Criar templates Essa é uma definição geral e genérica que já nos traz uma clareza do seu significado. Trazendo para a construção de websites, o template é uma evolução do layout, um aprimoramento. Analise junto comigo o seguinte cenário: Precisamos construir um layout com foco no conteúdo, pois se trata de um portal de noticias que agrupe esportes, entretenimento, noticias e etc. Imagine ter que desenhar um layout para muitas páginas definindo o posicionamento do conteúdo juntamente com o sistema de navegação (seção 3.2.1 sistema de navegação embutido). É exatamente para resolver esse tipo de problema que definimos as regras dos templates. Nesse exemplo vamos ter uma coleção de páginas com a predefinição da apresentação do conteúdo e do sistema de navegação. Mas ainda terá uma variação grande de templates? Segundo a Wikipédia, a enciclopédia livre template (ou "modelo de documento") é um documento sem conteúdo, apenas com a apresentação visual (somente cabeçalhos, por exemplo) e instruções sobre onde e qual tipo de conteúdo deve entrar a cada parcela da apresentação — por exemplo, conteúdos que podem aparecer no início e conteúdos que só podem aparecer no final. http://www.crepestriunfo.com.br/ Técnico em Informática Web Design 69 Sim! Para resolver esse problema criaremos módulos que se encaixem nos templates, ou seja, definimos um template central e para as partes que vão variar criamos módulos que se encaixem perfeitamente nesse template, assim estaremos modularizando o layout. Regras de navegação No processo de definição do layout a partir dos templates e suas variações através dos módulos, precisamos levar em conta três itens: Mostrar os módulos de navegação – definir todas as possíveis variações que podem aparecer em uma página com indicações de quais módulos são de uso obrigatório e quais não são. Posição dos mecanismos de navegação – normalmente estes módulos possuem um posicionamento fixo, caso um determinado módulo que se relaciona com o módulo de navegação não seja utilizado em um determinado momento, faz-se necessário um novo ajuste no módulo de navegação. Limites – levar em conta os limites da parte superior e inferior do template. Por exemplo, limitamos a quantidade de 10 post’s em um blog e aplicamos o sistema de navegação – paginação. Figura 57 – Templates simples mostrando as regras de navegação. Fonte: O Autor (2012) Técnico em Informática Web Design 70 Em cada template você pode ver a disposição dos módulos com a indicação de obrigatório e opcional, a regra de desvio caso um módulo não esteja presente e por fim a indicação de limites na apresentação dos produtos. 5.3. Prototipação A prototipação em web design tem ajudado muito no desenvolvimento dos layouts e dos templates. Mas especificamente a prototipação em papel, por ser um processo evolutivo, você pode desenha/rascunhar o layout das telas até chegar numa ideia final. Com a ideia definida você pode passar a criar os templates com seus respectivos módulos. Figura 58 – Prototipação do website NovoStudio Fonte: O Autor (2012) O exemplo da figura 57 mostra dois templates de empresas diferentes que possuem módulos semelhantes, mas quero chamar a sua atenção para as variações que cada um em particular terá à medida que os usuários naveguem pelo website, e você precisa fazer cada uma dessas variações conforme o fluxo de navegação do website. Aplique as leis da Gestalt no template e em suas variações ao longo da navegação não se esqueça de balancear a disposição dos módulos. Segundo a Wikipédia, a enciclopédia livre Prototipação é uma abordagem baseada numa visão evolutiva no desenvolvimento de sistemas, com intuito de avaliar algumas de suas características antes que o sistema venha realmente a ser construído, de forma definitiva. Técnico em Informática Web Design 71 Figura 59 – Template final do website NovoStudio Fonte: O Autor (2012) 5.4. Construindo wireframe Ao longo dessa competência, fiz questão de utilizar a Wikipédia para dar as definições ao pé da letra para que você possa entender bem o que você esta estudando e aprendendo. Pois estamos chegando à reta final dos assuntos que antecedem o desenvolvimento do website utilizando as tecnologias (HTML, CSS e jQuery) de desenvolvimento de interfaces web. Não abordei a prototipação antes, pois queria que você pudesse ter uma visão bem linear do processo de elaboração de layouts, pois antes de pensar no layout e no template, você deve fazer a prototipação em papel da navegação das telas, conteúdo e funcionalidades. Separei um artigo escrito pelo meu aluno Edson Luiz que é colunista no Choco la design falando da importância da prototipação em papel - Prototipação em papel, porque fazer? Segundo a Wikipédia, a enciclopédia livre Wireframe é um guia visual básico usado em design de interface para sugerir a estrutura de um website e relacionamentos entre suas páginas. Um wireframe web é uma ilustração semelhante do layout de elementos fundamentais na interface. Normalmente, wireframes são concluídos antes que qualquer trabalho artístico seja desenvolvido.
Compartilhar