 en la mitad de torrelo dones, en la cual formo parte, que se me han olvidado presentar na mí, perdón, soy Raul Hermoso, diseño web e comments, e ademán somos companheiros de batallas en la Solana, Bocoworkers e colaboramos en proyectos activos por ambas partes, é xe me passa subplente, é xe me passo los suyos, e así nos vamos dando cobalón al outro. Bueno, sin enroñarme máx, que vamos moi cortitos de tiempo, doy passo a Carlos, un aplauso, grácias. Daros las grácias, por venida esta charla, la del trácuno, en la verdad me volaba mucho, la de la academia online, pero bueno, creo que está, tan bien nos va a salir muy bien. Soy Carlos García del Real, a parte de todo o que ha contado Raul, é xe es verda que yo soy full stack developer, ahora mismo formo parte de la plantilla de Zubi Group, é xe una empresa que xe unha lanza era de startups, é xe unha venture builder, e estrei dentro del equipo de tecnologia, aunque en Zubi formo parte del equipo de tecnologia, é xe un pouco como front-end developer, xe é verda que ae xe estoy haciendo mucho máx back que front-end. Soy efectivamente experto en WordPress, en PHP, CSS, analítica e demás, e no tengo Twitter, na verdad, tengo LinkedIn o Malt. Usáis Malt habitualmente, no? Pues aí eu os dejo o primer tip a xe us unha conta en Malt que é xe muito chubo. Vale, quando me plantearon hacer la ponencia aquí, en principio quería hacer 3 cursos prácticos, 3 casos prácticos para ensenharos como sacarle parte do inspector, pero sí que es verda que al final se nos han quedado só 20 minutos, e quizá en 20 minutos non me va a dar tiempo a hacer 3 casos prácticos já desarrollados. Así que le da unha vuelta un pouco a la ponencia e la voy a articular de la siguiente maneira. Os voy a explicar un pouco que é xe o inspector, os voy a ensenhar las diferencias entre Firefox e Chrome, e luego nos vamos a ver las pestañas que eu creo que no inspector normalmente non usamos e como sacarle partido, e se nos da tiempo, que espero que nos de tiempo, hacemos un caso práctico. Un caso práctico sobre un tema de cookies e de la consola que va estar chulo, vale, vamos rápido, que é o inspector de Firefox e Chrome? Bueno, doi por é xo que todos lo usáis habitualmente, o inspector de Firefox e Chrome é xe esa herramienta que quando nos vamos a unha web, le damos al botón derecho, inspeccionamos e nos salen un monton de cosen, vale. Voy a coger la web de la workham porque creo que todos la hemos visitado, vale, pero non porque este mal exen e nada, é simplemente porque la hemos visitado todos, pero está moi neta, vale. Para mi, o inspector de Firefox e Chrome é a herramienta mais importante de cualquier desarrollador web, é es decir, o dia que nos quiten, o inspector se nos cai a todos os desarrolladores, a todos. É imposible hacer unha web sin o inspector, vale. Pero en realidad é unha herramienta que no hace nada, é es decir, eu não posso decir a un cliente, te vou a hacer unha web, tengo la herramienta de inspector, porque non se la pode hacer con a herramienta de inspector, se necesito work person, necesito outra herramienta. E lo que ademas pasa unha cosa, todo o que hago con o inspector de Firefox desaparece, por exemplo. Se eu me voy a quí, inspecciono esto e le digo que esto quero, que sea ver color rojo e se le ensinha o meu cliente e o meu cliente me xe, oi, oi que guai, venga, ponen o rojo, quanto recargo, chuf, ya non está. É es decir, todo o que eu hago desaparece. E, sin embargo, sendo unha herramienta que no hace casi nada, lo goberemos que en realidad sí que pode llegar a hacer alguna cosilla, é super importante. E os voy a contar por que. E para eso me vira chat gpt. Usáis chat gpt? Simo, se o inspector es la herramienta mais importante, para mi chat gpt é a segunda más importante, vale. Por que? Porque chat gpt nos dá las respuestas, pero tenemos que saber que le tenemos que preguntar. E aí é onde nos sirve o inspector. É decir, o inspector, o que nos va a dar, é a información que luego le vamos a aposar a chat gpt. Viene un cliente e nos dice, oi, quiero hacer una locura. Nos vamos a chat gpt, le ximos como lo hago. Nos dice esto, lo metemos en nuestra web, lo lanzamos e nos dá un error. No sabemos por que? Bueno, pues nos vamos a nuestro inspector, miramos, copiamos el error, se lo pegamos a chat gpt. Me dá este error. Pues é por éste, por ésta, por ésto. Venga, lo cambiamos. Pues por éso é xe posto aquí. Chat gpt más o inspector, é un poder ilimitado. E nas dos últimas semanas, que eu usando chat gpt e o inspector, eu consegui hacer unas virguerías brutales, pero brutales. Espectaculares. Logo, ojalá me de tiempo, os cuento lo último que é só un tema de una calculadora brutal. Vale. Quais son as diferencias entre Firefox e Chrome? Pues básicamente son as mesmas diferencias que entre os navegadores. Firefox é máis bonito, é máis user friendly, é máis chulo, pero Chrome é máis potente. Sobre todo por unha cosa, por as extensiones. Os navegadores, tamén les podemos poner addons, les podemos poner plugins, e as extensiones que tiene Chrome son máis potentes que las que tiene Firefox. Por que? O Chrome pode usar as extensiones de Google. Se usáis tamén analíticas, seguro que os habéis instalado algun addon em Chrome, para ver se está instalado o Tankmanager, para ver se está instalado o Analytics e para ver que código está sacando. Aqui os vou deixar o primer tip, o primer truco que creo que deveis usar. Dois extensiones para Firefox e para Chrome. A primeira é Wappalizer. Wappalizer é unha herramienta que de un vistazo nos dice em que está hecha a nuestra web. Por exemplo, nos llama un cliente. Ola, mira, sí, es que tengo unha web e tal, que urreles, no mía, es que mi web es esta, ya te metes de un vistazo e ya le podes decir ya, la tienes desactualizada, el PHP no funciona, no tienes un plugin de cache, super útil este addon. Mientras que estava escuchando as anteriores me he metido en la web deste teatro e he mirado que está hecha enjumla e o PHP está desactualizado. Tiene 7.4, ya debería tener el 8. E me he metido en la web del centro comercial que halla aqui al lado. La web del centro comercial que está hecha en WordPress que no tiene un plugin de velocidad e que o plugin que tiene de consentimento de cookies está desactualizado. De hecho, no me deja elegir que tipo de cookies poda acertar. Bueno, este es un momento de llamar al centro comercial e decirle, oye, estás pensando en cambiar tu web, yo te la vendo. Quando tengas tiempo libre con esta herramienta, vais probando webs a ver qual puede funcionar. Vale. E la outra herramienta es Ghost Inspector. Ghost Inspector é esta de aqui. É esta de pago, pero me va a hacer super útil. É una herramienta que lo que hace es que tú grabas ciertas acciones en la web e las va a reproducir. Quantas veces, os ha pasado que os halla un cliente e os ha dicho, no me funciona o formulario de contacto, vosotros no sabéis que não funciona, porque se la web sigue funcionando como vais a saber no formulario de contacto. Esta herramienta, lo que vosotros le decíses te voy a generar unas acciones e tú por ejemplo todos os dias 9 de la mañana las vas a hacer. Vas a intentar enviar un formulario, vas a intentar hacer una compra, vas a intentar hacer el scroll hasta 100% de la pantalla funciona, me envías un email. Então, se tenis un cliente que é máso-menos potente o por ejemplo que todos os dias está vendendo eu le instalaria esto, porque además se lo podís cobrar e le podís decir oi e te cobro un fee porque todos os dias voy a comprobar en tu web se funciona a la tienda online. Vale Venga, ya vamos con las pestañas que é o outro. Venga, voy a hacer a primera pestaña, el inspector. Vale Eu creo que esta é o que habitualmente todos usamos no, es decir, quando nos metemos em um desarrollo nos metemos, abrimos o inspector e lo vemos. É o sítio onde ve o código HTML podemos interactuar en tiempo real e como truco en esta pestaña podemos ver os cambios de CSS as animaciones e as compatibilidades. Em la web workham de repente nos llama un cliente e nos dice oi a que me gustaría meterle un texto e tal, que non sé cuántos, en realidad quiro que ponga un diseño tal-tal quiro que ponga e é o mejor sítio donde podemos venir tal-tal. Pois lo podemos editar online. Quizá nos da un texto que vemos que non é lógico, que sea tal largo e nos vamos a ir al maquetadora porque é o que me damos a sí e nos ensañamos. Mira, no txen sentido que lo pongamos porque hay clientes e clientes En realidad te lo voy a hacer en un super grande e ya se lo enseñas e dices oi, es que non merecerá a pena. E qual es o truco de cambios? Non sé se os ha pasado a veces que le estáis ensinando la hueva a un cliente e empecéis a hacer cambios e emceses. Le haces cambios, le haces cambios, le haces cambios e de repente os dices, me encanta e tu piensas madrimía a ver se me acuerdo de todos os cambios que hecho de ceses. Bueno, para eso está esta pestañita. En esta pestañita, se os van guardando los cambios que habéis hecho en esta sesión. Lo veis? Lo ideal es que al final del todo, os queréis con esto e ya aplicáis esos cambios en vuestros tais ceses. Las animaciones, esta web, vale, aquí podemos ver las animaciones en ceses. Si yo me voy aquí a la web, veo que la única animación o que debería carcar semo, que no se me carga, es la de las cookies. Esto me va a sacar las animaciones ceses que hay en una web e las pudo ir probando. Quizá me dice un cliente, oye, me gustaría que un texto pasase por la web todo el rato diciéndo no va oferta, no va oferta, no va oferta. La ponemos e en vez de estar cambiando los tiempos e ir recargando, aquí lo podemos ir cambiando e viéndo que tal que como veis de tiempos, a ver se me da tiempo a hacer el caso. Vale, la consola, aquí esta la usáis habitualmente, sí, no? Vale, porque aquí es donde logeamos los errores que me da una web, vale? Si yo me meto en una web, me parece que en una de estas he visto que tenia un error, en la de seguro. Me parece que he visto que en una de estas he visto que tenia un error, va, sí, sí, vale? Aquí me aparecen los errores que tenen una web, por ejemplo, ha intentado hacer una llamada get para coger en bootstrap, esto e la un error, vale? Pero desde la consola podemos hacer un gran truco, pode? Esto no es... Esto no es de representar, esto no es del inspector, eh? Que cogeración es? Vale, esto tiene un pequeño truco, non sé se lo usáis, aquí se poden lanzar scripts, es decir, yo le pudo decir, por ejemplo, que se la variable x es igual a 5 e la variable y es igual a 7, que me haga un console un tolo de x más y me saca que es 12. Que vosotros decimos, da suma nos 7 más 5, ya ves tú, ya, pero se a mi alguien me recomenda un script para hacer algo en vez de hacerlo, instalarlo e probarlo, lo lanzo en esta consola e veo que pasa, vale? Porque además, quando recargue, desaparecerá, vale? Que más cosas podemos ver aquí? Ah, bueno, non sé se alguno trabajéis con PHP, se trabajéis con PHP, también se poden ver os logs, vale? Le podéis hacer un console.log, marcar ahí, la variable que queréis, hacerle unico e os aparecerá aquí. Eso vamos un pouco más adelante. Vale, interpretá, tata, tata, perfecto. Vamos con outra pestaña, máso o menos lo vais pillando, bien? Sí? Vale, ya hemos visto o inspector, podemos hacer cosachulas, la consola, súper importante la consola, súper importante, vamos al depurador. En la pestaña depurador lo que podemos ver es los elementos que carga la web e desde dón de lo carga, vale? De repente, sólme cán cinco minutos, en serio? Ostras, joder, qué fuerte, pues no sé qué decirte, pues então me voy a saltar esta e me voy a ir a outra, pues me voy a ir a la de red, a la de red ya la de cookies, y luego ya os minaíra. Vale, la de red, aquí podemos ver todas las llamadas que ha hecho la web, vale? E desde dón de ha cargado los elementos, vale? Por ejemplo, yo puedo ver que ha cargado un script, lo ha cargado aquí e lo ha cargado desde la web, le ha hecho una llamada a get. Si os dais cuenta, si nosotos nos metemos en torrelojones.work, lo primero que me ha hecho es una redirección, me ha hecho un 302 e me lo ha cambiado e luego me ha hecho un get al 2023 e a partir de aquí me ha cargado todos os elementos. En la representación anterior, el chico ha dicho que aquí podéis ver qué cosas cargan e qué cosa ralentizan la web, vale? Desde aquí podemos ver todo o que está cargando en la web e hay una maravilla, la podemos bloquear. Yo puedo ver que algo se me recarga, que algo me está ralentizando na web e puedo bloquear esa URL e hacer una recarga con este elemento bloqueado. Si nosotos vemos que un script, quando lo estamos cargando, de repente tarda mucho en cargarse e non estamos muy seguros de que hace, lo bloqueamos e lo recargamos e probamos na web, quizá funciona e decimos que plumin me está cargando eso. Que cosa más rana, pues vamos a ver. Esto que se me está cargando de ondes e el probablemente me diga es de este plug-in. Oye, pues se non necesito, lo desactivo. Vale? E, pues me avía la de cookies. Vale, me avía la pestaña de almacenamiento. En esta pestaña podemos ver las cookies que me meto na web. Por ejemplo, os llega un cliente e os dice es que yo no sé si las cookies están, en la ley tal, mi página no sé que non sé cuántos. Bueno, yo no ha aceptado las cookies e la bueno me ha metido en un cookie. O sea que esto está funcionando. Si lo acepto, ya me ha metido en una cookie e me ha dicho oye, has aceptado la cookie de leyes. Vale? Maravilla, se lo podemos borrar. Yo sí quiero la puedo borrar aquí. Se me deja. Vale? Lo pode eliminar, lo recargo e ya no me parece. Vale? E os vea contar un truco en tres minutos. Venga, que me da tiempo. Le he preguntado a chat gpt como pudo crear un code en JavaScript para insertar una cookie con nombre UTM e el valor de la URL al actual. Vale? Para que me sirve esto? Esto me sirve porque se hago campañas en Google Ads quando entren en la web, la web en la URL va a tener el UTM source e el UTM media. E lo que quiero es meterle al usuario una cookie para que, cuando me termine la compra enviarlo con analytics e ver exáctamente qué campaña me ha traído una venta. Vale? Pues chat gpt que es muy guai me ha dado este código. Venga, pues lo copio, me voy aquí, me voy a mi consola e lo lanzo. Me pito, no ha hecho nada. E de hecho, si me voy al macenamiento a que no me ha hecho nada. Pero que pasa? Si me voy, por ejemplo, medium UTM medium es igual a gpt. Vale? Me voy aquí a las cookies e non me aparece. Pero e se ahora lanzo esto? De repente, aquí tengo mi cookie creada. Estou probando un script que me haza a gpt en tiempo real. Ya sé que funciona. Yo ahora me pondré a venir muy arriba e decir a chat gpt. Vale? Se ahora tienen esta cookie quiero que me hagas un cambio. Por ejemplo. Imaginaros que eu ahora de repente me dice el cliente. Estou haciendo unas campañas de Google Ads. E hecho un landing. Tengo un problema. Quando llegan al landing se pinchan en el logo, se me van a la home. No quiero que se me vayan. Vale? Pues yo creo el script, te meto a una cookie e con chat gpt e este, e creado esto, que lo que digo es se tiene la cookie, hazme un cambio. Vale? En de la cookie. Era este, pero vamos a ver se funciona. Lo lanzamos e efectivamente isto parece como un mago. E mi imagen, ahora me ha cambiado la URL. Con esto podemos hacer cosas muy chulas. Por ejemplo. Ya terminamos. Que rabia. Un programa de referidos o truco. Un programa de referidos. Quantas veces os dice un cliente. É que eu vendo, não sei que e claro. Quiero un programa de referidos e tal. Tu le dices, vale? Que tenga utm guion bajo cliente. E o cliente que ponga no que queda. Que ele vaya a comparte en el enlace e quando se termine la compra os va a venir el valor de la cookie. É o referido. Quitaros de cupones, quitaros de nada. Há sido dos inscritos que hemos probado. E ya está, con eso vale. E pues nada, jope. Não me dan nada de tiempo e mira que lo teria ensañado. Que rabia. Fíjate, boi, me había flipado. Já posto hasta 3 casos. Pues nada. E se me va a pasar muy rabia. Quitamos empeza tarde. Não pode ser. Me tengo que apuntar a las siguentes. Bueno, luego estaré aquí todo el dia. Se me querís preguntar venga. Ara vina a preguntar tú. Sim, las cuarlas dentro. Hola, hola. Uoprestil, uoprestil, uoprestil. Estarán en pregunta? Aquesta é a pergunta. De onde colabas las cosas? Vale, ok. Já. Eu. Eu. Que eu porto de organizar as acesibilidades que tenen os inspectores. Tenen águna herramienta. Para a acesibilidade há unha pestaña que é acesibilidade. Vale. Que está. Sim, que é verdade que creo que esta é como máis para algo se entra en gente invidente que se lo leire máis. Sim, que é verdade que a 11 visto que a página recomenda que navegadores tienes que usar e como usarlos para que te funcionen os inspectores de acesibilidade. Bueno, no hai máis preguntas? Hola, que tal? Quería saber se se pode de alguna manera... Se se pode ser privado en que sentido? Sim, no. É decir, tú podes bloquear o botón derecho en tu web. Tú podes bloquear o botón derecho e decir que botón derecho non se abra en inspector. Pero a ver, si yo quiero te lanza un script que te saco todo o que quiera. A ver, é imposible que tú hagas invisible tú código porque entralial, lo que está funcionando é xo, no é tú web, lo que lo está haciendo é Firefox. É o que está sacando toda a información. E esa información necesitas sacarla por si non o pode pintar na web. Então é tú non le podes decir, oi, no enseñas la información. Sim, que é verdade que podes hacer águnos truquillos. A morality? Sim, es toda каких critico. É ca changes. Im spoiler. É o number. Se por favor fictional e Bueno, el de las cookies era moi chulo, la verdad, pero os podria enseñar rápido, rápido. Alguna vez habéis hecho unha web en vez de usando pixels, usando o web web doble? Algún está lanzado a hacer unha web en web web doble? A que es moi chulo? Web web doble es una herramienta que vamos, es una medida que lo que te dices. Este 100 web web doble es el 100 de una pantalla. Se tu lo ves en una pantalla de ordenador, 100 es el máximo. Se tu lo ves en una presentación de unha cine, 100 sigue siendo la misma medida. En móvil igual, es decir, el 100 de una pantalla de móvil es el 100. Qual es la digerencia? Que se yo veo, por ejemplo, esta web. Se yo veo esta web, yo ahora mismo, esto mide 1519 pixels. Vale, se yo lo hago máis pequeño. Vale, ahora mismo, esto mide 2278 pixels. Pero en realidad, esto sigue siendo 100 web doble. Eu poda hacer unha web basándome todo en web web doble. Quando a veces os pasan diseños muy, muy, muy, muy xungos, el típico diseño que te dicen, es que la imagen tiene que estar aquí e el texto aquí e entonces esto aquí. Vale, vale. Pues este truco seria para que usáis unha web, se el va hecho con unha web doble. Vale, con esto, se alguna vez os lanzáis, podéis hacer unha web, os lo voy a enseñar aquí. E la podíais hacer entera a través del inspector, en HTML. Se a mí el cliente aquí me dice, oi, yo esto lo veo pequeño, ádame lo máis grande, yo se lo hago grande en unha web doble e me da igual la pantalla en la que en lo este viendo, porque en lo va a ver igual de grande que yo. Se os dais cuenta, el menú se ha hecho máis pequeño, porque el menú no está hecho en unha web doble, el menú está hecho el que coge la web. Entonces, el menú está hecho en píxeles e el se ha hecho máis pequeño, pero la web sigue siendo el mismo tamaño. Se yo lo hago normal, la web sigue viendo ese igual. Se me hubiese dado tempo, se habría enseñado un caso práctico para hacer unha web a través del inspector todo en unha web doble, que os sirve para cuando os pasa, que pasa mucho un cliente que te dice, oi, es que mi primo es diseñador y el diseñador te pasa un diseño que dices, esto es imposible maquetarlo outra manera, entre ellas creo que la web de la web camp ha sido difícil y lo primer que les dices, chico, pues que tal, lo tenis que haber hecho en unha web doble. Vale? Y ya es que tampo me ha dado máis tiempo. O sea, tú lo que podes hacer es decirle, non es porcentajes, tú aquí cuando le dices font size tú le podes decir que sea 18 píxeles, pero tú imagínate que me dices 18 píxeles, te dices 15 web doble. Tú lo que le estás cambiando es todas las medidas. En realidad en vez de usar px se usa web doble. Ésto son 100 web doble. Se yo le digo que algo mide 50 web doble, me va a cojar la mitad da pantalla, tu pantalla de tú super ordenador o mi pantalla de mi mini ordenador, 50 va a ser 50. O sea, a mí de repente me dice el cliente, oi, es que yo quiero que esta imagena parezca máis grande, el diseñador lo habrá visto en su super pantalla de diseñador. Entonces, que pasa, que yo en mi ordenador no lo vamos a ver igual, pero como yo lo tengo en web doble, yo le puedo decir, yo trago máis grande. Y lo que yo estoy viendo es lo que el va a ver. Da igual, son 80 web doble. Da igual los píxeles, no usamos píxeles. Son web doble. Tú lo que le estás diciendo es lo que vas a medir es el 80% de la pantalla, 80 web doble. Entonces, con esto, puedes hacer los diseños locos que te pasan. Xembre, a ver. Si, pero se a ti te pasa en una imagen de 3.000 píxeles e el cliente te dice, la quiero ver así, si tú luego la fuerzas en una web y le dices, tiene que medir 2.000 píxeles cuando tú lo veas en tu pantalla e el diseñador lo vea en su pantalla lo vais a ver diferente, porque lo está viendo en una pantalla de 8.000 e tú en una de 3.000. Entonces, al final, los 2.000 van a ser diferentes. Con este método, lo vais a ver igual. Muy chulo, na verdad. E todo esto, con el inspector, lo vais usando todo, lo copiáis, lo pegáis en vuestro HTML e acorrer. Así que nada, cos un placer. Muchas gracias, Carlos.