Bloques con entrada

Teacher feedback from 2017-2018:

--MF, 3/6/19

En esta página vas a usar campos de entrada para permitir que un bloque haga diferentes cosas.

En la página anterior se usaron los programas asterisco y molinillo, cada uno de ellos tenía una entrada indicando el número de ramas a desplegar. Ahora vas a aprender cómo crear un bloque propio con campos de entrada.

  1. Click here to load this file. Then save it to your Snap! account.
    A continuación debes hacer cinco copias del programa. Modifica cada una de las copias para hacer que el molinillo tenga 3, 4, 5, 6, y 12 ramas. A continuación se muestra el resultado esperado:
    molinillo con 3 ramas molinillo con 4 ramas molinillo con 5 ramas molinillo con 6 ramas molinillo con 12 ramas
  2. Analiza dos de tus programas y escribe todas las diferencias entre ellos.
CRD-2.B.3 (white text)

Los programas son esencialmente él mismo; la única diferencia radica en que algunos de los valores de entrada cambian. En lugar de hacer muchas copias, se puede hacer un bloque general pinwheel, branches:() que dibuje todos los diseños. El bloque debe funcionar para una gran variedad de valores de entrada.

Pair Programming Swap
  1. Crea un bloque de molinillo con un campo de entrada para ingresar el número de ramas. Las instrucciones se encuentran a continuación, adicionalmente es posible ver el proceso en un video más adelante.

    Programando un bloque con campo de entrada

    1. Crea un nuevo bloque, ingresa el nombre del bloque y un campo de entrada para ingresar un valor y luego haz clic en "Aceptar". Para este proyecto, ingresa el siguiente título pinwheel, branches:.
      Haz clic para desplegar una toma de pantalla de la interfaz para crer un nuevo bloque.
      Make a block

      Este bloque va a mover tu personaje o cursor, es una buena idea elegir la categoría "Movimiento" en la paleta de funciones.

      El uso de la coma o los dos puntos no son necesarios, se usan únicamente como ayuda para dar mejor claridad al ejercicio.

    2. Haz clic en + (signo más) que se encuentra al lado de "branches:", ingresa el nómbre del campo de entrada y haz clic en "Aceptar" para agregarlo. Para este proyecto, haz clic en + luego de la palabra "branches:" e ingresa número de ramas como identificador del valor a ingresar.

      La imagen de un bloque azul pinwheel dentro de un bloque con forma de sombrero es llamado prototipo del bloque. A medida que se agregan campos de entrada, título y más detalles, se logra visualizar el bloque de la forma en que se presentará al usuario final. La única excepción es que el campo de entrada, en este ejemplo el óvalo naranja, contendrá valores.
    3. Arrastra dentro los bloques que necesitas para programar la funcionalidad y utiliza el nuevo valor de entrada.
      • En este proyecto, arrastra uno de los programas de molinillo que ya funcionan y colócalo en el editor de bloque para unirlo al bloque sombrero pinwheel previamente creado.
      • Luego, arrastra el nuevo cambo de entrada number of branches para reemplazar los valores que cambian, de modo que logremos un bloque con una funcionalidad más general.
I cut the generalization stuff that was here because that term is defined on page 5, and here we are missing the following standards-related box. --MF, 9/2/19
DAT-1.A.1

¿Qué tipo de datos puede ser utilizado como campo de entrada? Todos los tipos de datos. En este ejemplo el campo de entrada espera un número, pero cualquier tipo de valor puede ser usado en el campo de entrada. Por ejemplo, se ha visto en ejercicios anteriores el bloque list, es posible recordar que recibía cadenas de texto. En Snap!, cualquier tipo de dato puede ser usado como entrada, puede ser reportado por un bloque, o puede ser incluido como elemento de una lista.

: ¿Qué es una entrada? Parámetro vs. Argumento
AAP-3.A.3

Usamos la palabra "entrada" tanto para parámetros (nombre del campo de entrada) y para los argumentos (valor del campo de entrada).

AAP-3.B.4

Al inicio, has hecho cinco copias del código del programa de molinillo para crear cinco diferentes tipos de figuras. Ahora, has hecho un procedimiento que incluye todos los pasos similares en las cinco versiones y usa un parámetro para manejar las diferencias.

