prova Programação para web II

Prévia do material em texto

U
N
O
P
A
R
P
R
O
G
R
A
M
A
Ç
Ã
O
 P
A
R
A
 W
E
B
 II Programação 
para web II
Anderson Emídio Macedo Gonçalves
Adriano Sepe
Paulo Henrique Terra
Programação para web II
Dados Internacionais de Catalogação na Publicação (CIP) 
 Gonçalves, Anderson Emídio Macedo 
 
 ISBN 978-85-522-0318-6
 1. Sites da web – projetos – programas de computador. 
 I. Sepe, Adriano. II. Terra, Paulo Henrique. III. Título.
 CDD 006.786 
Gonçalves, Adriano Sepe, Paulo Henrique Terra. – Londrina: 
Editora e Distribuidora Educacional S.A., 2018
 112p.
G635p Programação para web II/ Anderson Emídio Macedo 
© 2018 por Editora e Distribuidora Educacional S.A.
Todos os direitos 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, da Editora e 
Distribuidora Educacional S.A.
Presidente
Rodrigo Galindo
Vice-Presidente Acadêmico de Graduação
Mário Ghio Júnior
Conselho Acadêmico 
Alberto S. Santana
Ana Lucia Jankovic Barduchi
Camila Cardoso Rotella
Danielly Nunes Andrade Noé
Grasiele Aparecida Lourenço
Isabel Cristina Chagas Barbin
Lidiane Cristina Vivaldini Olo
Thatiane Cristina dos Santos de Carvalho Ribeiro
Revisora Técnica
Adriane Aparecida Loper
Editorial
Adilson Braga Fontes
André Augusto de Andrade Ramos
Leticia Bento Pieroni 
Lidiane Cristina Vivaldini Olo
2018
Editora e Distribuidora Educacional S.A.
Avenida Paris, 675 – Parque Residencial João Piza
CEP: 86041-100 — Londrina — PR
e-mail: editora.educacional@kroton.com.br
Homepage: http://www.kroton.com.br/
Unidade 1 | Framework: conceitos básicos no desenvolvimento web
Seção 1 - Introdução ao framework
1.1 | Framework
1.2 | Introdução ao ASP.NET Core
1.2.1 | Arquitetura do .NET
1.3 | Tecnologia .NET Core
1.4 | Startup da Aplicação ASP.NET Core
1.4.1 | Método de Configuração
1.4.2 | Método de Configuração de Serviços
1.5 | Analisando o Start da Aplicação
1.6 | Middleware
1.7 | Arquivos Estáticos
1.8 | Servidor
Seção 2 - Compreendendo a programação
2.1 | Definindo Razor
2.2 | Blocos de Código
2.3 | Estruturas de Controle
2.4 | Diretivas
2.5 | Páginas Razor
Sumário
7
10
10
10
11
12
13
13
13
13
15
15
16
18
18
19
19
20
24
Unidade 2 | Tecnologias para programação web
Seção 1 - Padrão HTML5 
1.1 | Novos elementos em HTML5
1.2 | Diferentes navegadores
Seção 2 - Estilo CSS
2.1 | Introdução ao CSS
2.2 | Introdução ao Java Script
Seção 3 - Linguagem PHP
3.1 | HTM5 e linguagem lado servidor
3.2 | Programando em PHP
3.3 | Funcionalidades do PHP
31
34
35
37
42
42
45
49
49
49
51
Unidade 3 | O padrão MVC
Seção 1 - Padrões de projeto
1.1 | Design patterns
1.2 | Estrutura de um padrão
1.3 | Tipos de padrões de projeto
Seção 2 - O padrão MVC
2.1 | Padrões de arquitetura
2.2 | Padrões de arquitetura comuns
2.3 | O padrão MVC
2.4 | Frameworks
57
60
60
61
61
65
65
66
67
71
Unidade 4 | Tecnologia de acesso ao banco de dados
Seção 1 - API JDBC
1.1 | Funcionamento da API
81
84
84
1.2 | Conexão java
Seção 2 - Interface PreparedStatement
2.1 | Introdução a interface PreparedStatement’ 
2.2 | Funcionamento da interface
Seção 3 - API mysqli_connect 
3.1 | Introdução ao componente mysqli_connect
3.2 | Objeto mysqli query
85
93
93
94
98
98
99
Apresentação
Caro aluno, em busca de aprofundar o conhecimento na 
arquitetura web, vamos caminhar por uma trilha que perpassa por 
vários assuntos dentro desse universo rico em informação e de muitos 
recursos tecnológicos para cumprimento do seu propósito. Propósito 
este de desenvolver sistemas inteligentes e de fácil operacionalização, 
proporcionando aos clientes uma melhor produtividade, aumento 
na performance e uma resposta rápida no auxílio a tomada de 
decisões. Estamos falando de tecnologias de ponta no mercado para 
o desenvolvimento web. Da mesma maneira estamos vivendo uma 
época de revolução digital e nossos sistemas de informação estão 
evoluindo para acompanhar a tecnologia da atualidade.
Este livro está dividido em quatro unidades de estudo. A Unidade 1 
aborda os Frameworks, componentes importantes que, se utilizados 
com inteligência, auxiliam no processo de desenvolvimento de 
software. A Unidade 2 trabalha com várias tecnologias, como HTML5, 
CSS, Java Script, PHP e MySQL. São apresentadas de forma didática por 
meio de exemplos práticos que ajudarão você a entender melhor como 
funciona o processo de construção de um sistema web. A Unidade 3 
apresenta a arquitetura MVC - Model View Controller, mostrando suas 
principais características, seu funcionamento e alguns exemplos de 
trabalho com esse padrão de desenvolvimento. A unidade 4 vem para 
fechar o conteúdo do livro de Programação para Web II, apresentando 
formas de conexão com o banco de dados. Abordamos, nesta unidade, 
algumas APIs de conexão com banco de dados e apresentamos alguns 
exemplos de utilização destas APIs.
Acreditamos que a leitura e o estudo deste livro trarão novos 
conhecimentos que serão necessários para ajudar na composição de 
todos os materiais dos cursos da área de tecnologia da informação.
Tenha uma boa leitura, um ótimo estudo e todo sucesso que você 
puder alcançar. 
Prof. Anderson Macedo
Unidade 1
Framework: conceitos básicos 
no desenvolvimento web
Este material tem o objetivo de ajudar o leitor a entender como 
o conceito de modularização por meio de framework pode garantir 
maior produtividade e facilidades no processo de desenvolvimento. 
Isso é necessário principalmente para aplicações web, pois envolve 
várias tecnologias com HTML, CSS, JavaScript, linguagem de 
programação, acesso a dados e técnicas de segurança. 
Pensar na construção de uma aplicação partindo exclusivamente 
do mecanismo de comunicação HTTP, com certeza seria algo 
desafiador. Esse cenário bastante desafiador era a realidade para 
muitos desenvolvedores no tempo em que o padrão Common 
Gateway Interface (CGI) imperava. Vamos, ainda, abordar alguns 
conceitos existentes na tecnologia ASP.NET Core.
Objetivos de aprendizagem
Nesta seção compreenderemos os conceitos de framework, e uma aplicação 
para desenvolvimento web através da conceptualização da tecnologia ASP.NET 
Core.
Seção 1 | Introdução ao framework
Nesta seção visualizaremos os mecanismos programáveis existentes 
na tecnologia ASP.NET Core e, principalmente, teremos a oportunidade de 
compreender como a integração entre linguagem de programação e linguagem 
de marcação não é algo simples, mas existem facilitadores para isso.
Seção 2 | Compreendendo a programação
Adriano Sepe
Introdução à unidade
Vamos estudar, nesta unidade, conceitos de framework e como a 
programação pode ser facilitada a partir desse tipo de modularização.
Além dessa abordagem conceitual, vamos entender como a 
tecnologia ASP.NET Core, desenvolvida pela Microsoft, apresenta-se 
para o mercado de desenvolvimento de aplicações web. Abordaremos 
os conceitos relacionados à tecnologia e também sobre a forma de 
programarmos uma aplicação.
Nos aspectos relacionados à tecnologia, compreenderemos 
elementos básicos, como origem e ambiente de execução, também 
abordaremos conceitos de inicialização, arquivos estáticos e outros. 
Para entendermos como a programação de conteúdo dinâmico 
ocorre, abordaremos a linguagem de marcação chamada Razor, 
que permite, dentre outras coisas, mesclar conteúdos estáticos, 
como HTML, CSS e JavaScript com a linguagem de programação. 
Abordaremos conceitos relacionados à construção de páginas Razor, 
promovendo a demonstração da tecnologia como um todo.
Não abordaremos o padrão arquitetural MVC nesta unidade, muito 
natural à tecnologia tratada aqui, pois será devidamente apresentado 
na Unidade 4, tendo em vista a importância e a aderência que o tema 
tem para o desenvolvimento Web.
Vamos apontar vários conteúdos correlacionados,aproveitem!
U1 - Framework: conceitos básicos no desenvolvimento web10
Seção 1
Introdução ao framework
Introdução à seção
Nesta seção, apreenderemos conceitos de framework e suas 
aplicações. Também observaremos como a tecnologia ASP.NET Core 
se apresenta, por meio de conceitos básicos dessa tecnologia.
1.1 Framework
Entendemos como framework, um padrão arquitetural que fornece 
um modelo de desenvolvimento, também conhecido como template. 
Esse modelo de desenvolvimento deve necessariamente possibilitar a 
extensão, sendo assim, entendemos que um framework deve fornecer 
um template que seja extensível para aplicações dentro de um domínio. 
Existem vários frameworks focados em resolver um problema 
comum ao desenvolvimento, que é a manipulação de um banco de 
dados relacional através de uma aplicação que se utiliza do paradigma 
orientado a objetos. Neste caso, temos paradigmas que divergem 
conceitualmente, no qual, para o banco de dados, os dados são 
mapeados por meio de tabelas e relacionamentos; já para a orientação 
a objetos, temos classes e associações. Para diminuir a impedância 
entre essas duas tecnologias existem frameworks que disponibilizam 
um modelo de desenvolvimento, e que naturalmente são extensíveis 
para suportar a necessidades de cada projeto (BOOCH; JAMES; 
JACOBSON, 2012). 
Devemos compreender que, um framework é maior do que um 
mecanismo. De fato, podemos pensar em um framework como um 
tipo de microarquitetura abrangendo um conjunto de mecanismos 
que trabalham juntos para resolver um problema básico de um 
domínio comum. Na criação de um framework existe a especificação 
do esqueleto arquitetural, juntamente com conceitos e mecanismos 
para possibilitar que usuários possam adequar / estender para suas 
realidades, possibilitando assim o funcionamento a partir de seu próprio 
contexto (BOOCH; JAMES; JACOBSON; 2012).
1.2 Introdução ao ASP.NET Core
A tecnologia ASP.NET Core apresenta-se com suporte à múltiplas 
U1 - Framework: conceitos básicos no desenvolvimento web 11
plataformas, com alta performance, código de fonte Open Source e 
disponível para construção de aplicações modernas, com base em 
tecnologias nas nuvens, aplicações conectadas na internet. Por meio 
dela podemos desenvolver aplicações web e serviços, aplicações 
para a Internet das Coisas (IoT – sigla em inglês) e infraestrutura 
servidora para aplicações para dispositivos móveis. Diferentemente de 
outras tecnologias, essa pode ser executada nos principais sistemas 
operacionais, como Windows, macOS e Linux. Possibilita a sua 
utilização tanto em ambientes nas nuvens como infraestrutura local. 
Uma aplicação ASP.NET Core roda no topo da tecnologia .NET Core ou 
.NET Framework. Vejamos algumas diferenças entre estas tecnologias 
(ROTH; ANDERSON; LUTTIN, 2017). 
1.2.1 Arquitetura do .NET
A plataforma tecnologia .NET disponibiliza três ambientes de tempo 
de execução, isso significa que utilizando qualquer uma das linguagens 
suportadas podemos construir aplicações com restrições e facilitadores 
distintos. Esses ambientes de execução são necessários para permitir 
que uma aplicação desenvolvida em .NET possa ser executada, 
devemos compreender que são necessariamente pré-requisitos para 
as aplicações desenvolvidas. A imagem a seguir apresentará esses três 
ambientes: .NET Core, .NET Framework e Xamarin. 
Fonte: <https://docs.microsoft.com/en us/dotnet/articles/standard/media/components.png>. Acesso em: 26 abr. 2017.
Figura 1.1 | Componentes do .NET
U1 - Framework: conceitos básicos no desenvolvimento web12
Como já esclarecido, cada ambiente disponibilizará características 
específicas, restrições e vantagens. Algumas características tornam 
esses ambientes totalmente especializados, dessa forma, a adoção de 
um ou de outro deve ser baseado nas características gerais da aplicação 
que desejamos construir (LANDER, 2016).
• NET Framework: foi o primeiro ambiente de execução 
construído e que consolidou a tecnologia .NET, como 
característica principal podemos destacar a dependência 
do sistema operacional Windows, também que através dele 
podemos construir aplicações web, servidoras ou desktop.
• NET Core: ambiente otimizado para ser escalável, isso significa 
que foi desenhado para ser eficiente em infraestruturas 
servidoras locais ou remotas, através da computação nas 
nuvens. Diferencia-se do .NET Framework principalmente 
por ser multiplataforma, isso implica ser suportado em vários 
sistemas operacionais como Windows, Linux e macOS.
• Xamarin: este ambiente foi concebido por uma empresa 
chamada Xamarin, que possibilita a construção e otimização 
de aplicações para plataformas móveis como Android e Apple 
iOS.
Durante o decorrer desse material vamos avaliar a execução da 
tecnologia ASP.NET Core rodando no topo do .NET Core, visto que 
essa combinação apresenta maior flexibilidade pois possibilita-nos a 
utilização de outros sistemas operacionais (LANDER, 2016). 
1.3 Tecnologia .NET Core
A plataforma tecnologia .NET Core, como já visto, dispões de 
um ambiente de execução próprio. Além disso, apresenta algumas 
características que devem ser enaltecidas, visto que exibe algumas 
abordagens vantajosas na perspectiva do desenvolvedor quando do 
projeto a ser desenvolvido (LANDER, 2016). 
• Open Source: plataforma de código aberto, com licenças de 
utilização MIT e Apache 2.
• Suporte: coloca-se como uma tecnologia segura relativo à 
evolução e ao suporte, pois possui um Long Term Support 
(LTS) da Microsoft, e isso significa que será suportado por um 
longo prazo.
• Multiplataforma: suportado pelos sistemas operacionais 
U1 - Framework: conceitos básicos no desenvolvimento web 13
Windows, Linux e macOS, com possibilidade de ser portado 
para outros sistemas.
1.4 Startup da Aplicação ASP.NET Core
Uma aplicação ASP.NET Core inicia por meio de uma classe que, 
por convenção, é chamada de Startup. Como facilitador, podemos 
desenvolver classes de inicialização diferentes de acordo com o 
ambiente de execução. Para possibilitar a execução da classe Startup 
dentro do contexto de uma aplicação, é necessário que haja a 
implementação de um método de configuração, como opcional, 
também podemos implementar um método que servirá para 
configuração dos serviços. Vamos entender as diferenças entre eles, as 
características próprias e também suas assinaturas (SMITH, 2017).
1.4.1 Método de configuração
O método de configuração servirá para especificar como uma 
aplicação ASP.NET responderá as requisições HTTP. Em vias gerais, o 
método de configuração permitirá que o desenvolvedor defina como 
a aplicação processará as requisições geradas pelos navegadores, 
habilitando ou não recursos para isso. Estes recursos são chamados de 
Middleware e serão discutidos logo mais.
1.4.2 Método de configuração de serviços
Sendo opcional, podemos utilizá-lo para iniciar alguns pré-requisitos 
necessários aos serviços que serão estabelecidos por meio do método 
de configuração, dessa forma, devemos compreender que, mesmo 
sendo opcional, o método de configuração de serviços será chamado 
antes do método de configuração.
1.5 Analisando o Start da aplicação
Considerando a criação de uma aplicação ASP.NET Core na versão 
2, teremos ao menos duas classes, a primeira camada Startup, que 
corresponderá à classe inicialização de nossa aplicação, já a segunda, 
a classe Program, que corresponde ao ponto de inicialização de nossa 
aplicação. Não devemos confundi-las, uma configura o funcionamento 
de nossa aplicação, já a outra corresponde ao ponto de inicialização da 
nossa aplicação no contexto de execução (SMITH, 2017). 
Vejamos inicialmente a classe Program, que servirá, como já dito, 
como ponto de inicialização da nossa aplicação:
U1 - Framework: conceitos básicos no desenvolvimento web14
Fonte: elaborado pelo autor.
Quadro 1.1 | Ponto de entrada da aplicação ASP.NET CORE
Já a classe de inicialização (Startup.cs) tem um grau de complexidade 
maior, visto que define mais parâmetrosde configuração. A ativação 
e configuração de mais serviços pode aumentar drasticamente a 
complexidade dela, mas de modo geral os recursos que ativaremos em 
nosso exemplo são aplicáveis para a maioria das aplicações, vejamos 
o código:
Fonte: elaborado pelo autor.
Quadro 1.2 | Configurações através da classe Startup
U1 - Framework: conceitos básicos no desenvolvimento web 15
Devemos compreender que, por meio dessas duas classes 
conseguimos configurar o funcionamento do servidor web que 
hospedará a nossa aplicação, bem como ativar recursos que 
sustentarão o funcionamento da aplicação.
1.6 Middleware
Para possibilitar uma maior flexibilidade na construção de uma 
aplicação web, a tecnologia ASP.NET Core dispõe de um conceito 
chamado de Middleware que, em vias gerais, possibilita que elementos 
computacionais sejam ativados para processar uma requisição, 
possibilitando, dessa forma, que cada um destes possa manipular 
a requisição e/ou gerar conteúdo de resposta, permitindo ainda 
interromper a continuidade do processamento de uma requisição 
(ANDERSON; SMITH, 2017).
1.7 Arquivos estáticos
 Todo e qualquer recurso que não necessite de processamento 
