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