SlideShare uma empresa Scribd logo
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-filipe-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!
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 admirável mundo novo
    do HTML5
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>,
                                               1x <h1>,
                    http://id.sapo.pt/andr3    3x <p>,
                                              1x <a>...
Uma pessoa!
Semântica: O que é & porque é importante?


    Web Semântica?




                                              1x <div>,
                                               1x <h1>,
                    http://id.sapo.pt/andr3    3x <p>,
                                              1x <a>...
Uma pessoa!
Semântica: O que é & porque é importante?


    Web Semântica?




                                              1x <div>,
                                               1x <h1>,
                    http://id.sapo.pt/andr3    3x <p>,
                                              1x <a>...
Uma pessoa!
Semântica: O que é & porque é importante?


    Web Semântica?




                                              1x <div>,
                                               1x <h1>,
                    http://id.sapo.pt/andr3    3x <p>,
                                              1x <a>...
Uma pessoa!
Semântica: O que é & porque é importante?


    Web Semântica?




                    http://id.sapo.pt/andr3
Uma pessoa!


                              Try again...
Semântica: O que é & porque é importante?


    Web Semântica?




                                              1x Pessoa!
                    http://id.sapo.pt/andr3
Uma 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 hipertexto.
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
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
A web semântica nos tempos de antigamente?


                  CIRCA     2004



               index.html


                                   model.xml
                                    (RDF)
A web semântica nos tempos de antigamente?


                  CIRCA     2004



               index.html


                                         model.xml
                                          (RDF)
                  CIRCA     2005



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


                  CIRCA     2004



               index.html


                                         model.xml
                                          (RDF)
                  CIRCA     2005



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


                  CIRCA     2004



               index.html


                                         model.xml
                                          (RDF)
                  CIRCA     2005


                                                     RDFa
                            index.html               RDF-in-attributes
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, Portugal</p>
  <p>
     <a href=“mailto:me@andr3.net”>
        me@andr3.net
     </a>
  </p>
  <p>web nerd.</p>
</div>
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>
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>
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.
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/




<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>
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>
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>
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/
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 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
       figcaption     figure      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>, <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.
<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.


<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
Lição nº2   Acesso com browsers antigos
            Compatibilidade
                            universal

            Aplicar estilo a elementos novos:
            <section class=“noticias”></section>
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 { ... }
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/
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 { ... }
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-_____
               data-zone=“logotipo”> ...
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?
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?
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?
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);
            }
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 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
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 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
mMICRODATA
         m
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”.
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 itemscope> ...
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”> ...
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>...
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>
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, filmes, receitas,
                                                    Prog. de TV, Eventos,
                                                    Organizações, Pessoas,
                                                    Lugares, etc.




 Google, Microsoft & Yahoo! lançaram o Schema.org
 http://schema.org/
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/
No admirável mundo novo do HTML5!




 Microdata: Quais usar?
                                                   1. Microdata

                                                   2. Microformatos

                                                   3. RDFa




 http://www.google.com/webmasters/tools/richsnippets
No admirável mundo novo do HTML5!




 Microdata: Quais usar?
                                                   1. Microdata

                                                   2. Microformatos

                                                   3. RDFa




 http://www.google.com/webmasters/tools/richsnippets
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
No admirável mundo novo do HTML5!




     Microdata: Quais usar?
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.
Para finalizar...
No admirável mundo novo do HTML5!




semântica           Microdata
                                RDFa       RDFa
                                 1.1




            microformatos                  dados
                                       documentos
            HTML


                                dificuldade
Obrigado.
QUESTÕES?
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

Mais conteúdo relacionado

Mais procurados

Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
Victor Adriel Oliveira
 
Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3
Anderson Aguiar
 
HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5
ondazul
 
Html5 Aula 6
Html5 Aula 6Html5 Aula 6
Html5 Aula 6
Jose Berardo
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01
Léo Dias
 
Html 5 e Css3
Html 5 e Css3Html 5 e Css3
Html 5 e Css3
Faculdade São Lucas
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
Jose Augusto Cintra
 
Html5 Aula 4
Html5 Aula 4Html5 Aula 4
Html5 Aula 4
Jose Berardo
 
Html5 aula 02
Html5 aula 02Html5 aula 02
Html5 aula 02
Jose Berardo
 
CSS3: CSS3 (aula 2)
CSS3: CSS3 (aula 2)CSS3: CSS3 (aula 2)
CSS3: CSS3 (aula 2)
Gustavo Zimmermann
 
Introdução ao HTML e CSS
Introdução ao HTML e CSSIntrodução ao HTML e CSS
Introdução ao HTML e CSS
Sérgio Souza Costa
 
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBHTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
PeslPinguim
 
Html5 & CSS3
Html5 & CSS3Html5 & CSS3
Html5 & CSS3
K19 Treinamentos
 
Javascript, HTML5 e CSS3
Javascript, HTML5 e CSS3Javascript, HTML5 e CSS3
Javascript, HTML5 e CSS3
Tim Koch-Grünberg
 
Html5 Aula 5
Html5 Aula 5Html5 Aula 5
Html5 Aula 5
Jose Berardo
 
Mini curso html5 slides
Mini curso html5   slidesMini curso html5   slides
Mini curso html5 slides
Carlos Rodrigo de Araujo
 
Apostila curso xhtml css
Apostila curso xhtml cssApostila curso xhtml css
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
ScrumHalf Tool
 
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webMontando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
igorpimentel
 
Curso de html - Introdução ao HTML
Curso de html -  Introdução ao HTMLCurso de html -  Introdução ao HTML
Curso de html - Introdução ao HTML
Tales Augusto
 

Mais procurados (20)

Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
 
Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3
 
HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5HTML 5 A evolução do HTML 4 para o HTML 5
HTML 5 A evolução do HTML 4 para o HTML 5
 
Html5 Aula 6
Html5 Aula 6Html5 Aula 6
Html5 Aula 6
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01
 
Html 5 e Css3
Html 5 e Css3Html 5 e Css3
Html 5 e Css3
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
 
Html5 Aula 4
Html5 Aula 4Html5 Aula 4
Html5 Aula 4
 
Html5 aula 02
Html5 aula 02Html5 aula 02
Html5 aula 02
 
CSS3: CSS3 (aula 2)
CSS3: CSS3 (aula 2)CSS3: CSS3 (aula 2)
CSS3: CSS3 (aula 2)
 
Introdução ao HTML e CSS
Introdução ao HTML e CSSIntrodução ao HTML e CSS
Introdução ao HTML e CSS
 
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEBHTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
HTML5 - UM GUIA DE REFERÊNCIA PARA DESENVOLVEDORES WEB
 
Html5 & CSS3
Html5 & CSS3Html5 & CSS3
Html5 & CSS3
 
Javascript, HTML5 e CSS3
Javascript, HTML5 e CSS3Javascript, HTML5 e CSS3
Javascript, HTML5 e CSS3
 
Html5 Aula 5
Html5 Aula 5Html5 Aula 5
Html5 Aula 5
 
Mini curso html5 slides
Mini curso html5   slidesMini curso html5   slides
Mini curso html5 slides
 
Apostila curso xhtml css
Apostila curso xhtml cssApostila curso xhtml css
Apostila curso xhtml css
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
 
Montando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões webMontando sites com XHTML e CSS utilizando os padrões web
Montando sites com XHTML e CSS utilizando os padrões web
 
Curso de html - Introdução ao HTML
Curso de html -  Introdução ao HTMLCurso de html -  Introdução ao HTML
Curso de html - Introdução ao HTML
 

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

Web semântica e html5 na recuperação de conteúdo informacional
Web semântica e html5 na recuperação de conteúdo informacionalWeb semântica e html5 na recuperação de conteúdo informacional
Web semântica e html5 na recuperação de conteúdo informacional
Richard Duchatsch Johansen
 
Web Semântica no Domínio Bibliográfico
Web Semântica no Domínio BibliográficoWeb Semântica no Domínio Bibliográfico
Web Semântica no Domínio Bibliográfico
UNESP
 
Microformats e Web Semântica, transformando seu site para web 3.0 - Road Show...
Microformats e Web Semântica, transformando seu site para web 3.0 - Road Show...Microformats e Web Semântica, transformando seu site para web 3.0 - Road Show...
Microformats e Web Semântica, transformando seu site para web 3.0 - Road Show...
Renato Bongiorno Bonfanti
 
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
Reinaldo Ferraz
 
Passado, Presente e Futuro da Web
Passado, Presente e Futuro da WebPassado, Presente e Futuro da Web
Passado, Presente e Futuro da Web
Instituto Faber-Ludens
 
Web 3.0 - A Semântica na Rede
Web 3.0 - A Semântica na RedeWeb 3.0 - A Semântica na Rede
Web 3.0 - A Semântica na Rede
Elvis Fusco
 
Tutorial de Web Semântica - CompSem 2015
Tutorial de Web Semântica - CompSem 2015Tutorial de Web Semântica - CompSem 2015
Tutorial de Web Semântica - CompSem 2015
Bianca Pereira
 
Web Semântica e Ontologias
Web Semântica e OntologiasWeb Semântica e Ontologias
Web Semântica e Ontologias
Daniela Brauner
 
Alexandria: um Sistema de Sistemas para Publicação de Conteúdo Digital utiliz...
Alexandria: um Sistema de Sistemas para Publicação de Conteúdo Digital utiliz...Alexandria: um Sistema de Sistemas para Publicação de Conteúdo Digital utiliz...
Alexandria: um Sistema de Sistemas para Publicação de Conteúdo Digital utiliz...
Luis Cipriani
 
Rdfa | Introdução
Rdfa | IntroduçãoRdfa | Introdução
Rdfa | Introdução
Giselle Porto Maia
 
Do Gopher, Web Crawler, Google, pagerank, sitemaps, ontologia, ao Big Data, W...
Do Gopher, Web Crawler, Google, pagerank, sitemaps, ontologia, ao Big Data, W...Do Gopher, Web Crawler, Google, pagerank, sitemaps, ontologia, ao Big Data, W...
Do Gopher, Web Crawler, Google, pagerank, sitemaps, ontologia, ao Big Data, W...
Leandro Borges
 
Como um verdadeiro sistema REST funciona: arquitetura e performance na Abril
Como um verdadeiro sistema REST funciona: arquitetura e performance na AbrilComo um verdadeiro sistema REST funciona: arquitetura e performance na Abril
Como um verdadeiro sistema REST funciona: arquitetura e performance na Abril
Luis Cipriani
 
A revolução do client side
A revolução do client sideA revolução do client side
A revolução do client side
Cristiano Gonçalves
 
Front-end ENGINEER
Front-end ENGINEERFront-end ENGINEER
Front-end ENGINEER
Ivan Banov
 
Apresentação: CRIAÇÃO E CONSUMO DE DADOS NOS PADRÕES DA WEB SEMÂNTICA, UTILIZ...
Apresentação: CRIAÇÃO E CONSUMO DE DADOS NOS PADRÕES DA WEB SEMÂNTICA, UTILIZ...Apresentação: CRIAÇÃO E CONSUMO DE DADOS NOS PADRÕES DA WEB SEMÂNTICA, UTILIZ...
Apresentação: CRIAÇÃO E CONSUMO DE DADOS NOS PADRÕES DA WEB SEMÂNTICA, UTILIZ...
JonathanSchneider
 
Web_2.0 Web Standards Web Semântica
Web_2.0 Web Standards Web SemânticaWeb_2.0 Web Standards Web Semântica
Web_2.0 Web Standards Web Semântica
Crystiam Pereira E Silva
 
Obtendo Informação Útil em Dados Semi-Estruturados da Web
Obtendo Informação Útil em Dados Semi-Estruturados da WebObtendo Informação Útil em Dados Semi-Estruturados da Web
Obtendo Informação Útil em Dados Semi-Estruturados da Web
Luiz Matos
 
As WCAG 1.0 e os Sítios Web das Instituições do Ensino Superior
As WCAG 1.0 e os Sítios Web das Instituições do Ensino SuperiorAs WCAG 1.0 e os Sítios Web das Instituições do Ensino Superior
As WCAG 1.0 e os Sítios Web das Instituições do Ensino Superior
Jorge Fernandes
 
Introdução websemantica (minicurso)
Introdução websemantica (minicurso)Introdução websemantica (minicurso)
Introdução websemantica (minicurso)
Norton Guimarães
 
HTML 5 - A mudança da Web
HTML 5 - A mudança da WebHTML 5 - A mudança da Web
HTML 5 - A mudança da Web
Paulino Michelazzo
 

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

Web semântica e html5 na recuperação de conteúdo informacional
Web semântica e html5 na recuperação de conteúdo informacionalWeb semântica e html5 na recuperação de conteúdo informacional
Web semântica e html5 na recuperação de conteúdo informacional
 
Web Semântica no Domínio Bibliográfico
Web Semântica no Domínio BibliográficoWeb Semântica no Domínio Bibliográfico
Web Semântica no Domínio Bibliográfico
 
Microformats e Web Semântica, transformando seu site para web 3.0 - Road Show...
Microformats e Web Semântica, transformando seu site para web 3.0 - Road Show...Microformats e Web Semântica, transformando seu site para web 3.0 - Road Show...
Microformats e Web Semântica, transformando seu site para web 3.0 - Road Show...
 
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
HTML5, WAI-ARIA e Acessibilidade na Web - Digital acesso 2011
 
Passado, Presente e Futuro da Web
Passado, Presente e Futuro da WebPassado, Presente e Futuro da Web
Passado, Presente e Futuro da Web
 
Web 3.0 - A Semântica na Rede
Web 3.0 - A Semântica na RedeWeb 3.0 - A Semântica na Rede
Web 3.0 - A Semântica na Rede
 
Tutorial de Web Semântica - CompSem 2015
Tutorial de Web Semântica - CompSem 2015Tutorial de Web Semântica - CompSem 2015
Tutorial de Web Semântica - CompSem 2015
 
Web Semântica e Ontologias
Web Semântica e OntologiasWeb Semântica e Ontologias
Web Semântica e Ontologias
 
Alexandria: um Sistema de Sistemas para Publicação de Conteúdo Digital utiliz...
Alexandria: um Sistema de Sistemas para Publicação de Conteúdo Digital utiliz...Alexandria: um Sistema de Sistemas para Publicação de Conteúdo Digital utiliz...
Alexandria: um Sistema de Sistemas para Publicação de Conteúdo Digital utiliz...
 
Rdfa | Introdução
Rdfa | IntroduçãoRdfa | Introdução
Rdfa | Introdução
 
Do Gopher, Web Crawler, Google, pagerank, sitemaps, ontologia, ao Big Data, W...
Do Gopher, Web Crawler, Google, pagerank, sitemaps, ontologia, ao Big Data, W...Do Gopher, Web Crawler, Google, pagerank, sitemaps, ontologia, ao Big Data, W...
Do Gopher, Web Crawler, Google, pagerank, sitemaps, ontologia, ao Big Data, W...
 
Como um verdadeiro sistema REST funciona: arquitetura e performance na Abril
Como um verdadeiro sistema REST funciona: arquitetura e performance na AbrilComo um verdadeiro sistema REST funciona: arquitetura e performance na Abril
Como um verdadeiro sistema REST funciona: arquitetura e performance na Abril
 