pelo servidor para que haja a entrega ao cliente, que na maioria dos 
casos será um navegador, serão chamados de arquivos estáticos. 
Como exemplo podemos destacar arquivos de mídia, arquivos de 
marcação HTML/XML ou script em JavaScript. Para possibilitar essa 
entrega, devemos ativar esse recurso por meio da classe de Startup, e 
então utilizar uma pasta chamada wwwroot para armazenamento, isso 
para uma configuração padrão (ROTH; ANDERSON; LUTTIN, 2017). 
Vejamos como ativaremos esse recurso por meio da classe Startup.
cs:
Fonte: elaborado pelo autor.
Quadro 1.3 | Habilitando arquivos estáticos
U1 - Framework: conceitos básicos no desenvolvimento web16
1.8 Servidor
Dentro da arquitetura existente na web, encontramos a topologia 
Cliente/Servidor, na qual basicamente a figura do cliente é o navegador, 
e a figura do servidor será atendida por algum componente de software 
capaz de responder as solicitações dos clientes, isso possivelmente por 
meio do protocolo HTTP e suas variações.
Aplicações ASP.NET Core rodam em processos de 
implementações de servidores HTTP, e atualmente dispomos de duas 
implementações capazes de hospedar e processar uma aplicação 
desenvolvida nessa tecnologia. Até para possibilitar que uma aplicação 
ASP.NET Core funcione em múltiplas plataformas, dispomos de um 
servidor web chamado Kestrel. Para ambientes Windows podemos 
utilizar algumas possibilidades, como módulo ASP.NET Core, que roda 
por trás do IIS, que é uma implementação do servidor web construído 
pela Microsoft. Destacamos a versão HttpSys e WebListener como outra 
implementação para sistemas operacionais Windows. O que devemos 
entender é que cada uma dessas implementações disponibiliza mais 
ou menos recursos, também existem diferenças sobre o melhor 
cenário, em quesitos de performance, segurança ou capacidade de 
gerenciamento (DYKSTRA, 2017).
Para saber mais
Para saber mais a respeito da linguagem de programação C# e o 
framework .NET Core, acompanhe uma trilha de estudo com o título 
“Gruía de C#”, fornecido pela Microsoft. Para isso, utilize o link a seguir: 
<https://docs.microsoft.com/pt-br/dotnet/csharp/index>.
Questão para reflexão
Qual é a diferença entre framework e biblioteca?
Atividades de aprendizagem
1. Para possibilitar que uma aplicação ASP.NET Core execute, precisamos 
que isso ocorra através de um servidor web. Para possibilitar que a tecnologia 
em questão pudesse ser multiplataforma, o que significa a possibilidade 
U1 - Framework: conceitos básicos no desenvolvimento web 17
de rodar em vários ambientes como sistemas operacionais distintos ou 
mecanismos de hospedagem, então houve a implementação de um servidor 
capaz de ser multiplataforma. Qual o nome do servidor web disponibilizado 
pela Microsoft para tal feito?
a) IIS.
b) Kestrel.
c) HttpSys.
d) Apache.
e) WebListeners.
2. A representação de um dado na programação está diretamente 
relacionada à utilização de variável, então é natural que, ao projetarmos 
um algoritmo a quantidade e os tipos de variáveis estarão relacionados a 
alguma lógica. Qual é a justificativa para a declaração de uma variável e a 
definição do seu tipo?
U1 - Framework: conceitos básicos no desenvolvimento web18
Seção 2
Compreendendo a programação
Introdução à seção
Nesta seção, vamos compreender como a programação de 
conteúdo dinâmico para web ocorre com o uso da tecnologia ASP.
NET Core, para isso, veremos como mesclamos conteúdos estáticos 
com linguagem de programação, e como isso tudo gerará conteúdos 
dinâmicos que poderão ser consumidos nos navegadores.
2.1 Definindo Razor
Primeiramente devemos compreender o que é a sintaxe Razor 
para então avançarmos nos conceitos que a norteiam. A correta 
interpretação sobre a sintaxe Razor pode ser definida da seguinte 
maneira: Razor é uma sintaxe de marcação para códigos que rodam do 
lado do servidor, isso para páginas web. Então, a sintaxe Razor consiste 
em uma marcação Razor, que possui características próprias, que 
permite a inclusão de código C# em arquivos de marcação contento 
HTML. Esses arquivos possuem a extensão “.cshtml” (MULLEN; 
ANDERSON, 2017).
A linguagem padrão do Razor é o HTML, dessa forma, o seguinte 
código será interpretado inteiramente como um arquivo HTML, 
vejamos: 
Fonte: elaborado pelo autor.
Quadro 1.4 | Utilizando HTML no Razor
Como já falado, Razor suporta a utilização da linguagem de 
programação C#, permitindo, assim, a criação de conteúdos dinâmicos. 
Como também já mencionado, a linguagem padrão do Razor é HTML, 
e quando há necessidade da inclusão de código C# devemos utilizar 
o símbolo @ (arroba). A inclusão de C# implicará a avaliação e no 
processamento desse código, gerando, na maioria das vezes, código 
HTML. Dessa forma, devemos compreender que o Razor permite que 
alternemos códigos estáticos em linguagem de marcação HTML que, 
U1 - Framework: conceitos básicos no desenvolvimento web 19
quando processados gerarão como resultado o próprio conteúdo 
HTML, já quando houver código em C#, haverá um processamento 
e a geração de um conteúdo dinâmico (MULLEN; ANDERSON, 2017). 
2.2 Blocos de código
Para a inclusão de um bloco de código devemos iniciá-lo utilizando 
o @ e acrescentar as chaves de abertura { e de fechamento }, assim 
como definirmos um bloco em C#. Dentro dessa estrutura, devemos 
utilizar código válido em C#, não gerando conteúdo de marcação 
algum. Ao definirmos uma variável dentro desse bloco, ela estará visível 
em todo o documento Razor. Vejamos no exemplo a seguir como 
podemos utilizá-lo (MULLEN; ANDERSON, 2017):
Fonte: elaborado pelo autor.
Quadro 1.5 | Mesclando HTML e C# 
2.3 Estruturas de controle
Para atender aos mais complexos fluxos podemos utilizar todas as 
estruturas de controle disponíveis em C#, tudo isso no documento 
Razor. Perceba que para utilizá-las devemos apenas incluir o caractere 
@ (MULLEN; ANDERSON, 2017). 
U1 - Framework: conceitos básicos no desenvolvimento web20
Fonte: elaborado pelo autor.
Quadro 1.6 | Controlando fluxo na visão 
Perceba que apenas a estrutura de repetição for que iniciamos com 
o @, isso porque sempre que houver um bloco de código em Razor 
entende-se que haverá código C#, sendo assim, as demais instruções 
em C# foram compreendidas corretamente, Dentro dessa lógica, 
Razor define que podemos gerar conteúdo de marcação utilizando o 
que chamamos de transição implícita. Veja que no bloco do primeiro if 
geramos um conteúdo HTML, e isso é reconhecido automaticamente. 
Também podemos utilizar a transição delimita explicitamente, para 
isso, utilizamos uma marcação com uma tag chamada text, perceba 
isso no segundo bloco de código. Ainda podemos utilizar a transição 
explicita de linha, como pode ser observado nas saídas de HTML 
geradas nos cases definidos dentro da estrutura de seleção switch 
(MULLEN;ANDERSON, 2017). 
O processo de transição entre linguagem de programação C# e 
linguagem de marcação HTML tende a ser tranquilo, visto as várias 
formas de flexibilização disponibilizadas pela tecnologia. 
2.4 Diretivas
Diretivas Razor são representadas por expressões implícitas e 
palavras-chave precedidas pelo símbolo @. Utilizamos a diretiva @
using para importação de recursos externos ao nosso projeto, como o 
código apresentado no quadro 1.5 (MULLEN; ANDERSON, 2017). 
Outra importante diretiva é a @model, que permite que seja 
U1 - Framework: conceitos básicos no desenvolvimento web 21
definido qual o tipo do modelo que será manipulado pela página 
Razor, vejamos o seguinte exemplo, nele encontraremos uma página 
que, por objetivo, deve apresentar os dados da um objeto da classe 
aluno. Devemos compreender que o modelo dessa página servirá para 
permitir que a ferramenta auxilie no processo de mesclagem entre 
código C#, baseado na classe modelo, e linguagem de marcação 
HTML. Para isso, observaremos dois arquivos, um com extensão .cs, 
no qual será codificado a classe Aluno e outro com extensão .cshtml, 
no qual codificaremos a nossa página Razor. 
Fonte: elaborado pelo autor.
Quadro 1.7 | Definindo a classe modelo Aluno
A classe Aluno, como já observado, representará o modelo do dado 
no qual desejamos que seja apresentado na página Razor. Vejamos 
agora como o uso da diretiva @model deve ser feito e, principalmente, 
alguns benefícios a respeito disso.
Fonte: elaborado pelo autor.
Quadro 1.8 | Criando visão baseada no modelo
U1 - Framework: conceitos básicos no desenvolvimento web22
Perceba, inicialmente, que a classe Aluno foi informada (expressão 
implícita) diretamente na diretiva @model, e para esse projeto 
chamado DemoAspNetCore, utilizamos uma subpasta chamada 
Models, então se fez necessário informar o namespace para que 
a classe fosse reconhecida. Não estamos aqui discutindo como o 
objeto que será acessado através da variável de contexto @Model será 
gerado e passado, isso porque entraríamos na discussão do modelo 
de desenvolvimento, no qual veremos uma das formas, na sequência 
(MULLEN; ANDERSON, 2017). 
Existem algumas vantagens na utilização da diretiva @model, pois 
a partir do momento que é estabelecido o modelo de uma página 
Razor, então, a ferramenta (que no meu caso é o Visual Studio) passará 
a auxiliar na codificação, permitindo maior produtividade e também 
evitando erros, isso porque haverá uma checagem de todo o código, 
e havendo o acesso a algum membro não válido para Aluno, então, 
o compilador indicará. Vejamos essa consideração em evidência 
por meio de uma pequena adaptação ao nosso código (MULLEN; 
ANDERSON, 2017).
Fonte: elaborado pelo autor.
Quadro 1.9 | Checagem da visão pelo compilador
Perceba que ao invés de acessarmos o atributo Cpf, estamos 
indicando o acesso ao atributo Cpfs que, conforme observação ao 
modelo, percebemos que não existe, veja que até mesmo a coloração 
ficou diferenciada. Como resultado do processo de compilação, a 
seguinte mensagem é apresentada:
U1 - Framework: conceitos básicos no desenvolvimento web 23
Fonte: elaborado pelo autor.
Quadro 1.10 | Resultado da compilação após checagem da visão
Sever-
ity
Code Description Project File Line
Suppression 
State
Error CS1061
‘Aluno’ does not 
contain a defi-
nition for ‘Cpfs’ 
and no extension 
method ‘Cpfs’ 
accepting a first 
argument of type 
‘Aluno’ could be 
found (are you 
missing a using 
directive or an 
assembly refer-
ence?)
De-
moAspNet-
Core
C:\Us-
ers\x-admin\ 
\demo-src\
DemoAspN-
etCore\De-
moAspNet-
Core\Pages\
AlunoView.
cshtml
17 Active
Já a diretiva @functions permite que qualquer código C# seja 
definido, exceto instruções que, neste caso, devemos utilizar os blocos 
de códigos. Para melhor entendimento, considere o seguinte exemplo, 
ele mostrará a utilização desses dois recursos (MULLEN; ANDERSON, 
2017).
U1 - Framework: conceitos básicos no desenvolvimento web24
Fonte: elaborado pelo autor.
Quadro 1.11 | Utilizando a diretiva @functions
2.5 Páginas Razor
Utilizamos as páginas Razor para construir aplicações web em 
cenários focados nas páginas, algo mais simples e intuído, isso 
porque a tecnologia ASP.NET Core possui total suporte para o 
padrão arquitetural MVC. Este padrão possibilita o desenvolvimento 
de aplicações separando em três grupos de recursos, os modelos 
que representam os dados manipulados, os controles que executam 
ações de controle sobre o fluxo de interações geradas pelos usuários 
da solução e, por último, tempo, as visões, que correspondem aos 
recursos que representam aquilo que o usuário visualizará. Vale o 
destaque que esse padrão se apresenta como um ótimo modelo para 
desenvolvimento web, e que será devidamente abordado na Unidade 
4 (ANDERSON; NOWAK, 2017).
Para introduzirmos o conceito de páginas Razor, vamos avaliar o 
U1 - Framework: conceitos básicos no desenvolvimento web 25
seguinte conteúdo escrito, utilizando a sintaxe Razor, e que tem por 
objetivo a geração de um conteúdo HTML apresentando a tabulada de 
um número que, neste caso, é a tabuada do três, vejamos o código:
Fonte: elaborado pelo autor.
Quadro 1.12 | Criando uma página Razor
A primeira característica de destaque é a diretiva @page, que habilita 
o arquivo para ser acessado através do navegador sem a necessidade 
U1 - Framework: conceitos básicos no desenvolvimento web26
de criação de um elemento de controle ou qualquer outro tipo de 
configuração. Neste exemplo utilizamos a criação da visão (HTML + 
Razor cshtml) e o modelo (classe TabuadaModelo), ambos dentro de 
um mesmo arquivo, mas a tecnologia possibilita que arquivos sejam 
gerados separadamente, HTML + Razor em arquivos cshtml, já as 
classes modelos em arquivos cs (ANDERSON; NOWAK, 2017).
Para saber mais
Mecanismos de segurança focados na identificação e autorização 
de usuários para execução de ações em uma aplicação web são 
fundamentais, pois este ambiente é muito hostil quando avaliamos 
as possibilidades de ataques hackers. Como sugestão, leia o artigo “O 
novo modelo de segurança do ASP.NET Core” escrito pelo autor Rafael 
Paschoal de Carvalho, ele vai conceitualizar uma das abordagens de 
segurança disponíveis no ASP.NET Core. Para acessar utilize o seguinte 
link: <http://netcoders.com.br/o-novo-modelo-de-seguranca-do-
asp-net-core/>. Acesso em: 12 set. 2017.
Questão para reflexão
Existem outras formas para desenvolvermos as nossas aplicações ASP.
NET Core sem utilizarmos páginas Razor?
Atividades de aprendizagem
1. As páginas Razor possibilitam a construção de conteúdos dinâmicos 
utilizando a sintaxe Razor. Qual a função do modelo definido utilizando a 
diretiva @model? 
a) Persistir dados automaticamente na base de dados.
b) Criar facilitadores para persistência de dados.
c) Facilitar a construção de conteúdo dinâmico baseado no modelo.
d) Possibilitar a carga automática da base de dados.
e) Criar facilitadores para carregar dados.
2. A estruturação de um código traz algumas vantagens significativas, 
citadas e visualizadas por meio da refatoração efetuada. Assinale a alternativa 
incorreta relativo à modularização:
a)Possibilidade de reutilização de código.
U1 - Framework: conceitos básicos no desenvolvimento web 27
b) Complexidade nas técnicas utilizadas.
c) Aumento de legibilidade.
d) Associa-se, necessariamente, a técnicas mais simples de programação.
e) Potencializa a organização do código.
Fique ligado
Nesta unidade estudamos:
- Conceito de framework.
- Introdução ao .NET Core.
- Tecnologia ASP.NET Core.
- Programação Web com Razor.
Para concluir o estudo da unidade
Caro aluno, estamos finalizando esta unidade! Por meio dela, você 
pôde observar como o conceito de modularização por framework 
é algo extremamente funcional, podemos ainda compreender 
como a tecnologia .NET Core flexibiliza o desenvolvimento, por ser 
multiplataforma, e independente do sistema operacional Windows. 
Abordamos algunsconceitos relevantes sobre a tecnologia ASP.NET 
Core, carro-chefe para desenvolvimento web, fornecido também pela 
Microsoft, e, então, concluímos compreendendo uma das faces do 
desenvolvimento web, utilizando, para isso, a sintaxe de marcação 
Razor. 
Atividades de aprendizagem da unidade
1. Para a construção de aplicações web, podemos utilizar recursos que 
necessitam de processamento, por exemplo, podemos citar imagens, 
vídeos, ou arquivos como HTML e CSS. Para isso, em ASP.NET Core, 
devemos ativar um recurso que permitirá que esse tipo de conteúdo seja 
exposto. Assinale a alternativa que corretamente define como devemos 
fazer isso:
a) Na classe Program através da instrução app.EnableStaticFiles().
b) Na classe Startup através da instrução app.EnableStaticFiles().
c) Na classe Startup através da instrução app.UseStaticFiles().
d) Na classe GlobalConfig através da instrução app.UseStaticFiles().
e) Através do arquivo de configuração appsettings.json adicionando o 
conteúdo "StaticFiles": true.
U1 - Framework: conceitos básicos no desenvolvimento web28
2. Qual a função do recurso chamado middleware para a tecnologia ASP.
NET Core?
a) Permitir que haja balanceamento de carga nos servidores automaticamente.
b) Possibilitar a comunicação com bibliotecas nativas do sistema operacional 
hospedeiro.
c) Habilitar mecanismos para conversação com bibliotecas escritas em 
versões anteriores à da aplicação em desenvolvimento.
d) Possibilitar que componentes de inteligência processem as requisições, 
podendo ou não gerar a saída (resultado do processamento).
e) Permitir que uma aplicação ASP.NET Core funcione em servidores web 
construídos para outras tecnologias.
3. As diretivas são utilizadas no Razor para vários fins, para indicar o uso de 
namespace, para adicionar novos blocos de código ou então tipos de dados 
internos a nossa página, e ainda podemos utilizar para indicar o tipo de dado 
referente ao modelo que será necessário para codificar a página. Assinale a 
alternativa que corretamente define a diretiva de modelo:
a) @using.
b) @Model.
c) @model.
d) @type.
e) @import.
4. Podemos adicionar códigos diretamente em nossos arquivos Razor, para 
isso, podemos utilizar a diretiva de funções ou então a declaração de bloco 
de códigos. Assinale a alternativa que apresenta corretamente a forma com 
que poderíamos fazer a declaração de ambos:
a) Bloco de Código: @{ } – Diretiva de Funções: @functions { }
b) Bloco de Código: @code { } – Diretiva de Funções: @functions { }
c) Bloco de Código: @code { } – Diretiva de Funções: @function { }
d) Bloco de Código: @block { } – Diretiva de Funções: @functions { }
e) Bloco de Código: @block { } – Diretiva de Funções: @function { } 
5. Para configurarmos a aplicação, de forma geral, podemos utilizar a classe 
Startup, disponível exatamente para isso. A partir dessa classe, poderemos 
exercer dois tipos de configuração e, para isso, são disponibilizados dois 
métodos: Configure e ConfigureServices.
Assinale a alternativa que define conceitualmente quando utilizaremos um 
e/ou outro método de configuração:
a) Não há distinção, podemos optar conforme acharmos mais apropriado.
b) As configurações gerais são feitas no método Configure, já o método 
U1 - Framework: conceitos básicos no desenvolvimento web 29
ConfigureServices será utilizado para aplicações do tipo Web Service.
c) As configurações de acesso a banco serão feitas necessariamente no 
método Configure, já o método ConfigureServices será utilizado para 
aplicações do tipo Web Service.
d) Configuramos os Web Services no método Configure, já o método 
ConfigureServices nós os ativamos.
e) No método Configure especificamos como a aplicação responderá às 
requisições, já o método ConfigureService utilizamos para inicializar 
alguns pré-requisitos necessários.
U1 - Framework: conceitos básicos no desenvolvimento web30
Referências
ANDERSON, Rick; NOWAK, Ryan. Introduction to Razor Pages in ASP.NET Core. Microsoft, 
15 ago. 2017. Disponível em: <https://docs.microsoft.com/en-us/aspnet/core/mvc/razor-
pages>. Acesso em: 20 ago. 2017.
ANDERSON, Rick; SMITH, Steve. ASP.NET Core Middleware Fundamentals. Microsoft, 14 
ago. 2017. Disponível em: <https://docs.microsoft.com/en-us/aspnet/core/fundamentals/
middleware>. Acesso em: 20 ago. 2017.
BOOCH, Grady; RUMBAUGH, James; JACOBSON, Ivar. UML: Guia do usuário. Rio de 
Janeiro: Campus, 2012.
DYKSTRA, Tom et al. Web server implementations in ASP.NET Core. Microsoft, 3 ago. 
2017. Disponível em: <https://docs.microsoft.com/en-us/aspnet/core/fundamentals/
servers/?tabs=aspnetcore2x>. Acesso em: 10 ago. 2017.
LANDER, Rich. Guia da plataforma .NET. Microsoft, 31 out. 2016. Disponível em: <https://
docs.microsoft.com/pt-br/dotnet/articles/standard/>. Acesso em: 2 ago. 2017.
MULLEN, Taylor; ANDERSON, Rick. Razor syntax for ASP.NET Core. Microsoft, 4 jul. 
2017. Disponível em: <https://docs.microsoft.com/en-us/aspnet/core/mvc/views/razor>. 
Acesso em: 10 ago. 2017.
ROTH, Daniel; ANDERSON, Rick; LUTTIN, Shaun. Introduction to ASP.NET Core. 
Microsoft, 3 ago. 2017. Disponível em: <https://docs.microsoft.com/en-us/aspnet/core/>. 
Acesso em: 9 ago. 2017.
SMITH, Steve et al. Application Startup in ASP.NET Core. Microsoft, 1 mar. 2017. Disponível 
em: <https://docs.microsoft.com/en-us/aspnet/core/fundamentals/startup>. Acesso em: 
5 ago. 2017.
Unidade 2
Tecnologias para 
programação web
Considerando toda a complexidade existente para a plataforma 
web, a proposta desta unidade é a utilização de uma linguagem 
didática e instrutiva, buscando a simplicidade nas abordagens das 
seções e desenvolvendo alguns assuntos contidos na ementa 
da disciplina de Programação para web II. Além disso, dentro da 
metodologia adotada, busca-se o objetivo de inserir o aluno ao 
contexto de desenvolvimento de aplicações web para que ele se 
familiarize com as etapas e desafios deste universo.
Objetivos de aprendizagem
Anderson Emidio de Macedo Gonçalves
Grande parte do conteúdo criado para a internet é acessada por navegadores 
web por meio do protocolo HTTP ou HTTPS.
Serão abordadas, nesta seção, as características básicas que envolvem os 
padrões do HTML5, padrão utilizado no desenvolvimento web.
Seção 1 | Padrão HTML5
Será abordada, nesta seção, o CSS, uma linguagem de folhas de estilos em 
cascata, utilizada em toda etapa de design de uma página web. Além disso, o CSS é 
um padrão altamente utilizado na arquitetura web e anda junto em muitos aspectos 
com o HTML5, pois o CSS precisa do HTML5 para que suas funcionalidades 
tenham efeito. Veremos os conceitos, características e os principais comandos do 
CSS, na Seção 2, desta unidade de ensino.
Esta seção também abordará algumas técnicas do Java Script. Java 
Script é uma linguagem de programação para web baseada em SCRIPT que 
também é utilizada em conjunto com o HTML5. O JS, como é popularmente 
Seção 2 | Estilo CSS e Java Script
conhecido, pode ser utilizado para acessar algumas áreas de uma página HTML 
ou para desempenhar alguns recursos específicos, importantes somente para esta 
tecnologia.
Portanto, nesta seção, será abordada a parte conceitual do Java Script, 
assim como as suas principais características e formas de utilização que serão 
apresentadas especificamente com elementos do HTML5.
A linguagem de programação orientada a objetos PHP, vem sendo bem 
utilizada no mercado web por características como: recursos modernos, fácil 
sintaxe e desempenho no tráfego das informações específicas do lado servidor.
Nesta seção serão abordados alguns conceitos, principais características e 
alguns exemplos de páginas com funções em PHP.
Seção 3 | Linguagem PHP
Introdução à unidade
Atualmente existem várias tecnologias e ferramentas que auxiliam 
o desenvolvimento web. A proposta desta unidade de ensino é 
abordar algumas destas tecnologias, apresentando suas características 
e funcionalidades, contextualizando por meio de exemplos de 
utilização. Serão abordadas tambémalgumas ferramentas com 
recursos poderosos que auxiliam o profissional de arquitetura web no 
cumprimento de suas atividades.
Esta unidade de ensino abordará características de descrição e 
funcionalidades de três tecnologias para programação web, são elas: 
HTML5, CSS e Java Script. Além de aplicar alguns exemplos em PHP, 
uma linguagem de programação para web utilizada no mercado 
profissional de TI.
U2 - Tecnologias para programação web34
Seção 1
Padrão HTML5
Introdução à seção
Atualmente grande parte do conteúdo que está disponível na 
internet necessita de comandos HTML para ser apresentado e mostrado 
ao usuário final. Diversos aplicativos de utilização diária, como editores 
de textos, foram desenvolvidos por meio de uma linguagem de 
marcação. No entanto, não conseguimos visualizá-los, porque, como 
as linguagens de programação, o código fonte de uma página web, 
por exemplo, não é explícito ao usuário final. Sabemos que está por 
trás da interface apresentada, mas não temos acesso à sua codificação 
tão facilmente.
Nesta seção, abordaremos algumas características e comandos 
que foram criados especificamente para o HTML5. Geralmente não 
existe dificuldade demasiada para migração de HTML para HTML5, por 
exemplo. Basta saber posicionar o que deseja entre uma tag de abertura 
e uma tag de fechamento. Essas tags são chamadas de container. Esse 
container, por sua vez, vai aplicar as configurações do texto, imagem, 
gráfico, arquivos de mídia ou qualquer conteúdo que possa ser exibido 
em uma página web (SANDERS, 2012).
Fonte: elaborada pelo autor.
Figura 2.1 | Containers em HTML5
U2 - Tecnologias para programação web 35
A Figura 2.1, ilustra alguns containers da estrutura de HTML5, CSS, 
Java Script e PHP.
Repare que na parte superior da Figura 2.1 o nome do arquivo está 
com extensão .php. Se você editar este arquivo e salvar como HTML, 
ele funcionará com exceção do trecho que está entre as tags <?php 
?>, pois esta tag é específica para comandos PHP e o arquivo tem que 
estar salvo nesta extensão. Enfim, existem várias particularidades entre 
arquivos de códigos fontes híbridos, isto é, contendo várias linguagens.
1.1 Novos elementos em HTML5
A linguagem HTML é composta por tags. Uma tag é descrita em 
um código fonte HTML entre caracteres especiais "<>", por exemplo: 
<h1> Texto inserido </h1>. Tudo que está entre as tags de início e 
fechamento será formatado ou executado de acordo com a regra da 
própria tag, no caso, h1. Ainda dentro de uma tag, temos os elementos 
e os atributos. Os elementos são os diferentes tipos de tags existentes, 
e os atributos são as características que podemos alterar para cada 
elemento.
Fonte: Sanders (2012, p. 9).
Figura 2.2 | Elementos em HTML5
U2 - Tecnologias para programação web36
O número de elementos é bem extenso. Na Figura 2.2 e 2.3 estão 
presentes alguns deles. 
Fonte: Sanders (2012, p. 10).
Figura 2.3 | Elementos em HTML5
Dentre as novas tags criadas para o padrão HTML5, vale a pena 
destacar que elas trabalham em conjunto com as tags CSS e ou Java 
Script, além disso, elas têm autonomia para exercer sua funcionalidade 
sozinhas.
Depois de conhecer um pouco das novas tags, é importante 
aplicar para que você aprenda a funcionalidade destas tags na prática. 
Sugerimos a você que comece a escrever um código em HTML e faça 
o teste destas tags.
É importante também, como estamos falando de desenvolvimento 
web, que o teste seja feito em mais do que um navegador.
U2 - Tecnologias para programação web 37
Questão para reflexão
Analise a utilização das tags a seguir:
 <center>
 <spacer
 <font>
