¿como implemento sFIR en una pagina web?

Copia · #1 (**permalink**) 15/12/2009, 13:25

Hola, estoy tratando de seguir un libro "The Art and Science of CSS" y habla sobre el reemplazo de los titulos por imagenes o por flash sobre este ultimo usando sIRF y bueno intento seguirlo pero no me sale.

Descargue sirf3 - r436 y tiene las siguientes carpetas css, flash, demo y css.
Segun el libro se tiene que incluir en sirf.js y dentro de:

Código:

if (typeof sIFR == “function" && !sIFR.UA.bIsIEMac)
{
     sIFR.setup();
}

lo siguiente:

Código:

if (typeof sIFR == “function" && !sIFR.UA.bIsIEMac)
{
sIFR.setup();
sIFR.replaceElement(named({sSelector: “h1",
sFlashSrc: “flash/cooper_black.swf", sBgColor: “#FFFFFF",
sColor: “#0066CC", sWmode: “transparent"}));
}

pero no encuentro al dichoso if y la verdad nose cual sirf.js es porque hay dos... una donde se puede ver el codigo ordenadamente(aca busque el if ese) y en otro donde no se entiende nada.

Ahora, mire el demo que trae sirf y en el index incluyen el codigo js.. asi:

Código HTML:

<script src="../js/sifr.js" type="text/javascript"></script>
  <script src="../js/sifr-debug.js" type="text/javascript"></script>
  <script type="text/javascript">
    /*****************************************************************************
    The sIFR configuration should typically go in `sifr-config.js`, but in order to
    keep the config file clean, and to give a quick overview, it's done here instead.
    *****************************************************************************/
  
    var cochin = {
      src: 'cochin.swf'
      ,ratios: [7, 1.32, 11, 1.31, 13, 1.24, 14, 1.25, 19, 1.23, 27, 1.2, 34, 1.19, 42, 1.18, 47, 1.17, 48, 1.18, 69, 1.17, 74, 1.16, 75, 1.17, 1.16]
    };

    var rockwell = {
      src: 'rockwell.swf'
      ,ratios: [6, 1.41, 9, 1.35, 15, 1.29, 21, 1.25, 22, 1.22, 27, 1.24, 29, 1.21, 34, 1.22, 41, 1.21, 45, 1.2, 46, 1.21, 59, 1.2, 68, 1.19, 69, 1.2, 96, 1.19, 97, 1.18, 102, 1.19, 103, 1.18, 107, 1.19, 108, 1.18, 112, 1.19, 114, 1.18, 116, 1.19, 120, 1.18, 121, 1.19, 1.18]
    };

    // You probably want to switch this on, but read <http://wiki.novemberborn.net/sifr3/DetectingCSSLoad> first.
    // sIFR.useStyleCheck = true;
    sIFR.activate(cochin, rockwell);

    sIFR.replace(rockwell, {
      selector: 'h1'
      ,css: [
        '.sIFR-root { text-align: center; font-weight: bold; }'
        ,'a { text-decoration: none; }'
        ,'a:link { color: #000000; }'
        ,'a:hover { color: #CCCCCC; }'
      ]
    });
  
    sIFR.replace(rockwell, {
      selector: 'h5#pullquote'
      ,css: 'em { font-style: normal; color: #660000; }'
      ,selectable: false
    });
  
    sIFR.replace(cochin, {
      selector: 'h3.sidebox'
      ,css: {
        '.sIFR-root': { 'background-color': '#DCDCDC' }
      }
    });
  
    sIFR.replace(cochin, {selector: 'h2,h3'});
  
    sIFR.replace(cochin, {
      selector: 'h4.subhead'
      ,css: {
        '.sIFR-root': { 'color': '#660000', 'letter-spacing': -1.5, 'text-transform': 'capitalize' }
      }
      ,filters: {
        DropShadow: {
          knockout: true
          ,distance: 1
          ,color: '#330000'
          ,strength: 2
        }
      }
    });
  </script>

y ahora no se como implementar el sirf... espero me haya dejado entender

Copia · #2 (**permalink**) 15/12/2009, 17:39

bueno... e tenido avances pero aun no tengo resultados:

este es el codigo que tengo

Código HTML:

<link rel="stylesheet" href="css/sIFR-print.css" type="text/css" media="screen" /> 
<link rel="stylesheet" href="css/sIFR-screen.css" type="text/css" media="screen" /> 
<script src="js/sifr.js" type="text/javascript"></script>
<title>headings 2</title>
<style>
	h1 {
color: #06C;
font-size: 250%;
font-family: Georgia, serif;
line-height: 1.45em;
}
</style>
</head>
<body>
	<h1>Este titulo sIRF</h1>
    <script type="text/javascript">
   if(typeof sIFR == "function")
   {
    sIFR.replaceElement("h1", named({sFlashSrc:"flash/alfredo_.swf"}));
	 sIFR.replaceElement("h1", named({sFlashSrc: "flash/alfredo_.swf", sBgColor:"#ffcc99", sColor:"#ff3300"})); 
	 }     </script>

Estoy trabajando con sIRF 2.0 y he generado mi swf con sirf generator, y estube siguiendo este tuto:

http://pablotilli.com.ar/2009/01/tutorial-sobre-el-uso-de-sifr.html?showComment=1249997795876#c6014032094153 393296

pero al momento de correr en mi pc no me sale.

Copia · #3 (**permalink**) 16/12/2009, 11:02

Por lo que veo me estoy respondiendo a mi mismo, pero quiza alguien le pase lo mismo pues la solucion esta en cambiar el sirf.js no es el que pesa 11k sino el de 22 que se encuentra en la carpeta opensurce.

PD: Lo malo hasta ahora esque me funciona en firefox, chrome, internet explorer 8 y no me corre en opera 10

Saludos.