Exercícios: Criar e publicar uma página web ou blogue

Explica por palavras tuas a diferença entre uma página web e um website, utilizando a comparação com um livro: o que seria cada folha e o que seria o livro completo. Dá um exemplo de um website que conheças e indica duas das suas páginas.

Quando visitas uma página web intervêm dois programas: o navegador do teu computador e o servidor onde se encontra a página. Explica o que faz cada um (quem pede a página, quem a guarda e a envia, quem a apresenta) e o que acontece se o servidor estiver desligado.

A figura mostra o esquema típico de estrutura de uma página web, com as suas quatro zonas, mas o nome de uma delas está tapado.

Indica que zona está tapada e o que contém normalmente, e explica para que serve cada uma das outras três zonas da página.

O HTML não «programa» a página: descreve-a com etiquetas que marcam o que é cada coisa. Explica o que é uma etiqueta (tag) HTML usando a comparação com os marcadores de cor com que sublinha uns apontamentos (isto é um título, isto é um parágrafo) e refere que diferença existe entre o conteúdo e as marcações.

Faz a correspondência entre cada etiqueta HTML e o elemento que coloca na página: (a) <h1>, (b) <p>, (c) <img>, (d) <a>, com as seguintes funções: uma hiperligação para outra página, uma imagem, o título principal e um parágrafo de texto. Depois, indica qual das quatro necessita sempre do endereço onde se encontra o recurso.

Hoje em dia é possível criar um website sem escrever código, recorrendo a ferramentas de criação de sites como o Google Sites ou o WordPress. Explica o que é um construtor de sites, como se trabalha nele (arrastar blocos, escolher modelos) e que vantagem tem para quem está a começar.

A turma vai criar a página web do grupo. Classifica estes conteúdos em «podem ser publicados» ou «não devem ser publicados», justificando cada caso: o nome da escola, a foto da fachada da escola, os nomes e apelidos completos de todos os alunos, os trabalhos da turma assinados apenas com o primeiro nome, o horário pessoal de um aluno e uma descrição das atividades do grupo.

Um blogue é um website que se atualiza com artigos novos, ordenados do mais recente para o mais antigo. Explica que diferença existe entre um blogue e um site «montra» (o de uma loja, que quase não se altera) e dá um exemplo de tema que se enquadraria bem em cada um.

Lê este fragmento de HTML e descreve como a página será visualizada no navegador, elemento a elemento: <h1>El rincón de Marta</h1>, <p>Manualidades y recetas fáciles.</p>, <img> com uma fotografia de bolachas, <a> com o texto «Ver la receta completa». Indica que etiqueta produz cada parte.

Uma pastelaria pretende um sítio simples com: apresentação, fotografias dos seus bolos, horário e um mapa com a morada. Estrutura a sua organização: que zonas terá a página principal (cabeçalho, menu, conteúdo, rodapé), o que constará em cada uma e que duas páginas secundárias ligaria a partir do menu.

Estes passos para publicar um site com um construtor de sites estão desordenados: (a) verificar como fica no telemóvel e no computador, (b) escolher um modelo, (c) planear os conteúdos que terá, (d) clicar em «publicar» para lhe atribuir um endereço na Internet, (e) adicionar os textos e as imagens. Ordena-os e explica por que razão a revisão deve ser feita antes de publicar.

A figura mostra a árvore de etiquetas de uma página web muito simples: de que modo umas etiquetas contêm outras, embora duas etiquetas estejam tapadas.

Descobre que duas etiquetas estão tapadas utilizando as pistas por baixo de cada caixa e explica por palavras suas o que significa uma etiqueta «depender» de outra na árvore.

Compara criar uma página web escrevendo HTML à mão com criá-la num construtor de sites sem código: uma vantagem e uma limitação de cada opção. Em seguida, recomenda uma das duas para cada caso: (a) o site do clube de leitura, pronto numa semana; (b) aprender como a internet funciona por dentro.

A turma cria um blogue sobre os bairros da vila ou cidade. Planifica as suas três primeiras publicações: título de cada uma, dois conteúdos que incluirá (texto, foto, entrevista, mapa) e que secção do menu lhe corresponde. Explica por que razão convém planificar antes de começar a trabalhar no computador.

No site da escola publicam-se fotografias das atividades. Redige três regras de publicação responsável para esse site tendo em conta: que alunos podem aparecer reconhecíveis, que dados pessoais não devem acompanhar as fotografias e que autorização é necessária por parte das famílias. Justifica cada regra.

As imagens de uma página web contêm um texto alternativo (o atributo «alt») que descreve a foto. Explica quem precisa dele (pessoas que utilizam leitores de ecrã) e escreve um bom texto alternativo para estas duas imagens do blogue da turma: (a) a foto da equipa vencedora do torneio de xadrez e (b) um gráfico de barras com a frequência mensal do clube.

Escolhe o site de um estabelecimento comercial ou associação da tua localidade que conheças (ou imagina um realista) e analisa-o: que zonas tem a sua página principal, que conteúdos disponibiliza, o que lhe falta e o que tem a mais. Propõe três melhorias concretas de estrutura ou de conteúdo e justifica-as.

Um grupo de alunos criou este fragmento de código HTML para a ficha da equipa de futsal da escola:

<h1>Equipa de Cadetes</h1>

<img src="equipo.jpg">

<a href="calendario.html">Clica aqui</a>

Ao auditar a página foram detetados dois erros:

1. Se a imagem não for carregada por uma falha de rede, no ecrã aparece apenas um ícone quebrado sem qualquer explicação.

2. Se uma pessoa com deficiência visual utilizar um leitor de ecrã, não sabe o que contém a imagem nem para onde conduz exatamente a ligação.

Reescreve o código HTML corrigindo ambos os problemas (utiliza os atributos e textos descritivos adequados) e justifica tecnicamente de que forma a tua solução melhora a acessibilidade e a usabilidade da web.

Três projetos necessitam de um site: (a) o jornal da escola, que publicará artigos semanalmente com vários autores; (b) a exposição de um trabalho, uma única página fixa; (c) a loja da cooperativa da escola, com catálogo e encomendas. Escolhe para cada um a ferramenta mais adequada (construtor de sites como o Google Sites, um blogue tipo WordPress ou uma solução de comércio eletrónico) e fundamenta a escolha.

Redige a política de publicação do site da turma: que conteúdos se publicam e quais não, quem revê antes de publicar, como se citam as fontes e as imagens de terceiros e o que se faz se alguém pedir para retirar um conteúdo seu. Apresenta-a como um documento de quatro secções breves.

A associação juvenil do teu bairro quer publicar a sua página web e pondera duas opções:

• Opção A: Criar um sítio gratuito numa plataforma online, obtendo o endereço asociacionvalle.creacionsitios.com e alojamento sem custos nos seus servidores em troca da exibição de publicidade do fornecedor.

• Opção B: Registar o domínio próprio asociacionvalle.es (8 € por ano) e contratar um alojamento (hosting) independente (3,5 € por mês).

1) Explica que função cumpre o domínio e qual a do alojamento, diferenciando-os em cada uma das duas opções.

2) O tesoureiro propõe a Opção A dizendo: «Poupemos o dinheiro; o endereço e o servidor são exatamente iguais desde que a página abra». Contesta a sua afirmação prevendo pelo menos dois problemas ou limitações que a associação sofrerá a médio prazo se escolher a Opção A (em relação à sua imagem pública, à publicidade ou ao controlo dos conteúdos).

No site da associação de pais aparece uma lista com «nome e apelido dos premiados na festa, o seu ano de escolaridade e a sua fotografia». Analise que dados pessoais estão a ser publicados, que riscos apresentam em conjunto (mais do que separadamente), que autorizações seriam necessárias e como publicaria a mesma notícia protegendo os alunos.

Conceba a página principal do site do clube de ciência: desenhe ou descreva o seu esquema de paginação (cabeçalho, menu, conteúdo, rodapé), decida os quatro conteúdos que destacaria nela e explique que hiperligações colocaria no menu e por que razão escolheria essas e não outras.

Podes fazê-lo em papel e enviar uma fotografia com a tua resposta.

Um colega diz: «como o site da turma fomos nós que fizemos, podemos colocar lá o que quisermos: fotografias de quem for, música de fundo famosa e textos copiados de outros sites». Conteste as suas três afirmações com argumentos: privacidade e direito à imagem, direitos de autor da música e plágio dos textos, e proponha a alternativa correta em cada caso.

Desafio do tema. Desenha um artigo para um blogue de divulgação sobre hábitos tecnológicos e privacidade, utilizando dados reais e respeitando a propriedade intelectual.

Completa as seguintes fases:

1. Fase 1. Recolha de dados: Entra no site do INE (ine.pt) e anota a percentagem de menores que utilizam a internet habitualmente, ou faz um inquérito a 5 familiares sobre as suas horas de uso de ecrãs para calcular a média diária (por exemplo, $3,5\text{ h}$). Regista os dados numa tabela.

2. Fase 2. Criação e conteúdos: Pagina a tua publicação no LibreOffice Writer (ou numa ferramenta de blogue gratuita) simulando a interface web. Analisa os dados obtidos e ilustra a publicação com uma imagem obtida de um repositório livre (como Wikimedia Commons ou Pixabay), referenciando adequadamente autor, fonte e tipo de licença.

3. Fase 3. Divulgação e licenças: Redige três diretrizes sobre privacidade para publicar fotos ou informação de terceiros em redes. Finalmente, atribui uma licença Creative Commons ao teu próprio trabalho (como CC BY-NC-SA), argumenta por que razão a escolheste e exporta o resultado em PDF.

Será valorizado:

• Obtenção rigorosa de dados reais e o seu tratamento claro.

• Correta atribuição de licenças livres aos recursos de terceiros e escolha justificada da licença própria.

• Qualidade técnica da paginação e relevância ética dos conselhos de publicação responsável.