uncl2807_ebook_bootstrap_(2)

Prévia do material em texto

Bootstrap
Sumário
1 Introdução 3
2 O MERCADO DE DESENVOLVIMENTO WEB 4
3 NAVEGADORES, ALIADOS DO DESENVOLVEDOR
 5
4 BOOTSTRAP E SUAS GRIDS 6
4.1 DIFERENÇAS ENTRE CONTAINER E CONTAI-
NER-FLUID 8
5 FLEXBOX NO BOOTSTRAP 11
6 ENTENDENDO AS MEDIA QUERIES 12
7 CONHECENDO OS CARDS DO BOOTSTRAP 13
8 CLASSES SEMÂNTICAS 15
9 LAYOUTS RESPONSIVOS E COM ALTA PERFOR-
MANCE 17
10 O QUE É JAVASCRIPT 18
10.1 COMO FUNCIONA O JAVASCRIPT? 19
11 ROTAS E VISÕES 20
Resumo do curso 21
Referências 22
Módulo 1
Bootstrap
1 Introdução
A vida nos dias atuais é uma correria, pois não paramos um minuto e quando paramos lá es-
tamos nós com o celular na mão consumindo informações. Hoje, no mundo tecnológico em 
que vivemos, um desenvolvedor web que não utiliza uma tecnologia moderna, rápida e eficaz 
pode ser considerado ultrapassado. Diante de várias tecnologias existentes no mercado, o 
Bootstrap é uma que se destaca por ser um framework moderno, robusto e que entrega re-
sultados finais incríveis.
O desenvolvedor pode até ter muitos conhecimentos, mas se ele não conseguir transmitir 
para os usuários o que o seu site pretende de nada adianta. Isso vale tanto para o usuário 
que acessa via computador de mesa quanto para aquele que acessa via notebook, tablet ou 
smartphones.
Para auxiliar no desenvolvimento web, temos hoje no mercado um incrível framework, que, 
além de trazer bons resultados, com certeza fará com que o profissional se torne diferencia-
do, atualizado e moderno. Em vista disso, nesta etapa, apresentaremos o que é o Bootstrap e 
como funciona a sua utilização, com o objetivo de ajudar você a se tornar um desenvolver mais 
eficiente e com capacidade para trabalhar com essa ferramenta.
4
2 O MERCADO DE 
DESENVOLVIMENTO WEB
Há pouco tempo atrás o desenvolvimento web era considerado a profissão do futuro, mas 
podemos dizer que é a profissão do presente. Cada vez mais, grandes e pequenas empresas 
estão aderindo à internet, mesmo que ainda toda a sua operação continue offline.
Ser um desenvolvedor web significa estar sempre atualizado, pois as atualizações são diárias 
na área de desenvolvimento de softwares. Existem, hoje, várias linguagens de programação 
já consolidadas no mercado e muitas outras que estão surgindo, fazendo esse mercado cres-
ça ainda mais.
A variedade de áreas disponíveis para seguir é algo que influencia muito para que o desenvol-
vimento web seja a carreira do momento. Isso quer dizer que para se tornar um desenvolvedor, 
você pode escolher qual área deseja atuar, seja no desenvolvimento front-end, desenvolvi-
mento back-end ou desenvolvimento full stack.
Mas, afinal, o que são desenvolvimentos front-end, back-end e full stack? Basicamente, refe-
rem-se ao modo como é dividido as partes de um sistema. O desenvolvedor front-end é o res-
ponsável por desenvolver todo o layout e interações do usuário. As tecnologias básicas desse 
profissional são HTML, CSS e JavaScript. Já o desenvolvedor back-end é o desenvolvedor 
responsável por aplicar a regra de negócio no sistema e tudo isso acontece por “trás” daquele 
lindo layout. As linguagens de programação que podem ser utilizadas por esse profissional 
são várias, como PHP, Java, Python, C#, Ruby, entre outras.
Agora que conhecemos o front-end e o back-end, você deve estar se perguntando: o que é o 
desenvolvedor full stack? A resposta é simples, esse desenvolvedor é o profissional que do-
mina tanto o front-end quanto o back-end e, por isso, esse programador está em alta no mer-
cado de trabalho, pois é um profissional que pode atuar em qualquer parte do sistema.
5
3 NAVEGADORES, ALIADOS 
DO DESENVOLVEDOR
Com o grande avanço das tecnologias nos computadores, tablets e celulares, muitos pro-
gramas/aplicativos avançaram e tornaram a vida do usuário mais fácil para resolver alguma 
demanda específica, pedir uma comida ou assistir algum filme. Com esse avanço dos equipa-
mentos, os navegadores também evoluíram e isso foi muito importante para os desenvolve-
dores, pois antes para realizar muitas ações em um sistema e/ou site era necessário um super 
servidor para executar uma demanda e exibir na tela do usuário. Agora, muitas funcionalida-
des acontecem ao lado do cliente, ou seja, no próprio navegador que o usuário está utilizando, 
fazendo com que a navegação seja mais rápida e o usuário tenha uma experiência melhor em 
um site ou sistema.
No entanto, o avanço não fica só na parte do usuário. Os navegadores se tornaram uma fer-
ramenta útil para os desenvolvedores, em que é possível verificar erros de JavaScript, testar 
um código HTML ou CSS e também verificar se o comportamento do sistema está correto de 
acordo com o desenvolvimento back-end. Além disso, para desenvolver e testar no navegador 
o layout voltado para dispositivos mobile (tablet e celulares), é possível simular como a apli-
cação irá se comportar nesses dispositivos.
FIGURA 1 – FERRAMENTAS DOS NAVEGADORES
FONTE: Elaborada pelo autor (2021).
6
4 BOOTSTRAP E SUAS GRIDS
Agora que vimos sobre o desenvolvimento web e como os navegadores são aliados dos desen-
volvedores, vamos conhecer o Bootstrap. Segundo Dias (2019), o Bootstrap é um framework 
front-end que se popularizou com o projeto Twitter Bootstrap, em agosto de 2011, por dois fun-
cionários do Twitter – Mark Otto e Jacob Thornton – que tinham como objetivo a reutilização 
de código entre as aplicações desenvolvidas pela empresa, além oferecer uma melhor adap-
tação em diferentes dispositivos. Ainda conforme o autor, o Bootstrap se define como “um kit 
de ferramentas de front-end de código aberto criado para ajudar designers e desenvolvedo-
res a construir de maneira rápida e eficiente coisas incríveis on-line” (OTTO, 2012 apud DIAS, 
2019, p. 32).
Nota
O framework é uma estrutura de códigos, que tem a finalidade de providen-
ciar uma nova função dentro do seu código.
Nesse sentido, o Bootstrap se destaca por ser um framework voltado para ser utilizado no 
front-end das aplicações. Ele utiliza CSS e JavaScript que vão muito além de apenas um vi-
sual bonito. A sua principal característica é a responsividade do site, possibilitando que ele 
seja renderizado em qualquer dispositivo, como smartphones, tablets ou telas maiores que o 
convencional de forma rápida e eficiente.
Importante
Um desenvolvedor que utiliza o Bootstrap em seus projetos com certeza se 
destacará no mercado de trabalho porque é uma ferramenta open-source 
(gratuita) e tem uma curva de aprendizagem baixa. Sendo assim, o desenvol-
vedor que escolher utilizar esse poderoso framework basta apenas ter um 
computador.
7
A grande sacada do Bootstrap é o seu sistema de grids, porque por meio dele é muito fácil 
desenvolver layouts de forma rápida, simples e o melhor: pensando em todos os dispositivos, 
pois, como já mencionamos, ele é totalmente responsivo. De acordo com o site do Bootstrap, 
com o sistema de grids é possível usar “mobile-first, grid flexbox para fazer layouts de todas 
as formas e tamanhos, graças ao sistema de doze colunas, cinco breakpoints responsivos, 
variáveis e mixins Sass, além de várias classes pré-definidas.” (SISTEMA..., [s. d., s. p.]).
Em geral, a grid é um conjunto de classes predefinidas para ajudar na criação de páginas res-
ponsivas. Por meio dela, o desenvolvedor consegue montar qualquer layout. O sistema de grid 
funciona da seguinte maneira: possui 12 colunas que ficam dentro de uma linha e, consequen-
temente, dentro de um container principal. O container pode ter a largura fixa ou fluída: na 
fluída, o container ocupa toda a extensão da janela ou “viewport”; e na fixa, ele possui três 
tamanhos fixos para diferentes larguras de viewport. A classe utilizada para a versão fixa é o 
.container e para a fluída é o .container-fluid (SISTEMA..., [s. d.]). Quanto à estrutura do HTML, 
ficará como o exemplo a seguir.
FIGURA 2 – EXEMPLO DE GRID
FONTE: SISTEMA..., ([s. d.]).
No exemplo acima, podemos observar que foram criadas três colunas idênticas (.col) que es-
tão todas estruturadas dentro deuma linha (row) e quem controla tudo isso é o container.
8
4.1 DIFERENÇAS ENTRE CONTAINER E 
CONTAINER-FLUID
O container-fluid sempre ocupará 100% da sua viewport, ou seja, ele irá ocupar toda a tela. 
Assim, ao utilizar o container-fluid, o seu site sempre será “full screen” (tela cheia). Por outro 
lado, o container tem três tamanhos que são utilizados de acordo com a sua viewport (janela 
do navegador).
Em casos de viewport com tamanho de 767px, o seu container terá sempre o tamanho auto; se 
a sua viewport possuir o tamanho entre 768px e 991px, o container terá o tamanho de 750px. 
Já nos casos da viewport com tamanho de 992px a 1199px, o seu container terá um tamanho 
de 970px; e, por fim, se o seu viewport for acima de 1200px o container sempre terá um tama-
nho de 1170px.
FIGURA 3 – EXEMPLO DE CONTAINER E CONTAINER-FLUID
FONTE: VISÃO..., ([s. d.]).
9
Agora que entendemos como funciona o container, vamos entender como se comporta as 
rows (linhas) e cols (colunas). A row é um elemento que irá envolver as cols. Dessa forma, to-
das as cols criadas ficarão dentro de uma row. Dentro de cada linha criada serão inseridas as 
rows, podendo ser 1 coluna ou 12 colunas, mas lembre-se de que o máximo de colunas que po-
dem ser utilizadas dentro de uma linha é 12. Veja no exemplo a seguir o uso de row e col:
FIGURA 4 – EXEMPLO DE COL E ROW
FONTE: SISTEMA..., ([s. d.]).
No exemplo acima podemos observar duas linhas criadas, sendo que na primeira linha foram 
inseridas duas colunas e na segunda linha foram inseridas três colunas. Mas, afinal, como 
criar o layout com a grid do Bootstrap, sempre utilizando doze colunas do mesmo tamanho? 
O Bootstrap é bem versátil e possibilita desenvolver uma única coluna dentro de uma row, ou 
criar quatro colunas, sendo que a primeira pode ser maior que as outras três e isso ajuda mui-
to a estruturar todo o layout. Toda essa dinâmica do framework só é possível porque existem 
classes predefinidas que podemos utilizar a qualquer momento.
10
FIGURA 5 – EXEMPLO DE GRID MESCLANDO CLASSES “COL”
FONTE: SISTEMA..., ([s. d.]).
O exemplo acima mostra como as classes predefinidas permitem uma combinação de colunas 
que ajudam na hora do desenvolvimento. Veja que no exemplo podemos utilizar as classes col, 
col-5 e col-6, sendo que cada uma tem o seu tamanho. Lembre-se de que as colunas sempre 
são ordenadas de 1 a 12, então as classes sempre serão: col, col-2, col-3, col-4, col-5, col-6, 
col-7, col-8, col-9, col-10, col-11 e col-12. Dentro dessa regra, é possível combinar a maior va-
riedade de classe possíveis, criando layouts únicos e eficientes.
Atenção!
Um desenvolvedor que domina a utilização dos containers, rows e cols com 
certeza desenvolverá grandes projetos em pouco tempo que atenderão às 
demandas de clientes de pequeno ou grande porte. Além disso, todo o site 
desenvolvido com o Bootstrap facilitará o trabalho do desenvolvedor para 
adequar o sistema/site para todos os dispositivos.
11
5 FLEXBOX NO BOOTSTRAP
Se você é desenvolvedor web há algum tempo, deve lembrar de quando criávamos layouts uti-
lizando tabelas. Com a chegada do flexbox (ou Flexible Box Layout), as coisas mudaram muito 
e para melhor. O flexbox é um layout em CSS3, que foi criado com o objetivo de leiautar pági-
nas web. Ele é bem parecido com o layout em bloco, a diferença é que ele não tem muitas das 
propriedades utilizadas nesse layout, como floats e columns. Apesar disso, o flexbox se des-
taca por distribuir espaços e alinhar o conteúdo de uma forma mais simples (CONCEITOS..., 
2021).
Ao utilizar o flexbox é possível alinhar os elementos dentro de um container em qualquer di-
reção: horizontal ou vertical. Essa função permite que o desenvolvedor crie layouts respon-
sivos que se adéquam às diferentes resoluções de dispositivos. Nas versões mais atuais do 
Bootstrap, o flexbox foi incluído deixando o framework ainda mais poderoso do que já era. 
Segundo o Mozilla Foundation, o flexbox “foi projetado tanto como um modelo de layout unidi-
mensional quanto como um método capaz de organizar espacialmente os elementos em uma 
interface, além de possuir capacidades avançadas de alinhamento” (CONCEITOS..., 2021, [s. 
p.]). Nesse sentido, podemos enxergar as grids do Bootstrap como se fossem responsáveis 
pelos cômodos de uma casa, enquanto o flexbox seria responsável pela disposição dos mó-
veis dentro desses cômodos. 
Além disso, algumas ações que antes eram mais trabalhosas no Bootstrap passaram a ser 
mais simples com o flexbox. Por exemplo, para alinhar conteúdos ao centro na horizontal e 
vertical, com apenas o Bootstrap, utilizavam-se muitas regras CSS. No flexbox, para fazer 
isso, utilizamos align-items: center e justify-content: center. Agora, o desenvolvedor web 
pode gerenciar o layout de forma mais rápida, bem como o alinhamento, a dimensão da grade 
de colunas, navegação etc. No caso de implementações mais complexas, a utilização de CSS 
customizado pode ser necessária (FLEXBOX, [s.d.]).
Como podemos ver, o Bootstrap sozinho já é uma ferramenta poderosa que facilita o desen-
volvimento de layout. Em conjunto com o flexbox, o desenvolvedor possui muito mais agilida-
de para criar os seus layouts e obter um resultado final surpreendente e o melhor: tudo isso 
com tecnologia open source.
12
6 ENTENDENDO AS MEDIA 
QUERIES
As media queries, muito utilizadas no Bootstrap, são um recurso de consulta de mídia respon-
sáveis por fazer o site ser responsivo e acessado por todos em qualquer dispositivo. Ou seja, 
é uma técnica que consegue detectar qual o tamanho da tela que o usuário está acessando o 
seu site e, a partir disso, aplicar as regras CSS definidas para a resolução detectada (USAN-
DO..., 2021). O Bootstrap utiliza os seguintes intervalos de media query:
FIGURA 6 – SINTAXE DE MEDIA QUERY NO CSS
FONTE: VISÃO..., ([s. d.]).
Como mostra o exemplo acima, existem algumas media queries definidas que funcionam da 
seguinte maneira: quando a resolução mínima do dispositivo for 576px, todas as regras CSS 
que estiverem dentro das chaves {} serão aplicadas. Caso o usuário acessar o site em um dis-
positivo de no mínimo 992px, as regras para esse usuário serão as que estão dentro dessa 
media query – e, assim, ocorre com todas as media queries.
De maneira geral, a tecnologia das media queries possibilita que o site tenha comportamen-
tos e visual diferente para cada dispositivo. Quando você acessa um site em um computa-
dor com uma tela grande e vai até um formulário de contato, preenche os dados e envia sem 
problemas, isso só é possível porque o formulário está todo projetado para essa tela. Agora, 
imagine o mesmo formulário em uma tela de smartphone, será que a mesma disposição dos 
campos seria ideal em um smartphone? É aí que as media queries agem. Se o desenvolvedor 
deseja que esse formulário tenha o mesmo efeito da tela de um computador para um usuá-
rio em um smartphone, ou tablet, ele simplesmente aplica as queries e altera o CSS para 
esses dispositivos.
13
7 CONHECENDO OS CARDS 
DO BOOTSTRAP
De acordo com a documentação do Bootstrap, o card “é um container de conteúdo flexível e 
extensível. Ele tem opções para cabeçalhos e rodapés, uma larga variedade de conteúdo, co-
res de background contextuais e opções de display poderosas” (CARDS..., [s. d.]). Nas versões 
mais atuais do framework, os cards ajudam muito no desenvolvimento porque eles podem ser 
utilizados em quase todas as partes do layout: para fazer uma página de portfólio, posts de 
blog, álbum de fotos, entre outros.
FIGURA 7 – EXEMPLO DE CARD DO BOOTSTRAP
FONTE: (CARDS..., [s. d.]).
Como podemos ver na imagem acima, o uso do card é bem variado visto que eles suportam di-
versos conteúdos, como imagens, textos, links etc. Por ser tão flexível, o desenvolvedor pode 
usar a criatividade e explorar tudo o que for possível fazer com eles. É possível realizar diver-
sas combinações e, como o Bootstrap é bem estruturado, o desenvolvedor pode inserir um 
título em um card, por exemplo.Para isso, basta inserir a classe card-title. Caso ele queira 
inserir uma imagem, a regra é a mesma, é só inserir a classe correspondente à imagem, que 
é card-img. Ainda, se ele quiser que essa imagem fique no topo do card, é só utilizar a classe 
card-img.top.
14
Agora, imagine que você está desenvolvendo um card e você quer inserir uma imagem no topo, 
logo abaixo um título e um subtítulo; e abaixo disso tudo um pequeno texto e um link para o 
usuário clicar e redirecioná-lo para algum lugar. Como você faria isso utilizando o Bootstrap? 
Veja a seguir:
 1 - <div class=”card”>
 2 - <img class=”card-img-top” src=”endereco/da/imagem.png” alt=”Imagem de capa do 
