EN T O

O L V IM
S E N V
D E
W E B L
IC IA
IN
Developer by:
RAFAEL ANGRIZANI
01

02

06

14

21

61

91

114

131
 PRIMEIROS PASSOS 03

Criar um pequeno sistema de CRUD, fazendo com

que a linguagem escolhida interaja com um
01
banco de dados, este primeiro pode ser feito de
forma procedural, caso a linguagem permita.
Aprenda conceitos básicos como variável,
laços de repetição estruturas condicionais,
independente da linguagem de programação. 04

Aprender a forma de programar a linguagem

02 orientada à objetos, e em seguida recrie outro
CRUD reutilizando este paradigma, ao mesmo
Após escolher a linguagem que estudará, tempo aprenda GIT e GITHUB, faça download de
deve-se aprender a sintaxe da linguagem, outros projetos e os estude. Aprenda o sist. MVC.
que nada mais é do que a forma como se
escreve a mesma, suas palavras reservadas, etc.
Após, deve-se aplicar a lógica de programação 05
estudada à linguagem escolhida, como os laços
e estruturas condicionais, dentre outras. Pesquise pelo Framework de maior estabilidade do
mercado relacionado à linguagem, Aprenda a
desenvolver APIs. Aprenda operações básicas e
avançadas, evolua e estude Inglês, facilitará em
muito o seu desenvolvimento. 01
 TIPOS DE
PROGRAMADOR

Trabalha com sistemas

locais, também chamados
de sistemas off-line. Ex.
Sistemas de Supermercado,
farmácia, controle de
estoque, etc.

02
Trabalha com a criação de
aplicativos para
celular,  desenvolve trabalhos
de montagem, depuração e
testes de programas,
executando serviços de
manutenção nos programas já
desenvolvidos.

03
Trabalha com instruções
lógicas para jogos, pode
trabalhar com
desenvolvimento de jogos
para computador, smartphone,
ou jogos que rodam em
websites.

04
 FRONT-END

Trabalha com o
desenvolvimento de sites,
portais, fóruns e aplicações
voltadas ao ambiente da
internet. Normalmente estes
serviços podem ser acessados
através de um navegador e
ficam hospedados em um
servidor web.O programador
BACK-END
pode ser Front-end(HTML, CSS e
JS) ou Back-end(JS, PHP,
PYTHON, JAVA, etc)
05
06
1 - PASSO

Cliente fala com a empresa para o

desnvolvimento de seu site, na
empresa está o analista de sistemas
que coletará as informações do cliente

Cliente Tal

07
2 - PASSO

Analista repassa os dados coletados da

entrevista com cliente, para o designer
08
3 - PASSO

Designer cria layout, logo, com base em algo já

existente ou nos dados apresentados pelo analista

09
4 - PASSO

Designer passa o wireframe desenvolvido

para o web developer, e neste instante
começa um consumo gigantesco de café

10
5 -PASSO

Todo café foi transformado em código, e as idéias do designer ganharam vida,

então basta que envie para o desenvolvedor back-end construir a lógica.

11
6 - PASSO

Developer back-end realiza o trabalho

necessário para a lógica da aplicação
funcionar.

FIM 12
 EN T O
O L V IM
S E N V
D E
W E B L
IC IA
IN
Developer by:
RAFAEL ANGRIZANI
14
FERRAMENTAS DESKTOP NAVEGADORES

Sublime Text Opera

Firefox
Visual Studio Code

Google
Atom

Safari
Intellij

netbeans Edge

Brackets Brave

15
EDITOR DE TEXTO
E EXTENSÕES

https://code.visualstudio.com/

16
 BROWSERS
https://www.mozilla.org/pt-BR/firefox/new/

https://www.google.com/intl/pt-BR/chrome/

17
 LOCAL / MÁQUINA

https://babeljs.io/ https://git-scm.com/

https://www.npmjs.com/

https://nodejs.org/en/

https://github.com/

18
 FONTE
https://www.w3schools.com/html/default.asp BIBLIOGRAFICA

https://developer.mozilla.org/pt-BR/docs/Web/HTML

19
 Estudo Básico
ORGANIZAÇÃO DOS
ARQUIVOS curso index.html
style.css
public index.html

ccs
app.js style.css

img.jpg JS
app.js

img img.jpg

Os arquivos html devem ser Os arquivos css devem ser Os arquivos javascript
salvos com a extensão .html salvos com a extensão .css e devem ser salvos com a
e seu arquivo principal seu arquivo principal extensão .js e seu
recebe o nome de geralmente recebe o nome de arquivo principal
index.html style.css geralmente recebe o
nome de app.js

20
21
COMPOSIÇÃO BÁSICA DE
UMA PÁGINA WEB
Linguagem de Marcação
Descreve a estrutura de uma
página web, os seus dados e
informações
https://www.plataformadev.com.br

Linguagem de Estilo
Personalização da forma como os
dados são apresentados ao
cliente

Linguagem de Programação
de Scripts, gera para a página
web mais dinamisno e interação
com o cliente

22
 Tim Berners-Lee

1989

Tags com Corpo

Tags sem Corpo

23
TAG SEM CORPO

Nome da Tag
Menor que Maior que

TAG sem Corpo

24
TAGS COM CORPO
TAG de Abertura

Menor que Maior que

Nome da Tag

Nome da Tag

TAG de Fechamento

25
 Abertura da TAG

Corpo da Tags dentro de Tags, (aninhamento de

TAG tags)Tag Pai e dentro Tags Filhas

Fechamento da TAG (/)

26
 Abertura da TAG

Conteúdo
Conteúdo
Conteúdo a ser mostrado
Conteúdo Podendo ser imagens, vídeo, texto, etc
Conteúdo
Conteúdo

Fechamento da TAG

27
FECHAMENTO DAS TAGS

28
ELEMENTO HTML
Um elemento refere-se a um par de tags e seu conteúdo, ou a uma tag
"vazia", que não requer tag de fechamento ou conteúdo, basado na idéiade
aninhamentos, alguns elementos podem ter ainda outros elementos

Elemento

..texto..

tag de atributo valor do conteúdo tag de

abertura atributo fechamento

29
 ATRIBUTOS
Atributos são informações adicionais sobre o elemento, e devem ser
colocados sempre na tag de abertura

Valor do Atributo

Atributo da TAG

texto

Nome da TAG

30
 ATRIBUTOS
IDENTIFICADORES
Valor do Atributo ,
Nome definido pelo usuário,
pode repetir
Atributo da TAG
Que identifica um grupo
de elementos

texto

Nome da TAG

31
 Valor do Atributo ,
Nome definido pelo usuário,
Não deve repetir, deve
manter-se único

Atributo da TAG,
Identificador ÚNICO
Do elemento

texto

Nome da TAG

32
 ESTRUTURA BÁSICA HTML

Informa ao navegador que será um documento do tipo HTML5

Tag que inicia o nosso Documento HTML, com atributo lang
que define a linguagem em que o site será desenvolvido

Define o cabeçalho do site,

meta informações sobre a aceitará meta caracteres, como acentos, cedilhas, etc
página, links para arquivos Título do site
externos, SEO)

Define o corpo do site,

conteúdo (informações
visíveis)

Tag que encerra o nosso

documento HTML

33
ALGUMAS DAS TAGS MAIS USADAS

Sendo que <h1>, possui maior relevância para o motor de busca

dos navegadores, <h2> menos relevância do que h1, e assim
sucessivamente, lembrando que vai do <h1> até <h6>

Define um parágrafo em um trecho de texto

Define uma quebra de linha no documento

Define um comentário no documento, e não é

interpretado pelo navegador
34
<!-- início do post -->
<h1> Titúlo do Post </h1>
<h2> Subtitulo do Post </h1>
<p>
Agora aqui temos um Agora aqui temos um
parágrafo, do nosso post parágrafo, do nosso post
</p>
<!-- final do post -->

<h1> Titúlo do Post </h1>

