daniel röhers moura - faccat€¦ · algumas tags – específica que iremos utilizar html5 ao...
TRANSCRIPT
![Page 2: Daniel Röhers Moura - FACCAT€¦ · Algumas tags – Específica que iremos utilizar HTML5 ao browser – Serve para marcar o cabeçalho do](https://reader033.vdocuments.pub/reader033/viewer/2022052100/6039ec94d643831c646c9d66/html5/thumbnails/2.jpg)
HTML o que?HTML5 é a nova versão do HTML, simples assim! :)
Foi lançada em 2008 e traz consigo importantes mudanças quanto ao papel do HTML na Web, através de novas funcionalidades como semântica, acessibilidade e diversas API’s.
2015 reconhecido pela W3C
2
![Page 3: Daniel Röhers Moura - FACCAT€¦ · Algumas tags – Específica que iremos utilizar HTML5 ao browser – Serve para marcar o cabeçalho do](https://reader033.vdocuments.pub/reader033/viewer/2022052100/6039ec94d643831c646c9d66/html5/thumbnails/3.jpg)
Por que usar?
3
![Page 4: Daniel Röhers Moura - FACCAT€¦ · Algumas tags – Específica que iremos utilizar HTML5 ao browser – Serve para marcar o cabeçalho do](https://reader033.vdocuments.pub/reader033/viewer/2022052100/6039ec94d643831c646c9d66/html5/thumbnails/4.jpg)
4
Semântica
![Page 5: Daniel Röhers Moura - FACCAT€¦ · Algumas tags – Específica que iremos utilizar HTML5 ao browser – Serve para marcar o cabeçalho do](https://reader033.vdocuments.pub/reader033/viewer/2022052100/6039ec94d643831c646c9d66/html5/thumbnails/5.jpg)
5
Exemplificando…
![Page 6: Daniel Röhers Moura - FACCAT€¦ · Algumas tags – Específica que iremos utilizar HTML5 ao browser – Serve para marcar o cabeçalho do](https://reader033.vdocuments.pub/reader033/viewer/2022052100/6039ec94d643831c646c9d66/html5/thumbnails/6.jpg)
6
Semântica, só para isso?
![Page 7: Daniel Röhers Moura - FACCAT€¦ · Algumas tags – Específica que iremos utilizar HTML5 ao browser – Serve para marcar o cabeçalho do](https://reader033.vdocuments.pub/reader033/viewer/2022052100/6039ec94d643831c646c9d66/html5/thumbnails/7.jpg)
7
45.623.910 pessoas</censo-2010>
![Page 8: Daniel Röhers Moura - FACCAT€¦ · Algumas tags – Específica que iremos utilizar HTML5 ao browser – Serve para marcar o cabeçalho do](https://reader033.vdocuments.pub/reader033/viewer/2022052100/6039ec94d643831c646c9d66/html5/thumbnails/8.jpg)
8
Não faça:<h1 role="button">heading button</h1>
Faça:<h1>
<button>heading button</button></h1>
![Page 9: Daniel Röhers Moura - FACCAT€¦ · Algumas tags – Específica que iremos utilizar HTML5 ao browser – Serve para marcar o cabeçalho do](https://reader033.vdocuments.pub/reader033/viewer/2022052100/6039ec94d643831c646c9d66/html5/thumbnails/9.jpg)
9
Não faça:<a href="#” class="btn">heading button</a>
Faça:<button>heading button</button>
![Page 10: Daniel Röhers Moura - FACCAT€¦ · Algumas tags – Específica que iremos utilizar HTML5 ao browser – Serve para marcar o cabeçalho do](https://reader033.vdocuments.pub/reader033/viewer/2022052100/6039ec94d643831c646c9d66/html5/thumbnails/10.jpg)
10
![Page 11: Daniel Röhers Moura - FACCAT€¦ · Algumas tags – Específica que iremos utilizar HTML5 ao browser – Serve para marcar o cabeçalho do](https://reader033.vdocuments.pub/reader033/viewer/2022052100/6039ec94d643831c646c9d66/html5/thumbnails/11.jpg)
11
Performance
![Page 12: Daniel Röhers Moura - FACCAT€¦ · Algumas tags – Específica que iremos utilizar HTML5 ao browser – Serve para marcar o cabeçalho do](https://reader033.vdocuments.pub/reader033/viewer/2022052100/6039ec94d643831c646c9d66/html5/thumbnails/12.jpg)
12
SEOSearch Engine Optimization
![Page 13: Daniel Röhers Moura - FACCAT€¦ · Algumas tags – Específica que iremos utilizar HTML5 ao browser – Serve para marcar o cabeçalho do](https://reader033.vdocuments.pub/reader033/viewer/2022052100/6039ec94d643831c646c9d66/html5/thumbnails/13.jpg)
13
API'sConectividade • Web Sockets • Server-sent events • WebRTC
Offline e Armazenamento Validação de formulários
Geolocalização Áudio
Vídeo Drag and Drop
Gráficos e efeitos 3D
e muito, muito mais…
![Page 14: Daniel Röhers Moura - FACCAT€¦ · Algumas tags – Específica que iremos utilizar HTML5 ao browser – Serve para marcar o cabeçalho do](https://reader033.vdocuments.pub/reader033/viewer/2022052100/6039ec94d643831c646c9d66/html5/thumbnails/14.jpg)
14
![Page 15: Daniel Röhers Moura - FACCAT€¦ · Algumas tags – Específica que iremos utilizar HTML5 ao browser – Serve para marcar o cabeçalho do](https://reader033.vdocuments.pub/reader033/viewer/2022052100/6039ec94d643831c646c9d66/html5/thumbnails/15.jpg)
Algumas tags<!DOCTYPE html> – Específica que iremos utilizar HTML5 ao browser
<header> – Serve para marcar o cabeçalho do documento ou seção.
<nav> – Como o nome já sugere, essa tag é utilizada para navegação, ou seja, nela irá conter links de navegação externa ou interna a página.
<main> – Essa tag pode ser usada para identificar o conteúdo principal da página. Por exemplo, o conteúdo de um artigo pode estar dentro da tag main.
<section> – A section serve para separar as seções genésicas de uma página e para identificar abordagens diferentes de uma página.
<article> – Usado para representar conteúdos independentes de uma página. Como um post de um blog.
15
![Page 16: Daniel Röhers Moura - FACCAT€¦ · Algumas tags – Específica que iremos utilizar HTML5 ao browser – Serve para marcar o cabeçalho do](https://reader033.vdocuments.pub/reader033/viewer/2022052100/6039ec94d643831c646c9d66/html5/thumbnails/16.jpg)
<aside> – Essa tag é usada para a identificação de um conteúdo secundário que não seja parte da seção principal. Ela é bastante usada como uma sidebar, alocadas em uma coluna esquerda ou direita de uma página.
<footer> – Usada para identificar o rodapé da página ou seção.
<audio> – É uma maneira simples e eficiente de inserirmos um arquivo de áudio na página.
<video> – É usada para inserirmos arquivos de vídeo na página. Existem muitas atributos que complementam essa tag, como inserir legenda por exemplo.
16
![Page 17: Daniel Röhers Moura - FACCAT€¦ · Algumas tags – Específica que iremos utilizar HTML5 ao browser – Serve para marcar o cabeçalho do](https://reader033.vdocuments.pub/reader033/viewer/2022052100/6039ec94d643831c646c9d66/html5/thumbnails/17.jpg)
Estruturação básica
17
![Page 18: Daniel Röhers Moura - FACCAT€¦ · Algumas tags – Específica que iremos utilizar HTML5 ao browser – Serve para marcar o cabeçalho do](https://reader033.vdocuments.pub/reader033/viewer/2022052100/6039ec94d643831c646c9d66/html5/thumbnails/18.jpg)
Novos Input Types• color <input type="color" name="favcolor">
• date <input type="date" name="bday">
• datetime <input type="datetime" name="bdaytime">
• email <input type="email" name="email">
• month <input type="month" name="bdaymonth">
• number <input type="number" name="quantity" min="1" max="5">
• range <input type="range" name="points" min="1" max="10">
• time <input type="time" name="usr_time">
• url <input type="url" name="homepage">
• week <input type="week" name="week_year">
18
![Page 19: Daniel Röhers Moura - FACCAT€¦ · Algumas tags – Específica que iremos utilizar HTML5 ao browser – Serve para marcar o cabeçalho do](https://reader033.vdocuments.pub/reader033/viewer/2022052100/6039ec94d643831c646c9d66/html5/thumbnails/19.jpg)
Bye :)
<acronym><applet><basefont><big><center><dir>
<font><frame><frameset><noframes><strike><tt>
19
![Page 20: Daniel Röhers Moura - FACCAT€¦ · Algumas tags – Específica que iremos utilizar HTML5 ao browser – Serve para marcar o cabeçalho do](https://reader033.vdocuments.pub/reader033/viewer/2022052100/6039ec94d643831c646c9d66/html5/thumbnails/20.jpg)
20
Mais algumas mudanças…
![Page 21: Daniel Röhers Moura - FACCAT€¦ · Algumas tags – Específica que iremos utilizar HTML5 ao browser – Serve para marcar o cabeçalho do](https://reader033.vdocuments.pub/reader033/viewer/2022052100/6039ec94d643831c646c9d66/html5/thumbnails/21.jpg)
21
Doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML
<!DOCTYPE html>
HTML5
![Page 22: Daniel Röhers Moura - FACCAT€¦ · Algumas tags – Específica que iremos utilizar HTML5 ao browser – Serve para marcar o cabeçalho do](https://reader033.vdocuments.pub/reader033/viewer/2022052100/6039ec94d643831c646c9d66/html5/thumbnails/22.jpg)
22
Language
< html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
HTML
<html lang="en">
HTML5
![Page 23: Daniel Röhers Moura - FACCAT€¦ · Algumas tags – Específica que iremos utilizar HTML5 ao browser – Serve para marcar o cabeçalho do](https://reader033.vdocuments.pub/reader033/viewer/2022052100/6039ec94d643831c646c9d66/html5/thumbnails/23.jpg)
23
Character Encoding
<meta http-equiv="Content-Type" content=“text/html;charset=UTF-8">
HTML
<meta charset="UTF-8">
HTML5
![Page 24: Daniel Röhers Moura - FACCAT€¦ · Algumas tags – Específica que iremos utilizar HTML5 ao browser – Serve para marcar o cabeçalho do](https://reader033.vdocuments.pub/reader033/viewer/2022052100/6039ec94d643831c646c9d66/html5/thumbnails/24.jpg)
24
CSS
<link rel="stylesheet" type="text/css" href="theme.css">
HTML
<link rel="stylesheet" href="theme.css">
HTML5
![Page 25: Daniel Röhers Moura - FACCAT€¦ · Algumas tags – Específica que iremos utilizar HTML5 ao browser – Serve para marcar o cabeçalho do](https://reader033.vdocuments.pub/reader033/viewer/2022052100/6039ec94d643831c646c9d66/html5/thumbnails/25.jpg)
25
JavaScript
<script type="text/javascript" src="javascript.js">
HTML
<script src="javascript.js">
HTML5
![Page 26: Daniel Röhers Moura - FACCAT€¦ · Algumas tags – Específica que iremos utilizar HTML5 ao browser – Serve para marcar o cabeçalho do](https://reader033.vdocuments.pub/reader033/viewer/2022052100/6039ec94d643831c646c9d66/html5/thumbnails/26.jpg)
26
Alguns exemplos…
![Page 27: Daniel Röhers Moura - FACCAT€¦ · Algumas tags – Específica que iremos utilizar HTML5 ao browser – Serve para marcar o cabeçalho do](https://reader033.vdocuments.pub/reader033/viewer/2022052100/6039ec94d643831c646c9d66/html5/thumbnails/27.jpg)
< audio >
27
![Page 28: Daniel Röhers Moura - FACCAT€¦ · Algumas tags – Específica que iremos utilizar HTML5 ao browser – Serve para marcar o cabeçalho do](https://reader033.vdocuments.pub/reader033/viewer/2022052100/6039ec94d643831c646c9d66/html5/thumbnails/28.jpg)
< video >
28
![Page 29: Daniel Röhers Moura - FACCAT€¦ · Algumas tags – Específica que iremos utilizar HTML5 ao browser – Serve para marcar o cabeçalho do](https://reader033.vdocuments.pub/reader033/viewer/2022052100/6039ec94d643831c646c9d66/html5/thumbnails/29.jpg)
< svg >
29
![Page 30: Daniel Röhers Moura - FACCAT€¦ · Algumas tags – Específica que iremos utilizar HTML5 ao browser – Serve para marcar o cabeçalho do](https://reader033.vdocuments.pub/reader033/viewer/2022052100/6039ec94d643831c646c9d66/html5/thumbnails/30.jpg)
geolocation
30
![Page 31: Daniel Röhers Moura - FACCAT€¦ · Algumas tags – Específica que iremos utilizar HTML5 ao browser – Serve para marcar o cabeçalho do](https://reader033.vdocuments.pub/reader033/viewer/2022052100/6039ec94d643831c646c9d66/html5/thumbnails/31.jpg)
getUserMedia
31
![Page 32: Daniel Röhers Moura - FACCAT€¦ · Algumas tags – Específica que iremos utilizar HTML5 ao browser – Serve para marcar o cabeçalho do](https://reader033.vdocuments.pub/reader033/viewer/2022052100/6039ec94d643831c646c9d66/html5/thumbnails/32.jpg)
getUserMedia
32
![Page 37: Daniel Röhers Moura - FACCAT€¦ · Algumas tags – Específica que iremos utilizar HTML5 ao browser – Serve para marcar o cabeçalho do](https://reader033.vdocuments.pub/reader033/viewer/2022052100/6039ec94d643831c646c9d66/html5/thumbnails/37.jpg)
37
![Page 44: Daniel Röhers Moura - FACCAT€¦ · Algumas tags – Específica que iremos utilizar HTML5 ao browser – Serve para marcar o cabeçalho do](https://reader033.vdocuments.pub/reader033/viewer/2022052100/6039ec94d643831c646c9d66/html5/thumbnails/44.jpg)
Obrigado;D
44