Estas e outras tags são consideradas tags inválidas para o HTML5. Elas 
foram substituídas por outras estruturas. Por exemplo, a tag font pode 
ser utilizada de outra maneira com um comando de CSS. Podemos 
concluir que novas versões de linguagens e aplicativos contêm, além de 
comandos e funcionalidades novas, correções de alguns bugs pontuais.
1.2 Diferentes navegadores
Uma grande dificuldade de quem desenvolve para web é fazer com 
que o seu website se comporte da mesma maneira na maioria dos 
navegadores existentes no mercado. É um desafio nada fácil, pois foram 
criados muitos navegadores desde o surgimento da internet. Enquanto 
os desenvolvedores estão apenas preocupados em fazer o seu sistema 
funcionar nos navegadores de sua preferência, acabam esquecendo 
que os usuários comuns podem utilizar outros navegadores para 
acessar o seu website. Isso também pode ser um problema.
Outra condição na atualidade é o fato de existirem vários dispositivos 
de acesso à web, como smartphones, tablets além de computadores 
comuns, isto afeta diretamente a responsividade. A responsividade é 
um recurso que pode ser implementado, fazendo as adequações de 
interfaces automaticamente, conforme o dispositivo que está sendo 
utilizado para visualização de uma página web.
Como foi mencionado, existem vários navegadores à disposição do 
público em geral para acesso à web. A Microsoft, por exemplo, criou 
o Internet Explorer (IE), A Apple, o Safari, o Google, o Chrome e assim 
por diante.
Vamos apresentar, nesta seção, alguns navegadores existentes no 
mercado e algumas de suas características.
Vamos começar falando um pouco sobre o Internet Explorer.
U2 - Tecnologias para programação web38
Fonte: elaborada pelo autor.
Figura 2.4 | Navegador Internet Explorer (IE)
Por questões apenas de padronização todos os navegadores aqui 
apresentados estarão com o Google carregado: <http://www.google.
com.br>.
O Internet Explorer é o navegador padrão da Microsoft. Atualmente, 
a versão mais recente é a versão EDGE, apresentada na Figura 2.5.
Fonte: elaborada pelo autor.
Figura 2.5 | Navegador Internet Explorer (versão EDGE)
U2 - Tecnologias para programação web 39
O navegador FireFox, da Mozilla, exibido na Figura 2.6, veio do 
antigo e famoso Netscape e foi lançado em meados da década de 
1990. O FireFox também tem suporte ao HTML5.
Fonte: elaborada pelo autor.
Figura 2.6 | Navegador FireFox Mozilla
Na Figura 2.7 é exibida o famoso Google Chrome, um dos 
navegadores mais populares da atualidade.
Fonte: elaborada pelo autor.
Figura 2.7 | Navegador Google Chrome
U2 - Tecnologias para programação web40
O google ficou mundialmente famoso por meio de vários de seus 
recursos. Aplicativos como tradutores, buscas e mapas, deixaram este 
navegador muito atraente para os seus usuários. O Chrome, a exemplo 
dos outros navegadores, também possui suporte ao HTML5.
Outros navegadores existentes como Opera, Safari, Iron entre 
outros, também possui suporte às novas tags e recursos do HTML5, 
isto significa que se você está utilizando HTML5 em suas páginas, pode 
ficar tranquilo, pois existe suporte por quase todos os navegadores 
disponíveis no mercado (SANDERS, 2012).
Para saber mais
Algumas das principais funcionalidades dos navegadores web estão 
presentes em quase todos os existentes, porém, existe algumas 
particularidades: acesse este link: <http://g1.globo.com/tecnologia/
noticia/2011/06/saiba-mais-sobre-os-principais-navegadores-de-
internet.html>, e veja um comparativo sobre os principais navegadores 
existentes na web. Vale a pena.
Atividades de aprendizagem
1. Uma grande parte do conteúdo disponível e criado para a internet está 
em HTML, porém, existem outras tecnologias que associam recursos e 
complementam as páginas da web. De acordo com estas informações, a 
linguagem HTML é considerada uma linguagem de que tipo?
Assinale a alternativa correta:
a) Linguagem de marcação de hipertexto.
b) Linguagem de programação orientada a objetos.
c) Linguagem de programação estruturada.
d) Linguagem de script de comandos.
e) Pseudolinguagem utilizada em arquivos HTML.
2. A linguagem HTML é composta por tags. Uma tag é descrita em um 
código fonte HTML entre caracteres especiais "<>", por exemplo: <h1> 
Texto inserido </h1>. Tudo que está entre as tags de início e fechamento 
será formatado ou executado de acordo com a regra daprópria tag, no 
caso, h1. Ainda, dentro de uma tag, temos os elementos e os atributos. Os 
elementos são os diferentes tipos de tags que temos e os atributos são as 
características que podemos alterar para cada elemento.
U2 - Tecnologias para programação web 41
Paralelamente a isto existem novas tags, ou novos elementos que foram 
criados especificamente para o HTML5. Analise as alternativas e assinale 
a opção correta que contenha apenas elementos específicos do HTML5.
a) <article> <aside> <audio> <canvas>.
b) <html> <embed> <figure> <footer>.
c) <article> <aside> <mark> <h1>.
d) <footer><hgroup><keygen><table>.
e) <sql><article><keygen><canvas>.
U2 - Tecnologias para programação web42
Seção 2
Estilo CSS
Introdução à seção
O CSS, que significa Cascading Style Sheets, ou folhas de estilo 
em cascata, em português, é uma especificação que define como os 
elementos de uma página web serão apresentados.
No decorrer desta seção serão apresentados alguns comandos e 
exemplos desta tecnologia de design da arquitetura web.
2.1 Introdução ao CSS
O CSS trabalha em conjunto com o HTML, pois dentro do próprio 
HTML podemos inserir comandos em estilo CSS. Procurando dar uma 
visão prática, vamos para algumas características de funcionamento 
do CSS.
Em primeiro lugar é preciso dizer ao documento HTML que ele 
precisa aceitar comandos em CSS. Este processo é realizado por meio 
da tag: <link rel="stylesheet">.
Dentro do código fonte HTML é simples fazer esta referência, e 
ela pode ser feita de duas maneiras diferentes. Uma é fazer referência 
ao código CC3 dentro do próprio arquivo e a outra maneira é fazer 
referência a um arquivo externo. O comportamento em relação à 
execução dos comandos será o mesmo, mas a organização dos 
comandos será feita de forma diferente. Enfim, são possibilidades de 
trabalho com os comandos do CSS.
U2 - Tecnologias para programação web 43
Fonte: elaborada pelo autor.
Figura 2.8 | Código CSS em arquivo externo
A Figura 2.8, nos mostra, na linha 6, o link para outro arquivo com 
o nome de "estilo.css", onde existem as configurações de design de 
todo o documento index.html exibido na figura. Observe a seguir o 
conteúdo do arquivo "estilo.css".
Fonte: elaborada pelo autor.
Figura 2.9 | Código do arquivo "estilo.css"
U2 - Tecnologias para programação web44
A Figura 2.9 consta parte da configuração de CSS existente que será 
responsável pela formatação do conteúdo da página index.html no 
browser.
Vamos então apresentar está página no navegador Chrome.
Fonte: elaborada pelo autor.
Figura 2.10 | Página index.html exibida no Chrome
Incrível, não é mesmo!? O código CSS presente no arquivo "estilo.
css" formatou em forma de menu suspenso alguns países mais visitados 
do mundo todo.
O link existente no nome de cada país foi feito com a tag "href", 
mas a cor, posicionamento, fonte, tamanho da fonte etc. foi tudo 
configurado com comandos CSS.
Questão para reflexão
Analise as duas questões a seguir, refletindo como resolvê-las. 
 Pela experiência em programação web que você tem e com o 
