Desenvolvimento Front End com

HTML5, CSS3 e JavaScript

Desenvolvimento Front End

com HTML5, CSS3 e JavaScript

COD.: 1892_0
 Desenvolvimento Front End
com HTML5, CSS3 e JavaScript
 Créditos

Copyright © Monte Everest Participações e Empreendimentos Ltda.

Todos os direitos autorais reservados. Este manual não pode ser copiado, fotocopiado, reproduzido,
traduzido ou convertido em qualquer forma eletrônica, ou legível por qualquer meio, em parte ou
no todo, sem a aprovação prévia, por escrito, da Monte Everest Participações e Empreendimentos
Ltda., estando o contrafator sujeito a responder por crime de Violação de Direito Autoral, conforme
o art.184 do Código Penal Brasileiro, além de responder por Perdas e Danos. Todos os logotipos
e marcas utilizados neste material pertencem às suas respectivas empresas.

"As marcas registradas e os nomes comerciais citados nesta obra, mesmo que não sejam assim identificados, pertencem
aos seus respectivos proprietários nos termos das leis, convenções e diretrizes nacionais e internacionais.”

Desenvolvimento Front End

com HTML5, CSS3 e JavaScript
Coordenação Geral
Henrique Thomaz Bruscagin

Autoria
Emilio Celso de Souza

Revisão Ortográfica e
Gramatical
Fernanda Monteiro Laneri

Diagramação
Bruno de Oliveira Santos

Edição nº 1 | 1892_0
Junho/ 2020

Este material constitui uma nova obra e é uma derivação da seguinte obra original, produzida por Monte Everest
Participações e Empreendimentos Ltda., em Fev/2017: Desenvolvendo Aplicações Web com HTML5, CSS3, JavaScript
e PhoneGap
Autoria: Emilio Celso de Souza

4
 Sumário

Conteúdo de referência

Introdução....................................................................................................................................................... 07

Conteúdo programático............................................................................................................................ 09

01. Visão geral do HTML5........................................................................................................................ 15

02. Estilos com CSS3................................................................................................................................... 31

03. Responsividade com media queries............................................................................................ 43

04. Conceitos do JavaScript e do Node.js.......................................................................................... 51

05. JavaScript - Chamadas assíncronas e promises..................................................................... 69

06. Conceitos do jQuery............................................................................................................................ 83

07. Otimizações de layout com Bootstrap........................................................................................ 97

08. Animações em telas de fundo......................................................................................................... 109

09. Elementos de áudio e vídeo............................................................................................................. 117

10. Comunicação com serviços REST.................................................................................................. 121

11. Criando objetos com JavaScript - Prototype............................................................................. 129

12. Criando páginas interativas e suporte off-line....................................................................... 137

13. Complemento: Aplicações híbridas com PhoneGap.............................................................. 147

Atividades

Apresentando o projeto............................................................................................................................ 165

01. Preparando o ambiente...................................................................................................................... 167

02. Criação de páginas com HTML5..................................................................................................... 169

03. Inclusão de formulários..................................................................................................................... 173

04. Aplicação de estilos com CSS3....................................................................................................... 179

05. Desenvolvimento de responsividade com media queries.................................................. 189

06. Inclusão de funcionalidades JavaScript e jQuery................................................................... 195

07. Consumo de serviços REST.............................................................................................................. 199

08. Otimizações de layout com Bootstrap........................................................................................ 207

09. Inclusão e listagem de registros com Web services............................................................. 223

10. Aplicação de Canvas API................................................................................................................... 233

11. Uso de áudio e vídeo........................................................................................................................... 237

12. Armazenamento local......................................................................................................................... 239

13. Complemento: PhoneGap.................................................................................................................. 245

5
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

Mãos à obra!

01. Criando uma página HTML............................................................................................................... 253

02. Desenvolvendo formulários............................................................................................................ 255

03. Aplicando estilos.................................................................................................................................. 257

04. Aplicando responsividade................................................................................................................ 261

05. JavaScript e jQuery.............................................................................................................................. 263

06. Comunicação com o servidor.......................................................................................................... 267

07. Suporte off-line...................................................................................................................................... 271

08. PhoneGap................................................................................................................................................. 275

6
Introdução
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

8
Conteúdo
programático
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

10
Conteúdo programático

11
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

12
Conteúdo programático

13
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

14
1 Visão geral do
HTML5
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

16
Visão geral do HTML5 1

17
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

18
Visão geral do HTML5 1

19
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

20
Visão geral do HTML5 1

21
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

22
Visão geral do HTML5 1

23
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

24
Visão geral do HTML5 1

25
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

26
Visão geral do HTML5 1

27
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

28
Visão geral do HTML5 1

29
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

30
2 Estilos com
CSS3
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

32
Estilos com CSS3 2

33
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

34
Estilos com CSS3 2

35
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

36
Estilos com CSS3 2

37
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

38
Estilos com CSS3 2

39
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

40
Estilos com CSS3 2

41
 Responsividade
3 com media
queries
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

44
Responsividade com media queries 3

45
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

46
Responsividade com media queries 3

47
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

48
Responsividade com media queries 3

49
 Conceitos do
4 JavaScript e do
Node.js
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

52
Conceitos do JavaScript e do Node.js 4

53
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

54
Conceitos do JavaScript e do Node.js 4

55
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

56
Conceitos do JavaScript e do Node.js 4

57
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

58
Conceitos do JavaScript e do Node.js 4

59
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

60
Conceitos do JavaScript e do Node.js 4

61
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

62
Conceitos do JavaScript e do Node.js 4

63
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

64
Conceitos do JavaScript e do Node.js 4

65
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

66
Conceitos do JavaScript e do Node.js 4

67
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

68
 JavaScript -
Chamadas
5 assíncronas e
promises
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

70
JavaScript - Chamadas assíncronas e promises 5

71
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

72
JavaScript - Chamadas assíncronas e promises 5

73
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

74
JavaScript - Chamadas assíncronas e promises 5

75
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

76
JavaScript - Chamadas assíncronas e promises 5

77
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

78
JavaScript - Chamadas assíncronas e promises 5

79
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

80
JavaScript - Chamadas assíncronas e promises 5

81
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

82
 Conceitos do
6 jQuery
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

84
Conceitos do jQuery 6

85
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

86
Conceitos do jQuery 6

87
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

88
Conceitos do jQuery 6

89
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

90
Conceitos do jQuery 6

91
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

92
Conceitos do jQuery 6

93
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

94
Conceitos do jQuery 6

95
 Otimizações
7 de layout com
Bootstrap
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

98
Otimizações de layout com Bootstrap 7

99
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

100
Otimizações de layout com Bootstrap 7

101
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

102
Otimizações de layout com Bootstrap 7

103
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

104
Otimizações de layout com Bootstrap 7

105
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

106
Otimizações de layout com Bootstrap 7

107
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

108
 Animações em
8 telas de fundo
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

110
Animações em telas de fundo 8

111
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

112
Animações em telas de fundo 8

113
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

114
Animações em telas de fundo 8

115
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

116
9 Elementos de
áudio e vídeo
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

118
Elementos de áudio e vídeo 9

119
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

120
 Comunicação
10 com serviços
REST
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

122
Comunicação com serviços REST 10

123
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

124
Comunicação com serviços REST 10

125
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

126
Comunicação com serviços REST 10

127
 Criando objetos
11 com JavaScript -
Prototype
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

130
Criando objetos com JavaScript - Prototype 11

131
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

132
Criando objetos com JavaScript - Prototype 11

133
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

134
Criando objetos com JavaScript - Prototype 11

135
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

136
 Criando páginas
12 interativas e
suporte off-line
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

138
Criando páginas interativas e suporte off-line 12

139
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

140
Criando páginas interativas e suporte off-line 12

141
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

142
Criando páginas interativas e suporte off-line 12

143
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

144
Criando páginas interativas e suporte off-line 12

145
 Complemento:
Aplicações
13 híbridas com
PhoneGap
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

148
Complemento: Aplicações híbridas com PhoneGap 13

149
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

150
Complemento: Aplicações híbridas com PhoneGap 13

151
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

152
Complemento: Aplicações híbridas com PhoneGap 13

153
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

154
Complemento: Aplicações híbridas com PhoneGap 13

155
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

156
Complemento: Aplicações híbridas com PhoneGap 13

157
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

158
Complemento: Aplicações híbridas com PhoneGap 13

159
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

160
Complemento: Aplicações híbridas com PhoneGap 13

161
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

162
Atividades
(projeto)
Apresentando
o projeto
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

Ao longo do curso, desenvolveremos um projeto em que serão agregados os

recursos de HTML5, CSS3 e JavaScript a cada tópico estudado.

Trata-se de uma aplicação contemplando o departamento de recursos humanos

de uma empresa. Os recursos abrangidos nesta aplicação são os seguintes:

•• A empresa terá um site institucional, apresentando seu histórico, produtos

desenvolvidos, principais clientes, contato, além de vagas disponíveis,
onde candidatos poderão se inscrever para vagas de emprego ou estágio;

•• Os candidatos (usuários do sistema) verificam as vagas disponíveis,

analisando descrição, carga horária de trabalho, salário, benefícios, entre
outros itens;

•• Havendo interesse, o candidato se inscreve no site, fornecendo seus dados

pessoais, sua experiência profissional e demais informações relevantes
para a vaga;

•• É possível entrar em contato com a empresa para conhecer um pouco

mais a respeito da vaga desejada.

A aplicação deverá ter uma aparência agradável, com boa usabilidade e

facilidade de navegação. Iniciaremos definindo a estrutura inicial do projeto e,
a cada atividade, adicionaremos novas funcionalidades.

166
1 Preparando
o ambiente
Atividade
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

Laboratório 1
A – Definindo a estrutura inicial para o projeto

1. Em um local de sua preferência (unidade C, pasta Documentos etc.), defina

a estrutura de pastas a seguir (outras pastas serão adicionadas ao longo do
curso):

2. Abra o Visual Studio Code. Selecione a pasta ProjetoEmpresaRH. Esta será

a base para a elaboração do projeto, também usada como raiz da aplicação
Web:

A partir deste ponto, podemos adicionar, alterar ou remover pastas e arquivos

para nossa aplicação.

168
 Criação de
2 páginas com
HTML5
Atividade
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

Laboratório 1
A – Definindo o modelo referente à página inicial da aplicação

Vamos iniciar nosso projeto, começando pela página inicial.

1. Abra o Visual Studio Code (se não estiver aberto) apontando para a pasta
ProjetoEmpresaRH. O resultado, no VSCode, deverá ser semelhante a este:

2. Inclua, na raiz do site, o arquivo index.html. Este arquivo representará a

página inicial da aplicação. Inclua o elemento DOCTYPE, o cabeçalho, o corpo
da página e os elementos principais. Inicie pela seguinte estrutura:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Site Institucional - ABC Tecnologia</title>
</head>
<body>
    
</body>
</html>

170
 Criação de páginas com HTML5 2
3. No elemento <body>, insira estes elementos:

<body>
    <header>
        <nav>

        </nav>
    </header>
    <section>
        <article>
            <header>

            </header>
        </article>
    </section>
    <aside>

    </aside>
    <footer>
        <p>Copyright 2020 - Todos os direitos reservados</p>
    </footer>
</body>

4. Insira os elementos a seguir no elemento <nav>:

<nav>
    <ul>
        <li><a href="#">A Empresa</a></li>
        <li><a href="#">Produtos</a></li>
        <li><a href="#">Localização</a></li>
        <li><a href="#">Trabalhe Conosco</a></li>
    </ul>
