10 errores típicos en el desarrollo web

Hoy toca repasar algunos de los errores 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 – No utilizar correctamente HTML

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 que el lenguaje permite muchas alternativas para obtener un resultado visual similar, no todas las alternativas son adecuadas.

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 tropocientos 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! A pesar incluso de los esfuerzos por parte de estos editores por tratar de paliar este problema (la mayoría incluyen un botón específico llamado “Pegar desde Word”), el código que finalmente resulta es de una calidad pésima. 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.

Conclusión

Antes de que alguien lo pregunte… ¿Por qué sólo 10? Pues simplemente por contar en algún momento y no alargarme más. Hay muchos más errores de los que podríamos hablar. De hecho, si queréis que comentemos más, o que añadamos alguno en particular a esta entrada no tenéis más que pedírnoslo.

Espero no haber sido muy duro con aquellos que os hayáis sentido identificados en algún punto. La idea es plantar la semilla del cambio en vuestra cabeza. No es complicado, ni costoso en tiempo de aplicar, y el cambio en el resultado es abismal.