O documento discute a organização não linear da informação na web, como a hipertextualidade e marcação semântica melhoram a estrutura e significado dos dados. Explica como elementos como <header>, <nav>, <section> e <article> adicionam semântica às páginas e como microdados podem melhorar a detecção de informações.

1. identificação, significado e organização

3. Existem duas formas básicas: linear e não linear.

4. Como um livro, por exemplo, ele tem começo, meio e fim.

5. Como uma enciclopédia, ou também como o seu cérebro.

6. Alguém já parou para se perguntar isso?

7. Preste atenção nessas duas palavras: Hipertexto e Marcação.

8. Informação organizada não linearmente
Lembra da enciclopédia?

10. Antigamente a web tinha um problema com associar documentos,
hoje, esse problema foi resolvido, agora precisamos associar os dados
desses documentos.

11. Mas apenas os caminhos. E os dados?

12. Não apenas entender, mas reutilizar, para melhorar a qualidade da
informação que consumimos.

13. Marcar para dar significado

14. significado da marcação

16. Sabemos o significado do elemento, mas o local que esse conteúdo se
encontra diz muita coisa.

18. Essa é fácil de responder…

19. Agora eu quero ver alguém responder…

20. Simplesmente, o DIV não tem função semântica nenhuma.

23. A estrutura agora tem um significado semântico, influenciando na
importância do seu conteúdo.

27. ● <header> define o cabeçalho;
● <nav> define os menus;
● <section> define uma sessão do layout em um determinado
elemento, ele pode conter um <header> e um <footer>;
● <main> define o conteúdo principal daquela página;

28. ● <aside> todo elemento que tem ligação com o conteúdo da <main>, pode
ser um sidebar lateral ou um banner, menu, entre outros;
● <article> define uma parte da página que tem uma composição de
elementos similares (textos, forms), pode ser um post de um blog;
● <footer> define o rodapé;

30. Agora sabemos exatamente do que se trata cada conteúdo.

31. Sabemos o que é cada conteúdo, mas ainda não sabemos do que se trata cada
conteúdo.

32. melhorando a semântica para as máquinas

33. Olá meu nome é Alisson, sou brasileiro, trabalho na Inovadora Sistemas como
programador da equipe do G-MUS e do G-MAS. Gosto de postar minhas coisas no github
e você pode entrar em contato comigo pelo e-mail alissonschneiderr@gmail.com
name
nacionality
jobTitle
worksFor
email
URL

34. ● <strong itemprop=”name”>Alisson Schneider</strong>
● <strong itemprop=”nacionality”>brasileiro</strong>
● <strong itemprop=”worksFor”>Inovadora Sistemas</strong>
● <a href=”#” itemprop=”url”>github</a>
● <a href=”#” itemprop=”email”>alissonschneiderr@gmail.com</strong>

35. Microdatas melhora a detecção de micro informações no conteúdo da sua
aplicação.

36. Código bom é código com significado.

37. Pense sempre em acessibilidade. Essa é a metade do caminho.
Um sistema/site acessível é visível para máquinas e seres humanos.

38. Ele precisa ser acessado por qualquer tipo de meio de acesso.
Robôs, dispositivos, pessoas, etc.

39. Quando a informação é publicada na web, ela precisa ser reutilizável e acessível.

42. não perca os próximos episódios, aqui no
globo repórter