Hace unos meses, un usuario de StackOverflow planteaba una interesante cuestión: ¿qué debería saber un desarrollador para construir un sitio web público? Es decir, ¿cuáles son aquellos aspectos importantes que deben tenerse en cuenta a la hora de crear un site de calidad, desde el punto de vista técnico?
Tras un tiempo de respuestas, ideas y debates, otro usuario ha realizado una recopilación de los aspectos y sugerencias más votadas y los ha publicado en forma de lista categorizada, donde podemos encontrar muy buenas ideas a tener en cuenta en nuestros propios desarrollos, y que me he permitido traducir.
Muchos de los puntos son obvios y seguro que ya los estáis teniendo en cuenta, quizás otros son demasiado exagerados, y seguro que alguno de ellos ni siquiera os los habíais planteado. En cualquier caso el resultado es una relación interesante y muy a tener en cuenta para mejorar nuestros sitios web.
Interfaz y experiencia de usuario
- Ser consciente de que los navegadores implementan los estándares de forma diferente y asegurarse de que el sitio web funciona razonablemente bien en la mayoría de los principales navegadores. Como mínimo, sería necesario probarlo con un navegador que utilice un motor reciente Gecko (Firefox), Webkit (Safari, Chrome y algunos navegadores móviles), las versiones soportadas de Internet Explorer, y Opera.
- Tener en cuenta que el sitio web puede ser visitado utilizando medios distintos a los navegadores habituales, como por ejemplo teléfonos móviles, lectores de pantalla, o motores de búsqueda. Usar estándares de accesibilidad como WAI o Section508.
- Considerar los mecanismos de actualización del sitio web para que estos procesos no afecten a los usuarios una vez que el sistema está en marcha y puedan producirse de forma suave y transparente. Por ejemplo, puede ayudar el mantener entornos de prueba paralelos, el uso de herramientas de control del código fuente, o mecanismos de builds automatizados.
- No mostrar errores directamente al usuario.
- No incluir en las páginas direcciones de correo de usuarios en texto plano, para evitar que sean bombardeados por los spammers.
- Incluir límites razonables de utilización del sitio para evitar malos usos por parte de usuarios o procesos automáticos (como puede ser los virus). Por ejemplo, es razonable que un sistema de correo electrónico gratuito limite el número de mensajes diarios que puede enviar un usuario, aunque el número máximo sea muy alto; otro ejemplo podemos verlo en Google, que muestra un mensaje de error cuando detecta demasiado tráfico hacia sus servidores desde una única dirección IP.
Seguridad
- Conocer la amplia guía de desarrollo OWASP, que cubre la seguridad de sitios web de forma muy completa.
- Conocer el fundamento de los ataques de inyección SQL y cómo prevenirlos.
- Jamás confiar en los datos introducidos por los usuarios.
- Evitar el almacenamiento de contraseñas en texto plano utilizando técnicas criptográficas como hashes y salts.
- No intentes utilizar tu magnífico y elaborado sistema de autenticación; es bastante probable que existan fallos impredecibles de los que sólo te darás cuenta después de haber sido hackeado.
- Usar SSL/HTTPS en las páginas de identificación de usuarios y, en general, en todas aquellas páginas donde sea introducida información sensible, como datos personales o bancarios.
- Evitar el secuestro de sesiones (session hijacking).
- Evitar los ataques XSS (Cross Site Scripting).
- Evitar los ataques XSRF (Cross Site Request Forgeries).
- Mantener tus sistemas actualizados con los últimos parches disponibles.
- Asegurarse de que la información de conexión a la base de datos está almacenada en un lugar lo suficientemente seguro.
- Mantener informado sobre las últimas técnicas de ataque y vulnerabilidades que afecten a la plataforma sobre la que trabajas.
- Conocer el manual The Google Browser Security Handbook.
Rendimiento
- Implementar el cacheado de páginas cuando sea necesario. Comprender y usar apropiadamente los mecanismos de cacheo HTTP.
- Optimizar las imágenes. Por ejemplo, no utilizar una imagen de 20 Kb. como mosaico de fondo.
- Conocer cómo comprimir el contenido de las páginas con gzip.
- Echar un vistazo al sitio Yahoo Exceptional Performance, donde se muestran directrices y buenas prácticas para mejorar el rendimiento de sitios web. Utilizar herramientas como YSlow.
- Utilizar la técnica de CSS Sprites para las pequeñas imágenes (como las que encontramos en las barras de herramientas), con objeto de minimizar el número de peticiones HTTP.
- Los sitios web de alto tráfico deberían considerar el despliegue de componentes en distintos dominios para optimizar la descarga en paralelo de los mismos.
- En general, minimizar el número total de peticiones HTTP necesarias para que el navegador muestre las páginas.
SEO
- Utilizar direcciones URL amigables para los buscadores. Por ejemplo, utilizar direcciones del tipo "ejemplo.com/paginas/titulo-del-articulo" en lugar de "ejemplo.com/index.php?page=45".
- No utilizar enlaces que digan "pulse aquí". Estarías creando sitio web poco optimizado para buscadores, a la vez que complicando las cosas para los usuarios que utilizan lectores de pantalla.
- Crear un mapa del sitio en XML (sitemap).
- Utilizar
<link rel="canonical" ... />
Cuando tengas múltiples URLs que apunten a un mismo contenido. - Utilizar las herramientas disponibles en www.google.com/webmasters.
- Instalar Google Analytics desde el principio.
- Conocer cómo funcionan los rastreadores de los buscadores y el archivo robots.txt.
- No maquetar con tablas; Google generalmente valorará positivamente el marcado HTML semántico y la maquetación con CSS.
- Si tienes contenido no textual en la página, utiliza en el sitemap las extensiones de Google para audio, video, etc. Hay alguna información sobre ello en la respuesta de Tim Farley.
Tecnología
- Entender el protocolo HTTP; conocer cosas como GET, POST, sesiones, cookies, y saber lo que significa e implica su naturaleza "sin estado" (stateless).
- Escribir el código (X)HTML y CSS conformes a las especificaciones de la W3C, y asegurarse de que validan. El objetivo es evitar las particularidades de los navegadores, a la vez que se facilita enormemente la navegación utilizando browsers no estándar como lectores de pantalla o dispositivos móviles.
- Comprender cómo se procesa el código javascript en los navegadores. Mover los scripts al final de las páginas.
- Comprender cómo funciona el sandbox de javascript, especialmente si pretendes utilizar iframes.
- Asegurarse de que javascript puede ser deshabilitado sin que la página deje de funcionar. AJAX debe ser una extensión, y no la base sobre la que se construya un sitio. Aunque la mayoría de usuarios lo tengan activado, recordar que existen muchos y muy populares dispositivos en los que no funcionará correctamente.
- Entender la diferencia entre las reflexiones 301 y 302 (esto también es un aspecto SEO).
- Aprender tanto como sea posible sobre la plataforma en la que será desplegado el sitio web en producción.
- Considerar el uso de un reseteador de CSS.
- Considerar herramientas como jQuery, que oculta muchas de las particularidades de los distintos navegadores utilizando javascript para la manipulación del DOM.
Corrección de errores
- Entender que pasarás el 20% del tiempo codificando y el 80% restante manteniéndolo, por tanto codifica apropiadamente.
- Configurar un buen sistema de notificación y gestión de errores.
- Habilitar sistemas para que los usuarios puedan contactar contigo y trasladarte críticas y sugerencias.
- Documentar cómo funciona la aplicación para facilitar el futuro soporte y mantenimiento del sistema.
- Poner a funcionar el sistema primero en Firefox y después en Internet Explorer.
- Hacer copias de seguridad frecuentes.
Publicado en: Variable not found.
Publicado por José M. Aguilar a las 11:56 p. m.
Etiquetas: buenas prácticas, desarrollo, recomendaciones, web
8 Comentarios:
IM PRE SIO NAN TE!
Buena lista, la verdad. Aunque como dices hay algunos puntos algo exagerados, es una referencia interesante.
Fer.
XSS? XSRF? Joder, y yo que pensaba que hacia buenas webs XDDD
Prefiero seguir siendo un inconsciente :_DD
Buena lista para tenerla de referencia ;)
Aunque normalmente se escapa no está mal tener en cuenta los sistemas operativos más comunes: linux, osx y windows y las diferentes versiones en los dispositívos móviles ya que puede haber diferencias en el comportamiento (no necesariamente problemas).
Saludos
Ahora que lo comentáis, lo de las direcciones semánticas; podría alguien explicarme cómo se consigue en vez de usar el típico index.php?id=seccion1. Con una referencia me basta. ¡Gracias!
He dado con la respuesta: http://www.maestrosdelweb.com/editorial/urlamigable/, para quien le pueda interesar.
Hola, gracias a todos por comentar!
Y @Polromeu, gracias por la referencia!
Hola José que gran artículo, la verdad es una excelente recopilación de buenas prácticas para el desarrollo web, yo agregaría también evitar el abuso del uso de las variables de sessión ya que en muchos sitios se abusa demasiado de esto cargando el servidor con muchos objetos en session, además usar siempre en ambiente de producción las versiones optimizadas o min, de los archivos javascript.
saludos!
Enviar un nuevo comentario