HTML5 e JavaScript

Prévia do material em texto

Ambiente para 
Desenvolvimento Web
Unidade 3
HTML5 e JavaScript
Diretor Executivo
DAVID LIRA STEPHEN BARROS
Gerente Editorial
CRISTIANE SILVEIRA CESAR DE OLIVEIRA
Projeto Gráfico
TIAGO DA ROCHA
Autoria
HENRIQUE SENA
LEANDRO C. CARDOSO
AUTORIA
Henrique Sena 
Sou formado em Desenvolvimento de Software e em Sistemas para 
internet. Iniciei minha carreira profissional utilizando e desenvolvendo 
aplicações em plataformas open-source voltadas para educação a 
distância. Não demorou muito para ter minhas primeiras experiências 
como professor em cursos presenciais, atividade na qual fiquei muito 
satisfeito com os resultados obtidos. Sou analista de websites e consultor 
de EAD, com mais de 12 anos de carreira, administro sistemas educacionais 
para ensino a distância e sou professor de cursos técnicos presenciais. 
Passei por empresas como a UNINASSAU, Faculdade Joaquim Nabuco, 
Porto Digital, Ogilvy & Mather, Lunes Comunicação e Ricardo Alexandre 
Cursos On-line. Sou apaixonado pelo que faço e adoro transmitir minha 
experiência de vida àqueles que estão iniciando em suas profissões. 
Por isso fui convidado pela Editora Telesapiens a integrar seu elenco de 
autores independentes. Conte comigo!
Leandro C. Cardoso 
Possuo graduação em Comunicação Social com habilitação em 
Design Digital e mestrado em Tecnologias da Inteligência e Design Digital 
pela PUC-SP, com experiência em direção de arte e criação na área com 
mais de 20 anos. Passei por empresas como a Laureate International 
Universities – FMU, FIAM-FAAM, Universidade Anhembi Morumbi e o 
Centro Paula Souza (FATEC-ETEC). Na Laureate EAD atuei como analista 
de Desenvolvimento Pedagógico Sênior e como coordenador de Curso 
Técnico de Comunicação Visual no Centro Paula Souza. Fui revisor técnico 
e validador de Curso EAD para Clientes Laureate International Universities, 
DeVry Brasil, UNEF, FAESF, Faculdade Positivo, Uninter, Platos Soluções 
Educacionais S.A. (Kroton – Universidade Anhaguera). Sou autor de mais 
de 10 livros didáticos e um dos organizadores da Maratona de Criação 
e Design do Curso de Comunicação Visual da ETEC Albert Einstein. Sou 
apaixonado pelo que faço e adoro transmitir minha experiência de vida 
àqueles que estão iniciando em suas profissões. Por isso fui convidado 
pela Editora Telesapiens a integrar seu elenco de autores independentes. 
Estou muito feliz em poder ajudar você nesta fase de muito estudo e 
trabalho. Conte comigo!
ICONOGRÁFICOS
Olá. Esses ícones irão aparecer em sua trilha de aprendizagem toda vez 
que:
OBJETIVO:
para o início do 
desenvolvimento de 
uma nova compe-
tência;
DEFINIÇÃO:
houver necessidade 
de se apresentar um 
novo conceito;
NOTA:
quando forem 
necessários obser-
vações ou comple-
mentações para o 
seu conhecimento;
IMPORTANTE:
as observações 
escritas tiveram que 
ser priorizadas para 
você;
EXPLICANDO ME-
LHOR:algo precisa 
ser melhor explicado 
ou detalhado;
VOCÊ SABIA?
curiosidades e 
indagações lúdicas 
sobre o tema em 
estudo, se forem 
necessárias;
SAIBA MAIS:textos, 
referências biblio-
gráficas e links para 
aprofundamento do 
seu conhecimento;
REFLITA:
se houver a neces-
sidade de chamar a 
atenção sobre algo 
a ser refletido ou dis-
cutido sobre;
ACESSE:se for pre-
ciso acessar um ou 
mais sites para fazer 
download, assistir 
vídeos, ler textos, 
ouvir podcast;
RESUMINDO:
quando for preciso 
se fazer um resumo 
acumulativo das últi-
mas abordagens;
ATIVIDADES:quando 
alguma atividade de 
autoaprendizagem 
for aplicada;
TESTANDO:
quando o desen-
volvimento de uma 
competência for 
concluído e questões 
forem explicadas;
SUMÁRIO
HTML5 .............................................................................................................. 12
História do HTML ........................................................................................................................... 12
JavaScript ......................................................................................................20
Aplicações do JavaScript ......................................................................................................... 20
Operadores ..........................................................................................................................................24
Bootstrap e frameworks de CSS ...........................................................30
Bootstrap .............................................................................................................................................. 30
Passo a passo para a criação no Bootstrap .................................................................33
Frameworks .........................................................................................................................................35
IDEs ................................................................................................................... 37
Características dos IDEs .............................................................................................................37
Compilador ..........................................................................................................................................43
9
UNIDADE
03
Ambiente para Desenvolvimento Web
10
INTRODUÇÃO
Você sabia que a área do conhecimento dos fundamentos do 
HTML-5, JavaScript, Bootstrap, frameworks de CSS e IDEs é considerada 
uma etapa avançada para os profissionais que irão trabalhar no 
ambiente de desenvolvimento para web? Isso mesmo. É praticamente 
a porta de entrada da etapa final da área mais importante de ambiente 
para desenvolvimento web. A contextualização e o aprendizado dos 
fundamentos do HTML5, JavaScript, Bootstrap, frameworks de CSS 
e IDEs é fundamental para a vida profissional de um desenvolvedor 
web. Para isso, também é importante o conhecimento sobre HTML5, 
operadores e compiladores. Entendeu? Ao longo desta unidade letiva, 
você vai mergulhar neste universo!
Ambiente para Desenvolvimento Web
11
OBJETIVOS
Olá. Seja muito bem-vindo à Unidade 3. Nosso objetivo é auxiliar 
você no desenvolvimento das seguintes competências profissionais até o 
término desta etapa de estudos:
1. Identificar os fundamentos do HTML5 para a construção de 
websites e sistemas online.
2. Entender os fundamentos do Java Script e suas diversas 
derivações, aspectos e bibliotecas para uso em websites.
3. Aplicar os fundamentos da Bootstrap e frameworks de CSS, 
entendendo alguns aspectos das bibliotecas.
4. Compreender o funcionamento de um IDE, observando suas 
características e aspectos positivos quanto à utilização por 
programadores.
Ambiente para Desenvolvimento Web
12 Ambiente para Desenvolvimento Web
HTML5
OBJETIVO:
Ao término deste capítulo, você será capaz de entender 
os principais conceitos evolutivos do HTML5, a versão 
da linguagem de marcação mais utilizada no mundo 
para construção de websites e sistemas on-line. Isso será 
fundamental para o exercício de sua profissão. E então? 
Motivado para desenvolver esta competência? Então, 
vamos lá. Avante!
O HTML5 é a versão da linguagem de marcação HMTML que 
simplificou muito o desenvolvimento de sistemas para web, a partir da 
permissão de construção de páginas com mais relevância para os sistemas 
de buscas e maior facilidade para o entendimento dos conteúdos.
História do HTML 
Na versão HTML5, foram acrescentadas novas tags semânticas. 
A primeira diferença é como se declara que um arquivo é HTML. Basta 
apenas declarar o DOCTYPE HTML para saber qual tipo de charset o 
arquivo vai utilizar. 
Figura 1 – Na versão HTML5, foram acrescentadas novas tags semânticas
Fonte: Freepik
13Ambiente para Desenvolvimento Web
Isso é essencial para o reconhecimento dos caracteres especiais 
que serão utilizados nos textos. Para declará-los, basta abrir a tag meta e 
definir o charset.
DEFINIÇÃO:
Charset é o conjunto de caracteres utilizados para escrevero documento.
Veja a seguir um exemplo de código no HTML5.
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8”>
<title>Título do Arquivo</title>
</head>
<body>
Conteúdo da página...
</body>
</html>
Em relação às tags semânticas, o foco são as melhorias nos sistemas 
de buscas e visando a um melhor entendimento na hora de escrever o 
código HTML. Foram criadas várias tags semânticas, que dão sentido e 
melhoram a legibilidade dos arquivos pelos mecanismos de busca, como 
os robots do Google.
DEFINIÇÃO:
Tag em inglês quer dizer etiqueta. As tags na internet são 
palavras que servem justamente como uma etiqueta e 
ajudam na hora de organizar informações, agrupando 
aquelas que receberam a mesma marcação, facilitando 
encontrar outras relacionadas. Semântica é o estudo do 
significado. Incide sobre a relação entre significantes, 
como palavras, frases, sinais e símbolos, e o que eles 
representam, a sua denotação.
14 Ambiente para Desenvolvimento Web
A seguir, podemos observar a lista com tags semânticas criadas 
para melhor legibilidade dos mecanismos de busca:
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
Serão abordadas algumas tags que têm maior utilização na criação 
de sites, para exemplificar e instruir a uma boa prática na utilização das 
tags semânticas.
Figura 2 – Exemplos de tags semânticas criadas 
para melhor legibilidade dos mecanismos de buscas
Fonte: Sena (2017c, p. 17).
15Ambiente para Desenvolvimento Web
A tag header foi criada para englobar todos os elementos que 
estarão no topo da página ou article, que geralmente representa o menu 
de navegação e a logomarca do site, ou outros elementos introdutórios.
Exemplo:
<article>
<header>
<h1>Título principal</h1>
<p>Conteúdo Introdutório</p>
</header>
<p>Conteúdo complementar.</p>
</article>
A tag section tem a funcionalidade semântica de agrupar conteúdos 
por temas. Assim, quando for criada a página, deve-se agrupar o conteúdo 
dentro das tags <section></section>.
Exemplo:
<section>
<h1>WWF</h1>
<p>O World Wide Fund for Nature é uma Organização não 
governamental internacional que atua nas áreas da conservação, 
investigação e recuperação ambiental, anteriormente chamada World 
Wildlife Fund....</p>
</section>
A tag article especifica um conteúdo autônomo, independente do 
conteúdo restante do site. Ela é utilizada para postagem de fórum, blog 
e artigo de jornais representados no site construído. Ela não precisa estar 
associada dentro de uma section, mas é frequentemente utilizada.
16 Ambiente para Desenvolvimento Web
Exemplo:
<article>
<h1>WWF</h1>
<p>O World Wide Fund for Nature é uma Organização não 
governamental internacional que atua nas áreas da conservação, 
investigação e recuperação ambiental, anteriormente chamada World 
Wildlife Fund....</p>
</article>
A tag aside é utilizada como barra lateral para associar conteúdos 
relevantes ao tema utilizado no conteúdo circundante. 
Exemplo:
<p>O World Wide Fund for Nature é uma Organização não governamental 
internacional que atua nas áreas da conservação, investigação e recuperação 
ambiental, anteriormente chamada World Wildlife Fund....</p>
<aside>
 <h4>Ibama/ICMBio</h4>
 <p>Orgão governamental que fiscaliza e educa contra o degradação 
