Javascript

Indicar calidad de la password con Javascript

ByLuis November 12, 2007

Ya hace tiempo comentamos como indicar la calidad de una contraseÃ±a mediante Javascript y esta vez vamos a mostraros otro ejemplo de cÃ³mo hacerlo.

En esta ocasiÃ³n se van a usar dos scripts, uno de ellos estÃ¡ basado en el algoritmo de Javascript Password Strength Meter, el cual mide que la contraseÃ±a tenga mÃ¡s de 8 caracteres, tenga minÃºsculas y mayÃºsculas, algÃºn nÃºmero, use caracteres especiales y use L33t.
En este caso el formulario se realiza con Ext Form, una gran librerÃa, pero no me gusta que el formulario se cree mediante javascript.
Password Meter
VÃa / WebAppers

Javascript

Guía para desarrollar Javascript accesible

ByLuis June 4, 2009

Interesante tutorial que nos enseña que problemas pueden encontrarse las personas con alguna discapacidad que le obligue a prescindir de Javascript (o usuarios con dispositivos móviles), y cómo solucionarlo.
Los mayores problemas con el que se encuentran las personas que no ejecutan javascript en sus navegadores son en la navegación (menús dinámicos), contenido oculto (accesible mediante Ajax), controles dinámicos (eventos de ratón, drag&drop, …) y confusión (la web está pensada para el uso de Javascript y no usarlo conlleva un contenido inicial deficiente).
Como resumen diría que hay que ofrecer los contenidos sin necesidad de javascript, éste sólo debe ser un apoyo, y que para comprobar si tu web es accesible lo mejor es probarlo inhabilitando el javascript en tu navegador.
Creating Accessible JavaScript
Vía / @maxkuri

Javascript | Quicklinks

Animated Table Sort with REGEXP Friendly

ByLuis August 13, 2010

Animated Table Sort is a plugin that allows you to animatedly sort a table based on a column’s <td>s, or on the content/value of a child/descendant element within those <td>s. The various <td>s fly to their new homes, giving a nice …

Post original

css | Javascript

Evitar el caché en las hojas de estilo

ByLuis November 7, 2007

Algo que suele ocurrir con frecuencia es que al realizar cambios en la hoja de estilos, estos no se vean reflejados en la pÃ¡gina por el cachÃ© del navegador.

Para evitar esto, tan solo es necesario un script que cargue los estilos y que le aÃ±ada un parÃ¡metro GET que sea Ãºnico para que el navegador lo entienda como un fichero nuevo. En este caso el parÃ¡metro es la fecha.

function loadStyleSheets(stylelist) {
var head = $$("head")[0];
var date = new Date();
var dateString = Date.parse(date.toString());
for(var i = 0; i < stylelist.length; i++) {
var link = document.createElement("link");
link.href="style/" + styleList[i] + "?" + dateString;
link.type = "text/css";
link.rel = "stylesheet";
head.appendChild(link);
}
}

En este caso el autor hace uso de la funciÃ³n de Prototype $$, pero se podrÃa hacer sin el uso de este framework.

Como consejos sobre el mismo tema yo aÃ±adirÃa dos:

si estÃ¡s trabajando en local y no ves los cambios, carga en el navegador directamente el fichero .css que hayas modificado, asÃ los cambios aparecerÃ¡n, luego los podrÃ¡s ver en la pÃ¡gina.
si la pÃ¡gina se crea mediante PHP le puedes aÃ±adir a la etiqueta link el parametro GET directamente:

<link rel="stylesheet" href="estilos.css?refresh=<?php echo time(); ?>" />

How to avoid caching and dynamic load of stylesheets

Javascript

Muestra las fechas de forma amigable con jQuery

ByLuis January 31, 2008

Interesante script realizado con jQuery que nos permite mostrar las fechas con un formato más cercano al usuario, en vez de mostrar la fecha en sí, mostraría hace cuanto ocurrió esa fecha.

prettyDate("2008-01-28T20:24:17Z") // => "2 hours ago"
prettyDate("2008-01-27T22:24:17Z") // => "Yesterday"
prettyDate("2008-01-26T22:24:17Z") // => "2 days ago"
prettyDate("2008-01-14T22:24:17Z") // => "2 weeks ago"
prettyDate("2007-12-15T22:24:17Z") // => undefined

En el ejemplo vemos que el último caso devuelve undefined, por lo que en esa circunstancia no modificará la fecha.

El autor también nos ofrece un ejemplo para modificar la fecha de nuestros enlaces en los posts. Si tenemos el siguiente enlace:

<a href="/2008/01/blah/57/" title="2008-01-28T20:24:17Z">January 28th, 2008</a>

podríamos acceder a los enlaces y mediante el title podemos modificar la fecha:

$("a").prettyDate();
setInterval(function(){ $("a").prettyDate(); }, 5000);

JavaScript Pretty Date

Javascript

Hapi.js + Vue.js internacionalización (i18n)

ByLuis September 6, 2019September 6, 2019

A partir de ahora no voy a explicar lo que hago, sino que compartiré lo que considere algo especial, pondré algún enlace a algún otro tutorial y por supuesto el enlace al tag de GitHub.

En esta ocasión he añadido internacionalización al proyecto. Parece una tontería, pero cuanto antes se meta, en mi opinión, mejor que mejor. Luego cambiar todos los textos para que admitan i18n es un tostón enorme.

Para añadir internacionalización usaremos el paquete vue-i18n, que añade todo lo que necesitamos. Aquí hay un tutorial bastante completo que explica cómo usarlo, y es el que yo he seguido.

Lo único que he añadido es que coja el idioma del navegador:

import( `@/lang/${ browserLang }.json` ).then( messages => {
	i18n.setLocaleMessage( browserLang, messages.default );
} );

Aquí está el código

Javascript

Select Box Factory: combos con diseño y funcionalidades

ByLuis September 9, 2008

Select Box Factory es un script que nos permite añadir combos en nuestra página web con un estilo propio y que además añade funcionalidades:

Usa divs en vez de options
Añade funcionalidades al desplegable
Los contenedores pueden contener lo que necesitemos
Las opciones pueden estar activas o inactivas
Los estilos se pueden modificar con facilidad
Distintos tipos de combos
Filtros

Select Box Factory

Similar Posts