{"id":6111,"date":"2023-09-14T12:05:59","date_gmt":"2023-09-14T12:05:59","guid":{"rendered":"http:\/\/localhost\/?p=6111"},"modified":"2023-09-15T12:04:04","modified_gmt":"2023-09-15T12:04:04","slug":"domina-la-interactividad-visual-como-crear-image-hotspots-impactantes-en-moodle-con-h5p","status":"publish","type":"post","link":"https:\/\/www3.ubu.es\/ubucevblog\/domina-la-interactividad-visual-como-crear-image-hotspots-impactantes-en-moodle-con-h5p\/","title":{"rendered":"Domina la Interactividad Visual: C\u00f3mo Crear \u00abImage Hotspots\u00bb Impactantes en Moodle con H5P"},"content":{"rendered":"<div class=\"pvc_clear\"><\/div><p id=\"pvc_stats_6111\" class=\"pvc_stats total_only  \" data-element-id=\"6111\" style=\"\"><i class=\"pvc-stats-icon medium\" aria-hidden=\"true\"><svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"chart-bar\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" class=\"svg-inline--fa fa-chart-bar fa-w-16 fa-2x\"><path fill=\"currentColor\" d=\"M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z\" class=\"\"><\/path><\/svg><\/i> <img loading=\"lazy\" decoding=\"async\" width=\"16\" height=\"16\" alt=\"Loading\" src=\"https:\/\/www3.ubu.es\/ubucevblog\/wp-content\/plugins\/page-views-count\/ajax-loader-2x.gif\" border=0 \/><\/p><div class=\"pvc_clear\"><\/div>\n<p>En la educaci\u00f3n en l\u00ednea, la interactividad es la clave para brindarles a los estudiantes una experiencia de aprendizaje enriquecedora. Una de las formas m\u00e1s efectivas de lograrlo es a trav\u00e9s de las <strong>&#8216;Image Hotspots&#8217;<\/strong>. Estos elementos no solo agregan un toque de dinamismo a tus cursos en l\u00ednea, sino que tambi\u00e9n permiten presentar informaci\u00f3n de manera visualmente atractiva y f\u00e1cil de comprender.<\/p>\n\n\n\n<p>En esta gu\u00eda, exploraremos c\u00f3mo crear \u00ab<strong>Image Hotspots<\/strong>\u00bb en Moodle, aprovechando al m\u00e1ximo su funcionalidad. <\/p>\n\n\n\n<div class=\"wp-block-uagb-icon-list uagb-block-492ab1f8\"><div class=\"uagb-icon-list__wrap\">\n<div class=\"wp-block-uagb-icon-list-child uagb-block-6e01094c\"><span class=\"uagb-icon-list__source-wrap\"><svg xmlns=\"https:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\"><path d=\"M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM406.6 278.6l-103.1 103.1c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25L306.8 288H128C110.3 288 96 273.7 96 256s14.31-32 32-32h178.8l-49.38-49.38c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l103.1 103.1C414.6 241.3 416 251.1 416 256C416 260.9 414.6 270.7 406.6 278.6z\"><\/path><\/svg><\/span><span class=\"uagb-icon-list__label\"><strong>A\u00f1adir Image Hotspots <\/strong><\/span><\/div>\n<\/div><\/div>\n\n\n\n<p>Para crear Image Hotspots tenemos que: <\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Agregar H5P en Moodle. <\/li>\n\n\n\n<li>Usar el banco de contenido. <\/li>\n\n\n\n<li>A\u00f1adir Image Hotspots. <\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"A\u00f1adir recurso H5P\" width=\"640\" height=\"480\" src=\"https:\/\/www.youtube.com\/embed\/_wViCErAS2s?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-uagb-icon-list uagb-block-f4777bc0\"><div class=\"uagb-icon-list__wrap\">\n<div class=\"wp-block-uagb-icon-list-child uagb-block-026a86ad\"><span class=\"uagb-icon-list__source-wrap\"><svg xmlns=\"https:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\"><path d=\"M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM406.6 278.6l-103.1 103.1c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25L306.8 288H128C110.3 288 96 273.7 96 256s14.31-32 32-32h178.8l-49.38-49.38c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l103.1 103.1C414.6 241.3 416 251.1 416 256C416 260.9 414.6 270.7 406.6 278.6z\"><\/path><\/svg><\/span><span class=\"uagb-icon-list__label\">Una vez dentro del editor, procedemos a crear <strong>Image Hotspots<\/strong>. Para ello tenemos que:<\/span><\/div>\n<\/div><\/div>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Nombrar actividad. <\/li>\n\n\n\n<li>Agregar imagen. <\/li>\n\n\n\n<li>Establecer icono. <\/li>\n\n\n\n<li>Definir color.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"964\" height=\"864\" src=\"https:\/\/www3.ubu.es\/ubucevblog\/wp-content\/uploads\/2023\/09\/Configurar-imagen.png\" alt=\"\" class=\"wp-image-6128\" style=\"width:659px;height:auto\" srcset=\"https:\/\/www3.ubu.es\/ubucevblog\/wp-content\/uploads\/2023\/09\/Configurar-imagen.png 964w, https:\/\/www3.ubu.es\/ubucevblog\/wp-content\/uploads\/2023\/09\/Configurar-imagen-300x269.png 300w, https:\/\/www3.ubu.es\/ubucevblog\/wp-content\/uploads\/2023\/09\/Configurar-imagen-768x688.png 768w, https:\/\/www3.ubu.es\/ubucevblog\/wp-content\/uploads\/2023\/09\/Configurar-imagen-870x780.png 870w, https:\/\/www3.ubu.es\/ubucevblog\/wp-content\/uploads\/2023\/09\/Configurar-imagen-390x350.png 390w\" sizes=\"auto, (max-width: 964px) 100vw, 964px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-uagb-icon-list uagb-block-443849e8\"><div class=\"uagb-icon-list__wrap\">\n<div class=\"wp-block-uagb-icon-list-child uagb-block-9807c7de\"><span class=\"uagb-icon-list__source-wrap\"><svg xmlns=\"https:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\"><path d=\"M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM406.6 278.6l-103.1 103.1c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25L306.8 288H128C110.3 288 96 273.7 96 256s14.31-32 32-32h178.8l-49.38-49.38c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l103.1 103.1C414.6 241.3 416 251.1 416 256C416 260.9 414.6 270.7 406.6 278.6z\"><\/path><\/svg><\/span><span class=\"uagb-icon-list__label\">Una vez delimitadas las opciones, procedemos a trabajar con la imagen. Para ello tenemos que:<\/span><\/div>\n<\/div><\/div>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Seleccionar punto clave. <\/li>\n\n\n\n<li>Nombrar encabezado. <\/li>\n\n\n\n<li>Seleccionar tipo de archivo que se desea incrustar. <\/li>\n\n\n\n<li>Guardar proyecto. <\/li>\n\n\n\n<li>A\u00f1adir H5P en la asignatura. <\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Trabajar con la imagen H5P\" width=\"640\" height=\"480\" src=\"https:\/\/www.youtube.com\/embed\/ndaB-NhFUM4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div style=\"height:46px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Producto final: <\/strong><\/p>\n\n\n\n<iframe loading=\"lazy\" src=\"https:\/\/h5p.org\/h5p\/embed\/1431335\" width=\"1090\" height=\"676\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\" allow=\"geolocation *; microphone *; camera *; midi *; encrypted-media *\" title=\"Partes del cerebro\"><\/iframe><script src=\"https:\/\/h5p.org\/sites\/all\/modules\/h5p\/library\/js\/h5p-resizer.js\" charset=\"UTF-8\"><\/script>\n\n\n\n<p>(Equipo editorial, Etec\u00e9, 2023)<\/p>\n\n\n\n<div style=\"height:84px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Referencias Bibliogr\u00e1ficas: <\/strong><\/p>\n\n\n\n<p>Equipo editorial, Etec\u00e9. (2023). Cerebro: partes, funciones, caracter\u00edsticas y enfermedades.&nbsp;<em>Enciclopedia Humanidades<\/em>.&nbsp;https:\/\/humanidades.com\/cerebro\/<\/p>\n\n\n\n<p><em>El desarrollo de este trabajo por parte de la Universidad de Burgos se ha realizado gracias a las ayudas otorgadas por la Consejer\u00eda de Educaci\u00f3n de la Junta de Castilla y Le\u00f3n a las universidades p\u00fablicas de Castilla y Le\u00f3n para el apoyo al desarrollo de la formaci\u00f3n on-line cofinanciadas por el Fondo Europeo de Desarrollo Regional.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"886\" height=\"151\" src=\"https:\/\/www3.ubu.es\/ubucevblog\/wp-content\/uploads\/2023\/09\/image.png\" alt=\"\" class=\"wp-image-6219\" srcset=\"https:\/\/www3.ubu.es\/ubucevblog\/wp-content\/uploads\/2023\/09\/image.png 886w, https:\/\/www3.ubu.es\/ubucevblog\/wp-content\/uploads\/2023\/09\/image-300x51.png 300w, https:\/\/www3.ubu.es\/ubucevblog\/wp-content\/uploads\/2023\/09\/image-768x131.png 768w, https:\/\/www3.ubu.es\/ubucevblog\/wp-content\/uploads\/2023\/09\/image-850x145.png 850w\" sizes=\"auto, (max-width: 886px) 100vw, 886px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<div class=\"pvc_clear\"><\/div>\n<p id=\"pvc_stats_6111\" class=\"pvc_stats total_only  \" data-element-id=\"6111\" style=\"\"><i class=\"pvc-stats-icon medium\" aria-hidden=\"true\"><svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"chart-bar\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" class=\"svg-inline--fa fa-chart-bar fa-w-16 fa-2x\"><path fill=\"currentColor\" d=\"M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z\" class=\"\"><\/path><\/svg><\/i> <img loading=\"lazy\" decoding=\"async\" width=\"16\" height=\"16\" alt=\"Loading\" src=\"https:\/\/www3.ubu.es\/ubucevblog\/wp-content\/plugins\/page-views-count\/ajax-loader-2x.gif\" border=0 \/><\/p>\n<div class=\"pvc_clear\"><\/div>\n<p>En la educaci\u00f3n en l\u00ednea, la interactividad es la clave para brindarles a los estudiantes una experiencia de aprendizaje enriquecedora. Una de las formas m\u00e1s efectivas de lograrlo es a trav\u00e9s de las &#8216;Image Hotspots&#8217; con H5P.<\/p>\n","protected":false},"author":3,"featured_media":6222,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[20],"tags":[54,148,116],"class_list":["post-6111","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-e-learning","tag-elearning","tag-h5p","tag-interactividad"],"uagb_featured_image_src":{"full":["https:\/\/www3.ubu.es\/ubucevblog\/wp-content\/uploads\/2023\/09\/Portada-h5p-e1694762180616.png",1196,800,false],"thumbnail":["https:\/\/www3.ubu.es\/ubucevblog\/wp-content\/uploads\/2023\/09\/Portada-h5p-150x150.png",150,150,true],"medium":["https:\/\/www3.ubu.es\/ubucevblog\/wp-content\/uploads\/2023\/09\/Portada-h5p-300x201.png",300,201,true],"medium_large":["https:\/\/www3.ubu.es\/ubucevblog\/wp-content\/uploads\/2023\/09\/Portada-h5p-768x514.png",640,428,true],"large":["https:\/\/www3.ubu.es\/ubucevblog\/wp-content\/uploads\/2023\/09\/Portada-h5p-1024x685.png",640,428,true],"1536x1536":["https:\/\/www3.ubu.es\/ubucevblog\/wp-content\/uploads\/2023\/09\/Portada-h5p-1536x1027.png",1536,1027,true],"2048x2048":["https:\/\/www3.ubu.es\/ubucevblog\/wp-content\/uploads\/2023\/09\/Portada-h5p-e1694762180616.png",1196,800,false],"post-thumbnail":["https:\/\/www3.ubu.es\/ubucevblog\/wp-content\/uploads\/2023\/09\/Portada-h5p-300x201.png",300,201,true],"newspaperly-grid":["https:\/\/www3.ubu.es\/ubucevblog\/wp-content\/uploads\/2023\/09\/Portada-h5p-350x230.png",350,230,true],"newspaperly-slider":["https:\/\/www3.ubu.es\/ubucevblog\/wp-content\/uploads\/2023\/09\/Portada-h5p-850x568.png",850,568,true],"newspaperly-small":["https:\/\/www3.ubu.es\/ubucevblog\/wp-content\/uploads\/2023\/09\/Portada-h5p-300x180.png",300,180,true]},"uagb_author_info":{"display_name":"UBUCEV","author_link":"https:\/\/www3.ubu.es\/ubucevblog\/author\/ubucev\/"},"uagb_comment_info":0,"uagb_excerpt":"En la educaci\u00f3n en l\u00ednea, la interactividad es la clave para brindarles a los estudiantes una experiencia de aprendizaje enriquecedora. Una de las formas m\u00e1s efectivas de lograrlo es a trav\u00e9s de las 'Image Hotspots' con H5P.","_links":{"self":[{"href":"https:\/\/www3.ubu.es\/ubucevblog\/wp-json\/wp\/v2\/posts\/6111","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www3.ubu.es\/ubucevblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www3.ubu.es\/ubucevblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www3.ubu.es\/ubucevblog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www3.ubu.es\/ubucevblog\/wp-json\/wp\/v2\/comments?post=6111"}],"version-history":[{"count":28,"href":"https:\/\/www3.ubu.es\/ubucevblog\/wp-json\/wp\/v2\/posts\/6111\/revisions"}],"predecessor-version":[{"id":6252,"href":"https:\/\/www3.ubu.es\/ubucevblog\/wp-json\/wp\/v2\/posts\/6111\/revisions\/6252"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www3.ubu.es\/ubucevblog\/wp-json\/wp\/v2\/media\/6222"}],"wp:attachment":[{"href":"https:\/\/www3.ubu.es\/ubucevblog\/wp-json\/wp\/v2\/media?parent=6111"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www3.ubu.es\/ubucevblog\/wp-json\/wp\/v2\/categories?post=6111"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www3.ubu.es\/ubucevblog\/wp-json\/wp\/v2\/tags?post=6111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}