do meio ambiente. </p>
</aside>
A tag footer é bem parecida com a tag header. Ela vai englobar o 
conteúdo que estará sendo utilizado no rodapé do site.
Exemplo:
<footer>
<p>Autor: Nome do Autor</p>
<p>Email: <a href=”mailto:email@examplo.com”>
email@examplo.com</a>.</p>
</footer>
17Ambiente para Desenvolvimento Web
Essas tags são básicas para a construção do site e uma boa prática 
para conseguir um melhor posicionamento nos resultados dos sites de 
buscas. No HTML5 foram criadas tags para funcionamento das mídias, 
sem precisar usar programas externos (LAWSON; SHARP, 2012). Assim, o 
conteúdo se torna independente de plugins e a navegação do site fica 
mais leve e compatível com todos os novos navegadores. Foram criadas 
as tags de <audio></audio> e <video></video>.
De maneira geral, no HTML5 foram criadas tags para funcionamento 
das mídias sem precisar usar programas externos como o Adobe 
Flash Player, que depois foi até descontinuado. A tag <video></video> 
foi desenvolvida para apresentar vídeos, como o próprio nome diz, 
executando uma grande variedade de formatos de vídeo, como os 
exibidos na tabela a seguir.
Tabela 1 – Formatos de arquivos de vídeo compatíveis com o HTML5
Formato Extensão de arquivo Descrição
Ogg .ogg
Theora Ogg. Desenvolvido pela Xiph.Org 
Foundation. Suportado pelo HTML5.
WebM .webm
WebM. Desenvolvido pelas gigantes da internet, 
Mozilla, Opera, Adobe e Google. Suportado pelo 
HTML5.
MPEG-4 
ou MP4
.mp4
MP4 é utilizado nas novas câmeras de vídeo. É um 
formato de vídeo com uma boa qualidade e um 
baixo tamanho de arquivo final.
Fonte: Sena (2017c, p. 20).
Esses formatos são reconhecidos pelos navegadores sem precisar 
de plugins de terceiros. Ainda, no desenvolvimento há todo um controle 
sobre o player que será apresentado quando a página for renderizada 
pelo navegador. Exemplo:
<video width=”320” height=”240” autoplay>
<source src=”filme.mp4” type=”video/mp4”>
<source src=”filme.ogg” type=”video/ogg”>
Seu Navegador não suporta a tag video. 
</video>
18 Ambiente para Desenvolvimento Web
A tag permite controlar o tamanho do player que será apresentado 
com a possibilidade de definir se o vídeo será executado automaticamente, 
se iniciará o vídeo em mudo, entre outras opções. Já a tag audio é bem 
parecida para a tag vídeo, o que difere é que a mídia reproduzida será 
executada pela a tag audio, reproduzindo os áudios que têm suporte pelo 
navegador.
Tabela 2 – Formatos de áudio compatíveis com o HTML5 e com os principais browsers
Navegador MP3 Wav Ogg
Internet Explorer Sim Não Não
Chrome Sim Sim Sim
Firefox Sim Sim Sim
Safari Sim Sim Não
Opera Sim Sim Sim
Fonte: Sena (2017c, p. 20).
O código a seguir retrata bem a forma de como o HTML5 se 
relaciona com os áudios, por meio da tag audio.
Exemplo:
<audio controls>
<source src=”cavalo.ogg” type=”audio/ogg”>
<source src=”cavalo.mp3” type=”audio/mpeg”>
Seu navegador não tem suporte a tag audio.
</audio>
Esses são os principais conceitos da linguagem HTML5. Como vimos, 
essa versão está repleta de atualizações importantes para o momento em 
que estamos desenvolvendo aplicações on-line cada vez mais inovadoras 
e com uma incrível interação entre o usuário e a aplicação. É importante 
salientar que tudo isso é possível devido ao sistema embasado em 
documentos na forma de hipertextos, com imagens, sons e filmes digitais 
interligados por meio de hiperlinks, que utilizam hipermídia, chamado de 
WWW, ou World Wide Web.
19Ambiente para Desenvolvimento Web
RESUMINDO:
E então? Gostou do que lhe mostramos? Aprendeu mesmo 
tudinho? Agora, só para termos certeza de que você 
realmente entendeu o tema de estudo deste capítulo, 
vamos resumir tudo o que vimos. Você deve ter aprendido 
que a linguagem de marcação HTML surgiu com a finalidade 
de criar a marcação de hipertextos que são utilizados até 
hoje em dia. A versão do HTML5 proporcionou mudanças e 
evoluções que foram aplicadas. É importante uma revisão 
da história do termo HTML (Hypertext Markup Language). 
Em português, significa Linguagem de Marcação de 
Hipertexto, criada no ano de 1990 por Tim Berners-Lee para 
compartilhar pesquisas acadêmicas entre universidade. 
Já que se levava muito tempo para divulgar um artigo 
acadêmico ou pesquisas entre os centros universitários, 
o HTML foi uma linguagem de marcação utilizada para 
criar versões eletrônicas das pesquisas desenvolvidas nas 
universidades, que eram as únicas instituições que tinham 
acesso à internet para troca de informações.
20 Ambiente para Desenvolvimento Web
JavaScript 
OBJETIVO:
Ao término deste capítulo, vocêserá capaz de compreender 
os conceitos básicos sobre JavaScript e as diversas 
derivações de utilização em websites, conhecendo seus 
principais aspectos e bibliotecas. Isso será fundamental 
para o exercício de sua profissão. E então? Motivado para 
desenvolver esta competência? Então, vamos lá. Avante!
Criadas pela Netscape em parceria com a Sun Microsystems, as 
linguagens JavaScript e Java são completamente diferentes, tanto no 
conceito quanto no design.
Aplicações do JavaScript
O JavaScript foi inventado por Brendan Eich, em 1995, e tornou-se 
um padrão ECMA em 1997. Porém, um ano antes, a Microsoft desenvolveu 
uma linguagem idêntica, chamada JScript, que foi lançada em agosto de 
1996 no IE 3.0 – era o início da “Guerra dos Navegadores”.
Figura 3 – O JavaScript foi inventado em 1995. Porém, um ano antes, a Microsoft 
desenvolveu uma linguagem idêntica, era o início da “Guerra dos Navegadores”
Fonte: Freepik
Em novembro de 1996, a Netscape enviou para a ECMA International 
as especificações do JavaScript, a fim de padronizá-lo. A primeira edição 
padronizada foi batizada de ECMA-262.
21Ambiente para Desenvolvimento Web
DEFINIÇÃO:
ECMA-262 é o nome oficial da norma. ECMA-Script é o 
nome oficial da linguagem de programação.
Adaptado e homologado pela ECMA General Assembly, em 
junho de 1997, esse padrão é seguido atualmente por várias outras 
linguagens, inclusive a Action Script. Tanto o Java Script quanto o JScript 
são compatíveis com o ECMA Script; porém, cada um provê recursos 
adicionais não descritos na especificação ECMA. O JavaScript é uma das 
três mais populares linguagens de programação do mercado global. 
Assim, é importante que os desenvolvedores web aprendam:
 • HTML, para definir o conteúdo de páginas da web.
 • CSS, para especificar o layout de páginas da web.
 • JavaScript para programar o comportamento das páginas web.
