- TTF – Funciona en todos los browsers excepto IE y Mobile Safari (iPhone/iPad).
- EOT – Sólo IE.
- WOFF – Comprimido y candidato a estándar.
- SVG – Mobile Safari (iPhone/iPad).
Esto es simple: primero debes disponer de las fuentes que quieres utilizar, luego las puedes utilizar tal cual o transformarlas a los formatos necesarios. Esas fuentes las importas mediante CSS y las utilizas como una propiedad font-family donde quieras incluirlas. Quizás ya conocías Cufón o SIFr, pero desde que uso @font-face he notado que es bastante más rápido en la carga y es más versátil en su uso (ya que utiliza simple CSS y no depende de llamados JS).
Entonces, primero debes declarar la regla @font-face en tu hoja de estilos para importar las tipografías (nótese la ruta donde las tienes en el servidor, si no estas seguro mejor utiliza algún path absoluto).
@font-face {
font-family: 'Delicious';
src: url('Delicious-Roman.otf');
}
@font-face {
font-family: 'Delicious';
font-weight: bold;
src: url('Delicious-Bold.otf');
}
Si quieres estar seguro de que se verá en la gran mayoría de los browsers, mejor impórtalas todas:
@font-face {
font-family: 'Delicious';
src: url('Delicious-Roman.eot');
src: local('?'), url('Delicious-Roman.woff') format('woff'), url('Delicious-Roman.ttf') format('truetype'), url('Delicious-Roman.svg#webfont57ztNrX6') format('svg');
}
Y luego las declaras por simple CSS:
h3 { font-family: Delicious, sans-serif; }
Google actualmente está apoyando muchos desarrollos para Chrome y dispone de un importante catálogo de fuentes para su fácil e inmediato uso (y directo desde sus servidores).
Links:
]]>¿Porqué utilizar gradientes en CSS en vez de imágenes?
- Es más flexible y mantenible
- Menos dependendias de programas y editores gráficos
- Menos consultas al servidor
- Es escalable
En este artículo abordaremos las maneras de escribir gradientes (lineales y radiales) para los principales navegadores modernos.
Según los estándares W3C, crear gradientes se compone de:
linear-gradient( [<punto> || <angulo>,]? <stop>, <stop> [, <stop>]* ) radial-gradient( [<posicion> || <angulo>,]? [<forma> || <tamaño>,]? <stop>, <stop>[, <stop>]* )
Para browsers Mozilla, se mantiene pero se agrega el prefijo -moz:
-moz-linear-gradient( [<punto> || <angulo>,]? <stop>, <stop> [, <stop>]* ) -moz-radial-gradient( [<posicion> || <angulo>,]? [<forma> || <tamaño>,]? <stop>, <stop>[, <stop>]* )
Y para Webkit, es bastante diferente:
-webkit-gradient(<tipo>, <punto> [, <radio>]?, <punto> [, <radio>]? [, <stop>]*)
Una lástima que tengamos que reescribir para cada uno diferentes propiedades para lograr el mismo efecto. Mejor veamos los ejemplos:
Gradiente Lineal
body{
background-color:#ccc;
background-image: -moz-linear-gradient(top, #333, #ccc);
background-image: -webkit-gradient(linear, left top,left bottom, from(#333), to(#ccc));
background-image: linear-gradient(top, #333, #ccc);
}
Gradiente Radial
body{
background-color:#ccc;
background-image: -moz-radial-gradient(center 45deg,circle cover, #ccc, #333);
background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%,800, from(#ccc), to(#333));
background-image: radial-gradient(center 45deg,circle cover, #ccc, #333);
}
¿Y con Internet Explorer?
Ni lo pienses, siquiera en IE9 están soportados. Podrías lograrlo en esta última versión através de SVG, el cual es basado en vectores. SVG es un lenguaje de marcado basado en XML que descibre vectores, y el motor de HTML5 permite que SVG sea incrustado directamente en HTML. Definiendo el alto del documento SVG al 100%, tendremos una imagen que se escala cualquiera sea el alto del elemento, tal como lo haría una caja con gradientes en CSS3.
¿Muy complicado? También lo creo. Mejor prueba algún script como Modernizr ó CSS3 Pie, los que hacen que IE soporte CSS3 como deberían haberlo hecho con los estándares hace mucho tiempo ya.
El diseño web no debe ser tratado como el diseño gráfico; es una disciplina tan específica que debe ser separada definitivamente como una rama independiente. Implica conocimientos de áreas propias que son disciplinas en sí. Por nombrar algunas:
- Diseño gráfico
- Psicología
- Sociología
- Marketing
- Historia
- Comunicación Social
- Arquitectura de información
- Usabilidad
- Programación
He visto muchos diseños que merecen más ser impresos que aplicados en una pantalla; comenzando por que van a pesar bastante y pasando por formas imposibles de ser realizadas mediante codigo HTML y CSS. En mi humilde opinión, un diseñador web para ser efectivo en su trabajo debe considerar por lo menos alguno de los siguiente puntos:
Tareas
Siempre recuerda: el ser humano basa su comportamiento en tareas y objetivos, y por lo tanto el lograr realizarlas. Un sitio web no es sólo una vitrina, también es una vía para lograr un potencial cliente. Nadie llega a un sitio por azar; el usuario eligió llegar a él a través de un click en un enlace, una búsqueda orgánica o por vía directa. Por lo tanto, se debe tratar de encantarlo y extender su estadía en él, y el diseño es el medio más directo para ello.
Usuario
Estudiar al usuario no es fácil y se necesita tiempo y estudio para lograr algo fidedigno. Lamentablemente, sabemos que para un proyecto web se trabaja muy rápido y con deadlines muy ajustados. Ante ello, estudios y conocimientos previos son imprecindibles.
Soporte
Siento que es muy importante conocer (pero no necesariamente dominar) cuál será el soporte final del sitio, antes de siquiera comenzar el diseño. ¿Estará alimentado por un CMS? ¿Qué posibilidades me ofrece? ¿Podré usar Flash parcialmente? ¿Qué versión? Con algunas pocas respuestas se podrá exigir más a la herramienta y no esperar tanto al aprendizaje del usuario.
Performance
No existen usuarios expertos, y todos estamos constantemente aprendiendo a través de constantes innovaciones de gente muy creativa. Pero es importante considerar que el tiempo que el usuario gasta en un sitio web es tan valioso como nuestro tiempo como profesionales creándolo, por lo tanto se debe diseñar estructuras que sean además de fácil de entender, rápido de recorrer, de cargar y de encontrar lo que se busca.
Diseño Centrado en el Usuario
En el mundo para el cual trabajamos existe un concepto muy conocido pero poco aplicado, por lo que he observado navegando. El Diseño Centrado en el Usuario es una filosofía y un proceso con el cual se busca mediante el diseño necesidades, deseos y limitaciones de una interfaz que satisfacen al usuario final del sitio web. Esto puede ser considerado como un proceso múltiple, donde no sólo se requiere que el diseñador resuelva la estética (como comúnmente sucede), sino cómo los usuarios interpretan una interfaz y su comportamiento utilizándola. Con esto, se hace imperativo una etapa de pruebas con usuarios reales (sin miedo a redefiniciones) y una etapa inicial de análisis tanto de target como de arquitectura de información.
Pienso que debemos diseñar experiencias, no productos. Si haces un producto bonito, puede que quien lo utiliza le agrade la estética y lo tenga en un lugar destacado. Pero si el usuario tiene una experiencia diferente, satisfactoria navegando, es muy probable que vuelva y que lo recomiende a otros usuarios, todos potenciales clientes.
Y ¿qué implica este diseño de experiencias?
- Pensar global: desde que el usuario carga el sitio, hasta que lo deja. Cada paso, cada elemento debe ser cuidadosamente pensado y aplicado.
- Considerar tanto la presentación del contenido para todos (accesibilidad), como la facilidad del uso de cada elemento del sitio (usabilidad).
- Desarrollar hacia el usuario, desde lo complejo del proceso a la simplicidad de la tarea.
- Diseñar mensajes, ayudas, errores y guías de navegación que apoyen y orienten al usuario, y que lo haga sentirse bien y no fracasado por no haber logrado algo.
- El contenido es el rey, por lo tanto debe ser tratado como tal y el diseño es el soporte para el mensaje que se quiera entregar al usuario a través del sitio web. Pero el diseñador debe ser hábil: puedes persuadir al usuario tanto con buenos textos como con buen diseño.
Como ven, esto es sólo un esbozo de lo que pienso debería ser un diseñador web integral, que cumpla con efectividad su tarea comunicadora y persuasiva y que finalmente pueda ser valorado como tal. Este tema queda abierto a sus comentarios, los que pueden nutrir y complementar este tema.
]]>
Este es uno de tantos artículos de este sitio que son inspirados a partir de vivencias, experiencias y conversaciones con otras personas que comparten el mismo oficio.
El comienzo
Típico proyecto web, se hizo la etapa de AI, wireframming, diseño de propuestas, se aprobó un estilo gráfico, se hicieron mejoras en el diseño y se comenzó a maquetar las páginas. Lo siguiente es una variación (más simple) del wireframe de la home (por motivos de privacidad, omito el nombre del proyecto/cliente y detalles):
Hasta aquí todo medianamente normal, pero al hacer funcionar la parte de Noticias, nos topamos con un pequeño gran detalle: en el wireframe y en el boceto se muestra que hay tabs por tipo de noticias, y además hay resumen de 3 noticias (según tipo) con fotografias a desplegarse, según pases el mouse sobre cada texto:
El análisis
¿Dónde veo un problema? Veámoslo según cada disciplina
- Usabilidad: técnicamente, intervienen 2 tabs: por noticias, que al desplazar el cursor sobre cada resumen se reemplaza por su imagen respectiva; y por tipo de noticia, que son 3 tabs. Este doble tab puede crear confusión al usuario.
- Experiencia de usuario: En total, son 9 imágenes cargadas: 3 tipos de noticias, 3 noticias por tipo; cada imagen, por el tamaño, es probable que pese cada una 20kb, lo que en total se debe cargar 180kb. Quizás no es mucho peso, pero hay que tomar en cuenta que además se cargan los banners, que son bastante grandes y pueden llegar a ser pesados…
- Accesibilidad: Para conexiones lentas, no debemos pedirle tanto al usuario si es poco probable que vaya a necesitar de esas 9 imágenes. Para conexiones desde celulares, sería un abuso.
- Desarrollo: para aminorar esa carga, podríamos cargar las noticias en los tabs según el usuario vaya haciendo click en ellas mediante AJAX; pero esto involucra un desarrollo extra que no estaba estimado.
Sinceramente, podríamos haber continuado con la construcción del sitio y ya. Pero es importante tomar en cuenta estos detalles, que al fin y al cabo hacen que un proyecto marque la diferencia.
La solución
Aún se está trabajando en ello, pero se intervendrá el diseño y probablemente se quitarán las imágenes asociadas por cada noticia, y se dejará sólo 1 imagen principal por tipo de noticia, lo que reduce la carga a sólo 3 imágenes:
Como ven, no impacta mayormente en el diseño final, pero sí será necesario cambiarlo y transparentarle esta modificación al cliente, siempre argumentando que es para mejor.
Esto es todo, como aún el proyecto está en proceso no hay desenlace (favorable o no), aún así me encantaría leer sus opiniones.
]]>
Todos revisados y publicados a través de tus propias recomendaciones.
Your flexible fixed layout / Tu estructura fija, flexible
Selecciona tu idioma / Select your language:
EN
Coding liquid layouts for your website can become a major problem due to many factors to be taken into when the user resizes the browser: images that doesn’t fit the width, texts wrapping as not expected, columns breaking… not to mention that working with percentages in CSS is problematic among different browsers. With a fixed layout this should not happen, because you have more control over the structure itself and the box model behaves as you expect if you use a good CSS reseter.
With jQuery browserSizr you’ll have more control over CSS styles when there is a significant change in browser size. It has 4 of the most common screens width:
- smartphones (310px or less)
- less than 1024px (from 311px to 1023px)
- greater than 1024px (from 1024px to 1279px – including 1024px)
- greater than 1280px (from 1280px and higher – including 1280px)
Specifically, browserSizr detects the current width of your browser or it’s resize and injects a specific class when it is in the range you’ve activated. Through CSS and a bit of specificity, you can define what happens when the browser is in each resolution:
#container {
width: 960px; /* normal width */
font-size: 14px;
}
#container.lower1024 {
width: 740px; /* width for less than 1024px */
font-size: 12px; /* smaller font-size */
}
#container.over1280 {
width: 1200px; /* width for over 1280px */
font-size: 16px; /* bigger font-size */
}
Configuration:
- Include the jQuery library and this humble plugin:
<script src="jquery.js" type="text/javascript"></script> <script src="jquery.browserSizr.js" type="text/javascript"></script>
- Inicialize-it with the default parameters:
<script type="text/javascript"> $(function(){ $().browserSizr(); }) </script> - Or configure it as preferred
$().browserSizr({ containerDiv: '#container', //containerDiv - value: any HTML tag or #id, default to #container debug: 'off', //debug- value: on | off, default to 'off' smartphones: 'off', //smartphones - value: on | off, default to 'off' lower1024: 'on', //lower1024 - value: on | off, default to 'on' over1024: 'on', //over1024 - value: on | off, default to 'on' over1280: 'off' //over1280 - value: on | off, default to 'off' });
ES
Crear estructuras líquidas para tu sitio web puede llegar a ser un gran problema debido a los muchos factores que se deben tomar en cuenta cuando el usuario escala el browser: imágenes que se pueden pasar del ancho, textos que no se cortarán como esperabas, columnas que pueden llegar a quebrarse… sin hablar de que trabajar con porcentajes es problemático entre los diferentes navegadores. Con un layout fijo esto no debería ocurrir ya que tienes más control sobra la estructura misma y el modelo de caja se comporta como esperas si haces uso de un buen reseter de estilos CSS.
Con jQuery browserSizr podrás tener más control sobre los estilos CSS cuando existe una variación significativa la dimensión del browser: en cuántos pixeles quedaría el tamaño de la tipografía del menú a 1280x1024px, o que las imágenes queden a 80% de su tamaño en resoluciones de 800x600px por ejemplo. Tienes los 4 anchos de pantallas más comunes:
- smartphones (310px o menos)
- menor que 1024px (de 311px a 1023px)
- mayor que 1024px (de 1024px a 1279px – incluye 1024px)
- mayor que 1280px (de 1280px o más – incluye 1280px)
En específico, browserSizr detecta el actual ancho del navegador ó su redimensionado e inyecta una class específica cuando se encuentra en el rango que hayas activado. A través de CSS y un poco de especificidad, puedes definir qué quieres que ocurra cuando el browser se encuentre en cada resolución:
#container {
width: 960px; /* ancho normal del sitio web */
font-size: 14px;
}
#container.lower1024 {
width: 740px; /* ancho para resoluciones menores que 1024px */
font-size: 12px; /* menor tamaño de fuente */
}
#container.over1280 {
width: 1200px; /* ancho para resoluciones mayores que 1280px */
font-size: 16px; /* mayor tamaño de fuente */
}
Configuración:
- Incluye la librería jQuery y luego, este humilde plugin:
<script src="jquery.js" type="text/javascript"></script> <script src="jquery.browserSizr.js" type="text/javascript"></script>
- Inicialízalo con los parámetros por defecto:
<script type="text/javascript"> $(function(){ $().browserSizr(); }) </script> - O configúralo como más prefieras:
$().browserSizr({ containerDiv: '#container', //containerDiv - id o etiqueta donde se inyectará la class debug: 'off', //debug - ventana debug on | off, por defecto off smartphones: 'off', //smartphones - valores: on | off, por defecto 'off' lower1024: 'on', // valores: on | off, por defecto 'on' over1024: 'on', //over1024 - valores: on | off, por defecto 'on' over1280: 'off' //over1280 - valores: on | off, por defecto 'off' });
Bajar/Download plugin (.zip 1kb)
Bajar/Download plugin+demos (.zip 22kb)
browserSizr logo by toledopasarin
Little extension as Jorge Sousa required, now it detects just the height of the browser window within 2 values: less than 600px and over 600px.
Pequeña extensión como solicitada por Jorge Sousa, donde ahora detecta sólo el alto de la ventana dentro de 2 rangos: menor que 600px y mayor a 600px.
]]>
En esta ocasión utilicé bastantes más capas que en el ejemplo original (6 en total… un poco exagerado ya que los PNG‘s pesan bastante), pero el HTML fue construído de igual manera:
<div id="nube">
<div id="montanas">
<div id="ciudad">
<div id="personas">
<div id="persona1">
<img src="imgs/persona1.png" width="280" height="280">
<p>Nulla facilisi. In vel sem…</p>
</div>
<div id="persona2">
<img src="imgs/persona2.png" width="280" height="280">
<p>Aliquam et nisl vel ligula…</p>
</div>
<div id="persona3">
<img src="imgs/persona3.png" width="280" height="280">
<p>Nunc auctor bibendum eros….</p>
</div>
</div>
<div id="enredadera">
<div id="hojas">
</div>
</div>
</div>
</div>
</div>
Y el CSS:
#nube, #montanas, #ciudad, #enredadera, #hojas, #personas {
position: absolute;
height: 100%;
width: 200%;
left: -150px;
}
Un detalle importante fue ampliar bastante el ancho de todas las cajas para que puedan soportar un desplazamiento horizontal contínuo (cuidando siempre que sea en porcentaje; así se conserva el efecto Parallax). Cada imagen es aplicada como background y posicionada horizontalmente en porcentaje y verticalmente de acuerdo a su ubicación (top ó bottom).
#nube {
background: url(../imgs/nube.png) 20% top repeat-x;
}
#montanas {
background: url(../imgs/montanas.png) 10% bottom repeat-x;
}
#ciudad {
background: url(../imgs/ciudad.png) 30% bottom repeat-x;
}
#enredadera {
background: url(../imgs/enredadera.png) 40% top repeat-x;
}
#hojas {
background: url(../imgs/hojas.png) 50% bottom repeat-x;
}
Si modifican el ancho de la ventana verán que se conserva el efecto Parallax, salvo la capa de personas la que pretendo que sea contenido (dado el caso que se requiera así).
Ahora, la magia se aplica a través de Mootools. El efecto de desplazamiento está dentro del .js que incluí al bajar el archivo y se llama FX.Style. Con él haremos que mediante un evento de click en cada botón, cada <div> se desplace en diferentes medidas de su margin-left. O sea, la primera capa #nubes se moverá -100px a la izquierda, luego #montanas lo harán -200px y así sucesivamente, logrando un efecto de profundidad en cada capa ya que se moverán en diferentes medidas:
$(‘btn_uno’).addEvent(‘click’, function(){
nube.start({
’margin-left’: 0
});
montanas.start({
’margin-left’: 0
});
ciudad.start({
’margin-left’: 0
});
enredadera.start({
’margin-left’: 0
});
hojas.start({
’margin-left’: 0
});
personas.start({
’margin-left’: 0
});
});
$(‘btn_dos’).addEvent(‘click’, function(){
nube.start({
’margin-left’: -100
});
montanas.start({
’margin-left’: -200
});
ciudad.start({
’margin-left’: -300
});
enredadera.start({
’margin-left’: -400
});
hojas.start({
’margin-left’: -1000
});
personas.start({
’margin-left’: -500
});
});
$(‘btn_tres’).addEvent(‘click’, function(){
nube.start({
’margin-left’: -500
});
montanas.start({
’margin-left’: -600
});
ciudad.start({
’margin-left’: -700
});
enredadera.start({
’margin-left’: -800
});
hojas.start({
’margin-left’: -1500
});
personas.start({
’margin-left’: -900
});
});
Pueden ver el código completo de cada elemento:
PD: El movimiento en Safari 3 anda perfecto, muy suave; ya en Firefox 2 y 3 se pega algunos saltos, y en Opera 9.2 anda mas cortado aún… Quizás sea mi computador, espero sus impresiones sobre esto.
]]>Esta es una técnica muy limitante, ya que se necesita mucha creatividad para encontrar un uso práctico que impacte al usuario y que principalmente no sea un estorbo en la navegación del sitio. Otro punto importante es que lo más probable necesiten hacerlo con PNG transparente, lo que hace que IE6 sea excluído (salvo utilicen algun buen filtro de PNG para él). Un par de gradiosos ejemplos lo encontramos en el sitio de Silverback y de We all hate quick books.
En este artículo les mostraré cómo se realiza, y lo más probable es que se hagan la misma pregunta que yo me hice: ¿porqué #&œ¥Ω no se me ocurrió a mí antes?
Parallax no es muy amigable, ya que a primera vista no se nota. Se necesita mover la ventana del browser para recién notar el efecto. Primero les presento el ejemplo final, para que puedan apreciar lo que haremos. Si modifican el tamaño de su ventana podrán notar de qué les estoy hablando
Primero necesitamos de las imágenes que formarán nuestras capas. Cuiden de prepararlas cosa que el final y el principio calcen perfectamente; en mi caso con 3 capas necesité montañas, árboles y unas ramas desenfocadas como se muestran en el siguiente diagrama:
Luego, el HTML. Básicamente se compone de (en mi caso) 3 div‘s, uno para cada capa (cada capa anidado en otra):
<div id="montanas">
<div id="arboles">
<div id="hojas">
</div>
</div>
</div>
El <div> #montanas será el que se despliegue más atrás; así #hojas será el que esté más adelante y el que se moverá más rápido que las otras.
El CSS es muy simple. El efecto se logra con un juego de porcentajes: mientras agregamos las imágenes de fondo de los div‘s mediante background-image, posicionamos cada capa (con background-position) con porcentajes horizontales: mientras las montañas se ubican a 30% de la izquierda, las hojas estarán a 70% lo que hará que se muevan en diferentes velocidades si la ventana se mueve. Este juego de porcentajes es toda la técnica, el resto será vil posicionamiento absoluto (para que los elementos estén a 100% alto y ancho, y se ubiquen en el extremo inferior del browser):
#montanas {
background: url(images/montanas.png) 30% bottom repeat-x;
position: absolute;
height: 100%;
width: 100%
}
#arboles {
background: url(images/arboles.png) 50% bottom repeat-x;
position: absolute;
height: 100%;
width: 100%
}
#hojas {
background: url(images/hojas.png) 70% bottom repeat-x;
position: absolute;
height: 100%;
width: 100%
}
Pero ya existe sIFR. Acrónimo de Scalable Inman Flash Replacement, es una técnica que permite que reemplaces elementos de texto con equivalentes en Flash. sIFR es una solución cross-browser ycross-platform para asuntos de tipografía en la web.
Su funcionamiento es bastante práctico. Está compuesto de una película SWF, un archivo Javascript y dos archivos CSS. Con el .swf lo que hará es incluir la tipografía que quieras utilizar en uno o varios estilos (normal, bold, italic). Con el .js se realizará la magia de reemplazar el texto que definas con la película .swf pero sin inyectar el objeto, o sea, tu código fuente generado no tendrá ningún <embed> u <object>, sino que estará el texto que tengas escrito tal y como sería un HTML. Ya los .css ayudan al .js a emplazar las películas (a través de un juego con visibility).
La idea no es reemplazar todos tus textos con tipografías en Flash, sino ser prudentes y sólo enfocarnos en títulos, bloques (blockquote) u otros elementos destacables. Lo bueno es que no pierdes la semántica y los indexadores leerán tu sitio tal y como sería un HTML, ya que realmente ES un HTML. Otra ventaja es que si utilizas la película Flash más de una vez, ésta quedará en el cache del usuario y será cargada sólo una vez, lo que no hará taaaaaaan grave el peso que ganas con esto. Ahora, veámoslo en la práctica:
No es muy complicado de implementar, pero me costó la primera vez así que lo haré didáctico para todos, detallando paso por paso.
Paso 1
Bajar el sIFR de su sitio web.
Paso 2
Crear tu película .swf con la font que desees. Para eso, debes abrir el .fla que está dentro del directorio flash y abrir el MovieClip ‘holder’, allí seleccionas el área de texto dinámico y cambias la tipografía que trae por defecto (Verdana) por la que quieras (en mi caso será Frutiger Condensed… bella).
Un detalle importante para textos no-anglos son los acentos. Por defecto se incluyen caracteres básicos, números y algunos símbolos. Debes agregar a mano los acentos para nuestro idioma que creas necesarios: á é í ó ú ñ ä ë ï ö ü.
Luego publica tu película como siempre lo haces en Flash (command+enter o control+enter en Win) dentro de esta carpeta que estás trabajando (flash). Esto es importante ya que contiene algunos .as que hacen que la magia ocurra. Ponle un nombre característico a tu .swf, quizás el nombre de la familia tipográfica que estás usando sería apropiado.
Paso 3
Ordena tus archivos. Recomiendo que los juntes dentro de un único directorio llamado /sifr. Los únicos que necesitarás de todo eso son:
- tu_tipografia.swf
- sIFR-print.css
- sIFR-screen.css
- sifr.js
Paso 4
Ahora toca configurar nuestro HTML. Lo primero es incluir el .js y los .css correspondientes:
<link rel="stylesheet" href="sifr/sIFR-screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="sifr/sIFR-print.css" type="text/css" media="print" />
<script type="text/javascript" src="sifr/sifr.js"></script>
Lo segundo, agregar algunos comandos en Javascript para hacer que nuestra película funcione con los selectores que deseemos:
var tu_tipografia = {
src: ‘sifr/tu_tipografia.swf’
};
sIFR.activate(tu_tipografia);
sIFR.replace(tu_tipografia, {
selector: ‘h1′
,css: {
’.sIFR-root’: {
’color’: ‘#FF0000′,
’font-size’: 56,
’text-align’: ‘center’
}
}
,wmode: ‘transparent’
});
Claramente la variable tu_tipografia y todo lo que tenga este nombre deberá coincidir con el nombre que le has puesto a tu película SWF con la fuente que agregaste en el Paso 2.
El resto son comandos donde dicen cuál es el selector que quieres reemplazar (un H1, una class, un id… enfin) e incluso comandos CSS (no todos, principalmente para estilos de texto como color y tamaño por ejemplo).
Paso 5
Subir todo a un servidor, ya que localmente no podrás ver nada. Desde ahí la verás los resultados.
Miren el código fuente, verán lo simple que es y que funciona de maravilla.