La maldición del cursor

JMiur [E]

ResizeBrowser: Una herramienta online

Animando listas con Stroll

stroll es un script experimental creado por Hakimel que no pretende tener ningún uso práctico, simplemente, se trata de un efecto visual que funcionará sólo en los navegadores más modernos ya que hace un uso intensivo de las nuevas propiedades de estilo tales como transiciones, transformaciones y perspectivas.

Lo que permite es aplicar una serie de efectos a las listas que utilizan la propiedad overflow para mostrar sólo una parte del contenido y que el resto sea accesible mediante el uso de una barra de scroll vertical.

No tiene muchas explicaciones y en realidad, no son necesarias, podemos descargar el demo desde github y allí tendremos todo lo necesario para aplicarlo en nuestros propios proyectos. Para eso, basta tener dos cosas: los estilos y el script.

Los estilos se encuentran en el archivo stroll.min.css o stroll.css (son iguales) y no es necesario agregarlos todos, basta seleccionar el efecto deseado y descartar el resto. Lo más simple es copiar las reglas y agregarlas a nuestra plantilla.

El script también tiene dos versiones stroll.min.js y stroll.js; podemos usar cualquiera de ellas y la agregamos como siempre, antes de </head>

¿Y cómo lo usamos? Basta colocar la lista dentro de algún DIV contenedor al que identificamos mediante un ID y luego, llamar a la función:

<div class="demo">
  <ul class="zipper">
    <li>uno</li>
    <li>dos</li>
    <li>tres</li>
  </ul>
</div>
<script>stroll.bind('#demo ul');</script>

Todos los efectos funcionan de la misma manera y se distinguen estableciendo el atributo class en al etiqueta UL; en esta entrada, hay tres ejemplos distintos: curl, helix y zipper.

uno
dos
tres
cuatro
cinco
seis
siete
ocho
nueve
diez
once
doce
trece

uno
dos
tres
cuatro
cinco
seis
siete
ocho
nueve
diez
once
doce
trece

uno
dos
tres
cuatro
cinco
seis
siete
ocho
nueve
diez
once
doce
trece

Un último detalle extra a tener en cuenta: establecer las propiedades mínimas de las etiquetas UL y LI de la lista a la que vamos a aplicar el efecto; un ejemplo:

#demo ul {
  height: 280px;
  list-style-type: none;
  margin: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 0;
  position: relative;
  width: 190px;
}
#demo ul li {
  background-color: #B0B9C1;
  color: #000;
  font-size: 20px;
  padding: 10px;
  position: relative;
  z-index: 2;
}
#demo ul li:nth-child(odd) {
  background-color:#EEE;
}

Simple menú desplegable con CSS

Este es un ejemplo sencillo para crear un menú desplegable que puede incluir submenús, que usa las posibilidades que nos brindan las nuevas propiedades del CSS3.

Como casi cualquier otro, el HTML se arma en una lista, utilizando etiquetas UL y LI que, se anidan si es que queremos crear un submenú. Esta sería una lista standard:

<ul class="mi-menu">
  <li><a href="URL_enlace_1"> texto_enlace_1 </a></li>
  <li><a href="URL_enlace_2"> texto_enlace_2 </a></li>
  <li><a href="URL_enlace_3"> texto_enlace_3 </a></li>
</ul>

y si quisiéramos que uno de esos enlaces fuera un submenú:

<ul class="mi-menu">
  <li><a href="URL_enlace_1"> texto_enlace_1 </a></li>
  <li>
    <a href="#"> texto_enlace_2 </a>
    <ul>
      <li><a href="URL_enlace_2.1"> texto_submenú_2.1 </a></li>
      <li><a href="URL_enlace_2.2"> texto_submenú_2.2 </a></li>
      <li><a href="URL_enlace_2.3"> texto_submenú_2.3 </a></li>
    </ul>
  <li><a href="URL_enlace_3"> texto_enlace_3 </a></li>
</ul>

Así como está, veríamos algo similar a esto:

Y ahora, el CSS que hará que esa lista se transforme en otra cosa:

<style type="text/css">
  /* el menú en si mismo */
  .mi-menu  {
    border-radius: 5px;
    list-style-type: none;
    margin: 0 auto; /* si queremos centrarlo */
    padding: 0;
    /* la altura y su ancho dependerán de los textos */
    height: 40px; 
    width: 510px;
    /* el color de fondo */
    background: #555;
    background: -moz-linear-gradient(#555,#222);
    background: -webkit-linear-gradient(#555,#222);
    background: -o-linear-gradient(#555,#222);
    background: -ms-linear-gradient(#555,#222);
    background: linear-gradient(#555,#222);
  }

  /* si es necesario, evitamos que Blogger de problemas con los saltos de línea cuando escribimos el HTML */
  .mi-menu  br { display:none; }

  /* cada item del menu */
  .mi-menu  li {
    display: block;
    float: left; /* la lista se ve horizontal */
    height: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }
  .mi-menu li a {
    border-left: 1px solid #000;
    border-right: 1px solid #666;
    color: #EEE;
    display: block;
    font-family: Tahoma;
    font-size: 13px;
    font-weight: bold;
    line-height: 28px;
    padding: 0 14px;
    margin: 6px 0;
    text-decoration: none;
    /* animamos el cambio de color de los textos */
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
  }
  /* eliminamos los bordes del primer y el último */
  .mi-menu li:first-child a { border-left: none; }
  .mi-menu li:last-child a{ border-right: none; }
  /* efecto hover cambia el color */
  .mi-menu li:hover > a { color: Crimson; }

  /* los submenús */
  .mi-menu ul {
    border-radius: 0 0 5px 5px;
    left: 0;
    margin: 0;
    opacity: 0; /* no son visibles */
    position: absolute;
    top: 40px; /* se ubican debajo del enlace principal */
    /* el color de fondo */
    background: #222;
    background: -moz-linear-gradient(#222,#555);
    background: -webkit-linear-gradient(#22,#555);
    background: -o-linear-gradient(#222,#555);
    background: -ms-linear-gradient(#222,#555);
    background: linear-gradient(#222,#555);
    /* animamos su visibildiad */
    -moz-transition: opacity .25s ease .1s;
    -webkit-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
  }
  /* son visibes al poner el cursor encima */
  .mi-menu li:hover > ul { opacity: 1; }

   /* cada un ode los items de los submenús */
  .mi-menu ul li {
    height: 0; /* no son visibles */
    overflow: hidden;
    padding: 0;
    /* animamos su visibildiad */
    -moz-transition: height .25s ease .1s;
    -webkit-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
  }
  .mi-menu li:hover > ul li {
    height: 36px; /* los mostramos */
    overflow: visible;
    padding: 0;
  }
  .mi-menu ul li a {
    border: none;
    border-bottom: 1px solid #111;
    margin: 0;
    /* el ancho dependerá de los textos a utilizar */
    padding: 5px 20px;
    width: 100px;
  }
  /* el último n otiene un borde */
  .mi-menu ul li:last-child a { border: none; }

</style>

REFERENCIAS:designmodo.com

Iconos de tipo Glyphs

Crear un gadget de Facebook usando Json (3)

Voy a insistir en que la forma de mostrar los datos que leemos de un feed usando Json es subjetiva y podemos hacer casi cualquier cosa, sólo hay que saber cuáles son y aprender la forma de manipularlos, armando la salida de modo personal (más información: 1, 2)

En este último ejemplo, vamos a tratar de diferenciar el contenido y mostrarlo de distinto ¿Qué contenido? Por ejemplo trataremos a las imágenes que subimos a Facebook de modo diferenciado, mostrándolas más grandes o con un formato especial ¿Cómo podríamos hacer esto? leyendo el HTML y verificando la dirección URL de esas imágenes; una posibilidad:

var externo = elHtml.indexOf("safe_image.php");

La variable externo tendrá un valor mayor o igual a cero si dentro del contenido se encuentra ese texto que indica que la imagen no la hemos subido nosotros sino que es externa, ya sea porque lo que compartimos es un enlace o un video así que, si se trata de ese tipo de entradas, armaré un DIV de un tipo; por el contrario, si no se encuentra ese texto y hay una imagen, esa imagen la hemos subido nosotros y la URL es algo así:

https://fbcdn-photos-a.akamaihd.net/......./xxxxxxx_s.jpg

Donde el _s final indica que el tamaño de la imagen es pequeño (small) y es el dato que contiene el feed; mide 130 pixeles de ancho; si cambio _s por _n vería la imagen original con su tamaño normal, lo mismo si pasaría si usara _b..

Podría usar esas pero son muy grandes así que elegiré una intermedia y cambiare _s por _a que me dará una imagen de 180 pixeles de ancho.

¿Cómo haría eso? Por ejemplo, de este modo:

laImagen = laImagen.replace("_s.jpg","_a.jpg")

No son las únicas alternativas; _t es una miniatura de 75 pixeles, _o nos devuelve una imagen de 540 pixeles y _q o _x también tienen 180 pixeles ¿Por qué? No sé. Habrá que preguntarles a ellos.

Ahora que tengo todos los pedazos y un lio bárbaro en al cabeza, me dedico a armar la función y ver qué sale:

<,script type='text/javascript'>,
//<,![CDATA[

function extraer_imagen(htmltag) {
  var s, a, b, c, d;
  var imagen = "";
  s = htmltag;
  a = s.indexOf("<img");
  b = s.indexOf("src=\"",a);
  c = s.indexOf("\"",b+5);
  d = s.substr(b+5,c-b-5);
  if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) {
    imagen = d;
  }
  return imagen;
}

function feedFacebook(json) {
  var entry, mensaje, enlace, elResumen, elHtml, externo, laImagen;
  var salida = "";
  for (var i = 0; i < json.responseData.feed.entries.length; i++) {
    entry = json.responseData.feed.entries[i];

    // los datos del feed
    mensaje = entry.title;
    enlace = entry.link;
    elResumen = entry.contentSnippet;
    elHtml = entry.content;

    // los datos que verifico
    externo = elHtml.indexOf("safe_image.php");
    laImagen = extraer_imagen(elHtml);

    // y voy armando la salida
    salida += "<div class='cadaitem'>";

    if(externo!=-1) {

      // enlaces
      salida += "<div class='titulo'><a href='" + enlace + "' target='_blank' >" + mensaje + "</a></div>";
      salida += "<div class='contenido enlace'>";
      salida += "<img src='" + laImagen + "'/>";
      salida += "<p>" + elResumen + "</p>";
      salida += "</div>";
      salida += "<div class='clear'></div>";

    } else {

      // imágenes
      salida += "<div class='contenido imagen'>";
      if(laImagen) {
        laImagen = laImagen.replace("_s.jpg","_a.jpg");
        salida += "<a href='" + enlace + "' target='_blank'><img src='" + laImagen + "'/></a>";
        if(mensaje) { salida += "<span>" + mensaje + "</span>"; }
        if(elResumen) { salida += "<span>" + elResumen + "</span>"; }                

      }
      salida += "</div>";

    }
    salida += "</div>";

  }
  document.getElementById('divFACEpage').innerHTML=salida;
}

//]]>,
<,/script>,

El resto es un poco de CSS:

<,style>,
  #divFACEpage {
    margin: 0 auto;
    width: 250px;
  }
  .cadaitem {
    background-color: #FFF;
    font-family: Tahoma;
    font-size: 13px;
    margin-bottom: 5px;
  }
  .cadaitem .clear {
    clear:both;
    padding:10px;
  }
  .cadaitem .contenido.enlace {
    width:250px;
  }
  .cadaitem .titulo {
    overflow: hidden;
    padding: 10px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
  }
  .cadaitem .titulo a {
    color:DeepSkyBlue;
    font-weight:bold;
  }
  .cadaitem .contenido.enlace img {
    float: left;
    max-width: 100px;
    padding: 0 10px;
  }
  .cadaitem .contenido.enlace p {
    color: #666;
    float: right;
    font-size: 11px;
    overflow: hidden;
    padding-right: 10px;
    width: 120px;
    word-wrap: break-word;
  }
   .cadaitem .contenido.imagen {
    position:relative;
  }
  .cadaitem .contenido.imagen img {
    display: block;
    margin: 0 auto;
    padding: 20px 0;
  }
  .cadaitem .contenido.imagen:hover span {
    display: block;
  }
  .cadaitem .contenido.imagen span {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    color: #FFF;
    display: none;
    font-size: 11px;
    margin: 0 20px;
    padding: 10px;
    position: absolute;
    text-align: center;
    top:30%;
    width: 200px;
}
<,/style>,

Crear un gadget de Facebook usando Json (2)

En la primera parte hablaba de crear un gadget a partir de los datos de un feed de Facebook pero ¿cómo se diseña el gadget? Tal como se diseña un post, usando HTML y haciendo que sea la función el que escriba esos códigos. Para esto no hay un solo método, hay muchas formas; yo uso siempre el mismo, creo una variable de texto, voy "sumando" las distintas etiquetas y cuando termina el bucle, la "escribo" en el DIV.

El resto, es subjetivo; me imagino un gadget que colocaré en la sidebar así que será "angosto" y estaría más interesado en mostrar imágenes que en mostrar textos así que, para complicarme la vida, debería "detectar" esas imágenes y separarlas de los textos. Usaré sólo cuatro datos: entry.title, entry.link, entry.content y entry.contentSnippet; no me meteré con la fecha que requiere códigos más largos para formatearlas de manera "razonable" y quisiera mantener todo lo más simple posible para concentrarme en lo que realmente me parece importante aunque, como dije, todo esto es absolutamente subjetivo y esa es justamente lo verdaderamente interesante de Json, que con los mismos datos, podemos armar cosas completamente distintas.

¿Por que no pensar primero el modelo que quisiera que se viera escribiendo el HTML tal como haría en una entrada? Un ejemplo:

<div class='cadaitem'>
  <div class='titulo'>
    <a href='URL_entrada' target='_blank' > ... el texto del mensaje ... </a>
  </div>
  <div class='contenido'>
    <img src='URL_imagen'/>
    <p> ... aquí pondría el resumen ... <p>
  </div>
</div>

Bastaría establecer las reglas de estilo CSS para cada cosa u ordenarlas de cualquier otro modo y luego, usar eso en la función, agregando los datos correspondientes:

salida += "<div class='cadaitem'>";
salida += "<div class='titulo'>";
salida += "<a href='"+enlace+"' target='_blank' >"+mensaje+"</a>";
salida += "</div>";
salida += "<div class='contenido'>";
salida += "<img src='"+laImagen+"'/>";
salida += "<p>"+elResumen+"<p>";
salida += "</div>";
salida += "</div>";

Pero ... me falta laImagen; debo "encontrarla" dentro del contenido (entry.content) y para eso, usaré una función extra que es la misma que usamos en Blogger para detectar al primera imagen de las entradas:

function extraer_imagen(htmltag) {
  var s, a, b, c, d;
  var imagen = "";
  s = htmltag;
  a = s.indexOf("<img");
  b = s.indexOf("src=\"",a);
  c = s.indexOf("\"",b+5);
  d = s.substr(b+5,c-b-5);
  if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) {
    imagen = d;
  }
  return imagen;
}

Así que en mi función, la variable laImagen será:

var elHtml = entry.content;
var laImagen = extraer_imagen(elHtml);

o directamente:

laImagen = extraer_imagen(entry.content);

Suscribirse a la entradas

Vagabundia

La maldición del cursor

ResizeBrowser: Una herramienta online

Animando listas con Stroll

Simple menú desplegable con CSS

Iconos de tipo Glyphs

Crear un gadget de Facebook usando Json (3)

Crear un gadget de Facebook usando Json (2)

y entonces hablaron

últimas entradas

autopromo

la puerta abierta

las etiquetas

Páginas

Glyphish
Contiene 201 íconos de distintos tamaños en formato PNG. descargar

Pixicus
Contiene 106 íconos de distintos tamaños en formato PNG. descargar

Mimiglyphs
Contiene 80 íconos de 16x16 en formato PNG. descargar

	Agregar a Favoritos
	Plugin de búsqueda