El webIDE de turtleSpaces es el entorno Logo completo de turtleSpaces, funcionando en tu navegador. Puedes escribir código con bloques o como texto, ejecutarlo al instante y ver cómo tus tortugas dibujan en 3D justo al lado. No hay que instalar nada ni hace falta una cuenta para empezar.
La disposición
La pantalla se divide en dos:
- A la izquierda están la cabecera del proyecto y una fila de pestañas de panel: Blocks (bloques), Text (texto), Help (ayuda), History (historial), Printer (impresora) y Debug (depuración). Si has iniciado sesión, aparece una séptima pestaña, Claude, con un asistente de IA.
- A la derecha está la vista 3D donde dibujan tus tortugas, con la consola debajo y los controles de ejecución en la parte inferior.
La barra de menús recorre la parte superior.
Los paneles
Blocks (bloques)
Crea programas arrastrando bloques desde la paleta de la izquierda. Los bloques se agrupan por categorías (movimiento y postura, lápiz y color, condicionales y flujo, procedimientos, disparadores y más), y la paleta se puede buscar. Los desplegables sobre el lienzo eligen la tortuga y el procedimiento que editas, y el botón ▶ lo ejecuta. Los cambios hechos con bloques se aplican al momento.
Bloques y texto son dos vistas del mismo programa: lo que construyas con bloques se puede abrir como texto, y al revés.
Text (texto)
Un editor de código con resaltado de sintaxis, sangría automática y autocompletado. El desplegable junto a las pestañas elige qué editas: Full Workspace muestra todas las tortugas y procedimientos, o puedes elegir un solo procedimiento.
Las ediciones del editor de texto se aplican al pulsar Update. Revert descarta lo editado desde el último Update. Si prefieres no pulsar Update cada vez, activa Settings › Auto Update, que aplica los cambios cuando el editor pierde el foco.
Bajo el editor están Save, Open, Publish, Fork y Share (consulta Guardar y compartir).
Help (ayuda)
La referencia de comandos integrada. Busca una primitiva o recórrelas por categoría e insértalas en tu código. Hay además pestañas sobre colores, la cámara, la interfaz, la sintaxis de Logo y los mensajes de error. El mismo material está en este sitio, en la Referencia.
History (historial)
Una lista de los comandos que has escrito en la consola. Haz clic en una línea para devolverla al prompt, lista para editarla o ejecutarla de nuevo.
Printer (impresora)
turtleSpaces tiene una impresora virtual. Lo que tu programa imprima en ella aparece aquí, donde puedes guardarlo, imprimirlo o borrarlo. Se activa y desactiva en Settings › Printer.
Debug (depuración)
Muestra lo que hace tu programa mientras se ejecuta: Errors (errores), Containers (tus variables), States (la posición, el lápiz y demás de cada tortuga) y Loops (los bucles en ejecución).
La consola
La consola bajo la vista 3D funciona como un intérprete Logo clásico: escribe un comando, pulsa Intro y se ejecuta al instante. El prompt indica con qué tortuga estás hablando, y el texto que imprime tu programa también aparece aquí.
Controles de ejecución
La barra de la parte inferior controla tu programa:
- Backtrack deshace el último paso de la tortuga.
- El desplegable de procedimiento y Run inician un procedimiento (Run te pide sus entradas si las necesita). El desplegable Inline a su lado elige cómo se ejecuta.
- Pause detiene el programa un momento y Continue lo reanuda.
- El botón del ojo resalta cada línea de código mientras se ejecuta, para que puedas seguirla.
- Stop termina el programa.
- Reset devuelve las tortugas a su inicio; púlsalo dos veces seguidas para reiniciarlo todo.
El botón de la bandera, arriba a la derecha, ejecuta el procedimiento de bandera de tu proyecto, como la bandera verde de Scratch.
Si un programa da un error mientras tienes la sesión iniciada, Shelly la tortuga aparece y ofrece que Claude te explique qué ha fallado, ya sea el error en general o usando tu código. La respuesta aparece en el panel de Claude.
Los menús
- File: empieza un proyecto nuevo a partir de una plantilla, abre uno de tus proyectos guardados, explora proyectos publicados o modelos 3D, y guarda. Los submenús Upload y Download importan proyectos, imágenes, sonidos, modelos y datos, y exportan tu trabajo como imagen PNG, modelo STL para impresión 3D, vídeo MP4 o GIF animado, o una grabación WebGL reproducible. Share As convierte tu proyecto en un modelo visualizable o en una página jugable.
- Editor: buscar, tamaño de letra, sangría, ordenar el espacio de trabajo y pasar código entre el editor y la consola.
- Turtle: inicio, borrar la pantalla, retroceder o reiniciar, y cambiar el modelo y el tamaño de la tortuga.
- Settings: tema claro u oscuro, idioma, fuente de la consola, sonido, la impresora, Auto Update, autocompletado y Live Coding.
- View: mover la cámara, órbita automática, relación de aspecto, mostrar los ejes y pantalla completa.
- Examples: abre el navegador de ejemplos.
- Help: vuelve a mostrar la visita guiada de Shelly y enlaza con la visita, la referencia, los libros, los tutoriales y la comunidad de este sitio.
- Feedback: envíanos un comentario desde la propia aplicación.
El webIDE está disponible en English, 日本語, Français, Español y Polski; cambia el idioma en Settings.
A la derecha de la barra de menús está el menú de usuario: crea una cuenta o inicia sesión y, una vez dentro, abre tu perfil y tus grupos o cierra la sesión. El botón ◥ de al lado cambia a pantalla completa.
La cabecera del proyecto
Sobre los paneles puedes escribir el título del proyecto. A su lado, by muestra quién lo creó (se rellena solo). Sobre la vista 3D hay una descripción de una línea que puedes editar.
Guardar y compartir
- Save guarda tu proyecto en tu cuenta de turtleSpaces (necesitas haber iniciado sesión); Open carga uno de tus proyectos guardados.
- Fork guarda una copia del proyecto actual como un proyecto nuevo tuyo.
- Publish hace público un proyecto guardado para que otras personas lo encuentren en la galería de publicados. Puedes etiquetarlo por tipo, dificultad y categoría, y actualizarlo o despublicarlo más tarde.
- Share crea un enlace a un modelo 3D visualizable o a una versión jugable de tu proyecto.
Las galerías
Dos galerías se abren a pantalla completa dentro del webIDE:
- Proyectos publicados: proyectos compartidos por la comunidad. Play ejecuta uno; Remix abre tu propia copia en el IDE para que la modifiques.
- Ejemplos: programas de ejemplo que puedes filtrar por tipo, dificultad y categoría.
Mover la cámara
En la vista 3D:
- Arrastrar con el botón izquierdo orbita la cámara alrededor de la escena.
- Arrastrar con el botón derecho arriba y abajo acerca o aleja la cámara; a izquierda y derecha la gira.
- La rueda del ratón acerca y aleja.
- Arrastrar con el botón central, o con ambos botones, desplaza la vista.
Con un ratón de un botón o un trackpad, Ctrl+clic hace de clic derecho. View › Camera Controls tiene un recordatorio.
Por dentro
El webIDE ejecuta el mismo motor Logo que la versión de escritorio de turtleSpaces, escrito en Go y compilado a WebAssembly. La interfaz está hecha con React, Radix UI y CodeMirror 6, y el dibujo se hace con WebGL en un worker en segundo plano, para que la página siga respondiendo mientras tus tortugas trabajan.
La primera descarga del motor es grande. Después, tu navegador guarda una copia, así que las visitas siguientes arrancan mucho más rápido, y una descarga interrumpida continúa donde se quedó.