 Seguimos con Work in Valencia después del almuerzo. Luego hay más comida todavía, esto es un no parar, es un frenesí. Lo primero que quiero hacer es felicitaros por haber venido, por haber escogido este track en esta ocasión, esta charla, porque vais a poder disfrutar de una de las mayores expertas, y no la más, la experta mayor que tenemos en la comunidad Wordpress en español, no solamente en España, sino en todo el mundo precisamente de este tema, del mundo de la tipografía. Doña Ana Cirujano Garzo es diseñadora de negocio digital, es una referente en la comunidad Wordpress española, cuando alguien tiene una duda sobre tipografía en general, es ella a la que recurre, es además una de las co-creadoras de uno de los primeros plugins sobre tipografía variable, fuentes variable, que hubo en el repositorio oficial de Wordpress, además es embajadora de marca de Pins and Solutions, co-presentadora de uno de los mejores pozcas sobre marketing y branding en Internet, que es un billet de chataruga y profesora de la universidad, el pueblo tres y medio school. Os dejo con ella y con la tipografía fluida de Wordpress, que yo creo que es algo que vamos a disfrutar todos, mucho seguro. Eskericasco, Pablo. ¡Mol, buen día! ¡Moltes gracias por venir al Track 2! Espero que vos agrade esta charrada. Y ahora en castellano, ¿vale? Que soy de Madrid. Bueno, ya me ha presentado mi buen amigo Pablo, muy bien. Somos socios en dos proyectos, como ha dicho, entre sí y medio school y en un billet de chataruga, el lunes a las seis y media de la tarde. Nos tendréis haciendo el bobo como ahora, pero hablando de diseño y de marketing. Sí que quiero agradecer a Pins and Solutions, que patrocina es patrocinar bronce de esta Workham, y que apoya a porizos de la comunidad Wordpress. Y también, no quiero que se me olvide, que en marzo tenemos Workham Torreledones, la primera Workham de Torreledones de la Sierra de Madrid, y que hay varios miembros de la mitad de Wordpress Torreledones aquí, por eso gritan tanto. Así que nos vemos en marzo en Torreledones, y os apetece. Ya vamos a hablar de diseño. Vamos a hablar de tipografía fluida, primero voy a explicar lo que es la tipografía fluida, y sobre todo porque recomiendo que se utilice. Pero antes, voy a hablar de tipografía responsive. Es que esto está muy sensible. La tipografía responsive consiste en adaptar el tamaño de la letra al dispositivo en el que se va a leer. Cuando utilizamos un dispositivo móvil, tenemos la pantalla más cerca, y cuando utilizamos un escritorio, tenemos la pantalla más lejos, por eso el tamaño del móvil es diferente, en función de la distancia a la que leemos. Y además viene determinado ese tamaño por el espacio disponible. En móviles tenemos un ancho de pantalla mucho más reducido que en otros dispositivos con la pantalla más ancha. La pantalla de la izquierda es muy, muy, muy, muy, demasiado muy habitual en web hechas con WordPress. Yo espero que todos los que estamos aquí, que nos dedicamos a crear web con WordPress, a diseñar web con WordPress, a implementar web con WordPress, a encargar web con WordPress a nuestros proveedores. Por favor, cuando veamos el diseño de la izquierda, pidamos, hagamos, que se adapte como está el diseño de la derecha. El diseño de la izquierda ocurre cuando no hacemos un diseño mobile first y las webs tienen los tamaños que serían óptimos para pantalla. Es muy habitual. Si veis el diseño, es como que muchas veces se parten palabras, lo habéis visto muchas veces. Se forman muchísimo, o sea, muchas de las líneas tienen solo dos, tres palabras. No se lee nada bien. Aquí he tenido bastante cuidado con los márgenes, pero muchas veces también lo que se ve es que incluso se utiliza los márgenes izquierdo y derecho de escritorio e incluso, en vez de tener dos, tres palabras, una como tenemos en este ejemplo, incluso se tienen menos. La columna tiene una palabra por línea. Eso es muy difícil de leer para cualquiera de nosotras, pero sobre todo para personas que tienen dificultades en la lectura. Es horrible, no es accesible. Tenemos que trabajar mobile first. Esto no es nuevo, ya lo sabemos, pero no se hace. Adaptar primero el tamaño de los distintos estilos de párrafo para que se lea correctamente los títulos en móvil tienen que ser más pequeños que los títulos en escritorio, por lo que vamos de la distancia y por lo que vemos el ancho disponible. Apetece mucho más leer el de la derecha que el de la izquierda. Esto es así. En escritorio ocurre menos veces porque se hace poco diseño mobile first, aunque llevamos años hablando de eso, pero también ocurre. Diseños en los que el título es muy pequeño, los textos son muy pequeños, no se lee nada. Y aquí todavía he tenido la decencia de limitar el ancho de la línea, porque lo otro es que no puedo con ello, pero un ejemplo malo, malo, habría sido otro muy habitual, que es que no limitamos el ancho de la línea, y entonces es como la Wikipedia, que tienes que leerlo así. Es horrible en escritorio. Entonces, por favor, adaptamos el tamaño a la pantalla. La diferencia una vez más es evidente. Se lee mucho mejor, con un tamaño mínimo. Se diferencia, hay una mejor jerarquía también, con lo cual diferenciamos mucho más fácil lo que es un título, lo que es un párrafo, y es mucho más accesible. Comunicamos mucho mejor lo que nuestro cliente quiere comunicar. Complimos mejor el objetivo, con lo cual ganamos más dinero. ¿Cómo se hacía esto antes? Lo que hacíamos por cada tipo de texto, en realidad es cada elemento que tenga un tratamiento tipo gráfico diferente, un tamaño diferente, por cada uno de ellos poníamos una media query, en el mejor de los casos poníamos tres, poníamos para móviles, para dispositivos móviles, definíamos un breakpoint para móviles, otro para tablet y otro para escritorio. Esto por cada uno de los estilos, de los tipos de texto, de elementos. Y lo hacíamos así, esto era tipo grafía responsive, he hablado de esto muchas veces, y todos lo hacíamos así, todos nosotros. ¿Qué ocurre que esto, además de ser mucho trabajo, tiene mucho código? Ay, perdón, es que es muy sensible. Bueno, quiero ir para atrás. Aparte de ser mucho trabajo, muchas líneas de código que afectan a la performance, porque ya sabemos que cuanto menos código mejor, aparte de eso, se producían saltos, porque si os fijáis, estamos declarando una media query, por ejemplo, de 40 rem para que en ese momento el párrafo cambie de un rem a 1,125 rem, que serían a priori 18 píxeles, y después no cambiamos el tamaño hasta que no llegamos a los 64 rem, con lo cual, de un dispositivo de 41 rem, a un dispositivo de 63 rem, tenemos el mismo tamaño. Un rem son 16 píxeles a priori, si no lo cambia el usuario, si no lo cambiamos declarando en el CSS. Lo mejor es nunca declarar estos valores en píxeles, declararlos en rem, para que sea una unidad relativa, sobre todo lo que el usuario en última instancia declare en su navegador. Ya sabéis que en el navegador podemos decidir tamaño grande, pequeño, tenemos que dejar a las personas que necesitan verlo más grande o más pequeño que lo adapten, por eso siempre declaramos todos los tamaños en rem, para que cuando hacemos zoom o cuando cambiamos el tamaño del navegador, eso responda y no esté fijo. Nunca declaramos en rem. Entonces, ¿cómo lo solucionábamos? Antes, pues con unidades relativas al viewport, que era esta imagen que tenemos aquí. El H1 fonsize 20 w, esto era 20 unidades de viewport que era la tipografía va a tener el tamaño del 20% del ancho del viewport. Y parecía que lo teníamos, porque ya no hay saltos, ahora ya va respondiendo al tamaño y ese problema lo teníamos resuelto. ¿Qué problema nos encontramos? Dos problemas. Uno, que no hay un mínimo. Claro, si realmente queremos un mínimo, porque si el móvil lo vemos de cerca, pero queremos, por lo menos, que los párrafos tengan un mínimo de unos 16 píxeles, luego lo declaramos en rem, pero se renderiza en píxeles. Queremos un mínimo de tamaño, por mucho que la pantalla sea muy estrecha, que se lea correctamente. Y queremos un máximo. Porque nosotros, como hemos visto antes, limitamos el ancho de la línea a un ancho máximo de ese contenedor que contiene el texto, pero el viewport, la ventana gráfica, el dispositivo, tiene una ventana mucho más grande. Entonces, si no limitamos el máximo del tamaño, al final se nos va a ir el tamaño de letra demasiado grande, con lo cual esto tampoco nos resolvía. Y luego, el segundo problema con el que nos encontramos era que si el tamaño es relativo al dispositivo, al ancho del viewport, no estamos teniendo en cuenta al usuario. Cuando nosotros modificábamos el tamaño en la configuración del navegador, personas con necesidades de accesibilidad, para verlo correctamente, o si lo declaramos por CSS, siempre, o sea, no atendía a lo que el usuario decía, porque sólo atendía al ancho de la ventana, con lo cual no nos vale por ningún lado. Es muy efectista, muy chulo, muy bonito, pero no nos valía. Siempre teníamos que utilizar la función calc para multiplicar, sumar este valor por alguna unidad relativa para que así se cierre relativo, pero seguíamos teniendo el problema de los mínimos y los máximos. Y llega la tipografía fluida, esto no es nuevo, yo creo que la primera vez que hable de tipografía fluida con Mauricio Helves, que somos los dos muy frikis del CSS, y de hacer las cosas con buenas prácticas, nos hablábamos por WhatsApp, digo Mauricio, que es también polente en esta Workup, mira tío, que sale la función clump y mira lo que podemos hacer, y era como nos vamos de copas esta noche, que tenemos la función clump, y los dos hay flipados, yo creo que esto fue igual hace cuatro años. O sea, que no es nuevo. Esta charla sí que nos trae novedades, pero no la novedad no es la tipografía fluida concretamente, ¿vale? ¿En qué consiste la tipografía fluida? Pues justo lo que necesitamos. Es accesible porque tiene unidades relativas y le podemos indicar unos mínimos y los máximos. Si veis, hay un momento en el que la tipografía tiene el mismo tamaño, hasta que le indicamos que pare, que pare de crecer o pare de disminuir. Ahora sí lo tenemos, es accesible, tiene mínimos, tiene máximos. Pero, claro, tenemos otro problema, yo diría cognitivo para el maquetador, porque así a priori no hay quien entienda la función clump, ¿no? Hace lo que os acabo de decir, ¿no? Multiplicaciones para que sean unidades relativas, para que sea accesible y luego establecer unos mínimos y unos máximos. Es la primera vez que utilizo el puntero en una charla, la verdad que es bastante guay. Estáis muy serios, yo creo que es muy técnico y os estoy volando a la cabeza, ¿no? Os estáis enterando pues absolutamente muchas gracias. Tenemos el mínimo, que sería dos rem, luego un cálculo que tiene en cuenta la ventana del navegador, veis que aquí tiene, utiliza las unidades de viewport y hace lo mezcla con unidades relativas para que esto sea accesible. Vamos a quedarnos con eso. Pero esto ya os digo que tiene en cuenta lo que antes hacíamos con las metacuaries, ¿no? De limitar el lanche del contenedor y después tenemos. Bueno, el dos rem, este que está después del segundo calc, o sea, del primer calc, este. El dos rem sería el tamaño ideal y el cuatro rem el tamaño máximo. Bueno, más o menos más o menos podemos ver un poco de qué va. Pero afortunadamente tenemos herramientas que nos lo ponen mucho más fácil. Para cada elemento al que queremos declarar un tamaño podemos usar esta herramienta, ya sabéis que todas las presentaciones de la Workam las compartimos. Ya sabéis que los vídeos en WordPress TV y las presentaciones también siempre están enlazadas, o sea que lo vais a tener yo tengo en esta presentación enlaces a todo, ¿vale? Siempre que hay algo hay un enlace para que vayáis a la herramienta y tal. En esta herramienta nos lo ponen muy fácil, ¿no? Decimos que no usamos píxeles, usamos rem el selector que queremos utilizar la propiedad, tamaño mínimo tamaño máximo las unidades del view porque queremos considerar y que queremos usar la función clamp. Y ya nos devuelve la función clamp sin tener por qué saber por qué suma por qué resta por qué multiplica podemos usar esta función. Esta está muy bien pero me gusta más esta otra porque además viene con esta gráfica tan chula que nos dice cuando el tamaño se mantiene constante cuando cambia el tamaño y cuando se vuelve a mantener constante otra vez, ¿no? en función del ancho del viewport y el tamaño. Los que nos gusta la visualización de datos pues así se entiende mucho mejor, ¿no? Hay enlace en la presentación como digo a la herramienta. Y esta herramienta, la tercera es la mejor de las tres porque además de devolvernos el código CSS que necesitamos implementar nos hace la escala tipográfica porque claro la otra herramienta teníamos que ir uno por uno con todos los valores el h2, este mínimo este máximo en función del dispositivo. Pero claro, lo que decimos el h3 este mínimo y este máximo bueno, este mínimo y este máximo en función de que un maquetador tiene que mirar el diseño en figma y ya está, no tiene que pensar nada pero el diseñador sí que tiene que declarar esos valores para luego ponerlos en figma con lo cual si estamos en la fase de diseño sí que necesitamos o sea, nos viene muy bien esta herramienta para que nos ayude no solo a establecer un mínimo y un máximo de tamaño para luego ponerlo en figma sino también o en penpot, en figma o en penpot tengo que decir que en penpot es open source también nos va a ayudar a definir la jerarquía tipográfica luego en nuestro diseño por contexto siempre los diseñadores adaptamos un poquito para que cuadre bien pero nos siempre nos basamos en la escala para que haya una armonía entre unos tamaños y otro y definir una buena jerarquía tipográfica pues esta herramienta que de nuevo tenés un enlace en la presentación es fantástica porque nos cubre todo aún así pues claro es mucho trabajo, tenemos que hacer todo esto y después tenemos arriba a la derecha, no lo veis pero nos devuelve el código CSS pero bueno, aún así tendríamos que utilizar ese código CSS para poder implementar entonces ahora viene la novedad, lo que se avanzaba para llegar que es nuevo y es que podemos utilizar tipografía fluida en WordPress de una manera mucho más sencilla claro, tengo que decir que es sencillo para los maquetadores maquetadoras desarrolladoras desarrolladoras no para el usuario final vamos a ver que hay cierta limitación todavía pero bueno vamos avanzando ahora se explico más requisitos para poder utilizar la tipografía fluida tenemos que utilizar un tema basado en bloques o un tema que utilice el full site editing porque necesitamos editar el 100.json vale y tenemos que tener la versión 6.1 de WordPress o el plugin de Gutenberg que ya sabéis que el plugin de Gutenberg implementa antes las nuevas funcionalidades que después aparecen en la última versión de WordPress lo que hacemos es bueno, tenemos también que activar la tipografía fluida en el 100.json de nuestro tema esto es full site editing tenemos que decir en settings la tipografía fluid true y ya con eso nos va a hacer caso el tema que queremos utilizar la tipografía fluida y después bueno, para obtener WordPress 6.1 hoy en día, si queréis mañana por mañana ya sé que estáis deseando probarlo en vuestros sitios podéis utilizar el hosting gratuito de piensasolutions que está fenomenal tenéis que instalar el plugin de WordPress beta tester que por si no lo conocía y sirve para la última versión de WordPress antes de que salga puedes descargar directamente la versión bueno, pone rc1 pero ya ha salido esta semana la rc2 que lo he corregido abajo y se me ha pasado arriba o esperar al día 1 de noviembre que es Halloween y que sale la nueva versión de WordPress que es la que trae esta nueva funcionalidad de tipografía fluida con esta facilidad y aquí claro, dices para poder declararlo los valores fluidos tendríamos que utilizar como decía antes los tamaños que nos pasa al diseñador o hacer nosotros como diseñadoras algo como esto ya sé que no se ve muy bien pero nosotros lo que hacemos en una herramienta de diseño web como puede ser Figma o Pempot lo que hacemos es declarar para cada uno de los estilos de texto diferentes hacemos una como se dice un sistema de diseño la tipografía del sistema de diseño y lo hacemos para los tamaños de móvil y para los tamaños de escritorio móvil escritorio dependiendo del ancho de pantalla no solemos ya hacer diseñar los tamaños para tableta como ya es tipografía fluida el tamaño de tableta será como una interpolación como cuando hacíamos animaciones el tamaño que esté en medio es la más olvidada ya no solemos tenerlo en cuenta el que pille entre uno y otro entonces declaramos unos estilos para móvil y los estilos para escritorio y cada uno de los porque los separamos para dar los tamaños concretos también tienen sus propios pesos sus propios interletrados y cada uno tiene también su propia escala tipográfica cada uno de los que hablábamos antes de hacer una escala modular y entonces ya podríamos hacer esto esto es la madre del cordero la charlaba de esto lo que hacemos es para cada uno de los tamaños de letra que pueden pertenecer a un estilo u otro luego estos tamaños los declararemos dentro de nuestras variables CSS dentro de nuestras clases para que uno de los tamaños le decimos establecemos que es fluid le decimos un tamaño mínimo y un tamaño máximo y luego WordPress a partir de la versión 6.1 ya da por hecho unos tamaños de viewport y lo hace accesible entonces simplemente tenemos que indicar el tamaño mínimo y el tamaño máximo la maquetadora, la persona maquetadora mira el diseño de Figma ve el valor que teníamos arriba de todos los móviles ve el valor que teníamos abajo para todos los escritorios y va diciendo mínimo, máximo mínimo, máximo y ya lo tendríamos así de simple como lo ve el usuario lo que decía antes que está un poco limitado puede ver el usuario establece el tamaño que necesite para cada usuario me refiero al admin de la web al editor el usuario del back no el usuario final visitante sino el usuario que está construyendo el sitio establece un valor y automáticamente se establece la tipografía fluida se establece un mínimo y un máximo también para los tamaños que podemos meter a mano en Gutenberg ahora se puede meter también el tamaño a mano tiene limitaciones como ya adelantaba claro si nosotros sólo metemos eso lo introducimos en el 100.json el tamaño mínimo y el tamaño máximo que pasa con el resto de valores porque WordPress los da por hechos no es configurable no podemos declarar en el archivo ni el ancho y el mínimo de la ventana cuando no hay un ancho ni un mínimo se lo inventa y tampoco podemos decir la ratio está la ratio decidida y no podemos cambiarlo por lo cual si tenemos un diseño figma no podemos hacerlo exactamente igual porque no podemos tener en cuenta la ratio se está muy detallado el diseño que hemos recibido quizá haya algunas variaciones y luego claro cuando hablamos de tipografía responsiva o fluida o que se adapta al dispositivo no sólo tenemos en cuenta el tamaño de la letra el tamaño de la letra es lo primero que se declara cuando estamos diseñando un texto pero después en función del tamaño declaramos un line hate y un letter spacing y eso también tendría que ser fluido para que hagan uno de los tamaños entonces ¿qué hacemos con estas limitaciones? WordPress es open source WordPress lo hace la comunidad quién es la comunidad? nosotros y nosotras que ya sabemos lo importante de la tipografía fluida para que sea accesible para que haya una buena experiencia de usuario podemos contribuir a mejorar esto sobre todo si somos unos ninjas del CSS ya hemos comprendido la importancia y ahora podemos ir a GitHub al proyecto Gutenberg el nace directo en la presentación y seleccionar la etiqueta de feature typography y contribuir decir que falta el line hate podríamos hacerlo de esta manera y el letter spacing también tendría que ser fluido podemos contribuir en GitHub es donde se tienen estas isos estas propuestas que podemos dar nuestra opinión y aportar las mejoras necesarias para que esto sea mucho más amigable que sea más configurable que incluso podemos hacerlo no code porque veis que antes era mucho más difícil ahora que a veces es mucho más fácil pero todavía estamos en un perfil de maquetador no tenemos un perfil no code que sin necesidad de código podemos establecer esta tipografía fluida pero estamos avanzando así que lo siento porque tenéis toda la responsabilidad porque ya tenéis el conocimiento os pido disculpas pero es así muchas gracias preguntas que sean fáciles pronto a ver WordPress 6.1 ay si, ¿quién habla? WordPress 6.1 Gutenberg con los classic themes aunque WordPress esté basado en bloques ¿cómo lo tenemos? o ¿cómo lo tendremos? no utilizo un tema de lo que es como tal si no utilizo yo por ejemplo por nombrar uno un code tienes que hacerlo a la vieja usanza si utilizas viejas herramientas tienes que continuar con classic themes no hay posibilidad utilizando plugin de Gutenberg pero gracias y me dice Don Aguay Badiola que es un ninja de la maquetación que sí que se puede utilizar el 10.json en un tema que no sea de bloques ah, qué interesante por la retrocompatibilidad de WordPress así en agua por favor ¿se oye? simplemente que en un tema clásico tú puedes añadir el fichero y puedes poner solo la tipografía para que esto se encargue de toda la vida y ya con eso te le no tengas ni el plugin de Gutenberg ni la última versión de WordPress voy a ver si me calmo un poco porque me ha pillado el micro la idea es que si detecta el 10.json ya va a coger primero esa información y luego va a cargar tu CSS si, pero puedes usar 10.json para declarar valores la tipografía fluida no te lo cogerá porque falta ese código o sea, piensa que todo, o sea si ya tienes 6.1 va a ir al 10.json o sea si hay un 10.json va al 10.json lee si la tipografía fluida es y entonces ya va a mirar todos los parámetros que hayas puesto que lo puedes hacer igual que lo decía Ana entonces la idea de meter esta retrocompatibilidad o esta combinación es que la gente que ya quiere empezar a utilizar el 10.json pero le da palo pasar a los temas de bloques puede empezar a hacer este tipo de cosas me parece que es una de las mejores ideas yo he leído la documentación que será uno de los requisitos pero puede ser que también cuando yo prepare la charla fuera así y que ahora unas semanas después si, bueno, yo como creo temas y más, voy un poco al día y como tengo también bueno, invito mucho a la gente que crea temas para clientes que utilizan el 10.json porque ya es compatible desde hace un par de versiones de WordPress ya puedes utilizar un tema clásico y un 10.json y puedes utilizar sólo lo que te interese del 10.json, no tienes que declararlo el todo aunque el resto de archivos del tema no sean ni HTML, tú puedes tener un tema clásico de siempre el 10.json con la última versión de WordPress y puedes aprovechar esto Vale, entendido, muchas gracias Genial, he dicho preguntas fáciles ¿Cómo es solucionar el problema de adaptación fluido al contenedor y no a la ventana del navegador? De momento a las contener queries la última versión de Chrome están aceptadas pero todavía Firefox no la soporta entonces hay que esperar un poco mi recomendación es que esperemos pero es usando contener queries pero que todavía no se puede hacer en producción pero sí, muy buena pregunta porque cuando podamos usar las consultas de contenedor y no de dispositivo podríamos hacer mejores diseños responsivos claro, pues nos adaptaremos justo a no al ancho de la ventana que no tiene nada que ver con nuestro ancho de la columna, que luego además vamos cambiando oficialmente pero bueno, todavía hay que esperarse hasta que lo soporte, sea compatible con Firefox pero justo en la última versión de Chrome que salió la semana pasada ya tenemos las contener queries queda poco Hola Ana quería felicitarle por la charla y decirte que estoy seguro de que me has ahorrado un dolor de cabeza o muchos con un tema de tipografías porque al final en los dispositivos te vuelves loco y quería aprovechar para ahorrarme otro dolor de cabeza más y preguntarte el tema de... He dicho preguntas fáciles No, no, pues está muy fácil en tu experiencia esto es consistente con los navegadores o tenemos que ir con ojo de que, bueno, lo hemos hecho pero ahora resulta que en Safari no sale igual Sí, sí, la función Clamp ya te digo, llevamos años con ella y es compatible... puedes mirar en CanIus, es totalmente compatible desde hace años Pero que se porta bien, ¿no? Se porta bien Bueno, muchas gracias a todos no da tiempo a más, Ana Muchas gracias Muchas gracias, un aplauso