mootools

Ajax loading css (indicadores de carga)

Indicadores de carga

Si desarrollas aplicaciones web, seguramente te has topado con el comentario por parte de los usuarios de que dan click a un botón o enlace y dicen ellos que no pasa nada.. y claro, algunas veces el servidor responde muy lento debido a la carga de peticiones o la cantidad de datos que debe retornar.. entonces es ahí cuando se hace necesario mostrar de manera visual que deben esperar, que su petición esta siendo atendida y que pronto obtendrán una respuesta.

Este es uno de esos métodos siempre útiles para cuando trabajamos con ajax (postbacks o callbacks), mejor conocidos en inglés como loaders o loading spinners. Este post es una pequeña guía para mostrar como implementar un loader utilizando jQuery o Mootols y ajax.

Es necesario escribir un poco de CSS, por lo que el código que viene es la clave para que el cargador tenga sentido

div.loading, .loading {
   background-color: #FFFFFF;
   background-image: url('loading.gif');
   background-position: center center;
   background-repeat: no-repeat;
   z-index: 1400;
}
div.loading * {
   visibility: hidden;
}

Y ahora implementado utilizando jQuery

$.ajax({
  url: 'prueba.html',
  type: 'get',
  beforeSend: function() {
    $(".grid").addClass("loading");
  },
  success: function(respuesta) {
    $(".grid").empty().html(respuesta);
  },
  complete: function() {
    $(".grid").removeClass("loading");
  }
});

Y para quienes gustan de Mootools, se hace de esta forma

var req = new Request({
   method: 'get',
   url: 'prueba.html',
   onRequest: function() {
      $(".grid").addClass("loading");
   },
   onComplete: function(respuesta) {
      $(".grid").removeClass("loading");
      $(".grid").empty().setHTML(respuesta);
   }
}).send();

Para este ejemplo loading.gif es una imagen animada que puede conseguirse en cualquiera de los siguientes sitios:
http://www.ajaxload.info/
http://preloaders.net/
http://www.loadinfo.net/
http://www.webscriptlab.com/
http://www.chimply.com/Generator
http://mentalized.net/activity-indicators/

Para finalizar, .grid representa el elemento o etiqueta en el cual se mostrará el cargador.. yo cuando lo utilicé fue para una tabla que paginaba vía ajax..

Posted from WordPress for Android

Compartir y Disfrutar

Html / Internet / mootools / Ocio / Qbit / software / Web — No Comments
29
mar 10

Implementando un ToDo con jQuery para tu aplicacion Web

jQuery ToDo

Antes que nada quiero decir que al escribir este pequeño tutorial me siento muy mal porque estoy traicionando a mi comunidad.. Soy mootools-cista pero en vías de que el framework (Yii Framework) que estoy utilizando a implementado jQuery tuve que cambiarlo de momento.

Esto sería el equivalente a la usabilidad de los usuarios pero exclusivamente para los desarrolladores de aplicaciones web, a continuación describiré como aplicar un widget a tu aplicación web desde el cual podrás mantener registro de las tareas pendientes o realizadas. Y hablo de usabilidad porque la lista siempre se mantiene a la vista del desarrollador.

Normalmente siempre utilizamos una aplicación para llevar el rastreo de tareas y seguimiento de errores cuando trabajamos en grupo con otras personas (por ejemplo en Qbit Mexhico utilizamos Solar Bugs Report), pero algunas veces cuando trabajamos solos es un poco más difícil ya que entra en juego la decídia y que por comodidad decidimos no llevar control de tareas pendientes desde una aplicación externa.

Mi propuesta para llevar una organización alternativa al seguimiento de errores y tareas pendientes es implementar mediante jQuery, CSS y HTML una especie de widget que se debe de pegar en cada página de la aplicación de la cual se desea realizar seguimiento.

1. La definición del código CSS

.popNotification {
   border:3px solid red;
   padding:15px;
   position:fixed;
   right:0;
   width:480;
   bottom:0;
   z-index:1400;
   background-color:#000;
   color:#fff;
   filter:alpha(opacity=4);
   -moz-opacity:0.4;
   -khtml-opacity:0.4;
   opacity: 0.4;
}

2. Definición del Código Javascript con jQuery

$(document).ready(function() {
   $('.popNotification').css('opacity',0.4).hover(function(){
      $(this).fadeTo(200,1);
   }, function(){
      $(this).fadeTo(200,0.4);
   });
});

3. Definición del Código HTML

La idea es pegar este código antes del la etiqueta <body> y escribir la lista de tareas que se necesitan realizar.

<div class="popNotification">
   <h2>ToDo</h2>
   <ul>
      <li>Esta puede ser la tarea #1</li>
      <li>Esta puede ser la tarea #2</li>
      <li>Esta puede ser la tarea #n</li>
      <li>Y asi podemos definir nuestras tareas</li>
   </ul>
</div>

El widget se puede mejorar o extender su funcionalidad, yo cuando una de las tareas la he realizado lo que hago no es borrar la tarea de la lista, sino que incluyo la imagen de un check al inicio de esa tarea.. Con eso me doy cuenta de si o no una tarea ya fue realizada. [muchas veces repetí la palabra tarea ¬¬]

