Popups no intrusivas con javascript, css y xhtml

Este es un polémico tema, ¿Pueden las popup ser buenas? Depende de las circunstancias bajo las cuales se usan. Algo sí es seguro, un popup desde el arranque de una web, es mortal, así que repite conmigo NO DEBO PONER MI WEB EN UN POPUP. La razón de que mucha gente lo haga es porque creen que está bien. Muchos sitios web de películas de moda lo hacen, luego entonces, debe estar bien, ¿No?

Una explicación detallada ya se ha discutido en cientos de ocasiones en foros de diseño y desarrollo web. Todo se resume en una frase, PORQUE ARRUINAN LA EXPERIENCIA DEL USUARIO. Sin embargo, hay ocasiones en que realmente son necesarias, mencionemos algunos casos:

• Cuando necesitamos mostrar datos adicionales que ya no caben en nuestro diseño o que de hacerlo, desordenarían todo el diseño
  
• Cuando queremos llevar al usuario a que haga ciertas acciones, sin que se salga de la página actual (si, ya sé que para eso existe AJAX, pero no todos lo usan)
  
• Para mostrar un aviso, del cual el usuario está conciente que tendrá una ventana popup

¿Cómo podemos crear este tipo de cosas sin arruinar la vida al usuario? La respuesta está por supuesto en los estándares web. Lo primero que haremos, será crear en donde queramos de nuestro HTML un capa (div), donde colocaremos lo que necesitemos mostrar, por ejemplo:

Código :

<div id="popup">
   <p>Soy un popup flotante. puedes <a href="javascript: cerrarPopup('popup');">cerrarme</a> si quieres</p>
</div>

Es importante notar el nombre del id de la capa, que será usado como parámetro en una función javascript que aún no hemos creado. lo siguiente será hacer el estilo correspondiente para nuestra popup. Un simple ejemplo:

Código :

#popup
   {
      position: absolute;
      border: 1px solid #666666;
background-color:#F7F7F7;
      width: 200px;
      height: 100px;
      margin-top: 50px;
      
   }

La posición de nuestro elemento debe ser absolute, a partir de aquí, podremos manejar con margin la posición actual de nuestra capa. Para evitar el problema de las resoluciones, es más que recomendable usar porcentajes y condicionales de Internet Explorer (IE), pues una de las malas costumbres de IE (firefox RLZ!) es interpretar el margin a su manera. Cuestión de experimentar. La dimensión de la ventana ya depende de nuestras necesidades. Este es el javascript necesario para hacer que nuestra ventanita se cierre:

Código :

function cerrarPopup(pid)
   {
      document.getElementById(pid).style.visibility = 'hidden';      
   }

La variable pid, contiene la id de la capa que estamos usando, importante notar que getElementById es una colección que permite manipular un elemento usando su id (de ahí su nombre), luego invocamos a la propiedad visibility y le asignamos el valor hidden para que la capa se oculte. Con eso, tenemos una ventana popup no intrusiva y que además no genera una nueva ventana en nuestra barra de tareas, importante señalar para que realmente no sea una molestia a nuestro usuario:

• La ventana debe tener el tamaño exacto de lo que vamos a mostrar
  
• La ventana NO DEBE TAPARLE INFORMACIÓN IMPORTANTE al usuario
  
• No debemos abusar tampoco de está técnica, ya que se volvería inservible y volveremos a lo mismo de siempre
  
• El posicionamiento de la ventana queda a nuestro criterio, pero debemos siempre recordar el punto 2

Ver el ejemplo

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.