¿Por qué no se pueden reordenar los widgets?

Primero fueron sólo algunas consultas aisladas, ahora ya son generalizadas, aparentemente, hay un problema que impide reodrenar los widgets en la ventana de diseño de Blogger, en especial cuando se utiliza Firefox 3.6.

Por el momento, no hay respuestas e incluso, los reportes son un poco confusos; en los Grupos de Ayuda de Blooger: 1, 2, 3, 4, 5 e incluso en los Foros de Mozilla.

He probado en diferentes plantillas y los resultados varían e incluso, el problema persiste en una Plantilla Mínima así que esto nada tiene que ver con cookies o plantillas demasiado personalizadas.

En algunos casos, sólo es posible mover desde una sección a otra (por ejemplo, de la sidebar al footer) pero no dentro de la misma sección; en otros, al arrastra un gadget, se nos permite ubicarlo aún en lugares donde se supone que no es es posible ya que están bloqueados (por ejemplo las Entradas del blog) y en otros, las podemos reordenar pero el resultado es aleatorio, el gadget queda en cualquier parte y no podemos controlar su posición:

No hay explicaciones y no sé si es un problema generalizado.

Si les pasa lo mismo, repórtenlo. Mientras tanto, pueden mover los distintos elementos desde la ventana de edición HTML. Allí, sin expandir los artilugios, verán que cada gadget se muestra como sólo una línea de código:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='MI TITULO 1' type='HTML'/>
<b:widget id='HTML2' locked='false' title='MI TITULO 2' type='HTML'/>
<b:widget id='Feed1' locked='false' title='MI TITULO 3' type='Feed'/>
</b:section>
</div>

Y basta copiar esa línea y pegar la en otro lugar dentro de la misma sección para reordenarla:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='MI TITULO 1' type='HTML'/>
<b:widget id='Feed1' locked='false' title='MI TITULO 3' type='Feed'/>
<b:widget id='HTML2' locked='false' title='MI TITULO 2' type='HTML'/>
</b:section>
</div>

Esto, puede hacerse dentro de una sección o desde allí a cualquier otra.

Paciencia.

Es importante recordar que no debe confundirse este problema con la imposibilidad de agregar elementos o moverlos a secciones bloqueadas. Una sección está bloqueda cuando en su código vemos cualquiera de estos atributos:

showaddelement='no' impide que agreguemos elementos en esa sección porque en la ventana de diseño no se mostrará la opción; el atributo, puede eliminarse

maxwidgets='1' indica que en esa sección sólo es posible tener un gadget; puede eliminarse o aumentar el valor

Lo mismo ocurre con los widgets:

locked='true' indica que no puede ser movido; se cambia colocando locked='false'

Freedom of expression Beril Ates Ankara Turquía	No cage for words Florian Harmand Flavie de Ravel Francia	Married to silence: till death do us part Vanessa Sampedro USA
No freedom, no rights Nicolò Mainardi Italia	Freedom of expression Minglian Li China	Unveil my pain Massimo Rinaldi Davide Bacchilega Italia
Freedom of smile Gergely Boganyi Hungría	When freedom is kept quiet Sophie De Henau Canadá	(Un)Civilization Adele Ivona Italia

REFERENCIAS:poster4tomorrow.org

Aunque el tema de los Seguidores en Blogger y el extraño invento de Google Friend Connect ya no parecen tener demasiada prensa, siguen allí en nuestros sitios y acá van un par de alternativas extras.

Primero que nada, convendría revisar el includable llamado comment-form que es el que contiene el formulario de comentarios incrustado. Allí, parece haber algún cambio que puede verse cuando colocamos una plantilla nueva de las que Blogger ofrece por defecto. Ahora dice esto:

<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p>data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
</script>
</div>
</b:includable>

En realidad, no sé si esto es algo nuevo o no, en mi caso, esas líneas en color, faltaban; las agregué y no parece haber cambios pero ... por las dudas.

Conviene hacerlo con cuidado, copiar el includable que tenemos en el block de notas, cambiarlo por el nuevo y guardar la plantilla; no es algo que podamos verificar con Vista Previa así que, ninguna precaución es poca. Una vez que comprobamos que todo es correcto, listo y si surge cualquier problema, simplemente hacemos el proceso inverso y restauramos el código volviendo a pegar el que teníamos antes.

Dado que las ventanas básicas de Seguidores simplemente abren URLs, podríamos usarlas para algunas cosas elementales; por ejemplo, si se usa algún tipo de panel de acceso personal como el que se mostraba en esta entrada, es sencillo agregar una opción más que nos permita acceder a la ventana de administración de los seguidores. Para eso, necesitamos un enlace como este:

<a href='http://www.blogger.com/manage-followers.g?blogID=numeroIDblog'>Administrar Seguidores</a>

donde numeroIDblog es un número identificatorio único que podemos ver en la barra de direcciones del navegador cuando, por ejemplo, editamos las entradas:

http://www.blogger.com/posts.g?blogID=11223344556677

Por último, también es posible agregar alguna clase de enlace para facilitar la suscripción a los seguidores de un sitio, sin necesidad de agregar el gadget que suele ser problemático ya que en algunos casos no funciona y es bastante lento. Para eso, debemos hacer que ese enlace apunte a este tipo de URL:

http://www.blogger.com/follow-blog.g?blogID=numeroIDblog

así que, por ejemplo, podríamos agregar un elemento HTML en la sidebar y allí, colocar un enlace, ya sea con un texto o con alguna clase de imagen:

<a href="http://www.blogger.com/follow-blog.g?blogID=numeroIDblog" rel="nofollow" title="Seguir este blog" target="_blank"> TEXTO o IMAGEN </a>

o bien un pequeño script para que se abra en una ventana tipo pop-up:

<script type="text/javascript">
function ventanaFollow() {
window.open("http://www.blogger.com/follow-blog.g?blogID=numeroIDblog", "followblog", "height=600, width=600, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no" );
}
</script>
<a href="javascript:ventanaFollow()" rel="nofollow" title="Seguir este blog"> TEXTO o IMAGEN </a>

Y el resultado sería algo así:

Microsoft Expression Web SuperPreview es una herramienta muy interesante que vale la pena probar. Se trata de un programa externo que podemos descargar gratuitamente y con el cual es posible intentar hacer algun tipo de debug en Internet Explorer.

Una vez instalado, lo ejecutamos y tendremos la posibilidad de abrir cualquier página web y verla en una ventana dividida tal y como se nos mostraría en distintas versiones de IE. De esa manera, podremos comparar las diferencias y, eventualmente ir probando las modificaciones necesarias para compatibilizarlas.

Las páginas pueden ser mostradas una al lado de la otra o bien una debajo de la otra y hay herramientas de zoom, reglas y guias que podemos agregar para comparar la forma en que se interpretan nuestros códigos las distintas versiones; incluso, una solapa permite leer el DOM o sea, ir viendo el contenido de cada bloque y algunas de sus características.

Hay una versión paga que hace lo mismo pero que también incluye a Firefox. La versión trial de este último puede verse acá.

Para instalarse cualquier a de ellas no se requiere nada especial, salvo Microsoft .NET Framework 3.5 Service Pack 1.

Click para ampliar la imagen.

Si a esta herramienta le agregamos la Internet Explorer Developer Toolbar tendremos algunas alternativas para mejorar la forma en que se ven nuestros sitios en diferentes navegadores.

Fácil, simple, increíblemente útil para cuando estamos diseñando una página web o modificamos el blog.

¿Cuántas veces necesitamos poner alguna imagen sólo para probar? Y entonces hay que subirla a alguna parte y nuestras se van llenando de porquerías o tenemos que usar un servidor como ImageShack y justo en ese momento no funciona o no encontramos la imagen exacta y hay que redimensionarla ¡Y todo eso sólo para probar!!!

La solución es dummyimage, un servicio que hace eso, genera dinámicamente una imagen con un tamaño que le indiquemos y listo. Como proyecto de código abierto, los scripts PHP están disponibles para ser descargados en formato ZIP si alguien quiere instalarlos en su propio servidor pero, por ahora, podemos usarlo directamente.

La URL para una imagen de 300x150 sería esta:

http://dummyimage.com/300x150

Así que la imagen la usamos así:

<img src="http://dummyimage.com/300x150" alt="300x150" />

Y mostrará esto:

REFERENCIAS:Utilidades para Webmasters

Topsy es un buscador especializado en Twitter que dispone de una serie de widgets como los típicos botones de retweet y un API muy interesante.

Basado en eso, moretechtips.net ha desarrollado un botón muy original que tiene como particularidad, mostrar los avatares de aquellos usuarios que han compartido nuestro post.

Para utilizarlo, necesitamos JQuery y podemos usar los archivos que nos proveen así que, antes de </head> agregamos lo siguiente:

<link type='text/css' rel='stylesheet' href='http://who-tweet-button.googlecode.com/svn/v1/who-tweet-button-1.0.css' />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type='text/javascript' src='http://who-tweet-button.googlecode.com/files/jquery.who-tweet-button-1.0.min.js'></script>

Ahora, podríamos insertarlo en nuestros posts simplemente agregando esto en el post-footer de las entradas:

<div class="who-tweet">cargando...</div>

También pueden agregarse opciones, por ejemplo nuestro nombre de usuario:

<div class="who-tweet" options="{nick:'miNombre'}">cargando...</div>

Hay más opciones disponibles y todas se agregan del mismo modo, separándolas con comas:

n:valor establece la cantidad máxima a mostrar
inf_only:1 hace que solo se muestren tweets de usuarios considerados "influyentes"
inf_tip:1 muestra el "valor" de esa influencia
tweet_tip:1 muestra las imágenes como tooltips
animate:'height' cambia el tipo de animación

Una opción extra que podría ser interesente en ciertos casos, es url. Si bien la URL del post no es necesario agregarla, podemos definirla y, de tal modo, agregar esto sólo en determinadas entradas, agregándolo directamente en el editor:

<div class="who-tweet" options="{nick:'miNombre',,url:'URL_entrada'}">cargando...</div>

Este es el ejemplo, usando la opción url y colocando allí, la dirección del blog:

Desde que anunciaron que en Blogger in Draft estaba disponible una nueva opción para crear Páginas Estáticas en Blogger, muchos me siguen preguntando por lo mismo y la verdad, aunque leí las entradas de El escaparate de Rosa y de Gem@ en sus respectivos blogs (recomiendo que las lean) hay algo que, a simple vista, no me convenció demasiado y tal vez por eso, demoré en tocar el tema pero, no hay más remedio que hacerlo.

Se trata de una posibilidad en desarrollo y por lo tanto, con dificultades para acceder a ella, dependiendo del día y de la humedad ambiente pero, ese no es el problema principal; sino que me da la impresión que estabamos ante un anuncio con muchas trompetas y poco sustento. Ahora que lo probé, sólo me limito a confirmar esa sensación original.

Evidentemente, podrá ser una solución para ciertas cosas o para ciertos blogs pero, en lo personal, no creo que sea nada del otro mundo y le añade bastante poco a Blogger porque, eso que se crea, apenas es un post y nada más.

A ver si aclaro eso.

Un blog es una serie de las entradas que se muestran ordenadas cronológicamente y todas aparecerán listadas en un elemento como Archivos o podrá accederse a ellas navegando hacia atrás o hacia adelante. Por el contrario, una página estática es una entrada atemporal, algo que está fuera del orden cronológico y es lo que suele utiizarse para agregar información como el perfil, los formularios de contacto, los índices o mapas del sitio, los términos y condiciones de uso, etc. Por lo general, un blog estándard, no las usa para otra cosa y hasta acá, la única diferencia entre una entrada y ese tipo de página es que no se lista; nada más.

Por supuesto, en otro sistemas como WordPress, esta opción existe pero además, es mucho más amplia ya que esas páginas pueden tener diseños especiales, diferentes al estilo general, pueden entrelazarse y generarse estructuras de árbol que permiten relacionarlas, etc. En Blogger, nada de eso es posible. En Blogger, una página estática no es otra cosa que un post con una dirección URL diferente.

¡Y para eso tardaron tres años!!! ¡Y para colmo, lo tienen en Draft como si se tratara de algo tan complejo de hacer XD!!!

Esta es la URL normal de una entrada:

http://miBlog.blogspot.com/año/mes/titulo.html

y esta es la URL de una "page":

http://miBlog.blogspot.com/p/titulo.html

¿Más diferencias? Poco y nada; no admite etiquetas, pueden habilitarse o deshabilitarse los comentarios, el editor es el mismo que para una entrada, aparentemente, no puede cambiarse la fecha.

¿Más limitaciones? Sí, "puedes añadir hasta 10 páginas independientes". Diez, ni una más ... ¿? (más información)

Si la opción de crear páginas no se ve ¿pueden crearse igual? Si, basta acceder directamente:

http://draft.blogger.com/page-edit.g?blogID=XXXXXXX

