heyZap: Un gadget de juegos

heyZap es un sitio que nos ofrece la posibilidad de agregar un gadget con juegos de Flash en nuestro blog.

En este momento hay más de 6000 en su base de datos y para incluirlo, debemos nos registramos y luego, copiar y pegar el código en la plantilla o usando las herramientas que ellso proveen y que facilitan la tarea.

Las fuentes de textos que podemos utilizar en una página web son limitadas porque lo que se verá no es necesariamente lo que nosotros establecemos sino aquello que permite el navegador de los visitantes. Podemos decir que un párrafo tendrá la fuente más exótica que se nos ocurra pero, si quien mira la página no tiene esa fuente en su PC, no la verá.

Es por eso que solemos definirlas con varios tipos o familias, para que, si no hay una, se cargue otra:

font-family: Georgia, Arial, Verdana, serif;

Es más, incluso se le agrega un último dato que indica un tipo más generico: serif, sans-serif, cursive, fantasy, monospace y claro, a menos que usemos las fuentes "seguras", el resultado es imprevisible:

Quisque lorem enim, pellentesque nec, tempus ut, pretium in, odio. Donec neque eros, ultricies sit amet, consectetur vel, ullamcorper sit amet, neque! Aliquam metus dolor, commodo ac, ultrices sit amet, blandit at, tellus?

¿ ... se verán las fuentes Bradley Hand ITC y Felix Titling ... ?

Maecenas lectus sapien, iaculis vel, tincidunt vitae, tempus viverra, justo. Fusce augue lacus, convallis id, tincidunt id, aliquet a, ipsum. Duis convallis enim quis pede! Sed ultrices; tortor sed tincidunt semper, massa leo semper lorem, ut luctus nullam.

Es verdad que existen métodos para incrustar fuentes externas utilizando CSS. De algún modo, es similar a insertar scripts, se requiere un archivo externo que se cargará junto con el resto de la página pero, sólo funciona en Internet Explorer y esos archivos, requieren de algún tipo de software para ser creados. A esto, se le suma una limitación más: muchas de las fuentes está protegidas por derechos de copyright y están inhabilitadas para ser insertadas en la web. De todas maneras, la idea es esta:

@font-face {
font-family: 'miFuente';
src: url(URL_archivoMiFuente);
}
p {
font-family:'miFuente', sans-serif;
}

¿Qué podemos hacer con los otros navegadores?

Una solución interesante aunque debemos usarla con prudencia, es la que muestran en divitodesign.com. Allí, hablan de TypeFace, un script que trasnforma HTML y CSS en imágenes y que, en principio, funciona en la mayoría de los navegadores modernos. Su uso es bastante sencillo ... aunque no lo parezca.

Primero, descargamos el script y lo alojamos en un servidor. Ahora (esta es la clave) necesitamos las fuentes y para eso, vamos a convertirlas en scripts utilizando este conversor.

Las fuentes TrueType se encuentran en nuestra computadora en el directorio /WINDOWS/fonts/ y, si queremos usar una de ellas, lo mejor es copiar el archivo en otra carpeta y recién luego convertirlo pero, nos encontraremos con una dificultad más, muchos están protegidos y no podremos usarlos, la herramienta nos lo advertira y se negará a crear el script.

Lo mejor, entonces, es buscar en la web fuentes de tipo open-source; hay muchas y algunos buenos sitios para comenzar a mirar son Open Font Library y dafont.com.

Con la herramienta, podemos convertir todos los que se nos ocurra y tendremos entonces, tantos archivos JS como fuentes alternativas quisiéramos usar. Por supuesto, deberemos alojarlas todas en un servidor..

Ahora, vamos a usarlo.

Supongamos que quiero estas tres fuentes:

5inq_-_Handserif.ttf
martyb_-_Ridiculous.ttf
tthurman_-_Riordon_Fancy.ttf

Las convierto y tengo tres scripts:

handserif_medium.typeface.js
ridiculous_light.typeface.js
riordonfancy_medium.typeface.js

Voy a la plantilla y agrego todo antes de </head>

<!-- cargar el script de la librería -->
<script src='URL_typeface-0.11.js' type='text/javascript'/>

<!-- cargar todas la fuentes -->
<script src='URL_handserif_medium.typeface.js' type='text/javascript'/>
<script src='URL_ridiculous_light.typeface.js' type='text/javascript'/>
<script src='URL_riordonfancy_medium.typeface.js' type='text/javascript'/>

Ya está. Si quisiera usar alguna de esas fuentes, bastaría colocar la clase typeface-js y agregar la familia de la fuente en el atributo style, tal como hacemos normalmente:

<div class="typeface-js" style="font-family: nombreFuente;">
....... el texto a ser mostrado .......
</div>

Ahora, algunos ejemplos colocados en un blog de pruebas utilizando las tres fuentes mencionadas.

Fuente Handserif

<div class="typeface-js" style="font-family: Handserif;">
....... el texto a ser mostrado .......
</div>

Fuente Ridiculous

<div class="typeface-js" style="font-family: Ridiculous;">
....... el texto a ser mostrado .......
</div>

Fuente RiordonFancy

<div class="typeface-js" style="font-family: RiordonFancy;">
....... el texto a ser mostrado .......
</div>

Las limitaciones y cosas a tener en cuenta:

