DESARROLLO

WEB
GP2 Servicos Telemáticos

El objetivo de las sesiones 2, 3 y 4 como del trabajo personal de estas semanas es

practicar determinados elementos de HTML5 y CSS3: elementos básicos de HTML,
enlaces, imágenes, listas, tablas, formularios, formateo de texto, Trabajar con capas
(Layout), aplicar hojas de estilo, autenticación, datos locales y eventos.
Esta actividad abarca tanto el trabajo en grupo pequeño como el trabajo personal de
las semanas 2, 3 y 4.
 Desarrollo WEB

ÁREA DE INGENIERÍA TELEMÁTICA

Desarrollo WEB
SERVICOS TELEMÁTICOS

Herramientas

Escenario de desarrollo.
Para prácticar el desarrollo web vamos a trabajar con el siguiente escenario que estará disponible en el
laboratorio con acceso desde Linux, y es fácilmente replicable para poder continuar trabajando con el trabajo
personal desde casa.
1. Editor de Texto/HTML.
2. Navegador web para ver los resultados de los desarrollos.
3. Servidor web montado sobre una máquina virtual.
4. Servidor ftp montado sobre la máquina virtual del servidor Web

A continuación, se dan instrucciones más detalladas sobre la configuración de cada uno de los componentes
del entorno. Los apartados 3 y 4, correspondientes al servidor corresponden a la actividad del apartado 7, que
es opcional.

1. Editor HTML.
Para editar el código HTML se recomienda el uso de un editor de texto plano, como puede ser SublimeText,
Atom, Notepad++ o el propio Notepad que incorpora Windows. Los anteriores son algunos ejemplos, pero
existen otros muchos editores gratuitos o de pago que se pueden utilizar para la edición de HTML.

Normalmente en cualquiera de los editores, dejando a un lado el caso de Notepad, son herramientas gratuitas
y tiene algunos/muchos pluggings para extender sus funcionalidades (pudiendo ser algunas de ellos de pago).
En estos editores si no lo incorporan por defecto, se puede añadir un plugging para poder subir código a
servidores mediante el protocolo SFTP. Existen otros pluggings para la customización de los editores al gusto
y necesidad de cada momento.

2. Navegador Web.
Para ver los resultados del desarrollo utilizaremos un browser (navegador web), se recomienda usar varios
como Chrome y Firefox en paralelo, para analizar los efectos de nuestro desarrollo en diferentes navegadores.
NOTA: Para realizar los apartados 1 a 6 de la práctica es suficiente con tener montado el entorno de desarrollo (editor y
navegador). En el apartado 7 se pedirá que, de forma obligatoria, se configure la parte del servidor y pruebe en ella la
aplicación. Esta parte la puede hacer ahora o en futuras prácticas en las que tendrá que utilizarla.

Página 1
 Desarrollo WEB

3. Servidor web.
Para poner en marcha el servidor web se necesita un sistema operativo con un servidor Apache. Usaremos
como base una máquina virtual Debian o Ubuntu Server sin entorno gráfico.

Si la primera vez que accede se tuviera un entorno de teclado no español, se puede configurar el teclado
español mediante el comando:

$sudo dpkg-reconfigure keyboard-configuration

Si no está instalado, podemos instalar apache de la siguiente forma: (Nota, para instalar paquetes se puede
usar aptitude en vez de apt-get)

$sudo apt-get update

$sudo apt-get install apache2

Una vez instalado se recomienda crear un host virtual para poder tener diferentes servidores en paralelo, para
ello vamos al directorio de contenidos y creamos un nuevo directorio en donde estarán ubicados los contenidos
de nuestro servidor virtual.

$ sudo mkdir /var/www/iroom

$ sudo mkdir /var/www/iroom/css
$ sudo mkdir /var/www/iroom/images

Este directorio albergará los contenidos de nuestro servidor web (html, css, js, jpeg…).

En el directorio de host disponible (/etc/apache2/sites-available) creamos un fichero de configuración de nuestro

virtual host (usaremos el editor nano, aunque puede usar otros como gedit o vi).

$sudo nano /etc/apache2/sites-available/[Link]

Esta es la configuracion mínima que debe tener:

<VirtualHost *:80>
ServerName [Link]
DocumentRoot /var/www/iroom
ServerAdmin webmaster@localhost
DirectoryIndex [Link]
</VirtualHost>

Habilitamos el servidor virtual.

$sudo a2ensite [Link]