reemplazando XXXXXXX por el ID de nuestro blog que podemos ver en cualquier página del escritorio de Blogger.

Una vez creadas, nos da tres opciones para integrarlas al blog, mejor dicho, para mostrar los enlaces esas paginas.

1. Agregarla a la sidebar utilizando un widget lo que generará un elemento que luego puede ser editado como cualquier otro y que tendra un código como este: Ver/Ocultar [+]

<b:widget id='PageList1' locked='false' title='Páginas' type='PageList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
<b:else/>
<li><a expr:href='data:link.href'><data:link.title/></a></li>
</b:if>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

2. Agregar el mismo widget dentro del llamado crosscol-wrapper, una sección que solemos no utilizar y que a veces, ni siquiera se encuentra en algunas palntillas. De este modo, aparecerá como un menú horizontal.

Si no existe, no es problema, simplemente, lo agregamos, colocando esto donde nos guste:

<div id='crosscol-wrapper'>
<b:section class='crosscol' id='crosscol' />
</div>

Tampoco es obligatorio colocarlo allí, podríamos moverlo a cualquier otra parte, como cualquier otro elemento o crear una sección nueva con cualquier nombre:

<div id='paginas-wrapper'>
<b:section class='paginasEstaticas' id='paginasEstaticas' />
</div>

Por defecto, hay una serie de propiedades CSS que lo controlan así que, en muchos casos, habrá que redefinirlas ya que preveen que las pongamos en ese crosscol o en el footer (ellos diseñan nuestro sitio); dicen esto:

.crosscol .PageList ul, .footer .PageList ul {  /* es una lista */
list-style: none outside none;
margin: 0;
padding: 0;
}
.crosscol .PageList li, .footer .PageList li {  /* los items de la lista */
background: none repeat scroll 0 0 transparent;
float: left;
list-style: none outside none;
margin: 0.75em;
padding-right: 0.75em;
}
.crosscol .PageList h2 {  /* el título */
display: none;
}
.PageList li a {  /* cada item es un enlace */
font-weight: normal;
}
.PageList li.selected a {  /* se resalta un item si es que estamos en esa página */
font-weight: bold;
text-decoration: none;
}

Los detalles a cambiar variarán segun sea la plantilla pero, podría tener cualquier diseño.

3. La última opción es no hacer nada. En ese caso, publicamos la página y luego, tomamos nota de la dirección URL generada y la usamos en un enlace, como a cualquier otra.

¿Cuál es el resultado de todo esto? Una entrada con una URL diferente al resto y nada más.

Una mìnima alternativa de personalización extra es que este tipo de páginas pueden ser identificadas y por lo tanto, pueden usarse condicionales:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    ... esto sólo se ejecutará en las páginas estáticas
</b:if>

o bien:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    ... esto se ejecutará en todas las páginas excepto en las páginas estáticas
</b:if>

Hay preguntas que por ahora no tienen respuestas:

¿Tiene un feed? Aparentemente no.
¿Se indexan? No sé. Esperemos que no ya que eso sería ilógico.

¿Es un avance? Y si pero, es poco, muy pero muy poco; mucho menos de lo que los usuarios de Blogger se merecen y muchísimo menos de lo que los desarrolladores podrían hacer si trabajaran un poco.

La propiedad background-size nos permite establecer las dimensiones de la imagen de fondo para definir la relación ancho/alto que debe mantenerse, sin que importe el tamaño del contenedor.

leer artículo actualizado

Bubble Weather by Enthropia

Contiene 118 íconos de 50×50 150x150 y 250x250 en formatos GIF y PNG.descargar

Design Carton

Contiene 10 íconos de 256×256 y 512x512 en formato PNG.descargar

DF Project by Navdeep Raj

Contiene 18 íconos de 256x256 en formato PNG.descargar

Leo Mix

Contiene 6 íconos de 256x256 en formato PNG.descargar

Lovely by LazyCrazy

Contiene 16 íconos en formato PNG.descargar

Thumby by murasaki55

Contiene 47 íconos de 256x256 en formato PNG.descargar

Blogger ha agreado una alternativa que podemos ver cuando cambiamos de plantilla.

Hasta ahora, cuando cargábamos una desde nuestra PC, si la nueva no tenía los mismos elementos agregados que la original, estos, desaparecían. Se nos advertía que se eliminarían y sólo había dos opciones, aceptar o cancelar el cambio.

Ahora, al hacer lo mismo, aparece una advertencia donde se enumeran los elementos que no existen y nos dan tres opciones: mantenerlos, eliminarlos o cancelar el cambio.

En principio, esto nos ahorraría el trabajo de hacer un backup de todo eso antes de cambiar la plantilla pero, por lo que he probado, no es tan así ya que ciertos gadgets y elementos no son mantenidos y desaparecen irremediablemente; así que, mejor no se fien demasiado y tomen precauciones.

Usar las librerías de Google es siempre una buena alternativa, no sólo en Blogger donde alojar cosas es "complicadamente imposible", sino en muchos otros sitios ya que son cargadas y guardadas en la caché del navegador y por lo tanto, están allí disponibles, aún antes de entrar en nuestra propia página si es que, por ejemplo, hemos visitado otro sitio que también las utiliza.

Las Google AJAX Library API no son las únicas que existen, Yahoo tiene las suyas llamadas Yahoo YUI CDN que son bastante confusas, y Microsoft ha comenzado a implementar las suyas a las que llama Microsoft AJAX CDN y que por ahora no son muchas.

En el caso de las de Google que son las que utilizo y a las que siempre hago referencia, es conveniente revisar la página en inglés regularmente ya que es la que se mantiene actualizada. Por ejemplo, en estos días, ha aparecido la nueva versión de jQuery y ya esta disponible así que convendría que quien la utilice, vaya cambiando el enlace de su plantilla.

Hay dos formas de cargarlas, utilizando el cargador que ofrece Google o agregándolas de manera directa. En el primer caso, colocamos un script genérico y luego la lista de librerías a cargar:

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

Tengan en cuenta que ese script llamado jsapi sólo debe ser cargado una vez así que si se usan diversas cosas como mapas o buscadores personalizados, sería bueno organizarlos. Cargarla varias veces no provocara problemas pero, será un desperdicio de tiempo.

Si no quiere usarse el cargador, simplemente escribimos la etiqueta de modo normal colocando la URL correspondiente:

<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js'></script>

Sólo hay que tener en cuenta que, si una librería depende de otra, hay que colocarlas en orden, por ejemplo, esto cargará jQuery y su librería de efectos:

<script src='http://www.google.com/jsapi'></script>
<script>
  google.load(&quot;jquery", &quot;1.4.0&quot;);
  google.load(&quot;jqueryui", &quot;1.7.2&quot;);
</script>

Por lo general, están alojadas varias versiones de la misma librería y muchas de ellas en dos modos, una mínima y una completa, cada uno elegirá la que más le conviene.

Las versiones más recientes son:

• jQuery 1.4.0
• jQuery UI 1.7.2
• Prototype 1.6.1.0
• script.aculo.us 1.8.3
• MooTools 1.2.4
• Dojo 1.4.0
• SWFObject 2.2
• YUI 2.8.0r4

A estas, le han agregado dos más.

Ext Core 3.1.0 que es una librería bastante liviana y Chrome Frame 1.0.2 que es una librería pensada para agregarle funciones avanzadas de HTML5 a Internet Explorer en sus versiones 6, 7 y 8.

Google Chrome Frame

Plugin para Internet Explorer.

<object width='425' height='350' id='movie' type='application/x-shockwave-flash' data='http://www.youtube.com/v/sjW0Bchdj-w'><param name='movie' value='http://www.youtube.com/v/sjW0Bchdj-w' /><param name='wmode' value='transparent' /><param name='allowfullscreen' value='true'/></object>Copiar el código para insertar el video

En un comentario, AleMauri hacia una pregunta interesante:

... si se subscriben muchos lectores, ¿no estás perdiendo visitas a tu blog? Pregunto, ya que verán tus posts en el reader que usen y no tendrán la necesidad de entrar al blog. Los feeds están diseñados para comodidad del lector pero, al perder estas supuestas visitas ¿no es un poco negativo para el blogger? Ya sé que al subscribirse significa que has ganado un lector y que teóricamente siempre leerá tus entradas, pero ¿no es mejor que entren al blog?

Es una pregunta razonable. Uno mira las estadísticas de Feedburner o cualquier otro servicio y veremos una cierta cantidad de personas registradas, lectores activos, lectores inactivos, incluso, gente que seguramente hizo click y se ha suscripto sin tener idea de lo que hacía. Habrá de todo. Al mismo tiempo, si vemos las estadísiticas de visitas, es posible que los valores difieran en poco o en mucho y no tenemos demasiadas formas de saber si para tener una idea global, deberíamos sumarlas o son independientes.

¿Acaso quitar esa posibilidad hará que tengamos más visitas? Mi respuesta personal es NO, en absoluto.

El tema básico de una web es la red en si misma y una red se teje con eslabones y todos ellos son importantes y no hay ninguno despreciable. Sea una red social, un servicio externo, los feeds o cualquier otra cosa, todo suma, poco o mucho pero eso poco importa. El total es la suma de todas esas pequeñas partes.

Todo lo que coloquemos en nuestro sitio que dificulte la navegación hará que los visitantes disminuyan rápidamente; cuantas más opciones tengamos, mejor será. De alguna manera, es la misma idea que suelen tener muchos respecto de los enlaces. Un error egoista es no enlazar, creyendo que si uno coloca un enlace a otro sitio, quien lee, hará click y se irá, dejándonos con el amargo sabor de ser ignorados.

Es posible que así sea pero también provocará dos cosas, primero, la información que compartimos será más amplia y eso será agradecido y segundo, ese enlace que colocamos es de ida y vuelta ya que quien enlace será enlazado, no por obligación sino porque de esa manera, la red se va ampliando y alguien irá desde acá hasta alguna parte pero también vendrá desde esa otras partes. Los enlaces y los feeds enriquecen a los blogs y no es en vano que sea uno de los datos sustantivos para evaluar su influencia.

En la misma entrada, Gem@ agrega otro comentario:

Lo que dice AleMauri es comprensible. Yo entiendo que los lectores son esas personas que puntualmente nos leen y precisamente por eso lo hacen desde el feed porque quizás de otra forma no tendría tiempo de hacerlo. Las visitas pueden ser visitas que vienen buscando algo, que nos siguen porque le gusta la temática o simplemente porque caen de casualidad siguiendo un enlace. Yo veo a las visitas como si entraran a nuestra exposición, miran, buscan, comentan ... pero desde el feed, es como si lo vieran todo desde un escaparate. Si les interesa, entrarán y podrán ver todo más detalladamente. Es el precio de la comodidad.

Es verdad, es el precio y lo cierto es que cada vez usamos más y más los lectores de feeds y eso, no es ni malo ni bueno, sólo inevitable.

En todo caso, la respuesta es lo de menos, lo importante es cuál es la pregunta a formular: ¿para qué quiero tener un blog? Y ahí ya no hay nada que agregar y cada cuál tendrá una opinión diferente y todos tendrán razón, incluso quienes, simplemente, no tengan la menor idea de para qué tienen un blog y siga allí funcionando, como una parte de nosotros mismos.

Cuando cargamos una página web, en la barra de estado solemos ver el proceso de carga, es decir, los archivos externos que se van insertando. En algunos de ellos, al terminar la carga se nos mostrará la palabra Listo pero, en Internet Explorer, es usual que también veamos un ícono de advertencia que nos indica un error en alguno de los scripts.

Que otros navegadores no muestren eso no significa que no haya errores así que, de alguna manera tiene su utilidad aunque, para un usuario normal es algo irrelevante y para quien tiene un blog, suele ser molesto o "poco estético". Si hacemos doble click sobre ese ícono, veremos una ventana que pretende explicarnos el error:

Su uso es dudoso. Para un usuario que navega, es un dato que no le interesa ya que nada puede hacer y para un administrador de un sitio, la información que brinda es bastante escasa. Sin las herrameintas adecuadas, buscar el error es casi imposible y con las herramientas adecuadas es bastante engorroso. Incluso, algunos de esos errores son imposibles de solucionar ya que son generados por scripts sobre los que no tenemos control o no podemos modificar.

Bien, para quien no quiera que eso se muestre, podemos agregar un par de líneas antes de </head> y ocultar eso:

<script type='text/javascript'>
  function noMostrarErrores(){ return true }
  window.onerror=noMostrarErrores;
</script>

Obviamente, esto nos impedirá "ver" que esos errores existen e incluso, algunos de ellos podrán filtrarse pero, digamos que es una forma de esconder la mayoría de ellos bajo la alfombra. Una forma poco sutil pero efectiva.

Los efectos elementales para mostrar y ocultar elementos con JQuery son bastante similares a los que se aplican con Scriptaculous.

Hay ocho funciones que los controlan:

show() y hide() muestran y ocultan un elemento de manera simple
fadeIn() y fadeOut() lo muestran u ocultan con un efecto de fade
slideDown() y slideUp() lo muestran u ocultan con un efecto deslizante
toggle() permuta el estado de un elemento, si está oculto lo muestra y viceversa
slideToggle() hace lo mismo pero con un efecto deslizante

Para utilizarlos, debemos indicar dos cosas, el elemento sobre el cual se va a aplicar el efecto y el enlace que ejecutará la función. Ambos deberían ser identificados con un ID único. Por ejemplo:

<div id="nombreContenido"> ....... el contenido ....... </div>
<a href="javascript:void(0);" id="nombreEnlaceMostrar"> MOSTRAR </a>
<a href="javascript:void(0);" id="nombreEnlaceOcultar"> OCULTAR </a>

La función sería algo así:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
  $("#nombreEnlaceMostrar").click(function () { $("#nombreContenido").show(); });
  $("#nombreEnlaceOcultar").click(function () { $("#nombreContenido").hide(); });
});
//]]>
</script>

Con el mismo tipo de sintaxis, podríamos utilizar los otros efectos:

$("#nombreEnlaceMostrar").click(function () { $("#nombreContenido").fadeIn(); });
$("#nombreEnlaceOcultar").click(function () { $("#nombreContenido").fadeOut(); });

$("#nombreEnlaceMostrar").click(function () { $("#nombreContenido").slideDown(); });
$("#nombreEnlaceOcultar").click(function () { $("#nombreContenido").slideUp(); });

Y en el caso de toggle sólo requerimos una instrucción:

$("#nombreEnlace").click(function () { $("#nombreContenido").toggle(); });

o bien:

$("#nombreEnlace").click(function () { $("#nombreContenido").slideToggle(); });

La palabra !important es algo que podemos agregar al final de una propiedad CSS y que realza cierto valor para, de esta forma, obligar a que se ignore una declaración y forzar un cambio.

Un ejemplo:

<a style="color: red !important;" href="javascript:void(0);">UN ENLACE ROJO</a>

Generalmente, los gadgets que agregamos incluyen ciertas propiedades sobre las cuales no tenemos control alguno así que podemos intentar sobrescribirlas usando esta palabra clave ya que nada impide usarla de manera inversa, es decir, declarando una propiedad ANTES que la otra. Explicación confusa pero veamos un ejemplo para probarlo de manera dramática.

La clase .post-body es la que por defecto, controla las propiedades de la entradas del blog. Podemos definirle una fuente de texto:

.post-body {
  font-family: Arial;
}

Si vamos al editor de entradas y allí escribimos algo, podemos formatearlo, cambiándole la fuente. El resultado será algo así:

<span style="font-family:courier new;">Integer vitae quam lectus! Donec sodales</span>

De ese modo, esa parte tendrá una fuente diferente a la definida por defecto. Primero decimos que es Arial y luego decimos que es Courier así que para el navegador, vale esta última porque SIEMPRE, las definiciones de estilo agregadas directamente a una etiqueta, tienen prioridad a las agregadas en la hoja de estilo. Pero ¿qué pasa si cambiamos la definición inicial y ponemos?:

.post-body span {
  font-family: Arial !important;
}

Pués entonces, sea lo que sea que pongamos en el editor, la fuente se mostrará en Arial y el navegador usará siempre esa fuente, aunque luego le digamos lo contrario.

Otro ejemplo:

a {color: red;}
a {color: blue;}

los enlace serán azules pero así:

a {color: red !important;}
a {color: blue;}

los enlace serán rojos.

Si bien la definiciones CSS se ejecutan de manera secuencial y la última sobrescribe a la anterior, hay una excepción y es cuando se encuentra una propiedad con la palabra !important. En ese caso, todas las demás declaraciones son ignoradas y lo único que podemos hacer para cambiar esto es agregarle esa palabra extra así que en el post de ejemplo, deberíamos escribir:

<span style="font-family:courier new !important;">Integer vitae quam lectus! Donec sodales</span>

Es por eso que debemos ser prudentes con el uso de esta palabra y sólo aplicarla cuando es absolutamente necesario ya que sino, nos veremos en problemas a la hora de corregir algo.

La pregunta concreta era ¿se pueden etiquetar posts desactualizados? Y la respuesta rápida es sí, claro, cualquier etiqueta es válida. Hasta ahí no hay problemas pero podemos hacer un poco más que eso, podemos crear alguna clase de advertencia visual que indique que cierta entrada es vieja y su contenido debería ser tomado como una referencia dudosa ya que muchas cosas pueden haber cambaido desde que fue escrita hasta el presente.

En realidad, lo mismo podemos hacer con cualquier post al que se le haya colocado una determinada etiqueta y queremos mostrarlo de una manera diferente al resto de las entradas.

Una forma de hace eso es buscar esta parte que es más o menos estandard y que solemos encontrarla en el footer de los posts

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>

Eso que se encuentra entre <b:loop ... > y </b:loop> es un bucle. Blogger lee cada una de las etiquetas del post y crea el código HTML del enlace con sus nombres (data:label.name) separados por comas.

Entonces, dentro de ese bucle, podemos agregarle condiciones de cualquier tipo que detecten si el post está identificado con alguna etiqueta en particular:

<b:if cond='data:label.name = &quot;nombre_etiqueta&quot;'>
... aquí hacemos algo ...
</b:if>

Para que este sistema funcione bien, debo identificar a los posts uno por uno mediante unatributo ID así que, en este ejemplo, he buscado esto:

<div class='post-body entry-content'>

Y lo he cambiado por esto:

<div class='post-body entry-content' expr:id='data:post.id'>

No importa mucho si la clase tiene otro nombre, sólo importa agregar eso resaltado que no hará otra cosa que identificar el contendio de cada entrada usando el número único que le otorga Blogger.

Supongamos entonces que a ciertas entradas les agrego la etiqueta desactualizado y quiero que esas entradas se muestren con un estilo diferenciado. Usaré un script y un CSS especial para marcarlos. Por ejemplo, crearé una clase llamada postViejo y colocaré lo siguiente antes de </head>:

<style type='text/css'>
/* coloco propiedades específicas para esos posts */
.postViejo {
background: transparent url(URL_imagen) no-repeat 50% 50%;
color: #678;
font-size: 14px;
line-height: 1.4em;
padding: 70px 20px;
}
</style>

<script type='text/javascript'>
//<![CDATA[
function postsViejos(cual) { document.getElementById(cual).className='postViejo'; }
//]]>
</script>

Ya tengo un estilo especial y una función que escribirá el atributo class en una etiqueta determianda; ahora, faltaría llamar a la función así que le agrego el condicional al bucle citado al principio:

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.name == &quot;desactualizado&quot;'>
        <script type='text/javascript'> postsViejos(&#39;<data:post.id/>&#39;) </script>
      </b:if>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>

Lo mismo podría hacerse con cualquier otra etiqueta. Por ejemplo, si uso una etiqueta llamada imagen, podría agregarle algo similar. Necesitaría otra clase CSS que añadiré al estilo anterior y que puede ser todo lo compleja que se quiera:

.postImagen {
-moz-border-radius: 10px;
-moz-box-shadow: inset 10px 10px 25px #432, inset -10px -10px 25px #432;
background-color: #101921;
margin: 70px auto;
padding: 40px;0;
text-align: center;
width: 450px;
}
.postImagen img {
-moz-border-radius: 10px;
-moz-box-shadow: inset 10px 10px 25px #765, inset -10px -10px 25px #765;
border: none !important;
padding: 20px !important;
}

Y también otra función que coloco dentro de la misma etiqueta script:

function postsImagenes(cual) {
document.getElementById(cual).className='postImagen';
}

Y el bucle ahora tendrá otra condición más:

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.name == &quot;desactualizado&quot;'>
<script type='text/javascript'> postsViejos(&#39;<data:post.id/>&#39;) </script>
</b:if>
<b:if cond='data:label.name == &quot;imagen&quot;'>
<script type='text/javascript'> postsImagenes(&#39;<data:post.id/>&#39;) </script>
</b:if>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>

La solución de Oloman para agregar contenido exclusivo para suscriptores es simple y efectiva. Se basa en una característica propia de los feeds: "no leen las propiedades CSS de los sitios"; así que, si colocamos en una entrada un DIV o cualquier etiqueta oculta con display:none; al leer los feeds o recibirlos via email, ese elemento será visible, aunque no querramos.

Esto, que en algunos casos es un fastidio, acá nos sirve para incorporar cualquier contenido extra.

Bastaría entonces, agregar una declaración así entre <b:skin> y </b:skin>:

.extra {
  display:none;
}

Y luego, usar esa clase en los posts:

<div class="extra">
  ....... y aquí colocaremos el contenido exclusivo .......
</div>

Si esto es algo que va a usarse de manera sistemática, también podríamos agregarlo de manera automática, por ejemplo, si vamos a la Configuración de Blogger, en la solapa Formato, la útlima de las opciones, Plantilla de entrada, nos permite escribir cualquier tipo de texto o código HTML que, por defecto, se verá cada vez que agreguemos una entrada (más información):

Plantilla de entrada <div class="extra"> agregar el contenido </div>

Hay que entender que, aún cuando eso no será visible en nuestro blog, está allí, accesible, ya que es parte del código fuente así que no es aconsejable utilizarlo para colocar información privada.

REFERENCIAS:Oloblogger

Ajax Twitter es un script que utiliza Prototype + Scriptaculous para mostrar nuestros últimos tweets en el blog.

El resultado es mucho menos personalizable que el descripto anteriormente pero eso lo hace también muy simple de implementar.

Por supuesto, necesitamos tener las librerías cargadas y eso lo podemos hacer utilizando las AJAX Libraries API de Google que agregamos antes de </head>:

<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load(&quot;prototype&quot;, "1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, "1.8.2&quot;);
</script>

Luego, necesitamos el script en si mismo y es muy simple, podemos descargarlo dentro de un ZIP desde el mismo sitio o bien copiar y pegar el contenido del archivo Ajax.js , debajo de lo anterior.

<script type='text/javascript'>
//<![CDATA[
function relative_time(time_value) {
var values = time_value.split(" ");
time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
var parsed_date = Date.parse(time_value);
var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
delta = delta + (relative_to.getTimezoneOffset() * 60);
if (delta < 60) {
return 'hace menos de un minuto';
} else if (delta < 120) {
return 'hace un minuto';
} else if (delta < (60 * 60)) {
return 'hace ' + (parseInt(delta / 60)).toString() + ' minutos';
} else if (delta < (120 * 60)) {
return 'hace casi una hora';
} else if (delta < (24 * 60 * 60)) {
return 'hace ' + (parseInt(delta / 3600)).toString() + ' horas';
} else if (delta < (48 * 60 * 60)) {
return 'ayer';
} else {
return 'hace ' + (parseInt(delta / 86400)).toString() + ' dias';
}
}

function twitterCallback2(twitters) {
var statusHTML = "";
for (var i = 0; i < twitters.length; i++) {
statusHTML += '<li>' + twitters[i].text + '&nbsp;<small>(' + relative_time(twitters[i].created_at) + ')</small></li>';
}
$('list-twitter').innerHTML = '<ul>' + statusHTML + '</ul>';
$('spinner-twitter').hide();
$('list-twitter').slideDown({ duration: 2 });
}
//]]>
</script>

Ahora, supongamos que vamos a mostrarlo en un elemento HTML, crearemos uno y colocamos esto:

<div id="twitter">
<h6> NUESTRO TíTULO </h6>
<p id="spinner-twitter"> ... cargando ... </p>
<div id="list-twitter"></div>
</div>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/nuestroNombre.json?callback=twitterCallback2&count=5"></script>

Allí, sólo debemos cambiar el dato nuestroNombre.

Faltaría un poco de CSS para personalizarlo. Elo también lo podemos poner antes de </head>:

<style type='text/css'>
#twitter { /* el rectángulo que contendrá todo */
-moz-border-radius: 10px;
background-color: #333;
border: 2px solid #444;
color: #CCC;
font-family: Helvetica,
font-size; 13px;
height: 100%;
margin: 0 auto;
padding: 10px;
width: 250px;
}
#twitter h6 { /* el título */
color: #EEE;
font-family: Century Gothic;
font-size: 22px;
font-weight: normal;
margin: 0;
text-align: center;
}
#list-twitter ul { /* la lista con los tweets */
margin:0;
}
#list-twitter li { /* cada item de esa lista */
background-color: #444;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
list-style-type: none;
margin: 5px 0;
padding: 5px;
}
#list-twitter li:first-child { /* el primer item de esa lista */
background-color: #000;
border-bottom: 1px solid #444;
border-top: 1px solid #444;
}
#list-twitter small { /* la fecha de publicación */
color: #999;
display: block;
font-family: Tahoma;
font-size: 10px;
padding: 2px 10px;
text-align: right;
}
</style>

