Alternativas para Xmarks

Quienes haya actualizado la extensión Xmarks o estén suscriptos a ella, seguramente se habrán enterado que ese servicio dejará de funcionar a fin de año; en eldia de hoy, los usuarios deben haber recibido un email informando del tema.

Es una pena ya que es (o era) un servicio que nos permitía mantener sincronizada nuestra información con cualquier navegador, de tal manera que siempre la teníamos disponible y nos ahorraba muchos problemas a la hora de actualizarlos o debíamos acceder a ellas desde diferentes computadoras.

No es extraño que eso ocurra, los servicios van y vienen, ya pasó lo mismo con tantos otros y lo único que podemos hacer es buscar alternativas.

Para Firefox tenemos Firefox Sync funciona de manera similar aunque tiene muchas menos opciones. El sistema, permite sincronizar marcadores, contraseñas, historial, preferencias y pestañas abiertas; y todo eso, se guarda encriptado en los servidores del mismo Mozilla. Las opiniones sobre esta extensión están muy divididas, para algunos funciona de manera correcta y para otros es un desastre absoluto aunque me da la impresión que esto es un poco exagerado y que los usuarios pretenden que sea igual que Xmarks lo cual es imposible.

En Chrome, la sincronización puede hacerse utilizando nuestra propia cuenta de Google así que el sistema funciona sólo si estamos logueados con ella. Eso es complicado de manejar si usamos varias cuentas diferentes. Algo similar ocurre con Internet Explorer que sincroniza los datos con Windows Live Essentials.

El único que he probado es Firefox Sync y por ahora no he visto que tenga problemas. En todo caso, recomendaría instalarlo y deshabilitar Xmarks para comprobar que todo esté bien; de esa manera mantenemos ambos servicios activos ... por las dudas.

• más detalles: Shutdown FAQ
• acceder al backup de Xmarks y descargarlo en formato HTML: my.xmarks.com
• cómo desinstalar la extensión: wiki.foxmarks.com
• eliminar la cuenta de Xmarks: login.xmarks.com

Como dato extra, hay otra extensión de Firefox llamada Siphon que también es interesante y que complemente la anterior ya que nos permite sincronizar las extensiones.

Esta última aún no la probé pero parece muy interesante.

Transformaciones, transiciones y animaciones son cosas que vamos a tener que empezar a estudiar en poco tiempo así que lo mejor es irse preparando.

Si tienen Chrome instalado, aprovechen la oportunidad de mirar los ejemplos que se muestran en Using CSS3 Transitions, Transforms and Animation. Algunos funcionarán con limitaciones en otros navegadores pero nos dará una idea de lo que se viene en cuanto Firefox 4 salga de sus versiones beta e Internet Explorer 9 vea la luz.

Igual, aunque debamos seguir esperando, podemos jugar un poco.

En este ejemplo, hay dos imágenes y basta poner el cursor encima para que permuten, en Chorme con un fade, en Firefox sin efectos y en IE no pasará nada:

#demoFade {
cursor: pointer;
height: 125px;
margin: 0 auto;
position: relative;
width: 200px;
}
#demoFade img {
position: absolute;
left: 0;
-moz-transition: opacity 1s ease-in-out; /* transición en Firefox 4 */
-webkit-transition: opacity 1s ease-in-out; /* transición en Chrome y Safari */
-o-transition: opacity 1s ease-in-out; /* transición en Opera */
transition: opacity 1s ease-in-out; /* transición según la w3.org */
}
#demoFade img.top:hover {
opacity: 0;
}

<div id="demoFade">
<img src="URL_imagen-1" />
<img class="top" src="URL_imagen-2" />
</div>

Este otro, es similar pero el efecto es de zoom, girando en Chrome, sólo escaládose en Firefox y de nuevo, en IE no pasará nada de nada:

#demoZoom div {
background-color: #000;
border: 3px solid #89A;
cursor: pointer;
margin: 0 auto;
padding: 10px;
text-align: center;
width: 100px;
-moz-transition: all 2s ease-in-out; /* transición en Firefox 4 */
-webkit-transition: all 2s ease-in-out; /* transición en Chrome y Safari */
-o-transition: all 2s ease-in-out; /* transición en Opera */
transition: all 2s ease-in-out; /* transición según la w3.org */
}
#demoZoom div:hover {
-moz-transform:rotate(720deg) scale(2,4); /* transición en Firefox 4 */
-webkit-transform:rotate(720deg) scale(2,4); /* transición en Chrome y Safari */
-o-transform:rotate(720deg) scale(2,4); /* transición en Opera */
}

<div id="demoZoom">
<div class="hover">TEST efecto hover</div>
</div>

TEST
efecto hover

Más información:

• W3C: CSS Transitions Module Level 3
• W3C: CSS 2D Transforms Module Level 3
• W3C: CSS 3D Transforms Module Level 3
• W3C: CSS Animations Module Level 3

Las preguntas que involucran a padding y margin siguen siendo las más comunes porque hay una tendencia a suponer que son lo mismo y eso, en realidad no es cierto.

Si muestro este ejemplo, uno diría ... es lo mismo porque parecen lo mismo. En ambos casos, en una etiqueta cualquiera, hay otra, un párrafo sencillo. El de la izquierda tiene establecido un margen, el de la derecha, un padding; en ambos casos, el valor es 20:

<p style="margin: 20px; padding: 0;">un ejemplo</p>

<p style="margin: 0; padding: 20px;">un ejemplo</p>

un ejemplo

un ejemplo

Para ver que no son lo mismo, a esas mismas etiquetas les agregaremos algo más, por ejemplo, un color de fondo:

un ejemplo

un ejemplo

Como se ve ahora, la diferencia es notable; lo mismo ocurriría si le pusiera un borde, etc.

La clave de todo, es entender que una etiqueta es un rectángulo que tiene un cierto tamaño. Ese tamaño, está dado por sus dimensiones si es que las hemos establecido con height y width o bien por su contenido; es decir una etiqueta es un rectángulo que tiene un tamaño igual a su contenido, sea este una imagen o un texto.

Con margin, separamos ese rectángulo de aquellos otros rectángulos que lo contienen o que son adyacentes pero, el rectángulo en si mismo no varía, sigue midiendo lo mismo.

Por el contrario, padding aumenta el tamaño de ese rectángulo, crea espacios alrededor de este y por eso, cuando le ponemos un fondo en el ejemplo de la derecha, ese color abarca un rectángulo mayor.

margin es un valor hacia afuera y padding es un valor hacia adentro

Esa es la razón por la que podemos usar márgenes negativos para desplazar algo hacia arriba o hacia la izquierda pero, no podemos usar paddings negativos.

En todos los navegadores, esto se verá como un rectangulo de 500 pixeles de ancho:

<div style="background-color:#FFF;margin:0 auto;width:500px;"></div>

Morbi porttitor sodales enim non lacinia. Aliquam bibendum eros vitae nisi egestas eget accumsan metus ullamcorper. Fusce vel laoreet erat. Integer ut ante enim, convallis vehicula nisi. Pellentesque ut libero nec quam faucibus scelerisque.

Y si le agrego un borde de 10 pixeles, el rectángulo será mayor y medirá 520 pixeles de ancho:

<div style="background-color:#FFF;border:10px solid #6495ED;margin:0 auto;width:500px;"></div>

Morbi porttitor sodales enim non lacinia. Aliquam bibendum eros vitae nisi egestas eget accumsan metus ullamcorper. Fusce vel laoreet erat. Integer ut ante enim, convallis vehicula nisi. Pellentesque ut libero nec quam faucibus scelerisque.

Y si le agrego un padding de 20 pixeles, el rectángulo será aun mayor y medirá 560 pixeles:

<div style="background-color:#FFF;border:10px solid #6495ED;margin:0 auto;padding:20px;width:500px;"></div>

Morbi porttitor sodales enim non lacinia. Aliquam bibendum eros vitae nisi egestas eget accumsan metus ullamcorper. Fusce vel laoreet erat. Integer ut ante enim, convallis vehicula nisi. Pellentesque ut libero nec quam faucibus scelerisque.

La regla de oro es esta:

ancho = border-left + padding-left + width + padding-right + border-right
alto = border-top + padding-top + height + padding-botom + border-botom

Pero el oro es uno de esos materiales impredescibles y esa regla es ... relativa ya que hay otra propiedad que la modifica de manera sustancial y es una regla que funciona en cualquier navegador moderno, incluyendo Internet Explorer 8.

Sabemos que las propiedades CSS tienen siempre un valor por defecto así que si no las colocamos, los navegadores usan esas definiciones. La gran mayoría de ellas, sobre todo las más sofisticadas, no influyen en nada, son siempre valores nulos o no nos damos cuenta de su existencia. Este es el caso de la propiedad box-sizing que tiene tres formas de sintaxis:

-moz-box-sizing: valor; en Firefox
-webkit-box-sizing: valor; en Chrome y Safari
box-sizing: valor; en IE 8 y Opera

El valor por defecto es una palabra: content-box que indica que el ancho y alto de algo no incluye bordes, paddings ni márgenes, sólo su contenido. Pero admite otro valor: border-box que establece que el ancho y alto incluyen al borde y al padding.

Dijimos que si esto mide 500 y le ponemos un borde de 10 pixeles, el rectángulo será de 520 pixeles:

Morbi porttitor sodales enim non lacinia. Aliquam bibendum eros vitae nisi egestas eget accumsan metus ullamcorper. Fusce vel laoreet erat. Integer ut ante enim, convallis vehicula nisi. Pellentesque ut libero nec quam faucibus scelerisque.

Morbi porttitor sodales enim non lacinia. Aliquam bibendum eros vitae nisi egestas eget accumsan metus ullamcorper. Fusce vel laoreet erat. Integer ut ante enim, convallis vehicula nisi. Pellentesque ut libero nec quam faucibus scelerisque.

Así que ahora le agregaremos la propiedad box-sizing con el valor border-box y el rectángulo tendrá los 500 pixeles que indica width; el borde será "interior":

Morbi porttitor sodales enim non lacinia. Aliquam bibendum eros vitae nisi egestas eget accumsan metus ullamcorper. Fusce vel laoreet erat. Integer ut ante enim, convallis vehicula nisi. Pellentesque ut libero nec quam faucibus scelerisque.

Este detalle es particularmente útil cuando lo que hacemos es utilizar medidas como porcentajes ya que estos porcentajes no incluyen los bordes.

<div style="padding: 10px; margin:0 auto; width: 500px;">
<div style="margin:0 auto; width:100%;">
....... el contenido .......
</div>
</div>

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In mattis; urna in lobortis ultricies, eros risus mattis leo.

Fíjense qué pasa si le agrego un borde:

<div style="padding: 10px; margin:0 auto; width: 500px;">
<div style="border: 10px solid #6495ED; margin:0 auto; width:100%;">
....... el contenido .......
</div>
</div>

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In mattis; urna in lobortis ultricies, eros risus mattis leo.

Peor aún si le agrego un padding:

<div style="padding: 10px; margin:0 auto; width: 500px;">
<div style="border: 10px solid #6495ED; margin:0 auto; padding: 10px; width:100%;">
....... el contenido .......
</div>
</div>

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In mattis; urna in lobortis ultricies, eros risus mattis leo.

Todo se soluciona si establezco la propiedad box-sizing con el valor border-box:

<div style="padding: 10px; margin:0 auto; width: 500px;">
<div style="border: 10px solid #6495ED; box-sizing: border-box; margin:0 auto; padding: 10px; width:100%;">
....... el contenido .......
</div>
</div>

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In mattis; urna in lobortis ultricies, eros risus mattis leo.

¿Para qué? No importa pero, hagamos girar las cosas con CSS en cualquier navegador.

Creamos una clase a la que llamamos flipH y vamos a invertilra horizontalmente cuando colocamos el cursor encima:

.flipH { /* cualquier propiedad */ }
.flipH:hover {
-moz-transform: scaleX(-1); /* Firefox */
-o-transform: scaleX(-1); /* Opera */
-webkit-transform: scaleX(-1); /* Chrome y Safari */
transform: scaleX(-1); /* w3org */
filter: FlipH; /* Internet Explorer */
}

Con una imagen es sencillo:

<img class="flipH" src="URL_imagen" />

También podemos hacerlo con el contenido de cualquier otra etiqueta de bloque como un DIV:

<div class="flipH"> abcdefghijk </div>

abcdefghijk

De manera similar, podemos hacer girar las cosas verticalmente:

.flipV { /* cualquier propiedad */ }
.flipV:hover {
-moz-transform: scaleY(-1); /* Firefox */
-o-transform: scaleY(-1); /* Opera */
-webkit-transform: scaleY(-1); /* Chrome y Safari */
transform: scaleY(-1); /* w3org */
filter: FlipV; /* Internet Explorer */
}
</style>

REFERENCIAS:1stwebdesigner.com

Onibari Light
	Contiene 18 íconos de 245x245, en formato PNG.descargar

This is arts
	Contiene 9 íconos de 128x128, en formato PNG.descargar

360 cities es un sitio que contiene fotografías panorámicas y permite crear tours virtuales que luego pueden ser incluidos en cualquier web siempre que no se utilicen desin fiines de lucro.

Basta hacer click en EMBED/SHARE, aceptar las condiciones y copiar el código que nos dan que no es otra cosa que un objeto de Flash.

Ahu Tongariki en Rapa Nui - Isla de Pascua

Esto tal vez sea una sutileza pero a muchos les está preocupando la limpieza del código que escriben en una entrada y a veces, suele ser tema de consulta porque ciertas cosas no funcionan como suponemos que deberían funcionar.

Aquí se nos mezclan dos temas, primero, que Blogger no tiene un solo editor sino dos (o tres), uno es el normal el que ellos llaman "antiguo" y otro es el actualizado que tiene una posible variante si accedemos via Blogger Draft.

En todos los editores veremos tres modos:

• Redactar es lo que se llama modo WYSIWYG (What You See Is What You Get) que muestra lo que agregamos con ciertos formatos que podemos agregar seleccionado y haciendo click en los diferentes botones
• Edición de HTML tiene algunos botones de formato pero básicamente se usa para escribir o editar el código html
• Vista previa abre una ventana con una vista preliminar de la entrada

Qué editor usamos es subjetivo, cada uno elegirá el que más le guste, el que se adapte más a sus necesidades o con el que se sienta más cómodo sin embargo, debemos tener conciencia de las limitaciones de cada uno ellos y sobre todo, debemos saber que si permutamos entre los diferentes modos, el código resultante podría variar y en algunos casos, destruir eso que hemos hecho.

La mayoría utliza el editor como un procesador de textos mínimo y ahí no habrá demasiados inconvenientes pero, algunos de nosotros necesitamos usar etiquetas que no están previstas o agregar cosas que el editor WYSIWYG no nos ofrece ni podrá ofrecernos nunca, ni este ni ningún otro. Entonces, tal vez escribimos un código, ponemos cosas y luego cambiamos de modo o hacemos vista previa y queremos continuar pero ohhhhhh ¿qué pasó?, enlaces que decían href="#" dicen cosas estrafalarias, las etiquetas PRE ya no son lo que eran, hay DIVs extras, los colores tienen otro formato, los tamaños de las fuentes usan porcentajes o se les ha quitado la unidad, etc, etc, etc.