<!-- final titulo, e abaixo o texto -->
<p>
Agora aqui temos um Agora aqui temos um
parágrafo, do nosso post parágrafo, do nosso post
Agora aqui temos um outro
</p>
parágrafo, do nosso post <p>
Agora aqui temos um outro
parágrafo, do nosso post
</p>
35
Define um link que te direciona para
outro contexto

Atributo usado para especificar o endereço do link,

Este endereço pode ser Relativo links na mesma página, ou
Absoluto com endereços completos geralmente externos

Atributo usado para definir onde será aberto o conteúdo, de

acordo com o valor passado:
_blank = Abre em uma nova aba
_self = Padrão, abre no mesmo local
_parent = Abre o documento vinculado no frame pai
_top = Abre o documento vinculado no corpo inteiro da janela

Representa informações consultivas sobre o elemento

o qual ele representa, como um tooltip
36
Define uma imagem

Atributo que especifica o arquivo de origem, caso necessário, indicar a

pasta de origem também se estiver em outro diretório

Atributo que define um tamanho de largura para imagem

Atributo que define um tamanho de altura para imagem

Atributo define um texto alternativo, caso a imagem não seja

carregada
37
<!-- início do card -->

<h2> Titulo do Card </h1>

<img src=”img/imagemFlor.jpg” alt=”Flor ”>

<p> Legenda da Imagem </p>

<a href=”https://google.com/img”> Ver Mais </a> Legenda da Imagem

<!-- final do card --> Ver Mais

OBS: Por padrão o navegador não caregará os

elementos desta maneira, precisamos do CSS

38
 BANCO DE IMAGENS GRÁTIS
https://www.freepik.es/

https://pt.freeimages.com https://pixabay.com/pt/

https://www.flickr.com/ https://pixabay.com/pt/

39
É usado para separar o conteúdo, ou definir uma alteração no fluxo
do mesmo

Texto pré-formatado, conservando espaços e quebras

de linha

Texto em negrito

Icones

40
Texto em negrito com significado especial

Texto marcado

Texto pequeno

Texto excluído

41
Texto subscrito

Texto sobrescrito

Texto enfatizado

Citação curta, geralmente os navegadores colocam áspas

42
Define uma seção de texto que é citada de outra fonte, os navegadores
aplicam um recuo ao texto

Define uma abreviação ou um acrônimo

Informações de contato de um autor de um documento

Define o titulo de um trabalho

43
Define uma tabela no documento

Legenda de uma tabela

Agrupa o conteúdo do cabeçalho, geralmente usado com <tbody>

e <tfoot>, e depois do <caption>

Agrupa o conteúdo do corpo de uma tabela, geralmente usado com

<tbody> e <tfoot>, e depois do <caption>

44
Agrupa o conteúdo do rodapé, geralmente usado com <tbody> e <tfoot>, e
depois do <caption>

Define uma célula de cabeçalho

Define uma linha na tabela

Define uma célula padrão de dados na

tabela

45
<table>
<thead>
<tr>
<th> Header 1 </th>
<th> Header 2 </th>
</tr>
</thead>
<tfoot>
<tr>
<td> Footer 1 </td>
<td> Footer 2 </td>
</tr>
</tfoot>
<tbody>
<tr> OBS: Por padrão o navegador não caregará os
elementos com esta cores, precisamos do CSS
<td> Body 1 </td>
<td> Body 2 </td>
</tr>
</tbody>
</table>
46
Define uma lista desordenada

Define uma lista ordenada

Define uma lista de diretórios

Define os itens de uma lista (ul, ol, dir)

47
48
 Uma Seção de um documento que permite ao usuário através de
controles interativos e campos enviar informações à um servidor

Nome do arquivo que receberá os dados do formulário e os processará,

quando este for enviado

Nome do método HTTP que será usado para envio do formulário, pode ser
GET (via URL), ou POST(incorporado no corpo do formulário)

49
Agrupa elementos dentro de um
formulário

Representa uma legenda par um determinado

tipo de entrada para dado em um formulário

Define a qual entrada de dado este label

irá etiquetar, à qual input.

Representa uma caixa de texto extenso, em

formato livre, como um comentário ou formulário
de retorno

50
Representa uma legenda par um determinado tipo de entrada
para dado em um formulário

Define qual será o tipo do campo, o padrão é 'text', mas podemos

mudar para 'radio', 'checkbox', 'color', 'date', 'email', 'file','submit',
'image', 'number','password', etc.

Define a quantidade máxima de caracteres

Define a quantidade mínima de caracteres

Define uma dica para o usuário, do que será esperado no campo

Define como sendo obrigatório o preenchimento, senão não envia o formulário

51
<form action=”processa.php” method=”post”>
<fieldset>

<label for=”id_nome”> Nome: </label>

<input type=”text” placeholder=”Seu Nome” id=”id_nome” required=”required” >

<label for=”id_email”> E-mail: </label>

<input type=”email” placeholder=”Seu E-mail” id=”id_email” required=”required” >

<textarea> Mensagem </textarea>

Nome:
Seu Nome
<input type=”submit”>
E-mail:
</fieldset> Seu E-mail
</form>
Mensagem

Enviar

OBS: Por padrão o navegador caregará os

elementos do formulário um ao lado do outro 52
 BLOCK / INLINE

- Elementos de bloco ocupam

100% da largura da linha em Elemento de Bloco 01
que foram criados

Elemento de Bloco 02
- Elementos Inline, ocupam
apenas o espaço do conteúdo Inline 01 Inline 02 Inline 03
correspondente
Elemento de Bloco 03

Inline 04 display:block

Elemento de Bloco 04 Elemento de Bloco 05

Display:inline, + propriedades Display:inline , + propriedades

53
 HTML SEMÂNTICO

Descreve o significado do conteúdo,

através de tags semânticas, tornando-o
mais claro para o browser e outras
engines que processam esta informação
(semântico = significado)

54
 <HEADER>
Representa o cabeçalho de um documento pode conter mais
de 01 por documento, não pode ser filho da Tag Footer

<article>
  <header>
    <h1> Mais importante Título aqui </h1>
    <h3> Menos importante titulo aqui </h3>
    <p> Alguma informação adicional aqui </p>
  </header>
  <p> Informações pertinentes aqui </p>
</article>

O footer não deve conter cabeçalhos, já que   <header>

não atendem às necessidades semânticas do     <h1> Mais importante Título aqui </h1>
footer esta finalidade     <h3> Menos importante titulo aqui </h3>
    <p> Alguma informação adicional aqui </p>
  </header>
  

55
<NAV>
Representa o agrupamento Principal de links de
navegação

<nav>
  <ul>      
  <li><a href=”#”> pagina 1 </a></li>
<li><a href=”#”> pagina 2 </a></li>
<li><a href=”#”> pagina 3 </a></li>
<li><a href=”#”> pagina 4 </a></li>
  </ul>
</nav>

No exemplo acima criamos a tag NAV e colocamos dentro

dela links para outras páginas organizados dentro de uma
lista desordenada, pois semanticamente não possui uma
organização específica e nem uma maior importância entre
um e outro, por isto a lista desordenada, entretanto
poderíamos ter colocado apenas os links sem qualquer
problema, isso depende do desenvolvedor

56
<SECTION>
Representa uma seção de conteúdos em comum dentro do documento, como
capítulos, cabeçalhos, rodapés e geralmente possui título entre h1 até h6

 <section id="noticias">   <section>

    <h1> Mais importante Título aqui </h1>
<section id="esporte">     <h3> Menos importante titulo aqui </h3>
...     <p> Alguma informação adicional aqui </p>
</section>   </section>
<section id="politica">   
...
</section>
<section id="educacao">
...
</section>

</section>
  

57
<ARTICLE>
Declara um conteúdo que não precisa de outro para fazer sentido, pois especifica um
conteúdo independente, deve fazer sentido por si só

  <article>
    <h1> Mais importante Título aqui </h1>
     <p> Alguma informação adicional aqui </p>
  </article>

<article>
     <h1> Mais importante Título aqui </h1>
     <p> Alguma informação adicional aqui </p>
  </article>

  

  <article>
    <h1> Mais importante Título aqui </h1>
     <p> Alguma informação adicional aqui </p>
  </article>
  
58
<ASIDE>
Representa um conteúdo de apoio, ao conteúdo ao principal, pode ser colocado como
uma barra lateral em um artigo, geralmente coloca-se links para outros conteúdos
complementares

<aside>
  <ul>      
  <li><a href=”#”> link 1 </a></li>
<li><a href=”#”> link 2 </a></li>
<li><a href=”#”> link 3 </a></li>
<li><a href=”#”> link 4 </a></li>
  </ul>
</aside>

<p> Alguma informação aqui </p>

  <aside>
     <h1> Título sobre a informação aqui </h1>
      <p> Alguma descrição sobre a informação aqui </p>
  </aside>
  

59
<FOOTER>
Representa o rodapé de um documento ou seção, nele pode conter elementos
referentes ao desenvolvedor, mapa do site, formulários de contato, etc. ou
informações sobre sua seção contida.

<footer>
<h1> Mapa do Site </h1>
  <ul>      
  <li><a href=”#”> pagina 1 </a></li>
<li><a href=”#”> pagina 2 </a></li>
<li><a href=”#”> pagina 3 </a></li>
<li><a href=”#”> pagina 4 </a></li>
  </ul>
</footer>

60
INTRODUÇÃO ao

61
 Håkon Wium Lie

1996

Classes
Id’s
Tags

62
 Código CSS sendo chamado de arquivo externo
LOCALIZAÇÃO HTML

<link rel=”stylesheet” href=”./style.css” >

CÓDIGO CSS CSS

h1{
color: blue;
}

Código CSS dentro do documento HTML

<style>

h1{
color: blue;
}

</style>

Código CSS dentro da tag HTML

<h1 style=”color:blue”> Titulo </h1>

63
SELETOR DE TAG
tag HTML

conteúdo

seletor CSS
resultado

Valor da Propriedade
conteúdo
Propriedade

64
 SELETOR DE ID

tag HTML

conteúdo

seletor CSS resultado

conteúdo

Valor da Propriedade

Propriedade

65
SELETOR DE ATRIBUTO EXATO

tag HTML

seletor CSS resultado

conteúdo

Valor da Propriedade

Propriedade

66
 SELETOR HIERÁRQUICO

tag HTML

resultado

seletor CSS

Valor da Propriedade

Propriedade

67
ESTUDO DAS CORES
Ao se trabalhar com cores no CSS, temos algumas alternativas de declaração, podemos usar
a notação:
HEXADECIMAL - usa-se no formato # rr gg bb (red, green, blue) são valores
hexadecimais entre 00 e ff (igual decimal 0 até 255)

RGB - (red, green, blue), cada parâmetro define a intensidade da cor entre 0 e 255,
pode usar o valor de alfa também com RGBA(red, green, blue, alfa) o alfa vai de
0,0(totalmente transparente) até 1,0(nenhum pojco transparente)

HSL - (matiz, saturação e luminosidade) matiz é um grau na roda de cores que vai
de 0 (vermelho) até 360(azul), a saturação é um valor percentual entre 0%(cinza) até
100%(preto cor mais pura), e a luminosidade é uma porcentagem entre 0%(preto) e
100%(branco), pode usar o valor de alfa também com HSLA (matiz, saturação, luminosidade
e alfa) o alfa vai de 0,0(totalmente transparente) até 1,0(nenhum pojco transparente)

NAME - Você pode simplesmente escrever o nome da cor que deseja em linguagem
inglesa

68
<h1> Meu Titulo </h1> html

