Galería de imagenes muy sencilla

Esta es una galería de imágenes muy simple que nos muestran en alistapart.com y que se basa en un script muy pequeño que podemos agregar en cualquier parte de la plantilla, por ejemplo, antes de </head>:

<script type="text/javascript">
function showPic (whichpic) {
 if (document.getElementById) {
  document.getElementById('imgContenedor').src = whichpic.href;
  if (whichpic.title) {
   document.getElementById('imgDescripcion').childNodes[0].nodeValue = whichpic.title;
  } else {
   document.getElementById('imgDescripcion').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
  }
  return false;
 } else {
  return true;
 }
}
</script>

Para usarlo, debemos agregar tres partes:

• una lista de enlaces donde el atributo href contendrá la URL de la imagen y el atributo title el texto optativo a ser mostrado
• un bloque o una etiqueta con un ID específico (imgDescripcion) donde se mostrará el texto
• una imagen inicial con un ID (imgContenedor) queserá la que vaya cambiando cuando hagamos click

Hablo de tres partes porque cada una de ellas puede estar en cualquier orden, dependerá de la forma en que se nos ocurra mostrarlo. Por ejemplo:

<ul>
<li><a onclick="return showPic(this)" href="URL_imagen1" title="texto_imagen_1">1</a></li>
<li><a onclick="return showPic(this)" href="URL_imagen2" title="texto_imagen_2">2</a></li>
<li><a onclick="return showPic(this)" href="URL_imagen3" title="texto_imagen_3">3</a></li>
</ul>

<div id="imgDescripcion">el texto inicial</p>

<img id="imgContenedor" src="URL_imagenInicial" />

Este es un ejemplo concreto con algunas variantes, incluyendo propeidades de estilo:

Galería de imágenes

• 1
• 2
• 3
• 4

<style>
div#ejemploGaleria {
  background-color: #123;
  border: 3px solid #234;
  margin: 0 auto;
  padding: 10px;
  width: 480px;
}
span#imgDescripcion {
  color: #ABC;
  float: left;
  font-size: 18px;
  width: 250px;
}
ul#imgListaEjemplo{
  float: right;
  margin: 0;
}
ul#imgListaEjemplo li {
  display: inline;
  padding: 0 5px;
}
ul#imgListaEjemplo li a {
  font-size: 16px;
}
img#imgContenedor{
  margin-top: 10px;
}
</style>

<div id="ejemploGaleria">
<span id="imgDescripcion">Galería de imágenes</span> 
<ul id="imgListaEjemplo">
<li><a onclick="return showPic(this)" href="URL_imagen1" title="Esta es la primera imagen">1</a></li>
<li><a onclick="return showPic(this)" href="URL_imagen2" title="Esta es la segunda imagen">2</a></li>
<li><a onclick="return showPic(this)" href="URL_imagen3" title="Esta es la tercera imagen">3</a></li>
<li><a onclick="return showPic(this)" href="URL_imagen4" title="Esta es la última imagen">4</a></li>
</ul>
<img id="imgContenedor" src="URL_imagenInicial" /></div>

Abrir enlace de comentaristas en página aparte

Cuando pinchamos en el nick de cualquiera de los comentaristas del blog para acceder a su perfil o al enlace que haya dejado al comentar, por defecto la nueva página se abre en la misma en que estamos, es decir, abandonamos nuestro blog para ir a la nueva dirección.

Para conseguir que estos enlaces se abran en una nueva página o pestaña, tendremos que ir a "Edición HTML" en nuestro panel y localizar esta línea, que nos servirá de referencia, en el código de la plantilla con los artilugios expandidos:

<dl id='comments-block'>

Algo más abajo de esa línea veremos algo como esto:

<a expr:href='data:comment.authorUrl' rel='nofollow'> <data:comment.author/></a>

Añadimos en esa línea un target_blank tal como veis en el ejemplo:

<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>


Esta idea me la envió el Administrador de Altajoda Maipu por email. ¡Gracias!

Icons Etc - Todos los iconos en un solo lugar

Icons Etc es una de las páginas sobre iconos más atractiva y completa que he visitado hasta ahora, los iconos que proporciona son gratuitos y se pueden usar libremente.

Se presentan en formato png y lo que más me ha gustado es que podemos descargarlos de forma rápida y sencilla haciendo click sobre el icono, botón derecho, escogiendo "guardar como..." de esta forma evitamos descargar iconos que no vamos a usar. Si nos interesan todos los iconos de un pack también tenemos la opción de descargar el zip.

En la sidebar encontraremos una amplia nube de etiquetas que nos facilita la búsqueda por color, temática o efecto.
Es sorprendente la variedad de diseños, por lo pronto ya la tengo en mis favoritos. Aquí unos ejemplos...

Pseudo-clases y pseudo-elementos (1)

Las pseudo-clases son "palabras" adicionales que agregamos en una definición CSS para establecer algún tipo de efecto especial. Los más conocidos son los que usamos en los enlaces y el orden en que colocamos esas definciones es importante:

a {color:white} /* los enlaces se muestran de color blanco */

a:link {color:white} /* son blancos si no los visitamos */
a:visited {color:green} /* se ponen verdes si ya los visitamos */
a:hover {color:red} /* cambian a rojo si colocamos el puntero del ratón encima */
a:active {color:yellow} /* son amarillos cuando están activos */

Tambien es posible usarlas definiendo clases o IDs:

a.ejemplo:hover {color:red}
a#ejemplo:hover {color:red}

Y eventualmente, podríamos aplicarlo a etiquetas que no sean enlaces:

Este es un DIV de ejemplo.

No son las únicas pseudo-clases, hay otras.

:first-child es un poco complicado de explicar. Lo que hace, es darle ciertas propiedades al primer elemento que se encuentra dentro de otro. Por ejemplo:

div#ejemplo img:first-child {border:2px solid red;}

<div id="ejemplo">
  <img src="unaImagen" />
  <img src="otraImagen" />
</div>

Lo que decimos con esta definición es que en un cierto DIV, la primera etiqueta IMG que aparezca tendrá un borde pero las siguientes no:

Hay variantes. Esto colocará en rojo, todos los textos en negrita de la primera etiqueta P que esten dentro de cierto DIV

div#ejemplo p:first-child b {color:red}

<div id="ejemplo">
   <p>Esto será <b>rojo</b> y esto otro <b>también</b>.</p>
   <p>Pero ninguno de <b>estos</b> se verá de color <b>rojo</b>.</p>
</div>

Esto será rojo y esto otro también.

Per ninguno de estos se verá de color rojo.

REFERENCIAS:w3.org

Cambiar leyenda de "comentarios"

Hoy me ha preguntado MaNuEl como cambiar la palabra "comentarios" por algo más personalizado y me he acordado que tenía esta entrada en borradores hace tiempo, porque pensé en su momento, que todo el mundo sabría como hacer esto y decidí no publicarla...

Podemos añadir cualquier leyenda (frase o palabra) en el pie de nuestras entradas, al lado de "comentarios" o sustituir "comentarios" por cualquier otra palabra o frase.

[1] Sustituir "comentarios" por otra palabra o frase desde Diseño

Nos situamos en la parte de editar de nuestra plantilla (donde añadimos nuevos gadgets), y en la caja de entradas, pinchamos en "editar".
Una vez allí, cambiamos el texto de comentarios por el que queramos mostrar, o añadimos a continuación de comentarios el texto con el que queremos animar a nuestras visitas a comentar, o ambas cosas:

X Opiniones...Anímate a participar.

Si lo hacemos de esta manera, Blogger limita la cantidad de caracteres a colocar y aunque, según mi opinión, son bastantes los que pueden ponerse, quizás hay alguien que necesite más, si es así podremos conseguir el mismo resultado anterior añadiendo el texto directamente en la plantilla.


[2] Sustituir "comentarios" por otra palabra o frase desde la plantilla

Nos situamos en la plantilla, editar HTML y marcamos la casilla de expandir las plantillas de artilugios, una vez hecho esto, buscamos esta parte del código, y añadimos la leyenda que queremos mostrar, que en este ejemplo es "Anímate a participar":

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if>...Anímate a participar</a>

La leyenda y los comentarios compartirán el mismo link por lo que, para que no salgan pegados, podemos incluir algún símbolo de separación que en este caso son unos puntos suspensivos, pero podemos usar una barra /, paréntesis ( ) o lo que mejor nos parezca.



Notas:

Si se da el caso de que tenemos añadido el "1 comentario, X comentarios y Sin comentarios" que explico en esta entrada, el cambio lo haremos en el HTML de la plantilla.
Expandimos los artilugios, buscamos esta parte y añadimos el "anímate a comentar" o lo que queramos:

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 0'>
sin comentarios ...Anímate a comentar
<b:else/>
<b:if cond='data:post.numComments == 1'>
1 comentario ...Anímate a comentar
<b:else/>
<data:post.numComments/> comentarios ...Anímate a comentar
</b:if>
</b:if>
</a>

También podemos hacer que en el caso anterior, según los comentarios que haya en una entrada, la leyenda añadida sea distinta. Por ejemplo:

Sin opiniones ...Se el primero en opinar
1 ha opinado ...Y tu ¿no opinas?
X opiniones...Gracias a tod@s por opinar

Acorn Icon Set

Original paquete de iconos creado por Monica Corduneanu para Smashing Magazine, contiene 17 iconos. Para descargar gratuitamente (formato .zip, 3,6 Mb) y utilizar en lo que te apetezca.

Acorn Icon Set

Vamos a rodear a Bendetti

Mario Benedetti está pasando horas malas. Hemos pensado que podíamos ponernos a leer sus poemas por todo el mundo y así ayudarlo en este momento. Un poema, por si no tenéis algún libro suyo a mano. Y por si queréis pasarlo a otros amigos.

El cuaderno de Jose Saramago

Si cada hora vino con su muerte,
si el tiempo era una cueva de ladrones
los aires ya no eran Buenos Aires,
la vida nada más que un blanco móvil.

Usted preguntará ¿por qué cantamos?

Si los nuestros quedaron sin abrazos,
la patria casi muerta de tristeza
y el corazón del hombre se hizo añicos
antes de que explotara la vergüenza.

Usted preguntará ¿por qué cantamos?

Cantamos porque el río esta sonando y cuando suena el río suena el río.
Cantamos porque el cruel no tiene nombre y en cambio tiene nombre su destino.
Cantamos porque el niño y porque todo y porque algún futuro y porque el pueblo.
Cantamos porque los sobrevivientes y nuestros muertos quieren que cantemos.

Si fuimos lejos como un horizonte,
si aquí quedaron árboles y cielo,
si cada noche siempre era una ausencia
y cada despertar un desencuentro.

Usted preguntará ¿por qué cantamos?

Cantamos porque llueve sobre el surco y somos militantes de la vida.
Y porque no podemos ni queremos dejar que la canción se haga ceniza.
Cantamos porque el grito no es bastante y no es bastante el llanto ni la bronca.
Cantamos porque creemos en la gente y porque venceremos la derrota.

Cantamos porque el sol nos reconoce
y porque el campo huele a primavera
y porque en este tallo en aquel fruto
cada pregunta tiene su respuesta.