Laboratorio 5: Introducción a Django

Objetivos

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

Instalar el framework de web Django.
Conocer el proceso para crear proyectos y aplicaciones en Django.
Escribir vistas y plantillas sencillas en Django, así como configurar sus respectivos URLs.

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 laboratorio debe ser desarrollado de manera individual.

Instrucciones preliminares

Instala Django en tu sistema. Descarga el tarball de la distribución oficial Django-1.3.1.tar.gz y ejecuta los siguiente comandos desde la terminal:
```
tar xzvf Django-1.3.1.tar.gz

cd Django-1.3.1

sudo python setup.py install
```
Para verificar que Django haya sido correctamente instalado, corre el intérprete de Python y ejecuta las siguientes instrucciones:
```
>>> import django
>>> django.VERSION
(1, 3, 1, 'final', 0)
```
Si no se reporta ningún error quiere decir que la instalación fue exitosa.

Crea un nuevo proyecto web de Django llamado ejemplo. Desde la terminal teclea:

django-admin.py startproject ejemplo

Esto crea un nuevo folder llamado ejemplo.

cd ejemplo

Al listar el directorio encontrarás cuatro archivos:

File Name	Description
`__init__.py`	Indica que el folder actual es un paquete de Python.
`manage.py`	Script que permite interactuar con el proyecto de Django en diversas maneras.
`settings.py`	Archivo de configuración para este proyecto de Django.
`urls.py`	Mapeos de URLs para este proyecto de Django.

Corre el servidor de web de desarrollo para ver si funciona correctamente. Desde la terminal teclea:
```
python manage.py runserver
```
Ahora apunta tu navegador al siguiente URL: http://localhost:8000/. Debe aparecer una página de felicitación.

Deja corriendo este servidor de web en su propia ventana.
Abre otra terminal y cámbiate al directorio ejemplo. Crea ahí dos nuevos directorios llamados static y templates tecleando lo siguiente en la terminal:
```
mkdir static

mkdir templates
```

Indica a Django el sitio donde están localizados los directorios de contenido estático (el folder static) y de plantillas (el folder templates). Abre en un editor el archivo ejemplo/settings.py y añádele hasta arriba lo siguiente:

import os.path

En el mismo archivo localiza las variabes STATICFILES_DIRS y TEMPLATE_DIRS, y agrega las líneas resaltadas que se muestran a continuación:

# Additional locations of static files
STATICFILES_DIRS = (
    # Put strings here, like "/home/html/static" or "C:/www/django/static".
    # Always use forward slashes, even on Windows.
    # Don't forget to use absolute paths, not relative paths.
    os.path.join(os.path.dirname(__file__), 'static').replace('\\','/'),
)

TEMPLATE_DIRS = (
    # Put strings here, like "/home/html/django_templates" or "C:/www/django/templates".
    # Always use forward slashes, even on Windows.
    # Don't forget to use absolute paths, not relative paths.
    os.path.join(os.path.dirname(__file__), 'templates').replace('\\','/'),
)

La ventaja de usar el código anterior en lugar de poner el directorio explícito (por ejemplo '/home/usuario/ejemplo/templates') es que resulta más sencillo copiar y correr el proyecto en otro equipo, incluso usando otro sistema operativo.

Crea una hoja de estilos llamada estilos.css dentro del directorio static con el siguiente contenido:

body {
    color: #efd;
    background: #453;
    padding: 0 2em;
    margin: 0;
    font-family: sans-serif;
    font-size: 120%;
}

h1 {
    padding: 30px 30px;
    background: #675;
    color: #ffa;
    font-size: 150%;
}

h2 {
    color: #bf8;
    border-top: 1px dotted #fff;
    margin-top: 2em
}

p {
    margin: 1em 0
}

a:link {
    color: #fe5;
}

a:visited {
    color: #fe5;
}

a:hover {
    color: #fe5;
}

hr {
    margin: 20px 0px;
    color: #efd;
    background-color: #efd;
    height: 2px;
}

footer {
    font-size: 90%;
    color: #ffa;
    text-align: center;
}

Crea un archivo llamado base.html dentro del directorio templates. Cada documento HTML que se escriba en lo sucesivo extenderá de este archivo. Su contenido debe ser:

<!DOCTYPE html>

<html lang="es">
    
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="{{ STATIC_URL }}estilos.css"/>        
        <title>{% block titulo %}Sin título{% endblock %}</title>
    </head>
    
    <body>
        {% block principal %}Sin cuerpo{% endblock %}
        <hr/>    
        <footer>
            Desarrollo de aplicaciones distibuidas        
        </footer>
    </body>

</html>

Crea una nueva aplicación llamada saluda. En la terminal teclea:
```
python manage.py startapp saluda
```
Crea una función de vista que envíe información a una plantilla. Edita el archivo ejemplo/saluda/views.py para que tenga el siguiente contenido:
```
from django.shortcuts import render

def hola(request):
    return render(request, 'saluda.html', {'nombre': 'Juan Camaney'})
```

Crea la plantilla en el archivo saluda.html en el folder templates. Su contenido debe ser:

{% extends "base.html" %}

{% block titulo %}Hola{% endblock %}

{% block principal %}
    <h1>Hola {{ nombre }}!</h1>
    <p>
        ¡Sí! Esta es mi primera aplicación web en Django.
    </p>
{% endblock %}

Relaciona la función de vista con un patrón URL. Edita el archivo ejemplo/urls.py añadiendo la línea resaltada:

urlpatterns = patterns('',
    # Examples:
    # url(r'^$', 'ejemplo.views.home', name='home'),
    # url(r'^ejemplo/', include('ejemplo.foo.urls')),

    # Uncomment the admin/doc line below to enable admin documentation:
    # url(r'^admin/doc/', include('django.contrib.admindocs.urls')),

    # Uncomment the next line to enable the admin:
    # url(r'^admin/', include(admin.site.urls)),
    (r'^saluda/$', 'ejemplo.saluda.views.hola'),
)

En tu navegador, visita el siguiente URL: http://localhost:8000/saluda/

Problema

En el mismo proyecto ejemplo de Django, crea una nueva aplicación llamada fibonacci, la cual debe calcular y desplegar los primeros 100 números de la serie de Fibonacci al momento de solicitar al navegador el siguiente URL: http://localhost/fibonacci/. Los primeros dos números de la serie de Fibonacci son 0 y 1; los siguientes se calculan sumando los dos números anteriores. Todos los números resultantes se deben desplegar usando una lista ordenada (usando la etiqueta <ol> de HTML) con numeración romana (usando CSS). Por ejemplo:

0
1
1
2
3
5
8
...

Verifica que la página producida sea HTML5 válido utilizando el Servicio de Validación de W3C.

¿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 Reportes de laboratorio. 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 ejemplo.
Crea un archivo tarball con todo el contenido del directorio ejemplo. Nombra a este archivo ejemplo.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 ejemplo):
```
tar czf ejemplo.tgz ejemplo
```
Usando el Sistema de Entrega de Tareas Automatizado (SETA), entrega el archivo tarball.

Fecha límite: Martes, Febrero 21.

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