Manual de Compatibilidad de Gecko

  • Enlace amigable (slug) de la revisión: Manual_de_Compatibilidad_de_Gecko
  • Título de la revisión: Manual de Compatibilidad de Gecko
  • Id de la revisión: 122409
  • Creada:
  • Creador: Nathymig
  • ¿Es la revisión actual? No
  • Comentario /* Referencias en caso de problemas */ Arreglando un enlace

Contenido de la revisión


El objetivo de este manual es ayudar a poner al día vuestros sitios web para que funcionen en los navegadores respetando los estándares del Web y que detecten correctamente a Gecko.

Si desconocéis los estándares del Web, el artículo Utilización de estándares en vuestras páginas web constituye una introducción útil. ({{mediawiki.interwiki('en', 'Using_Web_Standards_in_Your_Web_Pages', 'en inglés')}})

Gecko es un navegador ajustable, desarrollado como parte del proyecto de código abierto Mozilla y basado más bien en las normas del W3C que en los códigos propietarios típicos del pasado. Respetar los estándares/normas/pautas del Web simplifica la interacción de los navegadores en el desarrollo y permite la accesibilidad .

4.x contra Gecko

Desde 1997, numerosos sitios Internet se han concebido para funcionar con Microsoft Internet Explorer 4 o con Netscape Navigator 4. Éstos navegadores fueron desarrollados antes de existir las recomendaciones del W3C para HTML (lenguaje para el formato de hipertextos), CSS (hojas de estilo en cascada) y DOM (modelo de objetos del documento).

Éstos navegadores más antiguos, sin estándares del Web, se diferencian de Gecko en numerosos puntos:

Los navegadores antiguos

  • Utilizan códigos HTML, CSS y JavaScript propietarios (no estándares).
  • Internet Explorer 4 y Netscape Navigator 4 ofrecen los dos ayuda para la mayoría de estándar HTML 3.2 y JavaScript de base.
  • Aún que soportan en cierta medida el estándar CSS 1, su puesta en marcha no se completa y tienen funcionalidades adicionales no estándares.
  • Ni Internet Explorer 4 ni Netscape Navigator 4 aguantan el DOM del W3C. En lugar de eso, cada uno tiene su propia "API" propietaria de manipulación de contenido, del estilo y de la posición de los elementos HTML en una página web.
  • Además, usan métodos completamente diferentes para integrar programas de terceros en sus navegadores.

Gecko es un motor de presentación "multiplataforma" compatible con un gran número de versiones de Windows, como Windows XP, Mac OS y Linux. Por esta pluralidad, sus funcionalidades son en general idénticas sea cual sea el soporte usado, al contrario de las versiones de Internet Explorer para Mac e Internet Explorer para Windows que son programas distintos y pueden entonces comportarse de maneras muy diferentes.

Prueba rápida de compatibilidad

Si vuestro sitio trabaja con las tecnologías propietarias de Netscape 4.x y de Microsoft, consulten el artículo siguiente para conocer rápidamente los principios generales de estas normas. Éste test de compatibilidad será mucho más benéfico para los sitios que utilicen un código simple o que estén en fase de modificación para soportar los estándares.

Preparación de los navegadores para la prueba

No todos los navegadores que utilizan Gecko contienen <tt>Firefox</tt> ou <tt>Netscape</tt> en su cadena "user-agent". Es importante, entonces, verificar que se detectan correctamente navegadores como AOL para Mac OS X.

Se pueden descargar varios navegadores de Mozilla. O, si se utiliza la detección de "user-agent", instalar una extensión para Firefox o Mozilla que permitirá «simular» las cadenas "user-agent" de éstos navegadores Gecko. Aquí tiene como hacerlo:

  • 1) Abrir SeaMonkey, Firefox o la antigua suite Mozilla. La ventaja de utilizar éstos navegadores es que detectando únicamente las cadenas <tt>Netscape</tt> o <tt>Netscape6</tt>, se llega directamente a los eventuales problemas.
  • 2) Instalar la extensión User Agent Switcher (en).
  • 3) Después de arrancar de nuevo el navegador hay que poner las cadenas "user-agent" de las cuales se desea probar la detección. (<tt>Herramientas --> User Agent Switcher --> Options --> Options… --> User Agents --> Add…</tt>).

Nota: he dejado lo anterior en inglés porque la extensión lo saca así, si lo ponemos en español habrá gente que se preguntará: dónde es que tengo que picar?

Una vez completado el cuadro de diálogo (debería parecerse a lo de abajo), Aceptar y cerrar la ventana «Options». Parece que el enlace no funciona, se puede mirar en el original
{{mediawiki.external('Image:GeckoCompatibilityHandbook-Configure-UASwitcher.PNG')}}

  • 4) Ya puede empezar a utilizar la cadena "User-Agent" que acaba de crear: <tt>Herramientas --> User Agent Switcher --> El nombre que ha elegido</tt>. Puede verificar que la cadena a cambiado en: <tt>Help --> About</tt> (Ayuda --> Acerca de …)

Encontrará las cadenas "user-agent" de los navegadores basados en Gecko, aquí. Lo mejor y si es posible, descargue también los diferentes navegadores para probarlos individualmente.

Repasando los resultados

Los siguientes temas tienen relación con la detección de los navegadores. Para más soluciones de problemas corrientes, siga leyendo.

Problema 1: El sitio respeta los estándares Web pero no se muestra correctamente
  • Pruebe de utilizar la cadena user-agent de Internet Explorer 6.
  • Si funciona, use los parámetro de la detección para dar el contenido IE 6 a los visitantes que tienen <tt>Gecko</tt> en sus cadenas user-agent. IE 6.x es actualmente mucho más parecido a los navegadores Gecko que Netscape 4.x, debido a una mejor ayuda de los estándares del W3C.
Problema 2: El sitio certificado Netscape 6.x se muestra incorrectamente en los otros navegadores
  • Si su sitio ya es compatible con Gecko, pruebe de volver a una cadena "user-agent" de Netscape 6. Si es más o menos aceptable, probablemente sólo detectará <tt>Netscape</tt> o <tt>Netscape6</tt>.
  • Detectar <tt>Gecko</tt> en su lugar es la vía más fácil para mejorar la comodidad de los usuarios de Mozilla, SeaMonkey, CompuServe 7, etc. (Artículo relacionado), {{mediawiki.interwiki('en', 'Browser_Detection_and_Cross_Browser_Support', 'en inglés')}}
Problema 3: El sitio no funciona bien en todos los navegadores Gecko

Si todavía tiene problemas, puede consultar la sección de soluciones rápidas de este manual. Además, si usa tecnologías propietarias de Netscape 4.x y/o de Microsoft, puede leer esto para saber rápidamente qué diferencias hay en Gecko.

Problemas con AOL o CompuServe

Aunque su sitio se muestra correctamente en Netscape 7.x, es importante que lo pruebe también en AOL pour Mac OS X y en CompuServe 7 para verificar la detección del navegador ({{mediawiki.interwiki('en', 'Browser_Detection_and_Cross_Browser_Support', ' en inglés')}}) y los posibles problemas de red.

Prueba de AOL detrás de un corta-fuego

Si debe conectarse a AOL detrás de un corta-fuego, América Online ha abierto los puertos TCP/IP 5.190 y 11.523 para que pueda comunicarse con el servidor de AOL. De esta forma podrá probar su sitio detrás de un corta-fuego, siempre y cuando el administrador de redes haya abierto estos puertos.

Tiene que estar conectado a Internet para hacer la prueba de vuestro sitio en AOL; es imposible acceder al sitio en una máquina local vía red local (LAN) sin una conexión Internet. Para más información, ver: Webmaster@AOL (en).

Referencias en caso de problemas

Como se explica en Utilización de estándares en vuestras páginas web, es necesario escribir la codificación estándar para el buen funcionamiento y la obtención de compatibilidad entre los navegadores Gecko, Netscape 4 y IE .

Síntoma Posible problema Solución
El sitio se muestra correctamente en Netscape 6.x pero no en Netscape 7.x u otros navegadores Gecko. La detección del navegador por JavaScript encuentra a Netscape 6.x pero no a los otros navegadores Gecko.
  • Actualice el detector de navegador de JavaScript para que encuentre a «Gecko». (Artículo relacionado) ({{mediawiki.interwiki('en', 'Browser_Detection_and_Cross_Browser_Support', 'en inglés')}}).
El contenido se presenta diferentemente en los navegadores Gecko e Internet Explorer. La utilización de códigos propietarios o inválidos (como los generados por varias aplicaciones de Microsoft Office).
  • Use las herramientas de validación de HTML y CSS del W3C para convalidar la página web. Corrija los errores y reemplace los códigos propietarios donde sea posible.
  • Actualice las herramientas de edición web con versiones respetuosas de las normas W3C y de los navegadores Gecko.
El contenido se presenta diferentemente en los navegadores Gecko e Internet Explorer. La consola JavaScript en Netscape, Mozilla o Firefox muestra errores relacionados con: document.all (todo el documento), document.layers (capas del documento), document.<propiedades> los cuales no son definidos a causa de una mala detección del navegador o por la utilización de JavaScript propietario.
  • Actualice:
  1. la detección del navegador para encontrar correctamente los navegadores Gecko.
  2. los "API" para utilizar versiones más recientes conformes a los estándares.
  3. vuestras herramientas de edición web con versiones que funcionen bien con las normas W3C y los navegadores Gecko.
