Evitar el cacheo de archivos

Evitar la cache de los exploradores, es, en ocasiones, algo muy importante.

Para ello añadiremos unas cabeceras en el servidor en las que se deje bien claro que estas páginas no deben guardarse en cache.

<?php
header( "Expires: Mon, 26 Jul 1997 05:00:00 GMT" );
header( "Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . " GMT" );
header( "Cache-Control: no-cache, must-revalidate" );
header( "Pragma: no-cache" );
?>

A tener en cuenta cuando mi sitio está “en mantenimiento”

Lo normal es poner una página que dice que la web está temporalmente fuera de servicio, en mantenimiento, en construcción, … con la consecuencia de que este contenido es indexado y se pierde el contenido original.

GoogleBot lo interpreta como una página correcta (Código HTTP 200), y regresará de nuevo cuando toque. En la mayoría de los casos no queremos que esto pase, por eso tenemos que devolver un código HTTP 503 (Network Unavaible), en este caso GoogleBot no indexará esta página y volverá a intentarlo pasado un rato.

Fuente:
All About Googlebot en Official Google Webmaster Central Blog

Para implementar esto en PHP podemos hacerlo de la siguiente manera:

<?php
	header('HTTP/1.0 503 Service Unavailable');
?> 

Contar la cantidad de veces que una cadena aparece en un texto con PHP

Para contar la cantidad de veces que aparece una cadena de caracteres (o un carácter) en un texto, en PHP 4 y versiones posteriores podemos usar substr_count, pero en PHP 3 no tenemos esta función, así que deberemos implementarla. Una manera simple de hacerlo es la siguiente:

<?php
/******************************************************************************
* cuenta el número de apariciones de una cadena en otra
*
* @param     string     $cadena        Texto en le que buscar la cadena
* @param     string     $subDadena     Cadena a buscar
* @return    integer
******************************************************************************/

function substr_count($cadena, $subDadena){
	return count(explode($subDadena, $cadena)) - 1 ;
}

?> 

man pages on-line

Por si alguna vez no disponéis de linux para consultar sus páginas de ayuda, podéis hacerlo en linuxmanpages.com, que muestra estas ayuda on-line.

Simplemente escribís en “Search For ” el comando que os interesa, y os mostrará su página de ayuda

Widget de Kuler para Opera

Hoy se me ha dado por adaptar el widget de Kuler que ofrece Adobe para Mac para poder utilizarlo desde Opera en cualquier plataforma. Y e aquí el primer resultado, todavía no es definitivo, queda algún detalle, pero ya se puede ir viendo. En cuanto sea definitivo lo subiré a Opera Widgets.

Para ejecutarlo, simplemente se tiene que arrastrar el archivo zip descargado sobre el Opera, y ya debería funcionar.

Descargar Kuler widget para Opera 0.1 (156.9KB)

lista de enlaces de redes sociales desplegable con CSS

Hace unos días he creado una lista de enlaces, bastante simple, par mostrar/ocultar enlaces con CSS, aquí se puede ver una demostración de una lista de lista de enalces enlaces para redes sociales que uso en mi blog

Para crear algo como esto lo primero es crear el Html, por supuesto un Html correcto XD:

<div class="edit_listaEnlaces">
<img alt="Redes sociales:" src="redesSociales.gif" />
<ul>
<li>
<a href="http://del.icio.us/post?url=&title=">
<img src="del.icio.us.jpg" title="del.icio.us"/></a>
</li>
<li>
<a href="http://tec.fresqui.com/post?url=">
<img src="fresqui.png" title="fresqui"/></a>
</li>
</ul>
</div>

Algo así sería lo correcto, y así es como se vería en un navegador en modo texto:

Redes sociales

* [1]del.icio.us

* [2]fresqui

Visible links

1. http://del.icio.us/post?url=&title=

2. http://tec.fresqui.com/post?url=

Lo cual también nos da una idea de como sería visto por un lector de pantalla y por tanto que seria accesible.

Ahora vamos a darle estilo:

Lo primero es limitar el ancho del la etiqueta <div> ya que lo que trataremos es de que solo se despliegue cuando estemos sobre un elemento concreto, y no la caja en si, como además yo busco que este elemento esté a la altura de otro de los elementos de la página añadiré un display:inline;:
.edit_listaEnlaces{
display:inline;
}

También que los elementos de la lista se muestren en una única linea, así que para ello añadiremos el siguiente código: (el padding es para que tengan algo de separación entre ellos)
.edit_listaEnlaces li{
display:inline;
list-style:none;
margin:0;
padding:0 0 0 3px;
}

Y ya es hora de ocultar los elementos de la lista y hacer que se muestre solo la primera imagen:

.edit_listaEnlaces ul{
display:none;
}
.edit_listaEnlaces > img{
display:inline;
}

Y ahora añadiremos la “acción”, en el momento en el que nos situemos sobre la imagen, se deberán desplegar los enlaces y ocultarse la misma:

.edit_listaEnlaces:hover ul{
margin: 0px;
padding: 0px;
display:inline;
}
.edit_listaEnlaces:hover > img{
display:none;
}

esto ya es suficiente para que funcione, si queremos hacer el efecto que tiene el ejemplo en el borde de las imágenes, deberemos añadir los siguiente
.edit_listaEnlaces > img{
padding: 1px;
display:inline;
}
.edit_listaEnlaces a img{
border: 1px solid blue;
}
.edit_listaEnlaces a:hover img{
border: 1px solid yellow;
}
.edit_listaEnlaces a:visited img{
border: 1px solid green;
}

Esto de los bordes se ha añadido para que sea más accesible, que las recomendaciones indican que se han de diferenciar los enlaces, de los enlaces seleccionados y de los visitados.

Este código está probado sobre Opera (v 9.22), Firefox (v 2.0.0.6), e Internet Explorer (v 7.0.5730.11)