Esto, era algo que ya pasaba en el viejo editor pero se ha vuelto mucho más problemático en el nuevo.

El segundo punto importante es que los navegadores nos complican la vida y Blogger echa leña al fuego porque el código resultante de algo que formateamos, tendrá un código diferente según sea el navegador que estemos utilizando y aquí diré algo que irritará a los geeks: de todos ellos, Chrome es el peor de todos.

Una prueba simple. Escribo algo en Chrome y el código fuente será esto:

Se han agregado DIVs por todos lados, separando los párrafos cada vez que hacia un salto de línea; para las negritas usa la etiqueta B y para las itálicas la etiqueta I; no es que eso esté mal pero ambas son etiquetas depreciadas por la w3org; peor aún, se agregan etiquetas SPAN con una clase que no existe ¿para qué? Don Google/Blogger?:

<span class="Apple-style-spam" style="font-size:x-large;">que pasa</span>

En Firefox todos los formatos llevan una etiqueta SPAN y los párrafos la etiqueta DIV:

En Internet Explorer se generan etiquetas P para los párrafos, las negritas usan la etiqueta STRONG y las itálicas la etiqueta EM; es decir, mal que les pese a muchos, el código generado es mucho más razonable:

En todos los casos, los colores se muestran en formato rgb() y los tamaños de la fuentes con palabras o porcentajes.

¿Y para que me interesa todo esto? En realidad, para nada si es que no escribimos códigos; sin embargo, sería mejor que las etiquetas siempre fueran las mismas (usar STRONG y EM) ya que de ese modo se podrían definir reglas de CSS para ellas. Pero, el problema se presenta cuando escribimos códigos o los editamos; entonces, deberíamos tener mucho cuidado, verificarlos antes de publicarlos o simplemente, sólo utilizar el editor en el modo HTML.

Para eso, también hay una opción que está disponible en la Configuración de Blogger. Allí, en la pestaña Básico, casi al final de la página vemos las llamadas Configuraciones Globales que son las que afectan a todos los blogs de la cuenta. Una de ella es Seleccionar editor de entradas:

Editor actualizado
Editor antiguo (dejará de estar operativo próximamente)
Ocultar modo de redacción Sólo se debe seleccionar en caso de que normalmente utilices la edición HTML en lugar de la edición de texto.

Marcando la última opción, sacamos el Modo Redactar del editor y evitamos tentarnos y hacer lio.

ACTUALIZACIÓN:
Para colmo ... si usamos el editor viejo, ahora aparece este mensaje que en un sistema normal sería un ultimatum pero que en Blogger puede significar cualquier cosa. Es que algo similar sucedió cuando pasó a ser Blogger Beta y se decía que las viejas plantillas dejarían de existir y aún gozan de buena salud pero, de todos modos, habrá que poner las barbas en remojo.

¿No es lindo esto de lidiar con las mejoras que empeoran todo?

¿Que haría yo si no fuera por estos pequeños placeres?

¿Dedicarme a tener un blog? Bah, eso es aburrido.

Este es un menú vertical creado por SOHtanaka; muy simple de armar y no necesita ningún script. Ideal para colocar en una sidebar pero, puede adaptarse para utilizarlo en cualquier parte.

• Item 1Duis diam ligula, luctus nec varius eu, interdum eget turpis. Ut convallis tempor tellus, sed tincidunt velit feugiat quis. Vivamus placerat ligula eu metus molestie tincidunt. Sed tempus porttitor eros vitae vehicula.
• Item 2Suspendisse tristique mauris vel odio pulvinar sit amet consectetur est bibendum? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non sapien at tellus euismod feugiat.
• Item 3Morbi porttitor tristique lacus a malesuada. Morbi vel porta metus. Nunc laoreet libero eget erat blandit faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Integer quis nulla nec elit dignissim molestie sit amet vel quam?
• Item 4Tation utrum utrum abigo demoveo immitto aliquam sino aliquip.
• Item 5
• Item 6Morbi pretium tincidunt bibendum. Nam ac viverra ipsum. Aenean rutrum lorem sit amet metus.
• Item 7Blandit turpis patria euismod at iaceo appellatio, demoveo esse.

El HTML es similar a casi todos, una lista ordenada con enlaces donde, en una etiqueta SPAN, agregaremos la parte oculta que se expandirá al pasar el cursor por encima:

<ul class="sidenav">
  <li>
    <a href="#">Titulo 1
      <span> ... el contenido oculto que se desplegará ...</span>
    </a>
  </li>
  <li>
    <a href="#">Titulo 2
      <span> ... el contenido oculto que se desplegará ...</span>
    </a>
  </li>
  .......
</ul>

Y el CSS que ponemos en alguna parte antes de </head>:

<style type="text/css">
ul.sidenav {
  /* el rectángulo contenedor */
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 250px;
  /* propiedades optativas */
  background-color: #CD853F;
  border: 1px solid #300;
  outline: 1px solid #FFF;
}
ul.sidenav li a {
  /* el enlace de cada item */
  display: block;
  text-decoration: none;
  /* propiedades optativas */
  background: transparent url(URL_imagen_icono) no-repeat 5px 7px;
  border-bottom: 1px solid #AD651F;
  border-top: 1px solid #300;
  color: #FFF;
  font-size: 18px;
  padding: 15px 10px 10px 45px;
  width: 195px;
}
ul.sidenav li a:hover {
  /* propiedades optativas */
  background: #CD853F url(URL_imagen_icono) no-repeat 5px 7px;
  border-top:1px solid #300;
}
ul.sidenav li span {
  /* el contenido permanece oculto por defecto */
  display:  none;
}
ul.sidenav li a:hover span {
  /* el contenido se muestra al pasar el cursor encima */
  display: block;
  /* propiedades optativas */
  font-size: 12px;
  padding: 10px 0;
  margin: 0 0 0 -30px;
}
</style>

Temas varios, respuestas sueltas, sigo pensando en voz alta.

Primero que nada, cuidado. El home de cualquier sitio es clave para la indexación, no es un dibujito lindo, es la base de todo. Por ejemplo, es perfectamente posible poner una imagen con un botón para entrar pero, al no haber textos, al no haber contenido, al no haber enlaces ¿qué pasará? ¿será ignorado por los buscadores?

La página de inicio es la página con más autoridad de nuestro sitio y si bien no debe tratar de mostrar TODO, tampoco debe mostrar NADA .

Mucho cuidado con los blogs que usan JavaScript para generar resúmenes, los buscadores no leen JavaScript ni lo que este lenguaje genera. Mucho cuidado con Flash, Google dice que los indexa pero no sé hasta que punto ni si eso es suficiente; nadie sabe si los archivos SWF serán tratados igual que los archivos HTML.

¿Quieren saber que leen los buscadores? Simplemente, deshabiliten JavaScript del navegador y si usan Firefox, vayan a Ver | Estilo de la Página marquen Sin Estilo; eso les dará una idea de lo que leen los motores de búsqueda cuando acceden a nuestro sitio.

No estoy muy seguro que una página de inicio sea algo que distinga un sitio profesional de otro. Por el contrario, en general, esas páginas donde debo entrar para entrar, me molestan porque me obligan a hacer algo que ya había hecho; si ya entré ¿para que debo abrir una segunda puerta? ¿Han visto esos sitios en Flash a donde suele verse un SKIP INTRO? ¿Cuánta gente hace click ahí? Yo, siempre.

