Práctica 5: Utilizando Express

Objetivos

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

Desarrollar una aplicación web sencilla utilizando el framework Express para Node.js.

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.

Tus archivos fuente de JavaScript deben comenzar con un comentario que contenga el título de la práctica, la fecha y los datos personales de los autores (nombre y matrícula). Por ejemplo:

/*----------------------------------------------------------
 * Práctica 5: Utilizando Express
 * Fecha: 30-Sep-2015
 * Autores:
 *           A01166611 Pepper Pots
 *           A01160611 Anthony Stark
 *----------------------------------------------------------*/

Instala los módulos express y express-generator de Node. Desde la terminal teclea:
```
cd
```
```
sudo npm install -g express
```
```
sudo npm install -g express-generator
```
Crea una nueva aplicación web de Express llamada practica5. Teclea en la terminal:
```
express -e practica5
```
```
cd practica5
```
```
sudo npm install
```
Corre el servidor de la aplicación web y verifica que se pueda utilizar correctamente. En la terminal teclea:
```
npm start
```
Visita la siguiente liga en tu navegador:

http://localhost:3000/

La salida en el navegador debe ser algo así:

Express

Welcome to Express

Abre en un editor el archivo practica5/routes/index.js y agrega al final de éste el siguiente código:

router.get('/hola/:nombre?', function (req, res) {
    var nombre = req.params.nombre || 'Mundo';
    res.render('hola.ejs', { 'nombre': nombre });
});

Crea los siguientes dos archivos, colocándolos en el directorio indicado dentro del comentario correspondiente:

<!DOCTYPE html>
<!-- Archivo: practica5/views/hola.ejs -->

<html lang="es">
    <head>
        <meta charset="utf-8" />
        <title>Hola</title>
        <link rel="stylesheet" href="/stylesheets/estilos.css"/>
    </head>

    <body>
        <h1>Hola</h1>
        <p>
            ¡Hola <%= nombre %>!
        </p>
        <hr/>
        <footer>
            Desarrollo de aplicaciones web
        </footer>
    </body>
</html>

/* Archivo: practica5/public/stylesheets/estilos.css */

body {
    background: #FFFFFF;
    color: #000080;
    font-family: sans-serif;
    font-size: medium;
    margin: 20px;
}

hr {
    border: 0;
    color: #B0C4DE;
    background-color: #B0C4DE;
    height: 1px;
}

table {
    border-collapse: collapse;
    border: 1px solid #000000;
    padding: 0px;
    margin-bottom: 10px;
    color: #000000;
    background: #E6E6FA;
}

td {
    border: 1px solid #000000;
    padding: 10px;
    text-align: center;
}

th {
    border: 1px solid #000000;
    padding: 10px;
    color: #008080;
    background: #B0E0E6;
}

li {
    color: #AAAAAA;
}

span {
    color: #094141;
}

footer {
    font-size: 70%;
    color: #B0C4DE;
    text-align: center;
}

Desde la terminal detén el servidor de la aplicación web y córrelo nuevamente:
```
npm start
```
Visita las siguientes ligas en tu navegador para verificar que funcione correctamente:
- http://localhost:3000/hola
- http://localhost:3000/hola/Todos
Extiende esta misma aplicación web de Express para poder generar los n primeros elementos de la secuencia look-and-say de John Conway. Cuando el usuario provea un URL como este (en este caso n=15):

http://localhost:3000/conway/15

la página web devuelta debe contener la siguiente información:
Verifica que la página resultante 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 prácticas. El nombre del archivo fuente de AsciiDoc debe ser reporte_practica5_A0MMMMMMM.txt, en donde A0MMMMMMM corresponde a tu matrícula. A partir del código fuente de AsciiDoc debes generar el archivo de HTML5 correspondiente. Dicho archivo se debe llamar reporte_practica5_A0MMMMMMM.html. Coloca estos archivos junto cualquier otro archivo adicional que se requiera para generar el reporte dentro del directorio practica5.
Crea un archivo tarball con todo el contenido del directorio practica5. Nombra a este archivo practica5.tgz. Este archivo se puede crear desde la terminal tecleando lo siguiente (asegúrate que te encuentres en el mismo nivel que el directorio practica5):
```
tar czf practica5.tgz practica5
```

✔ Instrucciones para subir archivo

Para entregar el archivo practica5.tgz, ingresa los siguientes datos:

Solicitar NIP

Fecha límite: Martes, 6 de octubre.

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.