Artículo actualizado con fecha 16 de Septiembre de 2024
Hoy toca repasar algunos de los errores web más típicos y habituales que nos encontramos en el desarrollo web. La lista no pretende ser exhaustiva, pero sí una buena muestra de los más significativos.
1 – Errores HTML; no utilizar correctamente el código
Aunque pueda parecer una obviedad, es más habitual de lo que podría parecer encontrarse con sitios web que no utilizan adecuadamente el lenguaje HTML. A pesar de que el lenguaje permite muchas alternativas para obtener un resultado visual similar, no todas las alternativas son adecuadas. De ahí muchos de los errores comunes en html.
Así por ejemplo, si vamos a escribir una página acerca de las bondades de la nueva Thermomix (por ejemplo) podríamos hacerlo de la siguiente forma:
<p><font size=24>Nueva Thermomix</font></p>
<p>La nueva versión del popular robot de cocina incorpora multitud de novedades…</p>
O bien, de esta otra forma:
<h1>Nueva Thermomix</h1>
<p>La nueva versión del popular robot de cocina incorpora multitud de novedades…</p>
A pesar de que el resultado visual sea muy similar, y que ambos códigos son perfectamente válidos y por tanto, cualquier navegador es capaz de procesarlo y visualizarlo, el primer código es TERRIBLE!
El código HTML debe limitarse a definir la estructura del contenido sin pararse a definir el aspecto visual del mismo. De forma que viendo las etiquetas utilizadas sepamos de un vistazo qué parte es importante, qué parte no tanto, qué parte será un menú (la nueva etiqueta <nav>), etc.
Hay que aprovechar todas las etiquetas de las que disponemos, conocer cada una de ellas y utilizarlas en la forma para la que están diseñadas. La diferencia entre un buen código y un mal código (aparte de provocarme fuertes dolores en la retina) será la diferencia entre una página bien posicionada y otra mal posicionada.
2 – Incrustar CSS dentro del HTML
Siguiendo un poco con las “buenas formas” a la hora de hacer páginas, pasemos a otro error típico: mezclar código CSS con el código HTML.
Nuevamente, es algo que por definición se permite. Y que puede llegar a ser útil (aunque debería evitarse) en algunos momentos del proceso de desarrollo de sitios web. Pero una web en producción debería tener un código limpio y organizado. Con ficheros HTML por un lado y ficheros CSS por otro. Totalmente SEPARADOS.
3 – Mezclar código Javascript por doquier
Igual que con el CSS, el Javascript tampoco debería mezclarse entre las etiquetas HTML. Nuevamente es algo permitido, pero algo que… es terrible para mis ojos. Siento un fuerte y profundo dolor al verlo.
Cada cosa debe estar en su sitio. Podéis llamarme maniático si queréis 🙂
El código Javascript, como ya comenté en el post acerca de optimización, debe incluirse al final del todo, para que el renderizado de la web pueda comenzar cuanto antes. Es en ese momento cuando debemos incluir todos los ficheros adicionales con el código Javascript que necesitemos (idealmente además deberían combinarse en uno solo, para reducir el número de peticiones… pero eso ya es otro tema).
4 – Utilizar fotografías pesadas
Tengo una supercámara, que hace unas fotos magníficas y maravillosas de tropecientos megapíxeles. Pongamos esas fotos en nuestra web, tal cual, para que se vean bien…
Imagino que eso será lo que algunos pensarán… ¡¡NOOOOO!! ¡¡ERROR!! Las cámaras de fotografía generan ficheros enormes que son excelentes para sacar copias impresas de nuestras fotos, pero para nada son adecuadas para utilizar en una página web. ¿De qué me sirve que la imagen mida 4000 píxeles de ancho cuando en la página la utilizo en un banner que sólo mide 450px de ancho? Pues como bien podéis sospechar… para estorbar y ralentizar la carga de la página. ¡Optimizad las imágenes!
5 – Utilizar fuentes TTF de tu PC
Otro error típico es utilizar una de esas fuentes tan chulas y maravillosas que hemos encontrado e instalado en nuestro ordenador de casa. ¿Por qué? Pues, justo por eso, porque las hemos instalado en el ordenador de CASA. Y no las va a tener prácticamente nadie. Podrá ser una fuente muy bonita, pero si el 99% del público no la va a tener disponible ¿de qué sirve?
En otro post os contaremos más detalles acerca de las webfonts. Que son la alternativa en el caso que las fuentes estándar se nos queden cortas.
6 – Flash
¿Por qué todavía hay webs hechas con Flash? Una tecnología completamente obsoleta, que requiere que instalemos plugins adicionales para poder ver sus contenidos (y que esos plugins suelen ser los causantes de muchos bloqueos de nuestros dispositivos…)
No se me ocurre ninguna (buena) razón para utilizarlo. Así que, por favor, ¡no lo utilicéis!
7 – Música de fondo
A pesar que alguien pueda pensar que un usuario va a deleitarse con una web con música…
No hay nada más fastidioso que abrir un sitio web y que comience una melodía a sonar. ¿De dónde ha salido eso? ¿Qué pestaña ha sido? ¡Ah mira! ¡es esta! ¡la encontré! ¡CERRADA!
Y da igual que la página sea la más bonita, práctica y maravillosa del mundo, sólo por eso, perderemos MUCHAS visitas. Así que tratad de evitarlo.
8 – Utilizar imágenes para conseguir efectos que CSS permite
Todavía a estas altura de vida, encontramos gente que utiliza imágenes de apoyo para añadir sombras a unas cajas, o para poner botones en una web.
Con CSS3 disponemos de herramientas muy potentes y más que suficientes para generar todos los efectos que se nos puedan ocurrir. El código resultante siempre va a ser mucho más limpio y rápido. ¡Exprimid el CSS! ¡Se le puede sacar mucho jugo!
9 – Mezclar mootools y jquery y todo lo que se presente
Porque a veces, las cosas no pueden ser blancas y negras a la vez. No nos empeñemos.
Existen multitud de bibliotecas Javascript que nos facilitan y añaden funcionalidad a nuestras páginas web. La gran mayoría de ellas están construidas sobre alguno de los Frameworks más habituales como JQuery, Zepto, Dojo o Mootools. No es nada recomendable mezclar estos frameworks (a pesar que algunos lo permiten) pues suelen tener incompatibilidades entre ellos y nos van a generar más problemas que beneficios. Una vez optemos por uno, conviene ceñirse a él y tratar de buscar que los componentes que necesitemos estén construidos sobre el mismo.
10 – Utilizar editores tipo Word
También podríamos titular este punto como el “peligro de los editores WYSIWYG”. Word es un excelente y magnífico procesador de textos, que nos permite hacer documentos con auténticas virguerías… pero NO SIRVE PARA HACER WEBS, ni partes de ellas.
Es muy habitual copiar y pegar de un Word a algún programa como frontpage, dreamweaver o directamente sobre el editor WYSIWYG del gestor de contenidos que estemos utilizando (WordPress, Joomla, etc.). Nuevamente, el código que nos genera este proceso puede ser válido pero si le echamos un ojo… ¿lo adivináis? ¡os van a doler, y mucho!
El lenguage HTML es MUY MUY sencillo de aprender, de verdad que sí. Por lo que, cualquier que quiera meter contenidos, no es tan dramático ni tan complicado hacerlo de forma correcta. Pero si aún así no nos vemos capaces, tratemos de utilizar el propio editor WYSIWIG, redactando ahí mismo los textos (o copiando y pegando desde un editor de texto plano como el Bloc de Notas, UltraEdit, Notepad++, SublimeText, etc.) y utilizando la barra de botones que nos proporciona la herramienta para aplicar el formato deseado.
Como encontrar errores en una página web
A la hora de detectar errores en una página web, existen varias opciones, en función del tipo de error que queramos detectar.
Errores en Rendimiento y Tiempos de Carga
Son aquellos errores o posibles mejoras que tienen que ver con los Core Web Vitals, las métricas fundamentales de rendimiento que maneja Google para evaluar una web.
Para esto, quizá las herramientas más interesantes sean:
- Google Search Console
- Google PageSpeed Insighits
Errores en la generación de código
En ocasiones los errores se encuentran en la propia sintaxis del código de la web. Para detectar este tipo de errores, hay numerosos editores de código que señalan dichos errores en el propio código. Un ejemplo de esto puede ser el editor Sublime Text:
Al mostrar el error de forma más visual, es más fácil detectarlo y corregirlo.
Hay otro tipo de herramientas, como Sonarqube, que sirven expresamente para analizar la calidad, limpieza y seguridad del código.
Usabilidad y Experiencia de Usuario
Detectar errores en la usabilidad y experiencia de usuario es más complicado, ya que tiene más que ver con dificultades que pueda encontrarse el usuario a la hora de realizar ciertas acciones en la web (como una compra o rellenar un formulario), o simplemente navegar por la web.
A la hora de saber si es necesario realizar ajustes en ciertos elementos relacionados con la usabilidad y la experiencia de usuario, hay varias opciones:
- a) La propia realización de esas acciones (ventas, formularios, etc…) Si se produce un descenso brusco, puede ser conveniente realizar un análisis de usabilidad o experiencia de usuario.
- b) Realizar los llamados Test A/B. Se pruebas que realizan ciertas herramientas, y que se hacen mostrando a los diferentes usuarios versiones de la web en las que se cambian elementos que se quieren testar, como carritos de la compra, menús de navegación, etc…
Por otro lado, en el caso de usabilidad, existen una serie de métodos de inspección, entre los que se pueden enumerar los siguientes:
Evaluación heurística: Un grupo reducido de evaluadores analiza la interfaz para comprobar si cumple con los principios establecidos de usabilidad.
Recorrido cognitivo: Llamado así porque surge de análisis cognitivos, en los que el experto simula la ejecución de un conjunto de tareas como lo haría un usuario típico.
Análisis de acciones: Este método consiste en un análisis cuantitativo de las acciones, con el objetivo de estimar el tiempo necesario para completar tareas específicas.
Revisión de guías y reglas: Se emplean diversas guías de calidad que aseguran que los principios de usabilidad se tengan en cuenta durante el proceso de diseño.
Además, el uso de estas herramientas y análisis requiere de un conocimiento avanzado, y será necesario recurrir a un experto en usabilidad y experiencia de usuario tanto para realizar los análisis como para diseñar los cambios y optimizaciones.
(No hay valoraciones todavía)
Cargando...