• Por defecto, typeface.js se asocia con los elementos de encabezado (h1, h2, etc.) si en ellos se coloca la familia cargada. En esos casos, no es necesario agregar la clase como debemos hacerlo con cualquier otra etiqueta.
• Si una etiqueta ya tiene una clase, por ejemplo <div class='fecha">, podemos sumarle una segunda, separándola con un espacio: <div class='fecha typeface-js">
• Los scripts deben insertarse después del CSS y no antes, caso contrario, Firefox no aplicará el estilo.
• La propiedad font-stretch no es admitida.
• En Internet Explorer 7 hay una demora en el renderizado lo que produce un efecto indeseado. Puede solucionarse agregando esto antes de </body>:

<script type='text/javascript'>
_typeface_js.renderDocument();
</script>

Este es otro de esos sitios que encuentra Gem@ donde podemos jugar un rato con las imágenes. Se trata de WigFlip.

Todol oque creemos podemos descargarlo a la PC o alojarlo directamente en Flickr o ImageShack.

• TinyTags: escribimos un texto y el resultado es una imagen como un etiqueta.
• Superstickies: ingresamos un texto,seleccionamos un color y se crea una imagen con una nota.
• CornerShop: es una herramienta con la cual pueden crearse bordes redondeados. Estableciendo una serie de parámetros, nos da cuatro imágenes y el código CSS para utilizarlas.
• SayWhat y Speech Bubble son para crear burbujas con textos, ya se a en imágenes que subimos o autónomas.
• Easystreet: es para crear carteles de calle personalizados
• SignBot: nos permite crear carteles animados.
• AutoMotivator: crear afiches con textos e imágenes.
• RoflBot: para agregar textos a cualquier imagen.
• Screedbot: crea textos animados a con diferentes fondos y colores.
• Minifesto: crea un gif animado con cierto texto que puede ser bastante extenso y se crea un gif animado que pueede usarse como avatar.

FLV Player es otro reproductor de archivos FLV que podemos insertar en nuestro sitio.

Hay varios modelos disponibles: Mini, Normal, Maxi, Multi y JS. El sitio, ofrece documentación para cada uno de ellos y la posibilidad de descargar el reproductor SWF así como también el código fuente.

Usarlo es sencillo, una vez que alojamos el reproductor en un servidor propio, lo insertamos como a cualqueir otro archivo de Flash:

<object type="application/x-shockwave-flash" data="URL_player_flv_maxi.swf" width="320" height="240">
<param name="movie" value="URL_player_flv_maxi.swf" />
<param name="FlashVars" value="flv=URL_archivo.flv" />
</object>

Es posible que en IE haya algún problema al visualizar el video, eso se resuelve colocando el tamaño de manera explícita:

<param name="FlashVars" value="flv=URL_archivo.flv&width=200&height=150" />

Hay otros parámetros que podemos usar pero, la mayoría de ellos deben ser agregados a un archivo XML externo; como Flash tiene medidas de seguridad estrictas respecto a cargar archivos externos, el uso de estas opciones es muy limitado en Blogger (más información); lo mismo ocurrirá con algunos plugins que pueden adosarse.

Con cualquiera de los modelos, podemos utilizar un generador de códigos online lo que nos permite entender la sintaxis un poco más.

GRACIAS:

Poca Tinta

Reflection es un pequeño script que nos permite generar efectos de reflejo en las imágenes.

Para usarlo, descargamos el ZIP que contiene el código y algunos ejemplos y luego, alojamos reflection.js en un servidor como SkyDrive y lo cargamos en la plantilla, antes de </head> o directamente en el post donde queremos aplicarlo:

<script type="text/javascript" src="URL_reflection.js"></script>

Una vez hecho esto, usarlo es muy siencillo, basta agregar la clase CSS a la imagen:

<img class="reflect" src="URL_imagen" />

Por defecto, el reflejo creará un fade que coincidirá con el color de fondo de la página o del DIV donde se coloque y tendrá una opacidad del 50% y una altura total de 1.5 veces la altura de la imagen original:

Ambos parámetros pueden ser controlados:
class="reflect rheight100" hará que el reflejo sea igual a la altura de la imagen
class="reflect ropacity30" cambiará la opacidad

o combinarse:

class="reflect rheight100 ropacity30"

La clase también pude ser controlada con JavaScript. Por ejemplo, podemos tener una imagen normal y agregarle el efecto al hacer click sobre ella:

O bien, remover el efecto.

También es posible crear alguna función y utilizarla para variar el efecto a medida que hacemos click:

<script>
var cool = 2;
function varyReflect() {
if (cool == 10) {cool = 1;}
Reflection.add(document.getElementById('demoReflejoVariable'), { opacity: cool/10 });
document.getElementById('demoReflejoVariable').innerHTML = cool*10;
cool++;
}
</script>

<img src="URL_imagen" id="demoReflejoVariable" onclick="varyReflect()" />

JSBin es un servicio online que nos permite introducir código HTML, CSS y JavaScript y verificar su funcionamiento. Está pensado para que los desarrolladores puedan trabajar de manera colaborativa pero, es abierto a cualquier usuario.

Podemos editar sin dificultades, incluir alguna de las librerías más comunes e incluso, guardar la URL del proyecto y hacerla pública (más información).

My one and only.

La fuga.

Adiós mundo cruel.

Cualquiera se equivoca.

Nadie.