A revolução do client side
A revolução do client sideA revolução do client side
A revolução do client side
 
Front-end ENGINEER
Front-end ENGINEERFront-end ENGINEER
Front-end ENGINEER
 
Apresentação: CRIAÇÃO E CONSUMO DE DADOS NOS PADRÕES DA WEB SEMÂNTICA, UTILIZ...
Apresentação: CRIAÇÃO E CONSUMO DE DADOS NOS PADRÕES DA WEB SEMÂNTICA, UTILIZ...Apresentação: CRIAÇÃO E CONSUMO DE DADOS NOS PADRÕES DA WEB SEMÂNTICA, UTILIZ...
Apresentação: CRIAÇÃO E CONSUMO DE DADOS NOS PADRÕES DA WEB SEMÂNTICA, UTILIZ...
 
Web_2.0 Web Standards Web Semântica
Web_2.0 Web Standards Web SemânticaWeb_2.0 Web Standards Web Semântica
Web_2.0 Web Standards Web Semântica
 
Obtendo Informação Útil em Dados Semi-Estruturados da Web
Obtendo Informação Útil em Dados Semi-Estruturados da WebObtendo Informação Útil em Dados Semi-Estruturados da Web
Obtendo Informação Útil em Dados Semi-Estruturados da Web
 
As WCAG 1.0 e os Sítios Web das Instituições do Ensino Superior
As WCAG 1.0 e os Sítios Web das Instituições do Ensino SuperiorAs WCAG 1.0 e os Sítios Web das Instituições do Ensino Superior
As WCAG 1.0 e os Sítios Web das Instituições do Ensino Superior
 
Introdução websemantica (minicurso)
Introdução websemantica (minicurso)Introdução websemantica (minicurso)
Introdução websemantica (minicurso)
 
HTML 5 - A mudança da Web
HTML 5 - A mudança da WebHTML 5 - A mudança da Web
HTML 5 - A mudança da Web
 

Mais de André Luís

Achieving consistency in large CSS projects — FullStackLX #2
Achieving consistency in large CSS projects — FullStackLX #2Achieving consistency in large CSS projects — FullStackLX #2
Achieving consistency in large CSS projects — FullStackLX #2
André Luís
 
Designers & Developers
Designers & DevelopersDesigners & Developers
Designers & Developers
André Luís
 
Responsive Web Design: Uma História das Trincheiras (sapo.pt)
Responsive Web Design: Uma História das Trincheiras (sapo.pt)Responsive Web Design: Uma História das Trincheiras (sapo.pt)
Responsive Web Design: Uma História das Trincheiras (sapo.pt)
André Luís
 
Dr. © ou como eu deixei de me preocupar e passei a adorar licenças permissivas
Dr. © ou como eu deixei de me preocupar e passei a adorar licenças permissivasDr. © ou como eu deixei de me preocupar e passei a adorar licenças permissivas
Dr. © ou como eu deixei de me preocupar e passei a adorar licenças permissivas
André Luís
 
We're not designing posters, here!
We're not designing posters, here!We're not designing posters, here!
We're not designing posters, here!
André Luís
 
Dr. © - How I learned to stop worrying and love fair-use licenses
Dr. © - How I learned to stop worrying and love fair-use licensesDr. © - How I learned to stop worrying and love fair-use licenses
Dr. © - How I learned to stop worrying and love fair-use licenses
André Luís
 
HTML5 - A nova era da Web
HTML5 - A nova era da WebHTML5 - A nova era da Web
HTML5 - A nova era da Web
André Luís
 
Microformatos - 2009 - Juntando as Peças do Puzzle
Microformatos - 2009 - Juntando as Peças do PuzzleMicroformatos - 2009 - Juntando as Peças do Puzzle
Microformatos - 2009 - Juntando as Peças do Puzzle
André Luís
 
