Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT

LIÇÕES PRÁTICAS
DE

SEMÂNTICA
COM

H T M L 55
HT L
HTML5pt.org
d 3 novembro 2011

André Luís c
@andr3 andre-filipe-luis@telecom.pt b

OH HAI!

@andr3 http://id.andr3.net
me@andr3.net
andre-ﬁlipe-luis@telecom.pt

andr3.net
dailyphotowall.net
igive.sapo.pt
mobifeeds.net

OH HAI!

@andr3 http://id.andr3.net
Departamento de
Qualidade & Usabilidade
do SAPO
http://ux.sapo.pt

OH HAI!

mais em http://slideshare.net/andr3
Atalho: http://33om.sl.pt

Agenda

1 Semântica: O que é e porque é
importante?

2 A web semântica nos tempos
de “antigamente”

3 No admirável mundo novo
do HTML5

Semântica:
O que é & porque é importante?

Semântica: O que é & porque é importante?

Semântica subst. fem.
Estudo do significado das palavras.


Web Semântica?


Web Semântica?

http://id.sapo.pt/andr3


Web Semântica?

Uma pessoa!


Web Semântica?

1x <div>,
1x <h1>,
http://id.sapo.pt/andr3 3x <p>,
1x <a>...
Uma pessoa!


Web Semântica?

Uma pessoa!

Try again...


Web Semântica?

1x Pessoa!
Uma pessoa!

A web semântica nos
tempos de antigamente?

A web semântica nos tempos de antigamente?

HTML 4 XHTML 1.0


HTML 4 XHTML 1.0

Desenhados para documentos hipertexto.


HTML 4 XHTML 1.0

Desenhados para documentos hipertexto.

abbr acronym address applet area b base basefont
do big blockquote body br button caption center cite
ode col colgroup dd del dfn dir div dl dt em ﬁeldset
nt form frame frameset h1 h2 h3 h4 h5 h6 head hr
ml i iframe img input ins isindex kbd label legend l
link map menu meta noframes noscript object ol


CIRCA 2004

index.html

model.xml
(RDF)


CIRCA 2004

index.html

model.xml
(RDF)
CIRCA 2005

index.html


CIRCA 2004

index.html

model.xml
(RDF)
CIRCA 2005

RDFa
index.html RDF-in-attributes


http://microformats.org



<div>
<h1>André Luís</h1>
<p>Lisboa, Portugal</p>
<p>
<a href=“mailto:me@andr3.net”>
me@andr3.net
</a>
</p>
<p>web nerd.</p>
</div>



<div class=“vcard”>
<h1 class=“fn”>André Luís</h1>
<p class=“adr”>Lisboa, Portugal</p>
<p>
<a class=“email” href=“mailto:me@andr3.net”>
me@andr3.net
</a>
</p>
<p class=“note”>web nerd.</p>
</div>



Número de formatos limitado, são criados
pela 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.


RDFa
RDF-in-attributes
http://www.w3.org/TR/xhtml-rdfa-primer/


RDFa
RDF-in-attributes

<div>

<h1>André Luís</h1>
<p>Lisboa, Portugal</p>
<p>
<a href=“mailto:me@andr3.net”>
me@andr3.net
</a>
</p>
<p>web nerd.</p>
</div>


RDFa
RDF-in-attributes

<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:me@andr3.net”>
me@andr3.net
</a>
</p>
<p property=“v:NOTE”>web nerd.</p>
</div>


RDFa
RDF-in-attributes

Inﬁnitos 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/

No admirável
mundo novo do HTML5!

Copyright © 2000-2011 Berlin Wallpaper, Inc. The Jetsons are ©, ® & ™ by Hanna-Barbera Productions, Inc.

No admirável mundo novo do HTML5!

Semântica no HTML5
Novos elementos estruturais

article aside audio canvas data
datalist details eventsource
ﬁgcaption ﬁgure footer header
mark meter nav progress
section source time track video

Lição nº1 Elementosnomes!
Chamar as coisas pelos
estruturais

<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
<time datetime="2011-11-03T18:55:42"> mudou a
3 de novembro 18:55 especificação e
removeu o
</time>
elemento <time>
e o atributo
@pubdate nos
<article>.
Introduziu um
<data value=“...”>.

<aside>, <ﬁgure>
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.

<aside>, <ﬁgure>
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>

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

Leitura recomendada
Livro “HTML5 for Web Designers” do Jeremy Keith em versão HTML
http://html5forwebdesigners.com
Documento W3C com diferenças entre o HTML4 & HTML5
pelo Anne & Simon Pieters:
http://www.w3.org/TR/html5-diff/#new-elements

Lição nº2 Acesso com browsers antigos
Compatibilidade
universal

Aplicar estilo a elementos novos:
<section class=“noticias”></section>

Compatibilidade
universal

Falha em <section class=“noticias”></section>

IE 6, 7 & 8 section.noticias { ... }

Compatibilidade
universal



IE 6, 7 & 8 HTML5 shiv do Remy Sharp (@rem)
sem javascript http://code.google.com/p/html5shiv/

Compatibilidade
universal



IE 6, 7 & 8 HTML5 shiv do Remy Sharp (@rem)
sem javascript http://code.google.com/p/html5shiv/

nenhum <div class=“html5-section”>
<section>
</section>
</div>
.html5-section { ... }


Semântica no HTML5
Distinguir semântica de dados auxiliares.

data-_____


Semântica no HTML5

<p data-_____
data-zone=“logotipo”> ...


Semântica no HTML5

<p data-_____

Interessa a
alguém para
além de nós?


Semântica no HTML5

<p data-_____

Interessa a
alguém para Meh! Não...
além de nós?


Semântica no HTML5

<p data-_____

Interessa a
Então são dados Meh! Não...
alguém para
auxiliares... data-*!
além de nós?

Lição nº3 Aproveitarmulti-facetada!
A sua utilidade é sempre
os metadados

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);
}

Então e os dados que
podem interessar a outros?

article aside audio canvas data datalist details
eventsource figcaption figure footer header
mark meter nav progress section source time
track video
a abbr acronym address applet area b base
Então e os dados que
basefont podem interessar a outros? button
bdo big blockquote body br
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

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

John Allsopp
in http://www.alistapart.com/articles/semanticsinhtml5

“Nósdon’tprecisamos de adicionar
“We não need to add
termos específicos ao vocabulário
specific terms to the
do HTML, nósHTML, we de
vocabulary of precisamos
adicionar um mecanismo que
need to add a mechanism
permita quesemanticsemântica seja
that allows riqueza
adicionada ao documento
richness to be added to a
conforme seja precisa.”
document as required.”

John Allsopp
in http://www.alistapart.com/articles/semanticsinhtml5


Microdata
Mecanismo que permite
embeber dados legíveis

tes
ibu
por máquinas em

attr
documentos de HTML5.

Fa
n-
F-i
RD
RD
Extensível por natureza e
um pouco mais simples
que o RDFa.

Pares chave = “valor”.

Microdata: Passo-a-passo
Lição nº4 É fixar e pronto!


1 Demarcar o item com itemscope.

<div itemscope> ...



2 Declarar o tipo (URL) com itemtype.

<div itemscope itemtype=“http://data-vocabulary.org/Person”> ...



2 Declarar o tipo (URL) com itemtype.

3 Identificar os valores de cada chave com itemprop.
itemscope> ...
<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>...


Microdata
http://www.w3.org/TR/microdata/

<div itemscope
itemtype=“http://data-vocabulary.org/Person”>
<h1 itemprop=“name”>André Luís</h1>
<p><a itemprop=“email” href=“mailto:me@andr3.net”>
me@andr3.net
</a>
</p>
<p itemprop=“note” >web nerd.</p>
</div>

Qualquer um pode criar
e estender um vocabulário...

...mas quais posso
ou devo usar?


Microdata: Quais usar?

Livros, filmes, receitas,
Prog. de TV, Eventos,
Organizações, Pessoas,
Lugares, etc.

Google, Microsoft & Yahoo! lançaram o Schema.org
http://schema.org/



Livros, filmes, receitas,
Prog. de TV, Eventos,
Organizações, Pessoas,
Lugares, etc.

Google, Microsoft & Yahoo! lançaram o Schema.org
http://schema.org/
Um ajudante para nos facilitar a vida... (pela empresa Sitening LLC)
http://schema-creator.org/


1. Microdata

2. Microformatos

3. RDFa

http://www.google.com/webmasters/tools/richsnippets


http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=146646

item
pro
p


http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=146646

Lição nº5 Escolher o formato ideal
Purismo fica à porta.

Microdata vs microformatos vs RDFa
Um formato pode ser mais correto
mas o que conta é a sua utilização
no dia-a-dia.


semântica Microdata
RDFa RDFa
1.1

microformatos dados
documentos
HTML

dificuldade

LIÇÕES PRÁTICAS
FIM DE

SEMÂNTICA
COM

HTML5
Download PDF
http://talks.andr3.net/2011/html5pt/semantics.pdf

Download Keynote (mac)
http://talks.andr3.net/2011/html5pt/semantics.key

HTML5pt.org
d 3 novembro 2011

André Luís c
@andr3 andre-filipe-luis@telecom.pt b

Créditos & Tipografia
Gotham American Typewriter
Gotham Rounded Chaparral Pro
Gotham Condensed

Fundação Calouste-Gulbenkian (biblarte no Flickr)
http://www.flickr.com/photos/biblarte/2709389469/
C
@ 2000-2011 All rights reserved to Berlin Wallpaper, Inc.
http:/ /www.berlinwallpaper.com/PrissPrints/Jetsons-Giant-Wall-Decal.htm
Used excerpt without permission.

Drew McLellan (drewm no Flickr)
http://www.flickr.com/photos/drewm/4732738890/
C
Katie Harries (kharied no Flickr)
http://www.flickr.com/photos/kharied/4177969736/
C

Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT

Ähnlich wie Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT (20)

Mehr von André Luís

Mehr von André Luís (11)

Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT