EDApplets: Una Herramienta Web para la Enseanza de Estructuras de

datos y Tcnicas Algortmitcas

Almeida F., Blanco V., Moreno L. M.

Dtpo. Estadstica, I. O. y Computacin

Universidad de La Laguna

38206 Tenerife

e-mail: {falmeida, vblanco, lmmoreno}@ull.es

Resumen tancia que existe entre los estilos de aprendi-

Presentamos en este trabajo la herramienta
EDApplets, una applicacin web orientada a
la enseanza/aprendizaje de la programacin
y de la algortmica en las ingenieras. Basada
en la tecnologa de Applets Java, est orien-
tada a la animacin y visualizacin median-
te trazas de algoritmos y estructuras de da-
tos. La herramienta permite cubrir diversos as-
pectos en una enseanza que puede ser dirigi-
da a distintos tipos de estilos aprendizaje: ac-
tivo/reexivo, metdico/intuitivo, visual/oral,
etc. Asimismo, presentamos los aspectos me-
todolgicos que deberan ser considerados a la
hora de introducir la herramienta en el aula
como un suplemento al aprendizaje.
1. Introduccin
zaje observados en los alumnos y los estilos de
enseanza generalmente utilizados, contribu-
ye a consolidar las dicultades de aprendizaje
(ver tabla 1).
Aunque no hay una nica denicin y cla-
sicacin sobre estilos de aprendizaje([11], [6],
[1], [9], [7]). Todos los autores coinciden en que
no hay estilos correctos e incorrectos y en que
es habitual que las personas utilicen los esti-
los de forma complementaria ([6], [8], [5], [17]).
De este modo, uno de los grandes retos en la
enseanza en general y, de la enseanza de la
programacin en las ingenieras en particular,
es el de ser capaz de ajustarse a las necesida-
des particulares de los individuos. Una forma
de acercarse de forma individualizada al alum-
no es a travs de software multimedia sobre
materias especcas ([4], [20]).
Es un objetivo de este trabajo la presen-

El aprendizaje de materias relativas a la al- tacin/divulgacin de la herramienta EDAp-

gortmica y la programacin de algoritmos plets [10], una utilidad interactiva orientada a

presenta quizs uno de los niveles de dicul- las materias de estructuras de datos y algorit-

tad ms elevado en lo que se reere a mate- mos. Se intenta con este modelo de herramien-

rias propias en las ingenieras. Los estudiantes ta contribuir a reducir el hueco creado por la

han mostrado desde siempre dicultades para dicotoma entre los estilos de enseanza y los

asimilar nociones matemticas abstractas, en de aprendizaje.

particular cuando stas incluyen la dinmica
de cmo los algoritmos manipulan los datos.
Montgomery [16] establece que estas diculta-
des se mantienen a lo largo de cada curso aca-
dmico. En su experiencia analiza las dimen-
siones sobre estilos de aprendizaje propuestas
por Soloman [11] (procesamiento, percepcin,
representacin y comprensin) en el contexto
de las ingenieras y concluye que la enorme dis-
La idea de introducir este tipo de herramien-
tas en las materias no es nueva y suelen estar
soportadas en la utilizacin de animaciones pa-
ra ilustrar el comportamiento dinmico de los
algoritmos. Cientos de animaciones han sido
desarrolladas y se encuentran dispersas en la
red, en muchos casos como software de libre
distribucin [2], [19]. La mayora de ellas han
sido diseadas bajo la suposicin de que las

1
410
Dimensin Aprendizaje
Procesamiento 67 % de los estudiantes
aprende mejor de una forma
activa
Percepcin 57 % de los estudiantes
aprenden de forma metdica
Representacin 69 % de los estudiantes
aprenden de forma visual
Comprensin 28 % de los estudiantes
aprende de forma global
Tabla 1: Resultados observados por Montgomery sobre los estilos de aprendizaje.
animaciones serviran a los estudiantes como
una ayuda efectiva en el proceso de aprendi-
zaje. Sin embargo, aunque las animaciones son
siempre recibidas de forma entusiasta por par-
te de los alumnos, no hay evidencias empricas
que demuestren la efectividad de las animacio-
nes por s mismas. El diseo de las animaciones
de los algoritmos debe ser cuidadosamente re-
visado para tener posibilidades de profundizar
en el aprendizaje.
En nuestra propuesta, partimos de un con-
cepto ms amplio, la visualizacin de los al-
goritmos, mediante la que se introducen los
algoritmos y sus animaciones a distintos ni-
veles de abstraccin en un entorno hiperme-
dial integrado. En EDApplets la visualizacin
contempla la ejecucin paso a paso de los al-
goritmos para entradas proporcionadas por los
alumnos, la presentacin de trazas del cdigo y
de los elementos (variables, estructuras de da-
tos, etc...) ms representativas del mismo y la
visualizacin del comportamiento del algorit-
mo mediante animaciones grcas. EDApplets
ha sido concebida como una aplicacin web ba-
sada en la tecnologa que nos proporcionan los
Applets de Java y se encuentra pblicamente
disponible en www.pcg.ull.es/edapplets.
La integracin en EDApplets se soporta a
distintos niveles:
Integracin de algoritmos en un nico en-
torno frente a la enorme dispersin de
ejemplos y casos que ha sido desarrolla-
da en la ltima dcada.
Programacin, algoritmos y estructuras de datos
Enseanza
La mayora de las clases se imparten de
forma tpicamente pasiva y reexiva
Habitualmente se les ensea de forma
intuitiva
Las clases suelen ser orales
Rara vez se hace hincapi en una visin
global del sistema
Integracin de las interfaces de manera
que se minimiza la curva de aprendizaje
en el uso de los elementos del entorno.
Integracin de distintos elementos ins-
tructivos (grcos y textuales) en una
misma pieza de software, cada componen-
te contempla el cdigo que se ejecuta, la
entrada, la salida y la animacin grca
del algoritmo.
En los ltimos aos hemos observado una
rpida y amplia aceptacin de la web como un
medio global para presentar y procesar infor-
macin que es accesible en mltiples formatos
(multimedia) y a velocidades aceptables (hi-
permedia). Esta rpida evolucin del entorno
se ha debido, en gran medida, al lenguaje de
programacin Java desarrollado por SUN Mi-
crosystems [15]. En particular los Applets de
Java permiten ser ejecutados desde un navega-
dor de pginas web. El uso de esta tecnologa
para desarrollo de programas en la web pre-
senta algunas ventajas[14] y son algunas de las
razones que nos han motivado a basar nuestra
herramienta en este tipo de tecnologa:
La interoperabilidad que le permite ope-
rar con diversos formatos (texto, gr-
co, animaciones y sonidos), con diversos
lenguajes (JavaScript, VRML), con otros
programas en el servidor y con documen-
tos HTML/XML en el cliente.
La interaccin con el usuario: A travs
de las interfaces grcas de usuario los
X Jornadas de Enseanza Universitaria de la Informtica 411

Figura 1: Vista general del sitio web EDApplets

applets enriquecen la interaccin con el la herramienta y cada uno de los applets. Se

usuario que pueden proporcionar las p- presenta una descripcin de cada uno de los
ginas HTML. elementos que forman parte de los mismos. El
sitio web en el que se han ubicado los applets
La independencia de las plataformas y la
se presenta en la seccin 3. Introducimos en la
portabilidad: Las versiones multiplatafor-
seccin4, una posible metodologa con la que
ma de software educativo son bastante es-
hacer uso la herramienta en el aula y extraer
casas y, a menudo presentan una enorme
as el mximo partido a los applets. Se pre-
dependencia del hardware de base. Los
sentan las conclusiones en la seccin 5 y, en
applets de java pueden ser ejecutados so-
la seccin 6 planteamos las futuras lneas de
bre diferentes arquitecturas sin ms que
trabajo.
hacer uso de un navegador compatible con
Java.

El trabajo ha sido estructurado del siguien-

te modo: la seccin 2 describe la interface y
el diseo general con el que se han concebido
412
Figura 2: Applet que ilustra una sentencia de control iterativa FOR
2. Diseo de los applets
En EDApplets todos los applets desarrollados
son similares en cuanto al diseo de la interface
se reere. Cada Applet simular la ejecucin
de un algoritmo. El Applet presenta el cdigo
del algoritmo y el alumno introduce datos para
una simulacin. El alumno interacta con el
Applet a travs de los botones de velocidad.
En todos se distinguen cinco paneles o reas
de trabajo (ver gura 2): el panel de entrada
de datos, el panel de control de velocidad de
ejecucin, el panel de visualizacin del cdigo,
el panel de animacin y el panel de salida para
variables de traza.
Describimos a continuacin cada uno de
ellos:
Panel de entrada de datos : Desde l
Programacin, algoritmos y estructuras de datos
se introducen los valores sobre los que el
algoritmo har la simulacin. La simula-
cin comienza despus de pulsar el botn
'Comenzar'.
Panel de control de velocidad : Se pre-
sentan dos botones, el botn 'Continuar'
y el botn 'Paso a paso'. Estos botones
permiten alternar la simulacin entre una
ejecucin continuada del cdigo y una eje-
cucin paso a paso del mismo. En el modo
de ejecucin paso a paso es necesario pul-
sar el botn 'Paso a paso' cada vez que se
desea simular una nueva instruccin del
algoritmo. Para el modo de ejecucin con-
tinua, cuando el algoritmo lo requiere, se
introduce en el applet una barra de 'scroll'
que permite aumentar o disminuir la ve-
locidad de la simulacin (ver gura 3).
X Jornadas de Enseanza Universitaria de la Informtica
Figura 3: Tcnicas recursivas: ejemplo de Divide y
Vencers
Panel de visualizacin de cdigo : Es-
te panel presenta el cdigo del algoritmo
que se pretende simular. Todos los cdi-
gos presentes en EDApplets aparecen en
forma de pseudocdigo que sigue el esti-
lo del lenguaje de programacin C. Cada
lnea de cdigo aparece enumerada para
facilitar la referencia al mismo. Durante
todo el proceso de simulacin se sombrea
la lnea de cdigo que se est ejecutan-
do. En ese instante, se ejecuta, en el pa-
nel de animacin, la accin de animacin
correspondiente a la lnea sombreada, y,
simultneamente, se asignan, en el panel
de salida, los nuevos valores que toman
las variables.
Panel de animacin : Presenta la visua-
lizacin grca de la simulacin del algo-
ritmo. Cuando el algoritmo lo requiere, el
Applet desdobla el panel en tantos pane-
les como sea necesario para obtener una
visualizacin adecuada (ver gura 3), au-
mentando de este modo la capacidad de
la animacin.
Panel de salida : Muestra los valores de
las variables para las que se est efectuan-
do la traza. El valor mostrado representa
el contenido de esas variables antes de que
sea ejecutada la lnea sombreada en el pa-
nel de cdigo.
413
Figura 4: Tipo abstracto de dato cola implemen-
tada con punteros
La gura 2 presenta la fotografa de un ins-
tante de la ejecucin del Applet For (III). El
Applet simula la asignacin de valores a una
matriz triangular superior. El cdigo utiliza
dos bucles anidados con lmites superiores N,
M . Se introducen los valores para los lmites de
ejecucin de los bucles y, la animacin mues-
tra a qu dato se accede en cada instante y qu
valor asume.
Con este diseo se prentende proporcionar
un soporte que permita instruir a los alumnos
activos e intuitivos a traves de la animacin y
de los elementos grcos, sin descuidar las ha-
bilidades de los alumnos metdicos y reexivos
mediante el uso del razonamiento sonre el c-
digo o sobre la traza de ejecucin del mismo.
La integracin global de tcnicas y estructuras
permite una visin global de objetivos cuando
sea necesario.
3. Sitio Web
Una vez realizado el diseo y estructura gene-
ral de los applets, hemos implementado dife-
rentes tcnicas algortmicas y ejemplos de uso
de estructuras de datos y/o de control utili-
zando este diseo. Se hace especial hincapi
en el que el alumno pueda seguir de una ma-
nera visual el comportamiento de la tcnica
414
o estructura de dato concreta, al mismo que
tiempo que sigue el pseudocdigo de la imple-
mentacin de la misma.
Los applets desarrollados han sido agrupa-
dos en funcin de las tcnicas algortmicas y
de las estructuras de datos y control utiliza-
das. Hemos diseado un sencillo portal web en
el que estos applets estn disponibles para ser
utilizados por el alumno, como podemos ver
en la gura 1
Estructuras de Control . En este ep-
grafe se han incluido los applets
ilustran el comportamiento de estructu-
ras bsicas. As, podemos visualizar cmo
funcionan las diferentes estructuras de se-
leccin usando como ejemplo una calcula-
dora de enteros. Para las sentencias itera-
tivas, hemos escogido ejemplos basados en
vectores y matrices. En la gura 2 se ilus-
tra el rellenado de una matriz triangular
superior.
Estructuras de Datos . Incluyen applets
que ilustran estructuras de datos abstrac-
tas como las listas, pilas y colas. Se ha
escogido una implementacin basada en
punteros. Esta representacin puede ser
tambin de utilidad para ilustrar al alum-
no los conceptos de direccin de memoria
(puntero) y de aquellos aspectos relacio-
nados con la gestin de memoria dinmi-
ca. En la gura 4 se ilustra la insercin
de nodos en una cola dinmica. El estu-
diante puede observar en cada paso qu
sentencia reserva la memoria y crea un
nuevo nodo para almacenar informacin
y, a continuacin, cmo se enlaza este no-
do a la estructura de datos abstracta.
Tcnicas Algortmicas . La mayora de
los applets implementados permiten ilus-
trar las diferentes tcnicas algortmicas.
En primer lugar podemos introducir al
alumno en el concepto de recursividad,
utilizando por ejemplo un contador recur-
sivo, para luego pasar a tcnicas ms com-
plejas basadas en la recursividad como
Backtracking, Divide y Vencers, Rami-
cacin y Acotacin o Programacin Din-
mica. Tambin se ilustran las tcnicas de
Programacin, algoritmos y estructuras de datos
ordenacin utilizando algoritmos conoci-
dos como QuickSort, MergeSort o Selec-
tionSort. Como ejemplo de estas tcnicas,
ilustramos en la gura 3 la ejecucin de
un algoritmo tpico para explicar la tcni-
ca de Divide y Vencers (el problema de
las Torres de Hanoi ). Este applet muestra
el rbol de llamadas recursivas y los pa-
rmetros de la funciones especicadas en
cada llamada. El alumno obtiene de for-
ma visual toda esta informacin, lo que
facilita la compresin del funcionamiento
que
de esta tcnica recursiva.
4. Metodologa
El diseo seguido en EDApplets es suciente-
mente sencillo como para que el alumno pueda
comenzar a hacer uso de los applets sin dema-
siado esfuerzo. Sin embargo, del mismo mo-
do que una animacin por s misma podra no
contribuir de forma efectiva en el proceso de
aprendizaje, la ejecucin paso a paso de un
algoritmo y su visualizacin mediante trazas,
podra no resultar instructiva si se usa de for-
ma aislada. Planteamos que cada applet debe-
ra estar acompaada de una introduccin de
texto que podra estar incluida en el propio ap-
plet o separada del mismo. Esta informacin
textual que puede venir en forma de tutorial,
situara al alumno en el contexto del problema
que se pretende resolver. Adems de esta intro-
duccin, otro soporte, no tan obvio pero muy
importante, es una hoja cuestionario del ap-
plet, que se solicita al estudiante que rellene.
El cuestionario constituye un conjunto de pre-
guntas sencillas de contestar que pueden ser
respondidas utilizando el applet o razonando
a partir de l. El cuestionario podra asistir a
los instructores en la integracin los recursos
del applet en su curso solicitando al alumno/a
las respuestas al mismo como parte de la tarea
o del trabajo de laboratorio. Como ejemplo, en
el caso del applet de la gura 2 el cuestionario
podra recoger algunas de las siguientes cues-
tiones:
Realiza una traza del algoritmo para va-
lores de N =5 y M = 5.
X Jornadas de Enseanza Universitaria de la Informtica
Qu valor toma la variable
Cul es el nmero total de iteracio-
nes del algoritmo?
Si los valores de N y M fueran
12000 respectivamente
Que valor tomara la
A[50][200]?
Cul es el nmero total de iteracio-
nes del algoritmo?
Puesto que es prcticamente imposible de-
sarrollar una simulacin para N = 4500, M =
12000, el alumno deber hacer uso de desarro-
llo matemtico abstracto para poder contestar
a las ltimas cuestiones. Por supuesto, el ins-
tructor deber ser consciente de estos aspectos
y complementar la formacin terica con los
elementos necesarios para poder responderlas.
5. Conclusiones
Hemos desarrollado una herramienta multime-
dia que acta como suplemento en las tareas
de enseanza/aprendizaje de las materias pro-
pias de la programacin y la algortmica en
las ingenieras. Se trata de una aplicacin web
que se ha desarrollado haciendo uso de la tec-
nologa de applets java. Se parte de un diseo
integrado y coherente que enriquece animacio-
nes clsicas de algoritmos con la posibilidad de
efectuar trazas y ejecuciones paso a paso sobre
el cdigo. El diseo utilizado facilita una ense-
anza/aprendizaje activa, visual, metodolgi-
ca y secuenciada, sin descuidar elementos que
contribuyan a una instruccin reexiva, oral,
intuitiva y global cuando sea necesaria. De este
modo se intenta reducir la distancia que habi-
tualmente existe entre los estilos de enseanza
y los estilos de aprendizaje que generalmente
presentan los alumnos.
6. Traba jo futuro
La experiencia que se ha adquirido en el de-
sarrollo de estas herramientas para su utiliza-
cin en la labor docente nos anima a seguir
trabajando en esta lnea. Nos planteamos la
415
A[3][4]? necesidad de aadir nuevos ejemplos de utili-
zacin de las estructuras y tcnicas algortmi-
cas planteadas, que ayuden al estudiante una
mejor comprensin de estos mecanismos. Es
4500 y bien sabido que muchas de estas tcnicas son
mejor asimiladas cuanto ms ejemplos varia-
dos se planteen en el uso de las mismas.
variable
Otra lnea en la que sera deseable trabajar,
es en la implementacin abierta del portal de
applets. Dotar al mismo de una infraestructu-
ra que permita una gestin de contenidos gil
(usando algun gestor de contenidos CMF, por
ejemplo PostNuke [18] ) para que los usua-
rios/desarrolladores de applets puedan apor-
tar nuevos contenidos al portal.
7. Agradecimientos
Este trabajo ha sido parcialmente nanciado
con el Proyecto de Innovacin Docente Herra-
mientas para la Visualizacin de Estructuras
de Datos y Tcnicas Algortmicas, subvencio-
nado en la II Convocatoria de Proyectos de
Innovacin Docente y Formacin de Profeso-
rado de La Universidad de La Laguna en el
ao 2003, por el Vicerrectorado de Calidad y
Nuevos Estudios y por los proyectos FEDER y
MCyT TIC2002-04400-C03 y TIC2002-04498-
C05-05).
Referencias
a
[1] Jos M Luz Arcos. Estilos de Aprendi-
zaje. www.puntoclave21.com.
[2] Brian Borowski. Home page.
sciris.shu.edu/borowski/, 1999.
[3] Andrea Bulnov. Java applets in edu-
cation. The Mathematics Edu-
In
cation into the 21st Century project.
International Conference The Decida-
ble and the Undecidable in Mathe-
matics Education, Brno, Czech Repu-
blic, 2003. http://math.unipa.it/grim/-
21_project/21_brno03_Bulnova.pdf.
[4] Rosario Quecedo Lecanda Carlos Castao
Garrido. Diseos de Entornos de Apren-
dizaje con Ordenador: Programas Hiper-
media para el Autoaprendizaje. Didctica
416 Programacin, algoritmos y estructuras de datos

