Tumblr y Blogger (Parte 2)

Integrar Tumblr a Blogger o a cualquier otro sitio web es bastante sencillo, lo difícil va a ser explicarlo.

Como la característica principal de este servicio es crear entradas de diferente tipo (Text, Photo, Quote, Link, Chat, Audio, Video), las alternativas disponibles son muchas ya que esa diferencia de entradas no es abstracta, cada una de ellas tiene sus propias características y se pueden leer por separado o filtar para no mostrarlas parcial o totalmente.

Supongamos que una entrada es un video ¿Qué mostraríamos en nuestro blog? ¿El video en si mismo? ¿Un enlace? ¿Nada? ¿Mostraremos los textos con formato o sin formato? ¿Qué haremos con los audios? Es imposible generar scripts para todas las variantes así que, este modelo tendrá ciertos limites subjetivos:

• los textos, las citas y los enlaces se mostarán sin formato
• las imágenes, reducidas y sin los textos adicionales
• el audio mostrará un reproductor pero no los textos
• los videos no se mostrarán y serán reemplazados por un enlace
• las entradas de conversaciones (Chat) serán ignoradas
• se cargará una cantidad de entradas y se mostrará una por vez con la posibilidad de navegar entre ellas
  

Se basa en un modelo llamado tumblrBadge que utiliza JSON, y funciona de manera similar a lo que hacemos para leer Twitter.

Para implementarlo, debemos agregar un elemento HTML en la plantilla y allí, colocar el siguiente código:

<div id="contenedorTumblr"> </div>

Nada más; ese, será el DIV contenedor donde lo mostraremos.

El script lo vamos a colocar al final de la página, antes de </body> para que de este modo no interfiera con otros y que comience a cargar los datos cuando nuestra página ya esté visible.

<script type='text/javascript'>
//<![CDATA[

var listaTU=new Array(); 
var maxsTU=0;
var actualTU=0;

function tumblrCallback(obj) {

// --------------- datos a definir usuario ---------------
var usuario = "http://NOMBRE.tumblr.com/"; // la URL de Tumblr (colocar barra final)
var cuantosPosts = 10; // cantidad de posts a leer
// --------------- final datos a definir --------------------


var contarAux=0;
var tumblrs = obj;

for (var i=0; i<cuantosPosts; i++){
elPost= tumblrs.posts[i]; // leer cada uno de los posts

// algunos de los datos, los leeremos como textos planos eliminando los formatos
textoPlano = elPost["regular-body"] || elPost["photo-caption"] || elPost["quote-source"] || elPost["link-text"] || elPost["link-url"] || elPost["video-caption"] || elPost["audio-caption"] || "";

// filtramos los tipos de posts a mostrar
if (/regular|photo|quote|link|video|audio/.test(elPost.type)) {

// y en funcion del tipo de post, leemos el contenido
if (elPost.type === "photo") { // las fotos
photoURL = elPost["photo-url-250"];
contenido = '<div class=\"TumblrPhoto\" ><img src=\"' + photoURL + '\" /></div>'
} else if (elPost.type === "quote") { // las citas
contenido = '<div class=\"TumblrCita\"><span>' + elPost["quote-text"] + '</span>' + textoPlano + '</div>';
} else if (elPost.type === "link") { // los enlaces
contenido = '<div class=\"TumblrLink\"><a href="' + elPost["link-url"] + '">' + textoPlano + '</a></div>';
} else if (elPost.type === "video") { // los videos
contenido= '<div class=\"TumblrVideo\">VIDEO<span>' + textoPlano  + '</span></div>';
} else if (elPost.type === "audio") { // los audios
contenido= '<div class=\"TumblrAudio\">' + elPost["audio-player"] + '</div>';
} else if (elPost.type === "regular") {
contenido = '<div class=\"TumblrRegular\">' + textoPlano + '</div>';
} 

// creamos el codigo de salida
if (contenido) {
// en la parte superior, logo enlaces, feeds y navegacion
salida = '<table class=\"enlacesTumblr\" cellpadding=\"0\" cellspacing=\"0\"><tbody>';
salida += '<tr><td><a target=\"_blank\" href=\"' + usuario +'\"><img src=\"archivo\" /> '; // LOGO TUMBLR
salida += '<a href=\"' + usuario + 'rss\" target=\"_blank\"><img src=\"archivog\" /></a></td>'; // LOGO RSS
salida += '<td style=\"text-align:right;\"><span class=\"navegarTumblr\"><a href=\"javascript:navegaTU();\">siguiente</a></span></td></tr>';
salida += '</tbody></table>';
// luego, el contenido del post a mostrar
salida += contenido;
// por ultimo, el enlace directo a ese post
salida += '<div id=\"verTumblr\"><a target=\"_blank\" href=\"' + elPost.url + '\">ver post</a></div>';
// y lo guardamos en una lista
listaTU[contarAux] = salida;
contenido = "";
salida = "";
contarAux =contarAux +1;
}
}
}
// cuando terminamos de leer, mostramos el ultimo post publicado
maxsTU=contarAux;
document.getElementById('contenedorTumblr').innerHTML = listaTU[0];
}

function navegaTU() {
actualTU=actualTU+1;
if (actualTU==maxsTU) {
actualTU=0;
}
document.getElementById('contenedorTumblr').innerHTML = listaTU[actualTU];
}

//]]>
</script>
<script src='http://NOMBRE.tumblr.com/api/read/json?callback=tumblrCallback&amp;num=10' type='text/javascript'/>

Allí sólo debemos configurar dos datos:

// --------------- datos a definir usuario ---------------
var usuario = "http://NOMBRE.tumblr.com/"; // la URL de Tumblr (colocar barra final)
var cuantosPosts = 10; // cantidad de posts a leer
// --------------- final datos a definir --------------------

lo mismo haremos en el script final que es la llamada a JSON.

Un detalle (uno de tantos) que puede modificarse es cambiar el tamaño de las miniaturas de las entradas de tipo PHOTO:

// pueden ser 75, 100, 250, 400 o 500
photoURL = elPost["photo-url-250"];

Si quisieramos mostrar los videos y no el enlace a estos, deberíamos cambiar esto:

contenido= '<div class=\"TumblrVideo\">VIDEO<span>' + textoPlano  + '</span></div>';

por algo así:

contenido= '<div class="\TumblrVideo\">' + elPost["video-player"] + '</div>';

En el script hay dos imágenes ya alojadas en ImageShack, dos logos que pueden ser cambidos por cualquier otro.

Cada sector creado tiene un ID o una clase CSS para poder personalizar la salida así que podemos agregar el estilo antes de </head>.

<style>
#contenedorTumblr { /* el contenedor en si mismo */
font-size: 11px;
}
table.enlacesTumblr { /* la línea superior con enlaces */
margin: 5px 0;
padding: 0 10px;
width: 100%;
}
.navegarTumblr { /* enlace navegación entre tumblrs */
display: block;
text-align: right;
}
#verTumblr { /* la línea inferior */
margin-top: 5px;
text-align: right;
}
#verTumblr a {
margin: 5px 0;
padding: 0 10px;
text-align: right;
}
div.TumblrPhoto { /* un post de tipo PHOTO */
margin: 0 auto;
text-align: center;
}
div.TumblrCita { /* un post de tipo QUOTE */
margin: 0 auto;
text-align: right;
width: 90%;
}
div.TumblrCita span {
display: block;
font-style: italic;
text-align: center;
}
div.TumblrCita i {
font-style: normal;
font-weight: bold;
}
div.TumblrLink { /* un post de tipo LINK */
text-align: center;
}
div.TumblrVideo { /* un post de tipo VIDEO */
font-weight: bold;
text-align: center;
}
div.TumblrVideo span {
font-weight: normal;
}
div.TumblrAudio { /* un post de tipo AUDIO */
text-align:center;
}
div.TumblrRegular { /* un post de tipo REGULAR */
font-size: 11px;
}

</style>

Sí. Está muy bien eso de la mini cámara espía en la corbata de la que habla SpamLoco pero, a decir verdad, prefiero algo un poco más informal:

Y, en todo caso, si quiero ponerme serio me compraría la corbata solar de la Iowa State University.

REFERENCIAS:crookedbrains.net

Hace mucho que existen los llamados tumblelogs a los que la Wikipedia define como "blogs menos estructurados". Me gustó la descripción: "un tumblelog también tiene algo de esbozo, de apunte, de idea. Son las semillas de futuros post en un blog convencional, una especie de cuaderno de notas breves y personales que no admite comentarios ni intromisiones a pesar de ser público."

Un poco más seriamente, Jason Kottke dice:

Un tumblelog es un flujo de conciencia improvisado, un poco al estilo de las listas de enlaces de los linklog pero con más cosas además de enlaces. Me recuerdan a un antiguo estilo de blogs, en la época en que la gente los hacía a mano, antes de que Movable Type obligara a poner los títulos de los posteos, las entradas de los blogs se convirtieran en pequeños artículos de revistas, y los posteos pertenecieran a una conversación distribuida a través de toda la blogosfera. Robot Wisdom y Bifurcated Rivets son dos weblogs de un estilo más antiguo, que se parecen mucho a estos tumblelogs con mínimos comentarios, muy poca charla entre blogs, el mínimo suspiro de un algo terminado y publicado, casi pura edición ... realmente sólo una forma de publicar rápidamente las "cosas" con las que te encuentras cada día en la web.

El servicio gratuito más conocido (no el único) es Tumblr.com y hace tiempo que lo vengo usando, desde que cambió a su nueva versión muy mejorada

Como todas estas cosas de la web, sólo son una herramienta, tan buena o tan mala, tan útil o tan inútil como cualquier otra. En todo caso, lo bueno de esto es saber que existen y que están a nuestra disposición, aunque sólo sea para divertirse un rato.

La mejor forma de conocer los detalles es leer la wiki en castellano pero, tal vez, mejor que eso es entrar, crear uno y mirar. Es simple, elegimos un nombre y hacemos click en Get Started. Nos pedirán un email, que elijamos una contraseña y la URL que usaremos que, por defecto, será la misma del nombre elegido. Click en el botón inferior y listo.

Voy a cerrar las ventanas que se abren y que me guian para configurar las cosas. Eso lo podemos hacer en cualquier otro momento. Allí estamos, entonces en un escritorio (dashboard) simple donde nos mostrará qué cosas podemos hacer y aquí está justamente, la diferencia entre un tumblelog y un blog. Arriba hay unos íconos con los diferentes modelos de entradas que podemos hacer:

• Text: es la alternativa más amplia, permite colocar un título y un texto desde un editor interno. Admite formatos y códigos HTML. En el ejemplo, incluso he puesto un script.
• Photo: sirve para publicar imágenes (JPG, GIF, PNG o BMP 10MB máximo), las subimos desde nuestra PC o indicamos alguna que ya esté en la web en cuyo caso, también se alojaraá allí así que no se crean problemas de hotlink. La imagen podemos transformarla en un enlace o bien agregarle textos (caption) con el editor.
• Quote: se usa para mostrar "citas", textos que se muestran en un formato diferente previamente establecido.
• Link: los enlaces son eso, direcciones de lugares que nos interesen a los cuales podemos agregar descripciones.
• Chat: no es un chat en si sino una "conversación", un diálogo que, al igual que los anteriores, se es un texto con cierto formato pre-establecido.
• Audio: lo usamos para agregar archivos MP3 (10MB máximo) desde nuestra PC o desde algún sitio en la web con una sola limitación, sólo podemos subir uno por día. El resultado será una entrada con un reproductor ya incorporado.
• Video: el servicio está pensado para usar una cuenta de Vimeo y si queremos subir alguno (50MB máximo), debemos tener una cuenta allí pero también podemos insertar videos de casi cualquier otro servicio, colocando la URL y eventualmente, también podemos colocar el código HTML.

En todos los casos, si desplegamos Advanced Options, veremos algunas alternativas extras

• Publishing Options nos permite definir si el post será publicado de inmediato, si será programado (pondremos una fecha), si lo queremos guardar como borrador o si lo queremos hacer privado.
• Tag nos permite agregar etiquetas a las entradas.
• Set a custom post URL nos permite modificar la URL de la entrada, si no lo hacemos, será un número.

Probablemente, luego de experimentar un poco con estas cosas, decidamos empezar a personalizar nuestro blogcito así que, primero que nada, vamos a lo general: Account | Preferences desde donde podemos modificar nuestros datos, sincronizarlo con Twitter y, sobre todo, definir el modo del editor de textos que puede ser rich text editor (el valor por defecto), plain text/HTML (escribimos HTML de manera directa) o Markdown que parece interesante ya que no cambia los códigos como los otros modos:

La clave de nuestro blog está en la opción Customize, desde allí podremos cambiarlo por completo.

• Info nos da la posibilidad de colocar el título del blog y eventualmente una descripción; agregar una imagen que servirá como avatar e incluso, establecer un dominio propio
• Feeds nos permite importar hasta cinco servicios (via RSS) para agregar sus contenidos de manera automática.
• Advanced sirve para establecer ciertas opciones como la fecha, agregar CSS (dependiendo del tema en uso), establecer la cantidad de entradas por página, habilitar la vista de imágenes en alta resolución, definir si los enlaces se abrirán en una nueva ventana, crear feeds reducidos, permitir la creación de URLs personales, agregar nuestro sitio a diferentes directorios y buscadores, etc.

La parte de diseño se define con dos opciones; con Appearance cambiamos algunos detalles menores como los colores de fondo; con Theme podemos seleccionar la "plantilla" que vamos a utilizar que, puede ser cualquiera de las allí listadas pero también podemos buscar en la web y usar otra. Para esto, debemos hacer click en Use custom HTML y allí, pegar el contenido del tema que queremos utilizar que, por lo general, es el contenido de un archivo TXT.

¿Dónde buscamos temas? El mismo Tumblr tiene una página donde los usuarios pueden agregar los que hayan creado pero en la web hay cientos de ellos y basta hacer una búsqueda en Google para encontrarlos; un buen ejemplo puede verse en speckyboy.com.

Tal como ocurre con cualquier otro servicio, podemos cambiar el tema cuantas veces se nos ocurra e incluso, crearlo nosotros mismos o modificar alguno. Para esto, hay una página explicativa donde se muestra la sintaxis de las distintas instrucciones. Quien haya modificado una plantilla de Blogger, no tendrá demasiados problemas en entender la idea (será tan difícil como acá pero, bueno ...)

Así, sin más, nuestro blog está listo pero la flexibilidad del sistema nos permite múltiples agregados. Algunos emplos y herramientas:

• puede agregarse Adsense aunque hay algunas limitaciones para evitar excesos
• pueden modificarse pequeños detalles para que las URLs generadas sean más accesibles para los buscadores
• por defecto, no hay comentarios pero es posible agregar sistemas externos como Discus e IntenseDebate
• puede agregarse una nube de etiquetas
• puede agregarse un excelente gerenciador de MP3
• en este sitio se pueden realizar backups de nuestro tumbleblog
• este es un plugin para WordPRess y este, permite integrarlo y publicar desde allí
• este es un bookmarklet que permite enviar contenido directamente desde el navegador (agregar a favoritos)

Sencillez, rapidez, son las dos virtudes principales de este tipo de servicio pero, no son las únicas. Me gusta la idea de la integración con otros servicios y que sea abierto hasta el extremo de ser muy flexible, incluye feeds y tiene URLs accesibles a cualquiera sin necesidad de tener una cuenta (léase Facebook). No es una panacea pero funciona muy pero muy bien ¿Se nota que me gusta?

Como poseen un API público, no es nada complicado integrarlo a Blogger así que a eso nos dedicaremos en la próxima entrada

Las unidades que utilizamos para establecer el tamaño de las fuentes de los textos de una página web siempre han despertado polémicas porque hay opiniones para todos los gustos. En resumen, las posibilidades se limitan a dos tipos básicos, absolutas y relativas.

Las absolutas tienen como referencia las impresoras: pt (puntos), pc (picas), in (inches/pulgadas), cm (centímetros) y mm (milímetros).

Las relativas tienen como referencia la resolución de la pantalla: px (pixeles) o bien al tamaño de otras fuentes definidas antes: % (porcentaje). em (em space), ex (x space); más una variante, palabras clave: xx-small | x-small | small | medium | large | x-large | xx-large que son relativas a la fuente definida por el navegador que usamos.

Algo con lo que la mayoría de los desarrolladores está de acuerdo es que el uso de puntos (pt) no es lo más recomendado ya que es una medida que sólo tiene sentido para imprimir, si bien hay una relación de puntos por pulgada eso no es válido en una pantalla y sólo es aplicable al papel.

Descartada entonces esa unidad y todas las absolutas que, en realidad, sólo deberían usarse cuando hablamos de impresoras; en una página web, deberíamos centramos en el uso de las llamadas relativas y entre ellas, sólo hay dos que permiten controlar los tamaños con cierta claridad: px y em ¿cuál usar?

Hay que entender que em es una medida relativa a otra fuente así que 1em, así sólo, no significa demasiado, estamos diciendo que el tamaño de algo es igual al tamaño de otra fuente ¿de cuál? de la que está definida por el el elemento contenedor y si no hay ninguna, la que use el navegador así que, si vamos a manejarnos con ellas, lo lógico es definir alguna con px, aunque sea, la del body:

body {
.......
font-size: 14px;
}

Ahora sí, hecho esto, podemos decir que una etiqueta tendrá una fuente que será igual, menor o mayor que esa:

h2 {font-size: 2em;} /* será del doble del tamaño que la definida en body */
small {font-size: 0.8em;}  /* será un 80% más chica que la definida en body */

Esto del elemento contenedor y las herencias no es tan complicado como parece aunque a veces, se hace difícil de seguir el rastro (igual que en la vida real). Cuando una etiqueta está dentro de otra, la que la contiene es el elemento padre (parent) y la contenida es el elemento hijo (child):

<div id="bloque_1" style="font-size:20px;">
<div id="bloque_2">
<p> ... este texto tendra 20 pixeles de alto ... </p>
</div>
</div>

En ese caso, P es "hijo" del div bloque_2 y es "nieto" del div bloque_1; la herencia, hace que el tamaño del "abuelo" se traslade al "nieto.

Un ejemplo concreto:

<style>
div#ejemplo {font-family:Arial; font-size: 14px;}
div#ejemplo big {font-size: 2em;}
div#ejemplo small {font-size: 0.8em;}
</style>

Este es el texto "normal" que tiene 14 pixeles.
Este es un título más grande
Y este un texto más pequeño

La unidad em es útil cuando hacemos referencia a un elemento "padre". Este método es el aconsejable cuando estamos interesados en mantener cierta compatibilidad con distintas plataformas y navegadores, las fuentes se "escalan" y basta cambiar el tamaño base para cambiar todo el sitio:

div#ejemplo {font-family:Arial; font-size: 18px;}

Este es el texto "normal" que ahora tiene 18 pixeles.
Este es un título más grande
Y este un texto más pequeño

El problema con esta unidad es que ese mismo beneficio es a su vez un contratiempo ya que se pierde cierto control. No veremos las cosas tal como las pensamos, el resultado, variará. Tal vez, un renglón se transforme en dos o un espacio de tamaño fijo sea demasiado grande o demasiado chico para el contenido.

Por el contrario, como px está relacionado con la resolución de la pantalla será más fácil de controlar aunque allí también habrá diferencias porque la misma fuente no se verá igual en distintos sistemas operativos.

Moraleja: no hay soluciones universales y cada uno deberá elegir la que crea más conveniente o le resulte más cómoda.

Por lo general, prefiero usar px y reservar em para casos especiales. Por ejemplo, si quiero crear un bloque de títulos donde establezco un tamaño de fuente en pixeles, es buena idea usar em para definir alturas y separaciones, de tal manera que, si cambiamos la fuente, las proporciones se mantienen.

<style>
.ejemplosTitulos {
background-color: #456;
border: 2px dotted #9AB;
color: #FFF;
font-family: 'Century Gothic','Times New Roman';
font-weight: normal;
height: 2em;
line-height: 2em;
margin: 0 auto;
text-align: center;
width: 400px;
}
</style>

<h5 class="ejemplosTitulos" style="font-size:18px;">El título de algo</h5>
<h5 class="ejemplosTitulos" style="font-size:36px;">El título de algo</h5>

El título de algo

El título de algo

El título de algo

El título de algo

Wallpapers (exteriores)

Click en la imagen para previsualizar un modelo reducido.
Descargar el archivo ZIP que contiene las imágenes

Y un extra que muy generosamente me envia José desde Fotos Nitosblog

Descargar wallpaper (1024x682)

Si algún día se nos ocurre eliminar un blog con una URL de blogspot, esa dirección no se liberará sino que quedará inhabilitada y nadie podrá usarla excepto nosotros mismos ya que queda asociada, para siempre a nuestra cuenta. No importa si el blog no es utilizado jamás o si nadie publica. Blogger dice: una vez creado, es tuyo para toda la eternidad. Aún eliminando la cuenta de Google podemos intentar recuperar los blogs eliminados utilizando este formulario.

Hasta ahí, no hay problemas pero ¿qué pasa si por algún motivo queremos transferirlo? Esto no es ilógico, tal vez quisiéramos deshacernos de esa URL, dársela a otra persona o, si tenemos varias cuentas, en algún momento se nos ocurra unificarlas.

Para liberar la URL, lo que debemos hacer es cambiarla. Vamos a la Configuración | Publicación y colocamos otra:

Dirección Blog*Spot .blogspot.com

Luego, republicamos el blog.

Para transferir un blog a otra cuenta, el proceso es más engorroso:

1. Entramos al blog a transferir y vamos a Configuración | Permisos
2. Agregamos un nuevo autor
3. El nuevo autor recibirá un mail de invitación que deberá aceptar
4. Le damos al nuevo autor permisos de Administración
5. El nuevo administrador debe entrar con su cuenta y en las mismas opciones, eliminar la cuenta original
   

Como sólo podemos acceder a una cuenta de Google a la vez, si es una transferencia a nosotros mismos, podríamos usar dos navegadores distintos para evitar tener que entrar y salir constantemente.

REFERENCIAS:blogging.nitecruzr.net

¿Presumir?

FrogJS es una galería de imágenes que con muy poco, crea un efecto muy vistoso e incluye la opción de soportar textos adicionales y enlaces.

Requiere Prototype + Scriptaculous así que, si no las tenemos en nuestra plantilla, primero, deberemos agregar esas librerías.

Luego, descargamos el ZIP donde, lo único necesario es el archivo frog.js que agregaremos a la plantilla.

<script type="text/javascript" src="URL_frog.txt"></script>

El CSS es muy sencillo. Lo colocamos inmediatamente después:

<style type="text/css">
#FrogJS { /* es el bloque donde se mostrará la galería */
height: 650px; /* el alto total */
margin: 0 auto; /* será centrado */
width: 600px; /* el ancho total */
}
#FrogJSCredit { /* son los textos visibles del atributo TITLE */
/* cualquier propiedad */
}
#FrogJSCaption { /* son los textos visibles del atributo ALT */
/* cualquier propiedad */
}
</style>

Para usarla, sólo debemos colocar una serie de enlaces dentro de un DIV al que le daremos un ID exclusivo llamado FrogJS:

<div id="FrogJS">
<a href="URL_imagen" title="texto optativo" rel="URL_optativa">
<img src="URL_miniatura" alt="texto optativo" />
</a>
.......
</div>

Lo logico es tener dos imágenes, la de tamaño normal y una miniatura pero, también sería posible usar sólo una y redimensionarla en el HTML:

<img src="URL_imagen" alt="texto optativo" width="tamaño" />

En el atributo HREF del enlace, colocamos la imagen "grande"; en el atributo TITLE el texto (optativo) que se verá inmediatamente debajo y en el atributo REL el enlace optativo a alguna página.

En la etiqueta IMG colocamos la miniatura y en su atributo ALT, el texto inferior optativo.

Modificando el script, podemos configurar algunos detalles extras:

// CONFIGURATION VARIABLES
var thumbTop = '60px'; // es la distancia superior de las miniaturas
var loadingAni = 'images/loading.gif'; // es la imagen de carga que se muestra al cargar las imágenes
var scalePercent = '300'; // la escala del efecto fade

Un detalle más. Aconsejan agregar, luego del DIV, un script para ocultar la galería mientras esta se carga. Para evitar tener que hacer eso, agregué ese código en el archivo de esta manera. Vamos al final y ponemos:

function frogHIDEthumbs() {
var ribbit = document.getElementById('FrogJS');
ribbit.innerHTML += '<center>... cargando ...</center>';
// o bien si queremos una imagen en lugar del texto
// ribbit.innerHTML += '<img src="URL_imagen" />';
var anchors = ribbit.getElementsByTagName('a');
for (var i=0; i
anchors[i].style.display = 'none';
}
}

Así que, en el post, luego del DIV escribo:

<script type="text/javascript">frogHIDEthumbs();</script>

Las preguntas sobre cómo hacer que una entrada aparezca siempre al inicio del sitio, es una pregunta repetida. Como Blogger no tiene la posibilidad de crear una página de inicio, es un método bastante sencillo para simularlo; tal vez no sea el ideal pero es fácil y si lo combinamos con algo como como el truco de personalizar los posts quitando títulos y otros detalles; el resultado puede ser más que aceptable.

Antes, era muy sencillo de hacer, bastaba colocar una fecha anticipada y eso era suficiente; como las entradas se ordenan cronológicamente, siempre aparecería esa como primera.

Esto cambió cuando se agregó la posibilidad de programar posts para que se publicaran en cierta fecha. Ahora, si colocamos una fecha anticipada, la entrada aparecerá como pendiente. Entonces, la forma de hacerlo ha variado un poco.

Primero, escribimos el post y lo publicamos. Luego, debemos editarlo y hacemos click en Opciones de entrada para desplegar esa sección y le cambiamos la fecha por otra, lejana, por ejemplo, cambiamos el año:

Y volvemos a publicar el post.

Eso hará que se re-ordene y aparezca siempre al tope del home.

PageGlimpse es un servicio que nos permite generar miniaturas de páginas web y mostrarlas en nuestro sitio, sin necesidad de crearlas previamente, utilizando sólo etiquetas HTML o JavaScript.

Implementar esto es extremadamente sencillo. Primero que nada, debemos crear una cuenta gratuita, enseguida nos enviarán un correo a través del cual nos informarán cuál es nuestra clave (una serie de números y letras).

Para utilizar el servicio, en 925html.com han creado una librería de apenas 4KB que nos permite manejar estas miniaturas pero, en realidad, si miramos la documentación del API de PageGlimpse, nos daremos cuenta que no hace falta todo eso y que todo se reduce a crear una URL o un enlace con los parámetros correctos.

Una función muy interesante que nos ofrecen es que, si la miniatura no existe, ellos la generarán en menos de 24 horas.

¿Cómo creamos esa URL? Lo mínimo que debemos escribir es algo así:

http://images.pageglimpse.com/v1/thumbnails?url=http://XXXXXXXXXX&devkey=XXXXXXXXXX

La base es:

http://images.pageglimpse.com/v1/thumbnails?

a lo que le agregamos algunos parámetros uniendolos con el símbolo &:

• devkey es un texto obligatorio, la clave que previamente nos adjudicaron
• url es un texto obligatorio con la dirección URL de la página que queremos mostrar y siempre, debe comenzar con http:// o https://
• size es un texto opcional que tiene tres valores posibles y que establecen el tamaño de la miniatura a mostrar:
• • small muestra una imagen de 150x108 (es el valor por defecto)
  • medium muestra una imagen de 280x202
  • large muestra una imagen de 430x310
• root es un texto opcional que indica si se mostrará la miniatura de la raiz del dominio y no de una página interior si esa miniatura no está disponible. Por defecto es yes.
• nothumb es u texto con la URL de una imagen alternativa que será mostrada en caso que la miniatura no esté disponible.

Un ejemplo:

http://images.pageglimpse.com/v1/thumbnails?url=http://www.blogger.com/&size=large&devkey=XXXXXXXXXX

Esa URL la podemos aplicar a cualquier etiqueta, por ejemplo IMG:

<img src="http://images.pageglimpse.com/v1/thumbnails?url=http://www.blogger.com/&size=large&devkey=XXXXXXXXXX" />

Con un poco de JavaScript, podríamos simplificar als cosas aún más. Podríamos crear una función que creara esa etiqueta IMG por nosotrso, enviándole algunos datos.

Agreguemos esto antes de </head>:

<script type='text/javascript'>
// <![CDATA[ 
function getMiniaturaPG (cual,como) {
if (cual == null){return}
if (como == null){como = 'small'}
document.write('<img class="miniPG" src="http://images.pageglimpse.com/v1/thumbnails?url=' + cual + '&size=' + como + '&devkey=XXXXXXXXXX" />');
}
// ]]>
</script>

Por supuesto, reemplazando XXXXXXXXXX por nuestra clave personal.

Y lo usaríamos de este modo:

<script>getMiniaturaPG('http://unaDireccion');</script>

En cuyo caso, se mostrará la miniatura de tamaño mínimo, o bien, podemos agregarle el parámetro para mostrar miniaturas más grandes:

<script>getMiniaturaPG('http://unaDireccion','small');</script>
<script>getMiniaturaPG('http://unaDireccion','medium');</script>
<script>getMiniaturaPG('http://unaDireccion','large');</script>

Como en el script, la etiqueta tiene una clase (miniPG), podríamos darle propiedades CSS para mostrarla con cierto diseño: por ejemplo:

.miniPG {
background-color: #000;
border: 2px solid #456;
margin: 5px;
padding: 5px;
}

Algo que siempre causa alguna confusión cuando escribimos CSS es determinar si debemos aplicar esas definiciones como clases o IDs ¿Cuál es la diferencia?

Tanto una como otra sirven para identificar una etiqueta y, de ese modo, nos resulta más sencillo agregarle propiedades. Por ejemplo:

<style>
  #nombreID {color: red;}
  .nombreClase {color: blue;}
</style>

<div id="nombreID"> este texto será rojo </div>
<div class="nombreClase"> este texto será azul </div>

Para definir las propiedades de un ID le anteponemos el símbolo # al nombre y para definir una clase, usamos un punto.

Una regla elemental y que no debe violarse dice que sólo usaremos un ID si esa etiqueta es única, no debería haber dos etiquetas con el mismo ID en la misma página; en cambio, usaremos class si es un estilo que repetiremos en diferentes etiquetas.

Además, suele decirse que el atributo ID se utiliza para definir áreas específicas de una página (el header, el footer, un menú, etc) y una clase se usa para definir estilos de tipo general (enlaces, listas, etc).

Los ID nos permiten organizar el estilo e identificar etiquetas para luego manipularlas con JavaScript. Las clases, nos evitan escribir códigos repetidos y esa es su mayor utilidad.

Hay varias formas de implementarlas:
a.green {color: green;}
hará que los enlaces que contengan esa clase, se muestren de color verde:
<a class="green"> el enlace será de color verde </a>
<p class="green"> este párrafo NO será de color verde </p>

En cambio, esta otra:
.green {color: green;}
hará que cualquier etiqueta que contengan esa clase, se muestren de color verde:
<a class="green"> el enlace será de color verde </a>
<p class="green"> este párrafo también será de color verde </p>

Tanto las clases como los IDs pueden combinarse asi que no es extraño ver cosas como estas:

<div id="unNombre" class="unaClase"> ....... </div>

o bien:

<div class="unaClase otraClase"> ....... </div>

¿Para qué usamos ID y class juntas? Por ejemplo:

<style>
  .ejemploCSS {
    background-color: #000;
    border: 1px solid #CCC;
    float: left;
    height: 50px;
    margin-right: 10px;
    padding: 10px;
    width: 150px;
  }
  #ejemploCSS1 {color: white;}
  #ejemploCSS2 {color: yellow;}
  #ejemploCSS3 {color: red;}
</style>

Tenemos una clase donde hemos definido una serie de propiedades como fondo, bordes y tamaño que aplicaremos a un DIV así que, si colocamos tres, uno al lado del otro, se verán iguales. Ahora bien, le agregaremos un ID a cada uno de ellos para darles una propiedad exclusiva, el color del texto:

<div id="ejemploCSS1" class="ejemploCSS"> ... </div>
<div id="ejemploCSS2" class="ejemploCSS"> ... </div>
<div id="ejemploCSS3" class="ejemploCSS"> ... </div>

Se vería esto:

BLANCO

AMARILLO

ROJO

¿Y qué pasa si hay propiedades contradictorias? Por ejemplo, definimos el color de fondo tanto en la clase como en el ID ¿Cuál se verá? ¿será negro como dice la clase o variará como dicen los IDs?:

<style>
  .ejemploCSS {background-color: #000;}
  #ejemploCSS1 {background-color: white;}
  #ejemploCSS2 {background-color: yellow;}
  #ejemploCSS3 {background-color: red;}
</style>

Como se ve, el fondo será el del ID y el de la clase será ignorado.

BLANCO

AMARILLO

ROJO

Claro, uno puede decir, lo que ocurre es que, primero le decimos que es negro y luego le decimos que es de otro color, lo sobrescribimos, es lógico pero, veamos si lo escribimos al revés:

<style>
  #ejemploCSS1 {background-color: white;}
  #ejemploCSS2 {background-color: yellow;}
  #ejemploCSS3 {background-color: red;}
  .ejemploCSS {background-color: #000;}
</style>

Ahora ponemos el fondo negro al final ¿qué se verá?

BLANCO

AMARILLO

ROJO

Pués, lo mismo ya que, para decirlo de alguna manera, un ID es "más importante" que una clase (más información). Para hacer que una clase "sobrescriba" una propiedad de un ID, le agregamos la palabra !important:

<style>
  .ejemploCSS {background-color: #000 !important;}
  #ejemploCSS1 {background-color: white;}
  #ejemploCSS2 {background-color: yellow;}
  #ejemploCSS3 {background-color: red;}
</style>

BLANCO

AMARILLO

ROJO

Wallpapers (infantiloides)

Click en la imagen para previsualizar un modelo reducido.
Descargar el archivo ZIP que contiene las imágenes

PicFont es un sitio que permite agregarle textos a las imágenes ya sea que estas las tengamos en la PC o que estén alojadas en la web.

Nos da tres formas diferentes de hacerlo: con Picture seleccionamos la imagen y agregamos un texto directamente (con o sin borde), con Canvas definimos un rectángulo de color donde agregaremos los textos; en Shape seleccionamos alguno de los diseños predeterminados. En el editor de textos colocamos este y además, podemos elegir fuentes, tamaños y colores, rotamos los textos, los posicionamos, etc.

PicSlice divide una imagen en partes más pequeñas, lo cual es útil cualdo esta es muy grande. Definimos la cantidad de sectores y el resultado lo podemos descargar en un archivo ZIP. Eventualmente, también nos permite recortar una imagen.

PicShadow genera una sombra y nos da como resultado otra imagen semitransparente que podemos descargar.

PicReflect es similar pero, esta vez, lo que se crea es una imagen reflejada en cierta dirección.

TextAnim genera textos animados con múltiples opciones.

El tema de las tan mentadas mudanzas y los alojamientos inconstantes me provocó varios dolores de cabeza. Es que, dada la forma en que hago las cosas, no se trataba sólo de reubicar archivos y modificar los enlaces. Muchísimas entradas tienen scripts individuales que son los que uso como modelo o ejemplo para tal o cual cosa. No podrían agregarse a la plantilla porque lo único que se conseguiría es un volumen inmanejable de códigos que no son de uso corriente sino eventual, sólo se ejecutan en una entrada en particular. Para estos casos, no hay más remedio que usar archivos externos.

Cambiarlos de un sitio a otro es tedioso pero a esto le sumamos un segundo inconveniente, hay que editar esas entradas individuales y volverlas a publicar ¡Sólo encontrarlas ya es un problema!!!

Comencé a hacerlo y decidí detenerme porque pensé: "Ahora lo hago ¿y la próxima vez?" Ya van tres veces, esta debe ser la última.

Entonces, se me ocurrió que lo mejor era ... usar otro script ... combatir fuego con fuego.

La idea era esta. En lugar de tener que escribir algo como:

<script src="http://.../unScript.js"></script>

Tal vez fuera posible tener alguna clase de lista o índice y una fucnión que escribiera automáticamente el código ese en una entrada, diciéndole algo así como aquí va el script número 24. De esa manera, no habría que modificar jamás el post, bastaría cambiar esa lista.

Al grano. Lo que hice fue agregar un elemento HTML al inicio de la plantilla en esa sección especial que alguna vez comenté:

<b:section class='contenedorScripts' id='contenedorScripts'/>

Y allí coloco la función:

<script type="text/javascript">
function leerScript(cual) {
scriptLISTA=new Array(
// esta es la lista con las direcciones URL de los diferentes scripts en uso
0,"", // no lo uso
1,"http://.../unScript.js",
2,"http://.../otroScript.txt",
.......
49,"http://.../cualquierScript.txt"
);
regNum = cual * 2 +1;
document.write('<script src="' + scriptLISTA[regNum] + '"><\/script>');
}
</script>

Cada uno tiene la misma estructura: un número de orden correlativo, una coma y la dirección URL entre comillas. Terminan todas con una coma excepto la última que no debe tenerla.

En las entradas o donde se nos ocurra, podemos cargar el script de este modo:

<script>leerScript(unNumero);</script>

así que:

<script>leerScript(49);</script>

cargará el script que está alojado en http://.../cualquierScript.txt

De esta forma, si el archivo es modificado, ya sea en su contenido o en su ubicación, basta modificar la lista para que siga funcionando.

Una variante es la que me propuso Nico, en lugar de utilizar un array con una lista correlativa idenficada con números, usar variables con un nombre exclusivo, algo que puede ser útil si se trata de algunos pocos scripts. Por ejemplo:

<script type="text/javascript">
// primero definimos los nombres
var animcollapse = "http://.../unScript.js";
var emoticones = "http://.../otroScript.txt";

// luego la función
function leerScript(cual) {
document.write('<script src="' + cual + '"><\/script>');
}
</script>

Y si quisiéramos usar el script de emoticones, lo cargaríamos así:

<script>leerScript(emoticones);</script>

Sea cual sea el método, debe tenerse en cuenta que la función siempre debe estar antes que su llamada porque sino, no funcionará.

Me preguntaron si era posible usar un efecto similar al que se ve en páginas como Twitter, es decir, que ciertos íconos o enlaces permanezcan ocultos hasta que ponemos el mouse encima de cierta área:

Esto es posible reproducirlo con bastante facilidad, la estructura del código HTML sería algo así:

<div class="recuadroC">
  ... lorem ipsum dolor sit amet ...
  <span class="iconos">
    <div>
      <a href="laQueQueremosHacer" class="enlaceIco"> </a>
    </div>
  </span>
</div>

En resumen, un bloque DIV con cualquier contenido, dentro el cual colocamos una etiqueta SPAN y otro bloque DIV con los íconos que servirán de enlaces. La clave de todo está en las definiciones CSS. Un par de ejemplos:

Fusce augue? Fusce magna. In mi. Etiam aliquet porttitor ligula. Curabitur auctor ultricies lectus. Donec placerat. Pellentesque convallis quam sit amet diam! Curabitur lectus. Duis rutrum placerat leo. Fusce euismod nibh sit.

Fusce augue? Fusce magna. In mi. Etiam aliquet porttitor ligula. Curabitur auctor ultricies lectus. Donec placerat. Pellentesque convallis quam sit amet diam! Curabitur lectus. Duis rutrum placerat leo. Fusce euismod nibh sit.

<style>
.recuadroC { /* el bloque */
  cursor: pointer;
  padding: 10px 30px 10px 10px; /* el contenido no debe ocupar todo el bloque */
  position: relative; /* esta es la propiedad clave */
  width: valorpx;
}
.recuadroC .iconos { /* el bloque del SPAN */
  position: absolute; /* lo ubicamos dentro del DIV */
  right: 5px; /* lo ponemos a la derecha */
  top: 5px; /* los valores pueden ser otros */
}
.recuadroC a { /* los enlaces serán imágenes */
  background: transparent url() no-repeat 50% 50%;
  display: block;
  height: valorpx; /* el alto de la imagen */
  visibility: hidden; /* lo hacemos invisible */
  width: valorpx; /* el ancho de la imagen */
}
.recuadroC a.enlaceIco { /* es la imagen */
  background-image: url(URL_imagen);
}
.recuadroC:hover {
  /* cualquier propiedad */
}
.recuadroC3:hover a.enlaceIco {  /* cuando ponemos el mouse encima */
  visibility: visible; /* lo hacemos visible */
}
</style>

Este es un ejemplo concreto ...

Creo que esto ya estaba en Blogger Draft pero ahora ya está en el escritorio normal de Blogger. Son dos íconos que aparecen al lado de cada blog que tengamos en nuestra cuenta; uno de ellos es un acceso más directo al llamado Mail2Blogger; el otro es la posibilidad de publicar a través de teléfonos móviles:

Algo similar, veremos en la pestaña de Configuracion donde ahora, dirá Correo electrónico y móvil. Allí veremos la posibilidad de tener una dirección para la creación de entradas por correo electrónico:

Y además, un enlace para añadir y configurar dispositivos móviles (más información)

Blogger Mobile

How does Blogger Mobile work.

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

Buscar documentos de cierto tipo en Google es posible pero los resultados suelen ser poco claros.

OutWit Hub es una extensión que nos permite organizar esas búsquedas de manera muy simple. la primera vez que lo instalamos, agrega dos cosas, OutWit Kernel que es el motor principal y OutWit Docs que es el módulo para buscar documentos (PDF, DOC, presentaciones, plantillas de cálculo, SWF, etc (ver captura).

Cada módulo está pensado para un tipo de búsqueda específica y en un futuro, ya que el sistema está en fase beta, podrán agregarse de manera individual. Sin embargo, en este momento, hay otro módulo disponible: OutWit Images, pensado para navegar, compartir o descargar imágenes.

REFERENCIAS:labnol.org

Pués nada, puro Twitter via @lablogueria.

Completando la frase: el CSS es como ...

• el CSS es como el ajedrez. Lo elemental se aprende en un día y se puede pasar el resto de la vida tratando de dominarlo.
• el CSS es como algunas religiones. La gente se vuelve fundamentalista con mucha rapidez.
• el CSS es como una canción de los Beatles. Simple y bella.
  

REFERENCIAS:CSS Tricks

Blogger'Sphera muestra una serie de entradas que explican de manera muy interesante, cómo funcionan los códigos condicionales en Blogger. Aquí intento traducirlos.

Primero, entendamos qué es un condicional.

Cuando se usa un IF, lo que hacemos es comparar dos cosas y obtener como respuesta VERDADERO (true) o FALSO (false). Lo utilizamos para "tomar una decisión"; si la respuesta es VERDADERO hacemos algo y si es FALSO, eventualmente, hacemos otra cosa. Este es un ejemplo:

<b:if cond='clima == llueve'>
... me quedo en casa porque la respuesta es VERDADERA, llueve ...
<b:else/>
... me voy a pasear porque la respuesta es FALSE, no llueve ...
</b:if>

Lo mismo podríamos hacer al revés si, en lugar de == que indica igualdad, usamos != que indica una desigualdad. Por ejemplo, en lugar de preguntarnos si llueve, podríamos preguntarnos si NO llueve:

<b:if cond='clima != llueve'>
... me voy a pasear porque la respuesta es VERDADERA, no llueve ...
<b:else/>
... me quedo en casa porque la respuesta es FALSA, llueve ...
</b:if>

No necesariamente debo tener una respuesta para cada situación, podría tener sólo una:

<b:if cond='clima == llueve'>
  ... me quedo en casa porque la respuesta es VERDADERA, llueve ...
</b:if>

En los lenguajes de programación, este tipo de instrucciones es fundamental, todo termina siendo una larga lista de condiciones. En Blogger, las cosas son mucho más limitadas porque no podemos comparar cualquier cosa, sólo podemos comparar los datos a los que ellos nos dan acceso y sólo pdoemos hacerlo en ciertos lugares ya que muchos de ellos no estan disponibles en cualquier parte de la plantilla.

De todos modos, hay algunos que podemos usar para muchas cosas, los que nos indican en que tipo de página estamos; de este modo, ciertas cosas se ejecutarán o no, dependiendo de donde estemos.

El dato que indica eso es data:blog.pageType que puede tener tres posibles valores:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
esto sólo se mostrará en una entrada individual
</b:if>

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
esto sólo se mostrará en las páginas que listan entradas
</b:if>

<b:if cond='data:blog.pageType == &quot;index&quot;'>
esto se mostrará en todas las demás
</b:if>

La combinaciones de igualdad y desigualdad, hará que podamos mostrar u ocultar algo con bastante precisión:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
esto se mostrará en cualquier página excepto en las entradas individuales
</b:if>

Hay más posibilidades. Con esta condición, verificamos que estemos en el home de nuestro blog:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
   esto se mostrará sólo en el home
</b:if>

Si bien hablo de "mostrar", las condiciones no sólo sirven para eso. Podemos condicionar casi cualquier otra cosa:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
... estas propiedades de estilo sólo se aplicararán al home ...
</style>
</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script>
    ... este script sólo se cargará en el home ...
</script>
</b:if>

Hay varias posibilidades más. Una de ellas nos permite detectar una entrada individual especifica. Supongamos que quisiera hacer algo en esta entrada: http://vagabundia.blogspot.com/2009/04/ocultando-codigos-mientras-los-probamos.html

Tenemos tres alternativas:

<b:if cond='data:blog.pageTitle == &quot;Ocultando códigos mientras los probamos : Vagabundia&quot;'>

data:blog.pageTitle es el contenido de la etiqueta TITLE del HEAD.

<b:if cond='data:blog.url == &quot;http://vagabundia.blogspot.com/2009/04/ocultando-codigos-mientras-los-probamos.html&quot;'>

data:blog.url es la dirección URL de la entrada que podemos averiguar cuando publicamos el post.

<b:if cond='data:blog.pageName == &quot;Ocultando códigos mientras los probamos&quot;'>

data:blog.pageName es el título de la entrada individual y es la forma más sencilla de filtrar entradas.

Algo similar podemos hacer con las etiquetas:

<b:if cond='data:blog.pageName == &quot;NOMBRE_ETIQUETA&quot;'>

o bien:

<b:if cond='data:blog.url == &quot;http://miBlog.blogspot.com/search/label/NOMBRE_ETIQUETA&quot;'>

Si bien Blogger no nos permite tener condiciones múltiples en una sola instrucción, las podemos anidar, o sea, colocar una dentro de otra. Por ejemplo si quisiera que algo se mostrara en todas las páginas excepto en las páginas individuales y en el home, podría hacer esto:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
... NO es una página de entradas, puede ser el home o cualquier otra
<b:if cond='data:blog.url != data:blog.homepageUrl'>
... NO es el home así que es el tipo de página que estoy buscando
</b:if>
</b:if>

Un ejercicio más complejo. Condicionamos el color de los textos de las entradas:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
.post-body {color: black;}
</style>
<b:else/>
<b:if cond='data:blog.pageName == &quot;BLOGGER&quot;'>
<style type='text/css'>
.post-body {color: blue;}
</style>
<b:else/>
<style type='text/css'>
.post-body {color: red;}
</style>
</b:if>
</b:if>
<b:else/>
<style type='text/css'>
.post-body {color: green;}
</style>
</b:if>

Wallpapers (Abduzeedo)

Click en la imagen para previsualizar un modelo reducido.
Descargar el archivo ZIP que contiene las imágenes

REFERENCIAS:abduzeedo.com/

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

REFERENCIAS:amazon.com