Slide 1

Slide 1 text

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/

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

E O QUE É INFORMAÇÃO? É o resultado do processamento, manipulação e organização de dados, de tal forma que represente uma modiﬁcaçã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. ;-)

Slide 5

Slide 5 text

COMO ORGANIZAMOS A INFORMAÇÃO? Existem duas formas básicas: linear ou não linear. Como assim, Bial?

Slide 6

Slide 6 text

FORMA LINEAR Como um livro, por exemplo.

Slide 7

Slide 7 text

NÃO LINEAR Como uma enciclopédia.

Slide 8

Slide 8 text

PARA QUE SERVE O HTML? Parece básico mas eu acho que quase ninguém parou para se perguntar isso.

Slide 9

Slide 9 text

LINGUAGEM DE MARCAÇÃO DE HIPERTEXTO Preste atenção nessas duas palavras: Hipertexto e Marcação.

Slide 10

Slide 10 text

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 ?

Slide 11

Slide 11 text

Vannevar Bush

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

OS LINKS ORGANIZAM A WEB Mas eles organizam o todo. Apenas os caminhos.

Slide 16

Slide 16 text

MARCAÇÃO Mar c ar p ar a d ar s ig n if ic ad o .

Slide 17

Slide 17 text

SEMÂNTICA Signiﬁcado da informação.

Slide 18

Slide 18 text

título

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis, orci eu sodales tempor, augue velit pretium nunc, quis scelerisque sem velit vel.

Slide 19

Slide 19 text

A ESTRUTURA IMPORTA Sabemos o signiﬁcado dos elementos, mas o local que esse conteúdo se encontra diz muita coisa.

Slide 20

Slide 20 text

título

Slide 21

Slide 21 text

PARA QUE SERVE O DIV? Essa é fácil. Responde aí vai...

Slide 22

Slide 22 text

QUAL A SEMÂNTICA DO DIV? Agora eu quero ver alguém responder...

Slide 23

Slide 23 text

NENHUMA O div não tem função semântica NENHUMA!

Slide 24

Slide 24 text

div#cabecalho div#rodape div#sidebar div#content div#sidebar

Slide 25

Slide 25 text

div div div div div

Slide 26

Slide 26 text

AS NOVAS TAGS A estrutura agora tem um signiﬁcado semantico, influenciando na importância do seu conteúdo.

Slide 27

Slide 27 text

header#cabecalho footer#rodape aside#sidebar article#content aside#sidebar

Slide 28

Slide 28 text

header footer aside article aside

Slide 29

Slide 29 text

ESTRUTURAÇÃO SEMÂNTICA Agora sabemos exatamente do que se trata cada conteúdo.

Slide 30

Slide 30 text

MAS... Sabemos o que é cada elemento, mas ainda não temos como entender do que se trata o conteúdo.

Slide 31

Slide 31 text

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 .

Slide 32

Slide 32 text

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 [email protected]. name jobTitle URL worksFor email nacionality

Slide 33

Slide 33 text

Diego Eis brasileiro Locaweb Coordenador Tableless diego@tableless... MICRODATA

Slide 34

Slide 34 text

ESTENDE O SIGNIFICADO DAS MICRO INFORMAÇÕES Microdatas melhoram a detecção de micro informações nos conteúdos do seu website.

Slide 35

Slide 35 text

ESCREVA BOM CÓDIGO Código bom é código com signiﬁcado.

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

HTML NASCEU PARA SER PORTÁVEL Ele precisa ser acessado por qualquer tipo de meio de acesso: robôs, dispositivos, pessoas etc

Slide 38

Slide 38 text

A INFORMAÇÃO É REUTILIZÁVEL Quando a informação é publicada na web, ela precisa ser reutilizável e acessível.

Slide 39

Slide 39 text

AMPLEXOS Muito Obrigado! DIEGO EIS @diegoeis @tableless http://tableless.com.br/