Webmaster Libre

En sitios donde la navegación profundiza bastante en páginas internas es siempre interesante facilitar al usuario la vida indicándole en todo momento donde se encuentra dentro de la jerarquía del sitio.

El método más empleado y práctico es el de las “migas de pan” o breadcrumbs (en inglés), con las que vamos indicando al usuario el camino y donde se encuentra con respecto a la home del sitio.

A veces, sobre todo si nuestras páginas tienen títulos largos, nos encontramos con el problema de encajar estas migas de pan en la estructura de la web. Para solucionarlo muchas veces recurrimos a limitar el número de pasos que mostramos pero esto no siempre es lo más cómodo para el usuario.

jBreadCrumb es un plugin para jQuery con el que podremos crear “migas de pan” que se colapsarán cuando sean muy largas o contengan muchos elementos, de esta manera el usuario seguirá disponiendo de la información pero sin molestarle demasiado visualmente.

Poner en marcha el plugin es tan simple como insertar el siguiente código:

jQuery(document).ready(function()
{
	jQuery("#breadCrumb").jBreadCrumb();
})

Podremos configurar varios efectos para cuando el usuario pase el ratón por encima de los elementos colapsados.

Para que funcione necesitaremos incluir en nuestras páginas la librería jQuery y el plugin easing.

jBreadCrumb: http://www.comparenetworks.com/developers/jqueryplugins/jbreadcrumb.html

Por defecto, los navegadores no nos permiten definir el estilo de los campos de subida de ficheros o inputs de tipo file (input type="file").

En general no suele suponer más que una molestia sin más pero, por la dificultad de hacerlo con CSS, solemos dejarlo así sin más.

Ahora que vivimos una nueva era de interfaces web en las que se da una importancia capital al diseño es como una espinita clavada en el corazón del diseñador que, seguro, tiene en mente una forma más bonita de representar el campo o más bien el botón.

Una vez más, jQuery al rescate con un plugin que nos permitirá cambiar el botón sin demasiados quebraderos de cabeza.

Para ello, simplemente tendremos que incluir en nuestros sitios la librería jQuery y el plugin jQuery File Style.

<script src="jquery.js" type="text/javascript"> </script>
<script src="jquery.filestyle.js" type="text/javascript"></script>

Y añadir un código tal que el siguiente, donde definiremos la imagen que hará las veces de botón así como el tamaño del input.

$("input[type=file]").filestyle({
     image: "choose-file.gif",
     imageheight : 22,
     imagewidth : 82,
     width : 250
});

Los inputs modificados con este plugin mantienen la clase del input originario por lo que podremos seguir dándole estilo adicional mediante CSS.

File Style Plugin: http://www.appelsiini.net/projects/filestyle

Vía Intenta

El menú desplegable es uno de esos recursos casi me atrevería a decir indispensables, sobre todo cuando queremos mostrar mucho contenido en poco espacio (lo mismo que sucede, por ejemplo, con los sistemas de pestañas).

La búsqueda de un menú desplegable accesible y compatible con todos los navegadores nos ha llevado a ir probando diversas soluciones, incluso a desarrollar cada uno la suya.

Pop! es una solución más que agregar a nuestra caja de herramientas, con ella podremos crear desplegables que degradarán perfectamente para usuarios sin javascript y en los que podremos colocar cualquier tipo de contenido ya sea texto, enlaces, videos, fotos…

Pop! requiere el uso de jQuery y crear nuestros menús es tan fácil como incluir el javascript y la hoja de estilo (que podremos adaptar a nuestras preferencias)

<link href="/pop/stylesheets/pop.css" media="all" rel="stylesheet" type="text/css"/>

<script language="javascript" src="/pop/javascripts/jquery.js" type="text/javascript"></script>
<script language="javascript" src="/pop/javascripts/jquery.pop.js" type="text/javascript"></script>

Inicializar Pop!

<script type='text/javascript'>
   $(document).ready(function(){
     $.pop();
   });
</script>

Y envolver el contenido que queramos convertir en desplegable con un div con la clase “pop” (o la que hayamos definido al inicializar el script).

Pop! está bajo licencia MIT.

Pop!: http://pop.seaofclouds.com/

Vía Web Resources Depot

Cuando hablamos de diseño web, sobre todo en la fase propiamente de diseño en programas de edición de gráficos, es relativamente frecuente observar un efecto conocido como “page curl” o pliegue de página.

Para entendernos todos, es el efecto que observamos cuando pasamos las páginas de un libro por ejemplo.

Si quieres agregar un toque curioso a tu sitio web y agregar una esquina que se doble para mostrar el contenido de debajo te vendrá bien este plugin libre para jQuery creado por Elliott Kember.

Para hacerlo funcionar sólo necesitarás usar jQuery y jQuery UI (preferiblemente la versión 1.5) con el módulo resizable. Luego con un par de líneas de código y creando un elemento con id “target, que contendrá lo que quieras que se vea tras la página, estarás listo.

The Sexy Curls jQuery plugin: http://www.elliottkember.com/sexy_curls.html

Vía Ajaxian