{"id":81423,"date":"2023-02-15T08:37:32","date_gmt":"2023-02-15T08:37:32","guid":{"rendered":"https:\/\/proyectos.comunicaciondigital.es\/revision-sistematica-de-literatura-copy\/"},"modified":"2023-02-15T09:13:32","modified_gmt":"2023-02-15T09:13:32","slug":"escena-basica-aframe","status":"publish","type":"post","link":"https:\/\/proyectos.comunicaciondigital.es\/en\/escena-basica-aframe\/","title":{"rendered":"C\u00f3mo crear tu primera escena b\u00e1sica en A-Frame"},"content":{"rendered":"\n[et_pb_section fb_built=\u00bb1&#8243; _builder_version=\u00bb4.16&#8243; global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_row _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.18.0&#8243; _module_preset=\u00bbdefault\u00bb global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb][et_pb_text _builder_version=\u00bb4.19.0&#8243; _module_preset=\u00bbdefault\u00bb link_text_color=\u00bb#931b14&#8243; hover_enabled=\u00bb0&#8243; global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb sticky_enabled=\u00bb0&#8243;]<p><span>En este tutorial se explicar\u00e1 c\u00f3mo crear una escena b\u00e1sica y c\u00f3mo integrar objetos b\u00e1sicos c\u00f3mo cajas o esferas en un entorno inmersivo desarrollado con A-Frame. A-Frame es un framework de c\u00f3digo abierto basado en HTML que permite crear entornos inmersivos. En esta ocasi\u00f3n, este tutorial se centra en la creaci\u00f3n de un entorno de Realidad Virtual. La integraci\u00f3n de estos objetos b\u00e1sicos ser\u00e1n la base de una futura creaci\u00f3n m\u00e1s compleja.<\/span><\/p>[\/et_pb_text][et_pb_text admin_label=\u00bbConociendo etiqueta\u00bb module_id=\u00bb1&#8243; _builder_version=\u00bb4.19.0&#8243; _module_preset=\u00bbdefault\u00bb header_text_color=\u00bb#890f0f\u00bb header_2_text_color=\u00bb#9b1006&#8243; hover_enabled=\u00bb0&#8243; global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb sticky_enabled=\u00bb0&#8243;]<h2 data-pm-slice=\"1 1 []\" data-en-clipboard=\"true\">Requerimientos t\u00e9cnicos<\/h2>[\/et_pb_text][et_pb_text _builder_version=\u00bb4.19.0&#8243; _module_preset=\u00bbdefault\u00bb link_text_color=\u00bb#931b14&#8243; hover_enabled=\u00bb0&#8243; global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb sticky_enabled=\u00bb0&#8243;]<ul>\n<li>Software editor de c\u00f3digo como <a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noopener\" title=\"Visual Studio Code\">Visual Studio Code<\/a>. Si no se ha trabajado nunca con un editor de este tipo, se recomienda la opci\u00f3n de trabajar desde el navegador, en sitios web tales como <a href=\"https:\/\/jsfiddle.net\/\" target=\"_blank\" rel=\"noopener\" title=\"JSFiddle\">JSFiddle<\/a> o <a href=\"https:\/\/glitch.com\/\" target=\"_blank\" rel=\"noopener\" title=\"Glitch\">Glitch<\/a>. En este tutorial utilizaremos JSFiddle.<\/li>\n<li>Acceso a la <a href=\"https:\/\/aframe.io\/docs\/1.4.0\/introduction\/\" target=\"_blank\" rel=\"noopener\" title=\"web de A-Frame\">web de A-Frame<\/a> para consultar toda la documentaci\u00f3n.<\/li>\n<li>Acceso a la <a href=\"https:\/\/babiaxr.gitlab.io\/tutorials\/get_started\/\" target=\"_blank\" rel=\"noopener\" title=\"web de Babia XR\">web de Babia XR<\/a> donde encontraremos tambi\u00e9n aspectos b\u00e1sicos.<\/li>\n<\/ul>[\/et_pb_text][et_pb_text admin_label=\u00bbConociendo etiqueta\u00bb module_id=\u00bb1&#8243; _builder_version=\u00bb4.19.0&#8243; _module_preset=\u00bbdefault\u00bb header_text_color=\u00bb#890f0f\u00bb header_2_text_color=\u00bb#9b1006&#8243; hover_enabled=\u00bb0&#8243; global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb sticky_enabled=\u00bb0&#8243;]<h2 data-pm-slice=\"1 1 []\" data-en-clipboard=\"true\">Desarrollo<\/h2>[\/et_pb_text][et_pb_text _builder_version=\u00bb4.19.0&#8243; _module_preset=\u00bbdefault\u00bb theme_builder_area=\u00bbpost_content\u00bb hover_enabled=\u00bb0&#8243; sticky_enabled=\u00bb0&#8243;]<h3>Preparaci\u00f3n<\/h3>[\/et_pb_text][et_pb_text _builder_version=\u00bb4.19.0&#8243; _module_preset=\u00bbdefault\u00bb link_text_color=\u00bb#931b14&#8243; hover_enabled=\u00bb0&#8243; global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb sticky_enabled=\u00bb0&#8243;]<p><span>Como se contempla en el punto anterior, si no se tiene experiencia trabajando con programas de edici\u00f3n de c\u00f3digo como Visual Studio, se recomienda trabajar desde JSFiddle para facilitar el trabajo. Adem\u00e1s, en esta web se podr\u00e1 trabajar con c\u00f3digo a la vez que se est\u00e1 visualizando lo que se est\u00e1 desarrollando.<\/span><\/p>\n<p><span>Una vez dentro de la web, se recomienda crearse una cuenta para guardar los proyectos que vayamos creando.<\/span><\/p>\n<p><span>Para una mejor visualizaci\u00f3n del trabajo, se recomienda colocar la vista Tabs (columns). Para ello, hay que clicar en \u201cSettings\u201d arriba a la derecha. Nos aparecer\u00e1n dos columnas: la columna HTML (que ser\u00e1 donde se edita el c\u00f3digo) y la pesta\u00f1a Results (que ser\u00e1 donde se visualiza el resultado del proyecto). A continuaci\u00f3n, se muestra una imagen para colocar este tipo de vista:<\/span><\/p>[\/et_pb_text][et_pb_image _builder_version=\u00bb4.19.0&#8243; _module_preset=\u00bbdefault\u00bb theme_builder_area=\u00bbpost_content\u00bb title_text=\u00bbPicture 1&#8243; src=\u00bbhttps:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2023\/02\/Picture-1.png\u00bb hover_enabled=\u00bb0&#8243; sticky_enabled=\u00bb0&#8243;][\/et_pb_image][et_pb_text _builder_version=\u00bb4.19.0&#8243; _module_preset=\u00bbdefault\u00bb theme_builder_area=\u00bbpost_content\u00bb hover_enabled=\u00bb0&#8243; sticky_enabled=\u00bb0&#8243;]<h3>Creaci\u00f3n de una escena b\u00e1sica<\/h3>[\/et_pb_text][et_pb_text _builder_version=\u00bb4.19.0&#8243; _module_preset=\u00bbdefault\u00bb link_text_color=\u00bb#931b14&#8243; hover_enabled=\u00bb0&#8243; global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb sticky_enabled=\u00bb0&#8243;]<p>Una vez con nuestro espacio de trabajo preparado, necesitamos las l\u00edneas de c\u00f3digo necesarias para crear nuestra primera escena b\u00e1sica. Para ello, accedemos a la <a href=\"https:\/\/babiaxr.gitlab.io\/tutorials\/get_started\/\">web de Babia XR<\/a>. Nada m\u00e1s entrar, tenemos el apartado \u201cCreating the scene\u201d. Aqu\u00ed, es donde vamos a copiar las l\u00edneas de c\u00f3digo que necesitamos.<\/p>[\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2023\/02\/Picture-2.png\u00bb _builder_version=\u00bb4.19.0&#8243; _module_preset=\u00bbdefault\u00bb theme_builder_area=\u00bbpost_content\u00bb title_text=\u00bbPicture 2&#8243; hover_enabled=\u00bb0&#8243; sticky_enabled=\u00bb0&#8243;][\/et_pb_image][et_pb_text _builder_version=\u00bb4.19.0&#8243; _module_preset=\u00bbdefault\u00bb link_text_color=\u00bb#931b14&#8243; hover_enabled=\u00bb0&#8243; global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb sticky_enabled=\u00bb0&#8243;]<p><span>Una vez copiadas estas l\u00edneas, volvemos a nuestro espacio de trabajo de JSFiddle y las pegamos en la pesta\u00f1a HTML, tal y como aparece a continuaci\u00f3n:<\/span><\/p>[\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2023\/02\/Picture-3.png\u00bb _builder_version=\u00bb4.19.0&#8243; _module_preset=\u00bbdefault\u00bb theme_builder_area=\u00bbpost_content\u00bb title_text=\u00bbPicture 3&#8243; hover_enabled=\u00bb0&#8243; sticky_enabled=\u00bb0&#8243;][\/et_pb_image][et_pb_text _builder_version=\u00bb4.19.0&#8243; _module_preset=\u00bbdefault\u00bb link_text_color=\u00bb#931b14&#8243; hover_enabled=\u00bb0&#8243; global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb sticky_enabled=\u00bb0&#8243;]<p><span>Para visualizar este c\u00f3digo, tenemos que clicar arriba a la izquierda en \u201cRun\u201d. Una vez cliquemos ah\u00ed, nos aparecer\u00e1 el resultado de ese c\u00f3digo tal y como se muestra a continuaci\u00f3n:<\/span><\/p>[\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2023\/02\/Picture-5.png\u00bb _builder_version=\u00bb4.19.0&#8243; _module_preset=\u00bbdefault\u00bb theme_builder_area=\u00bbpost_content\u00bb title_text=\u00bbPicture 5&#8243; hover_enabled=\u00bb0&#8243; sticky_enabled=\u00bb0&#8243;][\/et_pb_image][et_pb_text _builder_version=\u00bb4.19.0&#8243; _module_preset=\u00bbdefault\u00bb theme_builder_area=\u00bbpost_content\u00bb hover_enabled=\u00bb0&#8243; sticky_enabled=\u00bb0&#8243;]<h2><span lang=\"ES\">Integraci\u00f3n objetos b\u00e1sicos<o:p><\/o:p><\/span><\/h2>[\/et_pb_text][et_pb_text _builder_version=\u00bb4.19.0&#8243; _module_preset=\u00bbdefault\u00bb theme_builder_area=\u00bbpost_content\u00bb hover_enabled=\u00bb0&#8243; sticky_enabled=\u00bb0&#8243;]<p>Una vez con nuestro entorno b\u00e1sico creado, es la hora de integrar objetos. En esta ocasi\u00f3n, vamos a crear una caja y una esfera.<br \/>Para ello, accedemos a la p\u00e1gina de <a href=\"https:\/\/aframe.io\/docs\/1.4.0\/introduction\/\" target=\"_blank\" rel=\"noopener\" title=\"A-Frame Get Started.\">A-Frame Get Started.<\/a> En esta web, nos aparecer\u00e1 toda la documentaci\u00f3n necesaria para trabajar con A-Frame.<br \/>Nada m\u00e1s entrar, aparecen unas l\u00edneas de c\u00f3digo en el recuadro de la secci\u00f3n \u201cGetting Started\u201d. Estas l\u00edneas pintan una caja (a-box), una esfera (a-sphere), un cilindro (a-cylinder), un plano (a-plane) y un fondo (a-sky).<br \/>De estas l\u00edneas de c\u00f3digo, para este tutorial, solamente vamos a copiar las l\u00edneas que pintan la caja y la esfera. De esta manera, copiamos las l\u00edneas tal y como se muestra a continuaci\u00f3n:<\/p>[\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2023\/02\/Picture-6.png\u00bb _builder_version=\u00bb4.19.0&#8243; _module_preset=\u00bbdefault\u00bb theme_builder_area=\u00bbpost_content\u00bb title_text=\u00bbPicture 6&#8243; hover_enabled=\u00bb0&#8243; sticky_enabled=\u00bb0&#8243; align=\u00bbcenter\u00bb][\/et_pb_image][et_pb_text _builder_version=\u00bb4.19.0&#8243; _module_preset=\u00bbdefault\u00bb theme_builder_area=\u00bbpost_content\u00bb hover_enabled=\u00bb0&#8243; sticky_enabled=\u00bb0&#8243;]<p><span>Pegamos estas l\u00edneas de c\u00f3digo en nuestro JSFiddle justo debajo de la a-entity camera, tal y como se muestra en la imagen:<\/span><\/p>[\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2023\/02\/Picture-7.png\u00bb _builder_version=\u00bb4.19.0&#8243; _module_preset=\u00bbdefault\u00bb theme_builder_area=\u00bbpost_content\u00bb title_text=\u00bbPicture 7&#8243; hover_enabled=\u00bb0&#8243; sticky_enabled=\u00bb0&#8243; align=\u00bbcenter\u00bb][\/et_pb_image][et_pb_text _builder_version=\u00bb4.19.0&#8243; _module_preset=\u00bbdefault\u00bb theme_builder_area=\u00bbpost_content\u00bb hover_enabled=\u00bb0&#8243; sticky_enabled=\u00bb0&#8243;]<p><span>Es importante pegar estas l\u00edneas de c\u00f3digo dentro de la etiqueta a-scene, entre &lt;a-scene&gt; y &lt;\/a-scene&gt;. <\/span><span>Al clicar en \u201cRun\u201d, este es el proyecto que acamos de crear:<\/span><\/p>[\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2023\/02\/Picture-8.png\u00bb _builder_version=\u00bb4.19.0&#8243; _module_preset=\u00bbdefault\u00bb theme_builder_area=\u00bbpost_content\u00bb title_text=\u00bbPicture 8&#8243; hover_enabled=\u00bb0&#8243; sticky_enabled=\u00bb0&#8243; align=\u00bbcenter\u00bb][\/et_pb_image][et_pb_text _builder_version=\u00bb4.19.0&#8243; _module_preset=\u00bbdefault\u00bb theme_builder_area=\u00bbpost_content\u00bb hover_enabled=\u00bb0&#8243; sticky_enabled=\u00bb0&#8243;]<h2><span lang=\"ES\">Componentes y atributos<o:p><\/o:p><\/span><\/h2>[\/et_pb_text][et_pb_text _builder_version=\u00bb4.19.0&#8243; _module_preset=\u00bbdefault\u00bb theme_builder_area=\u00bbpost_content\u00bb hover_enabled=\u00bb0&#8243; sticky_enabled=\u00bb0&#8243;]La caja y la esfera que hemos creado son componentes de a-frame, los cuales tienen una serie de atributos, como el tama\u00f1o, la posici\u00f3n o el color. La forma en que esto se representa en HTML es:[\/et_pb_text][et_pb_text _builder_version=\u00bb4.19.0&#8243; _module_preset=\u00bbdefault\u00bb theme_builder_area=\u00bbpost_content\u00bb hover_enabled=\u00bb0&#8243; sticky_enabled=\u00bb0&#8243;]<p><span style=\"color: #00ffff;\">&lt;a-box<\/span> <span style=\"color: #ff9900;\">position<\/span><span style=\"color: #00ffff;\">=<\/span><span style=\"color: #339966;\">\u00ab-1 0.5 -3\u00bb<\/span> <span style=\"color: #ff9900;\">rotation<\/span><span style=\"color: #00ffff;\">=<\/span><span style=\"color: #339966;\">\u00ab0 45 0\u00bb<\/span> <span style=\"color: #ff9900;\">color<\/span><span style=\"color: #00ffff;\">=<span style=\"color: #339966;\">\u00ab<\/span><\/span><span style=\"color: #339966;\">#4CC3D9<\/span><span style=\"color: #00ffff;\"><span style=\"color: #339966;\">\u00ab<\/span>&gt;&lt;\/a-box&gt;<\/span><\/p>[\/et_pb_text][et_pb_text _builder_version=\u00bb4.19.0&#8243; _module_preset=\u00bbdefault\u00bb theme_builder_area=\u00bbpost_content\u00bb hover_enabled=\u00bb0&#8243; sticky_enabled=\u00bb0&#8243;]<p><span>En este caso, los componentes, est\u00e1n escritos en azul, siendo la etiqueta &lt;a-box&gt; &lt;\/a-box&gt;. Todos los componentes deben tener cerrada la etiqueta: &lt;\/a-componente&gt;.<\/span><\/p>\n<p><span>Los atributos est\u00e1n en naranja y los valores de esos atributos en verde, que ir\u00e1n entre comillas. <\/span><\/p>\n<p><span>Hay que tener en cuenta que los atributos de los componentes deben estar dentro de la etiqueta.<\/span><\/p>\n<p><span>Para consultar los atributos que tiene cada componente de a-frame, hay que acceder a la p\u00e1gina de <a href=\"https:\/\/aframe.io\/docs\/1.4.0\/introduction\/\">documentaci\u00f3n de A-Frame<\/a>. Arriba a la izquierda aparece un navegador, escribimos el componente con el que queramos trabajar y del que queramos buscar todos sus atributos, por ejemplo, buscamos el componente box:<\/span><\/p>[\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2023\/02\/Picture-11.png\u00bb _builder_version=\u00bb4.19.0&#8243; _module_preset=\u00bbdefault\u00bb theme_builder_area=\u00bbpost_content\u00bb title_text=\u00bbPicture 11&#8243; hover_enabled=\u00bb0&#8243; sticky_enabled=\u00bb0&#8243; align=\u00bbcenter\u00bb][\/et_pb_image][et_pb_text _builder_version=\u00bb4.19.0&#8243; _module_preset=\u00bbdefault\u00bb theme_builder_area=\u00bbpost_content\u00bb hover_enabled=\u00bb0&#8243; sticky_enabled=\u00bb0&#8243;]<p><span>Nos aparece toda la informaci\u00f3n relativa a ese componente. Haciendo scroll down, en la secci\u00f3n atributos, es donde podemos ver con qu\u00e9 atributos podemos trabajar para ese componente:<\/span><\/p>[\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2023\/02\/Picture-10.png\u00bb _builder_version=\u00bb4.19.0&#8243; _module_preset=\u00bbdefault\u00bb theme_builder_area=\u00bbpost_content\u00bb title_text=\u00bbPicture 10&#8243; hover_enabled=\u00bb0&#8243; sticky_enabled=\u00bb0&#8243; align=\u00bbcenter\u00bb][\/et_pb_image][et_pb_text _builder_version=\u00bb4.19.0&#8243; _module_preset=\u00bbdefault\u00bb theme_builder_area=\u00bbpost_content\u00bb hover_enabled=\u00bb0&#8243; sticky_enabled=\u00bb0&#8243;]<h2><span lang=\"ES\">Ejemplo trabajar con atributos<o:p><\/o:p><\/span><\/h2>[\/et_pb_text][et_pb_text _builder_version=\u00bb4.19.0&#8243; _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0&#8243; global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb sticky_enabled=\u00bb0&#8243;]<p><span>Por \u00faltimo, para entender los atributos de los componentes de forma m\u00e1s pr\u00e1ctica, vamos a cambiar la posici\u00f3n de la caja y el color de la esfera.<\/span><\/p>\n<p><span>Para ello, en el atributo position de la caja ponemos el valor \u201c0 10 0\u201d y en el atributo color de la esfera cambiamos el valor por \u201c#FFFFFF\u201d para pintarla blanca:<\/span><\/p>[\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2023\/02\/Picture-12.png\u00bb _builder_version=\u00bb4.19.0&#8243; _module_preset=\u00bbdefault\u00bb theme_builder_area=\u00bbpost_content\u00bb title_text=\u00bbPicture 12&#8243; hover_enabled=\u00bb0&#8243; sticky_enabled=\u00bb0&#8243;][\/et_pb_image][et_pb_text _builder_version=\u00bb4.19.0&#8243; _module_preset=\u00bbdefault\u00bb hover_enabled=\u00bb0&#8243; global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb sticky_enabled=\u00bb0&#8243;]<p>El resultado final queda as\u00ed:<\/p>[\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2023\/02\/Picture-13.png\u00bb _builder_version=\u00bb4.19.0&#8243; _module_preset=\u00bbdefault\u00bb theme_builder_area=\u00bbpost_content\u00bb title_text=\u00bbPicture 13&#8243; hover_enabled=\u00bb0&#8243; sticky_enabled=\u00bb0&#8243;][\/et_pb_image][et_pb_toggle title=\u00bbReferencias\u00bb _builder_version=\u00bb4.19.0&#8243; _module_preset=\u00bbdefault\u00bb body_link_text_color=\u00bb#931b14&#8243; hover_enabled=\u00bb0&#8243; global_colors_info=\u00bb{}\u00bb theme_builder_area=\u00bbpost_content\u00bb sticky_enabled=\u00bb0&#8243;]<p><!-- divi:paragraph --><\/p>\n<ul>\n<li>\n<p><span>Documentaci\u00f3n A-Frame. Recuperado de: <a href=\"https:\/\/aframe.io\/docs\/1.4.0\/introduction\/\">https:\/\/aframe.io\/docs\/1.4.0\/introduction\/<\/a> <\/span><\/p>\n<\/li>\n<li>\n<p><span><\/span><span>BabiaXR. Recuperado de: <a href=\"https:\/\/babiaxr.gitlab.io\/tutorials\/get_started\/\">https:\/\/babiaxr.gitlab.io\/tutorials\/get_started\/<\/a> <\/span><\/p>\n<\/li>\n<li>\n<p><span><\/span><span>JSFiddle. Recuperado de: <a href=\"https:\/\/jsfiddle.net\/\">https:\/\/jsfiddle.net\/<\/a> <\/span><\/p>\n<\/li>\n<\/ul>\n<p><!-- \/divi:list --><\/p>[\/et_pb_toggle][\/et_pb_column][\/et_pb_row][\/et_pb_section]\n<div class=\"pdfprnt-buttons pdfprnt-buttons-post pdfprnt-bottom-right\"><a href=\"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/posts\/81423?print=pdf\" class=\"pdfprnt-button pdfprnt-button-pdf\" target=\"_blank\" ><img decoding=\"async\" src=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/plugins\/pdf-print\/images\/pdf.png\" alt=\"image_pdf\" title=\"View PDF\" \/><span class=\"pdfprnt-button-title pdfprnt-button-pdf-title\">Versi\u00f3n en PDF<\/span><\/a><\/div>","protected":false},"excerpt":{"rendered":"<p>En este tutorial se explicar\u00e1 c\u00f3mo crear una escena b\u00e1sica y c\u00f3mo integrar objetos b\u00e1sicos c\u00f3mo cajas o esferas en un entorno inmersivo desarrollado con A-Frame. A-Frame es un framework de c\u00f3digo abierto basado en HTML que permite crear entornos inmersivos. En esta ocasi\u00f3n, este tutorial se centra en la creaci\u00f3n de un entorno de Realidad Virtual. La integraci\u00f3n de estos objetos b\u00e1sicos ser\u00e1n la base de una futura creaci\u00f3n m\u00e1s compleja. <a class=\"continue\" href=\"https:\/\/proyectos.comunicaciondigital.es\/en\/escena-basica-aframe\/\">Continua leyendo<span> C\u00f3mo crear tu primera escena b\u00e1sica en A-Frame<\/span><\/a><\/p>","protected":false},"author":94,"featured_media":81440,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"<!-- wp:group {\"className\":\"atavist-title-design cover-text-simple\"} -->\n<div class=\"wp-block-group atavist-title-design cover-text-simple\"><!-- wp:heading {\"textAlign\":\"left\",\"align\":\"center\",\"className\":\"aligncenter atavist-title-h2\"} -->\n<h2 class=\"has-text-align-left aligncenter atavist-title-h2\">Gu\u00eda inicial<\/h2>\n<!-- \/wp:heading --><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:paragraph -->\n<p>Javascript es el lenguaje de script nativo de la web. <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"align\":\"wide\"} -->\n<figure class=\"wp-block-image alignwide\"><img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/d3de1-js1-1533890338-46.png\" alt=\"\"\/><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:image {\"align\":\"center\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/645b4-js2-1533890439-37.jpg\" alt=\"\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>Su aprendizaje supone introducirse en un lenguaje de programaci\u00f3n, y aunque pueda parecer complicado de entrada, luego nos permitir\u00e1 saber c\u00f3mo modificar c\u00f3digo ya escrito o realizar visualizaciones muy atractivas mediante el uso de librer\u00edas y APIs que se basan en Javascript.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"align\":\"wide\"} -->\n<figure class=\"wp-block-image alignwide\"><img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/0e98e-js3-1533890711-78.png\" alt=\"\"\/><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p><b>\u00bfPara qu\u00e9 nos sirve Javascript en un proyecto period\u00edstico?<\/b><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>Para tener unas nociones generales sobre la programaci\u00f3n con scripts. <\/li><li>Para saber c\u00f3mo funciona, de forma global, la interactividad en la manipulaci\u00f3n de datos y de las visualizaciones.<\/li><li>Para comprender el c\u00f3digo resultante de los sistemas de datos y visualizaci\u00f3n, y saber manipular determinados par\u00e1metros. <\/li><li>Para comenzar a adentrarnos en la creaci\u00f3n de visualizaciones basadas en librer\u00edas JS como jQuery <\/li><li>Para hacer scraping de datos con Javascript (Jquery)&nbsp;&nbsp;\n<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>Para trabajar con Javascript utilizaremos editores de c\u00f3digo online como <a href=\"https:\/\/jsfiddle.net\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">JsFiddle.net<\/a>. Podr\u00e1s acceder a los ejemplos y ejercicios de dos formas: <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>A) A trav\u00e9s de los enlaces que encontrar\u00e1s en cada ejercicio y que te dar\u00e1n acceso al entorno online de edici\u00f3n:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"align\":\"wide\"} -->\n<figure class=\"wp-block-image alignwide\"><img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/4c615-js4-1533891129-19.png\" alt=\"\"\/><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p> B) Manipular los ejemplos de forma directa a trav\u00e9s de objetos embebidos como este, en el que podr\u00e1s trabajar en las diferentes partes del c\u00f3digo accediendo a las diferentes pesta\u00f1as disponibles. <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:group {\"className\":\"atavist-embed\"} -->\n<div class=\"wp-block-group atavist-embed\"><!-- wp:html \/--><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:group {\"className\":\"atavist-title-design cover-text-simple\"} -->\n<div class=\"wp-block-group atavist-title-design cover-text-simple\"><!-- wp:heading {\"textAlign\":\"left\",\"align\":\"center\",\"className\":\"aligncenter atavist-title-h2\"} -->\n<h2 class=\"has-text-align-left aligncenter atavist-title-h2\">\u00bfQu\u00e9 es Javascript?<\/h2>\n<!-- \/wp:heading --><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:heading -->\n<h2>\u00bfQu\u00e9 es?<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Un <b>lenguaje<\/b> de programaci\u00f3n <b>interpretado<\/b> por los navegadores en tiempo real. <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"align\":\"wide\"} -->\n<figure class=\"wp-block-image alignwide\"><img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/c2ba4-js5-1533893491-16.jpg\" alt=\"Lenguajes compilados vs Lenguajes interpretados\"\/><figcaption>Lenguajes compilados vs Lenguajes interpretados<\/figcaption><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>Es un dialecto del est\u00e1ndar <a href=\"https:\/\/www.w3schools.com\/js\/js_es6.asp\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">ECMAScript<\/a> (versi\u00f3n 6)<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Responde al modelo de P<a href=\"https:\/\/www.desarrolloweb.com\/articulos\/499.php\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">rogramaci\u00f3n orientada a objetos (POO)<\/a>. Aunque sigue el paradigma de programaci\u00f3n basado en objetos, trabaja con prototipos, aunque las versiones actuales permiten el manejo de <a href=\"https:\/\/medium.com\/@jmz12\/usando-clases-en-javascript-e07f0e25c67d\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">clases (class)<\/a>. Al trabajar bajo el modelo de POO usa t\u00e9cnicas que le dan una importante versatilidad como, por ejemplo:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>\n<b>Modularidad<\/b>. Las aplicaciones se pueden subdividir en partes, conocidas como m\u00f3dulos.<\/li><li>\n<b>Encapsulamiento<\/b>. Los datos se \"encapsulan\" o aislan para evitar que puedan ser manipulados o cambiados de estado.<\/li><li>\n<b>Control del DOM<\/b>. Permite interactuar con la p\u00e1gina web mediante <a href=\"https:\/\/developer.mozilla.org\/es\/docs\/Glossary\/DOM\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">DOM<\/a>\n<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>Puede funcionar tanto: <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>En el lado cliente (client-side) como parte del navegador web<\/li><li>En el lado servidor (vg. <a href=\"https:\/\/nodejs.org\/es\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Node.js<\/a>)<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:group {\"align\":\"center\",\"className\":\"aligncenter is-style-border\"} -->\n<div class=\"wp-block-group aligncenter is-style-border\"><!-- wp:paragraph -->\n<p>Aunque el nombre es similar a&nbsp;JAVA, tiene que ver poco con este otro lenguaje de programaci\u00f3n, tanto en las&nbsp;sem\u00e1nticas como en sus&nbsp;prop\u00f3sitos, que son&nbsp;diferentes, as\u00ed que debemos no confundirlos.&nbsp;&nbsp;<\/p>\n<!-- \/wp:paragraph --><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Ejercicio<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:list -->\n<ol>\n<li><i>Abre el editor de c\u00f3digo en <a href=\"https:\/\/jsfiddle.net\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">JSFiddle<\/a> con <a href=\"https:\/\/jsfiddle.net\/gertrudix\/k9mgd2hL\/2\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">el ejercicio<\/a>.<\/i><\/li>\n<li>\n<i>Revisa el c\u00f3digo html. F\u00edjate que el c\u00f3digo JS aparece en el fichero HTML. Prueba el resultado que produce el bot\u00f3n. \u00bfC\u00f3mo crees que funciona revisando el c\u00f3digo?<\/i>\n<\/li>\n<\/ol>\n<!-- \/wp:list -->\n\n<!-- wp:group {\"className\":\"atavist-embed\"} -->\n<div class=\"wp-block-group atavist-embed\"><!-- wp:html \/--><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:group {\"className\":\"atavist-title-design cover-text-simple\"} -->\n<div class=\"wp-block-group atavist-title-design cover-text-simple\"><!-- wp:heading {\"textAlign\":\"left\",\"align\":\"center\",\"className\":\"aligncenter atavist-title-h2\"} -->\n<h2 class=\"has-text-align-left aligncenter atavist-title-h2\">\u00bfD\u00f3nde aparece?<\/h2>\n<!-- \/wp:heading --><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:image {\"align\":\"wide\"} -->\n<figure class=\"wp-block-image alignwide\"><img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/55de3-js6-1533898857-79.png\" alt=\"\"\/><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>Javascript puede cargarse en la p\u00e1gina web a trav\u00e9s de diferentes opciones.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Ejercicio<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:list -->\n<ol><li>\n<i>Abre el ejercicio en JSFiddle y f\u00edjate en las diferentes cajas para entender d\u00f3nde puede ubicarse el c\u00f3digo JS.<\/i>\n<\/li><\/ol>\n<!-- \/wp:list -->\n\n<!-- wp:group {\"className\":\"atavist-embed\"} -->\n<div class=\"wp-block-group atavist-embed\"><!-- wp:html \/--><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:group {\"className\":\"atavist-title-design cover-text-simple\"} -->\n<div class=\"wp-block-group atavist-title-design cover-text-simple\"><!-- wp:heading {\"textAlign\":\"left\",\"align\":\"center\",\"className\":\"aligncenter atavist-title-h2\"} -->\n<h2 class=\"has-text-align-left aligncenter atavist-title-h2\">Depurando. Consola del navegador.<\/h2>\n<!-- \/wp:heading --><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:paragraph -->\n<p>La consola del navegador nos permite revisar y depurar los errores de c\u00f3digo. <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Todos los navegadores actuales disponen de ella. Para abrirla:&nbsp;&nbsp;<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>En Chrome: Ctrl+Shift+J (Windows) o Cmd+Alt+I (Mac) <\/li><li>En Firefox: Control + \u21e7 + J (Windows)&nbsp;&nbsp;\n<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:image {\"align\":\"wide\"} -->\n<figure class=\"wp-block-image alignwide\"><img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/210d9-js7-1533899311-62.png\" alt=\"Consola del navegador en Chrome\"\/><figcaption>Consola del navegador en Chrome<\/figcaption><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Ejercicio<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Vamos a comprobar, a trav\u00e9s de la consola de Chrome, d\u00f3nde aparece Javascript.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ol>\n<li><i>Carga una p\u00e1gina, por ejemplo de un peri\u00f3dico como El Mundo o El Pa\u00eds. Abre la Consola mediante las funciones r\u00e1pidas que hemos visto anteriormente. Otra opci\u00f3n, es buscar en el men\u00fa del navegador. En el caso de Chrome: M\u00e1s herrramientas &gt; Herramientas para desarrolladores <\/i><\/li>\n<li>\n<i>F\u00edjate en la pesta\u00f1a Elements   -d\u00f3nde aparece las etiquetas de script. Localiza las etiquetas de script, la etiqueta <a href=\"https:\/\/developer.mozilla.org\/es\/docs\/Web\/HTML\/Elemento\/noscript\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">noscript<\/a>, etc.<\/i>\n<\/li>\n<\/ol>\n<!-- \/wp:list -->\n\n<!-- wp:image {\"align\":\"wide\"} -->\n<figure class=\"wp-block-image alignwide\"><img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/25b5a-js8-1533899520-76.png\" alt=\"Ejemplo de c\u00f3digo en la consola del navegador\"\/><figcaption>Ejemplo de c\u00f3digo en la consola del navegador<\/figcaption><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:heading -->\n<h2>Utilidad de la consola. Para qu\u00e9 sirve.<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>         <!--StartFragment-->La consola nos sirve para probar el funcionamiento de una p\u00e1gina o una aplicaci\u00f3n de forma que: a) podamos detectar errores de c\u00f3digo; y b) hacer pruebas con JS <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Permite: <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>Comprobar informaci\u00f3n sobre errores o alertas\n<\/li><li>Utilizar el inspector de c\u00f3digo para depurarlo\n<\/li><li>Ejecutar expresiones o comandos de JS&nbsp;&nbsp;\n<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:image {\"align\":\"center\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/19e41-js9-1533899790-35.png\" alt=\"\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:group {\"className\":\"atavist-title-design cover-text-simple\"} -->\n<div class=\"wp-block-group atavist-title-design cover-text-simple\"><!-- wp:heading {\"textAlign\":\"left\",\"align\":\"center\",\"className\":\"aligncenter atavist-title-h2\"} -->\n<h2 class=\"has-text-align-left aligncenter atavist-title-h2\">\u00bfPara qu\u00e9 sirve Javascript?<\/h2>\n<!-- \/wp:heading --><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:paragraph -->\n<p>Es un lenguaje que permite <b>dotar de interactividad<\/b> a las p\u00e1ginas web. Algunas de las tareas b\u00e1sicas que puede realizar son:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ol>\n<li>Escribir en HTML<\/li>\n<li>Reaccionar a eventos<\/li>\n<li>Modificar elementos HTML<\/li>\n<li>Validar entrada de datos<\/li>\n<li>Cambiar o modificar atributos\n<\/li>\n<\/ol>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>Adem\u00e1s, mediante la <a href=\"http:\/\/html5index.org\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">API JS de HTML5 <\/a>podemos acceder a recursos adicionales: c\u00e1mara, almacenamiento de datos, creaci\u00f3n de gr\u00e1ficos, flujo de datos con servidores\u2026) <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"align\":\"full\"} -->\n<figure class=\"wp-block-image alignfull\"><img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/29104-jsapi-1573491833-95.png\" alt=\"\"\/><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>Permite acceder a informaci\u00f3n en internet: por ejemplo, buscar y obtener las palabras m\u00e1s populares en Twitter de un tema, o para hacer scraping de web utilizando soluciones como <a href=\"https:\/\/scotch.io\/tutorials\/scraping-the-web-with-node-js\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Node.js<\/a>, <a href=\"https:\/\/medialab.github.io\/artoo\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Artoo.js<\/a> &nbsp;o <a href=\"http:\/\/nrabinowitz.github.io\/pjscrape\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">pjscrape<\/a>)<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Tambi\u00e9n permite organizar y presentar datos como, por ejemplo, automatizar el trabajo de las hojas de c\u00e1lculo; o la visualizaci\u00f3n de datos.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Ejercicio<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Veamos c\u00f3mo JS aporta interactividad a una web, <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ol>\n<li>Accede a la web de <a href=\"https:\/\/civio.es\/espana-en-llamas\/mapa-de-incendios-forestales\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Espa\u00f1a en Llamas<\/a>. Navega por el mapa, usa los filtros, etc. <\/li>\n<li>Ahora deshabilita Javascript desde las <a href=\"https:\/\/es.ccm.net\/faq\/26408-como-desactivar-javascript-en-google-chrome\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">opciones del navegador<\/a> o usando alguna herramienta como <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/web-developer\/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=es\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">WebDevelopper Toolbar<\/a>. Comprueba qu\u00e9 sucede. \u00bfPuedes navegar el mapa? \u00bfCompartir en redes sociales? <\/li>\n<\/ol>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>Veremos ahora, en detalle, alguna de estas funciones.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2>1. Escribir en HTML<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:image {\"align\":\"right\"} -->\n<div class=\"wp-block-image\"><figure class=\"alignright\"><img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/d95a1-js11-1533900998-81.png\" alt=\"\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>Una de las cosas que puede hacer JS es escribir contenido en HTML. Veamos <a href=\"https:\/\/jsfiddle.net\/gertrudix\/qLcgfu95\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">este ejemplo<\/a>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:group {\"className\":\"atavist-embed\"} -->\n<div class=\"wp-block-group atavist-embed\"><!-- wp:html \/--><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Ejercicio<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>1. Sobre el ejemplo anterior, a\u00f1ade un enlace a la home del peri\u00f3dico El Mundo (www.elmundo.es)<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>2. Prueba a incluir otro enlace a otra web distinta.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\"><i><a href=\"https:\/\/jsfiddle.net\/gertrudix\/qLcgfu95\/3\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Soluci\u00f3n<\/a><\/i><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:group {\"className\":\"atavist-embed\"} -->\n<div class=\"wp-block-group atavist-embed\"><!-- wp:html \/--><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:heading -->\n<h2>2. Reaccionar a eventos<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:image {\"align\":\"right\"} -->\n<div class=\"wp-block-image\"><figure class=\"alignright\"><img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/1f0aa-js12-1533902831-33.png\" alt=\"\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>Otra funci\u00f3n es reaccionar a eventos creados por el usuario (hacer clic, pasar por encima de una zona...), por el propio navegador (cargar la p\u00e1gina), etc. como sucede en este ejemplo. <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:group {\"className\":\"atavist-embed\"} -->\n<div class=\"wp-block-group atavist-embed\"><!-- wp:html \/--><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Ejercicio<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>1. Modifica el ejemplo anterior para que el mensaje de alerta muestre tu nombre.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\"><i><a href=\"https:\/\/jsfiddle.net\/gertrudix\/vpevk15L\/2\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Soluci\u00f3n<\/a><\/i><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:group {\"className\":\"atavist-embed\"} -->\n<div class=\"wp-block-group atavist-embed\"><!-- wp:html \/--><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:heading -->\n<h2>3. Modificar contenido en HTML<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Otra funci\u00f3n es modificar contenido que ya est\u00e1 cargado en el html. <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"align\":\"wide\"} -->\n<figure class=\"wp-block-image alignwide\"><img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/b228a-js13-1533903052-31.png\" alt=\"\"\/><\/figure>\n<!-- \/wp:image -->\n\n<!-- wp:group {\"className\":\"atavist-embed\"} -->\n<div class=\"wp-block-group atavist-embed\"><!-- wp:html \/--><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:paragraph -->\n<p><b>Ejercicio<\/b><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>En este ejemplo hay algo que no funciona. Rev\u00edsalo y ajusta lo que est\u00e9 mal para que funcione el cambio de contenido.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\"><i><a href=\"https:\/\/jsfiddle.net\/gertrudix\/3s9k2vtc\/2\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Soluci\u00f3n<\/a><\/i><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:group {\"className\":\"atavist-embed\"} -->\n<div class=\"wp-block-group atavist-embed\"><!-- wp:html \/-->\n\n<!-- wp:paragraph {\"fontSize\":\"small\"} -->\n<p class=\"has-small-font-size\">El id no es correcto. Deben de tener el mismo nombre.<\/p>\n<!-- \/wp:paragraph --><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:heading -->\n<h2>4. Validar la entrada de datos<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:image {\"align\":\"right\"} -->\n<div class=\"wp-block-image\"><figure class=\"alignright\"><img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/b3437-js14-1533931261-10.png\" alt=\"isNan (x) Es un objeto global de Javascript que eval\u00faa un argumento para determinar si es un n\u00famero\"\/><figcaption>isNan (x) Es un objeto global de Javascript que eval\u00faa un argumento para determinar si es un n\u00famero<\/figcaption><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>Javascript es muy \u00fatil para validar si la entrada de datos en los campos de un formulario son los adecuados, aquellos que por formato o tipo se esperan recibir.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>En este ejemplo, podemos comprobar si los datos que se introducen est\u00e1n comprendidos dentro de un rango. En caso contrario, saltar\u00e1 una alerta indicando que no son correctos.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:group {\"className\":\"atavist-embed\"} -->\n<div class=\"wp-block-group atavist-embed\"><!-- wp:html \/--><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:paragraph -->\n<p><b>Ejercicio<\/b><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Modifica el ejemplo anterior para que la validaci\u00f3n sea para n\u00fameros comprendidos entre 10 y 20.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\"><i><a href=\"https:\/\/jsfiddle.net\/2k97b5wt\/16\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Soluci\u00f3n<\/a><\/i><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:group {\"className\":\"atavist-embed\"} -->\n<div class=\"wp-block-group atavist-embed\"><!-- wp:html \/--><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:heading -->\n<h2>5. Cambiar o modificar atributos<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:image {\"align\":\"right\"} -->\n<div class=\"wp-block-image\"><figure class=\"alignright\"><img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/4236a-js15-1533935333-52.png\" alt=\"\"\/><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p>Otra posibilidad es cambiar determinados atributos de los elementos html. Aqu\u00ed las posibilidades son muy amplias, dado que podemos modificar los valores de cualquier atributo, desde el color de un texto, el tipo de fuente, etc.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>En este ejemplo generamos un efecto de sustituci\u00f3n modificando el atributo src de una imagen.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:group {\"className\":\"atavist-embed\"} -->\n<div class=\"wp-block-group atavist-embed\"><!-- wp:html \/--><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:heading {\"level\":3} -->\n<h3>Ejercicio<\/h3>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Modifica el valor del atributo src con estas im\u00e1genes que realizan un efecto de sustituci\u00f3n similar<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li><p><a href=\"http:\/\/comunicaciondigital.es\/wp-content\/master\/lightoff.png\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">http:\/\/comunicaciondigital.es\/wp-content\/master\/lighton.png<\/a><\/p><\/li><li><p><a href=\"http:\/\/comunicaciondigital.es\/wp-content\/master\/lightoff.png\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">http:\/\/comunicaciondigital.es\/wp-content\/master\/lightoff.png<\/a><\/p><\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\"><i><a href=\"https:\/\/jsfiddle.net\/2nwru4pe\/1\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Soluci\u00f3n<\/a><\/i><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:group {\"className\":\"atavist-embed\"} -->\n<div class=\"wp-block-group atavist-embed\"><!-- wp:html \/-->\n\n<!-- wp:paragraph {\"fontSize\":\"small\"} -->\n<p class=\"has-small-font-size\">Enciende o apaga la luz (la primera imagen es el primer bot\u00f3n), la segunda es para img y el segundo bot\u00f3n<\/p>\n<!-- \/wp:paragraph --><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:group {\"className\":\"atavist-title-design cover-text-simple\"} -->\n<div class=\"wp-block-group atavist-title-design cover-text-simple\"><!-- wp:heading {\"textAlign\":\"left\",\"align\":\"center\",\"className\":\"aligncenter atavist-title-h2\"} -->\n<h2 class=\"has-text-align-left aligncenter atavist-title-h2\">\u00bfQu\u00e9 resultados produce?<\/h2>\n<!-- \/wp:heading --><\/div>\n<!-- \/wp:group -->\n\n<!-- wp:paragraph -->\n<p>Javascript utiliza varios procedimientos o displays de escritura:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>Caja de alerta - <i>window.alert() <\/i>[<a href=\"https:\/\/jsfiddle.net\/gertrudix\/kzf8grbg\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Ver ejemplo<\/a>]\n<\/li><li>Salida html - <i>document.write() <\/i>[<a href=\"https:\/\/jsfiddle.net\/gertrudix\/55eL53bx\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Ver ejemplo<\/a>]\n<\/li><li>Elemento html - <i>inner.html() <\/i>[<a href=\"https:\/\/jsfiddle.net\/gertrudix\/vLn56ddr\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Ver ejemplo<\/a>]\n<\/li><li>Consola de navegador - <i>console.log() <\/i>[<a href=\"https:\/\/jsfiddle.net\/gertrudix\/ov7vdpzf\/2\/\" target=\"_blank\" class=\"regular-link\" rel=\"noopener\">Ver ejemplo<\/a>]\n<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:image {\"align\":\"wide\"} -->\n<figure class=\"wp-block-image alignwide\"><img src=\"https:\/\/cibercambio.files.wordpress.com\/2021\/04\/c98b4-js16-1533936074-39.png\" alt=\"\"\/><\/figure>\n<!-- \/wp:image -->","_et_gb_content_width":"1080","footnotes":""},"categories":[248],"tags":[251,266],"class_list":["post-81423","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-investigacion-cientifica","tag-analisis-redes-sociales","tag-slr"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>C\u00f3mo crear tu primera escena b\u00e1sica en A-Frame - Portal de proyectos multimedia<\/title>\n<meta name=\"description\" content=\"En este tutorial se explicar\u00e1 c\u00f3mo crear una escena b\u00e1sica y c\u00f3mo integrar objetos b\u00e1sicos c\u00f3mo cajas o esferas en un entorno inmersivo desarrollado con A-Frame. A-Frame es un framework de c\u00f3digo abierto basado en HTML que permite crear entornos inmersivos.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/proyectos.comunicaciondigital.es\/en\/escena-basica-aframe\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo crear tu primera escena b\u00e1sica en A-Frame - Portal de proyectos multimedia\" \/>\n<meta property=\"og:description\" content=\"En este tutorial se explicar\u00e1 c\u00f3mo crear una escena b\u00e1sica y c\u00f3mo integrar objetos b\u00e1sicos c\u00f3mo cajas o esferas en un entorno inmersivo desarrollado con A-Frame. A-Frame es un framework de c\u00f3digo abierto basado en HTML que permite crear entornos inmersivos.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/proyectos.comunicaciondigital.es\/en\/escena-basica-aframe\/\" \/>\n<meta property=\"og:site_name\" content=\"Portal de proyectos multimedia\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-15T08:37:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-15T09:13:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2023\/02\/Portada-scaled.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1671\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Alejandro Carbonell\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/escena-basica-aframe\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/escena-basica-aframe\/\"},\"author\":{\"name\":\"Alejandro Carbonell\",\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/#\/schema\/person\/83cccf8d4bc5ef2935acfcb9310cd8a5\"},\"headline\":\"C\u00f3mo crear tu primera escena b\u00e1sica en A-Frame\",\"datePublished\":\"2023-02-15T08:37:32+00:00\",\"dateModified\":\"2023-02-15T09:13:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/escena-basica-aframe\/\"},\"wordCount\":1900,\"image\":{\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/escena-basica-aframe\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2023\/02\/Portada-scaled.jpeg\",\"keywords\":[\"an\u00e1lisis redes sociales\",\"SLR\"],\"articleSection\":[\"Investigaci\u00f3n cient\u00edfica\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/escena-basica-aframe\/\",\"url\":\"https:\/\/proyectos.comunicaciondigital.es\/escena-basica-aframe\/\",\"name\":\"C\u00f3mo crear tu primera escena b\u00e1sica en A-Frame - Portal de proyectos multimedia\",\"isPartOf\":{\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/escena-basica-aframe\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/escena-basica-aframe\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2023\/02\/Portada-scaled.jpeg\",\"datePublished\":\"2023-02-15T08:37:32+00:00\",\"dateModified\":\"2023-02-15T09:13:32+00:00\",\"author\":{\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/#\/schema\/person\/83cccf8d4bc5ef2935acfcb9310cd8a5\"},\"description\":\"En este tutorial se explicar\u00e1 c\u00f3mo crear una escena b\u00e1sica y c\u00f3mo integrar objetos b\u00e1sicos c\u00f3mo cajas o esferas en un entorno inmersivo desarrollado con A-Frame. A-Frame es un framework de c\u00f3digo abierto basado en HTML que permite crear entornos inmersivos.\",\"breadcrumb\":{\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/escena-basica-aframe\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/proyectos.comunicaciondigital.es\/escena-basica-aframe\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/escena-basica-aframe\/#primaryimage\",\"url\":\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2023\/02\/Portada-scaled.jpeg\",\"contentUrl\":\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2023\/02\/Portada-scaled.jpeg\",\"width\":2560,\"height\":1671},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/escena-basica-aframe\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/proyectos.comunicaciondigital.es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo crear tu primera escena b\u00e1sica en A-Frame\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/#website\",\"url\":\"https:\/\/proyectos.comunicaciondigital.es\/\",\"name\":\"Portal de proyectos multimedia\",\"description\":\"Grupo Ciberimaginario\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/proyectos.comunicaciondigital.es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/#\/schema\/person\/83cccf8d4bc5ef2935acfcb9310cd8a5\",\"name\":\"Alejandro Carbonell\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/litespeed\/avatar\/001793e0b1f49f1f08498b38bfd210dd.jpg?ver=1775518563\",\"url\":\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/litespeed\/avatar\/001793e0b1f49f1f08498b38bfd210dd.jpg?ver=1775518563\",\"contentUrl\":\"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/litespeed\/avatar\/001793e0b1f49f1f08498b38bfd210dd.jpg?ver=1775518563\",\"caption\":\"Alejandro Carbonell\"},\"url\":\"https:\/\/proyectos.comunicaciondigital.es\/en\/author\/alejandro-carbonell\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00f3mo crear tu primera escena b\u00e1sica en A-Frame - Portal de proyectos multimedia","description":"En este tutorial se explicar\u00e1 c\u00f3mo crear una escena b\u00e1sica y c\u00f3mo integrar objetos b\u00e1sicos c\u00f3mo cajas o esferas en un entorno inmersivo desarrollado con A-Frame. A-Frame es un framework de c\u00f3digo abierto basado en HTML que permite crear entornos inmersivos.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/proyectos.comunicaciondigital.es\/en\/escena-basica-aframe\/","og_locale":"en_GB","og_type":"article","og_title":"C\u00f3mo crear tu primera escena b\u00e1sica en A-Frame - Portal de proyectos multimedia","og_description":"En este tutorial se explicar\u00e1 c\u00f3mo crear una escena b\u00e1sica y c\u00f3mo integrar objetos b\u00e1sicos c\u00f3mo cajas o esferas en un entorno inmersivo desarrollado con A-Frame. A-Frame es un framework de c\u00f3digo abierto basado en HTML que permite crear entornos inmersivos.","og_url":"https:\/\/proyectos.comunicaciondigital.es\/en\/escena-basica-aframe\/","og_site_name":"Portal de proyectos multimedia","article_published_time":"2023-02-15T08:37:32+00:00","article_modified_time":"2023-02-15T09:13:32+00:00","og_image":[{"width":2560,"height":1671,"url":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2023\/02\/Portada-scaled.jpeg","type":"image\/jpeg"}],"author":"Alejandro Carbonell","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/proyectos.comunicaciondigital.es\/escena-basica-aframe\/#article","isPartOf":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/escena-basica-aframe\/"},"author":{"name":"Alejandro Carbonell","@id":"https:\/\/proyectos.comunicaciondigital.es\/#\/schema\/person\/83cccf8d4bc5ef2935acfcb9310cd8a5"},"headline":"C\u00f3mo crear tu primera escena b\u00e1sica en A-Frame","datePublished":"2023-02-15T08:37:32+00:00","dateModified":"2023-02-15T09:13:32+00:00","mainEntityOfPage":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/escena-basica-aframe\/"},"wordCount":1900,"image":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/escena-basica-aframe\/#primaryimage"},"thumbnailUrl":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2023\/02\/Portada-scaled.jpeg","keywords":["an\u00e1lisis redes sociales","SLR"],"articleSection":["Investigaci\u00f3n cient\u00edfica"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/proyectos.comunicaciondigital.es\/escena-basica-aframe\/","url":"https:\/\/proyectos.comunicaciondigital.es\/escena-basica-aframe\/","name":"C\u00f3mo crear tu primera escena b\u00e1sica en A-Frame - Portal de proyectos multimedia","isPartOf":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/escena-basica-aframe\/#primaryimage"},"image":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/escena-basica-aframe\/#primaryimage"},"thumbnailUrl":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2023\/02\/Portada-scaled.jpeg","datePublished":"2023-02-15T08:37:32+00:00","dateModified":"2023-02-15T09:13:32+00:00","author":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/#\/schema\/person\/83cccf8d4bc5ef2935acfcb9310cd8a5"},"description":"En este tutorial se explicar\u00e1 c\u00f3mo crear una escena b\u00e1sica y c\u00f3mo integrar objetos b\u00e1sicos c\u00f3mo cajas o esferas en un entorno inmersivo desarrollado con A-Frame. A-Frame es un framework de c\u00f3digo abierto basado en HTML que permite crear entornos inmersivos.","breadcrumb":{"@id":"https:\/\/proyectos.comunicaciondigital.es\/escena-basica-aframe\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/proyectos.comunicaciondigital.es\/escena-basica-aframe\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/proyectos.comunicaciondigital.es\/escena-basica-aframe\/#primaryimage","url":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2023\/02\/Portada-scaled.jpeg","contentUrl":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/uploads\/2023\/02\/Portada-scaled.jpeg","width":2560,"height":1671},{"@type":"BreadcrumbList","@id":"https:\/\/proyectos.comunicaciondigital.es\/escena-basica-aframe\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/proyectos.comunicaciondigital.es\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo crear tu primera escena b\u00e1sica en A-Frame"}]},{"@type":"WebSite","@id":"https:\/\/proyectos.comunicaciondigital.es\/#website","url":"https:\/\/proyectos.comunicaciondigital.es\/","name":"Portal de proyectos multimedia","description":"Grupo Ciberimaginario","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/proyectos.comunicaciondigital.es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/proyectos.comunicaciondigital.es\/#\/schema\/person\/83cccf8d4bc5ef2935acfcb9310cd8a5","name":"Alejandro Carbonell","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/litespeed\/avatar\/001793e0b1f49f1f08498b38bfd210dd.jpg?ver=1775518563","url":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/litespeed\/avatar\/001793e0b1f49f1f08498b38bfd210dd.jpg?ver=1775518563","contentUrl":"https:\/\/proyectos.comunicaciondigital.es\/wp-content\/litespeed\/avatar\/001793e0b1f49f1f08498b38bfd210dd.jpg?ver=1775518563","caption":"Alejandro Carbonell"},"url":"https:\/\/proyectos.comunicaciondigital.es\/en\/author\/alejandro-carbonell\/"}]}},"_links":{"self":[{"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/posts\/81423","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/users\/94"}],"replies":[{"embeddable":true,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/comments?post=81423"}],"version-history":[{"count":3,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/posts\/81423\/revisions"}],"predecessor-version":[{"id":81441,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/posts\/81423\/revisions\/81441"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/media\/81440"}],"wp:attachment":[{"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/media?parent=81423"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/categories?post=81423"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/proyectos.comunicaciondigital.es\/en\/wp-json\/wp\/v2\/tags?post=81423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}