compartidísimo

Cómo eliminar, cambiar o agregar una etiqueta en varias entradas a la vez, en la nueva interfaz de Blogger

noreply@blogger.com (Karla Castañeda) — Sat, 26 May 2012 00:10:00 +0000

Hace tiempo hablábamos de las etiquetas de Blogger. Es un post algo antiguo, todavía no teníamos la nueva interfaz, por lo tanto, algunas cosas ya no son iguales, por ejemplo, la forma en que podemos editar una etiqueta en varias entradas simultáneamente, cosa que hoy veremos cómo hacer.

La verdad es que las opciones ahora son más limitadas (en lo que respecta a esta característica), a diferencia de la interfaz anterior, ya que como posiblemente recordarás, ahí podías seleccionar una etiqueta, y te mostraba todas las entradas que tenían dicha etiqueta, para luego agregar una nueva, cambiarle el nombre, o eliminarla. Era verdaderamente práctico.

En fin, la cosa tampoco está tan mal como para deprimirnos, sólo que habrá que trabajar un poco más en algunos casos.

Cómo eliminar determinada etiqueta en todas las entradas

Ejemplo. Vamos a pensar que en ciertas entradas, tienes la etiqueta Arañas voladoras, y que quieres eliminar esa etiqueta.

Para lograrlo, estando en Entradas | Todas de las opciones del panel, tendrías que marcar la casilla de cada entrada que contenga dicha etiqueta "una a una", luego acceder al menú desplegable, y hacer click sobre Arañas voladoras, al hacerlo, se habrá eliminado dicha etiqueta de las entradas que "seleccionaste".

Pero, ¿te imaginas si tienes cientos de entradas y sólo algunas de ellas tienen la etiqueta que quieres eliminar?, ¡uf!, tendrías que revisar una por una, y marcar la casilla de las entradas que tengan la susodicha etiqueta...pero, ¡no te preocupes!, la buena noticia es que puedes hacerlo más rápido, sólo sigue estos pasos ;)

Truco para evitar marcar la casilla de cada entrada que tiene la etiqueta que quieres eliminar, cuando sólo algunas de las entradas tienen dicha etiqueta.

Paso 1. Estando en Entradas | Todas, selecciona todas las entradas marcando la casilla correspondiente:

Paso 2. Una vez seleccionadas "todas la entradas", haz click en el menú desplegable que tiene el icono de etiqueta, y luego, haz click sobre el nombre de la etiqueta que te interesa eliminar, que en nuestro ejemplo sería Arañas voladoras, como se aprecia en la imagen:

Paso 3. Hecho esto, todas las entradas tendrán la etiqueta Arañas voladoras. Ahora, sólo tenemos que eliminarla, y para ello, estando seleccionadas "todas las entradas", abre de nuevo el menú desplegable con el icono de etiqueta, y otra vez, haces click sobre el nombre de la etiqueta que quieres eliminar. Hecho esto, habrás eliminado la etiqueta, que en nuestro ejemplo es Arañas voladoras, en todas las entradas.

En resumen, primero agregamos la etiqueta que queremos eliminar a "todas las entradas" para que se agregue sólo a las las entradas que no la tienen, luego eliminamos la etiqueta en todas las entradas. De ese modo, no la seleccionamos una a una. Espero explicarme y si no me dices ;)

Cómo editar una etiqueta (cambiarle el nombre)

Aquí la cosa se complica un poco, (te tomará más tiempo) ya que no es posible seleccionar determinada etiqueta, para que aparezcan todas las entradas que tienen dicha etiqueta, como lo hacíamos en la interfaz anterior. Pero bueno, por lo menos, no tendremos que editar la etiqueta una a una desde el panel de edición de entradas, lo cual ya es ganancia.

Ejemplo. Vamos a pensar que tenemos la etiqueta Arañas voladoras, en ciertas entradas y la queremos cambiar por "Arañas" en todas esas entradas.

Como hacerlo paso a paso

Paso 1. Primero, estando en Entradas | Todas, de nuestro panel, seleccionamos las entradas que tengan la etiqueta que queremos cambiar, una a una. En nuestro ejemplo es "Arañas voladoras"

Paso 2. Luego, despliegas el menú que tiene el icono de etiqueta, y seleccionas la opción de "Etiqueta nueva", y escribes el nombre nuevo de la etiqueta, que en nuestro ejemplo sería "Arañas", luego, haces click en "Aceptar" para que se aplique el cambio...

Hasta ahí, ya agregamos el nuevo nombre para la etiqueta que queremos cambiar, es decir, hemos agregado la etiqueta "Arañas", a las entradas que seleccionamos. Ahora sólo falta eliminar el nombre que ya no queremos, y que en nuestro ejemplo es "Arañas voladoras".

Paso 3. Hecho el paso anterior, las entradas seguirán seleccionadas, es decir, la casilla estará marcada en esas entradas. Entonces, desplegamos de nuevo el menú con el icono de etiqueta, y hacemos click en el nombre de la etiqueta que estamos cambiando, que en nuestro ejemplo sería "Arañas voladoras". Hecho eso, habremos eliminado la etiqueta.

¡Listo!, hemos cambiado la etiqueta "Arañas voladoras" por "Arañas".

En resumen, primero seleccionas las entradas con la etiqueta que quieres cambiar, luego les pones el nombre de la nueva etiqueta, finalmente, eliminas la etiqueta que estás editando.

Cómo agregar una etiqueta nueva a determinadas entradas

Paso 1. Estando en Entradas | Todas de las opciones del panel, seleccionas una a una las entradas a las que quieres agregar la etiqueta.

Paso 2. Despliegas el menú con el icono de etiqueta, y seleccionas la opción de "Etiqueta nueva".

Paso 3. Escribes el nombre de la nueva y haces click en Aceptar para que se aplique el cambio.

Hecho esto habrás agregado una nueva etiqueta a las entradas que seleccionaste.

Ignoro si Blogger vaya a hacer cambios, o vayan a dejar las cosas así, hasta la fecha, no han actualizado la publicación que explica cómo editar las etiquetas en las entradas tal vez sea porque todavía no está muy bien definido como va a quedar (tal vez estoy delirando), o simplemente en eso andan...quien sabe.

Espero sea útil y cualquier cosa no dudes en comentarla ;)

Tecnología del Amor

noreply@blogger.com (Karla Castañeda) — Tue, 22 May 2012 18:00:00 +0000

Posiblemente, alguna vez has experimentado algún tipo de sentimientos como angustia, frustración y soledad. En contraste a todo ese gris panorama, afortunadamente, también somos capaces de experimentar sentimientos positivos y lo más interesante, es que podemos producirlos.

Navegando por la red, encontré una publicación maravillosa del Dr. Marco Eduardo Marueta Reyes, titulada "Tecnología del amor", que habla de ciertas técnicas para producir amor intencionalmente. Sí, así es, producir amor, abarcando sentimientos como estimación, amistad, amor filial y sexual, como lo explican. ¿Interesante verdad?, creo que vale la pena difundirlo, digerirlo y practicarlo :)

Tecnología del amor

El amor, más que el desamor, es lo que hace a la historia.

Sin duda, el amor es lo que mueve al mundo y es lo que da significado a cada uno de los esfuerzos personales. Sin embargo, este sentimiento escasea cada vez más y en su lugar aumentan la soledad, las frustraciones, los rencores, la apatía y la violencia.

El amor es un fenómeno tan natural como la lluvia o como el hervir del agua a 100 grados centígrados. Un fenómeno se produce cuando ocurren un conjunto de factores que lo generan, que lo causan.

La técnica, es la capacidad para hacer ocurrir el conjunto necesario de factores para producir un fenómeno. Una técnica es un procedimiento específico cuyo resultado se conoce de antemano. Por ejemplo, si calentamos el agua en estado líquido hasta los cien grados centígrados, sabemos que se convertirá en vapor poco a poco. Se habla de tecnología cuando se articulan un conjunto de técnicas para lograr un producto complejo.

¿Se puede producir intencionalmente el amor? Sí, haciendo ocurrir los factores que lo causan. En la teoría de la praxis se define al amor como el sentir propio de lo que le sucede a otro o a otros.
A través de diversas investigaciones se ha logrado establecer cuáles son los elementos que producen dicha identificación amorosa, independientemente de la voluntad de los participantes. Es importante aclarar que nos referimos al “amor” en forma general abarcando sentimientos como “estimación”, “amistad”, “amor filial”, “amor sexual”. El sentimiento amoroso será mayor conforme más intensidad, duración y frecuencia tenga cada uno de los ingredientes que a continuación exponemos.

1. Reconocimiento. Este factor consiste en expresar o hacer saber los aspectos que agradan de sí mismo y de otra(s) persona(s), así como saber cuáles rasgos propios personales o de grupo son agradables para otra(s) persona(s).

2. Con-vivencia. Un elemento básico para la producción del amor consiste en tener vivencias conjuntas como las siguientes: jugar, comer o beber (¡en sentido amplio!) juntos compartir eventos como fiestas, cine, teatro, música, viajes, lecturas, etc. reír juntos, esparcimiento compartido.

3. Generación de experiencias agradables especiales. Quien propicia experiencias que resultan agradables para otro se integra positivamente en forma simbólica en la identidad del segundo, sobre todo en la medida en que esas vivencias generadas son poco comunes. Esto abarca desde la misma imagen personal, los “detalles”, las sorpresas agradables, los regalos, la risa, los placeres físicos, la poesía, la fantasía, entre muchas otras posibilidades que inducen la emoción amorosa.

4. Contacto físico agradable. Este aspecto es clave para determinar los niveles de profundización amorosa (amistad, relación filial, amor sexual). Abarca desde la mirada, el saludo de mano, la palmada en el hombro, el abrazo, tomarse del brazo, tomarse de la mano, los besos en la mejilla, los besos en la boca, hasta las relaciones sexuales propiamente dichas, entre muchas otras variantes.

5. Co-operación. Es fuente de enamoramiento hacer cosas en las que cada quien colabora voluntariamente para lograr un resultado único. Desde mover un mueble entre dos o más personas hasta juegos o trabajos en equipo de diferente índole, complejidad y duración. El apoyo de uno en el otro es una forma especial de co- operación mayores alcances afectivos.

6. Creatividad compartida. Generar conjuntamente cosas interesantes o estéticas que antes no existían; por ejemplo, el decorado de la casa, un invento, una obra artística, un libro, la formación de un hijo, un descubrimiento, una empresa, una institución, etc. Los productos creados conjuntamente se convierten en símbolos de identificación amorosa.

7. Éxito compartido. La sensación de haber alcanzado una meta importante mediante esfuerzos combinados de los participantes produce un alto grado de emoción satisfactoria que integra a los otros en la simbolización de cada uno.

8. Narrativa de vida. Platicar las vivencias cotidianas y las anécdotas o recuerdos anteriores, así como escuchar con atención lo que le ha ocurrido a otro(s) es fuente de comprensión e identificación progresiva, siempre y cuando lo narrado no sea emocionalmente agresivo para el que escucha. El que narra entrega parte de sí mismo a quien lo escucha. Este vive imaginariamente las emociones que genera la narración e incorpora a su ser esa experiencia del otro.

9. Competencia externa. La cohesión de una pareja o grupo requiere de que esta unidad se contraste con otras similares. En la medida en que esta comparación externa falta es más probable que afloren diferencias internas en el grupo o pareja. Se sugiere una competencia sana, positiva; es decir, competir en equipo por SER MEJORES en los aspectos que se consideren relevantes. NO competir por SER MENOS MALOS, o poner “zancadillas” para que otros grupos o parejas no se desarrollen, como acostumbran quienes se sienten frustrados por NO SER ya y sin esfuerzo lo que quisieran.

Con una dosis combinada y progresiva de los elementos mencionados se producen procesos de identificación amorosa de alta intensidad que pueden traducirse en un estado continuo de frenesí. Como todo fenómeno, si cesan los factores que lo producen también el fenómeno desaparece. Es decir, el amor requiere ser cultivado para no dejarlo morir de inanición. Cuando el amor no se cultiva surgen la soledad, la frustración, la agresividad, el desprecio, los chantajes, los reproches, etc. Entonces se cultiva sin saberlo el odio, la apatía, la violencia, la destrucción de la vida, es decir, la DESTRUCCION DE SI MISMO.

En el amor está la esencia de los seres humanos y es la base de la salud mental. La COMUNIÓN significa la integración amorosa de cada individuo con las colectividades en que participa (la pareja, la familia, los amigos, el grupo de trabajo, la comunidad, la patria, la humanidad), y por tanto con todo el universo.

Vale la pena intentarlo.

Fuente| AMAPSI

4 Formas sencillas y muy útiles de manipular textos en tu blog + Ejemplos

noreply@blogger.com (Karla Castañeda) — Mon, 14 May 2012 02:04:00 +0000

Anteriormente hablábamos de como separar las lineas de los textos, o dicho más técnicamente, definir la altura de linea en los textos, buscando que nuestro blog sea cómodo de leer. También habíamos hablado de cómo alinear textos, como el titulo del blog, y otras secciones de la plantilla. Hoy veremos otras cuatro formas de manipular textos en tu blog, que seguramente te resultarán muy útiles al momento de personalizarlo.

Por fortuna, si quieres manipular el texto de alguna de estas formas, no necesitarás ingresar a la Edición de HTML de la plantilla, ya que sólo usaremos CSS, el cual agregarás desde el diseñador de plantillas. Ok, suena bien, ¿verdad?, pues entonces veamos de qué se trata...

1. Separar las letras de los textos

Podemos manipular la separación de las letras, o dicho de otro modo, controlar el espacio entre cada caracter de un texto, si usamos una propiedad de CSS llamada letter-spacing. Esta propiedad es soportada por la mayoría de navegadores, por lo que no tendremos problemas a la hora de usarla. Excepto por el detalle de que el queridísimo IE7 (Internet Explorer 7) no soporta el valor "inherit", aunque esto no supone un problema, ya que rara vez necesitaremos usar ese valor.

Al usarla, primero escribimos la propiedad, luego el valor, como se muestra a continuación

letter-spacing: 1px;

Valores
Por defecto, el valor de esta propiedad es normal, así que si no la especificas en los textos de la plantilla, o lo defines como normal, el navegador se encargará de separar las letras, como mejor lo crea conveniente.

Por ejemplo, es siguiente texto tiene un valor normal:

Name libero tempore, cum soluta nobis est eligendi optio cumque nihi impedit quo minus id.

Mientras que este otro usa un valor de 1 pixel (1px)

Name libero tempore, cum soluta nobis est eligendi optio cumque nihi impedit quo minus id.

