Saltar al contenido principal
Página

Tema 2.2 - Controles HTML

 Ahora veremos un listado de los controles HTML más frecuentemente utilizados, en donde se explicará su funcionamiento para en apartados posteriores detallar algunas de las pruebas que deberíamos tener en cuenta al momento de desarrollar nuestras pruebas de UI.

 

Links:

Son elementos que establecen un vínculo con otro recurso. Se trata de un componente clave para la navegación a través de sitios web, los links pueden presentarse de diferentes maneras, ya que como tal el link no es un elemento sino una propiedad que le permite a éste, enlazar o generar un vínculo con otro elemento, algunos de estos pueden ser textos, botones, imágenes, capas.





Botón:

Es uno de los elementos de la interfaz de usuario más conocidos, los botones pueden usarse para realizar acciones como: realizar el envío de los datos de un formulario, activar opciones o vistas, mostrar diálogos, cuadros emergentes u otros elementos de la interfaz, los botones comunican acciones que los usuarios pueden realizar.

A continuación, veremos algunos tipos de botones:


                                                                Botones de imagen.                                                      Botones envío  de información.

                  

Input:

Un campo de tipo input (entrada) es un elemento de la interfaz para introducir o editar texto, seleccionar opciones y enviar la información de un formulario, los hay de tipo texto, password, radio, checkbox, reset y submit.





Checkbox:

Un checkbox o casilla de verificación es un elemento de interacción de la interfaz gráfica de usuario que permite a través de éste, hacer selecciones múltiples de un conjunto de opciones, los Checkbox permiten al usuario seleccionar uno o más elementos de un conjunto.




Radio button:

También conocidos como botones de radio, que permiten al usuario seleccionar sólo una opción de un conjunto de opciones.




Textarea:

Los textarea o áreas de texto son elementos HTML usados para ingresar textos extensos, funciona igual que un input text, sólo que se usa para textos muy extensos.





Drop down:

Un Drop down o lista desplegable es un elemento de la interfaz de usuario que le permite seleccionar de una lista una o varias opciones, es decir, los hay de única o múltiple selección.

Para seleccionar varios elementos de un Drop down (de selección múltiple) se debe mantener presionada la tecla Ctrl mientras se da clic sobre las opciones deseadas.

Es posible que un drop down sea desplegable o tenga un tamaño fijo, para esto es importante tener en cuenta la lista de elementos que contiene, ya que si es muy extensa se sobreponga sobre otros elementos de la página y en algunos casos haciendo que no sea fácil de interactuar con ella.



                                                                                                                                            


Ventanas Emergentes:

Una ventana emergente es un contenedor transitorio que aparece sobre la ventana padre en respuesta a una acción del usuario, las ventanas emergentes pueden contener diversos elementos de la interfaz de usuario IU, incluyendo botones, listas o menús.





Defectos comunes a nivel de UI

  • Problemas de alineación de botones.
  • Espacio inconsistente entre etiquetas o cuadros de texto.
  • Etiquetas rotas, es decir, la etiqueta de una sola línea se muestra en dos líneas.
  • Desalineación entre cuadros de texto, iconos de información, etiquetas o menús desplegables.
  • Superposición de campos.
  • Campos incompletos.
  • Los datos en la página están desalineados; algunos desplazados hacia arriba o hacia abajo.
  • En cualquier navegador, mientras selecciona alguna acción, la acción correspondiente no ocurre.
  • Al cambiar el tamaño, un control o la página no funciona como se esperaba.
  • Tiempo de expiración de la sesión, ya sea muy corto o muy largo para algunos navegadores.
  • Problemas específicos del navegador: pocos campos no se pueden editar después de ingresar datos en un navegador, sino que se pueden editar en otro navegador.
  • Problemas con diferentes resoluciones de pantalla.


Última modificación: miércoles, 23 de marzo de 2022, 09:46