El contenido se muestra diferentemente en los navegadores Gecko e Internet Explorer.
  • Su hoja de estilo (CSS) está trabajando con el código de la CSS de Internet Explorer.
  • Internet Explorer no es sensible a los nombres de ID (Identificación) y de CLASS (Clases) mientras que los navegadores Gecko los identifica y trata como lo que son, con sentido. Una utilización inconsistente de estos nombres (ID y CLASS) en la hoja de estilo y en los elementos HTML provocará la no aplicación de los estilos en los navegadores Gecko.
  • Internet Explorer indica inexactamente la altura y ancho de los elementos lineales, por ejemplo SPAN.
  • Internet Explorer ejecuta incorrectamente el modelo de caja CSS (padding, margin-margen, border-bordes).

Es recomendable: NO

  • utilizar códigos inválidos de las hojas de estilos de Internet Explorer.
  • definir altos y anchos de los elementos lineales como span

Pero sí:

  • usar únicamente la interacción entre navegadores, las funciones y los modelos de caja CSS estándares.
  • especificar de la misma forma los nombres de clase (CLASS) y de identificación (ID) en HTML que en las hojas de estilo.
El contenido se presenta diferentemente en los navegadores Gecko e Internet Explorer. Órdenes incorrectas sobre la manera de interpretar el modo de disposición en DOCTYPE (tipo de documento).
  • Si las páginas deben mostrarse en viejas versiones de navegadores, como Netscape Navigator 4 o Internet Explorer 4 y 5, no se olvide de especificar, en el tipo de documento, la forma en la cual los navegadores tienen que actuar: estándar, estricta o aleatoria. ({{mediawiki.interwiki('en', 'Mozilla\'s_Quirks_Mode', 'quirks mode (en)')}}).
Las imágenes aparecen sin áreas blancas entre ellas con Internet Explorer pero sí con unas en los navegadores Gecko. Órdenes incorrectas sobre la manera de interpretar el modo de disposición en el tipo de documento (DOCTYPE)
  • Los modos de disposición estándares han sido pedidos por la orden escrita en el tipo de documento. Cambie ese tipo de documento de manera que trabaje con las órdenes correctas de interpretación. Más información.
Al picar un enlace devuelve el error 404-la página no se ha encontrado, pero sí funciona con Internet Explorer. El enlace utiliza posiblemente una forma inválida de URL relativa.
  • Cambie las URLs relativas <tt>http://directory/...</tt> por <tt>directory/...</tt> o utilice direcciones absolutas como <tt>http://example.com/directory/...</tt>
  • Verifique que todos los hiper-enlaces contienen las barras oblicuas en el sentido correcto (/).
Al picar un enlace dispara una descarga o muestra directamente el código HTML en lugar de presentar la página correctamente, pero sí lo hace de forma prevista con Internet Explorer El servidor web especifica incorrectamente el tipo MIME del contenido. Internet Explorer intenta adivinar este tipo MIME en los documentos cuando los navegadores Gecko confían en el servidor web para conocer el buen tipo MIME. Gecko no intenta leer el tipo MIME de un documento para reducir las posibilidades de procesar contenidos poco seguros o peligrosos enmascarados como un tipo MIME seguro.
  • Aproveche la utilidad HEAD de Perl o PHP para determinar el tipo MIME real usado por el servidor Web. Corrija todos los tipos incorrectos en el servidor. (Artículo relacionado).
La hoja de estilo no es reconocida. La presencia de un atributo title en un enlace link que se refiere a un hoja de estilo externa puede hacer que la CSS sea ignorada.
  • Asegúrese que todas las hojas de estilo sean aplicadas de manera persistente antes que sólo preferidas. (Artículo relacionado).
Falla la conexión a un sitio seguro con un navegador Gecko, pero funciona con Internet Explorer. El servidor web no empieza correctamente la ejecución de la negociación para SSL.
  • El administrador del servidor web debe actualizar su programa de servicio seguro.
  • Para navegar en un sitio con ejecución defectuosa de SSL, los visitantes deberán desactivar el protocolo TLS en Netscape 6/7 o Mozilla hasta que el sitio este actualizado con versiones que lo aceptan.
Los menús DHTML usando HierMenu tienen problemas.

La versión de HierMenu es obsoleta.

  • Las más antiguas soportan sólo Netscape Navigator 4.x, Internet Explorer 4.x y siguientes.
  • Las un poco más recientes: Netscape 6 y a partir de Netscape 6.1 y posteriores, la ayuda de las propiedades propietarias offsetXXX de Internet Explorer hace que HierMenu ponga unas ventanas emergentes (popups) en posiciones equivocadas.
  • Las últimas versiones de HierMenu funcionan plenamente en todos los navegadores Gecko.

Problemas corrientes ligados al código y el servidor Web

Esta sección detalla las soluciones a los problemas más corrientes que afectan a los navegadores reopetuosos de los estándares así como preguntas específicas a Gecko.

HTML propietario

Problema: utilizar etiquetas HTML de un navegador propietario específico (tal como: <tt><LAYER></tt> capa).

Puesto que se supone que un navegador ignora las etiquetas que no reconoce y devuelve el contenido dentro de ellas, los autores de páginas web han combinado los códigos HTML propietarios para que sus páginas se muestren correctamente en cualquier navegador.

Los navegadores Gecko ignorarán las etiquetas HTML propietarias de Internet Explorer y Netscape Navigator 4. Así pues, una página web no se mostrará en los navegadores Gecko de la misma manera que en Internet Explorer 4 o Netscape Navigator 4.

El ejemplo principal es la utilización de la etiqueta <tt><LAYER></tt> propietaria de Netscape Navigator 4, corrientemente usada para la navegación en un sitio. Para saber las alternativas basadas en estándares, ver este artículo. ({{mediawiki.interwiki('en', 'Updating_DHTML_Web_Pages_for_Next_Generation_Browsers', 'en')}}).

Podemos verificar rápidamente la correcta utilización de las etiquetas HTML propietarias en una página sometiéndola al verificador de HTML del W3C usando el tipo de documentos HTML 4.01. Abordaremos detalladamente los tipos de documentos (DOCTYPE) más adelante, pero esencialmente, sirven para indicar al navegador cual es la versión HTML de la página.

La Referencia de interacción de elementos HTML ({{mediawiki.interwiki('en', 'HTML_Element_Cross_Reference', 'en')}}) facilita una lista de todos los elementos HTML sostenidos en Netscape 4, los navegadores Gecko, Internet Explorer 4 y superiores, y se puede utilizar para determinar qué elementos son soportados para todos los navegadores.

Detección del navegador

Problema: mala detección del navegador o interpretación del código

Mientras que la detección es útil para permitir a los autores escribir páginas web que sólo trabajen con navegadores específicos, una equivocada detección podrá conducir a una mala experiencia de los usuarios.

Numerosos problemas pueden surgir cuando una página web usa la detección de un navegador para determinar que características propietarias utiliza un navegador en particular.

Consulte el artículo Detección del navegador y soporte entre ellos para un mejor entendimiento. ({{mediawiki.interwiki('en', 'Browser_Detection_and_Cross_Browser_Support', 'en inglés')}})

Entorno de trabajo de un navegador específico

Problema: el código incluye el entorno de trabajo de "bugs" y comportamientos aleatorios (quirks mode) de navegadores específicos. Nota: No he conseguido la traducción correcta de BUGS, todos los diccionarios dan: insectos, bichos

Puesto que una página web no se juzga por su código sino por la apariencia en la pantalla de los navegadores, los autores han desarrollado numerosas técnicas que aprovechan la idiosincrasia (carácter) en los navegadores particulares para conseguir los efectos deseados. Tiene pues una particular importancia ya que en las primeras puestas en práctica de las CSS encontradas en Internet Explorer 4 y Netscape Navigator 4 habían varios "bugs". Para conseguir obtener los efectos deseados, los autores escribieron los códigos HTML y JavaScript que dependían de estos "bugs" para que funcionara correctamente.

Ésto puede provocar problemas con los navegadores Gecko por ejecutar estrictamente los estándares. La vieja escritura de «codificar para los "bugs"» ya no funciona en Mozilla, Netscape 6.x/7.x y todos los otros navegadores Gecko.

Ejemplo - Poniendo formularios en una tabla

HTML no válida para eliminar el salto de línea en <tt><FORM></tt>.

En los antiguos navegadores, el resultado hacía que la celda TD envolviera herméticamente un elemento de entrada input.

<table border="1">
  <tr>
    <form name="formulario2">
      <td>
        <input type="texto">
      </td>
    </form>
  </tr>
<table>

Este acercamiento es comúnmente utilizado para dar la vuelta al hecho que <tt><FORM></tt> es un elemento en bloque en HTML y que simplemente empezará en una nueva línea en la página. Lamentablemente, éste código ya no es válido, puede provocar errores durante la presentación en pantalla y en la aplicación de las reglas de la hoja de estilo.

Uso incorrecto del código vacío en una etiqueta XML

