Laboratorio 5: Imágenes dinámicas

Objetivos

Durante esta práctica, los alumnos serán capaces de:

Escribir un script CGI en Python que genere contenido distinto a HTML (por ejemplo imágenes, documentos PDF, etc.).

Esta actividad promueve las siguientes habilidades, valores y actitudes: análisis y síntesis, capacidad de resolver problemas, creatividad, y uso eficiente de la informática y las telecomunicaciones.

Descripción de la actividad

NOTA IMPORTANTE: Las actividades de la práctica se pueden elaborar de manera individual o en parejas. El reporte de la práctica de laboratotio debe ser desarrollado de manera individual.

Instrucciones preliminares

Antes de comenzar esta práctica, renombra tu directorio www utilizado en prácticas pasadas y en clase. Desde la línea de comando teclea:

mv www www.backup3

Vuelve a crear otra vez el directorio www, y sus subdirectorios static y cgi-bin.

mkdir www

cd www

mkdir static

mkdir cgi-bin

Con esto estarás iniciando esta práctica con un sitio Web vacío, pero sin necesidad de modificar los archivos de configuración de Apache.

Introducción

Hasta este momento, todos los contenidos dinámicos que se han producido han sido páginas web (documentos HTML). Sin embargo, es posible también producir otros tipos de contenidos, por ejemplo: imágenes, información tabular en formato CSV, documentos PDF, etc. El siguiente script CGI escrito en Python demuestra como se puede generar dinámicamente una imagen PNG utilizando la Python Imaging Library (PIL) que viene preinstalada con Python en la distribución de Ubuntu:

#!/usr/bin/env python
# coding: utf-8

#====================================================================
# Script CGI escrito en Python que genera una imagen de manera 
# dinámica utilizando PIL.
#====================================================================

import sys, Image, ImageDraw, ImageFont

# Crea una imagen en blanco en memoria.
ancho, alto = 200, 100
im = Image.new('RGB', (ancho, alto), "white")

# Crea un objeto de dibujo a partir de la imagen en memoria.
dibujo = ImageDraw.Draw(im)

# Dibuja un margen en la orilla de color negro.
dibujo.rectangle((0, 0, ancho - 1, alto - 1), outline="black")

# Dibuja dos diagonales, una verde y la otra azul.
dibujo.line((0, 0, ancho - 1, alto - 1), fill="green")
dibujo.line((0, alto - 1, ancho - 1, 0), fill="blue")

# Escribe un texto de color rojo.
f = ImageFont.load("6x13.pil")
dibujo.text((10, 40), "Hello World!", fill="red", font=f)

# Imprime encabezados de la respuesta. 
# Aquí es donde se indica que la respuesta es una imagen PNG.
# No requiere charset dado que el contenido es binario y no texto.
print "Content-type: image/png"

# MUY IMPORTANTE: Imprime una línea en blanco para delimitar
# los encabezados del cuerpo de la respuesta.
print 

# Guarda la imagen en la salida estándar.
im.save(sys.stdout, "PNG")

NOTA: Para poder correr el CGI es necesario descargar los archivos 6x13.pil y 6x13.pbm en el directorio www/cgi-bin.

Una vez que se ejecuta el CGI, la salida esperada es la siguiente imagen PNG:

Problema

Escribe dos scripts CGI en Python, llamados barras.py y pastel.py. Ambos deben acceder a la tabla de superheroes que se creó en el laboratorio 3 (Introducción a MySQL) para determinar cuantos superhéroes hay de cada sexo. Posteriormente deben generar una imagen PNG tal como se describe a continuación:

barras.py: Gráfica de barras que muestra la cantidad de superhéroes por sexo. Por ejemplo:
pastel.py: Gráfica de pastel que muestra el porcentaje de cada sexo de los superhéroes. Por ejemplo:

Consulta la documentación de The ImageDraw Module de la PIL para averiguar la manera de hacer estos dibujos.

¿Qué se debe entregar?

Para entregar tu trabajo individual, sigue las siguientes instrucciones:

Escribe el reporte de la práctica tal como se detalla en el documento Lab Reports. El nombre del archivo fuente de AsciiDoc debe ser reporte_lab5_A0MMMMMMM.txt, en donde A0MMMMMMM corresponde a tu matrícula. A partir del código fuente de AsciiDoc debes generar el archivo HTML correspondiente. Dicho archivo se debe llamar reporte_lab5_A0MMMMMMM.html. Coloca ambos archivos dentro del directorio www.
Crea un archivo tarball con todo el contenido del directorio www. Nombra a este archivo imagenes.tgz. Este archivo se puede crear desde la línea de comando tecleando lo siguiente (asegúrate que te encuentres en el mismo nivel que el directorio www):
```
tar czf imagenes.tgz www
```
Usando el Sistema de Entrega de Tareas Automatizado (SETA), entrega el archivo tarball.

Fecha límite: Martes, Septiembre 27.

Evaluación

Esta actividad será evaluada usando los siguientes criterios:

50%	Implementación de los requerimientos.
50%	Reporte de la práctica de laboratorio.
DA	El programa y/o reporte es un plagio.

Desarrollo de aplicaciones distribuidas