domingo, 18 de abril de 2010

La META X-UA-Compatible en Internet Explorer 8

 El navegador Internet Explorer 8 cumple parcialmente con los estándares, a diferencia de las anteriores versiones. Esto puede resultar una complicación añadida más que una solución, puesto que ahora --más que nunca-- se pueden visitar las páginas web utilizando las nuevas mejoras o ignorándolas.

 En realidad, esto no hay quien lo entienda; está claro que estamos muy lejos todavía de que un mismo sitio web se vea de igual forma en todos los navegadores, pero el hecho de que las diferencias existentes entre las distintas versiones de un mismo navegador continúen generando problemas me parece ya un atraso inaceptable.

 Con Internet Explorer 8, los usuarios pueden decidir entre los siguientes modos de compatibilidad: Emulate IE7 Mode, Emulate IE8 Mode, IE5 Mode, IE7 Mode, etc. Para aliviar un poco los problemas de compatibilidad, usaremos la META X-UA-Compatible para informar al navegador de cuál es el modo adecuado de mostrar un sitio. Al atributo content se le pueden dar los valores de IE=5, IE=7, IE=EmulateIE7, IE=8, o bien usar IE=edge, el cual indica que se utilice el modo de compatibilidad más avanzado.

 Este es el código que hay que añadir en la plantilla, concretamente en el HEAD y después de TITLE:
<meta content='IE=8' http-equiv='X-UA-Compatible'/>

domingo, 11 de abril de 2010

Etiqueta Canonical URL para combatir el contenido duplicado en Blogger

 Una de las cosas más difíciles de conseguir cuando se administra un blog es evitar el contenido duplicado que nosotros mismos generamos. Para mejorar los resultados de nuestra página en los buscadores, hay que intentar destacar el contenido más importante --los posts-- sobre el contenido duplicado que se genera en las páginas de archivos por fecha, en las de etiquetas, en las de categorías o en las de autores.

 Los buscadores Google, Yahoo y Live ya han incorporado una nueva etiqueta, Canonical URL, que ha sido creada para ayudarnos a combatir el contenido duplicado que se genera de forma automática en nuestros sitios. Más que una etiqueta HTML nueva, en realidad se trata de un atributo de la etiqueta link:
<link rel="canonical" href="http://AQUÍ URL PRINCIPAL/" />
 Esta etiqueta informa a los buscadores de que la página que están rastreando es irrelevante y de que el contenido primordial está en la página a la que hace referencia el atributo href. Para utilizarla en Blogger, hay que implementar el siguiente código condicional en el HEAD de la plantilla, debajo de TITLE:
<b:if cond='data:blog.url != data:blog.homepageUrl'>  
 <b:if cond='data:blog.pageType == "index"'>    
  <link href='http://AQUÍ URL PRINCIPAL/' rel='canonical'/>  
 </b:if>   
 <b:if cond='data:blog.pageType == "archive"'>    
  <link href='http://AQUÍ URL PRINCIPAL/' rel='canonical'/>  
 </b:if>
</b:if>

sábado, 10 de abril de 2010

Asynchronous Tracking, el nuevo script de Google Analytics

 Los scripts del código de seguimiento de Google Analytics que aún se están utilizando son urchin.js y ga.js, pero ya hay que ir pensando en efectuar la migración al nuevo Asynchronous Tracking. No se pueden utilizar dos scripts de seguimiento al mismo tiempo, así que para poder utilizar el nuevo Asynchronous Tracking, previamente se ha de eliminar de la plantilla el viejo urchin.js o el menos viejo ga.js.

 Este es un ejemplo del código del "viejo" script ga.js, que se colocaba antes del elemento resaltado en rojo:
<script type="text/javascript"> 
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); 
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); 
</script> 
<script type="text/javascript"> 
try{ 
var pageTracker = _gat._getTracker("UA-XXXXXXX-Y"); 
pageTracker._trackPageview(); 
} catch(err) {}</script> 
</body>
 Y este es un ejemplo del código del nuevo Asynchronous Tracking, en el que hemos de sustituir UA-XXXXXXX-Y por nuestro número de identificación de la propiedad web asignado en la correspondiente cuenta abierta en Google Analytics (el código ha de insertarse en la plantilla, antes del elemento resaltado en rojo):
<script type="text/javascript"> 
  var _gaq = _gaq || []; 
  _gaq.push(['_setAccount', 'UA-XXXXXXX-Y']); 
  _gaq.push(['_trackPageview']); 
  (function() { 
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
  })(); 
</script>
 </head>

martes, 6 de abril de 2010

IE9.js para que Internet Explorer soporte los estándares

 Son varias las alternativas más avanzadas del CSS que aún no han sido implementadas en el navegador Internet Explorer, aunque algunas de ellas llevan ya un tiempo funcionando en la versión más reciente de IE8 y se mejorarán en IE9. Para hacer frente a estas y otras carencias, convirtiendo a IE en un navegador compatible con los estándares, el programador y diseñador de webs Dean Edwards ha creado una serie de scripts que podemos cargar directamente desde nuestra plantilla, sin necesidad de tenerlos que alojar nosotros personalmente. La última versión de la librería JavaScript IE7.js/IE8.js/IE9.js se puede consultar en Google Code. No es necesario incluir en la plantilla los scripts IE7.js/IE8.js cuando se está utilizando IE9.js.

 Para utilizar este script, lo único que hay que hacer es añadir el siguiente código antes del elemento resaltado en rojo:
<!--[if lt IE 9]><script src="http://ie7-js.googlecode.com/svn/version/2.1(beta3)/IE9.js"></script><![endif]--> 
 </head>

domingo, 4 de abril de 2010

Añadir listas largas en un espacio pequeño

 Para mostrar una lista larga en un espacio más reducido del que normalmente ocuparía, lo más sencillo es incluir dicha lista en un bloque contenedor al que se han de aplicar las propiedades overflow, height y width, con sus respectivos valores:
<div style="height: 145px; overflow: auto; width: 300px;"><ul>
<li>AQUÍ TEXTO1.</li>
<li>AQUÍ TEXTO2.</li>
<li>AQUÍ TEXTO3.</li>
<li>AQUÍ TEXTO4.</li>
</ul></div>
  • Castillo Santuario de Javier.
  • Castillo de Marcilla.
  • Castillo Palacio de Olite.
  • Colegiata de la Fortaleza de Alquézar.
  • Castillo de Íscar.
  • Castillo de Loarre.
  • Castillo de Monzón, Huesca.
  • Torre del Castillo de Samitier.
  • Patio de armas del Castillo de Aínsa.
  • Castillo de Coca.
  • Entrada del Castillo de Mombeltrán.
  • Castillo del Condestable Dávalos.
  • Castillo de Arévalo.
  • Castillo de La Mota.
  • Castillo de Turégano.
  • Castillo de Cuéllar.
  • Castillo de Pedraza.
  • Castillo de Monleón.
  • Alcázar de Segovia.
  • Castillo de Tiedra.
  • Castillo de Ucero.

 Lo mismo que hemos hecho con una lista no ordenada lo podemos hacer con imágenes. En este ejemplo, las imágenes utilizadas aparecen centradas:
<div style="text-align: center;"><div style="height: 218px; margin: auto; overflow: auto; text-align: center; width: 200px;"><a href="http://AQUÍ URL1" onclick="this.target='_blank'" rel="nofollow" title="AQUÍ TÍTULO1"><img alt="AQUÍ TÍTULO breve1" src="http://AQUÍ URL de IMAGEN1" title="AQUÍ TÍTULO visible al pasar CURSOR1" /></a> 
<a href="http://AQUÍ URL2" onclick="this.target='_blank'" rel="nofollow" title="AQUÍ TÍTULO2"><img alt="AQUÍ TÍTULO breve2" src="http://AQUÍ URL de IMAGEN2" title="AQUÍ TÍTULO visible al pasar CURSOR2" /></a> 
<a href="http://AQUÍ URL3" onclick="this.target='_blank'" rel="nofollow" title="AQUÍ TÍTULO3"><img alt="AQUÍ TÍTULO breve3" src="http://AQUÍ URL de IMAGEN3" title="AQUÍ TÍTULO visible al pasar CURSOR3" /></a></div></div>

Castillo de Marcilla
Castillo de Olite
Fortaleza de Alquézar
Castillo de Íscar
Castillo de Loarre
Castillo de Monzón
Castillo de Samitier
Castillo de Aínsa
Castillo de Coca
Castillo de Mombeltrán
Castillo del Condestable Dávalos
Castillo de Arévalo
Castillo de La Mota
Castillo de Turégano
Castillo de Cuéllar
Castillo de Pedraza
Castillo de Monleón
Alcázar de Segovia
Castillo de Tiedra
Castillo de Ucero

sábado, 3 de abril de 2010

Listas de sidebar en una plantilla con dos barras laterales

 Para establecer los valores de las propiedades de estilo de las listas de sidebar en una plantilla de Blogger a la que hemos añadido una nueva columna lateral, lo primero que hay que hacer es buscar las líneas de código donde están los encabezados .sidebar ul y .sidebar li (/* Sidebar Content */) y renombrarlos como .right-sidebar ul y .right-sidebar li; también hay que añadir .left-sidebar ul y .left-sidebar li.

 El código que ha de regir las propiedades de las listas no ordenadas de las barras laterales quedaría de una forma similar al del siguiente ejemplo:
.left-sidebar ul {
  display: list-item;
  list-style-type: disc;
  list-style-image: none;
  list-style-position: inside;
  margin: 1em 0;
  padding: 0 0 0 1.5em;
  text-align: left;
}

.right-sidebar ul {
  display: list-item;
  list-style-type: disc;
  list-style-image: none;
  list-style-position: inside;
  margin: 1em 0;
  padding: 0 0 0 1.5em;
}
.left-sidebar li {
  margin: 0;
  padding-top: 0;
  padding-$endSide: 0;
  padding-bottom: 0.25em;
  padding-$startSide: 10px;
  text-indent: -10px;
  line-height: 1.5em;
}

.right-sidebar li {
  margin: 0;
  padding-top: 0;
  padding-$endSide: 0;
  padding-bottom: 0.25em;
  padding-$startSide: 15px;
  text-indent: -15px;
  line-height: 1.5em;
}

viernes, 2 de abril de 2010

Textos de sidebar en una plantilla con dos barras laterales

 Para establecer los valores de las propiedades de estilo de los textos de sidebar en una plantilla de Blogger a la que hemos añadido una nueva columna lateral, lo primero que hay que hacer es buscar la línea de código donde está el encabezado .sidebar (/* Sidebar Content */) y renombrarlo como .right-sidebar; también hay que añadir el encabezado .left-sidebar.

 El código que ha de regir las propiedades de los textos de sidebar quedaría de una forma similar al del siguiente ejemplo:
.left-sidebar { 
  color: $sidebartextcolor;
  line-height: 1.5em;
}

.right-sidebar { 
  color: $sidebartextcolor;
  line-height: 1.25em;
}
 Para utilizar el valor $sidebartextcolor, previamente debe estar implementado en las variables de la plantilla (/* Variable definitions):
<Variable name="sidebartextcolor" description="Sidebar Text Color"
          type="color" default="#999" value="#800040">

Títulos y elementos de sidebar en una plantilla con dos barras laterales

 Para establecer los valores de las propiedades de estilo de títulos y elementos de sidebar en una plantilla de Blogger a la que hemos añadido una nueva columna lateral, lo primero que hay que hacer es buscar la línea de código donde está el encabezado /* Sidebar Content */.

 Ahora hay que localizar .sidebar .widget y renombrarlo como .right-sidebar .widget; también hay que añadir el encabezado .left-sidebar .widget. El código que ha de regir las propiedades de los elementos de sidebar quedaría así:
.left-sidebar .widget { 
  margin: 0 0 0.25em;
  padding: 0 0 0.75em;
  border-top: 0;
  border-right: 1px solid #bdbdbd;
  border-bottom: 1px solid #a4a4a4;
  border-left: 1px solid #bdbdbd;
  background: #c3d9ff;
}

.right-sidebar .widget { 
  margin: 0 0 0.25em;
  padding: 0 0 0.75em;
  border-top: 0;
  border-right: 1px solid #d8d8d8;
  border-bottom: 1px solid #a4a4a4;
  border-left: 1px solid #d8d8d8;
  background: #e6e6e6;
}
 Para las propiedades de los títulos de sidebar, hay que añadir dos nuevos encabezados: .right-sidebar h2 y .left-sidebar h2, como se puede ver en este ejemplo:
.left-sidebar h2 {
  padding: 5px;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #bdbdbd;
  background-color: #d8d8d8;
  background-image: none; 
}

.right-sidebar h2 {
  padding: 5px;
  border-top: 1px solid #ffffff;
  border-right: 0;
  border-bottom: 1px solid #bdbdbd;
  border-left: 0;
  background-color: #d8d8d8;
  background-image: none;
}

jueves, 1 de abril de 2010

Añadir sombras a un texto en un blog de Blogger

 Para añadir sombras a un texto insertado en un blog de Blogger hay que utilizar la propiedad text-shadow en el elemento deseado del código de las Hojas de Estilo (CSS) de nuestra plantilla. Esta propiedad se define con cuatro parámetros, de esta forma: text-shadow: coordenadaX coordenadaY amplitud color;

 La coordenadaX (o offset-x) indica el desplazamiento horizontal de la sombra con respecto al texto en cuestión (valor positivo hacia la derecha y negativo hacia la izquierda); la coordenadaY (o offset-y) indica el desplazamiento vertical de la sombra con respecto al texto (valor positivo hacia abajo y negativo hacia arriba); amplitud (o blur-radius) es el tamaño de la sombra: a mayor valor, el efecto de desenfoque también será mayor; color es el color de la sombra.

 El gran problema que se nos presenta es que esto tan sólo funciona en los navegadores Safari, Opera y Firefox. Para que funcione con Internet Explorer hay que utilizar un filtro (progid:DXImageTransform.Microsoft.Shadow).

 He aquí un ejemplo de código para añadir sombras a un texto (en este caso en el footer):
#footer {
  width: 100%;
  line-height: 1.6em;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: none;
  text-shadow: 2px 1px 5px #36393d;
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#36393d, direction=135, strength=5);
}