SlideShare a Scribd company logo
1 of 96
Download to read offline
SAPO Sessions3 Junho 2009



                          microformatos
                          juntando as peças do puzzle




     creative commons                                      André Luís
     attribution                                           http://andr3.net
     non-commercial                                        aluis@co.sapo.pt
     share-alike 3.0
Wednesday, June 3, 2009
microformatos juntando as peças do puzzle




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle




Dan Cederholm
http://simplebits.com
Wednesday, June 3, 2009
microformatos juntando as peças do puzzle




                              Introdução
                              Como usar?
                              Como publicar?
                              Como consumir?


Wednesday, June 3, 2009
microformatos juntando as peças do puzzle




                                  Introdução




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle   Introdução




                 World Wide Web




            pixelydixel
Wednesday, June 3, 2009
microformatos juntando as peças do puzzle   Introdução




                          Documentos




            bitzcelt
Wednesday, June 3, 2009
microformatos juntando as peças do puzzle   Introdução




                                                       Dados




                                                        fonte: cnn.com
Wednesday, June 3, 2009
microformatos juntando as peças do puzzle   Introdução




                                                       Dados




 fonte: everyblock.com
Wednesday, June 3, 2009
microformatos juntando as peças do puzzle   Introdução



          A evolução da Web
                          1999
                          RDF

                                                            2008

          HTML (tabelas)           Webstandards
          1998                      2003




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle          Introdução



          A evolução da Web
                          1999                       2005
                          RDF                        microformatos

                                                                   2008

          HTML (tabelas)           Webstandards
          1998                      2003




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle                    Introdução




                “ Estão a ver todas aquelas coisas que
                      vocês já têm nos vossos sites? Os
                      microformatos apenas dizem aos
                      computadores o que essas coisas na
                      realidade são. ”
                                                           por Toby Inkster
                               http://microformats.org/wiki/what-are-microformats




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle                                    Introdução




                Semântica
                Estudo da linguagem humana do ponto de vista do significado das palavras e dos enunciados;




                                                      =




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle              Introdução



            Web Semântica                 vs.        web semântica


              RDF                                      microformatos
                                           DDL
              OWL, FOAF, etc.                            hcard, hcalendar, etc.
              RDF: circa 1999         G  R                             2005

                                          2007




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle                     Introdução



            Web Semântica                            vs.    web semântica

                          infinitos namespaces

              RDF                                             microformatos
                                                    DDL
              OWL, FOAF, etc.                                   hcard, hcalendar, etc.
              RDF: circa 1999                    GR                           2005

                                                     2007




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle                             Introdução



            Web Semântica                            vs.       web semântica

                          infinitos namespaces          número de formatos: < 20

              RDF                                                   microformatos
                                                    DDL
              OWL, FOAF, etc.                                           hcard, hcalendar, etc.
              RDF: circa 1999                    GR                                   2005

                                                     2007




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle                             Introdução



            Web Semântica                            vs.       web semântica

                          infinitos namespaces          número de formatos: < 20

              RDF                                                   microformatos
                                                    DDL
              OWL, FOAF, etc.                                           hcard, hcalendar, etc.
              RDF: circa 1999                    GR                                   2005

                                                     2007




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle               Introdução



          Linguagens

       semântica
                                                                 RDF
                                                     RDFa/eRDF
                                                       xhtml*


                                µf
                            html&xhtml
                                                                  dados
                             POSH
                                                             documentos
                          HTML


                                                        complexidade

Wednesday, June 3, 2009
microformatos juntando as peças do puzzle                 Introdução


         Princípios

             1. Resolver um problema
             2. Partir do mais simples possível
             3. Pensados primeiro para humanos e só depois para as máquinas
             4. Reutilizar formatos amplamente adoptados
             5. Modulares e para serem embebidos
             6. Permitir e encorajar desenvolvimento, conteúdo e serviços
                   descentralizados




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle      Introdução



          Que formatos existem?
         Especificações (7)


                   hCard             rel-tag         VoteLinks
                   hCalendar         rel-license     XFN
                                     rel-nofollow




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle         Introdução



          Que formatos existem?
         “Drafts” (9)


                   hAtom             rel-directory   xfolk
                   hResume           rel-enclosure   adr
                   hReview           rel-home        geo
                   hAudio            rel-payment


Wednesday, June 3, 2009
microformatos juntando as peças do puzzle   Introdução




                                    “ Show! Me! The money!”

Wednesday, June 3, 2009
microformatos juntando as peças do puzzle   Introdução



                  Antes


                  <p>
                  <a
                  href=”http://andr3.net”>André Luís</a>
                  </p>




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle        Introdução



                  Depois


                  <p class=”vcard”>
                  <a class=”fn url”
                  href=”http://andr3.net”>André Luís</a>
                  </p>
                                          Já temos um cartão de visita!
                                                              (hcard)


Wednesday, June 3, 2009
microformatos juntando as peças do puzzle                            Introdução


          Imaginemos...


                                                                              Windows Contacts


                                                                     +
                                                                  2 cliques
                                                                                Address Book


               http://www.blueflavor.com/people/keith-robinson/




                                                                                  Telefones
Wednesday, June 3, 2009
microformatos juntando as peças do puzzle                Introdução


          Imaginemos...



                                                                    Outlook
                                                         +
                                                      2 cliques

                                                                      iCal

                     http://shift.pt/page/schedule/




                                                                    Telefones
Wednesday, June 3, 2009
microformatos juntando as peças do puzzle         Introdução


          Mais vantagens...
           Simplicidade
           DRY - Não duplicação
           Baixo esforço de implementação
           Portabilidade de conteúdos (dados)
           Aumento da utilidade dos serviços!

          Efeitos secundários
           Uniformização do HTML produzido entre projectos
           Permite uniformização visual (via folhas de estilo)
Wednesday, June 3, 2009
microformatos juntando as peças do puzzle                 Introdução


          Beneficiários?


                      Páginas Públicas               Páginas Privadas
                                                                c/ login


                                 Utilizadores ou Visitantes

                          Serviços Externos




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle   Introdução



                                  Quem Publica?




                                         ...etc.

Wednesday, June 3, 2009
microformatos juntando as peças do puzzle   Introdução



                                  Quem Consome?




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle   Introdução




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle       Introdução


              Números (3 de Junho de 2009)




                      1. hCard     1,390,000,000 páginas (!!!!!)
                      2. hAtom       614,000,000 páginas
                      3. XFN         398,000,000 páginas
                      4. hCalendar    72,100,000 páginas
                      5. hReview      36,400,000 páginas

        searchmonkeyid:com.yahoo.page.uf.<format>
Wednesday, June 3, 2009
microformatos juntando as peças do puzzle   Introdução


              E mais... RDFa




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle   Introdução


          Google Rich Snippets




           http://whit.me/googleufs




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle                  Introdução


          Google Rich Snippets                       HE
                                                       RE
                                                            BE
                                                                 DR
                                                                   AG
                                                                      ONS
           http://whit.me/googleufs                                       !




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle                     Introdução


          Google Rich Snippets




           http://whit.me/googleufs
          Rich Snippets give users convenient summary information
          about their search results at a glance. We are currently
          supporting data about reviews and people. When searching for
          a product or service, users can easily see reviews and ratings,
          and when searching for a person, they’ll get help distinguishing
          between people with the same name. It’s a simple change to the
          display of search results, yet our experiments have shown that
          users find the new data valuable—if they see useful and relevant
          information from the page, they are more likely to click through.

Wednesday, June 3, 2009
microformatos juntando as peças do puzzle   Introdução


          Google Rich Snippets




           http://whit.me/googleufs



                                        + RDFa



Wednesday, June 3, 2009
microformatos juntando as peças do puzzle         Introdução




                          Utilizador: “Como é que eu uso isso?”




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle




                           Como usar?
                     Como usar no dia-a-dia?
                    Como usar nos nossos sites?


Wednesday, June 3, 2009
microformatos juntando as peças do puzzle           Como usar?

        Addon para Firefox: Operator
       https://addons.mozilla.org/en-US/firefox/addon/4106




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle                      Como usar?

        Addon para Firefox: Operator
       https://addons.mozilla.org/en-US/firefox/addon/4106

        Bookmarklet: Firefox, Opera, Safari, IE6, IE7
       http://leftlogic.com/lounge/articles/microformats_bookmarklet/




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle                       Como usar?

        Addon para Firefox: Operator
       https://addons.mozilla.org/en-US/firefox/addon/4106

        Bookmarklet: Firefox, Opera, Safari, IE6, IE7
       http://leftlogic.com/lounge/articles/microformats_bookmarklet/

        Oomph! - Microformats toolkit (Microsoft/MIX online)
       http://visitmix.com/Lab/Oomph




       Plugin ie7+8
       .js em jQuery
       Temas em css
       Windows Live Writer             http://rhizohm.net/contact.html


Wednesday, June 3, 2009
microformatos juntando as peças do puzzle            Como usar?

        Addon para Firefox: Operator
       https://addons.mozilla.org/en-US/firefox/addon/4106

        Bookmarklet: Firefox, Opera, Safari, IE6, IE7
       https://addons.mozilla.org/en-US/firefox/addon/4106

        Oomph! - Microformats toolkit (Microsoft/MIX online)
       http://visitmix.com/Lab/Oomph

        IE8 - Webslices/hAtom
       http://microsoft.com/windows/internet-explorer/beta/




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle            Como usar?

        Addon para Firefox: Operator
       https://addons.mozilla.org/en-US/firefox/addon/4106

        Bookmarklet: Firefox, Opera, Safari, IE6, IE7
       https://addons.mozilla.org/en-US/firefox/addon/4106

        Oomph! - Microformats toolkit (Microsoft/MIX online)
       http://visitmix.com/Lab/Oomph

        IE8 - Webslices/hAtom
       http://microsoft.com/windows/internet-explorer/beta/




                                       Mas não só.


Wednesday, June 3, 2009
microformatos juntando as peças do puzzle                       Como usar?

        X2V (Brian Suda)
       http://suda.co.uk/projects/X2V/




                                            link
                                                                     X2V




           http://suda.co.uk/projects/microformats/hcalendar/get-cal.php?uri=<endereço web>




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle                       Como usar?

        X2V (Brian Suda)
       http://suda.co.uk/projects/X2V/


                                                                    Magia
                                                                      tidy+xsl
                                            link
                                                                     X2V




           http://suda.co.uk/projects/microformats/hcalendar/get-cal.php?uri=<endereço web>




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle                       Como usar?

        X2V (Brian Suda)
       http://suda.co.uk/projects/X2V/


                                                                    Magia
                                                                      tidy+xsl
                                            link
                                                                     X2V
                                            iCal
                                             (.ics)



           http://suda.co.uk/projects/microformats/hcalendar/get-cal.php?uri=<endereço web>




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle                       Como usar?

        X2V (Brian Suda)
       http://suda.co.uk/projects/X2V/


                                                                    Magia
                                                                      tidy+xsl
                                            link
                                                                     X2V
                                            iCal
                                             (.ics)



           http://suda.co.uk/projects/microformats/hcalendar/get-cal.php?uri=<endereço web>




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle                       Como usar?

        X2V (Brian Suda)
       http://suda.co.uk/projects/X2V/




                                     Análogo para hCards.
           http://suda.co.uk/projects/microformats/hcard/get-contact.php?uri=<endereço web>



                          hCard(s)                                vCards (.vcf)




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle                                         Como usar?

        X2V (Brian Suda)
       http://suda.co.uk/projects/X2V/




                 http://suda.co.uk/projects/microformats/hcalendar/get-cal.php?uri=http://shift.pt/page/schedule
               webcal://suda.co.uk/projects/microformats/...




                                                                                               QR Code
                                                                                        http://reader.kaywa.com




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle             Como usar?


          Interligação de perfis

                                                   blog




                          Google Social Graph API
                           code.google.com/apis/socialgraph/




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle                Como usar?


          Interligação de perfis




                          XFN Explorer
                          http://workshop.andr3.net/xfnexplorer

Wednesday, June 3, 2009
microformatos juntando as peças do puzzle   Como usar?


          Consolidação de perfis




             Identify (by Glenn Jones)
            http://lab.madgex.com/identify




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle     Como usar?


          Portabilidade dos Dados




                                          dopplr.com

Wednesday, June 3, 2009
microformatos juntando as peças do puzzle        Como usar?


          Recuperação de Dados (Funny story...)




 http://workshop.andr3.net/de.fibrillator/

                                            1. Google Feeds Archive

                                            2. Microformatos (xfolk)

                                            bookmarks.html RSS JSON
Wednesday, June 3, 2009
microformatos juntando as peças do puzzle         Como usar?


          Portabilidade dos Dados

                                                             7 de Setembro de 2008




                                                     O Fim dos utilizadores
                                                     tabula rasa?
                                                     http://slideshare.net/andr3/




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle




                            Como publicar?




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle             Como publicar?


                                               POSH
                            Plain Old Semantic HTML

 1. Código Validado          http://validator.w3.org   4. Remover links anorécticos
                                                          <a name=”noticia”></a>

 2. Deixar de usar tabelas por                         5. Usar classes com valor
    motivos de apresentação, GIFs                         semântico
    transparentes e HTML de
    apresentação.

 3. Corrigir <B>ed & <BR>eakfast

Wednesday, June 3, 2009
microformatos juntando as peças do puzzle       Como publicar?


          Design Patterns


                             rel                         abbr
                                                     datetime


                     class




            grdloizaga
Wednesday, June 3, 2009
microformatos juntando as peças do puzzle   Como publicar?


          Padrão class


             This attribute assigns a class name or set of class names
             to an element. Any number of elements may be assigned
             the same class name or names. Multiple class names
             must be separated by white space characters.
             (HTML 4)




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle   Como publicar?


          Padrão class



                  <p class=”vcard”>
                  <a class=”url fn”
                  href=”http://andr3.net”>André Luís</a>
                  </p>




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle     Como publicar?


          Padrão rel


             This attribute describes the relationship from the current
             document to the anchor specified by the href attribute.
             The value of this attribute is a space-separated list of link
             types.
             (HTML 4)


                                        <a> <link>