Javascript, Done Right
Javascript, Done RightJavascript, Done Right
Javascript, Done Right
André Luís
 
Microformatos - juntando as peças do puzzle
Microformatos - juntando as peças do puzzleMicroformatos - juntando as peças do puzzle
Microformatos - juntando as peças do puzzle
André Luís
 
Microformatos - pequenas peças do puzzle
Microformatos - pequenas peças do puzzleMicroformatos - pequenas peças do puzzle
Microformatos - pequenas peças do puzzle
André Luís
 

Mais de André Luís (11)

Achieving consistency in large CSS projects — FullStackLX #2
Achieving consistency in large CSS projects — FullStackLX #2Achieving consistency in large CSS projects — FullStackLX #2
Achieving consistency in large CSS projects — FullStackLX #2
 
Designers & Developers
Designers & DevelopersDesigners & Developers
Designers & Developers
 
Responsive Web Design: Uma História das Trincheiras (sapo.pt)
Responsive Web Design: Uma História das Trincheiras (sapo.pt)Responsive Web Design: Uma História das Trincheiras (sapo.pt)
Responsive Web Design: Uma História das Trincheiras (sapo.pt)
 
Dr. © ou como eu deixei de me preocupar e passei a adorar licenças permissivas
Dr. © ou como eu deixei de me preocupar e passei a adorar licenças permissivasDr. © ou como eu deixei de me preocupar e passei a adorar licenças permissivas
Dr. © ou como eu deixei de me preocupar e passei a adorar licenças permissivas
 
We're not designing posters, here!
We're not designing posters, here!We're not designing posters, here!
We're not designing posters, here!
 
Dr. © - How I learned to stop worrying and love fair-use licenses
Dr. © - How I learned to stop worrying and love fair-use licensesDr. © - How I learned to stop worrying and love fair-use licenses
Dr. © - How I learned to stop worrying and love fair-use licenses
 
HTML5 - A nova era da Web
HTML5 - A nova era da WebHTML5 - A nova era da Web
HTML5 - A nova era da Web
 
Microformatos - 2009 - Juntando as Peças do Puzzle
Microformatos - 2009 - Juntando as Peças do PuzzleMicroformatos - 2009 - Juntando as Peças do Puzzle
Microformatos - 2009 - Juntando as Peças do Puzzle
 
Javascript, Done Right
Javascript, Done RightJavascript, Done Right
Javascript, Done Right
 
Microformatos - juntando as peças do puzzle
Microformatos - juntando as peças do puzzleMicroformatos - juntando as peças do puzzle
Microformatos - juntando as peças do puzzle
 
