Click para ampliar las imágenes.
REFERENCIAS:
Carl Sagan: Cosmos |
Cosmos: A personal voyage (Un viaje personal) es una serie de trece documentales realizados para la televisión, escritos y presentados por el astrónomo Carl Sagan y en su momento, allá por los años 80, fue visto por más de 600 millones de especatdoes de 60 países del mundo.
La serie está disponible en varios sitios de internet, entre ellos, en Google Videos.
La serie está disponible en varios sitios de internet, entre ellos, en Google Videos.
| [1] The Shores of the cosmic ocean | [2] One Voice in the cosmic fugue | |
 |  | |
| [3] Harmony of the worlds | [4] Heaven and hell | [5] Blues for a red planet |
 |  |  |
| [6] Travellers' tales | [7] The backbone of night | [8] Journeys in space and time |
 |  |  |
| [9] The lives of the stars | [10] The edge of forever | [11] The persistence of memory |
 |  |  |
| [12] Encyclopaedia galactica | [13] Who speaks for Earth? | |
 |  |
Otro sitio interesante que reune todos los capítulos es VJ SPCTV donde podemos verlos consecutivamente o bien descargarlos en formato FLV a nuestra PC 
Vísteme despacio que estoy apurado |
Parece que somos varios los que recién nos damos cuenta de la aparición de esta publicidad dentro de Blogger. Mientras Gem@ 
trata de ella en una entrada de ayer, este Buenos Aires agobiante hace que queden las cosas pendientes y allí vamos, tarde pero seguro. Despacio para evitar deshidratarse.
trata de ella en una entrada de ayer, este Buenos Aires agobiante hace que queden las cosas pendientes y allí vamos, tarde pero seguro. Despacio para evitar deshidratarse.
Para nuestra desgracia, la página está en inglés. Piden disculpas pero sigue en ingles: "Lo sentimos, pero la información que has solicitado no está disponible en tu idioma."
El tema es ¿cómo hacer que el blog cargue más rápido?
Hace un tiempo, en una entrada me preguntaba si el tiempo de carga de un sitio podía afectar su posicionamiento y Blogger responde que sí. Es obvio: la velocidad de carga de un blog es crítica a la hora de atraer lectores y una demora excesiva hace que los visitantes abandonen el intento antes de tener la oportunidad de leer.
Así que veamos lo que sugiere Blogger.
Entradas:
La velocidad puede verse afectada por la cantidad de entradas que se muestran en la página principal. Esto lo definimos en la Configuración | Formato, seleccionado la cantidad de entradas a mostrar y Blogger recomienda un máximo de 10. En lo personal, creo que el número debe ser bastante menor pero depende mucho del contenido. No es lo mismo un blog con textos que otro con videos.
Gadgets:
Blogger dice que la velocidad óptima se logra si sólo se utilizan gadgets o elementos provistos por Google/Blogger. La autopromoción es buena pero lo que afirman es dudoso y no puede aplicarse a cualquier gadget de Google, estas suelen ser lentas, muy lentas a la hora de cargarse. En términos generales, todos los scripts y archivos que se agregan por defecto y sobre los que no tenemos control suelen ser lentos pero no podemos hacer nada sobre eso; es decir, podemos optimizar el blog pero hay un piso mínimo.
Archivos externos:
Si se utilizan scripts en archivos externos, se dice que es mejor ubicarlos al final del blog y no al inicio, es decir, antes de </body> pero, eso es relativo. Por un lado, algunos scripts no pueden colocarse allí sino que deben ir en el head, en todo caso, hay que leer las instrucciones o probar y ver que pasa. Colocarlos al final de nuestra página no ascelera la carga en absoluto, el total es siempre el mismo, sólo lo tenemos ordenado de otra manera; lo que ocurre es parece más rápido; el blog se nos mostrará más o menos armado, podremos leerlo pero la carga continuará y las funciones de esos scripts no estarán disponibles. Además, como muchos de ellos modifican sectores del blog en si mismo lo que se producirá es un efecto de "parpadeo" indeseado. Para esto, no hay una única regla, dependerá de cada caso. Comprimir los scripts ayuda mucho ya que reduce sustancialmente el tamaño de los archivos.
Multimedia:
Las imágenes y los videos son elementos críticos, lo mismo puede decirse de cualquier otro tipo de archivo multimedia. Las imágenes pueden optimizarse, seleccionar el formato adecuado o utilizar miniaturas. En todos los casos, lo ideal es alojarlas en el mismo Blogger y agregar en las etiquetas IMG los atributos width y height.
CSS:
Debe ubicarse al inicio del blog. Lo mejor es tenerlo todo en una sola etiqueta y no tener decenas de etiquetas <style>. Todo lo que está entre <b:skin> y </b:skin> es la hoja de estilo de nuestro blog y es el equivalente de <style> </style>. Incluso así, podemos optimizarlo eliminando datos innecesarios. Cada cada letra, cada espacio, cada caracter que escribimos influye. No es para volverse loco pero es bueno saberlo y deshacerse de lo inútil.
El tema es ¿cómo hacer que el blog cargue más rápido?
Hace un tiempo, en una entrada me preguntaba si el tiempo de carga de un sitio podía afectar su posicionamiento y Blogger responde que sí. Es obvio: la velocidad de carga de un blog es crítica a la hora de atraer lectores y una demora excesiva hace que los visitantes abandonen el intento antes de tener la oportunidad de leer.
Así que veamos lo que sugiere Blogger.
Entradas:
La velocidad puede verse afectada por la cantidad de entradas que se muestran en la página principal. Esto lo definimos en la Configuración | Formato, seleccionado la cantidad de entradas a mostrar y Blogger recomienda un máximo de 10. En lo personal, creo que el número debe ser bastante menor pero depende mucho del contenido. No es lo mismo un blog con textos que otro con videos.
Gadgets:
Blogger dice que la velocidad óptima se logra si sólo se utilizan gadgets o elementos provistos por Google/Blogger. La autopromoción es buena pero lo que afirman es dudoso y no puede aplicarse a cualquier gadget de Google, estas suelen ser lentas, muy lentas a la hora de cargarse. En términos generales, todos los scripts y archivos que se agregan por defecto y sobre los que no tenemos control suelen ser lentos pero no podemos hacer nada sobre eso; es decir, podemos optimizar el blog pero hay un piso mínimo.
Archivos externos:
Si se utilizan scripts en archivos externos, se dice que es mejor ubicarlos al final del blog y no al inicio, es decir, antes de </body> pero, eso es relativo. Por un lado, algunos scripts no pueden colocarse allí sino que deben ir en el head, en todo caso, hay que leer las instrucciones o probar y ver que pasa. Colocarlos al final de nuestra página no ascelera la carga en absoluto, el total es siempre el mismo, sólo lo tenemos ordenado de otra manera; lo que ocurre es parece más rápido; el blog se nos mostrará más o menos armado, podremos leerlo pero la carga continuará y las funciones de esos scripts no estarán disponibles. Además, como muchos de ellos modifican sectores del blog en si mismo lo que se producirá es un efecto de "parpadeo" indeseado. Para esto, no hay una única regla, dependerá de cada caso. Comprimir los scripts ayuda mucho ya que reduce sustancialmente el tamaño de los archivos.
Multimedia:
Las imágenes y los videos son elementos críticos, lo mismo puede decirse de cualquier otro tipo de archivo multimedia. Las imágenes pueden optimizarse, seleccionar el formato adecuado o utilizar miniaturas. En todos los casos, lo ideal es alojarlas en el mismo Blogger y agregar en las etiquetas IMG los atributos width y height.
CSS:
Debe ubicarse al inicio del blog. Lo mejor es tenerlo todo en una sola etiqueta y no tener decenas de etiquetas <style>. Todo lo que está entre <b:skin> y </b:skin> es la hoja de estilo de nuestro blog y es el equivalente de <style> </style>. Incluso así, podemos optimizarlo eliminando datos innecesarios. Cada cada letra, cada espacio, cada caracter que escribimos influye. No es para volverse loco pero es bueno saberlo y deshacerse de lo inútil.
Blogger finaliza su ayuda diciendo algo que es bastante cierto: la parte más importante del blog, aquello que llama la atención de los lectores es lo que debe cargarse con rapidez.
También hablan de Start StopWatch como herramienta para medir el tiempo de carga; no es la única, podemos agregar Pingdom Tools, YSlow que es un agregado de Firebug, WebWait, etc.
Pero ¿qué valor razonable debería mostrarnos? Dicen que un máximo de 10 segundos es lo lógico pero ese valor dependerá de muchas cosas. Primero que nada, de nuestra conexión, del horario, pero también de nuestra PC, del navegador que usemos, de la forma en que se cachean las páginas y como si fuera poco, de la herramienta que usemos para medirlo porque estas herramientas también demoran, hacen cosas diferentes, estan en servidores distintos, ellas mismas pueden ser "lentas" así que aquí empieza lo subjetivo y si le sumamos algo fundamental como nuestros propios gustos o intereses, las reglas de oro dejan de existir y habrá unas cuantas cosas que podemos mejorar y otras que simplemente: no queremos mejorar, nos gustan así y pagamos el precio.
Optimizar significa buscar la mejor manera de realizar una actividad y mejor significa preferible o más conveniente. Como se ve, todo es según el cristal con que se mire y en esto, como en todo, prevalece lo subjetivo porque, aunque no lo parezca, rápido o lento no son valores absolutos sin relativos, algo es más rápido que ... o más lento que ...
Preguntaría, en todo caso: si queremos ver un sitio que nos interesa ¿no esperamos? ¿no tenemos paciencia? ¿10, 20, 30 segundos será mucho? ¿es necesario que recibamos satisfacción instantánea? Al fin de cuentas ¿qué apuro hay?
También hablan de Start StopWatch como herramienta para medir el tiempo de carga; no es la única, podemos agregar Pingdom Tools, YSlow que es un agregado de Firebug, WebWait, etc.
Pero ¿qué valor razonable debería mostrarnos? Dicen que un máximo de 10 segundos es lo lógico pero ese valor dependerá de muchas cosas. Primero que nada, de nuestra conexión, del horario, pero también de nuestra PC, del navegador que usemos, de la forma en que se cachean las páginas y como si fuera poco, de la herramienta que usemos para medirlo porque estas herramientas también demoran, hacen cosas diferentes, estan en servidores distintos, ellas mismas pueden ser "lentas" así que aquí empieza lo subjetivo y si le sumamos algo fundamental como nuestros propios gustos o intereses, las reglas de oro dejan de existir y habrá unas cuantas cosas que podemos mejorar y otras que simplemente: no queremos mejorar, nos gustan así y pagamos el precio.
Optimizar significa buscar la mejor manera de realizar una actividad y mejor significa preferible o más conveniente. Como se ve, todo es según el cristal con que se mire y en esto, como en todo, prevalece lo subjetivo porque, aunque no lo parezca, rápido o lento no son valores absolutos sin relativos, algo es más rápido que ... o más lento que ...
Preguntaría, en todo caso: si queremos ver un sitio que nos interesa ¿no esperamos? ¿no tenemos paciencia? ¿10, 20, 30 segundos será mucho? ¿es necesario que recibamos satisfacción instantánea? Al fin de cuentas ¿qué apuro hay?
El formulario de comentarios (un poco más) |
Aprovechemos la entrada de randomness para poner un poco de orden en el tema del formulario de comentarios incrustado de Blogger.
El primer punto es verificar que el código esté en la plantilla y que sea correcto ya que, desde que comenzaron a implementarlo, Blogger lo ha ido modificando y no todos tenemos la última versión. Abrimos entonces la plantilla y expandimos los artilugios para buscar esta línea:
El primer punto es verificar que el código esté en la plantilla y que sea correcto ya que, desde que comenzaron a implementarlo, Blogger lo ha ido modificando y no todos tenemos la última versión. Abrimos entonces la plantilla y expandimos los artilugios para buscar esta línea:
<b:includable id='comment-form' var='post'>
Lo que debemos tener es esto:
<b:includable id='comment-form' var='post'> <div class='comment-form'> <a name='comment-form'/> <hx id='comment-post-message'><data:postCommentMsg/></hx> <p><data:blogCommentMessage/></p> <data:blogTeamBlogMessage/> <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/> <iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/> <data:post.iframeColorizer/> </div> </b:includable>
donde: hx puede varias y ser H3 o H4 y todo lo señalado con color es lo que se ha agregado en las últimas versiones.
Tanto el formulario como los encabezados de este, se encuentran en un DIV que tiene una clase que es la que controla las propiedades gráficas de este área. Esas propiedades, están definidas por el mismo Blogger pero podemos modificarlas, para esto, necesitamos identificarlo de otra manera, ya sea dándole otro nombre a la clase como propone Fernando en su entrada o cambiando el atributo class por el atributo ID que es lo que hice yo (por casualidad). En ambos casos, el resultado es el mismo y así, las definicones por defecto desaparecen, especialmente una que impide que lo ensanchemos (max-width: 425px). Entonces, cambiamos esta línea:
Tanto el formulario como los encabezados de este, se encuentran en un DIV que tiene una clase que es la que controla las propiedades gráficas de este área. Esas propiedades, están definidas por el mismo Blogger pero podemos modificarlas, para esto, necesitamos identificarlo de otra manera, ya sea dándole otro nombre a la clase como propone Fernando en su entrada o cambiando el atributo class por el atributo ID que es lo que hice yo (por casualidad). En ambos casos, el resultado es el mismo y así, las definicones por defecto desaparecen, especialmente una que impide que lo ensanchemos (max-width: 425px). Entonces, cambiamos esta línea:
<div class='comment-form'>
por esta otra:
<div id='comment-form'>
La siguiente, nos muestra un encabezado con un dato interno llamado data:postCommentMsg y debajo, un párrafo con otro dato llamado data:blogCommentMessage; el primero es el encabezado del formulario que por defecto dice Publicar un comentario en la entrada y el segundo es el texto que nosotros hayamos agregado en la Configuración | Comentarios | Mensaje del formulario de comentarios. Podemos dejarlos o bien eliminar completamente esas líneas y reemplazarlas por cualquier tipo de código HTML.
Debajo, el dato data:blogTeamBlogMessage es un misterio; será para que nos saluden en nuestro cumpleaños.
El IFRAME es el formulario en si mismo, ese COSO que coloca Blogger a su antojo y sobre él, muy poco puede hacerse. Conviene eliminar el ancho y el alto de la etiqueta porque de esa manera, por lo menos, podremos darle un tamaño personal:
Debajo, el dato data:blogTeamBlogMessage es un misterio; será para que nos saluden en nuestro cumpleaños.
El IFRAME es el formulario en si mismo, ese COSO que coloca Blogger a su antojo y sobre él, muy poco puede hacerse. Conviene eliminar el ancho y el alto de la etiqueta porque de esa manera, por lo menos, podremos darle un tamaño personal:
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/>
Un detalle que no comprendo es que, el nuevo modelo dice src=''. Allí, la teoría dice que debe ir una dirección URL y sin embargo, está vacía. En principio, no hay problemas, Blogger agrega esa dirección automáticamente cuando crea la página aunque ... no siempre funciona. Si ocurre eso, conviene reemplazarla por:
expr:src='data:post.commentFormIframeSrc'
Por último, <data:post.iframeColorizer/> agrega un script fundamental que es el que leerá algunas de las características gráficas de nuestro blog para que el formulario se adapte a la plantilla. Son la misma que están definidas en las diferentes variables al inicio de <b:skin> y que establecemos cuando usamos la ventana Diseño | Fuentes y Colores (color de los textos, colro de los enlaces, tipos de fuente y nada más).
Hasta allí, el código; ahora le agregaremos el CSS para modificarlo hasta donde se pueda. Todo, lo agregaremos antes de </b:skin>:
expr:src='data:post.commentFormIframeSrc'
Por último, <data:post.iframeColorizer/> agrega un script fundamental que es el que leerá algunas de las características gráficas de nuestro blog para que el formulario se adapte a la plantilla. Son la misma que están definidas en las diferentes variables al inicio de <b:skin> y que establecemos cuando usamos la ventana Diseño | Fuentes y Colores (color de los textos, colro de los enlaces, tipos de fuente y nada más).
Hasta allí, el código; ahora le agregaremos el CSS para modificarlo hasta donde se pueda. Todo, lo agregaremos antes de </b:skin>:
#comment-form {
clear: both; /* por las dudas, eliminamos las flotaciones */
margin: 0 auto; /* así, lo centramos */
width: valorpx; /* le damos el ancho al rectágulo */
}
#comment-form hx {
/* las propiedades del encabezado */
}
#comment-form p {
/* las propiedades del texto de nuestro mensaje personal */
}
#comment-editor {
height: valorpx; /* la altura el formulario */
overflow: hidden; /* evitamos las barras de desplazamiento */
width: 100%; /* el ancho del formulario en si mismo */
}El ancho del formulario lo ponemos al 100% para que coincida con el ancho del contenedor comment-form pero puede ser otro. La altura del formulario original es de 275 pixeles lo que deja abajo de este, un espacio enorme; conviene probar con valores menores, entre 240 y 260 pixeles.
Cualquier otra propiedad de estilo es aceptable en comment-form, colores o imágenes de fondo, etc. Todas afectarán el área pero no al formulario en si mismo que seguirá siendo blanco. Es decir, podemos personalizar alrededor del TEXTAREA pero no esta ni los botones o el resto de los controles ya que son así y Blogger sabe.
Cualquier otra propiedad de estilo es aceptable en comment-form, colores o imágenes de fondo, etc. Todas afectarán el área pero no al formulario en si mismo que seguirá siendo blanco. Es decir, podemos personalizar alrededor del TEXTAREA pero no esta ni los botones o el resto de los controles ya que son así y Blogger sabe.
In Scale |
Modificando las plantillas (Tutorial 5: Columnas) |
Da la casualidad que, mientras iba armando esta entrada, fueron varias las preguntas sobre el mismo tema y es, sin duda, uno de esos temas aparentemente extraños que parecen causar dolores de cabeza. Se trata de tener un diseño con columnas e igualar sus alturas.
Hace un tiempo, la solución era mostrada en La Bloguería
así que vamos a a usar sus explicaciones y ponerlas en práctica, basándonos en una de las variantes del tutorial anterior.
Allí, se mostraba algo así:
Hace un tiempo, la solución era mostrada en La Bloguería
así que vamos a a usar sus explicaciones y ponerlas en práctica, basándonos en una de las variantes del tutorial anterior.Allí, se mostraba algo así:
Es decir, un blog con tres columnas (sidebar izquierda, posts, sidebar derecha) pero, en realidad, esta soluciòn funcionará con cualquier otro diseño.
¿Cuál es el problema?
Los contenedores (y casi todas la etiquetas) tienen un particularidad, podemos definir su ancho (width) pero cuando queremos definir su altura (height) las cosas se complican porque para calcular esa altura deberíamos conocer su contenido y calcularlo, aunque sea a ojo pero, como los blogs son dinámicos, eso es imposible así que, las columnas tomarán diferentes alturas, unas más cortas, unas más largas; podemos fijarlas pero, en ese caso, o quedarán espacios vacios o parte del contenido quedará oculto o aparecerá una barra de desplazamiento vertical.
¿Cuál es el problema?
Los contenedores (y casi todas la etiquetas) tienen un particularidad, podemos definir su ancho (width) pero cuando queremos definir su altura (height) las cosas se complican porque para calcular esa altura deberíamos conocer su contenido y calcularlo, aunque sea a ojo pero, como los blogs son dinámicos, eso es imposible así que, las columnas tomarán diferentes alturas, unas más cortas, unas más largas; podemos fijarlas pero, en ese caso, o quedarán espacios vacios o parte del contenido quedará oculto o aparecerá una barra de desplazamiento vertical.
Si utilizamos una plantilla sin fondos ni bordes, es un tema irrelevante pero si los tenemos, el efecto de las columnas desiguales puede molestarnos.
Entonces, ¿cómo crear columnas de la misma altura sin que importe el contenido de estas?
Como dice Vane, hay soluciones varias y para todos los gustos:
Entonces, ¿cómo crear columnas de la misma altura sin que importe el contenido de estas?
Como dice Vane, hay soluciones varias y para todos los gustos:
- crear columnas falsas utilizando imágenes tiene la desventaja de requerir de esas imágenes extras
- establecer la propiedad height al 100% no funciona en todos los navegadores
- utilizar JavaScript tiene resultados dudosos y claro, no funcioanrá si JavaScript está deshabilitado.
Así que vamos con el cuarto método que me parece más efectivo y para aplicarlo, sólo requerimos agregar unas pocas propiedades CSS.
Buscaremos cada una de las definiciones de las columnas y a todas ellas les agregaremos un padding (un relleno) de un valor muy alto, el máximo posible (32768 pixeles) y eso creará columnas larguísimas y para compensar esta locura, le agregaremos un margen negativo inverso:
padding-bottom: 32768px;
margin-bottom: -32768px;
Para que estos desarreglos se oculten, el contendor principla tendrá que incluir la propiedad overflow: hidden. En el ejemplo, estas serían las definiciones de estilo:
Buscaremos cada una de las definiciones de las columnas y a todas ellas les agregaremos un padding (un relleno) de un valor muy alto, el máximo posible (32768 pixeles) y eso creará columnas larguísimas y para compensar esta locura, le agregaremos un margen negativo inverso:
padding-bottom: 32768px;
margin-bottom: -32768px;
Para que estos desarreglos se oculten, el contendor principla tendrá que incluir la propiedad overflow: hidden. En el ejemplo, estas serían las definiciones de estilo:
#sidebar-wrapper1 { /* la sidebar izquierda */
background-color: aliceBlue; /* un color para el ejemplo */
float: left;
margin: 0; /* poner a cero */
overflow: hidden;
padding-bottom: 32768px;
width: 190px;
word-wrap: break-word;
margin-bottom: -32768px;
padding-bottom: 32768px;
}
#main-wrapper { /* el área de posts */
background-color: aliceBlue; /* un color para el ejemplo */
float: left;
margin: 0 10px;
overflow: hidden;
width: 560px;
margin-bottom: -32768px;
padding-bottom: 32768px;
}
#sidebar-wrapper2 { /* la sidebar derecha */
background-color: aliceBlue; /* un color para el ejemplo */
float: left;
margin: 0; /* poner a cero */
overflow: hidden;
width: 190px;
word-wrap: break-word;
margin-bottom: -32768px;
padding-bottom: 32768px;
}
#content-wrapper {
overflow: hidden;
}Lo prudente sería que, primero, coloquemos los márgenes en cero y luego aplicáramos los márgenes gigantes a todas las columnas que tengamos.
Eso es todo, con estos pequeños cambios, no debería haber problemas en igualar la longitud de las columnas.
Eso es todo, con estos pequeños cambios, no debería haber problemas en igualar la longitud de las columnas.
REFERENCIAS:
Si el PageRank cantara |
