Cómo usar contenido protegido por Creative Commons
Por Iván Bustos en Legal. Actualizado: 26/5/2011. Visitado 2776 veces. Compartir en FacebookTwitterLinkedIn
Dificultad: Principiante.
Requerimientos: No hay requerimientos para seguir este tutorial.
Tiempo estimado para completar: 10 minutos.
Si ya leíste mi artículo acerca del uso de imagenes sin derechos de autor en mi página web habrás notado que es sencillo encontrar y hacer uso de imagenes sin incumplir con las normas establecidas de los derechos de autor.
Mi método favorito es simplemente ir a la página de Creative Commons y allí en el banco de imagenes, buscar la que me sirva dependiendo claro está de la licencia Creative Commons que esta utilice.
¿Cómo darle el crédito al autor correctamente?
Como bien se sabe, todas las licencias Creative Commons requieren que uno le de el crédito apropiado al creador. ¿Pero cómo se puede hacer esto? – ¿Será suficiente con simplemente poner un “Creado por” al lado de la imagen? – En teoría sí, al hacer esto efectivamente le estás dando el crédito respectivo al autor. Sin embargo, el creador original no podrá nunca saber si tu estás usando su imagen a menos de que tú le escribas anunciando que harás uso de su trabajo.
Al poner un texto simple “Creado por” realmente lo que estamos haciendo es crear un sitio web desorganizado y poco semántico tan solo legible por seres humanos y no por aplicaciones y servicios web (máquinas). Por esta razón, se necesita con urgencia un modo de representar el uso de artes protegidas mediante Creative Commons de una manera semántica y correcta.
Creative Commons ofrece una solución para esto que funciona mediante el uso de RDF. Aun que esta tecnología no es muy práctica para esta labor, se puede usar una técnica conocida como RDFa la cual permite usar RDF directamente en el XHTML. De esta manera podremos darle el crédito al autor de una manera más semántica y poderosa que será legible tanto para las máquinas como para los seres humanos.
Digamos por ejemplo que yo necesito usar una fotografía muy linda de mi ciudad natal tomada por Tijs Zwinkels en mi página web (yo sé, estoy cometiendo el error que acabo de mencionar, pero les prometo que es con fines ilustrativos unicamente). Para darle a Tijs su crédito respectivo podemos empezar a crear la respectiva atribución de la siguiente manera:
Primero, necesitaremos una etiqueta que “contenga” la información de la imagen tal y como el gráfico en sí, el nombre del autor y la licencia que el autor ha implementado. Puede ser cualquier etiqueta que sea usada para contener otras etiquetas. (Ejemplos: <div>, <span>, <p>).
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
- <head>
- <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
- <meta name="author" content="Iván Bustos" />
- <meta name="robots" content="noindex" />
- <title>Ejemplo de uso Creative Commons</title>
- </head>
- <body>
- <p class="licensed-image">
- </p>
- </body>
- </html>
Lo sé. Tengo una tonta manía de nombrar las clases en inglés. En fin, ahora sí podremos incluir nuestra imagen en dicho espacio:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
- <head>
- <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
- <meta name="author" content="Iván Bustos" />
- <meta name="robots" content="noindex" />
- <title>Ejemplo de uso Creative Commons</title>
- </head>
- <body>
- <p class="licensed-image">
- <img src="foto_de_bogota.jpg" alt="Bogotá - Colombia" />
- <a rel="license" href="http://creativecommons.org/licenses/by-sa/2.0/">CC BY-SA 2.0</a>
- </p>
- </body>
- </html>
Luego de esto las cosas se ponen interesantes de verdad. Ya que lamentablemente aún no hay ningún Microformato que nos permita fácilmente crear licencias a través de metadatos basándonos únicamente en XHTML, no queda otra alternativa que usar RDFa para lograr el objetivo. Es curioso que ya exista una queja acerca de las fallas de los actuales microformatos (rel-license y hCard) en este sentido:
Escrito por Evan en http://microformats.org/wiki/rel-license-issues:
Issue 1: It’s not clear how to associate a license with part of a page, such as an image or embedded object in the page, or a single news entry on a news page. A typical use-case would be a Flickr page, for which the image is licensed under a CC license but the page itself is not.
Lo que haremos entonces es lo siguiente; ya que para crear un documento RDF por lo general es requerido usar espacios de nombres XML (XML Namespaces en inglés), necesitaremos crear uno para el prefijo que le pondremos a nuestra imagen así como su respectivo URI, el cual puede ser cualquier cadena de texto. Si no entiendes nada de lo que digo acá, te recomiendo le heches un vistazo a los excelentes tutoriales de XML ya disponibles en Internet. Para mi ejemplo, utilizaré como prefijo la cadena de texto ‘bog’ y como URI utilizaré la cadena de texto ‘http://www.estilocss.com/XGW1DXA23/’. Recuerda que nuestro URI puede ser literalmente cualquier cadena de texto. Dichos valores los asignaré a mi <p>. Veamos:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
- <head>
- <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
- <meta name="author" content="Iván Bustos" />
- <meta name="robots" content="noindex" />
- <title>Ejemplo de uso Creative Commons</title>
- </head>
- <body>
- <p class="licensed-image" xmlns:bog="http://www.estilocss.com/XGW1DXA23/">
- <img src="foto_de_bogota.jpg" alt="Bogotá - Colombia" />
- <a rel="license" href="http://creativecommons.org/licenses/by-sa/2.0/">CC BY-SA 2.0</a>
- </p>
- </body>
- </html>
Buen trabajo. Ahora, para cumplir con los requerimientos que nos sugiere Creative Commons, debemos incluir un atributo llamado ‘about’ justo en la etiqueta en la que creamos nuestro espacio de nombres donde anotaremos la dirección URL donde se encuentra el documento que queremos utilizar. En este caso, la fotografía de Bogotá se encuentra en esta dirección: http://www.flickr.com/photos/tijszwinkels/3854247170/. Siguiendo esta recomendación, tenemos lo siguiente:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
- <head>
- <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
- <meta name="author" content="Iván Bustos" />
- <meta name="robots" content="noindex" />
- <title>Ejemplo de uso Creative Commons</title>
- </head>
- <body>
- <p class="licensed-image" xmlns:bog="http://www.estilocss.com/XGW1DXA23/" about="http://www.flickr.com/photos/tijszwinkels/3854247170/">
- <img src="foto_de_bogota.jpg" alt="Bogotá - Colombia" />
- <a rel="license" href="http://creativecommons.org/licenses/by-sa/2.0/">CC BY-SA 2.0</a>
- </p>
- </body>
- </html>
Por último y para terminar la pieza final del rompecabezas, Creative Commons nos pide que creemos un Nombre (name) dentro de nuestro espacio de nombres (Namespace) llamado attributionURL al cual le asignaremos una cadena de texto conteniendo la dirección URL que el autor de la imagen requiere que usemos con el propósito de atribución. Lo interesante acá es que gracias a RDFa, cumpliremos dicha tarea usando simplemente nuestro viejo amigo <a> y su famoso atributo rel.
Según la licencia de la fotografía de Bogotá, el autor (o más bien Flickr®) nos pide que agreguemos un hipervínculo a ‘http://www.flickr.com/photos/tijszwinkels/’ que es la URL del perfil de Tijs en Flickr®. Por esta razón, lo haré de la siguiente manera:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
- <head>
- <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
- <meta name="author" content="Iván Bustos" />
- <meta name="robots" content="noindex" />
- <title>Ejemplo de uso Creative Commons</title>
- </head>
- <body>
- <p class="licensed-image" xmlns:bog="http://www.estilocss.com/XGW1DXA23/" about="http://www.flickr.com/photos/tijszwinkels/3854247170/">
- <img src="foto_de_bogota.jpg" alt="Bogotá - Colombia" />
- <a rel="bog:attributionURL" href="http://www.flickr.com/photos/tijszwinkels/">Tijs Zwinkels</a>
- <a rel="license" href="http://creativecommons.org/licenses/by-sa/2.0/">CC BY-SA 2.0</a>
- </p>
- </body>
- </html>
Nota que creé un nombre llamado ‘attributionURL’ dentro de mi espacio de nombres con prefijo ‘bog’ escribiendo bog:attributionURL. También nota que al contenido de mi <a> le asigné el nombre del autor, es decir ‘Tijs Zwinkels’ aunque prácticamente se le puede asignar lo que queramos ya que no es requerimiento.
¡En hora buena!. Hemos atribuido correctamente el crédito a Tijs Zwinkels por su trabajo. Nuestro código está más legible por máquinas aun que aún falta retocarlo un poco para que sea fácil de leer para seres humanos también. Simplemente le agregaré un poco de texto de la siguiente forma:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
- <head>
- <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
- <meta name="author" content="Iván Bustos" />
- <meta name="robots" content="noindex" />
- <title>Ejemplo de uso Creative Commons</title>
- </head>
- <body>
- <p class="licensed-image" xmlns:bog="http://www.estilocss.com/XGW1DXA23/" about="http://www.flickr.com/photos/tijszwinkels/3854247170/">
- <img src="foto_de_bogota.jpg" alt="Bogotá - Colombia" />
- Fotografía creada por <a rel="bog:attributionURL" href="http://www.flickr.com/photos/tijszwinkels/">Tijs Zwinkels</a> usada bajo una licencia
- <a rel="license" href="http://creativecommons.org/licenses/by-sa/2.0/">CC BY-SA 2.0</a>.
- </p>
- </body>
- </html>
¡Listo!. El resultado es una imagen atribuída correctamente a través de RDFa que es legible por seres humanos y máquinas a la vez. Puedes ver el resultado final acá.
Creative Commons ofrece un servicio de validación para lo que acabamos de hacer. Algo parecido al validador HTML de la W3C. Mira los resultados de dicho servicio al validar nuestro trabajo haciendo clic aquí.
Hacer esto genera un código XHTML que no es válido. ¿Se puede hacer algo para arreglarlo?
Al usar el atributo ‘about’ dentro de nuestra etiqueta contenedora habremos creado un código XHTML no válido desafortunadamente por la simple razón de que ese atributo no existe en las especificaciones del XHTML.
Es posible sin embargo, en vez de validar nuestro documento con ‘XHTML 1.0 Strict’ ó con ‘XHTML 1.1′, que podamos hacer dicha tarea usando el tipo de documento (o DOCTYPE) ‘XHTML+RDFa’. Al hacerlo, nuestro código XHTML será válido ante los ojos del validador de la W3C. He aquí el código final:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
- <head>
- <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
- <meta name="author" content="Iván Bustos" />
- <meta name="robots" content="noindex" />
- <title>Ejemplo de uso Creative Commons</title>
- </head>
- <body>
- <p class="licensed-image" xmlns:bog="http://www.estilocss.com/XGW1DXA23/" about="http://www.flickr.com/photos/tijszwinkels/3854247170/">
- <img src="foto_de_bogota.jpg" alt="Bogotá - Colombia" />
- Fotografía creada por <a rel="bog:attributionURL" href="http://www.flickr.com/photos/tijszwinkels/">Tijs Zwinkels</a> usada bajo una licencia
- <a rel="license" href="http://creativecommons.org/licenses/by-sa/2.0/">CC BY-SA 2.0</a>.
- </p>
- </body>
- </html>
Espero te haya sido útil mi tutorial. Espero comentarios y críticas. Te agradezco por leer y llegar hasta acá. Nuevamente pueden ver el resultado final de nuestro trabajo haciendo click aquí.
Iván Bustos, un desarrollador web en Colombia con más de 10 años de experiencia en el desarrollo de experiencias en línea, enamorado de los estándares web y del poder de JavaScript. Fundador de Estilocss.com y creador de IBForm.