Usando jQuery y CSS he creado este pequeño menú desplegable de subscripción donde podemos ofrecer a nuestros usuarios los enlaces a los distintos feeds rss de nuestra página.

El menú es realmente sencillo, no es nada complicado ni nada del otro mundo. Pero, gracias a él podemos darnos cuenta de que con 6 lineas de jQuery y un poco de CSS podemos lograr cosas alucinantes.

Si sabéis jQuery, esto os parecerá muy sencillo y no os enseñará nada. Si por el contrario no sabéis, este código os podrá servir de introducción y os dareis cuenta de que es realmente sencillo hacer cosas con el sabiendo muy poco.

Veamos el código

HTML

Nada que destacar por aqui. Una caja con dos mas dentro, una de ellas es la que se muestra y se oculta que contiene, además, la lista de enlaces y la otra es para la flecha que indica el estado de la caja.

<div id="caja_rss">
	Subscribete
	<div class="flecha cerrado">&nbsp;</div>
		<div class="caja" style="display:none">
			<ul>
				<li><a href="#">Feed RSS</a></li>
				<li><a href="#">Email</a></li>
				<li><a href="#">Comentarios</a></li>
			</ul>
		</div>
	</div>
</div>

CSS

Lo mismo que lo anterior. Si estamos familiarizados con CSS este código no tiene nada de especial. Unos bordes redondeados por aqui, fondo naranja por allí, algunas sombras y poco más.

#caja_rss {
	width: 120px;
	margin: auto;
	text-align: left;
	font-size: 16px;
	padding: 8px 14px 9px;
	color: #fff;
	text-decoration: none;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);

	cursor: pointer;
	background-color: #ff5c00;
}

.flecha {
	background: url('flechas.png') no-repeat;
	float: right;
	width: 20px;
	height: 20px;
}
.flecha.cerrado {	background-position: 0px -10px;	margin-top: -13px;	margin-bottom: -10px;}
.flecha.abierto {	background-position: 0px 10px;	margin-top: -23px;}

