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

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 andre-filipe-luis@telecom.pt

OH HAI!

http://id.andr3.net@andr3me@andr3.netandre-filipe-luis@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:me@andr3.net”>me@andr3.net

</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:me@andr3.net”>me@andr3.net

</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:me@andr3.net”>me@andr3.net

</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:me@andr3.net”>me@andr3.net

</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:me@andr3.net”>me@andr3.net

</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:me@andr3.net”>me@andr3.net

</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:me@andr3.net”>

me@andr3.net</a>

</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 andre-filipe-luis@telecom.pt

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