Validar NIF/CIF/NIE con Rails

Desde RailsLab Blog viene este plugin de Rails que tiene como función: validar en un modelo nif/cif/nie español. Al parecer, realizar este proceso parece ser muy tedioso, y muchos recurren googlear para hallar una solución. Pero para Rails el plugin mencionado nos alivia la tarea. Su instalación, desde la consola:

script/plugin install 
http://svn.railslab.net/public/rails_plugins/trunk/validate_spanish_vat/

En RailsLab podemos encontrar la forma de cómo utilizarlo, como también documentación acerca de este plugin. Esperemos que nos traigan mas plugin y más información sobre este maravilloso framework, Rails.

Ellipsis: propiedad text-overflow con JavaScript

La propiedad CSS text-overflow, reemplaza los caracteres finales de una cadena de texto por puntos suspensivos si esta supera el ancho del elemento contenedor (p, div, span, etc). Con este ejemplo visual se entenderá mejor.

Ellipsis con Javascript

Internet Explorer viene con esta interesante característica, pero desafortunadamente no es estándar y no es soportado por Firefox, Opera y otros navegadores (en la versión CSS 3, ya es estándar está propiedad). Así que en el blog ruzee.com encontramos una solución a esto usando JavaScript. Creando un clase ellipsis y aplicándolo a los elementos que deseamos. Ejemplo:

.w2 { width:300px; } 
 <div class="w2">
<h3 class="ellipsis">
This is another heading in a wider container
</h3>
<p>And some more text that is long, long, long, and wraps around, cool!</p>
</div>

En el ejemplo, apreciamos el estilo .w2 con ancho de 300px. Si el texto del elemento <h3> supera la longitud de 300px, mostrará puntos suspensivos (...) como caracteres finales, pues usamos la clase ellipsis; pero no aplicará al texto del elemento <p>.

Enlaces | Demo, Descarga [ellipsis.js]

Utilidades online para CSS (optimizar, comprimir, crear menús)

Una lista de utilidades o herramientas para optimizar y comprimir nuestras hojas de estilo (CSS, cómo también para crear layouts o menús.

Optimizar CSS

  1. Clean CSS
  2. Code Beautifier
  3. CSS Cascading Style Sheet Optimiser
  4. CSS Optimizer

Comprimir CSS

  1. CSS Drive
  2. CSS Compressor

Generar menús y layouts CSS

  1. [listulike] CSS Generator
  2. Scriptomizer
  3. inknoise - Layout-o-Matic
  4. CSS Creator
  5. The Generator Form
  6. QrOne CSS Designer

Vía | Lifehacker

script.aculo.us - Arrastrar para descargar

En el blog de Ryan Scherf encontre un script que hace uso de las librerías prototype y script.aculo.us para generar el efecto de drag & drop sobre achivos que deseamos descargar.

Ajax Download

Ver demo

ThickBox, ventana modal de múltiple función

ThickBox es una pequeña utilidad (hecha con JavaScript y la librería jQuery) que tiene como función ser una ventana modal de múltiple propósito: mostrar una ó un grupo de imágenes, contenido texto y también contenido generado con Ajax.

ThickBox

Cómo usarlo

Descarga la librería jQuery y la utilidad Thickbox

<script type="text/javascript" src="path-to-file/jquery.js"></script>
<script type="text/javascript" src="path-to-file/thickbox.js"></script>

También hay que incluir la hoja de estilos, que proporciona ThickBox

<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" media="screen" />

En los ejemplos que proporciona la página del ThickBox podemos aprender las diversas formas de usarlo.

Magic Image Rotation, diapositivas de imágenes (JavaScript)

Magic Image Rotation es una pequeña utilidad que muestra una serie de imágenes y las rota cada n segundos, tal como una diapositiva de imágenes. Su característica sobresaliente es que cada imágen que se muestra puede tener un enlace o link independiente del resto de imágenes.

Imagen Rotatoria 

Cómo usarlo 

Tendremos que modificar el archivo banner.js para agregar la ruta de las imágenes, los enlaces a donde apuntan y un título. También podemos modificar el tiempo que se mostrará cada imagen.

var BannerLoad =  
[
['mienlace.htm',     'graphics/one.jpg',     'Blue Flower'            ],
['http://www.ribosomatic.com/',     'graphics/two.jpg',     'Distant Rainstorm'        ],
['index.htm',     'graphics/three.jpg',     'Raindrops on a Leaf'    ],
['index.htm',     'graphics/four.jpg',     'Jungle Dream'            ],
['index.htm',     'graphics/five.jpg',     'Daisies'                ],
['index.htm',     'graphics/six.jpg',     'Sunflowers'            ]
];

En la parte HTML llamamos al archivo Javascript y especificar un div cuyo id es banner (esto también se puede modificar en el archivo banner.js).

<script src="banner.js" type="text/javascript"> 
</script>
<div id="banner"></div>

 Enlaces | Demo y Descarga

Smooth Scroll, desplázate con estilo por una página web

Está pequeña utilidad llamada df Smooth Scroll hecha en JavaScript, nos permite desplazarnos entre los link que apuntan a la misma página (anchor).

Cómo usarlo

<script type="text/javascript" src="smooth.pack.js"></script>

En la parte html

<a name="top" href="#footer">IR ABAJO</a>
<p>Contenido por aqui...</p>
<a name="footer" href="#top">IR ARRIBA</a>
<p>Mas contenido por aqui...</p>

El resultado será un desplazamiento con estilo entre los enlaces internos gracias a que se usa JavaScript.

Enlaces | Demo 

30 degradados de color Web 2.0 para Gimp

Gimp Tutorials nos trae una serie de 30 degrados de color (archivos .grr) con estilos Web 2.0 para Gimp. Podremos usarlos para crear header, backgrounds, botones y más basados en estos interesantes estilos.

Utilidades Gimp 

Para instalarlos vamos a la carpeta ".gimp-2.2gradients"; en Windows está en la carpeta de instalación del Gimp; en Linux, en la Carpeta Personal habilitamos 'Mostrar los archivos ocultos' y allí estará la carpeta '.gimp-2.2'. Copiamos los 30 archivos .grr a la carpeta 'gradients' y listo! Iniciamos El Gimp, seleccionamos la herramienta , y veremos una serie de estilos web 2.0 listo para usarse.

Descargar estilos!

Vía | Deziner Folio 

Aprendiendo jQuery en 15 minutos

Vía Ajaxian, una pequeña presentacion acerca del uso de jQuery. Explica selectores CSS, manejo de eventos, Ajax entre otros.

jQuery en 15 minutos

Calendar Data Select, control calendario para Rails

Calendar Date SelectCalendar Date Select es un nuevo control calendario (muestra dia y hora) diseñado para usarse en aplicaciones Rails. Usa la librería Javascript Prototype.

Para instalar este plugin, vamos a la consola y escribimos:

script/plugin install http://calendardateselect.googlecode.com/svn/tags/calendar_date_select

Enlace | Ruby Inside, Demos Calendario

Google

Categorias

Archivos