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.

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.

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>

123456

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

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

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

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>:

<!--[if lt IE 9]>
<script src='http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js' type='text/javascript' />
<![endif]-->

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

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!