|

HTML 5 Web SQL Database

ByLuis

Está claro que el HTML5 nos ofrece muchas posibilidades, pero una de las opciones que más me ha gustado es la de tener bases de datos locales.

Para abrir una conexión deberíamos ejecutar lo siguiente:

db = openDatabase("ToDo", "0.1", "A list of to do items.", 200000);

Y para la ejecución de sentencias hay que echar mano de transacciones:

db.transaction(
  function(tx) {
     tx.executeSql("SELECT * FROM ToDo", [],
        function(tx, result) {
           for(var i = 0; i < result.rows.length; i++) {
             document.write('' + result.rows.item(i)['label'] + '
');
           }
         }, null);
       }
   );

Bastante sencillo y ofrece muchas posibilidades en nuestras aplicaciones

HTML 5 Web SQL Database

Vía / DZone

Similar Posts

$fx(): librería javascript para animaciones

ByLuis

$fx() es una librería que nos permite realizar animaciones de elementos HTML de forma sencilla. Altera las propiedades CSS a lo largo del tiempo pasando solo una pequeña configuración. Además se pueden combinar efectos, grupos de ellos, encadenarlos o ejecutarlos en paralelo, incluso indicar diferentes callbacks para dar una mayor flexibilidad.
Para aquellos que necesiten tan solo hacer animaciones y no quieran cargar todo el core de jQuery o Mootools, les puede venir muy bien.
$fx()
Vía / Script & Style

qTip: tooltips con jQuery

ByLuis

qTip es un plugin jQuery que nos permite crear y personalizar tooltips en nuestra página web. Se trata de un plugin muy completo que tiene las siguientes características:

qtip.png

  • Compatible con IE6+, Firefox 2+, Opera 9+, Safari 3+, Chrome 1+, Konqueror 3.5+
  • Esquinas redondeadas sin necesidad de imágenes
  • Posibilidad de indicar la esquina donde se quiere situar el tip (elemento del bocadillo que enlaza con el elemento)
  • Posibilidad de meterle efectos y Ajax
  • Configurable

qTip

Vía / crishnakh

|

FUEL: framework para desarrollo de extensiones de Firefox

ByLuis

FUEL es un framework cuyo sentido es ayudar a realizar extensiones para Firefox de forma sencilla que accedan a las herramientas y a nivel del systema de aplicación. Para ello proveerá unas librerías estables y documentadas, obteniendo extensiones más estables y por consiguiente una aplicación más estable también.
Entre sus objetivos nos encontramos con la facilidad de acceder a las interfaces, componentes y servicios, disponer de paquetes para abrir ventanas, para tratar el nsIProcess, y para tratar ficheros, texto o stream enviado mediante XMLHttpRequest.
Es importante resaltar también que nos ayudará al acceso a datos (bookmarks, microsumarios y proveedores de búsquedas), al monitoreo de eventos y notificaciones, e interactuación con el UI de la aplicación.
Estoy deseando tener un poco de tiempo para mirarlo con detalle, ya que a veces al desarrollar una aplicación XUL nos encontramos con unas librerías un tanto enrevesadas.
FUEL
Vía / Ajaxline

Time picker en jQuery

ByLuis

Curioso script en jQuery que permite transformar una caja de texto en un seleccionador de tiempo. Pinchando sobre ella nos saldrán las horas que podemos elegir, y al movernos sobre las horas, aparecerán los minutos y así con el resto de los datos.

timepicker.png

Su utilización es muy fácil, tan solo habrá que ejecutar lo siguiente:

$(function(){
$('#test-1').timepickr();
});

A parte se puede configurar indicando que horas, minutos, segundos y etiquetas (am/pm) se pueden elegir, los formatos o incluso que datos mostrar o no.

jquery.timepickr.js

Vía / WebAppers

Tablecloth: estilo en tablas mediante Javascript

ByLuis

TableCloth es un javascript no intrusivo que permite cambiar el estilo de las tablas y el comportamiento referente al estilo. Esto quiere decir que le cambia el diseño y que existen estilos asociados a filas y columnas cuando se produce un mouseover y un click.
tablecloth.png
No es necesario incluir código en las tablas, ya sean id o class, ya que el script detecta automáticamente las tablas y las trata.
Además diferencia filas alternas y deselecciona la fila y la columna elegida cuando se hace click en cualquier parte de la página.
Tablecloth
Vía / WebAppers

|

Close Pixelate: pixela imágenes con HTML5

ByLuis

Close Pixelate es un script que convierte una imagen en su correspondiente pixelada haciendo uso de HTML5 y canvas. Se le pueden indicar las siguientes opciones: resolución, forma del pixelado, tamaño, desplazamiento y canal alpha

Su uso es tan sencillo como ejecutar lo siguiente:

var docReady = function() {
  document.getElementById('portrait-image').closePixelate([
    { resolution : 24 },
    { shape : 'circle', resolution : 24, size: 16, offset: 12, alpha: 0.5 }
  ]);
};
window.addEventListener( 'DOMContentLoaded', docReady, false);

Close Pixelate

Vía / WebAppers

4 Comments

  1. Pingback: HTML 5 Web SQL Database | Adobe User Group Granada
  2. Pingback: HTML 5 Web SQL Database

  3. Recuerdo en una entrevista que vi hace tiempo a los founders de nextstop (aquí está por si os interesa http://www.youtube.com/watch?v=Jks-idxVrCs ), en la que comentaban que en su aplicación web para iphone no usaban el SQL de HTML5, sino algo similar sólo para webkit, ya que en el sistema de HTML5 encontraron algunos bugs (creo que eran bugs en la implementación de webkit en safari mobile).

Comments are closed.