Com o JavaScript, você pode criar aplicações que interagem 
diretamente com a forma de modelar problemas do mundo real. 
JavaScript é uma linguagem interpretada pelo navegador web. Você pode 
usá-la para adicionar comportamento dinâmico, armazenar informações 
e lidar com solicitações e respostas em um website. 
Figura 4 – O JavaScript permite criar aplicações que interagem 
diretamente com a forma de modelar problemas do mundo real 
Fonte: Freepik
22 Ambiente para Desenvolvimento Web
Para podermos ver os resultados de um código desenvolvido 
em JavaScript, é preciso criar um arquivo em HTML simples, como no 
exemplo a seguir.
<!DOCTYPE HTML>
<html>
<body>
<script>
alert( Olá, mundo!’ ); 
</script>
<p>...Depois do script.</p>
</body>
</html>
Também é possível, e recomendado pela W3C, distribuir os códigos 
JavaScript em vários arquivos, para tornar mais simples seu entendimento. 
Afinal, um monte de código JavaScript em um só arquivo é algo difícil de 
se entender. O arquivo de script está ligado ao HTML com o atributo src, 
como mostra o exemplo a seguir.
<script src=”/path/to/script.js”></script>
No exemplo, /path/to/script.js é um caminho absoluto para o 
arquivo que contém o script. A partir da raiz do site, também é possível 
fornecer um caminho relativo para a página atual. Por exemplo, src=”script.
js” significaria um arquivo “script.js” na pasta atual. Podemos fornecer uma 
URL completa, como no exemplo.
<script
src=”https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js”>
</script>
Como regra geral, apenas os scripts mais simples são codificados 
em HTML. Os mais complexos devem ser salvos em arquivos separados. 
Dessa forma, conseguimos ganhar em otimização durante o carregamento 
da página no navegador. O benefício de um arquivo separado é que o 
23Ambiente para Desenvolvimento Web
navegador irá baixá-lo e, em seguida, armazená-lo. Depois disso, outras 
páginas que acessam o mesmo script vão levá-lo a partir do cache, em 
vez de baixá-lo. Portanto, o arquivo é realmente descarregado somente 
uma vez; isso economiza tráfego e torna as páginas mais rápidas.
As funcionalidades básicas do JavaScript direcionam nossa 
atenção para os tipos de blocos de código encontrados comumente, 
como expressões condicionais, laços de repetição, funções e eventos 
controlados. Vamos começar o entendimento sobre programação em 
JavaScript pelo conhecimento das características dessas estruturas 
de código. As declarações são uma boa forma de iniciarmos. Elas são 
delimitadas com um ponto e vírgula.
Exemplo:
alert(Olá); alert(Mundo);
Normalmente, uma linha-break também é tratada como um 
delimitador, de modo que também funcionaria.
Exemplo:
alert(“Haverá um erro após esta mensagem”)
[1, 2].forEach(alert)
Também são importantes as variáveis, que são espaços de memória 
RAM reservados para armazenar temporariamente um valor que será útil 
para o processamento de um programa. Variáveis e constantes podem 
ser declaradas usando:
 • let (declarações de variáveis).
 • const (declarações de constantes, que não podem ser alteradas).
 • var (estilo antigo, conforme veremos mais adiante).
