Vagabundia

¿Qué es eso?

2009-11-08T00:00:00.000-03:00

Tres packs de íconos negros

2009-11-07T00:00:00.000-03:00


Black Elegant
	Incluye 16 íconos de 512x512 en formato PNG.descargar

Black Glamour
	Incluye 34 íconos de 512x512 en formato PNG.descargar

Black Pearl
	Incluye 34 íconos de 256x256 en formato PNG.descargar

Herramientas para Desarrolladores: Verificar el blog

2009-11-06T00:00:00.000-03:00

Hasta hace poco, quien tenía un blog en Blogger podía agregar su sitio directamente a las Herramientas para Desarrolladores de Google.

El enlace sigue allí en nuestro escritorio pero si lo usamos, nos mostrará un error.

Esto es debido a que Google ha realizado algunos cambios en sus métodos de verificación y, por el momento, la única forma de hacerlo es de manera manual.

Para ello, debemos ingresar a las Herramientas para Desarrolladores utilizando nuestra cuenta de Google y allí veremos una lista con nuestros sitios. En algunos aparecerá a la derecha un enlace Verificado el si es que ya ha sido añadido previamente y en otros, un enlace que nos permite hacerlo por primera vez.

Si el blog es nuevo, no lo veremos así que deberemos hacer click en Añadir un sitio y allí, ingresar nuestra direción URL:

Hecho esto o haciendo click en Verifique la propiedad de este sitio de cualquier otro, se nos abrirá una página donde nos pedirán que decidamos el método de verificación.

Para poder mostrarle información y estadísticas detalladas sobre el sitio, debemos estar seguros de que es el propietario.

URL del sitio http://miblog.blogspot.com/
Estado de verificación NO VERIFICADO

Método de verificación
Copie la metaetiqueta que se muestra a continuación y péguela en la página principal de su sitio. Debe incluirla en la sección , antes de la primera sección.

Seleccionaremos Metaetiqueta y copiaremos el código que nos dan:

<meta content='xxxxxxxxxxxxxxxxxxxxx=' name='verify-v1' />

Ahora, deberemos pegarlo en el head de nuestra plantilla, debajo del título:

<title><data:blog.pageTitle/></title>
<meta content='xxxxxxxxxxxxxxxxxxxxx=' name='verify-v1' />

La guardamos y en el panel anterior, hacemos click en Verificar.

Si todo es correcto, nos redirigirá a nuestro panel: "Googlebot ha accedido correctamente a su página principal."

Como al parecer, aún quedan dudas respecto al método para establece el dominio preferido, vamos a un ejemplo concreto. Supongamos que ya he agregado y verificado mi blog que tiene la siguiente dirección URL:

http://miblog.blogspot.com

Ahora, debería agregar otro con la misma dirección pero agregándole www:

http://www.miblog.blogspot.com

Se nos mostrará entonces una ventana igual a la anterior con una etiqueta META que, será la misma que ya tenemos agregada y, por lo tanto, simplemente hacemos click en Verificar.

La siguiente pantalla nos mostrará una advertencia:

Iremos entonces a Informacion del sitio | Configuración y allí, definiremos nuestro dominio preferido:

El dominio preferido es aquel que le gustaría utilizar para indexar las páginas de su sitio web. Si especifica su dominio preferido como http://www.example.es y detectamos un enlace a su sitio en el formato http://example.es , lo trataremos como http://www.example.es . Asimismo, tendremos en cuenta su preferencia cuando mostremos las URL en nuestros resultados de búsqueda. Es posible que los cambios tarden en reflejarse en nuestro índice.

Dominio preferido
No establezca un dominio preferido
Mostrar URL como misitio.blogspot.com .
Mostrar URL como www.misitio.blogspot.com

Aceptamos y el proceso ha terminado:

Gestionar los comentarios usando Disqus

2009-11-05T00:00:00.000-03:00

Desde que Pepiche me preguntó sobre Disqus, me quedé con la curiosidad y prometí ver de que se trataba. Algún tiempo atrás ya había probado Intense Debate y no me había convencido pero, siempre hay que intentar usar alternativas y luego decidir.

Disqus es un servicio de comentarios externos que funciona desde el 2007 y que puede insertarse en cualquier sitio web, sean estos blogs o no. Es muy utilizado cuando los sistemas no disponen de comentarios como el caso de Tumblr pero también puede agregarse a una plataforma que ya los posee como Blogger o WordPress.

Su principal característica es que dispone de muchas herramientas que lo hacen flexible y que nos permiten gerenciar los comentarios de manera segura. Herramientas que incluyen moderación, tratamiento de spam, bloqueos, estadísticas y mucho más.

Una vez que nos registramos, podemos agregar distintos sitios y todos ellos los manejamos a través de la misma cuenta. Terminado ese registro, ya podemos integrar el sistema en nuestro blog. Para ello, hay una serie ayudas que, en principio, hacen el trabajo por nosotros y nos evitan escribir cosas. Para Blogger debemos descargar nuestra plantilla desde Diseño | Edición HTML y luego subirla a Disqus; allí le agregarán los códigos y luego, haremos el proceso inverso, descargamos la copia y la volvemos a colocar. En realidad, esto es un supuesto porque siempre que lo intenté, me devolvía un código de error sin explicaciones así que, mucho mejor es usar lo que ellos llaman el código universal ya que agregar los codigos no es nada del otro mundo y prefiero confiar en mis errores antes que en los errores ajenos.

Así que vamos a Universal Code donde nos dicen que debemos agregar algo similar a esto:

<div id="disqus_thread"></div>
<script type="text/javascript" src="http://disqus.com/forums/minombre/embed.js"></script>
<noscript><a href="http://disqus.com/forums/minombre/?url=ref">View the discussion thread.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>

