Posts Tagged: CSS

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

Implementando un ToDo con jQuery para tu aplicacion Web

No Gravatar
jQuery ToDo

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

  • Facebook
  • Twitter
  • Delicious
  • Digg
  • StumbleUpon

Qbit Mexhico Blog is using WP-Gravatar