Selección de íconos surtidos

JMiur [E]

3D Glossy Icon Set
	Contiene 100 íconos de 16x16, 24x24, 32x32, 48x48 y 64x64, en formato PNG. descargar

Antique icons via Gema
	Contiene 33 íconos de 128x128 en formato PNG. descargar

SocialMate
	Contiene 168 íconos de 16x16, 32x32, y 64x64, en formato PNG. descargar

SleekXP by deleket
	Contiene 50 íconos de 300x300, en formato PNG. descargar

Más burbujas con CSS

Navegar etiquetas debajo de las entradas

Si entendí bien la pregunta de Josema, su idea es que, cuando se haga click en el enlace de una etiqueta, las entradas de esa etiqueta se muestren así como normalmente se muestran las entradas relacionadas debajo de cada post,es decir, una imagen y un resumen de la misma.

Hace mucho tiempo había puesto algo parecido que requería de la librería Prototype y que terminé quitando porque ... no me acuerdo por qué pero seguro que era una buena razón o no.

Ahora repito la experiencia y veremos qué pasa pero, sin librerías extras ya que luego de un par de años y doscientos mil quinientos treinta y dos errores, más o menos he logrado comprender como funciona esto de Json que es, claro, lo que debe usarse en cualquiera de estos casos porque no hay otra manera de filtrar y acceder a los datos de Blogger que no sea leyendo los feeds.

Lo que cuento es lo que puede verse en la parte inferior de las entradas individuales de este blog; allí, se ven las etiquetas que tiene la entrada (salvo cuando me olvido de ponerlas) y debajo, las entradas relacionadas que también se leen con Json y muestran cuatro entradas tomadas al azar. Los enlaces de esas etiquetas, abren las páginas por defecto que crea Blogger que son de tipo:

http://miblog.blogspot.com/search/label/NOMBRE_etiqueta

La idea es reemplazar esos enlaces para que, en lugar de abrir una página, se puedan ver sin salirse de la página y navegar por ellas, avanzando o retrocediendo por todas las entradas que existan con esa etiqueta, sin importar si son veinte o cientos ya que intentaremos no colapsar el sitio, cargando los scripts uno por uno y borrándolos de la memoria una vez que ya no se usan.

El criterio básico es utilizar el mismo esquema que en esta otra entrada y como no puedo pensar en abstracto y no existe un esquema idéntico en todas las plantillas, me limito a mostrar qué hice y las variaciones deberán ser investigadas ya que son casi infinitas.

Primero, expando la plantilla y busco el lugar donde tengo agregados los posts relacionados y allí, haré dos cosas, indicaré la altura del DIV que los contiene y debajo, agregaré una serie de etiquetas con IDs específicos que son en aquellas donde el script escribirá los datos:

<div class='post-footer-line post-footer-line-4'>
  <div id='postsrelacionados' style='height:190px;'>
    <script type='text/javascript'>mostrarrelacionados();</script>
  </div>
  <div style='clear:both;'/>
</div>

<div class='post-footer-line post-footer-line-5'>
  <div id='etiquetasbajopost' style='height:0px;'>
    <div id='navetiquetas'/>
    <div id='navetiquetassel'/>
    <div id='navetiquetasfooter'/>
  </div>
</div>

Si guardo, todo queda igual que antes, los posts relacionados no cambian y debajo hay etiquetas sin contenido que tienen altura cero justamente para ocultarlas ya que intentaré permutar entre ellos y el nuevo sistema, ocultando uno cuando se muestra el otro y viceversa.

Busco ahora el LOOP donde Blogger escribe las etiquetas y por las dudas, condiciono los enlaces porque sólo quiero que esto funcione en las páginas individuales:

<b:loop values='data:post.labels' var='label'>
  .......
  <b:if cond='data:blog.pageType == "item"'>
    <a expr:onclick='&quot;setnavetiquetas(\&quot;&quot; + data:label.name + &quot;\&quot;);return false;&quot;' href='javascript:void(0);' rel='tag'><data:label.name/></a>
  <b:else/>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
  </b:if>
  .......
</b:loop>

Y ahora, el script que va antes de </head> que también podemos condicionar.

<b:if cond='data:blog.pageType == "item"'>

<script type='text/javascript'>
//<![CDATA[
var laetiqueta; // es la etiqueta que se mostrará
var navetiquetasflagfirst = 0; // al inicio es cero
var labelsporpagina = 4; // definir cuántas entradas queremos ver
var labelanterior, labelsiguiente;

// esta es la función genérica que elimina las etiquetas y crea el resumen
// si ya la o usamos alguna similar no hace falta repetirla
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;
}

// inicializamos la etiqueta a mostrar porque un post puede tener varias
function setnavetiquetas(cual) {
  navetiquetasflagfirst = 0;
  laetiqueta = cual;
  navetiquetas(0);
  return false;
}