Numerosos autores utilizan la anotación vacía en etiqueta XML (<tt><tag /></tt>) en sus ficheros HTML. En XML, una etiqueta vacía no tiene nunca contenido. Las directivas de compatibilidad hacia atrás del XHTML estipulan que los elementos vacíos pueden ser codificados poniendo después del nombre de la etiqueta un espacio seguido de un signo como en "<tt><tag /></tt>". Para ser compatible, necesita tener un espacio antes del cierre " <tt>/></tt>". Además, se debe utilizar ésta codificación XML sólo para los elementos HTML que son siempre vacíos — y no para elementos HTML que poseen una etiqueta opcional de cierre.

Por ejemplo, es correcta la forma: <tt><br /></tt> para codificar <tt><br></tt>, aún cuando no hay ventaja alguna de hacerlo en documentos HTML. Pero es incorrecto usar: <tt><option /></tt> para <tt><option></tt>. Para entender por que, consideramos lo siguiente:

HTML sin etiqueta opcional de cierre HTML equivalente con etiqueta opcional de cierre
<select>
<option>Valor de la opción
</select>
<select>
<option>Valor de la opción</option>
</select>

Ahora veamos que pasa al utilizar la escritura de etiqueta XML vacía " /></tt>".

HTML con código de etiqueta XML vacía HTML equivalente con etiqueta de cierre
<select>
<option />Valor de la opción
</select>
<select>
<option></option>Valor de la opción
</select>

Es simplemente incorrecto. Si debe utilizar la anotación de etiqueta XML vacía, entonces hacerlo únicamente para elementos HTML que no tengan nunca contenido — no para elementos HTML que tienen un cierre opcional.

Las identificaciones (ID) de las hojas de estilo deben ser tenidas en cuenta

Gecko responde correctamente a los identificadores ID de la hoja de estilo y presentará bien este ejemplo, mientras que Internet Explorer que no los tiene en cuenta no lo presentará.

<style type="text/css">
  #id1 { text-decoration: line-through; }
  #ID1 { text-decoration: underline; }
</style>
<div id="id1">
  Debería estar tachado (line-through)
</div>
<div id="ID1">
  Debería estar subrayado (underline)
</div>

-(EJEMPLO SUPRIMIDO)-

Observe que el verificador de HTML del W3C señalará con una bandera a los atributos de los ID de HTML como duplicados sólo en el caso que difieran (sean diferentes). Parece ser que hay una inconsistencia entre la recomendación de HTML 4.01 y la declaración de SGML para el HTML en si los atributos del identificador ID se toman en cuenta o no. Esto es una lástima ya que el verificador de HTML es para los desarrolladores web uno de sus principales medios de aprendizaje de los estándares.

Debido a este común error, Netscape 6.2 no hace caso a los atributos de ID de CSS en modo de compatibilidad aleatoria (quirks mode). Si se invoca el modo de respeto de los estándares, convendrá ser consistente en escribirlo en las hoja de estilo de manera que se respete.

Los nombres de clase de la hoja de estilo deberían ser tomados en cuenta

Gecko hace caso a los nombres de clase de las hojas de estilo (CLASS) y por eso presentará correctamente este ejemplo, mientras que Internet Explorer hace caso omiso, por lo tanto no lo sacará bien en la pantalla.

<style type="text/css">
  .class1 { font-size: 1em; }
  .CLASS1 { font-size: 2em; }
</style>
<div>
<div class="class1">
  Debería tener la medida de fuente: 1em;
</div>
<div class="CLASS1">
  Debería tener la medida de fuente: 2em;
</div>

-(EJEMPLO SUPRIMIDO)-

Por este común error de los autores de páginas web, Netscape 6.2 tampoco hace caso de los atributos de clase CLASS en modo de compatibilidad aleatoria (quirks mode). Si se invoca el modo de respecto de los estándares, hay que definirlo correctamente en las hojas de estilo (CSS) para que sea tomado en cuenta.

Enlaces (URLs) relativos incorrectos

Una URL relativa se refiere al mismo servidor web que alberga a la página web.

  • Una URL relativa que lleva al directorio donde se encuentra la página sería así: <tt>directorio/pagina.html</tt>.
  • Las URLs relativas que dirigen al directorio raíz del servidor web serían así: <tt>/directorio/pagina.html</tt>.

Los antiguos navegadores aceptaban la utilización incorrecta: <tt>http://directorio/</tt> parar las direcciones relativas al directorio raíz del servidor web, pero no es el caso de los navegadores Gecko. Para especificar correctamente el enlace a una página del directorio raíz del servidor web, use esta forma: <tt>/directorio/pagina.html</tt>.

La utilización inválida de espacios en los nombres de atributos (por ejemplo: mapas de imágenes)

Muchos autores parecen infectados por la manía de utilizar espacios en los nombres. Un atributo name o id en HTML 4.01 no puede conformemente al W3 contener espacios. Esto puede dar problemas en los navegadores basados en Gecko, especialmente en los mapas de imágenes. Conviene, por eso, verificar que los nombres de atributos contengan sólo caracteres válidos.

Mala codificación debida a "API" y herramientas anticuadas

Problema: unas "APIs" o herramientas de edición obsoletas generan un código no estándar.

Muchas versiones antiguas de "API" de interacción entre navegadores comúnmente usadas como DYNAPI (en), no aguantan a Gecko por una u otra razón citada más arriba. Es igualmente el caso de antiguas versiones de herramientas de edición web como Macromedia Dreamweaver 2 y 3.

Sin embargo las versiones más recientes de "API" y de herramientas web soportan a Gecko. Por ejemplo, DYNAPI (en) es ahora mantenido en SourceForge y ofrece una versión compatible con Gecko. Las nuevas Herramientas de edición respetuosas de los estándares también soportan a Gecko.

Tipo de documento (DOCTYPE) impropio, mal codificado

Problema: el tipo de documento incorrecto puede alterar completamente la presentación de las páginas.

Gecko, Internet Explorer para Mac OS e Internet Explorer 6 utilizan todos la técnica de detección del tipo de documento para determinar la forma de presentación, si debe ser en modo compatible con los antiguos navegadores o conformemente a las normas W3C.

Usando el tipo de documento apropiado en el HTML permite a los autores de páginas web hacer que soporten tanto, los viejos navegadores menos conformes, que los nuevos, especificando en él, el modo de composición elegido. Al paso del tiempo y con la progresiva desaparición de los viejos navegadores en el mercado, los autores de páginas web pueden efectuar la transición hacia las normas W3. (Artículo relacionado).

Mientras que la detección de la declaración del tipo de documento es útil para permitir el soporte de viejos navegadores, puede ser un problema para los de última generación como Netscape 6.x y Netscape 7.x si se especifica incorrectamente el modo de composición.

Gecko tiene dos modos de composición: el de compatibilidad aleatoria (quirks) y el de respeto estricto de los estándares (standards). El modo aleatorio imita el comportamiento de Netscape Navigator 4 cuando el estricto sigue las recomendaciones para HTML y CSS del W3C. En particular, el modo estricto utiliza el modelo de caja CSS como se define en el Capítulo 10 de las recomendaciones sobre CSS 2. El modo de presentación es determinado con la ayuda en la declaración del tipo de documento (o de su carencia) al principio de documento HTML.

Escritura inválida para dejar un comentario

Gecko posee también tres modelos de análisis de compatibilidad: modo aleatorio (quirks), modo casi-estándar ({{mediawiki.interwiki('en', 'Gecko\'s_Almost_Standards_Mode', 'en')}}) y modo estricto de los estándares. El modo aleatorio permite la utilización no válida de más de dos guiones "--" para dejar un comentario, lo cual no dejan hacer los otros modos.

<!---- Ésto es un comentario HTML '''inválido''' pero aceptado en el análisis aleatorio de comentario ---->
<!-- Ésto es un comentario '''válido''' aceptado en el análisis estricto de comentario -->

Para saber las reglas exactas de como se invoca desde la declaración en el tipo de documento al modo aleatorio vs. al modo estricto con los estándares, consulten este artículo.

Codificación de plugins (pequeñas aplicaciones para la web)

Habrá visto que algunos "plugins" no se comportan de la misma forma en Gecko y en Netscape Navigator 4. Visite la página Plugins para más información sobre la codificación de los navegadores Gecko, el buen uso de las etiquetas, los cambios en la arquitectura comparado con la generación Netscape 4, y las sugerencias de estratégias para plugins.

Problemas de configuración en el servidor web

Tipos MIME especificados incorrectamente

Muchos servidores web especifican incorrectamente los tipos MIME para los ficheros. Los navegadores Gecko requieren que el servidor web defina correctamente el tipo MIME correspondiente al tipo de contenido:

  • HTML — text/html
  • CSS — text/css artículo relacionado, ({{mediawiki.interwiki('en', 'Incorrect_MIME_Type_for_CSS_Files', 'en inglés')}})
  • XML — text/xml
  • SVG — image/svg+xml

Mala ejecución del protocolo HTTP

Varios servidores ejecutan incorrectamente el protocolo HTTP, lo cual puede dar problemas en Netscape 6.

Mala ejecución del protocolo SSL