El texto luce diferente ¿verdad?, en el último caso, lucen más separadas las letras del texto. Además de poder usar el valor normal y valores con unidades de pixeles(px), también podemos usar el resto de unidades de medida, como puntos (pt), centímetros(cm), incluso está permitido usar valores negativos. ¿Quieres jugar con otros valores viendo los resultados?, entonces ve y juega con ellos.

Usos
Esta propiedad es muy útil, cuando queremos separar las letras de los textos al crear efectos como sombras (textos que se ven dobles por ejemplo) en los titulares ya sea el titulo del blog, títulos de los posts, o de las columnas laterales, para conseguir que el efecto luzca bien.

Cómo aplicarla
Tenemos que averiguar cómo está identificada la parte de la plantilla en donde queremos usar dicha propiedad. Para saberlo, estando en el blog, ponemos el puntero del ratón encima de la sección donde lo queremos aplicar, hacemos click en el botón derecho del mouse, y seleccionamos la opción de "Inspeccionar elemento". Esta opción se encuentra disponible en el navegador Chrome y también en Firefox 10 y versiones siguientes.

Por ejemplo, supongamos que la queremos aplicar al titulo del blog, entonces, nos ubicamos sobre la sección e inspeccionamos el elemento, para saber como está identificado el título, y como vemos en la siguiente imagen, está identificado como: "h1.title"

Por lo tanto, usaremos esta pequeña linea de código para separar las letras del título:

h1.title{letter-spacing: 1px;}

Y que como te mencionaba, el CSS que creamos, lo puedes poner desde el diseñador de plantillas, yendo a Plantilla > Personalizar > Avanzado > Añadir CSS y ponerlo en el campo.

2. Separar las palabras en los textos

¿Alguna vez te has preguntado si es posible controlar el espacio entre las palabras de los textos en el blog?, pues la respuesta es sí, y lo podemos conseguir gracias a una propiedad de CSS llamada: word-spacing. Dicha propiedad también es soportada por la mayoría de navegadores, aunque el valor inherit, no es soportado por IE7, lo que no representa un gran problema ya que rara vez necesitaremos usar ese valor.

Al usarla, primero escribimos la propiedad, luego el valor, como se muestra a continuación

word-spacing: 2px;

Valores
Por defecto, el valor es normal, si no la especificas en los textos de la plantilla, o lo defines como normal, el navegador se encargará de dar el espacio entre las palabras del texto, que considere mejor.

Por ejemplo, es siguiente texto tiene un valor normal:

Name libero tempore, cum soluta nobis est eligendi optio cumque nihi impedit quo minus id.

Mientras que este otro usa un valor de 3 pixeles (3px)

Name libero tempore, cum soluta nobis est eligendi optio cumque nihi impedit quo minus id.

Las palabras ahora se ven más separadas ¿verdad? Además del valor normal y en pixeles, también podemos usar el resto de las unidades de medida como puntos (pt), centímetros(cm), etc, y está permitido usar valores negativos. ¿Quieres jugar con otros valores viendo los resultados?, entonces ve y juega con ellos.

Cómo aplicarla
Tenemos que averiguar cómo está identificada la parte de la plantilla en donde queremos usar dicha propiedad. Para saberlo, estando en el blog, ponemos el puntero del ratón encima de la sección donde lo queremos aplicar, hacemos click en el botón derecho del mouse, y seleccionamos la opción de "Inspeccionar elemento". Esta opción se encuentra disponible en el navegador "Chrome" o bien, en Firefox 10 y versiones siguientes.

Por ejemplo, suponiendo que la queremos aplicar en los títulos de los posts, entonces, nos ubicamos sobre la sección e inspeccionamos el elemento, y como vemos en la siguiente imagen:

Como podemos ver, la etiqueta h2 del título, tiene dos clases, (post-title y entry title), bastará con usar una. Por lo tanto, usaremos esta pequeña linea de código CSS para separar las palabras del título:

h2.post-title{word-spacing: 2px;}

Y la agregaremos desde el diseñador de plantillas, yendo a Plantilla > Personalizar > Avanzado > Añadir CSS y lo ponemos en el campo.

3. Decorar textos

Cuando se habla de decorar textos, tal vez nos imaginemos ponerles maripositas o corazonsitos, como fondo, etc, bueno, tal vez ese sea un "sentido que se le da a la palabra" aunque en realidad, cuando se habla de decorar textos en el CSS, se refiere a aplicar la decoración que tendrán los textos, si usamos la propiedad llamada text-decoration, y usando estos cinco tipos de decoración o valores:

underline Este valor, o tipo de decoración, permite subrayar el texto.

Ejemplo:

p {text-decoration: underline;}

Y el resultado sería este:

Name libero tempore, cum soluta nobis est eligendi optio cumque nihi impedit quo minus id.

overline Este valor nos permite subrayar el texto, pero, en la parte superior de éste.

Ejemplo:

p{text-decoration: overline;}

Y el resultado sería este:

Name libero tempore, cum soluta nobis est eligendi optio cumque nihi impedit quo minus id.

line-trough este valor nos permite tachar los textos.

Ejemplo:

p{text-decoration: line-trough;}

Y el resultado sería este:

Name libero tempore, cum soluta nobis est eligendi optio cumque nihi impedit quo minus id.

blink Esta propiedad hace que el texto parpadee de forma alterna, aunque está muy limitado su uso ya que sólo es soportada por Firefox.

Ejemplo:

p{text-decoration: blink;}

Y el resultado sería este:

Name libero tempore, cum soluta nobis est eligendi optio cumque nihi impedit quo minus id.

none Este valor hace que el elemento al que se aplique no lleve ninguna decoración, lo que resulta muy útil para evitar que se herede esta propiedad, por ejemplo cuando se especifica el subrayado de texto a todos los enlaces de la plantilla, y se desea que el subrayado no se aplique en determinados enlaces.

Cómo aplicar la propiedad text-decoration

Tendrás que averiguar como está identificada la parte de la plantilla donde quieres usar la propiedad. Para saberlo, vas al blog, y pones el puntero del ratón encima de la sección donde la quieres aplicar, haces click en el botón derecho del mouse, y seleccionas la opción que dice "Inspeccionar elemento". Esta opción se encuentra disponible en el navegador "Chrome" y en Firefox 10 y versiones siguientes.

Ejemplo
Vamos a suponer que quiero subrayar los enlaces de una lista de enlaces y como ejemplo usaré el Blogroll de mi blog. Ya sabemos que vamos a usar la propiedad: text-decoration, con el valor: underline, para que se subrayen los enlaces. Lo que falta es identificar ID y las etiquetas comprometidas en el widget, para crear la regla de estilo o nuestro CSS.

Inspeccionando el elemento, podemos ver que el ID del widget es HTML3, más abajo, vemos la etiqueta ul, y luego la li, (es una lista), después esta la etiqueta a, conteniendo el texto del enlace. Por lo tanto la regla de estilo que necesitamos para que aplieque el subrayado en los enlaces de ese widget es esta:

#HTML3 ul li a {
text-decoration: underline;
}

Si te fijas, omitimos la clase widget-content que ves en la imagen. Ya que no se necesita pues tenemos el ID que identifica al widget. Parece difícil pero con la práctica vas entendiendo cada vez más, ya lo veras ;)

4. Transformar los textos en mayúsculas, o minúsculas, etc

Usando una propiedad llamada text-transform, podemos hacer que determinado texto siempre se muestre en mayúsculas, o lograr que sólo la primera letra de cada palabra aparezca en mayúscula, o también, que el texto se vea en minúsculas y todo esto dependerá del valor que usemos en dicha propiedad.

Valores

capitalize Esta valor, aplicado a un texto, hace que éste muestre en mayúscula la primera letra de cada palabra.

Ejemplo:

Name libero tempore, cum soluta nobis est eligendi optio cumque nihi impedit quo minus id.

uppercase Este valor hace todo el texto se muestre en mayúsculas, independientemente de cómo este escrito de forma nativa.

Ejemplo:

Name Libero Tempore, Cum Soluta Nobis Est Eligendi Optio Cumque Nihi Impedit Quo Minus Id.

lowercase Este valor, hace que un texto se vea en minúsculas, independientemente de cómo este escrito de forma nativa.

Ejemplo:

NAMe LIBERO TEMPORE, CUM SOLUTA NOBIS EST ELIGENDI OPTIO CUMQUE NIHI IMPEDIT QUO MINUS ID.

none Este valor hace que no se aplique ningún tipo de transformación en el texto, y puede resultar muy útil para evitar que se herede esta propiedad, por ejemplo cuando se especifica algún tipo de transformación en el texto en todos los enlaces de la plantilla, y se desea que no se aplique en determinados enlaces.

¿Quieres ver por ti mismo las diferencias en un texto usando los distintos valores de la propiedad text-transform?, no esperes más y compruébalo

Usos de la propiedad text-transform

Generalmente se usa en los titulares como el título del blog, los títulos de la columna lateral, el título del post, etc, con el fin de resaltar o diferenciar el texto visualmente con el resto del contenido.

Cómo aplicar la propiedad text-transform

Como ya lo he venido repitiendo en cada caso, tendrás que averiguar cómo está identificada la parte de la plantilla donde quieres usar la propiedad. Para saberlo, vas al blog, y pones el puntero del ratón encima de la sección donde la quieres aplicar, haces click en el botón derecho del mouse, y seleccionas la opción de "Inspeccionar elemento". Esta opción se encuentra disponible en "Chrome" o bien, en Firefox 10 y versiones siguientes.

Ejemplo

Vamos a pensar que quieres hacer que el texto de lo títulos de los posts aparezcan en mayúsculas, sabemos que vamos a usar la propiedad text-transform, con el valor uppercase, entoces, inspeccionamos el titulo, para saber como esta identificado y así crear nuestra regla de estilo...

Como podemos ver, la etiqueta h2 del título, tiene dos clases, (post-title y entry title), bastará con usar una. Por lo tanto, usaremos esta pequeña linea de código CSS para que los titulos de los textos siempre se muestren en mayúscula:

h2.post-title{text-transform: uppercase;}

Este CSS lo agregaremos desde el "Diseñador de plantillas", en la sección de "Avanzado", usando la opción de "Añadir CSS". ¡Y listo!, ya habremos logrado que el título de los posts se muestren con mayúscula.

Nota: en todos los ejemplos uso mi blog.

+ información sobre las propiedades
letter-spacing
word-spacing
text-decoration
text-transform

¿Son malos los enlaces recíprocos?

noreply@blogger.com (Karla Castañeda) — Sun, 13 May 2012 19:06:00 +0000

Seguramente hayas visto que algunos sitios ofrecen intercambio de enlaces, es una práctica algo común en la blogosfera, sobre todo en aquellos blogs que empiezan y desean traer visitas al blog.

Enlaces de calidad hacia nuestras páginas, obtenidos de forma natural, definitivamente pueden traernos más visitas al blog, por otro lado, tener en nuestro blog decenas o cientos de enlaces de páginas que no tienen nada que ver con la temática del blog y que tenemos como resultado del intercambio de enlaces, sí podrían representar un problema para nuestro sitio. Precisamente en este vídeo, Matt Cutts que forma parte del equipo de Google, nos explica cuál es el problema de los enlaces recíprocos (disponible con subtítulos en español).

Traducción de "¿Son malos los enlaces recíprocos?"

Linda de Lakewood, de Nueva Jersey, pregunta: "Si tengo tres sitios web, ¿puede suponer un problema crear enlaces recíprocos entre ellos?"

En realidad, tres sitios web no son demasiados. Pero, antes de empezar, me gustaría preguntarte si esos sitios web están relacionados entre sí de algún modo, ya que si uno de los sitios web trata de secadoras, otro de arte antiguo y otro, por ejemplo, de opiniones sobre teléfonos móviles, va a resultar un poco extraño desplazarse a la parte inferior de la página y pensar "un momento, ¿este sitio no trataba de viñetas cómicas?" Ya sabes, se supone que estás en una página de viñetas cómicas y, de repente, al llegar a la parte inferior, te encuentras con seguros de coches y con mesas de café que no tienen nada que ver con ese sitio. Por tanto, deberías preguntarte si eso resulta relevante.

Tres sitios no son demasiados. No es lo mismo que hablar de 30 sitios o de 300, lo que sí que supondría un gran problema que haría pensar a un competidor o a un usuario medio que accediera a la página "¿por qué están enlazados todos estos sitios diferentes y qué relación guardan entre sí?"

Lo ideal es enlazar, por ejemplo, una página de ropa de hombre, un sitio de ropa de mujer y un sitio de ropa infantil, en caso de que su contenido sea relevante. Por tanto, si los sitios pertenecen a la misma empresa, existe un buen motivo para enlazarlos, por lo que no creo que esto suponga ningún problema, ya que el número de sitios web que se van a enlazar es relativamente pequeño. Aun así, ten en cuenta que si este número aumenta y tienes una gran cantidad de enlaces en la parte inferior del sitio, muchos usuarios habituales optarán por abandonar el sitio, y muchos competidores pensarán, "¿por qué este usuario ha enlazado entre sí cada uno de los sitios?"

Una buena forma de saber cómo se ve tu sitio, es mostrárselo a una persona habitual de la calle y, si se queda mirando un tanto extrañada, sabrás que te has excedido un poco en el uso de enlaces recíprocos.

Via: Blog de Webmsters de Google

Instalar Google Analytics desde el panel de Blogger en cualquier plantilla

noreply@blogger.com (Karla Castañeda) — Mon, 07 May 2012 18:25:00 +0000

Conocer de que lugares visitan nuestro blog, que entradas son las más visitadas, que resoluciones de pantalla y navegadores utilizan los usuarios de nuestro sitio, nos puede ayudar por un lado a decidir que artículos nuevos publicar porque supondrían un mayor interés, y por otro, a mejorar el diseño de nuestro blog.

Todos esos datos y muchos más, los podemos obtener gracias a Google Analytics, que es una herramienta muy completa propiedad de Google, que nos permite conocer las estadísticas de nuestro sitio.

Probablemente, si eres veterano en Blogger ya utilices el servicio, pero, si recién empiezas a usar Blogger, y no usas ninguna herramienta o servicio de estadísticas excepto por el que Blogger tiene integrado en el panel, seguramente estarás interesado en conocer más sobre tu audiencia para mejorar tu sitio.

Cómo empezar a usar Google Analytics

Siempre ha sido posible usar Google Analytics en nuestro blog, abriendo una cuenta en éste y poniendo el código de seguimiento en nuestra plantilla. Sin embargo, Blogger, buscando facilitarnos más las cosas, agregó la opción en el panel, para que nosotros sólo pongamos el ID de propiedad web, que en un momento veremos como conseguir.

