ANÁLISE E PROJETOS DE SISTEMAS PARA INTERNET

Prévia do material em texto

ANÁLISE E PROJETOS DE 
SISTEMAS PARA INTERNET
PROF. ROLD CHEIDA PEREIRA JÚNIOR
Reitor: 
Prof. Me. Ricardo Benedito de 
Oliveira
Pró-Reitoria Acadêmica
Maria Albertina Ferreira do 
Nascimento
Diretoria EAD:
Prof.a Dra. Gisele Caroline
Novakowski
PRODUÇÃO DE MATERIAIS
Diagramação:
Alan Michel Bariani
Thiago Bruno Peraro
Revisão Textual:
Fernando Sachetti Bomfim
Marta Yumi Ando
Simone Barbosa
Produção Audiovisual:
Adriano Vieira Marques
Márcio Alexandre Júnior Lara
Osmar da Conceição Calisto
Gestão de Produção: 
Cristiane Alves
© Direitos reservados à UNINGÁ - Reprodução Proibida. - Rodovia PR 317 (Av. Morangueira), n° 6114
 Prezado (a) Acadêmico (a), bem-vindo 
(a) à UNINGÁ – Centro Universitário Ingá.
 Primeiramente, deixo uma frase de 
Sócrates para reflexão: “a vida sem desafios 
não vale a pena ser vivida.”
 Cada um de nós tem uma grande 
responsabilidade sobre as escolhas que 
fazemos, e essas nos guiarão por toda a vida 
acadêmica e profissional, refletindo diretamente 
em nossa vida pessoal e em nossas relações 
com a sociedade. Hoje em dia, essa sociedade 
é exigente e busca por tecnologia, informação 
e conhecimento advindos de profissionais que 
possuam novas habilidades para liderança e 
sobrevivência no mercado de trabalho.
 De fato, a tecnologia e a comunicação 
têm nos aproximado cada vez mais de pessoas, 
diminuindo distâncias, rompendo fronteiras e 
nos proporcionando momentos inesquecíveis. 
Assim, a UNINGÁ se dispõe, através do Ensino a 
Distância, a proporcionar um ensino de qualidade, 
capaz de formar cidadãos integrantes de uma 
sociedade justa, preparados para o mercado de 
trabalho, como planejadores e líderes atuantes.
 Que esta nova caminhada lhes traga 
muita experiência, conhecimento e sucesso. 
Prof. Me. Ricardo Benedito de Oliveira
REITOR
33WWW.UNINGA.BR
U N I D A D E
01
SUMÁRIO DA UNIDADE
INTRODUÇÃO ................................................................................................................................................................5
1. FRONT-END: O “VIEW” DO SISTEMA MVC ............................................................................................................8
2. NAVEGADOR: ONDE TUDO ACONTECE ..................................................................................................................9
3. O HTML .................................................................................................................................................................... 10
3.1 HTML – UM CONJUNTO DE TAGS......................................................................................................................... 12
3.2 HIPERLINKS .......................................................................................................................................................... 14
3.3 ESTRUTURA DE UMA PÁGINA HTML ................................................................................................................. 15
3.4 OUTRAS FUNÇÕES DA TAG .................................................................................................................................. 15
3.5 LIMITAÇÕES E INCOMPATIBILIDADE DE NAVEGADORES ............................................................................... 17
PROGRAMAÇÃO WEB – FRONT-END: 
CARACTERÍSTICAS, TÉCNICAS E TECNOLOGIAS
PROF. ROLD CHEIDA PEREIRA JÚNIOR
ENSINO A DISTÂNCIA
DISCIPLINA:
ANÁLISE E PROJETOS DE SISTEMAS 
PARA INTERNET
4WWW.UNINGA.BR
4. O CSS ........................................................................................................................................................................ 17
4.1 CSS INLINE, INTERNO E EXTERNO ..................................................................................................................... 19
4.2 BIBLIOTECAS CSS ................................................................................................................................................ 21
5. JAVASCRIPT ............................................................................................................................................................22
CONSIDERAÇÕES FINAIS ...........................................................................................................................................25
5WWW.UNINGA.BR
AN
ÁL
IS
E 
E 
PR
OJ
ET
OS
 D
E 
SI
ST
EM
AS
 P
AR
A 
IN
TE
RN
ET
 |
 U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
INTRODUÇÃO
Seja muito bem-vindo(a). Começaremos agora nossos estudos sobre a gestão de projetos 
WEB. Quem será você ao final disso?
A mesma maravilha que já é, porém, com a capacidade de gerenciar a concepção, o 
desenvolvimento, a implantação e a manutenção de um site ou um sistema para internet! (Não é 
legal?).
Esta é uma disciplina e não um curso. Isso significa que os assuntos discutidos aqui são 
partes importantes de outros assuntos que você já viu ou vai ver em outras disciplinas. E, então, 
por que eles estão aqui? 
Veja: para que consiga gerir um projeto, você tem de saber duas coisas: o mínimo do 
assunto relativo ao projeto e, também, claro, as técnicas de gestão.
Esses dois conhecimentos são aprofundados em outras disciplinas neste mesmo curso. A 
diferença, porém, é que, aqui, a visão desses dois assuntos é aquela que você precisará desenvolver 
para gerir esse tipo de projeto. Isso porque um gestor de projetos não precisa saber tecnicamente 
fazer um sistema. Porém, é muito importante que ele saiba avaliar o produto e saber o que e como 
pode ser feito.
Assim sendo, os conhecimentos técnicos apresentados aqui (nas três primeiras unidades) 
serão bastante relevantes para que você possa decidir os rumos do projeto.
Na Unidade 4, você terá contato com as fases da gestão de projetos adaptadas à 
programação e ao desenvolvimento WEB, juntando tudo isso num projeto “passo-a-passo”.
Gerir um projeto exige, entre tantos outros atributos, um domínio, ao menos dos 
fundamentos, do projeto em questão.
Na última unidade, também nos aprofundaremos no termo projeto. Porém, como 
falaremos desse termo em muitos momentos antes da unidade, vamos a uma rápida definição de 
projeto, que pode ser obtida na seguinte citação:
Basicamente, um projeto pode ser definido como um evento com um tempo 
de duração predefinido e temporário. Embora às vezes possa ser executado 
por apenas uma pessoa, normalmente são empregadas várias pessoas nesse 
tipo de empreendimento, com funções já estabelecidas, ou seja, cada pessoa é 
encarregada da execução de uma tarefa específica. O resultado após a execução 
de um projeto pode ser um produto novo ou um serviço (ALVES, 2015a, p. 39).
Então, um projeto pode ser visto como um conjunto de tarefas ordenadas que têm um 
objetivo claro (alguns chamam o produto de um projeto de entregável).
Veja que, num projeto de Sistema WEB, o entregável é exatamente o sistema, mas não é 
só isso: é por isso que a Unidade 4 é destinada a isso: juntar o “passo-a-passo” para que as fases 
do projeto possam ser cumpridas pela equipe técnica e gerenciadas por você!
Não será exigido do gestor de um projeto de sistema WEB que ele saiba programar, ou 
gerenciar um banco de dados, nem mesmo dominar todas as tecnologias envolvidas.
Porém, é muito importante que um gestor conheça o assunto de que trata o seu projeto 
para que consiga entender os assuntos dos personagens que ele gerencia.
6WWW.UNINGA.BR
AN
ÁL
IS
E 
E 
PR
OJ
ET
OS
 D
E 
SI
ST
EM
AS
 P
AR
A 
IN
TE
RN
ET
 |
 U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
Veja esta citação:
Uma das metas do gerenciamento de projetos é procurar limitar as possibilidades 
de adição de novos requisitos ao projeto, já que eles podem resultar em atrasos 
ou mesmo na necessidade de alocação de mais recursos. É preciso também 
equilibrar esses fatores conflitantes de modo que os trabalhos não sejam 
prejudicados em seu andamento (ALVES, 2015a, p. 41).
Esta será a sua principal preocupação durante o ciclo do projeto. Portanto, as Unidades1 
e 2 desta matéria tratarão dos princípios da programação WEB, seus elementos, divisões, algumas 
ferramentas e técnicas. Em específico, esta unidade trata do front-end.
Aproveitando, vamos definir o front-end como toda a parte programável, visual do site. 
Uma boa descrição, mais completa, pode ser obtida por meio da seguinte citação:
Também chamadas de tecnologias do lado cliente, as tecnologias front-end 
representam todo o código que é enviado de um servidor para um navegador 
pessoal. O navegador então interpreta esse código e o desenha na tela. A 
fundação de todos os sites web, HTML (e seu primo mais restrito XHTML) são 
as linguagens de programação básicas para criar os mecanismos de navegação e 
a estrutura de um site web. O W3C é o órgão de padronização responsável por 
manter essas linguagens. Para mais informações, consulte seu site web: www.
w3.org/MarkUp (KALBACH, 2009, p. 204).
O objetivo então das duas primeiras unidades é fazer com que você, futuro gestor de 
projetos WEB, entenda “o que é a programação WEB e como ela acontece”. No caso desta unidade, 
trataremos do universo do front-end.
Não será intenção desta matéria ensiná-lo a programar (posso estar sendo repetitivo – 
desculpe-me por isso), mas torná-lo apto a participar das discussões e resoluções técnicas durante 
os processos que envolvem o desenvolvimento WEB.
Nas sugestões de leitura, traremos links e referências para que você possa se aprofundar 
nos assuntos abordados. Eu encorajo você a fazer isso!
Durante a explicação de cada componente, você terá, além da explicação dos fundamentos 
de cada matéria, as informações que serão relevantes para um gestor de projeto e um analista de 
projetos WEB. 
O que não estiver aqui (como conceitos técnicos mais aprofundados das ferramentas 
de programação) são quesitos que extrapolam a função da gestão de projetos e, mesmo 
especificamente, a gestão de projetos WEB. Portanto, apesar de fortemente encorajá-lo a se 
aprofundar nesses assuntos, a ordem recomendada é, em primeiro lugar, entender os assuntos 
relacionados à gestão em si e, depois, os assuntos da programação.
Posso garantir a você que as chances de um programador gerir um projeto de programação 
melhor que um não programador é muito mais alta. Porém, entre um bom programador e um 
bom gestor de projetos, o segundo levará maior vantagem.
Se você entender como um software WEB funciona, quais são as suas limitações e 
características, terá o suficiente para participar das decisões que serão tomadas durante a sua 
construção e manutenção. Isso será suficiente.
Acompanhando este material, você terá as videoaulas, que não são “leituras da apostila”, e 
sim um bate-papo complementar sobre os assuntos descritos aqui. Por isso, é bastante importante 
que você veja os dois.
7WWW.UNINGA.BR
AN
ÁL
IS
E 
E 
PR
OJ
ET
OS
 D
E 
SI
ST
EM
AS
 P
AR
A 
IN
TE
RN
ET
 |
 U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
Então é isso! Vamos começar nossa viagem.
Espero que você compreenda bem o texto, as aulas e que consiga fazer as atividades. 
Porém, se tiver alguma dúvida, é só procurar o tutor da disciplina!
Um abraço!
8WWW.UNINGA.BR
AN
ÁL
IS
E 
E 
PR
OJ
ET
OS
 D
E 
SI
ST
EM
AS
 P
AR
A 
IN
TE
RN
ET
 |
 U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
1. FRONT-END: O “VIEW” DO SISTEMA MVC
Já vimos a definição de front-end na introdução deste módulo. Mas e esse tal de MVC?
Vejamos:
Sigla de Model-View-Controller (Modelo-Visão-Controlador), ele pode ser 
definido como um padrão de design de software, reconhecido mundialmente, 
que permite a separação da lógica e das regras de negócio da apresentação dos 
dados (ALVES, 2015b, p. 99).
Note que o autor utiliza o termo design. Porém, o MVC não se limita necessariamente 
(apenas) ao design. Seria melhor você ter em mente que o MVC é, além de um padrão de design, 
um conceito de programação. 
O autor, em seguida, defende o uso desse padrão, tendo em vista a alta complexidade, 
hoje em dia, da programação WEB:
Diferentemente do passado, hoje em dia o desenvolvimento de aplicações 
demanda um alto grau de complexidade, o que nos obriga a dividir as tarefas 
de acesso a dados e sua apresentação em camadas distintas, mas interligadas, de 
forma que possamos efetuar alterações no layout das telas da aplicação sem que 
haja interferência nas operações de manipulação do banco de dados. (ALVES, 
2015b, p. 99).
Observe que, na citação, se explica o papel de cada uma dessas partes, as quais, conforme 
formos estudando, definiremos de maneira mais profunda. Sendo assim, teremos uma unidade 
dedicada para cada uma dessas “camadas”.
Esta unidade tratará da camada View. Vamos à definição:
A camada View [...] deve conter tudo o que se refere à interface com o usuário. 
Em termos de desenvolvimento de aplicações web, isso significa que nessa 
camada estão os arquivos HTML das páginas, as folhas de estilos CSS, as rotinas 
em JavaScript etc. (ALVES, 2015b, p. 100).
Veja outra citação, de outros autores:
A camada da visão tem a responsabilidade de fazer a interação com o usuário 
da aplicação. É nessa camada que são apresentados os dados para o usuário, 
que podem ser exibidos ou entregues como páginas HTML, arquivos em XML, 
planilhas, documentos, imagens, vídeos, músicas etc. A view não executa uma 
ação, ela faz a requisição para que a model execute a ação e, depois, mostra os 
valores que retornaram da ação, para o usuário. É a camada responsável pela 
exibição dos dados (SARAIVA; BARRETO, 2018, p. 256).
Compreenda, então, que o que vemos acontecer no navegador é considerado o front-end. 
Este se comunica com outra parte do sistema (o back-end, o qual veremos na Unidade 2) e troca 
informações com ele.
9WWW.UNINGA.BR
AN
ÁL
IS
E 
E 
PR
OJ
ET
OS
 D
E 
SI
ST
EM
AS
 P
AR
A 
IN
TE
RN
ET
 |
 U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
Veremos, a partir dos próximos tópicos, todos esses itens citados pelos autores. 
Assim, ao final desta unidade, você terá entendido os aspectos técnicos que envolvem a 
construção do front-end. Isso será imprescindível para que você, ao final da disciplina, esteja apto 
a decidir o que será feito e como serão feitas as etapas de concepção e construção dessa parte 
visual do seu sistema.
Comecemos então pelo navegador.
2. NAVEGADOR: ONDE TUDO ACONTECE
Sim, é isto. Se você está acostumado com o assunto, pode parecer óbvio. Porém, esse 
tópico pretende ressaltar a importância, nas fases de planejamento e análise, de conferir se os 
técnicos dessas áreas estão levando essas limitações e condições em consideração na hora de 
combinar recursos com os clientes, como também na hora de orçar recursos.
Para que fiquem mais claras essas limitações (ou, se você for mais puro de coração..., 
“características”), é importante termos em mente que o front-end de um sistema WEB existe dentro 
do navegador e isso significa que todo o código fonte desse sistema deverá ser compreendido por 
ele.
Isso requer algumas informações técnicas e alguns cuidados também, para a boa execução 
de um projeto.
Um navegador traz, dentro de si, três capacidades principais:
• Interpretar uma linguagem HTML.
• Adicionar propriedades gráficas ao texto interpretado no HTML por meio de uma 
sequência de marcações chamadas CSS.
• Executar scripts na linguagem JAVASCRIPT.
Essas características, apesar de comuns a todos os navegadores, podem trazer uma 
diferença na sua implementação, o que significa que um site pode se comportar de forma diferente 
em dois navegadores distintos.
Uma das funções de um projeto WEB é a de garantir que essas limitações não existam ou, 
se isso não for possível, que sejam muito claras para o usuário do sistema.
Por ora, é bom ter isso em mente, para que, mais tarde, quando formos nos aprofundar 
no assunto, ele já lhe seja familiar.
Voltando aos componentes de um site (de um front-end) que são da responsabilidade do 
navegador, passaremos agora para cada um desses assuntos nos tópicos a seguir.
10WWW.UNINGA.BR
AN
ÁL
IS
E 
E 
PR
OJ
ETOS
 D
E 
SI
ST
EM
AS
 P
AR
A 
IN
TE
RN
ET
 |
 U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
3. O HTML
HTML vem de HyperText Markup Language – Linguagem de Marcação de Hipertexto. 
Isso, por si só, não quer dizer muita coisa.
Ou, como na citação abaixo:
HTML, do inglês hypertext markup language, ou linguagem de marcação de 
hipertexto, é uma linguagem utilizada para criar documentos para a web. Esses 
documentos, que também são chamados de páginas, podem conter marcações 
que permitem visualizar e acessar conteúdos web em geral (SARAIVA; 
BARRETO, 2018, p. 9).
Mas o importante é você entender o que isso faz. Basicamente, faz a formatação de textos 
e elementos, mas não só isso. É no HTML que estarão as rotinas que irão conduzir a comunicação 
dos dados entre o seu site e o back-end.
O HTML não é uma linguagem de programação, mas sim uma forma de diagramar 
textos. Isso pode causar alguma confusão, até que nos acostumemos com esse fato. No intuito de 
fixar essa particularidade do HTML, vamos à seguinte citação:
A HTML não é uma linguagem de programação propriamente dita. Ela é mais 
bem classificada como uma linguagem de formatação de textos ou de definição 
da estrutura de um documento. Não gera um programa executável autônomo, 
como ocorre com as linguagens de programação tradicionais C++, Java e Pascal. 
Em vez disso, tem-se somente um arquivo em formato de texto, geralmente 
com a extensão .HTM ou .HTML, que é lido e interpretado por um software 
denominado navegador. Ele é o responsável por apresentar no monitor de vídeo 
aquilo que foi codificado no documento HTML (ALVES, 2015b, p. 16).
Note, então, que o HTML tem essa função principal de diagramação. Eu vou incluir um 
item a mais para podermos fazer uma melhor divisão desse conceito.
É, sim, verdade que o HTML tem a função de diagramar um texto. Porém, também nele 
vamos adicionar trechos de código escritos em outra linguagem (aí, sim, uma linguagem de 
programação) que vão dar à página características de um software (como ações e reações ao 
usuário e o gerenciamento de informações).
O mesmo autor citado anteriormente também cita esta característica da linguagem:
Outro fator que distingue a HTML das outras linguagens é que ela não possui 
estruturas de controle e de repetição, assim como também não é possível, por 
meio dela, criar procedimentos e funções ou chamar rotinas internas do sistema 
operacional. Para obter esse tipo de recurso, é necessário recorrer a algumas 
extensões que a ela foram acrescentadas, como a linguagem JavaScript, por 
exemplo. Mas, mesmo nesses casos, há diversas limitações impostas como uma 
forma de segurança do sistema (ALVES, 2015b, p. 16).
Assim, podemos dar as duas funções principais do HTML: diagramar e servir de recipiente 
para um trecho de código de programação (que deverá ser escrita em outra linguagem).
11WWW.UNINGA.BR
AN
ÁL
IS
E 
E 
PR
OJ
ET
OS
 D
E 
SI
ST
EM
AS
 P
AR
A 
IN
TE
RN
ET
 |
 U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
Fora esses dois, temos um terceiro, aparentemente simples, mas que está na essência de 
um site: a navegação. E a navegação, dada através de hyperlinks, também é responsabilidade do 
HTML.
Então, resumindo, você pode considerar como funções do HTML:
• diagramação de texto;
• ligações entre documentos (através dos hyperlinks);
• recipiente onde adicionaremos trechos de código de programação para dar capacidade 
a uma página de interagir com o usuário e servir de interface para o gerenciamento de 
informações.
No decorrer dos tópicos desta unidade, traremos dos conceitos referentes a esses três itens. 
Antes, porém, de nos aprofundarmos no HTML, vamos definir um ambiente onde poderemos 
testar as nossas habilidades.
Você pode escrever um código HTML em um editor de texto e depois abrir em seu 
navegador. Sim, pode, mas é mais confortável, sobretudo na fase de aprendizado, utilizarmos um 
editor on-line, que já faz tudo isso de uma vez só.
Entre eles, está o Tryit: um editor de HTML on-line utilizado no site w3schools (site 
referência para aprendizagem de tecnologias WEB), que pode ser acessado pelo endereço: https://
www.w3schools.com/html/tryit.asp?filename=tryhtml_intro.
Ao acessar o link anterior, você será direcionado para uma página igual à mostrada na 
figura a seguir.
Figura 1 - Janela do editor Tryit. Fonte: O autor.
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
12WWW.UNINGA.BR
AN
ÁL
IS
E 
E 
PR
OJ
ET
OS
 D
E 
SI
ST
EM
AS
 P
AR
A 
IN
TE
RN
ET
 |
 U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
