Páginas web y HTML incrustado en una pantalla

«Funciona en la vista previa, pero la pantalla está en blanco» es el síntoma característico de los widgets de página web y HTML incrustado, y no es un error. La vista previa se ejecuta en su navegador, conectado como usted, en la red de su oficina. El reproductor ejecuta un motor de navegador distinto, sin ninguna sesión iniciada, posiblemente en una red diferente. Todo lo que depende de esas diferencias deja de funcionar.

Por qué la vista previa miente

Hay cuatro cosas que difieren entre su vista previa y el reproductor:

1. Su sesión. Si la página necesita iniciar sesión, su navegador tiene la cookie y el reproductor no. El reproductor obtiene una pantalla de inicio de sesión o, más a menudo, una página en blanco.
2. Permisos de incrustación. La mayoría de los sitios modernos envían cabeceras que prohíben ser incrustados en otra página. Su vista previa puede estar exenta; el reproductor no. La página se niega a renderizarse sin ningún aviso.
3. Contenido mixto. Una página o recurso http:// incrustado dentro de un contexto https:// se bloquea sin más.
4. El motor de renderizado. Los motores de navegador de los reproductores son más antiguos y más estrictos que el Chrome de escritorio, especialmente en smart TVs y cajas Android baratas. En Windows, el motor se puede seleccionar, y un único widget obstinado se puede forzar al motor Edge más reciente colocando <!-- BROWSER=edge --> en la primera línea de su HTML incrustado, lo cual merece la pena probar antes de reescribir una página.

Soluciones, ordenadas por frecuencia de éxito

1. Pruebe la URL en el propio dispositivo

Abra el propio navegador del dispositivo y cargue la URL exacta. Si falla ahí, ningún ajuste de easyCMS lo salvará, tiene que resolver primero un problema de red, certificado o autenticación. Esta única prueba resuelve la mayoría de los casos.

2. Use el modo de renderizado adecuado

El widget de página web ofrece distintas formas de renderizado:

• Abrir de forma nativa: el reproductor carga la URL directamente en su propio navegador. Este es el único modo que evita que un sitio se niegue a ser incrustado en un marco. No se puede superponer bajo otro contenido, ocupa toda el área que se le asigna, y no tiene vista previa en easyCMS, así que la única forma de comprobarlo es mirar la pantalla.
• Posición manual y Ajuste óptimo: la página se incrusta en un marco con las dimensiones que usted establece, con desplazamiento y escala para mostrar solo la parte de la página que desea. Ambos son más flexibles, y ambos están sujetos a todas las reglas de incrustación anteriores.

Si una página aparece en blanco al incrustarla, cambie a Abrir de forma nativa y vuelva a publicar. Eso soluciona la mayoría de los widgets de página web en blanco, pero solo en Android y Windows. En un panel LG webOS, un sitio que se niega a ser incrustado en un marco no se mostrará en ningún modo. Ningún ajuste cambia eso. La solución es una URL de origen distinta, o una página que usted controle.

3. Sirva todo por HTTPS con un certificado válido

Los certificados autofirmados y caducados se rechazan sin ningún error visible, y los reproductores de smart TV son los más estrictos de todos. Use un certificado de una autoridad pública habitual. Si debe usar un certificado interno, tiene que instalarse como de confianza en el propio dispositivo.

4. Elimine el requisito de inicio de sesión

La cartelería digital no puede escribir una contraseña. Si la página necesita autenticación, exponga una versión de solo lectura, un enlace de panel compartido, una URL de token público, una vista publicada, y apunte el widget a eso en su lugar.

5. Compruebe qué necesita la página para funcionar

Los frameworks pesados de JavaScript, WebGL, los medios de reproducción automática y las fuentes web cargadas desde terceros fallan todos con más frecuencia en el hardware del reproductor que en su portátil. Cuanto más estática sea la página, más fiable será en una pantalla. Donde controle la página, construya una versión reducida de cartelería de la misma.

El caso concreto de los paneles

Los paneles de herramientas de analítica y BI son el uso más común del widget de página web, y el fallo más común. Casi todas bloquean la incrustación por defecto y requieren una sesión. Busque la opción propia de la herramienta enlace público, publicar en la web o uso compartido de solo lectura. Eso le da una URL diseñada para incrustarse, y funciona donde la URL normal del panel no lo hará.

HTML incrustado

El widget de HTML incrustado inyecta su marcado en el diseño. Causas frecuentes de un resultado en blanco:

• Scripts cargados por http://, o desde un dominio que el dispositivo no puede alcanzar.
• Código que asume un tamaño de viewport de escritorio.
• Un marcado que rompe el análisis del diseño, una etiqueta sin cerrar puede invalidar todo el diseño, que entonces nunca se reproduce en absoluto. Véase El contenido programado no se reproduce.

Una cosa que no hay que perseguir: un diseño que contiene una página web a menudo lleva un signo de exclamación naranja en lugar de una marca verde. Eso es normal. easyCMS no puede saber qué mostrará una página web en directo, así que se niega a declarar el diseño totalmente válido. Aun así, se reproduce.

Consejo Pruebe primero con algo trivial, un bloque de color con algo de texto, para demostrar que el propio widget funciona. Luego vuelva a añadir su código real poco a poco.

Artículos relacionados: Crear diseños, Contenido dinámico con DataSets, Requisitos de red y reglas de firewall