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