Unidad 2 Programación

UNIDAD 2
Programación
Día a día en el aula. UNIDAD 2: Programación
Guion de la unidad y recursos didácticos . . . . . . . . . . 62

Objetivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Contenidos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Criterios de evaluación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Esquema de la unidad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Enseñanza individualizada . . . . . . . . . . . . . . . . . . . . . . . 64
Refuerzo y apoyo
• Ficha 1. Coordenadas en la ventana de dibujo de Processing. . . . . . . . . . 64
Profundiza en...
• Ficha 2. ¿Para qué sirven los diagramas de flujo?. . . . . . . . . . . . . . . . . . 66
• Ficha 3. Instalar librerías en Processing. . . . . . . . . . . . . . . . . . . . . . . . . 68
Soluciones de las fichas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
60 DÍA A DÍA EN EL AULA TECNOLOGÍA 4.º ESO Material fotocopiable © Santillana Educación, S. L.
Recursos para la evaluación de contenidos . . . . . . . . 73
Autoevaluación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Control. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Estándares de aprendizaje y soluciones . . . . . . . . . . . . . . . . . . . 76
Recursos para la evaluación por competencias . . . . . 78

Prueba 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Estándares de aprendizaje y soluciones . . . . . . . . . . . . . . . . . . . 80
Solucionario del libro del alumno . . . . . . . . . . . . . . . . . . . . 82
DÍA A DÍA EN EL AULA TECNOLOGÍA 4.º ESO Material fotocopiable © Santillana Educación, S. L. 61
2
PRESENTACIÓN Y PROGRAMACIÓN DE AULA
PROGRAMACIÓN
OBJETIVOS
1. Conocer el lenguaje de programación de código abierto 4. Aplicar bucles para repetir instrucciones en programación.
Processing. 5. Aprender a controlar un programa con el ratón.
2. Saber dibujar objetos con Processing: puntos, líneas, cuerpos 6. Saber cómo manipular imágenes ya existentes en el
geométricos…, y escribir texto usando la ventana de dibujo. ordenador o generadas previamente.
3. Dominar el uso de las variables, las funciones aritméticas y 7. Construir un videojuego programado de forma modular.
las funciones de programación principales de Processing.
CONTENIDOS
SABER • Lenguajes de programación para proyectos multimedia: Processing.

– Dibujo de puntos, líneas, cuerpos geométricos… Funciones que permiten cambiar
el nivel de gris de la ventana de dibujo, del relleno y de las líneas de contorno
de las figuras dibujadas: background (n), fill (n) y stroke (n).
• Uso de variables y funciones.
• Repetición de instrucciones en programación: bucles.
• El color de la pantalla del ordenador. Luminóforos. Sentencias de control del color
(las mismas que controlan el nivel de gris).
• El ratón. Usos en Processing.
• Imágenes ya existentes en el ordenador o generadas previamente: uso y manipulación de estas.
• Videojuegos. Cómo programarlos.
SABER HACER • Representar algoritmos con un diagrama de flujo.

• Instalar Processing.
• Convertir un programa en portable.
• Dibujar objetos con Processing: puntos, líneas, cuerpos geométricos…, escribiendo
las sentencias con la sintaxis correcta.
• Elegir y modificar el color de fondo y de cada elemento de la ventana de dibujo.
• Crear variables y usar funciones aritméticas en un programa.
• Trabajar con bucles en un programa para repetir instrucciones.
• Modificar el color de fondo de la ventana de dibujo y del relleno y los bordes de las figuras
dibujadas.
• Utilizar las funciones de programación: draw (), delay (), setup (). Y la sentencia
de control if-then-else para dibujar con Processing.
• Controlar un programa de acuerdo con el movimiento del ratón.
• Visualizar y manipular imágenes ya existentes en el ordenador o generadas en el mismo
programa.
• Programar el funcionamiento de un semáforo utilizando imágenes.
• Programar un videojuego interactuando con el teclado.
• Analizar un texto sobre el control que ejercen nuestros teléfonos móviles.
SABER SER • Ser cauteloso al proporcionar información personal cuando nos bajamos un programa
de código libre.
• Tomar medidas de seguridad a la hora de navegar por Internet o usar el correo electrónico.
• Valorar el papel del ordenador en general, y de los lenguajes de programación.
COMPETENCIAS QUE SE TRABAJAN
• La competencia matemática tiene un papel de forma específica en el documento del final de la
destacado en toda la unidad. Para dibujar en Processing unidad acerca del control que ejercen nuestros
hace falta manejar las coordenadas cartesianas. teléfonos móviles sobre nosotros.
Además, se trabaja con distintos elementos y formas • La competencia de conciencia y expresión
geométricas que el alumno ha de conocer previamente, artística se trabaja a la hora de dibujar con Processing.
por lo que debe existir una relación entre las materias El alumno debe conocer la teoría necesaria para
de Matemáticas y Tecnología. También se usan hacerlo, pero también debe expresar su creatividad a la
operadores lógicos. hora diseñar la práctica, elegir entre la gama de colores
• La competencia lingüística se debería trabajar en y combinarlos, dibujar formas libres…
todos los programas de la unidad, ya que se les sugiere • La competencia científica y la de aprender a
que escriban comentarios explicando qué hace cada aprender se tratan en la comparación que se hace
sentencia. De esta forma son más fácilmente de un programa y su diagrama de flujo. En esta unidad
comprensibles y modificables para otras personas. se muestra esta útil técnica a la hora de programar.
Además, se trabaja la comprensión lectora y escrita
CRITERIOS DE EVALUACIÓN
1. Explicar de qué es capaz el lenguaje de programación 4. Formular programas que se controlen con los movimientos
Processing. y los botones del ratón.
2. Dibujar elementos y formas geométricas con Processing. 5. Completar programas realizando alguna modificación.
Escribir en Processing. 6. Desarrollar un programa que permite crear un videojuego
3. Definir variables y aplicar funciones y bucles en un de una manera sencilla en Processing.
programa.
ESQUEMA DE LA UNIDAD
Programación
Lenguajes de Diagramas Processing

