 bienvenidos a todos. El día de hoy tenemos una charla superamente especial que es descubre el potencial de Figma y Elementor. Está dirigida por dos chicas maravillosas que son Crisia y Sami, nos van a estar contando, mejor dicho, un poquito más cerca de cómo estas dos herramientas nos permiten trabajar de forma más ágil y todas esas características que quizás aún no conocemos. Antes de iniciar la charla, vamos a contarles un poquito, somos Warpers San José, para los que sean su primera charla quizás nos pueden seguir y conocer más de este grupo de Warpers en Miro. Aquí están también, cómo nos pueden encontrar en carrer social, estamos en Facebook, YouTube, en Instagram, Twitter y también tenemos un correo electrónico. Cualquier cosa, como decía Sami, esta charla va a quedar grabada, por si les queda algo pendiente, la pueden volver a ver más adelante en YouTube que la vamos a estar subiendo en nuestro canal. Para tener en cuenta, por favor, el micro y la cámara apagados y pueden enviar sus preguntas a través del Zoom en esta ocasión. También los invitamos a formar parte de Warpers San José. Todos los talentos son bienvenidos desde la parte de contenido, diseño, moderación, innovación, redes sociales, la parte de las charlas y los audiovisuales. Vamos a recalcar que la charla puede ser de algo relacionado con Warpers. Te invitamos también a colaborar en nuestro TikTok, donde solemos compartir consejos, tips o anécdotas de la comunidad y nos puedes enviar esa información al correo San José a www.warpers.org. Con próximos eventos, tenemos Warpers a la tardecer, donde Sami también va a estar acompañando el 21 de junio a las 5 y 30 en Nórdico Café House, igualmente. Y se acerca ya el Warpers San José en 2023, o por meses, y se están dando ya los Mirax Pre-Warcam, que van a hacer los WP Conecta pura vida y son oportunidades excelentes para que ustedes puedan llenarse un poquito de lo que va a hacer toda la experiencia de Warpers San José. El primero va a ser dios mediante el sábado 24 de junio de 5 a 8 de la noche en la República Cervecera de San Pedro. Sin más que agregar, nuevamente, por favor, micrófono y cámara apagados durante la sesión y sus presentas por medio del chat de Zoom. Sin más que agregar, Sami y Picia, les dejo al público a ustedes. Buenas noches. Bueno, primeramente vamos a presentarles la breve charla de lo que es Figma, y me voy a compartirles pantalla. Y como esta charla es de Figma, bueno, vamos a hacer la presentación en Figma, ¿verdad? Para que conocieran que se puede hacer más de una cosa en esta aplicación. Mi nombre es Crisia Castillo, soy diseñadora publicitaria de profesión, también he hecho marketing digital. He sido organizadora del Warpers San José desde el 2018 hasta el 2022. Ya este año ya hicimos un receso, ¿verdad? Porque ya tenemos, ya hay un nuevo equipo y hay que darle la oportunidad a nuevas personas que se integren en este proceso. También es, he tenido experiencia como UXUI recientemente, bueno, a través del Warpers me he orientado más por este ámbito, ¿verdad? Que es muy amplio y vamos a entrar en materia. ¿Qué es Figma? Figma, esto da, un momento. Estamos viendo el área de trabajo, que no hay protetipo donde está el, no sé, lice. Dame un momento. Ok, me dicen cuando, ahí estamos en el beneficio. Ok, entonces me devuelvo. Ok, Figma, son los que no conocen, la herramienta, ¿verdad? Es una, una interfase que está en la web, también hay aplicación que nos permite desarrollarnos como, desarrollar una interfase de usuario y tener más experiencia, ¿verdad? Practicando, haciendo prototipo antes de entrar a un trabajo final como es un sitio, una aplicación. Tenemos otras herramientas que son el Exit y el Sketch, ¿verdad? Pero Figma es gratuita, en su mayoría, digamos, las personas lo pueden usar y gratuita, hay también planes de pago por si ya se quieren hacer cosas más elaboradas, pero la subversión gratuita es bastante rusa. ¿Qué beneficios trae esta herramienta? Bueno, nos facilita la comunicación con el equipo de desarrollo, ¿verdad? También con los del diseño, con el cliente. Tiene una interfase intuitiva, tiene una amplia gama de herramientas y funciones y también cuenta con una comunidad en la nube, ¿verdad? Mediante esta comunidad podemos acceder a información, a trabajos, a usar componentes, entonces nos ahorra mucho trabajo en la realización de nuestros proyectos. Como características principales de Figma, ¿verdad? Bueno, ya les digo, un diseño es una herramienta que permite el trabajo y el diseño colaborativo. Ahí podemos tener varios participantes, ya sea como editor o solo visualizar el proyecto. Tenemos herramientas de diseño vectorial, también tenemos una biblioteca de componentes que son reutilizables, que la gente de la misma comunidad insube, entonces podemos tener acceso a todo este montón de herramientas, ¿verdad? Perdón, creamos también prototipos interactivos, esto permite que el cliente pueda ver un diseño acercado hacia el final, ¿verdad? Para probar y si hay cambios, es más fácil de hacerlo ahí que al pasar a desarrollo, ¿verdad? Que tal vez ya es más elaborado. Entonces aquí se pueden hacer hasta pruebas de usabilidad. Aquí tenemos también la opción de tener comentarios y revisión de los diseños, ya tenemos integraciones con otras aplicaciones y nosotros también tenemos complementos. ¿Qué necesitamos para iniciar un proyecto en Figma? Yo creo que en todos los proyectos, ¿verdad? Necesitamos ser organizados, organizados con los archivos, esto permite un mayor entendimiento en el dentro del equipo y también un entendimiento para el cliente y para realizar cambios, ¿verdad? También necesitamos utilización de componentes, esto nos va a facilitar y se los recomiendo un montón, nos va a facilitar el trabajo y nos permite también no replicar botones del deser, sino utilizar por medio de componentes las diferentes interacciones que esto nos permite. También nos permite crear tipografías y colores y Figma, digamos, también tiene como Wordpress, tiene Plugin. Entonces esto nos facilita muchísimo, muchísimo nuestro trabajo, ya sea que nosotros, bueno, la comunidad también ha desarrollado los Plugin, entre colores, tipografías, etcétera y también nos permite un prototipo con mayor fidelidad. Los Plugin, yo se los cuento desde lo que es, experimentado desde el trabajo que yo he hecho. Estas son mis recomendaciones. En texto, aquí me faltó otro, pero tenemos el Content Read, que esto nos permite, nos genera un texto más, no inventado, sino, bueno, el, perdón, nos permite tener un texto más real para presentar al cliente para, para su evaluación y aprobación. También es, nos, hay otro, otro Plugin que se llama Lorex, verdad, que es texto fingido, verdad, pero este para mí, mi recomendación es mejor el Content Read. Para fotos e íconos tenemos Un Splash, para íconos Unicone, Unicone, y si quieren meter un emoji o una imagen aquí, Figma. Y también tenemos colaboraciones de Plugin, verdad, de Trelo, de Trelo y Google, que esto nos permite también la mayor comunicación entre el equipo que está involucrado en el desarrollo de la aplicación o de la web. Ok, ahora vamos a conocer un poquito más la interfaz. Yo, bueno, ahorita les enseño, ya no puse la interfaz, pero este es un ejemplo. En la barra superior tenemos el panel de herramientas, si queremos bien se los comparto en este diseño real. Ahí me dices, si, si estoy compartiendo. Sí, ahí estamos viendo Lorex. Ok. Es que quiero presentarles ya directamente en el Figma, verdad, para poder asesar a la barra de herramientas aquí, bueno, tenemos todos los, aquí donde vamos a encontrar los Plugin, verdad, aquí, estos son los que yo tengo, pero uno puede buscar aquí en la comunidad más Plugin y nada más lo corren, eso de acuerdo a sus necesidades, verdad. Aquí tenemos también la flecha para mover, aquí hacemos los frame y tenemos herramientas de dibujo para hacer rectángulos, etcétera, de acuerdo también a sus necesidades. Tenemos por si ustedes quieren, quieren hacer un dibujo o una figura en particular, verdad, la herramienta de texto. Aquí, bueno, estas es para los componentes, si los tienen, aquí podemos visualizarlos, aquí para, para mover y esta también muy utilizada entre los equipos es para comentarios. En la barra, en esta barra izquierda, aquí es donde se va a ver nuestro proyecto. Aquí hacemos las páginas, lo ideal sería ordenarlo como diseño, este, el sistema de diseño que es muy usado también por los desarrolladores y aquí nuestra carpeta de componentes, verdad. Seguimos con, como les comentaba, los componentes son muy importantes para nuestro proyecto, ya que esto nos evita mucha pérdida de tiempo, mucho trabajo, entonces desde un principio ya nosotros establecemos como queremos los botones, como queremos la funcionalidad de nuestra web, verdad. Entonces aquí uno construye los botones y hacemos sus variantes, verdad. Si queremos que sea en hover, hacer clic, que debo directo una página, entonces aquí hacemos todas las instancias que esto nos sirve mucho para que el equipo también de desarrollo lo interprete y así lo utilicen en el sitio, también nos sirve como lo he repetido para que el cliente vea de primera mano cómo se va a comportar y qué acción nos va a tener nuestro sitio. El sistema de diseño, que es una parte fundamental también tener de tener en nuestro trabajo, que quiera tener componentes en la interfaz como lo vimos en la depositiva pasada, también es importante tener la que es tipografía, establecer los tamaños, el estilo tipográfico, los colores espaciado, los estilos de nuestros cuadros o imágenes, van a tener bordes o sombras, los íconos, los colores, o sea, qué estilo de ícono vamos a utilizar. Y aquí tenemos un ejemplo de este sistema, verdad. Aquí nosotros le decimos, pues establecemos desde antes qué tamaño va a tener nuestro título, qué estilo tipográfico, los colores primarios que va a utilizar nuestra web, los colores secundarios, el estilo de la iconografía, verdad, porque es importante que nuestra web tenga unidad y, sobre todo, que vaya con el estilo objetivo también de la empresa. Entonces, esto es muy importante porque nos sirve a nosotros avanzar en el diseño, nosotros como UX, UI, verdad. Y para los desarrolladores también nos sirve mucho para la elaboración de la página web. También Enfigmas da un prototipo, verdad, de lo de su versión de aplicación o web, verdad, y esto puede ser sometidos y es muy importante esto, que sean sometidos durante el proceso de diseño a pruebas de usabilidad y accesibilidad. Y esto nos evita mucho trabajo, ya con, o sea, esto digamos, el cliente puede saber desde antes si está funcionando también su proyecto y nosotros como equipo también nos permite hacer cambios antes de llegar al final. Entonces, esto nos genera un prototipo de alta fidelidad. Yo le estoy en la, en la comunidad, bajé este prototipo para que vean un poquito más, porque nosotros le vamos a presentar uno, pero solo es el landing. En la comunidad encontré este para que vean un poquito cómo se interactúa. Entonces, aquí esto es lo que vemos ya cuando el diseño, el prototipo ya está unificado, cuando ya tiene la funcionalidad y todo así se ve pura línea, pero ya el correrlo, ahí lo están viendo bien. Sí, ahí se ve bien. Ok, entonces esto es como para que vean, uno puede compartir al cliente solo esta parte, el cliente no es necesario que vea todo el proceso, verdad, este de carpetas que tal vez no va a entender nada, pero uno puede compartir desde esta parte al cliente, verdad, para que también su automación y hacer las pruebas. Entonces, este es un ejemplo que yo encontré en la comunidad de cómo se media un prototipo con todas esas frame, verdad, ya elaborados y haciendo las variantes correspondientes. Entonces ves que aquí ya probamos lo que son botones, hacemos el registro, entonces hacemos que vemos que cómo se va a comportar nuestros sículos, cómo cambian los colores, verdad, y todo esto ya es algo que el cliente aprobaría o cambiaría en el proceso y ya después entre el equipo de desarrollo, verdad, hacer ya el producto final. Todas estas animaciones, interacciones que se hacen en Figma, entonces es una manera muy real de lo que debería nuestro proyecto, verdad. Como le decía también, este es el Figma, se puede integrar con herramientas, en mi caso es excelente con Adobe Ilustrador porque yo puedo como diseñadora elaborar y con los que tal vez no trae el Figma o que no consigo o el cliente quiere, verdad, los elaboro en Ilustrador y los paso en ese UEG. Y el Figma me lo reconoce ahí mismo, yo puedo cambiarle lo que es color, tamaño, hacer variaciones, entonces para mí digamos es excelente que con Ilustrador tenga esa integración y ya sea digamos, para los equipos tiene su integración con Slack, Tira, Trello, Google Drive, verdad, que siempre es como, se necesita tener toda esta integración porque pasar de un lado a otro, verdad, a veces se vuelve tedioso y lo que uno ocupa es rápidez y le voy a dejar de compartir para explicarles la idea de este, mirad, verdad, es como es crear un diseño, verdad, para que ustedes puedan ver lo que se puede hacer aquí en Figma, entonces como ejercicio, este es el proyecto de un landing que posteriormente Sami va a pasar a Elementor, verdad, entonces sí, este nos compartí, se la había trabado, se echó en la panguera después. Ok, aquí para el ejercicio se hicieron pocos componentes, verdad, porque no tienen, no van a otras páginas y no es para explicarles una idea de lo que se puede hacer, ok, tenemos lo, lo, en NatBark, en un pequeño, un carrucel, verdad, los íconos y este formula, bueno, esta, esta botón de acción, entonces si me explico un poquito, aquí está los componentes, estos son los que yo les decido. Ok, estos íconos están, nos bajé con la misma aplicación de, de un plugin donde hay de íconos, verdad, aquí nada más lo que hicimos es cambiarle el, el tono, verdad, cuando usted, cuando el mouse pasa sobre este componente lo que va a ser eso, y aquí están los que tienen nuestra página, este sería el carrucel y les voy a mostrar el prototipo, es muy pequeñito, verdad, sólo para el ejercicio y este es un carrucel, aquí hacemos este, el logo al pasar el mouse de muñera, cambiará el color, aquí le cambiamos el tono al botón, cuando pasamos el mouse podemos cambiarle el tono, verdad, para que nuestra página sea un poquito más interactivo, y aquí, cuando le damos clic, ya cambia de tono, de tono, si hubieran más páginas obviamente irías hacia la página, o le ponemos el mensajito de su suscripción ha decidido éxito, verdad, nada más para que vean un poquito todo lo que se pueda hacer con este, con este herramienta, entonces le doy el pase a, hasta para que siga con este proyecto, verdad, en la parte del evento, vamos a ir compartiendo pantalla, ok, ahí tenemos esta pantalla, vamos a ver, a uno con un programador le pasan así el diseño, pues bueno, bueno, voy a empezar otra vez por presentarme un poquito más, yo tengo ya que uno se ve a nosotros trabajando en web, si no me equivoco, entonces hay muchas herramientas que he podido usar y uno se va a acomodar, en web pasa algo que ha evolucionado junto con otras cosas de sistemas de computación o mal de academia, y incluso cosas, tenemos habilidades de oficina, que también se han venido para web, de esta parte del diseño, los utilizados actrices, las integraciones, por ejemplo, con el preloj para organizar, para ver el progreso del proyecto, pues sí, más parte de las, de las herramientas. Ahora bien, a mí como desarrolladora, me pasa esta página y llegó, ok, perfecto, ya aquí están, ya hablan, hay algo muy útil, no sé si ahora notaron que crisis activó los comentarios, resulta que esto es una herramienta colaborativa, entonces, digamos, nosotros me importarán al mismo tiempo viendo lo que está haciendo, editando o puedo decirles como un mensajito aquí a Cris, de que necesitamos revisar esto, revisar, por ejemplo, tal vez no tanto el botón, sino el flujo, el flujo de las pantallas. Después el cliente puede dejarnos perfectamente aquí otro comentario que diga, necesitamos incluir un número y fecha. Esto es muy bueno, porque nos permite también darle trasladidad, como ven aquí van quedando, yo puedo marcar, los personalistas, los comentarios, son súper dinámicos, pasa algo muy frecuentemente, bueno, como va a saber de eso, bueno, aquí está y antes solía pasarnos de que, bueno, y este es el diseño y nos da otra carpeta así, con todos los íconos y después cambiaba el ícono en la página, pero estaba una carpeta, el que nos ha aguantado, también eso nos permite ver que Cris ya después dice, no, este de playa, vamos a cambiar el de playa, ya va a venir aquí, va a cambiar este elemento, yo los elementos puedo descargar, como ven, tenemos aquí a la izquierda, como toda esta jerarquía de los componentes, de ítems, de widgets que los vamos a comprar, para ver a los cuerpos en un momentito y también tenemos todo como el detalle de las medidas y todo eso acá a la derecha y los estilos de así. Una las ventajas, creo que las otras ventajas también lo tienen, yo puedo exportar los gráficos, para mí es lo más importante, exportar los gráficos, me permite exportarlos en el tamaño real o incluso poder aplicar el tamaño, hay estos otros dos, no sé si alguien los reconoce, es hacia el ancho y hacia el alto, entonces exigirle, aquí digan, exporten esa sombrilla pero con este ancho o con este alto, si yo no estoy seguro de que estoy exportando, por ejemplo, estas imágenes del cargo, si hay ahí, pero no sé, para eso nos sirven, el sistema de diseño, esto es súper grande, es otro de los ventajas, no sé, hay que verlo aquí en los componentes, este, si yo no sé cuál es específicamente, puedo venir, decir, ah bueno, aquí es esta página, revisó la imagen, no sé, gracias, sí, es esta, es esta imagen la que quiero, yo me faltaba descartigar esta que dice Roma, pero eso trae las letras o no, que trae, tengo dudas, a la hora de exportar, yo tengo un preview aquí a la derecha abajo, que dice, ah mira, si, este viene con todo, pero yo ocupo únicamente la imagen, entonces ya veo aquí, ok, ya, y si tengo solo la imagen, vuelvo a verificar, así, perfecto, lo quiero en el tamaño real que está ahorita, es una foto que desempeñe, todo bien, exporto, me doy salvar, y listo, ya puedo venir y guardarlo en escritorio para trabajar, los íconos, por ejemplo, yo puedo venir y exportarlos en SVG, perfectamente, sin ningún problema. Una cosa buena que ahora vamos a ver con el evento, es que ya hay íconos integrados del bibliotecas de íconos, entonces no todo tenemos que estar lo exportando de los seis años, llevando no de paragolpes, más hay proyectos, el diseñador acepta uno de los íconos de la página, entonces al ser algo tan específico, pues claramente ahí sí, no le vamos a ayudar. Por ejemplo, aquí tenemos el logo, el logo lo que voy a hacer es ser aquí, madera un besito para meterlo, ok, yo quiero de este logo, este que está aquí, voy a llevármelo en blanco, entonces verifico si ahí están blanco, confondo, transparente, le voy a decir que es SVG, no lo exporte, bueno, logo, salvamos y listo, así estamos, son una de las cosas que nos da practicidad, nos da habilidad de lado de nosotros, que si se dice ya después de que ahora cambiaron las imágenes, ya nada más las cambia aquí y ya yo de aquí puedo descargar y nos mantenemos al tanto y hay mensajes que podemos dejar. Cosas que a mí como desarrolladora me gusta usar, digamos, yo ya por la experiencia y eso es como maniña que tiene una del ojo ya de tantos años, de, de ver, yo diga, bueno, este gris me da a mí la duda de si está suficientemente oscuro para que pase la regla de elegibilidad, excesividad y no sé, entonces, igual como les decía, gris ya anteriormente hay un montón de frijins, yo ve que bueno, te voy a revisar un toquecito, si, esto me sirve, voy a revisar los colores, le doy correr, listo, yo no tuve que hacer una instalación de un plugin complicada, aquí está haciéndolo en este momento y otro color, y ok, este color, si yo sé cuál es el color, si yo sé cómo ubicarlo, publicarlo nada con varias opciones, yo no voy a hacer más que decir, bueno, el fondo es blanco y después voy a elegir el otro color, que es el del font, si, ese es el del font y el libro dice, y dice que, bueno, no, no me pasó, ok, entonces ya yo sé que aquí necesita un gris más oscurito, este, ¿qué hago yo? yo puedo perfectamente, es libre, aquí con las noticias, entonces, pues, cosas así, es digamos muy ágil validar, que yo no tengo que ir y mandarle un correo, o que ya que dice, sino que esto es así, figma, yo eso lo uso desde el instalado como una aplicación en el apuntador, entonces, yo activo las notificaciones y yo estoy aquí, pues, yo, crisis está conectando, entonces, no, no, no voy a mandar esta notificación, porque, incidentemente, crisis está aquí, le va a llegar este pompa, no es necesario, ¿qué pasa? que tal vez no es algo tan simple como un color, yo necesito saber como, cuáles más oscuros y como el de los títulos y ya, si necesitamos así, una llamada rápida, figma, ya lo incluyo, entonces, para uno como desarrollador, también pasa, de que en este ejemplo tenemos solo un landing, hace un tiempo tuve un proyecto que teníamos 105 páginas que migrar y el diseño, pues, tieran plantillas, pero los componentes se lo repetían y entonces, tiera muy fácil comunicarnos, entre desarrolladores vamos activando aquí, vamos a ir como, este, mirá, Máximo, estás en línea, sí, tal cosa, en una pregunta, como hiciste esto, lo otro, sí, pues, está listo, sí, no, ok, chau, y seguimos trabajando sin tener que abrir una tercera aplicación de un chat y más cosas, cocinados desde estos que uno como de desarrollador le gusta, ya después, es muy fácil, con doble clic, entrar, seleccionar en cualquier texto, y ya uno el font que tiene, el peso, tamaño, colores, todas las dominaciones, algo que siempre es, este, complicado de hacer con los diseñadores, si uno te está descomodando, este espacio, yo aquí lo que hago es seleccionar el contenedor del título, aquí se selecciona eso y presionando nada más la tecla alta, de la izquierda, la que es nada más alta, nada más alta, muevo el mouse, no estoy dando clic, la presión y muevo el mouse, y él me va a decir las distancias en píxeles hacia abajo, hacia los otros componentes, elementos, entonces, por ejemplo, ya sé que aquí tengo que dejar un padding de 92, cocillas como esas, y hay un sinfín de comandos para revisar cosas, pero hoy vamos a mantenerlo como aquí, ok, ya Crisia me dijo, está listo, está probado, y bueno, empecemos a hacer el work, voy a abrir por aquí la herramienta, iniciar mi sitio y contarles que hoy vamos a ver elementos para quienes no lo conocen, vamos a hacer un pequeño tour por la página de Elementor, el Elementor si, es un constructor de Dracandro, hoy los tiene al rastra suelta, los espacios y vas llenando, aquí como en el vídeo de ellos, pues vas viendo en el momento que va pasando, tiene ya bastante estable, muchas de las funcionalidades, entonces que ese es, y para algunos estos nuevo y les da, no sé, siempre está ese incertidumbre, es bastante estable, es un problema, y nada, Widgets soporta cualquier cantidad de Widgets, porque tienen los básicos de WordPress, digamos, los que vienen en Wittenberg, vienen en Elementor gratuito, y ven acá todo bien, tiene Pro, que acá hay muchas veces que instalamos un plugin para hacerlo, entonces en el Pro Elementor los va integrando, que listos de posts, tablas de precios, que si comenzó, esto es también de BuCommerce, hoy vamos a quedarnos hasta aquí, que son las partes de el tema, que cualquier parte del post, podemos también tenerlo en FormatWidget, entonces vamos a explicar eso con buen detalle, para BuCommerce, tenemos como una semana más, told this, es bastante grande, facilita muchas cosas, y si esto puede llegar a ser un poco brumador, a la hora de iniciar, son muchas cosas, ahí también otros plugins que se integran con los Elementor, y si WordPress no es solo para nosotros desarrolladores, es para todos, y ustedes no se van a sentar unas 15 horas a tratar de lograr hacer algo, entonces es un manejo de las herramientas, y ya resolves con un plugin, y a veces algunos son de pago, hay otros que son gratis, hay unos por ahí que son gratis, y ya ustedes se pueden enfocar en desarrollar el SEO, y todas las otras cosas, cuantas buenas es que Elementor se está utilizando constantemente, no solo el hecho de mantenerse el día con WordPress, y no incluyendo por ejemplo ahora hay unas habilidades de inteligencia artificial por ahí, los containers ya no se quedó solo en lo que era pilas y columnas, al estilo de tablas, que era html3, y por ahí, sino que día avanzado a grid, a flex, ahora vamos a ver un poco esto también, los loops, muchos de esos antes necesitábamos instalar un plugin para poder hacer un cargo sale, para poder hacer cosas más costum, ellos nos van incluyendo, entonces son de las cosas buenas que tienen, si no los han hablado así como pinceladas, hay un montón de otras cosas más, ellos tienen esa página en Elementor, se llama Elementor Academy, esta sección viene en blogs, viene en vídeos, la información está en inglés, pero está, los videos pueden verlos con subtítulos despacito, no hay por qué correr, dentro de las características también se integra con otras herramientas que posiblemente, o ya tienen ustedes en su sitio o van a requerir o pueden ofrecer, entonces ven que bastante gusto, ok, es un montón de información, Elementor sí, es una pincelada lo que vamos a ver hoy, cualquier otro apoyo, hay un grupo en español, Elementor tiene acá, entre la parte de community en su sitio, este grupos, hay uno de Facebook, que es Elementor Global, pero te piden que toda la comunicación sea en inglés, porque el ser global es para que la mayoría de gente pueda leer la información, este Elementor Oficial en español, este lo dirige Ángel, por ahí lo haga a ver, él siempre va a estar bastante atento y gestionando todo, como no, el lidera, toda esta parte de educación de Elementor, y hay Miraps que están pasando, bueno, pero está el anuncio desde hoy, preguntas, Miraps que están pasando, tal vez en España, que también es en español, y aquí en lo que es Latinoamérica, entonces cualquier duda, también pueden compartirla, hay algunos que son presenciales, otros que son habituales como este, así que ahí tienen herramientas y todo, ok, vamos a ver, todo muy bonito, vamos a irnos ahora sí al Work. Tengo aquí este Workless en blanco y más. ¿Cómo empezamos con Elementor? Elementor es un plugin que yo voy a ir a buscar e instalar, como les decía, tiene un plugin gratuito, ustedes pueden instalarlo, empezar a trabajar con él, vamos a conocer primero la parte gratuita y después vamos a hacer ahí como él les va a tirar, yo no sé si ustedes se acuerdan de antes existía estos helpers of widgets en Windows, es algo así, estas son las ventanitas parecidas, las de Next, Next, Next, Install, algo así muy parecido a esto mismo, pueden crear una cuenta, pueden darle a Steve, vamos a ir como viendo un tipo de ensignita que está la parte de la cuenta, Hello Team es un tema de Elementor que les da el sitio en totalmente en blanco para que ustedes hagan todo lo que hay que necesitar, nombre del sitio, el logo del sitio y manos a la O, este, voy a escribirle la cuenta para ahora que vemos la parte del Pro, vamos a decirle que vamos a continuar con el tema de Elementor, el que es el de Power, este es un sitio que lo tenemos para todos los Mirabs, entonces vamos a escribir con el nombre de Mirabs, el logo, si ya tengo un logo por aquí, este va a ser el logo, ah, esto es importante, hay que habilitar y darle permiso al WordPress antes si ustedes quieren subir un SVG, así que vamos con este, como les digo, lección de seguridad de WordPress, muchas veces los SVG, por bien, entienden que es un SVG, es por ejemplo estas imágenes que son vectoriales, pueden estar llenas como de código, esto puede traer algún conveniente, puede verse como, este, inyección de código por medio, inyección de código por medio que es, esto es el SVG, su vector, entonces está creado a partir de un montón de puntitos y características, digamos, esto es como un ccd de vector, el estilo, digamos que alguien bien malvado puede llegar aquí y en vez de sepa puede, este, o en medio, inyectar algo de código, algo de código que es que se vaya y consulte un archivo que le habla base, algo así, o que de algún error, en el cantidad de problemas pueden venir por ahí, por eso es que este WordPress no va a dejar, va a decir como, eh, estás metiendo algo vulnerable, no los deja de buenas a primera, entonces, vamos ahorita nada más, como, bajar aquí, y ahora les enseño cómo habilitar lo del SVG, pero para no salirnos de este, de este hilo de información, más allá de él le anuncio de que esto se da, esta esvertencia por algo de seguridad. Hay templates, sí, hay templates gratuitos, también, limitados, pero existen, con el Pro les va a dar una cantidad infinita de templates, si ustedes están con la parte de diseño e implementación, yo les recomiendo, porque pueden inspirar un montón, pueden editarles a gusto, o más adelante, vamos a ver un poquito, y si ustedes dicen, no, yo de ahí, yo tengo una crisis en mi vida que me da los diseños, entonces vamos a decir, no, y esas, este, más que todo van, sienten los diferencias, esto se puede haber reflejado también, a veces, que hacemos prilas, tenemos a un cliente que necesita un sitio, pues más el presupuesto no da para un diseñador y pagar el implementación, y estoy mencionando a un compañero trabajo, esta semana, un buen hijo, suele ser como una asistencia para que mucha gente inicie sus sitios, entonces, le meto a hacer Dracandrog, uno de los recuerdos como aquel, esto es importante, va a salir este anuncio, si ustedes tienen problemas de memoria o de caché, de que no está limpio algo, entonces, yo aquí no he limpiado caché, nada, no he hecho nada, no he puesto nada en el teclado, pueden, esto, habilitar el modo seguro, que significa esto, esto lo va a dejar ver qué era lo que estaban ustedes trabajando, qué es lo que están ustedes, porque esto es como una versión anterior al error, ahorita como no hemos hecho nada, pues no se va a dar, si ustedes siguen experimentando errores, tienen intuición, esto que es algo bueno de elementos y que naciera como el alma nuevo, es que tienen mucha documentación, es por el que me dice que, a ver, no, pues tiene que, vaya a loferir, tiene documentación, me dice que tengo que deducar, ya eres como revisar, cualquier palabra, chiquillos, chiquillas, presentes, llamados o patriotas, que yo diga en algo muy técnico o algo, y les entiendan, me los escriben en el chat, yo aquí tengo un ojo en el chat y lo estoy escribiendo, así, pero entonces decía, está bastante documentado, y como NASA de la mano, de Warpre, también, este, hay mucha gente resolviendo esto, yo voy a desactivar en este momento y refrescar, muchas veces, a ver, puede pasarles esto por cosas simples, por cosas que ustedes no entienden, entonces, pues, toda esa ayuda viene muy bien, vamos a ver, aquí dice que recientemente, dedite algo con elementos, esto es un sitio local, entonces, no tiene ningún manejador de caché, y su hosting de confianza, le da un manejador de caché, les recomiendo que lo bussin, y si no, hay algunos plugins, son muy buenos, que les puede ayudar a limpiar caché, casi siempre el hosting tiene su limpio de caché, en este momento yo voy a hacerlo manual, ya que estoy desde un local, ya ya llegó a un comando, y limpia caché, y es de ok, vemos que ya aquí está elemento funcionando, están vivos a todo color, ok, yo puedo aplicar elemento, landing page, casi siempre va a ser de seguro, post y páginas, post, digamos que yo podría sabilitarlo, o podría tenerlo iletado, tengo como esta opción por jugar, si yo en el tema vengo y especialista, colores o fuentes, puedo perfectamente habilitar a ver, es esta opción, es el elemento del tema o no, bueno, vamos a hacer algo, voy a pasar, tal vez, el sitio español, perdón, no había notado que estaba en inglés, voy a hacer lo siguiente, venimos a español, yo uso el español neuronal, porque a veces a la pica no todo se tiene bien, integraciones de inmediato, no hay gratuita, la integración que hay es con Google Maps, con el prompta, tener cuertidades de otras integraciones, tiene opciones avanzadas que igual se van a ampliar, en la parte pro, con estas, lo ideal es las recomendadas que vienen, son las ideales para mantener un buen rendimiento, ok, aquí están, pero que les decían los tipos de archivo, vamos a darle permiso para que suba en cvg, esto es filterlites, es esta parte por aquí, los Google Fonts, los podemos manejar totalmente, podemos sumir también nuestros fonts si tenemos el, se llama el pro, y otras cositas por aquí, esto es importante y vamos a activarlo después de que veamos un primer ejemplo, también tenemos este grid y a la parte de flex, que son todas estas opciones, aquí lo dice, son los experimentos que están en este momento, son en el roadmap, digamos que no es lo que está súper estable, y lo que está súper estable está acá, que es parte de lo de performance, elemento ahora mejorado, creo que en su inicio se le acusó de ser un poco lento en la parte de performance, pero es algo que le han puesto bastante cuidado, y hay bastantes, cosas que ellos han tomado en cuenta, desde cargar el ccs de la accesibilidad, el DOM, cómo les explico esto, el DOM es el arbolito del contenido del sitio, si yo esto que voy a abrir yo aquí es el inspector, eso que tengo por aquí es el HTML de fit, esto sale en cualquier sitio, yo voy a tener este, esto se llama HTML, el DOM tiene el HTML en forma digamos de un arbolito de jerarquías, que parece mucho también cuando nosotros usamos en carpetas, que vamos a las jerarquías, como cuando las usábamos en Figma, todos esos arbolitos y es, vamos a ver, y la manera de procesar toda esta información, nosotros en web, vamos a tener en esta sección de head, todos los scripts, lo que llama el código que da la funcionalidad, el HTML es la estructura, y el CSS es el espirio, entonces todo esto es parte del DOM, sí, ya el elemento se metió a manipular la optimización del DOM, para que no hayan problemas de rendimiento, entonces son cosas que están por ahí, ok, vamos a ver, vamos a irnos y decir que voy a hacer una página, una página nueva, por defecto, voy a tener siempre el editor de Gutenberg, el título y aquí yo empiezo por bloques, cuando yo activo elemento, yo no puedo volver a Gutenberg, pero si yo tengo algo hecho en Gutenberg, yo puedo llevarlo al enlace, ok, eso es importante, y aquí ahora sí, entramos a la parte del área de trabajo en elemento, una página web puede ser vista o estructurada como una tabla de Excel, piénselo así, donde esto es una fila, esto es una fila, esto es una fila, pero puede que estas paladas estén en la misma columna y esta fila tenga columnas agrupadas en Instagram, entonces el editor por defecto de Worklist, que se llama Gutenberg, así le respondemos asesinados a preguntas, ese Gutenberg es el que tiene los bloques, la edición por bloques, y vamos a ver qué pasó ahí, alguien no limpa el cachet bien chiquitos, ok, ahora lo decía, vamos a ver lo que tal vez, el Gutenberg es el editor por bloques, entonces yo aquí voy a tener un bloque para par, un bloque encabezado, un bloque clave, un parajodo de cita, bien esto se ve ya un poco más como los widgets de elemento, entonces aquí perfectamente podemos escribir y esto digamos que es como muy parecido a lo que hacemos en Word o en Google, documents, qué otro editor de texto hay, bueno los de Open Office, los en Powerpoint hasta cierto punto, así que es como todo este manejo de texto se puede dar, se pueden hacer listas, pueden tener que quotes y todo, y una vez que nosotros nos vamos a lo que es Elementor, vamos a tener la particularidad de que vamos a ver cómo se ve en el tema del sitio de una vez, vamos a sacar por aquí nuestro backup mágico, y bueno ahorita momento creo que por un ratito más vamos a tener este anuncio siempre que hablamos con una página para crear una página nueva de Elementor y hasta que ustedes lo leen y lo comprendan y estar como todo el apoyo va a venir a resolver esto, es de cómo se está integrando la inteligencia artificial, pues podemos hacer más de eso, y vamos a tener un área de trabajo que se va a ver de esta manera, aquí a la izquierda vamos a tener todos los widgets, ese activo aquí en la navegadora que yo lo puedo hablar, lo puedo pasear por la página, y lo cierro de donde sale aquí abajo a la izquierda, vamos a tener los ajustes de esta página, esta página vamos a decirle que es ejemplo del míra por el título, el estado borrador sí, porque estamos ahorita en ello, extracto, esta página sirvió de ejemplo, imagen destacada, puedo ponerla, esconder el título, puedo dejarlo o puedo esconderlo, vamos a ver por qué, y la estructura de la página por defecto o por el tema, yo como les comenté, pusimos el tema que nos da todo en blanco, ahí no tenemos ayuda nada, pues siempre vamos a tener, estos son los ajustes de la página, entonces vamos a tener los ajustes de lo que estamos trabajando, el estilo y ya es más avanzado pues características bastante de estructura, algunas de animación, aquí estamos con la página, es el siguiente botón a la parte de ajustes aquí abajo a la izquierda, voy a tratar de hacer esto como un poquito más chiquito para que se note en el centro de esto de aquí, es su botoncito de aquí abajo, el navegador es este que nos, que se abren, que yo bailo por toda la, yo suelo tenerlo casi siempre a esta la, se me hace muy práctico, pero ustedes pueden perfectamente dejarlo por aquí flotando, acomodarlo donde ustedes les hagan mejor, esto también hay una manera de ser inter, intercambiar la posición del navegador y del editor, si ustedes son surtos, a veces es como que les queda más fácil que estén todo, aquí a la, a la derecha y tener el navegador a la izquierda, porque el navegado es el que me agar el arbolito de todos los componentes que lo estoy usando, todo el uso. Esta herramienta, la siguiente, el historial que tiene elementos es para controlar las versiones desde el lado de programación, nosotros hacemos versiones, recuerden aquella estaría el de, que uno hacía o cuando estaba uno haciendo los reportes del trabajo de versión bueno versión final, versión de la reunión del martes a mediano día, versión de la reunión del martes a las cinco a la tarde, versión definitiva del entrega del cierre de mes, aquí vamos teniendo el registro, primero por acciones, en quien yo fui y les que le cambié el título, le puse un extracto o un excerpt, le edité el que escondiera el título de la entrada, y tenemos después lo que son revisiones, como yo no publicaba la página el en revisiones lo que me guarda es cada vez que yo le doy publicar o actualizar a toda la página, entonces es como un historial global de la página en acciones de cada cosita que yo vaya modificando, entonces por ejemplo dice más bien, les toca al revés que les dan ya un elemento y editele cosas y chiquitos tranquilos, aquí por aquí mis chicks tienen el respaldo, no me entreguen pánico, siempre se puede volver a una revisión anterior, a una acción anterior, nada más le dan clic, ahí está el relojito y van regresando, por ejemplo este cuando se pasa mucho cuando están haciendo los ajustes de responso, vamos a, hay dos diferencias entre lo que es hacer las versiones para tablet, escritorio y la parte de celular, vamos a tener cosas que son un responso que se van a ir acomodando y hay otras que son adaptativas y nosotros podemos modificar totalmente, el mentor nos permite tener internamente estas vistas mientras estamos trabajando, entonces las activamos aquí abajo, aparte publicar por ahí está ese modo adaptable y nos deja ver si nos mandan a pedir para algún dispositivo en específico nosotros le podemos poner el valor y él nos va a dar las advertencias de si lo que usted está haciendo tiene sentido o no, entonces también es un feedback que uno puede volver y también uno puede gestionar tener más puntos de ruptura, se llama en español breakpoints, le dice en inglés, entonces para ajustar tal vez yo quiero ponerle un diseño específico en escritorio, pero si es de estas pantallas que ahora usamos que son las que son anchísimas, porque tienen alguna distribución específica que puede poner, esto de que no sirvo, resulta que nosotros vamos a tener por ejemplo una sección, ven como aquí automáticamente yo la han le y ella empezó a existir en el elemento, que es esto, eso llama un contenedor, vamos a verlo en el diseño de Cristia, un contenedor, que es un contenedor, es la caja donde yo voy echando poco a poco cada una de las los widgets o las partecitas que vamos a tener los textos entonces un contenedor es este aquí arriba, otro contenedor el del slide, entonces esto se nos va a hacer muy de mejante a los componentes de Cristia no se, entonces hay dos cosas bastante interesantes con elementos, nosotros podemos tener nuestros contenedores y crear nuestros componentes, eso yo quiero que tenga un título y quiero que tenga un texto y después de ese texto quiero que también tenga pues un vídeo, una descripción y a no, pero es que yo a la parte del vídeo quería poner un texto de quién está hablando en el vídeo, no hay problema, yo puedo poner un contenedor, en ese contenedor voy a decirle que internamente va a tener todos los contenedores, ¿qué significa esto? Como pueden ver cada vez que yo agrego un contenedor y aparece un más, esto voy a quitar por aquí, olvida, esto quiere es decir que estos son como mis filas y este contenedor de acá es mi columna, voy a ponerles colores acá en el estilo, vengo, hay un seleccionador contenedor, le doy que va a tener un fondo normal, puede ser de gradado, puede ponerle un vídeo, puede ponerle líneas positivas, lo ideal es que lo mantenga entre clásico de gradado para cuestión de excesividad, si se pone un vídeo hay que tener el cuidado de que se lea lo que vaya a poner uno sobre, lo que le preguntemos que esto es el fondo y cuál color así va, colores voy a ponerle un momento extra que tenía a veces, vamos a ponerlo en negro para que ustedes vean por acá la diferencia con estos de acá, estos dos hay otra ventaja con elementos, eso que estoy yo los selecciono y le doy de suprimir, de lip, de lete, gusta decirle a la tecla y lo quito, si yo, uy no, nada ese, control Z y aparece, o decimos no, no, sí, porque yo lo que quiero es que ustedes vean las dos columnas, perdón, las dos filas en la columna, entonces yo le voy a duplicar, entonces ahí le doy control D y me lo duplico, los contenedores en este momento yo los tengo activados con flex, qué es flex, qué es esto de contenedores, me acuerdo que yo les decía que básicamente funcionaba el mentor también con esto, como las tablas, las con filas y columnas, ahora se tiene la opción de trabajar con flex, flex esto, por aquí es una guía rápida, le damos flex en un minuto, flex es el contenedor y el cómo vamos a organizar lo que está adentro del contenedor, lo que está adentro suele ser el ítem, sí, casi que comienza la palabra que vamos a verlo en todo lugar reflejado y contenedor pues es la cajita donde vamos a poner, vamos a tener dirección, vamos a poder hacer crecer objetos, el grab, imagínense cuando uno está comiendo, si el grab se enrolla o no se enrolla, entonces el que es la diferencia entre el grab y el burrito, el burrito le tapa arriba y abajo y el grab nada más enrolla, entonces ahora vamos a ver esto nada más enracha, esto qué significa esto ya lo vamos a ver ilustrado, también podemos manejar en la distribución de los ítems de los objetos en términos de los widgets internos, podemos un solo elemento alinearlo, el solito, el self significa como mismo, el mismo y alín es alinear, entonces todos estos que eran instrucciones de códigos CSS ya ahora el elemento las tiene integradas, entonces por ejemplo aquí en este contenedor voy a ponerle que este es el contenedor, este es el verde, entonces yo aquí con doble click tengo aquí o le digo contenedor verde, contenedor, disculpame la parte de ortografía, este el grande este yo le voy a decir aquí en disposición vamos a tener caja o ancho completo, entonces cuáles son las características entre caja y ancho completo, caja es que el se vea agrupado al centro, ancho completo es que se va a estirar todo lo que se estire en la página, entonces cuál es la diferencia, vamos a, otra característica de elemento es poder previsualizar los cambios, podemoslo aquí, en caja él se queda en esta cajita centrada porque yo estoy en una pantalla muy ancha, yo voy reduciendo y él se va acomodando y yo le digo que no, usted va a irse ancho completo aquí el ancho dice 100% pero sí ahora usted va a hacer esto, vamos a ver aquí es publicar, perdón no tiene que publicar, este va a actualizar aquí, él va a ocupar el ancho completo de, ven que está como desde donde inicia el lado hasta aquí, ¿qué pasa con este? Él está respondiendo a este contenedor de más arriba, ven que en esta sección a tenemos todo esto, entonces no se nos va a hacer ningún disparate, ¿qué pasa si nosotros decimos no a este muchacho y yo quiero ver eso ahí, copy o pego y lo tengo ya aquí afuera de este otro contenedor, este es el ejemplo, vamos a tener siempre dos anchos, el de, el área de trago, el área de trabajo, no perdón, de despliegue de la información y el ancho completo de la pantalla, entonces ven que hay incluso como un margencito, vamos a quitar tal vez esto que está casi que el mismo color, ven, ahí hay un pequeño camera, entonces todas estas son cosas, detalles que nosotros siempre tenemos que revisar en el diseño y vamos a ver, ok, esta barra negra, entonces ven que están a todo lo ancho en la barra negra, pero el texto no está desde el inglés, se está aquí centrado, eso es un poco algo de los anchos y las cajas y esto es parte de la configuración de la estructura y eso lo vemos en la disposición de los contenedores. Ahora bien, quiero que noten que acá este ancho tiene la parte como una computadora, este dibujado es una computadora escritoria, acá es escritorio, yo hacer pues mouse. Si yo cambio a tableta, yo ve a ver inmediatamente cómo se ve en tableta eso. Yo tengo la particularidad en elementos que si yo necesito esto es posible, no, yo quiero que el ancho sea a un 50% cuando yo lo veo en la tableta, yo lo puedo aceptar, entonces todas las características que tengan el teléfono o la tableta, el teléfono se va a ver con un poquito más angostito o cuando lo ven que se hace aquí en teléfono se va a ver, esto lo va a guardar. El default, la norma va a ser el de escritorio, yo puedo ir modificando hacia abajo las de las medidas hacia tableta y celular cómo se van viendo las cosas y eso es una pizca. Vamos a ver esta parte de los elementos, lo que tenemos contenido, voy a borrar este que he duplicado por acá, entonces en este componente ven que dice dirección, yo puedo decirle que sea fila cada una de las cosas que yo voy a ir metiendo en esta cajita, me los va a acumular una a la parte de la otra como si esta caja fuera una, estuvieran haciendo fila, imagínense en que esto la ven tan parada, aquí estamos 1, 2 y la persona 3 haciendo fila, yo digo no, yo quiero que se vea como si todo estuviera en la misma columna, entonces digo que disposición de la dirección para verificar, todo hacia abajo, esto fue aquí invertido, que nos puede servir esto, tal vez para lo mobile, verdad, entonces digo no, yo quiero que en este escritorio se vea el despliegue de esta manera, pero aquí yo quería meter un vídeo y un texto, entonces hay, ok yo voy editando esto y también puedo ir poniendo dinamé el vídeo y yo quiero un texto, ven que queda automáticamente también el texto, te va llenando, esto de aquí se llama lorimipsum, te usa mucho, pero uno ve el ejemplo, como van quedando las cosas, eso después lo pueden googlear, es como un texto autogenerado en latín y ya se uuuu, muchos años y se empezó a ver y ya empezó como a hacerse porque las personas no tenían el contenido listo para el momento en el que van a ser el sitio, o si me hicieron tan siquiera el diseño, entonces pues con esto yo no puede ir bien, ok, ven que ya aquí está, esto hacia abajo, esto es esta manera, pero queríamos ver si, bueno, todo esto aquí si tiene sentido, y en a tablet, bueno, él se acomoda un poquito, pero tal vez a mi de una tablet, si, no se me hace tanta diferencia, el celular, ya y si, se va a hacer mucha diferencia, que pasa si en lugar de tener esto doble, nada más queríamos tener ahí como un vídeo y tal vez pierdas que en el celular la gente mentira que va a leer, se va a ir directamente a ver el vídeo, entonces yo vengo aquí y le digo que la distribución de este en el celular va a ser una columna invertida, entonces más bien me voy a tirar aquí el vídeo, aquí la descripción de lo que está pasando y último el vídeo, esto es un montón de clicks rápidos y yo estoy dándoles para que quedan como todas las posibilidades de lo que podemos ir implementando, entonces después podemos, si quieren hacer otros miras, después si quieren revisan el vídeo va a quedar en el YouTube, en el canal de la comunidad, y siempre están los grupos y estamos en la comunidad de atentos, pueden incluso escribir preguntas en la página del mira.com, los dejo ahí como comercial, sobre este sobre lo que te voy, si tienen algo, ahí es que yo puedo revisar, volviendo aquí de ese comercial, yo el contenido tengo que dice justificado, vamos a ver esto de justificar el contenido con el ejemplo del Peres que nos mandó a hacer, que dice que es una fila anchísima, entonces a ancho completo va a ir eso, voy a hacer un poquito más, tiene aquí la imagen para tener una área de trabajo más grande, yo le voy a decir que bueno el fondo era negro, ¿qué pasa aquí? Yo vengo y tengo colores, estos globales, igual tengo aquí todo un caballo, puedo poner el hexadecimal, el RGBA, es el que tiene el alfa, este alfa es el que lo hace y que tan compajo va a ser, tengo este otro que cada sí que no lo usan, que tengo por ahí como uno los porcentajes de posibilización, pantallas, todo super profesionalizado, está capaz. Puedo crear un nuevo color global, ya vamos a ver globales, etiquetas, dinámicas, esto es por si tenemos estos aspectos, algún componente y si yo no sé pero me ocupo, ahí lo tengo, tal vez en una imagen, ahí tengo esa ramejita, es como un puntagote. Vamos a ver, dentro de elemento yo tengo los ajustes del sitio, estos ajustes son el diseño del sistema, sistema de diseño, por ahí yo ya he hablado pero básicamente, perdón, los clicks por tu lado, básicamente lo mismo, son las cosas globales. Una cosa vamos a hacer por aquí, vamos a partir de la pantalla, de cosillas y vengo por aquí, ok, dice que colores, lo puedo venir por aquí, donde tengo el diseño, qué colores voy a usar, ok, tenemos el de la fuente, que es esto, que tiene por aquí, entonces en el texto yo puedo venir y modificarlo, copy, paste y el se guardó. Segundario, tenemos un segundo secundario, no, me parece que no, tal vez puede ser el blanco, entonces vamos a ponerlo ahí en blanco, el principal es este naranja, el que se utilice por acá, perdón, me indica, entonces hablo de principal, me quedan algo chiste, énfasis, es muy diferente porque es uno que hizo crisis, acuerda donde tiene los botones, que es cuando ponemos el cursor, cuando hacemos alguna interacción, entonces ese colorcito, por aquí hay en, que vamos a usar para cuando interactuamos con las últimas cosas, yo puedo, por aquí tengo un background, el color era el background de esta página era blanco, entonces perfectamente, ok, el background ahora, representante puedo agregar otro más, puedo mantener ese, y decir el background blanco, algunas veces yo lo que hago es nombrar a cada vez el background del landing, porque vamos a diferenciar los colores del landing con algo interno, para mostrar un poco qué archías, a veces no le puedo blanco, y no son blancos exactos, son como el colorcito que es casi blanco, pero blanco, como este de blanco y champán blanco, bueno, son blancos, todos estos que queríamos, entonces vamos, en las configuraciones y en los ajustes del site, una parte que guarde elementos, yo puedo agregar todos mis colores, todos los colores, y esto es nada más los utilizo, igualmente, lo puedo hacer con las fuentes, entonces puedes ir cuáles es la fuente principal, la s de los ciclos, dice que yo me vengo aquí en texto, esto es como se llama plus, vamos a ver si podemos decir, plus, factarta, sans, y aquí está, ven que él una vez nos avisa que esto es un font de Google, entonces está acá, yo los elecciono, y listo, no más, me dice que este título está aquí en peso medio, pues vengo en peso, en peso yo tengo los números, para quienes ya un poquito más se manejan por los números, igual tengo entre paréntesis, el como, el nombre, como en ley, transformación, que si mayúsculas en minúsculas, todas las iniciales se manejan de escuelas, o normal, el defecto es por normal, pues dejamos ahí, estilo, yo puedo decir si es negra, normal exclusiva, o única, decoración, si quieres que estés subrayado, tachado, o sino, entonces ven aquí también estas partes, que es la tipografía, se nos va a aparecer un poquito a las de los editoros de texto, Google, Google, Office, Open, esto que tenemos, el formato del texto, son características que tiene el elemento del código, una vez estén por ahí, la altura de línea, que es como, es esta parte de aquí, en el Figma, esta parte donde está moviendo el cursor, una parte de texto viene aquí también, y este, bueno decía que el tamaño son 48 píxeles, qué pasa que tal vez para una tableta es demasiado, entonces vamos a bajarle a 32 píxeles, pero para un celular de los píxeles es muy bueno, entonces vamos a bajarle a 24, yo puedo hacer estas modificaciones rápidamente, estos son cosas globales, como lo decimos, también puedo añadir estilos globales, si necesito, y el siempre me va a avisar que yo voy a borrar algo global, que tengan cuenta de que se va a estar usando en otras partes, hay que en algún lugar se puede estar usando y yo lo estoy borrando, y la fuente siempre es bueno tener una de las, este, que son el listado de web, muchas veces es area, times, fans, entonces bueno, yo ponen todo esto en los ajustes del sitio, atendimos por el conito de hamburguesa que está acá, son los globales, la tipografía tiene, ok, para el cuerpo de los textos, qué color vamos a usar en el texto, este, ok, empezamos, estos textos son DM Sans, entonces aquí DM Sans, aquí está, está para 24 en regular, regular o normal, tienen como el mismo nombre, transformaciones, espaciados, todo esto, espaciado de párrafos, esto es súper importante, es algo muy pequeño, vamos a usar una pausa aquí, después de cada párrafo para que haya una buena lectura del texto, se recomienda que haya mínimo unos 16 pixels, qué es esto, después del párrafo, es digamos si tenemos este ejemplo, no lo tenemos por aquí, vamos a ver, vamos a ver, todo esto son párrafos, vamos a tener mucha información, ven que hay como, no es un entero, pero hay como un espacio entre esta línea y la otra, ahí eso es el espaciado de párrafo, eso ayuda para el hilo y esto no es un entre, un salto de línea que se tiene que quedar dando acá, eso por defecto lo deja, entonces eso nos va a ayudar, aquí no tenemos que cada vez pues, cada vez que damos punto, hay que dar un entre para que haya estos espacios y que si modificamos el tamaño de la letra, se nos va a hacer esto gigante y va a ser muy grandísimo, o si lo hacemos pequeño va a ser súper pequeñito, nos puede quedar todo muy pegado, esto es importante porque ustedes lo definen aquí, el espaciado de párrafo y va a afectar todos los haches, los cuerpos y los links, los links en html, si, tienen un pollito que es con una a que son más amplias, por ahí, entonces esto se va a afectar, esto se va a afectar y todo lo que sea, aquí son las famosas haches, que son aquí a 1, 2, 3, 4, 5 y 6, eso es muy importante, a nivel visual vamos a poder editar cada uno de ellos en el elemento, esto es súper importante que se respete, a nivel visual ayuda un montón para la lectura, organiza la información, pero para el SEO es elemental y para excesibilidad ni que se le diga, entonces una buena recomendación es cuando empezamos la primera página que vayamos a hacer en elemento, venir aquí al menú de hamburguesa, ajustes del sitio y venir a cada uno de ellos y darnos el tiempo de sepearlo, esto es global, es necesario y nos va a gilizar un montón de tiempos, pues tenemos botones, las imágenes que arriba ponen este porcentaje, todo esto va a estandarizar de una vez, cada una de estas opciones también podemos, hay una vía, no es que no las recomiende, pero temen que tener mucho cuidado, vamos a hacer el ejemplo con un botón, ahí la posibilidad de hacer clic derecho a cualquiera de los elementos, a cualquiera de los componentes y de los widgets en elemento y muchos nos tira aquí un menú editar el contenedor, duplicar, hay un nuevo en el lado del botón, editar botón, duplicar, copiar, pegar, yo le puedo dar copiar y a otro botón, vamos a hacer lo aquí así, dos por tres, yo le puedo darle copiar y aquí pegar solo el estilo, entonces ya no tuve que ir paso a paso revisar que le había hecho el otro botón, aquí está, pegar desde otro sitio, es si ustedes tuvieran otra página abierta donde ya tienen el botón, entonces pueden darle copiar y puedan darle pegar aquí, establecer estilo, aquí hace que todas las modificaciones que ustedes hayan hecho, él va a ir a cambiar, el detalle con establecer estilo es que hay que tener un estilo global ya definido, porque si no, él no va a entender que es, este no establece el estilo, él se va a ir a la configuración del ajuste del sitio, al global y decir, bueno, cuál es el estilo al quimétodo que ajustaron, entonces aquí yo no tengo nada, entonces él dice, no, no hay nada configurado, entonces no sé a dónde tengo yo que devolver, guardar como global y salvar como default son dos cosas muy diferentes, todavía hay que tener cuidado, guardar como global significa que en todo el sitio va a ser exactamente cualquier botón igual a este, en estilo, en contenido, en enlace, ese es el cuidado que hay que tener y guardar como default, es el que yo, por ejemplo, puedo venir y decir como, bueno, aquí dice a mi hijo que los botones que son eso de aquí, vamos a acercarlos para verlo, van a tener un redondado, como sé cuántos el valor del redondado aquí, esta parte del equipo se llama frame management, me dice 25, entonces yo vengo aquí al botón y digo que 25, el redondado, el color del fondo va a ser el anaranjado principal, al pasar el cursor yo voy a decirle que el fondo va a cambiar al otro anaranjado que tenemos que es más clarito y aquí inmediatamente yo voy viendo los botones que voy haciendo, vamos a ver lo que aquí dice que el texto está en la fuente inter y medio del banco, inter si es un font, aquí voy a hacer una pequeña más escala dentro de lo que es diseño y desarrollo, se recomienda tener de tu esta más último tres fuentes, entonces también es como ajustarse a que todo sea legible, pero tampoco nos demasuremos metiendo un montón de fuentes, porque se suele usar una fuente en botón que no siempre es la del título o no tiene la del texto, haces la del texto y no sé bien o no están recomendadas, pero ya hoy día la mayoría de las fuentes se ve bien en botones en texto, lo que pasa es que las que desecigen para título, muchas veces no se ven bien en un botón, no se ven bien no tanto de lados técnicos, sino de legibilidad, ok, ya ahí tenemos entonces que se cambia de color, y esto es así, vamos a ver dice tipo de borde, ahorita no tenemos borde, pero si yo quisiera ponerle un borde, tengo la opción de que continúe, doble puñado, este puñado, acá al lado, todos esos están aquí, sombras, si se necesitarán, casi que no, relleno, esto es una parte importante, relleno que es, relleno es el espacio, voy a quitárselo aquí en este momento, es el espacio que hay, ah, quiero que notaran otra cosa, yo me estoy de nuevo ahí y yo puedo sentir también diferente, como se va a ver el botón en tablet y en mobile, el borde ven que tienen aquí el icono de responsive, yo puedo cambiarlo aquí, voy a hacerlo este con valores de 50, de que se ve bastante redondito, 5, casi no se ve redondito y 25 es el que tenía, pero ya no ha estado por acá, va cambiando el botón, entonces el ejercicio que vamos viendo como queda y puedo ponerlo en cada uno de ellos, ¿qué pasa? si digo no, se va a ver igual en todos, entonces yo vengo igual del de teléfono y tablet y el que yo deje en escritorio es el que va a heredar hacia abajo, les decía, relleno es el espacio que hay entre el borde y el text, ahí está centrado, está bien, igual como podía verificar un pigma con alt y veo del 18 y 18, casi siempre los importantes llegan a ser el de arriba y el de abajo, entonces de aquí, aquí yo los pongo y ellos están, derecha y izquierda, vamos a ponerles en aquí el botón, ven que este viene, aquí ya puse el estilo, todos los botones son iguales, sí, todos los botones son iguales, se van a arrajar, tiene una plada ahorita por aquí en el centro, está centrado, no tiene iconos alrededor, entonces yo perfectamente puedo venir y decir, salve como de faul, entonces todos los botones se van a ver así, entonces eso que significa, la próxima vez que yo venga y ahora hace un botón, yo meto aquí la cajita, se va a ver exactamente igual, entonces me guardo por de faul, este de aquí, este se llama placeholder, es lo que hay aquí y modifico sobre el estilo, no quiere decir, ahí ven que yo aquí lo cambio y no se cambia, si esto fuera global se cambia automáticamente, de la derecha también, este vamos a ver, en el terrenos de la crisis era el de ingresar y registrar, entonces por aquí este se llama registrar, ven que tenemos el menú, este inicio destino sobre nosotros y contacto, hay una ventaja, nosotros podemos llamar el menú que ya está, en este momento esta página tiene ninguno de estos, entonces ven que dice no hay ninguno, vamos a la pantalla de menú, pedimos y el se alimenta del menú que nosotros hacemos, vamos a decirle que se va a llamar main por principal y él nos permite ver todas, entonces vemos que tenemos un inicio y una de mí, que se llama ejemplo miro, nos añadimos al menú y los guardamos, entonces eso es lo que va a después venir aquí, vamos a actualizar y ya él va a decir a bueno aquí entonces es el principal inicio de menú, ven que está gigante, ok, cada cuidad, cada componente tiene su contenido, estilo, la parte avanzada y ya es disposición, interacción, el borde, su fondos, máscaras, voy a ir aquí un poquito más rápido, simplemente para terminar el enero y ver si hay alguna vida, esto ya me he dicho que el color iba a ser el negro, este texo está por acá en color blanco, aquí estamos es blanco de meses, 16, podemos ponerlo aquí, toda esta parte pueden ir a ustedes, al pasar el cursor que quiero que haga, el color del texto, el color del el puntero es como lo que va a señalar que está activo, el que está activo se llama este, se le va a señalar dónde está usted, todo esto se puede modificar acá y después vamos a ver aquí como este el nombre del sitio, el logotipo del sitio o el título del sitio, eso es lo que va en el menú, ok, qué pasa aquí, voy a bajarle un momento, ven que todo está pegadito a la izquierda, esto en el contenedor ahí en la parte que yo decía, podemos distribuir, es el justificado, entonces vamos a ver el espacio intermedio, el automáticamente hace los cálculos del espacio que tiene que dar en el título y el otro botón, y ya lo ajuste, no hay que meter separado, el automáticamente, si esto es otro componente, él lo va a ajustar, si por ejemplo el search, este otro botón es algo como todo es maldiciable o quiere, ya ahí, él crea como, entonces vean que es una de las ventajas de que tenga el flex, no tiene que calcular ustedes, ustedes aquí le están diciendo espacio intermedio, pueden perfectamente espacio alrededor, es que le deja un espacio alrededor de cada elemento interno, esto es el contenedor, el contenedor vamos a decirle que va a ser general, espacio uniforme, eso significa que la misma cantidad de espacio que hay a la derecha va a ver a la izquierda en cada uno de los elementos, o igual podemos mandarlo toda a la izquierda, toda a la derecha, qué pasa, pero si yo quiero que esté y no me sirve con el intermedio, yo quiero que esté el menú a la parte del botón de registro y el título aquí, pero ni ninguna de esta opción me la dan, ahí es donde es importante conocer un poquito de la parte de avanzar, porque entonces vamos a decirle que en el contenedor todo va a estar hacia el final, para que la mayor cantidad de elementos van a la derecha, entonces al final en este momento es a la derecha y al título del sitio vamos a venir a avanzar, ven que cada widget que yo selecciono tiene sus características y le va a decir que va a crecer, entonces él va a llenar el espacio restante, si yo quiero ver cómo quedó esto un tabler aquí lo tengo, bueno esto es importante, el widget que trae por el defado un menú tiene un punto de ruptura, un breakpoint, entonces me dice en donde empiezo yo a ver lo que se llama el menú de hamburguesa, por aquí tengo los íconos y lo que les decía, también si yo quiero que no, que el menú se vea como un más lo tengo, siempre dependiendo de cada widget pueda tener el recomendado y después tengo todo el tabler ahí con esos diferentes estilos, en que es normal, los que son los dibujos bellenitos y tengo para acá los markers, este es lo mucho para cuando es el chat o el contacto, digamos si tal vez queremos ponerle como que ok, estamos hablando de una persona y por favor vea tu contacto en el link y ahí que tenemos que ir a ese ícono, toda la biblioteca está por ahí, todo esto es la configuración del menú, entonces vamos a ver algo que antes era un poco complicado de poder organizar estos elementos de mejora, quiero que noten que el título ahí está como el texto hacia arriba, entonces no vamos a manipular los márgenes, vamos a decir que lo sé, y voy a parar aquí, voy a dejarlo aquí y voy a dejar de compartir pantalla, es bastante lo que se puede hacer, ven que es la parte de plantillas, yo puedo guardar mis propias plantillas, tengo plantillas que ya puedo usar, lo ideal es que mis propias plantillas, mi recomendación, inician por estos que dicen white friends, esos de aquí quieren como en gris para que ustedes puedan personalizarlo y todo, hay unos que vienen por tema o como si veredaban de algún tema, son de la parte del pro, entonces hay que tener cuidado de que todo tenga concordancia en caso de que no tenga un tema, voy a dejar de compartir pantalla y ver qué preguntas hay en el chat y no las haya podido contestar en lo que iba en el día, están hablando sobre y posting, pero allá hay unas recomendaciones en el chat. Estoy por acá tengo uno que casquezaba pregunta qué es eso de Wotemberg. Ok, Wotemberg es el editor por defecto que trae WordPress, es un editor muy parecido al editor de text, WordPress como nace para hacer blog, pues mucho va a ir referenciado hacia cómo manejar text, está bien, no es que esté mal, no es que el mentor sea mejor, es que el mentor nos ayuda, aquí es muy fácil arrastrar y ver de una vez cómo van quedando las cosas, con Wotemberg nosotros vamos viendo la estructura pero no el dice, entonces esa es una de las diferencias, vamos a ver qué más hay por ahí, me parece que es muy apoyante tal vez pero en la primera sesión fue bastante larga, mi disculpa es extensa, pero hay mucho que pueden empezar a hacer y la mayoría de cosas como gratuito pueden empezar a hacerlas, la necesidad de hablar de una licencia, hay apoyo, ya vieron que hay un grupo de Facebook, un grupo de canales, incluso aquí en la comunidad de San José y pueden responder, dice por aquí todas que cuando se termina la página cómo se la pasan al cliente, yo edito de una vez en la página Elementor tiene la habilidad de que voy a la herramienta, yo puedo poner como el sitio web en un pudimiento y hago una plantilla y dice comienzo, ya que a veces salimos en vivo de todo color con el ingenuo nuevo y por trabajar, puedo trabajar, hay una opción de importar y exportar las páginas, entonces ustedes trabajan desarrollando el sitio, actualizándolo en una versión local o una versión staging, desarrollando con todo este proceso de software, pueden página, páginas decir como bueno esto ya está lista aprobado por el cliente y que pasa producción, en el momento que nosotros le vamos a publicar o actualizar ya queda la página lista, entonces una vez que listamos todas las páginas ya el sitio web puede ser publicado, el sitio web está arriba en la cajita y las páginas son todas las particitas que vamos teniendo, el contenido es todo lo que se alimenta así, entonces ya hay para pasar la página al cliente, hay sistemas, hay hosting, tal vez el hosting del cliente, ustedes tienen su hosting como desarrolladores, WordPressers y lo que hace es migrar, hay plugins como el only one que te encapsula todo en un archivo y pues lo es cargar, subís al otro lado, hay backups que se pueden hacer, entonces también con un sistema backups, alas la base datos, alas el contenido y lo subís a donde el cliente, lo bueno de elemento es que es una cosa que aquí ando una vez listas, entonces para el cliente ayuda mucho, hay una pregunta para Crisia que la hace Alan Fonseca, aquí das micrófono, hola, sinceramente no lo he utilizado porque la modalidad que utilizamos en el trabajo es nosotros planificamos el diseño Figma y ellos lo podían en otras en otros lugares, pero no lo he utilizado en el elemento, pero sí valdría la pena verlo, no tiene muchas gracias. A veces está el truquillo de que vos exportas todo o es en el estudio, exportar todo el CSS o el diseño de Figma lo es por allá, yo tampoco lo he usado mucho, así que es algo que podríamos explorar incluso en otra manera. Sí, de hecho eso es lo que hacemos ahora en el trabajo que exportamos, bueno ahí el Figma si da cierto código no es tan legal, digamos siempre hay que ponerle más código, pero el equipo de desarrollo ya lo hace en sus plataformas, de verdad depende de lo que se esté haciendo. Y por ahí, para responder la última pregunta que dice que si con Elementor se pueden crear bloques de Gutenberg por código, o sea se pueden crear bloques de código, que permite subir un bloque de HTML, a veces ocupamos meteri frames de alguna aplicación o algún mapa o algo así, se puede hacer, tendría a ser totalmente shortcuts, hay muchos servicios que ya ahora tienen, digamos cuando los plugins, los instalados vienen de una vez el componente para Elementor, perfectamente, pues se puede programar un poco más en los functions, en PHP, crear alguna función, algunas acciones, lo agregadas y agregadas por shortcut sin un problema y pues hay de desplegar, trae la parte para que vos agregues en la parte del tema de Hello, es como la base que ellos recomiendan, se puede usar algún otro tema, puede usar Ocean, podemos usar Astra, gran variante, pero Elementor en sí, trae su espacio para agregar JavaScript, CSS, PHP, que hacen las funciones propias y ahí puedes hacer como queries también y agregarlo. No sé si por ahí queda, no estoy tan la duda. Y creo que estamos con las preguntas, más bien, muchísimas gracias, se que son yo bastante, bastante, espero que hayan visto un poquito como de, y como que es toda esta configuración, por eso es que van a empezar a armar Astra, y empezar a armar con los plugins Elementor, pero hay un montón de pequeñas instrucciones alrededor, entonces para que se vayan dando una vista de qué es entonces herramientas todas las palabras que hay alrededor del área de trabajo donde ya están los los componentes. Y la mejor recomendación que les puedo dar es instalarlo gratuito y empezar a travesar, empezar a formarlo, vieron que los estilos después de todo fue como manipularse bastante aquí y van viendo en resultado pueden ir construyendo prácticamente que todo. Y el comienzo cierro en la noche, creo que ya ha sido suficiente una primer clase, me están interesados en más en los comentarios en el miro o en el correo de la comunidad, por ahí vemos también dudas y van saliendo después. Recijane nos ayuda a recordar cómo contactarnos con la comunidad. En este caso esta grabación va a quedar en los videos principales, pero para recordarles que en la pestaña de en vivo se han también un montón, un montón de videos que ya se han realizado también de forma virtual, entonces por si de pronto no aparecen en vivo, aparece en la parte de videos, cualquier cosa. Sí, perfecto. Y este, por ahí se digo y cuando hacemos el curso de paso a paso del diseño de Pecricia, hacerlo en Elementor. ¡Como se suma! Dejémoslo. Dejémoslo para Julio para dar el espacio, los chicos vienen a otro mío expresenciales, vamos a hacerlo virtual, incluso podemos subir, creo que podemos subirle también como este y lo vean más paso a paso y para hacerlo bien lejos, pero ahí vamos a estar a la orden. Entonces muchísimas gracias y buenas noches a todos, vamos a estar acá y recuerden que ahí mira pre-workout y que se viene el workout y quienes estén por Guanacaste, vamos a hacer un mira que en Guanacaste, con el cuantos de work es, andamos por acá. Buenas noches y gracias a todos. Buenas noches y gracias por asistir.