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

Post aleatorio






Evitar el frame de Google Imágenes y de otros

29/11/2010
Supongo que este truco es especialmente útil para sitios con abundantes imágenes, pero también lo es para todos aquellos que no quieren perder ni una visita.

Si analizáis un poco vuestras estadísticas, a buen seguro una parte de los visitantes llegan a vuestro sitio desde Google Imágenes. Este dato probablemente habrá bajado desde hace unos pocos meses; más o menos desde cuando este servicio incluyó la "vista previa" de la imagen en una ventana modal, que dejaba en segundo plano  la web de la que procede.

Pues bien, este truco que ayer mismo leí en Código Geek, es el mejor remedio que he visto para conseguir en lo posible, la visita forzosa a la web. No sé si esto es mejor o peor para el rollo de Adsense -tal y como comentan en AmattaJM, que parece que es el ideólogo original- pero para el que lo necesite, aquí queda.

Simplemente tenéis que localizar el cierre del head de la plantilla (</head>) y justo delante insertar este pequeño JavaScript:

<script type='text/javascript'>
if(top.location!=this.location) top.location=this.location;
</script>

Realmente, esto no evita que se pueda mostrar vuestra URL en un marco, pero en cuanto el script se carga, se realiza una redirección a vuestro sito, mostrándose en primer y único plano. Podéis instalarlo y hacer un prueba buscando por el nombre de vuestro blog y luego pinchando en una imagen que sepáis por la dirección que es de vuestro sitio.

Se me olvidaba y es importante. No sólo sirve para Google Imágenes, sino que también evita por completo que otro sitio pueda meteros en un iframe, incluidos los que vosotros mismos administráis. Es decir, si queréis evitar que lo hagan sin vuestro conocimiento/consentimiento y queréis evitarlo, adelante. Pero quizás uséis iframes entre páginas vuestras y no os interese hacerlo.

Para esto, tenéis que tener en cuenta que la página que lo lleve no podrá meterse en un marco. Por el contrario, nada impide que la página con este código pueda mostrar otra cualquiera con un iframe.


Letra capital en párrafos, posts o comentarios

27/11/2010
Lo de la letra capital es una cosa que ya vimos, pero se conoce que por antiguo, no lo encontráis fácilmente y algunos seguís preguntado por la manera en que se consigue este efecto. Aprovechando el recordatorio, veremos cómo aplicar esto de manera automática, también en entradas o en comentarios.

Esta denominación -capital- corresponde a las letras iniciales de textos con un tamaño mucho mayor que el resto. Como esta E:

Etiam in elit eget lorem fringilla tempus. Maecenas lectus massa, malesuada ut molestie a, varius a libero. Aenean a augue arcu. Praesent nec lacus justo, id faucibus nisl. Donec tempus eleifend diam quis dapibus. Nam id tellus vitae eros sodales tincidunt. Mauris erat metus, facilisis a vestibulum nec, placerat at nunc. Cras viverra hendrerit augue, in vehicula dui ullamcorper sed.

Todo se consigue con CSS, ya que sólo se trata de aplicar determinadas propiedades a esa primera letra, distintas de las genéricas. Además, para hacernos la vida más fácil a nosotros y al intérprete del navegador, tenemos una pseudo clase que localiza cual es la primera letra :first-letter.

Poniendo todo esto junto, comenzamos añadiendo en nuestra parte CSS (antes de ]]></b:skin>) el siguiente código:

.capital:first-letter {
float:left;
display:block;
font-family:"times new roman";
font-size:3em;
color:#990000;
margin:0px 5px 0 0;
padding:0 0 0 10px;
}

Algunas cosas como la tipografía (font-family), el tamaño (font-size) o el color de esa primera letra, se pueden cambiar sin ningún problema para adaptar el estilo al de vuestro blog.

A continuación, para que cualquier párrafo en una entrada lleve este efecto, sólo tendremos que incluirle la clase capital. Cualquiera de estas tres maneras serviría:

<p class="capital">Texto</p>

<div class="capital">Texto</div>

<span class="capital">Texto</span>


Una vez que tenemos el estilo instalado, nada impide que lo usemos en otros sitios de manera automática. Por ejemplo, si queremos que la primera letra de cada entrada sea de este tipo, tendremos que localizar la variable que soporta el contenido del artículo y añadirle la susodicha clase:

<p class="capital"><data:post.body</p>

<span class="capital"><data:post.body/></div>

Si nuestra plantilla incluye las etiquetas de párrafos para el data:post.body, usaremos la primera opción añadiendo lo que he marcado en verde. Si no las tiene, tendremos que añadir al menos un span, un p o un div y su correspondiente cierre, con esta misma clase, tal como se ve en la segunda línea del anterior ejemplo.


Por último, para los comentarios se hace de la misma manera, sólo que en este caso, la variable a localizar en la plantilla sería <data:comment.body/>

<p class="capital"><data:comment.body/></p>


En el enlace teneis un ejemplo de los dos últimos sistemas. Allí también podreis ver cómo se ha incorporado una imagen de fondo. Esa imagen iría como background-image en la parte CSS del principio de esta entrada.


Contador de tiempo en una página... casi sin código

25/11/2010
No sé si interesa mucho o no, hacerles saber a nuestros lectores cuánto tiempo llevan perdido en una página nuestra. Lo digo porque si echaran cuentas, quizás cerrarían la ventana -o el navegador entero- y a lo mejor, se pondrían a hacer algo más provechoso ;)

Pero bueno, en cualquier caso, me ha gustado este truquillo que ví en el blog ¿Cómo se hace...? y por eso lo explico. La idea es poner un contador de tiempo que se inicia al cargar una página y actualizarlo segundo a segundo para mostrar el tiempo acumulado que se lleva en ella.

Allí nos proponen en primer lugar, un script para crear nuestro contador de permanencia. Lo de usar JavaScript es probablemente lo primero que nos vendría a la cabeza a la mayoría; pero lo que me ha parecido más ingenioso, ha sido la segunda opción que se propone y que prescinde de tener que crear una rutina. Como vemos, se puede conseguir lo mismo de una forma más sencilla y quizás más estética, con unos simples GIFs animados.

Tiempo que llevas leyendo esta entrada


Esto que habeis visto son 5 imágenes animadas, que incluyen los números y tiempos entre cuadros, necesarios para conseguir el efecto. De izquierda a derecha:
  1. Dígitos del 0 al 5, con 600 segundos de retardo entre cuadros
  2. Dígitos del 0 al 9, con 60 segundos de retardo entre cuadros
  3. Dos puntos + cuadro en blanco, con 1 segundo de retardo entre cuadros
  4. Dígitos del 0 al 5, con 10 segundos de retardo entre cuadros
  5. Dígitos del 0 al 9, con 1 segundo de retardo entre cuadros

Que quede claro que el sistema del script es perfecto y este de las imágenes puede tener pequeños desajustes si nuestra conexión no es muy rápida o si el servidor de las imágenes está pesado. También, por cuestiones del caché, si tenemos varias ventanas abiertas con estas mismas imágenes, puede que veamos cosas raras. Por supuesto, nuestro contador no pasa de los 59 minutos, 59 segundos, pero ya sería raro que alguien estuviera una hora leyendo un post.

Lo que habría que teclear para conseguir este contador sería esto:

<div style="text-align: center;">Tiempo que llevas leyendo esta entrada</div>

<div style="margin: 0px auto; text-align: center; width: 150px;"><img src="http://lh4.ggpht.com/_0eC4K-qZ7AM/TO1RSmqk-lI/AAAAAAAAMX0/-7OHYYDkfco/1.gif" /><img src="http://lh5.ggpht.com/_0eC4K-qZ7AM/TO1RS7xsylI/AAAAAAAAMX4/_uQfIddo6OA/2.gif" /><img src="http://lh3.ggpht.com/_0eC4K-qZ7AM/TO1RTOyFacI/AAAAAAAAMX8/i-DnYANb0kE/3.gif" /><img src="http://lh3.ggpht.com/_0eC4K-qZ7AM/TO1RTUc4nVI/AAAAAAAAMYA/bj0mqGH8xLM/4.gif" /><img src="http://lh3.ggpht.com/_0eC4K-qZ7AM/TO1RTuO79eI/AAAAAAAAMYE/-Y2w89jmaig/5.gif" /></div>

Como siempre, lo conveniente es que bajeis las imágenes del ejemplo y tras alojarlas vosotros mismos, sustituyais las direcciones en el anterior ejemplo. También podeis crear vuestros propios GIFs para una personalización total.

No me digais que no es una solución creativa ¿o no?


Más fuentes para Blogger

23/11/2010
Ayer, desde el blog de Blogger in draft se anunciaba la disponibilidad de hasta 40 nuevas fuentes más para esta plataforma. De momento y como es costumbre, las nuevas tipografías están sólo disponibles desde Blogger in Draft, el escritorio de pruebas.

Cuando no usamos las conocidas tipografías estándar (Times New Roman, Comic Sans, Courier New, Georgia, etc.), la visibilidad de estas depende exclusivamente de que el visitante de la web tenga esa misma fuente instalada en su ordenador. Caso contrario, verá otro tipo de letra alternativa, posiblemente estropeando nuestro diseño.

Hay alternativas para solucionar esto y la más efectiva sería utilizar la propiedad @font-face de CSS3, que permite indicar la dirección de cualquier fuente en la hoja de estilo, para que se descargue automáticamente en el ordenador del usuario. Pero lamentablemente, todavía hay navegadores antiguos que no soportan esta instrucción, por lo que la otra alternativa es usar scripts de sustitución como sIFR o Cufón, que resultan bastante más farragosos de instalar y ralentizan la carga.

No lo he podido comprobar, pero intuyo que algún sistema parecido a estos últimos es lo que ha incorporado Blogger para poder aprovechar las nuevas fuentes que desde hace un tiempo se van incluyendo paulatinamente en Google Font.

Así que desde ya, aunque todavía en fase de prueba, podéis acceder a...

Diseño --> Diseñador de plantillas --> Avanzado

... y desde allí seleccionar cualquiera de las nuevas fuentes.

Algunos ejemplos que a buen seguro gustarán a más de uno:

IM Fell English SC


Lobster


PT Sans Narrow


Reenie Beanie


Yanone Kaffeesatz


Jangerine


Presentando tweets

22/11/2010
Esta es de esas cosas que quizás no tenga demasiada utilidad, pero que se dejan ver bien. Se trata de un servicio online que nos muestra determinados tweets relacionados con la búsqueda de una palabra, un nick o un hashtag: Visible Tweets.

En el sitio comentan que sirve para presentaciones públicas, que ya es algo. El funcionamiento es simple: se accede al sitio, tecleamos nuestra palabra y comienza el espectáculo. Existe la posibilidad de elegir entre tres tipos de animación y también están habilitados los operadores de Twitter.

Como una imagen vale más que mil palabras y por si os da pereza pinchar en el link y probar cosas, aquí os dejo un screencast realizado con Screencast-o-matic, que tenía yo ganas de usarlo en real en alguna ocasión.


Vía: Curioseando


14 originales tipografías gratuitas

21/11/2010
No hay mucho que decir. Sólo accede a esta entrada de Designer Daily y encontrarás 14 fuentes muy chulas para poder descargar. Todas son libres.

Cuatro de ellas para que os hagais una idea.





Más vale pájaro volando que ciento...

18/11/2010
ElektroDanZ llamó mi atención sobre este gadget que había visto revoloteando por una página. Se trata de un pájaro azul, en clara alusión al icono de Twitter, que aparece por la parte superior y sobrevuela tu página según te vas desplazando verticalmente por ella.

Esto ya sería lo suficientemente entretenido como para publicarlo y que algunos os divirtais un poquito instalándolo en vuestra página. Pero lo mejor de todo es lo que hace. Resulta que este pajarraco, además de haceros compañía, es también un enlace a vuestra cuenta de twitter y al mismo tiempo, un boton de retweet. Esto le da un poco más de interés ¿no?

Supongo que a estas alturas de post, ya habreis visto el que he puesto de muestra. Posaros sobre él y vereis cómo se abren dos nuevos enlaces: twitéame y sígueme. Pues hala, ya estais pinchando para verlo funcionando. El propio pájaro, directamente es un enlace a vuestro perfil, pero bueno, queda mono lo de los enlaces que se despliegan.

Por último, si el bicho migratorio este os molesta para la lectura de alguna parte de la entrada, sólo teneis que sacudirle un poco con el puntero, para que cambie de sitio. Qué majo él.

El pack completo del creador (Floern), incluye también un par de utilidades para que al apuntar al pájaro, este reproduzca en un bocadillo tipo cómic, nuestro último twett. Pero eso se va a quedar para usuarios avanzados y con PHP a su alcance. Los de Blogger, hoy por hoy no tenemos fácil el acceso a ese lenguaje, así que nos conformamos con lo que veis.

INSTALACION

Simplemente buscais <data:post.body/> en vuestra plantilla (con artilugios expandidos) y antes de esa variable, insertais la llamada al script que he alojado en Google Code, así como las variables necesarias. Si teneis alguna modificación en vuestra plantilla quizás tengais que usar como referencia <div class='post-body entry-content'>. En este último caso, el código iría detrás.

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


CONFIGURACION
Hay que cambiar el valor de la variable twitterAccount, para poner vuestra propia cuenta. El contenido de tweetThisText será lo que se escriba automáticamente en el status de Twitter al pinchar en twitéame. Ahi también podeis poner lo que querais, aunque sería conveniente conservar &lt,data:post.url/&gt; porque eso hará que también se inserte automáticamente la dirección del post en el que se está. La dirección principal de la web, también podría ser otra alternativa.

Si quitais el condicional y su cierre, el pájaro será visible en todo tipo de páginas y no sólo en las entradas individuales. Aunque en este caso, no respondo de la dirección que se enviará.


OPCIONES
El código puede ser instalado perfectamente en un gadget en lugar de en la plantilla. En este caso, lo de incluir la dirección del post sería inviable porque las variables Blogger no funcionan si no están en la plantilla HTML. Si esto no es problema, sería suficiente con cambiar las comillas simples por dobles y todos los &quot; por comillas simples. Por supuesto, el condicional sobraría.


MODIFICACIONES
Podeis utilizar este mismo artilugio para cualquier otro tipo de enlaces. Esto ya es algo más complicado, porque requiere cambiar los valores de twitterAccount, tweetThisText y para el botón que hace el retweet, la varible tweetthislink que se encuentra en el script:

var tweetthislink="http://twitter.com/home?status="+escape(tweetThisText);

Otra "maldad" que se me ocurre, sería cambiar todas las imágenes del sprite que son las responsables del movimiento del pájaro, por cualquier otro personaje que sea de vuestro agrado. Aunque claro, para esto ya hay que tener algo de mano con el fotochop.


RECOMENDACIONES
Como siempre, para no quedaros colgados el día menos pensado y para evitar la saturación del lugar dónde está alojado el script y la imagen, conviene que useis vuestro propio alojamiento y sustituyais luego las direcciones de ambos por las vuestras. Para ello, en los siguientes enlaces podeis descargar el fichero tripleflap.js y la imagen birdsprite.png.


Gestionar nuestro feed con FeedBurner. Blogger

16/11/2010
Hay muchos gestores de feed, pero mi favorito por varios motivos es FeedBurner. El principal es que es de Google, al igual que mi blog (Blogger) y mi servicio de almacenamiento de imágenes (Picasa). Creo que esto le da una compatibilidad total al conjunto, aunque el inconveniente es evidente: el día que Google se hunda, se lleva consigo todo lo mío. Esperemos que no sea así ¡Larga vida al rey! ...por si acaso.

¿Para qué nos sirve un gestor de feed? Pues eso, para gestionarlo. FeedBurner tratará nuestra fuente y le colgará cositas según nuestros deseos. Así, lo podrá enviar al correo de quién nos lo pida a modo de newsletter, nos facilitará un ticker con las últimas entradas, recogerá estadísticas sobre su uso, le añadirá botones u otros cacharritos de nuestro interés... En fin, aportará una serie de servicios que el feed por sí solo no tiene.

Hoy sólo veremos cómo darse de alta y cómo redirigir el feed de Blogger a FeedBurner. Algo sencillo. Otro día que no tenga tanta pereza, quizás vemos algo más interesante. De momento, podeis ir haciendo esto sin problemas porque no cambiará nada en vuestro blog.

