Aunque Windows Live SkyDrive nos jugó una mala pasada y no nos deja usarlo para cierto tipo de archivos que necesitamos ejecutar desde el blog, aún así, sigue siendo una buena alternativa para alojarlos porque es sencillo de manejar y útil cuando compartimos información que debe descargarse.
Sus 25 gigas de espacio, la posibilidad de establecer restricciones al acceso y el hecho de aceptar casi cualquier formato, lo siguen teniendo entre mis sitios de uso corriente.
En todo caso, una molestia en su manejo es que ciertas funciones como subir archivos son más cómodas con el ActiveX que sólo funciona en Internet Explorer pero, eso tiene remedio con un software muy interesante llamado Windows Live SkyDrive Explorer que, por lo que he visto, funciona muy bien y ahorra tiempo.
Lo instalamos en Windows descargándolo gratuitamente y desde ese momento, podremos acceder a cualquiera de nuestras cuentas de SkyDrive desde el Explorador de Archivos, sea este el de Windows o cualquier otro que utilicemos. Aparecerá como carpeta virtual dentro de Mi PC y, de alguna manera, funciona como un FTP.
Click en el ícono y accedemos de manera tradicional, con nuestra ID y contraseña. a partir de ese momento, estaremos conectados y sincronizados con el servicio hasta que apaguemos la PC o cerremos la sesión con el botón Logout que se adosa a la barra de herramientas del explorador.
Se nos mostrará como árbol de directorios y se mostrarán los archivos alojados, su tamaño, tipo, fecha de creación, etc. Podremos crear carpetas y subcarpetas, renombrar, copiar, pegar, eliminar, tanto archivos individuales como estructuras enteras del mismo modo en que lo haríamos en nuestra PC, arrastrando y soltando o bien usando los menues.
Una de las posibilidade del JavaScript es que nuestro blog puede tener ciertas características y luego, algún tipo de código las puede cambiar muy rápidamente y sin que esto sea evidente para los visitantes. Un ejemplo típico de esto son los emoticones en los comentarios; alguien escribe cierta combinación de caracteres como :) y una función se encarga de buscarlos y cambiarlos por una imagen.
Con el mismo criterio y de manera simple, también es posible modificar otro tipo de textos, en realidad, cualquiera.
Supongamos que nos gustaría que en las entradas, cada vez que hacemos referencia a nuestro sitio, en lugar de aparecer un enlace como texto, quisiéramos que se muestre una imagen, alguna clase de logo. Es sencillo de hacer, escribimos el código en la entrada y listo:
...etiam rhoncus iaculis magna ac accumsan sed at dui et eros mollis hendrerit ...
No hay problema pero ... hay que escribirlo ... eso mismo lo podríamos hacer de manera automática y evitarnos el trabajo de recordar el código; para eso, sólo necesitamos de una función cuya estructura elemental sería algo así:
¿Qué hará eso? Una vez que las entradas son mostradas, buscará dentro de ellas una PALABRA y la reemplazará por un código HTML que deberemos establecer nosotros.
¿Qué palabra? Cualquiera pero es recomendable que usemos una plabra inventada, algo que podamos recorar con facilidad y que no tenga otro posible uso. Por ejemplo, podría usar MILOGO y hacer que en lugar de verse esa palabra, se viera una imagen que fuera un enlace a mi sitio:
Coloco entonces eso antes de </head> y me faltaría hacer que se ejecutara. Para que esto funcione sin problemas y sin interferencias, lo que debemos hacer es identificar las entradas de manera precisa, dándoles un ID exclusivo. Expandiendo los artilugios, buscaremos algo así:
Esto es un poco "antiguo" y sólo funciona en Internet Explorer pero, ya que lo preguntan, lo contesto aunque no creo que sea algo para recomendar sino un resabio de la guerra entre Microsoft y Netscape, cuando ambos peleaban por controlar el mercado de los navegadores.
Sin embargo, no deja de ser sorprendente el uso de los filtros de IE y es una pena que no se hayan estandarizado.
Se trata de las transiciones entre páginas, es decir, la página a la que entramos no se muestra de modo normal sino que aparece con alguna clase de efecto visual (más información).
El código que se utiliza se incluye en una etiqueta META en el HEAD de la página y hay 24 efectos disponibles que pueden verse sólo cuando entramos a una página o cuando salimos de ella:
donde el VALOR de Duration es el tiempo expresado en milisegundos (normalmente es 1) y el de Transition es un número de orden que indica el tipo de transición (0 a 23).
Transition=0 Box in
Transition=1 Box out
Transition=2 Circle in
Transition=3 Circle out
Transition=4 Wipe up
Transition=5 Wipe down
Transition=6 Wipe right
Transition=7 Wipe left
Transition=8 Vertical blinds
Transition=9 Horizontal blinds
Transition=10 Chess across
Transition=11 Chess down
Transition=12 Random dissolve
Transition=13 Split vertical in
Transition=14 Split vertical out
Transition=15 Split horizontal in
Transition=16 Split horizontal out
Transition=17 Strips left down
Transition=18 Strips left up
Transition=19 Strips right down
Transition=20 Strips right up
Transition=21 Random bars horizontal
Transition=22 Random bars vertical
Transition=23 Random
Hay un efecto especial llamado Blend que tiene un parámetro específico:
Claro que podemos incrustar múltiples videos de YouTube sin nada especial, copiamos los códigos y listo pero, eso significará que nuestra página se hará muy lenta. También es cierto que podemos recurrir a algún truco que resuelva esto o usar alguna ventana modal.
Si ya tenemos esa librería en nuestro sitio, no hace falta agregarla. Si no la tenemos, podemos hacerlo poniendo esto antes de </head> o directamente en una entrada:
Ahora, donde querramos que se vea nuestra lista de videos, escribiremos lo siguiente:
<div id="contenedorYT">Cargando ...</div>
<script type="text/javascript">
swfobject.embedSWF(
'http://www.youtube.com/v/ID_VIDEO_1&enablejsapi=1&rel=0&fs=1',
'contenedorYT',
'425','344', '8',null,null,
{allowScriptAccess: 'always',allowFullScreen: 'true'},
{id: 'reproductorYT'});
function cargarVideo(id) {
var o = document.getElementById( 'reproductorYT' );
if( o ) {o.loadVideoById( id );}
}
</script>
Todo eso en una sola línea si se trata de una entrada de Blogger.
ID_VIDEO_1 es el ID del primer video, el que aparecerá por defecto 425 y 344 son el ancho y alto del video contenedorYT es el ID del DIV donde se mostrará el video reproductorYT es el ID del reproductor en si mismo
Debajo, pondremos nuestra lista de videos a reproducir, en este caso, usando las mismas miniaturas que nos provee YouTube:
Vale recordar que el ID es una serie de once caracteres alfanuméricos que podemos tomar desde cualquier página del servicio. Por ejemplo, si el video fuera este:
El resultado, será un video incrustado y debajo, una serie de miniaturas donde podremos hacer click para ir ejecutándolos uno a uno y que se irán cargando de manera dinámica.
En horas de mi madrugada (vaya uno a saber la hora de otros lugares de este planeta) Blogger colapsó.
Bah, eso no sorprende a nadie pero, no fue un colpasito de esos comunes y corrientes, fue un colpsón monumental, se murió todo, absolutamente todo, era como si lo hubieran desenchufado o, si, como me decía Nico, alguien hubiera derramado el vino sobre las consolas. El kaput fue completo, total, de antología, no sólo no podía accederse al escritorio sino que tampoco podía verse ningún blog en ninguna parte del mundo.
Mirando la búsqueda de Twitter era increible ver como aparecían quejas, preguntas e insultos a razón de 30 mensajes por segundo en todos los idiomas:
Al rato (bastante rápido si nos guiamos por otros antecedentes similares), Blogger informaba (también en Twitter, claro, si no podía hacerlo en otro lado) que: "estaba investigando el apagón (SIC) ocurrido en blogger.com y of course daba gracias por la paciencia (de santos) y afirmaban que estaban trabajando para resolver el problema".
Pasó media hora y la humanidad se unía en un solo grito: What the heck is wrong with Blogger? ...
Pasaron 45 minutos ... pasó una hora ... pasaron dos horas y por fin Blogger dijo: "We have fully restored Blogger functionality. Thanks for your patience."
Si usted no tuvo la suerte de participar en este Rocky-Blogger-Horror-Show, espero que mi crónica de los hechos haya sido lo suficientemente descriptiva. Si no lo fue, no importa, no se perdió de nada, solo de una serie de números de error ininteligibles pero, eso lo resolvemos rápido. Elija el que más le guste:
bX-9d2teg
bX-5eka1d
En fin, me uno a lo que decía un usuario: La canción favorita de Blogger es "I'm Down" así que, ahora que funciona, me permito ofrecérsela de regalo.
You telling lies thinking I can't see, you can't cry 'cos you're laughing at me I'm down ... oh yes I'm down, down, down, down, down, down, down, down, down, down ...
Así cómo Google Docs nos permite usar los feeds de los documentos creados para utilizarlos como bases de datos mínimas, también tiene opciones más simples a las que podemos acceder para generar utilidades de distinto tipo. Una de ellas son los formularios:
El ejemplo más sencillo es un formulario con una encuesta.
Es cierto que Blogger dispone de un gadget para encuestas pero, es bastante limitado. Por el contrario, los formularios de Google Docs tienen muchísimas opciones: textos simples, múltiple choice, listas, escalas, etc; y además, todas ellas pueden combinarse y generar encuestas entrelazadas entre si de varias páginas de longitud.
No hay mucho que explicar al respecto, basta crear un formulario nuevo y jugar un rato con las diferentes alternativas ya que el sistema es bastante amigable y podemos editarlo tantas veces como se nos ocurra.
Si bien el resultado por defecto es un texto plano, hay muchas plantillas que pueden seleccionarse que resuelven el tema gráfico aunque sea parcialmente.
Una vez que ya hemos creado nuestra encuesta, basta guardarla y listo. En el menú More Actions veremos una opción Embed que nos dará el código para insertarla en una página web y que, como todo código HTML, podemos personalizar un poco:
Obviamente, el tamaño suele ser excesivo así que es mejor cambiarlo para adaparlo a nuestro siito pero, también podemos usar alguna ventana modal para mostrarlas ya que se trata de una página web. En este caso, usando LightWindow:
Aún más interesante es que los resultados son accesibles de dos formas a través del menú See Responses, podemos verlos como un gráfico (Sumary) y , como el formulario creado es una hoja de cálculo, podemos acceder a ella y ver la información recogida.
Desde el menú Share de la hoja de cálculo, podemos seleccionar Set Notifications Rules para que nos envien un mail cada vez que alguien responde, compartirla, etc (más información).
Un blog en Blogger y el alojamiento de archivos ---> un problema recurrente y un problema que sólo tiene una posible solución, que el servicio nos permita alojarlos de una vez por todas ... pero eso es un sueño, una utopía, un ruego y nada más.
En este momento, el problema se ha generado en algunas cuentas de Fileden. Hace días que tienen problemas y no hay forma de acceder a ellas. Ahora, un comunicado oficial aclara las cosas. En resumen dicen que un fallo con los discos duros de un par de sus servidores han terminado por destruir parte de la información allí guardada y, al parecer, el contenido de ciertas cuentas se ha perdido y difícilmente pueda ser recuperado.
Esto afecta a todas las cuentas creadas en el año 2006 y las creadas en enero y julio del 2009.
Podrá ser un buen o mal servicio, podría haber sido evitado, quién sabe. Lo cierto es que esto es algo que puede pasar con cualquier sistema y en cualquier momento así que somos nosotros quienes debemos tomar acciones para minimizar los posibles consecuencias.
Es fundamental, entonces, que respaldemos la información y que esos respaldos sean redundantes.
Acostumbrémonos a exportar nuestro blog de manera sistemática y mantener no una sino dos o tres copias de estos archivos exportados en nuestra PC. Para eso, en Configuración | Básico, la primera opción es Herramientas del blog. Click en Exportar blog y nos guardará un archivo XML con las entradas, comentarios y otros datos de la configuración. Con ese archivo, mal que mal, podremos, en caso de emergencia, restaurar nuestro sitio haciendo el proceso inverso.
Lo mismo debemos hacer con la plantilla desde Diseño | Edición de HTML, hacemos click en Descargar plantilla completa y tendremos un archivo XML pero, esto no será suficiente. Los elementos agregados no se descargan así que deberíamos tomarnos el trabajo de copiar su contenido y guardarlo de manera separada.
Ningún sistema de backup incluye las imágenes así que tengamos la precausión de tenerlas en nuestra PC, lo mismo que todo otro tipo de archivo accesorio, scripts, CSS, Flash. No demos nada por sentado, ningún sistema es infalible y todo puede ser perdido en un instante. Nuestra única salida es ser precavidos.
Es recomendable usar Blogger mismo para alojar las imágenes de los posts y de la plantilla; si nos parecen importantes, tengamos una copia siempre disponible.
No confiemos en ningún servicio externo, tratemos de usar aquellos que nos ofrecen una URL amigable y alojemos las cosas en dos sitios o cuentas diferentes, de tal modo, podremos permutar rápidamente de uno a otro servicio sin necesidad de editar las entradas una por una. También podemos usar algún script como el que se explicaba en esta entrada o bien redireccionar los archivos de alguna manera, modificando los enlaces antigüos por los nuevos.
Una de las principales características de la web es su dinamismo y eso hace que todo sea efímero por lo tanto, no hay que confiarse jamás; ningún servicio es 100% fiable y cualquiera puede fallar. Mejor dicho, inevitablemente, en algún momento, todo servicio fallará. Si lo tenemos claro, los problemas serán molestos pero podremos resolverlos.
Is my blog working es un servicio online que verifica si un blog está funcionando y lo hace de manera rápida, mostrándonos cómo responde ante ciertas solicitudes.
Entramos la URL del sitio y en unos segundos tendremos información divididida en dos secciones. La primera, incluye datos como el chequeo del servidor, los feeds, el archivo robots.txt, la cantidad de página indexadas en Google y Bing, etc. La segunda, incluye un análisis sobre la velocidad y el volumen de las páginas.
Tres enlaces adicionales permiten acceder a otras herramientas:
Para terminar con los posts resumidos sólo faltaría una cosa, ver como colocar una imagen miniatura aunque primero voy a responder a una pregunta.
En el ejemplo anterior se muestra la forma de crear esos resúmenes del mismo modo que lo hace PeekABooPost; el home normal pero las páginas con listas de entradas resumidas. Ese no es el único modo de hacerlo y, en mi caso uso una condición diferente, el primero de cualquier pagina se muestra entero y el resto, resumido. Para eso, no hace falta cambair mucho, basta modificar la condición que antes era esta:
Tendrá una clase CSS llamada celdaimg y contendrá un DIV con una clase miniresumenpost y al que identificaremos individualmente con un ID: thumb-xxxxxxxxxx. El CSS para agregar será algo así:
.post-resumen td.celdaimg { /* el ancho de esa celda con la imagen */
width: 100px;
}
.miniresumenpost { /* la imagen será un fondo, centrado y del tamaño que uno quiera */
background: transparent url() no-repeat scroll 50% 50%;
height: 120px;
overflow: hidden;
width: 90px;
}
Esta sólo es una alternativa pensada para no redimensionar las imágenes ya que al forzarlas a tener un tamaño fijo se deforman. De este modo, se usa la imagen tal cual pero sólo se muestra una parte de ella; en este caso, la parte central y eso es lo que define la posición de background 50% y 50%.
Por último, el script que es el mismo que se utilizaba antes al que se le agrega el manejo de las miniaturas:
// RESUMEN POSTS
function resumenPost(idPOST) {
var divAuxiliar = "dummy-" + idPOST;
var contenido = document.getElementById(divAuxiliar);
// buscar una imagen y mostrarla
var listaImagenes = contenido.getElementsByTagName("img"); // leemos la lista de imágenes del post
var mostrarImagen = "archivo"; // la imagen por defecto
if(listaImagenes.length>0) { // si hay una imagen, usamos la primera que encontramos en el post
mostrarImagen = listaImagenes[0].src;
}
var spanThumb = "thumb-" + idPOST; // y la colocamos como fondo en el DIV
document.getElementById(spanThumb).style.backgroundImage = "url("+ mostrarImagen + ")";
// crear un extracto de la entrada
contenido = document.getElementById(divAuxiliar).innerHTML;
resumen = contenido.replace(/<[^>]+>/g,'');
longitud = 150;
var auxiliar = resumen.split(" ");
var nueva ="";
for(var i=0; i<auxiliar.length; ++i) {
nueva = nueva.concat(auxiliar[i]) + " ";
if(nueva.length > longitud) {break}
}
resumen = nueva +"...";
var spanResumen = "resumen-" + idPOST;
document.getElementById(spanResumen).innerHTML = resumen;
}
Herramientas de Adobe Air para desarrolladores publicadas en varias entradas de webresourcesdepot.com ... desarrolladores o simples curiosos como nosotros.
No sé si StageVU es el sucesor del difunto Stage6 o no pero, mientras dure, hay que aprovecharlo.
Los videos pueden ser vistos online o descargase en la PC pero requieren que se tengan instalados los códecs de DivX, en especial el DivX Web Player que está disponible tanto para para Windows como para Macs.
El DivX es un formato creado por Adobe Systems que produce videos de mayor calidad que los que acostumbramos a ver con los reproductores de Flash y funciona en cualquier navegador.
StageVU es un poco confuso a la hora de buscar pero tiene la misma estructura que sus predecesores. Si queremos subir videos, podemos registrarnos gratuitamente y el proceso es más o menos sencillo. Admite todos los formatos conocidos, pueden crearse canales, comentar, etc. También pueden insertarse una página web mediante un IFRAME
Parecería que hay problemas con las fechas de las entradas. Si esto es un error circunstancial de Blogger o un cambio, nadie lo sabe. Por lo que puede verse, ha desaparecido uno de los formatos que podían elegirse en la Configuración | Formato | Formato de cabecera de fecha, el que los mostraba así: 16-oct-2009.
Entonces, quien emplea algún script para mostrar esa fecha de otro modo, ya sea como un calendario o como un texto formateado verán que la fecha o parte de ella se ve como undefined.
Hay muchas variantes de esos scripts y para solucionar el problema, no hay más remedio que entenderlos un poco. Este es un modelo standard:
La primera línea separa la fecha en partes, usando, en este caso, un guión como separador. Es decir, si la fecha es 16-oct-2009, tendremos tres datos independientes:
el dia es lafecha[0] o sea 16 el mes es lafecha[1] o sea 10 el año es lafecha[2] o sea 2009
Si cambiamos el formato de la fecha (o nos fuerzan a hacerlo), deberemos cambiar el script para adaptarlo:
Si usamos 16/10/2009 (dia/mes/año) el separador que debemos buscar es la barra inclinada y el orden de los datos será: el dia es lafecha[0], el mes es lafecha[1] y el año es lafecha[2]
Si usamos 10/16/2009 (mes/dia/año) el separador que debemos buscar es la barra inclinada y el orden de los datos será: el mes es lafecha[0], el dia es lafecha[1] y el año es lafecha[2]
Si usamos 10.16.2009 (mes/dia/año) el separador que debemos buscar es un punto y el orden de los datos será: el mes es lafecha[0], el dia es lafecha[1] y el año es lafecha[2]
Si usamos 2009/10/16 (año/mes/dia) el separador que debemos buscar es la barra inclinada y el orden de los datos será: el año es lafecha[0], el mes es lafecha[1] y el día es lafecha[2]
Si usamos 2009-10-16 (año/mes/dia) el separador que debemos buscar es un guión y el orden de los datos será: el año es lafecha[0], el mes es lafecha[1] y el dia es lafecha[2]
En todos estos casos, el mes ya no se muestra como texto sino como un número así que deberemos agregar algo más para convertirlo:
El mes entonces será mes[lafecha[0]] o lafecha[X] dependiendo de cual sea el dato que la contenga
Si usamos el formato 16 octubre 2009 (dia/mes/año) el separador que debemos buscar es la barra inclinada y el orden de los datos será: el dia es lafecha[0], el mes es lafecha[1] y el año es lafecha[2]
Y deberemos "cortar" el texto del mes si sólo queremos usar tres caracteres para mostrarlo: lafecha[1].substring(0,3));
Demasiadas variantes, ¿verdad? Me limito entonces a un modelo concreto, modificando el script de esta entrada. Selecciono entonces un nuevo formato de fecha en la Configuración de Blogger: elijo 16/10/2009 (dia/mes/año) y espero que dure y no la eliminen:
<script type='text/javascript'> //<![CDATA[ var ultimaFecha; var mes=new Array(); mes[1]="ene"; mes[2]="feb"; mes[3]="mar"; mes[4]="abr"; mes[5]="may"; mes[6]="jun"; mes[7]="jul"; mes[8]="ago"; mes[9]="sep"; mes[10]="oct"; mes[11]="nov"; mes[12]="dic"; function calendario(cual) { if (cual == "") { cual = ultimaFecha; } var lafecha = cual.split('/'); verCero=lafecha[0].substr(0,1); if (verCero == "0") { lafecha[0]=lafecha[0].substr(1) } fday = "<div class='caledia'>"+lafecha[0]+"</div>"; fmonth = "<div class='calemes'>"+mes[parseFloat(lafecha[1])]+"</div>"; fyear = "<div class='caleanio'>"+lafecha[2]+"</div>"; document.write(fday+fmonth+fyear); ultimaFecha = cual; } //]]> </script>
Un detalle extra. El problema, también se evita eliminando <data:post.dateHeader/> y cambiando el dato a leer por <data:post.timestamp/> tal como se muestra en esta entrada.
Mientras miraba un video sugerido por Blogtecnia en Twitter, al marcarlo como favorito apareció algo que, por lo menos para mi, es nuevo, la posibilidad de usar YouTube Uso Compartido.
Esta función permite convertir en públicas algunas de las actividades que realizamos en YouTube y estas las podemos seleccionar de una lista que incluye puntuar, comentar o marcar un video como favorito, suscribirse a un canal, etc. Además, es posible enviar esa información de manera automática a algunos servicios como Facebook, Twitter y Google Reader vinculando esas cuentas.
Activando esta posibilidad se agregará una barra de herramientas en la parte inferior desde donde podemos acceder a las opciones en cualquier momento o incluso desactivarlas.
Accedemos a esto ingresando a la configuración de nuestra cuenta y desplegando la pestaña Uso Compartido.
Hay muchísimas formas de mostrar los post de manera resumida; no sólo hay variantes usando scripts sino que también podemos definir en qué páginas se mostrarán resumidos.
Para responder a varias inquietudes, aquí comienza la explicación del método que utilizo aunque, en realidad, el primer paso es modificar el encabezado de las entradas para manipular la fecha de manera segura y no tener que estar lidiando con ella.
El LOOP de Blogger es la parte del código de la plantilla donde se muestran las entradas y se encuentra dentro de un INCLUDABLE [Ver/Ocultar Código Original [+]
Es my largo porque está lleno de cosas que por lo general no usamos así que lo simplificamos un poco para quedarnos sólo con lo fundamental y tratar de entenderlo:
Eso que vemos como b:loop es un bucle. Blogger recorre la lista de entradas (tantas como hayamos establecido en la Configuración) y ejecuta otra parte, otro INCLUDABLE; por último si es una página individual, le agrega los comentarios. La forma en que se mostrarán los post es lo que se encuentra en ese otro INCLUDABLE así que lo primero que vamos a hacer es interceptar esa parte, es decir, en lugar de mostrar las entradas, vamos a agregar alguna condición para que sólo se ejecute en determinados casos y en otros, se ejecute otro código personal. Esto, no es otra cosa que una variante del hack que muestra tanto en el blog de Gem@ como en El escaparate de Rosa y que es el llamado PeekABooPost.
¿Qué condición pondremos? Eso puede variar, y en este ejemplo haremos lo mismo que hace PeekABooPost: el home se mostrará normal pero las páginas con listas de entradas (etiquetas, navegación, archivos) se mostrarán resumidas:
Y justo debajo de </b:includable> agregamos nuesto nuevo INCLUDABLE:
<b:includable id='ResumenPost' var='post'>
<!-- aqui luego pondremos el nuevo código -->
</b:includable>
Si ahora viéramos el blog, tanto el home como las entradas individuales no tendrían cambios pero ninguna página con listas de entradas mostraría algo así que sería hora de agregar nuestro código personal:
Tratemos de entender todo eso que parece tan engorroso porque es la mejor manera de poder personalizarlo y armar cualquier otro modelo.
En la columna de la izquierda de la tabla colocaremos el titulo de la entrada y su resumen al que lo mostramos como un párrafo.
En la parte superior de la columna derecha irá la fecha que se mostrará usando un script que la descomponga (el mismo que usamos para las entradas normales) y debajo, un enlace que ejecutará otra función de JavaScript para expandir y contraer el post oculto.
Fuera de la tabla se ubica el post normal pero oculto y por último la llamada al script que resumirá la entrada.
La mayor parte de las etiquetas tienen un atributo class que nos permitirá personalizar cada sector y a varias de ellas les colocamos un ID único para poderlas identificar y decirle al script dónde debe escribir o qué elementos debe modificar.
Pongamos entonces el script antes de </head>:
<script type='text/javascript'>
//<![CDATA[
// RESUMEN POSTS
function resumenPost(idPOST) {
var divAuxiliar = "dummy-" + idPOST;
contenido = document.getElementById(divAuxiliar).innerHTML;
resumen = contenido.replace(/<[^>]+>/g,'');
longitud = 150; // máxima cantidad de caracteres a tener en cuenta para resumir la entrada
var auxiliar = resumen.split(" ");
var nueva ="";
for(var i=0; i<auxiliar.length; ++i) {
nueva = nueva.concat(auxiliar[i]) + " ";
if(nueva.length > longitud) {break}
}
resumen = nueva +"...";
var spanResumen = "resumen-" + idPOST;
document.getElementById(spanResumen).innerHTML = resumen;
}
// PERMUTAR ESTADO
function toggleResumenPost(cual) {
var elpost = "dummy-" + cual;
var elElemento=document.getElementById(elpost);
if(elElemento.style.display == 'block') {
elElemento.style.display = 'none';
} else {
elElemento.style.display = 'block';
}
}
//]]>
</script>
Lo que faltaría es el CSS así que lo agregamos antes de </b:skin> y ahí deberemos usar nuestra imaginación:
.post-resumen { /* tabla post resumidos */
border-bottom: 1px solid #444;
height: 100px;
margin: 30px 0 0;
padding: 0 0 0 10px;
width: 410px;
}
.post-resumen:hover {background-color: #000;}
.post-resumen td {position: relative;}
.post-resumen td.celdaderecha { /* la celdas con la fecha */
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
background-color: #333;
text-align: center;
vertical-align: top;
width: 60px;
}
.post-resumen td.celdaspan { /* la celda con el enlace */
background-color: #333;
text-align:center;
vertical-align:top;
width: 60px;
}
.post-resumen h3 { /* el título de las entradas */
color: skyBlue;
font-family: Lucida Grande,sans-serif;
font-size: 20px;
font-weight: normal;
margin: 0;
}
.post-resumen h3 a {
color: skyBlue;
font-family: Lucida Grande,sans-serif;
font-size: 20px;
font-weight: normal;
text-decoration: none;
}
/* la fecha de las entradas */
.post-resumen span.lafecha-resumen {text-align: center;}
.post-resumen span.lafecha-resumen .lafechaDia {font-size: 24px;}
.post-resumen span.lafecha-resumen .lafechaMes {font-size: 14px;}
.post-resumen span.lafecha-resumen .lafechaAnio {font-size: 12px;}
/* el post resumidoen si mismo */
.txt-resumen {color: #CCC; margin: 5px;}
/* el enlace para expandir yy contraer */
a.toggleresumenpost {
color: #87CEEB;
font-size: 12px;
text-align: center;
}
a.toggleresumenpost:hover {color: #FFF}
/* el post normal oculto */
.post-oculto {
border-bottom: 1px dotted #333;
display: none;
margin:30px 0;
padding-bottom:15px;
}
Es probable que quien haya leido el reciente artículo de SpamLoco donde nos cuentan de las nuevas funciones agregadas a la Herramientas para Desarolladores de Google, sólo lo haya visto como una información interesante pero que poco tenía que ver con nuestros blogs.
Sin embargo, si usamos Blogger, yo diría que mejor la tengamos guardada en los marcadores porque nos toca de cerca.
Es usual que en el inicio de un blog (y también después) experimentemos con gadgets, scripts y todo tipo de servicio ofrecido por terceros. Es una práctica normal; un proceso inevitable pero a la vez, es una forma de arriesgarse ya que ese código que agregamos es incontrolable y muchas veces dejamos la puerta abierta para cualquier cosa.
También es probable que hayamos visto que al agregar cierto gadget aparece publicidad indeseada, pop-ups que no sabíamos que existían y suelen ser nuestros visitantes los que nos advierten. Esto es molesto pero aún peor es si el gadget inyecta cualquier tipo de código o enlace que Google considera malicioso. En ese caso, los sancionados seremos nosotros ya que somos responsables de todo aquello que mostramos.
No crean que esto no ocurre y no crean que esto es un detalle menor; las consecuencias son graves y complicadas de resolver:
"Ahora bien, no es extraño que los sitios legítimos sean atacados para inyectar códigos maliciosos, si esto se logra y el webmaster no detecta a tiempo la filtración, seguramente Google marque al sitio como sospechoso, pasando a formar parte de su lista negra.
Hace un tiempo comenté ¿qué hacer si Google marca nuestro sitio como peligroso?, cuando esto sucede lo que se debe hacer es limpiar el código y enviarle una solicitud a Google para que realice un nuevo escaneo y así elimine el sitio de su lista negra."
Las nuevas funciones agregadas nos permiten anticiparnos a esta situación por lo que hay que tenerlas muy en cuenta.
Las encontramos en el Panel de nuestro sitio bajo el título de Labs y si hacemos click en Detalles de malware nos mostrará el resultado del análisis que hace Google y, eventualmente, la lista de páginas afectadas y los detalles del código malicioso o sospechoso.
Las API de Páginas de diagnóstico de Google siguen funcionando y son una forma manual de verificar lo mismo; se accede a ellas colocando la siguiente URL en el navegador:
Allí se mostrará un breve análisis y de cómo fue evaluado el sitio en los últimos 90 días, e incluye un dato curioso, muestra un enlace al hosting donde está alojado lo que nos lleva al análisis de este que, en este caso, sería blogspot:
"... de los 145933 sitios verificados en los últimos 90 días, 172 contenían software malicioso que fue descargado e instalado sin consentimiento del usuario ..."
Moraleja: En casa de herrero, cuchillo de palo dice el refrán ...
La característica principal de un blog es que eso que publicamos se ordena de manera cronológica, desde lo más nuevo hasta lo más viejo, por lo tanto, el dato que indica la fecha suele ser un dato importante.
Uno podría imaginar que las entradas son una serie de rectángulos apilados, cada uno de ellos conteniendo datos (fecha, titulo, etc) y eso sería lógico pero, la forma en que Blogger maneja las fechas de las entradas es extraña; por algún motivo, esa fecha está afuera, en un rectángulo separado y accedemos a ella con un dato tan particular que sólo se muestra una vez, es decir, si hay dos entradas en la misma fecha, sólo se muestra una de ellas:
El formato de esa fecha es la que podemos establecer en Configuración | Formato:
Formato de cabecera de fecha
En un blog "normal con algún truco, podemos hacer que se muestre en todas las entradas, algo imprescindible si usamos alguna característica gráfica como los calendarios pero que esté separada no sólo molesta en este sentido, también complica las cosas cuando usamos alguna clase de plantilla donde se muestran las entradas de manera resumida ya que debemos ocultar esa fecha.
En realidad, no es necesario seguir las reglas de Blogger y es más sencillo eliminar ese dato tal como está ya que de todos modos, la fecha es accesible igual sólo que el dato a leer es otro.
En una plantilla mínima, la fecha se muestra de este modo:
<data:post.dateHeader/> es el dato que contiene la fecha y es el que molesta así que fuera con él; eliminamos todo eso de un plumazo.
Hay un segundo dato que nos da la fecha y que se encuentra dentro del post en si mismo y es todo lo que que necesitamos. Se llama <data:post.timestamp/>
Por lo general la vemos en el footer de los posts y lo usamos para mostrar la hora de la publicación ya que así está establecido por defecto pero, en la misma Configuración | Formato, podemos seleccionar la forma en que se mostrará. Por ejemplo, la definimos como fecha:
Formato de hora
De ese modo, la hora no será la hora sino la fecha en formato mes/dia/año y la vamos a usar para crear un DIV nuevo que contenga el encabezado completo de cada entrada, la fecha, el título, el autor y cualquier otra cosa que se me ocurra.
Por defecto, el título de las entradas se encuentra en <b:includable id="post" var="post" > y tiene este código:
Eso, hará que ahora, las entradas sean rectángulos individuales y por lo tanto, serán mucho más sencillas de manipular cuando intentemos resumirlas:
La primera parte contiene un script optativo que se usará para descomponer la fecha y mostrarla de manera diferente; su código debería agregarse antes de </head> y es el siguiente:
<script type='text/javascript'>
//<![CDATA[
// LAS FECHAS DE LOS POSTS
var mes=new Array();
mes[1]="ene"; mes[2]="feb"; mes[3]="mar"; mes[4]="abr"; mes[5]="may"; mes[6]="jun";
mes[7]="jul"; mes[8]="ago"; mes[9]="sep"; mes[10]="oct"; mes[11]="nov"; mes[12]="dic";
function calendario(cual) {
var verCero;
var lafecha = cual.split('/');
verCero=lafecha[1].substr(0,1); if (verCero == "0") { lafecha[1]=lafecha[1].substr(1) }
fday = "<span class='lafechaDia'>"+lafecha[1]+"</span>";
fmonth = "<span class='lafechaMes'>"+mes[lafecha[0]]+"</span>";
fyear = "<span class='lafechaAnio'>"+lafecha[2]+"</span>";
document.write(fday+fmonth+fyear);
}
//]]>
</script>
Nos faltaría agregar el CSS.
Aquí lo más importante es agregarle la propiedad position:relative al DIV con el encabezado. Esto será la clave para poder ubicar cada parte de su contenido de manera absoluta, sin márgenes extraños, flotaciones que perturben ni propiedades complejas; de tal forma que pueda verse correctamente en cualquier navegador. Agregamos entonces las definiciones entre <b:skin> y </b:skin>.
No hay demasiadas restricciones al respecto:
/* titulo de los posts */
.post .elEncabezado {
/* lo importante es definir ancho, alto y posición */
background-color: #000;
height: 70px;
margin: 20px 0;
position: relative;
width: 100%;
}
.post h3.post-title {
border-bottom: 1px solid #444;
border-top: 1px solid #444;
font-family: Lucida Grande,sans-serif;
font-size: 28px;
font-weight: normal;
line-height: 1.4em;
margin: 0;
width: 410px;
/* con esta propiedades posicionamos el título */
padding: 10px 0 20px 60px;
position: absolute;
left: 0;
top: 0;
}
.post h3.post-title a, .post h3 a:visited {
/* estas propiedades deben colocarse porque el título es un enlace */
color: skyBlue;
display: block;
font-family: Lucida Grande,sans-serif;
font-size: 28px;
font-weight: normal;
text-decoration: none;
}
/* el autor de los posts */
.post .elAutor {
color: skyBlue;
/* con esta propiedades posicionamos al autor */
position: absolute;
right: 5px;
top: 45px;
}
/* la fecha de los posts */
.lafecha {
display: block;
font-family: Verdana,Arial;
font-weight: normal;
height: auto;
line-height: normal;
text-align: center;
width:40px;
/* con esta propiedades posicionamos la fecha */
position: absolute;
left: 5px;
top: 4px;
}
.lafechaDia {
color: #6495ED;
display: block;
font-family: Georgia;
font-size: 36px;
}
.lafechaMes {
color: #94D5FD;
display: block;
font-size: 14px;
margin-top: -10px;
}
.lafechaAnio {
color: #DDDDEE;
display: block;
font-size: 14px;
margin-top: -6px;
}
En resumen, dentro de un rectángulo llamado elEncabezado, colocamos cada parte a mostrar y usamos la propiedad position:absolute para ubicarlo en un lugar preciso y eso lo hacemos con las propiedades top, bottom, left y right.
Ahora que lo tenemos todo el post en un solo bloque, ya podemos empezar a ver la forma de mostrarlo resumido.
El cubo 3D generado sólo con CSS es un experimento de fofronline que aprovecha las propiedades -moz-transform de Firefox 3.5 y -webkit-transform de Safari así que sólo es visible en esos navegadores.
Me adelanto .. no, no creo que tenga demasiada aplicación practica.
Esta es la cara superior del cubo ... y sólo contiene un texto de prueba ... el viejo Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Esta es la cara izquierda
Con textos formateados con diferentes etiquetas y estilos.
Sed diam nonummy nibh euismod tincidunt
Esta es la cara derecha y aqui puse un texto y una imagen
Este es el esquema del código HTML:
<div class="cube">
<div class="topFace">
<div> ... el contenido de la cara superior ... </div>
</div>
<div class="leftFace"> ... el contenido de la cara izquierda ... </div>
<div class="rightFace"> ... el contenido de la cara derecha ... </div>
</div>
csstxt.com es un sitio donde ingresamos un texto y seleccionando una serie de opciones de formato, nos devuelven un código HTML que podemos usar en nuestra página web.
Contempla todas las propiedades que afectan los textos, tanto las elementales como font, text-align, text-decoration y text-weight, así como las menos usadas tales como letter-spacing, word-spacing y line-height. También podemos establecer colores, fondos, márgenes, etc.
En cualquier momento, Generate nos muestra una previsualización y el código resultante:
<p style="font-weight:normal;font-family:palatino linotype, palatino, serif;text-decoration:none;text-align:center;color:#DDEEFF;background-color:#556677;letter-spacing:-1pt;word-spacing:1pt;font-size:20px;line-height:1;border:dotted 2px #99AABB;padding:10px;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
Basta copiarlo y pegarlo tal cual o bien usar las definiciones de estilo que nos dan para aplicarlo a otros textos:
El mensaje aparece cada vez que pretendo ingresar a la pestaña donde se moderan los comentarios, es decir, donde se muestran antes de ser publicados ... y ya llevamos con eso más de 24 horas. El resultado práctico es que no pueden ser publicados y allí estan, durmiendo la siesta.
Pero no debería quejarme ya que la misma página de error me dice: vaya y lea sobre este problema en esta pagina que oh Dios, tiene fecha 22 de septiembre lo que significa que hace muuuuuuuuuuuuucho que el problema persiste y que ahora me tocara a mi es sólo una consecuencia de esta ruleta rusa llamada Blogger.
También me dicen que no es necesario reportar el problema aunque luego me dicen que lo reporte, describiendo ¿qué estaba haciendo? ¿qué navegador usaba? y sólo puedo responder: hice click y pasa con todos ... si nada lo satisface, busque bX-lhziiw en los Grupos de Ayuda de Blogger donde la única respuesta que hay es enviarnos al reporte del 22 de septiembre para competar el círculo y dejarnos en babia.
En algunos otros foros se reporta lo mismo y las respuestas siguen siendo las mismas: ninguna.
Lo único que pude hacer al respecto es cambiar la Configuración y habilitar el envío por correo de los comentarios en moderación y, al parecer, desde allí, es posible publicarlos aunque es bastante más engorroso.
Nacido en el tercer mundo. Un santo varón. Buenos Aires. Los elefantes. Las golondrinas de Plaza de Mayo. Me chupo el dedo.
El tiempo es veloz. ¿No ves que ya no somos chiquitos? Despedida de la infancia. Todo es efímero. Juguetes perdidos. Dime quién me lo robó. Aprendizaje.
Soy un hippie. Rutas argentinas. Sobredosis de TV. Raros peinados nuevos. Más de cien mentiras. Delirium tremens.
Ciudad de pobres corazones. El karma de vivir al sur. Mundo de quimeras. Oh Dios, ¿Qué puedo hacer?
Cuando era más joven. Los mayores del mundo. Botas locas. Rejas electrificadas. Cerca de la revolución. Contra todos los males de este mundo. La casa desaparecida. Tumbas de la gloria. Vencedores vencidos. Carguen, apunten, fuego. Estás frito angelito. A lo mejor aún te acuerdas.
Ah, te vi entre las luces. Muchacha. Amor se llama el juego. Juego de seducción. Mi genio amor. Prométeme que nunca me dirás adiós. Pequeñas delicias de la vida conyugal. Toda la vida tiene música hoy. Es hora de levantare, querido (dormiste bien?).
Resumiendo.
Mi sueño de hoy. La sed verdadera. La búsqueda de la estrella. Todos juntos. ¡Ah! Basta de pensar.
Click en el ícono y accedemos de manera tradicional, con nuestra ID y contraseña. a partir de ese momento, estaremos conectados y sincronizados con el servicio hasta que apaguemos la PC o cerremos la sesión con el botón Logout que se adosa a la barra de herramientas del explorador.
Es cierto que 
Activando esta posibilidad se agregará una barra de herramientas en la parte inferior desde donde podemos acceder a las opciones en cualquier momento o incluso desactivarlas.
"