Instalar Google Analytis en plantillas de Blogger que no han sido modificadas

1. De no tener cuenta en Google Analytics abre una y agrega tu blog.

2. Obtén el ID de propiedad web de Google Analytics. Se puede conseguir de varias formas, y esta es una: Estando en Google Analytics en la página del blog en cuestión, vas a la primer pestaña donde viene tu dirección web, la despliegas, y copias la numeración que aparece a un lado de la dirección del blog y que tiene este formato:
UA-XXXXX-Y o UA-XXXXX-YY, como se aprecia en la siguiente imagen.

Nota: si ya tienes cuenta de Google Analytics al acceder a la página principal, verás el ID de propiedad web a un lado de la dirección de tu blog.

3. Desde el panel de Blogger de tu blog, vas a Configuración > Otros y abajo, en la opción que dice: Google Analytics pones el ID de propiedad web, como puedes ver en la imagen:

4. Guardas los cambios y listo, ya podrás obtener información sobre tus visitas en Google Analytics, así de fácil y rápido ;)

Instalar Google Analytics en plantillas de Blogger que han sido modificadas

Si utilizas plantillas que han sido muy modificadas, puede ser que la linea de código que Blogger agrega para que funcionen las estadísticas en Google Analytics, no aparezca en la plantilla, y aunque agregues el ID de propiedad web correctamente no funcionarán las estadísticas, es decir, no se recibirán datos en Google Analytics sobre tus visitas (a mi me pasó).

Para resolver esto, tendrás que ir a la edición de HTML de tu plantilla, y buscar </body> y poner "antes" esto:

<b:include data='blog' name='google-analytics'/>

Esa pequeña linea genera el script (el código de seguimiento) para que se envíen los datos sobre las estadísticas de tu blog a Google Analytics. Es así como se muestra en las plantillas sin modificar, de ahí lo extraje.

Una vez hecho eso, tendrás que añadir el ID de propiedad web de Google Analytics en la opción correspondiente, y para ello, harás lo que dice arriba en los pasos ;)

Notas adicionales

Las vistas dinámicas también soportan Google Analytics

Conclusiones
Conocer más a nuestra audiencia resulta muy útil ya que nos ayuda a mejorar nuestro blog, por ello no dudemos en usar un servicio de estadísticas completo y que mejor que usar Google Analytics que podemos instalar muy fácilmente desde el panel de Blogger; y tú ¿qué servicio de estadísticas usas en tu blog?

Cómo Importar o Exportar un Blog en Blogger

noreply@blogger.com (Karla Castañeda) — Mon, 07 May 2012 01:27:00 +0000

Blogger nos permite importar o exportar un blog, siguiendo unos simples pasos. A continuación veremos cómo importar o exportar un blog.

Exportar un blog de Blogger

Exportar un blog, quiere decir que guardarás una copia de las entradas y los comentarios de dicho blog. Al exportarlo guardarás el contenido de tu blog en un archivo en formato XML. Dicho archivo lo podrás guardar en el disco duro de tu computadora y también, si deseas, podrás almacenarlo en un servicio de alojamiento de archivos como medida de seguridad, por ejemplo en Google Drive.

¿Por qué puede ser bueno exportar tu blog?

Exportar un blog garantiza de cierto modo la existencia de tu contenido, nada es seguro en la vida pero tomando alguna medidas podemos evitar perder nuestro contenido si por ejemplo:

Nuestro blog fuera eliminado por alguna razón.
Nuestro contenido o parte de éste desapareciera por alguna actualización en el sistema de Blogger o algún tipo de fallo irreversible. Es muy remota la posibilidad pero ya una vez desaparecieron algunas entradas y comentarios al darse mantenimiento al servicio ¿te acuerdas?
Lo elimináramos y al cabo de unos meses o años cambiáramos de opinión y quisiéramos recuperar el contenido del mismo, etc.

En ese sentido, tendríamos que estar actualizando nuestro archivo constantemente, pero creo que vale la pena, ya que nuestro contenido estará almacenado en otros sitios y por ende estará más seguro.

Evidentemente, si quieres enviar el contenido de un blog a otro, deberás exportar el blog, para guardar una copia del contenido, y luego importarlo a otro blog.

¿Cómo exportar un blog en Blogger?

1. Sólo tienes que ir a Configuración > Otros y en la opción de Herramientas de Blog, hacer click en "Exportar blog".

2. Haces click en descargar blog, y lo habrás descargado.

3. Guarda el archivo (xml) en una carpeta de tu computadora. Asegúrate de ponerle un nombre que te permita identificarlo fácilmente ;)

¿Habrá algún tipo de cambio en el blog al momento de exportarlo?

No. Al Explotar un blog simplemente guardas una copia del contenido de tu blog, éste no será eliminado del panel ni de Blogger.

Importar un blog en Blogger

Importar un blog en blogger quiere decir que introducirás o pondrás el contenido de otro blog (entradas y comentarios) en otro. Este puede resultar útil cuando decides unificar el contenido de otros blogs en uno solo por cualquier motivo o razón.

¿Cómo exportar un blog en Blogger?

1.Para importar un blog de Blogger, tienes que ir a Configuracion > Otros y en la opción de herramientas de Blog haces click en Importar blog:

2. Luego seleccionas el archivo xml con contenido desde tu computadora, y rellenas el cuadro con la palabra de verificación que aparece abajo.

Captura de pantalla hecha usando el navegador Chrome

3. Puedes publicar todo el contenido del archivo si marcas la casilla que dice: Publicar automáticamente todas las entradas importadas, de no hacerlo, deberás publicar manualmente las entradas cada vez que desees.

4. Haces click en importar blog y listo, habrás importado el contenido de un blog a otro.

En este vídeo que explica cómo importar y exportar un blog en Blogger (en inglés con subtítulos en español)

Referencias
Importar y Exportar un blog

Monetiza tu Blog: Preguntas y Respuestas sobre Google Affiliate Ads para Blogger

noreply@blogger.com (Karla Castañeda) — Sun, 06 May 2012 22:45:00 +0000

Recientemente, Blogger anunciaba una nueva forma de ganar dinero con tu blog. Se trata de un nuevo programa de afiliados, con el que podrás publicar anuncios directamente en los posts. Este programa te permite tener más control sobre los anuncios que publicas en tu blog, ya que podrás elegir entre distintos anuncios disponibles y que pudieran tener afinidad a lo que escribes en un post, eligiendo los anuncios de productos que por ejemplo hayas usado y te gusten, de ese modo, puedes sentir que realmente estás recomendando dicho producto a tu audiencia.

¿Qué es Google Affiliate Ads para Blogger?

Es un programa de afiliación de Google que permite establecer relaciones publicitarias entre editores y anunciantes. Como usuario de Blogger y AdSense, puedes añadir un anuncio de un producto a tu sitio desde los posts, y ganar comisiones.

¿Quiénes son elegibles para el programa de Google Affiliate Ads para Blogger?

Actualmente, Google Affiliate Ads se encuentra disponible solamente para blogs de los Estados Unidos, que cuenten con una cuenta de AdSense válida, y que la temática del blog coincida con las categorías de anuncios disponibles.

¿Cómo se genera la comisión?

Ganarás una comisión cuando un visitante de tu blog hace click en un anuncio de afiliado y hace una compra.

¿Cómo te van a pagar?

Las ganancias de los anuncios de afiliados de Google los recibirás a través de tu cuenta de AdSense. No es necesario publicar anuncios de AdSense para poder ganar dinero con los anuncios de afiliados de Google.

Cómo empezar a usar el programa de Google Affiliate Ads para Blogger

Si ya tienes una cuenta de AdSense

1. Escribe un nuevo post desde el panel de edición de entradas

2. Si tu blog coincide con las categorías disponibles de anuncios, el gadget de los productos de publicidad van a aparecer en el panel de configuración del post, y dirá "Anunciar productos".

3. Selecciona un anuncio de afiliado desde "Anunciar productos", haciendo primero la búsqueda con una categoría que pudieran ser afín a lo que escribes en un post. Si publicas sólo una imagen con el enlace, elige el tamaño de la imagen del menú desplegable que dice: "Imagen". Si publicás el anuncio completo, elige el tamaño.

4. Publica tu post, ahí aparecerá el anuncio del producto que hayas elegido.

Si no cuentas con una cuenta de AdSense

1. Regístrate en AdSense
2. Una vez que hayas sido aprobado en AdSense aparecerá el gadget de "Anunciar productos" en la sección de configuración del panel de edición de entradas. Escribe un nuevo post desde el panel.
3. Si tu blog coincide con las categorías disponibles de anuncios, el gadget de productos de publicidad denominado "Anunciar productos", aparecerá en la sección de configuración de la entrada.
4. Selecciona un anuncio de afiliados del gadget que dice "Anunciar Productos". Si publicarás sólo una imagen con el enlace, elige el tamaño de la imagen del menú desplegable que dice: "Imagen". Si publicarás el anuncio completo, elige el tamaño.
5. Publica tu post, en éste aparecerá el anuncio del producto que hayas elegido.

Vídeo

En el siguiente vídeo podrás ver la introducción del programa y cómo empezar a usarlo (en inglés con subtítulos disponibles)

+ referencias e información
Monetiza tu blog con Google Affiliate Adds
Introduciendo Google Affiliate Ads para Blogger
Google Affiliate Ads para Blogger
Ayuda de Google Affiliate Network

Cómo Crear Plantilla de Entrada para los Posts + Ejemplo + Integrar Bloque de Publicidad de AdSense

noreply@blogger.com (Karla Castañeda) — Fri, 04 May 2012 19:45:00 +0000

Blogger tiene una opción muy interesante que permite crear una plantilla en las entradas o dicho de otro modo, agregar código HTML desde esa opción, para que éste aparezca en todos los posts. Dicho código lo veremos si ingresamos al HTML de la entrada. Esto nos permite ahorrar tiempo, en el caso de querer "crear estilos para ciertos elementos" ya que no tendremos que escribir el código HTML cada vez en una entrada.

¿A quienes puede resultarles muy útil crer una plantilla de entrada?

Esto resulta muy útil, para quienes muestran cierto formato en todas sus entradas, por ejemplo, en los blogs de cocina, donde se comparten recetas, y donde existen elementos repetitivos como lo son por ejemplo la parte donde se escriben los "ingredientes", o en los blogs de descargas donde a través de una tabla (por ejemplo) escriben información relevante sobre cierto archivo, etc.

Cómo crear una plantilla de entrada.

Sólo agregamos el HTML que queremos que aparezca en todas la entradas en el campo de "Plantilla de entrada" que aparece como opción cuando vamos a Entradas y comentarios de la sección de Configuración, es decir en:

Configuración > Entradas y comentarios > Plantilla de entrada

Su beneficio como mencionaba es "evitar" escribir código en cada entrada, pensando por ejemplo en que queremos crear ciertas secciones con estilos, etc.

Ejemplo. Qué vamos a hacer.

Lo que haremos, entonces, es usar dicha característica, y como ejemplo vamos a pensar que tenemos un blog de "recetas". Crearemos dos secciones a las que le daremos estilos. La primera sera una sección en la que colocaremos:

Tiempo de preparación
Tiempo de cocción
Porciones

La segunda sección es la que incluirá los ingredientes. Luego colocaremos AdSense, y este quedará a un lado de la sección de los ingredientes. De este modo aprovechamos los espacios. Abajo se puede apreciar cómo deberá lucir nuestra entrada, cuando ésta ha usado el formato de plantilla de entrada que creamos...

O bien, puedes ver la Demostración

Crear la plantilla de entrada del ejemplo.

1. Vas a Configuración > Entradas y comentarios, y haces click en añadir, ahí en el campo ponemos el código HTML:

<ul class="seccion3"><li>Tiempo de preparación:</li> <li>Tiempo de cocción:</li> <li>Porciones:</li> </ul>
<div class="ingredientes">Ingredientes:</div>

Deberá verse así:

2. Guarda los cambios.

Hecho esto, ese código que agregamos aparecerá en el editor de entradas, y lo veremos si accedemos al HTML de la entrada.

Agregar los estilos o CSS

Como ya agregamos el HTML para crear nuestra plantilla, ahora agregaremos el CSS para darle una apariencia a esas secciones.

Paso 3. Vas a diseño > Plantilla > Personalizar > añadir CSS y en el campo pones el CSS:

.post-body ul.seccion3{
width:550px; /*ancho sección horizontal*/
height:20px;
background: #f0f9ff;/*color de fondo primera seccion*/
display:block;
padding:4px 0 4px 10px;
border-bottom:1px solid #e2f2fc; /*color de borde*/
margin:4px 2px 20px;
position:absolute;top:0;left:0;
}
.post-body ul.seccion3 li{
float:left;
list-style:none;
margin-right:30px; /*separación */
}
.post-body .ingredientes{
background: #f0f9ff; /*color de fondo sección ingredientes*/display:block;
width:265px;
margin:4px 2px 100px; /*100px margen abajo*/
padding:8px 5px 12px;
float:none; /*float:left si usas imagen a un lado*/position:relative;
top:0;left:0;
overflow:hidden;
}
.ingredientes:before{
content:""; position:absolute;right:0;top:0; border-width:0 16px 16px 0;border-style:solid;border-color:#FFF #FFF #d6ebfa #d6ebfa;width:0;display:block}
.ingredientes:after{
content:""; position:absolute;left:0;bottom:0; border-width:16px 0 0 16px;border-style:solid;border-color:#d6ebfa #d6ebfa #FFF #FFF;width:0;display:block}
.ingredientes ul li{
list-style-image: url(http://1.bp.blogspot.com/-btOhbZmqoKE/T6MJ99OqY-I/AAAAAAAAJ5o/IZVxQmOgiTM/s1600/check1.png)}

Explicación del CSS:

.post-body ul.seccion3 Es la sección horizontal donde dice: Tiempo de preparación, tiempo de cocción, porciones puse los comentarios entre /*...*/ para que sepas que editar.

Donde dice: .post-body .ingredientes ahí definimos la apariencia de la sección de los ingredientes, puse los comentarios y lo valores de rojo que pudieras editar (aunque todo se puede editar)

En .ingredientes:before simulamos la esquina doblada. En border-color:#FFF #FFF #d6ebfa #d6ebfa; puedes edita los valores de rojo, lo mismo para: .ingredientes:after es la esquina doblada de abajo, los valores de rojo son los que forman el triangulito azul qu de preferencia debera ser de un tono mas obscuro que el bloque completo. El resto de los valores esta en color blanco #FFF, y quedará bien si el color de fondo de la página es blanco, sino habrá que editarlos.

Agregar Bloque de AdSense en la entradas

1. Ingresa a tu cuenta de AdSense y crear un bloque de anuncios, yendo a la pestaña de Mis anuncios. Debes tomar en cuenta el ancho para que quepa en el post, y alto para que lo desplace lo suficientemente hacia abajo (el resto del contenido) aunque ya usamos margen abajo para desplazarlo hacia abajo. Yo usé un bloque de 250 x 250 pixeles. Recuerda que el ancho del bloque + el ancho de la sección de "Ingredientes" + margen (en nuestro ejemplo) no deben superar el ancho del post.

Asegúrate de usar un formato distinto para el texto si es que usar bloques de texto/imagen.

2. Copia el código que te genera.

3. Convierte el código generado usando esta herramienta. El código tiene que verse parecido a esto:

<script type="text/javascript">
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

4. Ve a la edición de HTML de la plantilla y expande plantillas de artilugios, y con la ayuda de Ctrl F, busca (el primero de arriba hacia abajo)

<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'> <data:post.body/>
<div style='clear: both;'/>  </div>

5. Antes de <data:post.body/> pones el código con AdSense (ya convertido), como se indica:

<div style='float:right; margin: 0 0 0 15px;position:relative;top:45px;right:0;'>
Aquí el contenido del bloque de AdSense.Quitar esto.
<div style='height:60px'/>
</div>

6. Verificas en vista previa y si todo luce bien, guarda los cambios.

Hasta aquí, ya tenemos creada la plantilla de entrada, y agregado el bloque de publicidad de Adsense.

Notas Importantes

Es posible agregar de este modo la publicidad sin infringir las políticas de uso. Es decir que quede a un lado del contenido del post, para más información, ver las prácticas recomendadas para la ubicacion de anuncios de AdSense.
No utilices un formato de texto igual al que usas en el post, lo colores pueden combinar pero no se debe confundir con el texto del post, pensando en que usas bloque de texto.
Recuerda que no se trata de engañar al usuario, sino aprovechar bien los espacios.
No agregues ningún texto arriba del bloque como "haga click", "te recomendamos que visites:" es decir, nada que incite a hacer click.
En una página solo se deben mostrar tres bloques de anuncios.

Ahora veremos cómo usar la plantilla desde la entrada.

Cómo usar la plantilla desde la entrada

Como ya tenemos creada la plantilla y puesto el bloque de anuncios de Adsense, ahora empezaremos a usar la plantilla en la entrada. Podemos comprobar que aparezca el codigo de la plantilla de entrada que creamos, si vamos al panel de edición de entradas, e ingresasamos al HTML de la entrada, ahí verás el HTML que pusiste:

Regresamos a Redactar, y entonces nos ubicamos inmediatamente después de los dos puntos respectivamente ":", y escribimos lo que corresponda, por ejemplo la primera sección, se ve así en mi ejemplo de la demostración:

En la la parte de ingredientes, sólo te ubicas inmediatamente después de Ingredientes: y empiezas a poner los ingredientes.

Usa la herramienta de "Lista con viñetas", en los ingredientes, de ese modo se verá la imagen que pusimos para cada ingrediente (la marquita de verificación o "palomita" como le llaman algunos). Así es como se vería el contenido desde Redactar:

Te recomiendo que una vez terminado esto, vayas al HTML de la entarda, y te ubiques debajo del último div de cierre </div> para evitar que vayas a quedar el resto del contenido dentro de la sección de los ingredientes, luego teclea cualquier letra y regresas a Redactar a esbirro desde ahí.

Cada vez que crees una nueva entrada, harás lo mismo ;)

Es un proceso un poco largo pero creo que el resultado vale la pena, puede aumentar los CRT en los anuncios, como comentaba Miguel empleado de Googel desde el foro. y además con el uso de la plantilla, el contenido puede lucir más profesional :)

Se puede poner el bloque a la izquierda y en el código del paso 5 usarías "float:left" y cambiarías el margen por esto "margin: 0 15px 0 0".

Antes de cualquier cambio no olvides guardar una copia de seguridad de tu plantilla ;D No dudes en decirme cualquier observación que tengas o duda de la propuesta...

+ Referencias:
Info. sobre plantilla de entrada. Blogger

3 magníficos generadores de botones con CSS3 + 2 ejemplos donde puedes aplicarlos

noreply@blogger.com (Karla Castañeda) — Tue, 01 May 2012 23:25:00 +0000

Tienes pensado personalizar un botón de algún elemento de la plantilla y no tienes mucho tiempo o un programa para crearlo, te frustras momentáneamente y optas por desistir, pensando que ya será para la próxima... ¡Espera!, la buena noticia es que existen en la red magníficos generadores de botones, en donde de manera sencilla podrás crear un botón con la apariencia que quieras y no requerirás ninguna imagen, ya que el botón se crea con CSS3 ;)

Veamos entonces que generadores de botones pueden sernos de gran utilidad para completar ese proyecto en el blog que siempre quisimos hacer:

1. CSS3 Button Generador

Este es un generador muy generoso ya que cuenta con muchas opciones disponibles con las que podrás conseguir la apariencia que quieras para tu botón. Definirás el color de fondo del botón, incluso creando el efecto gradiente (color que se desvanece de un tono a otro), borde con un ancho determinado, sombra, etc. También podrás definir el color del texto, su tamaño y agregarle sombra si deseas.

Al estar creando el botón, podrás ver el resultado al mismo tiempo que lo configuras, por lo que crearlo resulta sumamente sencillo e intuitivo. Al definir todas las características del botón, te generará el CSS necesario para que lo apliques en el elemento que desees. También te generará el HTML donde podrás ver como es que se aplican los estilos generados, añadiendo la clase del botón.

Haz click sobre la imagen para acceder a la página del generador

2. Button Maker

Fantásitico el trabajo de CSS Tricks, al crear este grandioso generador, que, con opciones muy accesibles podrás crear la apariencia que desees al botón. Una de las características que lo hacen distinto con respecto al generador anterior, es que además de definir la apariencia por defecto del botón, también podrás definir algunas características del botón al poner el puntero del ratón encima (:hover) y al hacer click sobre éste (:active)

El botón que ves ahí, muestra el botón que has creado, incluyendo el efecto al poner el puntero del ratón y al hacer click sobre éste. Una vez completado tu botón haz click sobre éste para acceder al CSS generado, y copiarlo en el portapapeles, para luego usarlo donde desees.

Haz click sobre la imagen para acceder a la página del generador

3. CSS3 Button Generador

Otro maravilloso generador que nos invita a crear el botón de forma divertida y dinámica. De manera ordenada y sin ningún tipo de confusión podrás ir creando la apariencia de tu botón, ya que las opciones se encuentran dentro de secciones en un acordeón. De ese modo estarás creando tu botón por partes. También podrás configurar algunas opciones disponibles para crear la apariencia que tendrá el botón al poner el puntero del ratón sobre éste y además el generador facilita el código necesario para que funcione en Internet Explorer (sobre todo por el efecto gradiente) lo cual recomiendo agregar.

Una vez finalizada la apariencia de tu botón, abajo te generará el CSS que podrás usar para personalizar "ese botón en tu plantilla que no te gusta" o bien ponerlo en algún enlace.

Haz click sobre la imagen para acceder a la página del generador

2 Ejemplos de cómo aplicar el botón en tu blog

Ok, todo suena muy bien pero, si por ejemplo no tienes ni idea de cómo cambiar el botón en un elemento o cómo ponerlo a un enlace, el haber creado ese impresionante botón no servirá de nada. No te preocupes, la otra buena noticia es que ahora veremos algunos ejemplo de dónde poner un botoncito de estos.

Ejemplo #1. Personalizar el botón del gadget de "Cuadro de búsqueda".

Cómo lo hice (te despejará dudas sobre como encontrar el ID de un elemento)

1. Creas el botón en el generador. Yo usé el tercero: "CSS3 Button Generator", ya que este tiene la ventaja de facilitar el CSS para que funcione bien en Internet Explorer. Asegúrate de marcar la casilla de: include IE styles, para que se agregue el código para que se vea el color de fondo en Internet Explorer.

2. Teniendo el gadget añadido, vamos al blog y averiguamos como está identificado el botón de este elemento. ¿Recuerdas cuando hablábamos de como identificar un elemento en la plantilla, usando la herramienta de "inspeccionar elemento"?. Haremos lo mismo, inspeccionaremos el botón, usando el navegador Chrome o Firefox +10, situando el puntero del ratón sobre el botón, hacemos click en el botón derecho del mouse, y seleccionamos la opción que dice "Inspeccionar elemento" y ahí veremos cómo está identificado el botón, como puede verse en la siguiente imagen:

Captura desde Chrome

Esto es lo que nos interesa:

input.gsc-search-button

3. Luego vamos a Plantilla > Personalizar > Avanzado > Añadir CSS y agregamos nuestro CSS en este orden: (1) la linea que identifica al botón (2) la llave de apertura, (3) el CSS que obtuvimos del generador (4) la llave de cierre.

input.gsc-search-button {
/* aquí el CSS del botón que obtuve del generador */
}

Y para evitar confusiones, he aquí el CSS que usé en el botón que muestro como ejemplo en la imagen al principio:

input.gsc-search-button{
color: #ffffff;
font-size: 15px;
padding: 4px;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
text-shadow: 1px 1px 1px #777;
border: solid #1654f0 1px;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#15c5e8), to(#1654f0));
background: -moz-linear-gradient(top, #15c5e8, #1654f0);

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#15c5e8, endColorStr=#1654f0);
display:inline-block; /* Importante en IE */
}

Ya que andamos en el rollo de la personalización del widget, pudieras ampliar el campo de entrada del texto, pensando en que tal vez quede muy estrecho al poner el nuevo botón.

Para ello, averiguamos como está identificado dicho campo, situándonos sobre éste, e inspeccionado el elemento, como anteriormente explicaba en el paso 2. Ya que tomamos nota, escribimos el CSS para éste en el campo de añadir CSS:

input.gsc-input{

height:22px;
line-height:20px;
}

En este caso agregé una altura(height)de 22 pixeles, así se verá más alto, también agregé line-heigth, para controlar la altura de la linea de texto, y evitar problemas en algunas versiones de Internet Explorer (que el texto quede muy arriba dentro del campo).

4. Desde ahí podrás ver los resultados de tu nuevo botón, y una vez que consigas los resultados que buscas, guarda los cambios en "Aplicar al blog".

¿Fácil verdad?, ahora el cuadro de búsqueda o buscador que Blogger facilita, tiene un botón que se adapta al diseño de tu blog ;)

Ejemplo #2. Personalizar el botón del gadget de "Seguir el blog por correo electrónico".

Cómo lo hice (te despejará dudas sobre como encontrar el ID de un elemento)

1. Creas el botón en el generador. Usé el tercero: "CSS3 Button Generator", ya que éste tiene la ventaja de facilitar el CSS para que funcione bien en Internet Explorer. Asegúrate de marcar la casilla de: include IE styles, para que se agregue el código necesario para que se vea el color de fondo en Internet Explorer.

Nota: Al configurar las opciones, no usé la opción de "border-radius", (que es donde puedes definir la redondez de las esquinas), puesto que este botón ya tiene esquinas redondeadas.

2. Teniendo el gadget añadido, vamos al blog, y averiguamos cómo está identificado el botón del widget, para ello, ponemos el puntero del ratón sobre el botón, usando Chrome o Firefox +10, hacemos click en el botón derecho del mouse, y seleccionamos la opción que dice "Inspeccionar elemento" y ahí veremos cómo está identificado el botón, como se muestra en la imagen.

Captura desde Chrome

Esto es lo que nos interesa:

input.follow-by-email-submit

3. Luego vamos a Plantilla > Personalizar > Avanzado > Añadir CSS y escribimos nuestro CSS en este orden: (1) la linea que identifica al botón (2) la llave de apertura, (3) el CSS que obtuvimos del generador (4) la llave de cierre.

input.follow-by-email-submit {
/* aquí el CSS del botón que obtuve del generador */
}

Este es el CSS que usé en el botón de ejemplo:

input.follow-by-email-submit {
color: #ffffff;
padding: 0 5px;
text-decoration: none;
-webkit-box-shadow: 0px 0px 3px #666666;
-moz-box-shadow: 0px 0px 3px #666666;
text-shadow: 1px 1px 3px #666666;
border: solid #eb219a 1px !important;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#ff4ca0), to(#fc0574)) !important;
background: -moz-linear-gradient(top, #ff4ca0, #fc0574) !important;
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#ff4ca0, endColorStr=#fc0574) !important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#ff4ca0, endColorStr=#fc0574) !important;
display:inline-block; /* IE is so silly */
}

Nota: En este caso será necesario poner !important en los valores de "background" y el "border", para que se interpreten, ya que Blogger agrega esos valores para este botón en el CSS que nos envían. Poniendo !important el navegador le da preferencia a estos valores por encima de los que puso Blogger.

También fue necesario editar el valor del padding, agregando 0 al principio, para que no se aplique arriba y abajo, de otro modo se bajará el texto del botón.

4. Una vez conseguidos los resultados que buscas guardas los cambios en "Aplicar al blog".

Notas finales
-El generador que use en los ejemplo (3), no soporta al navegador Opera, en otras palabras, no genera la linea de CSS3 requerida para que se vea el color gradiente en ese navegador. Aunque es un navegador que casi no se usa, si nos interesa darle soporte lo podemos agregar y para ello sólo usas esta linea de CSS:

background: -o-linear-gradient(top, #15c5e8, #1654f0);

Los colores que resalté de azul los pondrás manualmente y deberán ser los mismos de esta otra linea que si genera el generador, y que sirven para que el color de fondo se aplique en Firefox:

background: -moz-linear-gradient(top, #15c5e8, #1654f0);

Bueno, espero sea útil, y no olvides compartirlo y/o recomendarlo en Google, tal vez le sea útil a alguien en tus redes y seguramente te lo agradecerá, al igual que yo ;)

Generadores vistos en:
Web Designer Depot

Google probó automóvil que se conduce solo con un hombre tras el volante (vídeo)

noreply@blogger.com (Karla Castañeda) — Mon, 30 Apr 2012 19:42:00 +0000

Increíble experiencia la que vivió Steve Mahan, un hombre con discapacidad visual en un 95%, quien el pasado miércoles hizo un recorrido por su ciudad, en un automóvil equipado con un software desarrollado por Google, que permite que el vehículo se conduzca por sí mismo. Previamente ya se había completado exitosamente un recorrido por más de 200,000 km sin conductor, en una amplia variedad de terrenos y condiciones, por lo que, hacer el recorrido suponía seguridad para quienes se encontrasen dentro del vehículo y a su alrededor.

"¡Mira mamá, sin manos, sin pies..., me encanta!" dijo Steve Mahan emocionado al principio de su recorrido, que fue cuidadosamente diseñado y en el que experimentó una nueva forma de estar tras el volante.

Lo que verás en el video es una prueba de un experimento técnico de un proyecto de Google que inició el 2010 y que es dirigido por Sebastian Thrun, quien es experto en inteligencia artificial. Dicho proyecto denominado "Self-driving car project" pretende hacer que el conducir automóviles sea una experiencia segura, alegre y más eficiente en un amplio sentido, cambiando sustancialmente la vida de aquellos que no pueden conducir o no les gusta hacerlo.

"Hemos organizado esta prueba como un experimento técnico fuera de nuestros esfuerzos principales de investigación, pero creemos que también es un aspecto prometedor de lo que este tipo de tecnología podría algún día ofrecer a la sociedad si los rigurosos estándares técnicos y de seguridad pueden ser satisfechas", dijo Google.

Fuente: TOI

Qué son los Encabezados o Headings y por qué es Importante usarlos

noreply@blogger.com (Karla Castañeda) — Mon, 30 Apr 2012 02:29:00 +0000

Estoy en trabajando en mejorar el uso de encabezados en mi blog, y una de las funcionalidades que recientemente implementó Blogger en el panel de edición de entradas, será de gran ayuda. Me refiero a la herramienta que permite agregar encabezados o headings (en inglés) desde los posts. Esto viene a complementar parte del trabajo que pudiera ayudar a mejorar el SEO del blog desde tus entradas y además le da accesibilidad a tu blog.

¿Qué son los encabezados o headings?

Los encabezados o headings en inglés, nos permiten estructurar el contenido de una página, destacando los títulos de los distintos apartados o secciones de una página. Para definir los encabezados, se utilizan las etiquetas h1, h2, h3, h4, h5, h6.

Blogger incorporó en el panel de edición de entradas las etiquetas h2, h3, y h4 a las que llama respectivamente así:

Encabezado = h2
Subencabezado= h3
Encabezado secundario = h4

¿Cómo agregar o poner los encabezados en los posts?

Como mencionaba al principio, Blogger recientemente dispuso una opción desde el panel de edición de entradas, para que agregar encabezados a los títulos de los distintos apartados de tu post sea más sencillo.

Para poner un encabezado al texto de un apartado en un post, tendrás que seleccionar el texto usando el botón izquierdo del mouse, luego, desplegar las opciones del menú desplegable que aparece en el panel de edición de entradas de Blogger, como se muestra abajo...

...y seleccionar el encabezado. La etiqueta se agrega automáticamente al texto. Lo puedes comprobar si echas un vistazo al HTML de la entrada. Ahí verías algo como esto, (el texto que está dentro es sólo como ejemplo)

<h3> Importancia económica y distribución geográfica del jitomate </h3>

¿Por qué debemos usar encabezados?

1. A tus usuarios les será más fácil dirigirse o acceder a contenido de interés dentro del post
Al utilizar encabezados en las páginas individuales, cualquier usuario vidente que ingrese a una página de tu blog, podrá reconocer a simple vista los distintos apartados o secciones en el post, y así le será posible acceder al contenido que le interese de forma más sencilla. Algunos navegadores como Opera, permiten desplazarse por la página de encabezado a encabezado, así que, si los usamos en el blog, quienes usen ese navegador y dicha opción, se moverán por la página cómodamente.

Pensarás que esto también se puede conseguir fácilmente, si cambiamos el tamaño de la fuente y poniéndola con negrita por ejemplo, al usar las herramientas del panel de edición de entradas. Es cierto, pero en realidad la práctica recomendada es el uso de los encabezados, ya que esto define la importancia de cada puesto dentro del post, más allá de la presentación de los textos.

2. Le da accesibilidad a nuestro sitio
Otro punto importante, es que al usar encabezados, les facilitarás la tarea a usuarios invidentes que utilicen un lector de pantalla para leer tu contenido, ya que estos podrán recibir información acerca de la estructura del contenido y además podrán desplazarse de apartado en apartado fácilmente.

3. Pudiera ayudar en el posicionamiento en los motores de búsqueda
El otro beneficio y que pudiera entrar a discusión, es la importancia o valor que le dan los buscadores al contenido de los encabezados para mostrar tu contenido, la cual, puede pensarse tiene cierta lógica ya que, ¿de qué otro modo puede saberse con más exactitud de qué habla una página?, ¿serán únicamente las palabras claves las de mayor trascendencia a la hora de optimizar el blog?

Otro aspecto interesante, y que puedes haber notado es que, el navegador de forma automática asigna un tamaño de mayor a menor, según el encabezado, sin que tu tengas prescritos en tu plantilla código CSS para darle estilos. Así pues un texto que tenga encabezado h2, será más grande que el que tenga h3, el que tenga h3 mayor que el de h4 y así sucesivamente, por lo que su uso también es cómodo y accesible en el sentido y el navegador siempre lo mostrará, aunque no se cargara por ejemplo el CSS de tu página.

¿Cómo usar los encabezados o headings en una página?

En la página de la Universidad de Alicante, explican cómo usar correctamente los encabezados en una página. Ahí muestran un ejemplo claro que muestra la estructura de una página individual, lo que sería un post.

Si observamos el ejemplo, podemos apreciar el orden de las jerarquías van desde h1, hasta h3, empezando por el título del post, usando encabezado h1.

Algo que recomiendan es nunca saltarse el orden de los encabezados, por ejemplo usar h2 es los títulos del post, y luego, pasarse al h4.

Ciertos blogs o páginas utilizan el encabezado h1, en los posts, ya que en teoría, esto te ayudaria a posicionarte mejor en los motores de búsqueda, lo cierto es que mantener esa etiqueta en el titulo del blog, y agregarla también al titulo del post, se estaría duplicando el uso de una etiqueta que se recomienda usar solo una vez.

Dependiendo del contenido del post yo agrego encabezados h2 y h3. Los títulos de mis posts, tienen por defecto la etiqueta h2, que cambie y que tú también puedes cambiar desde la edición de HTML de la plantilla.

Las plantillas de Blogger usan la etiqueta h3 en los títulos de las entradas, luego veremos como cambiar esta etiqueta por una h2 y darle más importancia o relevancia al título del post.

Conclusiones:

El uso de encabezados hace nuestro blog o página más accesible a cualquier usuario, y teniendo habilitada la opción para agregarlos desde nuestros posts, hace su uso muy sencillo, no dudes en practicarlo ;)

Referencias:
accesibilidadweb.dlsi.ua.es
w3schools
SEO

Truco para que el ancho de un elemento en un diseño fijo, ocupe el 100% de la ventana del navegador en cualquier resolución de pantalla

noreply@blogger.com (Karla Castañeda) — Sun, 29 Apr 2012 23:43:00 +0000

Un blog o una página web con diseño fijo, es aquel que utiliza un ancho comúnmente definido en pixeles (px). En este tipo de diseños, no cambia el ancho de la página si es visto en distintas resoluciones de pantalla, siempre se mantiene igual, por lo que, si el blog o página es visto en una resolución de pantalla "menor" al ancho que se tiene definido en dicha página, se formará una barra de desplazamiento horizontal para permitir desplazar la página horizontalmente y verla completa.

Ahora, si en dicho diseño, se tienen ciertas secciones como el header, con un ancho de 100%, para que éste ocupe el 100% de la ventana del navegador, al ser vista la página en resoluciones menores que el ancho definido, el fondo de dicha sección no se verá completa, ya que el navegador la cortará, por decirlo así, pues tomará en cuenta la resolución de pantalla en que sea visto. Esto es lo que vamos a resolver.

Nota: Esto no ocurrirá en elementos que tengan posición "fixed".

Para ilustrar lo que estoy diciendo, en la siguiente imagen se muestra el diseño de una página con diseño fijo, tiene 960px (pixeles) de ancho, y tiene un header con un ancho de 100% lo que hace que éste ocupe el total del ancho de la ventana del navegador.

Abajo, puedes ver una simulación de como se vería el mismo diseño, pero visto en una resolución de pantalla de 800 pixeles.

Como puede apreciarse en la similación, el fondo del header no se verá completo a la derecha, puesto que la resolución de pantalla es menor que el ancho de la página. También, la barra de desplazamiento horizontal aparecerá, por la misma causa, aunque esto último sólo se soluciona si todo el blog es fluido (usa porcentajes).

Si el ancho de la página es todavía más grande, por ejemplo de 1200 pixeles, la barra de desplazamiento horizontal se activará desde una resolución menor a dicha medida.

La solución.
Lograr que el fondo se vea completo en dichos casos, es mas fácil de lo que imaginas, y funcionará incluso en Internet Explorer 7, sólo necesitas definir un ancho mínimo en el body, y lo harías así

body {
min-width: 980px;
}

El valor del ancho mínimo, que en el código anterior se muestra como 980 pixeles, deberá ser igual al ancho del blog o página.

Pero, ¿a quién le interesa si se ve o no completo el fondo de ciertos elementos en una resolución menor de 800 pixeles? suponiendo que la página mide 960 pixeles...

No es para preocuparse tanto, puesto que la mayoría de tabletas o tablets tienen una resoluciones superior de 1024 pixeles de ancho, aunque si las hay de menor resolución, y siendo esta una solución tan simple, creo que vale la pena implementarla :)

Luego veremos cómo crear un diseño que pueda adaptarse a las distintas resoluciones de pantalla de los internautas, así que tienes que estar atento (a) ;)