programación de flujo
Bucles y Trabajar
Textuales Algoritmos Variables Funciones
condicionales con imágenes
Gráficos
int size () for
float draw () while
… setup () if-else
2
REFUERZO
Coordenadas en la ventana de dibujo de Processing

Nombre: Curso: Fecha:
En la ventana de dibujo de Processing, cada punto ocupa una coordenada cartesiana, es decir,
todo punto se determina por unas coordenadas (x, y).
• El origen de coordenadas en la ventana de dibujo es la esquina superior izquierda.
• La coordenada x (ancho) es la distancia horizontal desde el borde izquierdo de la pantalla.

Las coordenadas x crecen hacia la derecha.
• La coordenada y (alto) es la distancia vertical desde el borde superior de la pantalla.

Las coordenadas y crecen hacia abajo.
• Todas las coordenadas y distancias se miden en píxeles.
DIBUJAR LA VENTANA
1. Dibuja una ventana de 600 píxeles de ancha por 5. Dibuja en Processing los 4 puntos que aparecen
400 píxeles de alta: en la imagen.
size (600,400); //600 × 400 píxeles.
2. Recuerda que todas las sentencias en Processing deben
terminar con un punto y coma (;).
1. Utiliza la sentencia point (x, y); para dibujar

los puntos:
point (100, 100);
3. Piensa que la pantalla de Processing es como un eje point (500, 100);
cartesiano con el origen de coordenadas en la esquina point (100, 300);
superior izquierda. point (500, 300);
4. Recuerda que, al contrario de lo que es habitual en el 2. Cambia el color de fondo de la pantalla con la
sistema cartesiano, en la pantalla de Processing los valores sentencia: background (255,255,255);
de la coordenada y crecen hacia abajo. Los tres números determinan el color RGB.
• •
• •
Observa que como cada punto es un píxel, apenas se ven.
FICHA 1
3. Vamos a dibujar, en lugar de puntos, pequeñas 5. Ahora dale color a los puntos.
circunferencias de 5 píxeles de radio. 6. Para colorear el contorno de la circunferencia
4. Para dibujar las circunferencias, utiliza la sentencia: utilizar la sentencia:
ellipse (x,y, ancho,alto); stroke (0,0,0);
Donde las coordenadas x, y marcan la posición, y 7. Para el relleno utiliza la sentencia:
las coordenadas ancho y alto determinan el tamaño. stroke (0,0,0);
ellipse (100,100, 5,5); 8. Escribe esta sentencia antes de cada elipse con
ellipse (500,100, 5,5); los números RGB correspondientes.
ellipse (100,300, 5,5);
ellipse (500,300, 5,5);
9. El programa debería quedar algo así:
size (400,300); //600 × 400 píxeles.

background (255,255,255); //Color de fondo blanco.
stroke (255,0,0); //Color de contorno rojo.
fill (255,0,0); //Color de relleno rojo.
ellipse (100,100, 5,5); //Punto de 5 píxeles de radio.
stroke (0,255,0); //Color de contorno verde.
fill (0,255,0); //Color de relleno verde.
stroke (255,255,0); //Color de contorno amarillo.
fill (255,255,0); //Color de relleno amarillo.
stroke (0,0,255); //Color de contorno azul.
fill (0,0,255); //Color de relleno azul.
10. Ejecútalo.
11. Debe mostrar una imagen como esta:
CUESTIONES
1 Dibuja líneas que unan los «puntos» hasta completar el 3 Dibuja un rectángulo concéntrico al anterior y rellena
rectángulo. cada uno de un color
2 Dibuja, utilizando una sola sentencia, un rectángulo

cuyos vértices sean los cuatro puntos anteriores.
2
PROFUNDIZA EN…
¿Para qué sirven los diagramas de flujo?
LOS ORGANIGRAMAS SON LAS REPRESENTACIONES GRÁFICAS DE LOS PROGRAMAS
Observa los siguientes organigramas. El primero de ellos corresponde a un programa que permite calcular
la nota media de un alumno a partir de un número no determinado de notas individuales. En el segundo
se ha completado el organigrama para el caso de un programa más completo en el que, tras calcular
la nota de un alumno, se pregunta si se quiere realizar otro cálculo:
1 Inicio 2 Inicio
G
F
F
C = 0 C = 0
F
F
Suma = 0 Suma = 0
F
F
N.º notas, NN N.º notas, NN
F
F
F Nota, N F Nota, N
F
F
C = C + 1 C = C + 1
F
Suma = Suma + N Suma = Suma + N
F
Sí Sí F
C = NN F Media = Suma / N F Media C = NN Media = Suma / N F Media
F
No No
F
Más Sí
F
cálculos
No
F
Stop
CUESTIONES
Interpretar organigramas. Observa los organigramas superiores y contesta.
1 Identifica en los organigramas:

a)
Una variable numérica. b) Un contador. c)
Una estructura de decisión.
2 Señala en qué momento se indican órdenes en el primer organigrama para:

a)
Introducir el número de notas. c)
Imprimir por pantalla la nota media.
b) Calcular la nota media. d) Introducir las notas individuales.
3 En el segundo organigrama.

a) ¿Se acumulan notas del primer alumno para el segundo alumno? ¿Por qué?
b) ¿Por qué es necesario que aparezca una orden del tipo C = 0 al comienzo
del segundo organigrama?
c)
¿Qué símbolo se utiliza para indicar el comienzo o el fin del proceso?
d)
¿Y para las estructuras de decisión?
FICHA 2
4 Modificar un organigrama.
Observa el primer organigrama e indica las modificaciones necesarias para:
a)
Mostrar un mensaje de error (por pantalla) si se introduce un número de notas menor que cero.
b) Mostrar un mensaje de error (por pantalla) si se introduce alguna nota menor que cero.
c) Imprimir la nota media por impresora en lugar de por pantalla.
d) Imprimir la nota media por pantalla y por impresora.
e) Indicar al final del proceso, junto a la nota media, si el alumno está aprobado o no (se considerará aprobado
si la nota media es igual o mayor que 5).
5 Elaborar organigramas. La elaboración de organigramas ayuda mucho a los programadores.

Elabora ahora los organigramas correspondientes a las siguientes tareas.
a) Calcular la raíz cuadrada de la suma de dos números introducidos por el teclado.
b) Mostrar por pantalla los números impares entre 10 y 40.
c)
Conocer si un número introducido mediante el teclado es múltiplo de 11.
d) Conocer si un número introducido mediante el teclado es divisor de 60.
e)
Calcular el área de un triángulo a partir de los datos correspondientes a la base y a la altura de este
introducidos por el teclado. (Recuerda que el área se obtiene multiplicando la base por la altura y dividiendo
el resultado entre dos).
f) Calcular el número de minutos y de segundos que tiene un número determinado de días introducido
mediante el teclado.
g)
¿En cuáles de los organigramas que has elaborado aparecen estructuras de decisión? ¿En cuáles aparecen
contadores?
6 Comparar organigramas. En una academia de informática se propone a los alumnos que elaboren

un organigrama para la siguiente tarea: calcular el mayor de tres números introducidos por el teclado.
Los alumnos proponen los siguientes:
1 Inicio 2 Inicio 3 Inicio

F
Introducir n.os, A, B, C Introducir n.º, A Introducir n.os, A, B, C

F
Introducir n.º, B
Sí Sí Sí
A>B F A>C F A A<B F A
F
Introducir n.º, C
No No No
F
F
G
F
Sí Sí
B>C F B B<C F C
Sí
A>B F A
No No
F
No
F
C B
Sí
A>C F A
No
F
• ¿Cuál de ellos es correcto? ¿Cuáles deben modificarse? Justifica tu respuesta.
2
PROFUNDIZA EN…
FICHA 3
Instalar librerías en Processing
Ya conoces muchas de las órdenes de Processing: if, for, Observa:

==, etc. Si quieres encontrar la lista completa de órdenes que
incluye Processing, haz clic en la opción de menú Help y,
dentro de ella, en Reference.
Te aparecerá una pantalla con todas las instrucciones de

Processing. Son muchas, y con ellas puedes programar casi 2. Haz clic sobre cualquiera de ellas. Aparece el botón
cualquier programa imaginable. Sin embargo, hay ciertas Install. Haz clic sobre él (necesitarás una conexión a
funciones que te llevaría mucho tiempo desarrollarlas. Internet). El programa descargará la librería desde Internet
y la instalará. Si haces clic sobre el nombre de la librería, te
Las librerías de funciones son programas que otras dirigirá a una web donde te explica cómo se usan sus
personas han desarrollado y ponen a disposición de la funciones.
comunidad. Son conjuntos de programas que realizan ciertas
tareas de software que puedes utilizar con sentencias 3. Para utilizar una librería dentro de un programa, siempre
simples. Por ejemplo, la sentencia rect() es una función de debes seleccionarla previamente en tu nuevo programa.
la librería de funciones incluida con Processing. Detrás de la Para ello, haz clic sobre la opción de menú Sketch
sentencia rect() hay varias líneas de código, pero te Import Library… y selecciona la librería.
resultará fácil proceder: usas rect() en tu programa sin
preocuparte de cómo se ha desarrollado.
1. Para instalar una de las librerías de funciones incluidas en
Processing, selecciona el menú
Sketch Import Library… Add Library…
4. Al hacerlo, Processing te escribirá unas sentencias

include… que indiquen a tu programa que incluya esa
librería. En la pantalla siguiente aparecen las sentencias
que se incluyen en tu programa al seleccionar la librería
Te aparecerá una pantalla donde encontrarás el nombre de la Arduino (Firmata), previamente instalada:
librería, su autor y una breve descripción de lo que hacen las
funciones de esa librería.
CUESTIONES
1 Instala la librería Arduino (Firmata) y, con las instrucciones de la web de Arduino, crea un programa capaz
de encender un led en Arduino directamente en el código de Processing.
2 SOLUCIONES DE LAS FICHAS
Coordenadas en la ventana de dibujo e) Después del procedimiento «Media = Suma/N», se

de Processing FICHA 1 introduce una estructura de decisión que comprueba
si la variable N es mayor que 5 (N > 5). Si la respuesta
1 Debemos dibujar 4 líneas para unir los 4 puntos: es «Sí» se ejecuta el procedimiento de «Aprobado»
line (100,100, 500,100); y «Media», y si la respuesta es «No» se continúa solo
line (500,100, 500,300); con el procedimiento «Media».
line (500,300, 100,300); 5 a) Inicio
line (100,300, 100,100);
2 Dibujamos directamente un rectángulo con esta sentencia:
rect (x,y, ancho,largo);
Introducir A y B
rect (100,100, 400,200);
3 Dibujamos dos rectángulos:
A+B
fill (0,0,255);
//Color de relleno azul.
rect (100,100, 400,200);
//Primer rectángulo. A+B
fill (0,255,255);
//
Otro color de relleno azul claro.
rect (200,150, 200,100); A+B
//Rectángulo interior.
b) Inicio
¿Para qué sirven los diagramas de flujo? FICHA 2
1 a) N C = 10
b) C=C+1
C = NN C=C+1
c)
2 a) Tercer proceso: N.° notas, NN.
b) Séptimo proceso: Media = Suma/N.
c) Sí
Media C = 40 Fin
d) Cuarto proceso: «Nota, N» Nota, N
3 a) No. Porque se asigna el valor cero a la variable C No
al comienzo del programa.
b) Para borrar la información anterior almacenada
en la variable C. Sí
C = impar Imprimir
c)
Un rectángulo con bordes redondeados.
d) Un rombo.
No
4 a) Después del procedimiento «N.° de Notas, NN», se
introduce una estructura de decisión que comprueba si
NN < 0. Si la respuesta es «Sí» se ejecuta el
procedimiento de error, y si es «No» se continúa con el
procedimiento «Nota, N».
b) Después del procedimiento «Nota, N», se introduce una
estructura de decisión que comprueba si la variable N
es menor que cero (N < 0).
Si la respuesta es «Sí» se ejecuta el procedimiento
de error, y si es «No», se continúa con el procedimiento
«C = C + 1».
c)
Después del procedimiento «Media = Suma/N», sigue un
procedimiento que es «imprimir Media»
d) Después del procedimiento «Media = Suma/N», sigue un
procedimiento que es «imprimir Media» y presentar por
pantalla.
2 SOLUCIONES DE LAS FICHAS
c) Inicio e) Inicio
Introducir N, N Introducir base, B
X=1 Introducir altura, H
Area = B · H/2
X=X+1
Y = X/11 Print Area
Sí Fin
No Sí f) Inicio
Y<N Y=N Imprimir “N es múltiplo de 11” Fin
Introducir días, D
No
Imprimir “N no es múltiplo de 11” Minutos = D · 1440
d) Inicio
Segundos = Minutos · 60
Introducir N, N Minutos
Segundos
X=0
g) Estructuras de decisión aparecen en b), c), d);
y contadores en b), c), d).
6 El organigrama correcto es el número 1. Debe modificarse
X=X+1 el 2 porque C puede ser mayor que A y se descarta A sin
compararla con C. También el número 3, porque está mal
planteada la segunda estructura de decisión, de manera que
selecciona el número menor.
Y=N.X
Sí
No Sí
Y < 60 Y = 60 Imprimir “N es divisor de 60” Fin
No
Imprimir “N no es divisor de 60”
2
EVALUACIÓN
AUTOEVALUACIÓN
1 Processing es: 6 Para guardar el número decimal 2,5 en una variable

a) Un programa de diseño gráfico. llamada num_decimal se utiliza la expresión:
b) Un lenguaje de programación que sirve para a) int num_decimal = 2,5

realizar aplicaciones para dispositivos móviles. b) float num_decimal = 2.5;
c) Un lenguaje de programación que se utiliza para c) float num_decimal = 2,5;
la enseñanza de programación en proyectos d) int num_decimal == 2.5;
multimedia.
d) Un gestor de contenidos. 7 La función draw ()…
a) Se ejecuta solo una vez.
2 La sentencia size (200, 200);:
b) Se ejecuta continuamente.
a) Marca el tamaño de la figura geométrica que
queramos dibujar a continuación usando otra c) Se utiliza para cargar imágenes.
sentencia. d) Mide el tiempo transcurrido
b) Crea una ventana de dibujo de 200 × 200 píxeles.
8 Para incluir una imagen, debes:
c) Crea una ventana de dibujo de 200 × 200 mm.
a) Declararla.
d) Dibuja una figura geométrica, un cuadrado,
de 200 píxeles de lado. b) Declararla y usarla.
c) Declararla y cargarla.
3 ¿Cómo se indica un color de fondo rojo puro?
d) Declararla, cargarla y usarla.
a) stroke (R,0,0);
b) fondo (255,0,0); 9 La función text ()…
c) background (255,0,0); a) Muestra el abecedario en el lugar que se indique.
d) stroke (0,255,0); b) Muestra el texto indicado al final de la pantalla

tras ejecutarse el resto de las funciones.
4 Para escribir comentarios que nos ayuden a entender c) Muestra un texto en el lugar indicado por sus dos
el texto se utiliza: últimos números.
a) Dos barras, //. d) Permite introducir texto en la pantalla a través del
b) Entre comillas, “ ”. teclado.
c) Dos barras y asterisco, //*. 10 Para qué sirve la variable keyCode:

d) Asterisco y barra, */.
a) Asigna un código al proyecto para que solo se
pueda abrir si se conoce el código.
5 Indica la sentencia necesaria para dibujar la siguiente
figura: b) Almacena datos y los encripta.
c) Almacena el nombre del proyecto.
d) Almacena la tecla pulsada en el teclado.
a) rect (20,20,100,60,20);
b) rect (20,20,100,60);
c) ellipse (20,20,100,60);
1 c; 2 b; 3 c; 4 a; 5 a; 6 b; 7 b; 8 d; 9 c; 10 d.
d) ellipse (20,20,100,60,20);
SOLUCIONES
2
EVALUACIÓN
EVALUACIÓN DE CONTENIDOS
1 Describe con un diagrama de flujo el algoritmo a seguir 3 Indica qué acción realizan las funciones del ejercicio
desde que te levantas hasta que sales de casa para ir anterior.
al colegio. a)
b)

c)
d)
4 Dibuja lo que aparecerá en la ventana de Processing al

