Componentes de HowTo
"HowTo: Components" es una colección de componentes web que implementan patrones comunes de IU. El propósito de estas implementaciones es ser un recurso educativo. Puedes leer la implementación de los distintos componentes densamente comentada y aprender de ellos. Ten en cuenta que NO son explícitamente una biblioteca de IU y NO deben usarse en producción.
Componentes
<howto-checkbox>: Representa una opción booleana de un formulario. El tipo de casilla de verificación más común es una de tipo doble que le permite al usuario alternar entre dos opciones: marcada y desmarcada.<howto-tabs>: Limita el contenido visible separándolo en varios paneles.<howto-tooltip>: Es una ventana emergente que muestra información relacionada con un elemento cuando este recibe el enfoque del teclado o el mouse se coloca sobre él.
Objetivos
Nuestro objetivo es demostrar las prácticas recomendadas para escribir componentes sólidos que sean accesibles, que tengan un buen rendimiento, que se puedan mantener y que sean fáciles de diseñar. Cada componente es completamente independiente, por lo que puede servir como implementación de referencia.
Accesibilidad
Los componentes siguen de cerca las Prácticas de creación de ARIA WAI, que es una guía para explicar y mostrar ARIA, el estándar de aplicación de Internet enriquecida accesible. Si no conoces ARIA, consulta nuestra introducción en WebFundamentals. Cada componente se vincula a la sección correspondiente de las Prácticas de creación. Si bien no es estrictamente necesario, te recomendamos que leas la sección de las prácticas de creación antes de sumergirte en el código.
Rendimiento
En el desarrollo web, el término "rendimiento" se puede aplicar a muchos elementos. En el contexto de <howto>, el rendimiento se refiere principalmente a animaciones que se ejecutan de manera coherente a 60 FPS, incluso en dispositivos móviles.
Flexibilidad visual
En la medida de lo posible, no se aplica diseño a los componentes, excepto por el diseño o para indicar un estado seleccionado o activo. Esto es para mantener la implementación visualmente flexible y enfocada. Al no dedicar tiempo a la decoración, limitamos el código solo a lo que es absolutamente necesario para que el componente funcione. Si se requiere algún diseño para que el componente funcione, el diseño se marcará con un comentario que explique el motivo.
Código que se puede mantener
Como HowTo: Components es una implementación de referencia, dedicamos más tiempo a escribir código legible y comprensible que tiene muchos comentarios.
No objetivos
Ser una biblioteca, marco de trabajo o kit de herramientas
Los componentes de <howto> no se publican en npm, Bower ni ninguna otra plataforma porque no están destinados a usarse en producción. En aras de la creación de un código conciso y legible, usamos APIs modernas de JavaScript y admitimos navegadores modernos que implementan los estándares de componentes web. Podrás adaptar el código a tus propias necesidades después de leer estas implementaciones.
Ser retrocompatible
No se debe depender directamente del código. Podríamos, y muy probablemente lo hagamos, cambiar drásticamente la implementación y la API de cualquier elemento si se descubre una mejor implementación. Este es un recurso interactivo en el que podemos compartir, explorar y debatir prácticas recomendadas para crear IUs.
Estar completo
En este momento, no implementamos (y probablemente no) *todos *los componentes que se pueden encontrar en las prácticas de creación de ARIA para WAI. Sin embargo, reutilizar los principios utilizados en otros componentes de <howto> debería permitir que los lectores implementen cualquier componente que falte.