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.

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/
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
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
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/