Cómo utilizar HtmlDrag: importar, editar, refinar y exportar HTML

Esta guía sigue el flujo de trabajo real desde el material inicial hasta el resultado HTML final. Aprenda a importar una página existente, capturar una URL pública, usar Retoque con IA, convertir archivos compatibles en HTML editable, realizar ediciones visuales y guardar, compartir o exportar su trabajo.

1. Llevar contenido a HtmlDrag

Elige el camino inicial que coincida con el material que ya tienes. Subir HTML y pegar código abre una página existente para edición visual; Duplicar página captura una página web pública; Retoque con IA realiza ediciones específicas en una página importada; Archivo a HTML convierte los documentos e imágenes compatibles en un borrador HTML editable.

1.1 Espacio de trabajo de inicio

El espacio de trabajo de inicio mantiene juntos los créditos iniciales principales: Editor HTML para HTML existente, Retoque con IA para cambios específicos en una página importada y Archivo a HTML para generar una página editable a partir del material fuente. Elija la entrada que coincida con su punto de partida, luego continúe en el editor o en el espacio de trabajo de vista previa.

1.2 Duplicar página

Duplicar página captura una página web pública y convierte el resultado en un proyecto editable. Es útil cuando tienes una página de referencia activa pero no tienes su archivo HTML original.

Ingrese una URL pública

Abra Duplicar página, pegue una dirección pública http:// o https:// y haga clic en Clonar. No se admiten direcciones de red privadas, rutas de archivos locales ni páginas que requieran un inicio de sesión privado.

Duplicar página: pegue la dirección de una página web pública e inicie una clonación

Revisar la página capturada

Cuando finalice la captura, revise la página en el espacio de trabajo de vista previa o del editor. Es posible que los recursos externos, las imágenes protegidas o el contenido exclusivo de JavaScript no se reproduzcan exactamente; Si el resultado está incompleto, pegue el HTML renderizado o cargue el HTML original.

1.3 Subir HTML

Utilice Subir HTML cuando ya tenga un archivo .html o .htm y desee realizar cambios visuales sin reconstruir la página desde cero.

Seleccione el archivo HTML existente

Elija Subir HTML y luego haga clic o arrastre un archivo HTML al área de carga. La página fuente sigue siendo el punto de partida para el editor; HtmlDrag no convierte la página en una captura de pantalla estática.

Subir HTML: seleccione o arrastre un archivo .html o .htm existente

Verifique el resultado importado

Después del paso de análisis y verificación de seguridad, abra la vista previa o el editor y verifique el diseño, el texto, las imágenes, los enlaces y los recursos externos antes de editar.

1.4 Pegar código

Utilice Pegar código cuando el HTML esté en un asistente de código, editor local, correo electrónico u otra pestaña del navegador.

Pegue el HTML renderizado

Pegue el HTML completo en el área de código, incluida la estructura y los estilos necesarios para la página, luego haga clic en Abrir editor. Si la página fue generada por una herramienta de inteligencia artificial, pegue la versión que desea refinar visualmente en lugar de una descripción de la página.

Pegar código: inserta el código fuente HTML y ábrelo en el editor

Revisar recursos y avisos de seguridad

HtmlDrag comprueba el contenido importado antes de abrirlo. Revise cualquier advertencia sobre scripts, recursos locales, fuentes externas o incrustaciones bloqueadas y confirme que la página todavía se ve correcta en el editor.

1.5 Retoque con IA dirigido

El Retoque con IA sirve para cambiar una página existente con una instrucción enfocada. Comience desde una página HTML cargada, un código pegado o una URL capturada, luego dígale a AI qué cambiar sin pedirle que reconstruya partes no relacionadas de la página.

Retoque con IA: elija una página existente como fuente para una edición específica

Abra el espacio de trabajo de refinamiento

Elija la entrada Retoque con IA y espere a que se cargue la vista previa de la página. El espacio de trabajo mantiene el área de instrucciones al lado de la página para que pueda seleccionar el contenido exacto que necesita atención.

Retoque con IA: la página seleccionada se está procesando

Seleccione el alcance del cambio

Utilice Hacer clic para seleccionar para elementos individuales o Selección de área para una región. También puede ingresar al modo de pantalla completa cuando la página necesita más espacio para la selección. Luego, describa el cambio solicitado en el cuadro emergente, como revisar la copia seleccionada, reemplazar una imagen o ajustar un área visual enfocada.

Retoque con IA: marca los elementos que la instrucción debe afectar

Revisar y continuar editando

Una vez que el resultado esté listo, compare la vista previa actualizada con la página original. Si el cambio es correcto, ábralo en el editor para realizar más ediciones visuales; si no es lo suficientemente preciso, limite la selección o reescriba la instrucción en lugar de cambiar elementos no relacionados.

Retoque con IA: revise el resultado, luego ábralo en el editor o obtenga una vista previa

1.6 Archivo a HTML editable

Archivo a HTML crea una página HTML editable a partir del material fuente. Es útil cuando el punto de partida es un documento PDF, Word, una presentación PPT/PPTX, una hoja de cálculo Excel/XLSX, un archivo CSV, Markdown o de texto, o una imagen en lugar de HTML existente.

Archivo a HTML: comience desde un documento, hoja de cálculo, presentación o imagen

Cargue el archivo fuente

Abra Archivo a HTML, adjunte el archivo fuente y agregue una breve instrucción que describa lo que desea crear. El mensaje puede especificar el propósito de la página, la audiencia, el tono, la estructura o la dirección visual.

Archivo a HTML: adjunte un archivo fuente y describa la página que desea

Espere mientras se organiza el contenido

HtmlDrag primero lee el material fuente, identifica su jerarquía de contenido y planifica el diseño de la página. Los documentos largos, tablas, diapositivas e imágenes pueden tardar diferentes cantidades de tiempo en procesarse.

Archivo a HTML: el código fuente se está ensamblando en una página HTML

Archivo a HTML: el sistema organiza la jerarquía, el diseño y los componentes

Revisar el resultado editable

