TinyDropdown: Un script para crear menús

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

Just Vector
	Contiene 100 íconos de 32x32, en formato PNG.descargar

Milky
	Contiene 262 íconos de 48x48 y 64x64, en formato PNG.descargar

Simple Icons
	Contiene 16 íconos de 32x32, en formato PNG.descargar

Designer icons
	Contiene 12 íconos de 32x32, en formato PNG.descargar

Glass es un servicio que a mi juicio sigue estando aún un poco verde pero que agrega una nueva forma de compartir cosas en la web de manera ... digamos que simple.

Una vez que nos registramos gratuitamente, tenemos que agregar la extensión ya sea para Firefox como para Chrome y a partir de allí, se nos agregará un botón al navegador. Desde cualquier sitio, haciendo click en él, se abrirá un panel donde, por ejemplo, si elegimos New Slide, podremos dejar mensajes, agregar enlaces, imágenes o incluso videos agregando las direcciones URL de estos que luego, podrán ser vistos por cualquiera que use el servicio o sól opor aquellos que nosotros hayamos elegido.

No sé si este modelo de comunicación tendrá o no tendrá alguna repercusión en el futuro pero, no puede negarse que es original y cualquier cosa, hay más detalles que pueden verse en el tutorial paso a paso que, si bien está en inglés, puede entenderse sin demasiadas dificultades.

REFERENCIAS:wwwhatsnew.com

Sigamos mezclando cosas.

A partir de la navegación por entradas usando JSON, otra posibilidad es hacer algo similar con las etiquetas pero, usando algún otro dato que también nos dan los feeds y el resultado, será algo parecido a esta entrada pero, agregándole la posibilidad de avanzar y retroceder en la lista sin necesidad de salir de la página, cargándolas de manera dinámica.

Esta vez, en lugar de contar las entradas y paginarlas, vamos a usar el dato de página anterior y página siguiente que puede ser leido en el feed ya que las páginas son enlaces que tienen un atributo rel específico pero, hay varios enlaces generales así que las buscamos de esta manera:

var urlanterior = "";
var urlsiguiente = "";

for (var k = 0; k < json.feed.link.length; k++) {
  if (json.feed.link[k].rel == 'previous') {
    // si existe, guardamos la dirección a la página anterior
    urlanterior = json.feed.link[k].href;
  }
  if (json.feed.link[k].rel == 'next') {
    // si existe, guardamos la dirección a la página siguiente
    urlsiguiente = json.feed.link[k].href;
  }
}

El problema con esas direcciones es que son raras; no sé por que. Por ejemplo, dicen esto:

http://www.blogger.com/feeds/33571139/posts/default/-/iconos/-/iconos?alt=json-in-script&start-index=6&max-results=5&orderby=published

así que usaremos JavaScript para modificarla un poco eliminando una parte y que se adapte al formato que uno conoce.

Entonces, como en todos los casos anteriores, primero el JavaScript que ponemos antes de </head>:

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

o bien cargamos desde un archivo externo:

<script type='text/javascript' src='URL_archivo.js' />

// estos son los datos que deben definirse
var entradasporpagina = 5; // establecer la cantidad de entradas a mostrar
var urlsitio = "http://miblog.blogspot.com"; // cambiar por el nombre del sitio
var imgxdefecto = "http://xxxxxxxxxxx"; // establecer la dirección de la imagen por defecto a ser utilizada
var cualetiqueta = "nombreetiqueta"; // definir la etiqueta a mostrar

var flagfirst = 0;
var cantidadposts = 0;
var urlanterior, urlsiguiente;

// esta es la función genérica que elimina las etiqueas y crea el resumen
function eliminartags(cual,longitud){
  var resumen = cual.split("<");
  for(var i=0;i<resumen.length;i++){
    if(resumen[i].indexOf(">")!=-1){
      resumen[i] = resumen[i].substring(resumen[i].indexOf(">")+1,resumen[i].length);
    }
  }
  resumen =  resumen.join("");
  resumen = resumen.substring(0,longitud-1);
  return resumen;
}