¿Dónde? En Blogger, colocaremos eso donde ahora van los comentarios; expandimos la plantilla y buscamos esto:

<b:include data='post' name='comments'/>

Lo eliminamos y lo reemplazamos por el código que nos dieron.

También nos dicen que agregemos un script justo antes de </body>, es decir, al final de la plantilla. El código es algo similar a esto:

<script type="text/javascript">
//<![CDATA[
  (function() {
    var links = document.getElementsByTagName('a');
    var query = '?';
    for(var i = 0; i < links.length; i++) {
      if(links[i].href.indexOf('#disqus_thread') >= 0) {
        query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
      }
    }
    document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/minombre/get_num_replies.js' + query + '"></' + 'script>');
  })();
//]]>
</script>

Pero esto no es obligatorio y podemos obviarlo. Es un script que reemplaza los enlaces por un contador (comment count code) y para usarlo se debe agregar #disqus_thread al final de esos enlaces; su utilidad es relativa, serviría, por ejemplo, para ... bueno, para algo

Así que lo lógico, es usar sólo el primero.

Por último, en Blogger debemos deshabilitar los comentarios actuales. Eso lo hacemos en Configuración | Comentarios:

Comentarios Mostrar Ocultar

Como dije, podemos agregar varios sitios con la misma cuenta; simplemente agregamos la URL, le damos un nombre y listo. Cada uno de ellos tendrá una página de acceso exclusivo y accesos a las diferentes secciones que usemos. En ese sentido, es bastante cómodo pero, pese a que nos preguntan por el idioma, TODO está en inglés e incluso, los textos mostrados son una mezcla de inglés y español bastante estrafalaria.

Una serie de widgets extras permiten que agreguemos más información. Todas se instalan de manera simple, copiando el código y pegándolo en algún elemento HTML.

Recent Comments muestra los comentarios recientes; Popular Threads lista las entradas más comentadas y Top Commenters los comentarios de los usuarios más activos. Combination es eso, una combinación de los tres widgets en uno y se muestran como pestañas.

También se dispone de un Feedflare de FeedBurner.

La parte gráfica la podemos modificar bastante, no así los textos. Hay tres modelos básicos pero también podemos personalizarlo con CSS. Hay una ayuda al respecto pero es algo limitada y no estamos restringidos a eso, casi cualquier cosa puede ser cambiada, incluyendo los botones; una excepción, el área de textos donde se escriben los comentarios es un IFRAME y por lo tanto, sólo puede ser cambiada parcialmente.

Una serie de parámetros que pueden agregarse al script original y un API para desarrolladores permiten acceder a ciertos detalles pero con bastante dificultad. La mayor parte de la configuración debe hacerse desde los paneles del mismo sistema.

Y aquí viene la parte sustancial de este y de otros sistemas similares.

Al usarlos, los comentarios pasan a ser gestionados por otro sistema distinto del que tenemos, dejan de alojarse en Blogger para pasar a ser alojados en Disqus por lo tanto, hay que tener muy en cuenta que el cambio será permanente.

Es cierto que el sistema provee herramientas de importación y exportación. La primera nos permite hacer una copia de los comentarios previos; los lee y los guarda en el nuevo sistema. Desde allí, podemos gestionarlos sin problemas; permanecen guardados en Blogger y también se agregan a Disqus. El problema surge con los nuevos; de aquí en más, se alojarán allá y no en Blogger.

Aunque la palabra exportación parece atractiva, no podremos hacer el proceso inverso. La exportación existe pero no hay forma de agregar los comentarios otra vez a nuestro sistema, a ningún sistema; así que, si por alguna razón decidimos no usar más el servicio, podemos volver al sistema viejo y veremos lo que allí teníamos pero no todos aquellos agregados con Disqus; para verlos, deberemos entrar en esa cuenta; permanecerán allí aún cuando ya hayamos eliminado el sistema de nuestro sitio.

Es importante entender esto para evitar sorpresas desagradables.

Lo mejor, me parece, es probarlo en un blog auxiliar y ver si nos convence o si satisface nuestras necesidades.

Lo he agregado a este blog y a modo de ejemplo, hay varios comentarios "falsos" en esta entrada. Obviamente, están moderados porque aún no estoy tan loco

El widget de Twitter para mostrar listas

2009-11-04T00:00:00.000-03:00

Qué son o cómo usar las listas de Twitter se lo dejo a los expertos en el tema; si son útiles o no, dependerá de cada uno.

De todos modos, Twitter ha incorporado un widget para esta nueva opción y la podemos ver junto con las que ya extistían en la sección Goodies y entrando en List Widget nos encontraremos con un método bastante sencillo de personalizarlo.

Settings nos permitirá indicar el usuario (nosotros o cualquier otro) y seleccionar la lista a mostrar. Allí también pondremos un título y subtítulo.
Preferences nos sirve para establecer algunos detalles tales como el tiempo de actualización, al cantidad de tweets, si mostraremos los avatares, etc.
Appearance es lo que nos permite determinar los diferentes colores tanto del fondo como de los textos.
Dimensions nos da la posibilidad de establecer el tamaño (ancho y alto).

En cada paso iremos previsualizando el resultado y, una vez que definimos todo a nuestro gusto, Finish & Grab Code nos mostrará el código que debemos insertar en nuestro blog. En el caso de Blogger, podemos hacerlo directamente ya que dispone de un enlace directo que lo agregará a un elemento HTML.

El código es bastante evidente así que, llegado el caso, podemos editarlo manualmente.

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
  new TWTR.Widget({
    version: 2,
    type: 'list',
    rpp: 30,
    interval: 6000,
    title: 'Lista de servicios de ',
    subject: 'GOOGLE',
    width: 300,
    height: 300,
    theme: {
      shell: {
        background: '#334455',
        color: '#ddeeff'
      },
      tweets: {
        background: '#eeeeff',
        color: '#444444',
        links: '#8c3621'
      }
    },
    features: {
      scrollbar: true,
      loop: false,
      live: true,
      hashtags: true,
      timestamp: true,
      avatars: true,
      behavior: 'all'
    }
  }).render().setList('vagabundia', 'google').start();
