Padrões HTML5

Padrões para Criação e Interpretação
de Conteúdos Web com HTML5
Vagner Santana - Web Developer at Associação Educacional Prudentina
Infoeste 2013 - 14/05/2013

WHATWG
Open Web Platform
talks.vagnersantana.com #infoeste2013 3/36

dowebsitesneedtolookexactlythesameineverybrowser.com

Browser Engines

Perca tempo configurando suas
ferramentas...

Sublime Text
http://www.sublimetext.com
Sublime Package Controll

Emmet
http://emmet.io

HTML
Informação
CSS
Aparência
JavaScript
Comportamento
De que é a responsabilidade

Estrutura
talks.vagnersantana.com #infoeste2013
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<head>
<title>Document</title>
</head>
<body>
</body>
</html>
HTML
10/36

Formulários
#f55c00 Insira seu texto name@mail.com
Go

Multimedia
Audio / Video

CSS
Seletores Básicos
/* Selecionando uma tag */
p { color: #b23464; }
/* Selecionando um ID */
#menu{
font-size: 30px;
text-align: center;
}
/* Selecionando uma classe */
.box{
width: 600px;
height: 600px;
}
CSS
16/36

CSS
Seletores Avançados
/* Primeiro elemento parágrafo da div com a
classe article */
div.article p:first-child {
font-style: italic;
}
/* Estados */
a:link{ color: #00b295; }
a:active{ color: #005a4c; }
a:hover{ color: #a4a4b2; }
input[type=text]:focus {
background: #f7ff47;
}
CSS
17/36

CSS3 News
Border-radius
Transparency / Opacity
Gradients
Animations
Text-shadow
Box-shadow
Background Decoration
Box Sizing
·
·
·
·
·
·
·
·
18/36

@font-face
@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype'),
url('fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
.ico{ font-family: 'icomoon'; }
CSS
20/36

Animações
a .circle{
transition: all 2s ease;
}
a:hover .circle{
transform: rotate(-720deg);
}
CSS
21/36

Vendors Prefixes
a .circle{
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
a:hover .circle{
-webkit-transform: rotate(-720deg);
-moz-transform: rotate(-720deg);
-o-transform: rotate(-720deg);
transform: rotate(-720deg);
}
CSS
22/36

http://leaverou.github.io/prefixfree

Livros

Obrigado =D
http://vagnersantana.com
http://github.com/vagnervjs
@vagnervjs

Padrões HTML5

Recommended

Recommended

More Related Content

Similar to Padrões HTML5

Similar to Padrões HTML5 (20)

Padrões HTML5