Comenzamos por acceder a FeedBurner y registrarnos. Este paso no es necesario si ya tenemos una cuenta Google, como sería el caso de los que teneis un blog Blogger. Si os sale en inglés, arriba a la derecha hay un enlace que reza languages. Pinchando en él podeis seleccionar Español. No lo traducirá todo, pero algo es algo.



Lo siguiente es introducir la direccion del feed de nuestro blog. En Blogger, este tiene la forma:


http://NOMBRE_BLOG.blogspot.com/feeds/posts/default


Ahora se nos solicita un nombre para el feed y una dirección. Como nombre, quizás lo mejor es poner el mismo que tiene el blog. Como dirección, lo mismo, pero tened en cuenta que tiene que ser una sola palabra (o varias pero sin espacios en blanco ni caracteres especiales) que se añadirá al dominio general. Para que se entienda mejor, añadiendo "prueba", la dirección final de nuestro nuevo feed sería http://feeds.feedburner.com/prueba. La de este blog es http://feeds.feedburner.com/Oloblogger.


Si pinchais en el enlace anterior de mi feed, podreis comprobar como es algo distinto al que tenemos por defecto. Sobre todo, al final de cada entrada podeis ver enlaces a Bitácoras, a Facebook, el número de comentarios, publi... Estas son algunas de las cosas que os mencionaba al principio.

Con siguiente nos aparece una nueva pantalla dónde marcamos si queremos un sistema de estadísticas. Aunque también podríamos seleccionarlas más adelante, como es gratis, le damos a las dos opciones que se ven en la imagen y así ya las tenemos para cuando nos hagan falta. La segunda es para podcasting. Si no sabes lo que es, es que tu blog no es de esos. Tranquilos. Los que sí tengais distribución de contenido multimedia, adelante; pinchando que es gerundio.


Tu feed está listo para el mundo. ¿Ahora qué?

Pues aquí ya hemos acabado. Sólo nos falta ir a nuestro escritorio y dentro de las pestañas Configuración --> Feed del Sitio encontramos dónde insertar el nuevo feed para redirigirlo.


Salvo que tengais alguna necesidad especial, en el primer desplegable es conveniente seleccionar Completo. Esto permitirá a otras aplicaciones que podamos utilizar en un futuro, realizar bien su tarea.


Iconos antiguos. Iconos sucios.

14/11/2010
No suelo poner muchas colecciones de iconos, pero estos me han gustado especialmente.

► Estilo vintage simulando papel arrugado: 27 iconos, cada uno en dos tamaños distintos, 128 y 256 pixels.

Descargar: Webexpeditions18

► Algo más grunge. Set de 20 en tamaños 64x64 y 256x256 pixels.

Descargar: Noeltock

Y para que ver si no tengo que crear más entradas de este tipo, un tutorial (Photoshop) para que a partir de ahora creeis vuestros propios iconos (en inglés). El ejemplo está constuido con una base de madera agrietada pero tal y como proponen allí, podeis experimentar con otras texturas.


Internet para todos (para torpes, también)

12/11/2010
A los que habitualmente pasais por aquí, no creo que sea necesario explicaros lo qué es un blog -puede que a uno o dos despistados, pero ya está- pero quizás en vuestro espacio, sí que teneis visitantes que entran sin saber muy bien de qué va esto de los weblogs.

Para ellos y a lo mejor para vosotros por simple curiosidad, desde hace tiempo, hay una muy buena colección de vídeos con el subtítulo "...in plain english" (lo que viene a ser "...en inglés simple", "...lisa y llanamente" o incluso "...hablando en plata") en la que explican de una forma muy simple, conceptos, servicios y utilidades relacionados con el mundo de Internet.

La característica principal de todos es que tienen un lenguaje nada técnico y sobre todo, que se apoyan en recortes dibujados a mano que interactúan sin ningún tipo de filigrana infográfica, ya que los autores usan principalmente sus propias manos.


El problema es que están editados en inglés, pero afortunadamente hay muchos que se ocupan de hacernos la vida más fácil subtitulándolos en español o incluso doblándolos. Este es el caso del que a continuación podeis ver.



Otros vídeos doblados en español:

Los autores son Common Craft y en este listado podrás encontrar todos sus trabajos. Algunos, también en español.


Cabecera para páginas de etiquetas. Secciones del blog.

09/11/2010
Este truquillo parece adecuado para aquellos que tengan su blog dividido en "secciones".

Esto de las secciones o apartados de temática común, se puede simular en Blogger mediante la creación de un menú,  cuyos enlaces coinciden con las distintas etiquetas de nuestro blog. Así es como por ejemplo lo tiene construido Elite Voley.

Como podeis ver allí, el menú superior es prácticamente una reproducción de la lista de etiquetas, pero a diferencia de ese gadget, esta lista está construída manualmente. Hay diversas maneras de programar un menú y por citar un ejemplo, List-o-matic puede facilitaros mucho la tarea.

El enlace a cada una de las categorías (o etiquetas) tiene la forma

http://nombre_blog.blogspot.com/search/label/nombre_etiqueta

Pues bien, una vez que tenemos nuestro menú y nuestros enlaces bien configurados, podeis observar cómo al acceder a alguno de estos apartados, lo primero que nos sale es un mensaje del tipo:


Probablemente este mensaje y formato no sea de nuestro agrado, en cuyo caso, ahora comienza el truco que proponemos para cambiar esto.


En primer lugar, editamos la plantilla marcando Expandir plantillas de artilugios y eliminamos la llamada al artilugio Blogger que genera este mensaje. Para ello, simplemente borramos esta línea de nuestro código.

<b:include data='top' name='status-message'/>

Hay un includable que contiene el código completo del artilugio, pero no es necesario tocarlo porque con que suprimamos la llamada (el include), ya lo hemos inutilizado.

Ahora generamos un nuevo gadget cuyo código es el que va a construir una frase con el nombre de la etiqueta (sección para nuestros lectores). Hay que colocarlo inmediatamente antes de <b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'>


<b:widget id='Label99' locked='false' title='Titulo secciones' type='Label'>
<b:includable id='main'>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<b:loop values='data:labels' var='label'>
<b:if cond='data:blog.url == data:label.url'>
<div class='secciones' expr:dir='data:blog.languageDirection'>ESTA VIENDO LA SECCION <data:label.name/></div>
<b:else/>
</b:if>
</b:loop>
</div>
</b:includable>
</b:widget>

El texto en verde se puede suprimir o cambiar por el que se desee. En cualquier caso, la etiqueta data:label.name, mostrará el nombre de la sección dónde nos encontremos.

Ya lo único que falta es dar estilo a nuestra cabecera. Para eso, simplemente insertamos en la parte CSS de nuestra plantilla (antes de ]]></b:skin> para los que no lo recuerden), una nueva clase llamada secciones, con las propiedades que gustemos. Este sería un ejemplo, pero lo mejor es que lo adapteis a la apariencia de vuestro blog.

