Editor HTML en tiempo real

De tres pestañas de código a un documento del navegador

Colores de sintaxis, números de línea, parejas de llaves, plegado y completado ayudan a recorrer un archivo pequeño, sin probar que funcione. Copiar archivo activo toma solo la pestaña seleccionada; copiar HTML completo reúne el documento. El import local admite archivos dentro de 2 MiB. Las imágenes vecinas aún necesitan direcciones accesibles: importar HTML no importa su carpeta entera.

HTML define estructura, CSS presentación y JavaScript comportamiento de navegador. Un fragmento como <main><h1>Notas</h1></main> recibe una estructura de documento. Un archivo HTML completo mantiene su cabecera y cuerpo; el CSS de la pestaña se añade en la cabecera y JavaScript cerca del final del cuerpo. Los estilos y scripts existentes permanecen en el archivo importado. Copiarlos también a otra pestaña puede duplicar el comportamiento.

Editar, visualizar y probar son pasos distintos. Escribe o formatea código, observa su aspecto y después ejercita la interacción con evidencias. Ejecutar utiliza el borrador actual. Sin ejecución automática, la vista puede seguir mostrando una versión anterior mientras editas. Activa el automatismo para pruebas de diseño de confianza; déjalo apagado al escribir un manejador incompleto o estudiar un efecto secundario. Formatear afecta a la pestaña activa y mejora la lectura, no la corrección.

Elige la plantilla por el patrón necesario. Blank HTML5 y Semantic Article ayudan con la estructura; Responsive Landing, CSS Grid Dashboard y Flexbox Pricing aíslan distribuciones. Interactive Card y JavaScript Counter muestran eventos. CSS Animation incluye una regla de movimiento reducido. Accessible Form conecta etiquetas y mensajes de estado. Son ejemplos de partida, no certificaciones de calidad tras modificarlos.

Distinguir anchura adaptable y zoom de la vista

El modo ajustado sigue el panel; los modos fijos utilizan 390, 768 y 1280 píxeles CSS. Son anchuras de diseño, no teléfonos simulados. El zoom modifica el tamaño visible dentro del editor. Ayuda a examinar una página amplia, pero reducir su aspecto no demuestra que quepa en una ventana estrecha. Empieza al 100%, compara los modos y prueba los límites de tus puntos de ruptura con las herramientas del navegador.

Una regla a 720 píxeles puede mostrar tres columnas a 768 y una a 390 sin explicar un fallo a 721. Prueba títulos largos, estados vacíos y mensajes de validación, no solo la plantilla ordenada. Un hijo de anchura fija, una URL sin cortes o demasiado relleno pueden desbordar incluso una cuadrícula adaptable. Retira una restricción por vez y vuelve a ejecutar.

Cambiar la anchura responde a una pregunta de distribución. No prueba entrada táctil, teclado en pantalla, densidad de píxeles, rendimiento ni otro motor. Examina el documento exportado con teclado, texto ampliado y dispositivos reales. Pantalla completa ofrece espacio; otra pestaña facilita observar el resultado. Ninguna de estas acciones publica la página.

Seguir un fallo con Consola y Comprobaciones

En un documento completo, revisa <!doctype html>, idioma, UTF-8, viewport adaptable y título significativo. Ajusta el idioma al texto y no conserves el inglés de plantilla. Se señalan también saltos de encabezado, tipos de botón ausentes y eventos integrados. Vaciar consola elimina mensajes antiguos sin cambiar código; hazlo antes de una acción concreta para identificar su resultado.

Si un botón no responde, confirma primero que los scripts estén permitidos y el borrador actual se haya ejecutado. Busca el primer error después de una nueva ejecución. Un querySelector que devuelve null suele indicar un selector distinto del ID o un elemento ausente. Registra un valor pequeño cerca del fallo, no un objeto confidencial completo. La consola limitada recoge mensajes habituales, errores y promesas rechazadas; no sustituye puntos de interrupción ni una traza completa.

Las comprobaciones inspeccionan el documento combinado: información documental ausente, IDs duplicados, imágenes sin alt, controles sin etiqueta, acciones sin nombre y enlaces sospechosos. Un error requiere revisar el contexto y una sugerencia puede ser una decisión de diseño. alt="" puede ser adecuado para decoración; una imagen informativa necesita descripción útil. Varios H1 no son automáticamente inválidos porque se sugiera un encabezado principal claro.

La guía W3C sobre etiquetas de formulario explica por qué importa una etiqueta visible asociada al control. Un marcador que desaparece al escribir no la sustituye. Tras corregir un aviso, recorre el formulario con Tab y revisa foco y respuesta. Estas comprobaciones no demuestran contraste, orden de lectura, uso con lector de pantalla ni conformidad HTML completa. Compleméntalas con un validador y pruebas de accesibilidad centradas en tareas.

Revisa el peso de la red antes de pulir el diseño. Para recursos externos de confianza, abre las herramientas de red completas del navegador antes de recargar el ejemplo. Compara una carga sin archivos en caché con otra repetida. Examina peticiones fallidas, bytes transferidos, imágenes y bibliotecas grandes, y qué petición inicia cada dependencia. La referencia de red de Chrome distingue el tamaño transferido del tamaño mayor del recurso descomprimido. Un HTML pequeño puede depender de varios megabytes de imágenes o scripts. Elimina un recurso innecesario o reduce una imagen sobredimensionada y repite la misma comparación. Una vista rápida gracias a la caché no demuestra buen rendimiento con una conexión lenta.

