|

HTML 5 Web SQL Database

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

Consejos para pasar a XHTML Strict

Buena serie de consejos a seguir para aquellos que quieran empezar a realizar webs usando XHTML Strict:

  • Declara el Document Type
  • Declara el Content Type
  • Añade la barra final a los tags de una sola referencia, por ejemplo <br /$gt;
  • Usa la entidad &amp; para el ampersand (&)
  • No olvides el atributo alt par alas imágenes
  • Referencia correctamente el Javascript
  • Usa la etiqueta fieldset en los formularios
  • Anida correctamente el HTML
  • No uses elementos o atributos deprecated

Web Design Tip: XHTML Strict Transition

| |

Menú radial mediante XHTML

Buen tutorial que nos explica cómo realizar un menú radial, es decir, un menú en el que las opciones se sitúan alrededor de un punto.

menu_radial.png

El tutorial nos indica cómo crear la estructura XHTML, los estilos, y el código Javascript para que funcione el menú.

Siendo algo puristas, no me gusta el uso del XHTML y el de los estilos, incluso podría sobrar Javascript. El código XHTML no es semántico. Aúnque claro, quizás lo haya hecho porque la solución que os paso ahora no sirve para IE6.

menu_radial2.png

El HTML sería el siguiente:

<ul>
<li><a href="1.html">1</a></li>
<li><a href="2.html">2</a></li>
<li><a href="3.html">3</a></li>
<li><a href="4.html">4</a></li>
</ul>

Y los estilos:

ul {
width: 150px;
height: 150px;
display: block;
padding: 0px;
margin: 0px;
}
li {
width: 48px;
height: 48px;
display: block;
border: 1px solid #008585;
background: #24B8B8;
margin: 0px;
padding: 0px;
float: left;
text-align: center;
}
li + li + li {
margin-left: 50px;
}
li:first-child {
margin: 0px 50px;
}
a {
font-size: 250%;
font-family: Arial;
text-decoration: none;
color: #DEDED2;
}

Javascript Tutorial – Radial Menus Part 1

| |

CAPTCHA DHTML y CSS con PHP

Sí, demasiadas siglas para un título, pero se trata de eso, de generar un CAPTCHA mediante PHP, pero la característica de este CAPTCHA es que se realiza mediante CSS y HTML, para lo cual presentará una tabla con celdas y solo una de ellas con un color diferente que será la que hay que pulsar para poder pasar el CAPTCHA.
csscaptcha.png
La clase envía mediante AJAX una petición al servidor pasando las coordenadas de los clicks del usuario hasta que se envían un numero total de clicks a cajas coloreadas.
DHTML and CSS CAPTCHA

| | |

Laboratorio: indicador de calidad de password

Cuando un usuario se registra en una aplicación web, suele haber casos que cuando se está introduciendo la contraseña, el sistema indica si la password cumple unos mínimos de seguridad o no. En algunas ocasiones suele darnos solo un aviso informativo, pero en otros o cumple todos los requisitos o no admite la contraseña.

En este caso vamos a crear un script que modificará los input password para añadirle una funcionalidad que indique la calidad de la contraseña que se va introduciendo.

password.png

El script añadirá el evento de control de tecla pulsada (onkeyup) y realizará una serie de comprobaciones para conocer la calidad de la contraseña, una contraseña válida será la que cumpla todas las condiciones. Las condiciones que incluimos en el ejemplo son las típicas que suelen pedir: que existan mayúsculas y minúsculas, algún número, caracteres especiales y una longitud mayor de 6.

Para chequear cada condición usaremos expresiones regulares y llevaremos un contador para saber cuántas se cumplen. Cuando hayamos finalizado las comprobaciones calcularemos el porcentaje de calidad y lo indicaremos con una barra de progreso. Esta barra se crecerá según aumente la calidad de la contraseña e irá cambiando de color desde un color rojo para la poca calidad hasta un color verde que indique mucha calidad.

