Archivo para la categoría ‘Desarrollo Web

Los usuarios visualizan de manera rápida y superficial los sitios web que visitan, este tipo de comportamiento a menudo provoca el abandono inmediato de la página en caso de que no se adecue o no le parezca relevante al usuario.

Además de ello tenemos el problema de los tiempos de espera, la percepción de los tiempos de espera según datos empíricos previos (Miller, 1968):

  • 0,1 segundos, el usuario tiene la percepción de respuesta inmediata.
  • 1 segundo, a partir de este punto el usuario empieza a no percibir la respuesta como instantánea.
  • 10 segundos es el límite de mantenimiento de la atención por parte del usuario.

Internet un medio de resultados inmediatos

Como se puede ver Internet es un medio en la que los usuarios quieren resultados inmediatos, cada vez los usuarios tienen menos intención de aprender, leer o esforzarse para obtener los resultados deseados, si a esto le sumamos el gran abánico de alternativas que se ofrecen para cada tipo de necesidad en Internet tenemos un sistema en el que se puede conseguir lo que desees de manera inmediata, por lo tanto necesitamos si desarrollas o administras un sitio web necesitas ofrecer la información de una manera inmediata y disponer de un diseño usable que sea capaz de dar la sensación al usuario de que “este es el sitio que buscabas”, de lo contrario seguramente la visita del usuario durara breves segundos y buscará una alternativa para satisfacer sus necesidades.

Un interesante estudio indica que los usuarios parecen ser más tolerantes con el tiempo de descarga de una web si están cumplimentando un cuestionario (Integrating User-Perceived Quality into Web Server Design). Los usuarios parecen comprender que se requieren ciertos procesos complejos de almacenamiento de la información y no son tan impacientes.

La importancia de los tiempos de espera

Es interesante también que a menudo los usuarios parecen ser más tolerantes con el tiempo de espera en un sitio web cuando están realizando procesos aparentemente complejos, como puede ser el envio de un formulario, los usuarios parece que comprenden que hay determinados procesos complejos de almacenamiento y no se comportan de manera impaciente, del mismo modo el entorno de la espera también puede llegar a afectar a la percepción que el usuario tiene ante tiempos de espera cortos o largos.

Los usuarios pueden llegar a percibir que la duración del tiempo de espera es mayor o menor de lo que en realidad es, por ejemplo ante un tiempo de espera elevado si ofrecemos información al usuario sobre lo que esta ocurriendo durante el tiempo de espera (barra de progreso ó información sobre el proceso) podemos llegar a conseguir que realmente crea que ha esperado menos tiempo del que realmente ha estado esperando, del mismo modo un entorno que le genere impaciencia o ansiedad hará que piense que ha estado esperando demasiado tiempo.

¿Cuál es el tiempo de carga adecuado para una página web?

Depende obviamente del servicio que ofreces, yo pienso que el tiempo de espera máximo para un usuario nuevo que no haya visitado previamente el sitio web el tiempo de espera máximo tolerable es de 2 segundos, si por el contrario lo ha visitado anteriormente seguramente podemos extender ese tiempo hasta 4 segundos.

Tambien debemos tener en cuenta la acción que el usuario está realizando en el sitio web, como hemos explicado anteriormente los usuarios son más tolerables a tiempos de espera altos en aquellos procesos que entienden requieren de un mayor tiempo de ejecución; envios de formulario, búsquedas, descarga de archivos ó imagenes son ejemplos de páginas en las que un usuario seguramente estaría dispuesto a tener tiempos de espera mayores a 10 segundos, siendo fundamental como hemos comentado proveer de mecanismos cómo las barras de progreso que hacen que el usuario no se impaciente, y espere el tiempo necesario para la carga de la página.

Por lo tanto y resumiendo Internet es un medio en el que el usuario espera resultados inmediatos y en casos muy particulares esta dispuesto a esperar para obtener resultados, por ello para fijar y optimizar los requisitos de calidad de nuestro sitio web necesitamos saber el tipo de usuario y el tipo de contenido que ofrecemos que nos va a ayudar a fijar el tiempo máximo de espera al que debemos someter al usuario.

No, no se trata de un baile que mejora el rendimiento de PHP sino de un proyecto Open Source de Facebook que comenzó hace 2 años debido a que las funcionalidades existentes para optimizar PHP se antojaban insuficientes.

HipHop se trata de una especie de transformador de código fuente que toma el PHP y lo convierte en C++ para ser compilado con g++, para explicarlo de una manera rápida y sencilla podríamos decir que HipHop permite que cualquier desarrollador pueda escribir código PHP pero que el código final se ejecute con el rendimiento que ofrecería el código de un programador experto, el resultado es una mejora de rendimiento del 50%.

Y es que Facebook poco a poco irá siendo a PHP lo mismo que Google es a Python, si lo pensamos es realmente positivo cuando una gran empresa que utiliza una tecnología sobre la que depende su negocio se dedica a mejorar dicha tecnología no sólo para beneficiarse ellos mismo sino para beneficiar a la comunidad de desarrolladores y consumidores de dicha tecnología.

Para entenderlo mejor primero hay que saber como funciona PHP, PHP es un lenguaje de programación interpretado como Ruby, Python y Perl, esto es genial para la productividad de los desarrolladores porque no es necesario compilar el código pero tiene por contra unos requerimentos de memoria y consumos de CPU mayores que un lenguaje compilado como es el caso de C++, por lo tanto HipHop al tranformar el código PHP a código C++ nos permite disfrutar de lo mejor de ambos lenguajes.

¿Cómo ha mejorado HipHop a Facebook?

  • Web — 50% menos de consumo de CPU con el mismo tráfico
  • API — 30% menos de consumo de CPU con el doble de tráfico

La mejora de rendimiento de Facebook ha sido probada de manera progresiva en sus propios servidores y ahora un 90% de los servidores de Facebook utilizan HipHop, la mejora cómo hemos vistos se divide en mejoras relacionadas con al Web y relacionadas con el uso de la API, la clave para la diferencia de mejora entre Web y API radica en que la Web requiere operaciones más complejas que la API.

¿Hay algún tipo de limitación?

Con HipHop no podrás utilizar funciones como eval() y create_function(), la naturaleza dinámica de estas funciones hace imposible su conversión a código C++, sin embargo estas funciones no son de las más populares entre los desarrolladores de PHP.

Actualmente HipHop no puede ser ejecutado en Apache pero se trabaja en ello.

¿Dónde puede encontrarlo?

HipHop será liberado dentro de poco pero por el momento nos tenemos que conformar con la entrada en el blog de Facebook o con esta presentación.

Me gustaría que dejaraís vuestra opinión sobre el tema y si alguien tiene información adicional que la aporte ya que creo que se trata de una excelente noticia y más aún tratándose de PHP que como hemos comentado anteriormente se trata de un lenguaje de programación tremendamente flexible pero muy difícil de escalar cuando hablamos de sitios web de gran tráfico.

Para diseñadores y programadores IE6 es una de las peores lacras que ha sufrido la web desde hace años pero el problema es que la gran mayoría de los usuarios no lo ven como un problema sino que simplemente lo utilizan porque todavía a día de hoy creen que es la mejor y única alternativa para navegar en Internet.

Sinceramente para mi desarrollar un sitio web para que sea compatible con los diferentes navegadores y en especial Internet Explorer 6 no es una tarea divertida, no conozco a ningún profesional que disfrute desarrollando para IE6 y eso seguramente se deba a su pobre soporte de CSS y a que es un navegador lento e inseguro.

Para los usuarios el gran problema es que las funcionalidades de esta versión del navegador se han quedado obsoletas.

Hace ya muchos años que existe una alternativa idónea a IE6, Firefox, pero es muy difícil que los usuarios se acostumbren a instalar y utilizar un navegador que no viene instalado por defecto en su sistema operativo.

Durante 7 años ha sido el navegador más utilizado lo que provoca que un gran número de ordenadores aún sigue instalado, en muchos de estos ordenadores los usuarios no son los administradores y no tienen más remedio que utilizarlo.

A día de hoy tenemos gran cantidad de alternativas:

Google deja de dar soporte dentro de poco a IE6

Google ha anunciado en su blog para empresas que dejará de dar soporte a IE6 dentro de poco tiempo, muchas otras empresas ya han dejado de soportar a los navegadores más antiguos, como IE6, al igual que lo hizo Youtube y Flickr, las empresas se están empezando a dar cuenta finalmente de la carga que es seguir soportando un navegador como IE6.

Logotipo de GoogleGoogle presenta una nueva aplicación para dispositivos Android, se llama Google Goggles y es una aplicación de búsqueda visual que nos permite realizar búsquedas utilizando una imagen en vez de letras, una manera muy innovadora de buscar y que puede parecer venida del futuro. El proceso es sencillo se hace una foto con la cámara del teléfono y la aplicación tratará de devolver el resultados de búsqueda relevantes.

Cuando se realiza una consulta de búsqueda visual, Google Goggles descompone la imagen en varias partes y las contrasta con otras de una gran base de datos para ver si encuentra alguna coincidencia. Cuando la encuentra, devuelve términos de búsqueda relevantes para esa imagen. Goggles actualmente es capaz de reconocer decenas de millones de imágenes, entre ellas lugares, obras de arte famosas y logotipos.

Para hacer una consulta sobre un lugar ni siquiera necesitas hacer una foto, basta con abrir Google Goggles y sostener el teléfono frente al lugar que te interesa. Utilizando el GPS del dispositivo y la brújula, Goggles reconocerá de qué sitio se trata y te mostrará el nombre en el visor de la cámara. Y si quieres obtener más información, sólo tienes que pulsar en el nombre.

Google Goggles está disponible en inglés en todo el mundo y se puede descargar de forma gratuita desde el Android Market.

Un vídeo vale más que mil palabras

Todos estamos de acuerdo en que uno de los mayores problemas a los que nos enfrentamos habitualmente los desarrolladores es lograr una rápida carga de nuestro sitio web, en cuanto vamos añadiendo funcionalidades nos vamos encontrando con ralentizaciones en la carga del sitio por lo que debemos encontrar el equilibrio entre las funcionalidades y la velocidad de carga del sitio.

Hay diversos estudios que han demostrado que una buena velocidad del sitio web nos lleva a un aumento de la actividad y retención de usuario, ademas que nos permite una reducción de costes en todos los sentidos.

Algunos consejos para aumentar la velocidad de un sitio web

  1. Realiza pocas peticiones HTTP
  2. Haz uso de CDN (Content Delivery Network)
  3. Añade una etiqueta para hacer expirar tus cabeceras, Expires header
  4. Habilita la compresión por Gzip
  5. Pon el CSS al principio de todo
  6. Pasa los archivos JS al final
  7. Evita los comentarios CSS
  8. Pon tu CSS y tus archivos JS en archivos externo
  9. Reduce las consultas DNS
  10. Optimiza y minimiza el código de tus archivos JS
  11. Evita las redirecciones
  12. Elimina los scripts duplicados
  13. Configurar los ETags

A todos estos consejos tenemos que añadir que sin duda es necesario en primer lugar un servidor rápido, el servidor es la pieza clave para que un sitio web cargue rápido sin duda lo mejor será conseguir un hosting pago que te ofrece mayor velocidad y soporte, pero en caso de no tener dinero suficiente, y tengas que alojarte en uno gratuito, prueba muchos y decídete por el que más rápido te parezca.

Herramientas para acelerar nuestro sitio web

Herramientas de Google Webmaster

Google Webmaster ha lanzamo recienteme una funcionalidad llamada: Rendimiento del sitio, una función experimental en las Herramientas para webmasters que te muestra información sobre la velocidad de tu sitio y sugerencias para hacerlo más rápido.

Encontrarás datos sobre la rapidez de carga de las páginas, así como de su evolución en el tiempo; una comparación entre el tiempo de carga de tu sitio y de otros sitios; ejemplos de páginas concretas con sus tiempos de carga reales; y sugerencias de Page Speed, que pueden ayudar a reducir la latencia que perciben tus usuarios.

Page Speed