conteúdo apresentado nesta unidade, até o momento, podemos afirmar 
que o CSS veio para ficar e é uma das tecnologias mais presente na 
atualidade, quando o assunto é interface gráfica para web. A partir desta 
colocação, reflita como fazer melhor a organização dos comandos CSS 
dentro do seu projeto web. 
 Analise também as vantagens obtidas por optar por trabalhar com 
uma ferramenta de apoio para a construção do seu CSS, por exemplo, 
o editor SUBLIME.
Sabemos que quando trabalhamos com projetos WEB, também 
precisamos manter nossos códigos e scripts devidamente organizados.
U2 - Tecnologias para programação web 45
2.2 Introdução ao Java Script
O Java Script, popularmente conhecido como JS, é uma linguagem 
de script que também, a exemplo do CSS, pode e deve ser utilizada em 
conjunto com o HTML5. Vamos apresentar algumas considerações 
e aplicações desta linguagem utilizada no desenvolvimento de um 
projeto web.
Apesar de ser outro tipo de linguagem, a forma de inseri-la dentro 
de um arquivo HTML é similar ao CSS. Temos que referenciar o arquivo 
utilizado com um link e também podemos construir comandos em JS 
dentro do próprio arquivo HTML ou em um arquivo fora dele. Baseado 
em nossa questão para reflexão do item 2.1, podemos concluir que a 
segunda maneira é a mais adequada, por questões de organização do 
código.
Fonte: elaborada pelo autor.
Figura 2.11 | Código Java Script dentro do arquivo HTML
A Figura 2.11, nos mostra, na linha 5, a tag <script> </script> para 
utilização de comandos Java Script dentro do arquivo html. Após a 
linha 20, existe a continuação deste arquivo HTML com a tag <body> 
</body>, que nos mostra como o conteúdo será exibido.
Basicamente este código JS valida a idade de uma pessoa fornecida 
em um campo input type de entrada de dados. A partir dessa idade, a 
U2 - Tecnologias para programação web46
função verificarIdade(), como pode ser observada a partir da linha 7 na 
Figura 2.11, abrirá a página do Google se a idade fornecida for acima 
de 17, caso contrário uma mensagem "Acesso proibido para menores 
de 18 anos." é apresentada no browser. Vamos às práticas através das 
imagens.
Fonte: elaborada pelo autor.
Figura 2.12 | Exibição da página index.html
A Figura 2.11 mostra a tela inicial da validação. O teste começa após 
o usuário clicar no botão "OK". Neste momento, o nosso JS entra em 
ação disparando uma mensagem na tela: "Qual a sua idade?", como 
pode ser observado na Figura 2.12.
Fonte: elaborada pelo autor.
Figura 2.13 | Mensagem do Java Script
Aplicando uma estrutura condicional composta, o algoritmo 
implementado pode tomar dois caminhos. O primeiro caso, a idade 
seja menor que 18.
Fonte: elaborada pelo autor.
Figura 2.14 | Mensagem para idade menor que 18 anos
U2 - Tecnologias para programação web 47
O segundo caminho é a idade ser pelo menos 18 anos. Neste caso, 
como já relatado, será aberta uma nova página com o endereço do 
Google resultando na imagem da Figura 2.15.
Fonte: elaborada pelo autor.
Figura 2.15 | Página exibida para maiores de idade
Como podemos constatar, é relativamente simples programar em 
Java Script dentro de páginas HTML, basta desenvolver a lógica e utilizar 
os comandos JS para deixar sua página mais profissional (SANDERS, 
2012).
Para saber mais
As tecnologias CSS e Java Script estão presentes no mercado 
profissional de desenvolvimento web e prontas para serem exploradas 
por vocês. Se você quer conhecer mais um pouco dos recursos destas 
linguagens e saber como aplicá-las, não perca tempo! Todas estas 
informações você encontra no livro Smashing HTML5: técnicas para a 
nova geração da web (2012, p. 109-233), do autor Bill Sanders. 
Atividades de aprendizagem
1. A propriedade position do CSS3 refere-se ao posicionamento usado para 
um determinado elemento HTML. 
Quais valores essa propriedade permite?
U2 - Tecnologias para programação web48
Assinale a alternativa correta:
a) public, private, default ou static.
b) top, bottom, left, right ou center.
c) bottom, left, right, wrap ou center.
d) static, relative, absolute, fixed.
e) public, protected, private, fixed.
2. Uma folha de estilo, essa seria a tradução para a sigla CSS, externa é 
ideal, pensando no reaproveitamento de código, sendo possível mudar a 
aparência de um site inteiro alterando apenas um arquivo. Com relação às 
folhas de estilo externas, considere:
I- < link rel="stylesheet" type="text/css" href="estilo.css"> 
II- < style type="text/css"> @import url("estilo.css"); 
III- < @import page="text/css" src="estilo.css"> 
IV- <@include type="text/css" href="estilo.css"> 
Considere que o arquivo CSS está no mesmo diretório da página HTML. Para 
fazer referência correta a um arquivo CSS externo, no interior do cabeçalho 
da página HTML pode-se utilizar o que é apresentado na(s) afirmativa(s):
a) I e II.
b) I, II e III.
c) III e IV.
d) I e III.
e) I e IV.
U2 - Tecnologias para programaçãoweb 49
Seção 3
Linguagem PHP
Introdução à seção
A linguagem PHP atua no lado do servidor para traduzir as 
informações armazenadas para quem está acessando uma página 
HTML5, por exemplo. Dizemos que a página está no lado cliente.
Vamos estudar algumas características desta linguagem, saber um 
pouco mais sobre como ela funciona no lado servidor e, finalmente, 
ver alguns exemplos de codificações em PHP. Vamos ao nosso estudo!
3.1 HTM5 e linguagem lado servidor
O trabalho de um servidor web é um pouco diferente, um servidor 
PHP, por exemplo, pode processar informações de várias origens e 
depois enviar para um navegador HTML. Ele pode, por exemplo, 
interagir com bancos de dados, recurso que não seria possível utilizando 
somente códigos HTML ou HTML5. Essa interação é responsável 
pelo dinamismo de grande parte do conteúdo web que acessamos 
hoje. Isto quer dizer que fatalmente estamos consultando, inserindo, 
alterando e deletando dados de um servidor a partir de páginas HTML. 
Isto só é possível por meio de um servidor web.
Entre outras palavras, o trabalho da linguagem de programação 
PHP é, além de possibilitar comandos e funções que dão vida às nossas 
páginas web, ser parte do processo de transmissão de informações por 
meio da internet.
Outro servidor web que atua no mercado é o Apache. Temos 
outros servidores também, mas o foco agora é abordar um pouco da 
linguagem PHP.
3.2 Programando em PHP
Um detalhe muito importante é a extensão do arquivo PHP. Para 
que um código na linguagem PHP venha funcionar, obrigatoriamente 
o arquivo tem que estar salvo com a extensão .php. Caso contrário o 
código não irá executar.
U2 - Tecnologias para programação web50
Fonte: elaborada pelo autor.
Figura 2.16 | Exemplo PHP parte 1
Na Figura 2.16, é apresentado um código em PHP simples. Este 
código cria algumas variáveis e testa se o nome da variável "$professor" 
é igual a "Anderson Macedo". A condição retorna o resultado lógico 
verdadeiro, pois está sendo atribuído este valor de forma fixa no código. 
Então, o nome do professor e a abreviatura da disciplina são exibidos 
na tela.
A linguagem PHP é uma linguagem fracamente tipada. Esta 
afirmação significa que as variáveis criadas em PHP não precisam 
de tipos definidos e que durante a execução do programa podem 
armazenar conteúdos de diferentes tipos de dados.
A sintaxe desta linguagem é bem simples. Isto também é um fator 
que atrai o número de desenvolvedores simpatizantes ao PHP.
Também é uma linguagem que consegue se conectar com vários 
bancos de dados disponíveis no mercado, por exemplo, o MySQL, 
banco de dados que, por sinal, foi muito aceito no desenvolvimento 
de projetos web.
U2 - Tecnologias para programação web 51
Fonte: elaborada pelo autor.
Figura 2.17 | Exemplo PHP parte 2
A Figura 2.17 exibe a página produzida pelo código da Figura 2.16. 
Como o nome do professor é o mesmo que utilizado no comando 
condicional, ele foi exibido na página.
Questão para reflexão
Analise as duas questões a seguir refletindo como resolvê-las. 
 A linguagem PHP é a mais adequada atualmente para desenvolvimento 
