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.







8 comentarios:

  1. Amazing article. Your blog helped me to improve myself in many ways thanks for sharing this kind of wonderful informative blogs in live. I have bookmarked more article from this website. Such a nice blog you are providing ! Kindly Visit Us @ Packers And Movers Mumbai

    ResponderEliminar
  2. Superb post, we enjoyed each and everything as per written in your post. Thank you for this informative article because it’s really helpful, I really like site.
    Please visit our website: Local Packers And Movers Bangalore

    ResponderEliminar
  3. Get Shifting/Relocation Quotation from ###Packers and Movers Delhi. Packers and Movers Delhi 100% Affordable and Reliable ***Household Shifting Services. Compare Transportation Charges and Save Time, Verified and Trusted Packers and Movers in Delhi, Cheap and Safe Local, Domestic House Shifting @
    Packers And Movers Delhi

    ResponderEliminar
  4. Packers and Movers Gurgaon Provide Reliable, Safe and Certified Service Provider list, Get Free ***Best Price Quotaition and Compare Charges. ???Hassle free Household Shifting Services, High Quality packing Material, Office Relocation, Car Transportaion, ###Local and Domestic Shifting Service @
    Packers And Movers Gurgaon

    ResponderEliminar
  5. Packers and Movers Pune Provide High Quality ***Household Shifting, Home/Office Relocation, Insurance, Packing, Loading, ###Car Transportation Service Pune and High experiences, Top Rated, Safe and Reliable, Best and Secure Packers and Movers Pune Team List. Get ✔✔✔Affordable Rate Charts and Compare Quotation and Save Money and Time @ Packers And Movers Pune

    ResponderEliminar
  6. Local Packers and Movers Bangalore List, Get Best Price Quotes, Compare Movers and packers Charges, Top, Local Household Shifting Services. Packers And Movers Bangalore

    ResponderEliminar
  7. Packers And Movers Bangalore Local Household Shifting Service, Get Free Best Price Quotes Local Packers and Movers in Bangalore List, Compare Charges, Save Money And Time at
    Local Packers And Movers Bangalore

    ResponderEliminar