Estás en:   ArielOrtiz.com > Desarrollo de aplicaciones distribuidas > Laboratorio 5: Introducción a Django

Laboratorio 5: Introducción a Django

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

Instrucciones preliminares

  1. 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.

  2. 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.
  3. 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.

  4. 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
  5. 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.

  6. 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;
    }
  7. 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>
  8. Crea una nueva aplicación llamada saluda. En la terminal teclea:

    python manage.py startapp saluda
  9. 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'})
  10. 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 %}
  11. 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'),
    )
  12. 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:

  1. 0
  2. 1
  3. 1
  4. 2
  5. 3
  6. 5
  7. 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:

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.