Aula 01 (1)

Prévia do material em texto

Aula 01
Unidade 1: Introdução ao desenvolvimento web, conceitos essenciais, 
evolução da web e diferenciação entre front-end e back-end.
Curso: Bacharelado em Ciência da Computação | Turma: CC1
Disciplina: Introdução ao Desenvolvimento Web
Professor: Edinilson da Silva Vida
Roteiro
1. Objetivo
2. Situação-problema
3. Leitura específica
4. Vamos pensar um pouco
5. Aprofundando o conhecimento
6. Resumo da aula
7. Atividade verificadora de aprendizagem
8. Tema da próxima aula
9. Referências
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 2
Objetivo
• Ao final desta aula, os alunos deverão ser capazes de:
̶ Identificar os conceitos essenciais do desenvolvimento web, reconhecendo sua 
importância e aplicabilidade na construção de sites e aplicações.
̶ Descrever a evolução da web, analisando marcos históricos e avanços 
tecnológicos que influenciaram o desenvolvimento de aplicações web.
̶ Comparar as características do front-end e do back-end, diferenciando suas 
funções, tecnologias e responsabilidades no desenvolvimento de aplicações 
web.
̶ Classificar tecnologias e ferramentas utilizadas no desenvolvimento front-end 
e back-end, justificando sua aplicabilidade em diferentes contextos de 
desenvolvimento web.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 3
Situação-problema
• Você foi contratado como consultor de tecnologia por um pequeno 
empresário que deseja expandir seu negócio para o mundo digital.
̶ Ele possui uma loja física de artesanato e quer criar um site para vender seus 
produtos online.
̶ No entanto, ele não tem conhecimento sobre desenvolvimento web e está confuso 
com os termos e tecnologias envolvidas no processo.
̶ Ao conversar com ele, você percebe que ele não sabe a diferença entre front-end e 
back-end, não entende como um site funciona e tem dúvidas sobre quais etapas e 
tecnologias são essenciais para construir uma aplicação web eficiente.
̶ Agora, sua missão é explicar para o empresário como funciona o desenvolvimento 
web, destacando a evolução da web e a importância da separação entre front-end e 
back-end.
• Se você tivesse que explicar para alguém sem conhecimento técnico como funciona um site 
moderno, desde sua criação até sua exibição no navegador, como descreveria o papel do 
front-end e do back-end?
• Quais tecnologias e conceitos são essenciais nesse processo?
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 4
Leitura específica
• Bibliografia recomendada:
̶ FOROUZAN, Behrouz A; MOSHARRAF, Firouz. Redes de computadores: uma 
abordagem top-down. Porto Alegre: AMGH, 2013.
̶ RICHARDSON, Leonard; AMUNDSEN, Mike; RUBY, Sam. RESTful web APIs: 
services for a changing world. Sebastopol: O’Reilly Media, 2013.
̶ RICHARDSON, Leonard; RUBY, Sam. RESTful web services. Sebastopol: O’Reilly 
Media, 2007.
̶ ZAMMETTI, Frank. Modern full-stack development: using TypeScript, React, 
Node.js, Webpack, Python, Django, and Docker. 2. ed. [S.l.]: Apress, 2022. E-
book.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 5
A World Wide Web
• A World Wide Web foi idealizada por 
Tim Berners-Lee em 1989, no CERN 
(Organização Europeia para Pesquisa 
Nuclear).
̶ Objetivo de permitir que pesquisadores 
de diferentes partes da Europa pudessem 
compartilhar e acessar as pesquisas uns 
dos outros.
• A web comercial começou a crescer 
no início da década de 1990.
̶ Hoje, a web é um vasto repositório de 
informações, com documentos, 
chamados de páginas web, distribuídos 
globalmente, e relacionados entre si por 
meio de links.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 6
A World Wide Web
• Dois conceitos-chave explicam o crescimento da web: distribuição e 
vinculação.
̶ A distribuição facilita a expansão contínua da web, pois cada servidor ao redor do 
mundo pode adicionar novas páginas sem sobrecarregar a infraestrutura existente.
̶ A vinculação possibilita que uma página web faça referência a outra, mesmo que 
esteja armazenada em um servidor distante.
• A tecnologia que permite essa vinculação é chamada de hipertexto, desenvolvida muito antes 
da Internet, para que um sistema recuperasse automaticamente outro documento vinculado.
• Hoje, o conceito evoluiu para hipermídia.
• Para incluir não apenas documentos de texto, mas também imagens, áudio e vídeo.
• Atualmente, a web vai além da simples recuperação de documentos.
̶ Usada para e-commerce, jogos online, e para acessar conteúdo de rádio e televisão.
• Permitindo que os usuários assistam ou ouçam quando preferirem, sem estarem presos aos 
horários de transmissão.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 7
A World Wide Web
• O WWW atual funciona como um serviço distribuído de 
cliente-servidor, no qual um cliente, usando um navegador, 
pode acessar um serviço hospedado em um servidor.
̶ Esse serviço é distribuído entre diversos locais, chamados de sites.
̶ Cada site contém um ou mais documentos, conhecidos como páginas 
web.
̶ Algumas dessas páginas possuem links que direcionam para outras 
páginas, seja dentro do mesmo site ou em sites diferentes.
• Uma página web pode ser simples, sem links para outras 
páginas, ou composta, contendo um ou mais links que 
redirecionam para outros documentos.
̶ Cada página web, independentemente de ser simples ou composta, é 
armazenada como um arquivo com um nome e um endereço específico.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 8
Introdução à evolução da web
• A web passou por grandes transformações desde sua criação.
• Inicialmente, os sites eram estáticos e serviam apenas para exibição 
de informações.
̶ Com o tempo, surgiram interatividade, redes sociais e inteligência artificial.
• Essas mudanças influenciaram a forma como os usuários interagem 
com a Internet e como os desenvolvedores criam aplicações web.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 9
Introdução à evolução da web
• A Internet evoluiu para atender às 
necessidades crescentes dos usuários:
̶ Web 1.0: sites estáticos, pouca 
interatividade.
̶ Web 2.0: conteúdo dinâmico, redes 
sociais e colaboração.
̶ Web 3.0: inteligência artificial, 
blockchain, descentralização.
• Novos paradigmas influenciam a 
forma como desenvolvemos 
aplicações web.
• Estar atualizado com essas mudanças 
é essencial para criar soluções 
eficientes e seguras.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 10
O surgimento da web (Web 1.0)
• A Web 1.0 surgiu no início dos anos 90 com o cientista Tim Berners-
Lee.
̶ Criada para compartilhar informações acadêmicas e científicas.
̶ Páginas estáticas em HTML, sem interatividade.
̶ A navegação era limitada, sem personalização para usuários.
̶ Tecnologias-chave: HTML, HTTP, URLs e navegadores básicos.
• Essa fase definiu a estrutura básica da Internet, ainda usada hoje.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 11
A Web 2.0: interatividade e redes sociais
• No início dos anos 2000, surgiu a Web 2.0, trazendo colaboração e 
interação.
̶ Usuários passaram de consumidores a criadores de conteúdo.
̶ Surgiram redes sociais como Facebook, YouTube e Twitter.
̶ Introdução de Ajax permitiu páginas mais dinâmicas.
• Tecnologias-chave: JavaScript, CSS, PHP, MySQL, APIs.
• A web se tornou um ambiente de compartilhamento, colaboração e 
personalização.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 12
O crescimento do mobile e da web 
responsiva
• Com a popularização dos 
smartphones, os sites precisaram se 
adaptar.
̶ Surgiu o conceito de web responsiva para 
ajustar páginas a diferentes tamanhos de 
tela.
̶ O HTML5 e o CSS3 trouxeram recursos 
visuais avançados.
̶ O mobile first se tornou um padrão de 
design.
• Tecnologias-chave: HTML5, CSS3, 
Bootstrap, media queries.
• A acessibilidade e experiência do 
usuário ganharam mais importância.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 13
Web 3.0: a Internet inteligente
• A Web 3.0 introduziu a inteligência artificial na experiência digital.
̶ Busca por mais personalização e descentralização da informação.̶ IA e machine learning tornam os sistemas mais intuitivos.
̶ Blockchain e criptomoedas começam a ser aplicados na web.
• Tecnologias-chave: IA, blockchain, web semântica, big data.
• A Internet passou a aprender e se adaptar aos usuários.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 14
O impacto das APIs na evolução da Web
• APIs (Application Programming Interfaces) permitiram 
integração entre serviços.
̶ Exemplo: API do Google Maps incorporada em sites.
̶ Web services facilitaram comunicação entre sistemas 
diferentes.
̶ REST e GraphQL trouxeram novas abordagens para 
desenvolvimento web.
• Tecnologias-chave: REST, SOAP, GraphQL, JSON, XML.
• As APIs tornaram a web mais dinâmica e 
interconectada.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 15
A ascensão do cloud computing
• O armazenamento e processamento de dados migraram para a 
nuvem.
̶ Aplicações web passaram a utilizar serviços como AWS, Azure e Google Cloud.
̶ Redução de custos operacionais e maior escalabilidade.
̶ Facilitação da colaboração em tempo real (exemplo: Google Docs).
• Tecnologias-chave: AWS, Firebase, Docker, Kubernetes.
• O cloud computing revolucionou a forma como as aplicações são 
desenvolvidas e escaladas.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 16
Web 4.0 e o futuro da Internet
• O futuro da web caminha para maior automação e personalização.
̶ A Web 4.0 busca maior integração entre humanos e máquinas.
̶ Uso de IoT (Internet das Coisas) para conectar dispositivos.
̶ Interfaces de voz e assistentes virtuais mais inteligentes.
• Tecnologias-chave: IoT, 5G, realidade aumentada, IA avançada.
• O desenvolvimento web continuará evoluindo com novas tecnologias 
e demandas.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 17
Introdução ao desenvolvimento web
• O desenvolvimento web envolve a 
criação e manutenção de sites e 
aplicações acessíveis pela Internet.
• Utiliza diferentes linguagens, 
frameworks e tecnologias para 
estruturar, estilizar e tornar uma 
aplicação interativa.
• O processo envolve tanto a parte 
visual (front-end) quanto a lógica e os 
dados (back-end).
• Com a evolução da web, novos 
conceitos surgiram para melhorar a 
experiência do usuário, a 
acessibilidade e a segurança.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 18
Importância do desenvolvimento web
• O impacto da web no mundo moderno:
̶ Empresas e profissionais dependem de sites para visibilidade e negócios.
̶ Aplicações web permitem acesso remoto a serviços essenciais.
̶ A usabilidade e segurança impactam diretamente a confiança dos usuários.
̶ A web está em constante evolução, exigindo atualização contínua dos 
profissionais.
• Dominar o desenvolvimento web abre portas para diversas 
oportunidades no mercado de tecnologia.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 19
Introdução às tecnologias de 
desenvolvimento web
• O desenvolvimento web é dividido em front-end e back-end, cada 
um com ferramentas específicas.
̶ A escolha da tecnologia depende do contexto do projeto, desempenho 
desejado e escalabilidade.
• Uma aplicação web moderna é composta por diferentes partes que 
colaboram para oferecer uma interface amigável e um back-end 
eficiente.
̶ Estes itens são essenciais para o funcionamento completo de uma aplicação 
web.
• A interação entre essas camadas permite a criação de sites dinâmicos 
e funcionais.
̶ Entender essa estrutura é essencial para desenvolver aplicações robustas e 
escaláveis.
• Essa estrutura é interligada por protocolos de comunicação como 
HTTP (ou APIs RESTful) são usadas para padronizar a troca de dados 
entre as diferentes partes da aplicação.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 20
Estrutura de uma aplicação web
• A estrutura básica de uma aplicação web segue o modelo cliente-servidor, 
onde:
• Front-end: é a interface gráfica que o usuário interage diretamente, geralmente 
desenvolvida com tecnologias como HTML, CSS e JavaScript.
• O front-end é responsável pela experiência visual e pela interação com o usuário.
• Back-end: é a lógica de negócios, onde os dados são processados e armazenados.
• Ele é responsável por receber as requisições do front-end, realizar operações no banco de 
dados, e devolver as respostas.
• Tecnologias como Node.js, PHP, Python (Django) são amplamente utilizadas.
• Banco de dados: parte fundamental do back-end, é onde os dados da aplicação são 
armazenados de forma estruturada e podem ser consultados, inseridos ou 
modificados.
• Exemplos incluem MySQL, PostgreSQL, e MongoDB.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 21
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 22
Figura 1: Componentes de uma aplicação web
Fonte: https://bit.ly/3XB3YlB
Aplicações práticas do desenvolvimento web
• O desenvolvimento web é aplicado em 
diversas áreas:
̶ Sites institucionais: empresas e 
organizações.
̶ E-commerce: lojas virtuais e marketplaces.
̶ Redes sociais: plataformas interativas e de 
compartilhamento.
̶ Web apps: aplicações acessadas 
diretamente pelo navegador.
• Tecnologias como PWA (Progressive Web 
Apps) tornam as aplicações web mais 
eficientes.
• Conhecer as tendências da web permite 
desenvolver projetos inovadores e 
competitivos.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 23
Como um site funciona?
• O processo de carregamento de uma página web segue algumas 
etapas:
1. O usuário digita um endereço (URL) no navegador.
2. O navegador envia uma requisição ao servidor.
3. O servidor processa a solicitação e retorna os arquivos necessários.
4. O navegador renderiza o site usando HTML, CSS e JavaScript.
• Protocolo HTTP/HTTPS define a comunicação entre cliente e servidor.
• Compreender esse fluxo ajuda a otimizar sites para maior velocidade 
e segurança.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 24
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 25
Figura 2: Acesso a arquivos de páginas web
Fonte: Forouzan et al. (2013, p. 45)
O que é front-end?
• O front-end é a parte visível de um site 
ou aplicação.
• Responsável por exibir conteúdos e 
interagir com o usuário.
• Um front-end bem projetado melhora a 
usabilidade e a experiência do usuário.
̶ O foco do front-end é proporcionar uma 
experiência visual agradável e responsiva.
• Construído com três tecnologias 
principais:
̶ HTML: define a estrutura da página.
̶ CSS: cuida da aparência e do layout.
̶ JavaScript: adiciona dinamismo e 
interatividade.
̶ Frameworks populares: React, Vue.js e 
Angular.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 26
Frameworks e bibliotecas do front-end
• A escolha da tecnologia depende do projeto e da necessidade do 
usuário.
• Para acelerar o desenvolvimento, utilizamos frameworks e bibliotecas:
̶ React.js: criado pelo Facebook, permite desenvolvimento modular baseado 
em componentes.
̶ Vue.js: framework progressivo, mais leve e fácil de aprender.
̶ Angular: criado pelo Google, ideal para aplicações empresariais escaláveis.
̶ Bootstrap: framework CSS para estilização rápida e responsiva.
• Esses frameworks aumentam a produtividade e facilitam a 
manutenção do código.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 27
O que é back-end?
• O back-end gerencia a lógica do sistema 
e a comunicação com o banco de dados.
̶ Processa requisições do usuário e retorna 
respostas adequadas.
• O back-end é crucial para garantir 
segurança, eficiência e escalabilidade.
̶ Funciona nos bastidores para fornecer 
informações ao front-end.
• Principais tecnologias utilizadas:
̶ Linguagens: PHP, Python, Node.js, Java.
̶ Frameworks: Express.js, Laravel, Django, 
Spring.
̶ APIs: REST, GraphQL para comunicação 
entre sistemas.
̶ Bancos de dados: MySQL, PostgreSQL, 
MongoDB.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 28
Frameworks e ferramentas do back-end
• O back-end utiliza linguagens para processar dados e executar regras 
de negócio:
̶ Node.js: executa JavaScript no servidor, ideal para aplicações escaláveis.̶ Python: fácil de aprender e amplamente usado em inteligência artificial e web.
̶ PHP: popular para desenvolvimento de sites dinâmicos.
̶ Java: excelente para sistemas robustos e corporativos.
̶ C#: indicado para aplicações empresariais na plataforma Microsoft.
• A escolha da linguagem depende da complexidade do sistema e dos 
requisitos do projeto.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 29
Frameworks e ferramentas do back-end
• Os frameworks ajudam a padronizar o código e acelerar o 
desenvolvimento:
̶ Express.js (Node.js): framework minimalista para APIs e microsserviços.
̶ Django (Python): segurança e rapidez para desenvolvimento web.
̶ Spring Boot (Java): modularidade e escalabilidade para grandes sistemas.
̶ Laravel (PHP): estrutura elegante e produtiva para aplicações web.
̶ .NET Core (C#): desenvolvimento eficiente para aplicações empresariais.
• A escolha do framework depende da necessidade de escalabilidade, 
segurança e velocidade do projeto.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 30
Segurança no front-end e back-end
• Segurança é um aspecto fundamental no 
desenvolvimento web.
• No front-end:
̶ Evitar exposição de dados sensíveis no 
código-fonte.
̶ Utilizar HTTPS para comunicação segura.
̶ Implementar políticas de CORS para evitar 
ataques de origem cruzada.
• No back-end:
̶ Implementar autenticação segura (JWT, 
OAuth).
̶ Proteger o banco de dados contra SQL 
Injection.
̶ Criptografar dados sensíveis como senhas.
• A segurança deve ser planejada desde o 
início do desenvolvimento.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 31
Bancos de dados no desenvolvimento web
• O banco de dados armazena e gerencia as informações da aplicação.
̶ O back-end interage com o banco de dados para armazenar e recuperar informações.
• Bancos de dados relacionais (SQL):
̶ MySQL: popular para sites e e-commerces.
̶ PostgreSQL: avançado, usado em grandes aplicações.
̶ SQL Server: integrado com tecnologias Microsoft.
• Bancos de dados NoSQL:
̶ MongoDB: armazena documentos em JSON, ideal para aplicações flexíveis.
̶ Firebase: banco de dados em tempo real, usado em apps móveis e web.
• A escolha entre SQL e NoSQL depende do volume de dados e do modelo da 
aplicação.
̶ Um banco de dados bem estruturado melhora o desempenho e a segurança dos 
sistemas web.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 32
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 33
Tabela 1: Características do front-end e back-end
Fonte: Elaborada pelo autor (2025)
Característica Front-end Back-end
Visibilidade Usuário final vê Executado no servidor
Responsabilidade Interface e interatividade Lógica de negócios e banco de dados
Tecnologias principais HTML, CSS, JavaScript PHP, Python, Node.js, Java
Segurança Controle limitado Controle total de autenticação e acesso
Execução No navegador No servidor
Full stack development
• Um desenvolvedor full stack 
trabalha tanto com front-end 
quanto com back-end.
• Habilidades necessárias:
̶ Conhecimento em HTML, CSS, 
JavaScript (front-end).
̶ Experiência com Node.js, Python, 
PHP ou Java (back-end).
̶ Familiaridade com bancos de dados 
relacionais e NoSQL.
̶ Entendimento de segurança, APIs e 
servidores.
• Full stack é uma opção versátil para 
startups e projetos menores.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 34
Ferramentas para controle de versão e 
deploy
• O controle de versão e a automação de deploy são essenciais para 
desenvolvimento web moderno.
̶ Git e GitHub/GitLab/Bitbucket: permitem versionamento e colaboração.
̶ Docker: criação de ambientes isolados e padronizados para aplicações.
̶ CI/CD (Integração e Entrega Contínua): ferramentas como Jenkins, GitHub 
Actions, Travis CI automatizam testes e deploys.
̶ Heroku, Vercel, Netlify: plataformas para hospedar aplicações web 
rapidamente.
• Essas ferramentas garantem colaboração eficiente e estabilidade no 
desenvolvimento.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 35
Integração entre front-end e back-end
• Envolve a comunicação eficiente entre a interface gráfica 
do usuário e o servidor que processa as informações.
• O front-end envia requisições ao back-end para realizar 
operações como consultar, criar, atualizar e deletar dados, 
enquanto o back-end processa essas requisições e retorna 
respostas.
̶ A boa integração garante que os dados fluam de maneira 
eficiente entre o front-end e o back-end.
̶ Proporcionando uma experiência de usuário rápida, segura e 
estável.
• Exemplo prático:
̶ Usuário preenche um formulário no front-end.
̶ O back-end processa os dados e os salva no banco de dados.
̶ O front-end recebe a resposta do servidor e exibe o resultado.
36Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 37
Figura 3: Representação do back-end e do front-end
Fonte: https://bit.ly/3XTk2Ra
Integração entre front-end e back-end
• Principais recursos ou tecnologias:
̶ APIs RESTful: são interfaces que permitem a comunicação entre sistemas de forma 
padronizada, usando os métodos HTTP (GET, POST, PUT, DELETE).
̶ GraphQL: alternativa ao REST, permite buscar apenas os dados necessários.
̶ SOAP: mais utilizado em serviços empresariais.
̶ Ajax e Fetch API: no front-end são usadas para fazer requisições assíncronas, 
permitindo que a página web atualize seu conteúdo sem recarregar completamente.
̶ Autenticação e segurança: pode ser feita com tokens JWT ou sessões, garantindo que 
somente usuários autorizados possam acessar certos dados ou funcionalidades.
̶ CORS: configura-se o CORS (Cross-Origin Resource Sharing) no back-end para permitir 
que o front-end (domínio ou porta diferente) faça requisições para a API.
̶ JSON e XML: formatos comuns para troca de dados.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 38
Arquitetura monolítica e de microsserviços
• A arquitetura monolítica e a de 
microsserviços são abordagens distintas no 
desenvolvimento de software.
• A arquitetura monolítica é caracterizada por 
um sistema único e integrado, onde todos os 
componentes (interface, lógica de negócio e 
banco de dados) estão interligados.
• Já a arquitetura de microsserviços fragmenta 
o sistema em pequenos serviços 
independentes, que se comunicam via APIs.
• A escolha entre monólito e microsserviços 
depende do contexto.
• Sistemas pequenos podem se beneficiar do 
monolítico, enquanto aplicações complexas e 
escaláveis tendem a se beneficiar dos 
microsserviços.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 39
Arquitetura monolítica
• É um estilo tradicional de desenvolvimento de software onde a 
aplicação inteira é construída como uma única unidade coesa.
̶ Todos os componentes da aplicação são parte de um único projeto e são 
executados em um único processo.
• Unidade única: toda a aplicação é executada como uma única entidade, onde todos os 
módulos (como autenticação, processamento de pagamentos, gerenciamento de 
produtos etc.) compartilham o mesmo código e recursos.
• Desenvolvimento simplificado: é mais fácil começar o desenvolvimento com arquitetura 
monolítica, pois tudo está em um único repositório e ambiente.
• Desempenho otimizado: dentro do mesmo processo, as chamadas entre os componentes 
são diretas, o que reduz latência.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 40
Arquitetura monolítica
• Desvantagens:
̶ Manutenção complexa: à medida que a aplicação cresce, o 
código torna-se difícil de manter e modificar, já que pequenas 
mudanças em uma parte podem impactar todo o sistema.
̶ Escalabilidade limitada: é difícil escalar apenas partes específicas 
da aplicação.
• Geralmente, é necessário escalar toda a aplicação, o que pode ser 
ineficiente.
̶ Deploy mais arriscado: como todas as funcionalidades estão em 
um único sistema, qualquer alteração requer o deploy da 
aplicação inteira, aumentando o risco de introduzir erros.
• A arquitetura monolítica é adequada para aplicações 
pequenas ou no estágio inicialde desenvolvimento, mas 
pode se tornar problemática à medida que a aplicação 
cresce e novas funcionalidades são adicionadas.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 41
Arquitetura de microsserviços
• É um estilo moderno de desenvolvimento de software em que a 
aplicação é dividida em serviços pequenos e independentes.
• Cada serviço é responsável por uma função específica da aplicação e 
se comunica com outros serviços por meio de APIs ou mensagens.
̶ Serviços independentes: cada microsserviço é uma aplicação pequena, 
autônoma e dedicada a uma funcionalidade específica (um serviço para 
pagamentos, outro para gerenciamento de usuários etc.).
̶ Desenvolvimento e deploy independentes: equipes podem desenvolver, 
testar e fazer o deploy de cada serviço de forma independente, sem impactar 
o funcionamento dos outros serviços.
̶ Escalabilidade seletiva: é possível escalar apenas os serviços que exigem mais 
recursos, tornando a aplicação mais eficiente e econômica.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 42
Arquitetura de microsserviços
• Vantagens:
̶ Facilidade de manutenção: como cada serviço é independente, é mais fácil 
atualizar ou corrigir partes específicas da aplicação sem afetar o sistema 
inteiro.
̶ Resiliência: em caso de falha, apenas o serviço afetado pode ser interrompido, 
enquanto os demais continuam funcionando normalmente.
̶ Tecnologias diversificadas: cada microsserviço pode ser desenvolvido com a 
tecnologia mais adequada para sua função.
• Por exemplo, um serviço pode ser escrito em Python e outro em Node.js.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 43
Arquitetura de microsserviços
• Desvantagens:
̶ Complexidade: a arquitetura de microsserviços é mais 
complexa de gerenciar, pois envolve comunicação entre 
serviços, deploys separados e monitoramento de múltiplos 
sistemas.
̶ Comunicação entre serviços: a latência aumenta devido à 
comunicação via rede (APIs ou mensagens), o que pode 
impactar o desempenho se não for gerido adequadamente.
• A arquitetura de microsserviços é recomendada para 
grandes aplicações que exigem alta escalabilidade, 
flexibilidade no desenvolvimento, e uma abordagem 
mais modular.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 44
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 45
Figura 4: Diferença de arquitetura monolítica e de microsserviços
Fonte: https://bit.ly/4dfZQNs
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 46
Figura 5: Comparação: arquitetura monolítica x microsserviços
Fonte: Elaborada pelo autor (2024)
• Estrutura: aplicação única, tudo integrado em um único código.
• Escalabilidade: escala-se a aplicação inteira.
• Facilidade de implementação: inicialmente mais simples.
• Complexidade de manutenção: aumenta conforme a aplicação cresce.
• Deploy: todo o sistema deve ser implantado a cada alteração.
Arquitetura monolítica:
• Estrutura: aplicação dividida em pequenos serviços independentes.
• Escalabilidade: escala-se apenas os serviços necessários.
• Facilidade de implementação: mais complexa de configurar e 
gerenciar.
• Complexidade de manutenção: mais fácil de manter a longo prazo, 
devido à modularidade.
• Deploy: cada serviço pode ser implantado separadamente, reduzindo o 
impacto.
Arquitetura de microsserviços:
Vamos pensar um pouco
1) Uma aplicação web é composta por três camadas principais: a camada de apresentação (front-end), 
responsável pela interface com o usuário; a camada de aplicação (back-end), que processa as requisições e 
implementa a lógica de negócios; e a camada de dados, onde as informações são armazenadas e recuperadas. A 
integração entre essas camadas garante o funcionamento eficiente da aplicação. Considerando a estrutura de 
uma aplicação web com suas três camadas (apresentação, aplicação e dados), assinale qual das alternativas 
abaixo representa corretamente o papel da camada de aplicação (back-end) em um cenário onde o front-end 
envia uma requisição para salvar os dados de um formulário de cadastro.
A) A camada de aplicação processa a requisição, valida os dados enviados, aplica as regras de negócio e faz uma 
chamada para a camada de dados a fim de armazenar as informações.
B) A camada de aplicação recebe a requisição, renderiza o conteúdo da interface, e retorna diretamente os 
dados para o usuário.
C) A camada de aplicação realiza a persistência direta dos dados no banco, sem qualquer validação ou aplicação 
de regras de negócio, retornando uma confirmação de sucesso ao usuário.
D) A camada de aplicação apenas recebe a requisição e a repassa para a camada de dados, sem realizar 
qualquer tipo de processamento.
E) A camada de aplicação armazena os dados localmente e sincroniza com a camada de dados apenas quando 
solicitado pelo front-end.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 47
Vamos pensar um pouco
2) Na integração entre front-end e back-end, a troca de informações ocorre via requisições HTTP, com o front-
end enviando dados e o back-end processando e retornando as respostas. Essa comunicação precisa ser bem 
estruturada para garantir que as funcionalidades da aplicação funcionem corretamente, respeitando aspectos 
de segurança, validação e eficiência. Ao integrar o front-end com o back-end de uma aplicação web por meio de 
requisições HTTP, assinale qual das alternativas a seguir descreve corretamente o processo de integração, 
considerando os aspectos de segurança e validação envolvidos.
A) O front-end deve enviar os dados para o back-end, onde a aplicação valida as informações recebidas, aplica as 
regras de negócio, e retorna uma resposta ao front-end.
B) O front-end é responsável por validar os dados antes de enviá-los ao back-end, dispensando a necessidade de 
validação no servidor, o que torna o processo mais eficiente.
C) A troca de informações entre front-end e back-end deve ser feita diretamente com o banco de dados para 
garantir a velocidade do processo, sem passar pela lógica de negócios.
D) O back-end deve apenas retornar os dados que foram enviados pelo front-end, sem a necessidade de 
validação ou aplicação de regras de negócio, para manter a fluidez da aplicação.
E) O front-end realiza a requisição e trata diretamente a lógica de negócios, utilizando APIs externas apenas para 
o armazenamento de dados.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 48
Aprofundando o conhecimento
• Conteúdos complementares:
̶ Back-end x front-end: qual a diferença e qual área devo seguir?
• https://www.youtube.com/watch?v=gqqwnwOYpug
̶ Arquitetura de microsserviços x monolítica:
• https://www.youtube.com/watch?v=7q88mxc5uQw
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 49
https://www.youtube.com/watch?v=gqqwnwOYpug
https://www.youtube.com/watch?v=7q88mxc5uQw
Resumo da aula
• Para resumir parte do conteúdo que foi apresentado em sala, os 
alunos deverão criar um mapa mental.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 50
Atividade verificadora de aprendizagem
• Os alunos deverão realizar a seguinte atividade:
̶ Acessar a seguinte plataforma e realizar o desafio até o final:
• https://userinyerface.com
̶ Os três alunos que finalizarem a tarefa primeiro serão premiados.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 51
https://userinyerface.com/
Atividade verificadora de aprendizagem
• Atividade: Demonstração de Requisições GET, POST, PUT e DELETE via 
Postman
• Metodologia Ativa: aprendizagem baseada em experiência e mão na massa.
• Etapas da atividade:
̶ Preparação do ambiente:
• Certifique-se de que os alunos tenham acesso ao Postman: https://web.postman.co.
• Atividade prática em grupo:
• Divida os alunos em duplas ou pequenos grupos.
• Cada grupo deve executar as requisições HTTP utilizando o Postman.
• Peça para os grupos utilizarem a interface do Postman para validar as respostas.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 52
https://web.postman.co/
Atividade verificadora de aprendizagem
• Dicas:
̶ Explique que os alunos irão testardiferentes métodos de requisição HTTP nos 
seguintes endpoints da API de exemplo JSON Placeholder 
(https://jsonplaceholder.typicode.com).
• Observação: “/posts” significa o recurso, e o 1 em “/posts/1” representa /posts/{id}, 
portanto, o número de ID é 1.
• O servidor apaga os dados “alterados” automaticamente.
• É possível acessar esses URLs para visualizar os dados retornados pelo método GET 
diretamente no navegador.
• No entanto, para realizar requisições do tipo POST, PUT ou DELETE, será necessário utilizar o 
Postman.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 53
https://jsonplaceholder.typicode.com/
Atividade verificadora de aprendizagem
• Apresentação dos endpoints:
̶ GET: acessa o endpoint para buscar todos os posts. Peça aos grupos que observem o formato da resposta em JSON.
• https://jsonplaceholder.typicode.com/posts
̶ GET: acessa o endpoint para buscar apenas um post.
• https://jsonplaceholder.typicode.com/posts/1
̶ POST: realiza a criação de um novo post fornecendo um corpo JSON.
• https://jsonplaceholder.typicode.com/posts
• No Body, selecione a opção raw, escolha JSON no menu suspenso, e insira o JSON formatado que deseja enviar antes de submeter a requisição.
{
 "userId": 1,
 "title": "Título de exemplo...",
 "body": "Corpo de exemplo..."
}
̶ PUT: atualiza o recurso de ID 1 substituindo o conteúdo por um novo. O método PUT sobrescreve totalmente o recurso.
• https://jsonplaceholder.typicode.com/posts/1
• No Body, selecione a opção raw, escolha JSON no menu suspenso, e insira o JSON formatado que deseja enviar antes de submeter a requisição.
{
 "userId": 1,
 "title": "Título de exemplo 2...",
 "body": "Corpo de exemplo 2..."
}
̶ DELETE: deleta o recurso de ID 1, demonstrando como o método DELETE remove recursos.
• https://jsonplaceholder.typicode.com/posts/1
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 54
https://jsonplaceholder.typicode.com/posts
https://jsonplaceholder.typicode.com/posts/1
https://jsonplaceholder.typicode.com/posts
https://jsonplaceholder.typicode.com/posts/1
https://jsonplaceholder.typicode.com/posts/1
Tema da próxima aula
• Aula 02:
̶ Unidade 1: Modelo cliente-servidor, servidores web, navegadores e fluxo de 
requisição e resposta.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 55
Referências
• FOROUZAN, Behrouz A; MOSHARRAF, Firouz. Redes de computadores: 
uma abordagem top-down. Porto Alegre: AMGH, 2013.
• RICHARDSON, Leonard; AMUNDSEN, Mike; RUBY, Sam. RESTful web 
APIs: services for a changing world. Sebastopol: O’Reilly Media, 2013.
• RICHARDSON, Leonard; RUBY, Sam. RESTful web services. Sebastopol: 
O’Reilly Media, 2007.
• ZAMMETTI, Frank. Modern full-stack development: using TypeScript, 
React, Node.js, Webpack, Python, Django, and Docker. 2. ed. [S.l.]: 
Apress, 2022. E-book.
Prof. Edinilson Vida | edinilson.vida@ifsc.edu.br 56
Dúvidas?
Agradeço a atenção!
	Slide 1: Aula 01
	Slide 2: Roteiro
	Slide 3: Objetivo
	Slide 4: Situação-problema
	Slide 5: Leitura específica
	Slide 6: A World Wide Web
	Slide 7: A World Wide Web
	Slide 8: A World Wide Web
	Slide 9: Introdução à evolução da web
	Slide 10: Introdução à evolução da web
	Slide 11: O surgimento da web (Web 1.0)
	Slide 12: A Web 2.0: interatividade e redes sociais
	Slide 13: O crescimento do mobile e da web responsiva
	Slide 14: Web 3.0: a Internet inteligente
	Slide 15: O impacto das APIs na evolução da Web
	Slide 16: A ascensão do cloud computing
	Slide 17: Web 4.0 e o futuro da Internet
	Slide 18: Introdução ao desenvolvimento web
	Slide 19: Importância do desenvolvimento web
	Slide 20: Introdução às tecnologias de desenvolvimento web
	Slide 21: Estrutura de uma aplicação web
	Slide 22
	Slide 23: Aplicações práticas do desenvolvimento web
	Slide 24: Como um site funciona?
	Slide 25
	Slide 26: O que é front-end?
	Slide 27: Frameworks e bibliotecas do front-end
	Slide 28: O que é back-end?
	Slide 29: Frameworks e ferramentas do back-end
	Slide 30: Frameworks e ferramentas do back-end
	Slide 31: Segurança no front-end e back-end
	Slide 32: Bancos de dados no desenvolvimento web
	Slide 33
	Slide 34: Full stack development
	Slide 35: Ferramentas para controle de versão e deploy
	Slide 36: Integração entre front-end e back-end
	Slide 37
	Slide 38: Integração entre front-end e back-end
	Slide 39: Arquitetura monolítica e de microsserviços
	Slide 40: Arquitetura monolítica
	Slide 41: Arquitetura monolítica
	Slide 42: Arquitetura de microsserviços
	Slide 43: Arquitetura de microsserviços
	Slide 44: Arquitetura de microsserviços
	Slide 45
	Slide 46
	Slide 47: Vamos pensar um pouco
	Slide 48: Vamos pensar um pouco
	Slide 49: Aprofundando o conhecimento
	Slide 50: Resumo da aula
	Slide 51: Atividade verificadora de aprendizagem
	Slide 52: Atividade verificadora de aprendizagem
	Slide 53: Atividade verificadora de aprendizagem
	Slide 54: Atividade verificadora de aprendizagem
	Slide 55: Tema da próxima aula
	Slide 56: Referências
	Slide 57: Dúvidas? Agradeço a atenção!