{"id":2838,"date":"2015-05-17T13:25:32","date_gmt":"2015-05-17T12:25:32","guid":{"rendered":"http:\/\/descartesjs.org\/documentacion\/?p=2838"},"modified":"2021-08-07T15:15:01","modified_gmt":"2021-08-07T14:15:01","slug":"aplicaciones-de-la-comunicacion-para-videos-interactivos","status":"publish","type":"post","link":"https:\/\/reddescartes.org\/documentacion\/aplicaciones-de-la-comunicacion-para-videos-interactivos\/","title":{"rendered":"Aplicaciones de la comunicaci\u00f3n para v\u00eddeos interactivos"},"content":{"rendered":"<p style=\"text-align: justify;\">En la documentaci\u00f3n t\u00e9cnica y de usuario de Descartes en su versi\u00f3n compatible con HTML5, en el art\u00edculo&nbsp;<a href=\"https:\/\/descartesjs.org\/documentacion\/?p=2709\">https:\/\/descartesjs.org\/documentacion\/?p=2709<\/a>, se describe c\u00f3mo se realiza una comunicaci\u00f3n bidireccional entre una escena y una p\u00e1gina HTML embebida en dicha escena. En general, la escena env\u00eda a trav\u00e9s de comandos del tipo E.set(\u2018variable\u2019, valor) un valor hacia un elemento del c\u00f3digo HTML, el cual se actualiza; por otra parte, en el HTML embebido hay otras variables cuyos valores se env\u00edan a la escena.<\/p>\n<p style=\"text-align: justify;\">Aprovechando esta comunicaci\u00f3n, hemos&nbsp;dise\u00f1ado otros modelos de v\u00eddeos interactivos, que complementan el modelo desarrollado y descrito ampliamente en el apartado&nbsp;<a href=\"https:\/\/descartesjs.org\/documentacion\/?p=2381\">https:\/\/descartesjs.org\/documentacion\/?p=2381<\/a>. A diferencia del modelo anteriormente documentado, los nuevos modelos utilizan v\u00eddeos que se reproducen en una p\u00e1gina HTML, que luego se embebe en la escena, con la ventaja adicional de incluir v\u00eddeos, tambi\u00e9n embebidos, de YouTube.<\/p>\n<p style=\"text-align: justify;\">Es importante recordar que el objetivo del v\u00eddeo interactivo es permitir al usuario interactuar con la escena, en la cual el objeto principal es el v\u00eddeo. La interacci\u00f3n se realiza a trav\u00e9s de preguntas o de la selecci\u00f3n de opciones presentadas como botones o puntos gr\u00e1ficos dibujados sobre el v\u00eddeo. Esta interacci\u00f3n se logra si s\u00f3lo se habilitan algunos controles de v\u00eddeo, que no permitan al usuario interferir en su reproducci\u00f3n como normalmente lo puede hacer. La comunicaci\u00f3n bidireccional escena \u2013 HTML posibilita una gran variedad de alternativas o modelos de v\u00eddeos interactivos.<\/p>\n<p style=\"text-align: justify;\">En el siguiente v\u00eddeo puedes observar dos tipos de&nbsp;&nbsp;interacciones, &nbsp;la t\u00edpica de YouTube (clic en una parte del v\u00eddeo, para este ejemplo en el bot\u00f3n \u00abm\u00e1s informaci\u00f3n\u00bb) y, al final, la interacci\u00f3n que m\u00e1s nos interesa en las aplicaciones de Descartes:<\/p>\n<p><iframe class=\"iframe-class\" src=\"https:\/\/descartesjs.org\/repositorio\/Videos_interactivos2_JS\/video_interactivo_intro_YouTube\/index.html\" width=\"100%\" height=\"520\" frameborder=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<p style=\"text-align: justify;\">En este documento presentamos algunas de estas alternativas. Se har\u00e1 una descripci\u00f3n t\u00e9cnica de los comandos JavaScript relacionados con la reproducci\u00f3n del v\u00eddeo y, por otra parte, se explicar\u00e1 c\u00f3mo modificar la escena para incorporar otros v\u00eddeos y las interacciones correspondientes.<\/p>\n<p style=\"text-align: justify;\">Se presentan modelos que incluyen enlaces a v\u00eddeos de YouTube que, obviamente, requieren conexi\u00f3n a Internet, si bien es posible usar cualquier v\u00eddeo entre la gran abundancia que presenta este popular repositorio, recomendamos dise\u00f1ar nuestros propios v\u00eddeos y luego subirlos a YouTube, un ejemplo de ello es el \u00faltimo modelo.<\/p>\n<p style=\"text-align: justify;\">A continuaci\u00f3n se dispone de los enlaces a diferentes art\u00edculos donde se desarrollan diversos modelos.<\/p>\n<p style=\"padding-left: 60px;\">V\u00eddeos interactivos en Youtube<\/p>\n<p style=\"padding-left: 90px;\"><a href=\"https:\/\/descartesjs.org\/documentacion\/?p=2758\">V\u00eddeo interactivo con preguntas de respuesta escrita<\/a><\/p>\n<p style=\"padding-left: 90px;\"><a href=\"https:\/\/descartesjs.org\/documentacion\/?p=2808\">V\u00eddeo interactivo con selecci\u00f3n de fragmentos de v\u00eddeo<\/a><\/p>\n<p style=\"padding-left: 90px;\"><a href=\"https:\/\/descartesjs.org\/documentacion\/?p=2823\">V\u00eddeo interactivo con preguntas de selecci\u00f3n m\u00faltiple<\/a><\/p>\n<p style=\"padding-left: 90px;\"><a href=\"https:\/\/descartesjs.org\/documentacion\/?p=2825\">V\u00eddeo interactivo con enlace a otros v\u00eddeos<\/a><\/p>\n<p style=\"padding-left: 90px;\"><a href=\"https:\/\/descartesjs.org\/documentacion\/?p=2829\">V\u00eddeo interactivo con enlace a otras escenas de Descartes<\/a><\/p>\n<p style=\"padding-left: 90px;\"><a href=\"https:\/\/descartesjs.org\/documentacion\/?p=2831\">V\u00eddeo interactivo y escena interactiva simult\u00e1nea<\/a><\/p>\n<p style=\"padding-left: 60px;\"><a href=\"https:\/\/descartesjs.org\/documentacion\/?p=2834\">V\u00eddeos interactivos en local<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En la documentaci\u00f3n t\u00e9cnica y de usuario de Descartes en su versi\u00f3n compatible con HTML5, en el art\u00edculo&nbsp;https:\/\/descartesjs.org\/documentacion\/?p=2709, se describe c\u00f3mo se realiza una comunicaci\u00f3n bidireccional entre una escena y una p\u00e1gina HTML embebida en dicha escena. En general, la escena env\u00eda a trav\u00e9s de comandos del tipo E.set(\u2018variable\u2019, valor) un valor hacia un elemento del c\u00f3digo HTML, el cual se actualiza; por otra parte, en el HTML embebido hay otras variables cuyos valores se env\u00edan a la escena. Aprovechando esta comunicaci\u00f3n, hemos&nbsp;dise\u00f1ado otros modelos de v\u00eddeos interactivos, que complementan el modelo desarrollado y descrito ampliamente en el apartado&nbsp;https:\/\/descartesjs.org\/documentacion\/?p=2381. A<\/p>\n<a class=\"more-link\" rel=\"nofollow\" href=\"https:\/\/reddescartes.org\/documentacion\/aplicaciones-de-la-comunicacion-para-videos-interactivos\/\">[Leer m\u00e1s...]<\/a>","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[103,97],"tags":[],"_links":{"self":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/2838"}],"collection":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/comments?post=2838"}],"version-history":[{"count":7,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/2838\/revisions"}],"predecessor-version":[{"id":3491,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/posts\/2838\/revisions\/3491"}],"wp:attachment":[{"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/media?parent=2838"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/categories?post=2838"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/reddescartes.org\/documentacion\/wp-json\/wp\/v2\/tags?post=2838"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}