 Vamos a subir un poco más el nivel con el CSS defensivo. Voy a presentar a Andro Fenojosa, gracias por dar la ponencia. Bueno, bloguero, no, profesor, es un poco que tiene, qué más te iba a decir. Se presentará el mejor. Perdona, escritor, formador, bloguero. Bueno, vamos a subir el nivel, vamos a aprender técnicas y trucos para esos problemas que hemos tenido muchas veces con el CSS y nos hemos pegado. Os dejo con CSS defensivo para contenido agresivo. Muchas gracias. Gracias. Yo espero que tengáis ciertas habilidades con CSS, porque digamos que esto va a ser una masterclass de cómo preparar tu CSS para un contenido que no tenemos control, de ahí agresivo. Y voy a hacer un breve resumen de unas técnicas que se llaman CSS defensivo, la de ahí el nombre de la charla. Pero además os voy a contar la historia de una chica que no está entre el público, pero le voy a llamar Esmeralda, y es un caso real y es un poco bueno fuerte lo que os voy a contar porque es su despido. Voy a contar qué pasó con ella hasta el punto que tuvimos que darle una patada dentro de la empresa. Bueno, para empezar, quiero decir que esta chica empezó en nuestra empresa casi desde cero, había aprendido lo mínimo de CSS, de HTML, estaba haciendo su primer contenido, venía contenido directamente de un CMS como puede ser WordPress, y bueno, había partes que no se terminaban de ajustar. Tuvimos que ayudarla, pero bueno, la vida es así. Entonces antes de nada me gustaría aclarar que lo que yo vengo a hablar no es sobre incompatibilidades entre navegadores, no es el tema de diseño adaptativo, o sea no vengo a hablar de responsive design, si vengo a hablar de contenido, tampoco vengo a hablar sobre la entropía que ocurre en un proyecto, que ya sabéis que cuando crece el número de personas, el número de archivos de CSS, el número de páginas, el número de complejidad de características llega a un punto en que si no tienes ciertas nomenclaturas, cierto orden empieza a aparecer el caos, de hecho tengo una charla muy interesante al respecto, que podéis buscarla, tampoco vengo a hablar sobre mantener un sitio siempre actualizado, porque las librerías y todo el software que hay detrás es otro tema totalmente aparte del diseño web, y otro problema que podemos encontrar que tampoco voy a hablar es el tema de la cache y de los gatos sobre el teclado. Lo que quiero deciros con esto es que todos esos problemas que tenéis en la lista no lo hemos encontrado en algún momento y todo tiene su solución, cada uno pues unas artes diferentes, por eso mismo yo me voy a centrar en el contenido. Y con esto claro quiero que veamos una página típica donde ha sido diseñado con un wiframe, todo es perfecto, encaja donde tiene que ir, pero ahora cuando lo llevas en la realidad, cuando lo implementas en diseño web, ves que hay cosas que no terminan de encajar, por ejemplo, aunque no os aprecie, esta imagen está un poco hechazada, un poquitín, porque como podéis ver esto tiene un aspecto tal vez de 4 o 3, pero se ha dado una imagen que tal vez es totalmente cuadrada, entonces claro, el diseñador de esta página no ha tenido en cuenta que esto puede ocurrir, pero es que tampoco ha previsto que pasa si aquí, en gestión del sitio, le mete mucho contenido, este giro ha crecido, podéis verlo aquí desde la imagen, este espacio que no debería estar, ha invadido la sección de abajo comiéndose este botón, y no solo eso, si es cada uno de más vemos que este título que daba muy guay en el wiframe con una sola línea, de repente tiene tantas palabras que desborda, es todo, creo que nos va sonando a todos, pero es que no solamente eso, es que no hay un espacio de seguridad que está aquí preparado, los botones se han hecho con un tamaño fijo, no estamos preparados para que haya un máximo ni un mínimo, problemas muy típicos, cuando llevamos a la práctica, vale, y todo esto cómo se soluciona, pues ahora os voy a hablar, pero antes sí que me gustaría que viéramos que los problemas cuando trabajamos con un contenido que puede estar en otro idioma, que puede estar en el nuestro, pero es más largo o más corto, que también ocurre, siempre tenemos lo mismo, es por un lado, el contenido es más largo del esperado, claro, y el diseño es fijo, o es más corto, lo tenemos preparado para que haya una bonita palabra, pero de repente tenemos un ebony, o la imagen no está preparada, ya que la sube el usuario, entonces no está preparado para el espacio que hemos diseñado, no se conoce el tamaño, tampoco la, en realidad no es tanto el tamaño, porque eso se puede optimizar, tú puedes prepararlo, es más bien la proporción, el aspecto de radio, o también puede ser el idioma, que tú lo has preparado todo para que estén castellano, te lo llevas al inglés, y otra, otro lo llevas alemán, y bueno, aquí hubo un inicio, claro, y tienes que encajarlo todo eso de alguna manera, bien, pues el CSS defensivo, bien aquí, a rescatarlo, el CSS incentivo son un conjunto de técnicas que evitan romper el diseño cuando no se tiene control sobre el contenido, es decir, cuando el contenido es generado por el usuario, o por un CSS, como puede ser WordPress, cuya longitud desconocemos, vale, hay un hombre que se llama Ahmad Shabab, que ha recogido en una página web, que es esta, la tenéis aquí, una serie de tips o artículos con los mayores problemas que nos encontramos en este aspecto, con sus posibles soluciones, podéis o visitar la página, y ya podéis iros de aquí, porque está todo el contenido, os quedáis, yo estoy una masterclass y un resumen bien compactado, muy fácil, por cierto, es una página que yo tengo siempre en mis marcadores, cuando necesito resolver cierto problema, me sirve de inspiración, también tiene muchos trucos de CSS, bueno, que yo he ido también adquiriendo en mi flujo de trabajo, o sea, es muy interesante esta página, bien, volvemos con esmeralda, le damos este diseño, le decimos, bueno, nos gustaría implementar esta tarjeta, que es para speakers, como puede ser aquí en la workroom, donde cada uno tiene su espacio, su columna, va a haber en la parte superior una imagen, después va a estar el nombre del ponente aquí, después habrá una preve descripción y sus redes, no, de X, Facebook, lo que sea, más todo, vale, le avisamos de que ese es el diseño para Mobile y luego en escritorio se va a ver un poco más ancho, entonces ella, comete el primer error, dice, vale, es lo mismo, pero más ancho, por los tiros, y cada vez, no, no, vamos a enfocar la otra manera, que te parece si hacemos dos columnas, vale, la imagen llevamos un lado, el otro, vale, es un buen comienzo, empecemos trabajando las bases de cualquier página web, la estructura, los timientos, el HTML, bien, aquí tenéis, uf, no se ve nada, bueno, lo resumo, tenemos por un lado un article, donde estamos utilizando la nomenclatura BEM, bloque elemento modificador, se llama speaker esta clase, todo lo que tiene dentro, pues pequeños elementos, tiene la imagen, donde tiene un ALT, bueno, tiene una clase, perdona, no hemos puesto un ALT porque da igual, lo hemos escondido con un área ID, porque no nos interesa que esto lo pueda leer un lector de pantallas, le hemos puesto un H2, porque hay un H1 en algún sitio, como veis, los nombres separados con dos guiones bajos típicos de BEM, tenemos un parafoc es bio, tenemos un navegador que tiene la típica estructura, con la etiqueta de contenido en app, pero luego su contenido es nap, uli y una, además como estos hipervínculos tienen un emoji o un carácter que no puede ser leído por temas de accesibilidad, hay que añadirle un área label y ahora sí, ya tenemos algo majo por donde empezar, muy bien, pues ala, esmeralda, ponte a ello, te damos esta imagen, qué tiene de especie a esta imagen, a parte de que es muy mono este gato, que la proporción nos cuadrada, si yo la pongo, pobre gato, ha perdido peso, aparece totalmente, y bueno, aquí se ve una primera estructura, un primer boceto, donde ya se ha colocado cada cosa en su lugar, aún no se ha puesto separaciones adecuadas, veis que está aquí todo apelotonado, hay un degradado de fondo, pero hay muchas cosas que arreglar aquí, muchísimas, quien tenga ojo, me podría hacer aquí un listado bastante considerable. ¿Cómo arreglamos el tema de la imagen? Bueno, pues empezamos con lo que para mí es base en cualquier proyecto que son estas tres líneas, todas las etiquetas y mg, de igual que tú tengas un componente o solo apliques a todas las etiquetas en general, le tienes que añadir que tenga una anchura de cien por cien para que esa imagen sea responsive, pero cómo adapto yo esa imagen entonces a una resolución que yo estoy buscando, el contenedor, tú le das el tamaño al contenedor, o lo maquetas, pero la imagen cien por cien, después de eso le añades un ojo de fit COVID que te ayudará a que tú puedas redimensionar esa imagen en proporción y no se aplaste, sino que haga una especie de recorte, una especie de máscara, y además le dices que centre ese recorte y bueno, pues con estas tres líneas, insisto, que debería estar en todos vuestros proyectos, ya tenemos la imagen mucho más maja, un primer avance. Ay, esmeralda, bueno, qué más cosa se está ocurriendo aquí, pues se le ha puesto una palabra un poco larga y cuando se hace responsive, ups, ups, hay un desbordamiento, vaya, qué podemos hacer, bueno, muy fácil, le decimos cuando nosotros tengamos, bueno, previsto o hemos detectado que esto puede ocurrir, estas dos líneas y arreglado, en la primera, yo le estuve diciendo de que cuando encuentre esta situación, me haga un grab, se rompa, y por otro le estuve diciendo que la anchura de esa palabra o de ese texto no sea el tamaño del texto, sino sea cero, en otras palabras, que se pueda resolver, y con esto pasamos del problema anterior a una palabra que podemos evitar que salga por los laterales, bueno, ese caso ya es muy extremo, pero ahora lo tratamos, todo tiene solución en esta vida, vale, más cosas, si os fijáis, cuando yo estoy poniendo esta, bueno, unos nombres, como pueden ser esto, uno nos ha pedido, yo lo he diseñado para que estén una sola línea, pero la realidad es que ya sabéis cómo funciona el contenido dentro de HTML y CSS, esto pues automáticamente me va a saltar, me va a crecer en altura, aunque anchura yo lo controle, y esto es un problema, cuando ocurra este caso tenemos que pensar cómo lo queremos resolver, no hay una forma mágica, tienes que decidir entre opción 1, dejar que esto ocurra, opción 2, ocultarlo, opción 3, ocultarlo, pero añadir algún tipo de animación, que se pueda escrolear de derecha a izquierda, o lo último, que es lo que vamos a aplicar ahora mismo, es añadir una elipse, me explico, yo añado esta línea de CSS que le estoy indicando con este estilo de que no se rompa, en otras palabras que no haga un grab, le digo que cuando sobre salga por un lado se oculte, y por último le digo que añada unos puntitos al final de esa línea, pues con esto le enseñamos a Esmeralda que podríamos conservar esa línea, a coste de estos tres puntos, que esto se puede seguir trabajando, se puede añadir perfectamente una animación en CSS en JavaScript o un pequeño scroll y se puede visualizar, no estamos contenta alguna en Esmeralda, porque seguimos trabajando y hay problemas, no ha tenido en cuenta los espacios de seguridad, seguimos haciendo la anchura y todo está pegado, o sea lo estéis apreciando, esto está pegado con esto, esto está pegado con esto, no hay separación entre las dos columnas, es un desastre, entonces esto es lo más fácil de todo, porque lo único que tengo que hacer es añadir un grab, sobre todo se estoy diseñando con playzone grip, y añadir un pequeño body en alrededor, con estas dos simples líneas que son muy comodas de añadir, porque lo podemos meter a casi cualquier tipo de maquetación, pues ya tenemos como veis mucho más agradable en eso en torno, luego en versión mobile, veis, se conserva, queda bastante bien. Continuamos y tenemos un problema con los botones, fíjaros, son muy pequeños además fáciles de que no sean pulsables, tenemos que jugar siempre con los botones, esto ya no es solamente por este diseño, sino por cualquier cosa que hagáis, tiene que tener un área suficiente de pulsado para que tu dedo gordo le puedas dar en cualquier momento, no tengas que hacer un zoom y ahí jugar como un francocirador, y con eso, sobre todo en estos casos donde no sabemos qué pueda haber, pues lo más cómodo es añadir esto, una mínima anchura y habrá mejor, permite que crezca el botón como podéis ver con website, se puede darle toda la anchura que quieras y bueno los botones como mínimo tienen una zona donde podemos trabajar, tiene más cosas, pero esto sería lo más interesante, también ocurre que no se ha previsto la anchura máxima, esto es una salvajada, porque si yo tengo un diseño, un grid, dos o tres columnas me da igual, y el último elemento que tengo en la parte inferior no he previsto, puede crecer y ocuparme de todo el ancho, entonces me queda un diseño terrible, un desastre, esto no se le, esto es un desastre, entonces dijimos esmeralda, vamos a ver, por favor, mete a todos tus componentes una anchura máxima, no es tan difícil y con esto ya lo tenemos, puede haber todo el espacio que quieras a los laterales, que esto ya se va comportando como toca, como veis no son cosas muy difíciles, es tener mimo, es tener ganas de dejar las cosas medianamente bien, y continuamos, ya hemos visto el máximo, ahora falta el mínimo, hasta qué momento yo puedo aplastar este componente, bien, ahora mismo esto que estéis viendo aquí es lo máximo, bueno lo mínimo que yo puedo reducirlo, pero lo máximo que puedo aplastarlo, no puedo más y es un problema, y dónde está la limitación aquí, en estos botones, porque la imagen ya está tratada, esto también está tratado y bueno no se ha hecho nada de ese barrafo pero va a crecer perfectamente, ¿qué hacemos con estos botones? pues esto tirado, le tienes que añadir o un display flex con su grab o grab y ya lo tienes, y con esto ya me permite que este componente pueda tener toda la estrechez que tú necesites, está claro que esto luego lo podemos un poco vitaminar, añadiendo que estos botones tengan una anchura de 100% a partir de cierta resolución, o incluso podríamos jugar con un grid y ese grid convertirlo en la columna también, tiene muchas funciones, pero fíjaros, que diferencia, poder pasar de esto a esto con una línea de CSS, ahí está el potencial, ¿vale? otra cosa que a mí me molesta mucho cuando yo navego en una página web, sobre todo en la versión mobile, es hacer scroll y que según yo voy haciendo va saltando los óperes, es como si yo cada vez que apretó en mi pantalla, muevo un ratón ficticio en mi móvil que se pone encima del elemento y que pasa cuando hay un ratón encima de un elemento pues se activa la animación o el estilo de ese óper y queda terrible, queda muy feo, en cuántas páginas web habéis visto esto, qué mal, qué feo y cómo evitamos esto, con esto media over 2 puntos over, dentro pones tu over y ya está solucionado, en versión escritorio vas a tener tu over en versión mobile no va a ocurrir, lo islas completamente así de fácil o difícil como lo queráis ver, ahora podéis ver cómo repito lo mismo, pero no es la grabación que ya he dejado el cachito abajo, pero bueno veis que estoy moviendo con el móvil y ya no ocurre eso y si sois grandes amantes de los preprocesadores de CSS, como puede ser SAS, les y compañía, yo utilizo esto en todos mis proyectos, tengo un mixing, con ya esta estructura que os he enseñado antes, cuando por ejemplo en un botón le quiero añadir over, en lugar de poner aspersand 2 puntos over y poner el estilo o el conjunto, directamente pongo mi mixing a roba include over paréntesis y esto ya me añade toda esta cosa tan fea y no cambia mi flujo de trabajo, es algo que ya están en todas mis plantillas, en todas mis páginas web y bueno gratis tengo ese saltito de calidad, o sea que es muy cómodo, esto es un trucazo, esto no está en la página de CSS defensivo, esto es propio, vale pues con todo esto después de una semana de desarrollo y a Meralda por fin lo terminó, lo probamos y funcionaba bien, alguna cosita que había que mejorar dentro de Safari, pero bueno se pudo hacer, pero bueno qué le vamos a hacer a la pobre chica, es que la verdad que estaba aprendiendo, pero bueno, qué lecciones saco de aquí, o vosotros que estés aquí presentes, primero tenemos que evitar el distorsión de las imágenes, lo que he dicho antes del object fit, cuidado con las palabras largas, podemos prever que haya ciertos momentos en que esas palabras tengan que saltar, no solamente las frases o lo que sea necesario, cuidado con las líneas, si tú en el diseño lo tienes de apuesto para que haya una sola línea, tienes que pensar cómo lo vas a solucionar, cuidar los espacios de seguridad, no cuesta nada poner un poquito de gap y un poquito de padding para que todo se quede bien bonito y elegante y si puedes seguir la hoja de algo que se haya pasado el x y o lo que sea para que quede todo de forma uniforme, o altura mínima, si no va a crecer hasta el infinito y eso es un rollo cuando trabajamos con maquetaciones un poco más avanzadas, fijar también el tema de, bueno, fijar la altura máxima, aparte de la mínima, hay que tener cuidado con flex porque no nos da el grab por defecto, hay que dárselo y el over en tema de mobile, esto no cuesta mucho de arreglarlo y se nota esa diferencia, yo supongo que vosotros también queréis hacer bien las cosas pero para mí no, yo no puedo entregar a un cliente una página web que tiene unas deficiencias que yo estoy viendo, aunque él no lo vea tú tienes que tener un estándar de calidad y eso se refleja tanto en tu trabajo como en la perfección que tiene los otros de ti, vale pues con esto yo ya está, se ha sacado la pobre emeralda, se le dijo que pues muchas gracias por haber estado ahí como diseñadora web junior en este caso pero que le teníamos que dar una patada, todo ese conocimiento que había adquirido pues se lo puede llevar con ella y todo esto, entonces ella pues coge su caja, coge sus cositas, puso su muñequito de picachu, el de Mario y cuando se iba a ir por la puerta le dijimos, espera, dónde vas, te damos la patada pero hacia arriba, con todo este conocimiento que has adquirido yo creo que ya puedes empezar a formar a la próxima generación de diseñadores o los nuevos empleados que van a entrar en la empresa y esta chica se vio creciendo, actualmente ella no trabaja conmigo, es una empresa muy grande haciendo proyectos bestiales y todo el peso recae sobre ella y a día de hoy yo me pongo en contacto con ella cuando tengo dudas de temas muy concretos porque al final la constancia y el buen hacer pues tiene sus resultados. Bien, me gustaría dejar esta frase, si os queda algo de toda esta charla, al igual que preparar tus diseños para diferentes tamaños de pantalla, prepara tus diseños para diferentes longitudos de contenido y eso es todo. No tenéis pregunta verdad, estaba todo a hieras de posiciones, no hay obligación, si no hay no hay. Quiere preguntar yo pregunto, a ver el futuro del CSS, cómo lo ves, el futuro del CSS, evoluciona correctamente? Mira, yo tengo la teoría de que el CSS ya es perfecto a día de hoy porque ya tenemos las herramientas necesarias para hacer prácticamente cualquier cosa que se nos ocurra, otro tema, claro se nos seduce mucho tailwind, todo el tema de la atomicidad, el de meter unos componentes utilizables, yo solo entiendo, pero si tú tienes una arquitectura o una nomenclatura clara de CSS sabes trabajar con SAS, soy muy fan de él y tu equipo está bien formado, en realidad no te hace falta estar pendiente de la última caterística que va a salir de ese duelementos, de que ahora puedes hacer esto con Chrome, no, ya está ahí, ya depende de ti que sepas gestionar bien ese contenido, esa página. Gracias, te quería preguntar si el desbordamiento por una configuración, por ejemplo, en mi caso yo por discapacidad visual, tengo en mi dispositivo móvil un tamaño de tipografía enorme, entonces ya no es que la palabra sea larga por sí, porque digamos que la palabra está bien en las pruebas que hace el que genera contenido, está bien, pero yo por mi configuración desborda, se podría llegar a parte con los dos ejemplos que tú has puesto, de que salte de línea o con los tres puntos, la tipografía fluida, puede llegar a arreglar, eso no valdría para ese caso. Bueno, gracias por la pregunta, es cierto que tú puedes jugar con el tamaño de la letra y si es variable, pues ya ni te digo las barbaridades que puedes hacer ahí, si juegas con ciertas medidas, si ese tamaño está en un punto justo en que es legible, bueno, si puedes hacerlo, yo casi prefiero, si de verdad es importante ese contenido, dos líneas, si caben ese diseño, claro, si es una impresión o un pdf, pues entonces ahí mal lo tenemos, porque no podemos jugar con animaciones ni nada. Yo le digo, justo ayer nos surgió un ejemplo, una carta de restaurante y la palabra está bien en una persona, en el que tenga esta modificación de cómo ve la web, pues la palabra le cabe perfectamente, pero en mi caso la palabra de borda, porque como la he hecho en dos colunas, entonces la palabra parte, a mí me partían casi todas las palabras en el menú, entonces ya la dificultad de la propia legibilidad, o sea, es que para mí el resultado es complicado leer, entonces claro, sí, hay que mantener el diseño, la tipografía todo lo que tú quieras, pero luego, al final, aparte del propio diseño está la legibilidad, por eso lo he preguntado. Sí, es que es un tema muy delicado, porque tienes que decidir entre respetar el diseño o hacer que el diseño se adapte a la realidad o buscar, bueno, decir niapas no es la palabra adecuada, pero buscar soluciones intermedias, donde los dos estén felices, no, donde no tenga que ceder el diseño, pero es que es una situación muy... hay que hablar más con el cliente que con otra cosa. Muchas gracias. Gracias a ti. Alguna pregunta más. Buenas. Hola. Yo quería preguntarte, que he visto que hay algunas cosas que antes se podía hacer con Javascript, lo estoy viendo que lo están incluyendo para hacer con CSS. ¿Tú como ves eso, ves una práctica que se va a extender más en el tiempo y le va a ganar terreno a Javascript y CSS o no? Lo bueno de CSS es que es más rápido que Javascript, es más compatible, si está dentro del estándar, y por último es mucho más fácil de mantener en el tiempo. Yo prefiero tirar siempre que se pueda y es realista hacerlo con CSS, pero también es cierto, es como tú hay que valorar en la vida. Una línea de Javascript te puede ahorrar un bloque CSS enorme. Tendría que ver cada situación y cada caso. Gracias. A ti. Buenos. Hola, Lorenzo. Quería preguntarte, antes has dicho que actualmente el CSS ya tiene todo lo que tiene que tener. Desde mi punto de vista, sí. Y claro, ¿y por qué no tiene ya SAS o el CSS dentro del CSS? Es verdad, ya no todo, el 99,9. Sí, es muy interesante porque hubo un momento en la historia cuando se estaban haciendo los estándares de los navegadores en que incluso se pensó en que jQuery estuviera integrado dentro del navegador. ¿Por qué no, con otras cosas, meter SAS que también ya estuviera por defecto? Creo que es más bien por un tema de legacy. Es decir, oye, esto tenemos que hacer, que siga funcionando, pero claro, no podemos ir siempre a la ola de los cambios que están ocurriendo, porque esto puede desaparecer, luego creamos una dependencia si lo quitamos del navegador. Claro, el estándar es muy rico, pero bueno, también las herramientas de desarrollo actualmente son brutales. Antes es verdad que tenías que pelearte mucho más con Javascript para precompilar por poner un caso. Tenías que tener un Ruby instalado. Hoy en día tienes un montón de software visual que te lo puede compilar. Entonces no lo veo ya tanto una barrera de entrada. Ya es, aprender los fundamentos y que no tengas miedo, por supuesto, que no te dejes llevar por la última tecnología, sino vayas siempre a lo que funciona. Gracias. Gracias a ti. No tengo muy claro si te responde. Y una pregunta, pues, la última, la mía. La web que nos ha recomendado antes, la de Defensives, se va actualizando, se va poniendo cada vez más contenido. Poco hace. Sí, porque yo no habéis visto muy a menudo y no veo cambios. También es verdad que a ver este hombre es como se confusió en su época. No es que haya creado el contenido. Él ha cogido lo que ya existía y lo ha reunido en un blog. De hecho, él también aprovecha para hacer charlas y moverse. Entonces, estas técnicas o esta librería de formas de solucionar, pues no va a evolucionar mucho más, porque digamos que ya como está todo resuelto, lo más esencial. Lo que podemos esperar son a los nuevos estándares, exacto, que eso incluya o que resuma dos o tres líneas en una y poco más. Pues nada, muchas gracias. A ti.