Compartir informes web interactivos desde JMP®Heman Robinson, JMP Desarrollador principal de software, SAS
En los últimos veinte años, hemos presenciado una gran variedad de tecnologías que compiten para dar soporte a páginas web interactivas. Finalmente, la industria se ha estandarizado en una sola tecnología, y JMP® ha comenzado a ofrecer informes en HTML versión 5, o HTML interactivo.
El HTML interactivo es compatible con muchas de las funciones exploratorias de JMP, como la identificación de puntos, la vinculación y el cepillado. Los informes guardados pueden compartirse en la web o enviarse por correo electrónico a colegas. Este documento describe cuándo y cómo usar el HTML interactivo para compartir los resultados de JMP.
Fondo
HTML, o lenguaje de marcado de hipertexto, es la tecnología que define la estructura de todas las páginas web ( http://www.w3.org/html/ ) (Berners-Lee, 1989). HTML se utiliza junto con hojas de estilo en cascada para el estilo ( http://www.w3.org/Style/CSS/ ) (Meyer, 2004) y JavaScript para la programación ( http://www.ecmascript.org/ ) (Crockford, 2008).
Hasta la versión 4, el HTML tenía limitaciones en cuanto a compatibilidad con gráficos e interactividad. Las tecnologías desarrolladas para cubrir esta carencia eran principalmente extensiones de navegador o "plugins". Entre ellas se encontraban applets de Java, controles ActiveX, Flash y Silverlight.
A partir de 2011, los navegadores web comenzaron a admitir el nuevo elemento HTML canvas para gráficos y nuevos controles, como los deslizadores, para la interactividad. En esa época, las tecnologías competidoras comenzaron a decaer, y las páginas web interactivas comenzaron a ser compatibles con HTML5. La siguiente figura muestra esta tendencia en términos de frecuencia de palabras clave en los anuncios del portal de empleo Indeed.com ( http://www.indeed.com/ ).
Figura 1. Ofertas de empleo para tecnologías web interactivas
En respuesta a esta tendencia, JMP, al igual que otros productos de software, ha migrado el desarrollo web de Flash a HTML interactivo. Un informe HTML interactivo de JMP es un único archivo HTML que puede ser compartido por:
- publicarlo en internet,
- guardarlo en una carpeta compartida, o
- enviándolo por correo electrónico a un colega.
Figura 2. Informe HTML interactivo de JMP
Cuándo usarlo
El HTML interactivo requiere datos incrustados. Cualquier dato utilizado para crear los gráficos se incrusta en la página web. Los datos están ofuscados, pero un hacker con iniciativa puede leerlos.
Podría parecer que este riesgo de seguridad podría mitigarse cifrando los datos. No es posible. Los datos deben ser legibles por navegadores web. Por lo tanto, cifrar los datos requeriría una clave de descifrado, también legible por navegadores web, y por cualquier otra persona. Cifrar los datos equivaldría a comprar una costosa alarma antirrobo para casa y luego dejar la llave escondida.
Puede eliminar algunos riesgos anonimizando sus datos, por ejemplo, creando un subconjunto sin columnas de nombre ni ID. Lo más seguro es crear este subconjunto usted mismo. Sin embargo, las columnas que no se utilizan en el informe JMP no se incrustan en el archivo HTML interactivo. Por lo tanto, siempre que no utilice columnas de identificación para etiquetas u otros fines, los datos estarán anonimizados.
Si analiza datos confidenciales, siempre puede usar el formato HTML estático (HTML versión 4), que no incrusta los datos. En el cuadro de diálogo "Archivo: Guardar como", HTML4 se etiqueta simplemente como "Archivo HTML". HTML5 se etiqueta como "HTML interactivo con datos" para enfatizar tanto la interactividad como la seguridad.
Figura 3. Cuadros de diálogo “Archivo: Guardar como” para HTML estático (HTML4) y HTML interactivo (HTML5)
Además de los datos incrustados, el HTML interactivo también requiere un navegador web moderno. En Windows, Internet Explorer versión 8 no es compatible con HTML versión 5, y las versiones 9 y 10 de IE solo admiten partes de este. El navegador predeterminado de Android es antiguo y lento, y Chrome y otros navegadores son fáciles de descargar.
A partir de 2015, JMP recomienda HTML interactivo en los siguientes navegadores y dispositivos:
- IE 11 y Edge en Windows
- Firefox en Windows y Mac
- Opera en Windows y Mac
- Chrome en tabletas Windows, Mac y Android
- Safari en Mac y iPad
- Silk en Kindle Fire
No probamos HTML interactivo en teléfonos. Sin embargo, en los iPhone y Android más recientes, suele funcionar correctamente. El rendimiento y las funciones varían considerablemente según el teléfono.
Cómo usarlo
Guardar el informe
Para guardar un informe en formato HTML5, elija “Archivo: Guardar como:” en Windows o “Archivo: Exportar” en Mac y especifique el formato “HTML interactivo con datos”.
Figura 4. Cuadro de diálogo “Archivo: Guardar como” para HTML interactivo (HTML5)
El HTML interactivo es compatible con las funciones más utilizadas de JMP. Si su informe contiene una función no compatible, verá una advertencia en el cuadro de diálogo, como se muestra en la Figura 5. En ese caso, parte del informe se exportará como una imagen estática, al igual que en HTML4 estático.
Figura 5. Advertencia de función no compatible
Contornos
Al crear un informe HTML interactivo, los gráficos y las tablas que se cerraron al crear la página permanecen cerrados en la página web hasta que los abra. Abra o cierre las secciones del informe haciendo clic o pulsando los botones de esquema.
La figura a continuación muestra cómo abrir la tabla "Falta de ajuste". Las tablas "Análisis de varianza" y "Estimaciones de parámetros" ya están abiertas.
Figura 6: Uso de los botones de esquema
JMP Interactive HTML emplea una estrategia de diseño de interfaz de usuario "Mobile First" (Wroblewski, 2011). Al crear un informe HTML interactivo, no siempre se sabe en qué dispositivos se leerá. Por ello, los controles, como los botones, son grandes y fáciles de usar, tanto en ordenadores como en dispositivos móviles.
Menús
Utilice los menús para cambiar el estado o la apariencia del contenido del informe. El contenido de los menús depende del contenido del esquema asociado. Por ejemplo, el Profiler tiene un único menú para restablecer su estado.
Figura 7: Uso del menú del generador de perfiles
Bubble Plot tiene un amplio sistema de menú para cambiar su apariencia y comportamiento.
Figura 8: Uso del menú Gráfico de burbujas
Modos
En cuanto a los modos en las interfaces de usuario, el consejo de diseño tradicional es "evitarlos si es posible" (Nielsen, 1993). Sin embargo, para soportar un producto tan interactivo como JMP, algunos modos son necesarios.
Un ejemplo común son los modos de selección. Puede seleccionar objetos individuales o múltiples. La selección simple y la selección múltiple son dos modos diferentes.
En los productos de escritorio, las teclas Mayús y Ctrl se usan para cambiar entre los modos de selección. Sin embargo, en los dispositivos móviles, estas teclas no existen.
Por esta razón, los modos de selección se muestran como un par de botones en la parte superior de la página. De forma predeterminada, se presiona el primer botón de este par. Esto permite seleccionar un objeto a la vez y deseleccionar los demás.
Figura 9: Selección de objetos individuales
Para seleccionar varios objetos, haga clic o toque el segundo botón. Esto le permite seleccionar o deseleccionar varios objetos.
En la figura siguiente, se han seleccionado tres barras de histograma. Al igual que en JMP, todos los gráficos están vinculados , por lo que las filas seleccionadas en un gráfico se resaltan en todos los gráficos (Becker y Cleveland, 1987) (Stuetzle, 1987).
Figura 10: Selección de varios objetos
Existe una distinción útil entre el comportamiento de las teclas Mayús y Ctrl y el de los botones de alternancia. Las teclas permiten un cambio de modo temporal, lo que suele reducir los errores del usuario (Raskin, 2000). Los botones de alternancia permiten un cambio de modo persistente, que es más sencillo y fácil de aprender en dispositivos móviles. Si visualiza un informe HTML interactivo en una computadora de escritorio, ambos comportamientos son compatibles.
El segundo par de botones cambia el enfoque del informe completo a los datos. De forma predeterminada, se presiona el primer botón de este par. En dispositivos móviles, este primer botón permite desplazarse y hacer zoom en el informe. En todos los dispositivos, permite identificar objetos en el informe. Casi todos los objetos en los informes HTML interactivos pueden mostrar información de identificación.
Figura 11: Identificación de objetos
El gráfico a continuación muestra un ajuste bivariado utilizando Iris.jmp, una tabla de datos de muestra de JMP que contiene mediciones de Fisher de tres especies diferentes de iris. Se ha identificado un punto de datos con sus coordenadas X e Y y su número de fila. La tabla a continuación muestra un valor p con su descripción asociada.
Figura 12: Identificación de valores de datos
Figura 13: Descripción de un valor p
No siempre se desea identificar objetos ni manipular el informe. A menudo, el objetivo es explorar los datos. Al hacer clic o tocar el segundo botón, se puede arrastrar un rectángulo para seleccionar filas en los gráficos. Esto se denomina cepillado , una técnica importante para explorar datos multivariados (Becker y Cleveland, 1987). Arrastre el centro del rectángulo para moverlo o las esquinas para redimensionarlo.
Figura 14: Cepillado de los datos
Para mayor potencia, se pueden combinar los modos. Si se usa un pincel con selección múltiple, este amplía la selección, "pintando" los datos, como se muestra en la figura siguiente.
Estos dos pares de modos admiten las funciones interactivas más comunes y útiles para la exploración de datos. JMP ofrece un amplio conjunto de modos adicionales, muchos de ellos presentes en una paleta de herramientas (Cooper y Reimann, 2003). La metáfora de la paleta de herramientas es menos útil en aplicaciones web debido a la escasa compatibilidad con cursores, pero es posible que algunos de estos modos sean compatibles en futuras versiones.
Figura 15: Pincelado con selección múltiple
Cómo automatizarlo
Los informes HTML interactivos se pueden automatizar mediante el lenguaje de scripting JMP (JSL) (SAS, 2014). El nuevo comando «Guardar HTML interactivo» habilita esta función.
// Exporta un ajuste bivariado.
dt = Open( "$SAMPLE_DATA/Big Class.jmp" );
obj = Bivariado( Y( :peso ), X( :altura ), Ajustar línea );
obj << Guardar HTML interactivo( "C:\Bivariate.html" );
Abrir("C:\Bivariate.html" );
En el script anterior, el comando "Guardar HTML interactivo" va seguido del comando "Abrir". Esto muestra automáticamente el informe en su navegador web predeterminado.
Cómo organizarlo
Si crea muchos informes HTML interactivos, le resultará útil el complemento de publicación automática de JMP (Valente, Brady y Kennedy, 2014). Este proporciona una forma automatizada de organizar sus informes, con una portada y bocetos en miniatura vinculados a cada informe. Descargue el complemento de publicación automática de JMP desde la Comunidad de usuarios de JMP en https://community.jmp.com/docs/DOC-6689 .
El complemento de publicación automática de JMP generó la página de portada que aparece a continuación, para nuestros ejemplos en http://www.jmp.com/jmphtml5/ .
Figura 16. Informes organizados con el complemento de publicación automática de JMP
Trabajo futuro
El desarrollo de este proyecto se basa en la demanda de los clientes. Las tablas y gráficos más utilizados ya eran compatibles con JMP 11. Los gráficos de burbujas y los perfiladores se añadieron en JMP 12.
Para futuras versiones, GraphBuilder tiene una demanda considerable. También esperamos integrar el complemento de publicación automática JMP en el producto principal, y estamos muy interesados en las solicitudes de los clientes.
Referencias
Becker R. y Cleveland W. (1987). “Diagramas de dispersión de pincel”, Tecnometría , 127-142.
Berners-Lee T. (1989). “Gestión de la información: una propuesta”, CERN .
Cooper A. y Reimann R. (2003). About Face 2.0: Fundamentos del diseño de interacción . Wiley, 322-323.
Crockford D. (2008). JavaScript: Las partes buenas. O'Reilly.
Meyer E. (2004). Hojas de estilo en cascada: La guía definitiva. O'Reilly.
Nielsen J. (1993). Ingeniería de usabilidad. Academic Press, 146-148.
Raskin J. (2000). La interfaz humana: nuevas direcciones para el diseño de sistemas interactivos . ACM Press, 55-59.
SAS (2014). Guía de scripts de JMP 11, segunda edición . SAS Institute Inc.
Stuetzle W. (1987). “Plot Windows”, Revista de la Asociación Americana de Estadística, 82 , 466-475.
Valente D., Brady B. y Kennedy, A. (2014). “Un complemento de JMP para la publicación automática de informes HTML interactivos”, Cumbre de Descubrimiento JMP 2014 .
Wroblewski L. (2011). Móvil primero . Un libro aparte.
