• Like
  • Save
Padrões para Criação e Interpretação de Conteúdos Web com HTML5
Upcoming SlideShare
Loading in...5
×
 

Padrões para Criação e Interpretação de Conteúdos Web com HTML5

on

  • 393 views

Slides para iniciantes no mundo front-end.

Slides para iniciantes no mundo front-end.
HTML5 version of this presentation: talks.vagnersantana.com/infoeste

Statistics

Views

Total Views
393
Views on SlideShare
390
Embed Views
3

Actions

Likes
1
Downloads
12
Comments
0

1 Embed 3

http://www.linkedin.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Padrões para Criação e Interpretação de Conteúdos Web com HTML5 Padrões para Criação e Interpretação de Conteúdos Web com HTML5 Presentation Transcript

    • 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?
    • WHATWGOpen Web Platformtalks.vagnersantana.com #infoeste2013 3/36
    • dowebsitesneedtolookexactlythesameineverybrowser.com
    • Browser Enginestalks.vagnersantana.com #infoeste2013 5/36
    • Perca tempo configurando suasferramentas...
    • Sublime Texthttp://www.sublimetext.comSublime Package Controlltalks.vagnersantana.com #infoeste2013 7/36
    • Emmethttp://emmet.iotalks.vagnersantana.com #infoeste2013 8/36
    • HTMLInformaçãoCSSAparênciaJavaScriptComportamentoDe que é a responsabilidadetalks.vagnersantana.com #infoeste2013 9/36
    • Estruturatalks.vagnersantana.com #infoeste2013<!DOCTYPE html><html lang="en"><meta charset="UTF-8"><head><title>Document</title></head><body></body></html>HTML10/36
    • Semântica
    • Formulários#f55c00 Insira seu texto name@mail.comGotalks.vagnersantana.com #infoeste2013 13/36
    • MultimediaAudio / Videotalks.vagnersantana.com #infoeste2013 14/36
    • CSS (3)
    • CSSSeletores Básicostalks.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;}CSS16/36
    • CSSSeletores Avançadostalks.vagnersantana.com #infoeste2013/* Primeiro elemento parágrafo da div com aclasse 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;}CSS17/36
    • CSS3 Newstalks.vagnersantana.com #infoeste2013Border-radiusTransparency / OpacityGradientsAnimationsText-shadowBox-shadowBackground DecorationBox Sizing········18/36
    • Fontes com CSS3
    • @font-facetalks.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; }CSS20/36
    • Animaçõestalks.vagnersantana.com #infoeste2013a .circle{transition: all 2s ease;}a:hover .circle{transform: rotate(-720deg);}CSS21/36
    • Vendors Prefixestalks.vagnersantana.com #infoeste2013a .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);}CSS22/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
    • Livrostalks.vagnersantana.com #infoeste2013 34/36
    • Obrigado =Dhttp://vagnersantana.comhttp://github.com/vagnervjs@vagnervjstalks.vagnersantana.com #infoeste2013 36/36