Un programador más

Plugins imprescindibles para Jquery – jgfeed (lector rss)

25 nov

Jgfeed es un plugin para jquery que nos permite leer fuentes RSS devolviendonos los feed (entradas) en formato JSON.

Jgfeed utliza la API AJAX de Google para feeds para obtener las entradas de una fuente RSS y devolvernos una estructura JSON de una forma sencilla y optima que nos permitira incluir contenido sindicado en nuestras páginas de forma fácil. Ademas podemos utlizar Jgfeed con otros plugins de jquery para conseguir unas interficies de usuario al estilo Google Reader .

Ejemplo de implementación de jgfeed

$.jGFeed('http://yokese.wordpress.com/feed/rss/',
function(feeds){
  // revisamos que no haya errores
  if(!feeds){
    // si se ha encontrado un error salimos de la función
    return false;
  }
  // recorremos los feeds y mostramos la información deseada
 for(var i=0; i &lt; feeds.entries.length ; i++){
    var entry = feeds.entries[i];
    // titulo de la entrada
    entry.title;
  }
}, 10); // 10 son el numero de entradas a devolver por el rss

Campos de la estructura JSON que devuelve jgFeed

Campo	Descripción
title	Titulo de la entrada rss
link	Enlace a la página original de la entrada rss
author	Autor de la entrada rss
publishedDate	Fecha de la publicación de la entrada
contentSnippet	Contenido reducido (sumario) de la entrada rss
content	Contenido completo de la entrada rss
categories	Array de cadenas de texto con las categorias a las que pertenece la entrada

Argumentos que puede recibir el constructor de jgfeed

