universidad de magallanes - umag.cl · anexo d : manual de usuario ... de habilidades específicas...
TRANSCRIPT
UNIVERSIDAD DE MAGALLANES FACULTAD DE INGENIERÍA
DEPARTAMENTO DE INGENIERÍA EN COMPUTACIÓN
SOFTWARE MULTIMEDIA PARA FOMENTAR EL APRENDIZAJE ELEMENTAL DE LA PROGRAMACIÓN
Carlos Butendieck Jiménez 2005
HOJA DE EVALUACIÒN Carlos Butendieck Jiménez. Informe : Defensa : Nota Final : Día Mes Año
Sr. Carlos Arias Director Departamento
De Ingeniería En Computación
UNIVERSIDAD DE MAGALLANES FACULTAD DE INGENIERÍA
DEPARTAMENTO DE INGENIERÍA EN COMPUTACIÓN
SOFTWARE MULTIMEDIA PARA FOMENTAR EL APRENDIZAJE ELEMENTAL DE LA PROGRAMACIÓN
“Proyecto de Aplicación presentado en conformidad a los requisitos para obtener el título de Técnico Universitario en Computación e Informática”
Profesor Guía : Sr. Eduardo Peña
Carlos Butendieck Jiménez 2005
ÌNDICE
AGRADECIMIENTOS .............................................................................. vii
RESUMEN ............................................................................................ viii
CAPÍTULO I - INTRODUCCIÓN .................................................................. 9
CAPÍTULO II - DESARROLLO DEL TEMA .................................................. 12
2.1 Clasificación ............................................................................. 13
2.2 Formulación del problema .......................................................... 14
2.2.1 Necesidad del software .................................................. 14
2.3 OBJETIVOS ............................................................................. 15
2.3.1 Objetivo general ............................................................15
2.3.2 Objetivos específicos ..................................................... 15
2.4 INFORMACIÓN DE LA ESCUELA "LA MILAGROSA" ..................... 16
2.4.1 Antecedentes ............................................................... 16
2.4.2 Situación anterior .......................................................... 17
2.4.3 Funcionamiento actual ................................................... 17
2.4.4 Organigrama de la escuela La Milagrosa .......................... 19
CAPÍTULO III - MARCO TEORICO ............................................................ 21
3.1 METODOLOGÍA PARA EL DESARROLLO DEL PROYECTO .......... 22
3.2 CONCEPTO Y PLANIFICACIÓN ................................................. 25
3.2.1 Justificación ................................................................. 25
3.2.2 Análisis de Riesgos ....................................................... 27
3.2.3 Inventario de Recursos .................................................. 28
3.2.3.1 Requerimientos de Recursos .............................. 28
3.2.3.2 Recursos Operacionales .................................... 29
3.2.3.3 Recursos de Software ....................................... 29
3.2.3.4 Recursos Humanos ........................................... 30
3.2.3.4.1 Aporte de los integrantes del proyecto ....... 31
3.2.3.5 Recursos Físicos .............................................. 32
3.2.4 EVALUACIÓN DE COSTOS ........................................... 32
3.2.4.1 Mano de Obra ................................................... 32
3.2.4.2 Equipamiento ................................................... 33
3.2.4.3 Costo del Proyecto ............................................ 33
3.3 DISEÑO Y PROTOTIPO ............................................................ 34
3.3.1 Entrevistas .................................................................. 34
3.3.2 Diseño del Software Multimedia ...................................... 36
3.3.3 Definición de las Herramientas a utilizar ........................... 40
3.4 LA PRODUCCIÓN DEL SOFTWARE ........................................... 42
3.4.1 El Menú Principal .......................................................... 42
3.4.2 Módulo de Ayuda .......................................................... 46
3.5 PRUEBAS ............................................................................... 50
CONCLUSIONES ................................................................................... 52
ANEXO A : CONCEPTOS BÁSICOS DE MICROSOFT “VISUAL BASIC” ......... 53
ANEXO B : MACROMEDIA “DIRECTOR” ................................................... 61
ANEXO C : CONCEPTOS DE DISEÑO GRÁFICO ...................................... 71
ANEXO D : MANUAL DE USUARIO .......................................................... 76
BIBLIOGRAFÍA ...................................................................................... 89
vii
AGRADECIMIENTOS A familia, amigos y a los profesores Eduardo Peña y Julio Águila.
viii
RESUMEN
El siguiente proyecto consiste en el desarrollo de un Software Multimedia
cuyo objetivo es el aprendizaje de la programación a nivel básico. Se trabajará
guiado por el Sr. Eduardo Peña, la Sra. María Soledad Castillo, profesora jefe del
laboratorio de computadores del Establecimiento educacional municipal La
Milagrosa y el Sr. Héctor Ilnao Barrientos, quien es diseñador gráfico.
Este proyecto de memoria se hará pensando en fomentar el aprendizaje a
nivel básico de la programación, en alumnos de la escuela La Milagrosa con el
afán de aportar al plan de estudios conocimientos para quienes decidan a futuro
proseguir estudios relacionados con el tema.
CAPÍTULO I
INTRODUCCIÓN
10
INTRODUCCIÓN
La constante modernización que se está experimentando en los últimos años en
el mundo y los avances tecnológicos en materia informática que se traducen en nuevas
y más eficientes maneras de manipular, almacenar, modificar, y compartir información
así como la creación y actualización de hardware más versátiles y poderosos requieren
de habilidades específicas cada vez más complejas, lo que obliga a la sociedad a
renovar constantemente los conocimientos adquiridos últimamente en esta materia y a
innovar para mantenerse vigente en un mundo competitivo como este. Con las
herramientas actuales la enseñanza de la informática está involucrando cada vez más a
personas con pocos o nulos conocimientos de computación, y sobre todo a niños en
edades tempranas los que con su innata curiosidad y capacidad de absorción de
conocimientos de todo tipo son la razón principal para mejorar la calidad de la
educación. Los Establecimientos educacionales municipales de Chile están autorizados
y obligados por el Ministerio de Educación a impartir la enseñanza de la computación
en niños desde los primeros cursos de educación básica, de esta manera al enfrentar la
educación media los alumnos deberían poseer un entrenamiento básico para manejar
un computador.
Esta aplicación está dirigida a los estudiantes de educación básica que cursan el
Octavo año de la Escuela La Milagrosa y pretende entregar y fomentar la programación
a nivel básico. Se requiere de herramientas multimedia para transmitir dicha
información, poniendo especial atención en el diseño de interfaces gráficas, uno de los
muchos aspectos importantes a considerar al momento de planificar una aplicación.
La interfaz debe ser sencilla y fácil de entender, porque los conocimientos que
tenga el usuario sobre la navegación en este tipo de ambiente no se deben
11
sobreestimar, así como tampoco se deben subestimar. Estos elementos deben estar
distribuidos de tal forma que guíen al usuario a la información.
La información utilizada fue recopilada mediante entrevistas a usuarios y
profesores de la manera más rigurosa posible, de esta forma los alumnos podrían estar
al tanto de conocimientos que de alguna manera servirán de apoyo al cursar la
enseñanza media o superior si alguno de ellos decidiera continuar estudios basados en
esta materia.
CAPÍTULO II
DESARROLLO DEL TEMA
13
DESARROLLO DEL TEMA
2.1 CLASIFICACIÓN
El proyecto que a continuación se presenta se clasifica como de carácter social
dado que involucra el manejo de información para la enseñanza de un grupo específico
de usuarios los cuales en su mayoría provienen de un estrato económico medio-bajo.
Se clasifica dentro de un ámbito educacional, porque el trabajo que se realizará
sólo compromete recursos del Establecimiento educacional municipal “La Milagrosa” y
va dirigido alumnos de Octavo año de enseñanza básica de dicho establecimiento.
14
2.2 FORMULACIÓN DEL PROBLEMA
2.2.1 NECESIDAD DEL SOFTWARE
Es necesario contar con un software multimedia que contenga los principios
fundamentales de la programación, definiciones y ejercicios con la finalidad de que los
alumnos tengan una visión general sobre el funcionamiento de un programa
computacional y sean capaces de identificar la estructura general del mismo.
La manera de integrar la materia a la aplicación multimedia se hará considerando
la estructura utilizada en “Programación de Computadores y el Lenguaje C.” (1996-
2004) del Sr. Roberto Uribe Paredes, la cual entrega la información suficiente, con el
lenguaje preciso del tema con demostraciones prácticas para un mejor entendimiento.
La materia a implementar abarca una introducción teórica y diagramas de flujo. Se
requiere utilizar ejemplos y ejercicios con una dificultad conforme al nivel de
comprensión del grupo objetivo.
15
2.3 OBJETIVOS
2.3.1 OBJETIVO GENERAL
Diseñar e implementar un software multimedia de aprendizaje básico de la
programación para el Establecimiento educacional “LA MILAGROSA Nº17”, utilizando
herramientas de programación, lo cual permitirá que los alumnos logren un
conocimiento anticipado de la materia programación en su nivel más básico.
2.3.2 OBJETIVOS ESPECÍFICOS
1.- Diseñar una Interfaz gráfica utilizando el lenguaje de programación Visual Basic 6.0
que permita ejecutar módulos creados con Macromedia Director.
2.- Creación de un módulo de ayuda utilizando Macromedia Director, utilizando efectos
de sonidos, efectos visuales y animaciones.
3.- Crear la gráfica y texto de cada menú utilizando normas de diseño gráfico
convencionales.
16
2.4 INFORMACIÓN DE LA ESCUELA “LA MILAGROSA”
La escuela “La Milagrosa Nº17” es un Establecimiento educacional municipal de
enseñanza básica (Primero a Octavo año de enseñanza) ubicada en la población 18 de
Septiembre en Av. Pdte. S. Allende Nº 0845.
2.4.1 ANTECEDENTES
Esta escuela lleva oficialmente el nombre de “La Milagrosa” desde el 31 de Julio
de 1974 siendo la continuación de la escuela Nº 7 “Hogar del Niño Miraflores”.
La presencia de esta escuela en el sector sur de la ciudad de Punta Arenas
comienza en el año 1963, gracias al incentivo de “La compañía de las Hijas de la
Caridad de San Vicente de Paul”, presentes en el “Hogar del Niño Miraflores”, quienes
en vista de las necesidades de educación de las numerosas familias provenientes de
Chiloé comenzaron a construir la escuela, la cual contaba en sus inicios con sólo 3
salas de material ligero.
Para el año 1975 la matricula llegaba a 325 alumnos. A partir del año 1983
comienza a funcionar como colegio mixto. En el año 2000 comienza la construcción de
nuevas salas con el fin de tener infraestructura adecuada para integrarse a la jornada
escolar completa.
Durante el año 2001 comienza a funcionar de acuerdo a la reforma educacional
con el sistema de jornada escolar completa para los alumnos de quinto a octavo año
básico. Actualmente cuenta con 19 salas, un laboratorio de computación, un laboratorio
de ciencias, biblioteca y un gimnasio. En conjunto con el trabajo de la comunidad
17
religiosa, profesores y personal colaborador dispone de una matricula de 830 alumnos
distribuidos en 20 cursos de Kinder a Octavo básico.
2.4.2 SITUACIÓN ANTERIOR
• En 1995 se forma el laboratorio de computación con la adquisición de dos
Computadores Macintosh, gracias a un aporte de la comunidad “Hijas de la
Caridad”.
• En 1996 entra oficialmente en funcionamiento el laboratorio de computación.
• Entre 1997-1998 se integran dos computadores Macintosh.
• Durante 1999 se compraron los dos primeros computadores PC los cuales
actuaban de forma independiente y desde ese entonces se comenzó a trabajar
con internet, puesto que anteriormente sólo se comunicaban con el software
interactivo “La Plaza”, el cual es un software multimedia que permitía a los
alumnos conectarse con diferentes módulos de información los que abarcaban
entre otros ciencia y tecnología, biología, literatura, entre otros.
2.4.3 FUNCIONAMIENTO ACTUAL
El laboratorio de computación de esta escuela cuenta con 22 computadores
personales de los cuales 2 de ellos son servidores, a esto se suma una red la cual
interconecta a todos estos equipos.
El sistema operativo utilizado es Windows 98 junto con el paquete completo de
Microsoft Office y diversos programas multimedia. Los alumnos asisten dos veces por
semana al laboratorio de computación con una duración de dos horas pedagógicas, lo
que corresponde a 90 minutos de clases en total a la semana.
18
El plan de estudio proporciona conocimientos básicos acerca de los
componentes de un computador a nivel físico, los que incluyen descripción, función e
identificación de piezas. En cuanto al software, los alumnos aprenden a utilizar el
sistema operativo, Microsoft Windows 98, a comprender y conocer las herramientas que
proporciona el panel de control de dicho sistema operativo. A partir de este punto el
plan de estudio se centra en el aprendizaje y dominio básico de programas, entre los
que se encuentran Word, Excel y Power Point para realizar presentaciones. Una de las
aplicaciones multimedia utilizadas es “Clic”, con la cual se les enseña técnicas básicas
para construir pequeños programas interactivos. El plan de estudio finaliza con una
introducción al manejo de luminosidad, sombra y contraste, escalas y proporciones,
aplicado a la creación de imágenes digitales y uso del escáner.
Para una visión más clara y precisa de la materia a ver por los alumnos del taller de
computación, se presenta aquí el plan de estudio obligatorio aprobado por el Ministerio
de Educación en el año 2000 :
• Estructura física y configuración de un computador común de uso doméstico.
• Descripción de los componentes y de los periféricos de entrada y salida básicos.
• Conexiones básicas para el uso óptimo de los recursos del computador.
• El panel de control en el sistema de Windows 98, opciones de instalación y
configuración del sistema.
• Instalación y desinstalación de programas.
• Los virus, revisión y limpieza de discos.
• Procedimiento para eliminar virus en un computador infectado.
• Herramientas de Sistema y de Administración de archivos : defragmentación,
scandisk, drivespace, formateo de disquetes, compresión y manejo de
archivos.
• Configuración de MS Word. Barra de menú personalizado, corrector ortográfico.
19
• Configuración básica de MS Excel, hojas, copiado en serie de celdas
preformateadas, filtros.
• Recursos de educación en internet, exploración y captura y ordenamiento de
información relevante.
• Construcción de páginas web, comandos básicos.
• El software “Clic” de desarrollo multimedia de técnicas básicas para construir
actividades interactivas.
• Plantillas, identificación, recuperación, uso, modificación.
• Recursos multimediales para una presentación.
• Manejo de luminosidad, sombra y contraste.
• Escalas y proporciones, distorsiones de imágenes.
• El escáner, formas de uso.
2.4.4 ORGANIGRAMA DE LA ESCUELA LA MILAGROSA
La línea de autoridad de este establecimiento educacional consta de los
siguientes elementos :
• Director
• Inspector General
• Orientador
• Jefe de UTP
• Inspector
A continuación, se presenta una breve descripción de cargos, para finalizar en el
organigrama de la escuela.
20
ORIENTACION
INSPECTORÍA
DIRECTOR
U.T.P.
INSPECTOR GENERAL
ORIENTACIÓN
INSPECTOR ÍA
PROFESORES
Director : Encargado de la toma de decisiones administrativas, de elección de
requerimientos de personal.
Inspector General : Apoya al Director en decisiones y está a cargo del orden se la
situación interior del establecimiento.
Orientador : Encargado de analizar problemas que involucran a los alumnos y
profesores.
Jefe de UTP : autoridad de la Unidad Técnico Pedagógica.
Inspector : autoridad de terreno que cuida el orden en las horas de clases y recreo.
El siguiente es el esquema que da a conocer la estructura jerárquica de la
escuela “La Milagrosa” :
FIGURA 2.4.4 Organigrama administrativo de la escuela La Milagrosa.
CAPÍTULO III
MARCO TEÓRICO
22
MARCO TEÓRICO
3.1 METODOLOGÍA PARA EL DESARROLLO DEL PROYECTO
La ingeniería del Software proporciona variadas soluciones a la hora de
enfrentarse a la creación de un producto software, pero siempre existen tres etapas
bien diferenciadas. La primera etapa, en la que se tratan los aspectos referentes a la
definición del producto que se va a desarrollar, los recursos, tareas y costos que llevará
consigo y el estudio detallado de las funciones que se van a implementar. En la
segunda fase se definen los lenguajes, herramientas que se utilizarán, y se procede a la
construcción del software, etc. En la tercera fase de mantenimiento es donde se
producen las modificaciones y cambios requeridos por el cliente en el producto final.
De lo anterior se derivan otras metodologías, las más utilizadas son, Ciclo de
Vida Clásico, Construcción de Prototipos y el de Herramientas de Cuarta Generación,
que son métodos válidos. En este caso, el que más se ajusta al Proyecto a desarrollar
es el método propuesto por Carlos de Castro Lozano llamado “Ciclo de Vida de un
Producto Multimedia” que consiste en lo siguiente:
Por orden cronológico se puede dividir en las siguientes etapas:
• Concepto y Planificación: Definición del Proyecto y sus recursos. Esta primera
fase tiene que ver con la investigación en la organización si existe un problema que
tal vez pueda ser resuelto con el desarrollo de una aplicación.
• Diseño y Prototipo: En esta fase se analizan y desarrollan, en primer lugar, si el
sistema es técnica y operacionalmente realizable y si se justifica sobre bases
23
económicas o de algún otro tipo. La profundidad del estudio dependerá de una serie
de factores, entre otros:
o La magnitud del sistema y sus costos involucrados
o La urgencia de llevar a cabo el sistema
o La existencia de un sistema en funcionamiento, el cual será reemplazado por
el nuevo sistema bajo en estudio
o Recursos financieros disponibles para el desarrollo
o Equipo y recursos humanos existentes
o Experiencia del grupo de sistemas
• Producción: Construcción del Proyecto. En esta etapa es donde las
especificaciones de la fase diseño y prototipo se llevan a la práctica. Consiste en la
construcción del software necesario para realizar operaciones lógicas del proceso.
Normalmente, una tarea de programación se divide en una serie de subtareas o
módulos más pequeños; todos los módulos individuales deben operar juntos, si el
sistema ha de trabajar apropiadamente.
• Pruebas: Etapa que consiste en la puesta en marcha del nuevo software realizado,
carga de información que revelen fallas y errores que eventualmente deberán ser
depurados, para así asegurar un producto fiable.
• Distribución: Llevar el producto al usuario final mediante el uso de un medio
determinado. El cd-rom corresponde al más utilizado para realizar al distribución. El
software en esta etapa opera en forma rutinaria, sin embargo esto no significa que
permanezca sin cambios Existe una constante necesidad para mantenimiento y
mejoras. Conforme los usuarios van trabajando con la aplicación, aprenderán más
acerca de él y desarrollan nuevas ideas, cambios y mejoras.
24
• Seguimiento y Mantenimiento: Refinamiento y crecimiento del mercado. Tiene
como fin solucionar errores de operación, a través de modificaciones menores en
el hardware, software, lógica de procedimientos, etc.
25
3.2 CONCEPTO Y PLANIFICACIÓN
3.2.1 JUSTIFICACIÓN
El laboratorio de computación de la escuela “La Milagrosa” funciona desde el
año 1995 impartiendo enseñanza a sus alumnos. Con la aprobación de la jornada
escolar completa en el año 2000 y la implementación de un riguroso plan de estudio se
refuerza aún más la enseñanza y el acercamiento de la computación a sus alumnos.
Actualmente este laboratorio cuenta con hardware actualizado y software
apropiado para la enseñanza. Los estudiantes han mostrado un gran interés y
entusiasmo en aprender, gracias a lo novedoso de utilizar un computador personal
para trabajar en la escuela que rompe con el esquema diario y los instruye en la
búsqueda de soluciones a problemas presentados de acuerdo a su nivel de
aprendizaje.
Una de las consecuencias del uso del laboratorio de computación ha sido la
estimulación de la creatividad, el incentivo del trabajo en equipo y la cooperación mutua.
El provenir de familias de escasos recursos logra que los alumnos tengan un alto
interés y curiosidad para así adquirir práctica y los conocimientos básicos en el manejo
de un PC ; particularmente los alumnos de Octavo año de este establecimiento
educacional, los cuales harán el ingreso a Educación Media, etapa en la cual lo
aprendido en la enseñanza básica los podría ayudar bastante y que además los
enfrentará a nuevos desafíos al momento de escoger una especialidad, en el caso de
aquellos que así lo hicieran, el uso de computadores será más necesario y por lo tanto
lo aprendido en esta etapa básica les será de mucha ayuda.
26
Con la enseñanza y el incentivo del aprendizaje de la programación en su nivel
básico se espera lograr una mejor preparación de los alumnos al aportar al plan de
estudio materia relacionada con la informática, y en segundo lugar tener conocimientos
anticipados acerca de la materia podría significar una ventaja y ser de ayuda a quienes
escojan a futuro continuar con una especialidad en este campo y en el de la informática
en general. De acuerdo a la decisión de la profesora jefe del laboratorio de
computadores la implementación de este nuevo software se haría en horario
extraescolar complementando el plan de estudio señalado anteriormente en detalle.
Este proyecto se justifica en un ámbito social debido a la relevancia que tiene
para los alumnos del establecimiento “La Milagrosa”, y de una perspectiva educativa
dado que su importancia se centra en la enseñanza de nuevos conocimientos.
27
3.2.2 ANÁLISIS DE RIESGOS
Las evaluaciones determinaron que podrían encontrarse los siguientes riesgos
en el desarrollo del software :
• La disponibilidad de algunos profesionales no era completa, puesto que se
encontraban con actividades y con trabajo. En vista de lo anterior se optó por
organizar anticipadamente las reuniones para aclarar o consultar inquietudes.
• El tiempo y las posibles dificultades que trae consigo el aprender a utilizar una nueva
herramienta multimedia y un nuevo lenguaje de programación. Esto se trató de
reducir al consultar ampliamente el material de la biblioteca, consultas a la profesora
asistente del colegio, cursos, trucos y consejos de sitios web.
• Riesgos referentes a los requerimientos dado que éstos no siempre están muy
claros. Se construyeron diversos prototipos lo cual consumió tiempo; de los cambios
realizados y evaluaciones con el usuario final se obtuvo información con la que se
diseñó un prototipo más completo.
28
3.2.3 INVENTARIO DE RECURSOS
3.2.3.1 REQUERIMIENTOS DE RECURSOS
Se necesita un computador, el cual pertenece a uno de los dos integrantes del
proyecto. Cada computador requerido debe tener a lo menos 32 Mb de RAM, 20 Mb de
espacio libre, un procesador de por lo menos 90 Mhz de velocidad, un monitor en
colores. La necesidad de utilizar este hardware proviene de los requerimientos del
software de programación exigidos por Director 7.0, además de una impresora de
inyección de tinta, con cartuchos de tinta negra y color, papel, discos compactos
grabables y regrabables, material de escritorio.
Se dispone del siguiente hardware:
Hardware Características
Computador personal Microprocesador AMD K6-2 450 Mhz
Disco Duro de 4 GB Seagate
Disco Duro de 10 GB. Samsung
Sistema Operativo Microsoft Windows ME
256 MB RAM Kingstone
Teclado genérico DIN
Mouse A4-Tech Puerto Serial
Lector CD-ROM Asus 52x
Grabador CD LG 52x32x52
Tarjeta Video 3D 16MB 3DFX Banshee PCI
Tarjeta Sonido SB Live! 5.1 Digital EMU10K1
Parlantes 5.1 Sony 110 W (RMS) Micrófono Sony F-V120
Impresora HP 670 - S, Inyección de Tinta
TABLA 3.2.3.1- Resumen de requerimientos de hardware.
29
3.2.3.2 RECURSOS OPERACIONALES
• Electricidad: Un consumo promedio de diez horas semanales, lo que equivale a
1600 watts.
• Teléfono: disponible en todo momento
• Locomoción: locomoción pública disponible actualmente.
• Colación: alimento proporcionado en los lugares de trabajo
• Fotocopias: Servicio de fotocopias para administración y secretaria.
3.2.3.3 RECURSOS DE SOFTWARE
Se requiere del siguiente software de desarrollo :
• Sistema Operativo Microsoft Windows 9x/Me
• Macromedia Director 7
• Microsoft Visual Basic 6.0
Se requiere el siguiente software de administración :
• Microsoft Office 9x
• Microsoft Project 98
NOMBRE CANTIDAD LICENCIA Windows ME 1 Microsoft Office 2000 1 Microsoft Visual Basic 6.0 1 Microsoft Project 98 1 Microsoft Director 7 1 Macromedia
TABLA 3.2.3.3- Resumen de requerimientos de software.
30
3.2.3.4 RECURSOS HUMANOS
Incluyen jefe de proyecto y colaboradores para la producción, verificación y
validación, aseguramiento de calidad y administración del desarrollo del proyecto.
Se requiere de:
• 1 programador
• 1 profesor guía
• 1 profesor coordinador
• 1 profesora asistente
• 1 secretaria
NOMBRE FUNCIÓN DISPONIBILIDAD Carlos Butendieck J. Estudiante T.U.C.I Total Juan Hernán Cárcamo T. Estudiante T.U.C.I Total
Julio Águila Coordinador Departamento Computación
Ocasional
Eduardo Peña Profesor Guía Ocasional
María Soledad Castillo Profesora de Escuela La Milagrosa
Ocasional
Héctor Ilnao Diseñador gráfico Profesional
Ocasional
TABLA 3.2.3.4 Resumen de recursos humanos.
31
3.2.3.4.1 APORTE DE LOS INTEGRANTES DEL PROYECTO Programadores
• Juan Cárcamo T. : Encargado de la programación del módulo de desarrollo
(realizado con Macromedia Director), también de la creación del entorno gráfico y
de incorporar materia de programación obtenida de “Programación de
Computadores y el Lenguaje C (1996-2004)”, del profesor Roberto Uribe
Paredes.
• Carlos Butendieck J. : A cargo de la creación de la interfaz principal (construida
con Microsoft Visual Basic) y del módulo de ayuda (Macromedia Director).
También encargado de la construcción del entorno gráfico de las partes
mencionadas anteriormente.
Profesores Adjuntos
• María Soledad Castillo: Profesora encargada de revisar los prototipos y sugerir
cambios, además de coordinar las visitas realizadas por los programadores al
Establecimiento educacional.
• Eduardo Peña: Profesor guía y encargado de evaluar y sugerir modificaciones al
programa.
Otros Profesionales
• Héctor Ilnao: Encargado de evaluar la interfaz gráfica y sugerir cambios.
32
3.2.3.5 RECURSOS FÍSICOS
NOMBRE ESPACIO Laboratorio Computación de Escuela La Milagrosa
35 m²
Sala de Memoristas Carrera Técnico 25 m² Oficina de Carlos Butendieck J. 19 m²
TABLA 3.2.3.5 Resumen de requerimientos físicos.
3.2.4 EVALUACIÓN DE COSTOS
A continuación se presenta el detalle económico de los recursos anteriores, en
este se indica los costos de estudio, programación, capacitación, implementación y
soporte.
3.2.4.1 MANO DE OBRA
Etapas Recursos humanos
Tiempo (días) Horas – Hombre
Planificación 1 14 48 Diseño 2 21 192 Programación (Construcción) 2 56 384 Documentación (Manual de Usuario) 1 14 48 Prueba e implementación 2 1 2 Total 106 674 TABLA 3.2.4.1 Resumen de etapas de trabajo y su duración.
Para este ítem los valores serán calculados a un costo de 1/100 UF por hora
hombre; los valores deben ser actualizados al momento de firmar el contrato. (U.F.
$17.197 , Marzo 2005).
33
3.2.4.2 EQUIPAMIENTO Esta tabla muestra el costo total de recursos de hardware y software requeridos :
Equipos Cantidad Valor Computador personal 1 $ 303.500 Impresora 1 $ 36.000 Licencia Microsoft Visual Basic 1 $ 192.000 Licencia Macromedia Director 1 $206.000 Total $ 737.500
TABLA 3.2.4.2 Resumen del valor de requerimientos de hardware y software.
3.2.4.3 COSTO DEL PROYECTO Se presenta a continuación un resumen que representa el costo total del
desarrollo de esta aplicación multimedia :
Ítem Valor
Mano de Obra $ 115.907 Equipamiento $ 737.500 Total $ 853.407
TABLA 3.2.4.3 Resumen de costo del proyecto.
Se dispone del equipamiento por lo que no es necesario invertir en ello, en definitiva
el costo neto es de $ 115.907 correspondiente al desarrollo del producto software.
34
3.3 DISEÑO Y PROTOTIPO
3.3.1 ENTREVISTAS
Es de vital importancia la búsqueda de información para el desarrollo del
proyecto lo que originó varias visitas al Establecimiento educacional “La Milagrosa”.
Aquí la profesora y jefa del Laboratorio de Computación la Sra. María Soledad Castillo
tiene por misión la enseñanza de la computación aplicada al uso de Microsoft Word y
Microsoft Excel. Ella sugirió la incorporación de ejercicios al futuro programa, y el uso
de un lenguaje simple y sencillo. Las entrevistas al usuario final fueron hechas a un
grupo de alumnos de esta escuela denotando curiosidad sobre la materia en algunos y
desconocimiento en otros.
En detalle se solicitó autorización para trabajar con un grupo de alumnos de
ambos sexos con edades entre 13 y 14 años con la finalidad de averiguar datos que
permitiesen dar forma al software, algunos ejemplos de información recopilada : colores
a utilizar, tipo de música, efectos de sonido, entre otros. Algunos alumnos han señalado
haber asistido a un curso extraescolar de computación impartido por el mismo colegio
en el cual han aprendido a utilizar software como Macromedia Dreamweaver para crear
páginas web, indicando abiertamente la dificultad para trabajar con código (situación
que por supuesto está al tanto la profesora encargada de impartir esta materia), porque
según ellos les cuesta entenderlo; cabe destacar que en ninguna clase se les dicta a los
alumnos materia introductoria al tema de la programación.
35
Al señalarles los objetivos y las ventajas que para ellos podría significar el uso
del nuevo software en desarrollo han demostrado su preferencia por aprender materia
que los introduzca primero en lo básico y después en entender materia más compleja y
avanzada.
El siguiente gráfico utiliza una escala de 1 a 100, para ayudar a visualizar el
grado de dificultad y comprensión que indicaron los alumnos sobre la utilización de
código html.
0
20
40
60
80
100
NiñosNiñas
Grafico 3.3.1 Grado de dificultad según alumnos
Según la gráfica y como se señaló anteriormente los alumnos reconocen una alta
dificultad para trabajar con código html, cuya enseñanza pretende introducirlos a la
creación de páginas web y en cierta medida a la programación, omitiendo el apartado
teórico previo al trabajo con código específico de algún lenguaje.
36
3.3.2 DISEÑO DEL SOFTWARE MULTIMEDIA
El desarrollo de las interfaces tiene como objetivo presentar en pantalla la
información mediante elementos ubicados de manera estratégica, utilizando tamaños y
colores adecuados al ojo del usuario, permitiendo así un rápido entendimiento de lo que
se está observando, todo lo anterior acompañado de sonidos y animaciones que hagan
aún más agradable la experiencia de navegar por el programa.
Esta parte del software tendrá como objetivo el diseño de la Interfaz Gráfica de
Bienvenida al programa y el módulo de ayuda del programa, a continuación se presenta
el diagrama de flujo del software.
FIGURA 3.3.2.A Diagrama de flujo del software en desarrollo.
37
En el diseño de la interfaz principal se han incluido tres botones importantes, que
permiten ejecutar alguno de los tres módulos del programa, el de desarrollo, el de
ayuda o el de inicio, además de una opción de salir del programa.
El formato y tamaño de los botones del menú principal y del menú de ayuda es el
siguiente :
FIGURA 3.3.2.B Formato y diseño de botones inactivos.
Se incluye el texto de acuerdo a la opción correspondiente. Existe un botón
similar que indica que el puntero del mouse está “sobre” o ha pasado sobre alguna
opción y su aspecto es el siguiente :
FIGURA 3.3.2.C Formato y diseño de botones activos.
Estos dos tipos de botones son comunes tanto para el menú principal, como para
el de ayuda. Además de los botones anteriores se destacan otros que corresponden a
un botón muerto, que indica que la opción ya está seleccionada :
FIGURA 3.3.2.D Formato y diseño de botones seleccionados.
... y otro que indica la ayuda, en su estado inactivo y activo (puntero del mouse
sobre el botón), respectivamente :
FIGURA 3.3.2.E Formato y diseño del botón de ayuda.
38
Los módulos, ya sea el de Inicio, Desarrollo o Ayuda se muestran a pantalla
completa, dejando en segundo plano el menú principal, de esta manera al salir de
alguno de los módulos se muestra inmediatamente la interfaz principal logrando mayor
dinamismo al ahorrar líneas de código.
En cuanto a otros elementos importantes considerados están el texto y colores
de los cuales se especifica lo siguiente :
• Tipografía : se utiliza Trebuchet MS, la cual fue creada especialmente para su uso
en pantalla, he ahí su buena legibilidad; además, posee toda la familia tipográfica, es
decir normal, negrita, cursiva y negrita cursiva. Razón por la cual fue escogida como
el tipo de letra o fuente para ser utilizada en software FLUX. Para conocer esta
tipografía se presenta una tabla resumen :
Tipografía TREBUCHET MS
Normal (ABCDEFGHIJKLMNOPQRSTUVWXYZ- 1234567890)
Negrita (ABCDEFGHIJKLMNOPQRSTUVWXYZ- 1234567890)
Cursiva (ABCDEFGHIJKLMNOPQRSTUVWXYZ- 1234567890)
Negrita Cursiva (ABCDEFGHIJKLMNOPQRSTUVWXYZ- 1234567890)
TABLA 3.3.2.F Familia tipográfica de Trebuchet MS.
• Colores : son colores de identidad del software corresponden al verde (0000C000
código hexadecimal), azul (00C00000 código hexadecimal) y rojo (000000FF código
hexadecimal). Ambos son utilizados de forma saturada y con un brillo intenso.
39
• Marcos: la forma de los marcos corresponden a las elipses que indican inicio o fin y
que son utilizadas en los diagramas de flujo. Estos son utilizados para albergar
mensajes de ayuda al usuario.
FIGURA 3.3.2.G Formato y diseño de marcos de mensajes.
El Anexo C ofrece definiciones sobre el concepto de diseño gráfico, con reglas
tradicionales a considerar al momento de realizar un diseño gráfico.
40
3.3.3 DEFINICIÓN DE LAS HERRAMIENTAS A UTILIZAR
Para poder llevar a cabo el desarrollo del proyecto se necesitará de varias
herramientas. El software escogido para crear aplicaciones multimedia es Macromedia
Director 7. Las razones son la recomendación del profesor guía y la disponibilidad
inmediata del software.
Una aplicación multimedia es aquella que integra varios medios, generalmente
sonido, imágenes, animaciones, texto y video, además de la interactividad, lo que
significa dar respuestas a las acciones que el usuario realiza por medio del mouse,
teclado, micrófono y otros periféricos de entrada de información. Macromedia Director
con su gran sencillez es un software líder en cuanto a la creación de aplicaciones
multimedia y se presenta con una interfaz gráfica agradable al programador. La mayor
ventaja de esta herramienta es el escaso código que se escribe lo que minimiza
bastante el trabajo. El lenguaje de programación que utiliza esta herramienta es muy
flexible en términos de variables y de estructuras de control y además está basado en
eventos, de esta manera es posible dar respuesta a los movimientos del mouse, a los
“clics” en zonas determinadas de la interfaz gráfica del programa, entre otros.
Microsoft Visual Basic 6 es la siguiente herramienta escogida para la realización
específica del menú de bienvenida del programa. Esta decisión fue tomada de acuerdo
a diversos factores como por ejemplo, el tiempo disponible para realizar la aplicación,
el conocimiento acerca del lenguaje, pero la razón principal fue por la mayor flexibilidad
que se tiene a la hora de realizar una actualización del código, decisión que fue
recomendada por el Sr. Eduardo Peña; cosa que es bastante más delicada y compleja
de realizar si se hubiese escogido Macromedia Director para este mismo objetivo.
41
En el caso de crear nuevos módulos de información con Macromedia Director, se
debe realizar lo siguiente al utilizar Visual Basic: los mencionados módulos son
ejecutados por el usuario en el menú de bienvenida, para lo cual basta con crear los
correspondientes botones de acceso, añadiéndoles el texto adecuado y agregarlos al
formulario para luego programar el evento click del mouse sobre el nuevo botón que
resulte en la ejecución del módulo a agregar. Si lo anterior se lleva a cabo con
Macromedia Director, la situación se complica bastante, puesto que se debe volver a
programar uno a uno cada elemento existente para dar literalmente espacio en el área
de trabajo a los nuevos, los que eventualmente deberán ser también programados,
situación que consume una cantidad de tiempo mayor.
Cabe mencionar que en el diseño de un software multimedia se recurre a un
variado grupo de profesionales conforme al grupo objetivo o usuario final a informar y
de acuerdo a los datos a manejar. Estos profesionales pueden incluir a profesores,
sicólogos, médicos, ingenieros, programadores, periodistas, diseñadores gráficos,
contadores, etcétera, en resumen es un equipo bastante amplio de personas cuyo
desempeño de tareas está coordinado por uno o más jefes de proyecto quienes
participan sincronizadamente para lograr sus objetivos.
En el apartado visual se recurrió a la asistencia del Sr. Héctor Ilnao Barrientos
quien es diseñador gráfico profesional. En conjunto con la información recopilada
referente a la escuela La Milagrosa en las investigaciones realizadas, y con visitas al
lugar el diseñador gráfico sugirió cambios, que incluyeron correcciones referentes al uso
de la tipografía, posición del texto en pantalla y colores a utilizar, para lograr una
interfaz que en lo posible reflejara el tema principal a tratar, es decir diagramas de flujo
de información.
42
3.4 LA PRODUCCIÓN DEL SOFTWARE
Una vez obtenido el prototipo del programa que cumplía con los requisitos
establecidos, se comenzó la construcción del Proyecto, iniciándose con la depuración
de este prototipo a fin de obtener una mejor calidad en la interfaz y en la navegación, y
de igual manera en la densidad del tamaño de sus elementos.
Flux funciona de la siguiente manera: Al ejecutar el Programa se carga la interfaz
principal hecha con Visual Basic, en donde el usuario tiene la posibilidad de hacer clic
en uno de los cuatro botones que contiene. Al elegir alguno de estos botones, el
módulo se ejecuta a pantalla completa dejando en segundo plano la interfaz principal, lo
mismo ocurre al ejecutar algún otro módulo de Flux, los cuales fueron programados con
Macromedia Director 7.
Para ver una descripción mas profunda de lo que realiza el programa, dirigirse al
manual de usuario.
3.4.1 EL MENÚ PRINCIPAL
El software diseñado abarca dos áreas importantes de acuerdo a la materia del
libro “Programación de Computadores y el Lenguaje C.” (1996-2004) del Sr. Roberto
Uribe Paredes, éstas son estudio de la introducción a la programación elemental que
contiene un apartado teórico y la utilización de diagramas de flujo, los cuales se
explicarán en un módulo diferente al de inicio, para dar a conocer en forma más
explícita cuál es el propósito de cada uno de ellos y su importancia para el objetivo
anteriormente planteado.
43
La interfaz no representa mayor complejidad, y en la pantalla principal se
visualizan tres botones ubicados en el sector izquierdo para ir al módulo deseado, más
otro botón que permite abandonar el programa.
Esta pantalla cuenta con sonidos variados y una pequeña melodía de
introducción que da la bienvenida con el objeto de captar la atención de los usuarios.
Cada botón se ilumina al pasar el mouse sobre ellos mostrando al centro de la pantalla
una pequeña descripción de la función del botón.
44
Se presenta a continuación la pantalla principal del programa Flux :
FIGURA 3.4.1 Pantalla principal del programa Flux.
En el rectángulo rojo se encuentran tres botones que en orden descendente
tienen como función ejecutar el módulo de inicio, el módulo de desarrollo y la opción de
salir del programa, un sonido confirma la selección de cada opción y el posicionamiento
del puntero del mouse sobre alguno de ellos, además del correspondiente cambio de la
gráfica del botón.
45
En la elipse roja de la figura se activan los mensajes al pasar el puntero del
mouse sobre alguno de los botones, y encerrado en el triángulo rojo se encuentra el
botón de ayuda. Esta pantalla no contiene música de fondo porque se pretende centrar
la atención en los módulos de ayuda, inicio y desarrollo, los que además contienen
efectos visuales, animaciones y una voz robótica que los ayuda a comprender las
distintas opciones.
46
3.4.2 MÓDULO DE AYUDA
Esta sección del software, y al igual que las anteriores, se ha trabajado de tal
forma que sea de fácil manejo y uso.
Se accede a este módulo desde la pantalla principal. Con una serie de efectos
visuales y sonoros se presentan los botones, que al igual que la pantalla principal se
iluminan al pasar el mouse sobre ellos indicando al centro de la pantalla una pequeña
descripción de la función del respectivo botón.
FIGURA 3.4.2.A Pantalla principal del módulo de ayuda
47
De la misma manera que el menú principal de Flux, se encuentran los botones
dispuestos a la izquierda de la pantalla, con sonidos y música de fondo, además de
efectos visuales y el marco central de mensajes de ayuda. El primer botón :
FIGURA 3.4.2.B Muestra de un botón del menú de ayuda Tiene por objetivo indicar la finalidad de este software y sus características más
importantes. El segundo botón lleva a la pantalla de descripción de los elementos
importantes del menú principal. Al hacer clic en el segundo botón se muestra esta
pantalla :
FIGURA 3.4.2.C Pantalla después de hacer clic en el primer botón de la ayuda.
48
Se muestra información del programa de una manera muy resumida invitando al
usuario a hacer clic en la doble flecha al centro de la pantalla :
FIGURA 3.4.2.D Botón para pasar a otra pantalla.
Una vez hecho el clic en este botón se carga la siguiente pantalla :
FIGURA 3.4.2.E Pantalla después de hacer clic en el botón de doble fecha.
49
Esta parte tiene como objetivo obligar al usuario a mover el puntero del mouse
sobre la pantalla, de esta manera se evita poblar la pantalla de mensajes de ayuda
redundantes , dejando que el usuario descubra por sí solo lo que le ofrece el programa.
En concreto se accionan sólo las partes importantes del menú en miniatura, mostrando
una pequeña descripción de la función de cada una. La voz de robot tiene por objetivo
sumergir aún más a los usuarios en el programa , porque de esta manera se estimula la
percepción de información auditiva, y se reemplaza texto por voz, dando así dinamismo
al programa.
El proceso es similar para el tercer botón de la pantalla de ayuda, es decir, una
explicación de la función del módulo de Desarrollo ,sus partes principales y lo que se
sugiere realizar. El cuarto botón lleva a la pantalla de créditos y agradecimientos.
50
3.5 PRUEBAS
Esta etapa del desarrollo del software se llevó a cabo en las instalaciones del
colegio y contó con la presencia de un grupo de la profesora jefe del laboratorio de
computación y de quince alumnos. A estos alumnos se les entregó el prototipo final del
programa, quedando conformes con el aspecto de la interfaz gráfica, sus sonidos y
música de fondo; no demostraron ningún problema con el manejo del menú principal, y
los módulos de ayuda y de desarrollo, indicando además lo entretenido de utilizar un
software como este para aprender materia nueva.
Según los resultados de la puesta en marcha del software prototipo Flux ha
quedado demostrado que el diseño y desarrollo de la interfaz gráfica y sus elementos
ha cumplido sus objetivos, en cuanto a la efectividad real del aprendizaje de la materia
no se sabrá hasta después de que los alumnos incorporen este programa a sus
estudios regulares, luego que oficialmente se haga entrega de este software a la
escuela La Milagrosa, puesto que son alumnos recién promovidos a Octavo año básico.
51
A continuación se presenta un gráfico dando a conocer el porcentaje de usuarios
que se encuentran de acuerdo con el prototipo presentado en la etapa inicial de puesta
en marcha del software Flux. Los datos se obtuvieron con una encuesta breve, luego de
la presentación y prueba del programa.
6%
0%94%
De acuerdo
En desacuerdo
Parcialmente deacuerdo
GRÁFICO 3.5 Porcentaje de alumnos de acuerdo con el prototipo final.
52
CONCLUSIONES
Al llegar al término de éste proyecto de titulación, se espera que el software sea
de mucha utilidad para los futuros alumnos de la enseñanza media y de universidad, los
que se verán apoyados en la materia de programación. Con la reforma educacional y la
implementación del plan de estudio actual, se acerca a los niños a la computación
convirtiéndose en una herramienta poderosa, y un paso obligatorio en la enseñanza
básica del país.
El uso de Visual Basic para realizar la interfaz principal del programa fue un gran
logro, debido a los conocimientos que ya se tenían de este lenguaje de programación, y
en caso de modificar esta interfaz para incorporar nuevas opciones se agiliza bastante
más el trabajo, que si se hubiese hecho con Macromedia Director.
La herramienta que ha sido realizada se espera sea de gran utilidad, puesto que
al ser un programa multimedia, representa una forma entretenida y amigable de
aprender la programación elemental para niños.
ANEXO A
CONCEPTOS BÁSICOS DE MICROSOFT VISUAL BASIC
54
A.1 INTERFAZ DEL ENTORNO DE TRABAJO
La interfaz del entorno de trabajo tiene el siguiente aspecto.
Figura A.1 Entorno de trabajo de Visual Basic Los elementos del entorno de trabajo de Visual Basic al iniciar un nuevo trabajo
se mencionan a continuación:
A.2 BARRA DE HERRAMIENTAS
La barra de herramientas permite acceder a un conjunto de comandos
elementales con botones representados con iconos. A continuación se presentan los
comandos más comunes de la Barra de Herramientas.
• Agregar nuevo Proyecto
o EXE estándar
o EXE Actives
o DLL ActiveX
o Control Actives
• Agregar nuevo
55
o Formulario
o Formulario MDI
o Módulo
o Módulo de Clase
o Control de usuario
o Data Report
o DataEnvironment
• Abre el Editor de Menús para un Formulario
• Abrir Proyecto
• Guardar Grupo de Proyectos
• Botones de edición de texto
o Cortar
o Copiar
o Pegar
• Buscar texto
• Deshacer y Rehacer
• Botones de ejecución
o Iniciar ejecución de la aplicación
o Pausar ejecución de la aplicación
o Detener ejecución y volver al modo de diseño
• Mostrar y Ocultar cuadros y ventanas de :
o Exploración de Proyectos
o Ventana de Propiedades
o Ventana posición del formulario
o Examinador de objetos
o Cuadro de herramientas
o Ventana de la vista Datos
o Visual Component Manager
56
A.3 EL CUADRO DE HERRAMIENTAS
Ofrece un conjunto de opciones necesarias para crear controles en un formulario.
FIGURA A.3 Cuadro de Herramientas de Visual Basic
A continuación se presenta una breve descripción de cada control de Visual
Basic del Cuadro de Herramientas.
• Puntero (Pointer): Permite moverse por el entorno y seleccionar las opciones,
además de cambiar el tamaño de los formularios y controles.
• Cuadro de imagen (PictureBox) : Genera un cuadro de tamaño ajustable para
cargar imágenes del tipo bmp, dib, gif, wmf, emf, ico y cur. aunque se puede
utilizar como contenedor visual de otros controles y de texto.
• Etiqueta (Label) : Presenta texto fijo únicamente.
• Cuadro de texto (TextBox) : Permite el ingreso de texto.
• Marco (Frame) : Sirve de contenedor visual y funcional para controles.
57
• Botón de comando (CommandButton) : Ejecuta una acción o comando al ser
seleccionado.
• Casilla de verificación (CheckBox) : Permite activar o desactivar algunas o
todas las casillas según corresponda.
• Botón de opción (OptionButton) : En conjunto con otros botones de opción sólo
se permite seleccionar uno.
• Cuadro combinado (ComboBox) : Es una combinación de un cuadro de texto
con un cuadro de lista. Permite al usuario escribir su selección o elegir un
elemento de una lista deplegable.
• Cuadro de lista (ListBox) : Exhibe una lista de elementos para ser seleccionados
por el usuario.
• Barra de desplazamiento horizontal (HScrollBar) y vertical (VScrollBar) : Dado
un rango de valores permite al usuario seleccionar uno de ellos.
• Cronómetro (Timer) : Ejecuta eventos en intervalos de tiempo previamente
establecidos.
• Cuadro de lista de unidad (DriveListBox) : Muestra unidades de disco válidas y
permite seleccionarlas.
• Cuadro de lista de directorio (DirlistBox) : Muestra directorios de una unidad de
disco válida y permite su selección.
• Cuadro de lista de archivo (FileListBox) : Muestra archivos de un directorio de
acuerdo a su extensión y permite su selección.
• Forma (Shape) : Agrega una figura que puede ser un rectángulo, cuadrado,
elipse o circunferencia a un formulario.
• Imagen (Image) : Permite cargar archivos de imagen, iconos o metarchivos de
Windows.
• Datos (Data) : Control que permite la conexión a una base de datos.
• OLE : Control contenedor OLE para incrustar datos en una aplicación Visual
Basic.
58
A.4 BARRA DE MENÚ
Contiene los comandos para construir una aplicación.
A.5 FORMULARIO
Ventana que permite trabajar con controles, gráficos y texto. El formulario es un
elemento clave a la hora de crear la interfaz de una aplicación.
A.6 VENTANA PROYECTO
Enumera los formularios y módulos del proyecto actual. Un proyecto es una
colección de archivos utilizados para generar una aplicación.
A.7 VENTANA PROPIEDADES
Enumera los valores de las propiedades del formulario o control seleccionado.
Una propiedad es una característica de un objeto (tamaño, color, etc.).
A.8 ESCRITURA DE CÓDIGO
Visual Basic es un lenguaje de programación que acepta las estructuras de
programación que se encuentran en la mayoría de los lenguajes de programación
modernos.
Una aplicación puede contener varios tipos de archivos que permiten el ingreso
de código, algunos son :
59
• Formularios (.frm) que contienen elementos visuales y de control.
• Módulos estándar (.bas) y de clase (.cls) para definir procedimientos o
funciones.
• Controles personalizados (.ocx), incluyen controles especializados, así como
versiones mejoradas de controles estándar
A.9 ESTRUCTURAS DE CONTROL
Las estructuras de control permiten controlar el flujo de la ejecución del
programa. De acuerdo a la lógica de programación el código se ejecuta de izquierda a
derecha y de arriba hacia abajo, entonces utilizando las estructuras de control es
posible cambiar el orden de ejecución de las intrucciones.
Algunas estructuras de control más utilizadas :
• Estructuras de Decisión.
Con esta estructura es posible comprobar el cumplimiento de una condición y
después, dependiendo del resultado de la comprobación realizar diferentes
operaciones. Las estructuras de decisión aceptadas en Visual Basic son :
o If... Then...
o If... Then...Else
o Select Case
• Estructuras de Bucles.
60
Estas estructuras permiten ejecutar repetidamente una o más líneas de código.
Algunas estructuras de bucles que Visual Basic acepta son :
o Do…Loop
o For…Next
o For Each…Next
o While…Wend
ANEXO B
MACROMEDIA DIRECTOR
62
B.1 MACROMEDIA DIRECTOR
Macromedia Director es un programa que sirve generalmente para crear
aplicaciones multimedia, presentaciones interactivas, y demostraciones. Director
tambien es utilizado para crear elementos interactivos para ser integrados en paginas
Web.
Director posee diversas ventanas que interactuan con los diferentes elementos
del programa, algunas de éstas ventanas son: la ventana de reparto, el inspector de
comportamientos, el editor de dibujos de director, etc…
Cabe destacar que las aplicaciones creadas con Director cuando son compiladas
se transforman en archivos ejecutables que no requieren la instalación de otros
programas en el sistema en donde se va a utilizar.
Macromedia Director se puede ejecutar en plataformas de Microsoft Windows y
Sistema Operativo Macintosh.
Los archivos creados en Director se llaman “Películas” y consisten de una serie
de imágenes las cuales a una determinada velocidad, son capaces de simular una
animación. Estas películas permiten interactuar con el usuario final, el cual puede
decidir a que sector dirigirse, cuando detenerse o salir de ella.
63
B.2 ESTRUCTURA DE MACROMEDIA DIRECTOR
Las películas de Macromedia Director se componen de las siguientes partes:
• Stage (Escenario)
• Cast (Reparto)
• Cast Members (Miembros del Reparto)
• Score (Partitura)
• Scripts (Guiones de Lingo)
A continuación se describirá brevemente a cada uno de los componentes
mencionados anteriormente:
Stage (Escenario) : Es donde están los miembros del reparto y en donde se desarrolla
la acción. Es un rectangulo que posee una resolución por defecto de 640x 480 pixels, y
un fondo de color blanco, pero estas propiedades pueden modificarse utilizando la
opción Modify-Movie-Properties.
FIGURA B.2.A El Escenario (Stage) de Director
64
Cast Members (Miembros del Reparto) : Son los elementos o también llamados
“Personajes” los cuales forman la película, éstos elementos pueden ser creados con los
propios recursos de Director, o también pueden ser importados, es decir otros
elementos que hayan sido creados con otros programas.
Los Miembros del Reparto (Cast Members), tanto los creados como los
importados, pueden ser: imágenes, texto, sonidos, videos, etc…
Cast (Reparto) : Es una ventana donde se colocan los elementos que van a formar la
película, éstos elementos se denominan miembros del reparto, los cuales. En el “Cast”
se pueden importar o modificar los miembros del reparto.
FIGURA B.2.B Ventana del Cast (Cast Member Window).
65
Score (Partitura) : Esta ventana organiza cuándo y en qué forma aparecerán los
miembros del reparto en la película.
El score es parecida a una hoja de cálculo, y las columnas se denominan
“frames” y son las encargadas de listar a los miembros del reparto que van apareciendo
en el escenario en un momento determinado. Cada fila de el Score se denomina
Channel (canal).
Se le llama “Celda” a la intersección de un frame (cuadro) y un channel (canal).
Los frames tienen una limitación de 120 sprites gráficos.
El Score también posee en la parte superior de la ventana 6 canales verticales,
de arriba hacia abajo el primero corresponde a un canal destinado específicamente a
controlar el tiempo, el segundo posee paletas de colores, el tercero son transiciones, el
cuarto y el quinto permiten colocar sonido a nuestra película, y el sexto está destinado a
los Scripts de los frames.
Otro componente que está presente en el Score es la “Cabeza Lectora”, la cual
es la encargada de desarrollar la acción, se identifica porque es un rectángulo de color
rojo, con dos líneas verticales del mismo color que se expanden en forma vertical hacia
arriba y hacia abajo, que indica que cuadro se está visualizando en ese momento.
Cabe destacar que la cabeza lectora puede moverse en cualquier punto de el Store, y
se puede desplazar desde el primer al último canal ocupado.
66
FIGURA B.2.C Ventana de Score.
B.1.2 LOS SCRIPTS O GUIONES DE LINGO
Son una serie de instrucciones escritas en lenguaje Lingo, las cuales se sitúan
en la ventana del Script que corresponda. Estas instrucciones ocurren en dos distintas
ocasiones:
• Cuando el usuario interactúa con un personaje, como por ejemplo cuando se
hace click en un botón.
• Cuando la cabeza lectora pasa por algún frame, entra o sale de él.
• Los scripts se clasifican según al objeto a los cuales se asignan:
• Scripts de Sprite
• Scripts de Miembros del Reparto
• Scripts de Frame
• Scripts que se asignan a toda la película
67
Las acciones que ocurren en una película, ocurren gracias a los eventos
principales, los cuales se tienen que utilizar en Handlers ( Bloques de Código que
comienza con un “On” y termina con un “End” ), con su adecuado script, todo lo
anteriormente dicho posibilita realizar acciones dentro de la película.
A continuación se presentan algunos ejemplos de Scripts de Eventos:
B.1.3 SCRIPTS DE PELÍCULA
• On startMovie : Evento que ocurre cuando el usuario comienza a ejecutar un
proyector de Director.
• On EnterFrame : Ocurre cuando la cabeza de lectura entra en un fotograma en el
score.
B.1.4 SCRIPTS DE FRAME
• On mouseUp : El usuario suelta el botón izquierdo del ratón.
• On KeyDown : El usuario mantiene pulsada una tecla.
B.1.5 MIEMBROS DEL REPARTO Y SCRIPTS DE SPRITES
• On KeyUp : El usuario suelta una tecla.
• On mouseEnter : Indica que el puntero entra en la región de un sprite.
68
Los Handlers responden con alguna función cuando son llamados o invocados.
Aquí se muestra un ejemplo de un Handlers:
On mouseLeave Set the visible of sprite 32 to trae End
En el ejemplo anterior el handlers comienza con la palabra “On”, después se
aprecia el evento “mouseLeave”, y posteriormente se finaliza con un “End”.
B.3 EVENTOS PRIMARIOS
Los eventos primarios permiten que ocurran acciones en una película. Los
eventos primarios poseen un orden de prioridad, el cual se rige por las reglas de
prioridad de Lingo.
A continuación se presentan las reglas de prioridad de Lingo:
• Asignaciones a eventos principales
• Script de un Sprite
• Script del Miembro de Reparto
• Script del Frame
• Script de la Película
69
Existen 2 tipos de Eventos:
• Eventos de Reproducción : startMovie, stopMovie, EnterFrame, ExitFrame.
• Eventos de Respuesta del Usuario : keyDown, mouseDown, mouseUp,
mouseEnter, mouseLeave, mouseWithin.
• Elementos del lenguaje Lingo que permiten hacer varias acciones al momento
de escribir código.
• Comandos : Ordenan la acción mientras se ejecuta la película ( Set, Put,
Play, etc… )
• Funciones : Las funciones devuelven valores ( time, date, key )
• Keywords (Palabras Reservadas) : se refieren a componentes específicos de
una película (castlib, sprite, member).
• Propiedades : Corresponden a los atributos de un objeto ( colorseph, the
stageleft, loch ).
• Los Operadores : Son terminos aritmeticos y de texto que pueden modificar
el estado de una propiedad o variable ( +,-,*,/,& ).
• Constantes : son propiedades estáticas, que no pueden ser modificadas
(FALSE, TRUE, EMPTY, RETURN).
70
B.3.1 EJEMPLOS DE COMANDOS DE LINGO Los comandos de lingo se ubican en el cuerpo de los handlers. Algunos de ellos
son los siguientes:
• Go to the Frame : Permite a la cabeza lectora posicionarse en algún frame
determinado (Go to frame “nombre frame”)
• Updatestage : Es el encargado de refrescar la pantalla.
• Set the visible of sprite 12 to true : Se refiere al comportamiento de un
Sprite, por ejemplo en este caso el sprite 12 se vuelve visible.
• Random (x) : Random es una función, en la cual uno puede colocar un
numero entero en el lugar de la “x”, y ésta función devuelve un número
aleatorio del 1 al x.
ANEXO C
CONCEPTOS DE DISEÑO GRÁFICO
72
C.1 CONCEPTO GRÁFICO
El desarrollo de un producto multimedia tiene dos componentes principales :
• Creación de contenido : el proceso de recolectar, analizar y crear la información
que será presentada.
• Diseño de la interfaz gráfica : El enlace entre el contenido y el usuario que
permite que este último navegue a lo largo de la presentación.
El diseño de la interfaz gráfica viene a ser el aspecto más importante de un
producto multimedia porque el papel que desempeña es como intérprete y como guía a
lo largo del contenido.
C.2 REGLAS DE DISEÑO GRÁFICO
Existen pocas reglas tradicionales en el diseño gráfico que pueden ser aplicadas
en el contenido de un producto multimedia, pero dentro de las más importantes están :
• La regla de Tercios
Esta regla sugiere que el área de la pantalla se divida ligeramente en secciones
de 1/3 ó 2/3, la siguiente es una división de 1/3 :
73
FIGURA C.2.A Regla de los tres tercios.
Esta regla es una guía para la ubicación de los objetos que serán agradables para el
ojo humano.
• La regla de Márgenes Internos
Esta regla dice que los márgenes internos de un grupo de objetos son más
importantes que el marco externo, como los muestra esta figura :
FIGURA C.2.B Regla de los márgenes internos.
En el ejemplo de la izquierda, a pesar de que tiene los bordes bien alineados en
el exterior, existe un espacio en el centro que atrae la atención al ojo. El ojo se fija en el
centro en vez de fijarse en el contenido de las otras imágenes. Este problema es
resuelto en el ejemplo se la derecha donde todos los márgenes internos están
alineados a la misma distancia.
74
• Espacio negativo
Este concepto es también conocido como “espacio blanco”, a pesar de que el
concepto es más aplicable en diseño de impresión. El espacio negativo simplemente se
refiere a dejar áreas del diseño sin contenido. Una pantalla llena confunde al usuario y
podría prevenir la asimilación de cualquier contenido. La regla aquí es guardar cada
pantalla simple, y sin mucha información, sólo con una idea principal o concepto.
• Flujo y Peso
En países occidentales, sus habitantes leen de izquierda a derecha, entonces es
importante recordar que muchos usuarios actuarán de similar manera al enfrentarse a la
información y contenido. El peso se refiere al tamaño, color y oscuridad de los
elementos gráficos, por lo tanto se debe un balance con el peso de las gráficas.
• Tipografía
El estudio de la tipografía es un campo bastante amplio, por que se deberán
considerar lo siguiente puntos al momento de trabajar con texto :
o Typoface (o familia) : corresponde al nombre del tipo de estilo.
o Letra : se refiere a la subcategoría de typoface, por ejemplo : simple, negrita,
cursiva y negrita cursiva.
o Tamaño : Es medido en puntos, un punto es 1/72 pulgada. La referencia
punto para estas medidas está hecha en minúscula x para cualquier typoface.
Por lo tanto, el alto de una minúscula x a72 puntos es una pulgada.
75
o Leading : se refiere al espacio entre líneas de texto.
o Cantidad de texto : generalmente es aceptado que a muchas personas no
les gusta leer grandes cantidades de texto en pantalla, por lo tanto es
recomendable evitar bloques largos de texto en pantalla.
• Color : la teoría del color es otra amplia área , pero se sugiere seleccionar un
mínimo se colores, y en lo posible mantener la misma combinación.
ANEXO D
MANUAL DE USUARIO
77
MANUAL DE USUARIO
“FLUX”
D.1 INTRODUCCIÓN “Flux” es un software multimedia de apoyo para las clases de computación
impartidas en la escuela La Milagrosa que tiene por objetivo introducir a los niños de
edades entre 13 y 15 años a la materia de la programación complementando su actual
plan de estudio. La manera de ver la materia logra que el alumno se sumerja en un
mundo de sonidos, colores y animaciones, donde se espera que logre un entendimiento
sobre el tema antes de trabajar con código de algún lenguaje de programación en
particular.
D.2 REQUERIMIENTOS DE SOFTWARE Y HARDWARE
• Sistema operativo Microsoft Windows 9x/Me/XP
• PC con microprocesador de 450 Mhz o superior.
• 128 Mb de RAM o superior.
• 200 Mb de espacio disponible en Disco Duro.
• Tarjeta de sonido.
• Teclado, parlantes y mouse.
• Unidad lectora de CD-ROM.
78
D.3 INSTALACIÓN
Insertar CD que contiene el software en una unidad lectora. Esperar la carga de
la pantalla de bienvenida y seguir los pasos.
D.4 EJECUCIÓN
Hacer doble clic en el icono del escritorio con el nombre Flux.
79
D.5 DESCRIPCIÓN DEL PROGRAMA
D.5.1 PANTALLA PRINCIPAL
Al ejecutar el programa, carga una pantalla de bienvenida al programa con el
logotipo de la Universidad de Magallanes, el nombre del programa y el año. Luego de
unos segundos se cierra y da paso al menú principal (FIGURA D.5.1.A).
El menú principal ofrece las siguientes opciones :
• Inicio : corresponde al módulo de inicio que contiene el apartado introductorio a l a
materia de programación, donde una voz robótica les da la bienvenida y les explica
las definiciones (FIGURA D.5.1.B).
• Desarrollo : corresponde al módulo que contiene la materia de diagramas de flujo,
con la misma voz robótica se explica la materia y se muestran en pantalla ejercicios
al final de este módulo (FIGURA D.5.1.B).
• Ayuda : se accede a la ayuda haciendo clic en el icono con forma de signo de
interrogación; esta perta ofrece varias opciones, entre las que están descripción del
programa y sus características, descripción del menú principal, descripción del
módulo de desarrollo (FIGURA D.5.1.B).
• Salir : cerrar el programa (FIGURA D.5.1.B).
80
El menú principal (FIGURA D.5.1.A) muestra pequeños mensajes de ayuda al
centro de la pantalla, con la descripción de la función de cada botón.
FIGURA D.5.1.A Menú principal del programa Flux.
Los elementos importantes de este menú son : botones y marco central
FIGURA D.5.1.B Botones de Incio, Desarrollo, Salir y Ayuda del menú principal.
81
Cada uno de estos botones tiene un estado activo y una respuesta sonora al
pasar el puntero del mouse sobre alguno de ellos.
82
D.5.2 LA AYUDA
Ofrece información referente a los objetivos del programa, descripción de los
elementos importantes del menú principal y el de Desarrollo (FIGURA D.5.2).
Contiene un menú de opciones las cuales son :
• ¿Qué es? : ofrece información referente a los objetivos del programa y sus
características multimediales.
• Principal : entrega una descripción interactiva de los elementos del menú principal
del programa. En esta parte se debe situar el puntero del mouse sobre algún
elemento de la pantalla para activar la voz y la descripción.
• Desarrollo : explicación similar a la anterior, pero referente al módulo de Desarrollo.
• Acerca de: se entrega información de las personas que han participado en el
desarrollo de este producto y agradecimientos.
83
FIGURA D.5.2 Menú de opciones de la Ayuda.
84
D.5.3 MÓDULO DE INICIO
Para ejecutar este módulo, que corresponde al apartado teórico se debe hacer
clic en el siguiente botón del menú principal :
FIGURA D.5.3.A Botón de acceso al módulo de Inicio
Inmediatamente cargará la siguiente pantalla :
FIGURA D.5.3.B Una de las pantallas del módulo de Inicio.
La información de este módulo está acompañada de la voz robótica mencionada
antes, se dispone de un botón de ayuda, un botón para salir y una flecha para continuar
85
con el desarrollo del programa. Todos estos botones cambian de gráfica y emiten
sonidos para indicar que se pueden seleccionar.
D.5.4 MODULO DE DESARROLLO
Esta sección corresponde a la materia de diagramas de flujo y tiene como
finalidad que los alumnos comprendan la manera en que fluye la información de un
programa. Para ejecutar este módulo se debe hacer clic en el siguiente botón :
FIGURA D.5.4.A Botón para acceder al módulo de Desarrollo.
Este módulo se presenta con una interfaz sencilla donde cada botón permite
acceder a la materia señalada, además se recomienda recorrer secuencialmente la
materia, de principio a fin.
También se incluye materia acompañada de ejemplos interactivos que solicitan al
usuario a responder lo que se les pregunta indicando luego con alarmas visuales y
sonoras si su respuesta es o no correcta, facilitando de esta manera el entendimiento
de la materia.
Al final de cada pantalla se presenta la opción de avanzar a la siguiente o si se
desea volver a la pantalla anterior mediante botones animados.
86
La FIGURA D.5.4.B muestra la pantalla principal del módulo de desarrollo. En la
parte de la izquierda se observan los botones que llevan a las distintas partes del
módulo y al posicionar el puntero del mouse sobre algún botón, éste es iluminado y se
escucha un sonido, todo esto para indicar que está seleccionado. en la parte central se
observa un mensaje de bienvenida, también existe música de fondo y una voz
“Robótica” para evitar el uso repetitivo de extensos mensajes de texto. En la parte
inferior derecha se encuentra el botón de ayuda que lleva al módulo creado por el otro
integrante del proyecto.
FIGURA D.5.4.B Pantalla principal del módulo de Desarrollo.
87
La Figura D.5.4.C muestra un ejercicio de diagrama de flujo, que mediante el uso
de efectos visuales y sonoros se despliega en pantalla, éste pertenece a un ejemplo y
de acuerdo a lo aprendido el usuario debe hacer clic en los botones “Correcto” o
“Incorrecto”, todo esto acompañado de la voz Robótica que indica lo que se debe hacer.
En el sector inferior derecho se observa que la ayuda está disponible en todo
momento, y se da la posibilidad de regresar al menú principal. Además hay dos flechas
que indican que se puede avanzar o retroceder hacia otras pantallas en el módulo.
Estas flechas hacen su aparición cuando el usuario responde correctamente.
FIGURA D.5.4.C Una de las pantallas del módulo de Desarrollo.
88
Este es solo uno de los ejemplos que el usuario encontrará en el software,
puesto que existen otros, que también tienen el objetivo de ejercitar la materia, para que
posteriormente al final del módulo se encuentre preparado para desarrollar un pequeño
test de varias preguntas.
89
BIBLIOGRAFÍA
[1] Roberts , Jason. Curso Oficial de Lingo, cap. 2, págs. 54-64, cap. 5, págs.161-
175, cap 6, págs. 193-211. Anaya Multimedia, 1998.
[2] Pressman , Roger S. Ingeniería del Software, cap. 2, págs. 18-34, cap. 3, págs.
39-49. McGraw Hill / Interamericana, 1993.
[3] Lay , Keith. Curso de Director, The University of British Columbia, 1999.
[4] E. Echeverra M. Apis de Windows.
http://usuarios.lycos.es/echeverriam/Apis.htm. 12/07/2004.
[5] Guillermo Som. Curso básico de programación en Visual Basic. http: //www.wcostasol.es/guiller. cap 5, cap. 22, cap. 23, cap. 24, cap 28, cap. 29. 24/12/2002.