Um nome de variável pode incluir:
 • Letras e algarismos, mas o primeiro caractere não pode ser um 
algarismo.
 • Caracteres (letras e símbolos especiais disponíveis no teclado).
24 Ambiente para Desenvolvimento Web
 • Alfabetos não latinos e hieróglifos, mas geralmente não são 
usados.
Exemplo:
let x = 5;
x = “John”;
Em relação à classificação dos dados, podemos considerar:
 • Number – tanto de ponto flutuante quanto de números inteiros.
 • String – para cadeia de caracteres (alfanuméricos ou literais).
 • Boolean – para valores lógicos do tipo: true/false (verdadeiro/
falso).
 • Null – constante com valor null, significa “vazio” ou “inexistente”.
 • Undefined – constante com valor undefined, significa “não atribuído”.
 • Object symbol – estruturas de dados complexas.
Operadores
São vários operadores suportados pelo JavaScript, por exemplo, um 
operador de atribuição que atribui um valor ao operando à sua esquerda 
com base no valor do operando à direita. O operador de atribuição básico 
é o sinal de igual (=), que atribui o valor do operando à direita ao operando 
à esquerda. Isto é, x = y atribui o valor de y a x. 
Já um operador de comparação compara seus operandos e retorna 
um valor lógico com base em se a comparação é verdadeira ou falsa. 
Os operandos podem ser numéricos, strings, lógicos ou objetos. Strings 
são comparadas com base em ordenação lexicográfica, utilizando valores 
unicode. Na maioria dos casos, se dois operandos não são do mesmo tipo, 
o JavaScript tenta convertê-los para um tipo apropriado. Isso geralmente 
resulta na realização de uma comparação numérica. 
25Ambiente para Desenvolvimento Web
As únicas exceções a essa regra são os operadores == e o !==, que 
realizam comparações de igualdade e desigualdade “estritas”. Esses 
operadores não tentam converter os operandos em tipos compatíveis 
antes de verificar a igualdade. A tabela a seguir descreve os operadores 
de comparação com base nos valores atribuídos às variáveis declaradas.
Tabela 3 – Operadores de comparação
Operadores de comparação
Operador Descrição Exemplos que retornam verdadeiro
Igual (==)
Retorna verdadeiro caso os 
operandos sejam iguais.
3 == var1
“3” == var1
3 == ‘3’
var var1 = 3;
var var2 = 4;
Fonte: Sena (2017a, p. 18).
Os operadores aritméticos tomam valores numéricos (sejam literais 
ou não) como seus operandos e retornam um único valor numérico. 
Os operadores aritméticos padrão são os de soma (+), subtração (-), 
multiplicação (*) e divisão (/). Esses operadores trabalham da mesma 
forma, como na maioria das linguagens de programação. Quando os 
utilizamos com números de ponto flutuante, note que a divisão por zero 
produz um NaN.
Exemplo:
console.log(1 / 2); /* imprime 0.5 */
console.log(1 / 2 == 1.0 / 2.0); /* isto também é verdadeiro */0
Os operadores bit a bit tratam seus operandos como um conjunto 
de 32 bits (zeros euns), em vez de tratá-los como números decimais, 
hexadecimais ou octais. Por exemplo, o número decimal nove possui uma 
representação binária 1001. Operadores bit a bit realizam suas operações 
nessas representações, mas retornam valores numéricos padrões do 
JavaScript. A tabela a seguir resume os operadores bit a bit do JavaScript.
26 Ambiente para Desenvolvimento Web
Tabela 4 – Operadores bit a bit
OPERADOR EXPRESSÃO DESCRIÇÃO
AND a & b
Retorna um 1 para cada posição em que os 
bits da posição correspondente de ambos 
operandos sejam uns.
OR a | b
Retorna um 0 para cada posição em que os 
bits da posição correspondente de ambos os 
operandos sejam zeros.
XOR a ^ b
Retorna um 0 para cada posição em que os bits 
da posição correspondente são os mesmos.
[Retorna um 1 para cada posição em que os bits 
da posição correspondente sejam diferentes.]
NOT ~ a Inverte os bits do operando.
Deslocamento à 
esquerda
a << b
Desloca a em representação binária b bits à 
esquerda, preenchendo com zeros à direita.
Fonte: Sena (2017a, p. 19).
Operadores lógicos são utilizados tipicamente com valores 
booleanos (lógicos). Entretanto, os operadores && e || na verdade retornam 
o valor de um dos operandos especificados, de forma que, se esses 
operadores forem utilizados com valores não booleanos, eles possam 
retornar um valor não booleano. Os operadores lógicos são descritos na 
seguinte tabela.
Tabela 5 – Operadores lógicos ou booleanos
OPERADOR UTILIZAÇÃO DESCRIÇÃO
AND lógico 
(&&)
expr1 && 
expr2
(E lógico) – Retorna expr1 caso possa ser convertido 
para falso; senão, retorna expr2. Assim, quando 
utilizado com valores booleanos, && retorna 
verdadeiro caso ambos os operandos sejam 
verdadeiros; caso contrário, retorna falso.
OU lógico (||) expr1 || expr2
(OU lógico) – Retorna expr1 caso possa ser convertido 
para verdadeiro; senão, retorna expr2. Assim, quando 
utilizado com valores booleanos, || retorna verdadeiro 
caso ambos os operandos sejam verdadeiros; se 
ambos forem falsos, retorna falso.
NOT lógico (!) !expr
(Negação lógica) – Retorna falso caso o único 
operando possa ser convertido para verdadeiro; 
senão, retorna verdadeiro.
Fonte: Sena (2017a, p. 21).
27Ambiente para Desenvolvimento Web
Além dos operadores de comparação, que podem ser utilizados 
em valores string, o operador de concatenação (+) concatena dois valores 
string, retornando outra string, que é a união dos dois operandos.
Exemplo:
console.log(“minha “+”string”); // exibe a string 
“minha string”.
O operador condicional é o único operador JavaScript que utiliza 
três operandos. O operador pode ter um de dois valores com base em 
uma condição. A sintaxe é:
condicao ? valor1 : valor2
Se condição for verdadeira, o operador terá o valor de valor1, caso 
contrário, terá o valor de valor2. Você pode utilizar o operador condicional 
em qualquer lugar em que utilizaria um operador padrão.
var status = (idade >= 18) ? “adulto” : “menor de idade”;
Essa declaração atribui o valor “adulto” à variável status caso idade 
seja dezoito ou mais; caso contrário, atribui o valor “menor de idade”. Já 
o operador vírgula (,) simplesmente avalia ambos os seus operandos e 
retorna o valor do segundo. Esse operador é utilizado primariamente 
dentro de um laço  “for”  para permitir que múltiplas variáveis sejam 
atualizadas a cada vez, por meio do laço. Por exemplo, se “a” é uma matriz 
bidimensional com 10 elementos em um lado, o código a seguir utiliza o 
operador vírgula para incrementar duas variáveis de uma só vez. O código 
imprime os valores dos elementos diagonais da matriz.
for (var i = 0, j = 9; i <= 9; i++, j--)
document.writeln(“a[“ + i + “][“ + j + “] = “ + a[i][j]);
O operador unário é aplicado em uma operação com apenas 
um operando. O operador  delete, por exemplo,  apaga um objeto, uma 
propriedade de um objeto ou um elemento no índice especificado de 
uma matriz. A sintaxe é:
28 Ambiente para Desenvolvimento Web
Exemplo:
delete nomeObjeto;
delete nomeObjeto.propriedade;
delete nomeObjeto[indice];
delete propriedade; // válido apenas dentro de uma declaração with
Em que: nomeObjeto é o nome de um objeto; propriedade é uma 
propriedade existente; e indice é um número inteiro que representa a 
localização de um elemento em uma matriz. Já operador relacional 
compara seus operandos e retorna um valor booleano com base em 
se a comparação é verdadeira. O operador in retorna verdadeiro se a 
propriedade especificada estiver no objeto especificado. A sintaxe é:
nomePropriedadeOuNumero in nomeObjeto
Em que: nomePropriedadeOuNumero é uma string ou uma 
expressão numérica que representa um nome de propriedade ou um 
índice de um array, e nomeObjeto é o nome de um objeto.
DEFINIÇÃO:
Array é o mesmo que um vetor ou uma matriz. No caso da 
ciência da computação, estamos falando de uma variável 
composta, podendo conter diversos valores, indexados por 
um (vetor) e dois ou mais (matriz) argumentos numéricos.
Em ciência da computação, booleano é um tipo de dado primitivo 
que possui dois valores que podem ser considerados como 0 ou 1, falso ou 
verdadeiro. Esse tipo de dado é chamado de booleano em homenagem 
a George Boole, que definiu um sistema de lógica algébrica pela primeira 
vez na metade do século XIX. Ele é usado em operações lógicas, como 
conjunção, disjunção, disjunção exclusiva, equivalência lógica e negação, 
que correspondem a algumas das operações da álgebra booleana. 
29Ambiente para Desenvolvimento Web
As variáveis utilizadas em JavaScript são de tipagem dinâmica. 
Elas podem armazenar qualquer valor que você desejar armazenar para 
utilizar em sua lógica. Inclusive, podem ser redeclaradas como sendo de 
outro tipo em um mesmo programa. Também é importante no JavaScript 
o conhecimento de outras funções, como a eval, que interpreta e executa 
strings com código JavaScript embutido. E os três aspectos que são 
encontrados nas variáveis Javascript são: um identificador, escopo e um 
tipo de dados específico.
RESUMINDO:
E então? Gostou do que lhe mostramos? Aprendeu mesmo 
tudinho? Agora, só para termos certeza de que você 
realmente entendeu o tema de estudo deste capítulo, 
vamos resumir tudo o que vimos. Você deve ter aprendido 
que Javascript é considerado um dos principais níveis 
de programação orientada a objetos. O Javascript é uma 
linguagem leve, interpretada e embasada em objetos 
com funções de primeira classe, mais conhecida como 
a linguagem script, utilizada em vários outros ambientes 
sem browser, como node.js ou Apache CouchDB. É uma 
linguagem script multiparadigma, dinâmica e embasada 
em protótipos, suportando vários estilos de programação, 
como orientado a objetos, imperativo e funcional.
30 Ambiente para Desenvolvimento Web
Bootstrap e frameworks de CSS
OBJETIVO:
Ao término deste capítulo, você será capaz de compreender 
os conceitos básicos relativos a Bootstrap e aos diversos 
frameworks de CSS, conhecendo ainda os aspectos das 
bibliotecas. Isso será fundamental para o exercício de 
sua profissão. E então? Motivado para desenvolver esta 
competência? Então, vamos lá. Avante!
Focado no conceito de framework mobile-first, o Bootstrap é um 
tipo de biblioteca que contém diversos códigos com o objetivo de poupar 
tempo na criação de um projeto. Buscando tornar o site responsivo, o 
Bootstrap facilita essa tarefa, disponibilizando códigos pré-prontos.
Bootstrap
Em 2011, a estrutura Bootstrap foi lançada para o público geral, 
inteiramente de graça, por meio da plataforma Github. A definição do 
Bootstrap como sendo uma biblioteca vem do fato de ele ser, basicamente, 
uma coleção de funções prontas para serem reutilizadas, que podem ser 
personalizadas conforme a necessidade do programador. Um site feito 
pelo Bootstrap permite ao desenvolvedor a criação de um código “limpo”, 
sem conflitos em seus elementos.
ACESSE:
Você pode conhecer e navegar na Github. Clique aqui.
O Bootstrap utilizacomo base as linguagens HTML, CSS e JavaScript, 
que é uma linguagem de programação com a finalidade principal de criar 
páginas web dinâmicas e de fácil navegação (DUCKETT, 2016). O Bootstrap, 
como observamos em sua definição, é um framework mobile-first, mas, o 
que significa isso? Um site mobile-first é aquele que, primeiramente, assume 
a forma de um smartphone, com um tamanho reduzido, adaptando-se 
posteriormente a um dispositivo maior, como um tablet.
https://github.com/
31Ambiente para Desenvolvimento Web
Figura 5 – Site mobile-first primeiramente assume a forma 
de um smartphone com um tamanho reduzido
Fonte: Freepik
Assim, em um desenvolvimento de site, primeiramente você deverá 
projetá-lo para abrir em um smartphone, ou seja, em uma tela menor. 
Conforme seu desenvolvimento, você deverá pensar em telas de tablets, 
que são médias, e depois telas de notebooks e desktops.
SAIBA MAIS:
Quer saber mais sobre os assuntos tratados até agora? 
Visite o site Tableless. Lá são disponibilizados diversos 
tutoriais relativos à criação do mobile-first. Clique aqui.
E quais são as vantagens de tal método de criação?
 • A tela fica reduzida.
 • Rapidez no acesso do site em smartphones, já que é desenvolvido, 
