Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
LIÇÕES PRÁTICAS
                         DE




SEMÂNTICA
                        COM




H T M L 55
HT    L
HTML5pt.org
 ...
OH HAI!


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




   andr3...
OH HAI!


   @andr3                    http://id.andr3.net
   Departamento de
   Qualidade & Usabilidade
   do SAPO
   htt...
OH HAI!
OH HAI!
OH HAI!




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


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

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

3   No ad...
Agenda




Semântica
Agenda




Semântica
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?
Semântica: O que é & porque é importante?


 Web Semântica?




                  http://id.sapo.pt/andr3
Semântica: O que é & porque é importante?


 Web Semântica?




                  http://id.sapo.pt/andr3
Semântica: O que é & porque é importante?


 Web Semântica?




                  http://id.sapo.pt/andr3
Semântica: O que é & porque é importante?


    Web Semântica?




                    http://id.sapo.pt/andr3
Uma pessoa!
Semântica: O que é & porque é importante?


    Web Semântica?




                    http://id.sapo.pt/andr3
Uma pessoa!
Semântica: O que é & porque é importante?


    Web Semântica?




                                              1x <div>,...
Semântica: O que é & porque é importante?


    Web Semântica?




                                              1x <div>,...
Semântica: O que é & porque é importante?


    Web Semântica?




                                              1x <div>,...
Semântica: O que é & porque é importante?


    Web Semântica?




                                              1x <div>,...
Semântica: O que é & porque é importante?


    Web Semântica?




                    http://id.sapo.pt/andr3
Uma pessoa!...
Semântica: O que é & porque é importante?


    Web Semântica?




                                              1x Pessoa...
A web semântica nos
tempos 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 hiperte...
A web semântica nos tempos de antigamente?




   HTML 4                        XHTML 1.0

   Desenhados para documentos h...
A web semântica nos tempos de antigamente?




   HTML 4                        XHTML 1.0

   Desenhados para documentos h...
A web semântica nos tempos de antigamente?


                  CIRCA     2004



               index.html


             ...
A web semântica nos tempos de antigamente?


                  CIRCA     2004



               index.html


             ...
A web semântica nos tempos de antigamente?


                  CIRCA     2004



               index.html


             ...
A web semântica nos tempos de antigamente?


                  CIRCA     2004



               index.html


             ...
A web semântica nos tempos de antigamente?



      http://microformats.org
A web semântica nos tempos de antigamente?



      http://microformats.org



<div>
  <h1>André Luís</h1>
  <p>Lisboa, Po...
A web semântica nos tempos de antigamente?



      http://microformats.org



<div class=“vcard”>
  <h1 class=“fn”>André ...
A web semântica nos tempos de antigamente?



      http://microformats.org



<div class=“vcard”>
  <h1 class=“fn”>André ...
A web semântica nos tempos de antigamente?



      http://microformats.org




Número de formatos limitado, são criados
p...
A web semântica nos tempos de antigamente?

     RDFa
     RDF-in-attributes
     http://www.w3.org/TR/xhtml-rdfa-primer/
A web semântica nos tempos de antigamente?

        RDFa
        RDF-in-attributes
        http://www.w3.org/TR/xhtml-rdfa...
A web semântica nos tempos de antigamente?

     RDFa
     RDF-in-attributes
     http://www.w3.org/TR/xhtml-rdfa-primer/
...
A web semântica nos tempos de antigamente?

     RDFa
     RDF-in-attributes
     http://www.w3.org/TR/xhtml-rdfa-primer/
...
A web semântica nos tempos de antigamente?

      RDFa
      RDF-in-attributes
      http://www.w3.org/TR/xhtml-rdfa-prime...
88mph
Copyright © 2000-2011 Berlin Wallpaper, Inc.   The Jetsons are ©, ® & ™ by Hanna-Barbera Productions, Inc.
No admirável
                            mundo novo do HTML5!




Copyright © 2000-2011 Berlin Wallpaper, Inc.   The Jetso...
No admirável mundo novo do HTML5!




 Semântica no HTML5
 Novos elementos estruturais


     article    aside    audio   ...
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>...
<time> vs. <data>
Esta semana o
Ian Hickson
mudou a
especificação e
removeu o
elemento <time>
e o atributo
@pubdate nos
<a...
<time> vs. <data>
                                        Esta semana o
                                        Ian Hickso...
<aside>, <figure>
Conteúdo à parte do principal. Notas, referências, conteúdo
relacionado são bons candidatos.

<figure> ap...
<aside>, <figure>
Conteúdo à parte do principal. Notas, referências, conteúdo
relacionado são bons candidatos.

<figure> ap...
<mark>, <b>, <i>, <u>, <s>
Elementos de UI sem qualquer valor semântico.
mark: keyword pesquisa. b: negrito. i: voz altern...
<mark>, <b>, <i>, <u>, <s>
Elementos de UI sem qualquer valor semântico.
mark: keyword pesquisa. b: negrito. i: voz altern...
<mark>, <b>, <i>, <u>, <s>
Elementos de UI sem qualquer valor semântico.
mark: keyword pesquisa. b: negrito. i: voz altern...
Lição nº2   Acesso com browsers antigos
            Compatibilidade
                            universal

            Apl...
Lição nº2   Acesso com browsers antigos
                          Compatibilidade
                                        ...
Lição nº2   Acesso com browsers antigos
                          Compatibilidade
                                        ...
Lição nº2   Acesso com browsers antigos
                          Compatibilidade
                                        ...
No admirável mundo novo do HTML5!




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


               data...
No admirável mundo novo do HTML5!




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


            <p data...
No admirável mundo novo do HTML5!




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


              <p da...
No admirável mundo novo do HTML5!




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


              <p da...
No admirável mundo novo do HTML5!




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


                <p ...
Lição nº3   Aproveitarmulti-facetada!
            A sua utilidade é sempre
                                     os metadad...
Bookmarklet de debug
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 secti...
Em janeiro de 2009...
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 t...
“Nósdon’tprecisamos de adicionar
“We não need to add
termos específicos ao vocabulário
specific terms to the
do HTML, nósH...
mMICRODATA
         m
No admirável mundo novo do HTML5!




 Microdata
 Mecanismo que permite
 embeber dados legíveis




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




1 Demarcar o item com itemscope.




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




1 Demarcar o item com itemscope.


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




1 Demarcar o item com itemscope.


2 Declarar o t...
No admirável mundo novo do HTML5!


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




<div itemscope
      itemtype=“http://da...
Qualquer um pode criar
e estender um vocabulário...
...mas quais posso
ou devo usar?
No admirável mundo novo do HTML5!




 Microdata: Quais usar?

                                                    Livros,...
No admirável mundo novo do HTML5!




 Microdata: Quais usar?

                                                      Livro...
No admirável mundo novo do HTML5!




 Microdata: Quais usar?
                                                   1. Microd...
No admirável mundo novo do HTML5!




 Microdata: Quais usar?
                                                   1. Microd...
No admirável mundo novo do HTML5!




     Microdata: Quais usar?
http://www.google.com/support/webmasters/bin/answer.py?h...
No admirável mundo novo do HTML5!




     Microdata: Quais usar?
http://www.google.com/support/webmasters/bin/answer.py?h...
Lição nº5   Escolher o formato ideal
            Purismo fica à porta.



            Microdata vs microformatos vs RDFa
 ...
Para finalizar...
No admirável mundo novo do HTML5!




semântica           Microdata
                                RDFa       RDFa
      ...
Obrigado.
QUESTÕES?
LIÇÕES PRÁTICAS
FIM                            DE

                    SEMÂNTICA
                              COM



    ...
Créditos & Tipografia
Gotham                        American Typewriter
Gotham Rounded                Chaparral Pro
Gotham...
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT
Upcoming SlideShare
Loading in …5
×

