DESENVOLVIMENTO WEB – O MAPA DA MINA

Professor: Tiago Pádua

DESENVOLVIMENTO WEB – O MAPA DA MINA

PROFESSOR TIAGO PÁDUA

Apresentação

Olá, eu sou o professor Tiago Pádua, formado em Computação Licenciatura, analista

sênior e empregado público do setor bancário e professor com mais de 15 anos de atuação
na área de TI.
Neste material, que é voltado especialmente para aqueles que estão iniciando no desen-
volvimento web, quero trazer um roteiro ou um “mapa da mina” para te ajudar a se localizar
rapidamente no mundo atual do desenvolvimento web.
Em nossa sociedade altamente informatizada dos dias atuais, o profissional desenvol-
vedor de sistemas tem sido altamente procurado, tanto pelo mercado privado quanto pelo
setor público.
Especialmente na área de TI, tem se destacado diversos concursos da área Judiciário,
área tributária e bancária onde o profissional de TI muitas vezes já inicia com ótimos valores
de remuneração acima de R$ 10.000,00. Isso atrai o interesse de muitos concurseiros. No
entanto, esta remuneração elevada inicial tem um motivo: é necessário ter muita dedicação,
estudo e atualização constante para se destacar nesta área.
O desenvolvimento web (que é uma vertente do desenvolvimento de sistemas) tem
ganhado amplo destaque ultimamente. Isso se deve tanto pela evolução da tecnologia web
em si quanto pela melhoria de infraestrutura de telecomunicações de nosso país, em espe-
cial nos centros urbanos, a internet via fibra ótica já é amplamente acessível, assim como as
redes móveis 3G e 4G.
Para se tornar um desenvolvedor web, é necessário muito estudo. As técnicas e tec-
nologias relacionadas ao desenvolvimento web evoluíram rapidamente nos últimos anos e
muitas vezes se localizar no emaranhado de tecnologias disponíveis pode se revelar uma
tarefa bem complexa, especialmente parara aqueles que estão iniciando.
Pensando nisso, elaborei este material, que visa trazer um pouco de luz à esta jornada,
que é extremamente árdua, mas muito recompensadora.

Bom proveito!

www.grancursosonline.com.br 2
DESENVOLVIMENTO WEB – O MAPA DA MINA
Professor: Tiago Pádua

O QUE É O DESENVOLVIMENTO WEB?

A primeira coisa que precisamos saber para começar nossos estudos é: o que é o
desenvolvimento web?
De forma geral, desenvolvimento web é trabalhar com os aspectos técnicos do desen-
volvimento de um site.
Uma página na web (que pode ser na internet ou em uma rede privada da empresa)
pode variar desde uma página simples de conteúdo de texto até aplicativos complexos como
e-commerce, redes sociais, serviços do governo federal ou serviços bancários.
Durante o desenvolvimento destes sites, podem ser realizadas várias tarefas, como
por exemplo a engenharia do sistema (que é voltada às características internas do funcio-
namento do site), o design da página (características visuais e de usabilidade do sistema),
configurações de segurança do servidor e da rede, entre outras tarefas.
De maneira bem simples, um web designer pode projetar o layout e os aspectos técni-
cos de um site, e o desenvolvedor web posteriormente transforma este projeto em páginas
web totalmente funcionais, que podem ser acessadas pelos usuários utilizando um navega-
dor como o Chrome ou o Firefox.
Os papéis de web designer, desenvolvedor web, engenheiro de sistemas podem ser
assumidos por uma ou mais pessoas, isso varia principalmente de acordo com o tamanho da
empresa e do projeto envolvido. Em geral, quanto maior a empresa, mais especializadas são
as tarefas executadas por cada desenvolvedor.
Como muitas vezes o desenvolvedor web foca nos aspectos técnicos do site, ele
também é chamado de programador web.
Há uma grande demanda pelo desenvolvimento de sites com alta qualidade, e isso inclui
técnicas e algoritmos por vezes bem complexos. Dessa forma, há uma ótima perspectiva de car-
reira para os profissionais desta área que se dediquem à carreira e se mantenham atualizados.

HABILIDADES NECESSÁRIAS

Quais são as características que se deve ter para se tornar um desenvolvedor web?
Muitos fatores devem ser considerados, mas alguns dos mais importantes são:

• Ter interesse por computadores e internet;

• Ter interesse por aspectos como o funcionamento, design e interação dos sites;

Inclusive tem sido comum pessoas com formações em áreas não ligadas à TI mudarem
de carreira e se dedicarem ao desenvolvimento web, tanto por aspectos como interesse pes-
soal como pela disponibilidade de vagas de trabalho no mercado.
Ter alguma formação superior na área de TI torna mais fácil para se tornar um desen-
volvedor web, mas não é estritamente necessária.

www.grancursosonline.com.br 3
DESENVOLVIMENTO WEB – O MAPA DA MINA
Professor: Tiago Pádua

POR ONDE COMEÇAR

Ótimo! Se você chegou até aqui, isso indica que você está interessado no tema, mas
agora fica a dúvida: Por onde começar?
Essa é uma pergunta difícil e a resposta ideal pode não ser a mesma para todas as
pessoas, mas vou deixar aqui minha sugestão.
Para você não se perder no grande arcabouço de tecnologias web que vou listar, trouxe
aqui um mapa mental para que você possa se situar:

Figura 1: Mapa mental de desenvolvimento web.

De forma geral, para quem está iniciando, a sequência de aprendizado é: HTML, CSS
e JavaScript, ou seja, tecnologias de front-end. Assim que o desenvolvedor adquire um certo
domínio nas tecnologias de front-end, ele pode passar a estudar alguma tecnologia de back-
-end. No entanto, a tecnologia de back-end varia muito entre as aplicações e empresas,
então ao escolher uma tecnologia de back-end para estudar você deve considerar qual mer-
cado ou empresa deseja atuar. Discutiremos isso nos próximos tópicos.

www.grancursosonline.com.br 4
DESENVOLVIMENTO WEB – O MAPA DA MINA
Professor: Tiago Pádua

FRONT-END VS BACK-END

A primeira grande divisão que temos no Desenvolvimento Web é a divisão entre front-
-end e backend.
Uma aplicação web na realidade é composta por dois softwares independentes e dis-
tintos que se comunicam para formar uma aplicação única às vistas do usuário. Um software
é executado no navegador (browser), este é o front-end, e o outro software é executado
em um servidor, geralmente localizado em um datacenter. Este outro software é conhecido
como back-end.

Figura 2: Front-end vs Backend

A função do front-end é criar uma camada pela qual um usuário possa interagir com sua
aplicação, isso se materializa muitas vezes em uma “tela” com botões e ações que o usuário
pode interagir.
Já o back-end irá receber os dados e comandos enviados pelos usuários através do
front-end e processá-los. Em geral as requisições são recebidas por um web server e em
seguida transferidas para um aplication server, este por sua vez contém a lógica do back-
-end e pode por exemplo gravar ou recuperar informações de um banco de dados e executar
alguma regra de negócio.
É muito importante que você tenha uma noção geral destes componentes e qual a
função de cada um destes em uma aplicação web.

www.grancursosonline.com.br 5
DESENVOLVIMENTO WEB – O MAPA DA MINA
Professor: Tiago Pádua

TECNOLOGIAS DE FRONT-END

Como foi falado anteriormente, front-end é a camada da aplicação que é executada no

lado do cliente, ou seja, no navegador de internet.
Dizemos que essa parte da aplicação é uma aplicação “distribuída”, uma vez que é
executada em muitos computadores distintos (em cada navegador que o site é aberto a apli-
cação de front-end é executada).
Devido a essa característica, as tecnologias utilizadas para o desenvolvimento do fron-
t-end são fortemente marcadas por uma padronização e não há muito espaço para escolha
de linguagens a serem utilizadas. Basicamente, toda aplicação de front-end web é composta
por HTML, CSS e JavaScript. Estas três linguagens formam a base do desenvolvimento web
de front-end e são universalmente compreendidas pelos navegadores.
O HTML é a linguagem utilizada para definir a estrutura e o conteúdo de uma página web:

Figura 3: Código de uma página HTML básica

Figura 4: Uma página HTML básica

