Contratación de aplicaciones web (I): Rendimiento y diseño

A la hora de elaborar pliegos para contratar desarrollos de aplicaciones web muchas cuestiones se repiten. En las últimas semanas he dedicado un tiempo a revisar las claúsulas comunes para ponerlas al día. Las comparto por si alguien le sirven de referencia.

Rendimiento

Considero que la rapidez de carga es un componente fundamental de la satisfacción del usuario final. Si una página tarda más de uno o dos segundos en cargar, un porcentaje importante de tus usuarios se irán a otra. Además, con el aumento de la navegación desde dispositivos móviles muchos visitantes utilizan hardware poco potente para acceder a la web, lo que le da aún más importancia a la optimización de la aplicación.

A la hora de controlar el trabajo realizado por un proveedor es muy útil establecer baremos objetivos para valorar el cumplimiento. Por ello, en esta claúsula cito las pautas de desarrollo que deben seguirse y a continuación especifico la puntuación mínima que debe obtenerse en una herramienta accesible por la empresa licitante:

pagespeed-inap

Claúsula

El desarrollo y despliegue de la aplicación deberá seguir las buenas prácticas para conseguir el mejor rendimiento posible. Como referencia se utilizarán las buenas prácticas que recomienda Google ( https://developers.google.com/speed/docs/insights/rules ):

  • Evitar los redireccionamientos a páginas de destino.
  • Realizar el mínimo número de peticiones HTTP necesarias.
  • Habilitar compresión.
  • Optimizar el tiempo de respuesta del servidor.
  • Especificar caché de navegador.
  • Minificar recursos.
  • Optimizar imágenes.
  • Optimizar la entrega de CSS.
  • Priorizar el contenido visible.
  • Quitar el JavaScript que bloquea la visualización de contenido.
  • Usar scripts asíncronos.
  • Evitar los plugins.
  • Configurar ventana gráfica (viewport).
  • Adaptar el contenido a la ventana gráfica.
  • Aplicar el tamaño adecuado a los botones táctiles.
  • Utilizar tamaños de fuente que se puedan leer.

Para validar el cumplimiento de este requisito, el ORGANISMO_CONTRATANTE utilizará la herramienta de análisis Google Pagespeed ( http://developers.google.com/speed/pagespeed/insights/?url=URL_DE_LA_APLICACION), debiendo obtenerse al menos 85 puntos sobre 100 en las interfaces de escritorio y dispositivo móvil.

Además, se evitará el uso de CDNs, sirviendo todos los recursos desde el servidor web de la aplicación.

Todo incumplimiento de alguna de las buenas prácticas referenciadas deberá ser justificado por el licitante y aprobado por el ORGANISMO_CONTRATANTE.

Seguramente os haya llamado la atención que no queramos servir los recursos típicos desde CDNs, pero en mi experiencia muchos Ministerios están bloqueando el acceso a estos recursos, por lo que si mi aplicación sirve, por ejemplo, la librería de Bootstrap desde el CDN de Google es posible que los usuarios del Ministerio X no accedan correctamente a mi aplicación. Es una pena no beneficiarse de que muchos usuarios seguramente tendrán ese recurso ya cacheado en su navegador, pero creo que no vale la pena correr el riesgo.

Diseño responsive

Para garantizar que la aplicación web se vea correctamente en tabletas y smartphones es fundamental utilizar un diseño “responsive“, de modo que los elementos de la aplicación se recoloquen automáticamente en función de la resolución de la pantalla. Para ello hemos decidido usar el framework Bootstrap, ya que goza de una gran implantación en todas las tecnologías que utilizamos (de hecho, en .NET MVC es el framework que viene por defecto para maquetar).

En este caso la validación del trabajo del licitante no es tan sencilla, ya que no conozco ninguna herramienta que compruebe automáticamente que todos los elementos utilizan las clases de Bootstrap. Por ello, no hay más remedio que hacer una validación manual, si bien podemos ayudarnos de herramientas como Responsinator.

En cuanto a los navegadores soportados, he seleccionado los más utilizados en España en escritorio y dispositivos móviles:

Cuota de mercado en España

Desgraciadamente en mi organismo un porcentaje importante de las visitas viene de versiones antiguas de Internet Explorer, así que los desarrolladores se ven obligados a introducir código específico para IE8/9.

Claúsula

La aplicación utilizará un diseño “responsive”, adaptándose automáticamente al tipo de dispositivo que utilice el usuario. Es de obligado empleo el framework de software libre Bootstrap ( http://getbootstrap.com/ ) y la disposición “grid”, de modo que los elementos de la aplicación se recoloquen automáticamente al reducir la resolución de la pantalla. La propuesta del licitante deberá incluir bocetos o “mock ups” con la disposición de los elementos de cada pantalla en cada dispositivo (escritorio, tablet o smartphone).

Para validar el cumplimiento de este requisito, el ORGANISMO_CONTRATANTE inspeccionará el código HTML de la interfaz de la aplicación para verificar que se utilizan las clases de bootstrap ( .col-lg, .col-md, .col-sm, .col-xs, etc.). No deberán encontrarse elementos superpuestos o descolocados. También se utilizarán las siguientes herramientas de validación:

http://www.responsinator.com/
http://mattkersley.com/responsive/

Navegadores soportados

La aplicación dará soporte a los siguientes navegadores:

Ordenadores:

  • Google Chrome última versión.
  • Internet explorer: versión 8 en adelante, inclusive.
  • Mozilla Firefox ultima versión.

Tabletas y Smartphones:

  • Google Chrome ultima versión (Android e iOS).
  • Safari última versión (iOS).

No obstante, el ORGANISMO_CONTRATANTE podrá autorizar que determinadas versiones no implementen todas las funcionalidades de la aplicación, cuando lo contrario sea demasiado complejo técnicamente. En este caso, el licitante deberá especificar la funcionalidad concreta, la versión del navegador y justificar técnicamente la solicitud de incumplimiento.

Si tenéis alguna sugerencia son más que bienvenidas. En la próxima entrada pondré la claúsula de seguridad y gestión del proyecto.

Publicado en proyectos Etiquetado con: , , ,

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*