BCode Pro no es solo un editor de código; es un entorno de desarrollo integrado (IDE) que vive en tu navegador. Ha sido diseñado para ofrecer la potencia y flexibilidad de herramientas de escritorio como VS Code, pero con la accesibilidad y las ventajas de la nube.
Nuestra filosofía es simple: un flujo de trabajo rápido, integrado y sin fricciones. Olvídate de instalaciones complejas y configuraciones de entorno. Con BCode Pro, puedes empezar a codificar en segundos, sincronizar tu trabajo a través de Firebase, colaborar usando GitHub y potenciar tu creatividad con un asistente de IA.
Esta guía te convertirá en un experto de BCode Pro.
Nota: BCode Pro funciona completamente en tu navegador, no requiere instalación y se ejecuta en cualquier dispositivo con conexión a Internet.
Para desbloquear todo el potencial de BCode Pro, como la sincronización en la nube y las funciones Pro, necesitas una cuenta.
Nota de Seguridad Importante: Para mantener la integridad del servicio y prevenir abusos, nuestro sistema limita la creación de cuentas a una por red o dispositivo. Si encuentras problemas al registrarte, asegúrate de no estar conectado a través de una VPN.
Ubicado en la barra lateral izquierda, es tu centro de control para todos tus proyectos.
Crea una carpeta de proyecto en el nivel más alto (raíz). Es el punto de partida para cualquier proyecto nuevo.
Te permite seleccionar una carpeta de tu computadora y subirla completamente al editor.
Te permite seleccionar una de tus carpetas de proyecto y descargarla a tu computadora como un archivo .zip comprimido.
Al pasar el cursor sobre una carpeta o archivo en el explorador, aparecerán pequeños iconos de acción a la derecha:
(Solo en carpetas) Añade una nueva carpeta DENTRO de la carpeta sobre la que tienes el cursor.
(Solo en carpetas) Crea un nuevo archivo DENTRO de la carpeta sobre la que tienes el cursor.
Cambia el nombre del archivo o carpeta seleccionado.
Borrar permanentemente el archivo o carpeta. ¡Esta acción es irreversible!
El espacio central es donde escribirás tu código. Usamos el motor de Monaco Editor, el corazón de Visual Studio Code, lo que te da acceso a una experiencia de edición profesional.
Cada archivo que abres se muestra en una pestaña en la parte superior. Esto te permite saltar entre archivos abiertos con un solo clic.
Si modificas un archivo y no lo has guardado, el nombre en la pestaña aparecerá en cursiva y con un color ámbar.
Puedes cerrar una pestaña individualmente con el icono x o cerrar todas las pestañas a la vez con el botón correspondiente.
Este panel, que puedes mostrar u ocultar con el botón correspondiente de la barra de acciones, es crucial para la depuración y ejecución.
Aquí verás la salida de tus scripts de Python. Si tu script imprime algo (print()) o pide datos (input()), todo ocurrirá aquí.
Esta pestaña captura todos los mensajes de la consola de JavaScript (console.log, console.error, etc.) y los errores que ocurran durante la ejecución.
(Próximamente) Esta pestaña se integrará con herramientas de análisis de código (linters) para mostrarte errores de sintaxis y malas prácticas.
Esta columna de botones flotantes a la derecha te da acceso con un solo clic a las funciones más importantes.
Guarda todos tus cambios y abre la vista previa de tu proyecto web.
Este botón reemplaza al de previsualización cuando tienes un archivo .py activo. Ejecuta tu script de Python.
Muestra u oculta el panel inferior.
Abre el panel de chat con BCode AI, tu asistente de codificación.
Abre un panel lateral con un selector de color y botones para insertar rápidamente caracteres comunes como `{}`, `[]`, `()`, etc.
Para usar BCode Pro eficazmente, es útil entender cómo gestiona internamente tus datos. Todo se almacena en dos objetos principales de JavaScript:
projectStructure:Este objeto es un árbol que representa la jerarquía de tus carpetas y archivos. Cada elemento (nodo) en el árbol tiene esta forma:
{
name: "nombre_del_archivo_o_carpeta",
type: "file" | "folder",
path: "ruta/completa/al/elemento",
children: [ /* Un array de más objetos como este si es una carpeta */ ]
}folderCode:Este objeto actúa como una base de datos en memoria para el contenido de todos tus archivos. Es un diccionario donde las claves son las rutas de las carpetas, y los valores son otros diccionarios que mapean nombres de archivo a su contenido.
folderCode = {
"mi-proyecto": {
"index.html": "<!DOCTYPE html>...",
"script.js": "console.log('Hola');"
},
"mi-proyecto/css": {
"styles.css": "body { color: red; }"
}
};Esta estructura permite un acceso muy rápido al contenido de cualquier archivo sin tener que buscarlo recursivamente en projectStructure cada vez.
Cuando creas un archivo, BCode Pro (a través de modelos.js) genera contenido de plantilla para acelerar tu desarrollo.
Usa el botón correspondiente en la cabecera del explorador. Esto añade un nuevo objeto de tipo folder al nivel superior de projectStructure.
Usa el icono contextual en una carpeta existente. Esto añade un nuevo objeto de tipo folder al array children de la carpeta padre.
Usa el icono contextual en una carpeta. Esto hace dos cosas: añade un nuevo objeto de tipo file al array children de la carpeta padre en projectStructure y añade una nueva entrada en folderCode con el contenido de la plantilla correspondiente.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título de la página</title>
</head>
<body>
</body>
</html>/* styles.css */// script.jsAl seleccionar una carpeta de tu PC, BCode Pro lee su estructura y el contenido de cada archivo, y luego reconstruye los objetos projectStructure y folderCode en el editor.
Al seleccionar una carpeta para exportar, BCode Pro lee la estructura y el contenido de projectStructure y folderCode, los empaqueta usando una librería (JSZip) y te ofrece el archivo .zip para descargar.
Mientras escribes, el editor te ofrecerá sugerencias. Para HTML, puedes escribir div y presionar Enter para autocompletar <div></div>. Para Python, puedes escribir def y te sugerirá la estructura completa de una función.
El editor reconoce automáticamente el lenguaje de programación y aplica el resaltado de sintaxis apropiado, haciendo que tu código sea más legible y fácil de depurar.
Guarda el estado actual de todo tu proyecto en la memoria local o en Firebase si has iniciado sesión.
Un atajo de productividad que guarda y ejecuta la previsualización en un solo paso.
Comenta o descomenta la línea actual o las líneas seleccionadas con el formato de comentario correcto para el lenguaje del archivo.
Formatea automáticamente todo el documento para que siga un estilo de código limpio y consistente.
Cuando presionas "Ejecutar", BCode Pro no sube tus archivos a un servidor. En su lugar, realiza un proceso inteligente en el navegador:
Este método es extremadamente rápido y te permite ver tus cambios al instante.
Abrir en Nueva Pestaña: En el modal de Configuración > Editor, activa "Abrir El Resultado En Otra Pestaña". La próxima vez que ejecutes, la vista previa se abrirá en una nueva ventana del navegador, lo que es perfecto si usas dos monitores.
Gracias a la tecnología Pyodide, BCode Pro puede ejecutar Python directamente en tu navegador.
Si tu script de Python utiliza la función input("Pregunta") para solicitar datos al usuario, BCode Pro lo detectará. Pausará la ejecución y mostrará un campo de texto en la terminal para que puedas escribir tu respuesta. Al presionar Enter, la ejecución continuará con el valor que ingresaste.
Nota sobre Rendimiento: La primera vez que ejecutas un script de Python, BCode Pro necesita descargar el entorno de Pyodide (unos 20 MB). Las ejecuciones posteriores serán casi instantáneas porque el entorno ya estará en la caché de tu navegador.
Accede al modal de configuración con el icono de engranaje para personalizar tu entorno.
Sube una imagen de fondo para tu editor y ajusta la opacidad del color de fondo para que la imagen sea visible. También puedes cambiar la fuente, el tamaño y el interlineado.
Elige entre varios temas predefinidos. Si tienes una suscripción Pro, puedes desbloquear los selectores de color para crear tu propio tema, personalizando cada elemento de la sintaxis.
¡Dale vida a tu editor! En la pestaña "Mascotas" del modal de configuración, puedes seleccionar hasta 5 compañeros virtuales que te acompañarán mientras codificas.
Estas mascotas caminarán, correrán y descansarán en la parte inferior de tu editor y en la barra de estado, reaccionando a tus acciones y añadiendo un toque divertido a tu sesión de trabajo.
BCode Pro se conecta directamente a GitHub para que puedas gestionar repositorios sin salir del editor.
Importante: Para guardar cambios, necesitas un token de acceso de GitHub con permisos de repo. Debes configurar este token en la configuración del editor.
Accede al asistente con el botón del robot.
Pídele que cree componentes. Por ejemplo: "Crea un formulario de contacto con HTML y CSS". La IA te dará el código en pestañas separadas.
Pega un trozo de código y pregunta: "¿Qué hace este código?" o "Encuentra el error en este bucle".
Inyección Automática (Función Pro): En Configuración > Avanzado, activa esta opción. El código generado por la IA se insertará automáticamente en los archivos correspondientes de tu proyecto, ahorrándote el copiar y pegar.
Desde el modal de GitHub, puedes compartir tus proyectos web con un solo clic.
Obtendrás una URL de htmlpreview.github.io que renderiza tu página al instante.
Genera una URL corta y personalizable (ej. bcode.pro/mi-portfolio).
Genera un enlace especial que rastrea cuántas personas lo visitan y en qué elementos de tu página hacen clic. Podrás ver estas estadísticas en un dashboard.
BCode Pro es más que un editor. Ofrecemos herramientas adicionales para complementar tu flujo de trabajo.
Integrado en la función de compartir y también disponible como una herramienta independiente, nuestro acortador te permite crear enlaces cortos, limpios y personalizables. Ideal para compartir en redes sociales o para campañas de marketing.
Los usuarios registrados pueden ver estadísticas de clics para cada enlace que crean.
Desde la página del acortador, puedes acceder a nuestro generador de códigos QR. Convierte cualquier URL (larga o acortada) en un código QR escaneable, perfecto para material impreso, presentaciones o para compartir rápidamente a dispositivos móviles.
R: Sí. Si no inicias sesión, tu código se guarda solo en tu navegador. Si inicias sesión, se sincroniza de forma segura con Firebase, una plataforma de Google. Nadie más puede acceder a tu código.
R: Sí. Una vez que la página ha cargado, puedes seguir trabajando sin conexión. Tus cambios se guardarán en el navegador. Cuando te vuelvas a conectar, si has iniciado sesión, los cambios se sincronizarán con la nube.
R: La primera vez que ejecutas un script de Python, BCode Pro necesita descargar el entorno de Pyodide (unos 20 MB). Las ejecuciones posteriores serán casi instantáneas porque el entorno ya estará en la caché de tu navegador.
R: BCode Pro tiene una función de autoguardado que se activa cada pocos segundos. Es muy probable que tu trabajo más reciente ya esté guardado, ya sea localmente o en la nube.