h1 {
color: red;
ou
color: #ff0000; css
ou
color: rgb(255,0,0);
ou
color: hsl(0, 100%, 50%);

Meu Titulo resultado

69
70
UNIDADES DE MEDIDA

O CSS possui várias unidades diferentes para expressar um comprimento. Estas

unidade se dividem em 02 tipos: Absoluta e Relativa

ABSOLUTA - São medidas fixas, ou seja, mesmo que o tamanho da tela varia a
medida será a mesma. Ex: cm (centímetros), mm (milímetros), in (polegadas 1in =
96px = 2.54cm), px (pixel 1px = 1/96th of 1in), e pt (pontos 1pt = 1/72 of 1in)

RELATIVA - São medidas relativas a outras medidas de comprimento, Ex: em

(realtivo ao tamanho da fonte do elemento pai), ex (relativo à altura X do elemeto
atual), ch (relativo à largura do número 0), rem (relativo ao tamanho da fonte do
elemento root), vw (relativo à 1% da largura da viewport), vh (relativo à 1% da altura
da viewport) e % (relativo ao elemento pai)

Geralmente se usa medidas absolutas, para elementos que se deseja ter o

tamanho fixo, independente do dispositivo em que o cliente esteja usando para
visualizar sua aplicação, e unidades relativas para elementos responsivos.

71
REFERÊNCIA RELATIVA DA PÁGINA

Viewport
Área da tela, que
está visível para o
cliente,
independente de width
se ter uma tela
enorme em altura, height Elemento
esta medida
refere-se ao que o
cliente está vendo
no momento

72
MARGIN / PADDING / BORDER

UNIDADES DE MEDIDA
USADAS PARA
ADICIONAR VALOR

REM EX
Elemento
VW VH
elemento
VMAX VMIN

CH PX

73
MARGIN
Define o espaço externo do elemento, neste exemplo: espaço entre o
topo da página e o Elemento

10px

Elemento
Elemento {
margin-top: 10px;
}

74
Neste exemplo:
Espaço entre o 1º elemento e o 2º Elemento

Elemento

10px
Elemento2 {
margin-top: 10px;
}
Elemento 2

75
 DECLARAÇÕES

10px 10px

10px <elemento> 10px 20px <elemento> 20px

10px 10px

elemento{ elemento{
propriedade: 10px; propriedade: 10px 20px;
} }

76
 10px 10px

20px <elemento> 20px 40px <elemento> 20px

30px 30px

elemento{ elemento{
propriedade: 10px 20px 30px; propriedade: 10px 20px 30px 40px;
} }

77
 Element {
BOX-SIZING width: 100px;
margin: 5px;
padding: 5px;
border: 5px;
Box-Sizing: Content-Box
box-sizing: ??? ;
}

Box-Sizing: Border-Box

78
ESTADOS DO LINK
Os estados em links são personalizados através de declarações de regras de estilo
para as pseudo-classes do elemento <a> do HTML, veja a sintaxe seguinte.

seletor:pseudo-classe {propriedade: valor}

Sendo que as classes em CSS podem também ser usadas com pseudo- classes.
seletor.class:pseudo-class {propriedade: valor}

Possíveis estados:
a:link........define o estilo do link no estado inicial;
a:visited...define o estilo do link visitado;
a:hover.....define o estilo do link quando passa-se o mouse sobre ele;
a:active....define o estilo do link ativo (o que foi "clicado").

79
 FLEXBOX
A propriedade flexbox deve ser adicionada à um elemento pai (container), desta manera podemos
manipular seus elementos filhos, tanto no eixo principal(main axis ) quanto no eixo transversal
(cross axis), para conseguirmos usá-lo basta que defina no elemento que será o container, a
propriedade display: flex;

CONTAINER ITEM

FLEX-DIRECTION : row | row-reverse | column | column- ALIGN-SELF : stretch | flex-start | flex-end | center |
reverse baseline

FLEX-WRAP : nowrap | wrap | column | wrap- reverse ORDER : 0 | número

JUSTIFY-CONTENT : flex-start | flex-end | center | space- between | FLEX-GROW : 0 | número

space-around | space-evenly

ALIGN-ITEMS : stretch | flex-start | flex-end | center | baseline FLEX-SHRINK : 1 | número FLEX : 0 1 auto

ALIGN-CONTENT : stretch | flex-start | flex-end | center | FLEX-BASIS : auto | length

space-between | space-around

80
 AXIS
Tanto o eixo principal(MAIN AXIS), quanto o eixo transversal(CROSS AXIS) dependem do
valor aplicado à propriedade flex-direction, caso o flex-direction seja ROW, o Main Axis é na
horizontal como a imagem abaixo, e caso seja o flex-direction seja COLUMN, o Main Axis é
na Vertical, ou seja, os eixos se invertem.
main-start main-end

main-size
cross-start

main axis
cross size

cross axis

main axis = eixo principal

cross-end
cross axis = eixo transveral

81
 FLEX-DIRECTION

row row-reverse

1 2 3 3 2 1

column column-reverse

1 3

2 2 main axis
cross axis

container
3 1
item

82
 JUSTIFY-CONTENT

flex-start space-between

1 2 3 1 2 3

flex-end space-around

1 2 3 1 2 3

center space-evenly

1 2 3 1 2 3

83
ALIGN-ITEMS
flex-start flex-end center

1 2 3

1 2 3

1 2 3

stretch baseline

1 2 3 text text text text

84
ALIGN-CONTENT
flex-start flex-end center
1 2 3 4 5
6 7 1 2 3 4 5
6 7
1 2 3 4 5
6 7

stretch space-between space-around

1 2 3 4 5 1 2 3 4 5
1 2 3 4 5

6 7 6 7
6 7

85
FLEX-GROW & WRAP
A,B { flex-grow: 1 }
C {flex-grow: 6 } A,B,C{ flex-grow:1 }

A B C 1 2 3

nowrap wrap
1 2 3 4 5 6 7 1 2 3 4 5
6 7

86
Exemplo:
Abaixo temos um exemplo simples que pode ser usado para o
alinhamento de um menu, ou de cards, com links, etc.

HTML CSS

<div class="container"> .container {

<div> 1 </div> display:flex;
<div> 2 </div> justify-content:space-between;
<div> 3 </div> }
<div> 4 </div>
</div>

Resultado

1 2 3 4 5

87
 @media

A @media é usada em consultas de mídia para aplicar estilos diferentes para

diferentes tipos / dispositivos de mídia.
As consultas de mídia podem ser usadas para verificar várias coisas, como:
-- largura e altura da janela de visualização
-- largura e altura do dispositivo
-- orientação (o tablet / telefone está no modo paisagem ou retrato?)
resolução
O uso de consultas de mídia é uma técnica que fornece uma folha de estilo
personalizada para desktops, laptops, tablets e telefones celulares, fazendo com que o
conteúdo da página se adeque a cada tipo de dispositivo usado pelo cliente.
Outro fator importante além da consulta de mídia, é o uso da meta tag viewport
da seguinte forma:
<meta name=”viewport” content=”width=device-width” />
Isso irá indicar ao navegador que o width da metatag viewport é o tamanho da
largura do dispositivo

88
SINTAXE
@media not|only mediatype and (mediafeature and|or|not mediafeature) {
CSS-Code;
}
not: a palavra-chave not reverte o significado de uma consulta de mídia inteira.
only: a única palavra-chave impede que navegadores mais antigos que não
suportam consultas de mídia com recursos de mídia apliquem os estilos
especificados. Não tem efeito nos navegadores modernos.
and: A palavra-chave e combina um recurso de mídia com um tipo de mídia ou
outros recursos de mídia.

mediatype: os tipos podem ser: All, print, screen, speech

89
HTML VISUALIZANDO NO DESKTOP

Example

CSS

VISUALIZANDO NO MOBILE

Example

90
INTRODUÇÃO ao

91
JAVASCRIPT
É uma linguagem de programação
interpretada, multiplataforma e de alto nível,
desenvolvida na Netscape por Brendan Eich na
década de 90.
Em meados de 96/97, a Netscape enviou o
JavaScript à ECMA International para
padronização, isso resultou em um novo padrão
de linguagem, conhecido como ECMAScript.
ECMAScript = padrão
Javascript = Implementação deste padrão
ES* = Significa EcmaScript e sua versão
92
 Código JS sendo chamado em um documento externo
LOCALIZAÇÃO HTML

<script src=”app.js”></script>
CÓDIGO JS JS
alert( 'código js' )

Código JS dentro do documento HTML

<script>

alert( 'código js' )

</script>

Código JS dentro da tag HTML

<button onclick=”alert('código js')”> Enviar </button>

93
 VARIÁVEIS
As Variáveis em JavaScript reservam um espaço na memória do computador (como se
fosse uma caixa), onde podemos guardar temporariamente determinado tipo de dado,
elas podem ser declaradas usando uma das palavras reservadas Var , Let ou Const.

Var Let Const

Escopo Global e Escopo Global, Escopo Global

Local e de Bloco e valor 'imutável'

JavaScript é uma linguagem fracamente tipada, e caseSensitive. Além de ser

multiparadigma. Praticamente tudo em Javascript trata-se de um objeto

94
 P String let nome = 'Fulano'
R
I
Number let idade = 34
M
I
Boolean let casado = true

let nome
T Null let varNula = null
I
V Undefined let indefinida
E
Symbol let sym = Symbol("foo")
nome = 'Fulano'

O Object let pessoa = { nome:”Fulano”, idade : 34 }

B
console.log(nome) J Array let pessoa = [ 'abacate', 'uva', 'pera' ]
E
C Date let now = new Date()
T Function function soma(num){ return num + num }

-- As variáveis não podem iniciar com números, apenas com letras ou ' _ '
-- Não pode ser utilizado caracter especial como ' ç ', ' ^ ', ' ~ '
-- Não podem ser iguais as palavras reservadas da linguagem
-- Por convenção quando usar nomes compostos, usamos camelcase
-- Dê preferência por nomes em inglês às variáveis, pensando em globalidade
Ex: novaVariavel, firstName, etc...
95
Dados em formato de texto, valores Dados em formato de números, Dados do tipo True ou False, em Dados nulos, sem valor algum,
declarados dentro de áspas, valores positivos, negativos, com comparações booleanas usando apenas reserva um local na memória
independente de serem simples ou ponto flutuante números, o único valor que retorna mas não aloca qualquer tipo de valor
duplas falso é 0

var nome = “Fulano” var idade = 33 var casado = true var nulo = null

Dados em formato de par, chave : A Symbol() função retorna um valor São variáveis apenas declaradas mas Dados como se fosse uma lista, e
valor, podendo ter quantos itens do tipo símbolo, com atributos e sem qualquer tipo de valor atribuído à cada item da lista possui um índice,
forem necessários, igual um Array métodos estáticos, todo valor elas, nem espaços na memória são por default, o índice inicia sempre em
retornado é exclusivo zero (0)
alocados
var pessoa={ let sym = Symbol("foo") var indefinida var frutas = ['uva','pera']
nome: “Fulano”,
idade: 33
}

um conjunto de instruções que Cria uma instância de Date que É o conteúdo que será ignorado pelo
BigInt é um objeto interno que executa uma tarefa ou calcula um representa um único momento no tempo, interpretador javascript
fornece uma maneira de valor, pode ou não retornar algo, pode é baseado no valor de tempo que é o
representar números inteiros ou não possuir parâmetros número de milisegundos desde 1º de
/*
maiores que 253 - 1 Janeiro de 1970 (UTC). mutiplas
const bigNum = BigInt(9850958) linhas
var soma=function(num){ var now = new Date() */
return num + num
} // uma linha 96
EXEMPLO PRÁTICO

OBS: Console.log( ) Exibe uma mensagem no console do navegador. 98

 OPERADORES

OPERADORES ARITMÉTICOS OPERADORES

operador descrição LÓGICOS
+ soma OPERADORES DE COMPARAÇÃO operador descrição
- subtração operador descrição && AND
* multiplicação ~ NOT
= atribuição de valor
|| OR
** exponenciação == igualdade de valor
=== igualdade de valor e tipo ^ XOR
/ divisão
% módulo != diferente

++ incremento !== diferente valor e tipo

