Descrição

Nesta atividade on-line, os participantes consideram como gostariam de se representar na web. Eles obtêm um curso intensivo na ferramenta de desenvolvimento web Thimble e usam o que aprenderam nas duas atividades anteriores sobre HTML e marcação para remixar um modelo em sua própria página pessoal na web. Esta lição revisita os conceitos de hospedagem web, nomes de domínio e URLs.

Objetivos da Aprendizagem

• Explique a diferença entre diferentes aplicativos da web.
• Crie uma página web usando o aplicativo web Thimble.

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 e capacidade de projetar em uma tela

Habilidades de Alfabetização Web

• Código
• Composição
• Remixagem
• Revisão
• Design
• Compartilhamento
• Prática Aberta

Habilidades do Século XXI

• Comunicação
• Colaboração
• Criatividade

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

[5-7 min]

• Enquadre a atividade explicando que alguns sites são bem diferentes dos outros. Alguns são simples; outros são mais complexos. Podemos dividir os sites que usamos em duas grandes categorias:

Dica! Recomenda-se que primeiro os usuários concluam a atividade “Construindo Páginas Básicas”.

• 1ª categoria: sites onde você pode acessar informações estáticas.
• Esses sites podem não mudar muito ao longo do tempo.
• Como usuário, você não pode fazer muito para alterar o site de conteúdo ou como ele funciona para você.
• Muitas das primeiras páginas web eram assim.
• Pergunte aos participantes: wuais são os exemplos de páginas estáticas? Pense em sites que não têm conteúdo novo com frequência ou nunca. Ou sites com poucas páginas.

Dica! Os exemplos podem ser o site de um pequeno restaurante, etc. Esses sites são projetados principalmente para transmitir informações.

• 2ª categoria: sites onde, como usuário, você pode fazer algo como criar um resultado ou alterar usando a página.
• Estes são sites que você usa para fazer algo acontecer.
• Você pode criar ou compartilhar algo ou fazer algo para alterar o conteúdo exibido ou fornecer informações para concluir uma tarefa.
• Pergunte aos participantes: quais são os exemplos de sites como esses? Qual foi a última coisa que você fez na web?

Dica! Os exemplos podem ser um site de uma biblioteca pública onde você pode pesquisar e reservar livros e outros recursos. Ou qualquer cliente de e-mail web, como Gmail, Yahoo, Hotmail ou serviços de mensagens instantâneas. Sites de compras, jogos baseados na web, sites de mídia social, etc. A Pesquisa do Google é um aplicativo web, assim como o Facebook.

• Sites (ou partes de sites) que permitem aos usuários fazer algo na web são chamados de aplicativos web.
• Esses aplicativos web são alimentadas por programas (código) que permitem que o computador cliente (aquele que você usa para navegar) trabalhe com o servidor (o computador onde o site reside) para que algo aconteça.
• Muitos dos elementos pequenos e simples que os participantes já viram antes podem ser considerados aplicativos web.
• Formulários web que permitem que os usuários enviem informações, por exemplo, seu nome e endereço de e-mail.
• Barras de pesquisa que permitem que os usuários acessem resultados definidos com base em uma pergunta ou termo que você digita em uma barra de pesquisa.
• Pergunte aos participantes se eles usaram barras de pesquisa ou formulários web - se assim for, eles usaram aplicativos web!
• Explique que os aplicativos web também podem ser muito mais complexos. O Thimble é um aplicativo web para criar páginas web. O Thimble é uma ferramenta de codificação para escrever HTML e outras linguagens web; Ele também publica as páginas dos participantes para que elas estejam on-line, na web.

Dica! Se os participantes já tiverem feito a atividade “Construindo Páginas Básicas” (que é recomendada), você pode lembrá-los de que eles não precisam estar on-line OU de usar um aplicativo web como o Thimble para criar páginas web. Eles podem usar um editor de texto simples para escrever HTML e salvar suas páginas e usar qualquer navegador para visualizar páginas. Essas páginas estão off-line até serem carregadas em um servidor web.

Conheça o Thimble, Faça um Tour

[5-7 min]

• Para esta seção, o(a) facilitador(a) deve projetar sua tela para que todos os participantes possam ver a turnê do Thimble. O ideal é que os participantes acompanhem em seus próprios computadores. Os participantes podem achar útil trabalhar em pares.

Dica! É melhor que os usuários façam login/criem uma conta para poder publicar páginas. No entanto, se os usuários não se sentirem à vontade para criar uma conta, eles poderão brincar com a criação ou edição de HTML no editor e ver como os resultados mudam na janela de visualização. Eles não poderão publicar páginas.

