aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Despues de leer algunos de los manuales que recomendaba Max ayer, he descubierto este que me ha gustado mucho por los ejemplo que ponen. Y nos demuestra como hacer las cosas realmente bien.

Pop-ups

Todos conocemos esas ventanas molestas que atacan a nuestro navegador por cada página por la que pasamos (guarretes no lo negeis :D). Aunque mucha gente no entienda que funcionalidad puede tener algo asi, se le pueden dar usos bastante interesante para resolver algunos problemas, como aplicar información acerca de una parte de un texto, información de un vuelo en el caso de un página de una compañia aerea… aunque realmente cada vez más se estan dejando de usar, entre bloqueadores de pop-ups y los propios desarrolladores que no quieren molestar a los usuarios con ventanas emergentes por todos lados.

Asi y todo, quizas en algún caso necesitemos hacerlas, y esta forma es sin duda la mejor de todas.

Pop-ups mal hechos

El peor código para generar pop-ups y a la vez el más usado:

<a href="JavaScript:
  window.open('http://example.com','Título');
  void(0)">pop me up</a>

De esta forma estamos indicando que al hacer click sobre el enlace, este nos ha de referenciar a una función javascript que nos abrirá el pop-up. El problema radica cuando no tenemos posibilidad de utilizar Javascript en nuestro navegador. ¿Que ocurrirá en este caso? Simplemente será un texto más en el texto.

¿Como mejorarlos?

Una forma de mejorarlos sería añadir el evento onclick para realizar la llamada al pop-up.

<a href="http://example.com"
  onclick="window.open('http://example.com','Título');
  return false">pop me up</a>

De esta forma hacemos algo más accesible nuestro enlace, ya que en caso de no poder ejecutar el evento onclick, utilizará el href de forma normal abriendo el enlace en la misma página en la que estamos.¿Pero esto no es un pop-up? Realmente si lo és, pero damos una solución al problema del Javascript deshabilitado.

Tambien podemos usar el atributo target para hacer que nos abra la ventana en una nueva (_blank) o como queramos, aunque esto solo será válido para HTML y no para xHTML.

Mejorandolo aún más

Ahora llegamos a la parte que más me gusta, en esta nos explican como separar la lógica de la presentación. De esta forma tendremos el código javascript separado de nuestro HTML, haciendo aún más accesible limpio y elegante nuestro código.

El HTML debería quedar algo asi:

<a id="my-popup-link"
  href="http://example.com"
  target="_blank">pop me up</a>

Asi tenemos montado un pop-up que por si solo funcionará de forma bastante tosca, aunque no validará en XHTML, bastaría con quitar el target para conseguir que valide.

Despues la parte de Javascript se encargará de asignarle al enlace con ese id la propiedad de pop-up que queremos mostrar.

function event_popup(e) {
  window.open(e.currentTarget);
  e.preventDefault();
}
listen('load', window, function() {
	listen('click', 'my-pop-link', event_popup );

De esta forma le estamos indicando que observe (escuche) los eventos sobre my-pop-link y si es click lanze la función event_popup. De esta forma podemos separar nuestro HTML de nuestro Javascript, haciendo más facil de mantener en un futuro.