• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
A verdadeira semântica do HTML
 

A verdadeira semântica do HTML

on

  • 12,942 views

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.

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.

Statistics

Views

Total Views
12,942
Views on SlideShare
5,489
Embed Views
7,453

Actions

Likes
45
Downloads
166
Comments
4

40 Embeds 7,453

http://tableless.com.br 4422
http://cloud.feedly.com 1095
http://biblioler.blogs.sapo.pt 1009
http://www.scoop.it 257
http://digg.com 219
http://www.feedspot.com 100
http://ntmsaojose.blogspot.com.br 67
http://reader.aol.com 37
http://alfinete2008.blogspot.pt 36
http://www.goread.io 26
https://twitter.com 25
http://127.0.0.1 22
http://www.ntmsaojose.blogspot.com.br 22
http://myreader.com.br 16
http://feedly.com 12
http://newsblur.com 10
http://flavors.me 10
http://www.linkedin.com 10
http://summary 9
http://ntmsaojose.blogspot.com 9
http://feeds.feedburner.com 5
http://plus.url.google.com 5
http://alfinete2008.blogspot.com 4
http://192.241.204.123 4
http://www.digg.com 3
http://www.plugmasters.com.br 2
http://localhost 2
http://yoleoreader.com 2
http://www.newsblur.com 2
http://www.google.com.br 1
http://alfinete2008.blogspot.mx 1
http://twitter.com 1
http://alfinete2008.blogspot.in 1
http://feedreader.com 1
http://alfinete2008.blogspot.fr 1
http://wusics.com 1
http://feedproxy.google.com 1
http://www.inoreader.com 1
https://www.inoreader.com 1
https://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

14 of 4 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    A verdadeira semântica do HTML A verdadeira semântica do HTML Presentation Transcript

    • 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/
    • 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...
    • 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. ;-)
    • 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 velitpretium nunc, quisscelerisque sem velit vel.
    • 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 chamadoTableless e você pode entrar em contato comigopelo email contato@tableless.com.br.namejobTitleURLworksForemailnacionality
    • <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
    • 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 e sereshumanos.
    • 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/