(Ebook +IFMG) - Criação de sistes utilizando ferramentas google

CRIAÇÃO DE SITE UTILIZANDO
FERRAMENTAS GOOGLE
Ricael Spirandeli Rocha

Cláudia Maria Soares Rossi
Formação Inicial e
Continuada
+ IFMG
Campus Formiga
Criação de Site Utilizando Ferramentas Google

1ª Edição
Belo Horizonte
Instituto Federal de Minas Gerais
2021
© 2021 by Instituto Federal de Minas Gerais
Todos os direitos autorais reservados. Nenhuma parte desta publicação poderá ser
reproduzida ou transmitida de qualquer modo ou por qualquer outro meio, eletrônico
ou mecânico. Incluindo fotocópia, gravação ou qualquer outro tipo de sistema de
armazenamento e transmissão de informação, sem prévia autorização por escrito do
Instituto Federal de Minas Gerais.
Pró-reitor de Extensão Carlos Bernardes Rosa Júnior

Diretor de Programas de Extensão Niltom Vieira Junior
Coordenação do curso Ricael Spirandeli Rocha
Arte gráfica Ângela Bacon
Diagramação Eduardo dos Santos Oliveira
FICHA CATALOGRÁFICA
Dados Internacionais de Catalogação na Publicação (CIP)
R672c Rocha, Ricael Spirandeli.

Criação de site utilizando ferramentas Google. [recurso eletrônico] /
Cláudia Maria Soares Rossi.– Belo Horizonte : Instituto Federal de
Minas Gerais, 2021.
53 p. : il. color.
E-book, no formato PDF.

Material didático para Formação Inicial e Continuada.
ISBN 978-65-5876-064-1
1. Programação Web. 2. Google Workspace. 3. Website. I. Cláudia

Maria Soares Rossi. II. Título.
CDD 005.1
Catalogação: Rejane Valéria Santos - CRB-6/2907
Índice para catálogo sistemático:

Programação Web – 005.1
2021
Direitos exclusivos cedidos ao
Avenida Mário Werneck, 2590,
CEP: 30575-180, Buritis, Belo Horizonte – MG,
Telefone: (31) 2513-5157
Sobre o material
Este curso é autoexplicativo e não possui tutoria. O material didático,

incluindo suas videoaulas, foi projetado para que você consiga evoluir de forma
autônoma e suficiente.
Caso opte por imprimir este e-book, você não perderá a possiblidade de
acessar os materiais multimídia e complementares. Os links podem ser
acessados usando o seu celular, por meio do glossário de Códigos QR
disponível no fim deste livro.
Embora o material passe por revisão, somos gratos em receber suas
sugestões para possíveis correções (erros ortográficos, conceituais, links
inativos etc.). A sua participação é muito importante para a nossa constante
melhoria. Acesse, a qualquer momento, o Formulário “Sugestões para
Correção do Material Didático” clicando nesse link ou acessando o QR Code a
seguir:
Formulário de
Sugestões
Para saber mais sobre a Plataforma +IFMG acesse

http://mais.ifmg.edu.br
Palavra dos autores
Caro cursista, é com satisfação que vos damos as mais cordiais boas-
vindas ao curso de Formação Inicial e Continuada em Criação de Site
Utilizando Ferramentas Google.
Como professores e alunos, sabemos que dificuldades fazem parte do
processo de aprendizagem. Nesse contínuo processo do conhecimento, é
essencial saber o que deve ser feito para enfrentar esses impasses. Da mesma
forma, é importante trabalhar as competências dos alunos.
A produção de sites utilizando ferramentas Google, mesmo sendo
intuitivas e fáceis de usar, é importante a realização prática do curso.
Felizmente, é fácil encontrar respostas, todo material foi produzido no intuito de
auxiliar como estratégias de pesquisa, criando experiências de aprendizagem
incríveis para toda comunidade.
Dessa forma, o objetivo deste curso é preparar e capacitar com formação
inicial e continuada de profissionais da educação e comunidade externa que
desejam conhecer sobre criação de site utilizando as ferramentas Google,
podendo contribuir no processo de ensino e aprendizagem dos estudantes, a
fim de ampliar novas possibilidades metodológicas.
O curso está dividido em quatro módulos, iniciando com noções sobre
programação web. Em seguida, vamos explorar as ferramentas do Google
Workspace. Já na terceira semana, vamos realizar um escopo e planejamento
para criação de site. Para finalizar, na quarta semana será estudado a criação
de site utilizando ferramentas Google.
Desejamos que todo estudo proposto colabore com novos
conhecimentos e aprendizagem sobre criação de sites utilizando ferramentas
Google, valorizando as diferentes bases, solidificando tecnologias
educacionais a partir de metodologias diversificadas no cotidiano dos alunos.
Bons estudos, dedicação e sucesso!

Apresentação do curso
Este curso está dividido em quatro semanas, cujos objetivos de cada uma são
apresentados, sucintamente, a seguir.
Nesta primeira semana, será apresentado noções sobre

SEMANA 1
programação web.
Nesta semana, vamos conhecer as ferramentas do Google

SEMANA 2
Workspace.
Nesta terceira semana, vamos aprender como realizar

SEMANA 3
escopo e planejamento para criação de site.
Nesta semana, será estudado a criação de site utilizando

SEMANA 4
ferramentas Google.
Carga horária: 40 horas.

Estudo proposto: 2h por dia em cinco dias por semana (10 horas semanais).
Apresentação dos Ícones
Os ícones são elementos gráficos para facilitar os estudos, fique atento quando
eles aparecem no texto. Veja aqui o seu significado:
Atenção: indica pontos de maior importância

no texto.
Dica do professor: novas informações ou

curiosidades relacionadas ao tema em estudo.
Atividade: sugestão de tarefas e atividades

para o desenvolvimento da aprendizagem.
Mídia digital: sugestão de recursos

audiovisuais para enriquecer a aprendizagem.
Sumário
Semana 1 – Noções sobre programação web ............................................... 15

1.1. Conceitos iniciais sobre web .............................................................. 15
1.2. Conceitos de hipertexto e hiperlink..................................................... 17
1.3. Linguagem de programação para web ............................................... 18
Semana 2 – Introdução à ferramentas do Google Workspace ...................... 21
2.1 Ferramentas colaborativas ................................................................. 21
2.2 Ferramentas colaborativas para website ............................................ 22
Semana 3 – Escopo e planejamento para criação de site ............................. 27
3.1 Escopo inicial do site .......................................................................... 27
3.2 Planejamento para criação de site ..................................................... 30
Semana 4 – Criação de site utilizando ferramentas Google .......................... 35
4.1 Criando possibilidades com o Google Sites ....................................... 35
4.2 Criação de site com ferramentas do Google Workspace .................... 36
4.3 Personalização do site ....................................................................... 39
4.4 Visualização e publicação do site ....................................................... 42
Referências ................................................................................................... 45
Currículo dos autores .................................................................................... 47
Glossário de códigos QR (Quick Response) ................................................. 49
Semana 1 – Noções sobre programação web Plataforma +IFMG
Objetivos
Nesta primeira semana, será apresentado noções sobre
programação web.
Mídia digital: Antes de iniciar os estudos, vá até a sala

virtual e assista ao vídeo “Apresentação do curso”.
1.1. Conceitos iniciais sobre web
Como professores, sabemos o valor que a tecnologia tem no cotidiano dos alunos e
na comunidade escolar. No entanto, os estudantes da contemporaneidade precisam ser
bons cidadãos no mundo digital. O comportamento digital tem um grande impacto na vida
dos alunos e na vida de outras pessoas, e uma das ações que vem se destacando é a
programação web.
A programação web é um tema que precisamos abordar com mais cuidado e mais
profundamente nas nossas escolas. Algumas escolas têm experiência com a integração do
desenvolvimento tecnológico pela programação web nas salas de aula. Outras estão apenas
começando. Em todos os casos, há oportunidades para melhorar.
No nível da escola, políticas e procedimentos e um currículo de cidadania digital
definido podem auxiliar professores e alunos na sala de aula. Isso ajuda a deixar os alunos
cientes do que eles devem e não devem fazer, com o objetivo de mantê-los conectados e
criativos no desenvolvimento de novos projetos.
Inicialmente é importante compreender o que é de fato a “web”, embora algumas
pessoas utilizem o termo web como sinônimo de internet, existe uma distinção entre esses
dois conceitos, segundo Boniati e Silva (2013) o termo internet refere-se a grande rede de
computadores que estão interligados mundialmente, compreendendo uma grande
infraestrutura em forma de rede digital.
Já o termo web remete a derivação da expressão World Wide Web (WWW) sendo
este, um tipo de funcionalidade que ocorre na internet, onde é possível acessar conteúdos
através de hiperlinks e hipertextos, conceitos que iremos abordar mais adiante.
A conexão do computador com a internet é rápida, mas ocorre a partir de um
procedimento interno de comunicação, sendo necessário que o computador que irá se
conectar obtenha um número de identificação conhecido como Internet Protocol ou Protocolo
de Internet (IP). A importância deste protocolo ocorre na comunicação onde dois

Pró-Reitoria de Extensão
15
Plataforma +IFMG
computadores precisam ter um número de identificação para que ocorra esse contato, isto
é, no momento que ocorre a conexão do computador com a internet, obtém-se um número
(IP) para que seja possível a realização da conexão digital a partir da internet.
A partir dessa premissa, podemos compreender o que é uma URL, este é um termo
voltado para web. O Uniform Resource Locatoro ou localizador padrão de recursos (URL) é
basicamente a forma correta quando mencionamos um endereço de um site na internet. A
URL direciona o usuário para um destino particular, que pode ser um vídeo, documento,
serviço, página de um site, dentre outros.
A URL carrega todas as informações daquele destino, desde o protocolo até o tipo de
site que estamos acessando. A figura 1 evidencia as características de uma URL:
Figura 1 – Característica de uma URL.

Fonte: Acervo dos autores.
O endereço que a URL carrega pode ser compreendido em partes:

I- “https://” é a sigla do protocolo de transferência de hipertexto, escrito em inglês
e adotado mundialmente como forma padrão na escrita para transmissão de conteúdo
em formato que pode incluir texto, imagens e links.
II- “www.” é o sistema World Wide Web que circula as informações no formato de
hipertexto, composto por sites interligados em rede.
III- google é o nome do site que foi exemplificado, sendo que cada sítio eletrônico
possuí um nome próprio.
IV- “.com” é a abreviação de comercial e indica que o site é de uso comercial,
podendo este elemento sofrer divergências como “.gov” para sites governamentais,
“.edu” para sites educacionais, assim por diante.
V- “.br” indica que o site está em um domínio brasileiro, isto é, o site aponta para
uma linguagem brasileira.

16
Plataforma +IFMG
1.2. Conceitos de hipertexto e hiperlink
A programação web é basicamente um conjunto de códigos que permitem a

construção interativa de textos, conteúdos, imagens, vídeos dentre outros recursos de forma
eletrônica, formando assim uma página web.
Os chamados websites são compostos por várias páginas web, construídas a partir
da programação, reunindo elementos midiáticos que podem levar interação aos usuários.
Os textos eletrônicos são chamados de hipertextos, este termo foi criado nos anos 60 por
Theodore Nelson, sendo um dos grandes adventos do século XX (BONIATI; SILVA, 2013).
O hipertexto pode ser denominado como uma forma de leitura e escrita por textos,
frases ou parágrafos que se ligam ou intercalam com outras referências textuais.
Foi a partir do princípio do hipertexto que o britânico Tim Berners-Lee criou a
navegação eletrônica por hipertexto, organizando os textos de forma que pudessem se
interligar com outros textos além de poder ser compartilhados. Partindo dessa ideia, Tim
Berners-Lee originou um programa de computador (software) e um protocolo de hipertexto,
o HTTP (BONIATI; SILVA, 2013).
Atenção: Faça uma parada e lei o texto a seguir que foi

questão do Enem em 2011, a qual tratava sobre
hipertexto e suas características.
“O hipertexto refere-se à escritura eletrônica não sequencial e não linear, que se bifurca
e permite ao leitor o acesso a um número praticamente ilimitado de outros textos a partir
de escolhas locais e sucessivas, em tempo real. Assim, o leitor tem condições de definir
interativamente o fluxo de sua leitura a partir de assuntos tratados no texto sem se prender
a uma sequência fixa ou a tópicos estabelecidos por um autor. Trata-se de uma forma de
estruturação textual que faz do leitor simultaneamente coautor do texto final. O hipertexto
se caracteriza, pois, como um processo de escritura/leitura eletrônica multilinearizado,
multisequencial e indeterminado, realizado em um novo espaço de escrita. Assim, ao
permitir vários níveis de tratamento de um tema, o hipertexto oferece a possibilidade de
múltiplos graus de profundidade simultaneamente, já que não tem sequência definida,
mas liga textos não necessariamente correlacionados.”
Fonte: ENEM (2011) In: MARCUSCHI, L. A. Disponível em:

<https://download.inep.gov.br/educacao_basica/enem/provas/2011/05_AMARELO_GAB.pdf>.
Acesso em: 05 dez. 2021.

17
Plataforma +IFMG
Partindo da compreensão sobre hipertexto, podemos avançar para o conceito de

hiperlink. Antes disso, é importante entender que link é uma palavra americana que significa
ligação, sendo o hiperlink uma derivação desse conceito que interliga elementos em uma
palavra, frase ou imagem, quando o usuário clica no hiperlink em destaque. O hiperlink é
basicamente um link que direciona o usuário para uma página web, um website, ou para
outras formas de mídias eletrônicas.
Por fim, é importante compreender um último conceito inicial. No entendimento que
websites são produzidos a partir da programação web e, que temos uma URL que direciona
o endereço eletrônico para o website através de um protocolo específico, navegando pelo
hipertexto, então indagamos: Onde toda produção citada é armazenada?
A página web não fica flutuando na internet sem um destino, para isso, denominamos
que a página web está hospedada através de um servidor web, que também chamamos de
(web server). Segundo Boniati e Silva (2013, p. 25) o web server é um software que “recebe
requisições de documentos por meio de URLs e as entrega por meio do protocolo HTTP”.
Dessa forma, a hospedagem é um serviço web realizado por empresas especializadas em
publicar o website, alugando ou comprando um espaço dentro de um servidor.
Não obstante, observamos a utilização dos navegadores que também são
denominados por browser, esses softwares têm importante função pois, operam na
requisição de formato a partir de uma URL, após esse recebimento, ocorre o resultado na
forma de página web por um documento desenvolvido por uma linguagem de programação,
o mais comum é o HTML, a qual interpreta e apresenta ao utilizador.
Dica do Professor: Existem vários tipos de browser,

alguns exemplos gratuitos são: Internet Explorer, Google
Chrome, Firefox, Opera, Microsoft Edge, dentre outros.
1.3. Linguagem de programação para web
Diante das etapas evidenciadas sobre website, o núcleo que dá vida às páginas da
internet são os códigos ou linguagens de programação. Se tratando do contexto web que
está inserido dentro da internet, uma das principais linguagens é HTML, esse tipo de
linguagem é considerada uma marcação construída a partir de hipertextos, por isso o
significado da sigla HTML é Hypertext Markup Language, ou Linguagem de marcação de
hipertexto.
Segundo Niederst (2002) a linguagem de marcação é um conjunto de ações e
mecanismos que são inseridos nas páginas em branco para adicionar algum tipo de marca
ou significado para um texto, sendo estas ocultadas na versão final apresentada para o
usuário.

18
Plataforma +IFMG
Dica do Professor: Existem vários softwares que

permitem e auxiliam a construção de páginas em HTML,
no entanto, pode-se utilizar o bloco de notas para realizar
a edição da linguagem, salvando o arquivo no formato
“exemplo.html”. Nesse sentido, a linguagem pode ser
trabalhada na construção de um website, sua estrutura
permite que o browser opere de forma direta a partir das
marcações realizadas.
Em HTML trabalhamos com marcações denominadas “tags” ou etiquetas, essas tags

são marcas que iniciam, delimitam e fecham a construção de um conteúdo, no entanto,
essas tags podem conter atributos que são definidos pelo corpo da programação ou “body”
que define ações particulares na programação web.
A linguagem HTML possui algumas versões, a mais utilizada é a versão 5 pois foi
padronizada no conceito "WWW" sendo compatíveis com uma diversidade de websites que
existe. Para maior compreensão, o Quadro 1 destaca algumas tags e suas funções em
HTML:
Nome da tag Descrição

Esta tag define o começo e o fim do código HTML, isto é, ao escrever essa
tag no início do documento, declara-se a abertura do código, já no final,
<html> declara-se o fechamento do código, sendo essas duas declarações
obrigatórias para que a linguagem web funcione.
A tag <head> significa “cabeça” ou cabeçalho, essa seção inicia no topo do

código, utiliza-se basicamente para configurar os comandos que serão
recebidos e lidos antes do carregamento de conteúdo a ser inseridos. No
<head>
entanto, essa tag é opcional, mas ajuda muito a ter uma estrutura de
programação de fácil entendimento.
Assim como a tag <head>, a tag <body> é o corpo da página, definindo o

espaço que será escrito o código do documento HTML, permitindo realizar
<body>
alteração como: imagem, cor de fundo, dentre outras ações.
Conforme o nome sugere, a tag <title> indica o título da página web, a qual
<title> o desenvolvedor irá iniciar a inserção do título de um conteúdo.
A tag <h1> assim como outras tags <h2>; <h3>; <h4> ... são tags que
indicam cabeçalho no documento, surgindo a partir da necessidade de
<h1>
indicar uma área que merece destaque.
A tag <p> significa parágrafo, sendo utilizada quando há necessidade de

<p> inserir um parágrafo no texto e/ou conteúdo produzido no documento HTML.
Quadro 1 – Tags e descrição do HTML


19
Plataforma +IFMG
Existem muitas outras tags que podem ser utilizadas no documento HTML, a
linguagem de marcação possui vários tipos de etiquetas que possuem atribuições diversas,
no entanto, este estudo inicial é a base para compreender como a programação web é
realizadas, dando base essencial para compreensão de dispositivos que irão auxiliar na
criação de websites.
Atividade: Para concluir a primeira semana de estudos,

vá até a sala virtual e participe do Fórum “Introdução à
programação web”. Copie e cole o código inserido no
fórum no bloco de notas, salve no formato .html e, abra
em um browser. Despois de executar a prática,
compartilhe sua experiência no fórum e suas impressões
sobre a linguagem de marcação (HTML).
Concluída essa primeira semana de estudos é hora de fazer uma pausa. Alie o
conhecimento aprendido na primeira semana com a sua experiência no ensino (enquanto
educador) e com a sua aprendizagem (enquanto aluno (a)). Se necessário, releia o material.
Reflita sobre as novas concepções que este módulo lhe proporcionou e como são
realizados o desenvolvimento de páginas web neste vasto mundo digital que é a internet!
Nos encontramos na próxima semana.
Bons estudos!

20
Semana 2 – Introdução à ferramentas do Google Workspace
Plataforma +IFMG
Objetivos
Nesta semana, vamos conhecer as ferramentas do Google
Workspace.

virtual e assista ao vídeo “Apresentação da semana 2”.
2.1 Ferramentas colaborativas
O Google Workspace é um conjunto de ferramentas que reúne em um serviço,

possibilidade de interação e colaboração na utilização de recursos digitais. Esse serviço
possui ferramentas gratuitas que a empresa Google disponibiliza para toda comunidade.
Vamos identificar algumas formas de utilizar as ferramentas do Google Workspace
tanto na escola como no dia a dia de cada sujeito. Obviamente que, embora seja fantástico
utilizar ferramentas digitais gratuitas, uma das maiores vantagens de usar o Google
Workspace é a capacidade de colaborar. Não somente seus alunos podem compartilhar
documentos com você, como, os alunos podem compartilhar documentos com os
professores, além de compartilhar outras ferramentas para feedback dos colegas e/ou
projetos em grupo, sendo até mesmo um website.
Figura 2 – Ferramentas do Google Workspace.


21
Plataforma +IFMG
2.2 Ferramentas colaborativas para website
O Google Workspace possui várias ferramentas colaborativas gratuitas, no entanto,

a principal ferramenta que concede acesso às demais, é o Gmail, isto é, o correio eletrônico
da Google. Com o Gmail o usuário pode realizar sua identificação e iniciar o acesso de outras
ferramentas digitais.
Para ter acesso ao Gmail, siga os passos:
1º Inicie com o navegador de internet, preferencialmente com o Google Chrome, no
entanto, outro navegador também irá funcionar;
2º Na barra de endereço, digite “gmail.com” sem aspas, aperte “Enter” para
prosseguir;
3º Na tela de login, clique em fazer login utilizando sua conta Gmail, para iniciar a
sessão;
4º Informe o e-mail (Gmail) e senha do e-mail para entrar no Gmail.
5º Pronto! Você estará conectado(a) na sua conta Gmail.
A figura 3 destaca o procedimento:
Figura 3 – Acessando a conta do Gmail.


22
Plataforma +IFMG
Caso não tenha uma conta Gmail, é possível criar:

1º - Inicie com o navegador de internet, preferencialmente com o Google Chrome, no
entanto, outro navegador também irá funcionar;
2º Na barra de endereço, digite “gmail.com” sem aspas, aperte “Enter” para
prosseguir;
3º - Clique em “criar conta” e selecione a opção “para mim”;
4º - Preencha o formulário com: nome, sobrenome, nome de usuário que deseja criar,
senha (pessoal e intransferível), confirme a mesma senha informada;
5º - Clique em “próximo” para prosseguir e finalizar o cadastro, depois disso o Google
irá pedir para entrar no Gmail e confirmar as políticas de segurança;
6º - Pronto! Sua nova conta Gmail estará criada!
Figura 4 – Criando conta do Gmail.

Conforme destacado, o Gmail é a principal ferramenta para acessar outros recursos

digitais, o usuário precisa estar conectado via Gmail para acessar essas ferramentas, por
isso é imprescindível obter uma conta google, ou acessar uma conta para aquele usuário
que já possui.
Diante dessa premissa, o Google Workspace possui vários aplicativos gratuitos, no
entanto, vamos explorar aqueles que irão dar suporte para criação do website, como por

23
Plataforma +IFMG
exemplo o Google Drive, que é a ferramenta de armazenamento em nuvem da Google. Com

