Webmaster Libre

Desarrollo web con software libre

Buscador

Archivo de la categoría "Scripts"

MarkItUp, convierte tus textareas en completos editores con jQuery

La mayoría de nosotros permitimos html en nuestros comentarios, no demasiadas etiquetas pero si las necesarias para dar estilo a un mensaje correctamente. Para los usuarios acostumbrados a trabajar con HTML es lo más normal del mundo pero, para el resto del mundo, no significa nada y se tienen que conformar con enviar los post así, tal cual.

Como muchos incorporamos en nuestros sitios la librería jQuery he pensado que os vendría bien MarkItUp, un script con el que convertir cualquier textarea en un completo editor.
MarkItUp es muy ligero y personalizable, no es otro de esos editores llenos de características inútiles.

Y, por supuesto, lo de los comentarios sólo es una sugerencia de uso, obviamente sirve para cualquier otro formulario.

MarkItUp:
http://markitup.jaysalvat.com

Transiciones de color con Javascript

Si queréis añadir un toque extra de estilo a vuestros sitios y mostrar una transición de color cuando el usuario pinche o pase sobre algún elemento de la página ahora podréis fácilmente con este script: Javascript color fading script

Se trata de un script muy ligero con el que podréis añadir transiciones de color que afecten al fondo, borde o color de texto de los elementos de vuestro sitio.

Podéis ver una demo en el sitio del autor

Timeframe, un selector de fechas drag & drop con Prototype

No sé vosotros pero yo odio a muerte los selectores de fecha de algunos sitios, especialmente los de las reservas de hoteles o aviones. Un desplegable para la ida, otro para la vuelta…

Como parece que no soy yo sola la que los odia, nace Timeframe, en palabras de su creador, Stephen Celis porque:

I’m just sick of multiple date pickers on the same page

El script, que trabaja sobre Prototype, nos permite seleccionar rangos de fechas de múltiples meses con un simple movimiento de arrastrar y soltar.

Como no podía ser menos, en ie6 se ve que da asco, en los navegadores decentes va de lujo, pero parece que pronto habrá mejoras en los estilos y la experiencia será agradable para todos.

Timeframe: http://stephencelis.com/projects/timeframe

Via Ajaxian

Un teclado virtual para asegurar a fondo tus entradas de datos

Los que estamos acostumbrados a operar con banca online hemos visto miles de veces estos teclados virtuales, presentados en pantalla, mediante los que introducir nuestros datos sólo con la ayuda del ratón. Este tipo de medidas pretenden asegurar aún más esas entradas de datos sensibles, evitando que queden registrados mediante un keylogger o facilitando al usuario un teclado en el idioma adecuado (ya que puede encontrarse en otro país con un teclado que no admite caracteres especiales o que el usuario desconoce como usar).

Si vuestras aplicaciones precisan este extra de seguridad no olvidéis probar Virtual Keyboard Interface, un script javascript con el que añadir facilmente un teclado virtual a nuestros campos de texto y textareas. Su uso es sencillísimo, llamamos al script y la hoja de estilos en el head y le damos class="keyboardInput" al input o textarea a la que queramos acoplar el teclado.

Virtual Keyboard Interface

Virtual Keyboard Interface está disponible para múltiples idiomas, entre los que se incluye la distribución de teclado del Español de España (que desconozco si es muy diferente de las empleadas en Latinoamérica).

Virtual Keyboard Interface:
http://www.greywyvern.com/code/js/keyboard.html

Via Web Resources Depot

Fancybox, un sustituto para Lightbox con un toque extra de estilo

Es cierto, hay demasiadas alternativas a Lightbox como para que siga mereciendo la pena pararse a comentarlas. No obstante, Fancybox es especialmente atractivo.

Fancybox funciona con la librería jQuery y es un pequeño script con el que mostrar nuestras imágenes o grupos de imágenes con estilo. Fancybox viene con algunos efectos interesantes, como las animaciones al cerrar las imágenes o el indicador de carga que se sitúa sobre la minuatura de la imagen en lugar de ocupar toda la pantalla.

