Estudio de Usabilidad

Una vez nuestra página web se encuentra operativa podemos realizar diversos análisis con el fin de comprobar si la distribución de contenidos que hemos escogido a la hora de programar ha sido la correcta, si la información que se pretende dar es fácilmente accesible, si el usuario sabe navegar a través de la web,etc. En definitiva, realizar un estudio de usabilidad.

Hoy en día ha cobrado una gran importancia la usabilidad de las páginas Web, ya que si el usuario no encuentra algo o no sabe realizar una determinada tarea, lo más fácil es que se vaya a la competencia.

Desde construcciones Enessa se ha realizado un pequeño test para saber si se han organizado los contenidos de forma correcta, para ello se ha utilizado de herramienta OptimalSort  de Optimal Workshop, donde se pide a los receptores de la encuesta que organicen una serie de cartas en las categoría que ellos consideren.

Se han obtenido los siguientes datos:

• 4 personas han completado la encuesta y han ordenado las 8 cartas en una media de 4 grupos.

El análisis de las respuestas ha producido los siguientes resultados:

En primer lugar observamos desglosado en que categorías se ha incluido cada carta:

Después también podemos ver las categorias que han usado los usuarios para clasificar nuestras cartas, aunque no coincida ninguna categoría se puede ver que varías de ellas podrían considerarse prácticamente sinónimos

A partir de estos datos, el programa elabora una matriz de similaridad, en la que se nos muestra que porcentaje de similitud hay entre las cartas.

Con estos datos el programa te calcula la mejor distribución posible de contenido en realación a las respuestas de los usuarios; gráficamente se puede observar en el diagrama abajo mostrado donde algunas de las cartas convergen en una misma categoría común

A la vista de este análisis podemos llegar a las siguientes conclusiones:

• Contacto y Situación deberían estar agrupados bajo una misma categoría que podría llamarse contacto o datos de contacto, mientras que en nuestra web se encuentran separados formando 2 categorias diferentes.
• Información Corporativa, Filosofía de empresa y Nuestro equipo al final convergen hacia una única categoría que podría llamarse Información empresarial o Sobre la Empresa. Por tanto podemos decir que se encuentran correctamente agrupados en nuestra web
• Servicios y Clientes podría caber la posibilidad de agruparlos juntos pero hay mucha indecisión al respecto, por lo tanto es mejor dejarlos en categorías diferentes, tal y como se encuentran en nuestra web.  

Este tipo de análisis nos sirven de gran utilidad a la hora de conocer la desenvoltura de los usuarios en nuestra web y poder realizar mejoras inmediatas que incrementen la eficiencia de la web.

Inicio de Sesión

Se ha implementado un pequeño sistema a modo de ejemplo para poder autenticarse en la página web a través de un usuario y contraseña. A continuación mostramos su funcionamiento:

En primer observamos un mensaje informativo en la parte superior de la Web que indica al usuario que se ponga en contacto con la empresa o inicie sesión con su cuenta, clicando en el logo de usuario, accedemos a la página de identificación desplegable.

Una vez en la página de identificación, el sistema nos pide introducir los datos de acceso, Usuario y contraseña, ambos de carácter obligatorio:

Si el resultado de la autenticación ha sido válido, el usuario ya estará en su cuenta con su sesión abierta, como indica el mensaje informativo dando la bienvenida:

Si por el contrario el resultado de la autenticación no es correcto, el sistema mostrará que el usuario o contraseña introducidos no ha sido correcto:

Ahora veamos como se ha implementado este sistema haciendo uso de lenguaje y variables de PHP.

En primer lugar en el fichero header-info.php que contiene el panel superior informativo se ha añadido mediante php un mensaje variable en función de las variables de sesión que están definidas o bien si se ha pasado un mensaje de error durante el Login.

Una vez pulsado el botón de usuario, vemos que se nos despliega un banner que sigue el mismo estilo que el cuadro de búsqueda y que constituye la página de identificación, que consta de un formulario que solicita 2 parámetros de carácter obligatorio y redirige al fichero ProcesaLogin.php.

En procesaLogin.php se ha definido un array de "logins" es decir pares usuario-contraseña, donde se almacenan los datos de acceso del usario. Una manera más correcta de hacerlo seria hacer uso de una base de datos implementada de manera parecida a la anteriormente vista, pero como el objetivo de esta entrada era ejemplificar el inicio de sesión se ha simplificado esa parte.

Una vez obtenidos los valores de usuario y contraseña que ha introducido el usuario se comparan con los que contiene el array (usuarios registrados) si la búsqueda produce resultados positivos, se inicia sesión sesion_start() y se declara la variable PHP $_SESSION['user'] con el nombre de usuario conectado. En caso de que el Login no sea correcta, se vuelve a la pagina principal y se pasa un parámetro de error $error_login

A partir de este esquema básico se podrían implementar muchas más funcionalidades como manejo de base de datos, cookies,etc.

Manejo de Base de Datos con PHP

En esta entrada aprenderemos como hacer uso de una base de datos en nuestra web y manejarla usando PHP. La base de datos será SQL y haremos uso de MySQL y phpMyAdmin para su creación y manejo.
En nuestro caso nuestro servidor web 000webhost nos ofrece estas herramientas en el panel de control de nuestra Web.

En primer lugar creamos la base de datos usando MySQL:

Una vez creada la base de datos desde phpMyAdmin introduciendo las credenciales de acceso, podemos manejar nuestra base de datos y crear las tablas que necesitemos. 

Observamos que podemos crear nuevas tablas o bien manejar las ya existentes. añadir o quitar campos, visualizar el contenido de la tabla o añadir quitar entradas de la tabla.

En el caso de nuestro proyecto Web se ha decidido utilizar una base de datos relacional (SQL) para manejar las peticiones de puestos de trabajo, se trata de una base de datos simple pero que ejemplifica el modo de uso para aplicaciones Web.

Nuestra base de datos constará de una tabla "trabajos" que almacenará 4 parámetros: "id", "nombre", "apellidos" y "trabajo". id es un entero que se autoincrementa con cada entrada.

Hemos creado un directorio para almacenar los archivos que implementaran el manejo de la base de datos, éste contiene 2 ficheros: conectar.php y solicitud_trabajo.php

El primer archivo contiene la conexión con el servidor que almacena la base de datos, la cual se realiza mediante PHP de la siguiente forma: 

El segundo se trata de un script que maneja los datos pasados por la Query a través de un formulario y los inserta en la tabla de nuestra base de datos.
Se ha modificado el formulario de nuestra página Web para que inserte los parámetros correspondientes en la tabla de nuestra base de datos pasándoles los parámetros introducidos al script solicitud_trabajo.php

En el Script solicitud_trabajo.php observamos que lo primero es conectarse a la base de datos utilizando el código de conectar.php e introduciéndolo con require_once de php. Obtenemos los valores pasados a través del formulario que en PHP se almacenan en la variable $_REQUEST y comprobamos que no se encuentran vacíos. 

Acto seguido ejecutamos las funciones de insertar en la base de datos según se muestra y si todo ha sido correcto se redirige a la página puestos_trabajo.php

puestos_trabajo.php también ha sido modificado con respecto a la versión de nuestra Web estática, anteriormente el resultado que se mostraba era el mismo independientemente del formulario rellenado, ahora mediante PHP y pasando los parámetros deseados a través de la URL podemos hacer que el resultado cambie dinámicamente dependiendo del formulario que lo genere.

En nuestra página puestos_trabajo.php damos las gracias al usuario por rellenar la solicitud del puesto específico y mostramos el contenido de la base de datos indexado en un tabla. El resultado obtenido es este:

En el código observamos como se comprueba si se han pasado los parámetros correctamente y se le envía un mensaje al usuario, después se usa un SELECT en la tabla de la base de datos para ir recorriendo las filas e introduciéndolas en la tabla.

Así hemos escenificado el uso de una base de datos sencilla. En un caso real, se deberían almacenar todos los datos que se han obtenido en el formulario y las tablas se harían más grandes, si además hay un nº de usuarios muy elevado, habría que estudiar la convenencia de usar otros modelos de bases de datos como NoSQL (Not only SQL).

Migración a PHP

En esta parte de nuestro diseño web hemos decidido cambiar el formato de nuestro código de HTML a PHP, este cambio ha sido motivado por los siguientes motivos, entre otros:

• Ejecución de funcionalidades en lado servidor
• Manejo de base de datos
• Gestión de sesiones
• Formularios dinámicos 
• Uso de plantillas

Lo primero que vamos a hacer es dividir las partes comunes de nuestro código en plantillas PHP o templates. Esto se debe que a medida que vayamos incorporando páginas nuevas a nuestra Web, querremos que sigan un patrón similar y de esta forma nos evitamos reescribir código y queda más visible el contenido propio de cada página.

Para ello hemos creado el directorio templates donde alojamos los archivos php que contienen el código común:

A modo de ejemplo, visualizamos el código de uno de ellos, el resto siguen el mismo procedimiento y contienen el código que antes teníamos en nuestra página principal.

Vemos el contenido de scripts.php que contiene los scripts que utiliza la web y que deberán ser importados en cada página de la misma.

Ahora solo nos queda, incluir las plantillas en la parte del código de nuestra página que deseemos, siguiendo con el ejemplo de scripts.php los incluimos al final para reducir los tiempos de carga de la página. Utilizamos include con PHP para incluirlo.