primeiramente, para eles.
https://tableless.com.br/mobile-first-a-arte-de-pensar-com-foco/
32 Ambiente para Desenvolvimento Web
 • O site é otimizado para o usuário, e sua navegação se torna mais 
rápida e eficiente, tornando a sua experiência significativamente 
melhor.
Vimos o que é um framework mobile-first e como ele se adapta 
a diversos dispositivos, começando pelo mobile. Essa adaptação se dá 
pela criação de um site responsivo. Já vimos que o Bootstrap é uma 
ferramenta para tornar o site responsivo, mas você sabe o que isso 
significa? Chamados também de sites flexíveis, os sites responsivos são 
aqueles que se adaptam aos tamanhos de tela e aos dispositivos pelos 
quais usuários escolherem para acessar. Isso quer dizer que ele se adapta 
a desde uma tela maior de um notebook até a tela de um smartphone, 
sem que o conteúdo do site seja perdido ou o layout se torne difícil ou até 
impossível para o usuário ler.
Figura 6 – Sites flexíveis ou responsivos são os que se adaptam aos tamanhos 
de tela e aos dispositivos pelos quais os usuários estão acessando 
Fonte: Freepik
33Ambiente para Desenvolvimento Web
Visando dar ao site uma movimentação apenas vertical quanto à 
rolagem de tela, para que o usuário só precise arrastar o conteúdo para 
cima e para baixo, o site responsivo reposiciona os menus e as barras 
interativas que ficariam de fora em uma tela menor. Reposicionando a 
disposição dos conteúdos exibidos, de modo dinâmico, a legibilidade 
do site estará sempre garantida em uma situação dessas. Devido ao uso 
massivo de smartphones, um site responsivo é praticamente obrigatório 
para uma empresa atingir o potencial máximo. Alguns dos pontos que 
confirmam essa afirmativa é a própria Google, que anunciou em 2014 que 
não mais indexaria sites não responsivos a partir de 2018. 
Passo a passo para a criação no Bootstrap
O primeiro passo para a criação de um código responsivo e mobile-
first por meio do Bootstrap é criar um código básico em HTML. Intitule 
esse arquivo de index.htm ou simplesmente escreva o código conforme 
a figura seguir.
Figura 7 – Exemplo de código básico em HTML
Fonte: Sena (2017d, p. 16).
34 Ambiente para Desenvolvimento Web
O segundo passo é criar um segundo arquivo, intitulado style.css e 
escrever um código de marcação, e o terceiro e último passo básico para 
a criação de um site responsivo com o Bootstrap é definir o layout. Um dos 
mais usados é o chamado Full Widht. Nele, a página ocupa todo o espaço 
detectado da tela. O código utilizado é apresentado na figura seguir.
Figura 8 – Código utilizado para a criação de um site 
responsivo com o Bootstrap com atributo fixo “container-fluid”
Fonte: Sena (2017d, p. 17).
Outro bastante utilizado também é o fixo, sua marcação é conforme 
exemplificado na figura a seguir.
Figura 9 – Código utilizado para a criação de um site 
responsivo com o Bootstrap com atributo fixo “container”
Fonte: Sena (2017d, p. 17).
35Ambiente para Desenvolvimento Web
Todas essas marcações de códigos devem ser escritas em um dos 
editores de texto. Deve-se tomar cuidado com o contexto de ataques 
externos ao sistema, que consiste, tecnicamente, de um bootstrap que 
é compilado e executado no sistema sob ataque. Esses malwares são 
extremamente danosos para a rede de computadores
Frameworks
Como vimos, frameworks são locais nos quais existem inúmeras 
marcações e códigos pré-fabricados, que visam, primeiramente, facilitar 
a vida daqueles que programam para front-end.
O desenvolvedor front-end é aquele que faz sites para web, 
trabalhando, por exemplo, com HTML e CSS, para o desenvolvimento de 
páginas que servirão de interface para o usuário final.
Agora que já vimos o que são frameworks, vamos conhecer alguns 
modelos. Um deles é como o Bootstrap, o Foudantion 5 é um framework 
mobile-first que disponibiliza, além da biblioteca, cursos que auxiliam o 
programador a conhecer essa ferramenta.
ACESSE:
Conheça mais sobre esse framework no site oficial. Clique 
aqui.
O PhoneGap, desenvolvido pela Adobe, é um framework gratuito 
que possibilita a criação de aplicativos para dispositivos móveis por meio 
de HTML, CSS e JavaScript, sem que você precise conhecer a linguagem 
específica para o desenvolvimento desses aplicativos. O próprio framework 
modifica o código interno do site para gerar o aplicativo.
ACESSE:
Conheça mais sobre o PhoneGap no site oficial. Clique aqui.
http://foundation.zurb.com
http://foundation.zurb.com
https://phonegap.com
36 Ambiente para Desenvolvimento Web
O UI-Kit, criado pela YOOtheme, é um framework simples e 
intuitivo. Ele trabalha com desenvolvimento modular, desenvolvendo sites 
responsivos. Sua interface gráfica pode ser alterada antes de baixar.
ACESSE:
Conheça mais sobre o UI-Kit no site oficial. Clique aqui.
O Pure, criado pela equipe do Yahoo, tem como diferencial a leveza, 
visto que ele tem menos de 100kb de arquivo CSS, com todas as funções 
básicas de framework. Está disponível no link: https://purecss.io.
RESUMINDO:
E então? Gostou do que lhe mostramos? Aprendeu mesmo 
tudinho? Agora, só para termos certeza de que você 
realmente entendeu o tema de estudo deste capítulo, 
vamos resumir tudo o que vimos. Você deve ter aprendido 
que é muito importante conhecer as características e 
aplicabilidades do Bootstrap, que é uma ferramenta popular 
utilizada para criação de projetos. Criado inicialmente para 
resolver problemas internos da equipe do Twitter, em 2011, 
o Bootstrap foi desenvolvido pelos engenheiros Mark Otto 
e Jacob Thorton, que buscavam facilitar o trabalho de 
toda a equipe por meio da criação de uma única estrutura 
para o desenvolvimento. É importante entender melhor o 
conceito de framework mobile-first, tendo em vista o grande 
potencial que esse framework tem, atualmente, em uma 
sociedade que valoriza tanto os dispositivos móveis. Da 
mesma forma, é imprescindível conhecer outros tipos de 
frameworks de CSS e como eles funcionam, observando 
suas aplicabilidades, como eles são utilizados e como se 
dá a recepção deles no mercado.
https://getuikit.com
37Ambiente para Desenvolvimento Web
IDEs
OBJETIVO:
Ao término deste capítulo, você será capaz de identificar 
o que é IDE e como ele funciona, observando suas 
características e aspectos positivos quanto à sua utilização 
por programadores. Isso será fundamental para o exercício 
de sua profissão. E então? Motivado para desenvolver esta 
competência? Então, vamos lá. Avante!
PHP, JAVA e C# são linguagens bastante usadas entre os 
desenvolvedores web, assim como o uso de máquinas virtuais durante o 
desenvolvimento de um sistema para a web.
Características dos IDEs
IDE (Integreted Development Environment), traduzindodo inglês, é 
o ambiente de desenvolvimento integrado, considerado uma plataforma 
de desenvolvimento robusta. Permite desenvolver sistemas com rapidez 
e praticidade devido à ferramenta permitir utilizar várias funcionalidades 
para facilitar o desenvolvimento do seu software. 
Focado na facilitação da programação para o desenvolvedor, os 
IDEs são conhecidos como ambientes nos quais o desenvolvimento de 
aplicativos acontece de maneira integrada, fazendo com que diversas 
ferramentas e programas que sirvam para um objetivo específico 
conversem entre si.
Do inglês Integrated Development Environment, sua tradução para o 
português fica Ambiente de Desenvolvimento Integrado, e seu nome já 
denomina como funciona essa ferramenta. É um meio de interligar melhor 
diversas outras ferramentas, suportando, assim, linguagens diversas.
38 Ambiente para Desenvolvimento Web
Figura 10 – IDE é um meio de interligar melhor diversas 
outras ferramentas, suportando, assim, linguagens diversas
IDE
Integrated
Development
Projeto
Programa 
fonte
Fonte: Sena (2017b, p. 14).
O IDE é utilizado, como falamos, principalmente para aumentar a 
produtividade, mas a grande questão que se põe atualmente é se essa 
produtividade pode afetar a qualidade da aplicação. Por isso, é válido 
ressaltar que, apesar de ser uma ferramenta útil e que pode auxiliar 
bastante o programador, você, se quiser utilizar, já deve conhecer o 
básico. Isso porque ela não é uma ferramenta com nível de complexidade 
considerável, podendo ocorrer erros que prejudicariam o conteúdo final, 
e se o programador não tiver uma base sólida, ele pode não reconhecer e 
“deixar passar” um erro grande.
Para o programa ser chamado de IDE, precisa ter algumas 
funcionalidades específicas que o diferenciem de um simples editor. Essas 
características para um IDE é ter a capacidade de compilar bibliotecas 
completas de linguagens. É muito comum em um IDE ter uma ferramenta 
para debuggers, que são ferramentas que apontam os erros de sintaxe 
e de programação antes de compilar o software, assim o desenvolvedor 
pode ganhar tempo no desenvolvimento.
39Ambiente para Desenvolvimento Web
Figura 11 – Para um programa ser caracterizado como IDE, é necessário possuir 
algumas funcionalidades específicas que o diferenciem de um simples editor
Fonte: Freepik
Uma das desvantagens em utilizar um IDE para o desenvolvimento é ter 
um conhecimento mais aprofundado na linguagem que você vai desenvolver 
seu site ou programa, por exemplo, se não souber as tags devidas, você terá 
dificuldade para usar o recurso de autocompletar de muitos IDEs que o 
trazem nativamente. Muitos dos IDEs vêm com um emulador para simular a 
aplicação antes de compilar como definitivo. Por exemplo, o próprio Brackets 
vem com um servidor local para mostrar em tempo real como o site que está 
sendo desenvolvido está ficando, e o IDE pode:
 • Fazer a depuração dos programas, possibilitando assim a mudança 