</script>

Feeds y suscriptores usando Feedburner

2009-11-03T00:00:00.000-03:00

Según indica FeedBurner Status Blog, el servicio que utiliza Google para reportar la cantidad de suscriptores de Google Reader e iGoogle ha estado actualizando su base de datos y por lo tanto, es posible que veamos cambios en la cantidad mostrada.

La cantidad de suscriptores de un sitio sólo es una "aproximación" del número real de suscriptores y no un valor exacto; se calcula como un promedio basado en la cantidad de veces que se accede al feed de un sitio en las últimas 24 horas, ya sea desde un lector de feeds o de manera directa, filtrando la dirección IP y los accesos desde bots para evitar abusos.

Dentro de nuestro panel de Feedburner vemos muchos datos. Uno, llamado Reach (Alcance) indica la cantidad total de personas que han realizado alguna acción con nuestro feed (lo han visto o han hecho click). Es un número mucho más bajo ya que no tiene en cuenta a quienes acceden a través de lectores externos o buscadores.

Si está habilitada la opción, Feed Hit indica la cantidad de veces que se leen los feeds tanto de modo directo (desde el navegador) como desde un lector externo, servicios extras o incluso bots. En los detalles se nos muestran los últimos 25 accesos y el número no se corresponde con los suscriptores ya que los feeds son públicos y por lo tanto, no hace falta estar suscripto a un sitio para acceder a ellos.

FeedBurner analiza accesos a través de clientes de correo, agregadores, lectores externos, etc pero, como hay cientos de posibilidades, identifica como Uncommon Uses (Usos no comunes) a aquellos que no logra identificar. Estos, pueden ser referencias en un blog, spam o cualquier otra cosa. Si abrimos esa pestaña, veremos una lista de esos accesos y podemos marcarlos para "reconocerlos".

REFERENCIAS:FeedBurner Help

RGBA: Los colores transparentes

2009-11-02T00:00:00.001-03:00

Cuando queremos que "algo" tenga un determinado color, establecemos ese color utilizando algún código, un valor hexadecimal, un valor expresado como RGB() o una palabra que lo identifica:

color: #FF0000;
color: rgb(255,0,0);
color: rgb(100%,0%,0%);
color: red;

Todos ellos harán lo mismo, mostrar algo de color rojo. Es lo que se llama el modelo RGB (Red Green Blue) donde cada color está compuesto por una parte de rojo, una parte de verde y una parte de azul y las diferentes proporciones de estos componentes genera todos los colores posibles.

Como cada componente puede variar entre 0 y 255, tenemos 256 variantes que van desde rgb(0,0,0) o #000000 que genera un color negro hasta rgb(255,255,255) o #FFFFFF que genera un color blanco. De esa manera tenemos 256*256*256* = 256^3 = 16777216 colores diferentes.

A medida que la tecnología avanzó, la cantidad de colores disponibles fue aumentando. En algún momento pasaron del "blanco y negro" a soportar 8 colores, luego 16 (4 bits), luego 256 (8 bits), luego 65536 (16 bits) y ahora el llamado TrueColor (24 bits) (más información).

Cualquiera diría que 16 millones de colores es más que suficiente ya que el ojo humano difícilmente distinga ciertas variaciones sutiles pero, ahora nos enfrentamos con una nueva alternativa, los llamados colores RGBA (Red Green Blue Alpha) que agregan un nuevo factor, el alpha channel, es decir, la opacidad o transparencia que sigue el mismo esquema de porcentajes: el 0% representa la transparencia absoluta y el 100% representa la opacidad absoluta que es la forma en que tradicionalmente vemos los colores.

Esto es fácilmente visible cuando vemos algunas imágenes en formato PNG y no es un avance sin costo ya que pasamos de 24 bits a 32 bits es decir, imágenes más pesadas.

Lo interesante es que el uso de este canal alpha no está limitado a las imágenes, también es posible aplicarlo a algunas propiedades CSS aunque sólo está disponible cuando el navegador puede interpretarlo ya que se trata de una posibilidad contemplada en el CSS3, algo que en este momento, sólo soportan algunos navegadores.

El valor, al igual que en la propiedad opacity, es expresado como porcentaje decimal, yendo de 0 (transparencia total) hasta 1 (el valor por defecto). En este ejemplo, al color rojo se le aplicaron diferentes valores al canal alpha:

0.0

0.2

0.4

0.6

0.8

1.0

Ver/Ocultar imagen si el navegador no lo muestra: [+]

color: rgba(255,0,0,0);
color: rgba(255,0,0,0.2);
color: rgba(255,0,0,0.4);
color: rgba(255,0,0,0.6);
color: rgba(255,0,0,0.8);
color: rgba(255,0,0,1);

Funciona correctamente en las versiones más recientes de Filefox 3, Safari, Chrome y Opera 10 pero no así en Internet Explorer, en este navegador, la propiedad será ignorada por lo que no habrá color definido.

Para evitar eso, debemos establecer el color de dos modos, primero, de forma "normal" y luego como rgba(), de esta manera, IE usará la primera y el resto de los navegadores la segunda. Por ejemplo:

Sed porta, turpis eu interdum facilisis, dui quam volutpat lorem, eu consequat dui magna vel arcu.

<div style="background-color:#FF0000;background-color: rgba(255,0,0,0.5);">
 .........
</div>

Los valores de rgba() pueden ser utilizados en las propiedades background, border y color y, teniendo la precausión de verificar los resultados en los diferentes navegadores, es una buena alternativa, diferente de la propiedad opacity ya que sólo afecta a elementos individuales.

Cras porttitor sodales lectus, ut tincidunt lacus posuere non. Mauris nunc urna commodo viverra et, ornare non tellus! Duis ac arcu lorem, in iaculis erat! Nulla quis tellus ut tortor orci aliquam.

efecto onmouseover

Dos animaciones de Pixar

2009-11-01T00:00:00.000-03:00

REFERENCIAS:Poca Tinta

Iconos sociales

2009-10-31T00:00:00.000-03:00


Bubble Text Social Icons
	Incluye 29 íconos de 256x256 en formato PNG creados por Frogx3.descargar


Mini Social Icon Set
	Incluye 30 íconos de 16×16 en formato PNG.descargar


Cheers
	Incluye 12 íconos de 128×128 en formato PNG creados por Helen Gkizi.descargar

Windows Live SkyDrive Explorer

2009-10-30T00:00:00.000-03:00

Aunque Windows Live SkyDrive nos jugó una mala pasada y no nos deja usarlo para cierto tipo de archivos que necesitamos ejecutar desde el blog, aún así, sigue siendo una buena alternativa para alojarlos porque es sencillo de manejar y útil cuando compartimos información que debe descargarse.

Sus 25 gigas de espacio, la posibilidad de establecer restricciones al acceso y el hecho de aceptar casi cualquier formato, lo siguen teniendo entre mis sitios de uso corriente.

En todo caso, una molestia en su manejo es que ciertas funciones como subir archivos son más cómodas con el ActiveX que sólo funciona en Internet Explorer pero, eso tiene remedio con un software muy interesante llamado Windows Live SkyDrive Explorer que, por lo que he visto, funciona muy bien y ahorra tiempo.

Lo instalamos en Windows descargándolo gratuitamente y desde ese momento, podremos acceder a cualquiera de nuestras cuentas de SkyDrive desde el Explorador de Archivos, sea este el de Windows o cualquier otro que utilicemos. Aparecerá como carpeta virtual dentro de Mi PC y, de alguna manera, funciona como un FTP.

Click en el ícono y accedemos de manera tradicional, con nuestra ID y contraseña. a partir de ese momento, estaremos conectados y sincronizados con el servicio hasta que apaguemos la PC o cerremos la sesión con el botón Logout que se adosa a la barra de herramientas del explorador.

Se nos mostrará como árbol de directorios y se mostrarán los archivos alojados, su tamaño, tipo, fecha de creación, etc. Podremos crear carpetas y subcarpetas, renombrar, copiar, pegar, eliminar, tanto archivos individuales como estructuras enteras del mismo modo en que lo haríamos en nuestra PC, arrastrando y soltando o bien usando los menues.

REFERENCIAS:ghacks.net

Cambiar una palabra por un logo o una imagen

2009-10-29T00:00:00.002-03:00

Una de las posibilidade del JavaScript es que nuestro blog puede tener ciertas características y luego, algún tipo de código las puede cambiar muy rápidamente y sin que esto sea evidente para los visitantes. Un ejemplo típico de esto son los emoticones en los comentarios; alguien escribe cierta combinación de caracteres como :) y una función se encarga de buscarlos y cambiarlos por una imagen

Con el mismo criterio y de manera simple, también es posible modificar otro tipo de textos, en realidad, cualquiera.

Supongamos que nos gustaría que en las entradas, cada vez que hacemos referencia a nuestro sitio, en lugar de aparecer un enlace como texto, quisiéramos que se muestre una imagen, alguna clase de logo. Es sencillo de hacer, escribimos el código en la entrada y listo:

...etiam rhoncus iaculis magna ac accumsan sed at dui et eros mollis hendrerit ...

<a href="mi_URL" target="_blank"><img src="mi_LOGO" /></a>

No hay problema pero ... hay que escribirlo ... eso mismo lo podríamos hacer de manera automática y evitarnos el trabajo de recordar el código; para eso, sólo necesitamos de una función cuya estructura elemental sería algo así:

<script type='text/javascript'>
//<![CDATA[
  function reemplazaLogos(cual) {
    if(!document.getElementById) { return; }
    var verificar = "post-" + cual;
    bodyText = document.getElementById(verificar);
    elTexto = bodyText.innerHTML;
    elTexto = elTexto.replace(/PALABRA/g,'CODIGO_HTML');
    bodyText.innerHTML = elTexto;
  }
//]]>
</script>

¿Qué hará eso? Una vez que las entradas son mostradas, buscará dentro de ellas una PALABRA y la reemplazará por un código HTML que deberemos establecer nosotros.

¿Qué palabra? Cualquiera pero es recomendable que usemos una plabra inventada, algo que podamos recorar con facilidad y que no tenga otro posible uso. Por ejemplo, podría usar MILOGO y hacer que en lugar de verse esa palabra, se viera una imagen que fuera un enlace a mi sitio:

<script type='text/javascript'>
//<![CDATA[
  function reemplazaLogos(cual) {
  if(!document.getElementById) { return; }
    var verificar = "post-" + cual;
    bodyText = document.getElementById(verificar);
    elTexto = bodyText.innerHTML;
    elTexto = elTexto.replace(/MILOGO/g,'<a href="http://misitio.blogspot.com" target="_blank"><img src="URL_imagen" style="vertical-align:text-bottom;" /></a>');
    bodyText.innerHTML = elTexto;
  }
//]]>
</script>

Coloco entonces eso antes de </head> y me faltaría hacer que se ejecutara. Para que esto funcione sin problemas y sin interferencias, lo que debemos hacer es identificar las entradas de manera precisa, dándoles un ID exclusivo. Expandiendo los artilugios, buscaremos algo así:

<div class='post-body entry-content'>
  <data:post.body/>
  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Y reemplazaremos lo indicado por esto:

<div class='post-body' expr:id='&quot;post-&quot; + data:post.id'>
  <data:post.body/>
  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<script type='text/javascript'>reemplazaLogos(&#39;<data:post.id/>&#39;););</script>

¿Podría usarse más de una palabra? Sí, bastaría agregar líneas como esta, una debajo de la otra:

elTexto = elTexto.replace(/OTRAPALABRA/g,'CODIGO_HTML');

En este ejemplo online se lo puede ver en funcionamiento.

VideoSurf_ Ampliando la búsqueda de videos

2009-10-28T00:03:00.002-03:00

VideoSurf es una extensión para Firefox que amplia los resultados de la búsqueda de videos mostrándolos de manera más que interesante.

Una vez instalada, podremos habilitarla o deshabilitarla para diferentes sitios: Google, Yahoo, Twitter, YouTube y FiendFeed

VideoSurf es un buscador de videos muy potente que además, dispone de un API para desarrolladores y un widget que podemos insertar en cualquier página web.

más resultados »
Powered by VideoSurf

REFERENCIAS:Lifehacker

Deseos de volar

2009-10-28T00:00:00.000-03:00

META Page-Enter y Page-Exit (sólo en IE)

2009-10-27T00:00:00.000-03:00

Esto es un poco "antiguo" y sólo funciona en Internet Explorer pero, ya que lo preguntan, lo contesto aunque no creo que sea algo para recomendar sino un resabio de la guerra entre Microsoft y Netscape, cuando ambos peleaban por controlar el mercado de los navegadores.

Sin embargo, no deja de ser sorprendente el uso de los filtros de IE y es una pena que no se hayan estandarizado.

Se trata de las transiciones entre páginas, es decir, la página a la que entramos no se muestra de modo normal sino que aparece con alguna clase de efecto visual (más información).

El código que se utiliza se incluye en una etiqueta META en el HEAD de la página y hay 24 efectos disponibles que pueden verse sólo cuando entramos a una página o cuando salimos de ella:

<meta http-equiv='Page-Enter' content='revealTrans(Duration=VALOR,Transition=VALOR)' / >

<meta http-equiv='Page-Exit' content='revealTrans(Duration=VALOR,Transition=VALOR)' / >

donde el VALOR de Duration es el tiempo expresado en milisegundos (normalmente es 1) y el de Transition es un número de orden que indica el tipo de transición (0 a 23).

Transition=0 Box in
Transition=1 Box out
Transition=2 Circle in
Transition=3 Circle out
Transition=4 Wipe up
Transition=5 Wipe down
Transition=6 Wipe right
Transition=7 Wipe left
Transition=8 Vertical blinds
Transition=9 Horizontal blinds
Transition=10 Chess across
Transition=11 Chess down
Transition=12 Random dissolve
Transition=13 Split vertical in
Transition=14 Split vertical out
Transition=15 Split horizontal in
Transition=16 Split horizontal out
Transition=17 Strips left down
Transition=18 Strips left up
Transition=19 Strips right down
Transition=20 Strips right up
Transition=21 Random bars horizontal
Transition=22 Random bars vertical
Transition=23 Random

Hay un efecto especial llamado Blend que tiene un parámetro específico:

<meta http-equiv='Page-Enter' content='blendTrans(Duration=VALOR)' / >

El resultado de los efectos puede verse en este demo pero sólo en Internet Explorer:

TRANSICIONES

xx - Blend in
00 - Box in
01 - Box out
02 - Circle in
03 - Circle out
04 - Wipe up
05 - Wipe down
06 - Wipe right
07 - Wipe left
08 - Vertical blinds
09 - Horizontal blinds
10 - Chess across
11 - Chess down
12 - Random dissolve
13 - Split vertical in
14 - Split vertical out
15 - Split horizontal in
16 - Split horizontal out
17 - Strips left down
18 - Strips left up
19 - Strips right down
20 - Strips right up
21 - Random bars horizontal
22 - Random bars vertical
23 - Random

Incrustar múltiples videos de YouTube

2009-10-26T00:00:00.000-03:00

Claro que podemos incrustar múltiples videos de YouTube sin nada especial, copiamos los códigos y listo pero, eso significará que nuestra página se hará muy lenta. También es cierto que podemos recurrir a algún truco que resuelva esto o usar alguna ventana modal.

Otra posibilidad y una buena idea es la que muestran en Nine-One-One... Need Code, Help! que utiliza la librería SWFobject y el API del mismo YouTube.

Si ya tenemos esa librería en nuestro sitio, no hace falta agregarla. Si no la tenemos, podemos hacerlo poniendo esto antes de </head> o directamente en una entrada:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

Ahora, donde querramos que se vea nuestra lista de videos, escribiremos lo siguiente:

<div id="contenedorYT">Cargando ...</div>

<script type="text/javascript">
  swfobject.embedSWF(
    'http://www.youtube.com/v/ID_VIDEO_1&enablejsapi=1&rel=0&fs=1',
    'contenedorYT',
    '425','344', '8',null,null,
    {allowScriptAccess: 'always',allowFullScreen: 'true'},
    {id: 'reproductorYT'});

  function cargarVideo(id) {
    var o = document.getElementById( 'reproductorYT' );
    if( o ) {o.loadVideoById( id );}
  }
</script>

Todo eso en una sola línea si se trata de una entrada de Blogger.

ID_VIDEO_1 es el ID del primer video, el que aparecerá por defecto
425 y 344 son el ancho y alto del video
contenedorYT es el ID del DIV donde se mostrará el video
reproductorYT es el ID del reproductor en si mismo

Debajo, pondremos nuestra lista de videos a reproducir, en este caso, usando las mismas miniaturas que nos provee YouTube:

<div class="videominiaturas">
<a href="javascript:cargarVideo(ID_VIDEO_1);"><img src="http://img.youtube.com/vi/ID_VIDEO_1/1.jpg" /></a>
<a href="javascript:cargarVideo(ID_VIDEO_2);"><img src="http://img.youtube.com/vi/ID_VIDEO_2/1.jpg" /></a>
.......
<a href="javascript:cargarVideo(ID_VIDEO_N);"><img src="http://img.youtube.com/vi/ID_VIDEO_N/1.jpg" /></a>
</div>

Vale recordar que el ID es una serie de once caracteres alfanuméricos que podemos tomar desde cualquier página del servicio. Por ejemplo, si el video fuera este:

http://www.youtube.com/watch?v=uKkbn-pdCMA

nuestro enlace sería así:

<a href="javascript:cargarVideo('uKkbn-pdCMA');"><img src="http://img.youtube.com/vi/uKkbn-pdCMA/1.jpg" /></a>

El resultado, será un video incrustado y debajo, una serie de miniaturas donde podremos hacer click para ir ejecutándolos uno a uno y que se irán cargando de manera dinámica.

You need Flash player 8+ and JavaScript enabled to view this video.

Kerixep

2009-10-25T00:00:00.001-03:00

Click en la imagen para jugar.

enlace alternativo

Packs íconos de noobr.net

2009-10-24T00:00:00.001-03:00


NovoDangos
	Incluye 9 íconos en formato PNG.descargar


Blacy
	Incluye 50 íconos en formato PNGdescargar


Yolks
	Incluye 40 íconos de 50×50 en formato PNG.descargar

REFERENCIAS:noobr.net/

Brevísima crónica del colapso de Blogger

2009-10-23T05:10:00.002-03:00

En horas de mi madrugada (vaya uno a saber la hora de otros lugares de este planeta) Blogger colapsó.

Bah, eso no sorprende a nadie pero, no fue un colpasito de esos comunes y corrientes, fue un colpsón monumental, se murió todo, absolutamente todo, era como si lo hubieran desenchufado o, si, como me decía Nico, alguien hubiera derramado el vino sobre las consolas. El kaput fue completo, total, de antología, no sólo no podía accederse al escritorio sino que tampoco podía verse ningún blog en ninguna parte del mundo.

Mirando la búsqueda de Twitter era increible ver como aparecían quejas, preguntas e insultos a razón de 30 mensajes por segundo en todos los idiomas:

Al rato (bastante rápido si nos guiamos por otros antecedentes similares), Blogger informaba (también en Twitter, claro, si no podía hacerlo en otro lado) que: "estaba investigando el apagón (SIC) ocurrido en blogger.com y of course daba gracias por la paciencia (de santos) y afirmaban que estaban trabajando para resolver el problema".

Pasó media hora y la humanidad se unía en un solo grito: What the heck is wrong with Blogger? ...

Pasaron 45 minutos ... pasó una hora ... pasaron dos horas y por fin Blogger dijo: "We have fully restored Blogger functionality. Thanks for your patience."

Si usted no tuvo la suerte de participar en este Rocky-Blogger-Horror-Show, espero que mi crónica de los hechos haya sido lo suficientemente descriptiva. Si no lo fue, no importa, no se perdió de nada, solo de una serie de números de error ininteligibles pero, eso lo resolvemos rápido. Elija el que más le guste:

bX-9d2teg
bX-goamst
bX-5eka1d

En fin, me uno a lo que decía un usuario: La canción favorita de Blogger es "I'm Down" así que, ahora que funciona, me permito ofrecérsela de regalo.

You telling lies thinking I can't see, you can't cry 'cos you're laughing at me
I'm down ... oh yes I'm down, down, down, down, down, down, down, down, down, down ...

Crear una encuesta con Google Docs

2009-10-23T00:00:00.000-03:00

Así cómo Google Docs nos permite usar los feeds de los documentos creados para utilizarlos como bases de datos mínimas, también tiene opciones más simples a las que podemos acceder para generar utilidades de distinto tipo. Una de ellas son los formularios:

El ejemplo más sencillo es un formulario con una encuesta.

Es cierto que Blogger dispone de un gadget para encuestas pero, es bastante limitado. Por el contrario, los formualrios de Google Docs tienen muchísimas opciones: textos simples, múltiple choice, listas, escalas, etc; y además, todas ellas pueden combinarse y generar encuestas entrelazadas entre si de varias páginas de longitud.

No hay mucho que explicar al respecto, basta crear un formulario nuevo y jugar un rato con las diferentes alternativas ya que el sistema es bastante amigable y podemos editarlo tantas veces como se nos ocurra.

Si bien el resultado por defecto es un texto plano, hay muchas plantillas que pueden seleccionarse que resuelven el tema gráfico aunque sea parcialmente.

Una vez que ya hemos creado nuestra encuesta, basta guardarla y listo. En el menú More Actions veremos una opción Embed que nos dará el código para insertarla en una página web y que, como todo código HTML, podemos personalizar un poco:

<iframe src="http://spreadsheets.google.com/embeddedform?key=xxxxxxxxxxxxxxxxxxxxxxx" width="760" height="583" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>

Obviamente, el tamaño suele ser excesivo así que es mejor cambiarlo para adaparlo a nuestro siito pero, también podemos usar alguna ventana modal para mostrarlas ya que se trata de una página web. En este caso, usando LightWindow:

<a class="lightwindow" params="lightwindow_width=670,lightwindow_height=560" href="http://spreadsheets.google.com/embeddedform?key=xxxxxxxxxxxxxxxxxxxxxxx">ENLACE</a>

Este es un ejemplo concreto .. aunque un poco tonto, claro

EJEMPLO DE UNA ENCUESTA

Aún más interesante es que los resultados son accesibles de dos formas a través del menú See Responses, podemos verlos como un gráfico (Sumary) y , como el formulario creado es una hoja de cálculo, podemos acceder a ella y ver la información recogida.

Aunque, como esos resultados también son una página web, podemos mostrarlos del mismo modo que la encuesta en si misma:

VER RESULTADOS DE LA ENCUESTA

Desde el menú Share de la hoja de cálculo, podemos seleccionar Set Notifications Rules para que nos envien un mail cada vez que alguien responde, compartirla, etc (más información).

File not found

2009-10-22T00:00:00.000-03:00

Un blog en Blogger y el alojamiento de archivos ---> un problema recurrente y un problema que sólo tiene una posible solución, que el servicio nos permita alojarlos de una vez por todas ... pero eso es un sueño, una utopía, un ruego y nada más.

En este momento, el problema se ha generado en algunas cuentas de Fileden. Hace días que tienen problemas y no hay forma de acceder a ellas. Ahora, un comunicado oficial aclara las cosas. En resumen dicen que un fallo con los discos duros de un par de sus servidores han terminado por destruir parte de la información allí guardada y, al parecer, el contenido de ciertas cuentas se ha perdido y difícilmente pueda ser recuperado.

Esto afecta a todas las cuentas creadas en el año 2006 y las creadas en enero y julio del 2009.

Podrá ser un buen o mal servicio, podría haber sido evitado, quién sabe. Lo cierto es que esto es algo que puede pasar con cualquier sistema y en cualquier momento así que somos nosotros quienes debemos tomar acciones para minimizar los posibles consecuencias.

Es fundamental, entonces, que respaldemos la información y que esos respaldos sean redundantes.

Acostumbrémonos a exportar nuestro blog de manera sistemática y mantener no una sino dos o tres copias de estos archivos exportados en nuestra PC. Para eso, en Configuración | Básico, la primera opción es Herramientas del blog. Click en Exportar blog y nos guardará un archivo XML con las entradas, comentarios y otros datos de la configuración. Con ese archivo, mal que mal, podremos, en caso de emergencia, restaurar nuestro sitio haciendo el proceso inverso.

Lo mismo debemos hacer con la plantilla desde Diseño | Edición de HTML, hacemos click en Descargar plantilla completa y tendremos un archivo XML pero, esto no será suficiente. Los elementos agregados no se descargan así que deberíamos tomarnos el trabajo de copiar su contenido y guardarlo de manera separada.

Ningún sistema de backup incluye las imágenes así que tengamos la precausión de tenerlas en nuestra PC, lo mismo que todo otro tipo de archivo accesorio, scripts, CSS, Flash. No demos nada por sentado, ningún sistema es infalible y todo puede ser perdido en un instante. Nuestra única salida es ser precavidos.

Es recomendable usar Blogger mismo para alojar las imágenes de los posts y de la plantilla; si nos parecen importantes, tengamos una copia siempre disponible.

No confiemos en ningún servicio externo, tratemos de usar aquellos que nos ofrecen una URL amigable y alojemos las cosas en dos sitios o cuentas diferentes, de tal modo, podremos permutar rápidamente de uno a otro servicio sin necesidad de editar las entradas una por una. También podemos usar algún script como el que se explicaba en esta entrada o bien redireccionar los archivos de alguna manera, modificando los enlaces antigüos por los nuevos.

Una de las principales características de la web es su dinamismo y eso hace que todo sea efímero por lo tanto, no hay que confiarse jamás; ningún servicio es 100% fiable y cualquiera puede fallar. Mejor dicho, inevitablemente, en algún momento, todo servicio fallará. Si lo tenemos claro, los problemas serán molestos pero podremos resolverlos.

Guard

2009-10-21T00:20:00.001-03:00

¿Estará funcionando el blog?

2009-10-21T00:00:00.000-03:00

Is my blog working es un servicio online que verifica si un blog está funcionando y lo hace de manera rápida, mostrándonos cómo responde ante ciertas solicitudes.

Entramos la URL del sitio y en unos segundos tendremos información divididida en dos secciones. La primera, incluye datos como el chequeo del servidor, los feeds, el archivo robots.txt, la cantidad de página indexadas en Google y Bing, etc. La segunda, incluye un análisis sobre la velocidad y el volumen de las páginas.

Tres enlaces adicionales permiten acceder a otras herramientas:

Validar el HTML via w3.org
Validar los feeds via feedvalidator.org
Verificar los headers HTTP via redbot.org

Disponen de un bookmark así que podemos agregar este enlace a muestros marcadores.

REFERENCIAS:ghacks.net

Resumen Posts 3: Las miniaturas

2009-10-20T00:00:00.001-03:00

Para terminar con los posts resumidos sólo faltaría una cosa, ver como colocar una imagen miniatura aunque primero voy a responder a una pregunta.

En el ejemplo anterior se muestra la forma de crear esos resúmenes del mismo modo que lo hace PeekABooPost; el home normal pero las páginas con listas de entradas resumidas. Ese no es el único modo de hacerlo y, en mi caso uso una condición diferente, el primero de cualquier pagina se muestra entero y el resto, resumido. Para eso, no hace falta cambair mucho, basta modificar la condición que antes era esta:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:include data='post' name='ResumenPost'/>
  <b:else/>
    <b:include data='post' name='post'/>
  </b:if>
<b:else/>
  <b:include data='post' name='post'/>
</b:if>

por esta otra:

<b:if cond='data:post.isFirstPost'>
  <b:include data='post' name='post'/>
<b:else/>
  <b:include data='post' name='ResumenPost'/>
</b:if>

Vamos entonces a la imagen. Primero, agregamos una celda más en la tabla que teníamos:

<b:includable id='ResumenPost' var='post'>
  <table cellpadding='0' cellspacing='0' class='post-resumen'><tbody><tr>
    <td class='celdaimg' rowspan='2'><div class='miniresumenpost' expr:id='&quot;thumb-&quot; + data:post.id'/></td>
    .......

Tendrá una clase CSS llamada celdaimg y contendrá un DIV con una clase miniresumenpost y al que identificaremos individualmente con un ID: thumb-xxxxxxxxxx. El CSS para agregar será algo así:

.post-resumen td.celdaimg { /* el ancho de esa celda con la imagen */
  width: 100px;
}

.miniresumenpost { /* la imagen será un fondo, centrado y del tamaño que uno quiera */
  background: transparent url() no-repeat scroll 50% 50%;
  height: 120px;
  overflow: hidden;
  width: 90px;
}

Esta sólo es una alternativa pensada para no redimensionar las imágenes ya que al forzarlas a tener un tamaño fijo se deforman. De este modo, se usa la imagen tal cual pero sólo se muestra una parte de ella; en este caso, la parte central y eso es lo que define la posición de background 50% y 50%.

Por último, el script que es el mismo que se utilizaba antes al que se le agrega el manejo de las miniaturas:

// RESUMEN POSTS
function resumenPost(idPOST) {

  var divAuxiliar = "dummy-" + idPOST;
  var contenido = document.getElementById(divAuxiliar);

  // buscar una imagen y mostrarla
  var listaImagenes = contenido.getElementsByTagName("img"); // leemos la lista de imágenes del post
  var mostrarImagen = "http://img340.imageshack.us/img340/8063/imagennodisponible.png"; // la imagen por defecto
  if(listaImagenes.length>0) { // si hay una imagen, usamos la primera que encontramos en el post
    mostrarImagen = listaImagenes[0].src;
  }
  var spanThumb = "thumb-" + idPOST; // y la colocamos como fondo en el DIV
  document.getElementById(spanThumb).style.backgroundImage =  "url("+ mostrarImagen + ")";

  // crear un extracto de la entrada
  contenido = document.getElementById(divAuxiliar).innerHTML;
  resumen = contenido.replace(/<[^>]+>/g,'');
  longitud = 150;
  var auxiliar = resumen.split(" ");
  var nueva ="";
  for(var i=0; i<auxiliar.length; ++i) {
    nueva = nueva.concat(auxiliar[i]) + " ";
    if(nueva.length > longitud) {break}
  }
  resumen = nueva +"...";
  var spanResumen = "resumen-" + idPOST;
  document.getElementById(spanResumen).innerHTML = resumen;

}

Y allí se acaba el juego. El resultado puede verse online en este blog de pruebas y la plantilla se encuentra en este ZIP

30 herramientas de Adobe Air para desarrolladores

2009-10-18T23:00:00.000-03:00

Herramientas de Adobe Air para desarrolladores publicadas en varias entradas de webresourcesdepot.com ... desarrolladores o simples curiosos como nosotros

colrful buscar imágenes en función de un color
Icon Generator permite crear íconos
Shrink O’Maticredimensionar mútiples imágenes de una vez.
Color Browser generar paletas de colores
Color Picker buscar y generar paletas de colores
ImageSizer redimensionar y recortar imágenes
JustResizeIt! redimensionar múltiples imágenes
Xe-IMG Editor simple editor de imágenes
Contrast-A colores experimentales en 3D
Dot3D Transforma una imagen de 16x16 en una imagen 3D
Random Pattern generador de patterns
Pixus regla para medir pixeles
PixelPerfect otra regla para medir pixeles
Caliper Project y otra regla para medir pixeles
WebKut captura de pantalla con selección
Web Snapshot otra herramienta para capturar pantallas
PrintScreenshot y otro capturarador de pantallas
Font Picker previsualizar textos con diferentes fuentes
Polaris interfaz para Google Analytics
SEO Analizer analisis general de un sitio web
Big Browser permite ver múltiples páginas webs en una sola ventana
Multi-Panel Browser otro visor de páginas webs
SWF To Animated GIF covierte archivos SWF en GIFs animados
RichFLV – FLV Editor mini-editor de archivos FLV y MP3
Em based layouts convierte medidas em y px para utilizar en las propeidades CSS
The SQLite Sorcerer gerenciador de bases de dato SQL
Lita – SQLite Administration Tool otro gerenciador de bases de dato SQL
ParseForGo mini-editor de PHP que incluye un diccionario de funciones
jsBeautifier formatea códigos de JavaScript
RegExr Desktop para aprender y editar expresiones regulares

DivX en StageVU

2009-10-18T00:13:00.002-03:00

No sé si StageVU es el sucesor del difunto Stage6 o no pero, mientras dure, hay que aprovecharlo.

Los videos pueden ser vistos online o descargase en la PC pero requieren que se tengan instalados los códecs de DivX, en especial el DivX Web Player que está disponible tanto para para Windows como para Macs.

El DivX es un formato creado por Adobe Systems que produce videos de mayor calidad que los que acostumbramos a ver con los reproductores de Flash y funciona en cualquier navegador.

StageVU es un poco confuso a la hora de buscar pero tiene la misma estructura que sus predecesores. Si queremos subir videos, podemos registrarnos gratuitamente y el proceso es más o menos sencillo. Admite todos los formatos conocidos, pueden crearse canales, comentar, etc. También pueden insertarse una página web mediante un IFRAME

Este es un ejemplo: Pink Floyd - The Wall, la película llevada al cine por Alan Parker en 1982 y protagonizada por Bob Geldof.

Click en la imagen para comenzar.

Pink Floyd - The Wall.avi 608 x 256 : 95 minutos : 516MB : idioma inglés

REFERENCIAS:arginati