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 [email protected]

mailto:[email protected]


OH HAI!

http://id.andr3.net@[email protected]@telecom.pt

mobifeeds.net

igive.sapo.pt

dailyphotowall.net

andr3.net

http://id.andr3.net

http://id.andr3.net





OH HAI!

http://id.andr3.net@andr3Departamento de Qualidade & Usabilidadedo SAPOhttp://ux.sapo.pt

http://id.andr3.net

http://id.andr3.net

http://ux.sapo.pt

http://ux.sapo.pt

OH HAI!

OH HAI!

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

http://slideshare.net/andr3




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

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!http://id.sapo.pt/andr3





Web Semântica?

Web Semântica?


Uma pessoa!

1x <div>,1x <h1>,3x <p>,1x <a>...




Web Semântica?


1x <div>,1x <h1>,3x <p>,1x <a>...




Web Semântica?


Try again...




Web Semântica?


1x Pessoa!












A web semântica nostempos 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


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


HTML 4 XHTML 1.0











index.html

model.xml(RDF)

2004CIRCA


index.html

model.xml(RDF)

2004

2005

index.html

CIRCA

CIRCA


index.html

model.xml(RDF)

2004

RDFaRDF-in-attributes

2005

index.html

CIRCA

CIRCA

http://microformats.org





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









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









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://www.w3.org/TR/xhtml-rdfa-primer/



http://www.w3.org/TR/xhtml-rdfa-primer/%20



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










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

http://www.w3.org/2001/vcard-rdf/3.0#

http://www.w3.org/2001/vcard-rdf/3.0#













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/








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.





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

http://33.em.sl.pt

http://33.em.sl.pt

http://html5forwebdesigners.com

http://html5forwebdesigners.com

Acesso universalLição nº2 Compatibilidade com browsers antigos

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


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/

http://code.google.com/p/html5shiv/





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


Semântica no HTML5Distinguir semântica de dados auxiliares.

data-_____



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

data-_____




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

data-_____





Meh! Não...

data-_____





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

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


RDFa

RDF-

in-at

tribu

tes

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

<div itemscope> ...

Demarcar o item com itemscope.1



Declarar o tipo (URL) com itemtype.2

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


http://data-vocabulary.org/Person


Microdata: Passo-a-passo

<div itemscope> ...


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!



http://id.andr3.net

http://id.andr3.net

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

<h1 itemprop=“name”>André Luís</h1><p><a itemprop=“email” href=“mailto:[email protected]”>

[email protected]</a>

</p><p itemprop=“note” >web nerd.</p>

</div>


Microdatahttp://www.w3.org/TR/microdata/







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

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



Qualquer um pode criare estender um vocabulário...

...mas quais possoou devo usar?

Microdata: Quais usar?


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

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

http://schema.org/

http://schema.org/



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/

http://schema.org/

http://schema.org/

http://schema-creator.org

http://schema-creator.org



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

1. Microdata

2. Microformatos

3. RDFa





itemprop

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


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

http://www.flickr.com/photos/biblarte/2709389469/



http://www.berlinwallpaper.com/PrissPrints/Jetsons-Giant-Wall-Decal.htm




http://www.flickr.com/photos/drewm/4732738890/



http://www.flickr.com/photos/kharied/4177969736/



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

Documents

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