Libro digital

1 Programación. Desarrollo móvil. Desarrollo web

¿Cuándo crees que usamos la programación?

Situación de aprendizaje

Producir programas informáticos, colaborando en un equipo de trabajo y creando aplicaciones sencillas, mediante lenguaje de bloques, para solventar unos problemas determinados

Saberes básicos

A Introducción a la programación

D Desarrollo móvil

E Desarrollo web

Contenidos de la unidad

Lenguajes de programación visuales
Medios de expresión de algoritmos
Lenguajes de bloques para dispositivos móviles
Desarrollo web. Lenguajes para la edición de páginas web

Vas a adentrarte en el mundo de la programación. Según el Dr. Mitchel Resnick, profesor e investigador del Instituto Tecnológico de Massachusetts (MIT), de la misma forma que es importante que todos los niños aprendan a escribir (aunque muy pocos de ellos en su vida adulta serán periodistas, novelistas o escritores profesionales), también lo es que aprendan a programar.

El famoso Steve Jobs, fundador de Apple, dijo: “Todos en este país deberían aprender a programar un ordenador, porque eso te enseña a pensar”.

En esta unidad vas a despertar tu creatividad y vas a desarrollar nuevas estructuras de pensamiento. El futuro de la humanidad depende de los programadores que están aprendiendo en este momento.

ACTIVIDADES DE INICIACIÓN

Descubre tus conocimientos previos contestando en tu cuaderno las siguientes preguntas:

Piensa y anota el nombre de cinco objetos que tú creas que funcionan mediante un programa.
P¿Eres capaz de identificar cinco programas que utilices habitualmente? ¿Sabrías decir en qué lenguaje de programación se han codificado?
PMucha gente opina que el cuerpo humano se comporta como si estuviese programado. ¿Por qué imaginas que alguien puede opinar eso? ¿Qué programas crees que el cuerpo humano lleva a cabo de forma autónoma?
P¿En qué crees que consiste el trabajo de un programador?

INTRODUCCIÓN A LA PROGRAMACIÓN

1. Lenguajes de programación visuales

Los lenguajes de programación son la forma en que los seres humanos pueden dar instrucciones a un equipo informático. Con ellas construimos los programas.

Un lenguaje de programación es un lenguaje que sirve para describir un conjunto de acciones que deben ser ejecutadas por las máquinas.

Hay diferentes criterios para clasificar los tipos de lenguajes de programación: según la forma de ejecutarse, pueden ser compilados o interpretados; según la forma de resolver los problemas, los hay estructurados y orientados a objetos...

Los lenguajes de programación visuales son los que se usan en entornos educativos para aprender a programar. Utilizan elementos gráficos con colores y formas, en lugar de texto.

Los lenguajes de programación visuales disponen de un conjunto de bloques gráficos de programación que tienen funciones específicas y se ensamblan siguiendo una secuencia de acciones para crear programas. En esta unidad usaremos distintos lenguajes de programación visuales, aunque el principal será Scratch, desarrollado por un grupo de investigadores del Instituto Tecnológico de Massachusetts (MIT).

Pantallas de interacción con el usuario

Las aplicaciones que sirven para practicar con los lenguajes de programación visuales muestran una pantalla de interacción con el usuario llamada interfaz. Ésta permite programar y también visualizar el funcionamiento del programa realizado e interaccionar por medio de elementos como botones y cuadros de texto. El aspecto de los bloques es el siguiente:

En esta tabla se recogen las ventajas e inconvenientes de los lenguajes de programación visuales frente a los tradicionales lenguajes de texto para programar:

VENTAJAS	INCONVENIENTES
Con ellos se aprenden fácilmente las estructuras de programación. Son adecuados para principiantes: casi no hay que tener conocimientos previos para programar. No es necesario aprender un nuevo lenguaje. Las posibilidades de error son mucho más reducidas. Su aspecto es mucho más parecido al de un algoritmo. Los programas se desarrollan de forma ágil y rápida.	No se usan en el mundo laboral para programar. Una vez que se dominan, es necesario aprender un nuevo lenguaje para convertirse en un auténtico programador. No tienen tantas posibilidades de desarrollo como los lenguajes textuales. No funcionan nada más que en el sitio web o aplicación donde se han desarrollado.

Elementos de programación visual

A continuación vamos a ver los principales elementos que se utilizan al programar por bloques. Entender cómo funcionan estos elementos es muy útil para hacer buenos programas, como veremos en las prácticas de Scratch de las páginas siguientes.

Eventos

Los eventos son acciones que se usan para comenzar un programa o desencadenar una acción, como por ejemplo hacer clic en un objeto o presionar una tecla concreta.

Estructuras de control

Bucles. Un bucle es una secuencia de instrucciones en que se repite varias veces el mismo trozo de código mientras se cumpla una condición. Las instrucciones para crear bucles se encuentran en la categoría Control.
Condicionales. Un condicional es una instrucción o un grupo de instrucciones que se pueden ejecutar o no, en función del valor de una condición.

Integración de gráficos y sonidos

Para utilizar gráficos y sonidos hay que añadir una extensión que se encuentra en la esquina inferior izquierda. Así podemos añadir extensiones como Música, Lápiz, etc.

Variables

Una variable se puede entender como una caja en la que vamos almacenando datos. Por ejemplo, es habitual en los juegos que necesitemos almacenar el número de puntos o de preguntas acertadas; para ello necesitaremos usar variables.
Existen dos tipos de variables: las globales, que se pueden utilizar en cualquier objeto, y las locales, que sólo sirven para un objeto determinado.

Al crear una nueva variable podemos elegir si será global o local.

Operaciones con variables

En Scratch, además de utilizar las variables para las operaciones aritméticas básicas (suma, resta, multiplicación y división), tenemos una opción muy útil que nos sirve para incrementar o decrementar la variable. Por ejemplo, cuando en un juego conseguimos un punto, hacemos que se incremente automáticamente en 1 la variable puntos. Para ello utilizamos la instrucción sumar a.

Las variables también nos permiten inicializar un recuento, es decir, dar a la variable un valor inicial (que generalmente es 0). Por ejemplo, es habitual inicializar el número de puntos iniciales de un juego.

Ejecución simultánea de varios objetos, clones y comunicación entre ellos

En muchas ocasiones necesitamos utilizar en nuestros programas varios objetos al mismo tiempo. Por eso es conveniente utilizar clones y aprender cómo se pueden comunicar entre sí los distintos objetos.

Clones. Un clon es una copia idéntica de un objeto. Crear clones nos resulta útil cuando queremos que dos objetos sean iguales pero cada uno de ellos se comporte de forma diferente.
Comunicación entre objetos. Para que los objetos se comuniquen entre sí utilizamos las instrucciones enviar mensaje y al recibir mensaje, de la categoría Eventos. Con ellas podemos hacer que el personaje 2 comience a hacer una serie de acciones cuando reciba un mensaje que le envía el personaje 1.

2. Medios de expresión de algoritmos

Los lenguajes de programación visuales nos ayudan a comprender el algoritmo que está detrás de un programa.

Un algoritmo es una secuencia ordenada de pasos que resuelven un problema en un tiempo finito.

Los algoritmos tienen las siguientes características:

Contienen instrucciones concretas, sin ninguna ambigüedad.
Deben terminar, es decir, son finitos.
Todos sus pasos son simples y están ordenados.

Los algoritmos, una vez definidos, se escriben en pseudocódigo. El pseudocódigo, o “código falso”, es un lenguaje hecho para que lo entiendan los humanos y no las máquinas, por lo que no puede ejecutarse en un ordenador. La finalidad del pseudocódigo es ayudarnos a detectar errores en los algoritmos y a depurarlos.

Un programa es la traducción de un algoritmo a un lenguaje de programación capaz de ser entendido por un ordenador y procesado por él.

El gráfico utilizado para representar un algoritmo se denomina diagrama de flujo, y muestra mediante símbolos unidos por flechas la secuencia de las acciones que se han de realizar.

El diagrama de flujo facilita la comprobación y depuración de posibles duplicidades y errores en el algoritmo.

DESARROLLO MÓVIL

3. Lenguajes de bloques para dispositivos móviles

Una aplicación móvil o app es una herramienta de software diseñada para cubrir una necesidad que está programada para funcionar en los dispositivos móviles.

Para desarrollar las apps necesitamos un lenguaje de programación para dispositivos móviles. El desarrollo de aplicaciones puede hacerse en los propios dispositivos, aunque lo más habitual es hacerlo en ordenadores.

Al igual que para programar en el ordenador, se han desarrollado lenguajes de bloques para móviles. Un ejemplo de entorno de desarrollo integrado (IDE) de este tipo es App Inventor, creado por el Instituto Tecnológico de Massachusetts y Google.

App Inventor es un lenguaje de programación orientada a eventos que permite crear aplicaciones para los smartphones que tienen sistema operativo Android.

Programación orientada a eventos

Algo fundamental al programar es tener en cuenta que la intervención del usuario ha de ser posible en cualquier momento en que éste lo desee. Cuando se produce un evento sobre un elemento, se realiza a continuación el conjunto de acciones programadas para ese evento; esto se llama programación orientada a eventos. Por el contrario, la programación tradicional es secuencial (o estructurada), ya que el programa se ejecuta en un orden establecido y el usuario sólo puede interaccionar en el momento planificado por el programador.

La ventaja de la programación orientada a eventos es que el programador no tiene que programar todos los escenarios posibles. El inconveniente es que el flujo de ejecución del programa escapa de su control.

Se dice que hay dependencia de eventos cuando un evento depende de otro para ejecutarse correctamente. Por ejemplo, si programamos un botón para que el programa pida el nombre del usuario y otro para que le salude con su nombre, el segundo botón no funcionará bien si no se ha pulsado previamente el primero. Hay que tener en cuenta esta dependencia, que se soluciona, por ejemplo, impidiendo pulsar el segundo botón mientras no se haya pulsado el primero.

tipos de eventos

Con el ratón

Hacer clic en un botón
Hacer doble clic en un botón
Elegir una opción de menú
Pasar con el ratón por un sitio
Arrastrar un elemento

Con el teclado

Presionar una tecla
Pulsar una combinación de teclas
Escribir en una caja

Manuales

Tocar la pantalla
Tocar un botón
Acercar el pulgar y el índice
Alejar el pulgar y el índice
Deslizar
Arrastrar

DESARROLLO WEB

4. Desarrollo web. Lenguajes para la edición de páginas web

Seguro que has navegado por Internet en multitud de ocasiones y conoces muchas webs, pero ¿has pensado alguna vez qué es una página web? Curiosamente, lo que habitualmente llamamos web o página web es en realidad un conjunto de páginas web, es decir, un conjunto de documentos, que constituyen un sitio web.

Así, un sitio web está formado por un conjunto de páginas web enlazadas entre sí, a las cuales se accede a través de una dirección común.

Por ejemplo, www.rae.es es el sitio web de la Real Academia Española.

Los documentos que constituyen un sitio web son archivos y carpetas que contienen texto, fotografías, botones, iconos, animaciones, hipervínculos, multimedia, gráficos, tablas, etc., y que se han creado para ser vistos por usuarios con ordenadores y navegadores de distintas características.

Cada uno de los documentos o páginas que constituyen un sitio web es un archivo de extensión .html o bien .htm.

Una página web tipo tendrá, a grandes rasgos, los siguientes elementos:

Clasificación y lenguajes de las páginas web

Las páginas web se clasifican en estáticas y dinámicas:

Estáticas. Son aquellas que no cambian, que muestran siempre el mismo contenido cada vez que las cargamos. Se realizan en lenguaje HTML (hypertext markup language, lenguaje de marcas hipertextuales).
Dinámicas. Son páginas que muestran diferentes resultados en función de la actuación del usuario. Por ejemplo, un buscador es una página dinámica que devuelve un resultado u otro según cuál sea la petición del usuario. En la actualidad, son las más habituales. Se realizan combinando HTML con lenguajes dinámicos como ASP (Active Server Pages), ASP.NET, Java, PHP o JavaScript.

Servidores web

Los sitios web son creados por programadores y diseñadores. Una vez creados, las personas encargadas de mantenerlos se llaman administradores (o webmasters, en inglés).

El proceso de trabajo habitual de un administrador es crear en su ordenador el conjunto de archivos que conforman la web (llamado sitio local). El administrador manipula estos archivos y también dispone de un espacio donde guardar la página en un sitio accesible a todos los usuarios de Internet (llamado sitio remoto). Ese sitio está en un ordenador especial que se llama servidor, y el espacio se denomina alojamiento.

Los servidores son ordenadores que alojan las páginas web y las ponen a disposición de toda la red.

Es la persona responsable de mantener el sitio web y actualizar los contenidos, así como de transferirlos al servidor.
Son los programas encargados de comunicar el ordenador local con el servidor que brinda alojamiento, de forma que ese conjunto de archivos que componen el sitio web y que manipula el administrador en su ordenador local puedan sustituir, cuando sea necesario, a los que aloja el servidor.
Para que la página web que tiene el administrador pueda ser vista por otros usuarios, debe estar situada en un servidor de Internet, ofrecido normalmente por empresas privadas.
Para acceder a las páginas web, los usuarios utilizan un navegador (Google Chrome, Mozilla Firefox, Microsoft Edge, etc.), que se encarga de comunicar cada ordenador con los servidores que albergan las páginas web, descargar las páginas y mostrarlas.

Animaciones web

Las animaciones web son recursos visuales que se utilizan en una página web con el objetivo de que tengan un impacto en el usuario cuando interactúa con ella.

Ejemplos:

Animación en carga. Sirve para entretener al usuario mientras se carga la página. Surgió cuando la velocidad de Internet era mucho menor y las páginas tardaban en cargarse. Suele ser un GIF animado (por ejemplo, un pequeño reloj de arena).
Conjuntos de imágenes en forma de galería
Animaciones al desplazar el ratón por encima de los distintos objetos
Menús que aparecen y desaparecen
Imágenes que cambian al interaccionar con ellas

El lenguaje HTML

Los diseñadores de páginas web se centran en la creación de páginas a partir del lenguaje en que están escritas: el lenguaje HTML.

La función de los navegadores que utilizamos habitualmente (Chrome, Firefox, Edge, etc.) es interpretar ese lenguaje y transformarlo en la página web que se nos muestra.

El HTML (hypertext markup language, “lenguaje de marcas hipertextuales”) es el lenguaje usado para la construcción de páginas web. Por convención, los archivos de formato HTML usan la extensión .htm o .html.

Una página web se puede crear directamente escribiendo en este código en cualquier editor de textos y guardándolo con la extensión adecuada (.html o .htm), pero no se suele hacer así más que con fines educativos. En la práctica, se utilizan editores de páginas web, que permiten diseñar webs de una forma más sencilla e intuitiva.

¿Cómo son las páginas web por dentro?

Podemos conocer fácilmente cómo es el lenguaje en que está escrita una página web. Para ello basta con seguir estas sencillas instrucciones:

Abre cualquier navegador (por ejemplo, Internet Explorer).
Accede a cualquier web (por ejemplo, la de la Agencia Espacial Europea: www.esa.int).

Sitúa el ratón en cualquier parte de la web (que no sea una imagen o un enlace) y pulsa el botón derecho. Aparecerá un menú emergente con varias opciones. Selecciona Ver código fuente.
A continuación se abrirá una pantalla en la que podrás ver el aspecto del código HTML con que está escrita esta página.

Etiquetas y atributos: estructura básica de una página web

¿Te gustaría ser capaz de entender y crear código HTML como el que hemos encontrado en el interior de esa página web? A continuación vamos a explicarte unos conceptos básicos que te ayudarán a identificar el código más sencillo e interpretarlo, así como a confeccionar tu primera página.

Las características básicas del lenguaje HTML son las siguientes:

El lenguaje HTML se escribe en forma de etiquetas entre corchetes angulares (<>). Pueden ser de apertura (por ejemplo: <body>) o de cierre (por ejemplo: </body>); ésta se distingue de la primera por la barra (/).
El código HTML siempre empieza con la etiqueta de apertura <html> y siempre acaba con la etiqueta de cierre </html>.
Un sencillo documento creado en HTML tiene el aspecto de la figura del margen. En un documento HTML se distinguen dos partes principales:

El encabezado, comprendido entre las etiquetas <head> y </head>, que constituye una instrucción de cabecera del documento, como el título.
El cuerpo, comprendido entre las etiquetas <body> y </body>, que constituye el contenido de la página.

Las etiquetas se completan con atributos, que son parámetros que definen las propiedades o el comportamiento de la etiqueta; están siempre en la etiqueta de apertura y su valor va siempre entre comillas. En el siguiente ejemplo, color es un atributo de la etiqueta <font>:

Un elemento de HTML está compuesto de dos etiquetas (la de apertura y la de cierre). A la derecha se recogen dos ejemplos de elementos y se muestra cómo será su visualización una vez interpretados por un navegador:

EJEMPLO DE PÁGINA WEB EN H.T.M.L.

<html> → apertura del código

<head> → apertura de la cabecera

<title> → apertura del nombre del documento

Mi primera página web

</title> → cierre del nombre del documento

</head> → cierre de la cabecera

<body> → apertura del cuerpo del documento

Estoy escribiendo código

</body> → cierre del cuerpo del documento

</html> → cierre del código

APRENDE con el ordenador

Práctica 1. Juego con algoritmos. La Hora del Código

Puedes encontrar muchos juegos para practicar lo aprendido en esta unidad y seguir aprendiendo a pensar como un informático.
La Hora del Código es una iniciativa que surgió en el año 2013 con la idea de potenciar el pensamiento computacional en la escuela realizando actividades de programación durante una hora. La web de La Hora del Código incluye multitud de actividades para aprender a programar (para todos los niveles) utilizando algoritmos y comprobando su funcionamiento.

Para hacer esta práctica deberás tener el consentimiento de tus padres o tutores legales.

Ejercicio 1. Star Wars

Accede a la web https://hourofcode.com/es. Haz clic en Inténtalo y se abrirá una nueva página en la que hay muchos juegos de práctica.
Busca el juego Star Wars: crea una galaxia a través del código y haz clic en su imagen y luego en Inicio. La URL de este juego es https://code.org/starwars.
Este juego te permite jugar de dos maneras: con bloques o con instrucciones de JavaScript. Elige Bloques.
Puedes visualizar el vídeo introductorio para aprender cómo funciona el juego.
Trata de completar todos los niveles del juego. Presta atención.
Tras completar el último nivel, haz una captura de pantalla del programa que has realizado, haciendo clic en la tecla Impr Pant de tu teclado. Luego abre un documento nuevo en un procesador de texto y pega la captura. Guarda la práctica como UD01_P1_E1_nombreapellido.

Una vez creado el programa con el conjunto de bloques, haz clic en Ejecutar. En esta zona comprobarás si el algoritmo indicado a BB-8 es correcto y consigue todos los objetivos.

El personaje te indica qué tienes que conseguir en cada caso.

En esta parte de la imagen, arrastra los bloques de instrucciones en el orden en que quieres que BB-8 las ejecute. Si te equivocas, sólo tienes que seleccionar la instrucción equivocada y arrastrarla hasta el conjunto de instrucciones de la izquierda para eliminarla.

Ejercicio 2. Minecraft

En esta ocasión vas a jugar a Minecraft. En la página de La Hora del Código, y de la misma forma que en el ejercicio anterior, entra en el juego Voyage Aquatic de Minecraft, que está dentro de Hora del Código de Minecraft. La URL de este juego es https://studio.code.org/s/aquatic/lessons/1/levels/1.
Visualiza el vídeo explicativo. En esta ocasión las instrucciones de juego te las explica un personaje de Minecraft.
Después de ver el vídeo, escoge qué personaje quieres ser: Steve o Alex. El funcionamiento de este juego es muy similar al anterior, pero los bloques de código son diferentes.
Tras completar el último nivel, haz una captura de pantalla del programa que has realizado, haciendo clic en la tecla Impr Pant de tu teclado. Luego abre un documento nuevo en un procesador de texto y pega la captura. Guarda la práctica como UD01_P1_E2_nombre- apellido.

El personaje te indica qué tienes que conseguir en cada caso. En este juego te aparecerá Alex o Steve, según tu elección.

Comprueba en esta zona la exactitud del algoritmo que has realizado, haciendo clic en Ejecutar.

Arrastra los bloques de instrucciones en el orden en que quieres que sean ejecutados.

Este juego incluye bloques con instrucciones iterativas y selectivas en las que hay que anidar otras instrucciones. Por ejemplo:

Práctica 2. Tus primeros programas. Gobstones

Gobstones es un lenguaje de programación desarrollado por un equipo de la Universidad Nacional de Quilmes (Argentina) y diseñado para enseñar a programar. En esta práctica usaremos el entorno de programación júnior.

En Gobstones se programa para cuatro bolitas de estos colores: azul, rojo, verde y negro.

Accede a la web http://gobstones.github.io y haz clic en ¡Probá Gobstones Web ahora! Elige a continuación Gobstones Jr para entrar en su entorno de programación.
Te aparecerá una ventana en la que abrir algún ejercicio que tengas guardado. Ciérrala para empezar el primer ejercicio y comprueba que accedes a una pantalla como la de la imagen.

La brújula de Gobstones indica la dirección de los movimientos.

En esta parte de la pantalla aparecen las instrucciones disponibles para trabajar en Gobstones. En la parte superior están los iconos que permiten abrir proyectos guardados y guardar los que hagas.

Para crear un programa debes arrastrar instrucciones desde la izquierda hasta la parte central y colocarlas unidas unas debajo de las otras. Si quieres eliminar una instrucción, debes arrastrarla hasta la papelera.

En el tablero de Gobstones vemos el resultado del programa realizado cuando pulsamos el icono de reproducción de la esquina inferior derecha.

Si el programa no es adecuado para el problema que hay que resolver, aparecerá en pantalla un mensaje de error que simula una explosión.

Ejercicio 1. Situar cuatro bolas de color en la primera casilla del tablero

En la barra de menús de la izquierda, haz clic en Comandos y luego en Comandos primitivos. Selecciona el bloque Poner y anídalo dentro del bloque programa.
En la misma barra de menús, haz clic en Expresiones y luego en Literales. Selecciona el bloque Azul y colócalo dentro de la instrucción Poner.

Fig. 1

Sitúa el cursor sobre la instrucción Poner y haz clic con el botón derecho (figura 1). Selecciona Duplicar para crear una copia de esta instrucción. En la copia, haz clic en la flecha del desplegable que aparece junto a la palabra “Azul” y elige otro color (por ejemplo, Verde). Anida esta instrucción debajo de la que has hecho en el paso 2, dentro de programa.
Repite el paso 3 dos veces más hasta tener una instrucción Poner para el color Rojo y otra para el color Negro. Anídalas unas debajo de las otras (figura 2).
Haz clic en el botón de reproducción y comprueba que aparecen cuatro bolas, cada una de un color, en la celda inferior izquierda del tablero.
En la parte superior de la pantalla, cambia el título Nuevo proyec- to por UD01_P2_E1_nombreapellido y haz clic en el icono Guardar . Se descargará un archivo que puedes guardar en tu carpeta de prácticas.

Fig. 2

Ejercicio 2. Mover bolas por el tablero

Vamos a modificar el programa anterior para que se sitúe una bola de cada color en cada una de las cuatro esquinas del tablero.

Abre el programa que has hecho en el ejercicio anterior haciendo clic en el icono Abrir de la barra de herramientas superior.
En el menú Comandos / Comandos primitivos, elige la instrucción Mover.
En el menú Expresiones / Literales, escoge el bloque Norte y sitúalo dentro de la instrucción Mover. De esta forma indicamos el sentido de desplazamiento de las bolas.
Anida la instrucción Mover Norte que acabas de crear debajo del bloque Poner Azul.
Crea otras dos instrucciones Mover Norte y anídalas en el bloque Poner Azul para mover la bola azul hasta la esquina superior izquierda.
De la misma forma, pon tres instrucciones Mover debajo de la segunda instrucción Poner. En este caso, la dirección será Este (observa la brújula) para llevar hasta la esquina superior derecha la bola verde.
Finalmente, pon otras tres instrucciones Mover debajo de la tercera instrucción Poner. Como dirección, elige en este caso Sur para trasladar la bola negra hasta la esquina inferior derecha.
Tendrás un programa como el de la figura 3.

Fig .3

Fig. 4

Haz clic en el botón de reproducción y comprueba que aparecen cuatro bolas, cada una de un color, en las cuatro esquinas del tablero.
Guarda el proyecto como UD01_P2_E2_nombreapellido en tu carpeta de prácticas.

Ejercicio 3. Instrucción “Repetir”

Abre el programa del ejercicio anterior desde la barra de herramientas superior.
Ahora vamos a mejorar el programa que has hecho en el ejerci- cio 2, utilizando comandos de repetición.
En el menú Comandos / Repeticiones, escoge el bloque repetir ... veces y arrástralo hasta la zona de programación de Gobstones.
En el menú Expresiones / Literales, escoge el bloque 0 y colócalo dentro de la instrucción repetir. Cambia el 0 por un 3.
Anida dentro del bloque repetir una de las tres instrucciones Mover que has utilizado para desplazar la bola azul y elimina las otras dos.
Coloca la instrucción repetir debajo de la instrucción Poner Azul.
Repite los pasos necesarios para crear una instrucción repetir para cada bola y colócalas debajo de las instrucciones Poner correspondientes.
Tendrás un programa como el de la figura 4.
Haz clic en el botón de reproducción y comprueba que, al igual que en el ejercicio 2, aparecen las cuatro bolas, cada una de un color, en las cuatro esquinas del tablero.
Guarda el proyecto como UD01_P2_E3_nombreapellido en tu carpeta de prácticas.

Fig. 5

Ejercicio 4. Definir procedimientos

Una utilidad del programa Gobstones es la de poder definir procedimientos propios para usarlos fácilmente en el programa. Así, en vez de volver a escribir un conjunto largo de instrucciones, podemos simplemente programar un procedimiento.
En este caso vamos a crear un procedimiento para colocar las bolas de colores en las esquinas del tablero, aprovechando el programa que has realizado en el ejercicio anterior.

Abre el programa del ejercicio anterior desde la barra de herramientas superior.
En el menú Definiciones / Procedimientos, escoge el bloque Define que Hacer algo y arrástralo hasta la zona de programación de Gobstones.
Anida todas las instrucciones del programa del ejercicio anterior (excepto la instrucción programa) dentro de la instrucción Define que Hacer algo.

Cambia el texto “Hacer algo” por “Crear cuadros con bolas de colores”.
Tendrás un programa como el de la figura 5.
Accede ahora al menú Comandos / Mis procedimientos y comprueba que aparece ahí el procedimiento que acabas de crear. Arrástralo hasta la instrucción programa (figura 6) y comprueba su funcionamiento haciendo clic en el botón de reproducción.
Guarda el proyecto como UD01_P2_E4_nombreapellido en tu carpeta de prácticas.