ejecutar el siguiente programa:
size (400,400);
2 Detecta los errores en las siguientes sentencias background(255,255,255);
de Processing y escríbelas correctamente:
fill (255,0,0);
a) Background (255,255,255); triangle (200,50,100,150,300,150);
fill (255,255,255);
rect (100,150, 200,150);
fill (105,60,15);
rect (175,230, 50,70);
b) line (0,0, 255,255)
fill (75,150,255);
rect (225,170, 60,40,5);
line (255,170,255,210);
line (225,190,285,190);

c) POINT (50,50);

d) elipse (50,50, 60,60);

5 Observa los siguientes esquemas: 6 Escribe un programa en Processing que te permita
dibujar algo parecido a lo que aparece en la imagen:
while
No
Condición
Sí
Instrucciones
for
i50
Instrucciones
i5i11
Condición Sí
i , 10
No
• Utiliza las coordenadas del ratón (mouseX,
a) ¿Qué representan? mouseY) para dibujar sobre la pantalla de Processing.
• Utiliza el bucle if para cambiar la intensidad del color.
b) Describe el funcionamiento de cada uno de ellos.
2
EVALUACIÓN
ESTÁNDARES DE APRENDIZAJE Y SOLUCIONES
Criterio Estándares de aprendizaje Actividades
B1-3. Elaborar sencillos programas B1-3.1. Desarrolla un sencillo programa 1, 2, 3

informáticos. informático para resolver problemas
utilizando un lenguaje de programación.
B1-4. Utilizar equipos informáticos. B1-4.1. Utiliza el ordenador como herramienta 4, 5

de adquisición e interpretación de datos, y
como realimentación de otros procesos con
los datos obtenidos.
1 Respuesta modelo. 2 Respuesta:

a) La primera letra debe escribirse con minúscula.
Levantarme Processing diferencia las mayúsculas y las minúsculas.
Debería escribirse:
background (255,255,255);
Ducharme
b) Falta el punto y coma al final de la sentencia. Debería
escribirse así:
Vestirme
line (0,0, 255,255);
c) La función point se escribe con todas las letras en
minúsculas. Debería escribirse así:
No ¿Está preparado
point (50,50);
Preparar
el desayuno el desayuno? d) Falta una «l»; debería escribirse así:
ellipse (50,50, 60,60);
Sí
3 Respuesta:
Tomar el desayuno
a) Dibuja el fondo de color blanco.
b) Dibuja un línea que va desde el punto (0,0) hasta el punto
(255,255).
Preparar No ¿Está preparada
c) Dibuja un punto en el par de coordenadas (50,50).
la mochila la mochila?
d) Dibuja una circunferencia de centro el punto (50,50)
Sí y de radio 60 píxeles.
Lavarse los dientes 4 Respuesta:
Coger la mochila
Salir de casa
Esperar Sí
¿Vas en autobús?
el autobús
No
Caminar
Llegar al colegio
5 Respuesta: 6 Programa:
a) Los esquemas son diagramas de flujo que representan int azul = 0;
bucles. //Declaramos la variable “azul”.
b) El primer diagrama corresponde a un bucle while. Se
int incremento = 1;
utiliza para repetir un bloque de instrucciones hasta que
//Declaramos el “incremento”.
se cumpla una condición. Por ejemplo, que alguien pulse
un botón. void setup() {
El segundo diagrama de flujo representa un bucle for. s
ize (400,400);
Se utiliza para repetir una o más instrucciones un número //Ventana de 400 × 400 píxeles.
determinado de veces.
La sentencia for consta de tres partes dentro de los n
oStroke();
paréntesis: //No pintar los bordes.
• byte i = 0; declara la variable de iteración y la b
ackground (102,205,170);
inicializa a cero. //Fondo de color verde.
• i < 10; es la condición de control. El bucle se
}
ejecutará mientras esta condición sea verdadera.
• i = i + 1; después de cada iteración void draw() {
incrementamos en uno la variable.
azul = azul + incremento;
//Cambiamos un poco el azul.
i
f (azul > 255){
//Cuando llegue al máximo.

incremento = —1;
//Cambiamos el incremento.
}
i
f (azul < 0){
//Cuando llegue al mínimo.

incremento = 1;
//Cambiamos el incremento.
}
f
ill (0,0,azul);
//Selección del color de relleno.
r
ect(mouseX,mouseY,100,5);
//Pintar un rectángulos.
2
EVALUACIÓN
EVALUACIÓN POR COMPETENCIAS
Código de programación que se transforma en arte

Casey Reas era un estudiante de postgrado en el Massachu- él es solo un coautor junto con el sistema. El artista se en-
setts Institute of Technology (MIT) cuando comenzó a traba- carga de crear las reglas y de elegir la versión final de acuer-
jar en un nuevo lenguaje de programación que permitiera do a su gusto. Por ejemplo, en el caso de una pieza musical
unir el mundo de la tecnología con el arte. Este lenguaje generativa, decide si se utilizarán notas agudas o graves,
debería tener una sintaxis que cualquiera pudiera entender cuál será la velocidad de la obra o en qué escalas será com-
y cuyos resultados fueran inmediatos: una línea de códi- puesta. Crea este sistema en un programa, lo ejecuta y ob-
go bastaría para crear una figura geométrica y solo se nece- tiene de vuelta una composición inédita que se ciñe a todos
sitaría teclear otra línea de comandos para crear una inte- los parámetros que eligió. El artista puede descartarla y vol-
racción con ella. Reas pensaba mantener el mismo flujo de ver a empezar, o cambiar alguna de las reglas para variar el
trabajo que tienen los artistas visuales, quienes comienzan tono de la obra hasta que esté satisfecho. Es un proceso
con una idea en la cabeza y hacen un boceto rápido en un interactivo que se inicia y termina en una idea a partir de un
cuaderno para luego llevarlo al lienzo. El lenguaje que Casey diálogo entre el artista y el sistema. Mientras que la progra-
Reas y Ben Fry crearon en 2001 se llama Processing, y es mación es una disciplina racional y lógica, el arte se basa en
actualmente una de las piedras angulares del arte generati- la subjetividad y en las emociones. El arte generativo busca
vo, cuya práctica se basa en la utilización de un sistema de ser el punto medio entre ambos: toma un sistema lógico y
reglas para crear obras de arte generadas por computadora. lo utiliza para crear resultados inesperados que tengan ca-
A diferencia del arte convencional, donde el artista es el pacidad de emocionar.
creador absoluto de la obra, en el arte generativo (o GenArt)
Fuente: Adaptación de http://elcomercio.pe/eldominical/resenas/codigo-transformado-arte-noticia-1831190
1 ¿Cuál era el objetivo del inventor de Processing b) Escribe el código del programa correspondiente a la
al comenzar el proyecto? figura.
2 ¿Qué ventajas presenta Processing para los creadores