Referencias:
Ver mas información sobre la propiedad min-width.

15+ Impresionantes Diseños de Páginas Web Alineadas a la Izquierda

noreply@blogger.com (Karla Castañeda) — Sun, 29 Apr 2012 09:46:00 +0000

Todas las páginas web, por defecto muestran su contenido alineado a la izquierda de la ventana del navegador, aunque es posible centrarlo muy fácilmente con CSS.

A continuación verás algunos sitios web muy monos, con diseños que muestran la página alineada a la izquierda, es decir, el contenido no está centrado horizontalmente tomando en cuenta la ventana del navegador.

Un punto que pudiera entrar a discusión es, si debería usarse este tipo de alineación en diseños fijos, (aquellos que mantienen su ancho independientemente de la resolución de pantalla en que se vea), ya que en resoluciones de pantalla muy grandes, quedará mucho espacio vacío a la derecha.

¿A ti te gusta más un diseño con el contenido centrado, o lo prefieres alineado a la izquierda?, Siéntete libre de expresar tu punto de vista ;)

1. Squarespace

2. 204 Beech

3.mashKulture

4.Efektive

5. Strip

6. Behaind the websites

Visitar sitio

7. Jesus Rodriguez Velasco

Visitar sitio

8. News & Abuses

Visitar Sitio

9. Juxtin Interactive

10. StetcBlog

11. Duoh!

12. Jeff Sarmiento

13. Un.

14. P&P Tattoo

15. James de Angelis

16. The Pineaple Thief

Visitar sitio

Fuentes:

Design Booms

The Best Designs

Cómo lograr que la imagen de la cabecera cubra el ancho del blog completo

noreply@blogger.com (Karla Castañeda) — Sun, 29 Apr 2012 07:00:00 +0000

¡Hola qué tal!, después de unos días de estar en batalla con una sinusitis persistente, ya estoy de vuelta, lista para seguir compartiendo cosas que puedan ser útiles para mejorar tu blog :)

Hay veces en las que queremos que la imagen que usamos en la cabecera del blog, ocupe todo el ancho del blog. Esto es algo que me han comentado desde Twitter y en el blog, y pensé que podría ser útil para otros saber cómo lograrlo. El como luce la imagen de la cabecera después de los cambios, lo puedes ver en la siguiente imagen, considerando que la imagen se agregó desde la sección de diseño.

Click para ampliar

Esto lo conseguiremos sin tener que ingresar a la edición de HTML de la plantilla, y funcionará en todos los navegadores incluyendo Internet Explorer 7. No sé si estarás de acuerdo conmigo pero pienso que esto puede darle un look más moderno al blog...

Bueno, como ejemplo voy a usar la plantilla "Simple de Blogger", ya que por el tipo de diseño, esto será notorio. ¿Es eso lo que siempre has querido hacer, o quieres hacerlo en tu blog? Entonces, veamos cómo lograrlo...

¡Ahh!, pero ¿quieres ver el resultado en un blog?, no hay problema, lo puedes ver en este blog.

Cómo hacerlo paso a paso

Paso 1. Primero, tienes que tener lista la imagen que vas a colocar en la cabecera, y ésta debe tener el mismo ancho que el blog completo.

Nota: Para saber el ancho del blog completo y poder crear tu imagen, sólo tienes que ir a: Diseñador de plantillas > Ajustar ancho, y tomar nota del ancho en pixeles donde dice "Blog completo". Como puedes apreciar en la siguiente imagen, éste tiene un ancho de 900 pixeles.

Paso 2. Teniendo lista la imagen, vas a Diseño, y desde la sección de la cabecera, subes la imagen. Para ello sólo abre las opciones de configuración, haciendo click en "Editar" de dicha sección. No Marques la opción de "Reducir hasta ajustar", y selecciona la ubicación que quieras.

Paso 3. Luego vas a Plantilla > Personzalizar > Avanzado > Añadir CSS, y en el campo para añadir CSS, agregas esto:

#header-inner{
margin:-10px 0 0 -10px;
}

Paso 4. Ahí mismo verás los resultados, ¡ahora la imagen de la cabecera ocupa el ancho del blog!; sólo falta que guardes los cambios en "Aplicar al blog".

¡Listo!, con unos simples pasos, la imagen de la cabecera ocupa el ancho del contenido tu blog ;)

Compatibilidad del truco
Esto funcionará bien en todos los navegadores incluyendo Internet Explorer 7.

Imágenes gratuitas para la cabecera o headers
Si buscas una imagen para colocar en la cabecera, en Smashing publicaron una colección muy grande de imágenes para usar en dicha sección.

Espero sea útil, y pásatela muy bien este fin de semana ;)

La Tierra vista desde el Cielo: Defendamos el agua (documental)

noreply@blogger.com (Karla Castañeda) — Mon, 23 Apr 2012 22:13:00 +0000

En un viaje increíble por distintas partes del mundo,Yann Arthus-Bertrand, reconocido fotógrafo francés, nos muestra en este fascinante documental que no puedes dejar de ver, la situación que enmarca nuestra realidad en torno al uso y distribución del agua potable, recurso tan vital para todo ser vivo en nuestro planeta.

En él, se exponen las distintas amenazas que ponen en peligro a este vital liquido. Seremos testigos de la estremecedora situación que viven algunas regiones de nuestro planeta debido a su escasez, en contraste al derroche que se vive en otras regiones; en fin, toda una realidad que nos incita a reflexionar sobre la responsabilidad de cuidarla y protegerla, la cual nos compete a todos. Si no lo has visto, lo tienes que ver :)

