Contenido web

Un elemento de contenido web muestra una página de otro sitio en el tablero, en vivo:

• Dirección: proviene de una dirección que pegas o importas. Para los sitios compatibles carga la versión hecha para incrustar.
• Encabezado: una píldora sobre la página nombra la dirección y contiene los controles para abrirla, recargarla y plegarla.
• Portada: una imagen fija sustituye a la página mientras descansa, así que un tablero lleno de contenido web sigue siendo ligero.

Añadir contenido web

Coloca una página web o un sitio incrustable en el tablero.

• Operación: una de estas:
  • Pega una dirección web en el tablero, o una lista de ellas separadas por espacios o saltos de línea. Cada dirección se convierte en su propio elemento, en el puntero; varias quedan en cuadrícula.
  • Haz clic en Importar URL en el menú de la app, en el panel principal, escribe la dirección y haz clic en Aceptar. El elemento aparece en el centro de la vista.
• Resultado: para un sitio compatible, su versión incrustable al tamaño que el sitio prefiere; para cualquier otra dirección, la página en un marco de 800 por 600.
• Consejo: las direcciones de imágenes, sonidos y vídeos, incluidos YouTube y Vimeo, se convierten en elementos de imagen, de audio y de vídeo.

Sitios compatibles: Figma, Canva, Google Maps, Google Docs, Google Drive, Google Calendar, Google Slides, GitHub Gist, CodeSandbox, Codepen, Replit, Val Town, Observable, Scratch, Felt, Desmos, Spotify y tldraw. Cualquier otra dirección se carga como una página web normal, si su sitio permite que otras páginas lo muestren. Muchos no lo permiten, y el marco muestra entonces el error del navegador.

Píldora de encabezado

El encabezado redondeado sobre la página nombra la dirección y lleva los controles propios del elemento, de izquierda a derecha:

• Abrir en una pestaña nueva: abre la dirección en una pestaña del navegador.
• Recargar página: vuelve a cargar la página desde cero.
• Dirección: la dirección de la página. Haz doble clic en el elemento para editarla ahí mismo, y después pulsa Intro o haz clic fuera. Una dirección sin esquema recibe https:// por delante.

Plegar la página

• Plegar al encabezado: oculta la página y deja solo el encabezado en el tablero. Su flecha apunta hacia abajo mientras se ve la página, y hacia arriba como Mostrar página, que la trae de vuelta.

Interactuar

Tus clics, tus teclas y la rueda de desplazamiento van o al tablero o a la página del elemento, nunca a los dos. Van al tablero hasta que decides usar la página.

• En el tablero, al principio: un clic en el elemento lo selecciona, arrastrarlo lo mueve y la rueda de desplazamiento mueve el tablero. La página se ve pero no responde.
• Usar la página: haz doble clic en el elemento, o haz clic en el botón de la mano que tiene encima, con la etiqueta Haz clic para interactuar. Un contorno marca el elemento, y la página recibe tus clics, tus teclas y la rueda de desplazamiento, como en una pestaña del navegador. Sacar el puntero del elemento no lo termina.
• Volver al tablero: haz clic en cualquier lugar fuera del elemento. En el reproductor, cuando la página ocupa casi toda la vista y no queda tablero en el que hacer clic, usa Dejar de interactuar, arriba a la izquierda.
• Elementos en reposo: mientras el elemento muestra su portada, el botón de la mano carga primero la página.
• En el modo de reproducción y en el reproductor, un clic o un toque en cualquier punto del elemento empieza a usar la página.
• El contenido web puede usarse incluso con el tablero en solo lectura o con el elemento bloqueado.

Portada

Una página en vivo usa muchos más recursos de tu dispositivo que un dibujo. Un elemento de contenido web puede descansar tras una imagen fija, su portada, y despertar solo cuando hace falta.

• Activación decide cuándo se carga la página: siempre que el elemento está en pantalla, cuando tu dispositivo puede permitírselo, o solo tras un clic. En un ordenador capaz, la opción por defecto deja que la página se cargue de inmediato y solo espera a tu clic para interactuar. En dispositivos con poca memoria, el elemento descansa hasta que lo activas.
• Portada es lo que se muestra mientras el elemento descansa. Sin una portada propia muestra una tarjeta: el nombre del sitio y su inicial, su dominio y la dirección. Una captura de la página, o una imagen que elijas o pegues, sustituye a la tarjeta hasta que la quites.
• Consejo: como todo elemento en vivo, capturar funciona mediante una captura de pantalla de la pestaña, para la que el navegador pide permiso. Un elemento en reposo se despierta un momento para la captura. Tras una captura, el elemento descansa para que se vea su nueva portada.

Ambos ajustes viven en la sección Portada del panel de atributos.

Exportar contenido web

Un contenido web solo puede convertirse en imagen mediante una captura de esta pestaña, y tu navegador te pide aprobarla antes.

• Por qué: el navegador mantiene privada la página de cada sitio, así que el tablero no puede dibujarla. En su lugar, el navegador comparte esta pestaña, como en una videollamada, e Irakasi recorta el elemento de esa imagen.
• Qué recibe Irakasi: una imagen de la pestaña, como una captura de pantalla, y nada más. No puede hacer clic, leer ni cambiar nada en la página, y nunca ve tus otras pestañas. Solo se guarda la parte que muestra el elemento.
• Aprobar: la primera vez, el navegador pregunta qué pestaña compartir; elige esta. Sigue compartida, con la barra de compartir del navegador a la vista, hasta que dejas de compartirla, así que las capturas siguientes no vuelven a preguntar.
• Qué lo usa: Copiar como PNG y Copiar como SVG, las exportaciones de imagen en cualquier formato, las impresiones, Convertir en imagen, capturar una portada y la exportación de vídeo del tablero.
• Cuándo se usa la portada: si lo rechazas, si tu navegador no puede compartir una pestaña (solo Chrome, Edge y otros navegadores Chromium pueden), o si la página no está cargada o está plegada. Sin portada, aparece solo la píldora de encabezado.

Dimensionar

• Todo el contenido web se redimensiona libremente, salvo Scratch, cuyo visor tiene un tamaño fijo. El ancho no puede bajar del de los botones del encabezado.
• Un elemento plegado conserva su alto: redimensionarlo cambia solo el ancho.
• Prop. bloqueada mantiene las proporciones del marco al redimensionar.
• Haz doble clic en el asa derecha de redimensionado para ajustar el marco al ancho de su dirección.

Escala del contenido

Un sitio web adapta su diseño al tamaño de la ventana en la que se muestra. En un contenido web, esa ventana es el elemento: con una escala de contenido de 1, la página ve una pantalla exactamente del tamaño del elemento. Un elemento pequeño funciona entonces como una pantalla diminuta, así que muchas páginas muestran muy poco de sí mismas o pasan a su diseño para móvil.

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

• Por debajo de 1: la página recibe una ventana mayor que el elemento y se dibuja más pequeña para caber. Con 0,5, un elemento 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 contenido web seleccionado muestra estas secciones del panel de atributos.

URL incrustada

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.

Sus filas de Info muestran el Tipo, el nombre del sitio o General URL para otras páginas, y la URL con un enlace Abrir.

Portada

Cuándo se carga la página, 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.

Trazo

La línea alrededor del marco: 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.

Bordes discontinuos

Relleno

El zoom y la transparencia de la página dentro del marco.

• 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. Consulta Filtros.

Máscara

El contenido web puede enmascararse. Consulta Máscaras.

Acciones

Además de las acciones que tiene cualquier elemento, descritas en Lo que comparten todos los elementos, el contenido web ofrece esta en el panel de acciones.

Convertir en imagen

Sustituye el elemento por una imagen de la página tal como se muestra, que se dibuja más rápido pero ya no está en vivo.

• Operación: haz clic en Convertir en imagen. Cuando la conversión perdería algo, un diálogo lo enumera y confirmas con Convertir.
• Necesita: para captar la propia página, un elemento cargado, desplegado y a la vista, y el permiso del navegador para compartir la pestaña. Consulta Convertir en imagen.
• Resultado: una imagen en el lugar del elemento, hasta a doble resolución, como JPEG si la imagen es opaca o PNG si necesita transparencia. El trazo, las esquinas, el filtro y la máscara se conservan. Si no, o si rechazas la captura, se usa la portada guardada, o solo la píldora de encabezado si no hay ninguna. Las animaciones de mover, rotar, escalar, redimensionar y opacidad pasan a la imagen.
• Consejo: primero se captura la página: la vista salta al elemento 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

• Un toque activa el elemento y empieza a usar su página, como en los demás elementos interactivos. En teléfonos y tabletas siempre empieza descansando tras su portada.
• Plegar un elemento a su encabezado durante la reproducción no se guarda.
• En el reproductor el elemento no puede redimensionarse ni editar su dirección.

Animar contenido web

El contenido web toma las animaciones de posición, rotación, escala, redimensionado y opacidad. Consulta Transformar elementos y Mostrar y ocultar elementos. El contenido de Scratch no admite la animación de redimensionado, porque su visor tiene un tamaño fijo.

Límites

• Un sitio que se niega a mostrarse dentro de otras páginas muestra el propio error del navegador dentro del marco.
• Las páginas de sitios distintos de los compatibles se ejecutan en un entorno más estricto: sin formularios, sin ventanas emergentes y sin cookies compartidas con el sitio, así que las vistas con sesión iniciada no funcionan ahí.