La técnica de reemplazo de texto que hoy presento es en algunos aspectos, muy interesante. A diferencia de la clásica imagen usando CSS para reemplazar a la operación , 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 complejo, que requiere la creación de una película Flash y el uso de JavaScript, produce una serie de ventajas considerables:
- Mantiene el acceso a la página mediante un Verdadero discreto Javascript para que los rastreadores, arañas seguir viendo la página como HTML simple y correcta
- No requiere la creación de n por n títulos de imagen. Sólo una película para reemplazar todos los títulos de nuestro sitio, con un ahorro considerable en términos de la descarga
- También le permite crear títulos simples pero no las fuentes normalmente se utilizan en la Web
- Texto se puede representar en HTML, gracias a las características de Flash
- El texto se puede seleccionar
- Como se puede insertar una película Flash y animaciones interactivas de cualquier tipo
Se le nota, además, que en este procedimiento son prácticamente CSS en cuenta!
Las herramientas que utilizamos
Antes de ver lo que tenemos que utilizar esta técnica.
- Flash para la creación de la película que va a tomar el lugar de nuestro título
- La biblioteca SWFObject para insertar - Dinámica - la película (discreto)
- La biblioteca prototype.js para automatizar esto, voy a usar ejemplos en el nuevo cargador de Google AJAX Library API , pero si quieres puedes incluir prototype.js por su cuenta por separado
Además de Flash, las otras herramientas se pueden reemplazar por otras funciones o soluciones personales.
La película de Flash
Supongamos que queremos ofrecer un juego con una fuente en particular, lo que hace CSS innecesaria porque el problema es que las fuentes no puede ser instalado en la máquina del usuario final y por lo tanto, no aparece por el usuario final:
Open Flash y crear una película con un tamaño similar a la forma en que desea reemplazar. Como veremos más adelante que no importa el tamaño del conjunto en tiempo de diseño, esto puede ser cambiado más tarde sin afectar al rendimiento del texto. Inserte un objeto de texto:
Haga clic en "Insertar" y seleccione:
En el primer fotograma e inserte este código desarma simple:
1 2 3 4 5 | / / Funciona en cualquier tamaño scaleMode = StageScaleMode . NO_SCALE ; pasantías scaleMode =. StageScaleMode NO_SCALE.; align = StageAlign . TOP_LEFT ; align = pasantías. StageAlign TOP_LEFT.; / / Recupera el contenido del parámetro pasado de JavaScript |
Recopilamos nuestra película también (textreplacement.swf) y luego pasar el código HTML, un usandone ya hemos visto, con el fin de maximizar la compatibilidad:
1 |
En la sección de head de la inserción de código:
1 2 3 4 | "text/javascript" src = "swfobject.js" >< / script > < script de type = "text / javascript" src = "swfobject.js"> </ script de > "text/javascript" > < script de type = "text / javascript"> swfobject.embedSWF ("textreplacement.swf", "titolo_uno", "544", "50", "9.0.0", null, {content: "un título"}); </ script de > |
che contiene la stringa del titolo. El TAG h1 se sustituye por nuestra película textreplacement.swf, con el parámetro content que contiene la cadena de título. En una situación más compleja, y con más títulos, esta solución se convierte en un inconveniente, aunque es más y más "emocionante" el mero reemplazo a través de CSS: haga clic aquí , por ejemplo, (tenga en cuenta que el texto es seleccionable).
El título tiene un contenido de dos y HTML es interpretado por el motor de Flash, escrita en rojo:
1 | "textreplacement.swf" , "titolo_due" , "544" , "50" , "9.0.0" , null , { content : 'Titolo <font color="#ff0000">due</font>' } ) ; . EmbedSWF SWFObject ("textreplacement.swf", "titolo_due", "544", "50", "9.0.0", null, {content: 'Título <font color="#ff0000"> </ font> " }); |
Para cada título de la página, de hecho, usted tiene que insertar una fila en SWFObject JavaScript indicando el id del título y el contenido a tratar. Usando prototype.js y la adición de una clase para interceptar a los valores a ser sustituido, se puede escribir una función sencilla que puede sustituir a todos los títulos en la página con contenido Flash, tomando 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 = "titolo_uno" class = "text-reemplazo"> < lapso de > un título </ periodo > </ h1 > "titolo_due" class = "text-replacement" >< span > Titolo due < / span >< / h1 > < h1 id = "titolo_due" class = "text-reemplazo"> < periodo > Título Segundo </ periodo > </ h1 > "titolo_tre" class = "text-replacement" >< span > Sono il Titolo Tre un po' più complicato < / span >< / h1 > < h1 id = "titolo_tre" class = "text-reemplazo"> < periodo > Título Tres de ellos son un poco "más complicado </ periodo > </ h1 > |
1 2 3 4 5 6 7 8 9 | google. setOnLoadCallback ( function () { ) . each ( $ $ ('H1.text de reemplazo "). Cada uno ( element ) { función (elemento) { } ); } ); |
En este caso he usado google.setOnLoadCallback() como el uso de Google AJAX Library API para cargar prototype.js. . Luego se interceptó todos los TAG h1 con el conjunto de la clase de 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 recuperar el contenido del texto para pasar a la película de Flash. Esto va a pasar el TAG span , pero esto no es un probelma que estableció el campo de texto en la película de Flash en HTML.
Flash, entonces, permite una variedad de efectos (runtime) 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 de marcado se puede mejorar y hacer que la técnica realmente espectacular. Puede insertar títulos en los fondos de animación o gráficos, además de utilizar simplemente las fuentes no serán utilizados por CSS. Con las modificaciones adecuadas, puede pasar parámetros adicionales a nuestra película Flash, por lo que es aún más dinámico: Tamaño de la fuente, la posición del texto, para realizar acciones en clic, etc ... También se puede crear una serie de películas para los diferentes tipos de valores que se cambio, sin dejar de ofrecer un ahorro considerable en términos de descarga a tiempo!
Hello! Yo no podía replicar esta técnica, que sabe lo que el error fue atrapado! para ser sincero, ni siquiera podía ver su ejemplo.
Gracias y un saludo!
Simona
@ Simo: prueba ahora! Los ejemplos no cargar la librería SWFObject para insertar la película Flash. Exactamente lo que "tropezó"?
Todavía no se ve el swf en lugar de los valores en su ejemplo! En cuanto a mi "ejercicio", no sé lo que estoy haciendo mal: yo hice un peatón, que no entiendo que te envuelva. Hasta el día de mi tutoría en línea es más, si se me ocurre que a saber! ¡Hola
@ Simo: Ejemplos probabilmenti los ven como una cuestión de mala memoria caché y vuelva a intentarlo ... si todo limpio deben ir bien: en parte porque los veo bien
Para el enganche que yo tenga parte de su código, así que vamos a resolver el asunto.
Saludos
GF