Lysergic Robots (BETA)

Archive for septiembre 2008

Supongamos que uno esta diseñando una página web y quiere usar cierta tipografía para el contenido, digamos Mamma Gamma. Si alguna persona entra a esa página lo que vera, si no tiene instalada esa fuente, sera alguna predeterminada por su sistema. Esto limita las posibilidades de diseño tipográfico a las fuentes instaladas en el ordenador del usuario final.

El atributo CSS font-face permite incrustar tipografías en las páginas web indicandole la ruta de acceso. Esto es, “instala” la fuente en el cache para que uno pueda visualizar la tipo sin necesidad de instalarla en la máquina.

Aunque la posibilidad de incrustar diversas tipografías en una página web ya existia desde IE5, ésta estaba enfocada al formato propietario de Microsoft “eot” (Embedded Open Type), por lo que ningún otro navegador lo adopto.

Actualmente los navegadores que utilizan el motor de renderizado WebKit como Konqueror, Safari y Chrome soportan esta implementación; no así los que utilizan Gecko como Firefox, Camino, Flock, Epiphany, etcétera (aunque este último a partir de la versión 2.24 -actualmente 2.22- empezara a usar WebKit). Firefox implementara font-face en su versión 3.1, Opera probablemente en la versión 10 e IE tal vez en esta versión ocho.

Esta descripción tipográfica tiene la siguiente forma:
@font-face { <font-description> }

donde <font-description> sería:
descriptor: value;
descriptor: value;

Por ejemplo, aquí la fuente Mamma Gamma es definida y referenciada en una hoja de estílo contenida en un documento HTML.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”>
<HTML>
<HEAD>
<TITLE>Font test</TITLE>
<STYLE TYPE=”text/css” MEDIA=”screen, print”>
@font-face {
font-family: “Mamma Gamma”;
src: url(“http://www.ejemplo.com/fuentes/mammagamma.ttf&#8221;)
}
H1 { font-family: “Mamma Gamma”, sans-serif }
</STYLE>
</HEAD>
<BODY>
<H1>Esta cabecera usara la tipografía Mamma Gamma</H1>
</BODY>
</HTML>

En este caso la hoja de estílo contiene la regla CSS que define a los elementos H1 para que utilicen la fuente Mamma Gamma, donde “src: url(“http://www.ejemplo.com/fuentes/mammagamma.ttf&#8221;)” sera la dirección donde tendremos la fuente tipográfica.

Aquí una web-demo sobre el tema, recuerda que solo si tu navegador soporta esa función la veras correctamente.

Si no es tu caso, aquí un pantallazo de lo que se debería ver:

Puedes checar la página del W3C sobre las especificaciones de este atributo.

Hay una controversia referente a este tema, ya que al tener que hospedar la tipografía en un directorio “abierto” existe la posibilidad de “robarla” facilmente. Mientras tanto, algunas compañias dedicadas a la distribución de tipografías prohiben el uso de sus fuentes bajo este concepto. Puedes ver mas sobre esto aquí.

Anuncios

Pablo Lizardo acaba de publicar la primera parte de un tutorial de Blender sobre Motion Graphics.

Chéquenla, aunque para entenderla bien se tendría que descargar y editar la velocidad, porque va que vuela.

Por cierto, si tienes problemas para insertar videos de Vimeo en WP, micro-mini tutorial para:

Insertar videos de Vimeo en WordPress

Lo único necesario es poner
[ vimeo vimeo.com/(ID del video)]
por ejemplo: [ vimeo vimeo.com/1478602]
sin espacio entre el primer corchete y vimeo (perdón, es que no me funciona la etiqueta “<code>”) y listo, debera aparecer el video deseado:

Aunque ya llovió mucho, sirva este post para recordar esta intervención en la Escuela Nacional de Artes Plásticas, UNAM, Ciudad de México.

Aún en preparación

Fresco, fresco

Los perros bien rápido apañaron el Kraft sobrante, era una noche fria. Que bonitos.

Vista diurna

Aunque nunca fue completada, ya que iba a tener unas olas azules con espuma, pececitos y toda la cosa pero pues siempre no hubo chance.

Ya vendrán nuevas cosas…

“Yo no recomendaría sexo, drogas o locura para todo el mundo. Pero la verdad es que a mí me han servido”
Hunter Stockton Thompson

Etiquetas:

Hugin es una poderosa herramienta multiplataforma para crear panoramas rectilíneos, cilíndricos, estereográficos, entre otros. Tiene la capacidad de unir decenas de imágenes en una sola y con el uso de Enblend borrar las lìneas de unión, corregir diferencias de luz, imágenes sobrepuestas, etcétera.

En este ejemplo, dos imágenes unidas con Hugin antes del render con Enblend

Con Hugin/Enblend, tendremos

El uso de Hugin es muy sencillo e intuitivo. Es Open Source y esta liberado bajo una licencia GPL, pueden usarlo tanto para uso personal como para fines comerciales, y como ya mencione es multiplataforma.

Aquí mi panorama de la Plaza de las Tres Culturas en Tlatelolco, Ciudad de México.

(::click para agrandar::)

Aún tiene varios pequeños errores que corregire después.

Para obtener buenos resultados es importante tomar desde el principio fotografías que tengan varios puntos en común, así Hugin tendrá mayor posibilidad de lograr una buena imágen. Estos puntos de control deben preferiblemente colocarse en objetos estáticos como construcciones, señalizaciones, piedras, etcétera, evitando a personas o árboles; excepto cuando sea necesario como por ejemplo una panoramica de una multitud en un concierto. En este caso uno debe ser rápido para fotografiar.

Hugin genera puntos de control automáticamente, pero si los resultados no les satisfacen, pueden agregarlos manualmente.

En éste caso los puntos de control que Hugin generaba no eran suficientes, surgian errores de desfasamiento en las barras del barandal y no se conectaban unas con otras correctamente. Por lo que manualmente tuve que agregar mas puntos de control.

¡Muchos más! Pero el resultado fue el correcto.

Existen varios tutoriales en la red sobre Hugin, incluso en su propia página; también un grupo en Flickr.
Por último, chequen este gran ejemplo de una panoramica de Londres generada con Hugin.

Pues eso! Un integrante del colectivo Tepalcatlalpan Acá -que por cierto no han actualizado su blog desde hace casi un año- lanzó su marca de t-shirts, Ponzoña. Tambien el No. 2 del fanzine del mismo nombre que no encuentro por ningún lado.

Espero pronto tenga página de contacto con catálogo incluido. Mientras tanto pueden checar el MySpace de Puzz Comix, del mismo autor, MarioBoy.

Etiquetas: ,

ASCII qué?

ASCII (American Standard Code for Information Interchange) es un código de caracteres basados en el alfabeto latino. Las computadoras solo entienden números por lo que, el código ASCII representa numéricamente caracteres como letras y signos, incluyendo los números del 0 al 9; siendo en total 128, 33 no imprimibles (utilizados para controlar dispositivos o el comportamiento del texto) y 95 imprimibles.

El arte ASCII es un medio de producción artístico que basa su creación en los 95 caracteres imprimibles de este código mas algunos otros derivados del código base.

Un ejemplo de esto sería:

                                .::                       .
                               :::::::....                `::
                          .::::::::::::::::::..::::::::::::::.
                   .:  .::::::::::::::::::::::::::::::::::::::::
                  ::::::::::::::::::::::::::::::::::::::::::::::::
                  `:::::::::::::::``::::::::::: `::::::::::::::::::
                   ::::::::::'zc$$$b`:',cc,`:::' :''``,c=`:::::::::::'
                  ::::::::'::: $$$$$$$$$$$$$c,,u,zd$$$$$c,',zc,`::::'
                  ::::::'z$ccd$$$$$P" . "$$$$$$$$$$$$.. `?$$$$".::::
                 :::::::dP?$$$$$$$" d$$$$$$$$$$$$$$$$$$$b."$$L,`:::
               :::::::::.::$$$$$$ z$$$$$$$$$$$$$$$$$$$$$$$c"$$$$,::..
                `'::::::'`.$$$$$$$"$F<$"3$$$$$$$$$$$$$$?$$?$$P:..:''
                  `:::::`$$$$$$$"?   .. ?"$$$$$$$$$$r`" " <"3$c`:
                    :::::."?:`$$F    d$$.<$$$$$$$$P    4$c $"""/
                     :::::::::J$ .,,$$$$P $$$$$$$$>   ,$$$F  ::::
                  `:::'```'',d$$c`?$$$$P"J$$$$$$$$."$$$$$P db`''
                      f,r4b4$$$$$c ,`"".-$$$$$$$$$$c """" c$$$ b
                      F ,$"d$$$$$$$$c$bd$$$$$$$ $$$$b$bJ$L$$$P P
                            "?$$$$$$$$$$$$$$$P??$$$$$$$$$$$P" '
                               `"""???$PFFF""    """"""""
                            4$$$$$$cdccccc$$$bcc$$$$$$$$$$$$bc
                           d$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$bc
                          $$$$$$$$$$$??????$$$FF?????P 3$$$$$$$$$$c.
                         d$$$$$$$$P':::::::`?'::::::::   "?$$$$$$$$$$c.
                        4$$$$$P  $ :::::::::::::::::::      "?$$$$$$$$$c
                        $$$$$P  `$.::::::::::::::::::          `"".$$$$$c
                      .$$$$$$'   `$-`::::::::::::::'             c$$$$$$$
                     z$$$$$$'      ::::::::::::::::            .$$$$$$$$
                   .d$$$$$$'       `:::::::::::::::           .$$$$$$$F'
                  d$$$$$$$'         `::::::::::::::          ,$$$$$$P"
                .$$$$$$$F            ::::::::::::::: 3c,  . 4$$$$P"'
               z$$$$$$$"           :::::::::::::: ==$$$$$c % "?"
              z$$$$$$"           .::::::::::::::::..:3$$$$P L
              `?$$$"            ::::::::::::::::::::.?::: . $
   .,,,,ccc$L ? ""             :::::::::::::::::::::::::::.c%
 :$$ ?=?P$$$%                 ::::::::::::::::::::::::::::
:"???$%==""  "d               :::::::::::::::::::::::::::::    .
                             `:::::::::::::::::::::::::::::::::::
                              ::::::::::::::::::::::::::::::::::
                         :   :::::::::::::::::````,,,,zcc`''''`
                         :::::::::::'zc,,,,,cd$$ `???""""
                         `::::::::',d$$$$$$$$$$$      =
                           `````` $$$$$$$$$$$$$$ $$$$$c$F
                                  `$$$$$$$$$$$$$ $$$$$$F
                                   `$$$$$$$$$$$F<$$$$$$
                                    `$$$$$$$$$$'$$$$$$F
                                     4$$$$$$$$F<$$$$$P
                                    z$$$$$$$$F $$$$$P
                                   c$$$$$$$$$ J$$$$$F
                                 .$$$$$$$$$$"z$$$$$$
                                 $$$$$$$$$P c$$$$$$$
                                $$$$$$$$$" 4$$$$$$$F
                               d$$$$$$$$"  $$$$$$$$'
                              .$$$$$$$P    4$$$$$$$
                              J$$$$$$"      $$$$$$F
                              $$$$$P        ?$$$$$
                             d$$$$F         <$$$$F
                             $$$P"           $$$P
                            J$$P            <$$$'
                           .$$P             $$$$
                          .$$$             `$$$L
                         z$$$F            / "$$$
                        $$$$%/           ( ;. "?.
                       ;"?"">            ``  `.  \
                       \.- `                   `--'

¡Pfff! Betty Boop ¡Boop Boop a Doop!

Christopher Johnson tiene una colección amplísima de ASCII Art que ha ido recopilando por casi 14 años.

Y la geekez ASCIIana de la semana: ¡ASCIIMATION! ¡PERO ESPEREN! ¡NO LO ABRAN! Mejor sigan las instrucciones de abajo si se quieren ver mas geeks:

En Linux: abran consola y tecleen “telnet towel.blinkenlights.nl” (sin comillas obviamente) y preparen unas palomitas (bueno, mejor prepárenlas antes).
En Mac debería funcionar con la terminal igual que en Linux.
En Windowse: Inicio > Ejecutar > escribes “telnet towel.blinkenlights.nl” > Enter


Captura de pantalla de mi terminal corriendo la peli via telnet.

Etiquetas: ,