| Bubble Text Social Icons | |
 | Incluye 29 íconos de 256x256 en formato PNG creados por Frogx3.descargar |
 | |
| Mini Social Icon Set | |
 | Incluye 30 íconos de 16×16 en formato PNG.descargar |
 | |
| Cheers | |
 | Incluye 12 íconos de 128×128 en formato PNG creados por Helen Gkizi.descargar |
 | |
Windows Live SkyDrive Explorer |
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.
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.
REFERENCIAS:ghacks.net
Cambiar una palabra por un logo o una imagen |
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 ...
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 ...<a href="mi_URL" target="_blank"><img src="mi_LOGO" /></a>
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í:
<script type='text/javascript'>
//<![CDATA[
function reemplazaLogos(cual) {
if(!document.getElementById) { return; }
var verificar = "post-" + cual;
bodyText = document.getElementById(verificar);
elTexto = bodyText.innerHTML;
elTexto = elTexto.replace(/PALABRA/g,'CODIGO_HTML');
bodyText.innerHTML = elTexto;
}
//]]>
</script>¿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:
¿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:
<script type='text/javascript'>
//<![CDATA[
function reemplazaLogos(cual) {
if(!document.getElementById) { return; }
var verificar = "post-" + cual;
bodyText = document.getElementById(verificar);
elTexto = bodyText.innerHTML;
elTexto = elTexto.replace(/MILOGO/g,'<a href="http://misitio.blogspot.com" target="_blank"><img src="URL_imagen" style="vertical-align:text-bottom;" /></a>');
bodyText.innerHTML = elTexto;
}
//]]>
</script>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í:
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>Y reemplazaremos lo indicado por esto:
<div class='post-body' expr:id='"post-" + data:post.id'> <data:post.body/> <div style='clear: both;'/> <!-- clear for photos floats --> </div> <script type='text/javascript'>reemplazaLogos('<data:post.id/>');</script>
¿Podría usarse más de una palabra? Sí, bastaría agregar líneas como esta, una debajo de la otra:
elTexto = elTexto.replace(/OTRAPALABRA/g,'CODIGO_HTML');
En este ejemplo online se lo puede ver en funcionamiento.
VideoSurf: Ampliando la búsqueda de videos |
VideoSurf es una extensión para Firefox que amplia los resultados de la búsqueda de videos mostrándolos de manera más que interesante.Una vez instalada, podremos habilitarla o deshabilitarla para diferentes sitios: Google, Yahoo, Twitter y YouTube
VideoSurf es un buscador de videos muy potente que además, dispone de un API para desarrolladores y un widget que podemos insertar en cualquier página web.
REFERENCIAS:Lifehacker
Deseos de volar |
META Page-Enter y Page-Exit (sólo en IE) |
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:
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:
<meta http-equiv='Page-Enter' content='revealTrans(Duration=VALOR,Transition=VALOR)' / >
<meta http-equiv='Page-Exit' content='revealTrans(Duration=VALOR,Transition=VALOR)' / >
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:
<meta http-equiv='Page-Enter' content='blendTrans(Duration=VALOR)' / >El resultado de los efectos puede verse en este demo pero sólo en Internet Explorer:
|
Incrustar múltiples videos de YouTube |
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.
Otra posibilidad y una buena idea es la que muestran en Nine-One-One... Need Code, Help! que utiliza la librería SWFobject y el API del mismo YouTube.
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:
Otra posibilidad y una buena idea es la que muestran en Nine-One-One... Need Code, Help! que utiliza la librería SWFobject y el API del mismo YouTube.
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:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
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:
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:
<div class="videominiaturas">
<a href="javascript:cargarVideo('ID_VIDEO_1');"><img src="http://img.youtube.com/vi/ID_VIDEO_1/1.jpg" /></a>
<a href="javascript:cargarVideo('ID_VIDEO_2');"><img src="http://img.youtube.com/vi/ID_VIDEO_2/1.jpg" /></a>
.......
<a href="javascript:cargarVideo('ID_VIDEO_N');"><img src="http://img.youtube.com/vi/ID_VIDEO_N/1.jpg" /></a>
</div>
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:
http://www.youtube.com/watch?v=uKkbn-pdCMAnuestro enlace sería así:
<a href="javascript:cargarVideo('uKkbn-pdCMA');"><img src="http://img.youtube.com/vi/uKkbn-pdCMA/1.jpg" /></a>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.
You need Flash player 8+ and JavaScript enabled to view this video.
Kerixep |
Packs íconos de noobr.net |
| NovoDangos | |
 | Incluye 9 íconos en formato PNG.descargar |
 | |
