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:

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                                                           

"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 ...

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.

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.

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 ...

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:

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:

<: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>

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' />

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.

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.