Podemos verificar que la configuración iroom está en el directorio /etc/apache2/sites-enabled

$ls /etc/apache2/sites-enabled

Finalmente reiniciamos apache.

Página 2
 Desarrollo WEB

$sudo service apache2 reload

Dado que nuestro servidor no va a estar en los DNS, en el fichero de nuestro ordenador personal (no en la
máquina virtual) /etc/host podemos añadir una línea con la dirección IP del servidor y su nombre, para que sea
más cómodo el acceso. Si por ejemplo la dirección IP del servidor es 192.168.42.1321 podemos añadir la
siguiente línea a /etc/host.

[Link] [Link]

El siguiente paso es añadir un usuario para administrar el web, Su nombre puede ser por ejemplo admiroom.
El objetivo es limitar las operaciones que el usuario pueda hacer en el servidor, reduciéndolas exclusivamente
al control sobre la información que hay en su espacio web /www/var/iroom. No queremos que este usuario
pueda acceder mediante una consola (telnet, ssh…) al servidor.

$sudo useradd --shell /usr/sbin/nologin admiroom

Añadimos al usuario creado el directorio de acceso donde se encuentra el contenido web (/var/www/iroom) y
lo agregamos al grupo de usuarios que pueden acceder a los datos web www-data:

$sudo usermod -d /var/www/iroom admiroom

$sudo usermod -a -G www-data admiroom

Añadimos a /etc/shells la línea /usr/sbin/nologin. Esta es la shell fantasma que usaría el usuario si intentase
acceder al sistema mediante una consola.

$sudo nano /etc/shells

Cambiamos el grupo del directorio en el que se encuentran el contenido y el propietario:

$sudo chgrp www-data /var/www/iroom –R

$sudo chown admiroom /var/www/iroom -R

En la configuración del servidor puede utilizar técnicas de hardering que permiten mejorar la seguridad del
mismo. En el siguiente enlace podrá encontrar más información sobre los aspectos de seguridad en la
configuración de Apache:

[Link]

4. Servidor FTP.
Si no existe la posibilidad de realizar la transferencia de ficheros mediante ssh (sftp), deberemos instalar un
servidor ftp en la máquina virtual:

$sudo apt-get install vsftpd

Configuramos el servidor:

1Esta IP variará en función de cada máquina, por lo que cada alumno debe conocer la IP asignada, para ello puede hacerlo mediante
el comando “ip address show”

Página 3
 Desarrollo WEB

$sudo nano /etc/[Link]

Modificamos los parámetros siguientes para que tengan el valor indicado y estén sin comentar (sin # al
principio de línea).

listen = YES

anonymous_enable = NO
local_enable=YES
write_enable=YES
chroot_local_user=YES
local_umask=022
chroot_local_user = YES
chroot_list_enable = YES
chroot_list_file = /etc/vsftpd.chroot_list

Creamos el fichero con lista de usuarios permitidos a hacer chroot.

$sudo nano /etc/vsftpd.chroot_list

y le añadimos el nombre de usuario admiroom, que es el usuario que hemos configurado como administrador
del host virtual iroom.

Reiniciamos el servidor.

$sudo service vsftpd restart

Comenzamos con el desarrollo de la práctica que tiene 7 apartados, el 6 y 7 opcionales.

Apartado 1. Layouts, tablas, listas, enlaces, formato básico.

Cree la página principal [Link] con informacion de una habitación con sensores a la que denominaremos
smartroom, con la siguiente estructura.

Debe introducir 7 capas de layout, y cambiar su aspecto para que cada zona tenga unos colores propios de
fondo. Utilizar atributos como tamaño y color del font para distinguir los diferentes tipos de texto (ver figura).
Las capas que debe tener son:

• Contenedor de las otras capas (contenedor)

• Título en la parte superior (titulo), por ejemplo “Smart Room Proyect”
• Menu con enlace a la página de configuracion (menu)
• Información para visualizar información extra dinámica como alertas o mensaje de saludo
(informacion).
• Datos de la habitación debajo de título en la mitad izquierda. Debe incluir un enlace a la localizacion
con google maps, que se viusalice en otra página. Los datos de la habitación deben estar contenidos
en una lista. Añadir al final de esta capa una imagen de la habitación.

Página 4
 Desarrollo WEB

• Datos de los sensores debajo de título en la mitad derecha. Los datos deben estar en una tabla
(sensores).
• Un pie con el nombre Universidad de Alcalá (pie).