| Blacy | |
 | Incluye 50 íconos en formato PNGdescargar |
 | |
| Yolks | |
 | Incluye 40 íconos de 50×50 en formato PNG.descargar |
 | |
REFERENCIAS:noobr.net/
Brevísima crónica del colapso de Blogger |
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:
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:
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
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 ...
I'm down ... oh yes I'm down, down, down, down, down, down, down, down, down, down ...
Crear una encuesta con Google Docs |
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 formualrios 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.
Es cierto que Blogger dispone de un gadget para encuestas pero, es bastante limitado. Por el contrario, los formualrios 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:
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:
<iframe src="http://spreadsheets.google.com/embeddedform?key=xxxxxxxxxxxxxxxxxxxxxxx" width="760" height="583" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>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 class="lightwindow" params="lightwindow_width=670,lightwindow_height=560" href="http://spreadsheets.google.com/embeddedform?key=xxxxxxxxxxxxxxxxxxxxxxx">ENLACE</a>Este es un ejemplo concreto .. aunque un poco tonto, claro 
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.
Como esos resultados también son una página web, también podemos mostrarlos: VER RESULTADOS DE LA ENCUESTA
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).
File not found |
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.
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.
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.
Guard |
¿Estará funcionando el blog? |
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:
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:
- Validar el HTML via w3.org
- Validar los feeds via feedvalidator.org
- Verificar los headers HTTP via redbot.org
REFERENCIAS:ghacks.net
Resumen Posts 3: Las miniaturas |
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:
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:
<b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType != "item"'> <b:include data='post' name='ResumenPost'/> <b:else/> <b:include data='post' name='post'/> </b:if> <b:else/> <b:include data='post' name='post'/> </b:if>
por esta otra:
<b:if cond='data:post.isFirstPost'> <b:include data='post' name='post'/> <b:else/> <b:include data='post' name='ResumenPost'/> </b:if>
Vamos entonces a la imagen. Primero, agregamos una celda más en la tabla que teníamos:
<b:includable id='ResumenPost' var='post'>
<table cellpadding='0' cellspacing='0' class='post-resumen'><tbody><tr>
<td class='celdaimg' rowspan='2'><div class='miniresumenpost' expr:id='"thumb-" + data:post.id'/></td>
.......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:
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 = "http://img340.imageshack.us/img340/8063/imagennodisponible.png"; // 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;
}Y allí se acaba el juego. El resultado puede verse online en este blog de pruebas y la plantilla se encuentra en este ZIP 
30 herramientas de Adobe Air para desarrolladores |
Herramientas de Adobe Air para desarrolladores publicadas en varias entradas de webresourcesdepot.com ... desarrolladores o simples curiosos como nosotros
- colrful buscar imágenes en función de un color
- Icon Generator permite crear íconos
- Shrink O’Maticredimensionar mútiples imágenes de una vez.
- Color Browser generar paletas de colores
- Color Picker buscar y generar paletas de colores
- ImageSizer redimensionar y recortar imágenes
- JustResizeIt! redimensionar múltiples imágenes
- Xe-IMG Editor simple editor de imágenes
- Contrast-A colores experimentales en 3D
- Dot3D Transforma una imagen de 16x16 en una imagen 3D
- Random Pattern generador de patterns
- Pixus regla para medir pixeles
- PixelPerfect otra regla para medir pixeles
- Caliper Project y otra regla para medir pixeles
- WebKut captura de pantalla con selección
- Web Snapshot otra herramienta para capturar pantallas
- PrintScreenshot y otro capturarador de pantallas
- Font Picker previsualizar textos con diferentes fuentes
- Polaris interfaz para Google Analytics
- SEO Analizer analisis general de un sitio web
- Big Browser permite ver múltiples páginas webs en una sola ventana
- Multi-Panel Browser otro visor de páginas webs
- SWF To Animated GIF covierte archivos SWF en GIFs animados
- RichFLV – FLV Editor mini-editor de archivos FLV y MP3
- Em based layouts convierte medidas em y px para utilizar en las propeidades CSS
- The SQLite Sorcerer gerenciador de bases de dato SQL
- Lita – SQLite Administration Tool otro gerenciador de bases de dato SQL
- ParseForGo mini-editor de PHP que incluye un diccionario de funciones
- jsBeautifier formatea códigos de JavaScript
- RegExr Desktop para aprender y editar expresiones regulares
DivX en StageVU |
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
Este es un ejemplo: Pink Floyd - The Wall, la película llevada al cine por Alan Parker en 1982 y protagonizada por Bob Geldof.
Click en la imagen para comenzar.
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
Este es un ejemplo: Pink Floyd - The Wall, la película llevada al cine por Alan Parker en 1982 y protagonizada por Bob Geldof.
Click en la imagen para comenzar.
Pink Floyd - The Wall.avi 608 x 256 : 95 minutos : 516MB : idioma inglés 
REFERENCIAS:arginati
Tratando de solucionar los problemas de las fechas |
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:
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:
var lafecha = cual.split('-');
fday = "<div class='caledia'>"+lafecha[0]+"</div>";
fmonth = "<div class='calemes'>"+lafecha[1]+"</div>";
fyear = "<div class='caleanio'>"+lafecha[2]+"</div>";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:
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:
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";
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:
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.
Unfollow |
YouTube Uso compartido |
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.
Y casi me olvido del video ...
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.
Y casi me olvido del video ...
Resumen Posts 2: Extractos del texto |
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 [+]
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 [+]
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<div class='inline-ad'>
<data:adCode/>
</div>
<data:adStart/>
</b:if>
<b:if cond='data:post.trackLatency'>
<data:post.latencyJs/>
</b:if>
</b:loop>
<data:adEnd/>
</div>
<!-- navigation -->
<b:include name='nextprev'/>
<!-- feed links -->
<b:include name='feedLinks'/>
<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load("annotations", "1", {"locale": "<data:top.languageCode/>"});
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>
</b:includable>
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:
<b:includable id='main' var='top'>
<div class='blog-posts'>
<b:include data='top' name='status-message'/>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
</b:loop>
</div>
<b:include name='nextprev'/>
<b:include name='feedLinks'/>
</b:includable>
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:
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:
<b:includable id='main' var='top'>
<div class='blog-posts'>
<b:include data='top' name='status-message'/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<b:include data='post' name='ResumenPost'/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
</b:loop>
</div>
<b:include name='nextprev'/>
<b:include name='feedLinks'/>
</b:includable>
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:
<b:includable id='ResumenPost' var='post'>
<table cellpadding='0' cellspacing='0' class='post-resumen'><tbody>
<tr>
<td rowspan='2'>
<h3><a expr:href='data:post.url'><data:post.title/></a></h3>
<p class='txt-resumen' expr:id='"resumen-" + data:post.id'/>
</td>
<td class='celdaderecha'>
<span class='lafecha-resumen' expr:id='"fecha-" + data:post.id'>
<script type='text/javascript'>calendario('<data:post.timestamp/>');</script>
</span>
</td>
</tr>
<tr>
<td class='celdaspan'>
<a class='toggleresumenpost' expr:onclick='"toggleResumenPost(\"" + data:post.id + "\")"' href='javascript:void(0);'>[+/-]</a>
</td>
</tr>
</tbody></table>
<div class='post-oculto' expr:id='"dummy-" + data:post.id'>
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/>
</div>
</div>
<script type='text/javascript'>resumenPost('<data:post.id/>');</script>
</b:includable>
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>:
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, estas propiedades crearán lo que puede verse en este demo online:
.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;
}
Para facilitar las cosas, la plantilla con el demo puede ser descargada en formato ZIP .
.
