Padrões para Criação e Interpretação de Conteúdos Web com HTML5
-
Upload
vagner-santana -
Category
Technology
-
view
439 -
download
1
description
Transcript of Padrões para Criação e Interpretação de Conteúdos Web com HTML5
Padrões para Criação e Interpretaçãode Conteúdos Web com HTML5Vagner Santana - Web Developer at Associação Educacional PrudentinaInfoeste 2013 - 14/05/2013
Futuro?
WHATWG
Open Web Platformtalks.vagnersantana.com #infoeste2013 3/36
dowebsitesneedtolookexactlythesameineverybrowser.com
Browser Engines
talks.vagnersantana.com #infoeste2013 5/36
Perca tempo configurando suasferramentas...
Sublime Text
http://www.sublimetext.comSublime Package Controll
talks.vagnersantana.com #infoeste2013 7/36
HTML Informação
CSS Aparência
JavaScript Comportamento
De que é a responsabilidade
talks.vagnersantana.com #infoeste2013 9/36
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
Semântica
Formulários#f55c00 Insira seu texto [email protected]
Go
talks.vagnersantana.com #infoeste2013 13/36
MultimediaAudio / Video
talks.vagnersantana.com #infoeste2013 14/36
CSS (3)
CSSSeletores Básicos
talks.vagnersantana.com #infoeste2013
/* 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
CSSSeletores Avançados
talks.vagnersantana.com #infoeste2013
/* 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
talks.vagnersantana.com #infoeste2013
Border-radius
Transparency / Opacity
Gradients
Animations
Text-shadow
Box-shadow
Background Decoration
Box Sizing
·
·
·
·
·
·
·
·
18/36
Fontes com CSS3
@font-face
talks.vagnersantana.com #infoeste2013
@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
talks.vagnersantana.com #infoeste2013
a .circle{ transition: all 2s ease; } a:hover .circle{ transform: rotate(-720deg); }
CSS
21/36
Vendors Prefixes
talks.vagnersantana.com #infoeste2013
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
Crie seus padrões!
http://html5boilerplate.com/
http://www.initializr.com
http://modernizr.com
http://caniuse.com/
Onde buscar conhecimento?
http://diveintohtml5.com.br
http://www.html5rocks.com
http://html5doctor.com
http://tableless.com
Livros
talks.vagnersantana.com #infoeste2013 34/36
Obrigado =D
http://vagnersantana.com
http://github.com/vagnervjs
@vagnervjs
talks.vagnersantana.com #infoeste2013 36/36