A verdadeira semântica do HTML

17,550 views

Published on

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.

Published in: Technology
4 Comments
57 Likes
Statistics
Notes
No Downloads
Views
Total views
17,550
On SlideShare
0
From Embeds
0
Number of Embeds
8,779
Actions
Shares
0
Downloads
278
Comments
4
Likes
57
Embeds 0
No embeds

No notes for slide

A verdadeira semântica do HTML

  1. 1. A SEMÂNTICA DO HTMLid e n t if ic aç ão , s ig n if ic ad o e o r g an iz aç ãoDIEGO EIS@diegoeis @tablelesshttp://tableless.com.br/
  2. 2. 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...
  3. 3. E O QUE É INFORMAÇÃO?É o resultado do processamento, manipulação e organizaçãode 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. ;-)
  4. 4. COMO ORGANIZAMOS AINFORMAÇÃO?Existem duas formas básicas: linear ou não linear.Como assim, Bial?
  5. 5. FORMA LINEARComo um livro, por exemplo.
  6. 6. NÃO LINEARComo uma enciclopédia.
  7. 7. PARA QUE SERVE O HTML?Parece básico mas eu acho que quase ninguém parou para seperguntar isso.
  8. 8. LINGUAGEM DE MARCAÇÃODE HIPERTEXTOPreste atenção nessas duas palavras: Hipertexto e Marcação.
  9. 9. HIPERTEXTOI 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 ?
  10. 10. Vannevar Bush
  11. 11. MAMÍFEROé umé umtemPÊLOURSOtemBALEIAé umÁGUAvive naé umPEIXEvive naANIMALé umVÉRTEBRAtemGATOtem
  12. 12. OS LINKS ORGANIZAM A WEBMas eles organizam o todo. Apenas os caminhos.
  13. 13. MARCAÇÃOMar c ar p ar a d ar s ig n if ic ad o .
  14. 14. SEMÂNTICASignificado da informação.
  15. 15. <h1> </h1>título<p></p>Lorem ipsum dolor sitamet, consecteturadipiscing elit. Duislobortis, orci eu sodalestempor, augue velitpretium nunc, quisscelerisque sem velit vel.
  16. 16. A ESTRUTURA IMPORTASabemos o significado dos elementos, mas o local que esseconteúdo se encontra diz muita coisa.
  17. 17. <h1> título </h1><h1> título </h1><h1>título</h1><h1> título </h1><h1>título</h1>
  18. 18. PARA QUE SERVE O DIV?Essa é fácil. Responde aí vai...
  19. 19. QUAL A SEMÂNTICA DO DIV?Agora eu quero ver alguém responder...
  20. 20. NENHUMAO div não tem função semântica NENHUMA!
  21. 21. div#cabecalhodiv#rodapediv#sidebar div#content div#sidebar
  22. 22. divdivdiv div div
  23. 23. AS NOVAS TAGSA estrutura agora tem um significado semantico, influenciandona importância do seu conteúdo.
  24. 24. header#cabecalhofooter#rodapeaside#sidebar article#content aside#sidebar
  25. 25. headerfooteraside article aside
  26. 26. ESTRUTURAÇÃO SEMÂNTICAAgora sabemos exatamente do que se trata cada conteúdo.
  27. 27. MAS...Sabemos o que é cada elemento, mas ainda não temos comoentender do que se trata o conteúdo.
  28. 28. MICRODATAMe lh o r an d o a s e mân t ic a p ar a as máq u in as .
  29. 29. Olá, eu me chamo Diego Eis, sou brasileiro,trabalho na Locaweb como Coordenador do Timede Front-end. Tenho um website chamadoTableless e você pode entrar em contato comigopelo email contato@tableless.com.br.namejobTitleURLworksForemailnacionality
  30. 30. <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
  31. 31. ESTENDE O SIGNIFICADO DASMICRO INFORMAÇÕESMicrodatas melhoram a detecção de micro informações nosconteúdos do seu website.
  32. 32. ESCREVA BOM CÓDIGOCódigo bom é código com significado.
  33. 33. ACESSIBILIDADEPense sempre em acessibilidade. Essa é a metade do caminho.Um sistema/site acessível é visível para máquinas e sereshumanos.
  34. 34. HTML NASCEU PARA SERPORTÁVELEle precisa ser acessado por qualquer tipo de meio de acesso:robôs, dispositivos, pessoas etc
  35. 35. A INFORMAÇÃO ÉREUTILIZÁVELQuando a informação é publicada na web, ela precisa serreutilizável e acessível.
  36. 36. AMPLEXOSMuito Obrigado!DIEGO EIS@diegoeis@tableless http://tableless.com.br/

×