y Organizacin Escolar. Universidad del [14] Pankaj Kamthan. Java Applets in Edu-
Pas Vasco. www.cfp.upv.es. cation. Internet Related Technologies.
www.vpaa.uillinois.edu/tid/resources/mont-
[5] Jorge Capella Riera (coordinador). Esti-
gomery.html.
los de Aprendizaje en Estudiantes de la
Ponticia Universidad Catlica de Per. [15] Sun Microsystems. Java Technology. ja-
www.pucp.edu.pe. va.sun.com.

[6] Juan Silvio Cabrera Cruz. La Compren- [16] Susan Montgomery. Addres-
sin del Aprendizaje desde la Perspectiva sing Diverse Learning Style Th-
de los Estilos de Aprendizaje. Universi- rough the Use of Multimedia.
dad "Hermanos Saz". Pinar del Ro. Cu- www.vpaa.uillinois.edu/tid/resources/mont-
ba.www.monograas.com/trabajos14/compr- gomery.html, 1998.
aprendizaje/compr-aprendizaje.shtml.
[17] Samuel Rodrguez Ponce. El Efecto del
[7] Ministerio de Educacin Cultura y De-
Conocimiento de los Estilos de Aprendi-
porte. Apoyo al Proceso de Enseanza-
zaje y el Uso de algunas Tcnicas de Ava-
Aprendizaje. Orientacin Educativa.
luacin en el Saln de Clase en el Proceso
www.cnice.mecd.es.
de Aprendizaje y la Ejecucin de los Estu-
[8] Manuel Gmez del Valle y otros. Identi- diantes de Enfermera en el Curso de Qu-
cacin de los Estilos de Aprendizaje Pre- mica. Departamento de Qumica. Univer-
dominantes en Estudiantes de Magisterio sidad de Puerto Rico. www.upr.clu.edu.
de la Facultad de Ciencias de la Educa-
[18] PostNuke Project. Web Content Magna-
cin de la Universidad de Cdiz. Revista
gement Tool based on PHP and MySQL.
Electrnica Interuniversitaria de Forma-
www.postnuke.com.
cin del Profesorado.

[19] Chu Ryang Wie. The Semiconductor Ap-

[9] Milagros Marrero Daz. Estilos de Apren-
plet Service. jas.eng.bualo.edu, 2001.
dizaje y su Impacto en el Proceso de
EnseanzaAprendizaje en el curso teoc
[20] Alejandrino Gallego Rodrguez y Eva
2007 Aplicacin de Terapia Ocupacional
Martnez Caro. Estilos de Aprendizaje y
en Disfuncin. Departamento de Terapia
E-learning. Hacia un Mayor Rendimiento
Ocupacional. Universidad de Puerto Ri-
Acadmico. Departamento de Economa
co.www.upr.clu.edu.
de la Empresa. Universidad Politcnica de

[10] EDApplets. Herramientas para la Vi- Cartagena. www.upct.es.

sualizacin de Estructuras de Datos

y Tcnicas Algortmicas en la Web.
www.pcg.ull.es/edapplets, 2003.

[11] Richard M. Felder and Barbara A.

Soloman. Learning Styles and
Strategies. www.ncsu.edu/felder-
public/ILSdir/styles.htm.

[12] Walter Fendt. Java applets on physics.

http://www.walter-fendt.de/ph14s, 2004.

[13] Peter Golton. Using java applets to

produce interactive learning materials.
http://ferl.becta.org.uk/display.cfm?-
resID=2552&page=65&catID=504,
March 2002.