Contenido

MyJDB, base de datos en Javascript para todos los navegadores

24 feb

+ 19

El próximo Lúnes, día 1 de Marzo de 2010, verá la luz la primera versión de MyJDB, una base de datos desarrollada en Javascript basada en Javascript DB que Luís García lleva un tiempo desarrollando.

  • My, en referencia a MySQL que será el referente de como deben funcionar las cosas.
  • J, en referencia a Javascript.
  • DB, indicando que se trata de una base de datos.
  • Y podemos usar JDB como acrónimo de Javscript DB recordando cual es el origen del proyecto.

Esta nueva versión trae una buena recopilación de modificaciones:

  • Relicenciamiento a GPL 3.
  • Documentación interna completa y en Ingles, así como las variables que pasan del catalán al ingles para internacionalizar el proyecto.
  • Reestructuración completa del código.
  • Nuevo analizador sintactito del Select sobre un 40% más rápido.
  • Tipado de datos de los campos de las tablas, lo que nos ayuda a evaluar correctamente números, cadenas y sobre todo fechas.
  • El algoritmo para realizar JOIN entre dos tablas es alrededor de 640 veces más rápido.
  • Se ha añadido el uso de between, el uso de parentesis, reconocimiento de ‘<=>’.
  • Implementación de la clausula limit.
  • Reconocimiento de is, is not, is null, is not null y unknown.
  • Realización de un select con sólo contando el tiempo de la clausula where alrededor de un 40 veces más rápido.
  • Evaluación de la clausula where alrededor de un 94% más rápido.
  • La evaluación de una condición LIKE es alrededor de 8 veces más rápida.
  • La clausula Order by es alrededor de 2 veces más rápido.

Como podemos ver, se trata de un proyecto interesante que permitirá llevar las base de datos en Javascript a todos los navegadores, mientras los estándares creados para ello se van implementado. Realmente es importante promover este tipo de proyectos que pretende hacernos la vida más fácil extendiendo las opciones que disponemos. Además busca colaboradores que ayuden a aportar ideas y líneas de código.

LOST para desarrolladores PHP

24 feb

+ 16

Perdonarme por la pedazo de frikada que voy a poner ahora, pero me ha hecho gracia y no quiero ser el único que la ha sufrido :D

Ojo!, Spoiler, si no has visto el capítulo 6×04 no sigas.

Continua —>

Mozilla Firefox, por fín CSS Transitions

23 feb

+ 17

Via Twitter descubro que Firefox 3.7 (la versión pre-alpha2) ya dispone de CSS Transtions. El sistema con el cual mediante sentencias CSS podemos aplicar movimiento a elementos HTML de nuestra página. Esta funcionalidad, disponible en WebKit desde hace ya bastante tiempo, nos permite realizar tareas que actualmente se realizan mediante Javascript, en la capa de funcionalidad, en la capa de diseño, algo que ha levantado dispares opiniones al respecto.

// HTML
<ul>
 <li id="long1">Long, gradual transition...</li>
 <li id="fast1">Very fast transition...</li>
 <li id="delay1">Long transition with a 2-second delay...</li>
 <li id="easeout">Using ease-out timing...</li>
 <li id="linear">Using linear timing...</li>
 <li id="cubic1">Using cubic-bezier(0.2, 0.4, 0.7, 0.8)...</li>
</ul>

// CSS
#delay1 {
 position: relative;
 -moz-transition-property: font-size;
 -moz-transition-duration: 4s;
 -moz-transition-delay: 2s;
 font-size: 14px;
}

#delay1:hover {
 -moz-transition-property: font-size;
 -moz-transition-duration: 4s;
 -moz-transition-delay: 2s;
 font-size: 36px;
}

Podemos descargar la última versión de desarrollo de Firefox y probarlas en nuestras manos usándo la documentación que Mozilla nos ha preparado.

DOMCached, librería para facilitar el almacenamiento DOM con jQuery y Prototype

23 feb

+ 6

Ayer vimos como Web SQL Database apunta buenas maneras para el futuro del almacenamiento de datos en el cliente. Tambien hemos visto lo interesante del almacenamiento DOM como sustituto de las odiosas cookies, Lawnchair nos ofrecía un interfaz límpio y cómodo para interactuar con estas opciones, y ahora DOMCached, nos facilita tambien la integración con jQuery y Prototype.

