Descrição

Nesta atividade, os usuários criarão sua primeira página Web usando um editor de texto básico e um navegador para exibir os resultados. Eles se entrevistarão para obter conteúdo pessoal (ou fictício) para uma página “Sobre”, organizarão e escreverão o conteúdo e marcá-lo usando HTML. Os usuários podem fazer o upload desses arquivos para um servidor (se disponível) e ver seus conteúdos na web!

Objetivos da Aprendizagem

• Criar uma página web simples
• Transfer web page online

Tempo Necessário

45 minutos a 1 hora dependendo do tamanho do grupo

Público-alvo

Pode ser adaptado para públicos de 13 anos ou mais; com níveis variados de experiência com a web

Materiais

• Notebook com conexão à Internet

Habilidades de Alfabetização Web

• Composição
• Código
• Design
• Revisão
• Compartilhamento (se eles carregarem conteúdo para a Web)

Habilidades do Século XXI

• Comunicação
• Colaboração

Ganhando Emblemas Digitais

Os emblemas digitais capturam a evidência e são a demonstração do conhecimento e da realização. Cada Atividade Principal abrange múltiplas habilidades de alfabetização web. A conclusão de todas as Atividades Principais permitirá que qualquer um ganhe todos os emblemas da alfabetização web e habilidades do século XXI. Assim, encorajamos você a concluir todas as Atividades Principais e ganhar emblemas para capturar o que aprendeu. A Digitalme está oferecendo emblemas de alfabetização web através do Open Badges Academy.

Introdução

[10 min]

Dica! Lembre os participantes de sua experiência com Tags na lição anterior (Recomendo concluir a marcação 101 com os participantes antes desta atividade).

• Explique aos participantes que qualquer página web que você visita é na verdade um arquivo HTML, que é apenas um arquivo de texto – um monte de palavras – com HiperTexto ou Linguagem de Marcação adicionados ao conteúdo. HTML é a linguagem que usamos para escrever tags.

  Dica! Se necessário, forneça uma pequena visita guiada ao navegador, como barra de endereços, botões iniciais, favoritos e histórico.

• Esses arquivos, às vezes, contêm outros tipos de código, como javascript ou php, o que torna as páginas – quando exibidas no navegador – interativas, chamativas e dinâmicas, puxando o código do navegador.
• Os arquivos HTML são apenas texto e não são muito bonitos de se ver.
• O navegador os leva e os torna legíveis e visualmente mais interessantes, mergulhando no design e puxando imagens e vídeos.
• Arquivo HTML + navegador, como o Firefox = PÁGINA WEB INCRÍVEL PARA VOCÊ (espero).

Dica! Para mostrar essa ideia, abra uma página simples e estática e olhe. Explique: Vamos ver! Podemos ver como uma página web se parece nos bastidores, antes que o navegador chegue a ela, explorando a “fonte de exibição”.

• Como os arquivos HTML são apenas texto, eles podem ser escritos em um editor de texto básico e visualizados em um navegador. Se você tem um navegador e um editor de texto em seu computador – e quase TODOS tem – você pode construir uma página web!
• Suas páginas não estarão na web. Para isso, você precisa pegar o arquivo que você criou e enviá-lo para um servidor para que as pessoas possam acessá-lo por meio da URL ou endereço da web.

  Dica! Lembre às pessoas, talvez por meio de um diagrama, que os computadores clientes (usuários da web como você) se conectam à Internet e acessam páginas que residem em servidores na Internet. Servidores são projetados para “servir” páginas para usuários. As páginas web são arquivos HTML exibidos em um navegador, então eles ficam ótimos.

• MAS, por enquanto, você pode praticar a criação de páginas web aqui mesmo, no seu computador. Elas não estarão em um servidor na Internet, mas você ainda poderá criar os arquivos e visualizá-los no navegador em sua própria máquina.

  Dica! Aqui você pode apontar para o diagrama e mostrar que você está criando uma página em um computador cliente, que não está compartilhando arquivos como um servidor!

• Para começar, precisamos de CONTEÚDO – porque a web é toda sobre comunicação e compartilhamento de informações e ideias. Vamos gerar algum conteúdo juntos!

Conteúdo e Contação de histórias

[20 min]

Dica! A próxima parte é divertida e interativa, e ótima para criar uma comunidade de sala de aula amigável e positiva. Mas se você tiver pouco tempo e dar aos participantes a sensação de que eles podem ter sua própria representação na Web NÃO é uma prioridade, você pode fornecer conteúdo pré-digitado como um arquivo .txt e pular para a próxima seção. – “Obter Marcação.”

• Escreva sua biografia ou a página “Sobre”. Peça aos participantes que se dividam em duplas e se entrevistem sobre suas vidas. Como facilitador(a), mantenha o controle do tempo para garantir que cada participante tenha tempo igual para a cada história.

• Entrevista: peça aos participantes que demorem 5 minutos para contar sua história ou, se não quiserem compartilhar coisas pessoais, eles podem inventar um personagem fictício e contar a história do personagem. Peça ao ouvinte para fazer anotações ou possivelmente gravar em um dispositivo. Solicite que os usuários falem sobre o que é mais importante para eles (ou seu personagem fictício). Ofereça esta lista de perguntas para começar:

  • Qual é o seu nome, idade, outros detalhes?
  • Onde você nasceu? Onde você cresceu? Como foi isso?
  • O que você está fazendo agora? Como você gasta seu tempo? Quais são suas coisas favoritas para fazer, lugares favoritos, comida, música, etc?
  • Existe um momento favorito, momento de maior orgulho que se destaca?
  • Quais são seus planos e sonhos para o futuro?

Dica! O entrevistador pode fazer perguntas de acompanhamento para obter mais detalhes ou uma história mais completa. Ele ou ela pode fazer perguntas abertas como “por que” sobre as motivações, preferências, planos futuros, para ajudar a extrair mais percepções, ou ele pode fazer perguntas para esclarecer ideias na história.

• Revisão/Edição: Peça a cada participante que tire as anotações de sua história e as analise – considere adicionar detalhes, pense no que você deixou de fora.
• Organize e digite: peça aos participantes que digitem suas histórias em um editor de texto básico, certificando-se de usar o “modo de texto simples” (não o modo Rich Text). Ao digitar a história, eles podem considerar a organização e a estruturação da história em um começo, meio e fim. Talvez eles possam pensar em títulos para as seções: “Primeiros Dias” “Dias Atuais” “O que vem a seguir” ou eles podem encontrar outras formas de organizar o conteúdo, se eles falaram mais sobre seções de interesse – “Minhas músicas favoritas”, “lugares favoritos”, etc. A criação dessas seções ajudará a estruturar a biografia para facilitar a leitura como uma página web.
• Dê um título a sua história! Invente um título rápido para sua história ou conteúdo ou escolha algo básico.
• Crie uma nova pasta no seu computador e chame-a de “xx-paginaweb” usando suas iniciais.
• Salve sua história na pasta com a extensão .txt. – Dê um título sem espaços ou pontuação que não seja traços ou sublinhados, como “sobre-zm.txt”. Esta é a versão de texto da sua história, o conteúdo bruto.
• Além disso, salve sua história na pasta com .html como extensão, em vez de .txt – essa será sua versão web. O .html diz ao navegador para procurar por código html no arquivo. Dê um título sem espaços ou pontuação diferente de traços ou sublinhados, como “sobre-zm.html”.

Get Tagging!

[10 mins ]

• Explique aos usuários que eles vão marcar sua história – a versão .html – com HTML, para torná-la pronta para exibição no navegador. Explique que codificar HTML e pensar e escrever conteúdo são duas maneiras diferentes de pensar, eles devem sempre ter conteúdo escrito antes de marcá-lo, em vez de escrever e marcar ao mesmo tempo.

Dica! Uma ótima maneira de ajudar os participantes a fazer isso, se você tiver acesso ao computador e ao projetor de um(a) instrutor(a), faça a atividade com o seu próprio conteúdo junto com os participantes e projete os resultados para que todos possam ver o que você está fazendo.