Note que um código HTML já está escrito à esquerda. O mesmo código está processado e 
mostrado à direita. Você pode apagar o código à sua esquerda, pois utilizaremos esse espaço para 
os nossos próprios códigos, que veremos a seguir. Ao terminar um código, bastará clicar sobre o 
botão “Run” e tudo acontecerá. Pois bem: tendo elegido nosso editor de códigos, vamos ao estudo 
do HTML em si.
3.1 HTML – Um Conjunto de Tags
Já definimos e explicamos os conceitos de um HTML. Mas recorreremos a uma citação 
que o apresenta, para entendermos o elemento principal de um HTML, a tag. Veja:
 
Uma página web exibe seu conteúdo texto diferente da forma como é escrito no 
código-fonte HTML. Essa diferença se dá porque seu conteúdo requer marcações 
específicas nos objetos para realizar a formatação, ou seja, é preciso que você 
insira tags para definir a forma como os textos são apresentados. (SARAIVA; 
BARRETO, 2018, p. 14).
Essas marcações, citadas pelo autor, são chamadas de tags. 
Vamos utilizar um código HTML tanto para exemplificar quanto para explicar. Veja:
1.1.1.1 <h1> Gestão de Projetos </h1>
1.1.1.2 <h2> Gestão de Projetos </h2>
1.1.1.3 <h3> Gestão de Projetos </h3>
Se você copiar esse trecho no Tryit (visto anteriormente) e clicar em “Run”, verá que a 
mesma frase será exibida em três tamanhos diferentes (lembrando que você pode copiar essas 
linhas em um arquivo texto e salvar o arquivo com a extensão htm ou html, e, em seguida, abri-lo 
no seu navegador de internet).
Por que o mesmo texto foi mostrado em tamanhos distintos?
Esse é (um dos) papéis da tag.
Quando falamos em tags, estamos nos referindo a esses comandos entre os sinais de “<” 
e “>” (como <h1>), que criam uma marcação antes e após o trecho de texto, informando ao 
interpretador de html – o navegador – como ele irá renderizar a frase. Note que as tags fazem 
com que o navegador renderize então cada frase de uma forma.
A renderização pode ser vista como o processamento de um comando, que gera 
um objeto gráfico qualquer (texto, vídeo, figura etc.).
13WWW.UNINGA.BR
AN
ÁL
IS
E 
E 
PR
OJ
ET
OS
 D
E 
SI
ST
EM
AS
 P
AR
A 
IN
TE
RN
ET
 |
 U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
Além de formatar, as tags ainda podem criar elementos gráficos desde uma tabela até um 
desenho (como a tag <circle>). 
Vamos exemplificar com algumas delas. Observe o trecho de código a seguir:
1.1.1.4 <h2> formulário </h2>
1.1.1.5 <label>Data de Nascimento:</label>
1.1.1.6 <input type=”date”>
O navegador, ao renderizar a primeira linha, colocará o texto em destaque e, ao final da 
palavra, fará uma quebra de linha.
Já com a tag <label> isso não acontece: o navegador irá escrever o “Data de Nascimento:” 
e aguardar o próximo objeto.
Por fim, na terceira linha, irá apresentar uma caixa de inserção de texto já preparada para 
o uso de datas.
Você pode testar a cláusula type, alterando de “date” para “text”, por exemplo. Assim que 
o fizer, ao renderizar, o navegador (intérprete do HTML, vale lembrar) irá mostrar o objeto de 
forma diferente.
Então, nesse ponto, podemos resumir o que vimos numa sentença mais catedrática: “Essas 
marcações estão inseridas no documento dentro de itens específicos chamados de tags, etiquetas 
ou elementos, que respeitam uma estrutura hierárquica bem definida” (SARAIVA; BARRETO, 
2018, p. 10).
Observe o termo “hierárquica” utilizado pelo autor. Isso fica mais claroquando vemos 
outros tipos de tags, como as que constroem uma tabela.
O exemplo de como funciona uma tabela pode ser visto a seguir, no código HTML:
1.1.1.7 <h1>Vendas Trimestrais</h1>
1.1.1.8 <table>
1.1.1.9 <tr>
1.1.1.10 <th>Mês</th>
1.1.1.11 <th>Venda Total</th>
1.1.1.12 </tr>
1.1.1.13 <tr>
1.1.1.14 <td>Janeiro</td>
1.1.1.15 <td>R$1.200,00</td>
1.1.1.16 </tr>
1.1.1.17 <tr>
1.1.1.18 <td>Fevereiro</td>
1.1.1.19 <td>RS2.000,00</td>
1.1.1.20 </tr>
1.1.1.21 <tr>
1.1.1.22 <td>Março</td>
1.1.1.23 <td>RS2.000,00</td>
1.1.1.24 </tr>
1.1.1.25 </table>
14WWW.UNINGA.BR
AN
ÁL
IS
E 
E 
PR
OJ
ET
OS
 D
E 
SI
ST
EM
AS
 P
AR
A 
IN
TE
RN
ET
 |
 U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
Vamos nos concentrar nas três tags referentes à tabela. Note que elas são hierárquicas, ou 
seja, <tr> estará “dentro” de uma tag <table>, ou seja, entre <table> e </table>. Já <td>, que faz a 
inserção de colunas, está “dentro” de uma linha (criada a partir da tag <tr>). E assim um HTML 
pode ser construído: a partir de tags. 
Anteriormente dissemos que uma das funções do HTML é a de prover navegação 
entre páginas. Isso está claro na própria definição de HTML na parte que cita (Hyper Text): um 
hypertexto é um texto que tem uma ação embutida, reagindo ao clique, fazendo com que o 
navegador abra outro texto. A isso é dado o nome de navegação. Quando um texto tem essa 
característica, esse trecho de texto é chamado de hyperlink. Vamos a ele.
3.2 Hiperlinks
[...] ou criar marcações que definam um vínculo com outro documento, que 
deve ser apresentado após o usuário ter clicado sobre a marcação. Esta é a ideia 
de hipertexto: vínculos entre diversos documentos criados a partir de marcações 
específicas (ALVES, 2015b, p. 15).
Note, na citação acima, que um site é basicamente uma porção de documentos WEB 
que se interligam, através de palavras que podem responder a um clique de mouse (ou toque de 
um dedo, enfim) nos levando a outro arquivo. Esta é a segunda (de duas) principais funções do 
HTML e é assim que ele se comporta nos navegadores.
Um link também é definido por uma tag (como tudo no HTML).
Observe o código a seguir, que exemplifica a construção (marcação) de um link:
1.1.1.26 <a href=”http://www.google.com”> Página do Google </a>
É um pouco diferente das tags que vimos até aqui: entre o “<” e o “>”, temos um parâmetro, 
exigido para a tag <a> que, neste caso, indica o destino do link, ou seja, o endereço para onde será 
levada a navegação quando executarmos o link (clicando, por exemplo).
Ao renderizar esse trecho, o navegador mostrará a expressão “Página do Google” na forma 
de um link e, como é de se esperar, levará a navegação até o endereço descrito, dentro da tag.
Veremos, a seguir, os dois últimos tópicos relacionados ao HTML nesta disciplina: 
a estrutura de um HTML e um exemplo de outra função que uma tag pode ter, além da de 
diagramação.
15WWW.UNINGA.BR
AN
ÁL
IS
E 
E 
PR
OJ
ET
OS
 D
E 
SI
ST
EM
AS
 P
AR
A 
IN
TE
RN
ET
 |
 U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
3.3 Estrutura de uma Página HTML
Agora que vimos exemplos de tags sendo utilizadas na construção de um HTML, falta 
comentarmos sobre a estrutura de um arquivo. Sim, porque há algumas tags que orientam um 
HTML de forma que ele seja, realmente, uma página. Outros que controlam, por exemplo, os 
comentados “metadados” ou mesmo o padrão de idioma em que o texto será mostrado.
Sendo assim, segue a estrutura de um HTML:
1.1.1.27 <!DOCTYPE HTML> 
1.1.1.28 <html lang= “pt-br”>
1.1.1.29 <head> 
1.1.1.30 <meta charset=“UTF-8”> 
1.1.1.31 <title> HTML 5 VAZIO </title>
1.1.1.32 </head> 
1.1.1.33 <body>
1.1.1.34 <h1>TÍTULO DO SITE</h1> 
1.1.1.35 </body>
1.1.1.36 </html>
Todo o conteúdo do site ficará “dentro” da tag body.
Ao abrir esse HTML no navegador, o título da guia ou da janela (dependendo do 
navegador) ficará com o título “HTML 5 VAZIO”. 
A única coisa escrita no site será “TÍTULO DO SITE”.
3.4 Outras Funções da TAG
Uma <tag>, além do que já vimos, também pode servir para outros fins. 
O nosso intuito, neste tópico, não é, como já dissemos, o de ensiná-lo a criar uma página 
WEB. Porém, algumas dessas tags são importantes para alimentar os robôs de busca, por exemplo, 
recurso este que poderá tanto posicionar o site na ordem de sugestões quanto fazer com que ele 
não conste nela.
Para exemplificar essa outra função de uma tag, vamos citar os “metadados”. Para entender 
o que são eles, imagine um site de venda de produto. Certamente, há o interesse de que a página 
fique bem posicionada entre as primeiras sugestões numa busca, sobretudo se as palavras-chave 
da busca coincidirem com o produto ofertado. Por outro lado, se for uma página com informações 
internas de um sistema, essa página não teria qualquer valor numa lista de busca pública. Esses 
dados são os chamados “metadados”.
O estudo desse assunto poderá fazer com que algumas etapas do projeto (como a 
documentação) e até a qualidade do software (testes e visibilidade em robôs de busca) possam ser 
mais bem aproveitadas. 
Observe esta citação sobre esse elemento:
O elemento <meta> define metadados relacionados à página HTML. Metadados 
são informações sobre os dados. Os metadados não são mostrados na página, 
entretanto fornecem informações valiosas para o navegador quando a página for 
interpretada. Fornece também informações para sites de busca e outros serviços 
web (TERUEL, 2014, p. 288).
16WWW.UNINGA.BR
AN
ÁL
IS
E 
E 
PR
OJ
ET
OS
 D
E 
SI
ST
EM
AS
 P
AR
A 
IN
TE
RN
ET
 |
 U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
Quando estiver gerenciando as etapas de design, lembre-se de destinar uma parcela de 
energia nisso.
Os “metadados” são fruto de estudo bem aprofundado, dando, inclusive, título a um 
estudo chamado de web semântica.
Nas referências bibliográficas deste material, você encontrará um livro sobre o assunto. 
Apesar de ter 15 anos (o que, para a informática de hoje, é muito tempo), ainda se mantém atual 
(pelo menos agora, em 2020). É dele que podemos retirar algumas citações relevantes (entre 
tantas) sobre os metadados e sobre a própria web semântica. “O consórcio W3 (W3C – World 
Web Consortium) tem uma visão mais voltada para a Web semântica. Metadados são definidos 
como ‘informações para a Web que podem ser compreendidas por máquinas’” (BREITMAN, 
2005, p. XI).
Veja, na citação, que o fato de essas informações serem feitas para máquinas, nos leva a 
crer em outras utilidades, que não se limitam só aos robôs de busca. Outros sistemas poderão ler 
as suas páginas e então produzir informações a partir disso (documentação, por exemplo).
Vamos a um exemplo, também retirado da mesma obra, que simula uma situação provável 
onde a web semântica poderia ser útil:
Imagine uma situação em que eu quisesse aumentar meus conhecimentos sobre 
o protocolo TCP/IP. Eu procuraria por um livro na área de redes. Se utilizasse 
apenas a palavra-chave rede, teria como resposta livros de informática, mas 
também livros sobre redes telefônicas, redes de transmissão elétrica e até mesmo 
redes típicas do artesanato nordestino. Caberia a mim, usuária da biblioteca, 
identificar os livros que atendem aos critérios da minha busca (BREITMAN, 
2005, p. 2).
Veja que um único assunto do universo da programação WEB já pode ser oportunidade 
de profundos estudos. Quanto mais profundidade você tiver sobre os assuntos relacionados ao 
produto do seu projeto, melhor você irá geri-lo. Esses assuntos só perdem para os que estão 
relacionados diretamente à gestão de projetos, claro.
17WWW.UNINGA.BR
AN
ÁL
IS
E 
E 
PR
OJ
ET
OS
 D
E 
SI
ST
EM
AS
 P
AR
A 
IN
TE
RN
ET
 |
 U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
3.5 Limitações e Incompatibilidade de Navegadores
Quando um navegador é construído, é implementada nele a capacidade de interpretar o 
HTML. Apesar de ser um padrão, alguns navegadores estendem esses recursos de forma a ganhar 
uma função a mais ou mesmo fazer uma coisa de formadiferente. 
É muito comum, nos textos iniciais de programação web, que o autor informe sobre isso, 
pois, se fizermos uma página com os recursos de um navegador, outro poderá mostrar as coisas 
de forma diferente ou mesmo não conseguir renderizar aquela parte da página. Veja a citação a 
seguir:
A exibição de uma página HTML pode ser feita por um programa de computador 
chamado navegador web ou simplesmente navegador ou browser. Existem 
diversos navegadores disponíveis no mercado, como Chrome, Internet Explorer, 
Firefox, Safari, Opera, Edge, entre outros. No entanto, é preciso ter cuidado 
com as marcações inseridas nas páginas, uma vez que, devido às diversas 
versões existentes dos navegadores, alguns conteúdos podem não ser exibidos 
corretamente, caso o navegador do usuário esteja desatualizado (SARAIVA; 
BARRETO, 2018, p. 10).
Sendo assim, este é, também, um cuidado a ser observado. O autor cita a desatualização. 
Porém, juntamente com esse fator, a forma como cada navegador se comporta e os recursos que 
tem também são fatores que poderão trazer algo inesperado na sua página.
4. O CSS
Uma boa definição de CSS pode ser obtida na citação abaixo:
As folhas de estilos, popularmente conhecidas pela sigla CSS, do inglês Cascading Style 
Sheets, fazem parte de uma gama de recursos que foram adicionados à linguagem HTML para 
aprimorar o design das páginas web. Com elas, é possível definir características que podem ser 
aplicadas a diversos documentos HTML, sem a necessidade de repetir as configurações em cada 
um deles. A especificação da formatação de estilos deve estar inserida entre as tags <style> e </
style>, ou com o uso do atributo style (ALVES, 2015b, p. 50).
O que isso tudo significa? 
Para entender bem o CSS, vamos rever a seguir um código:
1.1.1.37 <h2> formulário </h2>
1.1.1.38 <label>Data de Nascimento:</label>
1.1.1.39 <input type=”date”>
Os elementos gráficos e textuais (cores, fontes, alinhamento e tamanho de texto) são 
todos definidos pelo default do navegador.
 
18WWW.UNINGA.BR
AN
ÁL
IS
E 
E 
PR
OJ
ET
OS
 D
E 
SI
ST
EM
AS
 P
AR
A 
IN
TE
RN
ET
 |
 U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
Para que possamos intervir nessas propriedades, podemos (da mesma forma que fizemos 
com o link, anteriormente) adicionar a propriedade style dentro da tag. Vejamos:
1.1.1.40 <h2 style=”color:blue”> formulário </h2>
1.1.1.41 <label>Data de Nascimento:</label>
1.1.1.42 <input type=”date”>
O resultado será (quase) o mesmo: agora a letra do título h1 estará em azul. Outras 
propriedades podem ser inseridas, como tamanho do texto, fonte, alinhamento, entre outras. O 
HTML permite, inclusive, que coloquemos essas propriedades em várias linhas.
Vamos repetir o mesmo código com esta forma de descrever as opções:
1.1.1.43 <h2 
1.1.1.44 style=”color:blue”>
1.1.1.45 formulário 
1.1.1.46 </h2>
1.1.1.47 <label>
1.1.1.48 Data de Nascimento:
1.1.1.49 </label>
1.1.1.50 <input type=”date”>
Note que o resultado da renderização será o mesmo. Há um número muito grande de 
características que podem ser informadas dentro de style. Vejamos, por exemplo, o mesmo código 
acima com algumas outras alterações de estilo.
1.1.1.51 <h2 style= “color:blue;
1.1.1.52 text-align:center;”> 
1.1.1.53 formulário 
1.1.1.54 </h2>
1.1.1.55 
1.1.1.56 <label style=”color:red;”>
1.1.1.57 Data de Nascimento:
1.1.1.58 </label>
1.1.1.59 
1.1.1.60 <input style= “color:green;
1.1.1.61 font-size: 200%;”
1.1.1.62 type=”date”>
Neste caso, o título do formulário ficará azul e centralizado; a etiqueta do campo “Data 
de Nascimento” ficará vermelha e o campo em si terá com a fonte o dobro do tamanho original 
e a cor verde.
19WWW.UNINGA.BR
AN
ÁL
IS
E 
E 
PR
OJ
ET
OS
 D
E 
SI
ST
EM
AS
 P
AR
A 
IN
TE
RN
ET
 |
 U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
4.1 CSS Inline, Interno e Externo
Uma instrução CSS pode ser definida dessas três formas. Isso pode parecer pouco 
relevante, mas faz bastante diferença.
Imagine que seu cliente peça que sejam alteradas todas as definições dos títulos h1 do site. 
Se o site tem poucos títulos, você poderá alterá-las com mais facilidade. Mas, à medida que se 
tenha uma quantidade maior de páginas ou, pior, se o seu cliente deseja que as configurações de 
estilo possam ser facilmente alteradas pelo usuário, temos aí um problema.
O CSS Inline é este que exemplificamos há pouco: o style é descrito em cada tag. Uma 
forma um pouco mais centralizada seria o CSS interno.
Vamos a um exemplo.
O código a seguir apresenta três tags h1, formatadas individualmente:
1.1.1.63 <h1 style= “color:blue;text-align:center;”> 
1.1.1.64 Título 01 
1.1.1.65 </h1>
1.1.1.66 <h1 style= “color:blue;text-align:center;”> 
1.1.1.67 Título 02 
1.1.1.68 </h1>
1.1.1.69 <h1 style= “color:blue;text-align:center;”> 
1.1.1.70 Título 03
1.1.1.71 </h1>
Note que os três têm formatações idênticas. Isso poderia ser resumido desta forma: 
1.1.1.72 <style>
1.1.1.73 h1 {
1.1.1.74 color: blue;
1.1.1.75 text-align:center;
1.1.1.76 } 
1.1.1.77 </style>
1.1.1.78 <h1> 
1.1.1.79 Título 01 
1.1.1.80 </h1>
1.1.1.81 <h1> 
1.1.1.82 Título 02 
1.1.1.83 </h1>
1.1.1.84 <h1> 
1.1.1.85 Título 03
1.1.1.86 </h1>
Observe que uma tag style foi adicionada antes das tags h1, criando uma formação padrão 
para elas. Assim, podemos economizar tempo de digitação ao criarmos outra tag igual e, também, 
garantimos um padrão entre elas. Essa forma é, então, a forma interna.
20WWW.UNINGA.BR
AN
ÁL
IS
E 
E 
PR
OJ
ET
OS
 D
E 
SI
ST
EM
AS
 P
AR
A 
IN
TE
RN
ET
 |
 U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
Apesar de ser melhor do que a inline, essa forma ainda apresenta uma dificuldade se a 
quantidade de páginas for muito grande. Assim, a forma usual de definir o CSS é a forma externa. 
Esta consiste na criação de um arquivo separado com os estilos e depois referenciados ao HTML.
Vejamos o mesmo exemplo: arquivo mystyles.css
1.1.1.87 h1 {
1.1.1.88 color: blue;
1.1.1.89 text-align:center;
1.1.1.90 } 
Com esse arquivo salvo, na mesma pasta onde está o HTML, o arquivo ficaria:
1.1.1.91 <link rel=”stylesheet”
1.1.1.92 type=”text/css” 
1.1.1.93 href=”mystyles.css”>
1.1.1.94 <h1> 
1.1.1.95 Título 01 
1.1.1.96 </h1>
1.1.1.97 <h1> 
1.1.1.98 Título 02 
1.1.1.99 </h1>
1.1.1.100 <h1> 
1.1.1.101 Título 03
1.1.1.102 </h1>
Dessa forma, alterando o arquivo CSS, todas as páginas que fazem referência a ele serão 
automaticamente alteradas.
É comum autores se referirem ao CSS já como arquivos externos. Veja esta citação, que 
apresenta o CSS:
O CSS permite a separação do conteúdo de uma página de sua apresentação. 
Com o CSS, a informação de estilo para todo o site – cores, fontes, layout e mais 
– pode ser criada e mantida em um único arquivo. Isso fornece a flexibilidade e a 
consistência ao fazer mudanças ao longo do site. Por exemplo, se você modificar 
o formato de uma fonte em um CSS, ele irá modificar todas as outras páginas 
onde essa fonte aparece. Mais, os usuários finais podem também usar uma 
página de estilo diferente para ver um site. Os navegadores combinam o código 
HTML e o arquivo CSS para desenhar a página como desejarmos. Para uma 
demonstração do poder de CSS, visite o CSS Zen Garden (www.csszengarden.
com) (KALBACH, 2009, p. 204).
Partindo de uma instrução inline, experimentar um CSS separado é uma bela evolução, 
não?
Caso a sua equipe de design não esteja trabalhando dessa forma, seria uma boa ideia 
discutirem sobre o assunto.
21WWW.UNINGA.BR
AN
ÁL
IS
E 
E 
PR
OJ
ET
OS
 D