> maior que
-- decremento
< menor que
>= maior igual
<= menor igual
97
FUNÇÃO
Funções em JavaScript são blocos de códigos(os blocos são delimitados por chaves
{} ). Uma função é como um procedimento de JavaScript — um conjunto de instruções
que executa uma tarefa ou calcula um valor. Para usar uma função, você deve definí-la
em algum lugar no escopo do qual você quiser chamá-la, em Javascript há mais de uma
forma de definir funções, cada forma pode alterar a maneira de como e quando
podemos invocá-las e manipulá-las.
Elas podem ser criadas de forma literal.
function myFunction(){} //definindo uma função

Passadas como parâmetros para outras funções(callback)

myFunction(function(){ console.log("função como parâmetro") })

Exitem ainda inúmeras outras formas de se trabalhar com funções, no entanto o

entendimento básico é como criá-las e como utilizá-las de forma correta no seu
código

99
 IF ELSE

if( 5 > 3 ){
console.log('true')
} else {
console.log('false')
}

// 'true'
if( 1 > 3 ){
console.log('true')
} else {
console.log('false')
}

// 'false'

100
 LAÇO FOR

01- incializa
02-condição 04-incremento
contador

03 - comandos

for(let i=0; i < 3; i++){

console.log(i)
}

// 0 1 2

101
 SWITCH CASE
01-Declarar
variável

Switch ( 02-teste )
{ let fruta = 'uva'
Case 1:
//comandos a serem executados switch( fruta ){
case 'pera':
Break; console.log( 'peras custam R$2,00' )
break;
Case 2:
case 'maçã':
//comandos a serem executados console.log( 'maçã custam R$3,00' )
Break; break;

Case 3: case 'uva':

console.log( 'uvas custam R$5,00' )
//comandos a serem executados break;

Break; default:

default
console.log( 'desculpe não temos' )
}
//comandos a serem executados
} // uvas custam R$5,00'
102
 LAÇO WHILE

01- incializa
contador

02-condição
let i = 0

while( i < 3 ){
03 - comandos console.log( i )
i++
}
04-incremento
// 0 1 2

103
MÉTODOS PARA
STRINGS

const varString = “palavra”

0 1 2 3 4 5 6
p a l a v r a
varString.charAt(4) // v

varString.concat(' portuguesa') // palavra portuguesa

varString.indexOf('r') // 5

varString.replace('vra','word') // palaword

varString.split('v') // ['pala', 'ra']

varString.toUpperCase('v') // PALAVRA

varString[5] // 'r '

varString.repeat[3] // 'palavrapalavrapalavra ' 104

MÉTODOS PARA
ARRAYS
const listFruit = ['pera','uva','maçã']
0 1 2
pera uva maçã

listFruit.pop() // ['pera', 'uva']

listFruit.push('abacate') // ['pera', 'uva', 'maçã', 'abacate']

listFruit.indexOf('pera') // 0
listFruit.reverse() // ['maçã', 'uva', 'pera']

listFruit.shift() // ['uva', 'maçã']

listFruit.forEach( function(item, indice){

console.log(item)
// Percorre o Array executa uma função a cada
}) item do array ['maçã', 'uva', 'pera']
105
MÉTODOS PARA
DATE
const now = new Date()
console.log(now)
// Thu Sep 26 2019 10:34:46 GMT-0300 (Horário Padrão de Brasília)

now.getDate() // pega dia do mês 1 - 31

now.getDay() // pega dia semana 0 - 6

now.getMonth() // pega o mês 0 - 11

now.getFullYear() // pega o ano yyy

now.getHours() // pega a hora 0 - 23

now.getMinutes() // pega os minutos 0 - 59
now.getSeconds() // pega os segundos 0 - 59
106
MÉTODOS PARA
MATH

Math.round(3.7) // retorna o valor arredondado, 4

Math.abs(-3) // retorna o valor positivo, 3
Math.sqrt(81) // retorna a raíz quadrada, 9
Math.ceil(5.2) // retorna o valor arredondado para cima, 9

Math.floor(4.9) // retorna o valor arredondado para baixo, 4

Math.PI() // retorna o valor da constante PI 3.14
Math.random() //retorna um número randômico entre 0 e 1
Math.pow(6,2) //retorna o primeiro valor elevado à potência do segundo valor, 36
Math.min(6, 2, 9) //retorna o menor valor, 2
Math.max(6, 2, 9) //retorna o maior valor, 9

107
 DOM

Document Object Model

- API criada pelo browser
- Gera uma árvore de objetos, através
dos elementos criados no HTML
- Facilita a manipulação dos elementos HTML
- O DOM possui diferentes tipos de estruturas, como
HTMLCollections que parecem arrays, mas no entanto não podem
ser percorridas como tal, apenas acessadas usando índices,e o
NodeList que é formatado da mesma maneira, mas no entanto,
você consegue percorrê-la como um Array usando forEach ou
também através dos índices.
Podemos usar let novoArray = Array.from(htmlCollection)
para transformar htmlcollection em Array
108
 DOCUMENTO HTML / DOM GERADO

Editor de Texto / IDE

<!DOCTYPE html>
<html lang="pt-br"> Window
<head>
<meta charset="utf-8">
<title> Título da página </title>
</head> document
<body>

<h1> Titulo </h1> HTML

<p>
Texto de <i> parágrafo </i>
</p> head body

</body>
</html>
meta title h1 p

109
MÉTODOS DE ACESSO AO DOM
Editor de Texto / IDE
getElementById('titulo')
<!DOCTYPE html> - Retorna o elemento selecionado através do ID,
<html lang="pt-br">
<head>
todo ID se converte em um elemento no window
<meta charset="utf-8">
<title> Título da página </title> getElementsByClassName('sub')
</head>
<body> - Retorna todos os elemento selecionados
através da Class
<h1 id=”titulo”> Titulo </h1>

<h2 class=”sub”> Subtitulo </h2> getElementsByTagName('p')

<p> - Retorna todos os elemento selecionados
Texto de <i> parágrafo </i> através da TAG
</p>

<inpu type=”text” name=”nome”> querySelector('p i')

- Retorna o primeiro elemento selecionado da
</body>
</html> msma forma que os selecionamos no CSS, logo
aqui seleciono o elemento I que esetá dentro do
elemento P

110
EVENTOS
Os eventos são basicamente um conjunto de ações que são realizadas em um
determinado elemento da página web, seja ele um texto, uma imagem, ou uma div, etc.
Os eventos podem ser aplicados de forma inline, diretamete na tag do elememto, ou em
arquivo separado, selecionando o elemento no DOM e adicionando um escutador de
evento (addEventListener).

OnBlur - Remove o foco do elemento

OnChange - Muda o valor do elemento
OnClick - Quando o elemento é clicado pelo usuário
OnFocus - Quando o elemento é focado
OnKeyPress - Quando o usuário pressiona uma tecla sobre o elemento
OnMouseOver - Quando o usuário passa o mouse sobre o elemento
OnSubmit - Define uma ação quando o usuário envia um formulário

111
alvo.addEventListener('tipoEvento' function(evento){

console.log('você usou o ', evento)

})

addEventListener é a maneira de registrar uma espera de evento como

especificada no W3C DOM.

Seus benefícios são os seguintes:

Permite mais de um manipulador por evento. Isso é particularmente útil

em bibliotecas DHTML ou em extensões Mozilla que precisam trabalhar
bem mesmo com outras bibliotecas/extensões sendo usadas.
Te dá um pente-fino do estágio em que a espera de evento é ativada
(captura ou borbulha).
Funciona em qualquer elemento DOM, não só para elementos HTML.

112
 EN T O
O L V IM
S E N V
D E
W E B L
IC IA
IN
Developer by:
RAFAEL ANGRIZANI
114
 Linus Torvlads

Git é um sistema de controle de versões

distribuído (SCV), usado principalmente no
desenvolvimento de software, mas pode ser
usado para registrar o histórico de edições de
qualquer tipo de arquivo.
Foi criado por Linus Torvalds em 2005

