Transferir como PDF, PPTX
Carregado porDiego Eis
A verdadeira semântica do HTML
O documento discute a semântica do HTML, explicando que a linguagem de marcação foi projetada para dar significado à informação na web de forma a torná-la acessível e reutilizável por máquinas e humanos. A estruturação semântica do conteúdo é importante para que se entenda exatamente do que se trata cada seção, e elementos como microdados melhoram ainda mais a semântica para as máquinas.
Mais conteúdo relacionado
Semelhante a A verdadeira semântica do HTML
A verdadeira semântica do HTML
- 1. A SEMÂNTICA DOHTML 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 SERVEA 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? Existemduas formas básicas: linear ou não linear. Como assim, Bial?
- 6. FORMA LINEAR Como umlivro, por exemplo.
- 7. NÃO LINEAR Como umaenciclopédia.
- 8. PARA QUE SERVEO HTML? Parece básico mas eu acho que quase ninguém parou para se perguntar isso.
- 9. LINGUAGEM DE MARCAÇÃO DEHIPERTEXTO Preste atenção nessas duas palavras: Hipertexto e Marcação.
- 10. HIPERTEXTO I n fo 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.
- 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 ORGANIZAMA WEB Mas eles organizam o todo. Apenas os caminhos.
- 16. MARCAÇÃO Mar c arp ar a d ar s ig n if ic ad o .
- 17.
- 18. <h1> </h1>título <p> </p> Lorem ipsumdolor sit amet, consectetur adipiscing elit. Duis lobortis, orci eu sodales tempor, augue velit pretium nunc, quis scelerisque sem velit vel.
- 19. A ESTRUTURA IMPORTA Sabemoso 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 SERVEO DIV? Essa é fácil. Responde aí vai...
- 22. QUAL A SEMÂNTICADO DIV? Agora eu quero ver alguém responder...
- 23. NENHUMA O div nãotem função semântica NENHUMA!
- 24.
- 25.
- 26. AS NOVAS TAGS Aestrutura agora tem um significado semantico, influenciando na importância do seu conteúdo.
- 27.
- 28.
- 29. ESTRUTURAÇÃO SEMÂNTICA Agora sabemosexatamente 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 or an d o a s e mân t ic a p ar a as máq u in as .
- 32. Olá, eu mechamo 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> <strongitemprop="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 SIGNIFICADODAS MICRO INFORMAÇÕES Microdatas melhoram a detecção de micro informações nos conteúdos do seu website.
- 35. ESCREVA BOM CÓDIGO Códigobom é código com significado.
- 36. ACESSIBILIDADE Pense sempre emacessibilidade. Essa é a metade do caminho. Um sistema/site acessível é visível para máquinas e seres humanos.
- 37. HTML NASCEU PARASER PORTÁVEL Ele precisa ser acessado por qualquer tipo de meio de acesso: robôs, dispositivos, pessoas etc
- 38. A INFORMAÇÃO É REUTILIZÁVEL Quandoa informação é publicada na web, ela precisa ser reutilizável e acessível.
- 39. AMPLEXOS Muito Obrigado! DIEGO EIS @diegoeis @tablelesshttp://tableless.com.br/