En la entrada que hoy te traigo, abordaré algunos temas relacionados con las siglas W3C. Sí, estás en lo correcto, hablaremos sobre la validación web, y por supuesto también, de la compatibilidad con navegadores.
Si estás empezando en el mundo del desarrollo web, hay algo que no puedes ignorar: la validación web. Lo sé, no es el tema más apasionante del mundo (no creo que nadie se levante por la mañana pensando «¡hoy voy a validar mi código!»), pero si quieres que tu página web funcione sin problemas en todos los navegadores, esto es algo que debes dominar. Así que, vamos a desglosarlo de manera sencilla, con ejemplos prácticos y sin tecnicismos innecesarios.
Índice de contenidos
La validación web es un proceso que asegura que tu código HTML y CSS cumpla con los estándares establecidos y funcione correctamente en los diferentes navegadores web, sobre todo en los más utilizados. Piensa en ello como si fuera una revisión técnica para tu coche: si todo está en orden, tu sitio web funcionará sin problemas. Si no, podrías llegar a encontrarte con errores inesperados, diseños rotos o, peor aún, usuarios frustrados porque no pueden navegar correctamente por tu página web.
Pero, ¿por qué es tan importante? Pues sencillamente porque no todos los navegadores interpretan el código de la misma manera. Lo que funciona perfectamente en Chrome podría no verse igual en Firefox o Safari. Aquí es donde entra en juego el W3C: el árbitro del mundo del desarrollo web.
El W3C (World Wide Web Consortium) es una organización internacional compuesta por empresas como Google, Apple, Mozilla y Microsoft. Su misión es definir los estándares web, es decir, las reglas que todos los navegadores deberían seguir para interpretar el código de manera uniforme.
Imagina el W3C como si fueran «el consejo de sabios de internet». Este consorcio es quién decide qué etiquetas y propiedades se convierten en oficiales y cuáles quedan en el olvido. Sin ellos, cada navegador haría la guerra por su lado, e interpretaría el código de una forma u otra. Si el W3C no existiera, el desarrollo web sería un caos total, como es lógico. Imaginate por ejemplo, que un mismo sitio web se viera completamente diferente si lo visualizas primero en Google Chrome y luego en Firefox, o incluso peor, que el mismo sitio web que has visto en un navegador, luego lo visites en Microsoft Edge o Brave y ahí ni siquiera se muestre o que no funcione de forma correcta… Lo dicho, un caos absoluto y un motivo para que algunos desarrolladores web dimitan y ejerzan de cualquier cosa que no tenga relación con los ordenadores o internet.
Ahora que ya sabes que es el W3C, vamos a abordar cómo es el proceso de validación para que una propiedad de HTML o CSS se convierta en «oficial». El proceso que debe pasar es complejo y riguroso. Aquí te lo explico paso a paso:
float, que lleva años siendo parte del lenguaje CSS.Ahora que ya sabes qué es la validación web y por qué es importante, vamos a lo práctico. ¿Cómo puedes asegurarte de que tu código cumple con los estándares y es compatible con los navegadores? Aquí tienes algunas herramientas y métodos:
El W3C Validator es una herramienta online que te permite validar tu código HTML y CSS. Simplemente subes tu archivo o pegas tu código, y la herramienta te indicará si hay errores o advertencias. Es como tener un profesor que te corrige los deberes 24/7.
El sitio web del W3C Validator es el siguiente: W3C Validator
Can I use es un sitio web imprescindible para cualquier desarrollador web. Te va a permitir verificar la compatibilidad de una propiedad en diferentes navegadores y versiones. Por ejemplo, si quieres usar una propiedad nueva como grid, puedes consultar si es compatible con Internet Explorer (spoiler: no lo es).
Para acceder a Can I Use debes acceder a la siguiente url: Can I Use
MDN Web Docs, es un sitio web mantenido por Mozilla, y es una de las mejores fuentes de documentación para desarrolladores web. Aquí podrás encontrar explicaciones detalladas sobre estándares web, ejemplos de código y guías sobre prácticamente cualquier tema relacionado con HTML, CSS y JavaScript. En definitiva, un imprescindible para cualquier desarrollador web:
A través del siguiente enlace podrás visitar la web de MDN Web Docs
Si usas Visual Studio Code como editor de código, hay extensiones que pueden ayudarte a validar tu código directamente en el editor. Una de las más populares es W3C Validation, que te alerta sobre errores y advertencias mientras escribes.
Si lo deseas, podrás consultar en el siguiente enlace otras muchas extensiones útiles para Visual Studio Code.
El objetivo principal de validar tu código web es el de evitar errores, como es lógico. La validación te ayudará a garantizar que tu código cumpla con los estándares del consorcio W3C, lo que no solo mejora la compatibilidad y accesibilidad, sino que te evitará dolores de cabeza futuros. Sin embargo, aunque la validación web es un proceso relativamente sencillo, no siempre corrige todos los errores. Es aquí donde entra en juego la experiencia y el aprendizaje continuo.
Si estás empezando en el mundo del desarrollo web, te será de gran utilidad conocer los típicos y más recurrentes errores que los desarrolladores menos experimentados suelen cometer. Estos errores pueden variar desde olvidos simples, como no cerrar correctamente las etiquetas HTML, hasta problemas más complejos relacionados con la optimización del rendimiento. Vamos a ver algunos de los más comunes errores cometidos por desarrolladores web menos experimentados:
<div> sin su correspondiente </div> puede causar problemas en el diseño. Es muy común que una etiqueta mal cerrada ocasione que el navegador web interprete el código de forma errónea y destroce la maquetación visual, duplique elementos, u otros errores. <div> para todo no es una buena práctica. En su lugar, utiliza etiquetas semánticas como <header>, <main>, <section> y <footer>. Esto va a mejorar el entendimiento de tu código para los desarrolladores y también, por supuesto, para Google. Este último punto, además, beneficiará el posicionamiento orgánico (SEO) de tu sitio web. En este punto, has comprobado cómo la validación web no es solo una buena práctica; es una necesidad, al menos si quieres que tu sitio web funcione correctamente en todos los navegadores. Aunque puede parecer un proceso tedioso, las herramientas y recursos disponibles hoy en día hacen que sea más fácil que nunca.
Por último, ten en cuenta que el que una propiedad sea «recomendada» por la W3C, no siempre significa que todos los navegadores la soporten de inmediato. Siempre hay un proceso o tiempo de adaptación de los navegadores a las nuevas implementaciones. Por ello, revisa siempre la compatibilidad de la propiedad antes de usarla en tu proyecto.
Espero que este artículo te haya sido de utilidad, y si crees que a alguien más podría servirle, ¡no dudes en reenviárselo!
¡Hasta la próxima!
Si estás aquí seguramente ha llegado a tus oídos que el Kit Digital está agotado.… Leer más
En esta segunda parte de crear tu primera app, veremos como funcionan la navegación, widgets,… Leer más
La accesibilidad web es clave para llegar a todos los usuarios, independientemente de sus capacidades.… Leer más
En este artículo aprenderás a cómo quitar el fondo de una imagen en Adobe Illustrator… Leer más
El SEO local es una de las estrategias más efectivas para que los negocios atraigan… Leer más
Si no lo has implementado ya en tu estrategia de marketing online, llegas tarde. Pero… Leer más