sábado, 12 de julio de 2014

Cómo hacer nuestros propios Open Badges con Mozilla

Diseño de una insignia para Mozilla Open Badges 

Lo primero que necesitamos es diseñar nuestras insignias (badges); esta es una parte esencial. Si nuestro centro tiene pensado entregar insignias, la mejor opción sería que estuvieran ligadas visualmente al centro. La marca es muy importante hoy en día, sin importar si nuestro centro es privado o público; tener en cuenta los colores, fuentes y logotipos utilizados en nuestro centro es necesario si tenemos la intención de que las insignias sean reconocidas. El sitio Noun project nos brinda la posibilidad de conseguir iconos que podemos utilizar de forma gratuita en nuestras insignias.

Estructura de una Insignia


Una insignia es en realidad una foto; exactamente, se trata de una imagen .PNG. Cuando un usuario ha conseguido una insignia y esta aparece en un sitio web, el fichero PNG de la insignia se mostrará así:



Las insignias deben crearse con las especificaciones de Mozilla; con los datos en formato JSON y enlazando a la cuenta del alumno en badgepack para mostrar información adicional sobre este (nombre, descripción, criterios, emisor...). De esta forma se evita que se dupliquen y extiendan. Una falsa insignia no será validada al hacer clic sobre ella para mostrar pruebas de su obtención.



Autenticidad de insignia

Cuando se hace clic sobre una insignia aparecen los datos del  distribuidor, el usuario, y la circunstancia por la que se la obtuvo. Esta información puede ser mostrada de una manera atractiva; debajo hay una imagen de cómo se ve una insignia de back pack de la universidad de Valencia para un curso de programación en Android.


Pasos para crear una insignia

1.- Crear una imagen .PNG para tu insignia. He creado a través de la página openbadges la siguiente imagen y la he guardado en una carpeta pública de Dropbox para que sea accesible.


2.- Crear un fichero de texto. Abrimos un editor cualquiera y siguiendo el formato JSON de abajo, completamos los datos en azul. Asegúrate de que el enlace a la imagen PNG sea accesible de forma pública (Dropbox, Google drive ...). 


     "recipient": "Badge earner's mail",
     "issued_on": "Date of expedition",
     "badge": {
                      "version": "version",
                      "name": "Title", 
                      "image": "PNG's URL",
                      "description": "Badge description", 
                      "criteria":"More info",
                      "issuer": { 
                                     "origin": "issuer's URL", 
                                     "name": "Badge Issuer name", 
                                     "org":  "Institution name", 
                                     "contact": "Institution name
                                  } 
                  } 
}

Un ejemplo podría ser el siguiente:
{
"recipient": "alumno@gmail.com",
"issued_on": "2014-07-12",
"badge": 
 { 
 "version": "1.0.0",
 "name": "Cualificaci\u00f3n profesional IFC155_3",                           "image":"https://dl.dropboxusercontent.com/u/14097447/openbadgets/IFC152_3.png",
 "description": "Configura, administra y mantiene un sistema inform\u00e1tico a nivel de hardware y software, garantizando la disponibilidad, \u00f3ptimo rendimiento, funcionalidad e integridad de los servicios y recursos del sistema.",           "criteria":"http://www.educacion.gob.es/educa/incual/pdf/BDC/IFC155_3.pdf",
 "issuer": {
            "origin": "http://iessanandres.centros.educa.jcyl.es", 
            "name": "IES San Andr\u00e9s", 
            "org":  "Junta de Castilla y Le\u00f3n", 
            "contact": "ies-san.andres@jcyl.es" 
           }
  } 
}

Si los acentos no te aparecen, puedes utilizar la siguiente tabla de conversión de símbolos utf-8 a iso-8859-1-ansi.

3.- Guardar el fichero de texto con extensión ".json": Debemos asegurarnos que también sea accesible de forma pública (Dropbox, Google Drive...). 

4.- Validación del fichero JSON: Para asegurar que el fichero JSON es correcto, copia y pega el contenido en la página validator.openbadges.org y haz clic en Check Validity; comprueba entonces que se muestra el mensaje en verde Valid:



 5.- Enviar la insignia al servicio baker de Mozilla. Es necesario construir una URL para añadir la insignia al servicio baker de Mozilla. Para ello, tomaremos el enlace público del fichero JSON y lo insertaremos al final del enlace siguiente:

     http://backpack.openbadges.org/baker?assertion=

En mi caso quedaría de la siguiente forma: 


Cuando introduzcas el enlace en el navegador y pulses entrar, estarás pidiendo al servicio baking de Mozilla que interprete tu fichero JSON y añada los datos a la imagen PNG que previamente indicaste en el fichero JSON. Este "horneado" enlaza los datos del fichero JSON con la imagen. Si todo va bien, se descargará automáticamente un fichero PNG; se trata de la insignia, horneada y lista para utilizar.


6.- Añadir la insignia al Mozilla Backpack. Las insignias PNGs obtenidas del servicio baking cumplen el Open Badge Infrastructure; la insignia únicamente podrá ser utilizada por el alumno que indicamos en recipient. En caso contrario, el alumno obtendría un mensaje como el siguiente:



Posteriormente haremos llegar la insignia al estudiante, que se logueará en Mozilla Backpack y solo tendrá que hacer clic en la imagen Upload a Badge.


Después el estudiante deberá pulsar en el botón "seleccionar archivo" para buscar el PNG de la insignia que le entregamos y lo subirá pulsando en el botón Upload.

Resultado final


El aspecto final que tendrá la insignia en la cuenta del alumno en su Mozilla Backpack será el siguiente:


Al pulsar sobre ella mostrará la siguiente información.







3 comentarios: