490 | Qué es el DOM y cómo usarlo para personalizar y mejorar tu WordPress

En el episodio 490 de WordPress semanal te cuento qué es el DOM, cómo visualizarlo, ejemplos prácticos de uso en WordPress y su relación con el rendimiento y la accesibilidad. Vamos allá. Hola, hola, soy Gonzalo Navarro y Bienvenidos al episodio 490 de WordPress Semanal, el podcast en el que aprendes a crear y gestionar tus propias webs con WordPress en profundidad. Y hoy hablamos del DOM, que puede parecer técnico, pero es una de las herramientas más útiles para entender cómo funciona tu web en WordPress. Es básicamente una representación en forma de árbol del contenido que se está mostrando en el navegador en ese momento. Pero gracias a él, gracias al DOM, podemos inspeccionar, podemos personalizar y mejorar nuestra web con mucho control. Y también te permite descubrir qué tecnologías y plugins utilizan otras páginas, ya sea de la competencia o simplemente que te gusten. Así que quédate por aquí porque vamos a ver un montón de ejemplos prácticos sobre cómo aprovechar todo esto para que mejores y personalices tu web. Pero antes, como siempre, novedades. ¿Qué está pasando en Gonzalo Navarro es esta semana? Pues tenemos nuevo vídeo de la zona Código y es una animación por CSS que ya había cubierto en otros vídeos, pero que en este caso hacemos que aparezca en función del scroll y es el fade in. Esto simplemente quiere decir aparecer. Y aquí te enseño a lograr que en tu web aparezcan elementos como que están un poquito difuminados y conforme haces scroll se van viendo por completo. Además, lo vemos. Lo que hice fue instalar una plantilla bastante chula, muy visual, para que vieras cómo este efecto le puede dar un toque de moderno, atractivo. Y simplemente pegando el CSS que te dejo y añadiendo una clase a ese elemento, pues lo tienes. Recuerda que en la zona código, que tienes más de 430 vídeos, puedes lograr cosas como esta sin tener ni idea de código. Simplemente copias, pegas y lo tienes. Te dejo el enlace. Las notas del episodio, ya sabes, en Gonzalonabarro es 490, que es el número de este episodio. Tienes todo el esquema del programa y además los enlaces. Vas a encontrar enlaces que además te van a permitir aplicar muchísimas de las cosas de las que vamos a hablar en este episodio. Así que tenlo a mano y si no, en tu aplicación de podcast, pues seguro que las notas también puedes verlos. Venga, una vez vistas las novedades, vámonos ahora con el plugin de la semana que se llama Find My Blogs. Este plugin lo descubrí hace poquito y está muy chulo porque puedes auditar dónde y cuántas veces usas cada bloque de Gutenberg para detectar redundancias, para limpiar maquetaciones, para reemplazar bloques que sean muy pesados. Por ejemplo, yo tenía un bloque para crear un índice de contenidos y lo quería sustituir y entonces yo sabía que en las entradas lo tenía en todos o prácticamente en todos, pero también recordaba que lo había puesto en algunas páginas y con este plugin pude detectar rápidamente en cuáles. Pero vamos, es muy útil para rediseños, cuando quieres quitar un bloque y poner otro y además soporta el full site editing, no simplemente los bloques dentro del contenido, sino que también en plantillas y demás te va a hacer la búsqueda. El plugin tiene buen rendimiento, está activo en unas 4000 webs con WordPress, así que échale un vistazo y también detecta bloques añadidos por otros plugins, no solo los del core de WordPress, sino también otros. Venga, pues ahora sí, vámonos con el tema central del episodio, que es el DOM y cómo usarlo para personalizar y mejorar tu web con WordPress. Y comenzamos precisamente por eso, por definir qué es esto del DOM y por qué te debe importar, porque suena un poco técnico pero realmente es importante conocerlo. DOM son las siglas de Document Object Model y no es otra cosa que la representación en forma de árbol de una página web. Digamos que visualmente todo el mundo siempre vamos a ver un DOM. Cuando accedes a cualquier página lo que estás viendo es el DOM renderizado, es decir, transformado para que se vea visualmente bien. Cuando vas a cualquier URL de Internet eso lo estás viendo, pero tú puedes inspeccionarlo por dentro y ver esa representación en forma de árbol, en formato HTML básicamente. Y nos importa conocerlo porque WordPress, cada tema, cada plugin, cada bloque, acaba generando un HTML que va a formar parte del DOM. Y si nosotros podemos acceder a él, que ahora te explicaré cómo, nos da muchísima información y nos permite hacer modificaciones, descubrir aspectos importantes, mejorar o arreglar partes de nuestra web. Os voy a dejar la referencia de la explicación del DOM de la web de MDN de Mozilla, que es un sitio donde explican muy bien todo este tipo de cosas que tienen que ver con el uso de código por si queréis ampliar información. Pero vamos, la explicación sencilla es esa y ahora con los ejemplos y cómo verlo y demás lo vas a entender mucho mejor. Entonces vámonos a la segunda parte. ¿Cómo podemos visualizar el DOM desde nuestra web? Con WordPress es muy fácil, simplemente te vas a la parte frontal de tu web, a la página de inicio, por ejemplo, haces botón derecho sobre cualquier lugar y le das a Inspeccionar o inspeccionar elemento. Lo puedes hacer desde Chrome, desde Firefox o desde cualquier navegador, incluso Safari por ejemplo. Y esto te va a abrir ya sea en una nueva ventana o te va a partir tu ventana en 2 y en 1 lado vas a ver la web normal y en otro lado vas a ver ese DOM, ese árbol con el HTML y otros elementos de tu web. Por ejemplo, imagínate que quieres inspeccionar una zona concreta, la parte del Hero, la parte primera que sale en tu web con tu llamada a la acción y demás, o de otra web, pues le das a Inspeccionar elemento y ahí puedes ver su estructura. Esto es un div que a su vez está en otros dos div, esto pueden ser dos columnas seguramente. Aquí veo que hay un elemento de imagen y puedes ir inspeccionándolo, ya sea que lo entiendas o no lo entiendas, pero lo vas viendo, vas viendo su estructura interna. Y esto ya digo, lo puedes hacer en tu web, pero también sirve para descubrir qué usan otras webs, podrías ver qué librerías de JavaScript están usando, qué frameworks, qué CSS utilizan, o incluso si tú sabes que es WordPress podrías llegar a descubrir si utilizan Elementor, DIVI, porque al final dejan unas referencias muy claras. Y luego te quería hablar también de la diferencia entre código fuente y el dominio, porque cuando tú haces botón derecho en la parte frontal de una página, también le puedes dar a una parte que se llama ver código fuente y que es diferente de inspeccionar elemento. Y la diferencia es muy sencilla. El código fuente es el HTML original enviado por el servidor, sin embargo el DOM es la versión renderizada y viva que genera el navegador después de que se ejecuten los scripts y que se apliquen los estilos. Es decir, cuando tú le das a inspeccionar no vas a ver solo el HTML, sino que también vas a ver código que se ha ejecutado después, porque con lenguajes como el JavaScript nosotros podemos cuando se haga clic en este elemento, aplícale esto y esto se hace una vez se ha renderizado ese código, se ha ejecutado. Así que de forma muy llana, el código fuente es simplemente el HTML original y el DOM es ese HTML vivo donde se han hecho cambios, se han aplicado estilos. Bueno, dejamos un poco la parte técnica y de explicación y vamos a ver ejemplos prácticos y cómo nos puede ayudar conocer todo esto del DOM y de inspeccionar los elementos de nuestra web. Primer ejemplo práctico, pues personalizar el CSS, si tú quieres empezar a hacer modificaciones en el CSS de tu web, aunque sea copiando y pegando o sin tampoco muchas nociones, necesitas localizar ciertas partes de tu web y para esto vas a inspeccionar cualquier elemento de tu web en la parte frontal para poder ver qué estilos tienes o ver si tiene alguna clase de CSS específica, de modo que tú ya sabes que puedes modificar esa clase si es que quieres cambiar los estilos de algún elemento. Esto en audio es un poco más complejo, pero te dejo un vídeo sobre cómo editar CSS en WordPress donde cubrimos todo esto desde el principio de forma muy sencilla. Si quieres ver el vídeo vete a las notas del episodio, ve a esta parte donde te hablo de ejemplos prácticos y ahí vas a tener un enlace justo donde te hablo de personalizar con CSS. Más ejemplos o casos prácticos. Puedes detectar errores, por ejemplo, hay veces que no se carga bien algún plugin, por ejemplo imagínate que usas algo de un pop up o lo que sea que aparece en pantalla de repente algo cuando le das un botón y no está funcionando, pues esto te permite inspeccionar, irte a esa zona y ver qué está pasando, o ves en otra web algo así, un pop up muy chulo, pues también lo puedes hacer, puedes inspeccionar ese elemento y leyendo un poco su estructura pues hacerte una idea, vale, esto tiene toda la pinta de que es este plugin, porque esta clase tiene un nombre de ese plugin o incluso lo copias, lo pones en Google y seguramente te aparezca el plugin que es. Si eres un usuario un poquito más avanzado, pues también esto te permite inspeccionar esto y conocer el DOM, pues añadir atributos o comportamientos de JavaScript directamente al DOM. Si te quieres adentrar en esto del JavaScript, te dejo un vídeo sobre cómo insertar JavaScript en WordPress y otro ejemplo práctico, lo que te comentaba antes, analizar otras webs. Puedes inspeccionar el DOM y detectar si usan Gutenberg, si usan Elementor, si usan woocommerce, lo que sea. De hecho, te dejo un vídeo específico de cómo inspeccionar plugins, themes y servicios que utilizan otras webs. Vamos a hablar ahora del DOM y su relación con el rendimiento. ¿Por qué se habla muchas veces de DOM y rendimiento? Bueno, hay muchísimos plugins que inflan el DOM con demasiados elementos o con código innecesario, y como te imaginarás, esto es un problema. Si tienes un DOM limpio, es decir, hay menos elementos en ese árbol, en esa estructura de la página que está mostrando tu web, pues lógicamente tu web va a ser más rápida porque se va a renderizar, se va a mostrar antes. Y si la pasas por un inspector de velocidad o que mida el rendimiento web, pues vas a ver mejores resultados que si tienes, por ejemplo, un constructor visual que genera muchísimo en el DOM. Los constructores que son más complejos que Gutenberg, como Elementor, como Divi, estos te van a generar muchísimos más elementos en ese árbol, en ese DOM. ¿Que puedes optimizarlo y puedes hacer que la web cargue más rápida de todas formas? Sí, pero simplemente debes ser consciente de ello. De hecho, solo tienes que irte a una web que tenga Elementor, inspecciona el DOM y vete a otra que no lo tenga que utilice, por ejemplo, constructor nativo y vas a ver la diferencia. En las notas del episodio te voy a dejar algunas claves para mejorar el rendimiento en WordPress, mejorar el DOM, por si quieres echarle un vistazo. Ya he hablado en muchas ocasiones de cómo mejorar la velocidad, tienes un curso de velocidad en WordPress y tampoco me quiero desviar mucho del tema, pero bueno, te lo dejo, ya digo, en las notas del episodio, en la parte 4, donde hablo de DOM y rendimiento. Vamos a hablar ahora del DOM y la accesibilidad. ¿Por qué tienen relación? Sencillamente tienen relación porque el orden y la semántica del DOM afectan a los lectores de pantalla. Si hay personas que tienen problemas de visión, utilizarán lectores de pantalla, un programita que le va leyendo lo que hay en la pantalla, pero no le lee como nosotros vemos la parte visual, sino que lee la parte del DOM, lee su estructura. Entonces, como nosotros no vamos a escribir de forma pura el código de nuestra web, tenemos que elegir buenos themes, buenos plugins, buenos constructores que tengan en cuenta la accesibilidad. Esto lo vas a ver, si alguien lo tiene en cuenta, no te preocupes que te lo van a decir. Como cuando dicen theme optimizado para el SEO, pues lo mismo, si es un Thing optimizado para la accesibilidad te lo van a destacar porque lleva su trabajo hacer las cosas bien. También te voy a dejar una serie de buenas prácticas en relación al DOM y la accesibilidad en las notas del episodio en este punto 5 donde hablo del DOM y la accesibilidad. Pero es básicamente que se mantenga una buena estructura a nivel de HTML, que no haya elementos ocultos ni mal estructurados que puedan confundir a a los lectores de pantalla, que se incluyan atributos alt en las imágenes y otros detalles. Ahora te voy a hablar de algunas herramientas que tienen que ver con la inspección o la auditoría de la accesibilidad de una web para que puedas mejorarlo si lo necesitas. Y precisamente vamos con ello, vamos con herramientas útiles que nos pueden ayudar con todo esto de inspeccionar el DOM, investigar cosas, mejorar nuestra web. Y comenzamos con lo más importante que son las devtools de de Chrome o Firefox. Básicamente esto es lo que se te abre cuando tú haces botón derecho y le das a inspeccionar, porque no solo se te abre el DOM, es decir, no solo se te abre esa estructura de HTML con elementos renderizados de la URL que estés inspeccionando, sino que además tienes más herramientas para ver los archivos, para ver posibles fallos de carga, para ver la velocidad de carga. De hecho tengo un curso completo de cómo utilizar el inspector de Chrome y sus devtools de forma práctica para principiantes y nada técnico. Por ejemplo, puedes descubrir qué cookies usa tu web desde el propio DevTools, puedes medir la velocidad de carga con la parte de Lighthouse, puedes editar el CSS directamente ahí para ver cómo queda y luego si va bien se lo aplicas a tu web. En fin, para mí es algo indispensable que al menos sepas lo básico de este inspector. Más herramientas útiles. Tienes WAV que es una web o una extensión que te da datos sobre la accesibilidad de tu web y te dice pues aquí vas bien, aquí vas mal, esto lo puedes corregir, Esto es muy útil sobre todo si haces webs para clientes. Y luego hay plugins, WordPress como por ejemplo Query Monitor que te permite ver todo lo que se está cargando en tu web, que hace que cargue más lento, que se carga más rápido, incluso posibles fallos. Es un plugin muy completo, yo tengo un taller gratuito donde te enseño a utilizarlo para medir el rendimiento de carga de tus plugins. También podrás ver cómo saber si un plugin es rápido o es lento antes de instalarlo, pero en muchos casos ya los vas a tener instalados y vas a querer medirlos desde ahí. Así que te dejo el enlace y es un vídeo sacado directamente del curso de velocidad en WordPress. Así que si ya eres miembro simplemente inicia sesión y lo ves, y si no te puedes registrar de forma gratuita para ver esa clase suelta donde entre otras cosas cubrimos el uso de este plugin Query Monitor. Sí, venga y vámonos con una conclusión rápida y con acciones para que puedas practicar. Ya te dije en el episodio anterior que siempre que pueda y tenga sentido te voy a dar algunas directrices para que puedas poner en práctica lo que te cuento en este episodio. ¿Qué te recomiendo yo para que empieces a familiarizarte con todo esto? Bueno, revisa cualquier página de tu WordPress, empieza a inspeccionar un bloque o un elemento concreto y mira su estructura en el DOM. Una vez te hayas familiarizado con eso, prueba a aplicar un pequeño cambio con CSS, pues por ejemplo cambia el color o haz un display none, que eso es lo que hace es ocultar un elemento y vas a ver cómo lo que escribes ahí tiene efecto directo en la parte visual de la página. Esto es simplemente a modo de pruebas, después tú recargas la página y todo eso desaparece, pero viene muy bien para que te familiarices y ver cómo puedes ir haciendo este tipo de cosas. Una vez lo hayas hecho con tu web, vete a otra, vete a webs que te gusten e inspecciónalas y mira a ver si consigues descubrir, vale, esta veo que pone aquí Elementor, no sé qué, vale, puede que utilice Elementor o veo aquí que pone Woo, pues seguramente esté utilizando WooCommerce o no ves nada relacionado con WordPress, pues vale, a lo mejor es una tienda online, seguramente utilice Shopify y por ahí puedes ir investigando. Y ya que estás aquí, te recomiendo que desde esas herramientas que te van a aparecer cuando tú le des a inspeccionar para ver el dominio, tendrás otras posibilidades como por ejemplo medir el rendimiento de carga de una web o incluso ver unas notas sobre la accesibilidad, que también se puede hacer desde las herramientas del navegador. Si empiezas a hacer esto, irás entendiendo mucho mejor lo que pasa en el DOM y tendrás más control sobre tu web, porque estoy seguro que te animará a que empieces a aplicar pequeños cambios, aunque solo sean un par de líneas de CSS. Fantástico. Pues hasta aquí el episodio. Recuerda que si quieres revisar cualquier cosa, ir a cualquiera de los enlaces que he comentado, tienes todo bien ordenadito y accesible en GonzaloNabarro es 490. Nada más por este episodio, nos seguimos escuchando. Adiós.