Aula 04 - Elaborando material em HTML
Ao longo dessa disciplina você já planejou aulas sobre tópicos de Física que preveem o uso de ferramentas digitais por parte do professor e/ou dos alunos do ensino médio. Ao longo desse curso você terá a oportunidade de planejar diversas outras aulas e guias. Você já pensou em disponibilizar esse tipo de material na internet ou organizá-lo em um CD ou DVD para que seus alunos e colegas possam ter acesso?
O último tópico dessa disciplina, que será abordado numa sequência de três aulas, diz respeito ao planejamento, construção e compartilhamento de material educacional na internet ou em um CD na linguagem criada especialmente para esse fim (HTML). O material gerado também será útil para a realização da tarefa vinculada à prática docente que iniciará a partir da sétima semana e pode envolver a publicação desse material na internet. Para tanto nessa aula serão apresentadas recomendações sobre a apresentação visual e os primeiros passos para a construção de arquivos em HTML. Nosso objetivo é que ao final da sexta semana vocês possam organizar o material gerado para a disciplina em um CD.
Situação-problema (Tarefa 4)
A tarefa dessa semana inicia o trabalho de preparação do CD com material didático que deverá ser finalizado ao término da Tarefa 6. A Tarefa 4 está dividida em duas partes:
- apresentação de três exemplos ou contraexemplos que ilustrem as recomendações de webdesign, que veremos nessa aula. Essa apresentação deverá ser feita na forma de um arquivo em HTML, gerado com o software Kompozer. Este arquivo deverá conter links para os sites que você escolheu para ilustrar a característica que pretende discutir, e um comentário explicando porque considera aquele um bom ou mau exemplo da característica em discussão (exemplo).
- criar um gabarito do guia de atividades
que você
elaborou na Tarefa 2.
Esse gabarito deverá ser entregue em um arquivo do tipo HTML,
gerado com o software
Kompozer, e deverá
conter: i) um pequeno texto descrevendo o fenômeno físico abordado no screencast
criado na Tarefa 2 (É desejável que haja um link para o screencast, se estiver disponível
na internet); ii) as questões
propostas no guia de atividades
para o aluno; iii) as respostas a essas questões e iv) links
para
endereços
relacionados ao assunto.
Instruções para a entrega da tarefa: Todos os arquivos criados deverão ser postados no Moodle em um único arquivo zipado.
Introdução
Cada dia mais adeptos se agregam ao uso da internet especialmente
por sua imensa capacidade de
compartilhamento de informações na forma de
notícias, opiniões, fotografias, vídeos e
músicas. Existem sites
de livre acesso ao
público em que facilmente se pode disponibilizar
os mais variados tipos de materiais, sem que para isso o usuário
precise dispor de conhecimentos técnicos especializados.
Exemplos de alternativas desse tipo são o
compartilhamento de vídeos no Youtube e o uso de blogs
do Wordpress. Podemos
mencionar, ainda, os ambientes virtuais como o
Moodle, com o qual vocês já estão bem
familiarizados. No presente
curso, o Moodle foi configurado de modo que é
requerida uma senha de acesso, mas é
possível configurá-lo de modo que possa ser visualizado
livremente na rede e, ainda, simultaneamente conter várias
diferentes
regiões com acesso restrito, por ex., a página do Modellus.
Muitas vezes, todavia, o usuário está interessado em criar sua própria página com características específicas não contempladas por esses recursos gerais. Você como professor, por exemplo, pode se interessar por disponibilizar algum material instrucional contendo figuras, vídeos, simulações sobre determinado conteúdo de Física que não se adeque aos recursos que já lhes apresentamos. Você pode, também, desejar criar um CD ou DVD como uma nova forma de distribuição de materiais, que consiga atingir até mesmo alunos que não disponham de acesso fácil à internet.
Você pode ousar, conceber seu próprio material com o
design que quiser, mas para
ter ampla liberdade de
criação o primeiro
desafio que encontrará é trabalhar com a
linguagem criada especialmente para a disponibilização de
material na internet,
denominada de
HTML. (HTML é um acrônimo para expressão em
inglês HyperText
Markup Language; em português: Linguagem de
Marcação de Texto).
Outros desafios no desenvolvimento de material
educacional
digital estão associados aos cinco aspectos interdependentes que
temos mencionados desde a primeira aula dessa disciplina: validade de
conteúdo, alinhamento com metas de ensino-aprendizagem, design,
interatividade e modos de aplicação.
Tenha sempre em mente que para elaborar um material que ofereça melhores condições para que o aluno aprenda determinado tópico de Física, você terá que ter noções básicas sobre princípios norteadores da produção visual e sonora de materiais educativos digitais, sobre recursos e modos de aplicação considerados importantes para a aprendizagem de Física e sobre possíveis forma de integrá-los. Nessa aula nos concentraremos na recomendações relativas a webdesign e na criação de arquivos em HTML.
Carga cognitiva associada ao material digital
Aprender, na
acepção da teoria da
carga
cognitiva,
significa “estocar” conhecimento e/ou habilidades na
memória de longo prazo de
modo resgatável sob demanda e criar/utilizar esquemas para
resgatar esta
informação. Para que o conhecimento seja
armazenado na memória
de longo prazo, é necessário que estímulos vindos
do ambiente sejam processados
pela memória de curto prazo, também dita memória
de trabalho. Esta memória,
entretanto, tem capacidade e duração limitada. O respeito
a esses limites no
desenvolvimento de material educacional pode ser determinante no seu
sucesso
como facilitador da aprendizagem.
Uma das ideias básicas no planejamento é que a carga
cognitiva associada ao material deve ser minimizada, ou seja, o
esforço intelectual do aprendiz deve ser mínimo em
relação ao uso do material. Nesse sentido, algumas das
ações baseadas na teoria da carga cognitiva
são:
- é preciso focar a atenção do aprendiz em um único ponto em vez de desdobrá-la em dois ou mais pontos. Por exemplo, não apresentar texto e animação simultaneamente, quando o texto precisa ser lido previamente;
- eliminar a redundância. Informações redundantes entre texto e diagramas reduzem a aprendizagem;
- propor exercícios exploratórios em vez dos convencionais exercícios repetitivos;
- em instruções multimídias, apresentar animações e áudio simultaneamente em vez de sequencialmente;
- apresentar exemplos resolvidos como alternativa de instruções baseada em problemas.
Integrando diferentes mídias
Como a memória de trabalho tem componentes separadas para processar mídias diferentes, como som, imagem e vídeo, uma disposição adequada desses elementos, por exemplo, som e imagem, pode contribuir para uma integração entre esses processamentos de modo a facilitar o aprendizado de um determinado conteúdo. Entretanto, alguns cuidados devem ser tomados para evitar a redundância de informações de modo que venha a produzir uma sobrecarga positiva no aluno. Seguindo em nosso exemplo, o som deve complementar a imagem, sem competição pela atenção do aluno. Outro ponto importante é garantir o perfeito sincronismo entre elas, quando ambas são apresentadas concomitantemente. Também a competição e redundância entre animação e texto devem ser evitadas. A inclusão de vídeos com cenas reais precisa ser usada com moderação, pois, se por um lado apresentam a vantagem de trazerem à tona o fenômeno real, por outro podem dispersar a atenção dos estudantes. Animações simplificadas podem ser mais úteis que cenas reais, em muitas situações, assim como cenas virtuais geradas por computador também podem ser mescladas com cenas reais de modo a inserir informações adicionais (realidade aumentada) salientando os aspectos relevantes que desejamos enfocar.
Há outras recomendações relativas à
carga cognitiva que afetam diretamente
o design
da página em que são apresentadas informações para o aluno,
por exemplo, dispor os ícones de navegação sempre
na mesma posição,
para evitar que o aprendiz desperdice tempo e esforço meramente
para
descobrir como se locomover na página, ou ainda, não exagerar no
realismo
das apresentações. (distintos
graus de realismo,
curva de aprendizagem).
Temos consciência
que
é enfadonho ler uma série de recomendações,
porém não dispomos de outra maneira para
alertá-los para detalhes que resultam importantes.
Recomendações relativas ao webdesign
Observe a página do Google uma das mais acessadas da internet. Tem-se aí um belo exemplo de várias das recomendações relativas ao design. Especificamente:
- espaços em branco: são agradáveis! O espaço da página não pode estar demasiadamente ocupado. (exemplo 1, exemplo 2, contraexemplo)
- tipo de letras: usar fontes sem serifa (Arial, Verdana,...) (exemplo, contraexemplo); não usar mais de dois tipos de fontes, não escrever tudo em letras maiúsculas;
- tamanho das linhas: evitar linhas com mais de 10 ou 12 doze palavras (exemplo, contraexemplo);
- informação: todas as páginas devem ter informação, sem excessos (exemplo, contraexemplo);
- navegação: elementos repetitivos facilitam a navegação (por ex., preste especial atenção ao menu do exemplo);
- cores: atraem a atenção do aprendiz, devem ser usadas criteriosamente, de modo a reforçar a estrutura do conteúdo (exemplo) e não distraiam sua atenção. Não usar cores fortes (amarelo, vermelho e laranja) como cores de fundo e não usar figuras de fundo que prejudiquem a leitura.
Você decide!
Aqui você visualiza dois exemplos disponíveis na internet há algum tempo. Você decide quais das opções apresentadas é a mais apropriada.
Criação de arquivos em HTML
O mais simples editor de HTML disponível para a plataforma Windows é um editor de texto simples como o "Bloco de Notas". Usamos esse programa para a criação do arquivo abaixo:
<html>
<head>
<title>Exemplo de arquivo HTML</title>
</head>
<body>
Este
é um mero exemplo do mais simples arquivo em html.
</body>
</html>
No
entanto, para usar somente o Bloco de Notas é necessário
conhecer a
sintaxe da linguagem, ou seja, basicamente conhecer os marcadores ou
etiquetas (em
inglês tags). Por
exemplo, os marcadores <html> e </html> informam ao
navegador onde começa e termina o arquivo html; <title> e
</title> onde começa e termina o título que
aparecerá na barra de
navegação (indicada pela seta vermelha na figura abaixo);
<body> e </body> delimitam o corpo
principal do
arquivo.
A maior parte dos internautas, entretanto, preferem softwares que apresentam uma interface amigável que dispensa conhecimento sobre a sintaxe da linguagem. Dentre os vários softwares gratuitos disponíveis destacamos o Visual Site Designer da CoffeCup e o Kompozer. O software pago mais utilizado para a edição de páginas é o Dreamweaver da Adobe. Optamos pelo Kompozer, por se tratar de um software livre e de fonte aberta, que além de permitir a criação de arquivos em HTML apresenta um sistema de gerenciamento e publicação de arquivos.
Um tutorial sobre o Kompozer esta à sua
disposição aqui.
Atenção: Salientamos que
para a realização da Tarefa 4 não é necessária a criação do arquivo em
HTML atráves da escrita direta em código HTML. Os programas descritos
acima criam automaticamente o código a partir da inserção das
informações em um modo similar ao do Microsoft Word.
(Se você já tem algum conhecimento de HTML e prefere trabalhar diretamente com a arquivo fonte, recomendamos usar o Notepad++).
Recomendações básicas sobre HTML
Uma característica fundamental de arquivos em HTML é que eles usualmente apresentam algumas diferenças visuais em diferentes navegadores (por ex. Internet Explorer e Firefox); em diferentes versões de um mesmo navegador (e.g. Internet Explorer 6.0 e 7.0); e também em diferentes sistemas operacionais (e.g., Windows ou Linux). Pior do que isso é que determinados códigos em HTML só conseguem ser interpretados por alguns dos navegadores.
Para que sua página possa ser visualizada agradavelmente por um maior número de pessoas, independentemente do navegador e/ou sistema operacional utilizado:
- procure ficar dentro dos padrões mais tradicionais, não incluindo efeitos especiais, até porque eles podem prejudicar a aprendizagem do conteúdo que você quer trabalhar;
- teste o material em diferentes navegadores e sistemas operacionais. Por exemplo, nos dias atuais considera-se compulsório verificar como o material é visualizado no Firefox;
- saiba que a resolução do monitor também pode prejudicar a visualização da página e é um fator importante na escolha do layout. Apesar de que já se proliferou o uso de monitores com maior resolução (1024x870, 1280x1024, 1600x1200), ainda há muitos com baixa resolução (640x480, 800x600). Atualmente ainda se recomenda projetar a página de modo que possa ser visualizada na resolução de 800x600 de forma confortável;
- saiba que a cores podem se alterar levemente se não for usado a palheta de 256 cores. (Outras opções são: 65.000 ou 17 milhões de cores).
Ferramentas
Materiais de apoio
-
Princípios de design na elaboração de material multimídia para a Web, A.C.A. Nascimento. Disponível em: http://rived.mec.gov.br/artigos/multimidia.pdf
- Carga cognitiva e material instrucional, E. A. Veit & I. S. Araujo
- Tutorial on-line sobre alfabetização visual
- Alfabetização visual