---
# System prepended metadata

title: Notas de Aula - Desenvolvimento Web

---

# Notas de Aula - Desenvolvimento Web

## Recursos
1. CSS
    1. [CSS Reset](#CSS-Reset)
        1. Eric Mayer 
    1. [Utilizar Font Awsome](#Fontawesome)
    1. [Fonte Fluída](#Fonte-Fluída)
    1. [Linkar CSS](#Linkar-CSS)
    1. [Aplicação de fundo](#Aplicação-de-fundo)
    1. [Animação](#Animação)
    1. [MediaQuery](#Media-Query)
    1. [Centralização de elementos]()
        1. [Horizontal]()
        1. [Vertical]()
    1. [Variáveis em CSS]()
    1. [Pseudo Classes]()
    1. [Estado hover]() 
1. JavaScript
    1. [Funções de captura de elementos](#Métodos-para-captura-de-elementos)
    1. [Monitorar eventos](#Monitorar-evento)
    1. [Acessar formatação de um elemento](#Acessar-formatação-do-elemento)
    1. [Gestão de classes](#Gestão-de-Classes) 

## HTML
### Elementos estruturais
* **header**: Cria cabeçalhos
* **nav**: Delimita um conjunto de elementos de navegação
* **main**: Delimita o conteúdo principal da página
* **section**: Delimita uma seção/área da página
* **footer**: Cria um rodapé
* **div**: Tag sem significado representa um novo bloco de conteúdo, uma divisão
* **article**: Delimita um conteúdo que tem sentido completo, que poderia ser distribuído de forma independente sem prejuízo ao seu entendimento.
### Elementos textuais
* **p**: Cria um parágrafo
* **hx [h1,h2,h3...]**: Delimita um título, ou seja, um elemento que tem conteúdo associado a ele
* **a**: Cria um link/âncora
* **img**: Cria uma imagem
* **span**: Tag sem significado, similar a div só que com natureza inline
* **strong**: Especifica uma porção de conteúdo que tem maior importância frente ao resto daquele conteúdo
* **details/sumary**
### Formulário:
* **form**: Cria um formulário
* **fieldset**: Agrupa um conjunto de campos
* **legend**: Título de um fieldset
* **label**: Rótulo/Legenda de um campo de formulário
* **input**: Campo para entrada de dados
    * legenda interna dos campos: placeholder
    * item de preenchimento obrigatório
    * tipos
        * text
        * number
        * tel
        * checkbox - caixa quadrada que permite marcar mais de um item
        * radio - item de formato circular que permite a marcação de apenas uma opção
* **select**: Lista supensa
* **option**: Itens da lista de suspensa
* **textarea** Campo para entrada de texto com mais de uma linha


### Lembretes
* NÃO EXISTE LISTA DE UM ITEM SÓ
* Por critério de usabilidade a logo deve ser link para homepage
* Delimite conjunto de elementos de navegação com tag apropriada
* Não coloque um a dentro de um button ou vice-versa, ou o item é um link ou ele é um botão
* Não coloque um H (h1,h2...) dentro de um p e vice-versa, ou o item é um título ou um paragrafo ele não pode ser as duas coisas ao mesmo tempo

## CSS

### Propriedades

* **display:flex** - deixa os filhos do elemento um ao lado do outro
    * Não há sentido em aplicar flex em elemento que tem apenas um filho
    * **Propriedades Associadas**
        * **justify-content** - controlará a disposição horizontal de elementos sob ação do flex
        * **align-itens**: controlará a disposição vertical de elementos sob ação do flex
        * **flex-wrap**: define o que ocorre caso não haja espaço disponível para que outros elementos possam ficar ao lado de outros
* **margin** - espaçmaneto externo [sup dir inf esq]
* **padding** - espaçamento interno
* **with** - largura
* **height** - altura
* **font-size** - tamanho da fonte
* **font-family** - tipografia a ser aplicada ao elemento
* **font-weigth** - atribuição de negrito [bold | bolder | valores entre 100 e 900]
* **text-decoration** - opções de uso de linha no texto, incluindo o underline
* **text-align** - alinhamento do texto
    * Quando colocado diretamente em uma imagem não terá efeito algum
    * Deve ser colocado no elemento para que seu conteúdo sofra o efeito do alinhamento de texto
* **border** - aplica borda a um elemento [tamanho tipo cor]
~~~css
border:1px solid red;
~~~
* **box-shadow** - aplica borda a um elemento [offset-x offset-y blur-radius spread-radius color]
~~~css
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
~~~
* **background** - aplica fundo (cor,imagem,gradiente) no elemento. Para aplicar mais de um fundo separe por vírgulas 
* **color** - altera a cor do texto

### Lembretes
* Verifique se o css foi adicionado a sua página
* Verifique se você está fazendo uso do CSS Reset
* A cor do link só é modificada quando a tag a é incluída no seletor
* Atribuir flex a elemento com um único filho não faz muito sentido para alterara posicionamentos


# Conteúdo

## HTML
* [Devdocs](https://devdocs.io/html/)
## CSS
* CSS Reset
    * [Adaptação](https://elad.medium.com/normalize-css-or-css-reset-9d75175c5d1e)


# Anexos
## CSS
### CSS Reset
~~~html
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
~~~
### Fontawesome
~~~html
<script src="https://kit.fontawesome.com/bd5b44309d.js" crossorigin="anonymous"></script>
~~~
* Acesse o site [fontawesome](https://fontawesome.com/search) para encontrar o ícone que deseja utilizar
* Lembre de alterar a tag para a tag spam que é mais semântica
### Fonte Fluída
~~~css
html {
    font-size: calc(15px + 0.390625vw);
}
~~~
### Linkar CSS
~~~html
<link rel="stylesheet" href="local do arquivo" type="text/css" />
~~~
### Aplicação de fundo
* Para aplicar mais de um fundo dentro do mesmo elemento utilize a propriedade background e separe cada um dos fundos por vírgula. Caso queira sobrepor com um cor ainda assim será preciso utilizar o gradiente repetindo a mesma cor. Nos testes realizados em sobreposição de fundos a cor solida não é aceita apenas gradiente e imagens.
~~~css
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
~~~


~~~css
section{
    background:linear-gradiente(rgba(0,0,0,0.5),rgba(0,0,0,0.6)), url(../images/fundo.jpg) no-repeat;
    background-size: cover, cover;
}
~~~

~~~css
div{
    background: linear-gradient(to bottom right, red, yellow);
    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
    background:linear-gradient(45deg, red 0 50%, blue 50% 100%)
}
~~~
### Animação
* **trasition**: aplica uma trasição quando o valor de uma propriedade for modificado. [property name duration timing function delay]
* [Documentação MDN](https://developer.mozilla.org/pt-BR/docs/Web/CSS/transition)
~~~css
transition: margin-left 4s ease-in-out 1s;
~~~

### Media Query
* [Documentação MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@media)
## JavaScript

### Métodos para captura de elementos

* **getElementById**: recupera um único elemento que teve seu id informado como parâmetro
~~~js
let elemento = document.getElementById("banner");
~~~

* **querySelector**: recupera o primeiro elemento que corresponder ao seletor CSS informado como parâmetro
~~~js
let elemento = document.querySelector("ul");
~~~
* **querySelectorAll**: recupera todos elementos que correspondam ao seletor informado como parâmentro dentro do escopo em que foi chamado
~~~js
let elementos = document.querySelectorAll('span');
~~~

### Monitorar evento
* Elemento único
~~~js
let elemento = document.getElementById("banner");
elemento.addEventListener("click", function (e) {
  console.log("hey Jude");
});
~~~
* Conjunto de elementos
~~~js
let elementos = document.querySelectorAll('p');
elementos.forEach((item) => {
    item.addEventListener('click', function(e){
        console.log("Foi");
    })
});
~~~
### Acessar formatação do elemento
* Utilize a propriedade style e depois o nome da propriedade CSS que deseja atribuir valores
~~~js
let elemento = document.getElementById("banner");
elemento.style.display="block";
elemento.style.color = "green";
elemento.style.backgroundColor = "red"; 
~~~

### Gestão de Classes
* classlist 
~~~js
let elemento = document.getElementById("banner");
elemento.style.display="block";
elemento.style.color = "green";
elemento.style.backgroundColor = "red"; 
~~~


### Centralização de elementos

#### Horizontal
* [text-align]()
    * Funciona para alinhamento de elementos inline, como exto e imagem.

#### Vertical

* [Align-content](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)
    * Funciona em alementos com flex, grid ou block


### Variáveis em CSS
~~~css
:root {
  --main-bg-color: brown;
}
.one {
  color: white;
  background-color: var(--main-bg-color);
}
~~~

### Pseudo Classes
* :user-valid / :user-invalid 

### Estado hover


### Animação

* **interpolate-size** : animar altura e padding

