SISTEMAS DE COMPONENTES UI
Una de las metodologías que podemos usar es separar la funcionalidad por componentes.
Un sistema de componentes es un conjunto de componentes que vamos a usar par crear nuestra aplicación. Esos componentes funcionan como una librería.
Puedes usar cualquier tecnología que prefieras. Lo importante es encapsular las funcionalidades en componentes. Cada componente tendrá su propio css y funcionalidad dentro de su propia función.
Así podremos importar esas características a cualquier pantalla de nuestra aplicación, reutilizando el código y haciendo más eficiente nuestra aplicación.
En la clase de Wireframe creamos unos bocetos de unos componentes, que luego dividimos en unidades de funcionalidad.
La idea es crear a partir del wireframe todos los componentes y funcionalidades, y después le añadimos la capa visual.
Introducción
Todo lo que aprenderás sobre diseño para programadores
Entender los Fundamentos del diseño
El proceso creativo
Conceptos básicos de diseño
Diseño responsivo
Accesibilidad y diseño
Brief y requerimientos técnicos
Aprender sobre Diseño Experiencia de usuario
Definición de diseño UX
Diagramas de flujo
Wireframes y componentes
Aprender sobre Diseño de interfaz de usuario
Definición de diseño UI
Moodboard y línea gráfica
Teoría del color
Paletas de color
Tipografía
Layout y sistemas de grillas
Sistemas de componentes UI
Themes y customizaciones
Imágenes para web
Gráficos en movimiento para web
Resultado final
Conclusiones
Conclusiones del curso
Mentoría Expert
Diseño para programadores
You don't have access to this class
Keep learning! Join and start boosting your career
If you already have an account,
How are component systems applied in web development?
The use of component systems is essential for the effective construction of applications or web pages. This methodology allows you to separate functionalities into small units, facilitating the management, reuse and maintenance of the code. Do you want to know more about how to implement this practice? Here we tell you about it.
What is a component system?
A component system is a set of modular blocks used to develop applications or web pages. These blocks, called components, work like a library and are encapsulated units of functionality. For example, a component can be a button with different styles. These are programmed to be reusable and customizable, optimizing development.
How is it implemented in React and other frameworks?
Although the most common example is React, this methodology is applicable to several frameworks and even to HTML and pure JavaScript. The key is to encapsulate functionalities in components. Thus, a button component or CTA, which includes specific CSS styles, can be imported from any screen of the application.
// Importing a CTA component into Reactimport CTA from './components/CTA';
// Using the component inside another componentfunction Hero() { return ( <div>
<CTA type="primary" label="Click me" />
<CTA type="secondary" label="Learn more" />
</div> );}The code shows the import and use of the CTA component, allowing to define types as primary, secondary or tertiary. Users can modify the label and type, making the component customizable.
Why is a style guide important?
A style guide ensures that components work independently and are not tied to any specific page, guaranteeing seamless integration into any part of the application. This is vital for the maintenance and scalability of the project, as it avoids breaking styles and functionality when moving components from one place to another.
How to separate functionalities by components?
The methodology starts from the wireframes phase, where sketches are created that will eventually become functional components. Once defined, we proceed to the visual layer. This approach facilitates the visualization of how the components work together to form the complete application.
What steps to follow?
- Create wireframes: Design sketches of the pages to identify necessary components such as product details or buttons.
- Convert into individual components: Develop those functionalities into isolated units.
- Add a visual layer: Add visual styles to components ensuring a consistent and attractive appearance.
- Customize and adjust: Test the integration of the components into the complete application, making adjustments as required.
We encourage you to explore this methodology and apply the component system in your projects. Not only will it empower your development, but it will also ensure that your application is robust and flexible. Go ahead, keep exploring and learning!
Contributions 57
Questions 13
No entiendo nada 😦, creo humildemente que este curso debería estar en una parte más avanzada de los cursos, o hacer uno mucho más básico para esta rama de “Fundamentos de Programación”, porque hay que considerar, que quien está siguiendo esa línea recién ha aprendido conceptos básicos de html y javascript y una pizca de css.
Ejemplos de componentes
- Botones
- Cards
- Banners
- Títulos
- Párrafos
- Menus
Para los que estamos siguiendo el path de Escuela de Desarrollo Web les dejo un concepto que no conocía y aquí lo mencionan:
Un Hero, o mejor dicho una Hero Image, es un término que se emplea en el campo del diseño web para referirse a un banner de gran tamaño que se coloca de manera visible en una página web, a menudo en la página de inicio donde ocupa gran parte del layout.
Los componentes deben estar en un Style Gate y es importante que funcionen por si mismos sin estar amarrados a ninguna página, esto nos garantiza que cuando queramos incluir un componente a nuestra aplicación esta no se va a romper.
yo estoy siguiendo el curso de fundamentos de la programacion y la verdad es que mucho no entiendo de esto, debo hacer un curso distinto? crei que se empezaba por fundamentos, nisiquiera se que lenguaje usa :C
La mejor forma que conozco para diseñar basado en componentes es usando storybook https://storybook.js.org/, altamente recomendado.
al menos en la ruta de desarrollo web, este curso esta mal ubicado
Pues estoy haciendo este curso mas que nada para tener una noción de los principios básicos de diseño, ya que como bien comentan algunos compañeros, aquí ocupan React y preprocesadores, cosa que no hemos visto muchos aún, así que véanlo como un curso introductorio y ya más adelante tendrá poco a poco más sentido, y de ahí con alguna duda vuelven aquí 😃
Podrìan haber puesto antes el curso de react.
Ni entendí nada.
no se que es esto $
ni esto :{}
ni esto ?
ni esto import
ni esto Icon icon
ni siquiera se como estructurar mi pagina web con las librerías que dejó, ¿como es que ustedes si?
✨ Un sistema de componentes permiten modularizar la interfaz de usuario.
Dejo mis apuntes, aunque para serles sincer@s no entendi muy bien este tema, pero bueno espero les sirva las notas 😃
Utilizar componentes nos permite mantener la consistencia en nuestro diseño y evitamos la repetición de código. Además nos facilita la implementación de cambios.
Creo que no se debería asumir que los estudiantes ya entienden y manejan el tema, y si se asume indicar donde consultar para no quedar perdido en clases como esta
Me surgió una duda. Un Style Guide es como un CSS que se aplica a todos los elementos? o cada componente va a tener su Style Guide propios???
Supongo que esto va muy de la mano con lo de Atomic Design. Basicamente desestructuramos nuestro producto por features y hacemos un inventario de todos los elementos y simplemente vamos arrastrándo todo.
Me parece una buena manera de diseñar cuando trabajas con una arquitectura por componentes como la de React.
Es una guía muy completa.Gracias.
Me encanto este curso ❤️ …!
Estare retocando el codigo miss ❤️
¡Entendido! Aquí tienes una mejora de la enumeración de componentes de la interfaz de usuario con algunas ideas adicionales:
Componentes de entrada y selección:
- Campo de texto: Permite ingresar texto.
- Área de texto: Espacio para ingresar texto extenso.
- Entrada numérica: Acepta valores numéricos.
- Barra de búsqueda: Facilita la búsqueda de contenido.
- Desplegable: Lista de opciones desplegable.
- Desplegable con auto-sugerencia: Ofrece sugerencias mientras escribes.
- Formulario: Recopila datos del usuario.
- Casilla de verificación: Permite seleccionar opciones múltiples.
- Botón de radio: Selección exclusiva entre opciones.
- Interruptor / Conmutador: Activa o desactiva una opción.
- Selector de fecha: Selecciona una fecha del calendario.
- Barra de rango: Permite seleccionar un valor dentro de un rango.
- Calendario: Muestra fechas y eventos.
- Selector de color: Elige un color de una paleta.
- Cargador de archivos: Sube archivos al sistema.
- Valoraciones: Permite calificar o evaluar.
Componentes de Navegación e Información:
- Enlaces: Conexiones a otras páginas.
- Pestañas: Organiza el contenido en secciones.
- Barra de navegación: Facilita la navegación entre páginas.
- Menú lateral: Navegación alternativa en forma de lista.
- Migas de pan: Muestra la ruta de navegación.
- Paginador: Navegación entre páginas de resultados.
- Etiquetas: Categorización o identificación de elementos.
- Guía de pasos: Indica el progreso en un proceso.
- Barra de progreso: Muestra el avance de una tarea.
Componentes de Notificación:
- Tooltip: Información emergente contextual.
- Toggletip: Alternativa interactiva a los tooltips.
- Notificaciones en línea: Mensajes informativos o de estado.
- Ventana emergente: Alertas o confirmaciones.
- Tostadas: Mensajes temporales en la parte superior o inferior de la pantalla.
- Insignia de notificación: Indica la presencia de nuevas notificaciones.
Componentes de Carga:
- Loaders: Indicadores visuales de carga.
- Skeleton / Shimmer: Muestra una representación visual del contenido mientras se carga.
- Pantallas de carga: Interfaces visuales durante el proceso de carga.
Componentes Organizadores de Contenido:
- Tarjeta: Agrupa contenido relacionado.
- Separador: Divide secciones o elementos.
- Acordeón: Organiza contenido plegable.
- Ver más: Despliega contenido oculto.
- Carousel / Slider: Muestra contenido en carrusel o deslizante.
- Tabla: Presenta datos en formato tabular.
- Baldosas: Muestra contenido en una disposición de mosaicos.
Componentes de Acción:
- Botones: Inicia acciones o procesos.
- Enlaces: Conduce a otras páginas o acciones.
- Lista de acciones: Enumera opciones de acciones disponibles.
Extras:
- Sin resultados: Mensaje cuando no se encuentra contenido.
- Error 404: Mensaje de página no encontrada.
- Error 500: Mensaje de error del servidor.
Sistema de componentes UI
Una de las metodologías que podemos usar es separar la funcionalidad por componentes, esto nos permitirá crear un sistema de componentes reutilizables.
Sistema de componentes
Un sistema de componentes es un conjunto de componentes que vamos a poder utilizar para generar nuestra aplicación, esos componentes funcionan como una librería.
Puedes emplear cualquier tecnología que prefieras. Lo importante es encapsular las funcionalidades en componentes. Cada componente tendrá su propio CSS y funcionalidad dentro de su propia función. Así podremos importar esas características a cualquier pantalla de nuestra aplicación, reutilizando el código y haciendo más eficiente nuestra aplicación.
Ejemplos de componentes
- Botones
- Cards
- Banners
- Títulos
- Párrafos
- Menús
Guía de estilos
Una guía de estilos es un conjunto de lineamientos y patrones de diseño que deben respetarse en todos los productos. Es un manual donde un determinado negocio define su identidad de marca, tanto verbal como corporativa y branding, colores que representa, tipografía, logos y demás elementos que ayudan a identificar su imagen ante los clientes
no entiendo absolutamente nada
Bueno, creo que me adelanté un poco en la línea de aprendizaje que llevo, tendré que reforzar un poco y luego regresar.
este curso esta mal ubicado dentro de la ruta de desarrollo web si bien entiendo html y css y sigo aprendinedo js no pueden hablar de react, cta y demas cuando el curso de introuccion a react esta al final de la escuela de javascript.
Componentes de la UI (Interfaz de Usuario)
La UI, principalmente presenta las posibilidades de interacción junto con el look & feel, o en otras palabras, el diseño visual. Esto quiere decir, que las decisiones de Arquitectura de Información, Diseño de Interacción y/o Diseño Visual se ven reflejadas aquí.
La arquitectura dicta la estructura y el esqueleto, además se piensa en cómo se comporta el sistema en respuesta al usuario y por último tiene una capa de colores, texturas y gráficos que lo hacen estético.
Los elementos que generalmente se presentan en una UI para un producto digital son:
Controles de Input: botones, campos de texto, checkboxes, radio buttons, listas drop down, switches, campos de fecha
Componentes de Navegación: breadcrumbs, sliders, formularios de búsqueda, paginación, sliders, tags, iconos
Componentes de Información: tooltips, iconos, barras de progreso, notificaciones, cajas de mensajes, modals,
Contenedores: acordeones
16.-Sistemas de componentes UI
Separar las funcionalidades por componentes, un sistema de componentes es un conjunto de componentes que usaremos para hacer una app, estos funcionan como una librería. Por ejemplo los botones son un solo componente pero con diferentes estilos. Todos los componentes funcionan por si mismos sin estar amarrados a una página, el tenerlos en un style guide nos garantiza que al momento de quererlos incluir en la app, no se va a romper porque ya tiene definidos todos sus estilos de una manera encapsulada.
16. Sistemas de componentes UI:
Lo importante es encapsular las funcionalidades en componentes. Definitivamente ver esta parte sin saber React es una locura (aún no aprendo React y todavía no decido si lo aprenderé). Fuera de ello, sí es interesante.
No se olviden revisar la sección de archivos de la clase para ver el enlace a la página de Material Design. En esa misma línea les comparto un video también de platzi, donde se profundiza un poco más sobre el tema. ¡Saludos!
Excelente Explicación!!
Genial!
Componentes de diseño UI
https://aprenderuxui.com/componentes-de-diseno-ui/aprender/uidesign/
¡¡Genial!! A darle!!
😊 Separar funcionalidad por componentes
Un sistema de componentes de User Interface (UI) es como una librería de funcionalidades gráficas que sumándolas integran secciones de la interfaz o producto digital. Ejemplos de componentes UI: botón, card, banner, carrousel, formulario, galería, menús, mapa de sitio, etc.
SISTEMA DE COMPONENTES UI
.
Una metodología importante de implementar al momento de construir una aplicación es separar las funcionalidades por componentes.
.
Un sistema de componentes es un grupo de componentes que se utilizan para construir una aplicación. Estos componentes funcionan como una librería.
.
Todos los componentes deberían incluirse a un style guide. Es importante que funcionen por si mismos sin estar vinculados a una pagina.
.
El tener los componentes en un style guide garantiza que en el momento en que se quieran incluir en cualquier parte de la aplicación no se va a romper debido a que tiene definidos todos los estilos de manera encapsulada.
.
Para separar por componente en la etapa de Wireframe se crean los bocetos que luego se convierten en unidades individuales de funcionalidad (detalle de producto, botones, barra de navegación, herró etc) y luego agregar la capa de diseño visual.
Parece que hay problemas con la versión, porque aunque se le da npm install en la carpeta 4app, y se instala despues el preprocesador parece que la version en el json-lock es old… y no deja hacer nada cuando se le da npm run start
La verdad no estoy entendidendo nada y estoy siguiendo la escuela hay un fallo con este curso esta como fuera de lugar deberia ir despues ya que muchas cosas no se pueden entender
ayudaaaa!!!
en la consola de node tire el repositorio para poderlo instalar pero a la hora de iniciarlo (npm start )me da este error
C:\Users\LOZANO\pagina>npm start
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path C:\Users\LOZANO\pagina\package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\LOZANO\pagina\package.json’
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\LOZANO\AppData\Roaming\npm-cache_logs\2020-09-28T18_05_00_834Z-debug.log
me pueden ayudar gracias
Este curso salto muy abruptamente de diseño a código con librerías, considero que por lo menos debió quedarse en css vanilla.
Un componente de software es una unidad modular de un programa software con interfaces y dependencias bien definidas que permiten ofertar o solicitar un conjunto de servicios o funcionales.
Seria chevere que enseñaran como hicieron todo el codigo en la creacion de los componentes
Soy nuevo en el tema de GitHub, apenas me registre, pero para clonar los archivos tengo que hacerlo uno por uno? o hay una opción para descargar toda la carpeta?
Hola, tengo una pregunta, el Style Guide está en el repositorio?
EN este instante ire a estudiar más sobre atomic design
De hecho lo estoy haciendo en plano.
no sabia sobre esa buena practica de styleGuide, ahora comenzare con eso antes de todo. =)
Ésto es como POO no?
Gracias platzi!!!
al abrir en index la pagina me sale en blanco, no se si a otros le pase lo mismo, o si lo estoy abriendo de una manera incorrecta
Excelente método de trabajo
Me encanta este tema del Styleguide. No lo había visto antes, y me parece super útil.
Gracias por el vídeo!
No me gusta que expliquen las cosas así por encima sin profundizar.
Este tema de los componentes empieza a cobrar sentido cuando comenzamos a trabajar con React, de verdad te hace un click en tu mente y comienzas a ver todos los diseños en componentes 😄
Incluso si no trabajas con React, ya aprendiste la habilidad de abstraer esos elementos en componentes y ver donde los puedes reutilizar para agilizar la produccion 😉
Les dejo un resumen de la definición de que es un Style Guide:
Es un documento que resume y describe los principios de una compañía y cómo deben aplicarse en el diseño y el desarrollo de las apps. Esta guía incluye:
Patrones
Estilos
Componentes
Colores
Tipografías
Want to see more contributions, questions and answers from the community?