Los antiguos navegadores tal como Internet Explorer 4 et Netscape Navigator 4 ejecutaban versiones viejas del protocolo SSL. La versión más común ahora es SSL 3.0, empero, la última versión: TLS (SSL 3.1), la cual es soportado por los navegadores Gecko, no lo es aún por varios servidores web. Desgraciadamente, varios procedimientos de SSL 3.0 ejecutan incorrectamente la negociación de qué versión de SSL hay que usar y fallan en la conexión con Gecko.

Para más información sobre esta cuestión, lea: Notas sobre TLS - Servidores SSL 3.0 intolerantes.

Recursos útiles

  • Para empezar los autores de páginas web de nivel intermedio pueden consultar en DevEdge Web Tune Up Wizard a fin de puntear las áreas de contenidos que necesitan actualización para soportar a Gecko y otros navegadores que se apoyan en los estándares del W3C.
  • AOL Webmaster.info Site - Developing for Netscape Gecko cubre las cuestiones más comunes a las que se enfrentan los autores de web y de como poner al día los códigos.
  • La caja de herramientas agrega muchas utilidades valiosas del W3C para el diagnóstico de problemas en páginas web como serían: verificadores, ejemplos de código y mucho más.
  • Report Mozilla browser bugs or web site compatibility problems
  • {{mediawiki.interwiki('en', 'Mozilla_Web_Developer_Community', 'Community')}}

Referencias

Información sobre el documento original

  • Última actualización: 16 de Agosto de 2002
  • Copyright : © 2001-2003 Netscape. All rights reserved.

Interwiki Languages Links

{{ wiki.languages( { "en": "en/Gecko_Compatibility_Handbook", "fr": "fr/Manuel_de_compatibilit\u00e9_Gecko" } ) }}

Fuente de la revisión

<p>
</p><p><br>
El objetivo de este manual es ayudar a poner al día vuestros sitios web para que funcionen en los navegadores respetando los estándares del Web y que detecten correctamente a <a href="es/Gecko">Gecko</a>.
</p><p>Si desconocéis los estándares del Web, el artículo <a href="es/Utilizaci%c3%b3n_de_est%c3%a1ndares_en_vuestras_p%c3%a1ginas_web">Utilización de estándares en vuestras páginas web</a> constituye una introducción útil. (<small>{{mediawiki.interwiki('en', 'Using_Web_Standards_in_Your_Web_Pages', 'en inglés')}}</small>)
</p><p>Gecko es un navegador ajustable, desarrollado como parte del proyecto de código abierto <a class="external" href="http://www.mozilla.org/">Mozilla</a> y basado más bien en las  <a class="external" href="http://www.w3.org/">normas del W3C</a> que en los códigos propietarios típicos del pasado. Respetar los estándares/normas/pautas del Web simplifica la interacción de los navegadores en el desarrollo y permite la accesibilidad <a class="external" href="http://www.mozilla.org/access/(en)">.
</a></p><a class="external" href="http://www.mozilla.org/access/(en)">
<h3 name="4.x_contra_Gecko"> 4.x contra Gecko </h3>
</a><p><a class="external" href="http://www.mozilla.org/access/(en)">Desde 1997, numerosos sitios Internet se han concebido para funcionar con Microsoft Internet Explorer 4 o con Netscape Navigator 4. Éstos navegadores fueron desarrollados antes de existir las recomendaciones del </a><a class="external" href="http://www.w3.org/">W3C</a> para <a href="es/HTML">HTML</a> (lenguaje para el formato de hipertextos), <a href="es/CSS">CSS</a> (hojas de estilo en cascada) y <a href="es/DOM">DOM</a> (modelo de objetos del documento).
</p><p>Éstos navegadores más antiguos, sin estándares del Web, se diferencian de Gecko en numerosos puntos:
</p><p><b>Los navegadores antiguos</b>
</p>
<ul><li> Utilizan códigos <a href="es/HTML">HTML</a>, <a href="es/CSS">CSS</a> y <a href="es/JavaScript">JavaScript</a> propietarios (no estándares).
</li><li> Internet Explorer 4 y Netscape Navigator 4 ofrecen los dos ayuda para la mayoría de estándar HTML 3.2 y JavaScript de base.
</li><li> Aún que soportan en cierta medida el estándar CSS 1, su puesta en marcha no se completa y tienen funcionalidades adicionales no estándares.
</li><li> Ni Internet Explorer 4 ni Netscape Navigator 4 aguantan el <a href="es/DOM">DOM</a> del W3C. En lugar de eso, cada uno tiene su propia "API" propietaria de manipulación de contenido, del estilo y de la posición de los elementos HTML en una página web.
</li><li> Además, usan métodos completamente diferentes para integrar programas de terceros en sus navegadores.
</li></ul>
<p><b>Gecko</b> es un motor de presentación "multiplataforma" compatible con un gran número de versiones de Windows, como Windows XP, Mac OS y Linux. Por esta pluralidad, sus funcionalidades son en general idénticas sea cual sea el soporte usado, al contrario de las versiones de Internet Explorer para Mac e Internet Explorer para Windows que son  programas distintos y pueden entonces comportarse de maneras muy diferentes.
</p>
<h3 name="Prueba_r.C3.A1pida_de_compatibilidad"> Prueba rápida de compatibilidad </h3>
<p>Si vuestro sitio trabaja con las tecnologías propietarias de Netscape 4.x y de Microsoft, consulten el artículo <a href="es/Utilizaci%c3%b3n_de_est%c3%a1ndares_en_vuestras_p%c3%a1ginas_web">siguiente</a> para conocer rápidamente los principios generales de estas normas. Éste test de compatibilidad será mucho más benéfico para los sitios que utilicen un código simple o que estén en fase de modificación para soportar los estándares.
</p>
<h4 name="Preparaci.C3.B3n_de_los_navegadores_para_la_prueba"> Preparación de los navegadores para la prueba </h4>
<p>No todos los navegadores que utilizan Gecko contienen <tt>Firefox</tt> ou <tt>Netscape</tt> en su cadena <a href="es/Cadenas_del_User_Agent_de_Gecko">"user-agent"</a>. Es importante, entonces, verificar que se detectan correctamente navegadores como AOL para Mac OS X.
</p><p>Se pueden <a class="external" href="http://www.mozilla.org/download.html">descargar</a> varios navegadores de Mozilla. O, si se utiliza la detección de "user-agent", instalar una extensión para Firefox o Mozilla que permitirá «simular» las cadenas "user-agent" de éstos navegadores Gecko. Aquí tiene como hacerlo:
</p>
<ul><li>1) Abrir <a class="external" href="http://www.mozilla.org/projects/seamonkey/">SeaMonkey</a>, <a class="external" href="http://www.getfirefox.com/">Firefox</a> o la antigua suite <a class="external" href="http://www.mozilla.org/products/mozilla1.x/">Mozilla</a>. La ventaja de utilizar éstos navegadores es que detectando <b>únicamente</b> las cadenas <tt>Netscape</tt> o <tt>Netscape6</tt>, se llega directamente a los eventuales problemas.
</li><li>2) Instalar la extensión <a class="external" href="https://addons.mozilla.org/firefox/59/">User Agent Switcher (en)</a>.
</li><li>3) Después de arrancar de nuevo el navegador hay que poner las cadenas "user-agent" de las cuales se desea probar la detección. (<tt>Herramientas --&gt; User Agent Switcher --&gt; Options --&gt; Options… --&gt; User Agents --&gt; Add…</tt>).
</li></ul>
<p><span class="comment">Nota: he dejado lo anterior en inglés porque la extensión lo saca así, si lo ponemos en español habrá gente que se preguntará: dónde es que tengo que picar?</span> 
</p><p>Una vez completado el cuadro de diálogo (debería parecerse a lo de abajo), Aceptar y cerrar la ventana «Options». Parece que el enlace no funciona, se puede mirar en <a class="external" href="http://developer.mozilla.org/en/docs/Gecko_Compatibility_Handbook">el original</a>
<br>{{mediawiki.external('Image:GeckoCompatibilityHandbook-Configure-UASwitcher.PNG')}} <br>
</p>
<ul><li>4) Ya puede empezar a utilizar la cadena "User-Agent" que acaba de crear: <tt>Herramientas --&gt; User Agent Switcher --&gt; <i>El nombre que ha elegido</i></tt>. Puede verificar que la cadena a cambiado en: <tt>Help --&gt; About</tt> (Ayuda --&gt; Acerca de …)
</li></ul>
<p>Encontrará las cadenas "user-agent" de los navegadores basados en Gecko, <a href="es/Cadenas_del_User_Agent_de_Gecko">aquí</a>. Lo mejor y si es posible, descargue también los diferentes navegadores para probarlos individualmente.
</p>
<h4 name="Repasando_los_resultados"> Repasando los resultados </h4>
<p>Los siguientes temas tienen relación con la detección de los navegadores. Para más soluciones de problemas corrientes, <b>siga leyendo</b>.
</p>
<h5 name="Problema_1:_El_sitio_respeta_los_est.C3.A1ndares_Web_pero_no_se_muestra_correctamente"> <b>Problema 1</b>: <i>El sitio respeta los estándares Web pero no se muestra correctamente</i> </h5>
<ul><li>Pruebe de utilizar la cadena user-agent de Internet Explorer 6. 
</li><li>Si funciona, use los parámetro de la detección para dar el contenido IE 6 a los visitantes que tienen <tt>Gecko</tt> en sus cadenas user-agent. IE 6.x es actualmente mucho más parecido a los navegadores Gecko que  Netscape 4.x, debido a una mejor ayuda de los estándares del W3C.
</li></ul>
<h5 name="Problema_2:_El_sitio_certificado_Netscape_6.x_se_muestra_incorrectamente_en_los_otros_navegadores"> <b>Problema 2</b>: <i>El sitio certificado Netscape 6.x se muestra incorrectamente en los otros navegadores</i> </h5>
<ul><li>Si su sitio ya es compatible con Gecko, pruebe de volver a una cadena "user-agent" de Netscape 6. Si es más o menos aceptable, probablemente sólo detectará <tt>Netscape</tt> o <tt>Netscape6</tt>.
</li><li>Detectar <tt>Gecko</tt> en su lugar es la vía más fácil para mejorar la comodidad de los usuarios de Mozilla, SeaMonkey, CompuServe 7, etc. <small>(<a href="es/Detecci%c3%b3n_de_navegador_y_soporte_entre_ellos">Artículo relacionado</a>), {{mediawiki.interwiki('en', 'Browser_Detection_and_Cross_Browser_Support', 'en inglés')}}</small>
</li></ul>
<h5 name="Problema_3:_El_sitio_no_funciona_bien_en_todos_los_navegadores_Gecko"> <b>Problema 3</b>: <i>El sitio no funciona bien en todos los navegadores Gecko</i> </h5>
<p>Si todavía tiene problemas, puede consultar la sección de <a href="#Referencias_en_caso_de_problemas">soluciones</a> rápidas de este manual. Además, si usa tecnologías propietarias de Netscape 4.x y/o de Microsoft, puede leer <a href="es/Utilizaci%c3%b3n_de_est%c3%a1ndares_en_vuestras_p%c3%a1ginas_web">esto</a> para saber rápidamente qué diferencias hay en Gecko.
</p>
<h3 name="Problemas_con_AOL_o_CompuServe"> Problemas con AOL o CompuServe </h3>
<p>Aunque su sitio se muestra correctamente en Netscape 7.x, es <b>importante</b> que lo pruebe también en  <a class="external" href="http://www.aol.com/">AOL pour Mac OS X</a> y en <a class="external" href="http://www.compuserve.com/">CompuServe 7</a> para verificar la <a href="es/Detecci%c3%b3n_de_navegador_y_soporte_entre_ellos">detección del navegador</a> <small>({{mediawiki.interwiki('en', 'Browser_Detection_and_Cross_Browser_Support', ' en inglés')}})</small> y los posibles problemas de red.
</p>
<h4 name="Prueba_de_AOL_detr.C3.A1s_de_un_corta-fuego"> Prueba de AOL detrás de un corta-fuego </h4>
<p>Si debe conectarse a AOL detrás de un corta-fuego, América Online ha abierto los puertos TCP/IP 5.190 y 11.523 para que pueda comunicarse con el servidor de AOL. De esta forma podrá probar su sitio detrás de un corta-fuego, siempre y cuando el administrador de redes haya abierto estos puertos.
</p><p>Tiene que estar conectado a Internet para hacer la prueba de vuestro sitio en AOL; es imposible acceder al sitio en una máquina local vía red local (LAN) sin una conexión Internet. Para más información, ver: <a class="external" href="http://webmaster.aol.com/">Webmaster@AOL (en)</a>.
</p>
<h3 name="Referencias_en_caso_de_problemas"> Referencias en caso de problemas </h3>
<p>Como se explica en <a href="es/Utilizaci%c3%b3n_de_est%c3%a1ndares_en_vuestras_p%c3%a1ginas_web">Utilización de estándares en vuestras páginas web</a>, es necesario escribir la codificación estándar para el buen funcionamiento y la obtención de compatibilidad entre los navegadores Gecko, Netscape 4 y IE .
</p>
<table class="standard-table" width="100%">

<tbody><tr>
<th> Síntoma </th><th> Posible problema </th><th> Solución
</th></tr>
<tr>
<td width="25%">El sitio se muestra correctamente en Netscape 6.x pero no en Netscape 7.x u otros navegadores Gecko.
</td><td width="37.5%">La detección del navegador por JavaScript encuentra a Netscape 6.x pero no a los otros navegadores Gecko.
</td><td width="37.5%">
<ul><li> Actualice el detector de navegador de JavaScript para que encuentre a «Gecko». (<a href="es/Detecci%c3%b3n_de_navegador_y_soporte_entre_ellos">Artículo relacionado</a>) <small>({{mediawiki.interwiki('en', 'Browser_Detection_and_Cross_Browser_Support', 'en inglés')}})</small>.
</li></ul>
</td></tr>
<tr>
<td>El contenido se presenta diferentemente en los navegadores Gecko e Internet Explorer.
</td><td>La utilización de códigos propietarios o inválidos (como los generados por varias aplicaciones de Microsoft Office).</td><td>
<ul><li> Use las <a href="es/Herramientas">herramientas</a> de validación de HTML y CSS del W3C para convalidar la página web. Corrija los errores y reemplace los códigos propietarios donde sea posible.
</li><li> Actualice las herramientas de edición web con versiones respetuosas de las normas W3C y de los navegadores Gecko.
</li></ul>
</td></tr>
<tr>
<td>El contenido se presenta diferentemente en los navegadores Gecko e Internet Explorer.
</td><td>La consola JavaScript en Netscape, Mozilla o Firefox muestra errores relacionados con:  <code>document.all</code> <small><i>(todo el documento)</i></small>, <code>document.layers</code> <small><i>(capas del documento)</i></small>, <code>document.<i>&lt;propiedades&gt;</i></code> los cuales no son definidos a causa de una mala detección del navegador o por la utilización de JavaScript propietario.</td><td>
<ul><li> <b>Actualice</b>: 
</li></ul>
<ol><li>la <a href="es/Detecci%c3%b3n_de_navegador_y_soporte_entre_ellos">detección del navegador</a> para encontrar correctamente los navegadores Gecko.
</li><li>los "API" para utilizar versiones más recientes conformes a los estándares.
</li><li>vuestras herramientas de edición web con versiones que funcionen bien con las normas W3C y los navegadores Gecko.
</li></ol>
</td></tr>
<tr>
<td>El contenido se muestra diferentemente en los navegadores Gecko e Internet Explorer.
</td><td>
<ul><li> Su hoja de estilo (<a href="es/CSS">CSS</a>) está trabajando con el código de la CSS de Internet Explorer.
</li><li> Internet Explorer no es sensible a los nombres de ID (Identificación) y de CLASS (Clases) mientras que los navegadores Gecko los identifica y trata como lo que son, con sentido. Una utilización inconsistente de estos nombres (ID y CLASS) en la hoja de estilo y en los elementos HTML provocará la <b>no aplicación</b> de los estilos en los navegadores Gecko.
</li><li> Internet Explorer indica inexactamente la altura y ancho de los elementos lineales, por ejemplo <code>SPAN</code>.
</li><li> Internet Explorer ejecuta incorrectamente el modelo de caja CSS (<code>padding</code>, <code>margin</code>-<i><small>margen</small></i>, <code>border</code>-<i><small>bordes</small></i>).
</li></ul>
</td><td>
<p>Es recomendable: <b>NO</b>
</p>
<ul><li> utilizar códigos inválidos de las hojas de estilos de Internet Explorer.
</li><li> definir altos y anchos de los elementos lineales como <code>span</code>
</li></ul>
<p><b>Pero sí:</b>
</p>
<ul><li> usar únicamente la interacción entre navegadores, las funciones y los modelos de caja CSS estándares.
</li><li> especificar de la misma forma los nombres de clase (CLASS) y de identificación (ID) en HTML que en las hojas de estilo.
</li></ul>
</td></tr>
<tr>
<td>El contenido se presenta diferentemente en los navegadores Gecko e Internet Explorer.
</td><td>Órdenes incorrectas sobre la manera de interpretar el modo de disposición en DOCTYPE (tipo de documento).</td><td>
<ul><li> Si las páginas deben mostrarse en viejas versiones de navegadores, como Netscape Navigator 4 o Internet Explorer 4 y 5, <b>no se olvide</b> de especificar, en el <a href="es/El_detector_de_tipo_de_documento_en_Mozilla">tipo de documento</a>, la forma en la cual los navegadores tienen que actuar: estándar, estricta  o aleatoria. ({{mediawiki.interwiki('en', 'Mozilla\'s_Quirks_Mode', 'quirks mode (en)')}}).
</li></ul>
</td></tr>
<tr>
<td>Las imágenes aparecen sin áreas blancas entre ellas con Internet Explorer pero sí con unas en los navegadores Gecko.
</td><td>Órdenes incorrectas sobre la manera de interpretar el modo de disposición en el tipo de documento <small>(DOCTYPE)</small></td><td>
<ul><li> Los modos de disposición estándares han sido pedidos por la orden escrita en el tipo de documento. Cambie ese tipo de documento de manera que trabaje con las órdenes correctas de interpretación. <a href="es/Im%c3%a1genes%2c_tablas_y_huecos_misteriosos">Más información</a>.
</li></ul>
</td></tr>
<tr>
<td>Al picar un enlace devuelve el error 404-la página no se ha encontrado, pero sí funciona con Internet Explorer.
</td><td>El enlace utiliza posiblemente una forma inválida de URL relativa.</td><td>
<ul><li> Cambie las URLs relativas <tt><span class="plain">http://directory/...</span></tt> por <tt><span class="plain">directory/...</span></tt> o utilice direcciones absolutas como <tt><span class="plain">http://example.com/directory/...</span></tt>
</li><li> Verifique que todos los hiper-enlaces contienen las barras oblicuas en el sentido correcto (/).
</li></ul>
</td></tr>
<tr>
<td>Al picar un enlace dispara una descarga o muestra directamente el código HTML en lugar de presentar la página correctamente, pero sí lo hace de forma prevista con Internet Explorer
</td><td>El servidor web especifica incorrectamente el tipo MIME del contenido. Internet Explorer intenta adivinar este tipo MIME en los documentos cuando los navegadores Gecko confían en el servidor web para conocer el buen tipo MIME. Gecko no intenta leer el tipo MIME de un documento para reducir las posibilidades de procesar contenidos poco seguros o peligrosos enmascarados como un tipo MIME seguro.</td><td>
<ul><li> Aproveche la utilidad HEAD de Perl o PHP para determinar el tipo MIME real usado por el servidor Web. Corrija todos los tipos incorrectos en el servidor. (<a href="es/Tipo_MIME_incorrecto_en_archivos_CSS">Artículo relacionado</a>).
</li></ul>
</td></tr>
<tr>
<td>La hoja de estilo no es reconocida.
</td><td>La presencia de un atributo <code>title</code> en un enlace <code>link</code> que se refiere a un hoja de estilo externa puede hacer que la CSS sea ignorada.</td><td>
<ul><li> Asegúrese que todas las hojas de estilo sean aplicadas de manera persistente antes que sólo preferidas. (<a href="es/Uso_correcto_de_los_t%c3%adtulos_con_hojas_de_estilo_externas">Artículo relacionado</a>).
</li></ul>
</td></tr>
<tr>
<td>Falla la conexión a un sitio seguro con un navegador Gecko, pero funciona con Internet Explorer.
</td><td>El servidor web no empieza correctamente la ejecución de la negociación para SSL.</td><td>
<ul><li> El administrador del servidor web debe actualizar su programa de servicio seguro.
</li><li> Para navegar en un sitio con ejecución defectuosa de SSL, los visitantes deberán desactivar el protocolo TLS en Netscape 6/7 o Mozilla hasta que el sitio este actualizado con versiones que lo aceptan.
</li></ul>
</td></tr>
<tr>
<td>Los menús DHTML usando HierMenu tienen problemas.
</td><td>
<p>La versión de HierMenu es obsoleta.
</p>
<ul><li> Las más antiguas soportan sólo Netscape Navigator 4.x, Internet Explorer 4.x y siguientes.
</li><li> Las un poco más recientes: Netscape 6 y a partir de Netscape 6.1 y posteriores, la ayuda de las propiedades propietarias <code>offsetXXX</code> de Internet Explorer hace que HierMenu ponga unas ventanas emergentes (<em>popups</em>) en  posiciones equivocadas.
</li><li> Las últimas versiones de HierMenu funcionan plenamente en todos los navegadores Gecko.
</li></ul>
</td><td>
<ul><li> Actualice con la versión más reciente de <a class="external" href="http://www.hiermenuscentral.com/">HierMenu (en)</a>
</li></ul>
</td></tr></tbody></table>
<h3 name="Problemas_corrientes_ligados_al_c.C3.B3digo_y_el_servidor_Web"> Problemas corrientes ligados al código y el servidor Web </h3>
<p>Esta sección detalla las soluciones a los problemas más corrientes que afectan a los navegadores reopetuosos de los estándares así como preguntas específicas a Gecko.
</p>
<h4 name="HTML_propietario"> HTML propietario </h4>
<p><b>Problema: utilizar etiquetas HTML de un navegador propietario específico (tal como: <tt>&lt;LAYER&gt;</tt> <small>capa</small>).</b>
</p><p>Puesto que se supone que un navegador ignora las etiquetas que no reconoce y devuelve el contenido dentro de ellas, los autores de páginas web han combinado los códigos HTML propietarios para que sus páginas se muestren correctamente en cualquier navegador.
</p><p>Los navegadores Gecko ignorarán las etiquetas HTML propietarias de Internet Explorer y Netscape Navigator 4. Así pues, una página web no se mostrará en los navegadores Gecko de la misma manera que en Internet Explorer 4 o Netscape Navigator 4.
</p><p>El ejemplo principal es la utilización de la etiqueta <tt>&lt;LAYER&gt;</tt> propietaria de Netscape Navigator 4, corrientemente usada para la navegación en un sitio. Para saber las alternativas basadas en estándares, ver <a href="es/Actualizar_p%c3%a1ginas_DHTML_para_los_pr%c3%b3ximos_navegadores">este artículo</a>. ({{mediawiki.interwiki('en', 'Updating_DHTML_Web_Pages_for_Next_Generation_Browsers', 'en')}}).
</p><p>Podemos verificar rápidamente la correcta utilización de las etiquetas HTML propietarias en una página sometiéndola al <a class="external" href="http://validator.w3.org/">verificador de HTML del W3C</a> usando el tipo de documentos HTML 4.01. Abordaremos detalladamente los tipos de documentos (DOCTYPE) más adelante, pero esencialmente, sirven para indicar al navegador cual es la versión HTML de la página.
</p><p>La <a href="es/Referencia_de_interacci%c3%b3n_de_elementos_HTML">Referencia de interacción de elementos HTML</a> ({{mediawiki.interwiki('en', 'HTML_Element_Cross_Reference', 'en')}}) facilita una lista de todos los elementos HTML sostenidos en Netscape 4, los navegadores Gecko, Internet Explorer 4 y superiores, y se puede utilizar para determinar qué elementos son soportados para todos los navegadores.
</p>
<h4 name="Detecci.C3.B3n_del_navegador"> Detección del navegador </h4>
<p><b>Problema: mala detección del navegador o interpretación del código</b>
</p><p>Mientras que la detección es útil para permitir a los autores escribir páginas web que sólo trabajen con navegadores específicos, una equivocada detección podrá conducir a una mala experiencia de los usuarios.
</p><p>Numerosos problemas pueden surgir cuando una página web usa la detección de un navegador para determinar que características propietarias utiliza un navegador en particular.
</p><p>Consulte el artículo <a href="es/Detecci%c3%b3n_del_navegador_y_soporte_entre_ellos">Detección del navegador y soporte entre ellos</a> para un mejor entendimiento. (<small>{{mediawiki.interwiki('en', 'Browser_Detection_and_Cross_Browser_Support', 'en inglés')}}</small>)
</p>
<h4 name="Entorno_de_trabajo_de_un_navegador_espec.C3.ADfico"> Entorno de trabajo de un navegador específico </h4>
<p><b> Problema: el código incluye el entorno de trabajo de "bugs" y comportamientos aleatorios <i>(quirks mode)</i> de navegadores específicos. </b>
<span class="comment">Nota: No he conseguido la traducción correcta de BUGS, todos los diccionarios dan: insectos, bichos</span>
</p><p>Puesto que una página web no se juzga por su código sino por la apariencia en la pantalla de los navegadores, los autores han desarrollado numerosas técnicas que aprovechan la idiosincrasia (carácter) en los navegadores particulares para conseguir los efectos deseados. Tiene pues una particular importancia ya que en las primeras puestas en práctica de las CSS encontradas en Internet Explorer 4 y Netscape Navigator 4 habían varios "bugs". Para conseguir obtener los efectos deseados, los autores escribieron los códigos HTML y JavaScript que dependían de estos "bugs" para que funcionara correctamente.
</p><p>Ésto puede provocar problemas con los navegadores Gecko por ejecutar estrictamente los estándares. La vieja escritura de «codificar para los "bugs"» ya no funciona en Mozilla, Netscape 6.x/7.x y todos los otros navegadores Gecko.
</p>
<h5 name="Ejemplo_-_Poniendo_formularios_en_una_tabla"> Ejemplo - Poniendo formularios en una tabla </h5>
<p><b>HTML no válida</b> para eliminar el salto de línea en <tt>&lt;FORM&gt;</tt>.
</p><p>En los antiguos navegadores, el resultado hacía que la celda TD envolviera herméticamente un elemento de entrada <code>input</code>.
</p>
<pre>&lt;table border="1"&gt;
  &lt;tr&gt;
    &lt;form name="formulario2"&gt;
      &lt;td&gt;
        &lt;input type="texto"&gt;
      &lt;/td&gt;
    &lt;/form&gt;
  &lt;/tr&gt;
&lt;table&gt;
</pre>
<p>Este acercamiento es comúnmente utilizado para dar la vuelta al hecho que <tt>&lt;FORM&gt;</tt> es un elemento en bloque en HTML y que simplemente empezará en una nueva línea en la página. Lamentablemente, éste código ya no es válido, puede provocar errores durante la presentación en pantalla y en la aplicación de las reglas de la hoja de estilo.
</p>
<h5 name="Uso_incorrecto_del_c.C3.B3digo_vac.C3.ADo_en_una_etiqueta_XML"> Uso incorrecto del código <i>vacío</i> en una etiqueta XML </h5>
<p>Numerosos autores utilizan la anotación vacía en etiqueta XML (<tt>&lt;tag /&gt;</tt>) en sus ficheros HTML. En XML, una etiqueta vacía no tiene <b>nunca</b> contenido. Las directivas de compatibilidad hacia atrás del XHTML estipulan que los elementos <b>vacíos</b> pueden ser codificados poniendo después del nombre de la etiqueta un espacio seguido de un signo como en "<tt>&lt;tag /&gt;</tt>". Para ser compatible, <b>necesita</b> tener un espacio antes del cierre " <tt>/&gt;</tt>". Además, se debe utilizar ésta codificación XML sólo para los elementos HTML que son siempre vacíos — y no para elementos HTML que poseen una etiqueta opcional de cierre.
</p><p>Por ejemplo, es correcta la forma: <tt>&lt;br /&gt;</tt> para codificar <tt>&lt;br&gt;</tt>, aún cuando no hay ventaja alguna de hacerlo en documentos HTML. Pero es <b>incorrecto</b> usar: <tt>&lt;option /&gt;</tt> para  <tt>&lt;option&gt;</tt>. Para entender por que, consideramos lo siguiente:
</p>
<table class="standard-table">

