Caso práctico:

Probablemente la característica CSS más requerida por los diseñadores es la posibilidad de personalizar las fuentes de los sitios web. Actualmente la única forma real de hacer esto es confiar en Flash, ya sea construyendo todo el sitio con este programa o utilizando el script sIFR.

Cufon es una interface web que reemplazar a sIFR, evitando tener que utilizar software de propietario y optando, en su lugar, por canvas/VML para lograr la misma meta.

Técnicamente, Cufón es una interface web que crea una fuente SVG partiendo de la fuente de tu tipografía utilizando un renderizador JavaScript.

Podéis ver un ejemplo de cufon trabajando en uno de los últimos proyectos que he realizado con esta libreria:  www.wordlab.es

Ventajas de Cufón

• No se necesita ningún plugin: Todo lo necesario para utilizar Cufón ya está disponible por defecto en el navegador de tus visitantes. Esto se debe a que en lugar de requerir Flash, Cufón se basa en JavaScript.
• Compatibilidad: Funciona en IE6, 7, 8 Firefox y Safari 3.
• Es fácil de utilizar: Se necesita escasa o directamente ninguna configuración.
• Es verdaderamente rápido: Carga casi instantáneamente sin tener que soportar el “parpadeo” que usualmente se experimenta con sIFR.

Ahora las cuestiones que tendremos que juzgar –con nuestro criterio personal–, son las que en su momento se analizarían sobre sIFR:

Accesibilidad:

Cufon de cara al posicionamiento (seo) de nuestros contenidos, es totalmente válido interprentando nuestros textos como xhtml válido

Usabilidad:

Una vez cargadas las librerías solo tendremos que declarar la función javascript que on body load realice la conversión con unas líneas de código.

Reemplazando con cufon h1 y h2 de nuestra página cargada

[script type="text/javascript"]
Cufon.replace(‘h1′);
Cufon.replace(‘h2′);
[/script]

Performance:

Cufon es una herramienta javascript que sobrecarga en cierta medida el frontend. En función de la capacidad de nuestro servidor, puede ser muy útil para convertir menus, titulares, contenidos destacados, pero en función del volumen de los contenidos que tenga una web puede ralentizar su carga por lo que es aconsejable realizar unas pruebas de rendimiento previamente.

Conclusiones:

De cara al diseñador: permite ser fiel al diseño original, mantener su creatividad sin tener que ajustarse a los patrones de fuentes predefinidas que soportan nuestros equipos.

De cara al programador: permite una fácil integración de fuentes evitando tener que usar sIFR, freefonts, etc

De cara al usuario: establece la comunicación que deseamos para nuestra aplicación sin tener que contar con fuentes auxiliares, siendo fieles al diseño y a la imagen que se quiere transmitir

function initDb() {
try {
if (!window.openDatabase) {
} else {
shortName = 'esviable_app';
version = '1.0';
displayName = 'Esviable_app';
maxSize = 2000000; // in bytes
db = openDatabase(shortName, version, displayName, maxSize);
}
} catch(e) {
if (e == INVALID_STATE_ERR) {
console.log("Invalid database version.");
} else {
alert("Unknown error "+e+".");
}
}
return db;
}


function createTables(db) {
db.transaction( function (transaction) {
transaction.executeSql('CREATE TABLE IF NOT EXISTS user(id INT NOT
NULL PRIMARY KEY, firstName CHAR(35), lastName CHAR(35), age INT,
address CHAR(40), email CHAR(20), phone CHAR(15));');
});
}

function createUsers(users) {
db.transaction( function (transaction) {
while (users.length > 0) {
user = users.pop();
console.log("User: " + user.firstName + " " + user.lastName, + " " + user.age
 + " " + user.address + " " + user.email + " " + user.phone);
transaction.executeSql('INSERT INTO user(firstName, lastName, age, address,
email, phone) values (?, ?, ?, ?, ?, ?);', [user.firstName,user.lastName, user.age,
user.address, user.email, user.phone], null,errorHandler);
}
endTime = new Date().getTime();
alert(endTime-startTime);
});
}

Las dudas principales que se pueden tener a la hora de trabajar con bases de datos en html5 creo que pueden ser las siguientes:

- ¿Dónde se guardan las bases de datos con html5?

Dependiendo del navegador, en chrome y firefox:
Windows (vista/7), en C:\Users\\AppData\Local\Chromium|(Google)\UserData\Default\databases
Linux, en $HOME/.config/chromium/Default/databases/
Mac, en $HOME/Library/Application Support/Chromium/Default/databases/
Reemplazar para linux y mac chromium por firefox

- ¿Cómo elimino una base de datos en html5?
Se pueden eliminar desde el propio navegador, en los ficheros que se almacenan junto con las cookies
Las puedes eliminar a través del directorio donde se ubican