A verdadeira semântica do HTML

A S E M Â N T I C A D O H T M Li d e n t i f i c a ç ã o , s i g n i f i c a d o e o r g a n i z a ç ã o

DIEGO EIS@diegoeis @tableless

http://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çã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. ;-)

COMO ORGANIZAMOS A INFORMAÇÃ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 se perguntar isso.

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

H I P E R T E X T OI n f o r m a ç ã o o r g a n i z a d a n ã o l i n e a r m e n t e .

L e m b r a d a e n c i c l o p é d i a ?

Vannevar Bush

MAMÍFERO

é um

é um

tem PÊLO

URSO

tem

BALEIA

é um

ÁGUA vive na

é um

PEIXE vive na

ANIMAL

é um

VÉRTEBRA

tem

GATOtem

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

M A R C A Ç Ã OM a r c a r p a r a d a r s i g n i f i c a d o .

SEMÂNTICASignificado da informação.

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

A ESTRUTURA IMPORTASabemos o significado dos elementos, mas o local que esse conteú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#cabecalho

div#rodape

div#sidebar div#content div#sidebar

div

div

div div div

AS NOVAS TAGSA estrutura agora tem um significado semantico, influenciando na importância do seu conteúdo.

header#cabecalho

footer#rodape

aside#sidebar article#content aside#sidebar

header

footer

aside 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 como entender do que se trata o conteúdo.

M I C R O D A T AM e l h o r a n d o a s e m â n t i c a p a r a a s m á q u i n a s .

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

<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 DAS MICRO INFORMAÇÕESMicrodatas melhoram a detecção de micro informações nos conteú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 seres humanos.

HTML NASCEU PARA SER PORTÁ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 ser reutilizável e acessível.

AMPLEXOSMuito Obrigado!

DIEGO EIS@diegoeis@tableless http://tableless.com.br/