Pingdom Full Page Test

  • 24/06/2007
  • 6:50 am
  • unijimpe

Pingdom Full Page Test es un servicio que permite medir el tiempo de carga de tu web, basado en todos los componentes a cargar (html, js, css, images, etc). Esta herramienta brinda un reporte muy detallado de todos los elementos que se cargan con su respectivo tamaño, tiempo de carga, tipo de archivo.

pingdom.gif

Junto a cada elemento cargado aparece una barra en tres colores que indica los tiempos de carga de inicio de carga (amarillo), conexión (verde), descarga (azul). De esta forma visualizamos gráficamente que archivos son los que demoran mas en cargas e incluso detectar que archivos jamas se descargan.

pingdom-test.gif

Finalmente se muestra un resumen completo de el site testeado, con los datos globales de: tiempo total de carga, total descargado, total de objetos externos, detalles de tamaño descargado por tipo de archivo.

pingdom-report.gif

Entonces con esta herramienta gratuita haremos un test de nuestro web y podremos identificar los elementos que toman mas tiempo en descargar y optimizarlos, también se puede calcular el tiempo que tomará cargar a un usuario nuestro site.

Posts Relacionados

Lightbox: Imagenes Emergentes

  • 23/06/2007
  • 11:42 am
  • unijimpe

Lightbox es un script hecho en javascript para mostrar imágenes de una manera muy cómoda y con excelente acabado. Adiós a los popups para mostrar imágenes grandes, este script mostrará tu imagen encima de toda tu web y con opciones para anterior y siguiente si es que tienes mas imágenes.

lightbox.gif

Para utilizar Lightbox lo primero es descargar la versión actual. Lightbox utiliza las librerias Prototype y Scriptaculous. Entonces necesitas incluir estar librerías en el head de tu html.

HTML:
  1. <script type="text/javascript" src="js/prototype.js"></script>
  2. <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
  3. <script type="text/javascript" src="js/lightbox.js"></script>

El siguiente paso es incluir la hoja de estilos para que Lightbox tenga la apariencia deseada, para ello incluimos los estilos en el header del html que estamos creando.

HTML:
  1. <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

El paso final para utilizar Lightbox es agregar la propiedad rel="lightbox" a los enlaces que deseamos que abran una ventana flotante con la imagen. La propiedad href indicará que imagen se abrirá, la propiedad title sera el titulo de la ventana.

HTML:
  1. <a href="imagen.jpg" rel="lightbox" title="Titulo">Imagen</a>

En este caso hemos colocado como enlace un texto, también podemos utilizar imágenes. Finalmente si deseamos mostrar un conjunto de imágenes debemos agregar un nombre de grupo entre corchetes [], entonces nuestro código quedaría de la forma:

HTML:
  1. <a href="image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
  2. <a href="image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
  3. <a href="image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

Entonces resumiendo, incluyes las librerías necesarias, la hoja de estilos y finalmente agregas la propiedad rel="lightbox", eso es suficiente para mostrar tus imágenes de un forma muy elegante y no intrusiva para tus usuarios.

lightbox-demo.jpg

Posts Relacionados

FlashTracer: Trace en Firefox

  • 21/06/2007
  • 10:15 am
  • unijimpe

FlashTracer es un plugin para Firefox que permite visualizar los trace hechos en flash. Esto permite depurar de manera sencilla aplicaciones flash que tengan acceso a datos o visualizar si es que se están ejecutando determinadas rutinas en flash. Los textos trazados desde flash se mostrarán en un panel lateral y si lo deseas pueden aparecer en una ventana flotante.

flashtracer-01.gif

Para el correcto funcionamiento de este plugin se necesita la versión Debug Flash Player el cual tiene funciones adicionales para depuración de archivos flash.

Instalación
Para instalar este plugin, debes acceder a FlashTracer en donde encontrarás un enlace para descargar e instalarlo. Luego de instalarlo reinicias tu Firefox y esta listo para su funcionamiento.

flashtracer.gif

Finalmente hay que comentar que si estas utilizando la versión 9.0.28 o superior de flash player debes cambiar el parámetro outputfile en el panel de opciones de FlashTracer.

Si utilizas Windows la ruta es de la forma:
C:\Documents and Settings\{user}\Application Data\Macromedia\Flash Player\Logs\flashlog.txt

Si utilizas MAC la ruta tendrá la forma:
username:Library:Preferences:Macromedia:Flash Player:Logs:flashlog.txt

Posts Relacionados

  • No related posts