.secciones {
text-align:center;
margin:0px auto;
text-transform:uppercase;
font-size:130%;
font-weight:bold;
color: #ffffff;
padding:10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #cedce7;
background: -moz-linear-gradient(top, #cedce7 0%, #596a72 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cedce7), color-stop(100%,#596a72));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72',GradientType=0 );
}


Botones sociales. Facebook, Twitter y Bitacoras

05/11/2010
A más de uno parece que le da problemas esto de los botoncitos para votar, recomendar, compartir o retuitear anotaciones. Unas veces son los códigos que no funcionan bien y otras que las imágenes quedan dónde no queremos.

Lo de los códigos es fácil, porque cada servicio facilita los suyos en apartados específicos y sólo hay que copiar y pegar. Pero lo de la ubicación... pues realmente también. También es fácil. Y desde aquí vamos a intentar ponéroslo todavía más fácil.

Accedeis a vuestro escritorio, Diseño, Edición HTML, pinchais en Expandir plantillas de artilugios, buscais <data:post.body/> y justo después, pegais todo esto:

<b:if cond='data:blog.pageType == "item"'>

<div style='clear:both;'></div>

<!--Facebook-->
<div style='float:right;padding:4px;z-index:500;'><a href='http://www.facebook.com/sharer.php' name='fb_share' type='button_count'>Compartir</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></div>

<!--Twitter -->
<div style='float:right;padding:4px;z-index:500;'>
<a class='twitter-share-button' data-count='horizontal' data-lang='es' data-via='tu_cuenta_twitter' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>

<!-- Bitacoras -->
<div style='float:right;padding:4px;z-index:500;'><a expr:href='"http://bitacoras.com/anotaciones/" + data:post.url'><img alt='Votar esta anotación en Bitácoras.com' border='0' expr:src='"http://widgets.bitacoras.com/votar/mini/" + data:post.url'/></a></div>

</b:if>

Lo único que hay que modificar es el data-via del botón de Twitter, tecleando en esa variable vuestra cuenta, sin arroba (@).

Con Vista Previa no vereis nada porque la primera condición que se pone es para que los botones salgan sólo en las páginas de entradas. De otra manera, se promocionaría la dirección principal de la página o aquella otra de navegación por etiquetas o por recientes/antiguas en la que estemos. Así que podeis probar para ver que no se ha estropeado nada, pero tendreis que Guardar y acceder a un post para comprobar el resultado.

Como veis, lo único que hemos hecho algo "especial" es meter cada botón dentro de un div flotante para que todos se alineen a la derecha. También hemos incluido un z-index alto por si nuestra plantilla solapa algún elemento por encima de los botones accidentalmente. Por último hay un padding que tal y como está redactado deja el mismo espacio por los cuatro lados (4px). Esto está por si algún botón os da problemas de ubicación. Sólo habría que cambiar ese valor o aquel de los cuatro (arriba, derecha, abajo, izquierda) que fuera necesario para desplazar el botón y cuadrarlo con el resto.

De la misma manera, podeis añadir nuevos div's con los botones de otros servicios, siempre dentro del condicional.


Aviso para una página lenta

03/11/2010
¿Tenéis alguna página que por contener un elemento muy pesado tarda mucho en cargar?

Pues en principio no deberia ser así porque los internautas no nos caracterizamos por ser muy pacientes. Parece ser que no aguantamos mucho más de dos segundos y a poco que algo tarde, cerramos ventana y a otra cosa.

Si bien esto no debería ser entonces la tónica general de tu web, quizás no puedas evitar que cierta página en concreto tenga algo que la ralentice. Un ejemplo podrían ser los índices de entradas basados en json. O prescindes de ellos o son lentos por narices.

Pero en fin, ya que no podemos evitar que algunas cosas tarden, por lo menos vamos a poner un aviso de que esto es así, para intentar que nadie crea que tu web se quedó colgada al acceder a esa entrada concreta.

Para ello sólo tenemos que insertar un ID con propiedades de invisibilidad  justo antes del final del código de la página o de la plantilla en el caso de Blogger. Es decir, justo antes de </body>:

<!-- Esconder texto tras carga total -->
<style type='text/css'>
#escondertrascarga {
visibility:hidden;
display:none;
}
</style>

Ahora sólo nos queda añadir al principio de la página en cuestión (o post) el texto o incluso una imagen, pero añadiéndole el anterior ID, para que se muestre mientras se carga. Una vez cargado todo (por eso el estilo hay que ponerlo al final de la plantilla), el aviso desaparecerá; no será visible.

<div id="escondertrascarga">
Un poquito de paciencia, que esto tiene tela.
</div>

A partir de que el estilo del primer trozo de código esté insertado en la plantilla, ya no hace falta volverlo a escribir para sucesivos usos. Para una segunda o posterior ocasión, directamente encerramos en un div id="escondertrascarga" aquello que queremos que se deje de ver cuando la página haya cargado totalmente.


Ventajas de alojar imágenes en Blogger. Redimensión

01/11/2010
Siempre me ha parecido que para los blogs alojados en Blogger, la mejor opción para archivar nuestras imágenes es el propio Blogger o lo que es lo mismo, Picasa. Este último ha sido siempre el alojamiento natural del primero, de manera que cuando subís una imagen a través del editor del blog, queda alojada automáticamente en un álbum de Picasa. Sólo teneis que acceder al servicio con el login de vuestra cuenta Google para descubrir que esto es así y poder ver los archivos que se han generado.

