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
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.
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.
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 |
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.
Como se organiza uma página
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.
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.
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.
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.
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.
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.
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.
HTML: as etiquetas que descrevem o conteúdo
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.
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.
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.
A árvore de etiquetas
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.
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.
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.
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:
-
Se a imagem não for carregada por uma falha de rede, no ecrã aparece apenas um ícone quebrado sem qualquer explicação.
-
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.
Criar e publicar sem programar
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 |
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.
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.
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.
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.
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.come 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).
Publicar com responsabilidade
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.
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.
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.
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.
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.
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.
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.
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.