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.

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

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

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.

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.

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

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

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

• 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.
• Couloir.org: otra galería de imágenes en forma de presentación, con fade, redimensionamiento de la ventana y sonido.
• Lightbox2: uno de los mejores y de los más conocidos, transparencias, fade y posibilidad de navegar entre las diferentes imágenes.
• 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.
• 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.

30 Scripts For Galleries, Slideshows and Lightboxes

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

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.

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

Permite:

• Diseño fluido con ancho 100%.
• Diseño estático con tamaños de 640px, 760px, , 900px y 1000px
• Personalización del ancho para diseños estáticos de forma sencilla
• Posibilidad de hacer diseños flexibles en respuesta a configuraciones iniciales del tamaño de fuente realizadas por el usuario.
• Centrado en la página para diseños de ancho menor de 100%.
• Facilidad para reescribir las clases CSS para aquellos que quieran diseños con tamaños exactos.

___layouts

Vía / Ajaxian

• article: una sección de la página que es una parte independiente de un documento, página o sitio.
• aside: contenido que está relacionado tangencialmente al contenido, suele representarse con los sidebars.
• dialog: una conversación.
• footer: pie de página de una sección.
• header: cabecera de una sección.
• nav: representa la navegación de la página.
• section: documento genérico o parte de una aplicación.

A parte de los que se mencionan en el artículo, yo he encontrado otros que también me han llamado la atención:

• ping: atributo de los enlaces que contiene una lista de URIs que son interesantes de ser notificadas si el usuario sigue por ese enlace.
• datagrid: corresponde a una represntación interactiva de una lista, árbol o datos tabulados.
• progress: barra de progreso para representar el desarrollo de una tarea.

HTML5 Elements and Attributes

Vía / 456 Berea Street

Si te encuentras en esa situación, HTML Playground puede serte de mucha utilidad, ya que te muestra todas las etiquetas HTML, con su descripción y un código de ejemplo, el cual se puede visualizar y modificar.

HTML Playground

Vía / Ajaxian

Para agrupar opciones se necesita la etiqueta optgroup, la cual encerrará las opciones que pertenecen al mismo grupo, y dispondrá de un atributo label que será el texto que aparecerá agrupando las opciones.

<select name="prueba">
 <option value="1">Opción 1</option>
 <optgroup label="Opción 2">
   <option value="2.1">Opción 2.1</option>
   <option value="2.2">Opción 2.2</option>
   <option value="2.3">Opción 2.3</option>
 </optgroup>
 <option value="3">Opción 3</option>
 <optgroup label="Opción 4">
   <option value="4.1">Opción 2.1</option>
   <option value="4.2">Opción 4.2</option>
 </optgroup>
</select>

A la hora de modificar los estilos de optgroup, hay que tener cuidado que algunos los heredarán las opciones que contenga, por ejemplo el color de la letra.

Ejemplo

Hay un total de 37 puntos que nos explican qué es lo que debemos hacer o qué es cada cosa dentro de una página web. Empieza explicando lo que es un HTML, luego un XHTML, los diferentes tipos de XHTML, el DOCTYPE, la validación del documento, la codificación (recomendando UTF-8), el BOM dentro de un archivo UTF-8, las entidades, la semántica (el uso de cabeceras y de em o strong), los párrafos o los saltos de línea y muchas otras cosas más que recomendamos que leaís.

Bulletproof HTML: 37 Steps to Perfect Markup

Uno de esos documentos que odiamos hacer, pero que siempre echamos de menos tener.

Creating a Style-Guide for your site

Vía / SitePoint