115
 GitHub é uma plataforma de hospedagem de
código-fonte, com controle de versão que usa o Git.
Ele permite que programadores, contribuam em
projetos privados e/ou Open Source de qualquer
lugar do mundo.
O GitHub foi desenvolvido por Chris Wanstrath,
J. Hyett, Tom Preston-Werner e Scott Chacon usando
Ruby on Rails, em fevereiro de 2008, em 2018 a
Microsoft se tornou a proprietária do Github.
116
 1 - Passo
CONFIGURAÇÃO Instalar o git na sua máquina de acordo com o seu sistema
operacional, para podermos usar o Git Bash, terminal do Git,
INICIAL DO GIT para isto basta seguir a documentação disposta no site do Git.
Linux / Mac: https://git-scm.com/
Windows: https://gitforwindows.org/

2 - Passo
Após feita a instalação corretamente, você pode checar a versão instalada usando o
comando git --version. Após a instalação, precisaremos realizar algumas configurações
iniciais em nosso Git, e para isto usamos os seguintes comandos:

git config --global user.name “Fulano de Tal”

Este comando configurará globalmente o seu nome de usuário no Git

git config --global user.email “[email protected]”

Este comando configurará globalmente o seu email no Git

git config --list

A partir deste comando você terá acesso a todas as configurações do seu Git, ou você pode
usar: git config user.name para ver nome do usuário, ou git config user.email para ver o e-mail

117
 CONFIGURAÇÃO
INICIAL DO GITHUB

Basicamente a configuração inicial do Github, é apenas um cadastro

que você precisa realizar, inserindo um E-mail e uma Senha.

Dentre as configuações após a sua conta criada, você pode escolher

uma foto de perfil, um username, dentre outros, para ter acesso as
configurações, basta que você procure no menu localizado na parte superior do
site com uma seta (menu dropdown), e clique em Settings ou Configurações.

Após estas configurações iniciais tanto do Git quanto do Github, você

pode retornar ao terminal e realizar as configurações de Chave pública e
privada, caso ainda não as tenha feito, pois estas serão necessárias
posteriormente, para que possamos subir nossos projetos ao Github.

118
 CHAVE SSH
O SSH é um protocolo que serve para autenticar um usuário remoto à um servidor, através dele geramos
duas chaves SSH, uma pública e uma privada, a chave pública será enviada ao Github, e a chave privada
ficará contida em nosso computador, desta forma conseguiremos abrir a chave pública enviada ao github
(nosso repositório remoto). É também, através destas chaves, que o github consegue identificar quem está
subindo os arquivos. As chaves estão localizadas em: ~(home) na pasta /.ssh, para termos acesso usamos:
cd ~/.ssh
Este comando fará você navegar até o local . Entretanto caso apareça a mensagem que, não é possível
acessar, ou que não exista, ou o diretório não foi encontrado, isto significará que nunca foram geradas chaves,
neste ambiente local. Então o próximo passo será gerá-las. Se as tiver pule alguns dos passos seguintes.

ssh-keygen -C “seu e-mail do github”

Este comando irá criar um par de chaves: uma pública e uma privada, neste passo lhe será
perguntado o caminho completo, onde será salva a pasta .ssh e o arquivo id_rsa (chave
privada), por padrão deixamos como está, então pressionamos enter e será criado a pasta e o
arquivo, no diretório padrão.
Em seguida será solicitado que você digite uma senha para esta chave id_rsa, (guarde esta senha),
e que a repita posteriormente. Se não quiser criar a senha, apenas clique Enter nas duas vezes
Após, serão criados os dois arquivos com nossas chaves, na pasta oculta .ssh

id_rsa = arquivo com chave privada, id_rsa.pub = arquivo com chave pública 119
 O primeiro passo agora que temos as chaves criadas, será acessr a pasta com os nossos arquivos com as
chaves, ~(home) pasta /.ssh, então: cd ~/.ssh , assim que acessarmos, usamos o comando ls, para
listarmos seu conteúdo, desta forma temos: id_rsa sendo nossa chave privada e id_rsa.pub como
sendo nossa chave pública.

Para isto usamos o comando cat <nome do arquivo>, este comando mostrará o conteúdo do arquivo
escolhido (cat id_rsa.pub), neste caso mostrá a nossa chave, que mais parece um aglomerado de
números e letras, então copiamos todo o seu conteúdo. Você pode também abrir este arquivo usando o seu
editor de texto preferido, o que importa é copiar o conteúdo da chave, para levá-la até o Github.

Acessando o site do Github, e estando logado em sua conta, vá até Settings (configurações), e no
menu lateral clique em SSH and GPG Keys, lhe será mostrado as chaves que podem ser adicionadas,
clique no botão New SSH Key, clicando no botão aparecerão 02 campos, Title (para nomear / identificar
a chave), e Key (que é o local onde você deve por o conteúdo copiado da chave). Em seguida clique no
botão Add SSH Key para que a chave seja adicionada.

Após adicionarmos a chave, no terminal usamos o comando: ssh -T [email protected], lhe será
mostrado a mensagem de que a autenticidade não foi estabelecida, e se queremos continuar com a
conexão, confirmamos (yes), ele nos avisa que vai adicionar permanentemente à lista de host
conhecidos, e que para isto precisamos digitar a nossa senha da chave privada, caso tenha criado
uma, clicamos em desbloquear, e será adicionado, em seguida nos avisa que nosso usuário
está autenticado corretamente, mas não podemos acessar por um terminal SSH. Pronto!
120
WORKING DIRECTORY (1)
São os arquivos e diretórios que você está usando atualmente como repositório em seu ambiente
local
STAGING AREA (2)
É um espaço temporário onde você determina quais mudanças serão adicionadas. Basicamente,
você adiciona os arquivos para o staging, e quando estiver satisfeito com as alterações efetua
um commit a fim de enviar os arquivos ao Datastore
DATASTORE (3)
“Banco de dados” (Localrepo) onde o controle de versão decide a forma de empacotamento e
guarda as suas alterações

UNTRACKED (1)
Não Marcado, ou seja, o arquivo foi adicionado ao repositório, mas não foi visto pelo Git, não foi alterado

MODIFIED (2)
Significa “modificado”, ou seja o Git visualizou que você alterou o arquivo, mas ainda não o gravou
(committed), o arquivo encontra-se no Working Directory, ele deve ser enviado ao Staging area

STAGED (3)
Significa que um arquivo foi modificado e suas modificações foram adicionadas à uma área
temporária (staging area)

COMMITTED (4)
Significa “gravado”, ou seja o dado foi armazenado com segurança, deve ser feito a cada alteração
significativa (commit), o arquivo foi é enviado para o Datastore 121
 Local Remote

Untracked

122
COMANDOS BÁSICOS git init
Inicializará o repositório git na pasta a ser monitorada, este comando irá criar uma pasta oculta
chamada .git, que irá monitorar e salvar as informações de versão do projeto que você realizar neste
diretório, como é uma pasta oculta, para enxergá-la através do terminal use o comando ls -a

rm -rf .git
Apaga um repositório git que tenha sido inicializado, apagará a pasta oculta .gif, desde que você o
execute no diretório que está sendo usado como repositótio, e que você deseja apagar

git status
Checa o estado atual do repositório, ele avisa se existe ou não modificações para serem gravadas,
caso haja alterações nos arquivos monitorados, ele solicitará que os envie ào Staging, usando git add

git add <nome do arquivo> OU git add .

Adiciona o arquivo a qual foi escrito o nome à staging area. O comando git add . adicionará todos os
arquivos presentes na pasta atual ao Staging.

git rm --checked <nome do arquivo> OU git reset <nome arquivo>

