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