Skip to Content »

PNG Fix para IE6

  • 16/07/2008
  • 11:54 pm
  • unijimpe

Anteriormente comentábamos en PNG transparente en IE sobre las diversas técnicas para corregir un bug de IE6 (Internet Explorer 6) el cual no muestra correctamente los PNGs transparentes. Esta vez les presentamos un nuevo método, se trata de la librería Unit PNG Fix.

Unit PNG Fix fue desarrollada por Unit Interactive y liberada bajo licencia Creative Commons. Entre las características mas interesantes de esta librería podemos destacar:

  • Javascript muy ligero, con menos de 1KB
  • Funciona para imágenes como objetos o background (fondo).
  • Funciona automáticamente sin llamar a ninguna funcion.
  • Permite el escalado automatico de los elementos.
  • Rápido de implementar, solo es necesario una línea de código.

Utilizando Unit PNG Fix
Lo primero es descargar la librería desde unitpngfix.zip, luego de extraer el archivo .zip encontramos el archivo unitpngfix.js que contiene la funcionalidad de esta librería. Luego incluimos esta librería en el header del html que deseamos de la siguiente forma:

HTML:
  1. <script type="text/javascript" src="unitpngfix.js"></script>

Como pueden ver, sólo una línea de código y ya tenemos resuelto el problema de los PNGs transparentes para IE6, rápida y elegante la solución, no les parece?.

Posts Relacionados

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:

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

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

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

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

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

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

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

Migrando de HTML a XHTML

  • 25/05/2008
  • 12:27 pm
  • unijimpe

XHTML es una reformulación de HTML que normaliza y modulariza el lenguaje. XHTML es la versión XML de HTML, por lo que tiene, básicamente, las mismas funcionalidades, pero cumple las especificaciones, más estrictas, de XML.

Esencialmente las reglas de redacción son las mismas, pero ahora son mas estrictas para que un documento pueda considerarse como valido, entre las principales diferencias respecto al HTML podemos mencionar:

Tags anidados correctamente
Los tags deben estar anidados (tags dentro de otros tags) correctamente, es decir deben tener etiqueta de cierre antes de utilizar otro.

HTML:
  1. <p><em>texto</p></em> <!-- incorrecto -->
  2. <p><em>texto</em></p> <!-- correcto -->

Elementos y atributos en minúsculas
Los elementos y atributos ahora deben escribirse en minúsculas, esto facilita la lectura de los documentos.

HTML:
  1. <P><EM>texto</EM></P> <!-- incorrecto -->
  2. <p><em>texto</em></p> <!-- correcto -->

Todos los tags deben cerrarse siempre
Los tags deben estar cerrados, ninguno debe quedarse sin su respectivo tag de cierre. En el caso de los tags unicos, se debe agregar el / antes de cerrarlos (<br> debe ser <br />).

HTML:
  1. <p><em>texto<br> <!-- incorrecto -->
  2. <p><em>texto</em></p><br /> <!-- correcto -->

Atributos entre comillas
Los valores de los atributos siempre deben estar encerrados entre comillas.

HTML:
  1. <td rowspan=3>texto</td> <!-- incorrecto -->
  2. <td rowspan="3">texto</td> <!-- correcto -->

Incluir texto 'alt' para las Imagenes
Se debe siempre especificar un texto alternativo para imágenes.

HTML:
  1. <img src="submit.gif" /> <!-- incorrecto -->
  2. <img src="submit.gif" alt="Enviar" /> <!-- correcto -->

No se permite minimización de atributos
No está permitida la minimización de atributos, es necesario utilizar el atributo y el valor.

HTML:
  1. <textarea readonly>texto</textarea> <!-- incorrecto -->
  2. <textarea readonly="readonly">texto</textarea> <!-- correcto -->

No se aceptan atributos desaprobados en HTML 4.01
Los atributos desaprobados en HTML 4.01 no forman parte de XHTML.

HTML:
  1. <font color="#0000FF">text</font> <!-- incorrecto -->
  2. <span style="color: #0000FF;">text</span> <!-- correcto -->

Como pueden ver las reglas siguen siendo las mismas, solo que ahora estas son mas estrictas y tenemos que tener mas cuidado al momento de redactar el código. Pueden una referencia completa de estas diferencias en XHTML: Differences with HTML 4.

Posts Relacionados