Wednesday, June 3, 2009
microformatos juntando as peças do puzzle   Como publicar?


          Padrão rel



                  <p class=”vcard”>
                  <a class=”fn url” rel=”me”
                  href=”http://andr3.net”>André Luís</a>
                  </p>




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle     Como publicar?


          Padrão abbr


             The content of the ABBR and ACRONYM elements
             specifies the abbreviated expression itself, as it would
             normally appear in running text. The title attribute of
             these elements may be used to provide the full or
             expanded form of the expression.
             (HTML4)




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle   Como publicar?


          Padrão abbr

                  <p class=”vcard”>
                  <a class=”url” rel=”me”
                  href=”http://andr3.net”>
                  <abbr class=”fn” title=”André
                  Luís”>André</abbr>
                  </p>




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle        Como publicar?


          Padrão datetime

                  <p class=”vevent”><span
                  class=”fn”>SHiFT</span>
                  <abbr class=”dtstart”
                  title=”2008-10-15”>15 de Outubro
                  </abbr>
                  </p>
                          data em formato ISO 8601
                                exemplos 2008-10-15
                                         20081015
                                         2008-10-15T10:00
                                         2008-10-15T10:00+05
                                         2008-10-15T10:00Z
Wednesday, June 3, 2009
microformatos juntando as peças do puzzle           Como publicar?
            <div class=”vevent”>
            
   <h3 class=”category”>Brasileira</h3>
            
   <h1> <a class=”summary” href=quot;/detalhe_evento.aspx?id=48568quot;>
          Atenção   Adriana Calcanhotto - «Maré»
                 </a></h1>
            
   <h2><a class=”location” href=quot;detalhe_local.aspx?id=146quot;>
                 Coliseu do Porto</a></h2>
            
   <h3><abbr class=”dtstart” title=”2008-05-29”>29-05-2008</abbr>
            a <abbr class=”dtend” title=”2008-05-31”>30-05-2008</abbr></h3>
            </div>


                                                  !




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle          Como publicar?
            <div class=”vevent”>
            
   <h3 class=”category”>Brasileira</h3>
            
   <h1> <a class=”summary” href=quot;/detalhe_evento.aspx?id=48568quot;>
          Atenção   Adriana Calcanhotto - «Maré»
                 </a></h1>
            
   <h2><a class=”location” href=quot;detalhe_local.aspx?id=146quot;>
                 Coliseu do Porto</a></h2>
            
   <h3><abbr class=”dtstart” title=”2008-05-29T21:00+01”>29-05-2008</abbr>
            a <abbr class=”dtend” title=”2008-05-30T21:00:+01”>30-05-2008</abbr></h3>
            </div>


                                                        



Wednesday, June 3, 2009
microformatos juntando as peças do puzzle                 Como publicar?


          Padrão datetime

                  <abbr class=”dtstart”
                  title=”20070312T1700-06”>12 de Março
                  de 2007, a partir das17h
                  </abbr>
                          20 070 312              T        1700 - 06
                          “ Twenty  million seventy-thousand three-hundred
                                                                     ”
                            twelve tee seventeen-hundred dash zero six.
                            Jaws 8 + IE 7



  fonte: hAccessibility @ Webstandards.org
  http://www.webstandards.org/2007/04/27/haccessibility/
Wednesday, June 3, 2009
microformatos juntando as peças do puzzle                 Como publicar?


          Padrão datetime

                  <abbr class=”dtstart”
                  title=”20070312T1700-06”>12 de Março
                  de 2007, a partir das17h
                  </abbr>
                          20 070 312              T        1700 - 06
                          “ Twenty  million seventy-thousand three-hundred
                                                                     ”
                            twelve tee seventeen-hundred dash zero six.
                            Jaws 8 + IE 7



  fonte: hAccessibility @ Webstandards.org
  http://www.webstandards.org/2007/04/27/haccessibility/
Wednesday, June 3, 2009
microformatos juntando as peças do puzzle                                      Como publicar?


                                                             BBC




                          http://www.bbc.co.uk/blogs/radiolabs/2008/06/removing_microformats_from_bbc.shtml

Wednesday, June 3, 2009
microformatos juntando as peças do puzzle   Como publicar?


          Padrão value class                            (experimental)
                                                      http://tr.im/valueclass



          <span class=quot;telquot;>
            <span class=quot;typequot;>Home</span>:
            <span class=quot;valuequot;>+44.415.555.122</span>
           </span>




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle   Como publicar?


          Padrão value class                            (experimental)
                                                      http://tr.im/valueclass



          <span class=quot;telquot;>
            <span class=quot;typequot;>Home</span>:
            <span class=quot;valuequot;>+44.</span> (0)
            <span class=”value”>415.555.122</span>
           </span>




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle   Como publicar?


          Padrão value class                            (experimental)
                                                      http://tr.im/valueclass




          <span class=quot;dtstartquot;>
            <span class=quot;value-titlequot; title=”2009-06-03”>
            yesterday</span>




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle   Como publicar?




                          hCard


Wednesday, June 3, 2009
microformatos juntando as peças do puzzle              Sujar as mãos


          Propriedades

          raíz:           obrigatórias           facultativas

          vcard           fn                     nickname       title
                                                 url            role
                          n*                     email          org
                                                 adr            category
                                                 geo            note
                                                 photo          class
                                                 logo           key
                                                 sound          ...
                                                 bday




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle                       Sujar as mãos


          Exemplo


                           <div class=quot;outLinequot;>
                              <div class=quot;inBoxUtilizadorquot;>
                               <div class=quot;topoUtilizadorquot;><strong>andr3</strong></div>
                                  <div class=quot;infoquot;>
                                    <div id=quot;infopicsquot;><a href=quot;perfilamigo.html?uid=75quot;>
                                   <img src=quot;http://social.imgs.sapo.pt/8a/0b/df/75/
                                   pro_n733982142_189405_9522.jpgquot; border=quot;0quot; />
                                     </a></div>
                          ...




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle                       Sujar as mãos


          Exemplo


                           <div class=quot;outLine vcardquot;>
                              <div class=quot;inBoxUtilizadorquot;>
                               <div class=quot;topoUtilizador fn nicknamequot;><strong>andr3</strong></div>
                                  <div class=quot;infoquot;>
                                    <div id=quot;infopicsquot;><a class= quot;urlquot; href=quot;perfilamigo.html?uid=75quot;>
                                   <img class=quot;photoquot; src=quot;http://social.imgs.sapo.pt/8a/0b/df/75/
                                   pro_n733982142_189405_9522.jpgquot; border=quot;0quot; />
                                     </a></div>
                          ...




Wednesday, June 3, 2009
microformatos pequenas peças do puzzle   Como publicar?




                      hCalendar

            pyrii