Microformatos - pequenas peças do puzzle
Microformatos - pequenas peças do puzzleMicroformatos - pequenas peças do puzzle
Microformatos - pequenas peças do puzzle
 

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

  • 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. 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. OH HAI! @andr3 http://id.andr3.net Departamento de Qualidade & Usabilidade do SAPO http://ux.sapo.pt
  • 6. OH HAI! mais em http://slideshare.net/andr3 Atalho: http://33om.sl.pt
  • 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
  • 11. Semântica: O que é & porque é importante?
  • 12. Semântica: O que é & porque é importante? Semântica subst. fem. Estudo do significado das palavras.
  • 13. Semântica: O que é & porque é importante? Web Semântica?
  • 14. Semântica: O que é & porque é importante? Web Semântica? http://id.sapo.pt/andr3
  • 15. Semântica: O que é & porque é importante? Web Semântica? http://id.sapo.pt/andr3
  • 16. Semântica: O que é & porque é importante? Web Semântica? http://id.sapo.pt/andr3
  • 17. Semântica: O que é & porque é importante? Web Semântica? http://id.sapo.pt/andr3 Uma pessoa!
  • 18. Semântica: O que é & porque é importante? Web Semântica? http://id.sapo.pt/andr3 Uma pessoa!
  • 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. 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. 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. 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. Semântica: O que é & porque é importante? Web Semântica? http://id.sapo.pt/andr3 Uma pessoa! Try again...
  • 24. Semântica: O que é & porque é importante? Web Semântica? 1x Pessoa! http://id.sapo.pt/andr3 Uma pessoa!
  • 25. A web semântica nos tempos de antigamente?
  • 26. A web semântica nos tempos de antigamente? HTML 4 XHTML 1.0
  • 27. A web semântica nos tempos de antigamente? HTML 4 XHTML 1.0 Desenhados para documentos hipertexto.
  • 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. 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. A web semântica nos tempos de antigamente? CIRCA 2004 index.html model.xml (RDF)
  • 31. A web semântica nos tempos de antigamente? CIRCA 2004 index.html model.xml (RDF) CIRCA 2005 index.html
  • 32. A web semântica nos tempos de antigamente? CIRCA 2004 index.html model.xml (RDF) CIRCA 2005 index.html
  • 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. A web semântica nos tempos de antigamente? http://microformats.org
  • 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. 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. 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. 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. A web semântica nos tempos de antigamente? RDFa RDF-in-attributes http://www.w3.org/TR/xhtml-rdfa-primer/
  • 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. 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. 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. 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. 88mph
  • 45. Copyright © 2000-2011 Berlin Wallpaper, Inc. The Jetsons are ©, ® & ™ by Hanna-Barbera Productions, Inc.
  • 46. No admirável mundo novo do HTML5! Copyright © 2000-2011 Berlin Wallpaper, Inc. The Jetsons are ©, ® & ™ by Hanna-Barbera Productions, Inc.
  • 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. Lição nº1 Elementosnomes! Chamar as coisas pelos estruturais
  • 49.
  • 52. <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>.
  • 53. <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=“...”>.
  • 54. <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=“...”>.
  • 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.
  • 56. <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).
  • 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. <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).
  • 59. <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
  • 60. Lição nº2 Acesso com browsers antigos Compatibilidade universal Aplicar estilo a elementos novos: <section class=“noticias”></section>
  • 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 { ... }
  • 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/
  • 63. 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 { ... }
  • 64. No admirável mundo novo do HTML5! Semântica no HTML5 Distinguir semântica de dados auxiliares. data-_____
  • 65. No admirável mundo novo do HTML5! Semântica no HTML5 Distinguir semântica de dados auxiliares. <p data-_____ data-zone=“logotipo”> ...
  • 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 além de nós?
  • 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 alguém para Meh! Não... além de nós?
  • 68. 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?
  • 69. 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); }
  • 71. Então e os dados que podem interessar a outros?
  • 72. 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
  • 73. Em janeiro de 2009...
  • 74.
  • 76. “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
  • 77. “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
  • 79. 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”.
  • 81. Microdata: Passo-a-passo Lição nº4 É fixar e pronto! 1 Demarcar o item com itemscope. <div itemscope> ...
  • 82. 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”> ...
  • 83. 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>...
  • 84. 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>
  • 85. Qualquer um pode criar e estender um vocabulário...
  • 86. ...mas quais posso ou devo usar?
  • 87. 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/
  • 88. 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/
  • 89. No admirável mundo novo do HTML5! Microdata: Quais usar? 1. Microdata 2. Microformatos 3. RDFa http://www.google.com/webmasters/tools/richsnippets
  • 90. No admirável mundo novo do HTML5! Microdata: Quais usar? 1. Microdata 2. Microformatos 3. RDFa http://www.google.com/webmasters/tools/richsnippets
  • 91. 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
  • 92. No admirável mundo novo do HTML5! Microdata: Quais usar? http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=146646
  • 93. 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.
  • 95. No admirável mundo novo do HTML5! semântica Microdata RDFa RDFa 1.1 microformatos dados documentos HTML dificuldade
  • 97. 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
  • 98. 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