E 
SI
ST
EM
AS
 P
AR
A 
IN
TE
RN
ET
 |
 U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
Os autores são praticamente unânimes no uso de CSS externo. Críticas não faltam. 
Confira, por exemplo, a citação a seguir:
Podemos criar estilos em arquivos externos, com a extensão .CSS, ou embuti-los 
no próprio documento HTML, o que não é muito inteligente, se você pretende 
utilizar as configurações presentes na folha de estilo em várias páginas. Dessa 
forma, a formatação do conteúdo,ou seja, daquilo que deve ser exibido, é 
separada da formatação da aparência, que diz como devem ser apresentadas as 
informações (ALVES, 2015b, p. 50).
Pois bem. Esse método externo trouxe uma nova possibilidade: a de utilizarmos arquivos 
CSS de outras pessoas, ou até públicos. Bastaria alguém colocar um arquivo CSS em algum 
endereço publicamente acessível e plim! qualquer site poderia usufruir desses estilos. Nascem aí, 
as bibliotecas CSS, abordadas em nosso próximo tópico.
4.2 Bibliotecas CSS
Em um sistema de muitos objetos HTML, um arquivo CSS poderia gerenciar o layout 
de todos esses componentes de forma muito mais eficiente, dada a centralização desse design, 
tornando mais fácil e totalmente padronizado todo o aspecto visual dos componentes. Isso por si 
só já seria uma grande evolução.
Agora imagine designers de vários lugares do mundo trabalhando em um padrão de 
layout. Muito melhor, não é?
É o caso de bibliotecas famosas de CSS, como o Bootstrap (https://getbootstrap.com/), 
por exemplo.
Para utilizar essa biblioteca no seu HTML, basta acrescentar (com pouquíssima diferença) 
a mesma tag link da forma como foi feito no nosso último código de exemplo, trocando o nome 
do arquivo (no caso mystyles.css) para o arquivo do Bootstrap:
https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css. 
1.1.1.103 <link rel=”stylesheet”
1.1.1.104 type=”text/css” 
1.1.1.105 href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.
min.css”>
1.1.1.106 <h1> 
1.1.1.107 Título 01 
1.1.1.108 </h1>
1.1.1.109 <h1> 
1.1.1.110 Título 02 
1.1.1.111 </h1>
1.1.1.112 <h1> 
1.1.1.113 Título 03
1.1.1.114 </h1>
1.1.1.115 
https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css
22WWW.UNINGA.BR
AN
ÁL
IS
E 
E 
PR
OJ
ET
OS
 D
E 
SI
ST
EM
AS
 P
AR
A 
IN
TE
RN
ET
 |
 U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
Acima foi trocado apenas o nome do arquivo. Você poderia ter baixado o arquivo 
e usá-lo em seu próprio servidor. Também algumas outras particularidades do Bootstrap são 
aconselháveis, mas, para o nosso propósito, o que vimos aqui é suficiente.
Nada impede que todas essas técnicas sejam utilizadas juntas, pois o CSS é hierárquico, 
ou seja, se um CSS inline for utilizado dentro de um HTM que faça uma referência externa, 
prevalecerá para aquela tag inline.
5. JAVASCRIPT
O HTML é limitado bem mais ao design de uma página. Alguns efeitos visuais, assim 
como o uso de recursos do hardware local necessitam de funções extras. Para isso, os navegadores 
são preparados para interpretar comandos em uma linguagem de programação específica, o 
JavaScript.
JavaScript é uma linguagem de script, desenvolvida no ano de 1995 por Brendam 
Eich, da Netscape, com base em outra linguagem denominada EMACScript. 
Inicialmente foi chamada de LiveScript. Essa linguagem é utilizada na criação 
de pequenas rotinas (scripts) que podem ser inseridas no corpo de documentos 
HTML (ALVES, 2015a, p. 157).
Por meio dessa citação, podemos já imaginar a utilidade do JavaScript para o 
desenvolvimento do front-end.
Assim como no CSS, podemos usar o JavaScript inline. 
Veja, a seguir, uma função JavaScript sendo executada a partir de um evento (no caso, o 
click de um botão).
1.1.1.116 <h5 onclick=
1.1.1.117 ‘document.write(“<H1>LUZ!</H1>”)’>
1.1.1.118 faça-se a luz
1.1.1.119 </h5>
Para que alguma função do JavaScript seja executada sem um evento, devemos adicionar 
uma tag específica. Neste caso, a tag script. Os comandos que estiverem “dentro” dessa tag (entre 
o <script> e o </script>) serão interpretados pela linguagem descrita pelo parâmetro Language, 
assim como no exemplo a seguir:
1.1.1.120 <SCRIPT LANGUAGE=”JavaScript”>
1.1.1.121 document.write(“<H1>JavaScript!</H1>”)
1.1.1.122 </SCRIPT>
Neste caso, o comando document.write gerou um código HTM. Isso assim, de forma 
simples, pode parecer sem sentido. Mas não se engane: o JavaScript é bem poderoso e pode fazer 
muito pelo seu aplicativo WEB.
23WWW.UNINGA.BR
AN
ÁL
IS
E 
E 
PR
OJ
ET
OS
 D
E 
SI
ST
EM
AS
 P
AR
A 
IN
TE
RN
ET
 |
 U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
Também, da mesma forma como acontece com o CSS, o script pode ser colocado em um 
arquivo externo e, portanto, também é possível utilizar bibliotecas JavaScript, que vão tornar a 
programação bem mais fácil e produzir aplicativos bem mais eficientes.
Mais à frente nesta unidade, vamos expor algumas características das bibliotecas 
JavaScript, pois, além de auxiliarem no design, também trabalham outros aspectos que só veremos 
posteriormente.
A citação a seguir demonstra os problemas que você pode ter logo nas primeiras fases do 
projeto de um sistema WEB.
Como em qualquer outro tipo de projeto, o desenvolvimento de um sistema 
ou software pode apresentar uma série de problemas antes do planejamento, 
durante a execução ou mesmo após sua implantação. Entre os principais 
problemas, podemos mencionar: inclusão de novas funcionalidades de forma 
descontrolada; desperdício de tempo; definição de prazos otimistas para a 
execução das tarefas; falta de controle gerencial; abandono dos planos para que 
seja possível cumprir prazos muito curtos; recodificação excessiva (mudanças no 
código); entrega do produto inacabado; atrito entre usuários e desenvolvedores; 
mudança de tecnologia (ALVES, 2015a).
Assim, esses conhecimentos técnicos vão ajudá-lo a diminuir a chance de passar por tais 
problemas.
Em todas as fases do desenvolvimento WEB, uma verdade prevalece: tudo sempre 
muda! Por isso, a importância de se manter atualizado nos conhecimentos 
relacionados ao universo da programação WEB. Enquanto você está lendo este 
material, por exemplo, outras ferramentas estão sendo desenvolvidas e algumas 
delas poderão substituir as que consideramos, hoje, como as ideais.
Como escolher a melhor tecnologia? Como saber se as escolhas são as mais 
corretas?
Essas são questões que afligem qualquer gestor de projetos e qualquer time de 
desenvolvedores. Porém, em primeiro lugar, vem a escolha certa; em segundo 
lugar, vem a escolha menos certa; em último lugar, vem o não escolher. Pense nis-
so; mais vale um projeto executado com ressalvas do que uma ideia maravilhosa 
na cabeça.
24WWW.UNINGA.BR
AN
ÁL
IS
E 
E 
PR
OJ
ET
OS
 D
E 
SI
ST
EM
AS
 P
AR
A 
IN
TE
RN
ET
 |
 U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
Para avançar nos assuntos relacionados ao design, você 
pode consultar, na sua biblioteca virtual, a seguinte obra:
HSUAN-AN, T. Design: conceitos e métodos. 2017. 
[Minha Biblioteca]. Disponível em: https://integrada.
minhabiblioteca.com.br/#/books/9788521210115/.
 
Fonte: Amazon (2020).
Para saber mais sobre as bibliotecas CSS, assista ao vídeo: O que 
é bootstrap? Como utilizar o melhor framework front-end, disponível 
em https://www.youtube.com/watch?v=mVgrenJX5dI . Acesso em: 
10 ago. 2020.
Quer se aprofundar no HTML? Veja este vídeo: Curso de HTML5 + 
CSS3 + JS atualizado em 2020. Disponível em: 
https://www.youtube.com/watch?v=P8LxrpNQrTU . 
Acesso em: 10 ago. 2020.
Caso você queira expandir os conhecimentos de criação de front-
end e também ter contato com outras tecnologias, veja o vídeo: Crie 
ambientes front-end em minutos // Mão no Código #1. Disponível 
em: https://www.youtube.com/watch?v=LT-iNSrGoP8 . 
Acesso em: 10 ago. 2020.
https://integrada.minhabiblioteca.com.br/#/books/9788521210115/
https://integrada.minhabiblioteca.com.br/#/books/9788521210115/
https://www.youtube.com/watch?v=P8LxrpNQrTU
https://www.youtube.com/watch?v=LT-iNSrGoP8
25WWW.UNINGA.BR
AN
ÁL
IS
E 
E 
PR
OJ
ET
OS
 D
E 
SI
ST
EM
AS
 P
AR
A 
IN
TE
RN
ET
 |
 U
NI
DA
DE
 1
EDUCAÇÃO A DISTÂNCIA
CONSIDERAÇÕES FINAIS
Chegamos ao final da nossa primeira unidade. O que você deve ter aprendido, tanto 
com os vídeos quanto com este material e as atividades relacionadas a ele, é que você se sinta à 
vontade com as técnicas que envolvem o front-end. Não só isso: você deverá saber avaliar uma 
nova tecnologia, por meioda comparação com as tecnologias com as quais você teve contato.
De toda forma, tenha em mente que o princípio nunca muda: um site de web sempre terá 
alguns princípios: o primeiro deles é o de que um site sempre funciona dentro de um navegador; 
o segundo é o de que um site é sempre feito de três ingredientes: o HTML, para definir o texto; 
o CSS para dar ao texto a diagramação mais refinada; e o JavaScript para dar movimento aos 
objetos e poder reagir, também, aos eventos do navegador.
Todo esse conteúdo, porém, lhe foi apresentado sob a visão do Gestor de Projetos. Então, 
ao observar o HTML, não se preocupe tanto em como um site é feito, mas sim em como você 
deverá organizar sua equipe, a fim de que ele seja feito. O mesmo vale para o resto. 
E o que você pode fazer para crescer neste sentido?
Conhecer sites. Pode parecer que eu esteja desincentivando você a ter ideias próprias. 
Mas não é isso. É a navegação e a experiência em conhecer designs diferentes que vão colocá-lo 
em sintonia com as tendências de mercado, com aquilo que é a moda no desenvolvimento web 
de front-end.
Por fim, me despeço de você, aguardando sua presença na nossa próxima unidade, 
onde compartilharemos algo relacionado ao assunto desta unidade e, ao mesmo tempo, oposto. 
Falaremos das tecnologias de programação, mas, desta vez, para as regras que ficam do outro 
lado de um site: o chamado back-end.
Então, até lá! 
2626WWW.UNINGA.BR
U N I D A D E
02
SUMÁRIO DA UNIDADE
INTRODUÇÃO ...............................................................................................................................................................28
1. BACK-END ................................................................................................................................................................29
1.1 A EVOLUÇÃO DOS SISTEMAS WEB ......................................................................................................................30
1.2 SITE ESTÁTICO X SITE DINÂMICO ...................................................................................................................... 31
1.3 COMO FUNCIONAM OS SITES DINÂMICOS ....................................................................................................... 31
1.4 O SERVIDOR WEB .................................................................................................................................................32
2. O BACK-END NO MODELO MVC ............................................................................................................................33
3. AS LINGUAGENS BACK-END ..................................................................................................................................36
3.1 O PHP COMO EXEMPLO DE LINGUAGEM BACK-END .......................................................................................36
PROGRAMAÇÃO WEB – BACK-END: 
CARACTERÍSTICAS, TÉCNICAS E TECNOLOGIAS
PROF. ROLD CHEIDA PEREIRA JÚNIOR
ENSINO A DISTÂNCIA
DISCIPLINA:
ANÁLISE E PROJETOS DE SISTEMAS 
PARA INTERNET
27WWW.UNINGA.BR
3.2 COMO FUNCIONA O PHP .....................................................................................................................................37
4. BIBLIOTECAS E FRAMEWORKS PARA PROGRAMAÇÃO (FRONT-END E BACK-END) ....................................38
5. O BANCO DE DADOS ...............................................................................................................................................38
5.1 SQL: A LINGUAGEM DE ACESSO AO BANCO DE DADOS....................................................................................39
5.2 COMO FUNCIONA UM COMANDO SQL ..............................................................................................................40
5.3 EXECUTANDO COMANDOS DO MYSQL POR MEIO DO PAIZA.IO ....................................................................43
CONSIDERAÇÕES FINAIS ...........................................................................................................................................48
28WWW.UNINGA.BR
AN
ÁL
IS
E 
E 
PR
OJ
ET
OS
 D
E 
SI
ST
EM
AS
 P
AR
A 
IN
TE
RN
ET
 |
 U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
INTRODUÇÃO
INTRODUÇÃO: A WEB PROGRAMÁVEL
Até agora, estudamos aquilo que se refere ao front-end, mas com os assuntos relacionados 
ao design. Vamos agora tratar dos aspectos relacionados com os dados que são gerados no front-
end e como eles são tratados e enviados ao back-end.
Por ora, vamos nos limitar ao termo back-end, como esclarece a seguinte citação: “Também 
chamadas de tecnologias do lado do servidor, o back-end de um site web é o que o faz operar” 
(KALBACH, 2009, p. 203).
Se estivéssemos, por exemplo, nos referindo a uma página de uma rede social, o conteúdo 
visível, como os posts, por exemplo, constitui a chamada página estática do nosso site. Porém, 
esses posts, um dia, foram introduzidos por você ou outro usuário, em outra página. 
A obtenção desse conteúdo, que será transformado em página (conteúdo HTML), não é 
feita pelo front-end nem pelo navegador. Para que isso aconteça, um front-end solicita informações 
a um servidor, e este, depois de processar o pedido, devolve uma página HTML pronta, com o 
conteúdo específico. A isso é dado o nome de Sistema WEB.
Para que essa comunicação ocorra, entra em cena então o back-end, alvo do estudo desta 
unidade. Antes de mais nada, vamos a uma definição mais ampla e aos detalhes do back-end.
29WWW.UNINGA.BR
AN
ÁL
IS
E 
E 
PR
OJ
ET
OS
 D
E 
SI
ST
EM
AS
 P
AR
A 
IN
TE
RN
ET
 |
 U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
1. BACK-END
Iniciemos com a definição citada a seguir:
Também chamadas de tecnologias do lado do servidor, o back-end de um site 
web é o que o faz operar. Questões a serem tratadas incluem a estrutura do banco 
de dados, as áreas protegidas por senhas, firewalls, personalização e perfis de 
usuário (KALBACH, 2009, p. 203).
Como você deve ter percebido no texto citado, um back-end pode ser definido, na verdade, 
como um conjunto de softwares e estruturas que formam, como o nome sugere, aquilo que fica 
“atrás” de um site.
(Não vou cansar de reforçar) que o objetivo de você estar aprendendo sobre as tecnologias 
de construção de um sistema WEB não é, necessariamente, para que você construa um. Esse 
conhecimento deve, sim, ser útil para que você possa decidir como ele será feito.
O mesmo autor segue com informações importantes para um gestor de um projeto WEB.
 
Ao analisar esse nível de tecnologia, foque em como o back-end pode habilitar 
ou restringir o que você pode criar em termos de design. A personalização ou 
customização é possível? Contas e perfis de usuário serão possíveis? Você pode 
integrar tecnicamente conteúdo de diferentes sites e bancos de dados de maneira 
coerente? Todas essas são questões que você deve perguntar no início, de forma 
que não existam surpresas posteriormente (KALBACH, 2009, p. 203).
Esta citação é certeira no nosso propósito: caberá a você garantir que as tarefas de 
planejamento e de análise sejam executadas de tal forma que todos esses quesitos sejam bem 
vistos e estudados. Isso poderá evitar desagradáveis surpresas ao final do projeto, quando um 
cliente solicitar uma coisa simples, porém não compatível com as limitações e características de 
um sistema WEB.
A seguir, estudaremos a origem do back-end (da necessidade da sua criação) e de como 
acontece a comunicação com ele.
30WWW.UNINGA.BR
AN
ÁL
IS
E 
E 
PR
OJ
ET
OS
 D
E 
SI
ST
EM
AS
 P
AR
A 
IN
TE
RN
ET
 |
 U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
1.1 A Evolução dos Sistemas Web
A origem da World Wide Web, ou simplesmente web, data de março de 1989, 
quando Tim Berners-Lee, um pesquisador do CERN (Laboratório Europeu de 
Física de Partículas de Genebra), publicou uma proposta para desenvolvimento 
de um sistema que permitisse o compartilhamento de informações por meio de 
uma metodologia denominada hipertexto. Coma utilização desse sistema era 
possível passar de uma página de informações diretamente a outra, simplesmente 
clicando com o mouse em uma palavra do texto (ALVES, 2015a, p. 26).
Veja que, acima, você tem, novamente, uma definição que nos remete ao já estudado 
hipertexto. Mas esta citação está aqui para vermos o que uma página de texto era, no início dos 
tempos: um aglomerado de textos, interligados.
Isso se tornou insuficiente, principalmente pelo conteúdo das páginas, que precisavam 
ser construídas antecipadamente, não só no seu design, mas também no seu conteúdo.
Vamos voltar ao exemplo da rede social: imagine se os seus posts tivessem de ser enviados 
por e-mail para o site e este, manualmente, os inserisse na sua página. Impensável, não?
Mas, no início, os sites eram assim mesmo: as páginas eram editadas uma a uma e o 
conteúdo alterado. Isso quer dizer, por exemplo, que um site de notícias precisaria manualmente 
alterar o conteúdo de suas páginas sempre que uma nova notícia necessitasse ser publicada.
Além desse serviço adicional, podemos pensar que outros serviços realizados hoje 
por sites de internet não poderiam sequer existir da forma como são oferecidos atualmente. 
Exemplos disso são os comunicadores instantâneos, os sites de busca e até os serviços de webmail. 
Isso porque, no exemplo do serviço de webmail, seus e-mails são mostrados na forma de um 
documento HTML. Seria impraticável que toda essa comunicação tivesse de ser digitada por 
alguém em um site, concorda? (Acredito que sim).
Da mesma forma, ao utilizar um comunicador instantâneo, ele seria tudo, menos 
instantâneo!
Sendo assim, com o tempo, a WEB se adaptou a essas limitações, permitindo a comunicação 
do site com um servidor. Esse tipo de servidor processa as informações solicitadas (utilizando 
programas feitos em alguma linguagem – como o PHP, por exemplo), gerando um HTML como 
resposta. Esse conteúdo HTML é então enviado para o navegador.
Agora, sim, seus posts poderão ser enviados ao servidor, que os guardará em um banco 
de dados. Em um outro momento, ao solicitar todas as suas postagens, esse mesmo servidor as 
recuperará e as enviará novamente ao navegador, na forma de um HTML.
É esta a definição de um Sistema WEB, como também o conceito de site dinâmico. 
31WWW.UNINGA.BR
AN
ÁL
IS
E 
E 
PR
OJ
ET
OS
 D
E 
SI
ST
EM
AS
 P
AR
A 
IN
TE
RN
ET
 |
 U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
1.2 Site Estático X Site Dinâmico
Como vimos, um site dinâmico se diferencia do estático pela capacidade de um site 
dinâmico se comunicar com um servidor web. 
Podemos recorrer à literatura acadêmica e nela encontrar várias citações a respeito da 
diferença entre sites estáticos e sites dinâmicos. Observe esta citação: “Podemos classificar os sites 
em dois tipos: os sites estáticos e os sites dinâmicos. A diferença entre eles reside na forma como 
as informações são apresentadas aos usuários” (ALVES, 2015a, p. 87). 
Note que o autor utiliza a expressão “apresentadas aos usuários”. Vale lembrar aqui que 
esse termo não faz referência ao modo como o usuário verá a informação, mas sim à forma como 
ela foi obtida e entregue a ele.
O mesmo autor, nesse mesmo trecho de sua obra, um pouco mais à frente, complementa 
o pensamento: 
Num site estático, todas as informações ficam armazenadas nos arquivos HTML 
que compõem as páginas do site. Isso significa que, se for necessária alguma 
mudança nessas informações, os arquivos devem ser alterados manualmente e 
depois publicados de volta no servidor de hospedagem (ALVES, 2015a, p. 87).
Essa situação reforça o pensamento anteriormente descrito neste tópico.
Na evolução da construção de sites, então, os sites estáticos foram sendo substituídos por 
sites dinâmicos; isso também é reforçado no mesmo trecho da mesma obra da citação anterior, 
em que o autor conclui: “Em seu lugar, foram inseridos muitos sites dinâmicos que exibem 
informações nas páginas a partir de dados recuperados de um banco de dados” (ALVES, 2015a, 
p. 88).
Hoje em dia, é praticamente inexistente a construção de sites estáticos, porém, em meados 
da década de 1990, essa prática era bem comum.
1.3 Como Funcionam os Sites Dinâmicos
Como as páginas de um site existem dentro do navegador com elementos previamente 
digitados (seja por você – desenvolvedor – ou por um sistema – o back-end), para que um site 
seja dinâmico, haverá uma solicitação de conteúdo por parte do front-end ao back-end, que 
então processará o pedido e retornará um documento HTML. Já falamos algumas vezes dessa 
característica, porém cabe aqui detalhar um pouco mais sobre o modo como ela acontece. Não 
custa dar mais um exemplo, que nos levará ao próximo item do nosso estudo:
O processo normal que ocorre quando se acessa um site [...] se inicia com uma solicitação 
de serviço/recurso pela aplicação cliente, que, no caso, é um navegador de internet. Essa solicitação 
é encaminhada ao servidor web, o software responsável pela disponibilização dos documentos 
HTML, que a processa e devolve o documento referente à página que deve ser apresentada pelo 
navegador (ALVES, 2015b, p. 99).
 
A seguir, abordaremos os Servidores WEB.
32WWW.UNINGA.BR
AN
ÁL
IS
E 
E 
PR
OJ
ET
OS
 D
E 
SI
ST
EM
AS
 P
AR
A 
IN
TE
RN
ET
 |
 U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
1.4 O Servidor Web
De uma forma simplificada, um servidor web pode ser definido como um repositório de 
páginas HTML que pode ser acessado através do protocolo HTTP.
Podemos definir um servidor WEB da seguinte forma:
O servidor web pode ser considerado o motor da Internet, uma vez que ele 
é responsável pelo atendimento às requisições efetuadas pelos programas 
navegadores que rodam nos clientes. Em termos bastante simples, um navegador 
solicita um documento em formato HTML que deve ser exibido ao usuário, 
então o servidor web processa essa informação, busca o arquivo correspondente 
ao documento e o envia ao navegador. Este, por fim, apresenta o documento, que 
pode conter texto, imagens, animações etc. (ALVES, 2015a, p. 92).
Assim, quando você solicita o endereço de uma página no seu navegador WEB, ela pode 
estar armazenada em um computador externo ao seu, que processará o seu pedido e enviará 
ao navegador o documento em questão. Podemos reforçar essa descrição utilizando a citação a 
seguir, em que se explica o papel do servidor WEB na solicitação de uma página: “Essa solicitação 
é encaminhada ao servidor web, o software responsável pela disponibilização dos documentos 
HTML, que a processa e devolve o documento referente à página que deve ser apresentada pelo 
navegador” (ALVES, 2015b, p. 100).
É no momento da resposta do servidor web à solicitação do navegador que vemos o 
conceito de um site dinâmico.
Em meio às TAGS do documento armazenado naquele servidor, existirão solicitações 
escritas em uma linguagem de programação específica, que construirá o conteúdo entre elas 
de forma dinâmica, ou seja, através de processamento de informações e consultas de dados 
armazenados em banco de dados. Essas linguagens são complementares à linguagem HTML. 
Mais à frente nesta unidade, daremos exemplos de algumas. Por ora, basta que você saiba a função 
delas na construção de um conteúdo dinâmico.
Para melhor explicar o uso dessas tecnologias, podemos utilizar a citação a seguir:
Existem várias tecnologias que permitem esse tipo de operação, mas todas 
trabalham de forma similar. Normalmente existe um servidor de aplicação 
que trabalha em conjunto com o servidor web e é esse servidor de aplicação 
que permite a execução de rotinas escritas numa linguagem de programação 
complementar à HTML (ALVES, 2015a, p. 107). 
Obtemos conteúdo dinâmico de um servidor WEB por meio de solicitações feitas pelo 
navegador através da página carregada nele. Essa comunicação se dá através do protocolo HTTP, 
mais precisamente pelos comandos GET e POST, geralmente por meio de formulários.
Veja abaixo uma situação que descreve essa comunicação, no momento em que o autor 
defende,em seu livro, a construção de sites dinâmicos:
 
De nada adianta o usuário digitar as informações pedidas no formulário se 
elas não forem enviadas para algum lugar, como um banco de dados ou caixa 
postal de correio eletrônico. Para efetuar esse envio, a tag < FORM > possui dois 
atributos, sendo um deles denominado METHOD (ALVES, 2015b, p. 47).
33WWW.UNINGA.BR
AN
ÁL
IS
E 
E 
PR
OJ
ET
OS
 D
E 
SI
ST
EM
AS
 P
AR
A 
IN
TE
RN
ET
 |
 U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
É por meio desse atributo que a comunicação entre o front-end e o back-end acontece. 
O autor continua o texto descrevendo esses dois valores (que podem ser chamados, também, de 
métodos):
GET: o envio dos dados do formulário ocorre pela própria URL da página, ou 
seja, eles são transmitidos junto com o endereço da página. O inconveniente 
desse método é que ele torna possível a visualização dessas informações na barra 
de endereços do navegador, algo nada confiável (ALVES, 2015b, p. 47).
É importante ressaltar que esse método serve para o envio de informações que não 
precisam estar invisíveis na sua página, já que são feitas através do endereço da própria página.
Para o envio de dados sigilosos, o formulário pode utilizar outro valor para comunicação, 
o que é chamado de método POST. 
Veja a seguir a citação desse método: “POST: os dados são enviados de forma que não 
é possível ao usuário visualizá-los, ou seja, eles são transmitidos por meio de variáveis ocultas” 
(ALVES, 2015b, p. 47).
Vale reforçar que o objetivo dessa disciplina não é a programação. Assim, cabe a você, 
gestor de um projeto WEB, entender essa comunicação para que então possa discutir melhor, 
com os desenvolvedores, a forma como será conduzida a construção das páginas, assim como a 
comunicação que será necessária, como o back-end.
2. O BACK-END NO MODELO MVC
Na unidade anterior, quando falamos do front-end, utilizamos as definições do modelo 
MVC para situar o front-end como sendo a camada view.
Da mesma forma, iremos situar o back-end dentro desse modelo. 
Podemos ver, a seguir, uma situação que coloca o back-end como a camada controller: 
“[...] camada Controller, a qual age como um intermediário entre a camada de dados (Model) e a 
camada de apresentação (View). Ela é responsável por responder às ações do usuário quando de 
sua interação com a aplicação” (ALVES, 2015b, p. 100).
Devemos entender que a camada model, que será vista mais à frente, compreende o 
conjunto de regras e de informações armazenadas no servidor (quase sempre na forma que dados 
hospedados em um banco de dados).
De qualquer forma, é na camada controller que temos todo o processamento e as regras 
que serão interpretadas para que esses dados da camada model possam ser entregues ao front-end 
(a camada view). Sendo assim, é na camada controller que está concentrada toda ou quase toda a 
regra de negócio de um sistema WEB.
Vale aqui uma definição de regra de negócio:
As regras de negócio são todas as definições, traçadas pela empresa, sobre como 
ela trabalha as questões relativas ao seu negócio. Nelas, são definidas questões 
como a forma de a empresa trabalhar assuntos relativos à execução de seus 
serviços, à entrega de produtos e demais detalhes pertinentes aos processos e às 
atividades da organização (SARAIVA; BARRETO, 2018, p. 256).
34WWW.UNINGA.BR
AN
ÁL
IS
E 
E 
PR
OJ
ET
OS
 D
E 
SI
ST
EM
AS
 P
AR
A 
IN
TE
RN
ET
 |
 U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
É comum definirmos a camada model como sendo responsável por armazenar as regras 
de negócio. Isso depende muito da forma como um sistema WEB é construído.
Podemos definir que, se as regras de negócio forem definidas através das ações de um 
usuário, então estarão mais concentradas na controller. Porém, muitas vezes, todas essas regras 
também estarão na forma de dados armazenados, sendo, portanto, concentradas naquela camada 
(model).
Sendo assim, ou definimos uma regra na camada controller ou na model. É consenso o 
fato de que essas regras estejam definidas na camada model, e então esses assuntos são de seu 
interesse, pois dentre as tarefas de gestão, você deverá definir aquelas que documentam cada 
coisa em seu lugar.
Não só sob esse ponto de vista, as camadas controller e model estão intimamente 
interligadas e, muitas vezes, se confundem nas suas funções.
Note, na citação a seguir, uma definição da camada controller, chamada aqui de camada 
do controlador.
A camada do controlador tem a responsabilidade de trabalhar as requisições 
feitas pelo usuário. Essa camada vai controlar as ações realizadas, indicando 
qual é o modelo e qual é a visão necessários para que a ação seja executada com 
sucesso. É a camada responsável por disparar as ações da aplicação. (SARAIVA; 
BARRETO, 2018, p. 256).
Para a gestão de projetos, essas definições serão suficientes: o back-end consiste num 
conjunto de serviços que provêm dados processados à camada view. 
No modelo MVC, para o nosso estudo, teremos as definições:
• Model – Camada de dados (ou o que está relacionado a eles) como também a camada de 
regras, que definem como esses dados estarão disponibilizados e sob quais circunstâncias, 
definições, situações e solicitantes. 
• View – o Front-end, ou seja, toda a parte visível e fixa do sistema. Quando nos referimos 
à parte “fixa”, estamos falando de conteúdo pré-definido e não, necessariamente, sem 
animações ou movimento.
• Controller – também são regras, como na model, mas que definem o fluxo do sistema e 
não necessariamente as regras do negócio em si. Você pode entender essa camada como 
as regras que definem quais elementos da camada model devem ser executadas e quando. 
Também é ela a responsável por definir a entrega desses dados à camada view.
Partindo dessa definição um pouco mais simplista, suficiente para o objeto do nosso 
estudo, passaremos às linguagens utilizadas na camada controle, também chamadas de linguagens 
de back-end.
Antes, porém, utilizaremos um exemplo de login para que possamos entender, num 
pequeno trecho de sistema, como cada camada agiria e qual seria a responsabilidade de cada 
uma delas, seguindo um exemplo de Saraiva e Barreto (2018).
Iniciaremos citando o enunciado escrito por ele, que define o funcionamento do sistema:
Para você aprender sobre a utilização do padrão de projetos MVC por meio da 
linguagem de programação PHP, vamos utilizar como exemplo a validação de 
login de um usuário em uma aplicação. Veja como seria o comportamento das 
camadas a seguir: (SARAIVA; BARRETO, 2018, p. 257).
35WWW.UNINGA.BR
AN
ÁL
IS
E 
E 
PR
OJ
ET
OS
 D
E 
SI
ST
EM
AS
 P
AR
A 
IN
TE
RN
ET
 |
 U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
Ele inicia então a definição das tarefas de cada camada e a comunicação com as outras. 
Acompanhe: “Camada view: utilizada na chegada do usuário ao site, quando é apresentado o 
formulário de login. É a camada view que vai encaminhar os dados digitados no login, para a 
camada controller” (SARAIVA; BARRETO, 2018, p. 257).
Veja, então, que, no primeiro momento do funcionamento do sistema, cabe ao usuário 
digitar o endereço da página, e o servidor web devolverá um HTML, que será visto por ele. Esse 
conteúdo é a camada view do sistema. Porém, ao digitar os dados de login e senha, haverá uma 
solicitação da camada view para a camada controller, que definirá as ações seguintes.
Note, neste ponto, que as regras de negócio poderiam estar definidas na camada 
controller, como, por exemplo, se um usuário pode ou não fazer o login. Porém, uma outra forma 
de conceber o sistema é definir as permissões na forma de dados armazenados em banco de 
dados, o que então concentraria essas permissões na camada model.
Voltemos ao exemplo citado. O autor continua: “Camada controller: faz a recepção dos 
dados da requisição feita pelo usuário (entrada na aplicação) e os encaminha para a camada 
model específica fazer a validação e efetuar o login do usuário na aplicação”.
Note que o programador poderia impor regras na camada do controlepara definir se a 
validação iria acontecer ou não.
Seguindo as boas práticas de programação, neste caso, a solicitação sempre seria enviada 
pela camada de controle para a camada model onde essa solicitação seria analisada. Percebam 
que, neste ponto, poderia haver formas distintas de definir as regras de negócio.
Continuemos com o exemplo do autor: “Camada model: faz a validação dos dados e 
precisa retornar a resposta dessa validação de login, para que o usuário visualize” (SARAIVA; 
BARRETO, 2018, p. 257).
Em contrapartida à forma anterior, neste caso, as regras de validação são processadas na 
camada model, deixando para a camada controller apenas o envio dessa solicitação e posteriormente 
a devolução da resposta na forma de conteúdo HTML.
Apresentemos os dois últimos passos: “Camada controller: pega o resultado da validação 
feita pela camada model e faz o encaminhamento para a camada view específica, para que o 
retorno seja exibido ao usuário” (SARAIVA; BARRETO, 2018, p. 257). Isso reforça o conceito da 
concentração das regras de negócio na camada model.
Por fim, o autor conclui: “Camada view: faz a exibição da mensagem de retorno da 
tentativa de login, para o usuário” (SARAIVA; BARRETO, 2018, p. 257). Com isso, finaliza-se, 
então, o ciclo desse sistema.
Para reforçar, podemos ver essa comunicação num outro exemplo:
Por exemplo, quando o usuário clica no botão de confirmação de envio do 
formulário de cadastro, um método da camada Controller é acionado, disparando 
uma chamada a outro método presente na camada Model. Este, então, se 
encarrega de inserir um novo registro no banco de dados, atribuindo aos campos 
os valores recuperados do formulário. Após a adição do registro, o Controller 
carrega uma tela de confirmação de sucesso da operação, que está armazenada 
na camada View (ALVES, 2015b, p. 100).
No exemplo acima, na camada controller, aciona-se um trecho de programação da camada 
model e é esta que se encarrega de verificar e armazenar as informações no banco de dados. Mais 
uma vez, poderia aqui haver quesitos da regra de negócio na camada de controle.
36WWW.UNINGA.BR
AN
ÁL
IS
E 
E 
PR
OJ
ET
OS
 D
E 
SI
ST
EM
AS
 P
AR
A 
IN
TE
RN
ET
 |
 U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
O objetivo desses exemplos é alertá-lo para que você, como gestor do projeto, possa 
garantir a existência e a correta execução de tarefas que definirão onde estará concentrada cada 
parte do sistema.
Muito bem, chega de MVC por enquanto. Vamos a outro assunto bastante citado neste 
tópico.
Vimos referências a regras de programação e quais não são possíveis de serem executadas 
pela linguagem HTML. Citamos também que essas regras são executadas por linguagens 
adicionais. Vamos, portanto, citar alguns exemplos e explicar brevemente o funcionamento de 
algumas delas.
3. AS LINGUAGENS BACK-END
Sobre este tema, não tentaremos abranger nem a totalidade das linguagens e tecnologias 
existentes, tampouco definir a melhor opção. Isso porque essa decisão dependerá de vários 
fatores, como a complexidade de um sistema WEB e até o fato de que essa decisão sofre alterações 
constantes pelo desenvolvimento de novas linguagens e de novas ferramentas. O que pode ser 
uma decisão acertada hoje poderá não ser uma boa decisão no futuro. Portanto, devemos salientar 
a importância de reservar uma grande energia da sua equipe na tomada dessa decisão.
Fatores como o conhecimento técnico dos desenvolvedores são tão importantes quanto 
a definição da tecnologia. Sendo assim, ao tomar essa decisão, o projeto exigirá a definição de 
fatores interligados, que definirão a viabilidade do desenvolvimento.
Se, por um lado, é importante que se utilizem tecnologias atuais, por outro lado, de nada 
adianta uma boa tecnologia mal implementada. A melhor decisão será baseada em um balanço 
entre o conhecimento técnico e a capacidade de desenvolvimento e de aprendizagem da sua 
equipe, além da tecnologia utilizada em si.
3.1 O PHP como Exemplo de Linguagem Back-end
O PHP é, sem dúvida, uma das linguagens de programação mais tradicionais para a 
produção de sites dinâmicos. A seguir, uma definição retirada da nossa bibliografia:
O PHP pode ser definido como uma linguagem de programação em formato de 
script muito utilizada na construção de sites dinâmicos, executada no servidor 
(server side). Com ela o conteúdo das páginas é gerado de forma automatizada. 
Por ser uma linguagem de script, trabalha intimamente ligada a um servidor 
web, como é o caso do Apache. 
O PHP é uma linguagem de script. Isso significa que os trechos de código podem ser 
escritos diretamente no arquivo HTML, que está armazenado no servidor WEB. Ao processar o 
arquivo, o servidor WEB fará o processamento do script antes de enviar o resultado (um arquivo 
HTML, como já dissemos) para o navegador. Esse processamento pode gerar consultas a banco 
de dados, decisões de negócio e estar atrelado a regras de permissão.
Usaremos exemplos de codificação no intuito de esclarecer onde a programação está 
inserida no já descrito back-end. O seu projeto pode requerer outra linguagem ou mesmo a sua 
equipe. Isso não estará em discussão aqui.
37WWW.UNINGA.BR
AN
ÁL
IS
E 
E 
PR
OJ
ET
OS
 D
E 
SI
ST
EM
AS
 P
AR
A 
IN
TE
RN
ET
 |
 U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
3.2 Como Funciona o PHP
Na citação a seguir, podemos ver um resumo de como o PHP trabalha em conjunto com 
o HTML:
Todo código escrito em PHP deve estar envolto pelos delimitadores <?php e 
?> . O primeiro indica o início do código, enquanto o segundo informa o seu 
término. Outra forma de definir uma rotina PHP é com o uso dos delimitadores 
<? e ?>, mas para isso é necessário certificar-se de que o arquivo de configuração 
php.ini esteja com o parâmetro short_open_tags devidamente ajustado com o 
valor on (ALVES, 2015a, p. 108).
Assim como acontece com o CSS e o JAVASCRIPT, citados na Unidade 1, o PHP pode ser 
escrito diretamente em meio às tags do HTML, como em arquivos externos, com a extensão php.
Veja o trecho seguinte, da mesma obra:
[...] é perfeitamente possível misturar código escrito em HTML com código 
PHP. As páginas que contêm código PHP devem ser armazenadas no diretório 
htdocs do Apache, ou em subdiretórios dentro desse diretório. Por outro lado, 
os arquivos devem ser gravados com a extensão ‘.php’ (ALVES, 2015a, p. 108).
1.1.1.123 <html> 
1.1.1.124 <head>
1.1.1.125 <title>Meu primeiro código PHP
1.1.1.126 </title>
1.1.1.127 </head> 
1.1.1.128 <body> 
1.1.1.129 <?php
1.1.1.130 echo “<h2>Fui escrito em PHP</h2>”; 
1.1.1.131 ?>
1.1.1.132 </body> 
1.1.1.133 </html>
Aqui o PHP parece bem superficial. Mas não: este exemplo apenas exemplifica como um 
trecho PHP pode ser inserido no HTML.
Então, em vez de um comando simples, um longo trecho de código poderia ser colocado 
aí, para, por exemplo, trazer o resultado de uma consulta, que informaria o nome do usuário, as 
suas postagens, ou seja, qualquer dado armazenado em um banco de dados.
Isso poderia ser tão complexo quanto um grande sistema de redes sociais, por exemplo.
O que deve ficar claro aqui é que esse arquivo irá se tornar um HTML, e isso significa que 
será a camada view do nosso modelo MVC. O que está entre as tags do PHP forma a programação 
back-end que irá gerá-lo. Perceba que, no caso, front-end e back-end seriam feitos de forma que o 
designer entregaria ao programador back-end esse HTML sem o conteúdo da tag do PHP. Este, 
por sua vez, complementaria esse HTML com as regras, condições e consultas.
38WWW.UNINGA.BR
AN
ÁL
IS
E 
E 
PR
OJ
ET
OS
 D
E 
SI
ST
EM
AS
 P
AR
A 
IN
TE
RN
ET
 |
 U
NI
DA
DE
 2
EDUCAÇÃO A DISTÂNCIA
4. BIBLIOTECAS E FRAMEWORKS PARA PROGRAMAÇÃO (FRONT-END 
E BACK-END)
Se você conseguiu prever a quantidade de códigos e arquivos gerados num grande sistema, 
vai absorver melhor os motivos que levaram ao surgimento dos frameworks.
Antes de pormenorizar e exemplificar, vamos aos conceitos. Vejamos esta citação