La técnica de reemplazo de texto que presento hoy es, en algunos aspectos, muy interesante. A diferencia de la sustitución clásica es a la imagen a través de CSS , esta técnica utiliza una película de Flash para sobrescribir los títulos de nuestro sitio. A pesar de ser un poco más articulado, ya que requiere la creación de una película de Flash y el uso de Javascript, permite obtener una serie de ventajas considerables:
- Mantiene la "accesibilidad del sitio, aprovecha la -verdadera-discreto Javascript para que los rastreadores web y las arañas siguen viendo la página lo más simple y correcta HTML
- No requiere la creación de imágenes n para n existencias. Sólo se necesita una película para reemplazar todos los títulos de nuestro sitio, con un ahorro considerable en términos de Descarga
- Permite la creación de títulos simples, sino también con fuentes normalmente no se utiliza en la web
- El texto se puede representar en HTML, gracias a las características de flash
- El texto puede seleccionarse
- Siendo una película de Flash se puede poner cualquier tipo de interactividad y animaciones
Se dará cuenta, también, que en este procedimiento la CSS están apenas se tiene en cuenta!
Las herramientas que vamos a utilizar
Antes de ver lo que tenemos que utilizar esta técnica.
- Adobe Flash para la creación de la película que va a tomar el lugar de nuestro título
- La biblioteca SWFObject para armar - dinámico - la película (discreto)
- La biblioteca prototype.js para automatizar todo, en los ejemplos que voy a utilizar el nuevo cargador de Google Library API AJAX , pero si quieres puedes incluir prototype.js por su cuenta por separado
Aparte de flash, los otros instrumentos pueden ser reemplazados con funciones personales u otras soluciones.
La película de Flash
Imagine que desea crear un título con una fuente en particular, lo que hace CSS innecesario porque el problema es que la fuente no puede ser instalado en la máquina del usuario final y por lo tanto no visto por el usuario final:
Abra Flash y crear una película con un tamaño similar al del título que desea reemplazar. Como veremos más adelante, no importa el tamaño que se encuentra en tiempo de diseño, esto se puede cambiar más adelante sin afectar el rendimiento del texto. Inserte un objeto de texto:
Haga clic en el botón "Insertar" y seleccione:
En el primer cuadro insertar este código simple y el desarme:
1 2 3 4 5 | / / Funciona en cualquier tamaño scaleMode = StageScaleMode . NO_SCALE ; prácticas scaleMode =. StageScaleMode NO_SCALE.; align = StageAlign . TOP_LEFT ; prácticas align =. StageAlign TOP_LEFT.; / / Obtiene el parámetro content pasado de Javascript |
Compilar y nuestra película (textreplacement.swf) y luego pasar del formato HTML, una usandone ya se ha visto, con el fin de maximizar el compatibilià:
1 |
En la sección de head del código de inserción:
1 2 3 4 | "text/javascript" src = "swfobject.js" >< / script > < guión type = "text / javascript" src = "swfobject.js"> </ script de > "text/javascript" > < guión type = "text / javascript"> swfobject.embedSWF ("textreplacement.swf", "titolo_uno", "544", "50", "9.0.0", null, {content: "Título Uno"}); </ escritura > |
che contiene la stringa del titolo. El TAG h1 se sustituye por textreplacement.swf nuestra película, con el parámetro de content que contiene la cadena de título. En una situación más compleja, por lo que con más títulos, esta solución se convierte en desventaja, aunque es cada vez más "emocionante" que la simple sustitución mediante CSS: haga clic aquí , por ejemplo, (tenga en cuenta que el texto es seleccionable).
El título tiene dos contenidos HTML y se hace de motor de Flash, escrita en rojo:
1 | "textreplacement.swf" , "titolo_due" , "544" , "50" , "9.0.0" , null , { content : 'Titolo <font color="#ff0000">due</font>' } ) ; . swfobject embedSWF ("textreplacement.swf", "titolo_due", "544", "50", "9.0.0", null, {content: 'Título <font color="#ff0000"> Two </ font>' }); |
Por cada título de la página, de hecho, lo que tienes que insertar una fila en SWFObject Javascript indicando el ello y el contenido del título a tratar. Usando prototype.js e insertando una clase para interceptar los títulos para sustituir, podemos escribir una función sencilla que puede reemplazar todos los valores en la página con contenido Flash, retirar el parámetro content directamente de HTML: Haga clic aquí por ejemplo.
1 2 3 | "titolo_uno" class = "text-replacement" >< span > Titolo uno < / span >< / h1 > < h1 id = class "titolo_uno" = "text-reemplazo"> < lapso > Título One </ lapso > </ h1 > "titolo_due" class = "text-replacement" >< span > Titolo due < / span >< / h1 > < h1 id = class "titolo_due" = "text-reemplazo"> < lapso > Título Two </ lapso > </ h1 > "titolo_tre" class = "text-replacement" >< span > Sono il Titolo Tre un po' più complicato < / span >< / h1 > < h1 id = class "titolo_tre" = "text-reemplazo"> < lapso > Título Three'm un poco más complicado </ lapso > </ h1 > |
1 2 3 4 5 6 7 8 9 | google. setOnLoadCallback ( function () { ) . each ( $ $ ('H1.text de reemplazo.) Uno ( element ) { función (elemento) { } ); } ); |
En este caso he usado google.setOnLoadCallback() en la que el uso de Google Library API AJAX para cargar prototype.js. . A continuación, se interceptó todas TAG h1 clase establece en text-replacement . En ese punto se llama SWFObject para insertar el elemento que se encuentra ( element.id ) nuestra película Flash. Tenga en cuenta que se utiliza element.innerHTML para recoger el contenido de los textos para pasar a la película Flash. Si lo hace, en realidad pasa el TAG span , pero esto no es un estudio de caso en haber establecido el campo de texto en la película Flash como HTML.
Flash, entonces, permite una variedad de efectos (tiempo de ejecución) que hacen que esta técnica realmente "divertido": haga clic aquí , por ejemplo.
Lo que he presentado es obviamente un ejemplo sencillo! Sin embargo, el código JavaScript y HTML taggature se pueden mejorar y hacer esta técnica realmente espectacular. Puede introducir los títulos de los gráficos de animación o movimiento de fondos, además de simplemente utilizar fuentes no puede ser utilizado por CSS. Con modificaciones apropiadas pueden pasar parámetros adicionales para nuestra película Flash, por lo que es aún más dinámico: Tamaño de la fuente, la posición del texto, las acciones que se deben realizar para hacer clic, etc ... También puede crear una serie de videos para diversos tipos de valores de reemplazar sin dejar de ofrecer un ahorro considerable en términos de descarga a tiempo!
Hola! No podía replicar esta técnica, que sabe lo equivocado que corrió! para ser honesto, no podía ni siquiera ver su ejemplo.
Gracias y un saludo!
Simona
@ Simo: prueba ahora! Los ejemplos no cargan la biblioteca SWFObject utiliza para insertar la película Flash. Exactamente lo que estás "tropezó"?
Yo todavía no veo el swf en lugar de los títulos en su ejemplo! En cuanto a mi "ejercicio", no sé lo que estoy haciendo mal: Hice un pie de ensayo y no entiendo donde se papeles. Para hoy mi tutoría en línea ha terminado, si puedo averiguarlo hacerle saber! ¡hola
@ Simo: ejemplos probabilmenti ven como una cuestión de mala caché borrar todo y volver a intentarlo ... si hay que ir bien: aun porque los veo bien
Para el enganche dame un poco de tu código, por lo que vamos a responder a la pregunta.
Saludos
GF