 Bueno, primero que todo, pues buenas tardes. Para los que no me conocen, mi nombre es César Insignales. Yo trabajo con Cumbia. En estos momentos soy el diseñador del área de marketing de Cumbia, entonces me encargo básicamente del diseño de todas las piezas de marketing que necesiten externo de la empresa, si se necesitan piezas físicas o si se necesitan solamente piezas digitales y también me encargo pues del diseño del marketing site. Y nada, espero que todos estén bien y estén seguros en sus casas, sobre todo con todo lo que está pasando en estos momentos. Yo les vengo a hablar, mit charla hoy, sobre ilustración y experiencia de usuario y cómo esta afecta y ha venido cambiando un poquito más el paradigma de cómo es implementada en los últimos años. No sé, todos me escuchan bien? Perfecto, César. Ok. Bueno, como les venía comentando, en los últimos años es bastante interesante lo que está pasando con el área de la ilustración en lo que viene siendo la experiencia de usuario, el diseño web y el diseño para aplicaciones móviles. Estamos viendo que muchas empresas que son las que lideran en el mercado están usando más y más estos recursos que antes pues eran un poco dejados de lado y simplemente se usaban más recursos como fotos o íconos y ahora estamos viendo un cambio de paradigma a algo un poquito más personal que se ve algo más orgánico relajado, empresas como Slack, Airbnb, Dropbox y Uber y tanto de WeTransfer, todas estas empresas están usando más y más estos recursos y esto hace que haya una demanda en el mercado más grande para diseñadores y para productos que implementen este tipo de recursos dentro del producto. Entonces básicamente la charla viene desde esto y pues yo les quería mostrar a ustedes o darles un pequeño abrevoque de lo interesante que es el uso de este tipo de recursos en productos web y en productos de aplicaciones móviles. Primero que todo, deberíamos aclarar que es una ilustración y aunque suena un poquito obvio y si suena un poquito obvio no no quiere decir que todo el mundo lo sepa porque mucha gente confunde lo que son íconos con ilustraciones o mucha gente confunde muchas cosas con ilustraciones entonces vamos a empezar del concepto básico de ilustración como pueden ver en este slide es más o menos como si fuese un punto medio entre un ícono y una foto. Un ícono nada más tiene un solo significado y eso simplemente significa eso y ya por ejemplo si tú pones el ícono como estamos viendo la pantalla de la hamburguesa es simplemente está representando una hamburguesa en muchas aplicaciones eso viene representando lo que es como que bueno vamos a entrar a la sección de restaurantes rápido por así decirlo. Una ilustración comunica más que solamente un solo significado comunica un idea es un poquito más compleja o sea tiene un poco más de concepto a esta y una foto es una representación exacta de lo que se quiere mostrar es lo más literal que se puede mostrar por así decirlo. Hay diferencias entre las ilustraciones hay ilustraciones que pueden ser tomadas como si fuese en piezas de arte hay ilustraciones que son más que todo para uso editorial y hay ilustraciones que se usan para experiencia de usuario ¿cuáles son las diferencias entre estas? Pues las ilustraciones estas no las puse en el slide pero las ilustraciones que se usan más que todo para representar para ser como piezas de arte son mucho más personales quieren dar quieren quieren dar a entender una emoción o simplemente el artista dibujó eso para él y quiere darlo y quiere darlo conocer no tienen un propósito de comunicar algo en específico por así decirlo para para generar algún tipo algún tipo de acción en la persona que la está viendo una ilustración editorial es una revocas de lo que se va de lo que es del contenido que está dentro de la dentro de la pieza editorial ya sea un artículo ya sea un blog post o una noticia o lo que sea y la ilustración editorial y la ilustración de experiencia pertenecen a un tipo pertenecen a un tipo de contenido es un son un tipo de contenido perdón dentro de este contenido pues podemos ver lo que son los copies o los textos podemos ver lo que son las fotos pueden ver lo que son los síconos podemos ver los que son diagramas que son que son pues más que todo como mapas conceptuales y todo esto y pues están las ilustraciones una ilustración para una ilustración para la experiencia quiere quiere quiere una inserción para la experiencia quiere mostrar algo al usuario y quiere y quiere provocar al usuario un tipo de acción quiere que el usuario el usuario sea sea interactivo con esta con esta con con esta ilustración estas ilustraciones son testeadas son puestas a prueba por cómo el usuario las recibe o no y tienen varios usos son son re usables una ilustración editorial por así decirlo nada más se usa para una sola historia y ya si alguien está escribiendo una historia sobre digamos un tema un tema actual que podría ser el coronavirus o y la crisis que pues está presentando mundialmente esta ilustración solamente va a servir para esta historia y para esta noticia mientras que una una ilustración de para experiencia es un recurso que puede ser usado en diferentes páginas del del mismo producto porque porque es por así decirlo un asset se puede volver a usar están están diseñadas o están en ellas para que sean para que tengan un uso bastante a largo plazo este también es una diferencia grande grande entre la ilustración editorial ilustración de experiencia como vamos al ejemplo que que les puse hace hace nada un es ilustración básicamente que se hace con el tema de una historia por ejemplo del coge 19 simplemente va a servir para esa historia y simplemente va a servir durante este durante este periodo de tiempo estos meses y ya esa esa esa esa ilustración pues pasa a ser archivada por así decirlo una ilustración de experiencia no tiene que tiene que esta este tipo de ilustraciones tienen que perdurar y pasar la prueba contra el tiempo y otra otra de las otras de las cosas que es un requisito por una ilustración de experiencia de usuario es que se interactiva que interactúe con el usuario que algo pase cuando el usuario interactúe con ella ya sea un estado de jover ya sea un estado activo y y y y pues todo esto esto hace que incite más acciones dentro del usuario y es por eso por eso afecta a la experiencia de usuario dentro de un producto bueno está explicando lo siento estaba explicando todo esto y no no pues no mostré no mostré este slide otra cosa que pues que pasa mucho con con con los con diseñadores de productos es que muchos no tienen un background en lo que viene siendo el uso de ilustraciones muchos diseñadores pues no dibujan y por eso le tienen un poco de miedo al tema dicen yo no sé ilustrar yo no puedo ilustrar yo no tengo manera de usar estos recursos pues ahorita mismo en en el mercado tenemos bancos y bancos de ilustraciones que se pueden usar y se pueden cambiar el propósito de las ilustraciones con unos simples con simple modificaciones que toman muy poco tiempo y se ve y se ve y le da un toque personalizado a tu producto entonces eso eso ya no ya no ya no vendría siendo una excusa de que no no puedo no puedo hacerla yo no la debería usar porque se puede es algo que como dice como dice el slide debería deberíamos empezar a tener mucho más presente en nuestra caja de herramientas cuando estamos construyendo un sitio o cuando estamos construyendo una aplicación móvil otra cosa otra cosa que le tiene miedo por ejemplo mucha gente a usar este tipo de recursos es que de pronto va a ser parecer de pronto va a ser parecer el producto algo en serio algo por así decirlo algo para niños algo que nos algo que no es para nada corporativo y pues eso también está eso también está pues revaluado muy revaluado en estos momentos porque como estamos como estamos viendo en el mercado ahorita mismo empresas y empresas compañías y aplicaciones que lideran a nivel mundial están usando estos recursos de manera muy consecutiva y de manera exitosa y se ha probado que pues es es bastante efectivo usar este tipo de recursos entonces pues básicamente pues básicamente lo que les quiero decir es pues no le tengan miedo usar este tipo de recursos la ilustración es algo que que le da mucho más interés a su a su producto lo hace lo hacer mucho más interesante y lo hace mucho mucho más personalizado y menos steril ha sido un usuario que pues se quiere se quiere sentir pues que la atención es más personal para él que simplemente para una cantidad una cantidad no específica de gente y bueno eso ha sido todo muchas gracias no sé si tienen preguntas o no sé sugerencia sugerencias reclamas daré luz los invito así tienen alguna inquietud acerca del tema que ha sido expuesto por nuestro compañero césar las pueden anotar en el chat y pues así podemos ir respondiéndolas de manera organizada o si quieren hablar también pueden pedir el turno y pues vamos vamos dándole su su oportunidad de hablar una pregunta ok marco díaz dice que tanta debe ser que dice si creo que creo que creo que se comió una o dos palabras no sé si ok como sugiero bueno mientras mientras se corrige la primera pregunta un poquito por favor si marco díaz por favor vuelve a escribir la primera pregunta para no tener ninguna duda de que quieres preguntarnos y vamos a seguir con la segunda pregunta la de Carlos Insignares que cómo sugiere preparar preparar un set de recursos ilustrados para utilizarlos en los diseños césar pues bueno voy a volver a compartir pantalla para dar para dar un pequeño ejemplo de de de esto bueno cómo sugiero cómo sugiero yo pues preparar estos recursos para para el uso en un producto ya sea una página web o una aplicación tienen que tener una unidad gráfica y tienen que tener una unidad pues tanto de paleta de colores y y y en el tipo de lenguaje que están utilizando que está utilizando ya sea así el el trazo el tipo de línea que usa para para denotar para denotar todo el tipo de sombras y el tipo de situaciones que estás mostrando también que todo se vea que es parte de un todo como estaba mencionando ahorita si las vas a tomar pues de un banco de ilustraciones trata de que trata de que más o menos de que sea siempre como que del mismo artista o del mismo paquete porque si si usas de estos recursos de dos artistas diferentes o de dos paquetes diferentes puede que llegue a funcionar en algún tiempo pero pero normalmente lo más seguro es que se vaya a ver un poco que se vaya a ver un poco de discontinuidad entre entre una cosa y otra entonces como podemos ver estas son un set de ilustraciones que yo estoy ahorita mismo preparando todas tienen todas tienen un tipo un lenguaje visual muy similar para que para que la narrativa que se está intentando contar con este tipo de ilustraciones alrededor de todo el producto pues sea una una narrativa consistente y y que el usuario no se pierda y que no haya que no haya que no haya que no haya ruido entre entre una pieza y otra que el usuario vea un tipo de dibujo y después como que pasa a la otra página o pasa a la otra vista y como que cambiaron cambiaron al man que la dibujó o será que esto se iba aquí o se apareciera que se hace un poco que no que no fuese profesional y que no fuese intencional entonces pues la recomendación más grande que yo les doy para para pues preparar este tipo de recursos en productos es que tengan que tengan continuidad entre un y otra bueno listo es la pregunta de marco díaz pues la interpretate la interprete así que tantas deben ser las ilustraciones en la web es decir está hablando de la cantidad que se deben usar es decir qué tan conviviente es tratar de provocar o llamar la tensión en el usuario o sea como se puede y es decir una interacción pues no ahí no lo entendí muy bien pero él está hablando de qué qué tanta cantidad de ilustraciones se pueden utilizar bueno eso depende del producto del producto que tú estés haciendo y depende la intención que tú tengas como diseñador como diseñador con el producto ahí hay ahí hay cómo le hay aplicaciones que las utilizan mucho hay aplicaciones que no las utilizan de ningún tipo depende mucho de lo que tú quieras transmitir si es una y también depende tanto también depende full de la identidad de tu marca si tu marca pues si tú piensas que tu marca es una marca que habla de una manera en la que las ilustraciones pues son mucho más efectivas de usar que simplemente pues iconos o diagramas o diagramas de texto como mapas conceptuales y esto pues obviamente tu producto se verá afectado de esa forma y utilizarás mucho más mucho más mucho más recursos ilustrados dentro dentro de ese de ese tipo de de producto que marco es esa perdón por interrupirte marco dijo que si podía hablar para preguntarte pues para expresarse mejor sobre la pregunta entonces le voy a dar ahí le voy a quitar le voy a poner el micrófono para que pueda preguntarte bien y no quede ninguna duda cerca de la pregunta es premomentario marco puede ya hablar ya puedes hablar buenas tardes que más esa este bueno el primero disculpe porque escribí la pregunta muy rápido pensando que estamos por todo el tiempo pero básicamente que es lo que quiero enfatizar yo este yo trabajo como como frilas para una empresa en mayami que esta empresa se dedica a trabajarle a iglesias específicamente o sea no tienen otro mercado sino que simplemente apuntan a iglesias pero sí me he visto últimamente en mi trabajo en que están saturando demasiado la web porque están mudando lo que es la iglesia a la iglesia virtual por ejemplo el ministerio de los niños le están mudando la web entonces crean recursos para niños jóvenes alcianos y allá digamos que las iglesias en estados unidos son muy transparentes no de pronto no como acá en colombia donde tú hace la donación pero no se sabe que se hizo con la que se hizo con la donación allá si hay un reporte de lo que se hace con la donación entonces yo como bueno como fronten muchas veces me estoy sintiendo muy incómodo y de pronto si me da un poco miedo expresarle al cliente que trate de no saturar su página con imágenes o con ilustraciones que tú estaba mencionando que son trata mucho como llamar la atención entonces creo que está llamando la atención demasiado en la página y si me gustaría como decir al cliente mira este trata como que de usar una ilustración como para llamar la atención a tales ministerios y a tales no entonces si me gustaría que de pronto explicar allá enfocado digamos que a ese principal producto que es ministerio para la gente si correcto estoy con lo que tú estás diciendo estoy totalmente de acuerdo hay veces que la gente pues por así decir si quiere pasar de piña y termina usando o sea parece parece más un parece más un cómic que una página entonces esto esto puede llegar a ser contraproducente para el mismo producto por aquí un colega que está aquí ahorita mismo en la reunión y ahorita va a hablar siempre me dice si todo es llamativo pues nada llamativo entonces el para mí el truco es encontrar un punto medio lo que le puede decir a tu cliente es que tienes todo este tipo de todos estos recursos que son muy llamativos al ojo pero si lo está utilizando todos al tiempo el usuario no sabe para dónde mirar porque todo le está llamando la atención la idea es que sean un punto focal y que tengan una intención entre éstas si si tenemos demasiados recursos ilustrados en una página puede llegar a ser contraproducente para el mismo producto y perder el valor perder el o sea perder el valor individual de cada recurso que estaba utilizando porque lo están mostrando todos abarrotados entonces si o sea de pronto tu cliente piensa que tu cliente piensa que entre más muestren mejor pero pero pues lo que es todo lo que estamos acá y trabajamos el campo sabemos que que no siempre es así y la mayoría del tiempo no no es así entonces si tampoco tampoco es asoiarse a usarlas a usarlas todo el tiempo cuando yo digo pues no le tengan miedo usarla es porque hay gente que pues es tímida con el uso de éstas y no o sea ni siquiera lo consideran como una posibilidad pero tampoco es que te vayas a te vayas a volverlo usando todo este tipo de recursos bueno marcos y te quedó alguna duda pues puedes escribirnos ahí pero sin embargo vamos a seguir con la otra pregunta que de milena hernández que nos dice hola por favor nos puedes compartir los recursos de donde podemos reutilizar ilustraciones no entiendo mucho esa pregunta la voy a tomar como que que si de dónde podemos de dónde se pueden sacar estos recursos en en caso de que no se que no se han producido por así decir los in house y normalmente todos los bancos de imágenes tienen tienen un banco de vectores o banco de ilustraciones que recomiendo yo porque mucha gente pues mucha gente usa los bancos de los bancos de ilustraciones gratis si vas a utilizar si vas a utilizar recursos que no son hechos por ti trata de utilizar el recurso que están detrás de detrás de detrás de un paywall por así decirlo pagues un poco por los recursos porque eso hace que los vayas a ver mucho menos en otras páginas porque ya es una barrera de entrada entonces la idea la idea es si los vas a usar pues están como están los bancos como yo eres todo que tienen que tienen muy buen muy buen bar banco de ilustraciones hay un banco que se llama icons 8 que también son ilustraciones de hecho mucho más personalizadas que las de shorter y se ven son son piezas muy muy bonitas en un poquito más difícil de usar porque son piezas de pronto un poquito más muy específicas y y es difícil encontrar un encontrar un propósito general para este tipo de piezas pero son son si uno las logra encontrar un contexto que sirvan para ésta pues se ven muy muy bien y nada esos son pues dos plataformas que yo te recomiendo que podrías utilizar para buscar estos tipos de recursos y utilizarlos en tu producto lo que yo más recomiendo es por ejemplo pues no si es un producto que va a salir al aire y es comercial y pues va a tener una audiencia así decirlo masiva trata de no usar recursos gratis porque de pronto va a ser que por ejemplo la gente va a ver va a ver esa ilustración en tu en tu diseño o en tu producto y va a ir a mirar la sacó de frípica entonces hay que tener un poquito un poquito de cuidado con eso bueno listo pasamos a la siguiente carlos incignares nos pregunta que cómo es el proceso para planificar un set de ilustraciones para una serie de piezas y digitales como el proceso para planificar las ilustraciones bueno básicamente depende como como decía antes depende bastante del producto muchas veces muchas veces muchas veces uno le toca tomar una decisión entre qué tipo qué tipo qué tipo de qué tipo de recursos qué tipo de imágenes va a usar en tu producto me pasó me pasa me pasó a mí dentro de un proyecto en el que estoy trabajando ahora mismo que pues decidimos decidimos el equipo como que no vamos a utilizar recursos que sean fotos sino vamos a utilizar vamos a vamos a intentar contar las historias que se contaban con estas fotos por medio de de de piezas ilustradas entonces planificamos que dentro del sitio del mapa o dentro del esqueleto del mapa donde íbamos a utilizar una imagen ahí en vez de ir un simplemente un mapa de bits o una imagen de una foto y vamos a utilizar un recurso ilustrado que describiera la escena que tenía esa imagen entonces es una forma de planificar el uso de estas depende mucho del lenguaje visual de tu producto y depende mucho del lenguaje también de tu marca por ejemplo si tienes una marca que es súper seria y por ningún por ningún motivo quiere arricarse a perder esa seriedad obviamente te vas a ver te vas a ver forzado a utilizar más fotos que recursos ilustrados pero si tu marca por así decirlo es una marca como que un poquito más relajada y te da la sensibilidad de usarlos pues te verán en la posibilidad de como que sentarte y decir bueno aquí donde iban a usar fotos ahora hacemos ilustraciones para darle un aire un aire diferente a lo que estamos contando y bueno listo ahora tenemos la última pregunta con respecto a tu presentación césar de jeffrey taylor nos dice que él es desarrollador pero siempre ha tenido una duda respecto del copyright y dice que si uno compra unas piezas en el banco de imagen o en x sitio es necesario darle los créditos al autor a pesar de que esas piezas fueron compradas pues no dice que a pesar de que esto no es lo que tú hablaste pues quiere quiere saber tu opinión ya que tu eres diseñador eso depende mucho de la pieza por ejemplo insurer stock cuando tú vas a bajar la pieza con la que vas a trabajar muchas veces te sale un te sale una caja de texto y te dice y te dice los derechos que tiene esta pieza que tiene esta pieza cuando la vas a bajar la mayoría de las piezas insurer stock te dicen como que las puedes usar para uso comercial y no y no vas a ti no tienes que darle crédito al autor porque básicamente tú estás pagando para eso pero hay piezas hay piezas que son un poquito más específicas me pasó me pasó me pasó hace poco no con una ilustración pero con una foto que quería que quería buscar por ejemplo una foto del muñequito de andrey entonces bajé esa foto y la que en la caja de texto era una caja de texto diferente y te decía como que tú puedes utilizar esta foto para para cierto tipo de uso pero no lo puedes usar para para uso comercial porque porque por así por porque muñequito de android es una marca registrada entonces ahí ya si estás infligiendo un copyright pero como son como la mayoría de las ilustraciones pagas o gratis en bancos de imágenes son libre de de royalties por así por así decirlo no no vas a tener que la mayoría de los casos no vas a tener que no va a tener que darle crédito al autor si estás si estás pagando por si estás pagando por la pieza bueno listo por ahora no veo más preguntas entonces muchas gracias a esas creo que ya quedó todo claro entonces podemos seguir con la siguiente presentación listo si tienen sin embargo si tienen alguna duda pueden escribir y al final de todas las presentaciones podemos hacer una una ronda de preguntas listo gracias bueno continuamos la próxima charla va a cargo de yes y decir durán pues es el no hablar sobre conociendo e integrando webpad en nuestros proyectos web y así está estás listo si voy a compartir la pantalla cuando quieras bueno comparte en te presentas y bueno gracias buenos días mi nombre es y así durán soy desarrollador fronting tengo como tal dos años trabajando con cumbia en la parte de desarrollo de aplicaciones lo que es la parte del fronting hoy la charla que les voy a dar como tal es conociendo integrando web que es web pues es una herramienta para el desarrollo de fronting que nos permite agrupar todos los módulos de una aplicación en un solo archivo de JavaScript y que este pueda ser ejecutado en el navegador aquí podemos ver una imagen donde tenemos todos los assets todos los recursos imágenes jpg archivos as y a base y pasándole web pack nos va a generar unos archivos estáticos que son los que vamos a cargar en nuestra página estos archivos pues van a tener un proceso que se le van a hacer un minificado e transpilación de preprocesadores como sas a ccs de esta forma nuestro código fuente va a ser un poquito más limpio y más entendible va a ser más escalable y pues más que todo para esto es lo que sirve web pack hace la resolución de estos módulos y los empaquetan en uno solo como tal porque usar web pack bueno lo primero que todo es la resolución de dependencias inicialmente cuando trabajamos hace ocho años 10 años en un proyecto web lo que normalmente hacíamos era que incluíamos etiquetas script dentro de la página web que se estaba mostrando y podríamos tener en un proyecto más o menos de un tamaño mediano unas 15 etiquetas incluyendo imágenes incluyendo estilos y pues las personas que tienen conocimiento técnico de lo que es el desarrollo web saben que cada uno de estas de estos de estas etiquetas se tienen que hacer una petición al servidor para que me devuelva ese recurso entonces es consumo de de red y va a ser que la página cargue un poquito más lento segundo la mejor organización del proyecto pues también antes lo que hacíamos era tener archivos con todo el código que se va a cargar en la página que estamos viendo podríamos tener archivos con no sé mil líneas 500 líneas desorganizados lo que nos va a permitir web pack es que dividamos estos archivos que ya va a script y de estilos en pequeños módulos y que cada uno vaya siendo incluido dentro del como tal bondo el final que es como se le llama el archivo que se va a mostrar en la página web tercero fácil integración con otras herramientas de desarrollo web pack es una herramienta que que nos va a permitir estar escalando el proyecto y irlo integrando con otras herramientas que vayan a saliendo durante el día a día por ejemplo actualmente tenemos o ccs que lo que hace es que le hace unas transformaciones a los estilos para que puedan ser compatibles con los navegadores actuales tenemos lenguajes que están sobre el javascript que como como lo es type script como es cofie script que le agregan features que no tiene javascript pero con web pack tiene loader que es lo que permite la integración de estas herramientas para que podamos de una forma fácil trabajar sin tener que preocuparnos en buscar una herramienta para para poder codificar en lo que es type script otra herramienta para minificar los archivos otra herramienta para para integrar un validador de código etcétera cuarto nos permite construir un entorno de desarrollo robusto más que todo por esto porque todo está unificado dentro de un mismo archivo de configuración y no vamos a tener que tener librerías externas y herramientas externas para cada proceso que necesitemos durante nuestro desarrollo la optimización del código en producción pues también más que todo la web pack tiene librerías externas que han sido desarrolladas desarrolladas por otros programadores que minifica el código lo limpia les quita los consoles en producción hace que el tamaño del del javascript y de incluso el html en producción sea de menor tamaño etcétera la auto a automatización de tareas también permite que que se incluyan tareas aparte de la transpilación de un lenguaje a otro como la minificación del código y séptimo el amplio soporte de la comunidad y documentación pues más que todo pues en la siguiente presentación vamos a ver el por qué de este séptimo punto es una herramienta que la están usando grandes empresas aquí solamente coloque cinco pero web pack si no estoy mal es de es de estas herramientas que se encargan de hacer la resolución de módulos en la parte del front de las más grandes entonces tenemos aquí en larabel que tiene una herramienta que se llama lara el mix está integrada dentro de su núcleo y como tal las recomiendan para trabajar en los proyectos del árabe también tenemos chopify que pues en sus starter team en sus boiler play para desarrollar temas viene incluyendo también web pack lo mismo read y es que en su núcleo también utiliza web pack y también en su crié read up en su en su herramienta para generar plantillas rápidas de riad nosotros cumbia como tal en la mayoría de los proyectos hemos utilizado web pack y rails como tal también tiene al igual que larabel una librería raper que se llama web packer al final le explicaré por qué se encargan de hacer estos estos raper sobre sobre esta otra herramienta lo que pasa es que al final cuando un proyecto es muy grande la configuración se vuelve un poquito tediosa y pues te puede quitar un poquito tiempo de desarrollo entonces por eso se van generando estas soluciones pero al final están creadas sobre sobre web pack cuando usar web pack web pack lo podemos usar a integrar con cualquier framework tecnología o lenguaje de desarrollo como tal es agnóstico ya he visto personas que que escriben lo que me escriben hay como integró web pack en python web pack es una herramienta si tú conoces el framework conoces wordpress y aprendes web pack vas a saber cómo integrarlo porque no tiene ninguna dependencia directa de alguna tecnología como tal para el desarrollo de aplicaciones web veamos entonces cómo integrar web pack le voy a compartir un poquito de código para mostrarles cómo se hace la integración de web pack en un proyecto sencillo básico y cómo funciona de las características más importantes que tiene vamos a compartir aquí también la página web de la documentación y aquí fácilmente me dice cómo instalar web pack que simplemente es correr bueno primero que todo iniciamos nuestro proyecto tenemos la estructura de carpetas este es un proyecto que no depende de ningún framework no es wordpress no es larabel no es raiz no es ninguno de eso es simplemente una estructura de carpetas creada por mí y lo único que hago es primero que todo correr el comando en pn init para iniciar en pn dentro de mi proyecto eso me va a pedir pues que rellene esta información que está acá ya obviamente las personas que están escuchando pues esto no tiene que esta parte no tiene nada que ver con web pack pero es la herramienta que nos permite instalar web pack entonces es simplemente sencillo se corre ese comando y se acepta y me va a generar este archivo dentro de este archivo tenemos lo que son las dependencias de desarrollo en general casi todo lo que tenga que ver web pack son herramientas de desarrollo que no se van a haber reflejadas como tal en producción sino que simplemente se utiliza para agilizar el desarrollo para para generar el bundle etc. entonces después de que tenemos esto ya podemos empezar a instalar primero que todo el web pack y el web pack click que esta como tal es la herramienta que me va a permitir ejecutar el web pack y por último el web pack de server pero por lo más básico simplemente necesitamos estas dos para trabajar luego que hice la documentación de web pack que necesitamos un archivo de configuración es esto aparte de instalar esas dos dependencias lo tercero que necesitamos es un archivo de configuración en la última versión de web pack que es la versión 4 tú puedes correr web pack sin ningún archivo de configuración por defecto ya él tiene ya él tiene ciertos valores por defecto y si tú lo corres simplemente va a coger un archivo index de aquí del source y lo va a poner aquí en dis procesado con lo que él tiene por defecto igual eso no es que nos ayude mucho porque en realidad al final un proyecto tampoco va a terminar funcionando de esa forma un index y genera un dice ya tiene que ser muy pequeño el proyecto entonces bueno aquí ya yo tengo una configuración precha para para no tomar tanto tiempo explicando en general las puntos más importantes que tenemos que tener dentro de archivo de configuración si queremos personalizar el web pack es primero que todo ésta es una página un mpa o sea una página de múltiples páginas es decir cada página de este sitio web va a tener su propio JavaScript para no tener un solo y tener que cargarlo por ejemplo si estoy en el login que en realidad un login simplemente digamos que estoy en esta página no voy a cargar JavaScript que solamente se ve en el login porque obviamente va a ser una un peso a la hora de hacer la petición y descargar el JavaScript o los estilos entonces no tiene sentido entonces lo que hacemos aquí es que aquí en la propiedad entry definimos aquí pues el nombre que nosotros queramos en este caso el home este es el JavaScript del home el login y este es el JavaScript del login como tal aquí simplemente ponemos un punto de entrada para que él comience a hacer la resolución de módulos entonces vamos a ver ese por ejemplo al el home que tenemos en el home en el source en este como tal este es el JavaScript que nada más se va a cargar en el home entonces mediante esta sintaxis de import lo que hacemos es que le decimos que importe jQuery que lo vamos a usar en este módulo como tal módulo es cada archivo independiente de JavaScript que tengamos que creemos acá cada uno se va a llamar módulo y vamos a importar el jQuery vamos a importar los estilos de esa página del home como tal y pues escribimos nuestro código JavaScript normal lo que vayamos a hacer aquí pues tengo un ejemplo de simplemente al body le estoy poniendo un h1 y él lo está pintando acá y pues después tengo una muestra de cómo puedo cargar jQuery si yo quito esta línea que está acá miren que yo en el index punto html no he cargado jQuery simplemente tengo un solo archivo cargado o sea no tengo más nada esto que era un comentario esto lo puedo borrar y nada más al final por ahora en la mayoría de los proyectos solamente voy a tener uno después ya podemos hacer que sacar otro script para sacar las librerías externas y de pasar de tener 15 script acá uno que cargue el bushtrap uno que cargue el jQuery otro que cargue una librería de drag and drop etcétera simplemente voy a tener la de mi página como tal la que se está viendo y la de librerías externas de tener 10 o 8 pasamos a tener 2 entonces las peticiones van a ser mucho menores entonces aquí simplemente le decimos e cargame lo que esté aquí en la carpeta disk pues aquí mismo nuestra html cargame el homebond y es vamos a borrar esto que está acá como tal no lo cree estos estos dos y son los que manejo yo como tal son los html si los toco pero el código que acabo de eliminar es simplemente el que genera wetpad cuando él lee todo este archivo lo minifica lo procesa hace la resolución de modus entonces vamos a correr aquí yar de qué hizo esto miren aquí apareció el homebond y el login bundle que hizo él que hizo wetpad cómo funcionó por debajo y en el packaging Jason yo declaré dos scripts y esto lo lo lo crean ustedes mismos simplemente ponen aquí lo que quieran pueden poner no sé prueba y según lo que pongan ahí eso es lo que van a correr acá ya prueba obviamente pues hay unos estándares por ahí de que normalmente el comando de desarrollo le ponen def hay otros le ponen estar pero no salen de ahí al de bill que es el de producción le ponen producción o le ponen bill al que es watch y eso se lo voy a explicar ahorita qué hacen cada uno entonces yo corría el comando de y miren aquí me generó como tal el homebond y ustedes dirán pero yo cómo voy a tocar este código si se ve alejue que no es legible estos jamás nunca lo van a tocar ésta estos dos archivos o los que generen de acuerdo a los que los van a tocar porque eso como tal es el proceso que acabó hacer wetpad y eso es lo que van a cargar en el browser el que van a tocar ustedes es su código fuente el limpio el que ven acá y el que es entendible también ustedes dirán pues yo tengo aquí que 65 líneas y allá me están apareciendo no sé siento siento y pico es simplemente porque como 50 líneas como tal es la parte de wetpack pero a medida que ustedes agregan miles y miles y miles de líneas de código acá donde se ve el reflejo del peso en cada uno de los modelos que a usted va agregando simplemente la línea de wetpack van a ser más o menos como 80 y el resto va a ser el código que ustedes escriben acá entonces miren que aquí en el index yo puedo utilizar features porque aquí en la configuración pues puede utilizar features de de una versión de javascript de los nuevos estándares que aún los browser no lo soportan hice una integración con babel y aquí en la configuración de wetpad con le dije hey aquí en la propiedad modo todos los archivos de javascript le vas a pasar el loader de babel y vas a utilizar este preset de babel simplemente eso que se logra con eso de tener un código de esta forma por ejemplo tengo la forma común como lo haría sin utilizar wetpack y babel ni nada de eso declaré unas un objeto de personas y aquí de esta forma cada propiedad del objeto lo estoy asignando una variable y aquí lo estoy imprimiendo como se hace con los nuevos estándares de de babel integrado con wetpack de esta forma simplemente hago esto le digo que del objeto people me va a extraer el nombre la edad y el colegio y él va a colocar como variables y aquí simplemente estoy haciendo uso de esto para imprimirlo miren que ya ni siquiera tengo que hacer el uso de más y de nada de eso simplemente de esta forma voy a imprimir el mismo resultado que acá y acá la podemos ver en la consola vemos que es el mismo resultado camislo 23 sánjuda hasta debo y la segunda línea en la misma es decir de dos líneas de de cinco líneas hemos pasado a dos líneas sencillo entonces la integración de babel que fue lo una de las características que dijimos que tenía wetpack de que podía integrarse con muchas otras herramientas pasamos a escribir solamente dos líneas y aquí tenemos otro la copia de los de los objetos si yo normalmente en javascript quería hacer una copia de un objeto es decir cogea y hace una copia aquí uno de de people en realidad no se hacía porque los objetos en javascript se copian por referencia es decir que si yo hago una copia en una variable acá lo que yo cambio acá se va a haber reflejado acá y viceversa entonces con babel y wetpack simplemente vamos a hacer esto y si yo hago cambios en el objeto copia no se van a reflejar aquí en el objeto original aquí sandra y el objeto copia aquí este juan colegio simón bolívar y aquí estaba el original mientras que en el código viejo sí se mantenían se mantenían la copia de los objetos y hacer una copia era un poquito más complicado en realidad era con con un poquito más de más de código pero era algo como obje punto asign coma y por esta forma tenemos que hacer una copia y ahora simplemente con unos estándares y esta herramienta simplemente tenemos que hacer esto bueno que más bueno aquí inicialmente como lo estaba haciendo yo mismo tengo que recargar la página yo mismo tenía que recargar la página es decir que si yo hacía un cambio aquí en el código yo tenía manualmente que venir y correr de él tiene un comando que se llama watch que lo que hace es que cada vez que yo haga un cambio acá el mismo va a compilar automáticamente cuando yo guarde el código entonces vamos a activar lo acá eso también lo definí yo aquí en el en el pacaje y es simplemente le digo lo mismo que estaba arriba en el de pero agregándole a la línea comando un guion guion watch ya con esto yo voy a poder ver reflejado los estándares entonces vamos a ver aquí cómo se automáticamente él refresca la página cuando yo hago el cambio acá tuve un polemita vamos a cargarlo aquí en el 881 y aquí vemos cómo se refresca la página el el comando inicial que que corrí creo que tengo una falla pero al final vamos a pasar directamente a lo que es web pack de server que es una herramienta que me crea un servidor para cargar aplicación de web y esta es la opción mucho más avanzada que tiene más más características entonces simplemente creamos aquí un último comando que se llama tech server y le decimos que haga una recarga en caliente que lo que van a ver ahora sin recargar la página él va a hacer los cambios directamente vamos a coger un estilo acá y vamos a decirle que me cambie el color de la letra y ahí están viendo que ni siquiera se refresca la página que agreguen al archivo de web pack config simplemente esta opción que está acá de server simplemente le pongo el hot o se lo puedo poner directamente aquí en el pacas y él directamente va a ir refrescando los cambios acá que yo hace vamos a ver el tamaño de la letra 80 y directamente voy viendo los cambios y acá vamos a ponerle todo los cambios que yo voy haciendo acá simplemente se van refrescando acá y no tengo que estar refrescando acá que hice un cambio acá que una línea acá no simplemente es entonces como tal así es como funciona web pack también hay una característica pero no lo alcancé a detallar que es él es capaz de conseguir código de JavaScript de acuerdo a lo como lo vaya solicitando el browser entonces si el browser va necesitando un script va pidiendo ese pedacito de módulo directamente al servidor y no va a tener que cargar incluso eso es mucho más más es mucho mejor en el performance de la aplicación pero ya eso sería para aplicaciones mucho mucho más grande es una aplicación mediana como es lo que desarrollamos en el día a día hacer trabajar de esta forma es suficiente entonces eso es todo aquí pueden encontrar más documentación acerca de lo que el web pack buen este el archivo web pack confit es como tal código JavaScript aquí ustedes pueden meter condicionales pueden hacer locuras con todo esto pueden hacer que en producción cargue un JavaScript un entry point diferente a cuando lo carga en desarrollo pueden aquí en la parte de plugins que es quien se carga de minificar el ccs cuando lo va a poner a producción puede decir que por ejemplo que en desarrollo no lo simplemente haciendo algo más o menos así como que si desarrollo es igual a bueno ahí no sería sería más como por acá por fuera porque esto es una serie sería más bueno por acá pueden crear la variable y al final condicionar esto que está acá eso es código JavaScript entonces toda esa configuración queda a su gusto entonces voy a mostrar la idea rapidez lo que es Laravel mix y lo que es web packer es simplemente para darles la pequeña muestra de Laravel mix es como tal el wrapper que hizo Laravel para trabajar web pack sin tener que ensuciarse tanto las manos con esta configuración y que es robusto incluso para proyectos grandes entonces miren aquí es un wrapper elegante sobre web para normalmente el 80 por ciento de casos de uso de los proyectos a mí en la mayoría de proyectos me ha servido me ha funcionado y me ha ahorrado realmente un montón de tiempo que hacemos simplemente un npn install de de Laravel mix npn install de Laravel mix aquí están los comandos como tal y simplemente pues copiamos este archivo de configuración web pack mix y ya con estas cinco líneas podemos empezar a trabajar podemos enterar lesas podemos ponerle aquí tenemos todo copiar archivos con catenar minificar entonces simplemente sin si queremos minificar un grupo de archivos de JavaScript podemos hacer esto mix minify una raíz de scripts y él lo va a minificar y lo va a poner una carpeta publico una carpeta de acuerdo con usted lo configuren pero de pasar de esta configuración con este wrapper vamos a pasar con por ciento de un 100 por ciento a un 10 por ciento está en gran tenemos la opción de combinar tenemos el hot model replacement bien integrado y simplemente nada más con instalar web pings ya lo van a poder utilizar no tienen que poner ni siquiera esta parte y lo mismo ha hecho rays con web packer que también es otra herramienta sobre sobre web simplemente lo tienen que importar y ya lo tienen que empezar a usar y ya estarían utilizando web bueno eso es todo si tienen alguna pregunta con respecto a qué cosa se podrían hacer web para qué proyectos se podrían manejar no sé alguna pregunta relacionada con esto pueden pueden hacerlo y yo se la voy a responder bueno ahora vamos a resolver las preguntas que tengan vayan dejándolas en el chat y pues la vamos a ir respondiendo mario tatis dice en una aplicación mediana a grande que tenga muchos ya es al tener una sola línea bundle en los layouts no estaríamos en algunos casos cargando scripts en páginas que no lo necesitan en esas páginas tendríamos mal performance como evitar cargar ya escripts y necesarios como tal web pack normalmente uno lo empieza utilizando con riad todas las aplicaciones de riad son aplicaciones de una sola página que cargan un solo yabascript y y no se va a refrescar no se vamos haciendo la funcionalidad directamente pero le voy a volver a compartir pantalla para que para que lo vean esos esos splits de de yabascript por página lo vamos a poder hacer acá ya eso depende cómo tengas programado hacer tu página web decir aquí voy a decir ey en este index yo yo voy a cargar solamente y voy a importar simplemente las dependencias que necesite para para la página del home y al final me va a generar el home bundle es decir este es el que voy a incluir solamente en el hop en el login en el login vamos en los aquí al web config yo le voy a decir que aquí es el login este es el js inicial donde voy donde vas a empezar a resolver los módulos que pertenecen las dependencias que pertenecen a la página el login génera me eso y entonces viene y te genera que el longo el login bundle y es y ese nada más es el que vas a importar en el login este no lo es importante y así dependiendo la cantidad de páginas que tengan hay otros casos donde simplemente voy a tener un solo yabascript para para toda la página como en el caso de riad en su mayoría siempre tenemos uno o dos bundle porque tiene que estar cargado casi todo y esa página no se recargan se le llama single page application no se recargan como tal nada más se mantiene uno entonces viene directamente uno y que hace pone algo así de esta forma simplemente y ese es mi archivo de entrada de mi aplicación riad de ahí voy a cargar todo lo que va a cargar esa aplicación ya pero en la aplicación en la mayoría aplicación estoy seguro que lo van a hacer de esta forma es decir va a tener la página del jone el login de la página registro la página si está utilizando un comerz vas a cargar la página del checkout aquí de esta forma y creamos aquí en el source otro archivo que se llama el checkout y es y ahí metemos el código solamente para el checkout entonces no te va a sobrecargar la página alguna otra pregunta no sé de pronto alguna herramienta para para integrar con wetpack tenemos un montón aquí podemos encontrar en la propia página de wetpack los plugins que se pueden agregar más que todo lo que nos interesan son loaders para cargar archivos directamente a bueno aquí tengo un ejemplo claro aquí tengo un ejemplo claro en el login donde cargamos un archivo Jason esto hacerlo anteriormente era bastante complicado un montón de líneas aquí simplemente para cargar un archivo Jason simplemente aquí tengo mi Jason con nombres de perritos y aquí simplemente en el login le digo e importame esto y cuando está cargado aquí esta variable ya es una un objeto de JavaScript lo puedo iterar y aquí van a ver cómo aparece decir una sola línea para cargar así van a poder cargar imágenes es decir si tengo una imagen van a poder hacer import no se digamos que en el source tengo una imagen y simplemente y esto quedaría con la imagen cargada y simplemente ya podemos hacer o no sé un algo con JavaScript que cargue más preguntas ahí nos escribieron dos preguntas Chris Alan dice cómo se puede integrar wetpack en un sitio de warpress bueno de pronto ahorita mismo no estoy seguro si hay algún alguna herramienta así que como las de Laravel mix y las de reis que te permitan de una forma fácil y nada más pone este link y ya por debajo nosotros hicimos ciertas configuraciones para que cargue wetpack pero lo pueden hacer directamente así como lo dice yo cogen en su tema instalan en pn init luego instalan las dependencias que necesitan en este caso wetpack y si ustedes hacen estos pasos manuales que yo hice acá en cualquier proyecto framework librería tecnología de desarrollo de frontend estos mismos pasos les va a cargar obviamente tienen que tener pues los con la filosofía que maneja el proyecto que la carpeta public que la carpeta disk que esas cositas pero que no tiene que ver con web para saber dónde ubicar el el paca de Jason normalmente esto en todos los proyectos lo he visto va en la carpeta ahí en toda la raíz del proyecto y simplemente con esos pasos coger el paca de Jason poner esto acá poner los scripts literal así como lo tengo yo y decirle la carpeta donde va a generar los bundles ya con eso pueden utilizar wetpack y también puede usar la lara del mix también es agnóstico es decir es independiente ustedes cogen y hacen estos pasos mucho más sencillo simplemente en pn yon yon se debe lara del mix y empiezan a trabajar de la forma como lo mostró acá y ya están trabajando con wetpack mucho más sencillo de la forma lo pueden hacer no tienen que buscar cómo enterar bueno listo gracias y si aquí hay otra pregunta de marco días dice que si tienes algún ejemplo de alguna página que tenga webpack y otras sin webpack y comparar los tiempos no en este bueno como tal en la no no tuve mucho tiempo para hacer esa comparación porque en realidad para que se vean los tiempos tiene que ser un proyecto por lo menos pequeño pero no algo como dice yo que simplemente es un ejemplo una página como tal donde hayan nosotros o sea un login unos blogs y eso y ahí sí vas a poder verlo en cuanto al código minificado y un código de script que simplemente te va a cargar todo cuando veas el código fuente es decir si tú te vas acá y ves los el código fuente como lo hacíamos antes veías todo el el código así literal pero si nosotros corríamos nosotros corríamos ya el comando final que es el de tira producción porque aquí vamos tal todos los comandos que utilizamos fue de desarrollo y ya creo que le puse y al ver que el código que genera es minificado aquí está todo minificado y simplemente son 14 líneas si ustedes comparan este peso contra el que estamos viendo inicialmente va a ser incluso menos de la mitad pero ya lo tendrían que hacer ese ese proceso ustedes con páginas con muchos unos ejemplos mucho más grandes que tengan formularios y eso para que puedan ver el peso y compararlo bueno y por último Felipe y en era nos pregunta web pack tiene el mismo performance trabajando desde un create react app que es tarde de un proyecto con nex jason no sé como bueno en realidad no ha trabajado mucho con el js no sé si por debajo utiliza web pack o utiliza alguna otra herramienta para hacer este mismo caso como lo podría ser browser y fae como lo podría hacer el rolap js o parcel pero si trabaja con web pack la única diferencia al momento de generar el bundle y del performance va a ser en cuanto a las configuraciones que le hayan hecho a ese a ese start a esa herramienta de para generar plantillas de llet de riath ya sea quien lo tenga mejor sin nex o create react app pero como tal create react tiene unas configuraciones óptimas ya predefinidas para trabajar con web pack pero no te podría decir la comparación porque no he trabajado con el js listo vamos a continuar para que nos alcance el tiempo y pues sigamos adelante ahora con con la posibilidad charla gracias y así bueno ahora pues la próxima charla que que que vamos a tener pues se llama apaga las luces nuestro compañero amigo césar serpa césar estás listo si señor bueno cuando quieras puedes compartir pantalla y pues adelante un segundo bueno ahora espero estén bien todos y mi nombre es césar serpa tengo un buen tiempo trabajando en el diseño de interfaz del usuario y últimamente me ha volcado mucho más en en el diseño de la accesibilidad y en el diseño centrado en el usuario y a razón de eso es que viene esta charla o el producto de de todo ese ese conocimiento o toda esa puesta en práctica del conocimiento entonces la charla trata sobre cómo el darmo uno le respuesta a los problemas que que nos traen todas estas pantallas para poder que inunda nuestro mundo por hoy como pueden ser el televisor nuestro amigos de bolsillo que son los celulares o la de nuestros computadores portátiles entonces siempre que somos al menos desde nuestro punto de vista como diseñadores como creadores de de interfaces que las personas para interactuar con ellas siempre tenemos la responsabilidad de crear la apariencia de un producto un producto debe tener como un propósito claro y pues debe estar atado a una situación muy particular que el diseñador debe estar consciente de esa situación y cómo va a responder su producto de esa situación también de conocer a su audiencia no creer que la conoce conocerla realmente de primera mano interactando con ella y ahí adentra este tema el esquema de color el esquema de color tiene un impacto muy duradero y debe ser cuidadosamente elegido porque cuando seleccionamos un esquema de color es muy difícil o es muy poco probable que ese esquema de color cambie en el corto tiempo siempre esos cambios de colores usualmente no se dan muy brusco o solamente son modificaciones sobre el color base entonces impactar desde el primer momento es muy clave y más ahora que tenemos marcas que salen por millares todos los días y la opción por defecto es blanco sobre negro sobre blanco o sea el aimo lo que antes veíamos siempre en nuestras interfaces y a raíz de de pues tendencias que se daban en el mundo del diseño se volvió en realidad en el producto de que tuviéramos interfaces oscuras y esto es un ejemplo o sea el gran ventazo de las interfaces claras sobre las oscuras para no tener un término tan específico es de que es muy refollado el mensaje el mensaje es más prendante cuando yo lo leo sobre un fondo claro y hace que ese mensaje pues me retumbe más en mi mente pero el problema viene de que cuando yo paso mucho tiempo tengo bloque de texto cuerpo de textos muy grandes pues genera un fatiga visual generamos colombas de visión de ramón migraña de cabeza y esa es la respuesta de muchas aplicaciones o muchos servicios que ofrecen esa opción una opción de poner un modo oscuro donde las personas pueden pues leer sus textos más cómodamente y ahí es el primer indicio de que estamos creando un marco una recomendación de del uso de un tipo de interfaz entonces tenemos un problema un problema a nivel de del contexto humano que no que nos rodea que es que nosotros nacimos o evolucionamos desde las cavernas y siempre estuvimos viendo de que la manera de plasmar nuestras hideras nuestras depresiones de arte era con un carbón o con pues un material o mineral que diera una tinta negra una tinta escura sobre las paredes de las cavernas y luego cuando evolucionamos y tuvimos la imprenta los primeros pasitos en la imprenta fueron sobre hojas blancas donde la tinta era negra entonces nuestra conexión quiera o no siempre había sido en este lenguaje en este lenguaje de estar inmersos en que yo conozco y y me es familiar este tipo de interfaces a pesar de que en este tiempo no habíamos llegado a lo digital como como tal pero hay unas razones para para adoptar el narsay los modos oscuros es que generan demasiado drama o sea generan una carga emotiva impresionante cada vez que tenemos interfaces oscuras muy bien usadas y le dan un enriquecimiento y un peso al contenido brutal y se ha dado y tratado cuenta que cada vez que hay un lanzamiento un producto usualmente se vuelcan a a crear dramatismo a través de estas interfaces oscuras de estas tonalidades oscuras pero también trae ventaja no solamente un punto de vista comercial o de punto de vista de marketing de enriquecer ese ese historia que se cuenta a través de los colores o a través de las tonalidades sino que el modo oscuro como las pantallas ahora mismo pues tenemos una tecnología o una tecnología que se ha tendido que es el OLED hace que el 100 por ciento oscuro nos dé una ventaja a nuestros dispositivos ya que ahorran energía pero sobre todo llevándolo más de más al punto de vista del usuario de un fichur que de verdad le aporta al usuario es la accesibilidad y que podemos crear colores acentuados colores que que marcan un ahora cada vez que yo una pantalla porque el blanco hace mucho ruido y es mucho más fácil que sea mal usado y el negro también tiene sus sus pues contras pero es más fácil de ser versátil más fácil de establecer un lenguaje claro de lo que yo quiero proponer y un ejemplo claro es el ambiente o sea como le decía de que el diseñador tiene que ser consciente del ambiente o de la audiencia que está llevando su mensaje o su producto si yo soy el diseñador de netflix o de cualquier plataforma de streaming yo soy consciente que la mayoría de los usuarios van a ver su serie favorito su película favorita a las 8 o 10 de la noche en total oscuridad donde no tienen una nalus encendida y si yo le paro con con una interfaz totalmente clara hace que sea que haya un entidad de rechazo a priori para usuario en cambio si yo talmo los colores si yo los neutralizó si yo los hago más oscuros algo que el contenido que yo estoy vendiendo que quiero que quiero que vea realmente sea el importante y en este caso muy concreto el contenido se vuelve reiden de mi interfaz otro ejemplo claro son los sectores de la banca y el gaming el gaming siempre siempre está relacionado con con la interfaz oscura las lucesitas los neones y todo este tipo de cosas pero cada vez que vemos que que la industria produce cada vez más interfaces en el sector del gaming vemos cómo se vuelca más a usar la actualidad oscura porque dan noventa de que la mayoría de personas juegan oscuras juegan los gamers juegan de noche en la mayoría de los casos y después de que lleguen del trabajo después de que quieren solamente desestresarse después de acostar a sus hijos por ejemplo y lo mismo que pasó con con las con las plataformas de streaming pasa con el que en la banca tiene una gran ventaja en usabilidad es de que yo fácilmente con establecer una interfaz oscura yo puedo establecer que mis colores de con garancia de dinero en este caso o de pérdida de dinero yo puedo demarcarlos con color y ya yo establezco un lenguaje visual y una conexión con mi usuario pero eso no es todo las interfaces no solamente se queda en la pantalla las interfaces tienen que estar sentadas en el usuario tienen que estar pensadas y dedicadas para ellos entonces hay algo muy cierto es que las las interfaces oscuras nos trajeron una nueva nueva característica que es fácilmente extendible y si las compañías se deciden a implementarlo correctamente no solamente hablamos de algo estético algo que se ve bonito sino que hablamos de algo que brinda sensibilidad inúina a las personas con discapacidades o con complejos en su visión y también pues estos son una enfermedad que o digamos que discapacidades o pequeñas frotas que pueden traer las las interfaces claras usadas siempre y agregar la opción de del darmo no solamente es algo que nos deben vender como algo de marketing algo de venta sino que es algo que deberá venderse como algo accesible algo que le da un pro al usuario una opción más pero una opción que es su decisión y las interfaces oscuras también tienen algo ya no lo venen como que esa escanabilidad o sea nos facilitan la lectura lesibilidad alto contraste claramente y es pensada para el dispositivo y también hace que la atención visual sobre contenido sea mayor pero yo también pasa con las interfaces claras pasan con ambas las buenas prácticas son las que hacen que las interfaces funcione ya sean oscuras o ya sean claras y algo que no solamente para desmeritar las pantallas oscuras sino que es para conocimiento y saber cuándo usarlas en 2003 antes del boom de toda nuestra tecnología desde el acelerar de morógico que yo la humanidad hubo un estudio donde se estudiaba las diferentes tipos de pantalla que teníamos que eran el sd la tubular esta que teníamos las pantallas viejas de los noventas y veíamos cómo las personas o a menos el estudio nos decía cómo estas estas pantallas estas tecnologías interferían en el diseño de productos interferían cómo crear interfaces ya que podían serse podrían destruirse o potencializarse a través de la interfaz y en 2013 ya después de este un donde tenemos tecnologías más avanzadas también nos viene un estudio nos da un golpe sobre la mesa porque el problema es que el marketing nos quiso vender que el darmo era la solución a todo y no es de que el limo por decirlo así tiene grandes ventajas sobre la gente adulta y la gente joven la gente adulta porque no le tantos contenidos en la pantalla le pequeños contenidos y presentarles esos pequeños contenidos en una pantalla que ahora es mucho más beneficioso para su para su salud visual y entonces pues el mito de que el darmo es la respuesta todo ahí se se desvanece entonces luego llegamos a un punto crítico que es el diseño centrado y pensado por el usuario a través de los habilidades y el camino que es la construcción de productos no tenemos no tenemos que preguntar cuáles son los fichos que nos dan valor al usuario y a nosotros vimos como diseñadores donde el producto no esté pensado únicamente como un ente comercial o que esté marcado en todo esto que hablaba yo del marketing que se lo rodea o cómo o cómo lo ven o cómo nos lo cuentan porque tenemos que crear productos centrados en el usuario en pro de ellos y que ellos tengan el poder de decisión que resuelvan reales necesidades y creen un vínculo de marca el darmo para mí es bello todos mis mis devices o mis pantallas o interfaces están se están seleccionando el darmo sobre el live pero no solamente apagar un switch en un ejemplo de que hay ciertas aplicaciones que no me gusta tener las en darmo porque siento que el aprovechamiento que se dio de él no es el mejor y en esos casos selecciono la otra versión entonces pues para concluir es de que el darmo es una preferencia estética pero no es la respuesta no es la respuesta a todo porque bien usado el darmo también puede responder muy bien pero en qué momento está vos uno u otro esa es nuestra nuestra labor nuestra finalidad como creador de producto y contenido entonces es una es una decisión estética no un cambio de vida no un cambio de paradigma es una algo que nos vaya a mejorar la productividad pero si es una una herramienta de civilidad que puede usar es que puede ser usada en ciertos y creemos que el darmo debe ser usado como como una herramienta de decisión al usual decide tú si la quieres usar o no pero sería bueno potencializarlo solamente brindárselo y aquí está tu darmo como respuesta una tendencia en el mercado sino este tu darmo pero está pensado para esto esto y esto no solamente ser bonito no solamente es una respuesta a un trending de diseño sino que aporta a la persona pero también tenemos que pensar que puede aportar a la sociedad y más en este tiempo en que vivimos donde hay una una crisis mundial y con el darmo con el live momento esas decisiones podemos aportar a crear mejores productos y que esos mejores productos aportan a construir mejores sociedades y mejores comunidades esa es mi charla mucho gracias gracias a ser el uno sé si pues hay pregúntas por un escrito preguntas a alguien tiene alguna pregunta alguna duda bueno me parece no igualmente si si después les queda alguna pregunta acerca de la presentación que nos acaba de dar césar pueden escribirla y yo la tendré en cuenta para al final de las presentaciones volver a hacer una ronda de preguntas y fabián yo creo que podemos seguir con la próxima presentación ok antes de continuar con con ricardo este no me gustaría hacer un pequeño braille virtual donde pues los invito a que a que pongamos la bueno parece que hay una pregunta no sé si la quieres leer antes de irnos al break si claro carlos y señores nos pregunta hay tipografías que funcionan mejor en el dark mode no necesariamente solamente hay que tener en cuenta el peso de la tipografía o sea no usar tipografías tan finas también si no que tu punto de referencia base sea una tipografía regular no irte más más allá de eso o sea más más delgadita de eso pero de resto todas pueden funcionar prácticamente bien y ahora Marco Díaz nos pregunta no dice tengo clientes que tienen su página de avoras services pero depende depende pero de repente quieres que la sección de product sea solamente se da totalmente diferente ellos quieren tales colores últimamente como rojo verde es recomendable decirles hay problema probemos que el darmo hay es muy digamos que no una respuesta saldar muy ahí no debería ser tu respuesta porque que sea de un color u otro o que haya esos cambios visuales es algo más de la estrategia de o el lenguaje de comunicación que está estableciendo con que marca el darmo no la respuesta es el lenguaje de comunicación solamente es cambiar el background que tu que tu ofreces para una un cambio de legibilidad pero si decides cambiarlo si tu cliente está pidiendo no yo quiero usar los rojo verde ahí te deberías preguntar es si mi marca tiene ese lenguaje visual para hacer esos cambios tan bruscos y si mi cliente está adaptado o responde ese lenguaje visual porque puede ser que pierdas clientes por un un cambio tan brusco como pueden ser esas tonalidades en el fondo julián castro pregunta césar recomiendas para aplicaciones educativas y learning si un montón o sea de hecho un montón porque preguntate a ti si tú quisieras estar estudiando no antes de antes de yo acostarme quiero dedicarme 10 minutos a no sé a un ciclo a un ciclo de tal o x contenido que esté pues aprendiendo pues cuando tú estás acostado prácticamente para dormir y en todos tus ojos prendidos y cuando entras a una aplicación que tiene toda tu interfaz clara eso es un rechazo completo hacer lo que tú quieres hacer como usuario o sea la aplicación me está diciendo y no lo hagas por su consciente porque es un rechazo muy grande el que mis ojos reciben ante la aplicación entonces si tú le brindas a usuario para que está prendiendo esa esa movilidad de que yo en las noches puedo activarlo es un gana gana porque está diciendo lo serio y yo soy amigable con tus ojos puedes aprender todo lo que tú quieras en la noche yona tan que caís dice existe algún tipo de herramienta que detecta el móvil que tenga que tenga algún dark mode activado muchos usamos un dark mode en nuestros celulares existirá alguna herramienta que podamos tener en nuestra web para detectar esto no entiendo yo te ayudo a estar si en la web pues tienes varias opciones como ya va a estar el dar modo encendido del sistema operativo y puedes aplicar los estilos dependiendo a esa a ese momento de que quieras activarlo ya sea manual o automáticamente bueno listo no han escrito más preguntas por ahora entonces yo creo que podemos seguir con la siguiente presentación bueno como le decía antes de continuar me gustaría que hiciéramos un pequeño break y nos conociéramos un poco pues me gustaría que pusieran la cámara para si nos tomamos un screenshot y lo colgamos allá en la vida pues los invito ahí que hagamos el el la cuadrícula de cámara para tomar un screenshot y pues si quieren hablar pues es el momento vamos vamos si pueden podemos en la cámara la yo estaba en la playa vaya que bien alguien más hay me vamos a tomar el screenshot para para colgarlo ahí en la página un placer ahí mi nombre fue en alta una para los que no me conoce no sé si quieren la oportunidad estamos un pequeño break para pues para conocernos para para invitarnos a nuestras próximas reuniones virtuales también para comentarles que pues luisa les va a estar contando ahí por el chat de que tenemos otras otras redes sociales que nos pueden ayudar a que ustedes pues tengan más eventos como este en otros lenguajes pues este como tal es centrado en warfare además pues no me no me centro completamente como en cierro a warfare sino que pues miramos un amánico de posibilidades en cuanto a temas de diseño accesibilidad buenas prácticas y un montón de temas que fue enriquece mucho más a la diversidad de de personas que se conectan con nosotros entonces no no por eso no hago solamente charlas de desarrollo porque sé que muchas personas no son desarrolladores y pues trato de siempre equilibrarla los temas para que pues todo estén contentos y se vayan con con algo aprendido bueno aprovechando este break hola a todos soy Luisa Linero me encargo de las redes sociales en cumbia y quería invitarlos a todos a unirse estamos tenemos un nuevo un nuevo canal por donde vamos a estar publicando todas esas presentaciones de todos estos meetups y todas estas eventos que eventos que tengamos próximamente y pues por cuestión de de las cosas que están pasando ahora mismo del coid vamos a estar haciéndolo virtualmente sin embargo siempre vamos a tener el mejor talento y yo sé que van a van a pues van a a poder aprovechar mucho estas estos eventos y van a sacar mucha información valiosa entonces en el chat les voy a dejar el link del del grupo para que se unan si quieren de whatsapp y también a su vez los invito a que nos sigan en las redes de cumbia estamos en twitter como arroba cumbia estamos en facebook en instagram y en lintin y en youtube y en flipboard los que utilicen flipboard entonces los invito estamos constantemente publicando artículos de interés pues de de varios temas no solamente de desarrollo de aplicaciones sino de distintos temas que les pueden aportar mucho y en general en de tecnología y pues voy a estar les poniendo en el chat la información para que la tengan en cuenta ok bueno gracias bueno no sé si ricardo ya está ready para continuar o todavía está ahí preparándola algo no sé si no cuando quieran bueno listo vamos a pasar con la con la charla y pues gracias a todo por allá ya tomé la screen show bueno estaré publicando y en el mito listo empiezo dale cuando quieras listo de una bueno hola a todos mi nombre es ricardo la peira soy el nco content el escritor de contenidos de cumbia empecé apenas hace poco en cumbia por ahí unos dos meses pero bueno ya había estado manejando contenidos anteriormente y vengo a hablarles hoy un poco sobre la búsqueda de inspiración para la creación de contenidos vamos a voy a hacer una pequeña salvedad aquí para para la presentación para para que tengamos en cuenta y cuando hable de inspiración tengan en cuenta que puedo estar refiriéndome tanto inspiración como creatividad o sea voy a estar utilizando las dos palabras indistintamente y diferentemente así que por favor tengan eso en cuenta ahí entonces ahora sí para muchos digamos nunca se les ha presentado la necesidad de generar contenidos pero la realidad es que muy probablemente en algún punto de sus vidas tengan que hacerlo ya sea por trabajo ya sea por motivos personales en fin el contenido es algo que todos podemos generar no es algo como que no es que yo no soy especialista en contenidos entonces eso no me tengo que preocupar no o sea el mundo de hoy ya nos exige a todos que seamos capaces de poder compartir ya sean nuestros conocimientos nuestra experiencia incluso porque no nuestras opiniones pero hay un gran pero ahí y es es mucho más fácil decirlo que hacerlo cuando uno dice bueno ya yo soy un teso en este tema y me voy a sentar a escribir entonces voy a hacer mi blog y dale pasa una semana hacemos un artículo pasan dos semanas hacemos otro artículo pero a medida que pasa el tiempo se nos va dificultando cada vez más producir cosas nuevas sentimos que nos estamos repitiendo no encontramos como de qué hablar y eso es normal creo que uno en cierto punto llega como como hacia una pared se toca con una pared y dice ok bueno qué es lo que estoy haciendo con el contenido entonces para tener en cuenta o sea no se asusten si eso le llega a pasar en algún momento vamos a ver ahora más adelante por qué ocurre eso y cuáles son algunas de las técnicas que yo personalmente utilizo y recomiendo para cuando tengamos que generar contenidos antes de eso sin embargo me gustaría que repasáramos un poco cuáles son esos elementos que conforman una gran estrategia de contenidos o sea generar contenidos no es únicamente ok listo yo soy un gran programador entonces me voy a sentar a escribir un blog sobre programación pues en teoría uno podría hacer eso pero no vas a obtener los mejores resultados entonces cuáles son los elementos los factores que te garantizan que tu estrategia de contenido sea un poco más más robusta más sólida para empezar tener una audiencia definida tener claro ok listo a quién le estoy escribiendo para qué le estoy escribiendo qué temas les interesa mi audiencia porque deberían leerme a mí y no alguien más son preguntas de pronto como muy básicas muy generales pero a la hora digamos de impactar a la gente lo lo ayudan a uno a tener muy claro todas esas esas cosas que que la gente valora no y no estar simplemente como disparando apuntando a ciegas a ver a qué le a qué le pegamos no sea es mejor decir ok listo esta es mi audiencia no importa que sea pequeña hoy hoy en día digamos se habla de audiencia de nicho y eso no se ve como como algo malo al revés entre uno más tenga dominio sobre un tema en específico pues mayor valor le está dando a alguien a través de su contenido el segundo punto es balancear lo emocional y lo racional a veces uno cae en el error de creer que en la medida en que yo escriba de manera muy lógica muy racional con unos argumentos muy sólidos mostrando cifras y datos y toda esa serie de digamos de cosas así analítico lógicas vamos a capturar nuestra audiencia y sí hasta cierto punto así ocurre pero hay un componente adicional y el componente emocional que también nos ayuda a conectar con las personas con nuestros lectores con nuestra audiencia a un nivel mucho más profundo entonces que cuál es más importante que cuál es más importante que si el uno que decir otro pues la realidad es que hay que balancearlos de pronto en algún momento nos iremos más por lo racional en otro momento nos iremos más por lo emocional pero en general de eso se trata poder conectar con la gente a un nivel emocional pero a la vez que la racionalidad nos permita decir ok bueno este tipo está diciendo algo que tiene sentido pues no está diciendo cualquier parableidad entonces eso importante tenerlo en cuenta tercero y esta es una de las cosas más más importantes de verdad al momento de de de generar contenidos y es nuestro contenido tiene que ser relevante no puede estar uno simplemente publicando porque sí ok publicar sí es muy importante pero más importante aún que lo que publiquemos realmente le llegue a alguien y cómo logramos eso en primer lugar nuestro contenido tiene que ser relacionable es decir estamos hablándole a personas de carne y hueso no estamos hablándole a una pantalla del computador o sea la persona que está leyendo esto tiene una vida entonces como nosotros desde de nuestro de nuestro contenido logramos que esa persona se sienta identificada con lo que nosotros le estamos compartiendo entonces ahí es como el primer punto de donde hace ese ese ese click esa conexión la que sea relacionable el segundo factor importante para la relevancia del contenido es que sea un contenido novedoso pues a todo nos gusta leer cosas que no hayamos visto antes o que tengan algo de novedad algo de lo que podamos aprender no tiene mucha gracia simplemente ahí como que repetición y repetición y repetición de lo mismo entonces novedad segundo factor importante en el tema de relevancia tercero está el tema de la fluidez obviamente es muy importante digamos cómo se se muestra se presenta el contenido en el caso de un blog de un artículo es muy muy importante que que se escriba bien de nada nos sirve digamos si tenemos un tema muy bueno que estamos manejando que queremos presentar pero no somos capaces de poder transmitir una idea adecuadamente entonces a eso hace referencia a la fluidez que se podría reemplazar fácilmente con con la palabra claridad también por último la tensión es el elemento que cierra nuestra lista de lo que hace un contenido relevante y a hablar de tensión me refiero a no sé si a ustedes les pasa cuando leen un libro una novela un ensayo o algo que hay ciertas ciertos puntos de la lectura donde se sienten como más más comprometidos más cuál es la palabra más engaged sí con con el texto a eso me refiero yo con con tensión cuáles son como esos nudos de los que nosotros esperamos como un desenlace si esos nudos no los encontramos en el contenido pues no estamos haciendo nada porque eso es como que lo que llama la la tensión con eso cerramos digamos los cuatro elementos claves de un contenido relevante y por último ya el cuarto elemento de que compone una una estrategia de contenidos es la constancia que pasa si tenemos todo lo anterior pero no publicamos pues ya lo mencioné ahorita es muy importante estar publicando siempre o sea que sea una vez a la semana una vez cada 15 días una vez al mes ese no es el problema pero si ya uno tiene como como un ritmo una cadencia de ok listo yo voy a dedicarme a publicar todos los viernes en la tarde ya tu audiencia sabe que todos los viernes en la tarde va a poder encontrar tu contenido nuevo y por qué resaltamos aquí constancia porque en teoría es muy fácil definir la audiencia e balancear lo emocional y lo nacional a hacer contenido relevante pero en lo práctico o por lo menos eso me parece a mí uno no siempre logra sacar el tiempo para publicar entonces ahí es donde uno dice ok listo tengo todo lo demás pero me quedé nada porque no he sido capaz de publicar entonces muy importante esa parte cuál es el problema que en la inspiración a veces se nos acaba a veces pensamos digamos que que no yo sé mucho sobre este tema entonces voy a poder hablar de lo que sea porque yo soy el que más sabe pero como ya mencionamos ahorita e la inspiración va cayendo con el tiempo que ocurre empezamos con muchas ideas pero se nos van acabando de vez en cuando logramos encontrar nueva inspiración aquí o ya pero nuevamente pasa el tiempo y se nos vuelve a acabar la inspiración y resulta que al final terminamos desistiendo porque decimos como que no yo como que definitivamente no no lo logré no no me inspiré y terminamos dejando ahí nuestro nuestro proyecto de contenido entonces algunas excusas que solemos decirnos cuando esto pasa es ok tengo un buen proyecto pero es que necesito contratar a alguien para que me ayude pero eso no necesariamente es la mejor solución o no siempre se puede porque no hay presupuesto o porque no encontramos a la persona o porque es un proyecto pequeño en fin no no es como una una solución realista según la excusa que nos decimos no yo como que definitivamente no necesito más contenido pero esto es absolutamente falso todo el mundo siempre necesita más contenido especialmente si lo que queremos es que nos vean de no tener contenido nuevo y no estar publicando constantemente es lo mismo que ser un nn en el internet y por último no soy creativo y esta es tal vez una de las falsedades más grandes que nos decimos y es creer que ano es que yo definitivamente como que no soy creativo es solamente para la gente de diseño para los artistas yo soy un ingeniero yo lo mío los números yo programo yo no tengo por qué ser creativo y eso es totalmente falso porque todo el mundo en el fondo es creativo entonces hay unas falsas creencias sobre la inspiración y es que llega sola que no se puede influenciar es decir que esto es algo como casi que inato no mira él es una persona súper creativa él se inspira súper fácil también nos decimos otra falsa creencia es sólo le llega a las personas creativas se requiere ser un experto en un tema para para poder inspirarse en fin hay como un montón de falsas premisas que tenemos en cuanto a cómo funciona la inspiración pero cuando uno se pone a verlas analizarlas realmente te das cuenta que la inspiración no es algo que llegue sola hay que salir a buscarla afortunadamente hoy en día tenemos herramientas como como el internet que nos permiten poder salir a buscarlas sin movernos de la comodidad de nuestras casas anteriormente eso pues no era posible así que es un gran beneficio que tenemos hoy en día la inspiración se puede hackear vamos a ver un poco más de eso en los siguientes slides el creativo se hace no nace ya lo mencionaba ahorita no es que simplemente una persona es creativa porque nació así ya ok sí puede que sea verdad que algunas personas tienen como alguna predisposición para las cosas creativas más que otras pero como como lo puso tomas edison que ustedes sabrán fue uno de los más grandes inventores que la humanidad ha dado una invención es 1 por ciento de inspiración y 99 por ciento de perspiración que quiere decir eso que la creatividad a la inspiración sí es un componente importante sin el cual no podríamos hacer muchas cosas pero realmente de lo que se trata es de trabajarlo de sudarlo o sea sino nos estamos esforzando pues simplemente no no estamos haciendo nada no podemos como quedarnos sentados esperando a que de pronto se nos prenda el bombillo y digamos como que ok ya listo encontré la solución al problema pues desafortunadamente eso no funciona así y por último otra otra realidad importante son inspiración es los generalistas también se inspiran todo el mundo habla siempre de no el especialista especialista especialista y claro ser un especialista es maravilloso o sea yo no quisiera que me atendiera un doctor que no sea especialista en digamos el en lo que necesito que que me ayuden pero hay un beneficio muy grande también en ser un generalista y es la posibilidad de moverse entre distintas disciplinas entre distintas ramas del conocimiento eso también es algo que está subvalorado de pronto hoy en día entonces para que lo tengan en cuenta y si se les olvida absolutamente todo lo que he dicho hasta ahora hay unas cosas que deberían llevarse de esta presentación así que pongan atención a esto y es la inspiración no llega cuando podemos conectar los puntos si un poco cliché aquí usar Steve Jobs acá pero bueno afortunadamente ojalá y con eso no se les olvide a nadie el famoso discurso de Steve Jobs a lo graduando de Harvard donde decía ok listo vamos a conectar los puntos y de eso es en últimas de lo que se trata la inspiración no es quedarse sentado esperando que llegue sino salir a buscarla y decir ok mirar tenemos esto acá tenemos esto otro acá cómo lo conectamos cuál es esa línea que une esos puntos y ahí empezamos a ver que ya la noción de inspiración de creatividad va cobrando como una dimensión distinta cuál es la solución que propongo entonces para afrontar los los bloqueos creativos o cuando nos quedamos sin inspiración abordar el problema desde otra perspectiva y a qué me refiero con eso no lo veamos como en la gráfica que teníamos inicialmente donde la instrucción simplemente va bajando bajando bajando con con el paso del tiempo sino veámonos como como un problema sistémico la interacción de las cosas conectar los puntos que quiere decir eso no hay que esperar a que la inspiración no llegue afortunadamente podemos diseñar mejores sistemas y consistemos me refiero ok cómo es mi proceso creativo y eso es algo que pues es muy personal para cada quien y no hay como una fórmula de ok listo esto es lo que uno tiene que hacer para ser creativo y poder generar contenidos no o sea ojalá digamos pudiera haber una ecuación que le diga uno eso pero pero la creatividad no funciona así y es y y lo que busco un poco es que entiendan que si ustedes logran crear unas ciertas rutinas o o hackear el sistema dentro de su vida diarias pueden encontrar esos espacios donde se permitan ser creativos hay que salir a buscar la inspiración crear nuestros propios sistemas algunas ideas o técnicas que personalmente a mí me funcionan bastante para para inspirarme para crear como le dije no necesariamente para todo el mundo tienen que ser las mismas para un programador de pronto habrá algunas técnicas que funcionen que para un diseñador no pero bueno cada quien sabrá que le sirve la primera es empezar no se queden en el voy a hacer voy a hacer voy a hacer porque fácilmente van a pasar meses y no han empezado entonces primer consejo no dejarse ganar por la pasividad sean proactivos no esperen a que las cosas le lleguen así no tengan claridad sobre lo que vayan a escribir o el contenido que vayan a generar lo más importante es que empiecen que lo hagan otro consejo digamos que yo doy ahí para empezar es no se lancen de una vez hacerlo en el computador si el computador es una herramienta maravillosa y veinte mil aplicaciones que que envision que esto que lo otro que para hacer cosas pero no hay nada que supere al papel y al lápiz o sea la humanidad ha vivido toda su historia apunta de lápiz y papel y hemos creado cosas maravillosas eso no ha cambiado el computador debe ser el segundo paso cuando ya uno tiene aterrizada la idea sobre el papel e investigar investigar es muy importante puede uno sea un experto en un tema pero nunca está de más salir y leer un poco ok bueno listo esta persona opina esto leí este artículo que está buenísimo me encontré con esto otro que me abrigó la mente a una perspectiva que no había visto en fin o sea lo mejor para crear contenidos es consumir más contenidos a mí personalmente me gusta muchísimo youtube me parece de verdad una gran gran herramienta para buscar inspiración ver lo que la gente está haciendo lo que la gente está hablando y otro otro otra herramienta también muy buena es medium medium de verdad que tiene unos artículos increíbles algunas de las personas que escriben ahí tienen un conocimiento tremendo sobre sus temas desafortunadamente solo tenés a leer un par de artículos gratuitos al mes pero bueno la suscripción tampoco es muy caro así que de verdad vale la pena desconectarse también puede sonar como un poco paradójico de que ok necesito crear contenidos y me voy a desconectar pero a veces cuando dejamos simplemente que la mente se se desconecte de las cosas que nos afligen o de los problemas que tenemos ahí como que que resolver dejándolos un rato quietos nos damos cuenta de que la solución a veces no llega o ese bloqueo inspiracional a veces se desaparece solito cuando cuando lo dejamos ahí a acudir a otros también siempre es otra gran alternativa si de pronto sabemos un poco de un tema pero sabemos de alguien que sabe más nunca está de más ir a consultarle a la persona yo de verdad siempre afortunadamente me encuentro con personas muy dispuestas a colaborar y a decidir y claro que como te puedo ayudar le sorprendería de verdad digamos la la la habilidad de la gente en ese sentido no no tengan miedo nunca a preguntarle a los demás ser organizados claramente es súper importante casi que un requisito también eso de que el genio creativo desorganizados a eso totalmente falso ya si no son organizados no van a llegar a absolutamente nada y por último jugar ahí toda una literatura en temas de diseño y de user experience que se ha dedicado a desarrollar la creatividad de manera metódica sistémica a través de procesos estandarizados el tema de los workshops que los últimos años ha cobrado muchísima relevancia es súper importante si están trabajando en grupos es una de las cosas que más recomiendo ponerse a dibujar también a veces nos permite pasar de las palabras a lo visual una es una gran herramienta y también hay muchos juegos de cartas por ejemplo hay uno que me gusta mucho que se llama oblique strategies ahorita lo pongo en el chat para los que quieran buscarlo que son como un juego un juego de un set de cartas donde cada carta tiene como como un nombre una palabra o algo y lo que se hace es que se baraja las cartas y se trabaja sobre un tema y entonces como con las cartas que vaya saliendo nos permite casi que ir armando ideas aleatoriamente y modularmente entonces si es un poco digamos arriesgado lanzarse a eso pero pero bueno no pasa nada porque igual es como un borrador lo que lo que uno está haciendo pero de verdad que se lo súper recomiendo y bueno esos son los consejos las las técnicas que quería compartirles como para encuentren cuando encuentren un bloqueo creativo pero mucho que les haya gustado cualquier duda que tengan siempre a la orden y bueno los dejo nuevamente aquí con Fabián Luisa gracias Ricky lo no tenemos pregunta todavía que hace Ricky no no tenemos preguntas pues si como le dije si se les presentaba alguna pregunta al final podemos igual a bueno si hay dos preguntas que otra alternativa puedes recomendar a esas personas que debido a la situación del COVID-19 muchos amigos reajustaron su presupuesto para redes y trasero de contenido es esa pregunta de Marco Marco muchas gracias por tu pregunta muy buena pregunta si desafortunadamente no todo el mundo digamos tiene la posibilidad ahora de trabajar los contenidos o están viendo cómo reacomodan sus estrategias para eso creo que hay dos mensajes principales ahí el primero es no dejar de publicar ni de tener siempre el contenido en la mira ahora mismo en este momento más que nunca es cuando más contenido se debería estar publicando para que la gente te note estamos migrando de un mundo parcialmente digital a un mundo casi que totalmente digitalizado entonces no tener contenidos realmente no es una opción nadie nadie quiere no estar en el internet entonces digamos ese es como el primer punto y el segundo punto es hombre pues seamos creativos con este problema no si si no se puede digamos contratar a alguien o si no se tiene el tiempo o esto lo otro hay que hacer lo posible para que eso ocurra o sea listo no podemos contratar una persona no tenemos el tiempo siempre hay tiempo lo que hay es crear métodos sistemas que permitan que el contenido se cree así sea sacándole una hora la semana para publicar una pieza la semana una pieza al mes lo que sea se puede hay es que quitar como ese bloqueo mental de que hay ahí de que no que necesito a alguien más eso no no no te va a llevar a nada me pregunta que le recuerdes el nombre del juego de cartas como perdón al nombre del juego de cartas claro ya mismo lo pongo acá no me está dejando escribir luz te lo voy a mandar y tú lo puedes escribir no sé qué le pasa a mi chat si claro ya te lo mando por la aquí aquí te lo vamos a mandar por el chat y otra pregunta aprovechen porque está riqui ahí es esperando otra luz yo soy porque es un blog de mi página personal de trabajo de diseño que me recomiendas ahora que voy a iniciar bueno lo básico antes que nada definir tu audiencia a veces pasa que uno tiene como mucha claridad sobre lo que quiere escribir y eso está full bien pero también tienes que tener en cuenta que tiene que haber gente que te lea entonces piensa quiénes son esas personas que te van a leer y puedes hacer un pequeño ejercicio saca lápiz y papel y dice ok quién es mi persona ideal que va a leer mi contenido va a haber mi contenido ya cuando tengas eso claro dices ok listo esta es la persona que yo creo va a leer mi contenido digo creo porque eso con el tiempo puede puede cambiar y debemos adaptarnos a las tendencias que vayamos viendo nuestros lectores y empezar a partir de ahí o sea encontrar como ese punto donde se conectan lo que tú quieres ofrecer y lo que la gente quiere hay algo muy bueno y es que la gente nunca sabe lo que quiere entonces puedes ofrecerles algo que ellos ni siquiera sabían que querían y pues ahí va ganado pero también es un poco arriesgado porque necesitas ya como crear cierta cierta tracción ahí para que para que te empiecen a leer entonces al comienzo tal vez lo más recomendable es empezar con algo novedoso que habíamos mencionado la presentación pero que no sea tan novedoso que simplemente no vayas a tener nadie que te lea verdad como equilibrar un poco eso ser realista también con tus propias capacidades de lo que puedes hacer lo que puedes generar en términos de contenido y estar siempre mirando o sea siempre dispuesto a innovar a tratar cosas nuevas cosas distintas como no caer en la monotonía yo creo que esa sería como como las recomendaciones que te podría dar Carlos bueno ahora te pregunto otra vez carlos algo que que piensas que es mejor colocar en los titulares bueno es un eterno debate siempre pues un titular es importantísimo no porque es como lo primero que la persona lee y si un titular tiene que ser llamativo y si tu pregunta se va más por el lado como de ese y de cómo logramos que los buscadores lo indexen y eso pues hay un montón de contenidos que puedes encontrar en la web y que te puede ayudar seguramente para eso mi recomendación personal es algo que a ti te gustaría si a ti te gusta probablemente a otras personas también pero y esto es un gran gran pero no caigas en el error de hacer algo genérico yo creo que el peor error que uno puede hacer en términos de contenido es hacer cosas genéricas o sea nadie quiere ser genérico todo el mundo quiere pertenecer como algo exclusivo y único entonces evitar los genéricos y nail pobea también dice hay alguna herramienta que me permita identificar la audiencia de un sector en particular pues realmente no las conozco si entiendo bien la pregunta no creo que no no conozco algunas herramientas así pues están herramientas de analítica de datos que tal vez lo más cercano creo que a tu pregunta si y por pero pero otro lado uno puede hacer como como unos supuestos también trabajar con hipótesis decir ok bueno listo yo soy un programador de python entonces qué le interesa la comunidad de python de pronto especializo el nicho de visualización de datos con python ok dale perfecto ahora está súper de moda analizar el tema de las tendencias de la evolución del coronavirus ok dale listo perfecto qué tipo de audiencia es la que le interesa leer eso de pronto mi audiencia son los papás que tienen hijos y quieren tomar las precauciones para para el caso entonces ok ver cómo evoluciona la gráfica de del virus en los niños no sé son como cosas así de pronto se me ocurren a mí trabajar con supuestos y yo supuesto no pasa nada si te equivocas lo lo malo sería si sabes que uno de tus supuestos con respecto a tu audiencia está mal y sigue trabajando con ese supuesto errado entonces súper importante tener muy claro cuáles son nuestros nuestras premisas nuestras hipótesis sobre nuestra audiencia tener las muy claras y estar siempre mirando a ver qué es cierto que se mantiene que está cambiando siempre eso muy importante que se recomienda aquí julián me pregunta que si algún plugin para la creación de contenidos de redacción bueno la verdad que gramarly estaba buenísimo los que no lo hayan usado súper recomendado bueno yo realmente sólo lo he usado para inglés no sé si para español también se puede utilizar que diría que sí pero de verdad que es una gran gran herramienta y si no lo quieren pagar si no quieren usar gramarly no le gusta de verdad que la segunda mejor herramienta disponible para crear contenidos en microsoft word yo creo que tiene el mejor corrector ortográfico que yo he visto en mi vida y gramático yo creo que no hay más pregunta jeffrey pues excelente presentación y que por favor no que si les puedes compartir algunos artículos que hay a gestito si pues les puedo saber el blog de cumbia ahí encontrar en algunas cosas que yo he escrito y ya cuanto a mis cosas personales no las publico pero próximamente cuando habrá mi blog que espero algún día hacerlo tengo que empezar el primer paso les avisaré claro que sí en seguir el link y también tienen contenidos así también publicó gran contenido linkedin a uno a no sé si nos dice tu linkin para que la gente o lo escribes bueno parejo el linkin como ven ahí en la pantallita abajo ricardo a la feira me pueden buscar me agregan pero si le van a agregar hoy por favor me agregan y me dicen ey yo estuve en el webinar del meetup me gustó tu presentación me agregan porque si es alguien que no conozco pues no lo agrego porque no sé a todo el linkin logrega uno un montón de gente que uno no sabe quién es ok bueno richie muchas gracias yo pienso que pues no a ti faviam por la invitación excelente presentación muchas gracias bueno este continuamos ahora pues el turno es para ronald martínez pues ya es una charla más enfocada a warp y el performa web no sé si ronald estás por ahí estás listo si señor o que cuando quieras pues nos comparte la pantalla y adelante gracias bueno buenas tardes a todos y charles sobre cómo mejorar el performance de tu warp pues de mi parte les puedo decir que mi nombre es ronald martínez el hombre ronald martínez soy desarrollador fronland trabajo también en cumbia trabajo más que todo con cosas de world press y shopify pues estado trabajando ya hace cuatro años cuatro años allá y en estos meses pues se realizaron justamente en trabajar en esas dos áreas en específico sobre todo muchas que han tenido que ver con lo que es la optimización y el perf el performance y el rendimiento de las aplicaciones bueno empezando aquí con ya con la charla la gran pregunta es cómo se optimiza bueno en primer lugar antes de que vayan antes de que alguno piense eso no no existe una herramienta mágica para hacer la optimización en ningún lado la van a encontrar y el que les diga que tiene una herramienta que lo hace es mentira así que huyan porque lo que lo que uno tiene que hacer son estos estos pasos que los estoy colocando acá primero es medir de notificar planar y ejecutar vamos a ver cada uno cuando les digo medir significa buscar una herramienta que nos pueda decir qué también o qué tan mal está nuestra página una de las herramientas que más varios de las herramientas más usadas son estas tres primeras que les tengo acá la primera es ya el es una representación web en la web de un plugin de para cron y también para que ahora también está para five folks que son los el cuarto y el quinto punto que se llama lighthouse entonces los desarrolladores del lighthouse además de hacer esos plugins también tienen esa página que es la web de mis sure en la cual tú puedes darle la la la URL de tu página y ellos te van a generar un informe de cómo está tu página en cuanto al rendimiento en cuanto a cio en cuanto a accesibilidad incluso si tiene si la tienes desarrollada para hacer la una aplicación que tu página se puede instalar como aplicación en tu mismo celular también te da la evaluación de ese punto las otras 2 gtmetrics.com y page splitting sites que es de google también te sirven para eso te dan todas te dan métricas similares la de page speed no te da cosas del cio ni accesibilidad sino que es más general sobre la velocidad pero sí que como digo yo pueden usar cualquiera de las tres o incluso las tres herramientas para tu tener una evaluación más completa de lo que es tu siguiente web entonces ya con esos resultados pasamos a la parte de diagnóstico y esta si vemos la la presentación en la parte derecha debajo del doctor que no está evaluando nada del covid vemos un resú uno de los resultados que nos genera en esas páginas que les estaba mostrando entonces eso es el reporte tenemos que pensar primero qué es lo que dice el reporte en este caso en esta casa en particular nos dice y tienes unas imágenes que están cargándose en tiempo de el mismo tiempo de carga y que podrías quitar tienes un third party code que está haciendo que la página cargue más lento tienes unos assets que están haciendo que no que no tienen una política de lo que el llamo política de caché que no es eficiente tienes muchos elementos en el don tienes mucha tu día escribe está demorando mucho entonces cuando nos empezamos a hacer las preguntas que vemos las preguntas que coloque acá puedo cambiar todo lo que dice el informe necesito las librerías que estilos o elementos que se están cargando en su totalidad estoy utilizando incluso los elementos que deben ser es cuando veo por por ejemplo en este caso que vemos acá que hay un impacto grande del third party por lo general son plugins de algunas son algunos plugins que instalamos que hacen alguna función en nuestra nuestra página web de algunos que ponen se puede ser incluso un código de tracking o varios codios de tracking que no tiene que no tienen su código realmente optimizado y lo que causan esto pero en estos en estos días que estuve trabajando algo fue un caso muy particular un plugin que me instaló el un plugin que instaló el cliente y empezar y la página se empezó a poner más lenta yo le hice por esta evaluación para ver precisamente me caía en esa parte y yo estuve revisando el inspector que era cuáles eran las peticiones que se estaban haciendo y precisamente eran las de las cosas que le había colocado que se estaban muy mal optimizados estaban haciendo todo el proceso mal y hacían que la página cargará lento aunque aunque era la respuesta o la solución que él necesitaba para mostrar lo que iba a mostrar estaban mal hechas y eso estaba interferiendo en esa parte la carga de la página es cuando hay uno en esas ocasiones uno tiene que evaluar también porque puede pasar como les digo que es algo que sí le da la solución que si necesita el cliente pero que está poniendo lenta la página en ese caso tú dices si mira o sea esto está muy mal el código está hecho muy mal está poniendo lento pero hay que intentar encontrar otra herramienta que haga lo que haga lo mismo que lo haga mejor en cuanto en cuanto a nivel de código pero si no se encuentra ya nos toca como dice no toca ceder y seguir utilizando esa herramienta mal optimizada porque porque toca porque eso es lo que se requiere para la página web entonces en casos en esos casos tenemos que ceder y ver cómo no es ver cómo no esté el puntaje de nuestra página baja tristemente entonces vamos a la siguiente fase que es de planeación tenemos que ver qué es lo que voy a cambiar qué es lo que voy a cambiar qué puedo cambiar real como tiene que ver mucho con lo que le decía en realidad puedo quitar ese plugin en realidad tengo que hacer que esa imagen no cargue o qué más tengo que meter para o quitar para que la página no se ponga tan lenta entonces hay unos conceptos que nos pueden ayudar el primero que les presento es la optimización de imágenes siempre que utilicemos una una imagen lo ideal es que podamos tenerla ya con el menor tan menor tamaño y peso en bytes posible que le digo eso cada aquí en la web cada byte cuenta si tú me has decidido pero esta imagen nada más pesa 4 kilobytes yo tenía si pero podría pesar 3 y la diferencia aunque no lo parezca entre 3 kilobytes 1 kilobytes entre 3 kilobytes y 4 kilobytes aunque sea de uno solo ese solo kilobytes son milésimas de segundo que puedes en las cuales tú puedes perder a un cliente se han hecho incluso muchas páginas varios estudios en las cuales ellos dicen e hicimos una minificación una mejora del código en la cual la página carga medio segundo más rápido pero con ese cambio logramos incrementar nuestras ventas con 30 por ciento porque porque si la persona la persona entra a tu página que haga sin que demora más de cinco segundos en cargar dice no me interesa esta página se va y eso es una venta que ya perdiste cambio mientras más car mientras más rápido la carga es más rápido vas a tener esa venta y es muy probable que ese cliente no solo no solo te compre sino que también te refieras y tengas más clientes para que te para que compren tu producto entonces en cuanto a esta ya la optimización de traigo está tu herramienta está y ni peneje y much mint pueden entrar esos link y revisar lo que revisar cada una la primera es una es una herramienta online la segunda es herramienta de con es de consola depende de su gusto pero las dos hacen lo mismo toman una y toman una imagen y lo que hace es quitarle todos los datos que no necesita la imagen recuerden que una imagen es un archivo digital que tiene muchos datos además de la de la imagen puede tener en puede tener datos como quien tomó la foto qué modelo de cámara se usó en qué programa le editaron y entonces esos datos realmente no te interesan a ti cuando lo vas a mostrar en una página web porque esos datos no son visibles en la página web te interesa entonces lo que hacen estos optimizadores es coger esos tipos de datos eliminar lo de los archivos de la imagen y darte la misma imagen con la con la misma calidad y sin esas cosas tan pero aunque también las puedes configurar para que le bajen un poquito la calidad a la imagen pero normalmente se configura para que sea un 80 90 por ciento de la calidad de origen y no se nota la diferencia otra táctica que puede usar como la digo ahí es reemplazar los vídeos por los vídeos a veces sí tenemos tenemos un podemos tener una animación gif muy bonita que pese 500 kilobytes pero si la transformamos un por ejemplo un vídeo mp4 puede pesar 100 kilobytes entonces 300 kilobytes que nos estamos ahorrando 300 kilobytes menos que va a cargar la página y en lo cual les vas a va a mostrarse mucho más rápido la otra técnica con la imagen es lo que se llama el laicilote laicilote si es la es la técnica que si que consiste en mostrar un recurso solamente cuando haya alcanzado ese punto de la página o sea no tiene por decir no tiene sentido cargar una imagen de una foto que está en el fondo de la página si yo estoy en el si yo estoy en la parte de arriba de la página todavía entonces la idea esa es la idea de este concepto recientemente en la entre los últimos desarrollos que se han hecho por sobre todo cron ya él está incluyendo una propiedad que se llama loading que tiene tres valores y giro y laicilote para ayudarte con eso sin que tengas que utilizar una un plugin de tercero para o o desarrollar una una solución para hacer este laicilote ya va a ser nativo del navegador tengo entendido que ya también firefox está empezando el desarrollo de esa parte para ir para incluirlo de forma nativa en su navegador si también se está metiendo que cuando tú coloques una imagen le está colocando el atributo todo aunque como algo de comodio todos no lo están soportando el único que lo tiene soportado es el cromo 82 en adelante ya al menos estén adelantado algo para que lo empiecen a usarlos de cuando los navegadores todos los navegadores le implementen la otra técnica es utilizar un utilizar las imágenes responsibles o así recuerda si hay que algunos lo sabrán otros no existen html un elemento que se llama picture un picture uno puede establecerle diversas fuentes dependiendo del ancho o alto de pantalla lo que uno prefiere y con eso digamos que le sabemos que para que si estamos en digamos un celular podemos decir que cargue una imagen de 350 por por 400 píceles pero si estamos en el computador cargue una de 1200 por 800 así nos ahorramos tener que estar cargue cargando una imagen con más bytes de los que realmente se necesitan y a eso va también el siguiente punto una imagen con tamaño mínimo si por ejemplo en nuestra página tenemos tenemos una galería de artículos cada foto del artículo es de 350 por 350 o sea lo que dice lo que dice esta teoría y pues me puedes crear tu arte tu busca la foto de tu artículo que sea de 350 por 350 no metas una más grande porque justamente por lo mismo que le venia diciendo si meto una de 400 por 400 tengo esos esos 50 píceles de ancho y de alta extra que no voy a utilizar y eso también me me consume bytes y recuerden tras más bytes tenga la página o la imagen más va a demorar encargar y otra técnica que es la de precar a ser una precargado de las imágenes este concepto se utiliza una etiqueta que se llama el link que es que muchas veces las utilizamos para cargar recursos como las hojas de estilo pero también le podemos decir que su estilo que su uso no sea como como hoja de estilo sino como preload o sea colocamos igual como si fuésemos a colocar una vestida link pero en vez del real styles le colocamos real preload eso le indica el navegador que antes de empezar a cargar la página justo cuando haga la petición se busque descargar eso elemento en paralelo con que con qué intención con que la intención de que cuando vaya a pintar la página ya el se haya descargado ese recurso y sea más rápido para mostrarlo y ahí nos podemos arrolar unas milésimas y de milésima en milésima llegamos podemos llegar a segundos eso en cuanto al plan de las imágenes tenemos también la parte del planeación de JavaScript pues una de las técnicas como le dice como mencionaba en una presentación anterior y así es minificar el JavaScript aunque no es como lo mismo que les vengo diciendo aunque no sea mucho el ahorro de hasta de hasta un kilovide puede significar varios varios milésimas de segundo que en la cual es tu página va a cargar mucho más rápido entonces siempre hay que tener buscar la forma de tener el código lo más limpio posible para que te cargue a lo más rápido posible la otra es incluir el sol ya es necesario una técnica que también les mostró y es con el web pack que él lo cargaba un archivo por página tenemos la también lo que es el disfair y el async que son dos parámetros que se le puede poner a la etiqueta de script con disfair él se espera a que la página termine de cargar por completo antes de ejecutar ese código ya esa etiqueta JavaScript y async quiere decir que él va a ejecutar ese código JavaScript tan pronto como él esté disponible haya o no haya cargado la página cada uno tiene su uso depende de qué es lo que vayas a hacer con script por lo general uno utiliza un disfair para no retrasar la carga de la página puedes utilizar async si es que quieres cargar un por ejemplo un script de tracking entonces no es para que nos pereja que la página cargue sino ya está ya en el mismo momento que esté disponible empieza a traquear puedes utilizar async las otras dividir en varios archivos si ves que si ves que tu archivo ya es que es muy pesado o si hay cosas que no vas a utilizar inmediatamente puedes dividirlo en otro archivo y hacerle un disfair ese archivo y el tema del otro es el tema de los third party services como los trackers algún otro plugin que estáis utilizando siempre tratar de que esté minificado de que solo se incluya cuando lo necesites que te encargándose con disfair o con async pero como les mencionaba en un punto anterior no siempre eso es posible y nos toca como digo y como dije yo bajar la cabeza y utilizarlo así porque aunque estén mal hechos cuanto el ccs similar siempre tratemos de tenerlo minificado igual que el JavaScript incluirlo solo cuando sea necesario incluir hay una teoría que se llama el ccs crítico hay una página en la cual pueden entrar para generar el ccs crítico de cualquier sitio web entonces la teoría de este ccs crítico es que ese es el mínimo que se requiere para cargar la parte que va a ser visible al usuario en la primera carga o sea cuando entras a la página digamos que tiene un banner y tiene un menú entonces lo mínimo de ccs que deberías tener es el el ccs que hace que se vea bien el banner y que se vea bien la navegación el resto lo puedes cargar después pero lo que impone como lo dice este es lo crítico lo importante es la primera impresión que se le da al usuario eso te ayuda que tu página cargue mucho más rápido y pueda ir a la persona no tenga que desesperarse desesperarse mientras va cargando todos los estilos acá también también va es válido para el ccs se puede utilizar la técnica del preload como podemos ver acá pero como una variación de que este es un pequeño truco que se le que se hace se pueden precargar el estilo y cuando termine de cargar la página le decimos que el real de es el real no va a ser preload sino está el shit para indicarle y mira que hay un estilo y entonces en ese momento que termina la carga el navegador empieza a descargarse ese estilo que no es crítico y tenemos el fallback para cuando la persona no tenga habilitado ya va script que simplemente cargue el estilo lastimosamente todavía no sé hasta donde puede encontrar no se puede hacer un así un preload de este estilo de los estilos así de vacán sin ya va script si lo hay bueno decir si alguno me dice después pero todavía no puede encontrar una técnica que no implique un poco de ya va script con esto nos vamos ya al siguiente paso que es ejecutar que es lo que ya va a depender de lo que encontramos de lo que encontramos y lo que si en los pasos anteriores ya y si no si nos toca cambiar un código si no toca cambiar los estilos si no toca cambiar el html o cambiamos podemos utilizar lo que son los en el caso específico de warper lo algún plugin de optimización como optima hizo wp fasca ché que nos ayudan con este con los temas de minificación de los temas de la optimización de differ de async ellos tienen las que tienen herramientas para hacer differ de y código y aquí para minificar ccs para hacer differ de ccs minificar incluso el html entonces ellos nos pueden ayudar sin sin que uno tenga necesariamente un conocimiento de programación y en este paso como dice que ejecutar ya ejecutar lo que hemos planeado los cambios del código si vamos a utilizar estos plugins que es lo que vamos a quitar que es lo que vamos a poner y también en este punto nos ayudaría a utilizar lo que son los elementos accesibles de los cuales nos van a hablar en la siguiente charla si que solo lo dejo ahí para como referencia para para que crea un poco expectativa acá les de un poco de documentación de varios artículos de la que colaboró la hecho por la gente de lighthouse que es para para hacer todo este tema de la optimización como hacerlo que tener en cuenta algunos tips y ahí está también el enlace del de un generador de ccs crítico hay muchos en hay muchos disponibles en línea otras incluso también hay para para línea de comando si prefieres hacerlo por línea de comando pueden buscar todos los que y utilizar el que más les convengo más les guste no tiene que ser este y quieren buscar también un poco más sobre este web de no no es el único que hace a estos tipos de artículos sobre sobre optimización web hay muchas empresas que también hacen estos artículos y los tienen disponibles para el público para que tú como pueda empezar en este tema y ir optimizando tus páginas web bueno eso fue todo muchas gracias por haber escuchado gracias ronal excelente presentación gracias ronal el que tenga preguntas puede anotarlas en el chat para que ronal la resuelva tiene alguna este momento y después yo no después yo no sé nada bueno parece les quedo súper claro a todos entonces muchas gracias ronal no hay otra una pregunta de de mario tatis y todas esas técnicas son válidas para los casos donde compras un template a una a un tercero porque si haces alguna modificación y luego instalas una actualización del templo del template o template de hacer el mismo template ok se perderían ok bueno si son válidas se pueden aplicar en el caso para los templates que se compran para huérfeles existe un concepto que se llaman los temas hijos tú podrías tener si tienes tu template creas un tema hijo y en ese tema hijo haces todas las modificaciones que vayas a hacer para que no te afecte la actualización que se le ha hecho y vayan a ser al templo así no pierdes tu trabajo listo y francisco doran nos dice en qué punto se puede pensar que la cantidad de plugins usados es demasiado bueno yo siempre lo he dicho como que casi tu página o los bueno lo dicen también varias personas que lo he leído si tu página te toma más de cinco segundos en cargar preocupate mira a ver qué estás haciendo porque si dura ya los cinco segundos porque estás incluyendo algo que no es muy pesado y que no lo va realmente necesaria entonces en ese punto es que ya es demasiado de se puede ser que lo que está recargando tu página sean plugins o puede ser que sea tu tu propio código ya antes te toca hacer uso de herramientas como las que mostré al inicio para ver si es un ter party si es un código propio o qué es lo que está pasando que si tienes muchas imágenes muy pesadas o las o las o los tiempos de ejecución muy largo ya tienes que entrar a evaluar con una herramienta y después ya tomar las decisiones del caso miguel vula dice que tiene un portal de noticias que pasaría sin sin borros fotos que pasaría si borros fotos que he cargado pero ya la nota está en el final o fueron una de de cuando comencé pues si borrar las fotos no se van a ver más pero bueno sí también no importa no importa después de que tú reemplaces el contenido la imagen dentro del contenido de la noticia no debería tener problemas ya el problema es si la borra y no la vuelves a meter pero si la si la cambias fueron optimizadas no hay problema y incluso hay plugins acá en word recuerdo si incluso el mismo tiny png o hay uno que se llama smosh se pueden hacer la optimización dentro de tu mismo sitio web con las mismas imágenes el mismo con mismo conserva la conserva las mismas referencias de la imagen solo las optimiza y es mismo ellos mismos se encargan de actualizar las referencias en los post donde donde estén utilizando las imágenes y creo que ya no hay más preguntas entonces a no miguel vula que decirle puede dar los nombres acá si los puedes copiar ahí en el chat y que muchas gracias ok listo no tenemos más preguntas pues vamos a continuar con la siguiente charla que es la mía entonces vamos a ver un poquito de accesibilidad y pues de todo lo que hablo y es y de todo lo que hablo ronar como llegamos allá de manera eficiente llame y comparto la pantalla y empiezo mi presentación ahí ven mi pantalla bueno mi nombre es Fabián Altadona pues soy desarrollador fron en cumbia también ahora mismo estoy trabajando como fron en manager del área de manager fron en fron en pues además de cumbia tengo un emprendimiento propio que se llama haberos un web que soluciones de servidores y infraestructuras en el tema de la web bueno mi charla fue es cómo hacer que tu web sea más accesible para todos y bueno básicamente es que sea accesible pues antes de comenzar a cualquier cualquier tema sobre accesibilidad y dirigida a la web pues primero tengo que hablarle sobre que es la diversidad funcional y pues que la mayoría de personas en el mundo presenta incluso hasta veces no nos damos cuenta de que estas personas tienen algún tipo de problema pero están ahí siempre y pues incluso pueden ser nuestros clientes potenciales y no lo no lo sabemos entonces pues voy a hablar un poquito sobre eso y pues ahí vamos entrando en el tema progresivamente en lo que es la accesibilidad bueno que es la diversidad funcional pues básicamente es tratada a todos esos problemas que presentan a personas a nivel cognitivo visual físico auditivo verbal y pues me pareció bastante interesante en mostrar las cifras de que en el mundo hay más de 200 200 millones de personas que presentan esta diversidad funcional es decir que pues cada de cada persona que existe en el mundo cada de cada siete personas una una presenta este problema entonces como les dije a veces pasan inadvertidas incluso personas que usan lentes que uno las ve como normal pues pueden llegar a tener un grado de diversidad funcional bueno básicamente la diversidad funcional pues hace que estas personas dependan a la tecnología de asistencia en este caso ya sea software o hardware pues por ejemplo en la parte de software algunos lectores de pantalla y alguna tecnología pues de reconocimiento de voz y entre otras cosas y en la parte de hardware básicamente pues son periféricos que pues que se adaptan a los computadores ayudando a las personas pues en el caso de las personas que no ven pues el sistema brailer le permite pues interactuar con los sitios web de manera como lo haría cualquier persona pero con ayuda assistiva de un hardware bueno antes pues de entrar en todo esto voy a hablar sobre la W3C que es como la organización o el consorcio que se encarga de regular todas estas técnicas o o pautas o este tipo de delineamiento que se dan a nivel de la web entonces de ahí surge algo que se llama el web content accessibility guideline que son simplemente pautas o o tips que da la organización para que hagan uso de ellas y que pues crean sitios o contenidos accesibles la WC AG pues el web content accessibility guideline o las pautas de accesibilidad pues se se organizan en cuatro principios fundamentales uno de esos principios pues es que sea perceptible básicamente lo que quiere decir este principio es que no pues nuestros sitios web o nuestros contenidos se puedan entender fácilmente y que pues sean sean fácil en este caso pues se puedan entender y ver fácilmente otra cosa que no hay que no indica pues otro principio es que sea operable pues básicamente es que se pueda usar pues que podamos tener extendido o soportado estos hardware y software que pues les mencionaba antes que se puede entender como hay personas que tienen problemas cognitivos pues a veces para ellos es muy difícil entender lo que queremos transmitir entonces ponernos un poco en su lugar para que a la vez que creamos esos contenidos pues que sean de manera que sean fácil de entender y que pues podamos llegar a ese público otra de las cosas pues de estos principios que nos habla sobre la parte del robusto o robusta eso quiere decir después que cada vez que hagamos un desarrollo de sitios web pues pensemos en los dispositivos móviles pensemos en los diferentes dispositivos que pues podemos utilizar para que personas que tengan problemas y que no puedan utilizar el sitio web o lo que estemos desarrollando además de esto se generan unos niveles de conformidad pues que van van divididos en tres en tres categorías pues el la a doble hay triple y ha pues siendo la triple a la más extensiva y que pues que cubre mucho mucho de estas de o le da soporte a todas estas sistemas o o dispositivos que ayudan a las personas con esta discapacidad además de esto existe algo que se llama la huey área que básicamente es una iniciativa pues que tiene la doble 13 donde se enfoca básicamente a la accesibilidad web entonces esto es básicamente poder hacer o hacer que toda la accesibilidad que hagamos en la web sea compatible con los dispositivos externos que podamos usar una de las cosas fue importante fue que todo mundo se preguntan o o que alguien siempre da alguna vez se ha preguntado es que si en Colombia pues tenemos estándares de accesibilidad web si tenemos pues cuando se hizo el decreto 11 51 del 2008 que hablaba sobre los lineamientos generar el estrategia de gobierno en línea pues se generaron unos principios aplicables estos principios fueron pues centrados en lo que es el gobierno gobierno en el ciudad el ciudadano se ha gobernado en línea visión unificada del estado e acceso equitativo y multi canal y la protección de la información del individuo que básicamente lo que ustedes pues relacionan y conocen cuando hablamos de de la por el gobierno en línea y todas esas cosas de las que se mencionan en Colombia también pues de la credibilidad y confianza en el gobierno pues es algo que ellos tratan de como su sistema pues sea más accesible a los usuarios pues montándolos en línea y permitiéndolos hacer trámites en línea que sea mucho más eficiente y pues como gobiernos están están obligados a que todos estos servicios y y sitios web que generen pues sean completamente accesibles y pues sirvan para cualquier persona entonces después después de en el año 2012 ese decreto fue derrogado y pues se hicieron algunos cambios que pues ayudaban a las personas que tenían discapacidades específicas y pues ya en la entrando en las más que todo en la edad digital de todos los cambios que se han generado en cuanto a los dispositivos y a las nuevas tecnologías en el smartphone y más fueron incluidas todas estas todas estos detalles o sea con respecto a la parte de accesibilidad pues nosotros tenemos en Colombia pues la norma técnica 58 54 que de ahí conté que básicamente es una copia de de la de la norma equivalente en la wc ag pero la versión 2.0 entonces básicamente pues colombia se rige en la misma pues los los lineamientos que da la 2013 y pues los adopta como como suyo porque igual están públicos y pues cada gobierno los los usa y los los aprovecha a su modo en este caso y context pues tiene un monopolio sobre este tipo de de normas y pues ante el público uno consigue un documento de incontext solamente que pues logra conseguir hasta la norma 2.0 si tú quieres que tener la 2.1 que es la norma más amplia que se que se da hasta ahora tienes que pagarles entonces para que tengas en cuenta eso y tienes que certificar que con ellos de que de que tienes o que vas a utilizar normas y context basadas en accesibilidad y en cuenta fue un mensaje como esto al final del documento público donde que si quieres información necesaria acerca del normativo original que se desprestiere la portada que era la norma de la accesibilidad y context tienes que pues comunicarte con ellos y pues ellos te te dan acceso pues imagino que previo pago a la norma final como todas las cosas de context volviendo otra vez aquí a lo que a lo que estamos volviendo otra vez a la parte de context pues como les decía y contenta más públicamente pues ellos dicen que tienen la norma equivalente a la 2.0 pero como les dije ya hay una norma WCA que es la 2.1 que tiene 17 nuevas pautas y las vemos y las podemos ver aquí se como un comparativo donde pues la 2.0 y la variación que hay en la 2.1 pues que incluye más vamos a la siguiente slide que muestra más detalladamente incluye más pues todo lo que la hablaba de la parte de las discapacidades que se pueden presentar incluso amplía mucho más el rango y pues las posiciona dependiendo el nivel de conformidad que se quiera dar entonces más o menos aquí está un poco detallado de cada uno para que lo tengan en cuenta aquí pues estos son los datos que pues que se quede la fundación ADECO estos datos nos dan un poco más de visión acerca de las personas con problemas de discapacidad y en cuanto a la aco a esa interacción que hay en el internet o hacia los sitios web de las empresas y personas pues vemos que es bastante amplio mira todas las en cuanto a los dispositivos móviles a los televisores a los computadores mira por ejemplo el de computador es bastante alta de las personas que tienen discapacidades físicas y sensoriales que incluso intelectuales que están usando internet o sea que tienen acceso a internet entonces es por eso es bastante importante que a la hora que que pensemos en un desarrollo web pues analicemos bien nuestro nuestro público objetivo pues que muchas veces o la gran mayoría es posible que entre esas personas discapacidad y discapacidad estén nuestros clientes sobre todo porque esas personas discapacidad también tienen tarjeta de crédito así que no se les olviden, entonces en caso que estén veniendo algún producto alguna cosa que pues que estén distribuyendo pues tengan en cuenta estos detalles. Si vamos a las redes sociales pues también vemos un alto porcentaje de personas con discapacidad que utilizan redes sociales según la fundación ADECO pues ahí muestra unas cifras en Facebook Twitter y LinkedIn y vemos que la mayoría se está obligada en Facebook entonces para que tengan en cuenta esos detalles y que cuando estén realizando pay en la web pues lo piensen y tomen un momento y analicen bien su público objetivo. Bueno casi siempre cuando cuando vamos a un edificio vamos a un centro comercial o vamos a cualquier parte donde pues se respete un poco la norma de accesibilidad de en este caso física de personas en la calle en las construcciones pues siempre se nota con una señal visual de una persona en silla de ruedas pero la verdad es que esa rampa que está construida puede ser para todos o sea no necesariamente pues debe ser para una persona que tenga esa discapacidad en específico por ejemplo un ejemplo es la mamá con el coche de bebé puede utilizar la rampa otra puede un repartidor con alguna carretilla con cajas pesadas puede usar la rampa también se quiere decir que solamente sean para personas con silla de ruedas incluso nosotros mismos cuando cuando si algún día pues nos fracturamos y vamos con muletas pues usamos la rampa también y pues lo que les quiero decir básicamente es que hacer una página web accesible no sólo ayuda a las personas con discapacidad sino que nos ayuda a todos entonces para que lo tenga en cuenta a la hora de crear un sitio web pues accesible no piensen solamente en las personas discapacitadas es la misma analogía con la rampa esa hacer la página accesible pues nos ayuda a todos un ejemplo pues que le puedo dar de este tipo de cosas es que imagínense ustedes cualquiera de ustedes pues ha estado a medio día pues en la calle imagínense que pues le entró una llamada o le entró un mensaje de whatsapp diciendo revisa este y pues imagínense ustedes tratando de apretar la vista para tratar de leer en el en el celular lo que le estaba escribiendo incluso el pronto en whatsapp por el contraste pues lograron ver el link pero cuando llegaron a la página web que le estaba diciendo pues no ven nada porque la página web no está diseñada con alto contraste y básicamente el sol no te deja ver nada entonces lo que hace es que corres una sombrita y tratas de ver de ver es lo que te estaba mostrando entonces ahí en ese momento pues ocurren ocurren un par de cosas pues nos volvemos como una especie de tenemos como una discapacidad visual temporal o situacional que se que se dio al contexto de uso en ese caso de lo que estaba pasando entonces ahí si se dan cuenta que cualquier de nosotros pues puede tener esos problemas sino y si si no le damos soluciones o portes en nuestras páginas web pues van a poner cosas como esta otra de las cosas o otro pues creencia falsas falsas que hay en torno de las sensibilidades que es antes bueno en la página de gobierno de las páginas en líneas pensaban que la sensibilidad era pues lo negro sobre fondo blanco y lo blanco sobre fondo negro incluso hacían páginas web diferentes en que una versión accesible incluso quedaba una página adicional y no lo hacía en la misma página y eso son un montón de errores pues que la que se llegaron a generar por respecto a que no tendía cómo funcionaba realmente todo esto de la normativa de accesibilidad y pues no conocían pues los diversos dispositivos que hay en el mercado y que pues si lo enteré de manera correcta pues puedes ayudar a estas personas entonces caía en ese problema otra de las cosas era pues cuando comenzamos nuestros desarrollos web pues pensamos bueno listo te hagamos el diseño y tenemos el desarrollo desktop o desarrollo de escritorio y de primero se haciamos primero toda la vista de escritorio y luego pues utilizaba un sistema de grillas que nos mostraba nos gustaba el contenido o pues hacíamos diseño específico para para cada dispositivo entonces sucedía eso está igual pues ahí se veía todo normal luego pues salió una tendencia que la tendencia actual que incluso google ella migró a esta tendencia que todas las páginas web pues que hagan esta tendencia de mobile first se le va a dar como prioridad en el en la indexación por eso es que es bastante importante que lo tengan en cuenta a la hora de algún desarrollo web pues haga mobile first y eso está ahora mismo en la como la tendencia en el momento y pues el el gran google pues lo está tomando en cuenta para a la hora de ingresar sus páginas entonces no lo olviden entonces por ejemplo si tomamos el caso del escritorio primero o sea de estos first sucede algo como esto miren miren los problemas que pueden causar entonces que se evitarían pues cuando haces un diseño mobile first que que puede tener más control sobre los elementos no caigan en ese en eso y pues tengale en cuenta continuamos antes de seguir adelante pues quiero comentarles algo sobre la usabilidad verso la accesibilidad que muchas veces las personas la confunden incluso hasta llegan a creer que son lo mismo entonces pues les voy a mostrar un poco que es cada una para que pues ya se quiten ese mito de la cabeza y puedan pueden diferenciarlas entonces por ejemplo en la posibilidad web pues nos referimos a usuarios específicos ya tenemos un objetivo específico planeado el contexto el contexto también es algo específico o sea referente a lo que a lo que queremos testear y pues se hace con eficacia eficiencia y siempre se garantiza la satisfacción del cliente pues es básicamente como hacer ciertas revisiones específicas con usuarios específicos y manejando un contexto controlado donde se puedan tomar todas estas pruebas de usabilidad pues un ejemplo claro pues ahí lo tenemos el primer ejemplo nos muestra una mala usabilidad pues el diseñador se se volvió loquito y hizo un montón de cosas que al final al usuario le sucedió eso le complicó la vida y no y no da facilito que pues lo que debería ser la usabilidad vemos en el segundo ejemplo pues es una buena usabilidad el diseñador hizo un diseño que pues facilito mucho la experiencia del usuario y pues ahí se nota que es mucho más fácil llegar a la meta en la parte de la accesibilidad web pues hablamos de flexibilidad con los que le mencionaba principio beneficia a usuarios en este caso a todos no solamente a los a los usuarios con discapacidades se utilizan tecnologías de asistencia incluso paralelamente no necesario crear un sitio web adicional se podemos utilizar el mismo sitio web que estamos desarrollando y poder darle soporte a todas estas tecnologías de asistencia sin que visualmente en nuestro sitio se alteren y que se da diferente ni que se vea más más pues se altera pues a nivel de diseño de pronto que el diseñador te vaya a decir que no se ve igual porque se va a ver realmente igual incluso hasta mejor porque va a ser más óptimo y va a cargar mucho más rápido y pues le damos soporte a todos estos dispositivos de asistencia casi siempre pues debería ser exigida por ley pero bueno aquí en colombia solamente pues la asistencia las hacemos a nivel de gubernamental pues los sitios web que tiene el gobierno deberían ser accesibles por ley si no pues deberían quejarse porque debería ser así incluso también permiten la igualdad de acceso y la igualdad de oportunidades al tener la vuelta accesible imagínense pues un banco imagínense una una tienda y comer si es accesible pues muchas personas o van a tener muchas más ventas van a personas que tengan estas capacidades van a poder hacer su compra van a poder hacer tramites bancarios y necesidad de ir al banco y esto pues va a generar muchas muchas mejoras y ventajas del de parte y parte porque pues van a alivianar un poco la carga en el caso de los bancos presencial donde haya mucha gente esperando y pues imagínense personas con discapacidades esperando ahí como largas filas y eso entonces es bastante complicado entonces pues hay páginas bancarias que creo que pues que están haciendo la tarea otras que no otras que básicamente no les interesa e incluso los e-commerce de locales la verdad es que no son accesibles y son bastante complicados incluso para personas que no tienen ninguna discapacidad a veces son complicados para usar entonces estas personas pues están perdiendo muchos clientes por debido a esos problemas bueno ahora sí volvemos con la con la accesibilidad pues la accesibilidad web hace muchos años se utilizaba de esta manera como les mencionaba había una iniciativa que se llamaba la web aria en este caso solamente la voy a llamar aria para no estar como diciendo voy a aria todo mundo la llama aria y básicamente lo que quiere decir es que el uso de etiquetas extras que se que se agregan en el en el código html por ejemplo aquí vemos una un breve ejemplo pues todo estoy utilizando todos son div no estoy la bueno está no estoy utilizando la semánticamente pero gracias a lo rol a lo rol de aria pues nos permite darle un sentido semántico a esa a esas etiquetas que solamente son contenedores de div entonces si se dan cuenta tengo una etiqueta o cabecera tipo header donde estoy se refiriendo aquí que es el banner y dentro de ella tengo un buscador pues aquí le estoy diciendo que el formular tiene un rol de buscador igual así sigo bajando tengo el rol de el main que como el contenido principal tengo el rol complementario que son contenidos adicionales igual el rol navigation y contenido que básicamente pues se refiere como al cúter o cosas así ya todo esto ha actualizado y ha cambiado y pues ahora conseguimos web semánticas donde ya tenemos una etiqueta que se llama header una etiqueta que se llama cúter una etiqueta que se llama site una etiqueta que se llama main y así sucesivamente pues todo esto lo vemos reemplazando pero eso nos quiere decir que no sigamos utilizando las etiquetas aria porque es muchas veces los dispositivos que pues que la aprovechan de cuando se conectan a los páginas todavía pues buscan estas etiquetas y es la forma como que podemos ayudar a estas personas que puedan utilizar la página de más o menos así viendo la modo de más profundo pues sería algo como esto aquí tenemos el navegador del usuario pues aquí tenemos la información la interfaz de usuario los elementos que le mencionaba allá y todos esos elementos pues lo lo la manipulación que hacemos es por medio de JavaScript que sería como inyectar todas estos rol y estos estados y propiedades para que el usuario pueda saber que está ocurriendo en su página a la hora de utilizarte en tecnología de asistencia en este caso el rol pues puede manejar tipos de widgets pues pues también puede hacer unos puntos de referencia de la navegación como se los mostraba antes que tú puedes anunciar dónde está la navegación donde están los widgets donde están todas esas cosas incluso puedes tener propiedades como widgets formularios regiones relaciones y valor todas todas esas cosas pues puedes puedes verla aquí en el en esto que se llama como el rápida sensibilidad que es basada en área y pues encontramos todas estas pues por decirlo roles y estado estados y propiedades incluso hay muchísimas más esto fue algunas que puse ahí pues pueden consultar el el iniciativa web y área y pues se van a dar cuenta que hay muchos ejemplos y que cada uno cada le cada elemento o cada componente web pues tiene su forma de hacerlo accesible entonces no hay no hay excusa de pronto que no que yo voy a utilizar un slider que me inventé bueno pues lo puede hacer accesible utilizando las técnicas recomendadas incluso las etiquetas que recomienda o los roles que es recomendado para ese componente y si lo pues si lo analizan y lo ven en detalle en la página pues se pueden dar cuenta vamos voy a hablar sobre algunos beneficios de tener una web accesible pues esos son son varios pues puede escribir muchos más pero bueno se nos va el tiempo y le voy a le voy a mencionar algunos una una de las uno de los beneficios pues de tener una web accesible pues mejora la indexación y localización del sitio web en los buscadores tenga en cuenta que uno de nuestros visitantes que esperamos que llegue a nuestra página pues el motor de búsqueda de google que indexa nuestra página y si se dan cuenta pues el motor de búsqueda no va a entrar como un usuario normal donde va a tener acceso a la parte o la interfaz de usuario sino que va a hacerlo por el código entonces en este caso es donde yo digo que google en este caso es ciego y pues debería pues donde si ustedes tienen todas estas etiquetas bien hechas semánticamente y ajustadas para la accesibilidad para google va a ser también mucho más fácil de que su página sea indexada y categorizada como debe ser entonces por eso es que mejora la indexación y por eso es que tener una web accesible nos ayuda con la parte de ceo otra de las cosas después que reduce el mantenimiento web fue una de las cosas cuando uno está planeando hacer un sitio web accesible nos ayuda a pensar más consistentemente es a modularizar la página de tal forma de que de que sea mucho más fácil de de ver errores que se puedan presentar y esto nos ayuda a reducir el mantenimiento otra de las cosas que nos ayuda a tener una web accesible es que es la escalabilidad y el crecimiento o sea nos permite pues tener en cuenta nuevas líneas de negocio pues como les dije pues nos abre la el abanico de posibilidades de que nuestros visitantes o sean personas que pues que tengan alguna discapacidad y incluso nos podemos dar cuenta dependiendo nuestras métricas de de tracking de nuestra página que esas personas realmente son nuestros clientes entonces podemos ir cambiando nuestras líneas de negocio ajustadas a ese tipo de público es una de las cosas que me gustaría que estuvieran en cuenta a la hora de que estén creando un sitio web accesible otra vez las cosas después nos ayuda con la movilidad de tener un página web accesible y adaptadas a estos dispositivos es mucho más fácil pues poder utilizar en las celulares incluso televisores o o pda que pues básicamente son sistemas o dispositivos de que la mayoría de estas personas utilizan para poder tener una traducción de ese contenido que tú le estás enviando otra de las cosas pues vamos a tener un aumento considerable en el número de clientes eso si es pues garantizado cuando uno abrimos más nuestras posibilidades o una forma de que nuestra página web sea visitada por mucha más personas podemos tener muchas más conversiones podemos tener mucho más lit y eso pues nos aumenta las ventas en seguida bueno también tenemos la contracada que los errores comunes y trata de escribir las más comunes que pues puede tener en cuenta entonces vamos a ir nombrándolo normalmente cuando uno tiene errores en la en cuanto está haciendo desarrollo web pues siempre siempre es lo que ocurre es que se nos olvida e usar o hacer uso correcto de la alternativa textual o sea poner el alz a los a las imágenes y eso es bastante bastante ayuda para las personas que tienen estas estas dificultades o esta discapacidad entonces esa esa alternativa textual debería ser relevante o sea que le da información al usuario que es lo que contiene esa imagen o sea no puede ser como que poner imagen uno o de pronto poder y ponerle el mismo nombre de la de la imagen que subieron que o que descargaron de un sitio x y que tenía un código un número y ese el código número que sale que valeré el lector de pantalla entonces porque tengan una descripción relevante en su alternativa textual para que pues tengan en cuenta ese detallito otra de las cosas pues las imágenes casi siempre pues tenemos muchas imágenes que son decorativas que no dicen nada que simplemente son fondos o background y pues que ustedes algunas veces cometen el error de meterlas en el html como imágenes entonces no no toma la precaución de agregar de agregarle un área hay que que sería el wey área el que necesitaría para para decirle al lector de pantalla de que se eso no no es una imagen que pues que deba tener en cuenta para anunciar al usuario incluso puede dejar el alternativa textual vacía más el área hay que pues le ayudaría al usuario a que no sea informada esa imagen en absoluto incluso también pueden ser embebidas en el en el ccs en el html a través de ccs para que no sean anunciadas al usuario del usuario no tenga que ver con la caso de las personas que no ven por ejemplo otro error común que que pues por respecto a la sensibilidad en los formularios olvidan siempre en las etiquetas leybo asociarlas a los a los input esto básicamente se hace mediante atributos for y el el idea del input de muchas veces pues hay diseñadores que hacen sitio y no visualmente no ponen los labels y de una desarrollador lo que piensa es que no me pusieron los labels entonces pues yo no lo voy a poner en el html entonces es un error grave lo que lo que está haciendo porque está ahí está restringiendo la parte de asesibilidad de tu de tu formulario entonces para que tenga en cuenta de eso otra es el color se usa como único medio visual para transmitir información hay muchos errores que se cometen en este tipo es que por ejemplo el diseñador llega y crea dos botones y pone un botón de confondo verde un botón con fondo rojo y pues al desarrollador se lo olvida como utilizar los áreas para anunciar que es cada cosa y decirle al usuario entonces si siente una persona con dalton mismo si tú le dices haga clic en los siguientes botones pues no va a hacer clic en nada porque no lo ve realmente entonces tenga en cuenta esos detalles a la hora de desarrollar su página otra vez en los colores de texto no tienen un contraste mínimo de cuatro cuatro a cinco a uno que es lo recomendable entonces pasa lo que les comentaba con respecto al contraste cuando estás debajo del sol y tratas de ver ciertas páginas que no ves nada pues porque no tienen buen contraste incluso hay textos que están sobrefondo que son del mismo color y no tan constrasta contrastado para una persona de pronto que pues no tenga ningún problema pues lo va a ver pero personas que tengan discapacidad de alguna forma pues no van a ver nada que tengan en cuenta esos detalles otra de las de las errores o que se presenta en exponer medidas absolutas en los tamaños de fuente ahí lo que están haciendo es que impiden que el usuario pueda aumentar y disminuir el tamaño del texto entonces para que tengan en cuenta cada vez que estén desarrollando un sitio web pues cuando estén tirando los tamaños en ccs traten de poner medidas relativas ya sea en el reen o en píxeles perdón en el porcentaje o este tipo de medidas relativas a bueno esa es otra cosa también que horrores comunes que a veces pues cuando están los logitos estos de de las de las store que ponen el logito y lo meten en un link y no dicen nada que hay ahí básicamente lo que están haciendo es que los usuarios de que tengan discapacidades no puedan no sepan ni qué rayos hay ahí y no pues no van a hacer clic porque simplemente los lectores de pantalla no pueden interpretar lo que hay dentro de la imagen entonces si van a utilizar este tipo de imágenes dentro de los botones pues les recomiendo que al menos utilicen los áreas para decir que ahí dentro hay una imagen que se hace referencia a una a un store en este caso ya sea por android o lo que sea y que pues el link lo va a llevar hacia allá para que para que tenga en cuenta eso todo contenido web del todo contenido del sitio web no es accesible a través del teclado o el poco del teclado es visible entonces eso es básicamente es que muchas veces cogemos por ccs y el online del online de los elementos se lo se lo quitamos porque se ve feo y muchas veces piensan eso y lo que están haciendo es que las personas no puedan saber dónde están posicionadas en la pantalla entonces estos estos se puede corregir o se puede mitigar pues pueden incluso pues hacer un diseño a ese online basado en lo que está en el diseño de su página y pues ahí pues pueden dejarlo y no quitarlo de manera que de pronto una persona no pueda saber dónde está posicionado cuando utiliza dispositivos por el como el teclado con el tap o algún dispositivo externo que le ayude a navegar en la página los carruceles o sliders no pueden ser detenidos o pausados ese otro error que se presenta mucho también es que pues hacemos los sliders o los carruceles o lo que sea y pues lo ponemos que infinitamente corren ahí hay una información que tenemos que el usuario debe leer y hay unas personas que tienen problemas cognitivos no no alcanzan ni siquiera a ver qué es lo que dice porque va muy rápido o uno puede detenerlo al momento que está revisando otra otro detalle otro punto que no se les puede pasar porque esto le va a traer muchos problemas esto también va batado con el foco de los elementos o del online de los elementos este estos esto de la de la tab indies pues deberíamos realizar de una manera coherente que cuando la persona de tab pues vaya bajando los elementos de manera lógica y coherente pues y no salte por ejemplo del del hedra al fútbol y así porque si no la persona se va a perder los enlaces no tienen una descripción que identifique el propósito de elementos o es demasiado ambigua provocando confusión el usuario a navegar por las páginas a través de un asistente técnico ese ese error se refiere básicamente pues cuando tenemos un botón que dice pues clica aquí pues ya sabemos que es un botón ya sabemos que tenemos que clicarlo porque le ponemos clica aquí o sea tenemos que decirle qué va a ser o qué acción va a ser ese botón entonces se resulta que no no estamos sabiendo utilizar este tipo de cosas y pues estamos limitando incluso a personas que no tienen problemas de capacidad ese crit aquí no les dice nada el contenido no se encuentra estructurado encabezados h1 hc siguiendo la delarquía lineal y coherente de la descripción de la descripción adecuada ese otro problema pues una de las cosas que deben tener en cuenta que si ustedes quitan el ccs de tu sitio web la página que se queda y sin los estilos debería leerse como un periódico y eso lo lo no nos ayuda que a que sea así por con los h1 y con los parros y todo esto de este elemento que tenemos disponible en el html si lo estructuramos de manera última o una manera coherente pues vamos a tener todo esto estructurado de una manera como lo como lo estoy diciendo como si fuera un periódico no se indica el idioma del sitio web mediante la tributa ulan o los cambios de idioma bueno ese o ese otra cosa afortunadamente en wordpress esto es automático cuando ya tú haces o estás a un tema muchas veces y cuando tratas de utilizar un un traductor de esto ya sea wpm loco tras ley o alguna cosa de estas que traduzca la página él por debajo se encarga de agregar el atibuto o el cambio de lenguaje entonces pero algunas veces las personas pues hacen contenido inglés y se olvida colocar el lance en la etiqueta html como atributo entonces tenga en cuenta eso que es bastante importante y afecta las métricas de de los algoritmos de velocidad y demás no se informa el usuario sobre errores de introducción de datos de entrada como se indica el formato admitido en el campo de entrada o asociar algún error correspondiente al campo de entrada mediante el atributo cua y aria described by entonces eso pasa muy muchas veces en los formularios cuando uno está llenando un formulario ustedes siempre esperan que la persona vea el mensajito ahí que dice no pude llenarse no se olvide llenar el campo tal porque es requerido entonces si no agregamos los áreas describe by lo que hacemos básicamente que un usuario que tenga problemas o que esté utilizando un vector de pantalla nos no tenga retroalimentación de que ha habido un error en este caso en el formulario entonces ojo también con eso y eso es bastante fácil de agregar los formularios o cualquier elemento que tenga algún feedback para el usuario en ocasiones se desea ocultar información visible pero no para los usuarios de asistencia técnico esto es un error común que uno hace siempre cuando uno quiere ocultar una una una imagen por ejemplo en los dispositivos móviles pero que se da bien es que se vea en los dispositivos en la parte de esto lo que hace es un display en ccs y eso lo que hace básicamente es que la imagen no existe para los lectores de pantalla entonces hay técnicas que se utilizan que por medio de ccs uno puede hacer que la imagen visiblemente no se no esté ahí y lo que hace uno es que la saca de la de la de la zona visual de la pantalla entonces para el lector de pantalla ahí sí hay presente una imagen pero visualmente para los usuarios o lo que la imagen que no quería mostrar ahí está eso se utiliza para muchas técnicas cuando uno utiliza un imagen con background y que pues realmente quiere que es que esa imagen se indexe o que o que el motor de búsqueda pues la indexa entonces uno hace una técnica de tener una imagen oculta dentro del mejor guáper donde estoy mostrando la la imagen en background y simplemente pues la la saco de la pantalla con con sr only o sea dependiendo del del ccs que estoy haciendo y ahí pues puedo ocultarla pero que no que no quede invisible para para en este caso el lector de pantalla o el motor de búsqueda que me está indexando la página los cambios de contenido que se producen automáticamente no son anunciados al usuario mediante el tributo pues ya era correspondiente cada vez que tengamos por ejemplo un un este ya sea un carrusel un acordeón es la idea cuando abren cierran uno de veía por ya va a escribir también agregarle estas estas área labels que indican al usuario de que se abrió o cerró en este caso el carrusel o o la acordeón o lo que sea entonces eso también pues en termina hay mucha documentación sobre eso y me gustaría que pronto la la revisaran antes de interar los carrusel incluso muchas librerías famosas como es leak pues ya esto lo trae por default y agrega estos estos estos metáreas al código sin sin necesidad que nos tenemos que agregar bueno termino con este se utilizan etiquetas html o tributos o roles área de forma equivocada es decir con una funcionalía diferente a la que ha sido establecido esto es un error que se comete pues cuando está empezando en esto de accesibilidad uno simplemente empieza a utilizar los atributos porque creyó o se pareció a lo que creía que hacía y no se toma el trabajo de ir a revisar en la documentación que hace cada tributo o que hace cada rol cada rol y cada tributo es específico para lo que esté tratando o el componente que está utilizando en la web tomate el trabajo tomate el momento antes de que empiece a hacer los cambios pues consulta la documentación y pues es bastante sencillo a la hora que lo aprendes ya pues se hace mecánico y simplemente cuando estás tirando el html pues vas agregando tus roles sin problema esto es todo lo que le quería mostrar de momento sobre la accesibilidad recuerde que esta esta charla es una introducción esta charla es mucho más amplia incluso y no no si no ni siquiera llegué a mostrarle en la parte práctica como como se hacía entonces próximamente pues estará haciendo trasladar la sobre accesibilidad y a más práctica no tanta teoría pues quería que viera la teoría para poder ir a la práctica y que no hubiera dudas si tienen preguntas pues estoy atento a responder la pregunta hace bueno hay no hay preguntas bueno parece que todo le le ok que que ejemplos tienen de web accesible bueno este déjame le le comparto la pantalla ahora mismo nosotros estamos haciendo un desarrollo de la nueva página de cumbia ese desarrollo ese desarrollo todavía está en progreso pero ya tenemos mucha mucha delanto déjame le comparto la pantalla y se las muestro bueno ahí esto es la nueva página de cumbia todavía está en desarrollo y pues estamos haciéndola accesible pensando en el performa pensando en en las buenas práctica pensando en todo esa el algoritmo de que no que nos hace el audit y solucionándolo todavía pues como les dije no está 100 por ciento todavía estamos en desarrollo pero si ellos genera un reporte ahora mismo aquí pues me va a dar unas métricas pues que son buenas en general o me van a dar una visión de cómo voy antes de terminar la página en producción vamos a verla y como qué métrica nos da pues no tenía preparado esto entonces espero que entiendan de que todavía está desarrollándola estamos desarrollándola con varias personas de la empresa y pues puede que algunas cosas no marquen como deberían ser bueno está terminando el test bueno ahí está bueno miren que la accesibilidad pues ya tenemos 100 por ciento aquí no estamos pasando todas las todo el audit completo tenemos todos los roles tenemos toda la lo que lo que yo le mencionaba tenemos un pequeño detalle de pero me imagino porque como estoy corriéndolo en un servidor de pruebas pues todavía hay problemas no tengo un cdn no tengo muchas cosas que debería tener y eso pues impacta directamente en el performa esta parte de buenas prácticas pues hay cosas que me está diciendo básicamente se refiere a los escritos yo me imagino que esa pues está hablando de mi algunas cosas que nos está minificada aún y otras cosas que se pueden optimizar como lo decía ronar en su charla en la parte ese pues básicamente me dio 91 porque la página todavía no está bloqueada para que ser indexada entonces pues me está mostrando la advertencia pero apenas la pasemos a producción estoy seguro que esta métrica va a dar 100 por ciento y en la parte si te dan cuenta del último tenemos un progreso y web app que eso es bastante bueno porque nos permite mostrarle contenido al usuario incluso si no tienes internet incluso le podemos mandar notificaciones y un montón de cosas más interesantes vamos aquí si hacemos el tejo después lo hice antes vamos a hacerlo si tenemos la página completamente accesible pues nos ayuda a que pase esto también hay que ya tenemos ya en el en el en google pues 100 por ciento y mira que el render se hace desde el primer fotograma o primera pantalla eso que está renderizando que muchas veces a personas le pasa es que pasan cinco seis siete cuadritos de esto y apenas que se va a mostrar la página que hay ahí hay problemas de elementos que se bloquean el render de la página entonces cómo conseguimos esto como mencionaba ronar teniendo crítica el ccs optimizando haciendo differ de los contenidos pero mira en móvil todavía tenemos un detallito pero va más que todo al servidor que eso lo vamos a conseguir ya cuando tengamos en producción la página y tengamos el cdn y tengamos el gaché y tengamos todas esas cosas que nos van a ayudar a que a que pues pues incluso ccs sin usar es porque todavía no hemos modularizado el ccs que eso lo vamos a hacer próximamente porque empezamos a utilizar gutembe y estamos haciendo los contenidos en los bódulos en riad que nos van a ayudar a que esto se solve solvente e incluso hay un detallito de pronto de cargas previas solicitudes que no se están haciendo en móvil pero si se están haciendo en texto entonces ahí tenemos que como que revisar y pues que nos que nos empiecen a dar las métricas incluso si llevamos si llevamos la página a gtmetrics como nos mostraba ronal pues nos da otras métricas o nos da otra visión y nos ayuda como a entender a entender más lo que está pasando con la con la página entonces vamos a esperar un momento y comienzan a hacer fech del sitio y nos damos cuenta de que todas estas cosas que hicimos para la sensibilidad nos están ayudando a la hora del performán de las buenas prácticas y todo miren aquí ahora mismo tenemos unas métricas muy buenas que se pueden incluso mejorar mucho más cuando yo que pues mira aquí aquí hay una oportunidad que agregue lo que les mencionaba no tenemos cdn porque es un servidor de prueba esto ya se nos sale un poco de las manos porque mira que esto es un espí de google tat manager que pues yo no tengo control sobre eso pero pero pues podría buscar alguna técnica de que esto se rende dice después y no antes del pintado del contenido y ahí podéis mejorando las cosas de terceros en este caso hace referencia a los gd que está manejando y ya yo no tengo control sobre los gd pero miren que las demás métricas pues son bastante buenas incluso la parte del yaba y la del ccs vuelve a aparecer aquí 69 kilovay que pues nos puede estar afectando eso ahí pero ya pues la mayoría de las cosas las estamos teniendo en cuenta y eso nos ayuda que las páginas nos cargue bastante rápido otra vamos a decir logro cargar una de las páginas que también es completamente accesible que hicimos hace poco fue es px ya se las muestro esta página es mucho más se nota mucho más la optimización porque si se dan cuenta y en animaciones no sé si la si la logran ver esto es una onda que se está moviendo este este personaje está animado no sé si lo están viendo que se mueve y todas estas cosas de acá arriba también están animadas pero eso no que no no nos limita la página no nos hace la página más lenta porque estamos aplicando las técnicas que mencionaba ronan en cuanto a diferente contenido a que por ejemplo cuando cargue esta animación cargue primero un fallback o una imagen de pre render antes de que cargue la animación entonces la primera carga o la pintada de la que temela lo que carga es una imagen y luego posteriormente cuando ya se el don se hace ready o está listo nos hace los cambios a las animaciones si si vamos y pasamos a la otra pista pues podemos ver que pues tenemos más animaciones que hay otra animación y eso no nos hace que la página se demore más de la cuenta o lo que se puede se demoraría una página que no tuviera optimizado entonces algo interesante de esto estos steps incluso yo puedo hacerlo sin sin hacer el clip podemos verlo con el con el curso del teclado no sé si entran a la página y se dan cuenta que con el con la frecuencia del teclado pueden navegar ahí y si infeccionamos un poco de eso los que van a ver lo que yo le he mencionado con respecto a a los área label mirar aquí están por ejemplo área controls área selectes miren prestenle atención a este área select cuando seleccionó primero se convierte en tru entonces eso le indica al usuario que ese ese tab está seleccionado y todos esos detalles pues ayudan a la accesibilidad entonces esta página está basada en ala compliance y pues la mayoría de los elementos pues son accesibles y sin perder lo que el señor me quería mostrar que eran que quería animaciones quería quería que los contenidos fueran bastante diseñados a la medida de la marca y otras cosas entonces como ven pues no se limita mira que la página carga bastante rápido como si estuviéramos en local y como el contacto listo si tienen alguna pregunta no sé lo hice ahí en el chat pregunta que creo que hay una de carlos y sin nadie o no sé si hay otra más arriba no puede decir si sí que como sería un diseño orientado principalmente a personas evidentes dice que él pensaba en una para podcas orientado hacia público como te mencionaba en la presentación pues básicamente con que tú agregue los metáreas y les soporta a todos estos dispositivos de hardware y software pues ahí vas a tener la oportunidad de que ese público pueda acceder a tu página incluso los controles accesibles en caso de reproductores como mencionas que quieren acceder algo de podcast estos estos reproductores también los hay accesibilidad en ellos y puedes darles soporte a todos esos controles pues ya sea en el peclado o o o algún dispositivo de hardware que pueda integrar también esta una pregunta de linda martínez dice hola Fabián excelente presentación puedes por favor mencionar una pequeña lista de plugins la accesibilidad web y sus usos y muchas gracias y saludos de ti cuesta santa bueno este básicamente el plugin que te pueda mencionar pues si te refiere específicamente a plugin que puedas usar en golpes o alguna de esto pues la verdad es que yo no uso yo lo que hago es que me voy directamente a la w13 y voy voy leyendo las recomendaciones y pues la mayoría de los sitios que hago los hago desarrollados desde cero no soy de las personas que hace instalaciones en golpes a clics o sea como que está los 10 plugin y ya tengo una página funcionando sino que muchas veces pues desarrollamos el tema de cero y tenemos el control completo de todas estas cosas y esto no garantiza de que bueno la página sea de verdad accesible como decía ronal que cualquiera que te venda la solución así que aquí hay una una herramienta mágica que hace esto sin que tú hagas nada pues eso me tira entonces debes tener el control de todos estos elementos ya sea de las imágenes de los de los estilos de los scripts y todas estas cosas y eso es lo que nos permite que podamos dar o podamos obtener esos resultados esperados en caso de los que les mostré pues las buenas métricas y todo esto se traduce pues las personas de marketing son felices cuando las páginas cargan rápido y ellos saben por qué ser eso convierte más usuario entonces no hay una fórmula o un plugin que te pueda recomendar otra pregunta es de Miguel Bula que es muy buena charla y muy interesante antes de va a retirar y buenas noches y bien gracias a todos pues que llegamos al final no sé si tienen alguna duda o alguna o quieren participar o en este momento decirle un comentario o que les ha parecido la charla sería bueno que no quiera un poquito de feedback en nuestro primer vítor virtual todos los anteriores eran presenciales y pues nos damos cuenta muy rápidamente de cosas del entorno y que pues podíamos ajustar fácilmente aquí perdemos un poco el control pero bueno esperemos que le haya gustado y que pues todas las cosas que se hayan transmitido la hayan escuchado con calidad y que nos haya cortado la transmisión y muchas cosas más que se pueden suceder puede hacer una será encuesta puede hacer encuestas por una vez es decir o en no entiendo la pregunta puede hacer encuestas encuestas pues básicamente puede hacer una encuesta casi siempre son elementos de formulario pues si les da accesibilidad a todos esos elementos como ya habíamos mencionado pues si pueden ser accesibles no hay problema ok te refiere a preguntas específicas o sea no no no sé no sé qué te restiere exactamente como pues validar cuán pues si quieres tener como una forma de medir estas personas o saber dónde están pues hay entidades que ya tienen estas métricas y estas estas encuestas realizadas no pues no de sentido de que tú las hagas nuevamente claro que sí pues en el caso de si recomiendo walkers para que artes y web accesibles completamente los sitios que estamos haciendo últimamente accesibles y pues con todo lo demás que les mostré con respecto al que forma a las buenas prácticas y a todas estas culturas si lo hacemos en work press y con pues no tenemos límites con work pues podemos hacer lo que queramos solamente cuando dan requerimientos y nosotros lo adaptamos a las necesidades que necesitamos en este caso basados en el cor de work press y extendiendo las funcionalidades en lo más posible si no se puede pues las creamos yo no sé si ya hay otra pregunta yo creo que no entonces pues llegamos hasta aquí gracias a todos por venir gracias al equipo de cumbia de Jaime, Luisa siempre están ahí para apoyarnos y bueno feliz noche a todos no sé si algo más antes de irnos que emitamos un certificado de participación no sé será a nivel de diseño, no diplomita para otros la gente bueno entonces quedamos así muchas gracias a todos 11 hay una pregunta sobre hoaxing aparte de todas estas recomendaciones y indicaciones sobre el desarrollo que tan importante sería el hoaxing bueno eso es una excelente pregunta básicamente el hoaxing es la mitad del trabajo pues si tenemos un hoaxing que es lento pues por más que hagamos optimizaciones de performance y lo demás la página no va a cargar rápido el nivel de respuesta de nuestros hoaxing debe ser inmediato o sea deberíamos configurarlo de tal manera que la que la respuesta de http pues sea instantánea y esto pues se puede hacer con muchas técnicas del lado del servidor pues ya sea utilizando en gnex como como un proxy reverso del si utiliza por ejemplo apache que es lo común en los servidores una recomendación es que pueden si utilizó utilizar hoaxing compartidos porque ya saben que los recursos van van compartidos con otras empresas en el caso de que compre un hoaxing que te costó un ser barato lo que no consiste por el año en los cinco dólares eso es un hoaxing que no te va a servir para las necesidades de performance para este caso yo recomiendo que sea mínimo un bps donde tú puedas tener control de la memoria o tenga una memoria dedicada las páginas que les mostré están montadas en bps en servicios especializados de hoaxing no voy a mencionar marcas porque ellos no me pagaron para eso entonces pues pueden buscar ahí simplemente que sea un bps o un delicado donde donde donde pues le garantice en esos recursos listo ok ok luis un placer bueno ahora si nos vamos hay menos si tienes otra pregunta por ahí con qué regula irás a agarrar estos webinar pues intentaremos hacerlo pues lo más regular posible tenemos tenemos bastante trabajo entonces pues sacar este tiempo bastante veces complicado entonces trataremos de que sea lo más seguido posible igualmente nosotros estaremos avisándoles de de cualquier webinar pues por nuestra red también si se hacemos más y pues para repetir la información que les pase más arriba para que la tengan en cuenta ahí en el salto exactamente básicamente como les dije este canal es exclusivamente de wallpaper la comunidad de wallpaper barranquilla pero cumbia está tratando de promover todas sus tecnologías internas con los que manejan hay personal que es experto en esas tecnologías y lo que tratamos de hacer es que esas personas pues charlas a la comunidad cumbia va a ser el host y pues aprovechen y un ansial grupo de luisa que luisa les va a estar avisando cuando se den estas charlas la ventaja que tenemos es que pues van a ser virtuales inicialmente y vamos a poder al alcance va a ser pues el que tenga el limbo de entrar entonces es bastante sencillo bueno entonces nos vemos pues gracias a todos bueno nos estamos viendo próximamente y así a todos bye bye