www.grancursosonline.com.br 6
DESENVOLVIMENTO WEB – O MAPA DA MINA
Professor: Tiago Pádua

O CSS pode ser utilizado para alterar a fonte, cor, tamanho e espaçamento do conte-
údo, dividi-lo em várias colunas ou adicionar animações e outros recursos decorativos.
Enquanto o HTML é usado para definir a estrutura e a semântica do seu conteúdo, o
CSS é usado para estilizá-lo.


Figura 5: Uma página HTML básica com CSS

Por fim, temos o JavaScript que é uma linguagem de programação dinâmica e quando
aplicada a um documento HTML, pode fornecer interatividade a sites. Como por exemplo,
executar alguma ação quando o usuário clica em um botão. Ou realizar uma requisição HTTP
para um servidor de back-end através do AJAX. Este é o ponto de ligação principal entre uma
aplicação de front-end e o back-end. É através do AJAX que as APIs (application program-

www.grancursosonline.com.br 7
DESENVOLVIMENTO WEB – O MAPA DA MINA
Professor: Tiago Pádua

ming interfaces) expostas pela aplicação hospedada no servidor back-end irão interagir com
a nossa interface criada em HTML, CSS e JavaScript.


Figura 6: Uma página HTML básica com JavaScript

O desenvolvimento de front-end cada vez se torna mais exigente e mais complexo, por
isso, começaram a surgir diversos frameworks que auxiliam o desenvolvedor a ter maior qua-
lidade e produtividade nos projetos, dentre os mais famosos temos: Bootstrap (para CSS e
HTML), Angular, React e Vue.js para JavaScript entre outros.

TECNOLOGIAS DE BACK-END

Enquanto no front-end temos uma quantidade limitada e padronizada de tecnologias e

linguagens que podem ser executadas por um navegador, no back-end não temos esta res-
trição, por isso há uma maior diversidade de tecnologias envolvidas.

www.grancursosonline.com.br 8
DESENVOLVIMENTO WEB – O MAPA DA MINA
Professor: Tiago Pádua

A primeira linguagem de back-end que podemos citar, e uma das mais popularer é o
Java. Java é uma linguagem de programação orientada a objetos que permite criar softwares
para múltiplas plataformas. Quando um programador escreve um aplicativo Java, o código
compilado (conhecido como bytecode) pode ser executado na maioria dos sistemas opera-
cionais, incluindo Windows, Linux e Mac OS através de uma JVM (Java Virtual Machine).
Java deriva muito de sua sintaxe das linguagens de programação C e C++.

Figura 7: Exemplo de programa Java

Para desenvolver aplicações web reais em Java, geralmente é necessário utilizar algum
arcabouço de tecnologias como por exemplo o JEE ou algum framework, sendo o Spring um
dos mais populares do momento que irão fornecer um conjunto de bibliotecas e funcionalida-
des comuns para uma aplicação, como por exemplo a validação de dados e a comunicação
com um banco de dados.
Uma outra linguagem que tem muitos aspectos em comum com o Java é o C#. Em
geral, uma empresa opta por utilizar uma ou outra tecnologia, uma vez que o Java é fornecido
pela Oracle e o C# pela Microsoft e devem ser hospedadas em diferentes servidores.
Assim como o Java, o C# também é utilizado em conjunto com um arcabouço de tec-
nologias chamado.NET.

Figura 8: Exemplo de programa C#

www.grancursosonline.com.br 9
DESENVOLVIMENTO WEB – O MAPA DA MINA
Professor: Tiago Pádua

Porém, tanto o Java como o C# são conhecidos por serem tecnologias complexas, que
possuem ambientes de execução que consomem um volume alto de recursos do servidor.
Deste modo, existe também a opção de uma solução mais leve e simples, mas que também
pode ser utilizada para criar sistemas complexos. Essa solução é o PHP.
PHP significa ‘PHP: Hypertext Preprocessor’, é uma linguagem de programação de
ampla utilização, interpretada, que é especialmente interessante para desenvolvimento para
a web e pode ser mesclada dentro do código HTML. A sintaxe da linguagem lembra C, Java
e Perl, e é fácil de aprender. O objetivo principal da linguagem é permitir a desenvolvedores
escreverem rapidamente páginas que serão geradas dinamicamente.

Figura 9: Exemplo de página PHP.

Todo o código PHP é interpretado pelo servidor que irá gerar um código HTML antes do
envio da página ao cliente.
Pela sua simplicidade e leveza, o PHP se tornou uma linguagem amplamente utilizada
e é o motor principal de sites como o Facebook e a Wikipedia.
Mais recentemente, após o desenvolvimento do Node.js, o JavaScript também se
tornou uma linguagem viável para desenvolvimento de aplicações de back-end. Antes disso
o JavaScript era utilizado quase que exclusivamente para o desenvolvimento de aplicações
front-end.
O Node.js tornou simples o desenvolvimento de aplicações JavaScript leves que esca-
lam para milhares de usuários simultâneos, tornando-se uma opção interessante para apli-
cações web de alto tráfego de usuários.

www.grancursosonline.com.br 10
DESENVOLVIMENTO WEB – O MAPA DA MINA
Professor: Tiago Pádua

Figura 10: Exemplo de aplicação Node.js.

Além do Java, C# e JavaScript, uma das linguagens que tem ganhado muita populari-
dade recentemente no desenvolvimento de aplicações back-end é o Python. O Python já é
uma linguagem muito popular para o desenvolvimento de scripts de linha de comando e apli-
cações científicas e de inteligência artificial. Porém, as últimas evoluções do Python o torna-
ram uma linguagem mais performática e, juntamente com o desenvolvimento de frameworks
extremamente práticos, o Python tem sido uma das opções mais populares para o desenvol-
vimento de novas aplicações web de back-end.

Figura 11: Exemplo de aplicação Python.

Em relação a concursos, as tecnologias de front-end são mais homogêneas, ou seja,

não há tanta variação, se você souber HTML, CSS e JavaScript já terá uma boa base para
uma prova (mas precisará ainda dedicar algum tempo para estudar algum framework especí-
fico indicado no edital). Já em se tratando de back-end, a pilha tecnológica pode variar muito
entre as empresas e é necessário verificar no edital para saber quais são as tecnologias ado-
tadas para poder se preparar para um órgão específico.

www.grancursosonline.com.br 11
DESENVOLVIMENTO WEB – O MAPA DA MINA
Professor: Tiago Pádua

INTEGRAÇÃO

Antes mesmo de desenvolvermos nossas aplicações de front-end e de back-end, temos

que pensar em uma maneira destas aplicações “conversarem”, ou seja, como estas aplica-
ções irão trocar informações.
Logicamente não queremos “inventar a roda” novamente. Por isso, o mais comum é a
adoção de um padrão de Web Service que basicamente irá definir um protocolo de como
esta troca de informações irá ocorrer.
Os dois protocolos mais comuns para a comunicação de aplicações Web são
SOAP e REST.
SOAP é um padrão baseado em XML e em geral é mais utilizado para comunicação
entre dois servidores de back-end, em especial quando a comunicação ocorre entre diferen-
tes empresas. Um caso de uso muito popular é a comunicação de um servidor de back-end de
uma empresa com a secretaria da fazenda estadual para a emissão de notas fiscais, muitas
vezes essa comunicação ocorre pela troca de arquivos XML no formato de mensagem SOAP.

Figura 12: Exemplo de mensagem SOAP.

Com a evolução das aplicações de front-end, passou a ser cada vez mais evidente a
necessidade de um formato de troca de informações que pudesse ser realizado utilizando-se
JavaScript direto do navegador para se comunicar com o servidor back-end. Dada a comple-
xidade dos Web Services SOAP tradicionais utilizando XML, foi desenvolvida uma alternativa
mais simples que utiliza em geral o formato JSON para troca de mensagens. Essa alternativa
é chamada de REST:

www.grancursosonline.com.br 12
DESENVOLVIMENTO WEB – O MAPA DA MINA
Professor: Tiago Pádua

Figura 13: Exemplo de mensagem REST com JSON.

