Propiedades CSS, jQuery, Usabilidad y Accesibilidad Web (WCAG)

Propiedades de Animación CSS

animation-delay: Indica el retraso entre bloques de la secuencia. Su valor será el retardo (expresado en milisegundos o segundos).
animation-duration: Indica la duración total de la animación (expresado en milisegundos o segundos).
animation-iteration-count: Configura las repeticiones del ciclo de animación.
animation-name: Identifica el nombre de la animación.

Variables LESS

Las variables LESS permiten evitar usar valores directamente en nuestro código CSS. En lugar de ello, usaremos identificadores y solo en un punto asociaremos el valor al identificador. En caso de querer cambiar este valor, bastará con cambiarlo en el punto en el que hemos definido la variable y volver a lanzar la página para que LESS vuelva a recargar la hoja CSS.

Funciones Selectoras en jQuery

La función selectora de jQuery ($()) tiene diferentes comportamientos según el parámetro que reciba:

• Usando un selector como parámetro: $('.nombreClase');
• Si recibe código HTML, construye ese subárbol de nodos, aunque no lo enlaza en ninguna parte (debemos enlazarlo nosotros después): $('<p>Párrafo de ejemplo de jQuery</p>');
• Si recibe un objeto HTMLElement directamente del DOM, lo convierte en un objeto jQuery envolviéndolo (wrapping) y así poder usar con él métodos jQuery: $(document.body);

Inserción y Borrado en el DOM con jQuery

jQuery proporciona métodos para manipular el DOM:

• insertBefore(): Crea nuevos nodos antes de un elemento.
• insertAfter(): Similar a insertBefore(), pero inserta después.
• appendTo(): Seleccionamos la función selectora y luego el objeto del árbol al que queremos añadirle al final este subárbol.
• append(): Inverso a appendTo().
• prepend(): Añade al principio en lugar de al final.
• clone(): Copia el objeto sobre el que se ha invocado el método y todos sus descendientes.

Envolver Elementos con jQuery (Wrap y WrapAll)

jQuery ofrece funciones para envolver elementos:

• wrap(): Permite envolver a cada uno de los elementos seleccionados dentro de otro definido como parámetro. Ejemplo: $("p").wrap("<div>");
• wrapAll(): Agrupa todos los elementos seleccionados en una misma caja. Ejemplo: $("p").wrapAll("<div>");

Ambos sirven para modificar rápidamente código.

toggleClass en jQuery

addClass + removeClass = toggleClass: Añade una clase a un elemento si no la tiene y, con la misma instrucción, quita esa clase si ya la tenía adjudicada. Ejemplo: $("#caja").toggleClass("pulsada")

Atributos de Usabilidad

La usabilidad se puede evaluar a través de atributos:

1. Atributos cuantificables de forma objetiva:
   • Eficacia: Número de errores cometidos por el usuario durante la realización de una tarea.
   • Eficiencia: Tiempo empleado por el usuario para la consecución de una tarea.
2. Atributos cuantificables de forma subjetiva:
   • Satisfacción de uso: Medible a través de la interrogación al usuario.

WCAG (Web Content Accessibility Guidelines)

Las directivas WCAG (Web Content Accessibility Guidelines) se basan en los principios POUR:

• Perceptible:
  • Texto alternativo para contenido no textual.
  • Contenido multimedia dependiente del tiempo.
  • Adaptable para diferentes formas o formatos sin pérdida de información.
  • Distinguible entre diferentes categorías de información.
• Operable:
  • Poder controlar todas las funciones desde el teclado.
  • Proporcionar tiempo suficiente a los usuarios para leer y utilizar el contenido.
  • No diseñar contenido que pueda causar ataques epilépticos.
  • Proporcionar formas para ayudar a los usuarios a navegar.
• Comprensible:
  • El contenido es claro y se limita la confusión y la ambigüedad.
  • Hacer el contenido de texto legible y comprensible.
  • Hacer la apariencia y la forma de utilizar las páginas web previsibles.
  • Ofrecer ayuda a los usuarios para evitar y corregir errores.
• Robusto: Ligado a los conceptos de responsive, que sea lo más usable posible.