senior front end @ arezzo&cofpereira/pagina/autoria/html5.pdf · algumas tags – especifica...
Post on 06-Oct-2020
6 Views
Preview:
TRANSCRIPT
1
rohersmoura@gmail.comdanielrohers
Daniel Röhers MouraSenior Front End @ Arezzo&Co
HTML o que?
HTML5 é a nova versão do HTML, simples assim! :)
Foi lançada em 2008 (WhatWG) e trouxe 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
Por que usar?
3
4
Semântica
a
5
Exemplo Variáveis
numero
numeroCpf
numeroCpfCliente
6
Exemplo HTML
7
Semântica, só para isso?
8
45.623.910 pessoas</censo-2010>
9
Não faça:
Faça:
10
Não faça:
Faça:
11
Não faça:
Faça:
12
Performance
13
14
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…
15
Algumas tags<!DOCTYPE html> – Especifica 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 de uma página e para identificar abordagens diferentes.
<article> – Usado para representar conteúdos independentes de uma página. Como um post de um blog.
16
<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.
17
Exemplo de estrutura
18
Novos Input Types• color• date• datetime• email• month• number• range• time• url• week
19
<input type=“color"><input type=“date"><input type=“datetime"><input type=“email"><input type=“month"><input type=“number" min="1" max=“5"><input type="range" min="1" max=“10"><input type=“time"><input type=“url"><input type="week">
Bye :)
<acronym><applet><basefont><big><center><dir>
<font><frame><frameset><noframes><strike><tt>
20
21
Algumas comparações…
22
Doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML4
<!DOCTYPE html>
HTML5
23
Language
< html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
HTML4
<html lang="en">
HTML5
24
Character Encoding
<meta http-equiv="Content-Type" content=“text/html;charset=UTF-8">
HTML4
<meta charset="UTF-8">
HTML5
25
CSS
<link rel="stylesheet" type="text/css" href="theme.css">
HTML4
<link rel="stylesheet" href="theme.css">
HTML5
26
JavaScript
<script type="text/javascript" src="javascript.js">
HTML4
<script src="javascript.js">
HTML5
27
Alguns exemplos…
< audio >
28
< video >
29
< svg >
30
geolocation
31
getUserMedia
32
33
getUserMedia
38
Obrigado :)
46
@danielrohers
top related