5/24/2018 2014 1T Proyecto Parcial

1/3

ESCUELA SUPERIOR POLITCNICA DEL LITORALFACULTAD DE INGENIERIA EN ELECTRICIDAD Y COMPUTACION

Desarrollo de Aplicaciones Web

2014

1TProyecto Parcial - Ing. Jorge Rodrguez E.

Fecha de Entrega: 14 Julio del 2014 07:30 AM

ObjetivoElaborar un sitio web que ser una red social aplicando tecnologas modernas en el

desarrollo del diseo de sitios Web. Utilizar las siguientes tecnologas:

HTML5

CSS

JavaScript

Programacin dinmica de cliente con AJAX y DOM

Descripcin

Carona Solidaria es una red social que busca ayudar en la reduccin del trnsito de vehculos

a ESPOL y mejorar la calidad del aire de la ciudad.

La red muestra noticias en tiempo real acerca del trnsito y medio ambiente, adems de

permitir a los usuarios registrados (miembros de ESPOL) ofrecer y pedir un aventn.

Los usuarios pueden visualizar las rutas de aventn ofrecidas a travs de la integracin de la

red social con Google Maps

(https://developers.google.com/maps/documentation/javascript/examples/layer-traffic ).

Otra funcionalidad disponible es la posibilidad de acceder al servicio a travs de cualquier

dispositivo mvil, para agilizar el proceso de negociacin entre quien ofrece el servicio y

quien lo solicita.

Solamente los usuarios de ESPOL pueden registrarse en la red social para as aumentar la

seguridad de los participantes. Lo ideal es que todos los participantes sean propietarios de

un automvil y alternen su uso permitiendo economizar, contribuir a la reduccin del

congestionamiento, ayudar al problema de movilizacin de personas ESPOL disminuir lacontaminacin del aire y a la emisin de gases de efecto invernadero.

Para registrarse, un usuario deber llenar un formulario en el cual indique su nombre de

usuario de ESPOL, el mismo que deber ser validado contra un servicio web que recupera la

informacin bsica del usuario: nombre, apellido, direccin, sexo, email, telfono. El usuario

llenar informacin complementaria como nmero celular, Cuenta de Twitter y Cuenta de

Facebook. Si el usuario tiene vehculo lo deber indicar en este formulario y deber ingresar

el nmero de placa y una descripcin del mismo.

Los usuarios de la red que deseen ofrecer el servicio pueden ingresar la ruta a travs de

Google Maps e indicar el horario de inicio de la ruta (da y hora). Otros usuarios podrnrevisar la informacin del usuario que ofrece el servicio y como parte de ella visualizarn

https://developers.google.com/maps/documentation/javascript/examples/layer-traffichttps://developers.google.com/maps/documentation/javascript/examples/layer-traffichttps://developers.google.com/maps/documentation/javascript/examples/layer-traffichttps://developers.google.com/maps/documentation/javascript/examples/layer-traffic

5/24/2018 2014 1T Proyecto Parcial

2/3

informacin que se encuentra en la Agencia Nacional de Trnsito,

http://www.ant.gob.ec/webservice/ConsultaMultas/clienteMultas.php, para tener

en consideracin el puntaje del usuario y las multas que tengas, esto para precautelar su

seguridad.

Los usuarios que deseen solicitar el servicio pueden poner anuncio en la red para lo cualdebern establecer la zona en la cual se encuentran y marcarla en un mapa de tal forma que

las personas que ofrecen el servicio puedan visualizar y la informacin del solicitante y

quede a su criterio si desea llevarla.

Un usuario puede ofrecer y solicitar el servicio. Si el usuario en su formulario de registro

indica que posee un automvil tendr disponibles ambas opciones. Si el usuario no lo ha

indicado entonces solamente podr solicitar.

El solicitante del servicio debe pagar por el mismo una cifra que es fijada por el oferente del

servicio, para lo cual se utilizar un servicio web del banco central para el intercambio de

dinero electrnico de tal forma que no existan problemas de cambio de dinero.

Un usuario puede seguir otros usuarios y ser seguido por otros. La informacin se debe de

actualizar constantemente.

RequerimientosEl sitio web debe tener una buena apariencia visual y se debern tener en cuenta los

siguientes elementos como parte de su diseo web:

- Men- Galeras de imgenes- Paneles con fondo y transparencia implementos con la funcin rgba o hsla del

estndar CSS3.

- Implementar efectos con CSS3o Fondos, transparencias, sombras en textos, sombras en paneles, efectos de

mouse, estilo a controles de formulario.

- Una hoja de estilo utilizando Responsive Web Desing para que pueda ser vista en unnavegador de PC y en un dispositivo mvil que usted elija.

- Incorporar tipos de letras que no se encuentren en el sistema operativo- Ingreso de comentarios.- Clasificacin de usuarios (1 a 5 estrellas para medir la calidad del servicio).- La pgina principal del sitio Web deber llamarse index.html.- Un formulario para registro del cliente que implemente validaciones con JavaScript y

utilice controles de formulario HTML 5.

- Incorporar funcionalidad AJAX para consultas a documentos XML o JSON en loscuales se encuentra la informacin de los diferentes elementos mostrados.

- A partir de este archivo se cargaran en una tabla hiperenlaces e imgenes. Ademsde otras actualizaciones. La originalidad en este requerimiento ser calificada.

- El sitio web ser revisado con Google Chrome en PC y en el navegador que ustedelija para el dispositivo mvil que selecciono.

NOTA:Utilice paletas de colores para combinar colores correctamente en su diseo.

http://www.ant.gob.ec/webservice/ConsultaMultas/clienteMultas.phphttp://www.ant.gob.ec/webservice/ConsultaMultas/clienteMultas.phphttp://www.ant.gob.ec/webservice/ConsultaMultas/clienteMultas.php

5/24/2018 2014 1T Proyecto Parcial

3/3

ENTREGABLES

Tarea 1 (17-Junio-2013 07:30 AM)Layout que utilizara para las diferentes pginas de su sitio web (imagen). Cul es la plantilla

o cdigo html base que utilizara y la hoja de estilos para organizar el diseo.

Tarea 2 (24-Jun-2013 07:30 AM)Presentacin de la plantilla CSS de su sitio, es decir su sitio con las diferentes paginas

creadas y que utilicen el estilo creado.

Tarea 3 (07-Jul-2013 07:30 AM)Presentacin de avance.

Proyecto parcial (14-Jul-2013 07:30 AM)1. Un documento con la siguiente informacin:

a. Notas sobre el proceso de diseo de su sitio web (pantallas de proceso dediseo del layout para cada estilo)

b. Pantallas del resultado del validador HTML 5 despus de chequear la pginai. Si obtiene errores en sus pginas incluya pantallas de esos errores.

c. Referencias de sitios web utilizados, indicando en que objeto de diseo desu sitio web fue utilizado.

d. Efecto CSS que haya implementado.2. El sitio Web con la siguiente estructura de carpetas:

a. Carpeta imagenes para guardar imgenesb. Carpeta css para guardar archivos de hojas de estilo.c. Carpeta js para guardar archivos con cdigo javascriptd. Carpeta xml o json para guardar archivo xml o json dependiendo del

caso

NOTA:- Proyecto cuyas pginas no sigan la misma combinacin de colores ni estilos CSS

tendrn nota de CERO.- Proyecto que se entreguen sin el documento solicitado en el punto 1 sern

penalizados con el 50% de la nota.

Ejemplo de sitios creados con HTML5

o http://www.twimbow.com/o http://www.eastley.net/o http://www.gabereiser.com/flickr/index.html

http://www.twimbow.com/http://www.twimbow.com/http://www.eastley.net/http://www.eastley.net/http://www.gabereiser.com/flickr/index.htmlhttp://www.gabereiser.com/flickr/index.htmlhttp://www.gabereiser.com/flickr/index.htmlhttp://www.eastley.net/http://www.twimbow.com/