Sistemas de componentes UI

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.

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.

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

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.

La mejor forma que conozco para diseñar basado en componentes es usando storybook https://storybook.js.org/, altamente recomendado.

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í 😃

al menos en la ruta de desarrollo web, este curso esta mal ubicado

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?

Podrìan haber puesto antes el curso de react.

✨ Un sistema de componentes permiten modularizar la interfaz de usuario.

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.

Dejo mis apuntes, aunque para serles sincer@s no entendi muy bien este tema, pero bueno espero les sirva las notas 😃

Es una guía muy completa.Gracias.

Me encanto este curso ❤️ …!

Estare retocando el codigo miss ❤️

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!

¡¡Genial!! A darle!!

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

😊 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