Compartir y Disfrutar

Internet / mootools / Ocio / Proyectos / Qbit — No Comments
11
feb 09

Clickstatistics (lento pero seguro)

Desde diciembre del año pasado tenía la inquietud e idea de desarrollar una pequeña, pero muy pequeña aplicación la cual me permitiera conocer las áreas mas atractivas para los visitantes de mis sitios web.. Al fin me decidí, pensé que utilizando mootools y unos cuantos archivos de php podría generar un mapa a partir de las coordenadas de las zonas por donde se mueve el mouse.. (creanme que suena sencillo, pero tomó muchas horas hacerlo realidad).. en fin su desarrollo avanzó muy lentamente.. y cuando pensaba que ya estaba listo.. fue cuando por primera vez visité en SHDH.. de ahí la retroalimentación de algunos de sus participantes.. me hicieron pensar en como mejorarlo.. y de esa forma es que regresé a casa con muchas ideas de como hacer una mejor aplicación basada en la opinion de los demás..

Al unos pocos días de volver al 2do. SHDH organizado en el año, muchas cosas han cambiado en clickstatistics, aquellas ideas ya han formado parte de mi pequeño proyecto y pues esta vez volveré con aquel grupo de programadores y mostraré el avance que he logrado desde entonces..

El siguiente evento del SHDH será este 21 de febrero.. la ubicación todavía se desconoce.. pero con seguridad unos cuantos días antes del evento pot twitter se estará dando a conocer que lugar de mexico será iluminado por tantas mentes brillantes.. XD

Enlace al sitio oficial del Super Happy Dev House

Compartir y Disfrutar

Internet / mootools / Proyectos / Qbit — No Comments
21
nov 08

Generacion de Eyetracking y Heatmap

Inspirado en articulos de Jackob Nielsen en los que habla sobre Eyetracking que solamente se trata sobre los patrones de lectura que tienen los usuarios al visitar un sitio web.. es que he decidido iniciar una pequeña o al menos así pensé en su momento.. entonces una muy pequeña aplicación en la que pudiera obtener ese tipo de información a partir de las coordenadas de movimiento del mouse.. No se porque pero se me ocurrió que el mouse es nuestro acceso al medio digital por llamarlo así.. y normalmente en un porcentaje muy alto.. lo que leemos lo seguimos con el mouse.. talvez para no perdernos.. he de suponer que ha algunos les ha pasado que cuando llegan a un sitio y les cambian el mouse por algun tipo de muñequito o simplemente nos ocultan el mouse.. nos ponemos un poco desesperados.. y es que no muchas personas saben navegar si no es con el mouse..

La diferencia de lo que ya se ha hecho y lo que planteo hacer es que Eyetracking segun he leido se basa en algoritmos que toman las etiquetas de html y las procesan dandoles prioridades y valores segun estadisticas anteriormente tomadas de estudios de usabilidad. Lo que hare es un poco diferente.. ya que pretendo capturar los movimientos del mouse y registrarlos en un archivo.. que luego sería procesado por una script del lado del servidor que al final nos crearía una imagen llamada heatmap y que desvelaria las areas sencibles de nuestra web..

Quizás suene técnico y algo difícil de entender.. pero inicié con la idea ayer.. y hoy por la tarde ya he terminado con la aplicación del lado del cliente.. No se si sea buena idea.. pero he decidido hacerlo un plugin dependiente de Mootools..

Aparte de toda esta palabrería, el desarrollo de esta aplicación es motivada por la necesidad de conocer que es lo que más le importa a nuestros visitantes y que es lo que más les llama la atención.. todo esto solamente incluyendo el script en nuestro sitio web y listo.. Zeru por su parte me estara ayudando con la generación de la imagen.. el sabrá como hacerlo.. en eso no me incluyo..

Más adelante empezaré a dar más detalles al respecto..

eyetracking, heatmap, qbit, xtrem, usabilidad, mootools

Qbit Mexhico BlogLo que hacemos y pensamos se escribe aqui

mootools

Ajax loading css (indicadores de carga)

Compartir y Disfrutar

Implementando un ToDo con jQuery para tu aplicacion Web

Compartir y Disfrutar

Clickstatistics (lento pero seguro)

Compartir y Disfrutar

Generacion de Eyetracking y Heatmap

Compartir y Disfrutar

Enlaces

Proyectos

Web

Entradas recientes

Comentarios Recientes

Qbit Mexhico BlogLo que hacemos y pensamos se escribe aqui

mootools

Ajax loading css (indicadores de carga)

Compartir y Disfrutar

Implementando un ToDo con jQuery para tu aplicacion Web

Compartir y Disfrutar

Clickstatistics (lento pero seguro)

Compartir y Disfrutar

Generacion de Eyetracking y Heatmap

Compartir y Disfrutar

Enlaces

Proyectos

Web

Entradas recientes

Etiquetas

Comentarios Recientes