Errores de Programación I

Este es el primero de una serie de artículos sobre aquellos errores más comunes que  nos hemos encontrado en GotSpots cuando se nos ha pedido mejorar o actualizar algún software. Cuando se desea realizar un proyecto hay que tener en cuenta evitar malas prácticas que  pueden generar en un futuro mucho trabajo y quebraderos de cabeza.

imgcode

1. No usar llamadas asíncronas

Cuando en una página web se desea mostrar algún dato nuevo de una base de datos, no es buena idea recargar la página cada vez que lo hagamos. Esto provoca un consumo excesivo de recursos tanto en la máquina del cliente como en el servidor, y lo peor de todo, el usuario sufre una mala experiencia viendo como cada vez que realiza una consulta todos los elementos se vuelven a cargar.

El uso de llamadas asíncronas a la base de datos (o donde sea que se guarde lo que queremos refrescar) nos permite obtener la información y actualizar sólo el elemento de la web deseado, sin tener que recargar el resto.

Os pongo un ejemplo para que nos entendamos:

Un usuario accede a una web de una empresa que vende muebles y va a un apartado que muestra un listado de todos los productos. Hay un filtro que permite seleccionar que desea en concreto (sillas, mesas, armarios,etc), y decide ver los armarios.

Incorrecto

Al elegir su opción, el proceso erróneo desarrollado sería: recargar la página, ejecutar al principio de esta un código Php que realizara una consulta Sql a la base de datos sobre cuántos armarios tiene la empresa y cuando se obtuviera la información, mostrarla recargando el Html, los Css de estilo, el JavaScript,etc que ya estaban previamente cargados.

Hay un sobre coste de recursos y cómo el usuario tenga una conexión a Internet lenta o un ordenador muy viejo, no hará muchas más búsquedas antes de aburrirse de esperar y se marchará.

Correcto

¿Cual sería una forma correcta? Pues realizando una llamada asíncrona, por ejemplo, mediante Ajax. Cuando el usuario selecciona los armarios, se realiza una llamada mediante Ajax a la función Php que consulta y devuelve la información a una función de JavaScript que recarga sólo el listado de la web. La experiencia de usuario es buena y se utilizan sólo los recursos necesarios.

 

2. Estilo embebido en el Html

En muchas ocasiones se puede encontrar el estilo de una página insertado en la misma, o incluso peor, dentro de las etiquetas de html.

Separar los ficheros Html de los de Css y el uso de las opciones ‘id’ y ‘class’ para asociar elementos con su estilo, permite tener un código limpio y ordenado, lo cual a la larga hace ganar mucho tiempo.

Si además, el estilo se repite en diferentes páginas, se obtienen dos ventajas muy importantes.

  • Para realizar cualquier tipo de modificación en el estilo de la página, no se pierde tiempo buscando donde está en cada fichero y sólo hay que modificarlo una vez. En una ocasión fuimos contratados para modificar el estilo de un proyecto bastante grande con multitud de archivos con lineas y lineas de elementos de Html con el estilo incrustado y os aseguro que es un verdadero infierno.
  • Al cargar una página, el archivo Css se guarda en cache, lo cual hace que si es llamado por otras páginas que lo utilicen no sea necesario solicitarlo de nuevo al servidor, ahorrando solicitudes al servidor mejorando la carga de las páginas y por ende su SEO.

Ejemplo estilo insertado entre etiquetas html

Error

<html>
  <style>
    (aqui el estilo que se usa)
  </style>
</html>

Forma Correcta

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="estilo.css"/>
  </head>
</html>

Ejemplo estilo dentro de las etiquetas de html

Error

<div style="(aqui el estilo que se usa)"> … </div>

Forma Correcta

<div class="nombre_clase_estilo"> … </div>

 

Y hasta aquí por hoy. Pulsa aquí para leer la segunda entrega.

Un comentario

  1. Pingback: Errores de programación II - GotBlog

Deja un comentario