Webmaster Libre

Somos muchos los que alguna vez nos hemos visto tentados a ofrecer nuestro sitio en varios idiomas, no obstante la falta de tiempo o conocimientos puede habernos frenado.

A pesar de que no soy muy amiga de las traducciones automáticas, lo cierto es que cada vez son más frecuentes y para algunos pueden ser un buen recurso (preferiblemente avisando a los lectores de que se trata de una traducción generada por un script para que no se escandalicen demasiado si aparecen verdaderas burradas).

Si te has decidido a usar uno de estos scripts seguro que te gusta Sunday Morning, un script realizado con jQuery que te permite incluir de forma elegante y sencilla las capacidades de Google Translate en tu web.

Sunday Morning te permite trabajar de diversas formas: incluyendo un menú con las opciones de idioma, traduciendo palabra por palabra, permitiendo que tus usuarios introduzcan texto para traducir  o mediante un bookmarklet con el que acceder a versiones traducidas de cualquier sitio web.

Sin duda, la calidad de las traducciones depende mucho de Google Translate pero por lo menos la forma de presentarselas a nuestros usuarios mejorará mucho respecto a otras soluciones.

Sunday Morning: http://sundaymorning.jaysalvat.com/

Si sueles emplear muchas fotos en tus sitios y te apetece colocarles unos pies de foto elegantes de verdad, echale un vistazo a jQuery Captify.

Mediante este plugin podrás incorporar pies de página que aparecerán cuando el usuario pase el ratón por las fotos y que, para los usuarios que no tengan javascript no supondrán ninguna molestia.

Para crear nuestros pies de foto podremos optar por dos formas: mediante el atributo alt (es decir, cogemos el atributo alt que ya deberían llevar todas nuestras fotos y lo mostramos a nuestros usuarios como pie de foto) o creando un div que contenga el pie de foto y asociándolo con la foto mediante el atributo rel.

<!-- Mediante el atributo alt -->
<img src="theimage.jpg" class="captify" alt="Caption Text" /> 

<! -- Creando un div y asociandolo mediante el atributo rel -->
<img src="theimage.jpg" class="captify" rel="caption1" />
<div id="caption1"> Flickr // Pilot and Index </div>

Nuestros pies de foto además, podrán ser animados (efecto slide o fade) o fijos y, a diferencia de otros plugins similares, jQuery Captify está preparado para ser empleado en entornos de producción.

jQuery Captify: http://masterfidgeter.com/projects/captify/

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