Upgrade to Pro — share decks privately, control downloads, hide ads and more …

html5-110503211456-phpapp01.pdf

 html5-110503211456-phpapp01.pdf

Madson Dias

May 03, 2011
Tweet

More Decks by Madson Dias

Other Decks in Programming

Transcript

  1. madsondias.net Padrões web são conjunto de normas e recomendações produzidos

    pelo W3C. É destinado a desenvolvedores e projetistas para o uso de práticas que possibilitem a criação de uma Web acessível a todos. O que são padrões web? XHTML CSS HTML XML PNG
  2. #Dificuldade de desenvolvimento e Manutenção; #Sem significado #Formatação e estruturas

    Juntas #Excesso de código #Código icompreensível para máquinas madsondias.net web sem padrões...
  3. Trabalhar com padrões web não é uma questão de trocar

    tabelas por div’s madsondias.net Anotem isso! é uma questão de semântica!
  4. Tableless é um termo que ficou muito popular no Brasil,

    e que acaba por confundir muita gente. Tableless significa um site desenvolvido sem o uso das tabelas para organizar o layout, e sim usando CSS. Criar um site Tableless não significa que esteja seguindo os Padrões Web , que vão muito além de um código válido, e tem preocupações maiores como a Semântica e a Acessibilidade. madsondias.net Tableless Vs Webstandarts
  5. madsondias.net Estrutura Uma estrutura de informação, como documentos escritos em

    HTML, deve conter Adicionar marcações sem significado em um site pode ser comparado a adicionar diversas páginas em branco a um livro apenas marcações com dev ido significado.
  6. madsondias.net Um código semântico... Refere-se ao estudo do significado. Quando

    utilizamos cada marcação para o que ela realmente foi criada, estamos construindo um “Código Semântico”. Parar de pensar em “isso vem aqui, isso vai ali...” e pensar na “Estrutura da Informação”. Criar uma “Marcação com Significado” Semântica
  7. madsondias.net Compreensivel Isso possibilitaria que i n f o r

    m a ç õ e s úteis em diferentes sistemas f o s s e m i n t e g r a d a s para facilitar a vida das pessoas. Interopelabilidade
  8. madsondias.net Marcação Semântica Usar <table></ table> apenas para dados tabulares.

    Usar <h1></ h1> até <h6></ h6> para títulos Usar <ol></ ol> para Listas Ordenadas e <ul></ ul> para Listas Não Ordenadas, seguidos do elemento <li></ li> Usar <em></ em> para Enfase, e <strong></ strong> para Enfase Forte Usar <label></ label> para identificar campos em formulários
  9. madsondias.net html5 #Ian Hickson é o editor do HTML5 #Desde

    2008 vêm sendo apresentados rascunhos (Working Draft) #Espera-se que essa nova versão seja liberada ainda em 2010 #A prev isão para que se torne uma “recomendação” é para 2012 #Já é compreendido pelas versões mais recentes dos Browsers
  10. madsondias.net html5 Browser como o Google Chrome, Firefox 3.5, Internet

    Explorer 8 e Safari 4 já dão suporte ao HTML5, e com isso algumas páginas já vão aderindo a nova versão
  11. madsondias.net html5 API’s para a criação de Gráficos 2D, c

    o n t r o l e d e c o n t e ú d o m u l t i m í d i a , melhor depuração de erros e aprimoramento do uso offline são algumas das novidades da nova versão
  12. madsondias.net html5 N o v o s e l e

    m e n t o s p a r a i d e n t i f i c a r m e l h o r o s c o n t e ú d o s , coomo <header> e <footer> para cabeçalho e rodapé, <section> para sessões de uma página ou <article> para identificar um artigo ou um post.
  13. madsondias.net html5 < h e a d e r >

    Para definir onde será o cabeçalho da página < f o o t e r > Para definir onde será o rodapé da página ou da sessão
  14. madsondias.net html5 < a s i d e > Informações

    relativas ao conteúdo principal, como um menu ou campo de busca < a r t i c l e > Para definir a informação principal da página, nela é onde estará o conteúdo em si.
  15. madsondias.net html5 < f i g u r e >

    Para a inserção de imagens com legenda <figure id=”1”> <img src=”imagem.jpg” alt=”descrição”> <legend>Legenda da Imagem</legend> </figure>
  16. madsondias.net html5 < a u d i o > Exibe

    qualquer elemento de streaming de áudio, com atributos para exibição de controles ou execução automatica. <audio src=”horse.ogg” controls=”controls”> Seu Navegador não suporta esse recurso </audio>
  17. madsondias.net html5 < v i d e o > Exibe

    vídeos na página, com exibição de controles e de uma imagem enquanto o vídeo é carregado. <video src=”movie.ogg” controls=”controls”> Seu navegador não suporta esse recurso </video>
  18. madsondias.net html5 < n a v > Sessão de navegação,

    para links ‘lado a lado’. <nav> <a href=”default.asp”>Home</a> <a href=”tag_meter.asp”>Anterior</a> <a href=”tag_noscript.asp”>Próximo</a> </nav>