Regras de Acessibilidade, Navegabilidade e Usabilidade do Portal
Para que um portal educacional tenha qualidade em todos os aspectos (visuais e lógicos), é necessário definir padrões e procedimentos que garantam recursos eficientes, dinâmicos e acessíveis a todos os usuários.
Portanto, este conteúdo foi elaborado com o intuito de garantir que o Portal Dia a Dia Educação continue sendo referência e para que ele se torne ainda mais adequado às definições de um recurso
web democrático e de qualidade.
Segue a relação das padronizações e procedimentos:
A lista abaixo, se refere a instruções breves; à direita (com ícones) instruções longas, que se abrirão em um novo conteúdo.
- Alinhamento
Texto: deve ser alinhado à esquerda, pois mantém a linearidade da margem, e os espaços em branco ao final de cada linha não interferem na leitura.
Títulos, trechos de música ou poesias, legenda de imagem: poderão ser centralizados.
Epígrafe e alguns elementos de tabela: o alinhamento à direita é usado para casos específicos, por exemplo, dados numéricos da tabela.
Obs.: Justificado não deverá ser usado no Portal Dia a Dia Educação, pois os espaçamentos entre as palavras aumentam, muitas vezes, desproporcionalmente, o que dificulta a legibilidade.
- Bullets (lista ordenada ou não ordenada)
Inserir até 19 itens, acima disso dividir em uma tabela (uma linha e duas colunas) e deixar em ordem alfabética.
Obs.: Toda a lista de itens deverá estar dentro do mesmo elemento <ol> ou <ul>.
- Breadcrumbs (conhecido como “migalhas de pão”)
Inserir o breadcrumbs no início de todas as páginas de conteúdo, conforme exemplo do código fonte abaixo:
<h5> <a href="http://www.lem.seed.pr.gov.br/modules/conteudo/conteudo.php?conteudo=1333">Enem </a> >> <a href="http://www.lem.seed.pr.gov.br/modules/conteudo/conteudo.php?conteudo=1336">Recursos Didáticos </a> >> Áudios </h5> <br />
Exemplo:
- Colaboração
O destaque no campo Colaboração das páginas iniciais dos ambientes e das disciplinas deverá ter a seguinte formatação:
1ª linha - Nome do Colaborador, sem ponto final.
2ª linha - Tipo de recurso, seguido de dois pontos e título, e sem ponto final.
Exemplo:
Regiane Cristina M. S. Castione
Relato de Experiência: Chuva Ácida
É considerado colaboração apenas materiais que foram enviado espontaneamente, sem pontuação ou produzido por um setor da Seed. As colaborações não devem encaminhar para links externos. Caso seja simulador/infográfico/jogo/link interessante (módulo links) deve-se criar uma página de conteúdo que anteceda o objeto indicado/destacado.
- Destaques
Destaques nos Ambientes: 64x64 pixels com no máximo 3 linhas de texto.
Destaques grandes das Disciplinas: 100 pixels de largura com o texto ao lado (tamanho máximo permitido) ou 200 pixels de largura para textos acima ou abaixo da imagem (tamanho fixo).
Destaques pequenos das Disciplinas: 64x64 pixels com no máximo 3 linhas de texto à direita e sem ponto final (cada dupla de destaques, na mesma linha, deverão possuir o mesmo número de linhas) - As descrições deverão ser chamativas e convidativas. Os destaques deverão ser atualizados quinzenalmente.
Observações:
- Não forçar o tamanho das imagens, portanto, antes de enviá-las para o servidor, é preciso redimensioná-las para o tamanho final, de forma proporcional à imagem original. Não se devem nunca "achatar" ou "esticar" as imagens, pois elas ficarão distorcidas.
- Os destaques não deverão ser encaminhados para links externos. Caso seja em Jogos, Infográficos, Links Interessantes, Quiz e Simuladores (módulo links) deve-se criar uma página de conteúdo que anteceda o objeto indicado/destacado.
- Há ícones específicos que são utilizados para determinados conteúdos que não podem ser mudados. No entanto, há a possibilidade de criar ícones de acordo com o tema a ser destacado do conteúdo.
- Informativo
Tempo de atualização: a cada 30 dias.
Não utilizar o caracter arroba.
- Link
Quer dizer ligação e podem ser palavras, expressões ou imagens por meio dos quais se tem acesso a outros conteúdos.
Via de regra, o texto com link fica sublinhado para diferenciar do restante do texto da página. Quando o usuário posiciona o cursor do mouse sobre um texto com link, a cor do trecho ou expressão é alterada. Essa padronização das áreas clicáveis em todo o site é essencial tanto para a navegação quanto para a identificação dos textos com link por parte do usuário.
Em se tratando de links, também é preciso entender o que são e quando se usam links profundos. Link profundo ou permanente é o link que direciona o usuário para uma informação específica dentro de um determinado site.
Quando um link direcionar para um conteúdo externo (outra página de disciplina/ambiente, outro site ou arquivos do tipo: PDF, DOC, PPT, etc.), deve-se abrir em nova aba, para isso utilizar o atributo: target="_blank".
Um link nunca pode direcionar diretamente para um download sem estar acompanhado do texto descritivo e ícone referente à função. Exemplo:
Softwares Livres de Produção - Gimp
Baixe em PDF: Volume 1 | Volume 2
Softwares Livres de Produção - Cmap Tools
Baixe em PDF
Dicas para melhorar a descrição de seus links:
- Deve-se usar legendas curtas e que tenham significado: "Baixe em PDF" ou "Acesse o vídeo". Não coloque frases inteiras ou longos pedaços de texto nos links. Em geral, mantenha-os com poucas palavras. Ofereça informações adicionais com o atributo: title.
- Termos como "clique aqui" ou "esta página" não devem ser utilizados. Os usuários tendem a examinar a página por seus links, para só então as ler. Assim, oferecer links significativos aumenta a funcionalidade de sua página. Teste sua página lendo apenas os links; eles fazem sentido? Ou você precisa ler o texto que está ao redor dele? Uma sugestão é o uso de frases que transmitam uma ideia mais concreta, como: "Acesse o link abaixo".
- Evite colocar os links próximos uns dos outros; os usuários podem ter problemas em distinguir entre links que estejam muito próximos.
Nota: Em leitores de tela, o termo aqui fica sem sentido. Ao visualizar o texto na tela é possível localizar o aqui, mas quando o usuário ouve o comando Clique aqui, surge a dúvida: "aqui, onde?".
- Nomenclatura de arquivos
- Não use caracteres especiais como: acentos (´^`), cê-cedilha (ç), sinal gráfico (~), símbolos (@#$%*-+/|\) e pontuação (?!:;).
- Não deixe espaços em branco entre as palavras. Para separar as palavras utilize underline.
- Não use nomes ou frases inteiras para nomear os arquivos. Use no máximo cinco palavras, tirando as preposições.
- Não utilize maiúsculas nos nomes ou extensões dos arquivos.
- Sempre utilize nomes que remetam ao significado do arquivo ou que façam uma referência lógica a seu conteúdo.
- Para nomes de ícones, o padrão adotado é: nome seguido do tamanho + extensão, conforme o exemplo: nome64.png
- Notícias
Disciplinares
O título da notícia deverá conter apenas uma linha. Caso o texto seja muito extenso, inserir reticências.
A atualização deve ocorrer 2 vezes na semana.
Ambientes
O título da notícia poderá conter até duas linhas.
Sem imagens.
A atualização deve ocorrer diariamente no primeiro horário do dia.
Replicar, preferencialmente, as notícias do site oficial da Seed (Institucional).
- Menu principal da página
- Palavras-chave
Todos os conteúdos que possuírem palavras-chave deverão seguir o mesmo padrão de Artigos, teses, dissertações e monografias; ou seja, elas devem ter somente a primeira letra em maiúscula e separadas por ponto.
Exemplo: Ensino. Expressão gráfica. Geometrias não euclidianas. (máximo 5 palavras e ordem alfabética)
- Player na página inicial das disciplinas
Poderão ser divulgados nesse espaço somente trechos de filmes, animações produzidas pelo Multimeios ou programas da TV Paulo Freire.
- Validação
Para manter a ordem no código HTML, deverá ser realizada a validação da sua página sempre que houver alguma alteração no conteúdo. Validar em pelo menos dois navegadores, por exemplo: Firefox e Chrome. Ambos exibem a quantidade de erros encontrados na página e o tipo de erro que se trata, indicando as linhas do código onde ocorrem os erros. Essa extensão deverá ser instalada no navegador para fazer as validações e com isso deixar os conteúdos da sua página dentro dos padrões Web do W3C. Conheça um pouco mais sobre o W3C assistindo ao vídeo.
Obs.: Lembramos que o navegador padrão adotado pela Celepar é o Firefox. Portanto, todas as alterações, antes de publicadas, devem ser testadas no Firefox.
Abaixo você poderá visualizar outras informações pertinentes ao trabalho.