web, de acordo com o cenário de tecnologia da atualidade? 
 Como trabalhar com a responsividade de uma página web? Existem 
frameworks para auxílio desta tarefa?
O apelo visual para conteúdos web está presente na internet. É preciso 
considerar este requisito no desenvolvimento de um projeto web.
3.3 Funcionalidades do PHP
Já abordamos, nesta unidade, que PHP é utilizado do lado do 
servidor para realizar funções dinâmicas, como coletar dados de 
formulários, gerar páginas com informações fornecidas por uma base 
de dados etc., mas ele também possui outras funcionalidades, tais 
como:
• Escrever aplicações desktop: certamente o PHP não é 
considerado a melhor linguagem para desenvolver aplicações 
desktops, porém, para tal finalidade pode ser utilizado o PHP-
GTK, que é uma extensão do PHP para desenvolvimento em 
U2 - Tecnologias para programação web52
multiplataformas.
• Utilização em grande parte dos sistemas operacionais: o 
PHP também pode ser utilizado na maioria dos sistemas 
operacionais, como Windows, Unix, RISC OS etc. Também é 
suportado por vários servidores web do mercado. O Apache 
por exemplo suporta o PHP sem problemas.
• Outra funcionalidade é o suporte de vários SGBD da 
atualidade, por exemplo: MySQL por meio de uma conexão 
ODBC.
Para concluir, o PHP tem uma biblioteca de comandos que estão 
disponíveis para utilização em todo o processo de desenvolvimento 
web.
Para saber mais
O PHP é uma linguagem para ser trabalhada do lado do servidor, assim 
como o Java Script é uma linguagem para ser utilizada do lado do 
cliente.
A validação de um CPF é um bom exemplo para utilização de um JS, 
pois a página web não vai precisar fazer nova requisição ao servidor para 
fazer esta validação, já que o JS valida no lado do cliente.
Atividades de aprendizagem
1. De acordo com o código PHP a seguir:
Ao ser executado por um servidor web, esse código apresentará um número. 
Pegue o número apresentado e multiplique-o por 2.
Assinale a alternativa que contenha o resultado desta multiplicação.
U2 - Tecnologias para programação web 53
a) 14.
b) 15.
d) 5.
d) 7.
e) 12.
2. A declaração de variáveis em PHP também está de acordo com as boas 
práticas existentes para nomenclatura de variáveis de outras linguagens.
Os nomes que identificam as variáveis no PHP devem ser sempre iniciados 
pelo sinal de dólar "$", seguido por:
Assinale a alternativa correta:
a) um hífen.
b) um arroba.
c) qualquer dígito hexadecimal.
d) uma letra ou sinal de sublinhado.
e) qualquer caractere existente.
Fique ligado
Resumo dos itens estudados nesta unidade:
• Padrão HTML5.
• Estilo CSS e Java Script.
• Linguagem PHP.
Para concluir o estudo da unidade
O processo de desenvolvimento de uma página web, ou um 
ecommerce completo se torna muito complexo considerando 
alguns aspectos que vimos nesta unidade de ensino, como 
tecnologias utilizadas, diferentes navegadores presentes no mercado, 
responsividade entre outros.
Assim como no processo de engenharia de requisitos, para a 
criação de conteúdos web também deve-se levar em consideração 
a visão dos profissionais envolvidos no projeto, garantindo, assim, um 
alto percentual de acerto na satisfação do cliente ou usuário.
U2 - Tecnologias para programação web54
Atividades de aprendizagem da unidade
1. O servidor web é responsável por interpretar os comandos presentes em 
uma página web e realizar o seu processamento.
Assinale a alternativa que contenha um servidor web existente.
a) Delphi.
b) JSTL.
c) NetBeans.
d) Netscape.
e) Apache.
2. No desenvolvimento web, assim como no desenvolvimento em outras 
arquiteturas, existem alguns padrões de boas práticas de programação, tais 
como nomenclatura de variáveis, um código limpo e profissional, padrões 
de design etc.
Assinale a alternativa correta para o órgão no qual pessoas trabalham em 
tempo integral em busca de melhorias.
a) W3G. 
b) JSF.
c) IIF.
d) W3F.
e) W3C.
3. Assinale a linguagem que foi projetada para separar o conteúdo escrito, 
tal como HTML, de conteúdos como: layout, cores, fontes, alinhamentos, 
margens etc.?
Assinale a alternativa que contenha o nome dessa linguagem.
a) Ajax.
b) CSS.
c) Ruby.
d) JavaScript.
e) PHP.
4. Acompanhe o exemplo da construção de uma página web a seguir:
Um profissional estava desenvolvendo uma página web utilizando HTML e 
CSS em uma técnica conhecida como tableless. Ele criou o layout da página 
utilizando contêineres com bordas discretas para agrupar elementos de 
acordo com um conjunto de características. Quando adicionou elementos 
nos contêineres, percebeu que estes elementos ficavam grudados nas 
laterais da página.
Para definir, então, uma margem interna de mesma medida, em todos os 
U2 - Tecnologias para programação web 55
lados dos contêineres, utilizou um atributo CSS.
Assinale a alternativa que contenha este atributo.
a) Padding.
b) Align.
c) Margin.d) Stretching.
e) Default-margin.
5. Veja o código a seguir:
lados dos contêineres, utilizou um atributo CSS.
Assinale a alternativa que contenha este atributo.
a) Padding.
b) Align.
c) Margin.
d) Stretching.
e) Default-margin.
U2 - Tecnologias para programação web56
Referências
SANDERS, Bill. Smashing HTML5. São Paulo: Bookman, 2012.
BASHAM, Bryan; SIERRA, Kathy; BATES, Bert. Use a cabeça!: Servlets & JSP. 2. ed. Rio de 
Janeiro: Alta Books, 2008.
Unidade 3
O padrão MVC
Nesta unidade estudaremos o padrão de projeto MVC, 
exploraremos os conceitos relacionados a padrões de projetos e 
frameworks utilizados na implementação de aplicações web e que a 
cada dia se consolidam mais nas práticas de desenvolvimento sendo 
largamente utilizados nas principais tecnologias para este ambiente. 
Objetivos de aprendizagem
Como resolver problemas relacionados à implementação de soluções 
web? Com certeza teremos uma série de desafios que deverão ser enfrentados 
e que teremos que solucionar, mas graças ao exponencial crescimento de 
tecnologias, linguagens, arquiteturas e componentes em aplicação nos projetos 
de desenvolvimento web temos uma forma interessante de propor soluções, 
os padrões de projeto vêm em resposta a uma série de situações já enfrentadas 
por outras pessoas, e que, com soluções criativas, acabaram criando padrões 
largamente divulgados e utilizados como soluções para estes desafios. 
Seção 1 | Padrões de projeto
Um dos principais padrões utilizados no desenvolvimento de aplicações web 
será o foco do nosso estudo nesta seção, vamos entender o objetivo geral desse 
padrão e a função de cada uma de suas camadas, incluindo comentários sobre 
frameworks que implementam esse padrão. 
Seção 2 | O padrão MVC
Paulo Henrique Terra
Introdução à unidade
Vários aspectos relacionados à implementação de uma aplicação 
web favorecem a utilização de padrões de projetos já empregados no 
desenvolvimento de software, entre eles podemos citar a proposta 
de solução para organização de código e solução arquitetural 
lógica para separar em camadas as regras de negócio disponíveis 
em classes, métodos e/ou funções das interfaces que formarão o 
front-end responsável pela interação com o usuário final. Podemos 
citar ainda fatores relacionados à qualidade do projeto e do produto 
final de software, como a manutenibilidade proporcionada pela 
independência funcional dos módulos criados separadamente, 
cada um encapsulando sua respectiva responsabilidade, evitando 
acoplamentos desnecessários entre componentes proporcionando 
uma alta coesão desses componentes que, mais tarde, podem sofrer 
manutenção. 
A facilidade em encontrar soluções baseadas em padrões de 
projeto como o MVC, disponível e com grande qualidade nos 
principais motores de busca na interbet. e a vasta literatura contendo 
referências renomadas no assunto, gera outro fator motivacional para 
aplicação destas soluções. Pense que você não precisará “reinventar 
a roda” para organizar a estrutura lógica de sua aplicação, incluindo a 
criação do código de seu projeto web, há também grande oferta de 
mão de obra com o conhecimento em padrões comuns de projeto 
que facilitam a integração de desenvolvedores em uma equipe de 
desenvolvimento para esse tipo de projeto, até mesmo o fato da 
necessidade de capacitação de desenvolvedores utilizando padrões de 
projeto é um fator relevante a ser considerado devido à curva rápida de 
aprendizagem desses conceitos. 
Portanto, conhecer os princípios que norteiam os padrões básicos 
é de essencial importância para desenvolvedores de software, estes 
princípios darão base sólida para a tomada de decisão e utilização de 
frameworks que “concretizam” e podem ser aplicados para facilitar o 
emprego destes conceitos na criação de soluções de software. 
Sendo assim, nas seções desta unidade vamos explorar padrões de 
projeto, frameworks e, principalmente, o padrão MVC. Vamos construir 
a base do conhecimento destes conceitos para conseguirmos ganhar 
mais produtividade na construção de nossas aplicações web. 
Boa leitura!
U3 - O padrão MVC60
Seção 1
Padrões de projeto
Introdução à seção
A compreensão acerca de soluções pré-estabelecidas permite 
uma implementação de software com mais reutilização de códigos 
e componentes. Usualmente implementamos aplicações web 
utilizando linguagens de programação orientadas a objetos ou 
baseadas nos princípios deste paradigma, assim, uma das propostas 
deste paradigma é o reúso, para potencializar uma programação mais 
eficiente. Vamos abordar dois temas importantes para este propósito, 
o primeiro relacionado a padrões de projeto reforçará a ideia do uso 
de soluções comuns a um conjunto de situações, o segundo terá foco 
na concretização destas soluções comuns no formato de frameworks. 
Iniciaremos os nossos estudos e potencializaremos também os nossos 
conhecimentos. 
1.1 Design patterns
Design patterns ou simplesmente padrões projeto são soluções 
aplicadas a um grupo comum de problemas que podem ser adaptadas 
a uma série de situações enfrentadas no processo de implementação 
de aplicações web. 
Um padrão de projeto descreve um problema comum que 
ocorre regularmente no desenvolvimento de software e 
descreve então uma solução geral para esse problema 
que pode ser utilizada em muitos contextos diferentes. 
Em geral, para padrões de projeto de software, a solução é 
uma descrição de um pequeno conjunto de classes e suas 
interações (BARNES, 2004, p. 325).
Conforme definido por Barnes (2004), os padrões de projeto 
podem nos ajudar de duas maneiras, ao desenvolver uma aplicação 
de software. Inicialmente documentam boas soluções para problemas, 
de modo que essas soluções possam ser reutilizadas em problemas 
U3 - O padrão MVC 61
semelhantes, assim, a reutilização não está no nível de código-
fonte criado em uma determinada linguagem, mas sim, no nível das 
estruturas das classes. Segundo, padrões de projeto são nomeados e 
ajudam os designers de software em conversas sobre seus designs, isso 
permite economizar detalhes de uma explicação, assim, a linguagem 
padrão introduzida por padrões de projeto estabelece outro nível de 
abstração, um que permite lidar com a complexidade até em sistemas 
mais intrincados. 
Podemos citar como benefícios na utilização de padrões de 
projetos o fato de fornecerem soluções testadas e aprovadas, tornando 
as aplicações mais fáceis de entender e manter, além do fato de 
manter o desenvolvimento de módulos coesos e permitir, ainda, que a 
comunicação entre os membros do time de desenvolvimento de projeto 
torne-se mais eficiente. Apesar de todos os benefícios vale ressaltar 
que os padrões de projetos não são “receitas de bolo” prontas a serem 
utilizadas. Elas devem ser avaliadas e adaptadas à realidade do projeto 
em desenvolvimento, caso esses padrões sejam mal implementados, 
eles podem tornar-se um dificultador no entendimento do projeto, 
causando até mesmo a criação de código desnecessário, assim, é 
preciso bom senso, será necessário implementar a solução e validar o 
seu funcionamento, uma vez que ela se aplique, ela ainda poderá ser 
otimizada, ajustando-se para tratar as deficiências do projeto, para isso, 
vale o conhecimento geral sobre o projeto e o seu funcionamento.
1.2 Estrutura de um padrão
Os padrões são descritos com informações mínimas relativas 
à estrutura de classes e devem incluir uma descrição do problema 
resolvido por este padrão, além das forças contra ou a favor da 
utilização deste, o template básico deve possuir no mínimo:
 Nome: deve descrever o padrão de maneira conveniente. 
 Descrição: em relação ao problema que o padrão pretende 