Argumento	Descripción
url	URL del feed RSS
callback	Funcion a ejecutar despues de cargar las entradas, recibe por parametro el array de feeds
num (opcional)	Numero de entradas a devolver (por defecto 3)
key (opcional)	Google API Key (por si deseas usar la tuya propia

plugins jquery

SEO y tiempos de carga

24 nov

Publicado por jmnieves en SEO

4 comentarios

Un aspecto importante en SEO son los tiempos de carga , con la llegada del nuevo motor de google Caffeine pasa a ser de importante a critico como comentaba Matt Cutts ingeniero especialista en SEO de Google en esta entrevista concecida a los chicos de WebProNews.

Comparativa de tiempos de carga y optimización

¿Que podemos hacer para mejorar nuestro tiempo de carga?

Optimizar nuestras imagenes

Para lograr optimizar nuestras imagenes y asi reducir el tiempo de carga podemos:

Redimensionar la imagen al tamaño al que va a ser visualizada.
Usar servicios de optimización de imagenes como:
- Punypng
- Image Optimizer para WordPress
Si utlizamos herramientas como photoshop guardar la imagen para web.

Minificar el tiempo de carga de nuestros scripts

Podemos minificar nuestros javascripts si:

Usamos las versiones minificadas de las librerias javascripts que usemos , como en el caso de jquery.
Utilizamos herramientas como Closure Compiler para compactar nuestros ficheros javascript
Utilizamos las bibliotecas ajax de google para incluir nuestras librerias utilizadas como jquery,mootools , con el objectivo de ganar velocidad de cache al ser estas librerias incluidas por millones de sitios web.

Minificar el tiempo de carga de nuestras hojas de estilo

Por último y no menos importante tambien debemos recordar optimizar nuestras hojas de estilos para ello debemos:

No repetir estilos
Usar herencias para minificar el número de herencias.
Utilizar herramientas como YUI Compresor.
Segmentar nuestras hojas de estilos en diversas hojas de estilos , para incluir solo las que necesitemos en cada página

Conclusión:

Optimizar nuestras páginas no solo nos ayudará a mejorar nuestro posicionamiento web , si no que mejorara la usabilidad de nuestra página al ser mucho más agil y de esta forma más accesible desde dispositivos mobiles.

ZKYKCHRTYZPX

optimización, Usabilidad

Usabilidad y diseño de formularios

21 nov

Publicado por jmnieves en Usabilidad

1 comentario

Hola en este articulo os hablare de usabilidad y diseño de formularios. Cuando diseñamos un formulario debemos partir de la premisa que el usuario detesta rellenar formularios y que debemos facilitar en la medida de lo posible su compresión , introducción y limitar los posibles errores con el objetivo de obtener:

Menor número de abandonos.
Mayor número de registros obtenidos
Calidad de los registros obtenidos.

Para conseguir esto debemos seguir una serie de normas:

Una presentación visual clara.
Un etiquetado descriptivo e intuitivo.
Eligir los controles adecuados para cada tipo de información solicitada
Mostrar al usuario de forma clara las acciones que va a relizar.

Presentación visual clara

Debemos crear el formulario con una presentación que inspire al usuario facilidad. Para ello debemos diseñar un formulario simple,limpio e ordenado.Con ello conseguiremos un formulario que:

Facilita su lectura
Dirige la atención a los aspectos esenciales
Aumenta la efectividad, ya que favorece que cumplan sus objetivos.
Mejora la eficacia al reducir el esfuerzo y los errores

Técnicas a seguir para lograr un formulario claro, ordernado y simple

Reducir el número de elementos de la página a los necesarios
Eliminar repeticiones innecesarias
Minimizar el uso de cajas, bordes y líneas.
Aumentar los espacios blancos, para favorecer el descanso de los ojos y facilitar la visualización.
Reducir elementos de distracción
Limitar las instrucciones al mínimo necesario.

Ejemplo de un formulario claro

Etiquetado descriptivo e intuitivo

Un correcto etiquetado nos permitira:

Conseguir registros con la información adecuada.
Menor número de errores y por lo tanto mejor número de abandonos.

Técnicas a seguir para lograr un correcto etiquetado

Nombres de etiquetas decriptivas.
Aportar información acerca del contenido.
Mostrar que elementos son obligatorios.

Eligir los controles adecuados

A la hora de elegir el control más adecuado debemos tener en cuenta:

¿Es más natural para los usuarios teclear la respuesta
que seleccionarla?
¿Es fácil escribir mal las respuestas?
¿Necesita el usuario ver antes las opciones para
entender claramente la pregunta?
¿Cuántas opciones hay?
¿Puede el usuario seleccionar más de una opción?
¿Están las opciones visualmente destacadas?
Permitir introducir datos en el formato en que están acostumbrados

Una vez elegido el control debemos seguir unas sencillas normas:

Ajustar el tamaño del campo de texto al dato esperado.
Ofrecer pistas, modelos o ejemplos en las preguntas

Ejemplo de formulario con controles usables

Acciones claras

A llegado la hora de la verdad , nuestro usuario ha rellenado todo el formulario ¿y ahora que?; eso mismo se esta preguntando nuestro usuario. Para resolver esta pregunta y conseguir mayor número de registros debemos:

Mostrar al usuario en que punto del proceso se encuentra
Mostrar claramente que tipo de acción se va a efectuar en el botón de envio, no vale un OK

Para lograr esto podemos usar las siguientes técnicas:

Diferencia la acción principal de las secundarias
Migas de pan que muestren al usuario en que paso se encuentra.
Bloqueo del boton de envio despues de ser pulsado con texto descriptivo . Ej: “Enviando información…”

Ejemplo de buena práctica

Espero que este articulo os haya sido util si estais interesados en este tema os dejo un par de enlaces muy interesante de la gente de usolab acerca del diseño de formulario usables:

html

Plugins imprescindibles para Jquery – jQuery Menu

20 nov

Publicado por jmnieves en Jquery

No hay comentarios

En esta ocasión os traigo dentro de la serie Plugins imprescindibles para Jquery el plugin JQuery Menu.

Ejemplo de uso de JQuery Menu

El plugin JQuery Menu es una extensión a los controles de usuario que ofrece Jquery UI del cual os hablare en el siguiente artículo. Como extensión usa los mismos themes que Jquery UI y de esta forma adaptarse e integrarse al resto de controles.

A continuación la implementación de un código de ejemplo de Jquery UI de un sencillo menú.

Ejemplo de implementación de JQuery Menu

Inicialización del plugin

$('#flat').menu({
			content: $('#flat').next().html(), // grab content from this page
			showSpeed: 400
		});

Enlace y lista utlizada por el plugin

<a tabindex="0" href="#search-engines" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="flat"><span class="ui-icon ui-icon-triangle-1-s"></span>flat menu</a>
<div id="search-engines" class="hidden">
<ul>
	<li><a href="#">Apples</a></li>
	<li><a href="#">Oranges</a></li>
	<li><a href="#">Bananas</a></li>
	<li><a href="#">Cheetos</a></li>
</ul>
</div>

Resultado obtenido

Resultado obtenido del código implementado