Cómo separar las lineas de los textos para que nuestro blog sea legible, y cómo saber a quién aplicarlo

noreply@blogger.com (Karla Castañeda) — Thu, 19 Apr 2012 20:22:00 +0000

Separar los textos adecuadamente en nuestro blog, facilitan la lectura, por lo tanto, es necesario prestar atención a ese punto y no dejarlo en el baúl del olvido (como a veces nos pasa). Creo que estarás de acuerdo conmigo en que lineas de texto con una separación adecuada, hacen que nuestro blog sea legible ¿verdad?

Veamos entonces como separar las lineas de los textos, o dicho de otro modo, cómo definir la altura mínima de cada linea de texto.

Cómo separar las lineas de texto y ejemplo

Un texto con las lineas muy juntas entre sí, puede resultar difícil de leer ¿no?

Lorem ipsum sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore emagna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure in reprehenderit in voluptate velit esse cillum eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

...mmm, creo que algo no anda bien en ese párrafo, para solucionar eso, usaremos la propiedad de CSS llamada: line-height que traducido en español sería "altura de la linea".

Esta propiedad, aplicada a los textos, nos permite especificar la altura mínima que ocupan cada linea de texto en un elemento llámece párrafo, sección del post, etc. Usándola, podemos controlar el espacio o separación entre cada linea de texto denominado leading en inglés.

El espacio o leading se determina, tomando en cuenta el tamaño del texto y valor de line-height, si por ejemplo el tamaño de la fuente es de 14 pixeles y el valor de line-height 22 pixeles, la diferencia es de 8 pixeles, que se divide entre dos, y nos da cuatro, entonces se aplican 4 pixeles arriba del texto y 4 pixeles debajo del texto, como puede apreciarse en la imagen.

Modelo de line-height de la W3C

Entonces, si cambiamos el valor de line-height de 100% del párrafo anterior a 150%, tendremos en espacio del 50% de separación entre cada linea, y éste espacio será relativo al tamaño de la fuente, y el resultado sería este:

¿Mucho mejor verdad?, ahora seguramente podemos leer cómodamente, aunque, ¿qué dice ahí? Bueno en realidad no dice nada, es sólo texto de relleno conocido como Lorum ipsum.

Cómo aplicar la propiedad line-height a un elemento

Simplemente definimos a quien se le va a agregar la propiedad (el selector, resaltado de azul abajo) y dentro escribimos la propiedad. Vamos a suponer que queremos aplicar dicha propiedad a la sección del post, para separar las lineas de éste. Por lo tanto, tenemos que escribir "cómo está definido la sección del post" en la plantilla, y creamos la regla de estilo:

.post-body{
line-height:150%
}

¿Pero cómo rayos voy a saber cómo está definido la sección de los posts, si no nada de códigos? te preguntarás, bueno, no tienes que ser un experto en HTML, o en CSS, etc, pero si saber unos detalles mínimos que voy a tratar de explicar, por lo menos, para abrirte el panorama un poco :)

Para determinar cómo escribir a quien le hacemos algo (el selector), vamos a auxiliarnos de la poderosa opción que tiene el menú contextual (las opciones que aparecen al usar el botón derecho del mouse) denominada: "inspeccionar el elemento" en el navegador Chrome, así sabremos cómo están definidos los elementos de la plantilla. Firefox, a partir de su versión 10 también cuenta con esa característica. Opera también la tiene integrada.

Siguiendo el ejemplo, entonces, pensaremos que sabemos donde queremos aplicar esa propiedad (el área o sección), pero no sabemos cómo escribir el CSS, puesto que no sabemos cómo está definida dicha sección, o dicho de otro modo y más técnicamente, no sabemos cuál es el dichoso "selector" para crear nuestro CSS.

Entonces, para descubrirlo, ingresamos al post, y situamos el puntero del ratón encima de éste, hacemos click en el botón derecho del mousse y seleccionamos la opción "Inspeccionar Elemento".

Se abrirá un panel con varias opciones, y abajo se resaltará de azul el elemento (en el que nos situamos), y a su vez, se resaltará el div en cuestión arriba, de ese modo identificaremos que el código abajo, corresponde a ese div.

Hacer click para ampliar

Si vemos la imagen entonces, podemos ver que el div del post, se muestra así:

<div class="post-body entry-content">...</div>

Podemos ver, que dicho div tiene dos clases: "post-body" que resalté de rojo, y "entry-content" que resalté de azul.

Nota: un elemento puede tener varias clases, y éstas se separan dejando un espacio entre cada una, de ese modo se le pueden aplicar estilos o CSS definidos en varias clases a un mismo elemento.

Bueno, pues para definir la regla de estilo o escribir el CSS, usamos la clase "post-body" que se escribe de este modo:

.post-body

Sabemos que se escribe de ese modo, por que todas las "clases" en CSS llevan un punto antes de su nombre, y aunque no lo supiéramos lo podemos ver arriba donde aparece como está definido el div (ver imagen arriba).

Como lo que queremos es aplicar la propiedad "line-height" para separar las linea de texto en los posts, definiendo su altura, entonces aplicamos dicha propiedad a ese div, y tenemos este resultado:

.post-body{line-height: 150%}

Y ¿dónde ponemos el CSS?, eso lo escribimos en el campo de añadir CSS del diseñador de plantillas, de ese modo no necesitamos ingresar a la edición de HTML de la plantilla.

Nota: En el caso de algunos elementos que tienen la estructura más compleja, por ejemplo los encabezados como h2 o h3 que también son enlaces, y que usan la plantillas en los títulos de los posts, te puede resultar más difícil determinar el selector aunque no mucho. Al usar la opción de inspeccionar el elemento tendrás que desplazarte hacia arriba por ejemplo, y asegurarte de que esté seleccionado la sección que te interesa apropiadamente y lo sabrás porque ésta se destacará (de forma distinta dependiendo del navegador) y deberá mostrar una clase o más, o ID para que puedas trabajar con ella.

Ahora, veamos cules puedes ser los valores de la propiedad "line-height", para saber cuáles podemos usar.

Valores posibles de la propiedad line-height

1. <normal> "normal"

El valor "normal" es el valor por defecto.Se aplica si un elemento no lo tiene definido en el CSS o bien si se especifica de ese modo. Este valor hace que el navegador asigne la separación que considere mejor. ejemplo:

p{line-height: normal}

y el resultado:

2. <número> 0, 1,1.3, 1.5, 2 etc

Pueden ser números, enteros o no, de ese modo la altura de la linea se calcula multiplicando ese valor, por el tamaño de la fuente de donde se aplique. No se permiten valores negativos, ejemplo:

p {line-height: 1.4}

el resultado:

3. <longitud> o medida "px, pt, em" etc.

Asignando valores con unidades relativas o absolutas, como pixeles (px), puntos (pt) etc. Por ejemplo:

p {line-height: 26px}

y el resultado:

Lorem ipsum sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore emagna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure in reprehenderit in voluptate velit esse cillum eu fugiat nulla pariatur.

4. <porcentaje> "%"

Se calcula multiplicando el porcentaje, por el tamaño de la fuente de donde se aplique, por lo tanto, un valor de line-height definido en 100%...

p {line-height: 100%}

ocupará en un 100% el tamaño de la fuente:

Lorem ipsum sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore emagna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure in reprehenderit in voluptate velit esse cillum eu fugiat nulla pariatur.

Por ello, si se define el valor usando porcentaje para separar las lineas de texto, el valor debería ser siempre superior a 100%, por ejemplo 150%, así el espacio que habrá entre cada linea será 50% mayor que el del tamaño de la fuente.

5. <inherit> o que se hereda "inherit"

El valor inherit hace que un elemento herede el valor del elemento contenedor o dicho muy simple de donde está puesto. Internet Explorer 7 no soporta este valor, e Internet explorer 8 requiere la declaración !DOCTYPE, pero en este último caso, no habrá problema porque nuestra plantilla lo tiene. Ejemplo:

p {line-heigh: inherit}

Nota importante: todos los valores mostrados como ejemplo, no tiene punto y coma ";" al final del valor. Esto, porque el punto y coma se puede omitir en el último valor de la última propiedad de un elemento, o cuando sólo lleva una, como en este caso.

¿Quieres jugar un poco viendo las diferencias?, entonces, ve y comprueba los resultados usando distintos valores ;)

¿Y cuál es valor es el que debería usarse, o el más recomendado?

Bueno, el valor que más recomendado es el que no usa ninguna unidad, según en libros.es, ya que es más fácil y le da más flexibilidad pues se adapta facilmente al tamaño de la letra. Puedes ver otros detalles dicutidos en armonía.

Imagen de
W3c.org

Introduciendo la plantilla para Blogger: Fashionista

noreply@blogger.com (Karla Castañeda) — Sun, 15 Apr 2012 06:40:00 +0000

¡Hola qué tal!, ya tengo lista para compartirte la plantilla que ya te había mencionado antes desde Google+, es una plantilla minimalista altamente personalizable, y lo mejor de todo es que le puedes dar un look diferente desde el Diseñador de Plantillas ;)

Esta plantilla puede adaptarse a varias temáticas, como blogs de moda, decoración, etc, guarda un orden perfecto en las separaciones de los posts y la columna lateral, y usa colores sólidos (sin texturas). Utiliza masonry, un plugin de jQuery que permite que los posts que flotan de este modo, no necesariamente tengan que tener la misma altura, de ese modo podemos crear el efecto de mosaico sin problemas.

Olvídate de ingresar a la edición de HTML de la plantilla para editar los elementos como el menú desplegable, los iconos sociales y el carrusel, ya que estos los agregarás/editarás desde un gadget con la opción HTML/Javascript. Así evitarás dolores de cabeza, o perderte entre el código de la plantilla. Aunque si eres usuario avanzado, desde luego puedes hacer cambios desde la edición de HTML de la plantilla.

Demostración

Características

Plantilla de cuatro columnas (tres de los posts, y una lateral adicional para agregar gadgets)
Iconos sociales en la parte superior
Menú en la parte superior izquierda que son los títulos de las páginas estáticas
Menú desplegable adicional
Carrusel de imágenes para que puedas destacar algunos posts
Cuatro columnas adicionales en el footer
Resumen automático en las entradas

El resumen de las entradas es automático, aunque si lo quieres, puedes mostrar sólo la imagen en la página principal, y para ello, necesitas poner la imagen como primer elemento en el post, desde el panel de edición de entradas, y poner el salto de linea debajo de ésta, como se muestra en la imagen, puedes ver el resultado en la plantilla de demostración.

Así es como se muestra el layout o Diseño, en la imagen puedes ver la ubicación de cada elemento de la plantilla , ya que todos los elementos han sido colocados en secciones, de ese modo, puedes editar los elementos desde la sección de Diseño:

Click para ampliar

Cómo Agregar y Editar los Iconos de Redes Sociales

Ve a Diseño y en el gadget superior derecho (ver imagen arriba del diseño donde dice iconos sociales) haz click en "Editar" y agrega el siguiente código:

<ul id="m-soc2">
<li><a class="twitter" href="#"></a></li>
<li><a class="facebook" href="#"></a></li>
<li><a class="google" href="#"></a></li>
<li><a class="pinterest" href="#"></a></li>
<li><a class="rss" href="#"></a></li>
</ul>

Luego, sustituye las almohadillas "#" por la dirección web de cada página respectivamente. Es fácil saber a que pagina corresponde, ya que la clase (class) lleva el nombre de cada red social.

Cómo Agregar y Editar el menú desplegable

Ve a Diseño y en el gadget del lado derecho de la cabecera, agrega el siguiente codigo:

<ul id="nav">
<li>
<a class="inicial" href="#">Salud</a>
<ul>
<li><a href="#">Salud 1</a></li>
<li><a href="#">Salud 2</a></li>
</ul>
</li>
<li>
<a class="inicial" href="#">Amore</a>
<ul>
<li><a href="#">Amore 1</a></li>
<li><a href="#">Amore 2</a></li>
</ul>
</li>
<li>
<a class="inicial" href="#">Belleza</a>
<ul>
<li><a href="#">Belleza 1</a></li>
<li><a href="#">Belleza 2</a></li>
<li><a href="#">Belleza 3</a></li>
</ul>
</li>
<li>
<a class="inicial" href="#">Moda</a>
<ul>
<li><a href="#">Moda 1</a></li>
<li><a href="#">Moda 2</a></li>
<li><a href="#">Moda 3</a></li>
<li><a href="#">Moda 4</a></li>

</ul>
</li>
<li>
<a class="inicial" href="#">Recetas</a>
<ul>
<li><a href="#">Recetas 1</a></li>
<li><a href="#">Recetas 2</a></li>
</ul>
</li>
<li>
<a class="inicial" href="#">Viajes</a>
</li>

</ul>

Luego, edita lo que esta resaltado de rojo, guíate por cada linea de código, en donde están las almohadillas "#", pones la dirección de la página a donde quieres que te dirija, y enseguida esta el texto que corresponde a cada enlace respectivamente.

Puedes agregar más enlaces dentro de cada sección con enlaces, o bien puedes quitarlos. Por ejemplo, vamos a suponer que quieres quitar el último enlace de Moda, entonces quitarías esta linea:

<li><a href="#">Moda 4</a></li>

Si por lo contrario quicieras agregar otro enlace en Recetas, entonces colocarías una linea de código debajo de la última que haya, es decir, debajo de:

<li><a href="#">Recetas 2</a></li> pondrías:

<li><a href="#">Recetas 3</a></li>

...y así sucesivamente, por supuesto, con tus respectivos textos y direcciones de las páginas que editarás en el código.

Cómo Agregar y Editar el carrusel

Desde Diseño, identifica el gadget donde colocarás el HTML del carrusel (ver imagen arriba del diseño) y agregas esto:

<div class="infiniteCarousel">
<div class="wrapper" style="overflow-x: hidden; overflow-y: hidden; ">
<ul>
<li><a href="#"><img alt="" src="URL DE LA IMAGEN" /><span>Texto que se muestra</span></a></li>
<li> <a href="#"> <img alt="" src="URL DE LA IMAGEN" /><span >Texto que se muestra</span></a></li>
<li><a href="#"><img alt="" src="URL DE LA IMAGEN" /><span>Texto que se muestra</span></a></li>
<li><a href="#"><img alt="" src="URL DE LA IMAGEN" /><span>Texto que se muestra</span></a></li>
<li><a href="#"><img alt="" src="URL DE LA IMAGEN"/><span>Texto que se muestra</span></a></li>
<li><a href="#"><img alt="" src="URL DE LA IMAGEN"/><span>Texto que se muestra</span></a></li>
</ul>
</div>
</div>