FancyBox

Sin duda, su aspecto es cuidado y su implementación sencilla. Además, el CSS está completamente separado del javascript, lo que facilita su personalización

Fancybox: http://fancy.klade.lv/

Via WebAppers

Adaptando tu sitio al clima

Cada día es más difícil sorprender a nuestros usuarios pero ¿qué tal si nuestro sitio reflejase el tiempo metereológico del momento?

En CSS Tricks publican un artículo de David Walsh que nos explica de forma sencilla como conseguir este efecto con PHP y CSS.

Ejemplo de cabecera

Para ello David nos ayuda con un script que obtendrá la información metereológica mediante el API de Yahoo! Weather y lo traducirá a una clase CSS con la que lograremos el efecto interesante ¿no?

Using Weather Data to Change Your Websites Apperance through PHP and CSS

Dean Edwars lanza IE7.js 2.0

Hace algún tiempo os comentaba una pequeña librería Javascript con la que hacer que IE6 se comportase como su hermano mayor y mejor educado IE7.

Como Internet Explorer 7 ya está en la calle, listo y disponible para cualquier usuario de Windows, Dean ha decidido actualizar la librería e incluir algunos cambios interesantes:

  • Ya no es una librería modular, ahora estará disponible en dos archivos: IE7.js e IE8.js
  • En IE7.js encontraremos los arreglos que se han llevado a cabo en el auténtico Internet Explorer 7 mientras que el resto de mejoras están incluídas en IE8.js
  • Ahora es más ligera y rápida
  • No tiene dependencias con otros archivos salvo el archivo “blank.gif”
  • Es posible enlazar directamente a los scripts en Google Code (hotlinking)

Sin duda es algo que todos los que nos pasamos el día peleando con Internet Explorer vamos a agradecer, sobre todo con la mejora en la velocidad ya que antes con algunos fixes se relentizaba toda la página un montón.

IE7.js en Google Code

HeatColor, color dinámico para complementar tu mensaje

El color es, sin duda, una de las formas más simples de transmitir un mensaje. A pesar de que, para crear sitios accesibles, no debemos usar el color como único medio de comunicar un mensaje, nadie dice que sea malo hacerlo de forma complementaria.

HeatColor es un plugin para jQuery creado por Josh Nathanson que nos permite asignar colores a los elementos de nuestros sitios (como tablas, divs, listas…) basándose en valores, bien pasándole al programa los valores minimo y máximo, bien introduciéndolos manualmente.

HeatColor

HeatColor:
http://www.jnathanson.com/blog/client/jquery/heatcolor/index.cfm

Via Ajaxian

Datejs, una librería javascript para domar las fechas

Datejs es una librería javascript con la que podrás manipular fechas y permitir a tus usuarios utilizarlas de una forma más intuitiva.
Seguro que lo habéis visto en aplicaciones como Remember the Milk! o Todoist, en lugar de tener que escribir las fechas completas podemos usar expresiones como “today”, “tomorrow” que se traducirán automáticamente en una fecha exacta.

Datejs

Datejs está liberada bajo licencia MIT y disponible para descarga en Google Code y, por si fuera poco, dispone de soporte para múltiples idiomas (+ de 150) y cambiar el idioma es tan simple como:

<!-- Set the CultureInfo to de-DE (German/Deutsch) -->
<script type="text/javascript" src="date-de-DE.js"></script>

13 excelentes menús con Javascript

A lo largo del día son muchos los que aparecen por aquí buscando un menú con javascript, o al menos eso dicen mis estadísticas. Hoy en mi repaso al lector de feeds me he encontrado con una estupenda recopilación de 13 menús con Javascript que han publicado en Noupe.

Sexy Sliding Menu

Los hay realmente interesantes así que no dejéis de echarles un vistazo.