Hoje o REST é o estilo arquitetural (não é um padrão formal de fato) mais utilizado para
troca de informações entre um front-end e um back-end. Ele favorece o desacoplamento
tecnológico entre as camadas do software e permite a escala da aplicação desde pequenos
caso de uso até aplicações com milhares de usuários simultâneos na internet. No entanto, o
desenvolvimento de novas tecnologias na web não para, e hoje já temos o Graphql surgindo
como uma opção mais eficiente ao REST, mas isso é assunto para outro momento.

SERVIDORES

Como disse lá no começo, uma aplicação web é dividida em duas partes: uma parte é
executada no navegador, o front-end, e a outra parte é executada no servidor, o back-end.
Os servidores de back-end são comumente divididos em duas categorias: web ser-
vers e application servers. Os web servers são responsáveis por tarefas como o tratamento
das requisições HTTP e a segurança da conexão utilizando HTTPS (aquele cadeado que
aparece na barra de endereços do navegador). Os web servers são geralmente a porta de
entrada da infraestrutura de back-end. Exemplos de web servers são o Apache e o NGINX.
Não obstante, os web servers não são capazes de “executar” nossas aplicações de
back-end. Para isso devemos recorrer à uma segunda camada de servidores, os application
servers. Os application servers irão executar a aplicação que escrevemos por exemplo em
Java ou C# e permitir que a lógica de negócios seja executada e que dados sejam lidos e
salvos em um banco de dados.

www.grancursosonline.com.br 13
DESENVOLVIMENTO WEB – O MAPA DA MINA
Professor: Tiago Pádua

Figura 14: Web Server vs Application Server.

O web server é agnóstico em relação à linguagem de programação que escolhemos

para o back-end, mas o application server não. Logo, a escolha do application server depen-
derá da linguagem de programação que estamos utilizando no back-end. Por exemplo, se
optarmos pelo Java podemos utilizar o Tomcat (que tecnicamente não é um application server
JEE), o WebLogic, WildFly entre outros. Caso optarmos por utilizar o C#, o application server
poderia ser o IIS. Da mesma forma ocorre com cada linguagem de programação de back-end
que necessitará de um servidor específico para ser executada.

CONCLUSÃO

Com este material, espero que tenha ficado um pouco mais claro os caminhos que você
deve percorrer para se tornar um desenvolvedor web, assim como, quando estiver anali-
sando um edital de concurso, consiga situar as tecnologias listadas com sua função na pilha
tecnológica de desenvolvimento de uma aplicação web.

Bons estudos e boas provas!

www.grancursosonline.com.br 14
 #VEM

Mude de vida. Garanta seu

futuro com a melhor plataforma de
estudos para concurso público.
A realização do seu sonho merece um
investimento de qualidade. Não desperdice
tempo, dinheiro e energia. Invista no seu sucesso,
no seu futuro e na sua realização profissional.

Assine AGORA a melhor e mais completa

plataforma de ensino para concursos públicos.
Sua nomeação na palma da sua mão com a
Assinatura Ilimitada 6.0 do Gran Cursos Online.

FACILITE SEUS ESTUDOS: TUDO NO SEU TEMPO VOCÊ NÃO ESTÁ SOZINHO:
rotas de aprovação, mapas E ESPAÇO: mentorias diárias, ao vivo,
mentais, resumos e faça o download de e fórum de dúvidas não
exercícios irão te guiar por videoaulas e de PDFs e te deixarão só
um caminho mais simples estude onde e quando nesta caminhada.
e rápido. você quiser e puder.

TUDO DE NOVO QUANTAS NÚMEROS GRANDES: TUDO NA SUA MÃO:

VEZES VOCÊ QUISER:
quantas vezes você quiser,
quantas vezes você precisar,
estude com o material mais
atualizado e de melhor
qualidade do mercado.
milhares de alunos
aprovados, mais de 1 milhão
de questões, mais de 23 mil
cursos e centenas de
professores para te ajudar
a passar.
só a Assinatura Ilimitada
oferece, de forma livre
e gratuita: Gran Questões,
Gerenciador de Estudos,
Audiobooks e muito mais!

Contato para vendas: Quero ser assinante

(61) 99884-6348 | De segunda a quinta até as 22h e sexta até as 21h. ilimitado agora