SW3 – Blog|Site development and design

Ya hemos hablado de lo limitado que es le HTML+CSS las tipografias web, para los diseñadores y la necesidad de recurrir a reemplazar algunos texto con imágenes, con toda las contras que esto implica.
El HTML limita a los diseñadores, con lo que puedes hacer con el estilo de fuente en la web. Quizás limitando a elegir fuentes estándar y compatibles en cada sistema.

Esta presentación le introducirá a una técnica, llamada sustitución escalable de Flash ó Scalable Inman Flash Replacement (sIFR), lo que le permitirá usar esa nueva fuente y que se visualicen en todos los navegadores y en las páginas que cree, sin verse obligadas a utilizar las imágenes, fácil de usar, discreto, compatible con motor de búsqueda, seo friendly, de manera fácilmente y accesible por medio de un elegante combinación de Flash y JavaScript.

Internet, a pesar de sus cambios acelerados y sus mejoras en diferentes tecnologías, Todavía parece que no puede mantenerse al día con las exigencias de la tipografía, el diseñador no es una excepción. A partir de esto, los diseñadores se limitan a sólo seis “fuentes seguras Web”, Arial, Courier New, Georgia, Times New Roman, Verdana y Trebuchet MS.

Y poder diseñar sitios optimizados para Search Engine Optimization (SEO) y estándares web, parece poco probable que una opción basada en Flash podría resolver sus problemas tipografía.

Sustitución escalable de Flash (sIFR), es un código abierto de tecnologías JavaScript y Flash, inicialmente desarrollada por Shaun Inman y el mejoramiento de Mike y Mark Davidson Wubben que permite la sustitución de elementos de texto HTML en páginas web con equivalentes Flash.

Como se mencionó anteriormente, el HTML y CSS sólo permiten el uso de la fuentes seguras Web que es seguro asumir que estas fuentes se encuentra instaladas en el ordenador. sIFR, por otra parte permite que los diseños para los sitios Web puedan utilizar cualquier fuente, permitiendo al diseñador para utilizar las fuente de su elección en un elemento Flash que muestra el texto. En consecuencia, la fuente usada no tiene que estar instalada en la máquina del usuario.

Esencialmente, cualquier asignación de encabezamientos (H1, H2, etc …) se convertirán en archivos Flash con la fuente requerida. Sin embargo, cualquier motor de búsqueda Web a través de su sitio seguirá siendo capaz de leer todo el contenido de la página. Esto se debe a que los motores de rastreo de páginas web (web crawlers), no ejecutan el JavaScript, que modifica en tiempo de carga, la pagina y reemplaza las cadenas identificadas como encabezados con el Flash.

Una alternativa más común a sIFR (pero que su sitio podría obtener penalizaciones por los motores de búsqueda) implica la creación de una imagen, ajustada en el fondo, y luego ocultar el texto mediante CSS. En el loco mundo de los blogs y contenido generado dinámicamente, creando una imagen para cada nueva partida no es muy eficiente – en especial si está realizando varias actualizaciones al día. En comparación, sIFR automáticamente carga las etiquetas que haya establecido en su hoja de -esencialmente un método “set it and forget it “.

Desde su lanzamiento en 2005, muchas compañías internacionales han adoptado el uso de sIFR,  incluyendo:

ABC News
Nike
redhat
Aston Martin

Aquí les paso un ejemplo del sIFR: http://www.mikeindustries.com/blog/files/sifr/2.0/

En resumen,

las ventajas de sIFR

1. Muestra tus titulares en casi cualquier tipo de letra
Ideal para empresas con las fuentes y la identidad corporativa que quiere quedarse visualmente coherente con la prensa. (Revise su tipo de letra del acuerdo de licencia para ver si se permite la incorporación en línea.)

2. SEO amistoso

Contenido / copia “spidered” como HTML

3. Más dinámico que las imágenes

Puede ser fácilmente creado “sobre la marcha” para el contenido dinámico

Copia más rápido los cambios y actualizaciones

texto Seleccionable

4. Graceful degradación

Si Flash y / o JavaScript no es detectado, sIFR por defecto utiliza las reglas de estilos del CSS

Desventajas sIFR

1. Un control limitado

“Por lo tanto, / Por lo tanto,” anti-aliasing

2. Flash para la edición y configuración
3. Flash Player necesario para visualizar
4. Requiere JavaScript para ver .
5. Se recomienda aplicarlo solo sobre los titulares .
6. Uso mínimo recomendado (por página).
3-5 (o menos) los casos por página

Por último, sIFR no es visto como una revisión a largo plazo, sino más bien una alternativa temporal a la imagen basada en los encabezados. Si está ejecutando actualmente un sitio web que requiere actualizaciones frecuentes y / o tipos de letra y la costumbre quiere simplificar el proceso (mientras permanezcan SEO friendly) sIFR puede ser una buena alternativa para estudiar.

¿Como Funciona?

Sin entrar en más detalles técnicos, una descripción breve de su funcionamiento:

• Tenemos una página normal, con sus elementos determinados con CSS
• Tenemos un archivo .swf, que contiene los contornos de una fuente, y un poco de actionscript.
• Tenemos un archivo .css con instrucciones especiales
• Tenemos un archivo de javascript, que es el que hace que todo funcione
• Al momento de cargar la página, el javascript checa si el usuario tiene flash instalado, encuentra los elementos que hemos señalado que queremos reemplazar, e inserta en su lugar el archivo flash, con el contenido de los elementos (respetando las dimensiones del elemento original), y esconde los elementos originales.

Precauciones

sIFR fué pensado para sustituir textos pequeños, tales como encabezados. No es recomendable utilizarlo en elementos largos. Aunque se pueden tener enlaces en los textos sustituidos, su comportamiento puede ser impredecible, por lo que tampoco es recomendable usarlos para elementos como menús.

Paso a paso:

1. Preparación

Diseña tu página normalmente, utilizando para los elementos que quieras reemplazar, fuentes, colores y tamaños que se acerquen lo más posible a los textos reemplazados.

Descarga los archivos de sIFR , y descomprímelos a un folder en tu computadora

2. Exportar el .swf

Primero hay que asegurarnos que los archivos solo puedan ser usados en nuestro sitio. La licencia de muchas fuentes comerciales prohíbe la redistribución, y el tener un archivo .swf que contiene todos los contornos se considera redistribución.

Abre el archivo customize_me.as (Por defecto se abrirá con flash). Para poder hacer pruebas en tu computadora, asegúrate que allowlocal sea igual a true. Una vez que subas tu página al servidor, te conviene cambiarlo a false. Bajo la variable alloweddomains escribe el dominio o dominios de las páginas donde vayas a utilizar ese archivo .swf. Recuerda incluir el dominio con y sin www. Guarda y cierra el archivo.

Abre el archivo sIFR.fla. En un principio, parecerá que no hay nada, pero si haces doble clic en la mitad del escenario, se abrirá un movieclip y verás un texto que dice “Do not remove this text”. Haz clic a ese texto, y en la barra de propiedades, selecciona la fuente que quieras usar. Luego haz clic en el botón de caracteres, y selecciona los que quieras utilizar. Recuerda especificar caracteres con acento y eñes.

Exporta tu archivo (Archivo–>Exportar). Lo más práctico es nombrarlo como la fuente que usas, en caso de que tengas más de una. Asegúrate que customize_me.as y dont_customize_me.as estén en la misma carpeta que tu archivo .fla al momento de exportar. Copia tu archivo .swf a la carpeta donde tienes tu html.

3. Estilos

Hay 2 cosas que debes de hacer con tus estilos, primero, esconder los elementos que quieres que se reemplacen una vez que se haya determinado que el usuario tiene flash, y cambiarlos de regreso al momento de imprimir. Para eso incluye los contenidos de sIFR-screen.css y sIFR-print.css en tu hoja de estilos. Asegúrate que contengan reglas para los elementos que quieras reemplazar. Si tu fuente sIFR tiene proporciones muy distintas a la que usas en HTML, puede que sea necesario que cambies el tamaño o espaciado en este archivo.

4. Llamar al Java Script

Copia el archivo sifr.js a la carpeta donde tienes tu HTML.

Pon el siguiente código entre las etiquetas <head> y </head> de tu página.

<script src="sifr.js" type="text/javascript"></script>

5. Reemplazar los elementos

En tu archivo html, justo antes de la etiqueta </body>, pega el siguiente codigo:

<script type="text/javascript">

//<![CDATA[

if(typeof sIFR == "function"){

    sIFR.replaceElement(named({sSelector:"body h1", sFlashSrc:"mifuente.swf",

sColor:"#000000",sLinkColor:"#000000",

sBgColor:"#FFFFFF", sHoverColor:"#CCCCCC", nPaddingTop:20,

nPaddingBottom:20, sFlashVars:"textalign=center&offsetTop=6"}));

};//]]>

</script>

Una explicación de qué hace cada elemento, para que puedas cambiarlo según los resultados que quieras.

sSelector

Es el elemento que quieres que se reemplace. Puede ser una etiqueta html (h1, por ejemplo si quieres que se reemplazen todos los h1 de la página), una clase (.miencabezado), un id (#mitexto) o una combinación de todos ( .midiv h1#principal , si quieres que se remplace el h1 con id principal dentro del elemento con clase .midiv)

sFlashsrc

Es la ruta a tu archivo .swf, relativo a tu html.

sColor

El color que quieres que sea el texto, en formato hexadecimal.

sLinkColor

El color que quieres para los enlaces.

sBgColor

El color de fondo para tu texto. Puedes ponerlo transparente en otra variable, pero no funciona en todos los navegadores

sHoverColor

El color que será el texto al pasar el puntero sobre el.

nPadding

El padding (variables distintas para cada lado) que tenga tu elemento original en el css. Es muy importante que coincida, de lo contrario tu tamaño variará.

sFlashVars

aca puedes especificar variables para tu archivo .swf, como textalign para alinear el texto, offsetLeft y offsetTop para especificar una distancia desde el borde superior e izquierdo. underline=true subraya los enlaces .

sCase

Cambia el texto a mayusculas (upper) o minúsculas (lower)

sWmode

El ponerlo transparent te dará fondo transparente y aparecerá debajo de elementos posicionados absolutamente como menús. Pero ojo, no funciona en Opera ni en versiones viejas de Mozilla y Safari.

Puedes tener varias llamadas para reemplazar varios elementos, de esta forma:

<script type="text/javascript">

  //<![CDATA[

 if(typeof sIFR == "function"){

sIFR.replaceElement(named({sSelector:"h1", sFlashSrc:"mifuente.swf", sColor:"#000000"}));

sIFR.replaceElement(named({sSelector:"h2", sFlashSrc:"mifuente.swf", sColor:"#666666"}));

};

 //]]>

  </script>

Y listo! al visualizar tu página, deberás poder ver tus flamantes nuevos encabezados con flash

Te recomiendo la extension Dreamweaver para sIFR, que te enlaza los archivos necesarios y te genera el código javascript en la página
¿Busca más información? Visita www.mikeindustries.com / sifr de documentación y archivos. un ejemplo: http://www.mikeindustries.com/blog/files/sifr/2.0/

Este tutorial se describe cómo redirigir correctamente una página web utilizando un código de estado HTTP 301 y ubicación de cabecera. El código de estado 301 se utiliza para indicar que una página se ha movido permanentemente.

I. Redirecciones con secuencias de comandos del lado del servidor;

HTTP 301 en ASP-Redirige VBScript;

HTTP 301 en Redirige ColdFusion;

HTTP 301 Redireccionar en PHP;

HTTP 301 Redirige en Perl;

Redirige alias de página de sitio web a la raíz;

III. SSL https a http;

¿Por qué debería hacerlo?

Descargo de responsabilidad.

I. Redirecciones de servidor de secuencias de comandos

Si usted tiene una dinámica impulsada (del lado del servidor) sitio web, puede aplicar uno o más de las siguientes secuencias de comandos, dependiendo de qué lenguaje de script (s) que usted utiliza.

Estas porciones de código se explica por sí misma. Simplemente facilitar la respuesta de cabecera 301, y la ubicación de la nueva página.

HTTP 301 en ASP-Redirige VBScript

Incluya la siguiente código ASP en la parte superior de cada página: 
<% @ Language = VBScript%> 
<% 
«Reorientación Permanente 
Response.Status = "301 Movido permanentemente" 
Response.AddHeader "Location", "http://www.dexterityunlimited.com/" 
Response.End 
%>

HTTP 301 en Redirige ColdFusion

Incluya el código siguiente de ColdFusion en la parte superior de cada página:

<CFHEADER Statuscode="301" statustext="Moved Permanently">

<CFHEADER Name="Location" value="http://www.dexterityunlimited.com/">

HTTP 301 Redireccionar en PHP

Incluir el siguiente código PHP en la parte superior de cada página: 
<? php 
/ / Permanente redirección 
header ( "HTTP/1.1 301 Movido permanentemente"); 
de cabecera ( "Lugar: http://www.dexterityunlimited.com/"); 
exit (); 
?>

HTTP 301 Redirige en Perl

Incluya la siguiente código Perl en la parte superior de cada página:

#! / usr / bin / perl-w 
use strict; 
print "Situación: 301 trasladado permanentemente  n"; 
print "Situación: http://somewhere/page.htm  n  n"; 
salida;

HTTP 301 en Redirige JSP / Java

Incluya la siguiente código Java en la parte superior de cada página:

<% 
response.setStatus (301); 
response.setHeader ( "Situación", "http://www.dexterityunlimited.com/"); 
response.setHeader ( "Conexión", "cierre"); 
%>

II. Con la reorientación. Htaccess

Si está en un Linux / servidor Apache o Microsoft Windows Server que se pueden ejecutar los módulos de Apache, que usted puede hacer sus redirecciones con un. Htaccess.

El archivo. Htaccess es una herramienta muy poderosa, pero puede causar estragos en un sitio si no se aplican correctamente. Siempre guardar una copia de seguridad de cualquier archivo. Htaccess antes de intentar cualquier cambio.

Redirección con mod_rewrite

Las siguientes líneas de redirigir al cliente a una nueva ubicación. En este caso, una solicitud de contact.php el archivo se envía al archivo de contacto us.php:
Reescribirmotor en

rewriteRule contacto ^ . php $ http://www.dexterityunlimited.com/contact-us.php [R = permanente, L]

Redirigir todo el tráfico sin www

El código a continuación dirigirá todo el tráfico que no contiene el www en la URL a la misma página, pero que ahora incluye el
www. Y que la limpieza de los canónicos problema que se produce cuando la versión web de su sitio se indexan con la versión no-www: 

rewriteCond% (HTTP_HOST) ^ dexterityunlimited . com $ 
rewriteRule ^ .* $ http://www.dexterityunlimited.com% (REQUEST_URI) [R = permanente, L]

Redirige alias de página de sitio web a la raíz

¿Ha notado en sus archivos de registro que la gente está buscando index.asp index.htm o en su carpeta raíz? En lugar de
dejar a un error 404 no encontrado, ¿por qué no directamente

a su carpeta raíz, sin un nombre de archivo:

rewriteRule índice ^ . (php | html | htm | asp) http://www.dexterityunlimited.com/ [R = permanente, L]

III. SSL https a http

¿Ha experimentado graves problemas canónicos https con seguridad cuando la versión de su sitio está plenamente indexado a lo largo de su lado http versión? Si ese es tu caso, hay una manera de reorientar la dirección https para los bots, diciéndoles que los robots no indexar la página https versión.

Nuestro tutorial de indexación en buscadores de páginas seguras se describe cómo aplicar correctamente los motores de búsqueda utilizando un redirecciones HTTP 301 código de estado y ubicación de cabecera.

¿Por qué debería hacerlo?

Estoy seguro hay algunos de ustedes esta pregunta. Las respuestas son muchas, dependiendo de su situación particular.

¿Hay enlaces a su sitio web que están obsoletas, pero no tiene manera de cambiarlos? Basta con crear un redireccionamiento que se llevará a los visitantes que mediante vínculo obsoleto a los medios más adecuados nueva página en su sitio.

¿Existe un enlace en un directorio en alguna parte que está mal, o falta thewww? Utilice uno de los métodos anteriores para corregir la situación en el servidor.

Hay muchas maneras para que usted controle lo que la gente y ver dónde pueden acudir en su sitio web. Tómese su tiempo para aprender algunos trucos, y
usted podría encontrar que su tráfico aumenta porque no dejar a nadie atrás.

Descargo de responsabilidad

Todos los fragmentos de código de arriba son ejemplos y cada uno, fueron probadas por nosotros en algún momento. Sin embargo, no son en absoluto
responsables de cualquier daño que puedan causar. Se utilizan bajo su propio riesgo.

SEO Trabajadores celebra algún comentario, y / o sugerencias sobre este artículo acerca de los motores de búsqueda Permanente Redirecciones en nuestro
foros de debate.

Acerca de este tutorial SEO
Este tutorial fue escrito por John S. Britsios, Web y Arquitecto Superior de la optimización del Search Engine Consultor SEO trabajadores.