 Bueno, en primer lugar gracias a todos por estar aquí, a estas horas que ya se va uno cansando un poquitín y ya se nota todo el día. Gracias a la organización por haber elegido este taller, no sé si me podéis cambiar ya a la pantalla. Gracias a la organización por haber elegido este taller, porque sé que se presentan muchas y es bastante complicado que lejan a uno, entonces muchas gracias por eso. Como podéis ver aquí me podéis encontrar bueno en mi web o en estos enlaces, en LinkedIn, en Twitter, etcétera. Y también agradecer a LucasJoss por patrocinar esta charla y por poderme permitir estar aquí dándose este taller, que además es una empresa de hosting de mi ciudad de Lugo, de donde vivimos ya entonces. Ya, perfecto. Bien, esta charla o este taller prácticamente no van a ser diapositivas, cobreis, es casi un esquema, porque lo que quiero hacer, lo que quiero hacer es que funcione, ahí está, perdonad, cosas del directo. Todo esto que os voy contando aquí, lo que voy a hacer es seguirlo enseñando directamente sobre una web y que mejor que en este caso, coger la web de la Work at Madrid y hacer en directo todas estas cosas, ¿vale? En cualquier momento tenemos tiempo, es decir, puedo extenderme muchísimo o puedo recortarlo mucho según las necesidades, con lo cual en cualquier momento podéis pararme, preguntarme lo que sea, dudas, etcétera. Y según eso, vamos alargando más o menos, ¿vale? Vamos allá entonces. Bueno, otra cosa antes de empezar, también contaros qué lo que vamos a hablar, como ya habéis visto, son las herramientas de desarrollo del navegador. Supongo que todos los que estáis aquí, ¿sabéis lo que son las herramientas de desarrollo del navegador? Si hay alguien que no lo sepa que levante la mano, no, ¿sí? No, todos sabemos lo que es. Vale, y cuando hablamos del navegador, como veis, no he hablado de ningún navegador en concreto. Entonces, yo me voy a centrar en un navegador, en este caso voy a estar trabajando con Edge, que está basado en Chrome, es como cualquier Google Chrome, ópera como muchos navegadores que están basados. En este sistema, esto mismo lo podemos aplicar a cualquier otro navegador, por ejemplo a Firefox, también son muy similares, habrá cosas diferentes que Firefox tiene y no tiene Chrome. Hay pequeñas diferencias, pero básicamente todos los navegadores hoy en día tienen unas herramientas muy completas y son muy similares. Por ejemplo, Firefox en cuanto a CSS quizá tenga algunas mejoras, tiene algunas cosas más que en Chrome, pero bueno, según para lo que vayáis a utilizar uno o otro, cualquiera de ellos es totalmente funcional. Aparte de esto, no sé si lo sabéis que los navegadores casi todos tienen una versión de desarrollador. Esta versión es igual que las normales, pero suele tener algunos avances más, incorporar algunas cosas las últimas novedades o alguna cosa especial para desarrolladores. Entonces vamos a lo que decía hace un poquito, voy a ir directamente sobre la web, a ver si en algún momento algo no se ve bien, si tengo que ampliar tamaño o lo que sea. Me decís cambiar el esquema de color o lo que sea. Vamos a ir a esta web y en primer lugar, como supongo que ya todos sabréis, ya no vamos a entrar en esto, vamos aquí al menú y ahí tenemos las herramientas de desarrollo. Si no, en Windows control mayúsculas y nos abre el panel de las herramientas de desarrollo, creo que en Mac será comando. Podéis tener un montón de esquemas de color, es decir, la apariencia, yo siempre suelo trabajar con un tema oscuro, pero creo que para la presentación suelen ser bastante mejor los claros. Vosotros me decís si lo veis mejor así como está ahora mismo o así que supongo que será mejor, ¿no? Bien, vale. Repito, cualquier cosa que no quede claro o que tenga ayuda es lo que sea, me paráis. Aparte en los navegadores supongo que también sabéis que con el control o el CMD más ampliamos el navegador, es decir, todo el contenido del navegador y con el control menos lo vamos disminuyendo o con control cero lo llevamos al tamaño normal. Esto es del navegador, no de las herramientas, pero ¿por qué os lo digo? Porque si estáis en las herramientas de desarrollo, aquí pasa lo mismito. Veis que ahora estoy ampliando solo las herramientas de desarrollo. Disclaimer, yo trabajo normalmente, bueno, normalmente no, siempre, mi día a día con un ordenador fijo, con dos pantallas grandes y con ratón. Lo digo porque aquí se me va a quedar muy pequeño, se me va a mezclar quizás unas cosas con otras y trabajando con el trackpad tampoco me va a ser tan fácil. Con lo cual, si algo no sale bien, mi ordenador funciona. Ya sabéis el disclaimer. Y en directo seguramente algo habrá que... pero no funcione, bien. Entonces, repito, voy a ir trabajando sobre este esquema e irnoslo mostrando. Vamos a empezar con los elementos que podemos modificar visualmente. Para eso vamos a copiar esto de aquí, control c, nos vamos al navegador y aquí tenemos las herramientas a la izquierda, elementos, red. Un momentito, en este tamaño así se ve suficientemente bien y si lo disminuyo uno más, ¿sí?, desde atrás. No, vale, le vamos a aumentar un poco. Cuanto más se aumente, más difícil es llegar a todas las cosas, mostrar, pues bueno, vamos entonces con este tamaño. Bien, aquí a la izquierda, en esta barra, bueno, esta barra la podéis tener a la izquierda, la podéis tener en la parte superior, todo esto se puede configurar. Yo lo suelo tener siempre a la izquierda, tengo una pantalla ancha y suelo mostrar así. Algunos lo tienen en la parte inferior, lo puede separar otra ventana. Todos estos son opciones de las herramientas de desarrollo que las podéis ver aquí. Si entramos en detalle en cada una de las funciones, yo creo que doce horas no nos llegan para todo. Con lo cual, voy a saltar la mayoría de las cosas. Bien, esto que tenemos aquí arriba, este botoncito, es para seleccionar un elemento y cuando le damos aquí click, me voy directamente a este elemento. Aquí veis que es un H1, aquí abajo tengo CSS y aparte le puedo dar un estilo de elemento. Hace un poco, acabo de copiar algo, pego aquí y como veis ahora le he puesto una imagen de fondo con este tipo de características. Lo que estaba contando inicialmente son los elementos que podemos modificar gráficamente. En este caso, hemos puesto el background image porque si os fijáis si le damos aquí, no tengo que andar cambiando las cifras. Cambio los grados, 200 tan, y aquí cambiamos los colores. Veis que le estoy aplicando una sombra desde un rojo hasta este otro color que vamos aquí. Y evidentemente lo que estoy haciendo es una chapuza, pero para que lo veáis un poco y lo estoy modificando gráficamente sin tener que escribir estos datos. Bien, esto evidentemente puedo venir aquí y cambiarlo 77 grados a 75, a 50, lo que sea. Pero bueno, esto es uno de los que podemos cambiar gráficamente. Seguimos, modificar sombras. Muchas veces queremos aplicar sombras a una caja, texto, a lo que sea. En este caso, vamos a coger una caja, un DIP, y le vamos a destrozar la página de la WordCamp. Pero como lo estamos haciendo en el navegador, no va a quedar nada ahí. Desactivo este elemento. Pego el siguiente y le acabo de aplicar una sombra. Esta sombra con 7 pixels de separación por un lado, 5 determinados colores, etc. Si vamos aquí, como podéis ver, gráficamente, no sé, es mucho más fácil que tener que saber si el primer número es el de la separación, si es el segundo. Si el desenfoque es una parte u otra, aquí lo tenemos totalmente sólido, aquí estamos desenfocándolo un montón, reventado, etc. Si está por fuera, por dentro, el color, el color es un... Esto lo veréis en todas las opciones que tengan color, que nos sale este selector que tiene también bastantes opciones. Bueno, perdonad porque justo ahora dejadme de decir cancelar para que no me aparezca. Ahí está, bien. Y ahora vamos a la relación de contraste. Esto, si estuvisteis en la charla que hubo antes de accesibilidad en el track 1 de Vicent, ahí sí que os explicaba lo de los contrastes, como tiene que ser, yo no voy a entrar en eso, solo contaros un poquitín. Lo que podemos hacer con esta herramienta de color, que es de la que acabamos de hablar ahora mismo, este selector de color, cuando le damos aquí a un color sobre un texto, evidentemente podemos cambiar el color al que queramos. Voy a vernos todos por aquí, esto supongo que todos lo conoceréis, el canal alfa, es decir, la transparencia, darle más o menos, pero aparte también podemos seleccionar el color en varias modalidades. RGB, es adecimal, que es como lo tenemos ahora mismo, HSL, HWB, etc. Tenemos además aquí abajo una serie de colores que son colores predeterminados de la página, con lo cual también podemos seleccionar estos colores, que son colores que ya tenemos definidos en la hoja de estilos de la Workam, pero una cosa que es importante, es la relación de contraste, que aquí veis que está entre 87, como veis aquí, y tenemos un check de correcto, es decir, que cumple la normativa AA, pero no la de AAA, como veis aquí abajo. Si queremos ser totalmente estrictos en esto, no hay suficiente contraste entre el texto y el fondo. Como vemos aquí, gráficamente, tenemos donde ya no somos normativos, ni en AA, ni en AAA, donde somos en uno, pero no en el otro, y donde somos en AMOS. Entonces, con esto, gráficamente, no sé, es mucho más fácil. Si además tenemos una... bueno, las cosas del directo, se me acaba de ir el navegador. Bien, os sigo contando igual mientras abre el navegador. Si tenemos una imagen... esto normalmente no pasa, pero bueno, los directos, es lógico, tienen que pasar. Si además tenemos una imagen, pero no sabemos el color, podemos abrir la imagen en el Photoshop, en el programa que queráis, e ir a analizar el color. Bien, como un segundito, especcionar, a ver si vuelvo a donde estaba. Tenemos una lupita ahí, que esa lupa, lo que nos permite es... a ver, vamos a hacer aquí un color red, y ya está, con esto me llega por ahora. Bien, veis esta lupita, y con esta lupa nos podemos desplazar, si lo hago bien, a cualquier parte de la imagen, y lo que quiero coger es este amarillo. Nos vamos aquí, hacemos clic, y como veis, ya tenemos ahí el amarillo, con el código de sade decimal o cualquiera que cambiamos. Es decir, esta herramienta de colores, bastante versátil en este sentido, y aparte, no sólo para los colores, veis que también nos aparece para las sombras, que aparece para muchas otras herramientas, siempre que tengamos algo de color, nos aparece esta herramienta. Vamos a continuar, a ver si bien, me ha retomado donde estaba, perfecto. Y seguimos con las gráficas, con las herramientas gráficas que nos permiten estos cambios sin tener que escribir nada. Y los modos CSS tenemos el modo flex, y el modo grid, y sí, a cualquier elemento de estos. Bueno, ahora les estoy escribiendo las características, estas las he añadiendo, pero cualquiera que tengáis, evidentemente, se va modificando. Yo para no buscar algo que tenga, por eso los estoy añadiendo. Como veis aquí en flex, tenemos un editor flexbox, y directamente podemos alinear los elementos hacia la izquierda, hacia arriba, en flexgoop, alinear, justificar a la izquierda, arriba, y tenemos un montón de opciones. Y aparte, sí, tenemos varios elementos, cuando marcamos aquí nos muestra el borde de cada una de las partes flex. Sí, seleccionamos siempre con este elemento, y nos vamos aquí. Ahí está, y este huele. Le ponemos flex, y ahí, y así. Y bueno, estamos cambiando las características, que ahora visualmente no las vemos, porque no es algo que estemos modificando gráficamente. Otra cosa que quiero aclarar, todo lo que estamos trabajando aquí, en este caso, a la izquierda, es decir, en las herramientas de desarrollador, es el HTML generado por el navegador. El HTML generado es el que hemos generado, el que se ha generado desde el backend, y el que se ha generado desde el frontend. Porque no es lo mismo todo esto que vemos aquí, que cuando le damos a ver código fuente, si le damos aquí ver código fuente de la página, puede ser distinto este código de el que estamos viendo aquí. Porque puede ser distinto, porque mediante JavaScript, podemos añadir un elemento. Podemos modificar un estilo, hay muchas interacciones, lo que hacemos cuando pasamos aquí y nos genera todo esto, se está generando en el navegador, se está modificando el DOM, se está modificando la apariencia, todo eso es generado, es lo que vemos aquí. Y el código fuente de la página, no siempre es lo mismo. Bueno, más que no siempre es lo mismo, es casi nunca coincide, es diferente, ¿vale? Seguimos, más elementos gráficos, igual que flash, gris. Seguimos, y aquí lo mismo, en gris tenemos todas las opciones para poder modificar, para poder modificar gráficamente. En esto, tanto en flash como en gris, es mucho más potente y Firefox. Si estáis trabajando mucho con flashbox y con gris, Firefox para developers, ese navegador sí que tiene bastantes herramientas bastante más completas, ¿vale? Seguimos. Expandir propiedades resumidas. Bien, las propiedades resumidas, supongo que sabréis lo que es, si no os lo voy a contar muy rápidamente. Y en este caso, lo que le voy a añadir yo, es un margen a la izquierda y a la derecha. Cuando hacemos un margen left, es a la izquierda, cuando hacemos un margen right, es a la derecha y cuando hacemos un margen inline, es izquierda y derecha, igual que en el blog, es arriba y abajo. Bien, en este caso, como le estamos aplicando a los dos, veis que tenemos este desplegable y nos muestra. Bueno, el de la izquierda es incorrecto. La izquierda, en español, en los idiomas árabes, es a la derecha, es decir, donde comienza. Tenemos aquí lo resumida. Si directamente, en vez de margen inline, lo que hubiera hecho es margen, es decir, los cuatro, defino los cuatro, bueno, me lo está sobrescribiendo ahí arriba otra regla, pero aquí tenemos los cuatro. Y si en vez de diez písels pusiera diez, quince, dieciocho, me daría los dos de arriba, el de izquierda, la derecha, etcétera. Estos son propiedades resumidas. Y transiciones. Todo esto es un poco gráficamente. Vamos allá. Le estoy dando una transición de color en un segundo, un tipo de transición y que va a empezar desde que pase uno coma cinco segundos. Es decir, si en JavaScript hiciera cualquier efecto, entraría esta transición a funcionar. Esta transición, cómo se mueve, cómo, qué es lo que hace. Aquí tenemos cada una de las propiedades, resumidas igual que antes, pero como veis en transición, le damos aquí y aquí tenemos la transición. Esta es, esto es lo que efectúa la transición. Y además, si no se me va, ahí está. El ratón, lo que os comentaba, cada vez que le doy se me va. Podemos elegir cualquiera de estos, cambiarlo aquí abajo, en la siguiente anterior, pero ahora se me está yendo cada vez que le doy. Os aseguro que funciona, probablemente. Y aquí también lo podemos modificar directamente la transición, esto y arrastrando esto. Bueno, las cosas del directo. Vale, dejo de intentarlo. Y según la vamos modificando aquí, lo vemos allí arriba. Veremos que acelera muy rápido y después va lento, que va todo lento y rápido, etcétera. Es decir, lo modificamos gráficamente la transición sin tener que sabernos los nombres, los tiempos y cambiar todo esto. Es decir, esto es comodísimo para nuestras transiciones. Bien, estilos y calculado. Cuando nosotros, todos los elementos que tenemos aquí a la derecha en la página, todo lo que estamos viendo, podemos modificarlos. Lo que hemos visto aquí, tenemos este div. Y le puedo modificar cualquiera de estas opciones, activarlas, desactivarlas. Podemos, en este caso, que es lo que tengo aquí, Twitter, Facebook, tal. Lo que quiero hacer es duplicarlo. Le damos aquí duplicar elemento. Y si veis para aquí abajo, ahí está duplicado. Y puedo trabajar sobre el de abajo. Sobre este o sobre este. Sobre este, el tamaño de fuente, en vez de ser 2,6, pues le decimos que son 5 ren. Entonces lo estamos separando muchísimo más, etcétera. Todo esto de los estilos calculados, además, fijaros que ahora me voy aquí arriba, a esta parte, y me voy a este div. No, este div no, que es el modal. Me voy aquí a este artículo. Lo estoy marcando, voy a modificar algo, pero no lo veo, no sé dónde está. O incluso no lo localizo en la página. ¿Dónde está esta parte? Que la tengo localizada en el código, pero no en la página. Y entonces, en el botón derecho, tenemos muchas opciones, y una de ellas es desplazar hasta que esté visible. Le damos aquí, nos cubre todo este h1. Vamos a una parte, perdón, h1. Este gader no estaba cubriendo todo. Lo vamos a ver en este. Desplazar hasta que esté visible. Ahí está. Nos lleva justo a dónde está ese elemento. Con los elementos podemos hacer, con todo el HTML, con el DOM, podemos hacer lo que queramos. Podemos eliminarlo, podemos moverlo, podemos duplicarlo. Y esto podemos eliminarlo. Y esto, que parece una tontería de eliminarlo, cuando tenéis un problema en una página web del tipo de que aparece, por ejemplo, la barra de desplazamiento inferior, es decir, la horizontal. Que no queremos mostrar esa barra, no en la vertical, sí, pero horizontal, no. Y a veces por un padding que le metemos de más, pero no lo damos localizado, un margin, algo de ese tipo. Lo más fácil es ir replegando elementos y ir eliminando. Si elimino todo este div, eliminar el elemento y veo que ha desaparecido ese problema, ya sé que está ahí. Vuelvo a recargar la página y entonces, a lo mejor, en vez de replegar, voy adentro de eso. Esto que a lo mejor no parece de mucha utilidad, en realidad es muy útil para poder buscar problemas en la página web de visualización. Ejecutar en Javascript. Tenemos una consola donde podemos probar todo el Javascript que queramos. Si nos vamos aquí y nos vamos a los ponentes, perdón, a los ponentes no, quería decir a los asistentes, un segundito, vais a ver qué asistentes. Y aquí tenemos una lista de asistentes. ¿Cuánta gente está en... bueno, figura, hay más gente en la huerta. ¿Pero cuántos figura aquí la foto? Podemos contarlos, pero para eso tenemos Javascript y si buscamos el elemento y sabemos cuál es, le podemos decir directamente que nos ejecute algo. Aquí tenemos una consola donde podemos ejecutar todo tipo de comandos. Veis ahí abajo 513. Bien, pues estamos ejecutando todo este Javascript, que le acabo de pegar aquí, y lo que hemos hecho en este caso es buscar el huele, lo buscaríamos allí, hay un huele cubriendo todos estos elementos de la lista, todos estos li, este huele después de seleccionarlo le decimos que seleccione todos los li y después en la constante count le decimos que los cuente. Y simple Javascript. Aquí escribo count y lo que me da es el valor de count, que en este caso es 513. Si, mientras estaba dándose de alta la gente a ejecutar otra vez, tendréis en vez de 513, 520. Ahora ya no, ya no va a cambiar, que ya no hay más asistentes. Con esto que queremos decir, que todo tipo de Javascript que nosotros queramos externo a la página podemos cargarlo aquí directamente o Javascript que ya esté en la página para ir depurando, sin tener que llegar a este. Aparte de eso, tenemos un depurador de Javascript muy, muy completo, hacer debug, pero esto sí que estaríamos también, repito, horas. Eso ya sería bastante más complejo. Seguimos avanzando porque si no me voy a quedar en la mitad. Fuentes. Fuentes y no nos estamos refiriendo en este caso a tipografías, sino a fuentes de la página web. Bien, recargo esta página, voy a recargar para ver qué hay en la página y esto también es muy útil para echar un primer vistazo al WordPress o a cualquier otro sitio web que sea y saber qué es lo que hay en él. Como veis aquí la página madridworkand.rg me está cargando estas dos carpetas con estos elementos. Bien, dentro de la carpeta 2020 2023 VWP content y qué hay en VWP content aquí es donde tenemos los plugins y sabemos que está utilizando el plugin Camp Tips, Camp Tips Invoice Gutenberg, Jetpack lo que veis aquí. Es decir, sabemos que nos carga estos determinados plugins y que se está utilizando el tema 2020. Todo lo que nos carga lo vamos a ver directamente desde aquí. Aparte de eso, también podemos ver aquí abajo todo lo que carga externamente. Es decir, si nos está cargando fuentes Google, scripts de seguimiento de Facebook, de lo que sea. Cuidado con esto, que muchas de las cosas que carga son extensiones vuestras del navegador. Como veis aquí tengo varias extensiones y hay varias cosas de estas como BitGuarding, que es mejéstor de contraseñas, el que utilizo. Si queréis que no nos cargue nada de eso, abrís una pestaña de incógnito, volveis a mirarlo en la pestaña de incógnito y ahí ya nos cargará todos estos scripts externos. Como veis está cogiendo las estadísticas de WordPress, está cargando cosas externas y otra cosa que también es muy útil por ejemplo, aquí veis que tenemos Google Tag Manager ¿no? Desplegamos y todo lo que carga. Vemos que este script de Google Tag Manager si le damos botón derecho y le damos a mostrar en el panel de red aquí es donde vemos todo lo que carga aquí es donde se me hace pequeña la pantalla Podemos ver cada uno de los scripts que nos están cargando y aparte tenemos otra utilidad que es botón derecho y anular contenido. Si anulamos contenido lo que hacemos es que no nos cargue ese script. En este caso le damos 11 SS y podemos bloquear muchos scripts muchos CSS. ¿De qué no sirve esto? Para cuando tenéis problemas de rendimiento en una web Empezáis a bloquear scripts volveis a cargar y veis si la página web os va más lenta o más rápida. Pero es que además estos bloqueos os permiten utilizar caracteres como DIN y entonces podéis bloquear un dominio entero o podéis bloquear todos los scripts que haya en WP content entonces sabéis si el problema es de uno de los plugins que tenéis o no, la lentitud. Todos los scripts que sean externos a vuestra página web, etc. Con todas estas cosas es increíble para poder buscar problemas en vuestra web o en las webs de los clientes más cosas y sigo avanzando. Bloquear solicitudes de red es lo que os acabo de contar tramas con caracteres como DIN Google Tag Manager Barra Asterisco bloqueáis todo lo que venga de Google Tag Manager y también por cierto acordaros de todo lo que bloqueáis todo lo que modificáis de volverlo a dejar como estaba porque después cerráis las herramientas y resulta que vuestra web no carga estáis bloqueando todo el Google Tag Manager y a veces se me acaba de acordar por las condiciones de red. Muchas veces cambiamos las condiciones de red que las vamos a ver ahora mismo y le decimos que vaya muchísimo más lento para probarlo como irían otros dispositivos. Lo dejamos así y resulta que esa web os empiece lentísima siempre es en vuestro ordenador porque lo habéis bloqueado con las herramientas del navegador. Aquí podemos filtrar es decir, cada una de las herramientas que os estoy mostrando aquí tenemos multitud daciones estoy muy por encima contándolas rápidamente porque eso no es totalmente imposible. Atualización forzada esto también es algo que nos ocurre mucho. Tenemos cache, ya sabéis que tenemos cache a muchísimos niveles tenemos cache de base de datos podemos tener cache de PHP opcode, caches en el servidor caches intermedias, caches en el navegador. Bien, sobre todo las cache en el navegador cuando a veces tenemos que recargar sin que cargue sin que nos guarden nada en cache fijaros que cuando tenemos cerradas las herramientas del navegador y aquí le doy a botón derecho no tengo ciones no estáis viendo nada porque no hay tengo cargar o pulsar mayúsculas y darle a cargar para que fuercé la carga en cambio cuando están abiertas las herramientas de desarrollador si le damos al botón derecho veis que tenemos noción que es vaciar cache y realizar actualización forzada esto nos es muy útil cuando hacemos cambios y nos está guardando en la cache del navegador hay otras técnicas para que no lo guarden en la cache del navegador pero a veces lo más útil es forzar a vaciar la cache y realizar esta carga de nuevo entonces siempre que tengamos abiertas herramientas del navegador podemos forzarlo representación bien aquí a la izquierda en todas estas opciones que tenemos vemos cambios rendimiento y fijaros de las opciones que tenemos aquí arriba desplegadas que hay unas 5 o 6 tenemos muchísimas más aquí muchísimas más de momento claro veis pocas pero como veis tenemos todas estas opciones bloqueos de solicitud de red lo que os acabo de mostrar antes de contar antes condiciones de red esto es lo que os acabo de decir y le podemos decir que en vez de limitación que sea como un 3G lento y entonces lo veréis unas condiciones más similares a las de por ejemplo de vuestro usuario aparte de las condiciones de red también podemos cambiar el agente de usuario es decir el navegador aunque yo estoy utilizando Edge puedo estar simulando un agente de usuario de AYOS de cualquier otro navegador perdón de cualquier otro dispositivo y también la velocidad de la CPU ralentizarla ralentizarla un poco mostrar core web vitals bien vamos a representación y aquí tenemos representación bien fijaros que en representación tenemos muchas opciones por ejemplo áreas de desplazamiento del diseño nos mostrará aquí en la página web cosas que se mueven al cambiar bordes de capa etc aquí según nos vamos moviendo y según vamos cambiando tenemos los frames por segundo y la memoria utilizada de la GPU es decir la memoria gráfica y según interactuamos con la página vemos cosas que nos pueden estar cargando muchísimo la página que nos la ralentizan etc aparte de esto tenemos todas estas opciones pero problemas de representación del desplazamiento bueno no hay ninguno nos irían apareciendo aquí desabilitar las fuentes locales emular foco modo oscuro automático con lo cual podemos forzarlo y ver como nos queda nuestra página ya no con el modo oscuro que podemos nosotros definir en CSS para los dos modos sino forzarlo que hay muchos usuarios que lo fuerzan y entonces ver que a lo mejor determinadas partes no se ven correctamente y emulaciones muchas emulaciones que tenemos aquí estadística de representación lo que vamos a ver desactivar ABIFF y WP es otra de las opciones que tenemos ahí supongo que sabéis que ABIFF es un formato nuevo igual que WP de imágenes mucha más compresión y a lo mejor vuestra página la está utilizando por ejemplo WP las imágenes en WP pero qué pasa si el navegador no la soporta le dais ahí que lo desactive y entonces veréis que vuestro navegador le está enviando el JPG enviando otro archivo y funciona perfectamente o que vuestra página se descontrola totalmente y desaparece todo entonces tenemos un problema entonces muchas veces nos conviene probar todas estas opciones como nuestro usuario final con sus condiciones aplicación en la aplicación tenemos las bases de datos locales aquí está aplicación tenemos bases de datos locales tenemos un montón de opciones que podemos sirviendo todo lo que nos guarda en nuestra página web quizá lo más a diario que solemos utilizar son las cookies y directamente aquí nos vamos a esta parte y aquí vemos todas las cookies que carga cualquiera de ellos le damos a la cookie vemos su valor mostramos su valor decodificado o la eliminamos eliminamos la cookie aquí edit eliminar o incluso cambiamos el valor podemos cambiar los valores de las cookies para ver cómo responden otras condiciones perdón o si un usuario nos está modificando todo esto por eso tened en cuenta que determinadas opciones que nos basamos en cookies en javascript tal el usuario siempre lo puede bloquear, lo puede modificar, puede hacer muchas cosas y todo ese tipo de cosas tenemos que comprobar siempre en backend siempre aunque lo hagamos también en frontend comprobar que este campo es texto que este campo es un número de información en backend también repito como veis aquí a la izquierda tenemos como nueve opciones estoy contando una rápidamente porque si no nos salimos de tiempo totalmente sensores bien a ver si me da tiempo a mostrar esto de los sensores y si le damos aquí hay un API de geolocalización que si le damos a probar nos dice lo permitimos y nos dice donde estamos bueno debería de decirlo ahí está bien, estamos aquí la nave justo perfecto pero que pasa si yo estoy trabajando con un cliente que está en estados unidos y que tenemos que localizarlo como que el cliente viene desde california yo no me pudo ir a california puedo utilizar una uvpn si, pero en determinados casos nos interesa más emular todo eso y toda esta emulación la tenemos aquí en sensores a ver si los encuentro rápidamente sensores y en sensores si ahora le doy a berlín y le decimos que nos localice ahí esto no se si lo veis nos aparece que estamos en berlín o una serie de sitios que tenemos aquí abajo pero como veis lugo es donde vivo yo evidentemente no viene por defecto un navegador perdón bien no invalidar, no lugo ahí lugo y ahora probamos y donde estoy el lugo como hacemos esto aparte de modificarlo aquí manualmente a lo que nos diga el usuario tenemos que probar esto desde tal sitio lo modificáis ahí directamente y lo añadís agregar ubicación y ahí al final como veis está lugo donde le he puesto las coordenadas y la localización incluso el idioma para cambiar el navegador vosotros estáis con un navegador en español pero le podéis decir que vuestro navegador que está en inglés si nos vamos aquí por ejemplo a esta página que lo único que haces es cogernos información totalmente de nuestro navegador tenemos ciudad como veis aquí a la izquierda ciudad entre todas estas cosas tenemos por ejemplo la orientación la orientación esto para las páginas web en escritorio no se suele utilizar mucho pero sí en móvil a lo mejor no se interesa saber si el usuario tiene el móvil en vertical lo tiene horizontal tenemos algunas opciones si lo hemos movido lo podemos modificar directamente desde aquí y le decimos que está horizontal derecha y entonces cuando le damos aquí nos dice aquí ahí está 270 grados vertical veis que nos ha cambiado e incluso podemos ir a personalizada y moverlo nosotros como queramos y según lo movemos veis que aquí nos está cambiando esta página es lo mismo que podíais hacer vosotros con javascript estar detectando la orientación y entonces un juego que estáis detectando en html directamente en navegador cómo mueve el usuario el móvil todo eso para probarlo y sin tener que pasarlo al móvil y estar haciendo las pruebas aquí lo podés hacer directamente desde el navegador y emulando todo eso bien volvemos a la work in Madrid muy rápidamente porque si no me equivoco ando de tiempo bastante justo y aquí emulamos dispositivos en este dispositivo con capacidad de respuesta voy modificando al tamaño que quiera pero podemos emular todo tipo de dispositivos como un iphone x un iphone un iphone 6 7 8 en este caso solo le tengo puesto que me muestre el borde lo podemos poner en vertical en horizontal, cambiarlo etc y toda esta lista de dispositivos que tenemos aquí como veis ahí al fondo tenéis editar y podéis poner vuestro dispositivo específico por ejemplo que el cliente os dice que tiene un tamaño de pantalla de 6000 piscels por 6000 por 4000 que mi pantalla no tiene ese tamaño como puedo verlo pues lo puedes ver directamente escribiéndolo aquí con capacidad de respuesta no nos limitamos solo a nuestro tamaño sino que si yo le pongo 5000 piscels por 597 y le doy a enter esta pantalla me está emulando a 5000 piscels evidentemente me tiene que hacer un zoom como veis ahí de un 16% y tenemos una densidad de piscels de 2.0 que podemos cambiar 1 2 3 porque sabéis que la FON tiene una determinada densidad o del dispositivo tino otra entonces podemos emular todos estos dispositivos además de eso tenemos aquí vamos a un tamaño un poquito más más visible tenemos aquí si nos pasamos por encima de todo esto que lo vemos así en azul en amarillo pues son reglas que tenemos en el CSS y como veis en esta regla de un ancho mínimo de 1.025 piscels hacemos click aquí o aquí en cualquiera de ellos y vamos adaptando a esos tamaños para ir viendo cómo nos queda todas estas opciones podéis entrar y que nos aparezcan todo esto es totalmente configurable aquí tenemos ocultar el marco del dispositivo lo que veis antes del iPhone ocultar las consultas multimedia que acabo de enseñar ahora mismo ahí está igual que ocultar tenéis mostrarlas ver las reglas y tal relación de piscels de dispositivo etc. todas estas opciones siempre tenemos configuraciones a medida y si no me equivoco ando de tiempo y 14 es que me quedan 5 minutos si me habían dicho entonces voy de tiempo sobrado creo que me habían dicho 15 minutos menos vale, perfecto lo que estaba apurando muchísimo para cerrar esto bien, modificación CSS vamos allá entonces con un poquito más de calma si tenemos 15 minutos vamos a quitar esta apariencia de mobile y hace un poco estuve haciendo cambios sobre la página web, por ejemplo aquí vamos a decir que sea un background color green que me gustan las cosas así muy cantosas la acabamos de cambiar aquí a un verde puro de todo green gelo, vale, perfecto puede hacer varios cambios que es lo que pasa tan pronto le damos a actualizar adios cambios nos desaparece todo bien todos estos cambios primero tenemos un par de opciones muy interesantes sobre todos los cambios que hagamos aquí vamos otra vez background color vamos a cambiarlo a cualquiera background color y ese mismo y aquí si nos vamos a este otro usuario y le cambiamos el color bien, yo puedo seguir haciendo muchos cambios pero llegará un momento llegará un momento que a lo mejor no sepa todo lo que he cambiado porque he estado haciendo pruebas un rojo puro, perfecto, ahí está en Adriana, rojo puro voy a hacer varios cambios en esta página en la cabecera, en el pide página y llegó un momento que decimos que es lo que he cambiado y ahora el directo me dice que no hay cambios pero aquí me tiene que aparecer los cambios que hacemos bueno, mi ordenador funciona bien lo voy a mirar ahora rápido pero os voy contando todos los cambios que hagáis aparecen aquí eso no quiere decir que queden todos estos cambios se pierden en el momento que atualicemos podemos guardar los cambios y que en siguientes ejecuciones se mantengan esos cambios también os permite modificar todos guardar todos esos cambios que estamos haciendo directamente sobre el inspector hay añadido un cambio bien vamos a ver si ahora me aparece vamos otra vez con Adriana Dominguez si está aquí lo siento por fastidiar la tarjeta, que la estoy poniendo un poco de churro y en vez de 70 pisels a la izquierda de margen le vamos a dar 20 20 pisels y ahora si me aparecen los cambios y si alguna habéis trabajado con GIT o con alguno CSV o algo similar os sonará esta nomenclatura, diríamos, esta apariencia todo lo que están rojos, lo que hemos eliminado todo lo que están verde es lo que hemos añadido entonces veis que he quitado un 70 pisels y le he añadido un 20 pisels ahora si que puedo seguir haciendo cambios y si que los veré aquí voy de nuevo a inspeccionar y aquí en este spam lo que hago es que background le vamos a cambiar el color background color y aquí le vamos a decir que es azul ahí está, fijaros que bien hemos fastidiado la página web perdón, que bien he fastidiado la página web y aquí vemos que exactamente justo sobre el mismo tis fiel le he añadido algo, vemos un más en este caso no he quitado nada o incluso si vamos aquí, mira ahora vamos a coger a Ana y cualquiera de estos elementos tenemos un display block, directamente activo, no estoy añadido nada pero en realidad estoy quitandole eso lo estoy eliminando, bueno pues lo mismito, nos vamos a cambios y ahí lo tenemos lo tenemos, que no me lo muestra bien que como veis esto se me va para arriba se me empieza a descontrolar esto es que el navegador quiere que vaya acabando pero bueno, vamos a forzarle un poquito más a no acabar de momento más cosas que os puedo contar muchísimas, muchísimas cosas sobretodo teniendo el tiempo que me queda que estoy viendo, bien bien cobertura css y javascript utilizado, que es esto la cobertura cuando nosotros hacemos trabajamos en cualquier página web, estamos cargando un montón de css un montón de javascript de plugins del tema de un montón de cosas pero que en realidad se está utilizando solo una pequeña parte de todo de todo ese css de todo ese javascript y eso es la cobertura, es decir la parte que realmente estamos utilizando nos lo dice también el navegador perdón, las herramientas de desarrollo cobertura ahí está bien y lo podemos ver aquí abajo nos está analizando todos y desde esta parte superior veis que tenemos un archivo indes.js que tenemos 807 kilobytes en total y que están sin usarse 666 kilobytes, solo estamos utilizando ese pues 28% tenemos un 82% sin utilizar aquí vemos, 82.5 cuidado lo que no se ha ejecutado, a lo mejor bajamos la página y si utiliza alguna de esas funciones, pero en este momento tenemos todo esto sin ejecutar esto nos es muy útil para analizar también el rendimiento de la página ver todo lo que nos está cargando lo que realmente no hace falta que se cargue, es decir que estamos cargando demasiado que es superfluo y que no nos hace falta rendimiento la mejor herramienta de rendimiento que tenemos o una de las mejores herramientas es el navegador web porque nos permite muchísimas cosas aparte de purar tanto en javascript, como ver las cosas que cargan mucho, lo que carga poco, etc etc por poner otro ejemplo red le damos aquí a actualizar descargo esta página inferior y aquí está repito me llega la pantalla, se me queda muy corta pero ahí vamos, aquí bien como podéis ver aquí, esto de hora es una traducción muy mala, en realidad es el tiempo que tarda a encargar y son 129.000 segundos, podemos ordenarlo y de arriba abajo 10,22 segundos tenemos aquí este executor .js que nos está ralentizando la página, mucho en realidad no es tamaño, pero sí es una función que nos está cargando un montón si vamos a tamaño podemos ver lo que más carga, pues mira el content o a lo mejor tenemos unas imágenes que el usuario ha subido de 4 megas tamaño tiempo de carga o cascada cascada nos es muy útil porque vemos el orden en que carga cada cosa y cuando nos ponemos encima le damos aquí vemos todos los encabezados de dónde viene lo que ha tardado a encargar una vista previa la respuesta quien ha iniciado este archivo y todas las cabeceras que tenemos, que además también podemos modificar aquí tenemos el cross origin que le damos a modificar nos dice que tenemos que seleccionar una carpeta y como tampoco voy a entrar en eso por tiempo, si seleccionamos una carpeta seleccionaría una carpeta en local en mi ordenador aunque le dé no voy a continuar descargo bueno la que quiera y todos los cambios, todas las modificaciones que haga van a quedar sobre esa carpeta en este caso de cabeceras porque claro si modifico cabeceras no me valen de nada de volver a recargar la página para que me la cargue con esas nuevas cabeceras para que me la cargue con esas nuevas cabeceras tiene que guardarlas en nuestro ordenador, en el disco duro aparte de eso los cambios CSS los podemos guardar en el navegador y los cambios JavaScript también podemos trabajar con lo que se llaman los workspace y podemos estar trabajando sobre nuestra página web y ver los cambios en real aunque la página web esté en otro servidor, ver los cambios que hacemos en real sobre el navegador podemos hacer multitud de opciones de este tipo para ver el rendimiento de la página web, la carga, etc os acabo de decir un par de cosas de rendimiento tamaño y tiempo de carga, pero tenemos algo específico para el rendimiento, si le damos a cargar nos vuelva a recargar la página web y nos está analizando creando unos perfiles de todo lo que carga nuestra página web y esto, volvemos a lo de antes, esto es algo completísimo donde podemos ver de todo lo que nos tarda en el repintado lo que nos tarda en el JavaScript y en cada una de las partes y además, esto podemos guardarlo lo guarda como un archivo JSON un tipo de datos estructurados en JavaScript y lo podemos después abrir en cualquier otro navegador podemos importar el JSON o incluso contarle a nuestro usuario que tiene problemas de rendimiento en el suyo un poco, hacerle un vídeo de vete aquí, dale esto, dale esto, dale tal guarda y envíame ese archivo que es esto, guardar perfil y aquí tenemos ese archivo que veis ahí abajo, punto JSON nos lo envía y cuando tenéis vuestro trace JSON, es toda la traza que ha hecho en su navegador le dais aquí a cargar cargar perfil os cargáis otro JSON y evidentemente no hay tiempo pero podríais ver que cargo esto aquí y lo puedo abrir en el Chrome y ver todo que me ha hecho el rendimiento no entramos en esto, completísimo todo lo que puede hacer capturas de en cada milisegundo como queda aquí abajo por tiempos ampliar los tiempos todo esto todo esto con el navegador no se es un poco más complicado ampliar, disminuir la ventana completísimo todo esto del rendimiento podemos analizar cómo rinde nuestra página a un detalle a un nivel de detalle increíble y con esto emular dispositivos lo hemos visto antes esto ya me lo he saltado y la última es Lighthouse Lighthouse lo que nos hace es un análisis de la página web del rendimiento lo que veis aquí, ya no voy a entrar hay una pestaña que es Lighthouse y que al final es lo que os analiza lo que veis en Google lo podéis hacer directamente vuestro navegador mejor siempre abrirle una pestaña de incógnito tenéis un farito donde ahí está Lighthouse podéis mirarlo para móvil o para escritorio le daríamos analizar cargas y nos da los resultados y las recomendaciones y con esto sólo contaros un poquito el origen de esta charla el origen de este taller es del 10 a 11 de noviembre del 2017 fue mi primera work on Work on Santander la primera work on a la que asistí esa work on me llevó nos convenció, nos animó José Luis que veis ahí y que veis aquí, también de espalda con este otro señor que somos los tres que fuimos a la work on que es Wahari, que también tenemos aquí los tres fuimos a esa work on a partir de ahí empezamos a asistir a más work on, a dar charlas etc y José Luis en algún momento enseñándole cosas del navegador me dijo, tenéis que dar una charla sobre eso nunca la di una mi tab que di en lugo pero una mi tab y en esta de Madrid por eso la he querido traer un poco para contaros un poquito lo que en su momento me dejó nada más, simplemente en estos enlaces tenéis totalmente es tenso las herramientas de navegador de cada uno de los tres navegadores principales del Firefox del Chrome y del Edge bueno, los principales, pero si una ayuda muy extensa lo que os podéis pasar días y días viendo todo lo que hay y la asoción esto ha sido un rascar muy por encima nada más gracias a todos