solucionar (normalmente dividida em seções como intensão, 
motivação, aplicabilidade).
 Consequências: do uso do padrão, que deve prever resultados 
e compensações. 
1.3 Tipos de padrões de projeto
Conforme definido por Gamma et al. (2000), os padrões de 
projeto foram classificados em três tipos: padrões de criação,padrões 
estruturais e padrões comportamentais. 
U3 - O padrão MVC62
Os padrões de criação têm como objetivo abstrair o processo de 
criação de objetos, ou seja, a sua instanciação. Assim, eles ajudam um 
sistema a tornar-se independente, a despeito de como seus objetos 
são criados, compostos e representados. Basicamente, utiliza-se a 
herança para variar a classe que é instanciada. Por exemplo, o padrão 
Singleton garante que haverá somente uma única instância para 
uma determinada classe e esta instância é acessível de forma global 
e uniforme. Outros padrões de criação são: Abstract Factory, Builder, 
Factory Method e Prototype. 
Os padrões estruturais dão ênfase em como as classes e objetos 
são compostos, ou seja, preocupa-se com sua estrutura, o objetivo 
destes padrões é reduzir a preocupação do desenvolvedor em como 
realizar o relacionamento entre unidades, para isso, propõe soluções 
de design de sistemas, o padrão Adapter, por exemplo, permite que 
dois objetos se comuniquem, mesmo com interfaces incompatíveis, 
assim, uma nova classe é criada para adaptar uma interface a outra. 
Por fim, os padrões comportamentais atuam sobre como 
responsabilidades são atribuídas às entidades, o que afeta diretamente 
o comportamento destas, o objetivo é facilitar a comunicação entre 
os objetos por meio da distribuição de responsabilidades, garantindo 
a coesão. Um exemplo de padrão comportamental é o padrão State 
que permite um objeto alterar o seu comportamento quando seu 
estado interno muda, outros padrões comportamentais são: Strategy, 
Template Method e Visitor. 
Percebemos que existem padrões com objetivos distintos, 
portanto, será necessário, como já comentamos anteriormente, uma 
compreensão ampla sobre cada um desses padrões para que de fato 
se tornem soluções e não mais conceitos complexos que podem 
atrapalhar o desenvolvimento. 
O livro Padrões de projeto, escrito por Gamma et al., em sua versão 
original de 1995, é referência no estudo desses padrões. Nesta obra, 
encontramos os detalhes sobre cada um dos padrões comentados 
anteriormente, tais padrões ficaram conhecidos como padrões GoF 
(Gang of Four), isto se deve ao fato do livro ter sido elaborado por 
quatro autores que definiram os padrões.
Na Figura 3.1, podemos ver uma imagem muito difundida pela 
internet e demonstra de maneira sintética a distribuição dos padrões 
de projeto, conforme o seu tipo e propósito.
U3 - O padrão MVC 63
Fonte: César (2017).
Figura 3.1 | Estrutura do MVC
Para saber mais
Leia o material indicado: Componentes, Frameworks e Design Patterns. 
Disponível em: <http://www.dca.fee.unicamp.br/~gudwin/ftp/ea976/
Patterns.pdf>. Acesso em: 1 nov. 2017.
Questão para reflexão
Então, quer dizer que existem padrões para tipos distintos de problemas 
e que podem ser utilizados em resposta às dificuldades enfrentadas em 
projeto de desenvolvimento web? Como vimos nesta seção, a resposta 
é sim, porém, para que os padrões não se tornem mais um problema, é 
necessário entender a sua estrutura, isto inclui o tipo de problema que 
pretende solucionar. 
Atividades de aprendizagem
1. O padrão de projetos GoF define 23 padrões divididos em três tipos, sendo: 
padrões de criação, padrões de estrutura e padrões de comportamento. 
Assinale a alternativa que possui somente padrões de estrutura.
U3 - O padrão MVC64
a) Brigde, Decorator e Visitor. 
b) Brigde, Decorator e Builder.
c) Decorator, Facade e Singleton.
d) Decorator, Facade e Memento.
e) Brigde, Decorator e Facade.
2. Cada tipo de padrão de projeto GoF possui ênfase em objetivo(s) 
distinto(s). Assinale a questão que melhor define o(s) objetivo(s) dos tipos de 
padrões de projeto de comportamento:
a) O objetivo destes padrões é reduzir a preocupação do desenvolvedor em 
como realizar o relacionamento entre unidades, para isso, propõe soluções 
de projeto de sistemas.
b) O objetivo destes padrões é reduzir a preocupação do desenvolvedor em 
como realizar o relacionamento entre unidades, para isso, propõe soluções 
de design de sistemas.
c) O padrão dos tipos de projeto de comportamento tem como objetivo 
facilitar a comunicação entre objetos por meio da distribuição das 
responsabilidades entre os objetos. 
d) Padrões do tipo comportamento ajudam um sistema a tornar-se 
independente, a despeito de como seus objetos são criados, compostos e 
representados por meio da abstração do processo de criação de objetos.
e) O padrão dos tipos de projeto de comportamento tem como objetivo 
facilitar a comunicação entre objetos por meio separação da lógica de 
programação da persistência de dados.
U3 - O padrão MVC 65
Seção 2
O padrão MVC
Introdução à seção
A organização arquitetural de uma aplicação é dos desafios que 
devem ser superados em um projeto de desenvolvimento, a aplicação 
dos conceitos baseados no padrão MVC possibilitará a aplicação de 
soluções eficientes e que presam pela separação da lógica de negócios 
da camada de apresentação por meio da organização do código 
em camadas. Temos que levar em consideração o fato de que, ao 
desenvolver para web, também temos outros componentes envolvidos 
que foram elaborados de maneira a coexistir de modo harmônico com 
as camadas e suas respectivas funções estabelecidas no padrão MVC. 
Iniciaremos os nossos estudos relacionados a este padrão e a estes 
componentes que permitem a sua aplicação.
2.1 Padrões de arquitetura
Você pode pensar em um padrão de arquitetura como 
uma descrição abstrata, estilizada, de boas práticas 
experimentadas e testadas em diferentes tipos de sistemas 
e ambientes. Assim, um padrão de arquitetura deve 
descrever uma organização de sistema bem-sucedida em 
sistemas anteriores. Deve incluir informações de quando o 
uso de desse padrão é adequado, e seus pontos fortes e 
fracos (SOMMERVILLE, 2011, p. 108).
Podemos perceber que, pela definição anterior de Sommerville 
(2011), há uma grande semelhança entre os conceitos definidos por 
Gamma et al. (2000) e Barnes (2004), vistos na seção anterior desta 
unidade, sobre definição de padrões de projeto. Portanto, podemos 
concluir que padrões, em sua definição mais ampla, descreve um 
problema que ocorre inúmeras vezes em um determinado contexto, 
e descreve ainda a solução para este problema, de modo que essa 
solução possa ser utilizada em situações distintas, logo, sejam os 
padrões do tipo criacional, estrutural ou comportamental, ou ainda, 
U3 - O padrão MVC66
padrões arquiteturais definidos em outras áreas da engenharia de 
software, eles colaborarão para a solução de problemas de projetos 
de software. 
Pensando em um padrão de arquitetura, conforme Sommerville 
(2011), como uma descrição abstrata, estilizada, de boas práticas já 
utilizadas e testadas em diferentes ambientes e sistemas, então, um 
padrão de arquitetura deve descrever uma organização de sistemas 
bem-sucedida em outros sistemas, incluindo informações de quando 
esse padrão é adequado, seus pontos fortes e fracos, bem como é 
feito em um padrão de projeto.
2.2 Padrões de arquitetura comuns
É comum a utilização de vários conceitos definidos por arquiteturas 
vastamente conhecidas em projetos de software para web, entre elas 
a arquitetura cliente-servidor, arquitetura de repositório, arquitetura em 
camadas entre outros. Há uma variedade de arquiteturas propostas 
como solução conceitual para uma série de situações que necessitam 
de organização sistêmica, seja em nível de estruturação de código até 
a condição de equipamentos físicos em que o sistema proposto estará 
hospedado. 
Estes padrões atuam em visões distintas, mas complementares e 
que devem ser consideradas na etapa de projeto técnico do processo 
de desenvolvimento do software, devemos considerar algumas visões 
fundamentais nesta etapa e que são essenciais para a evolução da etapa 
de desenvolvimento, conforme exposto por Kruchten (1995), o modelo 
de visão 4 + 1 de arquitetura de software sugere que deve haver quatro 
visões fundamentais de arquitetura relacionadas, conforme segue: