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

Explique com suas palavras a diferença entre uma página web e um website, usando 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 você conheça e indique duas das páginas dele.

Quando você visita uma página web, intervêm dois programas: o navegador do seu computador e o servidor onde fica o site. Explique o que cada um faz (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.

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

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

Faça a correspondência entre cada tag HTML e o elemento que ela coloca na página: (a) <h1>, (b) <p>, (c) <img>, (d) <a>, com as seguintes funções: um link para outra página, uma imagem, o título principal e um parágrafo de texto. Depois, indique qual das quatro sempre precisa 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. Explique o que é um construtor de sites, como se trabalha nele (arrastar blocos, escolher modelos) e que vantagem ele tem para quem está começando.

A turma vai criar a página web do grupo. Classifique 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 sobrenomes 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 blog é um website que é atualizado com artigos novos, ordenados do mais recente para o mais antigo. Explique que diferença existe entre um blog e um site «vitrine» (o de uma loja, que quase não muda) e dê um exemplo de tema que se encaixaria bem em cada um.

Leia este fragmento de HTML e descreva 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 foto de biscoitos, <a> com o texto «Ver la receta completa». Indique que tag produz cada parte.

Uma confeitaria quer um site simples com: apresentação, fotos dos seus bolos, horário de funcionamento e um mapa com o endereço. Estruture a organização do site: quais áreas terá a página principal (cabeçalho, menu, conteúdo, rodapé), o que constará em cada uma e quais duas páginas secundárias você ligaria a partir do menu.

Estes passos para publicar um site com um construtor de sites estão desordenados: (a) verificar como fica no celular e no computador, (b) escolher um modelo, (c) planejar os conteúdos que ele terá, (d) clicar em «publicar» para atribuir a ele um endereço na internet, (e) adicionar os textos e as imagens. Ordene-os e explique por que a revisão deve ser feita antes de publicar.

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

Descubra quais são as duas tags cobertas usando as pistas embaixo de cada caixa e explique com suas palavras o que significa uma tag «depender» de outra na árvore.

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

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

No site da escola são publicadas fotos das atividades. Redija três regras de publicação responsável para esse site, levando em conta: quais alunos podem aparecer reconhecíveis, quais dados pessoais não devem acompanhar as fotos e qual autorização é necessária por parte das famílias. Justifique cada regra.

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

Escolha o site de um estabelecimento comercial ou associação da sua localidade que você conheça (ou imagine um realista) e analise-o: quais áreas tem a página principal, quais conteúdos disponibiliza, o que falta e o que há de sobra. Proponha três melhorias concretas de estrutura ou de conteúdo e justifique-as.

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

<h1>Equipo Cadete</h1>

<img src="equipo.jpg">

<a href="calendario.html">Haz clic aquí</a>

Ao auditar a página, foram detectados dois erros:

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

2. Se uma pessoa com deficiência visual usar um leitor de tela, ela não sabe o que a imagem contém nem para onde exatamente o link leva.

Reescreva o código HTML corrigindo ambos os problemas (use os atributos e textos descritivos adequados) e justifique tecnicamente de que forma a sua solução melhora a acessibilidade e a usabilidade da web.

Três projetos precisam 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. Escolha para cada um a ferramenta mais adequada (construtor de sites como o Google Sites, um blog tipo WordPress ou uma solução de comércio eletrônico) e fundamente a escolha.

Redija a política de publicação do site da turma: quais conteúdos são publicados e quais não, quem revisa 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. Apresente-a como um documento de quatro seções breves.

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

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

• Opção B: Registrar o domínio próprio asociacionvalle.es (8 reais por ano) e contratar uma hospedagem (hosting) independente (3,5 reais por mês).

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

2) O tesoureiro propõe a Opção A dizendo: «Vamos economizar o dinheiro; o endereço e o servidor são exatamente iguais desde que a página abra». Conteste a afirmação dele 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 controle dos conteúdos).

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

Crie a página principal do site do clube de ciências: desenhe ou descreva o seu esquema de diagramação (cabeçalho, menu, conteúdo, rodapé), decida os quatro conteúdos que destacaria nela e explique que links colocaria no menu e por que motivo escolheria esses e não outros.

Você pode fazer isso no papel e enviar uma foto com a sua 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 três afirmações dele com argumentos: privacidade e direito à imagem, direitos autorais da música e plágio dos textos, e proponha a alternativa correta em cada caso.

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

Complete as seguintes fases:

1. Fase 1. Coleta de dados: Entre no site do INE (ine.es) e anote a porcentagem de menores que utilizam a internet habitualmente, ou faça uma pesquisa com 5 familiares sobre as suas horas de uso de telas para calcular a média diária (por exemplo, $3,5\text{ h}$). Registre os dados em uma tabela.

2. Fase 2. Criação e conteúdos: Diagrame a sua publicação no LibreOffice Writer (ou em uma ferramenta de blog gratuita) simulando a interface web. Analise os dados obtidos e ilustre 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: Redija três diretrizes sobre privacidade para publicar fotos ou informações de terceiros em redes. Por fim, atribua uma licença Creative Commons ao seu próprio trabalho (como CC BY-NC-SA), argumente por que a escolheu e exporte 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 diagramação e relevância ética dos conselhos de publicação responsável.