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

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?