Elementos HTML

Un elemento HTML es una pequeña página web que vive en el tablero: una calculadora, un gráfico, un cuestionario, un minijuego. Todo lo que puede hacer una página web, lo puede hacer dentro de su caja.

• Código: contiene su propio HTML, CSS y JavaScript y los ejecuta en un entorno aislado. La página puede cargar bibliotecas y datos de internet, pero no puede llegar al tablero ni a tus sesiones iniciadas en otros sitios. Activa Mostrar código y el código aparece en un panel junto al elemento, donde cada cambio vuelve a ejecutar la página.
• Creado por agentes: un agente escribe la página. Dile qué valores quieres cambiar más adelante, como un título, un color, un número o una imagen, y aparecen como ajustes en la sección Estado HTML del panel de atributos. El elemento funciona entonces como una plantilla que duplicas y configuras copia a copia, sin leer una línea de código.
• Animación: los ajustes del Estado HTML pueden cambiar con el tiempo con una Animación de atributos, y la página se vuelve a dibujar en cada fotograma. Los valores de un gráfico pueden crecer, o un color puede cambiar, mientras se reproduce la animación.
• Memoria: la página puede guardar valores, como una puntuación, una elección o un ajuste, como su Estado HTML. Esos valores se guardan con el tablero, pertenecen a esa copia, sobreviven a una recarga y llegan a los colaboradores a medida que cambian. Lo que la página no guarda se pierde al recargarla.
• Portada: descansa tras una imagen y despierta cuando se activa, porque una página web en marcha cuesta mucho más que un dibujo. La sección Portada decide cuándo despierta.
• Fuera del tablero: Descargar HTML guarda un archivo .html que funciona, con sus ajustes y sus archivos adjuntos dentro, y se ejecuta en cualquier navegador sin el tablero. Abrir en pestaña nueva ejecuta la página sola en una pestaña del navegador, lejos del resto del tablero, lo que va bien para las páginas pesadas.

Crear un elemento HTML

Un elemento HTML llega al tablero de una de estas cuatro formas: escrito por un agente conectado, dibujado con la herramienta Elemento HTML, pegado desde código HTML o convertido desde una tarjeta de archivo que contiene un archivo HTML.

Pedírselo a un agente

Un elemento escrito para ti.

• Operación: conecta un agente, consulta Conectar el tablero con IA, describe la página que quieres y nombra los valores que quieras cambiar después desde el tablero.
• Resultado: el agente crea el elemento con el código completo y lo coloca. Más tarde puede reescribir el código, cambiar los ajustes y adjuntar o reemplazar archivos, mientras el elemento sigue donde está.
• Consejo: pídele que describa cada ajuste, para que su tooltip explique qué hace, y que acepte archivos adjuntos si la gente debe poder añadir los suyos. Un valor que quieras animar, como un número que dibuja un gráfico, también tiene que ser un ajuste. Consulta Definir los ajustes.

Dibujarlo con la herramienta

Una página inicial colocada a mano.

• Operación:
  1. Elige Elemento HTML en el multibotón de objetos del tablero del panel de herramientas.
  2. Haz clic donde debe ir el elemento para un tamaño por defecto, o arrastra para dibujar la caja que ocupará la página.
• Resultado: un elemento que muestra un título "Hello World", con su panel de código abierto a su izquierda, listo para editarse o entregarse a un agente. El panel no quita espacio a la caja que dibujaste.
• Consejo: mientras la herramienta está activa, el panel de atributos fija los valores por defecto del siguiente elemento: su activación, si el panel de código se abre y en qué lado, el fondo del panel, el margen, la numeración, el ajuste de línea y la tipografía, y el trazo y las esquinas del elemento.

Pegar código HTML

Un elemento creado a partir del código de una página copiada en otro sitio.

• Operación: copia el código fuente de una página web, o un fragmento de HTML autónomo con todas las etiquetas cerradas, y pégalo en el tablero mientras no se está editando nada.
• Necesita: HTML que funcione por sí solo, con todas las etiquetas cerradas y sin texto fuera de ellas, de hasta 1.000.000 de caracteres. El resto del texto pegado se convierte en otro tipo de elemento. Consulta Pegar.
• Resultado: un elemento del tamaño por defecto que ejecuta el HTML pegado, con su panel de código cerrado. Su Activación es Manual, así que espera a tu clic antes de ejecutarse.

Convertir una tarjeta de archivo

Un elemento creado a partir de un archivo HTML que ya está en el tablero como tarjeta.

• Operación: selecciona una o varias tarjetas de archivo que contengan archivos .html o .htm y haz clic en Convertir en HTML en el panel de acciones.
• Resultado: un elemento del tamaño por defecto centrado sobre cada tarjeta, que ejecuta su archivo, con Activación Automático y el panel de código cerrado.

Despertar el elemento

La página solo se ejecuta mientras el elemento está despierto. El resto del tiempo el elemento muestra una imagen y no consume nada. Activación, en la sección Portada, fija cuándo despierta.

• En reposo: el elemento muestra su portada o, sin ella, una tarjeta con su nombre ("Elemento HTML" cuando no tiene). Un botón de la mano aparece sobre cualquiera de las dos, siempre que el elemento tenga código. Hacer clic en él despierta el elemento sin entrar en él.
• Automático: las páginas que animan cuestan más que las que solo colocan texto e imágenes, y la sección Opciones HTML avisa con HTML animado detectado.
• Manual: elegirlo pone a descansar de inmediato un elemento en marcha. Un elemento despertado también vuelve a descansar cuando se sustituye su código.
• En un tablero lleno, cuando más elementos en Automático quieren ejecutarse de los que el dispositivo puede permitirse:
  • Se ejecutan los más cercanos al centro de la vista, y el resto espera tras su portada.
  • Las páginas animadas reciben menos plazas que las estáticas.
  • La elección se hace cuando la vista deja de moverse, y un elemento que usaste en los últimos 30 segundos conserva su plaza.
  • Los elementos en Activo se ejecutan siempre y nunca entran en la elección.

Interactuar

Un elemento HTML se puede usar de dos formas. Por defecto funciona como elemento, y entras en él para usar la página:

• Como elemento: lo seleccionas para cambiar sus atributos, moverlo y redimensionarlo, como cualquier otro elemento. La página se ve pero no responde, y la rueda del ratón mueve el tablero.
• Como página: haces clic y arrastras lo que contiene, escribes y la desplazas, como en una pestaña del navegador.
  • Entrar, de una de estas tres formas:
    • Haz doble clic en el elemento.
    • Selecciónalo y haz clic en Entrar en modo edición en el panel de acciones.
    • Con la herramienta Explorar tablero, haz un clic en él, esté seleccionado o no, como en el reproductor.
  • Dentro: el elemento despierta si estaba en reposo, y un contorno lo marca. La rueda desplaza la página y se detiene al llegar a su final, sin mover el tablero. Pellizcar sigue haciendo zoom en el tablero.
  • Salir: haz clic en una parte vacía del tablero para volver a usarlo como elemento.

Los valores que la página guarda en su Estado HTML se conservan mientras la usas, un paso de deshacer por cada tramo de edición, y cada copia conserva los suyos. Lo demás que hagas en la página, como el texto de un campo que no guarda, se pierde al recargarla.

Editar el código

Cambia el HTML, el CSS y el JavaScript que ejecuta el elemento.

• Operación:
  1. Activa Mostrar código en la sección Opciones HTML. Un elemento dibujado con la herramienta ya lo tiene activado.
  2. Haz clic en el panel de código para empezar a editar, o haz doble clic en el elemento.
  3. Escribe o pega el código.
  4. Haz clic en el tablero vacío para terminar.
• Necesita: un elemento sin rotar. Un elemento rotado muestra su código en solo lectura.
• Resultado: tras una breve pausa al escribir, la página se vuelve a ejecutar con el nuevo código y pasa a la nueva versión con un fundido, sin quedarse en blanco.
  • El código que falla al ejecutarse muestra un Error del elemento HTML sobre el elemento.
  • Una versión que tarda en cargar muestra Actualización de vista previa retrasada mientras la anterior sigue visible.
  • El panel funciona como un texto de código fijado en HTML, con las mismas ayudas: resaltado, cierre de corchetes, autocompletado, plegado y errores de sintaxis marcados en el margen mientras este se muestra.
• Colocar el panel: su cabecera muestra el nombre del elemento y mueve el panel arriba, abajo, a la izquierda o a la derecha de la página, como hace Posición del código en Opciones HTML, y Ocultar código lo cierra. Las secciones Código y Estilo de texto fijan su aspecto.
• Consejo: el panel forma parte del elemento. Se muestra en el reproductor y en las exportaciones mientras Mostrar código está activado, así que desactívalo cuando el código no deba verse.

Configurar un elemento

Cambia lo que un elemento HTML muestra o hace sin editar su código. Sus ajustes son los valores y archivos que su código fuente define como ajustes, como un título, un color o una imagen, y se muestran en la sección Estado HTML del panel de atributos.

Cambiar un ajuste

• Operación:
  1. Selecciona un elemento HTML.
  2. En la sección Estado HTML, cambia un ajuste.
• Resultado: la página en marcha se actualiza al instante, sin recargarse. El nuevo valor se guarda con el tablero y pertenece solo a esta copia. La página también puede cambiar un ajuste por sí misma, como una puntuación mientras la gente juega, y la sección muestra el nuevo valor.
• Consejo: sitúa el puntero sobre el nombre de un ajuste, o sobre el icono de un interruptor, para leer qué hace, cuando el código lo describe.

Cada ajuste muestra el control que le corresponde:

• Texto: un campo de texto.
• Número: un campo numérico.
• Interruptor: un interruptor de activado y desactivado, con su propio icono cuando el código le da uno.
• Color: un selector de color, para un color opaco cuyo nombre contiene la palabra "color" o "colour", como bgColor.
• JSON: un editor para listas y objetos.
• Archivo: una fila con el nombre y el tamaño del archivo, un botón para reemplazarlo desde tu dispositivo y un botón de pegar para las imágenes. Cuando la página acepta más archivos, Adjuntar archivo añade uno, y cada fila de archivo tiene un botón para quitarlo.

Definir los ajustes

Los ajustes se definen en el código fuente del elemento:

• Valores: el código convierte un valor en ajuste guardándolo en el elemento. Un valor escrito directamente en el código, como un color escrito en su CSS, solo cambia editando el código.
• Archivos: cada archivo adjunto al elemento es un ajuste de tipo Archivo, que el código lee por su nombre. Una línea del código permite que la gente adjunte y quite sus propios archivos.
• Descripciones e iconos: el código puede describir cada ajuste, lo que se muestra al situar el puntero sobre su nombre, y dar a los interruptores su propio icono.

Escribir el código por tu cuenta muestra el código de cada uno de ellos.

Usar un elemento como plantilla

Un elemento HTML se puede repetir por el tablero, cada copia con su propio contenido: el mismo gráfico con otros datos, o la misma tarjeta con otro título y otra foto.

• Duplica el elemento y cambia los ajustes de cada copia. Las copias empiezan con el mismo código, así que se ven y funcionan igual, y cada una muestra su propio contenido.
• Cuando se reescribe a la vez el código de varias copias, cada copia conserva sus ajustes.
• Los ajustes de número, interruptor, color y texto también se pueden animar. Consulta Animar elementos HTML.

Escribir el código por tu cuenta

Puedes escribir la página sin un agente. Dentro del entorno aislado, la página encuentra un objeto irakasi que la conecta con el elemento:

• irakasi.data es el estado guardado, un objeto simple. Empieza vacío y llega un momento después de que cargue la página, así que dibuja la página desde irakasi.onDataChange(listener) en vez de leerlo una sola vez al cargar.

• irakasi.saveData(next) sustituye el estado. Devuelve false y no guarda nada cuando next no es un objeto simple o supera los 65.536 caracteres como JSON. Los guardados se agrupan y se envían cada 200 milisegundos, y los guardados de la propia página no llaman a onDataChange, así que vuelve a dibujar después de guardar.

• irakasi.assets enumera los archivos adjuntos por nombre, con su tipo y su tamaño, y irakasi.onAssetsChange(listener) informa de cada cambio. irakasi.readAsset(name) devuelve una promesa con los bytes de un archivo como ArrayBuffer. La promesa falla cuando el archivo es desconocido, todavía no está listo o no se puede obtener.

• <meta name="irakasi-allow-file-attachments" content="true"> en el head permite adjuntar y quitar archivos desde la sección Estado HTML. Sin él, los archivos ya adjuntos pueden reemplazarse, pero no quitarse, y no se pueden añadir otros nuevos.

• Un script de tipo application/json con el atributo data-irakasi-state-fields describe los campos de la sección Estado HTML. Cada clave es un valor guardado o el nombre de un archivo adjunto, con:

  • una description opcional de hasta 400 caracteres; una más larga se omite;
  • solo para los interruptores, un icon SVG en línea de hasta 4.096 caracteres que empiece por <svg.

  Una declaración de más de 16.384 caracteres, o que no sea JSON válido, se ignora. Un valor declarado solo se muestra como campo cuando la página lo ha guardado.

<script type="application/json" data-irakasi-state-fields>
	{
		"autoRotate": {
			"description": "Spin the model continuously.",
			"icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M20 7v5h-5M20 12a8 8 0 1 0-2 5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"/></svg>"
		},
		"model": { "description": "The GLB file the viewer loads." }
	}
</script>

Los errores de ejecución no llegan al tablero: se muestran como un Error del elemento HTML sobre el elemento.

Exportar un elemento HTML

• Una exportación de imagen, una impresión o una copia como imagen muestra la página en marcha, mediante una captura de esta pestaña que tu navegador te pide aprobar. Un elemento en reposo, o uno cuya captura rechazas, dibuja su portada, o la tarjeta de reposo cuando no la hay.
• Una exportación de GIF o de vídeo graba la página en marcha fotograma a fotograma. Un elemento en reposo o que no arranca a tiempo, o cuya captura de la pestaña rechazas, muestra su portada en todos los fotogramas.
• Un panel de código abierto se dibuja junto a la página, con el mismo resaltado que muestra el tablero.

Dimensionar

• Los tiradores redimensionan la caja libremente. La página se distribuye para el nuevo tamaño, como hace una página web con una ventana.
• Prop. bloqueada mantiene las proporciones de la caja.
• El panel de código, cuando está abierto, se sitúa fuera de la caja. Su largo sigue al lado junto al que está, y arrastrar su borde exterior fija su ancho, de 320 a 1.600. Escala, en la sección Código, reduce o amplía todo el panel.

Escala del contenido

Una página web adapta su diseño al tamaño de la ventana en la que se muestra. En un elemento HTML, esa ventana es la caja: con una escala de contenido de 1, la página ve una pantalla exactamente del tamaño de la caja. Una caja pequeña funciona entonces como una pantalla diminuta, así que la página puede mostrar poco de sí misma o pasar a su diseño para móvil.

Escala, en la sección Relleno, separa la ventana de la página del tamaño de la caja:

• Por debajo de 1: la página recibe una ventana mayor que la caja y se dibuja más pequeña para caber. Con 0,5, una caja de 400 por 300 muestra la página como en una pantalla de 800 por 600.
• Por encima de 1: la página recibe una ventana más pequeña y se dibuja más grande, para agrandar textos y controles que salen demasiado pequeños.
• El elemento conserva su tamaño en el tablero en ambos casos; solo cambia la página de dentro.

Atributos

Un elemento HTML seleccionado muestra estas secciones del panel de atributos.

Información de la selección

Los atributos que afectan al elemento en su conjunto.

• X: la posición horizontal del pivote del elemento. Dentro de un marco, se mide desde el marco.
• Y: la posición vertical del pivote, también medida desde el marco dentro de uno. Hacia dónde crece depende de la dirección del eje Y de los ajustes de interfaz.
• W: el ancho del elemento.
• H: el alto del elemento.
• Rotación: el ángulo alrededor del pivote.
• Opacidad: la transparencia del elemento entero, trazo y relleno incluidos.
• Radio de esquinas: redondea las esquinas del elemento.
• Prop. bloqueada: mantiene la proporción entre ancho y alto al cambiar el tamaño.
• Proporcional: escala el grosor del trazo, los guiones, el rayado y los mosaicos junto con el elemento, de modo que conserva su aspecto al cambiar de tamaño.

Portada

Cuándo despierta el elemento, y la imagen que se muestra mientras descansa.

• Activación: cuándo se ejecuta el contenido.
  • Activo: se ejecuta siempre que el elemento está visible.
  • Automático: se ejecuta cuando el dispositivo tiene capacidad para ello.
  • Manual: espera a un clic en el elemento, y vuelve a descansar cuando el elemento sale del tablero visible.
  • En los dispositivos con poca memoria, el contenido web integrado y los elementos HTML esperan un clic sea cual sea su activación. En el reproductor, los móviles y las tabletas siempre esperan un toque.
• Portada: la imagen que se muestra mientras el contenido descansa.
  • Capturar: toma la portada del propio contenido.
  • Elegir imagen: usa un archivo de imagen de tu dispositivo como portada.
  • Pegar imagen del portapapeles: usa la imagen del portapapeles como portada.
  • Quitar portada: elimina la portada. Se muestra cuando el elemento ya tiene portada.
  • Cuando el elemento ya tiene portada, Capturar pasa a ser Recapturar y Elegir imagen pasa a ser Reemplazar. Capturar funciona con un solo elemento seleccionado, y pone a descansar un elemento en ejecución.
• Solo en los vídeos de proveedores:
  • Ocultar la interfaz del reproductor en las capturas: reproduce el vídeo en silencio antes de capturarlo, para que los controles y las superposiciones del reproductor desaparezcan de la portada.

Opciones HTML

El panel de código y su posición.

• Mostrar código: abre junto al elemento HTML el panel de código con su HTML.
• Posición del código: en qué lado del elemento HTML se coloca el panel de código. Se muestra mientras Mostrar código está activado.
  • Arriba
  • Abajo
  • Izquierda
  • Derecha
• HTML animado detectado: un aviso de que la página no deja de moverse mientras se ejecuta, lo que cuesta más que una página quieta. En un tablero lleno, las páginas animadas reciben menos plazas para ejecutarse.
  • Cuándo se comprueba: mientras la página se ejecuta, un par de segundos después de cargar y luego de vez en cuando, antes si haces clic o escribes en ella.
  • Qué cuenta como movimiento: una animación CSS que se repite sin fin, redibujar 30 o más veces por segundo, un temporizador que salta más de una vez por segundo, o un vídeo o un sonido que se está reproduciendo. Las imágenes animadas, como los GIF, no cuentan.
  • Se recuerda: el resultado se guarda con el elemento, así que se aplica la próxima vez que la página despierte. El código sin scripts, animaciones ni medios nunca se comprueba y nunca avisa.

Estado HTML

Los ajustes y los archivos de la página, editables uno a uno.

• Campos: una fila por valor guardado, en el orden en que los guardó el elemento HTML, cada una con el control que corresponde a su valor.
  • Texto: un campo de texto.
  • Número: un campo numérico.
  • Interruptor: un interruptor de activado o desactivado, con el icono propio cuando el código lo declara.
  • Color: un selector de color, en los valores de texto que contienen un color opaco cuando el nombre del campo incluye la palabra "color" o "colour", como bgColor. Los colores semitransparentes, y los colores con otros nombres, se quedan como texto.
  • JSON: un editor JSON, para objetos y listas. Un valor que no se puede editar como JSON se muestra desactivado con una explicación.
• Archivos: una fila por archivo adjunto, que muestra su nombre de referencia, un botón de archivo, el nombre del archivo y su tamaño. El nombre de referencia es el que usa el código y no se puede cambiar aquí.
  • Reemplazar: el botón de archivo; púlsalo para cambiar el archivo por otro de tu dispositivo. Su tooltip indica el archivo por su nombre de referencia.
  • Pegar imagen del portapapeles: en los archivos de imagen, sustituye el archivo por la imagen del portapapeles.
  • Quitar: elimina el archivo.
  • Adjuntar archivo: añade un archivo nuevo, hasta doce en total.
• Quitar y Adjuntar archivo requieren que el código del elemento HTML acepte archivos adicionales. Todos los archivos adjuntos se pueden reemplazar siempre.

En el reproductor, y en cualquier tablero que no puedas editar, los elementos HTML siguen siendo interactivos pero nada de lo que se introduce en ellos se guarda.

Código

La apariencia del panel de código. Se muestra mientras Mostrar código está activado.

• Lenguaje: el lenguaje usado para resaltar la sintaxis: Plain text, JavaScript, HTML, CSS, JSON, Python o Markdown. Los elementos HTML usan siempre HTML.
• Fondo: el color de fondo del panel de código. Lo muestran los elementos HTML y los paneles de código de las lentes de cámara; la caja del texto de código se colorea en su sección Relleno.
• Numeración: muestra un número junto a cada línea. Se muestra mientras el margen está activado.
• Ajuste: ajusta las líneas largas en lugar de desplazarlas hacia los lados.
• Margen: muestra la franja con los números de línea, las marcas de plegado y las marcas de error junto al código. Oculto, el código no se mueve.
• Escala: reduce o amplía todo el panel de código junto al elemento, de 0,1 a 4. Se muestra con un elemento HTML o un panel de lente de cámara seleccionado.

Estilo de texto

La tipografía del panel de código. Se muestra mientras Mostrar código está activado.

Estilo de fuente y familia tipográfica

• Estilo de fuente: la familia de tipografías entre las que elegir.
  • Sans Serif: letras sencillas sin remates.
  • Serif: letras con remates, como en la imprenta.
  • Manuscrita: letras que parecen escritas a mano.
  • Mono: todos los caracteres ocupan el mismo ancho, como en el código.
  • Display: tipografías decorativas para títulos.
• Familia tipográfica: la tipografía, dentro del estilo elegido.

Variante de fuente

• Variante de fuente: el peso o la inclinación de esa tipografía.

Tamaño de fuente

• Tamaño de fuente: el tamaño del texto.

Espaciado entre letras

• Espaciado entre letras: en el texto sobre trazado, el espacio adicional entre caracteres a lo largo del trazado.
• Interlineado: el espacio entre líneas.

Trazo

La línea alrededor de la caja: ninguna, sólida o discontinua.

• Estilo de trazo: el tipo de línea. El estilo decide qué controles de los siguientes aparecen.
  • Sin trazo: ninguna línea. Las flechas no lo ofrecen.
  • Trazo sólido: una línea continua.
  • Trazo discontinuo: una línea hecha de guiones.
• Color de trazo: el color de la línea.
• Opacidad de trazo: la transparencia de la línea por sí sola.
• Grosor de trazo: el grosor de la línea.

Trazo discontinuo

Relleno

El zoom y la transparencia de la página. La página dibuja su propio fondo, así que no hay color de relleno.

• Escala: el tamaño de ventana que la página cree tener, de 0,1 a 100. Con 1 la página se dispone para el tamaño del propio elemento. Bájala para que quepa más página, dibujada más pequeña; súbela para agrandar textos y controles que salen demasiado pequeños.
• Opacidad de relleno: la transparencia de la página.

Filtro

Una cadena de primitivas de filtro SVG aplicada a cómo se dibuja el elemento: la página en marcha, su portada, la tarjeta de reposo y las exportaciones por igual. Consulta Filtros de elementos.

• Cambiar el filtro nunca recarga la página, así que no se pierde nada de lo escrito en ella.
• Una página que incrusta otro sitio puede mostrar esa parte interior sin filtrar.

Máscara

Un elemento HTML puede enmascararse. Consulta Máscaras.

Acciones

Además de las acciones que tiene cualquier elemento, descritas en Lo que comparten todos los elementos, un elemento HTML ofrece estas en el panel de acciones.

Descargar HTML

Guarda el elemento como un único archivo que se abre en cualquier navegador.

• Operación: haz clic en Descargar HTML.
• Necesita: un único elemento HTML cuyos archivos adjuntos hayan terminado de subirse.
• Resultado: un archivo .html con el nombre del elemento, con el código, los ajustes actuales y los archivos adjuntos escritos dentro, así que funciona desde el disco sin el tablero. El elemento del tablero no cambia.
  • Las bibliotecas que el código carga de internet siguen necesitando conexión.
  • Lo que introduzcas en la página descargada dura hasta que la cierres o la recargues; al abrir el archivo de nuevo, empieza desde los ajustes con los que se guardó.

Abrir en pestaña nueva

Ejecuta la página por sí sola en una pestaña del navegador.

• Operación: haz clic en Abrir en pestaña nueva.
• Necesita: archivos adjuntos que hayan terminado de subirse.
• Resultado: una pestaña que ejecuta una copia de la página con los ajustes y los archivos que tenía en ese momento. Lo que hagas en la pestaña se queda en la pestaña y nunca vuelve al tablero.

Convertir en imagen

Sustituye el elemento por una imagen de él tal como se muestra, que se dibuja más rápido pero ya no es interactiva.

• Operación: haz clic en Convertir en imagen. Un diálogo enumera lo que pierde la conversión, y confirmas con Convertir.
• Necesita: para un elemento en marcha, el permiso del navegador para hacer una captura de pantalla de la pestaña, la única forma de fotografiar su página. Consulta Convertir en imagen. Cierra antes el panel de código, salvo que lo quieras en la imagen.
• Resultado: una imagen en el lugar del elemento, hasta a doble resolución, como JPEG cuando la imagen es opaca o PNG cuando necesita transparencia.
  • El trazo, las esquinas, el filtro y la máscara se conservan.
  • Un elemento en reposo, o uno cuya captura rechazas, se convierte a partir de su portada, o de la tarjeta de reposo cuando no la hay.
  • Las animaciones de posición, rotación, escala, redimensionado y opacidad pasan a la imagen, y las animaciones de atributos se descartan.
• Consejo: un elemento en marcha se captura primero: la vista salta a él y la pantalla puede parpadear, así que espera a que vuelva el tablero. Después, una imagen vacía marca su sitio mientras se guarda, y el original sigue intacto, así que puedes seguir trabajando.

Interacción en el reproductor

• Activación: el elemento despierta según lo fijado en su sección Portada. En teléfonos y tabletas siempre espera un toque en cualquier punto de su portada, que además empieza a usar la página.
• Usar la página: un clic o un toque en un elemento en marcha usa su página directamente. Un botón de la página funciona al primer clic, y el elemento pasa a ser aquel con el que interactúas.
• Rueda de desplazamiento: la rueda sobre el elemento mueve el tablero hasta que haces clic dentro. A partir de ahí, desplaza la página y se detiene al llegar a su final sin mover el tablero.
• Empezar de cero: no se guarda nada de lo que se escribe o se elige en la página, así que cada visionado empieza desde lo que contiene el tablero.
• Panel de código: se muestra, en solo lectura, mientras Mostrar código está activado.

Animar elementos HTML

• Como cualquier otro elemento: se puede mover, girar, escalar, redimensionar y hacer aparecer o desaparecer. Una animación de opacidad funde todo el elemento, página incluida. Consulta Transformar elementos y Mostrar y ocultar elementos.
• A través de sus ajustes: Animación de atributos cambia sus ajustes del Estado HTML con el tiempo, y la página se vuelve a dibujar en cada fotograma. Así la animación llega al interior de la página: las barras de un gráfico crecen, un contador sube o una escena cambia de color mientras avanza la línea de tiempo.
  • Los números cuentan, los colores se mezclan, y los interruptores y los textos cambian a mitad de camino.
  • Las listas, los objetos y los archivos no se pueden animar.
  • El mismo bloque puede animar su trazo, sus esquinas y su opacidad.

Límites

• El código se limita a 1.000.000 de caracteres, el estado guardado a 65.536 caracteres y los archivos adjuntos a 12, de hasta 25 MB cada uno, con nombres de hasta 64 caracteres.
• El entorno aislado ejecuta scripts y nada más: sin envío de formularios, sin ventanas emergentes, sin diálogos como las alertas y sin acceso al tablero ni a las cookies de otros sitios. Las bibliotecas pueden seguir cargándose desde internet.
• Un elemento HTML no puede voltearse ni usarse como máscara.