Cargando...
Menu Ver sumario
¿Te gustó lo que viste?
Recomiéndanos

Post aleatorio






Utilidades para cambiar las imágenes del nuevo perfil Facebook.

31/01/2011
Ya decíamos que todo es empezar y que a cada nuevo cambio, le suceden nuevas oportunidades... y nuevos oportunistas. Y léase oportunista sin ánimo peyorativo, sino simplemente como alguien que aprovecha las oportunidades.

Es el caso del nuevo perfil de Facebook, que incluye en lugar destacado, las últimas imágenes en las que hemos sido etiquetados y que da pie para que cada uno libere su parte más creativa. Si bien hay manera de hacer esto manualmente, lo cierto es que las aplicaciones y ulilidades que han surgido, simplifican bastante la tarea.

Esta es la relación de las que he podido ver hasta la fecha. Si conocéis más, la vamos ampliando, aunque creo que hay de sobra. Las hay hasta que permiten formar en un álbum una gran imagena a modo de collage (Photo Magic).

Aplicaciones a las que hay conceder permisos:


Utilidades online (no requieren concesión de permisos):


Y para los que necesitan inspiración, en los siguientes enlaces podéis encontrar unas cuantas ideas recopiladas por Mashable:


Recordamos que esto no sirve para las páginas, ya que no existen este tipo de imágenes en la cabecera.

También, que una vez estén las imágenes a vuestro gusto, podéis daros de baja de la aplicación a la que hayáis podido dar permiso sin problemas. Ellas sólo las montan, recortan adecuadamente y las suben, pero ahí termina su utilidad. Este enlace debería ir directamente a la sección correspondiente para eliminar aplicaciones, pero como Facebook a veces es complicado de enlazar, también podéis hacerlo siguiendo esta ruta:

Cuenta ► Configuración de la privacidad ► Aplicaciones y sitios web ► Edita tu configuración ► Aplicaciones que utilizas ► Edita tu configuración ► Eliminar

De paso, podéis aprovechar para dar un repaso a todas esas aplicaciones que habéis ido añadiendo y que posiblemente ya no utilizáis ;)


PageRank. PR 10. Alertas sobre cambios.

29/01/2011
PageRank es una marca registrada y patentada por Google el 9 de enero de 1999, que ampara una familia de algoritmos utilizados para asignar de forma numérica la relevancia de los documentos (o páginas web) indexados por un motor de búsqueda. (...) El sistema PageRank es utilizado por el popular motor de búsqueda Google para ayudarle a determinar la importancia o relevancia de una página. (Wikipedia)

Sin entrar en mucho detalle, el PageRank intenta reflejar la popularidad o importancia de una página mediante un sistema de puntos. A mayor número de puntos acumulado, mayor PR.

Los puntos son adjudicados en función de los enlaces que apuntan a esa página, de manera que a más enlaces, más puntos. Sin embargo, no todos los enlaces suman igual; una página que tiene una mayor relevancia, aporta más puntos con su enlace que otra que tiene menos PR. Incluso puede aportar más que muchas de menos relevancia juntas.

Esto suena algo enigmático porque en realidad es así. La fórmula exacta del PR es para Google como la de la Coca-Cola para esta otra marca.

Siempre que no se hagan trampas (yo te enlazo, tú me enlazas...) parece una forma bastante democrática de valorar la relevancia de un sitio. Si tienes muchos enlaces entrantes (desde otras páginas) es que presuntamente tienes información interesante en tu página y parece acertado pensar que es más relevante que otras con menos. Si además, los que generan esos enlaces son a su vez sitios relevantes, lo tuyo ya debe ser un bombazo de sitio.

El PageRank puede tomar un valor entre 0 y 10, pero este último, prácticamente está reservado para los dioses. En esta fuente se citan las entidades que en la última actualizacion de Enero 2011 lo tenían:

  1. Google Search http://www.google.com/
  2. World Wide Web Consortium http://www.w3.org/
  3. US Goverment website http://www.usa.gov/
  4. Adobe - Adobe Reader Download http://get.adobe.com/reader/
  5. National Portal of India http://india.gov.in/
  6. United States Department of Health and Human Services http://www.dhhs.gov
  7. The Central People's Government of the People's Republic of China http://www.gov.cn/
  8. Miibeian http://www.miibeian.gov.cn/
  9. Adobe - Adobe Flash Player http://get.adobe.com/flashplayer/
  10. The White House http://www.whitehouse.gov/
  11. Facebook http://www.facebook.com/
  12. Social Bookmarking Sharing Button Widget http://www.addthis.com/bookmark.php
  13. CNN.com - Breaking News, U.S., World, Weather, Entertainment & Video News http://us.cnn.com/
  14. Europeana http://www.europeana.eu/portal/
  15. EUA - European University Association http://www.eua.be/
  16. Recovery.gov - Tracking the Money http://www.recovery.gov/
  17. Joomla http://www.joomla.org/

