Themes y customizaciones

Soy desarrollador backend y sé lo que es hacer un proyecto sin tener una idea clara del diseño y usabilidad de la aplicación **UNA PESADILLA **, pero también sé lo que es partir de una idea de diseño clara y luego a programar, un curso cómo este debería ser fundamental en cualquier tipo de estudios como desarrollador 😎.

THEMES Y CUSTOMIZACIONES
Otra herramienta que podemos hacer uso en nuestra aplicación son los themes.
¿Qué es un themes? Es una capa de color y estilos que se añade por encima de nuestra aplicación y nos permite tener distintas variaciones sin hacer cambios drásticos en nuestro código. En otras palabras, theme es un archivo donde tenemos configurado la presentación visual de toda la aplicación. Teniendo dos o más theme podremos tener dos o más presentaciones visuales.
Para hacer los themes fácilmente podemos hacerlo por medio de variables de css o variables de Sass. Las variables de Sass son más sencillas.
Para tener varios themes, se crean un archivo de css por cada theme, pudiéndose intercambiar una por otra desde una archivo donde se configuran todos los archivos importados, sin tener que cambiar toda la programación de la aplicación. Simplemente con cambiar el nombre de un archivo por otro se realiza el cambio de theme.

Creo que este curso debería explicarse con html, css y js puro y no con otras tecnologías, lo digo por la posición donde está en la ruta de aprendizaje, esto hace que muchos alumnos se pierdan en las clases y no sepan que es sass, react y terminen más confundidos!

Hola, llevo varias clases del curso y no me queda claro cómo hacer la página. Sáquenme de una duda: ¿Es necesario llevar ciertos cursos antes de tomar este?

Se programar de manera básica (con HTML, CSS y JS), pero creo que tuve que tomar otros cursos primero porque no sé usar REACT, SCSS y me está costando entender todos los archivos que tiene en el GITHUB del curso de Diseño para programadores.

Muchas Gracias

Creo realmente que este curso es realmente una buena base para el diseño pero realmente creo que el curso no esta ubicado correctamente en la ruta de aprendizaje.

Chicos, el material de este curso es mas que todo una guía para diseñar. He notado que muchos no han visto algunos conceptos de CSS que aquí mencionan y eso los puede confundir, pero no se desanimen. Mi recomendación es que antes le echen un vistazo al curso de desarrollo web on line de Leonidas Esteban o el de frontend developer de la escuela de javascript.
Eso les dará una base sólida, en lo personal pienso que el segundo que les mencioné profundiza más.
¡Exito!

¿Hay que tomar cursos previos para este? Porque estoy siguiendo la ruta de fundamentos… Y aún no sé programas websites y solo conozco lo básico de javascript. La profe habla de React, frameworks y librerías… ando perdido.

Ufff, esto te ahorra un montón de trabajo empezaré a aplicar esto en mis proyectos.

Excelente pero qué programas estas usando? no me queda claro. Gracias!

A aprender sass!!!

PARA TODOS LOS QUE LLEVAMOS LA RUTA DE FUNDAMENTOS DE PROGRAMACIÓN: El curso es muy bueno pero está mal ubicado. No porque esté en la ruta equivocada (fundamentos de programación) sino porque antes necesitaríamos algunos cursos más para aprender a usar Github, React, CSS y SCSS. Porque en los cursos anteriores no explican casi nada de CSS (sólo lo teórico). Yo no pude ni abrir el proyecto en Github 😦 Lo que voy a hacer (y se los recomiendo) es ver todas las clases y entender la teoría lo más que podamos, pasar el examen y seguir avanzando, que lo más probable es que las dudas se nos despejen en los próximos cursos.

Les dejo mis apuntes, espero les sirva 😃

Theme

• Capa de color y estilos
• Nos permite tener variaciones sin hacer cambios drasticos
• Dark / Light theme

💚 El tema Platzi, tiene personalidad.

17. Themes y costumizaciones

Pues aquí sí que podemos jugar con el código de SASS y ver qué pasa, muy difícil si no sabes nada de SASS, en mi caso sé una pizca pero suficiente para cambiar los colores 😃, igual el concepto va quedando.

Si aún no entiendes muchos conceptos de éste curso, te recomiendo que vayas al curso de Desarrollo Web Online con el buen Leonidas Esteban.

Uso basico de variables en CSS

Para declarar propiedades personalizadas (variables) usamos un nombre que comienze con dos guiones (–), y un valor que puede ser cualquier valor válido de CSS. Como cualquier otra propiedad, la escribimos dentro de un set de reglas de estilo, algo así:

elemento {
–main-bg-color: brown;
}
Copy to Clipboard
Ten en cuenta que el selector que usemos para las reglas de estilo define el ámbito (scope) en el que podremos usar la propiedad personalizada (variable). Una buena práctica común es declarar variables en la pseudo-clase :root, y así aplicarlas globalmente al documento HTML:

:root {
–main-bg-color: brown;
}
Copy to Clipboard
Sin embargo, esto no tiene por qué ser siempre así: podrían haber muy buenas razones para querer limitar el ámbito de tus propiedades personalizadas.

Nota: Los nombres de propiedades personalizadas son case sensitive (distinguen entre mayúsuculas y minúsculas) — --my-color será tratado como una propiedad personalizada distinta a --My-color.

Como mencionamos anteriormente, para acceder al valor de una propiedad personalizada usamos el nombre de la propiedad dentro de la función var(), en lugar de cualquier otro valor normal:

elemento {
background-color: var(–main-bg-color);
}

Creo que este curso no va en esta ruta, ya que tiene conceptos que realizando la ruta no aparcen, además usan tecnologías diferentes a lo visto anteriormente… no es que sea malo sino que muchos alumnos no ven clara la idea.

Una idea que he estado pensando aplicar en mis proyectos.

Me gusta la estructura que se usa en este proyecto, es muy practica y facil de hacer cambios

Genial!

¿Qué es un themes? Es una capa de color y estilos que se añade por encima de nuestra aplicación y nos permite tener distintas variaciones sin hacer cambios drásticos en nuestro código. En otras palabras, theme es un archivo donde tenemos configurado la presentación visual de toda la aplicación. Teniendo dos o más theme podremos tener dos o más presentaciones visuales.
Para hacer los themes fácilmente podemos hacerlo por medio de variables de css o variables de Sass. Las variables de Sass son más sencillas.
Para tener varios themes, se crean un archivo de css por cada theme, pudiéndose intercambiar una por otra desde una archivo donde se configuran todos los archivos importados, sin tener que cambiar toda la programación de la aplicación. Simplemente con cambiar el nombre de un archivo por otro se realiza el cambio de theme.

Aquí faltó un poco explicar cómo el proyecto en tiempo real cambiaría los estilos, y aquí está la respuesta.
En un componente o archivo de css main o principal, pasarle a un switch el tema seleccionado por el usuario o el default.
De esa manera, dependiendo el tema, retornará las clases de css a usar, dichas clases son las que definen los colores, y estas se les asignarán de manera dinámica a los elementos.
Es una idea, cada quien lo debe resolver a su manera.

Es interesante el comentario de la profesora, es más fácil aprender cuando tenemos los ejemplos sencillos en código.
Sencillo hubiera sido en html, css y javascript. Pero en react, pues no me parece sencillo.

Themes para cambios de estilos rápidos sin hacer cambios drásticos en la app ❤️

Hola amigos, aquí les dejo un proyecto que había hecho con el Dark mode y Light mode que explica la profesora en el principio. Es un proyecto sencillo pero ahí pueden ver de que se trata.

https://github.com/raycris/FAQ

El theme es una herramienta de diseño para desarrolladores que consiste en generar con tan solo el cambio de una o dos lineas de codigo cambios significativos en el diseño del color de elementos en nuestra aplicacion o webpage, se logra adicionando un archivo indejpendiente con caracteristicas de color opcionales a nuestro proyecto.

Gracias!! Esta clase sin duda me va a ayudar un demasiado.

sitio web android que dio de ejemplo

THEME
,
Un Theme es una capa de color y de estilos que se añade encima de la aplicación. Lo que permite tener variaciones de colores sin hacer cambios distritos al código.
,
El uso de variables de CSS y Sass permite añadir un Theme de colores a la aplicación.
,
Se pueden crear templetes de paginas que manejan diferentes estilos, colores, tipografías, fondos, iconos en capas diferentes.
,
Se pueden usar los mismos componentes pero se definen diferentes variables de CSS y Sass,
,
Usar Themes es muy útil para el equipo de pruebas ya que no tiene que hacer una regresión sobre todo el sitio sino fijarse en cambios cosméticos que se pueden automatizar.

Me habría gustado que el curso fuese más práctico.

Me hubiera gustado que fuera la clase en html y css porqe la verdad no he podido usar los recursos porque no entiendo

Themes: son capas de color y estilos que se añade por enzima de nuestra aplicación y nos permite tener distintas variaciones sin hacer cambios drásticos en nuestro código. customizaciones:

Para tener varios themes, se crean un archivo de css por cada theme, pudiéndose intercambiar una por otra desde una archivo donde se configuran todos los archivos importados, sin tener que cambiar toda la programación de la aplicación. Simplemente con cambiar el nombre de un archivo por otro se realiza el cambio de theme.

¿Qué es un themes? Es una capa de color y estilos que se añade por encima de nuestra aplicación y nos permite tener distintas variaciones sin hacer cambios drásticos en nuestro código. En otras palabras, theme es un archivo donde tenemos configurado la presentación visual de toda la aplicación. Teniendo dos o más theme podremos tener dos o más presentaciones visuales.
Para hacer los themes fácilmente podemos hacerlo por medio de variables de css o variables de Sass. Las variables de Sass son más sencillas.

Es un curso interesante que nos aproxima en gran medida al diseño y no estar tan perdidos al momento de programar y no saber nada de diseño.

Hola me encanto el curso, la chica muy bien. Pero siento que le falto algo al curso; ejemplo ahorita no tengo ni idea de como echar andar el proyecto para moverle y ver como cambia.

Es decir previo a esto debemos ya de saber React y preprocesadores.

Que genial !

esto es muy cool!!!

Themes y customizaciones
Los themes nos ayudan a cambiar la paleta de color de la app rápidamente. Especialmente útil para la negociación con el cliente al mostrarle la app con diferentes paletas de color

Yo hice algo parecido con mi web personal

me ha ayudado bastante este curso

Me encanto esta clase aprendí mucho 😄

muy buena base para diseñar nuestra web app.

Gracias platzi!!!

Cúal sería la mejor estrategia para aplicar el cambio de colores en tiempo real (un menú de opciones con los colores para escoger)? En este ejemplo se hace manualmente el cambio de variables, pero como sería en la vida real? Una clase general desde el body que identifique?

No me queda claro sobre lo que deberiamos leer

Muy muy buenas estas clases, me encantaron, felicidades a la profesora

Que genial !

Qué es un theme

Este curso no esta ubicado nada bien en esta ruta de aprendizaje. Empieza muy bien, pero se extiende a conceptos de CSS que no manejamos.

WOW! estoy nos ahorra muchas idas y vueltas con el cliente

apesar de las dificultades, porque yo si es que no se nada de programcion, logre desenredarme y ya pude descargar todo el repositorio, abrir la terminal y poder ver todos los archivos que va explicando Samanta, que chevere poder jugar con todo eso

jajaja no puedo ni abrir el ejemplo 😔

A seguir practicando

muy bien !!!

Para ver mejor los colores en Visual Studio Code, les recomiendo que descarguen una extensión llamada Color Highlight. Lo que hace es colorear el código hexadecimal para que pueda verse mejor qué color es el que se está declarando.