Voltar ao inícioTecnologias de Informação e Comunicação · 8.º ano · Mudar de matéria
Começar grátis
8.º ano · Tecnologias de Informação e Comunicação
A colaboração em rede · Publicação e divulgação responsável

Criar e publicar uma página web ou blogue

A turma do 8.º B quer ter o seu próprio sítio web para mostrar os trabalhos do ano. Não é preciso ser programador: com um construtor de sítios e algumas noções de como funciona uma página por dentro, o sítio pode ficar pronto numa tarde. Vamos ver o que está por trás de qualquer página que visitas.

O que é uma página web

Um sítio web é como um livro fechado, do qual saem várias páginas web: início, contacto e galeria. sítio web = «o livro» páginas web início contacto galeria
Pratica★☆☆Por começar
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á…

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.

Resolver
Pratica★☆☆Por começar
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…

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.

Resolver

Blogue ou sítio «montra»

Um blogue é um sítio web que se vai atualizando com artigos novos (publicações), ordenados do mais recente para o mais antigo. Um sítio «montra», como o de uma loja ou de um restaurante, muda muito pouco: apresenta quem somos, o que fazemos e como nos contactar.

Blogue Sítio «montra»
Conteúdo publicações novas com frequência quase fixo
Ordem do mais recente para o mais antigo menu com páginas fixas
Exemplo de tema diário de uma viagem de finalistas apresentação de uma pastelaria
Pratica★☆☆Por começar
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»…

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.

Resolver

Como se organiza uma página

Esquema de uma página web com as quatro zonas: cabeçalho, menu, conteúdo e rodapé. cabeçalho: logótipo e título menu: ligações a outras páginas conteúdo: texto, fotos, vídeos rodapé: contactos e autoria

Antes de abrir o computador, convém planificar: fazer um esboço em papel e um pequeno mapa do sítio (que páginas há e como se ligam). Assim sabes que conteúdos precisas e evitas refazer tudo a meio.

Pratica★☆☆Por começar
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…

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.

cabeçalho com o logótipo e o título ? conteúdo principal: texto, fotos e vídeos rodapé: contacto e aviso legal header nav main footer

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.

Resolver
Pratica★★☆Por começar
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…

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.

Resolver
Pratica★★☆Por começar
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,…

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.

Resolver
Pratica★★★Por começar
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…

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.

Resolver
Pratica★★★Por começar
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,…

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.

Resolver

HTML: as etiquetas que descrevem o conteúdo

Comparação entre o código HTML com etiquetas e a página que o navegador mostra: título, parágrafo, imagem e ligação. Código HTML <h1>O cantinho da Marta</h1> <p>Trabalhos manuais e receitas fáceis.</p> <img> ... <a>Ver receita</a> o navegador mostra-o Página no navegador O cantinho da Marta Trabalhos manuais e receitas fáceis. [imagem] · Ver receita
Pratica★☆☆Por começar
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…

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.

Resolver
Pratica★☆☆Por começar
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…

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.

Resolver
Pratica★★☆Por começar
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…

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.

Resolver

A árvore de etiquetas

Árvore de etiquetas HTML: html divide-se em head e body, e body contém h1, p e img. <html> <head>(não se vê) <body> <h1> <p> <img>

Duas boas práticas: a imagem leva um texto alternativo no atributo alt, por exemplo <img src="equipa.jpg" alt="Equipa de futsal da escola">, que aparece se a imagem falhar e é lido pelos leitores de ecrã; e o texto de uma ligação deve dizer para onde leva, por exemplo <a href="calendario.html">Ver o calendário de jogos</a>, e não «clica aqui».

Os níveis de título <h1>, <h2>, <h3> organizam a página por importância: voltarás a eles em ACESSIB-ESTRUTURA.

Pratica★★☆Por começar
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…

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.

html head body ? o título do separador h1 título grande ? um parágrafo img uma foto

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.

Resolver
Pratica★★★Por começar
Um grupo de alunos criou este fragmento de código HTML para a ficha da equipa de futsal da escola: Ao auditar a página foram detetados dois erros: 1. Se a imagem não for…

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.

Resolver

Criar e publicar sem programar

Fluxograma da criação de um sítio: planear conteúdos, escolher modelo, adicionar textos e imagens, rever no telemóvel e no computador e publicar. planear conteúdos escolher modelo textos e imagens rever (telemóvel e PC)→ publicar

Ao carregar em «publicar», o sítio recebe um endereço na Internet e fica alojado num servidor. Duas ideias a distinguir: o domínio é o nome do endereço (por exemplo, associacao.pt) e o alojamento (hosting) é o espaço no servidor onde o sítio está guardado. Alguns construtores oferecem ambos de graça, em troca de publicidade ou de um endereço com o nome da plataforma; um domínio próprio e um alojamento independente têm custos anuais ou mensais, mas dão mais controlo.

HTML à mão Construtor sem código
Vantagem controlo total; aprendes como funciona rápido, sem conhecimentos técnicos
Limitação demora mais e exige aprendizagem menos liberdade de desenho
Pratica★☆☆Por começar
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…

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.

Resolver
Pratica★★☆Por começar
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)…

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.

Resolver
Pratica★★☆Por começar
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…

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.

Resolver
Pratica★★★Por começar
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…

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.

Resolver
Pratica★★★Por começar
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…

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).

Resolver

Publicar com responsabilidade

Duas colunas: à esquerda o que se pode publicar no sítio da turma, à direita o que é melhor não publicar. Pode publicar • nome da escola • foto da fachada • descrição das atividades • trabalhos com 1.º nome Melhor não • nomes completos • horários pessoais • contactos e moradas • fotos sem autorização

Mais dados juntos, mais risco: um nome, o ano de escolaridade e uma fotografia, em conjunto, permitem identificar e até localizar uma pessoa, o que cada dado isolado não permitiria. Também não podes usar tudo o que encontras: música, imagens e textos de outros têm direitos de autor (ver PUBLICA-LICENCIA). Copiar um texto sem indicar a fonte é plágio; usa a tua própria redação ou uma citação entre aspas com a fonte.

Uma boa política de publicação da turma define: o que se publica e o que não; quem revê antes de publicar; como se citam fontes e imagens de terceiros; e o que fazer se alguém pedir para retirar um conteúdo seu.

Pratica★☆☆Por 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…

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.

Resolver
Pratica★★☆Por começar
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…

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.

Resolver
Pratica★★☆Por começar
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…

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.

Resolver
Pratica★★★Por começar
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…

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.

Resolver
Pratica★★★Por começar
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…

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.

Resolver
Pratica★★★Por começar
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…

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.

Resolver

Volta ao princípio: para publicar o sítio da turma numa tarde, escolhe um modelo num construtor, organiza os conteúdos nas quatro zonas, vê na pré-visualização se se lê bem no telemóvel e garante que não incluis dados pessoais de ninguém sem autorização.

Em resumo

Ver todos os exercícios deste tema