3. Diagrama Navegacional de la web.

7.1 Introduccin
El desarrollo de NB se debe al proyecto final de la asignatura Diseo de Sistemas de informacin WEB de 4 de Ingeniera de Telecomunicacin en la UMH de Elche. El diseo de la web parte de una platilla gratuita de XHTML y CSS descargada de Templatemo (http://www.templatemo.com/). Aqu se deja el link de la plantilla de la que se ha partido para el diseo: http://www.templatemo.com/preview/templatemo_237_extreme

7.2 Inicio
La pantalla de inicio muestra un pequeo slider publicitario4 en el que se invita a los usuarios a participar en la web. Tambin podemos ver una serie de comentarios del grupo directivo de la empresa1, la ventana de login2 y los menus3. Tambin hay un men inferior5 que como el men, se repite en todas las pginas. La funcin de estos mens es permitir la navegacin entre las distintas pginas. Adems, en el men 3 inferior tenemos una bibliografa y un 6 anuncio. Tambin 4 tenemos arriba a la izquierda un pequeo texto que nos indica donde estamos (Navegacin por 2 6 migas) y que tambin 1 estar presente a lo largo de toda la web sirvindonos para ubicarnos en caso de que haga falta.

15

7.3 Registrarse
Registrarse es una tarea indispensable para poder acceder a la zona privada. Rellenando el formulario con los datos necesarios ya estars preparado para poder acceder. Los pasos a seguir para llevar a cabo el registro son los siguientes: Primeramente, desde la pgina de Inicio accedemos desde el men a Registrarse1. Una alternativa posible, es pulsar el link que se encuentra bajo el men de login2. O tambin hay un link que nos servira en el slider publicitario.

Una vez estamos en la ventana de registro, tan solo tenemos que rellenar el formulario1 y pulsar el botn Registrarse2: Usuario: El campo no puede dejarse vaco. Email: El campo no puede dejarse vaco y debe cumplir el formato de un email. Contrasea y Confirmar contrasea: Los dos campos no pueden estar vacos deben de ser idnticos. Adems la contrasea debe contener 6 caracteres como mnimo.
16

2 1

7.4 Iniciar sesin

Para iniciar sesin es imprescindible estar registrado, pues hace falta un Usuario y una Contrasea que son los que insertas en el formulario cuando te registras. Lo nico que hay que hacer para iniciar sesin, es desde la pgina de Inicio rellenar el formulario de Login1 con tu usuario y contrasea y pulsar el botn de Enviar2. Seguidamente, si el usuario y contrasea son correctos accederas a la pgina Home de tu usuario.

17

7.5 Home
En la pgina Home que nos encontramos justo despus de haber iniciado sesin podemos ver un slider1 que tiene la misma funcin que en Inicio, mostrarnos contenidos de la web. Justo abajo es el rea privado de los links2, donde podemos ver todos los links que han subido los usuarios de la web, tanto pblicos como privados. Y adems del cambio en los mens3, que nos dan acceso a nuevas pginas de la web por ser un usuario registrado, podemos observar un link de Finalizar sesin4, que es con el que podremos salir de modo identificado y volver a inicio.

4 3 1

18

7.6 Links pblicos y privados

Los links de la pgina web se puedes categorizar en dos tipos, pblicos y privados. La diferencia entre unos y otros es la zona en la que se publican en la web. Mientras que los privados solo son visibles por los usuarios registrados, los pblicos son visibles por todo el mundo. Los links pblicos se publican en la en el rea publica2, a la que se puede acceder pulsando en Links1 en el men superior de Inicio, sin necesidad de Iniciar sesin.

1 2

19

Los links privados como hemos dicho anteriormente se publican en el rea privada1, por lo que primero hay que iniciar sesin. Seguidamente, desde Home hay que dirigirse a la opcin Links2 del men superior.

7.7 Test y resultados

El test de calidad de la web permite a los usuarios evaluar el Diseo, Funcionamiento, Utilidad y Satisfaccin de la misma con una valoracin de 5 niveles (psimo, malo, regular, bueno, excelente). Esto permite tener conocimiento de lo que opinan los usuarios sobre la web para posibles mejoras futuras. La manera de completarlo es muy sencilla. Se accede desde el men a Test1, al que se puede acceder tanto desde el men pblico como desde el acceso identificado. Una vez dentro, se pueden ver los cuatro aspectos a evaluar de la web2 al lado de unos mens desplegables3 en los que el usuario debe indicar el nivel de la valoracin. Una vez se hayan seleccionado todos las valoraciones, solo hay que pulsar el botn Enviar4 y el test se habr completado. Adems, esta pgina muestra unos grficos en los que se puede observar cmo van las votaciones de los usuarios5.

20

7.8 Contactar
La pgina web da la posibilidad al usuario de una va de contacto con la empresa muy sencilla y rpida. Se accede desde el men a Contacto1. Se puede acceder tanto desde el men pblico como desde el privado. Una vez dentro observaremos, adems de una serie de datos de contacto de la empresa2, un formulario3. Rellenando dicho formulario y pulsando el botn enviar4 se enviara un correo a la empresa.

21

7.9 Mapa Web

El mapa web, muestra un diagrama en el que se puede ver fcilmente como acceder a los distintos sitios de la web. En la zona pblica, nicamente se mostrara en el diagrama aquellos lugares a los que tiene acceso un usuario no registrado, pero en el momento en que inicias sesin, el diagrama se completa con el resto. A l se puede acceder desde Mapa Web1 en el men superior tanto del rea pblico como desde el acceso identificado.

El mapa web que se muestra en el rea pblica es el siguiente:

22

Mientras que desde el acceso identificado vemos lo siguiente:

23

7.10 Gestin de links

Para acceder al gestor de links, debes acceder al acceso identificado e ir a la opcin Links1 del men superior.

Te encontraras con una pgina como la siguiente, en la que se pueden observar tres secciones (aadir1, modificar2, eliminar3) y abajo una tabla que representa nicamente los links subidos por el usuario identificado4.

3 1 2

24

7.10.1 Aadir
En esta seccin se puede subir un nuevo link a la web. Nos encontramos con un formulario como el de la imagen en el que tenemos que rellenar los siguientes campos: Ttulo: Es el ttulo del enlace, como un nombre que identifica el link. Link: Aqu se pone el enlace. Tipo: Aqu es donde se decide el tipo del link, es decir, si el link se publicara en el rea pblica o privada. Una vez hayamos rellenado el formulario, solo tenemos que pulsar el botn Subir y el enlace se subir a la web. Automticamente, se pondr en el link el nombre de tu usuario, de manera que se identifica que t lo has subido, y adems se pondr la fecha y hora del instante en el que hayas subido el link. Puedes comprobar que el link se ha subido correctamente en la tabla inferior justo despus de pulsar el botn Subir.

7.10.2 Modificar
En esta seccin se puede modificar los datos de cualquier link subido previamente a la web. Cada link tiene un identificador (Id) nico que nos valdra para indicar que link queremos modificar en este caso. En el formulario que vemos en la imagen tenemos los siguientes campos: ID: Men desplegable con todos los ID de los links subidos Ttulo: Este ser en nuevo ttulo del link. Link: Nuevo link del enlace
25

Tipo: Nuevo tipo del link.

Seguidamente solo tendremos que pulsar el botn actualizar, y se actualizara el link del ID seleccionado con los nuevos datos. Es absolutamente imprescindible no dejar ningn campo en blanco.

7.10.3 Eliminar
En esta seccin podemos eliminar un link anteriormente subido nicamente seleccionando el identificador del link a borrar. Para ello nos ayudamos del men desplegable de la imagen, que contiene todos los ID de los links subidos. Seguidamente pulsamos el botn Aceptar y como podremos ver en la tabla inferior el links con el ID seleccionado ser automticamente borrado.

7.11 Perfil
El perfil de usuario son los datos personales del empleado. Debes estar registrado para tener un perfil, ya que los datos van asociados a un usuario registrado en la web. Este perfil es nicamente para que la empresa identifique a los empleados, ya que solo deben estar registrados los empleados de esta. Al perfil se accede desde Perfil1 en el men superior del acceso identificado.

26

Como vemos en la imagen, la pgina de perfil se divide en dos partes. La parte izquierda muestra los datos actuales del usuario identificado1, mientras que en la derecha vemos un formulario2. Este formulario sirve para actualizar los datos del perfil y para cambiar la contrasea. El nico dato que no se puede cambiar es el nombre de usuario. Para actualizar el perfil, nicamente hay que rellenar los campos cumpliendo los siguientes criterios: Nombre: Nombre de la persona registrada. Este campo no puede dejarse en blanco Sexo: Sexo de la persona registrada Direccin: Direccin personal del empleado. Telfono: Telfono de contacto del empleado. Debe ser un nmero de 9 cifras numricas. Email: Email de contacto del empleado. Debe cumplir el formato normal de un email. Nueva contrasea y Confirmar nueva contrasea: Estos campos te permiten cambiar la contrasea. Deben de ser idnticos.

Ninguno de los campos anteriormente mencionados puede dejarse en blanco, as que en caso de que se quiera modificar algn dato, hay que volver a rellenar todo el formulario de nuevo. Una vez se ha terminado de rellenar el formulario, se pulsa el botn Actualizar3, y como se ver en la seccin de la izquierda, todos los datos sern automticamente actualizados por los del formulario rellenado previamente.

2 1

27