• Vá para a página inicial do Thimble e clique em “Comece um projeto do zero”. Explique aos usuários que agora saímos da página inicial do Thimble e estamos usando o Thimble como um aplicativo web para fazer algo: criar páginas HTML. Estamos fazendo isso no navegador, o que é muito legal!
• Pergunte aos participantes: o que você vê? como esta página é diferente da página inicial do Thimble? Como a página é dividida? Para que serve cada seção ou janela? Qual é a relação entre as seções? Deixe que os participantes falem e apresentem respostas, mas certifique-se de que eles entendam o seguinte:
  • No canto superior esquerdo, há uma área onde você pode digitar e alterar o nome do arquivo de “projeto sem título” para um nome de arquivo que faça sentido para a página que você deseja criar.
  • À esquerda, há um espaço chamado ARQUIVOS, no qual vemos dois nomes de arquivos. Estes são os dois arquivos que podemos trabalhar e editar para este projeto. Os participantes podem alternar entre eles clicando nos nomes. Se os participantes criarem novos arquivos, eles aparecerão aqui.
  • No meio há espaço chamado EDITOR, onde podemos ver o código HTML, e podemos editá-lo também.
  • À direita, há um espaço chamado “VISUALIZAR” - quando editamos o código, vemos como ele será exibido em um navegador - e as alterações ocorrerão à medida que digitarmos!

Dica! Este é um recurso interessante, portanto, dê aos usuários algumas pequenas tarefas para fazer - por exemplo, alterar o tamanho do título ou editar a palavra “amazing”.

• Observe que as alterações ou adições que não seguem as regras de HTML não aparecerão na visualização. Os participantes verificam problemas no editor, onde o erro ou “bug” será destacado em vermelho na janela do editor.
• Observe também o endereço na barra do navegador, na parte superior da tela. Se você não estiver conectado, deverá haver uma faixa preta após o endereço “https://thimble.mozilla.org/pt-BR/” e depois, “anonymous” e uma barra invertida + sequência de letras e números - esse é um local de espaço reservado no servidor da Mozilla onde sua sessão do Thimble será armazenada temporariamente.
• Se os participantes estiverem conectados, o endereço da web será https://thimble.mozilla.org/pt-BR/ + / username + /algum conjunto curto e aleatório de números.
  • Este é um local (uma URL) que o aplicativo web criou para armazenar o trabalho desse participante no projeto, é a visualização do projeto.
  • Os participantes também podem encontrar seus projetos clicando no nome de usuário no canto superior direito e selecionando “Meus projetos”.
• No canto superior direito, há um botão PUBLICAR. Se um participante estiver conectado ao Thimble e pressionar esse botão, sua página será salva nos servidores da Mozilla e estará acessível na web. O Thimble fornecerá um endereço da web diferente daquele para a visualização do Thimble. Isto publica o endereço da sua página, AO VIVO na Web! Qualquer pessoa, em qualquer lugar na web, pode ver a sua página neste endereço.

Dica! Talvez seja necessário esclarecer para os usuários que as pessoas que visitam esse endereço verão apenas a própria página, NÃO a visualização de trabalho do Thimble com a janela do editor e todas as opções. Teste e compare o endereço publicado com o endereço de visualização do Thimble.

Faça suas Páginas

[15-20 min]

• Para esta parte da atividade, os facilitadores têm várias opções de conteúdo para essas páginas.
• Os participantes podem selecionar um projeto existente para remixar - Tags Comuns é ótimo para começar. Essa é uma boa opção se o tempo para gerar um novo conteúdo for pequeno.

Dica! Se você decidir trabalhar com Tags Comuns como um projeto remixável, certifique-se de apontar a aba TUTORIAL, que aparece na janela de visualização. Os participantes procuram ajuda para concluir a atividade.

• Alunos que já fizeram a atividade “Construindo Páginas Básicas” já devem ter uma história sobre si mesmos escrita - eles podem adicionar a essa história e depois trazê-la para o Thimble.

Dica! Se o tempo estiver apertado, eles podem pular a adição de novo conteúdo e trazer a cópia da história existente.

• Peça aos participantes para adicionar à sua história de vida - peça-lhes que façam um brainstorming e escrevam uma nova seção sobre sua cidade natal, um parente favorito, uma memória positiva, etc. A escolha do(a) facilitador(a).

Dica! Certifique-se de que eles compõem em seu arquivo .txt salvo, e não diretamente no Thimble, e que eles não marquem e componham simultaneamente! Codificar e criar são duas formas diferentes de pensar - os participantes que fazem as duas coisas ao mesmo tempo podem diminuir o fluxo criativo ao adicionar tags à medida que escrevem ou podem se perder na história e esquecer as tags.

• Peça aos participantes para copiar e colar o conteúdo da matéria bruta no editor do Thimble (dentro das tags do corpo, é claro). Em seguida, eles podem praticar marcando essa página novamente (e marcando as novas partes) para se familiarizarem com as tags e escreverem HTML.
• Se os participantes não tiverem feito a atividade “Construindo Páginas Básicas”, eles podem gerar o conteúdo da história da seguinte forma: peça aos participantes que se dividam em pares e se entrevistem sobre suas vidas. Como facilitador, mantenha o controle do tempo para garantir que cada participante tenha tempo igual para a sua história.
• Entrevista: peça a cada um que reserve 5 minutos para contar sua história ou, se não quiserem compartilhar coisas pessoais, eles podem inventar o personagem fictício e contar a história desse personagem. Peça ao ouvinte para fazer anotações ou possivelmente gravar em um dispositivo. Solicite aos usuários que falem sobre o que é mais importante para eles (ou seu personagem fictício). Ofereça esta lista de perguntas para começar:
  • 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, alimentos, música, etc
  • Existe um momento favorito, momento de maior orgulho que se destaca?
  • Seus planos e sonhos para o futuro