Otros servicios son buenos, pero relativamente. No es la primera vez que alguna imagen, sobre todo en Photobucket, me ha desaparecido sin ninguna razón aparente. Otros servicios como Flickr o Imageshak parecen más estables, pero quién nos dice que en el futuro lo seguirán siendo. Con Picasa tampoco tenemos ninguna garantía, pero mi reflexión siempre ha sido la siguiente: Si Picasa se va a hacer puñetas, es porque Blogger y el resto de servicios Google también tienen problemas. En ese caso, que pierda las imágenes, será la menor de mis preocupaciones.

Pero en fin, si este puede ser un motivo algo peregrino, lo que sí es un dato y no una opinión, es que Blogger tiene una ventajilla sobre el resto en cuanto a la redimensión de las imágenes.

Sabeis -y si no para eso estamos- que para cambiar el tamaño de una imagen sin necesidad de editarla, es suficiente con añadir un WIDTH al estilo. El alto se recalculará automáticamente y la imagen se hará más pequeña o más grande en la misma proporción en que cambiamos el ancho original. Esta imagen, tiene por ejemplo 300px de ancho y es la que tengo alojada en Picasa.


<img border="0" src="http://3.bp.blogspot.com/_0eC4K-qZ7AM/TMNwxDBy4xI/AAAAAAAAMQk/TTZqh3HOpC8/s1600/pez1.jpg" />

Por lo que hemos dicho, en general, para redimensionar una imagen es suficiente con añadir un WIDTH:


<img width="100px" border="0" src="URL_IMAGEN_ORIGINAL" />

<img style="width:100px;" border="0" src="URL_IMAGEN_ORIGINAL" />

Cualquiera de las dos formas anteriores serviría para reducir la imagen a 100px de ancho sin tener que editarla.

No conviene hacer esto para agrandar la imagen, porque se apreciaría la falta de definición (reproduzco sólo una porción por no tener tanto ancho en el blog).


<img width="1000px" border="0" src="URL_IMAGEN_ORIGINAL" />

Pero seguimos con Blogger. Las direcciones de las imágenes allí alojadas, incluyen un subdirectorio que incluyen una s y un número. En el ejemplo anterior, en la etiqueta SRC podeis ver como la dirección de la imagen termina en .../s1600/pex1.jpg. Como vimos hace tiempo, s1600 hace referencia a la imagen del tamaño original y cambiando ese número, obtenemos otras versiones de menor tamaño: s800, s400, s320, s200...

Esto por sí mismo ya es una ventaja, pero es que gracias a Vagabundia y a un posterior comentario de José GDF en nuestra página de Facebook, sin el cual me hubiera pasado esto desapercibido, hace unos días descubrimos que actualmente se puede usar cualquier tamaño. Es decir, podemos usar por ejemplo un s180 sin ningún problema.


<img border="0" src="http://3.bp.blogspot.com/_0eC4K-qZ7AM/TMNwxDBy4xI/AAAAAAAAMQk/TTZqh3HOpC8/s180/pez1.jpg" />

¿Y para qué esto si podemos usar el WIDTH que antes explicábamos para reducir las imágenes? Pues muy sencillo.
  • En primer lugar simplificamos la manera de hacer una redimensión, pues sólo hay que cambiar los dígitos del subdirectorio sin necesidad de añadir código extra.
  • Y en segundo pero no menos importante, para reducir el peso de la imagen en el total de la página.
La redimensión con WIDTH sigue cargando la imagen mayor (la de mayor peso), pero con este nuevo sistema, cargamos directamente una miniatura. Vamos, como si hubiéramos editado la imagen y la hubiéramos subido de todos los tamaños posible.

Sólo teneis que ver las propiedades de las dos primeras imágenes para comprobar que, independientemente de su tamaño aparente, ambas ocupan 20.528bytes. Sin embargo la última, que realmente se trata de una miniatura en origen, ocupa sólo 8.994 bytes. Y esto a pesar de ser más grande que la segunda que tiene un tamaño aparente menor (100px vs 180px) .

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