• Like
  • Save
De La Idea Al Proyecto
Upcoming SlideShare
Loading in...5
×
 

De La Idea Al Proyecto

on

  • 773 views

Enrique Araujo

Enrique Araujo

Statistics

Views

Total Views
773
Views on SlideShare
773
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft Word

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    De La Idea Al Proyecto De La Idea Al Proyecto Document Transcript

    • DE LA IDEA AL PROYECTO
      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).
      Comencémos.
      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ónderecho 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 seleccinaba 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 controlar una tortuga encima del avi? La cosa se complica (aunque realmente nada de lo anterior se puede hacer en micromundos pro), entonces la desició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? Definivamente 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 hasta aquí:
      Lista de actividadeslugarrestriccionesbuscar imágenes de rio con orillasinternetformato jpg   - dim_máx:   - derechos de autor copyleftbuscar imágenes de troncosinternet- formato jpg, gif, png, ..   - dim: mediano, pequeño  - derechos de autor copyleftbuscar imágenes de ranainternet- formato jpg, gif, png, ..   - dim: mediano, pequeño  - derechos de autor copyleftrealizar infografiaordenador de trabajo- transparencia  - ajustar tamaños  - realizar ajustes de forma  - convertir a gif animado en caso   de ser necesarioelaborar interfaceordenador de trabajo- ajustar a tamaño objetivo (micromundos pro)- importar imágenes como figuras  - crear mapa de figuras de trabajoconstruir códigoordenador de trabajo- lenguaje Logo (micromundos pro) elaborar prueba de escritorioordenador de trabajo- lenguaje Logo (micromundos pro) realizar ajustes y correccionesordenador de trabajo- lenguaje Logo (micromundos pro) puesta a puntoordenador 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 retormar el bosquejo inicial de la figura 1 y lo vamos a mejorar un poco.
      • Fase1: Elaborar bosquejo de la interface (mejorado).
      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:

      TortugamascarasOrden*duraciónarchivoCarpeta origenT2tronco10111 msgtronco1_01.gifC:ProgramFilesMicroMundosProimagenesT2tronco10223 msgtronco1_02.gifC:ProgramFilesMicroMundosProimagenesT2tronco10332 msgtronco1_03.gifC:ProgramFilesMicroMundosProimagenesT2tronco10443 msgtronco1_04.gifC:ProgramFilesMicroMundosProimagenesDescripció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:
      TortugaPosición de salidaConjunto máscarasAcciónT1279, -187rana101, rana102Movimiento hacia adelanterana201, rana202Movimiento hacia atrásrana301, rana302Movimiento hacia izquierdarana401, rana402Movimiento hacia derechaDescripció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 “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
      TortugaPosición de salidaConjunto máscarasAcciónT2210, -83Tronco101, Tronco103,Movimiento de cabeceoTronco102, Tronco104Movimiento hundimientoDescripció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
      TortugaPosición de salidaConjunto máscarasAcciónT3-127, -34Tronco201, Tronco202,Movimiento de cabeceoTronco203, Tronco204Movimiento hundimientoTronco205Movimiento de flotación mediaDescripción: (lo tengo como tarea todavía)
      Tabla 5. Comportamiento de la tortuga T3
      TortugaPosición de salidaConjunto máscarasAcciónT413, 26Tronco101, Tronco102,Movimiento de cabeceoTronco103, Tronco104Movimiento hundimientoDescripción: (lo tengo como tarea todavía)
      Tabla 6. Comportamiento de la tortuga T4
      TortugaPosición de salidaConjunto máscarasAcciónT5-259, 83Tronco101, Tronco102,Movimiento de cabeceoTronco103, Tronco104Movimiento hundimientoDescripció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).
      Una vez se haya hecho el diccionario de datos para cada objeto del “micromundo” a construir podemos pasar a la siguiente fase: reordenar todo! (no, no es una broma).
      • Fase 2: Elaborar esquema de la idea.
      • (esquema BrainMap)
      • (esquema de espina de pescado)
      • (esquema de bloques)
      • (esquema DFD)
      • (esquema UML)
      • Fase 3: Establecer acciones, relaciones y definir subentornos.
      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.
      • 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 las acciones a programar para que se ejecuten dichas acciones.
      • 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í, coordX= 279 ; coordY= -187.
      • Establecer máscaras para T1 (rana)
      • Máscaras para marcha hacia adelante
      • T1 (rana101, rumbo 0, avanza, espera, rana102, espera); también,
      • T1 (rana101, rumbo 0, espera, avanza, rana102, espera)
      • Máscaras para marcha atrás
      • T1 (rana201, rumbo 0, retrocede, espera, rana202, espera)
      • Máscaras para marcha hacia izquierda
      • T1 (rana301, rumbo 270, avanza, espera, rana302, espera)
      • Máscaras para marcha hacia derecha
      • T1 (rana401, rumbo 90, avanza, espera, rana402, espera)
      • Control de la rana (T1). Parte I: movimientos
      • 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)
      • 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]
      • Sugerencia: recordar establecer tiempo de espera.
      • 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 5. 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.
      • Control de la rana (T1). Parte III: colisiones
      • 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). 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. 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 6. Diagrama de retorno a punto de salida de T1
      • (diagrama contacto-retorno rana)
      • 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 7. Asignación de “troncos” a T2 y T3
      • (dibujo de asignación de troncos a T2 y a T3)
      • Movimientos asociados a los objetos “Troncos”.
      • Colisiones y contactos de los objetos “Troncos”.
      • Modo Técnico para establecer acciones y relaciones.
      • La programación
      • Estructura arbórea del proyecto
      • Estructura Topológica del proyecto
      • Estructura por listas
      • Estructura por procedimientos
      • El programa