HTML5 e

JavaScript
1
2
Sumário
HTML5 5

História do HTML 6

JavaScript 14

Aplicações do JavaScript 15

Operadores 19

Bootstrap e frameworks de CSS 26

Bootstrap 27

Passo a passo para a criação no Bootstrap 30

Frameworks 32

IDEs 35

Características dos IDEs 36

Compilador 42

Referências 45

CL I QUE N O CAP Í T UL O P A RA SE R RE DI RE C I O N A DO

3
Objetivos Definição
Para o início do Se houver necessidade
desenvolvimento de uma de se apresentar um novo
nova competência; conceito;

Nota Importante
Quando forem necessárias As observações escritas
observações ou tiveram que ser priorizadas
complementações para o para você;
seu conhecimento;

Explicando Melhor Você Sabia?

Algo precisa ser melhor Curiosidades indagações
explicado ou detalhado; lúdicas sobre o tema em
estudo, se forma necessárias;

Saiba Mais Reflita

Textos, referências Se houver a necessidade
bibliográficas e links para de chamar a atenção
aprofundamento do seu sobre algo a ser refletido ou
conhecimento; discutido sobre;

Acesse Resumindo
Se for preciso acessar um Quando for preciso se fazer
ou mais sites para fazer um resumo acumulativo
download, assistir vídeos, ler das últimas abordagens;
textos, ouvir podcast;

Atividades Testando
Quando alguma atividade Quando o desenvolvimento de
de autoaprendizagem for uma competência for concluído
aplicada; e questões forem explicadas.

4
 @faculdadelibano_

1
HTML5

5
 HTML5 e JavaScript Capitulo 1

HTML5

Objetivos

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

6
 HTML5 e JavaScript HTML5 Capitulo 1

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 escrever o documento.

Veja a seguir um exemplo de código no HTML5.

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.

7
 HTML5 e JavaScript HTML5 Capitulo 1

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.

A seguir, podemos observar a lista com tags semânticas criadas para melhor legibilidade
dos mecanismos de busca:

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.

8
 HTML5 e JavaScript HTML5 Capitulo 1

FIGURA 2

Exemplos de tags semânticas

criadas para melhor legibilidade dos
mecanismos de buscas
FONTE

Sena (2017c, p. 17).

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:

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:

9
 HTML5 e JavaScript HTML5 Capitulo 1

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.

Exemplo:

A tag aside é utilizada como barra lateral para associar conteúdos relevantes ao tema
utilizado no conteúdo circundante.

Exemplo:

10
 HTML5 e JavaScript HTML5 Capitulo 1

A tag footer é bem parecida com a tag header. Ela vai englobar o conteúdo que estará
sendo utilizado no rodapé do site.

Exemplo:

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
FONTE

Sena (2017c, p. 20).

11
 HTML5 e JavaScript HTML5 Capitulo 1

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:

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
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:

12
 HTML5 e JavaScript HTML5 Capitulo 1

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.

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.

13
 @faculdadelibano_

2
JavaScript

14
 HTML5 e JavaScript Capitulo 2

JavaScript

Objetivos

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

15
 HTML5 e JavaScript JavaScript Capitulo 2

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.

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.

16
 HTML5 e JavaScript JavaScript Capitulo 2

FIGURA 4

O JavaScript permite criar

aplicações que interagem
diretamente com a forma
de modelar problemas do
mundo real
FONTE

Freepik

Para podermos ver os resultados de um código desenvolvido em JavaScript, é preciso

criar um arquivo em HTML simples, como no exemplo a seguir.

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.

17
 HTML5 e JavaScript JavaScript Capitulo 2

No exemplo, /path/to/[Link] é 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 “[Link]” na pasta atual.
Podemos fornecer uma URL completa, como no exemplo.

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 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:

Normalmente, uma linha-break também é tratada como um delimitador, de modo que

também funcionaria.

Exemplo:

18
 HTML5 e JavaScript JavaScript Capitulo 2

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).
• Alfabetos não latinos e hieróglifos, mas geralmente não são usados.

Exemplo:

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.

19
 HTML5 e JavaScript JavaScript Capitulo 2

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.

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
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:

20
 HTML5 e JavaScript JavaScript Capitulo 2

Os operadores bit a bit tratam seus operandos como um conjunto de 32 bits (zeros e
uns), 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.

TABELA 4

Operadores bit a bit

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.

21
 HTML5 e JavaScript JavaScript Capitulo 2

TABELA 4

Operadores bit a bit

FONTE

Sena (2017a, p. 19).

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:

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 é:

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.

22
 HTML5 e JavaScript JavaScript Capitulo 2

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.

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 é:

Exemplo:

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 é:

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.

23
 HTML5 e JavaScript JavaScript Capitulo 2

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.

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.

24
HTML5 e JavaScript JavaScript Capitulo 2

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 [Link] 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.

25
 @faculdadelibano_

3
Bootstrap e
frameworks
de CSS

26
 HTML5 e JavaScript Capitulo 3

Bootstrap e
frameworks de CSS

Objetivos

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.

27
 HTML5 e JavaScript Bootstrap e frameworks de CSS Capitulo 3

O Bootstrap utiliza como 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.

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.

28
 HTML5 e JavaScript Bootstrap e frameworks de CSS Capitulo 3

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.
• 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

29
 HTML5 e JavaScript Bootstrap e frameworks de CSS Capitulo 3

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 [Link] ou
simplesmente escreva o código conforme a figura seguir.

FIGURA 7

Exemplo de código básico em HTML

FONTE

Freepik

30
 HTML5 e JavaScript Bootstrap e frameworks de CSS Capitulo 3

O segundo passo é criar um segundo arquivo, intitulado [Link] 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

31
 HTML5 e JavaScript Bootstrap e frameworks de CSS Capitulo 3

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).

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.

32
 HTML5 e JavaScript Bootstrap e frameworks de CSS Capitulo 3

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.

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: [Link]

33
HTML5 e JavaScript Bootstrap e frameworks de CSS Capitulo 3

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.

34
 @faculdadelibano_

4
IDEs

35
 HTML5 e JavaScript Capitulo 4

IDEs

Objetivos

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), traduzindo do 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.

36
 HTML5 e JavaScript IDEs Capitulo 4

FIGURA 10

IDE é um meio de interligar

melhor diversas outras
ferramentas, suportando,
assim, linguagens diversas
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.

37
 HTML5 e JavaScript IDEs Capitulo 4

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.
• 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.

38
 HTML5 e JavaScript IDEs Capitulo 4

• 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.

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.

39
 HTML5 e JavaScript IDEs Capitulo 4

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.

Acesse

Conheça mais sobre essa ferramenta e faça o 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.

40
 HTML5 e JavaScript IDEs Capitulo 4

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 o download. Clique aqui.

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:// [Link]. Também é importante considerar outros

recursos como o SOAP, que não é apenas um editor de textos, é um IDE voltado para
desenvolvimento em Java.

41
 HTML5 e JavaScript IDEs Capitulo 4

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 um tipo 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.
• 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.

42
 HTML5 e JavaScript IDEs Capitulo 4

FIGURA 14

Fluxograma do processo
de compilação
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.

43
HTML5 e JavaScript IDEs Capitulo 4

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.

44
 HTML5 e JavaScript

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.

45
46