Aspiraciones

Click para ampliar.

Esta es otra entrada a modode respuesta. Esta vez es Alex quien consulta por un efecto que oscurece la pantalla, dejando ciertos elementos visibles, algo que puede utilzarse, por ejemplo, para resaltar los videos.

Para que funcione necesitamos JavaScript y si bien podría ser posible hacerlo sin librerías adicionales, lo mejor es emplearlas para que el efecto sea más interesante. Vamos entonces a ver ejemplos tanto para JQuery (que son los scripts originales) como para Prototype + Script.aculo.us.

Para el primer ejempo usaremos jQuery así que debemos tener cargada la librería y luego, el script. Por último, las definciiones de CSS. Colocamos todo eso antes de </head>:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

<script type='text/javascript'>
//<![CDATA[
... y aquí pegamos el contenido del archivo de texto ...
//]]>
</script>

<style>
#lightsoff-background  {
height: 100%;
left: 0;
margin:0;
padding: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 20;
}
</style>

Para utilizarlo en cualquier parte de nuestro blog, simplemente, agregamos un enlace de este modo:

<div id="lightsoff"><a href="#"> texto o imagen </a></div>

Un ejemplo online de esto, puede verse AQUÍ; oprimiendo el botón, la pantalla se oscurecerá dejando visible el video y haciendo click en cualquier parte de la pantalla, resturaremos la página a su estado original.

El segundo ejemplo también requiere jQuery y es una idea de Emanuele Feronato. Como en el caso anterior, requerimos tener la librería, el script y las definiciones de CSS, todas ellas las colocamos antes de </head>:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

<script type='text/javascript'>
//<![CDATA[
... y aquí pegamos el contenido del archivo de texto ...
//]]>
</script>

<style>
#the_lights{
background-color: #000;
display: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
#standout{
background-color: white;
padding: 5px;
position: relative;
z-index: 1000;
}
</style>

Por último, requerimos agregar un DIV extra en nuestro sitio así que lo agregamos al final, justo antes de </body>:

<div id='the_lights'></div>

A diferencia del caso anterior, lo que hace este script es preservar un área y oscurecer el resto; lo utilizamos de modo similar al anterior pero, en este caso, hay tres botones que sirven de enlace que colocamos dentro de un DIV donde también colocaremos todo eso que queremos resaltar:

<div id = "standout">
<div id="turnoff"> LUCES NO </div>
<div id="soft"> A MEDIA LUZ </div>
<div id="turnon"> LUCES SI </div>
... y aquí ponemos lo que queremos que sea visible, por ejemplo un video ...
</div>

El ejemplo puede verse AQUÍ; y allí, son esos tres botones los que controlan la opacidad del la ventana.

Por último, si lo que usamos es Prototype + Scriptaculous, la solución es un poco menos profesional pero, se me ocurrió que podría hacerse de modo similar, mezclando un poco de las dos anteriores. Agregamos el script:

<script type='text/javascript'>
//<![CDATA[
... y aquí pegamos el contenido del archivo de texto ...
//]]>
</script>

Allí veremos tres funciones:

function getPageSize() es la misma que se usa para el primer ejemplo y es la que nos permite calcular la altura de la ventana a oscurecer
function lightsOFF() es la función que oscurecerá la pantalla
function lightsON() es la función que restaurará la pantalla

Luego, el estilo CSS:

<style>
#OSCURECER { /* este es el div inferior, que ocupará toda la ventana */
background-color:#000;
opacity:0.9;
filter:alpha(opacity=90);
position: absolute;
margin:0;
padding: 0;
z-index: 20;
left: 0;
top: 0;
}
#lightsONOFF { /* este es el enlace que eprmutará el estado de esa ventana */
display: block;
opacity: 1 !important;
filter:alpha(opacity=100);
position: relative;
z-index: 30 !important;
/* cualquier propiedad de estilo */
}
object,embed {
opacity = 1 !important;
filter:alpha(opacity=100);
}
</style>

Como en el segundo caso, agregaremos un DIV al final de nuestro sitio, antes de </body>:

<div id='OSCURECER' style='display:none;'/>

Y lo uilizaremos creando un enlace así:

<a href="javascript:lightsOFF();" id="lightsONOFF"> APAGAR LAS LUCES </a>

Al hacer click en ese enlace, se ejecutará la función lightsOFF() y allí, se establecerán las propiedades CSS faltantes del DIV OSCURECER que estaba oculto (width y height) y se lo mostrará, usando Effect.Appear. Además, cambiaremos el atributo href del enlace llamado lightsONOFF para que podamos restaurar la ventana y su texto.

La función lightsON() hace lo contrario, restaura la ventana con Effect.Fade ocultando el DIV y vuelve a cambiar el atributo href y el texto del enlace lightsONOFF.

En principio, detectar el navegador que utiliza un visitante es sencillo si se usa JavaScript; por lo general, cualquier ejemplo que vemos en la web se limita a determinar si se una Internet Explorer o no y para eso, basta que verifiquemos un dato llamado navigator.appName por ejemplo, algo así:

<script>
  var NAV = navigator.appName;
  if (NAV=="Microsoft Internet Explorer") {
    ... está usando Internet Explorer y hacemos algo ...
  } else {
    ... está usando cualquier otro navegador ...
  }
</script>

navigator.appName:

¿Que hacer con eso? Dependerá de cada uno. Como esta entrada tiene como fin tratar de responder la pregunta de Lagarto y su intención es detectar el navegador de nuestros lectores y si usan IE sugerirles que usen otros; ese tipo de script sería suficiente

¿Cómo mostrarlo? hay muchas formas y lo más sencillo, sería colocarlo en un elemento HTML; por ejemplo:

<script>
  if (navigator.appName=="Microsoft Internet Explorer") {
    document.write("Estás usando Internet Explorer blabla blabla un texto cualquiera")
  }
</script>

Pero, ese no es el único dato accesible, el objeto navigator tiene muchas más propiedades y eso que, en algún tiempo fue suficiente, hoy ya no lo es así que si queremos detectar el navegador correctamente, hay otros datos que deberíamos leer; por ejemplo:

navigator.appCodeName nos devuelve el nombre real:

navigator.appCodeName:

navigator.appVersion la versión:

navigator.appVersion:

y sobre todo, navigator.userAgent que nos devuelve un texto bastante largo con la información completa:

navigator.userAgent:

Es esta última la que permite el control más riguroso pero es muy larga así que simplemente, vamos a verificar si dentro de ella hay algún texto específico; podemos buscar:

MSIE para detectar Internet Explroer
Firefox para detectar Firefox
Chrome para detectar Google Chrome
Opera para detectar Opera

y así seguimos, incluso, podemos detectar móviles como iPhone o Android.

La estructura elemental podría ser algo así:

<script>
  var navegador = navigator.userAgent;
  if (navigator.userAgent.indexOf('MSIE') !=-1) {
    document.write('está usando Internet Explorer ...');
  } else if (navigator.userAgent.indexOf('Firefox') !=-1) {
    document.write('está usando Firefox ...');
  } else if (navigator.userAgent.indexOf('Chrome') !=-1) {
    document.write('está usando Google Chrome ...');
  } else if (navigator.userAgent.indexOf('Opera') !=-1) {
    document.write('está usando Opera ...');
  } else {
    document.write('está usando un navegador no identificado ...');
  }
</script>

Llegado el caso, si lo que nos interesa es detectar sólo un navegador como Internet Explorer, también podemos hacerlo con CSS tal como se muestra en una vieja entrada aunque ese método no funcionará en Opera.

Application Icon Set
	Contiene 10 íconos de 32x32, 48x48, 64x64 y 128x128 en formato PNG.descargar

Cute Blogging Icon Set
	Contiene 10 íconos de 32x32, 48x48, 64x64 y 128x128 en formato PNG.descargar

Mobile Icon Set
	Contiene 10 íconos de 32x32, 48x48, 64x64 y 128x128 en formato PNG.descargar

REFERENCIAS:webiconset.com

Este truco de Oloman es muy bueno. Ya que hay varias formas de crear un enlace a un post aleatorio ¿por qué no hacer una lista con varios de ellos y colocarla en la sidebar?

Sólo debemos agregar un elemento HTML en nuestra plantilla y allí pegar el siguiente código:

<div id="random-posts">
  <script type="text/javascript">
    function getRandomPosts(json) {
      var maxEntries = 10;
      var numPosts = json.feed.openSearch$totalResults.$t;
      var indexPosts = new Array();
      for (var i = 0; i < numPosts; ++i) { indexPosts[i] = i; }
      indexPosts.sort(function() {return 0.5 - Math.random()});
      if (maxEntries > numPosts) { maxEntries = numPosts; }
      var container = document.getElementById('random-posts');
      var ul = document.createElement('ul');
      for (i = 0; i < maxEntries; ++i) {
        var entry = json.feed.entry[indexPosts[i]];
        var li = document.createElement('li');
        var a = document.createElement('a');
        a.title = entry.title.$t;
        for (var j = 0; j < entry.link.length; ++j) {
          if (entry.link[j].rel == 'alternate') {
            a.href = entry.link[j].href;
            break;
          }
        }
        a.appendChild(document.createTextNode(entry.title.$t));
        li.appendChild(a);
        ul.appendChild(li);
      }
      container.appendChild(ul);
    }
  </script>
  <script src="http:/miBlog.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=getRandomPosts&max-results=999" type="text/javascript"></script>
</div>

donde, todo lo que debemos cambiar es miBlog por el nombre de nuestro sitio y, eventualmente, cambiar el valor de maxEntries (que por defecto es 10) por cualquier otro; esa, será la cantidad de títulos a mostrar.

El resultado, será una lista (UL LI) que tomará el aspecto de cualquier otra lista que tengamos y que, puede ser personalizada si agregamos definiciones en el CSS de nuestra plantilla; por ejemplo:

#random-posts {
  /* este es el rectángulo donde se mostrará */
}
#random-posts ul { /* la lista */
  list-style-type: none;
  margin: 0 10px;
}
#random-posts li {
  /* los items de esa lista */
}
#random-posts a { /* cada item es un enlace con el título de la entrada */
  background: transparent url(unaImagen) no-repeat 5px 50%;
  border-bottom: 1px solid #202931;
  border-top: 1px solid #202931;
  display: block;
  font-weight: normal;
  height: 16px;
  line-height: 16px;
  padding: 3px 5px 2px 20px;
}
#random-posts a:hover { /* efecto hover de esos enlaces */
  background-color: #101921;
  border-bottom: 1px solid #303941;
  border-top: 1px solid #303941;
}

La pelea por el control de internet no es una pelea pequeña y cuando dos gigantes como Microsoft y Google luchan, los platos rotos los pagamos nosotros que como usuarios, sólo somos simples espectactadores.

Apoyado en su posición dominante, Internet Explorer es lento en adaptarse a las nuevas alternativas, últimamanete ha acelerado un poco el ritmo pero sigue siendo escencialmente conservador y no ha incorporado ninguna de las características del CSS3 o del HTML5, ni siquiera en sus versiones experimentales y sigue aferrado a sus filtros, que no son malos en absoluto, pero que jamás han logrado imponer; existen desde las versiones de IE5 y son muy pocos los desarrolladores que los conocen o aplican en sus sitios.

Sin importar nuestra preferencias ni participar de estas guerras que no son nuestras, los usuarios nos vemos en la disyuntiva de elegir ¿aplico tal o cual cosa en mi sitio aún a riesgo de que un número de visitantes no lo vean? Evidentemente, la respuesta lógica sería NO y buscamos alguna alternativa de compatibilizar limitaciones, tal cosa no se verá igual en todos los navegadores pero, SE VERÁ; una curva será recta o una sombra no será exactamente igual pero, con paciencia y suerte, podemos ir aplicando algunos detalles y dejar a todos más o menos satisfechos sin resignar demasiado.

Hace tiempo, en una entrada, mostraba una serie de librerías de Google que permitían resolver algunas incompatibilidades entre IE y el resto de los navegadores. No era una solución 100% efectiva pero ayudaba. Ahora; en realidad hace ya un tiempo, Google ha dado un paso más allá, creando lo que ellos llaman Google Chrome Frame, un plugin que se agrega a Internet Explorer y le adosa las caracteríticas de Chrome, es decir, su motor de JavaScript, con esto, nos permite acceder a todas las nuevas tecnologías desde cualquier versión de IE, incluyendo la arcaica versión 6.

Instalar lo no es nada complicado, simplemente descargamos el plugin y lo ejecutamos. Terminado el proceso, aparecerá como cualquier otro complemento de IE:

Claro que para que esto funcione hay dos condiciones.

Primero que nada, el visitante debe tener instalado Chrome en su PC o nuestro sitio debe agregar una librería para detectarlo y sugerir su instalación, método que no sugiero en absoluto.

La segunda condición es que nuestro sitio debe tener agregada una etiqueta META especial que agregamos justo después de <head>:

<meta content='chrome=1' http-equiv='X-UA-Compatible' />

Esto si es recomendable ya que podemos hacerlo sin problemas aún cuando no instalemos el plugin y de ese modo, permitir a quien lo utilice, acceder a sus funciones.

Aún cuando está en pleno desarrollo, el resultado es efectivo. Las siguientes capturas, muestran la diferencia de una misma página de este blog, abierta con IE8 con el plugin habilitado y deshabilitado:

Animated Share Buttons es una idea de tutorialzine.com para colocar botones o enviar entradas a diferentes redes sociales de un modo diferente, usando animaciones.

Para eso, requiere del uso de la librería jQuery que debemos tener cargada antes de </head>:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

Luego, agregaremos el script de la animación, cosa que podemos hacer descargando el ZIP con el demo y alojando el archivo script.js en un servidor:

<script type="text/javascript" src="URL_script.js"></script>

o bien, copiar su contenido y pegarlo directamente en la plantilla:

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
  var deg=0;
  var dif=-3;
  var arr = $('.btn');
  var len = arr.length;
  var centerX = $('#stage').width()/2 - 40;
  var centerY = $('#stage').height()/2 - 60;
  arr.css('position','absolute');
  setInterval(function(){
    if(Math.abs(dif)<0.5) return false;
    deg+=dif;
    $.each(arr,function(i){
      var eSin = Math.sin(((360/len)*i+deg)*Math.PI/180);
      var eCos = Math.cos(((360/len)*i+deg)*Math.PI/180);
      $(this).css({
        top:centerY+25*eSin,
        left:centerX+90*eCos,
        opacity:0.8+eSin*0.2,
        zIndex:Math.round(80+eSin*20)
      });
    })
  },40);
  var over=false;
  $("#stage").mousemove(function(e){
    if(!this.leftOffset) {
      this.leftOffset = $(this).offset().left;
      this.width = $(this).width();
    }
    if(over) dif=0;
    else
    dif = -5+(10*((e.pageX-this.leftOffset)/this.width));
  });
  $(".bcontent").hover(
    function(){over=true;dif=0;},
    function(){over=false;}
  );
});
//]]>
</script>

Y por último, el CSS donde deberemos colocar las imágenes a ser mostradas. Este es el ejemplo modificado levemente de la página original:

<style type="text/css">
#share {
  -moz-border-radius: 10px;
  background: #FFF;
  height: 220px;
  margin: 20px auto;
  overflow: hidden;
  width: 270px;
}
#stage {
  height: 220px;
  position: relative;
  width: 270px;
}
.btn {
  background-color: #FFF;
  float: left;
  height: 90px;
  left: 0;
  margin: 20px 0 0 10px;
  position: relative;
  top: 0;
  width: 60px;
}
.bcontent {
  bottom: 20px;
  left: 0;
  position: absolute;
  top: auto;
}

/* y las imágenes de los servicios a agregar */
.digg {background:url(imagenDIGG.png) no-repeat -4px bottom;}
.reddit {background:url(imagenREDDIT.png) no-repeat -4px bottom;}
.facebook {background:url(imagenFACEBOOK.png) no-repeat bottom center;}
.tweetmeme {background:url(imagenTWITTER.png) no-repeat -5px bottom;}
.dzone {background:url(imagenDZONE.png) no-repeat -7px bottom;}
</style>

Con eso agregado, podemos usarlo, por ejemplo, en un elemento HTML:

<div id="share">
  <div id="stage">
    <div class="btn digg">
      <div class="bcontent">
        <a class="DiggThisButton"></a>
        <script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
      </div>
    </div>
    <div class="btn tweetmeme">
      <div class="bcontent">
        <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
      </div>
    </div>
    <div class="btn dzone">
      <div class="bcontent">
        <script language="javascript" src="http://widgets.dzone.com/links/widgets/zoneit.js"></script>
      </div>
    </div>
    <div class="btn reddit">
      <div class="bcontent">
        <script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script>
      </div>
    </div>
    <div class="btn facebook">
      <div class="bcontent">
        <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a>
        <script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
      </div>
    </div>
  </div>
</div>

Con cualquier servicio será relativamente igual, cada botón deberá esta en una estructura como esta:

<div class="btn miServicio">
  <div class="bcontent">
    ....... y aquí colocarlemos el enlace o script de ese servicio .......
  </div>
</div>