July 2, 2010

¿Que debe saber un desarrollador antes de construir un sitio público?

Vi esta pregunta en StackOverflow, la cual tiene una respuesta bastante completa y me pareció que valía la pena traducirla. Se aceptan aportes.

Interfaz y experiencia de usuario

  • Ten en cuenta que los navegadores implementan los estándarees de manera inconsistente y asegúrate de que tu sitio funciona razonablemente bien en aquellos más importantes. Como mínimo deberías testear con alguno que utilice el motor Gecko (Firefox), Webkit (Safari, Chrome), algún navegador movil, IE y Opera.
  • Ten en cuenta que algunas personas podrían utilizar tu sitio desde celulares, lectores de pantalla y motores de búsqueda. Algunas guías de accebilidad: WAI, Section508; desarrollo para moviles: MobiForge.
  • Staging: Aprende como actualizar una aplicación sin afectar a tus usuarios.
  • No despliegues mensajes de error poco amigables directamente al usuario.
  • No muestres direcciones de correo electrónico de tus usuarios en textro plano.
  • Incluye límites razonables dentro del sitio – También pertenece a Seguridad.
  • Aprende como aplicar una  mejora progresiva.
  • Siempre haz un redirect luego de un POST.
  • No olvides tener en cuenta la accesibilidad. Siempre es buena idea considerarlo y en algunas circunstancias hasta es un requisito legal. WAI-ARIA es un buen referente en esta área.

Seguridad

  • Es un documento extenso, pero el OWASP development guide cubre la seguridad de un sitio web de pies a cabeza.
  • Conoce lo que es una SQL injection y como prevenirlas.
  • Nunca confíes en el input de usuario (cookies también son input).
  • Almacena un hash+salt de las contraseñas de usuarios, jamás en texto plano.
  • No trates de inventar tu propio sistema de autenticación, es algo muy suceptible a errores en aspectos sutiles  e inestables, que no te vas a dar cuenta hasta después de haber sido hackeado.
  • Conoce las reglas para procesamiento de tarjetas de crédito.
  • Utiliza SSL/HTTPS para el login y para páginas donde información sensible es manipulada.
  • Conoce como evitar session hijacking, cross site scripting (XSS) y cross site request forgeries (XSRF).
  • Mantiene tu sistema actualizado.
  • Asegúrate de que los datos de conexión a tu base de datos estén seguros.
  • Mantente informado de las últimas técnicas de ataque y vulnerabilidades que afectan a tu plataforma.
  • Lee el The Google Browser Security Handbook

Performance

  • Utiliza cacheado si es necesario, entiende y utiliza cacheado HTTP correctamente.
  • Optimiza tus imágenes. No utilices una imagen de 20KB para un fondo con repetición.
  • Aprende como utilizar gzip/deflate para comprimir el contenido.
  • Combina varias hojas de estilo o scripts para reducir el número de conexiones del navegador y mejorar la habilidad de gzip para comprimir duplicados entre archivos.
  • Echa un vistazo al excelente sitio Yahoo Exceptional Performance, contiene mucho material para mejorar la performance del front-end y su herramienta YSlow.
  • Google page speed es otra herramienta para el análisis del rendimiento. Ambos requieren Firebug.
  • Utiliza CSS Image Sprites  para agrupar múltiples imágenes pequeñas para minimizar requests HTTP.
  • Sitios muy concurridos deberían considerar dividir el contenido entre dominios. Específicamente:
  • Contenido estático (imágenes, CSS, javascript, etc.): deberían ser almacenados en un dominio separado, que no utilice cookies. Una buena opción es utilizar un CDN (Content Delivery Network).
  • Minimizar el número de requests HTTP.
  • Utilizar Google Closure Compiler para Javascript y otras herramientas de compresión de scripts.

SEO (Optimización para motores de búsqueda)

  • Utilizar “URLs amigables”, es decir, utilizar sitio.com/paginas/45-titulo-articulo en vez de sitio.com/index.php?pagina=45.
  • No utilices links con texto “click aquí”. Estás malgastando una oportunidad de optimización y dificulta las cosas a la gente con lectores de pantalla.
  • Ten un Mapa del sitio XML (Sitemap).
  • Utiliza <link rel="canonical" ... /> cuando tienes múltiples URLs que apuntan al mismo contenido.
  • Utiliza Google Webmaster Tools y Yahoo Site Explorer.
  • Instala Google Analytics u otra herramienta de análisis como Piwik.
  • Conoce como funcionan los archivos robots.txt y los motores de búsqueda.
  • Redirecciona requests a www.sitio.com a sitio.com (o al revés, según prefieras) para prevenir la pérdida de PageRank entre los dos sitios.
  • Ten en cuenta que existen spiders que no se comportan como es esperado.
  • Si tienes contenido multimedia, busca información sobre las extensiones que soporta Google Sitemaps.

Tecnología

  • Comprende como funciona el protocolo HTTP; deberías saber cosas como GET, POST, sesiones, cookies y el significado de “stateless”.
  • Escribe tu XHTML/HTML y CSS en concordancia con las especificaciones de la W3C y asegúrate de que validen. El objetivo es evitar los modos “quirks” de los navegadores y facilitar el trabajo con navegadores no estándar como lectores de pantalla y dispositivos móviles.
  • Comprende como Javascript es procesado por el navegador.
  • Comprende como Javascript, hojas de estilo y otros recursos son cargados en tus páginas y considera el impacto que esto tiene en la performance percibida. Es apropiado en la medida que se pueda, mover los scripts hacie el final de las páginas.
  • Comprende como funciona el sandbox de Javascript, sobre todo si tu intención es utilizar iframes.
  • Ten en cuenta que Javascript puede ser deshabilitado por el usuario, por lo tanto Ajax es una extensión, no una línea base. Aún cuando muchos usuarios lo tienen habilitado, recuerda que NoScript es cada vez más popular, los dispositivos moviles pueden no funcionar como esperas y Google no correrá la mayor parte del Javascript cuando indexe tus páginas.
  • Aprende la diferencia entre una redirección 301 y 302 (esto también pertenece a la categoría SEO.)
  • Aprende todo lo que puedas de la plataforma de deployment.
  • Considera la utilización de una hoja de estilos para resetear los estilos del navegador (Reset Stylesheet).
  • Considera utilizar frameworks Javascript (jQuery, MooTools, Prototype u otros), que permitan abstraerse de muchas de las diferencias entre navegadores, entre otras ventajas.

Eliminación de defectos

  • Comprende que vas a invertir 20% de tu tiempo programando y 80% realizando mantenimiento, programa acorde a esto.
  • Configura un buen sistema de reporte de errores.
  • Ten un sistema por el cual se pueda enviarte sugerencias y críticas.
  • Documenta tu aplicación para futuros colaboradores y personas que quizá realicen el mantenimiento.
  • Realiza respaldos frecuentes (y asegúrate de que son funcionales.)
  • No olvides las pruebas unitarias. Frameworks como Selenium pueden ser de ayuda.

Incluí los links más relevantes para no recargarlo. La entrada original contiene algunos más, y muchos otros aportes secundarios o complementarios de otros usuarios.

Links