Pizcos Blog

Live Banner Maker

noreply@blogger.com (Pizcos) — Mon, 26 Oct 2009 11:27:51 PDT

Live Banner Maker es un generador de banner online, bastante simple de usar, que nos facilita la labor de generar uno para nuestro blog.

JQuery y otras librerias.

noreply@blogger.com (Pizcos) — Thu, 29 Oct 2009 12:29:32 PDT

Leyendo la entrada Utiliza jQuery & Scriptaculous... simultáneamente de BanakaBanaka!! he recordado que es algo que tengo pendiente de explicar desde hace tiempo. Como usar JQuery con otras librerías.

Siempre hablamos de incompatibilidades entre librerías, yo siempre recomiendo decantarte por una y encontraras todo lo necesario con ella. Pero en que consiste realmente esas incompatibilidades es algo realmente sencillo de entender y relativamente fácil de corregir.

Pero primero entendamos para que usamos esas librerías y las diferencias entre CSS, HTML y JAVASCRIPT. Para que lo entendáis voy a usar una entrada de Chris Coyier en CSS-Tricks en la que me gusto mucho como define estas tres palabras que oímos habitualmente y cuyos conceptos nunca quedan claro:

HTML .- Debe servir para describir y mostrar el contenido de una pagina.

CSS .- Debe servir para el diseño de ese contenido.

JAVASCRIPT .- Debe usarse para darle funcionalidad al contenido.

Una vez tenemos claro cual es el uso que debe darse a cada cosa, volvamos a la cuestión que nos ocupa, las librerías de javascript. Las usamos para dar funcionalidad a los contenidos o elementos de nuestro blog, pero para ello debemos "llamar" a ese contenido o a esos elementos, esas "llamadas" usan selectores.

Ahí es donde aparecen las primeras incompatibilidades, si mas de una librería usa un mismo selector ($) y mezclamos el uso de esas librerías y de esos selectores, los navegadores no nos mostraran esas funcionalidades. Aparecen los "conflictos".

JQuery posee una opción que nos permite su uso con otras librerías como Scriptaculous, Mootools, etc. Simplemente nos da la posibilidad de modificar ese selector ($), lo que normalmente seria con JQuery

eso nos generaría conflictos, así que usando jQuery.noConflict lo evitamos

Añadiendo jQuery.noConflict(); y modificando el selector podremos usar otras librerías.

También podemos usarlo de otra forma, añadiendo una variable y usando esa variable en vez de sustituir el selector $ por JQuery podemos usar otro

Hay otras posibilidades pero tampoco se trata de mostrarlas todas sino que entendáis el concepto.

Sobre la cuestión de si las llamadas a las diferentes librerías deben hacerse en un orden predeterminado, en la página oficial de JQuery nos indican que podemos hacerlas en el orden que queramos.

Espero haberos dejado claro el porque de esos conflictos, como resolverlos, aunque sigo diciendo lo mismo... mejor decantarse por una.

Yahoo Media Player

noreply@blogger.com (Pizcos) — Sun, 01 Nov 2009 11:09:28 PST

Incluir música en tu blog es una tarea que muchas veces se vuelve difícil y tortuosa. Puedes usar los típicos sitios que te permiten subir tu música y te dan el código para insertarlo en tu blog, pero suelen llevar "anexo" publicidad y no se pueden adecuar a la estética de tu blog.

Otra posibilidad es insertar directamente un reproductor en tu blog, para ello debes encontrar alguno de libre disposición (no hay tantos), debes subirlo a alguna web de alojamiento y a la hora de usarlo, lo mas probable es que te pierdas entre tanto código a la hora de querer usarlo.

Yahoo Media Player me ha gustado mucho, realmente es un concepto novedoso para mí, con una simple línea de código, reconoce cualquier archivo de música que insertes en tu blog y le asocia un botón de reproducción. Al pulsarlo te aparece automáticamente el reproductor y empieza a reproducir el fichero de audio.

Para usarlo solo debéis añadir un elemento HTML y en el insertáis (también podéis insertarlo en vuestra plantilla antes de </body>)

Para usarlo solo debéis insertar los archivos de música de esta forma (como un simple enlace)

<a href="URL ALOJAMIENTO ARCHIVO.mp3">Titulo 1</a>
<a href="URL ALOJAMIENTO ARCHIVO.mp3">Titulo 2</a>
<a href="URL ALOJAMIENTO ARCHIVO.mp3">Titulo 3</a>...

Podéis probarlo en su página pulsando en los enlaces que aparecen en C Play

Nuevos diseños

noreply@blogger.com (Pizcos) — Mon, 02 Nov 2009 13:57:18 PST

Como me han vuelto las ganas de diseñar alguna plantilla, me he puesto con el blog de mi compi Perem(The Best Music) para darle un nuevo aire.

Antes

Después

Aun me queda bastante trabajo pero creo que quedara bien.

No entiendo Facebook

noreply@blogger.com (Pizcos) — Tue, 03 Nov 2009 02:45:48 PST

¿No existen blogs de ayuda para entender Facebook? Cada vez que me acerco al mío, salgo corriendo.

Puede extrañaros esta afirmación pero es completamente cierta, no lo entiendo, no logro entender para que sirve ¿tal vez para contar cosas? ¿colgar fotos? ¿encontrar amigos?

A diario recibo invitaciones para seguir a gente y aunque las acepto, una veces salen bien y otras se me pierden en el limbo. Intento encontrar amigos que se que están ahí y nada. Me encuentran a mí y tampoco puedo unirme. Me dicen que x amigos han comentado mi ¿estado?

La sensación de impotencia aumenta a medida que lo intento. Todo esto me lleva a pensar, si yo me siento inútil ante Facebook y soy una persona habituada a navegar por la red, usar sus contenidos, etc. ¿Que ocurre con las personas que no lo están?

Si la función de Facebook es mostrar tu perfil, encontrar amigos, compartir cosas, etc ¿Porque lo hacen tan enrevesado? ¿Pueden simplificarlo, por favor? No entiendo su auge, la mayoría de los usuarios de Internet tienen dificultades en encontrar cosas a través del buscador ¿como pretenden que se encuentre algo con Facebook?

Llevo dos días intentando añadir un widget de fans a mi blog y no hay forma, he creado un blog, he creado algo que llaman insignia de perfil, he hecho mil cosas más y el resultado es el mismo, la nada más absoluta.

¿Será que conscientemente lo hacen así? ¿será que les interesa que veas toda la publi y demás ingresos que te meten?

Otra explicación no lo encuentro, si, tal vez una más, me estoy haciendo mayor. ¿Alguien puede ayudarme?

Marcadores sociales 2

noreply@blogger.com (Pizcos) — Thu, 05 Nov 2009 08:13:29 PST

Como ya sabéis ando estos días modificando el blog The Best Music, he implementado en el unos marcadores sociales usando unos iconos de Llow. Los he adaptado en tamaño y modificado alguno para usarlos en redes hispanas.

He realizado una imagen sprite para su uso y he generado los códigos necesarios.

Para implementarlos añadimos en nuestro CSS

div.marcadores {
height:55px;
position:relative;
width:480px;
}
div.marcadores ul.social {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:50px;
}
div.marcadores ul.social li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:50px !important;
width:50px !important;
cursor:pointer !important;
padding: 0 !important;
}
div.marcadores ul.social a {
display:block !important;
width:50px !important;
height:50px !important;
font-size:0 !important;
color:transparent !important;
}

.socialbitacoras, .socialblogger, .socialdelicious, .socialdigg, .socialfacebook, .socialmeneame, .socialtechnorati, .socialtwitter, .socialbitacoras:hover, .socialblogger:hover, .socialdelicious:hover, .socialdigg:hover, .socialfacebook:hover, .socialmeneame:hover, .socialtechnorati:hover, .socialtwitter:hover { background: url(URL ALOJAMIENTO IMAGEN SPRITE) no-repeat !important;
}

.socialbitacoras { background-position: 0 bottom !important; }
.socialblogger { background-position: -50px bottom !important; }
.socialdelicious { background-position: -100px bottom !important; }
.socialdigg { background-position: -150px bottom !important; }
.socialfacebook { background-position: -200px bottom !important; }
.socialmeneame { background-position: -250px bottom !important; }
.socialtechnorati { background-position: -300px bottom !important; }
.socialtwitter { background-position: -350px bottom !important; }
.socialbitacoras:hover { background-position: 0 top !important; }
.socialblogger:hover { background-position: -50px top !important; }
.socialdelicious:hover { background-position: -100px top !important; }
.socialdigg:hover { background-position: -150px top !important; }
.socialfacebook:hover { background-position: -200px top !important; }
.socialmeneame:hover { background-position: -250px top !important; }
.socialtechnorati:hover { background-position: -300px top !important; }

Expandimos nuestra plantilla, buscamos <div class='post-footer-line post-footer-line-3'> y añadimos a continuación el HTML

Fail

noreply@blogger.com (Pizcos) — Fri, 06 Nov 2009 05:08:07 PST

Nota: Imagenes recibidas en mi mail, desconozco su procedencia.

Algo esta cambiando en Blogger

noreply@blogger.com (Pizcos) — Sat, 07 Nov 2009 10:49:17 PST

Desde hace una semana tengo la sensación de que algo esta cambiando en Blogger, a raíz del problema de DNS sufrido en Europa.

Blogger estuvo inaccesible durante 10 horas pero en todo momento nos mantuvo informados a través de su timeline de Twitter. Fueron bastante transparentes durante ese tiempo, incluso se comprometieron a explicar lo ocurrido en Blogger Buzz, cosa que han cumplido.

En esa publicación muestran su intención de que cada vez que haya un problema similar, nos mantendrán informados en todo momento. Que en un plazo inferior a tres días publicaran los motivos de ese fallo, las medidas tomadas y las que tomaran en el futuro para evitarlo. También nos indican que si el acceso a esa información estuviera cortado, usaran el timeline de Twitter para tenernos informados.

En el caso del grave problema ocurrido hace una semana así lo han hecho, en Blogger Status explican que ha ocurrido y que medidas están tomando para evitarlo.

Otro hecho que me hace pensar que algo esta cambiando son las novedades incorporadas y el poner a nuestra disposición una página para ofrecer sugerencias. Al fin parece que quieren salir de sus despachos y escuchar a los que verdaderamente tenemos algo que decir, los usuarios de Blogger.

Pseudo-elementos CSS

noreply@blogger.com (Pizcos) — Mon, 09 Nov 2009 10:32:08 PST

Hay algunas propiedades en CSS poco usadas por ser desconocidas para la gran mayoría de nosotros. Me refiero a los pseudo-elementos que nos permiten añadir efectos a algunos selectores como los títulos de las entradas por ejemplo.

Básicamente hablamos de cuatro pseudo-elementos

:first-letter Añade estilo a la primera letra de un texto

:first-line Añade estilo a la primera fila de un texto

:after Añade contenido detrás de un elemento

:before Añade contenido delante de un elemento

La forma de implementarlos es muy fácil

selector:pseudo-elemento {propiedad:valor}

Veamos un ejemplo con los títulos de las entradas

.post h3:first-letter {font-size:50px;}

A los dos primeros pseudo-elementos podemos aplicarles todas las propiedades de las fuentes.

Los pseudo-elementos :after y :before pueden usarse para añadir una imagen detrás o delante de cualquier titulo, por ejemplo.

.post h3:after {content:url(URL ALOJAMIENTO IMAGEN);}

.post h3:before {content:url(URL ALOJAMIENTO IMAGEN);}

Os dejo ya a la habilidad de cada uno el fruto que podéis sacarle a estos pseudo-elementos, eso si no dejéis de enseñármelo.

Selectores Atributos CSS

noreply@blogger.com (Pizcos) — Wed, 11 Nov 2009 04:43:08 PST

Hace un par de días veíamos los pseudo-elementos y posibles usos que podíamos darle. Veamos hoy otros selectores muy poco usados, que pueden ayudarnos a mejorar imágenes y links simplemente usando y rellenando la etiqueta "title" en un enlace o una imagen.

Cuando insertamos una imagen o un enlace a nuestro blog desde Blogger el código que normalmente nos encontramos es

Enlace

<a href="URL ENLACE" title="" alt="">Nombre del enlace</a>

Imagen

<img src="URL ALOJAMIENTO IMAGEN" title="" alt=""/>

Enlace con imagen

<a href="URL ENLACE" title="" alt=""><img src="URL ALOJAMIENTO IMAGEN" title="" alt=""/></a>

Habitualmente si queremos darle estilo creamos una clase en nuestro CSS y se la aplicamos al enlace o a la imagen.

.imagen { border: 2px dashed #000000 } Le pondríamos un borde a la imagen.

.enlace { color: #cccccc;} El enlace seria de color gris.

Lo aplicaríamos

Enlace

<a class="enlace" href="URL ENLACE" title="" alt="">Nombre del enlace</a>

Imagen

<img class="imagen" src="URL ALOJAMIENTO IMAGEN" title="" alt=""/>

Esa seria la forma clásica pero podemos hacerlo de otra forma usando la etiqueta "title" y según el nombre que le asignemos podemos darle una apariencia u otra.

Para ello añadimos a nuestro CSS

Para actuar sobre cualquier enlace que tenga la etiqueta "title"

[title]{color:#cccccc;}

Para actuar según el nombre que le demos a la etiqueta

[title=azul] {color:#cccccc;}

Podemos crear varios

[title=azul] {color:#330099;}
[title=rojo] {color:#ff0000;}
[title=naranja] {color:#ff9900;}

Y lo asignaríamos

<a href="URL ENLACE" title="azul" alt="">Nombre del enlace</a>

Enlace 1
Enlace 2
Enlace 3

Para las imágenes seria lo mismo

[title=tipo1] {border: 2px solid #cccccc;}
[title=tipo2] {border: 1px dashed #000000;}
[title=tipo3] {border: 5px solid #cc0000; background: #ffffff; padding: 10px 10px 30px 10px;}

<img src="URL ALOJAMIENTO IMAGEN" title="tipo3" alt=""/>

Existen algunos más pero creo que esto es realmente útil si queremos darle diferentes aspectos de forma fácil a nuestras imágenes y enlaces.

Doug.Landis.Art

noreply@blogger.com (Pizcos) — Thu, 12 Nov 2009 02:25:07 PST

Widget traductor de Microsoft

noreply@blogger.com (Pizcos) — Sat, 14 Nov 2009 15:01:38 PST

No conocía la posibilidad que nos da Microsoft de instalar un widget para traducir nuestro blog a otros idiomas. Hoy dándole una vuelta a Bing me he encontrado con ese widget.

Solo debéis ir a esta página, introducir la url de vuestro blog y os proporciona el código para insertarlo añadiendo un elemento HTML.

Etiquetas ALT, script para mostrar el titulo.

noreply@blogger.com (Pizcos) — Wed, 18 Nov 2009 13:35:54 PST

A nivel de SEO es importante rellenar la etiqueta Alt en nuestras imágenes, yo confieso (se me empieza a notar la influencia de Twitter, casi lo escribo como un hashtag #yoconfieso) que no suelo rellenarlo y eso que Blogger nos la incluye automáticamente cuando insertamos una imagen y solo habría que rellenarla.

Hace poco recibí un mail consultándome sobre la posibilidad que existiese algún script que la rellenase automáticamente con el nombre de la entrada y sirviese para SEO. He estado investigando un poco y desgraciadamente no existe nada para eso.

Si he descubierto un script que al pasar el ratón sobre la imagen te muestra automáticamente el nombre de la misma. No sirve para posicionamiento pero para los que no rellenamos esa etiqueta, es útil para nuestras visitas.

Solo debéis añadir antes de </body>

Fuente | DEVPPL

Facebook, Twitter, Tuenti...es el fin de los blogs?

noreply@blogger.com (Pizcos) — Wed, 18 Nov 2009 14:15:47 PST

Rotundamente no.

Esta afirmación puede parecer muy contundente pero no lo es. Empecemos por el principio, el boom de los blogs se debió, en gran parte, a que fue el primer paso para poder expresarnos al resto del mundo librándonos del espinoso tema del conocimiento sobre programación. Nos permitió exponer de forma habitual nuestras ideas y pensamientos. Se nos facilito enormemente el poder hacerlo sin tener que tener dominios propios, conocimientos informáticos, saber sobre programación, etc.

Fue el primer paso a la llamada socialización, poder comunicarte con el mundo aunque solo por una serie de artículos que podías publicar frecuentemente y además te permitía relacionarte con otros a través de los comentarios. Este boom ha durado 10 años, demasiados diría yo.

Ahora asistimos al boom de las redes sociales palabras como Twitter, Facebook, Tuenti, etc. están en boca de todos.

Este boom es un paso más de socialización, permite lo mismo que los blogs pero va más allá, la relación/reacción del mundo es inmediata. Ocurre segundo a segundo, minuto a minuto.

En definitiva ambos, blogs y redes sociales, permiten comunicarte, salvo que lo hacen de forma diferente.

También debemos saber que cuando asistimos a un boom, suele inflarse como una burbuja y en el sobra mucho de todo. El tiempo es el factor principal que suele llevar las cosas a su sitio.

Una vez expuesto lo anterior, veamos su principal diferencia (para mi) los blogs te dan contenidos, las redes sociales te llevan a el. Redes como Twitter no tendrían sentido sin el resto de Internet, carecerían de contenido.

Si las redes socales acaban con los blogs se estarían suicidando lentamente. Acabarían siendo simples Messenger. Evidentemente que estas redes sociales van a marcar durante un tiempo la blogosfera pero servirán para limpiarla, depurarla y encajarla en su sitio dentro de la red. Otra cosa no tendría sentido seria el fin de esta socialización.

Editar entradas en otros idiomas Blogger

noreply@blogger.com (Pizcos) — Thu, 19 Nov 2009 05:06:31 PST

Español

Creo que todos sabéis las novedades del nuevo editor de Blogger y en el hay una nueva aplicación que me parece de lo mas interesante. El botón Definir/Traducir.

Si lo pulsamos nos encontramos con la posibilidad de encontrar definiciones de las palabras que usamos en nuestra entrada pero si pulsamos la pestaña Traducir tenemos la posibilidad de traducir todo el texto a otros idiomas.

Esta opción usa el traductor de Google para darnos el texto traducido.

Para los que pensamos que publicar en otros idiomas es muy importante, que las visitas con otros idiomas no suelen usar mucho las opciones de traducir, esta posibilidad es más que interesante aunque no sea perfecta por los errores de traducción de Google. Pero es un gran paso para empezar a editar en otros idiomas. Si queréis empezar a usarlo podéis aprovechar esta entrada para hacerlo.

Portugues

Acho que todos nós sabemos a notícia do editor novo Blogger em uma nova aplicação que eu acho mais interessante. O botão Definir / Traduzir.

Se clicarmos nós temos a possibilidade de encontrar definições das palavras que usamos em nosso caminho, mas se nós pressionamos a guia Traduzir somos capazes de traduzir todo o texto para outros idiomas.

Esta opção usa o tradutor do Google para dar-nos o texto traduzido.

Para aqueles que pensam que a publicação em outras línguas é muito importante, que as visitas a outras línguas não são geralmente utilizados para traduzir um monte de opções, esta opção só é interessante, mas não perfeito para erros de tradução do Google. Mas é uma ótima maneira de começar a editar em outras línguas. Se você quer começar a usá-lo você pode tomar essa entrada para fazê-lo.

English

I think we all know the news of the new editor of Blogger and there is a new application that I find most interesting. The button Define / Translate.

We have the possibility of finding words definitions we use in our post but if we press the Translate tab we are able to translate all text to other idiomas.

This option uses the Google translator to give us the translated text.

For those who think that publishing in other languages is very important, that visits from other countries don´t use translate options, this option is interesting but not perfect for Google translation errors. But is a great way to start editing in other languages.Ifi you want to start using it read this post

Nota. He dejado las traducciones literales, notareís los errores en ellas.

Google Chrome OS

noreply@blogger.com (Pizcos) — Thu, 19 Nov 2009 11:13:19 PST

Velocidad de carga, Google

noreply@blogger.com (Pizcos) — Thu, 19 Nov 2009 11:42:08 PST

Todos sabemos que la velocidad que tarda en cargar tu página es un factor importante a la hora de que tus visitas permanezcan más tiempo en tu blog. De hecho este ultimo cambio en mi blog ha tenido mucho que ver con ese factor (aun estoy reduciéndolo). Lo que no sabía es que es más que un posible nuevo factor a tener en cuenta para posicionamiento.

Ahora Google esta dando pasos para "obligarnos" a realizar paginas mas livianas, ya lo anuncio en Junio con "Vamos a hacer la web mas rápida" donde nos decía, entre otras cosas "...para optimizar la velocidad de aplicaciones web y navegar tan rápido como pasar las páginas de una revista, tenemos que trabajar juntos como comunidad, para hacer frente a algunos retos más grandes que hacen de la web aún un sitio lento y que obstaculizan así el uso de todo su potencial..."

También nos anuncio PageSpeed un Add-on de Firefox integrado con Firebug, una herramienta muy interesante para ayudarnos a que nuestras páginas sean más rápidas.

En Agosto nos anunciaban Caffeine (Sandbox2) "...una arquitectura de nueva generación para la búsqueda web de Google..." ¿Tendrá algo que ver?

Y este mes Matt Cutts anunciaba que dentro de Google había un fuerte grupo que se decantaba por insertar como otro factor más de posicionamiento la velocidad de carga de las páginas.

En definitiva Google empieza a mostrar lo que quiere, 2010 puede ser el año de introducción de este nuevo factor, no creo que sea un factor determinante para posicionamiento pero será bueno tenerlo en cuenta, sobre todo, nuestras visitas lo agradecerán.

Google Wave Aplicaciones

noreply@blogger.com (Pizcos) — Mon, 23 Nov 2009 01:36:17 PST

Llevo ya algunos días "jugando" con Google Wave y si he de ser sincero aun no me acaba de convencer. En la practica aun no tengo claro que uso diferente puede tener con respecto a otras aplicaciones web.

Aun no tengo claro todas sus posibilidades, el concepto de ola me parece interesante, pero crear tus propias olas no esta al alcance del común de los internautas.

Por otro lado lo veo muy lento, hasta ahora he mantenido algunas conversaciones a través de el y sus constantes conexiones hacen que te desesperes. Cada vez mas me parece un Gmail camuflado con algún otro adorno, toda la parte de contactos y chat es calcada.

Por supuesto que crear una ola con un grupo de contactos es interesante, para formar un grupo de trabajo es excelente, se mantiene las conversaciones y puedes añadir tus opiniones sin necesidad de estar todos conectados. Pero esto no me justifica el valor que Google quiere darle. Habrá que esperar algún tiempo más antes de valorarlo definitivamente.

He estado leyendo información sobre sus posibilidades, sobre los desarrollos ya existentes y los grupos creados para ello. La verdad es que por ahora tenemos lo típico de siempre, robots para Twitter, gadgets y poco mas. Pero además hay algunas aplicaciones interesantes para Google Wave.

Messy the Wave Robot, te permite añadir comunicaciones SMS a una ola.

Norton SafeWave, este robots te valida cualquier links que haya en un wave.

Embeddy, te proporciona el código para insertar una ola en tu blog.

Rssybot, te permite crear una ola de lector de feeds.

Existen también gadgets para incluir juegos, música, etc. Pero para mas información os dejo esta entrada de Gem@ Blog

Algo va mal en mi plantilla

noreply@blogger.com (Pizcos) — Mon, 23 Nov 2009 02:52:15 PST

Los navegadores que usamos sirven para algo más que navegar, sirven para darnos los errores que tenemos en nuestra plantilla. Son de lo mas útil para descubrir errores y saber porque un elemento, un script, un widget, etc. que estamos implementando no funciona.

Ya os hable de Firebug para Firefox, una herramienta muy útil, pero hoy vamos a ver algo mas sencillo, que no nos dará soluciones pero si nos indicara donde estamos fallando.

En las Barras de Herramientas de los distintos navegadores se nos muestran esos errores.

En IE esa barra se llama Barra de comandos, en Firefox, Barra de Herramientas de Web Developer.

Cuando instalamos o cambiamos algo en nuestra pantalla y le damos a vista previa es muy importante fijarnos en esos iconos, ellos nos indicaran si algo va mal.

Además si pulsamos sobre ellos nos dirán que es lo que no funciona. A la hora de implementar script son verdaderamente útiles. Nos evitaran andar buscando como locos que hemos hecho mal en la implementación, la mayoría de las veces nos indicara que ocurre con el.

Hay una cosa que si deberéis tener en cuenta, Blogger nos "inyecta" códigos que no podemos controlar plagados de errores y os aparecerán en esas barras.

No son herramientas definitivas para ayudarnos a realizar lo que queremos pero si son excelentes para indicarnos que algo va mal.

Cambio de color una imagen al pasar el raton

noreply@blogger.com (Pizcos) — Wed, 25 Nov 2009 02:07:36 PST

Ya son varios los que me habéis preguntado como se hace que las imágenes cambien de color al pasar el ratón sobre ellas. Ya lo explique anteriormente en esta entrada, pero quiero profundizar un poco mas para que quede claro el concepto usado, una vez entendido es muy fácil de implementar.

Todo se basa en la imagen

Realizamos una imagen como la que os muestro arriba y haciendo unos ajustes en nuestra hoja de estilos haremos que solo se vea una parte y al pasar el ratón sobre ella se vera solo la otra.

En nuestro CSS creamos una clase en la cual pondremos de background la imagen

.ejemplo { background: url(Url de la imagen) no-repeat ; }

Si nuestra imagen tiene unas dimensiones de 100 pixeles de alto por 50 pixeles de ancho, añadiremos el ancho y la mitad del alto

.ejemplo {
background: url(Url de la imagen) no-repeat ;
width: 50px;
height: 50px; }

Con esto mostramos solo la mitad superior de la imagen, ahora añadimos que al pasar el ratón sobre ella muestre solo la parte escondida

.ejemplo:hover {
background: url(Url de la imagen) 0px -50px no-repeat ; }

Ya solo nos quedara añadir un elemento HTML a nuestra plantilla

Si queremos poner un enlace colocaríamos

Espero que así se os haya quedado claro el concepto de lo que hacemos, es una sola imagen en la cual solo mostramos una parte y al pasar el ratón sobre ella mostramos la otra.

Twitter Trackbacks JQuery Backlinks de Twitter en tus entradas

noreply@blogger.com (Pizcos) — Wed, 25 Nov 2009 08:51:19 PST

More Tech Tips! ha realizado un plugin que nos permite mostrar en nuestras entradas todos los backlinks o trackbaks que se producen sobre ellas.

Podemos enseñarlos de tres modos diferentes.

Su implementación es muy fácil, debemos agregar antes de </body> (recordad que debéis tener ya la librería JQuery cargada en vuestro blog)

El CSS que nos permite darle nuestro estilo (aquí os expongo el que veis en las demos)

/* Estilo de la lista */
ul.ttw-inner{
border:silver 1px solid;
height:48px;
padding:4px;
overflow:hidden;
margin:0;
}
ul.ttw-inner li{
float:left;
margin:0;
list-style-type:none;
position:relative;
}
/* Imagen del autor */
ul.ttw-inner span.ttw-author-img{
display:block;
width:48px;
height:48px;
margin:0 5px 0 0;
overflow:hidden;
left:0;
position:absolute;
}
/* Nombre del autor */
ul.ttw-inner strong a{
margin-right:5px;
}
/* Contenedor del tweet */
ul.ttw-inner span.ttw-body {
display:block;
margin-left:55px;
}
/* Contenido del tweet */
ul.ttw-inner span.ttw-content{}

/* tweet meta : date, reply, retweet line */
ul.ttw-inner span.ttw-meta {
color:#999999;
display:block;
font-size:0.764em;
margin:3px 0 0;
}
ul.ttw-inner span.ttw-meta a{
color:#999999;
text-decoration:none;
}
ul.ttw-inner span.ttw-meta a:hover{
text-decoration:underline;
}
/* Estilo para los replies */
ul.ttw-inner a.ttw-reply { }
/* Estilo para los links de los retweet */
ul.ttw-inner a.ttw-retweet { }
/* Estilo para los enlaces */
ul.ttw-inner a.ttw-link { }
/* Estilo para los links de usuarios @user */
ul.ttw-inner a.ttw-at { }
/* Estilo para los enlaces #hashtags */
ul.ttw-inner a.ttw-hashtag { }

/* Estilo para los tweets de los usuarios con influencia */
li.ttw-inf-0{}
/* ...... */
li.ttw-inf-10{}

/* Estilo para las imageness de los niveles de influencia */
li.ttw-inf-0 img{}
/* ...... */
li.ttw-inf-10 img{}

/* Estilo para los nombres de los niveles de influencia */
li.ttw-inf-0 strong{}
/* ...... */
li.ttw-inf-10 strong{}

Mostrar ejemplos externos en tu blog JQuery

noreply@blogger.com (Pizcos) — Fri, 27 Nov 2009 14:16:02 PST

Vile Works nos enseña como mostrar ejemplos o demos en nuestro blog con un inFrame. No soy partidario de ellos pero este caso es diferente, usando JQuery solo es necesario añadir una clase al enlace de la página con el ejemplo. Eso no es perjudicial para la página en cuestión si hablamos de posicionamiento. Respeta el enlace como tal.

La forma de implementarlo es muy sencilla, añadimos antes de </body> (ya sabéis que debéis tener implementada la librería JQuery)

Para usarlo solo debemos añadir a cualquier enlace la clase inframe

<a class="inframe" href="URL ENLACE A LA PAGINA">NOMBRE DEL ENLACE</a>

Pincha y arrastra para compartir. Drag and Drop Share

noreply@blogger.com (Pizcos) — Fri, 27 Nov 2009 16:02:18 PST

Ahora esta muy de moda poner marcadores sociales para ofrecer a nuestras visitas la posibilidad de compartir nuestras entradas. Yo soy de la opinión que hay que facilitar mucho esa labor, sino no funcionara.

Webs como Mashable o Abduzeedo han implementado un sistema que al pasar sobre una imagen, podemos pincharla y arrástrala hacia unos marcadores sociales que aparecen para facilitar la labor. Ellos usan un sistema llamado Meebo, que no esta disponible para el común de los blogueros.

En Nettust+ nos enseñan como hacerlo con JQuery. He modificado el CSS, el script para adaptarlo a nuestras entradas y añadido algunos marcadores sociales más hispanos.

Su implementación no es nada difícil, para ello debéis añadir antes de </body>

Debeis guardar esta imagen, subirla a un alojamiento y colocar su URL donde pone URL ALOJAMIENTO DE LA IMAGEN.

Guardamos los cambios, vamos a añadir un elemento HTML a nuestra plantilla y pegamos

Solo os quedara que vuestras visitas disfruten las facilidades para compartir.

¿Porque no lo probáis moviendo esta entrada?

Widgets Blogger

noreply@blogger.com (Pizcos) — Sun, 29 Nov 2009 02:14:08 PST

RadarUrl estadísticas para tu blog.

D-Modules nuevo sistema de comentarios.

Psolenoid nuevo concepto de compartir entradas.

Embedit.In te permite subir cualquier documento a tu blog.

BloggyBits muestra tu actividad en las redes sociales.

Boton de compartir en Orkut

noreply@blogger.com (Pizcos) — Mon, 30 Nov 2009 04:52:24 PST

Orkut ha liberado su API, permitiéndonos insertar un botón de compartir en nuestras entradas. Para implementarlo solo debemos añadir donde tengamos los demás botones de compartir en nuestro blog.

<<div id="orkut-button"></div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('orkut.share', '1');
google.setOnLoadCallback(function() {
new google.orkut.share.Button({ style:google.orkut.share.Button.STYLE_MINI,
lang: 'es',
summary: 'So much to see here.'
}).draw('orkut-button');
});
</script>

Donde ponemos lang: 'es', elegimos el idioma, para Portugués sería lang: 'pt_BR', por ejemplo.