Cada imagen con su enlace y texto que se mostrara al poner el puntero del ratón sobre la imagen, viene resaltado de rojo, y cada uno esta dentro de un elemento de lista, es decir dentro de <li>...</li>, así que si necesitas mas imágenes, tendrás que repetir todo esto:

<li><a href="#"><img alt="" src="URL DE LA IMAGEN"/><span>Texto que se muestra</span></a></li>

...antes de </ul> de ese código.

Donde esta la almohadilla, poner la dirección de la pagina a donde se va a dirigir, y el resto es para la URL de la imagen, y para el texto que se muestra al poner el puntero del ratón sobre la imagen. La medida recomendada para la imagen es de 175px de ancho x 155px de alto.

Puedes usar otro efecto en las imágenes del carrusel, si ya estas familiarizado con la Edición de HTML de la Plantilla y para ello deberás buscar estas lineas de código:

.infiniteCarousel ul li a:hover span{height:90px; padding-top:80px;

Luego, lo que resalte de rojo, lo eliminas o bien, lo vuelves comentario poniendo una barra-asterisco al principio y asterisco barra al final, como se muestra abajo, para que no se interpreten esas propiedades, de ese modo, puedes usar los dos estilos cuando quieras, poniéndolo y quitándolo ¿me explico? Entonces quedaría así:

.infiniteCarousel ul li a:hover span{/*height:90px; padding-top:80px;*/...el resto de las propiedades

Enseguida de eso, están el resto de las propiedades para la capa con el texto que se muestra en el evento hover (al poner el puntero del ratón sobre la imagen). Y el resultado sería este:

Ahh, pero, ¿buscas un look, con menos dramatismo?, entonces ¡ve al Diseñador de plantillas y consíguelo!

¿Todavía más claridad y pureza?, no hay problema, puedes conseguirlo fácilmente cambiando los colores...

Bordes con un tono más fuerte, fuentes distintas, colores brillantes, en fin todo lo que buscas lo conseguirás muy fácilmente gracias a las bondades del Diseñador de plantillas ;)

¡Así que, ve a jugar al Diseñador de plantillas y diviértete creando tu propio look...!

Descargar

Un tooltip que se desliza en los enlaces

noreply@blogger.com (Karla Castañeda) — Wed, 11 Apr 2012 04:12:00 +0000

En CSS Globe nos muestran la forma de crear un tooltip* muy animado en cualquier enlace, con la ayuda de jQuery. Me gusta porque de algún modo promueve el uso del atributo title en los enlaces, ya que el tooltip mostrará el contenido o texto que se ponga en dicho atributo. Voy a usar el primer ejemplo a petición de Dante.

Este tooltip se desliza cuando se mueve el cursor del mouse sobre el elemento en el que se aplique, y aunque lo explican para aplicarlo en el texto de un enlace, se puede usar en una imagen que tenga un enlace.

Puedes verlo en acción en este blog donde dice "Tooltip en enlaces" (en la columna lateral) o en la primer entrada. También puedes ver el resultado en la imagen, aunque, mejor echa un vistazo al blog con el ejemplo, ya que aquí te perderás de la acción...

Cómo agregar el tooltip a cualquier enlace

1. Necesitas tener agregado en la plantilla jQuery antes de </head>, si ya lo tienes, puedes actualizarlo por su última versión, que hasta el día de hoy es la siguiente, y que lo descargamos desde la librería de Google:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

2. Luego, necesitas agregar este script inmediatamente después de jQuery (del código anterior)...

<script type='text/javascript'>
//<![CDATA[
/*
* for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
*/
this.tooltip=function(){xOffset=10;yOffset=20;$("a.tooltip").hover(function(e){this.t=this.title;this.title="";$("body").append("<p id='tooltip'>"+this.t+"</p>");$("#tooltip").css("top",(e.pageY-xOffset)+"px").css("left",(e.pageX+yOffset)+"px").fadeIn("fast")},function(){this.title=this.t;$("#tooltip").remove()});$("a.tooltip").mousemove(function(e){$("#tooltip").css("top",(e.pageY-xOffset)+"px").css("left",(e.pageX+yOffset)+"px")})};$(document).ready(function(){tooltip()});
//]]>
</script>

Cómo funciona. Lo que hace el script, es tomar el contenido del atributo "title" que está dentro de la etiqueta "a" (que hace que se cree el enlace) y lo muestra en el tooltip.

3. Después, necesitas agregar el CSS, que puedes cambiar para darle la apariencia que quieras al tooltip, y lo agregas yendo a Plantilla > Personalizar > Avanzado > Añadir CSS :

#tooltip{position:absolute;background:#000;padding:2px 5px;color:#333;display:none;opacity:.8;filter:alpha(opacity=80)}

En este caso, el color de fondo del tooltip es negro (background:#000;)y el color del texto es blanco(color:#fff;).También agregamos opacidad para darle transparencia, opacity:.8; y para que se vea la transparencia en Internet Explorer versión 8 y anteriores: filter:alpha(opacity=80).

4. Finalmente usaremos este HTML, que tendrá el enlace, de otro modo no fucionará (ver explicación de como funciona el script). Lo podemos poner en un gadget con la opción de HTML/Javascript, o en una entrada del blog.

Para el texto del enlace:

<a href="#" class="tooltip" title="El contenido del tooltip">El texto del enlace</a>

Para la imagen con enlace:

<a href="#" class="tooltip" title="El contenido del tooltip"><img src="URL_de_la_imagen" alt="" /></a>

Donde está la almohadilla "#"se pone la dirección web a donde se va a dirigir cuando se haga click sobre enlace/imagen. En el resto de lo que tienes que editar y que está resaltado de rojo, dice que ponerse.

El uso del tooltip en el caso de las imágenes con enlace

Recuerda que en tooltip debería mostar de algún modo la naturaleza del enlace, agregando información adicional a éste.

Por ejemplo, supongamos que pones una imagen (fotografía) en la columna lateral, de cuando fuiste a Disneyland, en donde estás abrazando a Mickey Mouse, entonces pondrías el atributo title al enlace (en la etiqueta a) con esta información, por ejemplo: "Leer mi aventura en Disneyland este verano", y enlace te enviará al post contando tu aventura. De ese modo el usuario sabrá que al hacer click en la imagen, podrá leer tu aventura.

Tanto las imágenes (la etiqueta img) como los enlaces (la etiqueta a) admiten el atributo "title". Lo ideal sería poner el atributo title a la imagen, puesto que lo que se ve es ésta, pero lo agregamos dentro de la etiqueta a para funcione el tooltip (que también es válido).

*Un tooltip, es un texto que emerge al poner el puntero del ratón sobre un enlace o una imagen, y el texto que aparece es el que se ha puesto en el atributo title, aunque se puede simular un tooltip sin usar dicho atributo.

¿Por qué no aparecen las entradas que tengo configuradas en el blog? y cómo reducir el tiempo de carga del blog

noreply@blogger.com (Karla Castañeda) — Tue, 10 Apr 2012 20:10:00 +0000

Seguramente, alguna vez configuraste tu blog para que mostrara un determinado número de entradas, y mostró menos, ¿por qué sucede esto? Es una pregunta que me hice hace tiempo, y la respuesta tiene que ver con el tiempo de carga del blog, según explica Blogger.

La decisión de Blogger y sus repercusiones...

El 22 de febrero del 2010, se abrió en el foro de Blogger en español, un debate, porque varios usuarios reportaban que se mostraban una menor cantidad de entradas de las que se tenían configuradas. Finalmente, para no entrar mucho a detalle en esa discusión, Laura y Friendly, colaboradores del foro, explicaron que, Blogger hizo un cambio en el sistema a partir del 18 de Febrero del mismo año, en el que, de forma dinámica, se cambiará el contenido que envíe al navegador, en función a dos factores:

1. La cantidad de HTML de la página en kilobytes (el tamaño de tu página, entre más extenso el código es mayor el tamaño)

2. El número de imágenes en la página.

Esto con el fin de mejorar el rendimiento del blog. Por lo tanto, si un blog por ejemplo, es demasiado pesado para lo que Blogger considera apropiado, éste mostrará un menor número de entradas, independientemente de la cantidad que se tengan configuradas. Puedes ver la traducción del informe de Blogger sobre este cambio desde el foro, o desde su blog.

Nos guste o no esa decisión, es algo que nos invita a reflexionar, hasta cuanto es demasiado, en lo que se refiere a imágenes, widgets, scripts y demás cosas que vamos y vamos agregando a los blogs. Qué cosas pueden ser necesarias y cuales no.

Tampoco se trata de sacrificar el diseño del blog, o el contenido, no usando imágenes, ya que estas pueden añadirle atractivo al blog, pero, si no podemos prescindir de algunos elementos, es bueno saber cómo optimizarlos para no afectar el rendimiento del blog.

Cuando no se muestra la cantidad de entradas configuradas en el blog, puede ser una señal de alerta, que nos está diciendo que necesitamos hacer ciertos cambios, si es que nos interesa mostrar más entradas o bien, mejorar su rendimiento.

¿La carga del blog? ¿por qué debería preocuparme?

1. Para ofrecer una mayor comodidad a tus usuarios al navegar
Un blog que tarde mucho en cargar puede resultar incómodo para los usuarios. El que cargue rápido es un factor determinante para que las visitas de nuestro blog regresen y naveguen cómodamente.

2. Para tener más oportunidades de posicionarte mejor en los motores de búsqueda como Google
El tiempo de carga es un factor que Google considera para posicionarte en los primeros lugares dentro de su motor de búsqueda, según comentaba Matt Cutts (empleado de Google) en su blog.

Entonces, ¿qué deberíamos hacer para que el blog, sea más ligero?

Blogger ofrece algunos consejos a los que también haré referencia:

En lo que respecta a las imágenes y otros elementos multimedia

Sin lugar a dudas las imágenes, videos y otros elementos multimedia, pueden resultar muy atractivos para los usuarios, por lo que prescindir de ellos, pudiera no ser una opción viable. Podemos usarlas sin problemas si seguimos unas cuantas pautas:

1. Antes de subir una imagen a tu blog, redúcela de tamaño, en ocaciones se suben imágenes de fotografías que se tomaron, directamente sin antes editarlas, esto es un grave error, ya que una imagen así puede resultar muy pesada.

2. Si necesitas mostrar imágenes grandes, puedes colocar en el post una más pequeña, y enlazarla con una mas grande de tu álbum Picasa por ejemplo.

3. Almacena las imágenes en un formato ligero; no tienes que sacrificar la calidad de la imagen tanto, puedes comparar como se ve la imagen en los distintos formatos y decidir cuál usar. Para decidir que formato de imagen puede resultar el más adecuado, puedes leer esta guía de formatos de imágenes. Si utilizas Photoshop y Gimp para ediatar las imágenes, utiliza la opcion de "Save for web", ahí puedes comparar el tamaño de los distintos formatos en Kilobytes o bytes según la imagen y comprimirla. Si no utilizas ninguno de esos programas puedes optimizar las imágenes usando algunos programas online, por ejemplo:

En este último puedes comparar como se ve la imagen y ver si pierde o no mucha calidad según el formato.

4. Si utilizas plantillas de terceros, optimiza las imágenes y almacénalas por ti mismo en Picasa, subiendo las imágenes desde una entrada de tu blog por ejemplo. Puedes consultar la guia de formatos citada arriba, y si utilizas Photoshop y Gimp para editar las imágenes, utiliza la opción de "Save for web", como mencionaba en el punto anterior.

5. Puedes considerar eliminar widgets o elementos innecesarios, como relojes, animaciones con Javascript, etc, todo aquello que no tienen ninguna utilidad verdadera. ¿le gustará eso a la gente que visista tu blog? Puedes hacer una encuesta, para preguntárselos ;)

6. Utiliza sprites para evitar usar muchas imágenes, por ejemplo, en el caso de los iconos que uses en tu blog.

7. Utiliza sólo enlaces de las imágenes de un solo proveedor de almacenamiento de imágenes como Picasa (donde se almacenan las imágenes que subes desde los posts o al subir una imagen desde tu computadora del gadget Imagen).

En lo que respecta a las entradas del blog

Tal vez esté de más decir que se reduzca la cantidad de entradas, si de cualquier modo, no se mostrará el número de entradas configurado si la página es pesada, sin embargo, si hacemos algunos cambios y que ahora se citan, tendremos más oportunidad de que se muestre un número mayor de entradas, pensando en que es eso lo que se pretende.

1. Crea saltos de linea en las entradas, que sirve para mostrar sólo un resumen en la página principal.

Javascript y widgets de terceros

Blogger recomienda usar sólo sus widgets o JavaScript que proveen, claro, esto puede ser limitante para algunos que decidimos usar Javascript de terceros, de cualquier modo, podemos:

1. Poner el JavaScript al final de la página, (antes de cierre de la etiqueta body "</body>") o bien, si éste se agregó a un gadget de la columna lateral, ponerlo como último elemento.

En lo que respecta a los códigos que agregas a la plantilla

1. Puedes comprimir el CSS de tu blog, usando este un compresor de CSS.

2. También puedes comprimir el Javascript usando este compresor.

Cómo saber el tiempo de carga de tu blog

Puedes usar algunos programas en linea que te permiten medir el tiempo de carga de tu blog, como:

loads.in
Stopwatch (que recomienda blogger)

Ten en cuenta que el resultado puede variar, según el país y el navegador utilizado.

Conclusiones

Definitivamente cuidar el tiempo de carga del blog, es un factor que no debería tomarse a la ligera, principalmente pensando en la comodidad de nuestros usuarios al navegar, y para aquellos que desean posicionarse mejor en los motores de búsqueda como Google.

Evidentemente Google, (como propietario de ambos servicios: Blogger y el buscador) para mostrar congruencia con los cambios hechos en su motor de búsqueda, cambió la forma en que se envía la información del blog al navegador, para mejorar su rendimiento, resaltando así la importancia que le da al tiempo de carga a un sitio...

Imagen obtenida de:
freepik.es

Los 7 Valores Básicos de un Bloguero +1

noreply@blogger.com (Karla Castañeda) — Mon, 09 Apr 2012 22:09:00 +0000

Hace unos días, leía un tweet de Marco Ayuso, (a quien sigo en Twitter) que decía: -¿cuál es el valor más importante que rige tu vida?- y me motivó a reflexionar sobre los valores que como blogueros, seguramente nos impulsen a escribir en nuestro blog, compartiendo experiencias, valores, y conocimientos, o con los que nos sintamos identificados y que también nos permiten mantenernos en esta increíble actividad como blogueros...

1. La honestidad. Decir la verdad, así de fácil, nunca mentir. Esta cualidad te permite ganar la confianza y el respeto por parte de tus lectores. ¿Cuándo incurrimos en una práctica deshonesta como blogeros?, (1) al crear falsas expectativas cuando ofrecemos algo, (2) al asegurar que sabemos algo siendo esto falso, (3) al decir que somos quienes "no somos", etc. Sin honestidad difícilmente sobrevivirá un blog.

2. La humildad. En un blog compartes pero también te enriqueces de los demás, si esto no sucede, se pierde el sentido. Sentir que se posee el conocimiento absoluto sobre toda las cosas, es egolatría, y esta dista mucho de la humildad. También, es importante saber aceptar ante los demás si nos equivocamos, y pedir disculpas si sucede, y como decía Randy Pausch preguntar que podemos hacer para compensar el error.

3. La constancia o perseverancia. Escribir de forma constante requiere de altas dosis de automotivación, para no perder esa chispa o impulso, es necesario ser perseverante, esforzarse siempre. Para no perder el rumbo, es necesario trazarnos metas y trabajar para conseguirlas, la perseverancia nos permite lograrlas. La perseverancia es un valor que obtenemos desde la infancia, y si esta fue muy escasa, habrá que ejercitarla con mucha voluntad.

4. La comunicación. De manera innata tenemos la cualidad de comunicarnos, como bloguero, la comunicación surge del deseo de compartir con los demás, y se fortalece de la generosidad que implica el compartir algo. La comunicación entonces, te permite transmitir con otros tus conocimientos, valores y experiencias, buscando el enriquecimiento mutuo. Sin duda la cualidad principal al empezar un blog.

5. La generosidad. Una de las cosas que más admiro, es la cualidad de los demás, de "dar sin esperar nada a cambio". Muy a menudo encuentro recetas deliciosas compartidas en los blogs, tips maravillosos que me enseñan a llevar a cabo algún proyecto personal, los cuales requirieron tiempo y esfuerzo para ser expuestos en un blog, y así llegar al alcance de todos.

6. La tolerancia. Seguramente no estaremos de acuerdo con todos los puntos de vista expuestos en un blog, o con los comentarios, pero, es importante que aceptemos esas ideas o puntos de vista, al final de cuentas, no todos somos iguales. También, nunca olvidemos ser respetuosos cuando queremos comunicar nuestra oposición, o desacuerdo.

7. El respeto. Sin duda todo el esfuerzo y trabajo que realizan los blogueros en sus distintas temáticas, merecen respeto y consideración. Es importante respetar las condiciones de uso de algunos recursos que disponen distintos sitios web, como créditos en los tutoriales o publicaciones, créditos en las plantillas, o algunos widgets que demandan dicho crédito, ¿respetas eso?

+1. La responsabilidad. Citado al final, pero no por ello menos importante. Este valor, al practicarlo, promueve la confianza que puedan tener nuestros lectores hacia nosostros. Lo practicamos por ejemplo cuando nos preocupamos por proveer información veraz y confiable; para esto, es necesario entonces investigar bien un tema que queramos compartir, y escribir siempre las referencias y/o las fuentes.

Si posees todas estas cualidades, muy probablemente te sentirás pleno con tu actividad como bloguero, y muy seguramente tendrás reconocimiento, respeto, y confianza por parte de otros.

¿Cuál es el valor más importante para ti como Bloguero?

Imágenes extraídas de Google imágenes, los sitios:
My Career buzz
Blogs de la gente
Panorama Diario
Tu mundo escolar

Galería de Imágenes con el Gadget de Entradas Populares con Título Emergente

noreply@blogger.com (Karla Castañeda) — Mon, 09 Apr 2012 21:28:00 +0000

Hace unos días Oloman, publicó una entrada muy interesante, donde explica como aumentar el tamaño de las miniaturas o thumbnails de los gadgets de Blogger, usando un poco de JavaScript. Esto nos permitirá mostrar imágenes más grandes, que las que Blogger envía por defecto.

Lo que haremos entonces usando esa posibilidad, será, crear una galería horizontal, y que el título de la entrada aparezca al poner el puntero del ratón sobre la imagen, creando un efecto de deslizamiento por medio de transiciones. A continuación puedes ver el resultado en la imagen.

click para ampliar

Aunque usaremos el script para agrandar las imágenes, este no supone una carga grande para el blog, ya que lo colocamos al final de la página, y el efecto del título lo conseguimos sólo con CSS. El resultado lo puedes ver ahora mismo en la demostración.

Demostración

¿Te gusta, y le encuentras utilidad para tu blog?, entonces veamos como hacerlo.

Cómo implementarlo en el blog

Primero, agregas el gadget de Entradas populares, y lo configuras para que éste sólo muestre imagen en miniatura, sin el fragmento, como se aprecia en la imagen.

Luego, ve a Plantilla > Personalizar > Avanzado > Añadir CSS, y en el campo agrega el siguiente código CSS.

#PopularPosts1{margin:0; padding:0}
#PopularPosts1 h2{display:none}
#PopularPosts1 ul{width:100%; margin:0}
#PopularPosts1 .item-title a{display:none}
#PopularPosts1 a.title-popu span{Position:absolute; bottom:-8px; left:0px; filter:alpha(opacity=0); opacity:0; color:#fff; text-decoration:none; padding:5px 5px 5px 8px; background:#000; width:189px; display:block}
#PopularPosts1 li img, #PopularPosts1 a.title-popu span{-webkit-transition:all 0.25s ease-in-out; -moz-transition:all 0.25s ease-in-out; -o-transition:all 0.25s ease-in-out; -ms-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out}
#PopularPosts1 ul li{float:left; list-style-type:none; padding:0 5px 0 0; position:relative; top:0; left:0}
#PopularPosts1 li img{background:#ccc; padding:1px; transition:all .5s linear; -o-transition:all .5s linear; -moz-transition:all .5s linear; -webkit-transition:all .5s linear}
#PopularPosts1 a.quickedit{display:none}
#PopularPosts1 li img:hover, #PopularPosts1 a.title-popu:hover span{opacity:.6; filter:alpha(opacity=60)}
#PopularPosts1 a.title-popu:hover span{bottom:8px}
#PopularPosts1 a.title-popu span:hover{color:#5658BB}

Algunas Notas del CSS:

En #PopularPosts1 a.title-popu span definimos el color de fondo, del bloque donde aparece el titulo de la entrada, el color del texto en "color:#fff;", y le damos padding: " padding:5px 5px 5px 8px;" para separar el texto de los extremos.

En #PopularPosts1 li img, le ponemos color de fondo en "background:#ccc;", y le damos padding " padding:1px;" para que simule el borde.

Después, vas a la edición de HTML de la plantilla, y con la ayuda de Ctrl F, buscas la parte del código que controla el widget de entradas populares, cuando estas sólo muestran imágenes:


<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>

Una vez identificado ese código, lo cambias por este:

<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a class='title-popu' expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/><span><data:post.title/></span>
</a>
</div>

Nota: Para ubicar bien el código, identifica el comentario resaltado de azul, y el div de apertura y cierre resaltados de rojo.

Finalmente, y ya estando en la Edición de HTML de la plantilla pegas el siguiente script antes de </body>:

<script type='text/javascript'> function redimin(id,size){var artilugio = document.getElementById(id);var sustitucion = artilugio.innerHTML;artilugio.innerHTML = sustitucion.replace(/s72-c/g,"s"+size+"-c");var imagenes = artilugio.getElementsByTagName("img");for(var i=0;i<imagenes.length;i++){ imagenes[i].width = size; imagenes[i].height = size; }}redimin("PopularPosts1",200); </script>

Lo que resalté de rojo, es el ID del widget de entradas populares, si usaras un segundo gadget, lo cambiarás por PopularPosts2, lo mismo para el código CSS. Recuerda que blogger los va numerando de forma sucesiva.

Por último, verificas en vista previa y si todo luce bien guardas los cambios.

Notas finales:
-Te recomiendo este elemento al final de la página, ya que pueden verse las miniaturas antes de que se ejecute el script.

-Se puede cambiar el tamaño de la imagen, en el script viene resaltado de azul (200), y tendrás que hacer cambios en el CSS.

-En Internet Explorer no ocurre el efecto de deslizamiento del titulo del post, (hacia arriba) y el efecto en la opacidad, ya que no soportan las transiciones, sin embargo, si se verá la opacidad de la imágenes y el titulo que aparece al poner el puntero del ratón sobre la imagen.

-Puedes personalizar bordes, fondos, etc, etc.

Los Bloggers...¿somos qué?

noreply@blogger.com (Karla Castañeda) — Fri, 06 Apr 2012 22:00:00 +0000

Sin duda, la pasión por lo que hacemos, son el motor que nos impulsa a continuar con esta maravillosa actividad como bloggers o blogueros, pero en ocasiones, cuando ésta se desborda, se pierde el equilibrio y es cuando puede volverse una actividad insana.

Recordemos que siempre es necesario un espacio para descansar, divertirse, e interactuar o comunicarte con otros en la vida real, no sólo en la virtual. De ese modo, se revitalizará tu mente y espíritu y seguramente te sentirás más inspirado a seguir compartiendo más cosas interesantes con los demás ;)