card”>
 3 - <div class=”card-body”>
 4 - <h5 class=”card-title”>Título do seu card</h5>
 5 - <h6 class=”card-subtitle”>Subtitulo do card</h6>
 6 - <p class=”card-text”>Um pequeno texto de exemplo, que podemos utilizar no card</p>
 7 - <a href=”#” class=”card-link”>Link do card</a>
 8 - </div>
 9 - </div>
Perceba que em poucas linhas, utilizando várias classes predefinidas pelo Bootstrap, já temos 
o nosso card. Simples, não é mesmo? Na primeira linha, criamos uma div e chamamos a classe 
card, que está indicando que estamos criando um card. Na segunda linha, criamos uma tag 
de imagem padrão do HTML e utilizamos a classe card-img-top e, em seguida, informamos o 
caminho do lugar que está essa imagem. A classe card-img-top informa ao Bootstrap que 
ali será uma imagem e que ela deve ficar no topo do card. Na terceira linha, abrimos outra div 
com a classe card-body, informando que tudo o que estiver dentro dessa classe fará parte do 
corpo do card. Na quarta e quinta linha, indicamos as tags h5 e h6 que representam o título e 
subtítulo, respectivamente. Para escrever nosso pequeno texto dentro do card, utilizamos a 
tag <p> que é específica para parágrafo e indicamos a classe card-text. Depois, criamos um 
link que irá redirecionar o nosso usuário para outra página e nesse link utilizamos a classe car-
d-link. Para finalizar, fechamos as tags do <div class=”card-body> e <div class=”card>.
O grande diferencial do card é que ele é composto por poucas marcações HTML e poucos 
estilos CSS, mas isso não impede que ele seja útil. A sua grande vantagem, é a facilidade de 
personalização. É possível mudar a cor de um botão, mudar o tamanho, inserir um link ou 
imagem, ou seja, simplesmente criar um próprio estilo CSS e, em poucas linhas, ter um card 
totalmente personalizado.
Além disso tudo, os cards também são responsivos e, por isso, o desenvolvedor não precisa 
se preocupar como os cards serão exibidos em dispositivos mobile. Mesmo assim, como um 
bom profissional de desenvolvimento web, é importante sempre realizar o teste. Caso haja 
necessidade de ajustes, basta só utilizar as media queries para adaptar os cards conforme a 
necessidade do projeto.
15
8 CLASSES SEMÂNTICAS
Há alguns anos atrás o papel do HTML era simplesmente fazer marcação da nossa estrutura 
do site e basicamente para tudo se utilizava “<div>”. Para facilitar o trabalho do desenvolvedor, 
criavam-se classes nessas divs para aplicar o estilo CSS e o nome dessas classes, normal-
mente, se referia ao tipo de conteúdo que seria renderizado em tela. Por exemplo, imagine 
que você está fazendo o topo de um site, onde irá conter o logotipo da empresa e um menu. 
Antigamente, essa estrutura seria da seguinte forma:
<div class=“header”>
 <div class=“logo”></div>
 <div class=“menu”></div>
