El Comercio Digital

Webmaster Libre

Desarrollo Web con Software Libre

Una sencilla y vistosa barra de herramientas para tu web con jQuery y CSS3

toolbar

De un tiempo a esta parte empiezo a ver por muchos sitios una barra de herramientas en la parte inferior de las páginas con utilidades como enviar enlaces a redes sociales, suscribirse al feed o abrir una ventana de chat. Muy al estilo de la que emplea, por ejemplo, Facebook.

Existen algunos servicios como Wibiya con los que generar nuestra propia barrita de forma cómoda y sencilla pero, si buscamos ese punto extra de personalización nos toca ponernos manos a la obra y crear la nuestra propia.

En pvmgarage nos enseñan a hacer una gracias a jQuery y CSS3, lo malo es que no se lleva nada bien con Explorer 6 o 7 – y en el 8 se ve ligeramente fea – así que, al menos de momento, queda relegada a proyectos donde no te importe perder unos cuantos visitantes por culpa de su navegador. O eso, o te toca ponerte a trabajar un poco más para adaptar algunas cosas ya que el autor no considera esos navegadores porque “están pasados” (sic).

CSS, Javascript

Si te ha gustado este post no olvides suscribirte al feed para estar al tanto de las novedades

11 Respuestas a “Una sencilla y vistosa barra de herramientas para tu web con jQuery y CSS3”

Agrega tu comentario

  1. Javi dice:

    Tienes razón, de un tiempo a esta parte están empezando a proliferar estas barras y no hacen más que recordarme a aquellos molestos frames que te abrían los antiguos portales de antes de la burbuja de las .com -que viejo me siento diciendo esto-.
    En cuanto a lo que comentas del soporte a navegadores, de un tiempo a esta parte, a partir de no recuerdo bién qué artículo de Smashing Magazine, lo que voy haciendo es negociar con mis clientes qué funcionalidades deberían estar presentes en el sitio para todos los navegadores y cuáles sólo para aquellos que cumplen estándares o tienen intérpretes de js rápidos (ej, en un sitio dejo que se ordenen las tablas con jQuery si no se usa Internet Explorer porque con este la navegación se enlentece demasiado, en otros refino más los diseños usando selectores de CSS3, etc.).
    Así, quienes entran a la página con Internet Explorer no dejan de tener disponibles el diseño y las funciones básicas definidas por el cliente, mientras que quienes entran con navegadores como dios manda se encuentran una serie de agradables mejoras visuales y funcionales y se anima de forma sutil a usar estos.
    Por cierto, desde hace un tiempo has bajado el ritmo de entradas, ¡espero que sea porque tengas mucho trabajo :-D !

  2. Es una suerte tener clientes que puedan llegar a entender un planteamiento así, por desgracia muchísimas veces es el mismo cliente el que vive en el mundo del Internet Explorer 6 y ahí si que se nos monta el drama. No es fácil explicarle a alguien que algo va a verse de lujo en cualquier navegador digno pero no en el suyo, esperemos que algún día desaparezca de la faz de la tierra aunque la espectativa del IE7 tampoco es demasiado bonita.

    Y si, he bajado el ritmo bastante pero espero ponerme al día después de vacaciones de Navidad. Estoy principalmente estudiando como una loca y con algunos proyectos que espero dejar bien encaminados para que no me consuman media vida. Gracias por la paciencia!

  3. Alan dice:

    Aaunque el ie casi siempre me a caido mal no se puede hacer nada con las instalaciones del WinNue disque free que instalan en los cibers que vienen con el ie6,,,,…….

  4. Hola, buen dia
    estas barras de herramientas que al parecer “son lo de hoy” me parecen muy útiles, especialmente me gustan para las redes sociales, hacen más fácil ver quién esta conectado, tus mensajes, invitaciones y demás, en cuanto al problema que tiene con iexplorer, lo vi en su versión y no se ve tan mal, es una lástima no poder covencer al resto del mundo que usen otro mejor navegador. saludos.

  5. Martin dice:

    Excelente barra, mas bien me ayuda con el uso de las redes sociales! Gracias por el dato!

  6. Marcelo dice:

    Muy buena la barra, aunque reconozco que he tenido problemas Con IE para hacerla funcionar!

  7. Bego_zalbes dice:

    Hola,
    gracias por compartir esta información.
    Mi pregunta es, como pongo precisamente la barra que tu tienes debajo del post.

    Me gusta ese diseño….

    Gracias de por adelantado

  8. La barra para compartir las entradas en redes sociales y demás es un plugin para WordPress que se llama DamnSexyBookmarks

  9. gbcncat dice:

    El problema es que CSS3 es poco compatible todavía …

  10. Los navegadores “modernos” avanzan bastante rápido implementando soporte de CSS3 y para todos los demás, siempre que se pueda, “graceful degradation” o sea que las cosas sean usables aunque no se vean 100% igual (que los bordes redondeados se vuelvan ángulos rectos o que desaparezcan las sombras) y para casos extremos algo de javascript puede obrar milagros.

  11. martin dice:

    Excelentes  los usos de la barra!

Feed RSS de los comentarios de este post.

Deja tu comentario

Por favor, procura que tus comentarios aporten algo al tema del artículo. Los comentarios ofensivos y el spam serán eliminados.

Si tu comentario no aparece al momento puede que esté en la cola de moderación o en Akismet, lo reviso cada día pero si ves que pasa un tiempo prudencial y no aparece dímelo

Este post tiene 3 meses. Puedes dejar un comentario de todas formas y volver más tarde para comprobar si hay novedades sobre el tema.

Información:

Webmaster Libre es un blog de Alma Fernández Página alojada en Redcoruna