Microformatos - 2009 - Juntando as Peças do Puzzle

André Luís
André LuísFrontend Engineering Manager at GitLab
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
1 of 96

Recommended

Dr. © ou como eu deixei de me preocupar e passei a adorar licenças permissivas by
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 permissivasAndré Luís
1.7K views80 slides
We're not designing posters, here! by
We're not designing posters, here!We're not designing posters, here!
We're not designing posters, here!André Luís
1.9K views88 slides
Designers & Developers by
Designers & DevelopersDesigners & Developers
Designers & DevelopersAndré Luís
1.2K views50 slides
Responsive Web Design: Uma História das Trincheiras (sapo.pt) by
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
2.9K views142 slides
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PT by
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PTLições Práticas de Semântica com HTML5 — 2º evento HTML5PT
Lições Práticas de Semântica com HTML5 — 2º evento HTML5PTAndré Luís
1.9K views98 slides
HTML5 - A nova era da Web by
HTML5 - A nova era da WebHTML5 - A nova era da Web
HTML5 - A nova era da WebAndré Luís
3.3K views175 slides

More Related Content

Recently uploaded

.conf Go 2023 - Data analysis as a routine by
.conf Go 2023 - Data analysis as a routine.conf Go 2023 - Data analysis as a routine
.conf Go 2023 - Data analysis as a routineSplunk
93 views12 slides
Business Analyst Series 2023 - Week 3 Session 5 by
Business Analyst Series 2023 -  Week 3 Session 5Business Analyst Series 2023 -  Week 3 Session 5
Business Analyst Series 2023 - Week 3 Session 5DianaGray10
209 views20 slides
handbook for web 3 adoption.pdf by
handbook for web 3 adoption.pdfhandbook for web 3 adoption.pdf
handbook for web 3 adoption.pdfLiveplex
19 views16 slides
AI: mind, matter, meaning, metaphors, being, becoming, life values by
AI: mind, matter, meaning, metaphors, being, becoming, life valuesAI: mind, matter, meaning, metaphors, being, becoming, life values
AI: mind, matter, meaning, metaphors, being, becoming, life valuesTwain Liu 刘秋艳
35 views16 slides
AMAZON PRODUCT RESEARCH.pdf by
AMAZON PRODUCT RESEARCH.pdfAMAZON PRODUCT RESEARCH.pdf
AMAZON PRODUCT RESEARCH.pdfJerikkLaureta
15 views13 slides
The Research Portal of Catalonia: Growing more (information) & more (services) by
The Research Portal of Catalonia: Growing more (information) & more (services)The Research Portal of Catalonia: Growing more (information) & more (services)
The Research Portal of Catalonia: Growing more (information) & more (services)CSUC - Consorci de Serveis Universitaris de Catalunya
73 views25 slides

Recently uploaded(20)