ágil dos códigos.
 • Administrar os diversos projetos, possibilitando alterações.
 • Possibilitar o teste do código, criando e executando deploys 
previamente delimitados pelo programador. Essa ferramenta de 
teste é garantidora da boa funcionalidade do programa, o que é 
uma grande vantagem que essas ferramentas possibilitam.
40 Ambiente para Desenvolvimento Web
 • Possibilitar a análise dos documentos ou códigos de maneira 
estática.
 • Possibilitar observar a versão do programa, bem como controlar, 
podendo assim formatar ou instalar novas versões.
 • Permitir acesso facilitado a bancos de dados previamente 
delimitados ou criados pelo programador.
 • Ter função de criar códigos específicos para cada linguagem, o 
que cria um limitador, mas também facilita a vida do programador 
caso queira mexer com um único código ou tipo de linguagem.
 • Facilitar o acesso ao código ou aos documentos que estão linkados 
nele, auxiliando o programador a encontrá-los mais rápido e, 
consequentemente, otimizar seu tempo de trabalho.
 • Ajudar em tarefas que estão relacionadas com a edição 
propriamente dita do código, tendo funcionalidades como o 
autocomplete, que completa o código sem que você precise 
digitar.
O mercado dispõe de diversos IDEs gratuitos e pagos para 
desenvolvimento. Entre os pagos podemos citar Visual Studio, WebStorm, 
Dreamweaver, Intellij IDEA, entre outros. Para as opções gratuitas, temos 
várias ferramentas como Eclipse, Netbeans, Android Studio, Brackets, 
Aptana e muitos outros que podem ser encontrados na internet para baixar 
e utilizar. O Visual Studio, criado pela Microsoft, serve, principalmente, 
para programações que envolvam as linguagens da empresa, que são o 
C, C++ e o C#, podendo ser utilizada também para JavaScript e Python. Ele 
é uma ótima ferramenta e possui como vantagem o autopreenchimento 
para completar códigos que você ainda não finalizou, além de possuir a 
“Navegação no contexto”, evitando que você se perca no código. 
41Ambiente para Desenvolvimento Web
Figura 12 – O Visual Studio, criado pela Microsoft, é focado principalmente nas linguagens 
C, C++ e o C#, podendo ser utilizado também para JavaScript e Python
Fonte: Freepik
Esse IDE é uma ótima ferramenta para corrigir e evitar erros na 
programação, pois sua interface gráfica aponta os erros e eles podem 
ser identificados rapidamente, tanto na própria programação quanto por 
ícones que mostram que o código está errado. Outro ponto a ser levado é 
seu layout, que é fácil e intuitivo. A desvantagem desse IDE é que ele ainda 
é voltado para funcionar melhor com as linguagens Microsoft, tornando-
se limitado. Ele é gratuito apenas para estudantes ou para programação 
para código livre. Se quiser utilizá-lo para trabalhar com código fechados, 
você deve comprar uma licença.
ACESSE:
Conheça mais sobre essa ferramenta e faça o download. 
Clique aqui.
A Eclipse, considerada uma ferramenta poderosa quando tratamos 
de IDE, permite que você utilize diversas linguagens, sendo ainda 
“personalizável”, já que permite a instalação de plug-ins para aumento da 
produtividade. Essa ferramenta não é específica para desenvolvimento 
web, sendo mais conhecida para desenvolvimento de Java, Python 
e Perl, mas roda também PHP, que é uma linguagem utilizada para 
desenvolvimento para web (MILETTO; BERTAGNOLLI, 2014). Como 
vantagem, temos o fato dessa ferramenta ser gratuita, o que facilita o seu 
acesso pelos programadores.
https://www.visualstudio.com/pt-br/
42 Ambiente para Desenvolvimento Web
ACESSE:
Conheça mais sobre essa ferramenta e faça download. 
Clique aqui.
O Netbeans permite criar aplicativos multiplataformas, por exemplo, 
aplicativos para web, smartphones e computadores. Sendo assim, é muito 
popular entre programadores, devido à sua capacidade de adaptação e 
criação para diferentes linguagens. 
Figura 13 – O Netbeans permite criar aplicativos multiplataformas
 
