Dos primos luchan contra la tecnología

Aprendizaje y formación en informática profesional mediante videotutoriales

Programar un generador de contraseñas aleatorio con Javascript

JavascriptOs presento un pequeño script para generar contraseñas aleatorias para aquellos que se quedan en blanco cuando necesitan escribir una contraseña o para evitar hacerlas al azar nosotros mismos ya que siempre solemos escoger los mismos caracteres de manera inconsciente. Casi toda la gente a la que se le pregunta un número al azar entre el 1 y el 10 dicen 3 o 7 la mayor parte de las veces e igual pasa con las letras. Por eso puede ser recomendable utilizar un generador aleatorio para evitar caer en repeticiones.

(more…)

Efectos visuales para tu web con Script.aculo.us

Scriptaculous

¿Qué es Script.aculo.us?

Scriptaculous es una librería Javascript que nos permite añadir efectos visuales al estilo de Flash en nuestra web mediante sencillas instrucciones en Javascript. Esta librería utiliza como base otra famosa librería Javascript llamada Prototype por lo que son totalmente compatibles. Su sintaxis es realmente sencilla y en muy poco tiempo seremos capaces de incluir efectos visuales en nuestras páginas web.

Este artículo es sólo una introducción, pero en artículos siguientes se irán poniendo ejemplos para ver las capacidades de esta librería.

¿Por qué utilizar Scriptaculous?

Porque hace la experiencia de navegación de tu página más agradable e incrementa la usabilidad. Pensad en las posibilidades que ofrece la utilidad dragdrop de esta librería para hacer un carro de la compra por poner un ejemplo.
Eso sí, quien hacer una página que parezca Flash cargada de efectos visuales que utilice Flash y se olvide de esta librería que se le quedará corta y hará de la página un sitio horriblemente innavegable.

¿Cómo se utiliza Scriptaculous?

El procedimiento es sencillo. Descargamos la última versión de su página oficial y lo descomprimimos.
En la página web importamos las librerías Javascript de la siguiente manera cambiando la ruta según el caso.

<head>
<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous/scriptaculous.js"></script>
</head>

En ocasiones no necesitaremos utilizar todos los módulos por lo que podemos importar únicamente las lbrerías de nuestro interés:

<head>
<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous/scriptaculous.js?load=effects,controls">
</script>
</head>

Los módulos de Scriptaculous

Scriptaculous cuenta con los siguientes módulos:

  • builder: para la manipulación del DOM del documento, puede añadir y elminar nodos del árbol DOM.
  • controls
    • dragdrop: para mover y arrastrar componentes con el ratón.
    • acordion: menus desplegables tipo acordeon
    • sortables: listas ordenables
    • slider: controles deslizantes.
    • autocompleter: sugerencias de autocompletado en inputs de formularios.
    • In-place editing: nos permite editar con un simple click cualquier elemento que no es editable como <p>, <li> o <a>.
  • effects:
    • opacity: cambia la transparencia del elemento
    • scale: cambia las dimensiones de un elemento.
    • morph: transformaciones
    • move: movimiento
    • highlight: cambia el color de fondo de un elemento.
    • parallel: combina varios de los anteriores efectos para que se ejecuten en paralelo.
    • y una colección de efectos combinados que será lo que más usaremos.

Ventajas y desventajas de scriptaculous

Ventajas

  • No es flash, por lo que los contenidos de la página son fácilmente indexables por los robots de los buscadores.
  • No tener que aprender Flash para hacer cosas vistosas en la web.
  • Es gratuito.

Desventajas

  • La documentación es muy pobre. Tiene una wiki insuficiente en el sitio oficial, hay mejores referencias en páginas no oficiales
  • El peso. Son unos 140KB que hay que cargar por lo menos en la primera visita.

Descargar librería en Script.aculo.us

Javascript y AJAX fáciles con Prototype

Prototype_logo

Cada día se utiliza más Javascript para programar webs desde la revolución de la Web 2.0 y AJAX pero todos sabemos que no es un lenguaje precisamente agradable de utilizar. La principal dificultad de Javascript consiste en la compatibilidad entre navegadores. Lo que funciona en Internet Explorer no tiene por qué funcionar con Firefox o en Opera. Y no sólo hay que mirar la compatibilidad enre navegadores sino que debemos tener presente que puede no ser compatible entre versiones de un mismo navegador. Si a todo esto le sumamos que los navegadores no suelen llevar buenos depuradores para encontrar errores de código tenemos un lenguage que puede provocar muchos dolores de cabeza peleándonos con cosas como el getElementById().

La librería Prototype es una librería de utilidades para Javascript orientada a objetos que te ahorra escribir gran parte del código gracias a sus atajos. Como gran ventaja tenemos que el código es completamente compatible con todos los navegadores. Incluso incluye funciones para AJAX.

(more…)