sites-boas-praticas

1
Mestrado em TICMestrado em TIC –– Educação e FormaçãoEducação e Formação
2010/20112010/2011
Páginas Web
Boas Práticas
Vitor Barrigão Gonçalves
Escola Superior de Educação
Instituto Politécnico de Bragança
vg@ipb.pt | Gab. 2.47 | Tel. 273330650 | http://www.vgportal.ipb.pt | http://www.easy-learning.ipb.pt
Desenvolvimento de Produtos MultimédiaDesenvolvimento de Produtos Multimédia
asas
Estrutura e Qualidade dos SIWs
Classificação funcional dos Websites educativos:
• Websites pessoais de professores ou alunos
bb--BoaspráticaBoasprática
• Websites de escolas e de associações de pais, professores ou alunos
• Websites de instituições educativas
• Websites de programas e projectos educativos
• Websites de software e outros recursos educativos
• Websites culturais e comerciais educativos
• Websites lúdico-didácticos
• Websites de entretenimento
PáginasWebPáginasWeb
• Websites de ensino e formação a distância
• Websites de apoio à formação ou aprendizagem
• Motores de busca e directórios
• Redes telemáticas educativas
• Portais e Websites ou canais temáticos
• Portais educativos2

2
asas
Classificação dos Websites por estrutura:
Podem ser identificadas as seguintes formas de organização da informação
• por conteúdos
Exemplo: Anos > Disciplinas > Temas > Conteúdos;
• por tarefas
Exemplo: publicar/consultar informação, comprar/vender produtos;
Podem ser identificadas as seguintes formas de organização da informação
nos Websites:
• por utilizador
Exemplo: surfistas, esporádicos e novatos ou assíduos e experientes.
3
asas
Classificação dos Websites por estrutura:
• Estrutura em Rede ou em Malha• Estrutura Sequencial ou Linear
• Estrutura Matricial ou em Matriz• Estrutura Radial ou em Estrela
• Estrutura Híbrida ou Composta• Estrutura Hierárquica ou em Árvore
4

3
asas
Comparação das estruturas de Websites:
REDENavegação
Dinâmica
HIBRIDA
HIERÁRQUICA
RADIAL
MATRIZ
Estrutura
Imprevisível
Estrutura
Previsível
Navegação
Monótona
SEQUENCIAL
5
asas
Navegação: Corresponde ao acto de activar sucessivamente ligações
em páginas Web.
A navegação deve ser fácil e intuitiva Para tal:
Em suma,
• Profundidade dos menus: até 3.º nível da hierarquia (regra dos três cliques)
• Amplitude dos menus: até 32 opções por página
• Posição dos menus: consistência e uniformidade; Lei de Fitts (topo e esquerda)
• Indicadores de contexto: logotipo e título, tipos de ligações
• Metáforas
A navegação deve ser fácil e intuitiva. Para tal:
- para facilitar a aprendizagem do Website
- para evitar que o utilizador se sinta confuso e perdido
os mecanismos de apoio à navegação devem responder às questões:
Onde estou?
De onde venho?
Para onde vou?
? ? ?
6

4
asas
Projecto
Estrutura de Frames
Menu Principal
undários
Área de Informação
e
respectivos submenus
MenusSecu
7
asas
Onde estou?
- Relativamente à estrutura local do Website
Relativamente a todas as outras páginas do Website
? ??
a)
c)
b)
- Relativamente a todas as outras páginas do Website
)
8

5
asas
De onde venho? e Para onde vou? ou Para onde posso ir?
ligações de publicidade
? ??
a)
b)
c)
Ligações
geraisLigações
locais
Ligações de
subscrição
b)
Ligações
estruturais
Ligações
para o
exterior
subscrição
9
asas
Acessibilidade
Tipicamente, os Websites são construídos para serem navegados com o rato
Consequentemente
- Prioridade 1
Tópicos que têm de ser cumpridos sob pena de o conteúdo não ficar
acessível a um ou mais grupos de utilizadores. A satisfação deste tipo
de tópicos é importante para garantir a acessibilidade essencial.
P i id d 2
Consequentemente,
Pessoas com deficiências vão deparar-se com barreiras difíceis de ultrapassar.
Directrizes de acessibilidade (W3C, 1998):
- Prioridade 2
Tópicos que devem ser cumpridos de forma a facilitar o acesso à
informação. A satisfação destes tópicos favorecerá a remoção de
barreiras significativas.
- Prioridade 3
Tópicos que podem ser cumpridos com vista a melhorar a
acessibilidade. Este tipo de tópicos permitirão melhorar
significativamente o acesso aos conteúdos Web.10

6
asas
Acessibilidade
Linhas mestras para melhorar a acessibilidade (W3C):
1. Providenciar alternativas equivalentes a conteúdos audiovisuais;
2. Não depender da cor;
3. Utilizar código e folhas de estilo apropriadas;
4. Tornar clara a linguagem;
5. Criar tabelas cuja informação se mantém compreensível após retirar formatos;
6. Evitar problemas na funcionalidade da página ao usar novas tecnologias;
7. Garantir o controlo de conteúdos dependentes de temporização (áudio, vídeo);
8. Assegurar a acessibilidade directa para interfaces embebidos;
9. Garantir a acessibilidade independentemente do tipo de dispositivo usado;
10. Usar uma tecnologia apenas quando a sua utilização estiver generalizada;
11. Usar tecnologias e recomendações do W3C;
12. Providenciar informação de contexto e de orientação com vista a atenuar a
complexidade;
13. Providenciar mecanismos de navegação claros (consistência nas barras de
navegação);
14. Certificar-se de que os documentos são claros e simples.
11
asas
Qualidade da Informação
• Autoria:
publicação de informações acerca da instituição e do autor do conteúdo.
• Acuidade:
correcção, precisão, fidelidade ou exactidão do conteúdo.
• Actualidade:
indicação da data de criação e/ou actualização do conteúdo.
• Abrangência:
percepção da cobertura inerente à estrutura e organização do conteúdo.
• Objectividade:
identificação clara do objectivo principal e nível de detalhe do conteúdo.
12

7
asas
Usabilidade
Não existe um método, receita ou veredicto de um profissional da área de
p
projecto que nos garanta totalmente que um Website é ou não usável…
Contudo,
alguns problemas podem ser antecipados através da:
- avaliação heurística;
- avaliação baseada em revisões;
- avaliação baseada em modelos;
- entre outros métodos de avaliação da usabilidade.
Independentemente do método, a avaliação será sempre centrada no utilizador
13
asas
Usabilidade
Avaliação Heurística (Jakob Nielsen):
1. Visibilidade do estado do sistema (feedback)
2. Correspondência entre o sistema em foco e o mundo real (linguagem)
3. Controlo e liberdade do utilizador (saídas de emergência)
4. Consistência e padrões (normas, convenções e standards)
5. Prevenção de erros (mais vale prevenir do que remediar com mensagens de erro)
ç ( )
6. Reconhecimento em vez de lembrança (menus e opções importantes visíveis)
7. Flexibilidade e eficiência (utilizadores novatos // utilizadores experientes)
8. Estética do layout e design minimalistas (grau de importância da informação)
9. Apoio no reconhecimento, diagnóstico e correcção de erros do utilizador
10. Ajuda e documentação (SOS utilizador de forma directa e sucinta)
14

8
asas
Usabilidade
Grau de risco das limitações de usabilidade
ç
Categorias de limitações de usabilidade:
1. Limitações da linguagem
2. Limitações do layout e gráficos
3. Limitações da arquitectura da informação
4. Limitações da interface
5. Limitações genéricas
Categorias de limitações de usabilidade:
1. Riscos elevados
2. Riscos médios
3. Riscos mínimos
15
asas
Web 2.0
• Tecnologias Web 2.0 (Blogs, Wikis, redes sociais…)
https://www.blogger.com
http://www.flickr.comhttp://www.wikipedia.org
16
http://groups.google.pt/

9
asas
• WebQuests (Aventuras na Web)
metodologia de pesquisa orientada, voltada para o processo educativo, em
que os recursos utilizados provêm da Internet
Outras tecnologias educativas
que os recursos utilizados provêm da Internet.
Bernie Dodge, da Universidade de São Diego, 1995 (http://webquest.sdsu.edu/)
Uma WebQuest tem a seguinte estrutura: Introdução
Tarefa
Processo
Recursos
http://www.webquest.futuro.usp.br
Exemplo 1
http://recursos.cnice.mec.es/media/publicidad/media_webquest/inicio.htm
Exemplo 2
http://www.ied.ufla.br/laboratorio/dupla26/webquest1.html
17
Orientações
Avaliação
Conclusão
Créditos
http://comunidade.ese.ipb.pt/phpwebquest
Exemplo 3
http://www.clubedoprofessor.com.br/webquest/AventuraemFormacao.htm
Exemplo 4
http://www.minerva.uevora.pt/subm03_3.htm#webquests
Exemplo 5 – Webquest acerca de Webquests
http://www.minerva.uevora.pt/publicar/wq_webquest/
asas
• WebQuests (Aventuras na Web)
Teorias de aprendizagem: cognitivistas e construtivistas
Duração: curto (2 a 3 aulas) ou médio/longo prazo (1 semana a 1 mês)
Vantagem: estratégia motivadora; colaboração; controlo do copiar/colar
Limitações: Favorece a dispersão; falta de conteúdos em língua portuguesa
Os Formadores são a chave:
⌧ Enquadramento da Webquest na planificação
18
q q p ç
⌧ Imaginação e criatividade dos autores
⌧ Construção e publicação da Webquest
⌧ Exploração em contexto curricular (aplicação didáctica) com Net
⌧ Exploração em contexto curricular (aplicação didáctica) sem Net

10
asas
São representações mentais da realidade, isto é, representações das
estruturas cognitivas que cada indivíduo gerou da realidade
Mapas Mentais e Mapas de Conceitos
estruturas cognitivas que cada indivíduo gerou da realidade.
19
asas
Características de um Mapa Mental:
Formado por tópicos ligados através de linhas;
Cada tópico pode conter texto, ilustração ou ambos;
Organização hierárquica ou em árvore onde a raiz corresponde ao
tópico principal; os ramos aos sub-tópicos e as folhas aos tópicos sem
sub-tópicos;
Os tópicos formam níveis com graus crescentes de detalhe e
especificidade, normalmente mostrados no mapa através da
formatação: da raiz para as folhas, as linhas vão ficando mais finas e
as fontes menores
as fontes menores.
Gratuitas: InteliMap, FreeMind e MindMan Personal;
Comerciais: MindManager, MindGenius, MindMapper e Visual Mind.
Ferramentas para produção de Mapas Mentais:
20

11
asas
Mapa Mental editado com Intelimap:
bb--BoaspráticaBoaspráticaPáginasWebPáginasWeb
http://www.intelimap.com.br/download/download.asp
21
asas
Características de um Mapa de Conceitos:
Modelo hierárquico para conceitos, onde os conceitos mais gerais e
inclusivos aparecem no topo e por baixo destes os que são cada vez
inclusivos aparecem no topo e, por baixo destes, os que são cada vez
mais específicos;
Conjunto de proposições (dois ou mais conceitos ligados através de
uma relação que cria uma unidade semântica designam-se proposição);
Formado por nós (conceitos) ligados através de arcos ou setas
(relações);
Gráfico onde os conceitos são substantivos e as relações são verbos.
Gratuitas: CmapTools, Compendium e VUE (Visual Understanding Environment);
Comerciais: SMART Ideas, Semantica, Logotron e Axon Idea Processor.
Ferramentas para produção de Mapas de Conceitos:
22

12
asas
Mapa de Conceitos editado com Cmaptools:
http://cmap.ihmc.us/
asas
Hotpotatoes ou Quizfaber:
https://comunidade.ese.ipb.pt/hotpotatoes/ http://www.vgportal.ipb.pt/carlos/testesdigitais/testes_digitais.htm
http://www.lucagalli.net/en/http://hotpot.uvic.ca/

13
asas
Trabalho
Crie um Website com actividades educativas:Crie um Website com actividades educativas:
Use uma estrutura não linear
Mí i 5 á i W b (1 4)
Mínimo = 5 páginas Web (1 + 4)
Máximo = 15 páginas Web
Numa das páginas disponibilize o mapa do site (por exemplo através
de um mapa mental com hiperligações).
Uma das actividades a realizar deverá incluir uma Webquest e uma
tarefa em hotpotatoes ou quizfaber.
Pelo menos uma das páginas deve apresentar um conteúdo externo:
localização do google maps e/ou vídeo do youtube, etc.
O menu deve incluir pelo menos a ligação a um serviço externo:
álbum de fotografias, blog, podcast, social bookmark, wiki, etc.
Não esqueça de seguir as principais regras ou boas práticas de concepção de
páginas Web.25

sites-boas-praticas

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a sites-boas-praticas

Semelhante a sites-boas-praticas (20)

Mais de Vitor Gonçalves

Mais de Vitor Gonçalves (20)

Último

Último (20)

sites-boas-praticas