> ## Documentation Index > Fetch the complete documentation index at: https://support.labex.io/llms.txt > Use this file to discover all available pages before exploring further. # Interfaz WebIDE de LabEx VM > El WebIDE de LabEx proporciona un entorno de desarrollo moderno, similar a VS Code, para tareas de codificación. Construido sobre Ubuntu 22.04, ofrece una interfaz familiar para escribir, compilar y ejecutar código en múltiples lenguajes de programación. ## Vista previa de WebIDE WebIDE Preview El entorno WebIDE es particularmente útil para: 1. Escribir y depurar código en varios lenguajes de programación (Java, JavaScript, Python, etc.) 2. Proyectos de desarrollo web con capacidades de vista previa en vivo, consulta [Crea tu primera página HTML en WebIDE ](https://labex.io/tutorials/html-create-your-first-html-page-in-webide-451041) 3. Administrar archivos y directorios del proyecto a través de una interfaz intuitiva 4. Operaciones de terminal integradas para tareas de línea de comandos ## Diseño del entorno La interfaz WebIDE consta de varios componentes clave: 1. Barra lateral izquierda: * Explorador de archivos para la navegación del proyecto * Funcionalidad de búsqueda * Control de código fuente para operaciones Git * Panel de extensiones 2. Área del editor: Espacio de trabajo de codificación principal 3. Panel inferior: Terminal, problemas y salida 4. Barra de estado: Acceso rápido a la configuración y vista previa en vivo 5. Barra de menú superior: Archivo, Editar, Ver y otras opciones ## Acceso a la terminal Puedes abrir la terminal de dos maneras: 1. Haz clic en el icono en la esquina inferior izquierda y cambia a la pestaña Terminal; Terminal Access 2. Usa el menú superior: Terminal > Nueva terminal Terminal Access ## Vista previa de HTML Para previsualizar tu archivo HTML: 1. En el WebIDE, haz clic en el botón "Go Live" en la esquina inferior derecha. Go Live button in WebIDE 2. Se abrirá una nueva pestaña del navegador con tu página HTML renderizada. HTML page rendered in browser tab 3. O, puedes hacer clic en la pestaña "Web 8080" para abrir la vista previa. WebIDE Web 8080 tab preview 4. Si tu proyecto está en un subdirectorio, puedes acceder a él haciendo clic en el nombre del subdirectorio en el explorador, luego previsualizará automáticamente el archivo `index.html` en ese directorio. WebIDE subdirectory preview 5. Si tu proyecto tiene múltiples archivos HTML, incluido `index.html`, puedes agregar el nombre del archivo a la URL para previsualizarlo directamente. Por ejemplo, `https://xxx.labex.io/another-file.html`. WebIDE multiple HTML files preview 6. Puedes abrir la vista previa en una nueva pestaña haciendo clic en el botón "Abrir en una nueva pestaña". Abrirá la vista previa en una nueva pestaña del navegador. WebIDE Open in New Tab "Go Live" automáticamente: * Inicia un servidor web * Proporciona actualizaciones en tiempo real a medida que modificas tu código > Consejos: LabEx VM aloja la vista previa en el puerto 8080. Puedes compartir el enlace de vista previa con otros para mostrar tu trabajo. Después de que tu máquina virtual de laboratorio se detenga, el enlace de vista previa dejará de funcionar. ## Escenarios de uso Este es un laboratorio de Java de muestra que demuestra cómo escribir, compilar y ejecutar un programa Java simple utilizando el WebIDE de LabEx. Trabajando con proyectos Java en WebIDE: Java Development 1. Crea un nuevo archivo Java a través del explorador 2. Escribe tu código Java con resaltado de sintaxis 3. Compila y ejecuta en la terminal: ```bash theme={null} javac MyClass.java java MyClass ``` 4. Visualiza los errores y advertencias de compilación en tiempo real Este es un laboratorio de HTML de muestra que demuestra cómo crear una página web simple usando el WebIDE de LabEx. Para tareas de desarrollo frontend: Go Live Button 1. Crea archivos HTML, CSS y JavaScript 2. Haz clic en el botón "Go Live" en la esquina inferior derecha 3. Accede a tu página web a través de: * Pestaña Web 8080 en la parte superior de la LabEx VM * Crea nuevas pestañas de vista previa de puerto usando el botón + Nota: Tu proyecto se implementa automáticamente en una URL pública en el servidor LabEx, lo que lo hace accesible a través de las pestañas Web. Este es un desafío de Python de muestra que demuestra cómo procesar nombres de astronautas usando el WebIDE de LabEx. Para la programación en Python: Python Development 1. Crea un archivo Python en el explorador 2. Escribe tu código Python con: * Resaltado de sintaxis * Autocompletado de código * Detección de errores 3. Ejecuta tu script en la terminal: ```bash theme={null} python3 script.py ``` 4. Usa el depurador integrado para la ejecución paso a paso ## Preguntas frecuentes LabEx VM implementa automáticamente tus proyectos web: Web Preview 1. Puerto predeterminado 8080: * Haz clic en la pestaña "Web 8080" en la parte superior de la LabEx VM * Tu aplicación será accesible a través de una URL pública 2. Puertos personalizados: * Haz clic en el botón + para crear nuevas pestañas de vista previa de puerto * Cada puerto obtiene su propia URL pública * Útil para ejecutar múltiples servicios (por ejemplo, frontend y backend) Nota: A diferencia del desarrollo local, no accedes a localhost directamente ya que LabEx se ejecuta en la nube. Atajos comunes en el WebIDE: * **Operaciones de archivo** * Nuevo archivo: Ctrl+N * Guardar: Ctrl+S * Buscar: Ctrl+F * Reemplazar: Ctrl+H * **Controles del panel** * Alternar barra lateral: Ctrl+B * Alternar terminal: Ctrl+\` * Paleta de comandos: Ctrl+Shift+P * **Características del editor** * Multicursor: Alt+Clic * Seleccionar todas las apariciones: Ctrl+Shift+L * Formatear documento: Shift+Alt+F Sí, puedes instalar herramientas adicionales usando el administrador de paquetes de Ubuntu: ```bash theme={null} sudo apt update sudo apt install package-name ``` Para administradores de paquetes específicos del lenguaje: * Node.js/npm: ```bash theme={null} npm install package-name ``` * Python/pip: ```bash theme={null} pip install package-name ``` Recuerda que las instalaciones son temporales y se restablecerán cuando finalice tu sesión. El WebIDE proporciona varias formas de administrar archivos: 1. **Cargar archivos:** * Arrastra y suelta archivos en el explorador * Usa la carga/descarga después de hacer clic derecho en el explorador Upload Files 2. **Descargar archivos:** * Haz clic derecho en el archivo en el explorador * Selecciona "Descargar" 3. **Copiar/Pegar:** * El contenido de texto se puede copiar directamente entre tu máquina local y el WebIDE * Los archivos binarios deben usar las funciones de carga/descarga Recuerda que todos los archivos son temporales y se perderán cuando finalice tu sesión.