Dica! O(A) entrevistador(a) pode fazer perguntas de acompanhamento para obter mais detalhes ou uma matéria mais completa. Ele pode fazer perguntas abertas sobre motivações, sobre preferências, sobre planos futuros, para ajudar a extrair mais percepções, ou pode fazer perguntas para esclarecer ideias na história.

• Revisar/Editar: peça a cada participante que tire as anotações de sua história e as analise - considere adicionar detalhes, pense no que 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. Criar essas 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 vá com algo básico.
• Crie uma nova pasta no seu computador e chame-a de “xx-paginaweb” usando suas iniciais. Você deve salvar este arquivo em duas versões.
• Salve sua história na pasta com .txt como extensão. 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.
• Copie e cole este conteúdo bruto na janela do editor do Thimble e comece a marcar.
• Alunos que criam suas próprias páginas pessoais no Thimble podem retornar a eles e adicionar conteúdo, especialmente para as atividades da “Lista de Reprodução do Projeto” ou “Todos os Adesivos” na seção “Participar”.

Conclusão e Discussão

[10 min]

• Escolha um dos tópicos abaixo para encerrar a atividade:

Código de Compartilhamento e Remixagem com Thimble

• Se os participantes trabalharem com suas próprias histórias, apresente-os a projetos remixáveis e à aba Tutorial, e deixe-os explorar e jogar por 5 ou 10 minutos. Se eles tiverem remixado um projeto existente, faça uma discussão sobre essa experiência. Pergunte aos participantes:
  • Como é ver o código de outras pessoas? O que você achou novo, surpreendente? Você vê coisas que gostaria de experimentar?
  • O que você pode aprender usando o Thimble para explorar e remixar projetos?
  • Como você se sentiria se alguém remixasse seu projeto?
• Mesmo que uma página não esteja no Thimble, em muitos navegadores você pode espiar o código-fonte… No FireFox, vá em Ferramentas > Web Developer > Código-fonte da página para ver o código por trás de qualquer página. Se uma página for um aplicativo web, o código provavelmente será complexo. Se for uma página estática, será mais fácil de ler.

Prós e Contras do Thimble vs Compor Off-line

Revisite/explore a diferença entre compor e publicar com o Thimble OU criar páginas com um editor de texto/navegador e salvar em um computador pessoal. O(A) facilitador(a) pergunta aos participantes as diferenças. Algumas podem ser:

• Com o Thimble você está na web imediatamente! A página é salva no servidor da Mozilla. E você pode ver suas alterações enquanto digita.
• Com um editor de texto/navegador, você está trabalhando em sua máquina local, não na web. Você precisa salvar seu arquivo e atualizar o navegador para ver as alterações.
• Com o editor/navegador, você precisa fazer o upload para um servidor para colocar sua página on-line onde outras pessoas possam acessá-lo.
• Você precisa de uma conexão web para acessar ao Thimble.
• Você não precisa estar on-line para criar sites com o navegador e um editor de texto básico.
• Thimble é projetado para aprender código, não para publicar sites a longo prazo.
• Existem limitações de espaço para quantos arquivos você pode ter no Thimble. E o endereço da web…
  • Como é o endereço da web (URL) da sua página Thimble diferente do endereço web do seu blog ou site favorito? Se você tivesse um negócio, isso funcionaria para um endereço da web?

Dica! Os participantes devem entender que os endereços do projeto Thimble são genéricos; eles não expressam o conteúdo do seu projeto. Eles são difíceis de lembrar. Para obter o incrível endereço da Web que desejam para a página, os participantes teriam que comprar um nome de domínio (como superpagina.com ou páginaincrivel.biz) e pagar por uma hospedagem Web - espaço do servidor onde suas páginas podem ser acessadas on-line.

• Thimble é realmente uma ferramenta de aprendizado - para testar e experimentar páginas.
• O editor de texto/combinação de navegador é uma maneira fácil de começar e pode levar você muito longe na criação de páginas e sites.
• Para sites mais complexos, você pode usar um aplicativo projetado especificamente para criar e hospedar páginas rapidamente - confira a atividade “Construtores de Sites”.

A Evolução da Web

• Explique: nos primeiros dias da web, muitas páginas eram estáticas. Houve muito compartilhamento de informação, mas não muita interação.
• Mostre um exemplo da web antiga usando a máquina de retrocesso do Internet Archive’s e pesquise pelo link do site da Apple.
• Compare, por exemplo, apple.com em 1996 com apple.com hoje (ou encontre seus próprios exemplos).
• Como é a experiência em cada site? Quais são as maiores mudanças?
• Como você acha que a web será em 20 anos? O que você gostaria de poder fazer na web do futuro?

Dica! O(A) facilitador(a) pode enfatizar que os dispositivos móveis “inteligentes” não existiam há cerca de 20 anos - o que podemos fazer na Web pode mudar, mas onde e como fazemos isso pode mudar também.

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: Construtores Web