Si te interesa conocer tu PageRank, así como sus cambios (se actualiza cada cierto tiempo en un periodo que se denomina Google Dance) PageRank Alert es un servicio online, gratuito y en español, que hace eso y alguna otra cosa más.

Recientemente ha sido remozado y actualizado. Se puede utilizar sin registro, pero con él, el sistema se ocupa de enviarte un aviso a tu correo cada vez que hay un cambio en tu web. También pemite hacer listas de páginas o comprobar tu historial de PR a lo largo del tiempo.


Los libros ya están en el horno

27/01/2011
Sólo un pequeño recordatorio sobre nuestro primer y único sorteo celebrado hasta la fecha, que está próximo a su fin (31-Enero).


Para participar en el sorteo de cuatro lotes de dos libros cada uno, sólo tenéis que estar atentos a las publicaciones en nuestra cuenta de Facebook entre los días 12 y 31 de Enero, para poder conseguir las pistas con las que tendréis que encontrar el nombre de los autores de los dos títulos que entran en los lotes.

Por favor, que nadie tenga la feliz idea de publicar las respuestas aquí. En las bases ya se especifica una dirección de correo para poder enviarlas... ¿Quieres participar?

Más información: Sorteamos cuatro pares de Books por la Face.


Paletas de colores. Herramientas e inspiración.

26/01/2011
Todo tiene su importancia, pero entre las cosas que más marcan la primera ojeada a una web, posiblemente podamos destacar la gama de colores usada en su diseño. Como con las personas que vamos conociendo a lo largo de nuestra vida, la primera impresión cuenta... y mucho.


Siguiendo con el símil humano, los primeros instantes de contacto con un blog pueden ser determinantes para nuestra futura relación con el sitio. Por ejemplo, unos colores demasiado estridentes, pueden ser motivo suficiente como para no intentar siquiera leer el primer párrafo tras el título. De la misma manera, una tipografía no contrastada adecuadamente con el fondo, puede hacer insufrible la lectura de un posiblemente estupendo post.

Repito una vez más antes de continuar, que ni tengo una cátedra en diseño, ni tengo ningún conocimiento especial distinto del de cualquier otro común mortal. Por tanto, lo que opino nunca es dogma de fe y no se le debe dar más importancia que la que tendría una simple conversación entre amigos en una cafetería. Gurús ya hay muchos. No obstante creo que hay cosas que son de sentido común. Así que continúo con mis opiniones.

No sé si alguno pensó en ello cuando comenzó con su blog (lo de los colores; volvemos al tema), pero un servidor confiesa que no se lo planteó en un principio. Ahora tampoco es que haya una armonía perfecta, pero más o menos con los múltiples retoques que le he ido añadiendo, creo que se puede apreciar que hay una gama bastante limitada de colores ¿O no veis aquí a la derecha todos los que se utilizan en este sitio? Bueno... más o menos, porque las texturas engañan un poco y dan la impresión de que hay más colores de los que realmente se utilizan.

Yendo al extremo, incluso podría simplificar ese cuadro y convertir las tres barras más a la derecha en una sola con tono gris. Hablando sinceramente, es lo que me pedía el cuerpo al crear esa imagen, pero es que soy hombre y el tema de distinguir toda la gama de colores, ya se sabe que no es lo nuestro :)

Pues esa es la cosa. Al margen de otras consideraciones, la identidad de un sitio se logra a corto plazo con su colorido. Lo recomendable, siempre generalizando, sería una paleta de colores(1) corta: 2, 3 o como mucho 4 colores, que produzcan al menos el 80% del impacto visual de la web. Si hay que usar más, que sea para detalles, intentando que su número se reduzca al mínimo posible.

A pesar de ser algo grunge, he hecho un esfuerzo minimalista y he intentado extractar las paletas de colores que usan algunos blogs conocidos. Es difícil reconocerlos porque son colores de uso habitual, pero la etiqueta de la imagen revela el nombre y si tenéis la curiosidad de comprobar que efectivamente son ellos, pues sólo tenéis que pinchar para verlos en directo.

Pizcos Blog Vagabundia

Gem@ Blog Genbeta

Microsiervos Google. Vale, he hecho trampa. Este no es un blog y además sus páginas no se distinguen precisamente por su colorido...