• Inicie o arquivo com uma tag doctype – essa é uma das únicas tags que não tem conteúdo dentro, e nenhuma tag de fechamento – é uma tag solitária única, lembrando o navegador, mais uma vez que estamos escrevendo html <!DOCTYPE html>
• Adicione as tags <html> e </html> que envolvem toda a página – para que tudo dentro dela possa ser marcado com a linguagem de marcação.
• Depois disso, faça uma seção com um conjunto de tags chamada <head></head> no topo da página, antes de todo o seu conteúdo escrito. Colocaremos um pouco de conteúdo aqui para o navegador, mas não o veremos na própria página principal. Este é o título da página, que:
  • define um título na aba do navegador.
  • fornece um título para a página quando ela é adicionada aos favoritos.
  • exibe um título para a página nos resultados do mecanismo de pesquisa.
• Em seguida, adicione as tags – elas devem estar ao redor do texto inteiro da página.
• Use h1 para o título principal de sua página, o título da sua história na tela (diferente da tag de título)
• Use tags h2 ou h3 para títulos de seção
• Use tags p para parágrafos.
• Não esqueça de fechar suas tags!
• Para crédito extra, adicione links para outros sites (como uma página sobre sua cidade natal, seu time favorito, artista ou músico, ou uma receita favorita). Você também pode baixar e adicionar imagens, apenas certifique-se de que elas estejam na pasta “xx-paginaweb”.
• Por fim, quando você adicionar todas as suas tags, salve a página!
• Agora, abra seu navegador favorito e vá para Arquivos > abrir arquivo. Navegue até a sua pasta e clique no arquivo html que você acabou de criar. Como se parece? Você está vendo seu conteúdo formatado para a web? Você vê seu título aparecendo na aba no topo da barra do navegador? Se as coisas não parecem corretas, o que pode ter acontecido?

Dica! O(A) facilitador(a) pode solucionar problemas aqui ––– são problemas comuns faltar tags, especialmente tags de fechamento, erros de digitação em tags, um documento não salvo como html, problemas com nomes de arquivos de imagem, etc. O(A) facilitador(a) pode andar por aí e verificar páginas e discutir ou mesmo demonstrar no exemplo projetado o que acontece quando as tags são deixadas de lado (por exemplo, nunca fechar uma tag h1 é uma ótima maneira de mostrar a importância de fechar as tags).

• Parabenize à todos nas páginas que eles fizeram! Eles agora são web designers! Lembre às pessoas que as páginas ainda estão em seus computadores locais e não na web! Mas elas estão prontas para ir para lá.
• Tenha uma breve discussão sobre o upload para servidores, sobre hospedagem web, o que significa, como funciona, quanto custa, o que as empresas de hospedagem fazem.

Fique On-line!

[15 min]

• Se a sua instituição tiver espaço e recursos de servidor disponíveis, mostre aos participantes como usar um aplicativo de transferência de arquivos para transferir suas páginas para uma pasta no servidor. Fale sobre o UPLOADING vs DOWNLOADING.
• Discuta como a URL será construída, peça aos usuários para descobrirem suas próprias URLs – nome do domínio, nome da pasta da classe, nome da pasta pessoal, nome da página.
• Quando todas as páginas estiverem no servidor, peça aos usuários que apontem seus navegadores para a URL na web para ver suas páginas. Você está na web de verdade! Woo-hoo!

Dica! Se tiver tempo, tenha uma breve discussão sobre hospedagem web, o que significa, como funciona, quanto custa, o que as empresas de hospedagem fazem.

Reflexão da Experiência de Aprendizagem

[5 min]

• O que você gostou sobre esta atividade?
• Se você puder ensinar essa atividade a um público específico, o que você mudaria no processo, estrutura ou conteúdo para melhor atender às necessidades desse público?

Deixe a sua opinião sobre o Currículo Principal

• Conte-nos como e onde você está usando o currículo e o que você aprendeu e o que você gostaria de mudar.

próximo: Aplicativos Web e Construindo com o Thimble