y artistas?
3 ¿Que significa la frase: «en el arte generativo (o GenArt)

él es solo un coautor junto con el sistema».
c) Ejecuta el programa en tu ordenador. ¿Funciona?

En caso negativo, busca los posibles errores en el
código y arréglalo.

4 Observa el dibujo de la página anterior, creada con

Processing.
a) ¿Qué sentencias necesitas para diseñar el programa?

5 Después de leer el texto y observar la imagen
de la página anterior, responde:
¿En qué consiste el arte generativo?

2
EVALUACIÓN
ESTÁNDARES DE APRENDIZAJE Y SOLUCIONES
Competencia que
Criterio Estándares de aprendizaje Actividades
se trabaja
Competencia B1-3. Elaborar sencillos programas B1-3.1. Desarrolla un sencillo programa 2, 3, 4

matemática y informáticos. informático para resolver problemas
competencias utilizando un lenguaje
básicas en ciencia y de programación.
tecnología (CMCT)
B1-4. Utilizar equipos informáticos. B1-4.1. Utiliza el ordenador como 3

herramienta de adquisición e
Competencia digital
interpretación de datos, y como
(CD)
realimentación de otros procesos
con los datos obtenidos.
B1-3. Elaborar sencillos programas B1-3.1. Desarrolla un sencillo programa 1, 5

Conciencia y
informáticos. informático para resolver problemas
expresiones
utilizando un lenguaje
culturales (CEC)
de programación.
1 Casey Reas, uno de los inventores de Processing, comenzó b) El código del programa sería el siguiente:
a trabajar en un nuevo lenguaje de programación con el
objetivo de unir el mundo de la tecnología con el arte.
size (640, 360);
2 Processing cuenta con una sintaxis que cualquiera puede background (0);
entender y cuyos resultados son inmediatos. Así, con una noStroke ();
sola línea de código se puede crear una figura geométrica
y solo se necesita teclear otra línea de comandos para crear fill (204);
una interacción con ella. Por tanto, se trata de un lenguaje triangle (18,18, 18,360, 81,360);
de programación muy sencillo para artistas y creadores,
con resultados muy visuales. fill (102);
3 Los creadores de arte generativo, al tratarse de obras de arte rect (81,81, 63, 63);
generadas con computadoras, comparten la autoría con la
máquina. fill (204);
quad (189,18,216,18,216,360,144,360);
4 a) Para elaborar el dibujo que aparece debajo del texto
necesitamos las siguientes sentencias: fill (255);
size (x, y); ellipse (252,144,72, 72);
fill (R,G,B, t);
fill (204);
triangle (x1,y1, x2,y2, x3,y3); triangle (288,18,351,360,288,360);
rect (x,y, ancho, alto, radio);
fill (255);
quad (x1,y1, x2,y2, x3,y3, x4,y4);
arc (479,300,280,280,PI,TWO_PI);
ellipse (x,y, ancho, alto);
arc (x1,y1,x1,y2,rad1,rad2); c) Cada alumno o alumna debe abrir Processing en su
ordenador y ejecutar el código para comprobar el
correcto funcionamiento del programa. Si el resultado no
es el esperado, deberá buscar posibles errores en el
código y corregirlos.
5 Después de haber leído el texto, los alumnos habrán
aprendido que el arte generativo se basa en la utilización
de un sistema de reglas para crear obras de arte por
ordenador.
Así, a diferencia del arte convencional, donde el artista es el
creador absoluto de la obra, en el arte generativo (o GenArt),
el artista es coautor de la obra junto con el sistema. El artista
puede seleccionar la versión final de la obra de acuerdo con
su gusto, ya que descartar una obra y comenzar de nuevo es
una tarea muy sencilla.
2 SOLUCIONARIO DEL LIBRO DEL ALUMNO
Página 35. Interpreta la imagen 2 Un algoritmo es un conjunto de operaciones ordenadas para

• Cada una de las fases que se siguen para desarrollar una app resolver un problema, y un diagrama de flujo es un esquema
tiene su importancia dentro del proceso, por lo que es que representa la tarea o el problema que resuelve el
necesario seguir este orden. Por ejemplo, no tendría sentido algoritmo.
empezar a desarrollar y a programar la aplicación sin tener
3 Respuesta modelo.
clara la idea o el diseño.
• El análisis de una app es una de las fases fundamentales Acaba la clase
del proceso. Es indispensable para definir qué recursos
técnicos y humanos necesitamos, en qué plataforma vamos
a trabajar y si el proyecto será rentable. Recoge
el material
Página 35. Claves para empezar
• Respuesta abierta. Ordena la mesa: bolis,

