Las etiquetas META description duplicadas

JMiur [E]

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.

Whirlpool

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;"

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.

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.

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' />