Descrição

Nesta atividade, apresentamos os participantes aos sistemas – chamados construtores de sites ou sistemas de gerenciamento de conteúdo - que muitas pessoas (designers, desenvolvedores e novatos na Web que não são especialistas) usam para criar sites com muitas páginas diferentes e conteúdo atualizado frequentemente, como blogs ou sites de compras. Os participantes fazem alguma coleta de dados e usarem exemplos analógicos (caneta e papel) para explorar como os construtores web funcionam.

Objetivos da Aprendizagem

• Definir um construtor de sites/sistemas de gerenciamento de conteúdo.
• Identifique quatro elementos básicos das ferramentas de criação de sites.
• Descreva como os elementos dos construtores de sites funcionam para criar páginas web.

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

• Papel e lápis
• Imprima a planilha com as seguintes informações:
  • Planilha 1: Listagem de Animal de Estimação
  • Nome do animal de estimação:
  • Localização:
  • Tipo (gato, cachorro, etc):
  • Idade:
  • Imagem:
  • Caracteristícas:
  • Disponível para adotação (sim/não):

Habilidades de Alfabetização Web

• Código
• Composição
• Design

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

[2 min]

• Explique:
• Hoje vamos falar sobre algumas ferramentas de software - chamadas de construtores de sites ou sistemas de gerenciamento de conteúdo - que muitas pessoas (designers, desenvolvedores e novatos na web que não são especialistas) usam para criar sites.
• Essas ferramentas reúnem HTML e CSS (Cascading Style Sheets ou Folhas de Estilo em Cascata, usadas para adicionar estilos visuais a sites da Web) junto com outras linguagens de programação para agilizar o processo de criação de sites.
• Mas primeiro, vamos fazer uma atividade de coleta de dados rápida e divertida. Usaremos esses dados para modelar como os criadores web funcionam.

Atividade: Coleta de Dados

[5 min]

• O(A) facilitador(a) distribui mini planilhas (impressas 2 por página/corte para economizar papel). Peça aos participantes para preenchê-las. Explique:
• Não há problema em criar as informações.
• Na planilha do animal de estimação, você pode desenhar uma foto super simples - os bonequinhos em formato de palito são totalmente aceitos!
• O texto da planilha está abaixo. O(A) facilitador(a) pode remixar conforme necessário.
• Colete as planilhas e informe aos participantes que voltaremos a elas.

Planilha 1: Listagem de Animal de Estimação Nome do animal de estimação: Localização: Tipo (gato, cachorro, etc): Idade: Imagem: Caracteristícas: Disponível para adotação (sim/não):

Discussion: Website Creation

[30 min]

• Explique: vimos como criar uma página web básica: pegamos conteúdo e marcamos em HTML. Isso funciona muito bem, especialmente para sites que não mudam muito ou para sites pequenos com apenas 5 ou 6 páginas. Pergunte aos participantes:
  • Você consegue pensar em alguns sites estáticos: sites que não têm conteúdo novo com frequência ou nunca? Ou sites com poucas páginas? Exemplos podem ser um pequeno restaurante, etc.
• Mas e se tivermos informações que mudam o tempo todo? Ou se tivermos muitas e muitas informações? O que são sites que mudam muito?
• Os exemplos podem ser: sites meteorológicos e de notícias, blogs, sites de mídia social como o Facebook, Instagram, sites de compras.
• Que tipos de sites ou páginas visitamos com mais frequência? O que isso diz sobre a Internet? (ou seja, muita mudança, muita informação nova).
• Vamos supor que estamos fazendo um site com muitas páginas - um site que lista diferentes animais de estimação, onde as pessoas podem navegar pelas listas e ver se querem adotar um animal de estimação.
• Pergunte aos participantes: quais páginas são necessárias em nosso site? (página inicial, talvez uma página sobre, e talvez uma página que fala sobre cada animal de estimação).
• Então, vamos descobrir os passos para fazer o processo de criação do nosso site, e escrever os passos ou, em outras palavras, um algoritmo para isso. Digamos que já tenhamos nossas páginas “início” e “sobre”. E usaremos os dados de animais de estimação que acabamos de coletar. Qual é o algoritmo que escreveríamos para esse processo?

Dica! Algoritmo de amostra para criar páginas de estimação está aqui:

• Abra o editor de texto, salve o novo documento como .HTML
• Digite ou cole o conteúdo da primeira página do animal de estimação
• Nome do animal de estimação:
• Localização:
• Imagem:
• Idade:
• Caracteristícas:
• Disponível para adoção (sim/não):
• Comentário:
• Marque com HTML
• Adicione estilos para cada tipo de dados usando CSS
• Salve e verifique se funciona no navegador
• Abra o editor de texto, salve o novo documento como .HTML
• Cole o conteúdo da próxima página do animal de estimação
• Nome do animal de estimação:
• Localização:
• Imagem: *Idade:
• Caracteristícas:
• Disponível para adoção (sim/não):
• Comentário:
• Marque com HTML
• Adicione estilos usando CSS
• Salve e verifique se funciona no navegador
• (Repetir x vezes)

