WebMynd: Google ampliado |
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 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, 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 Twitter |
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 descripciones |
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 |
La etiqueta META |
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.
ProtoFlow: Un efecto singular |
ProtoFlow es un script que muestra imágenes con un efecto muy original y si bien no es aplicable para cualquier cosa, no deja de ser divertido y bastante sencillo de utilizar.Utiliza las librerías Prototype y Scriptaculous así que debemos tener ambas agregadas en nuestra plantilla (más información).
La última versión podemos descargarla en formato ZIP
desde la misma web y allí encontraremos todas las librerías necesarias además de algunos ejemplos y abundante documentación. En realidad, de todo eso sólo necesitamos algunos archivos así que este otro ZIP contiene sólo lo mínimo necesario para implementar el efecto (las dos imágenes necesarias ya están alojadas en ImageShack)Necesitamos agregar dos scripts: reflection.js y protoFlow.js. Lo hacemos como siempre, antes de </head>:
<script src="URL_reflection.js" type="text/javascript"></script> <script src="URL_protoFlow.js" type="text/javascript"></script>
A continuación de esto, la hoja de estilo que podemos cargar desde un archivo externo o bien copiar y pegar el contenido dentro de etiquetas STYLE:
<link href="URL_protoFlow.css" rel="stylesheet" type="text/css" />Por último, agregamos lo siguiente para que todo se ejecute recién cuando la página está cargada por completo y con eso, evitamos problemas:
<script type='text/javascript'>
//<![CDATA[
Event.observe(window, 'load', function() {
cf = new ProtoFlow($("protoflow"), {
captions: true,
useReflection: true,
enableOnClickScroll: true
});
});
// ]]>
</script>Listo. Ahora ya podemos utilizar el efecto en cualquier post agregando algo similar a esto:
<div id="protoflow"> <a href="#"><img src="URL_imagen1" alt="Titulo 1"/></a> <a href="#"><img src="URL_imagen2" alt="Titulo 2"/></a> <a href="#"><img src="URL_imagen3" alt="Titulo 3"/></a> <a href="#"><img src="URL_imagen4" alt="Titulo 4"/></a> </div>
Como se ve, sólo son enlaces con una imagen donde el atributo ALT será el texto optativo que veremos debajo de cada una.
Las definiciones CSS son muy sencillas y no hay mucho que configurar:
Las definiciones CSS son muy sencillas y no hay mucho que configurar:
#protoflow { /* es el alto total (más o menos cuatro veces la altura de las imágenes */
height: 400px;
width: auto;
}
.sliderTrack { /* el slider */
background: transparent url('URL_trackfillleft.png') no-repeat left top;
height: 15px;
position: relative;
text-align: left;
width: 137px;
}
.sliderHandle { /* el control del slider */
background: transparent url('URL_knob.png') no-repeat left top;
cursor: pointer;
height: 16px;
margin-left: -2px;
position: absolute;
top: -5px;
width: 16px;
}
.protoCaptions { /* el área de textos inferior */
display: none;
}
.captionHolder { /* el texto */
color: black;
font-size: 34px;
} 
smARThistory: La historia del arte |
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.
Totem Destroyer 2 |
Y si Totem Destroyer era adictivo, la zaga, Totem Destroyer 2 y sus 50 niveles es ...
(Paciencia que tiene 7 megas
(Paciencia que tiene 7 megas
Wallpapers (Colores) |
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.
Insertar videos de YouTube con sencillez |
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&autoplay=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&autoplay=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&autoplay=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&autoplay=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 CSS |
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 |
10 plantillas pero hay muchas más |