o Google Drive é possível armazenar até 15GB de arquivos de forma gratuita.
Ao longo dos anos, utilizamos várias formas para salvar arquivos e informações,
todavia, essas formas mudaram. Alguém se lembra dos disquetes? Os CDs graváveis foram
usados por um bom tempo e muitos de nós usaram pendrives em algum momento das
nossas vidas.
As coisas continuam a mudar e hoje mais pessoas estão utilizando o armazenamento
em nuvem para salvar suas informações. O armazenamento em nuvem é basicamente um
computador conectado à Internet no qual podemos salvar nossas informações “fazendo
upload” do que queremos salvar. Obviamente, o armazenamento em nuvem não fica
literalmente nas nuvens, mas assim como o céu e as nuvens acima de nós, os arquivos e
as informações que salvamos estão sempre disponíveis.
Quando você usa as ferramentas de armazenamento na nuvem, como o Google
Drive, todos os documentos, imagens e vídeos que você envia por upload ficam
automaticamente acessíveis por meio de qualquer computador, tablet ou dispositivo móvel.
Esse acesso a qualquer hora e em qualquer lugar proporciona para você a possibilidade de
compartilhar pastas e documentos, diminui sua necessidade de imprimir conteúdo e, como
bônus extra, diminui a preocupação porque seus documentos não serão perdidos. Afinal de
contas, os servidores do armazenamento na nuvem que hospedam as informações têm
sistemas de backup e medidas de segurança em vigor para manter nossos dados seguros
e disponíveis.
Dica do Professor: Anteriormente na semana 1,

falamos no final do conteúdo sobre web server, ou
servidor web. O Google Drive pode ser utilizado como
servidor web, pois, é um drive que condiciona várias
ferramentas, é gratuito e poderá ser utilizado para
hospedar um website Google.
O Google Drive é um lugar seguro onde é possível armazenar documentos,

apresentações de slides, planilhas, fotos, vídeos e muito mais. Ele é um pendrive virtual que
você pode acessar no mundo todo por meio de um dispositivo conectado. Foi-se o tempo
em que você esquecia ou perdia documentos. Com o armazenamento na nuvem, você
acessa tudo que precisa clicando em apenas um botão.
Atenção: Você pode adicionar conteúdo ao Google

Drive arrastando e soltando arquivos do seu computador
diretamente no Google Drive.

24
Plataforma +IFMG
Qualquer tipo de arquivo pode ser armazenado, e uma grande quantidade pode ser
vista e editada, incluindo arquivos do Microsoft Word, Microsoft PowerPoint, Microsoft Excel,
além de PDFs, filmes e fotos, entre outros. Depois de criar ou fazer upload de conteúdos no
Google Drive, você pode organizá-los em pastas codificadas por cores e compartilhá-las
com outras pessoas.
Por fim, é importante destacar que você pode compartilhar qualquer documento no
Google Drive com outra pessoa ou com um grupo de pessoas clicando no botão
“Compartilhar” no canto superior direito da tela (quando o documento estiver aberto).
Também é possível compartilhar o documento diretamente do Google Drive clicando no título
do documento com o botão direito e selecionando “Compartilhar”. Qualquer pessoa com a
qual você deseja compartilhar o documento se tornará um “colaborador”.
Toda introdução a ferramentas do Google Workspace irá servir de base para novas
ações na construção do website utilizando ferramentas google, por isso, não deixe de
explorar todas as opções.
Atividade: Para concluir a segunda semana de estudos,

vá até a sala virtual e participe do Fórum “Ferramentas
do Google Workspace”. Leia o estudo de caso e
responda de acordo com a sua experiência.
Mais uma vez, reforçamos que faça uma pequena pausa para a reflexão do conteúdo
estudado. Faça a leitura (ou releitura) de tudo que lhe foi sugerido, analise todas essas
informações com base na sua experiência profissional.
Revise tópicos desta semana, interaja no fórum, leia os comentários dos colegas e
troque novas experiências! Esse intervalo é importante para amadurecer as novas
concepções que esta etapa lhe apresentou!

Bons estudos!

25
Plataforma +IFMG

26
Semana 3 – Escopo e planejamento para criação de site Plataforma +IFMG
Objetivos
Nesta terceira semana, vamos aprender como realizar escopo
e planejamento para criação de site.

3.1 Escopo inicial do site
Assim como qualquer projeto, o ponto inicial a ser pensado é o escopo. O espoco
pode ser compreendido como as informações iniciais de um projeto, isto é, as características
que aquele projeto terá. Se pensarmos no projeto da construção de uma casa, logo, iremos
imaginar o tamanho do terreno, a localização, a quantidade de cômodos que a casa terá, a
quantidade de pessoas que irá ser acomodada, dentre outras informações.
O escopo do site é basicamente as informações iniciais que o site terá como: tema
do site, objetivo, justificativa, público-alvo, tipo de site (informativo, comercial, educacional,
filantrópico, entre outros), além de outras informações necessárias para que o
desenvolvedor possa executar o futuro planejamento.
Dentre as diversas formas de criar um escopo, podemos pensar em duas formas
iniciais: lista e tabela. A forma de lista, conforme já é sugestivo, ocorre a partir da listagem
das características que o site terá, sendo capaz de listar cada ação, característica e atributos
que o site terá. Já o escopo por tabela consiste em tabular as informações, a fim de organizar
as seções do site, suas características e finalidades.
Para realizar a exemplificação de um escopo, adotaremos a criação de um site
informativo sobre preservação da natureza. Você pode visitar sites que já possuem essa
temática para se inspirar, mas, o site deve conter um objetivo único, isto é, possuir as
características necessárias para identificar a necessidade da criação daquele site.
Pensando assim, quais seriam as características necessárias do site? Quais
informações o site irá apresentar para os usuários? Será um site dinâmico que terá
possibilidade de realizar downloads de arquivos? Terá mídias digitais como imagens, vídeos
e áudios? Qual é o público que o site deseja atingir?
O escopo ocorre a partir das respostas de indagações iniciais, a partir do momento
que temos as respostas necessárias para as perguntas realizadas, então, podemos dar
início na construção do escopo, seja por lista ou por tabela. Além disso, outros atributos
podem ser evidenciados como: objetivo do site, justificativa, temática etc.

27
Plataforma +IFMG
SITE: PRESERVAÇÃO DA NATUREZA
 Tipo: Site informativo.

 Características do site: Site gratuito com informativos na página inicial e menus
que possam levar usuário a explorar mais conteúdo.
 Informações contidas no site: Preservação da natureza, ecologia, incentivo a
coleta seletiva, arborização, ações sustentáveis, diminuição da poluição e
preservação da camada de ozônio.
 Possibilidades do site: Download de arquivos de produção autoral,
compartilhamento de legislação pública e arquivos públicos que ajudam a reforçar
a preservação da natureza.
 Mídias: Vídeos autorais e explicativos sobre a preservação da natureza e ações
sustentáveis.
 Público-alvo: Toda comunidade que se interessar pelo tema.
 Objetivos: Contribuir com informações que possam auxiliar qualquer pessoa que
se interessar pelo tema; Preservar a natureza a partir da conscientização pelo meio
ambiente; Reflexões sobre a vida sustentável e natural.
 Justificativa: O site se justifica pela ação social que deseja ser divulgada, além da
necessidade de levar informação de forma gratuita para quaisquer pessoas que se
interessem pelo tema, contribuindo com a divulgação científica e preservação do
meio ambiente.
Exemplo de escopo do site do tipo lista.

Fonte: Produção dos autores.
As informações iniciais evidenciadas no exemplo, demonstra o início de argumentos

para compreensão do site, seus atributos e características, convergindo com a ideia de que:
Independente do tamanho ou do objetivo do que se pretende publicar ou desenvolver