Comprueba cuándo aparece el contenido y si se desplaza. La guía sobre CSS que bloquea el renderizado explica por qué una hoja necesaria puede retrasar la primera vista con estilos; el tamaño descargado no es el único coste. Usa las herramientas de rendimiento del navegador para examinar la carga y las ejecuciones largas de JavaScript: Consola y Comprobaciones no son un perfilador. Si un título salta al cargarse una imagen, una fuente o un contenido incrustado, sigue la guía sobre cambios de diseño. Reserva su espacio con valores correctos de width/height o aspect-ratio y vuelve a probar durante la carga. Incluye dependencias y condiciones en la entrega. Este caso reducido no reproduce la caché ni las respuestas del servidor final, ni el rendimiento de todos los dispositivos.

Resolver recursos externos de forma consciente

Recursos acepta URL HTTP o HTTPS para hojas de estilo y scripts preparados para el navegador, además de una URL base. Introduce una dirección por línea. Con https://example.org/demo/, images/logo.png se resuelve bajo ese directorio; /images/logo.png empieza en la raíz del origen. El estándar HTML explica esa resolución. La base es una regla de dirección, no una carpeta de carga, y no publica archivos de tu equipo.

Si tras importar faltan una fuente o imagen, revisa la URL antes de reescribir CSS. Puede depender de otro directorio, requerir inicio de sesión, estar bloqueada por el permiso de red o por el servidor remoto. Permitir red autoriza intentos, no respuestas correctas. Los scripts tienen un permiso separado: JavaScript externo también necesita autorización para ejecutarse.

Un archivo CDN listo para navegador puede servir para un ejemplo pequeño. Un nombre npm, JSX, TypeScript, Sass o PHP no se vuelve ejecutable aquí. No hay instalación de paquetes, compilación, base de datos ni intermediario de API privada. Los proyectos con frameworks o autenticación necesitan un entorno adecuado y pruebas bajo las políticas reales del sitio final.

¿Qué protege el aislamiento de la vista?

Las reglas WHATWG del sandbox describen un origen aislado para un iframe sin permiso de mismo origen. Esta vista no concede ese permiso. Scripts y red comienzan apagados y se controlan por separado; importar también desactiva la ejecución automática. Para diseño estático, mantén ambos apagados. Un contador de confianza puede necesitar scripts, pero no peticiones externas.

El aislamiento limita acceso, no evalúa el código. Un bucle puede consumir recursos, un script dibujar una pantalla de acceso engañosa y los recursos permitidos enviar peticiones a sus servidores. No introduzcas credenciales en la vista. Los límites de consola reducen ráfagas normales de mensajes, pero no garantizan que código hostil nunca bloquee la pestaña.

La pestaña de vista separada conserva el iframe y permisos elegidos. El HTML completo descargado es diferente: contiene código y recursos sin las restricciones de ejecución del editor. Abrirlo directamente puede ejecutar scripts. Revísalo antes de abrir o enviar, especialmente si procede de una fuente desconocida.

Conservar el archivo adecuado para continuar

Proyecto JSON mantiene título, pestañas, URL base y listas de recursos. HTML completo es el documento combinado, no un paquete sin conexión de imágenes y bibliotecas remotas. Reimportar HTML coloca todo en su pestaña, sin reconstruir la división original. Guarda JSON para continuar editando y HTML para que otra persona examine el resultado.

Para depurar, suele ser mejor HTML sin minificar. La versión minificada elimina comentarios y comprime código compatible; compara el resultado y conserva el original. Los borradores pertenecen al perfil local, no a una copia en la nube ni historial de versiones. El almacenamiento puede bloquearse o borrarse. Ante un borrador dañado, preserva lo necesario antes de restablecer; guardar o restablecer deliberadamente puede reemplazarlo.

Compartir incluye un proyecto comprimido en el fragmento de URL, con código y recursos. No es un secreto con control de acceso ni una página alojada en producción. Quien recibe el enlace puede inspeccionarlo y reenviarlo. Si excede el límite, descarga JSON. La importación admite HTML/HTM y JSON compatible dentro del límite de archivo, no carpetas enteras de recursos.

Por qué sigue importando la estructura del documento

El relato del CERN sobre el nacimiento de la Web sitúa en 1989 el trabajo de Tim Berners-Lee para compartir información enlazada. La idea documental sigue siendo útil: títulos que explican relaciones, enlaces con destino pertinente y formularios con propósito. Una colección de cajas atractivas puede continuar siendo un documento difícil de entender.

En un ejemplo de documentación, decide qué debe descubrir el lector antes de elegir una plantilla. Usa un botón nativo para una acción y un enlace para navegar. Explica las columnas de una tabla en lugar de depender solo del color. Estas decisiones hacen el ejemplo más claro y fácil de trasladar fuera del editor.

Una entrega útil registra código, última anchura probada, navegador, permisos y resultado esperado. Distingue un contador que respondió aquí de una aplicación lista para alojarse. Así el ensayo rápido conserva su valor sin pretender demostrar servidor, seguridad de producción o todas las combinaciones de dispositivos.