Skip to Content »

sIFR: Tipografías en HTML

  • 31/05/2008
  • 9:54 pm
  • unijimpe

sIFR (Scalable Inman Flash Replacement) es una técnica que permite reemplazar elementos de texto HTML por un equivalente en Flash lo cual permite la inclusión de cualquier tipografía aun si el usuario no tiene instalada la tipografía en su computador.

Utilizando sIFR
Lo primero es descargar sIFR 3, extraemos los archivos donde tenemos una carpeta flash donde encontramos un archivo sifr.fla el cual debemos abrir en Adobe Flash y cambiar el tipo de letra, seleccionar los caracteres a renderear e incluso podríamos agregarle algunos filtros. Guardamos los cambios y exportamos el archivo. A este archivo recién exportado le damos un nombre, generalmente el nombre de la tipografía seleccionada.

Luego el siguiente paso es incluir los archivo sIFR-screen.css y sIFR-print.css ubicados en la carpeta css en el header del HTML seleccionado:

  1. <link rel="stylesheet" href="sIFR-screen.css" type="text/css" media="screen">
  2. <link rel="stylesheet" href="sIFR-print.css" type="text/css" media="print">

Luego de ello es necesario incluir el archivo javascript sifr.js.

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

El tercer y ultimo paso es utilizar el metodo sIFR.replace para reemplazar bloques html por bloques flash que contienen la tipografía seleccionada, la sintaxis para ello es:

  1. sIFR.replace({
  2.     src: 'path-font.swf',  // ruta al swf que contiene la fuente
  3.     selector: 'html-tag',  // tags a reemplazar
  4.     css: '.sIFR-root { prop: value }' // CSS para el flash
  5. });

Entonces si por ejemplo hemos creado un archivo llamado monotype.swf y queremos que lo reemplaze a todos los elementos h1, podemos hacerlo mediante:

  1. <script type="text/javascript">
  2. sIFR.replace({
  3.     src: 'monotype.swf',
  4.     selector: 'h1'
  5. });
  6. </script>

Luego si deseamos que estos elementos tengan color #FF3366 y que tengan 24px de tamaño, agregamos la propiedad css, de la siguiente manera:

  1. <script type="text/javascript">
  2. sIFR.replace({
  3.     src: 'monotype.swf',
  4.     selector: 'h1',
  5.     css: '.sIFR-root {color: #FF3366; font-size: 24px; }'
  6. });
  7. </script>

Ahora si por ejemplo deseamos reemplazar los elementos que tengan la clase blue por la tipografía bookman.swf y la queremos en tamaño 14px podemos utilizar:

  1. <script type="text/javascript">
  2. sIFR.replace({
  3.     src: 'bookman.swf',
  4.     selector: '.blue',
  5.     css: '.sIFR-root {color: #0099FF; font-size: 14px;}'
  6. });
  7. </script>

Podemos utilizar varias veces el método sIFR.replace para reemplazar diferentes tipos de letra. Ahora uniendo todos los elementos en un html tenemos el siguiente código, en donde hemos utilizar el método de reemplazo en una sola línea cada una:

  3. <title>Demo sIFR</title>
  4. <link rel="stylesheet" href="sIFR-screen.css" type="text/css" media="screen">
  5. <link rel="stylesheet" href="sIFR-print.css" type="text/css" media="print">
  6. <script type="text/javascript" src="sifr.js"></script>
  7. <script type="text/javascript">
  8. sIFR.replace({ src: 'monotype.swf', selector: 'h1', css: '.sIFR-root {color: #FF3366; font-size: 24px; }' });
  9. sIFR.replace({ src: 'bookman.swf', selector: '.blue', css: '.sIFR-root {color: #0099FF; font-size: 14px;}', forceSingleLine: true, tuneHeight: -9 });
  10. </script>
  11. </head>
  13. <h1>sIFR: Tipografías en HTML</h1>
  14. <p><span class="blue">sIFR</span> (<em>Scalable Inman Flash Replacement</em>)...</p>
  15. </body>
  16. </html>

Pueden ver el resultado de este ejemplo en Demo sIFR. Les dejo los archivos fuente de este ejemplo para que lo descarguen y puedan hacer sus pruebas.

Como una observación importante hay que notar que este método es recomendable utilizarlo solo para bloques pequeños y no para todo el html.

Mas Información

Posts Relacionados

Google AJAX Libraries API

  • 27/05/2008
  • 10:59 pm
  • unijimpe

Google AJAX Libraries API es un nuevo servicio mediante el cual Google aprovechando de su gran infraestructura alojará las principales Frameworks Javascript para enlazarlos directamente. Con ello podremos acelerar la carga de nuestras librerías y por consiguiente una mejor velocidad de nuestras web.

