{"id":431,"date":"2018-08-10T11:25:42","date_gmt":"2018-08-10T11:25:42","guid":{"rendered":"https:\/\/ingenieriadesoftware.es\/?p=431"},"modified":"2020-11-16T05:36:25","modified_gmt":"2020-11-16T05:36:25","slug":"visualizacion-animada-estructuras-datos","status":"publish","type":"post","link":"https:\/\/ingenieriadesoftware.es\/visualizacion-animada-estructuras-datos\/","title":{"rendered":"Visualizaci\u00f3n animada de las estructuras de datos m\u00e1s conocidas"},"content":{"rendered":"

Conocer bien las estructuras de datos b\u00e1sicas (pilas, colas, listas, \u00e1rboles, grafos,…) es una de las habilidades fundamentales de todo programador, y una de las que m\u00e1s te va a ayudar a NO reinventar la rueda cada vez que tengas manipular los datos de tu programa.<\/p>\n

Ya lo dec\u00eda Niklaus Wirth<\/a> (uno de los pioneros de la ingenier\u00eda de software<\/a>):<\/p>\n

Algoritmos\u00a0+ Estructuras de datos\u00a0= Programas<\/em><\/p><\/blockquote>\n

Y es que si escoges bien tus estructuras de datos, el c\u00f3digo seguir\u00e1 s\u00f3lo. Eso s\u00ed, no basta con conocer la representaci\u00f3n de cada estructura de datos, hay que dominar tambi\u00e9n los algoritmos b\u00e1sicos para manipularlas correcta y eficientemente. Los principales son los algoritmos de ordenaci\u00f3n, recorrido y b\u00fasqueda pero luego cada estructura de datos tienes sus propios funciones espec\u00edficas (ejemplo, la coloraci\u00f3n de grafos<\/a>).<\/p>\nEscoge bien tus estructuras de dato y el c\u00f3digo seguir\u00e1 s\u00f3lo <\/a><\/span>Click To Tweet<\/a><\/span>\n

Para ayudaros en vuestro aprendizaje, os he seleccionado una serie de webs que os permiten ver las estructuras de datos en acci\u00f3n<\/strong>.\u00a0 Y es que yo pienso que no hay nada como ver y “tocar” algo para aprenderlo bien. Estas webs os permitir\u00e1n ver como los diferentes algoritmos se van ejecutando y modificando los datos de ejemplo. Como siempre si conoc\u00e9is otras p\u00e1ginas similares avisad y las voy a\u00f1adiendo.<\/p>\n

Visualizadores de algoritmos<\/h2>\n

Empecemos con los dos recursos m\u00e1s completos. Las dos webs que os presentamos a continuaci\u00f3n tienen un objetivo similar (y de hecho hasta se llaman de forma parecida): visualizar la ejecuci\u00f3n de algoritmos conocidos, entre ellos, obviamente la inmensa mayor\u00eda tienen que ver con la manipulaci\u00f3n de estructuras de datos.<\/p>\n

VisuAlgo.net<\/h3>\n

VisuAlgo.net<\/a>\u00a0incluye 24 m\u00f3dulos. Cada m\u00f3dulo se centra bien en un tipo de estructura de datos bien en una familia de algoritmos de manipulaci\u00f3n de datos. Est\u00e1 disponible en espa\u00f1ol.<\/p>\n

Cada m\u00f3dulo viene con una serie de lecciones donde primero se explican los conceptos te\u00f3ricos subyacentes para acabar con la presentaci\u00f3n del c\u00f3digo en s\u00ed y la animaci\u00f3n de su ejecuci\u00f3n sobre los datos de ejemplo.<\/p>\n

Por ejemplo, esta imagen muestra como se busca un elemento en un \u00e1rbol de b\u00fasqueda binario.<\/p>\n

\"Visualizaci\u00f3n<\/a><\/p>\n

Algorithm Visualizer<\/h3>\n

Algorithm Visualizer<\/a>\u00a0tiene una interfaz m\u00e1s “cruda” que el anterior pero es m\u00e1s potente. Incluye m\u00e1s algoritmos y m\u00e1s variados (hay tambi\u00e9n algoritmos de criptograf\u00eda).<\/p>\n

Si no os asusta el c\u00f3digo (\u00a1espero que no!) os gustar\u00e1. A un lado muestra la traza del algoritmo (es decir los valores actuales de la estructura de datos de ejemplo, los valores de las diferentes variables y del log) y al otro el c\u00f3digo que est\u00e1 ejecutando. Puedes ir l\u00ednea a l\u00ednea e incluso avanzar y retroceder en la ejecuci\u00f3n para entender a la perfecci\u00f3n qu\u00e9 hace cada parte del c\u00f3digo.<\/p>\n

\"Ejecuci\u00f3n<\/a><\/p>\n

 <\/p>\n

Aprendiendo teor\u00eda de grafos<\/h2>\n

Los grafos son la estructura de datos m\u00e1s compleja y como tal, hay recursos espec\u00edficos para visualizar algoritmos de grafos y “jugar” con ellos. Os destacamos algunos.<\/p>\n

Graph Playground<\/h3>\n

Como su nombre indica, Graph Playground<\/a>\u00a0permite crear grafos a medida y ejecutar sobre ellos un peque\u00f1o n\u00famero algoritmos de grafos “cl\u00e1sicos” como Dijkstra, el c\u00e1lculo de componentes conectados o la coloraci\u00f3n de grafos que ilustra la cabecera de este post.<\/p>\n

No est\u00e1 mal para empezar a jugar con grafos pero para cosas m\u00e1s serias mejor seguir con el siguiente recurso.<\/p>\n

Graph online<\/a> es parecido. Aparte de crear tus propios grafos tienen algunos ja predefinidos por si no quieres empezar de cero.<\/p>\n

D3 Graph Theory<\/h3>\n

D3 Graph Theory<\/a>\u00a0es un curso interactivo para aprender teor\u00eda de grafos. Aunque la parte textual (es decir las explicaciones de las diferentes propiedades y algoritmos de grafos) tienen un peso muy importante en el curso, el hecho de cada noci\u00f3n venga acompa\u00f1ada con su representaci\u00f3n visual interactiva (por ejemplo, puedes modificar la soluci\u00f3n por defecto a\u00f1adiendo nuevos v\u00e9rtices o arcos y ver como eso hace que la soluci\u00f3n cambie) hace que haya decidido incluirlo en este post.<\/p>\n

\"Aprendiendo<\/a><\/p>\n

 <\/p>\n

Animaciones comparando algoritmos de ordenaci\u00f3n<\/h2>\n

Estos dos v\u00eddeos ense\u00f1an y comparan 15 algoritmos de ordenaci\u00f3n (“sorting” en ingl\u00e9s) en poco m\u00e1s de 6 minutos. M\u00e1s que para entender los detalles de cada algoritmo, son \u00fatiles para hacerse una idea de como cada algoritmo va ordenando poco a poco el conjunto de datos.<\/p>\n