</div>
Com a criação do HTML5 e CSS3, as classes semânticas surgiram não só para ajudar o profis-
sional na hora de desenvolver, mas também para registrar o significado do conteúdo desses 
documentos por meio de tags semânticas. Essas tags servem para sinalizar aos browsers e 
mecanismos de pesquisas (como o Google) como as partes do site estão divididas, facilitando 
assim a indexação nos mecanismos de pesquisa.
Vimos que antigamente utilizávamos a div para tudo e ainda continuamos utilizando, mas para 
certos blocos de site. Agora, vamos voltar ao exemplo de criar o topo do site com o logotipo e 
um menu. Com as tags semânticas, ficaria assim:
<header>
 <div class=“logo”></div>
 <div class=“menu”></div>
</header>
Perceba que é uma mudança simples, mas que faz uma grande diferença para o seu layout. A 
seguir, conheça algumas tags semânticas (SEMÂNTICA..., 2021):
• <header>: representa um cabeçalho ou seção;
• <section>: representa uma seção dentro do conteúdo, normalmente contém um 
título;
• <article>: utilizada para declarar um conteúdo que não precisa de outro para fazer 
sentido em um HTML, por exemplo, um artigo de um blog;
• <nav>: representa agrupamentos de links, muito comum na criação de menus;
• <aside>: utilizada para criar um conteúdo de apoio/adicional ao conteúdo principal;
16
• <main>: especifica o conteúdo principal, ou seja, o conteúdo que tem a maior relevân-
cia dentro da página;
• <figure>: usada para inserção de figuras;
• <footer>: representa o rodapé do documento.
Essas são algumas tags semânticas que existem e que podemos utilizar em nossos layouts. 
Veja abaixo um exemplo do uso das tags semânticas.
FIGURA 8 – EXEMPLO DE UTILIZAÇÃO DAS TAGS SEMÂNTICAS
FONTE: Elaborada pelo autor (2021).
Importante
A utilização correta das tags semânticas, além de facilitar a manutenção do 
sistema/site, faz com que o Google indexe o site mais rápido. Isso é possí-
vel porque as tags semânticas informam aos navegadores e ao Google o que 
cada parte do site representa, assim como mostra o lugar que fica o header 
do site, ou a sua principal área.
17
9 LAYOUTS RESPONSIVOS E 
COM ALTA PERFORMANCE
O Bootstrap desde o seu surgimento sempre teve alta performance e eficiência na responsi-
vidade, mas com as novas versões tudo isso ficou ainda melhor. Como já vimos anteriormen-
te, a nova versão do Bootstrap utiliza o flexbox, as tags semânticas e, recentemente, deixou 
de utilizar o jQuery e começou a utilizar a Vanilla.
O sucesso obtido no resultado final, em relação à responsividade, ocorre por conta do Boots-
trap ser mobile first, ou seja, a sua aplicação é feita primeiro nos dispositivos móveis (INTRO-
DUÇÃO..., [s. d.]). Esse conceito se refere ao desenvolvimento de um site que deve ser pensa-
do primeiro na parte mobile e depois projetado para o tablet e desktop. No entanto, essa não 
é uma regra. O desenvolvedor pode começar desenvolvendo para telas grandes e, posterior-
mente, fazer o ajuste para telas menores.
De modo geral, as funções do Bootstrap são muito bem definidas e executadas, o que contri-
bui para o alcance da alta performance. Por ser um framework, seu objetivo é ser produtivo e 
simplificar as tarefas, por isso o Bootstrap deixa a configuração do HTML e CSS menos com-
plexa, criando classes prontas e oferecendo um layout responsivo e de qualidade. Em outras 
palavras, é uma ferramenta que utiliza as melhores práticas de design e, como consequência, 
obtém sucesso na performance.
Além disso, a sua performance não está somente no resultado final, pois construir um site 
com o Bootstrap é rápido – e com qualidade garantida –, o que faz com que haja performance 
também no processo de desenvolvimento. Hoje, grandes empresas utilizam o Bootstrap por-
que a curva de aprendizagem é baixa, basta o desenvolvedor ter conhecimentos, mesmo que 
básicos, em HTML, CSS e JavaScript.
Por fim, é importante termos em mente que não é satisfatório criar um projeto responsivo, 
mas sem uma performance boa. Imagine a seguinte situação: você está desenvolvendo um 
site e no computador do usuário, em que a internet é cabeada, o site tem uma excelente per-
formance. Agora, imagine se esse site for acessado por um smartphone. Além de se adequar 
à tela do usuário, ele deve ser rápido no carregamento, pois provavelmente o usuário estará 
utilizando internet 4g. Se o site não carregar ou falhar, todo o seu trabalho não foi eficaz. É 
por isso que a responsividade e a performance são tão importantes no desenvolvimento web.
18
10 O QUE É JAVASCRIPTA internet mudou muito desde o seu surgimento. Atualmente, as páginas de internet podem 
ser mais dinâmicas, pois é possível apresentarem recursos interativos e possibilitam que o 
usuário realize ações simples com apenas um clique. Um grande exemplo, é o envio de infor-
mações pessoais por meio de um formulário. 
Ao contrário de hoje, os sites eram estáticos na década de 90 e não possuíam tantos recursos. 
Era até possível enviar alguma informação e obter um retorno, mas normalmente a página de-
morava para carregar e para mostrar a resposta. A explicação para isso é que toda requisição 
solicitada às páginas era enviada para um servidor externo que processava a informação e, 
depois, devolvia a resposta.
Após alguns anos, o JavaScript foi criado com o intuito de tornar a navegação na internet 
mais rápida e fácil. Mas, afinal, o que é JavaScript? De acordo com o Guia... (2021, [s. p.]):
JavaScript é uma linguagem de script orientada a objetos, multiplataforma. É 
uma linguagem pequena e leve. Dentro de um ambiente de host (por exemplo, 
um navegador web) o JavaScript pode ser ligado aos objetos deste ambiente 
para prover um controle programático sobre eles. (GUIA..., 2021, [s. p.])
Em outras palavras, o JavaScript é uma linguagem de programação criada para ser utilizada 
em navegadores e controlar as ações de páginas web. Por meio dos seus scripts, é possível 
incluir mapas, formulários e outros elementos dinâmicos nas páginas.
Atualmente, o JavaScript é uma das mais importantes linguagens de desenvolvimento web. 
Ele é conhecido por ser muito utilizado no desenvolvimento front-end, que, em conjunto com 
outras tecnologias – como o HTML, CSS e PHP –, é capaz de atender às demandas que existem 
para que seja possível o desenvolvimento de uma página web dinâmica e com uma ótima per-
formance. Além disso, com o surgimento de muitos frameworks, como o Bootstrap, o JavaS-
cript também é utilizado em aplicativos mobile, softwares para desktop e back-end.
19
10.1 COMO FUNCIONA O JAVASCRIPT?
O Javascript é uma linguagem de programação client-side, ou seja, tudo é executado do lado 
do usuário, por meio do navegador que o usuário utiliza. Resumindo, isso significa que todas 
as informações são processadas na própria máquina do usuário, sem a necessidade de serem 
enviadas para um servidor externo como era antigamente.
Além disso, o Javascript se destaca também por ser uma linguagem case-sensitive, o que 
quer dizer que ele diferencia letras maiúsculas e minúsculas. Segundo o Guia... (2021, [s. p.]):
No JavaScript, instruções são chamadas de declaração são separadas por um 
ponto e vírgula (;). Espaços, tabulação e uma nova linha são chamados de espa-
ços em branco. O código fonte dos scripts em JavaScript são lidos da esquerda 
para a direita e são convertidos em uma sequência de elementos de entrada 
como símbolos, caracteres de controle, terminadores de linha, comentários ou 
espaço em branco. (GUIA..., 2021, [s. p.])
Agora que entendemos como funciona o JavaScript, vamos conhecer a sintaxe básica de uma 
declaração de variável.
FIGURA 9 – EXEMPLO DE DECLARAÇÃO DE VARIÁVEL EM JAVASCRIPT
FONTE: Elaborada pelo autor (2021).
Diferente de outras linguagens de programação, no JavaScript não definimos qual é o tipo da 
variável, por exemplo, int e string. Isso acontece porque o JavaScript possui tipagem dinâmi-
ca. Assim como toda linguagem de programação, o JavaScript também possui estrutura de 
controle, funções, estruturas de repetições, manipulação de eventos e muitas outras coisas, 
tornando-se uma linguagem poderosa e consolidada hoje no mercado.
20
11 ROTAS E VISÕES
Agora que você conheceu ferramentas importantes para o desenvolvimento web, vamos en-
tender como funcionam as rotas? Por trás de todas as tecnologias utilizadas no desenvolvi-
mento de sistemas – voltado para web ou não – existem padrões, como o padrão MVC. Esse 
padrão é responsável por fazer a comunicação com o banco de dados, processar a informa-
ção e depois exibir na tela para o usuário.
De modo geral, o MVC (Model-View-Controller) é um padrão de arquitetura de software que 
contribui na otimização da velocidade das requisições feitas pelo comando dos usuários. De 
acordo com Luciano e Alves (2011), a ideia de utilizar o MVC nos projetos é separar cada res-
ponsabilidade do sistema, de forma que o Model (modelo) seja responsável pelo banco de da-
dos, o Controller (controle) seja responsável por requisitar algo do Model, processar e enviar 
para View (visão), que, por fim, irá renderizar na tela do usuário.
Para tudo isso funcionar de forma correta, é necessário trabalhar com as rotas nos projetos. 
Elas se referem ao ponto de partida do sistema que irá receber todas as solicitações e definir 
cada destino. Normalmente, são definidas no arquivo index do projeto, pois esse é o arquivo 
de entrada quando algum endereço de um site é digitado. Nesse sentido, todo o processo do 
MVC é feito pelas rotas: receber a requisição do usuário, enviar para o Controller, que irá pro-
cessar a informação, solicitar ao Model se necessário e, depois de tudo processado, enviar 
para a View renderizar em tela.
É importante conhecermos as rotas, pois elas têm um papel fundamental nos sistemas e si-
tes. É através delas que o usuário será redirecionado para outras páginas, ou terá acesso à 
informação solicitada, além de controlar a navegação do usuário caso ele solicite alguma URL 
não existente no site. Por exemplo, nesse caso, a rota encaminharia para a visão (View) que 
exibiria na tela uma página de erro 404, o que indica que a página não existe.
21
Resumo do curso
Neste curso, você aprendeu que um desenvolvedor web deve ter uma base de conhecimento 
sólida para conseguir entregar bons resultados. Com uma combinação de tecnologias, um 
dos melhores e mais utilizados frameworks do mundo foi criado: o Bootstrap. Além de desen-
volvedor padrões predefinidos, possuir mais agilidade e uma curva de aprendizado baixa, o 
Bootstrap entrega excelentes resultados. O melhor de tudo é que ele é open-source, ou seja, 
possui o código aberto.
Você aprendeu também que o mercado de desenvolvimento web é vasto, contudo, conhecer 
e dominar o Bootstrap são diferenciais que levará você a outro nível, tanto na parte técnica 
quanto no mercado de trabalho. Afinal, entregar para o usuário informações de forma sim-
ples, clara, objetiva e bem construída, independentemente do dispositivo que ele esteja aces-
sando, é o dever do desenvolvedor. Com uma tecnologia de qualidade que permite tudo isso, 
como o Bootstrap, fica muito mais fácil entregar os resultados esperados.
22
Referências
CARDS. Getbootstrap, [s. l., s. d.]. Documentação. Disponível em: https://getbootstrap.com.br/
docs/4.1/components/card/. Acesso em: 14 de ago. 2021.
CONCEITOS básicos de flexbox. MDN Web Docs, [s. l.], 18 ago. 2021. Disponível em: https://de-
veloper.mozilla.org/pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_
Flexbox. Acesso em: 14 de ago. 2021.
DIAS, C.X.S. SmartNode Dashboard: um framework front-end baseado em Node-RED para 
criação de City Dashboards. 2019. Dissertação (Mestrado Profissional em Engenharia de Soft-
ware) – Instituto Metrópole Digital, Universidade Federal do Rio Grande do Norte, Natal-RN, 
2019. Disponível em: https://repositorio.ufrn.br/bitstream/123456789/26736/1/SmartNode-
Dashboard_Dias_2019.pdf. Acesso em: 14 de ago. 2021.
FLEXBOX. Getbootstrap, [s. l., s. d.]. Documentação. Disponível em: https://getbootstrap.com.
br/docs/4.1/utilities/flex/. Acesso em: 14 de ago. 2021.
GUIA JavaScript. MDN Web Docs, [s. l.], 18 ago. 2021. Disponível em: https://developer.mozil-
la.org/pt-BR/docs/Web/JavaScript/Guide/Introduction#o_que_%C3%A9_javascript. Acesso 
em: 14 de ago. 2021.
INTRODUÇÃO. Getbootstrap, [s. l., s. d.]. Documentação. Disponível em: https://getbootstrap.
com/docs/5.1/getting-started/introduction/. Acesso em: 25 ago. 2021.
LUCIANO, J.; ALVES, W. J. B. Padrão de Arquitetura MVC: Model-View-Controller. Revista EPeQFafibe, São Paulo, 3. ed., v. 1, p. 102-107, 2011. Disponível em: https://www.unifafibe.com.br/re-
vistasonline/arquivos/revistaepeqfafibe/sumario/20/16112011142249.pdf. Acesso em: 25 ago. 
2011.
SISTEMA grid. Getbootstrap, [s. l., s. d.]. Documentação. Disponível em: https://getbootstrap.
com.br/docs/4.1/layout/grid/. Acesso em: 14 de ago. 2021.
SEMÂNTICA. MDN Web Docs, [s. l.], 2021. Disponível em: https://developer.mozilla.org/pt-BR/
docs/Glossary/Semantics. Acesso em: 25 ago. 2021.
USANDO Media Queries. MDN Web Docs, [s. l.], 2021. Disponível em: https://developer.mozilla.
org/pt-BR/docs/Web/CSS/Media_Queries/Using_media_queries. Acesso em: 24 de ago. 2021.
VISÃO geral. Getbootstrap, [s. l., s. d.]. Documentação. Disponível em: https://getbootstrap.
com.br/docs/4.1/layout/overview/#containers. Acesso em: 14 de ago. 2021.
https://getbootstrap.com.br/docs/4.1/components/card/
https://getbootstrap.com.br/docs/4.1/components/card/
https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
https://repositorio.ufrn.br/bitstream/123456789/26736/1/SmartNodeDashboard_Dias_2019.pdf
https://repositorio.ufrn.br/bitstream/123456789/26736/1/SmartNodeDashboard_Dias_2019.pdf
https://getbootstrap.com.br/docs/4.1/utilities/flex/
https://getbootstrap.com.br/docs/4.1/utilities/flex/
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Introduction#o_que_%C3%A9_javascript
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Introduction#o_que_%C3%A9_javascript
https://getbootstrap.com/docs/5.1/getting-started/introduction/
https://getbootstrap.com/docs/5.1/getting-started/introduction/
https://www.unifafibe.com.br/revistasonline/arquivos/revistaepeqfafibe/sumario/20/16112011142249.pdf
https://www.unifafibe.com.br/revistasonline/arquivos/revistaepeqfafibe/sumario/20/16112011142249.pdf
https://getbootstrap.com.br/docs/4.1/layout/grid/
https://getbootstrap.com.br/docs/4.1/layout/grid/
https://developer.mozilla.org/pt-BR/docs/Glossary/Semantics
https://developer.mozilla.org/pt-BR/docs/Glossary/Semantics
https://developer.mozilla.org/pt-BR/docs/Web/CSS/Media_Queries/Using_media_queries
https://developer.mozilla.org/pt-BR/docs/Web/CSS/Media_Queries/Using_media_queries
https://getbootstrap.com.br/docs/4.1/layout/overview/#containers
https://getbootstrap.com.br/docs/4.1/layout/overview/#containers
	1 Introdução
	2 O MERCADO DE DESENVOLVIMENTO WEB
	3 NAVEGADORES, ALIADOS DO DESENVOLVEDOR
	4 BOOTSTRAP E SUAS GRIDS
	4.1 DIFERENÇAS ENTRE CONTAINER E CONTAINER-FLUID
	5 FLEXBOX NO BOOTSTRAP
	6 ENTENDENDO AS MEDIA QUERIES
	7 CONHECENDO OS CARDS DO BOOTSTRAP
	8 CLASSES SEMÂNTICAS
	9 LAYOUTS RESPONSIVOS E COM ALTA PERFORMANCE
	10 O QUE É JAVASCRIPT
	10.1 COMO FUNCIONA O JAVASCRIPT?
	11 ROTAS E VISÕES
	Resumo do curso
	Referências