// es la función muestra las etiquetas y nos permite navegar por ellas
function navetiquetas(direccion){
  var p, parametros;
  if(direccion==-1) {
    // si navegamos hacia atrás
    p = labelanterior.indexOf("?");
    parametros = labelanterior.substring(p);
  } else if (direccion==1) {
    // si navegamos hacia adelante
    p = labelsiguiente.indexOf("?");
    parametros = labelsiguiente.substring(p);
  } else {
    // si es la primera vez que se ejecuta ocultamos los posts relacionados
    document.getElementById("postsrelacionados").style.height = "0px"; // ocultar
    // y mostramos este sistema
    document.getElementById("etiquetasbajopost").style.height = "270px"; // la altura
    // los parámetros para leer Json
    parametros = "?start-index=1&max-results=" + labelsporpagina + "&orderby=published&alt=json-in-script"
  }
  parametros += "&callback=shownavetiquetas";
  incluirscriptlabels(parametros);
}

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

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

// esta es la función que cierra este sector y restaura los posts relacionados
function cerrarnavetiquetas() {
    document.getElementById("etiquetasbajopost").style.height = "0px"; // ocultar
    document.getElementById("postsrelacionados").style.height = "190px"; // la altura deende del diseño
}

// esta es la misma función de siempre que nos permite leer el feed
function shownavetiquetas(json) {
  var entry, posttitle, posturl, postimg, postcontent;
  var salida = "";
  labelanterior = "";
  labelsiguiente = "";

  // 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
      labelanterior = json.feed.link[k].href;
    }
    if (json.feed.link[k].rel == 'next') {
      // esta es la página siguinte
      labelsiguiente = json.feed.link[k].href;
    }
  }

  // leemos tantas entradas como definimos
  for (var i = 0; i < labelsporpagina; 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') {
        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 = "URL_imagen_por_defecto"; // colocar dirección de la imagen
    }

    // terminada la lectura, vamos creando el código HTML
    // que en este caso tienen la misma clase CSS que los posts relacionados
    salida += "<div class='relsposts'>";
    salida += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
    salida += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
    salida += "<p>" + eliminartags(postcontent,75) + " ...</p>";
    salida += "</div>";
  }
  document.getElementById("navetiquetas").innerHTML = salida;

  // creo el HTML de la barra de navegación inferior
  salida = "<a href='javascript:cerrarnavetiquetas()' class='close'></a>"
  if(labelanterior) {
    salida += "<a href='javascript:navetiquetas(-1);' class='anterior'></a>";
  } else {
    salida += "<span class='deshabilitado anterior'></span>";
  }
  if(labelsiguiente) {
    salida += "<a href='javascript:navetiquetas(1);' class='siguiente'></a>";
  } else {
    salida += "<span class='deshabilitado siguiente'></span>";
  }
  salida += "<a href='javascript:navetiquetas(0);' class='inicio'>inicio</a>";
  document.getElementById("navetiquetassel").innerHTML = salida;

  // creo una línea más para dar la opcion de usar las páginas "normales"
  // y agrego un enlace para suscripciones 
  salida = "<a href='/search/label/" + laetiqueta + "' target='_blank'>ver p&aacute;gina de etiquetas</a>
  salida += "<a style='float: right;' href='/feeds/posts/summary/-/" + laetiqueta + "' target='_blank'>Suscribirse a " + laetiqueta + "</a>";
  document.getElementById("navetiquetasfooter").innerHTML = salida;

}
//]]>
</script>
</b:if>

Como siempre, algo de estilo a gusto de cada uno que también ponemos antes de </head>:

<style>
  /* el div contenedor */
  #etiquetasbajopost {
    height:0px;
    overflow:hidden;
  }
  /* el div con las entradas */
  #navetiquetas {
    height: 190px; /* la altura dependerá de los detalles personales */
    width: 100%;
  }
  /* cada una de las entradas */
  .relsposts {
    float: left;
    height: 180px;
    margin: 0 5px;
    overflow: hidden;
    padding: 5px;
    text-align: center;
    width: 130px;
  }
  .relsposts:hover {  /* si se quiere algún efecto */ }
  .relsposts a {
    color: #EEE;
    display: inline;
    font-family: Helvetica;
    font-size: 11px;
    line-height: 1;
  }
  .relsposts img {
    height: 72px;
    padding: 5px;
    width: 72px;
  }
  .relsposts h6 {
    display: table-cell;
    height: 5em;
    margin: 5px 0 0;
    overflow: hidden;
    padding-bottom: 2px;
    vertical-align: middle;
    width: 130px;
  }
  .relsposts p {
    color: #AAA;
    font-size: 10px;
    height: 4em;
    line-height: 1.2;
    margin: 5px 0 0;
    overflow: hidden;
    padding: 5px 0;
    text-align: left;
  }

  /* la navegación inferior */
  #navetiquetassel {
    height: 24px;
    line-height: 24px;
    margin: 20px auto 0;
    padding: 1px 10px;
    text-align: center;
    width: 500px;
  }
  /* las medidas dependerán de las imágenes */
  #navetiquetassel .anterior {
    background: transparent url(IMAGEN_ATRAS) no-repeat right 50%;
    float: left;
    height: 24px;
    width: 17px;
  }
  #navetiquetassel .siguiente {
    background: transparent url(IMAGEN_ADELANTE) no-repeat left 50%;
    float: right;
    height: 24px;
     width: 17px;
  }
  #navetiquetassel .close {
    background: transparent url(IMAGEN_CERRAR) no-repeat scroll left 4px;
    float: right;
    height: 24px;
    margin-left: 100px;
    width: 17px;
  }
  #navetiquetassel a { opacity: 0.8; filter:alpha(opacity=80); }
  #navetiquetassel a:hover { opacity:1;filter:alpha(opacity=100); }
  #navetiquetassel .deshabilitado { opacity:.3;filter:alpha(opacity=30); }

  /* la linea inferior */
  #navetiquetasfooter {
    height: 36px;
    line-height: 36px;
    margin: 0 auto;
    width: 500px;
  }
  #navetiquetasfooter a { /* propiedades de los textos */ }
  #navetiquetasfooter a:hover { /* si se quiere algún enlace */ }
  #navetiquetasfooter a.enlacefeed { float: right; }

  /* una imagen de carga temporal */
  #navetiquetasloading {
    background: transparent url(URL_IMAGEN) no-repeat 50% 50%;
    height: 190px;
    width: 100%;
  }
</style>

Convertir SWF en HTML con Swiffty

Swiffty es una herramienta de Google que convierte archivos de SWF de Flash en HTML5 y, pese a ser experimental, lo hace bastante bien con las limitaciones obvias de todo conversor, claro, ya que no funcionará en muchos casos y no tendrá sonidos pero de todos modos es más que interesante.

Lamentablemente, como para muchos, Chrome se ha transformado en el nuevo Dios Digital, la información que nos dan sobre el tema es errónea porque, en lugar de probar y ver y sacar conclusiones propias, hay quienes se limitan a repetir como loros lo que el mismo Google afirma, pese a que esa afirmación es falsa.

Uno entra en Swiffy y le aparece un cartel de advertencia diciendo que esto no funcionará en nuestro navegador (Firefox, por ejemplo) y claro, uno le hace caso porque es posible que así sea y quiere probar algo desconocido así que mejor seguir las reglas pero, uno también es de esos que usa el viejo método de ver para creer así que no se resigna a seguir las reglas a piejuntilla.

No, no es sólo por llevar la contra sino porque uno lee que lo que hace la herramienta es utilizar gráficos de tipo SVG (Scalable Vector Graphics) y esa clase de contenido, hace rato que está disponible en otros navegadores por lo tanto, es probable que también funcione y claro, así es; Firefox 5 lo muestra bastante bien, dependiendo del contenido ya que este tipo de cosas es algo que los navegadores van incorporando poco a poco y, como aún hay una monstruosa guerra de empresas e intereses, cada uno lo hace a su modo o como puede:

Tampoco lo de "HTML5" es tan así. Las etiquetas y scripts necesarios para mostrar este tipo de gráficos son genéricas así que pueden ser usadas en casi cualquier tipo de página web.

Basta de quejas que no le importan a nadie. Usé la herramienta para hacer pruebitas y funciona.

Uno selecciona el archivo SWF a convertir, acepta las condiciones y nos muestra el resultado junto con el original. Si vamos para abajo, allí veremos un enlace con la URL del archivo html que podemos descargar y utilizar en cualquier parte. Si lo abrimos con el block de notas, veremos algo así:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Swiffy output</title>
    <script src="http://www.gstatic.com/swiffy/v1/runtime.js"></script>
    <script> swiffyobject = { ... una larguísima cantidad de código ... }; </script>
    </head>
  <body style="overflow:hidden;margin:0;">
    <script>var stage = new swiffy.Stage(document.body, swiffyobject);</script>
    <script>stage.start();</script>
  </body>
</html>

Lo voy a poner en Blogger, olvidándome del HTML5; obvio, como es largo, lo pondré en un blog auxiliar copiando y pegando sólo los scripts; unos en el head y los otros en una entrada. Eso es todo, ahora, basta insertarlo con un IFRAME:

Un par de ejemplos más que se encuentran en l galería de Swiffy:

Transicionitis y el slideshow de dhteumeuleu.com

"¿Tiene usted transicionismo crónico?"

Dice Gem@

que su comentario no lo escribió ella sino su subconsciente pero poco importa ese detalle. Bien, diría yo ¿por qué no reconocerlo? SI ¿Será grave, doctor?

Así que acá vamos con el mismo slideshow originalmente llamado The trip of a lifetime y destruido por mi hace unos dias para poderlo probar en Blogger pero, ahora modificado aún más, haceindo uso y abuso de la propiedad transition para hacer casi lo mismo aunque claro, esta propiedad no es entendida por Internet Explorer pero igual, el slideshow seguirá funcionando normalmente.

No voy a inventar la rueda así que me basaré en lo que había antes que era bastante manual y seguiré en la misma línea para no complicarme la vida.

El HTML es similar:

<div id="contenedor2">
  <div id="screen2">
    <div id="pane2">
      <img src="URL_IMAGEN_1"/>
      <img src="URL_IMAGEN_2"/>
      <img src="URL_IMAGEN_3"/>
      <img src="URL_IMAGEN_4"/>
      <img src="URL_IMAGEN_5"/>
      <img src="URL_IMAGEN_6"/>
      <img src="URL_IMAGEN_7"/>
      <img src="URL_IMAGEN_8"/>
      <img src="URL_IMAGEN_9"/>
    </div>
    <div id="nav2">
      <div class="title2">ejemplo slideshow</div>
      <a href="javascript:void(0);" onclick="dtht(0,0);" class="scrollTo"></a>
      <a href="javascript:void(0);" onclick="javascript:dtht(550,0);" class="scrollTo"></a>
      <a href="javascript:void(0);" onclick="javascript:dtht(1100,0);" class="scrollTo"></a>
      <a href="javascript:void(0);" onclick="javascript:dtht(0,400);" class="scrollTo"></a>
      <a href="javascript:void(0);" onclick="javascript:dtht(550,400);" class="scrollTo"></a>
      <a href="javascript:void(0);" onclick="javascript:dtht(1100,400);" class="scrollTo"></a>
      <a href="javascript:void(0);" onclick="javascript:dtht(0,800);" class="scrollTo"></a>
      <a href="javascript:void(0);" onclick="javascript:dtht(550,800);" class="scrollTo"></a>
      <a href="javascript:void(0);" onclick="javascript:dtht(1100,800);" class="scrollTo"></a>
    </div>
  </div>
</div>

Nuevamente, todo se basa en la posición de las imágenes; sabiendo que todas miden 550x400 (o yo las fuerzo a que midan eso), las pongo una al lado de la otra y dimensiono el contenedor (pane2) para que "se acomoden" formando un rectángulo de 3x3; eso, lo hago dimensionando ese contenedor para que mida tres veces el ancho y tres veces el alto de cada imagen.

Luego, se mete ese enorme rectángulo dentro de otro más pequeño y a ese, se le pone la propiedad overflow:hidden para que sólo muestre una parte.

Como ese enorme rectángulo con las nueve imágenes, está posicionado de forma asoluta dentro el otro, basta cambiar sus propeidades left y top para mostrar otro sector y, como además, ese rectángulo tiene la propiedad tarnsition, cada uno de esos cambios se mostrará animado.

Todo eso, se define en el CSS que en este caso es este:

<style>
  #contenedor2 {
    background-color: #000;
    border-radius: 4px;
    box-shadow: 0 0 5px #ABC inset;
    height: 400px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    width: 550px;
  }
  #contenedor2 br {display:none;}
  #screen2 {
    height: 400px;
    left: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
    top: 0;
    width: 550px;
  }
  #pane2 {
    font-size:0;
    height: 1200px;
    position: absolute;
    top: 0;left: 0;
    width: 1650px;
    -moz-transition:all 0.7s ease 0s;
    -webkit-transition:all 0.7s ease 0s;
    -o-transition:all 0.7s ease 0s;
    transition:all 0.7s ease 0s;
  }
  #pane2 img {
    height: 400px;
    width: 550px;
  }
  #nav2 {
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    left: 0;
    margin: 0;
    padding: 5px;
    position: absolute;
    top: 120px;
    width: 93px;
  }
  #nav2 a {
    background-color:#333;
    float: left;
    height: 25px;
    margin: 3px;
    overflow: hidden;
    text-decoration: none;
    width: 25px;
  }
  #nav2 a:hover, #nav2 a:focus { background: #F00; }
  #nav2 a:visited { background-color: #666; }
  #nav2 a:active, #nav2 a.active { background: #FFF; }
  .title {
    color: #FFF;
    font-family: Helvetica;
    font-size:12px;
    font-weight: bold;
    margin-bottom: 0.5em;
    text-align:center;
  }
</style>

Por último necesitamos JavaScript porque queremos cambiar esa posición con un click así que nos falta la función que es muy pequeña:

<script>
function dtht(l,t) {
  var obj = document.getElementById("pane2");
  obj.style.left = -l + "px";
  obj.style.top = -t + "px";
  return false;
}
</script>