</nav>

171
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

5. Agora, no elemento <header>, abaixo de <article> e <section>, e logo

abaixo do fechamento do elemento </header>, deixe como indicado a seguir:

<section>
    <article>
        <header>
            <h2>Conheça-nos um pouco</h2>
            <p>
                Desde sua fundação a ABC Tecnologia é uma 
                empresa com foco na elaboração de soluções
                visando agilizar os processos relativos às
                tarefas de seus clientes. <br/>
                A agilidade, redução de custos e satisfação 
                dos nossos clientes é nossa maior meta.
            </p>
        </header>
        <p>
            Conheça nossos <a href="#">produtos e serviços</a>
            e descubra o que podemos fazer por você
        </p>
    </article>
</section>

6. Complete o elemento <aside>:

<aside>
    <h2>Depoimentos dos nossos clientes</h2>
    <p>Excelente qualidade, ótimos profissionais</p>
    <p>
        Estava buscando uma solução para minha clínica
        e a ABC nos desenvolveu um sistema sob medida,
        cujos resultados superaram nossas expectativas.
    </p>
</aside>

Ao executar a página no navegador, o resultado deve ser similar ao da imagem

adiante:

172
3 Inclusão de
formulários
Atividade
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

Laboratório 1
A – Definindo o formulário para o usuário se inscrever para uma vaga

Nesta etapa, incluiremos um formulário para o usuário se inscrever para uma vaga
de emprego ou estágio. Utilizaremos campos adequados para cada informação e
realizaremos as devidas validações para esses campos.

1. Na estrutura do projeto, inclua uma nova pasta chamada paginas. A estrutura

deverá ficar como o modelo a seguir:

Esta pasta deverá ser criada no próprio Visual Studio Code.

2. Na pasta paginas, inclua um arquivo chamado registro.html. A estrutura

básica do HTML desse novo arquivo deverá ter o seguinte aspecto:

174
 Inclusão de formulários 3
3. No elemento <body> do arquivo registro.html, insira um elemento <div>,
um título e um elemento <form>:

<body>
    <div>
        <h1>Registro de Candidatos</h1>
        <form>

        </form>
    </div>
</body>

No formulário serão inseridos os elementos para o registro de um novo

candidato. Os itens do registro são:

•• Nome;
•• Data de nascimento;
•• Sexo (masculino ou feminino);
•• Telefone;
•• E-mail;
•• Vaga a se candidatar.

Os campos terão validadores de acordo com a natureza e o tipo da informação.

Usaremos uma combinação de elementos <div>, <label> e <input> para

viabilizar a futura formatação via CSS.

É extremamente importante que o aluno não use o recurso “copiar e colar" e

escreva os elementos. Isso é importante para seu aprendizado e experiência.

175
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

4. Insira os campos nesta ordem, dentro do elemento <form>:

<form>
    <!-- Nome do candidato -->
    <div>
        <label for="nome">Nome:</label>
        <div>
            <input type="text" id="nome" name="nome" 
                required="required" autofocus="autofocus" />
        </div>
    </div>

    <!-- Data de Nascimento -->
    <div>
        <label for="data">Data Nascimento:</label>
        <div>
            <input type="date" id="data" name="data" 
                required="required" />
        </div>
    </div>

    <!-- Sexo -->
    <div>
        <label for="sexo">Sexo:</label>
        <div>
            <fieldset>
                <legend>Sexo:</legend>
                <input type="radio" id="masculino" name="sexo" 
                    value="masculino" >Masculino<br/>
                <input type="radio" id="feminino" name="sexo" 
                    value="feminino" >Feminino<br/>

            </fieldset>
        </div>
    </div>

    <!-- Telefone -->
    <div>
        <label for="telefone">Telefone:</label>
        <div>
            <input type="tel" id="telefone" name="telefone" 
                required="required" />
        </div>
    </div>    
    

176
 Inclusão de formulários 3
    <!-- Email -->
    <div>
        <label for="email">Email:</label>
        <div>
            <input type="email" id="email" name="email" 
                required="required" />
        </div>
    </div>            

    <!-- Lista de Vagas -->
    <div>
        <label for="vaga">Vaga desejada:</label>
        <div>
            <select name="vaga" id="vaga">
                <option value="1">Administrador Banco de Dados</option>
                <option value="2">Analista de Sistemas</option>
                <option value="3">web Designer</option>
                <option value="4">Programador Java</option>
            </select>
        </div>
    </div>            

    <!-- Botão de comandos -->
    <div>
        <input type="button" value="Incluir">
    </div>
</form>

5. Teste o formulário. Não se preocupe com a falta de formatação. Ela será

realizada oportunamente com CSS. O resultado é semelhante ao mostrado a
seguir:

177
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

6. No arquivo index.html (página inicial), redefina os links para registro e

contato. Deixe-os conforme o modelo adiante:

<nav>
    <ul>
        <li><a href="#">A Empresa</a></li>
        <li><a href="#">Produtos</a></li>
        <li><a href="#">Localização</a></li>
        <li><a href="paginas/registro.html">Trabalhe Conosco</a></li>
    </ul>
</nav>

7. Teste a navegabilidade.

178
 Aplicação de
4 estilos com
CSS3
Atividade
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

Laboratório 1
A – Definindo estilos comuns para as páginas do projeto

A partir de agora, vamos definir os estilos para as páginas do nosso projeto,

iniciando pelos estilos comuns, como cores, fontes e margens. Em seguida,
definiremos outros estilos para o menu na página inicial e seu conteúdo. Criaremos
estilos diferentes para viabilizar futuras manutenções na aplicação.

1. Na pasta css do projeto, crie um arquivo chamado estilos.css. Inclua estes

seletores:

* {
    font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
}

body{
    background-color: rgb(235, 235, 216);
}

.container {
    margin: 80px 50px 50px 50px;
}

2. Configuramos todos os elementos (*) com a mesma fonte. Em todas as

páginas, faça uma referência a este arquivo. Observe que as referências são
diferentes para as páginas que estão em outra pasta:

•• index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Site Institucional - ABC Tecnologia</title>
    <link rel="stylesheet" href="css/estilos.css">
</head>

180
 Aplicação de estilos com CSS3 4
•• registro.html, na pasta paginas

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registro de Candidatos</title>
    <link rel="stylesheet" href="../css/estilos.css">
</head>

3. Para contemplar a classe container definida no CSS, envolva o conteúdo

(exceto o menu e o rodapé) em uma div, conforme apresentado a seguir:

    <div class="container">
        <section>
            <article>
                <header>
                    <h2>Conheça-nos um pouco</h2>
                    <p>
                        Desde sua fundação a ABC Tecnologia é uma
                        empresa com foco na elaboração de soluções
                        visando agilizar os processos relativos às
                        tarefas de seus clientes. <br />
                        A agilidade, redução de custos e satisfação
                        dos nossos clientes é nossa maior meta.
                    </p>
                </header>
                <p>
                    Conheça nossos <a href="#">produtos e serviços</a>
                    e descubra o que podemos fazer por você
                </p>
            </article>
        </section>
        <aside>
            <h2>Depoimentos dos nossos clientes</h2>
            <p>Excelente qualidade, ótimos profissionais</p>
            <p>
                Estava buscando uma solução para minha clínica
                e a ABC nos desenvolveu um sistema sob medida,
                cujos resultados superaram nossas expectativas.
            </p>
        </aside>
    </div>

4. Quando for necessário implementar alguma alteração, esta será indicada

adequadamente;

5. Execute a aplicação a partir de index.html e verifique o resultado.

181
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

B – Definindo estilos para o menu

1. Agora, vamos incluir um CSS para o menu. Inclua uma folha de estilos na
pasta css com o nome menu.css. Defina o seguinte conteúdo:

nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

.menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #003264;
}

    .menu li {
        float: left;
    }

        .menu li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

            .menu li a:hover {
                background-color: #DFDFDF;
                color: #003264;
            }
            

182
 Aplicação de estilos com CSS3 4
2. Inclua este arquivo no início de index.html:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Site Institucional - ABC Tecnologia</title>
    <link rel="stylesheet" href="css/estilos.css">
    <link rel="stylesheet" href="css/menu.css">
</head>

3. Na página index.html, faça as alterações no trecho do elemento <nav>:

<header>
    <nav>
        <ul class="menu">
            <li><a href="#">A Empresa</a></li>
            <li><a href="#">Produtos</a></li>
            <li><a href="#">Localização</a></li>
            <li><a href="paginas/registro.html">Trabalhe Conosco</a></li>
        </ul>
    </nav>
</header>

4. Analise o código. Execute a página a partir de index.html e verifique o

resultado. Até o momento, o resultado deverá ser parecido com este:

183
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

C – Definindo o rodapé e demais itens da página

1. Vamos, agora, criar o estilo para o rodapé. Este pode ser definido no
próprio arquivo estilos.css, pois a codificação é relativamente simples. Inclua
o seguinte elemento no arquivo:

/* estilos para o rodapé */

footer {
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    padding: 5px;
    text-align: center;
    font-size: 14px;
    color: white;
    background-color: #828282;
}

2. Execute o arquivo index.html e visualize o rodapé inserido:

3. Agora, vamos melhorar o aspecto da nossa página inicial. Realizaremos

algumas alterações tanto no CSS quanto na própria página. Comente o seletor
footer que você definiu anteriormente;

4. No projeto, crie uma pasta chamada imagens;

5. Escolha duas imagens do seu gosto. Essas imagens devem ser relativamente
grandes, ocupando o comprimento do seu vídeo. Elas servirão como imagem
de apresentação e imagem de rodapé;

184
 Aplicação de estilos com CSS3 4
6. Inclua essas imagens na pasta imagens que você criou e nomeie-as como
inicio.JPG e rodapé.JPG;

7. No arquivo estilos.css, inclua as seguintes instruções CSS:

.intro {
    background: url(../imagens/inicio.JPG) center center fixed;
    background-size: cover;
    padding: 220px 0;
    margin-top: 40px;
    left:0;
    right:0;
}

/* estilos para o rodapé */

.footer {
    background: url(../imagens/rodape.jpg) center center fixed;
    background-size: cover ;
    color: white;
    padding: 30px;
    text-align:center;
}

8. Na página index.html, insira o elemento <section>, como mostrado a seguir:

<header>
    <nav>
        <ul class="menu">
            <li><a href="#">A Empresa</a></li>
            <li><a href="#">Produtos</a></li>
            <li><a href="#">Localização</a></li>
            <li><a href="paginas/registro.html">Trabalhe Conosco</a></li>
        </ul>
    </nav>
</header>

<section class="intro"></section>

<div class="container">

185
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

9. Altere o elemento <footer>:

<footer class="footer">
    <p>
        Avenida Paulista, 1009 - Bela Vista <br />
        São Paulo - CEP 01311-100
    </p>
    <p>Copyright 2020 - Todos os direitos reservados</p>
</footer>

10. Execute a página e veja o resultado.

D – Definindo estilos para os formulários

Vamos, agora, incluir alguns estilos para os formulários. Os estilos mais importantes
utilizarão as classes do Bootstrap, em tópicos futuros.

1. No arquivo estilos.css, inclua estes estilos:

.borda {
    box-shadow: 5px 5px 10px #000;
    padding: 30px;
    margin-right: 30px;
    background-color: white;
}

2. No arquivo registro.html, envolva o conteúdo do elemento form com uma

div:

<form>
    <div>
        <!—Nome do candidato -->
...
        <!—Botão de comandos -->
        <div>
            <input type="button" value="Incluir">
        </div>
    </div>
</form>

186
 Aplicação de estilos com CSS3 4
3. Configure esse novo estilo no elemento div adicionado ao formulário
do arquivo registro.html. Verifique os pontos onde os estilos estão sendo
aplicados:

<form>
    <div class="container borda">
...
    </div>
</form>

4. A página registro.html deverá ficar semelhante à imagem adiante:

187
 Desenvolvimento

5
de responsividade
com media
queries
Atividade
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

Laboratório 1
A – Definindo a responsividade para o menu

Na página index.html, o menu de opções não possui nenhuma responsividade,

ou seja, se executarmos a aplicação em dispositivos menores, como tablets ou
smartphones, a aparência é exatamente a mesma. Neste exercício, incluiremos os
recursos no CSS para permitir certa variação e simplificação no layout do menu
para dispositivos menores.

1. Abra o arquivo menu.css e inclua os seguintes elementos:

@media screen and (max-width: 760px) {
    .menu li{
        float: none;
    }
    
    .menu li a {        
        text-align: center;
    }
}  

Para telas com o tamanho máximo de 760 pixels, colocamos o menu na posição
vertical. A aparência da aplicação fica como a imagem a seguir:

190
 Desenvolvimento de responsividade com media queries 5
2. Agora, vamos adicionar um pouco mais de interatividade na nossa página.
Inclua, na pasta css, uma folha de estilos chamada destaque.css. Esse arquivo
definirá estilos para incluir um ícone circular na página inicial, que também
direcionará o usuário para a página registro.html. Nessa folha de estilos,
inclua o seguinte conteúdo:

/* para o destaque do menu */

