No me puedo quejar de los cursos online de Mejorando.la, aprendí varias cosas desde el primer curso, ahora me encuentro en el segundo que es de Frontend Profesional. En la tercera clase Pablo Rigazzi (@prigazzi) nos explicó como utilizar el framework de twitter, Bootstrap, para ahorrarnos un poco de trabajo a la hora de hacer un sitio que precisamos terminar rápido. En esta ocasión Pablo nos mostró como hacer la parte estética de un To-Do List Responsive Design con Bootstrap facilmente.
A partir del ejemplo, que no incluía nada de Javascript, comencé a trabajar en esa parte, y logré que funcione de tal manera que permita agregar nuevas tareas (to-do), editarlas y eliminarlas pero que además los elementos de la lista se guarden con JSON usando LocalStorage en la computadora del visitante, por lo cual, no requiero usar ningún lenguaje de programación backend como PHP, Python o JS con NodeJS.
Es útil y funcional para demostrar lo que se puede hacer solamente con javascript, aunque de seguro se puede mejorar para que mediante llamadas Ajax a un fichero .php guarde estos datos en una BD, pero bueno, el repositorio está en github asi que cualquiera puede descargarlo y editarlo a gusto.
El sistema utiliza jQuery 2.0.0 y solamente con 2 plugins:
- Editable (para la edición inline de las tareas)
- Timeago (para mostrar hace cuanto tiempo se agregó el to-do)
También uso Bootstrap como antes dije, más que nada para el diseño, ya que de la parte de Javascript no uso casi nada de ese framework, y además incluyo el archivo “storage.min.js” que es para que si el navegador es antiguo y no soporta LocalStorage, utilice globalStorage (FF 2.x y 3) y userData (IE6-7).
Pueden ver el demo del sistema haciendo clic aquí, y también pueden descargar el .zip del ejemplo o ver el repositorio en GitHub.
También te puede interesar
Más lecturas cerca de este destino o tema.
Deja un comentario