LIÇÕES PRÁTICAS
SEMÂNTICA
H T M L 5André Luís
DE
COM
cb
HTML5pt.org 3 novembro 2011
H T M L 5d
@andr3 [email protected]
OH HAI!
http://id.andr3.net@[email protected]@telecom.pt
mobifeeds.net
igive.sapo.pt
dailyphotowall.net
andr3.net
OH HAI!
http://id.andr3.net@andr3Departamento de Qualidade & Usabilidadedo SAPOhttp://ux.sapo.pt
OH HAI!
OH HAI!
OH HAI!
mais em http://slideshare.net/andr3Atalho: http://33om.sl.pt
Agenda
Agenda
Semântica: O que é e porque é importante?
A web semântica nos temposde “antigamente”
No admirável mundo novodo HTML5
1
2
3
Agenda
Sem
ântic
a
Agenda
Sem
ântic
a
Semântica:O que é & porque é importante?
Semântica: O que é & porque é importante?
Semântica subst. fem.
Estudo do significado das palavras.
Semântica: O que é & porque é importante?
Web Semântica?
Web Semântica?
Semântica: O que é & porque é importante?
http://id.sapo.pt/andr3
Web Semântica?
Semântica: O que é & porque é importante?
http://id.sapo.pt/andr3
Web Semântica?
Semântica: O que é & porque é importante?
http://id.sapo.pt/andr3
Web Semântica?
Semântica: O que é & porque é importante?
Uma pessoa!http://id.sapo.pt/andr3
Semântica: O que é & porque é importante?
Uma pessoa!http://id.sapo.pt/andr3
Web Semântica?
Web Semântica?
Semântica: O que é & porque é importante?
Uma pessoa!
1x <div>,1x <h1>,3x <p>,1x <a>...
http://id.sapo.pt/andr3
Web Semântica?
Semântica: O que é & porque é importante?
1x <div>,1x <h1>,3x <p>,1x <a>...
Uma pessoa!http://id.sapo.pt/andr3
Web Semântica?
Semântica: O que é & porque é importante?
1x <div>,1x <h1>,3x <p>,1x <a>...
Uma pessoa!http://id.sapo.pt/andr3
Web Semântica?
Semântica: O que é & porque é importante?
1x <div>,1x <h1>,3x <p>,1x <a>...
Uma pessoa!http://id.sapo.pt/andr3
Web Semântica?
Semântica: O que é & porque é importante?
Try again...
Uma pessoa!http://id.sapo.pt/andr3
Web Semântica?
Semântica: O que é & porque é importante?
1x Pessoa!
Uma pessoa!http://id.sapo.pt/andr3
A web semântica nostempos de antigamente?
A web semântica nos tempos de antigamente?
HTML 4 XHTML 1.0
A web semântica nos tempos de antigamente?
HTML 4 XHTML 1.0
Desenhados para documentos hipertexto.
A web semântica nos tempos de antigamente?
HTML 4 XHTML 1.0
Desenhados para documentos hipertexto.
a abbr acronym address applet area b base basefont bdo big blockquote body br button caption center cite code col colgroup dd del dfn dir div dl dt em fieldset
font form frame frameset h1 h2 h3 h4 h5 h6 head hr html i iframe img input ins isindex kbd label legend li
link map menu meta noframes noscript object ol optgroup option p param pre q s samp script select
small span strike strong style sub sup table tbody td textarea tfoot th thead title tr tt u ul var
A web semântica nos tempos de antigamente?
HTML 4 XHTML 1.0
Desenhados para documentos hipertexto.
a abbr acronym address applet area b base basefont bdo big blockquote body br button caption center cite code col colgroup dd del dfn dir div dl dt em fieldset
font form frame frameset h1 h2 h3 h4 h5 h6 head hr html i iframe img input ins isindex kbd label legend li
link map menu meta noframes noscript object ol optgroup option p param pre q s samp script select
small span strike strong style sub sup table tbody td textarea tfoot th thead title tr tt u ul var
a abbr acronym address applet area b base basefont bdo big blockquote body br button caption center cite code col colgroup dd del dfn dir div dl dt em fieldset
font form frame frameset h1 h2 h3 h4 h5 h6 head hr html i iframe img input ins isindex kbd label legend li
link map menu meta noframes noscript object ol optgroup option p param pre q s samp script select
small span strike strong style sub sup table tbody td textarea tfoot th thead title tr tt u ul var
A web semântica nos tempos de antigamente?
index.html
model.xml(RDF)
2004CIRCA
A web semântica nos tempos de antigamente?
index.html
model.xml(RDF)
2004
2005
index.html
CIRCA
CIRCA
A web semântica nos tempos de antigamente?
index.html
model.xml(RDF)
2004
2005
index.html
CIRCA
CIRCA
A web semântica nos tempos de antigamente?
index.html
model.xml(RDF)
2004
RDFaRDF-in-attributes
2005
index.html
CIRCA
CIRCA
http://microformats.org
A web semântica nos tempos de antigamente?
A web semântica nos tempos de antigamente?
<div><h1>André Luís</h1><p>Lisboa, Portugal</p><p>
<a href=“mailto:[email protected]”>[email protected]
</a></p><p>web nerd.</p>
</div>
http://microformats.org
A web semântica nos tempos de antigamente?
<div class=“vcard”><h1 class=“fn”>André Luís</h1><p class=“adr”>Lisboa, Portugal</p><p>
<a class=“email” href=“mailto:[email protected]”>[email protected]
</a></p><p class=“note”>web nerd.</p>
</div>
http://microformats.org
A web semântica nos tempos de antigamente?
<div class=“vcard”><h1 class=“fn”>André Luís</h1><p class=“adr”>Lisboa, Portugal</p><p>
<a class=“email” href=“mailto:[email protected]”>[email protected]
</a></p><p class=“note”>web nerd.</p>
</div>
http://microformats.org
A web semântica nos tempos de antigamente?
Número de formatos limitado, são criadospela comunidade.
Usados por motores de busca &plugins de browsers para melhorar a experiência.
Baseiam-se em atributos omnipresentes.
Fáceis de publicar, fácil de consumir.
http://microformats.org
RDFaRDF-in-attributes
A web semântica nos tempos de antigamente?
http://www.w3.org/TR/xhtml-rdfa-primer/
A web semântica nos tempos de antigamente?
<div>
<h1>André Luís</h1><p>Lisboa, Portugal</p><p>
<a href=“mailto:[email protected]”>[email protected]
</a></p><p>web nerd.</p>
</div>
RDFaRDF-in-attributeshttp://www.w3.org/TR/xhtml-rdfa-primer/
A web semântica nos tempos de antigamente?
<div xmlns:v="http://www.w3.org/2001/vcard-rdf/3.0#" about=“http://id.sapo.pt/andr3” typeof=“v:VCard”>
<h1 property=“v:FN”>André Luís</h1><p role=“v:ADR”>Lisboa, Portugal</p><p>
<a rel=“v:EMAIL” href=“mailto:[email protected]”>[email protected]
</a></p><p property=“v:NOTE”>web nerd.</p>
</div>
RDFaRDF-in-attributeshttp://www.w3.org/TR/xhtml-rdfa-primer/
A web semântica nos tempos de antigamente?
<div xmlns:v="http://www.w3.org/2001/vcard-rdf/3.0#" about=“http://id.sapo.pt/andr3” typeof=“v:VCard”>
<h1 property=“v:FN”>André Luís</h1><p role=“v:ADR”>Lisboa, Portugal</p><p>
<a rel=“v:EMAIL” href=“mailto:[email protected]”>[email protected]
</a></p><p property=“v:NOTE”>web nerd.</p>
</div>
RDFaRDF-in-attributeshttp://www.w3.org/TR/xhtml-rdfa-primer/
A web semântica nos tempos de antigamente?
RDFaRDF-in-attributes
Infinitos formatos... qualquer um pode escrever um vocabulário (ex: OpenGraph do Facebook).
Usados por motores de busca &plugins de browsers para melhorar a experiência.
Baseiam-se em novos atributos: namespaces em XHTML, novos DTD para HTML.
Mais complexos de publicar & consumir.
http://www.alistapart.com/articles/introduction-to-rdfa/
http://www.w3.org/TR/xhtml-rdfa-primer/
88mph
Copyright © 2000-2011 Berlin Wallpaper, Inc. The Jetsons are ©, ® & ™ by Hanna-Barbera Productions, Inc.
Copyright © 2000-2011 Berlin Wallpaper, Inc. The Jetsons are ©, ® & ™ by Hanna-Barbera Productions, Inc.
No admirávelmundo novo do HTML5!
No admirável mundo novo do HTML5!
Semântica no HTML5Novos elementos estruturais
article aside audio canvas data datalist details eventsource
figcaption figure footer header mark meter nav progress
section source time track video
Elementos estruturaisLição nº1 Chamar as coisas pelos nomes!
<section>Serve para agrupar conteúdo e elementos de um mesmo tema.
<article>Identifica porções de artigos independentes, items de conteúdo portável.
Também deve ser aplicado em widgets.
<nav>Demarca informação de navegação.
Listas de links para secções de conteúdo importante são claros membros de uma <nav>.
Nem todas as listas de links justificam uma <nav>.
<time> vs. <data>Esta semana o Ian Hickson mudou a especificação e removeu o elemento <time> e o atributo @pubdate nos <article>.
Introduziu um <data value=“...”>.
<time> vs. <data>Esta semana o Ian Hickson mudou a especificação e removeu o elemento <time> e o atributo @pubdate nos <article>.
Introduziu um <data value=“...”>.
<time datetime="2011-11-03T18:55:42">3 de novembro 18:55
</time>
<aside>, <figure>Conteúdo à parte do principal. Notas, referências, conteúdo relacionado são bons candidatos.
<figure> aplica-se, por ex., às imagens usadas na wikipedia.
<mark>, <b>, <i>, <u>, <s>Elementos de UI sem qualquer valor semântico.mark: keyword pesquisa. b: negrito. i: voz alternativa. u: anotação,. s: irrelevante.
<header>, <footer>, <small><header> & <footer> referem-se à importância da informação no seu contexto. footer pode até estar antes do <header>.
<small> mudou de significado para “letra pequena” (contratos).
<aside>, <figure>Conteúdo à parte do principal. Notas, referências, conteúdo relacionado são bons candidatos.
<figure> aplica-se, por ex., às imagens usadas na wikipedia.
<mark>, <b>, <i>, <u>, <s>Elementos de UI sem qualquer valor semântico.mark: keyword pesquisa. b: negrito. i: voz alternativa. u: anotação,. s: irrelevante.
<header>, <footer>, <small><header> & <footer> referem-se à importância da informação no seu contexto. footer pode até estar antes do <header>.
<small> mudou de significado para “letra pequena” (contratos).
<mark>, <b>, <i>, <u>, <s>Elementos de UI sem qualquer valor semântico.mark: keyword pesquisa. b: negrito. i: voz alternativa. u: anotação,. s: irrelevante.
<header>, <footer>, <small><header> & <footer> referem-se à importância da informação no seu contexto. footer pode até estar antes do <header>.
<small> mudou de significado para “letra pequena” (contratos).
<mark>, <b>, <i>, <u>, <s>Elementos de UI sem qualquer valor semântico.mark: keyword pesquisa. b: negrito. i: voz alternativa. u: anotação,. s: irrelevante.
<header>, <footer>, <small><header> & <footer> referem-se à importância da informação no seu contexto. footer pode até estar antes do <header>.
<small> mudou de significado para “letra pequena” (contratos).
<mark>, <b>, <i>, <u>, <s>Elementos de UI sem qualquer valor semântico.mark: keyword pesquisa. b: negrito. i: voz alternativa. u: anotação,. s: irrelevante.
Livro “HTML5 for Web Designers” do Jeremy Keith em versão HTMLhttp://html5forwebdesigners.com
Documento W3C com diferenças entre o HTML4 & HTML5 pelo Anne & Simon Pieters:http://www.w3.org/TR/html5-diff/#new-elements
Leitura recomendada
Acesso universalLição nº2 Compatibilidade com browsers antigos
<section class=“noticias”></section>Aplicar estilo a elementos novos:
Acesso universalLição nº2 Compatibilidade com browsers antigos
section.noticias { ... }IE 6, 7 & 8
Falha em <section class=“noticias”></section>Aplicar estilo a elementos novos:
Acesso universalLição nº2 Compatibilidade com browsers antigos
section.noticias { ... }IE 6, 7 & 8
Falha em <section class=“noticias”></section>Aplicar estilo a elementos novos:
IE 6, 7 & 8sem javascript
HTML5 shiv do Remy Sharp (@rem)http://code.google.com/p/html5shiv/
Acesso universalLição nº2 Compatibilidade com browsers antigos
section.noticias { ... }IE 6, 7 & 8
Falha em <section class=“noticias”></section>Aplicar estilo a elementos novos:
IE 6, 7 & 8sem javascript
HTML5 shiv do Remy Sharp (@rem)http://code.google.com/p/html5shiv/
<div class=“html5-section”><section></section>
</div>.html5-section { ... }
nenhum
data-_____
No admirável mundo novo do HTML5!
Semântica no HTML5Distinguir semântica de dados auxiliares.
data-_____
No admirável mundo novo do HTML5!
Semântica no HTML5Distinguir semântica de dados auxiliares.
<p data-zone=“logotipo”> ...
data-_____
No admirável mundo novo do HTML5!
Semântica no HTML5Distinguir semântica de dados auxiliares.
<p data-zone=“logotipo”> ...
Interessa a alguém para além de nós?
data-_____
No admirável mundo novo do HTML5!
Semântica no HTML5Distinguir semântica de dados auxiliares.
<p data-zone=“logotipo”> ...
Interessa a alguém para além de nós?
Meh! Não...
data-_____
No admirável mundo novo do HTML5!
Semântica no HTML5Distinguir semântica de dados auxiliares.
<p data-zone=“logotipo”> ...
Interessa a alguém para além de nós?
Meh! Não...Então são dados auxiliares... data-*!
Aproveitar os metadadosLição nº3 A sua utilidade é sempre multi-facetada!
Aproveitem os metadados como ganchos para o estilo do vosso site.
[data-zone] {border: 1px solid green;
}
[data-zone]:before {content: “Zona ” attr(data-zone);
}
Bookmarklet de debug
Então e os dados quepodem interessar a outros?
Então e os dados quepodem interessar a outros?
article aside audio canvas data datalist details eventsource figcaption figure footer header mark meter nav progress section source time track videoa abbr acronym address applet area b base basefont bdo big blockquote body br button caption center cite code col colgroup dd del dfn dir div dl dt em fieldset font form frame frameset h1 h2 h3 h4 h5 h6 head hr html i iframe img input ins isindex kbd label legend li link map menu meta noframes noscript object ol optgroup option p param pre q s samp script select small span strike strong style sub sup table tbody td textarea tfoot th thead title tr tt u ul var
Em janeiro de 2009...
John Allsopp
John Allsopp
“We don’t need to add specific terms to the vocabulary of HTML, we need to add a mechanism that allows semantic richness to be added to a document as required.”
in http://www.alistapart.com/articles/semanticsinhtml5
John Allsopp
“We don’t need to add specific terms to the vocabulary of HTML, we need to add a mechanism that allows semantic richness to be added to a document as required.”
in http://www.alistapart.com/articles/semanticsinhtml5
“Nós não precisamos de adicionar termos específicos ao vocabulário do HTML, nós precisamos de adicionar um mecanismo que permita que riqueza semântica seja adicionada ao documento conforme seja precisa.”
mMICRODATA
m
MicrodataMecanismo que permite embeber dados legíveis por máquinas em documentos de HTML5.
Extensível por natureza e um pouco mais simples que o RDFa.
Pares chave = “valor”.
No admirável mundo novo do HTML5!
RDFa
RDF-
in-at
tribu
tes
Lição nº4Microdata: Passo-a-passoÉ fixar e pronto!
<div itemscope> ...
Demarcar o item com itemscope.1
Lição nº4Microdata: Passo-a-passoÉ fixar e pronto!
Demarcar o item com itemscope.1
Declarar o tipo (URL) com itemtype.2
<div itemscope itemtype=“http://data-vocabulary.org/Person”> ...
Lição nº4Microdata: Passo-a-passoÉ fixar e pronto!
Microdata: Passo-a-passo
<div itemscope> ...
Demarcar o item com itemscope.1
Declarar o tipo (URL) com itemtype.2
<div itemscope itemtype=“http://data-vocabulary.org/Person”> ...<div itemscope itemtype=“http://data-vocabulary.org/Person”><h1 itemprop=“name”>André Luís</h1><p><a itemprop=“url” href=“http://id.andr3.net/”>Site pessoal</a></p>...
Identificar os valores de cada chave com itemprop.3
Lição nº4 É fixar e pronto!
<div itemscopeitemtype=“http://data-vocabulary.org/Person”>
<h1 itemprop=“name”>André Luís</h1><p><a itemprop=“email” href=“mailto:[email protected]”>
</p><p itemprop=“note” >web nerd.</p>
</div>
No admirável mundo novo do HTML5!
Microdatahttp://www.w3.org/TR/microdata/
Qualquer um pode criare estender um vocabulário...
...mas quais possoou devo usar?
Microdata: Quais usar?
No admirável mundo novo do HTML5!
Google, Microsoft & Yahoo! lançaram o Schema.orghttp://schema.org/
Livros, filmes, receitas, Prog. de TV, Eventos, Organizações, Pessoas, Lugares, etc.
Microdata: Quais usar?
No admirável mundo novo do HTML5!
Google, Microsoft & Yahoo! lançaram o Schema.orghttp://schema.org/
Livros, filmes, receitas, Prog. de TV, Eventos, Organizações, Pessoas, Lugares, etc.
Um ajudante para nos facilitar a vida... (pela empresa Sitening LLC)http://schema-creator.org/
Microdata: Quais usar?
No admirável mundo novo do HTML5!
http://www.google.com/webmasters/tools/richsnippets
1. Microdata
2. Microformatos
3. RDFa
Microdata: Quais usar?
No admirável mundo novo do HTML5!
http://www.google.com/webmasters/tools/richsnippets
1. Microdata
2. Microformatos
3. RDFa
Microdata: Quais usar?
No admirável mundo novo do HTML5!
itemprop
http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=146646
Microdata: Quais usar?
No admirável mundo novo do HTML5!
http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=146646
Escolher o formato idealLição nº5 Purismo fica à porta.
Microdata vs microformatos vs RDFa
Um formato pode ser mais corretomas o que conta é a sua utilizaçãono dia-a-dia.
Para finalizar...
No admirável mundo novo do HTML5!
semântica
dificuldade
RDFa
HTML
microformatos dadosdocumentos
RDFa1.1
Microdata
Obrigado. QUESTÕES?
André Luís cb@andr3 [email protected]
HTML5pt.org 3 novembro 2011d
FIM
Download PDF
Download Keynote (mac)
http://talks.andr3.net/2011/html5pt/semantics.pdf
http://talks.andr3.net/2011/html5pt/semantics.key
LIÇÕES PRÁTICAS
SEMÂNTICA
H T M L 5
DE
COM
Créditos & Tipografia
GothamGotham RoundedGotham Condensed
American TypewriterChaparral Pro
Fundação Calouste-Gulbenkian (biblarte no Flickr)http://www.flickr.com/photos/biblarte/2709389469/
@ 2000-2011 All rights reserved to Berlin Wallpaper, Inc.http://www.berlinwallpaper.com/PrissPrints/Jetsons-Giant-Wall-Decal.htmUsed excerpt without permission.
Drew McLellan (drewm no Flickr)http://www.flickr.com/photos/drewm/4732738890/
C
C
Katie Harries (kharied no Flickr)http://www.flickr.com/photos/kharied/4177969736/C