Vagabundia

Menú animado con JQuery

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

Animated Navigation es es un menú animado simple que requiere del uso de la librería JQuery que podemos agregar a nuestro sitio utilizando las AJAX Libraries API de Google agregando lo siguiente antes de </head>:

<script src="http://www.google.com/jsapi"></script>
<script>
  google.load("jquery", "1.3.2");
</script>

o bien, enlazándolas de manera directa:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>

El primer paso es agregar el pequeño código del script, también, antes de </head>:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  $("#topnav li").prepend("<span></span>");
  $("#topnav li").each(function() {
    var linkText = $(this).find("a").html();
    $(this).find("span").show().html(linkText);
  }); 
  $("#topnav li").hover(function() {
      $(this).find("span").stop().animate({marginTop: "-40"}, 250);
    } , function() {$(this).find("span").stop().animate({marginTop: "0"}, 250);});
  });
//]]>
</script>

Y luego, el CSS que podremos personalizar a gusto:

<style type="text/css">
  ul#topnav {  /* el menú es una lista */
    float: left;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  ul#topnav li { /* cada item de la lista */
    float: left;
    height: 40px;
    list-style-type: none;
    margin: 0;
    overflow: hidden; /* importante */
    padding: 0;
  }
  ul#topnav a, ul#topnav span { /* cada item es un enlace */
    clear: both;
    height: 20px;
    line-height: 20px;
    padding: 10px 15px;
    float: left;
    /* propiedades de color, fonto y fuente de los textos */  
  }
  #menu li a:hover { /* efecto onmouseover sobre los enlaces */
    /* propiedades de color, fonto y fuente de los textos */  
  }
</style>

Hasta allí toda la preparación, ahora, el menú en si mismo que podemos colocar en cualquier parte, donde deseemos mostrarlo:

<ul id='topnav'>
  <li><a href="direccion_URL"> MENU-1 </a></li>
  <li><a href="direccion_URL"> MENU-2 </a></li>
  <!-- cada item es un enlace -->
  <li><a href="direccion_URL"> MENU-X </a></li>
</ul>

Quienes utilicen otro tipo de framework como Prototype + Scriptaculous deben tener en cuenta que habrá un conflicto ya que las librerías son incompatibles. Para esto, hay una solución que implica editar los scripts. Otra alternativa menos elegante pero en este caso, efectiva, es usar un blog auxiliar, colocar el menú allí y cargarlo mediante un IFRAME que es el modo en que se ve en el ejemplo de esta entrada.

La evolución de Twitter

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

Geolocalización

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

Por lo que dicen en Ojo Buscador, Google admite que se utilicen una serie de etiquetas META para geolocalizar un sitio o una página web. Un ejemplo:

<meta name=”geo.placename” content=”España” />
<meta name=”geo.position” content=”coorX;coorY” />
<meta name=”geo.region” content=”es” />

Esto se suma a la opción Establecer Orientación Geográfica que ofrecen las Herramientas para Desarrolladores de Google y al elemento Ubicación del mismo Blogger.

No son etiquetas esenciales y si este tipo de cosas es útil o inútil dependerá del tipo de sitio. Más información: geotags y geourl.

Usar Disqus para crear un mini foro

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

Alguna vez hablaba de usar una entrada de Blogger para crear un formulario de contacto, tiene sus limitaciones y, en ese sentido, Disqus podría ser una alternativa más razonable. No pensando tanto en ese tipo de feedback que suele ser privado sino como herramienta de comunicación, uno de esos libros de visitas que tanto se utilizan, un simil chat o un pseudo-foro mínimo.

Como el servicio tiene muchas alternativas de configuración en cuanto a quienes pueden administrarlo o participar, es más o menos sencillo armar una pequeña red privada o pública.

El proceso es similar al comentado antes, pero, esta vez, en lugar de usarlo como alternativa para los comentarios del blog, lo usaremos en un blog nuevo que sólo contendrá eso así que primero lo creamos y luego, lo agregamos y seleccionamos el lenguaje.

A partir de ese momento, las opciones que nos muestran son la forma en que controlaremos las alternativas que tienen los usuarios para comentar: con una cuenta de Facebook (el API Key la obtenemos siguiendo los pasos indicados en la misma página) , con OpenID, con una cuenta de Yahoo o de Twitter, etc. También conviene marcar Akismet para manejar el spam, para esto último, requerimos registrarnos en wordpress.com aunque no es necesario crear un blog, basta solicitar un nombre de usuario:

Gimme a blog! (Like username.wordpress.com)
Just a username, please.

El resto dependerá un poco de lo que nosotros decidamos:

Settings moderation permite establecer los datos básicos, elegir el moderador principal y eventualmente, agregar otros; seleccionar los niveles de seguridad, restringir palabras, enlaces, establecer lista "blancas" o "negras", etc.
Settings Customize nos permite personalizarlo gráficamente
Settings General nos permite modificar los tipos de logins admitidos (incluyendo la posibilidad de video comentarios; quien pueden comentar (registrados o no), crear categorías, etc.

El código necesario lo vamos a obtener desde Universal Code.

Ahora, en Blogger, limpiaremos nuestra plantilla de elementos y secciones, sólo necesitamos un HEAD y un BODY elementales:

<head>
  <b:include data='blog' name='all-head-content'/>
  <title><data:blog.pageTitle/></title>
  <b:skin><![CDATA[
    body {background: #FFF; color: #777; font-family: Arial; font-size: 12px; margin: 0; text-align: center;}
    #navbar {display: none; height: 0; visibility: hidden;}
    a:link, a:visited {color: #006400; font-family: arial; text-decoration: none;}
    a:hover {color: #3F9CC7; text-decoration: underline;}
    #header-wrapper {background-color: #000; margin: 0 auto; text-align: center;}
    #header-wrapper h1 {color: #92C72A; font-size: 50px; font-weight: normal; line-height: 100px; margin: 0;}
    #outer-wrapper {margin: 0 auto; padding: 10px; text-align: left;}
    #content-wrapper {margin: 0 auto; width: 600px;}
  ]]></b:skin>
</head>

<body>
  <div id='outer-wrapper'>
    <div id='header-wrapper'>
      <h1>mensajes</h1>
    </div>
    <div id='content-wrapper'>
      <div id='disqus_thread'/>
      <script src='http://disqus.com/forums/minombre/embed.js' type='text/javascript'/>
      <noscript><a href='http://disqus.com/forums/minombre/?url=ref'>View the discussion thread.</a></noscript>
      <a class='dsq-brlink' href='http://disqus.com'>prueba de comentarios utilizando <span class='logo-disqus'>Disqus</span></a>
    </div>
  </div>
</body>

Y eso es todo, luego, podemos mostrarlo de deferentes modos, por ejemplo, dependiendo del espacio disponible podría agregarse como IFRAME en un elemento HTML cualquiera:

<div align="center">
<iframe scrolling="yes" style="width:100%;height:400px;" frameborder="0" marginheight="0" src="URL_blog" marginwidth="0" align="middle"></iframe>
</div>

o lanzarlo con una ventana modal como esta:

<a class="lightwindow" href="URL_blog" params="lightwindow_width=750,lightwindow_height=600,lightwindow_loading_animation=true" title="" rel=""> MENSAJES </a>

Este es un modelo de pruebas:

Corre que te pillo

2009-11-09T15:49:00.002-03:00

Obviamente, la entrada de Gem@ tiene algún detonador personal, alguna de esas gotas que rebalsa el vaso, algún pseudo-comentario que llega en el momento exacto en que el horno no está para bollos o nos hace click en alguna parte. Eso es lo bueno de un blog, esa es la diferencia sustancial entre una página web "normalita" y un blog.

Aquí dentro somos personas que escriben sobre temas diversos, temas que nos interesan, que nos gustan, que nos parecen curiosos, que nos llaman la atención y nada más. No pretendemos enseñar sino aprender; no pretendemos informar sino llevar un registro de nuestras propias experiencias. Por eso, un blog es una bitacora (palabra que me encanta y que no se ha difundido lo suficiente).

¿Cuántas veces uno lee cosas como "sí, muy lindo pero ya lo había visto"? o bien, "interesante pero ya lo sabía, esto lo publicó Magoya en su blog hace quichicientos años".

Son intervenciones inútiles porque, al final de cuentas esto no es una carrera donde importa salir primero sino una carrera donde todo el tiempo somos los primeros. Lo que es nuevo para mi es algo conocido por otro y visceversa; no hay medallas para el ganador porque si no hay perdedores es imposible que alguien gane. Este es un juego donde sólo se juega y sólo se gana jugando; nadie pierde, salvo la paciencia de tanto en tanto.

Alguna vez se decía que habíamos llegado al fin de la historia. Muchas veces se ha escuchado eso de que todo está inventado y que no hay nada nuevo bajo el sol. No es cierto. Cualquier idea puede ser re-inventada, cualquier vuelta de tuerca es siempre bienvenida; todos los libros escritos y por escribir cuentan siempre la misma historia, la nuestra, la de cada uno de nosotros y eso se parece al infinito.

En los comentarios de la entrada leo una palabras que me gusta, leo DIVERSIDAD.

Como todos somos diferentes, todos vemos las cosas de manera diferente, todos vemos un pedacito de realidad y nadie tiene el 100% de ella ni está 100% equivocado. Es natural que quienes tienen blogs de temáticas similares tengan información similar, se interesen por las mismas cosas e incluso, se repitan. Nadie debería tener el monopolio de la información, ni de esta ni de ninguna otra. Los blogs han llegado para intentar eso, para poner un poco de sal y pimienta en el panorama monocromo de los grandes medios de comunicación, para dar una visión diferente, para mirar las cosas desde algún otro punto de vista, desde cientos de miles de puntos de vista diferentes y los blogs han venido para quedarse. Los blogs SON ESO.

"Es bueno que se hable de lo mismo y aún siendo de lo mismo nunca será igual porque cada uno añade su propia esencia y eso lo hace completamente distinto ... " porque, al fin de cuentas "no es todo lo que está ni es todo lo que es"; siempre hay algo más; sólo hay que saber buscarlo.

10 plantillas de CHOCOtemplates

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

	Personal 1 Demo online: VER Descarga e información: VER
	Portal 1 Demo online: VER Descarga e información: VER
	Portal 5 Demo online: VER Descarga e información: VER
	Portal 3 Demo online: VER Descarga e información: VER
	Portal 2 Demo online: VER Descarga e información: VER
	Portfolio 7 Demo online: VER Descarga e información: VER
	Portfolio 6 Demo online: VER Descarga e información: VER
	Portfolio 5 Demo online: VER Descarga e información: VER
	Portfolio 3 Demo online: VER Descarga e información: VER
	Portfolio 2 Demo online: VER Descarga e información: VER

REFERENCIAS:>chocotemplates.com

ADVERTENCIA: No son plantillas preparadas para Blogger.

¿Qué es eso?

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

REFERENCIAS:catandrea

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).