a verdadeira semântica do html
DESCRIPTION
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
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 [email protected].
name
jobTitle
URL
worksFor
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/