Algo me queda rondando en la cabeza y es personal y muy subjetivo: eso de "profesional" es una palabra que jamás me ha gustado.

En realidad, no tanto porque no sé muy bien qué quiere decir sino porque es un calificativo que suele utilizarse para descalificar. Si algo es "profesional" significa que algo "no es profesional" y eso puede ser totalmente cierto, excepto que quien califica suele ser siempre alguien que se auto-denomina "profesional" y nos mira desde un pedestal que él mismo construyó.

Yo no creo en los diseños que pretenden ser lo que no son, prefiero el criterio de: "si no se puede ocultar, mejor muéstralo y destácalo".

Tampoco creo que los usuarios estemos atentos a esas cosas; visitamos sitios porque nos parecen lindos, útiles o por cualquier otra razón y nadie en su sano juicio elige sitios por la plataforma en que están alojados, creo que la inmensa mayoría de quienes navegan por internet desconocen esos detalles y no les importa en absoluto. Los usuarios, los usuarios reales de la web, jamás han tenido un blog, sólo navegan, miran y eligen.

Puede ser que una página de inicio sea interesante y puede ser que sólo sea una molestia.

Todo es absolutamente subjetivo, absolutamente personal, absolutamente discutible y en esto no hay verdades absolutas, por eso descreo de palabras como profesional y sí creo que un blog es un blog ... porque la mona, aunque se disfrace de seda, sigue siendo mona.

¿Ven? Para esto sirve un blog, para hablarse a uno mismo.

La cuestión que plantea Miguel es: "quiero que cuando entre a mi blog se muestre una página estática". De alguna manera, k_nelita preguntaba algo similar hace unos días y parecería que es algo que muchos desean hacer, tener un blog que no parezca un blog.

Esto no es fácil de responder porque se mezclan cuestiones subjetivas y objetivas pero, tratemos de pensar en voz alta a ver a dónde llegamos.

Lo primero que se me ocurre es decir que un blog tiene una particularidad que lo hace diferente de otro tipo de sitio. Es una lista de entradas creadas de manera dinámica y ordenadas cronológicamente de tal modo que la más reciente aparezca primero. Cuando entramos en el home, sea este un dominio propio o un subdominio de blogspot, lo que se muestra es justamente eso, las últimas entradas publicadas con un diseño que es lo que genera la plantilla que utilizamos.

Desde el punto de vista técnico es muy simple redirigir una página a otra. Redirigir significa que un visitante entra en una dirección URL y automáticamente, el navegador nos lleva a otra con o sin advertencias de por medio. Pero, que sea simple no significa que sea una buena idea ya que las redirecciones no son bien vistas ni por los usuarios ni por los motores de búsqueda. Nosotros, los usuarios, desconfiamos de eso y a veces nos asustamos; los buscadores "sienten" lo mismo y eso está bien ya que ni los unos ni los otros podemos saber de antemano si ese redireccionamiento está hecho de buena fe o no.

Repito lo dicho en otra entrada:

... a Google no le gustan las redirecciones hechas desde una página ya sea usando JavaScript o etiquetas META. Los que saben de estas cosas dicen que sólo acepta dos formas válidas: las llamadas redirecciones 301 o las realizadas utilizando el .htaccess. En ambos casos, la "página vieja" (origen) pasa a ser la "página nueva" (destino); se va directo a la página destino sin cargar la página origen. Esto es lo adecuado cuando nos mudamos de dirección. Por ejemplo, cuando se compra un dominio, normalmente hay una opción de redirección y esta se hace desde el lado del servidor (desde el nuevo dominio) y entonces Google la acepta, obedece, sigue los enlaces e indexa las páginas de origen y destino con el mismo contenido, pero sin sancionarlas.

Así, que, desde lo subjetivo, redirigir una página de Blogger a otra es una mala idea porque no tenemos acceso al servidor y por lo tanto, hay que buscar otras alternativas. Las páginas estáticas no estan pensadas para eso sino como páginas accesorias o secundarias y, en lo concreto, son muy similares a una entrada.

Entonces, hay que pensar en otra cosa y aqui las posibilidades son varias y dependerán del concepto de sitio que nos interese tener. Lo más simple es utilizar una entrada con una fecha ridículamente alta, publicarla normalmente y luego cambiar la fecha para que apunte a un año exótico. Si indicamos en la Configuración que sólo se muestre una entrada por página, nuestro home mostrará siempre la misma entrada y será perfectamente navegable. Con CSS y códigos condicionales, podemos personalizar esa entrada para que parezca lo que no es, quitando fechas, comentarios o lo que se nos de la gana.

Otra alternativa es condicionar toda nuestra plantilla y agregar el código HTML de nuestra página home personal, haciendo que el blog no se vea. Es sencillo; condicionamos TODO:

<body>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
... aquí debería estar el código HTML de nuestro home ...
<b:else/>
... aquí dejamos todo tal como está ...
</b:if>
</body>

El problema de ese tipo de esquema que es perfectamente aceptable, es que ese home personal deberá contemplar la manera de "entrar al blog" en si mismo; debería tener alguna clase de enlace o la lista de archivos o de etiquetas ... algo ... cualquier cosa que nos permita navegar el sitio y además, que permita que sea indexado correctamente.

Una alternativa que también tiene variantes es usar el mismo criterio pero, en lugar de "eliminar" el blog de nuestro home como en el caso anterior, lo que podemos hacer es "ocultarlo"; de ese modo, seguirá estando allí, será indexado y podríamos permutar entre visible y no visible con un solo click.

Todo dependerá de necesidades personales. En este ejemplo, lo que haré será ocultar todo pero, bien podría dejarse el header o la sidebar o el footer.

Como siempre, voy a partir de una plantilla mínima y allí, sin expandir nada para que el código sea corto, agregaré condicionales:

<body>

<!-- esto será lo que mostrará el home del blog -->
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='homepage' style='display:block;'>
<div> ....... cualquier contenido ....... </div>
.......
.......
.......
<a href='javascript:togglehome();'>entrar al blog</a>
</div>
</b:if>

<!-- de aquí en adelante, todo queda igual -->
<div id='outer-wrapper' style='display:none;'>
.......
.......
.......
</div>

<!-- justo al final, coloco un estilo para poder usar la ventana de diseño de manera normal -->
<style>
body#layout #homepage {display:none !important;}
body#layout #outer-wrapper {display:block !important;}
</style>

</body>

Ahora, necesitaría agregar el CSS y una pequeña función de JavaScript antes de </head>:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- el blog es invisible en el home -->
<style type='text/css'>
/* ocultamos el blog */
#outer-wrapper { display:none; }
/* mostramos nuestro home personal con cualquier diseño */
#homepage {
display: block;
margin: 10px auto;
padding: 0;
width:660px;
}
#homepage div {
background-color: #EEE;
border: 2px solid #DDD;
font-family: Lucida Grande;
font-size: 60px;
letter-spacing: -2px;
padding: 30px;
text-align: center;
}
/* el enlace para "entrar" al blog */
#homepage a { ....... }
#homepage a:hover { ....... }
</style>
<script type='text/javascript'>
//<![CDATA[
// esta función, permuta los divs
function togglehome(){
var elHome = document.getElementById('homepage');
var elBlog = document.getElementById('outer-wrapper');
if(elHome.style.display == 'block') {
elHome.style.display = 'none';
elBlog.style.display = 'block';
} else {
elBlog.style.display = 'none';
elHome.style.display = 'block';
}
}
//]]>
</script>
<b:else/>
<!-- el blog es visible en cualquier página que no sea el home -->
<style type='text/css'>
#outer-wrapper { display: block !important; }
</style>
</b:if>

