Diseño de componentes web
material design css only
Componentes webLos componentes web son un conjunto de diferentes tecnologías que permiten crear elementos personalizados reutilizables -con su funcionalidad encapsulada lejos del resto del código- y utilizarlos en tus aplicaciones web.Conceptos y usoComo desarrolladores, todos sabemos que reutilizar el código tanto como sea posible es una buena idea. Tradicionalmente, esto no ha sido tan fácil en el caso de las estructuras de marcado personalizadas: piensa en el complejo HTML (y en el estilo y el script asociados) que a veces has tenido que escribir para representar controles de interfaz de usuario personalizados, y en cómo su uso en múltiples ocasiones puede convertir tu página en un desastre si no tienes cuidado.
Web Components pretende resolver estos problemas: consta de tres tecnologías principales, que pueden utilizarse conjuntamente para crear elementos personalizados versátiles con funcionalidad encapsulada que pueden reutilizarse donde se quiera sin temor a colisiones de código.
iconos de material design
Los componentes web son una nueva característica del navegador que permite crear elementos HTML personalizados reutilizables -con su funcionalidad encapsulada lejos del resto del código- y utilizarlos en todos los proyectos.
Para simplificarlo aún más: son más o menos el equivalente nativo de los componentes react/angular/vue, pero independientes e intercambiables entre cualquier marco de trabajo utilizado. Llevan el enfoque del modelo de componentes al navegador.
Elementos personalizados: Con los elementos personalizados, los desarrolladores web pueden crear nuevas etiquetas HTML, reforzar las etiquetas HTML existentes o ampliar los componentes que otros desarrolladores han creado. La API es la base de los componentes web. Aporta una forma basada en estándares web para crear componentes reutilizables utilizando nada más que JS/HTML/CSS vainilla. El resultado es menos código, más modular y reutilizable, en nuestras aplicaciones.
Módulos HTML: Esta característica tiene un desarrollo más accidentado, y sigue siendo la menos estable de los componentes web. Después de algunas depreciaciones, la característica actual es una extensión del sistema de Módulos Script de ES6 para incluir Módulos HTML. Estos permitirán a los desarrolladores web empaquetar y acceder al contenido declarativo del script de una manera que permite una buena componentización y reutilización y se integra bien en la infraestructura existente de ES6 Modules.
material design css
Los sistemas de diseño adquieren mayor importancia a medida que las aplicaciones crecen en complejidad y en número. El código escalable, reutilizable y modular, junto con los activos visuales compatibles, son clave cuando las organizaciones construyen múltiples aplicaciones para diferentes propósitos, pero aún desean mantener un nivel de consistencia a través de sus UIs.
La implementación de un sistema de diseño para toda la empresa ayuda a garantizar la eficiencia y la coherencia necesarias para un desarrollo de aplicaciones web sin problemas. Sin embargo, crear y adoptar un sistema de diseño puede ser un reto. Este artículo explica por qué los Web Components basados en estándares son los bloques de construcción perfectos para un sistema de diseño estable que hace hincapié en la productividad, y cómo Vaadin utiliza los Web Components para construir la funcionalidad. Consulte la entrada anterior de nuestra serie de blogs sobre sistemas de diseño para obtener una introducción completa a los sistemas de diseño y al pensamiento que los sustenta. ¿Qué son los Web Components? Los Web Components son una tecnología basada en estándares para implementar bloques de construcción de interfaz de usuario reutilizables para compartir la funcionalidad a través de proyectos de desarrollo. Son independientes del marco de trabajo y pueden utilizarse prácticamente con cualquier marco de trabajo web o sin él. El estándar Web Components se basa en tres tecnologías:
ejemplo de sitio web con diseño de materiales
Con los componentes web, los desarrolladores tienen ahora la posibilidad de crear sus propios elementos HTML. En esta guía definitiva, aprenderás todo lo que necesitas saber. En esta página, cubriremos qué son exactamente los componentes web, los beneficios de usarlos y los elementos que los componen.
A continuación, aprenderás a crear tus propios componentes en dos breves tutoriales: en la página 2 aprenderás a crear un componente con las plantillas HTML y las API de shadowDOM, y en la página 3 irás un paso más allá y aprenderás a crear un elemento integrado personalizado.
Por último, en la página 4 encontrarás algunos frameworks y herramientas para empezar, así como ejemplos de elementos existentes para probar hoy. (Para más herramientas, consulta nuestro resumen de herramientas de diseño web y nuestra selección de los mejores creadores de sitios web).
A los desarrolladores les encantan los componentes. Son una forma estupenda de definir bloques de código que se pueden soltar y reutilizar en cualquier lugar donde se necesiten. A lo largo de los años, ha habido algunos intentos de transmitir esta idea en la web, con diferentes grados de éxito.