Este servicio, tienes varias cualidades muy importantes:

  • Uso del Cache del Browser: Si un usuario visita una Web, descargará la librería desde Google. Si posteriormente entra a otra web que utiliza la misma librería, esta ya no se descargará nuevamente si no se utilizará la copia en el cache de navegador.
  • Compresión Gzip: se encuentran habilitadas las transferencia de datos comprimidas en Gzip con lo cual hay menor transferencia de datos.
  • Versiones minificadas: al llamar a una librería, se hará uso de las versiones minificadas, es decir donde se han eliminado los comentarios, saltos de linea, espacios en blanco innecesarios y reemplazado nombres de variables por otras mas cortas. Esto también acelera la carga del archivo.
  • Archivos distribuidos por en CDN de Google: se utiliza toda la infraestructura de Google, por lo cual el archivo se puede obtener de cualquiera de lo muchos servidores alrededor del mundo con los que cuenta Google.
  • Optimización de Header: se utilizaran headers innecesarios y tampoco se guardaran cookies lo cual es un ahorra de bytes.

Inicialmente se han puesto a disposición las librerías mas populares, pero se planea ir aumentando estas a medida que los usuarios lo soliciten. Las librerías disponibles actualmente son: jQuery, prototype, script.aculo.us, MooTools, dojo.

Como Utilizarlo
La forma mas sencilla de utilizar este servicio es enlazar directamente a los archivos utilizando el tag script como se hace normalmente, por ejemplo si deseamos cargar MooTools.

  1. <!-- versión minificada -->
  2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools-yui-compressed.js"></script>
  3. <!-- versión normal -->
  4. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools.js"></script>

Para mayor información acerca de este servicio pueden leer la documentación en Developer's Guide, también pueden leer una explicación mas detallada del modo de uso en Google Ajax Libraries API, ajax sobre la arquitectura Google y finalmente les dejo un video con la presentación y explicación del funcionamiento de esta librería.

Cargando Flash

Posts Relacionados

Adobe Dreamweaver Beta

  • 27/05/2008
  • 1:31 am
  • unijimpe

Adobe Dreamweaver la mas popular herramienta de desarrollo web y mi preferido siempre ha estado a la vanguardia como herramienta de desarrollo web y ahora acaban de lanzar la Adobe Dreamweaver Beta (Stiletto) publica para que los usuarios puedan probarlo y así dar sus observaciones y sugerencias.

Novedades
Hay muchas cosas interesantes en esta nueva versión, entre las que podemos mencionar:

  • Live View
    Ahora puedes ver tus páginas funcionando directamente en Dreamweaver, ejecuta Javascrip, interpreta CSS todo sin necesidad de utilizar un navegador.
  • Related Files
    Dreamweaver ahora reconoce los archivos asociados a un determinado documento (css, js, php, xml) y muestra un listado de los archivos relacionados en la barra superior del documento, lo cual facilita la edición de las mismas.
  • Code Navigator
    Esta opción permite mostrar el código fuente para el elemento seleccionado actualmente, si hay javascript que cambia dinámicamente un elemento esto se ve reflejado automáticamente el código fuente mostrado.
  • CSS best practices
    Ahora el inspector de propiedades CSS muestra los estilos para la selección actual y muestra un tooltip con explicaciones de las reglas del CSS.
  • Code hinting for Ajax and JavaScript frameworks
    Esta es otra de las cualidades que los desarrolladores reclamaban, es el soporte de code hinting (Sugerencias de Código) para los elementos Javascript así como para los mas populares Frameworks Javascript que incluyen jQuery, Prototype y Adobe Spry. Lo único malo es que no pusieron Mootools.
  • Subversion integration
    Esta es otra de las grandes innovaciones, la integracion con Subversion (Sistema de control de versiones) que permite el manejo de versiones sin necesidad de software adicional.
  • Adobe® AIR™ authoring support
    Antes era necesaria una extensión pero ahora viene incluido el soporte para desarrollar aplicaciones para Adobe AIR™.
  • New user interface
    Este es otro de los puntos que no implementaron en la versión anterior y es la interface semejante a todos los productos del Adobe Creative Suite el cual optimiza el espacio de trabajo.

Mas Información
Han puesto a disposición una serie de vídeos con la explicación de las nuevas características en Adobe TV bajo el titulo de Inside Dreamlabs con los siguientes temas.

Finalmente debo comentarles que esta versión es completamente funcional por 48 horas, para activarla posteriormente deben contar con una licencia registrada de Dreamweaver CS3 o en todo caso del Creative Suite 3.

Posts Relacionados