martes, 24 de mayo de 2011

LightWindow: Casi casi perfecto - Vagabundia


¡Epa! ¡Esto sí que funciona muy bien!



Tanto dar vueltas buscando algún tipo de script que permita utilizar algún tipo de ventana modal al estilo VideoBox, LightBox, PopBox o SlimBox que funcione correctamente y que sea lo suficientemente versátil como para permitir mostrar todo tipo de archivos y aquí esta, se llama LightWindow.




¿Por que me parece que esta es mejor que todas las otras que he probado? Porque, entre otras cosas pueden mostrarse:




Click sobre cada ícono para ver una demostración.


Esto de mostrar las cosas en ventanas modales es muy lindo pero también es molesto tener que elegir uno u otro modelo porque cada uno de ellos hace algo diferente, uno para videos, otro para imágenes, ni hablar de compatibilidades. LightWindow tiene la particularidad de poder manejar prácticamente cualquier tipo de archivo multimedia y los detecta automáticamente. Además, es compatible con Firefox, IE6, IE7, Safari y Opera tanto en Windows como en Mac.




La ventana puede personalizarse todo lo que uno quiera y podemos crear galerías con cualquier tipo de archivo, colocar títulos, descripciones, etc.



Primero que nada, descargamos el ZIP que contiene una serie de archivos y carpetas que incluyen demostraciones varias. De todos ellos, los que necesitamos alojar en un servidor propio son:



prototype.js

scriptaculous.js

effects.js


lightwindow.js

lightwindow.css



Como el framework prototype es de uso bastante común y se emplea para diversas funciones y trucos, si ya lo hemos incluido en nuestra plantilla no deberemos preocuparnos y utilizamos el que tenemos; a lo sumo, verificamos si la versión es adecuada y si no, la reemplazamos por una más nueva. Lo mismo puede decirse de script.aculo.us y de su librería effects.




Los otros dos archivos, lightwindow.js y lightwindow.css son los que nos importan y los que pueden modificarse para adaptarse a nuestras necesidades. Por ejemplo, deberíamos alojar las imágenes utilizadas y cambiar las direcciones de: ajax-loading.gif, black.png, black-70.png, arrow-down.gif, arrow-up.gif, prevlabel.gif y nextlabel.gif.




Si esto resulta complicado, puede descargarse este otro ZIP que contiene sólo los archivos necesarios y donde ya los he modificado, alojando las imágenes en ImageShack.



Una vez que tenemos alojados los archivos, los incluimos en la plantilla, por ejemplo, justo antes de </head>:
<script type="text/javascript" src="URL_prototype.js"></script>

<script type="text/javascript" src="URL_scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="URL_lightwindow.js"></script>
<link rel="stylesheet" href="URL_lightwindow.css" type="text/css" media="screen" />


Donde cambiamos las direcciones URL por las de nuestros archivos.




El script es muy sencillo de utilizar, basta agregar la clase lightwindow a cualquier enlace, por ejemplo:
<a href="URL_archivo" class="lightwindow">ENLACE</a>
El enlace puede ser un texto, un ícono o una miniatura:
CLICK




En realidad, eso es todo, no hace falta nada más, de manera automática, el script reconocerá el tipo de archivo al que se refiere el enlace y actuará en consecuencia.

  • Imágenes en formato bmp, gif, jpg, png y tiff
  • Videos en formato avi, divx, m1v, m2v, mjpg, moov, mov, movie, mpa, mpe, mpeg, mpg, qt, viv, vivo y wmv.
  • Audio en formato aif, aiff, m2a, m3u, mid, midi, mp2, mp3, mpa, mpg, mpga, ram y wav.
  • Páginas en formato asp, aspx, cgi, htm, html, pl, php4, php3, php, php5, phtml, rb, rhtml, shtml, txt, y vbs.
  • Aplicaciones en formato asf, pdf, pps, rm y swf.


Por supuesto, el navegador tendrá que tener los plugins necesarios para verlos y, eventualmente (por ejemplo en el caso del divx), habrá que modificar el script para que cargue los códigos necesarios. En la página principal del proyecto, hay una descripción de las instrucciones utilizadas, los tipos MIME soportados y los plugins y ActiveX establecidos por defecto.