para web, faz-se necessário, inicialmente, desenvolver a ideia e a motivação em
torno do que se quer apresentar. Não é necessário se apegar a ferramentas ou a
tecnologias para criar um esboço. O mais importante é organizar objetivos e criar
estratégias para alcançá-los. Uma forma interessante de alcançar tais estratégias é
se questionar acerca do que se pretende fazer (BONIATI; SILVA, 2013, p. 31).
Não obstante, o mesmo escopo pode ser produzido no modelo - escopo tabela, onde
as informações são tabuladas para melhor visualização:

28
Plataforma +IFMG
SITE: PRESERVAÇÃO DA NATUREZA

Tipo Site informativo.
Características do site Site gratuito com informativos na página inicial e

menus que possam levar usuário a explorar mais
conteúdo.
Informações contidas no site: Preservação da natureza, ecologia, incentivo a

coleta seletiva, arborização, ações sustentáveis,
diminuição da poluição e preservação da camada
de ozônio.
Possibilidades do site Download de arquivos de produção autoral,

compartilhamento de legislação pública e
arquivos públicos que ajudam a reforçar a
preservação da natureza.
Mídias Vídeos autorais e explicativos sobre a

preservação da natureza e ações sustentáveis.
Público-alvo Toda comunidade que se interessar pelo tema.
Objetivos Contribuir com informações que possam auxiliar

qualquer pessoa que se interessar pelo tema;
Preservar a natureza a partir da conscientização
pelo meio ambiente; Reflexões sobre a vida
sustentável e natural;
Justificativa O site se justifica pela ação social que deseja ser

divulgada, além da necessidade de levar
informação de forma gratuita para quaisquer
pessoas que se interessem pelo tema,
contribuindo com a divulgação científica e
preservação do meio ambiente.
Exemplo de escopo do site do tipo tabela.
Fonte: Produção dos autores.
É visto que o escopo, independentemente do tipo, são informações iniciais

importantes que irão qualificar e denominar o site, além de apresentar características
norteadoras.

29
Plataforma +IFMG
Dica do Professor: Para facilitar a criatividade, visite

algum site que você goste, se inspire e anote
características que você deseja que o seu site tenha.
Depois disso, você pode aplicar as informações criando
um escopo do tipo lista ou tabela.
Atenção: Você pode utilizar outras formas de realizar o

escopo como: forma hierárquica, processos, ciclos, e até
mesmo utilizar imagens. Pratique sua criatividade!
Diante do contexto evidenciado, o escopo é uma ação fundamental para realizar o

planejamento, com informações consistentes e detalhadas, a fim de contribuir para a
construção do planejamento do site.
3.2 Planejamento para criação de site
A partir da criação do escopo, inicia-se a criação do planejamento. Alguns acabam

por confundir escopo com planejamento, no entanto, o planejamento é a organização
estrutural de um determinado objeto ou ação, partindo da profunda organização para a
execução de tarefas planejadas.
Para realizar o planejamento do site, é importante pensar no conteúdo que será
inserido e na sua estrutura física. Planejar a quantidade de páginas e a sequência que o site
irá comportar é importante para que haja coesão na construção do mesmo.
Na estrutura contemporânea é comum observar que os sites têm abordado diferentes
assuntos dentro de um único tema, utilizando vários tópicos de forma individual, nesse
sentido, aconselha-se a inserção da organização em árvore, que segundo Boniati e Silva
(2013, p. 34):
A característica mais marcante é a utilização de uma página raiz (homepage),

contendo um índice ou menu com os temas de cada assunto abordado. A partir de
então, os temas são relacionados às suas respectivas páginas por meio de ligações
de hipertexto e cada página do site se relaciona com outras subpáginas.
A estrutura em árvore possui pontos positivos, mas cabe ao desenvolvedor verificar

se essa estrutura atenderá ao propósito do website que será construído. Outro tipo de
estrutura muito utilizado é a sequencial, onde as páginas são pensadas de forma

30
Plataforma +IFMG
sequenciada e não possui ligações indiretas como na estrutura em árvore. A figura 5 destaca
os dois tipos de estrutura:
Figura 5 – Planejamento organizacional em árvore e em série.

Além das estruturas evidenciadas, observa-se propriedades que qualificam o site,

como a usabilidade, navegabilidade e legibilidade. A usabilidade é uma ação de qualidade
do site que facilita a utilização daquele objeto. A navegabilidade remete a forma de
navegação, permitindo percorrer o site de forma simples e objetiva. A legibilidade é a
qualidade que facilita a compreensão e leitura do objeto apresentado ao usuário.
Atenção: Você sabia que além dos três princípios que

qualificam o site, também há o princípio da
acessibilidade que permite às pessoas com deficiência
acessarem o site de forma inclusiva e acessível? Utilize
elementos intuitivos que possam auxiliar na
acessibilidade do site!
Partindo para finalização do planejamento, é importante conhecer a anatomia do

objeto, ou seja, o modelo visual que os elementos irão compor o site. Diante dos elementos
necessários que o site poderá ter, destaca-se:
1) Logotipo - é a marca do site, geralmente ocupa um espaço em evidência para que
o usuário saiba qual a empresa ou marca daquele segmento;
2) Área de busca - é o tipo de local que o usuário digita um termo e o site busca a
palavra-chave digitada, função comum e prática, utilizada nos sites contemporâneos;
3) Menu de navegação - é um menu que pode ser suspenso (horizontal) ou na lateral
(vertical), é um dos principais atributos do site que auxilia o usuário a encontrar o
conteúdo desejado;

31
Plataforma +IFMG
4) Área em destaque - alguns sites utilizam banner rotativo para destacar no topo ou
no centro do site algum tipo de conteúdo ou até mesmo anúncios. Importante ter
cuidado com excesso de informações para que não haja “poluição visual”;
5) Rodapé - basicamente é a parte inferior do site, neste local fica as informações
sintetizadas como contato, endereço, licença do site, dentre outras informações.
A figura 6 destaca a estrutura anatômica do site, conforme os elementos elencados:
Figura 6 – Planejamento: anatomia do website.

Tanto o escopo como o planejamento são fases importantes para a criação do site,
compreender como um site funciona, a linguagem de programação e as ferramentas que
podem ser utilizadas são de suma importância, no entanto, apenas ter esse conhecimento
sem ao menos planejar como será produzido o site, pode ser um ponto importante, caso
essa fase seja deixada de lado, o próprio site pode nem chegar a ser construído, por isso a
necessidade de planejar.

32
Plataforma +IFMG
Atividade: Para concluir a terceira semana de estudos,

vá até a sala virtual e participe do Fórum “Escopo e
planejamento do site”. Imagine que você irá construir um
site pessoal, dessa forma, qual seria a temática? Quais
elementos não poderiam faltar no seu site? Participe do
fórum e compartilhe com seus colegas.
Mais uma vez, reforçamos que faça uma pequena pausa para a reflexão do conteúdo
estudado. Faça a leitura (ou releitura) de tudo que lhe foi sugerido, analise todas essas
informações com base na sua experiência profissional.
Revise tópicos desta semana, interaja no fórum, leia os comentários dos colegas e
troque novas experiências! Esse intervalo é importante para amadurecer as novas
concepções que esta etapa lhe apresentou!

Bons estudos!

33
Plataforma +IFMG

34
Semana 4 – Criação de site utilizando ferramentas Google
Plataforma +IFMG
Objetivos
Nesta semana, será estudado a criação de site utilizando
ferramentas Google.

4.1 Criando possibilidades com o Google Sites
A tecnologia é uma ferramenta poderosa que pode não apenas ajudar os alunos a
aprender, mas também dar a eles propósito, público, autonomia e voz. Os alunos podem
inspirar mudanças significativas e começar a impactar sua sala de aula, escola, comunidade
local e, potencialmente, o mundo mais amplo. Nada poderia ser mais motivador ou melhor
no desenvolvimento de um aprendizado mais profundo.
Facilitar discussões significativas entre os alunos dentro e fora da sala de aula é uma
ótima maneira de envolvê-los, apoiar a colaboração e construir uma comunidade. Participar
de uma discussão online abrirá portas para alunos que normalmente não se manifestariam
em sala de aula. A discussão dos alunos também desenvolve importantes habilidades de
comunicação, tanto escrita quanto verbal, além de fornecer feedback uns aos outros e ao
professor.
Hoje, professores e alunos podem escolher entre vários formatos de discussão: chat,
chat por vídeo, áudio, fóruns de discussão e muito mais. Com ferramentas poderosas como
Google Classroom, Google Groups, Google Chat e Google Meet, os professores têm
flexibilidade para criar e facilitar discussões de maneiras divertidas e envolventes. A
discussão pode alcançar até mesmo todo o mundo!
E por que não criar um website utilizando todas essas ferramentas que estão
disponíveis e gratuitas?
Encontrar o formato certo é a melhor ferramenta pode ser um desafio para os
professores. O primeiro passo é definir os objetivos de aprendizagem. O que você deseja
que os alunos aprendam ou descubram por meio da produção? Os objetivos de
aprendizagem devem sempre orientar a atividade de discussão.
As ideias produtivas do aluno pode ser uma atividade de discussão única, pode ser
uma série de eventos ou pode se desdobrar ao longo do tempo durante o ano letivo. Decida

35
Plataforma +IFMG
com que frequência os participantes irão praticar a criatividade e quanto tempo essa
criatividade deve durar para atingir seus objetivos de aprendizagem.
A última etapa deste processo é escolher a ferramenta digital que melhor se adapta
às suas necessidades. Até o momento nos preparamos para compreender como criar um
website, mas qual ferramenta utilizar para dar início a essa produção?
O Google Sites é uma opção flexível para publicar os trabalhos dos alunos, pois você
pode incorporar uma variedade de ferramentas do Google, incluindo vídeos, mapas,
documentos e calendários. Em comparação com outras ferramentas do Google, a criação
de um site pode ser um projeto mais complexo para se construir, gerenciar e usar. O
potencial de aprendizado e alcance expansivo vale bem o tempo investido.
Por isso, é importante que nesse momento todo planejamento já tenha ocorrido,
desde a elaboração da temática, até o planejamento de como será o site. Possuir uma conta
Google pelo Gmail é imprescindível pois, os aplicativos para um site são vastos, podendo
integrar várias ferramentas do Google Workspace.
4.2 Criação de site com ferramentas do Google Workspace
A criação de websites utilizando ferramentas do Google Workspace é bastante

interativa. Para iniciar a criação de um site é necessário que o usuário esteja logado em uma
conta google, ou seja, realizar o acesso a partir de uma conta Gmail. Nesta etapa é possível
acessar os Aplicativos Google e buscar pelo Google Drive, essa é uma das formas mais
simples de iniciar a criação de um site, pois, o Google Drive irá armazenar o site na nuvem,
hospedando-o através do próprio serviço de armazenamento.
Após acessar o Google Drive, clique no botão “novo” - busque pela opção
“mais”. Em seguida, busque pela opção “Google Sites” para iniciar a criação do seu primeiro
site. A figura 7 destaca as duas etapas:
Figura 7 – Acesso ao Google Site.


36
Plataforma +IFMG
Após o carregamento das configurações iniciais, o site será criado com layout padrão.
Nesse sentido, é importante identificar algumas configurações. A figura 8 destaca o layout
padrão do site, enumerado com as configurações a serem realizadas:
Figura 8 – Layout do Google Site

Conforme numeração da figura 8, compreende-se as seguintes configurações:

1) Nomear o título do site: O Google Site cria um nome padrão “Site sem título” por isso
é importante renomear o título que o site terá;
2) Nomear o site: Diferente de inserir um título do documento do seu site, agora você irá
nomear o site. Utilize um nome que irá representar a temática do site pois, este nome
irá aparecer no cabeçalho e na barra de títulos da web.
3) Criação de títulos: As páginas do website possuem títulos que irão aparecer no topo
da página, com o mesmo do menu de navegação.
Após as configurações iniciais podemos iniciar a configuração do layout. O Google

Site oferece algumas possibilidades de layout pré-definido como: layout com uma imagem e
texto; layout com duas imagens e dois textos; layout com três imagens, dentre outros. Para
inserir um layout escolha um modelo para iniciar suas seções, conforme mostra a figura 9.
Figura 9 – Inserção de layouts no Google Site


37
Plataforma +IFMG
Outro ponto interessante que o Google Sites possui são os temas. É possível
selecionar temas pré-definidos, com formatos e cores pré-estabelecidas. Essas ações irão
criar uma aparência para seu site, além disso você pode inserir imagens que convergem
com a identidade visual e a temática do site.
Para alterar a imagem de plano de fundo do site, clique na imagem para realizar
a alteração. Em seguida, será apresentado duas opções para carregar uma imagem: I)
realizar upload de uma imagem diretamente do microcomputador, clicando em fazer upload.
II) selecionar uma imagem de plano de fundo a partir da galeria de imagens Google ou de
outro local da web, clicando em selecionar imagem.
Dica do Professor: Após alterar a imagem do plano de

fundo do site, caso você queira voltar a imagem de fundo
original, basta clicar em redefinir . Também é possível
mudar a aparência do site a partir do cabeçalho, para
que isso ocorra clique em tipo de cabeçalho e
escolha uma das opções como: capa, banner grande,
banner ou somente título.
Partindo da opção para alterar a aparência do site, trabalhando conceito de

cabeçalho, ressalta-se a importância de verificar qual tipo de cabeçalho ficará melhor no
layout do seu site, realizando destes com o tamanho da figura escolhida.
Assim como o cabeçalho é possível alterar o tema e o estilo da fonte do site. Dessa
forma, clique em “Temas” - selecione a opção de tema que deseja e escolha uma cor. Em
seguida, clique em Estilo da fonte, selecionando qual o estilo que deseja. A figura 10 destaca
as opções para alteração da aparência do site.
Figura 10 – Alteração do tema do site.


38
Plataforma +IFMG
4.3 Personalização do site
O Google Sites possui ferramentas integradas ao Google Workspace para auxiliar na

personalização e estilo. No entanto, é importante ressaltar que o site deve ter conteúdo de
qualidade, que atraia o público-alvo e interaja com o usuário, por isso, recomenda-se que os
conteúdos como: textos, mídias, figuras entre outros, estejam prontos para serem inseridos
no site.
Para adicionar conteúdo, selecione a página que deseja adicionar, clique em inserir e
escolha o conteúdo que será adicionado. A figura 11 destaca as opções de inserção de
conteúdo:
Figura 11 – Opções de inserção de conteúdo no site.


39
Plataforma +IFMG
O Google Sites oferece diversas opções para inserção de conteúdo, o Quadro 2

destaca cada as funções de cada opção:
Ícone Descrição
A função “caixa de texto” adiciona um título e texto no site.
A opção “incorporar” consegue adicionar conteúdo que está diretamente na web,

como vídeos e músicas.
A função “imagens” permite a inserção de fotos, designs e figuras no site.
O ícone “Drive” indica a possibilidade de inserir arquivos que estejam salvos no

Google Drive.
O botão “índice” proporciona a opção de inserir índices de texto.
A função “carrossel de imagens” permite criar banners rotativos para destacar

