Foros del Web » Creando para Internet » Diseño web »

¿como implemento sFIR en una pagina web?

Estas en el tema de ¿como implemento sFIR en una pagina web? en el foro de Diseño web en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 15/12/2009, 13:25
Avatar de Copia  
Fecha de Ingreso: noviembre-2009
Mensajes: 309
Antigüedad: 8 años
Puntos: 4
¿como implemento sFIR en una pagina web?

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

Última edición por Copia; 15/12/2009 a las 14:51
  #2 (permalink)  
Antiguo 15/12/2009, 17:39
Avatar de Copia  
Fecha de Ingreso: noviembre-2009
Mensajes: 309
Antigüedad: 8 años
Puntos: 4
Respuesta: ¿como implemento sFIR en una pagina web?

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.
  #3 (permalink)  
Antiguo 16/12/2009, 11:02
Avatar de Copia  
Fecha de Ingreso: noviembre-2009
Mensajes: 309
Antigüedad: 8 años
Puntos: 4
Respuesta: ¿como implemento sFIR en una pagina web?

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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:51.