WWF: Make a difference

Cloudy Social Networking
	Contiene 25 íconos de 300x300, en formato PNG.descargar

Furry Cushions
	Contiene 24 íconos de 48x48, 64x64, 128x128 y 256x256, en formato PNG.descargar

Lorem Ipsum no es un texto cabalísitico ni una manía de los diseñadores, simplemente, es la forma sencila de llenar contenido para hacer demostraciones y no es algo "moderno" ni exclusivo de la web, es un relleno que se viene utilizando desde el año 1500 cuando un impresor desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos modelo.

Sin duda, usar eso es mejor que poner textos tipo "Aquí va el contenido" o "blablablabla blablabla".

Hace tiempo, Gem@ publicaba un generador online de estos textos y recientemente, ampliaba la información publicando una variante fantástica llamada Lorempixum que, en lugar de agregar textos, nos permite agregar imágenes de distintos tamaños.

Pero, si uno está cansado de esos textos que no dicen nada, podemos usar el Text Generator que generará eso que dice, un texto aleatorio en idioma inglés, cuya longitud podrá variar entre uno y cinco párrafos y que basta copiar y pegar donde se nos ocurra:

Mutley, you snickering, floppy eared hound. When courage is needed, you're never around. Those medals you wear on your moth-eaten chest should be there for bungling at which you are best. So, stop that pigeon, stop that pigeon, stop that pigeon, stop that pigeon, stop that pigeon, stop that pigeon, stop that pigeon. Howwww! Nab him, jab him, tab him, grab him, stop that pigeon now.

Y de este modo, cualquier prueba tendrá aspecto shakespeariano

Un elefante ocupa mucho espacio, dos elefantes ocupan mucho más ... es obvio ¿verdad? Pero también es obvio que si al elefante le ponemos un abrigo grueso, su volumen se incrementará aunque vaya uno a saber para qué habría que abrigar a un elefante.

En una página web pasa lo mismo; "algo" tiene un tamaño, ya sea porque nosotros lo hayamos establecido con width y height o bien porque "mide" eso.

El caso típico es una imagen; yo sé que esta mide exaxtamente 133x200:

Lo sé porque la medí, porque la miré en el navegador y decía que medía eso o bien porque la cargué indicando expresamente que la quería de ese tamaño.

Hasta ahí, todo bien pero empezamos a ponerle detallecitos, muchos detallecitos y, cuando queremos ubicarla, no entra en ese espacio que habíamos reservado. Algo falla y este problema sólo se resuelve con aritmética.

.estaimagen {
  background-color: #FFF;
  border: 5px solid #505961;
  box-shadow: 0 0 20px #FFF;
  height: 200px;
  margin: 20px;
  padding: 3px;
  width: 133px;
}

<img class="estaimagen" src="URL_iIMAGEN" />

¿Cuál es el tamaño final? ¿Qué espacio necesito para que entre y no se corte?

Sumamos:

si el ancho es 133
padding 3 a cada lado así que 3 + 3 = 6 => 133 + 6 = 139
border 5 a cada lado así que 5 + 5 = 10 => 139 + 10 = 149
margin 20 a cada lado así que 20 + 20 = 40 => 149 + 40 = 189

ancho + padding + border + margin = ancho real
133 + 6 + 10 + 40 = 189

Lo mismo pasará con la altura:

alto + padding + border + margin = alto real
200 + 6 + 10 + 40 = 256

¿Y la sombra? En versiones anteriores a IE9 se usan filtros que no las muestran de modo similar, son "duras" así que no las tenemos en cuenta. De todas maneras, en todos los navegadores, esas sombras también ocupan espacio; y es por eso que en este ejemplo se agrega un margen para que "haga lugar" a esa sombra. Si usáramos valores más altos, deberíamos incrementar ese margen o las sombras se cortarían.

Verificamos el calculo poniendo varias imágenes dentro de un contenedor de tamaño fijo:

<style>
  #demotamanio {
    border: 1px solid #666;
    height: 256px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 189px;
  }
  #demotamanio br {
    display:none;
  }
  #demotamanio img {
    background-color: #FFF;
    border: 5px solid #505961;
    box-shadow: 0 0 20px #FFF;
    float:left;
    height: 200px;
    margin: 20px;
    padding: 3px;
    width: 133px;
  }
</style>

<div id="demotamanio">
  <div>
    <img src="URL_IMAGEN1"/>
    <img src="URL_IMAGEN2"/>
    <img src="URL_IMAGEN3"/>
  </div>
</div>

x1 | x2 | x3

Otra vez aritmética; si cada imagen requiere 189 pxeles, dos imágenes requieren 189 x 2 = 378 y tres 189 x 3 = 567

Si digo que las transiciones sirven para cualquier cosa, es una exageración pero ... sirven para casi cualquier cosa. Esta vez, veamos cómo podrían aplicarse a la creación de menús expandibles.

Creo el HTML que es un rectángulo en donde colocamos una lista ordenada cuya clase es visible y dentro de esta, una segunda lista cuya clase es novisible:

<div id="demomenu">
  <ul class="visible">
    <li>mi menú    <ul class="novisible">
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
    <li><a href="#">item 4</a></li>
    <li><a href="#">item 5</a></li>
    </ul>
  </ul>
</div>

Y el CSS:

<style>

/* las reglas generales */
#demomenu { /* este es el rectángulo que contendrá todo */
  margin: 0 auto 50px;
  position: relative; /* lo posicionamos de manera relativa */
  width: 200px;  /* definimos su ancho */
  z-index: 100; /* hacemos que quede por encima de las demás etiquetas */
}
#demomenu ul { /* reseteamos las lista quitándoles posibles propeidades */
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#demomenu li { list-style-type: none; }
#demomenu a { /* establecemos las propiedades de los textos delos enlaces */
  color: #456;
  font-size: 17px;
  text-decoration: none;
  text-shadow: 1px 1px 1px #FFF;
}
#demomenu a:hover { color: #000; }

/* esta es la  lista visible */
#demomenu .visible {
  background-color: #456;
  border: 2px solid #ABC;
  border-radius: 4px;
  box-shadow: 0 0 5px #FFF inset;
  cursor: pointer;
  padding: 5px 0;
  text-align: center;
  /* estas son las propiedades importantes */
  display: block;
  position: absolute;
  width: 200px;
}
#demomenu ul.visible li { /* el primer item no es un enlace así que definimos sus propeidades */
  color: #EEEEEE;
  font-family: Tahoma;
  font-size: 24px;
  text-shadow: 1px 1px 1px #000;
}

/* cada item que permanece oculto */
#demomenu ul.visible ul li {
  background-color: #ABC;
  border-top: 2px solid #456;
  padding: 0 0 5px;
  /* esta transición afectará al color de fondo de cada item */
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

/* la lista oculta */
#demomenu .novisible {
  display: block;
  padding: 0 10px;
  position: relative;
  top: 10px;
  /* con esto la mantenemos oculta */
  height: 0;
  overflow: hidden;
  /* la transición hará que se anime el cambio de altura */
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

/* cambia el color de fondo */
#demomenu ul.visible ul li:hover { background-color: #CDE; }

/* cambia la altura y por lo tanto, se hace visible */
#demomenu ul.visible:hover .novisible { height: 200px; }

</style>

• mi menú
• item 1
• item 2
• item 3
• item 4
• item 5

Otra variante. En lugar de desplegar algo verticalmente, lo desplegaremos horizontalmente o mejor dicho, ampliaremos su ancho para dejar visible lo que está debajo; el HTML es otra lista:

<ul id="demomenu">
  <li>item 1
    <div>
      <a href="#">item 11</a>
      <a href="#">item 12</a>
      <a href="#">item 13</a>
    </div>
  </li>
  <li>item 2
    <div>
      <a href="#">item 21</a>
      <a href="#">item 22</a>
      <a href="#">item 23</a>
    </div>
  </li>
  <-- seguimos agregando -->
</ul>

Y el CSS cásico del ejemplo:

<style>
#demomenu { /* reseteamos la lista quitándole posibles propeidades */
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#demomenu li { /* cada item de la lista */
  background-color: #456;
  border: 2px solid #ABC;
  box-shadow: 0 0 5px #FFFF inset;
  border-radius: 0 10px 10px 0;
  color: #EEE;
  font-family: Tahoma;
  font-size: 24px;
  height: 32px;
  line-height: 32px;
  list-style-type: none;
  margin: 2px 0;
  position:relative;
  width: 100px;
  text-shadow: 1px 1px 1px #000;
  /* esta es la propiedad que se animará */
  padding-left: 10px;
  /* la transición  */
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
#demomenu li div { /* los enlaces interiores permanece ocultos */
  left: 10px;
  position: absolute;
  top: -3px;
  width: 200px;
  /* esta es la propiedad que se animará */
  opacity: 0;
  /* la transición  */
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

/* al poner el cursor encima, aumentamos el padding mostrando lo que hay debajo */
#demomenu li:hover { padding-left: 300px; }
#demomenu li:hover div { opacity: 1; }

#demomenu li div a { /* las propeidades de los enlaces ocultos */
  color: #000;
  font-size: 14px;
  margin: 0 5px;
  text-shadow: 1px 0 1px #FFF;
}
#demomenu li div a:hover {
  color: #FFF;
  text-shadow: 1px 0 1px #000;
}

</style>

• item 1
  item 11item 12item 13
• item 2
  item 21item 22item 23
• item 3
  item 31item 32item 33
• item 4
  item 41item 42item 43
• item 5
  item 51item 52item 53

Hace unos dias, Gem@ comentaba que en algunos casos, utilizando Json para mostrar resúmenes de entradas, la miniatura que se mostraba era la imagen por defecto aún cuando esa entrada tuviera una imagen.

Algo similar preguntaba shinigami : "¿cómo sabe el sistema qué imagen va a tomar como miniatura que represente la entrada en gadgets o modificaciones como entradas populares, últimas entradas, entradas relacionadas, etc?"

Yo no puedo contestar esa pregunta porque desconozco el método que usa Blogger pero, ese es un dato que se incluye de manera automática y es visible en el código fuente generado (no en la plantilla) ya que se encuentra en una etiqueta:

<link rel="image_src"  href="http://2.bp.blogspot.com/......./s72-c/......." />

En principio, la imagen que toma es la primera que se encuentra en la entrada pero, algunas veces es otra o ninguna; esto puede ser porque el post se haya editado o actualizado o porque se le da lagana; no hay manera de controlar eso sin embargo, podríamos evitar el problema modificando los scripts para que, en lugar de leer ese dato, se lea la lista de imágenes de la entrada y entonces, seleccionar una. Para eso, podemos adaptar parte de un script que mostraba Ariane en un truco que usaba Json para mostrar entradas con ciertas etiquetas.

Supongo que hay muchas variantes de estos scripts pero, en general, usando Json, la imagen de la miniatura la detectábamos así:

if ("media$thumbnail" in entry) {
  postimg = entry.media$thumbnail.url;
} else {
  postimg = imgxdefecto;
}

donde:
imgxdefecto es la URL de la imagen que usaríamos si no se encuentra ninguna
postimg es la URL de la imagen a mostrar

Lo que hace ese código es verificar si existe el dato entry.media$thumbnail.url que es esa imagen que define Blogger y, si no existe, se usa la que nosotros hayamos estabelcido por defecto.

Esa es la parte que cambiaremos así:

var s, a, b, c, d;
postimg = imgxdefecto; // esta es la imagen por defecto que usaremos

s = entry.content.$t; // leemos el código HTML de la entrada
a = s.indexOf("<img"); // buscamos la etiqueta IMG
b = s.indexOf("src=\"",a); // buscamos el atributo SRC de esa etiqueta
c = s.indexOf("\"",b+5); // buscamos el final del atributo SRC
d = s.substr(b+5,c-b-5); // leemos el valor del atributo SRC

// si hay una etiqueta IMG ( a!=-1 ), y tiene un atributo SRC ( b!=-1 ) con un valor ( d!="" )
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) {
  // quiere decir que encontramos la URL de la primera imagen
  postimg = d;
}

TinyDropdown es un pequeño script que facilita la tarea de crear menús complejos ya que incluye submenús y diferentes efectos de animación.

Como todo menú de este tipo no es fácil de explicar ya que depende mucho del tipo de estructura que querramos tener pero, podemos descargar el demo y los archivos necesarios desde la página del desarrollador y estudiarlos.

Básicamente, debemos agregar el script antes de </head> en cualquiera de sus dos formatos, la versión completa (tinydropdown.js) o la minimizada (packed.js):

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

A continuación, las reglas de estilo que luego podremos modificar a gusto:

<style>
  ....... aquí pegamos el contenido de archivo tinydropdown.css
</style>

Y ahora llega el HTML que se coloca allí donde quisiéramos que se viera el menú.

<div class="nav">
  <ul id="menu" class="menu">
    <li class="nodiv"><a href="#">Inicio</a></li>
    <li>
      <a href="#">ITEM 1</a>
      <ul>
        <li><a href="#">Submenu 1.1</a></li>
        <li><a href="#">Submenu 1.2</a></li>
        <li class="submenu">
          <a href="#">MORE</a>
          <ul>
            <li class="noborder"><a href="#">More 1</a></li>
            <li><a href="#">More 2</a></li>
            <li><a href="#">More 3</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <span>ITEM 2</span>
      <ul>
        <li><a href="#">Submenu 2.1</a></li>
        <li><a href="#">Submenu 2.2</a></li>
        <li><a href="#">Submenu 2.3</a></li>
        <li class="submenu">
          <span>MORE</span>
          <ul>
            <li class="noborder"><a href="#">More 1</a></li>
            <li><a href="#">More 2</a></li>
            <li><a href="#">More 3</a></li>
            <li><a href="#">More 4</a></li>
            <li><a href="#">More 5</a></li>
          </ul>
        </li>
        <li><a href="#">Submenu 2.5</a></li>
        <li><a href="#">Submenu 2.6</a></li>
      </ul>
    </li>
    <li>
      <a href="#">ITEM 3</a>
      <ul>
        <li><a href="#">Submenu 3.1</a></li>
        <li><a href="#">Submenu 3.2</a></li>
        <li><a href="#">Submenu 3.3</a></li>
      </ul>
    </li>
    <li>
      <a href="#">INFO</a>
      <ul id="info">
        <li> ... cualquier texto ... </li>
      </ul>
    </li>
  </ul>
</div>
<script type="text/javascript">
  var dropdown=new TINY.dropdown.init("dropdown", {id:'menu', active:'menuhover'});
</script>

La forma de ejecutar la función es agregarla después del menú y allí también podemos establecer algunos parámetros de configuración:

var dropdown=new TINY.dropdown.init("dropdown", {id:'menu', active:'menuhover', fade:true, slide:true, timeout:200});

id es el nombre del atributo ID (en el ejemplo: menu)
active es la clase CSS activa (en el ejemplo: menuhover

Todos los demás son opcionales:

fade indica si se aplica el efecto de opacidad (TRUE) o no (FALSE)
slide indica si se aplica el efecto de deslizamiento (TRUE) o no (FALSE)
speed indica la velocidad del efecto toggle y es un valor emtre 1 y 9 (por defecto es 5)
timeout es el tiempo de los efectos