// esta es la misma función de siempres con algunas variantes
function showpageetiquetas(json) {
  var entry, posttitle, posturl, postimg, postcontent;
  var salida = "";

  // vamos a buscar las direcciones para navegar la lista
  for (var k = 0; k < json.feed.link.length; k++) {
    if (json.feed.link[k].rel == 'previous') {
      // esta es la página anterior
      urlanterior = json.feed.link[k].href;
    }
    if (json.feed.link[k].rel == 'next') {
      // esta es la página siguiente
      urlsiguiente = json.feed.link[k].href;
    }
  }

  // leemos tantas entradas como definimos
  for (var i = 0; i < entradasporpagina; i++) {

    // si no hay más, terminamos el bucle
    if (i == json.feed.entry.length) { break; }

    entry = json.feed.entry[i];

    // este es título de cada entrada
    posttitle = entry.title.$t;

    // buscamos la URL de la entrada
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        // la guardamos
        posturl = entry.link[k].href;
        break;
      }
    }

    // buscamos el contendio de la entrada y lo guardamos
    if ("content" in entry) {
      postcontent = entry.content.$t;
    } else if ("summary" in entry) {
      postcontent = entry.summary.$t;
    } else {
      postcontent = "";
    }

    // buscamos la imagen o usamos una imagen por defecto
    if ("media$thumbnail" in entry) {
      postimg = entry.media$thumbnail.url;
    } else {
      postimg = imgxdefecto;
    }

    // terminada la lectura, vamos creando el código HTML
    salida += "<div class='paginaetiquetas'>";
    salida += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
    salida += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
    salida += "<p>" + eliminartags(postcontent,100) + " ...</p>";
    salida += "</div>";
  }

  // terminamos el bucle y escribimos el resultado que son las entradas encontradas
  document.getElementById("misetiquetas").innerHTML = salida;

  // vamos a crear la parte inferior con la navegación
  salida = "";

  // si hay una página anterior, ponemos el elnace y sino, sólo un texto
  if(urlanterior) {
    salida += "<a href='javascript:navpaginaetiquetas(-1);' class='anterior'>anterior</a>";
  } else {
    salida += "<span class='deshabilitado anterior'>anterior</span>";
  }

  // si hay una página siguiente, ponemos el elnace y sino, sólo un texto
  if(urlsiguiente) {
    salida += "<a href='javascript:navpaginaetiquetas(1);' class='siguiente'>siguiente</a>";
  } else {
    salida += "<span class='deshabilitado siguiente'>siguiente</span>";
  }
 
  // le agregamos un enlace a la primera página
  salida += "<a href='javascript:navpaginaetiquetas(0);' class='inicio'>inicio</a>";

  // escribimos el código
  document.getElementById("navegadionetiquetas").innerHTML = salida;
}

// esta es la funcion que creará la dirección del feed que vamos a leer
function navpaginaetiquetas(direccion){
  var p, parametros;
  if(direccion==-1) {
    // página anterior
    p = urlanterior.indexOf("?");
    parametros = urlanterior.substring(p);
  } else if (direccion==1) {
    // página siguiente
    p = urlsiguiente.indexOf("?");
    parametros = urlsiguiente.substring(p);
  } else {
    // página inicial
    parametros = "?start-index=1&max-results=" + entradasporpagina + "&orderby=published&alt=json-in-script"
  }
  parametros += "&callback=showpageetiquetas";
  
  incluirscript(parametros);
}

// esta es la funcion que carga el script de manera dinámica
function incluirscript(parametros) {
  // si no es la primera vez, borramos el script anterior
  if(flagfirst==1) {removerscript();}
  // borramos todo y ponemos un texto o una imagen de carga
  document.getElementById("misetiquetas").innerHTML = "<div id='loadingscript'></div>";
  document.getElementById("navegadionetiquetas").innerHTML = "";
  // este es el archivo con los feeds
  var archivofeeds = urlsitio + "/feeds/posts/default/-/" + cualetiqueta + parametros;
  // lo cargamos y ejecutamos
  var nuevo = document.createElement('script');
  nuevo.setAttribute('type', 'text/javascript');
  nuevo.setAttribute('src', archivofeeds);
  nuevo.setAttribute('id', 'OTROTEMPORAL');
  document.getElementsByTagName('head')[0].appendChild(nuevo);
  flagfirst = 1;
}

// esta es la función que remueve el script cargado previamente
function removerscript() {
  var el = document.getElementById("OTROTEMPORAL");
  var padre = el.parentNode;
  padre.removeChild(el);
}

// cuando se cargue nuestro sitio, iniciamos las funciones
onload=function() { navpaginaetiquetas(0); }

Un poco de CSS para darle forma. Lo ponemos debajo de lo anterior:

<style>
  #misetiquetas { /* el contenedor */
      margin: 0 auto;
      width: 314px;
  }
  #loadingscript { /* el texto o imagen de carga */ }
  .paginaetiquetas { /* cada una de las entradas */
    border: 2px solid #101921;
    height: 72px;
    margin: 5px 0;
    padding: 5px;
    width: 300px;
  }
  .paginaetiquetas img { /* la miniatura */
    float: left;
    height: 72px;
    padding-right: 5px;
    width: 72px;
  }
  .paginaetiquetas h6, .paginaetiquetas h6 a { /* los títulos de las entradas */
    font-size: 11px;
    font-weight: normal;
    margin: 0;
  }
  .paginaetiquetas p { /* los resúmenes */
    font-size: 11px;
    margin: 5px 0;
  }
  #navegadionetiquetas { /* el contenedor con los enlaces para navegar */
    border: 1px solid #404951;
    color: #BBB;
    font-size: 18px;
    text-align: center;
    margin:0 auto;
    width:314px;
  }
  #navegadionetiquetas a { /* los enlaces para navegar */
    color: #BBB;
    display:block;
    font-size: 18px;
    padding: 5px 10px;
  }
  #navegadionetiquetas span { /* los textos deshabilitados */ 
    color: #666;
    padding: 5px 10px;
  }
  /* las posiciones de los enlaces para navegar */
  #navegadionetiquetas .siguiente {float: right;}
  #navegadionetiquetas .anterior {float: left;}
  #navegadionetiquetas .inicio {text-align: center;}
</style>

Bien; sólo nos falta ponerlo en algún elemento HTML, en un post o en la plantilla misma:

<div id="misetiquetas"></div>
<div id="navegadionetiquetas"></div>

Y eso es todo.

Facebook ha añadido un nuevo botón llamado "Enviar" que sirve para compartir contenido de modo diferente al botón Me Gusta ya que, en lugar de enviar la información a todos los contactos, la envia de manera personalizada, ya sea a una persona, a un conjunto de personas o a los miembros de un grupo.

El nuevo botón sólo puede ser agregado utiliando lenguaje XFMBL por lo tanto, si no tenemos incorporada esta posibilidad a nuestro sitio, primero que nada debemos colocar lo siguiente justo después de <body>:

<div id='fb-root'></div>
<script src='http://connect.facebook.net/es_ES/all.js#appId=APP_ID&amp;xfbml=1'></script>

Esto nos permitirá utilizar el código especial de Facebook con cualquier otro plugin de la red social. Este código no es otra cosa que etiquetas especiales llamadas FB y para agregar el botón Enviar, lo mínimo a colcoar sería lo siguiente:

<fb:send href='URL'></fb:send>

donde href es la dirección URL a compartir. El resto de las opciones (color, fuentes, etc) podemos verlas en la misma página del plugin.

En Blogger si queremos que la URL apunte a cada entrada en particular, deberíamos condicionar el botón de tal forma que sólo se muestre en las entradas individuales y utilizar las expresiones de Blogegr para indicar esa dirección:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <fb:send expr:src='data:post.url'></fb:send>  
</b:if>

Quienes ya utilicen el botón Me Gusta tienen la posibilidad de combinarlos utilizando el mismo código XFMBL al que sólo se le debe agregar el atributo send="true" con el mismo criterio que antes, indicando una dirección URL especifica como por ejemplo el home de nuestro sitio:

<fb:like src='http://miblog.blogspot.com' send='true' width='450' show_faces='true'></fb:like>

o condicionándolo para que puedan compartirse las entradas individuales:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <fb:like expr:src='data:post.url' send='true' width='450' show_faces='true'></fb:like>
</b:if>

Los navegadores utilizan cursores de manera predeterminada, estableciendo cuál será el que se muestra de acuerdo al tipo de etiqueta pero, como casi todo, esos valores pueden ser cambiados utilizando CSS. En este caso, al propiedad que los define es:

cursor: valor;

Esos valores posibles son muchos e inclusio varian de navegador en navegador; algunos no producen efectos y otros son iguales entre si.

El valor por defecto es auto; el valor default muestra la fecha típica de selección y si usamos el valor none no se mostrará ninguno:

Es común ver que muchos utilizan el valor hand para indicar enlaces pero, esto es un error ya que es un cursor que sólo es soportado por Internet Explorer; para indicar un enlace, debe usarse pointer que mostrará lo mismo en todos los navegadores:

cursor: pointer;

Claro que, al entrar en al era del CSS3, a esos cursores se les han sumado algunos otros que por ahora, sólo son visibles en Firefox, Chrome, Safari y Opera pero, que pueden usarse sin problemas ya que la propiedad puede ser definida varias veces; de hecho, tendremos que definirla varias veces para usar estos nuevos modelos porque cada navegador tiene su propio valor.

Hay cuatro modelos disponibles:

cursor: grab; 
cursor: grabbing;
cursor: zoom-in;
cursor: zoom-out;

Para utilizarlos, debemos colocar los valores con sus respectivos prefijos: -moz- para Firefox, -webkit- para Chrome y Safari y -o- para Opera:

cursor: -moz-grab; cursor: -webkit-grab; cursor: -o-grab; cursor: grab;
cursor: -moz-grabbing; cursor: -webkit-grabbing; cursor: -o-grabbing; cursor: grabbing;
cursor: -moz-zoom-in; cursor: -webkit-zoom-in; cursor: -o-zoom-in; cursor: zoom-in;
cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: -o-zoom-out; cursor: zoom-out;

Aparentemente, la w3.org dice que habrá otors tres pero no parece que aún hayan sido incorporados a ningún navegador:

cursor: count-down;
cursor: count-up;
cursor: count-up-down;

Sí, el CSS para estos modelos de botones es extremadamente largo pero no hay más remedio cuando cada navegador usa sus propiedades y hay que repetirlas varias veces. De todos modos, lo que nos muestra wiseheartdesign.com es una alternativa válida, sobre todo, para aprender cómo pueden combinarse y que funcionen relativamente bien en la mayoría de las plataformas.

El demo puede verse funcioanndo acá y la idea es crear botones que tengan varias líneas de texto.

En la página del autor hay varios ejemplos y este sólo es uno de ellos:

<style>
a.multi-line-button {
  /* lo normal */
  background-color: #60a3d8;
  border-color: #2970a9;
  border-left-color: #60a3d8;
  border-top-color: #60a3d8;
  border-style: solid;
  border-width: 1px;
  color:#EEE;
  display: block;
  margin: 0.2em auto;
  padding: 12px 15px;
  text-align: center;
  text-decoration: none;
  /* el CSS3 */
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  -o-background-clip: padding-box;
  -ms-background-clip: padding-box;
  -khtml-background-clip: padding-box;
  background-clip: padding-box;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  -o-border-radius: 6px;
  ms-border-radius: 6px;
  -khtml-border-radius: 6px;
  border-radius: 6px;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #89BBE2), color-stop(50%, #60A3D8), color-stop(100%, #378BCE));
  background-image: -moz-linear-gradient(top, #89BBE2 0%, #60A3D8 50%, #378BCE 100%);
  background-image: linear-gradient(top, #89BBE2 0%, #60A3D8 50%, #378BCE 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#89bbe2', EndColorStr='#378BCE'); 
  -moz-box-shadow: rgba(255, 255, 255, 0.5) 1px 1px 0 0 inset;
  -webkit-box-shadow: rgba(255, 255, 255, 0.5) 1px 1px 0 0 inset;
  -o-box-shadow: rgba(255, 255, 255, 0.5) 1px 1px 0 0 inset;
  box-shadow: rgba(255, 255, 255, 0.5) 1px 1px 0 0 inset;
  text-shadow: #2e7ebd 0 1px 2px;
}
a.multi-line-button .title {
  color: #CFF;
  display: block;
  font-family: Times New Roman;
  font-size: 24px;
  opacity: 0.9;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
}
a.multi-line-button .subtitle {
  color: #DEF;
  display: block;
  font-family: Georgia;
  font-size: 14px;
  margin-top: 4px;
  opacity: 0.7;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
}
a.multi-line-button:hover .title {
  opacity: 1;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}

a.multi-line-button:hover .subtitle {
  opacity: 0.8;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
}
a.multi-line-button:active {
  padding: 13px 15px 11px;
}
a.multi-line-button:hover, a.multi-line-button:focus {
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #9DC7E7), color-stop(50%, #74AFDD), color-stop(100%, #378BCE));
  background-image: -moz-linear-gradient(top, #9DC7E7 0%, #74AFDD 50%, #378BCE 100%);
  background-image: linear-gradient(top, #9DC7E7 0%, #74AFDD 50%, #378BCE 100%);
}
a.multi-line-button:active, a.multi-line-button.depressed {
  border-color: #2970a9;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #5796C8), color-stop(100%, #6AA2CE));
  background-image: -moz-linear-gradient(top, #5796C8 0%, #6AA2CE 100%);
  background-image: linear-gradient(top, #5796C8 0%, #6AA2CE 100%);
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
</style>

Y se usaría de este modo:

<a class='multi-line-button' href='#' style='width:14em'>
  <span class='title'>MI EJEMPLO</span>
  <span class='subtitle'>el botón con una segunda línea de texto de cualquier longitud</span>
</a>

MI EJEMPLOel botón con una segunda línea de texto de cualquier longitud