• Pergunte aos participantes:
  • Como este algoritmo se parece? O que você percebe sobre isso?
  • Como você vai se sentir sobre a adição de todos os animais de estimação? Possíveis respostas: é repetitivo, estamos fazendo a mesma coisa repetidamente, entediante para passar por todos os animais de estimação, isso vai durar uma eternidade.
  • O que poderíamos fazer para melhorar este processo?
• Explique que este é o desafio para qualquer site - como um blog ou um site de compras, um novo site - levará uma eternidade para fazer todas essas mudanças e novas páginas!
• Explique que os desenvolvedores e designers criaram ferramentas - algumas das quais são gratuitas e focadas em usuários iniciantes, como você - que ajudam a agilizar esses processos, para que ninguém precise marcar dezenas, centenas ou até milhares de páginas semelhantes.
• Em um construtor web, o computador faz a parte difícil! Sempre que temos um processo repetitivo, é um ótimo trabalho para um programa de software - os computadores realizam tarefas como esta muito melhor do que os humanos, sem reclamar.
• Essas ferramentas do construtor web, em sua forma mais básica, combinam quatro elementos. Vamos falar sobre como eles funcionam juntos.
  • Conteúdo armazenado em um banco de dados
  • Modelos HTML
  • Regras de design CSS
• Algumas linguagens de código são executadas para juntar tudo isso rapidamente (PHP, Python, Ruby, JavaScript).
• Uma interface simples de usuário para inserir conteúdo.
  • Esta interface esconde o HTML, CSS e qualquer código do usuário. Eles às vezes são arrastadas e soltas ou você digita seu conteúdo e faz algumas seleções simples. Mas vamos explorar como os construtuores web trabalham nos bastidores, depois que todas as suas coisas são inseridas no banco de dados.
• Vamos ver como isso é feito, para o nosso site favorito, no papel. Primeiro precisamos dos nossos 4 ingredientes!
  • Conteúdo no banco de dados
  • Cortaremos nossas planilhas, porque vamos querer acessar os dados separadamente.
• Crie um modelo HTML para a página do animal de estimação. Vamos deixar alguns espaços em branco onde o conteúdo irá.

• Consulte o exemplo:

• Crie algumas regras de estilo (diferentes para gatos, cães, lagartos).
• Cor de fundo da página

• Tamanho e cor da fonte

• Solte algumas instruções de código no modelo HTML para informar ao computador como juntar tudo. Vamos escrevê-los onde estão as notas azuis, para onde queremos que nossos dados sejam enviados. É como preencher as lacunas vazias ou loucas!

• Se fôssemos desenvolvedores trabalhando neste site em um computador, escreveríamos isso em linguagem de programação, mas aqui vamos apenas escrever instruções básicas, chamadas de “pseudo-código”. Não é o texto que precisamos para uma linguagem de programação real, mas expressa a intenção das instruções.
• Quais são as instruções? Vamos escrever outro algoritmo. Isso pode ser o que quisermos em termos de qual conteúdo adicionar, mas aqui está um exemplo:
  • Acesse o registro desejado para animais de estimação
  • Coloque o nome do animal ou o número do animal de estimação no título
  • Atribua a folha de estilos correta
  • Coloque o nome do animal de estimação no título
  • Coloque o nome da imagem na tag img
  • Coloque as características no parágrafo final

• Escreva as instruções que você sugeriu nas notas autoadesivas

• Agora, seja o código!
• Peça a um participante que tente montar a página seguindo as instruções da nota autoadesiva - isso é o que o código faz!
• Quando o navegador de um cliente solicita essa página para um determinado animal de estimação (por exemplo, Pet #2), o código do servidor reunirá as informações do banco de dados, atribuirá a folha de estilo correta e as enviará ao seu navegador. Isto faz a página ser exibida automaticamente! Portanto, uma página para cada animal de estimação não existe de maneira estática, mas é feita sob demanda.
• Isso é o que acontece nos bastidores de qualquer uma das plataformas de sistemas de gerenciamento de conteúdo/construtor web, como o WordPress, o SquareSpace ou o Wix.
• Como usuário, você estaria digitando conteúdo em uma interface, selecionando um modelo e pressionando um botão “publicar”. O código no lado do servidor e no navegador faz o resto! E agora você sabe como isso funciona!

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: Segurança em Primeiro