 Ahora es el turno de Juan Serrano. Él es diseñador gráfico. Él está especializado en el diseño editorial y desarrollo web. Le encanta lo que es todo lo relacionado al branding, a la tecnología y a la tipografía, sobre todo. Ahora nos dará unos cuantos ejemplos. Le encanta WordPress, si no, no estaría aquí, lógicamente. Tiene su propio estudio de diseño que se llama Company Studio. Ahora él, si quiere, nos podría dar más detalles. Y tiene una web, sobre todo para los que les guste las hamburguesas, a apuntar. Burgers.lof, un portal especializado en locales para hamburguesas. Hamburguesas Gourmet, que algunos les gustarán. Pues aquí tenéis alceo de esto que cuando dices, tu hostia, esta web. Quien la habrá hecho tal y cual, pues aquí tenemos a alguien. Pues sin más. Juan, tu turno. Perfecto. Muchas gracias. Bueno, muy buenas tardes a todos. En principio quería daros las gracias por estar aquí y aguantar la chapa que voy a soltar ahora, ¿vale? Y también quería pediros un fuerte aplauso para la organización, porque se lo ha ocurrado muchísimo, ¿vale? Bueno, como ha dicho el compañero Fran, soy Juan Serrano, vtnse de nacimiento y malagueño de corazón. Soy diseñador gráfico especializado en diseño editorial y diseño de desarrollo web. Soy un apasionado de la tipografía, igual que Ana. Por ejemplo. Y el branding también me chifla, ¿vale? Me encanta el branding. Y también Warp, Warp me chifla también. ¿Por qué Atomic Design? ¿Por qué me metí en este mundo? Bueno, pues necesitaba hacer que mis proyectos fueran escalables y modificables a lo largo del tiempo. También, obviamente, es un plus para mi empresa y para el desarrollo web. También me ha abierto la puerta a proyectos bastante importantes. Bueno, como ha dicho, me ha hecho Fran, mi proyecto, uno de mis proyectos principales, compañía studio, que es la empresa con la que hago diseño de desarrollo web y Burgers.Lob, que básicamente es como el tripadvisor de la hamburguesa, básicamente. Bien, Atomic Design. ¿Y esto qué es, Juan? Por favor, como dice mi compañero, Rafa. ¿Esto qué es, Juan? Por favor, explícamelo. A mí, por favor. Venga, pues vamos a ver lo Rafa. Pues Atomic Design es un sistema de trabajo basado en la creación de sencillos elementos modulares para crear estructuras de información mucho más complejos y en una metodología ideada por Brad Frost. No sé si lo conocéis. ¿Algún lo conocéis a Brad Frost? Nadie. Nadie ha oído hablar de él. Bien. Creo que me he pasado. Perdón, me he pasado a la primidad y a positiva. Es una metodología que pretende acabar con la inconsistencia y optimizar al máximo el diseño y el desarrollo de productos digitales. ¿Y esto cómo funciona? ¿Cómo funciona esto, Juan? Pues vamos a verlo. Vamos a verlo. Primero tenemos Atomic Design. Se compone de distintos elementos como átomos, moléculas, organismos, templates y páginas. Y vamos a ir viendo todo y cada uno de los elementos. Los átomos son elementos que por sí solo no tienen ningún sentido. Y es el elemento más pequeño y necesita estar acompañado de otro átomo para que puedan llegar a tener sentido. Las moléculas, como diría nuestro amigo Poncep. ¿Las moléculas? ¿Qué son las moléculas? Las moléculas surgen de la unión de dos o más átomos. Y es un elemento que puede utilizarse de forma autónoma. ¿Bien? ¿Hasta aquí todo bien? Sí. ¿Qué son los organismos? Pues los organismos están formados por conjunto de moléculas y átomos y forman una sección mucho más compleja. Y estos organismos ofrecen una experiencia mucho más completa al usuario. Y ahora lo vamos a ir viendo. Atomic Design también se compone de templates. Y es la unión de distintos organismos en una página final. Y se trata de un entregable de alta fidelidad, pero sin llegar a tener el diseño final. Y las páginas básicamente son el diseño final. Y ya contienen imágenes y otros detalles que hacen que el producto ya esté listo para entregar o para testar con usuario. Fin. Muchas gracias. Ahí no nos vamos a quedar después de venir aquí, ¿verdad? Bueno, pues ahora qué? ¿Ahora qué pasaría? ¿Ahora qué? Claro, las preguntas. No, pero vamos a seguir un poquito, ¿vale? ¿Cómo empezar a aplicar Atomic Design en diseño? Porque seguro que lo estáis preguntando todo. Yo hace dos años cuando empecé a aplicarlo, de verdad que yo veía todo esto muy bonito, pero ¿cómo empezamos? ¿Cómo se empieza a hacer eso? Bueno, yo trabajo con Adobe XD, pero también están las herramientas de Sketch y Figma, ¿cuántos diseñadores hay en la sala, por favor? ¿Que me levanten la mano? Muy poquito. ¿Cuántos desarrolladores hay en la sala, por favor? Bueno, bien. ¿Cuántos diseñadores y desarrolladores hay en la sala? Vale, bien. Era un estudio que estaba realizando, ¿vale? Bien, pues ahora vamos a empezar a ver cómo empezar, tanto en diseño como en desarrollo. La pantalla en blanco va a ser cuando estoy hablando de diseño y la pantalla cuando se ponga en negro, y voy a estar hablando de desarrollo, ¿vale? Repetimos, los átomos son elementos que por sí solo no tienen sentido. Y el elemento más pequeño, bla, bla, bla, vale. Pues bien, después de realizar todos los bocetos, y una vez que tenemos ya las claras, las características del diseño, comenzamos a crear los pequeños átomos, ¿vale? Ya hemos seleccionado tipografía, ya hemos seleccionado color, ya hemos seleccionado tratamiento de imágenes, ya lo tenemos absolutamente todo claro. Y ahora que lo que vamos a hacer, pues mira, como punto 1 vamos a preparar un set de tipografía, ¿vale? Y esto no es falta que lo diga, pero obviamente tenemos que preparar un set de tipografía para móviles también, porque no es lo mismo tener una fuente a 27 píxeles para que se vea en un móvil, obviamente. Y vamos a preparar una especie, oye, qué raro se ve aquí, y vamos a preparar un set de tipografía, ¿bien? Aquí como podéis ver, eso sería básicamente las funciones que yo voy a utilizar, o los mixing que voy a utilizar en SAS que luego veremos, ¿vale? También la prepararemos incluso en caso de que tengamos un black team, que ahora están muy de moda, veríamos cómo funciona la tipografía en ese funcionamiento. Bien, tenemos que dejar anotada la familia tipografía que utilizamos y los estilos muy importantes. No hace falta diseñadores, ¿Hola? No, hace falta utilizar 40 familias tipográficas para una sola web, ¿vale? Por favor, importantes, no hace falta, de verdad. Con un par de familias tipográficas, y ya es mucho, vamos muy, muy bien servidos. También tenemos que decir dónde hemos obtenido la tipografía, si lo hemos obtenido de Google Phone, de My Phone, donde es Phone de Smith, y cuidado con las licencias tipográficas, licencias y que sean para web, porque no lo vimos una licencia tipográfica para web, sino una para escritorio o para impresión. Seguimos con los átomos. Tenemos los colores corporativos y los degradados. Vamos a preparar un set de colores corporativos y degradados en caso de que lo necesitemos. Esto, por ejemplo, es de un proyecto personal mío, ¿vale? En Adobe Xd tenemos la parte de la izquierda, podemos ir metiendo los colores y organizándolos casi incluso por variables. Vamos a preparar el set de botones, con la versión hover, mood, selected, etcétera. Y los input de texto. Aquí, por ejemplo, tendríamos, no sé si se ve bien, pero aquí tendríamos todos los botones, aquí los input de texto, los input de, de qué, los checkbox, perdón. Y seguiríamos con la imagen a todos los tamaños y proporciones. Por favor, si tenemos una imagen a 300 por 300 y no nos sirve porque no nos cuadra el diseño, intentemos que nuestro diseño se adapte a ese... Intentemos guardar todos los formatos o utilizar los mínimos formatos posibles. ¿Por qué? Porque esto es un WordPress, por ejemplo. Cada recorte de imagen pesa en el servidor. Entonces, cada formato de imagen que diseñamos va a ocupar espacio y hay que intentar optimizar eso al máximo. El set de iconos, pues esto es fácil. En caso de que tengamos un set de iconos, dejarlo en el archivo xd para que lo utilicen en el caso de que no lo necesiten. Y si tenemos una web font, que por lo visto ahora se han dejado de utilizar, no sé si tenemos una web font, pues incluirla en nuestro archivo final. Y, como último punto, pues preparar los containers y el grid. En esta fase ya no suelo trabajar mucho, porque con Flexbox trabajó bastante bien y no me hace falta tener una rejilla. Repetimos. Set de tipografía, colores corporativos, botones, imagen a todos los tamaños y proporciones, set de iconos y container y grid. Bien, ahora pasamos al lado oscuro, al lado del desarrollo. ¿Cómo vamos a empezar a aplicar a Tommy Design en desarrollo? Bien, mi entorno de trabajo, yo trabajo con Codac, con MAMP, en caso de que trabaje en local, y en CodeKit. ¿Vale? Trabajo con SAS, es un preprocesador CSS y utilizo ITCS, que es una buena práctica para la arquitectura CSS. Bien, que ahora veremos un poquito más adelante. Bien, pues igual que en diseño, ahora vamos a desarrollo con los Atomos, vamos a establecer la font family, vamos a hacer los estilos de texto. Como he dicho antes, yo utilizo mixing porque también me permiten dentro del mixing poner un breakpoint que me va a permitir hacer directamente ese estilo de texto para móvil también. Ahí vamos a implementar también las variables de colores y de gradado y vamos también a implementar los botones, input de texto, tejarea. También el tema de los formatos de las imágenes y los helpers, que son las clases que nos ayudan en cierto momento cuando no tenemos que aplicar. A lo mejor algún estilito en concreto. ¿Qué recomiendo yo para esto para empezar muy fácil? Primitive. Primitive es un kit SAS para empezar. Un template minimalista que está organizado por carpeta. No tiene la metodología de Atomic Design, que sirvió muchísimo para empezar a comprender cómo funcionan estos tipos de proyectos. No va a permitir básicamente asentar conceptos y entender cómo funciona. Es un pequeñito bustrap para empezar tus proyectos. Así que si queréis empezar a tocar SAS con un poquito de CSS y demás, este es un buen comienzo. Y va a ahorrar muchísimo tiempo, la verdad, porque ya tienen muchas cosas ya maquetadas. ¿Dónde vamos a trabajar los átomos? Los átomos lo vamos a trabajar en las cuatro primeras carpetas. ¿Vale? Las settings vamos a meter una carpeta de variable. ¿Vale? Perdón, vamos a hacer un archivo. Creo que me he saltado una... Perdona, ¿eh? ¿Qué creo que me he saltado una de positivo o no la he metido? Pero bien, en átomos vamos a trabajar en las cuatro primeras carpetas. Vamos a crear un archivo por la variable, otra para los mixings. ¿Vale? Y para cada uno de los átomos también los vamos a implementar como un archivo SAS nuevo. Y vamos a trabajar en las cuatro primeras. Bien, ahora vamos con la molécula. La molécula, volvemos a repetir, surgen de la unión de dos átomos y es un elemento que puede utilizarse de forma más autónoma. Fácil, vamos combinando los distintos átomos. Los convertimos en componentes de la doble XD, Figma o en lo que estemos trabajando. Vamos asignando las variables de color. Vamos asignando los estilos de caracteres. Damos formato a las imágenes y ya tenemos una molécula. ¿Vale? Qué fácil todo, ¿verdad? Mira, pues vamos a ver qué podría ser una molécula. Pues mira, esto podría ser una molécula, otra molécula hecho, otra molécula y si paso la diapositiva vamos a ver que esta miniatura de post tiene un átomo dentro que es la imagen, tiene otro átomo dentro que es el título y otro dos átomos más que el techo, el excerpt en este caso en Warpre y el botoncito de la Hermas. ¿Vale? Otra molécula perfectamente podría ser un input más un label. ¿Vale? Aquí le damos formato. Lo tendríamos también, por ejemplo, un texto más un checkbox y un texto SEO. Esto lo utilizo yo para algunos proyectos que requieren de optimización para SEO y tendríamos el título H1, el H2 aquí abajo como un átomo y el párrafo, el P, lo tendríamos también como otro átomo. Bien. Y la pasamos otra vez a la parte de desarrollo. Vamos a trabajar en maquetación con la metodología BEM. ¿Alguien conoce BEM? Metodología BEM. ¿Vale? A los que no los conocéis os la recomiendo. Ahora lo vamos a ver. Especificamos las moléculas. Vamos a especificar el comportamiento de los átomos. Vamos a especificar también los estilos de los átomos y cada molécula debe tener una clase. Vamos a crear un archivo SAS que también está trabajando en la carpeta de molécula. BEM, lo que hemos dicho antes es una metodología para estructurar y nombrar clases CSS con el objetivo de mantener el código limpio, escalable y mantenible. Quiero que me levantéis la mano los que os habéis visto negros para sacar una clase CSS nueva cuando estás trabajando en un proyecto que os no ha visto gao o está empezando a tocar. Por favor levantad la mano. Vale. Con esto, con esta metodología si la aplicamos bien y con un poquito de experiencia y práctica la verdad que podemos hacer auténtica maravilla. La morfología de esta metodología la tenemos aquí abajo. Es BLOCK, el nombre del BLOCK seguido de dos guionas en medio en caso de que tengamos un elemento hijo el elemento. Y en caso de que necesitemos un modificador lo acompañaríamos de dos guionas en medio. Y aquí os voy a poner un pequeño ejemplo de lo que sería estamos en moléculas, perdón. Y os voy a poner un pequeño ejemplo de lo que sería una molécula. Aquí serían las clases que la estoy aplicando con la metodología BEM. La M, quiere decir o se refiere al tipo a la carpeta o tipo de BLOCK en la que estoy implementando esta clase BXSEO. BXSEO intento siempre optimizar un poquito para ir quitándole le voy quitando caracteres para que no pese mucho el archivo porque sabemos que siempre tenemos que intentar optimizar al máximo CSS para que no pese. Y en caso de que tengamos un elemento hijo lo vamos a denominar con los dos guionas en medio. Bien. En el caso de que también este BLOCK necesitemos hablarle con una clase para modificarlo y ponerlo en blanco y negro perfectamente podríamos utilizar esta metodología también para aplicarle la clase BGBLOCK y hablar al elemento hijo y decirle que los títulos los pongan en blanco y la molécula la pinte con el background negro. Ok. Esto es otro ejemplo sencillito donde podríamos implementar una clase modificadora y podríamos modificar con una pequeña clase este elemento. ¿Dónde vamos a trabajar? La molécula básicamente es la carpeta de molécula y vamos a ir implementando un archivo por cada tipo de molécula. Bien. ¿Cómo os vais? Bien. Veo alguno que se está durmiendo por ahí pero que tengáis dulce de sueño. No, es broma. Venga, vamos con los organismos. Los organismos están compuestos para formar una sección mucho más compleja. Estos organismos ofrecen una experiencia mucho más completa al usuario. Esto, por ejemplo, sería un organismo. Bien. Pero también podemos tener un organismo dentro de otro. Ok. Esto sería una molécula y dentro dentro de esa molécula tendríamos otros dos atomos. Esto sería la parte, el loop o la query esta de aquí que saca todos los pos sería un organismo el post en sí o la miniatura del post sería una molécula la imagen sería un átomo el título sería otro el texto sería otro y el leer más sería otro átomo. Y esto es básicamente exactamente igual. Tendríamos el organismo, molécula y átomo. Si os dais cuenta es como un juego de matrioshka. En diseño, que tenemos que hacer es preparar un set de organismo o todos los que vayamos a utilizar. Vamos a preparar en caso de que necesitemos las posibilidades en blanco y negro. Vamos a preparar las posibilidades de alineación. Y esto es una dobe que es fácil porque es básicamente repetir cuadrículas. No sé si me fijan o en sketch que se podrá hacer. Otro ejemplo de organismo un subversión no en blanco y negro pero en black theme y aquí básicamente igual. Esto sería un ejemplo de lo que deberíamos enviar al desarrollador. Cada set que vamos a preparar nos va a ahorrar mucho tiempo a futuro. Y luego también lo que podemos hacer es reutilizarlo en otros proyectos. Os cuento que estamos creando componentes reutilizables. Y cada vez que realice una modificación se va a realizar en todos los elementos. También le facilitamos el trabajo al desarrollador. Tenemos que llevarnos bien con los desarrolladores, por favor. Diseñadores, amigos, todos tenemos que llevarnos bien e intentar comprendernos entre uno y otro. Yo sé que es difícil pero tenemos que intentar un poquito de lo otro. También de un vistazo se puede saber cuántos átomos, moléculas y organismos tenemos que maquetar o creer. Organismo, pasamos a desarrollo, básicamente igual metodología BEM, especificamos el comportamiento de moléculas. Cada organismo debe tener una clase, creamos un archivo SAS por cada organismo y trabajamos en la carpeta de organismo. Facil, ¿no? ¿Cómo vais? Que veo a alguno que me está quedando durmiendo. ¿Me está quedando durmiendo, por favor? Decidme algo. Bien. Vale, los organismos, básicamente es maquetación, exactamente igual metodología BEM, carpeta de localización. Esto también nos sirve en el caso de que no tengamos activado en el caso de que tengamos que ver cualquier tipo de error en una web, en un CSS, nos dice mucho que tenemos una clase que nos está orientando en dónde está implementada esta... Perdón. En el caso de que tengamos que buscar alguna clase dentro de un archivo SAS y no tengamos activado el source map, pues esto nos dice mucho. Entonces, si tenemos un loop news y nos está dando problemas, vamos a saber directamente a qué carpeta hay. Acompañaríamos el nombre del organismo y en el caso de que queramos hacer una rejilla con dos o con tres ítems de post, la realizaríamos y la implementaríamos la clase. Y en el caso de que queramos hacerle darle formato a un fondo, porque queramos que ese organismo en concreto tenga un fondo en concreto, le aplicaríamos una clase helper. Y en caso de que queramos que en blanco y negro, pues le añadiríamos una clase de veje black, por ejemplo. Esto es una forma que yo tengo que trabajar. Luego, cada uno puede implementar la forma que quiera. Para mí, los organismos más complejos son los formularios y los dashboard. Imaginar aquí la cantidad de moléculas y ya tomo que puede llegar. Bien, pasamos a los templates. Es la unión de distinto organismo en una página final. Y se trata básicamente de la entregable y de alta fidelidad pero sin tener el diseño y el contenido final. Bien, organizamos los templates por página, le damos padding a las secciones y hay que tener en cuenta el diseño para mobile. Esto no creo que haga falta ni que lo diga, porque básicamente el tráfico, el 80 o 90 % del tráfico viene a través de móviles, pero, amigos, hoy en día nos siguen enviando diseño solo para escritorios. Por favor, enviar diseño para mobile también. Bien, esto, por ejemplo, sería una maqueta de un template que he generado yo. Los templates en desarrollo básicamente, metodología pain exactamente igual que la otra. Esto no tiene mucha complicación. Solo entender la estructura que vamos ahí llevando. Metodología pain, específicamente por organismo, cada template debe tener una clase y un archivo por cada template. Esto es muy fácil. Esto no tiene mayor complicación. En el caso de que el template de Home en el caso de que queramos convertirlo en Bege Black, hablándole directamente de la clase Bege Black vamos a poder incluso pintar todos los estilos de texto. Para mí el trabajo más laborioso está en las tres primeras capas los átomos, las moléculas y los organismos y aquí donde más códigos vamos a desarrollar, obviamente. Y para ir finalizando las páginas básicamente son el diseño final y ya contienen imágenes y otros detalles porque hacen que el producto esté listo para testear o para entregar incluso al cliente. Esto tanto en diseño como en desarrollo. Y las conclusiones. Yo saco mis propias conclusiones y os digo que la organización básicamente lo es todo. Atomic Design hace que un proyecto pueda ser escalable, mantenible y modificable a lo largo del tiempo que eso es muy, muy, muy importante. Vamos a optimizar dependiendo en qué proyecto obviamente vamos a optimizar tiempo en diseño y en desarrollo y permite hacer prototipo muy, muy rápido. Hace muy rápido también el proceso de actualización de un producto con nuevas actualizaciones muy importante también menos componentes, es curioso porque menos componentes hacen del diseño y el código un proyecto muchísimo más eficiente. No necesitamos tener 50.000 estilos, no necesitamos tener tantas clases, no necesitamos tanto para hacer un diseño eficiente. Eso es algo real. Y también permite reutilizar componentes incluso en otros proyectos. A quién no le gusta reutilizar código y en una tarea que puede llegar a tardar cinco horas realizarla en una. A quién no le gusta eso, ¿no? Eso luego al final si en términos empresariales se reduce ser más productivo, obviamente. Es mi experiencia porque al principio cuesta adaptarse al cambio de metodología pero esto obvio es ensayo error, ensayo error y es practicar, practicar y practicar. Yo animo a que os pongáis con un tema de Atomic porque la verdad que te abre puerta a proyectos bastante interesantes. Si necesitáis alguna pregunta sin problema me lo decís, ¿vale? Wordpress y Atomic Design, fácil implementación. Esto no tiene no tiene mucha cosa. Se puede utilizar en templates desarrollados desde cero obviamente o con temas en Blank como HTML5 Blank que supongo lo conoceréis todos y underscore.me. Y lo que aconsejo yo es que os creéis un template para vosotros y que lo utilicéis y lo utilicéis y lo utilicéis. Y así es verdad como os voy a dar cuenta el potencial de esta metodología. Yo por ejemplo me he creado un template SIM para mis clientes porque bueno que no tienen mucho presupuesto pero bueno me permite bastante customizar la interfaz, ¿no? Llevan Atomic Design en la metodología está optimizado para posicionamiento SEO pesa bastante poco porque está súper optimizado permite ser clonado muy rápido y con contenido se puede customizar desde la capa de desarrollo Low cost entre comillas tiene soporte para algunos plugin como contact form por ejemplo y es perfecto para empezar una nueva empresa y para alguien que no tenga mucho presupuesto ¿vale? Y con esto creo que ya he determinado mi ponencia y muchas gracias a todos Si tenéis alguna pregunta No seáis malos por favor Quería preguntarte cuando empieza desde Atomic de lo más sencillo a lo más complicado ¿no pierden poco la referencia del proyecto en general? ¿A qué te refiere? Si, a que tú estás definiendo ya la tipografía y no estás haciéndolo en contexto entonces desde el principio me imagino que eso lo que hará es como un círculo ¿no? Claro, haz de cuenta que yo desde el principio lo que he dicho de las primeras diapositivas creo que ha sido yo ya he hecho un diseño previo y yo de ese diseño previo voy sacando todas las tipografías y en base a tipografías, colores, etc. y en base a eso saco los módulos y vuelvo y los paso a las demás maquetas ya se ha hecho un trabajo previo no diseño pensando o sí, en Atomic Design directamente, sino que diseño veo los estilos de esto que me funcionan que son viables para el proyecto veo tratamiento de imágenes veo composiciones y a partir de ahí voy diciendo vale, pues esto me sirve a lo mejor claro, ten en cuenta que ya tenemos cuando trabaja un proyecto web grande ya tenemos un webframe entonces sabemos todos los módulos que vamos a ir realizando el contenido ya lo tenemos y entonces yo lo ir aplicando los distintos módulos y los distintos átomos lo explico? alguna pregunta más? o sea, yo solo quería preguntarte porque he visto como una confusión en el sentido en que Atomic Design lo entiendo como un estilo muy base, muy root de todo que en principio debería permitir un HTML más limpio y con menos clases porque estás estilando los elementos desde la base a la hora de componer los átomos y las moléculas no haya que meter muchas clases de CSS sin embargo, lo de la metodología me asusta ahora que lo explica hay mucho desarrollo mucho plugin que utiliza en esta metodología y que me cago cuando veo una clase de un chorizo de larga entonces yo te quiero preguntar tú prefieres diseñar de la base, utilizar pocas clases o prefieres diseñar más a medida los componentes y las cosas porque me has dicho que mi base es malo, tío depende del proyecto si tienes un módulo que vas a reutilizarlo pero lo tienes que reutilizar haciéndoles pequeños cambios a lo mejor si te sale rentable o te sale mejor hacer pequeñas clases modificadoras pero si en un proyecto pequeñito tienes cuatro o cinco módulos no te sale rentable depende del proyecto depende de la necesidad depende de la necesidad de cada proyecto obviamente pues si es verdad te puedes llegar a dar con un mismo bloque y tener cinco, diez, veinte clases también tenemos que contemplar la posibilidad de que si nos va a salir rentable eso de verdad no sé si he respondido a tu pregunta gracias alguna pregunta más ya está pues muchísimas gracias a todos