of

Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 1 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 2 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 3 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 4 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 5 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 6 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 7 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 8 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 9 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 10 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 11 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 12 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 13 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 14 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 15 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 16 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 17 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 18 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 19 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 20 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 21 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 22 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 23 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 24 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 25 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 26 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 27 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 28 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 29 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 30 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 31 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 32 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 33 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 34 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 35 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 36 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 37 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 38 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 39 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 40 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 41 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 42 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 43 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 44 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 45 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 46 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 47 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 48 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 49 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 50 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 51 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 52 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 53 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 54 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 55 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 56 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 57 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 58 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 59 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 60 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 61 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 62 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 63 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 64 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 65 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 66 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 67 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 68 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 69 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 70 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 71 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 72 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 73 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 74 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 75 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 76 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 77 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 78 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 79 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 80 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 81 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 82 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 83 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 84 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 85 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 86 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 87 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 88 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 89 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 90 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 91 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 92 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 93 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 94 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 95 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 96 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 97 Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT Slide 98
Upcoming SlideShare
Funções da linguagem
Next
Download to read offline and view in fullscreen.

13 Likes

Share

Download to read offline

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

Download to read offline

Apresentado no 2o evento da comunidade HTML5pt.org

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

  1. 1. 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
  2. 2. OH HAI! @andr3 http://id.andr3.net me@andr3.net andre-filipe-luis@telecom.pt andr3.net dailyphotowall.net igive.sapo.pt mobifeeds.net
  3. 3. OH HAI! @andr3 http://id.andr3.net Departamento de Qualidade & Usabilidade do SAPO http://ux.sapo.pt
  4. 4. OH HAI!
  5. 5. OH HAI!
  6. 6. OH HAI! mais em http://slideshare.net/andr3 Atalho: http://33om.sl.pt
  7. 7. Agenda
  8. 8. 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
  9. 9. Agenda Semântica
  10. 10. Agenda Semântica
  11. 11. Semântica: O que é & porque é importante?
  12. 12. Semântica: O que é & porque é importante? Semântica subst. fem. Estudo do significado das palavras.
  13. 13. Semântica: O que é & porque é importante? Web Semântica?
  14. 14. Semântica: O que é & porque é importante? Web Semântica? http://id.sapo.pt/andr3
  15. 15. Semântica: O que é & porque é importante? Web Semântica? http://id.sapo.pt/andr3
  16. 16. Semântica: O que é & porque é importante? Web Semântica? http://id.sapo.pt/andr3
  17. 17. Semântica: O que é & porque é importante? Web Semântica? http://id.sapo.pt/andr3 Uma pessoa!
  18. 18. Semântica: O que é & porque é importante? Web Semântica? http://id.sapo.pt/andr3 Uma pessoa!
  19. 19. Semântica: O que é & porque é importante? Web Semântica? 1x <div>, 1x <h1>, http://id.sapo.pt/andr3 3x <p>, 1x <a>... Uma pessoa!
  20. 20. Semântica: O que é & porque é importante? Web Semântica? 1x <div>, 1x <h1>, http://id.sapo.pt/andr3 3x <p>, 1x <a>... Uma pessoa!
  21. 21. Semântica: O que é & porque é importante? Web Semântica? 1x <div>, 1x <h1>, http://id.sapo.pt/andr3 3x <p>, 1x <a>... Uma pessoa!
  22. 22. Semântica: O que é & porque é importante? Web Semântica? 1x <div>, 1x <h1>, http://id.sapo.pt/andr3 3x <p>, 1x <a>... Uma pessoa!
  23. 23. Semântica: O que é & porque é importante? Web Semântica? http://id.sapo.pt/andr3 Uma pessoa! Try again...
  24. 24. Semântica: O que é & porque é importante? Web Semântica? 1x Pessoa! http://id.sapo.pt/andr3 Uma pessoa!
  25. 25. A web semântica nos tempos de antigamente?
  26. 26. A web semântica nos tempos de antigamente? HTML 4 XHTML 1.0
  27. 27. A web semântica nos tempos de antigamente? HTML 4 XHTML 1.0 Desenhados para documentos hipertexto.
  28. 28. A web semântica nos tempos de antigamente? 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 fieldset 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
  29. 29. A web semântica nos tempos de antigamente? 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 fieldset 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
  30. 30. A web semântica nos tempos de antigamente? CIRCA 2004 index.html model.xml (RDF)
  31. 31. A web semântica nos tempos de antigamente? CIRCA 2004 index.html model.xml (RDF) CIRCA 2005 index.html
  32. 32. A web semântica nos tempos de antigamente? CIRCA 2004 index.html model.xml (RDF) CIRCA 2005 index.html
  33. 33. A web semântica nos tempos de antigamente? CIRCA 2004 index.html model.xml (RDF) CIRCA 2005 RDFa index.html RDF-in-attributes
  34. 34. A web semântica nos tempos de antigamente? http://microformats.org
  35. 35. A web semântica nos tempos de antigamente? 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>
  36. 36. A web semântica nos tempos de antigamente? http://microformats.org <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>
  37. 37. A web semântica nos tempos de antigamente? http://microformats.org <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>
  38. 38. A web semântica nos tempos de antigamente? http://microformats.org 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.
  39. 39. A web semântica nos tempos de antigamente? RDFa RDF-in-attributes http://www.w3.org/TR/xhtml-rdfa-primer/
  40. 40. A web semântica nos tempos de antigamente? RDFa RDF-in-attributes http://www.w3.org/TR/xhtml-rdfa-primer/ <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>
  41. 41. A web semântica nos tempos de antigamente? RDFa RDF-in-attributes http://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:me@andr3.net”> me@andr3.net </a> </p> <p property=“v:NOTE”>web nerd.</p> </div>
  42. 42. A web semântica nos tempos de antigamente? RDFa RDF-in-attributes http://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:me@andr3.net”> me@andr3.net </a> </p> <p property=“v:NOTE”>web nerd.</p> </div>
  43. 43. A web semântica nos tempos de antigamente? RDFa RDF-in-attributes http://www.w3.org/TR/xhtml-rdfa-primer/ 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/
  44. 44. 88mph
  45. 45. Copyright © 2000-2011 Berlin Wallpaper, Inc. The Jetsons are ©, ® & ™ by Hanna-Barbera Productions, Inc.
  46. 46. No admirável mundo novo do HTML5! Copyright © 2000-2011 Berlin Wallpaper, Inc. The Jetsons are ©, ® & ™ by Hanna-Barbera Productions, Inc.
  47. 47. No admirável mundo novo do HTML5! Semântica no HTML5 Novos elementos estruturais article aside audio canvas data datalist details eventsource figcaption figure footer header mark meter nav progress section source time track video
  48. 48. Lição nº1 Elementosnomes! Chamar as coisas pelos estruturais
  49. 49. <section> Serve para agrupar conteúdo e elementos de um mesmo tema.
  50. 50. <article> Identifica porções de artigos independentes, items de conteúdo portável. Também deve ser aplicado em widgets.
  51. 51. <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>.
  52. 52. <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=“...”>.
  53. 53. <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=“...”>.
  54. 54. <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.
  55. 55. <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).
  56. 56. <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).
  57. 57. <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).
  58. 58. <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> Leitura recomendada <header> & <footer> referem-se à importância da informação no Livro “HTML5 for Web Designers” do Jeremy Keith em versão HTML seu contexto. footer pode até estar antes do <header>. http://html5forwebdesigners.com <small> mudou de significado para “letra pequena” (contratos). Documento W3C com diferenças entre o HTML4 & HTML5 pelo Anne & Simon Pieters: http://www.w3.org/TR/html5-diff/#new-elements
  59. 59. Lição nº2 Acesso com browsers antigos Compatibilidade universal Aplicar estilo a elementos novos: <section class=“noticias”></section>
  60. 60. Lição nº2 Acesso com browsers antigos Compatibilidade universal Aplicar estilo a elementos novos: Falha em <section class=“noticias”></section> IE 6, 7 & 8 section.noticias { ... }
  61. 61. Lição nº2 Acesso com browsers antigos Compatibilidade universal Aplicar estilo a elementos novos: Falha em <section class=“noticias”></section> IE 6, 7 & 8 section.noticias { ... } IE 6, 7 & 8 HTML5 shiv do Remy Sharp (@rem) sem javascript http://code.google.com/p/html5shiv/
  62. 62. Lição nº2 Acesso com browsers antigos Compatibilidade universal Aplicar estilo a elementos novos: Falha em <section class=“noticias”></section> IE 6, 7 & 8 section.noticias { ... } 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 { ... }
  63. 63. No admirável mundo novo do HTML5! Semântica no HTML5 Distinguir semântica de dados auxiliares. data-_____
  64. 64. No admirável mundo novo do HTML5! Semântica no HTML5 Distinguir semântica de dados auxiliares. <p data-_____ data-zone=“logotipo”> ...
  65. 65. No admirável mundo novo do HTML5! Semântica no HTML5 Distinguir semântica de dados auxiliares. <p data-_____ data-zone=“logotipo”> ... Interessa a alguém para além de nós?
  66. 66. No admirável mundo novo do HTML5! Semântica no HTML5 Distinguir semântica de dados auxiliares. <p data-_____ data-zone=“logotipo”> ... Interessa a alguém para Meh! Não... além de nós?
  67. 67. No admirável mundo novo do HTML5! Semântica no HTML5 Distinguir semântica de dados auxiliares. <p data-_____ data-zone=“logotipo”> ... Interessa a Então são dados Meh! Não... alguém para auxiliares... data-*! além de nós?
  68. 68. 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); }
  69. 69. Bookmarklet de debug
  70. 70. Então e os dados que podem interessar a outros?
  71. 71. 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
  72. 72. Em janeiro de 2009...
  73. 73. John Allsopp
  74. 74. “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
  75. 75. “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
  76. 76. mMICRODATA m
  77. 77. No admirável mundo novo do HTML5! 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”.
  78. 78. Microdata: Passo-a-passo Lição nº4 É fixar e pronto!
  79. 79. Microdata: Passo-a-passo Lição nº4 É fixar e pronto! 1 Demarcar o item com itemscope. <div itemscope> ...
  80. 80. Microdata: Passo-a-passo Lição nº4 É fixar e pronto! 1 Demarcar o item com itemscope. 2 Declarar o tipo (URL) com itemtype. <div itemscope itemtype=“http://data-vocabulary.org/Person”> ...
  81. 81. Microdata: Passo-a-passo Lição nº4 É fixar e pronto! 1 Demarcar o item com itemscope. 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>...
  82. 82. No admirável mundo novo do HTML5! 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>
  83. 83. Qualquer um pode criar e estender um vocabulário...
  84. 84. ...mas quais posso ou devo usar?
  85. 85. No admirável mundo novo do HTML5! 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/
  86. 86. No admirável mundo novo do HTML5! 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/ Um ajudante para nos facilitar a vida... (pela empresa Sitening LLC) http://schema-creator.org/
  87. 87. No admirável mundo novo do HTML5! Microdata: Quais usar? 1. Microdata 2. Microformatos 3. RDFa http://www.google.com/webmasters/tools/richsnippets
  88. 88. No admirável mundo novo do HTML5! Microdata: Quais usar? 1. Microdata 2. Microformatos 3. RDFa http://www.google.com/webmasters/tools/richsnippets
  89. 89. No admirável mundo novo do HTML5! Microdata: Quais usar? http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=146646 item pro p
  90. 90. No admirável mundo novo do HTML5! Microdata: Quais usar? http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=146646
  91. 91. 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.
  92. 92. Para finalizar...
  93. 93. No admirável mundo novo do HTML5! semântica Microdata RDFa RDFa 1.1 microformatos dados documentos HTML dificuldade
  94. 94. Obrigado. QUESTÕES?
  95. 95. 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
  96. 96. 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
  • Fuyumiji

    Apr. 13, 2018
  • JVLopes

    Jul. 14, 2014
  • haughty25894

    Jun. 8, 2014
  • JooPauloLaranja

    May. 1, 2014
  • ElderPinto

    Apr. 16, 2014
  • renatodeluna

    Oct. 20, 2013
  • Rafha_G3

    Oct. 19, 2013
  • Renato_666

    Oct. 6, 2013
  • CID360

    Feb. 15, 2013
  • charlenopires

    Nov. 4, 2011
  • jjoaquim

    Nov. 3, 2011
  • s3rgiosan

    Nov. 3, 2011
  • armandoalves

    Nov. 3, 2011

Apresentado no 2o evento da comunidade HTML5pt.org

Views

Total views

2,970

On Slideshare

0

From embeds

0

Number of embeds

15

Actions

Downloads

86

Shares

0

Comments

0

Likes

13

×