Varios método para precargar imágenes

Cuando se cargan las imágenes de una página, estas quedan almacenadas en el caché. Por lo tanto, si una de ellas se utiliza en otras páginas no será requerida al servidor para ser cargada de nuevo. Por ello, siempre que se pueda, es conveniente repetir la misma imagen para los botones, los íconos, las barras de separación, etc.

leer artículo actualizado

Aparentemente, estos dos títulos son iguales porque se ven iguales pero no lo son. En ambos casos, se trata de simular el título de las entradas de una plantilla; el primero utiliza las propiedades por defecto de una Plantilla de Blogger como la Mínima y el otro no.

El título de mi entrada

El título de mi entrada

Son enlaces, como es lo habitual en los títulos de las entradas de un blog y el problema que suele tener el primero, es que no es sencillo de seleccionar, algo que uno hace muchas veces cuando quiere copiarlo. No es que sea imposible pero no es cómodo y la posibilidad de poder seleccionar los títulos es algo que debemos tener en cuenta.

Esos títulos pueden estar en diferentes etiquetas (h1 h2 h3) y esa etqiueta tiene definida una serie de propiedades, por defecto, algo así:

.post h3 {
  .......
}
.post h3 a, .post h3 a:visited, .post h3 strong {
  .......
  display:block;
}
.post h3 strong, .post h3 a:hover {
  .......
}

Lo que causa el "problema" es justamente esa definición de display:block en el enlace y basta quitarla para que todo sea "normal".

Poniendo el cursor encima de esos ejemplos, se vera que en el primer caso, el rectángulo del enlace ocupa todo el ancho disponible y podrá hacerse click en cualquier parte, incluso en las áreas vacías cuando, en realidad, lo razonable sería que el enlace sólo funcionara sobre el texto mismo que es lo que ocurrirá si se elimina esa propiedad.

Alguien, preguntó si es necesario que los títulos de las entradas sean enlaces y para eso no hay respuestas objetivas; creo que es lo lógico y que es útil porque incluso en una página individual cuando parecería no tener sentido ya que es un enlace a la misma página, uno suele usarlo para recargarla, para copiar la URL del enlace, para arrastrarlo a alguna herramienta, etc.

De todos modos, esa parte se encuentra dentro de un INCLUDABLE que podemos ver al expandir la plantilla:

<b:includable id='post' var='post'>

Allí veremos un código similar a este:

<b:if cond='data:post.title'>
  <h3 class='post-title'>
    <b:if cond='data:post.link'>
      <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
      <b:if cond='data:post.url'>
        <a expr:href='data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
    </b:if>
  </h3>
</b:if>

Lo que controlan esos condicionales es justamente la forma en que se mostrará el título; si es un enlace o si no lo es; bastaría editarlo para que los títulos dejaran de ser enlaces:

<h3 class='post-title'>
  <data:post.title/>
</h3>

De los mismos creadores de Clip Your Photos llega Face Bender ... para divertirse un rato.

Subimos la foto, elegimos el efecto y listo, la guardamos como JPG. También podemos hacerlo arrastrando el cursor sobre la misma imagen o desplazando la barra inferior para aumentar o disminuir las distorsiones.

El resultado final puede ser mejor o peor que el original ... eso depende.

Click para cerrar

Click para ver las imágenes.

Siempre ha sido un problema usar GIFs animados en Blogger simplemente porque si los subimos como cualquier otra imagen, la mayoría del tiempo no funcionarán ya que son convertidos al formato PNG.

Hace unos días, leía en Usuario Compulsivo un título al respecto y pensé que explicaría esto mismo pero no, lo que nos contaba en su entrada es que desde un tiempo a esta parte, Picasa Web Albums ha comenzado a aceptarlos y, como nuestras imágenes se alojan allí, podemos utilizarlas y ya no es necesario alojarlos en otros servidores.

Desde el editor normal no parece funcionar pero si lo hace desde el Editor Actualizado o desde Blogger Draft.

Incluso en esos casos, lo que debemos hacer es revisar el código generado ya que, normalmente, Blogger agrega un enlace y una miniatura por lo tanto, deberemos editarlo; por ejemplo, puede decir algo así:

<a href="http://......./s1600/miarchivo.gif" imageanchor="1"><img border="0" src="http://......./s320/miarchivo.gif" /></a>

La URL real es la que figura en el atributo href del enlace uno la que figura en el atributo src de la imagen y por lo tanto, para usarlo, simplemente debemos cambiar este último por el primero y además, si se han agregado atributos como width y height, deberíamos eliminarlos:

<a href="http://......./s1600/miarchivo.gif" imageanchor="1"><img border="0" src="http://......./s1600/miarchivo.gif" /></a>

REFERENCIAS:Usuario Compulsivo

"Desde que en 1998 las recomendaciones del recientemente creado CSS2 hablaban de ello, el uso de tablas en las páginas web fue cayendo en el olvido y los sitios basados en CSS se transformaron en un sinónimo de elegancia y buen diseño."

Tablas. Malditas tablas. La cultura geek odia las tablas. Son ... como el Judas Iscariote del HTML. Hay que alejarse de ellas lo más posible. Las tablas, dicen, sólo hay que usarlas para ... hacer tablas ...

Claro, el hecho de que la mayoría de los sitios más visitados usen tablas parece que es un pequeño detalle. Google usa tablas y tan mal no le va. Y no las usa ahora que puede darse el lujo de hacer cualquier cosa, las usó siempre. GMail usa tablas; Yahoo usa tablas, YouTube usa tablas, Twitter usa tablas, casi todos los gadgets usan tablas. Parecería entonces que las verdades absolutas y la realidad van por caminos diferentes (como siempre).

Lo elemental sería aclarar algo antes que alguien grite.

No hay etiquetas buenas y etiquetas malas porque no hay codigos "buenos" y códigos "malos". Tampoco hay etiquetas prohibidas porque de existir tal cosa, simplemente, se hubiera eliminado de los navegadores; sin embargo, siguen allí, las usemos o no y algunas ya tienen muchisimos años de existencia.

Pero ¿por qué esos sitios usan tablas?

No sé, tal vez, porque quienes los desarrollaron no saben otra cosa, tal vez porque les resulta cómodo y tal vez, porque a veces es más sencillo. Sea como sea, cualquiera de esas reazones o cualquier otra es tan válida como la contraria porque una herramienta es tan buena o mala como quien la utiliza y el diseño web debería estar mucho más allá de estos pseudo-pecados.

Salvo algún detalle gráfico que podrían solucionarse ¿qué diferencia hay entre estos dos enlaces que no llevan a ninguna parte?:

PSEUDO-ENLACE

PSEUDO-ENLACE

A menos que se mire el código fuente, no habrá gran diferencia. Ambos se ven bien (o mal); ambos cumplen su función (ninguna en este caso); ambos serán indexados ¿Cuál de ellos es el que tiene el estigma de ser una tabla?

Parece obvio pero, en realidad, las páginas web son eso, se ven, funcionan, se encuentra lo que uno buscaba o no, nos resultan agradables o no, listo, no importa mucho más porque para eso están.

Filosofía al margen: ¿hay que usar tablas? La respuesta es ... depende, en todo caso ¿para qué usar una tabla? Y bueno, porque a veces, es mucho más sencillo hacer algo de ese modo que de otro y eso, no es ni malo, ni bueno.

Por ejemplo, quiero centrar una imagen tanto horizontal como verticalmente en un rectángulo que tenga un borde y un color de fondo, si sólo es una imagen es sencillo, necesito conocer el ancho:

<div style="background-color: #135; border: 1px solid #68A; margin: 10px auto; padding:10px; text-align:center; width:236px;">
  <img src="MI_IMAGEN" />
</div>

Pero, si tengo tres imágenes de diferente tamaño y las quiero poner, una al lado de la otra, las cosas se me complican y para centrarlas verticalmente deberé recurrir a alguna clase de truco que implica crear más DIVs hacer cácullos, usar márgenes negativos, todo eso implica una larga cantidad de CSS. Para colmo, si quisiera cambiar una de ellas, debería empezar otra vez:

Ni lo intento. Obviamente, es mucho más sencilo colocarlas en una tabla donde con un par de atributos, las centro sin problemas:

<table style="background-color: #135; border: 1px solid #68A; margin: 10px auto; padding:10px;">
  <tr>
    <td><img src="IMAGEN_1" /></td>
    <td><img src="IMAGEN_2" /></td>
    <td><img src="IMAGEN_3" /></td>
  </tr>
</table>

Y no, no es el diablito el que me lo sugiere, es el sentido común ¿para qué me voy a complicar la vida? El código usado es válido, es sintácticamente correcto, el resultado es el que quería, funciona, se ve bien ¿puedo pedir más?

¿Esto significa que hay que usar tablas siempre? No, claro que no, ese sería el mismo error que no usarlas. Lo que esto significa es que hay que usarlas cuando nos parezcan útiles.

MÁS INFORMACIÓN: Malditas Tablas 1 | 2 | 3 | 4 | 5

HOME, es un documental de Yann Arthus-Bertrand, producida por Luc Besson y narrada en español por Salma Hayek.

La película puede verse completa en alta definción en el canal de YouTube de Home Project

Ver Home en español

Para quienes usan Facebook, poco a poco están apareciendo métodos de integración sencilla con blogs y otros sitios web ya que la empresa se encuentra en una franca pelea para controlar una parte del mercado que ahora tiene a Google como único dueño y señor.

Hasta hace poco, la mayoría de estas cosas eran bastante complejas pero han empezado a ofrecer algunos códigos más sencillos que pueden verse en su página de desarrolladores. Tal vez, los más interesantes son los plugins sociales y entre ellos, el famoso botón Me Gusta que permite a los usuarios, compartir contenido entre su sitio y la cuenta de Facebook de los visitantes.

Todo lo que hace falta para agregarlo a Blogger es copiar y pegar el código que no es otra cosa que un iframe:

<iframe expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;height=60&amp;action=like&amp;font=tahoma&amp;colorscheme=dark&quot;' allowTransparency='true' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:60px'/>

Lo razonable , sería ponerlo en cada entrada, junto con el resto de los íconos sociales, por ejemplo, en el post-footer de las entradas.

Si bien ese es el código por defecto, hay cosas que podemos personalizar y que son esos parámetros que se adosan a la dirección URL de nuestra entrada:

&layout=standard define el tipo de botón, puede cambiarse por button-count para simplificarlo
&show-faces=true muestra el avatar del usuario y puede eliminarse colocando false
&action=like es el texto a mostrar y puede ser cambiado por recommend
&colorscheme=light es el diseño general, la otra opción es dark
&font=arial es el tipo de fuente opcional y puede ser tahoma, arial, lucida+grande, segoe+ui, trebuchet+ms, verdana
&width=530 es el ancho total en pixeles (530 o 450)
&height=60 es la altura total en pixeles

Si queremos colocarlo en nuestro home (nada impide usarlo en cualquier página), el código es el mismo y basta establecer la URL correcta, reemplazando data:post.url por la dirección de nuestro blog y en este caso, conviene que cambiemos los caracteres de dos puntos y barra por sus equivalentes %3A y %2F:

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fvagabundia.blogspot.com%2F&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;height=60&amp;action=like&amp;font=tahoma&amp;colorscheme=dark" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:450px; height:60px"></iframe>

Que el CSS3 sólo este disponible en algunos navegadores es una limitación importante porque no cabe duda que es muy poderoso y en el momento en que se extienda su uso, el diseño de los sitios web cambiará radicalmente.

Este es un ejemplo de CSSplay que utiliza gradientes, colores en formato RGBA y bordes redondeados.

El resultado, solo es visible en Firefox, Safari y Google Chrome e incluso en esos navegadores, habrá algunas leves diferencias:

Esta imagen muestra la forma en que se vería en Firefox:

Y esta otra como se vería en Safari y Chrome:

Estas serían las definiciones de estilo del demo:

<style type="text/css">
.holder {
  text-align: center;
  background: #777;
  padding: 30px 60px;
  height: 140px;
  width: 320px;
  margin: 0 auto;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
  background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
  -webkit-border-radius: 36px;
  -moz-border-radius: 36px;
  border-radius: 36px;
}
.colwhite { background:white; }
.colyellow { background:yellow; }
.colbrown { background:brown; }
.colgreen { background:green; }
.colblue { background:blue; }
.colpink { background:pink; }
.colred { background:red; }
.colblack { background:black; }
.ball{
  display: block;
  width: 72px;
  height: 72px;
  float: left;
  margin-right: 5px;
  margin-bottom: 5px;
  -webkit-border-radius: 36px;
  -moz-border-radius: 36px;
  border-radius: 36px;
  background-image: -moz-radial-gradient(36px 10px 45deg, circle cover, rgba(255,255,255,1), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 50%, rgba(0,0,0,1) 80%);
  background-image: -webkit-gradient(radial,36 36, 72, 36 10, 0, from(rgba(0,0,0,1)), to(rgba(255,255,255,1)), color-stop(0.85, rgba(255,255,255,0)), color-stop(0.4, rgba(0,0,0,1)));
}
</style>

Y el HTML:

<div class="holder">
  <div class="ball colwhite"></div>
  <div class="ball colyellow"></div>
  <div class="ball colbrown"></div>
  <div class="ball colgreen"></div>
  <div class="ball colblue"></div>
  <div class="ball colpink"></div>
  <div class="ball colred"></div>
  <div class="ball colblack"></div>
</div>

Y el resultado sería este:

La útltima entrada de Mamanunes me pareció interesante porque habla de algo a lo cual no le había prestado atención.

Cuando borramos un comentario como administradores, tenemos la posibilidad de marcar la opción para que desaparezca para siempre, si no hacemos eso, en el blog se verá un mensaje indicando que el comentario ha sido eliminado.

Cuando comentamos en otros sitios de Blogger, si estamos logueados también podemos borrar nuestros propios comentarios pero, en ese caso, no tendremos la opción de eliminarlos permanentemente. Eso, es algo que sólo puede hacer el administrador del sitio.

En la plantillas, hay una serie de códigos que controlan esa parte. Esto muestra el tachito de basura y crea ese enlace que abre la página donde los eliminamos:

<b:includable id='commentDeleteIcon' var='comment'>
  <span expr:class='&quot;item-control &quot; + data:comment.adminClass'>
    <!-- puede decir esto -->
    <a expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'><img src='//www.blogger.com/img/icon_delete13.gif'/></a>
    <!-- o puede decir esto otro -->
    <a expr:href='data:comment.deleteUrl' title='Delete Comment'><span class='delete-comment-icon'>&#160;</span></a>
  </span>
</b:includable>

Es indistinto, en un caso se muestra directamente una imagen y en el otro, la misma imagen se carga desde el CSS que incluye Blogger. Sea como sea, podemos usar otra imagen o reemplazarla por un texto.

El resto se encuentra en otro includable, el que controla la forma en que se muestran los comentarios:

<b:includable id='comments' var='post'>
  .......
  <b:if cond='data:comment.isDeleted'>
    <span class='deleted-comment'><data:comment.body/></span>
  <b:else/>
    <p><data:comment.body/></p>
  </b:if>
  .......
</b:includable>

Hay un condicional que verifica si el comentario fue eliminado; si es así, se muestra ese texto y si no, se muestra el contenido del comentario.

Si no queremos que se vea ese texto por defecto, simplemente eliminamos lo indicado pero, dependiendo de las plantillas, eso no eliminará todo, por ejemplo, si tenemos habilitados los avatares estos se seguirán viendo. Para no mostrar absolutamente nada, tal vez, podríamos usar JavaScript y agregar lo siguiente justo antes de </loop>:

<b:if cond='data:comment.isDeleted'>
  <script> document.getElementById(&quot;<data:comment.id/>&quot;).style.display=&quot;none&quot;; </script>
</b:if>

También hay una definición de CSS que suele estar en las plantillas y que controla el color y la fuente de ese texto que agrega Blogger y que claro, podemos personalizar a gusto:

.deleted-comment {
  color: gray;
  font-style: italic;
}

REFERENCIAS:Dicas e Templates Mamanunes

Esta clase CSS genérica que mos muestra naioo.com, nos permite crear botones de diferente tamaño de manera dinámica, modificando sólo la fuente del texto.

Sólo necesitamos una imagen semitransparente, y agregar la clase, por ejemplo, antes de <:/b:skin>:

.btn {
  display: inline-block;
  background: transparent url(URL_imagen.png) repeat-x 0 0;
  border: 1px solid rgba(0,0,0,0.4);
  padding: 5px 10px 6px 10px;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
  -moz-border-radius: 15px;
  -moz-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
  -webkit-border-radius: 5px;
  -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
}

Eso es lo genérico, ahora, podemos crear efectos con diferentes colores, por ejemplo:

.blue { background-color: #CCC; color: #141414; }
.blue:hover { background-color: #00C0DD; color: #FFF; }
.red { background-color: #CCC; color: #141414; }
.red:hover { background-color: #FF004E; color: #FFF; }

Los usamos así:

<div class="btn blue"> texto </div>
<div class="btn red"> texto </div>

O cambiamos los tamaños con font-size:

<div class="btn blue" style="font-size: 20px;"> texto </div>
<div class="btn blue" style="font-size: 36px;"> texto </div>

Anterior

Inicio

Siguiente

Anterior

Inicio

Siguiente

Anterior

Inicio

Siguiente

Anterior

Inicio

Siguiente

Anterior

Inicio

Siguiente

Cada vez que uno se pone a mirar en las plantillas de Blogger se encuentra con sorpresas, códigos que se agregan, códigos que cambian, códigos misteriosos, códigos que ellos no explican para qué están.

Como la Plantilla Mínima es la referencia obligada para estas cosas, ahí vamos y si la expandimos, veremos que en el LOOP, que es donde se muestran las entradas del blog, hay una serie de datos extras que antes no estaban; por ejemplo:

<b:if cond='data:post.isDateStart'>
<b:if cond='data:post.isFirstPost == &quot;false&quot;'>
&lt;/div&gt;&lt;/div&gt;
</b:if>
</b:if>
<b:if cond='data:post.isDateStart'>
<div class=&quot;date-outer&quot;>
</b:if>
.......
<b:if cond='data:post.isDateStart'>
<div class=&quot;date-posts&quot;>
</b:if>
.......
<b:if cond='data:numPosts != 0'>
&lt;/div&gt;&lt;/div&gt;
</b:if>

No, no hay error en la transcripción, así está escrito, usando &lt; y &gt; aunque no parece haber razones para complicarlo de ese modo, supongo que es porque sino, el mismo Blogger dice que hay un error de sintaxis ya que se cierran etiquetas que no se han abierto ... muy confuso, parece un parche.

Tal vez, eso tenga algo que ver con Adsense que parece ser lo único que les preocupa o algo que se implementará en el futuro de alguna manera o vaya uno a saber qué pero, todo eso genera DIVs extras; todas las entradas de una misma fecha se encuentran en un DIV con una clase CSS llamada date-outer que a su vez está dentro de otro con una clase llamada date-posts. Cada entrada, dentro de otro DIV con la clase post-outer y recién dentro de esta se encuentra el que siempre veíamos y que tiene la clase post:

<div class='date-outer'>
<div class='date-posts'>
<div class='post-outer'>
<div class='post'>
... la entrada 1 ...
</div>
</div>
<div class='post-outer'>
<div class='post'>
... la entrada 2 ...
</div>
</div>
</div>
</div>

¿Para qué lo habrán complicado? Ni idea.
¿Puede borrarse todo eso? Sí pero deberían chequear el resultado, aparentemente no sirven de nada y la mayoría de las plantillas no los tienen.

Sea como sea, hay dos datos que ahora son accesibles y que podemos usar ... aunque no sé para qué.

data:post.isDateStart devuelve TRUE si la entrada es la primera de una fecha; es decir, si tenemos varios posts publicados el mismo día, el primero de ellos devolverá ese valor y todos los demás FALSE

data:numPosts devuelve un número que es igual a la cantidad de entradas en la página, es decir 1 si es una entrada individual o el valor que hayamos establecido en Configuración | Formato cuando se trata del home o de páginas como etiquetas o archivos.

Así, a simple vista, un condicional como:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
... cualquier contenido ...
</b:if>

parece ser equivalente a:

<b:if cond='data:numPosts == 1'>
... cualquier contenido ...  
</b:if>

pero no es cierto; el primero mostrará el contenido sólo en las páginas individuales pero el segundo también lo hará en cualquier otra página donde sólo haya una entrada como una página de etiquetas con sólo un resultado.

Tal vez, es un dato que podría emplearse para detectar páginas sin entradas; por ejemplo, si usamos un buscador interno, podríamos buscar:

<b:includable id='main' var='top'>

y justo debajo de:

</b:loop>

colocamos un condicional que muestre algún tipo de información cuando no se encuentra algo:

<b:if cond='data:numPosts == 0'>
... aquí ponemos nuestro código ...  
</b:if>

Un ejemplo bastante tonto: http://baverqpsa.blogspot.com/search?q=cualquiercosa.

Con un poco de imaginación podríallegar a desarrollarse alguna págína de error 404.

Este script llamado dock nos permite crear un menú con imágenes y un efecto de animación simple.

Debemos agregar el código antes de </head> como hacemos habitualmente y luego, el CSS:

<script type='text/javascript'>
//<![CDATA[
// ================================================================ 
//                   ------ dock menu ------- 
// script by Gerard Ferrandez - Ge-1-doot - February 2006 
// http://www.dhteumeuleu.com 
// ================================================================ 
var dock = function (dock, sMin, sMax) { 
/* ---- private vars ---- */ 
var xm = xmb = ov = 0; 
var M = true; 
var icons = document.getElementById(dock).getElementsByTagName('img'); 
var N = icons.length; 
var s = sMin; 
var ovk = 0; 
var addEvent = function (o, e, f) { 
if (window.addEventListener) o.addEventListener(e, f, false); 
else if (window.attachEvent) r = o.attachEvent('on' + e, f); 
} 
var pxLeft = function(o) { 
for(var x=-document.documentElement.scrollLeft; o != null; o = o.offsetParent) x+=o.offsetLeft; 
return x; 
} 
for(var i=0;i<N;i++) { 
var o = icons[i]; 
o.style.width = sMin+"px"; 
o.style.height = sMin+"px"; 
o.className = "dockicon"; 
} 
var run = function() { 
for(var i=0;i<N;i++) { 
var o = icons[i]; 
var W = parseInt(o.style.width); 
if(ov && ov.className=="dockicon") { 
if(ov!=ovk){ 
ovk=ov; 
document.getElementById("legend").innerHTML = ov.lang; 
} 
if(M) W = Math.max((s*Math.cos(((pxLeft(o)+W/2)-xm)/sMax)),sMin); 
s = Math.min(sMax,s+.5); 
} else { 
s = Math.max(s-.5,sMin); 
W = Math.max(W-N,sMin); 
} 
o.style.width = W+"px"; 
o.style.height = W+"px"; 
} 
if(s >= sMax) M = false; 
} 
addEvent(document, 'mousemove', function (e) { 
if(window.event) e=window.event; 
xm = (e.x || e.clientX); 
if(xm!=xmb){ 
M = true; 
xmb = xm; 
} 
ov = (e.target)?e.target:((e.srcElement)?e.srcElement:null); 
}); 
setInterval(run, 16); 
}; 

window.onload = function() { 
dock("dock", 48, 128);
}
//]]>
</script>

<style type='text/css'>
#dock { /* el rectángulo contenedor */
position: relative;
text-align: center;
width: 100%;
} 
#dock a, #dock a:visited { text-decoration: none; }
#dock img { border: none; width: 0px; } 
#legend { /* el texto inferior */
color: #FFF;
font-size: 24px;
text-align: center;
width: 100%;
}
</style>

En el script, el único dato importante a definir son los tamaños de las imágenes; en este caso 48 y 128 que corresponden al estado mínimo inicial y al máximo que se muestra al expandirse.

El HTML lo ubicamos donde nos guste:

<div id="dock">
<a href="URL_enlace1" target="_blank"><img src="URL_imagen1" lang="el texto 1"></a>
<a href="URL_enlace2" target="_blank"><img src="URL_imagen2" lang="el texto 2"></a>
<a href="URL_enlace3" target="_blank"><img src="URL_imagen3" lang="el texto 3"></a>
</div>
<div id="legend"></div>

En resumen, son enlaces simples donde el atributo lang de la etiqueta IMG contiene el texto a mostrar en la parte inferior.

Google Search Stories es un ¿experimento? de YouTube que genera un video de unos 30 segundos a partir de determinadas búsquedas.

No es necesario instalar nada ni registrarse, basta ingresar y colocar entre cinco y siete palabras y seleccionar el tipo de búsqueda: web, mapas, imágenes, noticias, blogs, libros, etc. No cualquier frase o palabra funcionará; algunas están "censuradas" y acentos y otros caracteres suelen terminar en un error. Cada paso puede ser previsualizado y cuando estamos satisfechos, pasamos a la segunda etapa, agregar la música, seleccionándola de alguna de las predefinidas.

Listo, ahora se puede editar lo realizado o generar el video, compartido directamente o subirdo a nuestra cuenta.

Google Search Stories

Probando la herramienta.

<object width='425' height='350' id='movie' type='application/x-shockwave-flash' data='http://www.youtube.com/v/mXATtUVvPSk'><param name='movie' value='http://www.youtube.com/v/mXATtUVvPSk' /><param name='wmode' value='transparent' /><param name='allowfullscreen' value='true'/></object>Copiar el código para insertar el video

Alinear algo verticalmente no es simple a menos que se trate de cosas sencillas y cuando pretendemos hacerlas un poco más complejas se vuelve una tarea titánica y generalmente nos damos por vencidos o recurrimos a márgenes, paddings y aritmética.

Alinear algo verticalmente no es tan sencillo como debería serlo. No hay una solución universal, todo depende de cada caso ¿Es un texto, corto? ¿Son imágenes de distinta altura? ¿Son elementos combinados?

leer artículo actualizado

Probablemente, 1 Bit Audio Player es el reproductor de MP3s más pequeño que podamos encontrar y, una vez que lo hemos instalado, el más simple de utilizar.

Todo lo necesario para utilizarlo está en un ZIP que podemos descargar desde la página del desarrollador. Allí veremos demos, los códigos fuentes del SWF si queremos editarlo con Flash y hasta un plugin para usarlo en Wordpress. De todo eso, sólo requerimos tres cosas: la librería swfobject.js, el script 1bit.js y el reproductor 1bit.swf que debemos alojar en algún servidor.

En el caso de Blogger, se han apiadado y nos dicen que, simplemente, agreguemos lo siguiente antes de </head>:

<script type='text/javascript' src='http://1bit.markwheeler.net/1.4/swfobject.js'></script>
<script type='text/javascript' src='http://1bit.markwheeler.net/1.4/1bit.js'></script>
<script type='text/javascript'>
oneBit = new OneBit('http://1bit.markwheeler.net/1.4/1bit.swf');
oneBit.ready(function() {
oneBit.specify('background', '#FFFFFF');
oneBit.apply('a');
});
</script>

Si lo queremos usar de tanto en tanto podemos hacer lo mismo pero, en lugar de colocar el código de la plantilla, lo podemos colocar directamente en una entrada aunque ahi, deberemos escribir todo en una sola línea.

El unico dato que debemos configurar es el color de fondo que es blanco por defecto; simplemente, cambiamos #FFFFFF por el código de color que se nos ocurra.

Ahora viene lo interesante ya que utilizarlo es tan simple como escribir un enlace donde el contenido de href será la URL del archivo MP3 a ejecutar:

<a href="URL_archivo.mp3"> texto </a>

Como son enlaces, veremos el reproductor y el texto: al hacer click sobre ese texto, en logar de reproducirse podremos descrgar el archivo así que, si queremos, podemos ocultar esos textos, agregando la siguiente definición de estilo; ya sea entre etiquetas style o antes de </b:skin>:

Aún cuando tengamos hayamos decidido ocultar los textos, siempre los podemos hacer visibles agregando el parámetro style en la etiqueta del enlace, agregando display:inline; y cualquier otra propiedad que nos guste:

<a style="display:inline;" href="URL_archivo.mp3"> texto </a>

La publicación de un artículo de Google Webmaster Central Blog el pasado viernes y su difusión en cientos de sitios, sólo me ha provocado dolor de cabeza porque ha sido un fin de semana donde me abrumaron con preguntas que no puedo contestar y que, en cierto modo, tampoco me interesan demasiado porque me siento bastante lejos de ese mundo preocupado por las histerias de Google o sus intentos de monopolizar internet, estableciendo reglas para afuera y no cumpliéndolas hacia adentro.

Seguramente, muchos han leido del tema o han visto breves reseñas del asunto y se han asustado frente a frases como: Google nos enviará al final de su lista de resultados si nuestro sitio es lento ya que, desde ahora, utilizará la velocidad de carga como una variable más para determinar la relevancia de las páginas.

Las preguntas frente a esto son variadas y muchas de ellas sólo pueden ser respondidas de forma subjetiva.

Lo básico, como frente a cualquier otra situación, es regirse por el sentido común que no está exento de ideología ¿Qué quiero de mi blog? ¿Puedo hacer algo? ¿Me corto las venas porque Google me mira feo?

FreeSocialIcons es un sitio que reune varias colecciones de íconos gratuitos especializada en redes sociales. Hay mucho para ver y descargar. La mayoría son recopilaciones tomadas de diferentes sitios pero algunos de ellos son exclusivos.

Icons etc es similar pero las colecciones son variadas y por suerte, tiene un buscador por etiquetas para ayudarnos porque hay muchísimos.

icon.shock.com es uno de los sitios con íconos más originales. Hay que ir a ver. Altamente recomendable.

Es cierto que hace ya unos meses, SpamLoco nos advertía sobre las campañas de algunos inescrupulosos que intentaban robar nuestras contraseñas de Blogger; uno, suele leer estas cosas y decir ¡qué barbaridad! pero no mucho más.

Sin embargo, cuando recibimos en nuestro correo un mensaje cuyo título es Su cuenta de Blogger esta por ser suspendida, aún cuando sepamos que ese no el modo en que Blogger nos comunica algo por muy dramático que sea, uno no puede dejar de sentirse ... bueno, ayyyyyyyyy ¡que hice ahora!!!!!!!!!

Esta es una respuesta a una pregunta de Samuel Rego que quiere hacer algo que tal vez no usemos todos los dias pero que creo que puede servir como idea genérica y ver hasta donde es posible manipular los códigos condicionales de Blogger.

Lo que desea hacer es que un widget específico se muestre en tres entradas y sólo en esas tres entradas de su blog.

La solución es, tal como lo intentó, anidar las condiciones, es decir, poner una dentro de la otra; eso puede lograrse, sólo se requiere paciencia pero, aún cuando se consiga, se encontrará con un problema; deberá repetir TODO el código tres veces o crear tres widgets diferentes lo cual es, como mínimo, engorroso así que la idea es ver si es posible simplificarlo.

El widget traductor que propone Dicas Blogger es una de las formas más simples de agregar esta funcionalidad en cualquier blog. Basta copiar y pegar el código en un elemento HTML de nuestra sidebar y listo.

El código original lo podemos ver acá y claro, está pensado para traducir desde el portugués a diferentes idiomas así que si queremos adaptarlo al español, deberemos cambiar algunas cosas.

El uso de los códigos condicionales es lo que nos permite hacer que nuestro blog tenga cierto dinamismo, haciendo que algunos elementos se muestren en determinado tipo de páginas o modificando su diseño por completo.

La diferencia entre ocultar algo con CSS o JavaScript y usar estos condicionales es sustancial. Si bien, a simple vista parece lo mismo, no lo es en absoluto. Cuando ocultamos con CSS usando propiedades como display:none; sólo hacemos invisible cierta parte pero, el código y su contenido, serán ejecutados igual; como resultado, el tiempo de carga del sitio no variará ya que la cantidad de datos que debe leer el navegador es la misma. Lo comprobamos con facilidad; si miramos el código fuente, eso que ocultamos se verá.

Por el contrario, los condicionales no son ejecutados por el navegador sino por el mismo Blogger, es decir, se ejecutan ANTES que la página sea enviada al navegador; Blogger "escribe" el código fuente y omite esa parte condicionada. Como resultado, si miramos el código fuente, no la veremos; de ese modo, aún cuando nuestra plantilla sea muy grande, la carga del sitio será más rápida por la simple razón de que hay sectores que son ignoradas.

Bounce es un efecto para Prototype + Scriptaculous creado por Andrew Tetlaw y que es útil para ... bueno, no sé si es útil pero es divertido.

Simplemente agregamos el script y luego, en cualquier parte, escribimos el código HTML con este formato:

<div id="nombre" style="" onclick="boing(this)"> ... el contenido ... </div>
<script type="text/javascript"> function boing(elm) { new Effect.Bounce(elm, {height:valor}); } </script>

donde:

el ID debe ser siempre un nombre único
el atributo STYLE puede contener cualquier propiedad o ninguna
el evento onclick es siempre el mismo y hace referencia al ID
el contenido del DIV puede ser cualquier cosa, textos o imágenes
la etiqueta SCRIPT posterior ejecuta la función y allí podemos colocar la altura del "salto", estableciendo el valor correspondiente

El artículo de kamikazemusic.com nos muestra una forma de crear pestañas o tabs sin JavaScript, utilizando sólo propiedades CSS que, con las limitaciones del caso, funcionarán incluso en Internet Explorer.

El código HTML es simplísimo y lo pondremos donde se nos ocurra:

<div id="csstabs">
<!-- la primera pestaña -->
<div id="tab1" class="tabbox">
<h3>TITULO 1</h3>
<div class="tabcontent">
....... aquí pondremos el contenido .......
</div>
</div>
<!-- la segunda pestaña -->
<div id="tab2" class="tabbox">
<h3>TITULO 2</h3>
<div class="tabcontent">
....... aquí pondremos el contenido .......
</div>
</div>
</div>

El esquema lo repetimos con cualquier cantidad de pestañas y en este ejemplo, sólo hay dos.

Ahora, el CSS que tiene una parte que es genérica y otra que es individual, para cada una de las pestañas. Lo ponemos antes de </head>:

<style>

/* debemos dimensionar el área donde se mostrarán */
#csstabs {
height: 370px;
margin:0 auto;
position:relative;
width: 350px;
}
#csstabs div {
padding: 10px;
}
#csstabs h3 { /* los títulos de las pestañas */
color: #ABC;
cursor: pointer;
display: block;
font-size: 20px;
font-weight: normal;
height: 25px;
line-height: 25px;
margin: 0;
padding: 5px;
text-align: center;
width: 160px;
}
.tabcontent {  /* el contenido de las pestañas */
display: block;
height: 320px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 40px;
width: 100%;
}
#csstabs:hover h3, #tabs:focus h3, #tabs:active h3 {
z-index: 0;
}
#csstabs:hover .tabcontent, #tabs:focus .tabcontent, #tabs:active .tabcontent {
opacity: 0;
z-index: 0;
}

/* las definiciones de cada pestaña que pueden ser iguales o diferentes */

#tab1 .tabcontent {
background-color: #234;
z-index: 2;
}
#tab1 h3 {
left: 0;
position: absolute;
top: 0;
z-index: 3;
}
#tab1:hover h3, #tab1:focus h3, #tab1:active h3 {
background-color: #234;
color: #DEF;
z-index: 4;
}
#tab1:hover .tabcontent, #tab1:focus .tabcontent, #tab1:active .tabcontent {
opacity: 1;
z-index: 3;
}

#tab2 .tabcontent {
background-color: #E6EAF3;
opacity: 0;
z-index: 1;
}
#tab2 h3 {
left: 180px;
position: absolute;
top: 0;
}
#tab2:hover h3, #tab2:focus h3, #tab2:active h3 {
background-color: #E6EAF3;
color: #565A63;
z-index: 4;
}
#tab2:hover .tabcontent, #tab2:focus .tabcontent, #tab2:active .tabcontent {
opacity: 1;
z-index: 3;
}

</style>

Pestaña 1

Nullam vitae lacinia risus. In hac habitasse platea dictumst. Curabitur dapibus magna sed lorem mollis sagittis.

Suspendisse imperdiet; erat id iaculis aliquet, erat tellus commodo libero, sed commodo arcu felis at enim. Integer nec neque arcu, ut bibendum tortor. In dolor lorem, molestie vitae viverra sit amet, elementum vel orci! Etiam tincidunt erat vel sem venenatis lobortis.

Mauris elit urna, molestie a bibendum non, iaculis non magna.

Quisque lectus tortor, lobortis vel porta a, tempus eget lorem? Aenean diam tellus, tristique quis consequat et, ornare id dui.

Pestaña 2

¿Algunos íconos? No, cientos de miles. findicons reune cantidades impresionantes de packs para descargar de forma gratuita y además, es un buscador muy eficiente porque permite filtar los resultados de muchas maneras, seleccionando tamaños o colores.

Un accesorio muy útil es el conversor. Desde allí, podemos subir cualquier imagen y convertirla a diferentes formatos y diferentes calidades. Por ejemplo, a formato ICO. El resultado, es un ZIP que descargamos y que contendrá varios archivos con íconos en distintos tamaños (8x8, 16x16, 24x24, 32x32, 40x40, 48x48, 56x56, 64x64, 72x72, 80x80).

Un sitio para guardar en los marcadores.

GRACIAS:El rincón de Anahí