{"id":134,"date":"2017-12-10T22:34:00","date_gmt":"2017-12-10T22:34:00","guid":{"rendered":"https:\/\/alistapart.com\/es\/?post_type=article&p=134"},"modified":"2021-04-02T23:38:14","modified_gmt":"2021-04-02T23:38:14","slug":"introduccion-a-rdfa-parte-2","status":"publish","type":"article","link":"https:\/\/alistapart.com\/es\/article\/introduccion-a-rdfa-parte-2\/","title":{"rendered":"Introducci\u00f3n a RDFa (Parte 2)"},"content":{"rendered":"\n

En la primera parte de esta serie<\/a>, vimos c\u00f3mo las caracter\u00edsticas sem\u00e1nticas, normalmente recluidas a la cabecera del documento HTML pueden ser utilizadas para a\u00f1adir riqueza sem\u00e1ntica a los elementos del cuerpo. Sobre la marcha, definimos 6 reglas de RDFa:<\/p>\n\n\n\n

  1. Los elementos link<\/code> y a<\/code> implican que existe una relaci\u00f3n entre el documento actual y alg\u00fan otro documento; el atributo @rel<\/code> nos permite proveerle de un valor que describa mejor la relaci\u00f3n.<\/li>
  2. Los atributos @rel<\/code> y @href<\/code> ya no son exclusivos de los elementos a<\/code> y link<\/code>, sino que tambi\u00e9n pueden ser utilizados con img<\/code> para indicar una relaci\u00f3n entre una imagen y alg\u00fan otro elemento.<\/li>
  3. En HTML ordinario, las propiedades esta\u0144 definidas en el elemento head<\/code> del documento, utilizando @content<\/code> con meta<\/code>. En los documentos HTML que utilizan RDFa, @content<\/code> puede ser utilizado para definir propiedades en cualquier<\/em> elemento.<\/li>
  4. Aunque HTML utiliza la propiedad @name<\/code> para definir el nombre de una propiedad en meta<\/code>, no puede ser utilizado en otros elementos, por lo que RDFa brinda el nuevo atributo llamado @property<\/code>.<\/li>
  5. Si el atributo @content<\/code> no est\u00e1 presente, entonces el elemento de la propiedad ser\u00e1 definido utilizando el texto en l\u00ednea del elemento.<\/li>
  6. Si el atributo @content<\/code> est\u00e1 presente, este sobreescribe el valor del texto en l\u00ednea del elemento para definir el valor de la propiedad.<\/li><\/ol>\n\n\n\n

    En esta segunda parte, vamos a aprender c\u00f3mo a\u00f1adir propiedades a una imagen, y c\u00f3mo a\u00f1adir metadata<\/em> a cualquier elemento\u2500y vamos a a\u00f1adir unas cu\u00e1ntas reglas m\u00e1s a esa lista.<\/p>\n\n\n\n

    A\u00f1adiendo propiedades a una imagen<\/h3>\n\n\n\n

    En la primera parte, discutimos el hecho de que en HTML ordinario, @rel<\/code> se utiliza para especificar una relaci\u00f3n entre el documento actual, y otro documento. Tambi\u00e9n dijimos que RDFa generaliza esta funci\u00f3n, para que @rel<\/code> pueda ser utilizado en un elemento img<\/code>; la relaci\u00f3n expresada es entre la imagen<\/em> (en el atributo @src<\/code>) y otro documento. El mismo principio aplica cuando las propiedades <\/em>se encuentran en la etiqueta img<\/code>: estas tambi\u00e9n aplicar\u00e1n a la imagen<\/em>, en vez de aplicar al documento actual.<\/p>\n\n\n\n

    Por ejemplo, para indicar cu\u00e1ndo fue creada una imagen, podemos hacer lo siguiente:<\/p>\n\n\n\n

    <img src=\"image1.png\" property=\"dc:created\" content=\"2009-03-22\" \/>
    <img src=\"image2.png\" property=\"dc:created\" content=\"2009-05-01\" \/><\/code><\/pre>\n\n\n\n
    Regla #7:<\/h2>\n\n\n\n
    Con HTML ordinario solo podemos definir propiedades que se relacionan con la p\u00e1gina misma, pero RDFa permite definir propiedades para una imagen tambi\u00e9n.<\/p>\n\n\n\n
    RDFa tambi\u00e9n permite expresar tanto una propiedad como una relaci\u00f3n para la misma imagen:<\/p>\n\n\n\n
    <img src=\"image1.png\" rel=\"license\" href=\"http:\/\/creativecommons.org\/licenses\/by-sa\/3.0\/\" property=\"dc:created\" content=\"2009-05-01\" \/><\/code><\/pre>\n\n\n\n
    A\u00f1adiendo metadata sobre cualquier elemento<\/h3>\n\n\n\n
    Generalizando, hemos logrado tres pasos importantes hasta ahora, seg\u00fan hemos evolucionado de HTML b\u00e1sico a RDFa:<\/p>\n\n\n\n