Universidade Estadual Paulista Júlio de Mesquita Filho. Manual de Identidade Visual dos Websites da Unesp

Transcrição

1 1

2 Universidade Estadual Paulista Júlio de Mesquita Filho Manual de Identidade Visual dos Websites da Unesp Elaborado por: Assessoria Especial de Planejamento Estratégico APE Maria Elisabete Lima Webdesigner Colaboração: Assessoria de Comunicação e Imprensa ACI Genira Chagas Jornalista Revisado e atualizado em 24/11/2011 Maio

3 Índice 1. Introdução Categorias de websites Categoria 1: Portal da Universidade Categoria 2: Unidades Categoria 3: Áreas específicas Categoria 4: Outros Categoria 4: Outros Complemento Como proceder quando o website não se encaixar Uso de sistemas CMS (Content Management System) 29 Anexos: Anexo I: Sugestão de conteúdo básico para as Unidades Universitárias 30 Anexo II: Guia de regras de Padronização Visual Layout padrão Estrutura Página inicial Estrutura Páginas internas Uso indevido Uso indevido notícias x abas Dos elementos padrões Topo Topo Sobre os itens de navegação Menu esquerdo Lateral direita sugestões Banners rotativos Abas (uso opcional) Rodapé 27 3

4 1. Introdução Em 2003, teve início a primeira padronização dos websites da Unesp através dos parâmetros estabelecidos pela Identidade Visual da Universidade. Este trabalho tem como objetivo dar continuidade ao anterior, através da reformulação do layout e inclusão de novos elementos na estrutura de diagramação. Este manual visa fornecer as diretrizes comuns que devem ser seguidas por todos os que realizam atividades de desenvolvimento e manutenção nos websites da Unesp, de forma a assegurar uma identidade única da Universidade. Tais diretrizes são ilustradas a partir de uma aplicação concreta: o desenvolvimento do Portal da Unesp, bem como dos websites das Unidades, departamentos e demais entidades vinculadas a Universidade, classificadas através de categorias conforme regras pré-estabelecidas. Desta forma, esta proposta pretende oferecer um ambiente flexível de inclusão das informações, onde as regras de uso dos arquivos de padronização possam servir de orientação para a correta adequação dos elementos em tela entre os diversos websites, e desta forma, a autonomia dos responsáveis pelos websites possa ser mantida sem interferir diretamente na padronização. 4

5 Categorias de Websites 5

6 2. Categorias de websites Uma das principais novidades deste trabalho de padronização de websites, em relação ao anterior, é a classificação dos websites da Universidade em categorias, visando estabelecer critérios que possam definir qual a obrigatoriedade no uso do layout padrão. Acredita-se que o uso e aplicação dos modelos de websites para uma categoria específica tenderá a facilitar a utilização correta do modelo proposto para as mais diversas finalidades. São 4 categorias que serão melhor detalhadas nas páginas seguintes: 1. Portal da Universidade (Reitoria) 2. Unidades (Faculdades, Unidades Complementares, Unidades Auxiliares, Institutos e Colégios) 3. Áreas específicas (Órgãos da Reitoria, Hospitais, Agências,Comitês, Intranet e Grupos) 4. Outros (Órgãos públicos, Fundações, Associações, Revistas, Webmails, Sistemas, Blogs, páginas pessoais de Docentes, Discentes e Colaboradores) 6

7 2.1. Categoria 1: Portal da Universidade Esta categoria deve ser utilizada apenas para o website de apresentação da Universidade, sendo o uso do layout padrão obrigatório. O Portal da Unesp é o repositório de dados gerais da Universidade, também utilizado para divulgar estudos, trabalhos, eventos, informações noticiosas e institucionais diversas. Por esta razão e, além disso, buscando atender as solicitações dos órgãos de fomento e de institutos que medem a visibilidade das universidades na internet, sugerimos às Unidades Universitárias os conteúdos mínimos a serem divulgados em suas páginas (ver Anexo I: Sugestão de conteúdo básico para as Unidades Universitárias). Uma das principais diferenças entre esta categoria e as demais é a ausência, na lateral direita, do elemento Notícias do Portal exibido nas demais categorias (ver seção 4.c. Lateral direita sugestões). Outros formatos de diagramação e uso de elementos específicos para esta categoria serão estipuladas pela própria Assessoria de Comunicação e Imprensa conforme necessidades futuras. 7

8 2.2. Categoria 2: Unidades (Faculdades, Unidades Complementares, Unidades Auxiliares e Institutos) Categoria que deve ser utilizada por todas as Unidades (Faculdades, Unidades Complementares, Unidades Auxiliares e Institutos), sendo o uso do layout padrão obrigatório. O foco principal desta categoria é a apresentação dos cursos, eventos locais, serviços, departamentos e demais interesses dos alunos. Respeitando o uso adequado dos elementos do modelo Padrão do layout (ver seção 4. Elementos do modelo Padrão), a Unidade fica livre para diagramar a distribuição de seu conteúdo. 8

9 2.3. Categoria 3: Áreas específicas (Órgãos da Reitoria, Hospitais, Agências, Comitês, Intranet e Grupos) Nesta categoria deve ser utilizada pelas Áreas específicas (Órgãos da Reitoria, Departamentos, Hospitais, Agências, Comitês, Grupos e Colégios), sendo o uso do layout padrão obrigatório. O foco desta categoria deve ser direcionado para a apresentação clara e direta das principais informações e serviços oferecidos, ficando desobrigada de apresentar dados específicos de responsabilidade das demais categorias (por exemplo, itens obrigatórios de menu esquerdo estipulados para as categorias 1 e 2). Respeitando o uso adequado dos elementos do modelo Padrão do layout (ver seção 4. Elementos do modelo Padrão), os responsáveis pelo website ficam livres para diagramar a distribuição de seu conteúdo. 9

10 2.4. Categoria 4: Outros (Órgãos públicos, Fundações, Associações, Revistas, Webmails, Sistemas, Blogs, páginas pessoais de Docentes, Discentes e Colaboradores) Enquadra-se nesta categoria todos os websites que possam, de alguma forma, estabelecer vínculos (direta ou indiretamente) com a Universidade Estadual Paulista através de prestação de serviços e/ou outras atividades correlatas. Definindo-se para esta categoria os seguintes tipos de websites: Órgãos públicos, Fundações, Associações, Revistas, Webmails, Sistemas, Blogs, páginas pessoais de Docentes, Discentes e Colaboradores. Para o desenvolvimento de websites nesta categoria ver modelo apresentado na próxima página. 10

11 Categoria 4: Outros Complemento Para complementar a Categoria 4: Outros, seguem as orientações: a) Uso do layout padrão: Para os websites da categoria 4: Outros que optarem pela utilização do layout padrão, estes deverão seguir as mesmas regras estipuladas para os websites da categoria 3: Áreas específicas. b) Uso da barra de identificação: O uso da barra de identificação (item 1 da figura abaixo) não é obrigatório, mas caso os websites da categoria 4: Outros optarem pelo seu uso, deverão usar os arquivos da barra de identificação que acompanha no pacote de implantação dos arquivos de padronização. 11

12 2.5. Como proceder quando o website não se encaixar Se por ventura existir um website que não se enquadre em nenhuma das categorias propostas, o requisitante deverá entrar em contato com a Assessoria de Comunicação e Imprensa, para que seja identificada a categoria ideal para o website ou, se for o caso, a abertura de uma nova categoria para enquadrá-lo. Dados de contato: Assessoria de Comunicação e Imprensa (ACI) 12

13 Layout padrão 13

14 3. Layout padrão Composição do layout padrão O layout padrão é composto pelo estilo de cores e fontes que formam a apresentação visual do modelo, assim como, do desenho estrutural composto pelo: topo, laterais, corpo, rodapé e elementos padrões (banner rotativo, abas e itens de menu esquerdo). Cores As tonalidades de azul utilizadas no layout padrão, são variações da cor utilizada no logotipo da Unesp, conforme documento da Identidade Visual. 14

15 3.1. Estrutura Página inicial 1. Topo A área superior do website, tem 1000px de largura. Apresenta 3 partes distintas: barra superior, área do nome, área para links e atalhos que serão detalhados posteriormente. 2. Laterais A altura das colunas laterais varia de acordo com a quantidade de itens relacionados a elas. A lateral direita só aparece na página inicial, nas páginas internas será removida. 3. Corpo Corresponde a área central do website, que será melhor detalhada posteriormente. 4. Rodapé Área inferior da página, acesso às políticas de privacidade, serviço e contato. Função estética de fechar o website. 15

16 3.2. Estrutura Páginas internas 1. Topo Esta área será a mesma utilizada na página inicial. 2. Lateral Somente deverá ser exibida a lateral esquerda nas páginas internas. Modelos prontos O material de padronização possui modelos de página interna com as orientações de inserção de conteúdo para auxiliar na criação das páginas. 3. Corpo Para a região do corpo das páginas, são fornecidos modelos prontos de sugestões de uso da estruturação dos textos e orientações técnicas das informações que devem ser exibidas conforme a seção Sugestão de conteúdo básico deste manual. 4. Rodapé Esta área será a mesma utilizada na página inicial. 16

17 3.3. Uso indevido Seguem algumas orientações sobre o uso do layout padrão e seus elementos visuais: Resumidamente: Não insira elementos em locais indevidos Evite os excessos Não duplique os elementos padrões 1. Não deve inserir links ou ícones em local não definido 2. Na lateral esquerda, não inserir banners ou imagens 3. Na lateral esquerda, não inserir chamadas ou textos 4. Evite o excesso de rolagem (muitas informações em uma única tela) na página inicial e páginas internas 5. Evite o excesso de banners na parte superior da lateral direita 6. Evite o excesso de chamadas na lateral direita 7. Evite o excesso de banners fora do elemento banner rotativo na parte inferior da lateral direita 8. Não duplicar os elementos padrões para as abas ou banners rotativos 17

18 3.4. Uso indevido notícias x abas figura 1 figura 2 Apresentamos na figura 1 uma combinação de uso incorreto dos elementos. Se for utilizar o formato rodízio de notícias (1), evite utilizar logo em seguida o elemento abas (2), opte por separá-los através de chamadas, conforme figura 2. 18

19 Elementos do modelo Padrão 19

20 4. Elementos do modelo Padrão Os elementos do modelo Padrão do layout compreendem: 1. Topo 2. Menu Esquerdo 3. Lateral direita 4. Banners rotativos 5. Abas 6. Rodapé 20

21 4.1. Topo 1. Logotipo Apresentação do logotipo, seguido do câmpus. 2. Nome do website O nome do website é apresentado na região aberta do layout mesclando-se com a cor de fundo. 3. Links e ícones Área para inserção dos links, funções de acessibilidade e local para ícones de acessos para outros serviços (exemplo: twitter, versão em inglês da página, etc). 4. Navegação Visando melhorar a navegabilidade, reserva-se esta área para o acesso rápido aos principais itens, que será detalhado a seguir. 21

22 4.1.a. Topo Sobre os itens de navegação 4. Navegação Ao manter 3 opções de navegação na região topo (Acesso rápido, Unidades e Busca) em todos os websites da Unesp, podemos propiciar aos visitantes o acesso rápido aos principais itens e serviços. O item Acesso rápido aberto ao lado, centraliza algumas sugestões de serviços e áreas, que direcionam os visitantes para os locais desejados de forma mais direta, tornando a navegação pelos websites da Unesp uma experiência mais objetiva, já que reduz o tempo de navegação e de localização dos itens no menu esquerdo ou outro local nos websites. 22

23 4.2. Menu esquerdo por categoria Os itens de menu esquerdo das categorias de websites 1 e 2, apresentados ao lado, são obrigatórios. A categoria 3 é livre para criar os itens de menu desejados. Aviso: na impossibilidade da leitura dos itens de menu ao lado, no pacote de implantação será possível obter os modelos prontos. Categoria 1 Categoria 2 Categoria 3 Para manter o padrão visual entre os websites das categorias 1 e 2, é aconselhável que sejam exibidos na ordem apresentada. Inclusão de novos itens: Havendo a necessidade de inclusão de itens que não constam na lista apresentada da categoria, os mesmos devem ser adicionados após o último item ou subitem do grupo a que estiver relacionado, para que a ordem inicial dos itens seja mantida entre todos os websites. 23

24 4.3. Lateral direita - sugestões Categoria 1: Sugestões dos elementos dos websites pertencentes a categoria 1: Portal Categorias 2 e 3: Sugestões de elementos para a lateral direita para os websites das categorias 2: Unidades e 3: Áreas específicas. O elemento Notícias Portal Unesp somente aparecerá para estas categorias, sendo um item obrigatório 24

