SiFR en accion
Publicado el 14 / 05 / 2009
Para empezar a usar SiFR vamos a necesitar descargar los sources SiFR 2. Despues de descargarlos, descomprimilos y abri la carpeta sifr 2. Vas a ver los siguientes archivos:
1. sifr.js
2. sifr-addons.js
3. sIFR-print.css
4. sIFR-screen.css
Aparte de estos files necesitamos la tipografia (tipografia = fuente = font) que vayamos a usar en formato .swf para lo que les super recomiendo los generadores online o bien nuetro post de fonts para SiFR ;)
Generadores online de fonts para SiFR:
http://onlinefontconverter.com/ (Para convertir la font que vayas a usar primero a formato .ttf)
http://www.sifrgenerator.com/wizard.html (Wizard para convertir la font en formato .ttf a un archivo .swf)
http://www.sifrgenerator.com/wizard.html (Wizard para convertir la font en formato .ttf a un archivo .swf)
SiFR en acción
Una vez que tenemos el .swf de la tipo que vamos a usar + los archivos del zip (archivos CSS, JS y SWF) empezamos a poner poner el codigo del SiFR en nuestro codigo HTML.Va un paso a paso:
- Llamo a los archivos CSS y JS en la cabecera de la página:
<!-- nuestro archivo CSS principal del sitio --><br /> <link rel="stylesheet" type="text/css" href="css/main.css" /><br /> <!-- archivos CSS de sIFR -- ><br /> <link rel="stylesheet" href="css/sifr-screen.css" type="text/css" media="screen" /><br /> <link rel="stylesheet" href="css/sifr-print.css" type="text/css" media="print" /><br /> <!-- archivos JS de sIFR --><br /> <script src="js/sifr.js" type="text/javascript"></script><br /> <script src="js/sifr-addons.js" type="text/javascript"></script><br />
-
Luego vamos al final de la pagina, antes del y colocamos el siguiente código:
<script type="text/javascript"> <br /> // <![CDATA[ <br /> if(typeof sIFR == "function"){ <br /> // Llamando la funcion del sIFR <br /> sIFR.replaceElement ("h1", "futura.swf", "#000000", null, null, null, 0, 0, 0, 0, null); <br /> }; <br /> //]]> <br /> </script> <br />> </body> <br /> </html>
- Ahora solo queda ubicar el
<h1>
en el código para que empiece a funcionar.
<body><br /> <h1>TÃtulo de mi primer artÃculo</h1>><br />...
TIP: eviten el uso de LINKS con SiFR porque 9 de cada 10 veces no funciona correctamente y de momento no hay mucha solución a eso.
Ahora el tan ansiado F12 y a probarlo en el browser y hacer los arreglos o modificaciones necesarias en los CSS para que los headings tengan el estilo que buscamos (tamaño, color, etc)!
Existe la version 3 que aun esta en Beta y que tiene infinidaaaaad de inconvenientes pero por si alguno la esta buscando.. Descargar SiFR 3 aca!!!
Comentarios
Dejar comentario
Nombre: Gaby - Agregado el 19-06-10
Hola! Veo que decÃs que no conviene usarlo el links, pero realmente lo necesito aunque no funcione siempre. Logro ponerlo en el menú, pero se deshabilitan los links... :S Alguna ayuda? Gracias!
El blog es: www.filinueve9.blogspot.com
Respuesta: Te envie x mail un truquito para q puedas usar sifr en links. Saludos!
