Programación con bloques. Introducción a la Programación.
Instrucciones iniciales (léelas antes de empezar a programar en el Ejercicio1)
En esta sección vas a crear programas utilizando el entorno de programación Snap (similar al entorno Scratch del MIT). La gramática de Snap utiliza bloques gráficos de programación que se ensamblan para crear los programas. La aplicación Snap ya la tenemos incrustada en esta web, unas líneas más abajo. Para crear y guardar los programas propuestos has de proceder de la siguiente manera:
- Crea el programa propuesto teniendo en cuenta las siguientes indicaciones:
- Puedes cambiar el idioma de Snap desde la rueda dentada a Language/Español
- Has de insertar un comentario con el nombre del programa (botón derecho sobre un espacio libre del área de trabajo)
- Has de indicar tu nombre y aula
- Al final has de indicar la fecha de creación del programa
- Una vez finalizado el programa lo has de ejecutar y ver que funciona.
- Una vez ejecutado (con la fecha como último evento del programa) lo has de exportar (desde el icono documento en blanco) como resumen (Export summary...) con el nombre propuesto.
- Accede a la carpeta de descarga del documento html que acabas de bajar y comprueba que funciona (doble clic sobre el documento). Verás tu programa, el comentario y el resultado del programa.
- Sube el programa (documento html) a la tarea correspondiente en tu Classroom/eva2/u3_programación con bloques 1
- Ahora vas a insertar tu programa (el documento html) en tu página web. Sigue estos pasos:
- Primero obtén el código html de tu programa. Con el documento html abierto, haz clic con el botón secundario en un espacio libre de la página y selecciona Ver código fuente de la página y verás el código (con el botón secundario podrás ajustar las líneas largas). Verás un documento de texto que empieza por <!DOCTYPE html> y acaba con </html>. Para seleccionar completamente el texto puedes situar el cursor al inicio y pulsar Mayúsculas+Ctrl +Fin y copiar el texto.
- Ahora accede a tu página web, página Programación con bloques, y desde la sección Insertar, haz clic en Insertar desde la Web (<>)/Insertar código y pega el texto anteriormente copiado. Comprueba que ves el documento html.
- Haz que el cuadro que aloja el elemento html ocupe todo el ancho del espacio disponible (sólo el ancho).
- Entre programa y programa has de insertar la imagen flecha de separación (separador.png) que tienes más abajo.
- Haz clic en publicar y comprueba, desde la vista previa o desde el enlace a tu página web, que funciona.
Ejercicio1. Dibujando figuras geométricas.
Teniendo en cuenta el programa que dibuja un cuadrado en la esquina superior izquierda del área de trabajo, realiza las siguientes modificaciones para conseguir los siguientes figuras geométricas (fíjate en el nombre de cada programa):
- Cuadrado original (cuadrado1.html)
- Rectángulo rojo de 150x250 en la parte derecha del área de trabajo (cuadrado2.html)
- Rectángulo azul de 250x150 en la parte inferior del área de trabajo (cuadrado3.html)
- Rectángulo azul de 250x150 (centrado en el área de trabajo) con una diagonal en rojo (cuadrado4.html)
- Rectángulo negro de 250x150 (centrado en el área de trabajo) con una diagonal en azul de grosor 15 (cuadrado5.html)