25 4.4. Banners rotativos Este elemento é de uso obrigatório nos casos onde haja mais que 3 (três) banners exibidos simultaneamente, o objetivo do elemento Banners rotativos é evitar o excesso de banners na lateral direita da página inicial de cada website. Variações do layout de apresentação do elemento Banners rotativos serão aceitos se seguirem as seguintes determinações: Devem exibir a quantidade de banners contida dentro do elemento (ideal 6); Possuir link direto aos mesmos; E o estilo deve ser harmônico com o layout do website. 25

26 4.5. Abas (uso opcional) O objetivo do elemento Abas é organizar as informações evitando a dispersão e excesso de conteúdo em uma única tela. É um elemento de uso opcional, podendo ser utilizado em todas as páginas do website. O número de abas exibidas pode variar conforme a necessidade, porém, deve-se evitar os excessos, o que poderia prejudicar o acesso aos dados e a apresentação visual do website. 26

27 4.6. Rodapé No rodapé, o símbolo acessório é apresentado no canto direito. Inserção de links: Os itens de rodapé devem seguir a orientação por categoria (conforme figuras acima), ficando livre a inclusão de outros links, devendo-se evitar o excesso ou formatação que possa prejudicar a apresentação visual do website. Categoria 1 Categorias 2 e 3 27

28 Sistemas de edição de conteúdo 28

