A semântica do HTML

A semântica do HTML

O que é semântica? Para que serve o HTML? O que é marcação de dados? Entenda como a semântica do HTML nos ajuda a publicar informação na web de forma mais inteligente.

1bf877955dc2e43662320fd3b0280166?s=128

Diego Eis

May 22, 2013
Tweet

Transcript

  1. A SEMÂNTICA DO HTML id e n t if ic

    aç ão , s ig n if ic ad o e o r g an iz aç ão DIEGO EIS @diegoeis @tableless http://tableless.com.br/
  2. None
  3. PARA QUE SERVE A WEB? Para que usamos a web?

    Entramos na web todos os dias para fazer o que? Safadinhos, eu sei o que vocês estão pensando...
  4. E O QUE É INFORMAÇÃO? É o resultado do processamento,

    manipulação e organização de dados, de tal forma que represente uma modificação (quantitativa ou qualitativa) no conhecimento do sistema (pessoa, animal ou máquina) que a recebe. #WTF? Se você leu tudo não ouviu nada do que eu disse agora. ;-)
  5. COMO ORGANIZAMOS A INFORMAÇÃO? Existem duas formas básicas: linear ou

    não linear. Como assim, Bial?
  6. FORMA LINEAR Como um livro, por exemplo.

  7. NÃO LINEAR Como uma enciclopédia.

  8. PARA QUE SERVE O HTML? Parece básico mas eu acho

    que quase ninguém parou para se perguntar isso.
  9. LINGUAGEM DE MARCAÇÃO DE HIPERTEXTO Preste atenção nessas duas palavras:

    Hipertexto e Marcação.
  10. HIPERTEXTO I n f o r ma ç ã o

    o r g a n iz a d a n ã o lin e a r me n t e . L e mb r a d a e n c ic lo p é d ia ?
  11. Vannevar Bush

  12. None
  13. MAMÍFERO é um é um tem PÊLO URSO tem BALEIA

    é um ÁGUA vive na é um PEIXE vive na ANIMAL é um VÉRTEBRA tem GATO tem
  14. None
  15. OS LINKS ORGANIZAM A WEB Mas eles organizam o todo.

    Apenas os caminhos.
  16. MARCAÇÃO Mar c ar p ar a d ar s

    ig n if ic ad o .
  17. SEMÂNTICA Significado da informação.

  18. <h1> </h1> título <p> </p> Lorem ipsum dolor sit amet,

    consectetur adipiscing elit. Duis lobortis, orci eu sodales tempor, augue velit pretium nunc, quis scelerisque sem velit vel.
  19. A ESTRUTURA IMPORTA Sabemos o significado dos elementos, mas o

    local que esse conteúdo se encontra diz muita coisa.
  20. <h1> título </h1> <h1> título </h1> <h1> título </h1> <h1>

    título </h1> <h1> título </h1>
  21. PARA QUE SERVE O DIV? Essa é fácil. Responde aí

    vai...
  22. QUAL A SEMÂNTICA DO DIV? Agora eu quero ver alguém

    responder...
  23. NENHUMA O div não tem função semântica NENHUMA!

  24. div#cabecalho div#rodape div#sidebar div#content div#sidebar

  25. div div div div div

  26. AS NOVAS TAGS A estrutura agora tem um significado semantico,

    influenciando na importância do seu conteúdo.
  27. header#cabecalho footer#rodape aside#sidebar article#content aside#sidebar

  28. header footer aside article aside

  29. ESTRUTURAÇÃO SEMÂNTICA Agora sabemos exatamente do que se trata cada

    conteúdo.
  30. MAS... Sabemos o que é cada elemento, mas ainda não

    temos como entender do que se trata o conteúdo.
  31. MICRODATA Me lh o r an d o a s

    e mân t ic a p ar a as máq u in as .
  32. Olá, eu me chamo Diego Eis, sou brasileiro, trabalho na

    Locaweb como Coordenador do Time de Front-end. Tenho um website chamado Tableless e você pode entrar em contato comigo pelo email contato@tableless.com.br. name jobTitle URL worksFor email nacionality
  33. <strong itemprop="name">Diego Eis</strong> <strong itemprop="nacionality">brasileiro</strong> <strong itemprop="worksFor">Locaweb</strong> <strong itemprop="jobTitle">Coordenador</strong> <a

    href="#" itemprop="url">Tableless</a> <a href="#" itemprop="email">diego@tableless...</a> MICRODATA
  34. ESTENDE O SIGNIFICADO DAS MICRO INFORMAÇÕES Microdatas melhoram a detecção

    de micro informações nos conteúdos do seu website.
  35. ESCREVA BOM CÓDIGO Código bom é código com significado.

  36. ACESSIBILIDADE Pense sempre em acessibilidade. Essa é a metade do

    caminho. Um sistema/site acessível é visível para máquinas e seres humanos.
  37. HTML NASCEU PARA SER PORTÁVEL Ele precisa ser acessado por

    qualquer tipo de meio de acesso: robôs, dispositivos, pessoas etc
  38. A INFORMAÇÃO É REUTILIZÁVEL Quando a informação é publicada na

    web, ela precisa ser reutilizável e acessível.
  39. AMPLEXOS Muito Obrigado! DIEGO EIS @diegoeis @tableless http://tableless.com.br/