 Gracias por el aplauso antes, así ya, el aplauso yo ya me lo he llevado, lo haga como lo haga, así que muchas gracias. Muchas gracias también a la organización de Work and Chiclana por darme la oportunidad de dar una charla aquí, me pongo delante de la línea para que se me vea mejor. Yo sé que no es difícil seleccionar charlas porque hay ponentes muy buenos y así que quiero agradecer tener esta oportunidad que para mí es un privilegio. Voy a hablar de Pempot, no sé si alguno de vosotros conoce Figma, ¿puedes levantar la mano por favor? La mayoría, bien, estupendo, me sirve para hacer la comparación. Pempot es el Figma libre y gratuito, si conocéis Figma, me va a ser mucho más fácil y, de hecho, para los que estáis viendo el vídeo, la mayoría de las personas que estamos aquí conocemos Figma, o sea que va a ser muy fácil. Me presento, soy Ana Cirujano, soy diseñadora de negocio digital, soy orgullosa embajadora de marca de Piensa Solutions, organizadora de la Meetup de WordPress Torre Lodones. Torre Lodones es un pueblecito de la Sierra de Madrid de 25.000 habitantes que el fin de semana que viene vamos a tener nuestra primera Workup, que también soy organizadora, os invito a todos a que vayáis para allá. Si os apetece vivir, si os quedáis con ganas de Workup, allí vamos a tener más. Tengo un podcast que se llama un billete a chatanuga que va sobre diseño, marketing y negocios online con mi socio Pablo Moratinos, con el que también tengo una academia online en la que enseñamos también diseño, marketing y negocios online. Y creo que no me dejo nada sobre mí. Que me sigáis en Twitter si queréis, para reutilizar mucho sobre la charla y que llegue a más gente. Pempot es una herramienta de diseño colaborativo y prototipado. ¿Cuántos de vosotros implementáis una web sin tener un diseño, sin haberlo diseñado primero o sin que alguien os haya pasado el diseño? Algunos se atreven a levantar la mano, pocos afortunadamente. Vosotros sois los mismos que vais a la compra sin llevar la lista de la compra, ¿no? Vais al súper sin llevar la lista de la compra y entonces ¿qué ocurre? Que compráis más de lo que necesitáis y que os dais cuenta de que se os ha olvidado comprar a lo que ibaís a buscar. Esto se traduce en que os gastáis más dinero y perdéis el tiempo. Y esto es lo que ocurre en los proyectos en los que nos ponemos a implementar la web sin tener previamente un diseño. El diseño es la lista de tareas de la implementación y desarrollo de la web. No es más que eso, es una planificación previa, las instrucciones, la lista que luego, cuando estamos en la fase de desarrollo y implementación, vamos siguiendo, no es más que eso. Y es fundamental para ahorrar tiempo, dinero y para hacer proyectos de una manera más segura. Además, lo que nos permite tener esa lista de la compra cuando estamos en un proyecto web es recibir feedback. El feedback es súper importante en todos los proyectos web. Feedback de cliente, feedback de otros usuarios, de otros diseñadores, feedback del equipo de desarrollo, desde el inicio del proyecto. Si nosotros no comprábamos al inicio del entreproyecto y en las etapas finales que nuestro diseño está lineado con las expectativas del cliente que cumple los objetivos de negocio, que es técnicamente posible desde el punto de vista de desarrollo que está dentro del alcance de la propuesta, que eso lo conoce el desarrollador mejor que el diseñador. Si no, estamos constantemente recibiendo feedback de todos los stakeholders, no a ver, eso permite la palabra, no sé cómo se diría en castellano, del proyecto, todas las personas que participan en el proyecto. Entonces seguro que vamos a meter la pata y seguro que vamos a tener que volver para atrás en fase de desarrollo que es mucho más caro que volver para atrás e iterar en fase de diseño. Con lo cual, espero que con estos argumentos, os hayáis convencido de que hay que ir al supermercado con la lista de la compra para hablar tiempo y dinero. Este es el aspecto que tiene Pempot, se parece mucho a Figma, a la izquierda tenemos las herramientas de diseño, diseño vectorial como Figma, en vez de tenerlo arriba, lo tenemos a la izquierda, tenemos también el panel de capas, el panel de assets, arriba tenemos las personas que están colaborando en ese momento en el proyecto, y ya sabéis que es también colaborativo como Figma, y a la derecha tenemos el panel de propiedades de la capa, en el centro, por supuesto, el diseño, en este caso era la bolga en ciclana. Pempot tiene también componentes, los componentes son fundamentales cuando estamos diseñando para ahorrar tiempo. Un componente es un diseño, puede ser un botón, un menú, que se repite en varias partes a lo largo del sitio web, en distintas páginas o incluso en distintas partes dentro de una misma página, lo que hacemos es convertir ese diseño en componente para que cuando lo duplicamos para hacer modificaciones o para ponerlo en otras partes, herede las propiedades de ese componente, tenemos componentes e instancias, que ocurren igual que en Pempot. Esto nos permite que cuando necesitamos realizar un cambio en una parte del diseño, al realizarlo en el componente, ser principal, se realice ese mismo cambio en todas las instancias y a la vez también podemos hacer variaciones dentro de esas instancias. Si no utilizáramos una herramienta como Pempot o Figma, no podríamos, si tuvieras que hacer un cambio, estar repitiendolo en todas las partes del diseño, si no lo usáramos sería una pérdida de tiempo horrible. Flex Layout es diseño automático, que además utiliza Flexbox, la lógica de Flexbox, ahora hablaré más adelante en profundidad, porque esto es algo que tiene Pempot y que no tiene Figma y que es increíble, es una pasada. Desde el punto de vista es el motivo por el que podemos dejar de usar Figma y empezar ya a usar Pempot. La gestión de fuentes es que podemos utilizar las tipografías que tengamos instaladas en el navegador. Esto es cómo funciona Pempot arrastrando un botón, que sería un componente, lo arrastramos a nuestro diseño y podemos modificar el texto sin problemas, modificar una instancia de ese componente y que funcione. Este es el aspecto que tendría un diseño de una aplicación móvil de gatitos hecha con Pempot. Por supuesto podemos hacer prototipos interactivos, podemos emular el diseño que finalmente va a tener en la web o la aplicación, en producción, para poder testear de una manera lo más parecida a cómo va a ser después la aplicación en producción. Podemos realizar interacciones, es decir, ¿qué va a ocurrir cuando hagamos click, cuando hagamos el efecto hover, cuando hagamos una serie de disparadores, desencadenantes, ¿qué va a ocurrir? Podemos abrir capas, hacer todo tipo de interacciones que suelen ocurrir en aplicaciones y también podemos definir transiciones entre ellas, con lo cual podemos hacer animaciones y diseñar diferentes flujos para que en un prototipo que compartimos para pedir feedback podemos elegir, por ejemplo, un Customer Journey concreto. Cuando el usuario entra directamente a una landing page que ocurre, o cuando entra directamente a una página concreta que no tiene porque ser la página principal, definimos ese flujo, aunque tengamos diseñado todo el sitio, podemos definir ese flujo para pedir feedback sobre ese flujo en concreto. Así es como se ve el aspecto que tiene el diseño de una interacción, y así es como luego lo podemos ver en escritorio, aunque también, por supuesto, podemos visitar el enlace de PEMPOT desde nuestro dispositivo móvil y verlo más o menos como sería en un entorno real. Las herramientas de diseño, para mí, el verdadero valor que tiene es que son en realidad herramientas de comunicación. Lo que hacemos los diseñadores, realmente, cuando diseñamos es comunicar, como decía antes, dar las instrucciones. Lo más importante es la comunicación entre diseño y desarrollo, pero también entre diseño y cliente, entre diseño y usuario cuando hacemos test, y la colaboración en tiempo real nos permite también trabajar con otros diseñadores, no solo con clientes o con el equipo de desarrollo, sino también trabajar en distintas partes del sitio web. Cuando compartimos componentes y haces librerías, podemos ser coherentes, aunque seamos varias personas, trabajando en tiempo real. Podemos dejar comentarios, tengo la presentación de cómo se deja un comentario, lo valioso aquí es que podemos dejar comentarios exactamente en la parte del diseño de la que queremos comentar algo. Esto es súper útil. PEMPOT es la herramienta de diseño que aman los desarrolladores, y ahora vamos a ver mucho mejor porque voy a ir directamente a la presentación. Cuando nosotros hacemos un diseño, el desarrollador directamente puede copiar el código que tiene que implementar después en la web que está desarrollando. También puedes decir, bueno, yo es que utilizo variables, yo es que utilizo ya, ya, pero tienes el camino muy andado, teniendo el código base del que tienes que partir, exactamente, para copiar y pegar. También el Figma, oí, perdón, PEMPOT, es como es software libre, es open source, es gratuito. Tiene disponible una serie de recursos públicos que en Figma son de pago. Por ejemplo, plantillas y librerías que se pueden compartir. Canal de YouTube con todos los contenidos distribuidos de manera gratuita y un centro de ayuda con un foro que podemos consultar igual que el foro de WordPress cuando necesitemos, cuando tengamos un problema con la herramienta. Este es un ejemplo de una librería de ilustraciones diseñada por una de las empleadas que trabajan en Caleidos, que es la empresa que está detrás de PEMPOT que se puede utilizar de manera gratuita. Y ahora viene La Madre del Cordero, por lo que vais a salir de aquí amando PEMPOT. Flashbox para el que no lo conozca es una forma de colocar los objetos en CSS que tienen en cuenta un contenedor, unos elementos y un eje principal y un eje transversal. En PEMPOT, directamente, podemos declarar los mismos valores llamarlos de la misma manera que se llaman en CSS, con lo cual los diseñadores vamos a hablar el mismo lenguaje que hablan los desarrolladores. Y cuando una diseñadora habla de distribuir elementos los desarrolladores hablan de declarar Space Between, pues en este caso nosotros vamos a hablar de la misma manera Space Between, en vez de hablar del lenguaje que solo entendemos los diseñadores, ¿no? Es un ejemplo. Con lo cual al llamar a las cosas de la misma manera nos vamos a entender mejor y además se utiliza de una manera muy sencilla, ¿no? Esto, en Figma, no se puede hacer el RAP, Flex RAP que es una propiedad que se declara en CSS para poder hacer que los elementos fluyan, en Figma no se puede hacer no entiendo por qué, pero no lo han diseñado así, en Flexbox, Calaídos, que por cierto es una empresa española con base en Madrid pues lo han diseñado así directamente, ¿no? Esto es una cosa maravillosa, ¿no? Que podemos declarar directamente con un click y que los elementos se comporten cuando lo declaramos en CSS en el navegador, ¿no? Y además bueno, que podemos ver un poco mejor cómo se comporta, cómo ponemos los elementos Además, podemos copiarlo como hemos visto antes directamente, si no nos acordamos de si teníamos que poner flash end o teníamos que poner ¿era justify o era aligned? Bueno, pues vamos a Pempot, lo hacemos arrastrando y soltando haciendo click en las propiedades y ya tenemos el código Teníais que ver cómo se le están iluminando la cara a todos los alumnos del módulo de desarrollo de aplicaciones No utilicéis Pempot para copiar en los exámenes Tienes que aprender Flexbox para luego poder modificar las propiedades entendiendolas Webhooks, los webhooks son esto es una cosa muy técnica pero viene a ser te permiten poder saber cuándo ocurre una acción en Pempot y en otra herramienta de terceros poder hacer otra cosa viene bien para como en Pempot no hay plugins para poder hacer un plugin de manera externa utilizando los webhooks los desarrolladores lo entendéis solo con que os diga que hay webhooks ya es suficiente que se pueden hacer plugins de manera externa el equipo está trabajando en desarrollar que se puedan hacer plugins pero en momento no se puede se va a poder en breve ya sabéis los WordPresser sabemos que los plugins son los que realmente hacen que una herramienta se puede utilizar y evolucione porque podemos adaptar la herramienta igual que WordPress Pempot se puede adaptar a través de plugins para que haga las cosas pero queremos aunque no sea aunque no quiera todos los usuarios pero sí una parte de ellos en breve va a haber plugins pero en momento hay webhooks que son muy potentes en cuanto a la accesibilidad la verdad es que el equipo de desarrollo de Pempot está muy concienciado con la accesibilidad y aunque todas las personas puedan utilizar la herramienta independientemente de la herramienta y aparte de desarrollar las primeras funcionalidades que desarrollaron fue que se puede hacer RTL que se puede escribir de izquierda a derecha y de derecha a izquierda para poder involucrar también a personas del mundo árabe por ejemplo pues también se puede usar Pempot con el teclado que es una cosa muy útil para personas que no pueden utilizar el ratón o el contraste de colores cuando se envíen las distancias de los elementos por ejemplo o las guías tienen muy muy en cuenta pasar test de accesibilidad para que sea accesible para todo el mundo una cosa muy guay de Pempot es que es multiplataforma se puede utilizar desde cualquier dispositivo ya sea un Mac, Windows desde el móvil y además de momento la aplicación oficial se puede usar en el navegador pero tú también puedes si sabes usar estos programas o tecnologías como docker o el esteo puedes alojar Pempot en tu propio servidor esto sería en comparación con WordPress que tú puedes alojar WordPress en tu servidor tu contratas un espacio de hosting y alojas WordPress en tu servidor pues esto sería igual tú puedes alojar Pempot en tu servidor con lo cual se abre todo un si hacemos la comparación con WordPress se abre todo un mundo de ecosistema de negocios alrededor de Pempot que pueden hacer que Pempot crezca porque todos podemos sacarle partido a ser open source si habéis estado en la charla de nilo esta mañana ya sabéis qué significa esto podemos usar Pempot de manera gratuita pero podemos alojarlo en nuestro servidor y ofrecer servicios de service también existe una una aplicación que lo ha desarrollado una persona de la comunidad de Pempot no desde el equipo de Caleidos sino una persona que a esa red entonces existe la aplicación de escritorio con lo cual podemos usar Pempot en nuestro ordenador no tenemos porque alojarlo en un servidor y esto nos permite muchísima flexibilidad diversatividad que podemos utilizar Pempot e incluso sacar un rendimiento económico ofreciendo servicios a terceros y escalabilidad Pempot los que usáis Figma podéis ver que cuando usáis Pempot vais a ver que no tiene componentes interactivos por ejemplo pero al estar desarrollado con estándares que es algo que Figma no ha hecho Pempot está desarrollado con SVG un código estándar universal y que cualquier desarrollador puede continuarlo y colaborar Dota Pempot de muchísima escalabilidad es increíble como van avanzando es un equipo muy pequeño en Madrid vamos desde el punto de vista en muy poco tiempo haciendo crecer la herramienta muchísimo lo que he comentado antes es instalarlo en nuestro propio servidor y ofrecer servicios alrededor incluso podríamos hacer plugins cuando se pueda, cuando esté desarrollado plantillas y montar todo un negocio en torno a esto, para mí es una que tiene muchísima visión de futuro el proyecto y quiero terminar espero que os haya convencido y que os apetezca y quiero terminar invitando Pempot.app y probar la herramienta eso es todo, eso es lo que os quiero decir si tienes preguntas Preguntas, levantan la mano las pegatinas lo primero es decir que me ha parecido muy interesante la aplicación creo que tiene muchísimo potencial mi pregunta es qué lenguaje se ha utilizado para desarrollar esto y si se sabe todavía cómo se puede utilizar a la hora de desarrollar estos plugins por parte supongo que de la comunidad no lo sé lo he leído pero no me acuerdo es que soy diseñadora no soy desarrolladora pero es fácil de descubrirlo podemos hacer una búsqueda en Google es muy estándar yo sé que está hecho con SVG pero concretamente cómo se comportan las cosas los sectores son SVG me imagino que será Javascript no me atrevo a decirte nada pero puedes buscar y hay mucha documentación abierta gracias de hecho puedes ir a GitHub y ver cómo está hecho directamente y contribuir al proyecto también sobre la parte de licencias que no podía asistir a la primera chala pero yo que cuando tú la propia aplicación en tus servidores puedes realizar modificaciones a este software para que se adapte por ejemplo a algún tipo de cliente o está permitido eso es todo, gracias gracias a ti por las preguntas muy interesantes muchas gracias Ana, amola mucho me alegro Santi que veré la primera parte que estaba hablando pero no la mucho siempre cuando cuentas de la parte de webhooks que por lo que sea me llama la atención qué acciones bajo qué acciones no se me ocurre qué acciones hay en los diseños para poder lanzar cuando se modifica si pues extender yo me imagino que puedes hacer cosas que hacen los plugins por ejemplo crear una automatización para hacer una escala modular yo me lo llevo a mi terreno una tipografía quiero establecer unos valores para que a partir de un tamaño de fuente base el tamaño de los párrafos se me cree el tamaño de los títulos eso se podría hacer desde el exterior y que se programando y que se genere en Pempot me imagino que a través de un webhook me lo estoy inventando a Santi porque yo no soy desarrolladora pero creo que puede ser he visto que había como un desplegable para acciones por si sabías que acciones eran las que podías desencadenar pero lo miramos luego ya nos podemos inventar algo pero suena muy bien lo que has contado si no lo han hecho lo deberían hacer lo hacemos, lo hacemos tú y yo se acabó el tiempo muchísimas gracias a todos