Para crea una galería, el criterio es el mismo, ponemos enlaces a cada uno de los archivo y les agregamos a todos ellos un atributo REL con el mismo valor, por ejemplo:
<a href="URL_archivo1" class="lightwindow" rel="TítuloDemo[Subtítulo]">ENLACE 1</a>
<a href="URL_archivo2" class="lightwindow" rel="TítuloDemo[Subtítulo]">ENLACE 2</a>

<a href="URL_archivo3" class="lightwindow" rel="TítuloDemo[Subtítulo]">ENLACE 3</a>
Y si sólo queremos mostrar un enlace:
<a href="URL_archivo1" class="lightwindow" rel="TítuloDemo[Subtítulo]">ENLACE</a>

<a href="URL_archivo2" class="lightwindow" rel="TítuloDemo[Subtítulo]"></a>
<a href="URL_archivo3" class="lightwindow" rel="TítuloDemo[Subtítulo]"></a>


Si bien la forma sencilla es agregar la clase lightwindow al enlace, hay otras propiedades con las que podemos personalizar cada enlace, para esto, usamos el atributo PARAMS:
<a class="lightwindow" href="URL_arhivo" params="lista de parámetros">ENLACE</a>
Los parámetros que podemos usar son:




lightwindow_width es el ancho de la ventana (en pixeles)

lightwindow_height es el alto de la ventana (en pixeles)

lightwindow_top es la distancia entre el borde superior de la pantalla y el inicio de la ventana

lightwindow_left es la distancia entre el borde izquierdo de la pantalla y el inicio de la ventana


lightwindow_loading_animation se establece en false para no mostrar el efecto fade al cargarse



EJEMPLO: Una ventana de 400 x 326 para contener un video de Google Videos [CLICK]




Otros parámetros son específicos para casos especiales:



lightwindow_show_images indica la cantidad de imágenes a mostrar simultáneamente en una galería (el valor por defecto es 1)

lightwindow_type es optativo e indica cómo debe ser interpretado el enlace (page, external, image, media, inline)

lightwindow_iframe_embed se utiliza para incrustar el medio dentro de un IFRAME en lugar de un DIV


lightwindow_form indica el nombre si estamos utilizando el script para mostrar un formulario



Si queremos usar varios parámetros, los separamos por comas, por ejemplo:
params=lightwindow_width=425,lightwindow_height=350,lightwindow_loading_animation=true"

params="lightwindow_width=500,lightwindow_height=500,lightwindow_show_images=2"
Otros atributos especiales son también opcionales: title, author y caption se utilizan para mostrar determinados textos.
<a class="lightwindow" href="URL_archivo"
title="unTexto"
caption="unTexto"
author="unTexto"
params="lista de parámetros">ENLACE</a>
EJEMPLO: donde se muestran los tres atributos [CLICK]



También podemos colocar contenido inline ¿qué es esto? Pués podemos mostrar algo que tenemos en nuestra propia página o post, algo que "ocultamos" y sólo mostramos a través de un enlace:
<a href="#nombreID"  class="lightwindow">ENLACE</a>
<div id="nombreID" style="display: none;">

<div>... cualquier contenido HTML ...</div>
</div>
EJEMPLO: donde se muestra un DIV oculto [CLICK]


Algunas propiedades que pueden personalizarse:



#lightwindow_title_bar el área superior donde se muestra el atributo TITLE y el enlace que permite cerrar la ventana

#lightwindow_title_bar_title es el texto del atributo TITLE


#lightwindow_title_bar_close_link es el enlace con el texto "close"

#lightwindow_data_caption es el texto del atributo CAPTION

#lightwindow_data_author es el texto del atributo AUTHOR




Esto lo podemos hacer modificando el archivo lightwindow.css o sobrescribiéndolo en nuestra plantilla, agregando una etiqueta STYLE inmediantamente después del enlace a la hoja de estilo:
<link rel="stylesheet" href="URL_lightwindow.css" type="text/css" media="screen" />
<style type='text/css'>
#lightwindow_title_bar_title { ... }
a#lightwindow_title_bar_close_link, a:link#lightwindow_title_bar_close_link, 
a:visited#lightwindow_title_bar_close_link { ... }
a:hover#lightwindow_title_bar_close_link,  a:active#lightwindow_title_bar_close_link { ... }
#lightwindow_data_caption { ... }
#lightwindow_data_author { ... }
</style>























TABLA - FUENTES - FONTS


SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font








free counters


Disculpen las Molestias




TABLA - INFORMÁTICA - UTILIDADES

Variantes para ver y ocultar elementos - Vagabundia


Por ahí se dice que las transiciones con CSS, a la larga, reemplazarán a los scripts pero, eso es una exageración ya que, como toda herramienta, sólo suma posibilidades en lugar de restarlas y eso es lo bueno; nos permite tener más opciones y no tener que atarnos a determinadas cosas.



Veamos los casos típicos de mostrar y ocultar elementos; inevitablemente, requerimos alguna clase de script porque con CSS no podemos interactuar con clicks del ratón. Una función elemental que hace esto podría ser así:
function SINO(cual) {
   var elElemento=document.getElementById(cual);
   if(elElemento.style.display == 'block') {
      elElemento.style.display = 'none';
   } else {
      elElemento.style.display = 'block';
   }
}
Que usaríamos de este modo, ya sea con un enlace o con cualquier otra etiqueta:
<div id="demo1" style="display:none;">El elemento que está oculto.</div>

<a href="javascript:void(0);" onclick="SINO('demo1')">Mostar / Ocultar</a>
Mostar / Ocultar


Lo que hace esa función es permutar el estado de la propiedad display; si no se ve la mostramos (display:block) y si está visible la ocultamos (display:none). Como ese DIV "oculto" no ocupa espacio, al estar arriba del botón, cuando se "ve", desplaza el contenido hacia abajo pero no hace falta usar esa propiedad, podemos usar otras como visibility en cuyo caso, el contenido no se verá pero el espacio que ocuparía si:



function SINO(cual) {
   var elElemento=document.getElementById(cual);
   if(elElemento.style.visibility == "visible") {
      elElemento.style.visibility = "hidden";
   } else {
      elElemento.style.visibility = "visible";
   }
}


Mostar / Ocultar


O la propiedad opacity donde pasaría lo mismo que en el caso anterior, ese DIV ocupa espacio aunque su contenido no sea visible:


function SINO(cual) {
   var elElemento=document.getElementById(cual);
   if(elElemento.style.opacity == "1" || elElemento.style.filter == "alpha(opacity=100)") {
        elElemento.style.opacity = "0";
        elElemento.style.filter = "alpha(opacity=0)";
   } else {
        elElemento.style.opacity = "1";
        elElemento.style.filter = "alpha(opacity=100)";
   }
}


El elemento que está oculto.
Mostar / Ocultar


En JavaScript Fade Tutorial – Fading Elements In/Out nos muestran un script para mostrar y ocultar elementos con un efecto de fade que podemos aplicar a cualquier elemento que se nos ocurra.



<script>
var fadeEffect=function() {
  return{
    init:function(id, flag, target){
      this.elem = document.getElementById(id);
      clearInterval(this.elem.si);
      this.target = target ? target : flag ? 100 : 0;
      this.flag = flag || -1;
      this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
      this.si = setInterval(function(){fadeEffect.tween()}, 20);
    },
    tween:function() {
      if(this.alpha == this.target){
        clearInterval(this.si);
      } else {
        var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);
        this.elem.style.opacity = value / 100;
        this.elem.style.filter = 'alpha(opacity=' + value + ')';
        this.alpha = value
      }
    }
  }
}();
</script>

<style>
  .divbotones {
    height:35px;
    margin:0 auto;
    width: 500px;
  }
  .elboton {
    background-color: #CCC;
    border: 1px solid #EEE;
    border-radius: 3px;
    color:#555;
    cursor:pointer;
    padding: 4px 0 5px;
    text-align:center;
    width:200px;
  }
  .elboton:hover {
    background-color: #D9D9D9;
    border: 1px solid #FFF;
    color: #333;
  }
  .sinodemos {
    background:#355C33;
    border:1px solid #548954;
    border-radius:3px;
    color:#79AF72;
    height:26px;
    margin-bottom:10px;
    padding:9px 10px 0;
    text-shadow:1px 1px #21341D;
  }
  #demoFADE {
    opacity:0;
    filter:alpha(opacity=0);
  }
</style>

<div id="demoFADE" class="sinodemos"> El elemento que está oculto. </div>

<div class="divbotones">
  <div class="elboton" onclick="fadeEffect.init('demoFADE', 1)" style="float:left">Fade In</div>
  <div class="elboton" onclick="fadeEffect.init('demoFADE',0)" style="float:right">Fade Out</div>
</div>


El elemento que está oculto.
Fade In
Fade Out



Es interesante ver la entrada de ese sitio porque se han tomado el trabajo de escribir una explicación muy detallada de lo que hace el código (está en inglés) y sin embargo, algunos comentarios dicen cosas tales como: "bah, usando jQuery.fadeIn() se consigue lo mismo". De alguna manera, esa clase de comentarios que pretenden ser "modernos" sólo muestran ignorancia porque, si bien la afirmación es cierta, parecería que cierto tipo de personas estan realmente convencidas del fin de la historia así que mejor quedarse quieto, no aprender, no experimentar, no jugar, total, ya todo está inventado. Y eso es falso y recontra-falso.



Por suerte, hay quienes no creen así: "las librerías son importantes y claro, nos ahorran tiempo pero también es importante tanto para principiantes como para personas con conocimientos medios, tener tutoriales que expliquen cómo funcionan las cosas".



Concuerdo con esa idea y agregaría que el uso de cualquier herramienta (las librerías son eso) siempre debe estar acompañado de una mínima dosis de entendimiento. Usar una librería para poner un efecto simple en un botón es, como mínimo, un desperdicio porque en última instancia, lo que hacen no es otra cosa que facilitarnos tareas pero de ninguna manera son códigos más simples; por el contrario, son mucho más sofisticados y requieren muchos más procesos.



No hay nada malo ni nada bueno en estas cosas ya que están fuera de cualquier ética, sólo son herramientas que usamos o no usamos. Ya sé, estamos en plena moda de jquerismo y habrá que soportar el temporal pero también habrá que recordar que nunca hay solo un método para conseguir un resultado; que siempre hay alternativas y que toda moda, decía mi abuela, es pasajera.




Por ejemplo, esta sería una forma de hacer algo similar a lo anterior con un script más rudimentario pero aprovechándose de la propiedad transition por lo que su resultado final estará limitado a todos los navegadores modernos a excepción de Internet Explorer:
function fadeEffectTRANS(id,valor) {
  var cual = document.getElementById(id);
  cual.style.opacity = valor;
  cual.style.filter = 'alpha(opacity=' + valor + ')';
}


El elemento que está oculto.
Fade In
Fade Out


Obviamente, nadie sugiere cambiar una cosa por otra ya que el script original es soportado por todos los navegadores pero, para quien quiera arriesgarse, bastaria modificar el CSS y que quedara así:
#demoFADE {
  opacity:0;
  filter:alpha(opacity=0);
  -moz-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}



Algo similar podemos hacer con el primer script, tambien allí basta que agreguemos la propiedad transition al CSS para que se anime el efecto aunque, en ese caso, siempre debemos hacerlo con propiedades que tengan valores progresivos; display y visibility no nos sirven ya que pasan de un estado a otro de manera inatantánea; así que lo más cómodo es usar opacity; y en este caso, aunque en IE seguirá funcionando igual aunque sin esa animación:


El elemento que está oculto.
Mostar / Ocultar




















TABLA - FUENTES - FONTS


SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font








free counters


Disculpen las Molestias




TABLA - INFORMÁTICA - UTILIDADES

Correo Vaishnava