Avances tecnológicos del siglo XXI y ejemplos de estos
De La Idea Al Proyecto(Parte1)
1. De la Idea al Proyecto
Enrique Araújoviedo, PFPD Ambientes Virtuales de Aprendizaje, Bogotá, D.C., 2009.
Construcción de Proyectos en Micromundos Pro
En el ejercicio de la docencia, tomamos muchos cursos de muchas cosas ya sea para completar
créditos para un ascenso en el escalafón (obsoleta medida de la capacidad y experiencia de la
docencia), ya por formación de interés personal. En todo lado hay que entregar un trabajo final. Ya
allí (cuando hay que entregar susodicho trabajo) es cuando acudimos a eso que algunos llaman
metodología y la imparten “metodólogos” (algunos sí lo son de verdad) que recitan unas “fórmulas
mágicas” que se deben aplicar para realizar dicho trabajo. Después de muchos cursos (y por supuesto
muchos “métodos”) me he encontrado que en ninguno de ellos te enseñan a plasmar “tus ideas de
programación”, quizás a escribir el trabajo final (descripción general, objetivos, marco teórico, etc.).
Finalmente acudimos a la “fórmula del cacharreo”, al “ensayo y error”, pero con todas las ideas en la
cabeza. Así que tenemos la interface como la queremos en la cabeza, los enlaces en la cabeza, las
transiciones en la cabeza, la cantidad y el tipo de variables en la cabeza, las interacciones con el
usuario en la cabeza; en el papel ni un solo borrador. Así que sentados frente al ordenador
comenzamos a escribir las líneas de código del lenguaje en cuestión. Después de mucho esfuerzo y
errores van y errores vienen tomamos una de dos decisiones: dejamos “el proyecto así!” o
contratamos a un experto: “mirá que este curso a la larga ni lo voy a usar…entonces por qué
matarme si alguien experto lo puede hacer por un precio negociable…?”.
No voy a decir que soy un experto en programación y menos en diseño de software, lo que voy a
hacer es contaros cómo lo hago; esto es más una confesión de panadero. Es daros mi “Know how”
que tal vez sirva para algo a alguien. Si nó, da igual. Simplemente lo cuento y ya!
Es claro que una cosa es ver una receta de cómo hacer buñuelos navideños en un libro de cocina y
otra que a uno le queden con ese sabor hogareño de la abuela. Así que no toméis como lo que viene
a continuación como otra “fórmula mágica” que hay que seguirla paso a paso. Lo primero disponer
de tiempo y paciencia, muchas cosas pueden fallar; de hecho lo que escribo lo estoy escribiendo de
memoria como sale, sin correcciones (la verdad, tampoco dispongo de mucho tiempo).
Comencemos…
En días pasados en el curso que estoy tomando para ascender en el escalafón (“ambientes de
aprendizaje con micromundos”) el docente pidió que hiciéramos en el entorno de micromundos pro
una avenida con carros desplazándose de un extremo a otro en ambos sentidos. La situación era
sencilla, el hombre explicaba que bastaba poner sobre la calzada varias tortugas a las que se les
asignaba una máscara tomada del panel de gráficos y con el botón derecho se invocaba la caja de
instrucciones asociada a cada tortuga. En la caja de instrucciones se cliqueaba (qué feo éste
seudoverbo…: yo cliqueo, tú cliqueas, ellos cliquean, …) en “muchas veces”; luego se seleccionada el
botón de radio “animar”. Al cliquear (mejor, al hacer click izquierdo) sobre una tortuga, la tortuga
2. seleccionaba comenzaba a desplazarse con la orientación dispuesta previamente. En algún momento
dijo que así era como se hacía el juego de la rana (“frog”): un juego donde una ranita intenta pasar
un río por el viajan varios troncos. El objetivo es que la ranita atraviese sin ser golpeada por ningún
tronco, en caso de ser golpeada recomienza el trayecto. Bueno, se me vino a la cabeza; ¿y por qué no
hacer este ejercicio en micromundos pro para ver cómo me va…..?
Lo que hice…
Me imaginé las tantas veces que había jugado ese juego en un (hoy reviejo) tresochentayseis. Traje a
la memoria la interface y las acciones, así que las repliqué en un dibujo (no creáis que voy a escanear
mis rayones en papel; tendréis que aguantaros con malos dibujos en Paint).
Figura1. Bosquejo del juego Frog
Como se observa este bosquejo representa la idea que se quiere convertir en proyecto.
Qué se quiere
Lo primero es pensar que la vista no sea superior sino algo más ladeada, como en perspectiva. Lo que
significa que habrá que buscar en internet una imagen de un rio con dos orillas de tal modo que una
se vea más abajo que la otra dando la impresión que uno se encuentra en la orilla inferior.
Lo segundo que el rio muestre un efecto de movimiento, que no sea plano. Hay dos maneras de
hacerlo: (a) generando ondas que se desplacen o (b) haciendo que los troncos den la impresión de
sumergirse efectuando cabeceos. La primera podría significar buscar en la red ya no sólo un rio con
dos orillas en perspectiva sino que además el río muestre ondulaciones; lo que significa que habría
que buscar un archivo gif, flic, flv o cualquier otro, pero que sea animado. Viene inmediatamente la
pregunta: ¿qué archivos de animación soporta micromundos pro? En la ayuda no aparecen los
formatos flash, aunque si los avi. Pero un avi que ocupe todo el fondo de la interface? ¿Y se puede
3. controlar una tortuga encima del avi? La cosa se complica (aunque realmente nada de lo anterior se
puede hacer en micromundos pro), entonces la decisión es buscar un archivo Gif animado. Más
adelante nos damos cuenta que la idea tampoco es buena, después de buscar un buen rato, las que
parecen satisfacer nuestro requerimiento no cumplen con el tamaño o simplemente micromundos
las pega en el fondo quitándoles la animación. Vaya problema.
Lo tercero es conseguir unos troncos animados. Un problema semejante al anterior. Primero (del
tercer ítem) el problema de la búsqueda, segundo (del tercer ítem) que micromundos pro acepte el
Gif animado como imagen y no como figura. Conseguir una rana lo reduje a éste punto.
El cuarto punto es la programación. ¿qué quiero que haga cada cosa y cómo debo hacerlo?
Definitivamente hay que escribir la idea: “se requiere que los troncos se desplacen por el río con
diferentes velocidades y en lo posible con velocidad variable (esto es, que a veces vaya rápido y en
otras más lento); cada tronco se desplazará por su propia línea de navegación. Los troncos viajarán
con el sentido del rio lo que hace innecesario pensar que al llegar al extremo este deba devolverse
(Uff! Menos mal! Habría que cambiarle la orientación y cambiarle la máscara). La rana (que sabemos
es una tortuga disfrazada o con máscara) debe ser controlada por teclado lo que significará que
puede adelantar, retroceder, girar a izquierda y avanzar, girar a la derecha y avanzar. Esto a su vez
significará que si hay necesidad de girar se requiere que cambie de máscara por una muestre el
sentido del desplazamiento. Ahora para hacer más “realista” el desplazamiento de la rana es
conveniente “que se mueva”; esto no es ni más que alternar dos máscaras: la primera máscara con
una pata adelantada y la segunda máscara con la otra pata adelantada. Una vez que la rana se
pueda mover hay que evitar una colisión con alguno de los troncos del río. Si no choca y llega a la
otra orilla, entonces debe devolverse. Para devolverse debe girarse y todos sus movimientos deben ir
ahora en sentido contrario a los que tenían para llegar a esa orilla (esto que hay que pensar al revés
para devolverse). Si choca con algún tronco entonces la rana debe hundirse y aparecer en la orilla de
partida (la de abajo). En este punto habrá que resolver si se fija un punto de partida o no.
Supongamos que se fija un punto de partida. Cada vez que la rana choque y se hunda va aparecer en
ese lugar fijo. Si no fijamos un punto de partida para la rana (tendremos muchos problemas por
resolver) entonces debemos establecer un punto de partida aleatorio. Este aleatorio tiene sus
bemoles. ¿la orilla es aleatoria? Supongamos que sí, entonces la ranita aparecerá en cualquiera de
las dos orillas y si asumimos la aleatoriedad del punto de partida, entonces aparecerá en cualquier
lugar de esa orilla”. Hasta aquí la descripción de la idea. Nótese que no hemos dicho nada de
puntaje. Y ni se le ocurra creer que voy a tomar este punto más adelante (claro amanecerá y
veremos).
Hasta aquí se tiene lo que se ha pensado; es decir convertir el esquema de la figura 1 en palabras.
Ahora viene lo más difícil: comenzar a programar (supuesto que ya se tengan los gráficos).
Resumamos lo que llevamos:
Lista de actividades lugar restricciones
buscar imágenes de rio con orillas internet formato jpg
- dim_máx:
- derechos de autor copyleft
buscar imágenes de troncos internet - formato jpg, gif, png, ..
- dim: mediano, pequeño
4. - derechos de autor copyleft
buscar imágenes de rana internet - formato jpg, gif, png, ..
- dim: mediano, pequeño
- derechos de autor copyleft
realizar infografia ordenador de trabajo - transparencia
- ajustar tamaños
- realizar ajustes de forma
- convertir a gif animado en caso
de ser necesario
elaborar interface ordenador de trabajo - ajustar a tamaño objetivo
(micromundos pro) - importar imágenes como figuras
- crear mapa de figuras de trabajo
construir código ordenador de trabajo - lenguaje Logo
(micromundos pro)
elaborar prueba de escritorio ordenador de trabajo - lenguaje Logo
(micromundos pro)
realizar ajustes y correcciones ordenador de trabajo - lenguaje Logo
(micromundos pro)
puesta a punto ordenador de trabajo - ejecutar sin errores
(micromundos pro)
Tabla1. Actividades de la propuesta
Bueno, la parte de buscar imágenes y realizar la infografía no voy a explicarla; asumo que (los que
están en el curso) saben manejar algún editor gráfico como fireworks, coreldraw, paint shop pro,
Inkscape, illustrator, freehand y/o algún editor de gifs animados.
Ordenando las ideas para convertirlas en proyecto
Como habrán adivinado hasta aquí solo hay un cúmulo de ideas medio ordenadas, con algunas pocas
ideas claras de lo que debe hacerse (lo que se va a hacer, ya está claro) [comentario fuera de lugar:
recuerdo que alguna vez en excursión por el chocó, acampamos a orillas de un río. A eso de las cinco de la mañana el río se
desbordo arrastrándonos con carpas y todo; con el agua al cuello, el guía dijo: “no se les olvide bañarse antes de salir”.
Seudomoraleja: es tan fácil decir a otros lo que debe hacerse, el verdadero problema es cómo].
Lo primero que vamos a hacer es retomar el bosquejo inicial de la figura 1 y lo vamos a mejorar un
poco.
Fase1: Elaborar bosquejo de la interface (mejorado).
5. Figura 2. Bosquejo operativo
En el bosquejo de la figura 2 se puede apreciar las dos orillas definidas como A y B, cinco tortugas T1,
T2,…, T5. Las tortugas T2 a T4 servirán de troncos y a cada una se le define su línea de navegación
(marcada en línea punteada blanca) mientras que la tortuga T1 se usará como rana y se define su
punto de partida en la margen inferior derecha. La definición del bosquejo de esta forma nos lleva a
definir las coordenadas de salida de las tortugas T1 a T5 y los conjuntos de máscaras para cada una
de ellas. Adelantémonos un poco, establezcamos las siguientes correspondencias:
T2 Conj_Troncos(A) = { (ffig1, tronco101::tronco1_01.gif), (ffig2, tronco102::tronco1_02.gif), (ffig3,
tronco103::tronco1_03.gif), …(ffig4, tronco104::tronco1_04.gif)}
Que se lee: “a la tortuga T2 le asignamos el conjunto de máscaras Conj_Troncos(A), este conjunto
contiene cuatro máscaras: ffig1, ffig2, ffig3 y ffig4. A la primera máscara ffig1 le corresponde la
imagen tronco101 del panel de figuras obtenida del archivo “tronco1_01.gif”. Y así con las demás. Si
os parece muy complicada esta notación podemos hacerlo con una tabla:
Tortuga mascaras Orden* duración archivo Carpeta origen
T2 tronco101 1 1 msg tronco1_01.gif C:ProgramFilesMicroMundosProimagenes
T2 tronco102 2 3 msg tronco1_02.gif C:ProgramFilesMicroMundosProimagenes
T2 tronco103 3 2 msg tronco1_03.gif C:ProgramFilesMicroMundosProimagenes
T2 tronco104 4 3 msg tronco1_04.gif C:ProgramFilesMicroMundosProimagenes
Descripción: xxxxxx
Tabla 2. Asignación de máscaras para la tortuga T2 [*(de aparición)]
No, no se asusten. Esto es necesario, pero lo haremos más adelante. Por ahora lo que tenemos claro
es:
Tortuga Posición de salida Conjunto máscaras Acción
T1 279, -187 rana101, rana102 Movimiento hacia adelante
rana201, rana202 Movimiento hacia atrás
rana301, rana302 Movimiento hacia izquierda
rana401, rana402 Movimiento hacia derecha
Descripción: la tortuga T1 se encuentra ubicada en la parte inferior derecha (coordenadas [279 -187]) con la
máscara “rana101” activa; al moverse hacia adelante avanza cuatro (4) pasos y se activa la máscara “rana102”. La
máscara “rana101” corresponde a una ranita con el brazo izquierdo adelantado y la máscara “rana102”
corresponde a la imagen de una ranita con el brazo derecho adelantado. Si el movimiento se hace hacia atrás se
activa la máscara “rana201”; retrocede tres (3) pasos y se activa la máscara “rana202”. La máscara “rana201”
corresponde a una ranita que estira su pata izquierda y la máscara “rana202” corresponde a una imagen de una
ranita estirando la pata derecha. Si el movimiento se hace hacia la izquierda, la tortuga T1 cambia a rumbo 270 y
se activa la máscara “rana301”, avanza dos (2) pasos y se activa después de 1 unidad de tiempo (1 msg) la máscara
6. “rana302”. Las máscaras “rana301” y “rana302” son equivalentes a las máscaras “rana101” y “rana102”
respectivamente. Con el desplazamiento a derecha se activa la máscara “rana401”, la tortuga asume el rumbo 90
y avanza dos (2) pasos y se activa después de 1 unidad de tiempo (1 msg) la máscara “rana402”. Las máscaras
“rana401” y “rana402” son equivalentes a las máscaras “rana101” y “rana102” respectivamente, pero respetando
la orientación.
Tabla 3. Comportamiento de la tortuga T1
Tortuga Posición de salida Conjunto máscaras Acción
T2 210, -83 Tronco101, Tronco103, Movimiento de cabeceo
Tronco102, Tronco104 Movimiento hundimiento
Descripción: La tortuga T2 parte de las coordenadas (210, -83) y se activa la máscara “Tronco101”; avanza cinco
(5) pasos y espera una (1) unidad de tiempo, inmediatamente después se activa la máscara “tronco102”. Luego,
avanza cinco (5) pasos y espera una (2) unidad de tiempo, inmediatamente después se activa la máscara
“tronco103”. Finalmente, avanza cinco (5) pasos y espera una (3) unidad de tiempo, inmediatamente después se
activa la máscara “tronco104”. El hecho que los tiempos de espera sean distintos es con el objetivo de establecer
la apariencia de aceleración, desaceleración. Las máscaras “Tronco101” y “Tronco103” corresponden a imágenes
de troncos saliendo a flote; mientras que las máscaras “Tronco102” y “Tronco104” corresponden a imágenes de
troncos hundiéndose.
Tabla 4. Comportamiento de la tortuga T2
Tortuga Posición de salida Conjunto máscaras Acción
T3 -127, -34 Tronco201, Tronco202, Movimiento de cabeceo
Tronco203, Tronco204 Movimiento hundimiento
Tronco205 Movimiento de flotación media
Descripción: (lo tengo como tarea todavía)
Tabla 5. Comportamiento de la tortuga T3
Tortuga Posición de salida Conjunto máscaras Acción
T4 13, 26 Tronco101, Tronco102, Movimiento de cabeceo
Tronco103, Tronco104 Movimiento hundimiento
Descripción: (lo tengo como tarea todavía)
Tabla 6. Comportamiento de la tortuga T4
Tortuga Posición de salida Conjunto máscaras Acción
T5 -259, 83 Tronco101, Tronco102, Movimiento de cabeceo
Tronco103, Tronco104 Movimiento hundimiento
Descripción: (lo tengo como tarea todavía)
Tabla 7. Comportamiento de la tortuga T5
Se dirá “qué mamera, y todo eso para qué?” Pues para ser ordenados e ir haciendo el diccionario de
datos que nos va a servir después para hacer el manual técnico y la documentación del proyecto. No
sea que tres semanas después con tanto cacharreo de ensayo y error, estemos dando vueltas
alrededor del mismo árbol sin darnos cuenta. En todo proyecto de software la documentación es de
prima importancia tanto para la detección de errores (mantenimiento a priori) como para el
mantenimiento a posteriori (reescritura, modificaciones parciales, agregaciones, corrección de bugs,
parcheos, etc).
Aquí solo presento un borradorcillo de lo que debe hacerse, claro. Se pueden usar tablas, cuadros,
conjuntos; cualquier cosa que en el futuro nos permita mirar el código y entender porqué se hizo así
y no de otra manera (no olvidar la necesidad de optimizar el código).
7. Una vez se haya hecho el diccionario de datos, cada objeto del “micromundo” a construir estará
perfectamente definido y podemos pasar a la siguiente fase: reordenar todo! (no, no es una broma).
Fase 2: Elaborar esquema de la idea. (en elaboración)
(esquema BrainMap)
(esquema de espina de pescado)
(esquema de bloques)
(esquema DFD)
(esquema UML)
Fase 3: Establecer acciones, eventos, relaciones, definir sub-entornos y procesos.
Esta fase la vamos a elaborar de dos modos: (a) una fácil, intuitiva y (b) la otra como es: técnica.
Veamos el modo intuitivo.
3.1. Modo Intuitivo para establecer acciones y relaciones.
En el diagrama de la figura 2 (bosquejo operativo) se observan cinco tortugas, cuatro de ellas
hacen lo mismo o mejor tareas homólogas, por lo que basta considerar entonces dos de ellas.
Consideremos T2 y T3, por lo que el diagrama queda simplificado a:
Figura 3. Bosquejo simplificado
Establezcamos ahora las acciones que debe realizar cada una de las tres tortugas y los eventos a
programar para que se ejecuten dichas acciones.
i. Definir posición de salida de T1 (futura rana)
Para definir la posición de salida de la tortuga que se convertirá en rana, basta definir sus
coordenadas; así por ejemplo, coordX= 279 ; coordY= -187.
ii. Establecer máscaras (imágenes de posiciones de rana orientadas) para T1
a) Máscaras para marcha hacia adelante
T1 (rana101, rumbo 0, avanza, espera, rana102, espera); también,
8. T1 (rana101, rumbo 0, espera, avanza, rana102, espera)
b) Máscaras para marcha atrás
T1 (rana201, rumbo 0, retrocede, espera, rana202, espera)
c) Máscaras para marcha hacia izquierda
T1 (rana301, rumbo 270, avanza, espera, rana302, espera)
d) Máscaras para marcha hacia derecha
T1 (rana401, rumbo 90, avanza, espera, rana402, espera)
iii. Control de la rana (T1). Parte I: movimientos
a) La rana se controla mediante el teclado de flechas:
Figura 4. Control de la tortuga T1 por teclado
Al presionar una de las teclas de flechas se tiene:
- Cambio relativo de máscara (depende de orientación actual y tecla presionada)
- Cambio relativo de orientación (depende de orientación actual y tecla presionada)
- Control por teclado para movimiento y enmascaramiento
Figura 5. Control de T1
b) Forma lógica:
- Si tecla = ascii(flecha) entonces (no cambia orientación/cambia orientación, conserva
máscara/no conserva máscara)
- Ejemplo: si tecla = ascii(37) entonces (rumbo 270, rana301)
- En Logo: si (ascii :key) = 37 [frumbo 270 ffig “rana301] (Obsérvese
que hasta el momento no nos hemos metido con el código, porque lo que nos
interesa en estos momentos es desarrollar las ideas)
Sugerencia: recordar establecer tiempo de espera.
9. iv. Control de la rana (T1). Parte II: retorno
Si la rana llega al otro lado del río (por ejemplo: orilla B), se debe voltear la rana y el control
entra en un proceso inverso; esto es que como ahora la tortuga viene en sentido arriba-
abajo, la derecha será ahora la izquierda, etc.
Figura 6. Orientación y sentido de la tortuga T1
Debería considerarse si cuando se presiona la tecla “flecha abajo” se debe invertir también el
proceso, en caso de cambiarse la rana por las máscaras “rana201”, “rana202”. Recuérdese
que las máscaras no cambian de rumbo aunque la tortuga lo haya hecho.
v. Control de la rana (T1). Parte III: colisiones
a) Contacto con otro objeto.
En el río de acuerdo al bosquejo simplificado (figura 3) se tendrán dos objetos más
aparte de la rana. A saber, las tortugas T2 y T3 que tienen como máscaras figuras de
troncos. Puesto que cada uno de estos tiene una línea de navegación paralela a la otra a
lo largo y en el sentido del río, estos dos objetos (T2 y T3) no colisionaran. Pero la rana
(T1) va en sentido perpendicular a estas líneas de navegación por lo que puede
presentarse un contacto entre la rana (T1) y uno de los troncos (T2 o T3).
10. Figura 7. Diagrama de retorno a punto de salida de T1
(Diagrama contacto-retorno rana)
De acuerdo con lo planteado en la descripción de la idea, si la rana toca uno de los dos
troncos (T2 o T3), se hunde y desaparece en el río (fig. 12). En caso de colisionar y
naufragar la rana deberá aparecer al azar en una de las dos orillas (debe cuidarse la
orientación: si aparece en la orilla A la orientación es rumbo 0; pero si aparece en la orilla
B, la orientación es rumbo 180). En su defecto, la rana deberá aparecer siempre en la
orilla A (la orilla inferior) en un ligar predeterminado. Se puede dar también que el lugar
en que aparece la rana en la orilla A, sea al azar (figura 7).
vi. Establecer máscaras para tortugas secundarias T2 a T5 (Troncos)
Las máscaras para las tortugas T2 y T3 corresponden a imágenes de troncos que flotan en el
río.
Figura 8. Asignación de “troncos” a T2 y T3
Para efectos de dar una apariencia de navegabilidad y flotabilidad se requiere animar las
tortugas T2 y T3. Para ello se establece una secuencia de máscaras en la que cada imagen
corresponde a un fotograma que se ha manipulado apropiadamente.
Figura 9. Asignación de máscaras de animación para T2
vii. Movimientos asociados a los objetos “Troncos”.
Las tortugas T2 y T3 se desplazan horizontalmente simulando seguir la corriente del río; por
comodidad se asume que la línea de navegación de cada tortuga sea siempre la misma línea
recta, sin embargo puede pensarse en que la línea de navegación no sea rectilínea.
11. Figura 10. Líneas de navegación
Se recuerda que se asume que puesto que los troncos siguen el curso del río al llegar al
extremo izquierdo NO rebotan devolviéndose, sino que aparecen por el extremo opuesto
dando la apariencia de ser un nuevo tronco. Se puede buscar que una vez que los objetos
lleguen a los bordes izquierdo y derecho “reboten”, es decir se devuelvan cambiando su
orientación, en lugar de aparecer en el extremo opuesto. Esta decisión le quita naturalidad al
juego y crea una dificultad innecesaria.
viii. Colisiones y contactos de los objetos “Troncos”.
Puesto que los objetos T2 y T3 se mueven por líneas perpendiculares a la línea de
desplazamiento del objeto T1, es posible que establecer contacto entre T1 y T2 o entre T1 y
T3 (fig.11).
Figura 11.
Al presentarse un contacto entre los objetos mencionados debe activarse una secuencia
de máscaras que den la impresión del efecto de hundimiento (figura 12); y, una vez haya
desaparecido la rana, ésta debe aparecer según se haya establecido en el diagrama de
retorno (figura 7).
Figura 12. Secuencia de máscaras para T1 (simulando hundimiento de T1)
No es posible un contacto entre T2 y T3 (a menos que se cambien las condiciones de
linealidad) ya que se espera que sus líneas de navegabilidad sean distintas y distantes; sin
12. embargo si se establecen líneas aleatorias para T2 y T3 es posible que entre ellas haya
contacto, ya que ellas tienen distintas velocidades de navegación.
Para hacer más interesante el juego, puede pensarse en velocidades de navegación
aleatorias.