.registro {
    display: block;
    position: absolute;
    top: 400px;
    right: 35px;
    width: 160px;
    height: 100px;
    padding-top: 60px;
    opacity: 0.8;
    font-size: 1rem;
    color: #fff;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
     
    /* Criação do círculo */
    border-radius: 100%;
    text-shadow: 0 1px 0 #000;

    /* Efeitos de rotação do texto no círculo */

    transform: rotate(6deg);

    /* Efeitos de Gradiente */

    background: -ms-linear-gradient(top, #a80000 0%,#740404 100%);
    background: -webkit-linear-gradient(top, #a80000 0%,#740404 100%);
    background: -moz-linear-gradient(top, #a80000 0%,#740404 100%);
    background: linear-gradient(top, #a80000 0%,#740404 100%);
    transition: transform 1s;
}

.registro:hover {
    color: #fff;

    /* Efeitos do Gradiente ao mover o mouse */

    background: linear-gradient(top, #bc0101 0%,#8c0909 100%);
    transform: rotate(16deg) scale(1.1,1.1);
    transition: transform 1s;
}

191
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

.registro:before /* Cria a borda tracejada */ {

    display: block;
    position: absolute;
    top: -7px;
    right: -7px;
    height: 168px;
    width: 168px;
    content: "";
    border: 3px dotted #740404;
    
    /* Cantos circulares do círculo */
    border-radius: 100%;
}

.registro .free {
    font-size: 80%;
}

@media screen and (max-width: 760px) {
    .registro {
        display:none;
    }
}

3. Inclua o arquivo destaque.css em index.html:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Site Institucional - ABC Tecnologia</title>
    <link rel="stylesheet" href="css/estilos.css" />
    <link rel="stylesheet" href="css/menu.css" />
    <link rel="stylesheet" href="css/destaque.css">
</head>

192
 Desenvolvimento de responsividade com media queries 5
4. Na página index.html, inclua o elemento <div> indicado, dentro do elemento
<header> existente:

<header>
    <div>
        <a class="registro" href="paginas/registro.html">
            Candidate-se<br/>
            <span class="free">&#183; Hoje &#183;</span>
        </a>
    </div>
    <h2>Conheça-nos um pouco</h2>
    <p>
        Desde sua fundação a ABC Tecnologia é uma
        empresa com foco na elaboração de soluções
        visando agilizar os processos relativos às
        tarefas de seus clientes. <br />
        A agilidade, redução de custos e satisfação
        dos nossos clientes é nossa maior meta.
    </p>
</header>

5. Execute a página e verifique o resultado.

193
 Inclusão de
funcionalidades
6 JavaScript e
jQuery
Atividade
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

Laboratório 1
A – Definindo mensagens personalizadas de validação para os formulários

Com JavaScript, podemos incluir mais interatividade com o usuário. Nesta parte do
projeto, incluiremos um evento baseado em JavaScript para interceptar o evento
click do botão Incluir, de modo a personalizar as mensagens de validação.

1. No arquivo registro.html, inclua um id no botão Incluir. Momentaneamente,

altere o valor do atributo type para 'submit', de modo que seja possível
visualizar as mensagens de validação:

<div>
    <input type="submit" value="Incluir" id="incluirButton">
</div>

2. Na pasta scripts, inclua um arquivo chamado validacao_registro.js com o

seguinte conteúdo:

let botao = document.getElementById('incluirButton');

botao.addEventListener('click', function (e) {
    
    let nome = document.getElementById('nome');
    let data = document.getElementById('data');
    let telefone = document.getElementById('telefone');
    let email = document.getElementById('email');

    nome.setCustomValidity(nome.value == '' ?
        'Informe corretamente o nome do candidato' : '');
    data.setCustomValidity(data.value == '' ?
        'Informe corretamente a data de nascimento do candidato' : '');        
    telefone.setCustomValidity(telefone.value == '' ?
        'Informe corretamente o telefone do candidato' : '');
    email.setCustomValidity(email.value == '' ?
        'Informe corretamente o email do candidato' : '');

});

3. Inclua esse arquivo no final da página, como última instrução (é importante

esta posição, pois as instruções presentes no arquivo fazem referência aos
elementos HTML e serão validadas quando o DOM estiver completo):

        </form>
    </div>
    <script src="../scripts/validacao_registro.js"></script>
</body>

196
 Inclusão de funcionalidades JavaScript e jQuery 6
4. Execute a página registro.html. Clique no botão Incluir, sem fornecer
informações nos campos nome, data, telefone ou email. O que você consegue
visualizar?

5. Retorne o valor do atributo value do botão para 'button'.

B – Melhorando a responsividade do menu

O nosso menu de opções na página index.html já está responsivo, mas falta um

detalhe: quando ele é exibido em dispositivos menores, o menu cobre toda a tela.
Nosso propósito é justamente criar um recurso para que os elementos do menu
se contraiam e, por meio do clique em um ícone a ser adicionado, ele mostre as
opções.

1. Altere o arquivo menu.css onde há a indicação de @media screen. O

conteúdo anterior permanece no arquivo, devidamente comentado para sua
orientação:

@media screen and (max-width: 760px) {
    /* .menu li{
        float: none;
    }
    
    .menu li a {        
        text-align: center;
    } */

    .menu li:not(:first-child) {
        display: none;
    }

    .menu li.icon {
        float: right;
        display: block;
    }

    .menu.responsive {
        position: relative;
    }

        .menu.responsive li.icon {
            position: absolute;
            right: 0;
            top: 0;
        }

197
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

        .menu.responsive li {
            float: none;
            display: inline;
        }

            .menu.responsive li a {
                display: block;
                text-align: left;
            }

}      

2. Na página index.html, realize estas alterações, na parte que define o menu:

<nav>
    <ul class="menu" id="menuTopo">
        <li><a href="#">A Empresa</a></li>
        <li><a href="#">Produtos</a></li>
        <li><a href="#">Localização</a></li>
        <li><a href="paginas/registro.html">Trabalhe Conosco</a></li>

        <li class="icon">
            <a href="javascript:void(0);" onclick="mostrarMenu()">
&#9776;</a>
        </li>
    </ul>
</nav>

3. No final da página, antes do fechamento </body>, inclua este código

JavaScript:

    <script type="text/javascript">
        function mostrarMenu(){
            let elemento = document.getElementById("menuTopo");
            if(elemento.className === "menu"){
                elemento.className += " responsive";
            } else {
                elemento.className = "menu";
            }
        }
    </script>
</body>

4. Ainda no arquivo menu.css, inclua este estilo antes do item @media screen:

            .menu li.icon {
                display: none;
            }

@media screen and (max-width: 760px) {

5. Execute a página, reduza o tamanho e veja o resultado.

198
7 Consumo de
serviços REST
Atividade
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

Laboratório 1
A – Mostrando a lista de vagas dinamicamente

Em aplicações Web, é bastante comum que determinadas informações sejam

obtidas de fontes externas. Para que seja possível obtê-las, devemos usar recursos
que viabilizem essa tarefa. Os Web services são os recursos mais comuns para
essa finalidade.

A criação e a manutenção de Web services não são tarefa do desenvolvedor front

end, porém seu consumo é, uma vez que o JavaScript nos permite consumi-los por
meio de funções, como é o caso da função fetch.

Neste projeto, apresentaremos recursos para o consumo de Web services padrão

REST. O problema é que não temos o Web service disponível!

Para contornar esse problema, utilizaremos um componente do Node.js chamado

json-server. Esse componente permite a simulação de um Web service, tomando
como base informações armazenadas em arquivos (como se estes fossem, de
fato, os elementos contendo os dados para nossa aplicação). Iniciaremos com a
instalação desse módulo e, na sequência, criaremos um arquivo representando os
dados a serem consumidos. A lista de vagas apresentada no arquivo registro.html
será obtida por meio deste serviço.

1. No prompt de comandos, instale o módulo json-server usando a ferramenta

npm disponibilizada com o Node.js:

npm install -g json-server

A opção -g indica instalação global (para todos os usuários).

2. Crie uma pasta chamada dados no projeto;

200
 Consumo de serviços REST 7
3. Na pasta dados, crie um arquivo chamado dados.json com o seguinte
conteúdo:

{
    "vagas": [
        {
            "id": 1,
            "titulo": "Programador Java Pleno",
            "tipo": "1"
        },
        {
            "id": 2,
            "titulo": "Analista Comercial",
            "tipo": "2"
        },
        {
            "id": 3,
            "titulo": "Instrutor Excel Avançado",
            "tipo": "1"
        },
        {
            "id": 4,
            "titulo": "Gerente de Projetos para .NET",
            "tipo": "2"
        },
        {
            "id": 5,
            "titulo": "Consultor de Desenvolvimento Agil",
            "tipo": "2"
        },
        {
            "id": 6,
            "titulo": "Programador VB.Net",
            "tipo": "1"
        }
    ]
}

4. Usando o prompt de comandos, entre na pasta em que você criou o arquivo

dados.json (pasta dados);

201
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

5. Execute este comando:

json-server dados.json

Observação:

Dependendo do nível de acesso do usuário, pode ser necessário executar o prompt

do próprio Node.js (Node.js command prompt), como mostrado na ilustração
adiante:

O importante é que o acesso à execução do módulo json-server esteja disponível.

6. A execução do comando anterior deverá nos fornecer um acesso semelhante

ao mostrado a seguir:

202
 Consumo de serviços REST 7
7. Observe que o json-server nos apresentou uma URL chamada http://
localhost:3000/vagas. Acesse essa URL e veja o resultado:

Esse é nosso Web service simulado! Nós o utilizaremos na sequência do projeto.

8. Na página registro.html, remova as vagas do elemento <select>. Ele deve

ficar assim:

<!-- Lista de vagas -->

<div>
    <label for="vaga">Vaga desejada:</label>
    <div>
        <select name="vaga" id="vaga">
        </select>
    </div>
</div>

203
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

9. Crie, na pasta scripts, um novo arquivo JavaScript chamado listaVagas.js.

Seu conteúdo deve ser o mostrado adiante:

//lista de vagas, a ser preenchida com os

//dados do Web service
let vagas = [];

//URL obtida a partir do componente json-server

let url = "http://localhost:3000/vagas";
let lista = document.getElementById("vaga");

//função para construir a lista de vagas na página

function exibirVagas(){
    for (let i = 0; i < vagas.length; i++) {
        let option = document.createElement("option");
        option.textContent = vagas[i].titulo;
        option.setAttribute("value", vagas[i].id);

        lista.appendChild(option);
    }
}

//acesso ao Web service

fetch(url)
    .then(res => res.json())
    .then(valor => {
        vagas = valor;
        exibirVagas();
    });

10. Inclua esse arquivo ao final da página, antes do fechamento </body>:

        </form>
    </div>
    <script src="../scripts/validacao_registro.js"></script>
    <script src="../scripts/listaVagas.js"></script>
</body>

</html>

204
 Consumo de serviços REST 7
11. Execute a página e verifique se a lista de vagas aparece de acordo com o
código implementado no arquivo:

12. Agora, vamos incluir uma opção para o usuário selecionar as vagas por
tipo. Na página registro.html, inclua o grupo de elementos imediatamente
antes da lista de vagas:

<!-- Lista de vagas -->

<div>
    <label>Tipo de vaga:</label>
    <div>
        <input type="radio" id="desenv" name="tipo"
                value="desenv" checked="checked">Desenvolvimento
        <input type="radio" id="negocio" name="tipo"
                value="negocio">Negócios                             
    </div>
</div>

<div>
    <label for="vaga">Vaga desejada:</label>
    <div>
        <select name="vaga" id="vaga">
        </select>
    </div>
</div>

205
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

13. No arquivo listaVagas.js, acrescente a função limparLista:

//função para limpar a lista de vagas

function limparLista(){
    while(lista.firstChild){
        lista.removeChild(lista.firstChild);
    }
}

14. Realize as seguintes alterações na função exibirVagas:

//função para construir a lista de vagas na página

function exibirVagas(){

    let desenv = document.getElementById("desenv");
    let negocio = document.getElementById("negocio");

    limparLista();

    for (let i = 0; i < vagas.length; i++) {

        let tipo = vagas[i].tipo;
        var qualTipo = (desenv.checked && tipo == '1') ||
                    (negocio.checked && tipo == '2');

        if(qualTipo){
            let option = document.createElement("option");
            option.textContent = vagas[i].titulo;
            option.setAttribute("value", vagas[i].id);
    
            lista.appendChild(option);    
        }
    }
}

15. No final, adicione as instruções para o evento click dos elementos checkbox:

desenv.addEventListener("click", exibirVagas, false);
negocio.addEventListener("click", exibirVagas, false);

16. Execute a página e veja o resultado obtido ao selecionar o tipo de vaga.

206
 Otimizações
8 de layout com
Bootstrap
Atividade
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

Laboratório 1

Para usarmos o Bootstrap, temos alguns caminhos:

Fazendo o download dos arquivos no portal <getbootstrap.com>;

Adicionando o conteúdo do Bootstrap por meio do npm, ferramenta disponível

com o Node.js. Este procedimento requer que o projeto seja configurado com o
padrão requerido pelo próprio Node.js;

Usando a versão on-line, ou CDN (Content Delivery Network). A vantagem desta

abordagem é que não precisamos de arquivos no projeto, além de permitir a
mudança de versão, caso seja necessário. A desvantagem é que a execução requer
uma conexão com a Internet.

A escolha pela melhor alternativa é do desenvolvedor. Neste projeto, usaremos a

versão CDN. O Bootstrap está na versão 4.4 durante a elaboração deste material,
mas você pode escolher a versão que julgar adequada, lembrando-se de manter a
documentação sempre à disposição.

A – Incluindo estilos na página de registro baseados no Bootstrap

Nosso formulário de registros utilizou algumas classes CSS, mas não aplicamos
nenhuma classe ao formulário propriamente dito, ou seja, aos campos do
formulário. Vamos tomar como base a documentação do Bootstrap no link
<https://getbootstrap.com/docs/4.4/components/forms/>.

1. Abra o arquivo registro.html;

2. No elemento <head>, antes da referência ao arquivo estilos.css, inclua a

referência ao Bootstrap (essa referência foi copiada de <https://getbootstrap.
com/docs/4.4/getting-started/download/>):

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
content="width=device-width, initial-scale=1.0">
    <title>Registro de Candidatos</title>
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../css/estilos.css">
</head>

Observe que removemos os atributos integrity e crossorigin.

208
 Otimizações de layout com Bootstrap 8
3. Vamos adicionar classes Bootstrap nos elementos <div> que envolvem cada
grupo de campos de entrada, nos elementos <label>, nos elementos <div>
específicos dos campos de entrada e nos próprios campos de entrada. As
alterações estão destacadas a seguir:

<form>
    <div class="container borda">
        <!-- Nome do candidato -->
        <div class="form-group row">
            <label for="nome" 
                   class="col-sm-2 col-form-label">Nome:</label>
            <div class="col-sm-10">
                <input type="text" id="nome" name="nome" 
                        required="required" autofocus="autofocus" 
                        class="form-control" />
            </div>
        </div>

        <!-- Data de nascimento -->

        <div class="form-group row">
            <label for="data" 
                   class="col-sm-2 col-form-label">
Data Nascimento:</label>
            <div class="col-sm-5">
                <input type="date" id="data" name="data" 
                        required="required" 
                        class="form-control" />
            </div>
        </div>

        <!-- Sexo -->

        <div class="form-group row">
            <label for="sexo" 
                    class="col-sm-2 col-form-label">Sexo:</label>
            <div class="col-sm-10">
                <fieldset>
                    <legend>Sexo:</legend>
                    <input type="radio" id="masculino" name="sexo" 
                            value="masculino">Masculino<br />
                    <input type="radio" id="feminino" name="sexo" 
                            value="feminino">Feminino<br />

                </fieldset>
            </div>
        </div>

209
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

        <!-- Telefone -->

        <div class="form-group row">
            <label for="telefone" 
                    class="col-sm-2 col-form-label">Telefone:</label>
            <div class="col-sm-5">
                <input type="tel" id="telefone" name="telefone"
                        required="required" 
                        class="form-control" />
            </div>
        </div>

        <!-- E-mail -->

        <div class="form-group row">
            <label for="email" 
                    class="col-sm-2 col-form-label">Email:</label>
            <div class="col-sm-10">
                <input type="email" id="email" name="email" 
                        required="required" 
                        class="form-control" />
            </div>
        </div>

        <!-- Lista de vagas -->

        <div class="form-group row">
            <label class="col-sm-2 col-form-label">Tipo de vaga:</label>
            <div class="col-sm-5">
                <input type="radio" id="desenv" name="tipo" 
                        value="desenv" checked="checked">Desenvolvimento
                <input type="radio" id="negocio" name="tipo" 
                        value="negocio">Negócios
            </div>
        </div>

        <div class="form-group row">
            <label for="vaga" 
                   class="col-sm-2 col-form-label">Vaga desejada:</label>
            <div class="col-sm-5">
                <select name="vaga" id="vaga"  
                        class="form-control">
                </select>
            </div>
        </div>

        <!-- Botão de comandos -->

        <div class="form-group row">
            <div class="col-sm-5 col-sm-offset-2">
                <input type="button" value="Incluir" 
                        id="incluirButton" 
                        class="btn btn-primary">
            </div>
            
        </div>
    </div>
</form>

210
 Otimizações de layout com Bootstrap 8
4. O resultado da aplicação dessas classes produz o resultado adiante:

B – Definindo a página de produtos com Bootstrap

Vamos, agora, elaborar a página de apresentação de produtos da empresa

utilizando os recursos do Bootstrap. Vamos desenvolver a página de forma que as
informações relevantes estejam acessíveis na mesma página.

1. Crie, na pasta paginas, o arquivo produtos.html;

2. Adicione uma estrutura de arquivo HTML5:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Apresentação dos produtos</title>
</head>
<body>
    
</body>
</html>

211
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

3. Inclua as referências ao Bootstrap como mostrado adiante:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" 
          href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/
bootstrap.min.css" />  
                  
    <title>Apresentação dos produtos</title>
</head>
<body>
    
<script src="http://code.jquery.com/jquery-3.4.1.slim.min.js">
</script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js">
</script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></
script>

</body>
</html>

Veja que incluímos, também, uma referência ao jQuery. As bibliotecas JavaScript

são necessárias para executarmos eventos na página. No próximo tópico,
adicionaremos um menu de opções, responsivo. A responsividade baseada no
Bootstrap usa funções JavaScript previamente definidas na biblioteca, que, por
sua vez, utilizam o jQuery.

4. Vamos incluir um menu de opções. Logo abaixo de <body>, inclua este

código (observe o uso dos elementos Bootstrap):

<!-- Menu de navegação -->

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Impacta RH</a>
    <button class="navbar-toggler" type="button" 
            data-toggle="collapse" 
            data-target="#opcoes">
        <span class="navbar-toggler-icon"></span>
    </button>
    

212
 Otimizações de layout com Bootstrap 8
    <div class="collapse navbar-collapse" id="opcoes">
        <ul class="navbar-nav mr-auto">
        <li class="nav-item">
            <a class="nav-link" href="#treinamentos">Treinamentos</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#consultoria">Consultoria</a>
            </li>
        </ul>
    </div>
    </nav>

5. Teste a página, tanto em tamanho normal como em tamanho reduzido.

Observe a responsividade do menu:

213
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

6. Vamos desenvolver duas seções: treinamento e desenvolvimento.

Começando pela seção treinamento, serão necessárias três imagens
retangulares, com dimensões 150x150 pixels. Essas imagens serão usadas
para representar as modalidades de treinamento. Inclua essas imagens na
pasta imagens. Nomeie essas imagens como: curso-presencial.jpg, curso-
online.jpg e curso-incompany.jpg, respectivamente. Procure selecionar
imagens condizentes com os nomes. Em seguida, insira a <div> logo abaixo
do menu de navegação:

<!-- Conteúdo -->

<div class="container body-content clearfix">

</div>

7. Inclua um arquivo chamado produtos.css na pasta css. Após incluir o

conteúdo seguinte, adicione a referência a este arquivo na página:

.body-content {
    clear:both;
    padding: 15px;
    margin-top: 50px;
}

.center-image {
    text-align:center;
}

.margin-image{
    margin: 10px;
}

.footer{
    bottom: 0;
    width: 100%;
    text-align:center;
    padding:20px;
    background-color:#7F7F7F;
    color: white;
}

8. Na div que você inseriu por último, inclua um elemento <section> com o
seguinte conteúdo:

214
 Otimizações de layout com Bootstrap 8
<!-- #treinamentos -->
<section id="treinamentos">
    <h1>Treinamentos</h1>
    <p>
        A Empresa oferece treinamentos em diversas 
        áreas, nas seguintes modalidades:
    </p>
    <ul>
        <li>Presencial</li>
        <li>Online</li>
        <li><i>In-company</i></li>
    </ul>

    <div class="row center-image">
        <div class="col-md-4">
            <h3>Presencial</h3>
            <img src="../imagens/curso-presencial.jpg" 
                    class="img-circle margin-image" />
            <p>
                Nesta modalidade os cursos são oferecidos
                em nossa unidade localizada na Av. Paulista.
                Existem diversas opções de horários.<br />
                Consultar a grade de horários para maiores 
                informações
            </p>
        </div>
        <div class="col-md-4">
            <h3>Online</h3>
            <img src="../imagens/curso-online.jpg" 
                    class="img-circle margin-image" />
            <p>
                Não tem tempo de ir até nossa unidade?
                Necessita estudar, e possui horários diversificados?
                Temos treinamentos também na modalidade 
                <i>online</i>.<br />
                Assim, você estuda na hora e nas datas que 
                estiver disponível.
            </p>

        </div>
        <div class="col-md-4">
            <h3><i>In-company</i></h3>
            <img src="../imagens/curso-incompany.jpg" 
                    class="img-circle margin-image" />
            <p>
                Se sua empresa necessita de treinamentos personalizados,
                atendendo a necessidades específicas, temos uma equipe
                altamente capacitada para ir até sua empresa e levar
                o conteúdo que você precisa.
            </p>
        </div>

    </div>
</section>

215
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

9. Até este ponto, o resultado deve ser similar a este:

10. Abaixo dessa section, fora da div incluída no item 6, acrescente outro
elemento, section consultoria. Aqui, será necessária outra imagem, como
mostrado no código a seguir:

    </section>
</div>

<!-- #consultoria -->

<section id="consultoria" style="background-color:burlywood;">
    <div class="container body-content clearfix">
        <h1>Consultoria</h1>
        <div class="row">
            <div class="col-md-4">
                <img src="../imagens/consultoria.jpg" class="rounded" />
            </div>

216
 Otimizações de layout com Bootstrap 8
            <div class="col-md-8">
                <p>
                    De modo geral, toda empresa deseja obter lucros, 
                    a custos reduzidos.
                    No que diz respeito ao gerenciamento de 
                    processos, temos consultores
                    especializados para ajudar nossos clientes 
                    a atingirem esse objetivo.
                    Como? Aplicando da melhor forma possível 
                    os recursos disponíveis,
                    como infraestrutura, pessoas, sistemas, 
                    folhas de pagamento,
                    entre outros.<br />
                    Neste sentido a empresa colabora para 
                    que o principal objetivo do
                    negócio seja consolidado, dispensando 
                    seus clientes de ocupações irrelevantes.
                </p>
            </div>

        </div>
    </div>

</section>

11. O resultado é o mostrado a seguir:

217
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

12. Defina, agora, o rodapé da página, após o elemento <section> recém-

incluído:

<footer class="footer">
    <p>
        Desenvolvido para os cursos da Impacta
    </p>
    <p>
        &copy;2020 - Todos os direitos reservados
    </p>
</footer>

13. No arquivo index.html, atualize o menu de opções para incluir a página

produtos.html:

<nav>
    <ul class="menu" id="menuTopo">
        <li><a href="#">A Empresa</a></li>
        <li><a href="paginas/produtos.html">Produtos</a></li>
        <li><a href="#">Localização</a></li>
        <li><a href="paginas/registro.html">Trabalhe Conosco</a></li>

        <li class="icon">
            <a href="javascript:void(0);" 
onclick="mostrarMenu()">&#9776;</a>
        </li>
    </ul>
</nav>

14. Execute a página e verifique seu conteúdo.

218
 Otimizações de layout com Bootstrap 8
C – Definindo a página de localização

1. Inclua, na pasta paginas, um arquivo chamado localizacao.html;

2. Insira a referência ao Bootstrap e ao arquivo estilos.css:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Localização</title>
    <link rel="stylesheet" href=
    "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.
css" />

<link rel="stylesheet" href="../css/estilos.css">
</head>
<body>
    
</body>
</html>

3. Insira uma <div> com a classe container e, dentro dela, outra <div> com a
classe borda. O conteúdo do arquivo deve ser semelhante a este:

<body>
    <div class="container">
        <h1>Mapa de localização da empresa</h1>
        <div class="borda">
        </div>
    </div>
</body>

4. Nesta última <div>, inclua o endereço da empresa:

<body>
    <div class="container">
        <h1>Mapa de localização da empresa</h1>
        <div class="borda">
            <p>
                Avenida Paulista, 1009 - 17º Andar. <br />
                São Paulo. SP <br/>
                CEP 01311-100
            </p>
        </div>
    </div>
</body>

219
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

5. No navegador, abra o Google Maps;

6. Inclua o endereço da empresa;

7. Clique no menu e, em seguida, na opção Compartilhar ou Incorporar Mapa;

8. Escolha Incorporar Mapa;

9. Copie o código HTML de incorporação dentro de uma nova div:

<body>
    <div class="container">
        <h1>Mapa de localização da empresa</h1>
        <div class="borda">
            <p>
                Avenida Paulista, 1009 - 17º Andar. <br />
                São Paulo. SP <br/>
                CEP 01311-100
            </p>

            <div>
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d365
7.084187565715!2d-46.65452158543306!3d-23.565419684680933!2m3!1f0!2f0!3f0!3m2!
1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce59c7947976cb%3A0xcfae32dae64ebfda!2sAv.%20
Paulista%2C%201009%20-%20Bela%20Vista%2C%20S%C3%A3o%20Paulo%20-%20SP%2C%20
01310-100!5e0!3m2!1spt-BR!2sbr!4v1587082422616!5m2!1spt-BR!2sbr" 
                    width="600" height="450" 
                    frameborder="0" style="border:0;" 
                    allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
            </div>
        </div>
    </div>
</body>

220
 Otimizações de layout com Bootstrap 8

10. Ajuste o código e visualize o mapa, executando a página. O resultado será

semelhante a este:

11. Atualize o menu de opções em index.html:

<nav>
    <ul class="menu" id="menuTopo">
        <li><a href="#">A Empresa</a></li>
        <li><a href="paginas/produtos.html">Produtos</a></li>
        <li><a href="paginas/localizacao.html">Localização</a></li>
        <li><a href="paginas/registro.html">Trabalhe Conosco</a></li>

        <li class="icon">
            <a href="javascript:void(0);" 
               onclick="mostrarMenu()">&#9776;</a>
        </li>
    </ul>
</nav>

221
 Inclusão e
listagem de
9 registros com
Web services
Atividade
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

Laboratório 1

Neste projeto, incluiremos um recurso para adicionar os dados dos candidatos

em um banco de dados simulado com o componente json-server, assim como
fizemos para buscar a lista de vagas.

A – Criando arquivo de dados e configurando eventos para adicionar

registros via JavaScript

1. Abra o arquivo dados.json. Acrescente uma lista vazia chamada candidatos.

Essa lista será usada para receber os novos registros:

{
  "vagas": [
    {
      "id": 1,
      "titulo": "Programador Java Pleno",
      "tipo": "1"
    },
    {
      "id": 2,
      "titulo": "Analista Comercial",
      "tipo": "2"
    },
    {
      "id": 3,
      "titulo": "Instrutor Excel Avançado",
      "tipo": "1"
    },
    {
      "id": 4,
      "titulo": "Gerente de Projetos para .NET",
      "tipo": "2"
    },
    {
      "id": 5,
      "titulo": "Consultor de Desenvolvimento Agil",
      "tipo": "2"
    },
    {
      "id": 6,
      "titulo": "Programador VB.Net",
      "tipo": "1"
    }
  ],
  "candidatos": [ ]
}

224
 Inclusão e listagem de registros com Web services 9
2. Para este projeto, usaremos o jQuery para acessar o serviço, como alternativa
à função fetch. Na pasta scripts, crie um arquivo chamado cadastro.js.
Adicione o seguinte conteúdo:

$(document).ready(function () {
    $('#incluirButton').click(function(){
        //determinação do sexo com base
        //no item selecionado
        let sexo = '';
        if($('#masculino').prop('checked')){
            sexo = 'masculino';
        } else {
            sexo = 'feminino';
        }

        //obtenção do texto referente à vaga

        //selecionada
        let vaga  = $('#vaga').find(":selected").text();

        $.ajax({
            url: 'http://localhost:3000/candidatos',
            method: 'POST',
            data: {
                nome: $('#nome').val(),
                data: $('#data').val(),
                sexo: sexo,
                telefone: $('#telefone').val(),
                email: $('#email').val(),
                vaga: vaga
            },
            success: function(resposta){
                window.alert('Dados incluídos');
            },
            error: function(erro){
                window.alert('Erro: ' + erro.responseText);
            }
        });
    });
});

225
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

3. No arquivo registro.html, adicione a referência ao jQuery e, em seguida, a

referência ao arquivo cadastro.js. É importante que a referência ao jQuery seja
incluída antes de ser usada:

    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="../scripts/validacao_registro.js"></script>
    <script src="../scripts/listaVagas.js"></script>
    <script src="../scripts/cadastro.js"></script>
</body>

</html>

4. Mantenha o Web service em execução, acionando a instrução json-server

dados.json no prompt de comandos (lembre-se que essa instrução deve ser
executada na pasta onde se encontra o arquivo dados.json);

5. Execute o arquivo registro.html no browser. Informe alguns dados no

formulário, como no exemplo:

226
 Inclusão e listagem de registros com Web services 9
6. Ao clicar no botão Incluir, receberemos a mensagem de sucesso (claro, se
o código estiver correto!):

7. Observe o arquivo dados.json. As informações fornecidas no formulário

foram gravadas a partir do componente json-server:

{
  "vagas": [
    {
      "id": 1,
      "titulo": "Programador Java Pleno",
      "tipo": "1"
    },
    {
      "id": 2,
      "titulo": "Analista Comercial",
      "tipo": "2"
    },
    {
      "id": 3,
      "titulo": "Instrutor Excel Avançado",
      "tipo": "1"
    },
    {
      "id": 4,
      "titulo": "Gerente de Projetos para .NET",
      "tipo": "2"
    },

227
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

    {
      "id": 5,
      "titulo": "Consultor de Desenvolvimento Agil",
      "tipo": "2"
    },
    {
      "id": 6,
      "titulo": "Programador VB.Net",
      "tipo": "1"
    }
  ],
  "candidatos": [
    {
      "nome": "Gervasio Cesar",
      "data": "1990-03-22",
      "sexo": "masculino",
      "telefone": "3254-2200",
      "email": "[email protected]",
      "vaga": "Instrutor Excel Avançado",
      "id": 1
    }
  ]
}

O atributo id foi inserido pelo próprio json-server. Esse atributo é requerido

por esse componente e representa a chave primária do registro, mesmo que
de forma simulada.

B – Apresentando a lista de candidatos

1. Na pasta paginas, inclua o arquivo listaCandidatos.html. Escreva a estrutura

para o conteúdo HTML5 e já inclua a referência ao Bootstrap e ao jQuery:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
content="width=device-width, initial-scale=1.0">
    <title>Lista de Candidatos</title>
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/estilos.css">
</head>
<body>
    
    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
</body>
</html>

228
 Inclusão e listagem de registros com Web services 9
2. Nessa nova página, apresentaremos a lista de candidatos cadastrados
quando o usuário clicar em um botão com o título Listar Candidatos. Vamos,
então, escrever a estrutura básica para essa página:

<body>
    <div class="container borda">
        <h1>Lista de Candidatos</h1>        
        <div>
            <button type="button" id="listarButton" 
                    class="btn btn-primary">Listar Candidatos</button>
            <hr />
        </div>
    </div>

    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
</body>

3. O resultado da execução produz o resultado adiante:

229
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

4. Abaixo do botão e da linha horizontal, escreva a estrutura para uma tabela,

usando as classes do Bootstrap:

<body>
    <div class="container borda">
        <h1>Lista de Candidatos</h1>        
        <div>
            <button type="button" id="listarButton" 
                    class="btn btn-primary">Listar Candidatos</button>
            <hr />
            
            <table class="table table-striped" id="tabela">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>NOME</th>
                        <th>TELEFONE</th>
                    </tr>
                </thead>
                <tbody>
    
                </tbody>
            </table>

        </div>
    </div>

    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
</body>

5. No arquivo cadastro.js, adicione ao final uma função que execute a tarefa

de consumir o Web service. Em seguida, execute essa função no evento click
do botão inserido nessa página:

$(document).ready(function () {
    $('#incluirButton').click(function(){
        //continuação do código, omitido por conveniência
    });

    //listando os candidatos
    $('#listarButton').click(function () {
        $.ajax({
            dataType: 'json',
            url: 'http://localhost:3000/candidatos',
            method: 'GET',
            success: function (resposta) {
                $('#tabela > tbody').html('');
                $.each(resposta, function (index, item) {
                    let linha = $('<tr>');
    

230
 Inclusão e listagem de registros com Web services 9
                    let colunas = '<td>' + item.id + '</td>';
                    colunas += '<td>' + item.nome + '</td>';
                    colunas += '<td>' + item.telefone + '</td>';                    
    
                    linha.append(colunas);
    
                    $('#tabela > tbody').append(linha);
                });
            },
            error: function (erro) {
                console.log(erro.responseText);
            }
        });
    });

});

6. Adicione a referência ao arquivo cadastro.js em listaCandidatos.html:

    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="../scripts/cadastro.js"></script>
</body>

7. Execute a página listaCandidatos.html. Com o Web service em execução,

clique no botão Listar Candidatos:

231
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

8. Atualize o arquivo index.html para incluir um link para a listagem de

candidatos:

<ul class="menu" id="menuTopo">
    <li><a href="#">A Empresa</a></li>
    <li><a href="paginas/produtos.html">Produtos</a></li>
    <li><a href="paginas/localizacao.html">Localização</a></li>
    <li><a href="paginas/registro.html">Trabalhe Conosco</a></li>
    <li><a href="paginas/listaCandidatos.html">Listar Candidatos</a></li>

    <li class="icon">
        <a href="javascript:void(0);" onclick="mostrarMenu()">&#9776;</a>
    </li>
</ul>

232
10 Aplicação de
Canvas API
Atividade
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

Laboratório 1
A – Definindo um relógio na página de registro de candidatos

Adicionaremos um código baseado em Canvas API para mostrar um relógio na

página registro.html. O código referente a esse relógio foi obtido em <https://
developer.mozilla.org/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Basic_
animations>.

O objetivo é ter a oportunidade de incluir um elemento usando esta API que, quando
bem explorada, oferece recursos bastante interessantes para nossa aplicação.

1. Crie, na pasta scripts, um arquivo chamado relogio.js;

2. Nesse arquivo, inclua este código (se preferir, pode buscar no link indicado
anteriormente):

function init() {
    clock();
    setInterval(clock, 1000);
}

function clock() {
    var now = new Date();
    var ctx = document.getElementById('relogio').getContext('2d');

    ctx.save();
    ctx.clearRect(0, 0, 150, 150);
    ctx.translate(75, 75);
    ctx.scale(0.4, 0.4);
    ctx.rotate(-Math.PI / 2);
    ctx.strokeStyle = "black";
    ctx.fillStyle = "white";
    ctx.lineWidth = 8;
    ctx.lineCap = "round";

    // Hour marks

    ctx.save();
    for (var i = 0; i < 12; i++) {
        ctx.beginPath();
        ctx.rotate(Math.PI / 6);
        ctx.moveTo(100, 0);
        ctx.lineTo(120, 0);
        ctx.stroke();
    }
    ctx.restore();

234
 Aplicação de Canvas API 10
    // Minute marks
    ctx.save();
    ctx.lineWidth = 5;
    for (i = 0; i < 60; i++) {
        if (i % 5 != 0) {
            ctx.beginPath();
            ctx.moveTo(117, 0);
            ctx.lineTo(120, 0);
            ctx.stroke();
        }
        ctx.rotate(Math.PI / 30);
    }
    ctx.restore();

    var sec = now.getSeconds();
    var min = now.getMinutes();
    var hr = now.getHours();
    hr = hr >= 12 ? hr - 12 : hr;

    ctx.fillStyle = "black";

    // write Hours

    ctx.save();
    ctx.rotate(hr * (Math.PI / 6) + (Math.PI / 360) * min + 
(Math.PI / 21600) * sec)
    ctx.lineWidth = 14;
    ctx.beginPath();
    ctx.moveTo(-20, 0);
    ctx.lineTo(80, 0);
    ctx.stroke();
    ctx.restore();

    // write Minutes

    ctx.save();
    ctx.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec)
    ctx.lineWidth = 10;
    ctx.beginPath();
    ctx.moveTo(-28, 0);
    ctx.lineTo(112, 0);
    ctx.stroke();
    ctx.restore();

235
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

    // Write seconds

    ctx.save();
    ctx.rotate(sec * Math.PI / 30);
    ctx.strokeStyle = "#D40000";
    ctx.fillStyle = "#D40000";
    ctx.lineWidth = 6;
    ctx.beginPath();
    ctx.moveTo(-30, 0);
    ctx.lineTo(83, 0);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(0, 0, 10, 0, Math.PI * 2, true);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(95, 0, 10, 0, Math.PI * 2, true);
    ctx.stroke();
    ctx.fillStyle = "rgba(0,0,0,0)";
    ctx.arc(0, 0, 3, 0, Math.PI * 2, true);
    ctx.fill();
    ctx.restore();

    ctx.beginPath();
    ctx.lineWidth = 14;
    ctx.strokeStyle = '#325FA2';
    ctx.arc(0, 0, 142, 0, Math.PI * 2, true);
    ctx.stroke();

    ctx.restore();
}
init();

3. Em registro.html, inclua o elemento <canvas> logo após <div

class="container borda">:

<div class="container borda">

    <canvas id="relogio"></canvas>
    <!-- Nome do candidato -->

4. Inclua a referência ao arquivo relogio.js ao final da página:

    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="../scripts/validacao_registro.js"></script>
    <script src="../scripts/listaVagas.js"></script>
    <script src="../scripts/cadastro.js"></script>
    <script src="../scripts/relogio.js"></script>
</body>

5. Execute a página e visualize o relógio.

236
11 Uso de áudio
e vídeo
Atividade
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

Laboratório 1
A – Incluindo um áudio e um vídeo na aplicação

O propósito desta etapa é adicionar um vídeo na página inicial e um áudio

convidando os candidatos a se inscreverem no site.

1. Selecione um vídeo. Procure colocar um vídeo que possua algum significado

para a aplicação;

2. No projeto, crie uma pasta chamada videos e inclua o vídeo que você
selecionou;

3. Na página index.html, localize o elemento <article>. Inclua o elemento a

seguir como último item de <article>:

    <h2>Assista ao nosso vídeo, e conheça melhor a empresa</h2>
    <div id="video" style="text-align:center;">
        <video controls="controls" width="400" height="300">
            <source src="videos/video.mp4" type="video/mp4" />
            <p>
                Seu navegador não tem suporte ao elemento video
            </p>
        </video>
    </div>
</article>

4. Agora, use o recurso do Windows para gravar um áudio. Apresente uma

mensagem de boas-vindas para os candidatos. Chame o áudio de welcome.
mp3;

5. Crie uma pasta chamada audios e inclua seu áudio nessa pasta;

6. Inclua esse áudio na página registro.html, logo após o relógio:

<canvas id="relogio"></canvas>

<div>
    <audio src="../audios/welcome.mp3" controls autoplay loop></audio>
</div>

7. Se preferir, use os recursos apresentados na aula para incluir botões

personalizados.

238
12 Armazenamento
local
Atividade
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

Laboratório 1
A – Criando um banco de dados IndexedDb e recursos para inserir e listar
registros

Nesta etapa do projeto, desenvolveremos um registro local para armazenamento dos

candidatos cadastrados, como alternativa ao cadastro inserido no Web service que
desenvolvemos. O propósito é treinar o uso do componente JavaScript indexedDb.
Serão realizadas as devidas verificações a respeito da possibilidade de acessá-lo.
Para completar essa tarefa, realizaremos algumas alterações em arquivos existentes.

1. No arquivo registro.html, inclua um elemento <div> para apresentar a

mensagem do banco de dados. Observe as alterações realizadas:

<div class="container borda">
    <div class="row">
        <div class="col-sm-6 text-center">
            <canvas id="relogio"></canvas>
        </div>
        <div class="col-sm-6 text-center">
            <div id="mensagemdb"></div>
        </div>
    </div>

2. Acrescente um novo botão ao lado do botão Incluir com o título Enviar

para o IndexedDb, como no exemplo a seguir:

<!-- Botão de comandos -->

<div class="form-group row">
    <div class="col-sm-5 col-sm-offset-2">
        <input type="button" value="Incluir" id="incluirButton" 
                class="btn btn-primary">
        <input type="button" value="Enviar para o IndexedDb" 
                id="incluirDbButton" class="btn btn-primary">
    </div>
</div>

240
 Armazenamento local 12
3. Altere o conteúdo do arquivo estilos.css, acrescentando os elementos
listados a seguir (estes elementos serão usados pelo código jQuery):

/*
Classes para mensagem de erro ou sucesso
no cadastro de candidatos via indexedDb
*/
.erro_db{
    color:red;
}
.sucesso_db {
    color:blue;
}

4. Na pasta paginas, inclua uma nova página chamada verRegistros.html. O

conteúdo dessa nova página deve ser o seguinte:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
content="width=device-width, initial-scale=1.0">
    <title>Registros do IndexedDb</title>
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../css/estilos.css">
</head>
<body>
    <div class="container borda">
        <h1>Listagem de Candidatos</h1>
        <div>
            <button type="button" id="listarDbButton" 
                    class="btn btn-primary">
                Ver os candidatos
            </button>
            <hr />

        </div>
        <div>
            <ul id="listaCandidatos"></ul>
        </div>
    </div>

    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
</body>
</html>

241
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

5. Na pasta scripts, crie um novo arquivo chamado database.js. Em seguida,

inclua a referência a esse arquivo em verRegistros.html:

    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="../scripts/database.js"></script>
</body>

6. Nesse arquivo, teremos instruções para criar / abrir um banco de dados

chamado DBCandidatos, com um registro (tabela) chamado candidatos.
Analise a estrutura e inclua este conteúdo no arquivo:

let request, db;

request = window.indexedDB.open("DBCandidatos", 1);
request.onerror = function (event) {
    $("#mensagemdb").addClass("erro_db");
    $("#mensagemdb").html("Erro ao abrir o banco de dados");
    $("#btnEnviar").prop("disabled", true);
}
request.onupgradeneeded = function (event) {
    $("#mensagemdb").addClass("sucesso_db");
    $("#mensagemdb").html("Banco de dados preparado para uso");

    db = event.target.result;
    let objectStore = db.createObjectStore("candidatos",
        { keyPath: "email" });
};
request.onsuccess = function (event) {
    $("#mensagemdb").addClass("sucesso_db");
    $("#mensagemdb").html("Banco de dados aberto com sucesso");

    db = event.target.result;
}

//evento para incluir um novo candidato

$("#incluirDbButton").click(function () {
    let nome = $("#nome").val();
    let datanasc = $("#data").val();
    let sexo;
    if ($("#masculino").is(':checked')) {
        sexo = "masculino";
    } else {
        sexo = "feminino";
    }
    let telefone = $("#telefone").val();
    let email = $("#email").val();
    let vaga = $('#vaga').find(":selected").text();

    let transaction = db.transaction(["candidatos"], "readwrite");

242
 Armazenamento local 12
    transaction.oncomplete = function (event) {

        $(location).attr("href", "/paginas/registroOk.html");
    };
    transaction.onerror = function (event) {
        alert("Ocorreu um erro ao incluir o registro");

    };
    var objStore = transaction.objectStore("candidatos");
    objStore.add({
        email: email, nome: nome, data: datanasc, sexo: sexo,
        telefone: telefone, vaga: vaga
    });
});

//evento para listar os candidatos, adicionando-os em uma lista <li>

$("#listarDbButton").click(function () {
    let request = db.transaction(["candidatos"], "readonly")
        .objectStore("candidatos");

    request.openCursor().onsuccess = function (event) {
        let cursor = event.target.result;
        if (cursor) {
            $("#listaCandidatos").append("<li>" + cursor.value.nome
                + "</li>");
            cursor.continue();
        }
    };
});

7. Na página registro.html, inclua a referência ao arquivo database.js:

    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="../scripts/validacao_registro.js"></script>
    <script src="../scripts/listaVagas.js"></script>
    <script src="../scripts/cadastro.js"></script>
    <script src="../scripts/relogio.js"></script>
    <script src="../scripts/database.js"></script>
</body>

8. Na página index.html, adicione uma opção ao menu para listar os candidatos,

contemplando a página recém-criada:

243
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

<ul class="menu" id="menuTopo">
    <li><a href="#">A Empresa</a></li>
    <li><a href="paginas/produtos.html">Produtos</a></li>
    <li><a href="paginas/localizacao.html">Localização</a></li>
    <li><a href="paginas/registro.html">Trabalhe Conosco</a></li>
    <li><a href="paginas/listaCandidatos.html">Listar Candidatos</a></li>
    <li><a href="paginas/verRegistros.html">Ver Candidatos</a></li>

    <li class="icon">
        <a href="javascript:void(0);" onclick="mostrarMenu()">&#9776;</a>
    </li>
</ul>

9. Teste a aplicação, inclua alguns registros e liste-os:

A inclusão desse registro produz o resultado mostrado no browser (foi utilizado

o Google Chrome):

244
13 Complemento:
PhoneGap
Atividade
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

Laboratório 1
A – Criando um aplicativo para cadastro de contato com PhoneGap

Este é um projeto que representa o cadastro de contatos por meio de um aplicativo,

a ser usado como complemento do curso. A proposta é mostrar o caminho para a
elaboração do aplicativo.

1. Abra o prompt de comandos apontando para uma pasta diferente da pasta

ProjetoEmpresaRH;

2. No prompt aberto, crie um projeto do tipo PhoneGap digitando este comando:

phonegap create app projeto.complemento ProjetoPhonegap

Observe que o nome do projeto é ProjetoPhonegap.

246
 Complemento: PhoneGap 13
3. Abra o Visual Studio Code apontando para a pasta do novo projeto. A pasta
se chama app:

4. Na pasta js, adicione o arquivo scripts.js com o seguinte conteúdo:

var request, db;

request = window.indexedDB.open("DBContatos", 1);
request.onerror = function (event) {
    window.alert('Erro ao abrir banco de dados');
}
request.onupgradeneeded = function (event) {
    db = event.target.result;
    var objectStore = db.createObjectStore("contatos",
             { keyPath: "nome" });
};
request.onsuccess = function (event) {
    db = event.target.result;
}

$(document).ready(function(){

247
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

    //buscar o endereço pelo cep

    $("#cep").blur(function(){
        let cep = $(this).val();

        let url = `http://viacep.com.br/ws/${cep}/json/`;

        let resposta = {};

        fetch(url)
            .then(res => {
                let x = res.json();
                return x;
            })
            .then(valor => {
                resposta = valor;
                $('#rua').val(resposta.logradouro);
                $('#cidade').val(resposta.localidade);
                $('#numero').focus();
            });
    });

    //incluir o registro no indexeddb

    $("#btnEnviar").click(function () {
        var nome = $("#nome").val();
        var telefone = $("#telefone").val();
        var cep = $("#cep").val();
        var numero = $("#numero").val();

        var transaction = db.transaction(["contatos"], "readwrite");
    
        transaction.oncomplete = function (event) {
            window.alert('Registro incluído com sucesso');
        };
        transaction.onerror = function (event) {
            window.alert("Ocorreu um erro ao incluir o registro");
            
        };
        var objStore = transaction.objectStore("contatos");
        objStore.add({
            nome: nome, telefone: telefone, cep: cep, numero: numero
        });
    });
});

248
 Complemento: PhoneGap 13
5. Abra o arquivo index.html na pasta www. Deixe o conteúdo como mostrado
no exemplo:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />

    <meta name="viewport" content="initial-scale=1, 
               width=device-width» />

    <title>Contatos</title>
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"/>
</head>

<body>
    <div class="container">
        <h2>Registro de Contatos</h2>
        <h4>Dados Pessoais</h4>
        <div>
            <div class="form-group">
                <label>Nome:</label>
                <input type="text" class="form-control" id="nome" />
            </div>
            <div class="form-group">
                <label>Telefone:</label>
                <input type="text" class="form-control" id="telefone" />
            </div>

        </div>

        <h4>Dados do Endereço</h4>
        <div>
            <div class="form-group">
                <label>Informe o CEP:</label>
                <input type="text" class="form-control" id="cep" />
            </div>
            <div class="form-group">
                <label>Rua:</label>
                <input type="text" class="form-control" id="rua" 
                       readonly="readonly" />
            </div>

249
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

            <div class="form-group">
                <label>Cidade:</label>
                <input type="text" class="form-control" id="cidade" 
                       readonly="readonly" />
            </div>
            <div class="form-group">
                <label>Informe o Número:</label>
                <input type="text" class="form-control" id="numero" />
            </div>
            <button type="button" class="btn btn-primary" 
                    id="btnEnviar">Enviar</button>
        </div>

    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="js/scripts.js"></script>
</body>

</html>

6. Abra o arquivo config.xml. Altere o início do arquivo com estes dados:

<?xml version='1.0' encoding='utf-8'?>
<widget id="projeto.complemento" version="1.0.0" 
xmlns="http://www.w3.org/ns/widgets" 
xmlns:gap="http://phonegap.com/ns/1.0">

    <name>ProjetoPhonegap</name>
    <description>
        Cadastro de Contatos.
    </description>
    <author email="[email protected]" 
href="http://wwww.impacta.com.br">
        FrontEnd Impacta
    </author>

7. Com essas alterações, compacte (zipe) a pasta app, gerando o arquivo app.
zip;

8. Use suas credenciais no portal <https://build.phonegap.com/>;

9. Faça o upload do arquivo app.zip;

10. Aguarde o tempo de compilação. Em seguida, obtenha o arquivo .apk

gerado e transfira para o seu celular Android;

11. Visualize a execução no dispositivo.

250
Mãos à obra!
1 Criando uma
página HTML
Mãos à obra!
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

Laboratório 1
A - Elaborando um currículo pessoal

1. Usando o Visual Studio Code, crie uma nova pasta chamada Laboratorios;

2. Em seguida, adicione uma pasta chamada Laboratorio01;

3. Na pasta Laboratorio01, crie uma pasta chamada pessoal;

4. Na pasta pessoal, inclua um arquivo HTML chamado curriculum.html;

5. Pesquise informações a respeito de um curriculum vitae;

6. Use, entre outros, os seguintes elementos:

•• Html;
•• Head;
•• Body;
•• Header;
•• Article;
•• Div;
•• h1, h2;
•• P;
•• Section;
•• Footer;
•• Img.

7. Elabore seu currículo considerando, pelo menos, as seguintes informações:

•• Dados pessoais: Nome, CPF, data de nascimento, telefone, e-mail;

•• Dados de localização: Endereço completo;

•• Experiência profissional: Destaque todos os itens relevantes referentes

à sua experiência profissional;

•• Pretensão salarial;

•• Cargos pretendidos;

•• Foto recente.

8. Para destacar a experiência profissional, use listas, ou seja, a combinação

dos elementos <ul> e <li>;

9. Execute a página e verifique se ficou apresentável. Se não ficou, retorne e

refaça as etapas das quais não tenha gostado.

254
2 Desenvolvendo
formulários
Mãos à obra!
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

Laboratório 1
A - Criando um formulário para inclusão de currículo

1. Na pasta Laboratorios, crie uma nova pasta chamada Laboratorio02;

2. Na pasta Laboratorio02, copie o conteúdo da pasta Laboratorio01;

3. Na pasta Laboratorio02, inclua uma pasta chamada forms;

4. Na pasta forms, crie um arquivo HTML chamado formCurriculum.html;

5. Crie um título, usando o elemento h1;

6. Escreva o conteúdo do formulário usando caixas de texto adequadas para

cada finalidade. As informações que devem constar no curriculum vitae,
juntamente com as sugestões de componentes, estão listadas a seguir:

•• Dados pessoais (fieldset): CPF, nome, data de nascimento, sexo, telefone,

e-mail, foto (input e img);

•• Endereço (fieldset): Logradouro, número, complemento, bairro, cidade,

estado, CEP (input, e select para listar os estados);

•• Experiência profissional (fieldset): Resumo da experiência profissional

(textarea);

•• Pretensões (fieldset): Cargo pretendido (select – incluir três elementos),

salário pretendido (input).

7. Inclua um botão do tipo submit e outro do tipo reset;

8. Para todos os campos, inclua validadores:

•• Todos os campos devem ser obrigatórios;

•• O campo Nome deve ter, no máximo, 50 caracteres;
•• O campo Telefone deve ter, no máximo, 20 caracteres.

9. Teste seu formulário.

256
3 Aplicando estilos

Mãos à obra!
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

Laboratório 1
A - Aperfeiçoando o currículo com estilos

1. Na pasta Laboratorios, crie uma nova pasta chamada Laboratorio03;

2. Na pasta Laboratorio03, copie o conteúdo da pasta Laboratorio02;

3. Na pasta Laboratorio03, inclua uma nova pasta chamada css;

4. Na pasta css, inclua um arquivo chamado estilos.css;

5. Analise seu arquivo curriculum.html;

6. Planeje um formato bem atraente para ele:

•• Seu nome em destaque, com fontes maiores;

•• Os dados pessoais logo abaixo do nome;

•• A sua foto preferencialmente do lado esquerdo;

•• Sua experiência profissional em um retângulo (div) com cantos

arredondados, uma cor de fundo diferenciada, com destaque;

•• As informações de contato fáceis de encontrar: procure colocar em fontes

coloridas, em negrito.

7. Planeje as classes css e as inclua no arquivo criado estilos.css;

8. Altere o arquivo curriculum.html, de modo que os elementos HTML

contemplem essas classes;

9. Se for necessário, realize uma manutenção no seu HTML de modo a atender

aos estilos definidos;

10. Inclua a referência a esse css na sua página;

11. Teste a página. Certamente, haverá a necessidade de realizar algumas

alterações até que fique com uma apresentação amigável.

258
 Aplicando estilos 3
B - Aperfeiçoando o formulário com estilos

1. Vamos, agora, deixar o formulário referente ao laboratório anterior mais

atraente. Para isso, abra a página formCurriculum.html;

2. Verifique seu conteúdo e planeje uma aparência funcional e amigável do

ponto de vista do usuário;

3. Inclua, no arquivo estilos.css, os estilos necessários para:

•• Configurar as fontes das caixas de texto, todas com o mesmo nome,

tamanho e cor;

•• Alinhar os componentes do formulário;

•• Incluir o conteúdo do formulário em um elemento capaz de dar um

destaque, como uma cor de fundo diferenciada, bordas sombreadas e
arredondadas.

4. Execute a página e analise seu resultado.

259
4 Aplicando
responsividade
Mãos à obra!
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

Laboratório 1
A - Melhorando a aparência do currículo em dispositivos menores

1. Na pasta Laboratorios, crie uma nova pasta chamada Laboratorio04;

2. Na pasta Laboratorio04, copie o conteúdo da pasta Laboratorio03;

3. Abra os arquivos curriculum.html e estilos.css;

4. O curriculum vitae, inicialmente, estava com a foto ao lado das informações

referentes aos dados pessoais. Complemente o seu css de forma que, para
dispositivos menores, a foto fique acima dos dados pessoais;

5. Dependendo de como você organizou seu formulário na ocasião da aplicação

do css, deixe todas as informações em um fluxo linear vertical.

262
5 JavaScript e jQuery

Mãos à obra!
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

Laboratório 1
A - Adicionando funcionalidade ao formulário

1. Na pasta Laboratorios, crie uma nova pasta chamada Laboratorio05;

2. Na pasta Laboratorio05, copie o conteúdo da pasta Laboratorio04;

3. Na pasta Laboratorio05, inclua uma pasta chamada scripts;

4. Na pasta scripts, inclua um novo arquivo chamado validacao.js;

5. Se os elementos do seu formulário ainda não possuem um id, inclua-o em

todos os campos de formulário, incluindo o botão que permite a inclusão do
registro;

6. Altere o modo do botão de submit para button;

7. No arquivo validacao.js, inclua códigos baseados em jQuery que realizem a

sequência de tarefas adiante:

•• Definir o evento click para o botão, tomando como base o seu id;

•• Na função call-back correspondente ao evento, definir variáveis que

obtenham todas as informações dos campos de entrada;

•• Criar uma variável cujo conteúdo seja formado com todas as informações
dos campos de entrada, devidamente armazenados em variáveis,
conforme item anterior;

•• Executar a função alert() para que essa variável seja exibida para o
usuário.

As outras funcionalidades serão descritas mais adiante.

264
 JavaScript e jQuery 5
8. Em um local do seu formulário (acima dos campos de entrada, ao lado ou
abaixo dos botões, ou em outro lugar mais conveniente), inclua um elemento
<div>, devidamente configurado no arquivo estilos.css. Esse <div> deve se
apresentar com uma borda destacada, uma cor de fundo e fontes diferentes do
formulário, um botão contendo um x para que seja fechado pelo usuário por
meio do mouse, e uma largura menor que a largura do formulário. Atribua um
id para essa nova <div>;

9. No arquivo validacao.js, continue com a codificação, seguindo mais estes

passos:

•• Usando a função de animação fadeIn(), escreva um grupo de instruções

que, logo após a apresentação da mensagem (alert()), promova a aparição
do seu novo div, suavemente, em três segundos;

•• É importante que a div recém-inserida esteja escondida (invisível) assim

que a página for carregada. Para isso, use a função hide() ao div por meio
do seu id;

•• Codifique um evento click para o botão localizado na div da mensagem, de

forma que, clicando nele, a mensagem desapareça também suavemente,
com o uso da função fadeOut().

10. Teste essas funcionalidades no seu novo formulário.

265
6 Comunicação
com o servidor
Mãos à obra!
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

Laboratório 1
A - Criando uma nova página contendo uma lista de estados e cidades

1. Na pasta Laboratorios, crie uma nova pasta chamada Laboratorio06;

2. Na pasta Laboratorio06, copie o conteúdo da pasta Laboratorio05;

3. Na pasta Laboratorio06, insira uma nova página chamada cidades.html na

pasta forms;

4. Na pasta scripts, inclua um arquivo chamado cidades.js;

5. Planeje a página cidades.html de modo que tenha dois elementos <select>.

O primeiro deverá representar uma lista de estados do Brasil, e o outro, uma
lista de cidades de cada estado. Considere o seguinte:

•• Quando o formulário for carregado, a lista de estados deverá ser

preenchida no primeiro elemento;

•• Assim que o usuário escolher um estado, a lista de cidades deverá

aparecer no segundo elemento.

268
 Comunicação com o servidor 6
6. No arquivo cidades.js, elabore um código JavaScript que realize as seguintes
tarefas:

•• Definir uma estrutura baseada em JSON representando um array em que

cada elemento possui duas informações, estado e cidade:

var estados = [
{ "id": "1", "estado": "SP" },
{ "id": "2", "estado": "RJ" },
{ "id": "3", "estado": "MG" },
{ "id": "4", "estado": "BA" },
];

var cidades = [
{ "id": "1", "idestado": "1", "cidade": "CAMPINAS" },
{ "id": "2", "idestado": "1", "cidade": "SOROCABA" },
{ "id": "3", "idestado": "2", "cidade": "NITEROI" },
{ "id": "4", "idestado": "2", "cidade": "CABO FRIO" },
{ "id": "5", "idestado": "2", "cidade": "ANGRA" },
{ "id": "6", "idestado": "3", "cidade": "BELO
HORIZONTE"},
{ "id": "7", "idestado": "3", "cidade": "BETIM" },
{ "id": "8", "idestado": "3", "cidade": "EXTREMA" },
{ "id": "9", "idestado": "4", "cidade": "SALVADOR" },
{ "id": "10", "idestado": "4", "cidade": "PORTO
SEGURO" },
];

•• Escrever uma função que, quando chamada na carga da página, realize

a leitura desse conteúdo e inclua os estados, representados pela
propriedade uf;

•• Escrever uma função que, tomando o estado como base, monte uma
lista de cidades, juntamente com o respectivo elemento <option> a ser
inserido dinamicamente no <select> existente;

•• Prever um item no primeiro elemento (correspondente aos estados) com o

conteúdo TODOS. Quando selecionado, deverá mostrar todas as cidades,
independente do estado.

269
7 Suporte off-line

Mãos à obra!
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

Laboratório 1
A - Criando um formulário para inclusão de usuários

1. Na pasta Laboratorios, crie uma nova pasta chamada Laboratorio07;

2. Na pasta Laboratorio07, copie o conteúdo da pasta Laboratorio06;

3. Na pasta Laboratorio07, insira uma nova página chamada usuarios.html

na pasta forms;

4. Na pasta scripts, inclua um arquivo chamado usuarios.js. O arquivo

usuários.html deverá ter um formulário contendo campos de entrada para o
nome do usuário e uma senha, além de um botão para incluir um novo usuário;

5. No arquivo usuarios.js, escreva instruções para armazenar um usuário

no objeto localStorage. As etapas para a elaboração desse código são as
seguintes:

•• Leitura dos campos de entrada e armazenamento em variáveis;

•• Definição de chaves a serem associadas a cada variável do item anterior;

•• Utilização do objeto localStorage para armazenar as duas informações

no browser;

•• Mensagem de confirmação de inclusão com sucesso ou erro, se for o

caso.

B - Criando um formulário para login

1. Defina um novo formulário na pasta forms, só que, desta vez, para login. A
página deve se chamar login.html. Os campos de entrada são essencialmente
os mesmos usados para o cadastro de usuários;

2. Em seguida, no arquivo usuarios.js, escreva um conjunto de instruções que

realizem a tarefa de validação de usuários. Essa tarefa deve ser formada pelas
seguintes etapas:

•• Leitura dos campos de texto e armazenamento em variáveis;

•• Comparação dos campos de entrada lidos com os respectivos valores

armazenados em localStorage;

•• Se os valores forem encontrados, armazená-los em sessionStorage.

272
 Suporte off-line 7
3. Altere a página formCurriculum.html para que, quando carregada, verifique
se existe algum dado armazenado em sessionStorage (o mesmo usado no
item anterior). Se existir, apresenta a página normalmente. Se não existir,
desabilita o botão que permite salvar um currículo.

C - Armazenando um currículo no banco de dados IndexedDb

1. Na pasta scripts, crie um arquivo chamado database.js;

2. No arquivo database.js, escreva um conjunto de instruções para armazenar

as informações de um currículo no banco de dados IndexedDb. As etapas para
elaboração dessas instruções são as seguintes:

•• Ler as informações do formulário e armazená-las em variáveis;

•• Definir o nome de um banco de dados;

•• Abrir o banco de dados;

•• Definir uma estrutura para o registro, o que, nos bancos de dados

relacionais, é chamado de tabela;

•• Por meio de uma estrutura baseada em JSON, tomar as variáveis lidas e

persisti-las no registro;

•• Substituir a mensagem que já havia neste formulário, mostrando todos

os dados, por uma mensagem de confirmação ou de erro.

3. Teste as três páginas:

•• Crie um usuário;

•• Chame a tela de login. Se o usuário estiver validado, será direcionado

para formCurriculum;

•• Inclua alguns registros.

D - Listando os nomes das pessoas armazenadas no banco de dados

1. Na pasta forms, inclua um novo arquivo chamado listaCurriculum.html

cujo conteúdo, além do título, é um elemento <ul>;

2. No arquivo database.js, complemente a informação necessária para buscar

todos os registros armazenados e, em seguida, exibi-los na página. A exibição
deverá contemplar a inclusão da informação em elementos <li>, a serem
inseridos dinamicamente no elemento <ul>.

273
8 PhoneGap

Mãos à obra!
 Desenvolvimento Front End com HTML5, CSS3 e JavaScript

Laboratório 1
A - Gerando um aplicativo baseado em Android com o PhoneGap

Com base nos procedimentos indicados, elabore a aplicação. Este laboratório

requer o uso do NodeJS ou do PhoneGap Builder. O último é a forma mais simples
de testar, uma vez que o portal da Adobe disponibiliza um compilador para suas
aplicações.

1. Usando instruções de linha de comando do Cordova, crie um projeto

chamado app;

2. Defina a página inicial (index.html) com o mesmo conteúdo que você definiu
na página curriculum.html;

3. Inclua o arquivo css necessário na pasta correspondente ao projeto Cordova

que você criou;

4. Compacte a pasta app, cujo conteúdo é o seu projeto. Guarde esse arquivo
compactado para uma etapa posterior;

5. Para este laboratório, vamos usar o PhoneGap Build para gerar nosso pacote.
Para tanto, crie uma conta no site da Adobe, proprietária do PhoneGap. Siga os
passos adiante:

•• Entre no site <https://build.phonegap.com/>;

•• Registre-se como novo usuário. Use a conta free (existem opções pagas);

•• Em seguida, realize o login;

•• Na página que surgir, clique na aba private (na aba open source você
será direcionado a usar uma aplicação no GitHub). Como usuário free, é
possível criar apenas uma conta private;

•• Faça o upload do projeto compactado. Quando estiver pronto, você terá

a opção de fazer o download do pacote de instalação tanto para Android
como para iOS.

6. Proceda com a instalação no seu dispositivo, preferencialmente, Android.

276