Cuando la página esté lista, revise la vista previa y elija Retoque con IA, Abrir en el editor, Compartir o Descargar HTML según sea necesario. El resultado es una página HTML editable que puede continuar con el mismo flujo de trabajo de edición visual.

Archivo a HTML: la página HTML generada está lista para su revisión y edición

2. Capacidades principales del editor visual

El corazón de HtmlDrag es un potente editor WYSIWYG que le permite trabajar directamente en un entorno HTML real, eliminando la necesidad de editar código.

2.1 Descripción general de la interfaz del editor

El editor visual combina un lienzo, navegación, un panel de control en el lado derecho y acciones para guardar o exportar. El elemento seleccionado se delinea en el lienzo, mientras que el panel derecho expone los controles que se aplican a la selección actual.

Espacio de trabajo del editor visual: seleccione un elemento, ajústelo y guarde o exporte el proyecto

Navegación izquierda e historial

La navegación izquierda cambia entre el espacio de trabajo principal y las áreas de trabajo guardadas. Úselo para regresar a los créditos de entrada a casa o abrir un proyecto existente.

Área central del lienzo

El lienzo muestra la página HTML importada o generada. Seleccione elementos directamente, use las herramientas de selección cuando la página sea compleja y use controles de zoom o pantalla completa cuando necesite más espacio.

Panel derecho (Edición / Componentes / Capas / Biblioteca)

El panel derecho contiene los controles para editar el elemento seleccionado, insertar componentes, ubicar elementos en la lista de capas y reutilizar componentes guardados de la biblioteca.

Acciones superiores e inferiores

El área superior proporciona el título del proyecto, compartir, imagen y acciones de exportación HTML. Los controles inferiores proporcionan acciones de vista previa, restauración, actualización y guardar versión.

2.2 Operaciones básicas y selección

El editor admite selección directa, selección de área, revisión de pantalla completa y edición enfocada. Comience con la selección más pequeña que cubra el cambio que desea realizar.

Vista de selección: revisa los elementos seleccionados antes de aplicar un cambio enfocado

Reconocimiento de elementos

Utilice Haga clic para seleccionar para seleccionar un elemento en la página. El editor describe el elemento y muestra su etiqueta o contenido en el estado de selección.

Selección de área y pantalla completa

Utilice Selección de área cuando varios elementos cercanos pertenezcan a la misma región visual. Utilice Pantalla completa cuando la página necesite más espacio para seleccionar, revisar o perfeccionar un diseño complejo.

Selección de pantalla completa: trabaje con más espacio en páginas complejas

Modo de arrastre y modo de edición

Utilice el modo de arrastre para reposicionar un elemento seleccionado y el modo de edición para cambiar el texto o el contenido del elemento admitido. Los controles del lado derecho se actualizan según la selección actual.

Bloquear, ocultar y eliminar elementos

Utilice los controles de elementos o el menú contextual para bloquear un elemento contra edición accidental, ocultarlo mientras revisa el diseño o eliminarlo del HTML actual. Confirme la selección antes de eliminar; utilice deshacer o restaurar cuando necesite volver a un estado anterior.

Menú contextual

Haga clic derecho en un elemento seleccionado para acceder a acciones rápidas como copiar, pegar, agregar un elemento a la biblioteca, editar enlaces, operaciones de capas, bloquear, ocultar y eliminar.

Selección múltiple

Utilice la selección múltiple cuando sea necesario revisar o ajustar varios elementos juntos. Verifique la lista de elementos seleccionados antes de aplicar un cambio y elimine un elemento de la selección si no debería verse afectado.

2.3 Atajos de lienzo

Dominar los atajos de teclado puede aumentar significativamente su eficiencia de edición. Estos son los principales atajos admitidos en el área del lienzo:

2.4 Panel derecho - Pestaña Editar

La pestaña "Editar" es el área más utilizada y proporciona alternancia de modos y herramientas de ajuste de estilo enriquecidas. Después de seleccionar un elemento, el panel muestra de forma inteligente opciones de edición según el tipo de elemento.

Pestaña Editar: alternancia de modos y herramientas de estilo

Cambios de modo

La parte superior del panel proporciona cuatro interruptores de modo para controlar el comportamiento de interacción del editor. Cada palanca se puede activar o desactivar de forma independiente, con una notificación de mensaje que indica el estado actual.

Consejo: La navegación de enlaces está desactivada de forma predeterminada durante la edición para permitir editar componentes. Para seguir enlaces, activa el interruptor «Navegación de enlaces» en el panel Editar. El envío de formularios también está bloqueado en el modo de edición para proteger el contenido.

Estilo de texto

Después de seleccionar un elemento de texto o ingresar al modo de edición, el panel muestra herramientas integrales de estilo de texto con las siguientes opciones de formato:

Estilo de texto: configuración de fuente, tamaño y color

Estilo de elemento

Después de seleccionar cualquier elemento, utilice las herramientas de estilo de elemento para ajustar su apariencia:

Estilo de imagen

Después de seleccionar un elemento de imagen, ajuste las opciones de visualización y reemplace la imagen:

Estilo de mesa

Cuando se selecciona una tabla o celda de tabla, se encuentran disponibles herramientas de edición de tablas dedicadas. Para obtener instrucciones detalladas, consulte 4.10 Edición de tablas.

Estilo de tabla: operaciones de fila/columna, bordes y configuración de celda

Edición de enlaces

Agregue enlaces de clic para navegar a cualquier elemento o edite enlaces existentes:

Herramientas de alineación (selección múltiple)

Cuando se seleccionan varios elementos, el panel muestra herramientas de alineación y distribución para ayudarle a organizar rápidamente los diseños de los elementos:

2.5 Panel derecho - Pestaña Componentes

La pestaña "Componentes" proporciona opciones de inserción rápida para varios tipos de elementos, lo que le ayuda a agregar rápidamente contenido nuevo al lienzo. Haga clic en un botón para insertar el componente correspondiente.

Pestaña Componentes: Inserta varios elementos con un clic

2.6 Panel derecho: pestaña Capas (árbol DOM)

La pestaña "Capas" proporciona una vista de lista de todos los elementos editables en el lienzo, lo que admite filtrado, operaciones por lotes y posicionamiento preciso: una herramienta poderosa para administrar elementos de página complejos.

Pestaña Capas: gestión de capas y operaciones por lotes

Lista de tarjetas de elementos

El panel muestra todos los elementos manejables como tarjetas. Cada tarjeta muestra el tipo de etiqueta del elemento (por ejemplo, DIV, IMG, SPAN) y el nivel de capa, con elementos de texto que muestran una vista previa del contenido. Los elementos de la capa decorativa están marcados con una insignia "Decorativo". Los íconos de bloqueo/desbloqueo rápido y ocultar/mostrar aparecen en el lado derecho de cada tarjeta.

Opciones de filtro

Haga clic en el botón filtrar para filtrar la lista por estado del elemento, con las siguientes opciones:

Operaciones por lotes

Después de seleccionar varios elementos en la lista de tarjetas, utilice los botones de operación por lotes para un procesamiento unificado:

Alternancia de precisión

La pestaña Capas proporciona una palanca de precisión para controlar la precisión del reconocimiento de elementos:

Haga clic en la tarjeta para localizar

Haga clic en cualquier tarjeta de elemento para desplazarse automáticamente por el lienzo y resaltar el elemento correspondiente, lo que facilita la localización rápida de componentes específicos en la página. Esto es especialmente útil cuando se trabaja con diseños de página complejos o en capas.

2.7 Panel derecho: pestaña Biblioteca (Favoritos)

La pestaña "Biblioteca" es su biblioteca de componentes personal donde puede guardar elementos o componentes de uso frecuente para reutilizarlos en diferentes proyectos, aumentando su eficiencia creativa.

Pestaña Biblioteca: Biblioteca de componentes personales

Lista de componentes favoritos

El panel muestra todos los componentes guardados como tarjetas, cada una con una miniatura y un nombre. Las miniaturas se generan automáticamente al guardar; Los componentes sin nombre se muestran como "Sin título".

Buscar favoritos

Utilice el cuadro de búsqueda para encontrar rápidamente componentes guardados por nombre. La lista se filtra en tiempo real a medida que escribe.

Insertar componente favorito

Haga clic en el botón "Insertar" en una tarjeta de biblioteca para agregar ese componente al lienzo actual. Los componentes insertados se pueden editar y ajustar normalmente.

Cambiar nombre/eliminar favoritos

Cada tarjeta de biblioteca ofrece opciones "Cambiar nombre" y "Eliminar". Cambiar el nombre hace que los componentes sean más fáciles de encontrar más adelante; la eliminación elimina permanentemente el componente guardado; utilícelo con precaución.

Cómo agregar a la biblioteca

Seleccione cualquier elemento en el lienzo, luego elija "Agregar a la biblioteca" en el menú contextual para guardar ese elemento y sus elementos secundarios como un componente. En caso de éxito, aparece una confirmación de "Agregado a la biblioteca".

2.8 Menú contextual

Al hacer clic con el botón derecho en un elemento seleccionado, se abre el menú contextual, lo que proporciona acceso rápido a acciones comunes. El contenido del menú se ajusta dinámicamente según el tipo de elemento seleccionado.

Menú contextual: acceso rápido a acciones comunes

Menú específico de la mesa

Al hacer clic derecho en una celda de la tabla, el menú muestra operaciones adicionales específicas de la tabla:

2.9 Edición de tablas

Cuando se selecciona una tabla o celda de tabla, el panel derecho muestra herramientas de edición de tablas dedicadas con funciones integrales de ajuste de estructura y estilo de tabla.

Edición de tablas: operaciones de fila/columna y configuración de estilo

Operaciones de fila y columna

La sección "Filas y columnas" del panel del editor de tablas proporciona:

Fusionar/dividir celdas

Después de seleccionar varias celdas adyacentes, use "Fusionar celdas" para combinarlas en una. Para celdas fusionadas, use "Dividir celda" para restaurarlas a las celdas múltiples originales.

Alineación de celdas

Establezca la alineación del contenido de la celda en dos dimensiones:

Estilo de borde

Personalice la apariencia del borde de la tabla, incluyendo:

Haga clic en "Aplicar" para guardar los cambios.

Fondo de celda

Establezca el color de fondo de la celda usando el selector de color, ideal para resaltar encabezados o filas de datos importantes.

2.10 Control de zoom y ajustes preestablecidos de ventana gráfica

El controlador de zoom en la parte inferior del lienzo proporciona ajustes de zoom y tamaño de la ventana gráfica, lo que le ayuda a obtener una vista previa de su trabajo en diferentes tamaños de dispositivos.

Control de zoom: ajuste el zoom del lienzo y el tamaño de la ventana gráfica

Acercar / Alejar / Restablecer

Utilice los botones "+" y "-" para acercar o alejar la vista del lienzo, o mantenga presionada la tecla Ctrl/Cmd + rueda del mouse para acercar rápidamente. Haga clic en el número de porcentaje para restablecer el zoom predeterminado. Mantenga presionada la barra espaciadora + arrastrar para desplazar el lienzo.

Ajustes preestablecidos de tamaño de ventana gráfica

Haga clic en el selector de ventana gráfica para cambiar entre tamaños de vista previa, simulando la visualización en diferentes dispositivos:

Vista previa de parches

Para páginas HTML con estructuras especiales, hay tres parches de vista previa disponibles para optimizar la visualización. Al habilitar o deshabilitar parches se guardará automáticamente y se actualizará la vista previa:

Consejo: Si los parches no producen un efecto apreciable, prueba primero «Restaurar HTML inicial» y vuelve a activar el parche.

2.11 Editor de código fuente HTML

El editor HTML le permite ver y editar directamente el código fuente HTML completo de su trabajo, ideal para usuarios avanzados que necesitan ajustes o adiciones de código personalizado. Esta característica es solo Pro.

Editor HTML: edite el código fuente directamente (Pro)

Ver/Editar HTML completo

Cuando abre el editor HTML, se muestra el código fuente HTML completo (incluido <!DOCTYPE html>). Puedes editar el código directamente; guardar aplica sus cambios.

Buscar y reemplazar