Aparte de que en esta muestra (no representativa) se pueda comprobar que el blanco es un color predominante, creo que en la retina de todos está que esto actualmente es así. Particularmente no me agrada la uniformidad en el diseño de los blogs, porque la navegación me resulta visualmente hablando muy insípida. A veces, no sé si estoy en la misma web o en otra. Con el dospuntocerismo y otras modernidades, los blogs más 'in' se parecen un güebo, así que si queréis hacerme un favor personal, sed creativos... sin pasaros.



Y para ello, lo último que vamos a ver son unos sitios que nos pueden ayudar a escoger nuestra paleta, sin necesidad de hacer un gran esfuerzo imaginativo.

Los dos primeros son muy similares y nos permiten seleccionar un color base, a partir del cual, una aplicación nos mostrará automáticamente una serie de combinaciones teóricamente agradables. A continuación se pueden seleccionar esquemas como monocromía (mismo color con distintas saturaciones y brillos), contraste (colores opuestos), contraste suave, colores seguros (web) y otras variaciones diversas.

Aunque el primero resulta visualmente más atractivo (¿Veis? Lo que iba diciendo...), el segundo tiene la principal ventaja de estar en español.

Color Scheme Designer

Paleta de colores

El tercer sitio es algo distinto, ya que lo que nos ofrece es directamente paletas completas, ya combinadas y listas para usar. Sólo habría que bajar la imagen y con nuestro editor, anotar los colores que nos muestra la herramienta cuentagotas. Para que, una vez más, no tengamos que quemar neuronas, el autor del blog ha incorporado a cada set de colores una imagen ilustrativa de cómo queda más o menos la combinación.


Podéis visitar y manejar un poco las tres para haceros una idea. Luego ya escogéis la que os resulte más útil, porque para gustos...

(1) Paleta de colores: esquema, juego o colección de colores.


Preguntas frecuentes. Cosas sencillas en Blogger.

23/01/2011
Preguntas de novatos hechas en distintos comentarios por aquí y por allá. Para los no tanto pasar directamente a las cuestiones 3 y 4 por si fueran de interés.

¿DÓNDE VA EL ESTILO (CSS) Y DÓNDE EL HTML?

En Blogger, cada vez que leais que algo lo teneis que poner en la parte CSS o que el código que intentais insertar es de este tipo, su ubicación correcta es entre las etiquetas <b:skin><![CDATA[/* y ]]></b:skin>

Aunque es indiferente, lo normal es insertarlo justo antes de la última citada, para así poder localizar rápidamente, aquellas modificaciones que hayamos introducido nosotros en el código original de la plantilla.

Mediante la etiqueta <style> podemos introducir CSS en la parte HTML, pero esto está desaconsejado y sólo deberíais utilizarlo esporádicamente.

<div style="width:100px;height:20px;border:1px solid #00000;padding:10px;text-align:center;font-weight:bold;">Hola ¿Qué tal?</div>

El HTML va entre <body> y </body>. En este caso sí es importante su ubicación, ya que HTML se interpreta en el mismo orden que se redacta. Esto quiere decir que lo que pongamos en primer lugar saldrá por encima de lo siguiente. Hay formas para que esto se pueda alterar, pero esa es otra historia.

Por último, los scripts que querais alojar en la propia plantilla, en un principio deberían ir entre <head> y </head>, aunque por supuesto, también hay excepciones.


OBTENER DIRECCION IMAGENES PICASA

Una vez que accedes a tus álbumes y pinchas en la miniatura que necesitas, verás la imagen completa. Ahora, con el botón derecho del ratón, escoges "Copiar la ruta de la imagen".

Otra forma es buscando en la barra lateral de Picasa, el texto  "Enlace a esta foto". Seleccionamos únicamente la opción "Sólo imagen (no enlace)" y en "Incrustar imagen", nos aparece la URL de la misma.


ESCONDER ELEMENTOS SIN ELIMINARLOS

La forma más fácil es agregar una clase especial a ese elemento y luego con CSS hacerlo no visible. En cualquier momento podemos cambiar las propiedades de la clase para hacerlos visible de nuevo.

Supongamos que tenemos dos DIV que muestran un texto y que sólo queremos mostrar uno u otro, intercambiándolos cada cierto tiempo. No queremos borrarlos pues ambos son largos y no queremos estar redactándolos de nuevo cada vez. En un principio, los colocamos así y saldrían los dos a la vez, uno tras otro.

<div>Este es un texto simple que sale allí dónde se coloque pero incompatible con el de abajo.</div><div>Este otro sale en la misma parte del blog, pero cuando no está el anterior.</div>

Este es un texto simple que sale allí dónde se coloque pero incompatible con el de abajo.
Este otro sale en la misma parte del blog, pero cuando no está el anterior.

Ahora creamos nuestra clase y la insertamos en nuestra parte CSS. Esto sólo hay que hacerlo una vez porque quedará como parte de nuestra plantilla. La llamaremos invisible (no soy nada original bautizando, no). Sus propiedades deberían ser las siguientes:

.invisible {
display:none;
height:0px;
width:0px;
}


Ahora sólo tenemos que añadir dicha clase a la frase que no queremos que se vea. Más adelante, podremos quitarla y añadirla a la otra frase para sea esta la invisible.

<div class="invisible" >Este es un texto simple que sale allí dónde se coloque pero incompatible con el de abajo.</div><div>Este otro sale en la misma parte del blog, pero cuando no está el anterior.</div>

Este otro sale en la misma parte del blog, pero cuando no está el anterior.

El ejemplo es con una frase, pero vale igual para códigos más complejos, scripts, imágenes, vídeos, etc. Y ojo con lo que escondeis, que aunque accediendo a la página en forma normal, ese contenido no se verá, echando un vistazo al código fuente todo quedará al descubierto sin problemas.


ESCONDER ELEMENTOS PARA TODOS EXCEPTO PARA EL ADMINISTRADOR

Aprovechando una clase controlada por el propio Blogger, podemos esconder cualquier cosa de manera que nadie la vea salvo nosotros, los administradores del blog. La clase es item-control blog-admin y sólo hay que añadirla a cualquier capa para que tenga dichas características.

<div class="item-control blog-admin">Hola. ¿Qué tal?</div>

Seleccionar el interior de este recuadro ► botón derecho ► Ver código fuente seleccionado, para ver que hay escondido en este recuadro que tiene esa clase y que por tanto, sólo puedo ver yo en modo normal.

EL DINERO NO HACE LA FELICIDAD, PERO ES MEJOR LLORAR EN UN FERRARI.

Al igual que antes, esta clase no sirve para guardar secretos. Tanto si la utilizais en la plantilla como en un post, viendo el código fuente saldrá a la luz sin problemas.

Es una buena idea usarla para cosas que nosotros necesitamos pero que podrían molestar la estética de nuestro sitio. O bien para contenido irrelevante para los lectores pero útil para nosotros. Por ejemplo: un contador, una gráfica de estadísticas, un botón de ping, enlaces a los servicios que más utilizamos, a nuestro hosting de imágenes, de scripts, etc.


El pájaro para twittear en un gadget. Solucionando problemas.

19/01/2011
Uno publica muchas cosas y casi siempre ocurre lo mismo: lo más inesperado, que además suele ser lo más sencillo, casi siempre es lo que tiene más éxito. Eso mismo fue lo que ocurrió con la entrada Más vale pájaro volando que ciento..., que cuenta con un montón de votos, comentarios, enlaces y por supuesto, tweets. Bueno, como dice Pizcos, "Menos es más" y va a ser eso.

Sin embargo las entradas más populares también son las que dan lugar a más dudas. Mucho habéis preguntado sobre este cacharrito y algunos incluso no han podido todavía solventar del todo sus problemas. Cómo decía al principio, el código de este script es muy sencillo de instalar y me cuesta explicarlo de una manera mejor de la que lo hice. Así que como dice el refrán, si no puedes con tu enemigo, únete a él. Y eso haremos, movernos nosotros para hacer las cosas más fáciles, tal y como reza el subtítulo de este blog (BPT).

He estado investigando una solución para que no sea necesario poner los condicionales (problemáticos para unos) y que el pajarraco se pueda meter directamente en un gadget en lugar de en la plantilla (complicado para otros). Y tras varias pruebas, la solución estaba delante de mis narices, en el propio código del script original redactado por el autor.

En él existe una comprobación previa para la variable tweetThisText (la que incluía un texto y la URL de la entrada → Leyendo: <data:post.url/>), que controla si llega al script con contenido o vacía. En este último caso, lo que hace es enviar el título de la página y la dirección, lo cual nos sirve perfectamente para lo que queremos. En Blogger sería el equivalente a data:post.title+" "+data:post.url.

Así que la solución es simplemente quitar la línea que le daba valor, que era esta:
var tweetThisText = &quot;Leyendo: <data:post.url/>&quot;;

O, modificarla para dejarla vacía:
var tweetThisText = &quot;&quot;;

El pájaro de esta entrada está ya montado de esta manera, por lo que podéis probar a ver lo que sale al pinchar en sus enlaces. El único inconveniente es que perdemos el texto libre que antes sí podíamos introducir, pero a efectos de Twitter, hace lo que tiene que hacer. Si alguien quiere de todas formas incluir un texto adicional, sólo tiene que modificar en el script original, la segunda línea tras los comentarios que forman los créditos.

Para todos los demás y sobre todo para los que con la otra entrada teníais problemas, a continuación el código ya modificado y preparado para incluir directamente en un gadget, siguiendo el camino habitual: Elementos de Página ►  Añadir gadget  ► HTML/JavaScript.

<script src="http://oloblogger.googlecode.com/files/tripleflap.js" type="text/javascript"></script>
<script type="text/javascript">
var birdSprite='http://oloblogger.googlecode.com/files/birdsprite.png';
var targetElems=new Array('img','hr','table','td','div','input','textarea','button','select','ul','ol','li','h1','h2','h3','h4','p','code','object','a','b','strong','span');
var twitterAccount = 'http://twitter.com/oloman';
var twitterThisText ='';
tripleflapInit();
</script>

Si tenéis cuenta en Twitter, no olvidéis cambiar el nombre de usuario (en verde) por el vuestro.


Y una cosita más. Ante la molestia que suponía la aparición de unos puntitos extraños a la derecha del pájaro twittero cuando se paraba, he modificado la imagen para que ya no salgan. Como la he alojado en la misma dirección, los que la usabais desde allí no tenéis que hacer nada. Los demás la podéis descargar para actualizar la vuestra.


Spam. Cómo no meter la pata.

17/01/2011
¿Alguna vez os han borrado un mensaje sin que supierais el porqué? ¿Alguien os ha dicho que sois unos spammers? ¿Os han baneado (echado) de un foro sin haber hecho nada malo? Si es así, es posible que aunque no lo sepas, hayas hecho SPAM.

Según la santa enciclopedia de la Red (Wikipedia):

Se llama spam, correo basura o mensaje basura a los mensajes no solicitados, no deseados o de remitente no conocido, habitualmente de tipo publicitario, enviados en grandes cantidades (incluso masivas) que perjudican de alguna o varias maneras al receptor. La acción de enviar dichos mensajes se denomina spamming.

Inicialmente, el término spam se utilizaba sólo para todos esos mensajes publicitarios que nos meten a punta pala en nuestro correo: "Viagra", "Meninas da Playboy", "Se necesita respuesta urgente", "Conoce la nueva guía...", "65% de descuento", etc. etc. etc... Pero actualmente, el concepto se ha ampliado y aunque no soy experto en definiciones, me atrevería a decir que para muchos, es todo contenido que se remite fuera de contexto, con una intención de notoriedad.

Con la expansión de la Web 2.0, hoy día existen muchas rutinas informáticas tipo spider o araña web, que se dedican a recopilar direcciones no sólo de correo, sino también de otros sitios que permiten interacción con los usuarios: blogs, foros, chats, wikis y por supuesto, redes sociales como Hi5, Menéame, Tuenti, Facebook o Twitter, por citar sólo algunas. Una vez hecha la lista -constantemente en ampliación- es fácil enviar contenido no deseado a sus componentes.

Pero si bien el spam viene casi siempre asociado a sistemas automáticos, también se puede hacer -aunque con más trabajo- de manera manual. Y aquí es dónde quiero llamar vuestra atención para que no metáis la pata sin querer.

Cuando se crea un sitio web nuevo, es muy habitual que la primera misión que nos auto-encomendemos sea la de conseguir lectores. ¿Y cual es la forma más fácil de darnos a conocer para conseguir esto? Pues sembrar la red de nuestra URL. Craso error. Eso es spam. Poneros en el lugar del que recibe un mensaje de alguien que no conoce y que no aporta nada al receptor salvo una dirección de un blog que, probablemente, verse sobre un tema que no le interesa en absoluto. Pues eso, ignorar o borrar y a otra cosa.

Usando otro símil, es como si fuerais por la calle y a todo el que os cruzarais le dijerais: "¡Eh! Soy Pepe ¿Me conoces? Pues pásate por mi casa, calle del Pez 42 quinta planta..." Absurdo ¿no?

No sé si hay datos que avalen que la publicidad no deseada tiene alguna eficacia, pero mi opinión es que no sirve para nada. Creo que nunca he visto ningún enlace a los que apunte alguna cosa que me hayan hecho llegar de esta manera. Pues lo mismo para vuestros sitios. Es improbable que alguien abra vuestro link sólo porque se lo pongáis delante de las narices.

¿Relacionarse con otros intenautas? Sí ¿Abusar? No

La relación y retroalimentación es uno de los pilares del 2.0. No hay inconveniente en comentar algo en algún sitio, pero evidentemente, tiene que tener relación con lo que allí se está hablando. Así, si por ejemplo comentas en la entrada de un blog que se titula "La grandeza del águila imperial", algo así como "Lindo blog. ¿Has visto chicascachondas.net?", las posibilidades de que te borren tienden a infinito.

Se puede intentar ser más fino y comentar con sentido pero sin olvidar meter una cuña publicitaria con la dirección de tu sitio y/o unas palabras sobre su contenido. Las posibilidades de borrado disminuyen, pero tampoco mucho.

Los nicks de los comentaristas suelen incluir enlaces a sus perfiles públicos que a su vez, suelen tener una relación de sitios de esa persona. Ten por seguro que si quiero ver de dónde vienes o qué haces, voy a pinchar en ese enlace. No es necesario que pongas tu firma en todos tus comentarios.

Y sobre cómo relacionarte adecuadamente con otros sitios, no soy el más adecuado para dar consejos, porque posiblemente sea el contra-ejemplo de relación social en Internet, a pesar de que últimamente estoy quizás en un proceso de mayor apertura. Pero simplemente te sugeriría que visites los sitios que te aportan algo y sólo cuando tengas algo que aportar tú, lo hagas. Aunque sea una simple felicitación por el contenido o un "Es lo mismo que pienso yo". Todo es relación, como en una conversación en vivo y en directo con cualquier otra persona.

La mejor promoción de tu sitio es que su contenido me interese. Seguro que te encontraré cuando lo necesite.


Bonus: Una curiosidad sobre el origen del término spam, un vídeo acreditativo y unos pequeños consejos para evitar el spam en el correo electrónico.


Efecto cinta adhesiva en imágenes

14/01/2011
En alguna ocasión he intentado hacer esto de una manera más simple, pero lo cierto es que no lo he logrado. Unas veces no funcionaba en un navegador, otras en el otro, otras requería un ancho de imagen fijo... De momento es una chapucilla, pero puede que a alguien en la que estoy pensando, le sea suficiente ;)

La cosa va de colocar una cinta adhesiva (fixo, celo, scoth tape o como quiera que le llameis vosotros) en la parte superior de las imágenes que queramos. Evidentemente será con una clase CSS, para que podamos variar o incluso suprimir el efecto masivamente, con sólo cambiar las propiedades de la correspondiente clase. La principal ventaja es evitar tener que estar usando programas de edición para cada imagen que publicamos.




El truco principal consiste en la creación de una capa con un alto y ancho igual al de la imagen (cinta adhesiva) que solaparemos gracias a un z-index y que generaremos con un span. Para que quede dónde nos interesa, metemos todo dentro de otra capa (efectoimg) con posicionamiento relativo y que nos servirá para poder dar propiedades independientes a dicho span y a la propia imagen.

Pero más fácil es verlo que explicarlo, así que comenzamos con el estilo, insertándolo en la plantilla. En Blogger, como es habitual, habrá que ponerlo antes de ]]></b:skin>. En las líneas más importantes se incluyen comentarios que podeis borrar sin problemas.

/* IMAGENES SUPERPUESTAS */
.efectoimg {
margin: 20px 10px auto; /* separación entre imágenes */
position: relative;
float:left; /* para poder colocar varias imágenes inline */
}
.efectoimg img {
/* simulando marco fotografía */
background: #fff;
border: solid 1px #ccc;
padding: 4px;
}
.efectoimg span {
/* capa con la imagen superpuesta */
width: 77px; /* dimensiones de la imagen del background */
height: 27px;
display: block;
position: absolute;
top:-12px; /* desplazamiento vertical */
left:50%; /* centrado horizontal */
margin-left:-38px; /* la mitad del width para centrar del todo */
background: url(http://img214.imageshack.us/img214/2161/cinta.png) no-repeat;
z-index:1;
}
.efectoimg a {
text-decoration: none; /* eliminando subrayado enlaces */
}

Todo lo marcado en verde es configurable, aunque la parte de .efectoimg span tiene que ajustarse necesariamente al tamaño de la imagen que pongamos en el background.

Una vez que todo esto está en nuestra plantilla, ya sólo falta aplicarlo a la imagen correspondiente:

<div class="efectoimg">
<a href="url_enlace"><span></span><img alt="Imagen" src="url_imagen" /></a>
</div>

Como podeis ver, al codigo normal de una imagen con enlace, sólo le hemos añadido para poder conseguir el efecto, un div con la clase efectoimg y un span sin contenido. Las propiedades de ese span con ancho y alto determinado, así como la imagen de su fondo, serán la que conviertan ese span en lo que queremos.

Os recuerdo que esta imagen de cinta adhesiva puede ser cambiada por otra cualquiera que vuestra imaginación decida. Si como en este caso, tiene que tener transparencia, el formato siempre será PNG. Para cualquier otro tipo de motivo, dará igual usar un GIF o un JPG.

Truco conseguido gracias a la idea de Webdesignerwall.


Sorteamos cuatro pares de Books por la Face

11/01/2011
Bueno, parece que ha llegado el momento de regalar a nuestros estimados lectores algo más material que simples códigos. Por ello y sin más preámbulo, procedemos a abrir el I Sorteo Oloblogger...

Books por la Face


Los premios serán cuatro lotes de dos libros, incluyendo cada lote, un tecno-thriller (valga el palabro) y otra obra relacionada con la web 2.0 y en especial con las redes sociales. Para que a este que suscribe, además de tiempo no le cueste dinero el asunto, contamos como patrocinador con Ediciones Urano, un grupo editorial con una larga trayectoria en el sector, que además de proporcionar los libros, los enviará directamente al domicilio de los cuatro agraciados.


El mecanismo para poder participar es fácil, pero como creo que no debe haber recompensa sin esfuerzo, vamos a hacer que trabajéis un poquito... pero no demasiado ;)

1. Entre hoy y el 31 de Enero de 2011, publicaremos en fechas aleatorias, sin concretar a priori y en nuestra página Facebook, dos estados relacionados con el sorteo. En cada uno de ellos aparecerá la referencia "Ediciones Urano" y una pista sobre el título de uno de los dos libros. Serán dos días distintos, a razón de un título cada día.

2. Tan pronto consigáis los títulos de los dos libros, tendréis que averiguar cuáles son sus respectivos autores. Como requisito adicional para poder participar en el sorteo final y para evitar en lo posible la picaresca de utilizar varias cuentas de correo, será imprescindible hacerse seguidor de la página Facebook de Umbriel Editores. Una vez hecho, tenéis que enviar los nombres de los autores más el nick Facebook con el que os disteis de alta en la página de Umbriel, a la dirección de correo...


Ojo. Pedimos hacerse fan de Umbriel y enviar un correo con los nombres de los autores y vuestro nick de Facebook para identificaros. Que nadie se despiste con el nombre de los libros, ya que estos, además de ser el premio, sólo servirán para encontrar a los escritores. Vuestro nick en Facebook nos será útil también para ponernos en contacto con vosotros a través de vuestro muro, si fuera necesario.

* En la primera semana de Febrero desvelaremos para general conocimiento, los títulos que entran en los lotes, los nombres de sus correspondientes autores y la lista de aquellos participantes que cumplieron de manera completa y acertada con todos los requisitos del punto 2. A todos ellos se les asignará un número secuencial según el orden de recepción de correos, comenzando por el cero.

* El día 12 de Febrero, el primer premiado será aquel cuyo número coincida con la terminación del sorteo del cupón ONCE de ese mismo día. A partir de ese primer número se irá sumando 37 de manera circular (volviendo al 0 tras llegar al último) hasta adjudicar los cuatro premios. Según el número de participantes totales, se considerará como 'terminación' los dos últimos números (hasta 100 participantes), los tres últimos (hasta 1000), los cuatro últimos (ya quisiéramos)... etc.

Ejemplo: 80 participantes con números 0 a 79 y terminación ONCE=47 (dos últimos números).

Obtendrían premio los que tuvieran los números 47, (47+37=84, desierto), 21 (84+37=121), 58, (95, desierto) y 32 (132). Y lo siento pero para el siguiente que sería el 69 en este ejemplo, no llegarían los lotes. Así que en el 32 terminamos la adjudicación con cuatro premios concedidos.

Una vez publicados los correspondientes posts con la lista de participantes y el de los ganadores, no conservaremos ningún dato de los que recibamos por correo. Bastante trajín nos llevará esto como para estar luego creando una base de datos para hacer spam.

Para cualquier incidencia, imprevisto o interpretación, se estará a lo que disponga el único juez y arbitro de este tinglado. O sea, un servidor, con su absoluta y presunta buena fe que le otorga el carácter absolutamente no oneroso de la iniciativa.

FAQ
  • ¿Puedo participar si no vivo en España? Por cuestión de logística y supongo, de costes, los premios sólo incluyen envíos a Perú, México, Colombia, Argentina, Chile y Venezuela, aparte de España, claro. Siento no poder incluir a todos.
  • ¿Pero qué libros se sortean exactamente? Los títulos son un dato a descubrir, pero la temática de ambos está elegida ex profeso para que guarde relación con el contenido de este blog, que presuntamente os interesa si andais por aquí.
    • o
  • ¿Tengo que hacerme seguidor de la editorial patrocinadora? Evidentemente, sí. "Quid pro quo", que diría nuestro amigo Hannibal.
  • ¿Por qué no usar un sistema de sorteo online? Porque este método me parece mucho más transparente y porque no tengo ni idea de cómo hacerlo online sin problemas.
  • ¿Y por qué sumar precisamente 37? Pues porque es indiferente si está elegido aleatoriamente a priori, porque se me ha antojado ese número y sobre todo, porque es primo.
  • ¿Qué demonios es un Book? Posiblemente la pregunta que todos os haréis. Pues lo último en tecnología. En el enlace se explica perfectamente.


Grandes imágenes en pequeños espacios

10/01/2011
Lo he visto ya en varios sitios (wwwhatsnew, Blogtecnia) y por eso me costaba incluirlo en una nueva entrada, pero lo cierto es que cada vez que me encuentro con un nuevo enlace en el que lo citan, me parece tan sencillo y tan práctico, que finalmente he sucumbido al deseo de mostraros este servicio. Además, puede que todavía algunos no lo conozcáis.


BigImg es una web en la que podréis conseguir en línea, el código necesario para mostrar una imagen muy grande en un espacio limitado. El código facilita la posibilidad de hacer zoom en ella, así como poder centrar la parte que queramos ver en detalle. Hay una utilidad más, bastante útil, pero la revelamos al final de la entrada para haceros sufrir un poco.

De momento, mejor veis cómo funciona. Primero un click en la imagen y luego ya podéis ampliar o reducir la imagen con la rueda del ratón. Para desplazaros en las dos dimensiones del plano, simplemente moved el puntero. Para salir, otro click.


M1: The Crab Nebula from Hubble
Image Credit: NASA, ESA, J. Hester, A. Loll (ASU)
Acknowledgement: Davide De Martin (Skyfactory)

Para un rendimiento óptimo, la imagen tiene que tener una muy buena resolución para no perder definición en las ampliaciones más grandes.

Tutorial

En primer lugar, la imagen tiene que estar ya alojada en cualquiera de los servicios que habitualmente uséis. La dirección hay que copiarla en el recuadro igual al que se reproduce. Pinchamos Next para continuar.



A continuación seleccionamos el tamaño del recuadro (iframe) que contendrá la imagen. Hay unos cuantos tamaños cerrados, pero con Custom podréis definir el tamaño que más os convenga. Para mí, lo más estético sería poner un tamaño proporcional al de la imagen original. De nuevo pinchamos en Next.



Ahora, por si no escogimos un tamaño proporcional y por tanto, la imagen no cabe entera en el recuadro, tenemos que escoger qué parte de la imagen queremos que se muestre de primeras: el centro, la parte superior, la derecha, la parte inferior o la izquierda. Next.



En el último paso, nos facilitan el código necesario para incrustar la imagen interactiva en una entrada o incluso en un gadget. Copiar, pegar y listo.


Y para terminar, un detalle que quizás pase desapercibido. El enlace que aparece debajo del código, es una página en la que la imagen se verá a pantalla completa. Ejemplo con la Nebulosa Cangrejo.

Una vez más, fácil ¿no?


Selección de 100 plantillas Blogger gratuitas

05/01/2011
Anotación brevísima sólo para haceros partícipes de la entrada que hace unos pocos días publicó Blogger Buster: Las 100 mejores plantillas libres para Blogger de 2010.

Se trata de una interesante recopilación que recoge los diseños favoritos de Amanda, autora de ese blog, incluyendo enlace a demo y a la descarga de la plantilla.

Para gustos están los colores, pero con tantas opciones como hay en el post, seguro que podeis encontrar aquellos que cuadran con vuestro estilo. Hay diseños con distintos números de columnas, incluyendo algunas curiosidades como templates para páginas en construcción y mini-blogs que sirven como tarjeta de presentación.

Algunos incluyen carroussel de imágenes en cabecera y otros desarrolan el estilo magazine o de sumarios en portada. En fin, lo dicho... plantillas para todos los gustos.













Nota BPT sobre cómo instalar una plantilla prediseñada como estas.

1. Antes de nada, guardamos una copia de seguridad de nuestra plantilla actual:
Diseño ► Edición HTML ► "Antes de editar la plantilla..." ► Descargar plantilla completa

2. Ahora descargamos desde el enlace correspondiente el diseño que queremos instalar y después lo subimos a nuestro blog desde:
Diseño ► Edición HTML ► "Carga una plantilla desde un..." ►Subir

Posteriormente, según vuestra maña y/o conocimientos, podeis hacer variaciones para ajustar más la nueva plantilla a vuestro estilo, cambiando colores, imágenes de fondo, incorporando o eliminando gadgets, etc.

Suscribirse a: Entradas (Atom)
Recibe por correo las últimas publicaciones.
Teclea tu dirección.


No rights reserved
NINGUN DERECHO RESERVADO
...aunque se agradece un enlace. Si crees que algo aquí vulnera los derechos de otro, mándanos un correo.

El botón que
no hace nada El botón que no hace nada

Ir Arriba