Rommel Peixoto
 Breve história do HTML  Estrutura de um documento HTML5  Comparação entre HTML4/XHTML e HTML5  Conhecer as novidades do HTML5  O estiloso CSS3
 Códigos, códigos, códigos...  Explicação detalhada das APIs  Exemplos online
1998: HTML 4.0
2000: XHTML
2002: XHTML 2.0
2004: Web 2.0
2006: W3C + WHATWG
2009: W3C -> HTML5
2010 ~ 2011: HTML5
2012: FIM DO MUNDO!!!
 Alguém sabe de cabeça como escreve o DOCTYPE?
 HTML5 <!doctype html>
 Outro elemento importante em todo HTML: META  HTML 4.0 <meta http-equiv=“content-type” content=“text/html;charset=UTF-8”>  XHTML <meta http-equiv=“content-type” content=“text/html;charset=UTF-8” />  HTML5 <meta charset=“UTF-8”>
 Juntando tudo!!!
 Conectividade e aplicações em tempo real  Novas possibilidades de estilo com CSS3  Gráficos 2D, 3D e Vetoriais  Recursos multimídia  Melhor performance  Elementos semânticos  Armazenamento offline  APIs JS: Drag and Drop, Geolocalização, etc...
 Tags de estrutura:
 Tags de estrutura:
 Tags de estrutura:
 Novos tipos de campos:
 Novos tipos de campos:
 Tipos de dados e validadores:
 Tipos de dados e validadores :
 Conteúdo editável :
 Áudio:
 Vídeo:
 Drag and Drop:
 Correção Ortográfica:
 Gráfico: <canvas>
 Armazenamento:  Cookies  Web Storage  Web SQL Databases
 Geolocalização:
Quem nao quer matar o designer, quando pede:  Fazer caixinhas com bordas arredondadas  Colocar uma sombrinha nos textos/caixas  Utilizar um background gigante  Utilizar um background composto  Fazer uma página adaptável ao tamanho da página  Fazer os títulos das páginas ter uma font mais estilosa
 Bordas arredondadas:
 Sombras:
 Background Gigante: SVG + background-size
 Gradient:
 Cores RGBA:
 Animações:
 font:
 Media Queries:
 rommelweb  rommel.com.br

HTML5 CSS3

  • 1.
  • 2.
    Breve história do HTML  Estrutura de um documento HTML5  Comparação entre HTML4/XHTML e HTML5  Conhecer as novidades do HTML5  O estiloso CSS3
  • 3.
    Códigos, códigos, códigos...  Explicação detalhada das APIs  Exemplos online
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
    2010 ~ 2011: HTML5
  • 11.
  • 12.
    Alguém sabe de cabeça como escreve o DOCTYPE?
  • 13.
    HTML5 <!doctype html>
  • 14.
    Outro elemento importante em todo HTML: META  HTML 4.0 <meta http-equiv=“content-type” content=“text/html;charset=UTF-8”>  XHTML <meta http-equiv=“content-type” content=“text/html;charset=UTF-8” />  HTML5 <meta charset=“UTF-8”>
  • 15.
    Juntando tudo!!!
  • 16.
    Conectividade e aplicações em tempo real  Novas possibilidades de estilo com CSS3  Gráficos 2D, 3D e Vetoriais  Recursos multimídia  Melhor performance  Elementos semânticos  Armazenamento offline  APIs JS: Drag and Drop, Geolocalização, etc...
  • 17.
    Tags de estrutura:
  • 18.
    Tags de estrutura:
  • 19.
    Tags de estrutura:
  • 20.
    Novos tipos de campos:
  • 21.
    Novos tipos de campos:
  • 22.
    Tipos de dados e validadores:
  • 23.
    Tipos de dados e validadores :
  • 24.
    Conteúdo editável :
  • 25.
    Áudio:
  • 26.
    Vídeo:
  • 27.
    Drag and Drop:
  • 28.
    Correção Ortográfica:
  • 29.
    Gráfico: <canvas>
  • 30.
    Armazenamento:  Cookies  Web Storage  Web SQL Databases
  • 31.
    Geolocalização:
  • 32.
    Quem nao quermatar o designer, quando pede:  Fazer caixinhas com bordas arredondadas  Colocar uma sombrinha nos textos/caixas  Utilizar um background gigante  Utilizar um background composto  Fazer uma página adaptável ao tamanho da página  Fazer os títulos das páginas ter uma font mais estilosa
  • 33.
    Bordas arredondadas:
  • 34.
    Sombras:
  • 35.
    Background Gigante: SVG + background-size
  • 36.
    Gradient:
  • 37.
    Cores RGBA:
  • 38.
    Animações:
  • 39.
    font:
  • 40.
    Media Queries:
  • 41.
    rommelweb  rommel.com.br