Wednesday, June 3, 2009
microformatos pequenas peças do puzzle          Sujar as mãos


          Propriedades

          raíz:               obrigatórias        facultativas

          vcalendar*          summary             dtend
                                                  duration
          vevent              dtstart             description
                                                  category
                                                  url
                                                  location

                                                  rrule
                                                  rdate
                                                  uid
                                                  geo (latitude, longitude)
                                                  ...




Wednesday, June 3, 2009
microformatos pequenas peças do puzzle   Como publicar?




                          rel-tag

            peskymac
Wednesday, June 3, 2009
microformatos pequenas peças do puzzle      Sujar as mãos




                                 links para “tags”




Wednesday, June 3, 2009
microformatos pequenas peças do puzzle   Sujar as mãos



           Exemplo



         <a href=”/tag/microformatos”>
         microformatos
         </a>




Wednesday, June 3, 2009
microformatos pequenas peças do puzzle   Sujar as mãos



           Exemplo



         <a rel=”tag” href=”/tag/microformatos”>
         microformatos
         </a>




Wednesday, June 3, 2009
microformatos pequenas peças do puzzle     Como publicar?



           Exemplo



         <a rel=”tag” href=”/tag/microformatos”>
         microformatos
         </a>

                          não esta                esta é a tag


Wednesday, June 3, 2009
microformatos pequenas peças do puzzle   Sujar as mãos



           Exemplo




         /tag/microformatos?tag=banana#split



                          esta é a tag

Wednesday, June 3, 2009
microformatos juntando as peças do puzzle




                           Como consumir?




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle   Como consumir?




                                 HTML Scraping?




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle                           Como consumir?


              Parsers/Scrapers

                  Perl Cognition http://buzzword.org.uk/cognition/
                  Toby Inkster
                  (adr, geo, hatom, haudio, hcalendar, hcard, hrecipe, hresume, hreview, measure,
                  rel-enclosure, rel-license, rel-tag, species, xfn, xfolk) + RDFa, eRDF, GRDDL, RDF/XML...


                  WS Optimus http://microformatique.com/optimus/
                  Dmitry Baranovskiy
                  (hcard, hcalendar, hreview, hatom, hresume, xfolk, geo, adr, xfn, vote-links, hlisting,
                  haudio, rel-nofollow, rel-license, rel-tag)


                  Ruby mofo http://mofo.rubyforge.org/
                  Chris Wanstrath
                  (hcard, hcalendar, hreview, hatom, hresume, geo, adr, xfn)



Wednesday, June 3, 2009
microformatos juntando as peças do puzzle             Como consumir?


              Parsers/Scrapers

                  WS Yahoo! Query Language http://developer.yahoo.com/yql/
                  Yahoo!
                                     select * from microformats
                                     where url = ‘http://social.sapo.pt/’;



                  JS Sumo http://e.xu.sl.pt
                  Dan Webb




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle                           Como consumir?




                  WS Optimus http://microformatique.com/optimus/
                  Dmitry Baranovskiy
                  (hcard, hcalendar, hreview, hatom, hresume, xfolk, geo, adr, xfn, vote-links, hlisting,
                  haudio, rel-nofollow, rel-license, rel-tag)




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle                           Como consumir?




                  WS Optimus http://microformatique.com/optimus/
                  Dmitry Baranovskiy
                  (hcard, hcalendar, hreview, hatom, hresume, xfolk, geo, adr, xfn, vote-links, hlisting,
                  haudio, rel-nofollow, rel-license, rel-tag)




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle                           Como consumir?




                  WS Optimus http://microformatique.com/optimus/
                  Dmitry Baranovskiy
                  (hcard, hcalendar, hreview, hatom, hresume, xfolk, geo, adr, xfn, vote-links, hlisting,
                  haudio, rel-nofollow, rel-license, rel-tag)




Wednesday, June 3, 2009
microformatos pequenas peças do puzzle           Sujar as mãos


              Transformadores



                  hCard+hCal X2V http://suda.co.uk/projects/X2V/
                  Brian Suda (disponibiliza .xsl’s)


                  vários + RDF TransFormr http://transformr.co.uk/
                  Martin McEvoy (com download para PHP)




Wednesday, June 3, 2009
microformatos juntando as peças do puzzle


          That’s all, Folks!

         Obrigado.

               <p class=”vcard”>
               <a class=”fn url” href=”http://andr3.net”>André Luís</a>
               <a class=”email” href=”mailto:aluis@co.sapo.pt”> aluis@co.sapo.pt</a>
               </p>




              http://microformats.org/wiki/
              http://talks.andr3.net/2009/ufs_sessions.pdf                    creative commons
              http://slideshare.net/andr3                                     attribution
                                                                              non-commercial
                                                                              share-alike 3.0
Wednesday, June 3, 2009
microformatos juntando as peças do puzzle

          Créditos
               Teia - http://www.flickr.com/photos/bitzcelt/2903751010/
               Tim Berners-Lee - http://www.flickr.com/photos/pixelydixel/2712988953/
               Lego - http://flickr.com/photos/grdloizaga/817443503/
               Calendário - http://flickr.com/photos/pyrii/2400515074/
               Etiqueta - http://flickr.com/photos/peskymac/1217139213/




Wednesday, June 3, 2009

More Related Content

Recently uploaded

Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFMichael Gough
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein
 
Dynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationDynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationBuild Intuit
 
A PowerPoint Presentation on Vikram Lander pptx
A PowerPoint Presentation on Vikram Lander pptxA PowerPoint Presentation on Vikram Lander pptx
A PowerPoint Presentation on Vikram Lander pptxatharvdev2010
 
Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfAarwolf Industries LLC
 
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...BookNet Canada
 
Bitdefender-CSG-Report-creat7534-interactive
Bitdefender-CSG-Report-creat7534-interactiveBitdefender-CSG-Report-creat7534-interactive
Bitdefender-CSG-Report-creat7534-interactivestartupro
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Jeffrey Haguewood
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024TopCSSGallery
 
HCI Lesson 1 - Introduction to Human-Computer Interaction.pdf
HCI Lesson 1 - Introduction to Human-Computer Interaction.pdfHCI Lesson 1 - Introduction to Human-Computer Interaction.pdf
HCI Lesson 1 - Introduction to Human-Computer Interaction.pdfROWELL MARQUINA
 
Introduction-to-Wazuh-and-its-integration.pptx
Introduction-to-Wazuh-and-its-integration.pptxIntroduction-to-Wazuh-and-its-integration.pptx
Introduction-to-Wazuh-and-its-integration.pptxmprakaash5
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
Arti Languages Pre Seed Pitchdeck 2024.pdf
Arti Languages Pre Seed Pitchdeck 2024.pdfArti Languages Pre Seed Pitchdeck 2024.pdf
Arti Languages Pre Seed Pitchdeck 2024.pdfwill854175
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesBernd Ruecker
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesManik S Magar
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...itnewsafrica
 
Software Security in the Real World w/Kelsey Hightower
Software Security in the Real World w/Kelsey HightowerSoftware Security in the Real World w/Kelsey Hightower
Software Security in the Real World w/Kelsey HightowerAnchore
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Alkin Tezuysal
 

Recently uploaded (20)

Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDF
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
 
Dynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationDynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientation
 
A PowerPoint Presentation on Vikram Lander pptx
A PowerPoint Presentation on Vikram Lander pptxA PowerPoint Presentation on Vikram Lander pptx
A PowerPoint Presentation on Vikram Lander pptx
 
Landscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdfLandscape Catalogue 2024 Australia-1.pdf
Landscape Catalogue 2024 Australia-1.pdf
 
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
Transcript: Green paths: Learning from publishers’ sustainability journeys - ...
 
Bitdefender-CSG-Report-creat7534-interactive
Bitdefender-CSG-Report-creat7534-interactiveBitdefender-CSG-Report-creat7534-interactive
Bitdefender-CSG-Report-creat7534-interactive
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024
 
HCI Lesson 1 - Introduction to Human-Computer Interaction.pdf
HCI Lesson 1 - Introduction to Human-Computer Interaction.pdfHCI Lesson 1 - Introduction to Human-Computer Interaction.pdf
HCI Lesson 1 - Introduction to Human-Computer Interaction.pdf
 
Introduction-to-Wazuh-and-its-integration.pptx
Introduction-to-Wazuh-and-its-integration.pptxIntroduction-to-Wazuh-and-its-integration.pptx
Introduction-to-Wazuh-and-its-integration.pptx
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
Arti Languages Pre Seed Pitchdeck 2024.pdf
Arti Languages Pre Seed Pitchdeck 2024.pdfArti Languages Pre Seed Pitchdeck 2024.pdf
Arti Languages Pre Seed Pitchdeck 2024.pdf
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
 
Software Security in the Real World w/Kelsey Hightower
Software Security in the Real World w/Kelsey HightowerSoftware Security in the Real World w/Kelsey Hightower
Software Security in the Real World w/Kelsey Hightower
 
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
Unleashing Real-time Insights with ClickHouse_ Navigating the Landscape in 20...
 

Microformatos - 2009 - Juntando as Peças do Puzzle

  • 1. SAPO Sessions3 Junho 2009 microformatos juntando as peças do puzzle creative commons André Luís attribution http://andr3.net non-commercial aluis@co.sapo.pt share-alike 3.0 Wednesday, June 3, 2009
  • 2. microformatos juntando as peças do puzzle Wednesday, June 3, 2009
  • 3. microformatos juntando as peças do puzzle Dan Cederholm http://simplebits.com Wednesday, June 3, 2009
  • 4. microformatos juntando as peças do puzzle Introdução Como usar? Como publicar? Como consumir? Wednesday, June 3, 2009
  • 5. microformatos juntando as peças do puzzle Introdução Wednesday, June 3, 2009
  • 6. microformatos juntando as peças do puzzle Introdução World Wide Web pixelydixel Wednesday, June 3, 2009
  • 7. microformatos juntando as peças do puzzle Introdução Documentos bitzcelt Wednesday, June 3, 2009
  • 8. microformatos juntando as peças do puzzle Introdução Dados fonte: cnn.com Wednesday, June 3, 2009
  • 9. microformatos juntando as peças do puzzle Introdução Dados fonte: everyblock.com Wednesday, June 3, 2009
  • 10. microformatos juntando as peças do puzzle Introdução A evolução da Web 1999 RDF 2008 HTML (tabelas) Webstandards 1998 2003 Wednesday, June 3, 2009
  • 11. microformatos juntando as peças do puzzle Introdução A evolução da Web 1999 2005 RDF microformatos 2008 HTML (tabelas) Webstandards 1998 2003 Wednesday, June 3, 2009
  • 12. microformatos juntando as peças do puzzle Introdução “ Estão a ver todas aquelas coisas que vocês já têm nos vossos sites? Os microformatos apenas dizem aos computadores o que essas coisas na realidade são. ” por Toby Inkster http://microformats.org/wiki/what-are-microformats Wednesday, June 3, 2009
  • 13. microformatos juntando as peças do puzzle Introdução Semântica Estudo da linguagem humana do ponto de vista do significado das palavras e dos enunciados; = Wednesday, June 3, 2009
  • 14. microformatos juntando as peças do puzzle Introdução Web Semântica vs. web semântica RDF microformatos DDL OWL, FOAF, etc. hcard, hcalendar, etc. RDF: circa 1999 G R 2005 2007 Wednesday, June 3, 2009
  • 15. microformatos juntando as peças do puzzle Introdução Web Semântica vs. web semântica infinitos namespaces RDF microformatos DDL OWL, FOAF, etc. hcard, hcalendar, etc. RDF: circa 1999 GR 2005 2007 Wednesday, June 3, 2009
  • 16. microformatos juntando as peças do puzzle Introdução Web Semântica vs. web semântica infinitos namespaces número de formatos: < 20 RDF microformatos DDL OWL, FOAF, etc. hcard, hcalendar, etc. RDF: circa 1999 GR 2005 2007 Wednesday, June 3, 2009
  • 17. microformatos juntando as peças do puzzle Introdução Web Semântica vs. web semântica infinitos namespaces número de formatos: < 20 RDF microformatos DDL OWL, FOAF, etc. hcard, hcalendar, etc. RDF: circa 1999 GR 2005 2007 Wednesday, June 3, 2009
  • 18. microformatos juntando as peças do puzzle Introdução Linguagens semântica RDF RDFa/eRDF xhtml* µf html&xhtml dados POSH documentos HTML complexidade Wednesday, June 3, 2009
  • 19. microformatos juntando as peças do puzzle Introdução Princípios 1. Resolver um problema 2. Partir do mais simples possível 3. Pensados primeiro para humanos e só depois para as máquinas 4. Reutilizar formatos amplamente adoptados 5. Modulares e para serem embebidos 6. Permitir e encorajar desenvolvimento, conteúdo e serviços descentralizados Wednesday, June 3, 2009
  • 20. microformatos juntando as peças do puzzle Introdução Que formatos existem? Especificações (7) hCard rel-tag VoteLinks hCalendar rel-license XFN rel-nofollow Wednesday, June 3, 2009
  • 21. microformatos juntando as peças do puzzle Introdução Que formatos existem? “Drafts” (9) hAtom rel-directory xfolk hResume rel-enclosure adr hReview rel-home geo hAudio rel-payment Wednesday, June 3, 2009
  • 22. microformatos juntando as peças do puzzle Introdução “ Show! Me! The money!” Wednesday, June 3, 2009
  • 23. microformatos juntando as peças do puzzle Introdução Antes <p> <a href=”http://andr3.net”>André Luís</a> </p> Wednesday, June 3, 2009
  • 24. microformatos juntando as peças do puzzle Introdução Depois <p class=”vcard”> <a class=”fn url” href=”http://andr3.net”>André Luís</a> </p> Já temos um cartão de visita! (hcard) Wednesday, June 3, 2009
  • 25. microformatos juntando as peças do puzzle Introdução Imaginemos... Windows Contacts + 2 cliques Address Book http://www.blueflavor.com/people/keith-robinson/ Telefones Wednesday, June 3, 2009
  • 26. microformatos juntando as peças do puzzle Introdução Imaginemos... Outlook + 2 cliques iCal http://shift.pt/page/schedule/ Telefones Wednesday, June 3, 2009
  • 27. microformatos juntando as peças do puzzle Introdução Mais vantagens... Simplicidade DRY - Não duplicação Baixo esforço de implementação Portabilidade de conteúdos (dados) Aumento da utilidade dos serviços! Efeitos secundários Uniformização do HTML produzido entre projectos Permite uniformização visual (via folhas de estilo) Wednesday, June 3, 2009
  • 28. microformatos juntando as peças do puzzle Introdução Beneficiários? Páginas Públicas Páginas Privadas c/ login Utilizadores ou Visitantes Serviços Externos Wednesday, June 3, 2009
  • 29. microformatos juntando as peças do puzzle Introdução Quem Publica? ...etc. Wednesday, June 3, 2009
  • 30. microformatos juntando as peças do puzzle Introdução Quem Consome? Wednesday, June 3, 2009
  • 31. microformatos juntando as peças do puzzle Introdução Wednesday, June 3, 2009
  • 32. microformatos juntando as peças do puzzle Introdução Números (3 de Junho de 2009) 1. hCard 1,390,000,000 páginas (!!!!!) 2. hAtom 614,000,000 páginas 3. XFN 398,000,000 páginas 4. hCalendar 72,100,000 páginas 5. hReview 36,400,000 páginas searchmonkeyid:com.yahoo.page.uf.<format> Wednesday, June 3, 2009
  • 33. microformatos juntando as peças do puzzle Introdução E mais... RDFa Wednesday, June 3, 2009
  • 34. microformatos juntando as peças do puzzle Introdução Google Rich Snippets http://whit.me/googleufs Wednesday, June 3, 2009
  • 35. microformatos juntando as peças do puzzle Introdução Google Rich Snippets HE RE BE DR AG ONS http://whit.me/googleufs ! Wednesday, June 3, 2009
  • 36. microformatos juntando as peças do puzzle Introdução Google Rich Snippets http://whit.me/googleufs Rich Snippets give users convenient summary information about their search results at a glance. We are currently supporting data about reviews and people. When searching for a product or service, users can easily see reviews and ratings, and when searching for a person, they’ll get help distinguishing between people with the same name. It’s a simple change to the display of search results, yet our experiments have shown that users find the new data valuable—if they see useful and relevant information from the page, they are more likely to click through. Wednesday, June 3, 2009
  • 37. microformatos juntando as peças do puzzle Introdução Google Rich Snippets http://whit.me/googleufs + RDFa Wednesday, June 3, 2009
  • 38. microformatos juntando as peças do puzzle Introdução Utilizador: “Como é que eu uso isso?” Wednesday, June 3, 2009
  • 39. microformatos juntando as peças do puzzle Como usar? Como usar no dia-a-dia? Como usar nos nossos sites? Wednesday, June 3, 2009
  • 40. microformatos juntando as peças do puzzle Como usar? Addon para Firefox: Operator https://addons.mozilla.org/en-US/firefox/addon/4106 Wednesday, June 3, 2009
  • 41. microformatos juntando as peças do puzzle Como usar? Addon para Firefox: Operator https://addons.mozilla.org/en-US/firefox/addon/4106 Bookmarklet: Firefox, Opera, Safari, IE6, IE7 http://leftlogic.com/lounge/articles/microformats_bookmarklet/ Wednesday, June 3, 2009
  • 42. microformatos juntando as peças do puzzle Como usar? Addon para Firefox: Operator https://addons.mozilla.org/en-US/firefox/addon/4106 Bookmarklet: Firefox, Opera, Safari, IE6, IE7 http://leftlogic.com/lounge/articles/microformats_bookmarklet/ Oomph! - Microformats toolkit (Microsoft/MIX online) http://visitmix.com/Lab/Oomph Plugin ie7+8 .js em jQuery Temas em css Windows Live Writer http://rhizohm.net/contact.html Wednesday, June 3, 2009
  • 43. microformatos juntando as peças do puzzle Como usar? Addon para Firefox: Operator https://addons.mozilla.org/en-US/firefox/addon/4106 Bookmarklet: Firefox, Opera, Safari, IE6, IE7 https://addons.mozilla.org/en-US/firefox/addon/4106 Oomph! - Microformats toolkit (Microsoft/MIX online) http://visitmix.com/Lab/Oomph IE8 - Webslices/hAtom http://microsoft.com/windows/internet-explorer/beta/ Wednesday, June 3, 2009
  • 44. microformatos juntando as peças do puzzle Como usar? Addon para Firefox: Operator https://addons.mozilla.org/en-US/firefox/addon/4106 Bookmarklet: Firefox, Opera, Safari, IE6, IE7 https://addons.mozilla.org/en-US/firefox/addon/4106 Oomph! - Microformats toolkit (Microsoft/MIX online) http://visitmix.com/Lab/Oomph IE8 - Webslices/hAtom http://microsoft.com/windows/internet-explorer/beta/ Mas não só. Wednesday, June 3, 2009
  • 45. microformatos juntando as peças do puzzle Como usar? X2V (Brian Suda) http://suda.co.uk/projects/X2V/ link X2V http://suda.co.uk/projects/microformats/hcalendar/get-cal.php?uri=<endereço web> Wednesday, June 3, 2009
  • 46. microformatos juntando as peças do puzzle Como usar? X2V (Brian Suda) http://suda.co.uk/projects/X2V/ Magia tidy+xsl link X2V http://suda.co.uk/projects/microformats/hcalendar/get-cal.php?uri=<endereço web> Wednesday, June 3, 2009
  • 47. microformatos juntando as peças do puzzle Como usar? X2V (Brian Suda) http://suda.co.uk/projects/X2V/ Magia tidy+xsl link X2V iCal (.ics) http://suda.co.uk/projects/microformats/hcalendar/get-cal.php?uri=<endereço web> Wednesday, June 3, 2009
  • 48. microformatos juntando as peças do puzzle Como usar? X2V (Brian Suda) http://suda.co.uk/projects/X2V/ Magia tidy+xsl link X2V iCal (.ics) http://suda.co.uk/projects/microformats/hcalendar/get-cal.php?uri=<endereço web> Wednesday, June 3, 2009
  • 49. microformatos juntando as peças do puzzle Como usar? X2V (Brian Suda) http://suda.co.uk/projects/X2V/ Análogo para hCards. http://suda.co.uk/projects/microformats/hcard/get-contact.php?uri=<endereço web> hCard(s) vCards (.vcf) Wednesday, June 3, 2009
  • 50. microformatos juntando as peças do puzzle Como usar? X2V (Brian Suda) http://suda.co.uk/projects/X2V/ http://suda.co.uk/projects/microformats/hcalendar/get-cal.php?uri=http://shift.pt/page/schedule webcal://suda.co.uk/projects/microformats/... QR Code http://reader.kaywa.com Wednesday, June 3, 2009
  • 51. microformatos juntando as peças do puzzle Como usar? Interligação de perfis blog Google Social Graph API code.google.com/apis/socialgraph/ Wednesday, June 3, 2009
  • 52. microformatos juntando as peças do puzzle Como usar? Interligação de perfis XFN Explorer http://workshop.andr3.net/xfnexplorer Wednesday, June 3, 2009
  • 53. microformatos juntando as peças do puzzle Como usar? Consolidação de perfis Identify (by Glenn Jones) http://lab.madgex.com/identify Wednesday, June 3, 2009
  • 54. microformatos juntando as peças do puzzle Como usar? Portabilidade dos Dados dopplr.com Wednesday, June 3, 2009
  • 55. microformatos juntando as peças do puzzle Como usar? Recuperação de Dados (Funny story...) http://workshop.andr3.net/de.fibrillator/ 1. Google Feeds Archive 2. Microformatos (xfolk) bookmarks.html RSS JSON Wednesday, June 3, 2009
  • 56. microformatos juntando as peças do puzzle Como usar? Portabilidade dos Dados 7 de Setembro de 2008 O Fim dos utilizadores tabula rasa? http://slideshare.net/andr3/ Wednesday, June 3, 2009
  • 57. microformatos juntando as peças do puzzle Como publicar? Wednesday, June 3, 2009
  • 58. microformatos juntando as peças do puzzle Como publicar? POSH Plain Old Semantic HTML 1. Código Validado http://validator.w3.org 4. Remover links anorécticos <a name=”noticia”></a> 2. Deixar de usar tabelas por 5. Usar classes com valor motivos de apresentação, GIFs semântico transparentes e HTML de apresentação. 3. Corrigir <B>ed & <BR>eakfast Wednesday, June 3, 2009
  • 59. microformatos juntando as peças do puzzle Como publicar? Design Patterns rel abbr datetime class grdloizaga Wednesday, June 3, 2009
  • 60. microformatos juntando as peças do puzzle Como publicar? Padrão class This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters. (HTML 4) Wednesday, June 3, 2009
  • 61. microformatos juntando as peças do puzzle Como publicar? Padrão class <p class=”vcard”> <a class=”url fn” href=”http://andr3.net”>André Luís</a> </p> Wednesday, June 3, 2009
  • 62. microformatos juntando as peças do puzzle Como publicar? Padrão rel This attribute describes the relationship from the current document to the anchor specified by the href attribute. The value of this attribute is a space-separated list of link types. (HTML 4) <a> <link> Wednesday, June 3, 2009
  • 63. microformatos juntando as peças do puzzle Como publicar? Padrão rel <p class=”vcard”> <a class=”fn url” rel=”me” href=”http://andr3.net”>André Luís</a> </p> Wednesday, June 3, 2009
  • 64. microformatos juntando as peças do puzzle Como publicar? Padrão abbr The content of the ABBR and ACRONYM elements specifies the abbreviated expression itself, as it would normally appear in running text. The title attribute of these elements may be used to provide the full or expanded form of the expression. (HTML4) Wednesday, June 3, 2009
  • 65. microformatos juntando as peças do puzzle Como publicar? Padrão abbr <p class=”vcard”> <a class=”url” rel=”me” href=”http://andr3.net”> <abbr class=”fn” title=”André Luís”>André</abbr> </p> Wednesday, June 3, 2009
  • 66. microformatos juntando as peças do puzzle Como publicar? Padrão datetime <p class=”vevent”><span class=”fn”>SHiFT</span> <abbr class=”dtstart” title=”2008-10-15”>15 de Outubro </abbr> </p> data em formato ISO 8601 exemplos 2008-10-15 20081015 2008-10-15T10:00 2008-10-15T10:00+05 2008-10-15T10:00Z Wednesday, June 3, 2009
  • 67. microformatos juntando as peças do puzzle Como publicar? <div class=”vevent”> <h3 class=”category”>Brasileira</h3> <h1> <a class=”summary” href=quot;/detalhe_evento.aspx?id=48568quot;> Atenção Adriana Calcanhotto - «Maré» </a></h1> <h2><a class=”location” href=quot;detalhe_local.aspx?id=146quot;> Coliseu do Porto</a></h2> <h3><abbr class=”dtstart” title=”2008-05-29”>29-05-2008</abbr> a <abbr class=”dtend” title=”2008-05-31”>30-05-2008</abbr></h3> </div> ! Wednesday, June 3, 2009
  • 68. microformatos juntando as peças do puzzle Como publicar? <div class=”vevent”> <h3 class=”category”>Brasileira</h3> <h1> <a class=”summary” href=quot;/detalhe_evento.aspx?id=48568quot;> Atenção Adriana Calcanhotto - «Maré» </a></h1> <h2><a class=”location” href=quot;detalhe_local.aspx?id=146quot;> Coliseu do Porto</a></h2> <h3><abbr class=”dtstart” title=”2008-05-29T21:00+01”>29-05-2008</abbr> a <abbr class=”dtend” title=”2008-05-30T21:00:+01”>30-05-2008</abbr></h3> </div>  Wednesday, June 3, 2009
  • 69. microformatos juntando as peças do puzzle Como publicar? Padrão datetime <abbr class=”dtstart” title=”20070312T1700-06”>12 de Março de 2007, a partir das17h </abbr> 20 070 312 T 1700 - 06 “ Twenty million seventy-thousand three-hundred ” twelve tee seventeen-hundred dash zero six. Jaws 8 + IE 7 fonte: hAccessibility @ Webstandards.org http://www.webstandards.org/2007/04/27/haccessibility/ Wednesday, June 3, 2009
  • 70. microformatos juntando as peças do puzzle Como publicar? Padrão datetime <abbr class=”dtstart” title=”20070312T1700-06”>12 de Março de 2007, a partir das17h </abbr> 20 070 312 T 1700 - 06 “ Twenty million seventy-thousand three-hundred ” twelve tee seventeen-hundred dash zero six. Jaws 8 + IE 7 fonte: hAccessibility @ Webstandards.org http://www.webstandards.org/2007/04/27/haccessibility/ Wednesday, June 3, 2009
  • 71. microformatos juntando as peças do puzzle Como publicar? BBC http://www.bbc.co.uk/blogs/radiolabs/2008/06/removing_microformats_from_bbc.shtml Wednesday, June 3, 2009
  • 72. microformatos juntando as peças do puzzle Como publicar? Padrão value class (experimental) http://tr.im/valueclass <span class=quot;telquot;> <span class=quot;typequot;>Home</span>: <span class=quot;valuequot;>+44.415.555.122</span> </span> Wednesday, June 3, 2009
  • 73. microformatos juntando as peças do puzzle Como publicar? Padrão value class (experimental) http://tr.im/valueclass <span class=quot;telquot;> <span class=quot;typequot;>Home</span>: <span class=quot;valuequot;>+44.</span> (0) <span class=”value”>415.555.122</span> </span> Wednesday, June 3, 2009
  • 74. microformatos juntando as peças do puzzle Como publicar? Padrão value class (experimental) http://tr.im/valueclass <span class=quot;dtstartquot;> <span class=quot;value-titlequot; title=”2009-06-03”> yesterday</span> Wednesday, June 3, 2009
  • 75. microformatos juntando as peças do puzzle Como publicar? hCard Wednesday, June 3, 2009
  • 76. microformatos juntando as peças do puzzle Sujar as mãos Propriedades raíz: obrigatórias facultativas vcard fn nickname title url role n* email org adr category geo note photo class logo key sound ... bday Wednesday, June 3, 2009
  • 77. microformatos juntando as peças do puzzle Sujar as mãos Exemplo <div class=quot;outLinequot;> <div class=quot;inBoxUtilizadorquot;> <div class=quot;topoUtilizadorquot;><strong>andr3</strong></div> <div class=quot;infoquot;> <div id=quot;infopicsquot;><a href=quot;perfilamigo.html?uid=75quot;> <img src=quot;http://social.imgs.sapo.pt/8a/0b/df/75/ pro_n733982142_189405_9522.jpgquot; border=quot;0quot; /> </a></div> ... Wednesday, June 3, 2009
  • 78. microformatos juntando as peças do puzzle Sujar as mãos Exemplo <div class=quot;outLine vcardquot;> <div class=quot;inBoxUtilizadorquot;> <div class=quot;topoUtilizador fn nicknamequot;><strong>andr3</strong></div> <div class=quot;infoquot;> <div id=quot;infopicsquot;><a class= quot;urlquot; href=quot;perfilamigo.html?uid=75quot;> <img class=quot;photoquot; src=quot;http://social.imgs.sapo.pt/8a/0b/df/75/ pro_n733982142_189405_9522.jpgquot; border=quot;0quot; /> </a></div> ... Wednesday, June 3, 2009
  • 79. microformatos pequenas peças do puzzle Como publicar? hCalendar pyrii Wednesday, June 3, 2009
  • 80. microformatos pequenas peças do puzzle Sujar as mãos Propriedades raíz: obrigatórias facultativas vcalendar* summary dtend duration vevent dtstart description category url location rrule rdate uid geo (latitude, longitude) ... Wednesday, June 3, 2009
  • 81. microformatos pequenas peças do puzzle Como publicar? rel-tag peskymac Wednesday, June 3, 2009
  • 82. microformatos pequenas peças do puzzle Sujar as mãos links para “tags” Wednesday, June 3, 2009
  • 83. microformatos pequenas peças do puzzle Sujar as mãos Exemplo <a href=”/tag/microformatos”> microformatos </a> Wednesday, June 3, 2009
  • 84. microformatos pequenas peças do puzzle Sujar as mãos Exemplo <a rel=”tag” href=”/tag/microformatos”> microformatos </a> Wednesday, June 3, 2009
  • 85. microformatos pequenas peças do puzzle Como publicar? Exemplo <a rel=”tag” href=”/tag/microformatos”> microformatos </a> não esta esta é a tag Wednesday, June 3, 2009
  • 86. microformatos pequenas peças do puzzle Sujar as mãos Exemplo /tag/microformatos?tag=banana#split esta é a tag Wednesday, June 3, 2009
  • 87. microformatos juntando as peças do puzzle Como consumir? Wednesday, June 3, 2009
  • 88. microformatos juntando as peças do puzzle Como consumir? HTML Scraping? Wednesday, June 3, 2009
  • 89. microformatos juntando as peças do puzzle Como consumir? Parsers/Scrapers Perl Cognition http://buzzword.org.uk/cognition/ Toby Inkster (adr, geo, hatom, haudio, hcalendar, hcard, hrecipe, hresume, hreview, measure, rel-enclosure, rel-license, rel-tag, species, xfn, xfolk) + RDFa, eRDF, GRDDL, RDF/XML... WS Optimus http://microformatique.com/optimus/ Dmitry Baranovskiy (hcard, hcalendar, hreview, hatom, hresume, xfolk, geo, adr, xfn, vote-links, hlisting, haudio, rel-nofollow, rel-license, rel-tag) Ruby mofo http://mofo.rubyforge.org/ Chris Wanstrath (hcard, hcalendar, hreview, hatom, hresume, geo, adr, xfn) Wednesday, June 3, 2009
  • 90. microformatos juntando as peças do puzzle Como consumir? Parsers/Scrapers WS Yahoo! Query Language http://developer.yahoo.com/yql/ Yahoo! select * from microformats where url = ‘http://social.sapo.pt/’; JS Sumo http://e.xu.sl.pt Dan Webb Wednesday, June 3, 2009
  • 91. microformatos juntando as peças do puzzle Como consumir? WS Optimus http://microformatique.com/optimus/ Dmitry Baranovskiy (hcard, hcalendar, hreview, hatom, hresume, xfolk, geo, adr, xfn, vote-links, hlisting, haudio, rel-nofollow, rel-license, rel-tag) Wednesday, June 3, 2009
  • 92. microformatos juntando as peças do puzzle Como consumir? WS Optimus http://microformatique.com/optimus/ Dmitry Baranovskiy (hcard, hcalendar, hreview, hatom, hresume, xfolk, geo, adr, xfn, vote-links, hlisting, haudio, rel-nofollow, rel-license, rel-tag) Wednesday, June 3, 2009
  • 93. microformatos juntando as peças do puzzle Como consumir? WS Optimus http://microformatique.com/optimus/ Dmitry Baranovskiy (hcard, hcalendar, hreview, hatom, hresume, xfolk, geo, adr, xfn, vote-links, hlisting, haudio, rel-nofollow, rel-license, rel-tag) Wednesday, June 3, 2009
  • 94. microformatos pequenas peças do puzzle Sujar as mãos Transformadores hCard+hCal X2V http://suda.co.uk/projects/X2V/ Brian Suda (disponibiliza .xsl’s) vários + RDF TransFormr http://transformr.co.uk/ Martin McEvoy (com download para PHP) Wednesday, June 3, 2009
  • 95. microformatos juntando as peças do puzzle That’s all, Folks! Obrigado. <p class=”vcard”> <a class=”fn url” href=”http://andr3.net”>André Luís</a> <a class=”email” href=”mailto:aluis@co.sapo.pt”> aluis@co.sapo.pt</a> </p> http://microformats.org/wiki/ http://talks.andr3.net/2009/ufs_sessions.pdf creative commons http://slideshare.net/andr3 attribution non-commercial share-alike 3.0 Wednesday, June 3, 2009
  • 96. microformatos juntando as peças do puzzle Créditos Teia - http://www.flickr.com/photos/bitzcelt/2903751010/ Tim Berners-Lee - http://www.flickr.com/photos/pixelydixel/2712988953/ Lego - http://flickr.com/photos/grdloizaga/817443503/ Calendário - http://flickr.com/photos/pyrii/2400515074/ Etiqueta - http://flickr.com/photos/peskymac/1217139213/ Wednesday, June 3, 2009