Vistas a la página totales

martes, 20 de octubre de 2015

ETAPA DE SALIDA DEL CLIENTE

5. Etapa de Salida del Cliente


Los datos de salida para el cliente se los presentara en una página web, la cual esta echa por código HTML. En ella se muestra los puestos disponibles u ocupados dependiendo del estado de los sensores. Todo lo referente a la página web se la ha creado con imágenes de autoría propia para evitar posibles problemas posteriormente. 

Teniendo en cuenta que para que esta página se la pueda visualizar tal como se la diseño es necesario que el Arduino Mega con su Shield Ethernet tengan acceso a internet, caso contrario si no lo tuviera todas las imágenes configuradas en el código HTML no se mostraran. En la figura 1 se muestra la imagen que nos servirá de fondo de la página web, mostrando los datos de los autores y  datos que servirán al cliente sobre el  estacionamiento por ejemplo la hora de atención, su costo por hora y su ubicación.

Fig. 1 Imagen de fondo de la página web

Las pruebas para la creación de la página se las realizo en el software blog de notas el cual permite guardar en diferentes formatos los datos ingresados.

Todo este proceso se lo realizo de este modo; Primero se consultó todo lo referente al código HTML,  se procedió a ingresar el código en el blog de notas para finalmente guardarlo con la extensión .html.

Fig. 2 Código HTML para prueba de la página web

Esta extensión nos permite visualizar como se presenta la página ya en un navegador. Como primeras pruebas en la figura 3 (página prueba) tenemos una página web básica mostrando solo los datos principales para comprobar el estado de los sensores.


Fig. 3 Página básica para pruebas


Haciendo diferentes pruebas de la página web se puede señalar que el navegador óptimo para una visualización mejor es el Mozilla Firefox ya que en el servidor montado en el Arduino Mega se refresca cada 10 segundos y en dicho navegador las imágenes de la página no desaparecen al cargarla de nuevo. 

Finalmente en la figura 4 (página web completa) muestra terminada la página web con los sensores activos para mostrar el estado de los lugares del estacionamiento. 

Fig. 4 Diseño final de la página para el cliente