 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, o sea, no es fá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, que es una empresa de hosting española que tiene planes de hosting gratuitos para WordPress y también otros servicios muy baratos como Dominius, VPSes, etcétera, os recomiendo que lo utilicéis. Soy 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 y 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 váis a la compra sin llevar la lista de la compra. 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, otros diseñadores, feedback del equipo de desarrollo desde el inicio del proyecto. Si nosotros no comprobamos al inicio del proyecto y en la etapa finales que nuestro diseño está lineado con las expectativas del cliente que cumplen 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, que estamos constantemente recibiendo feedback de todos los stakeholders, no 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 dar 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, 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, en Figma ocurre igual que en Pempot. Esto nos permite que cuando necesitamos realizar un cambio en una parte del diseño, al realizarlo en el componente principal, se realice ese mismo cambio en todas las instancias y a la vez también podemos hacer variaciones dentro de esas mismas instancias. Si no utilizáramos una herramienta como Pempot o Figma, no podríamos, si hubiéramos que hacer un cambio, hay que repetiéndolo en todas las partes del diseño. Si no lo usáramos sería una pérdida de tiempo horrible. FlexLayout 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 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. Esto 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 por qué 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 pen pod 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, 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 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 algún problema con la herramienta. Este es un ejemplo de una librería de ilustraciones diseñada por una de las empleadas que trabaja 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 tiene en cuenta un contenedor, unos elementos, 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. 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. 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. Esto en Figma no se puede hacer. FlexRap, 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, Kalaidos, que por cierto es una empresa española con base en Madrid, pues lo han diseñado así directamente. Esto es una cosa maravillosa, que podemos declarar directamente con un clic y que los elementos se comporten como se comportan cuando lo declaramos en CSS o en el navegador. Y además, 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. Vamos a penpot, lo hacemos arrastrando y soltando haciendo clic en las propiedades y tenemos el código. Tenías que ver cómo se le están iluminando la cara a todos los alumnos de el módulo de desarrollo de aplicaciones. No utilicéis penpot 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 que te permiten poder saber cuando ocurre una acción en penpot y en otra herramienta de terceros poder hacer otra cosa. Viene bien para como en penpot 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 y ya es suficiente. Bueno, los 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 WordPressers 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, penpot se puede adaptar a través de plugins para que haga las cosas que nosotros 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 penpot está muy concienciado con la accesibilidad y aunque todas las personas puedan utilizar la herramienta independientemente de su diversidad y aparte de desarrollar, por ejemplo, unas primeras funcionalidades que desarrollaron fue que se pueda hacer RTL, que se pueda 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 penpot con el teclado que es una cosa muy útil para personas que no pueden utilizar el ratón y luego también tienen muy en cuenta el traste de colores cuando se envíen las distancias de los elementos por ejemplo o las guías tienen muy en cuenta pasar test de accesibilidad para que sea accesible para todo el mundo. Una cosa muy guay de penpot es que es multiplataforma se puede utilizar desde cualquier dispositivo ya sea un Mac, sea 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 Elestio puedes alojar penpot 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 penpot 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 penpot que pueden hacer que penpot 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 penpot de manera gratuita pero podemos alojarlo en nuestro servidor y ofrecer servicios de software aservice también existe una aplicación que lo ha desarrollado una persona de la comunidad de penpot no desde el equipo de Kaleidos sino una persona que ha desarrollado entonces existe la aplicación de escritorio con lo cual podemos usar penpot en nuestro ordenador no tenemos por qué alojarlo en un servidor y esto nos permite muchísima flexibilidad que podemos utilizar penpot de mil maneras e incluso sacar un rendimiento económico ofreciendo servicios a terceros y escalabilidad penpot los que usáis figma podéis ver que cuando usáis penpot 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 que ha desarrollado con SVG que es un código estándar universal y que cualquier desarrollador puede continuarlo y colaborar esto dota a penpot 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 y lo que he comentado antes que podemos 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 que os apetezca invitando a ir a penpot.app y probar la herramienta eso es todo si tienes preguntas preguntas, levantar la mano las pegatinas no traigo pegatinas lo primero de decir que me ha parecido muy interesante la aplicación creo que tiene muchísimo potencial mi pregunta es que lenguaje se ha utilizado para desarrollar esto y si se sabe todavía que lenguaje se va a 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 hacerlo a búsqueda en google se puede encontrar la es muy estándar, yo sé que está hecho con SVG pero concretamente como se comportan las cosas los vectores son SVG me imagino que será javascript no me atrevo a decirte nada pero puedes buscar hay mucha documentación abierta de hecho puedes ir a github y ver cómo está hecho directamente y contribuir al proyecto también sobre la parte de licencias la primera charla entiendo 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 te veré la primera parte que he estado hablando pero 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 cuando se... sí pues extender 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 quiero establecer unos valores para que a partir de un tamaño de fuente base se me creen el tamaño de los títulos eso se podría hacer desde el exterior y que se programando y que se genere en pimpos me imagino que a través de un webhook yo soy desarrolladora pero creo que puede ser he visto que había como un desplegable para acciones por si sabías qué acciones eran las que podías desencadenar pero lo miramos luego 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