.conf Go 2023 - Data analysis as a routine by Splunk
.conf Go 2023 - Data analysis as a routine.conf Go 2023 - Data analysis as a routine
.conf Go 2023 - Data analysis as a routine
Splunk93 views
Business Analyst Series 2023 - Week 3 Session 5 by DianaGray10
Business Analyst Series 2023 -  Week 3 Session 5Business Analyst Series 2023 -  Week 3 Session 5
Business Analyst Series 2023 - Week 3 Session 5
DianaGray10209 views
handbook for web 3 adoption.pdf by Liveplex
handbook for web 3 adoption.pdfhandbook for web 3 adoption.pdf
handbook for web 3 adoption.pdf
Liveplex19 views
AI: mind, matter, meaning, metaphors, being, becoming, life values by Twain Liu 刘秋艳
AI: mind, matter, meaning, metaphors, being, becoming, life valuesAI: mind, matter, meaning, metaphors, being, becoming, life values
AI: mind, matter, meaning, metaphors, being, becoming, life values
AMAZON PRODUCT RESEARCH.pdf by JerikkLaureta
AMAZON PRODUCT RESEARCH.pdfAMAZON PRODUCT RESEARCH.pdf
AMAZON PRODUCT RESEARCH.pdf
JerikkLaureta15 views
Igniting Next Level Productivity with AI-Infused Data Integration Workflows by Safe Software
Igniting Next Level Productivity with AI-Infused Data Integration Workflows Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Safe Software225 views
Web Dev - 1 PPT.pdf by gdsczhcet
Web Dev - 1 PPT.pdfWeb Dev - 1 PPT.pdf
Web Dev - 1 PPT.pdf
gdsczhcet55 views
RADIUS-Omnichannel Interaction System by RADIUS
RADIUS-Omnichannel Interaction SystemRADIUS-Omnichannel Interaction System
RADIUS-Omnichannel Interaction System
RADIUS15 views
Understanding GenAI/LLM and What is Google Offering - Felix Goh by NUS-ISS
Understanding GenAI/LLM and What is Google Offering - Felix GohUnderstanding GenAI/LLM and What is Google Offering - Felix Goh
Understanding GenAI/LLM and What is Google Offering - Felix Goh
NUS-ISS41 views
Combining Orchestration and Choreography for a Clean Architecture by ThomasHeinrichs1
Combining Orchestration and Choreography for a Clean ArchitectureCombining Orchestration and Choreography for a Clean Architecture
Combining Orchestration and Choreography for a Clean Architecture
ThomasHeinrichs169 views
.conf Go 2023 - How KPN drives Customer Satisfaction on IPTV by Splunk
.conf Go 2023 - How KPN drives Customer Satisfaction on IPTV.conf Go 2023 - How KPN drives Customer Satisfaction on IPTV
.conf Go 2023 - How KPN drives Customer Satisfaction on IPTV
Splunk88 views
The Importance of Cybersecurity for Digital Transformation by NUS-ISS
The Importance of Cybersecurity for Digital TransformationThe Importance of Cybersecurity for Digital Transformation
The Importance of Cybersecurity for Digital Transformation
NUS-ISS27 views
Perth MeetUp November 2023 by Michael Price
Perth MeetUp November 2023 Perth MeetUp November 2023
Perth MeetUp November 2023
Michael Price15 views
STPI OctaNE CoE Brochure.pdf by madhurjyapb
STPI OctaNE CoE Brochure.pdfSTPI OctaNE CoE Brochure.pdf
STPI OctaNE CoE Brochure.pdf
madhurjyapb12 views

Featured

ChatGPT and the Future of Work - Clark Boyd by
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
21.3K views69 slides
Getting into the tech field. what next by
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
5.2K views22 slides
Google's Just Not That Into You: Understanding Core Updates & Search Intent by
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
5.9K views99 slides
How to have difficult conversations by
How to have difficult conversations How to have difficult conversations
How to have difficult conversations Rajiv Jayarajah, MAppComm, ACC
4.5K views19 slides
Introduction to Data Science by
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data ScienceChristy Abraham Joy
82.2K views51 slides
Time Management & Productivity - Best Practices by
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
169.7K views42 slides

Featured(20)

ChatGPT and the Future of Work - Clark Boyd by Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd21.3K views
Getting into the tech field. what next by Tessa Mero
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero5.2K views
Google's Just Not That Into You: Understanding Core Updates & Search Intent by Lily Ray
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray5.9K views
Time Management & Productivity - Best Practices by Vit Horky
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
Vit Horky169.7K views
The six step guide to practical project management by MindGenius
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
MindGenius36.6K views
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright... by RachelPearson36
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
RachelPearson3612.6K views
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present... by Applitools
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Applitools55.4K views
12 Ways to Increase Your Influence at Work by GetSmarter
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
GetSmarter401.6K views
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G... by DevGAMM Conference
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
DevGAMM Conference3.6K views
Barbie - Brand Strategy Presentation by Erica Santiago
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy Presentation
Erica Santiago25.1K views
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well by Saba Software
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Saba Software25.2K views
Introduction to C Programming Language by Simplilearn
Introduction to C Programming LanguageIntroduction to C Programming Language
Introduction to C Programming Language
Simplilearn8.4K views
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr... by Palo Alto Software
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...
The Pixar Way: 37 Quotes on Developing and Maintaining a Creative Company (fr...
Palo Alto Software88.3K views
9 Tips for a Work-free Vacation by Weekdone.com
9 Tips for a Work-free Vacation9 Tips for a Work-free Vacation
9 Tips for a Work-free Vacation
Weekdone.com7.2K views
How to Map Your Future by SlideShop.com
How to Map Your FutureHow to Map Your Future
How to Map Your Future
SlideShop.com275.1K views

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