// Ejemplo jQuery
<script src="jquery.js"></script>
<script src="jquery-json.js"></script>
<script src="domcached.js"></script>
<script>
// Leemos el valor de "key"
var value = $.DOMCached.get("key");
if(!value){
	// Si no está disponible lo cargamos desde el servidor
 	value = load_data_from_server()
 	// Lo añadimos al DOM para futuros usos
	$.DOMCached.set("key",value);
}
</script>

Compatible con la mayoría de navegadores actuales, DOMCached está disponible como plugin para Prototype y para jQuery. Podemos ver el código fuente alojado en GitHub y probarlo en vivo mediante este ejemplo usando el plugin jQuery.

Microsoft Windows te permitirá elegir el navegador que quieras

22 feb

+ 17

A partir del 1 de Marzo los usuarios de Windows podrán elegir el navegador por defecto de sus sistema operativo. De esta forma, el sistema operativo de Microsoft cumple con la normativa que la Unión Europea le impuso para evitar la ventaja que Internet Explorer tenía sobre los demás navegadores al estar por defecto en el sistema operativo.

4370168266_ddd0407201
(Ver Imagen)

Se ofrecerá mediante una actualización desde Windows Update y el usuario (cada usuario del sistema) podrá seleccionar su navegador por defecto. El navegador seleccionado se descargará y se instalará directamente desde la aplicación, haciendo sencillo el uso para cualquier usuario  que verá como su navegador por defecto se instala automáticamente en sus sitema.

Actualización (23/02/2010 10:19):

Nukeador nos avisa de que Mozilla ya ha empezado a mover ficha con una campaña para informar a los usuarios sobre la importancia de esta elección.

Web SQL Database, tu base de datos en HTML5

22 feb

+ 25

HTML5 nos introduce la posibilidad de disponer de un base de datos local almacenada en el navegador del usuario. Mediante Web SQL Database, la W3C ofrece una API estándar destinada a manipular bases de datos en el lado del cliente mediante peticiones SQL de forma asíncrona. Un complemento ideal al Almacenamiento DOM que ya hemos visto en otras ocasiones.

Al igual que Google Gears SQL, con HTML5 será posible realizar peticiones complejas mediante SQL. Los chicos de HTML5Rocks ha creado una pequeña aplicación de ejemplo que funciona sobre Google Chrome y de la que he podido crear una pequeña versión reutilizable que podremos usar en nuestras aplicaciones web.

var webdb = {};
webdb.db = null;

// Función para crear la base de datos
webdb.open = function(options) {
	if (typeof openDatabase == "undefined") return;

	// Opciones por defecto
   	var options = options || {};
	options.name = options.name || 'noname';
	options.mb = options.mb || 5;
	options.description = options.description || 'no description';
	options.version = options.version || '1.0';

	// Definimos el tamaño en MB
   	var dbSize = options.mb * 1024 * 1024;

	// Cargamos la base de datos
   	webdb.db = openDatabase(options.name, options.version, options.description, dbSize);
}
// ExecuteSql
webdb.executeSql = function(sql, data, onSuccess, onError){
	if (!webdb.db) return;
	webdb.db.transaction(function(tx){tx.executeSql(sql, data,onSuccess,onError);});
}

Este código, nos permite realizar peticiones SQL tales como crear una nueva tabla, leer, borrar o modificar de ella, está claro que únicamente en los navegadores que lo permitan.

// Ejemplo
var opt = {
	name: "ejemplo",
	mb: 1,
	description: "Base de datos de ejemplo",
	version: "1.0"
};

// Abrimos la base de datos
webdb.open(opt);

// Creamos la tabla
webdeb.executeSql('CREATE TABLE IF NOT EXISTS ejemplo (ID INTEGER PRIMARY KEY ASC, texto TEXT, added_on DATETIME"', [],
			function(tx, r){
				alert("Tabla creada");
			},
			function(tx, e){
				alert("Se ha producido un error: "e.message);
			});

// Insertamos un nuevo elemento
webdb.executeSql('INSERT INTO ejemplo (texto, added_on) VALUES (?,?)', ['Mensaje de ejemplo', new Date()],
			function(tx, r){
				alert("Elemento introducido");
			},
			function(tx, e){
				alert("Se ha producido un error: "e.message);
			});

Esto nos permitirá crear aplicaciones más complejas gracias al almacenamiento de datos en la capa del cliente. Eso si, será mucho más útil cuando todos los navegadores lo incorporen :D

WordPress 2.9.2, actualización de seguridad leve

