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 2010

Índice

3

1. Introdução 04 2. Categorias de websites 06 2.1. Categoria 1: Portal da Universidade 07 2. 2. Categoria 2: Unidades 08 2.3. Categoria 3: Áreas específicas 09 2.4. Categoria 4: Outros 10 2.4.1. Categoria 4: Outros – Complemento 11 2.5. Como proceder quando o website não se encaixar 12 3. Layout padrão 14 3.1. Estrutura – Página inicial 15 3.2. Estrutura – Páginas internas 16 3.3. Uso indevido 17 3.4. Uso indevido – notícias x abas 18 4. Dos elementos padrões 20 4.1. Topo 21 4.1.1. Topo – Sobre os itens de navegação 22 4.2. Menu esquerdo 23 4.3. Lateral direita – sugestões 24 4.4. Banners rotativos 25 4.5. Abas (uso opcional) 26 4.6. Rodapé 27

5. 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 37

1. Introdução

4

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.

5

Categorias de Websites

2. Categorias de websites

6

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)

2.1. Categoria 1: Portal da Universidade

7

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.

2.2. Categoria 2: Unidades (Faculdades, Unidades Complementares, Unidades Auxiliares e Institutos)

8

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.

2.3. Categoria 3: Áreas específicas (Órgãos da Reitoria, Hospitais, Agências, Comitês, Intranet e Grupos)

9

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.

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)

10

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.

2.4.1. Categoria 4: Outros – Complemento

11

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.

2.5. Como proceder quando o website não se encaixar

12

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) http://www.unesp.br/aci/

13

Layout padrão

3. Layout padrão

14

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.

3.1. Estrutura – Página inicial

15

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.

3.2. Estrutura – Páginas internas

16

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. 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.

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.3. Uso indevido

17

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”

3.4. Uso indevido – notícias x abas

18

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.

figura 1 figura 2

19

Elementos do modelo Padrão

4. Elementos do modelo Padrão

20

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

4.1. Topo

21

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.

4.1.a. Topo – Sobre os itens de navegação

22

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.

4.2. Menu esquerdo por categoria

23

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. 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.

Categoria 1 Categoria 2 Categoria 3

4.3. Lateral direita - sugestões

24

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

4.4. Banners rotativos

25

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.

4.5. Abas (uso opcional)

26

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.

4.6. Rodapé

27

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.

Categorias 2 e 3

Categoria 1

28

Sistemas de edição de conteúdo

5. Uso de sistemas CMS (Content Management System)

29

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 (http://www.unesp.br/cliqueunesp) 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.

30

Anexo I: Sugestão de conteúdo básico para

as Unidades Universitárias

por Genira Chagas - Conteúdo Marcelo Carneiro - Diagramador

Sugestão de conteúdo básico para as páginas das Unidades Universitárias

31

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. <http://www.ipmet.unesp.br/> 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.

Orientações por tópico: Menu esquerdo da categoria 2

32

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 http://www.unesp.br/aci/sobre_campus_campi.php

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 emails, telefones e currículos) ficam ocultas e são exibidas ao clicar no link “[mais informações]”

item: Graduação

33

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 e-mails 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 e-mails para contatos.

item: Pesquisa

34

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 e-mails – 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.

item: Concursos

35

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 e-mails 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.

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. Menu deve trazer atualizadas as datas de licitação com os respectivos editais.

item: Licitações

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 (http://www.w3.org/)

1. Interfaces gráficas

38

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).

1. Interfaces gráficas

39

• 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.

2. Criação de páginas internet

40

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.

2. Criação de páginas internet

41

• 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.

3. Navegabilidade

42

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.)

3. Navegabilidade

43

• 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.

4. Acessibilidade

44

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) – http://www.w3c.org/WAI

• Oferecer serviço de busca.

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)