Embed Size (px)
DESCRIPTION
Slides para iniciantes no mundo front-end. HTML5 version of this presentation: talks.vagnersantana.com/infoeste
Citation preview
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
Crie seus padrões!
Onde buscar conhecimento?
Livros
talks.vagnersantana.com #infoeste2013 34/36
Obrigado =D
http://vagnersantana.com
http://github.com/vagnervjs
@vagnervjs
talks.vagnersantana.com #infoeste2013 36/36
![HTML5 - W3C...HTML4 + CSS 56 HTML5 - Futuro da Web Futuro da Web - HTML5 HTML 5 [HyperText Markup Language] Novos elementos (semânticos) HTML5 + CSS E o que ficou de fora do HTML5?](https://img.document.onl/doc/110x75/5f9769938559bc0a406dee44/html5-w3c-html4-css-56-html5-futuro-da-web-futuro-da-web-html5-html.jpg)
