Curso UF1306, Pruebas de funcionalidades y optimización de páginas web.

1. PRUEBAS DE
FUNCIONALIDADES Y
OPTIMIZACIÓN DE PÁGINAS
WEB
UF1306 CERTIFICADO DE PROFESIONALIDAD.
IFCD0110 – CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB.
ANTONIO DELGADO MOREIRA
AA.ANTONIO.DELGADO@GMAIL.COM

2. ÍNDICE
1
•Validación de datos en páginas web
2
•Efectos especiales en páginas web
3
•Pruebas y verificación en páginas web

3. VALIDACIÓN DE DATOS EN PÁGINAS WEB
• Introducción formulario HTML.
• ¿Qué son formularios HTML? + Actividad
• Etiquetas de formulario básicas + Actividad.
• Solución.
• Caso práctico.
• Más etiquetas.
• Funciones de validación.
• Verificación de formularios.

5. ¿QUÉ SON FORMULARIOS HTML?
Los formularios HTML son uno de los puntos principales de interacción
entre un CLIENTE y un sitio web o aplicación (SERVIDOR). Ellos
permiten a los usuarios enviar información a un sitio web. La mayor
parte de las veces se envía información a un servidor web, pero la
pagina web también puede interceptarla para usarla en lado cliente.
Actividad:
Busca información de la diferencia entre la validación en CLIENTE y
SERVIDOR.

6. ETIQUETAS DE FORMULARIO
• <form> … </form>
• Representa un formulario, consistiendo de controles que puede ser enviado a un servidor para su
procesamiento.
• <div> … </div>
• Representa un contenedor genérico sin ningún significado especial.
• <label>…</label>
• Representa el título de un control de formulario.
• <input />
• Especifica un campo de entrada donde el usuario puede ingresar datos.
• <button> .. </button>
• Define un botón en el que se puede hacer clic.
Actividad:
Información de los atributos ‘action’ y ‘method’ de la etiqueta form.

7. SOLUCIÓN
• Cliente: Respuesta inmediata al no tener que enviar datos ni esperar
respuesta del servidor.
• Servidor: Validación compleja, del lado del servidor, el cliente no tiene
acceso a la información.
• Action: Define la locación (una URL) desde donde la información recolectada
por el formulario debería enviarse.
• Method: define con que método HTTP se enviará la información (puede ser
"get" o "post").
• GET - Solicita datos de un recurso especificado.
• POST - Envía datos para ser procesados ​​a un recurso especificado.

8. EJEMPLO

9. CASO PRACTICO
• Crear un formulario de contacto con los siguientes campos:
• Nombre.
• Apellidos.
• E-mail * .
• Mensaje podéis utilizar la etiqueta <textarea> *.
• Botón para validad *.
Ejemplo

10. MÁS ETIQUETAS.
hidden
image
month
number
password
radio
range
search
submit
tel
text
time
url
reset
button
checkbox
color
date
datetime-local
email
file
La etiqueta <input /> puede tener estos tipos. Se puede añadir
mediente el atributo “type”. Enlace

11. VALIDACIÓN DE DATOS EN PÁGINAS WEB
• Introducción formulario HTML.
• Funciones de validación.
• Principios básicos de la validación.
• Validación en HTML5 + Actividad.
• Validación en JavaScript + Actividad.
• Regex.
• Caso práctico.
• Verificación de formularios.

12. PRINCIPIOS BÁSICOS DE LA VALIDACIÓN