 En la mitad de torrelo dones, na cual formo parte, que se me han olvidado presentar na mí, perdón, soy Raúl Hermoso, diseño web e comments. E además somos companheiros de batallas en la Solana, co-workers e colaboramos en proyectos activos por ambas partes. Se me pasa a suclente, yo le paso a los suyos e así nos vamos dando co-valor al otro. Bueno, sin enroñarme máis que vamos moi curtidos de tiempo, doy paso a Carlos, un aplauso, gracias. Vale, genial, pues, lo primero de todo, daros las gracias por venida esta charla, la del tráculo 1, na verdade me volaba mucho, lo 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 Raúl, sí es verdad que yo soy full stack developer, ahora mismo formo parte de la plantilla de Zubi Group, es unha empresa que es unha lanza de startups, es unha venture builder e estoy dentro del equipo de tecnología, aunque en Zubi formo parte del equipo de tecnología y estoy un poco como front-end developer, sí es verdad que allí estoy haciendo mucho máis back que front. Soy efectivamente experto en WordPress, en PSP, CSS, analítica e demás, e non tengo Twitter, na verdade, tengo LinkedIn o Malt, usáis Malt habitualmente, no? Pues, aí os dejo o primer tip a haceros unha conta en Malt que está moi chula. Vale, quando me plantearon hacer la ponencia aquí, en principio, quería hacer tres cursos prácticos, tres casos prácticos, para enseñaros como sacarle partida al inspector, pero sí que es verdad que al final se nos han quedado sólo 20 minutos e quizá en 20 minutos non me va a dar tiempo a hacer tres casos prácticos ya desarrollados. Así que le da unha vuelta unha ponencia e la voy a articular de la siguiente manera. Os voy a explicar un pouco que es el inspector, os voy a enseñar las diferencias entre Firefox e Chrome e luego nos vamos a ver las pestañas que yo creo que en el inspector normalmente no usamos e como sacarle partida, 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 es o inspector de Firefox e Chrome? Bueno, doi por hecho que todos lo usáis habitualmente, vale? O inspector de Firefox e Chrome es esa herramienta que, cuando nos vamos a una web, le damos al botón derecho, inspeccionamos e nos salen un montón de cose, vale? Voy a coger la web de la WorkCamp porque creo que todos la hemos visitado, vale? Pero no porque este mal hechan e nada, simplemente porque la hemos visitado todos, pero está moi bien hecha, vale? Para mi el inspector de Firefox e Chrome es la herramienta más importante de cualquier desarrollador web, es decir, el día que nos quiten, el inspector se nos cai a todos los desarrolladores, a todos, es imposible hacer una web sin el inspector, vale? Pero en realidad es una herramienta que no hace nada, es decir, yo no puedo decir a un cliente, oye, te voy a hacer una web, tengo la herramienta de inspector porque no se la puedo hacer con una herramienta de inspector para se necesito web, pero se necesito outra herramienta. Y luego además pasa unha cosa, todo o que hago con el inspector de Firefox desaparece, por ejemplo, se yo me voy a aquí, inspecciono esto e le digo que esto quero, que sea del color rojo e se le enseña a mi cliente, e mi cliente me dice, oye, jo, que guai, venga, ponen los rojos, sí, pero quanto recargo, chuf, ya no está, es decir, todo o que yo hago desaparece. E sin embargo, siendo una herramienta que no hace casi nada, luego veremos que en realidad sí que puedo llegar a hacer alguna cosilla, es super importante e os voy a contar por qué. E para eso me vira chat GPT, usáis chat GPT? Sí, no? Se el inspector es la herramienta más importante, para mi chat GPT es la segunda más importante, vale? Por qué? Porque chat GPT nos da las respuestas, pero tenemos que saber que le tenemos que preguntar e aí es donde nos sirve el inspector, es decir, el inspector lo que nos va a dar es la información que luego le vamos a usar chat GPT, viene un cliente e nos dice, oye, 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 da un error, nos sabemos por qué. Bueno, pues nos vamos a nuestro inspector, miramos, copiamos el error, se lo pegamos a chat GPT, tío, me da este error, pues es por este e por esto, venga, lo cambiamos, pues por eso se posta aquí. Chat GPT, más el inspector, es un poder ilimitado. En las dos últimas semanas que llevo usando chat GPT e el inspector han conseguido hacer unas berguerías brutales, pero brutales, o sea, espectaculares, luego ojalá me de tiempo os cuento en lo último que he hecho en un tema de una calculadora, brutal. Vale, quales son las diferencias entre Firefox e Chrome? Pues, básicamente, son las mismas diferencias que entre os navegadores. Firefox es máis bonito, es máis user friendly, es máis chulo, pero Chrome es máis potente. Sobre todo por una cosa, por las extenciones, os navegadores, también les podemos poner addons, les podemos poner plugins, e las extenciones que tiene Chrome son máis potentes que las que tiene Firefox. Por qué? Porque Chrome puede usar las extenciones de Google. Se usáis también analytics, seguro que os habéis instalado algun addon en Chrome para ver se está instalado el tank manager, para ver se está instalado el analytics que codigo está sacando. Aquí os voy a dejar el primer tip, el primer truco que creo que debéis usar. Dos extenciones para Firefox e para Chrome. La primera es Wapalizer. Wapalizer es unha herramienta que de un vistazo nos dice en qué está hecha nuestra web. Por ejemplo, nos llama un cliente, hola, mira, sí, es que tengo una web y tal, pero espera, no, mira, es que mi web es esta, ya te metes de un vistazo e ya le puedes decir, ya, ya, la tienes desactualizada, el PHP no funciona, no tienes un plugin de cache super, super, super útil. Este addon. Mientras que estava escuchando as anteriores, he probado por que os he metido en la web de este teatro e he mirado que está hecha en jumbla, e el PHP está desactualizado. Tiene 7.4, ya debería tener el 8. Y me he metido en la web del centro comercial que hay aquí al lado. La web del centro comercial que está hecha en WordPress, que no tiene un plugin de velocidad e que el plugin que tiene de consentimiento de cookies está desactualizado. De hecho, no me deja elegir que tipo de cookies poda aceptar. Bueno, este es un momento de llamar al centro comercial e decirle, oye, estás pensando en cambiar tu web, yo te la vendo. O sea, cuando tengáis tiempo libre con esta herramienta, vais probando webs a ver qual puede funcionar. Y la outra herramienta es Ghost Inspector. Ghost Inspector está aquí. Esta es de pago, pero me parece super útil. Es una herramienta que lo que hace es que tú grabas ciertas acciones en la web y el las va a reproducir. Quantas veces? Os ha pasado que os halla un cliente e os ha dicho, no me funciona el formulario de contacto. Vosotros no sabéis que no funciona, porque se la web sigue funcionando como vais a saber que no funciona el formulario de contacto. E esta herramienta, o que vosotros le decíses, te voy a generar unas acciones e tú, por exemplo, todos os dias a las 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 el 100% de la pantalla. E, si no funciona, me envías un e-mail. Entonces, se tenéis un cliente que es máso-menos potente o por ejemplo que todos os dias está vendiendo, yo le instalaria esto. Porque, además, se lo podéis cobrar e le podéis decir, oye, e te cobra un fee porque todos os dias voy a comprobar en tu web si funciona la tienda online. Venga, ya vamos con las pestañas que es o outro. Venga, voy a hacer la primera pestaña, el inspector. E, yo creo que esta es la que habitualmente todos usamos, no, es decir, quando nos metemos en un desarrollo, nos metemos, abrimos el inspector e lo vemos. E, é o sitio onde ver el código HTML. Podemos interactuar e como truco en esta pestaña, podemos ver los cambios de CSS, las animaciones e las compatibilidades. En la web de WorkCamp de repente nos llaman un cliente e nos dice, oye, es que yo aquí me gustaría meterle un texto e tal, no sé que no sé cuánto es, en realidad no, quiero que ponga un evento de diseño tal, tal, quiero que ponga, es el mejor sitio donde podemos venir tal, tal, tal, tal, tal. Pues, lo podemos editar online. Quizá nos da un texto que vemos que no es lógico que sea tan largo, pues no nos vamos a ir tal, oye, es lo que a menos así se lo enseñamos, decimos, mira, no tiene sentido que lo pongamos, porque hay clientes e clientes. O te dice, por ejemplo, es que a mi me gustaría que estuviera máis grande, tú se me enseñas, te dices, mira, pues en realidad te lo voy a hacer en un super grande e ya se lo enseñas, te dices, oye, es que no merecerá pena. E qual es el truco de cambios? Non sé se ha pasado a veces que le estáis enseñando Madre mía, ver si me acuerdo de todos los cambios que hecho de CSS. Bueno, para eso está esta pestañita, en esta pestañita, me acabo colgando, 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 quedáis con esto e ya aplicáis esos cambios en vuestros está CSS. Las animaciones, esta web, vale, aquí podemos ver las animaciones en CSS. Vale? Si yo me voy aquí a la web, veo que a unica animación, o que debería cargar semo, que no se me carga, es la de las cookies. Esto me va a sacar las animaciones CSS que hay en una web e las puedo ir probando. Quizá me dice un cliente, oye, me gustaría que un texto pasase por la web todo el rato diciendo no va oferta, no va oferta, no va oferta. La ponemos e en vez de estar cambiando los tiempos e recargando, aquí lo podemos ir cambiando e viendo que tal queda. Vale? Como voy de tiempo? Vale. A ver se me da tempo a hacer el caso. Vale. La consola. Aquí, esta la useis habitualmente. Si, no? Vale, porque? 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, que es la de... no, seguro, no. Me parece que he visto un error. Vale. Si. Vale? Aqui, me aparecen os errores que tenen na web. Por ejemplo, ha intentado hacer una llamada get para coger en bootstrap. Esto e lá un error. Vale? Pero desde la consola podemos hacer un gran truco. Poder? Esto no es... Esto no es da presenta. Esto no es del inspector, que he hecho operaciones porque estamos... Vale? Esto tiene un pequeño truco. Non sé se lo usáis. Aqui se poden lanzar scripts. Es decir, eu le pudo decir, por exemplo, que se la variable x es igual a 5. E la variable y es igual a 7, que me ha dado un console, un tolo de x más y. E me saca que es 12. Que vosotros decimos, da sumamos 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áis cosas podemos ver aqui. Ah, bueno, non sé se alguno trabajéis con PHP. Se trabajéis con PHP, PHP, también se poden ver dos logs. Vale? Le podéis hacer un console.log, marcará e la variable que queréis hacerle unico e os aparecerá aqui. E se vamos un pouco máis a onza. Vale? Interpretar, tá tá tá, perfecto. Vamos con outra pestaña. Más o menos lo vais pillando? Bien? Sim? Vale? Vale, ya hemos visto o inspector, podemos hacer cosas chulas, 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 donde lo carga. Vale? De repente sól me cancinó minutos. En serio? Ostras. Joder, que fuerte. Pues no sé qué decirte. Pues entonces me voy a saltar esta e me voy a ir a outra. Pues me voy a ir a la derred. A la derred. A la de cookies. Y luego ya os meneis lá. Vale? La derred. Aquí podemos ver todas las llamadas que ha hecho la web. Vale? E desde dónde 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. Se os dais cuenta se nosotros nos metemos en torrelojones.workup 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 los elementos. En la presentación anterior el chico ha dicho que aquí podéis ver qué cosas cargan e qué cosas ralentizan la web. Vale? Desde aquí podemos ver todo o que está cargando na 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. Se nosotros vemos que un script quando lo estamos cargando de repente tarda mucho en cargarse e no estamos muy seguros de que hace lo bloqueamos e lo recargamos e probamos na web. Quizá funciona e decimos que plugin me está cargando e eso. Que cosa más rana pues vamos a ver esto eu sou el pregunta da chat.ct e le diría oye esto que se me está cargando e onde es e ele probablemente me diga es deste plugin oye pues se no necesito lo desactivo. Vale. E pues me avía la de cookies. Vale. Me avía la pestaña do almacenamiento. En esta pestaña podemos ver las cookies que me mete na web. Por ejemplo o chega a un cliente e os dice e que eu não sei se as cookies están na lei e tal minha página não sei que nos é quantos. Bueno, eu na acepta las cookies e la web non me tiene un cookie. O sea que isto está funcionando. Se eu o acepto já me ha metido na cookie e me ha dicho oye as acceptado na cookie oe de leyes. Vale. Maravilla se le podemos borrar. Eu sei que eu o la posso borrar aqui. Se me deja. Vale. Lo pode eliminar o recargo e já não me parece. Vale. E os veia contar un truco en 3 minutos. Venga que me da tempo. Le he preguntado a chat.ct como puedo crear um código javascript para insertar uma cookie con o nome utm e o valor da web atual. Vale. Para que me sirve isto? Isto me sirve porque se hago campañas na Google Ads quando entren na web na web na url vai ter o utm surs e o utm mínimo. E o que quero é meterle ao usuario uma cookie para que quando me termine a compra enviar-lo con analytics e ver exatamente que campanha me ha traído uma venta. Pois chat.ct que é muy guai me ha dado este código. Venga pois lo copio me voy aquí me voy a mi consola e lo lanzo. Me prefiro na echonada e de hecho se me voy a almacenamiento aqui na echonada. Pero que pasa? Se me voy por ejemplo medium utm medium é igual a cpc. Vale. Me voy aquí a las cookies e não me aparecen pero e se agora lanzo esto de repente aqui tengo mi cookie creada. Estou probando un script que me ha dado chat gpt en tiempo real. Já sei que funciona. É máis eu ahora me podria venir moa arriba e decir a chat gpt. Vale. Se agora tienen esta cookie quero que me hagas un cambio. Por exemplo imaginaros que eu agora de repente me dice o cliente. Estou fazendo unas campañas de Google Ads e hecho un landing. Tenho un problema quando llegan a la landing se pinchan en el logo se me van a la home. Não quero que se me vayan. Vale. Pois eu creo o script que meto na cookie e con chat gpt e creado esto que o que digo é se teme la cookie hazme un cambio. Vale. De la cookie era este probamos a ver se funciona. Lo lanzamos e efectivamente isto parece como de mágo en mi imagen agora me ha cambiado a url. Con isto podemos hacer cosas muy chulas. Por exemplo oi, ya terminamos. Que rabia. Bueno un programa de referidos o truco un programa de referidos quantas veces os dice un cliente oi, es que eu vendo não sei que e claro quira un programa de referidos e tal bueno tu le dices vale que tenga utm guión bajo cliente e o cliente que pongan o que quiera que ele vaya comparte no enlace e quando se termine a compra os va a venir o valor de la cookie e assim podeis ver quena referido quitaros de cupones quitaros de nada han sido dos scripts nos que hemos probado dos e ya está con eso vale vale e pues nada jope e pues mira que lo tría ensaiado que rabia fejate boi me aia flipado aia aposta hasta 3 3 casos pues nada oi, se me ha passat muy rabia pero quidamos empeza tarde no podeis ser si, se me ha passat super rabido oi me tengo que apuntar a las siguentes bueno e logo estaria aquí todo el dia o sea que se me quedeis preguntar venga ahora vine a preguntar si hola hola quipa quipa quipa quipa quipa quipa quipa quipa quipa quipa quipa quipa quipa quipa quipa quipa quipa quipa que eu portei de analizar ascesibilidades tenen os inspectores tenen águna herramienta para inspectores a ascesibilidad hay una pestaña que es a ascesibilidad vale que esta aqui si que es verdad que creo que esto es como máis para algo se entra en gente invidente que se lo leire máis si que es verdad que el 11 visto que la página recomiendo que navegadores tienes que usar e como usarlos para que te funcionen los inspectores de ascesibilidad vamos bueno no hai máis pluntas hola que tal queria saber se se pode alguna manera se se pode hacer privada en que sentido a ver si no es decir tú tú puedes bloquear o botón derecho en tu web tú puedes bloquear o botón derecho e decir oye que si pulsan o botón derecho non se abra o inspector pero a ver si yo quiero te lanza un script que te saco todo o que quiera a ver es imposible que tú hagas invisible tú código porque entralial lo que está funcionando e eso non es tú web lo que lo está haciendo es firefox es el que está sacando toda la información e esa información necesitas sacarla por si non lo pode pintar o web entonces tú non le puedes decir oye non enseñes la información si que es verdad que puedes hacer algunos truquillos por ejemplo se yo aquí me voy al espacio de todos relevantes que son de WordPress vale si que es verdad que se te comienda por temas de virus e por temas de hacking que no pongas esto pero más allá de eso quizá través del servidor puedes ocultar ciertas cosas e tal pero lo que es los elementos que estás cargando en la web a ver ja no sé qual ibas sacada sí vale bueno el de las cookies era moi chulo la verdad pero os podria enseñar rápido rápido rápido alguna vez habéis hecho una web en vez de usando web doble alguno está lanzado a hacer una web en web doble a que es moi chulo web doble es una herramienta vamos es una medida que lo que te dices este 100 web doble es el 100 de una pantalla si tú lo ves en una pantalla de ordenador 100 es el máximo si tú lo ves en una presentación de una cine 100 sigue siendo la misma medida en móvil igual es decir el 100 de una pantalla de móvil es el 100 vale cuál es la diferencia que si yo veo esta web vale si yo veo esta web yo ahora mismo esto mide 1519 píxeles vale si yo lo hago máis pequeno vale ahora mismo esto mide 2278 píxeles pero en realidad esto sigue siendo 100 web doble pues yo puedo hacer una web basándome todo en web doble cuando a veces os pasan diseños moi moi moi moi xungos el típico diseño que te dicen es que la imagen tiene que estar aquí el texto aquí entonces esto aquí vale vale pues este truco seria para que usásseis una web se él lo ha hecho con web doble vale con esto se alguna vez os lanzáis podéis hacer una web os lo voy a enseñar aquí e la podíais hacer entera a traves del inspector en HTML se a mí el cliente aquí me dice oi, yo esto lo veo pequeno hámelo máis grande yo se lo hago grande no 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 pequeno porque el menú no está hecho no 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 pequeno pero la web sigue siendo el mismo tamaño se yo lo hago normal la web sigue viendo se igual entonces se me hubiese dado tiempo se habría enseñado un caso práctico para hacer una web a traves del inspector todo en 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 e el diseñador te pasa un diseño que dices esto es imposible maquitarlo de outra manera entre ellas creo que la web de la work camp ha sido difícil e o primer que les dije chigo, pues que tal lo tenis que haber hecho en web doble vale e ya es que tampo me ha dado máis tiempo oi, tú lo que puedes hacer es decirle non es porcentajes tú aquí cuando le dices font size tú le puedes decir que sea 18px pero tú imagínate que me dices le 18px le dices 15 web doble tú no que le estás cambiando es todas las medidas en realidad en vez de usar px se usa web doble esto son 100 web doble se yo le digo que algo mide 50 web doble me va cojar la mitad la pantalla tu pantalla de tu super ordenador o mi pantalla de mi mini ordenador 50 va ser 50 por o se a mi 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 saber igual pero como yo lo tengo en web doble yo le puedo decir yo trabajo máis grande y lo que yo este viendo es lo que el va a ver da igual son 80 web doble da igual los px no usamos px 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 pero se a ti te pasa en una imagen de 3.000 px y el cliente te dice la quiero ver así si tú luego la fuerzas en una web y le dices tiene que medir 2.000 px cuando tú lo veas en tu pantalla y el diseñador lo vea en su pantalla lo vais a ver diferente porque lo esta viendo en una pantalla de 8.000 y tú en una de 3.000 al final los 2.000 van a ser diferente con este método lo vais a ver igual muy chulo na verdad y todo esto con el inspector lo vais usando todo lo copiáis lo pegáis en vuestro html y a correr así que nada cos un placer muchas gracias Carlos