{"id":493,"date":"2023-05-17T00:16:04","date_gmt":"2023-05-17T00:16:04","guid":{"rendered":"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/?p=493"},"modified":"2024-11-11T16:59:32","modified_gmt":"2024-11-11T16:59:32","slug":"recomendaciones-diseno-insignias","status":"publish","type":"post","link":"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/?p=493","title":{"rendered":"Recomendaciones para el dise\u00f1o de insignias digitales dentro del sistema INSIGNIA UNED"},"content":{"rendered":"\n<p>Las insignias digitales conforman un elemento b\u00e1sico de la gamificaci\u00f3n, las cuales se recomiendan incorporar dentro de entornos o plataformas educativas que comprendan ya sea: un curso virtual o presencial, la participaci\u00f3n en un taller o webinario o una certificaci\u00f3n. Esto cada vez que se logre completar un nivel determinado o se premie el reconocimiento de avance o desbloqueo de alguna habilidad, represent\u00e1ndolo de forma virtual por una imagen o icono, el cual simbolice el progreso o logro obtenido.<\/p>\n\n\n\n<p>A la hora de elaborar el dise\u00f1o de una insignia o una familia de estas, se recomienda seguir al menos una gu\u00eda de estilo y un est\u00e1ndar de dise\u00f1o gr\u00e1fico, bajo una est\u00e9tica simple y limpia, sin sobrecarga de textos o elementos gr\u00e1ficos que provoquen confusi\u00f3n en el mensaje. A continuaci\u00f3n, se detallan algunas sugerencias t\u00e9cnicas y de dise\u00f1o:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Formato de imagen:<\/strong> Para crear y cargar una insignia en el sistema <a rel=\"noreferrer noopener\" href=\"http:\/\/insignia.uned.ac.cr\/\" data-type=\"URL\" data-id=\"insignia.uned.ac.cr\/\" target=\"_blank\">INSIGNIA UNED<\/a> se debe utilizar el formato SVG (Scalable Vector Graphics), el cual adem\u00e1s de ser m\u00e1s ligero en peso que un archivo similar en PNG, es un est\u00e1ndar que permite trabajar con gr\u00e1ficos vectoriales escalables y adem\u00e1s aprovecha la propiedad de <em>transparencia<\/em>, aspecto del cual se recomienda hacer uso a la hora de dise\u00f1ar para as\u00ed evitar los fondos de color s\u00f3lido, cuadro blanco de relleno o im\u00e1genes (mapa de bits). El sistema <a rel=\"noreferrer noopener\" href=\"http:\/\/insignia.uned.ac.cr\/\" data-type=\"URL\" data-id=\"insignia.uned.ac.cr\/\" target=\"_blank\">INSIGNIA UNED<\/a> no permite utilizar los formatos PNG, JPG o GIF para la creaci\u00f3n de insignias. El formato PNG s\u00f3lo es permitido para crear y cargar el logotipo de la entidad Emisora de la insignia.<br><br>La propiedad vectorial escalable del formato SVG favorece a que no exista dependencia de la resoluci\u00f3n de la imagen, al no trabajar con pixeles, permitiendo as\u00ed redimensionar a gusto el dise\u00f1o de una insignia, sin perder calidad, como s\u00ed suceder\u00eda con un archivo PNG, y al ser un est\u00e1ndar Web abierto basado en texto, est\u00e1 dise\u00f1ado para trabajar con otros est\u00e1ndares web tales como CSS (<em>Cascading Style Sheets<\/em>) o HTML (<em>HyperText Markup Language<\/em>), permitiendo incluso implementar animaciones. En el caso de utilizar vectores para el dise\u00f1o de insignias, <u>se recomienda convertir en \u201ccontornos\u201d los textos que se utilicen<\/u>, esto para evitar depender de fuentes tipogr\u00e1ficas que quiz\u00e1 no est\u00e9n instaladas en el dispositivo donde se visualice la insignia.<br><br><\/li>\n\n\n\n<li> <strong>Peso y tama\u00f1o: <\/strong>Este criterio est\u00e1 bastante ligado al punto anterior, en donde por lo general se obtendr\u00e1 un peso m\u00e1s eficiente en t\u00e9rminos de Kilobytes o Megabytes al utilizar el formato SVG, adem\u00e1s de que la resoluci\u00f3n en pixeles de la imagen no ser\u00e1 un tema del cual estar pendiente si se implementa este formato, en cuanto a su dise\u00f1o. El \u00fanico requisito para cargar la insignia al sistema, en relaci\u00f3n a este tema, es que sea una imagen cuadrada, es decir, mismo alto y ancho. <br><br>Como recomendaci\u00f3n es preferible dise\u00f1ar insignias con un peso bastante ligero, las cuales no sobrepasen los 100KB aproximadamente, aunque un peso eficiente ser\u00eda por debajo de los 50KB, pensando en temas de usabilidad y principalmente en la accesibilidad de sistemas WEB o aplicaciones que dependan de conexiones de internet para desplegar las insignias.<br><br><img loading=\"lazy\" decoding=\"async\" width=\"1130\" height=\"454\" class=\"wp-image-499\" style=\"width: 900px\" src=\"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/wp-content\/uploads\/sites\/8\/2023\/05\/svg_insignia_calidad.png\" alt=\"Propiedad vectorial escalable del formato SVG\" srcset=\"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/wp-content\/uploads\/sites\/8\/2023\/05\/svg_insignia_calidad.png 1130w, https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/wp-content\/uploads\/sites\/8\/2023\/05\/svg_insignia_calidad-300x121.png 300w, https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/wp-content\/uploads\/sites\/8\/2023\/05\/svg_insignia_calidad-1024x411.png 1024w, https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/wp-content\/uploads\/sites\/8\/2023\/05\/svg_insignia_calidad-768x309.png 768w\" sizes=\"auto, (max-width: 1130px) 100vw, 1130px\" \/><br><br><\/li>\n\n\n\n<li><strong>Detalle descriptivo y uso de texto:<\/strong> El dise\u00f1o de una insignia no tiene porqu\u00e9 seguir las mismas reglas o gu\u00edas de estilo que un identificador gr\u00e1fico o un logotipo, incluso se puede ser m\u00e1s flexible a la hora de pensar en posibles reducciones o variedad de colores utilizados, aun as\u00ed, es preferible y recomendado no saturar el dise\u00f1o final con elementos que sobrecarguen tanto el apartado gr\u00e1fico, como el mensaje que se desea comunicar con la insignia, tal y como sucede con la utilizaci\u00f3n excesiva de texto. <br><br>En general es recomendable que el dise\u00f1o de una insignia o un conjunto de ellas cumplan una gu\u00eda de estilo y un est\u00e1ndar gr\u00e1fico, bajo una est\u00e9tica simple y limpia. No es necesario ni recomendable a\u00f1adir textos amplios que detallen toda la tem\u00e1tica, evento o motivo de premiaci\u00f3n de la insignia, ya que estos factores deber\u00edan estar impl\u00edcitos dentro del dise\u00f1o en s\u00ed y bastar\u00eda con un texto breve, conciso y sencillo en caso de ser requerido, con una fuente tipogr\u00e1fica legible y acorde a la propuesta visual.<br><br>Los criterios de premiaci\u00f3n, descripci\u00f3n y motivos de la insignia son atributos que se a\u00f1aden a nivel interno, en forma de texto dentro del archivo de la imagen como metadatos, bas\u00e1ndose en el est\u00e1ndar <a rel=\"noreferrer noopener\" href=\"https:\/\/openbadges.org\/\" target=\"_blank\">Open Badges<\/a>.<br><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>Lo ideal es preservar la l\u00ednea de dise\u00f1o y transmisi\u00f3n clara del mensaje de la insignia y as\u00ed disminuir o evitar la sobrecarga excesiva de elementos gr\u00e1ficos y\/o textos innecesarios y confusos, con descripciones extensas. A continuaci\u00f3n, un contraejemplo y un ejemplo recomendable de dise\u00f1o, aplicando los criterios y sugerencias mencionadas anteriormente. La tem\u00e1tica para este ejemplo es: <em>insignia que reconoce la participaci\u00f3n y el nivel obtenido en un taller de emprendimiento sobre dise\u00f1o, impresi\u00f3n y modelado 3D<\/em>. <\/p>\n\n\n\n<p><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/wp-content\/uploads\/sites\/8\/2023\/05\/insignia_no-recomendado.png\" alt=\"Uso incorrecto de insignia que reconoce la participaci\u00f3n y el nivel obtenido en un taller de emprendimiento sobre dise\u00f1o, impresi\u00f3n y modelado 3D\" class=\"wp-image-497\" width=\"650\" height=\"662\" srcset=\"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/wp-content\/uploads\/sites\/8\/2023\/05\/insignia_no-recomendado.png 866w, https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/wp-content\/uploads\/sites\/8\/2023\/05\/insignia_no-recomendado-295x300.png 295w, https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/wp-content\/uploads\/sites\/8\/2023\/05\/insignia_no-recomendado-768x782.png 768w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/wp-content\/uploads\/sites\/8\/2023\/05\/insignia_recomendado.png\" alt=\"Uso correcto de insignia que reconoce la participaci\u00f3n y el nivel obtenido en un taller de emprendimiento sobre dise\u00f1o, impresi\u00f3n y modelado 3D\" class=\"wp-image-498\" width=\"641\" height=\"654\" srcset=\"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/wp-content\/uploads\/sites\/8\/2023\/05\/insignia_recomendado.png 854w, https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/wp-content\/uploads\/sites\/8\/2023\/05\/insignia_recomendado-294x300.png 294w, https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/wp-content\/uploads\/sites\/8\/2023\/05\/insignia_recomendado-768x784.png 768w\" sizes=\"auto, (max-width: 641px) 100vw, 641px\" \/><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><strong>Recursos: <\/strong><\/p>\n\n\n\n<p>Informaci\u00f3n sobre los pasos para crear una insignia dentro del sistema <a href=\"http:\/\/insignia.uned.ac.cr\/\" data-type=\"URL\" data-id=\"insignia.uned.ac.cr\/\" target=\"_blank\" rel=\"noreferrer noopener\">INSIGNIA UNED<\/a>:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-sonar-multimedia wp-block-embed-sonar-multimedia\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"6Z6b62nnT2\"><a href=\"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/?p=464\">Pasos para crear insignias en el sistema INSIGNIA-UNED<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"\u00abPasos para crear insignias en el sistema INSIGNIA-UNED\u00bb \u2014 Sonar Multimedia\" src=\"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/?p=464&#038;embed=true#?secret=Ji4SwD4J75#?secret=6Z6b62nnT2\" data-secret=\"6Z6b62nnT2\" width=\"500\" height=\"282\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><figcaption class=\"wp-element-caption\"><em>Conceptos de Insignias, Emisores y Adjudicaciones.<\/em><\/figcaption><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><strong>Referencias: <\/strong><\/p>\n\n\n\n<p>Badilla-Barrientos R, Herrera-S\u00e1nchez D. (2022). Recomendaciones para el dise\u00f1o de insignias. <em>Dise\u00f1o de Insignias Digitales para Entornos Educativos Gamificados<\/em> (pp. 17-21). Publicaci\u00f3n independiente en Amazon.com.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Las insignias digitales conforman un elemento b\u00e1sico de la gamificaci\u00f3n, las cuales se recomiendan incorporar dentro de entornos o plataformas educativas que comprendan ya sea: un curso virtual o presencial, la participaci\u00f3n en un taller o webinario o una certificaci\u00f3n. Esto cada vez que se logre completar un nivel determinado o se premie el reconocimiento [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":535,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[1,15],"tags":[10,35,27],"ppma_author":[48],"class_list":["post-493","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno_grafico","category-gestion-academica","tag-grafica","tag-insignias","tag-recomendaciones"],"authors":[{"term_id":48,"user_id":16,"is_guest":0,"slug":"deherrera","display_name":"Deiver Herrera S\u00e1nchez","avatar_url":{"url":"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/wp-content\/uploads\/sites\/8\/2025\/05\/deiver_s.png","url2x":"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/wp-content\/uploads\/sites\/8\/2025\/05\/deiver_s.png"},"0":null,"1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":""}],"_links":{"self":[{"href":"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/index.php?rest_route=\/wp\/v2\/posts\/493","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/index.php?rest_route=\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=493"}],"version-history":[{"count":26,"href":"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/index.php?rest_route=\/wp\/v2\/posts\/493\/revisions"}],"predecessor-version":[{"id":540,"href":"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/index.php?rest_route=\/wp\/v2\/posts\/493\/revisions\/540"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/index.php?rest_route=\/wp\/v2\/media\/535"}],"wp:attachment":[{"href":"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=493"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=493"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=493"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/multimedia.uned.ac.cr\/pem\/wp\/sonar-multimedia\/index.php?rest_route=%2Fwp%2Fv2%2Fppma_author&post=493"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}