webtips 03: alternativas a sIFR en javascript

Tercera entrega de webtips. Hoy veremos como reemplazar dinámicamente las fuentes de nuestro proyecto web por cualquier fuente deseada al margen de que nuestros usuarios tengan dicha fuente instalada en sus ordenadores. 22 minutos de videotutorial donde veremos paso a paso el uso de esta técnica.

Esta semana como novedad también incluyo un articulo donde se resume y complementa el vídeo, el código usado listo para descargar y la ya habitual opción de bajar el vídeo original.

+ Info

El método font-family de javascript nos permite asignar una fuente a cada uno de los elementos de nuestra página web. En caso de hacer uso de una fuente que nuestros clientes o usuarios no tengan instalada en sus ordenadores o dispositivos móviles esta será reemplaza automáticamente por una disponible….

Existen multitud de técnicas para evitar este problema. La más rudimentaria es crear una imagen con la fuente deseada que haga la labor de cabecera o titular. El problema es que esta solución esta muy limitada y nos nos serviría, por ejemplo, para textos o titulares dinámicos (a menos que estemos dispuestos a cambiar de imagen cada vez que la web es actualizada).

Como programadores nuestro trabajo se basa en automatizar tareas como esta y a día de hoy contamos con multitud de formas de hacerlo. La primera opción, y más veterana, es hacerlo mediante flash. Proyectos como sIFR nos permiten el reemplazo de texto standard por textos flash haciendo uso de cualquier tipo de fuente. Con el tiempo fueron saliendo varias alternativas, algunas de ellas basadas en javascript, que son las que tratamos en el vídeo.

El reemplazo de texto por javascript se hace mediante canvas-VML y cuenta con algunas ventajas a tener en cuenta sobre los proyectos flash. La primera ventaja es la compatibilidad, javascript no necesita ningún plugin para funcionar. Por ejemplo en el caso de smartphones como puede ser el iPhone no existe ningún plugin para ejecutar o reproducir flash. Por el contrario si que cuenta con un navegador web perfectamente compatible con javascript.

Si bien es cierto que en España / Europa los usuarios que hacen uso de estos dispositivos para navegar es aun muy bajo, en países como EEUU o especialmente Japón el porcentaje de usuarios que acceden a paginas web con estos terminales es ya un porcentaje muy a tener en cuenta. Es presumible que esta tendencia se extienda a Europa durante los próximos 2-3 años, así que no está de más el ir adaptando nuestro sites para un futuro cercano/medio.

En el vídeo vemos 2 proyectos javascript que cumplen con la tarea asignada. Por un lado tenemos typeface y por otro cufon. Los pasos a seguir en ambos son muy parecidos: Descargarnos una fuente, descargarnos el js del proyecto que encontramos en sus webs, generar una fuente compatible con el proyecto (ambos tienen un generador online en sus respectivos sites) y linkarlo en nuestro proyecto para finalizar. En menos de 5 minutos podemos tenerlo todo funcionando.

Typeface es probablemente la mejor opción para diseñadores o programadores que no tengan conocimientos javascript. Es realmente sencillo de utilizar y su generador de fuentes es el que más me ha gustado de los dos. En cambio los resultados han sido más flojos que los de cufon en las pruebas realizadas.

Cufon por su parte cuenta con un generador que a los hispanohablantes nos puede resultar más problemático (no indica que caracteres incluye la fuente, vocales acentuadas por ejemplo). Los resultados, eso si, son muy satisfactorios y puede resultar más como de utilizar para aquellos que tengan unas nociones básicas de javascript. También cuenta con algunas opciones que no encontramos en typeface. A mi personalmente es el más me ha convencido.

———–

descargar demos

descargar el vídeo

Nota: El vídeo hace uso del codec H264. Si tienes algún problema para reproducirlo usa el vlc

Posts relacionados:

1. Cuenta atrás javascript
2. Webslide – presentaciones javascript
3. Cambiar el cursor con javascript
4. Recopilatorio de vídeos javascript
5. Diseño interactivo javascript