Fig. 6

Ejercicio 5. Alternativas

Abre un proyecto nuevo desde la barra de herramienta superior.
Copia el programa de la figura 7 en la zona de programación de Gobstones. Para encontrar el bloque de instrucciones si ..., accede al menú Comandos / Alternativas.
Haz clic en el icono de reproducción y comprueba qué ocurre.
Guarda el proyecto como UD01_P2_E5_nombreapellido en tu carpeta de prácticas.
Finalmente, contesta en tu cuaderno las siguientes preguntas:

a) ¿Cuántas bolas azules indica el programa que deben aparecer?

b) ¿Por qué aparecen sólo dos bolas azules?

c) Explica el funcionamiento del bloque de instrucciones si ... en este programa.

Fig. 8. El tablero de Gobstones, con las cuatro bolitas de colores en la celda inferior izquierda (0,0)

Fig. 7

DESAFÍOS

Crea con Gobstones un programa que coloque una bola azul en cada una de las celdas de una columna del tablero. Guarda el proyecto como UD01_P2_nombreapellido_desafio1 en tu carpeta de prácticas.
Crea con Gobstones un programa que coloque tres bolas verdes dibujando un triángulo en el tablero. Guarda el proyecto como UD01_P2_nombreapellido_desafio2 en tu carpeta de prácticas.

Práctica 3. Diseñar un algoritmo como solución a un problema

En esta práctica vamos a resolver un problema que se da con cada comienzo de curso: presentarte a tus compañeros y profesores. Si quieres hacerlo de forma original, puedes elaborar un programa en Scratch.

Ejercicio 1. Análisis

Para nuestra presentación utilizaremos el objeto Starfish, de la categoría Animales, y el fondo beach malibu. Los encontrarás en la biblioteca de objetos y la de fondos, respectivamente.

En primer lugar, pensamos cuatro aspectos que definan a nuestro objeto: su nombre y edad, su color favorito, sus gustos y aficiones o su música preferida.

Decidimos que nuestro objeto Starfish se llama Balubita, que tiene 150 años, que su color favorito es el azul y que su música preferida es el hip-hop.

Ejercicio 2. Diseño

Ahora toca diseñar cómo llevar a cabo la presentación. ¿El proyecto se desarrollará secuencialmente? ¿Se deberá repetir alguna instrucción? ¿Será necesario que se cumpla alguna condición para que se activen movimiento, música o efectos sonoros? ¿Se moverá el personaje?

Balubita, para presentarse, quiere decir su nombre, edad y color favorito de forma secuencial. Además, quiere que, al decir su color, ella misma cambie de color y se vuelva azul. Y quiere moverse por la playa. Asimismo, a continuación, Balubita pedirá que hagamos clic en ella para que suene su música preferida.

Ejercicio 3. Diagrama de flujo

Al margen puedes ver el diagrama de flujo que indica el orden de las instrucciones. Corresponde a un algoritmo que combina las estructuras secuencial y selectiva, que ya viste en el curso anterior de esta asignatura.

Ejercicio 4. Programar en Scratch

Ahora codificaremos la presentación en el lenguaje de programación Scratch, siguiendo el diagrama de flujo.

Entra en http://scratch.mit.edu y haz clic en Crear. Inicia un nuevo proyecto yendo a Archivo / Nuevo. Llámalo UD01_P3_nombre- apellido.
Selecciona el personaje y el fondo indicados. Elimina el personaje Objeto1 que viene por defecto.
Comienza la codificación con la instrucción al hacer clic en bandera verde y ve incluyendo cada una de las instrucciones necesarias.
Utiliza la instrucción decir ... durante ... segundos, de la categoría Apariencia, para incluir cada uno de los mensajes. Elige una duración de 2 segundos en cada mensaje.
Para cambiar el color, añade la instrucción dar al efecto color el valor ... y escribe 150 para que el personaje quede de color azul.
Anida después la instrucción deslizar en 1 segs a x: 150 y: -50, de la categoría Movimiento.
Incluye en otro programa, por separado, la instrucción al hacer clic en este objeto, de la categoría Eventos.
Anida en esta instrucción la orden iniciar sonido ..., de la categoría Sonido, y selecciona Hip Hop (este sonido se incluye en la biblioteca de sonidos de Scratch). Para encontrar este sonido, o cualquier otro de la biblioteca, te puede ser útil acceder a la pestaña Sonidos y escribir su nombre en el buscador.

Ejercicio 5. Mejorar la presentación

Puedes mejorar el programa anterior si te fijas en el diagrama de flujo.Como puedes observar, la parte final incluye la condición de que el sonido suene sólo si hacemos clic en el personaje.

Elimina el programa que se ejecuta al hacer clic en el objeto.
En el programa que no has borrado, anida la orden esperar hasta que ..., de la categoría Control, e incluye en ella la instrucción ¿tocando puntero del ratón?, de la categoría Sensores. Así indicamos al personaje que debe esperar hasta que lo toquemos haciendo clic con el puntero del ratón.
Anida ahora la instrucción si ... entonces, de la categoría Control, e incluye en ella la instrucción ¿tocando puntero del ratón?, de la categoría Sensores.
Por último, anida en el bucle si ... entonces la instrucción iniciar sonido Hip Hop, de la categoría Sonido.
Comprueba el resultado haciendo clic en la bandera verde.
Observa que el personaje se queda en la posición x = 150, y = −50 y de color azul. Para evitar esto y hacer que el programa comience con el personaje en su posición y condiciones iniciales, se incluyen habitualmente al comienzo del programa las condiciones de partida. Para ello, añade debajo de la instrucción al hacer clic en bandera verde las instrucciones quitar efectos gráficos, de la categoría Apariencia, e ir a x: -200 y: -50, de la categoría Movimiento. Así, el personaje se situará en esas coordenadas y se mostrará de su color original cada vez que reiniciemos el programa.
Prueba el programa. Descarga el proyecto UD01_P3_nombreapellido.sb3 en tu ordenador yendo a Archivo / Guardar en tu ordenador y seleccionando la carpeta en que guardas tus trabajos.

DESAFÍO

Modifica el programa para que la presentación se ajuste a ti mismo. Puedes incluir tu propia foto como personaje, y como fondo, un lugar en el que te guste estar. Guarda el proyecto como UD01_P3_nombreapellido_desafio1.sb3.

Práctica 4. Lógica booleana: el operador AND. Programamos el
videojuego Los buzos y la medusa

Seguro que en alguna ocasión, jugando a un videojuego, has pasado de pantalla tras conseguir algún reto, superar una determinada prueba o alcanzar una meta.

Para programar esos juegos, se utiliza la lógica booleana.

En esta práctica vamos a realizar un pequeño programa en Scratch para explicar el operador lógico AND.

Ejercicio 1. Planteamiento del problema

Utilizaremos tres personajes de Scratch: Diver1 (buzo 1), Diver2 (bu- zo 2) y Jellyfish (medusa). Necesitaremos también dos fondos diferentes: Underwater 1 y Underwater 2. Si lo prefieres, puedes elegir unos personajes y fondos distintos.

Los buzos y la medusa se moverán aleatoriamente en el escenario 1. Sólo en el caso de que el buzo 1 y el buzo 2 toquen a la medusa, el programa cambiará al escenario 2.

Ejercicio 2. Diagramas de flujo

Los siguientes diagramas de flujo muestran el desarrollo del programa para cada uno de los personajes. Obsérvalos atentamente para entender su codificación en Scratch.

Ejercicio 3. Programar en Scratch

Inicia un nuevo proyecto yendo a Archivo / Nuevo. Llámalo UD01_P4_nombreapellido.
En la ventana inferior derecha, en el apartado Elige un fondo, localiza y selecciona los dos fondos indicados en el ejercicio 1.
Haz clic después en Elige un objeto y selecciona los tres personajes indicados en el ejercicio 1. Elimina el personaje Objeto1 que viene por defecto.
Accede a la pestaña Fondos y, usando la herramienta Texto, escribe en cada uno de los fondos seleccionados el texto “OPERADOR AND”. Elige el formato y el color de texto que te gusten.
En el menú Variables, crea tres variables. Llámalas buzo1, buzo2 y medusa y colócalas para que se vean en la zona baja del fondo. Deberá quedarte un fondo similar al de la imagen:

Sitúate sobre el objeto Diver1 y escribe el programa siguiente:

Sitúate sobre el objeto Diver2 y escribe el programa siguiente:

Fíjate en que al comienzo de los programas de los buzos se establece el fondo Underwater 1 como fondo de inicio y se sitúa a cada buzo en una posición determinada utilizando las instrucciones dar a x el valor ... y dar a y el valor ....
Observa también que las variables buzo1 y buzo2 sólo cambian a valor 1 cuando los personajes Diver1 y Diver2 tocan a Jellyfish.
Para hacer el programa de la medusa, que tienes en la página siguiente, utilizaremos una de las extensiones de Scratch. Haz clic en el icono Añadir extensión y escoge Texto a voz. Comprueba que aparecen tres nuevos bloques de programación.
Por medio de esta extensión, podemos hacer que Scratch reproduzca mediante voz los mensajes que escribimos en la instrucción decir. Utilizaremos el bloque fijar idioma a ... para seleccionar como idioma Español, y el bloque asignar voz a ... para escoger el tono de voz con que se leerá el mensaje.
Sitúate ahora sobre el objeto Jellyfish y escribe para él el programa de la página siguiente.

Fíjate bien en la condición que se establece en el bloque repetir hasta que .... Se han utilizado dos bloques con el operador relacional = (igual que) y un operador booleano y (AND).

Ejercicio 4. Prueba el proyecto que has realizado

Haz clic en la bandera verde y comprueba que sólo cambia el fondo del programa cuando se cumplen dos condiciones. Las variables buzo1, buzo2 y medusa muestran sus valores en código binario. La tabla de verdad de este programa es la que tienes en el margen.
Descarga el proyecto UD01_P4_nombreapellido.sb3 en tu ordenador yendo a Archivo / Guardar en tu ordenador.

Estados:

Tocar medusa: 1
No tocar medusa: 0

DESAFÍOS

Modifica el programa para que la medusa diga “No voy a cambiar de fondo” en todos los casos en los que sólo uno de los buzos la haya tocado. Guarda el proyecto como UD01_P4_nombreapellido_desafio1.sb3.
Modifica el programa para que, cuando Diver1 y Diver2 toquen a Jellyfish, aparezca un fondo en el que esté escrita la tabla de verdad del operador AND. Guarda el proyecto como UD01_P4_nombreapellido_ desafio2.sb3.

Práctica 5. Lógica booleana: el operador OR. Mensajes en Scratch

En esta práctica vamos a utilizar el operador lógico OR para representar una situación que seguro que te es familiar.

Tú quieres salir con tus amigos, pero tus padres te piden que antes de hacerlo dediques algo de tiempo a tus estudios. Por eso, te ponen como condición, para poder salir, que hayas hecho los deberes o hayas estudiado.

Estados:

Hacer deberes: 1
No hacer deberes: 0
Estudiar: 1
No estudiar: 0

Ejercicio 1. Planteamiento del problema

Utilizaremos dos personajes de Scratch, Dan y LB Dance, para representar a tu padre y a tu madre, respectivamente; y el fondo escogido será Room1, para representar tu cuarto. Si lo prefieres, puedes elegir unos personajes y un fondo distintos.

Tu padre te preguntará si has hecho los deberes; tu madre, si has estudiado. Podemos codificar las situaciones hacer los deberes y estudiar en código binario; la tabla de verdad del operador OR será la que tienes en el margen. El programa te indicará que puedes salir en las tres situaciones en las que aparece 1 en la tabla de verdad.

Ejercicio 2. Programar en Scratch

Inicia un nuevo proyecto yendo a Archivo / Nuevo. Llámalo UD01_P5_nombreapellido. Elimina el personaje Objeto1 que viene por defecto e incluye los personajes y el fondo indicados en el ejercicio 1.
Selecciona la categoría Variables y crea dos variables: estudio y deberes. Quita la marca que aparece a la izquierda del nombre de cada una de ellas, para que no aparezcan en pantalla mientras se desarrolla el programa. Estas variables permitirán guardar tus respuestas cuando te hagan preguntas los personajes Dan y LB Dance.
Sitúate sobre el personaje Dan y escribe para él los tres programas siguientes:

Sitúate ahora sobre el personaje LBDance y escribe para él el programa siguiente:

Tildes y mayúsculas en “respuesta”

Fíjate en cómo escribes la condición que debe cumplirse en el operador lógico o (OR). Scratch distingue mayúsculas y minúsculas, y también palabras con tilde y sin ella. Si tu respuesta es “si” o “Si” o “sí”, el programa no entenderá que sea igual a “Sí”.

Mensajes de Scratch

Los mensajes de Scratch no son mensajes propiamente dichos sino que son operaciones internas que se hacen en el programa para activar en el momento deseado una determinada instrucción en un personaje.

Los mensajes se llaman por defecto “mensaje1”, “mensaje2”, etc., pero podemos cambiar el nombre de un mensaje por una pequeña indicación de la acción concreta que se va a activar dentro del programa. Por ejemplo, en nuestro caso, en lugar de mensaje1 podríamos poner “ha estudiado”.

Ejercicio 3. Prueba el proyecto que has realizado

Comprueba que el programa funciona correctamente respondiendo con “Sí” y “No” las preguntas que formulen los personajes. Descarga luego el proyecto UD01_P5_nombreapellido.sb3 en tu ordenador yendo a Archivo / Guardar en tu ordenador.

DESAFÍO

Modifica el programa para que los personajes sólo te dejen salir cuando hayas hecho los deberes y hayas estudiado. Guarda el proyecto como UD01_P5_nombreapellido_desafio1.sb3.

Práctica 6. Búsqueda de datos en Scratch. Listas

Fig. 9

En Scratch podemos guardar en una lista un conjunto de datos ordenados. Cada uno de estos datos se identifica por su índice o posición dentro de la lista.

Digamos que una lista es como un archivador en el que tienes un espacio para los apuntes de cada asignatura.

En esta práctica vas a aprender a generar listas de diferentes maneras.

Ejercicio 1. Crear una lista

En Scratch, inicia un nuevo proyecto yendo a Archivo / Nuevo. Llámalo UD01_P6_1_nombreapellido.
En Variables, haz clic en Crear una lista. Llámala mis colores preferidos (figu- ra 9). Comprueba que aparecen nuevas instrucciones asociadas a esta lista.

Instrucciones de lista

Fig. 10

Elimina el personaje Objeto1 que viene por defecto y haz clic en Elige un objeto para escoger el personaje Dani.
Escoge el bloque al hacer clic en bandera verde, de la categoría Control, y anida debajo de éste el bloque añadir cosa a mis colores preferidos, del menú Variables (figura 10). Cambia “cosa” por uno de tus colores preferidos. Si haces clic en la bandera verde, ese primer color se añadirá a la lista que tienes en el escenario.
Para añadir valores a la lista, simplemente haz clic en el signo + que hay en el borde inferior de la lista y escribe, por orden, otros cuatro colores que te gusten.
Copia, para el mismo personaje, el programa de la figura 11. Este programa se activa al presionar la tecla espacio e incluye la instrucción insertar rosa en 3 de mis colores preferidos, que lo que hace es situar el color rosa en la posición 3 de la lista. La última instrucción de este programa sirve para que el personaje diga el número de elementos que tiene la lista.

Fig. 11

Prueba el programa. Descarga el proyecto UD01_P6_1_nombreapellido.sb3 en tu ordenador yendo a Archivo / Guardar en tu ordenador.

Ejercicio 2. Listas dinámicas

Las listas dinámicas son listas que pueden rellenarse con un número diferente de datos cada vez que se utilizan. En este caso, vas a programar con Scratch una lista dinámica en la que incluirás el nombre de todos tus tíos y tías.

Inicia un nuevo proyecto yendo a Archivo / Nuevo. Llámalo UD01_P6_2_nombreapellido.
Elimina el personaje Objeto1 que viene por defecto y escoge el personaje Abby.
En el menú Variables, crea una lista y llámala mis tíos y tías.

Copia para el personaje Abby el programa de la figura 12. Este programa pregunta en primer lugar cuántos tíos y tías tienes, y después, mediante la instrucción repetir ..., inicia un ciclo en el que pide el nombre de cada uno de ellos y los va incluyendo todos en la lista.
Prueba el programa. Rellena la lista con los nombres de tus tíos y tías, o con otros que te gusten. Comprueba que el tamaño de la lista cambia en función de la respuesta que le des a la pregunta inicial.

Fig. 12

Ejercicio 3. Buscar datos en las listas

La instrucción ¿cosa está en ...?, del menú Variables, sirve para buscar datos dentro de una lista de Scratch.

Abre el proyecto del ejercicio anterior y llámalo UD01_P6_3_nombreapellido.
Sin eliminar el programa que ya tiene el personaje Abby, copia para éste el programa de la figura 13. Cambia “cosa” por el nombre de una de tus tías (en nuestro ejemplo, “Alicia”) y prueba su funcionamiento. Pruébalo también cambiando “cosa” por un nombre que no esté incluido en tu lista.
Descarga el proyecto UD01_P6_3_nombreapellido.sb3 en tu ordenador yendo a Archivo / Guardar en tu ordenador.

Fig. 13

Práctica 7. La lista de la compra con Scratch

Fig. 14

En esta práctica vamos a realizar un pequeño programa en el que compraremos en una tienda de alimentación una serie de productos que se irán añadiendo en una lista. Al final, un personaje nos indicará todo lo que hemos comprado.

Ejercicio 1. Realizar la interfaz

Inicia un nuevo proyecto yendo a Archivo / Nuevo. Llámalo UD01_P7_nombreapellido.
Vamos a simular una tienda con algunos productos de alimentación. Para ello, ve a Elige un fondo y escoge Refrigerator.
Elimina el personaje Objeto1 que viene por defecto y haz clic en Elige un objeto para escoger el personaje Ruby.

Fig. 15

Añade estos otros objetos: Apple, Bananas, Bread, Donut, Milk, Muffin, Strawberry y Watermelon. Todos ellos se encuentran en la categoría Comida.
Recoloca los alimentos en el fondo y modifica sus tamaños para que parezcan alimentos distribuidos en los estantes de una tienda (figuras 14 y 15).

Fig. 16

Ejercicio 2. Crear la lista

En el menú Variables, crea una lista y llámala lista de la compra (figura 16).

Ejercicio 3. Programar los alimentos

Cada uno de los alimentos que has situado en el escenario llevará dos programas asociados. Para empezar, sitúate en el objeto Bananas.
Para realizar el primer programa, selecciona el bloque al hacer clic en este objeto, de la categoría Eventos, y arrástralo hasta el área de código. Anida debajo el bloque añadir cosa a lista de la compra, de la categoría Variables, y cambia “cosa” por “plátanos”. Finalmente, añade debajo de esta instrucción el bloque esconder, de la categoría Apariencia. De esta manera, cuando hagamos clic en el objeto Bananas, se añadirá el nombre “plátanos” a la lista de la compra y el objeto desaparecerá del escenario.
Para realizar el segundo programa de este objeto necesitarás el bloque al hacer clic en bandera verde, del menú Control, y el bloque mostrar, de la categoría Apariencia.
Comprueba que el objeto Bananas tiene los dos programas de las figuras 17 y 18.

Fig. 17

Fig. 18
El funcionamiento de los demás alimentos será el mismo, por lo cual todos tendrán estos dos mismos programas, pero no te va a hacer falta crearlos de nuevo para cada objeto, sino que solamente has de arrastrar esos dos programas del objeto Bananas hasta cada uno de los objetos que hay en la lista situada debajo del escenario. Luego, claro está, habrá que cambiar en cada alimento la palabra “plátanos” por el nombre correspondiente.
Comprueba que todos los alimentos tienen esos dos programas, y luego, en cada uno de ellos, en la instrucción añadir plátanos a lista de la compra, cambia la palabra “plátanos” por el nombre correspondiente de cada alimento.

Ejercicio 4. Programar el personaje Ruby

Ruby será la compradora de la tienda. Para ella también necesitarás dos programas (figuras 19 y 20).

El primero de ellos se utiliza para vaciar la lista de la compra cada vez que se hace clic en la bandera verde e indicar que se inicia la compra.
El segundo programa permite que Ruby indique todos los alimentos que hemos comprado para el desayuno. Este programa incorpora una variable denominada posición, que tenemos que definir en el menú Variables. El uso de la variable permite al personaje indicar de uno en uno, por orden, todos los elementos incluidos en la lista de la compra.

Copia estos dos programas para el personaje Ruby:

Fig. 19

Fig. 20

Ejercicio 5. Prueba el proyecto que has realizado

Una vez completada la programación, vamos a probar el programa. Para ello, en primer lugar, haz clic en la bandera verde para hacer una lista nueva.
Escoge cinco productos del mercado haciendo clic en cada uno de ellos. Comprueba que, a medida que los escoges, desaparecen del escenario y se añaden a la lista.
Haz clic en el personaje Ruby, que te dirá el nombre de cada uno de los alimentos que ha comprado.
Descarga el proyecto UD01_P7_nombreapellido.sb3 en tu ordenador yendo a Archivo / Guardar en tu ordenador.

DESAFÍOS

Crea una lista en la que indiques manualmente el nombre de diez compañeros de clase. Guarda el proyecto como UD01_P7_nombreapellido_desafio1.sb3.
Crea una lista dinámica en la que el programa te pida cuántas son tus canciones favoritas y rellene la lista con el título de todas ellas. Guarda el proyecto como UD01_P7_nombreapellido_desafio2.sb3.

Práctica 8. Polígonos de colores. Subalgoritmos en Scratch

En ocasiones, para evitar que los programas sean demasiado largos utilizamos subalgoritmos o procedimientos, que son pequeños programas a los que llama un programa principal para su ejecución.

Fig. 21

Ejercicio 1. Dibujar un polígono en Scratch

Inicia un nuevo proyecto yendo a Archivo / Nuevo. Llámalo UD01_P8_1_nombreapellido.
Haz clic en Añadir extensión y elige Lápiz.
Copia el programa de la figura 21 para el personaje que aparece por defecto.

Prueba el programa con distintos números de lados.

Ejercicio 2. Crear un subalgoritmo

Vamos a modificar el programa anterior para crear un subalgoritmo que se pueda utilizar desde el programa principal.

Accede al menú Mis bloques y haz clic en Crear un bloque. Escribe como nombre dibujar polígonos (figura 22).
Comprueba que ha aparecido en tu espacio de programación un bloque nuevo, definir dibujar polígonos (figura 23), similar a los bloques de inicio del menú Eventos. Anida debajo de dicho bloque todo el programa anterior, excepto la instrucción al hacer clic en bandera verde.
Debajo del bloque al hacer clic en bandera verde (que ha quedado en el área de código), anida las instrucciones decir Vamos a dibujar polígonos por 2 segundos, de la categoría Apariencia, y dibujar polígonos, de la categoría Mis bloques.

Fig. 22

Fig. 23

En tu área de código has de tener un programa que comienza con la instrucción al hacer clic en bandera verde (figura 24) y un subalgoritmo o procedimiento de ese programa que comienza con la instrucción definir dibujar polígonos.
Prueba el proyecto haciendo clic en la bandera verde.
Descarga el proyecto UD01_P8_1_nombreapellido.sb3 en tu ordenador yendo a Archivo / Guardar en tu ordenador.

Fig. 24

Ejercicio 3. Subalgoritmos con parámetros

En Scratch, los procedimientos pueden incluir diferentes parámetros que permiten el intercambio de datos entre el programa principal y el subalgoritmo. Los parámetros pueden ser de tres tipos: un número o texto, una expresión booleana o una etiqueta.

En este caso, vamos a crear un subalgoritmo con tres parámetros de tipo numérico.

Inicia un nuevo proyecto yendo a Archivo / Nuevo. Llámalo UD01_P8_2_nombreapellido.
Accede al menú Mis bloques y crea un bloque llamado dibujar polígono. Añade en él dos parámetros de tipo número llamados color y lados (figura 25).
Para el personaje, copia el procedimiento de la figura 26:

Fig. 25

Fig. 26

Copia ahora el programa principal siguiente (figura 27):

Fig. 27

Comentarios

Para hacer aclaraciones sobre el funcionamiento de un programa, puedes incluir comentarios en él.

Por ejemplo, sitúate sobre la primera instrucción del subalgoritmo que has creado. Haz clic con el botón derecho y escoge Añadir comentario. Teclea “Este procedimiento dibuja polígonos de colores aleatorios”.

Ejercicio 5. Prueba el proyecto que has realizado

Prueba el programa haciendo clic en la bandera verde. Haz clic en cualquier parte del escenario para ver los polígonos que se van dibujando.
Descarga el proyecto UD01_P8_2_nombreapellido.sb3 en tu ordenador yendo a Archivo / Guardar en tu ordenador.

DESAFÍOS

Fijándote en el ejercicio 1 de esta práctica, modifica el programa que has realizado en la práctica 3 de esta unidad definiendo el procedimiento de presentación. El procedimiento debe ser llamado desde el programa principal. Guarda el proyecto como UD01_P8_nombreapellido_desafio1.sb3.
Fijándote en el ejercicio 3 de esta práctica, modifica el programa que has realizado en la práctica 3 de esta unidad definiendo el procedimiento de presentación con dos parámetros llamados edad y color preferido. En el programa principal se definirá el valor de estos parámetros y se llamará al procedimiento de presentación. Guarda el proyecto como UD01_P8_nombreapellido_desafio2.sb3.

Práctica 9. Extensiones de Scratch. Integración de gráficos y sonidos

Inicia un nuevo proyecto yendo a Archivo / Nuevo. No hace falta que le pongas nombre al proyecto, no lo vamos a guardar.
Debajo de las categorías de bloques, en la esquina inferior izquierda, tienes el botón Añadir extensión (figura 28). Púlsalo y verás que te aparecen las extensiones de Scratch (figura 29), que son una serie de funcionalidades que te permiten programar tanto software como hardware.

Fig. 28

Fig. 29

Selecciona las siguientes extensiones de software: Música, Lápiz, Texto a voz y Traducir. Verás que se incorporan a la columna de categorías de bloques. Observa los bloques que contienen estas extensiones, pruébalos y trata de imaginar qué podrías hacer con cada uno de ellos. Estas extensiones son muy útiles, nos sirven para lo siguiente:

Música: para tocar instrumentos
Lápiz: para dibujar con los objetos
Texto a voz: para hacer que tus proyectos hablen
Traducir: para traducir textos a muchos idiomas

Vocabulario

El hardware es la parte física del ordenador. Scratch permite programar varios dispositivos, como por ejemplo una webcam o la placa Makey Makey.

El software son los programas, como los que hacemos con Scratch.

A continuación, usando un procesador de texto, redacta un documento en el que expongas todo lo que has imaginado sobre los bloques de extensiones de software. Guarda el documento como UD01_P9_nombreapellido.
Ahora selecciona la extensión de hardware Sensor de vídeo, para interaccionar con la webcam. Observa los bloques que contiene esta extensión, pruébalos y trata de imaginar qué podrías hacer con ellos. A continuación, escríbelo también en tu documento, y luego guárdalo y ciérralo.
Por último, prueba la extensión Makey Makey (figura 30) y observa sus bloques (figura 31). Esta extensión sirve para convertir cualquier cosa en un teclado y la vamos a probar en las prácticas de taller (en las siguientes páginas).

Fig. 30

Fig. 31

Práctica 10. Utilizar la placa Makey Makey con Scratch

Materiales

Placa Makey Makey con 5 cables de tipo cocodrilo y el cable USB (incluidos en el kit)
Papel de aluminio

Objetivos

Comprobar el funcionamiento de la placa Makey Makey con Scratch
Aprender a conectar el ordenador con el mundo real

Montaje de la placa Makey Makey paso a paso

Conecta la placa mediante el cable USB.
Coge un cable de tipo cocodrilo y conecta la placa a tierra por un extremo. Para ello, coloca el cocodrilo (o sea, la pinza) de este extremo en cualquiera de los pines señalados como GROUND. Después coge el cocodrilo del otro extremo con la mano izquierda y toca la parte metálica con tu pulgar izquierdo.
Ahora conecta la flecha derecha de la placa. Para ello, coge el otro cable y coloca el cocodrilo de un extremo en el pin correspondiente. Después coge el cocodrilo del otro extremo con la mano derecha. A partir de ahora, cada vez que toques con tu pulgar derecho será como si pulsaras la flecha derecha del teclado.

Utiliza el buscador de Scratch para encontrar un juego que utilice las flechas de teclado. Pulsa la bandera verde y toca el cocodrilo que tienes en la mano derecha. ¿Ves qué ocurre? ¡El programa está gobernado ahora por tu mano a través de la placa!
Conecta, de la misma forma que lo has hecho para la flecha derecha, el resto de las flechas.
Vamos a sustituir la forma en que conectamos la placa a tierra para que sea más cómodo. En lugar de tocar el cocodrilo con nuestro pulgar izquierdo, hazte una pulsera de papel de aluminio como la de la figura y sujeta a ella el cocodrilo.
Fabrica cuatro cuadrados de papel de aluminio como el de la siguiente figura y conecta uno a cada uno de los cocodrilos de las flechas. ¡Ya tienes tu mando para jugar! Coloca los cables y los cuadrados como te sea más cómodo para jugar.
Ve al juego de Scratch que has encontrado antes, pulsa la bandera verde y juega utilizando el mando que acabas de construir con la placa.

Práctica 11. Interaccionar con frutas

Materiales

Placa Makey Makey con 2 cables de tipo cocodrilo y el cable USB (incluidos en el kit)
Papel de aluminio
4 piezas de fruta

Objetivos

Comprobar el funcionamiento de la placa Makey Makey
Aprender a conectar el ordenador con el mundo real

Montaje paso a paso

Conecta la placa mediante el cable USB y el resto de los pines como has hecho en la práctica anterior.
En lugar de conectar los pines al papel de aluminio, vamos a conectarlos a piezas de fruta, como en la figura.
Abre el juego de la práctica anterior y juega usando tu mando de frutas.

DESAFÍOS

Realiza un programa de Scratch en el que uses los pines SPACE y CLICK de la placa Makey Makey. SPACE sirve para conectar la barra espaciadora y CLICK sirve para conectar el ratón.
En Scratch, ve a Explorar y haz la búsqueda “Makey Makey”. Encontrarás muchos juegos que usan esta placa. Prueba varios e investiga cómo funcionan. Selecciona el juego que más te guste e inventa una forma de interaccionar distinta de la propuesta en él.

Fijate y resuelve

A la vista de los resultados ¿crees que el cuerpo humano es conductor? ¿Y la fruta?

Práctica 12. App Inventor: conexiones

Fig. 32

Fig. 33

App Inventor es un lenguaje de programación similar a Scratch que permite realizar aplicaciones para smartphones con sistema operativo Android. Lo único que necesitas es una cuenta de Gmail.
Entra en la web http://appinventor.mit.edu y haz clic en Create Apps! (figura 32). Aparecerá una página en la que te pedirán que te registres con tu cuenta de Gmail. Después de hacerlo y de aceptar los términos y condiciones, se abre entonces la interfaz de App Inventor. Selecciona el idioma Español (en el menú de arriba a la derecha) y observa la pantalla principal de la aplicación y sus menús de opciones.

Antes de empezar a programar, es importante que conozcas cómo se visualizan las aplicaciones programadas. Tienes varias formas de ver su funcionamiento. Seguidamente te indicamos las dos más comunes: utilizar un emulador y conectar directamente tu smartphone.

Fig. 34

Fig. 35

Ejercicio 1. Utilizar el emulador

Accede a http://appinventor.mit.edu/explore/ai2/setup-emulator.html y selecciona las instrucciones correspondientes a tu sistema operativo (figura 33). Haz clic en Download the installer y sigue los pasos que te va indicando hasta finalizar la instalación del emulador.
Aparecerá la consola de aiStarter en el escritorio, que no debes cerrar mientras estés programando con App Inventor (figura 34).
Vuelve ahora a App Inventor (en el navegador) y ve a Conectar / Emulador, como se indica en la figura 35. Sé paciente, la primera vez que se conecta puede tardar un poco. Si aparece una ventana que te avisa de que debes seleccionar un proyecto, crea uno nuevo y llámalo Prueba. Cuando esté conectado, aparecerá en la pantalla la imagen de un móvil, donde podrás ver el funcionamiento de tus aplicaciones.

Fig. 36

Ejercicio 2. Conectar el smartphone con una red Wi-Fi

Descarga en tu teléfono móvil la aplicación MIT AI2 Companion. La puedes encontrar en la Play Store.
Conecta tu teléfono móvil a la misma red Wi-Fi a la que esté conectado el ordenador con el que estás trabajando. Probablemente esta opción en clase no la puedas llevar a cabo, pero es la forma ideal de trabajar si lo haces en tu casa.
En la pantalla de App Inventor del ordenador, selecciona Conectar y haz clic en AI Companion. Aparecerán entonces en la pantalla un código de letras y un código QR.
Abre la aplicación MIT AI2 Companion del teléfono móvil. Aparecerán en tu teléfono un lector de códigos QR y un espacio para introducir el código.
Puedes realizar la conexión de las dos formas: leyendo el código QR con el móvil o introduciendo directamente el código de letras (figura 36).
Los cambios que hagas en el ordenador los verás automáticamente en la pantalla de tu teléfono.

DESAFÍO

En el caso de que no puedas conectarte a la red Wi-Fi de tu ordenador, puedes conectar el teléfono al ordenador mediante el cable USB. Lee el archivo UD01_P12_USB.pdf que tienes en la unidad 1 de tu espacio web para saber cómo hacerlo.

Práctica 13. App Inventor: listening

En esta práctica vamos a usar imágenes y sonido para realizar un ejercicio de listening en inglés. Al pulsar sobre la imagen que aparezca en tu teléfono, escucharás un audio en dicho idioma.

Ejercicio 1. Realizar la interfaz

Inicia un proyecto nuevo yendo a Proyectos / Comenzar un proyecto nuevo. Llámalo UD01_P13_nombreapellido.
En Paleta están los elementos que vas a poner en la pantalla de tu móvil. Arrastra desde Paleta a Screen1 un botón. Desde Paleta / Medios, arrastra también un reproductor. Observa cómo el reproductor no aparece en la pantalla sino debajo de ella, en el apartado Componentes no visibles.
En Propiedades (a la derecha) de Screen1, en Título, escribe “Listening”. Ve a Imagen de fondo y selecciona Subir archivo. Carga el archivo UD01_P13_imagen.jpg de la unidad 1 de tu espacio web.
Haz clic en Botón, y en Texto para botón escribe “Pulsa para escuchar” en letra cursiva.
Haz clic en Reproductor1, y en Propiedades ve a Origen y selecciona Subir archivo. Carga el archivo UD01_P13_listening.mp3 de la unidad 1 de tu espacio web.

Ejercicio 2. Crear el programa

Haz clic en Bloques (en la parte superior derecha) para empezar a crear el programa. Haz clic en Botón1 y selecciona el bloque cuando Botón1 Clic ejecutar.
Haz clic en Reproductor1 y anida en el bloque anterior la instrucción llamar Reproductor1 Iniciar (figura 37).

Fig. 37

Conecta el emulador o smartphone y prueba tu programa.

Ejercicio 3. Compilar los programas de App Inventor

Los archivos creados con App Inventor tienen la extensión .aia. Estos archivos pueden modificarse en la interfaz del programa y podemos ver cómo funcionan en el emulador o en nuestro teléfono móvil. Pero no son aplicaciones que podamos instalar o distribuir.
Para obtener una copia de la aplicación que sí permita su instalación y distribución, necesitas compilar el programa. Para ello, cuando has terminado la programación y has comprobado que tu aplicación funciona, tienes que hacer clic en Generar.
Las opciones que te muestra la interfaz son App (generar código QR para el archivo .apk) y App (guardar archivo .apk en mi ordenador) (figura 38). Cualquiera de las dos opciones te sirve. Lo más rápido es copiar el código QR, pero para ello tu móvil debe tener instalado un lector de códigos. Si no es así, guarda el archivo .apk en tu ordenador y más tarde lo podrás pasar mediante el cable USB a tu teléfono.

Fig. 38

DESAFÍO

Crea un programa nuevo, basado en el de esta práctica, pero cambiando el reproductor por un sonido de la categoría Medios. ¿Qué efecto produce en la aplicación? Llámalo UD01_P13_nombreapellido_ desafio1.

Práctica 14. App Inventor. Diseño de la interfaz de usuario. Cálculo de magnitudes eléctricas

Vamos a crear una aplicación para calcular el valor de la intensidad (I) que circula por un circuito eléctrico conocidos el voltaje (V) y la resistencia (R).

Fig. 39

Ejercicio 1. Realizar la interfaz

Inicia un proyecto nuevo yendo a Proyectos / Comenzar un proyecto nuevo. Llámalo UD01_P14_nombreapellido.
Arrastra desde Paleta a Screen1 los siguientes elementos, en este orden: una etiqueta (1), un campo de texto (1), otra etiqueta (2), otro campo de texto (2) un botón (1) y otra etiqueta (3). Te debe quedar una pantalla como la de la figura 39.
Haz clic en la Etiqueta1. En Propiedades, en Texto para Etiqueta1, escribe “Introduce el valor de V”.
Haz clic en el CampoDeTexto1. En Propiedades, marca Sólo números. Borra la información del campo Pista. Haz lo mismo con el CampoDeTexto2.

Fig. 40

Haz clic en la Etiqueta2. En Propiedades, en Texto para Etiqueta2, escribe “Introduce el valor de R”.
Haz clic en el Botón1. En Propiedades, haz lo siguiente: en Texto para Botón1 escribe “Calcular”; en Tamaño de letra elige 14; marca la opción Negrita; y en Ancho marca Ajustar al contenedor.
Haz clic en la Etiqueta3. En Propiedades, en Texto para Etiqueta3, escribe “El valor de I es”.
Finalmente, para cambiar el nombre Screen1, en Propiedades, en Título, escribe “Electricidad”. Te debe quedar una pantalla como la de la figura 40.

Ejercicio 2. Crear el programa

Haz clic en Bloques para insertar los bloques de programa.
Vamos a definir las tres variables: V, I y R. Para ello, selecciona inicializar global (nombre) como en la categoría Variables. Duplica dos veces esa instrucción y ponles como nombre V, I y R. Selecciona después, en la categoría Matemáticas, el bloque 0 y pégalo en cada uno de los bloques anteriores (figura 41).

Fig. 41

Selecciona el Botón1 y elige el bloque cuando Botón1 Clic ejecutar. Anida dentro de este bloque las instrucciones que se indican a continuación (y que se muestran en la figura 42).
En la categoría Variables, selecciona poner ... a. En el desplegable selecciona global V. Finaliza esta instrucción haciendo clic en CampoDeTexto1 y eligiendo CampoDeTexto1. Texto. Duplica la instrucción creada y repite estos pasos pero adaptados para global R y CampoDeTexto2.
En la categoría Variables, selecciona la instrucción poner ... a, anídala y elige global I. Finaliza con el bloque de división de la categoría Matemáticas. Rellena los campos de la división con dos bloques tomar ... de la categoría Variables y ponles global V y global R.
Finalmente, haz clic en la Etiqueta3. Selecciona poner Etiqueta3. Texto como. Finaliza esta instrucción con tomar ... de la categoría Variables y elige global I (figura 43).
Conecta el emulador o smartphone y prueba tu programa.

Fig. 42

Fig. 43

DESAFÍO

Crea un programa nuevo, basado en el de esta práctica, de modo que, además de mostrarse el valor de la intensidad, se muestre también la palabra “amperios”, que es la unidad en que se mide esta magnitud. (Una pista: en la categoría Texto, presta atención al bloque unir y al bloque “ ”.) Llámalo UD01_P14_nombre- apellido_desafio1.

Práctica 15. Archivos HTML. Mi primera página web

Los archivos HTML son aquellos que se utilizan para hacer páginas web, ya que son interpretados por el navegador. En esta práctica vas a aprender a generar un archivo HTML utilizando algunas instrucciones sencillas del lenguaje HTML.

Fig. 44

Empezar a trabajar con HTML no es complicado, pero hay que ser muy cuidadoso a la hora de introducir etiquetas y atributos. Cualquier error hará que la página que estamos construyendo no se visualice correctamente en el navegador. Cuando esto te ocurra, analiza el código e intenta localizar el error. Equivocarse al principio es la mejor forma de aprender.

Abre el bloc de notas yendo a Inicio / Todos los programas / Accesorios / Bloc de notas (figura 44).

Fig. 45

Copia en el bloc de notas las etiquetas básicas que siempre debe tener una página (figura 45). Respeta el orden y los huecos.
Añade el título (“Mi primera página”, sin comillas) entre las etiquetas <title> y </title>. Luego añade el contenido de la página (“Aprendiendo HTML”, sin comillas) entre las etiquetas <body> y </body>. El resultado lo tienes en la figura 46.
En el menú Archivo elige Guardar como. En la opción Tipo selecciona Todos los archivos y en Nombre escribe “UD01_P15_nombreapellido.html”. Es tu primer archivo de código fuente.
Accede a la carpeta donde está guardado.
Haz doble clic sobre el archivo que acabas de crear. Se abrirá el navegador que tengas establecido como predeterminado y te deberá aparecer el resultado de la figura 47.
Observa que el texto que está entre las etiquetas <head> y </head> aparece en la barra de títulos del navegador. Observa dónde aparece el contenido.
No cierres ni el bloc de notas ni el navegador para continuar con la práctica siguiente.

DESAFÍOS

Pon la frase “Aprendiendo HTML” en negrita. Guarda la página como UD01_P15_nombreapellido_desafio1.html.
<b>Texto en negrita</b> → Texto en negrita
Pon la frase “Aprendiendo HTML” en cursiva. Guarda la página como UD01_P15_nombreapellido_desafio2.htm
<b>Texto en cursiva</b> →Texto en cursiva

Práctica 16. Añadir código fuente en la página HTML

Ejercicio 1. Encabezados y color de fuente

Vamos a añadir un encabezado al texto, es decir, vamos a hacer que se vea un título en la página web. Para ello, introduce el siguiente elemento justo después de la etiqueta <body>, tal como se ve en la figura 48:

<h1> Computación y Robótica </h1>

Guarda el archivo. Actualiza la página web en el navegador pulsando F5 y observa el resultado.
Sin cerrar ni el bloc de notas ni el navegador, vamos a modificar la etiqueta anterior haciendo que el encabezado aparezca en rojo. Para ello introduce la etiqueta <font> con su atributo color con la sintaxis adecuada, como se indica a continuación:

<h1><font color="red">Computación y Robótica</font></h1>

Fig. 48

Observa que los valores de los atributos se escriben entre comillas y después del signo igual (=). Y fíjate en que para cada etiqueta de apertura hay una de cierre.
Guarda el archivo. Actualiza la página web y observa el resultado.
Sin cerrar ni el bloc de notas ni el navegador, vamos a introducir un párrafo y alinearlo a la derecha. Para ello introduce las etiquetas <p align="right"> y </p> antes y después del texto “Aprendiendo HTML”, es decir:

<p align="right"> Aprendiendo HTML </p>

El código debe quedarte así (figura 49):

Fig. 49

Guarda el archivo. Actualiza la página web y observa el resultado.

Ejercicio 2. Imágenes

Vamos a colocar en la página una imagen de un robot que tienes en la unidad 1 de tu espacio web y que se llama robot.png. Para ello guarda la imagen en la misma carpeta donde está el documento UD01_P15_nombreapellido.html y con el mismo nombre que ya tiene. Este paso es imprescindible para que funcione.
Escribe lo siguiente justo después de la etiqueta </p>:

<img src="robot.png"/>

Guarda el archivo como UD01_P16_nombreapellido.html. Actualiza la página web y observa el resultado, que debe ser similar al de la figura 50.

Fig. 50

DESAFÍOS

Pon otros colores a la frase “Computación y Robótica” de la web, utilizando las etiquetas correspondientes. Guarda la página como UD01_P16_nombreapellido_desafio1.html.
Inserta otra imagen que te guste, de forma que se vea antes del encabezado. Guarda la página como UD01_P16_nombreapellido_desafio2.html.