<tbody><tr>
<th> HTML sin etiqueta opcional de cierre </th><th> HTML equivalente con etiqueta opcional de cierre
</th></tr>
<tr>
<td width="50%"><pre>&lt;select&gt;
&lt;option&gt;Valor de la opción
&lt;/select&gt;</pre>
</td><td width="50%"><pre>&lt;select&gt;
&lt;option&gt;Valor de la opción&lt;/option&gt;
&lt;/select&gt;</pre>
</td></tr>
</tbody></table>
<p>Ahora veamos que pasa al utilizar la escritura de etiqueta XML vacía " /&gt;&lt;/tt&gt;".
</p>
<table class="standard-table">

<tbody><tr>
<th> HTML con código de etiqueta XML vacía </th><th> HTML equivalente con etiqueta de cierre
</th></tr>
<tr>
<td width="50%"><pre>&lt;select&gt;
&lt;option /&gt;Valor de la opción
&lt;/select&gt;</pre>
</td><td width="50%">
<pre>&lt;select&gt;
&lt;option&gt;&lt;/option&gt;Valor de la opción
&lt;/select&gt;</pre>
</td></tr>
</tbody></table>
<p>Es simplemente incorrecto. Si debe utilizar la anotación de etiqueta XML vacía, entonces hacerlo únicamente para elementos HTML que no tengan nunca contenido — <b>no</b> para elementos HTML que tienen un cierre opcional.
</p>
<h5 name="Las_identificaciones_.28ID.29_de_las_hojas_de_estilo_deben_ser_tenidas_en_cuenta"> Las identificaciones (ID) de las hojas de estilo deben ser tenidas en cuenta </h5>
<p>Gecko responde correctamente a los identificadores <code>ID</code> de la hoja de estilo y presentará bien este ejemplo, mientras que Internet Explorer que no los tiene en cuenta no lo presentará.
</p>
<pre>&lt;style type="text/css"&gt;
  #id1 { text-decoration: line-through; }
  #ID1 { text-decoration: underline; }
&lt;/style&gt;
&lt;div id="id1"&gt;
  Debería estar tachado (line-through)
&lt;/div&gt;
&lt;div id="ID1"&gt;
  Debería estar subrayado (underline)
&lt;/div&gt;</pre>
<p>-(EJEMPLO SUPRIMIDO)-
</p><p>Observe que el <a class="external" href="http://validator.w3.org/">verificador de HTML del W3C</a> señalará con una bandera a los atributos de los <code>ID</code> de HTML como duplicados sólo en el caso que difieran (sean diferentes). Parece ser que hay una inconsistencia entre la recomendación de HTML 4.01 y la declaración de SGML para el HTML en si los atributos del identificador <code>ID</code> se toman en cuenta o no. Esto es una lástima ya que el <a class="external" href="http://validator.w3.org/">verificador de HTML</a> es para los desarrolladores web uno de sus principales medios de aprendizaje de los estándares.
</p><p>Debido a este común error, Netscape 6.2 no hace caso a los atributos de <code>ID</code> de CSS en modo de compatibilidad aleatoria (quirks mode). Si se invoca el <i>modo de respeto de los estándares</i>, convendrá ser consistente en escribirlo en las hoja de estilo de manera que se respete.
</p>
<h5 name="Los_nombres_de_clase_de_la_hoja_de_estilo_deber.C3.ADan_ser_tomados_en_cuenta">  Los nombres de clase de la hoja de estilo deberían ser tomados en cuenta </h5>
<p>Gecko hace caso a los nombres de clase de las hojas de estilo (<code>CLASS</code>) y por eso presentará correctamente este ejemplo, mientras que Internet Explorer  hace caso omiso, por lo tanto no lo sacará bien en la pantalla.
</p>
<pre>&lt;style type="text/css"&gt;
  .class1 { font-size: 1em; }
  .CLASS1 { font-size: 2em; }
&lt;/style&gt;
&lt;div&gt;
&lt;div class="class1"&gt;
  Debería tener la medida de fuente: 1em;
&lt;/div&gt;
&lt;div class="CLASS1"&gt;
  Debería tener la medida de fuente: 2em;
