UF1306 - Pruebas de funcionalidades y optimización de páginas web

UF1306: Pruebas de funcionalidades y optimización de páginas web

Elaborado por: Yolanda Mabel Brun López-Avisab

Edición: 5.0

EDITORIAL ELEARNING S.L.

ISBN: 978-84-16424-32-0 • Depósito legal: MA 541-2015

No está permitida la reproducción total o parcial de esta obra bajo cualquiera de sus formas gráficas

o audiovisuales sin la autorización previa y por escrito de los titulares del depósito legal.

Impreso en España - Printed in Spain

Identificación de la Unidad Formativa

Bienvenido a la Unidad Formativa UF1306: Pruebas de funcionalidades y optimización de páginas web. Esta Unidad Formativa pertenece al Módulo Formativo MF0951_2: Integración de componentes software en páginas web que forma parte del Certificado de Profesionalidad IFCD0110: Confección y publicación de páginas web, de la familia de Informática y comunicaciones.

Presentación de los contenidos

La finalidad de esta Unidad Formativa es enseñar al alumno a verificar la integración de los componentes software en las páginas web para asegurar el cumplimiento de las funcionalidades esperadas, según los criterios de calidad de la organización. Para ello, se estudiarán las validaciones de datos en páginas web, los efectos especiales en páginas web y las pruebas y verificación en páginas web.

Objetivos de la Unidad Formativa

Al finalizar esta Unidad Formativa aprenderás a:

–Aplicar técnicas de prueba y verificación de la integración de los componentes en la página web para comprobar parámetros de funcionalidad y ‘usabilidad’ de acuerdo a unas especificaciones recibidas.

UD1.Validaciones de datos en páginas web

1.1. Funciones de validación 13

1.1.1. Descripción de las funciones 14

1.1.2. Utilidad de las funciones 16

1.1.3. Implementación de las funciones 17

1.1.4. Validaciones alfabéticas, numéricas y de fecha 26

1.1.5. Definición de validaciones 28

1.1.6. Código de validación 30

1.1.7. Ejecución del código de validación 63

1.2. Verificar formularios 69

1.2.1. Identificación de datos 70

1.2.2. Implementación del código de verificación 71

1.2.3. Comprobación de los datos introducidos por el usuario 79

UD2.Efectos especiales en páginas web

2.1. Trabajar con imágenes: imágenes de sustitución e imágenes múltiples 137

2.1.1. Selección de imágenes 145

2.1.2. Optimización de imágenes 148

2.1.3. Implementación de código con varias imágenes 150

2.2. Trabajar con textos: efectos estéticos y de movimiento 159

2.2.1. Creación de textos mejorados y con movimiento 163

2.2.2. Implementación de efectos 171

2.2.3. Adecuación de los efectos a la página web 172

2.3. Trabajar con marcos 179

2.3.1. Dónde utilizar los marcos 194

2.3.2. Limitaciones de los marcos 198

2.3.3. Alternativas a los marcos 203

2.4. Trabajar con ventanas 217

2.4.1. Creación de varias ventanas 219

2.4.2. Interactividad entre varias ventanas 223

2.5. Otros efectos 229

2.5.1. Efectos con HTML 234

2.5.2. Efectos con CSS 236

2.5.3. Efectos con capas 240

UD3.Pruebas y verificación en páginas web

3.1. Técnicas de verificación 251

3.1.1. Fundamentales 260

3.1.2. Técnicas HTML 263

3.1.3. Técnicas CSS 272

3.2. Herramientas de depuración para distintos navegadores 275

3.2.1. Utilidades para HTML 279

3.2.2. Utilidades para JavaScript 283

3.2.3. Utilidades para CSS 295

3.2.4. Utilidades para DOM 309

3.3. Verificación de la compatibilidad de scripts 311

3.3.1. Parámetros para distintos navegadores 321

3.3.2. Creación de código alternativo para diversos navegadores 326

Glosario 365

Soluciones 369

1.1. Funciones de validación

1.1.1. Descripción de las funciones

1.1.2. Utilidad de las funciones

1.1.3. Implementación de las funciones

1.1.4. Validaciones alfabéticas, numéricas y de fecha

1.1.5. Definición de validaciones

1.1.6. Código de validación

1.1.7. Ejecución del código de validación

1.2. Verificar formularios

1.2.1. Identificación de datos

1.2.2. Implementación del código de verificación

1.2.3. Comprobación de los datos introducidos por el usuario

En informática, el proceso de validación de datos es una de los factores más importantes a tener en cuenta, tanto en la integridad de los datos como en el campo de la seguridad. Validar datos es testear y controlar cada uno de los datos de entrada de un sistema antes de aceptaros como válidos. No debemos confundir validar con verificar, como veremos más adelante. Este proceso es especialmente importante en sistemas que se hallan conectados a redes de datos como Internet.

Validar los datos es una cuestión de integridad de datos y de seguridad.

La vulnerabilidad más habitual en la web es fruto de la falta de validación apropiada de las entradas del usuario o del entorno de trabajo. Para evitar problemas como la inyección de código o el ataque de traspaso de directorios es necesario seguir una serie de pautas preventivas. No se debe confiar en los datos introducidos por el usuario para garantizar, en la medida de lo posible, la robustez y seguridad del sistema.

Un ejemplo típico de una aplicación vulnerable es:

$template = ‘blue.php’;

if ( isset( $_COOKIE[‘TEMPLATE’] ) )

$template = $_COOKIE[‘TEMPLATE’];

include ( /home/users/phpguru/templates/ . $template );

?>

Un ataque contra este sistema podría ser mandar la siguiente petición de HTTP:

GET /vulnerable.php HTTP/1.0

Cookie: TEMPLATE=../../../../../../../../etc/passwd

La cadena ../../../ permite acceder al directorio raíz y de este al directorio de contraseñas de UNIX.

(fuente Wikipedia)

En el ejemplo anterior la falta de validación en el lado del cliente a la hora de leer una cookie de usuario pone en riesgo las contraseñas del sistema en el lado del servidor.

La validación de los datos de entrada se realiza en el lado del cliente (mediante lenguajes de script como JavaScript o vbscript) y también en el lado del servidor (mediante código php, jsp o asp). En aplicaciones críticas son necesarias las dos validaciones ya que simplemente con desactivar javascript del navegador es posible enviar datos intencionadamente erróneos para que sean procesados por el lado del servidor.

Es imprescindible comprobar que los datos introducidos via URL o a través de formularios son los esperados. Por ejemplo, una llamada a un fichero php con el siguiente formato: libro.php?id=10, envía el parámetro id con valor 10. Eso mostraría los datos del libro cuyo código coincide con dicho valor numérico. El código php debe verificar que el dato tras el signo = es siempre un número; en caso de no hacerlo, un atacante podría cambiar dicho número por código SQL malintencionado y borrar, por ejemplo, la base de datos de la aplicación web.

Esto es posible debido a que SQL no discrimina en los datos de entrada la existencia de instrucciones de control como AND, SELECT o incluso EXEC. Si no se verifica la correcta sintaxis de dichos datos es posible que una línea de código SQL del tipo SELECT id, nombre FROM productos where id=’$entrada_de_usuario’ se convierta en SELECT id, nombre FROM productos where id=’1’ EXEC master.dbo... , ejecutando un comando del sistema operativo...

Los riesgos asociados a una deficiente validación de datos pueden estar asociados a la integridad de los datos, al formato erróneo de los datos de entrada o al incumplimiento de las reglas de negocio.

Se vulnera la integridad de los datos cuando un usuario introduce de manera intencionada datos erróneos.

Se vulnera el formato de los datos cuando el usuario introduce los datos utilizando un formato incorrecto o fuera de rango y estos provocan un fallo en la aplicación.

Cuando se incumplen las reglas de negocio se puede producir un comportamiento no previsto en la ejecución de la aplicación.

1.1.Funciones de validación

Para saber que podemos esperar de las funciones de validación hay que entender que estamos ante una validación de tipo formal. Nada se dice de la veracidad de la información que está siendo validada por nuestra batería de funciones de validación. Se trata de un filtro previo que se puede ha de realizar como mínimo en el lado del servidor, por lo que las funciones que se implementan en este manual harán uso necesariamente de algún tipo de lenguaje de servidor, como php.

La mayoría de los ejemplos, sin embargo están en javascript. Esto tiene sentido ya que aunque no sea imprescindible realizar la validación de lado de cliente si que es conveniente hacerlo ya que uno de los objetivos de la validación es mejorar la experiencia de usuario y evitar que se cometan errores a la hora de interactuar con el UI (User Interface).

Mediante funciones de validación es posible evitar toda una serie de vulnerabilidades y conseguir que los datos de entrada mantengan una integridad y coherencia aceptables. En términos generales debemos seguir las siguientes directrices de seguridad:

–Evitar el almacenamiento de datos sensibles en campos ocultos, y si esto no es posible almacenarlos cifrados.

–Controlar el tipo de los datos introducidos (numérico, alfabético, alfanumérico, etc).

–Controlar el rango de valores permitidos en los datos de entrada.

–Controlar la longitud máxima válida en caso de entradas alfanuméricas.

–Verificar que el dato resultante tras una operación realizada con los datos de entrada se encuentra dentro del rango de valores permitido antes de asignarlo a la siguiente variable.

–Vigilar la posible inyección de código SQL malicioso eliminando de las cadenas alfanuméricas de entrada determinados caracteres ASCII. Por ejemplo ‘ = * ?’. El uso de urls amigables puede evitar la necesidad de pasar parámetros via URL.

–Evitar la exposición del código fuente y almacenar los datos importantes en la base de datos en lugar de en variables en el caso de servidores web compartidos.

Ejemplo validación

Por ejemplo el código ISBN (International Standard Book Number) es un identificador único usado para libros desde 1970 a nivel mundial. Fue creado por una cadena de librerías británicas en 1966 y su uso se extendió luego a todo el país. Originalmente constaba de 10 dígitos, pero a comienzos del siglo XXI la cantidad de libros impresos era tal que se preveía que no fuesen suficientes los dígitos y en 2007 se amplió a 13 dígitos.

Los ISBN de 10 dígitos se ampliaron con el prefijo 978. En el momento en que se agoten los ISBN antiguos se empezará a utilizar el prefijo 979. Los ISBN antiguos tenían un dígito de control para evitar errores que ha de ser recalculado con el nuevo sistema.

Para acabar de complicar la tarea de escribir una función de validación para códigos ISBN, algunas editoriales decidieron no utilizarlos y usar en su lugar el EAN13 (códigos de barras usados en los productos a la venta en general).

El código de barras que aparece en las contraportadas de los libros está en este formato, a veces acompañado de un código Bookland de 5 dígitos que indica el país de origen y el PVP recomendado. El número que codifica el código de barras principal comienza por 978 en el caso de los libros.

Existen otros códigos similares al ISBN, como el ISSN para las revistas y periódicos, el IBSN para los blogs, o el ISAN para las producciones audiovisuales.

Una función de validación de códigos ISBN nos permitiría evitar errores de entrada a la hora de buscar un libro en una base de datos. Pero aunque el código ISBN sea válido siempre queda una mínima posibilidad de que el libro no exista, o que al menos no esté en nuestra base de datos. El dato de entrada en este caso sería válido pero posteriormente no pasaría el proceso de verificación.

1.1.1.Descripción de las funciones

Una función de validación es aquella que recibe un valor o conjunto de valores introducidos por el usuario a fin de comprobar si cumplen con una serie de restricciones impuestas por la aplicación.

Existen infinidad de comprobaciones posibles. Algunas de las más habituales son, por ejemplo, comprobar que se ha cumplimentado un campo de formulario obligatoria o elegido un valor de una lista desplegable, verificar que el nombre y los apellidos del usuario contienen solo caracteres alfabéticos o comprobar si la dirección de correo electrónico es válida.

Podemos clasificar el tipo de funciones de validación dependiendo de que tipo de comprobación realizan, tal como podemos ver en la siguiente tabla:

Además las validaciones pueden ser simples – cuando se analiza el contenido de un solo campo – o compuestas, en el caso de que la validación de un determinado campo dependa del contenido de otros campos.

Un ejemplo de validación compuesta sería: en un formulario de registro de nuevos usuarios de una web la contraseña es válida si ha sido introducida en el campo contraseña y repetir contraseña y las dos coinciden.

Otra validación compuesta bastante habitual es la que podemos ver en cualquier sistema de búsqueda de vuelos por Internet. Supongamos que tenemos un formulario de entrada de datos en el que se nos piden los siguientes dados:

–Ciudad o aeropuerto de origen.

–Ciudad o aeropuerto de destino.

–Fecha de inicio del viaje.

–Fecha de regreso.

–Número de adultos que viajarán.

Si nuestro formulario no restringiera los datos que el usuario puede introducir podría ocurrir que eligiera dos ciudades (origen y destino) que no estuviesen conectadas por vuelos regulares. Podría introducir un nombre de ciudad sin aeropuerto, o inexistente. También podría ocurrir que la fecha de salida o la de regreso fuesen incorrectas o bien que la de regreso fuese anterior a la de inicio del viaje.

Si selecciono como ciudad de origen ‘Sevilla’ eso me va a restringir la lista de ciudades de destino válidas, de igual forma que la fecha de inicio del viaje condiciona y restringe las fechas válidas en la fecha de regreso.

Por otra parte lo deseable sería que el sistema de entrada de datos estuviese ideado de forma que los errores se redujesen al mínimo, maximizando además las posibilidades de búsqueda.

En algunas páginas de búsquedas de vuelos se permite, por ejemplo, especificar solo la fecha de salida, el número de días y el presupuesto máximo, de forma que el sistema te muestra los destinos que cumplan dicho criterio.

La descripción de las funciones de validación es parte del diseño de la interfaz de usuario. No hay una sola forma de hacer las cosas.

1.1.2.Utilidad de las funciones

Para que las funciones de validación sean útiles han de cumplir su objetivo según varios criterios.

En primer lugar que cumplan su objetivo en lo tocante a la seguridad y fiabilidad de los datos de entrada, ya que de ello depende la integridad y la consistencia del sistema informático. Entendemos como consistencia que el sistema se comporte de la manera en que se espera que lo haga e integridad que se garantice que dichos datos sean modificados, creados o borrados solo por usuarios autorizados.

En sentido estricto ninguna validación de lado de cliente es capaz de garantizar al 100% estos criterios de seguridad, ya que es posible falsear los datos de entrada y saltarse las validaciones porque al residir el código fuente en el lado del cliente es posible alterarlo o desactivarlo. Para conseguir que las funciones de validación sean útiles desde el punto de vista de la seguridad es imprescindible la validación de lado de servidor.

Sin embargo cuando los datos de entrada no son críticos para la seguridad del sistema puede ser suficiente una validación de lado de cliente, siempre que tanto la consistencia como la integridad del mismo no se vean comprometidas.

Esto no significa que sea deseable prescindir de la validación del lado del cliente ya que existe otro criterio a tener en cuenta en lo tocante a la validación de los datos de entrada: el de la usabilidad.

Las validaciones de lado de cliente han de estar enfocadas a proporcionar una experiencia de usuario satisfactoria y no intrusiva donde se encuentre el equilibrio entre dos enfoques contrapuestos. Uno que afirma que el sistema es el que debe controlar al usuario y otro que, por contra, mantiene que es el usuario el que ha de tener el control sobre el primero.

Las funciones de validación tendrán que implementarse teniendo en cuenta estas cuestiones. ¿En qué momento se realizará la validación? ¿Cuando el usuario haga clic en el botón Enviar? ¿A nivel de campo de formulario? ¿En tiempo real, cada vez que se modifiquen las entradas?

No es conveniente que el usuario se vea constantemente interrumpido con mensajes de error mientras rellena el formulario, resultaría molesto. Sin embargo no es la única forma de hacerlo, se puede mostrar una marca de validación en verde indicando que un campo es correcto en lugar de mostrar una ventana contextual alertando de un error. Es una validación a nivel de campo de formulario pero no intrusiva.

Como veremos más adelante se pueden combinar las funciones de validación y verificación incluso realizándolas siempre en el lado del servidor, pero de forma que no se vea comprometida la usabilidad. El usuario ni siquiera tiene porqué enterarse de que se están validando los datos en el servidor. La mejor validación es la que no se ve.

En resumen, las funciones de validación serán útiles si cumplen los siguientes criterios:

–Cumplen los requisitos de seguridad y fiabilidad establecidos en el sistema informático.

–Cumplen los requisitos establecidos en cuanto a usabilidad.

1.1.3.Implementación de las funciones

La validación de los datos de entrada es realizada por funciones cuya estructura en pseudocódigo es la siguiente:

FUNCION validacion(dato1, dato2,... ) {

SI (condición que ha de cumplir el primer dato de entrada) {

// Si no se cumple la condicion

MENSAJE-DE-ERROR(‘[CODIGO-DE-ERROR] El DATO1 ha de cumplir la CONDICIÓN1.’);

RETORNAR(FALSO)

// Se finaliza la ejecución de la función

}

EN-CASO-CONTRARIO SI (condición que ha de cumplir el segundo dato de entrada) {

// Si no se cumple la condicion

MENSAJE-DE-ERROR(‘[CODIGO-DE-ERROR] El DATO2 ha de cumplir la CONDICIÓN2.’);

RETORNAR(FALSO)

// Se finaliza la ejecución de la función

}

...

EN-CASO-CONTRARIO SI (condición que ha de cumplir el segundo dato de entrada) {

// Si no se cumple la condicion

MENSAJE-DE-ERROR(‘[CODIGO-DE-ERROR] El DATO2 ha de cumplir la CONDICIÓN2.’);

RETORNAR(FALSO)

// Se finaliza la ejecución de la función

}

// Si la ejecución de la función ha llegado hasta aquí es que se han cumplido todas las condiciones exigidas

RETORNAR(VERDADERO);

}

La estructura lógica anterior verifica una batería de condiciones que ha de cumplir el conjunto de datos de entrada, en su totalidad, para ser válido. Si cualquiera de las condiciones no se cumple la función retorna falso. Solo en el caso de que se cumplan todas y cada una de las condiciones se retorno verdadero.

Aunque la estructura anterior es perfectamente válida a nivel lógico, no es conveniente realizar la validación sobre un conjunto de datos muy amplio por motivos de usabilidad. Es mucho mejor que se validen los datos mientras se están introduciendo – siempre que sea posible – para evitar molestias al usuario.

A veces no queda más remedio que enviar un formulario para su validación en el lado del servidor. En este caso siempre intentaremos causar la menor molestia, impidiendo que se borren todos los datos del formulario y señalando de alguna manera los errores que se cometieron en la introducción de datos y la posible solución de la manera más amigable que sea posible. Si el usuario introdujo mal una dirección de e-mail se puede marcar en rojo ese campo del formulario y mostrar un mensaje de error que le ayude en la introducción de datos.

Aunque en la siguiente sección veremos como podemos implementar directamente en javascript los diferentes tipos de funciones de validación (numéricas, alfanuméricas, de fecha, de e-mail, etc) en la práctica lo más habitual y cómodo es utilizar librerías escritas ex profeso para facilitar dicha tarea, bien para utilizar por separado o como un plugin de validación escrito para una biblioteca javascript.

A la hora de elegir que librería utilizaremos para validar nuestros formularios – o si no usaremos ninguna – no solo deberemos tener en cuenta que funcione bien a nivel técnico y haga lo que tiene que hacer. Esto es, por supuesto, un pre-requisito; pero la otra mitad del problema es no permitir que la validación de entrada se convierta en una mala experiencia de usuario. No es solo que esto pueda pasar, sino que es una de las principales deficiencias del interfaz de usuario en las páginas web, por lo que hay que elegir bien.

Factores a la hora de elegir que script o librería de validación utilizar serían lo extendido que está su uso (por el tema de actualizaciones, soporte técnico, etc), la claridad de la documentación existente, la facilidad de integración con nuestro proyecto, dependencias de otras librerías (menos es más), amplitud de casos contemplados (¿Cómo de completa es la solución en términos de diferentes tipos de validación de formulario?) y, quizás el segundo factor más importante, el impacto de la librería de validación sobre la experiencia final del usuario.

Plugins de validación para JQuery

Entre la miriada de plugins de validación de formularios existentes para la biblioteca Jquery podemos destacar Validity, jQuery Ketchup, Jquery Validate, Parsley.js, Formance.js o Verify.js.

JQuery Validate

En primer lugar tenemos Jquery Validate, uno de las más asentados y utilizados plugins de validación. Cubre prácticamente cualquier situación que puedas necesitar a la hora de validar un formulario – incluso formularios dinámicos o subida de ficheros –, permite la creación de contenedores para mostrar errores y es compatible con las versiones 1.6.4, 1.7.2, 1.8.3 y 1.9.0 de jQuery. Depende de esta librería para funcionar, pero si ya la estabas utilizando de todas formas, no tendrás problema.

Verify.js

Otra solución dependiente de Jquery es Verify.js. Una biblioteca muy interesante que permite validaciones configurables mediante parámetros, validaciones asíncronas y validaciones de grupo. La API funciona mediante la definición de datos-atributos asignados usando class en cada campo del formulario para indicarle que es y lo que se ha de validar. Por ejemlo:

xx data-validate=number,required>

De la misma manera se puede utilizar para agrupar ciertas validaciones que son dependientes entre sí. Además permite definir reglas de validación asíncronas mediante la definición de callbacks. Una regla de validación de este tipo no se valida en el momento, sino cuando se reciba la respuesta de la función definida en el callback tras hacer una llamada a un script de servidor.

Validar un formulario con Parsley.js

Parsley.js es una librería de validación de uso general que promete realizar el proceso de validación de lado de cliente prácticamente si escribir una sola línea de código javascript. Actualmente Parsley.js ha integrado en su código a Validate.js, con lo que hay cientos de validaciones disponibles y fáciles de utilizar. Se integra muy bien con otros frameworks como Django o Rails.

Parsley utiliza una API DOM que permite configurar casi todo directamente desde el DOM (aka Document Object Model). El prefijo DOM por defecto de Parsley es data-parsley-. Eso significa que si en la configuración vemos una propiedad llamada spain, esta puede ser modificada vía DOM mediante data-parsley-spain = valor.

Un ejemplo de validación de un campo e-mail (requerido), en el que la validación se realiza en el momento en que el contenido del campo es cambiado:

email>Email * :

email name=email data-parsley-trigger=change required />

Un campo de texto donde se requiere un mínimo de 20 caracteres y un máximo de 200 con el correspondiente mensaje de error que se mostrará en caso de que no pase la validación. En este caso la validación se realiza conforme se escribe (data-parsley-trigger=keyup):

comentario>Comentario (min 20 caracteres, max 200) :

comentario</q> data-parsley-trigger=<q>keyup</q> data-parsley-length=<q>[20, 200]</q> data-parsley-validation-threshold=<q>10</q> data-parsley-minlength-message = <q>El comentario debe tener al menos 10 caracteres, si no que vas a decir...</q>>

Lo bueno que tiene Parsley es que permite implementar con poco esfuerzo más la validación de lado de servidor mediante ajax. Para ello debemos utilizar el plugin Parsley Remote. Recordemos que la validación realmente segura es la de servidor, la de cliente es solo recomendable para mejorar la experiencia de usuario, evitar que se envíen formularios mal completados y reducir la carga de trabajo.

Validar un formulario con AngularJS

AngularJS no es una simple biblioteca javascript, es un framework de código abierto que trae a la programación front-end el paradigma Modelo Vista Controlador (MVC) para estructurar lo que se conoce como aplicaciones web de una sola página (SPA por sus siglas en inglés). Es la alternativa de Google a BackboneJS o EmberJS.

La validación de formularios con AngularJS no requiere de ningún plugin, ya que está implementada dentro del framework. Se basa en definiciones de datos-atributos, aunque con otro formato más al estilo de HTML5:

text ng-pattern=[a-zA-Z] />

email name=email ng-model=user.email />

number name=edad ng-model=user.age />

Sin embargo las herramientas de validación incluidas son más bién escasas, con lo que tenemos que tirar de la creación de directivas de validación personalizadas haciendo uso de ng-pattern o ui-validate.

Validar un formulario con Mootools

Mootools es una alternativa, también de código abierto, a JQuery. Para validar formularios en Mootools se puede hacer uso de un componente llamado FormValidator.

Para usarlo necesitamos inicializar el componente utilizando una serie de parámetros. El primer parámetro es el identificador CSS-id del formulario y luego tenemos los parámetros stopOnFailure, useTitles, errorPrefix, onFormValidate y onElementValidate que nos permiten decidir como se comportará el procedimiento de validación.

Por ejemplo si stopOnFailure es true estamos indicando que