Fuente del comic | Artista Guerrero

2 Nuevos Gadgets en Blogger: Botón +1 e Insignia de Google+

noreply@blogger.com (Karla Castañeda) — Wed, 04 Apr 2012 18:20:00 +0000

Blogger ha añadido dos nuevos gadgets para que puedas poner en tu blog, siguiendo unos simples pasos.
Se trata de dos gadgets que están estrechamente relacionados con Google, y su notable interés en impulsar su servicio de Google+. Estos gadgets permitirán aumentar las recomendaciones a tu blog, en la búsqueda Google.

El primer gadget es el botón +1, y al agregarlo, los usuarios de tu blog podrán recomendar tu contenido en la búsqueda de Google. El segundo es la Insignia de Google+, que servirá para que los usuarios de tu blog te agreguen a un círculo y así aumentar tu audiencia en Google+.

Gadget con el Botón +1

Si aún no lo tienes, ahora lo podrás agregar muy fácilmente y sin complicaciones, sólo ve a diseño, usando la nueva interfaz, y agrega el gadget, seleccionando la opción de Botón +1.

Podrás elegir el tamaño del botón, y el tipo de anotación como se muestra en la imagen.

Una vez configuradas tus preferencias, guardas los cambios y listo, ya tienes integrado el botón +1 para que los usuarios de tu blog recomienden tu contenido en Google.

Gadget con la Insignia de Google+

Otro elemento que ya antes estaba disponible desde Google Developers, y que ahora podrás agregar fácilmente desde la sección de Diseño de tu blog, y así, aumentar tus posibilidades de capturar a una mayor audiencia en Google+.

Para agregarlo, simplemente vas a Diseño y seleccionas el gadget de Insignia de Google+

Luego, tendrás que añadir el ID de tu página en Googe+, o el ID del perfil de Google, si no tuvieras página de Google+, en el campo correspondiente, como se aprecia en la imagen:

El ID de tu página lo consigues yendo a la página de Google+, y copiando la numeración que aparace entre las barritas diagonales, en la barra de direcciones del navegador. Si no tienes página y si así lo quieres, puedes usar tu perfil, entonces tendrás que ira a la página de tu perfil e igualmente copiar la numeración.

Luego eliges el color de fondo, guardas los cambios y listo, ya tienes instalado el gadget con la insignia de Google+ en tu blog.

Nota: En las imágenes muestro el ID de mi perfil, no de mi página.

Notas Finales y conclusiones

Estos gadgets, como el resto de gadgets que Blogger ofrece, hacen más accesible elementos claves para el blog, de tal modo que, cualquier usuario de Blogger puedan añadirlos fácilmente.

Sin duda Google está concentrando sus esfuerzos en facilitar aplicaciones dentro de su plataforma de blogs (Blogger) para promover su conocido servicio de Google+, valiéndose del argumento de que esto ayudaría a obtener más recomendaciones para la página web en su motor de búsqueda y la consecuencia sería entonces: ¿colocar a los sitios en una mejor posición en su motor?, a mi no me queda muy claro...

*Actualizado (Algunas palabras en la redacción).

2 Excelentes Packs de Iconos en Formato de Fuente (OTF)

noreply@blogger.com (Karla Castañeda) — Sun, 01 Apr 2012 05:07:00 +0000

Estos son más de 100 iconos en formato OpenType (OTF) que indiscutiblemente te serán muy útiles, te será muy fácil poner/cambiar el color, tamaño, o darles el estilo que quieras, desde un editor de imágenes como Photoshop, puesto que funcionan como fuentes, ¡tienes que probarlos!

1. Pictogramas Modernos en formato OTF (70+ iconos)

Descargar desde la fuente

2. Paquete de Iconos Sociales en formato OTF (74 iconos)

Descargar desde la fuente

15+ Inspiradores Ejemplos de Sitios Web con Navegación Fija

noreply@blogger.com (Karla Castañeda) — Wed, 28 Mar 2012 22:56:00 +0000

Tal vez estés trabajando en crear un menú de navegación para tu blog, pensando en que esto le permitirá a tus usuarios navegar cómodamente de página en página, y así facilitarles la tarea de acceder al contenido de tu sitio.

¡Bien hecho!, un menú de navegación es un elemento clave para cualquier sitio web, por las razones que anteriormente citaba, no importa que sea vertical u horizontal, lo importante es que éste sea visible de preferencia, y que permita explorar tu contenido fácilmente.

Estos son más de 15 ejemplos de sitios web que utilizan navegación fija (algunos en la parte superior de la página, otros en la columna lateral, algunos con el logo también fijo), para que te inspiren, si es que tienes pensado usar un menú fijo. Aunque en muchos de estos sitios, el contenido está compuesto por lo que muestran en la lista de enlaces de las páginas del menú, un menú fijo puede resultar estratégico en blogs que pretendan destacar algunas páginas puesto que éste siempre estará a la vista.

Si no sabes cómo crear un menú horizontal fijo, en este post, puedes ver como crear una sección fija para agregar ahí dos gadgets y poner por ejemplo un gadget de lista de enlaces o bien la lista de páginas de tu blog para crear el menú; también, en la otra sección puedes colocar otro elemento crítico, que permita ser usado oportunamente ;)

1. More than Twenty

Ir a: More than twenty

2. StudioChirpy

Ir a: StudioChirpy

3. Designbyface

Ir a: Designbyface

4. Looks Like Good Design.com

Ir a: Looks like good design

5. Bloom London

Ir a: Bloom London

6. Bloom Blog

Ir a: Bloom Blog

7. HappyCog