Estás en:   ArielOrtiz.com > Desarrollo de aplicaciones distribuidas > Laboratorio 5: Imágenes dinámicas

Laboratorio 5: Imágenes dinámicas

Objetivos

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

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:

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:

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.
© 1996-2011 por Ariel Ortiz Ramírez (ariel.ortiz@itesm.mx)
Desarrollado en Django | Licencia de Creative Commons | HTML5 válido | CSS válido