&lt;/div&gt;</pre>
<p>-(EJEMPLO SUPRIMIDO)-
</p><p>Por este común error de los autores de páginas web, Netscape 6.2 tampoco hace caso de los atributos de clase <code>CLASS</code> en modo de compatibilidad aleatoria (<i>quirks mode</i>). Si se invoca el <i>modo de respecto de los estándares</i>, hay que definirlo correctamente en las hojas de estilo (CSS) para que sea tomado en cuenta.
</p>
<h5 name="Enlaces_.28URLs.29_relativos_incorrectos"> Enlaces (URLs) relativos incorrectos </h5>
<p>Una URL relativa se refiere al mismo servidor web que alberga a la página web.
</p>
<ul><li> Una URL relativa que lleva al directorio donde se encuentra la página sería así: <tt>directorio/pagina.html</tt>.
</li><li> Las URLs relativas que dirigen al directorio raíz del servidor web serían así: <tt>/directorio/pagina.html</tt>.
</li></ul>
<p>Los antiguos navegadores aceptaban la utilización incorrecta:  <tt><span class="plain">http://directorio/</span></tt> parar las direcciones relativas al directorio raíz del servidor web, pero no es el caso de los navegadores Gecko. Para especificar correctamente el enlace a una página del directorio raíz del servidor web, use esta forma: <tt>/directorio/pagina.html</tt>.
</p>
<h5 name="La_utilizaci.C3.B3n_inv.C3.A1lida_de_espacios_en_los_nombres_de_atributos_.28por_ejemplo:_mapas_de_im.C3.A1genes.29"> La utilización inválida de espacios en los nombres de atributos (por ejemplo: mapas de imágenes) </h5>
<p>Muchos autores parecen infectados por la manía de utilizar espacios en los nombres. Un atributo <a class="external" href="http://www.w3.org/TR/html401/types.html#h-6.2"><code>name</code> o <code>id</code></a> en HTML 4.01 no puede conformemente al W3 contener espacios. Esto puede dar problemas en los navegadores basados en Gecko, especialmente en los mapas de imágenes. Conviene, por eso, verificar que los nombres de atributos contengan <b>sólo</b> caracteres válidos.
</p>
<h4 name="Mala_codificaci.C3.B3n_debida_a_.22API.22_y_herramientas_anticuadas"> Mala codificación debida a "API" y herramientas anticuadas </h4>
<p><b>Problema: unas "APIs" o herramientas de edición obsoletas generan un código no estándar.</b>
</p><p>Muchas versiones antiguas de "API" de interacción entre navegadores comúnmente usadas como <a class="external" href="http://dynapi.sourceforge.net/">DYNAPI (en)</a>, no aguantan a Gecko por una u otra razón citada más arriba. Es igualmente el caso de antiguas versiones de herramientas de edición web como Macromedia Dreamweaver 2 y 3.
</p><p>Sin embargo las versiones más recientes de "API" y de herramientas web soportan a Gecko. Por ejemplo, <a class="external" href="http://dynapi.sourceforge.net/">DYNAPI (en)</a> es ahora mantenido en SourceForge y ofrece una versión compatible con Gecko. Las nuevas <a href="es/Herramientas_de_edici%c3%b3n_respetuosas_de_los_est%c3%a1ndares">Herramientas de edición respetuosas de los estándares</a> también soportan a Gecko.
</p>
<h4 name="Tipo_de_documento_.28DOCTYPE.29_impropio.2C_mal_codificado"> Tipo de documento (DOCTYPE) impropio, mal codificado </h4>
<p><b> Problema: el tipo de documento incorrecto puede alterar completamente la presentación de las páginas. </b>
</p><p>Gecko, Internet Explorer para Mac OS e Internet Explorer 6 utilizan todos la técnica de detección del tipo de documento para determinar la forma de presentación, si debe ser en modo compatible con los antiguos navegadores o conformemente a las normas W3C.
</p><p>Usando el tipo de documento apropiado en el HTML permite a los autores de páginas web hacer que soporten tanto, los viejos navegadores menos conformes, que los nuevos, especificando en él, el modo de composición elegido. Al paso del tiempo y con la progresiva desaparición de los viejos navegadores en el mercado, los autores de páginas web pueden efectuar la transición hacia las normas W3. (<a href="es/%c2%a1Libertad%2c_Igualdad%2c_Validez!">Artículo relacionado</a>).
</p><p>Mientras que la detección de la declaración del tipo de documento es útil para permitir el soporte de viejos navegadores, puede ser un problema para los de última generación como Netscape 6.x y Netscape 7.x si se especifica incorrectamente el modo de composición.
</p><p>Gecko tiene dos modos de composición: el de compatibilidad aleatoria (quirks) y el de respeto estricto de los estándares (standards). El modo aleatorio imita el comportamiento de Netscape Navigator 4 cuando el estricto sigue las recomendaciones para HTML y CSS del W3C. En particular, el modo estricto utiliza el modelo de caja CSS como se define en el <a class="external" href="http://www.w3.org/TR/REC-CSS2/visudet.html">Capítulo 10</a> de las recomendaciones sobre CSS 2. El modo de presentación es determinado con la ayuda en la declaración del tipo de documento (o de su carencia) al principio de documento HTML.
</p>
<h4 name="Escritura_inv.C3.A1lida_para_dejar_un_comentario"> Escritura inválida para dejar un comentario </h4>
<p>Gecko posee también tres modelos de análisis de compatibilidad: modo aleatorio (quirks), <a href="es/Modo_casi_est%c3%a1ndar_de_Gecko">modo casi-estándar</a> ({{mediawiki.interwiki('en', 'Gecko\'s_Almost_Standards_Mode', 'en')}}) y modo estricto de los estándares. El modo aleatorio permite la utilización no válida de más de dos guiones "--" para dejar un comentario, lo cual no dejan hacer los otros modos.
</p>
<pre>&lt;!---- Ésto es un comentario HTML '''inválido''' pero aceptado en el análisis aleatorio de comentario ----&gt;
&lt;!-- Ésto es un comentario '''válido''' aceptado en el análisis estricto de comentario --&gt;</pre>
<p>Para saber las reglas exactas de como se invoca desde la declaración en el tipo de documento al modo aleatorio vs. al modo estricto con los estándares, consulten <a href="es/Detecci%c3%b3n_del_tipo_de_documentos_en_Mozilla">este artículo</a>.
</p>
<h3 name="Codificaci.C3.B3n_de_plugins_.28peque.C3.B1as_aplicaciones_para_la_web.29"> Codificación de plugins (pequeñas aplicaciones para la web) </h3>
<p>Habrá visto que algunos "plugins" no se comportan de la misma forma en Gecko y en Netscape Navigator 4. Visite la página <a href="es/Plugins">Plugins</a> para más información sobre la codificación de los navegadores Gecko, el buen uso de las etiquetas, los cambios en la arquitectura comparado con la generación Netscape 4, y las sugerencias de estratégias para plugins.
</p>
<h3 name="Problemas_de_configuraci.C3.B3n_en_el_servidor_web"> Problemas de configuración en el servidor web </h3>
<h4 name="Tipos_MIME_especificados_incorrectamente"> Tipos MIME especificados incorrectamente </h4>
<p>Muchos servidores web especifican incorrectamente los tipos MIME para los ficheros. Los navegadores Gecko requieren que el servidor web defina correctamente el tipo MIME correspondiente al tipo de contenido:
</p>
<ul><li> HTML — <code>text/html</code>
</li><li> CSS — <code>text/css</code> <small><a href="es/Tipo_MIME_incorrecto_para_los_archivos_CSS">artículo relacionado</a>, ({{mediawiki.interwiki('en', 'Incorrect_MIME_Type_for_CSS_Files', 'en inglés')}})</small>
</li><li> XML — <code>text/xml</code>
</li><li> SVG — <code>image/svg+xml</code>
</li></ul>
<h4 name="Mala_ejecuci.C3.B3n_del_protocolo_HTTP"> Mala ejecución del protocolo HTTP </h4>
<p>Varios servidores ejecutan incorrectamente el protocolo HTTP, lo cual puede dar problemas en Netscape 6.
</p>
<h4 name="Mala_ejecuci.C3.B3n_del_protocolo_SSL"> Mala ejecución del protocolo SSL </h4>
<p>Los antiguos navegadores tal como Internet Explorer 4 et Netscape Navigator 4 ejecutaban versiones viejas del <a href="es/Introducci%c3%b3n_a_SSL">protocolo SSL</a>. La versión más común ahora es SSL 3.0, empero, la última versión: TLS (SSL 3.1), la cual es soportado por los navegadores Gecko, no lo es aún por varios servidores web. Desgraciadamente, varios procedimientos de SSL 3.0 ejecutan incorrectamente la negociación de qué versión de SSL hay que usar y fallan en la conexión con Gecko.
</p><p>Para más información sobre esta cuestión, lea: <a href="es/Notas_sobre_TLS_-_Servidores_SSL_3.0_intolerantes">Notas sobre TLS - Servidores SSL 3.0 intolerantes</a>.
</p>
<h3 name="Recursos_.C3.BAtiles"> Recursos útiles </h3>
<ul><li> Para empezar los autores de páginas web de nivel intermedio pueden consultar en <i>DevEdge Web Tune Up Wizard</i> a fin de puntear las áreas de contenidos que necesitan actualización para soportar a Gecko y otros navegadores que se apoyan en los <a href="es/Est%c3%a1ndares_Web">estándares</a> del W3C.
</li><li> <a class="external" href="http://webmaster.info.aol.com/">AOL Webmaster.info Site - Developing for Netscape Gecko</a> cubre las cuestiones más comunes a las que se enfrentan los autores de web y de como poner al día los códigos.
</li><li> La <a href="es/Herramientas">caja de herramientas</a> agrega muchas  utilidades valiosas del W3C para el diagnóstico de problemas en páginas web como serían: verificadores, ejemplos de código y mucho más.
</li><li> <a class="external" href="http://bugzilla.mozilla.org/enter_bug.cgi?format=guided">Report Mozilla browser bugs or web site compatibility problems</a>
</li><li> {{mediawiki.interwiki('en', 'Mozilla_Web_Developer_Community', 'Community')}}
</li></ul>
<h3 name="Referencias"> Referencias </h3>
<ul><li> <a href="es/Utilizaci%c3%b3n_de_est%c3%a1ndares_en_vuestras_p%c3%a1ginas_web">El uso de estándares</a>, <small>{{mediawiki.interwiki('en', 'Using_Web_Standards_in_your_Web_Pages', 'en inglés')}}</small>.
</li><li> <a href="es/Detecci%c3%b3n_del_navegador_y_soporte_entre_ellos">Detección del navegador y soporte entre ellos</a>, <small>{{mediawiki.interwiki('en', 'Browser_Detection_and_Cross_Browser_Support', 'en inglés')}}</small>
</li><li> <a href="es/Actualizaci%c3%b3n_de_p%c3%a1ginas_DHTML">Actualización de páginas DHTML</a>, <small>{{mediawiki.interwiki('en', 'Updating_DHTML_Web_Pages', 'en inglés')}}</small>
</li><li> <a href="es/Referencia_de_interacci%c3%b3n_de_elementos_HTML">Referencia de interacción de elementos HTML</a><small>{{mediawiki.interwiki('en', 'HTML_Element_Cross_Reference', 'en inglés')}}</small>
</li><li> <a href="es/Referencia_de_interacci%c3%b3n_de_modelo_de_objetos_del_documento">Referencia de interacción de modelo de objetos del documento</a>, <small>{{mediawiki.interwiki('en', 'DOM_Client_Object_Cross-Reference', 'en inglés')}}</small>
</li><li> <a href="es/Introducci%c3%b3n_a_la_interacci%c3%b3n_de_navegadores_JavaScript_y_HTML_din%c3%a1mico">Introducción a la interacción de navegadores JavaScript y HTML dinámico</a>, <small><a class="external" href="http://www.mozilla.org/docs/web-developer/xbdhtml/xbdhtml.html">en inglés</a></small>
</li><li> <a href="es/Cadenas_del_User_Agent_de_Gecko">Cadenas del User Agent de Gecko</a>
</li><li> <a href="es/Herramientas">Herramientas de desarrollo</a>
</li><li> <a href="es/El_detector_de_tipo_de_documento_en_Mozilla">El detector de tipo de documento en Mozilla</a>
</li><li> La <a href="es">portada</a> apunta a numerosos recursos.
</li></ul>
<div class="originaldocinfo">
<h3 name="Informaci.C3.B3n_sobre_el_documento_original"> Información sobre el documento original </h3>
<ul><li> Última actualización: 16 de Agosto de 2002
</li><li> Copyright : © 2001-2003 Netscape. All rights reserved.
</li></ul>
</div>
<p><span class="comment">Interwiki Languages Links</span>
</p>{{ wiki.languages( { "en": "en/Gecko_Compatibility_Handbook", "fr": "fr/Manuel_de_compatibilit\u00e9_Gecko" } ) }}
Revertir a esta revisión