Muy buenas a todos.
Y bienvenidos una semana más a negocios y wires episodio 219
muy buenas que tal como estáis.
Yo soy yanni que me conoceréis de la máquina de brandy com de mi
canal de youtube y de mi página web.
Y al otro lado, normalmente solemos tener Elías Gómez, pero esta semana, pues va a
faltar, va a faltar porque el chaval está un poco enfermo, ya sabes, estos días,
estas épocas navideñas y de invierno.
Pues pasan estas cosas.
Así que lo tenemos un poco malito vale, así que, bueno, voy a intentar llevar yo
hoy un poquito el episodio me apetecía hablar de de la parte un poquito.
Bueno que estoy investigando últimamente de como es la mejor forma.
De trabajar no de con ese editor.
Bueno, con ese Bill nativo que tenemos dentro de wordpress, que es el el
site editor, el editor del sitio.
Pero mezclar un poquito el tema de los framework CSS, no,
yo creo que es interesante.
Tenemos herramientas interesantes y Elías nos iba a traer algunas noticias
muy interesantes, pero bueno, en vez de, en lugar de hacerlas, yo prefiero
dejárselo a él para que en el siguiente episodio nos lo explique todo.
Pues, como pues, bueno, como tiene que ser, no que sale un poquito el que
el que quería tras nuestras noticias.
Así que, bueno, yo creo que en el episodio de vamos a hablar un poquito
de todo esto que digo de los frameworks.
Y luego, pues, bueno, si nos sobra un poquito de tiempo, porque como
hemos estoy yo solo, pues igual no sobra un poquito de tiempo.
Pues oye, pues cualquier consulta que tengáis, cualquier cosita que
queréis comentar o que charlemos aquí un ratito en directo.
Pues, pues perfecto.
Vale.
Así que bueno, sin más voy a, bueno siis algunos, veo que está conectando
si ya un poquito a la gente y y nada.
Oye, voy a empezar un poquito a hablar acerca de todo esto de los FR CSS que
me parece algo bastante interesante.
De hecho, hace poquito teníamos Elías y yo, bueno, conversaciones
acerca de bueno, de elegir una metodología de trabajo, no al final
a la hora de realizar una página web.
No es que haya una sola metodología, ya lo sabéis.
Y y a veces cuesta, sobre todo cuando cuando conoces muchas te
cuesta elegir cuál es la buena.
No piensas que que bueno, que determinados temas que tienen ciertas opciones en
teoría, van a suplir bueno, pues todas las carencias que puedes tener con una
cosa, un tema demasiado básico y que te va a permitir pues, bueno, toda la versad
deidad que que debería tener pero luego al final acaba siendo de otra manera.
Así que hoy vamos a hablar acerca de todo esto.
Vamos a ver qué opciones hay disponibles.
Ahora mismo para trabajar con todo esto.
Vale, voy a compartir dos pantallas y, y bueno, voy a ir comentando.
Pues primero voy a hacer una pequeña introducción acerca de los frameworks
cs para que no sepa lo que es.
Y y después, ya pues entramos un poquito en en materia.
Vale, bueno, como introducción, yo diría que un, ese bueno primero, no
sé si debo ir un poquito más atrás para el que todavía no lo conozca.
Pero eh, cuando hacemos páginas web, tenemos, ya sabéis, un lenguaje que es
el html donde tenemos, pues un poquito, pues los elementos que se ven en la página
web, por así decir, y luego la parte del estilo, como se ven esos elementos.
Pues vine gestionado por bueno, pues unas hojas de estilo, unos archivos
ts, un lenguaje que nos permite declarar pues, como se ven esos
elementos que están hechos en htl.
De manera que si tú tienes, por ejemplo, pues un elemento en h n, h, uno, que es
un título, por ejemplo, pues tú en h, tienes eso, vale, aquí sale un título.
Pero en la hoja de estilos, tu defines como se ven después decir oye, los h
i van a tener pues, este color o este tamaño okey dentro de este mundo del CSS.
Además de poder dar estilo a elementos concretos a lectores
de etiquetas htl también podemos crear nuestros propios lectores.
Vale?
Una especie de bueno de alias de nombres que podemos ponerles a las
cosas para luego referirnos a ellas.
Okey, yo puedo crearme un elemento pues, con cierta complejidad y darle un nombre,
por ejemplo, llamarlo tarjeta ok, y ese nombre que vine a ser una clase yo ese
le puedo dar ciertas propiedades después.
Vale, entonces yo le digo oye, cada vez que tenga un elemento
que se llame tarjeta, pues le puedo dar cierto dos estilos.
Bien.
Una vez que tenemos un poquito ese concepto en mente, de qué manera se
puede trabajar todo esto del estilo?
Bueno, pues la bandera tradicional es bueno, pues directamente hacer todos
nuestros estilos en nuestras hojas de estilo declarando, pues, bueno, por reglas
de estilo para los para etiquetas para las clases que nosotros creamos, etcétera.
Pero con el tiempo han surgido herramientas que, bueno, intentan
facilitar un poquito toda esta tarea, habiendo definido ya una
serie de estilos predefinidos.
Vale, quiere decir, si tú siempre vas a tener un elemento de tu web que es botón
o botón principal o botón secundario.
Vale, pues hay ciertas personas que han pensado hoy vamos a crear una especie
de de de listado de estilos y de clases para que, bueno, pues sea más sencillo,
utilizamos siempre el mismo lenguaje, el mismo nombre de clases y demás.
Y aquí vienen.
Estoy resumiendo lo mucho, vale, para hacer una introducción.
Y aquí viene todo el tema de los frw tees.
Vale.
Actualmente voy a compartir un poquito a pantalla, eh?
Papá?
Papá, a ver, voy a compartir que p te comparto, eh?
Está de aquí.
Vamos a ver si soy capaz.
Aquí están actualmente los bueno, los dos más famosos que tenemos
son, por un lado bootstrap, ok?
Y por otro lado tewin vale la diferencia entre estos dos, los
dos se tocan en muchos puntos, no?
Pero la diferencia principal o el enfoque el enfoque principal en cada uno
de ellos es que mientras en bootstrap todo está muy pensado o más pensado
para tener componentes completos, es decir, por ejemplo, pues eso un botón.
Y dentro de esa clase de botón de ese componente, vamos a tener estilos
acerca del color del tamaño del borde.
Rayos, todos está metido, digamos, dentro de ese mismo componente en twin se
trabaja más bien por clases de utilidad.
Ok, repito, los dos van a tener tanto componentes como clase de utilidad.
Vale?
Pero el enfoque es distinto, no?
El bus trap está más pensado para las clases tipo
componentes completos y talwin.
Digamos que tiene una muy amplia, vale, muy amplia.
Lista de clases de utilidad, eh?
Para que podamos, digamos, personalizar muy bien el estilo de cada elemento.
Ponga un ejemplo todavía más, eh?
Yo creo que se va a entender mejor un botón para que diferens entre
componente y clase de utilidad.
Un botón, por ejemplo, como componente, podría tener una clase llamado
botón primari primario, por ejemplo, simplemente botón primario y la
clase botón primario podría tener, por ejemplo, back gran un color.
Rojo color del texto blanco borde radios.
No se que font wait o peso de la fuente 900.
Vale, todos esos estilos nos tiene directamente la clase botón primario.
Sin embargo, el talwin lo que vamos a ver es más algo así como que el elemento
del botón tiene un montón de clases.
Vale, la clase texto pequeño, la clase, eh, borde redondeado.
La clase fondo primario, okey, lo maneja todo con pequeñas clases, okey, eh?
Y cada una hace referencia a una serie de propiedades.
Vale, estoy como, digo, resumiéndolo bastante para que la gente pues, bueno,
pues que no sabe un poquito de que hablamos para que vaya entendiendo.
Vale, entonces, a día de hoy, tenemos estas dos opciones y a la
hora de trabajar, evidentemente, desde una web desde cero a código,
pues no tenemos ningún problema.
Podemos implementar cualquiera de las dos.
Otra de las cosas importantes que tengo que decir acerca de los frameworks.
Es que utilizan, eh, ciertas, así como decirlo en palabras
sencilla, cierta tecnología, vale.
No selo así cierta tecnología de preprocesado del estilo de manera
que luego tú, cuando estás viendo la web solamente, digamos que se cargan
aquellos estilos que se están utilizando.
Vale?
Una especie de preproceso, etcétera.
Vale, es otra característica que no, no todos son las clases.
Vale, tiene otras cuestiones interesantes, pero bueno, en definitiva, cómo trabajamos
con esto a la hora de utilizar wordpress?
Bueno, eh, a día de hoy, eh, la prim lo lo primero.
Digamos que podríamos hacer lo más básico.
Quizá para mí estaría dentro del uso de algún tema que ya implementé.
Pues, su propio sistema ya integrado, no su propio framework.
Por ejemplo, tenemos but cor, este tema implementa haya directamente
bus para que lo puedas utilizar.
Okey, eh?
Y bueno, y al mismo tiempo, pues trae también algunas funciones.
Vale, estas digamos si alguien le gusta bus o le gusta este tipo de bueno de
framework, pues la realmente utilizar este tema sería bastante adecuado.
Okey, eh?
Tengo que decir que a mí a nivel personal, pues a mí me se gustara un poco más, eh?
O bien un framework más tipo talwin o bien incluso crearme mi propio framework,
no que luego lo vamos a ver también con core framework, que es otro concepto no un
poco más, porque al final bus te va a dar.
Y ya os digo una lista muy grande de componentes.
Vamos a verlo por aquí.
Comparte un poquito pantalla, decíamos en su documentación.
Pues podemos ver aquí.
Pues, por ejemplo, pues tiene un comp, eh?
Muchos componentes no?
Pues, para alertas acordeones.
Vale, entonces es como que directamente con un par de clases, tú ya tienes un
elemento con cierto diseño y para hacer una implementación rápida y un despliegue.
Pues eso para un una primera fase de un proyecto o lo que sea, está súper bien.
Bueno, primera fase a ver que puedes hacer una web.
De puta madre con esto, eh?
Y ya está.
Pero bueno, si a ti lo que te interesa es un poquito más, eh?
La personalización un poco más habida a medida, vas a tener un poquito más de
de versatilidad al utilizar tewin vale, o cosa así holand and Andrés saludó.
Así que bueno, en ese caso, pues esto voy a compartir.
No sé si está viendo.
He dicho que compartía pantalla, pero no se está viendo nada.
Vale, así que como soy nuevo, así estando solo pasan estas cosas.
Ya está.
Ahora estoy compartiendo bien yanni.
Vale, estaba por aquí viendo la página de bus.
Vale, donde se puede ver aquí?
Pues, bueno, la documentación.
Pues todos los tipos de elementos no de componentes que ya tenemos preparados.
Vale.
Por otro lado, tenemos, eh talwin que como os digo, lo que trae de manera bueno,
pues, por así decir, es nativa, pues es un listado enorme de clases de utilidad.
Voy a buscarlas para que lo veas.
Hay varias guías por ahí, eh?
Por ejemplo, bueno, si esta misma.
Para que entendáis en delwin ya no es el enfoque.
Ya no es tanto tener una clase de acordeón, no, sino que tu elemento
acordeón va a tener un montón de clases.
Vale, fíjate que hay clases diferentes para los colores para
los bordes, em, para, pues, todo el display, el tipo de expliqué.
Quieres que si quieres que sea flex, que si columnas que el gris, o sea la
altura del texto, alfonsa los márgenes.
Fíjate, todo esto son estoy mostrando ahora en pantalla, eh?
Un montón de clases diferentes para los márgenes margen cero, margen
uno, margen dos, margen tres y luego margen boton, o sea, mv 12.
Eso significa margen boton 12 margen boton dieciseis.
Es decir, cada cada variación de estilo tiene su propia clase al final, el
resultado con twin que vais a tener elementos con un monton azo de clases.
Vale, un botón igual tiene nueve clases.
Vale, para que me entiendas un poquito el estilo o el rollte que lleva a twin vale.
Y comentaba que este tema but pues puede ser una buena opción
para implementar, eh, bus.
Vale, qué pasa con eh?
Bueno, pues con otras otras opciones, no hay otras opciones con otro
tipo de de formas de trabajar.
Temas un poquito más medida, medida.
Bueno, eh?
Hace poco como comentaba yo, que existe un tema del que tens una versión gratuita
que se llama green shift, que también lo estoy mostrando la en pantalla, eh?
Como digo, tenéis una versión gratuita de este tema y es interesante porque,
bueno, de hecho lo voy a instalar aquí.
Vale, lo voy a poner aquí para que lo veis todos.
Voy a activarlo.
Lo tengo por aquí.
Y es un tema, eh, que bueno, por un lado, nos pide instalar un
plugin llamado cor green shift.
Por qué nos pide este plugin?
Bueno, pues, porque este plugin, lo que va a hacer es meter bloques, vale?
Para el editor del sitio que nos permita.
Bueno, pues jugar un poquito más, no llegar un poquito más lejos.
Que lo que viene nativa, no, eh, pero como os digo, este este
tema tiene cositas interesantes.
Por ejemplo, no hay más que ver las opciones del libro de estilos
para que veáis que este tema nos va a permitir ya de memento, eh?
Definir etiquetas globales, es decir, de de estilos globales, es
decir, como se ven nuestros títulos, encabezados, el texto del body, los
botones, vale, entonces, tipo de cosas.
Tenemos la posibilidad de crear aquí nuestros colores, nuestra
paleta de colores con con variables, incluso degradados.
Tenemos la posibilidad de crear nuestras propias variables.
Yo ahora, por ejemplo, estoy mostrando en pantalla como me he creado una variable
llamado space x l donde, bueno, entonces puedes hacer una lista de variables.
Espacio m espacio l, espacio x l.
Por ejemplo, no son tres tipos de espaciado y luego los puedes.
Rehusar eso así no tenemos que andar siempre pensando cuánto espacio le pongo?
Bueno, ya he definido anteriormente estas tres variables y es lo que
puedo usar yo luego en márgenes, padding, o sea, relleno gap, no?
Bueno, cualquier propiedad no.
Entonces fijados como este tema directamente ya nos
permite crear variables.
Okey, está todo esto integrado dentro del tema y por supuesto, clases, vale,
podemos crear nuestras propias clases, eh?
Ya más de tipo de diferentes tipos para que luego se salga todo
en el editor del sitio y demás.
Vale, así que, bueno, esto es una opción bastante, bastante interesante para que
ya no te digo de implementar un framework, pero bueno para aquel que empieza y
empieza y viene sobretodo yo creo que aquellas personas que ven un poquito más
del mundo del código y llegan a wre y llegan, pero bueno, pero aquí que pasa
como meto yo, mis clases, mis historias.
Bueno, pues este tema te va a permitir tener un poquito más de control.
Vale, cuando utis el editor del sitio, vale.
Bueno, qué pasa si utilizamos otro tipo de sistemas?
No?
Eh?
Por ejemplo, Builders como bris o bueno elemento o incluso que pasa si hacemos
nuestro propio tema personalizado, no va.
Hay diferentes casos que vamos a ir repasando por aquí, por
cierto vez en cuando me vuelvo aquí, a que pasarías que tal tío.
A ver si te recuperas.
Está todo el mundo malo, eh?
No solo tú.
Yo tengo un cumple.
Tengo, tengo mi cumpleaños.
Vale, que es el 30, aunque lo voy a celebrar el 28 con amigos y hay un parque.
Están, vamos intentando recuperarse.
Están jodidos.
Así que bueno, a ver si te recuperas, tío.
Eh, qué iba a decir yo eso sí, vamos a ver otras Offices que hay por ahí.
Vale.
Por ejemplo, también tenemos la posibilidad de trabajar con eh
desarrollos a medida, no el típico tema que nos hacemos desde cero, como
puede ser el and and cors y demás.
Donde tú te diseñas tus plantillas en p p.
Vale, para ese tipo de personas.
Pues, por ejemplo, tenemos ander cors más bus trap.
Vale, es and strap, eh?
Tenemos también la versión talwin, por ejemplo.
Vale ander tw que no lo tengo para aquí abierto, pero por aquí estará
como su no se como lo quiero buscar.
Es guion bajo t.
Creo que lo voy a encontrar antes.
Así si aquí está and cors t, que al final es tu propio tema, es
de cero para trabajar con talwin.
Ok.
Que para lo que es un desarrollador más puro, estas opciones son buenas para él.
Y luego tendríamos cositas modernas, cositas modernas que año, año
saliendo y que a mi me gustan mucho y que yo creo que este además, lo
dije el otro día en el especial este que hice mi canal de navidad.
Y yo creo que son dos cositas que voy a tocar este año porque yo creo que son
más fáciles de entrada, no para gente que que se va metiendo en el mundo.
Día, no que tenemos.
Tenemos win press, win pres es una opción muy interesante.
Lo voy a instalar, también lo voy.
Voy a hacer una pequeña demostración para que ve esta en cómo funcionar.
Win pres nos permite directamente a través de un plaque lo instalas en tu
gops y ya podés trabajar con este free.
Puedes trabajar con twin y además, lo bueno de esto, chavales.
Es que es compatible con todo.
Quiero decir, eh, da igual que tu web sea de Briggs que sea bueno.
A ver si queréis el lado para brix es de pago.
Como estoy viendo aquí, hay versión gratis y versión de pago, vale?
En versión gratuita, tendríamos, por ejemplo, para trabajar con green shift.
El tema que se acabo de comentar con generat press, okey, con Gutenberg
directamente, cualquier tema de editor del sitio con caden vale, con todos
estas cositas, en principio lo van a hacer gratuito, incluso con elementos,
aunque todavía en esto lo pueden aquí ya, pero está en todavía en desarrollo.
Vale, eh?
Pero por ejemplo, pues para Briggs lo tendríamos la versión pro.
Pero, bueno es, es cuestión de que de que lo de que veáis si os
interesa o no, cómo funciona esto?
Pues fija que es de forma tan sencilla.
Vamos a hacer esto.
Vamos a ir a esta página que tenía yo aquí.
Voy a activar un tema en blanco.
Eh, para mí un tema blanco, por ejemplo, para simplemente
para usar el editor de sitio.
Un interesante es blog base.
Es el tema más limpio que conozco a la hora de hacer un tema de con la
editor del sitio desde automática.
Además, entonces vamos a activar ese tema.
Voy ya a des se activar el green shift para que no haya ningún problema.
Y tal no tengo nada más.
Y ahora vamos a instalarnos la versión gratuita de win pres.
Vale, lo vamos buscar buscar aquí en el repositorio win pres.
Vamos a instalarlo
y en un momentito, vamos a tener bueno, pues la posibilidad de diseñar.
Vamos a ver
vale, instalado.
Tenemos aquí un panel que pone wire donde vamos a acceder a una serie de ajustes
importante para que no casque, eh?
O recomienda utilizar la versión de twin que no sea beta.
Vale.
Así que por lo que sea, ponemos esta primera, okey, aquí vamos a poder,
eh, gestionar varios ajustes, eh?
Cómo queremos que se genere la cache?
Bueno, cosas más avanzadas.
Ya se he dicho que los eh, una de las cosas importantes de los f no es solo
como es la gestión de esas clases y estilos y los nombres que les da o si
usa con puentes o con puentes so de utilidad, sino que encima va a cargar
solo aquel ces que se este utilizando, no?
Y para eso hay varios métodos y demás.
Así que perdón, tendríamos también la posibilidad de gestionar todo eso desde
este wires vale, está muy bien montado y fijos, como aquí abajo, tenemos la
posibilidad de hacer integraciones con diferentes cosas, okey, de manera
gratuita, como os digo, podemos integrar.
Eh con cosas como Gutenberg que yo lo tengo ahora mismo.
Activado.
Cadence green shift, el tema que se he comentado antes, Elementor, aunque
ellos digo que no va a funcionar porque todavía están en desarrollo.
Que no sé porque lo ponn aquí.
Y luego, bueno, le hay cambas o timber yo ahora mismo lo
tengo puesto para Gutenberg.
Okey?
Vale, entonces vamos a ver cómo funcionaría esto como sería más o menos
no una persona que quiere diseñar con el editor del sitio, pero quiere utilizar
algo de estilo un poco más avanzado.
Bueno, pues vendríamos aquí vamos a hacer la prueba.
Apariencia editor, eh?
Vamos a diseñarnos.
Por ejemplo, la plantilla de algo.
Vale, podríamos crear la plantilla, eh?
Tengo aquí.
De hecho una empezada.
Voy a al eliminarla y la voy a crear, o, bueno, si me da igual a
borrarla y así la creamos de, bueno, no está pante vacía, pero bueno,
vamos a añadir una nueva plantilla.
Aquí vamos a poder elegir.
Ya lo sabéis.
Pues yo si quiero en este caso, no?
Pues quiero hacer la single de mi post type servicio.
Entonces el hijo aquí, elemento individual, servicio el dijo que quiero
para todos los servicios y ya estaríamos empezando a diseñar este este elemento.
Vale.
Hola.
Ni lab,
eh?
Voy a, bueno, voy a, voy a coger.
Sí, voy a coger esta de ejemplo para tener algo, aunque sea en pantalla,
vale fijos como ahora aquí a la derecha.
Veis cómo tenemos este panel de wires esto que significa, bueno,
pues que yo puedo coger un elemento.
Por ejemplo, vamos a coger este este grupo que es donde está metido el título
y como ve ya una clase pudo meterle aquí.
Eh?
Pues yo que sé un no sé un padding, por ejemplo, le puedo decir pues,
padding 12 o margen, lo que sea.
Y entonces todas estas cosas.
O sea a refrescar que normalmente se visualiza en tiempo real en el editor.
Vale,
solo que ahora mismo.
Pues, no sé por qué no está cargando del todo.
A decir, le cuesta un poco padding a ver si carga o a ver si hecho yo algo.
Un segundo es un segundo que quiero ver
si he elegido bien.
Ah, es que estoy en la veta fijas.
Mira, es que no sé por qué me ponía, ponía aveta aquí iguales.
Por eso, eh?
Vamos a ver si puedo volver a guardar.
Es que el otro día estuve probándolo.
Y si utilizas la cuatro cero, eh, daba fallito, eh, a la hora de
previs visualizar en el en editor del sitio y cuando usa la normal, no?
Así que yo entiendo que será que será por eso volver a generar la cache.
Pues acaso vamos a ver si.
Y vamos a ver si ahora consigo que esto se carga en tiempo real.
Bueno, sino da igual, os lo enseñe.
Igualmente.
No, pero bueno, aquí lo importante es, es sobre todo, es eso que tú vas a tener?
Aparece que ya está encargando los estilos.
Eso es, es que lo de la veta.
No sé.
Entonces, como veis aquí, yo puedo ir ya diseñando, eh?
De una manera.
Pues, bueno, pues mucho más, mucho más, mucho más sencilla.
Veis ahora si se previs yo puedo elegir aquí.
Puedo elegir.
Pues padding no se cuanto.
Entonces ves como puedes ir eligiendo de tus clases.
Esto evidentemente, para que sepa el win.
Pues eligiendo tus elementos, el título.
Pues lo quiero de mi color primario, eh?
Bueno, pues elige dentro de tus de tus, eh colores o o el
fondo que es vej fijas aquí.
Como tengo mis variables de color.
Vale, como van cambiando en tiempo real.
Vale, el f seis que tenemos con text.
Vale, text dos de se qui x.
Le veis?
Y así podríamos ir diseñando todo una vez que diseñamos la single.
Bueno, pues ya sabemos cómo va la historia.
No me voy a los servicios.
Y en teoría, pues me voy a ver diseño web.
Y si Dios quiere, ahí está.
Vale, ahí está.
Vale.
Y veis cómo?
Pues, estoy utilizando mis clases.
Bueno, esta es una forma sobre todo para aquel que quiera utilizar te
elwin, pues, de integrarlo fácilmente.
Y repito que además lo bueno es que no es solo para el editor del sitio,
sino que vais a poder jugar con ose.
Tiene integración propia, no para generat press para para bris, no?
Así que es bastante interesante, eh?
Lo malo a ver lo malo no es malo, pero es importante que que le tengáis en cuenta.
Si que meter en este mundillo de utilizar es tu cualquier framework c.
Ese voy a hacer aquí la aclaración.
Yo lo daría por hecho, pero hay gente que no que no lo hace.
Primero tienes que aprender c, ese.
Ok.
Y luego, pues, aprendes a usar un un framework.
Lo digo porque hay mucha gente que directamente se ponen a intentar, bueno,
y lo consigue y aprenden a utilizar f tres, ese sin haber aprendido ese primero.
Pero claro, luego no sabes internamente que es lo que está
haciendo, porque aquí hay una clase que se llama eh, por ejemplo.
Pues eso run de se y bueno, pues aprenden que run de se le hace los
bordes redondeados, pero no saben que eso proviene de una propiedad
llamada borde radio, etcétera.
Así que, bueno, es aquí dejo mi recomendación para que primero aprend
de ese, aunque sea un curso básico como que tengo yo en mi academia, es
bastante básico, pero bueno, ya te da unas bases y luego ya a aprendes un fing.
Vale, bueno.
Y lo segundo que iba a decir acerca de twin es que lo malo también entre
coms es que lo tienes que aprender.
Pero bueno, el general, todos los framework vale, o te tienes que
aprender esto, tienes que aprender que el margen es m guion y luego que
puede ser mv para margin bottom m para.
Right top bottom incluso top bottom, vale o bueno, en este caso, x se es que es
el problema que hay varios frameworks.
Y hay algunos que, por ejemplo, en me debe utilizar para el
margen izquierdo y derecho.
Pues ponen margin l r, por ejemplo, left right, pero este, por ejemplo, usa x.
Imagínate o cosas así.
Vale, entonces es m.
X significa el mar, el Martín en el x de todo el x.
Y es así tewin entonces tiene una parte buena y la parte mala, la
parte buena es que que lo aprendes.
Pues bueno, es un sistema ya como así decir, estandarizado los proyectos
que te van a venir, este tipo, pues lo vas a entender y ya está.
Vale.
Y cualquier cosa que busques, pues vas a encontrar la solución de
cómo hacerlo porque los nombres son los nombres que tiene lo malo.
Pues te lo dice que aprender vale muy buenas que pasa Víctor.
Así que, bueno, esa sería opción para para utilizar twin y luego
tendríamos también otras opciones, como por ejemplo, cor framework vale.
Con f también me parece una herramienta muy interesante y quizá mmm casi
mejor a la hora de aprender por qué?
Porque en cierto modo te obliga un poco, entre comillas a a a definir
tú las cosas como las quieres.
Okey, puedes utilizar ya algo que ya vine prestablecido, pero pero tienes
ramas para que te lo lo hagas tú mismo.
Vale, entonces creo que didácticamente ayuda más a no ser que ya seas un
pro del CSS y de talwin y y decides utilizar talwin y ya está, no.
Pero ahora de aprender, yo creo que es más educativo, por así decir,
aprender algo como cor framework porque te ayuda a entender de donde
vienen esas variables y esas clases porque básicamente las puedes crear tu.
Es decir, eres tú el que te creas las clases y es otro concepto,
nos fija que sea mejor ni peor.
Vale, está genial o gusta.
Y esto es otro concepto en el que en lugar de tener.
Pues, todas estas clases que hemos dicho antes, no todas estas que est, viendo
aquí en pantalla de pues, todas las variaciones de margen de no se que no
se cuál disponibles tu directamente.
Pues te creas las que vas a usar.
Vale, pues igual me creo 10 tamaños de texto.
Ocho tipos de márgenes, no, no, no, 45, ocho.
Vale.
O los que sean los que tú quieras, okey.
Y es al fin al cabo, es como crearte tu propio framework.
Vale.
Cómo funciona cor framework?
Bueno, pues cor framework lo bueno que tiene también es que, de forma
gratuita, esto me está gustando mucho de muchos planes que últimamente, de
forma gratuita, va a estar disponible también para el editor del sitio.
Es decir, para utilizar páginas web simplemente con
Gutenberg edito el sitio, eh?
Y bueno, cuando pagas es cuando quieres utilizar un addon
específico, por ejemplo, para brix.
Okey?
Así que, bueno, en ese sentido, volvemos a mi proyecto que tengo
aquí con Gutenberg directamente.
Vemos a hacer una proba para que veáis, eh, cómo sería
todo esto con core framework?
Y para que para que veis un echéis un vistazo, ya habéis visto
que con talwin no tengo que se puede configurar muchas cosas.
Vale, evidentemente.
Pero bueno, el enfoque es utiliza ya las clases que tenemos.
Vale?
Y sus nombres.
Bien, vamos ahora cor framework, vamos a desactivar win press.
Vamos a añadir un nuevo pla.
Lo buscamos también.
El repositorio como os digo, es gratuito para para guem.
Lo único que sería de pago sería esa esa integración con Bricks para que
salga ahí, como en el panel y tal pero bueno, vamos a instalar por framework
y vamos a ver cómo, cómo funcionaría esto?
Ah, activar pues, cerrando cosas por aquí.
Vale, ya lo tenemos activado.
Fíjate aquí.
Ya no es tanto como fijos que la diferencia de instalar el del
win pres de ter win, que es como, bueno, hay una configuración.
Pero digamos que las clases cuáles son por las clases son las que son pero esto
es un constructor de frameworks, okey?
Entonces tenemos diferentes opciones, todas.
Todo es modular.
Vale, lo bueno de aquí es que todo es modular.
Yo aquí estoy abriendo el panel de control de color framework.
Y me viene ya por defecto.
Pues que va a haber tres colores principales para mi web para fondos,
colores de textos, colores base, pero todo esto lo pudo borrar.
Yo tengo aquí un boton de eliminar.
Puedo crearme otro elemento nuevo.
Vale, es todo modular para la tipografía.
Lo mismo fija aquí tenemos distintas variaciones de tipografía, no?
E qui, s, m, l, pero es lo que os digo a mi me puede, eh?
Quiero y quiero personalizarlo mucho.
Y digo mira, he hecho un diseño en figma o hecho un diseño en ilustrador.
Y tal y como he pensado yo, el diseño realmente primero
quiero que se llamen las clases.
Texto no text.
Fíjate, puedo personalizar el nombre de esas variables?
No?
Y segundo, no me hacen falta tantos a mi con con cuatro.
Ya me vale.
Vale, entonces yo podría por aquí ir quitando elementos e ir poniendo
vale, podría ir quitando qui, quito por aquí abajo, quito por
aquí abajo, quito por aquí arriba.
Nada a mi con con estos cinco, me vale.
Y incluso puedo configurar cuánto de diferente quiero o que sea la relación
entre ellos fijos que hay una relación, pero yo puedo decirle aquí, no, no.
Mira, quiero una relación mucho mayor.
Entonces puedo establecer que la diferencia entre un texto m y un
texto l sea muy grande, por ejemplo.
Vale, entonces te permite ese tipo de cositas.
Y al final, lo resultante es lo mismo que acabamos de ver con twin solo que
estas clases te las has creado tú.
Okey.
Y lo mismo que tenemos para texto, lo tenemos para los espaciados.
Veis aquí tenemos space dos quises space quies.
Bueno, es una dándome icla de una manera de llamar a las cosas, pero
puedes llamarlo espacio pequeño, espacio mediano y espacio grande.
Repito, aquí te lo creas tú mismo.
Okey, tenemos también componentes componentes sirve para que puedas crear
elementos ya no solo ah, con de una variables para propiedades pequeñas
como el espacio, como un tamaño de fuentes, sino un botón completo.
Un botón tiene muchas cosas.
Un botón tiene display flex tan in center, gap, padding, color back color.
Veis y entonces puedes crear componentes.
Puedes crear su variación cuando pasas el ratón por encima,
diferentes variaciones de tamaño para ese mismo elemento o de color.
Vale?
Pues esto bueno, con los Lear lo mismo, eh, puedes activar aquí
los ley columnas automáticas.
Y me hago una clase que es columnas pequeña, columnas grandes, lo
que se y hace GRI automáticos.
Y al final lo dejas todo de manera pues, muy personalizado, no?
Y como digo totalmente personalizable, yo aquí tengo todo es activado, pero
puedes hacer lo que te dé la gana.
Vale.
Entonces, una vez que tú tienes ya tus, eh, bueno, tus clases y demás
vamos a guardar como se utilizaría.
Bueno, pues parecido ahora, como he visto antes, vamos a
ir ahora al al editor del tema.
Vamos a editar cualquiera de las plantillas,
eh?
A ver, eh, plantillas.
Pues me da igual.
Pues, pues está así.
La de servicio.
Vale,
vamos a ver si carga.
Eso es.
Y entonces yo ahora vamos a hacer el mismo ejemplo que antes.
Me coloco, por ejemplo, en este grupo, y ahora tenemos
aquí en la parte de del estilo.
Ok, son dis block.
Aquí está aquí está.
Ve.
Eso es que no lo veía.
Tenemos, por un lado, la posibilidad.
Me gusta bastante.
La interfaz es lo justo para que tampoco nos la li aquí en el panel.
Vale.
Por un lado, tenemos un buscador de clases donde yo le puedo poner, eh, por ejemplo.
Pues eh, al padding.
Pues space x o cualquier cosa, eh?
Bueno, serían clases.
Vale, no, no variables.
Puedo ponerle aquí cualquier clase de las que yo tenga.
Veis?
Es mall.
No se que secunda.
Vale, le puedo aquí ir aplicando clases.
Se van que aquí marcad tas.
Lo veis?
O podríamos hacer también otra cosa.
Qué es venir aquí al panel visual que tiene, por ejemplo,
puedo venir aquí a tipografías.
Pudo venir a a columnas.
Veis aquí puedo jugar con las columnas, todas las clases que yo me he creado.
Todos los elementos los puedo evitar desde aquí, desde estos panders si no tengo,
por ejemplo, aquí, fluid tipografía.
Pues no tengo claro.
Habría que generarlos.
Vale, esto es importante.
Vamos a a generarlas porque os hecho el ejemplo.
Pero creo que no le va a oje a generar.
Vamos a ver, eh, a ver, componente pacing tip.
Vale, class generador.
Fíjate esto también es un concepto a ver que ya osaré cursos de esto.
Vale, simplemente es para que lo vaya conociendo y vayamos trasteando
pero tú puedes querer tener variables y no clases, algo que solo hacer.
O sea que yo solo querer bastante, o sea, solo querer no tener clases.
Vale, so me parece más interesante de la variable muchas veces no, eh, pero si
quieres clases, tú puedes darle aquí a que se generen las clases y entonces, además,
te va a generar clases con esas variables.
Vale?
Así que es muy interesante para los colores.
Es muy guapo, gente, porque porque tú lo puedes decir, mira, aparte
de las variables de color, me vas a generar clases para los textos.
Para los fondos o para los bordes, pero o no para los bordes?
No.
Pero si para el background, veis y con esto el tipo va y te genera clases
automáticamente de los colores que tú hayas aquí sete dado es más fíjate
como tenemos aquí diferentes tintes de este o diferentes sombreados.
No hay dos formas de de variación de color, no los shas que
son como hacia oscuro y los tints que van hacia claro, no.
Y dices no, mira a ver con cuatro.
Anda a dónde vas si con tres me vale, vale, por ejemplo,
ponemos aquí tres o al revés.
No quiero que me generes así toda este pedazo de paleta de ocho colores o así
de colores, y automáticamente me va a generar todas las variaciones, todas
las clases para utilizar esos colores.
De hecho, podemos hacer una vista previa aquí fijos, todo lo que me ha creado.
Vale?
Si queremos saber que le he dado yo que yo no solo utilizar tantos,
vale, pero para que me entendáis, no tenemos esa posibilidad.
Entonces a la hora luego de usar aquí.
Pues, bueno, pues todas las cosas que te haya has generado, pues
las tendrás aquí disponibles.
Vamos a refrescar a ver si consigo, eh tener ahí.
Por ejemplo, los colores.
A ver si veis.
Ahora ya tengo aquí.
Ya me he generado aquí las las clases de tamaño.
Veis las que he dicho antes, ves como le quita antes teníamos dos
xse y tal y las se las he quitado.
Pues tengo aquí unas cuantas text x se le pu o, por ejemplo, del color.
Fíjate de aquí todas todas las variaciones que nos hemos creado ahora mismo.
Veis que son muchas pero que vuelvo a repetir esto es porque yo he querido
ok, entonces, eh, es bastante, bastante interesante y bueno, pues a
la hora de de gestionar tu propio tu propio estilo, yo creo que está white
ventajas y desventajas de cada uno.
Mira yo, por ejemplo, al utilizar talwin, ve una ventaja que es que hay muchos,
muchos proyectos incluso fuera de gores.
Que es que la peña ya utiliza mucho delwin elwin está muy utilizado, muy
utiliza monzo entonces estás aprendiendo algo que es una tecnología o una manera
de trabajo que está muy extendida.
Vale, si tú vas a buscarte un curro por ahí.
Pues hombre, hay ciertas posibilidades.
Vale?
Un porcentaje más o menos alto de que si usa un framework, ese va a ser twin.
Vale.
Sin embargo, por framework es como, pues, bueno, pues no vas a encontrar un
curro de alguien que necesite justo un framework, que es porque te lo creas tú.
Entonces, ahí sí que está un poco la diferencia.
No quizás más sutil en ese sentido.
A la larga.
Pues a perderte algo como twin.
Ahora bien, tengo mis gustos personales para mis proyectos.
A mi me gusta mucho más el waterflow la idea a mi mi mente fluye mejor
cuando me creo mi propio no me hago mi diseño en fima Illustrator donde sea.
Y a partir de ahí me saco yo mi lista de clases de cuantas las que
yo necesite 10, 10, ocho, ocho.
Vale.
Entonces ese Wolf flow me gusta un poco más, no, pero bueno, son
opciones bastante interesantes aquí.
Bueno, que tampoco.
Bueno, son unos 20.
Ya tu hubo bien rat aquí, eh?
La idea de hoy, sobre todo era presentaros un poquito por
encima que conozcais un poquito.
Este tipo de herramientas que ya os digo que en mi intenciones verlas y y
poco a poco ir buscando aquello que más encaje con nuestras formas de trabajo.
Y bueno, eh, qué os parece que os parece toda esta movida por aquí dice buenas.
Hola, Cheo.
Víctor dice dias mon mucho cor framework que además de fusionar clase con
editor visual, solo tienes el ces.
Ese que necesitas.
Claro.
Sí.
Si yo, yo opino como Elías, la única desventaja, por así decir,
es esa no es como que vas a buscar un curro, no lo típico.
Y trabajan con talwin no, es como que es más fácil encontrarte un proyecto con tal.
Pero claro, cuando se trata de hacer tus proyectos, a mí me me parece como mucho
más limpio todo, sabes, en mi cabeza, no tener que pensar en 4,000,000 de clases
disponibles, sino en las que yo me creado.
Bueno, de hecho también existe posibilidad, por supuesto de, pues, ha
hagais una especie de framework vuestro propio que luego lo continuéis siempre
pa, toda pa, pa, siempre pa, vosotros, vale, y sea, y vuestros s vayan con ese
con esos estilos, no así como también es interesante, y eso luego a la hora
de usar Bricks, por ejemplo, eh, al final tenemos opciones para todos.
O sea, quiero decir, bueno, menos para los elementos que element.
Bueno, curiosamente, win.
Va a estar disponible para elementos, eh, en esa lo pondrá,
por lo que tengo entendido, eh?
Tengo mucha curiosidad de en que parte de la interfaz para meter esa mierda,
porque elemento al día de uno tiene a meter clases, pero bueno, de algún lado
tendrán que poner, eh, pero en Briggs, por ejemplo, pues lo puedes meter con
framework sin problema y inglés, etcétera.
Que opinan del tema blocky.
Pues mirai lo estuve yo.
Bueno, probándolo hace poco.
Bueno, probando lo hace poco porque lo probé hace mucho.
Estaba bien, pero hace poco el el ánimo metiendo cada
vez más cositas interesantes.
Y está guapo, está guapo.
Lo que pasa que a día de hoy todavía no trabaja del todo
bien con el editor del sitio.
Pero como tema clásico potenciado con una versión de lo que debería
ser Gutenberg a nivel de del tipo de bloques y de personalización que
debería tener, a mi me gusta mucho, eh?
Sí, me parece súper bueno.
Va muy rápido utilizado block me parece guay.
De hecho, y pensando en mi especial de navidad en el de la máquina de
branding, entre el top de temas clásicos recomendados, puse blocky,
puse tres, puse Cadence, eh?
Neve y blocky esos tres.
Así que, bueno, memora memora Hola.
Pero José, qué tal?
He llegado un esta tarde por por lo que voy a ver con todas estas herramientas.
Somos independientes de dicha herramienta metidos en harina.
Estaría bien crear continuo más tarde.
Ah, no que no es que tú se ve como quién?
Enter?
No, así tienes, creo el dentro.
A ver, eh, crear nuestro propio framework.
Si.
Pero bueno, depende, tío.
Yo es que depende, como sea tu concepto.
Hay gente que está más en, por ejemplo, que este chico se el nombre.
Perdóname, Frank era no.
Francisco Francisco hablaba de de no.
Perdón, era Francisco.
Era de los comentarios.
César era César que estaba yendo antes.
Un comentario de un video hablaba de que él iba a trabajar con agencias.
Entonces para él, yo creo que es más interesante aprender twin porque
es una cosa estandarizada que es posible que cualquier agencia conozca.
Sin embargo, si te lo vas a montar tu por tu cuenta, tus proyectos,
no vas a tener que colaborar con nadie y vas a hacer tus webs.
Y tal pues me me parece guay a hacer nuestras propias movidas ahí.
Si me parece guay.
De hecho, a mi me gusta más ese concepto, pero también y que ten en cuenta que no
todo el mundo no están en esa situación.
Así que yo, ahora las dos o son son válidas, de temas para hu recomendados.
para mí, claro, hay habría que ver qué tipo de tema o qué tipo de desarrollo
quieres, porque en wes pods utilizar temas personalizable que eso lo llamaré yo.
Vale, toqueteas personalizas, pero no haces a medida.
Vale.
Y luego te teníamos la opción de hacer algo totalmente a medida.
Ok?
Entonces, si quieres algo básico, personalizable,
simplemente personalizable.
Mis opciones, eh?
Pues eso, Cadence neve blocky astra, eh?
Bueno o ocean incluso para ducomar está muy bien.
Con eso tienes de sobra.
Quieres hacer algo a medida?
Pues tienes la opción de utilizar Builders constructores visuales,
mi recomendaciones Bricks también tienes, por ejemplo, elemento pro.
También tienes break dance, etcétera.
O puedes optar por hacer un desarrollo totalmente con código.
Si eres programador o quieres meterte por el mundo de programación y quieres
desarrollar todo a medida con código, yo normalmente lo que suele usar es
un tema que se llama Anders cors.
Vale, podéis encontrarlo en Anders cors m.
Ahora la hace si queis.
De hecho, en mi web también tenéis una serie haciendo un tema desde cero con
esto, vale, usando código esta página web, tu te generas un tema que es vine
en blanco con cuatro plantia pfp y eres tu encargado de ir creando no a
mano y a código tu propio tema de WPS.
Esa es un poquito la la idea.
hugo, a grandes rasgos, cuál serían los puntos esenciales y complementarios de
dar un servicio de mantenimiento mensual?
Qué opináis?
Pues también tenemos videos sobre eso.
El día se estaría fuego el enlace, supongo, justo no lo había
visto, pero ya imagino que te estás poniendo enlaces y y nada.
Pues, al final del mantenimiento, creo que a, por un lado, hay que ser conscientes
de que mantenimiento es mantener.
No tenemos que cometer el error de incluir el mantenimiento, cosas que
van a implicar un nuevo desarrollo, pero al mismo tiempo, tenemos que
intentar dar valor añadido, vale?
Y diferenciar.
Es por eso, por ejemplo, con herramientas como modular de ese nosotros
recomendamos, puedes crear un informe, eh?
Ya no solo de las tareas realizadas.
Sino con propuestas.
Vale, estoy obviando toda la parte que todo sabéis.
Vale, no voy a hablar aquí.
Si hay catalizar los plugins, hay que hacerlo los packs.
No se que vale.
Pues eso todo el mundo lo sabe.
Vale.
Pero yo lo que hablo es de que le Dess algo más a, por ejemplo, cuando
allí también nos mol que cada mes el cliente obviera una lista de ideas.
Vale.
Oye, he visto que tu competencia está esto.
Podríamos hacer esto otro hoy?
He visto que estos filtros que estaría agua por hacer esto o a
veces vamos a hacer un test a ver a ver si vendes más con esto con esto.
Ose ideas, ideas, ideas y el cliente.
Poco a poco, cuando le dé la gana, te va cogiendo trabajitos de ahí.
Vale, oye, el mes que vine, hacemos lo de lo que me dijiste del testa v.
Oye, y para el mes que viene, te cojo un bono de horas.
Vale, para hacer lo que me dijiste de los filtros.
Vale, pero eso ya no es mantenimiento.
Eso va por bonos de horas por pago normal de desarrollo.
Vale?
Pero en el mantenimiento, si que le puedes incluir esas ideas y que
sienta que el cliente sienta de verdad que aparte de actualizarle cosas
y tal que mucha, mucha veces las entiende, estás atento a su negocio.
Y le dices soias mira un consejo para esto para otro.
Yo creo que eso son puntos esenciales para que el cliente se te quede.
Básicamente
Si werres muere algún día.
No creo que pasa eso.
A qué ese mes migrarías o sería una ción interesante para valorar.
Vale, me voy a imaginar que wires muere.
Me voy a imaginar que el 45% de las webs de la tierra se quedan sin goles.
Vale, eh, qué haría yo?
Pues, bueno, lo sé.
Pues me iría a otro a otro CE meses que tenga si, si.
Puede ser, pues, que tenga una que sea también código, código
abierto grupal, cosas de ese tipo.
Si grupal sería lo más parecido al día de hoy, es que a ver si todos me vais a
decir y a mi también me vine en mente.
Cosas como eh, lo diría, web flow y cosas así, pero es que no tiene
nada que ver, tío, porque web flow.
Es que a nivel de funcionalidad, todo de meterle en mano al código es que
no tienes, no tienes control ahí, tío.
Yo necesitaría un sustituto de warres y para eso lo más
parecido sería grupal o algo así.
No sé un día estuvimos investigando varios a mira, proceso wire.
Sí, está guapo.
Es verdad, Elías, eso justo iba a decir que estuvimos investigando y lo de proceso
wire me me moaba como hacía los cpt.
Vale.
Y poder cre esas estructuras gt no probado.
Pero pero si proceso war y drupal algo de ese tipo estaría wey
Fernando le sacó los colores en x a.
Ah, es ver.
Sí, es verdad, es verdad, es verdad.
A lo del el vídeo se llama jaque.
Si te, por muy fácil, por culpa de los de
ajá.
Ya.
Entonces no es culpa de wre claro, es un poco lo que yo quería transmitir un poco.
Bueno, de los d de la tecnología caía, pero no por culpa de wre.
Es como, pues eso, eh wre que us usa que usa goles.
Escucha, p p.
Ahora usa react.
Usa tal cosa, pero pero no es culpa de w en sí, no, yo creo.
No sé.
Vamos hablando por aquí.
Ha estado interesante.
Hemos hablado un poquito de todo.
Ha habido preguntita y contesta ni labs.
Somos parches de costa.
No hay sistema más de 100.
Seguro.
Sí, claro.
Bueno, un placer estar por aquí con vosotros y nada.
Pues nos vemos por aquí en dos semanitas que sabéis, tenéis
podcast cada dos semanas.
Tenéis que visitar nuestra página web negocios sobre p punto.
Tenéis que visitar nuestro canal de youtube con un montón de vídeos.
Tenéis que visitar todos nuestros enlaces para que luego no digáis, oye, es un curso
de, no sé que, pues claro que lo tenemos.
Seguro que lo tenemos.
O bien estar en nuestra pel de vídeos o bien estar en a uno de nuestros
directos puede hacer nuestra página web y oye, si tienes cualquier duda duda
durante la semana, sabes que puedes hacer meterte en nuestro Telegram.
Vale, vamos a, vas a t me negocio y directamente tenemos ahí un
Telegram para cualquier consulta como las que estáis haciendo hoy.
Pues durante la semana, pues ahí lo podemos resolver valet.
Así que venimos a nuestro Telegram.
Y bueno, pues ya de paso nuestras webs, no de nosotros del día y mía.
Pues Elías ez pro es la página web de mi comp el día Gómez y la mía.
Pues la máquina de branding punto com vale el más enfocado a la parte de consultoría.
Automatizaciones, eh, digitalización, eh, de ese tipo de cosas, eh, yo más enfocado.
Tema de diseño, páginas web, wordpress.
Vale, cursos más tutorial.
Y ahí tenes nuestras dos páginas wes.
Así que nada más.
Muchísimas gracias a todos.