Hay algunos detalles que parecen generar dudas cuando hablamos de superoponer contenidos. Todo el truco (si es que podemos llamarlo truco) es el uso de la propiedad position que es una de las más poderosas que tiene el CSS.

Los valores que son aceptados son varios (y ahora muchos más que antes desde que IE8 comenzó a interpretar algunos de ellos) pero, nos basamos sólo en dos de ellos: relative y absolute.

Veamos un ejemplo normal de un DIV oscuro y otro DIV claro, puestos uno debajo el otro y con alguna propiedad elemental:

<style>
.recOSCURO { background-color: #666; height: 150px; width:350px; }
.recCLARO { background-color: #CCC; height: 50px; width: 250px; }
</style>
<div class="recOSCURO">
<div class="recCLARO"> ....... </div>
</div>

Si no tienen contenido (no textos ni imágenes veríamos esto:

Si a ambos, les agregamos la propiedad position:relative; nada cambiaría, se vería lo mismo.

Como uno está dentro del otro, se dice que el externo (el que tiene el atributo class="recOSCURO") es el contenedor o elemento padre y el que está en el interior, (el que tiene el atributo class="recCLARO") es el contenido o elemento hijo.

Vamos a ponerle al primero la propiedad position:relative; y al segundo la propiedad position:absolute;

Tampoco vemos cambios evidentes pero, han cambiado de manera fundamental. El elemento oscuro (el contenedor) ahora nos sirve de referencia para posicionar el contenido y este, al tener definida su posicion como absoluta, puede ser ubicado de manera precisa dentro del otro. Si no vemos nada distinto es porque aún no le hemos indicado nada.

Para ubicarlo, usamos las propiedades left top right y bottom; todas o algunas de ellas. Estas, indican la distancia en que comenzará a mostrarse ese rectángulo y, al no poner nada aún, se asume que está en top:0px; left:0px; que es la posición por defecto de cualquier elemento; es decir, está en la parte superior izquierda del contenedor.

Vamos a moverlo. usamos el mismo código HTML pero, modificando las propiedades CSS:

.recOSCURO { background-color: #666; height: 150px; width:350px; position:relative; }
.recCLARO {
background-color: #CCC; height: 50px; width: 250px;
position: absolute;
right: 0px; bottom: 0px;
}

Hemos colocado el elemento en el extremo opuesto, en el ángulo inferior derecho.

Ahora, lo pondremos en el centro (hay que hacer algunas operaciones de suma y resta):

.recCLARO {
.......
left: 50px; top: 50px;
}

Como esas cuatro propiedades aceptan valores negativos, podemos sacar nuestro rectángulo del contenedor:

.recCLARO {
.......
right: -100px; top: 50px;
}

En todos los casos, el DIV contenedor es quien manda. Si, por ejemplo, lo centramos, el elemento interno se ubica igual, tomando como referencia, la posición del contenedor, sea cual sea esta:

¿Que pasa si el contenedor tiene un borde? pués entonces, ese borde no se tiene en cuenta (está por afuera) ¿Que pasa si el contenedor tiene un padding? entonces, esa separación es parte de su tamaño así que la posición top:0px siempre es la superior (sin el borde).

.recOSCURO {
.......
border: 5px solid #FFF;
margin: 0 auto;
padding: 10px;
}
.recCLARO {
.......
border: 5px solid #AAA;
right: -50px; top: 0px;
}

En resumen.

Para posicionar algo de manera exacta, el contenedor debe ser un bloque que tenga la propiedad position: relative; y el contenido, la propiedad position: absolute;.

Esto, último puede aplicarse a algunos de los elementos contenido o a todos ellos; de esta forma, podemos tener un control completo de cada etiqueta que agreguemos, sean esta imágenes, textos o cualquier otra cosa.

A

B

C

Google Code Pretiffy es un profecto alojado en Google Codes que permite que formateemos códigos.

A diferencia de muchos otros sistemas que requieren que usemos un servidor propio o PHP, este funciona en cualquier página web y para eso, basta agregar un script y el CSS que podemos descargar desde el mismo sitio del desarrollador.

Soporta muchos lenguajes: C/C++, Java, Python, Ruby, PHP, VisualBasic, SQL, HTML, XML, CSS, JavaScript, etc. La lista completa con ejemplos puede ser revisada en esta página y lo más interesante es que la detección es automática, es decir, no es necesario especificar el idioma.

Todo lo que debemos hacer es agregar ambos archivos antes de </head>:

<style  type="text/css" src="URL_prettify.css"></style>
<script type="text/javascript" src="URL_prettify.js"></script>

Y luego, agregar la llamada a la función, ya sea en la etiqueta BODY:

<body onload="prettyPrint()">

o con un script:

<script type="text/javascript"> window.onload = prettyPrint(); </script>

De aquí en adelante, lo usamos agregando la clase prettyprint a cualquier etiqueta PRE o CODE:

<pre class="prettyprint">
.......
</pre>

Lo mejor, para personalizar el script es agregar el CSS directamente en la plantilla y editarlo, cambiando los colores y otros formatos para adecuarlo a nuestro sitio.

Las definiciones elementales son estas:

pre.prettyprint {
/* 
esto define el rectángulo de la etiqueta y es donde podemos estabelcer colores de fondo, bordes, márgenes,
así como ambiñén las fuentes de los textos y sus tamaños
creo que también debería incluir:
white-space:pre-wrap;
para evitar que las líneas excedan el ancho disponible
*/
}

/* todas las demás, son los colores de las diferentes partes y habrá que descubirlas por ejemplo: */
.pln {color: #000} /* el color base */
.str {color: #080}
.kwd {color: #008}  /* las funciones */
.com {color: #800} /* los comentarios */
.typ {color: #606}
.lit {color: #066} /* los datos */
.pun {color: #660} /* los símbolos */
.tag {color: #008} /* las etiquetas */
.atn {color: #606} /* los atributos */
.atv {color: #080} /* los valores de los atributos */
.dec {color: #606}

Roundabout es un script para JQuery que permite crear listas interactivas.

Podemos usarlo tanto para textos como para imágenes. Aún más, en la página del desarrollador hay una serie de ejemplos más sofisticados, un reloj o una pequeña animación.

Lo elemental es simple; basta tener la librería de JQuery, descargar el script roundabout-1.0.min y poner ambos antesde de </head>, por ejemplo, así:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
&lgt;script type="text/javascript" src="URL_jquery.roundabout.1.0.min.js"></script>

Debajo, un poco de CSS:

<style type='text/css'>
  .roundabout-holder { /* es el rectangulo dentro el cual se moveran */
    height: 5em;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  .roundabout-moveable-item { /* cada uno de los items a mover */
    background-color: #ABC;
    border: 2px solid #345;
    color: #FFF;
    cursor: pointer;
    height: 4em;
    text-align: center;
    width: 4em;
  }
  .roundabout-in-focus {
    cursor: auto;
  }
</style>

Faltaría el HTML que ponemos donde nos guste y que sólo es una lista con un ID único:

<ul id="nombreExclusivo">
  <li> ... el contenido ...</li>
  <li> ... el contenido ...</li>
  <li> ... el contenido ...</li>
</ul>

Lo ponemos a funcionar llamando a la función:

<script type="text/javascript">
// <![CDATA[
  $(document).ready(function() {
    $('ul#nombreExclusivo').roundabout();
  });
// ]]>
</script>

Y como podemos tener varios en una misma página, como cada uno tiene un nombre diferente, basta agregarlos; por ejemplo, así:

$(document).ready(function() {
  $('ul#unNombre').roundabout();
  $('ul#otroNombre').roundabout();
  $('ul#ultimoNombre').roundabout();
});

El script tiene muchas alternativas para ser personalizarlo y acepta una serie de técnicas avanzadas que pueden ser vistas en la página del desarrolaldor o bien en una página con demos.

Lentamente, los navegadores van incorporando opciones de diseño aunque, claro está, cada uno lo hace a su modo y con sus propia sintaxis; pequeño detalle que ... nos vuelve locos.

Las sombras son una de esas opciones y ni la w3.org tiene claro que hacer con ellas y ha sido removida temporalmente de las especificaciones del futuro CSS3. Se soponía que uno podría aplicarlas de manera similar a esto:

box-shadow: 5px 5px 5px #AABBCC;

Pero, pese a que box-shadow aún no funciona, algunos navegadores siguen teniendo la posibilidad de agregar sombras, no solo a los textos usando la propiedad text-shadow, sino también a bloques, es decir, a etiquetas como DIV, P o incluso IMG y  si bien se recomienda que esos bloques estén dimensionados con width o height, sólo es necesario en versiones de Internet Explorer anteriores a la 8.

box-shadow: 5px 5px 5px #ABC;

en Internet Explorer 8 (ver detalles):

-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5)";

en Internet Explorer en general (ver detalles):

filter: progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5);

Este es un texto dentro de un DIV

Bueno, eso del mismo resultado es un decir porque en IE las sombras se muestran "duras" más estáticas pero, algo es algo.

Para aplicar el efecto, he declarado una clase y la he agregado a un DIV:

<style>
.sombra {
/* propiedades normales */
border-radius: 10px;
background-color: #456;
color: #DEF;
font-size: 24px;
height: 30px;
margin: 20px auto;
padding: 10px;
text-align: center;
width: 400px;
/* propiedades de la sombra */
box-shadow: 5px 5px 5px #ABC;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5);
}
</style>

<div class="sombra"> Este es un texto dentro de un DIV </div>

De manera similar, prodría aplicarse a un elemento más complejo:

Esta es una imagen dentro de un DIV

La sintaxis para Firefox y todos los navegadores basados en Gecko es la siguiente (los que usan WebKit son similares, sólo cambia el nombre de la propiedad):

box-shadow: offsetX offsetY blurRadius spreadRadius colorRGB;

offsetX offsetY indican la distancia horizontal y vertical del comienzo de la sombra; valores positivos colocan la sombra debajo; valores negativos, colocan la sombra arriba:

box-shadow y box-shadow
Este es un texto dentro de un DIV	Este es un texto dentro de un DIV	Este es un texto dentro de un DIV

blurRadius indica el efecto blur o esfumado, cuanto más alto sea, más se esfuma y, por defecto es 0:

blurRadius 1	blurRadius 10	blurRadius 50
Este es un texto dentro de un DIV	Este es un texto dentro de un DIV	Este es un texto dentro de un DIV

spreadRadius es el tamaño de esa sombra, su ancho y su alto; un valor de 0 hace que sea tan grande como el elemento:

spreadRadius 5	spreadRadius 10	spreadRadius 20
Este es un texto dentro de un DIV	Este es un texto dentro de un DIV	Este es un texto dentro de un DIV

Hay un dato extra que podemos incluir: la palabra inset que hará que la sombra, en lugar de estar afuera, esté adentro. Un ejemplo:

box-shadow: -110px 2px 30px 1px #AABBCC inset;

Este es un texto dentro de un DIV

Para tener esa sombra en ambos ángulos, agregamos otra definición, separándola con una coma. De este modo:

box-shadow: 5px 5px 5px #ABC, -5px -5px 5px #ABC;

Este es un texto dentro de un DIV

La propiedad puede ser combinada con cualquier otra (bordes, fondos, curvas) y generar cualquier tipo de efecto extraño:

box-shadow: 0 0 20px black, 20px 15px 30px yellow, -20px 15px 30px lime, -20px -15px 30px blue, 20px -15px 30px red;

Este es un texto dentro de un DIV

En Internet Explorer lo que se usa es uno de los tantos filtros disponibles, la propiedad básica es filter aunque en IE8 se habla de -ms-filter, en realidad, ambas son la misma; la única diferencia es que en un caso, los valores se colocan entre comillas y en el otro, no:

-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(propiedades)"; 
filter: progid:DXImageTransform.Microsoft.Shadow(propiedades);

Cada una de esas propiedades se separa con una coma y hay disponibles cuatro:

color indica el color de la sombra en formato RGB
direction establece la direccion (un ángulo) de la sombra y es un valor en grados (por defecto 225)
enabled puede ser false o true y habilita o deshabilita la sombra
strength es el tamaño de la sombra, cuánto se extenderá y su valor máximo es 255

filter: sólo en Internet Explorer
Este es un texto dentro de un DIV	Este es un texto dentro de un DIV	Este es un texto dentro de un DIV

Las sombras pueden agregarse y quitarse a voluntad, por eso podríamos crear alguna clase de efecto hover. Las quitamos con:

box-shadow:  none;
filter: progid:DXImageTransform.Microsoft.Shadow(enabled=false);

Al colocar el cursor encima, se mostrará una sombra ...

<style>
.sombra {
box-shadow: none;
filter: progid:DXImageTransform.Microsoft.Shadow(enabled=false);
}
.sombra:hover {
box-shadow: 5px 5px 5px #AABBCC;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#AABBCC,direction=125,strength=5,enabled=true);
}
</style>

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