Guardar una página como Web Archive de Safari para importarla en UnHTML

Sí. Un Web Archive de Safari es uno de los tres tipos de archivo que UnHTML acepta directamente: arrastra el archivo .webarchive al plugin igual que harías con un archivo .html autocontenido, sin configurar ninguna CLI ni instalar un bookmarklet primero. Lo que importa es todo lo que pasa antes de ese arrastre: qué captura realmente un .webarchive, en qué se diferencia de un simple guardado en HTML, y cuándo captura lo suficiente de una página como para que valga la pena importarla.

Qué es realmente un archivo .webarchive

Un .webarchive junta el HTML de una página con su CSS, JavaScript e imágenes enlazadas en un solo archivo. Esa es toda la diferencia frente a un guardado en .html simple, que solo conserva el marcado y deja atrás cada recurso enlazado, esperando dar error 404 en cuanto abres ese archivo en otro sitio. Un Web Archive guarda esos archivos de origen concatenados en formato plist binario, serializado con NSKeyedArchiver, y su soporte en Windows se eliminó en 2012. Hoy se crea y se lee solo en plataformas de Apple: macOS y iOS o iPadOS. Si vas a pasarle un archivo a un compañero en Windows, eso importa: su Safari, si es que aún lo tiene, no puede abrirlo, así que un Mac o un dispositivo iOS sigue siendo el lugar natural para revisar el archivo antes de importarlo.

La razón por la que el contenido anidado sobrevive al viaje es estructural, no casual. El objeto WebArchive de WebKit guarda un recurso principal junto con sus subrecursos y los archivos de sus subframes, y cada frame anidado lleva sus propios recursos empaquetados en lugar de apuntar de vuelta a la página en vivo para conseguirlos. Copia en cambio un HTML simple, y un iframe incrustado, un reproductor de vídeo en línea o un widget de terceros suele desaparecer en cuanto abres ese archivo fuera de la pestaña original.

Eso importa para una importación. Una página que quieres reconstruir en Figma casi nunca es un solo documento plano. Las páginas de marketing suelen incrustar un reproductor de vídeo, un widget de reservas o una tabla comparativa servida desde otro origen, todo como iframe. Un .webarchive conserva ese contenido pegado al archivo. Una exportación en HTML simple no.

Guardar un Web Archive en Mac

Requisito previo: Safari en macOS, abierto en la página que quieres capturar.

1. Abre la página en Safari y deja que termine de cargar, incluido lo que se carga de forma diferida al hacer scroll.
2. Elige Archivo (File) y después Guardar como (Save As).
3. En Formato, elige Web Archive. Código fuente de la página solo conserva el marcado en bruto, y Página web, solo HTML descarta la mayoría de los recursos enlazados, así que ninguna de las dos empaqueta una página como lo hace Web Archive.
4. Guarda, y anota la carpeta de destino para poder encontrar el archivo de nuevo en el paso de importación.

Apple describe la copia guardada como algo cuyos enlaces siguen funcionando solo mientras las páginas de destino sigan en línea: es una instantánea de la página tal como se renderizó en el momento de guardarla, no un espejo autocontenido de cada página a la que enlaza. Para una importación, esa distinción casi nunca importa. UnHTML solo necesita la página que guardaste, no todo aquello a lo que esa página enlaza.

Guardar un Web Archive en iPhone o iPad

Requisito previo: Safari en iOS o iPadOS 13 o posterior.

1. Abre la página en Safari y deja que termine de cargar.
2. Toca el ícono de Compartir.
3. Elige Guardar en Archivos, y selecciona una ubicación a la que puedas llegar después desde un Mac, como iCloud Drive o una carpeta sincronizada.
4. Confirma el guardado, y después mueve el archivo a tu Mac cuando estés listo para importarlo.

La ruta móvil existe sobre todo para páginas que solo encuentras en un teléfono o una tablet: la página de aterrizaje de un competidor abierta desde el enlace de una app, un correo promocional que solo se abre en Safari móvil, o un diseño que en su versión móvil se ve genuinamente distinto. Una vez que el archivo llega a un Mac, importarlo funciona exactamente igual que con cualquier otro .webarchive, sin importar qué dispositivo lo creó.

Importar el .webarchive en UnHTML

UnHTML acepta exactamente tres tipos de entrada, arrastrados directamente al plugin: un archivo .html autocontenido, un .webarchive de Safari, o un scene.json capturado con su propia CLI o bookmarklet de código abierto. No obtiene una URL en vivo por sí mismo. Algo tiene que capturar la página primero, y un .webarchive es la captura más rápida, la que no necesita ninguna configuración: ninguna CLI que instalar, ningún bookmarklet que arrastrar a una barra de marcadores.

Un .webarchive es suficiente cuando el contenido de la página ya está presente en el DOM en el momento de guardarla: páginas de marketing, documentación, la mayoría de entradas de blog y artículos largos, tablas de precios renderizadas en el servidor. Donde se queda corto es en todo lo que sigue renderizándose después de la carga inicial. Una aplicación de una sola página construida en React o Vue, o una página que trae recursos de otro origen, puede quedarse congelada a medio renderizar en una instantánea guardada, o perder por completo el contenido de origen cruzado (CORS). Ese es exactamente el hueco que la CLI o el bookmarklet propios de UnHTML existen para cerrar, capturando en su lugar un sitio renderizado con JavaScript como un archivo scene.json con el estado ya completamente renderizado y los recursos remotos ya resueltos.

Aquí va una forma rápida de comprobarlo antes de importar: vuelve a abrir el .webarchive guardado sin conexión. ¿Se ve idéntico a la página en vivo? La importación debería salir limpia. ¿Hay secciones en blanco o faltan imágenes? Recurre mejor a la captura por CLI en vez de al guardado del archivo.

Una vez que la importación se ejecuta, UnHTML convierte los diseños CSS en auto layout nativo de Figma para flex, grid y block donde puede. El nivel gratuito limita una importación a 500 capas y cae a posicionamiento absoluto por encima de eso. Quitar ese límite y obtener la conversión completa a auto layout en páginas más grandes es lo que añaden los planes de pago.

Un caso común para todo este flujo: desarmar la página de precios de un competidor para ver cómo está construida. Esa página suele estar lo bastante renderizada en el servidor como para que un .webarchive la capture por completo, tablas, íconos y todo, así que casi nunca hay razón para recurrir a la CLI aquí. Ahora compara eso con un sitio de marketing construido sobre un framework de JavaScript, donde la tabla de precios solo aparece tras una petición del lado del cliente. Guardar esa página con Archivo, Guardar como suele congelar la captura antes de que la tabla se renderice, dejando una sección vacía al reabrir el archivo. Esa es la señal para cambiar a la captura por CLI o bookmarklet.

Lo que aún no sobrevive al viaje

Incluso una importación limpia de .webarchive tiene límites, y UnHTML los enumera en su informe de importación en lugar de dejar que los descubras después.

Cualquier fuente que no esté instalada localmente se sustituye, Inter por defecto, y cada sustitución queda listada en ese informe para que nada cambie en silencio sin que te des cuenta. Si una página depende de una fuente de exhibición con licencia que no tienes instalada, espérala marcada ahí en vez de renderizada como se pensó originalmente. Mira cómo se sustituyen y registran las fuentes que faltan para conocer el mecanismo completo.

El diseño es el otro punto donde las cosas pueden cambiar. Los diseños CSS grid complejos que no se pueden mapear con limpieza al auto layout de Figma caen en su lugar a posicionamiento absoluto. El resultado es un conjunto de capas fiel y editable, no una copia exacta de la página original, y esa honestidad es deliberada: el informe de importación es donde queda listada cada sustitución de fuente y cada caída a posicionamiento absoluto, para que sepas exactamente qué revisar antes de empezar a editar, no después.

Conclusión

Un Web Archive de Safari es la forma más rápida de entregarle a UnHTML una instantánea real de una página: guárdalo desde el menú Archivo en Mac o desde la hoja de Compartir en iOS, y después arrastra el archivo directamente al plugin. Funciona bien para todo lo que ya estaba renderizado en el momento de guardarlo. Para páginas que siguen renderizándose del lado del cliente después de la carga, la captura por CLI o bookmarklet sigue siendo el camino más fiable. En cualquier caso, el informe de importación te dice exactamente qué llegó intacto y qué se sustituyó por el camino.