[+/-] CSS: Imagenes con pie de foto

Agregar imágenes en nuestro sitio o blog, es algo sencillo. Pero al tratar de colocarle un texto descriptivo a la imagen la tarea se complica bastante. En especial cuando se quiere que el texto permanezca junto con la imagen, ya sea por debajo o por arriba.

Es por eso que a lo largo de esta entrada veremos un sencillo pero útil recurso con el cual podremos agregar imágenes en nuestro sitio/blog con un pie de foto sin despeinarnos.

Leer la entrada completa

[+/-] Cross-Browser(paginas compatibles con cualquier navegador) con IE8.js

Y es que, en lo que va del 2009, Mozilla Firefox que es un navegador gratuito y que también esta disponible para Windows, Mac y Linux. Ha incrementado su cuota de uso, frente al navegador con el que todos crecemos, Internet Explorer, y que para su uso y/o actualizar es necesario tener Windows original pero sigue teniendo la delantera.

Pero la situación no es comparar a estos dos navegadores, pues no podemos decir que Internet Explorer sea peor o mejor que Mozilla Firefox, cada navegador tiene sus pros y sus contras. A eso hay que añadirle que cada quien tiene sus preferencias y es de locos tratar de cambiarlas.

El hecho, es que los dos navegadores, son los mas utilizados en cuanto se refiere a recorrer los rincones de la Web, como lo muestra la siguiente tabla comparativa, de uso:

Microsoft Internet Explorer	66.83%
Mozilla Firefox	22.03%
Safari	8.21%
Chrome	1.26%
Opera	0.70%
Netscape	0.69%
Estadisticas por Market Share

Por lo tanto es de grandísima importancia ofrecer un sitio cross-browser, es decir, que sea compatible con al menos estos dos primeros.

Para esto existe una librería en Javascript, creada por el programador Inglés, Dean Edwards, quien tiene varios trabajos interesantes entre los que resaltan un compresor de javascript y una funcion de javascript llamada cssQuery() la cual es capaz de seleccionar un elemento de la página usando selectores CSS y sentencias DOM en cualquier navegador.

Pero por ahora hablaremos de IE8.js, el cual permitirá corregir diversas diferencias de Internet Explorer hacia los demás Navegadores, en cuanto a temas de CSS y HTML se refiere. Entre los mas destacados están el uso de la pseudoclase :hover en cualquier elemento de la página, transparencias en PNG(solo archivos con la terminación -trans.png) y otros selectores como:parent > child, adjacent + sibling, adjacent ~ sibling, :hover, :first-child, [attr], [attr="value"], [attr~="value"], [attr|="value"], [attr^="value"], [attr$="value"] y [attr*="value"]

Para agregarlo a tu página o Web/blog, puedes descargarlo directamente desde:
SantyWeb: IE8.js
Google Code: IE8.js

Después subirlo a un Web Hosting y enlazarlo en la cabecera con la URL del archivo, pero tambien puedes ahorrarte la subida de archivos y enlazarlo directamente desde Google Code de la siguiente manera:

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

Nota: si quieres subir el archivo puedes reemplazar la URL del archivo en el código anterior por el proveído en tu Web Hosting.

Fuente principal:
Google Code

[+/-] Ampliar imágenes con mouse y CSS

Ya habíamos explicado un código para ampliar imágenes con el mouse y Javascript y gracias a el comentario de Italo Disco Style, que preguntaba si se podía traducir a ese código Javascript a CSS. Lo cual dio resultado a lo siguiente.

El inconveniente aqui es que no usaremos javascript, por lo que necesitaremos definir cada uno de los ID de cada imagen.

El código CSS es el siguiente:

#img {
  width:300px; /* Este es el ancho de la imagen pequeña */
  height:400px; /* Este es el alto de la imagen pequeña */
  background: url(URL DE LA IMAGEN REDUCIDA) no-repeat top left;
  border:none;
}

#img:hover {
  width:410px; /* Este es el ancho de la imagen grande */
  height:546px; /* Este es el alto de la imagen grande */
  background: url(URL DE LA IMAGEN GRANDE) no-repeat top left;
}

El código HTML es el siguiente:

<img id='img'/>

Lo que cabe rescatar es que para cada imagen en la que utilices este efecto deverás colocarle un id='img1',id='img2', es decir que incremente cada imagen y lo mismo con el CSS, #img1, #img2.

[+/-] Fijar un post en el blog, sin fecha

Aqui les tengo este widget bastante bueno, surge de parte de un lector, que necesitaba fijar un post en la página principal sin tener que adelantar la fecha, pues aquí están los pasos a seguir.

/!\ En esta entrada se asume que tienes conocimientos de como agregar un gadget. Si no sabes como agregar un gadget, revisa esta entrada: como insertar o crear/eliminar o mover un gadget.

[1]Añadimos un gadget HTML/Javascript con el siguiente código:

+/- Mostrar Código

<h3 class="post-title entry-title">
<a href="http://URL_DEL_POST">TITULO_DEL_POST</a>
</h3>
<div class="postedby">
<div class="post-status">
<span class="post-author vcard">
Publicado por
<span class="fn">AQUI_QUIEN_LO_PUBLICA</span>
</span>
<span class="post-timestamp">
en
<a class="timestamp-link" href="http://URL_DEL_POST" rel="bookmark" title="permanent link"><abbr class="published"</abbr></a>
</span>.

      
<span class="date-header">FECHA_A_MOSTRAR</span>
</div>
<span class="post-comment-link">
<a class="comment-link" href="http://URL_DEL_POST#comments">FRASE_PARA_LOS_COMENTARIOS_DE_TU_BLOG:" y tu que opinas?"</a>
</span>
</div>

**SI QUIERES MOSTRAR ETIQUETAS AÑADE ESTO
<span class="post-labels">
Etiquetas:
<a href="http://TU_BLOG.blogspot.com/search/label/ETIQUETA" rel="tag">ETIQUETA</a>,
<a href="http://TU_BLOG.blogspot.com/search/label/ETIQUETA" rel="tag">ETIQUETA</a>,
<a href="http://TU_BLOG.blogspot.com/search/label/ETIQUETA" rel="tag">ETIQUETA</a>,
<a href="http://TU_BLOG.blogspot.com/search/label/ETIQUETA" rel="tag">ETIQUETA</a>,
</span>
**HASTA AQUI LAS ETIQUETAS

<div class="post-body entry-content">
<p>AQUI VA EL POST, O LA PARTE DE EL A MOSTRAR</p>
<div style="clear: both;"></div>
</div>
<div class="post-footer">
<div class="post-footer-line post-footer-line-1">
<span class="post-backlinks post-comment-link">
</span>

[2]Ya solo hacemos clic en guardar

[Modificaciones]:

Rojo: Esto se modifica, según tu blog, o la entrada
Azul: Este texto se elimina.

[+/-] Fijar imagen en el blog

Algo que suele ser muy útil en los blogs muy extensos, es una imagen de "subir arriba" que se quede estática mientras la página se desliza. Para así el lector se devuelva a donde comenzó

[1]para esto solo es necesario que coloques lo siguiente dentro de <body> y </body>:

<a expr:href='data:blog.url + "#"' style='display:scroll;position:fixed;bottom:0px;right:0px;'><img src='URL DE TU IMAGEN'/></a>

Ahora, si quieres una imagen que lleve a la página principal:

<a href='http://TUBLOG.blogspot.com' style='display:scroll;position:fixed;bottom:0px;right:0px;'><img src='URL DE TU IMAGEN'/></a>