.caja {
	background: #EEE;
	margin: 10px -10px -6px;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.caja ul {	padding: 5px 10px;	list-style: none;	margin: 0;}
.caja li {	padding: 2px 0;}
.caja a {
	color: #444;
	font-size: 12px;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px dotted #888;
}
.caja a:hover {	border-bottom: 1px solid #666;	color: #222;}

La magia, jQuery

Aqui es donde pasa todo.

Como vemos el código jQuery, como siempre va contenido dentro del $(document).ready para evitar que se ejecute antes de terminar la carga.

Luego tenemos un toggle que se ejecuta al hacer clic sobre el elemento #caja_rss. Vemos como dentro de este elemento tenemos dos funciones, cada una de ellas se ejecutará una vez cada una.

1. La primera función sirve para desplegar el menú y eliminar y añadir la clase cerrado y abierto respectivamente
2. La segunda función hace lo contrario para dejar el menu como al principio

$(document).ready(function(){
	$('#caja_rss').toggle(
		function(){
			$('.caja').slideDown();
			$('.flecha').removeClass('cerrado');
			$('.flecha').addClass('abierto');
		},
		function(){
			$('.caja').slideUp();
			$('.flecha').removeClass('abierto');
			$('.flecha').addClass('cerrado');
		}
	);
});

Y esto es todo. Como siempre, dudas y preguntas en los comentarios y si te ha servido de ayuda o te ha gustado comparte la para ayudar a cuantos más mejor.

jQuery.suggest es un plugin sencillo de autocompletado.

Lo mejor de este plugin es su sencillez. Al situarnos sobre un input de texto y teclear sobre el nos irá sugeriendo algunas opciones y al pulsar tab o intro se autocompletará actualizando el campo con el texto en cuestión.

Si hay más de una coincidencia para el texto introducido aparecerá unos ... indicando que hay más de un resultado. Pulsando las flechas arriba y abajo podremos ver los distintos resultados y seleccionar uno. Todo, muy intuitivo.

Uso…

Su uso es sencillo. Tenemos una variable que será un array que contendrá todas las sugerencias. Por último indicamos el #container (elemento) al que le pasamos el array y las dos opciones de configuración, suggestionColor y moreIndicatorClass, este último, indica el elemento que aparecerá cuando haya más de una coincidencia.

var haystack = ["ActionScript", "AppleScript", "Asp", "BASIC", ...];

$(function(){
  $('#container').suggest(haystack, {
    suggestionColor   : '#cccccc',
    moreIndicatorClass: 'suggest-more'
  });
});

Demás esta decir que hay que incluír el archivo del plugin y la librería jQuery.

Si no conocéis jQuery Mobile, se trata de un framework que es compatible con la mayoría de navegadores webs de móviles. Además de, estar bien documentado y de poder generar themes con ThemeRoller, incluye también numerosos widgets optimizados para pantallas tactiles así como botones, barras de herramientas, listas, etc que nos ayudarán a comenzar nuestro proyecto móvil.

Sin duda, como mínimo, se merece un vistazo

Para implementarlas en los distintos elementos simplemente tenemos que añadir las clases especificas donde lo deseemos o añadir las propiedades directamente en nuestro archivo CSS.

El problema es que por ahora solo son compatibles con Safari, Chrome y Firefox. Microsoft a anunciado que las animaciones serán compatibles en Internet Explorer 10 y Opera hará lo propio con la versión número 12.

Para solucionar esto podemos usar Animate.css conjuntamente con jQuery y Modernizr. Si el navegador no es compatible con las animaciones css podemos lanzarlas por medio de jQuery y así conseguir que todos los usuarios en todos los navegadores vean correctamente el sitio.

Una de las peculiaridades del proyecto es que en las tiendas, por lo general, los ordenadores o TPVs no disponen de teclado y ratón ya que usan pantallas táctiles por lo que me vi obligado a incluír un teclado en pantalla para los inputs de texto.

Para ello encontre dos soluciones en la web. Por un lado estaba jQuery Keypad y por otro lado Virtual Keyboard.

Yo decidí usar la primera por su sencillez. Para implementar jQuery Keypad en cualquier página necesitamos. Primero que nada, agregar las librerías necesarias por el plugin así como jQuery:

Luego iniciamos el plugin:

Con esto será suficiente para tener el teclado virtual en los inputs que queramos. Para ello, si queremos un teclado Qwerty incluiremos la clase text. Si solo queremos un teclado numérico, añadimos la clase num al input.

En esta galería tenemos dies ejemplos de distintas animaciones que podemos conseguir con CSS3. En la demostración, al situarnos sobre las distintas cajas podemos ver las distintas transacciones y transformaciones que generan los distintos efectos.

No se que utilidad más halla del efecto visual podemos sacarle a este plugin, pero me ha llamado la atención y lo comparto con ustedes.

// Al hacer click en cualquier elemento del documento
$(document).click(function(){
    // Ocultamos el menu
    $(".menucontainer").hide();
});

El problema, es que si en el menú tenemos, por ejemplo, una lista ol y hacemos clic sobre ella el menú también se oculta. Esto es debido a que el clic se propaga hacía atras llegando finalmente al document. Para evitar esto añadimos lo siguiente:

// Si el click es en cualquier elemento del menu
$(".menucontainer").click(function(e){
    // Paramos la propagación del click
    // por lo tanto no llega al document, y no oculta el menu
    e.stopPropagation();
});

Solucionado. Darle las gracias al señor Rob Bell por su post.

// Codigo para redirigir al primer enlace encontrado
$('elemento').bind('click', function(){
    window.location = $('a:first', this).attr('href');
});

El problema es que no era un enlace real por lo que si hacíamos click central o Mayus + Clic por ejemplo para abrir el enlace en una nueva pestaña, no funcionaba.

Con SuperLink solucionamos esto ya que lo que hace es crear un elemento a posicionado de forma absoluta sobre el elemento con lo cual tenemos un enlace real.

Para usarlo, además de la librería agregamos la siguiente linea:

$('elemento').superLink('a:last');

Tiene algunos problemas como que por ejemplo no podemos usar el :hover del elemento ya que al situar un a encima este no vale de nada.

Como podemos ver en la demo de jwerty, por ejemplo, si apretamos Ctrl + Alt + Z, por ejemplo, descargamos el plugin.

Lo mejor de todo es que es realmente sencillo de usar:

jwerty.key('ctrl+shift+P', function () { [...] });
jwerty.key('⌃+⇧+P', function () { [...] });

Sencillo, ¿verdad?

Con Uniform y con jQuery además de mejorar, en mi opinión, el aspecto también conseguimos unificar la apariencia en cada navegador y sistema, con lo cual mejorar la experiencia del usuario.

Flexslider es un plugin jQuery que destaca por adaptarse al tamaño de la ventana tal y como podemos ver en la demostración.

El plugin es completamente gratuito e incluye animaciones de transición personalizables y otras opciones típicas de este tipo de plugins. Además es muy ligero (solo 5 kb reducido) y es compatible con Safari 4+, Chrome 4+, Firefox 3.6+, Opera 10+, y IE7+ así como dispositivos móviles con iOS y Android.

Es muy útil para mostrar algunos titulares en la parte superior, por ejemplo, sin ocupar un gran espacio. Además es bastante visual ya que se incluyen efectos de transición además de botones para pausar la rotación, ir a la siguiente noticia o a la anterior.

Para aplicarla a nuestro sitio debemos de incluir los archivos necesarios por el plugin además de la librería jQuery:

A continuación el HTML:

This is the 1st latest news item.
This is the 2nd latest news item.
This is the 3rd latest news item.
This is the 4th latest news item.

Y por último iniciamos el plugin indicandole el id del contenedor de las noticias:

Con jQuery podemos mejorarlos. Con el plugin Multiselect cambia el diseño y mejora la usabilidad de estos elementos.

Usando este plugin permitiremos al usuario seleccionar varios elementos usando solo el ratón. Además estos elementos se mostrarán en una lista teniendo la posibilidad de eliminarlos pulsando la x situada a la derecha.

En este caso me encuentro con jQuery Favicon Notifier, un plugin que te permite añadir notificaciones al favicon tal y como hace, por ejemplo, Gmail.

Te permite definir la posición del número en cuestión así como los colores de este, por ejemplo:

$.faviconNotify('/favicon.ico', 67, 'br', '#123456', '#ABCDEF');

Como vemos, le pasamos 5 parámatros:

1. Imagen del icono
2. Número
3. Posición del número. Puede ser tl que sería top-left, tr sería top-right o bl o br que serían bottom-left y bottom-right respectivamente.
4. Color del borde
5. … y color interno del numero.

Un plugin ligerito, sencillo y útil para añadirle funcionalidad a nuestro Favicon.

Además, el plugin tiene algunos detalles extras, como que el indicador cambia de distancia con respecto al cursor dependiendo de la distancia o se vuelve invisible al acercarnos al objetivo.

Un plugin curioso, sin duda.

[Vía Kabytes]

Como vemos en el web del plugin, este aún se encuentra en versión beta pero funciona y se puede usar.

$(document).ready(function() {
$('#forward').click(function() {
  $('#test').animate({
	translateX:'-=150',
	translateY:'+=150',
	scale:'+=2',
	rotateY: '+='+(2*Math.PI),
	rotateX: '+='+Math.PI,
	rotateZ: '+='+Math.PI
  },1500);
});  

$('#backward').click(function() {
  $('#test').animate({
	translateX:'+=150',
	translateY:'-=150',
	scale:'-=2',
	rotateY: '-='+(2*Math.PI),
	rotateX: '-='+Math.PI,
	rotateZ: '-='+Math.PI
  },1500);
})
});

El código anterior crea dos animaciones. Una al cliquear el elemento #forward que aumenta la imagen usando un efecto 3D. Y la otra, #backward, reduce la imagen usando el mismo efecto. Podemos ver este efecto en la web.

El diseño esta muy bien conseguido pero además son dinámicas y personalizables por medio de CSS.

Como podemos ver en los ejemplos, la librería incluye validación de formularios, cálculos en tiempo real y manejo de errores. Además se verifica la información de la tarjeta de crédito en los servidores de Recurly entando así uso de nuestra CPU.

Para usar la librería en nuestra web necesitamos llamar a la hoja de estilos, a jQuery y al archivo recurly.js. Después solo nos queda iniciar la librería y definir los parámetros de configuración:

Luego solo nos queda añadir el div donde saldrá el formulario en nuestro HTML.

Con esto debería de ser suficiente para empezar.

Lo que hace es comprobar el navegador (dispositivo) que usa el visitante para acceder a nuestra web. Si este se trata de un móvil sigue el siguiente proceso:

1. Detiene la carga de imágenes, vídeos, etc.
2. Carga los recursos que Mobilize necesita.
3. Y adapta el contenido para ser visto desde un móvil.

En la documentación podemos ver un ejemplo del resultado que podemos obtener.

Para instalar Mobilize.js en nuestra web tenemos varios métodos. Pero, si usamos WordPress lo muy sencillo. Simplemente tenemos que instalar el plugin oficial.

Cuando tenemos que usar un select con muchos elementos siempre es bueno ofrecer la posibilidad de buscar al usuario para filtrar elementos de forma sencilla y encontrar la opción que desea. En los campos select multiples, no solo estaría bien ofrecer esa misma opción de filtrado si no que también es buena idea mostrar los elementos seleccionados y permitir que el usuario selecciones varios sin tener que pulsar la tecla control o mayus.

Todo esto lo conseguimos con Chosen de forma sencilla.

Instalación:

1. Añadimos los archivos necesarios e inicializamos el plugin:

2. A continuación, solo nos queda añadir la clase chzn-select a los elementos selects que queramos tratar con Chosen.
3. ¡Listo!