60478_es-ES

liliconcom

Publicar gráficos HTML interactivos en sitios web

Hola,

Me interesa colocar archivos HTML interactivos de JMP en mi sitio web personal, alojado en Squarespace. Parece que la única manera de hacerlo es 1) abrir el archivo HTML interactivo en Chrome, 2) copiar los scripts HTML (usando la opción "Desarrollador" de Mac) y 3) pegar el script en un cuadro de código o en un cuadro de "incrustar" en mi sitio web. Esto funciona (aunque siempre recibo un mensaje de error que indica que el código es demasiado largo). Sin embargo, siempre coloca el gráfico interactivo debajo del pie de página, al final de la página (independientemente de dónde haya colocado el cuadro de código). ¿Hay alguna manera de modificar el script para que coloque el gráfico interactivo donde quiero? Alternativamente, ¿hay alguna manera de simplemente "publicar" un gráfico interactivo en un sitio web, sin necesidad de scripts? (Sé que los hackers pueden robar mis datos de esta manera; no me preocupa. ¡Quiero que la gente robe mis datos, ya que son para el bien común!).

Re: publicación de gráficos HTML interactivos en sitios web

Gracias @Michael_Goff por la respuesta detallada.

Comprobaré mi opción con el departamento de TI local para encontrar una solución a largo plazo que funcione para mí.

¡Agradezco tu ayuda y la de todos!

Adán.

Re: publicación de gráficos HTML interactivos en sitios web

¡Hola Adán!

Este hilo data de 2018 y, desde su publicación, algunas cosas han cambiado en el ecosistema de internet. El fallo de esta integración se debe a un cambio en las políticas de seguridad de los navegadores. En 2020, Chrome y otros navegadores cambiaron el valor predeterminado de una de sus políticas, denominada " Política de referencia ", a una opción más segura. Esto se hace para proteger tus datos. La nueva política predeterminada se llama "origen estricto cuando existe un origen cruzado". Ten en cuenta que esta política se utiliza cuando el servidor que aloja el contenido no especifica ninguna otra política. Esto significa que, cuando dos páginas web intentan comunicarse, deben tener el mismo origen. En este caso, " origen" se refiere al mismo protocolo, nombre de host y puerto .

El problema que observa se debe a este cambio en la política del navegador. En JMP 17, nuestros informes HTML interactivos consultan la página principal para ver si hay información adicional disponible. Dado que esta política está vigente, se produce un error porque ya no se nos permite acceder a esa página principal con la nueva política predeterminada. Hemos solucionado esta situación con JMP 18. Esa sería la forma más sencilla de solucionar el problema.

En su caso, parece que podría estar accediendo a estas páginas HTML a través del sistema de archivos:

ventana.onload (archivo://isshfs.xxxxx.com/......./Tool_Counters/Counters.htm:1572:1014711)

Es un poco difícil diagnosticar completamente sin consultar las URL completas, pero algunos navegadores tratan las rutas del protocolo archivo:// de forma diferente a las de las páginas alojadas en un servidor web y las consideran de origen cruzado. Una forma de garantizar que estos archivos tengan el mismo origen es alojarlos desde un servidor web. La página principal debería estar en un directorio como https://. .com/iframe_ejemplo.html y la página secundaria se alojará desde https:// .com/Contadores.html.

A veces, realizamos pruebas con un servidor web local mediante un plugin de VS Code llamado Servidor en vivo . Este nos permite configurar rápidamente un servidor web usando el contenido de una carpeta en nuestro sistema de archivos. Sin embargo, para cualquier uso en producción, probablemente necesite contactar con su departamento de TI para configurar un servidor web que aloje estas páginas.

Nuevamente, alojar un servidor web sería una solución alternativa para integrar informes HTML interactivos desde JMP 17. En JMP 18 hemos agregado una solución para evitar encontrarse con ese error y debería poder integrar estas páginas desde el sistema de archivos nuevamente.

Gracias,

Michael Goff

Re: publicación de gráficos HTML interactivos en sitios web

Gracias, Adam.

Probé la página en Chrome y Firefox y cargó a pesar del error en la consola. En Edge, como ya notaste, y ahora también puedo replicarlo, el iFrame no carga. Voy a pedir ayuda internamente. Mantente al tanto.

Gracias,

~Juan

Re: publicación de gráficos HTML interactivos en sitios web

No me importa esquilar aquí.

Parece que no está funcionando.

Re: publicación de gráficos HTML interactivos en sitios web

Hola Adam,

Es posible que haya algo en la forma en que su página web principal, incluida la página HTML interactiva, que se considera una excepción no detectada.

Hay muchas maneras de hacerlo. A continuación, se muestra uno de los métodos más sencillos que suele funcionar:

La página principal contendría lo siguiente:

    <TITLE>iFrame Example</TITLE>


    <H1 id="toc-hId-2019574711">iFrame Example</H1>
    <P>Below is an example of an embedded Interactive HTML file using and iframe.</P>
    <IFRAME src="https://community.jmp.com/bivariate.html" height="900" width="500" title="iframe example"></IFRAME>

En este caso, bivariate.html es un archivo HTML interactivo exportado desde JMP.

Cuando esto se hace con un archivo HTML interactivo JMP 17, se mostrará un error de red en la consola.

"OBTENER archivo:///C:/api/webjmp net::ERR_ARCHIVO_NO_ENCONTRADO"

pero no debería impedir que la página se cargue.

Si quieres, prueba esto y cuéntame si funciona.

Si su página principal utiliza JavaScript para cargar la página HTML interactiva, es posible que necesite utilizar un bloque try/catch para manejar/ignorar la falla de la red para que pueda continuar cargando la página.

Si necesita ayuda con esto, comuníquese con el soporte técnico de JMP para proporcionar más detalles, a menos que se sienta cómodo compartiéndolo en este foro.

~Juan

Re: publicación de gráficos HTML interactivos en sitios web

están en el mismo servidor (en la misma carpeta principal).

También intenté moverlos a un servidor diferente y a mi escritorio.

Lamentablemente, estoy recibiendo el mismo error.

Adán.

Re: publicación de gráficos HTML interactivos en sitios web

@AdamChoen ,

Este error ocurre cuando la página web que incluye el iframe se encuentra en un servidor diferente al de la página HTML interactiva a la que hace referencia el iframe. Si puede mover el contenido HTML interactivo al mismo servidor/dominio que la página con el iframe, este error debería desaparecer.

En JMP 18, solucionamos esta restricción modificando la salida HTML interactiva.

~Juan

Re: publicación de gráficos HTML interactivos en sitios web

@John_Powell_JMP

Creo que ese es el error relevante para mi problema.

DOMException no detectada (en la promesa): No se pudo leer una propiedad denominada 'documento' desde 'Ventana': se bloqueó un marco con origen "nulo" para acceder a un marco de origen cruzado.
en window.onload (archivo://isshfs.xxxxx.com/......./Tool_Counters/Counters.htm:1572:1014711)

Re: publicación de gráficos HTML interactivos en sitios web

@AdamChoen ,

Cuando abra una página web en la que haya incrustado una página HTML interactiva de JMP 17, verifique la consola del navegador (haga clic con el botón derecho, Inspeccionar y luego seleccione Consola) para ver si se informaron errores.

Si hay alguno, cópielo aquí para que pueda ver qué puede estar fallando.

Gracias,

~Juan

Re: publicación de gráficos HTML interactivos en sitios web

@John_Powell_JMP Recibí una pregunta que quizás puedas responder, Adam @AdamChoen, si @mntionas a alguien y le envían un mensaje por correo electrónico.

Adam Choen

Nivel III

29 de mayo de 2024, 15:01 | Publicado en respuesta a Mensaje de cwillden 22/06/2018

Iframe ya no me funciona con HTML interactivo JMP17.

Agradezco algunas pistas de TSing

Gracias, Adam

Re: publicación de gráficos HTML interactivos en sitios web

Iframe ya no me funciona con HTML interactivo JMP17.

Agradezco algunas pistas de TSing

Re: publicación de gráficos HTML interactivos en sitios web

Escribí una queja a OneDrive sobre su incapacidad para gestionar archivos HTML. Al abrir un archivo HTML interactivo dentro de OneDrive, ¡solo muestra el código! Uno pensaría que Microsoft podría encargarse de esto...

Quiero mencionar aquí, por si alguien que no sea experto o empleado de JMP se topa con esta publicación, que los datos sin procesar se pueden extraer de gráficos interactivos (es decir, un hacker podría acceder a tus datos y reproducirlos). Creo que, por esta razón, actualmente no hay mucha demanda de publicar este tipo de gráficos interactivos en sitios web personales (y por eso esta es la primera publicación sobre este tema). Me centro principalmente en el metaanálisis de datos ya publicados, así que esto no me supone un problema tan grande.

Re: publicación de gráficos HTML interactivos en sitios web

¡Esta solicitud y las respuestas son geniales! ¡Gracias!

Probé Dropbox, GoogleDrive y OneDrive antes de mi presentación sobre cómo compartir HTML interactivo el año pasado y tuve que informar algunos hallazgos decepcionantes.

Es bueno saber que existen alternativas que funcionan.

Por cierto, ¡los iFrames también funcionan en la comunidad JMP!

Re: publicación de gráficos HTML interactivos en sitios web

Por cierto, esta también es una solución aceptada; la razón por la que no me funcionó fue porque ninguno de mis sitios web o nubes podía alojar correctamente un archivo HTML interactivo. Resulta que el servidor S3 de Amazon sí puede hacerlo, así que, al usar tu script y proporcionar un enlace al gráfico HTML interactivo JMP que se encuentra en mi nube S3, el gráfico aparece en la ubicación correcta y no necesito pegar las 200 páginas del script.

Re: publicación de gráficos HTML interactivos en sitios web

¡Genial! Y como nota para quienes estén interesados: Google Drive tampoco funciona (los archivos HTML interactivos no pueden alojarse en Google Drive ni referenciarse en scripts para que aparezcan en sitios web). Me pregunto por qué S3 es la única de estas grandes nubes que funciona con HTML interactivo (aunque no probé iCloud de Apple). ¿No debería todo el mundo haber migrando ya a este lenguaje para los archivos interactivos?

Mi próximo paso será obtener un informe JMP con varias ventanas para que aparezca en mi sitio web. Supongo que no debería ser diferente a un solo gráfico en cuanto a los pasos necesarios (siempre que use S3).

Re: publicación de gráficos HTML interactivos en sitios web

¡Me alegra que te haya sido útil! Y no olvides que, si usas JMP Pro, puedes exportar tus modelos JMP a código de puntuación y alojarlos también en AWS:

https://dfd3m9li3aipf.cloudfront.net/index.html

o incrustarlos (como código de puntuación JavaScript) directamente en sus páginas dinámicas HTML:

http://jmp.scoring.iris.s3-website.us-east-2.amazonaws.com/

http://jmp.valentine.s3-website-us-east-1.amazonaws.com/

Re: publicación de gráficos HTML interactivos en sitios web

¡Excelente idea! No sé por qué no copié y pegué tu código antes, pero tu gráfico se ve bien en mi sitio web. Hay muchísimas quejas sobre cómo OneDrive gestiona los archivos HTML (se abren como script, en lugar del producto final dentro de OneDrive). Acabo de probarlo con Dropbox y tuve el mismo problema que con OneDrive. Me pregunto si es porque, al compartir archivos mediante un enlace, este no parece un enlace de sitio web normal (como el tuyo). Por ejemplo: https://www.dropbox.com/s/dwjyb5n0fk24zoo/Fit%20Y%20by%20X.html?dl=0 . Curiosamente, OneDrive tiene una función de "incrustación" que soluciona este problema (te da código HTML para copiar a tu sitio web), pero, irónicamente, ¡no funciona con HTML interactivo!

En cualquier caso, acabo de crear una cuenta de S3, ¡y funciona! Nunca pensé que sería tan complicado, pero creo que, gracias a tu ayuda, usar S3 para alojar los archivos HTML interactivos de JMP y luego referenciar los enlaces de los archivos de S3 es una solución viable. Muchas gracias por tu ayuda (y a los demás también).

Re: publicación de gráficos HTML interactivos en sitios web

Es posible que tengas que habilitar las propiedades de visibilidad en One Drive para que las páginas informen el tipo MIME correcto.

También es posible que Square Space esté bloqueando todas las páginas extranjeras (o todo el contenido JavaScript extranjero) por razones de seguridad.

Intenta crear un iframe que apunte a mi página HTML interactiva en S3. La URL está en mi primera publicación.

De esta manera sabrás si el problema está en One Drive o SquareSpace.

Además, revisa tu consola de JavaScript para ver si hay mensajes de error, es posible que encuentres una pista allí.

Re: publicación de gráficos HTML interactivos en sitios web

Hola,

Parece un buen plan, pero no funciona con One Drive (mi dispositivo actual para compartir y almacenar archivos). Anteriormente había alojado el archivo HTML interactivo allí y lo referenciaba en Squarespace, pero solo aparece como un cuadro vacío en mi sitio web. Quizás pruebe con S3 más adelante, pero parece que debería ser igual, ¿no? Quizás sea un problema de Squarespace...

Re: publicación de gráficos HTML interactivos en sitios web

Puedes alojar el HTML generado en S3 y apuntar tu iframe a él desde allí. Aquí tienes un ejemplo:

http://blog.nascif.com/2015/08/una-carrera-de-desarrollador-de-software-visualizada.html

Código relevante:

<a href="https://s3-us-west-2.amazonaws.com/jmp.examples/career/index.html</A&gt" target="_blank">https://s3-us-west-2.amazonaws.com/jmp.examples/career/index.html</A&gt</a>;" width="100%">

Re: publicación de gráficos HTML interactivos en sitios web

Es una gran idea, ¡pero al parecer Squarespace no lo permite! Esto es lo que me dijeron:

"La gente aún puede descargar los archivos HTML, pero no es posible abrirlos en el navegador a través de un enlace de Squarespace y tener esa URL estática como lo haría un archivo .pdf".

Tengo la esperanza de que este tipo esté equivocado, así que intentaré encontrar una solución para hacerlo a su manera, lo que parece ser posible en la mayoría de los otros sitios web.

De lo contrario, tendré que volver a pegar las 200 páginas de código...

Te avisaré si lo logro. Gracias de nuevo por tu ayuda. ¡Sin duda, publicar un HTML interactivo en el lugar correcto de un sitio web personal es posible!

Anderson

Re: publicación de gráficos HTML interactivos en sitios web

I found a really easy solution! You can embed an html page within another html page using tags.  Here's a really simple example:</P><PRE><!DOCTYPE html> <html> <head> <title>Main Page</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="initial-scale=1.0"> <style> iframe { width: 100%; height: 600px; } </style> </head> <body> <p>Some content above.</p> <iframe src="Graph%20Builder.htm">

Algunos contenidos a continuación.

En la etiqueta iframe de apertura, enlazas al archivo HTML interactivo de JMP. Deberás subir ese archivo a Foursquare para que lo encuentre y se asegure de que la ruta sea correcta. También querrás añadir estilo al iframe para ajustar su tamaño según sea necesario. En el... tags, I made the iframe as wide as possible and 600 pixels tall.</P><br /><P>Here's what my result looks like.<span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="iframeexample.PNG" style="width: 592px;"><img src="https://us.v-cdn.net/6038925/uploads/images/11223i427DB074EDA86FA5/iframeexample.PNG" role="button" title="iframeexample.PNG" alt="iframeexample.PNG" /></span></P><br /><br /><br /></lingo-body>

Re: publicación de gráficos HTML interactivos en sitios web

Gail,

Gracias por tu respuesta. Compartir el archivo/enlace HTML es fácil. Lo que intento es que el gráfico interactivo aparezca en mi sitio web. Hasta ahora, lo he conseguido copiando una gran cantidad de código HTML y pegándolo en un cuadro de código. Lo que no entiendo es por qué siempre coloca mi gráfico interactivo en el pie de página, no en la posición correcta de la página. Creo que esto solo requiere ajustar un poco el código, así que me he puesto en contacto con Cameron para ver si puede ayudarme a ver qué hay que modificar exactamente. La alternativa es simplemente indicarle al lector que se desplace hasta el final de la página.

Estoy muy emocionado con esto. Incluso conseguí un gráfico de burbujas móviles para incrustar, de modo que el lector/usuario pueda experimentar con la velocidad, el tiempo, etc. Una vez que lo posicione correctamente, ¡mi sitio web estará repleto de gráficos JMP interactivos y móviles!

Gracias por tu ayuda,

Anderson

Re: publicación de gráficos HTML interactivos en sitios web

Cameron,

He experimentado más con JMP y Squarespace, y por suerte, puedo simplemente pegar 150 páginas de código HTML e integrar incluso los gráficos más complejos (¡incluyendo gráficos de burbujas móviles!) en mi sitio web. El problema persistente es su ubicación en el pie de página (como mencioné la última vez). Mencionaste una solución: añadir un >div al script. Al final del script HTML de MONSTER, hay esta línea de código: ¿Necesito cambiar uno de esos "body" a "div" o es más complicado? Intenté cambiarlos individualmente y al combinarlos a div, pero, como no sé nada de scripting, ¡podría ser mucho más complicado! ¿Alguna idea? Adjunto el código HTML de 200 páginas como referencia.

Gracias,

Anderson

Re: publicación de gráficos HTML interactivos en sitios web

Hola Anderson,

Algunas personas en JMP están tratando de encontrar una solución a su problema y hemos registrado la necesidad de una futura mejora de JMP para satisfacer la necesidad que usted describe.

Como mencioné cuando preguntaste por primera vez, estos son los pasos para compartir.

1. Crea el gráfico y guárdalo en algún lugar. (Ya lo hiciste).
2. La clave es compartir el archivo .htm. Así que a) puedes adjuntarlo a un correo electrónico para que lo abran. (Te envié el mío por correo. Intenta abrirlo). b) Puedes guardarlo en una unidad compartida y, al hacer clic en él, se abrirá. (Adjunté uno que publiqué para que se abra con Chrome. Necesitarás Chrome para abrirlo).
3. Alternativamente, puede PUBLICAR uno o más informes y hacer lo mismo con el archivo .html. https://www.jmp.com/support/help/14/create-a-web-report.shtml

Re: publicación de gráficos HTML interactivos en sitios web

Cameron,

Muchas gracias por tu respuesta. Parece que es justo lo que temía: ¡No puedo simplemente pegar el gráfico interactivo en una página web! Squarespace es compatible con CSS, Java y HTML, así que probaré tu sugerencia mañana. Irónicamente, Squarespace está diseñado deliberadamente para evitar tener que programar nada, aunque sí puede hacerlo en caso de urgencia. Gracias de nuevo por tu sugerencia. Más adelante les contaré sobre mi éxito (o fracaso) por si otros usuarios de JMP también están interesados ​​en publicar gráficos HTML interactivos en sus sitios web. Anderson

Re: publicación de gráficos HTML interactivos en sitios web

Hola @abmayfield ,

Probablemente sea un poco complicado. Esos archivos no están diseñados para copiar y pegar fácilmente solo el gráfico para incrustarlo en un sitio web. ¿Tienes experiencia con HTML, CSS y JavaScript? No he incluido gráficos JMP en ningún sitio web, pero exporté un ejemplo de Graph Builder para ver cómo está estructurado. Toda la acción ocurre dentro de las etiquetas. El DOM real son solo las etiquetas head, que contienen el CSS y JavaScript, y etiquetas vacías. El JavaScript inserta todo el contenido en las etiquetas.

Si quieres intentarlo, te recomiendo recortar todo lo que esté dentro del tags and putting that into a CSS file, and then clipping out all the JavaScript in the <script> tags and saving that as a .js file.  I don't use foursquare, but I found this which may be helpful for adding your own custom CSS and Javascript: <A href="https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-HTML-CSS-and-JavaScript" target="_self" rel="nofollow noopener noreferrer">https://support.squarespace.com/hc/en-us/articles/205815928-Adding-custom-HTML-CSS-and-JavaScript</A></P><br /><P>The JavaScript is pretty unreadable in its unformatted state.  I'm guessing it is ending up in the footer because the JavaScript just appends the content to the tag, so it will go right at the end.  You could add a <div> to the body and edit the JavaScript to to write to that div instead.</P><br /><P>Also, I'm sure there will be some conflicts with the CSS that JMP provides with your website's own styling, so that may have some unintended consequences.  If you know what you're doing, you can probably sort that out.</P><br /><P>Good luck!</P></lingo-body>