16 feb

+ 1

WordPress nos acaba de avisar de una nueva actualización, en concreto de la 2.9.2, que soluciona un fallo de seguridad detectado por Thomas Mackenzie. El fallo detectado posibilita que los usuarios registrados visualizar información sobre posts de otros usuarios desde la papelera. Si es el caso en el que necesitas tener activado el modo “paranoia” de seguridad no lo dudes y actualiza, si crees que puedes pasar, espera a la siguiente versión que parece que solventará alguna cosilla más. [Descargar]

jDigiClock, Reloj HTC Hero con jQuery

15 feb

+ 18

jDigiClock es un plugin jQuery que nos permite conseguir un reloj, inspirado en el HTC Hero, e integrarlo directamente en cualquier página web.

jdigiclock
(Ver Imagen)

Modo de empleo

Como todo plugin jQuery debemos cargar los ficheros Javascript necesarios.

<link rel="stylesheet" type="text/css" href="css/jquery.jdigiclock.css" />
<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="lib/jquery.jdigiclock.js"></script>

Una vez cargados ya podemos crear nuestro reloj llamando al plugin indicando el ID del elemento HTML contenedor y especificando una serie de parámetros de configuración.

// HTML
<div id="digiclock"></div>

// Javascript
<script type="text/javascript">
     $(document).ready(function() {
        $('#digiclock').jdigiclock({
            // Aquí la configuración
        });
    });
</script>

Configuración

Disponemos de una serie de parámetros para personalizar nuestro reloj:

  • clockImagesPath: Directorio de imágenes del Reloj
  • weatherImagesPath: Directorio de imágenes del tiempo
  • am_pm: Booleano para especificar AM/PM
  • weatherLocationCode: Código de tu cuidad para el tiempo (Base de datos: WeatherLocationDatabase.txt).
  • weatherMetric: Medición de la temperatura (C/F)
  • weatherUpdate: Tiempo de actualización del tiempo

Actualización (13:02):

Cane nos explica en los comentarios que el aspecto es de HTC Sense, el interface desarrollado por HTC para dispositivos Android, Windows Mobile, …

El poder oculto de border-radius

11 feb

+ 11

Ya conocemos border-radius, la propiedad CSS que nos permite redondear los elementos de nuestras páginas mediante CSS. Aunque la propiedad aún no está correctamente integrada en los navegadores actuales, podemos disfrutar de ella mediante el uso de los correspondientes prefijos:

// Mozilla
-moz-border-radius:1em;

// WebKit
-webkit-border-radius:1em;

// W3C
border-radius:1em;

Aún así, hay gente que ha estado haciendo cosas realmente interesantes con ella.

border-radius
(Ver Imagen)

Código

#wrapper{
 width: 1000px;
 margin: auto;
 position: relative;
}
#circle{
 position: absolute;
 top: 100px;
 left: 0;
 z-index: 0;
 width: 200px;
 height: 200px;
 background-color: #a72525;
 -webkit-border-radius: 100px;
}

#circle1{
 position: absolute;
 top: 105px;
 left: 5px;
 z-index: 1;
 width: 200px;
 height: 200px;
 background-color: #efefef;
 -webkit-border-radius: 100px;
}

Quizás no le encontremos una utilidad real, pero como curiosidad es interesante :D

Plupload, sube ficheros como quieras, pero súbelos

10 feb

+ 4

Ajaxian publica un artículo sobre Plupload, una aplicación Javascript que nos permite seleccionar de entre una serie de opciones posibles las herramientas con las que queremos permitir subir ficheros a nuestros usuarios.

  • Google Gears
  • Silverlight
  • Flash
  • BrowserPlus
  • HTML5

Simplemente tendremos que especificar uno o varios de ellos y los parámetros necesarios para poder cargar las herramientas necesarias para cada tecnología.

var uploader = new plupload.Uploader({
	runtimes : 'gears,html5,flash,silverlight,browserplus',
	browse_button : 'pickfiles',
	max_file_size : '10mb',
	resize : {width : 320, height : 240, quality : 90},
	url : 'upload.php',
	flash_swf_url : '/plupload/js/plupload.flash.swf',
	silverlight_xap_url : '/plupload/js/plupload.silverlight.xap',
	filters : [
		{title : "Image files", extensions : "jpg,gif,png"},
		{title : "Zip files", extensions : "zip"}
	]
});

Tenemos una API disponible y un ejemplo para verlo funcionando.