En la siguiente imagen se muestra un ejemplo del aspecto que puede tener. Los colores y texto puede y
deberían ser distintos a los de la imagen.

Imagen 1. Ejemplo de página de inicio

Apartado 2. Formularios.
Cree una nueva página de configuración ([Link]) de la habitación, enlazada desde la página principal
([Link]), que le permita a través de un formulario seleccionar los datos de la estación (ver figura).

Debe tener una estructura en capas como en la página principal, pero en este caso los datos de configuración
están en una única capa con 2 columnas y un único formulario con todos los datos que se detallan a
continuación.

En la parte de la izquierda debe poder introducir los datos: País, ciudad y localización, Enlace al mapa de
Google (tipo url), foto de la estación (posibilidad de subir un fichero de foto) y password.
Para el campo Country crear una lista (datalist) con nombre de países, de forma que permita la selección de
estos países sin necesidad de escribirlos completamente.
En la parte derecha visualizar mediante selección la posibilidad de elegir los sensores que soporta la habitación
y que queremos que se visualicen.

A continuación de los selectores de los sensores, añadir tres campos nuevos al formulario, dos de tipo input
que permitan definir la temperatura máxima y mínima de alerta; y uno de salida (output) para mostrar la
diferencia entre ambas. Estos campos no se visualizarán en la página principal. Ponga un límite de los valores
máximo y mínimo que soporta cada una de estas dos entradas por ejemplo (-20..45).

Página 5
 Desarrollo WEB

Añada un elemento (botón) submit para enviar los datos, que llame a un script [Link], el cual procesará los
datos para actualizar la página si la password es la correcta. No se pide el desarrollo del script.

En la parte inferior debe tener un enlace para volver a la página principal.

En la siguiente figura se muestra un ejemplo.

Imagen 2. Página de configuración

Apartado 3. Datos locales (Local Storage) (GPS3).

La página [Link] solicita un nombre mediante un formulario y lo almacena en la variable local fname.
De esta forma el nombre se queda almacenado para futuros acceso.

Desde el menú de la página principal vamos a usar esta facilidad haciendo dos cosas:

1. Creamos un enlace la página [Link] (Nombre en la figura), para poder acceder a modificar el
nombre.
2. En el campo reservado para poner información (a la derecha del menú) visualice el siguiente mensaje:
Hola “valor de fname”: Bienvenido a smartroom.

Apartado 4. No cacheable.
Usando manifest, configure el servidor para que las páginas no sean cacheables.

Apartado 5. Estilos.
Aplicar una hoja de estilo externa guardada en /css/[Link] para homogeneizar el aspecto de las páginas.
Utilice las opciones e CSS3 que vea necesarias para mejorar el aspecto de la página. Aplique estilos para cada
uno de los elementos identificados y limpie el código de etiquetas <style>.

Página 6
 Desarrollo WEB

Apartado 6. Eventos. Opcional.

Indique cómo podría hacer para que los datos de los sensores se actualicen cuando el servidor tenga datos
nuevos, utilizando SSE. No es necesario desarrollar el script del cliente ni servidor, sólo indicar el procedimiento
con el script genérico de SSE.

Apartado 7. Configurar e l servidor.

Montar el escenario del servidor instalando Apache y configurando un servidor virtual:

• Configurar un virtualhost para ubicar en este la aplicación.

• Instalar y configurar el servidor ftp para poder subir el contenido desarrollado.

Compruebe que puede actualizar una página básica html, y que puede acceder a esta información desde un
navegador. Suba la aplicación html desarrollada y pruebela desde los principales navegadores.
De forma opcional aplique técnicas de hardering para mejorar la seguridad del servidor y documentelas en la
memoria.

Apartado 8. Nuevos elementos de HTML y CSS no incluidos en apartados

anteriores. Opcional.
En este apartado estaría cualquier añadido que se quiera dentro de la práctica que no hubiera sido pedido en
los apartados anteriores.

Evaluación y Plazos de Entrega

Debe entregar una carpeta comprimida con la estructura completa del web que incluya los apartados 1, 2, 3, 4,
5, 6 (opcional) y 7 (opcional). En la raíz de la carpeta debe incluir un documento en pdf con el texto que explique
el apartado 4. Los resultados de la práctica deben ser entregados en la tarea habilitada para este fin antes del
inicio de la sesión 5 de grupo pequeño (GP5). Si ha realizado el apartado 7, debe enseñar al profesor la
aplicación corriendo desde el entorno virtual.

Página 7