Google lanzó hace un tiempo Pagespeed, una herramienta que llevan desarrollando muchos años y que utilizan ellos mismos para optimizar sus sitios, es más o menos una competencia a YSlow de Yahoo! del que hablamos en el siguiente punto.

Al instalarlo se integra a Firebug y al ejecutarlo, Pagespeed nos dará diversos consejos y parámetros que podemos tomar en cuenta para mejorar el desempeño de carga de nuestro sitio, y de lo más interesante incluso genera versiones optimizadas de las imágenes que tengamos para que las reemplacemos y utilicemos para reducir así también la carga.

La documentación es excelente y merece la pena instalarla para experimentar.

Ambas noticias agregan mucho valor de parte de Google a la web, y ya las veo como opciones imprescindibles en un futuro.

YSlow, analizador de rendimiento web

Si quieres poner en práctica estos consejos y ver como poco a poco vas consiguiendo agilizar la carga de tu sitio no dudes en instalarte YSlow.

Este plugin de Yahoo llamado YSlow para Firebug (en Firefox) es sin duda una herramienta que todo webmaster debería tener funcionando en su navegador.

Para acceder a todas sus posibilidades hay que instalar primero Firebug y luego YSlow. Una vez instalado, se capturan todos los datos relativos a las páginas y sus elementos. Hay información sobre Rendimiento, Estadísticas y Componentes.

Para los que aún no conozcan Firebug decir que es una extensión que te ayudará a desarrollar, evaluar y depurar sitios web, controlando el CSS y HTML en tiempo real, midiendo el tiempo de carga para optimizar la página o corrigiendo los posibles errores Javascript.

El pasado 24 de Noviembre, junto a mi socio Alejandro Sánchez Blanes, dimos una charla en Iniciador Málaga (Empezar desde 0 sin inversión inicial), la idea era contar un poco nuestra experiencia sobre cómo desarrollar un producto, resultados-Futbol.com , desde 0 y hacerlo madurar poco a poco con recursos limitados, creo interesante compartir en esta entrada los puntos claves que creemos nos ha permitido crecer este primer año de vida.

Empezar desde 0 = Start-up

Las start-up son empresas que empiezan de 0 con pocos recursos, en general, las start-up no son compañías orientadas al servicio, sino que se centran en crear un producto, para asociarlo quizás a grandes compañías orientadas a servicios, para poder ambas escalar más rápidamente. El término es aplicable a mucho tipo de empresas y no necesariamente tecnológicas.

Los ejemplos más famosos de start-up son Google y Apple aunque en España tenemos buenos ejemplos como son: Loquo y Panoramio.

¿Cómo identificar una start-up?

Es una empresa con grandes posibilidades de crecimiento

  1. Sin modelo de negocio
  2. Sin gastos
  3. Sin subvenciones
  4. Sin inversiones
  5. Sin burocracia
  6. Sin asesores
  7. Sin pagar publicidad

¿Claves para crear una start-up?

  1. La idea
  2. El equipo
  3. Ejecución de la idea
  4. Austeridad

La idea

- No se necesita una idea brillante, ya que la gran mayoría de los proyectos exitosos mejoran un servicio ya existente.

- Las ideas hay que contarlas y pedir consejo ya que al exponer la idea consigues que la gente la critique o la cuestione.

El equipo

- Equipo reducido

- Con experiencia profesional previa y apasionado de su trabajo

- Joven y flexible

Ejecución de la idea

- Desarrollo ágil, sacar versiones lo más rápido posible

- Escalar rápidamente con recursos limitados

- Ser constante, creer en tu idea y no perder el foco

Austeridad

- No te hace falta dinero, te hace falta tiempo

- La tecnología hoy en día es barata

- Gran productividad, tu tiempo es oro y lo aprovechas al máximo

- Gastar dinero es muy fácil la austeridad es la mejor virtud de un emprendedor

¿Qué significa que un proyecto tenga éxito?

El éxito se puede entender de muchas maneras

  • Mucho tráfico
  • Gran volumen de facturación
  • Muchos beneficios
  • Vender el proyecto
  • Divertirse trabajando día a día con suficientes beneficios