🧪 Editor en Vivo: Escribe y Renderiza
Escribe código en sintaxis Scratch (Español, Català o Inglés) y observa la generación del SVG vectorial en tiempo real:
Estado del motor: ● Listo
Cargar ejemplos de los proyectos del curso:
📝 Sintaxis Scratch (Texto)
Consejo: Usa
@greenFlag para bandera, [desplegable v] y fin para cerrar bucles.
0 líneas
🖼️ Vista Previa SVG (scratchblocks)
Renderizado: 0 ms
Vectorial sin pérdida de resolución
📄 Integración Directa en Artículos y Tutoriales
Cómo se escribiría el contenido en las páginas del curso. Solo se añade una etiqueta <pre class="blocks"> con el texto en español y la librería lo convierte automáticamente al cargar la página:
1. Control de Salto (Trampolín)
Automático
al hacer clic en @greenFlag
ir a x: (-132) y: (-57)
repetir (3)
sumar a y (12)
esperar (0.05) segundos
sumar a y (-12)
esperar (0.05) segundos
fin
Ver código HTML fuente
<pre class="blocks">
al hacer clic en @greenFlag
ir a x: (-132) y: (-57)
repetir (3)
sumar a y (12)
esperar (0.05) segundos
sumar a y (-12)
esperar (0.05) segundos
fin
</pre>
2. Detección y Marcador (Robot)
Automático
si <¿tocando [Robot v]?> entonces
sumar a [Puntos v] (1)
iniciar sonido [Pop v]
si no
sumar a [Vidas v] (-1)
fin
Ver código HTML fuente
<pre class="blocks">
si <¿tocando [Robot v]?> entonces
sumar a [Puntos v] (1)
iniciar sonido [Pop v]
si no
sumar a [Vidas v] (-1)
fin
</pre>
3. Animación y Operadores
Automático
por siempre
ir a x: (número aleatorio entre (-200) y (200)) y: (160)
mostrar
repetir hasta que <(posición en y) < (-150)>
sumar a y (-6)
fin
fin
Ver código HTML fuente
<pre class="blocks">
por siempre
ir a x: (número aleatorio entre (-200) y (200)) y: (160)
mostrar
repetir hasta que <(posición en y) < (-150)>
sumar a y (-6)
fin
fin
</pre>
📊 Comparativa: scratchblocks vs HTML/CSS Artesanal
Análisis de viabilidad para el portal de la asignatura PIAR:
| Criterio | scratchblocks (Renderizado Cliente) | Bloques en HTML/CSS artesanal |
|---|---|---|
| Fidelidad visual | ⭐ 100% idéntico a Scratch 3.0 oficial (muescas de encaje, iconos oficiales, sombreados exactos en SVG). | Aproximado (requiere muchos ajustes CSS por tipo de bloque y muesca). |
| Facilidad para redactar tutoriales | Muy alta: Solo escribes texto plano en un <pre class="blocks">. Modificar un valor toma 2 segundos. |
Baja: Requiere decenas de divs anidados (.sb-stack, .sb-block, .sb-c-body, etc.). Muy propenso a errores al editar. |
| Soporte multiidioma (ES / CA / EN) | Excelente: Basta con cambiar languages: ['es'] o ['ca'] y el motor traduce o interpreta automáticamente la sintaxis. |
Complicado: Habría que reescribir manualmente cada fragmento HTML por idioma. |
| Dependencias y Conectividad | 100% Local / Offline: Los archivos scratchblocks.min.js y translations-all.js ya están guardados en el proyecto (no requiere internet ni CDNs). |
100% Local (solo CSS). |
| Interactividad y Copiado | Permite copiar el código como texto, exportar el SVG y zoom limpio sin pixelado. | Solo visualización básica en HTML. |
| Rendimiento | Ligero: Renderiza más de 20 pilas de bloques en menos de 15 ms en cualquier dispositivo. | Instantáneo (ya está en el DOM inicial). |
Conclusión y Recomendación:
scratchblocks es la solución ideal para PIAR: ahorra horas de maquetación HTML manual, garantiza que los alumnos vean exactamente los bloques idénticos al editor oficial de Scratch 3.0 en español, y permite a los profesores añadir nuevos proyectos escribiendo código en texto normal.
📖 Chuleta de Sintaxis Scratchblocks en Español
Estructuras habituales para escribir bloques rápidamente:
Eventos e Iconos
al hacer clic en @greenFlag
al presionar tecla [espacio v]
al recibir [mensaje1 v]
enviar [mensaje1 v]
Movimiento y Apariencia
mover (10) pasos
ir a x: (0) y: (0)
sumar a y (10)
girar @turnRight (15) grados
decir [¡Hola!] por (2) segundos
Control y Bucles
repetir (10)
...
fin
por siempre
si <¿tocando [borde v]?> entonces
...
fin
fin
Variables y Sensores
dar a [Puntos v] el valor (0)
sumar a [Puntos v] (1)
mostrar variable [Puntos v]
¿tocando [Objeto1 v]?
¿tecla [espacio v] presionada?