El efecto de barra de progreso lo vamos a realizar de la siguiente manera, tenemos una imagen que va a funcionar como máscara, tendrá dos partes, de igual tamaño y cada parte del mismo tamaño que el ancho del input. Cada mitad tendrá una funcionalidad, la mitad de la derecha servirá para ocultar y la de la izquierda para mostrar, según queramos que se vaya mostrando la barra de progreso, iremos desplazando el fondo hacia la derecha para que se vaya viendo la barra de progreso. Inicialmente la línea discontinua de la imagen que mostramos como ejemplo estará en el lado izquierdo del input.

mascara.gif

El código sería el siguiente:

var __PASSWORD__ = {
colorKO: [255, 0, 0], // Color de contraseña no válida
color50: [127, 127, 0], // Color para el 50% para que no haya un cambio tan brusco
colorOK: [0, 255, 0], // Color de contraseña válida
width: 150,
// Añade el evento onkeyup a la caja input:password y le añade el evento checkpassword
init: function() {
var inputs = document.getElementsByTagName("INPUT");
for (var i=0; i<inputs.length; i++) {
if (inputs[i].type == 'password') {
inputs[i].addEventListener("keyup", __PASSWORD__.checkPassword, false);
inputs[i].className = 'password';
}
}
},
// Obtiene el color porcentual entre un color inicial y otro final, teniendo en cuenta un color intermedio
getColor: function(porc) {
var color = new Array();
var color1 = porc < 50? __PASSWORD__.colorKO:__PASSWORD__.color50;
var color2 = porc < 50? __PASSWORD__.color50:__PASSWORD__.colorOK;
color[0] = parseInt(color1[0]-((color1[0] -color2[0])*porc/100));
color[1] = parseInt(color1[1]-((color1[1] -color2[1])*porc/100));
color[2] = parseInt(color1[2]-((color1[2] -color2[2])*porc/100));
return color;
},
// Comprueba la calidad de la contraseña
checkPassword: function() {
var valor = this.value;
var cont = 0;
var comprobaciones = new Array(
/[A-Z]/, // mayúsculas
/[a-z]/, // minúsculas
/\d/,    // números
/.{6}/,  // más de 6 caracteres
/(\s|\\|\/|!|"|·|\$|%|&|\(|\)|=|\?|¿|\||@|#|¬|€|\^|`|\[|\]|\+|\*|¨|´|\{|\}|\-|_|\.|:|,|;|>|<)/ // Caracteres especiales
);
// Miro todas las condiciones
for (var i=0; i<comprobaciones.length; i++) {
if (valor.match(comprobaciones[i])) {
cont++;
}
}
// Valores posibles en caso de 5 condiciones: 0, 20, 40, 60, 80, 100, pero el valor mínimo tiene que ser 20 para que coincida con el colorKO, ya que si no, al pulsar una tecla ya cambia de color a un paso colorKO+1
var porc = parseInt((cont*100/(comprobaciones.length-1))-(1/(comprobaciones.length-1)*100));
// Desplazo el background tratándolo como una máscara
this.style.backgroundPosition = (parseInt(cont*__PASSWORD__.width/comprobaciones.length)-(__PASSWORD__.width))+"px 0px";
// Cambio el color de fondo
var color = __PASSWORD__.getColor(porc);
if (porc < 0) {
this.style.backgroundColor = '';
} else {
this.style.backgroundColor = 'rgb('+color[0]+', '+color[1]+', '+color[2]+')';
}
}
};
window.addEventListener("load", function() {__PASSWORD__.init();}, false);

Demo

|

HTML Purifier: filtro HTML en PHP

htmlpurifier.pngHTML Purifier es un filtro HTML para PHP que no solo elimina código XSS, sino que asegura que tus HTML cumplan los estándares.
A parte admite configurar el filtro con una serie de parámetros, pudiendo decir si se quiere que sea XHTML Strict o Transitional, HTML o XHTML, indicar el nivel de filtro.
HTML Purifier
Vía / dzone

|

Paso a paso de un diseño web

La gente de SitePoint han publicado un gran artículo en el que explican cómo hacer un diseño (layout) mediante XHTML y CSS.
Hace tiempo alguien nos preguntaba por un comentario en un artículo cómo podía pasar de su forma de diseñar por tablas a diseñar sin tablas. Creo que con este artículo podrá aprender la transición de forma muy sencilla y rápida.
Empieza explicándonos los pasos que hay que llevar a cabo para la fase inicial de nuestro diseño. Dibujar los contenidos (cabecera, panel, contenido, pie de página) y cómo crear la estructura de capas y sus estilos.
Después nos indica como añadir fondos y contenidos a las distintas partes de nuestra página, como por ejemplo las imágenes con float. No solo se centra en lo estrictamente desarrollo, sino también un poco en diseño. Añade imágenes de fondo al pie y a la cabecera que realmente quedan bastante bien.
Y por último nos indica como dividir el contenido en rejillas para darle un aspecto más uniforme.
Breaking Out of the Box

|

30 scripts para galerías, presentaciones y lightboxes

Una gran colección de scripts que nos ayudarán a incluir nuestras galerías de fotos, presentaciones y lightboxes. 30 scripts en total, organizadas por:

  • Galerías y lightboxes en Ajax.
  • Galerías de imágenes basadas en Ajax.
  • Galerías CSS+Javascript.

De las 30 me gustaría destacar unas cuantas que son las que más me han gustado:

  • JonDesign’s SmoothGallery : usando mootools v1.0 para su desarrollo, se trata de un script de tan solo 16k, que añade fade, transparencias, thumbnails, vistas preliminares y todo ello con un diseño muy sencillo y llamativo.galeria1.png
  • Couloir.org: otra galería de imágenes en forma de presentación, con fade, redimensionamiento de la ventana y sonido.galeria2.png
  • Lightbox2: uno de los mejores y de los más conocidos, transparencias, fade y posibilidad de navegar entre las diferentes imágenes.galeria3.png
  • TripTracker: muy parecido a los anteriores, en este caso permite también acceder a la primera y última y enviar por email la ruta de la imagen en cuestión.galeria4.png
  • Cross Browser Multi-Page Photograph Gallery: Increible galería basada totalmente en CSS de la que ya hemos hecho referencia anteriormente, pero que siempre merece una mención.galeria5.png

30 Scripts For Galleries, Slideshows and Lightboxes

|

Revisión sobre HTML5

Aunque ya en su momento hablamos de las etiquetas que traerá HTML5, no hemos llegado a hablar del resto de novedades que quieren introducir en HTML5.

Aunque en otros sitios ya se ha hablado de ello, al no haber encontrado un artículo que me pareciera sencillo y completo, sobre todo porque no solo comenta aspectos técnicos, sino un poco de base y explicación de por qué es necesaria esta nueva versión. En este caso se trata de un artículo que nos indica los cambios/novedades principales:

  • Nuevos elementos, los cuales ya hemos mencionado y que están divididos en las siguientes categorías: elementos metadata (title, base, link), elementos de sección para dividir las páginas en secciones (body, section, nav y article), elementos de bloque (blockquote, section, p y div), elementos inline (a, meter e img), elementos estructurados ol, blockquote y table), elementos interactivos entre el usuario y la página vía teclado o ratón (a, button y radio), control de formularios y otros.
  • Cambios de programación en el DOM, introduciendo la nueva versión del DOM.
  • Formularios web actualizados.
  • Eventos server-sent.
  • Capacidades para gráficos dinámicos.

An Overview of HTML 5

Vía / dzone

| | |

Personaliza los radio y los checkbox

Muchas veces los diseños no suelen ir de acuerdo con el aspecto de los radio y los checkbox que nos ofrecen los navegadores.
Crear controles que sustituyan los ya existentes puede darnos problemas de accesibilidad, salvo en este caso (bueno, y supongo que en otros), ya que lo que hace este script es aprovechar la funcionalidad de las etiquetas label para que el funcionamiento recaiga sobre estas etiquetas y no sobre las checkbox o los radio.
radiocheckbox.png
El script buscará los inputs radio y checkbox y los ocultará y cambiará el estilo de las label asociadas para que el funcionamiento sea el mismo.
ARC – Adam’s Radio/Checkbox customisation
Vía / Infected-FX