imagens que sejam relevantes ao site.
O ícone “botão” é útil para criação de botões interativos, possibilitando o hiperlink
a outras páginas do site ou páginas externas.
O “divisor” cria uma reta que divide um conteúdo do outro.
O ícone “YouTube” permite inserir vídeos do YouTube no site.
A “agenda” possibilita que seja inserido algum tipo de programação de data e

hora no site, utilizando o Google Agenda.
A opção “mapa” é útil para adicionar mapas e localizações no site, além de rotas
para eventos.
O ícone “documentos” possibilita adicionar documentos criadas pelo Google
Documentos.
O ícone “apresentações” possibilita adicionar slides criadas pelo Google
Apresentações.
O ícone “planilhas” possibilita adicionar planilhas eletrônicas criados pelo Google
Planilhas.
O ícone “formulários” possibilita adicionar formulário eletrônico criados pelo
Google Formulários, uma boa opção para criar provas e contatos.
O ícone “gráficos” possibilita adicionar gráficos digitais criados pelo Google
Planilhas.
Quadro 2 – Descrição dos ícones e funções para Google Site
Também há possibilidades de criar novas páginas web, a partir da opção “Páginas”.
Para realizar essa ação clique em “Páginas”  botão  “nova página” .

A figura 12 evidencia a opção de criação de páginas:

40
Plataforma +IFMG
Figura 12 – Opções de inserção de páginas no site

Ao inserir uma nova página é possível nomeá-la, pois assim, o site irá criar um menu
com o nome que foi dado. Para cada página criada é possível realizar a personalização com
fotos, vídeos, textos, layout, entre outros recursos já apresentados. Para tanto, também
temos a possibilidade de criar subpáginas.
Dica do Professor: Para criar uma subpágina, clique

nas opções ao lado da página que foi criada. Em
seguida, escolha a opção “adicionar subpáginas” para
criar uma subpágina a partir da página criada.
As opções de páginas oferecem configurações diversas como:

1) Definir como página inicial: essa opção configura a página criada para ser a principal
página do site, ou seja, quando o usuário acessar o site visualizará a página
configurada como principal.
2) Duplicar página: Essa função é útil quando precisamos duplicar uma página criada e
realizar pequenas configurações, além de poupar tempo, carrega todas as
configurações da página que está sendo duplicada.
3) Propriedades: as propriedades da página oferecem configuração para renomear a
página ou subpágina, além da opção de inserir link externo.
4) Ocultar da navegação: Quando uma página ou subpágina está pronta, mas, precisa
ser ocultada, pode-se utilizar essa opção.
5) Excluir: função para excluir uma página ou subpágina.

41
Plataforma +IFMG
4.4 Visualização e publicação do site
Após a criação do site e configuração das páginas, conteúdos e personalização dos

layouts, é hora de visualizar como o site será publicado na web. Para isso, o Google Site
possui a ferramenta de visualização.
Essa ferramenta consiste em mostrar o ambiente final, como seu site será exibido na
web antes de ser publicado. Para isso clique em “visualização” . O site ficará em tela
cheia para melhor visualização das configurações realizadas, assim como as páginas
criadas, menus, dentre outros elementos inseridos no site.
Atenção: É possível visualizar o site da forma em que

irá aparecer em diferentes dispositivos .
Escolha o tipo de visualização: telefone, tablet ou tela
grande.
Após realizar a visualização do site, recomenda-se fazer uma revisão de todos os

detalhes do site, escrita, correções ortográficas, conferências das páginas e personalização.
Após a revisão, podemos publicar o site.
Para publicar o site, clique no botão . Ao publicar o site pela primeira vez, é
necessário adicionar o nome do website para completar o endereço (URL). No entanto, o
Google Sites permite utilizar somente letras, números e traços para criar o nome do site. O
domínio do site por padrão será o mesmo, organizado pela Google, seguindo o modelo:
“https://sites.google.com/view/” e, completado com o nome do site no final.
Na opção “Quem pode ver meu site” recomenda-se deixar “Qualquer pessoa” para
que assim, toda comunidade possa visualizar e acessar o website. Por fim, clique em
“Publicar” para finalizar a publicação. Você poderá editar seu site depois que ele for
publicado. No entanto, é necessário publicar o site novamente para ver as alterações.
Atividade: Para concluir o curso e gerar o seu

certificado, vá até a sala virtual e responda ao
Questionário “Avaliação geral”.
Este teste é constituído por 10 perguntas de múltipla
escolha, que se baseiam nos conteúdos estudados
durante cada semana.

42
Plataforma +IFMG
A tecnologia foi sendo utilizada e aprimorada ao longo do tempo, compreendendo que

o site é uma ferramenta tecnológica que pode auxiliar professores, alunos e toda
comunidade que irá acessar, através da divulgação científica e disseminação do
conhecimento.
No entanto, é importante compreender a qualidade do site, essa qualidade está
relacionada com a capacidade que este aparato possui na forma de atender os requisitos
necessários que o usuário deseja, ou seja, se o site atende de fato as demandas as quais
ele foi criado e, atende os requisitos que o usuário possui, logo, o site atingiu sua proposta.
Portanto a qualidade ocorre a partir do processo de desenvolvimento, dependendo
desse processo voltado para a produção do site e a construção integral com as
características que atendam os objetivos dos usuários.
Assim, esperamos que este curso tenha colaborado com a sua formação, e que essa
experiência lhe motive a buscar mais capacitação e novas formas de contribuir com a
Educação! Aproveite também e conheça mais oportunidades na plataforma +IFMG.

43
Plataforma +IFMG

44
Plataforma +IFMG
Referências
EXAME NACIONAL DO ENSINO MÉDIO – ENEM. In: MARCUSCHI, L. A, 2011.

Disponível em:
https://download.inep.gov.br/educacao_basica/enem/provas/2011/05_AMARELO_GAB.p.
Acesso em: 05 dez. 2021.
BONIATI, Bruno Batista; SILVA, Teresinha Letícia da. Fundamentos de desenvolvimento
web. Universidade Federal de Santa Maria - Colégio Agrícola de Frederico Westphalen,
2013. Disponível em: http://www2.ouropreto.ifmg.edu.br/dw/apostilas/apostila-
fundamentos-de-desenvolvimento-web-1. Acesso em: 08 dez. 2021.
NIEDERST, Jennifer. Aprenda web design. Editora Ciência Moderna, 2002.

45
Plataforma +IFMG

46
Plataforma +IFMG
Currículo dos autores
Ricael Spirandeli Rocha: Possui graduação em Licenciatura em Computação pelo

Instituto Federal do Triângulo Mineiro (IFTM), graduação em Engenharia Elétrica pela
Universidade de Uberaba (UNIUBE), Especialização em Produção de Materiais
Didáticos Utilizando o Linux Educacional pela Universidade Federal de Lavras
(UFLA), Especialização em Gestão da Tecnologia de Informação pela Faculdade
Venda Nova do Imigrante (FAVENI) e Especialização em Educação Profissional e
Tecnológica Inclusiva pelo Instituto Federal do Triângulo Mineiro (IFTM). Mestrando
em Educação Tecnológica pelo Programa de Pós-Graduação em Educação
Tecnológica do Instituto Federal de Educação, Ciência e Tecnologia do Triângulo
Mineiro (PPGET-IFTM). Atualmente é professor de Educação Básica de cursos técnicos pela Secretaria
Estadual de Minas Gerais (SEE/MG). Exerce a função de Prof. Orientador na Pós-graduação em Docência
pelo Instituto Federal de Minas Gerais (IFMG) - campus Arcos. Participa do grupo de pesquisa "GPETEC
- Grupo de Pesquisa em Educação, Tecnologia e Ciências" na linha de pesquisa "Desenvolvimento de
Aplicativos Tecnológicos e Softwares Educacionais" do IFTM Campus Uberlândia-Centro. É líder no Grupo
de Educadores Google da cidade de Uberaba.
Currículo Lattes: http://lattes.cnpq.br/1404009779475100
Cláudia Maria Soares Rossi: Pedagoga, com Mestrado em educação, pela

Universidade Federal de Lavras. Especialização em Psicopedagogia, Metodologia e
Didática do Ensino, Inspeção Escolar. Atuou como professora, supervisora escolar e
diretora nas redes municipal, estadual e privada. Foi professora e coordenadora
pedagógica do Curso Normal Superior da UNIPAC na cidade de Arcos. É Técnica em
Assuntos Educacionais Instituto Federal de Minas Gerais – Campus Arcos,
professora e tutora em EaD no IFMG e UFLA. No IFMG Arcos ocupa o cargo de
Coordenadora da Pós-graduação em Docência (EaD). Tem experiência também na
docência superior em diferentes licenciaturas, na coordenação de projetos
extensionistas e em pesquisas envolvendo Educação Inclusiva e Educação
Patrimonial.
Currículo Lattes: http://lattes.cnpq.br/1404009779475100
Feito por (professor-autor) Data Revisão de layout Data Versão
Ricael Spirandeli Rocha e

12/12/2021 Viviane Lima Martins 13/12/2021 1.0

47
Plataforma +IFMG

48
Plataforma +IFMG
Glossário de códigos QR (Quick Response)
Mídia digital Mídia digital

Apresentação do Apresentação da
curso Semana 2
Mídia digital Mídia digital

Apresentação da Apresentação da
semana 3 Semana 4

49
Plataforma +IFMG

50
Plataforma +IFMG
Plataforma +IFMG
Formação Inicial e Continuada EaD
A Pró-Reitoria de Extensão (Proex), desde o ano de

2020, concentrou seus esforços na criação do Programa
+IFMG. Esta iniciativa consiste em uma plataforma de cursos
online, cujo objetivo, além de multiplicar o conhecimento
institucional em Educação à Distância (EaD), é aumentar a
abrangência social do IFMG, incentivando a qualificação
profissional. Assim, o programa contribui para o IFMG cumprir
seu papel na oferta de uma educação pública, de qualidade e
cada vez mais acessível.
Para essa realização, a Proex constituiu uma equipe
multidisciplinar, contando com especialistas em educação,
web design, design instrucional, programação, revisão de
texto, locução, produção e edição de vídeos e muito mais.
Além disso, contamos com o apoio sinérgico de diversos
setores institucionais e também com a imprescindível
contribuição de muitos servidores (professores e técnico-
administrativos) que trabalharam como autores dos materiais
didáticos, compartilhando conhecimento em suas áreas de
atuação.
A fim de assegurar a mais alta qualidade na produção destes cursos, a Proex adquiriu
estúdios de EaD, equipados com câmeras de vídeo, microfones, sistemas de iluminação e
isolação acústica, para todos os 18 campi do IFMG.
Somando à nossa plataforma de cursos online, o Programa +IFMG disponibilizará
também, para toda a comunidade, uma Rádio Web Educativa, um aplicativo móvel para
Android e IOS, um canal no Youtube com a finalidade de promover a divulgação cultural e
científica e cursos preparatórios para nosso processo seletivo, bem como para o Enem,
considerando os saberes contemplados por todos os nossos cursos.
Parafraseando Freire, acreditamos que a educação muda as pessoas e estas, por
sua vez, transformam o mundo. Foi assim que o +IFMG foi criado.
O +IFMG significa um IFMG cada vez mais perto de você!
Professor Carlos Bernardes Rosa Jr.

Pró-Reitor de Extensão do IFMG

51
Plataforma +IFMG

52
Plataforma +IFMG
Plataforma +IFMG
Plataforma +IFMG
Características deste livro:

Formato: A4
Tipologia: Arial e Capriola.
E-book:
1ª. Edição
Formato digital
Plataforma +IFMG

(Ebook +IFMG) - Criação de sistes utilizando ferramentas google

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

(Ebook +IFMG) - Criação de sistes utilizando ferramentas google

Enviado por

Direitos autorais:

Formatos disponíveis

CRIAÇÃO DE SITE UTILIZANDO

Ricael Spirandeli Rocha

Cláudia Maria Soares Rossi

Criação de Site Utilizando Ferramentas Google

Pró-reitor de Extensão Carlos Bernardes Rosa Júnior

R672c Rocha, Ricael Spirandeli.

E-book, no formato PDF.

1. Programação Web. 2. Google Workspace. 3. Website. I. Cláudia

Índice para catálogo sistemático:

Este curso é autoexplicativo e não possui tutoria. O material didático,

Para saber mais sobre a Plataforma +IFMG acesse

Bons estudos, dedicação e sucesso!

Nesta primeira semana, será apresentado noções sobre

Nesta semana, vamos conhecer as ferramentas do Google

Nesta terceira semana, vamos aprender como realizar

Nesta semana, será estudado a criação de site utilizando

Carga horária: 40 horas.

Atenção: indica pontos de maior importância

Dica do professor: novas informações ou

Atividade: sugestão de tarefas e atividades

Mídia digital: sugestão de recursos

Semana 1 – Noções sobre programação web ............................................... 15

Mídia digital: Antes de iniciar os estudos, vá até a sala

1.1. Conceitos iniciais sobre web

Instituto Federal de Minas Gerais

Figura 1 – Característica de uma URL.

O endereço que a URL carrega pode ser compreendido em partes:

Instituto Federal de Minas Gerais

1.2. Conceitos de hipertexto e hiperlink

A programação web é basicamente um conjunto de códigos que permitem a

Atenção: Faça uma parada e lei o texto a seguir que foi

Fonte: ENEM (2011) In: MARCUSCHI, L. A. Disponível em:

Instituto Federal de Minas Gerais

Partindo da compreensão sobre hipertexto, podemos avançar para o conceito de

Dica do Professor: Existem vários tipos de browser,

1.3. Linguagem de programação para web

Instituto Federal de Minas Gerais

Dica do Professor: Existem vários softwares que

Em HTML trabalhamos com marcações denominadas “tags” ou etiquetas, essas tags

Nome da tag Descrição

A tag <head> significa “cabeça” ou cabeçalho, essa seção inicia no topo do

Assim como a tag <head>, a tag <body> é o corpo da página, definindo o

A tag <p> significa parágrafo, sendo utilizada quando há necessidade de

Quadro 1 – Tags e descrição do HTML

Instituto Federal de Minas Gerais

Atividade: Para concluir a primeira semana de estudos,

Nos encontramos na próxima semana.

Instituto Federal de Minas Gerais

Mídia digital: Antes de iniciar os estudos, vá até a sala

2.1 Ferramentas colaborativas

O Google Workspace é um conjunto de ferramentas que reúne em um serviço,

Figura 2 – Ferramentas do Google Workspace.

Instituto Federal de Minas Gerais

2.2 Ferramentas colaborativas para website

O Google Workspace possui várias ferramentas colaborativas gratuitas, no entanto,

Figura 3 – Acessando a conta do Gmail.

Instituto Federal de Minas Gerais

Caso não tenha uma conta Gmail, é possível criar:

Figura 4 – Criando conta do Gmail.

Conforme destacado, o Gmail é a principal ferramenta para acessar outros recursos

Instituto Federal de Minas Gerais

exemplo o Google Drive, que é a ferramenta de armazenamento em nuvem da Google. Com

Dica do Professor: Anteriormente na semana 1,

O Google Drive é um lugar seguro onde é possível armazenar documentos,