Publicado:

12345678910111213141516171819202122232425262728293031
Ene Feb Mar Abr May Jun Jul Ago Sep Oct Nov Dic
200520062007200820092010201120122013

Comentarios:

0 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519
☺ Si te gusta el contenido de este sitio, puedes aportar para seguir desarrollando y compartiendo.
☺

Categorías

Tags

Íconos para mejor usabilidad

Relativo a un proyecto en que estoy y del cual han salido otros interesantes artículos anteriores, creé un plugin de jQuery para agregar íconos a los links que sean relativos a descargas de diferentes tipos de documentos, a links externos (target="_blank"), a direcciones de e-mail ("mailto:") y a links de impresión ("window.print"). Como surgió la necesidad, y no encontré ninguno que hiciera eso en la página de plugins de jQuery, me puse a hacer el mio propio.

UsableIcons v1.0 plugin for jQuery

No es nada del otro mundo de complejo; en realidad es bastante simple. Lo que hace es leer las etiquetas <a> buscando por sus atributos href y target por las extensiones anteriormente nombradas y si las encuentra, agrega una class respectiva que tiene ese ícono. Lo bueno es que puedes configurar en qué <div> aplicarlo a través de un id o class.

Es la versión 1.0 y se esperan mejoras, dependiendo del feedback.

Página oficial

Ver demo

Bajar jquery.usableicons plugin v1.0 (.zip)

Sobre el Autor: Jorge Epuñan

Soy quien escribe en este sitio: diseñador gráfico de profesión, desarrollador web por preferencia y amante de la interacción humano-computador. Cuando no pienso en web, salgo a trotar por mis barrios en Santiago, Chile o me junto con amigos a un bar a conversar sobre nuevas tendencias y tecnologías. Twitter profesional y personal, además del Contacto.

Relacionados

Psicología Cognitiva

22/04/2009

5

Entender nuestros actuales usuarios -y los potenciales que pretendemos tener- es básico para una buena planificación de un proyecto web. Ir más alla, conocer cómo se comporta la mente de una persona ante el diseño y funcionamiento del sitio web es importante para el éxito de ese proyecto. La psicología cognitiva hace precisamente eso: estudia [...]

➜

jQuery Blox

25/05/2009

23

Una nueva manera de mostrar más información / A new way to show more info Selecciona tu idioma / Select your language: Español English ES Con jQuery Blox puedes desplegar información de una manera diferente, y con una fácil y rápida configuración. Basta con que armes tu HTML siguiendo un simple patrón de bloques, y [...]

➜

Menú con tabs con CSS, jQuery y Mootools

23/10/2008

13

Esos menúes tipo tabs ó con subniveles tanto horizontales como verticales, son muy útiles al momento de desplegar grandes cantidades de navegación sin ser invasivos con el espacio. Puedes arquitecturar toda la estructura de tu sitio de manera tal que el usuario pueda encontrar fácilmente la información que desee, sólo con ir descubriendo con el [...]

➜

6

Comentarios

  1. pero eso mismo se puede hacer con css:

    a[href^="mailto:"]{
    background: url(img/email.png) right center no-repeat;
    padding-right: 18px;
    }

    a[href $=".pdf"]{
    background: url(img/page_white_acrobat.png) right center no-repeat;
    padding-right: 18px;
    }

    a[href $=".doc"]{
    background: url(img/page_word.png) right center no-repeat;
    padding-right: 18px;

    FitoDotNET
    03 / Diciembre / 2007

  2. Sí, es cierto pero no es compatible con IE <6. ¬¬

    xmax
    03 / Diciembre / 2007

  3. uhhhh yo hice algo parecido, pero para cargar los favicons de los sitios al lado de los links externos… queda bonito y mucho menos desagradable que SnapIt :)

    Mañungo
    04 / Diciembre / 2007

  4. Ese mismo plugin lo tengo yo creado, me falta ir añadiendo más extensiones como las que has puesto tu, yo tengo puesto las más basicas y además si los links externos tienen favicon se puede poner ese como icono.

    os dejo la página para que lo comprobeís me ha gustado la idea de como lo has programado, muy bueno

    jquery-link

    noth
    04 / Diciembre / 2007

  5. No abuseis de este tipo de iconos. Aunque a primera vista puede parecer buena idea, introducen mucho “ruido” en el texto y entorpecen la lectura.

    Daniel G. Blázquez
    12 / Diciembre / 2007

1

Trackbacks

  1. [...] creé mi primer plugin tuve bastante dificultad al no encontrar una documentación detallada, y espero con este [...]
    CSSLab - Videocast 3: creando un plugin para jQuery

Tu aporte

OJO: si vas a agregar código fuente, asegúrate de convertirlas antes a entidades HTML, sino el comentario no se renderizará correctamente.

Cargando