Plugin jQuery para validar contraseñas

ByLuis

Aquellos que necesiten que en su aplicación web los usuarios introduzcan contraseñas seguras, podrán añadir este plugin jQuery que comprobará si las contraseñas tienen ciertas carácterísticas que las hacen seguras:

  • Uso de mayúsculas y minúsculas
  • Uso de números
  • Uso de caracteres especiales
  • Longitud de la contraseña
  • U opcionalmente similar a un username

El plugin mostrará un mensaje indicando la calidad de la contraseña y un color acorde a ésta.

jQuery plugin: Password Validation

Vía / Script & Style

Similar Posts

Popcorn.js librería Javascript que permite sincronizar vídeo y contenido en HTML5

ByLuis

Popcorn.js es una librería que permite sincronizar la etiqueta <video> de HTML5 con contenido que deseemos mostrar. Para ello utiliza las propiedades, métodos y eventos nativos de HTMLMediaElement. Además ofrece un sistema de plugins desarrollados por la comunidad:

document.addEventListener("DOMContentLoaded", function () {
      // Create a popcporn instance by calling Popcorn("#id-of-my-video")
      var pop = Popcorn("#video");
      // play the video right away
      pop.play()
      // add a footnote at 2 seconds
        .footnote({
          start: 2,
          end: 6,
          text: "This footnote is the stepping stone of progress!",
          target: "footnotediv"
        });
    }, false);

Podéis ver algunos ejemplos bastante interesantes. Una librería muy útil para presentaciones y vídeos corporativos.

Popcorn.js

| |

Menú radial mediante XHTML

ByLuis

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

jQuery Graceful Websocket: plugin jQuery para websockets

ByLuis

jQuery Graceful Websocket es un plugin jQuery que nos permite comunicarnos con el servidor usando websockets de HTML5. El problema es que tan solo Chrome permite los websokets (creo que Firefox los tiene desactivados por defecto por temas de seguridad), además se necesita que el servidor los pueda tratar, por lo que este plugin permite una alternativa mediante Ajax transparente al desarrollador.

// Si el servidor no admite websockets sustituye el ws:// por http://
var ws = $.gracefulWebSocket("ws://127.0.0.1:8080/");
// Envía datos al servidor. 
// Si el servidor no admite websockets lo envía mediante POST
ws.send("message to server");
// Recibe datos del servidor
// Si el servidor no admite websockets hace un polling mediante GET
ws.onmessage = function (event) {
   var messageFromServer = event.data;   
};

WebSocket plugin for jQuery with graceful degradation

jQuery Silver: buscador de enlaces con jQuery

ByLuis

jQuery Silver es un buscador de enlaces en el contenido de la página. Su uso es muy sencillo, se abre una ventana mediante shortcuts, y en ella se pueden realizar búsquedas de enlaces. Permite buscar en etiquetas A e INPUT.
Quizás a simple vista no sea muy útil, pero puede venir bien para aplicaciones más elaboradas.
jQuery Silver
Vía / DZone

Foo Framework: framework javascript

ByLuis

Foo Framework es un framework javascript realizado sobre Prototype que permite realizar aplicaciones RIA de forma sencilla.

Foo actúa como una máquina virtual que traduce las etiquetas especiales de Foo a Javascript y lo enlaza con datos para crear aplicaciones web. Une la facilidad del HTML y el poder del Javascript para crear aplicaciones web complejas.

Veo una gran utilidad a este framework sobre todo para los casos en que en un proyecto existe un grupo de desarrolladores de páginas sin gran conocimiento de XHTML o Javascript, ya que su desarrollo es muy sencillo, con poco código se puede hacer mucho.

Por ejemplo, con este código se puede hacer una tabla ordenable:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sorting Table</title>
<script language="javascript" src="../scripts/prototype.js"></script>
<script language="javascript" src="../scripts/foo.js"></script>
<script language="javascript" src="../scripts/foo.interact.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"></link>
<script language="javascript">
var dsCatalog = new foo.XMLDataSet('../data/data.xml', {path:'CATALOG.CD'});
</script>
</head>
<body xmlns:f="http://foo.riiv.net/namespace">
<div id="catalog" f:datasource="dsCatalog" f:implement="Sort">
<table cellspacing="1" cellpadding="0" border="0">
<tr>
<th f:sort="{by:'TITLE'}">Title</th>
<th f:sort="{by:'ARTIST'}">Artist</th>
<th f:sort="{by:'COMPANY'}">Company</th>
<th f:sort="{by:'COUNTRY'}">Country</th>
<th f:sort="{by:'PRICE', type:'number'}">Price</th>
<th f:sort="{by:'YEAR', type:'number'}">Year</th>
</tr>
<tr f:each="i in this.data as cd" class="${i%2==0?'odd':'even'}">
<td>${cd.TITLE}</td>
<td>${cd.ARTIST}</td>
<td>${cd.COMPANY}</td>
<td>${cd.COUNTRY}</td>
<td>${cd.PRICE}</td>
<td>${cd.YEAR}</td>
</tr>
</table>
</div>
</body>
</html>

Además Foo es modular, incluyendo una API para desarrolladores que permite crear tus propias etiquetas y plugins sin tener que modificar el core de la aplicación.

Foo Framework

Gracias DiarioTHC