Fonte: Freepik
Esse aplicativo é gratuito e pode ser executado nos principais 
sistemas operacionais, como Linux, Windows e MAC OS X, que é o 
sistema operacional da Apple.
ACESSE:
Conheça mais sobre essa ferramenta e faça download. 
Clique aqui.
https://www.eclipse.org/downloads/
https://netbeans.org/downloads
43Ambiente para Desenvolvimento Web
O Aptana, embasado no Eclipse, ferramenta que vimos previamente, 
é um IDE gratuito, que pode, por meio de plug-ins, ser utilizado em 
conjunto com o Eclipse. Essa ferramenta possibilita a interação de 
diversas linguagens, como HTML, CSS, JavaScript, PHP e muitas outras, 
sendo utilizada para desenvolvimento web. Está disponível em: http://
www.aptana.com. Também é importante considerar outros recursos como 
o SOAP, que não é apenas um editor de textos, é um IDE voltado para 
desenvolvimento em Java.
Compilador
Uma ferramenta fundamental do IDE é o compilador. Ele funciona 
como uma ferramenta de análise dos códigos, possibilitando executá-los. O 
compilador serve como umtipo de tradutor. Ele pega um código humano, 
isto é, uma linguagem que é compreensível para os humanos, e traduz para 
a linguagem da máquina, permitindo a sua execução. E como funciona o 
processo de compilação? Vamos nos entender os passos a seguir: 
 • Inserção do código-fonte na “linguagem humana”: antes de 