Por defecto, en Configuración | Formato veremos que tenemos definido algo así:

Convertir saltos de línea Sí No
Si seleccionas "Sí", los retornos forzados únicos introducidos en el Editor de entradas se sustituirán por etiquetas <br /> únicas en tu blog, y los retornos forzados dobles se sustituirán por dos etiquetas (<br /><br />).

Esto, hace que escribir en el editor de entradas sea sencillo; ponemos:

Este es un párrafo ...
... y este es otro ....

y veremos que al publicar la entrada, una línea está debajo de la otra.

Es lo que pasa en Blogger y también en al mayoría de los servicios de este tipo. Es obvio que eso ayuda pero, para quién no está informado de cómo funcionan las páginas webs, puede implicar problemas cuando se intentan hacer cosas diferentes o escribir código HTML de manera directa.

Lo que debemos entender es que los navegadores son bobos porque las computadoras son bobas y sólo hacen lo que nosotros les decimos que hagan así que si queremos que dos párrafos estén en dos líneas diferentes, en realidad, debemos indicárselo explícitamente y Blogger, lo que hace es simplificarnos la tarea, agregando el código extra necesario ya que para que veamos esos dos párrafos anteriores, en realidad, deberíamos escribir lo siguiente:

Este es un párrafo ...<br/>... y este es otro ....

que es lo que veremos si miramos el código fuente de nuestro sitio.

Como decía, el problema surge cuando ponemos otras cosas y escribimos etiquetas en diferentes líneas, allí se agregarán etiquetas <br/> extras, dejando líneas en blanco indeseadas. El caso más evidente son las tablas pero también ocurre con listas y con cualquier otra etiqueta:

<div>este es el párrafo anterior a la lista ...</div>
<ul>
  <li>item UNO</li>
  <li>item DOS</li>
  <li>item TRES</li>
  <li>item CUATRO</li>
</ul>
<div>... y este es el párrafo siguiente.</div>

este es el párrafo anterior a la lista ...

• item UNO


• item DOS


• item TRES


• item CUATRO

... y este es el párrafo siguiente.

Como se ve, entre los párrafos y los items de la lista se han generado espacios que no son otra cosa que etiquetas <br/> ya que cada item está escrito en una línea diferente. Para eñimianlos y que quede "normal", deberíamos escribir todo eso en una sola:

<div>este es el párrafo anterior a la lista ...</div>
<ul><li>item UNO</li><li>item DOS</li><li>item TRES</li><li>item CUATRO</li></ul>
<div>... y este es el párrafo siguiente.</div>

este es el párrafo anterior a la lista ...

• item UNO
• item DOS
• item TRES
• item CUATRO

... y este es el párrafo siguiente.

Esto pasará con cualquier código y de allí que muchas veces se diga "escribir todo en una sola línea", justamente, para evitar esos espacios indeseados que incluso, pueden hacer que ciertas cosas no funcionen. Por ejemplo, si usamos la etiqueta style o la etiqueta script en una entrada y escribimos en líneas separadas, no funcionarán en absoluto.

Tanto en el nuevo modelo de editor como en el que está en Blogger Draft, si desplegamos las Opciones de entrada veremos una alternativa que nos permite definir si vamos a utilizar esa configuración en cada post en particular:

Editar los saltos de línea de HTML
Pulsar "Intro" para los saltos de línea
Utilizar etiquetas <br />

Pero también podemos hacerlo de otro modo, creando alguna clase CSS que agregamos a nuestra plantilla y utilizándola para identificar sectores donde no queremos que Blogger inserte saltos de línea automáticos. Le damos un nombre cualquiera y simplemente, le decimos que no los muestre:

.noBR br {display:none;}

Con eso, podríamos escribir algo así:

<div>este es el párrafo anterior a la lista ...</div>
<ul class="noBR">
  <li>item UNO</li>
  <li>item DOS</li>
  <li>item TRES</li>
  <li>item CUATRO</li>
</ul>
<div>... y este es el párrafo siguiente.</div>

Y los saltos de línea de la lista serían ignorados:

este es el párrafo anterior a la lista ...

• item UNO


• item DOS


• item TRES


• item CUATRO

... y este es el párrafo siguiente.

New Google Icons
	Contiene un surtido de íconos en diferentes formatos y tamaños.descargar

Oled Social Icons by arrioch
	Contiene 21 íconos de 256x256, en formato PNG.descargar

Toogle Image Search no es nuevo, tiene varios años online y es una variante de la búsqueda de imágenes de Google que, en lugar de mostrar imágenes asociada a una palabra determinada, las transforma en caracteres ASCII.

Funciona bastante bien y es rápido aunque los resultados dependerán mucho de la imagen que se encuentre ya que no todas son aptas para estas conversiones

Ellos mismos advierten que no es un sitio muy recomendable para menores ya que no tiene filtros de ninguna clase y si uno mira la lista de búsquedas populares ... bueno, no difieren demasiado de la mayoría de las listas de búsquedas recientes que podemos ver hasta en nuestro propios blogs y obviamente, la palabra top es sex ... no es novedad, claro.

Click para ver ampliar imágenes.

Son muchos los que preguntan cómo se hace para que que en los resultados de una búsqueda de Google, aparezcan cosas como esta:

Y la respuesta es que no hay nada que hacer ya que eso, es algo que Google hace por su cuenta. Son los llamados Enlaces de Sitio.

En teoría, se agregan cuando consideran que ciertos enlaces serán útiles y aparecen de forma automática, cambiando de tanto en tanto. No hay información de cómo se generan o por qué; probablemente, ni ellos lo sepan.

No hay forma de agregarlos pero si podemos eliminarlos o bloquearlos si consideramos que no son adecuados. Para eso, en las Herramientas para Desarrolladores de Google, vamos al panel, desplegamos Información del sitio y en la ventana Enlaces de Sitios veremos una lista de ellos con un botón que permite bloquearlos individualmente pero, debe tenerse en cuenta que el efecto no será inmediato y que esto no será definitivo ya que, pasado un tiempo, pueden volver a a aparecer.

REFERENCIAS:Google Webmaster Central

Para quien use sliders de alguna clase, glider.js es un script que requiere Prototype y Scriptaculous para crear pestañas donde se coloca cualquier tipo de contenido. Es la misma que se mostraba en el slideshow y tiene la particularidad de poder ser utilizada múltiples veces en una misma página.

En este demo, también hay alguna modificación del original que puede ser descargado desde la página del autor porque en el caso de Blogegr, se utilizan algunos nombres de clases que son incompatibles con las plantillas.

Al igual que antes, si no tenemos las librerías debemos agregarlas antes de </head>:

<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js' type='text/javascript'></script>
<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js' type='text/javascript'></script>

Luego, el script en si mismo que cargamos desde un archivo externo:

<script src='URL_scriptaculous_gliderSOLAPAS.js' type='text/javascript'></script>

o lo agregamos directamente a la plantilla:

<script type='text/javascript'>
//<![CDATA[
... aquí copiamos y pegamos el contenido del archivo ...
//]]>
</script>

Y luego, otra vez el CSS mínimo:

<style type='text/css'>
/* el contenedor superior donde se mostrarán los enlaces a cada solapa */
ul.controles {
list-style-type:none;
margin: 0;
padding:0 ;
}
ul.controles li {
list-style-type:none;
margin: 0;
padding:0 ;
}
ul.controles li a { ... }
ul.controles li a:hover { ... }

/* el contendedor donde se mostrarán las solapas */
div.elscroller { /* lo dimensionamos a gusto */
height: 250px;
overflow: hidden;
width:600px;
}
div.contenidoSOLAPAS { /* le vamos a dar un ancho con un valor extremadamente alto para que entren todas */
margin: 0;
padding: 0;
width: 100000px;
}
div.seccion { /* dimensionamos los DIVs de cada solapa */
float: left;
height: 210px;
margin: 0;
overflow: hidden;
padding: 20px;
width: 560px;
}

/* el contendor con la navegación inferior que pueden ser textos o imágenes*/
div.navegaSOLAPAS { /* lo dimensiono */
clear: both;
height: 45px;
margin: 0 auto;
width: 500px;
}
div.navegaSOLAPAS a { /* ... cualquier propiedad, color, fuente, etc ... */ }
div.navegaSOLAPAS a:hover { /* ... si queremos un efecto sobre esos enlaces ... */ }
</style>

Y ahora el HTML que puede ir tanto en la platilla como en una entrada:

<div id="gliderSolapas">
<ul class="controles">
<li><a href="#seccion1"> texto o imagen 1</a></li>
<li><a href="#seccion2"> texto o imagen 2 </a></li>
<li><a href="#seccion3"> texto o imagen 3 </a></li>
</ul>
<div class="elscroller">
<div class="contenidoSOLAPAS">
<div class="seccion" id="seccion1">
....... aquí ponemos el contenido de la solapa 1 .......
</div>
<div class="seccion" id="seccion2">
....... aquí ponemos el contenido de la solapa 2 .......
</div>
<div class="seccion" id="seccion3">
....... aquí ponemos el contenido de la solapa 3 .......
</div>
.......
</div>
</div>
</div>
<div class="navegaSOLAPAS">
<a href="#" onclick="gliderDEMOsolapas.previous();return false;"> anterior </a>
<a href="#" onclick="gliderDEMOsolapas.next();return false"> siguiente </a>
</div>
<script type="text/javascript">
var gliderDEMOsolapas = new GliderSOLAPAS('gliderSolapas', {duration:0.5});
</script>

En el CSS se ve que cada solapa está en un DIV cuya clase, en este ejemplo, es seccion y están definidas como flotantes usando float: left pero ¿qué pasa si no flotaran o si les agregáramos la propiedad clear:both? Pués entonces, el desplazamiento no sería horizontal sino vertical; colóquense en la primera solapa y prueben el ejemplo, haciendo click en los enlaces para permutar entre uno y otro modo:

Aunque la forma de añadir otros enlaces en el gadget de páginas estáticas de Blogger es algo que El escaparate de Rosa ha explicado muy bien no hace mucho, el tema parece seguir siendo motivo de consulta así que, respondiendo al pedido de Andrea, vamos a repasarlo ya que muchos lo utilizan.

Como las opciones que nos muestra son pocas, no queda más remedio que editar el código si es que queremos cambiar algo:

No es difícil ya que es un código bastante corto y basta expandir el widget PageList1, para verlo. Allí, hay que entender que la lista de enlaces se encuentra en un LOOP así que, simplemente deberíamos agregar nuestros propios enlaces antes o después de los que agrega Blogger; es decir, justo después de <ul>, justo antes de </ul> o en ambos extremos:

<b:widget id='PageList1' locked='false' title='Páginas' type='PageList'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <ul>
      <!-- ... aquí ponemos nuestros enlaces ... -->
      <li><a href='mi_URL_1'> mi título 1</a></li>
      <li><a href='mi_URL_2'> mi título 2</a></li>
      <b:loop values='data:links' var='link'>
        <b:if cond='data:link.isCurrentPage'>
          <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
        <b:else/>
          <li><a expr:href='data:link.href'><data:link.title/></a></li>
        </b:if>
      </b:loop>
      <!-- ... o los ponemos aquí ... -->
      <li><a href='mi_URL_3'> mi título 3</a></li>
      <li><a href='mi_URL_4'> mi título 4</a></li>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

¿Para qué se utiliza si en realidad sólo es una lista de enlaces que bien podríamos agregar con cualquier otro gadget o a mano?

Porque la plantillas de nuevo diseño lo tienen y porque detecta un dato al que no normalmente no podemos acceder: ¿estamos en cierta pagina?

Eso es lo que hace esto:

<b:if cond='data:link.isCurrentPage'>
  <!-- ... si estamos en esa página ... -->
<b:else/>
  <!-- ... si no estamos en esa página ... -->
</b:if>

En ambos casos hay un enlace pero a uno se le agrega la clase selected y al otro no. De alguna manera, se intenta que funcione como lo hacen muchos menús o solapas de otros sistemas aunque lo que suele verse no es que se cambia la estética de la solapa sino que esa solapa deja de ser un enlace ya que, si estamos allí, no hace falta que lo sea.

Nada impide que dentro del gadget, usemos esa facilidad así que podríamos reemplazar cada uno e nuestros propios enlaces:

<li><a href='mi_URL'> mi título </a></li>

por algo así:

<b:if cond='data:link.isCurrentPage'>
  <li class='selected'><a href='URL_mienlace_1'> título 1 </a></li>
<b:else/>
  <li><a href='URL_mienlace_1'> título 1 </a></li>
</b:if>

o quitar el enlace si es que quisiéramos que no hubiera uno cuando estamos en esa página:

<b:if cond='data:link.isCurrentPage'>
  <li class='selected'><a href='URL_mienlace_1'> título 1 </a></li>
<b:else/>
  <li><span> título 1</span></li>
</b:if>

Tampoco es necesario que incluyamos el LOOP con las páginas estáticas, el widget lo podemos utilizarlo para cualquier otro enlace, interno o externo así que podríamos borrar todo y poner una lista o menú personal, aprovechándonos de esas funciones:

<b:widget id='PageList1' locked='false' title='Páginas' type='PageList'>
<b:includable id='main'>
  <div class='widget-content'>
    <ul>

      <b:if cond='data:link.isCurrentPage'>
        <li class='selected'><a href='URL_mienlace_1'> título 1 </a></li>
      <b:else/>
        <li><span> título 1 </span></li>
      </b:if>

      <b:if cond='data:link.isCurrentPage'>
        <li class='selected'><a href='URL_mienlace_2'> título 2 </a></li>
      <b:else/>
        <li><span> título 2 </span></li>
      </b:if>

      <b:if cond='data:link.isCurrentPage'>
        <li class='selected'><a href='URL_mienlace_3'> título 3 </a></li>
      <b:else/>
        <li><span> título 3 </span></li>
      </b:if>

      <!-- ... y seguimos agregando enlaces ... -->      

    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Las definiciones de CSS pueden variar con las plantillas, Blogger agrega dos de forma automática:

.PageList li a {
  font-weight: normal;
}
.PageList li.selected a {
  font-weight: bold;
  text-decoration: none;
}

Así que podemos sobrescribirlas con nuestras propias reglas:

.PageList li a { ....... }
.PageList li a:hover { ....... }
.PageList li.selected span { ....... }

Hagamos un resumen de las propiedades más comunes que afectan a los textos.

font-family define el tipo de fuente, es decir el tipo de letra.

Hay que recordar que si bien podemos indicar cualquiera, lo que verán los visitantes dependerá de sus sistemas operativos, del navegador que utilicen y de las fuentes que tengan instaladas. Es común ver que se definen fuentes exóticas porque, claro, quien diseña la página las ve pero eso no significa que lo hará el resto de los usuarios. Esto, no es un problema si es que somos concientes de ello. Una forma de minimizar los riesgos es utilizar fuentes alternativas que se agregan, separándolas con comas y siempre poner una de las llamadas familas genéricas (serif, sans-serif, cursive, fantasy):

p { font-family:Broadway,Arial,Helvetica,sans-serif; }

curabitur consectetur dictum laoreet

font-size define el tamaño de esa fuente.

Ese tamaño es un número seguido de una unidad. Muchas veces vemos que la unidad definida es puntos (pt) y si bien funciona, esto no es recomendable ya que es una unidad que se refiere a las impresoras y los navegadores interpretarán ese valor de distinto modo. Lo lógico es utilizar pixels (px) que es una medida relacionada con la pantalla del monitor o bien utilizar las unidades relativas ems (em) y porcentajes (%).

p { font-size: 20px; }

curabitur consectetur dictum laoreet

Estas últimas son relativas porque toman como referencia "algo" que previamente se ha definido de manera absoluta; caso contrario, es el navegador el que define esa unidad base.

la fuente es de 20 pixeles así que 100% o 20px es lo mismo
si coloco 70% es el 70% de 20 pixeles así que se verá más chica
si coloco 130% es un 130% de 20 pixeles así que se verá más grande

line-height es la "altura" de las fuentes lo que no significa que se modifique la fuente en si misma sino el espacio vertical que ocupa.

Por defecto, el valor se establece con la palabra normal pero, podemos cambiarla.

p { line-height: 1.25em;}

El no tener bien definido ese valor es lo que muchas veces hace que ciertos textos parezcan cortados (y en ese caso, hay que aumentarlo) o que las líneas aparezcan muy separadas entre si (en ese caso hay que disminuirlo)

curabitur consectetur dictum laoreet

curabitur consectetur dictum laoreet

letter-spacing es la separacion entre las letras de una palabra.

Es muy útil cuando se trata de títulos o fuentes de gran tamaño ya que acepta valores negativos y eso, nos permite compactar los textos que sino,, se verían muy perdidos. Por el contrario, también sirve para crear efectos interesantes, separando las letras si usamos valores positivos altos.

p {letter-spacing: -1px;}

curabitur consectetur dictum laoreet

font-style lo usamos cuando queremos mostrar un texto en cursiva (italic)
font-weight lo usamos cuando queremos mostrar un texto en negrita (bold)
font-variant lo usamos cuando queremos mostrar un texto en versales (small-caps)

p {
  font-style: italic;
  font-weight: bold;
  font-variant: small-caps;
}

curabitur consectetur dictum laoreet praesent tempus

text-decoration es la "decoración" del texto, podemos decirle que no queremos ninguno (none), que esté subrayado (underline) que esté tachado (line-through), que tenga un subrayado superior (overline) o incluso, en algunos naveadores, podemos hacer que parpadee (blink).

p {text-decoration: underline;}

curabitur consectetur dictum laoreet praesent tempus

text-transform la usamos si quermos transformar el texto original y tiene tres valores:
lowercase lo usamos si queremos que todas las letras se muestre en minúsculas
uppercase lo usamos si queremos que todas las letras se muestre en mayúsculas
capitalize lo usamos si queremos que la primera letra de cada palabra se muestre en mayusculas y el resto en minúsculas

p {text-transform: uppercase;}

curabitur consectetur dictum laoreet praesent tempus

text-indent nos permite crear sangrías, separando un texto de su borde

p {text-indent: 50px}

Maecenas eu turpis quis elit tincidunt hendrerit eget eget massa. Maecenas eu lectus est, et euismod quam. Ut ut sem dolor. Ut vel feugiat eros. Etiam ultricies, nisl at interdum aliquam, leo lorem venenatis elit, a tristique turpis nisi ac nulla.

Mauris congue molestie sem eu pretium! Vestibulum quis dapibus velit. Nullam at ultricies dui. Sed malesuada molestie nibh ac aliquam. Nam lectus turpis, posuere et porta a, eleifend vel dui. Praesent tristique dignissim placerat.In eros mauris, iaculis eu porta in, luctus ut sapien. Integer a leo turpis.

glider.js es un script que utiliza Prototype y Scriptaculous para crear un carrusel deslizante; pestañas donde se coloca cierto contenido y pueden ser accedidas de manera individual, desplazándose de una a otra con un efecto o generar alguna clase de slideshow.

Lo interesante del script es que es muy pequeño y puede ser utilizado múltiples veces en una misma página.

Para esta primera entrada, lo que he hecho es modificarlo bastante y adaptarlo de tal modo de crear un slideshow de imágenes similar al mostrado hace unos días pero con el agregado de algunos controles extras que nos permiten navegar entre las imágenes.

El proyecto original puede ser descargado desde la página del autor.

Si no tenemos las librerías debemos agregarlas antes de </head>:

<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js' type='text/javascript'></script>
<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js' type='text/javascript'></script>

Luego, el script en si mismo que cargamos desde un archivo externo:

<script src='URL_scriptaculous_glider.js' type='text/javascript'></script>

o lo agregamos directamente a la plantilla:

<script type='text/javascript'>
//<![CDATA[
... aquí copiamos y pegamos el contenido del archivo ...
//]]>
</script>

Por último, el CSS que es elemental así que podemos diseñarlo con bastante flexibilidad:

<style type='text/css'>
/* el contenedor superior donde se mostrarán los enlaces a cada imagen (IMG1 | IMG2 | etc */
div.gcontroles {
text-align: center;
}
div.gcontroles a { /* ... cualquier propiedad, color, fuente, etc ... */ }
div.gcontroles a:hover { /* ... si queremos un efecto sobre esos enlaces ... */ }

/* el contendedor donde se mostrarán las imágenes y que es una lista UL LI */
div.glider { /* lo dimensionamos a la medida de las imágenes */
height: 300px;
overflow: hidden;
width: 400px;
}
ul.listaglider { /* le vamos a dar un ancho con un valor extremadamente alto para que entren todas */
list-style-type: none;
margin: 0;
padding: 0;
width: 100000px;
}
li.gimg { /* dimensionamos cada item a la medida de las imágenes */
float: left;
height: 300px;
list-style-type: none;
margin: 0;
overflow: hidden;
padding: 0;
width: 400px;
}
li.gimg img { /* por als dudas, fuerzo a que las imágenes se redimensiones siempre */
height: 300px;
width: 400px;
}

/* el contendor con la navegación inferior que pueden ser textos o imagenes*/
div.gflechas { /* lo dimensiono */
height: 45px;
margin: 0 auto;
width: 400px;
}
div.gflechas a { /* ... cualquier propiedad, color, fuente, etc ... */ }
div.gflechas a:hover { /* ... si queremos un efecto sobre esos enlaces ... */ }
</style>

El HTML tiene varias partes; la primera contiene los controles superiores que son anchors a los IDs de las imágenes; la segunda es una lista donde cada etiqueta LI tiene un ID diferente; la tercera son los enlaces para navegar hacia atras y hacia adelante y por último el llamado a la función:

<div id="glider_DEMO">
<div class="gcontroles">
<a href="#gimg1">IMG 1</a> | <a href="#gimg2">IMG 2</a> | <a href="#gimg3">IMG 3</a></a>
</div>
<div class="glider">
<ul class="listaglider">
<li class="gimg" id="gimg1"><img src="URL_imagen_1" /></li>
<li class="gimg" id="gimg2"><img src="URL_imagen_2" /></li>
<li class="gimg" id="gimg3"><img src="URL_imagen_3" /></li>
.......
</ul>
</div>
</div>
<div class="gflechas">
<a href=#" onclick="miejemplo.previous();return false;"></a>
<a href=#" onclick="miejemplo.next();return false"></a>
</div>
<script type="text/javascript">
var miejemplo = new Glider('glider_DEMO', {duration:0.5});
</script>

Decía que podían crearse múltiples instancias así que podríamos tener varios funcionando en la misma página. Para eso, simplemente debemos usar IDs diferentes y crear funciones diferentes:

<div id="otro_DEMO">
.......
</div>
.......
<script type="text/javascript">
var otroejemplo = new Glider('otro_DEMO', {duration:0.5});
</script>

Hay otra variantes, podemos generar un slideshow automático, estableciendo la velocida de este modo:

<script type="text/javascript">
var ejemploauto = new Glider('nombre_ID', {autoGlide: true, frequency: 4});
</script>

Dakwak se presenta como una alternativa para traducir sitios web a múltiples idiomas (unos 60) sin que sea necesario mostrar botones especiales. Todo lo que se requiere es un script que añadiremos en nuestra plantilla y que, de manera automática, detecta el idioma del navegador y muestra el contenido ya traducido.

Ellos y muchos otros sitios donde se comenta este sistema, hablan de su facilidad de uso, de las opciones disponibles para excluir párrafos, etc, etc, sin duda, interesantes claro que, para probarlo, hay que registrarse; una vez hecho eso, nos dan el código y las instrucciones para utilizar el sistema.

No; no lo he hecho porque soy algo prejuicioso y con solo ver la página del sitio en español me han dado escalofrios y he corrido a leer dos diccionarios para que se me pase el malestar estomacal:

Sí. usted puede tener su soporte para la interfaz web del lenguaje casi todos los que viven en el mundo!

De todos modos, este es un video explicativo del asunto:

Dakwak

Screencast del funcionamiento del traductor.

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

Por ahora, para tener una buena traducción, habrá que seguir esperando.

REFERENCIAS:wwwhatsnew.com

Blogger ha hecho algunos cambios en el CSS que agrega de manera automática. No sé cuales son con exactitud pero, uno que es evidente es el que afecta a los íconos de edición; la imagen que se agrega debajo de cada widget y que sólo es visible para el administrador del blog:

http://www.blogger.com/static/v1/widgets/XXXXXXXXXX-widget_css_bundle.css

No es nada grave, sólo afecta la parte estética y en lo personal los mantengo siempre ocultos porque me molestan a la hora de nodificar la plantilla o hacer alguna clase de ajuste. Para eso, utilizo una serie de enlaces que me permiten acceder a un panel de control organizado según mis propias necesidades.

Lo que Blogger ha hecho es agregar propiedades a ese ícono, reduciendo su opacidad y estableciendo un margen tal que ahora se superpone levemente con el widget mismo.

.widget-item-control {
  float: right;
  height: 20px;
  margin-top: -20px;
  position: relative;
  z-index: 10;
}
.widget-item-control a {
  opacity: .5;
}
.widget-item-control a:hover {
  opacity: 1;
}

Como dije, esto no afecta en nada a la forma en que los visitantes ven el blog pero, nada impide modicarlo; para eso basta agregar las reglas de estilo en la plantilla y sobrescribir las propiedades usando !important o agregarlo después de <body>:

<style>
  .widget-item-control { ....... }
  .widget-item-control a { ....... }
  .widget-item-control a:hover { ....... }
</style>

Tantas veces me lo preguntan y tantas veces respondo lo mismo que voy a ver si puedo explicar como están hechos los índices de este blog.

Primero las decepciones:
no, no son páginas estáticas, son entradas comunes y corrientes
no, no se utilizan scripts, todo está hecho a mano

Probablemente, ambas cosas hacen que algunos abandonen antes de empezar pero, igual continúo.

Cada entrada tiene agregado el CSS que es igual en todos ellos y bien podría estar en el head de la página. En esas definiciones de estilo se cambian las características generales del blog, ocultando ciertos DIVs como la sidebar, la fecha, el footer de las entradas y los comentarios que además, no se permiten; para esto último, basta desplegar las opciones y marcar No permitir, ocultar existentes. Por último, la fecha que les he colocado es muy antigua (año 2006) y de esa manera no se muestran normalmente ni se actualiza el feed cuando se modifican.

Como se oculta la sidebar, el blog queda más ancho así que para compensar esto, también se amplia el ancho de las entradas; algo así:

#main-wrapper {width:VALORpx;}
#sidebar-wrapper, .post-footer, #blog-pager, #comments {display:none;}

Luego se agregan las definiciones de este tipo de entrada que son personales; puede ponerse lo que uno quiera, dependerá del diseño deseado.

Lo que sigue es crear una lista que repito, agrego de manera manual, ordenándola como crea conveniente y la pregunta repetida es ¿cómo generar columnas?

Podrían usarse tablas pero, en este caso, como sólo se trata de enlaces, es mucho más simple utilizar una o varias listas UL a las que les pondremos una clase CSS para controlarlas:

<ul class="milista">
  <li><a href="URL_pagina1">enlace 1</a></li>
  <li><a href="URL_pagina2">enlace 2</a></li>
  <li><a href="URL_pagina3">enlace 3</a></li>
  .......
  <li><a href="URL_paginaN">enlace N</a></li>
</ul>

Hay muchas formas de simular esas columnas, la base de todas esas formas es utilizar la propiedad float y dimensionar alguna de las etiquetas, ya sea la etiqueta LI o la etiqueta A del enlace; por ejemplo:

/* el rectángulo con la lista en si misma */
ul.milista {
  clear: both;
  float: left;
  list-style-type: none;
  margin: 20px 0;
  padding: 0;
}
/* los items de esa lista */
ul.milista li {
  display: inline;
}
/* transformamos los enlaces en bloques de cierto ancho y cierto alto */
ul.milista li a {
  float: left; /* flotan */
  line-height: 2em; /* el alto */
  padding: 0 5px; /* la separación entre ellos */
  width:150px; /* el ancho */
}
ul.milista li a:hover { /* ... cualquier efecto ... */ }

Cuando algo flota, se acomoda dentro de su contenedor así que acá, como todos tienen el mismo ancho y la misma separación (width y padding) lo que veremos es una serie de enlaces encolumnados:

• in aliquet rhoncus
• proin id dolor
• nulla facilisis eget
• nam ultrices
• tempus est magna
• hendrerit pharetra
• ut fringilla quam
• aenean nisi
• malesuada neque
• ipsum dolor amet
• pellentesque ultrices

Con line-height controlamos la "altura" de cada enlace y con width su ancho. Si aumentamos el primer valor y ponemos line-height: 3em cada enlace sera más alto y por lo tanto, las filas se separarán más verticalmente; si disminuimos el ancho con width:135px habrá más lugar disponible así que en lugar de tres columnas tendremos cuatro:

• in aliquet rhoncus
• proin id dolor
• nulla facilisis eget
• nam ultrices
• tempus est magna
• hendrerit pharetra
• ut fringilla quam
• aenean nisi
• malesuada neque
• ipsum dolor amet
• pellentesque ultrices

Si seguimos disminuyendo el ancho y este ya no es suficiente para contener el texto, cada línea bajará para hacerle lugar pero las columnas se mantendrán:

• in aliquet rhoncus
• proin id dolor
• nulla facilisis eget
• nam ultrices
• tempus est magna
• hendrerit pharetra
• ut fringilla quam
• aenean nisi
• malesuada neque
• ipsum dolor amet
• pellentesque ultrices