papeles en sucio; retira
• Respuesta abierta. los restos de goma...
1
Llegas a casa
¿Recuerdas qué No Mira
asignatura toca? el horario
Ve hacia
el ordenador
Sí
Saca el libro
¿Está encendido No Enciende y el cuaderno para
el ordenador? el ordenador la nueva asignatura
Sí
Espera a que Sí ¿Necesitas algún

¿Está usando alguien Saca el material
acaben de usar material específico; Sí
el ordenador? que vayas a
el ordenador regla, calculadora,
necesitar
No diccionario...?
Abre el navegador
No
Estás listo para que

Selecciona comience la clase
el buscador
Teclea el algoritmo
y pulsa ENTER
Fin de algoritmo
4 5 Respuesta modelo.
Multiplicar 325 × 13
size (200,200);
//Ventana de 200 × 200 píxeles.
Coloca el número background (0,128,128); //Color de fondo.
que tiene menos 325 stroke (255,0,0); //Color de contornos.
cifras bajo el que ×13 point (100,100); //Dibuja un punto.
tiene más y traza point (100 ,50);
una línea bajo estos: line (0,0, 100,100); //Dibuja una línea.
line (100,100, 200,200);
➀ line (100,50, 100,150);
325
Multiplica 3 por las
×13
unidades:
5
¿Te sabes la tabla No Mira el libro

del 3? y repásala
Sí
➀
Multiplica 3 por las 325
decenas. Después, ×13
suma las que te
llevas: 75
325
Multiplica 3 por las
×13
centenas:
975
Repite para el 1.
Multiplica 1 por 325. 325
Coloca el producto ×13
debajo del anterior 975
dejando un hueco a
325
la derecha:
325
×13
Suma los productos
975
obtenidos:
325
4225
4225
6 Respuesta modelo.
size (400,220); //Ventana de 400 × 220 píxeles.
fill(0,0,0,0); //El valor final cero indica que es completamente transparente.
ellipse (80,80, 100,100); //Dibuja un círculo.
stroke (0,0,0); //Color de contorno negro.
También podemos rellenar los aros:

size (400,220); //Ventana de 400 × 220 píxeles.

fill(0,0,255,255); //Relleno azul anillo.
fill(255,255,255,255); //Relleno blanco.
ellipse (80,80, 85,85); //Dibuja un círculo interior.
stroke (0,0,0); //Color de contorno negro.

fill(0,0,0,255); //Relleno negro anillo.

fill(255,0,0,255); //Relleno rojo anillo.
fill(255,255,0,255); //Relleno amarillo anillo.
fill(0,255,0,255); //Relleno verde anillo.
El inconveniente de este modelo es que el interior de los anillos no es transparente. Para conseguir esto, deberíamos
hacer un bucle y construir circunferencias desde la más exterior hasta la más interior.
7 Solo tendríamos que modificar el tamaño: alto y ancho de la elipse, dentro del bloque draw(). Por ejemplo:
ellipse (mouseX,mouseY,50,50); //Radio 50.
8 for (byte i=0; i>1; i= i-2) { }
9 Para cambiar el tamaño de la ventana, tenemos que modificar la sentencia size. Por ejemplo:
size (640,320); //Ventana de 640-320 píxeles.
10 Para hacer que la serpiente cambie de tono, tenemos que modificar la sentencia fill:
fill (rojo, 0,0)
Ten en cuenta que ahora debes definir la variable «rojo» en lugar de la variable «verde»:
int rojo = 0; //Declaramos la variable “rojo”.
int incremento = 1; //Declaramos el “incremento”.
void setup(){
size (400,400); //Ventana de 400 x 400 píxeles.
noStroke(); //No pintar los bordes.
background (240,240,10); //Fondo de color amarillo.
}
void draw(){
rojo = rojo + incremento; //Cambiamos un poco el verde.
if (rojo > 255){ //Cuando llegue al máximo.
incremento = -1; //Cambiamos el incremento.
}
if (rojo < 0){ //Cuando llegue al mínimo.
incremento = 1; //Cambiamos el incremento.
}
fill (rojo,0,0); //Selección del color de relleno.

ellipse(mouseX,mouseY,20,20); //Pintar un círculo.
}
Se podría haber hecho lo mismo con el color azul.

fill (0,0,azul)
11 Tan solo habría que sustituir la sentencia ellipse por la 18 a)
Las aplicaciones y los productos tecnológicos
sentencia rect: relacionados con la salud se han convertido en el nuevo
nicho de mercado de las industrias tecnológicas.
rect(mouseX,mouseY,20,20);
//Pintar un cuadrado. b) El teléfono es capaz de recopilar la información necesaria
para dibujar un electrocardiograma, que nos proporciona
Para conseguir que los cuadrados tengan los bordes datos como la frecuencia cardíaca, que puedes consultar
redondeados, rellenamos la coordenada «radio» dentro en tu dispositivo móvil.
de la sentencia rect:
19 Pulseras, relojes, zapatos, cinturones, móviles, lentes
rect(mouseX,mouseY,20,20,5)
y relojes inteligentes.
12 Tendríamos que modificar el bloque «draw»: Se usan para registrar información, hacer recordatorios para
Por ejemplo, vamos a programar: hacer ejercicio, interactuar con nutricionistas, recibir
entrenamiento personalizado y prevenir o revertir
• Entre 0 y 1 s " verde. enfermedades crónicas…
• Entre 1 y 1,5 s " ambar. Mide variables como la actividad física, frecuencia cardiaca…;
• Entre 1,5 y 2,5 s " rojo. en general, números indicadores de salud.
void draw(){ 20 a)
Son más capaces de reducir niveles peligrosos de presión
int crono = millis()-time; arterial o azúcar en la sangre.
//Tiempo transcurrido. b) Porque con los datos recolectados pueden diseñar
if (crono > 0 && crono < 1000) verde(); mejores tratamientos.
if (crono > 1000 && crono < 1500) ambar(); 21 Respuesta libre.
if (crono > 1500 && crono < 2500) rojo(); 22 Respuesta libre.
if (crono > 2500) time = millis();
//Reiniciamos el tiempo.
}
13 Actividad práctica.
14 Respuesta abierta.
15 Actividad práctica.
NOTAS