qualquer coisa, você deve inserir o código que deseja que seja 
traduzido pelo compilador. É esse código que irá se transformar 
no resultado final, isto é, a compilação. 
 • Realização das análises: nesta etapa, são realizadas três 
análises básicas. A léxica, que é a primeira, faz a leitura do código, 
identificando o que é cada palavra e linha. Nesta fase, linhas em 
branco, formatação e comentários são excluídos a fim de otimizar 
a análise. A próxima análise é a sintática. Nesta fase, é realizada a 
“conversão” ou o estudo dos códigos gerados pela análise léxica, 
observando se eles podem ser lidos pela gramática. Por fim, mas 
não menos importante, são analisados os sentidos, na análise 
semântica, já que nenhuma das análises anteriores o fizeram.
 • Código intermediário: após realizar as três análises, é gerado 
um código, que ainda não é o final, que é chamado de código 
intermediário. Nesta etapa, o código já está quase legível para a 
máquina, mas ainda precisa ser otimizado. A otimização se dá na 
próxima fase. 
http://www.aptana.com
http://www.aptana.com
44 Ambiente para Desenvolvimento Web
 • Otimizar o código: nesta etapa, o código é lido e tenta-se otimizar 
e melhorar a leitura ao máximo, tentando criar um código eficaz e 
sem bugs. 
Ficou difícil imaginar essas etapas? Observe o fluxograma a seguir.
Figura 14 – Fluxograma do processo de compilação
Código 
final
Otimização 
do código
Criação 
do código 
intermediário 
Realização 
das análises 
1 - Análise 
léxica
2 - Análise 
sintática
3 - Análise 
semântica
Inserção 
do código- 
fonte 
Fonte: Sena (2017c, p. 22).
Por último, o código final. Chegamos, finalmente, à última etapa 
da compilação. Nesta etapa, o código já está totalmente traduzido e um 
código executável já foi criado. É importante salientar que são apenas 
exemplos. Os softwares podem sofrer alterações ou até mesmo serem 
descontinuados. Dessa maneira, é importante estar sempre atualizado e 
verificar sempre a documentação oficial das empresas desenvolvedoras.
45Ambiente para Desenvolvimento Web
RESUMINDO:
E então? Gostou do que lhe mostramos? Aprendeu mesmo 
tudinho? Agora, só para termos certeza de que você 
realmente entendeu o tema de estudo deste capítulo, 
vamos resumir tudo o que vimos. Você deve ter aprendido 
que, com o objetivo principal de facilitar o desenvolvimento 
e o trabalho dos programadores, os IDEs são ferramentas 
quase que fundamentais para o aumento de produtividade 
e o desenvolvimento de aplicativos de maneira mais rápida 
e eficaz. É importante conhecer esta ferramenta e como 
ela deve ser utilizada pelos profissionais que trabalham 
no desenvolvimento de aplicativos. Para isso, vale o 
conhecimento prévio de editores de HTML e também 
dos conceitos de linguagem de programação, para 
entender um pouco o que é IDE e quais são as vantagens 
e desvantagens de usar ferramentas como essas. IDE 
(Integreted Develpment Environment), traduzindo do inglês, 
é o ambiente de desenvolvimento integrado, que é uma 
plataforma de desenvolvimento robusta que permite 
desenvolver sistemas com rapidez e praticidade devido 
à ferramenta permitir utilizar várias funcionalidades para 
facilitar o desenvolvimento do seu software.
46 Ambiente para Desenvolvimento Web
REFERÊNCIAS
DUCKETT, J. HTML e CSS Projete e Construa Websites. Rio de 
Janeiro: Alta Books, 2016.
LAWSON, B.; SHARP, R. Introdução ao HTML 5. Rio de Janeiro: Alta 
Books, 2012.
MILETTO, E. M.; BERTAGNOLLI, S., C. Desenvolvimento de 
Software II: Introdução ao Desenvolvimento Web com HTML, CSS, 
JavaScript e PHP. Porto Alegre: Bookman, 2014.
SENA, H. Ambiente para Desenvolvimento Web. Bootstrap e 
frameworks de CSS. Recife: Uninassau, 2017a.
SENA, H. Ambiente para Desenvolvimento Web. HTML 5. Recife: 
Uninassau, 2017b.
 SENA, H. Ambiente para Desenvolvimento Web. IDEs. Recife: 
Uninassau, 2017c.
SENA, H. Ambiente para Desenvolvimento Web. Java Script. 
Recife: Uninassau, 2017d.
	_Hlk93174410
	_GoBack
	HTML5
	História do HTML 
	JavaScript 
	Aplicações do JavaScript
	Operadores
	Bootstrap e frameworks de CSS
	Bootstrap
	Passo a passo para a criação no Bootstrap
	Frameworks
	IDEs
	Características dos IDEs
	Compilador