Retira o arquivo do Staging, caso deseje não monitorá-lo escreva o nome do arquivo dentro de um
arquivo chamado .gitignore (ficará oculto, casonão exista crie) e adicione o .gitignore ao Staging.
123
git commit -m “Mensagem”
Salva as alterações feitas no arquivo e que estão no Staging ao “banco de dados do GIT”, ele cria uma
imagem destas modificações (snapshot), e a flag -m é uma mensagem do que foi modificado no
arquivo, ao realizar o commit, é gerado ainda um número único, uma hash, que identifica este commit,
esta flag -m pode ser usada em conjunto com -a ficando -am que significa todos os arquivos alterados

git revert <hash do commit> OU git checkout --<nome do arquivo>

O git revert, reverte um commit efetuado em um arquivo específico, em seguida lhe pode ser
perguntado qual texto substituirá o texto original, o git checkout faz o arquivo escolhido voltar ao seu
estado original desde o último commit, ou seja, ele desfaz a última alteração naquele arquivo

git log OU git log --pretty=oneline

O comando git log apresenta o histórico de commits realizados no arquivo de forma detalhada,
ao usar com a flag --pretty ele mostra os commits apenas em uma linha

git log --author=”Fulano”

Este comando buscará dentre os commits realizados, aqueles que foram efetuados pelo author
especifícado na busca

git show OU git show <hash do commit>

O git show apresenta as duas útimas mudanças comitadas, já o comando git show <hash>,
mostra detalhes específicos daquele commit ao qual a hash está associado 124
git shortlog
Este comando retorna em ordem alfabética os Autores, quantos commits fizeram, e quais foram eles,
Você pode usar também o comando git shortlog -sn, que retorna o número de commits e quem o fez

git diff
Este comando mostra um log com todas as mudanças feitas no aruivo, a fim de conferência antes de você
commitá-lo. Você pode usar o comando git diff --name-only e mostrará apenas o nome dos arquivos alterados

git clone < url do projeto com final .git >

Clona/Baixa um projeto do GitHub, para isto é necessário a url do projeto no GitHub do qual se
deseja fazer o download

125
FRASES use "git add <file>" to update what will be committed
DEFAULT use "git add <file>" para atualizar o que será confirmado
-- Ele está solicitando que você use o comando git add para enviar o arquivo
modificado até a staging area para depois ser comitado

nothing to commit, working directory clean

nada a confirmar, diretório de trabalho limpo
-- Significa que não possui nada para ser enviado, o seu ambiente de trabalho
está limpo

changes not staged for commit

mudanças não preparadas para confirmação
-- Elas não foram o staging area para serem comitadas

no changes added to commit

nenhuma alteração adicionada para confirmar
-- Significa qe você não alterou nenhum arquivo

on branch master
no mestre da filial ou
no ramo master local atual do Head do Git
head is now at ...
cabeça está agora em ...
-- Significa em qual versão do arquivo você está trabalhando 126
 Snapshot é um termo usado, para referenciar todos os estados dos
SNAP commits realizados, ou seja, quando você realiza um commit é
como se ele tirasse uma foto do estado atual do arquivo, lembrando que,
SHOT para você poder ter acesso aos commits e seus detalhes, como a hash,
autor, data, etc, basta usar o comando git log.

Então como posso acessar à uma versão específica??

Basta você usar a Hash do commit que você deseja acessar com o comando git checkout.
git checkout <hash do commit>

Este comando é usado para acessar determinada versão usando o Hash (identificador
único do commit) caso deseje, pode-se usar apenas os 10 primeiros números

A mensagem a seguir mostrará em qual arquivo você se encontra, pois o HEAD aponta
para a Branch(ramificação) atual em que você está

(HEAD -> master) OU Head is now at 453klj454 “message commit”

E caso deseje voltar à última sessão, atualização novamente ??

Basta usar o seguinte comando:
git checkout master

Este comando retornará ao Branch Master (ramificação principal)

127
ENVIAR 1 - Passo
Para enviarmos um projeto da nossa máquina, para o Github, inicialmente
PROJETO devemos criar um repositório no Github, para receber o nosso projeto, ao
realizarmos este passo podemos:

AO A) criar os arquivos deste repositório

B) Empurrar (push) algum repositório que temos em nossa máquina para ele

GITHUB
C) Importar os códigos de outro repositório para ele.
2 - Passo
O próprio Github fornecerá os comandos a serem usados para o envio, por ex:
git remote add origin <url do repos. github criado com extensao .git>
Este comando basicamente diz: “git adicione pra mim, um local remoto (repos. github
criado por nós), e chame este local de origin”, agora o Git já conhece o local que vai
subir o nosso projeto, caso não tenha .git no final coloque. OBS: Caso não saiba qual é
o arquivo remoto basta usar o comando git remote -v e lhe será mostrado.
3 - Passo
O próximo passo será enviarmos nosso projeto para o repositório Github. para isso usamos:
git push -u origin master
Este comando basicamente diz: “git empurre (push) pra mim, através do usuário local (-u
desde que o usuário do git seja o mesmo do github, caso contrário, não use esta flag), para a
origin (nome/endereço do repos. github que criamos), o master (foi editado por último, o
branch que você está), em seguida será solicitado usuário e senha do Github, caso não tenha
usado -u. Pronto ! OBS: Caso efetue mais alterações, execute este comando novamente sem
o -u, para enviar as novas alterações. 128
 Esta opção, realiza uma cópia de um projeto que não é seu, para a sua máquina, e depois das
alterações efetuadas você pode subir e efetuar um Pull Request no repositório, este se diferencia
do git clone, com a diferença de que no clone o repositório é seu, logo será possível atualizar o
repositório, e no Fork, necessita executar o pull request, para que o proprietário do repositório
avalie, e se assim desejar implemente ao projeto suas modificações.

Branch (ramo) é simplesmente um leve ponteiro móvel para um dos commits. O nome do
branch padrão é Master. Como você inicialmente fez commits, você tem uma branch principal
( Master Branch ) que aponta para o último commit que foi realizado, este commit é identificado
através da hash gerada ao commitar, e pra cada hash ele tira uma foto(SNAPSHOT) de tudo que
está naquele estado. Cada vez que se realiza um commit ele avança automaticamente.

1º BRANCH 3º BRANCH
MASTER MASTER
C C
O 9fdh5gd8 O 9fdh5gd8 5ffn501 2bdh5la7
M M
M M
I SNAPSHOT A I SNAPSHOT A SNAPSHOT B SNAPSHOT C
T T

*MASTER *MASTER
Head
Head
129
 Head
*SEGUNDA
Podemos criar novas branchs para trabalharmos
em paralelo, deixando a nossa branch Master
inalterada, para criar uma nova branch: SNAPSHOT A

git checkout -b <nome da branch> 8kjdh5ar3

BRANCH
Automaticamente o HEAD, será movido para esta SEGUNDA
nova branch.

BRANCH
MASTER

9fdh5gd8 5ffn501 2bdh5la7 BRANCH

TERCEIRA

SNAPSHOT A SNAPSHOT B SNAPSHOT C

2bdh5la7

SNAPSHOT C

É um commit realizado para unir a sua branch criada em

paralelo com a branch Master:

git merge <nome da branch a unir com Master> 130

131
FORMAS DE ESCRITA
CASE SENSTIVE é a prática de fazer distinção sobre palavras escritas ou iniciadas com
maiúsculas ou minúsculas, ou seja a palavra 'sum' é diferente de “SUM”.
Case Sensitive: “CARRO” != “carro”

CAMEL CASE é a prática de escrever palavras compostas ou frases de modo que cada palavra
ou abreviatura no meio da frase comece com uma letra maiúscula.
Camel Case: “iPhone” , “sobreNome”

PASCAL CASE é a prática de escrever palavras compostas ou frases de modo que cada palavra
ou abreviatura comece com uma letra maiúscula.
Pascal Case: “FedEx” , “HarperCollins”

CAPITALIZE é a prática de escrever a primeira letra de uma palavra com a letra maiúscula.
Capitalize: “Carro” , “Rafael”

UPPERCASE & LOWERCASE é prática de escrever as palavras com letras maiúsculas ou