Unidad 2 Programación

Cargado por

Copyright:

Formatos disponibles

Unidad 2 Programación

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Unidad 2 Programación

Cargado por

Copyright:

Formatos disponibles

UNIDAD 2

Guion de la unidad y recursos didácticos . . . . . . . . . . 62

Recursos para la evaluación por competencias . . . . . 78

Solucionario del libro del alumno . . . . . . . . . . . . . . . . . . . . 82

SABER • Lenguajes de programación para proyectos multimedia: Processing.

SABER HACER • Representar algoritmos con un diagrama de flujo.

Lenguajes de Diagramas Processing

Coordenadas en la ventana de dibujo de Processing

• El origen de coordenadas en la ventana de dibujo es la esquina superior izquierda.

• La coordenada x (ancho) es la distancia horizontal desde el borde izquierdo de la pantalla.

• La coordenada y (alto) es la distancia vertical desde el borde superior de la pantalla.

• Todas las coordenadas y distancias se miden en píxeles.

1. Utiliza la sentencia point (x, y); para dibujar

Observa que como cada punto es un píxel, apenas se ven.

9. El programa debería quedar algo así:

size (400,300); //600 × 400 píxeles.

2 Dibuja, utilizando una sola sentencia, un rectángulo

¿Para qué sirven los diagramas de flujo?

LOS ORGANIGRAMAS SON LAS REPRESENTACIONES GRÁFICAS DE LOS PROGRAMAS

Interpretar organigramas. Observa los organigramas superiores y contesta.

1 Identifica en los organigramas:

2 Señala en qué momento se indican órdenes en el primer organigrama para:

3 En el segundo organigrama.

5 Elaborar organigramas. La elaboración de organigramas ayuda mucho a los programadores.

1 Inicio 2 Inicio 3 Inicio

Introducir n.os, A, B, C Introducir n.º, A Introducir n.os, A, B, C

• ¿Cuál de ellos es correcto? ¿Cuáles deben modificarse? Justifica tu respuesta.

Instalar librerías en Processing

Ya conoces muchas de las órdenes de Processing: if, for, Observa:

Te aparecerá una pantalla con todas las instrucciones de

4. Al hacerlo, Processing te escribirá unas sentencias

Coordenadas en la ventana de dibujo e) Después del procedimiento «Media = Suma/N», se

Introducir N, N Introducir base, B

X=1 Introducir altura, H

Y = X/11 Print Area

Imprimir “N no es múltiplo de 11” Minutos = D · 1440

Imprimir “N no es divisor de 60”

Nombre: Curso: Fecha:

1 Processing es: 6 Para guardar el número decimal 2,5 en una variable

b) Un lenguaje de programación que sirve para a) int num_decimal = 2,5

d) stroke (0,255,0); b) Muestra el texto indicado al final de la pantalla

c) Dos barras y asterisco, //*. 10 Para qué sirve la variable keyCode:

Nombre: Curso: Fecha:

4 Dibuja lo que aparecerá en la ventana de Processing al

d) elipse (50,50, 60,60);

b) Describe el funcionamiento de cada uno de ellos.

ESTÁNDARES DE APRENDIZAJE Y SOLUCIONES

Criterio Estándares de aprendizaje Actividades

B1-3. Elaborar sencillos programas B1-3.1. Desarrolla un sencillo programa 1, 2, 3

B1-4. Utilizar equipos informáticos. B1-4.1. Utiliza el ordenador como herramienta 4, 5

1 Respuesta modelo. 2 Respuesta:

EVALUACIÓN POR COMPETENCIAS

Nombre: Curso: Fecha:

Código de programación que se transforma en arte

Fuente: Adaptación de http://elcomercio.pe/eldominical/resenas/codigo-transformado-arte-noticia-1831190

2 ¿Qué ventajas presenta Processing para los creadores

3 ¿Que significa la frase: «en el arte generativo (o GenArt)

 c) Ejecuta el programa en tu ordenador. ¿Funciona?

4 Observa el dibujo de la página anterior, creada con 

SABER • Lenguajes de programación para proyectos multimedia: Processing.

SABER HACER • Representar algoritmos con un diagrama de flujo.

• La coordenada x (ancho) es la distancia horizontal desde el borde izquierdo de la pantalla.

• La coordenada y (alto) es la distancia vertical desde el borde superior de la pantalla.

• Todas las coordenadas y distancias se miden en píxeles.

1. Utiliza la sentencia point (x, y); para dibujar

1 Identifica en los organigramas:

2 Señala en qué momento se indican órdenes en el primer organigrama para:

3 En el segundo organigrama.

• ¿Cuál de ellos es correcto? ¿Cuáles deben modificarse? Justifica tu respuesta.

4. Al hacerlo, Processing te escribirá unas sentencias

Coordenadas en la ventana de dibujo e) Después del procedimiento «Media = Suma/N», se

c) Ejecuta el programa en tu ordenador. ¿Funciona?

4 Observa el dibujo de la página anterior, creada con