Notebook HTML
Enviado por
Bruno AlvesNotebook HTML
Enviado por
Bruno AlvesSobre WEB
Como a Web funciona
Os sites são feitos de arquivos.
Esses arquivos ficam armazenados em servidores.
Quando acessamos um site de um computador ou celular nós somos o “cliente” desse
servidor
Para acessar um servidor precisamos acessar de um IP, porém para facilitar a entrada
desses dados pelo navegar e o nosso entendimento temos o DNS (Domain name System)
Quando acessamos um site estamos fazendo download dos arquivos deste site e ai o
navegador lê os arquivos para mostrar ao usuário. e para agilizar o processo o navegador
salva uma cópia dos arquivos temporariamente e isso damos o nome de cache
O HTML Serve para estruturar o site
o CSS para Dar estilo
o JavaScript para dar algum comportamento específico
Como foi dito anteriormente, a Internet é uma rede de computadores e obtemos arquivos
através da Web.
Em desenvolvimento para a Web sempre separamos dois setores: a parte do servidor e a
parte do cliente.
O cliente é o computador do usuário, assim como o seu. É utilizado pelas pessoas para
acessar sites ou sistemas a partir de um endereço. Os arquivos vindos por esse endereço
são disponibilizados por um outro computador que serve estes arquivos. Estes
computadores que estão em algum lugar do mundo que servem arquivos e outros serviços
são chamados de servidores.
Nos servidores programamos com linguagens de programação como PHP, Java, C#,
Python, Ruby, etc. e gerenciamos bancos de dados. Chamamos essa parte de back-end.
Os clientes, que podem ser qualquer dispositivo conectado à Internet como smartphones,
notebooks e tablets, recebem arquivos desses servidores, como imagens, vídeos, arquivos
HTML, CSS e JavaScript. Chamamos essa parte de front-end.
Tópicos interessantes
Internet
Rede de computadores conectados
Servidores
Computadores em algum lugar do mundo que fornecem serviços pela web
Clientes
Dispositivos que consomem serviços dos servidores
IP
Número que serve para a Identificação de dispositivos na rede, ex: 192.168.0.10
Nome de Domínio
Identificação mais legível de um computador na rede, ex: http://www.treinaweb.com.br
DNS
Sistema que traduz um nome de domínio para um IP
Como a web funciona?
Servidores armazenam arquivos e dados, que são enviados aos clientes que os
requisitarem.
Hipertexto
Apresentação de informações de modo que o leitor tenha a liberdade de escolher o fluxo de
leitura
Navegadores (Browsers)
Softwares usados por clientes para navegar pela web, consumindo arquivos e serviços dos
servidores e interpretando HTML, CSS e JavaScript.
HTML
Linguagem de marcação de hipertexto, usada para estruturar documentos.
CSS
Folhas de estilo em cascata. O CSS é usado para estilizar elementos HTML, permitindo até
mesmo criar animações e efeitos 3D.
JavaScript
Linguagem de programação que pode ser interpretada pelo navegador para adicionar
comportamentos às páginas web.
HTML
<!DOCTYPE html>
indica para o navegador que é um arquivo html
<html>
a Raiz do documento, a página HTML
o atributo lang significa a Língua, para mudar para portugues é “pt-BR”
<head>
é o cabeçalho do documento, onde colocamos informações do documento
<meta>
indica informações sobre o documento.
viewport - ajuda a controlar o tamanho da tela para os dispositivos moveis
charset - indica os tipos de caracteres que estamos escrevendo
<title>
Indica o título do documento, qeu aparece na aba do navegador
<body>
todo o código que será mostrado no navegador será colocado aqui
<!---->
serve para fazer comentários
Estruturas de Texto
Usamos as Tags da seguinte maneira
<nome da tag> </nome da tag>
Algumas tags não possuem o fechamento e podemos usar atributos em algumas tags para
elas fazerem algo de diferente
Tags de Títulos
as tags de títulos vão de h1 até h6
h1 - título principal
h2 - subtítulo
h3 - subtítulo do subtítulo h2
para se destacar uma parte do texto podemos usar a Tag <strong> (negrito) ou
<em>(itálico), para dar uma ênfase
<ins>(sublinhado) -vem de inserir, para mostrar algo que foi adicionado depois do texto ter
sido publicado.
<del> - vem de deletar, para mostrar algo que foi deletado do texto.
<small> - indica um texto pequeno, algo que não tem muita importancia.
<sup> - pode ser usado para fórmulas matemáticas ou para elevar um pouco o texto
<sub> - pode ser usado em fórmulas químicas, ele abaixa um pouco o texto.
<q> - indica uma tag para citação.
<p> - indica um paragrafo.
<span> - serve para reutilizar o texto, pode servir para estilizar o texto.
<br/> - serve para dar quebras de linhas
<wbr> - serve para quebrar linha em algum lugar específico do texto
<hr /> - serve como uma linha horizontal para separar textos
<code> - serve para representar códigos dentro do html
<time> - serve para colocar uma data específica.
<mark> - serve para marcar, como um marca texto.
<ruby> - usada junto com RT serve para colocar simbolos japoneses e seus significados
<bdo> Podemos utilizar para definir que o texto deverá ser renderizado em uma
determinada direção. O atributo “dir” no exemplo acima tem o valor “rtl” (Right to Left -
direita para esquerda), indicando que o texto será renderizado nesta direção,
Caracteres Especiais
Escapando caracteres especiais
a saída do código é <h1> - <h1>
Imagens
Para separarmos os arquivos podemos criar uma pasta para conter os arquivos de CSS,
JS e imagens (img)
<img> - serve para indicar que será colocada uma imagem ali
atributos
src - Indica o caminho que o navegador deve procurar a imagem
width - indica o comprimento da imagem
heigth - indica a altura da imagem
(Devemos usar as imagens dessa maneira para deixar os usuários terem uma melhor
experiência na usabilidade)
alt - serve como texto alternativo (se a imagens não carregou irá aparecer um texto.
<figure> - serve para melhorar a tag img (como uma div)
<figurecaption> - adiciona uma legenda a imagem.
como usar:
<figure>
<img>
<figurecaption>
</figure>
Âncoras e Links
âncoras
<a> - serve para ancorar partes da pagina (ou outras paginas) no documento.
atributos:
href =”sobre.html”
o endereço de onde está o documento to
href = “#nome_do_id”
(para linkar uma informação que está na mesma página deve ser usado #nome_do_id)
criarmos um id para uma tag e a colocamos com a # para acessar)
href=”mailto:[email protected]”
redireciona para a criação do email
href=”tel{numero}
redireciona para um aplicativo de ligação
target =”blank”
serve para redirecionar para uma página em branco
rel="noreferrer noopener"
serve para não ser rastreável e não invadirem seu site
download="nome do arquivo"
serve para disponibilizar arquivos para downloads.
Listas
Lista ordenada
Indica uma lista ordenada por números ou letras. Para isso utilizamos a tag <ol> para criar a
lista, e cada item da lista é indicado pela tag <li>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
Podemos passar um atributo “type” para a tag <ol> para indicar o tipo de ordenação que
queremos.
● type="1" - lista por números;
● type="A" - lista por letras maiúsculas;
● type="a" - lista por letras minúsculas;
● type="I" - lista por números romanos maiúsculos;
● type="i" - lista por números romanos minúsculos.
Lista não Ordenadas
Parecida com a lista anterior, mas sem identificadores.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Listas de Descrição
Essas listas são formadas pela tag <dl>, e nelas a gente indica o nome de um termo(<dt>) e
depois listamos descrições sobre esse termo(<dd>);
<dl>
<dt>HTML</dt>
<dd>- HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>- Cascading Style Sheet</dd>
</dl>
Progress
Podemos representar o progresso de algum processo com a tag de progresso. Passamos o
valor total do progresso no atributo “max”, e o valor do progresso em “value”.
<progress value="30" max="100" ></progress>
Meter
Podemos ter algo parecido com a tag <meter>. Também podemos indicar quais valores são
considerados altos e baixos com os atributos high e low.
<meter value="30" max="100" min="0" ></meter>
Tabelas
Tabelas servem para exibir dados tabulados. Para iniciar uma tabela utilizamos a tag
<table>.
Em seguida temos que definir uma linha. Linhas são definidas pela tag <tr>. Dentro de cada
linha temos as colunas, que são definidas pela tag <td>.
Opcionalmente, caso queira definir melhor a separação do cabeçalho e o corpo da tabela,
você pode utilizar as tags <thead> e <tbody>. Para indicar o título de uma tabela, utilizamos
a tag <th> no lugar de <td>.
<table>
<thead>
<tr>
<th>Nome</th>
<th>Sobrenome</th>
<th>Idade</th>
</tr>
</thead>
<tbody>
<tr>
<td>João</td>
<td>Silva</td>
<td>28</td>
</tr>
<tr>
<td>Maria</td>
<td>Souza</td>
<td>23</td>
</tr>
</tbody>
</table>
Com os atributos rowspan e colspan podemos fazermos os elementos da tabelas ocuparem
mais de uma linha ou coluna row = linha / col = coluna
formulários
Uma necessidade muito comum para desenvolvedores são locais onde o usuário possa
interagir com a página e enviar informações para serem processadas, como por exemplo,
um formulário de cadastro, um formulário de login ou um campo para pesquisa.
Essas formas de se comunicar com a página irão variar de acordo com a necessidade de
cada desenvolvedor. Em um determinado site podemos fazer um cadastro somente com
nome, e-mail e senha, já em outros sites pode haver a necessidade de obtermos várias
outras informações.
A tag de formulário (form) pode aceitar vários tipos de atributos, com os quais poderemos,
por exemplo, configurar como o formulário irá enviar as informações digitadas para o
servidor.
Atributos da tag Form
Accept-charset
o para definir qual o charset será utilizado pelo formulário. Por exemplo: utf-8
<form accept-charset="utf-8"></form>
Autocomplete
Sempre que definirmos o atributo autocomplete (auto completar), a medida em que usamos
os campos de um formulário o navegador irá começar a sugerir valores para o que estamos
digitando, com base em valores que foram digitados anteriormente. Por exemplo:
<form autocomplete="on">
<input type="text" name="email">
</form>
Action
Este atributo especifica para onde os dados do formulário serão enviados. Normalmente
será o link de uma página no servidor:
<form action="http://www.nosso-servidor.com.br/cadastro/usuario.php"></form>
method
Especifica o método do HTTP que será utilizado para a submissão (get ou post):
<form action="http://www.nosso-servidor.com.br/cadastro/usuario.php"
method="post"></form>
enctype
Específica quando os dados do formulário precisam ser codificados antes de serem
enviados ao servidor. ( Só funciona no método POST
<form action="http://www.nosso-servidor.com.br/cadastro/usuario.php" method="post"
enctype="multipart/form-data"></form>
novalidate
Impede a validação dos campos antes da submissão:
<form novalidate></form>
target:
Assim como na tag <a>, o target indica onde a página de destino será aberta.
<form target="_blank"></form>
Elementos
Os formulários possuem campos onde inserimos dados. Os campos mais comuns dos
formulários são criados pela tag <input />, que tem o atributo type onde indicamos o tipo de
campo que queremos. Vamos ver cada um deles:
Type text
Seleciona o tipo de dado que será informado no input
Para escrever um pequeno texto utilizamos a tag <input />. Note que ela não tem uma tag
de fechamento, ela mesma se fecha.
Quando não passamos o atributo type, por padrão ele será do tipo “text”, mas é uma boa
prática sempre passar o tipo.
<input type="text" />
Podemos ainda passar outros atributos na tag, como:
● placeholder - texto que aparece quando o campo está vazio;
● maxlength - quantidade máxima de caracteres;
● required - indica que o campo é necessário, não permitindo submeter o formulário
se o campo estiver em branco;
● disabled - deixa o campo desabilitado;
● readonly - impede edições no campo, permitindo apenas que o usuário leia o valor.
Caso queira permitir que o usuário escreva mais de uma linha, utilize a tag
<textarea></textarea>
<textarea>Meu Texto</textarea>
No textarea podemos passar os atributos rows e cols para indicar quantas linhas e colunas
o campo irá exibir.
Email, Search e url
<input type="email" />
<input type="search" />
<input type="url" />
Esses tipos são idênticos ao tipo “text”. Em dispositivos que exibem teclado na tela, como
smartphones e tablets, esses tipos fazem com que o teclado exibido seja diferente. Um
exemplo é o tipo “email”, que exibe uma tecla @, ou “url” que exibe uma tecla “.com”.
Também haverá validação se não escrevermos um formato válido.
Number
Indica um campo do tipo number. Em computadores o campo fica com botões para
aumentar e diminuir o número. Em dispositivos com teclado virtual é exibido um teclado
numérico
<input type="number" />
Radio Button <input type="radio" name="sexo" checked="checked" /> Homem
<form>
<input type="radio" name="sexo" /> Mulher
</form>
Cria um Radio Button, onde podemos selecionar apenas uma opção. Note que colocamos o
mesmo nome nos dois inputs. Isso faz com que o navegador entenda que ambos
pertencem ao mesmo campo. Se passarmos nomes diferentes poderíamos selecionar os
dois valores, o que não é o objetivo dos Radio Buttons.
CheckBox
Diferente do Radio Button, onde só selecionamos uma opção, o CheckBox serve para
selecionarmos mais de uma opção.
<h2>Escolha quantas cores você desejar.</h2>
<form>
<input type="checkbox" name="cor1" /> Azul
<input type="checkbox" name="cor2" /> Vermelho
<input type="checkbox" name="cor3" /> Amarelo
</form>
Datas
Serve para selecionar datas e tempo.
<input type="date" />
<input type="time" />
<input type="datetime-local" />
<input type="month" />
<input type="week" />
Range
Permite que o usuário escolha um valor entre os valores mínimos e máximo passados
<input type="range" min="0" max="10" />
color
Abre uma paleta de cores para a seleção de uma cor
<input type="color" />
File
Permite que selecionamos um arquivo no nosso computador
<input type="file" />
Botões
button, submit e Reset
Esses tipos criam um botão.
<input type="button" value="Botão" />
O tipo “submit” é usado para que o usuário clique quando quiser enviar o formulário.
O tipo “reset” serve para quando o usuário quiser reiniciar o formulário. Cuidado, pois ao
clicar o formulário inteiro será apagado!
Select
A tag <select> nos permite criar uma lista onde podemos selecionar um item. Cada uma das
opções é criada pela tag <option>. O atributo “value” da tag option é o valor a ser enviado
ao servidor, e o valor escrito dentro da tag é o que será exibido ao usuário.
<select>
<option value="html">HTML 5</option>
<option value="css">CSS 3</option>
<option value="js">JavaScript</option>
</select>
DataList
Podemos ter um efeito parecido com a tag DataList, mas ela funciona em conjunto com a
tag input.
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Note que a tag <datalist> também recebe um conjunto de <option>, mas ela também tem
um id para identificá-la. Enquanto isso, também temos um input de texto. Ele tem um
atributo “list”, onde passamos o id da nossa <datalist>.
Perceba que conforme a gente digita algo no input, as options de datalist aparecem como
um autocomplete.
Fieldset e Legend
Serve para criarmos um campo dentro do formulário para poder melhor organizar os
campos. A tag <legend> serve para darmos um título à seção.
<fieldset>
<legend>Cadastro</legend>
Nome: <input type="text"><br>
Email: <input type="text"><br>
</fieldset>
Label
Esta tag serve para darmos nomes aos campos. Se passarmos o id do input no atributo
“for”, estaremos indicando ao navegador que o Label é referente àquele campo. Quando o
usuário clicar no texto do Label, o input receberá foco, permitindo que o usuário já entre
com os dados.
<form autocomplete="on">
<label for="email">Email</label>
<input type="text" id="email">
</form>
Output
Esse campo serve para exibirmos a saída de alguma entrada.
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0 <input type="range" id="a" value="50"> 100
+
<input type="number" id="b" value="50">
=
<output name="x" for="a b"></output>
</form>
Neste exemplo, utilizamos o range e um campo de número que o usuário pode mudar à
vontade. Conforme os valores forem alterados, o campo output exibe o resultado da soma
que fizemos por JavaScript
áudio
A tag de áudio permite colocarmos um player para sons e músicas na nossa página.
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
O atributo “controls” indica que os controles, como play/pause, devem ser exibidos.
Cada navegador suporta certos tipos de arquivos de áudio, por isso é comum passarmos
mais de uma tag <source>.
A tag <source> é onde indicamos o arquivo a ser executado. Caso o navegador não
reconheça um tipo de arquivo, ele irá ler o próximo.
Outros atributos muito usados são o autoplay, que faz a mídia ser executada assim que for
carregada, e o loop, que indica se a mídia deve reiniciar assim que ela acabar de ser
executada.
Video
A tag <video> funciona da mesma maneira que a tag <audio>, com a diferença que a tag
também aceita os atributos width e height, assim como a tag <img />, para que possamos
definir largura e altura do vídeo.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
Um atributo muito usado também é o “poster”. Nele nós podemos passar o endereço de
uma imagem que será exibida enquanto o vídeo carrega, ou enquanto o usuário não der
Play.
Semântica
Quando criamos uma página, precisamos marcar o que cada elemento dentro dela
representa e qual é o papel de cada uma das estruturas ali presentes.
Mas dentro de uma página, nunca criamos somente um botão ou um texto simples. Sempre
criamos elementos mais complexos, elementos formados por outros elementos, como por
exemplo um cabeçalho que pode conter um texto, um menu com vários botões, e assim por
diante.
Estrutura de uma página:
Search Egines
Search Engines, ou Motores de Busca, são softwares que varrem a Web para indexar
páginas, permitindo que as pessoas encontrem esta página baseando-se em uma pesquisa,
como é o caso do Google, Yahoo! e Bing.
No começo os motores faziam buscas apenas buscando palavras-chaves, fornecidas pelo
próprio criador das páginas. Mas isso não era bom, pois a pessoa poderia colocar palavras
falsas em relação ao conteúdo, ou palavras que não eram boas para uma pesquisa.
Isso fazia com que as pessoas não tivessem os melhores resultados em suas pesquisas.
Com o tempo, os motores de busca começaram a utilizar outras estratégias para o retorno
dos resultados, como utilizar inteligência artificial para descobrir as melhores palavras-
chaves automaticamente, números de acessos da página, números de sites que
referenciam aquela página. Esses e muitos outros pontos são utilizados hoje como base
para medir a importância e relevância de sites, colocando-os como primeiros resultados das
buscas.
É nessa parte que entram os robôs dos motores de buscas. Eles medem todos esses
pontos analisando a página. Mas esses robôs não são pessoas que olham para uma
página, enxergam um botão e sabem que aquilo é algo para se clicar.
Os robôs analisam o código. Por isso, um código escrito com boa semântica faz os robôs
entenderem melhor a estrutura da sua página, podendo colocar o site em melhores
posições nos resultados de pesquisas.
Melhorando a Semântica
Antes era muito comum a criação de layouts utilizando a tag <table>. Isso hoje em dia é
visto como um erro grave, pois tabelas são utilizadas para exibir dados.
Com o avanço do CSS, as pessoas começaram a parar de usar tabelas e a utilizar a tag
<div> para criar os layouts. A tag <div> serve para criarmos divisões. Ela não exibe nada, a
menos que a gente estilize-a com CSS.
O problema é que as pessoas começaram a usar a tag <div> para tudo, o que no final das
contas não melhorou a semântica em relação a usar <table>. Com o HTML5, novas tags
foram criadas para dar mais significado ao código. Imagine a estrutura do seguinte blog:
Poderíamos estruturar basicamente das seguintes maneiras:
Estrutura de um Site antes:
<div class="cabecalho" >
<div class="menu-navegacao" >
</div>
</div>
<div class="conteudo-secundario" >
</div>
<div class="conteudo-principal" >
<div class="post" >
</div>
</div>
<div class="rodape" >
</div>
Estrutura de um Site agora:
<header class="cabecalho" >
<nav class="menu-navegacao" >
</nav>
</header>
<aside class="conteudo-secundario" >
</aside>
<main class="conteudo-principal" >
<article class="post" >
</article>
</main>
<footer class="rodape" >
</footer>
Div e Span
Como dito antes, a tag <div> não exibe nada, a menos que a gente estilize algo com CSS.
As demais tags também são assim. Servem apenas para fazermos divisões.
Assim como a <div>, a tag <span> também não tem um significado. A diferença é que a
<div> é um elemento de bloco, o que significa que preenche uma linha inteira, ou seja,
elementos após a <div> serão exibidos na linha de baixo.
A tag <span> é um elemento de linha, o que significa que os elementos seguintes a ela
virão na sua frente caso ainda haja espaço na linha. Portanto, caso queira marcar algo no
meio de um texto, sem pular linha, rodeie o texto com uma tag <span>.
abbr
Define uma abreviatura ou sigla. Pode ajudar buscadores e tradutores a entenderem que o
texto não se trata de uma palavra completa.
A <abbr title="União Nacional dos Estudantes" >UNE</abbr> esta semana anunciou que …
No exemplo acima passamos um atributo “title” com o significado da sigla. Assim, um
tradutor poderia entender que esse “UNE” é uma sigla que significa “União Nacional dos
Estudantes”, e não o verbo “unir”, impedindo uma possível tradução errada.
Adress
Define informações de endereço
<address>
Av. Paulista, 1765, Conj 71 e 72 - Bela Vista - São Paulo - SP - 01311-200
</address>
Article
Define um artigo. Muito utilizado em Posts de blogs e sites de notícias.
<article>
<h1>Google revela nova inteligência artificial</h1>
<p>Hoje o Google revelou sobre um projeto em desenvolvimento . . . . .
</article>
Aside
Define um conteúdo ao lado do conteúdo da página. Muito utilizado em colunas ao lado da
parte principal dos sites, onde normalmente possui a navegação, propagandas ou algo
relacionado com o conteúdo principal.
<p>Hoje o Google revelou sobre um projeto em desenvolvimento . . . . .</p>
<aside>
Outros posts sobre Google:
</aside>
Code
Define um pedaço de código de computador
<code>
var counter = 0;
</code>
Details e Summary
Este aqui apresenta uma pequena alteração na exibição do que o usuário enxerga.
A tag <details> serve para acrescentar detalhes adicionais sobre algo, mas essa informação
fica escondida, sendo exibida apenas quando o usuário clicar para ler.
A tag <summary> serve para exibir um título para o <details>, que ficará sempre visível.
<details>
<summary>Lista de Cursos</summary>
<ul>
<li>HTML5 e CSS3</li>
<li>JavaScript</li>
<li>Node.js</li>
</ul>
</details>
dfn
Marca a definição de um termo. Espera-se que conteúdo mais próximo contenha a definição
do termo que estiver dentro dessa tag.
Com isso, buscadores podem procurar pela definição de uma palavra caso alguém
pesquise por algo como “O que é HTML?”. Faça essa pesquisa no Google e veja que além
dos resultados, ele também te retorna uma resposta com a definição do termo.
<dfn>HTML</dfn> significa HyperText Markup Language, e é utilizado para a estruturação
de páginas web.
Dialog
A tão esperada tag <dialog> serve para criarmos modais (aquelas janelinhas que abrem em
cima do conteúdo principal).
Meu Texto
<dialog open > Minha Modal </dialog>
**Suportado somente no opera e no chrome**
Footer
Define um rodapé para o documento ou seção.
<footer>©TreinaWeb Tecnologia LTDA</footer>
Header
Define um cabeçalho para o documento ou seção.
Não confunda com a tag <head>, onde definimos informações sobre o documento.
<article>
<header>
<h1>Novos cursos na TreinaWeb!</h1>
</header>
<p>TreinaWeb anuncia novos cursos este mês . . .
</article>
Main
Define a parte principal de um documento. Por ser algo indicado como principal, o conteúdo
dessa tag deve ser único e ela não deve ser filha de tags como <article>, <footer>,
<header> ou <nav>.
<main>
<h1>Notícias do Dia</h1>
<article>
<h1>Novo curso de JavaScript</h1>
<p>Conheça o novo curso de . . . </p>
</article>
<article>
<h1>Chrome lança nova funcionalidade</h1>
<p>O navegador lançou ontem uma nova maneira de . . . </p>
</article>
</main>
Nav
Define um grupo de links de navegação. Essa tag é muito utilizada nos menus utilizados
para se navegar entre as páginas de um site.
Section
Define seções no documento, como capítulos, cabeçalhos, rodapés, etc.
Time
Essa tag é utilizada no meio de textos, e define data/hora.
Pode ser utilizado para que softwares encontrem facilmente datas nos documentos,
podendo utilizá-las para melhorar pesquisas ou se oferecer para guardar aquela data em
alguma agenda.
O conteúdo da tag é o tempo apresentado ao usuário, o que ele irá ler. A tag também pode
receber o atributo datetime, que representa essa mesma data/hora no formato que
computadores entendam.
<p>O evento irá ocorrer em <time datetime="2017-07-07 21:00">7 de julho de 2017 às 9 da
noite</time>.</p>
HTML5 e suas APIs
API vem da palavra Application Programming Interface (Interface de Programação de
Aplicações).
Imagine que você possui um software com certas funcionalidades, e que seria interessante
que essas funcionalidades fossem acessíveis por outros softwares, possibilitando assim a
criação de uma integração entre eles, fornecendo outros tipos de serviços.
Um exemplo muito comum é o YouTube. Ele é basicamente um serviço onde podemos
fazer Upload de vídeos e assistir o que outros usuários publicam.
E se quisermos criar uma aplicação educacional com uma seção de vídeos sobre
determinada matéria? Poderíamos utilizar a API de busca de vídeos do YouTube em nossa
aplicação e exibir uma lista de vídeos do assunto no nosso aplicativo.
Então as APIs nos permitem acessar determinadas funcionalidades de um software já
pronto para poder serem utilizadas por outro software, dando origem a uma nova
funcionalidade.
Com a evolução do HTML, algumas funcionalidades surgiram, e elas são acessadas
através de APIs do próprio HTML.
Algumas dessas APIs não são mais consideradas pertencentes ao HTML5, mas é
importante conhecermos para quando formos desenvolver uma página.
JavaScript
Como o acesso às APIs necessita de programação, utilizamos o JavaScript, linguagem
presente nos navegadores.
O JavaScript é uma linguagem de programação interpretada, criada por Brendan Eich em
1995, que nos possibilita criar comportamentos em nossas páginas que não são possíveis
com HTML e CSS.
Podemos criar efeitos, capturar cliques do mouse, eventos de teclado, alterar o HTML e
CSS, etc.
A partir daqui é necessário um conhecimento básico de JavaScript, pois precisaremos dele
mais do que o próprio HTML.
Aqui nós temos cursos de JavaScript do básico ao avançado.
Possibilidades
Nas aulas seguintes conheceremos algumas funcionalidades que deixarão nossas páginas
mais poderosas.
Veremos como controlar áudio e vídeo, permitir arrastar e soltar elementos, salvar dados na
página, desenhar, reaproveitar HTML criando componentes, etc.
Basicamente, com o poder do HTML5 e JavaScript, hoje em dia é possível criar mais do
que simples páginas. Podemos criar grandes softwares instalados em nossos PCs,
sistemas web, aplicativos mobile, jogos, etc.
Ambiente
Até agora podíamos simplesmente abrir nossos arquivos HTML direto no nosso navegador.
Algumas das funcionalidades que serão mostradas aqui não podem ser executadas
diretamente de um arquivo por razões de segurança.
Para isso, precisamos que os nossos arquivos sejam servidos por um servidor.
Uma maneira simples é utilizar o "http-server", um módulo que podemos instalar pelo
Node.js.
Após a instalação, abra o seu terminal e execute o comando:
npm install --global http-server
Após esse comando ser executado, teremos um servidor de arquivos estáticos para poder
servir os nossos arquivos.
Para iniciar o servidor, basta abrir o seu terminal na pasta com os seus arquivos e executar
o comando "http-server"
Isso iniciará um servidor, normalmente na porta 8080. Caso esta porta esteja sendo
utilizada, outra será escolhida. Uma mensagem no próprio console dirá onde seus arquivos
estarão disponíveis.
Basta acessar o endereço pelo seu navegador e poderemos acessar nossos arquivos
normalmente. Caso seja a porta "8080", o endereço será "localhost:8080"
Controle de audio e video
O HTML5 possibilitou que colocássemos áudio e vídeo de forma nativa em nossas páginas,
dispensando a necessidade de instalarmos plugins nos navegadores para podermos
desfrutar de determinado tipo de mídia.
Além disso, o HTML5 disponibiliza uma API para podermos ter total controle de áudio e
vídeo a partir do JavaScript, o que nos permite criar uma integração entre nossa mídia e
nossa página.
Vamos ver como controlar essas mídias e até como criar um pequeno player.
Nossos exemplos serão a partir de um vídeo. As propriedades, métodos e eventos
apresentados funcionam tanto para vídeos quanto para áudios.
Para focarmos nas APIs, o CSS não será apresentado, mas você pode baixá-lo depois para
poder seguir a aula.
Criando o elemento
O primeiro passo é criar o elemento de vídeo na nossa página. Vamos simplesmente criar
um elemento <video> sem o atributo de controle, pois nós iremos criar nossos próprios
controles.
<video src="meu_video.mp4" id="myVideo" width="300" height="170" controls ></video>
Agora que temos um elemento com o nosso vídeo podemos pegar uma referência dele por
JavaScript.
var myVideo = document.getElementById('myVideo');
Guardamos o elemento com o nosso vídeo na variável "myVideo". Com ela nós podemos
acessar propriedades, métodos e eventos relacionados ao vídeo. Lembrando que essas
propriedades, métodos e eventos também estão disponíveis quando você estiver
trabalhando com áudio.
Propriedades
As propriedades guardam certas informações sobre o nosso vídeo, e algumas podemos
alterar. Podemos acessá-las diretamente da referência do nosso elemento, no nosso caso,
a variável "myVideo". Aqui listamos as principais propriedades.
autoplay indica se o elemento irá ser executado automaticamente assim
que estiver disponível
controls Indica se os controles do player do navegador deve ser exibido
currentTime posição atual da reprodução em segundos
duration indica o tempo de duração da mídia em segundos
ended indica se a reprodução da mídia foi encerrada
error retorna um objeto de erro se ocorreu algum, e null se nada deu
errado
loop indica se a mídia deve reiniciar a reprodução ao finalizar
volume volume atual do vídeo/áudio
muted indica se o vídeo/áudio está mudo
paused indica se a mídia está pausada
playbackRate indica a taxa de reprodução, onde 1 é a velocidade normal
para frente
currentSrc indica a atual fonte do vídeo/áudio
videoWidth e retorna as dimensões do vídeo, não do elemento
videoHeight
Métodos
Os métodos são funções que executam alguma ação em relação à nossa mídia a partir da
referência do nosso elemento. No nosso caso, a variável "myVideo".
load() carrega o vídeo/áudio e posiciona a reprodução no início
play() inicia o vídeo/áudio a partir da sua atual posição
pause() pausa o vídeo/áudio na posição atual
canPlayType(formato) passamos um formato para essa função e ela retorna se
esse formato de vídeo é suportado pelo navegador
Eventos
Os eventos são ações que o nosso elemento fica observando. Nós passamos uma função
com o código que deve ser executado em cada situação. Quando determinada ação
ocorrer, nossa função é executada. Aqui listamos os principais eventos relacionados às
mídias.
canplaythrough disparado quando o navegador acredita que há dados disponíveis o
suficiente para que o vídeo/áudio seja reproduzido completamente
sem interrupções
ended disparado quando o vídeo/áudio terminar sua reprodução
error disparado quando um erro ocorrer
pause disparado quando a reprodução é pausada
play disparado quando a reprodução é iniciada após uma pausa
playing disparado quando o vídeo/áudio iniciar pela primeira vez, após ter
sido parado ou reiniciado
progress disparado periodicamente para indicar o progresso do download da
mídia
ratechange disparado quando a velocidade da reprodução for alterada
seeked disparado quando a posição atual da reprodução é alterada
seeking disparado quando a posição atual da reprodução começa a ser
alterada
volumechange disparado quando o volume da mídia for alterado
Controlando a Mídia
Vimos nas tabelas anteriores que temos como obter muita informação e controle das
nossas mídias. Como tudo estará sendo controlado por JavaScript, não é difícil perceber
que podemos ter um grande poder de integração entre nossa página e mídia.
Que tal criarmos o nosso Player? Ele terá efeitos no vídeo de acordo com ações do usuário.
Vamos brincar com as possibilidades para ver o poder das APIs em ação.
Drag & Drop
O Drag & Drop (Arrastar e Soltar) é uma funcionalidade muito utilizada para melhorar a
experiência do usuário.
Você pode pensar no seu próprio sistema operacional. Quantas vezes você quis alterar um
arquivo de lugar e simplesmente arrastou o ícone do arquivo para o destino desejado? É
algo simples e intuitivo, e por isso algumas aplicações incluem a possibilidade de arrastar e
soltar elementos.
Antes a gente precisava utilizar muito código JavaScript para criar essa funcionalidade. Era
muito comum o uso de plugins para jQuery que foram criadas para criar essa ação nas
páginas.
Com o HTML5 isso se tornou muito mais simples. Ainda precisamos de JavaScript, mas é
bem menos, a ponto de não precisarmos mais de bibliotecas para fazer este efeito.
Arrastar elementos
Vamos utilizar uma imagem aqui no nosso exemplo. Teremos duas caixas, e poderemos
pegar a imagem e soltar na outra caixa.
Qualquer elemento pode ser arrastável. No nosso exemplo, apenas a imagem será.
Para tornar um elemento arrastável, basta acrescentar a propriedade "draggable" à sua tag
igual a true.
<img src="logo.png" id="minhaImagem" draggable="true" />
<div class="drop-area-container" >
<div class="drop-area" ></div>
<div class="drop-area" ></div>
</div>
Então no código acima nós criamos a nossa tag de imagem com o atributo "draggable" com
o valor "true" para que ela possa ser arrastável.
Agora precisamos indicar o que acontece quando um elemento é arrastado. Para isso
iremos criar uma função chamada "dragStart" e acrescentar à tag marcada como arrastável,
<img>, pelo evento "ondragstart".
<img src="logo.png" id="minhaImagem" draggable="true" ondragstart="dragStart(event)" />
function dragStart(event){
event.dataTransfer.setData('text', event.target.id);
}
No script acima, nós pegamos o objeto "event", o qual contém informações sobre o evento
realizado, e pegamos o objeto "dataTransfer". O "dataTransfer" é um objeto utilizado para
carregar os dados do que está sendo arrastado.
Nós utilizamos a sua função "setData" para salvar um dado. Primeiro passamos o tipo do
dado e o valor dele. Estamos salvando o ID do elemento <img>, então passamos que o tipo
é "text" e o valor é o ID do evento alvo do evento (target).
Soltando elementos
Agora vamos fazer com que nossas caixas permitam que algo seja solto nelas.
Normalmente os elementos não podem ser soltos em qualquer lugar, então temos que
evitar esse comportamento padrão quando o nosso elemento arrastável estiver sendo
arrastado sobre as caixas.
Para isso, nós vamos acrescentar às nossas caixas a função allowDrop.
<div class="drop-area-container" >
<div class="drop-area" ondragover="allowDrop(event)" ></div>
<div class="drop-area" ondragover="allowDrop(event)" ></div>
</div>
function allowDrop(event){
event.preventDefault();
}
Com isso as nossas caixas vão aceitar que um elemento seja solto nelas.
Por último, basta programarmos o que irá ocorrer quando o elemento for finalmente solto
nas nossas caixas. Para isso iremos criar a função "drop" e acrescentar às nossas caixas
pelo "ondrop"
.
<div class="drop-area-container" >
<div class="drop-area" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
<div class="drop-area" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
</div>
function drop(event){
var imageId = event.dataTransfer.getData('text'),
image = document.getElementById(imageId);
event.target.appendChild(image);
}
Na função "drop()" recebemos um evento, que é o próprio "drop". Ele possui o elemento
alvo (target) do evento, que é a caixa onde estaremos soltando a nossa imagem.
Então, primeiro nós pegamos o ID da imagem que estava guardado no "dataTransfer". Pelo
ID nós pegamos o próprio elemento da imagem.
Em seguida nós pegamos a caixa onde soltamos o elemento, que está em "event.target".
Utilizamos a função "appendChild" e passamos a imagem. Com isso o elemento da imagem
será inserido dentro do elemento alvo.
Então vimos que com poucas linhas de código nós podemos criar o efeito de Drag & Drop
facilmente.
APP cache - aplicação offline
Com o Application Cache podemos fazer com que nossa aplicação funcione mesmo quando
o usuário estiver sem conexão com a Internet.
Isso é muito útil, pois com a possibilidade de acessarmos páginas e aplicações de qualquer
dispositivo e lugar, muitas vezes estamos sem conexão.
Além do acesso offline, com o App Cache a página também será carregada mais
rapidamente, já que os arquivos necessários serão armazenados na máquina do usuário.
Com isso também há uma diminuição de acessos ao servidor, já que o navegador só irá
baixar novos arquivos ou arquivos que precisam ser atualizados.
A diferença com o cache comum é que com o App Cache nós especificamos quais os
arquivos serão armazenados.
Cada navegador tem diferentes tamanhos para o limite de dados cacheados. Alguns ficam
por volta de 5MB por site.
Cache Manifest
Para fazer com que o cache comece a ser armazenado temos que criar um arquivo de
manifesto. Ele que irá indicar os arquivos que devem ser armazenados na máquina do
usuário.
A primeira linha, "CACHE MANIFEST", é obrigatória. Ela que indica o começo do arquivo.
Linhas iniciadas com "#" são apenas comentários, mas podem nos ajudar a versionar o
nosso cache.
O cache só é atualizado quando o Manifest é alterado. Então podemos criar uma linha,
como na imagem acima, com uma data ou número de versão. Quando alterarmos algum
HTML, CSS, imagem, etc, podemos alterar a nossa linha de comentário para forçar o
navegador a atualizar os arquivos.
Em seguida temos três seções:
● CACHE: Os arquivos listados abaixo deste cabeçalho, ou após "CACHE
MANIFEST", serão armazenados após o primeiro download;
● NETWORK: Os arquivos listados abaixo deste cabeçalho precisam de uma conexão
com o servidor, então ignoram o cache. No nosso exemplo, precisamos de uma
conexão com o servidor para poder fazer o login;
● FALLBACK: Essa seção opcional indica os arquivos que podem ser substituídos
quando não houver conexão. No nosso exemplo, quando houver conexão o usuário
receberá o "profile.php". Quando não houver conexão, ele receberá o "profile.html"
como substituto.
Se tiver alguma falha no download de um dos arquivos listados no Manifest, a
atualização do cache irá falhar, e o navegador irá utilizar o cache anterior.
Iniciando o Armazenamento de Cache
Agora que já sabemos como criar o nosso arquivo de manifesto, Cache Manifest, temos que
indicar ao navegador que o arquivo de manifesto deve ser utilizado.
Para isso, basta fazer uma referência ao arquivo de manifesto pelo atributo "manifest" na
tag <html>.
Este atributo deve ser inserido em todas as páginas em que se queira armazenar, do
contrário, o navegador não irá guardar o arquivo em cache, a menos que você liste o
arquivo no próprio Manifest.
Note que no nosso manifesto, não incluímos o "index.html". Isso porque ele possui o
atributo "manifest" na tag <html>. Isso já faz o navegador guardá-lo automaticamente.
Atualizando o cache
Após ter os arquivos armazenados em cache, ele irá continuar até que uma destas
situações ocorra:
● Quando o usuário limpar o cache;
● Quando o Manifest é alterado;
● Quando o cache é alterado por programação.
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
window.applicationCache.swapCache();
window.location.reload();
}
}, false);
No exemplo acima adicionamos um Event Listener no "applicationCache" para saber
quando ele estivesse com o estado "updateready", ou seja, pronto para atualizar.
Dentro nos asseguramos que o estado dele está certo. Então executamos a função
"swapCache()", que força a troca do cache.
Para que essa função tenha efeito, é necessário baixar os novos arquivos, então
executamos "location.reload()" para que a página recarregue, e assim, baixando os arquivos
atualizados e armazenando o novo cache.
Eventos do AppCache
Além do "updateready" que vimos anteriormente, também há como criarmos outros listeners
para o AppCache.
cached disparado após o primeiro cacheamento do manifesto
checking primeiro evento a ser disparado. Procura por atualizações
downloading disparado quando uma atualização é localizada e o navegador começa
a baixar os arquivos
error o manifesto retornou 404 ou 410, o download falhou ou o manifesto
mudou enquanto o download estava em progresso
noupdate disparado após o primeiro download do manifesto
obsolete disparado quando o manifesto retornar 404 ou 410. Isso faz com que o
cache da aplicação seja apagado
progress disparado quando cada um dos recursos listados no manifesto estiver
sendo buscado
updateready disparado quando os arquivos do manifesto tiverem sido carregados
recentemente
Armazenamento de Dados
Quando desenvolvemos páginas que vão além de apenas exibir informações, normalmente
precisamos que elas armazenem alguns dados.
Há maneiras diferentes para se armazenar dados no navegador do usuário, possibilitando o
aproveitamento de um dado entre as páginas de um site sem a necessidade de ficar
fazendo requisições ao servidor e até mesmo aproveitá-las em aplicações offline.
Vamos ver cada uma das maneiras possíveis de se armazenar dados no navegador.
Cookies
Após fazermos uma requisição ao servidor, a conexão é fechada e o servidor não saberá
quem somos nós quando fizermos uma nova conexão.
Os Cookies foram criados para armazenar algumas informações do usuário e enviá-las ao
servidor. Por isso são utilizados para armazenar algumas informações sobre login, para que
o usuário permaneça logado ao fechar o navegador.
Podemos utilizar os Cookies também para armazenar algumas preferências do usuário, ou
também quando queremos dar um aviso ao usuário e indicar ao nosso código que o usuário
já foi avisado para que o aviso não apareça novamente.
Os Cookies são armazenados em uma string onde há o nome, valor e data de expiração.
Quando a data é atingida, o Cookie é apagado automaticamente.
Todo Cookie é enviado ao servidor automaticamente.
Criando Cookies
Para criar um Cookie basta acessar o objeto "cookie" presente em "document" e passar
uma string contendo o nome e valor do Cookie que se deseja criar.
document.cookie = "nome=TreinaWeb";
document.cookie = "sobre=Cursos Web";
Caso queira determinar uma data de expiração:
document.cookie = "nome=TreinaWeb; expires=Fri, 07 Jul 2017 12:00:00 UTC";
Se uma data de expiração não for definida o Cookie será apagado quando o navegador for
fechado.
Alterando Cookies
Para alterar um Cookie, basta alterar o valor dele.
document.cookie = "sobre=Vários Cursos Web";
Lendo Cookies
Para ler um Cookie, basta chamar o "document.cookies". Isso irá retornar uma string com
todos os cookies e seus valores.
var cookies = document.cookies;
Removendo Cookies
Para apagar um Cookie, basta defini-lo com uma data de expiração que já passou. Assim
ele será apagado
document.cookie = "sobre=; expires= Thu, 01 Jan 1970 00:00:00 UTC";
Note que o valor do Cookie nem precisa ser especificado, apenas o nome.
.
Facilitando o gerenciamento de cookies
Podemos utilizar as seguintes funções para nos facilitar o gerenciamento dos Cookies:
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
A primeira função serve para criarmos um Cookie. Passamos para ela o nome, valor e
quantidade de dias até a expiração.
Dentro da função, a string para a criação do Cookie é gerada com as informações que
passamos para a função.
A segunda função serve para retornar o valor do Cookie de acordo com o nome, ao invés
de retornar uma string com todos os Cookies armazenados.
Nós passamos o nome do Cookie para a função e ela procura na string pelo nome e seu
respectivo valor. Caso não seja encontrado, retorna uma string vazia.
WebStorage
Antigamente só podíamos armazenar os dados do usuário em Cookies.
Com o WebStorage podemos armazenar strings maiores, de maneira mais segura e sem
afetar a performance da página.
Diferentes dos Cookies, os dados no WebStorage não são enviados ao servidor e nem
possuem uma data de expiração.
O WebStorage nos oferece dois objetos para se trabalhar: "localStorage" e
"sessionStorage".
O "localStorage" é permanente e se você estiver com mais de uma janela na mesma
página, os valores armazenados serão compartilhados entre as páginas.
O "sessionStorage" armazena os valores enquanto a janela estiver aberta. Ao fechar, os
valores serão apagados. Os valores não são compartilhados entre janelas como o
"localStorage".
Nos exemplos a seguir utilizaremos o "localStorage". Eles também servem para o
"sessionStorage".
Salvando Dados
Para se salvar um dado, basta utilizar a função "setItem", passando o nome do dado e o
seu valor.
localStorage.setItem("nome", "treinaweb");
Podemos também atribuir valores como fazemos em variáveis comuns:
localStorage.nome = "treinaweb";
localStorage["nome"] = "treinaweb";
Caso precise atribuir um valor com o mesmo nome de um atributo do objeto localStorage,
utilize a função setItem. localStorage.setItem("setItem", "5") funcionará, mas
localStorage.setItem = "5" irá sobreescrever uma função do objeto.
Alterando Dados
Para alterar um dado, basta atribuir um novo valor ao nome do campo.
localStorage.nome = "TreinaWeb";
Lendo Dados
Para ler dados, basta utilizar a função "getItem()" e passar o nome do dado que se quer.
localStorage.getItem("nome");
Podemos também pegar os valores como fazemos em variáveis comuns:
localStorage.nome;
localStorage["nome"];
Caso precise retornar um valor com o mesmo nome de um atributo do objeto localStorage,
utilize a função getItem. localStorage.getItem("getItem" funcionará, mas
localStorage.getItem irá retornar a função do objeto.
Caso você acesse uma propriedade inexistente, localStorage["fsielfak"] irá retornar
undefined, mas localStorage.fsielfak irá retornar null.
Apagando Dados
Para apagar um determinado dado do localStorage, basta utilizar a função "removeItem()"
com o nome do dado a ser apagado
localStorage.removeItem("nome");
Caso queira limpar todos os dados, execute a seguinte função:
localStorage.clear();
Diferença entre SessionStorage e variáveis comuns
Se os dados armazenados na SessionStorage serão apagados, por que não utilizar
variáveis comuns para armazenar informações temporárias?
Se estivermos em uma única página, realmente não faz diferença. Mas caso a gente vá
para uma outra página, as variáveis são apagadas, enquanto o SessionStorage só é
apagado se fecharmos a página.
IndexedDB
O WebStorage é bom para pequenas porções de dados, e por ser síncrona pode travar a
navegação se tiver muitos dados.
O IndexedDB serve para armazenar grandes quantidades de dados em forma de objetos,
criando um verdadeiro banco de dados no navegador. O IndexedDB é assíncrono, então
não interrompe o que está em execução enquanto ele estiver fazendo operações.
Abrindo conexão com um Banco
Para criar uma conexão com banco, basta utilizar a função "open" e passar o nome e
versão do seu banco.
var request = window.indexedDB.open("TreinaWeb", 1);
var db;
request.onupgradeneeded = function(event){
db = event.target.result;
db.createObjectStore("Cursos", {keyPath: "id"});
}
request.onsuccess = function(event){
db = event.target.result;
}
O evento "onupgradeneeded" é executado sempre que uma versão nova do banco for
aberta. Dentro dele nós criamos uma store, onde iremos armazenar nossos dados.
Passamos o nome da Store, "Cursos", e o nome da chave pela qual iremos fazer operações
de busca.
O evento "onsuccess" é executado sempre que a página é aberta. Pegamos o banco, que é
retornado dentro de "event.target.result", e guardamos na variável db. É por ela que
faremos as operações do banco.
Adicionando Dados
var transaction = db.transaction(["Cursos"], "readwrite");
var store = transaction.objectStore("Cursos");
store.add({"id": 1, "nome": "Angular"})
Primeiro criamos uma transação, passando a coleção e uma permissão de leitura e escrita.
Em seguida guardamos a nossa store "Cursos" em uma variável, e então utilizamos a
função "add()" para adicionar um objeto.
Lendo Dados
var transaction = db.transaction(["Cursos"], "readwrite");
var store = transaction.objectStore("Cursos");
var request = store.get(1);
request.onsuccess = function(event){
console.log(request.result)
}
No código acima acessamos a Store da mesma maneira que fizemos para inserir um dado.
Então utilizamos a função "get()" e passamos o código do dado que queremos.
Isso irá retornar uma request, a qual passamos uma função para o método "onsuccess",
que será executado assim que o dado for retornado, estando dentro de "request.result".
Alterando Dados
Para alterar algum dado basta obtê-lo com "get()", como explicado no exemplo acima,
alterá-lo e utilizar a função "put()".
var transaction = db.transaction(["Cursos"], "readwrite");
var store = transaction.objectStore("Cursos");
var request = store.get(1);
request.onsuccess = function(event){
request.result.nome = "React";
store.put(request.result);
}
Em "onsuccess", alteramos o nome do nosso dado e então atualizamos com a função
"put()".
Removendo Dados
var transaction = db.transaction(["Cursos"], "readwrite");
var store = transaction.objectStore("Cursos");
store.delete(1);
Para remover os dados basta fazer a mesma operação de antes para se obter a store, mas
ao invés de fazer a operação "get()", fazemos a operação "delete()", passando o código do
item que queremos apagar.
Leitura de Arquivos
Antes, quando queríamos interagir com algum arquivo, era necessário enviar o arquivo para
o servidor, fazer a leitura e enviar uma resposta ao cliente.
Hoje em dia é possível fazer tudo isso no próprio navegador. Vamos ver passo a passo
como trabalhar com arquivos.
Vamos começar carregando um arquivo. Para isso utilizamos a tag <input> do tipo "file".
Ela permite que o usuário selecione um arquivo da sua máquina.
<input type="file" accept=".txt" id="myFile" />
<textarea id="fileContent" ></textarea>
ambém inserimos um atributo "accept". Nele nós podemos passar o tipo de arquivo que
iremos aceitar. No caso, apenas arquivos com extensão ".txt".
O <input> do tipo "file" também aceita o atributo "multiple" para indicar que aceitamos vários
arquivos, mas neste exemplo iremos aceitar apenas um mesmo.
Teremos um arquivo do tipo ".txt" com um conteúdo qualquer para o nosso exemplo.
Lendo Arquivos
Agora que já permitimos a seleção de um arquivo, vamos fazer a leitura dele. Para isso
precisamos de um pouco de JavaScript.
Quando um <input> possui um ou mais arquivos selecionados, ele irá popular um objeto
chamado "files" com os arquivos selecionados.
Como demos um ID para o nosso <input>, podemos facilmente acessar esses arquivos
com:
document.getElementById(‘myFile’).files;
Com esse objeto podemos ter ideia da quantidade de arquivos selecionados, nome,
tamanho, tipo e data de modificação de cada arquivo.
Vamos começar a fazer a leitura então. A leitura irá ocorrer assim que selecionarmos um
arquivo, ou seja, quando o valor de <input> alterar.
Vamos criar uma função chamada "handleFileSelect" e colocá-la no "onchange" do nosso
<input>.
Dentro dessa função iremos trabalhar com o FileReader, responsável por fazer leituras de
arquivos.
<input type="file" accept=".txt" id="myFile" onchange="handleFileSelect()" />
function handleFileSelect(){
var myFile = document.getElementById('myFile').files[0];
var reader = new FileReader();
reader.onload = function(){
var content = reader.result;
document.getElementById('fileContent').value = content;
}
reader.readAsText(myFile);
}
No código acima estamos primeiro pegando o arquivo selecionado e guardando dentro da
variável "myFile".
Em seguida estamos instanciando o FileReader e guardando dentro da variável "reader".
Como o processo de leitura é assíncrono, vamos passar uma função que indica o que
deverá acontecer quando o arquivo terminar de ser lido. Isso é passado no "onload" do
objeto "reader".
Então nós executamos o comando "readAsText" do "reader". Essa função recebe um
arquivo e lê o seu conteúdo como texto. Quando essa leitura for finalizada, a função
passada no "onload" será executada.
Dentro da função passada no "onload" nós guardamos o resultado da leitura numa variável
chamada "content". Ela armazenará o conteúdo do nosso arquivo de texto.
Em seguida nós pegamos o nosso <textarea> e jogamos o conteúdo do arquivo nele.
Pronto! Com poucas linhas de código conseguimos selecionar um arquivo e exibir o
conteúdo dele na nossa página.
Salvando arquivos
Agora que temos o conteúdo do nosso arquivo num <textarea>, podemos alterar o
conteúdo do arquivo. Por medidas de segurança não podemos alterar o arquivo da máquina
do usuário diretamente, mas podemos disponibilizar o arquivo alterado por meio de
download.
É assim que editores online como Google Docs e Microsoft Word funcionam. Você pode
fazer upload de um arquivo, alterar e depois fazer o download.
No nosso caso será um download rápido, já que não estamos pegando um arquivo de um
servidor, pois esse tempo todo o arquivo está na memória da própria máquina do usuário.
A tag de âncora (<a>) permite que a gente faça downloads. Basta passar o endereço de um
arquivo e acrescentar o atributo "download" à tag.
Não temos uma url para passar, já que não estamos falando de um arquivo que está em um
servidor. O que podemos fazer é transformar o conteúdo do nosso arquivo em Base64 e
passá-la para a nossa âncora.
Vamos criar um botão que irá chamar a função "saveFile()". Essa função irá criar uma
âncora na memória do navegador, transformar o conteúdo do nosso arquivo em Base64 e
iniciar o download.
<button onclick="saveFile()" >Save File</button>
function saveFile(){
var element = document.createElement('a'),
content = document.getElementById('fileContent').value;
element.setAttribute('href', 'data:plain/text;charset=utf-8,' +
encodeURIComponent(content));
element.setAttribute('download', 'myNewFile.txt');
element.click();
}
Na primeira linha da nossa função "saveFile()" criamos uma âncora e guardamos na
variável "element". Em seguida guardamos o conteúdo do <textarea> na variável "content".
Em seguida definimos o atributo "href" da nossa âncora. O valor é o conteúdo do nosso
novo arquivo em formato de url.
Depois adicionamos o atributo "download" à nossa âncora. O valor será o nome do arquivo
a ser baixado, "myNewFile.txt".
Por último, demos um clique no nosso elemento <a> para que o download seja iniciado.
E com isso conseguimos selecionar arquivos, ler seu conteúdo, alterar e salvar sem
precisar de um servidor.
Além de textos, também é possível trabalhar com imagens, áudios, vídeos, pdfs, etc. São
inúmeras possibilidades.
Canvas
O elemento <canvas> é utilizado para se desenhar elementos gráficos em uma página com
JavaScript.
O elemento em si é apenas um contêiner para os desenhos criados. Podemos fazer várias
operações de desenho com JavaScript, como traçar uma linha, criar caixas, círculos, texto e
imagens.
Podemos utilizar para a criação de gráficos, animações com interações do usuário, etc.
Por possibilitar animações e interações com o usuário, é muito utilizado para o
desenvolvimento de jogos.
Criando Canvas
Para se criar um Canvas basta declararmos a tag, indicar as dimensões e um ID, que
utilizaremos para acessá-lo pelo JavaScript.
<canvas id="meuCanvas" width="400" height="300"></canvas>
Isso é tudo o que teremos de HTML. Agora vamos pegar esse elemento e armazenar em
uma variável.
var meuCanvas = document.getElementById('meuCanvas');
var ctx = meuCanvas.getContext("2d");
Ao pegar o elemento e guardá-lo numa variável, pegamos o contexto do nosso elemento e
indicamos que utilizaremos as funcionalidades "2D". Guardamos o contexto na variável
"ctx". É a partir dessa variável que faremos todas as operações no nosso canvas.
Desenhando
Imagine que temos um cursor posicionado no nosso Canvas, e posicionamos ele pelas
posições X e Y, sendo a posição (0,0) o topo esquerdo.
Desenhando Linhas
ctx.moveTo(5, 5);
ctx.lineTo(100, 300);
ctx.stroke();
Na primeira linha movemos o nosso cursor para a posição (5,5).
Na segunda linha traçamos uma linha para a posição (100, 300);
Na terceira linha mandamos as operações anteriores serem desenhadas no Canvas.
Desenhando Círculos
No canvas temos a função "arc" para desenhar um arco. Ao desenhar um arco completo
teremos um círculo.
ctx.arc(200,150,60,0,2*Math.PI);
ctx.stroke();
A função "arc()" recebe os seguintes parâmetros:
posição X;
posição Y;
tamanho do raio;
ângulo do início do arco;
ângulo do final do arco.
Em elementos que podem ser preenchidos, podemos utilizar a função "fill()" ao invés de
"stroke()" para preencher o elemento.
Podemos alterar a cor com "fillStyle".
ctx.arc(200,150,60,0,2*Math.PI);
ctx.fillStyle = "#FF0000";
ctx.fill();
Desenhando Retângulos
Para retângulos, temos a função "strokeRect" e "fillRect"
ctx.strokeRect(15, 25, 300, 250);
Ambas as funções recebem 4 parâmetros:
● Posição X do início;
● Posição Y do início;
● Posição X do final;
● Posição Y do final.
Desenhando Textos
ctx.font = "30px Arial";
ctx.fillStyle = "blue";
ctx.fillText("TreinaWeb", 150, 150);
Para se trabalhar com textos podemos configurar a fonte e então utilizamos a função
"fillText()" para se escrever com letras preenchidas.
Ambas as funções recebem três parâmetros:
● Texto a ser escrito;
● Posição X;
● Posição Y.
Desenhando Gradientes
O gradiente é uma estilização, então podemos juntá-lo com as funções descritas acima.
Vamos ver como criar um retângulo gradiente utilizando a função "fillRect", mas você
também pode utilizar com a função de textos, arcos, etc.
var gradiente = ctx.createLinearGradient(0,0,300,0);
gradiente.addColorStop(0, "red");
gradiente.addColorStop(1, "green");
ctx.fillStyle = gradiente;
ctx.fillRect(50,50,250,200);
Primeiro criamos um gradiente linear com a função "CreateLinearGradient()", onde
passamos as posições de início e fim do gradiente.
Armazenamos o gradiente em uma variável, a qual utilizamos para atribuir as cores do
nosso gradiente.
Em seguida passamos estas configurações para o "fillStyle", que irá estilizar o
preenchimento. E finalmente criamos o nosso retângulo, do mesmo jeito como vimos antes.
Também se pode utilizar o gradiente para traços, passando a configuração para o
"strokeStyle".
Também existem os gradientes radiais, que utilizam a função "createRadialGradient()". O
resto do processo é o mesmo.
var gradiente = ctx.createRadialGradient(100,150,8,90,60,100);
gradiente.addColorStop(0, "red");
gradiente.addColorStop(1, "green");
ctx.fillStyle = gradiente;
ctx.fillRect(50,50,250,200);
Desenhando Imagens
Também podemos inserir imagens no Canvas.
Vamos primeiro carregar uma imagem com o elemento <img>.
<img src="logo.png" id="logo" />
e então basta pegar a imagem e passá-la na função "drawImage()", que recebe a imagem,
posição X e posição Y.
var img = document.getElementById("logo");
ctx.drawImage(img, 80, 50);
Animações
Animações são basicamente várias imagens estáticas que quando apresentadas em
sequências com certa velocidade nos dão a impressão de movimento.
Cada ação de desenho no canvas faz um novo desenho em cima do anterior.
Então para isso, basta que a gente apague o canvas antes da nova ação de desenho.
Podemos criar um looping que irá alterar a posição de onde nossa imagem será desenhada,
fazendo assim, uma simulação de movimento.
As pessoas costumavam utilizar a função "setInterval()" para fazer isso, mas hoje em dia é
preferível utilizar a função "requestAnimationFrame()".
Com ela o navegador pode fazer otimizações e as animações são pausadas
automaticamente quando a aba estiver inativa (evitando uso desnecessário de CPU e gasto
de bateria).
Vamos fazer um simples exemplo, onde mudaremos a posição X da nossa imagem para dar
a impressão de que ela está se movendo pelo nosso Canvas.
var posX = 0;
var img = document.getElementById('logo');
function drawLogo(){
window.requestAnimationFrame(drawLogo);
ctx.clearRect(0,0,meuCanvas.width,meuCanvas.height);
ctx.drawImage(img, posX, 50);
posX += 5;
if(posX > meuCanvas.width){ posX = -150; }
}
drawLogo();
Ao invés de passar a posição X diretamente na função, armazenamos o valor da posição
em uma variável de nome "posX".
Criamos uma função que desenha a nossa imagem. No começo ela chama o
"requestAnimationFrame()", o qual chama a própria função de desenho, criando um looping.
Em seguida utilizamos a função "clearRect" para limpar o nosso Canvas. Passamos a
posição (0,0, largura do canvas, altura do canvas) para que o Canvas inteiro seja apagado.
Desenhamos a imagem passando o valor da variável "posX". Em seguida aumentamos o
valor da posição X, o que fará a próxima repetição desenhar a nossa imagem mais à
esquerda.
Para podermos ficar vendo a repetição da nossa animação, verificamos que se a posição X
estiver maior do que a largura do Canvas (o que significa que a imagem já saiu dele),
voltamos a posição X para um lugar antes do 0 para que nossa imagem possa entrar no
Canvas novamente.
Esse procedimento de mudar variáveis, limpar o Canvas e redesenhar os elementos é a
base para a criação de jogos.
Salvando o Canvas como imagem
Podemos pegar o conteúdo do canvas como uma imagem e até possibilitar o download do
arquivo pelo usuário.
O Canvas nos fornece uma função chamada "toDataURL()". Isso irá retornar a imagem
atual do canvas em um formato chamado Base64, que é uma grande String.
Essa String pode ser passada tanto na propriedade "src" do elemento <img> como também
pode ser passado no "href" do elemento <a>.
Quando temos um elemento <a> com o atributo "download". o conteúdo de "href" será
baixado, como vimos em aulas anteriores.
var element = document.createElement('a'),
img = meuCanvas.toDataURL();
element.setAttribute('href', img);
element.setAttribute('download', 'myImage.png');
element.click();
SVG
O SVG (Scalable Vector Graphics) é uma linguagem XML que utilizamos para a criação de
imagens vetoriais. Mas, o que são essas Imagens Vetoriais? Qual a vantagem de utilizá-
las?
Imagens Bitmap e Vetoriais
Bitmap
As imagens com as quais costumamos trabalhar ( do tipo PNG, JPEG, GIF, etc ) são
conhecidas como Imagens Bitmap. Isso porque são basicamente um mapa de bits.
Essas imagens são compostas de vários pixels coloridos, pequenos quadradinhos que
juntos formam uma imagem.
É por isso que quando redimensionamos essas imagens, ou quando damos zoom, vemos
vários quadradinhos e dizemos que a imagem fixou "pixelada". Conforme redimensionamos,
essas imagens perdem a qualidade.
Vetoriais
Diferente das imagens bitmap, as imagens vetoriais não são compostas por pixels. Elas são
compostas por fórmulas matemáticas que descrevem formas.
Já que não possuem pixels e as formas são criadas a partir de cálculos matemáticos, basta
alterarmos alguns valores para redimensionar essas imagens, o que resulta em novos
cálculos baseados nas mesmas fórmulas, formando a mesma imagem com um tamanho
diferente.
Isso significa que as imagens vetoriais nunca perdem qualidade, não importa se deixarmos
a imagem do tamanho da cabeça de um alfinete ou do tamanho de um grande prédio.
Aqui temos algumas vantagens e desvantagens de cada um dos tipos para podermos
pensar qual o melhor a se usar em cada situação.
Bitmap
Vantagens:
● Pouco processamento para leitura, pois cada pixel só é apresentado;
● Bom para fotografias por capturar cada cor de cada ponto de uma imagem que, ao
ser apresentado em um monitor dão a sensação de uma imagem mais realista,
transmitindo melhor a mudança de tons, cores e sombras.
Desvantagens:
● Arquivos mais pesados, pois cada pixel deve ter as informações de cor e posição em
que deve ser apresentado;
● Ao ampliar a imagem, o pixel fica maior, fazendo a imagem perder qualidade.
Vetores
Vantagens:
● Arquivos menores, pois as formas são identificadas por fórmulas matemáticas;
● Ao redimensionar a imagem não se perde qualidade.
Desvantagens:
● Precisa de mais processamento para leitura, já que são feitos cálculos para poder
apresentar as formas;
● Não dá para ter todos os detalhes de cada ponto que seriam necessários para algo
como uma fotografia.
Como os computadores e dispositivos móveis hoje em dia são rápidos, essa ideia de tempo
de leitura não faz muita diferença.
Em geral podemos dizer que imagens que precisam de detalhes ( como fotografias e
objetos gráficos com muitas cores ) precisam ser em bitmap.
Já imagens que não tem tantos detalhes e provavelmente precisaremos em várias
dimensões (como desenhos, textos e logotipos ) é melhor utilizar vetores.
Como é uma SVG
Podemos criar imagens vetoriais em softwares, como Adobe Illustrator e Inkscape, e salvar
no formato SVG. Mas também é importante entender como é a estrutura de uma imagem
SVG para podermos tirar total vantagem de imagens vetoriais em nossas páginas.
Tanto o SVG quanto o HTML são arquivos que seguem o formato XML, então você verá
muitas semelhanças.
Vamos criar um arquivo "index.html" e escrever nosso SVG no corpo dele mesmo.
<svg width="200" height="200">
<circle cx="100" cy="100" r="40" stroke="red" stroke-width="5" fill="green" />
</svg>
Para declarar um SVG nós utilizamos a tag <svg> com as propriedades de largura e altura.
Dentro dele nós declaramos um círculo, e então passamos algumas propriedades para o
navegador saber como apresentar o círculo:
● posição X do centro do círculo = 100;
● posição Y do centro do círculo = 100;
● raio da circunferência = 40;
● cor da linha = red.
● largura da linha = 5.
● preenchimento = green.
Se quiséssemos dobra o tamanho dessa imagem poderíamos, por exemplo, simplesmente
trocar o raio da circunferência de 40 para 80 e a largura de linha de 5 para 10.
Podemos também deixar esse código em um arquivo SVG e chamá-lo no nosso HTML pela
tag <img>.
Vamos criar um arquivo chamado "mycircle.svg" e dentro dele:
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<circle cx="100" cy="100" r="80" style="stroke: red; stroke-width: 10; fill: green"/>
</svg>
A única diferença aqui é que incluímos o atributo "xmlns" na tag <svg>, que é um
namespace.
No nosso arquivo HTML, basta chamarmos o nosso arquivo como uma imagem comum:
<img src="mycircle.svg" />
E com isso poderemos trabalhar com o SVG como se fosse uma imagem normal, com a
diferença de que quando redimensionamos não temos perda de qualidade.
Porém, desta maneira não poderemos mexer com os elementos do SVG, pois agora ele
será visto como uma imagem comum.
Além do círculo (<circle>), temos também outras formas:
● <rect>;
● <ellipse>;
● <line>;
● <polyline>;
● <polygon>;
● <path>.
Estilizando SVG com CSS
Podemos estilizar cada elemento do nosso SVG com CSS. Muitas propriedades são
diferentes das propriedades do CSS que conhecemos, mas são basicamente o nome das
propriedades dos elementos do SVG como fill, stroke-width, stroke, etc.
<svg width="200" height="200">
<circle style="stroke: red; stroke-width: 10; fill: green; cx: 100; cy:100; r: 40;" />
</svg>
Para melhor organização, é recomendado pensar no SVG assim como um HTML: separar
estrutura de estilização. Então podemos criar um ID para o nosso círculo e criar um CSS
separado.
<svg width="200" height="200">
<circle id="myCircle" />
</svg>
#myCircle{
stroke: red;
stroke-width: 10;
fill: green;
cx: 100;
cy: 100;
r: 40;
}
Podemos até mesmo criar transições e animações com CSS. Muitas pessoas preferem
utilizar SVG para a criação de animações e efeitos gráficos que seriam mais complicados
apenas com HTML para poder compor seus designs.
Pré Processadores HTML
O HTML também possui Pré Processadores. Os mais famosos são o Haml e o Pug
(conhecido como Jade até dezembro de 2015).
No fim teremos HTML, já que é ele que o navegador consegue interpretar.
Além de tentar facilitar a criação de HTML, estes Pré Processadores também tentam fazer
com que o nosso código seja mais limpo, sem repetições e fácil de ler. Por isso eles
normalmente possuem uma sintaxe bem diferente do HTML.
Há ferramentas que geram o HTML automaticamente conforme vamos escrevendo nosso
código em Haml, Pug ou qualquer outro Pré Processador.
Caso queira testar agora os exemplos apresentados aqui, mesmo sem precisar instalar ou
configurar nada, nestes sites você pode escrever o seu código e ver como ficará a saída:
De Pug para HTML: http://learnjade.com/ ;
De HTML para Pug: http://html2jade.org/ ;
De Haml para HTML: https://www.haml-converter.com/ ;
de HTML para Haml: http://htmltohaml.com/ .
Nos exemplos a seguir veremos a sintaxe do Pug.
Não precisamos ficar abrindo e fechando tags com "<" e ">". Basta escrever o nome do
elemento que se quer
div
Resultará em:
<div></div>
Caso queira inserir IDs e classes, basta utilizar a sintaxe que utilizaríamos para criar um
seletor CSS
div#minhaDiv.classe1.classe2
Resultará em:
div#minhaDiv.classe1.classe2
Para colocar um conteúdo no elemento, basta escrever ao lado
div#minhaDiv.classe1.classe2 Meu Conteúdo
Resultará em:
<div id="minhaDiv" class="classe1 classe2">Meu Conteúdo</div>
Quando queremos colocar um elemento dentro do outro, basta ir para a linha de baixo e dar
espaço. Neste caso os espaços são importantes.
ul
li
li
Note que como os "li" estão com a mesma quantidade de espaços, isso indica que estão no
mesmo nível, e não um dentro do outro. Mas como eles estão com mais espaço do que "ul",
isso indica que estão dentro dele.
Para se criar atributos em um elemento, basta utilizar parênteses
input(
type='checkbox'
name='agreement'
checked
)
Será:
<input type="checkbox" name="agreement" checked="checked" />
Evitando Repetições
Muitas vezes precisamos ficar repetindo elementos. Com o Pug podemos escrever meno
ul
each numero in [1, 2, 3, 4, 5]
li= numero
será:
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
Veja só. Escrevemos bem menos código. O "each" começa um laço de repetição, e então
passamos uma lista com os itens que queremos jogar nos nossos elementos. Cada um dos
itens será jogado na variável que criamos. Neste exemplo demos o nome de "numero".
Para que um elemento tenha uma variável como conteúdo, basta utilizar o "=" na frente do
nome do elemento e passar a variável.
Definindo Condições
Também podemos criar condições, assim como em programação, para indicar se algo deve
ou não ser renderizado.
- var isOpen = true
div
if isOpen
span Aberto
else
span Fechado
Resultará em:
<div>
<span>Aberto</span>
</div>
O "-" é um escape e nos permite escrever scripts. Então no nosso código escrevemos um
"if" comum e passamos um <span> que será apresentado caso a condição seja verdadeira.
Se você mudar a condição para "false", o conteúdo de "else" será apresentado.
Web componets
Hoje em dia utilizamos a web para criar tantas coisas em que muitas vezes precisamos criar
muitos elementos com muito HTML.
O problema é que normalmente temos que reutilizar esses elementos em vários lugares, e a
estilização ou comportamento dos elementos podem acabar sendo afetados por outros
elementos nossos, sem contar a repetição de código em algumas ocasiões.
Imagine então se pudéssemos criar nossos próprios elementos HTML, chamá-los apenas
pelo nome ao invés de copiar um enorme HTML, e seu comportamento e estilização não
fossem afetados por outros códigos.
Um exemplo muito utilizado é um Slider de imagens. Seu HTML poderia ser algo assim:
<div id="slider">
<input checked="" type="radio" name="slider" id="slide1" selected="false">
<input type="radio" name="slider" id="slide2" selected="false">
<input type="radio" name="slider" id="slide3" selected="false">
<input type="radio" name="slider" id="slide4" selected="false">
<div id="slides">
<div id="overflow">
<div class="inner">
<img src="img1.png">
<img src="img2.png">
<img src="img3.png">
<img src="img4.png">
</div>
</div>
</div>
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
</div>
reste atenção em todo o código com o qual não iremos mexer, como os inputs e labels. O
que nos interessa são as imagens.
Poderíamos criar um componente, dar um nome como "image-slider", e chamá-lo assim:
<image-slider>
<img src="img1.png">
<img src="img2.png">
<img src="img3.png">
<img src="img4.png">
</image-slider>
E então passamos para ele as nossas imagens, que é o que nos interessa. Veja como ficou
mais limpo, e como ficaria mais simples reaproveitá-lo em várias páginas.
Todo o resto de código que não importa fica escondido. Até mesmo alguns elementos do
HTML são formados por outros elementos mais simples, como é o caso da tag <video>.
Isso é o que enxergamos:
Esse é o verdadeiro código por trás da tag <video>:
Web Components são compostos por basicamente quatro especificações:
● Templates;
● Shadow DOM;
● Custom Elements;
● Imports.
Templates
Template é basicamente onde nossos códigos do componente ficarão. Seu conteúdo é
ignorado pelo navegador até que o JavaScript os ative.
Para isso utilizamos a tag <template>. Vamos aproveitar o código do menu que criamos em
aulas anteriores.
<template id="meuMenu" >
<style>
.menu{
display: none;
color: #fff;
background-color: #252525;
margin: 0;
padding: 10px;
}
.menu-item{
list-style-type: none;
}
#meuMarcador:checked + .menu{
display: block;
}
#meuMarcador{
display: none;
}
</style>
<label class="menu-button" for="meuMarcador" >
<i class="fa fa-bars" >X</i>
</label>
<input type="checkbox" id="meuMarcador" />
<ul class="menu" >
<li class="menu-item" >Home</li>
<li class="menu-item" >Produtos</li>
<li class="menu-item" >Sobre Nós</li>
<li class="menu-item" >Contato</li>
</ul>
</template>
Se colocarmos isso no nosso HTML, veremos que o navegador ignora tudo o que está
dentro da tag <template>, não exibindo nada.
Note que no nosso CSS estamos fazendo com que o elemento da classe ".menu" não seja
exibido (display: none).
Experimente criar um elemento qualquer com esta mesma classe fora da tag <template> e
veja o que acontece: o elemento será exibido.
Isso porque o que está na tag <template> é isolado do resto do nosso documento,
mostrando o que dissemos antes: vários elementos em uma mesma página não terão
conflitos de estilização e comportamento.
Shadow DOM
Lembra dos elementos escondidos na tag <video>? Esse lugar escondido chama-se
Shadow DOM.
Caso esteja utilizando o Google Chrome, basta ir nas configurações do navegador e ativar a
exibição do Shadow DOM para poder vê-los no inspecionador de elementos.
Precisamos agora criar o nosso Shadow DOM para poder jogar o código da nossa template.
Para isso vamos criar um contêiner para o nosso componente.
<div class="container" ></div>
var host = document.querySelector('.container');
var shadowRoot = host.createShadowRoot();
var template = document.querySelector('#meuMenu');
var templateContent = document.importNode(template.content, true);
shadowRoot.appendChild(templateContent);
Pegamos o nosso contêiner, que será o "hospedeiro" do nosso componente, e guardamos
na variável "host".
Executamos a função "createShadowRoot()" para criar o lugar onde jogaremos o código da
nossa Template.
Pegamos a nossa template e jogamos em uma variável com o nome "template".
Pegamos todo o conteúdo da nossa template e jogamos na variável "templateContent".
E finalmente jogamos o conteúdo da Template no nosso contêiner.
Teremos o seguinte resultado:
Custom Elements
Ao invés de ficar criando contêineres com nomes de classes, podemos criar nossas
próprias tags!
Para isso, vamos fazer algumas alterações em nosso JavaScript:
var template = document.querySelector('#meuMenu').content;
customElements.define('meu-menu',
class extends HTMLElement {
constructor() {
super();
const shadowRoot = this.attachShadow({mode: 'open'})
.appendChild(template.cloneNode(true))
}
})
Veja que não precisamos mais pegar um contêiner, apenas pegamos o conteúdo da
Template.
Em seguida pegamoso objeto "customElements" e executamos a função "define()", onde
passamos o seletor que queremos para o nosso elemento, "meu-menu".
Dentro dele criamos uma classe que irá herdar as informações de protótipo dos elementos
HTML. Com esse objeto conseguiremos criar um elemento HTML que se comporta como
outro qualquer.
No método construtor indicamos a criação do Shadow DOM com a função "attachShadow"
e inserimos o conteúdo da nossa Template.
Como registramos com o nome "meu-menu", podemos utilizar este nome como nossa tag.
Vamos arrumar nosso HTML então:
<meu-menu ></meu-menu>
Pontos de Inserção
Nosso menu funciona, mas os itens do menu estão fixos. E se quiséssemos reaproveitar
este mesmo menu em outros sites? Não seria melhor podermos escolher os itens do nosso
menu?
Podemos fazer isso!
Primeiro vamos em nossa template e mudaremos a lista para o seguinte código:
<ul class="menu" >
<slot name="menu-list" ></slot>
</ul>
Utilizamos a tag <slot> para indicar que ali será inserido algum elemento, e passamos o
nome "menu-list".
Já que a estrutura foi mudada, teremos que fazer uma pequena alteração em nosso CSS.
O antigo seletor ".menu-item" agora será "::slotted(*)". Ele indicará que queremos pegar os
elementos que estarão no "slot" do elemento de classe ".menu".
Fazemos isso porque só podemos selecionar o contêiner de um slot, o que nos impede de
selecionar os <li>.
E por último vamos passar os itens que quisermos em nosso menu. Faremos isso em uma
<div> que utilizaremos como contêiner:
<meu-menu>
<div slot="menu-list" >
<li>Home</li>
<li>Produtos</li>
<li>Sobre Nós</li>
<li>Contato</li>
</div>
</meu-menu>
Criamos uma <div> com o nome do slot onde queremos inserir nosso conteúdo, "menu-list".
Com isso essa <div> terá seu conteúdo inserido dentro do <slot> de mesmo nome.
Agora temos um componente de Menu onde não precisamos nos preocupar com CSS,
<label>, <input>, etc e ainda podemos escolher quais os seus itens.
Imports
Quando criamos nossas páginas, podemos organizar nossas imagens, CSS, JavaScript, etc
e depois simplesmente importamos eles em nosso HTML, certo?
Mas até agora não havia como importar HTML!
Com o Imports do Web Components, podemos importar conteúdo HTML.
Vamos remover todo o conteúdo da tag <template> do nosso arquivo "index.html" e jogar
em um novo arquivo chamado "menu.html".
Para importá-lo, basta fazer o mesmo que fazemos para importar arquivos CSS:
<link rel="import" href="menu.html" id="meuMenu">
Importamos o nosso arquivo "menu.html" e passamos um ID "meuMenu" para ele. A
diferença com o CSS é que o "rel" recebe o valor "import" ao invés de "stylesheet".
Agora vamos fazer algumas alterações no nosso JavaScript:
var importContent = document.querySelector('#meuMenu').import;
var template = importContent.querySelector('#meuMenu').content;
Primeiro pegamos o conteúdo do nosso import, que é o nosso arquivo "menu.html", e
guardamos na variável "importContent".
A partir do "importContent" buscamos o conteúdo da Template existente nele.
O resto continua igual.
Caso queira, todo o JavaScript pode ser inserido dentro do "menu.html" também. Com isso
só precisamos importar um arquivo para poder utilizar nosso componente.
Você também pode gostar
- Avaliação Diagnóstica 2017 - 1 Prova - Banco de Itens de Avaliação Da Secretaria de Educação de Minas Gerais Terceiro33% (3)Avaliação Diagnóstica 2017 - 1 Prova - Banco de Itens de Avaliação Da Secretaria de Educação de Minas Gerais Terceiro10 páginas
- PROVA 13 - TÉCNICO INDUSTRIAL - MECÂNICA - Indd PDF0% (1)PROVA 13 - TÉCNICO INDUSTRIAL - MECÂNICA - Indd PDF7 páginas
- Alquimétricos Guia Didática v0.6.ptAinda não há avaliaçõesAlquimétricos Guia Didática v0.6.pt15 páginas
- Códigos HTML Básicos para Páginas WebAinda não há avaliaçõesCódigos HTML Básicos para Páginas Web25 páginas
- Manual HTML Lucas Ruan Qzoj6wtpvkag7u33emcx6abj44lvkx5yAinda não há avaliaçõesManual HTML Lucas Ruan Qzoj6wtpvkag7u33emcx6abj44lvkx5y26 páginas
- 04 TIC (Tema 2 - HTML) - XQ 10,11,12Ainda não há avaliações04 TIC (Tema 2 - HTML) - XQ 10,11,1220 páginas
- Anotações - Introdução À Linguagem HTMLAinda não há avaliaçõesAnotações - Introdução À Linguagem HTML13 páginas
- 05 TIC (Tema 3 - Estrutura de Um Documento HTML) - XQ 13,14,15Ainda não há avaliações05 TIC (Tema 3 - Estrutura de Um Documento HTML) - XQ 13,14,1519 páginas
- Livro Texto - Unidade III Artes Visuais Na RedeAinda não há avaliaçõesLivro Texto - Unidade III Artes Visuais Na Rede40 páginas
- Conceitos Sobre Paginas de InternetAinda não há avaliaçõesConceitos Sobre Paginas de Internet16 páginas
- Instalação de Dispositivos InternosAinda não há avaliaçõesInstalação de Dispositivos Internos14 páginas
- HORAS TRABALHADAS CLT - PEDRO PIASCENTINI (2a Quinz JAN - 24)Ainda não há avaliaçõesHORAS TRABALHADAS CLT - PEDRO PIASCENTINI (2a Quinz JAN - 24)2 páginas
- Aprenda Importar Coordenadas Topográficas para o AutoCADAinda não há avaliaçõesAprenda Importar Coordenadas Topográficas para o AutoCAD6 páginas
- WEG Tutorial Software Eb8000 Manual Portugues BRAinda não há avaliaçõesWEG Tutorial Software Eb8000 Manual Portugues BR56 páginas
- TAXBRA - Principais Perguntas e RespostasAinda não há avaliaçõesTAXBRA - Principais Perguntas e Respostas2 páginas
- Ed 6 2019 Unb DCS 19 Res Final Conv Registro AcademicoAinda não há avaliaçõesEd 6 2019 Unb DCS 19 Res Final Conv Registro Academico13 páginas
- GR - Guia de Remessa de Documentos - FaustsAinda não há avaliaçõesGR - Guia de Remessa de Documentos - Fausts12 páginas
- Ember.js: Conheça o framework para aplicações web ambiciosasNo EverandEmber.js: Conheça o framework para aplicações web ambiciosasAinda não há avaliações
- Elasticsearch: Consumindo dados real-time com ELKNo EverandElasticsearch: Consumindo dados real-time com ELKAinda não há avaliações
- Introdução A Php Com Banco De Dados MysqlNo EverandIntrodução A Php Com Banco De Dados MysqlAinda não há avaliações
