Ver Mensaje Individual
  #1 (permalink)  
Antiguo 22/11/2007, 14:19
Avatar de buzu
buzu
 
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 17 años, 6 meses
Puntos: 122
Información detectar falta de javascript con javascript

Quizá algún día te has encontrado con la situación en que tienes que dar un mensaje al usuario si su navegador no soporta Javascript, ya sea por que ciertas funcionalidades del sitio están basadas en javascript (una mala practica que no recomiendo) o por ciertos efectos coool que has puesto al sitio usando js. Siempre es bueno hacer que el sitio funcione bien sin javascript y agregar las mejoras a base de javascript de forma no intrusiba. Ya hablé en otro post acerca de Graceful degradation. De cualquier modo aun cuando el sitio funciona bien sin javascript es bueno informar al usuario que si tuviera el javascript habilitado podría gozar de una mejor navegación y una experiencia mas placentera.
Pero como informar al usuario que debería activar su javascript? Sencillo. Usando javascript. Pero como si el javacript esta deshabilitado? Bueno en ese caso mi respuesta es NO usando javascript.

Es sencillo y la misma técnica se puede usar para los sitios que no soportan CSS. Se trata de mediante js ocultar el mensaje. Así si js no esta habilitado, el mensaje no se ocultara. Sencillo no?!?, eso es lo que yo llamo una "Solución Inteligente" Para los sitios que no soportan CSS es lo mismo, solo que el elemento se oculta mediante CSS así si el sitio no sports CSS la advertencia no se ocultara.

Eh aqui un ejemplo sencillo.

Código HTML:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Untitled</title>
	<script type="text/javascript">
		window.onload = detectaJS
		function detectaJS(){
			document.getElementById("noJS").innerHTML="";
		}
	</script>
</head>
<body>
<div id="noJS">Hemos detectado que tu browser no soporta Javascript.</div>
</body>
</html> 

Aquí eh hecho un ejemplo sencillo para ilustrar el concepto del que hablo. Claro que en un proyecto real la advertencia la haría mas elegante y la acomodaría al diseño de la pagina en cuestión. E incluso incluiría un icono de advertencia y todo aquello.

Notese que eh usado innerHTML = "" Para literalmente desaparecer el contenido del div.

innerHTML es propiedad de Microsoft y no es un estándar por lo que no debería ser usado pero a pesar de ser un elemento NO estandarizado esta ampliamente soportado por la mayoría de los navegadores modernos. Si nos queremos poner "estándar", podríamos usar DOM y CSS para ocultar el elemento pero no lo eh hecho así ya que en caso de que el navegador soporte js pero no DOM o CSS, la advertencia se mostrara sin verdadera razón alguna.

Espero que les sea de ayuda y comenten lo que piensan al respecto.