Gracias a la API de Last.fm y a esta entrada de Carlos Martínez. El código usa el sistema Plain (Texto) de la API que nos permite acceder a los datos en forma de archivo de texto, y luego, posteriormente por medio de PHP lo adaptamos para mostrarlo de forma correcta.
<?php
function get_remote_file
($url,
$timeout =
10) {
$ch = curl_init
();
curl_setopt
($ch, CURLOPT_URL,
$url);
curl_setopt
($ch, CURLOPT_RETURNTRANSFER,
1);
curl_setopt
($ch, CURLOPT_CONNECTTIMEOUT,
$timeout);
$file_contents = curl_exec
($ch);
curl_close
($ch);
return ($file_contents) ?
$file_contents :
FALSE;
}
$usuario =
"usuario";
$datos = get_remote_file
("http://ws.audioscrobbler.com/1.0/user/$usuario/recenttracks.txt");
$datos =
utf8_decode($datos);
$linea =
explode("\n",
$datos);
echo "<ul id=\"lastfm\">";
for ($i = 0; $i <10; $i++) {
$parte = explode(",", $linea[$i]);
echo "<li>".str_replace("?","-",$parte[1])."</li>";
}
echo "</ul>";
?>
Lo que tenemos a continuación es una forma atractiva de mostrar la fecha de publicación de una entrada y el número de comentarios de forma sencilla y por medio de CSS.
El resultado queda tal cual lo muestra la imagen de arriba (demo) y el CSS y el código Html para añadir en Wordpress es: Continuar leyendo »
Las ventajas de un menú superior desplegable es que nos permite ofrecerle al usuario una serie de accesos directos a los enlaces más importante de nuestra web de forma que no estén continuamente en pantalla si no que solo se desplieguen cuando el usuario desee.
Para hacer este menú hemos utilizado la librería jQuery, para conseguir ese efecto. Para aplicarlo en nuestra web tenemos que incluir el código Javascript y la llamada a la librería entre las etiquetas <head></head> de la siguiente forma:
<script type=
"text/javascript" src=
"jquery.js"></script> <!-- Libreria jQuery -->
<script type=
"text/javascript">
$
(document
).ready
(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
El código html quedaría de la siguiente forma:
<div id=
"panel">
<ul class=
"list">
<li><a href=
"#">Inicio
</a></li>
<li><a href=
"#">Contacto
</a></li>
<li><a href=
"#">Portafolio
</a></li>
<li><a href=
"#">Sobre...
</a></li>
<li><a href=
"#">Ayuda
</a></li>
<li class=
"buscar"><input value=
"Buscar" /
></li>
</ul>
<div class=
"clear"></div>
</div>
<p class="slide"><a href="#" class="btn-slide">Menú</a></p>
Y por último necesitamos darle estilo mediante CSS quedando de la siguiente forma:
#panel {
background: #CCC093;
height: 50px;
display:
none;
}
.slide {
margin:
0;
padding:
0 0 0 5px;
border-top:
solid 4px #825948;
height: 40px;
}
.btn-slide {
float:
left;
background: #825948
url(white-arrow.gif
) no-repeat right -50px;
text-align:
center;
width: 144px;
height: 31px;
padding: 10px 10px
0 0;
margin:
0 auto;
display:
block;
font:
bold 120%/
100% Arial, Helvetica,
sans-serif;
color: #fff;
text-decoration:
none;
}
.active {
background-position:
right 12px;
}
ul.list {margin: 0px; padding: 16px 0px 0px 10px; list-style: none;}
ul.list li {float: left; width: auto;}
ul.list a {text-decoration: none; background: #453027; margin: 5px; padding: 4px;}
ul.list a:hover {text-decoration: none; background: #825948;}
ul.list li.buscar {float: right; margin-right: 5px;}
ul.list li.buscar input {background-color: #453027; border: 0px; color: #CCC093; font-size: 18px; margin: 0px; width: 300px;}
Si queréis ver un ejemplo de como queda, tenéis esta página disponible. La librería jQuery la tenéis aquí.
El titulo no se si es lo suficientemente descriptivo como para entender el contenido de esta entrada, pero, básicamente, lo que vamos a hacer es que mientras que los vídeos de nuestra web cargan se muestre una imagen indicando que el vídeo esta cargando.
Todo ello usando solamente CSS. La técnica es sencilla, consiste en darle estilo al div del vídeo para que muestre una imagen de fondo, una vez que el vídeo cargue, la imagen quedará en el fondo y conseguiremos ese efecto de imagen de carga que buscamos. El código CSS quedaría de la siguiente forma:
.video {
border: 20px solid #825948;
background: url(video-bg.gif) center no-repeat;
margin: auto;
background-color: #825948;
height: 355px;
width: 425px;
}
Por supuesto el código anterior es personalizable, yo además a añadido un borde y lo he alineado al centro, pero cada uno lo puede personalizar a su gusto.
El código Html sería algo así:
<div class=
"video"><object classid=
"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width=
"425" height=
"355" codebase=
"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name=
"wmode" value=
"transparent" /><param name=
"src" value=
"http://www.youtube.com/v/KA2B5X0LhMY&hl=en" /><embed type=
"application/x-shockwave-flash" width=
"425" height=
"355" src=
"http://www.youtube.com/v/KA2B5X0LhMY&hl=en" wmode=
"transparent"></embed></object></div>
Podeís ver un ejemplo de como queda el código o descargar la imagen que he usado en el ejemplo.
Primero que nada: ¿Que es y para que sirve? PHP Speedy Wordpress Plugin es un plugin para Wordpress que acelera la carga del blog, uniendo y comprimiendo los archivos Javascript y las Hojas de Estilo (CSS). La página cargará más rápido y si usamos varias librerías JavaScript notaremos bastante la diferencia.
A continuación hablaremos de:
- Instalación
- Configuración
- Prueba de la configuración
- Activación
- ¿Realmente mejora el tiempo de Carga?
Instalación
La instalación no es diferente a el resto de plugins, simplemente lo descargamos y subimos la carpeta php_speedy_wp al directorio wp-content/plugins de Wordpress.
Antes de activarlo tenéis que aseguraos de que los directorios /wp-content/plugins/php_speedy_wp/libs/php_speedy/config.php y /wp-content/plugins/php_speedy_wp/cache tengan permisos CHMOD 777. Luego lo activamos y vamos a Opciones » PHP Speedy. Continuar leyendo »
Un interesante manual publicado en woork que nos ayuda a incluir mensajes en los formularios que se mostrarán automáticamente al usuario cuando haga foco en él. Todo ello gracias a la librería javascript, Scriptaculous. Continuar leyendo »
Hace algunas versiones Wordpress dejó de mostrar los enlaces entrantes con Technorati y paso a mostrarlo con Google. Esto a mucho no les gusto y surgieron plugins para cambiar esto.
Con la última versión de Wordpress la mayoría de los plugins han dejado de funcionar, pero, tampoco son necesarios, ya que es muy fácil cambiarlo manualmente:
- En el Dashboard hacemos clic en
Editar en el Widget de Enlaces entrantes.
- Modificamos la URL del Feed por
http://feeds.technorati.com/cosmos/rss/?url=LA_URL_DE_TU_BLOG
- Pulsamos
Guardar.
Como vemos es sencillo y si queremos dejarlo todo como estaba lo podremos cambiar nuevamente por la URL de Google que sería: http://blogsearch.google.com/blogsearch_feeds?hl=en&scoring=d&ie=utf-8&num=10&output=rss&partner=wordpress&q=link:LA_URL_DE_TU_BLOG
Con este truco podremos con una sola imagen crear tantos iconos como queramos en todos los colores que queramos. El truco consiste en utilizar una imagen transparente y por medio de CSS cambiar el color de fondo del div.
<div class=
"rssicon32"></div>
.rssicon32 {
width:32px;
height:32px;
background-image:url(rss32.png);
background-color:red; /* Color del icono */
}
Aqui tenemos varios ejemplos de su utilización y podemos ver el resultado con distintos colores.
Personalmente prefiero utilizar Wordpress en ingles, la versión original, pero claro alguno de los inconvenientes es que por ejemplo las fechas se encuentran en ingles, pero esto tiene un sencilla solución.
Para traducir las fechas de ingles a español en wordpress lo único que tenemos que hacer es traducir el archivo locale.php que se encuentra en el directorio /wp-includes de wordpress. Yo ya lo he traducido, y os dejo el código después del salto. Continuar leyendo »
En este post aprenderemos a hacer un efecto de Slide gracias a MooTools, aquí podeís ver el resultado de lo que vamos a realizar en este tutorial. Cabe mencionar que no le he dado ningún estilo con CSS pero con él, podríamos obtener un mejor resultado, como por ejemplo el que nos muestran en la demo de la página de Mootools.
Para el que no lo sepa, Mootools es una librería JavaScript que facilita la tarea al diseñador, pudiendo usar efectos y aplicaciones que sean funcionales para el usuario insertando unos simples scripts en nuestra web, ahorrándose así el tener que programar todos los efectos. Continuar leyendo »