CRD-2.G
    Save Your Work
  1. Comenta tu código.
  2. Consejos de depuración: Comentando tu código

    Brian will fix the video to address his concerns:

    Oh, about the orange box on 1.3.3, I think the comment on the hat block is okay, but the comment on the turn is exactly the sort of thing I wouldn't do. In fact I might make a point of saying that when you're /teaching/ someone, you (we) put in comments that you wouldn't use if you were just programming for yourself.

    But the hat block comment in the movie isn't very good documentation. It should say "Draws a REGULAR five-sided polygon, with SIDE LENGTH set by the input." (Not really capitalized; I just did that to emphasize to you what's missing.)

    Really it's hard to give an example of useful commenting that doesn't look stupid unless you have a big project. Then, for example, when some global variable is used without being set, you might want to attach a comment "FOO is set in procedure BAR that's called in the initialization."

    CRD-2.G.2

    Agregar comentarios a tu código puede ayudarte a recordar en qué pensabas al incluir ese bloque y la funcionalidad del mismo. Los comentarios ayudan a otras personas que leen el código a entenderlo mejor, y puede ayudar a evitar incluir errores gracias a que se incrementa su claridad. Por el contrario, no ayuda comentar todas las líneas de código, debes ser claro indicando únicamente cómo funcionan los bloques seleccionados dentro de tu código. Se pueden agregar comentarios en Snap! usando clic-derecho (o control-clic) en el área de trabajo y seleccionando la opción "Añadir comentario." Haz clic para ver una animación del proceso.

    Animation on how to  add a comment to a block and how a comment added to a hat block becomes that custom block's help message.

    Se puede agregar un comentario sobre el bloque sombrero en el editor de bloques para crear un mensaje de ayuda que explique brevemente su funcionalidad. Es la mejor práctica recomendada para hacer comentarios ya que las personas pueden leer la descripción de que hace el bloque sin necesidad de ver dentro.

    Mary will either improve the formatting below or refrain from bugging Brian about it:
    These pictures need alt/title tags. --MF, 8/31/19
    Mala práctica de comentarios:      Buena práctica de comentarios:
    Mala práctica de comentarios Buena práctica de comentarios Mensaje de ayuda

    La importancia de incluir comentarios detallados radica en que programamos en lenguaje de programación con instrucciones cortas y sencillas, por lo que no podemos incluir nombre de variables largos o nombres de procedimientos tan detallados. (Normalmente no es posible incluir espacios en blanco en los títulos ya que se tendría que escribir ese nombre largo cada vez que se use la variable o procedimiento.) Es por eso que es común ver nombres como substLcUc en lugar de substituir todas las palabras en minúscula por mayúscula en una cadena. En el caso que un programa esté lleno de nombres abreviados para variables y procedimientos, es muy importante que el código tenga una buena documentación.

Más acerca de la documentación de un programa

CRD-2.G.1, CRD-2.G.5

Comentar es otra forma de documentación. No es la mejor forma ya que agregar comentarios a un punto particular en el programa documenta únicamente un procedimiento o segmento de código, pero no explica como interactúan las diferentes partes del programa. Sin embargo, el uso de comentarios representa una forma sencilla de documentar pequeños detalles.

La documentación puede ser externa (escrita por los usuarios del programa) o interna (escrita por los desarrolladores del programa). Ambos tipos de documentación son importantes en el caso que el programa sea utilizado por personas diferentes a quién lo programa. Usualmente deben ser documentos separados, otra razón por la que los comentarios no deberían ser los únicos medios de documentación.

CRD-2.G.4

Si escribes un programa solo para tí, puede parecer innecesario incluir documentación interna. "Yo sé bien cómo funciona mi programa." Sin embargo, en el caso que el programa se use un año después, probablemente sea necesario un mantenimiento, y muy probablemente hayas olvidado los detalles de la implementación. En una clase de programación, como esta, la mayoría de programas que se escriben son muy pequeños, y se pueden entender sin problema. Pero toma en cuenta que los programas reales son generalmente mucho más grandes, ya que estos laboratorios han sido diseñados para tomarte menos de una hora de trabajo.

CRD-2.G.3

Es recomendable que el primer intento de documentar un código se haga antes de empezar a programar. La documentación expresa la funcionalidad esperada del programa (externo) y la estructura planeada (interna). Estos documentos pueden ser usados posteriormente para probar el código y asegurarse que se comporta según el plan.

    AAP-3.A part a
  1. Crea un programa que dibuje en el escenario dos molinillos con diferente número de ramas.
AAP-3.A.4

Toma nota que cuando se manda a ejecutar un procedimiento dentro de un programa (por ejemplo pinwheel), el procedimiento es completado completamente antes de continuar con el resto de bloques dentro del programa.

  1. Las imágenes que se presentan a continuación fueron creadas con los bloques pinwheel y el bloque set pen color. Crea tu propio arte.
    wreath of rainbow colored pinwheels wreath of rainbow colored pinwheels
  2. Crea una animación.
    Branch Cycle Animation