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://tablele...
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 e...
E O QUE É INFORMAÇÃO?É o resultado do processamento, manipulação e organizaçãode dados, de tal forma que represente uma mo...
COMO ORGANIZAMOS AINFORMAÇÃO?Existem duas formas básicas: linear ou não linear.Como assim, Bial?
FORMA LINEARComo um livro, por exemplo.
NÃO LINEARComo uma enciclopédia.
PARA QUE SERVE O HTML?Parece básico mas eu acho que quase ninguém parou para seperguntar isso.
LINGUAGEM DE MARCAÇÃODE HIPERTEXTOPreste atenção nessas duas palavras: Hipertexto e Marcação.
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 ?
Vannevar Bush
MAMÍFEROé umé umtemPÊLOURSOtemBALEIAé umÁGUAvive naé umPEIXEvive naANIMALé umVÉRTEBRAtemGATOtem
OS LINKS ORGANIZAM A WEBMas eles organizam o todo. Apenas os caminhos.
MARCAÇÃOMar c ar p ar a d ar s ig n if ic ad o .
SEMÂNTICASignificado da informação.
<h1> </h1>título<p></p>Lorem ipsum dolor sitamet, consecteturadipiscing elit. Duislobortis, orci eu sodalestempor, augue v...
A ESTRUTURA IMPORTASabemos o significado dos elementos, mas o local que esseconteúdo se encontra diz muita coisa.
<h1> título </h1><h1> título </h1><h1>título</h1><h1> título </h1><h1>título</h1>
PARA QUE SERVE O DIV?Essa é fácil. Responde aí vai...
QUAL A SEMÂNTICA DO DIV?Agora eu quero ver alguém responder...
NENHUMAO div não tem função semântica NENHUMA!
div#cabecalhodiv#rodapediv#sidebar div#content div#sidebar
divdivdiv div div
AS NOVAS TAGSA estrutura agora tem um significado semantico, influenciandona importância do seu conteúdo.
header#cabecalhofooter#rodapeaside#sidebar article#content aside#sidebar
headerfooteraside article aside
ESTRUTURAÇÃO SEMÂNTICAAgora sabemos exatamente do que se trata cada conteúdo.
MAS...Sabemos o que é cada elemento, mas ainda não temos comoentender do que se trata o conteúdo.
MICRODATAMe lh o r an d o a s e mân t ic a p ar a as máq u in as .
Olá, eu me chamo Diego Eis, sou brasileiro,trabalho na Locaweb como Coordenador do Timede Front-end. Tenho um website cham...
<strong itemprop="name">Diego Eis</strong><strong itemprop="nacionality">brasileiro</strong><strong itemprop="worksFor">Lo...
ESTENDE O SIGNIFICADO DASMICRO INFORMAÇÕESMicrodatas melhoram a detecção de micro informações nosconteúdos do seu website.
ESCREVA BOM CÓDIGOCódigo bom é código com significado.
ACESSIBILIDADEPense sempre em acessibilidade. Essa é a metade do caminho.Um sistema/site acessível é visível para máquinas...
HTML NASCEU PARA SERPORTÁVELEle precisa ser acessado por qualquer tipo de meio de acesso:robôs, dispositivos, pessoas etc
A INFORMAÇÃO ÉREUTILIZÁVELQuando a informação é publicada na web, ela precisa serreutilizável e acessível.
AMPLEXOSMuito Obrigado!DIEGO EIS@diegoeis@tableless http://tableless.com.br/
A verdadeira semântica do HTML
A verdadeira semântica do HTML
A verdadeira semântica do HTML
Upcoming SlideShare
Loading in...5
×

A verdadeira semântica do HTML

14,564

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
50 Likes
Statistics
Notes
No Downloads
Views
Total Views
14,564
On Slideshare
0
From Embeds
0
Number of Embeds
43
Actions
Shares
0
Downloads
211
Comments
4
Likes
50
Embeds 0
No embeds

No notes for slide

Transcript of "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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×