29 5. Uso de sistemas CMS (Content Management System) Este manual foi elaborado especificamente para que a edição seja feita manualmente (através de edição direta no código HTML), porém, os interessados terão as seguintes sugestões para aplicarem em suas telas: 1. Sistemas próprios da Universidade A Unesp possui até esta data - Maio 2010 um único sistema de edição de conteúdo que visa editar as páginas dos websites da Unesp, respeitando integralmente, o formato utilizado das páginas do Padrão. O uso do sistema é opcional, mas é altamente recomendado o uso desta ferramenta pela praticidade e agilidade na edição e manutenção das páginas. Para obter maiores informações: 1 - Sistema Clique Unesp ( 2. Sistemas públicos O uso dos sistemas Joomla, Drupal ou correlatos, podem ser utilizados para a categoria 4: Outros (**). (**) Não foi possível adaptar, em sua totalidade e particularidades, o formato do padrão Unesp para estas ferramentas. Por isso, recomendamos que as categorias 1: Portal, 2: Unidades e 3: Áreas específicas, não os utilizem, podendo optar por um dos sistemas próprios disponíveis na Universidade, salvo se a conversão, em um momento futuro, não implique em prejuízo na apresentação visual do modelo padrão. 29

30 Anexo I: Sugestão de conteúdo básico para as Unidades Universitárias por Genira Chagas - Conteúdo Marcelo Carneiro - Diagramador 30

31 Sugestão de conteúdo básico para as páginas das Unidades Universitárias O Portal da Unesp é o repositório de dados gerais da Universidade, também utilizado para divulgar estudos, trabalhos, eventos, informações noticiosas e institucionais diversas. Por esta razão e, além disso, buscando atender as solicitações dos órgãos de fomento e de institutos que medem a visibilidade das universidades na internet, sugerimos às Unidades Universitárias os conteúdos mínimos a serem divulgados em suas páginas. Observamos que em algumas páginas estes conteúdos já estão disponíveis. Em outras, no entanto, em razão da ausência de organização na divulgação, a busca a tais dados torna-se mais difícil. Uma orientação geral é utilizar o menu esquerdo para as informações institucionais relativas à finalidade da instituição (graduação, pós-graduação, administração, extensão etc.). O menu direito fica reservado aos eventos (congressos, feiras, vestibular, etc.). Aconselha-se a publicação do endereço completo e telefone no menu direito. O centro da página deve conter temas relevantes e que são destaques da Unidade Universitária. Para a Unidade que deseja trabalhar com notícias na parte superior da página, esta deve ser atualizada periodicamente. Sugestão para a parte inferior central é a divulgação de publicações, iniciativas locais como museus, atividades de extensão, etc. ressaltamos que a atualização constante do centro da página valoriza a mídia internet, estimulando o internauta a visitá-la com mais frequência. Na medida do possível deve-se evitar divulgar informações não pertinentes à universidade. Um exemplo é o banner da empresa Climatempo. Para consultas de dados climáticos pode-se consultar o IPmet, órgão da Unesp. < ATENÇÃO: Todas as orientações citadas neste anexo estão disponíveis através de modelos de página interna no pacote de implantação dos arquivos de padronização e seguem a ordem definida para os itens de menu esquerdo da categoria 2. 31

32 Orientações por tópico: Menu esquerdo da categoria 2 Seguem as orientações de inclusão de conteúdo para os respectivos tópicos listados abaixo conforme os itens do menu esquerdo da categoria 2: Áreas específicas (ver seção 4.b. Menu esquerdo): item: Instituição O subitem Apresentação deve conter o nome da Unidade por extenso, com sigla entre parênteses e um breve histórico. Este deve informar data de fundação, cursos oferecidos, missão, inserção na região, infra-estrutura (salas de aula, laboratórios, fazendas, hospitais, creche, etc). Ex.: Faculdade de Ciência e Tecnologia (FCT), câmpus de Presidente Prudente. Obs.: A grafia da palavra câmpus na Unesp foi padronizada. Informe-se sobre o tema em O subitem Administração deve mencionar a organização administrativa: Diretoria; vice-diretoria; Congregação; Comissões assessoras; Divisão Técnica Acadêmica (funções, responsáveis e contatos); Divisão Técnica Administrativa (funções, responsáveis e contatos); Diretoria de Biblioteca (funções, responsáveis e contatos); Diretoria de Informática (funções, responsáveis e contatos); Diretoria de Serviços (funções, responsáveis e contatos). item: Departamentos A página Departamentos deve apresentar um resumo sobre cada departamento contendo os nomes dos chefes e sub-chefes e mandatos. As demais informações (tais como: atribuições do departamento e dados dos docentes com s, telefones e currículos) ficam ocultas e são exibidas ao clicar no link [mais informações] 32

33 item: Graduação O subitem Coordenadores deve apresentar uma tabela com o nome do curso, os coordenadores e vice-coordenadores e mandato. O subitem Cursos deve conter o curso de graduação oferecido; grade curricular com ementa e bibliografia atualizados; laboratórios; O subitem Espaço do aluno deve conter informações sobre: matrícula, notas, faltas pedido de passe escolar, transferência, atestados em geral, pedidos de bolsas e moradia Telefones e s para contatos. item: Pós-graduação Este menu deve trazer o nome do curso, categoria mestrado ou doutorado, Programa, área de concentração, regulamento da pós-graduação, datas de processos seletivos, disciplinas oferecidas, professores, ementas com bibliografia, informações sobre bolsas. Telefones e s para contatos. 33

34 item: Pesquisa O menu deve relatar os grupos, centros, núcleos e projetos desenvolvidos na Unidade. Cada um deles deve mencionar os responsáveis e os pesquisadores envolvidos em cada pesquisa em desenvolvimento. Deve-se obedecer o padrão visual da Unesp. Alguma Unidades Universitárias possuem Comitê de Ética e Escritório de Pesquisa. Nestes casos deve-se abrir subitems. Ex.: Educação Física Grupo de Pesquisa em Fisiologia do Exercício (abrir página com informações) Núcleo de Estudo em Motricidade item: Extensão O menu de trazer informações sobre os projetos de extensão em andamento na Unidade, informações sobre bolsas, com os contatos Telefones e s dos responsáveis. O mesmo deve ocorrer com as atividades de extensão (por ex.: empresas juniores) e os contatos para que a população beneficiária possa se informar. item: Biblioteca O menu deve conter todos os serviços oferecidos pela Biblioteca. Ex.: Regulamento, horário de funcionamento, acervo, link para a CGB, entre outras informações relativas ao serviço. 34

35 item: Concursos Sempre que houver abertura de concurso, o mesmo deve ser divulgado na página com o edital. item: Empresa Junior Menu deve trazer a relação das empresas em operação na Unidade, a missão da empresa, com telefone e s de contato. item: Ensino Médio (se houver) Assim como para os cursos de graduação, menu deve informar administração, curso oferecido, docentes, as disciplinas com ementa, laboratórios, eventos do colégio, vestibulinho, etc. item: Eventos O menu deve trazer informações sobre os eventos acadêmicos, culturais e institucionais da Unidade. Será um sistema único para toda a Universidade. Ex.: Cursos, congressos, exposições, etc. 35

36 item: Infraestrutura A página Fazenda Experimental deve trazer as atividades e serviços relacionados à fazenda. Ex.: Administração, Departamentos, pesquisa, residência, estágios, etc. A página Hospital Universitário deve informar sobre atividades e serviços relativos ao hospital e à assistência. Ex.: Administração, departamentos, assistência, residência, internato, etc. A página Informática deve trazer uma tela com os sistemas disponíveis e as opções de acesso a eles. Ex.: ADP Login / Senha Sisgrad Login / Senha Intranet Login / Senha A página Laboratórios deve trazer a relação dos laboratórios, as atividades, se presta serviços à comunidade, telefones e e- mails. item: Licitações Menu deve trazer atualizadas as datas de licitação com os respectivos editais. 36

37 Anexo II: Guia de regras de Padronização Visual por Maria Elisabete Lima Adaptação da Convenção Internacional para criação de páginas internet criados pela W3C ( 37

38 1. Interfaces gráficas Diretrizes: Os elementos da Identidade Visual dos websites da Universidade Estadual Paulista, deverão estar conforme a seção da Identidade Visual deste documento, em suas características, propriedades, cores e dimensões. Os elementos de identificação da Universidade, como a logomarca, devem corresponder ao disposto no Manual de Identidade Visual da Unesp e na forma especificada neste Manual. Usar diagramação correta, para configuração de resolução de vídeo padrão de 1024x768 pixels, na produção do layout e das páginas, evitando o uso excessivo de barras de rolagens. Evitar o uso de vários arquivos CSS para não comprometer o desempenho do website. Evitar arquivos CSS muito longos e com redundâncias. Não fazer uso de animações de elementos como: logotipos, slogans ou títulos principais e nunca utilizar efeitos que descaracterizem as marcas oficiais. As páginas devem ser leves com o tempo de carregamento aceitável e não devem conter recursos de músicas de fundo. Evitar gráficos de marca d água. Dar preferência aos formatos de imagens: GIF, JPG e PNG (observando a compatibilidade em diferentes browsers). 38

39 1. Interfaces gráficas Ao utilizar cores, deve observar o contraste entre os elementos visuais, para facilitar a legibilidade, sempre mantendo a harmonia com a página da Universidade. Utilizar cores que mantenham a integridade visual em qualquer tipo de monitor. Preservar a utilização uniforme das cores em todo o website. Para realçar textos, usar cores ao invés de sublinhados ou elementos piscando. Ao utilizar tamanho de tipo de fonte diferente do que o estipulado, procure manter um tamanho legível, mas não exagerado. Eliminar qualquer elemento que não seja relevante ao usuário e que possa causar confusão. Manter fácil identificação da hierarquia da informação (conteúdo), por meio das cores. Na publicação de imagens, deve-se respeitar o direito de propriedade de uso e seu crédito autoral nos termos da legislação vigente. Nunca utilizar imagem de pessoas sem o consentimento das mesmas. Em geral, recomenda-se não utilizar frames. Na utilização de ícones que provocam uma ação, os mesmos devem estar acompanhados de descrição textual do significado dessa ação. 39

40 2. Criação de páginas internet Diretrizes: Em páginas com textos explicativos, sempre começar pelo mais importante, garantindo que as informações e elementos relevantes estejam disponíveis sem a necessidade do uso de barra de rolagem. Não usar páginas com expressão Em construção ou Em breve. O website deve apresentar apenas o que já está finalizado e pronto acesso. Não liberar a página parcialmente pronta. Remover dados/páginas desatualizadas (como por exemplo, páginas convidando os usuários para participarem de eventos que já ocorreram) e sempre verificar a consistência e a veracidade dos dados antes da publicação dos mesmos. Oferecer páginas de ajuda com conteúdo claro, simples, respeitando sempre as normas de acessibilidade. Obedecer aos princípios básicos de design para melhor disponibilizar as informações na página web: proximidade, alinhamento, repetição e contraste. Ao publicar textos, manter padrão de fontes em todo o website (não usando fontes artísticas), seguindo as referências deste manual. Dar preferência aos termos padronizados e conhecidos pelos usuários. Usar o formato de data e unidades de medida de acordo com o padrão utilizado na instituição. 40

41 2. Criação de páginas internet Evitar conteúdo redundante. Evitar abreviações em links de navegação. Evitar o uso de todas as letras das maiúsculas. Publicar arquivos preferencialmente em formato PDF. Evitar o uso de termos em língua estrangeira. Escrever tendo em vista a facilidade de leitura. Evitar a escrita de blocos de textos longos e contínuos, usando, para facilitar a leitura, parágrafos curtos, subtítulos e listas com marcadores. O website deve deixar claro as competências e as finalidades da instituição. A estrutura do website deve estar de acordo com o contexto das tarefas realizadas pelos usuários. Verificar erros de informação técnica tomando como base o glossário de termos técnicos de uso corrente na instituição. O enfoque do website educacional deve ser o conteúdo e não a propaganda, se por acaso houver a presença de espaço para divulgação. 41

42 3. Navegabilidade Diretrizes: Permitir que processos ou transações sejam canceladas, mesmo antes de terminadas. Só desviar para outra página quando o usuário tomar alguma ação. Evitar janelas adicionais (utilizar tecnologias como lightbox). Evitar utilização de plug-in auto-instaláveis, mas sempre que houver necessidade de instalação de plug-ins, certificar-se da procedência desse software através de certificações eletrônicas que devem estar, de preferência disponível para consulta no website. Em formulários de entradas de dados, posicionar o cursor sempre no próximo campo a ser preenchido. Possuir a opção de voltar à página anterior sem necessidade de sair do website. O mapa do website/portal deve privilegiar a estrutura dos menus principais e secundários. Indicar ao usuário as etapas do caminho percorrido durante a navegação, sempre oferecendo a opção de retorno nas áreas do website voltar a qualquer uma delas. Arquivos cuja visualização dependa de outros aplicativos devem ser executados em nova janela do navegador (p. ex.: Arquivos PDF, DOC, etc.) 42

43 3. Navegabilidade O logotipo institucional deve ter um posicionamento constante e deve ser transformado em um link de hipertexto para a página inicial do website. Diferenciar cores de hiperlinks e hiperlinks visitados. Essa diferenciação deve ser uniforme e consistente em todo o website, seguindo os padrões de cores da Identidade Visual. Não utilizar as palavras Clique aqui, como um nome de link. O ideal é utilizar um texto que informe aos usuários quais as informações que estão por trás do link. Somente inserir links internos com a garantia de seu pleno funcionamento e que não remetam a páginas Em construção ou sem conteúdo. Definir menus principal e secundários, visando o agrupamento de itens relacionados ou similares, evitando redundâncias. Preservar a distribuição uniforme da quantidade de itens nos menus secundários, buscando o equilíbrio desses menus. 43

44 4. Acessibilidade Diretrizes: Evitar adotar o uso de recursos específicos de browsers. Incluir título das páginas (comando TITLE) e nunca usar caracteres especiais e nem pontos, pois tal metodologia não está de acordo com os padrões definidos pela W3C e comprometem a indexação do website pelos sistemas de busca. Utilizar apenas o nome da Universidade no título da página inicial do website (não incluir termos Site, Website, Homepage, entre outros). Oferecer versão para impressão do conteúdo em arquivos PDF, pois estes não permitem edição direta e por ser cada vez mais um padrão de documentação na internet. Nas imagens que contém link, sempre apresentar descrição do conteúdo da imagem (atributo ALT da tag <img>). Ex.: <img src= URL alt= Estudantes da Unesp >. Esse procedimento é extremamente recomendado pelo W3C, pois facilita a descrição da imagem por leitores de tela, melhorando substancialmente a acessibilidade do site por pessoas portadoras de necessidades especiais. Fazer uso correto das tags <h1>, <h2> para títulos de novas páginas e <h3>...<h6> para títulos e subtítulos de seção das páginas. Adotar regras de acessibilidade para portadores de necessidades especiais, tendo como referência o W3C (Web Acessibility Initiative WAI) Oferecer serviço de busca. 44

45 Término do Manual A distância que você consegue percorrer na vida depende da sua ternura para com os jovens, compaixão pelos idosos, solidariedade com os esforçados e tolerância para com os fracos e os fortes, porque chegará o dia em que você terá sido todos eles. (George Washington Carver) 45