PROGRAMACIÓN WEB – PRÁCTICA 2

Programación del Lado del Cliente

Autores:

Ángel Cañuelo Ortiz

Francisco Javier Córdoba Rey

Carlos Freire Caballero

Antonio José Sánchez Moscoso

Contenido

Aspectos Técnicos ................................................................................................................ 3

Header y Footer................................................................................................................ 3
Display : GRID ................................................................................................................... 4
Slider ............................................................................................................................... 4
Vistas según tipo de usuario .............................................................................................. 5
Criterios adoptados en el desarrollo ...................................................................................... 5

2
Aspectos Técnicos

Header y Footer

Para el diseño de la página, se han seguido los siguientes aspectos o directrices

con el objetivo de alcanzar un estándar de calidad en las vistas del sitio web estático
Beta.
Primeramente, se ha seguido en todas las vistas el mismo modelo de header,
utilizando un diseño basado en pestañas: “Inicio”, “Perfil”, “Comunidad” y “Búsqueda
Avanzada” además de una barra de búsqueda que permite la búsqueda y el acceso a
diferentes elementos de la empresa: usuarios, comunidades, temas, etc.
Respectivamente, el “Inicio” redirige a la página principal de la web, denominada
“index.html”; el “Perfil” muestra la vista de la página donde se encuentran todos los
datos relativos al usuario, desde sus gustos hasta sus contactos, pasando por los
distintos grupos de los que forma parte; la pestaña “Comunidad” muestra información
y noticias de distintos grupos, según la conexión del usuario con los temas de los mismos
mostrará más grupos de un tema o de otro; por último, la pestaña “Búsqueda avanzada”,
que realiza la misma funcionalidad que la búsqueda simple, pero añadiendo filtros a la
búsqueda misma con el objetivo de que el usuario pueda encontrar aquello que busca.
Finalmente, complementando a estas pestañas, se encuentra el logo de Beta, que actúa
también como enlace a la página principal del sitio.

Por otro lado, tenemos el footer de Beta, que también se utiliza en todas las
páginas para seguir así con el modelo de diseño dispuesto en la práctica anterior. En
este footer se disponen las páginas de información de la página, siendo estas “Sobre
nosotros”, “Aviso Legal”, “Política y Privacidad de los Datos” y “Términos y Condiciones
de Uso”. Por otro lado, tenemos además los iconos que enlazan con las distintas redes
sociales: Twitter, Facebook, Google+ y Youtube.

3
Display : GRID

A lo largo de todas las vistas, para posicionar los distintos elementos en la página
se ha utilizado el tipo de display grid, que permite dividir en tantas columnas y filas el
elemento de bloque como se indique en la hoja de estilos. La ventaja de utilizar grid
frente a table, float, flex es que grid te ofrece un mayor control de las secciones en las
que se divide el elemento de bloque y la facilidad con la que se puede manejar el lugar
de todas las partes de la vista.

Slider

En algunas de nuestras vistas se ha utilizado un slider, un carrusel de imágenes,

cuyo objetivo es añadir dinamismo a la página ofreciendo distintas noticias al usuario
que pueden alternarse de una a otras haciendo simplemente click en una de las flechas
del mismo. Este elemento se ha utilizado en las siguientes vistas: “Personas del
Entorno”, “Noticias” y “Mis Grupos”.

4
Vistas según tipo de usuario

Para finalizar, dependiendo del tipo de usuario, se han mostrado ciertas páginas
de la página o no, resolviendo así el problema que planteaban la utilización de distintos
roles como pueden ser: Usuario no Registrado, Usuario Registrado y Administrador. Por
ejemplo, en el inicio, dependiendo de si el usuario de Administrador o no, se muestra
un botón que permite acceder a la vista de administración.

Criterios adoptados en el desarrollo

A pesar de que la funcionalidad de los mockups es limitada, se ha mostrado a lo

largo de todas las vistas el aspecto que mostrarán finalmente los contenidos, así como
los distintos elementos de los layouts creados anteriormente (en la práctica anterior).
Por otro lado, se ha seguido el principio de navegabilidad, de forma que para el
usuario esta sea prácticamente máxima, permitiendo al investigador que pueda ir de
cualquier parte del sitio a cualquier otra parte del mismo.
Se ha seguido también una política que utilice ampliamente el etiquetado
semántico, pues, como se indica en la asignatura, aunque no modifica la estructura de
la página, sí aporta significado a la misma y por tanto valor, además, estas etiquetas
pueden ser utilizadas por los buscadores para filtrar resultados.
Finalmente, las funcionalidades utilizadas en JavaScript han permitido la
manipulación de los elementos del DOM y la alerta a los usuarios al realizar
determinados eventos como puede ser el éxito o el error al autenticarse en la página
web Beta.

5
Comentarios respecto a la implementación de las páginas

En primer lugar, a falta del lado del servidor se ha creado una función simple en
Javascript que permita visualizar, dependiendo de las credenciales introducidas al
loguearse, una vista u otra de las diferentes páginas de inicio.
Destacar también, que al solicitar la unión a un grupo, se ha realizado el motivo
de la unión en una página aparte. Se tratatá de incorporar como ventana emergente en
la misma página de inicio en un futuro.
Las páginas como búsqueda_avanzada.html se han puesto como enlace al botón
de búsqueda, pues ya que no pueden aparecer como respuesta a la petición al servidor,
de momento se muestran así.