Saltar al contenido principal

Editor de codigo

El corazon de la plataforma Tutor IDE es un editor de codigo profesional que funciona directamente en el navegador. El alumno no necesita instalar nada: abre la pagina, inicia sesion y puede empezar a escribir codigo de inmediato.

Un editor de nivel profesional​

El editor de Tutor IDE utiliza el mismo motor que impulsa Visual Studio Code — la herramienta mas popular entre los programadores profesionales del mundo. Los alumnos trabajan en un entorno real y profesional, pero en una version adaptada para el aprendizaje.

Resaltado de sintaxis​

El codigo se muestra en colores que ayudan a distinguir etiquetas HTML, propiedades CSS e instrucciones JavaScript. Esto facilita detectar errores y comprender la estructura del codigo.

Sugerencias y autocompletado​

El editor sugiere nombres de etiquetas HTML, propiedades CSS y funciones JavaScript mientras escribes. Cierra automaticamente parentesis, comillas y etiquetas — menos errores tipograficos, mas creacion.

Emmet — escritura rapida de HTML​

El editor es compatible con Emmet — un sistema de abreviaturas que acelera la escritura de codigo HTML. Por ejemplo, al escribir div.container>h1+p y presionar Tab, se despliega automaticamente en una estructura HTML completa con las etiquetas y clases correspondientes. Es una herramienta que los programadores profesionales usan a diario.

Atajos de teclado​

El editor incluye un amplio conjunto de atajos de teclado que agilizan el trabajo:

  • Ctrl+S / Cmd+S — guardar archivo
  • Ctrl+Enter / Cmd+Enter — ejecutar codigo (Run)
  • Ctrl+Z / Cmd+Z — deshacer cambios
  • Ctrl+C / Ctrl+V — copiar y pegar

Puedes ver la lista completa de atajos presionando Cmd+? (Mac) o Ctrl+? (Windows).

Tipos de proyecto​

Tutor IDE admite tres tipos de proyecto distintos, cada uno con un entorno de trabajo adaptado:

HTML — paginas web​

Crea paginas web con HTML, CSS y JavaScript. El editor muestra una vista previa en vivo de la pagina junto al codigo — cada cambio es visible al instante despues de guardar el archivo.

Python — programacion general​

Los proyectos de Python se ejecutan directamente en el navegador gracias a Pyodide — un interprete completo de Python compilado a WebAssembly. Los alumnos pueden escribir scripts, trabajar con bucles, condicionales, funciones y estructuras de datos — sin instalar nada en su ordenador.

Python Turtle — graficos de tortuga​

Un modo especial para proyectos que utilizan la biblioteca Turtle. El editor detecta automaticamente el codigo que usa tortuga y muestra un lienzo grafico dinamico junto al codigo. Los alumnos pueden dibujar formas, patrones y animaciones con comandos simples — una forma excelente de aprender programacion de manera visual.

Terminal de Python (REPL)​

Tutor IDE incluye un terminal de Python integrado basado en Pyodide. Los alumnos pueden escribir comandos de Python y ver los resultados de inmediato — una forma perfecta de experimentar con codigo, probar expresiones y aprender paso a paso. El terminal funciona completamente en el navegador, sin necesidad de conectarse a un servidor.

Vista previa en vivo​

Junto al editor se muestra una vista previa de la pagina. El alumno escribe codigo a la izquierda y ve el resultado a la derecha al instante — cada cambio en HTML o CSS aparece inmediatamente en la vista previa al guardar el archivo.

Esto permite experimentar y aprender por prueba y error — "cambio el color a rojo y veo que pasa".

Vista previa en marcos de dispositivos​

El editor ofrece vistas previas del proyecto en marcos que simulan distintos dispositivos — escritorio, tablet y movil. Esto permite al alumno comprobar como se ve su pagina en diferentes pantallas sin salir de la plataforma. Es una forma practica de aprender diseno web responsivo.

Consola​

El panel de consola captura y muestra los mensajes del codigo JavaScript (por ejemplo, los resultados de console.log). Gracias a esto, el alumno puede probar sus scripts y seguir lo que hace su codigo — sin necesidad de abrir las herramientas de desarrollo del navegador.

Arbol de archivos​

Cada proyecto tiene una estructura clara de archivos y carpetas visible en el panel lateral:

  • Iconos de archivo — HTML, CSS, JavaScript, Python, imagenes y otros tipos de archivo tienen sus propios iconos, lo que facilita identificarlos
  • Carpetas — los alumnos pueden organizar archivos en carpetas, como en un proyecto real
  • Arrastrar y soltar — los archivos se pueden mover entre carpetas con el raton
  • Archivo principal — index.html esta marcado como punto de inicio del proyecto

Gestion de archivos​

  • Crear archivos y carpetas — el alumno anade nuevos archivos HTML, CSS, JS o Python con un solo clic
  • Subir archivos binarios — imagenes, fuentes, PDF, videos y archivos de audio se pueden subir directamente al proyecto
  • Arrastrar y soltar para subir — los archivos se pueden soltar directamente en el arbol de archivos para subirlos al proyecto (drag & drop)
  • Eliminar — los archivos y carpetas innecesarios se pueden eliminar facilmente

Busqueda en el codigo​

El editor incluye una funcion de busqueda en archivos integrada que permite encontrar rapidamente fragmentos de codigo, nombres de variables, selectores CSS o etiquetas HTML en todo el proyecto. Es una herramienta indispensable en proyectos grandes, donde revisar archivos manualmente llevaria demasiado tiempo.

Paneles redimensionables​

La interfaz del editor esta compuesta por paneles de tamano ajustable — el alumno puede arrastrar el separador entre el editor y la vista previa para adaptar las proporciones a sus necesidades. Quien necesite mas espacio para el codigo puede ampliar el editor; quien prefiera una vista previa mas grande puede expandir ese panel. Los tamanos de los paneles estan basados en la biblioteca react-resizable-panels.

Editor movil​

Tutor IDE tambien funciona en dispositivos moviles. En pantallas de menos de 768 px, el editor cambia a un diseno de un solo panel con una barra de pestanas inferior:

  • Codigo — vista del editor de codigo
  • Vista previa — vista previa de la pagina o resultado de Python
  • Consola — panel de consola JavaScript

El arbol de archivos se abre como un panel lateral deslizable. Esto permite a los alumnos trabajar en sus proyectos incluso desde un telefono o tablet.

Busqueda de proyectos​

En el panel de control, el alumno puede encontrar rapidamente sus proyectos gracias al buscador y al filtrado por etiquetas. Esto es especialmente util cuando el numero de proyectos crece.

Espacio en disco​

Cada alumno tiene un espacio en disco asignado para sus proyectos. Su tamano depende del plan de la organizacion — desde 25 MB en el plan gratuito hasta 100 MB en el plan escolar. El uso actual del espacio es visible en el panel de control.

Exportar proyecto​

El alumno puede descargar todo el proyecto como archivo ZIP a su ordenador. El archivo contiene todos los archivos del proyecto con la estructura de carpetas preservada — listo para abrir en cualquier editor o subir a otro hosting.