Utilice Ctrl+F para abrir la búsqueda, ingresando palabras clave para localizar rápidamente el código. Utilice Ctrl+H para abrir reemplazar y reemplazar texto por lotes. La barra de herramientas muestra el recuento de coincidencias (por ejemplo, "3/15"), con opciones para individual o reemplazar todo.

Ir a la línea

Utilice Ctrl+G o la función de salto de la barra de herramientas para ingresar un número de línea y navegar rápidamente hasta esa línea, lo cual resulta útil para archivos HTML grandes.

Caso de partido

Habilite la opción "Coincidir entre mayúsculas y minúsculas" durante la búsqueda para hacer coincidir con precisión el contenido que distingue entre mayúsculas y minúsculas.

Ajuste de palabras

Cuando el ajuste de texto está habilitado, las líneas de código largas se ajustan automáticamente para verlas sin desplazamiento horizontal.

Copiar / Guardar

Haga clic en "Copiar HTML" para copiar el código fuente completo al portapapeles. Después de editar, haga clic en Guardar para aplicar los cambios. Si el contenido está vacío o contiene errores de sintaxis, aparecerán los mensajes correspondientes.

Nota: Si el contenido HTML supera los límites de almacenamiento, al guardar aparecerá «Almacenamiento insuficiente; no se puede guardar esta edición». Elimina el contenido innecesario o mejora tu plan para aumentar la capacidad.

2.12 Barra de herramientas inferior

La barra de herramientas inferior proporciona los botones de acción principales del editor, incluidas las funciones de vista previa, deshacer/rehacer, restaurar y guardar.

Espacio de trabajo del editor: controles inferiores para obtener una vista previa, restaurar, actualizar y guardar una versión

Vista previa (se abre en una ventana nueva)

Haga clic en el botón de vista previa para abrir una vista previa completa de su trabajo en una nueva ventana, que muestra el resultado real de la visualización. La página de vista previa muestra un aviso de vista previa temporal que recuerda a los usuarios que se trata de una vista previa de la fase de edición con un enlace no reutilizable.

Deshacer/Rehacer

Deshacer revierte la última operación; Rehacer restaura una operación deshecha. Admite múltiples pasos de deshacer/rehacer. También disponible mediante Ctrl+Z (deshacer) y Ctrl+Y (rehacer).

Actualizar vista previa

Al hacer clic en actualizar se recarga el área de vista previa. El sistema primero guarda el contenido actual y luego actualiza el lienzo para mostrar el estado más reciente. Útil después de una edición exhaustiva para sincronizar la pantalla.

Restaurar el último estado guardado

Restaura el trabajo al último estado guardado manualmente. Todas las ediciones no guardadas se perderán; utilícelas con precaución. El sistema solicita confirmación antes de ejecutar.

Restaurar HTML inicial

Restaura el HTML del trabajo a su estado original cuando se creó por primera vez. Se borrará todo el historial de ediciones. Esta acción es irreversible; asegúrese de haber realizado una copia de seguridad del contenido importante.

Ahorrar

Guarda manualmente todos los cambios actuales. El sistema también admite el guardado automático, pero se recomienda guardar manualmente después de ediciones importantes para garantizar la seguridad de los datos. "Guardar correctamente" aparece al finalizar.

2.13 Barra de herramientas superior

La barra de herramientas superior muestra información de trabajo y botones de acción rápida, lo que brinda acceso rápido a funciones para compartir y descargar.

Espacio de trabajo del editor: controles superiores para descargar HTML, exportar imágenes y compartir

Título del proyecto (haga doble clic para editar)

La parte superior muestra el título del proyecto actual; haga doble clic en el área del título para ingresar al modo de edición y cambiar el nombre. El título no puede estar vacío; "Título actualizado correctamente" aparece en caso de éxito. Los proyectos sin nombre se muestran como "Trabajo sin título".

Botón Compartir

Haga clic en el botón compartir para habilitar el trabajo compartido y generar un enlace accesible. Consulte 4.16 Función Compartir para obtener más detalles. Esta característica es solo Pro.

Botones de descarga

El lado derecho proporciona los botones "Descargar como imagen" y "Descargar como HTML". Consulte 4.15 Exportar y descargar HTML para obtener más detalles.

3. Gestión, intercambio y exportación de proyectos

Después de editar, exporte archivos HTML limpios, genere enlaces de vista previa seguros con contraseñas o administre versiones del proyecto en el espacio de trabajo de su proyecto.

3.1 Exportar y descargar HTML

Utilice Descargar HTML en la barra de herramientas superior derecha para exportar la versión que revisó en el editor. El cuadro de diálogo de exportación separa la página editada de la fuente original y también proporciona opciones de copia y transferencia de IA.

Exportar HTML: elija la fuente editada u original, copie HTML o envíelo a AI

HTML editado

La pestaña HTML editado exporta la versión actual, incluidos los cambios realizados en el lienzo.

HTML original

La pestaña HTML original mantiene la fuente importada inicial disponible cuando necesita comparar o recuperar la versión inicial.

Copie HTML y exporte a AI

Copiar HTML copia la fuente actual al portapapeles. Exportar a IA crea un enlace de transferencia para que otro flujo de trabajo de IA pueda leer el HTML actual y continuar desde el resultado editado.

3.2 Función Compartir y vistas previas públicas

La función Compartir crea un enlace público para el trabajo actual para que otras personas puedan verlo sin ingresar al editor. La siguiente captura de pantalla muestra la configuración para compartir disponible antes de publicar el enlace. Esta función está disponible para usuarios Pro.

Compartir proyecto: elige la duración del enlace y decide qué avisos o barras laterales mostrar

Elija configuración para compartir

Haga clic en Compartir y elija una duración disponible, como 7 días, 30 días, 90 días o el período restante de su plan. El enlace para compartir no puede sobrevivir a la fecha de vencimiento del plan.

Opciones de visualización

Puede elegir si desea ocultar el aviso de seguridad y si desea ocultar la barra lateral derecha en la página compartida. Estas opciones afectan la vista del visitante, no la fuente editable en su proyecto.

Compartir página y acceder

Después de compartir, copie el enlace generado y envíelo a revisores o clientes. Puede volver a los controles de compartir para actualizar el enlace o dejar de compartir cuando la página ya no debería ser pública.

3.3 Barra de acceso directo de Mis proyectos

La barra de acceso directo "Mis proyectos" a la izquierda le permite expandir/contraer la lista de proyectos y cambiar entre proyectos rápidamente, facilitando transiciones fluidas entre múltiples creaciones.

Expandir y contraer

Haga clic en el botón "Mis proyectos" en la parte superior izquierda para expandir la lista de trabajo de la barra lateral. Haga clic nuevamente o haga clic fuera de la barra lateral para contraerla. Cuando está expandido, puede explorar visualmente miniaturas y títulos de sus proyectos históricos.

Cambiar proyectos

Haga clic en cualquier tarjeta de proyecto de la lista para cargar inmediatamente su contenido en el editor. Esto le permite comparar y modificar rápidamente diferentes borradores de diseño sin tener que regresar a la página de inicio o al perfil.

3.4 Instantáneas del historial de versiones

En la barra lateral izquierda, "Mis proyectos" (Historial) brinda acceso rápido a sus creaciones pasadas. Enumera todos sus registros de edición en orden cronológico.

Selección y edición rápidas

Haga clic en cualquier registro de la lista para cargarlo rápidamente en el editor y continuar donde lo dejó, sin volver a importarlo.

Detalles de la ventana de vista previa

Pase el cursor sobre un registro del historial para ver su ventana de vista previa. En la ventana de vista previa, puede:

1. Editar título directamente: haga clic en el texto del título para modificar el nombre del proyecto al instante.
2. Ver estado compartido: los iconos indican si el trabajo está compartido actualmente.
3. Acciones rápidas: acceda a editar, eliminar y otros accesos directos.

Historial: vista previa rápida y gestión de proyectos anteriores

3.5 Gestión y organización de proyectos

El módulo de gestión de proyectos muestra todos los proyectos que ha creado y permite ver, editar, compartir y eliminar operaciones.

Lista de trabajo y filtros

Los proyectos se muestran como tarjetas o en una lista. Puedes filtrarlos usando:

1. Buscar: ingrese el código de trabajo o el título para buscar
2. Filtro de tipo: filtrar por generador de IA, carga de archivos, clonación de página web, pegado de código, etc.
3. Rango de fechas: seleccione fechas de inicio y finalización para filtrar proyectos de un período específico
4. Ordenar por: ordenar por lo más nuevo primero, lo más antiguo primero, el recuento de me gusta o el recuento de vistas.

gestión de proyectos: vea, filtre y administre todos los proyectos

Ver y editar proyectos

Haga clic en el botón "Ver" en una tarjeta de proyecto para obtener una vista previa. En la interfaz de vista previa, puede:

1. Editar el título del proyecto (haga doble clic en el título para editarlo)
2. Haga clic en "Editar" para ingresar al editor visual y continuar editando
3. Ver el historial de guardado del trabajo y restaurarlo a una versión específica

Compartir gestión de estado

Los usuarios Pro pueden compartir proyectos y permitir que otros los vean a través de un enlace:

1. Habilitar compartir: haga clic en el botón "Compartir" para generar un enlace para compartir válido durante 7 días.
2. Actualizar compartir: los proyectos ya compartidos pueden tener sus enlaces actualizados, actualizando el período de validez.
3. Dejar de compartir: haga clic en "Dejar de compartir" para invalidar inmediatamente el enlace.

Eliminar proyectos

Haga clic en el botón "Eliminar" en una tarjeta de proyecto para eliminarla. El sistema mostrará dos cuadros de diálogo de confirmación para evitar una eliminación accidental:

1. Primera confirmación: pregunta si desea eliminar este trabajo
2. Segunda confirmación: le recuerda que la eliminación es irreversible

Consejo: Puedes eliminar hasta 3 registros a la vez. Después de eliminar un proyecto, se liberará el espacio que ocupa.

La página Proyectos es su espacio dedicado para ver y administrar todas sus creaciones. Accede a él rápidamente desde la barra lateral o menú de usuario.

Pantalla de trabajo

La página muestra todos sus proyectos como tarjetas, cada una de las cuales contiene:

1. Vista previa en miniatura: vista previa visual del trabajo para una rápida identificación
2. título del proyecto: muestra el nombre del proyecto, haga clic para editar
3. Hora de creación: registra cuándo se creó el trabajo
4. Estado compartido: muestra si el trabajo está compartido actualmente.

Proyectos: vea y administre todas sus creaciones en un solo lugar

Acciones rápidas

Cada tarjeta de proyecto proporciona botones de acción convenientes:

1. Editar: Ingresa al editor visual para continuar creando
2. Compartir: genera o administra enlaces para compartir (solo Pro)

4. Consejos y solución de problemas del sistema

Durante el uso, puede encontrar alertas o límites del sistema. Aquí encontrará explicaciones y sugerencias de consejos comunes sobre el sistema.

4.1 Detección de HTML y alertas de enlaces directos

Para garantizar la calidad de la importación y la estabilidad del editor, el sistema escanea automáticamente las URL y los archivos, alertándole sobre posibles problemas.

Detección de recursos locales

Si una página contiene rutas locales (por ejemplo, file:// o C:/), los recursos no se cargarán. Sugerencia: asegúrese de que todos los recursos utilicen enlaces HTTP/HTTPS públicos.

Protección de vínculos de imagen

Algunos sitios bloquean el acceso externo a las imágenes. Sugerencia: utilice "Reemplazar imagen" para cargar archivos locales o alojarlos en un servicio público.

Páginas de renderizado dinámico (SPA)

Las páginas que dependen completamente de JavaScript (SPA) pueden importarse como vacías o incompletas porque el DOM dinámico no se captura directamente. Sugerencia: utilice "Pegar código" copiando el HTML renderizado desde su navegador.

Fuentes externas/bibliotecas de iconos

Las fuentes o íconos a los que les faltan encabezados CORS pueden mostrarse incorrectamente. Sugerencia: reemplácelas con fuentes del sistema o íconos de biblioteca en el editor.

Contenido incrustado (iframe)

Por motivos de seguridad, parte del contenido del iframe puede estar bloqueado o no ser interactivo. El sistema conserva los marcadores de posición siempre que sea posible.

4.2 Límites de almacenamiento y uso

HtmlDrag aplica cuotas de recursos según su plan. Es posible que vea alertas de "Límite de almacenamiento alcanzado" o "Límite de trabajo alcanzado".

Límite de almacenamiento alcanzado

No puede guardar ediciones ni cargar archivos cuando no tiene espacio. Solución:

1. Elimine elementos antiguos en "Proyectos" para liberar espacio.
2. Haga clic en "Actualizar ahora" en el cuadro de diálogo para obtener más capacidad con un Pro.

Límite de recuento de proyectos

Los usuarios gratuitos tienen un límite en la cantidad de proyectos guardados. Elimine proyectos antiguos o actualice para aumentar este límite.

Límites de carga de imágenes

El sistema verifica el tamaño de un solo archivo y los límites de lotes. Si ve "El tamaño del archivo excede el límite" o "Tamaño del lote excedido", comprima las imágenes o cárguelas en lotes más pequeños. Los usuarios profesionales disfrutan de límites más altos.

4.3 Zona de pruebas de seguridad y desinfección

El análisis de seguridad integrado evalúa automáticamente el riesgo del contenido al importar URL, cargar archivos o pegar código para proteger su cuenta.

Nivel de riesgo

Según amenazas como XSS, scripts maliciosos o etiquetas peligrosas, los riesgos se clasifican en:

1. Riesgo bajo: advertencias menores; Generalmente es seguro continuar.
2. Riesgo medio: posibles problemas; proceda con precaución.
3. Alto riesgo: riesgos graves; proceder sólo si la fuente es confiable.
4. Riesgo crítico: contiene malware o contenido de phishing; bloqueado inmediatamente.

Modo seguro

Para archivos con cierto riesgo, el sistema ofrece "Medidas de seguridad" como Auto Sanitize. Puede elegir "Continuar en modo seguro", donde el sistema elimina el código peligroso preservando el diseño y la capacidad de edición.

4.4 Notificaciones y mensajes del sistema

El módulo Mensajes recibe notificaciones importantes del sistema, incluido el estado de la cuenta, recordatorios de pago, alertas de vencimiento de suscripción y actualizaciones de funciones.

Mensajes: reciba notificaciones y alertas del sistema

Lista de mensajes del sistema

La lista de mensajes está ordenada cronológicamente y muestra el título, el resumen, la hora de creación y la hora de caducidad. Haga clic en un mensaje para ver detalles o realizar acciones (por ejemplo, "Continuar pago", "Renovar ahora").

Filtro no leído

Marque la casilla "Solo no leídos" en la parte superior derecha para filtrar rápidamente los mensajes no leídos, lo que le ayudará a centrarse en las notificaciones importantes.

Marcar todo como leído

Haga clic en el botón "Marcar todo como leído" para marcar instantáneamente todos los mensajes en la lista actual como leídos, borrando los indicadores de puntos rojos.

Detalles del mensaje

Haga clic en una tarjeta de mensaje para ver el contenido completo de la notificación. Para mensajes de pedido o suscripción, los detalles suelen incluir botones de acción rápida para su comodidad.

4.5 Comentarios y soporte

Si tiene problemas o tiene sugerencias, envíelas a través del módulo de comentarios. Puede cargar imágenes para describir mejor su problema.

Comentarios: envíe problemas o sugerencias

Lista de comentarios y estado

La lista muestra su historial de envíos y su estado actual:

1. En curso: comentarios enviados, en espera de revisión del administrador.
2. Respondido: el administrador ha respondido; haga clic para ver.
3. Cerrado: comentarios archivados o resueltos; no se permiten más respuestas.

Enviar nuevos comentarios

Haga clic en "Nuevo comentario", ingrese su contenido (obligatorio, mínimo 10 caracteres). Puede "Subir imágenes" (máximo 2 MB cada una) para proporcionar capturas de pantalla. Haga clic en "Enviar comentarios" cuando haya terminado.

Detalles de comentarios y conversación

Haga clic en un elemento de la lista para ver el historial de conversaciones completo, incluidos sus mensajes y respuestas del administrador. La parte superior muestra el ID de comentarios y los archivos adjuntos.

Continuar Responder

Para comentarios "En curso" o "Respondido", utilice el cuadro de entrada en la parte inferior para proporcionar más información o responder al administrador hasta que se resuelva.

Al enviar comentarios, puedes añadir capturas de pantalla o archivos relacionados para ayudarnos a entender mejor tu solicitud. También puedes consultar las respuestas del administrador y el historial de la conversación en los detalles del comentario para seguir el progreso.

Valoramos todos los comentarios y procuraremos procesarlos lo antes posible. ¡Gracias por tu participación y apoyo!

5. Cuenta, créditos y suscripción (Apéndice)

Administre la configuración de su cuenta, la seguridad de inicio de sesión, los saldos de crédito y los planes de suscripción.

5.1 Regístrate

HtmlDrag utiliza el registro por correo electrónico. Simplemente complete algunos detalles básicos para crear su cuenta. Después de un registro exitoso, iniciará sesión automáticamente y será redirigido a la página de inicio.

Registro por correo electrónico

En la página de registro, complete los siguientes pasos para crear su cuenta:

1. Ingrese el correo electrónico: proporcione la dirección de correo electrónico que utiliza con frecuencia. Esto le servirá como credencial de inicio de sesión y canal de notificación. Asegúrese de que el formato del correo electrónico sea correcto, por ejemplo, [email protected].
2. Establecer contraseña: la contraseña debe contener letras y números, con una longitud de 8 a 32 caracteres. Recomendamos utilizar una contraseña segura para proteger su cuenta.
3. Confirmar contraseña: vuelva a ingresar la contraseña para asegurarse de que ambas entradas coincidan.
4. Establecer apodo (opcional): puedes personalizar tu apodo. Si lo deja en blanco, el sistema generará automáticamente un apodo predeterminado para usted.
5. Acepto los términos: marque "He leído y acepto los Términos de servicio y la Política de privacidad", luego haga clic en el botón "Registrarse" para completar el registro.

Página de registro: ingrese el correo electrónico y la información básica para crear una cuenta

Verificación de correo electrónico y recompensa de crédito

Después de un registro exitoso, el sistema enviará un correo electrónico de verificación a su bandeja de entrada. Al completar la verificación por correo electrónico, recibirá créditos de bonificación que pueden usarse para las funciones de Generador de IA y Duplicar página. Si no recibe el correo electrónico, revise su carpeta de spam; puede hacer clic en "Reenviar" para solicitar otro correo electrónico de verificación después de 3 minutos.

Consejo: Completar la verificación del correo electrónico no solo te otorga créditos adicionales, sino que también desbloquea la experiencia completa y mejora la seguridad de tu cuenta.

5.2 Iniciar sesión

HtmlDrag admite múltiples métodos de inicio de sesión. Elija la opción más conveniente según sus preferencias.

Correo electrónico y contraseña Iniciar sesión

Inicie sesión utilizando el correo electrónico y la contraseña con la que se registró:

1. Ingrese su dirección de correo electrónico en la página de inicio de sesión
2. Ingrese su contraseña (haga clic en el ícono del ojo para alternar la visibilidad de la contraseña)
3. Haga clic en el botón "Continuar" para completar el inicio de sesión

Después de iniciar sesión correctamente, serás redirigido automáticamente a la página de inicio donde podrás comenzar a crear.

Inicio de sesión de terceros (Google/GitHub)

Para un acceso más rápido, puede iniciar sesión con su cuenta de Google o GitHub:

1. Iniciar sesión con Google: haga clic en el botón "Iniciar sesión con Google". En la ventana emergente de autorización de Google, seleccione su cuenta y confirme la autorización.
2. Iniciar sesión con GitHub: haga clic en el botón "Iniciar sesión con GitHub". Serás redirigido a la página de autorización de GitHub. Después de confirmar, volverá automáticamente a HtmlDrag.

Página de inicio de sesión: admite correo electrónico/contraseña y cuentas de terceros

Consejo: Iniciar sesión con Google o GitHub crea automáticamente una cuenta; no es necesario registrarse por separado. En tu primer inicio de sesión con un tercero, el sistema creará automáticamente una cuenta vinculada.

Olvidé el enlace de contraseña

Si olvidó su contraseña, haga clic en "¿Olvidó su contraseña?" enlace en la parte inferior derecha de la página de inicio de sesión para ingresar al proceso de restablecimiento de contraseña (consulte la Sección 1.3).

5.3 Olvidé y restablecí la contraseña

Si olvidó su contraseña, puede restablecerla usando un código de verificación por correo electrónico. Todo el proceso se completa en una sola página sin redirecciones.

Proceso de restablecimiento de contraseña

Siga estos pasos para restablecer su contraseña:

1. Ingrese el correo electrónico: proporcione la dirección de correo electrónico que utilizó durante el registro.
2. Obtener código de verificación: haga clic en el botón "Enviar código". El sistema enviará un correo electrónico que contiene un código de verificación de 6 dígitos.
3. Ingrese el código de verificación: ingrese el código de 6 dígitos que recibió en el campo del código de verificación.
4. Establecer nueva contraseña: ingrese su nueva contraseña (debe contener letras y números, de 8 a 32 caracteres)
5. Confirmar nueva contraseña: vuelva a ingresar la nueva contraseña para asegurarse de que coincida.
6. Haga clic en "Restablecer contraseña": complete el restablecimiento de contraseña. Después de ver el mensaje de éxito, serás redirigido automáticamente a la página de inicio de sesión.

Olvidé mi contraseña: restablecerla mediante un código de verificación por correo electrónico

Validez del código de verificación

El código de verificación tiene un período de validez limitado; utilícelo lo antes posible después de recibir el correo electrónico. Si el código ha caducado, puede hacer clic en el botón "Reenviar" para solicitar un nuevo código (deberá esperar a que termine la cuenta atrás antes de volver a enviarlo).

Nota: Si tu correo electrónico no está registrado en el sistema, no se podrá enviar el código de verificación. Asegúrate de introducir la dirección de correo utilizada durante el registro.

5.4 Configuración del perfil

El módulo Configuración de perfil le permite administrar la información básica de su cuenta, incluida la configuración de avatar, apodo, correo electrónico, biografía y contraseña.

Cambiar avatar

Haga clic en el botón "Cambiar avatar" en el área de avatar y seleccione un archivo de imagen local para cargar. El sistema recortará y guardará automáticamente su nuevo avatar.

Cambiar apodo

Haga clic en el botón editar al lado de su apodo, ingrese un nuevo nombre y haga clic en "Guardar". Tu apodo se mostrará en todos tus proyectos y comentarios.

Gestión de correo electrónico

La sección de correo electrónico muestra su dirección de correo electrónico actual y el estado de verificación:

1. Verificado: su correo electrónico ha sido verificado y todas las funciones están disponibles
2. No verificado: haga clic en "Enviar correo electrónico de verificación" para completar la verificación y ganar créditos de bonificación.
3. Cambiar correo electrónico: primero debe verificar su correo electrónico actual y luego ingresar una nueva dirección de correo electrónico para completar el cambio.

Biografía

Ingrese su presentación en el área de biografía (recomendado: no más de 200 caracteres), luego haga clic en "Guardar" para actualizar.

Cambiar contraseña/Establecer contraseña

Haga clic en el botón "Cambiar contraseña" para abrir el cuadro de diálogo de configuración de contraseña:

1. Usuarios con una contraseña existente: ingrese su contraseña actual y luego establezca una nueva contraseña (de 8 a 32 caracteres, incluidas letras y números).
2. Usuarios sin contraseña: establezca una nueva contraseña directamente. Después de la configuración, puede iniciar sesión con correo electrónico y contraseña.

Eliminar cuenta

Para eliminar su cuenta, haga clic en el botón "Eliminar cuenta" en la parte inferior de la página. Por seguridad, deberá verificar su identidad mediante un código de verificación por correo electrónico.

Nota: Después de enviar la solicitud de eliminación, tu cuenta entrará en un periodo de retención (normalmente, 30 días) durante el cual no podrás iniciar sesión. Transcurrido ese periodo, el sistema eliminará permanentemente tus proyectos, créditos e historial.

Perfil: Administrar avatar, apodo, correo electrónico y contraseña

5.5 Uso del almacenamiento

El módulo Uso de almacenamiento muestra el consumo de almacenamiento de su cuenta, lo que le ayuda a comprender el espacio restante y planificar sus creaciones en consecuencia.

Descripción general del almacenamiento

La sección superior muestra su uso general, que incluye:

1. Usado: el espacio de almacenamiento actualmente en uso
2. Total: el límite de almacenamiento de su cuenta (los usuarios Pro disfrutan de una mayor capacidad)
3. Restante: espacio disponible para crear nuevos proyectos
4. Proyectos almacenados: número actual de proyectos guardados y límite

Desglose del almacenamiento

El sistema clasifica el almacenamiento en tres tipos:

1. Contenido HTML: espacio utilizado por el código de la página web de sus proyectos
2. Recursos de imágenes: espacio utilizado por los archivos de imágenes cargados
3. Otros recursos: espacio utilizado por otros archivos adjuntos

Límite de recuento de proyectos

Los usuarios gratuitos y Pro tienen diferentes límites de recuento de trabajo. Cuando alcance el límite, deberá eliminar algunos proyectos o actualizar su plan antes de crear otros nuevos.

Actualización y actualización del almacenamiento

Haga clic en el botón Actualizar para actualizar la información de almacenamiento. Para obtener más espacio de almacenamiento, haga clic en "Actualizar almacenamiento" para visitar la página de precios y elegir un plan adecuado.

Consejo: Si el almacenamiento de tu cuenta está lleno o alcanzas el límite de proyectos, el sistema detendrá la creación de nuevos proyectos. Elimina algunos proyectos o mejora tu plan para recuperar los permisos de carga.

5.6 Créditos e historial de uso

El módulo Historial de crédito muestra el historial de transacciones de crédito de su cuenta, incluidos los registros de consumo y ganancias.

Historial de transacciones de crédito

Los registros de crédito se muestran en una tabla que contiene la siguiente información:

1. Fecha: cuando se produjo el cambio de crédito
2. Tipo: El tipo de operación del cambio de crédito.
3. Cambio de créditos: créditos agregados (positivos) o deducidos (negativos)
4. Descripción: explicación detallada del cambio

Puede utilizar filtros de rango de fechas para ver registros de un período de tiempo específico.

Tipos de crédito

1. Generador de IA: créditos consumidos al utilizar la función Generador de IA
2. Duplicar página: créditos consumidos al utilizar la función Duplicar página
3. Recompensa por registro: créditos otorgados a nuevos usuarios después del registro y la verificación por correo electrónico
4. Bono de plataforma: créditos regalados por la plataforma
5. Regalo mensual: asignación de crédito mensual para usuarios Pro
6. Recarga de crédito: créditos obtenidos mediante compras de crédito
7. Ajuste de administrador: créditos ajustados manualmente por los administradores

Historial de crédito: ver detalles de la transacción de crédito

Consejo: Los usuarios Pro reciben créditos adicionales cada mes. Los créditos se pueden utilizar en funciones de pago como Generador de IA y Duplicar página.

5.7 Historial de pedidos y facturación

El módulo Historial de pedidos muestra su historial de compras y registros de pagos, lo que facilita la consulta y gestión de pedidos.

Gestión de pedidos

La lista de pedidos muestra sus registros de compras. Puede:

1. Ver el estado y los detalles del pedido
2. Utilice filtros para encontrar rápidamente pedidos específicos
3. Continuar pago de pedidos pendientes
4. Cerrar o eliminar pedidos que ya no necesites

Consejo: Si tienes problemas con el pago, puedes cerrar el pedido actual y realizar uno nuevo.

5.8 Precios y planes de suscripción

La página de Precios es donde administras tu suscripción y recargas de crédito. Elige el plan que mejor se adapte a ti y desbloquea más posibilidades creativas.

Planes de suscripción

HtmlDrag ofrece planes de suscripción Pro y Pro Max. Después de suscribirte, podrás utilizar los beneficios incluidos durante el período de suscripción activa:

Pro: para creadores habituales que necesitan el flujo de trabajo completo de edición de HTML, generación de IA, uso compartido y exportación.

Pro Max: para una creación de IA más intensa, proyectos más grandes y límites de uso más altos.

Las suscripciones se renuevan según el ciclo de facturación que se muestra al finalizar la compra. Puedes gestionar o cancelar la renovación desde tu cuenta o desde el proveedor de pago.

Precios: elige el plan que mejor se adapte a ti

Créditos de recarga

Si solo necesita el uso temporal de las funciones de generación de IA o clonación de página web, puede optar por recargar créditos. Los créditos comprados nunca caducan y puedes recargarlos en cualquier momento cuando se estén agotando, sin necesidad de esperar.

Comparación de características

Las principales diferencias entre Free y Pro son las siguientes:

Guía de uso de crédito

Cada generación de IA consume una cantidad fija de créditos. Los usuarios gratuitos reciben créditos de bonificación mensuales básicos, mientras que los usuarios Pro reciben más. Los créditos comprados nunca caducan y puedes recargarlos en cualquier momento cuando se estén agotando, sin esperar a que se recupere la cuota.

Comenzar con HtmlDrag

Comience con una página HTML existente, una URL pública, una solicitud de refinamiento de IA o un archivo compatible. HtmlDrag le ayuda a pasar del material de origen a una edición visual, una vista previa que se puede compartir o una exportación HTML limpia.

Empieza a crear ahora

Esta guía cubre la carga de HTML, el pegado de código, la clonación de una página web, el refinamiento de la IA, el archivo a HTML, la edición de texto e imágenes, las tablas, los componentes, las capas, los enlaces, el bloqueo y la eliminación de elementos, el guardado, el uso compartido y la exportación de HTML.