¿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

Conferencia: Ingenieros pensando como artistas / artistas pensando como ingenieros

Terminando el Ciclo de conferencias de Diseño de Interacción de ORT, se presenta Fabián Barros con esta propuesta. Los datos a continuación, tomados de la “gacetilla” de ORT:

  • Disertante:  Fabián Barros
  • Fecha:  30 de junio de 2010, 18:30 horas
  • Lugar:  Auditorio de Universidad ORT Uruguay, Cuareim 1451

Descripción

El disertante hará un repaso de las diferentes corrientes y tendencias de las artes digitales, sus características y aplicaciones. La conferencia está especialmente pensada para estudiantes, futuros ingenieros, diseñadores, comunicadores y artistas.

Breve Curriculum del expositor

Fabián Barros es Comunicador, diseñador y artista digital uruguayo. Es Licenciado en Comunicación por la Universidad del Uruguay y Máster en Artes Digitales por la Universidad Pompeu Fabra de Barcelona. Residió en Uruguay, Argentina, Italia y España. Su trabajo ha sido expuesto en salas y festivales como Caixafórum , ArtFutura y DIBA Festival de Barcelona, VAD Festival de Girona, Centro Cultural de España en Montevideo Dorkbot Montevideo y Museo Nacional de Artes Visuales del Uruguay. Actualmente reside en Montevideo donde combina la actividad publicitaria como Director General Creativo de Grey Uruguay con su vocación artística.

  • Inscripciones:  Acceso libre, sin inscripción previa.
  • Organiza:  Escuela de Ingeniería ORT (Cuareim 1451)

Aprovechando el tráfico por día

Una vez, mirando  las estadísticas de uno de los sitios que manejo -practica sumamente adictiva- noté claramente un patrón en el tráfico. Sobre todo en los pageviews. Para una semana normal, el patrón se podía ver claramente. Las visitas se disparaban y luego iban cayendo de a poco, se disparaban nuevamente y volvían a caer lentamente, y así.

Stats

A todo esto, me pregunté si realmente existía tal patrón, o solamente se debía a una coincidencia. No encontré mucha información sobre estudios que analicen el tráfico por día. Pero encontré un artículo intersante, de alguien que había tenido más suerte y exponía los resultados de un estudio realizado por OneStat.

El estudio concluye que los días con más tráfico son los lunes y los martes, seguidos por el día miércoles, y los días más tranquilos son el sábado y domingo.

Gráfica: Tráfico por día
Gráfica: Tráfico por día

En mi caso, la gráfica es fiel testigo de la realidad. Los días lunes y martes son en general los días de mayor tráfico, y los fines de semana -sobre todo los sábados- es cuando el tráfico disminuye más pronunciadamente.

Pero no tiene porqué ser así en todos los escenarios. Quizá un sitio de entretenimiento tenga un patrón diferente, donde se vea más marcada la presencia de lectores los fines de semana.

La utilidad obvia de esto es aprovechar los días de mayor tráfico para publicar artículos, para así aumentar la cantidad de potenciales lectores.

Sea cual sea la tematica de nuestro blog, es bueno tener este detalle en cuenta a la hora de publicar, sacandole provecho para cada caso particular.

Generador de SHA1 y MD5

Esta es una aplicacioncita vieja que hice hace un tiempo cuando estaba aprendiendo a usar jQuery. Es simplemente una herramienta a mano para generar hashes.

No tiene ciencia, es algo simple, rápido y fácil de recordar (yo no me voy a olvidar, pero ign.com.uy/hash no es tan dificil). Lo podés consultar en esa dirección o siguiendo el link: Hash Generator

Hash Generator

Notas

  • Los strings calculados no se almacenan en ningún lado. De todas maneras, no es muy sabio andar jugando con tus contraseñas en cualquier sitio.
  • Los scripts utilizados para el cálculo de los hashes se puede encontrar en esta página.
  • Les recuerdo que para el almacenamiento de contraseñas no se recomienda utilizar SHA1 ni MD5.

Shoutt: Mensaje personal rotativo en MSN

Disclaimer: Shoutt no funciona en Windows 7 y actualmente la descarga está fuera de servicio por la mudanza del blog. “Estamos trabajando para usted.”

Desde la versión 7.0  MSN viene con una función para “Mostrar lo que estoy escuchando“. Como ya todos deben saber, lo que hace esta función es poner al lado de tu nick el nombre y artista de la canción que estás escuchando, en un formato tipo link más llamativo que el clásico mensaje personal.

Pero más alla de mostrar lo que estoy escuchando, se le puede dar un uso un poco más útil. Mucha gente pone anuncios personales, de su empresa, etc. en sus mensajes personales. Si se pudiera utilizar la misma función, los mensajes resultarían más llamativos.

Luego de investigar un poco encontré un código para actualizar el campo musical del usuario, que si mal no recuerdo, lo saqué de aquí. Teniendo eso se puede construír una variedad de utilidades que utilicen este campo:  cuentas regresivas, marquesinas, avisos rotativos, publicidad, etc.

Después de ver como lo usaban algunos para promocionar sus productos, pensé que sería útil hacer una aplicación que permita mostrar varios avisos y que los vaya rotando.

Cómo usarlo

En MSN, seleccionamos la opción para mostrar lo que estamos escuchando y abrimos Shoutt. En la ventana principal (y única) tenemos un área de texto donde se pueden especificar varios mensajes, separados por un salto de línea.

Luego, elegimos el intervalo de tiempo que van a rotar. Es recomendable setearlo en 10 ó mas por el delay que puede existir entre nosotros y nuestros contactos. De todas maneras, el mínimo es 5 segundos entre cada mensaje. También se puede especificar un prefijo para no tener que copiar y pegar el mismo texto en cada línea.

Detalles

Shoutt está bajo una licencia GPL. Está construído en VS 2008, framework .NET 2.0,  C#. En las próximas líneas les dejo el link para descargar el ejecutable y el código fuente.

Descarga

[download id=”1,2″]

Esta es la primer versión de este programita. Se aceptan sugerencias y comentarios.

¡Disfrútenlo!

Shoutt