Editar Web

Ideal para: Dueños de negocio, equipos de marketing y desarrolladores web.

1. ¿Qué es el Editor Web?

El módulo de Editor Web es el estudio creativo donde mantienes todo el código de tu sitio. Puedes construir páginas completas con HTML, CSS y JavaScript, administrar secciones reutilizables y trabajar en equipo sin perder el control.

• Para dueños de negocio o marketing: ofrece una vista clara de tus páginas, botones intuitivos para duplicar, ocultar o publicar y un historial que documenta cada cambio.
• Para desarrolladores: integra un editor de código de clase profesional, control de versiones, traducciones automáticas opcionales y herramientas pensadas para proyectos multi-páginas.

Toda la estructura respeta la arquitectura modular de MGPanel, por lo que los cambios en el módulo impactan directamente el sitio activo de tu cuenta.

2. Características principales

2.1 Navegador lateral de páginas y secciones

El navegador agrupa el contenido en tres bloques:

• Sitio Web: páginas personalizadas que tú creas. Cada una muestra su nombre (máximo 15 caracteres visibles), un indicador si es página de inicio y acceso directo para ver, editar, duplicar, ocultar/mostrar, fijar como home o eliminar.
• Páginas: dentro del sitio web se listan las páginas disponibles. Puedes renombrarlas, ocultarlas o eliminarlas.
• Secciones: dentro de cada página se listan las secciones disponibles. Puedes reordenarlas con la manija de arrastre, renombrarlas, ocultarlas o eliminarlas. El menú contextual también permite editar sus propiedades y detectar si son secciones importadas o dinámicas.

Las secciones marcadas como dinámicas (por ejemplo, importadas desde otra página) muestran un icono (☰) y pueden usarse en mutiples páginas.

2.2 Páginas del sistema protegidas

El bloque “Páginas del Sistema” contiene vistas predeterminadas críticas (checkout, invoice, budget, soon, form, blog, docs). Estas páginas:

• No se pueden renombrar ni eliminar.
• Incluyen secciones dinámicas que garantizan el funcionamiento de la tienda, facturación, blog y documentación.
• Permiten agregar nuevas secciones encima o debajo para personalizar el diseño sin romper la lógica principal.

2.3 Biblioteca multimedia integrada

Integra el File Manager del panel directamente en el flujo de trabajo. Desde aquí puedes:

• Subir imágenes, videos, documentos y administrar carpetas.
• Renombrar, eliminar y obtener la URL optimizada para insertar directamente en tu código.
• Aprovechar la optimización automática de imágenes y el almacenamiento seguro en la nube.

2.4 Barra de herramientas y presencia en tiempo real

En la parte superior encontrarás:

• Breadcrumb jerárquico: muestra la ubicación actual (Módulo → Página → Sección) para orientarte rápidamente.
• Botón Guardar con acceso directo (Ctrl + S), deshacer (Ctrl + Z) y rehacer (Ctrl + Y).
• Menú Archivo: abre acceso a código general (head, body_start, body_end, CSS global y JavaScript global), solicitudes de publicación, historial, snapshots, activación de publicación automática y traducción automática cuando esté disponible.
• Panel de usuarios conectados en tiempo real: controla quién está editando el sitio. Ves cuántos usuarios están activos, sus iniciales, correos y el tiempo conectado. Ideal para coordinar equipos distribuidos y evitar conflictos.

2.5 Editor de código con pestañas inteligentes

El editor se basa en el mismo motor de VS Code y ofrece:

• Pestañas por lenguaje (HTML, CSS, JS) y pestañas ocultas para editar head, body_start, body_end, main.css y main.js cuando actives los switches correspondientes.
• Modelos independientes por pestaña que conservan historial Undo/Redo aunque cambies de lenguaje.
• Autocompletado y compatibilidad con autocompletado asistido por IA cuando la cuenta tiene habilitado el módulo Copilot.
• Recuperación de posición del cursor y advertencias al cerrar la página si existen cambios sin guardar.

3. Primeros pasos

3.1 Acceso al módulo

1. Ingresa al panel y ve a Sitio Web → Editar Web.
2. Necesitas un rol con permisos de programador para acceder.
3. El sistema registra cada acceso para auditoría y seguridad.

3.2 Crear tu primera página

1. Haz clic en “+” dentro de la sección “Sitio Web”.
2. Completa: Nombre interno: cómo la verás en el panel. Título público: se usa en la etiqueta <title>. Directorio opcional: por ejemplo app/. URL amigable (se genera del título, pero puedes ajustarla). Descripción: meta descripción para SEO.
   1. Nombre interno: cómo la verás en el panel.
   2. Título público: se usa en la etiqueta <title>.
   3. Directorio opcional: por ejemplo app/.
   4. URL amigable (se genera del título, pero puedes ajustarla).
   5. Descripción: meta descripción para SEO.
3. Guarda y la página aparecerá en el navegador con sus atajos.

3.3 Dar forma a la primera sección

El asistente de secciones funciona por pasos:

1. Selecciona si crearás una sección nueva o importarás una existente.
2. Define nombre interno y revisa el código único que se genera automáticamente.
3. Elige el formato de JavaScript (tradicional o module) si lo necesitas.
4. Guarda y comienza a editar el HTML, CSS y JS específicos para esa sección.
5. Si importas una sección, recuerda que todas las ediciones deberán hacerse en la sección original para no romper la referencia.

4. Trabajo diario en el editor

4.1 Edición de código

El editor soporta atajos y asistencias pensadas para acelerar tu trabajo:

• Autoguardado opcional al detectar inactividad y avisos antes de salir de la página.
• Emmet expandido para HTML, CSS y JavaScript.
• Autocompletado híbrido: MGPanel incorpora sugerencias tipo Copilot y, cuando está disponible, sugerencias IA contextuales.
• Validación visual: los errores se resaltan y puedes limpiarlos desde el menú.

4.2 Activar CSS y JS global

Los switches de la barra permiten alternar entre editar código de la sección o el código global del sitio:

• Activa CSS general para modificar @main.css, base compartida por todo el sitio.
• Activa JS general para editar los scripts comunes.
• Tus preferencias se guardan por usuario, por lo que cada miembro del equipo mantiene su configuración favorita.

4.3 Reordenar, duplicar y proteger contenido

• Arrastra secciones para reorganizarlas en tiempo real.
• Duplica páginas completas desde el menú contextual para reutilizar estructuras.
• Marca una página como inicio para que sea la puerta de entrada.
• Las secciones dinámicas o importadas muestran un badge y evitan su eliminación accidental.

4.4 Importar secciones reutilizables

Reutiliza componentes sin duplicar código:

• Importa secciones creadas anteriormente para mantener consistencia.
• Las secciones importadas muestran de dónde provienen (página y sección original).
• Para modificarlas debes editar la sección madre, garantizando que todas las páginas relacionadas se actualicen en conjunto.

4.5 Gestión de traducciones y multiidioma

MGPanel detecta el idioma actual de tu usuario y aplica automáticamente el contenido correcto:

• Si el idioma principal de la cuenta es diferente al idioma en el que trabajas, el editor muestra la traducción disponible.
• Desde el menú Archivo → Auto-traducir puedes habilitar o deshabilitar la traducción automática por sección.
• MGPanel controla el límite de 9,000 caracteres mensuales por cuenta, mostrando el consumo restante en el menú.
• Puedes editar manualmente cada traducción desde la pestaña de idioma correspondiente dentro de la sección.

5. Visualizar tu sitio en distintos entornos

5.1 Vistas disponibles

MGPanel genera tres entornos sincronizados:

• Vista Pública (publicado): lo que ven tus visitantes. Solo cambia cuando publicas.
• Vista Draft (en desarrollo): refleja el estado del editor; ideal para pruebas internas. Comparte cambios específicos con clientes o revisores sin afectar la versión live.

5.2 Botón “Ir a web”

Desde la barra superior del panel (visible en cualquier módulo) puedes abrir tu sitio en una nueva pestaña. Mantienes la sesión activa en MGPanel mientras verificas los cambios.

5.3 Compartir enlaces con tu equipo o clientes

• Usa Draft para validar internamente y recibir retroalimentación rápida; solo quienes tengan el enlace podrán verlo.
• Mantén la vista pública intacta hasta que la versión esté aprobada.

6. Versionado, copias de seguridad y publicación

6.1 Snapshots inteligentes

Los snapshots guardan un punto en el tiempo del sitio. Puedes elegir entre:

• Website completo: captura todo el sitio (recomendado antes de grandes cambios).
• Página actual: guarda solo la página activa con todas sus secciones.
• Sección actual: útil para experimentos puntuales.

Cada snapshot calcula estadísticas (páginas afectadas, caracteres modificados, tamaño) y evita duplicados cuando no existen cambios significativos.

6.2 Historial de versiones y restauración

El historial aparece en un panel lateral y muestra:

• Versiones ordenadas cronológicamente con fecha, autor y tipo de snapshot.
• Posibilidad de restaurar el sitio completo, una página o una sección específica sin tocar el resto.
• Indicadores que muestran si la versión fue publicada, está en borrador o proviene de una restauración.

6.3 Solicitudes de publicación y lanzamiento controlado

• Solicita publicación desde el menú Archivo. El sistema crea automáticamente un snapshot asociado a la solicitud.
• Los roles con permisos elevados (administradores) pueden aprobar o rechazar la publicación desde el módulo de versiones.
• Existe un modo de publicación automática (toggle en el menú) para cuentas que desean que cada guardado se publique directamente tras crear el snapshot correspondiente.

7. Biblioteca multimedia y buenas prácticas

7.1 Organización de archivos

Utiliza nombres descriptivos (inicio-banner.jpg, logo-empresa.svg) y carpetas temáticas para facilitar la búsqueda. Recuerda que el gestor soporta estructura jerárquica completa.

7.2 Insertar recursos en tu código

Selecciona un archivo en la biblioteca y copia la URL pública. Pégala directamente en tus etiquetas <img>, <video> o background-image. MGPanel sirve los archivos desde CDN con optimización automática.

7.3 Recomendaciones de desempeño

• Usa formatos modernos (.webp, .svg) siempre que sea posible.
• Mantén las imágenes por debajo de 500 KB para evitar tiempos de carga altos.
• Limpia archivos no utilizados cada cierto tiempo para liberar espacio.

8. Consejos según tu perfil

8.1 Si eres dueño de negocio o marketer

• Trabaja con plantillas existentes y duplica páginas para mantener consistencia.
• Utiliza estados (mostrar/ocultar) para preparar campañas sin publicarlas.
• Coordina con tu desarrollador usando el historial y snapshots para revisar avances.

8.2 Si eres desarrollador web

• Mantén un snapshot de seguridad antes de grandes refactorizaciones.
• Usa el código general (head, main.css, main.js) para recursos compartidos.
• Aprovecha la traducción automática como punto de partida y ajusta manualmente.
• Si conectas integraciones externas, documenta los cambios clave en el campo de descripción del snapshot para referencia futura.

9. Solución de problemas frecuentes

9.1 No puedo eliminar una sección:

Posible causa: Es una sección dinámica o importada.

Cómo resolverlo: Duplica la sección original si necesitas personalizarla, o elimina la referencia desde la página origen.

9.2 La traducción automática no aparece:

Posible causa:  No esta habilitada desde el modulo de configuración.

Cómo resolverlo: Ve a Configuración -> Sitio web -> Habilitar traducción automática.

9.3 Guardé cambios pero no los veo en producción

Posible causa:  Los cambios están en vista Draft.

Cómo resolverlo: Solicita publicación o activa la publicación automática si cuentas con permisos.

9.4 No puedo editar una página del sistema

Posible causa:  Las páginas protegidas no permiten cambios estructurales.

Cómo resolverlo: Agrega nuevas secciones personalizadas encima o debajo, y usa CSS global para personalización visual.

9.5 El editor no sugiere código

Posible causa: Las sugerencias IA no están habilitadas o hay desconexión.

Cómo resolverlo: Verifica tu conexión, recarga el módulo o consulta al equipo para habilitar Copilot en tu cuenta.

10. Recursos adicionales y soporte

• Pregunta a emyi, tu asistente dentro de MGPanel, para guías paso a paso, recordatorios de comandos y soporte 24/7.
• Si necesitas ayuda avanzada, contacta al equipo de soporte desde el chat de emyi, envía un correo a soporte@mgpanel.co o consulta a tu partner MGPanel.