No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Adquiere por un a帽o todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

0D
17H
8M
2S

Sistemas de componentes UI

16/22
Recursos

Aportes 55

Preguntas 13

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥淔undamentos 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

Creo que los recursos de esta clase est谩n mal organizados. intent茅 traerme el c贸digo a mi PC y jam谩s me funcion贸, copi茅 el HTML, CSS en incluso los JS y jam谩s me funcion贸 para hacer las pr谩cticas de 茅ste curso

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