| Click en la imagen para previsualizar un modelo reducido. | |
 |  |
 |  |
 |  |
| Descargar el archivo ZIP que contiene las imágenes | |
WebMynd: Google ampliadoWebMynd es una extensión para Firefox que amplia los resultados de las búsquedas realizadas en Google, agregando entradas a Flickr, Wikipedia, Twitter, etc.Incluye herramientas opcionales tales como … |
28feb 2009
|
WebMynd es una extensión para Firefox que amplia los resultados de las búsquedas realizadas en Google, agregando entradas a Flickr, Wikipedia, Twitter, etc.
Incluye herramientas opcionales tales como una barra lateral desde donde podemos aceder a las páginas visitadas recientemente y además, enviarlas a diferentes servicios online. También incluye una alternativa de guardar el historial de navegación. Ambas cosas pueden ser activadas y desactivadas desde el menú Herramientas.
Podemos probarlo online sin necesidad de instalarlo, utilizando este enlace y colocando la palabra que nos guste:
http://www.webmynd.com/demo?query=vagabundia
Incluye herramientas opcionales tales como una barra lateral desde donde podemos aceder a las páginas visitadas recientemente y además, enviarlas a diferentes servicios online. También incluye una alternativa de guardar el historial de navegación. Ambas cosas pueden ser activadas y desactivadas desde el menú Herramientas.
Podemos probarlo online sin necesidad de instalarlo, utilizando este enlace y colocando la palabra que nos guste:
http://www.webmynd.com/demo?query=vagabundia
REFERENCIAS:arturogoga.com
Generando arte Ascii (o algo así)Harto de lidiar con Seguidores, Friends y otras delicias ... dddddddd LLLLLLLLLLL … |
27feb 2009
|
Harto de lidiar con Seguidores, Friends y otras delicias ...
dddddddd
LLLLLLLLLLL d::::::d iiii
L:::::::::L d::::::d i::::i
L:::::::::L d::::::d iiii
LL:::::::LL d:::::d
L:::::L ooooooooooo aaaaaaaaaaaaa ddddddddd:::::d iiiiiiinnnn nnnnnnnn ggggggggg ggggg
L:::::L oo:::::::::::oo a::::::::::::a dd::::::::::::::d i:::::in:::nn::::::::nn g:::::::::ggg::::g
L:::::L o:::::::::::::::o aaaaaaaaa:::::a d::::::::::::::::d i::::in::::::::::::::nn g:::::::::::::::::g
L:::::L o:::::ooooo:::::o a::::ad:::::::ddddd:::::d i::::inn:::::::::::::::ng::::::ggggg::::::gg
L:::::L o::::o o::::o aaaaaaa:::::ad::::::d d:::::d i::::i n:::::nnnn:::::ng:::::g g:::::g
L:::::L o::::o o::::o aa::::::::::::ad:::::d d:::::d i::::i n::::n n::::ng:::::g g:::::g
L:::::L o::::o o::::o a::::aaaa::::::ad:::::d d:::::d i::::i n::::n n::::ng:::::g g:::::g
L:::::L LLLLLLo::::o o::::oa::::a a:::::ad:::::d d:::::d i::::i n::::n n::::ng::::::g g:::::g
LL:::::::LLLLLLLLL:::::Lo:::::ooooo:::::oa::::a a:::::ad::::::ddddd::::::ddi::::::i n::::n n::::ng:::::::ggggg:::::g
L::::::::::::::::::::::Lo:::::::::::::::oa:::::aaaa::::::a d:::::::::::::::::di::::::i n::::n n::::n g::::::::::::::::g
L::::::::::::::::::::::L oo:::::::::::oo a::::::::::aa:::a d:::::::::ddd::::di::::::i n::::n n::::n gg::::::::::::::g
LLLLLLLLLLLLLLLLLLLLLLLL ooooooooooo aaaaaaaaaa aaaa ddddddddd dddddiiiiiiii nnnnnn nnnnnn gggggggg::::::g
g:::::g
gggggg g:::::g
g:::::gg gg:::::g
g::::::ggg:::::::g
gg:::::::::::::g
ggg::::::ggg
gggggg
Text Asciii Art Generator es para divertirse un rato. Entramos y tenemos muchas opciones para crear un texto utilizando fuentes exóticas y distintos colores.
El resultado, podemos guardarlo como imagen en formato PNG:
El resultado, podemos guardarlo como imagen en formato PNG:
Muchos de ellos también pueden ser reproducidos manualmente si usamos una fuente monospace. Por ejemplo:
<pre style="font-family: monospace; font-size: 12px;">
.......
</pre>
888 888 888 888 d8b
888 888 888 888 Y8P
888 888 888 888
Y88b d88P 8888b. .d88b. 8888b. 88888b. 888 888 88888b. .d88888 888 8888b.
Y88b d88P "88b d88P"88b "88b 888 "88b 888 888 888 "88b d88" 888 888 "88b
Y88o88P .d888888 888 888 .d888888 888 888 888 888 888 888 888 888 888 .d888888
Y888P 888 888 Y88b 888 888 888 888 d88P Y88b 888 888 888 Y88b 888 888 888 888
Y8P "Y888888 "Y88888 "Y888888 88888P" "Y88888 888 888 "Y88888 888 "Y888888
888
Y8b d88P
Seguidores Go Home"Buenos días", dijo Mr. Google, "aquí les traigo la verdad revelada, aleluya". Y nos enchufó el nuevo gadget de Seguidores estilo lentejas, si te gustan, las comes y si no, las dejas. Nada de peros, … |
26feb 2009
|
"Buenos días", dijo Mr. Google, "aquí les traigo la verdad revelada, aleluya". Y nos enchufó el nuevo gadget de Seguidores estilo lentejas, si te gustan, las comes y si no, las dejas. Nada de peros, esto es lo que hay y sanseacabó.
Bueno, dice uno que es apenas un blip en la blogocosa, ellos saben, nosotros no.
Y así, de la noche a la mañana, Blogger integra su dudoso elemento Seguidores a su dudoso servicio Google Friend Connect, imagino yo que por una sola razón, competir con Facebook o, mejor dicho, ver si puede recoger algunas de las migajas de ese mercado.
Y es que hace tiempo que Google ha entrado en la espiral de todos los gigantes y se ha olvidado de sus orígenes, cuando era una fuerza que llegó a revolucionar la web. Como dicen, toda revolución se cree la primera y pretende ser la última. Ahora, Google ha entrado en la fase status quo: hay que mantenerse en la cima, hay que rapiñar un poco de todos lados, hay que olvidarse de generar cosas, hay que usar ideas ajenas. Google DEBE ser todo o si no, no será NADA. Terrible destino ese de los imperios, su gloria siempre es el inicio de su decadencia.
February 24, 2009 Friend Connect: Grow Your Blog's Community a sólo dos meses de haber introducido el elemento seguidores con bombos y platillos, nos anuncian cambios profundos ...
2/26/2009 11:10:00 AM Blogger connects to Google Friend Connect dicen que están excitados (estos muchachos tienen problemas hormonales, se excitan por cualquier cosa) porque ya están casi listos para hacer público algo sobre lo que han estado trabajando durante meses: integrar ambos servicios para que nos resulte fácil y nuestros blogs se difundan ...
Bueno, dice uno que es apenas un blip en la blogocosa, ellos saben, nosotros no.
Y así, de la noche a la mañana, Blogger integra su dudoso elemento Seguidores a su dudoso servicio Google Friend Connect, imagino yo que por una sola razón, competir con Facebook o, mejor dicho, ver si puede recoger algunas de las migajas de ese mercado.
Y es que hace tiempo que Google ha entrado en la espiral de todos los gigantes y se ha olvidado de sus orígenes, cuando era una fuerza que llegó a revolucionar la web. Como dicen, toda revolución se cree la primera y pretende ser la última. Ahora, Google ha entrado en la fase status quo: hay que mantenerse en la cima, hay que rapiñar un poco de todos lados, hay que olvidarse de generar cosas, hay que usar ideas ajenas. Google DEBE ser todo o si no, no será NADA. Terrible destino ese de los imperios, su gloria siempre es el inicio de su decadencia.
February 24, 2009 Friend Connect: Grow Your Blog's Community a sólo dos meses de haber introducido el elemento seguidores con bombos y platillos, nos anuncian cambios profundos ...
2/26/2009 11:10:00 AM Blogger connects to Google Friend Connect dicen que están excitados (estos muchachos tienen problemas hormonales, se excitan por cualquier cosa) porque ya están casi listos para hacer público algo sobre lo que han estado trabajando durante meses: integrar ambos servicios para que nos resulte fácil y nuestros blogs se difundan ...
Y los cambios llegaron ... trayendo:
Pérdida de suscripciones: "aquellos que siguen un blog de manera privada ya no se suman; si un blog era seguido en ambos sistemas, uno de forma anónima y otro no, al integrarse los sistemas, el seguimiento se establece como anónimo ..." bueh, esas son traducciones de explicaciones que sólo ellos entienden pero el resultado práctico es un reducción en los totales y andá a cantarle a Gardel.
Un gadget espantoso: "No, no es tan feo", dicen ellos y aunque no lo crean, esa es casi una traducción literal ... no es TAN feo. A veces, es mejor cerrar la boca; no aclaren que oscurece.
Aseguran estar trabajando en formas de permitir personalizarlo y darnos más control. Hasta ahora, sólo hay una ventana con colores a la que accedemos si editamos el elemento en la ventana Diseño | Elementos de la página
¿Les creemos? No sé ni importa, la verdad, deberían haberlo pensado antes. Si se ve muy mal, dan una solución extraordinaria: "quítenlo" (otra vez, la traducción es literal).
El gadget es, en realidad, el mismo que podía agregarse desde Google Friend Connect, si usan ambos, quiten uno de ellos porque son el mismo.
¿Será posible personalizarlo con CSS? Es posible, no veo cómo, sólo he logrado cambiar un par de detalles mínimos y, en este momento, no sé si vale la pena el esfuerzo y he optado por la solucíón mágica: "quitarlo" y esperar a ver si estos cráneos del diseño lo mejoran. Eliminar el elemento no implica otra cosa que no verlo en el blog, los datos se mantienen y cualquiera que se haya suscripto permanecerá suscripto.
¿Por qué dejarlo? ¿Por qué quitarlo? Cada uno tendrá sus razones. Las opiniones que he venido leyendo en distintos sitios es bastante negativa pero, puede ser que a alguien le parezca lo contrario. En lo personal, me parece poco armónico, no poder configurarlo es un detalle que no pienso pasar por alto, no me gustan estas imposiciones y, sobre todo, no le encuentro ninguna utilidad práctica. Entro en Google Friends y veo ventanitas que no me dicen nada, que nada me aportan y que encima, son feas.
Odio las redes sociales porque están bastardeando conceptos humanos. Seguidores era una fea forma de llamar a este coso pero "amigos" es casi peor ¿Comunidad? Las comunidades no se crean porque un par de cráneos en California decidieron algo, se crean con la interacción humana y los blogs, si tienen suerte son en si mismos una comunidad, no necesitamos de esos paraisos artificiales, necesitamos herramientas que funcionen y no nuevos chirimbolos que no funcionan.
Pérdida de suscripciones: "aquellos que siguen un blog de manera privada ya no se suman; si un blog era seguido en ambos sistemas, uno de forma anónima y otro no, al integrarse los sistemas, el seguimiento se establece como anónimo ..." bueh, esas son traducciones de explicaciones que sólo ellos entienden pero el resultado práctico es un reducción en los totales y andá a cantarle a Gardel.
Un gadget espantoso: "No, no es tan feo", dicen ellos y aunque no lo crean, esa es casi una traducción literal ... no es TAN feo. A veces, es mejor cerrar la boca; no aclaren que oscurece.
Aseguran estar trabajando en formas de permitir personalizarlo y darnos más control. Hasta ahora, sólo hay una ventana con colores a la que accedemos si editamos el elemento en la ventana Diseño | Elementos de la página
¿Les creemos? No sé ni importa, la verdad, deberían haberlo pensado antes. Si se ve muy mal, dan una solución extraordinaria: "quítenlo" (otra vez, la traducción es literal).El gadget es, en realidad, el mismo que podía agregarse desde Google Friend Connect, si usan ambos, quiten uno de ellos porque son el mismo.
¿Será posible personalizarlo con CSS? Es posible, no veo cómo, sólo he logrado cambiar un par de detalles mínimos y, en este momento, no sé si vale la pena el esfuerzo y he optado por la solucíón mágica: "quitarlo" y esperar a ver si estos cráneos del diseño lo mejoran. Eliminar el elemento no implica otra cosa que no verlo en el blog, los datos se mantienen y cualquiera que se haya suscripto permanecerá suscripto.
¿Por qué dejarlo? ¿Por qué quitarlo? Cada uno tendrá sus razones. Las opiniones que he venido leyendo en distintos sitios es bastante negativa pero, puede ser que a alguien le parezca lo contrario. En lo personal, me parece poco armónico, no poder configurarlo es un detalle que no pienso pasar por alto, no me gustan estas imposiciones y, sobre todo, no le encuentro ninguna utilidad práctica. Entro en Google Friends y veo ventanitas que no me dicen nada, que nada me aportan y que encima, son feas.
Odio las redes sociales porque están bastardeando conceptos humanos. Seguidores era una fea forma de llamar a este coso pero "amigos" es casi peor ¿Comunidad? Las comunidades no se crean porque un par de cráneos en California decidieron algo, se crean con la interacción humana y los blogs, si tienen suerte son en si mismos una comunidad, no necesitamos de esos paraisos artificiales, necesitamos herramientas que funcionen y no nuevos chirimbolos que no funcionan.
El slang de TwitterResulta que en Twitter también hay un slang que ha surgido por esa limitación de los 140 caracteres que nos impiden expresarnos como nos gustaría, gritando, por ejemplo: … |
26feb 2009
|
Resulta que en Twitter también hay un slang que ha surgido por esa limitación de los 140 caracteres que nos impiden expresarnos como nos gustaría, gritando, por ejemplo: Supercalifragilisticoespialidoso frente a ciertas cosas que leemos.
El slang no es parte del sistema en si mismo sino palabras o caracteres que los usuarios han incorporado y que ya son de uso corriente. En Social.Shirt no sólo venden remeras para fanáticos, también hay un FAQ que explica algunas de esas abreviaturas.
El slang no es parte del sistema en si mismo sino palabras o caracteres que los usuarios han incorporado y que ya son de uso corriente. En Social.Shirt no sólo venden remeras para fanáticos, también hay un FAQ que explica algunas de esas abreviaturas.
Click para cerrar
Click para ver las imágenes.
RT significa ReTweet. Uno lee algo que ha enviado alguno de los que seguimos y lo reenviamos para que lo vean los que nos siguen a a nosotros. Generalmente, se usa combinado con @nombre para que se agregue el enlace al tweet original.
OH significa OverHeard, Es decir, algo que uno haya oido (no leido) y se usa para repetirlo. Lo más común es que no se indique la fuente y que sea una frase anónima.
El caracter # se antepone a cualquier palabra para facilitar su búsqueda. Algunos clientes como TweetDeck transforma esas palabras en enlaces a search.twitter.com.
Otra de las FAQs habla de las formas de responder y quién ve esas respuesta.
Cualquier tweet que comienza con @nombre es considerado una respuesta a un usuario y se muestra en la ventana Reply. Por ejemplo:
Fulano @Mengano blablablabla
Fulano le responde a Mengano. Nosotros, veremos esa respuesta siempre y cuando sigamos a ambos; si sólo seguimos a uno de ellos, no la veremos. Distinto es el caso si, en lugar de estar al inicio, el @nombre está en cualquier otra aprte del mensaje:
Fulano blablablabla @Mengano blablablabla
En este caso, todos los que seguimos a Fulano, veremos el mensaje.
A partir de esto es que otra palabra del slang (que no he visto) es HEY. Usando esto (o no colocando el @nombre al inicio) estamos enviando un tweet a todos los que nos siguen.
Moraleja: el esperanto era una buena idea ...
Fulano @Mengano blablablabla
Fulano le responde a Mengano. Nosotros, veremos esa respuesta siempre y cuando sigamos a ambos; si sólo seguimos a uno de ellos, no la veremos. Distinto es el caso si, en lugar de estar al inicio, el @nombre está en cualquier otra aprte del mensaje:
Fulano blablablabla @Mengano blablablabla
En este caso, todos los que seguimos a Fulano, veremos el mensaje.
A partir de esto es que otra palabra del slang (que no he visto) es HEY. Usando esto (o no colocando el @nombre al inicio) estamos enviando un tweet a todos los que nos siguen.
Moraleja: el esperanto era una buena idea ...
Menú con descripcionesMenu Descriptions es otro gran experimento de Mike Cherim. Sólo requiere CSS y se adapta bien a cualquier navegador.Se trata de dos columnas, la de la izquierda es un menú y la de la derecha cierto … |
25feb 2009
|
Menu Descriptions es otro gran experimento de Mike Cherim. Sólo requiere CSS y se adapta bien a cualquier navegador.
Se trata de dos columnas, la de la izquierda es un menú y la de la derecha cierto contenido. Al colocar el cursor sobre cada item del menú, este se expande superponiéndose al contenido. Pero, mejor es verlo en acción:
Se trata de dos columnas, la de la izquierda es un menú y la de la derecha cierto contenido. Al colocar el cursor sobre cada item del menú, este se expande superponiéndose al contenido. Pero, mejor es verlo en acción:
Ejemplo Contenido
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras et velit in ipsum convallis sagittis. Nunc eu ipsum. Nullam eget velit. Sed molestie erat in turpis. Aenean adipiscing elit interdum elit. Integer lobortis sollicitudin odio. Maecenas augue eros, blandit non, ultrices non, blandit quis, pede. Nullam tempus, velit eu pharetra rhoncus, odio ligula venenatis neque, eu ornare nisi mauris nec ligula.
Morbi convallis consequat dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean lorem orci, sodales at, ornare eu, tristique sed, enim. Curabitur placerat faucibus velit. Quisque dui sapien, fringilla nec, iaculis ut, consequat eget, libero. Praesent tempor metus nec enim. Duis mollis vehicula nisi. Donec ornare.
El Menú
- Inicio Aquí va un texto explicativo del menú INICIO ...
Bienvenidos a blablabla o lo que quiera ponerse ...
Puede usarse CSS para personalizarlo. - Blog Aquí va un texto explicativo del menú BLOG ...
Que es cualquier otra cosa que quiera ser mostrada, incluyendo imágenes
- Contacto Aquí va un texto explicativo del menú CONTACTO ...
No pregunten. Esto es sólo un experimento así que cada uno verá la utilidad que puede darle ...
El HTML lo construimos con este modelo:
<div id="exp_content">
<div id="cmd_wrapper">
<div id="cmd_content">
<h2>Contenido</h2>
<p>Lorem ipsum dolor sit amet ...</p>
</div>
<div id="cmd_sidebar">
<h2>Menú</h2>
<ul id="cmd">
<li><a href="#"><strong>Enlace 1</strong> <span>Aquí va un texto explicativo del enlace 1 ...</span></a></li>
<li><a href="#"><strong>Enlace 2</strong> <span>Aquí va un texto explicativo del enlace 2 ...</span></a></li>
<li><a href="#"><strong>Enlace 3</strong> <span>Aquí va un texto explicativo del enlace 3 ...</span></a></li>
</ul>
</div>
</div>
<div style="clear:both;"></div>
</div>
Todo está incluido en en dos DIVs, uno externo exp_content y otro interno cmd_wrapper que es la mejor forma de lidiar con las flotaciones y evitar problemas en Internet Explorer.
Dentro de ellos hay otros dos DIVs que flotan, uno a la derecha (cmd_content) y otro a la izquierda (cmd_sidebar). El primero es un bloque normal con cualquier contenido y el segundo es el que tendrá las propiedades para expandirse y que serán las que se definan para la lista (cmd).
Este es el CSS necesario:
Dentro de ellos hay otros dos DIVs que flotan, uno a la derecha (cmd_content) y otro a la izquierda (cmd_sidebar). El primero es un bloque normal con cualquier contenido y el segundo es el que tendrá las propiedades para expandirse y que serán las que se definan para la lista (cmd).
Este es el CSS necesario:
<:style type='text/css'>:
#exp_content {
height: auto;
margin: auto;
}
#cmd_wrapper { /* el contenedor centrado y con un ancho fijo */
margin: 0 auto;
width: 610px;
}
#cmd_content { /* el bloque derecho con un contenido cualquiera */
background-color: #color;
display: inline;
float: right;
width: 450px;
}
#cmd_content h2, #cmd_sidebar h2 { /* los títulos */
margin: 5px;
[... cualquier otra propiedad ...]
}
#cmd_content p { /* los párarfos */
margin: 15px;
[... cualquier otra propiedad ...]
}
#cmd_sidebar { /* el bloque izquierdo con el menú */
display: inline;
float: left;
width: 150px;
}
ul#cmd { /* el bloque con la lista expandible */
list-style-type: none;
margin: 5px 0;
}
ul#cmd li { /* cada item de la lista */
background: none;
list-style-type: none;
padding: 0;
margin-bottom: 5px;
}
ul#cmd a { /* cada item de la lista es un enlace que permite expandirla */
display:block;
cursor:pointer;
height: 4em;
padding: 5px;
position:relative;
width:140px;
text-decoration:none;
[... propiedades de las fuentes, colores, fondos, etc ...]
}
ul#cmd a span { /* los items expandidos */
cursor: pointer;
display: block;
height: 4em;
left: -9000px;
padding: 5px 0;
position: absolute;
top: -9000px;
width: 400px;
[... propiedades de las fuentes, colores, fondos, etc ...]
}
ul#cmd a:hover, ul#cmd a:focus, ul#cmd a:active {
[... propiedades optativas del efecto hover ...]
}
/* esto es lo que hace que se expanda cada item */
ul#cmd a:hover span, ul#cmd a:focus span, ul#cmd a:active span {
left :100px;
top:-1px;
}
</style>
La historia en animaciones breves |
24feb 2009
|
La etiqueta METALas etiquetas META se utilizan para agregar información general sobre un documento o página web y están descriptas por la W3C.Algunas, sólo son informativas, por ejemplo:<meta name='title' … |
24feb 2009
|
Las etiquetas META se utilizan para agregar información general sobre un documento o página web y están descriptas por la W3C.
Algunas, sólo son informativas, por ejemplo:
<meta name='title' content='miPaginaWeb' />
indica el título de nuestro sitio
<meta name='language' content='es' />
<meta http-equiv='content-language' content='Spanish' />
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
indican el lenguaje y la codificación de caracteres
<meta name='author' content='miNombre' />
<meta name='owner' content='miNombre' />
<meta name='copyright' content='Copyright blablabla 2009 - Todos los derechos reservados' />
identifican al autor y el tipo de licencia
<meta name='distribution' content='global' />
indica si el contenido es global, regional o de uso interno
<meta name='rating' content='General' />
indica si el sitio es apropiado o no para menores (general | mature | restricted)
<meta name='generator' content='blogger' />
identifica el servicio o programas de diseño que genera el código
Pero, lo más común es que escuchemos de ellas en referencia a los motores de búsqueda y a su importancia en la indexación de nuestros sitios. En ese sentido, sólo hay tres etiquetas META importantes:
keywords permite establecer una serie de palabras separadas por comas que le indican a los motores de búsqueda cuáles son las que definen mejor el tipo de sitio que tenemos. Es indistinto si se usan mayúsculas o minúsculas.
Su efectividad está discutida, muchos dicen que los principales buscadores detectan y penalizan el abuso (listas demasiado largas o repetidas) pero tambien hay quienes entienden que ya no forma parte de los algoritmos y por lo tanto, esa etiqueta ha dejado de ser una herramienta útil.
Si la vamos a emplear, 20 o 30 palabras es más que suficiente:
<meta name='keywords' content="palabra1, palabra2 ..., palabraETC' />
Algunas, sólo son informativas, por ejemplo:
<meta name='title' content='miPaginaWeb' />
indica el título de nuestro sitio
<meta name='language' content='es' />
<meta http-equiv='content-language' content='Spanish' />
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
indican el lenguaje y la codificación de caracteres
<meta name='author' content='miNombre' />
<meta name='owner' content='miNombre' />
<meta name='copyright' content='Copyright blablabla 2009 - Todos los derechos reservados' />
identifican al autor y el tipo de licencia
<meta name='distribution' content='global' />
indica si el contenido es global, regional o de uso interno
<meta name='rating' content='General' />
indica si el sitio es apropiado o no para menores (general | mature | restricted)
<meta name='generator' content='blogger' />
identifica el servicio o programas de diseño que genera el código
Pero, lo más común es que escuchemos de ellas en referencia a los motores de búsqueda y a su importancia en la indexación de nuestros sitios. En ese sentido, sólo hay tres etiquetas META importantes:
keywords permite establecer una serie de palabras separadas por comas que le indican a los motores de búsqueda cuáles son las que definen mejor el tipo de sitio que tenemos. Es indistinto si se usan mayúsculas o minúsculas.
Su efectividad está discutida, muchos dicen que los principales buscadores detectan y penalizan el abuso (listas demasiado largas o repetidas) pero tambien hay quienes entienden que ya no forma parte de los algoritmos y por lo tanto, esa etiqueta ha dejado de ser una herramienta útil.
Si la vamos a emplear, 20 o 30 palabras es más que suficiente:
<meta name='keywords' content="palabra1, palabra2 ..., palabraETC' />
description es un texto mediante el cual describimos nuestro sitio o cada una de sus páginas. Los buscadores leen esta etiqueta y si bien puede ser muy larga, sólo se indexan los 150 primeros caracteres.
<meta name='description' content='Lorem ipsum dolor sit amet ... ' />
robots se usa para indicar a los motores de búsqueda si deben o no indexar el contenido de ciertas páginas (index | noindex) y si queremos que esta acceda a los enlaces que hay en ellas (follow | nofollow). Los valores por defecto son index y follow, así que, en principo, no es necesario indicar nada para que los buscadores indexen el contenido de nuestras páginas y en realidad, se usan para que no lo hagan o, mejor dicho para ciertas páginas no se muestren en los resultados:
<meta name='robots' content='index,follow' />
sí queremos que se indexe y también sus enlaces (es el valor por defecto)
<meta name='robots' content='index,nofollow' />
sí queremos que se indexe pero no sus enlaces
<meta name='robots' content='noindex,follow' />
si no queremos que se indexe pero si sus enlaces
<meta name='robots' content='noindex,nofollow' />
si no queremos que la página ni su contenido sean indexados
Algunas META son más sofisticadas:
refresh permite recargar una página en un intervalo de tiempo (segundos) o bien redireccionarla a otra. Esto último debe evitarse porque los buscadores lo consideraran una técnica prohibida y pueden penalizar el sitio, llegando incluso a eliminarlo de sus índices:
<meta http-equiv='refresh' content='20' />
<meta http-equiv='refresh' content='20;url=http://otroSitio.com/' />
expires se usa para indicarle a los buscadores que cierta pagina tiene
un tiempo de vigencia y terminado este, debe ser eliminada del índice:
<meta meta name='expires' content='never' />
revisit-after
sirve para indicarle a los buscadores que deben volver a visitar la
página en cierto tiempo (obvio que no obedeceran y sólo es una
sugerencia):
<meta name='revisit-after' content='7 days' />
La
caché del navegador también puede ser controlada de tal manera que los
visitantes puedan acceder siempre al contenido actualizado. Por ejemplo:
<meta http-equiv='Pragma' content='no-cache' />
<meta http-equiv='Cache-Control' content='no-cache' />
las páginas no serán guardadas en la caché
¿Hay más? Sí. Hay para todos los gustos:
Window-target fuerza al navegador a abrir el contenido de todos los enlaces en una nueva ventana:
<meta http-equiv='Window-target' content='_blank' />
imagetoolbar permite deshabilitar la barra de herramientas que Internet Explorer muestra cuando se coloca el cursor encima de una imagen:
<meta http-equiv='imagetoolbar' content='no' />
MSSmartTagsPreventParsing es un invento de Microsoft que permitía deshabilitar las llamadas SmartTags, un producto que nunca llegó a implementarse en ningún navegador:
<meta name='MSSmartTagsPreventParsing' content='true' />
Page-enter y Page-Exit se utilizan para generar transiciones en la entrada o salida (sólo en Internet Explorer):
<meta http-equiv='Page-Enter' content='RevealTrans (Duration=4, Transition=23)' />
<meta http-equiv='Page-Exit' content='RevealTrans (Duration=4, Transition=23)' />
En resumen, hay metatags para tirar para el techo, incluso los buscadores agregan los suyos:
<meta name='verify-v1' content='XXXXXXXXXXXXXXXXXX' />
es la que utiliza Google Analytics
<meta name='y_key' content='XXXXXXXXXXXXXXXXXX' />
la usa Yahoo Site Explorer
<meta name='msvalidate.01' content='XXXXXXXXXXXXXXXXXX' />
la usa MSN Webmasters Tools
¿Y entonces? ¿Hay que poner todas esas etiquetas? La respuesta rápida es NO, no es necesario.
<meta name='description' content='Lorem ipsum dolor sit amet ... ' />
robots se usa para indicar a los motores de búsqueda si deben o no indexar el contenido de ciertas páginas (index | noindex) y si queremos que esta acceda a los enlaces que hay en ellas (follow | nofollow). Los valores por defecto son index y follow, así que, en principo, no es necesario indicar nada para que los buscadores indexen el contenido de nuestras páginas y en realidad, se usan para que no lo hagan o, mejor dicho para ciertas páginas no se muestren en los resultados:
<meta name='robots' content='index,follow' />
sí queremos que se indexe y también sus enlaces (es el valor por defecto)
<meta name='robots' content='index,nofollow' />
sí queremos que se indexe pero no sus enlaces
<meta name='robots' content='noindex,follow' />
si no queremos que se indexe pero si sus enlaces
<meta name='robots' content='noindex,nofollow' />
si no queremos que la página ni su contenido sean indexados
Algunas META son más sofisticadas:
refresh permite recargar una página en un intervalo de tiempo (segundos) o bien redireccionarla a otra. Esto último debe evitarse porque los buscadores lo consideraran una técnica prohibida y pueden penalizar el sitio, llegando incluso a eliminarlo de sus índices:
<meta http-equiv='refresh' content='20' />
<meta http-equiv='refresh' content='20;url=http://otroSitio.com/' />
expires se usa para indicarle a los buscadores que cierta pagina tiene
un tiempo de vigencia y terminado este, debe ser eliminada del índice:
<meta meta name='expires' content='never' />
revisit-after
sirve para indicarle a los buscadores que deben volver a visitar la
página en cierto tiempo (obvio que no obedeceran y sólo es una
sugerencia):
<meta name='revisit-after' content='7 days' />
La
caché del navegador también puede ser controlada de tal manera que los
visitantes puedan acceder siempre al contenido actualizado. Por ejemplo:
<meta http-equiv='Pragma' content='no-cache' />
<meta http-equiv='Cache-Control' content='no-cache' />
las páginas no serán guardadas en la caché
¿Hay más? Sí. Hay para todos los gustos:
Window-target fuerza al navegador a abrir el contenido de todos los enlaces en una nueva ventana:
<meta http-equiv='Window-target' content='_blank' />
imagetoolbar permite deshabilitar la barra de herramientas que Internet Explorer muestra cuando se coloca el cursor encima de una imagen:
<meta http-equiv='imagetoolbar' content='no' />
MSSmartTagsPreventParsing es un invento de Microsoft que permitía deshabilitar las llamadas SmartTags, un producto que nunca llegó a implementarse en ningún navegador:
<meta name='MSSmartTagsPreventParsing' content='true' />
Page-enter y Page-Exit se utilizan para generar transiciones en la entrada o salida (sólo en Internet Explorer):
<meta http-equiv='Page-Enter' content='RevealTrans (Duration=4, Transition=23)' />
<meta http-equiv='Page-Exit' content='RevealTrans (Duration=4, Transition=23)' />
En resumen, hay metatags para tirar para el techo, incluso los buscadores agregan los suyos:
<meta name='verify-v1' content='XXXXXXXXXXXXXXXXXX' />
es la que utiliza Google Analytics
<meta name='y_key' content='XXXXXXXXXXXXXXXXXX' />
la usa Yahoo Site Explorer
<meta name='msvalidate.01' content='XXXXXXXXXXXXXXXXXX' />
la usa MSN Webmasters Tools
¿Y entonces? ¿Hay que poner todas esas etiquetas? La respuesta rápida es NO, no es necesario.
smARThistory: La historia del artesmARThistory es un sitio de acceso libre, diseñado de manera muy interesante y que tiene una forma muy atarctiva de mostrar la historia del arte.Incluye una colección de imágenes, podcasts y videos … |
23feb 2009
|
smARThistory es un sitio de acceso libre, diseñado de manera muy interesante y que tiene una forma muy atarctiva de mostrar la historia del arte.Incluye una colección de imágenes, podcasts y videos que también son accesibles a través de distintos servicios como YouTube, Vimeo y Flickr.
Vale la pena darse una vuelta para verla.
Wallpapers (Colores) |
21feb 2009
|
What is this?Blogger agrega nuevos idiomas a su servicio. Lo que no sé es cuál será este que me apareció hoy en el blog de pruebas. Imposible traducirlo. Usé Google Translate y sólo salieron emoticones. … |
21feb 2009
|
Blogger agrega nuevos idiomas a su servicio. Lo que no sé es cuál será este que me apareció hoy en el blog de pruebas.
Imposible traducirlo. Usé Google Translate y sólo salieron emoticones.
Insertar videos de YouTube con sencillezYouTube Embed Magic Tool puede ser útil para quienes quieren evitarse el trabajo de escribir el código necesario cuando se quiere incrustar un video de YouTube haciendo uso de todas las opciones … |
20feb 2009
|
YouTube Embed Magic Tool puede ser útil para quienes quieren evitarse el trabajo de escribir el código necesario cuando se quiere incrustar un video de YouTube haciendo uso de todas las opciones disponibles.
Entramos, colocamos la URL de tipo:
http://www.youtube.com/watch?v=XXXXXXXXXX
seleccionamos ancho y alto y OK, nos dará el código a insertar donde ya estará incluido el uso de HD (alta definición).
Yo diría que es innecesario y que el código generado sigue siendo no válido ya que se insiste en el uso de la etiqueta EMBED pero, algo es algo.
Mucho más sencillo es tener el código en algún borrador y copiarlo cada vez que queremos usarlo:
Entramos, colocamos la URL de tipo:
http://www.youtube.com/watch?v=XXXXXXXXXX
seleccionamos ancho y alto y OK, nos dará el código a insertar donde ya estará incluido el uso de HD (alta definición).
Yo diría que es innecesario y que el código generado sigue siendo no válido ya que se insiste en el uso de la etiqueta EMBED pero, algo es algo.
Mucho más sencillo es tener el código en algún borrador y copiarlo cada vez que queremos usarlo:
<div style="text-align:center;"><object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/XXXXXXXXXX&hl=es&fs=1&rel=0&ap=%2526fmt%3D18&showsearch=0&showinfo=0" /><param name="allowFullScreen" value="true" /><param name="movie" value="http://www.youtube.com/v/XXXXXXXXXX&hl=es&fs=1&rel=0&ap=%2526fmt%3D18&showsearch=0&showinfo=0" /></object></div>
¿Demasiado trabajo? ¿Queremos simplificar las cosas aún más? Usemos JavaScript y creemos una función que inserte los videos de YouTube de manera más automática. Este es el código de un ejemplo simplificado que insertamos antes de </head>:
<script type='text/javascript'>
//<![CDATA[
function insertar_YouTube(IDyoutube) {
var output = "<div style=\"text-align:center;\">";
output += "<object width=\"425\" height=\"350\" id=\"movie\" type=\"application/x-shockwave-flash\" data=\"http://www.youtube.com/v/" + IDyoutube + "&hl=es&fs=1&rel=0&ap=%2526fmt%3D18&showsearch=0&showinfo=0\">";
output += "<param name=\"movie\" value=\"http://www.youtube.com/v/" + IDyoutube + "&hl=es&fs=1&rel=0&ap=%2526fmt%3D18&showsearch=0&showinfo=0\" />";
output += "<param name=\"wmode\" value=\"transparent\" />";
output += "<param name=\"allowfullscreen\" value=\"true\" />";
output += "</object>";
output += "</div>";
document.write (output);
}
//]]>
</script>¿Y para qué serviría? Bastaría insertar esto en un post:
<script>insertar_YouTube("XXXXXXXXXXX");</script>
cambiando las XXXXXXXXXXX por el ID del video.
Por ejemplo si quisiéramos insertar este video:
http://www.youtube.com/watch?v=lhqr-P2O0XI
escribiríamos esto:
<script>insertar_YouTube("lhqr-P2O0XI");</script>
<script>insertar_YouTube("XXXXXXXXXXX");</script>
cambiando las XXXXXXXXXXX por el ID del video.
Por ejemplo si quisiéramos insertar este video:
http://www.youtube.com/watch?v=lhqr-P2O0XI
escribiríamos esto:
<script>insertar_YouTube("lhqr-P2O0XI");</script>
Reemplazando imágenes con CSSEsta técnica par reemplazar imágenes utilizando CSS es una ocurrencia de Mike’s Experiments y es interesante porque permite generar efectos rollover de forma eficaz, precargando las imágenes lo cual … |
19feb 2009
|
Esta técnica par reemplazar imágenes utilizando CSS es una ocurrencia de Mike’s Experiments y es interesante porque permite generar efectos rollover de forma eficaz, precargando las imágenes lo cual hace que el reemplazo de una por otra sea rápido.
El código CSS (en este caso, aplicado a un encabezado) es el siguiente:
El código CSS (en este caso, aplicado a un encabezado) es el siguiente:
h2.demoIR a {
background-color: #000;
border: 4px solid #333;
display: block;
height: valorpx; /* la altura de la imagen */
margin: 0 auto;
width: valorpx; /* el ancho de la imagen */
}
h2.demoIR a:hover, h2.demoIR a:focus, h2.demoIR a:active {
background: #000 url(URL_imagen2) no-repeat 50% 50%;
border: 4px solid #555;
}
h2.demoIR a:hover img, h2.demoIR a:focus img, h2.demoIR a:active img {
background: transparent;
visibility: hidden;
}Y lo usamos de esta manera:
<a href="#">
<img alt="tex" src="URL_imagen1" width="ancho" height="alto" />
</a>
Problemas con el ratón… |
19feb 2009
|
10 plantillas pero hay muchas másRevolution ChurchDemoDescargarMy ScrapBlogDemoDescargarSea BreezeDemoDescargarCute ToonDemoDescargarDreamwork ReduxDemoDescargarNotepad ChaosDemoDescargarCellar HeatDemoDescargarZinmag … |
18feb 2009
|
IE NetRenderer: Una extensión para sufrirUna extensión de Firefox que suele ser útil es IETab que nos permite ver cualquier página utilzando el motor de Internet Explorer. Obviamente, como utilza la versión instalada, el resultado será el … |
18feb 2009
|
Una extensión de Firefox que suele ser útil es IETab que nos permite ver cualquier página utilzando el motor de Internet Explorer. Obviamente, como utilza la versión instalada, el resultado será el mismo que abrir el navegador de manera independiente aunque no dispondremos de algunas opciones.Si queremos saber (porque somos un poco morbosos) cómo se vería una página en otra versión, deberemos utilizar algún programa externo o recurrir a algún sitio que lo haga.
IE NetRenderer es otra extensión que facilita esto ya que agrega un menú contextual desde donde podemos renderizar una página (crear una imagen) mostrando cómo se vería en diferentes versiones: IE5.5, IE6, IE7 e incluso el futuro IE8.Todo esto lo hace utilizando el servicio de IE NetRenderer así que la extensión es muy liviana.
Canonical URL: Lo nuevo, las dudas y BloggerEvitar el contenido duplicado suele ser una de las tareas más complicadas de cualquier blog. No se trata sólo de lidiar con scrapers o copias manuales sino del contenido duplicado que generamos … |
17feb 2009
|
Evitar el contenido duplicado suele ser una de las tareas más complicadas de cualquier blog. No se trata sólo de lidiar con scrapers o copias manuales sino del contenido duplicado que generamos nosotros mismos o, mejor dicho, que genera el servicio que utilizamos.
¿Por qué es importante? Porque el resultado en los buscadores depende de la forma en que estos evaluan los sitios y las repeticiones hacen que la "importancia" de ciertas páginas se diluya, dividiéndose en múltiples páginas. Un ejemplo sencillo de entender es lo que ocurre con un blog ¿Cuál es el contenido relevante? Evidentemente, los posts pero, de manera automática, se crean otra serie de páginas que también incluyen esos posts: páginas de archivos por fecha, páginas de categorias, páginas de etiquetas, páginas de autores, etc, etc (más información).
Por supuesto, esa duplicación no es maliciosa y por lo tanto, no será penalizada pero podría afectar la indexación al resultarle difícil a los buscadores determinar cuál es la importante y cuál es la irrelevante.
En los últimos días, los tres buscadores más importante, Google, Yahoo y Live anunciaron que incorporarán una nueva etiqueta llamada Canonical URL que está pensada para ayudarnos a eliminar ese contenido duplicado de nuestros sitios (más información).
En realidad, no será una etiqueta HTML nueva sino un atributo de la etiqueta LINK que tendrá esta sintaxis:
<link rel="canonical" href="URL_principal" />
y debería ser colocada en el head de nuestras páginas, debajo de TITLE.
¿Qué haría esa etiqueta? Informarle a los buscadores que la página que están evaluando es irrelevante y que el contenido principal está en esa a la que hace referencia el atributo HREF (más información).
¿Cómo debería usarse? Aunque aún no hay muchos detalles, una forma razonable de aplicar este criterio sería colocar esa instrucción en todas las páginas de etiquetas y archivos, estableciendo como URL_principal la página principal de nuestro blog.
Para hacerlo en Blogger, deberíamos recurrir a los condicionales, tal como lo hemos hecho con los títulos y las etiquetas META. Podríamos incorporarlo al mismo código o bien, crear uno distinto; cualquiera de los dos modos agregará esa etiqueta LINK en todas las páginas excepto la principal y las entradas individuales:
¿Por qué es importante? Porque el resultado en los buscadores depende de la forma en que estos evaluan los sitios y las repeticiones hacen que la "importancia" de ciertas páginas se diluya, dividiéndose en múltiples páginas. Un ejemplo sencillo de entender es lo que ocurre con un blog ¿Cuál es el contenido relevante? Evidentemente, los posts pero, de manera automática, se crean otra serie de páginas que también incluyen esos posts: páginas de archivos por fecha, páginas de categorias, páginas de etiquetas, páginas de autores, etc, etc (más información).
Por supuesto, esa duplicación no es maliciosa y por lo tanto, no será penalizada pero podría afectar la indexación al resultarle difícil a los buscadores determinar cuál es la importante y cuál es la irrelevante.
En los últimos días, los tres buscadores más importante, Google, Yahoo y Live anunciaron que incorporarán una nueva etiqueta llamada Canonical URL que está pensada para ayudarnos a eliminar ese contenido duplicado de nuestros sitios (más información).
En realidad, no será una etiqueta HTML nueva sino un atributo de la etiqueta LINK que tendrá esta sintaxis:
<link rel="canonical" href="URL_principal" />
y debería ser colocada en el head de nuestras páginas, debajo de TITLE.
¿Qué haría esa etiqueta? Informarle a los buscadores que la página que están evaluando es irrelevante y que el contenido principal está en esa a la que hace referencia el atributo HREF (más información).
¿Cómo debería usarse? Aunque aún no hay muchos detalles, una forma razonable de aplicar este criterio sería colocar esa instrucción en todas las páginas de etiquetas y archivos, estableciendo como URL_principal la página principal de nuestro blog.
Para hacerlo en Blogger, deberíamos recurrir a los condicionales, tal como lo hemos hecho con los títulos y las etiquetas META. Podríamos incorporarlo al mismo código o bien, crear uno distinto; cualquiera de los dos modos agregará esa etiqueta LINK en todas las páginas excepto la principal y las entradas individuales:
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "index"'>
<link href='http://nombreBlog.blogspot.com/' rel='canonical'/>
</b:if>
<b:if cond='data:blog.pageType == "archive"'>
<link href='http://nombreBlog.blogspot.com/' rel='canonical'/>
</b:if>
</b:if>
Google agrega algunos detalles y trata de responder dudas:
- rel="canonical" no es obligatorio pero es algo que tomarán muy en cuenta a la hora de indexar sitios.
- está permitido el uso de paths relativos
- se recomienda que una vez incluido, no se modifique esa URL para optimizar los resultados
- la URL debe estar en el mismo dominio o subdominio
Yahoo agrega lo suyo:
- las URLs pueden ser absolutas o relativas pero recomiendan que sean absolutas
- el efecto es similar a una redirección 301, los enlaces o referencias detectados se "transfieren" a la URL principal
- tiene carácter transitivo, si en la URL A se indica B como canonical y en B se indica C, esta última, la C, recibirá las referencias de las otras dos
Por útlimo, Live/MSN dice:
- este código no será utilizado de manera obligatoria y será evaluado junto con el resto de la información que provean los sitios para evitar errores o abusos
Moraleja: ¿debemos usarlo o no? La discusión recién comenzó y hay opiniones para todos los gustos.
¿Será posible eliminar YouTube de nuestra PC?Eso es lo que pregunta un navegante en Yahoo Answers:Evidentemente, recibe algunas respuestas (menos de la que yo suponía) pero sólo una de ellas es la correcta. … |
17feb 2009
|
Eso es lo que pregunta un navegante en Yahoo Answers:
Evidentemente, recibe algunas respuestas (menos de la que yo suponía) pero sólo una de ellas es la correcta.
Optimización de títulos y condicionar METAsAunque ZonaFirefox hace rato que dejó Blogger para instalarse en un servidor propio que corre con WordPress, Nico no deja de experimentar ... ya sabemos que Blogger puede transformarse en una … |
16feb 2009
|
Aunque ZonaFirefox hace rato que dejó Blogger para instalarse en un servidor propio que corre con WordPress, Nico no deja de experimentar ... ya sabemos que Blogger puede transformarse en una enfermedad incurable.
En este caso, lo que se le ha ocurrido es avanzar un poco más en la optimización de los títulos, algo que es fundamental a la hora de tener una buena indexación de nuestro sitio.
Hace un tiempo, se había incorporado a los datos que podíamos acceder en el HEAD de nuestra plantilla, uno que nos permitía hacer esto de manera sencilla: <data:blog.pageName/> contiene el título del post y al poder leerlo en el encabezado de nuestro sitio, nos da la posibilidad de utilizarlo para crear una etiqueta TITLE diferenciada cuando accedemos a una página individual:
En este caso, lo que se le ha ocurrido es avanzar un poco más en la optimización de los títulos, algo que es fundamental a la hora de tener una buena indexación de nuestro sitio.
Hace un tiempo, se había incorporado a los datos que podíamos acceder en el HEAD de nuestra plantilla, uno que nos permitía hacer esto de manera sencilla: <data:blog.pageName/> contiene el título del post y al poder leerlo en el encabezado de nuestro sitio, nos da la posibilidad de utilizarlo para crear una etiqueta TITLE diferenciada cuando accedemos a una página individual:
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> : nombreBlog</title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>De esta maner, en lugar de ver siempre esta estructura por defecto:
Nombre del blog : Título del post - Navegador
en las páginas individuales, podríamos tener esta otra:
Título del post : Nombre del blog - Navegador
o cualquier otro modelo que ponga primero el título para que los resultados en los buscadores sean más claros.
Lo que estamos haciendo es utilizar un condicional con dos posibilidades, si estamos en una pagina individual hacemos tal cosa y si no, hacemos tal otra. Sin embargo, esta no es la única condición que soporta Blogger, hay varias más que nos permiten identificar si estamos en la página de inicio, si estamos en una página de archivos, si estamos en una página de etiquetas o navegando a través de la barra inferior (Anteriores / Siguientes).
<b:if cond='data:blog.homepageUrl == data:blog.url'> es verdadero si estamos en la página inicial
<b:if cond='data:blog.pageType == "item"'> es verdadero si estamos en una página de posts
<b:if cond='data:blog.pageType == "archive"'> es verdadero si estamos en una página de archivos
<b:if cond='data:blog.pageType == "index"'> es verdadero si estamos en una página de etiquetas o navegación
Utilizando esto, podríamos generar títulos diferenciados para cada alternativa. Un ejemplo:
Nombre del blog : Título del post - Navegador
en las páginas individuales, podríamos tener esta otra:
Título del post : Nombre del blog - Navegador
o cualquier otro modelo que ponga primero el título para que los resultados en los buscadores sean más claros.
Lo que estamos haciendo es utilizar un condicional con dos posibilidades, si estamos en una pagina individual hacemos tal cosa y si no, hacemos tal otra. Sin embargo, esta no es la única condición que soporta Blogger, hay varias más que nos permiten identificar si estamos en la página de inicio, si estamos en una página de archivos, si estamos en una página de etiquetas o navegando a través de la barra inferior (Anteriores / Siguientes).
<b:if cond='data:blog.homepageUrl == data:blog.url'> es verdadero si estamos en la página inicial
<b:if cond='data:blog.pageType == "item"'> es verdadero si estamos en una página de posts
<b:if cond='data:blog.pageType == "archive"'> es verdadero si estamos en una página de archivos
<b:if cond='data:blog.pageType == "index"'> es verdadero si estamos en una página de etiquetas o navegación
Utilizando esto, podríamos generar títulos diferenciados para cada alternativa. Un ejemplo:
<b:if cond='data:blog.homepageUrl == data:blog.url'> <!-- la página principal --> <title><data:blog.title/></title> <b:else/> <b:if cond='data:blog.pageType == "item"'> <!-- las páginas individuales --> <title><data:blog.pageName/> : <data:blog.title/></title> <b:else/> <b:if cond='data:blog.pageType == "index"'> <!-- las páginas de etiquetas y navegación --> <title><data:blog.pageTitle/> : Un texto indicativo </title> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <!-- las páginas de archivos por fecha --> <title><data:blog.pageTitle/> : Un texto indicativo</title> </b:if> </b:if> </b:if> </b:if>
¿Qué cosas pueden ponerse? Dependerá de cada uno; estos son algunos de los datos disponibles:
data:blog.title
nombre del blog - Navegador
data:blog.pageTitle
nombre del blog - Navegador en la pagina principal
nombre del blog: Titulo post - Navegador en las páginas individuales
nombre del blog - Navegador en las páginas de navegación
nombre del blog: Fecha - Navegador en las páginas de archivos
nombre del blog: Etiqueta - Navegador en las páginas de etiquetas
data:blog.pageName
es el título del post en las páginas individuales
es la fecha las páginas de archivos
es la etiqueta en las páginas de etiquetas
Con este mismo criterio, tal vez podríamos resolver ese error que nos muestran las Herramientas para desarrolladores de Google cuando accedemos al panel de Diagnósticos | Análisis del contenido y nos dice que hay Metadescripciones duplicadas:
"Mientras rastreábamos su sitio, hemos detectado algunos problemas con el contenido de las páginas. Estos problemas no impedirán que su sitio aparezca en los resultados de búsqueda de Google pero, si intenta evitarlos, aportará más información a Google y permitirá dirigir más tráfico a su sitio. Por ejemplo, el texto del título y la metadescripción pueden aparecer en los resultados y es conveniente que sean útiles y descriptivos para atraer a los usuarios."
Usemos entonces los condicionales para crear etiquetas META diferentes. Un ejemplo:
data:blog.title
nombre del blog - Navegador
data:blog.pageTitle
nombre del blog - Navegador en la pagina principal
nombre del blog: Titulo post - Navegador en las páginas individuales
nombre del blog - Navegador en las páginas de navegación
nombre del blog: Fecha - Navegador en las páginas de archivos
nombre del blog: Etiqueta - Navegador en las páginas de etiquetas
data:blog.pageName
es el título del post en las páginas individuales
es la fecha las páginas de archivos
es la etiqueta en las páginas de etiquetas
Con este mismo criterio, tal vez podríamos resolver ese error que nos muestran las Herramientas para desarrolladores de Google cuando accedemos al panel de Diagnósticos | Análisis del contenido y nos dice que hay Metadescripciones duplicadas:
"Mientras rastreábamos su sitio, hemos detectado algunos problemas con el contenido de las páginas. Estos problemas no impedirán que su sitio aparezca en los resultados de búsqueda de Google pero, si intenta evitarlos, aportará más información a Google y permitirá dirigir más tráfico a su sitio. Por ejemplo, el texto del título y la metadescripción pueden aparecer en los resultados y es conveniente que sean útiles y descriptivos para atraer a los usuarios."
Usemos entonces los condicionales para crear etiquetas META diferentes. Un ejemplo:
<b:if cond='data:blog.homepageUrl == data:blog.url'> <title><data:blog.title/></title> <meta name='description' content='descripcion para la página principal' /> <b:else/> <b:if cond='data:blog.pageType == "item"'> <title><data:blog.pageName/> : <data:blog.title/></title> <meta name='description' content='descripcion para las páginas individuales' /> <b:else/> <b:if cond='data:blog.pageType == "index"'> <title><data:blog.pageTitle/> : CUALQUIER TEXTO</title> <meta name='description' content='descripcion para las páginas de etiquetas' /> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <title><data:blog.pageTitle/> : CUALQUIER TEXTO</title> <meta name='description' content='descripcion para las páginas de archivos' /> </b:if> </b:if> </b:if> </b:if>
¿Servirá de algo que la descripción incluya el nombre del post en las páginas individuales? Es posible agregarlo así:
<meta expr:content='data:blog.pageName + ", descripción páginas individuales"' name='description'/>Incluso, sería bueno seleccionar algunas de la etiquetas principales de nuestro sitio y crear etiquetas META específicas para cada una de ellas.
<b:if cond='data:blog.homepageUrl == data:blog.url'> <title><data:blog.title/></title> <meta content='descripción para la página principal' name='description'/> <b:else/> <b:if cond='data:blog.pageType == "item"'> <title><data:blog.pageName/> : <data:blog.title/></title> <meta expr:content='data:blog.pageName + ", descripción páginas individuales"' name='description'/> <b:else/> <b:if cond='data:blog.pageType == "index"'> <b:if cond='data:blog.pageName == ""'> <title><data:blog.pageTitle/></title> <meta content='descripción genérica' name='description'/> <b:else/> <title><data:blog.title/> : Entradas Categoría <data:blog.pageName/></title> <b:if cond='data:blog.pageName == "UNA_ETIQUETA"'> <meta content='descripción para entradas una_etiqueta' name='description'/> <b:else/> <b:if cond='data:blog.pageName == "OTRA_ETIQUETA"'> <meta content='descripción para entradas otra_etiqueta' name='description'/> <b:else/> <b:if cond='data:blog.pageName == "ULTIMA_ETIQUETA"'> <meta content='descripción para entradas ultima_etiqueta' name='description'/> <b:else/> <meta expr:content='data:blog.pageName + ", descripción para cualquier otra"' name='description'/> </b:if> </b:if> </b:if> </b:if> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <title><data:blog.title/> : Entradas Fecha <data:blog.pageName/></title> <meta content='descripción página archivos' name='description'/> <b:else/> <title><data:blog.pageTitle/></title> <meta content='descripción genérica' name='description'/> </b:if> </b:if> </b:if> </b:if>
Y éramos monosDevolve Me ... nosotros mismos hace 3.7 millones de años (cuando no teníamos tantos problemas). Subimos la imagen, ubicamos los puntos de referencia sobre ella y listo: ya somos un Australopithecus … |
15feb 2009
|
Devolve Me ... nosotros mismos hace 3.7 millones de años (cuando no teníamos tantos problemas).
Subimos la imagen, ubicamos los puntos de referencia sobre ella y listo: ya somos un Australopithecus Afarensis.
O un Homo Habilis o un Homo Erectus o un modernísimo Homo Heidelbergensis de ayer nomás, apenas hace quinientos mil años.
REFERENCIAS:Digital Inspiration
Los amores de febreroEn cualquier esquina.En cualquier lugar.A cualquier edad.... aunque a veces ... … |
14feb 2009
|
14 de febrero |
14feb 2009
|
Yo no quiero un amor civilizado, con recibos y escena del sofá;
yo no quiero que viajes al pasado y vuelvas del mercado con ganas de llorar.
Yo no quiero vecinas con pucheros;
yo no quiero sembrar ni compartir;
yo no quiero catorce de febrero ni cumpleaños feliz.
Yo no quiero cargar con tus maletas; yo no quiero que elijas mi champú;
yo no quiero mudarme de planeta, cortarme la coleta, brindar a tu salud.
Yo no quiero domingos por la tarde;
yo no quiero columpio en el jardin;
lo que yo quiero, corazón cobarde, es que mueras por mí.
Y morirme contigo si te matas
y matarme contigo si te mueres
porque el amor cuando no muere mata
porque amores que matan nunca mueren.
Yo no quiero juntar para mañana, no me pidas llegar a fin de mes;
yo no quiero comerme una manzana dos veces por semana sin ganas de comer.
Yo no quiero calor de invernadero;
yo no quiero besar tu cicatriz;
yo no quiero París con aguacero ni Venecia sin tí.
No me esperes a las doce en el juzgado; no me digas volvamos a empezar;
yo no quiero ni libre ni ocupado, ni carne ni pecado, ni orgullo ni piedad.
Yo no quiero saber por qué lo hiciste;
yo no quiero contigo ni sin ti;
lo que yo quiero, muchacha de ojos tristes, es que mueras por mí.
Y morirme contigo si te matas
y matarme contigo si te mueres
porque el amor cuando no muere mata
porque amores que matan nunca mueren.
yo no quiero que viajes al pasado y vuelvas del mercado con ganas de llorar.
Yo no quiero vecinas con pucheros;
yo no quiero sembrar ni compartir;
yo no quiero catorce de febrero ni cumpleaños feliz.
Yo no quiero cargar con tus maletas; yo no quiero que elijas mi champú;
yo no quiero mudarme de planeta, cortarme la coleta, brindar a tu salud.
Yo no quiero domingos por la tarde;
yo no quiero columpio en el jardin;
lo que yo quiero, corazón cobarde, es que mueras por mí.
Y morirme contigo si te matas
y matarme contigo si te mueres
porque el amor cuando no muere mata
porque amores que matan nunca mueren.
Yo no quiero juntar para mañana, no me pidas llegar a fin de mes;
yo no quiero comerme una manzana dos veces por semana sin ganas de comer.
Yo no quiero calor de invernadero;
yo no quiero besar tu cicatriz;
yo no quiero París con aguacero ni Venecia sin tí.
No me esperes a las doce en el juzgado; no me digas volvamos a empezar;
yo no quiero ni libre ni ocupado, ni carne ni pecado, ni orgullo ni piedad.
Yo no quiero saber por qué lo hiciste;
yo no quiero contigo ni sin ti;
lo que yo quiero, muchacha de ojos tristes, es que mueras por mí.
Y morirme contigo si te matas
y matarme contigo si te mueres
porque el amor cuando no muere mata
porque amores que matan nunca mueren.
Títulos, subtítulos y efectosLa realidad siempre supera a la ficción ...Me preguntaron si era posible agregar un subtítulo a las entradas y la respuesta es ... depende. No hay manera de hacerlo de manera automática ya que para … |
13feb 2009
|
La realidad siempre supera a la ficción ...
Me preguntaron si era posible agregar un subtítulo a las entradas y la respuesta es ... depende. No hay manera de hacerlo de manera automática ya que para eso, Blogger debería tener ese dato interno y no lo tiene. Sin emabrgo, podemos hacerlo de manera manual, creando una clase CSS que agregamos a la plantilla y que luego, usamos en los posts, adicionándola al párrafo con el texto.
Por ejemplo, lo más sencillo sería agregar antes de </b:skin> algo así:
Por ejemplo, lo más sencillo sería agregar antes de </b:skin> algo así:
.post-subtitulo {
[propiedades de la fuente a utilizar]
}Y la primera línea de un post sería:
<div class="post-subtitulo">Este es el subtítulo de la entrada.</div>o bien:
<p class="post-subtitulo">Este es el subtítulo de la entrada.</p>No es mucho pero con un poco de CSS puede experimentarse y conseguir algun efecto más si empleamos las propiedades que nos permiten ubicar un elemento con precisión (más información). Estas propiedades son: position, left, top, right y bottom.
Normalmente, los títulos de las entradas tienen una etiqueta de encabezado (h1, h2, h3) y debajo de este hay un DIV cuya clase se llama post-body que contiene la entrada en si misma.
Normalmente, los títulos de las entradas tienen una etiqueta de encabezado (h1, h2, h3) y debajo de este hay un DIV cuya clase se llama post-body que contiene la entrada en si misma.
El titulo de la entrada
Este es el subtítulo de la entrada ...
Sed ipsum tellus, feugiat vel, porttitor eget, pretium consectetur; nisl! Duis nulla turpis; congue in; lobortis at, facilisis vel, magna. Duis mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras dui. Nullam iaculis, nibh non fermentum ultrices, nisi nisl laoreet quam, sit amet malesuada odio elit in augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque eleifend velit non dolor! Aliquam in purus? Nullam ullamcorper urna ac dolor. Pellentesque ultricies. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras bibendum justo et dui. Nam turpis duis.
Lo que nos permite la propiedad position es ubicar un elemento dentro de otro de manera exacta. Para esto, el elemento contenedor (el externo) debe tener establecida la propiedad como relative y el elemento a mover (el interno) debe tenerla estabecida como absolute. Con esto, lo que hacemos es decirle al navegador que ubique el segundo, no donde normalmente iría sino en alguna coordenada cuyo inicio (0,0) es el contenedor.
Por ejemplo, si tenemos dos DIVs, uno dentro del otro con este código:
Por ejemplo, si tenemos dos DIVs, uno dentro del otro con este código:
<div style="position:relative;background-color:white;width:300px;margin:0 auto;height:150px;">
<div style="position:absolute;background-color:red;width:150px;margin:0 auto;height:100px;">
</div>
</div>
El rectángulo rojo se mostraría a partir del ángulo superior izquierdo del blanco que es el que lo contiene pero, como establecimos las posiciones, podemos "mover" el cuadrado rojo a cualquier lado dentro del contenedor usando las propiedades left y top:
<div style="position:relative;background-color:white;width:300px;margin:0 auto;height:150px;">
<div style="position:absolute;background-color:red;width:150px;margin:0 auto;height:100px;left:50px;top:50px">
</div>
</div>
left y top son las coordenadas relativas al origen del contenedor (el blanco) y aceptan valores negativos así que es sencillo "sacar" el contenido del contenedor:
<div style="position:relative;background-color:white;width:300px;margin:0 auto;height:150px;">
<div style="position:absolute;background-color:red;width:150px;margin:0 auto;height:100px;left:-100px;top:-10px">
</div>
</div>
Con este criterio, podríamos hacer que el subtítulo "subiera" y ubicarlo más arriba, junto al título o debajo de este. Para eso, debemos hacer dos cosas, agregar la propiedad position: relative al DIV de los posts y la propiedad position: absolute a los subtítulos de tal manera de poder moverlos con left y top:
.post-body {
position: relative;
}
.post-subtitulo {
position: absolute;
left: valorpx;
top: valorpx;
[propiedades de la fuente a utilizar]
}El titulo de la entrada
Este es el subtítulo de la entrada ...
Sed ipsum tellus, feugiat vel, porttitor eget, pretium consectetur; nisl! Duis nulla turpis; congue in; lobortis at, facilisis vel, magna. Duis mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras dui. Nullam iaculis, nibh non fermentum ultrices, nisi nisl laoreet quam, sit amet malesuada odio elit in augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque eleifend velit non dolor! Aliquam in purus? Nullam ullamcorper urna ac dolor. Pellentesque ultricies. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras bibendum justo et dui. Nam turpis duis.
click para ver el resultado en esta entrada.
Algo similar a eso podría hacerse con los títulos en si mismos, modificando la plantilla, duplicándolos y luego, desplazando uno de ellos unos pocos pixeles para, por ejemplo, crear un efecto de sombras. Un ejemplo:
Algo similar a eso podría hacerse con los títulos en si mismos, modificando la plantilla, duplicándolos y luego, desplazando uno de ellos unos pocos pixeles para, por ejemplo, crear un efecto de sombras. Un ejemplo:
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<span class='sombraTitulo'><data:post.title/></span>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<span class='sombraTitulo'><data:post.title/></span>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<span class='sombraTitulo'><data:post.title/></span>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
Para eso, hay que agregarle al título la propiedad position: absolute y agregar las definiciones de la nueva:
.post h3 {
position: absolute;
.......
}
.sombraTitulo {
left: 1px;
position: absolute;
top: 1px;
.......
}
