La idea era utilizar el motor de busqueda de Google, Google Busqueda Personalizada (Google Custom Search o CSE para los entendidos), para un sitio que no utiliza base de datos para guardar los datos, de esta forma podía tener un buscador interno de forma sencilla y rápida.
Al lograr hacer que el buscador funcionará de forma correcta (fue difícil, ya que las páginas no estaban indexadas en Google), quise hacer algo para conocer que era exactamente lo que buscan los usuarios, para eso necesitaba conocer los datos del buscador, algo que Google no nos deja hacer.
Pero encontré una solución, rápida y efectiva de hacer esto, utilizando una base de datos para guardar las busquedas realizadas y cuantas veces fué buscado algún término. Con esto se puede hacer un sitio muy completo y lo mejor es que tengo todos los datos que quería desde un principio.
Lo primero que debemos hacer es crear un buscador, con la opción de Iframe, para que los datos se guarden en nuestro hosting.
Eso es todo, ahora sólo tenemos que crear las tablas necesarias en nuestra base de datos:
`id` INT(11) NOT NULL AUTO_INCREMENT,
`query` VARCHAR(255) NOT NULL DEFAULT '',
`DATETIME` INT(11) NOT NULL DEFAULT '0',
PRIMARY KEY (`id`)
) ENGINE=MyISAM
Ahora sólo debemos usar el siguiente código para recolectar los datos:
/*-----------------------
Conectarse con la Base de Datos
-------------------------*/
$dbhost = "localhost";
$dbname = "nombre";
$dbuser = "usuario";
$dbpass = "contraseña";
$db=mysql_connect($dbhost, $dbuser, $dbpass);
if ($db==FALSE)
die("Error al intentar conectar a la Base de Datos ".mysql_error());
mysql_select_db($dbname ,$db);
/*------------------------------
Guardar términos de busqueda
-------------------------------*/
$querystat = mysql_real_escape_string($_GET['q']);
$datetime = time();
if( ($querystat != $_SESSION['prev_search']) OR ( ($dataora - $_SESSION['dataora'])> 60) ) {
$insertquery = "INSERT INTO `query` ( `query` , `datetime`) VALUES ( '$querystat' , '$datetime');";
mysql_query($insertquery, $db);
}
$_SESSION['datetime'] = $datetime;
$_SESSION['prev_search'] = $querystat;
?>
Debemos pegarlo en la página donde se muestran los resultados de nuestro buscador.
Parece complicado pero es muy simple una vez que lo entiendes.
Si quieres ver cómo funciona lo que hice, puedes entrar aquí y hacer una busqueda y luego entrar en la página que dice "Busquedas". Incluso pude hacer una página con el Top de Busquedas realizadas.
Si quieres darle crédito a alguien por este excelente hack del buscador, hazlo en esta página:
Enlace: How to save search queries on Google Custom Search Engine
]]>Aquí en el blog hemos escrito algunos artículos sobre CSS y las imágenes, como por ejemplo el efecto cargando e imágenes transparentes.
Para arreglar esto tan sólo debemos agregar una líneas de código a nuestra hoja de estilos CSS y listo.
Con este truco lo que haremos será lo siguiente:
- El ancho de la imagen será fijo, tu decides que tan ancho será, en este caso es de 530px.
- La altura de la imagen será automática, quedando de un tamaño proporcional al ancho estipulado.
Este es el código:
Eso es todo, pero debemos aclarar que el efecto sólo se verá dentro del sitio, si, por ejemplo, leemos desde un lector de feeds, la imagen se verá de tamaño completo.
]]>Luego de revisar por un rato en Google y algunas referencias he creado una nueva lista, con algunos blogs nuevos y otros que estaban en la anterior.
Además cambié mi "juntador de feeds" (no se me ocurrió una forma clara de decirlo), ya que el que utilizaba tardaba mucho en actualizar y no me parecia muy confiable, ahora utilizo el mismo Google Reader, que es más rápido y confiable, para juntar los feeds dentro de uno sólo, además, al hacerlo he creado un grupo donde están íncluídos todos estos blogs, que puedes agregar facilmente a tu lector.
Ahora les dejo la lista de blogs:
- aNieto2K (lista anterior)
- Ayuda WordPress (lista anterior)
- Blog and Web (lista anterior)
- Blogger Full (lista anterior)
- El Escaparate de Rosa (lista anterior)
- VidaBlogger (nueva lista)
- BanakaBanaka!! Blog (nueva lista)
- Blog personal de InKiLiNo (nueva lista)
- BdeBloggers (nueva lista)
- Chica SEO (nueva lista)
- El Balcón de Jaime (nueva lista)
- LaWebera.es (nueva lista)
- MP3d (nueva lista)
- Adseok (nueva lista)
- Tengoun.com.ar (nueva lista)
- TensaiWeb (nueva lista)
- Vagabundia (lista anterior)
- WordPress Hacks (nueva lista)
- Xyberneticos (lista anterior)
Me dió flojera ordenar la lista alfabéticamente así es que la dejé así.
Algunas mejoras:
- Los feeds se leen más rápido.
- La lista se actualiza más rápido, ya que no requiere de un servidor externo.
- El contenido del feed se lee normalmente (con el anterior se veían mal los caracteres españoles, ya sean tildes, "ñ" y quizás algo más).
- Aumente la cantidad de enlaces a mostrar, antes sólo se mostraban los últimos 7 posts, ahora se ven los últimos 12.
- Blogs nuevos (ya vieron la lista) con mejor contenido y más actualizaciones.
- Un grupo creado en Google Reader para el que quiera agregarlo en su lector.
- No se me ocurren más cosas...
Espero que les agrade la nueva lista y que me ayuden a mejorarla, nominando blogs para agregar en ella.
Feed de la lista: Blogs de Ayuda.
Grupo en Google Reader: Blogs de Ayuda. (nombre original (H))
]]>
Ya hemos visto varias formas para mostrar el contenido de un feed en cualquier lugar del blog, pues ahora veremos otra forma que es mucho más efectiva y rápida, utilizando WordPress.
Este método lo tengo implementado en la sección "Blogs de Ayuda" desde hace unos días y realmente funciona mucho más rápido que utilizando FeedBurner.
Podemos hacerlo de 3 formas, una donde sólo mostraremos el título del post con su url, mostrar el título y un extracto del contenido o mostrar el título y todo el contenido.
Para mostrar sólo el título utilizaremos este código:
include_once(ABSPATH.WPINC.'/feed.php');
$feed = fetch_feed('http://feeds2.feedburner.com/Ayuda-Blogs');
$limit = $feed->get_item_quantity(7); // Especificar el número de links
$items = $feed->get_items(0, $limit); // Crea un "array" con los links
}
if ($limit == 0) echo '<div>No hay artículos en el feed o es inaccesible.</div>';
else foreach ($items as $item) : ?>
<div class="titulo">
<li><a href="<?php echo $item->get_permalink(); ?>"
title="<?php echo $item->get_title(); ?> | <?php echo $item->get_date('j F Y'); ?>">
<?php echo $item->get_title(); ?>
</a></li>
</div>
<?php endforeach; ?>
Para mostrar el título y un extracto utilizaremos este otro código:
include_once(ABSPATH.WPINC.'/feed.php');
$feed = fetch_feed('http://feeds2.feedburner.com/Ayuda-Blogs');
$limit = $feed->get_item_quantity(7); // Especificar el número de links
$items = $feed->get_items(0, $limit); // Crea un "array" con los links
}
if ($limit == 0) echo '<div>No hay artículos en el feed o es inaccesible.</div>';
else foreach ($items as $item) : ?>
<div class="titulo">
<li><a href="<?php echo $item->get_permalink(); ?>"
title="<?php echo $item->get_title(); ?> | <?php echo $item->get_date('j F Y'); ?>">
<?php echo $item->get_title(); ?>
</a></li>
</div>
<div class="extracto">
<?php echo substr($item->get_description(), 0, 200); ?>
<span>[...]</span>
</div>
<?php endforeach; ?>
Podemos elegir la extensión que tendrá el extracto en caracteres, que por defecto trae 200 y que puedes modificar donde dice:
Y por último podemos mostrar el título y el contenido del feed completo, utilizando este código:
include_once(ABSPATH.WPINC.'/feed.php');
$feed = fetch_feed('http://feeds2.feedburner.com/Ayuda-Blogs');
$limit = $feed->get_item_quantity(7); // Especificar el número de links
$items = $feed->get_items(0, $limit); // Crea un "array" con los links
}
if ($limit == 0) echo '<div>No hay artículos en el feed o es inaccesible.</div>';
else foreach ($items as $item) : ?>
<div class="titulo">
<a href="<?php echo $item->get_permalink(); ?>"
title="<?php echo $item->get_title(); ?> | <?php echo $item->get_date('j F Y'); ?>">
<?php echo $item->get_title(); ?>
</a>
</div>
<div class="contenido">
<p><?php echo $item->get_content(); ?></p>
</div>
<?php endforeach; ?>
Este último muestra el artículo completo, siempre y cuando el feed esté configurado para mostrarse completamente, ya que algunos sólo muestran extractos.
Para modificar el feed que se mostrará deben modificar la tercera línea y agregar el feed que quieran, en este caso se muestra el de Blogs de Ayuda.
]]>
¿Te gustaría mostrar tus imágenes con este efecto, hasta que terminen de cargar?
Para hacerlo es muy simple y como siempre nos ayudaremos con nuestro amigo CSS.
Para generar este truco sólo debemos agregar la imágen como background, de modo que cuando la imágen termine de cargar, esta quede debajo y no sea visible.
Utilizaremos la class "entry", que es la clase por defecto en WordPress, si usas otro sistema, sólo deberás cambiarla.
El CSS necesario para el efecto es este:
Ahora, sólo debes entrar a alguna entrada donde tengas imágenes que pesen harto, para que puedas observar el efecto, si quires un ejemplo, entra aquí.
]]>Para lograr el efecto ed justificado automáticamente, solo debemos agregar una línea de código a nuestro archivo style.css, dependiendo de tu tema la clase puede cambiar.
El código es el siguiente:
Cómo sabran el atributo "p" se refiere a párrafos y gracias a la propiedad "justify" se logrará el efecto deseado, justificar los párrafos de nuestro texto.
Ahora, si actualizamos nuestra página, veremos que todo el texto está justificado, sin que hicieramos nada.
]]>Es un método muy simple y efectivo, que tan sólo ocupará una línea dentro de nuestra hoja de estilos.
Para aplicarlo a algún elemento de nuestra página sólo debemos agregar el class en ella:
Existen más métodos, pero este es el más utilizado.
Espero que les sea útil 
Mostrar imágenes transparentes es una buena técnica en diseño, sí, se ven bien. Esta técnica la utilizo en la sidebar, donde están las imágenes 125x125.
En este post les mostraré como hacerlo utilizando CSS. Las imágenes estarán transparentes de forma predeterminada y al pasar el mouse sobre ellas volverán a su estado normal.
Para hacerlo crearemos un class en CSS, que puede tener cualquier nombre. El código que agregaremos a nuestra hoja de estilos será el siguiente:
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
-khtml-opacity: 0.6;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /*Internet Explorer 8*/}
a.transparencia:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /*Internet Explorer 8*/}
Para lograr el efecto debemos agregar el class a la imágen, de esta forma:
Si quires usarlo en las imágenes dentro de tus posts, debemos hacerlo de esta forma:
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
-khtml-opacity: 0.6;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /*Internet Explorer 8*/}
En este caso sólo se mostrará la transparencia, sin el efecto hover.
Con esto será suficiente y ya podremos observar el efecto en nuestras imágenes.
]]>