Ser alguien en la vida

JMiur [E]

Glogster: Un sitio para crear ... glogs

No sé si Glogster es una tontera o si realmente es algo que puede resultar útil, de todas maneras es interesante de ver porque está muy bien hecho y funciona de manera tan intuitiva que es muy complicado pretender explicarlo.

Lo cierto es que ingresando al sitio se nos permite crear una página donde podemos mezclar textos, imágenes, audios y videos de muchas maneras, subiendo los archivos o extrayéndolos de otros sitios e ir armando ... glogs ... es decir páginas individuales, públicas o privadas que pueden ser compartidas en cualquier red social o incrustadas en otro sitio.

Para probarlo, basta entrar en esta página y jugar un rato. Obviamente, si luego queremos guardarlo o publicarlo nos pedirán que nos registremos de manera gratuita, un proceso que es sencillo e inmediato.

Como dije, todo es muy intuitivo y es imposible explicar todas las opciones que hay; en todo caso, lo único que puede aclararse es que para insertarlo en una web nos dan un código con un IFRAME como este:

<iframe src= "http://www.glogster.com/glog.php?glog_id=XXXXXXX&scale=100" width="960" height="1300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" style="overflow: hidden;"></iframe>

Y, como se ve, eso lo mostrará en tamaño gigante (960x1300); para reducirlo, no sólo debemos reducir e valor de width y height sino también el valor del parámetro scale que indica un porcentaje (en este caso 100%). Así que, por ejemplo, para no hacer cuentas, lo ponemos todo a la mitad:

<iframe src= "http://www.glogster.com/glog.php?glog_id=XXXXXXX&scale=50" width="480" height="650" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" style="overflow: hidden;"></iframe>

servicios

Evitar que usen iframes de nuestro sitio

En Blogger estamos acostumbrados a ver IFRAMEs, se usan en los comentarios y en muchos de los gadgets que agregamos. Es una técnica sencilla y como cualquier otra, tiene sus ventajas y desventajas.

Un IFRAME es una ventana a otro sitio, digamos que con ella, creamos un agujero en nuestra página y alli mostramos el contenido de otra página, algo que está en otra parte y sobre lo cual, por supuesto, no tenemos control. Esta etiqueta tiene algunos atributos que pueden usarse y casi como todas, acepta estilos CSS pero, todo eso, sólo afecta al marco de la ventana en si misma y no a su contenido.

Por supuesto, como todas las demás, no es una etiqueta ni mala ni buena pero, un problema que ha surgido en los últimos tiempos es que hay sitios que incrustan otros y lo hacen con el solo propósito de aprovecharse de su contenido. Es sencillo; creo un sitio en cualquier servidor gratuito que me permita hacer una página web, lo rodeo de publicidad, le pongo mi nombre y adentro meto otro sitio. Negocio redondo. Hasta en el mismo Blogger puedo hacerse algo así. Por ejemplo, podría crear un blog al que llamaré VP Iframe y meter el contenido de otro. No será muy elegante pero estamos hablando de robos y la elegancia pasa a ser un elemento intrascendente así que aquí está el ejemplo.

Aunque no lo parezca, esto ya se está haciendo común así que lo que debmos hacer, sin caer en la paranoía, es protegernos.

La solución es simple y la vamos a ver en muchos sitios de la web donde se trata este tema; un script que dice algo así:

if (top.location != self.location) { top.location = self.location; }

y que lo que hace es redireccionar cualquier sitio que coloque un IFRAME con nuestra URL y lo envie de vuelta a casa, es decir a nuestra página.

En el caso de Blogger se nos complica un poquito ya que el mismo Blogger usa IFRAMES para, por ejemplo, su Editor de Plantillas así que si pusieramos esto directamente, no lograríamos entrar en la edición HTML de la plantilla a menos que lo hagamos rápido. Para evitar eso, tomo el script normal y le agrego un par de línes extras que verificarán si estamos dentro del dominio de blogger y si es así no hará nada.

Debemos poner el script al inicio de la plantilla para que el redireccionamiento sea inmediato así que buscamos <head> y debajo, agregamos esto (con cuidado y probando que todo funcione correctamente).

ACTUALIZADO PARA QUE FUNCIONE EN EL NUEVO DISEÑO DE BLOGGER

<script type='text/javascript'>
//<![CDATA[
  var laURL, blogger;
  laURL= window.location.href;
  blogger = laURL.indexOf("token=");
  if(blogger==-1) {
  if (top.location != self.location) { top.location = self.location; } 
  }
//]]>
</script>

Vamos a un ejemplo. Otra vez me disfrazo de ladrón, creo un blog VP Iframe y allí coloco un IFRAME a otro sitio pero, ese otro sitio tiene el script agregado a su plantilla así que apenas se abra el primero, nos redireccionará al segundo (ver ejemplo online)

Blogger | JavaScript

La barra de navegación de Blogger

El par de códigos includable e include son una de las mejores ideas que tiene Blogger. Con ellos podemos ahorrarnos trabajo a la hora de escribir cosas que se repiten. Un includable es una "subrutina" o una función, algo que se ejecutará cuando lo deseemos, llamándolo con include.

Es fácil de entender si vemos uno elemental como este:

<b:includable id='postQuickEdit' var='post'>
  <b:if cond='data:post.editUrl'>
    <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
      <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
        <span class='quick-edit-icon'>&#160;
      </a>
    </span>
  </b:if>
</b:includable>

Que lo que hace es agregar el ícono de edición donde lo querramos, para eso es que usamos esto:

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

En resumen, include "incluye" el código de un includable cuyo id es igual al atributo name; en este caso, postQuickEdit.

Todos los includables deben tener un ID y este, debe ser único pero no todos deben tener el atributo data que sólo es necesario si deseamos "transferirle" algún tipo de dato. Ese es el caso del llamado nextprev que agrega una "barra de navegación" al final de las entradas:

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
      .......
  </div>
</b:includable>

Está al final de nuestra página pero, no es obligatorio que esté allí; podemos colocarlo arriba si movemos esta línea:

<b:include name='nextprev'/>

y la colocamos inmediatamente después de:

<b:includable id='main' var='top'>

Tampoco hay nada que nos impida colocar dos barras, una arriba y otra abajo de nuestra página y personalizarlas de tal modo que se muestren diferentes; por ejemplo:

<b:includable id='main' var='top'>
  <div id='upper-blog-pager'><b:include name='nextprev'/></div>
    .......
    .......
    .......
  <div id='lower-blog-pager'><b:include name='nextprev'/></div>
</b:includable>

Les colocamos IDs diferentes por si queremos agregarles CSS. Por defecto las plantillas tienen estas definiciones de estilo:

#blog-pager-newer-link { float: left; }
#blog-pager-older-link { float: right; }
#blog-pager { text-align: center; }

que colocan el texto Entradas antiguas a la derecha, Entradas más recientes a la izquierda y Página principal en el centro. Para modificar esos textos o para cambiarlos por imágenes, basta expandir la plantilla y buscar estos tres códigos:

<data:newerPageTitle/> es el texto Entradas más recientes
<data:olderPageTitle/> es el texto Entradas antiguas
<data:homeMsg/> es el texto Página principal

podemos borrarlos y poner un texto personal o cambiarlos por una imagen usando la etiqueta IMG.

Blogger

Onbile: La versión móvil de tu blog

Onbile es un servicio gratuito que nos permite crear una versión de nuestro sitio, que funcione en móviles.

Usarlo es muy sencillo. Entramos al sitio y seguimos los pasos que nos indican. Básicamente, agregamos la dirección del blog y luego elegimos entre los diferentes diseños que además, podemos personalizar, agregando o eliminando secciones.

Una vez que nos decidimos, solicitamos el código que nos será confimado por mail.

Este código no es otra cosa que un script que agregaremos antes de </head>.

<script type='text/javascript' src='http://www.onbile.com/websites/000000000000000000000000000000'></script>

y cuyo código es de una pocas líneas que simplemente, verifican el tipo de navegador de los visitantes y, en caso de ser un móvil, redirige nuestro sitio a un perfil público que es accesible desde cualquier sistema:

Perfil público: http://onbile.com/vagabundia

Click para ver el video.

servicios

Image Silider usando sólo CSS3

Deluxe Blog Tips nos muestra una forma de crear un slider de imágenes utilizando sólo CSS3. La idea es bastante simple pero, el problema es que no funcionará en ninguna versión de Internet Explorer ya que utiliza un selector que ese navegador aún no ha implementado. Del mismo modo, el resultado en Firefox no es tan interesante como lo es en Chrome, Safari y Opera ya que habrá que esperar a que salga la version 3.7 para que las transiciones se vean animadas.

Claro que todo esto no implica que no podamos jugar un rato y empezar a acostumbrarnos a lo que vendrá.

El slider lo creamos fácilmente:

<div id="elSlider">
  <img id="imgSlider1" src="URL_imagen_1" />
  <img id="imgSlider2" src="URL_imagen_2" />
  <img id="imgSlider3" src="URL_imagen_3" />
</div>
<div id="numSlider">
  <a href="#imgSlider1">1</a>
  <a href="#imgSlider2">2</a>
  <a href="#imgSlider3">3</a>
</div>

Y ahora, el CSS del demo:

<style>
  #elSlider {
    background-color: #000;
    height: 350px;
    margin: 20px auto;
    overflow: hidden;
    position: relative;
    width: 450px;
    /* propiedades CSS3 */
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -moz-box-shadow: 0 0 30px #666 inset;
    -webkit-box-shadow: 0 0 30px #666 inset;
    box-shadow: 0 0 30px #666 inset;
  }
  #elSlider img {
    height: 300px;
    left: -450px;
    opacity: 0;
    position: absolute;
    top: 25px;
    width: 400px;
    z-index: 1;
    /* propiedades CSS3 */
    -moz-transition: all linear 500ms; /* Firefox 3.7 */
    -webkit-transition: all linear 500ms;  /* Safari y Chrome */
    -o-transition: all linear 500ms;  /* Opera */
    transition: all linear 500ms;  /* w3org */
  }
  #elSlider img:target {
    left: 25px;
    opacity: 1;
    z-index: 9;
  }
  #elSlider img:first-child {
    left: 25px;
    opacity: 1;
  }
  #numSlider {
    text-align: center;
  }
  #numSlider a {
    background-color: #000;
    border: 1px solid #444;
    color: #FFF;
    font-family: Century Gothic;
    font-size: 24px;
    font-weight: normal;
    margin: 0 1px;
    padding: 1px 10px 3px;
    text-decoration: none;
    /* propiedades CSS3 */
    -moz-box-shadow: 0px 0px 20px #444 inset;
    -webkit-box-shadow: 0px 0px 20px #444 inset;
    box-shadow: 0px 0px 20px #444 inset;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
  }
  #numSlider a:hover {
    background-color: #222;
    border: 1px solid #666;
  }
</style>

1 2 3 4 5 6

CSS

Dos packs de íconos de deviantart

Simplexity
	Contiene 119 íconos de 256x256, en formato PNG.descargar

Onibari Light Icon Pack
	Contiene 18 íconos de 245x245, en formato PNG.descargar

iconos

El nuevo código para insertar videos de YouTube

Google debe haber comprado alguna licencia para monopolizar la etiqueta IFRAME porque la usa por todos lados. Ahora, en YouTube API Blog anuncia que están experimentando con un nuevo código para insertar videos que, justamente, hace uso de esa etiqueta:

<iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0"></iframe>

Justifican el cambio explicando que con este nuevo código pueden verse los videos tanto con Flash como con los nuevos reproductores HTML5 dependiendo del navegador que se use y de las preferencias del usuario. Los navegadores compatibles son Firefox, Chrome, Opera, Internet Explorer 9, Safari y eventualmente, Internet Explorer con Google Chrome Frame instalado. Las preferencias debemos habilitarlas en nuestra cuenta, activando la versión beta de HTML5.

Por el momento, todo está muy verde pero, aparentemente, pasado el tiempo de pruebas, el nuevo código será el que nos ofrezcan por defecto.

En la práctica, por ahora podemos usar cualquiera de ellos sin notar grandes diferencias; basta saber que debemos colocar el ID del video a reproducir y establecer el tamaño modificando los atributos width y height.

REFERENCIAS:Google Operating System

YouTube

IE9.js: Solucionando algunas incompatibilidades

Para quien utiilza alguno de los scripts de Dean Edwards que permiten agregar soporte para que Internet Explorer supere alguna de las limitaciones en la interpretación de ciertas propiedades CSS, ya hay una nueva versión disponible que ha agregado algunas funciones extras.

Hasta ahora, había dos versiones: IE7.js e IE8.js; ahora,se ha sumado IE9.js.

Cualquiera de ellas puede ser utilizada directamente desde los repositorios de Google Code así que no es necesario descargar los archivos. Para esta última versión, lo que deberíamos hacer es agregar lo siguiente antes de </head>:



No se trata de alguna clase de script milagroso, sólo sirve si nuestro diseño utiliza selectores ya que permite que IE interprete algunos de ellos:
::after, ::before, :active, :focus, :lang(), :checked, :disabled, :empty, :enabled, :first-of-type, :last-child, :last-of-type, :not(), :nth-child(), :nth-last-child(), :nth-last-of-type(), :nth-of-type(), :only-child, :only-of-type, :root, :target, etc

propiedades tales como:
border-spacing, box-sizing, content y opacity

y da soporte elemental para algunas etiquetas de HTML5:
article, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, summary, time y video.

REFERENCIAS:Google Code

JavaScript

Rotaciones libres en cualquier navegador con CSS

A medida que más sitios hablan del CSS3, algunos van descubriendo que ciertas caracterísiticas ya existian desde hace tiempo en los filtros de Internet Explorer. Sin duda, no son lo mismo pero algunas cosas pueden usarse con limitaciones y es bueno que los que crean tutoriales ejemplos los incorporen ya que sino, caemos en el error de creer que, o debemos limitarnos a lo que Internet Explorer decide u odiarlo porque no hace lo que quisiéramos que haga. Ninguna de las dos posturas es correcta, ese, como todos los demás navegadores, tienen bugs y tratan las propiedades de manera diferente así que, mejor nos acostumbramos a eso porque es algo que no va a cambiar jamás.

css3please.com es uno de esos tutoriales que ha comenzado a incorporar esos filtros y nos ayuda a utilizarlos, ya que nos permite ir viendo los resultados online y copiar el código necesario. Obviamente, no lo hará con todas las propiedades ya que no todas tienen un equivalente pero, es una buna forma de aprender.

La que me resultó más interesante es la rotación. Si bien en Internet Explorer hay un filtro para eso, está limitado a rotaciones simples de 90 grados o de 180 grados lo que hace que podamos "invertir" algo pero no "rotarlo" de manera libre:


-webkit-transform: rotate(VALORdeg);
-moz-transform: rotate(VALORdeg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=VALOR);
     donde:
          0 es no rotar
          1 rota 90 grados
          2 rota 180 grados
          3 rota 270 grados (-90 grados)

Gracias a otro filtro de IE llamado Matrix, también podemos rotar algo en ángulos diferentes. Es uno de esos filtros tan complejos que ni siquiera vale la pena entender si es que nos queremos limitar a hacer algo sencillo. Para eso está la página que nos ayuda con los datos y basta poner el ángulo para que nos de la respuesta.

Vamos a crear entonces un DIV con cualquier contenido y abusando un poco de algunas otras propiedades como las gradientes:

div.rotar {
  background-image: -moz-linear-gradient(100% 100% 90deg, #000, #662200);
  background-image: -webkit-gradient(linear, left bottom, left top, from(#000), to(#662200));
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF000000', EndColorStr='#FF662200');
  border: 1px solid #FFF;
  color: #FFF;
  font-family: Verdana;
  font-size: 24px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  width: 250px;
}

<div class="rotar"> ....... </div>

Lo que veríamos es esto:

Aliquam luctus nisl vitae ligula pharetra quis sodales lectus suscipit!

Y ahora, lo rotamos 90 grados en un sentido:

.derecha90 {
  -moz-transform: rotate(45deg);  /* Firefox */
  -o-transform: rotate(45deg);  /* Opera */
   -webkit-transform: rotate(45deg);  /* Safari y Chrome */
  filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE */
}

<div class="rotar derecha90"> ....... </div>

Aliquam luctus nisl vitae ligula pharetra quis sodales lectus suscipit!

Y hacemos lo mismo en el otro sentido:

.izquierda90 {
   -moz-transform: rotate(-45deg);  /* Firefox */
  -o-transform: rotate(-45deg);  /* Opera */
  -webkit-transform: rotate(-45deg);  /* Safari y Chrome */
  filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=0.7071067811865475, M21=-0.7071067811865475, M22=0.7071067811865476); /* IE */
}

<div class="rotar izquierda90"> ....... </div>

Aliquam luctus nisl vitae ligula pharetra quis sodales lectus suscipit!

CSS

Agregar Activity Feed de Facebook a Blogger

Activity Feed es otro de los plugins sociales de Facebbok que podemos agregar en nuestro blog.

Lo que mostrará son las últimas referencias encontradas a un determinado sitio y será visible sin importar si los visitantes estan o no están logueados; si no lo están, se agregará automáticamente un botón para entrar. De alguna manera, es una forma de chequear quienes han marcado alguna entrada con Me Gusta o enlazado nuestra página.

Para usarlo, colocamos el Dominio del sitio que queremos mostrar (por ejemlo, el de nuestro blog) y luego, como con todos los demás, seleccionamos ancho, alto y alguna de las opciones gráficas disponibles, la última de las cuales llamada Recommendations, tildamos o destildamos según nos interese que se muestre algo si es que no se encuentra nada del sitio que seleccionamos.

Es importante establecer el dominio exacto porque el plugin permite rastrear dominios, subdominios o incluso páginas individuales.

Una vez que decidimos todo eso y estamos satisfechos con el resultado que puede ser previsualizado constantemente, hacemos click en Get Code y allí se nos dan dos opciones: usar un IFRAME o un script. Si elegimos el primero de ellos, basta copiar y pegar el código donde se nos ocurra mostrarlo, por ejemplo, en un elemento HTML de la sidebar.

Si elegimos el script, debemos verificar si ya tenemos agregado el cargador genérico para todos los plugins; si no es así, agregamos lo siguiente justo después de <body>:

<div id='fb-root'/>
<script type='text/javascript'>
  //<![CDATA[
    window.fbAsyncInit = function() {
      FB.init({appId: 'PROFILE_ID', status: true, cookie: true, xfbml: true});
    };
    (function() {
      var e = document.createElement('script'); e.async = true;
      e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
      document.getElementById('fb-root').appendChild(e);
    }());
  //]]>
</script>

Donde reeemplazamos PROFILE_ID por el número que nos identifica en Facebook y que veremos en la URL de cualquiera de nuestras páginas.

Hecho eso, agregamos el plugin donde se nos de la gana y para eso, basta colocar el siguiente código básico:

<fb:activity site="URL_elegida"></fb:activity>

o incluso, colocar las distintas opciones en el mismo código:

<fb:activity site="URL_elegida">" width="400" height="350" header="false" colorscheme="dark" font="tahoma" border_color="#FFF" recommendations="false"></fb:activity>

Una variante de este plugin es el llamado Recommendations y la forma de insertarla es exactamente la misma.

<fb:recommendations site="URL_elegida"></fb:recommendations>

Facebook

Ultimas entradas con miniaturas

El gadget Lista de blogs es interesante porque es una de las formas más sencillas de mostrar el contenido de los feeds de cualquier sitio pero, también lo podemos usar para mostrar los nuestros, por ejemplo, las últimas entradas.

Tiene una ventaja sobre otros sistemas: podemos mostrar miniaturas que se correspondan con las imágenes que haya en esas entradas pero tiene una limitación, sólo muestra una entrada por blog. Sin embargo, ya que los feeds son una dirección URL a la que podemos acceder agregándole algunos parámetros, podríamos utilizar esa facilidad para mostrar varias entradas del mismo sitio.

Los parámetros en cuestión son start-index max-results que son los mismos que se utilizan para agregar varios sitemaps. Lo empleamos agregándolos al final de la URL:

http://miblog.blogspot.com/feeds/posts/default?start-index=1&max-results=1

hará que se lea una sola entrada, la última ya que por defecto, los feeds están ordenados cronológicamente. Del mismo modo:

http://miblog.blogspot.com/feeds/posts/default?start-index=2&max-results=1 mostrará la segunda
http://miblog.blogspot.com/feeds/posts/default?start-index=3&max-results=1 mostrará la tercera

y así sucesivamente.

Entonces, vamos a agregar un elemento Lista de Blogs e iremos poniendo las URLs de nuestro sitio, cambiando start-index. Pondremos tantos como se nos ocurra y marcaremos las opciones a gusto.

Si guardamos eso veremos el gadget con las últimas entradas de nuestro blog pero, aún así, podríamos intentar personalizarlo más ya que tiene propiedades definidas por defecto por el mismo Blogger y como el código es accesible, nada impide que lo cambiemos. Entonces, primero crearemos un elemento Lista de blogs, agregaremos las URLs, guardaremos y luego, en la parte de Edición HTML expandiremos la plantilla y veremos el widget que se llamará BlogList1, BlogList2 o algo similar, dependiendo de si ya tenemos agregado otro gadget del mismo tipo:

<b:widget id='BlogList1' locked='false' title='EL TITULO' type='BlogList'>
<b:includable id='main'>
  ... borraremos todo lo que está acá y lo reemplazaremos ...
</b:includable>
</b:widget>

Ahora, borraré el contenido completo del includable y lo reemplazaré por otro donde he eliminado ciertas cosas y reemplazado las clases CSS para evitar conflictos:

<b:if cond='data:title != &quot;&quot;'>
  <h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
  <div class='milista' expr:id='data:widget.instanceId + &quot;_container&quot;'>
    <!-- el gadget es una lista -->
    <ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
      <b:loop values='data:items' var='item'>
        <!-- cada item de la lista corresponde a una entrada -->
        <li>
          <!-- inicio rectángulo de cada entrada -->
          <div class='UEcontenido'>
            <!-- la imagen flotará a la izquierda -->
            <div class='UEthumbnail'>
              <b:if cond='data:item.itemThumbnail'> 
                 <!-- si en el post hay una imagen, la usamos -->
                <img class='UEsithumb' expr:src='data:item.itemThumbnail.url'/>
              <b:else/>
               <!-- si no hay una imagen, ponemos una imagen personal -->
               <!-- acá debemos poner la dirección URL de la imagen a utilizar -->
               <img class='UEnothumb' src='URL_imagen_por_defecto'/>
              </b:if>
            </div>
            <!-- el titulo y enlace de la entrada -->
            <div class='UEtitulo'>
              <a expr:href='data:item.itemUrl' target='_blank'><data:item.itemTitle/></a>
            </div>
            <!-- el texto con el resumen de la entrada -->
            <div class='UEresumen'><data:item.itemSnippet/></div>
          </div>
          <!-- final rectángulo de cada entrada -->
          <div style='clear: both;'/>
        </li>
      </b:loop>
    </ul>
  </div>
</div>

Por supuesto, si se comprende qué es cada parte, esto podría organizarse de cualquier otra forma; en este ejemplo, sólo faltaría agregar el CSS antes de </head>:

<style>
  .milista ul { border-bottom: 1px dotted #555; list-style-type: none; margin: 0; padding: 0; }
  .milista ul li { background-color: #000; border-top: 1px dotted #555; clear: both; list-style: none; }
  .milista ul li:hover { background-color: #123; }
  .milista .UEcontenido { padding: 5px; }
  .milista .UEtitulo { line-height: 50px; height: 50px; }
  .milista .UEtitulo a { color:#ABC; font-family: Tahoma; font-size: 13px; font-weight: bold; }
  .milista .UEtitulo a:hover { color: #CDE; text-decoration: none; }
  .milista .UEthumbnail { float: left; margin: 0 5px 0 0; }
  .milista img { height: 50px; width: 50px; }
  .milista .UEresumen { clear: both; color: #999; font-family: Tahoma; font-size: 10px; }
</style>

Eso, mostrará algo así:

Blogger

Las etiquetas META description duplicadas

zona lerh preguntaba si era posible eliminar las etiquetas META de descripción duplicadas que es un error que veremos habitualmente cuando entramos en las Herramientas para Desarrolladores de Google y miramos Diagnósticos | Sugerencias en HTML.

¿Qué significa esto?

Las etiqueta META DESCRIPTION se utiliza para "describir" nuestro sitio, es un texto relativamente corto que intenta resumir el contenido del blog. Es lo que vemos en cualquier buscador debajo de cada enlace.

Lo que siempre se recomienda es que esa descripción no sea del blog en general sino que describa cada página, es decir, si estamos en una entrada que habla de aviones, que se refiera a eso y si la entrada habla de ositos de peluche, que diga otra cosa. Así, el home debería tener una descripciòn genérica y luego, cada página una descripción diferente.

En Blogger es imposible y aún en algún servicio avanzado esto no es automático y se requiere de algún tipo de código especial o plugin que, por ejemplo, resuma o genere un extracto de la entrada y la coloque en la descripción. Como eso debe hacerse con algún lenguaje que no sea JavaScript ya que los buscadores no leen textos generados de ese modo y ese es el único lenguaje al que tenemos acceso, estamos en problemas.

¿Será muy grave que las descripciones estén repetidas?

En realidad, si pero no, dependerá de nuestras intenciones; lo cierto es que a los buscadores no les gusta y por eso chillan y nos señalan el error. Obviamente, sería mejor que no se repitieran, aunque sea, para evitar esos chillidos.

Hay una manera un poco "burda" de lograr eso, agregándoles algún texto al que tengamos acceso desde el código de Blogger y uno que es muy fácil de usar es el título de las entradas que, en teoría, siempre es diferente. Aunque esta idea ya fue publicada, vuelvo a insistir con ella.

Ya que el título de las entradas es accesible en el head de nuestra plantilla porque se encuentra en data:blog.pageName, podríamos crear una serie de condiciones para filtrar nuestras páginas y así, en las entradas individuales, usar una descripción no-repetida:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <!-- esta es la descripción para una página individual -->
  <meta expr:content='data:blog.pageName + &quot; ... el texto de la descripción ... &quot;' name='description' />
<b:else/>
  <!-- esta es la descripción para el resto de las páginas -->
  <meta content=' ... el texto de la descripción ... ' name='description' />
</b:if>;

Como dije antes, esto no es ninguna panacea ni lo ideal pero ... peor es nada.

Blogger

La Marche

Y ... ¿ahora qué? ¿Cómo sigue la película para ese caminante que somos todos?

La Marche es una animación del director francés Simon Rouby

REFERENCIAS:Infinitos Mundos en facebook

animacion

Cuatro paks de íconos de alta calidad

City Icons
	Contiene 216 íconos de 256x256, en formato PNG.descargar

Bagg and Box's
	Contiene 70 íconos de 256x256, en formato PNG.descargar

Simplistica
	Contiene 150 íconos de 16x16, 32x32, 48x48 y 128x128 en formato PNG.descargar

HP Dock
	Contiene 5 íconos de 512x512, en formato PNG.descargar

iconos

Whirlpool

Este es otro de los experimentos de dhteumeuleu y no puede ser explicado. Es una de esas cosas que uno hace porque sí, sin más razones que el placer de lograr que funcionen.

REFERENCIAS:dhteumeuleu.com

JavaScript

Flip con jQuery

No sé muy bien si puede ser útil pero, este plugin de jQuery es divertido. Se llama Flip y lo que hace es animar un DIV cualquiera, mostrando diferentes textos que pueden tener algún tipo de formato elemental.

Si descargamos el ZIP veremos los archivos necesarios que son tres. Uno de ellos es jQuery mismo que si ya tenemos insertado no hace falta agregarlo, el segundo es la librería genérica de efecto jquery-ui y ambos, podemos cargarlos desde Google Ajax API, agregando esto antes de </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js' type='text/javascript'/>

Luego de eso, el plugin en si mismo que viene en dos versiones, una normal (jquery.flip.js) y otra minimizada (jquery.flip.min.js); podemos usar cualquiera de ellas y alojarlas en un servidor externo o ponerlas directamente en la plantilla:

<script type='text/javascript'>
//<![CDATA[
  ... y aquí copiamos y pegamos el contenido del archivo JS ...
//]]>
</script>

Hacemos que funcione cargando el plugin con algo similar a esto:

<script type='text/javascript'>
//<![CDATA[
$(function(){
  $("#flipPad a").bind("click",function(){
    var $this = $(this);
    $("#flipbox").flip({
      direction: $this.attr("rel"),
      color: $this.attr("rev"),
      content: $this.attr("title"),
      onBefore: function(){$(".revert").show()}
    })
    return false;
  });
});
//]]>
</script>

donde #flipbox será el ID del DIV a animar y donde pueden modificarse o agregarse opciones:

content es el texto a mostrar que en el ejemplo, colocaremos en el atributo title
direction indica el tipo de animación (tb, bt, lr, rl) y l ocolocaremos en el atributo rel
color es el color de fondo que colocaremos en el atributo rev
speed define la velocidad

Ahora, nos falta el HTML que ponemos donde nos guste:

<div id="flipbox"> ... el texto a mostrar ... </div>

Y a continuación, por ejemplo, unos botones para que cambie el contenido:

<div id="flipPad">
  <a title=" el segundo texto " rev="#00BBCC" rel="rl" href="javascript:void(0);">left</a>
  <a title=" el tercer texto " rev="#AABB00" rel="bt" href="javascript:void(0);">top</a>
  <a title=" el cuarto texto " rev="#82BD2E" rel="tb" href="javascript:void(0);">bottom</a>
  <a title=" el quinto texto " rev="#C8D97E" rel="lr" href="javascript:void(0);">right</a>
</div>

Eventualmente, el contenido puede tener alguna clase de formato y para agregarlo, debemos cambiar los caracteres < y > de la etiqueta por sus equivalentes < y >, por ejemplo:

title=" el tercer texto con &lt;strong&gt;negrita&lt;/strong&gt;"

JQuery

Pregunta repetida: ¿Dónde se coloca el CSS?

Como se trata de páginas web, TODO va en alguna clase etiqueta.

En Blogger, hay una sección en todas las plantillas que es el lugar por defecto donde se incluyen las definiciones de estilo:

<b:skin><![CDATA[
  ... aquí van las definiciones ...
]]></b:skin>

Esa no es una etiqueta HTML, <b:skin> </b:skin> es una etiqueta propia de Blogger mismo y no puede ser eliminada ni duplicada, siempre debe haber una (aunque esté vacía) y no puede haber otra.

En la practica, al mostrarse nuestro sitio, esa etiqueta se transforma en una etiquetea <style> </style>

Usar ese par es otra forma de agregar estilos y por lo general, lo colocamos antes de </head>:

<style type='text/css'>
  ... aquí van las definiciones ...
</style>

Si bien eso es lo "normal", no existen restricciones que impidan colocar esa etiqueta en cualquier otra parte, ya sea dentro de un elemento HTML, luego del <body> o incluso en una entrada pero, en este último caso debemos tener en cuenta que si está habilitada la opción de crear saltos de línea automáticos (es lo que ocurre por defecto), deberemos escribir todo en una sola línea:

<style type='text/css'> #algo { ... } #otro { ... } p.mascosas { ... } </style>

Hay que tener en cuenta que los estilos se ejecutan en el mismo orden que se leen, de arriba hacia abajo y de derecha a izquierda. No entender esto, es algo que siempre provocará problemas:

<style>
  /* aquí, el margen izquierdo será de 20 pixeles porque primero le decimos que todo sea cero y luego le decimos que sea veinte */
  #algo {
    margin: 0;
    ...
    margin-left: 20px;
  }
</style>

Es un detalle importante, no sólo para editar errores sino para "sobrescribir" propiedades que agregan servicios externos o el mismo Blogger; en este caso siempre conviene sobrescribirlos agregando nuestro propios estilos después de <body> y no antes.

Otra forma de agregar estilos es cargándolos desde un archivo externo; para eso, en la plantilla usamos la etiqueta link:

<link rel="stylesheet" type="text/css" href="URL_archivo.css" />

Mucho cuidado con eso. Verifiquen siempre que la dirección URL sea correcta y accesible. En Blogger no podemos alojar hojas de estilo así que usamos servicios externos pero, es bastante común que muchos de esos servicios sólo sean accesibles si estamos logueado en ellos porque tienen la opción de ser archivos públicos o privados. Es fácil verificarlo, salgan de sus cuentas y coloquen la URL en al barra de direcciones del navegador, luego, abran la URL. Si lo que se muestra es el contenido del archivo, todo está bien. Si se abre una advertencia o una página web, la URL es errónea así que no funcionará.

También es posible incluir hojas de estilo externas en una entrada pero allí, en lugar de usar la etiqueta link, conviene importarlas así:

<style type="text/css">@import url('URL_archivo.css');</style>

Por último hay una forma adicional de agregar estilos que es lo que se conoce como inline, es decir, en una etiqueta en particular y para eso, usamos un atributo que también se llama style:

<div style=" ... aqui ponemos las propiedades ... "> ... </div>

¿Detalles a tener en cuenta y errores comunes?

Todas las propiedades deben terminar con un punto y coma:
p {color: #FFF; text-align: center; }
Si una propiedad tiene varios valores o palabras claves, estos deben ser separados por un espacio:
background: transparent url() no-repeat left top;
Dentro de una etiqueta style o b:skin jamás deben usarse otras etiquetas así que si queremos poner comentarios, no se debe usar la sintaxis HTML. Esto es un error:

<style>
  body {color: red;}
  <!-- este es un comentario -->
  div {float: left;}
</style>

Los comentarios simples dentro de las etiquetas style se escriben así:

<style>
  body {color: red;}
  /* este es un comentario */
  div {float: left;}
</style>

En Blogger, es común que se malinterpreten las instrucciones de tal o cual truco y veo que muchos hacen cosas así:

<b:skin><![CDATA[
  .......
  <style>
    ... las propiedades de un truco ...
  </style>
  .......
]]></b:skin>

Es un error. SImplemente, eliminen las etiquetas en rojo y todo volverá a funcionar.

CSS

Usar @media para detectar resolución de la pantalla

Estamos acostumbrados a que las propiedades CSS nos permiten controlar la forma en que se ve nuestro sitio, sin embargo, pese a que por lo general lo vemos a través de un monitor, esa no es la única forma de acceso. Obviamente, ahora, con los teléfonos móviles esto es evidente pero ya antes había otras formas tales como, por ejemplo, una impresora.

La regla llamada @media es la que permite especificar las propiedades que tendrá nuestro sitio según sea el medio en el cual se mostrará: una pantalla, un papel impreso o incluso algunos navegadores de voz. Usando eso, es posible diferenciar lo que se muestre en uno o en otro. Con este ejemplo simple haríamos que la sidebar no se imprimiera:

@media screen { /* pantalla */
  #sidebar-wrapper { display: block; }
}
@media print { /* impresora */
  #sidebar-wrapper { display: none; }
}

El medio está definido por palabras: all, aural, braille, embossed, handheld, print, projection, screen, tty, tv e incluso hay propiedades exclusivas para determinados medios pero, el tema que más me interesó de esto es lo que se muestra en un artículo de CSS-Tricks donde se hace referencia a una nueva serie de palabras claves que nos permitirían controlar la forma en que mostramos nuestro sitio según sea el tipo de resolución de pantalla que tenga el visitante.

Veamos la Plantilla Mínima de Blogger. Allí, el blog queda establecido con un ancho de 660 pixeles; es lo que dice la propiedad width de tres definiciones: #header-wrapper, #outer-wrapper y #footer. Está pensada para una resolución que era la "normal" en el 2006, es decir 800x600 pero, como el tiempo pasa inexorable, si bien sigue siendo un tamaño usado, la gran mayoría fue cambiando a resoluciones mayores y en algún momento, lo "normal" era 1024x768 por lo tanto lo que veíamos era el mismo blog pero grandes espacios vacios a los lados, es decir, el blog aparecía pequeño y perdido en una pantalla grande.

De allí que hubo muchos de nosotros que a fuerza de errores fuimos modificándolos para ampliarlos un poco aunque esto termina siendo una pelea imposible de ganar ya que las resoluciones siguen aumentando constantemente.

Claro que una solución es utilizar los llamados diseños fluidos que se adaptan automáticamente a la resolución aunque en lo personal, no me convencen demasiado. También es cierto que pueden usarse scripts que permiten utilizar distintas hojas de estilo e incluso que el usuario elija cuál utilizar.

Ahora, @media viene a agregar una posibilidad extra que sería bueno explorar aunque por el momento no está implementada en Internet Explroer pero si en el resto de los navegadores (más información).

Para ver un ejemplo vamos a usar la misma Plantilla Mínima de Blogger; la dejamos tal como está aunque en el ejemplo le he agregado una sidebar extra. Los anchos que definen el blog son estos:

#header-wrapper = width:660px;
#outer-wrapper = width: 660px;
#main-wrapper = width: 410px;
#sidebar-wrapper = width: 220px;
#footer = width:660px;

Así que vamos a agregarle definiciones al estilo, por ejemplo, luego de <b/skin> pondremos tres modelos diferentes de este modo:

<style>
/* esto funcionará si la resolución de pantalla está entre 300 y 800 pixeles de ancho */
@media (max-width: 800px) and (min-width: 300px) {
  #header-wrapper { width:300px; }
  #outer-wrapper { width: 300px; }
  #main-wrapper { width: 300px; }
  #footer { width:300px; }
   /* no mostraremos ninguna sidebar */
  #sidebar-wrapper { display:none; }
  #sidebar-wrapper2 { display:none; }
  ....... cualquier otra variante .......
}

/* esto funcionará si la resolución mínima de la pantalla es de 1200 pixeles de ancho */
@media (min-width: 1200px) {
  #header-wrapper { width:1000px; }
  #outer-wrapper { width: 1000px; }
  #main-wrapper { width: 670px; }
  #sidebar-wrapper { width: 300px; }
  #footer { width:1000px; }
   /* no mostraremos la segunda sidebar */
  #sidebar-wrapper2 { display:none; }
  ....... cualquier otra variante .......
}

/* esto funcionará si la resolución mínima de la pantalla es de 1600 pixeles de ancho */
@media (min-width: 1600px) {
  #header-wrapper { width:1400px; }
  #outer-wrapper { width: 1400px; }
  #main-wrapper { width: 600px; }
  #sidebar-wrapper { width: 350px; }
  #footer { width:1400px; }
   /* mostraremos la segunda sidebar */
  #sidebar-wrapper2 { display:block; }
  ....... cualquier otra variante .......
}
</style>

Usando max-width, min-width, max-height y min-height podemos definir las "condiciones" en las que nuestro sitio se verá, estableciendo anchos o cualquier otra propiedad general o particular. La idea la pueden comprobar en este demo online y para eso no hace falta cambiar la resolución de la pantalla, basta que amplien o reduzcan el tamaño de la ventana del navegagor ya que esos valores no se refieren al monitor en si mismo sino al espacio físico que ocupa la ventana del navegador.

A medida que amplien esa ventana, verán que el ancho cambia y una imagen en una sidebar se muestra de diferente tamaño. Incluso, si se llega a superar el ancho máximo, aparecerá la segunda sidebar que sino, permanece oculta; en el demo, también cambian el color de fondo, el tamaño de los textos y su color.

Hay otras palabras similares: min-device-width, max-device-width, min-device-height, max-device-height pero también muchas otras que amplian aún más las cosas.

device-aspect-ratio y orientation permiten distinguir el aspecto, por ejemplo:

@media (device-aspect-ratio: 16/9) { ... } /* para pantallas de tipo widescreen */
@media (orientation:portrait) { ... } /* para pantallas más altas que anchas */
@media (orientation:landscape) { ... } /* para pantallas más anchas que altas */

Lo mismo con la resolución de los colores:

@media (color) { ... } /* para monitores color */
@media (monochrome) { ... } /* para monitores blanco y negro */
@media (min-color-index: 256) { ... } /* para monitores con 256 colores */

Lo interesante de esto es que los cambios funcionan dinámicamente, es decir, no hay necesidad de recargar la página por lo menos, agregándolo directamente aunque también es posible hacerlo enlazando las hojas de estilo alternativas:

<link type='text/css' rel='stylesheet' media='screen' href='URL_por_defecto.css' />
<link type='text/css' rel='stylesheet' media='screen and (max-width: 800px) and (min-width: 300px)' href='URL_pequeño.css' />
<link type='text/css' rel='stylesheet' media='screen and (min-width: 1200px)' href='URL_mediano.css' />
<link type='text/css' rel='stylesheet' media='screen and (min-width: 1600px)' href='URL_grande.css' />

CSS

El errático Feedburner

Este no es un buen lugar para preguntar por qué Feedburner muestra una cantidad de suscriptores distinta cada dia. En realidad si esa cifra cambia levemente no hay problema, es normal y no hay que preocuparse, suele diminuir los fines de semana y luego se normaliza; son variaciones porcentuales pequeñas. Las dudas surgen cuando esas variaciones son grandes y digo que este no es un buen lugar para reguntar porque sufro del mismo síndrome: desaparecen por cientos y reaparecen por cientos sin razón aparente; tanto que se ha transformado en un dato poco fiable.

El blog de FeedBurner hace meses que reconoce el error pero no da respuestas:

Los contadores de suscripción parecen reportar cantidades inferiores a las normales porque se contabilizan los datos de Google FeedFetcher. Ese error no afecta a las suscripciones en si mismas ya que los usuarios siguen recibiendolas de manera normal.

Actualmente, el número es calculado combinando los datos de Google Reader e iGoogle pero estamos cambiando el método utilizando las APIs de Google para que el resultado sea más fiable. Este post será actualizado cuando el cambio esté funcionando.

20 de mayo del 2010

¿Se puede hacer algo al respecto?

Que yo sepa, sólo esperar.

Feedburner

La línea de Osvaldo Cavandoli

Osvaldo Cavandoli fue un dibujante italiano conocido con en el apodo de Cava y es el creador de una serie de animaciones llamadas La Linea que comienza como un comercial para artículos de cocina y luego se transforma en un show de TV cuyos 90 episodios han sido transmitidos en más de 40 paises.

Click para ver los videos.

animacion

Sticky Sketchy Blockie ... Iconos

Sticky Pack
	Contiene 80 íconos de 128x128, en formato PNG.descargar

Sketchy Paper Icon Set
	Contiene 80 íconos de 128x128, en formato PNG.descargar

Free Blockie Icons
	Contiene 25 íconos de 16x16, 24x24, 32x32, 48x48, 64x64, 128x128 y 256x256, en formato PNG.descargar

iconos

Plugins diversos para jQuery

Sunday Morning es un script que permite agregar traducciones sencillas a treinta idiomas. Funciona en todas las versiones de Internet Explorer, Firefox, Safari y Chrome. El script podemos descargarlo desde acá y en la página del desarollador hay explicaciones y unos demos.

jQuery Tools es una colección de componentes compiladas en apenas 5KB. Posee funciones para crear pestañas, tooltips, agregar archivos de Flash, galerías y efectos diversos. El sitio está muy bien organizado y hay ejemplos diversos que podemos copiar y mucha documentación. Podemos descargarla completa o seleccionar las herramientas que queremos incluir.

MopSlider genera una ventana dentro de la cual es posible agregar cualquier contenido. En el ZIP de descarga hay demostraciones que también puden ser vistas online.

Algunas otras:

CeeBox es otra ventana modal para mostrar imágenes, videos, iframes, flash, etc.
prettyPhoto permite crear ventanas modales tanto para imágenes como para videos y archivos de Flash. La documentación no es amplia pero se entiende. en els itio disponen de otro script llamado prettyPopin que sirve para mostarr contendio simple o formularios.
liScroll un script para generar textos con scroll de modo similar a como lo podemos hacer con la etiqueta MARQUEE.
jQueryGlobe es un plugin muy simple para crear listas interactivas.
TinySlider es un slideshow que permite agregar tanto imágenes como cualquier otro tipo de contenido.
Notify Bar permite agregar barras informativas similares a las que se ven en Twitter cuando realizamos alguna acción.
TinyTips agregar tootltips a cualquier elemento de nuestra página.

JQuery

Otra galería de imágenes con CSS3

Esta es una galería relativamente sencilla donde sólo se usa CSS y funcionará bastante bien en los navegadores modernos, incluyendo IE8 aunque con ciertas diferencias ya que cada uno de ellos tiene sus propias características y aplica las nuevas propiedades como se le da la gana.

El HTML es mínimo, usamos una lista donde colocamos dos imágenes, una con la clase mini contiene la miniatura que es la visible por defecto y otra, con la clase pic contiene la imagen a mostrar:

<div id="galeria">
  <ul>
    <li><img src="URL_miniatura1" class="mini" /><img src="URL_imagen1" class="pic"/></li>
    <li><img src="URL_miniatura2" class="mini" /><img src="URL_imagen2" class="pic"/></li>
    <li><img src="URL_miniatura3" class="mini" /><img src="URL_imagen3" class="pic"/></li>
    .......
  </ul>
</div>

Y ahora, el CSS que va antes de </head> y que deberíamos modificar para adaptarlo a nuestras necesidades:

<style>
#galeria { /* este es el div que contiene la galería */
  background: #101921;
  border: 10px solid #505961;
  height: 300px;
  position: relative;
  width: 600px;
  margin: 30px auto;
  overflow: visible;
}
#galeria ul { /* la lista */
  margin: 0;
  padding: 0;
  text-align: center;
}
#galeria ul li { /* cada item de la lista */
  display: inline-table;
  list-style: none;
  padding: 10px;
  vertical-align: middle;
}
#galeria ul li .pic { /* la imagen normal */
  background-color: #000;
  border: 2px solid #000;
  left: 130px;
  padding: 10px;
  position: absolute;
  top: 15px;
  visibility:hidden;
  -moz-box-shadow: 0 0 20px #ABC inset;
  -webkit-box-shadow: 0 0 20px #ABC inset;
  box-shadow: 0 0 20px #ABC inset;
}
#galeria ul li .mini:hover { /* efecto sobre las miniaturas */
  cursor: pointer;
}
#galeria ul li:hover .pic { /* efecto sobre las imágenes */ 
  visibility: visible;
}
</style>