minúsculas respectivamente.
UpperCase: “CARRO” , “SOFÁ” Lowercase: “cama” , “mesa”

SNAK ECASE é prática de escrever todas as palavras ou frases separadas por underscore.
SnakeCase: “jogo_de_sofa” , “USER_LOGIN_COUNT”

132
 https://medium.com/@ramonrune/arquitetando-
API uma-api-restful-8ffcf892586a

Uma API é criada, quando uma empresa tem a intenção de que outros criadores de
software desenvolvam produtos associados ao seu serviço. Existem vários deles que
disponibilizam seus códigos e instruções para serem usados em outros sites. O Google Maps é
um exemplo na área de APIs. Por meio de seu código original, muitos outros sites e
aplicações utilizam os dados do Google Maps adaptando-o da melhor forma a fim de utilizar
esse serviço, como por exemplo usá-lo no site para mostrar onde se localizam, o
desenvolvedor apenas utiliza a API do Google, sem que precise criar o código fonte.

133
FRAMEWORK / BIBLIOTECA
A principal diferença entre uma Biblioteca e um Framework é "Inversão de
controle". Quando você chama um método de uma biblioteca, você está no controle. Mas
com um framework, o controle é invertido: a estrutura chama você.
Uma biblioteca é apenas uma coleção de definições de classe, a razão por trás
é simplesmente a reutilização de código. Por exemplo, existem algumas bibliotecas de
matemática que podem permitir que o desenvolvedor chame a função sem refazer a
implementação de como um algoritmo funciona.
Em um Framework, todo o fluxo de controle já existe e há vários espaços em
branco predefinidos que você deve preencher com seu código, ele define um esqueleto
em que o aplicativo define seus próprios recursos para preencher o esqueleto.
Pode-se dizer que um Framework é um conjunto de bibliotecas.

Framework Library
Chama

Chama

<CODE>
134
FRAMEWORK CSS FRAMEWORK JS LIBRARY JS

135
 SPA
SPA ou Single Page Application (Aplicação de Página única), todo o código necessário
HTML , JavaScript e CSS, é recuperado com um único carregamento de página, qualquer
interação que aconteça na página, serão carregadas dinamicamente, e adicionadas. A
página não é recarregada em nenhum momento do processo, nem controla a transferência
para outra página, a interação, geralmente envolve comunicação dinâmica com o servidor da
web nos bastidores.
Em resumo possuímos apenas uma página index.html, e todo o resto da aplicação é
gerada a partir do javascript, e o acesso ao BD é dinâmico e quase instantâneo

source: https://dotcms.com/blog/post/what-is-a-single-page-application-and-should-you-use-one-

136
 UML
Unified Modeling Language(Linguagem de Modelagem Unficada), basicamente é
uma linguagem de notação (um jeito de escrever, ilustrar, comunicar) para uso em projetos
de sistemas, como o nosso sistema será desenvolvido e todas suas funções.
Porque usar?
- Solução de Problemas, reduz os custos dos produtos nas emprsas e aumenta a qualidade
- Melhorar a produtividade, ao usá-lo todos na equipe estão na mesma página.
- Fácil de entender, oferece uma apresentação clara e expressiva, dos requisitos, processo
e funções do sistema.
Principais Usos
- Rascunho do sistema,o diagrama é usado pela equipe para estruturar o sistema geral
- Visualizar linguagem de programação, alguns tipos de diagramas podem ser traduzidos
diretamente em código para economizar tempo no desenvolvimento do software
Tipos de Diagramas
As duas principais categorias são de Estrutura e de Comportamento, sendo que estas
possuem mais 13 subtipos.
- Estrutura: Diagrama de Classe, Diagrama de Estrutura Composta, Diagrama de Objeto,
Diagrma de Componente, Diagrama de Implementação, Diagrama do Pacote,
- Comportamento: Diagrma de Máquina de Estado, Diagrama de Atividades, Diagrmas de
Casos de Uso, Diagrama de Sequência, Diagrama de Comunicação, Diagrama de tempo,
Diagrama de Visão Geral da Interação.
137
PARADIGMAS DE LINGUAGEM
Dividido em Blocos

ESTRUTURADO
Sequência, Seleção e Iteração

P IMPERATIVO
Abstração de Dados
A
R Encapsulamento, Comportamento
ORIENTADO A OBJETOS
A de dados e objetos

D Envio de mensagens entre

I objetos

G As funções são elementos de

M Primeira Ordem
FUNCIONAL
A
Uso de cálculo Lambda
S DECLARATIVO
Os programs são construídos
LÓGICO de predicados e relações

138
NODE.Js
Node Js é uma plataforma em tempo de execução, que usa javascript no servidor. Foi
introduzida pela primeira vez em 2009, por Ryan Dahl.
Quanto as vantagens do Node:
-- O profissoinal mantem-se em apenas em uma stack, pois utiliza javascript tanto no
backend quanto no frontend
-- Compartilhamento e reutllização de código
-- Velocidade e desempenho
-- Entrada e Saída sem bloqueio e a manipulação de solicitações assíncronas
-- Tecnologia escalável para o uso de microserviços
-- Desenvolvimento de aplicações em tempo real, melhor desempenho para jogos online.
Quanto as desvantagens:
-- Não é recomendado para computação pesada, por incapacitação de tarefas ligadas à
CPU
-- Por ser assíncrono, depende muito de retorno de chamadas (callbacks), podendo
resultar em uma Callback Hell, se o programador não se atentar a este ponto
-- Valor elevado para seu uso em servidores
139
 DESIGN PATTERN &
ARCHITETURAL PATTERN

Architetural Pattern é semelhante ao Design Pattern, mas eles possuem uma diferença
de escopo, o Design Pattern afeta uma seção específica da base de código, pois é uma solução
de projeto que se aplica à um problema comum, que se repete em um projeto de software, o
Architetural Pattern é uma estratégia de alto nível que diz respeito a componentes de larga
escala, às propriedades e mecanismos globais de um sistema, é um padrão de organização
estrutural, a arquitetura usada no desenvolvimento, podendo a aplicação possuir mais de uma.

DESIGN PATTERN
Categorias:
Criacionais: Singleton, Builder, Prototype, etc
Estruturais: Composite, Facade, Proxy, etc
Comportamentais: Mediator, Observer, Strategy, etc

ARCHITETURAL PATTERN
Layered, Event-Driven, Microservices, MVC, etc

140
 MVC
MVC (Model View Controller), é um Architecture pattern, que nos permite ter uma
organização adequada do nosso código, separando as responsabilidades.

04
Result data
VIEW
DB Representa as views da
aplicação (telas com os
03
Result data dados passadosl)
CONTROLLER
Representa as regras de
negócio da aplicação

MODEL
02
Request
Representa a
Parameters
manipulação dos dados
da aplicação

01 HTTP 05 HTTP
Request Response
USER
141
STYLE GUIDE
Um Guia de Estilos, facilita o trabalho dos desenvolvedores, geralmente eles
são definidos por web designers, no entanto caso não tenha contratado um, recebe
esta responsabilidade, o desenvolvedor Front-End, que será quem irá desenvolver o
View da aplicação.
Dentro de um guia de estilo determinamos:
Cores - primárias, secundárias, cores de fundo, cores dos botões, etc.
Tipografia - Tamanho do texto do corpo, tamanho dos títulos, espaçamentos entre
textos e títulos, cores de fundo onde o texto pode aparecer
Grid - Determinar espaçamento entre os elementos
Gráficos - Ícones que representarão e o conteúdo principal
Outros - Determinar variações de cores, imagens, área depoimentos, etc
Lembrando que a escolha destes itens, possuem relação direta com a empresa
a qual estamos desenvlvendo o aplicação, usando logo, cores, dentre outros itens da
empresa como referência.
Fonte: https://uxdesign.cc/all-you-need-to-know-about-style-guide-9513ebf50b46

142
 REQUISIÇÕES

https://www.plataformadev.com.br request Google

response
server

requisição
HTTP via
GET

https://www.plataformadev.com.br

142