Juan Manuel 30 de julio de 2008 a las 12.22
   Imprimir artículo
elWebmaster.com

Actualizando navegadores desde tu sitio o blog con Javascript


Actualizando navegadores desde tu sitio o blog con JavascriptLas viejas versiones de los navegadores no sólo son inseguras, sino que son un dolor de cabeza para diseñadores web, desarrolladores y programadores porque suelen ser las que menos respetan los estándares. Si quieres aportar tu granito de arena, puedes avisar a los visitantes de tu sitio que dispongan de una versión antigua que existen actualizaciones disponibles para su navegador.

Pushup.js es un script que te permite reconocer qué versión de Internet Explorer, Safari, Opera o Firefox tienen los visitantes de tu sitio, mostrando un pequeño recuadro que dice “Importante actualización del navegador disponible” (o lo que quieras decir) con un enlace a la página de descarga. Todo gracias a Javascript.

Pushup.js: actualizando el navegador de losvisitantes de tu sitio

Tocando el código podemos modificar desde los íconos de cada navegador que se muestran en el panel hasta el tiempo que tarda la pestañita en hacer su fade-in/fade-out (el fundido al aparecer y desaparecer).

Actualizando navegadores desde tu sitio o blog con Javascript

Veamos un poco el código. Esto va en el header de tu página web o blog:
<link rel='stylesheet' type='text/css' href='css/pushup.css' />
<script type='text/javascript' src='js/pushup.js'></script>
Si vas a guardar las imágenes de los íconos en otra carpeta asegúrate de modificar la ruta en el archivo pushup.js que te vas a descargar.

¿Qué es cada cosa? ¿Qué puedo modificar exactamente?

  • Pushup.options
    • appearDelay: los segundos que tarda en hacer el fade-in.
    • fadeDelay: los segundos que tarda en hacer el fade-out.
    • images: la ubicación de las imágenes relativas a pushup.js, o una url absoluta.
      images: '../images/pushup/',
      // relativeimages: 'http://www.mysite.com/images/pushup/', // absolute
    • message: el texto que sirve como aviso para los usuarios.
    • reminder.hours: las horas que pasarán hasta que vuelva a aparecer el mensaje en la pantalla del usuario.
    • reminder.message: el mensaje de aviso de “recordarme en # horas”, donde “#” será reemplazado por reminder.hours.
      Nota: El mensaje no funcionará si las cookies están deshabilitadas.
      message: 'Remind me again in #{hours}'
    • skip: hace que Pushup se desactive si el navegador del usuario no requiere actualizaciones.
      skip: true // stops building Pushup if not requiredskip: false
      // always builds Pushup so you can use all it's features

Un cartel como este aparece en la pantalla del usuario (claro que tú personalizas el mensaje):

Actualizando navegadores desde tu sitio o blog con Javascript

Haz clic aquí para descargar Pushup.js.


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (3)

  1. Mario dice:

    Hice unas modificaciones para establecer las versiones mínimas para cada navegador de manera sencilla, por ejemplo podemos decirle que la versión mínima de firefox sea la 3 y no la 2. El código en txt lo subí a: http://rapidshare.com/files/133635920/pushup.txt.html

    Saludos

  2. cosi dice:

    Haaa, gracias por el aporte, me va a servir mucho para una pagina web que estoy diseñando y se ve mejor en firefox…

  3. isaac dice:

    hola, el codigo funciona bien en el navegador,pero tengo una duda:en dreamwevaer cs4 cuando le haces una escaneo de (compatibilidad de navegadores) el link que llama (href=’css/pushup.css’) lo marca como error y no se porque.¿cual es el problema?

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder