Sistemas Tecnológicos y Procesos Técnicos (B): Bitácora

Bitácora - Clase 21 de Mayo de 2016

Aula: 603

Profesora: Laura Cortes

Hora de inicio: 1:00 pm

Hora de finalización: 6:00pm

Procedimientos:

1. La docente introduce la clase presentando unos videos sobre programas que se pueden crear con el programa processing y adicionalmente nos comparte la página web http://www.openprocessing.org/ en la cual se pueden ver diversos sketches realizados por otras personas y que son libres de derechos de autor.

2. Los compañeros expresan sus opiniones acerca de esta herramienta y la maestra nos invita a reflexionar sobre otros tipos de pulsadores que podríamos utilizar en nuestra infografía como los sensores de movimiento.

3. Para introducir Arduino, discutimos brevemente la historia de Hernando Barragán y su paso por la universidad italiana donde inventó el proyecto Wiring, como parte de su tesis de maestría. Este será el proyecto base sobre el que luego su tutor de tesis, Massimo Benzi, construiría Arduino, sin dar crédito a lo que su brillante alumno había construido. Reflexionamos alrededor del rol de un colombiano en la creación del microprocesador de hardware libre más famoso del mundo.

4. Descargamos las versiones no instalables de los programas processing y arduino y extraemos las carpetas para empezar el trabajo sobre nuestra infografía interactiva.

5. La maestra nos invita a hacer en notepad++ un paquete de datos en XML que se podría utilizar para cambiar la información de la infografía sin necesidad de crear de nuevo el código completo. Lo que hicimos fue esta estructura:

6. Después de crear este código general; cambiamos los datos para crear un código específico de nuestra infografía también en notepad++. En este código usamos el nombre de la categoría general, una imagen general, las subcategorías, la explicación de las subcategorías y una imagen relacionada a cada una.

7. Adicionalmente, debemos crear una carpeta llamada data con este archivo XML de notepad++ y las imágenes que utilizaremos en esta infografía interactiva.

8. Luego de esto se crearon las rutas en el software Processing 3.1.1 para conectarlo con el archivo XML anteriormente creado en Notepad++.

9. Se crearon las instrucciones en Processing para crear el archivo con extensión .pde, como se muestra a continuación:

10. Este código indica a Processing crear la clase info y las categorías Tipo, Nombre, Imagen y Descripción, configura el tamaño de la ventana de 1024 x 780 pixeles, establece la conexión con el archivo configinfografia.xml, anteriormente hecho en NotePad++, la instrucción get.Children indicó obtener la información de las categorias.

11. Se indica la configuración de la ventana, se modifica el tamaño y tipo de letra, el fondo, tamaño del título. Se indica abrir cada imagen, luego de este se programa un comando para que cada imagen se abra al oprimir una letra en el teclado. Este código es el siguiente: